@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/fraunces-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/fraunces-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/karla.woff2') format('woff2');
}

:root {
  --bg: #fbf7f0;
  --bg-alt: #f1e8d8;
  --sand: #e2d5bc;
  --surface: #fffdf8;
  --ink: #3a352f;
  --ink-soft: #6f6659;
  --ink-faint: #a2977f;
  --gold: #a8802f;
  --gold-soft: #c9a860;
  --gold-pale: #e6d3a8;
  --accent: #a8505f;
  --accent-soft: #bd6373;
  --accent-ink: #fffdf8;
  --line: rgba(58, 53, 47, 0.15);
  --shadow: 0 1px 2px rgba(58,53,47,0.06);
  --shadow-lift: 0 20px 40px -22px rgba(58,53,47,0.4);

  --font-display: 'Fraunces', ui-serif, Georgia, serif;
  --font-body: 'Karla', ui-sans-serif, system-ui, sans-serif;
  --container: 1180px;
  --header-h: 72px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
svg { display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); text-wrap: balance; margin: 0; font-weight: 600; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

.wrap { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 20px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(251, 247, 240, 0.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--header-h);
  padding: 12px 0;
}
.logo {
  display: inline-flex;
  align-items: baseline;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}
.logo .slash { color: var(--accent); font-style: normal; margin-right: 1px; }

.nav-desktop { display: none; align-items: center; gap: 20px; list-style: none; margin: 0; padding: 0; }
.nav-desktop a {
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-soft);
  position: relative;
  padding-bottom: 4px;
  white-space: nowrap;
}
.nav-desktop a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1.5px;
  background: var(--gold);
  transition: right 0.25s ease;
}
.nav-desktop a:hover, .nav-desktop a[aria-current="page"] { color: var(--ink); }
.nav-desktop a:hover::after, .nav-desktop a[aria-current="page"]::after { right: 0; }

.header-actions { display: flex; align-items: center; gap: 12px; }
.social-icons { display: none; align-items: center; gap: 10px; }
/* Die Weiche hat seit dem 27.08.2026 kein Menue mehr (siehe header() in
   build.py) - und damit auch keinen Menue-Knopf und keine Schublade. Die
   drei Social-Symbole standen auf dem Handy aber **nur** in dieser
   Schublade; ohne diese Regel wären sie dort ersatzlos verschwunden.
   Auf schmalen Geräten etwas enger, sonst wird es neben dem
   Kontakt-Knopf zu eng. */
