/* ============================================================
   SCHRIFTEN, lokal ausgeliefert
   Kein Aufruf an Google, damit beim Seitenaufruf keine IP-Adresse der
   Besucher an einen Drittanbieter geht. Beide Familien stehen unter der
   SIL Open Font License, lokales Hosten ist ausdrücklich erlaubt.
   Zeichensatz latin und latin-ext, letzteres wegen „Lässig".
   ============================================================ */
@font-face{font-family:'Cormorant Garamond';src:url('../fonts/cormorant-garamond-v21-latin_latin-ext-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('../fonts/cormorant-garamond-v21-latin_latin-ext-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('../fonts/cormorant-garamond-v21-latin_latin-ext-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('../fonts/cormorant-garamond-v21-latin_latin-ext-600italic.woff2') format('woff2');font-weight:600;font-style:italic;font-display:swap}
@font-face{font-family:'Source Sans 3';src:url('../fonts/source-sans-3-v19-latin_latin-ext-300.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Source Sans 3';src:url('../fonts/source-sans-3-v19-latin_latin-ext-regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Source Sans 3';src:url('../fonts/source-sans-3-v19-latin_latin-ext-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Source Sans 3';src:url('../fonts/source-sans-3-v19-latin_latin-ext-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

/* ============================================================
   Claudia Lässig — Designsystem
   Farben, Schriften und Formensprache nach
   „Styleguide Website — Claudia Lässig Consulting", Stand August 2026
   Kontraste gerechnet und gegen WCAG AA geprüft
   ============================================================ */

:root{
  /* Basis */
  --porcelain:#FBFAF7;   /* Seitenhintergrund, helle Sektionen */
  --linen:#F2EEE7;       /* Karten, Zwischensektionen */
  --cocoa:#2B2623;       /* Überschriften und Fließtext */
  --taupe:#6F6760;       /* Untertitel, Labels, Fließtext sekundär */
  --greige:#B7ADA3;      /* Linien, Rahmen, Kreise */

  /* Akzent — die einzige Akzentfarbe der Marke */
  --plum:#5C1F3A;
  --plum-hover:#7A2A50;

  /* Linien. Greige ist laut Styleguide für alle strukturellen Aufgaben
     zuständig. Als Text ist er zu schwach (2,1:1), deshalb ausschließlich
     für Striche, Rahmen und Kreise. */
  --line:#B7ADA3;
  --line-soft:rgba(183,173,163,.55);

  /* Auf dunkler Fläche. Greige auf Cocoa ergibt 6,78:1 und trägt Fließtext,
     Taupe würde dort mit 2,70:1 durchfallen und kommt deshalb nicht vor. */
  --on-dark:#FFFFFF;
  --on-dark-muted:#B7ADA3;
  --line-dark:rgba(255,255,255,.18);

  --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  --sans:'Source Sans 3',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;

  --wrap:1180px;
  --narrow:740px;
  --gutter:clamp(22px,5vw,60px);
  --hdr-h:clamp(66px,7vw,88px);

  /* Weißraum. Styleguide: 100–120px zwischen den Sektionen. */
  --gap-sec:clamp(64px,9vw,118px);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.33,0,.15,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:var(--sans);
  font-size:17px;
  font-weight:400;
  line-height:1.7;
  color:var(--cocoa);
  background:var(--porcelain);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--plum);color:#fff}
:focus-visible{outline:2px solid var(--plum);outline-offset:3px;border-radius:1px}
.section--dark :focus-visible{outline-color:var(--on-dark)}

/* ---------- Layout ---------- */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.narrow{max-width:var(--narrow)}
.section{padding-block:var(--gap-sec);position:relative}
.section--linen{background:var(--linen)}
.section--dark{background:var(--cocoa);color:var(--on-dark)}
.section--tight{padding-block:clamp(52px,7vw,92px)}

/* ---------- Typografie ----------
   Cormorant Garamond hat eine kleine x-Höhe und wirkt bei gleicher
   Punktgröße deutlich zarter als eine übliche Textserife. Die Grade
   liegen deshalb rund zehn Prozent über den sonst üblichen Werten. */
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;line-height:1.14;letter-spacing:0;text-wrap:balance}
h1{font-size:clamp(38px,6.6vw,74px);line-height:1.08}
h2{font-size:clamp(30px,4.4vw,54px)}
h3{font-size:clamp(21px,2.1vw,26px);font-weight:600;line-height:1.28}
h4{font-size:19px;font-weight:600}
h1 em,h2 em,h3 em{font-style:italic}

/* Eyebrow. Styleguide: Source Sans 3, 500, Versalien, 0.18em,
   Pflaume, immer mit 20px Pflaume-Linie davor. */
.label{
  font-family:var(--sans);font-size:12px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--plum);
  display:inline-flex;align-items:center;gap:12px;line-height:1.3;
}
.label::before{content:'';width:20px;height:1px;background:var(--plum);flex:none}
.section--dark .label{color:var(--on-dark-muted)}
.section--dark .label::before{background:var(--on-dark-muted)}

.lead{font-size:clamp(18px,1.7vw,21px);line-height:1.66;color:var(--taupe);font-weight:300}
.section--dark .lead{color:var(--on-dark-muted)}
.prose{max-width:62ch}
.prose p+p{margin-top:1.1em}
.big{font-size:clamp(18px,1.6vw,20px);line-height:1.74}
.section--dark .prose,.section--dark .big{color:var(--on-dark-muted)}

/* Leitsätze — Serif kursiv, laut Brand Guide gezielt eingesetzt */
.leitsatz{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(28px,3.8vw,50px);line-height:1.26;
  text-wrap:balance;
}
.leitsatz em{font-style:italic;color:var(--plum)}
.section--dark .leitsatz{color:var(--on-dark)}
.section--dark .leitsatz em{color:var(--on-dark-muted)}

/* Positionsaussage — Serif aufrecht, eine Stufe unter den Leitsätzen */
.statement{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(25px,3.1vw,40px);line-height:1.3;
  text-wrap:balance;max-width:27ch;
}

/* ---------- Links ---------- */
.link{
  color:var(--plum);text-decoration:none;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .5s var(--ease),color .3s var(--ease);
  padding-bottom:2px;
}
.link:hover{background-size:100% 1px;color:var(--plum-hover)}
.section--dark .link{color:var(--on-dark)}

.arrowlink{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  font-size:13.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:var(--plum);transition:color .3s var(--ease);
}
.arrowlink:hover{color:var(--plum-hover)}
.arrowlink .ar{transition:transform .5s var(--ease);display:inline-block}
.arrowlink:hover .ar{transform:translateX(6px)}
.arrowlink u{text-decoration:none;background-image:linear-gradient(currentColor,currentColor);
  background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .5s var(--ease);padding-bottom:3px}
.arrowlink:hover u{background-size:0% 1px}
.section--dark .arrowlink{color:var(--on-dark)}

/* ---------- Buttons ----------
   Styleguide: Versalien, 600, Laufweite 0.1em, Radius 1px.
   Kein runder Knopf, keine weiche Form. */
.btn{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--sans);font-size:13px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  padding:15px 30px;border-radius:1px;text-decoration:none;
  border:1px solid transparent;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.btn .ar{transition:transform .45s var(--ease)}
.btn:hover .ar{transform:translateX(5px)}

.btn--primary{background:var(--plum);color:#fff}
.btn--primary:hover{background:var(--plum-hover);color:#fff}

.btn--outline{border-color:var(--greige);color:var(--cocoa)}
.btn--outline:hover{background:var(--cocoa);border-color:var(--cocoa);color:var(--porcelain)}

/* Heller Knopf auf dunkler oder pflaumefarbener Fläche */
.btn--light{background:#fff;color:var(--plum)}
.btn--light:hover{background:var(--porcelain);color:var(--plum-hover)}
.section--dark .btn--outline{border-color:var(--line-dark);color:var(--on-dark)}
.section--dark .btn--outline:hover{background:var(--on-dark);border-color:var(--on-dark);color:var(--cocoa)}

/* ============================================================
   FORMENSPRACHE
   Kreis und Linie sind laut Styleguide die beiden Markenmotive.
   Der Kreis erscheint hier als ruhiges Hintergrundmotiv aus Haarlinien,
   nicht als Bildmaske: Claudias Aufnahmen verlieren im Kreis zu viel.
   ============================================================ */
.rings{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  pointer-events:none;z-index:0;
  width:min(560px,88vw);aspect-ratio:1;
}
.rings::before,.rings::after{
  content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  border:1px solid var(--line);border-radius:50%;
}
.rings::before{width:100%;height:100%;opacity:.45}
.rings::after{width:66%;height:66%;opacity:.3}
.section--dark .rings::before,.section--dark .rings::after{border-color:rgba(255,255,255,.14)}
.rings--corner{top:-18%;left:auto;right:-14%;transform:none}
.section > .wrap{position:relative;z-index:1}

/* Trennlinie */
.rule{height:1px;background:var(--line);border:0}

/* ============================================================
   BEWEGUNG
   Ruhig, kultiviert, keine Effekte, die Ruhe und Seriosität schwächen.
   ============================================================ */

/* Zeilenweise Maskenenthüllung.
   Die Maske braucht Luft nach oben und unten, sonst schneidet
   overflow:hidden die Punkte über Ü und Ä sowie die Unterlängen ab.
   Cormorant hat lange Ober- und Unterlängen, deshalb mehr Innenabstand
   als bei der vorigen Schrift. */
.rv-lines{display:block}
.rv-lines .ln{display:block;overflow:hidden;padding:.32em .06em .26em}
.rv-lines .ln + .ln{margin-top:-.58em}
.rv-lines .ln > span{
  display:block;transform:translateY(140%);
  transition:transform 1.15s var(--ease);
  transition-delay:calc(var(--i,0) * 90ms + var(--d,0ms));
}
.rv-lines.in .ln > span{transform:translateY(0)}

/* Geister-Aufblenden — die Leitbewegung der Seite. Inhalte stehen bereits
   an ihrer endgültigen Position und werden beim Hereinscrollen nur dichter. */
[data-rv]{opacity:.1;transition:opacity 1.4s var(--ease-soft);transition-delay:var(--d,0ms)}
[data-rv].in{opacity:1}
[data-rv="up"]{transform:translateY(20px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
[data-rv="up"].in{transform:none}
[data-rv="rule"]{opacity:1;transform-origin:left;scale:0 1;transition:scale 1.2s var(--ease);transition-delay:var(--d,0ms)}
[data-rv="rule"].in{scale:1 1}

.reveal-img{overflow:hidden;position:relative;background:var(--linen)}
.reveal-img > img,.reveal-img > picture > img{
  opacity:.14;transform:scale(1.05);
  transition:opacity 1.5s var(--ease-soft),transform 2.2s var(--ease-soft);
}
.reveal-img.in > img,.reveal-img.in > picture > img{opacity:1;transform:scale(1)}
.px{will-change:transform}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .rv-lines .ln > span{transform:none}
  [data-rv],[data-rv="up"]{opacity:1;transform:none}
  [data-rv="rule"]{scale:1 1}
  .reveal-img > img,.reveal-img > picture > img{opacity:1;transform:none}
  .px{transform:none!important}
  .marquee__track{animation:none!important}
}

/* ---------- Kopfzeile ----------
   Hell und zurückgenommen, wie im Styleguide beschrieben: Porcelain mit
   leichter Transparenz, Haarlinie in Greige darunter. Der frühere dunkle
   Balken war zu viel Gewicht für eine Seite, die hell und warm sein soll. */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:60;
  background:rgba(251,250,247,.94);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.hdr__in{
  position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:24px;height:var(--hdr-h);
}
.wordmark{
  display:flex;align-items:center;gap:clamp(10px,1.1vw,16px);
  text-decoration:none;color:var(--cocoa);
}
.wordmark__mark{height:clamp(34px,3.4vw,44px);width:auto;display:block;flex:none}
.wordmark__txt{
  font-family:var(--serif);font-size:clamp(17px,1.5vw,21px);font-weight:400;
  letter-spacing:.02em;white-space:nowrap;line-height:1.1;
}
.wordmark__txt span{
  display:block;font-family:var(--sans);font-size:9.5px;font-weight:500;
  letter-spacing:.2em;color:var(--taupe);margin-top:4px;text-transform:uppercase;
}

.nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,38px)}
.nav a{
  font-size:13px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;
  text-decoration:none;color:var(--taupe);position:relative;padding-block:5px;
  transition:color .35s var(--ease);
}
.nav a:hover{color:var(--cocoa)}
.nav a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--plum);transform:scaleX(0);transform-origin:right;
  transition:transform .5s var(--ease);
}
.nav a:not(.btn):hover::after,.nav a[aria-current="page"]:not(.btn)::after{transform:scaleX(1);transform-origin:left}
/* Ohne :not() färbt diese Regel auch den Knopf ein. Auf der Kontaktseite
   stand „Orientierungsgespräch" dann in Cocoa Ink auf Pflaume, 1,2:1. */
.nav a[aria-current="page"]:not(.btn){color:var(--cocoa)}
.nav .btn{color:#fff;padding:11px 22px;font-size:12px}
.nav .btn::after{display:none}

.burger{display:none;width:44px;height:44px;align-items:center;justify-content:center}
.burger span{display:block;width:22px;height:1px;background:var(--cocoa);position:relative;transition:background .3s}
.burger span::before,.burger span::after{content:'';position:absolute;left:0;width:22px;height:1px;background:var(--cocoa);transition:transform .45s var(--ease)}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.is-open .burger span{background:transparent}
.is-open .burger span::before{transform:translateY(6px) rotate(45deg)}
.is-open .burger span::after{transform:translateY(-6px) rotate(-45deg)}

/* ---------- Bildband ----------
   Höhe bewusst automatisch: eine feste Höhe würde den bereits gewählten
   Ausschnitt ein zweites Mal beschneiden und dabei Köpfe abschneiden. */
.band{position:relative;background:var(--linen)}
.band img{width:100%;height:auto;display:block}

/* ---------- Bild nach dem Kopf ----------
   Gilt auf allen Unterseiten: erst Label, Überschrift und Vorspann,
   danach genau ein Bild. Hochformate stehen eingerückt im Satzspiegel,
   Querformate laufen als Band über die volle Breite. Auf dem Telefon
   sehen beide gleich aus: eingerückt, Format 4:5, gleiche Breite. */
.figure{margin:0;padding-block:0}
.figure__in{max-width:min(100%,520px);margin-inline:auto}
.figure img{width:100%;height:auto;display:block}

/* ---------- Bild neben Text ---------- */
.split{
  display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);
  gap:clamp(28px,4.5vw,64px);align-items:start;
}
.split__img{position:sticky;top:calc(var(--hdr-h) + 22px)}
.split__img img{width:100%;height:auto;display:block}
.split .offer{grid-template-columns:1fr;gap:10px}
.split .offer__l h3{margin-bottom:2px}

/* Kleine Überschrift über einer Angebotszeile, etwa „Bücher" oder „Presse" */
.offer__idx{
  display:block;font-family:var(--sans);font-size:11.5px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--plum);margin-bottom:14px;
}

/* ---------- Zeitleiste ----------
   Der Punkt bekommt einen Rand in der Hintergrundfarbe. Der stanzt die
   durchgehende Linie sauber aus, ohne sie zu unterbrechen. */
.timeline{list-style:none;position:relative;padding-left:0;border-left:1px solid var(--line);margin-left:6px}
.timeline li{
  position:relative;display:grid;
  grid-template-columns:clamp(84px,9vw,124px) 1fr;gap:clamp(16px,3vw,40px);
  padding:0 0 clamp(26px,3vw,40px) clamp(26px,3vw,42px);align-items:baseline;
}
.timeline li:last-child{padding-bottom:0}
.timeline li::before{
  content:'';position:absolute;left:-5px;top:.62em;
  width:9px;height:9px;border-radius:50%;
  background:var(--greige);border:2px solid var(--porcelain);
}
.section--linen .timeline li::before{border-color:var(--linen)}
.timeline li.is-key::before{background:var(--plum)}
.timeline .yr{font-family:var(--serif);font-size:clamp(19px,1.8vw,24px);color:var(--taupe)}
.timeline li.is-key .yr{color:var(--plum)}
.timeline .ev{font-size:clamp(15.5px,1.5vw,17px)}
.section--dark .timeline{border-color:var(--line-dark)}
.section--dark .timeline li::before{background:var(--on-dark-muted);border-color:var(--cocoa)}
.section--dark .timeline .yr{color:var(--on-dark-muted)}

/* ---------- Hero ---------- */
.hero{position:relative;padding-top:calc(var(--hdr-h) + clamp(52px,8vw,110px));padding-bottom:clamp(52px,7vw,96px)}

/* Breiter Hero für Tablet quer und Desktop.
   Das Bild beginnt erst unterhalb der Kopfzeile. Lag es darunter, verdeckte
   die Leiste die Luft über ihrem Kopf. Die Mindesthöhe folgt dem
   Seitenverhältnis des Bildes, sonst beschneidet object-fit den fertigen
   Ausschnitt ein zweites Mal. */
.hero--wide{
  position:relative;display:flex;align-items:center;
  min-height:calc(var(--hdr-h) + min(44.5vw,720px));
  padding:calc(var(--hdr-h) + clamp(26px,3.5vw,50px)) 0 clamp(40px,5vw,72px);
  background:var(--linen);
}
.hero--wide .hero__bg{position:absolute;inset:var(--hdr-h) 0 0 0;z-index:0;background:var(--linen)}
.hero--wide .hero__bg img{width:100%;height:100%;object-fit:cover;object-position:left top}
.hero--wide::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(87deg,
    rgba(251,250,247,0) 48%,
    rgba(251,250,247,.32) 57%,
    rgba(251,250,247,.9) 69%,
    var(--porcelain) 79%);
}
.hero--wide .wrap{position:relative;z-index:2;width:100%}
.hero--wide .hero__text{margin-left:auto;width:min(43%,470px)}
.hero--wide h1{font-size:clamp(32px,4.1vw,58px)}
.hero__sub{
  margin-top:24px;border-left:2px solid var(--greige);padding-left:18px;
  font-size:16.5px;font-weight:300;line-height:1.72;color:var(--taupe);max-width:38ch;
}
.hero__actions{margin-top:clamp(28px,3.4vw,44px);display:flex;align-items:center;gap:clamp(18px,2.4vw,30px);flex-wrap:wrap}

/* ---------- Kernthese ---------- */
.these{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,72px);align-items:start}
.these__q{font-family:var(--serif);font-size:clamp(30px,4.3vw,54px);line-height:1.18;font-weight:400}
.these__q em{font-style:italic;color:var(--plum)}
.section--dark .these__q em{color:var(--on-dark-muted)}

/* ---------- Dreierraster ----------
   Der Rasterabstand von 1px auf einer Greige-Fläche erzeugt durchgehende
   Haarlinien ohne doppelte Rahmen. */
.trio{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border-block:1px solid var(--line);list-style:none;margin:0;padding:0;
}
.trio__item{background:var(--porcelain);padding:clamp(30px,3.4vw,46px) clamp(22px,2.4vw,36px);position:relative}
.section--linen .trio__item{background:var(--linen)}
.trio__item h3{margin-bottom:14px}
.trio__item p{color:var(--taupe);line-height:1.75}
/* Römische Ziffer, stark zurückgenommen — aus Claudias Entwurf übernommen */
.trio__no{
  display:block;font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:2.6rem;line-height:1;color:var(--greige);margin-bottom:18px;
}

/* ---------- Angebotszeilen ---------- */
.offers{display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line)}
.offer{
  background:var(--porcelain);padding:clamp(32px,4vw,54px) 0;
  display:grid;grid-template-columns:minmax(0,.35fr) minmax(0,.65fr);gap:clamp(22px,4vw,58px);
  transition:background .5s var(--ease);
}
.section--linen .offer{background:var(--linen)}
.offer:hover{background:var(--linen)}
.section--linen .offer:hover{background:var(--porcelain)}
.offer__l h3{margin-bottom:10px}
.offer__facts{list-style:none;margin-top:24px;font-size:14px;color:var(--taupe)}
.offer__facts li{display:flex;gap:12px;padding:7px 0;border-top:1px solid var(--line-soft)}
.offer__facts b{font-weight:400;color:var(--taupe);min-width:96px;flex:none}
.offer__r p{max-width:58ch}
.offer__r .out{margin-top:22px;padding-left:20px;border-left:2px solid var(--plum)}
.offer__r .out b{font-weight:400;color:var(--plum)}

/* Strich statt Punkt als Aufzählungszeichen — aus Claudias Entwurf */
.ticks{list-style:none}
.ticks li{position:relative;padding-left:24px;padding-block:6px;color:var(--taupe);font-weight:300}
.ticks li::before{content:'';position:absolute;left:0;top:.92em;width:10px;height:1px;background:var(--plum)}

/* ---------- Stimmen ---------- */
.voices{position:relative}
.voices__track{
  display:grid;grid-auto-flow:column;grid-auto-columns:min(540px,84vw);
  gap:clamp(18px,2.5vw,30px);overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding-bottom:8px;
}
.voices__track::-webkit-scrollbar{display:none}
.voice{
  scroll-snap-align:start;background:var(--linen);padding:clamp(28px,3.4vw,44px);
  display:flex;flex-direction:column;justify-content:space-between;
  border:1px solid transparent;border-radius:1px;
}
.section--linen .voice{background:var(--porcelain);border-color:var(--line)}
.voice blockquote{font-family:var(--serif);font-style:italic;font-size:clamp(19px,1.9vw,23px);line-height:1.55;font-weight:400}
.voice__who{
  margin-top:26px;padding-top:20px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:15px;
}
/* Die Initialen sind der Rückfall, falls ein Porträt fehlt.
   Das Bild liegt darüber, deshalb absolut positioniert. */
.voice__ph{
  position:relative;width:54px;height:54px;border-radius:50%;flex:none;overflow:hidden;
  background:var(--linen);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:.14em;color:var(--taupe);
}
.voice__ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.voice__who b{display:block;font-weight:600;font-size:14px}
.voice__who span{font-size:14px;color:var(--taupe)}
.voices__nav{display:flex;gap:10px;margin-top:30px;align-items:center}
.vbtn{
  width:48px;height:48px;font-size:14px;border:1px solid var(--greige);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--cocoa);
  transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease);
}
.vbtn:hover{background:var(--plum);color:#fff;border-color:var(--plum)}
.vbtn[disabled]{opacity:.3;pointer-events:none}
.voices__progress{flex:1;height:1px;background:var(--line);margin-left:18px;position:relative;max-width:220px}
.voices__progress i{position:absolute;inset:0 auto 0 0;background:var(--plum);width:20%;transition:width .5s var(--ease)}

/* ---------- Laufband Presse ---------- */
.marquee{overflow:hidden;padding-block:.22em;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee__track{display:flex;width:max-content;animation:slide 68s linear infinite}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__group{display:flex;gap:clamp(30px,4vw,58px);padding-right:clamp(30px,4vw,58px);align-items:center;flex:none}
.marquee__group span{
  font-family:var(--serif);font-size:clamp(18px,1.7vw,23px);color:var(--cocoa);
  white-space:nowrap;display:inline-flex;align-items:center;gap:clamp(30px,4vw,58px);
}
.marquee__group span::after{content:'';width:5px;height:5px;border-radius:50%;background:var(--plum);flex:none}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- Fakten ---------- */
.facts{border-top:1px solid var(--line)}
.facts__row{display:grid;grid-template-columns:minmax(150px,.28fr) 1fr;gap:clamp(16px,3vw,44px);
  padding:24px 0;border-bottom:1px solid var(--line)}
.facts__row dt{font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--taupe)}
.facts__row ul{list-style:none}
.facts__row li{padding:4px 0}
.facts__row li + li{border-top:1px solid var(--line-soft)}

/* ---------- Abschluss ---------- */
/* Mindesthöhe größer als der Ringdurchmesser, sonst schneidet das
   overflow der Sektion die Ringe oben und unten ab. */
.cta{text-align:center;position:relative;overflow:hidden;
  display:grid;align-content:center;min-height:min(94vw,620px)}
.cta .leitsatz{max-width:20ch;margin-inline:auto}
.cta h2{max-width:20ch;margin-inline:auto}
.cta__row{margin-top:clamp(32px,4vw,50px);display:flex;gap:16px;justify-content:center;flex-wrap:wrap;align-items:center}
.cta__note{font-size:13.5px;color:var(--taupe)}
.section--dark .cta__note{color:var(--on-dark-muted)}

/* ---------- Formular ---------- */
.form{display:grid;gap:20px;max-width:600px}
.field{display:grid;gap:8px}
.field label{font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--taupe)}
.field input,.field textarea,.field select{
  font:inherit;font-size:16px;color:var(--cocoa);background:var(--porcelain);
  border:1px solid var(--greige);border-radius:1px;padding:13px 15px;width:100%;
  -webkit-appearance:none;appearance:none;
  transition:border-color .35s var(--ease);
}
.field select{background-image:linear-gradient(45deg,transparent 50%,var(--taupe) 50%),linear-gradient(135deg,var(--taupe) 50%,transparent 50%);
  background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:44px}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--plum);outline:2px solid transparent;box-shadow:0 0 0 1px var(--plum)}
