/* ═══════════════════════════════════════════════════════════════════
   Verena Höver — Sprecherinnen-Portfolio
   Editorial-Layout (Zeitungs-Masthead, Tracklist, Linien statt Cards),
   Farbwelt aus dem Logo: Navy, Gelb, Weiß auf hellem Blau.

   VIER REGELN. Wer hier etwas ergänzt, hält sich daran.

   1 FARBE   Die drei Logofarben und sonst keine.
             --navy #172b6a  = jeder Akzent: Links, Linien, Knöpfe, Marken.
             --gold #ffde59  = nur FLÄCHE, nie Schrift. Gelbe Schrift auf Hell
                               ist unlesbar; gelb gefüllt mit schwarzer Schrift
                               liegt bei 13,5:1.
             --sky           = Seite, --white = Papier (Fotos, Kacheln).
             Kein Rot mehr. Rot neben Logo-Navy kippt ins Trübe, und die
             Signalfarbe stand auf jeder zweiten Zeile.
   2 KANTE   Radius 0. Rund ist nur, was rund sein muss: Abspielknopf,
             Ablauf-Ziffern, Punkte. Kein neuer Zwischenwert.
   3 SCHRIFT Anfangsbuchstaben groß. Kein `text-transform: uppercase` auf
             Überschriften, Navigation oder Reitern. Versalien nur in den
             kleinen Mono-Labels.
   4 ABSTAND Aus der Skala --s1 … --s7. Keine krummen Zwischenwerte.

   Kontraste sind gerechnet (WCAG AA): Text 15,2:1 auf Hellblau, 13,5:1 auf
   Gold, Navy-Links 11,2:1, Weiß auf Navy 13,2:1, Formularrand 3,5:1.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --sky:#e6edfa; --sky-2:#d9e4f6; --white:#fff;
  --navy:#172b6a; --navy-soft:rgba(23,43,106,.08);
  --gold:#ffde59; --gold-soft:#fff3bf;
  --ink:#111726; --ink-70:#4a5568; --ink-50:#5f6b80;
  --rule:#b9c6de;         /* trennt: Haarlinien, dekorativ */
  --rule-strong:#8fa0c2;  /* trennt kräftig: Sektionsköpfe */
  --field:#6a7ca6;        /* begrenzt Formularfelder, 3,5:1 — muss sichtbar sein */
  --serif-d:'Instrument Serif',Georgia,serif;
  --serif:'Source Serif 4',Georgia,serif;
  --mono:'IBM Plex Mono','Courier New',monospace;
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem;
  --s5:1.5rem; --s6:2rem; --s7:3rem;
}

/* Sprungziele der Reiterzeile dürfen nicht unter ihr verschwinden. Die
   tatsächliche Höhe der Zeile misst site.js (--band-h) — am Handy bricht sie
   um und ist dann höher; 4.6rem ist nur der Wert ohne JavaScript. */
section[id]{scroll-margin-top:calc(var(--band-h, 4.6rem) + var(--s2))}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
/* overflow-x:hidden macht den Body zum Scroll-Container und setzt damit
   position:sticky ausser Kraft. `clip` schneidet genauso ab, ohne einen
   Scroll-Container zu erzeugen. Die hidden-Zeile bleibt als Rueckfall fuer
   aeltere Browser davor stehen — die bekommen dann keine angepinnte
   Reiterzeile, aber auch keinen waagerechten Balken. */
body{background:var(--sky);color:var(--ink);font-family:var(--serif);
  font-size:1.04rem;line-height:1.65;overflow-x:hidden;overflow-x:clip}
::selection{background:var(--navy);color:var(--white)}
img{max-width:100%;display:block}
a{color:inherit}
button{font-family:inherit;color:inherit}
.mono{font-family:var(--mono);font-size:.78rem;letter-spacing:.04em}
.wrap{max-width:1100px;margin:0 auto;padding:0 clamp(1.1rem,4vw,2.5rem)}

/* Links aus den Admin-Texten ([Text](https://…)). Eine Regel für alle
   Textblöcke — und `text-decoration:none` MUSS zur `border-bottom` dazu,
   sonst stehen zwei Striche übereinander (der Fehler vom 31.07.). */
.md-link{color:var(--navy);text-decoration:none;border-bottom:1px solid var(--navy)}
.md-link:hover{background:var(--gold);color:var(--ink)}

/* Sichtbarer Fokus für Tastaturbedienung */
:focus-visible{outline:3px solid var(--navy);outline-offset:2px}