.site-header--ohne-menue .social-icons { display: flex; gap: 8px; }
@media (min-width: 420px) {
  .site-header--ohne-menue .social-icons { gap: 12px; }
}
.social-icons a { color: var(--ink-soft); }
.social-icons a:hover { color: var(--accent); }
.social-icons svg { width: 18px; height: 18px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.88rem;
  text-decoration: none;
  padding: 11px 22px;
  border-radius: 100px;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.btn-gold { background: var(--gold); color: #fffdf8; }
.btn-gold:hover { background: #93701f; }
.btn-accent { background: var(--accent); color: var(--accent-ink); }
.btn-accent:hover { background: var(--accent-soft); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--ink); }
.btn-ghost:hover { border-color: var(--gold-soft); background: rgba(201,168,96,0.1); }
.btn-light { background: rgba(255,253,248,0.14); border-color: rgba(255,253,248,0.5); color: #fffdf8; }
.btn-light:hover { background: rgba(255,253,248,0.24); }

.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
}
.menu-toggle svg { width: 22px; height: 22px; }

.mobile-nav { display: none; flex-direction: column; padding: 6px 0 20px; border-top: 1px solid var(--line); }
.mobile-nav.open { display: flex; }
.mobile-nav a {
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
  padding: 13px 4px;
  border-bottom: 1px solid var(--line);
}
.mobile-nav a[aria-current="page"] { color: var(--gold); }
.mobile-socials { display: flex; gap: 20px; padding: 16px 4px 0; color: var(--ink-soft); }
.mobile-socials svg { width: 21px; height: 21px; }

/* ---------- Hero (landing) ---------- */
.hero {
  position: relative;
  /* Der Hero ist ein <section>, erbt sonst padding: 72px 0 - dadurch haengt
     der Text auf dem Handy zu hoch und landet mitten im Gesicht. */
  padding: 0;
  min-height: min(78vh, 620px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.hero-media {
  position: absolute;
  inset: 0;
  /* Ohne Ersatzwert, und das ist Absicht. Hier stand bis zum 27.08.2026
     "var(--hero-img, url('img/hero-landingpage.jpg'))". Das Stylesheet
     liegt aber in **jedem** Auftritt, und in musik/ und kunst/ gibt es
     das Banner der Startseite gar nicht - der Ersatzwert
     zeigte dort also auf eine Datei, die fehlt. Ausgeloest hat er nie,
     weil alle Seiten --hero-img selbst setzen; aber wer den Hero je
     ohne diese Angabe benutzt, bekaeme lieber gar kein Bild als einen
     Fehler im Netzwerkprotokoll. Gefunden von der Probe in
     onlinestellung.py. */
  background-image: var(--hero-img);
  background-size: cover;
  background-position: var(--hero-pos, 52% 16%);
}
.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(44,30,17,0.9) 0%, rgba(44,30,17,0.74) 26%, rgba(44,30,17,0.34) 50%, rgba(44,30,17,0.06) 72%, rgba(44,30,17,0.22) 100%);
}
.hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: 56px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.hero-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-pale);
  margin-bottom: 18px;
  text-shadow: 0 1px 10px rgba(40,26,14,0.6);
}
.hero-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.7rem, 10vw, 6rem);
  line-height: 1;
  letter-spacing: -0.015em;
  color: #fffdf8;
  text-shadow: 0 2px 26px rgba(40,26,14,0.5);
}
.hero-line {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(1.05rem, 2.5vw, 1.3rem);
  color: rgba(255,253,248,0.95);
  margin-top: 22px;
  text-shadow: 0 1px 14px rgba(40,26,14,0.6);
}
.hero-line--em {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.35rem, 3.6vw, 2rem);
  color: var(--gold-pale);
  margin-top: 6px;
  letter-spacing: 0.01em;
}
.hero-line--em .emoji { font-style: normal; font-size: 0.82em; }
.hero-scroll {
  margin-top: 40px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: rgba(255,253,248,0.82);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hero-scroll svg { width: 14px; height: 14px; animation: bounce 2.2s ease-in-out infinite; }
@keyframes bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* Hero der Unterseiten: gleicher Baustein, nur flacher */
/* Auf dem Handy hoch genug, damit der Textblock unter dem Gesicht sitzt
   und nicht darueber. Auf dem Desktop wird das vom Bannerformat abgeloest. */
.hero--sub { min-height: min(68vh, 560px); }

/* Helle Ausfuehrung fuer Banner mit hellem Hintergrund (Kunstmalerin).
   Cremefarbener Schleier statt braunem, dunkle Schrift statt heller. */
.hero--light .hero-scrim {
  background: linear-gradient(to top, rgba(251,247,240,0.95) 0%, rgba(251,247,240,0.86) 26%, rgba(251,247,240,0.44) 50%, rgba(251,247,240,0.06) 72%, rgba(251,247,240,0.14) 100%);
}
.hero--light .hero-eyebrow { color: var(--gold); text-shadow: none; }
.hero--light .hero-name { color: var(--ink); text-shadow: 0 2px 22px rgba(251,247,240,0.85); }
.hero--light .hero-line { color: var(--ink-soft); text-shadow: none; }
.hero--light .hero-line--em { color: var(--gold); }
.hero--light .hero-scroll { color: var(--ink-faint); }

/* Ausfuehrung fuer das Buehnenfoto der Saengerin-Seite.
   Zwei Dinge, beide auf Luisas Wunsch (21.08.2026):
   Das dunkle Buehnenfoto ist am 23.08.2026 gegen ein helles Sandsteinbanner
   getauscht worden, .hero--warm wird dadurch von nichts mehr gebraucht und
   ist geloescht. */

/* Ausfuehrung fuer das Sandstein-Banner der Saengerin-Seite (23.08.2026).
   Luisas Einwand: "Der Schleier ueber dem Banner ist viel zu stark und der
   Text geht in die Person hinein."
   Beides stimmte. Der Schleier von .hero--light deckt bis 50 % der Breite ab,
   auf diesem Banner steht Luisa aber ab 43 % - die halbe Person lag unter
   Creme. Und die Textspalte durfte bis 50 % laufen, also mitten hinein.
   Deshalb hier: schwaecherer Schleier, der bei 46 % zu Ende ist, und eine
   Textspalte, die vorher aufhoert. Das Bild selbst ist zusaetzlich neu
   beschnitten, siehe CLAUDE.md Abschnitt 6. */
/* Auf dem Handy gilt das nur zur Haelfte. Dort wird das Banner hochkant
   beschnitten, es bleibt keine freie Wand uebrig, und der Text steht
   zwangslaeufig ueber Luisa - wie auf den beiden anderen Bereichs-Seiten
   auch. Der Schleier bleibt hier also fast so kraeftig wie bei .hero--light,
   sonst liest die Schrift nicht mehr. Zurueckgenommen wird er erst ab
   900 px, wo links wieder Wand frei ist (siehe Breakpoint weiter unten). */
/* Nachgezogen am 05.09.2026. Luisa am Telefon: "Das Bild ist total weiss
   verschleiert, man sieht ueberhaupt nichts von mir selbst."
   Sie hatte recht: Der Schleier lag mit 0,84 schon bei 26 % der Hoehe und mit
   0,42 noch bei der Haelfte - also quer ueber Kleid, Haenden und Mikrofon, und
   oben lagen selbst ueber der Wand noch 0,1.
   Jetzt sitzt er als **schmales Band unten**, genau dort, wo die Schrift
   steht, und ist bei 60 % der Hoehe restlos zu Ende. Gesicht und Oberkoerper
   bleiben unberuehrt. Moeglich wird das erst dadurch, dass der Textblock im
   selben Zug nach unten gerueckt ist (siehe den Block bei max-width: 899px
   weiter oben) - beides gehoert zusammen, das eine ohne das andere macht
   entweder die Schrift unlesbar oder das Foto wieder blass. */
.hero--klar .hero-scrim {
  background: linear-gradient(to top, rgba(251,247,240,0.92) 0%, rgba(251,247,240,0.82) 20%, rgba(251,247,240,0.56) 34%, rgba(251,247,240,0.24) 47%, rgba(251,247,240,0.04) 60%, rgba(251,247,240,0) 100%);
}
/* Die goldene Kategoriezeile liegt auf dem Handy auf ihrem dunklen Haar und
   war dort kaum zu lesen. Heller Schimmer dahinter statt dunklem Schatten -
   auf dem Desktop faellt er nicht auf, weil dort helle Wand darunter liegt. */
.hero--klar .hero-eyebrow { text-shadow: 0 1px 12px rgba(251,247,240,0.95), 0 0 3px rgba(251,247,240,0.9); }

/* Der Textblock auf dem Handy: enger gesetzt, und weiter nach unten.
   Luisa am 05.09.2026, nach dem ersten Durchgang am echten Telefon: "Die
   Schrift im Hero ueberdeckt zu stark meine Person. Die Saetze muessen naeher
   zusammen untereinander sein und der Entdecken-Pfeil muss weiter runter."
   Der Block haengt am unteren Rand des Heros - enger gesetzt heisst deshalb
   automatisch: er faengt weiter unten an und laesst Gesicht und Oberkoerper
   frei. Zusammen mit dem kleineren Innenabstand unten rutscht er rund 60 px
   nach unten. Ab 900 px gilt das Bannerformat, dort nichts davon anfassen. */
@media (max-width: 899px) {
  .hero-eyebrow { margin-bottom: 10px; }
  .hero-line { margin-top: 12px; }
  .hero-line--em { margin-top: 4px; }
  .hero-scroll { margin-top: 24px; }
  .hero-inner { padding-bottom: 26px; }

  /* Gold ist auf den hellen Bannern am Handy zu schwach. Die Kategoriezeile
     steht dort auf Luisa selbst - auf ihrem geblümten Kleid, ihrer Bluse,
     ihrem Blazer -, und #a8802f ist genauso warm und fast so hell wie der
     Stoff darunter. "SÄNGERIN" war praktisch nicht zu lesen (Luisa am
     05.09.2026). Jetzt dasselbe warme Dunkelbraun wie der Name direkt
     darunter, der einwandfrei liest, dazu ein heller Schimmer dahinter.
     **Das Gold verschwindet dadurch nicht aus dem Hero** - es steht weiter
     in der kursiven Zeile ("Welcher ist deiner?").
     Gilt für alle drei hellen Banner, damit die Bereiche gleich aussehen.
     Ab 900 px liegt die Zeile auf freier Wand und bleibt golden. */
  .hero--light .hero-eyebrow {
    color: var(--ink);
    text-shadow: 0 1px 12px rgba(251,247,240,0.95), 0 0 3px rgba(251,247,240,0.9);
  }
  /* Derselbe Grund, nur noch eine Stufe schlimmer: "ENTDECKEN" stand in
     #a2977f, der hellsten Textfarbe der Seite, auf demselben Stoff. */
  .hero--light .hero-scroll {
    color: var(--ink-soft);
    text-shadow: 0 1px 10px rgba(251,247,240,0.9);
  }
}

/* ---------- Page hero (subpages) ---------- */
.page-hero {
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
  padding: 56px 0 52px;
}
.page-hero .eyebrow { justify-content: flex-start; }
.page-hero h1 {
  font-size: clamp(2rem, 5.5vw, 3.1rem);
  line-height: 1.1;
  max-width: 18ch;
}
.page-hero p {
  margin-top: 18px;
  color: var(--ink-soft);
  font-size: clamp(1rem, 2vw, 1.1rem);
  max-width: 54ch;
}
.page-hero .btn { margin-top: 28px; }
/* Einleitung direkt unter einem Bild-Hero: kein zweiter grosser Titel noetig */
/* Kein Rahmen unten: darunter folgen die Referenzen in derselben Farbe, die
   Linie wuerde den gemeinsamen Block mittendurch schneiden.
   Mittig ausgerichtet wie alle Abschnitte der Startseite - Luisa will auf den
   Unterseiten dieselbe ruhige Aufteilung. Nicht auf linksbuendig zurueck. */
.page-hero--intro { padding: 46px 0 30px; border-bottom: 0; text-align: center; }
.page-hero--intro h2 {
  font-size: clamp(1.6rem, 4vw, 2.3rem);
  line-height: 1.15;
  /* 600 px statt 22ch: "Musik, die deinen Moment trägt" ist bei voller
     Schriftgroesse 551 px breit und passte vorher nicht auf eine Zeile.
     Auf dem Handy bricht es weiter um, dort ist kein Platz - das ist so
     gewollt. Luisas Wunsch am 23.08.2026.
     760 px wie bei .section-head, damit auch "Abstrakte Acrylmalerei auf
     Leinwand" auf der Kunst-Seite einzeilig bleibt. */
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.page-hero--intro p {
  margin-top: 16px;
  color: var(--ink-soft);
  font-size: clamp(1rem, 2vw, 1.08rem);
  /* Vorher 56ch, das ergab sechs kurze Zeilen mitten auf der Seite -
     "so in die Mitte gequetscht" (Luisa). Mit 880 px sind es vier.
     Die Zeile ist damit laenger als die uebliche Lesebreite; das ist hier
     Absicht und gilt nur fuer diesen einen Einleitungsblock. */
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

/* Ein Zeilenumbruch, der nur am Bildschirm gilt.
   Im Einleitungstext der Saengerin-Seite soll der zweite Satz auf einer
   eigenen Zeile anfangen (Luisa, 23.08.2026) - am Bildschirm sind das dann
   zwei Zeilen je Satz. Auf dem Handy waere derselbe Umbruch schaedlich:
   dort steht "passt." allein mitten im Absatz. Deshalb erst ab 900 px. */
.br-desktop { display: none; }

/* ---------- Sections ---------- */
section { padding: 72px 0; }
.section--alt { background: var(--bg-alt); }
.section--sand { background: var(--sand); }
/* Schliesst an den Abschnitt darueber an - fuer die Referenzen, die direkt
   unter der Einleitung stehen und mit ihr einen Block bilden.
   Kein padding-top: 0: dann klebt die Ueberschrift an der Oberkante und der
   Abstand kommt allein von oben, was wie ein Versehen aussieht. 18 px hier
   plus 30 px unten an der Einleitung ergeben eine ruhige Fuge.
   Die Ueberschrift steht linksbuendig, nicht zentriert - sonst bricht die
   Flucht zur Einleitung darueber. */
.section--anschluss { padding-top: 18px; }
.section--zusammen { padding-bottom: 34px; }
.section--anschluss .section-head { margin-bottom: 30px; }
/* 680 px statt 52ch, damit auch laengere Ueberschriften auf eine Zeile
   passen - "Was Gaeste und Veranstalter sagen" braucht 613 px und stand
   vorher zweizeilig; die breiteste ist "Fuer welchen Moment brauchst du
   mich?" mit 726 px. Der erklaerende Satz darunter bleibt schmal, sonst
   liest er sich wie ein Fliesstext ueber die halbe Seite. */
.section-head { max-width: 760px; margin-bottom: 46px; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
/* Die kurze Dreierzeile unter der Ueberschrift: gleiche Schrift wie die
   Ueberschrift, damit sie Gewicht bekommt, aber deutlich kleiner. Der Satz
   darunter bleibt normaler Fließtext. */
.section-head .claim {
  font-family: var(--font-display);
  font-size: clamp(1.08rem, 2.2vw, 1.28rem);
  color: var(--ink);
  margin-bottom: 6px;
}
.section-head--center .eyebrow { justify-content: center; }
.section-head h2 { font-size: clamp(1.75rem, 4vw, 2.4rem); line-height: 1.15; }
/* :not(.eyebrow), sonst wuerde die schmale Lesebreite auch die goldene
   Kategoriezeile fassen - eine lange Zeile wie die fruehere Dreierzeile
   braucht 582 px und brach dadurch auf zwei Zeilen um. */
.section-head p:not(.eyebrow) { margin-top: 15px; color: var(--ink-soft); font-size: 1.03rem; max-width: 54ch; margin-left: auto; margin-right: auto; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
}
.eyebrow::before { content: ""; width: 24px; height: 1.5px; background: var(--gold); flex: none; }
.section-head--center .eyebrow::after { content: ""; width: 24px; height: 1.5px; background: var(--gold); flex: none; }

/* ---------- Category cards ---------- */
.cat-grid { display: grid; gap: 22px; grid-template-columns: 1fr; }
.cat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--shadow);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.cat-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
/* Bereiche, die noch nicht online sind. Die Karte ist bewusst kein Link:
   Sie hebt sich beim Darueberfahren nicht an, das Foto zoomt nicht, und der
   Mauszeiger bleibt der normale Pfeil. So merkt man auch ohne zu lesen,
   dass es hier (noch) nicht weitergeht. Das Bild bleibt aber zu sehen -
   die drei Karten sollen als Reihe zusammen wirken. */
.cat-card--bald { cursor: default; }
.cat-card--bald:hover { transform: none; box-shadow: var(--shadow); }
.cat-card--bald:hover .cat-media img { transform: none; }
.cat-bald {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: 100px;
  border: 1px solid var(--line);
  background: var(--bg-alt);
  color: var(--ink-faint);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.cat-media {
  position: relative;
  aspect-ratio: 5 / 6;
  overflow: hidden;
  background: var(--bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cat-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
/* Kleiner Schleier von unten, im selben Ton wie der Hero der jeweiligen
   Unterseite - damit Startseite und Unterseite als ein Auftritt wirken.
   Bewusst schwach: die Bilder sollen nicht abgedunkelt wirken. Liegt als
   CSS-Ebene ueber dem Foto, die Bilddateien bleiben unveraendert. */
.cat-media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.cat-media--dunkel::after {
  background: linear-gradient(to top, rgba(48,34,20,0.44) 0%, rgba(48,34,20,0.16) 34%, rgba(48,34,20,0) 62%);
}
.cat-media--hell::after {
  background: linear-gradient(to top, rgba(251,247,240,0.52) 0%, rgba(251,247,240,0.2) 34%, rgba(251,247,240,0) 62%);
}
.cat-card:hover .cat-media img { transform: scale(1.04); }
/* Fotos mit sichtbarem KI-Hinweis unten rechts zoomen **aus der Ecke
   heraus**, nicht aus der Mitte. Beim Zoom aus der Mitte wandern alle vier
   Raender nach aussen, und die Kennzeichnung sitzt keine 2 % vom Rand
   entfernt - sie waere also genau dann angeschnitten, wenn jemand
   hinschaut. Mit dem Ursprung unten rechts bleibt genau diese Ecke stehen,
   beschnitten wird oben und links. Die Bewegung ist dieselbe wie bei der
   dritten Karte. */
.cat-media--markiert img { transform-origin: 100% 100%; }
.cat-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--ink-faint);
  width: 100%; height: 100%;
  justify-content: center;
  background: repeating-linear-gradient(135deg, var(--bg-alt) 0 14px, #e9dfcb 14px 28px);
}
.cat-placeholder svg { width: 42px; height: 42px; opacity: 0.5; }
.cat-placeholder span { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.cat-body { padding: 24px 24px 28px; display: flex; flex-direction: column; gap: 11px; flex: 1; }
.cat-body h3 { font-size: 1.32rem; }
.cat-body p { color: var(--ink-soft); font-size: 0.95rem; }
.cat-link {
  margin-top: auto;
  padding-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 0.86rem;
  color: var(--accent);
}
.cat-link svg { width: 15px; height: 15px; transition: transform 0.25s ease; }
.cat-card:hover .cat-link svg { transform: translateX(4px); }

/* ---------- About ---------- */
.about-grid { display: grid; gap: 42px; align-items: center; }
.about-media {
  aspect-ratio: 4 / 5;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-alt);
}
/* Das Foto ist 2:3, der Kasten 4:5 - es wird also oben und unten beschnitten.
   Der Ausschnitt sitzt bewusst hoch, damit das Gesicht im oberen Drittel steht
   und nicht der Kopf angeschnitten wird. Hier zuschneiden statt in der Datei:
   die Bilddatei bleibt unveraendert und der Ausschnitt bleibt aenderbar. */
.about-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.about-text h2 { font-size: clamp(1.7rem, 3.8vw, 2.2rem); margin-bottom: 18px; }
.about-text p { color: var(--ink-soft); max-width: 56ch; }
.about-text p + p { margin-top: 14px; }
.about-sign {
  margin-top: 22px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--gold);
}

/* Ueber mich, Fassung vom 23.08.2026.
   Ueberschrift mittig -> eine Reihe gleich grosser Fotos -> Text darunter.
   Davor stand hier ein grosses Foto neben dem Text und darunter ein Streifen
   aus zwei kleineren. Luisa hat das verworfen ("sieht total kacke aus"), und
   sie hat recht: drei Kaesten in drei Groessen sind keine Gestaltung.
   Alle Kaesten haben deshalb dasselbe Format (4:5) und dieselbe Breite -
   auch ueber die drei Bereiche hinweg. */
.about-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.about-fotos .about-media { aspect-ratio: 4 / 5; }
/* Bei nur einem Foto genauso breit wie eines von dreien (1180 px Inhalt,
   zwei Luecken zu 14 px), damit die Bereiche gleich aussehen. */
.about-fotos--1 { grid-template-columns: 1fr; max-width: 384px; margin: 0 auto; }
.about-fotos--2 { grid-template-columns: repeat(2, 1fr); max-width: 782px; margin: 0 auto; }
/* Der Text steht darunter in einer ruhigen Spalte, nicht ueber die volle
   Breite - 1180 px waeren rund 110 Zeichen je Zeile und unlesbar. */
.about-text--unten { max-width: 68ch; margin: 34px auto 0; }
.about-text--unten p { max-width: none; }
.about-text--unten .about-sign { text-align: center; }

/* Foto links, Text rechts - Fassung vom 24.08.2026, auf Luisas Wunsch.
   Gilt nur, wo **ein einziges** Foto steht (Musik, Design). Die Kunst-Seite
   hat drei und behaelt die Reihe darueber.
   Wichtig: hier kommt kein Streifen mit weiteren Fotos darunter. Die
   Kombination "grosses Foto neben Text + zwei kleine darunter" hatte sie am
   23.08.2026 verworfen. */
.about-grid--neben { margin-top: 30px; align-items: stretch; }
/* Das Foto laeuft ueber die volle Hoehe des Textes daneben statt in einem
   festen 4:5-Kasten zu sitzen. Zwei Gruende: Bei mittiger Ausrichtung blieb
   oben und unten Leerraum, sobald der Text laenger wurde. Und die Dateien
   sind 1000 x 1500 px (2:3) - in einer hohen Spalte wird also kaum etwas
   beschnitten, im 4:5-Kasten dagegen rund ein Sechstel. Die Mindesthoehe
   greift, wenn der Text mal kurz ist. */
.about-grid--neben .about-media {
  max-width: 460px;
  aspect-ratio: auto;
  min-height: 420px;
}
/* Etwas groesser als der uebrige Fliesstext - der Block soll persoenlicher
   wirken als der Rest der Seite. */
.about-text--gross p { font-size: 1.06rem; line-height: 1.78; max-width: 54ch; }
/* Der Vorspann: ein Satz, der eine Aussage ist und kein Absatz. Etwas
   groesser und in der dunklen Textfarbe statt im gedaempften Grauton -
   dadurch liest er sich als Einstieg und nicht als erster Absatz. */
.about-lead {
  font-size: 1.18rem;
  line-height: 1.6;
  color: var(--ink);
  margin-bottom: 20px;
}
.about-text--gross .about-lead { font-size: 1.22rem; }
.about-text--gross .about-sign { font-size: 1.25rem; }

/* ---------- Bild-Band ---------- */
/* Ein kleiner Bildkasten mit ein paar Zeilen daneben, zum Einstreuen
   mitten in einen Abschnitt. Bewusst *kein* eigener <section>-Block: sonst
   geriete der Wechsel creme -> beige -> creme durcheinander.
   Das Bildformat ist 5:6 wie die Karten auf der Startseite. */
.bildband {
  display: grid;
  gap: 26px;
  align-items: center;
  margin-top: 46px;
}
.bildband-media {
  margin: 0;
  aspect-ratio: 5 / 6;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-alt);
  box-shadow: var(--shadow);
}
.bildband-media img { width: 100%; height: 100%; object-fit: cover; }
.bildband-text h3 { font-size: clamp(1.35rem, 3vw, 1.7rem); margin-bottom: 12px; }
.bildband-text p { color: var(--ink-soft); }
.bildband-text p + p { margin-top: 12px; }
.bildband-note {
  margin-top: 18px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.08rem;
  color: var(--gold);
}

/* ---------- Offer / service blocks ---------- */
/* Die Zeile unter den Genre-Karten, die zur Repertoireliste fuehrt.
   Mittig, mit Abstand nach oben - sie gehoert zu den Karten, steht aber
   nicht in ihrer Reihe. */
.listen-zeile { margin-top: 34px; text-align: center; }
.listen-note {
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--ink-faint);
}
/* Sichtbarer Platzhalter, solange die Datei fehlt - wie die schraffierten
   Bildkaesten: man soll die Luecke sehen, nicht uebersehen. */
.listen-platzhalter {
  display: inline-block;
  max-width: 620px;
  padding: 16px 22px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: var(--bg);
  color: var(--ink-faint);
  font-size: 0.86rem;
  line-height: 1.6;
}
.listen-platzhalter code {
  font-size: 0.92em;
  color: var(--ink-soft);
}
/* Der Verweis auf Social Media am Ende des Repertoires. Er hat am
   27.08.2026 den Abschnitt "Live erleben" ersetzt und steht bewusst in
   derselben .listen-zeile wie der Knopf zur Repertoireliste darueber —
   erst was ich singe, dann wie es klingt. Die Linie darueber trennt die
   zwei, ohne einen eigenen Abschnitt aufzumachen (das haette die
   Farbfolge creme/beige durcheinandergebracht). */
.listen-zeile--hoeren {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}
.listen-frage {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.22rem;
  color: var(--gold);
  margin: 0;
}
.listen-text {
  margin: 8px auto 0;
  max-width: 46ch;
  color: var(--ink-soft);
}
.listen-knoepfe {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
/* Symbol und Text im Knopf. Das Symbol ist etwas kleiner als die Schrift,
   sonst zieht es den Knopf optisch aus der Reihe der uebrigen Knoepfe. */
.listen-knoepfe .btn { display: inline-flex; align-items: center; gap: 9px; }
.listen-knoepfe .btn svg { width: 17px; height: 17px; flex: none; }

/* ---------- Fotogalerie (Musik) ---------- */
/* Eine Reihe Fotos zum Durchklicken, unter dem Hoerproben-Verweis. Sie
   benutzt dieselbe Mechanik wie das Referenzen-Karussell (.ref-karussell /
   .ref-spur / .ref-pfeil) - das Skript bedient beide ohne eine Zeile neuen
   Code. Hier stehen nur die Unterschiede: Bildformat und Spaltenzahl. */
.foto-galerie { margin-top: 30px; }
/* Fotos sind alle gleich hoch, anders als die Zitatkarten. Das "center"
   von .ref-spur wuerde bei ungleichen Hoehen mitteln - hier soll die Reihe
   oben buendig stehen. */
/* "flex: 1 1 0" ist Pflicht, nicht Kosmetik. Die Spur ist ein Flex-Element
   zwischen den zwei Pfeilen, und ihre Spaltenbreite ist ein Prozentwert.
   Beim Zitat-Karussell geht das gut, weil der Text den Karten von sich aus
   eine Breite gibt - an der rechnet der Browser die Prozente aus. Fotos
   haben "width: 100 %" und geben deshalb gar keine Breite vor: Prozent von
   Prozent, der Browser gibt auf, und die ganze Reihe fiel auf 79 px
   zusammen. Mit "flex: 1 1 0" bekommt die Spur zuerst den freien Platz
   zwischen den Pfeilen, und die Prozente haben etwas zum Rechnen.
   "min-width: 0" verhindert, dass die Reihe die Seite aufspannt. */
.ref-spur.foto-spur { align-items: stretch; flex: 1 1 0; min-width: 0; }
.foto-karte {
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--sand);
  box-shadow: var(--shadow);
}
/* 4:5 hochkant. Liefert Luisa ein Foto in einem anderen Verhaeltnis,
   schneidet der Browser mittig zu - deshalb: Motiv mittig, Luft am Rand.
   Zielmass der Dateien: 1000 x 1250 px. */
/* "height: auto" ist Pflicht, nicht Kosmetik: Das <img> traegt
   width="1000" height="1250" im Quelltext, damit der Browser den Platz
   schon vor dem Laden freihaelt und die Seite beim Nachladen nicht
   springt. Ohne "height: auto" gilt aber genau diese 1250 als Hoehe -
   die Karte war dann 1250 px hoch statt 416. Einmal gehabt und am
   Bildschirm gesehen. */
.foto-karte img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
/* Spaltenzahl: 1 - 2 - 3, wie beim Zitat-Karussell.
   **Die doppelte Klasse ist noetig, nicht schoen:** Die Regeln fuer
   .ref-spur stehen weiter unten in dieser Datei und haetten bei gleicher
   Spezifitaet gewonnen - die Fotos standen dann trotz eigener Regel in
   der Spaltenzahl der Zitate. Also .ref-spur.foto-spur. Wer die Bloecke
   umsortiert, muss das im Blick behalten.
   Vier nebeneinander waren ausprobiert und sind wieder raus: Auf einem
   1024er-Bildschirm blieben je Foto nur 200 px - das ist eine Briefmarke,
   kein Bild. Bei drei sind es 336 px auf dem Laptop. Lieber siebenmal
   klicken (oder wischen) als zwanzig Briefmarken. */
.ref-spur.foto-spur { grid-auto-columns: 100%; gap: 14px; }
@media (min-width: 620px) {
  .ref-spur.foto-spur { grid-auto-columns: calc((100% - 14px) / 2); }
}
@media (min-width: 1000px) {
  .ref-spur.foto-spur { grid-auto-columns: calc((100% - 28px) / 3); }
}

.offer-list { display: flex; flex-direction: column; gap: 24px; }
.offer {
  display: grid;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.offer-media { position: relative; aspect-ratio: 16 / 10; background: var(--bg-alt); }
.offer-media img { width: 100%; height: 100%; object-fit: cover; }
.offer-slot {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px;
  color: var(--ink-faint);
  background: repeating-linear-gradient(135deg, var(--bg-alt) 0 14px, #e9dfcb 14px 28px);
  text-align: center;
  padding: 20px;
}
.offer-slot svg { width: 34px; height: 34px; opacity: 0.5; }
.offer-slot span { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; }
.offer-body { padding: 26px 26px 30px; display: flex; flex-direction: column; gap: 12px; }
.offer-body h3 { font-size: 1.28rem; }
.offer-body p { color: var(--ink-soft); font-size: 0.96rem; }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
/* Anklickbare Variante: dieselbe Form wie ein Schlagwort, aber mit Symbol
   und Reaktion beim Darueberfahren - sonst waere nicht zu erkennen, dass
   man draufdruecken kann. Etwas mehr Luft rechts und links als beim
   stummen Kaestchen, damit es sich anfassen laesst (Fingerbreite). */
.tag--link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  text-decoration: none;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.tag--link svg { width: 15px; height: 15px; flex: none; }
.tag--link:hover, .tag--link:focus-visible {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--surface);
}
.tag {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--gold);
  background: rgba(201,168,96,0.16);
  border: 1px solid rgba(168,128,47,0.28);
  padding: 4px 11px;
  border-radius: 100px;
}

/* ---------- Feature grid (simple cards) ---------- */
.feature-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
.feature {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 26px 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  box-shadow: var(--shadow);
}
.feature-icon { width: 34px; height: 34px; color: var(--gold); }
.feature h3 { font-size: 1.12rem; }
.feature p { color: var(--ink-soft); font-size: 0.94rem; }
.feature ul { margin: 4px 0 0; padding-left: 18px; color: var(--ink-soft); font-size: 0.94rem; display: flex; flex-direction: column; gap: 6px; }

/* ---------- Social-Media-Kasten ---------- */
.social-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold);
  border-radius: 3px;
  padding: clamp(28px, 4vw, 46px);
  box-shadow: var(--shadow);
}
.social-panel .section-head { margin-bottom: 30px; }
.social-projects { display: grid; gap: 22px; grid-template-columns: 1fr; }
.social-project { display: flex; flex-direction: column; gap: 13px; }
.social-media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
}
.social-media img { width: 100%; height: 100%; object-fit: cover; }
.social-project h3 { font-size: 1.05rem; }
.social-project p { color: var(--ink-soft); font-size: 0.92rem; }
.social-platform {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gold);
}
.social-platform svg { width: 15px; height: 15px; }
.social-follow {
  margin-top: 32px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.social-follow p { color: var(--ink-soft); font-size: 0.94rem; flex: 1 1 220px; margin: 0; }
.social-follow-links { display: flex; flex-wrap: wrap; gap: 10px; }
.social-follow-links a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 9px 17px;
}
.social-follow-links a:hover { border-color: var(--gold); color: var(--gold); }
.social-follow-links svg { width: 16px; height: 16px; }