.field--check{grid-template-columns:auto 1fr;align-items:start;gap:12px}
/* Die Checkbox muss die native Darstellung behalten, sonst wird kein Haken
   gezeichnet. Deshalb hier alles zurücknehmen, was .field input gesetzt hat. */
.field--check input[type="checkbox"]{
  -webkit-appearance:auto;appearance:auto;
  width:18px;height:18px;min-width:18px;padding:0;margin-top:3px;
  border:0;border-radius:0;background:none;box-shadow:none;
  accent-color:var(--plum);cursor:pointer}
.field--check input[type="checkbox"]:focus-visible{
  outline:2px solid var(--plum);outline-offset:2px;box-shadow:none}
.field--check label{font-size:13.5px;line-height:1.6;letter-spacing:0;text-transform:none;font-weight:400;color:var(--taupe);cursor:pointer}
.form__note{font-size:13.5px;color:var(--taupe)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- Fußzeile ---------- */
.ftr{background:var(--cocoa);color:var(--on-dark-muted);padding-block:clamp(52px,7vw,86px) 30px;font-size:14.5px}
.ftr__grid{display:grid;grid-template-columns:1.7fr 1fr 1fr;gap:clamp(28px,4vw,56px);
  padding-bottom:40px;border-bottom:1px solid var(--line-dark)}
.ftr .wordmark{color:var(--on-dark)}
.ftr .wordmark__txt span{color:var(--on-dark-muted)}
.ftr h4{font-family:var(--sans);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--on-dark-muted);font-weight:500;margin-bottom:16px}
.ftr ul{list-style:none;line-height:2.1}
.ftr a{text-decoration:none;transition:color .35s var(--ease)}
.ftr a:hover{color:var(--on-dark)}
.ftr__bot{padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:13px;color:var(--on-dark-muted)}