/* ── Masthead ───────────────────────────────────────────── */
/* Die doppelte Abschlusslinie trägt seit 11.09. die Reiterzeile (.nav-band),
   die jetzt direkt unter dem Masthead steht — optisch bleibt alles gleich. */
.masthead{padding-top:clamp(1.2rem,3vw,2.2rem)}
.meta-line{margin:0;text-transform:uppercase;color:var(--ink-70);
  border-bottom:1px solid var(--rule);padding-bottom:.55rem}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}

/* Logo führt, der Namenszug ordnet sich unter (Verenas Punkte 2 und 3) */
.mast-top{display:flex;align-items:center;gap:clamp(1rem,4vw,2.6rem);flex-wrap:wrap;
  padding:clamp(.8rem,2.5vw,1.5rem) 0 var(--s2)}
/* 02.08. Punkt 4: anderthalbmal so groß wie vorher (232 → 348). */
.mast-logo{width:clamp(150px,27vw,348px);height:auto;flex:none}
.mast-words{flex:1;min-width:min(100%,16rem)}
.claim{font-family:var(--serif-d);font-style:italic;font-size:clamp(1rem,2.4vw,1.45rem);
  color:var(--navy);margin:0 0 .1rem;letter-spacing:.01em}
.name{font-family:var(--serif-d);font-weight:400;font-size:clamp(2.1rem,6.2vw,4.4rem);
  line-height:1.02;letter-spacing:-.01em}

/* Punkt 5: die Voice-Over-Zeile steht direkt unter dem Namen und ist groß.
   Die Genre-Liste kommt mit — der Satz endet auf „für“ und wird erst
   durch sie vollständig. Erst danach die Reiter-Zeile.
   02.08. Punkt 3: fast so groß wie der Namenszug (4,4 rem) — 3,2 rem. */
.mast-claim{font-family:var(--serif);font-size:clamp(1.5rem,4.4vw,3.2rem);
  font-weight:600;line-height:1.2;margin:0 0 var(--s4);max-width:22ch}
.mast-genres{list-style:none;margin:0 0 var(--s4);padding:0;
  display:flex;flex-wrap:wrap;gap:.45rem}
.mast-genres li{font-family:var(--mono);font-size:.84rem;letter-spacing:.02em;
  padding:.34rem .7rem;background:var(--gold);color:var(--ink);
  border:1px solid var(--navy)}

/* 02.08. Punkt 6: die Reiter sind der Weg durch die Seite und müssen kräftiger
   stehen als die gelben Genre-Boxen darüber, sonst klickt man die an.

   11.09.: Die Zeile bleibt beim Scrollen oben stehen und nimmt dabei die
   Sprachwahl mit (.nav-sprache, unten). Angepinnt wird das umgebende Band,
   nicht die Zeile selbst: Das Band ist ein direktes Kind von <body> und über
   die volle Fensterbreite gezogen, so bleibt es über die ganze Seite oben
   und deckt auch die Ränder ab. */
.nav-band{position:sticky;top:0;z-index:55;background:var(--sky);
  border-bottom:3px double var(--rule-strong)}
.index-nav{display:flex;justify-content:center;gap:clamp(.9rem,3.5vw,2.4rem);flex-wrap:wrap;
  border-top:1px solid var(--rule);padding:.85rem 0;font-size:1.14rem}
.index-nav a{text-decoration:none;color:var(--ink);font-weight:600;padding:.35rem .1rem;
  min-height:38px;display:inline-flex;align-items:center;gap:.4rem}
.index-nav a span{color:var(--navy);font-family:var(--mono);font-size:.76rem}
.index-nav a:hover{color:var(--navy);text-decoration:underline;text-underline-offset:4px}
/* Wo man gerade ist (setzt site.js beim Scrollen): dicker, in Navy und mit
   einem Balken darunter.
   Warum Kontur statt font-weight: Die Serifenschrift ist nur in 400 und 600
   geladen, 600 tragen schon alle Reiter — 700 sähe genauso aus. Einen
   700er-Schnitt nachzuladen würde zugleich jedes <b> und <strong> auf der
   Seite verändern. Die Kontur macht die Buchstaben kräftiger, ohne dass sich
   ihre Breite ändert — die Zeile springt beim Scrollen also nicht hin und her. */
.index-nav a[aria-current="location"]{color:var(--navy);
  -webkit-text-stroke:.035em currentColor;box-shadow:inset 0 -3px 0 var(--navy);
  /* Keine zusätzliche Hover-Unterstreichung: Am Handy bleibt :hover nach
     dem Antippen hängen, dann stünden dünne Linie und Balken doppelt. */
  text-decoration:none}