/* ---------- Fragen & Antworten (Aufklapper) ---------- */
/* Basiert auf <details>/<summary>. Das Dreieck, das Browser von Haus aus
   davorsetzen, wird ausgeblendet - wir zeigen stattdessen den Pfeil rechts. */
.faq-list { display: grid; gap: 12px; max-width: 760px; margin: 0 auto; }
.faq-item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: var(--shadow);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { content: ""; }
.faq-item summary:hover { color: var(--accent); }
.faq-item summary:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; }
.faq-arrow {
  flex: none;
  color: var(--gold);
  display: flex;
  transition: transform 0.25s ease;
}
.faq-arrow svg { width: 17px; height: 17px; }
.faq-item[open] .faq-arrow { transform: rotate(180deg); }
.faq-answer {
  padding: 0 20px 20px;
  color: var(--ink-soft);
  font-size: 0.96rem;
  line-height: 1.6;
}
.faq-answer p { margin: 0 0 12px; }
.faq-answer p:last-child { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .faq-arrow { transition: none; } .ref-spur { transition: none; } }

/* ---------- Price cards ---------- */
.price-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
.price-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 28px 24px 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--shadow);
}
.price-card--feature { border-color: var(--gold-soft); box-shadow: 0 14px 30px -20px rgba(168,128,47,0.7); }
.price-card h3 { font-size: 1.18rem; }
.price-amount { font-family: var(--font-display); font-size: 1.7rem; color: var(--gold); font-weight: 600; }
.price-amount small { font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; color: var(--ink-faint); display: block; margin-top: 2px; letter-spacing: 0.02em; }
.price-card ul { margin: 6px 0 0; padding-left: 18px; color: var(--ink-soft); font-size: 0.93rem; display: flex; flex-direction: column; gap: 7px; }
.price-note { font-size: 0.88rem; color: var(--ink-faint); margin-top: 26px; max-width: 60ch; }