/* ---------- Seitenwechsel ----------
   Bewusst KEINE View Transition. Sie schob beim Seitenwechsel die ganze
   Seite um 14 Pixel nach oben, während gleichzeitig die Überschriften ihre
   eigene Enthüllung liefen. Zwei Bewegungen übereinander ergaben das
   doppelte Anrucken. Der Seitenaufbau trägt die Bewegung allein. */

/* ============================================================
   RESPONSIV
   Vier Stufen statt einer. Der Sprung von Desktop auf Telefon ist bei
   dieser Seite kein reines Untereinanderschieben: auf dem Telefon
   wachsen die Bilder, der Einstieg wird bildschirmfüllend und die
   Rasterabstände werden großzügiger statt enger.
   ============================================================ */

/* --- Laptop, schmales Fenster --- */
@media (max-width:1100px){
  .offer{grid-template-columns:minmax(0,.4fr) minmax(0,.6fr)}
  .ftr__grid{grid-template-columns:1.4fr 1fr 1fr}
}

/* --- Tablet hoch --- */
@media (max-width:960px){
  .these{grid-template-columns:1fr;gap:clamp(22px,4vw,34px)}
  .trio{grid-template-columns:1fr}
  .offer{grid-template-columns:1fr;gap:clamp(18px,3vw,26px)}
  .split{grid-template-columns:1fr;gap:clamp(26px,5vw,38px)}
  .split__img{position:static;max-width:520px}
  .ftr__grid{grid-template-columns:1fr 1fr}
  .ftr__grid > :first-child{grid-column:1 / -1}
}