/* Sprachwahl in der Reiterzeile, kurz „DE · EN". Unsichtbar, solange die
   Zeile nicht eingerastet ist — dann steht die Sprachwahl ja noch in der
   Leiste ganz oben. site.js setzt .angepinnt, sobald die Zeile oben klebt.
   visibility statt display: Der Platz bleibt reserviert, sonst würden die
   Reiter beim Einrasten zur Seite rücken oder die Zeile neu umbrechen. */
/* Ab Tablet-Breite steht sie fest rechts außen und nimmt nicht am Umbruch
   der Reiter teil — sonst rutschte sie in einem Breitenbereich allein in eine
   zweite Zeile, die oben auf der Seite dann leer aussähe (gemessen 11.09.:
   deutsch 900–1000 px, englisch 800–900 px). Die Reiter halten ihr dafür
   rechts den Platz frei (am Handy etwas weniger, siehe @media 640px). */
.index-nav.mit-sprache{position:relative;padding-right:calc(var(--s7) + var(--s6))}
.nav-sprache{display:inline-flex;align-items:center;gap:var(--s1);
  padding-left:var(--s3);border-left:1px solid var(--rule);
  font-size:.74rem;letter-spacing:.08em;color:var(--ink-70);visibility:hidden;
  position:absolute;right:0;top:50%;transform:translateY(-50%)}
.nav-band.angepinnt .nav-sprache{visibility:visible}
.nav-sprache b{color:var(--ink);font-weight:600}
.nav-sprache span{color:var(--rule-strong)}
.index-nav .nav-sprache a{color:var(--navy);font-weight:400;min-height:32px;padding:0 .1rem}
.index-nav .nav-sprache a:hover{text-decoration:underline;text-underline-offset:4px}

/* ── Sprachumschalter ───────────────────────────────────── */
/* Schmaler Streifen ganz oben, über dem Masthead. Trägt bewusst dieselbe
   Behandlung wie die .meta-line direkt darunter — Mono, Versalien, Haarlinie
   —, damit der Seitenkopf eine Einheit bleibt und nicht zwei Tonfälle hat.
   Versalien sind hier nach Regel 3 zulässig: kleines Mono-Label, keine
   Seitennavigation. */
/* Die Leiste klebt NICHT: Sie scrollt mit weg, und auf der Startseite
   übernimmt die angepinnte Reiterzeile die Sprachwahl. Höhe aus der
   Abstandsskala zusammengesetzt (Regel 4), nicht frei gegriffen. */
.lang-bar{height:calc(var(--s6) + var(--s2));
  display:flex;align-items:center;background:var(--sky);
  border-bottom:1px solid var(--rule)}
.lang-bar > .wrap{width:100%}
.lang-nav{display:flex;justify-content:flex-end;align-items:center;gap:var(--s2);
  margin:0;font-size:.78rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-70)}
.lang-nav b{color:var(--ink);font-weight:600}
/* Nur die andere Sprache ist ein Link — die aktuelle steht als <b> daneben.
   Navy macht auf den ersten Blick klar, welche der beiden anklickbar ist. */
.lang-nav a{color:var(--navy);text-decoration:none;min-height:32px;
  display:inline-flex;align-items:center}
.lang-nav a:hover{text-decoration:underline;text-underline-offset:4px}
.lang-nav span{color:var(--rule-strong)}

/* Hinweisbalken, solange die englische Fassung nur als Vorschau läuft.
   Absichtlich laut — er darf nicht mit dem Seiteninhalt verwechselt werden.
   Weiß auf Navy liegt bei 13,2:1. */
.en-preview{margin:0;padding:var(--s2) var(--s4);text-align:center;
  background:var(--navy);color:var(--white);font-size:.78rem;
  letter-spacing:.08em;text-transform:uppercase}

/* ── Intro ──────────────────────────────────────────────── */
.intro{border-bottom:1px solid var(--rule)}
.intro-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(2rem,5vw,4.5rem);
  align-items:start;padding:clamp(2.2rem,5vw,3.6rem) clamp(1.1rem,4vw,2.5rem)}
/* 02.08. Punkt 2: ohne Kurz-Intro trägt die linke Spalte nur die zwei Knöpfe
   und daneben klafft am PC eine leere Fläche. Dann stehen Knöpfe und Foto als
   Paar mittig — sobald ein Intro-Text da ist, gilt wieder das Raster oben. */
.intro-grid.solo{grid-template-columns:auto auto;justify-content:center;
  align-items:center;gap:clamp(1.6rem,5vw,3.5rem)}