/* Der Einstiegspreis auf der Saengerin-Seite. Stand vorher als graue
   Fussnote unter den Karten - Luisa fand das zu beilaeufig fuer die
   einzige Zahl auf der ganzen Seite. Jetzt eine eigene helle Karte,
   mittig, mit der Zahl in Gold. */
.preis-start {
  max-width: 640px;
  margin: 34px auto 0;
  padding: 30px 34px 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 3px;
  box-shadow: var(--shadow);
  text-align: center;
}
.preis-zeile {
  font-family: var(--font-display);
  font-size: 1.45rem;
  line-height: 1.35;
  color: var(--ink);
}
.preis-zeile strong { color: var(--gold); font-weight: inherit; white-space: nowrap; }
.preis-text {
  margin-top: 14px;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--ink-soft);
}
.preis-fuss {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
  color: var(--ink-faint);
}

/* ---------- Testimonials ---------- */
.ref-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }

/* ---------- Stimmen zum Durchklicken ---------- */
/* Eine Reihe Karten, die seitlich laeuft, mit einem Pfeil links und rechts.
   Ohne JavaScript bleibt es eine Reihe, die sich mit Finger, Trackpad oder
   Tastatur schieben laesst - alle Stimmen sind also immer erreichbar. */
.ref-karussell { position: relative; display: flex; align-items: center; gap: 12px; }
.ref-spur {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: 20px;
  /* Pflicht, nicht Kosmetik - und genau dieselbe Falle wie bei .foto-spur
     weiter oben, nur hier uebersehen. Die Spur ist ein Flex-Element zwischen
     den beiden Pfeilen, und ihre Spaltenbreite ist ein Prozentwert. Ohne
     "flex: 1 1 0" rechnet der Browser diese Prozente gegen die Inhaltsbreite
     der Karten aus statt gegen den freien Platz - auf dem Handy fiel die
     Reihe damit auf 143 px zusammen. Folge: ein Wort je Zeile, alles an den
     linken Rand geklebt, und weil die laengste Karte dadurch ueber 1000 px
     hoch wurde, stand ueber und unter den kurzen Zitaten eine riesige
     Leerflaeche. Von Luisa am 05.09.2026 am Telefon gefunden. */
  flex: 1 1 0;
  min-width: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Platz fuer den Schatten der Karten, sonst wird er abgeschnitten. */
  padding: 4px;
  margin: -4px;
  /* Die eigene Bildlaufleiste ausblenden - gescrollt wird ueber die Pfeile
     oder mit dem Finger. */
  scrollbar-width: none;
  /* Jede Karte nur so hoch, wie ihr Zitat lang ist - und dann mittig zu
     den Nachbarn (Luisas Wunsch am 24.08.2026). Ohne das zieht das Raster
     alle auf die Hoehe der laengsten, und unter den kurzen Zitaten steht
     eine grosse leere Flaeche. */
  align-items: center;
}
.ref-spur::-webkit-scrollbar { display: none; }
.ref-spur:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.ref-spur > * { scroll-snap-align: start; }