/* --- Telefon --- */
@media (max-width:760px){
  :root{--gap-sec:clamp(56px,13vw,84px)}
  body{font-size:16.5px}

  /* Weniger Luft zwischen Kopfzeile und Seitenkopf. */
  .hero{padding-top:calc(var(--hdr-h) + clamp(26px,6vw,44px));padding-bottom:clamp(26px,5vw,40px)}

  .burger{display:flex}

  /* Wichtig: Die Kopfzeile trägt auf breiten Bildschirmen backdrop-filter.
     Ein Element mit backdrop-filter wird zum Bezugsrahmen für alle
     fixierten Nachkommen. Das Menü darin war dadurch nicht mehr
     bildschirmgroß, sondern nur so groß wie die Kopfzeile, und klebte als
     Streifen oben fest. Auf dem Telefon wird die Weichzeichnung deshalb
     abgeschaltet und die Fläche deckend gesetzt. */
  .hdr{background:var(--porcelain);-webkit-backdrop-filter:none;backdrop-filter:none}

  .nav{
    position:fixed;inset:0;background:var(--porcelain);flex-direction:column;
    justify-content:center;align-items:flex-start;gap:6px;
    padding:calc(var(--hdr-h) + 24px) var(--gutter) 40px;
    overflow-y:auto;overscroll-behavior:contain;
    transform:translateY(-100%);transition:transform .6s var(--ease);z-index:-1;
  }
  .is-open .nav{transform:translateY(0)}

  .nav a{font-family:var(--serif);font-size:32px;font-weight:400;letter-spacing:0;
    text-transform:none;color:var(--cocoa);padding-block:8px}
  .nav a::after{display:none}
  .nav .btn{margin-top:22px;font-family:var(--sans);font-size:13px;padding:15px 30px}

  .wordmark__txt{font-size:17px}
  .wordmark__txt span{font-size:8.5px;letter-spacing:.16em}

  /* Bildbänder auf dem Telefon: das Querformat schrumpft sonst zu einem
     Streifen von 120 Pixel Höhe. Stattdessen wird der mitgelieferte
     Hochformat-Ausschnitt im Format 4:5 gezeigt, eingerückt wie jedes
     andere Inhaltsbild, damit ringsum die Flächenfarbe stehen bleibt. */
  .band{padding:clamp(34px,8vw,54px) var(--gutter)}
  .band img{width:100%;height:auto}
  .figure__in{max-width:none}

  .facts__row{grid-template-columns:1fr;gap:8px}
  .timeline li{grid-template-columns:1fr;gap:4px;padding-left:26px}
  .timeline .yr{font-size:19px}

  .voices__track{grid-auto-columns:min(430px,88vw)}
  .voice blockquote{font-size:19px}

  .trio__item{padding:clamp(28px,7vw,38px) clamp(22px,6vw,30px)}

  .cta__row{flex-direction:column;align-items:stretch}
  .cta__row .btn{justify-content:center}

  .ftr__grid{grid-template-columns:1fr;gap:32px}
  .ftr__bot{flex-direction:column;gap:8px}
}