.intro-grid.solo .intro-ctas{flex-direction:column;align-items:stretch}
.statement{font-family:var(--serif-d);font-style:italic;font-weight:400;
  font-size:clamp(1.75rem,4.4vw,3.3rem);line-height:1.18;letter-spacing:-.01em;margin-bottom:var(--s6)}
.intro-ctas{display:flex;gap:.9rem;flex-wrap:wrap}

/* Punkt 6: Knöpfe blau, Genre-Boxen gelb */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  font-family:var(--mono);font-size:.82rem;letter-spacing:.06em;
  text-decoration:none;cursor:pointer;padding:.85rem 1.5rem;min-height:46px;
  background:var(--navy);color:var(--white);border:1.5px solid var(--navy);border-radius:0;
  transition:background .18s,color .18s,transform .18s}
.btn:hover{background:var(--ink);border-color:var(--ink);color:var(--white)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:var(--white);color:var(--navy)}
.btn.ghost:hover{background:var(--gold);color:var(--ink);border-color:var(--navy)}

/* Foto als Print mit Klebeband. Punkt 4: in Farbe, kein Graustufen-Filter. */
.portrait{justify-self:center;position:relative;width:min(300px,80vw)}
.portrait .print{background:var(--white);padding:.55rem .55rem 0;border:1px solid var(--rule);
  box-shadow:0 14px 34px -18px rgba(23,43,106,.45);transform:rotate(-2deg)}
.portrait.small .print{transform:rotate(1.5deg)}
.portrait img,.portrait .ph{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.portrait::before{content:'';position:absolute;top:-12px;left:50%;width:96px;height:26px;
  transform:translateX(-50%) rotate(-3deg);background:var(--gold);
  border:1px dashed rgba(23,43,106,.35);z-index:2}
.portrait figcaption{text-align:center;padding:.7rem 0 .9rem;color:var(--ink-50);
  text-transform:uppercase;background:var(--white);border:1px solid var(--rule);border-top:0;
  transform:rotate(-2deg);margin-top:-1px}
.portrait.small figcaption{transform:rotate(1.5deg)}

/* ── Sektions-Köpfe (Punkte 8 und 11) ───────────────────── */
section{scroll-margin-top:1rem}
.sec-head{display:flex;align-items:baseline;gap:1.1rem;flex-wrap:wrap;
  border-bottom:2px solid var(--rule-strong);padding:clamp(2.4rem,6vw,4.2rem) 0 .6rem;margin-bottom:var(--s5)}
.sec-head .num{color:var(--navy);font-weight:500}
.sec-head h2{font-family:var(--serif-d);font-weight:400;font-size:clamp(2rem,4.6vw,3.2rem);
  line-height:1.05;letter-spacing:.01em}
/* Das Nebenlabel steht direkt neben der Überschrift statt klein am rechten
   Rand, wo Verena es übersehen hat. */
.sec-head h2 .alt{font-size:.58em;color:var(--ink-70)}

/* ── 01 · Hörproben ─────────────────────────────────────── */
/* Punkt 9: die Auswahlreiter waren in Mono bei .78rem und wurden übersehen. */
.filter{color:var(--ink-50);margin-bottom:var(--s2);display:flex;flex-wrap:wrap;
  align-items:baseline;gap:.1rem .3rem;font-family:var(--serif);font-size:1.06rem}
.chip{background:none;border:0;cursor:pointer;font:inherit;color:var(--ink-70);
  padding:.45rem .3rem;min-height:44px}
.chip:hover{color:var(--navy);text-decoration:underline;text-underline-offset:4px}
.chip.active{color:var(--navy);font-weight:600;text-decoration:underline;
  text-decoration-thickness:2px;text-underline-offset:4px}
.chip-sep{color:var(--rule-strong);margin:0 .25rem;user-select:none}

.tracklist{list-style:none}
.track{position:relative;display:flex;align-items:center;gap:clamp(.7rem,2vw,1.3rem);
  padding:1.05rem 0 1.2rem;border-bottom:1px solid var(--rule)}
.track.hidden{display:none}
.track.empty{color:var(--ink-70)}
.t-play{width:46px;height:46px;flex:none;border:1.5px solid var(--navy);border-radius:50%;
  background:var(--white);color:var(--navy);cursor:pointer;display:grid;place-items:center;
  transition:background .18s,color .18s,border-color .18s;touch-action:manipulation}
.t-play:hover{background:var(--navy);color:var(--white)}
.track.playing .t-play{background:var(--gold);border-color:var(--navy);color:var(--navy)}
.t-play .ic-pause{display:none}
.track.playing .ic-play{display:none}
.track.playing .ic-pause{display:block}
.t-no{color:var(--ink-50);flex:none}
.t-body{flex:1;min-width:0}
.t-body b{font-weight:600;font-size:1.06rem}
/* Punkt 10: der Bereich steht fett direkt vor dem Titel, nicht klein am
   rechten Rand vor der Zeit. */
.t-kind{font-weight:700}
.track.playing .t-body b{color:var(--navy)}
.t-desc{display:block;color:var(--ink-70);font-size:.9rem;font-style:italic}
.ph-tag{color:var(--ink-50);border:1px solid var(--rule);padding:.1rem .45rem;
  font-size:.64rem;text-transform:uppercase;vertical-align:2px}
.t-time{color:var(--ink-50);flex:none;font-variant-numeric:tabular-nums}
.t-rec{display:none;width:9px;height:9px;border-radius:50%;background:var(--navy);flex:none;
  animation:blink 1.2s ease-in-out infinite}
.track.playing .t-rec{display:block}
.t-progress{position:absolute;left:0;right:0;bottom:-1px;height:14px;cursor:pointer;display:none}
.t-progress::before{content:'';position:absolute;left:0;right:0;bottom:6px;height:1px;background:var(--rule)}
.t-progress i{position:absolute;left:0;bottom:5px;height:3px;width:0;background:var(--navy);display:block}
.track.started .t-progress{display:block}
.tracks-note{color:var(--ink-50);margin-top:var(--s4);text-transform:uppercase}

/* ── 02 · Über mich ─────────────────────────────────────── */
.about-grid{display:grid;grid-template-columns:.65fr 1.35fr;gap:clamp(2rem,5vw,4rem);align-items:start}
.portrait.small{width:min(260px,70vw);justify-self:start;margin-top:.5rem}
.about-copy p{margin-bottom:var(--s4);max-width:62ch}
.about-copy strong{color:var(--navy);font-weight:700}
.dropcap>p:first-of-type::first-letter{font-family:var(--serif-d);font-size:3.6em;float:left;
  line-height:.82;padding:.06em .12em 0 0;color:var(--navy)}
.vita-head{margin:2.2rem 0 .8rem;text-transform:uppercase;color:var(--ink-70);
  border-bottom:1px solid var(--rule);padding-bottom:.4rem}
.vita ul{list-style:none}
.vita li{padding:.5rem 0 .5rem 1.6rem;border-bottom:1px dotted var(--rule);position:relative;color:var(--ink-70)}
.vita li::before{content:'—';position:absolute;left:0;color:var(--navy)}

/* ── 03 · Referenzen ────────────────────────────────────── */
.ref-table{border-top:1px solid var(--rule)}
.ref-row{display:grid;grid-template-columns:1.2fr 1fr auto;gap:var(--s4);align-items:baseline;
  padding:.85rem 0;border-bottom:1px solid var(--rule)}
.ref-row b{font-weight:600}
.ref-row span{color:var(--ink-70)}
.ref-row .mono{color:var(--ink-50);text-transform:uppercase;text-align:right}

/* ── 04 · Kontakt ───────────────────────────────────────── */
.contact-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,5vw,4.5rem);
  padding-bottom:clamp(3rem,7vw,5rem)}