.ref-pfeil {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 100px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease,
              opacity 0.2s ease;
}
.ref-pfeil svg { width: 20px; height: 20px; }
.ref-pfeil--zurueck svg { transform: rotate(180deg); }
.ref-pfeil:hover:not(:disabled) {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--surface);
}
.ref-pfeil:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
/* Gesperrt wird nur noch, wenn es nichts zu schieben gibt - wenn also alle
   Karten ohnehin nebeneinander stehen. Am Anfang und am Ende der Reihe sind
   seit dem 06.09.2026 **beide** Pfeile bedienbar: Hinter der letzten Karte
   kommt wieder die erste, vor der ersten die letzte. Vorher war jeweils
   einer der beiden aus, und man kam nur in eine Richtung weiter.
   Sichtbar bleiben sie trotzdem - ausblenden liesse das Layout springen. */
.ref-pfeil:disabled { opacity: 0.3; cursor: default; }
/* Solange JavaScript nicht gelaufen ist, sind die Pfeile ohne Funktion.
   Dann zeigen wir sie erst gar nicht. */
.ref-karussell:not([data-bereit]) .ref-pfeil { display: none; }

@media (min-width: 760px) {
  .ref-spur { grid-auto-columns: calc((100% - 20px) / 2); }
}
@media (min-width: 1000px) {
  .ref-spur { grid-auto-columns: calc((100% - 40px) / 3); }
}
/* Auf dem Handy stehen die beiden Pfeile **unter** der Reihe statt daneben.
   Nebeneinander fressen sie 112 der 335 px Breite - ein Drittel des Bildschirms
   fuer zwei Knoepfe, und die Karte wird zur schmalen Saeule am linken Rand.
   Unten drunter bekommt die Karte die volle Breite und bleibt trotzdem
   bedienbar (Luisa am 05.09.2026). Gilt auch fuer die Fotogalerie, die
   dieselbe Mechanik benutzt. */
@media (max-width: 759px) {
  .ref-karussell { flex-wrap: wrap; justify-content: center; row-gap: 18px; }
  /* 100 % als Basis heisst: eigene Zeile, ganze Breite. "order: -1" holt sie
     dabei vor die Pfeile zurueck.
     "align-items: start" und "overflow-y: hidden" gehoeren zur Hoehe, die
     site.js hier setzt: die Reihe ist immer nur so hoch wie die Karte, die
     gerade zu sehen ist. Mittig zentriert wuerde eine hoehere Nachbarkarte
     beim Wischen oben **und** unten herausragen, und ohne "hidden" bekaeme
     die Reihe dabei eine senkrechte Bildlaufleiste. */
  .ref-spur { flex: 1 1 100%; order: -1; align-items: start; overflow-y: hidden; transition: height 0.28s ease; }
  /* Mittig statt linksbuendig - wie alle Abschnitte auf dem Handy.
     Ausdruecklich Luisas Wunsch am 05.09.2026. */
  .ref-card { text-align: center; align-items: center; }

  /* **Die Fotogalerie macht das nicht mit** (Luisa am 06.09.2026). Dort
     standen beide Pfeile nebeneinander unter dem Bild; sie moechte einen
     Pfeil links, das Bild in der Mitte, einen Pfeil rechts. Bei den Zitaten
     bleibt es beim Stapel: Text braucht die ganze Breite, ein Foto nicht.
     Damit vom Bild trotzdem genug uebrig bleibt, sind die beiden Knoepfe
     hier kleiner und ruecken naeher heran: 2 x 36 px plus 2 x 8 px Abstand
     nehmen 88 der 335 px - das Foto behaelt 247 px. */
  .foto-galerie .ref-karussell { flex-wrap: nowrap; gap: 8px; }
  .foto-galerie .ref-spur { flex: 1 1 0; order: 0; }
  .foto-galerie .ref-pfeil { width: 36px; height: 36px; }
  .foto-galerie .ref-pfeil svg { width: 17px; height: 17px; }
}
.ref-card {
  /* Pflicht: Die Karte ist ein <figure>, und dafuer bringt jeder Browser von
     sich aus "margin: 1em 40px" mit. Genau diese 40 px links und rechts haben
     die Karte in ihrer Spalte um 80 px schmaler gemacht als die Spalte selbst
     - auf dem Handy blieben von 335 px noch 255 uebrig, das Zitat brach nach
     wenigen Woertern um und stand sichtbar links geklebt. .foto-karte setzt
     das seit jeher zurueck, hier war es vergessen (Luisa am 05.09.2026).
     Auch am Rechner werden die Karten dadurch breiter - so war das Raster mit
     seinen 20 px Abstand von Anfang an gemeint. */
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 26px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: var(--shadow);
}
.ref-stars { display: flex; gap: 3px; color: var(--gold-soft); }
.ref-stars svg { width: 14px; height: 14px; }
.ref-card blockquote { margin: 0; font-family: var(--font-display); font-style: italic; color: var(--ink); font-size: 1.02rem; line-height: 1.55; }
.ref-who { font-size: 0.8rem; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.05em; margin-top: auto; }
/* Freier Platz fuer eine Stimme, die noch kommt (seit 23.08.2026).
   Sichtbar schraffiert wie die Bildplatzhalter - so ist auf einen Blick
   klar, dass hier nichts fehlt, sondern noch etwas hinkommt. Erfundene
   Zitate stehen hier ausdruecklich nicht (Arbeitsregel 5). */