/* ============================================================
   EINSTIEG AUF DEM TELEFON
   Bildschirmfüllend, Schrift im Bild. Das Querformat des Desktops wird
   durch einen eigenen Hochformat-Ausschnitt ersetzt, sonst bliebe von
   Claudia auf dem Telefon ein Streifen von zwei Zentimetern Höhe übrig.
   Höhe in dvh, damit die ein- und ausfahrende Adressleiste des Browsers
   den Aufbau nicht springen lässt.
   ============================================================ */
@media (max-width:860px){
  .hero--wide{
    display:block;padding:0;background:var(--cocoa);
    min-height:100dvh;height:100dvh;
    position:relative;overflow:hidden;
  }
  .hero--wide .hero__bg{position:absolute;inset:0;z-index:0}
  .hero--wide .hero__bg img{
    width:100%;height:100%;object-fit:cover;object-position:50% 26%;
  }
  /* Abdunklung nur unten, wo die Schrift steht. Oben bleibt das Bild
     unberührt, damit Gesicht und Licht nicht grau werden.
     Die Stützstellen sind nachgerechnet: im gesamten Textbereich liegt
     Weiß auf diesem Verlauf bei mindestens 6,0:1, also klar über AA.
     Der frühere, sanftere Verlauf kam an der hellen Kleidung auf 2,6:1. */
  .hero--wide::after{
    inset:auto 0 0 0;height:82%;
    background:linear-gradient(180deg,
      rgba(43,38,35,0) 0%,
      rgba(43,38,35,.10) 24%,
      rgba(43,38,35,.66) 52%,
      rgba(43,38,35,.90) 80%,
      rgba(43,38,35,.95) 100%);
  }
  .hero--wide .wrap{
    position:absolute;inset:auto 0 0 0;z-index:2;
    padding-bottom:clamp(38px,9vw,64px);
  }
  .hero--wide .hero__text{width:auto;margin-left:0;color:var(--on-dark)}
  /* Die Kleinzeile entfällt hier. Sie ist die oberste Zeile des Textblocks
     und lag damit als Einzige über Claudias Gesicht statt über der
     abgedunkelten Fläche darunter. Der Titel trägt den Einstieg allein. */
  .hero--wide .hero__text .label{display:none}
  .hero--wide h1{font-size:clamp(34px,10vw,52px);color:var(--on-dark);line-height:1.1}
  .hero--wide .hero__sub{
    color:var(--on-dark);border-left-color:rgba(255,255,255,.45);
    font-size:16px;max-width:32ch;margin-top:18px;
  }
  .hero--wide .hero__actions{margin-top:26px;gap:20px}
  .hero--wide .hero__actions .btn--outline{border-color:rgba(255,255,255,.5);color:var(--on-dark)}
  .hero--wide .hero__actions .btn--outline:hover{background:var(--on-dark);color:var(--cocoa)}
  .hero--wide .arrowlink{color:var(--on-dark)}

  /* Hinweis zum Weiterscrollen */
  .hero__scroll{
    position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:3;
    width:1px;height:26px;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.7));
  }
}
@media (max-width:860px) and (orientation:landscape){
  /* Telefon quer: eine volle Bildschirmhöhe wäre hier ein flacher Streifen. */
  .hero--wide{height:auto;min-height:0;padding-top:var(--hdr-h);background:var(--porcelain)}
  .hero--wide .hero__bg{position:relative;inset:auto}
  .hero--wide .hero__bg img{height:auto;object-fit:contain}
  .hero--wide::after{display:none}
  .hero--wide .wrap{position:static;padding-block:clamp(28px,5vw,44px)}
  .hero--wide .hero__text{color:var(--cocoa)}
  /* Im Querformat steht der Text wieder auf heller Fläche neben dem Bild,
     dort kann die Kleinzeile bleiben. */
  .hero--wide .hero__text .label{display:inline-flex;color:var(--plum)}
  .hero--wide .hero__text .label::before{background:var(--plum)}
  .hero--wide h1{color:var(--cocoa)}
  .hero--wide .hero__sub{color:var(--taupe);border-left-color:var(--greige)}
  .hero__scroll{display:none}
}

/* --- Kleines Telefon --- */
@media (max-width:420px){
  :root{--gutter:20px}
  .btn{padding:15px 24px;font-size:12.5px;letter-spacing:.08em}
  .nav a{font-size:28px}
}