.contact-intro p{max-width:46ch;margin-bottom:1.2rem}
/* Punkt 12: keine doppelte Unterstreichung. Entweder Linie oder
   text-decoration, nie beides. */
.contact-direct a{color:var(--navy);text-decoration:none;font-size:.92rem;
  border-bottom:1px solid var(--navy)}
.contact-direct a:hover{background:var(--gold);color:var(--ink)}
.field{margin-bottom:1.3rem}
.field label{display:block;text-transform:uppercase;color:var(--ink-70);margin-bottom:.15rem}
.field label em{font-style:normal;color:var(--ink-50);text-transform:none}
.frow.two{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem}
.input,textarea.input{width:100%;background:var(--white);border:1px solid var(--field);
  border-radius:0;color:var(--ink);font-family:var(--serif);font-size:1.05rem;
  padding:.5rem .6rem;transition:border-color .2s,box-shadow .2s}
.input:focus{outline:0;border-color:var(--navy);box-shadow:inset 0 0 0 1px var(--navy)}
textarea.input{resize:vertical;line-height:1.55}
.check-row{display:flex;gap:.7rem;align-items:flex-start;font-size:.86rem;color:var(--ink-70);margin-bottom:1.6rem}
.check-row input{width:17px;height:17px;margin-top:.2rem;accent-color:var(--navy);flex:none}
.check-row a{color:var(--navy)}
.btn.submit{width:100%}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden}
.form-msg{display:none;border:1.5px solid var(--navy);color:var(--navy);background:var(--navy-soft);
  padding:.75rem .9rem;margin-bottom:1.2rem}