.ref-card--offen {
  background: repeating-linear-gradient(135deg, var(--bg-alt) 0 14px, #e9dfcb 14px 28px);
  box-shadow: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 168px;
  color: var(--ink-faint);
}
.ref-card--offen svg { width: 26px; height: 26px; opacity: 0.5; }
.ref-card--offen span { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }

/* ---------- Gallery ---------- */
.gallery-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 64%;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x proximity;
}
.gallery-item {
  scroll-snap-align: start;
  aspect-ratio: 4 / 5;
  border-radius: 3px;
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--bg-alt);
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.gallery-slot {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px; color: var(--ink-faint);
  background: repeating-linear-gradient(135deg, var(--bg-alt) 0 14px, #e9dfcb 14px 28px);
}
.gallery-slot svg { width: 28px; height: 28px; opacity: 0.5; }
.gallery-slot span { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }

/* ---------- Werkschau: das Produkt gross, Angaben darunter ---------- */
.werk-grid { display: grid; gap: 20px; grid-template-columns: 1fr; }
.werk-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
  transition: transform 0.45s ease, box-shadow 0.45s ease;
}
.werk-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lift); }
.werk-media { aspect-ratio: 4 / 5; background: var(--bg-alt); overflow: hidden; }
.werk-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.werk-card:hover .werk-media img { transform: scale(1.04); }
/* Quer fuer Designarbeiten - Karten, Flyer und Websites sind selten hochkant. */
.werk-grid--quer .werk-media { aspect-ratio: 4 / 3; }
.werk-body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.werk-title { font-family: var(--font-display); font-size: 1.12rem; margin: 0; line-height: 1.3; }
.werk-meta {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.werk-note { margin: 0; font-size: 0.93rem; color: var(--ink-soft); }
/* Klarstellung, dass die Gemälde Handarbeit sind - steht direkt über der
   Werkschau, weil genau dort die Frage aufkommt. Bewusst etwas kräftiger
   als der Einleitungstext, aber ohne Kasten oder Warnfarbe. */
.kein-ki {
  margin: 16px auto 0;
  max-width: 62ch;
  font-size: 0.95rem;
  color: var(--ink);
}
.kein-ki strong { color: var(--gold); }
.werk-link {
  margin-top: auto;
  padding-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.83rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold);
}
.werk-link svg { width: 15px; height: 15px; transition: transform 0.3s ease; }
.werk-card:hover .werk-link svg { transform: translateX(4px); }

/* ---------- Contact ---------- */
.contact { background: var(--bg-alt); }
.contact-grid { display: grid; gap: 40px; }
.contact-intro h2 { font-size: clamp(1.75rem, 4vw, 2.4rem); }
.contact-intro p { margin-top: 15px; color: var(--ink-soft); max-width: 46ch; }
.contact-direct { margin-top: 26px; display: flex; flex-direction: column; gap: 12px; }
.contact-direct a {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  font-weight: 600;
  color: var(--ink);
  font-size: 0.97rem;
}
.contact-direct a:hover { color: var(--accent); }
/* Die Ortsangabe steht über der E-Mail, ist aber kein Link - deshalb eine
   eigene Regel statt der für <a>. Farbe, Größe und Gewicht müssen mit der
   E-Mail-Zeile darunter übereinstimmen, sonst wirkt sie wie ausgegraut. */
.contact-ort {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-weight: 600;
  color: var(--ink);
  font-size: 0.97rem;
}
.contact-direct svg, .contact-ort svg { width: 18px; height: 18px; color: var(--gold); flex: none; }

form.contact-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 28px 24px 30px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: var(--shadow);
}
.field { display: flex; flex-direction: column; gap: 7px; }
.field label { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  font-family: var(--font-body);
  font-size: 0.97rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 12px 14px;
  width: 100%;
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold-soft); box-shadow: 0 0 0 3px rgba(201,168,96,0.2); }
.field-row { display: grid; gap: 18px; }
.form-consent { display: flex; gap: 11px; align-items: flex-start; font-size: 0.86rem; color: var(--ink-soft); }
.form-consent input { margin-top: 3px; accent-color: var(--gold); flex: none; }
.form-note { font-size: 0.82rem; color: var(--ink-faint); }
.form-status { font-size: 0.9rem; font-weight: 600; }
/* Spamfalle. Bewusst NICHT display:none und nicht visibility:hidden - manche
   Bots erkennen genau das und lassen das Feld dann leer. Stattdessen wird es
   aus dem sichtbaren Bereich geschoben. aria-hidden am Elternteil sorgt
   dafuer, dass Screenreader es ebenfalls nicht ansagen. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--ink);
  color: var(--bg);
  border-radius: 3px;
  padding: 46px 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}
.cta-band h2 { font-size: clamp(1.6rem, 3.8vw, 2.2rem); color: var(--bg); }
.cta-band p { color: rgba(251,247,240,0.76); max-width: 48ch; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 52px 0 30px; background: var(--bg); }
.footer-top { display: grid; gap: 34px; padding-bottom: 34px; border-bottom: 1px solid var(--line); }
/* Ort und E-Mail unter dem Fusstext der Weiche (Luisa am 27.08.2026).
   Aufbau und Symbole wie im Kontaktblock der Bereichs-Websites:
   Kartennadel ueber Briefumschlag, gleiche Groesse, gleiches Gewicht -
   es soll dieselbe Angabe an anderer Stelle sein, keine zweite.
   Farbe wie die E-Mail, nicht heller: Genau das war im Kontaktblock
   einmal falsch und sah aus wie ausgegraut. */