.form-msg.show{display:block}
.contact-success{display:none;padding:var(--s5) 0}
.contact-success.show{display:block}
.stamp-ok{display:inline-block;color:var(--ink);border:2.5px solid var(--navy);
  padding:.55rem 1.1rem;font-size:1.05rem;letter-spacing:.14em;text-transform:uppercase;
  transform:rotate(-3deg);margin-bottom:var(--s4);background:var(--gold)}
.contact-success p{color:var(--ink-70)}

/* ── Kolophon ───────────────────────────────────────────── */
.colophon{border-top:3px double var(--rule-strong);padding:1.4rem 0 2.2rem;background:var(--sky-2)}
.colophon .wrap{display:flex;gap:1.4rem;flex-wrap:wrap;align-items:baseline;
  color:var(--ink-70);text-transform:uppercase}
.foot-links{display:flex;gap:1.2rem;margin-left:auto}
.foot-links a{color:var(--ink-70);text-decoration:none}
.foot-links a:hover{color:var(--navy);text-decoration:underline;text-underline-offset:4px}
.foot-note{width:100%;color:var(--ink-50);font-size:.7rem}

/* ── Legal-Seiten ───────────────────────────────────────── */
.legal-head{border-bottom:2px solid var(--rule-strong);padding:1.4rem 0 .8rem}
.legal-head .wrap{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);flex-wrap:wrap}
.legal-head b{font-family:var(--serif-d);font-weight:400;font-size:1.5rem}
.legal-head a{color:var(--ink-70);text-decoration:none}
.legal-head a:hover{color:var(--navy)}
.legal-wrap{max-width:720px;margin:0 auto;padding:2.6rem 1.4rem 4rem}
.legal-wrap h1{font-family:var(--serif-d);font-weight:400;font-size:2.4rem;margin-bottom:1.4rem}
.legal-wrap p,.legal-wrap li{color:var(--ink-70);margin-bottom:.9rem;font-size:.98rem}
.legal-wrap strong{color:var(--ink)}
.legal-wrap a{color:var(--navy)}
.legal-wrap ul{padding-left:1.2rem}
/* Hinweis unter einer Rechtsseite, die mangels Übersetzung noch den deutschen
   Text zeigt. Steht seit 21.09. unter statt über dem Text — er ist eine
   Fußnote zum Gelesenen, keine Ankündigung. */
.legal-hint{color:var(--ink-70);font-size:.8rem;letter-spacing:.05em;
  text-transform:uppercase;margin:var(--s5) 0 0;
  border-top:1px solid var(--rule);padding-top:var(--s3)}

/* ── Kontakt-Band ───────────────────────────────────────── */
.cta-band{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);
  background:var(--sky-2);padding:clamp(1.4rem,3.5vw,2.2rem) 0;text-align:center}
.cta-label{font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;
  color:var(--ink-70);margin:0 0 .55rem}
.cta-lines{font-family:var(--serif-d);font-size:clamp(1.25rem,3.4vw,2rem);margin:0;
  display:flex;justify-content:center;align-items:baseline;gap:.7rem;flex-wrap:wrap}
.cta-lines a{text-decoration:none;border-bottom:2px solid var(--navy);padding-bottom:.05rem}
.cta-lines a:hover{background:var(--gold);color:var(--ink);border-color:var(--navy)}
.cta-lines .sep{font-family:var(--mono);font-size:.78rem;color:var(--ink-50);
  text-transform:uppercase}

/* ── Synchron-Demos (extern, passwortgeschützt) ─────────── */
/* 02.08. Punkt 7.2: die drei Synchron-Demos sind Videos und liegen auswärts.
   Als Auswahlreiter geht das nicht — sie filtern nichts, sie führen weg. Also
   ein eigener Kasten direkt unter den Reitern, vor der ersten Hörprobe.
   03.08.: Sie zeigen fremdes Filmmaterial und liegen deshalb passwortgeschützt
   bei OneDrive. Der Kasten hat jetzt zwei Teile — oben der Link (nur wenn eine
   Adresse hinterlegt ist), unten der Hinweis mit dem Knopf zum Anfordern. */
.demo-ext{margin:0 0 var(--s5);border:1.5px solid var(--navy)}
.de-link{display:flex;align-items:baseline;gap:.4rem .9rem;flex-wrap:wrap;
  background:var(--gold);color:var(--ink);padding:.8rem 1.1rem;text-decoration:none}
.de-link:hover{background:var(--gold-soft)}
.demo-ext b{font-family:var(--mono);font-size:.8rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:var(--ink)}
.demo-ext .de-text{font-size:1.02rem}
.demo-ext .de-arrow{margin-left:auto;font-size:1.1rem}
/* Hinweiszeile: weiss, damit das Gold Signal bleibt und nicht zur Fläche wird. */
.de-note{background:var(--white);padding:.9rem 1.1rem;
  display:flex;align-items:center;gap:.7rem 1.2rem;flex-wrap:wrap}
.de-link + .de-note{border-top:1.5px solid var(--navy)}
.de-note p{margin:0;flex:1;min-width:min(100%,20rem);font-size:.98rem;line-height:1.5}
.de-note b{flex:none;width:100%}
.btn.small{padding:.55rem 1.1rem;min-height:40px;font-size:.76rem;flex:none}

/* ── Stimmprofil ────────────────────────────────────────── */
.profile{border-top:1px solid var(--rule);padding:clamp(2.4rem,6vw,4rem) 0}
.profile-list ul{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
  gap:0 clamp(1.5rem,4vw,3rem)}
.profile-list li{border-bottom:1px solid var(--rule);padding:.7rem 0;font-size:1.02rem}
.profile-list strong{font-family:var(--mono);font-size:.78rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;color:var(--ink-70);
  display:block;margin-bottom:.15rem}

/* ── Deshalb bin ich die Richtige ───────────────────────── */
.reasons{border-top:1px solid var(--rule);padding:clamp(2.4rem,6vw,4rem) 0}
.reasons-copy{columns:2;column-gap:clamp(2rem,5vw,3.5rem);max-width:62rem}
.reasons-copy p{margin:0 0 1.05rem;break-inside:avoid;font-size:1.03rem;line-height:1.62}
/* Punkt 13: die hervorgehobenen Bereiche zusätzlich fett */
.reasons-copy strong{font-family:var(--mono);font-size:.8em;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;color:var(--navy)}

/* ── Leistungen ─────────────────────────────────────────── */
.services{border-top:1px solid var(--rule);padding:clamp(2.4rem,6vw,4rem) 0}
.services-intro{max-width:48rem;font-size:1.06rem;margin:0 0 var(--s5)}
.services-list ul{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));
  gap:0 clamp(1.5rem,4vw,3rem)}
.services-list li{position:relative;border-bottom:1px solid var(--rule);
  padding:.75rem 0 .75rem 1.5rem;font-size:1rem;line-height:1.5}
.services-list li::before{content:'→';position:absolute;left:0;top:.75rem;
  font-family:var(--mono);color:var(--navy)}

/* ── Ablauf ─────────────────────────────────────────────── */
.flow-sec{border-top:1px solid var(--rule);padding:clamp(2.4rem,6vw,4rem) 0}
.flow{list-style:none;margin:0;padding:0;position:relative;max-width:52rem}
.flow::before{content:'';position:absolute;left:1.05rem;top:.9rem;bottom:1.6rem;
  width:1px;background:var(--rule-strong)}
.flow-step{position:relative;display:flex;gap:1.4rem;padding:0 0 var(--s6)}
.fs-no{flex:none;width:2.1rem;height:2.1rem;border-radius:50%;
  display:grid;place-items:center;font-size:.76rem;
  background:var(--gold);color:var(--ink);border:1px solid var(--navy);
  position:relative;z-index:1}
.fs-body{padding-top:.15rem}
.fs-body h3{font-family:var(--serif-d);font-weight:400;
  font-size:clamp(1.2rem,2.6vw,1.6rem);margin:0 0 .35rem}
.fs-text p{margin:0 0 .6rem;font-size:1rem;line-height:1.6;color:var(--ink-70)}
.fs-text p:last-child{margin-bottom:0}
/* 02.08. Punkt 8: der Agentur-Hinweis wurde als graue Kursivzeile überlesen. */
.flow-note{margin:.4rem 0 0;padding-left:3.5rem;max-width:52rem;
  font-size:.98rem;color:var(--navy);font-weight:700;font-style:italic}

/* ── Preise & Agentur ───────────────────────────────────── */
.pricing{border-top:1px solid var(--rule);padding:clamp(2.4rem,6vw,4rem) 0}
.pricing-copy{max-width:52rem}
/* Punkt 14: die Preis-Absätze gehören thematisch zusammen und stehen
   deshalb enger als normaler Fließtext. */