.footer-kontakt {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
}
.footer-kontakt > * {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: inherit;
  text-decoration: none;
}
.footer-kontakt svg { width: 16px; height: 16px; flex: none; color: var(--gold); }
.footer-kontakt a:hover { color: var(--accent); }
.footer-brand .logo { margin-bottom: 12px; }
.footer-brand p { color: var(--ink-soft); font-size: 0.93rem; max-width: 34ch; }
.footer-col h4 { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 15px; font-family: var(--font-body); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.footer-col a { text-decoration: none; color: var(--ink-soft); font-size: 0.93rem; }
.footer-col a:hover { color: var(--accent); }
.footer-bottom {
  padding-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  color: var(--ink-faint);
  font-size: 0.83rem;
}
.footer-bottom .legal { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-bottom a { text-decoration: none; color: var(--ink-faint); }
.footer-bottom a:hover { color: var(--accent); }

/* ---------- Legal pages ---------- */
.legal-body { max-width: 74ch; }
.legal-body h2 { font-size: 1.45rem; margin-top: 40px; margin-bottom: 12px; }
.legal-body h3 { font-size: 1.08rem; margin-top: 26px; margin-bottom: 8px; }
.legal-body p, .legal-body li { color: var(--ink-soft); font-size: 0.97rem; }
.legal-body p + p { margin-top: 12px; }
.legal-body ul, .legal-body ol { padding-left: 20px; display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.legal-body address { font-style: normal; color: var(--ink-soft); }

/* Stornostaffel in den AGB. Zwei Spalten (Zeitpunkt | Ausfallhonorar) liest
   man schneller als eine Aufzählung und verrutscht nicht zwischen Frist und
   Prozentsatz — genau wie in Luisas PDF. Der Rahmen darum darf scrollen:
   auf schmalen Handys ist "7 Tage vor der Veranstaltung bis einschließlich
   Veranstaltungstag" sonst nicht unterzubringen. */
.legal-body .legal-tabelle {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 0.94rem;
  color: var(--ink-soft);
}
.legal-body .legal-tabelle th,
.legal-body .legal-tabelle td {
  text-align: left;
  vertical-align: top;
  padding: 10px 14px 10px 0;
  border-bottom: 1px solid var(--line);
}
.legal-body .legal-tabelle th {
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
}
.legal-body .legal-tabelle tbody tr:last-child td { border-bottom: none; }
.legal-body .legal-tabelle td:last-child { white-space: normal; padding-right: 0; }

/* Die Fahrtkosten-Formel aus § 4. Abgesetzt, damit sie nicht als weiterer
   Absatz des Vertragstexts gelesen wird. */
.legal-body .legal-formel {
  margin: 14px 0;
  padding: 12px 16px;
  background: var(--bg-alt);
  border-left: 2px solid var(--gold-pale);
  border-radius: 3px;
  font-size: 0.94rem;
  line-height: 1.75;
}
/* Datumszeile am Ende von Impressum, Datenschutz und AGB. Abgesetzt, damit
   sie nicht als weiterer Absatz des letzten Abschnitts gelesen wird. */
.legal-body .legal-stand {
  margin-top: 40px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--ink-faint);
  font-size: 0.88rem;
}
/* ---------- Seite nicht gefunden (404) ---------- */
/* Steht für sich allein: kein Menü, keine Fußzeile. Sie soll niemanden
   festhalten, sondern in zwei Sekunden weiterleiten. */
.fehlerseite {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  background: var(--bg-alt);
  padding: 40px 0;
}
.fehlerseite .wrap { max-width: 620px; }
.fehlerseite .logo { font-size: 1.1rem; }
.fehler-nummer {
  font-family: var(--font-display);
  font-size: clamp(4rem, 16vw, 7rem);
  font-weight: 600;
  font-style: italic;
  line-height: 1;
  color: var(--gold-pale);
  margin: 26px 0 0;
}
.fehlerseite h1 {
  font-size: clamp(1.5rem, 5vw, 2.1rem);
  margin: 4px 0 0;
  text-wrap: balance;
}
.fehler-text {
  margin: 14px auto 0;
  max-width: 46ch;
  color: var(--ink-soft);
}
.fehler-wege {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.fehler-fuss {
  margin-top: 34px;
  font-size: 0.88rem;
  color: var(--ink-faint);
}
.fehler-fuss a { color: var(--gold); }

.notice {
  background: rgba(201,168,96,0.14);
  border: 1px solid rgba(168,128,47,0.3);
  border-left: 3px solid var(--gold);
  border-radius: 3px;
  padding: 18px 20px;
  color: var(--ink);
  font-size: 0.93rem;
  margin-bottom: 34px;
}
.notice strong { color: var(--gold); }

/* ---------- Reveal (nur wenn JavaScript läuft, sonst ist alles sofort sichtbar) ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; }
.js .reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity: 1; transform: none; } }

/* ---------- Breakpoints ---------- */
@media (min-width: 640px) {
  .field-row { grid-template-columns: 1fr 1fr; }
  .cta-band { padding: 52px 44px; }
}
@media (min-width: 760px) {
  .cat-grid { grid-template-columns: repeat(3, 1fr); }
  /* Seit 14.10.2026 hat die Weiche nur noch zwei Karten (Sängerin,
     Kunstmalerin). Ueber die volle Breite waere jede Karte doppelt so gross
     wie vorher und das Hochkantfoto fuellte den ganzen Bildschirm. Deshalb
     schmaler und mittig - jede Karte bleibt ungefaehr so breit wie in der
     alten Dreierreihe. */
  .cat-grid--2 { grid-template-columns: repeat(2, 1fr); max-width: 800px; margin-inline: auto; }
  .ref-grid { grid-template-columns: repeat(3, 1fr); }
  /* Bei vier Stimmen zwei Spalten statt drei - sonst haengt die vierte Karte
     allein in einer zweiten Reihe. Zwei mal zwei liest ausserdem besser,
     weil die Zitate unterschiedlich lang sind: kurze Reihe oben, lange
     unten, und keine Karte steht neben einer dreimal so hohen. */
  .ref-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  /* Fuenf Karten in zwei Spalten: die letzte ueber die ganze Breite, sonst
     steht sie allein neben einer Luecke - dasselbe Problem wie bei
     .ref-grid--4 darueber. */
  .feature-grid--5 > :last-child { grid-column: span 2; }
  .social-projects { grid-template-columns: repeat(3, 1fr); }
  .price-grid { grid-template-columns: repeat(3, 1fr); }
  .werk-grid { grid-template-columns: repeat(2, 1fr); }
  .about-grid { grid-template-columns: 0.85fr 1fr; }
  /* Bildkasten schmal, Text daneben. Bild links, bei --rechts gespiegelt. */
  .about-fotos { gap: 14px; }
  .bildband { grid-template-columns: 300px 1fr; gap: 38px; }
  .bildband--rechts { grid-template-columns: 1fr 300px; }
  .bildband--rechts .bildband-media { order: 2; }
  .offer { grid-template-columns: 1fr 1fr; }
  .offer-media { aspect-ratio: auto; min-height: 280px; }
  .offer:nth-child(even) .offer-media { order: 2; }
  .offer-body { justify-content: center; padding: 34px 34px 36px; }
  .contact-grid { grid-template-columns: 0.85fr 1fr; align-items: start; }
  .footer-top { grid-template-columns: 1.4fr repeat(3, 1fr); }
  /* Ohne die Spalte "Bereiche" - auf den drei eigenständigen Websites, die
     bewusst nicht aufeinander verweisen. Sonst bliebe rechts eine Spalte
     leer und der Block säße sichtbar zu weit links. */
  .footer-top--3 { grid-template-columns: 1.4fr repeat(2, 1fr); }
  /* Auf der Weiche steht rechts nur noch eine Spalte. 1.4fr + 1fr liesse
     den Markenblock ueber die halbe Breite laufen und den Fusstext in eine
     Zeile ziehen - deshalb hier engere Spalten und ein grosser Zwischenraum
     statt eines gestreckten Rasters. */
  .footer-top--2 { grid-template-columns: minmax(0, 460px) minmax(0, 1fr); }
  .gallery-strip { grid-auto-columns: 30%; }
}
@media (min-width: 900px) {
  /* Zwischen 900 und 1000 px wird es eng: Logo, sechs Menuepunkte, drei
     Icons und der Kontakt-Button muessen in eine Zeile. Deshalb hier engere
     Abstaende und etwas kleinere Schrift, ab 1000 px wieder normal. */
  .nav-desktop { display: flex; gap: 14px; }
  .nav-desktop a { font-size: 0.84rem; }
  .social-icons { display: flex; }
  .menu-toggle { display: none; }
  .mobile-nav { display: none !important; }

  .br-desktop { display: inline; }

  /* Hero im Bannerformat, Text links auf der freien Wandfläche */
  .hero {
    min-height: 0;
    width: 100%;
    height: min(41.667vw, 660px);
    align-items: center;
  }
  .hero-media { background-position: 50% 32%; }
  .hero-scrim {
    background:
      linear-gradient(to right, rgba(48,34,20,0.66) 0%, rgba(48,34,20,0.42) 26%, rgba(48,34,20,0.05) 50%, rgba(48,34,20,0) 66%),
      linear-gradient(to top, rgba(48,34,20,0.3) 0%, rgba(48,34,20,0) 45%);
  }
  .hero-inner {
    text-align: left;
    align-items: flex-start;
    padding-bottom: 0;
  }
  .hero--sub { height: min(38.462vw, 500px); }
  /* Textbreite wie auf der Startseite. Schriftgroessen, Schriftarten und
     Kursivsetzung stehen bewusst nur einmal bei .hero-name / .hero-line /
     .hero-line--em - hier nichts ueberschreiben, sonst laufen Startseite und
     Unterseiten typografisch auseinander. */
  .hero--sub .hero-inner > * { max-width: 50%; }
  /* Nur die Zeilenlaenge zusaetzlich zeichenbasiert begrenzt, damit lange
     Saetze umbrechen statt in die Person hineinzulaufen. */
  .hero--sub .hero-line { max-width: min(50%, 34ch); }
  /* Bewusst schwaecher als der braune Schleier der dunklen Ausfuehrung:
     die hellen Banner brauchen kaum Abdeckung, damit die dunkle Schrift
     liest - und das Foto soll sichtbar bleiben. */
  .hero--light .hero-scrim {
    background:
      linear-gradient(to right, rgba(251,247,240,0.72) 0%, rgba(251,247,240,0.5) 26%, rgba(251,247,240,0.12) 50%, rgba(251,247,240,0) 64%),
      linear-gradient(to top, rgba(251,247,240,0.24) 0%, rgba(251,247,240,0) 45%);
  }
  /* Deutlich zurueckgenommen gegenueber .hero--light und schon bei 33 % zu
     Ende - Luisa steht auf diesem Banner ab 33,5 % der Breite und soll nicht
     unter Creme verschwinden. Die Sandsteinwand ist hell genug, dass die
     dunkle Schrift auch mit wenig Abdeckung liest. */
  .hero--klar .hero-scrim {
    background:
      linear-gradient(to right, rgba(251,247,240,0.46) 0%, rgba(251,247,240,0.32) 15%, rgba(251,247,240,0.1) 25%, rgba(251,247,240,0) 33%),
      linear-gradient(to top, rgba(251,247,240,0.14) 0%, rgba(251,247,240,0) 40%);
  }
  .hero-inner > * { max-width: 50%; }

  /* Die Textspalte der Saengerin-Seite. Rechnung dahinter, damit das beim
     naechsten Banner nachvollziehbar bleibt:
     Luisa steht auf diesem Bild von 33,5 % bis 61 % der Breite. Der Text muss
     also **vor 33 % der Fensterbreite** zu Ende sein - und zwar bei jeder
     Fensterbreite.
     Der uebliche Weg, den Text in die 1180-px-Spalte zu setzen, scheitert
     daran: bei 1920 px faengt die Spalte erst bei 390 px an, "Luisa Loreen"
     ist 400 px breit, das Ende laege bei 41 % - mitten in ihr.
     Deshalb haengt der Text hier **am linken Rand** statt in der Mittelspalte.
     Der Abstand waechst mit dem Fenster (5vw, hoechstens 110 px), damit er nie
     angeklebt aussieht.
     Die 26vw fuer die Kinder sind knapp gerechnet: "Luisa Loreen" ist bei
     Schriftgroesse 4,4vw genau 25vw breit. Weniger als 26vw, und der Name
     bricht um. 5vw + 26vw = 31 % - bleibt also 2,5 % Luft bis zu ihr.
     **Preis dafuer:** Auf breiten Bildschirmen steht der Hero-Text nicht mehr
     buendig unter dem Logo. Das ist bewusst so - Luisa hat am 23.08.2026
     ausdruecklich verlangt, dass sie von keiner Schrift bedeckt wird und dass
     das Banner ungeschnitten bleibt. Beides zusammen laesst nichts anderes zu. */
  .hero--klar .hero-inner {
    max-width: none;
    margin-left: 0;
    padding-left: clamp(20px, 5vw, 110px);
    padding-right: 20px;
  }
  .hero--klar .hero-inner > * { max-width: min(26vw, 410px); }
  /* Ab etwa 1580 px hoert der Hero auf mitzuwachsen (Hoehe gedeckelt auf
     660 px), das Banner wird dann oben und unten beschnitten. Die uebrigen
     Seiten schneiden bei 32 % - hier waere das falsch, denn dann faellt
     Luisas Hand an der Huefte weg. Sie hat am 23.08.2026 ausdruecklich
     gesagt, dass **beide Haende** zu sehen bleiben muessen. Also von unten
     verankert: weggeschnitten wird nur oben, wo ohnehin nur Wand ist. */
  .hero--klar .hero-media { background-position: 50% 100%; }
  .hero-name { font-size: clamp(2.5rem, 4.4vw, 4.4rem); }
  .hero-line { font-size: clamp(1rem, 1.5vw, 1.18rem); }
  .hero-line--em { font-size: clamp(1.25rem, 2vw, 1.7rem); }
  .hero-eyebrow { font-size: 0.7rem; }
  .hero-scroll { margin-top: 32px; }
}
@media (min-width: 1000px) {
  .nav-desktop { gap: 26px; }
  .nav-desktop a { font-size: 0.9rem; }
  .social-icons { gap: 12px; }
  /* Spaltenzahl folgt der Kartenzahl. Ohne das stehen drei Karten in einem
     Vierer-Raster, die vierte Spalte bleibt leer und der Block sitzt sichtbar
     zu weit links - obwohl das Raster selbst mittig ist. */
  .werk-grid { grid-template-columns: repeat(3, 1fr); }
  .feature-grid { grid-template-columns: repeat(4, 1fr); }
  .feature-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .feature-grid--2 { grid-template-columns: repeat(2, 1fr); }
  /* Ab hier passen alle fuenf nebeneinander (rund 220 px je Karte), die
     Sonderregel von 760 px wird wieder aufgehoben. */
  .feature-grid--5 { grid-template-columns: repeat(5, 1fr); }
  .feature-grid--5 > :last-child { grid-column: auto; }
}
@media (min-width: 1150px) {
  .hero-inner > * { max-width: 42%; }
}

/* ---------- Handy im Querformat ---------- */
/* Breit und sehr flach - 812 x 375 beim iPhone. Ohne eigene Regel greift hier
   die Hochkant-Gestaltung, und die passt in beiden Richtungen nicht:
   - "Luisa Loreen" waechst mit 10vw auf 81 px und liegt quer ueber dem Gesicht.
   - Der Textblock ist hoeher als der Hero (305 zu 292 px). Weil er am unteren
     Rand haengt, wird er oben herausgeschoben - die Zeile "SÄNGERIN" klebte
     in der oberen Ecke, der Pfeil war abgeschnitten.
   Beides von Luisa am 05.09.2026 am Telefon gefunden.
   Also: flacherer Hero, deutlich kleinere Schrift, engere Abstaende. Der
   Block ist damit rund 170 statt 305 px hoch und sitzt geschlossen im
   unteren Drittel, unter ihrem Gesicht.
   Die Bedingung ist bewusst an die Hoehe geknuepft und nicht an die Breite:
   Ein Telefon quer ist unter 480 px hoch, ein Browserfenster am Rechner
   praktisch nie. Der Block steht am Dateiende, damit er die 900-px-Regeln
   ueberschreibt - sonst gaebe es beim iPhone Pro Max (932 px breit) Streit. */
@media (max-width: 899px) and (orientation: landscape) and (max-height: 480px) {
  /* Genau der sichtbare Rest unter der Kopfzeile - quer ist der Bildschirm
     so flach, dass jeder Pixel mehr den Entdecken-Pfeil unter den unteren
     Rand schiebt. "svh" ist die Hoehe **ohne** die eingeblendete Adresszeile
     des Telefons; wer das nicht kennt (aeltere Browser), ueberliest die
     zweite Zeile und bekommt die erste. */
  .hero, .hero--sub { min-height: 0; height: calc(100vh - 72px); }
  .hero, .hero--sub { height: calc(100svh - 72px); }
  .hero-inner { padding-bottom: 16px; }
  .hero-eyebrow { font-size: 0.62rem; letter-spacing: 0.14em; margin-bottom: 8px; }
  .hero-name { font-size: clamp(1.9rem, 4.6vw, 2.6rem); }
  .hero-line { font-size: 0.95rem; margin-top: 8px; }
  .hero-line--em { font-size: 1.15rem; margin-top: 3px; }
  /* Der Entdecken-Verweis faellt quer weg. Er kostet 44 px, und die sind
     hier genau der Unterschied zwischen "Luisa Loreen steht auf ihrem Kinn"
     und "steht auf ihrer Schulter". Verzichtbar ist er, weil quer der ganze
     Hero auf den Bildschirm passt: Es ist offensichtlich, dass es weiter
     nach unten geht. Hochkant bleibt er unveraendert stehen.
     Falls Luisa ihn auch quer haben will: diese eine Zeile loeschen. */
  .hero-scroll { display: none; }
  /* Quer ist der Hero so flach, dass der Textblock ueber die halbe Hoehe
     einnimmt - der schmale Schleier aus dem Hochkantformat endet dann schon
     ueber der Kategoriezeile, und "SÄNGERIN" in Gold stand ohne Abdeckung
     auf ihrem dunklen Haar. Hier reicht er deshalb hoeher hinauf, bleibt
     aber ueber dem Gesicht bei null. */
  .hero--klar .hero-scrim, .hero--light .hero-scrim {
    background: linear-gradient(to top, rgba(251,247,240,0.92) 0%, rgba(251,247,240,0.84) 26%, rgba(251,247,240,0.6) 44%, rgba(251,247,240,0.32) 58%, rgba(251,247,240,0.07) 72%, rgba(251,247,240,0) 100%);
  }
}

/* --- Sprunglink -----------------------------------------------------------
   Der erste Link jeder Seite. Er ueberspringt die Kopfzeile und fuehrt direkt
   zum Inhalt. Auf der Musik-Seite liegen 19 anklickbare Stellen vor dem
   eigentlichen Text - wer mit der Tabulatortaste bedient, muesste sie auf
   jeder Seite erneut durchgehen.

   Er ist NICHT mit display:none versteckt: Damit waere er auch fuer die
   Tabulatortaste weg und damit nutzlos. Stattdessen sitzt er ueber dem
   oberen Rand und rutscht beim Fokus herunter. Mit der Maus bekommt ihn
   niemand zu sehen. */
.sprunglink {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translate(-50%, -120%);
  z-index: 1000;
  padding: 0.7rem 1.4rem;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--gold);
  border-top: 0;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 6px 20px rgba(58, 53, 47, 0.18);
  font-family: 'Karla', system-ui, sans-serif;
  font-size: 0.95rem;
  text-decoration: none;
  transition: transform 0.18s ease;
}
/* Das Sprungziel selbst bekommt keinen Rahmen. Es ist ein ganzer
   Seitenbereich - ein Fokusrahmen darum saehe aus wie ein Fehler. Die
   Sichtbarkeit des Fokus stellen die Elemente darin wieder her. */
main[tabindex="-1"]:focus {
  outline: none;
}
.sprunglink:focus {
  transform: translate(-50%, 0);
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}