.pricing-copy p{margin:0 0 var(--s2);font-size:1.02rem;line-height:1.62}
.pricing-copy p:last-child{margin-bottom:0}
.pricing-copy strong{font-family:var(--mono);font-size:.82em;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;color:var(--navy)}
.agency{margin-top:1.8rem;border-top:1px solid var(--rule);padding-top:1.1rem;
  display:flex;gap:1.2rem;flex-wrap:wrap;align-items:baseline;max-width:52rem}
.ag-label{font-size:.74rem;text-transform:uppercase;letter-spacing:.09em;
  color:var(--ink-50);flex:none}
.agency p{margin:0;font-size:1.02rem}
.agency a{text-decoration:none;border-bottom:1px solid var(--navy)}
.agency a:hover{background:var(--gold);color:var(--ink)}
.ag-profile{font-family:var(--mono);font-size:.85rem;display:inline-block;margin-top:.35rem}

/* ── Heimstudio ─────────────────────────────────────────── */
.studio{border-top:1px solid var(--rule);padding:clamp(2.4rem,6vw,4rem) 0}
.studio-copy{max-width:52rem}
.studio-copy p{margin:0 0 var(--s4);font-size:1.03rem;line-height:1.62}
/* 02.08. Punkt 1a: alle drei gleich groß nebeneinander — feste Spaltenzahl
   statt auto-fit, sonst springt das Raster je nach Breite auf zwei Spalten. */
.studio-grid{margin-top:1.8rem;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,3vw,1.8rem);align-items:start}
.studio-grid figure{margin:0;background:var(--white);border:1px solid var(--rule);padding:.5rem}
/* Punkt 15 (31.07.) bleibt gültig: nichts abschneiden. Gleich große Kacheln
   und ganzes Bild gehen nur mit `contain` — `cover` würde wieder beschneiden.
   Der weisse Rand fällt im Papierrahmen nicht auf. */
.studio-grid img{display:block;width:100%;height:auto;aspect-ratio:2/3;
  object-fit:contain;background:var(--white)}

/* ── Projekte ───────────────────────────────────────────── */
.projects{max-width:52rem}
.projects h4,.projects h3{font-family:var(--mono);font-size:.76rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;color:var(--navy);
  margin:1.6rem 0 .5rem}
.projects h4:first-child,.projects h3:first-child{margin-top:0}
.projects ul{list-style:none;margin:0;padding:0}
.projects li{border-bottom:1px solid var(--rule);padding:.75rem 0;
  font-size:1rem;line-height:1.5}
.anchor-alias{position:absolute;top:-1rem;width:1px;height:1px}

/* ── Responsive ─────────────────────────────────────────── */
@media(max-width:900px){
  .intro-grid,.intro-grid.solo{grid-template-columns:1fr;padding-top:2.2rem}
  /* 02.08. Punkt 5: am Handy stand das Porträt links statt in der Mitte.
     Das zweite Porträt („Über mich") zieht mit, sonst sitzt eins mittig
     und das andere links. */
  .portrait,.portrait.small{justify-self:center}
  .intro-grid.solo .intro-ctas{flex-direction:row}
  .about-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
}
@media(max-width:820px){
  .reasons-copy{columns:1}
  .cta-lines{flex-direction:column;gap:.3rem}
  .cta-lines .sep{display:none}
  .flow-note{padding-left:0}
  .mast-top{gap:1rem}
}
@media(max-width:700px){
  .studio-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  /* Angepinnt darf die Reiterzeile am Handy nicht den halben Bildschirm
     fressen: Sie bricht dort auf zwei Zeilen um, deshalb hier enger und
     etwas kleiner — aber weiterhin über 0.95rem (Punkt 6 von 02.08.). */
  .index-nav{padding:.45rem 0;gap:.75rem;font-size:1.02rem}
  .index-nav a{padding:.2rem .1rem;min-height:32px}
  /* Auch am Handy rechts außen fest — im Fluss rutschte sie bei manchen
     Breiten allein in eine eigene Zeile. Hier nur etwas schmaler. */
  .index-nav.mit-sprache{padding-right:calc(var(--s7) + var(--s4))}
  .nav-sprache{padding-left:var(--s2)}
  .t-desc{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .frow.two{grid-template-columns:1fr;gap:0}
  .ref-row{grid-template-columns:1fr;gap:.1rem}
  .ref-row .mono{text-align:left}
  .meta-line{text-align:center}
  /* Auf dem Handy führt das Logo, der Name steht darunter (Punkt 2) */
  .mast-top{justify-content:center;text-align:center}
  .mast-logo{width:min(72vw,348px)}
  .mast-words{text-align:center}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}