/* ============================================================
   SCHRIFTEN — selbst gehostet, subsettiert auf Latin + deutsche Diakritika.
   Archivo variabel (wght 100–900, wdth 62–125), Instrument Serif als
   definierter Fallback für Signifier. Keine externen Requests.
   ============================================================ */
@font-face{font-family:'Archivo';src:url('assets/fonts/archivo-var-latin.woff2') format('woff2-variations');
  font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url('assets/fonts/instrumentserif-regular.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url('assets/fonts/instrumentserif-italic.woff2') format('woff2');
  font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'ArchivoFallback';src:local('Arial');size-adjust:97%}

:root{
  --ink:#35131F;
  --paper:#F7EDE8;
  --berry:#9B1B3F;   /* eigenständiger dunkler Rotakzent, NICHT Fuchsia */
  --cognac:#D8873F;  /* warmer Sekundärakzent, nur auf dunklem Grund */
  --fuchsia:#E4007C;
  --graphite:#655A4F;
  --rule-dark:#5B293A;
  --rule-light:#DECFCB;

  /* statt color-mix(): universell unterstützt, keine Laufzeitkosten */
  --ink-88:rgba(53,19,31,.88);
  --ink-96:rgba(53,19,31,.96);
  --paper-88:rgba(247,237,232,.88);
  --paper-82:rgba(247,237,232,.82);
  --paper-78:rgba(247,237,232,.78);

  --font-display:'Signifier','Instrument Serif',Georgia,'Times New Roman',serif;
  --font-text:'Archivo','ArchivoFallback','Helvetica Neue',Arial,sans-serif;

  --size-display:40px;
  --size-display-b:32px;
  --size-section-display:36px;
  --size-h2:30px;
  --size-label4:32px;
  --size-situation:21px;
  --size-subline:18px;
  --size-body:17px;
  --size-caption:11px;
  --size-nav:16px;
  --size-station:26px;

  --section-y:72px;
  --grid-margin:24px;
  --grid-gutter:16px;

  --col1:0px;
  --clip:0em;

  --dur-fast:200ms;
  --focus-w:2px;
  --focus-o:2px;
}
@media (min-width:768px){
  :root{
    --size-display:72px; --size-display-b:72px; --size-section-display:64px;
    --size-h2:44px; --size-label4:48px; --size-situation:28px;
    --size-subline:20px; --size-body:18px; --size-nav:12px; --size-station:32px;
    --section-y:112px; --grid-margin:40px; --grid-gutter:24px;
    --col1:40px; --clip:.05em;
  }
}
@media (min-width:1280px){
  :root{
    --size-display:112px; --size-display-b:112px; --size-section-display:96px;
    --size-h2:56px; --size-label4:72px; --size-situation:34px;
    --size-subline:22px; --size-station:40px;
    --section-y:160px; --grid-margin:64px; --grid-gutter:32px;
    --col1:224px; --clip:.08em;
  }
}

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
html,body{overflow-x:clip}
body{
  margin:0;background:var(--ink);color:var(--paper);
  font-family:var(--font-text);font-size:var(--size-body);font-weight:400;line-height:1.55;
  font-optical-sizing:auto;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;height:auto}
h1,h2,h3,p,dl,dd,dt,ul,figure,fieldset,legend{margin:0;padding:0}
ul{list-style:none}
fieldset{border:0;min-width:0}
a{color:inherit}
main:focus{outline:none}
:focus-visible{outline:var(--focus-w) solid var(--fuchsia);outline-offset:var(--focus-o)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--paper);color:var(--ink);padding:14px 20px;
  font:600 13px/1 var(--font-text);text-transform:uppercase;letter-spacing:.06em;text-decoration:none;
}
.skip:focus{left:12px;top:12px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}
.todo{border-bottom:1px dashed var(--fuchsia);font-family:var(--font-text);font-size:.95em}
.noscript{background:var(--paper);color:var(--ink);padding:12px var(--grid-margin);font-size:14px;border-bottom:1px solid var(--rule-light)}

/* ============================================================
   LAYOUT
   ============================================================ */
.wrap{max-width:1440px;margin-inline:auto;padding-inline:var(--grid-margin)}
.grid{display:grid;grid-template-columns:1fr;gap:var(--grid-gutter)}
@media (min-width:768px){.grid{grid-template-columns:repeat(4,1fr)}}
@media (min-width:1280px){.grid{grid-template-columns:repeat(6,1fr)}}

.sect{padding-block:var(--section-y);position:relative;overflow-x:clip}
.sect--ink{background:var(--ink);color:var(--paper)}
.sect--paper{background:var(--paper);color:var(--ink)}

/* ============================================================
   TYPE
   ============================================================ */
.kicker{
  font-family:var(--font-text);font-size:var(--size-caption);font-weight:600;
  font-stretch:85%;text-transform:uppercase;letter-spacing:.08em;line-height:1.4;
}
.sect--ink .kicker,.step--ink .kicker{color:var(--cognac)}
.sect--paper .kicker,.step--paper .kicker{color:var(--graphite)}

.h2{
  font-family:var(--font-display);font-weight:500;font-size:var(--size-h2);
  letter-spacing:-.02em;line-height:1.05;overflow-wrap:break-word;
}
.sub{font-size:var(--size-subline);line-height:1.45}
.sect--ink .sub{color:var(--paper-82)}
.sect--paper .sub{color:var(--graphite)}
.body p+p{margin-top:24px}

.tlink{
  color:inherit;text-decoration:none;border-bottom:1px solid currentColor;
  padding-bottom:6px;font-size:17px;font-weight:500;
  display:inline-flex;gap:12px;align-items:center;min-height:44px;
}
.tlink .arw{transition:transform var(--dur-fast) ease-out;display:inline-block}
.tlink:hover .arw{transform:translateX(8px)}
.sect--paper .tlink:hover{color:var(--berry);border-bottom-width:2px}
.sect--ink .tlink:hover{color:var(--cognac)}
.tlink--secondary{border-bottom-color:transparent}
.tlink--secondary:hover{border-bottom-color:currentColor}

.micro{display:block;font-size:15px;line-height:1.5;margin-top:8px}
.sect--ink .micro{color:var(--cognac)}
.sect--paper .micro{color:var(--graphite)}

/* ============================================================
   PLATZHALTERFLÄCHEN — bewusst austauschbar, keine Stockfotos
   ============================================================ */
.ph{
  position:relative;display:grid;place-content:center;gap:6px;
  background:#421827;border:1px solid var(--rule-dark);text-align:center;padding:16px;
}
.sect--paper .ph{background:#EADCD7;border-color:var(--rule-light)}
.ph__id{
  font-family:var(--font-text);font-size:11px;font-weight:600;font-stretch:85%;
  text-transform:uppercase;letter-spacing:.1em;color:var(--cognac);
}
.sect--paper .ph__id{color:var(--graphite)}
.ph__dim{font-family:var(--font-text);font-size:10px;font-stretch:85%;letter-spacing:.06em;color:var(--graphite)}

/* ============================================================
   HEADER
   ============================================================ */
.hdr{
  position:fixed;inset:0 0 auto 0;z-index:100;height:56px;
  background:var(--ink-96);transition:transform 240ms ease-out;
}
@media (min-width:1024px){
  .hdr{height:64px;background:var(--ink-88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
}
.hdr[data-hidden="true"]{transform:translateY(-100%)}
.hdr__in{
  max-width:1440px;margin-inline:auto;padding-inline:var(--grid-margin);
  height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.mark{
  font-family:var(--font-text);font-size:13px;font-weight:600;font-stretch:90%;
  text-transform:uppercase;letter-spacing:.06em;color:var(--paper);text-decoration:none;
  display:inline-flex;align-items:center;min-height:44px;
}
.nav{display:none}
.navlist{display:flex;align-items:center;gap:24px}
.navlist a{
  font-family:var(--font-text);font-size:var(--size-nav);font-weight:600;font-stretch:90%;
  text-transform:uppercase;letter-spacing:.06em;text-decoration:none;color:var(--paper);
  position:relative;display:inline-flex;align-items:center;min-height:44px;
}
.navlist a[aria-current="page"]::before{
  content:"";position:absolute;top:2px;left:50%;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:var(--fuchsia);
}
.navsep{width:1px;height:12px;background:var(--rule-dark);margin-inline:8px}
.lang{display:flex;align-items:center;gap:2px}
.lang a{
  font-family:var(--font-text);font-size:var(--size-nav);font-weight:600;font-stretch:90%;
  text-transform:uppercase;letter-spacing:.06em;text-decoration:none;color:var(--paper);
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:34px;
}
.lang a:not([aria-current="true"]){opacity:.45}
.lang span{opacity:.45;font-size:var(--size-nav)}
.menubtn{
  background:none;border:0;color:var(--paper);cursor:pointer;
  font-family:var(--font-text);font-size:13px;font-weight:600;font-stretch:90%;
  text-transform:uppercase;letter-spacing:.06em;
  min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:flex-end;
}
@media (min-width:1024px){
  .nav{display:flex;align-items:center}
  .menubtn{display:none}
}
.about-short{display:none}
@media (min-width:1024px) and (max-width:1279px){
  .about-long{display:none}
  .about-short{display:inline}
}
.ovl{
  position:fixed;inset:0;z-index:150;background:var(--ink);
  display:none;flex-direction:column;padding:0 var(--grid-margin) 48px;overflow-y:auto;
}
.ovl[data-open="true"]{display:flex}
.ovl__top{height:56px;display:flex;align-items:center;justify-content:space-between}
.ovl__list{margin-top:48px;display:flex;flex-direction:column;gap:16px}
.ovl__list a{
  font-family:var(--font-display);font-size:32px;font-weight:500;letter-spacing:-.02em;
  color:var(--paper);text-decoration:none;line-height:1.1;display:inline-block;padding-block:8px;
}
.ovl__lang{margin-top:40px;display:flex;gap:4px;align-items:center}
.ovl__lang a{
  font-family:var(--font-text);font-size:16px;font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;color:var(--paper);text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;
}
.ovl__lang a:not([aria-current="true"]){opacity:.45}
@media (min-width:1024px){.ovl{display:none}}

/* ============================================================
   1 · HERO (2B)
   ============================================================ */
.hero{background:var(--ink);padding-top:calc(56px + 40px);padding-bottom:56px;overflow-x:clip}
@media (min-width:1280px){
  .hero{min-height:min(100svh,900px);padding-top:calc(64px + 56px);padding-bottom:48px;display:flex;align-items:center}
  .hero>.wrap{width:100%}
}
.hero__grid{align-items:start}
.hero__kicker{grid-column:1/-1}
.hero__title{
  grid-column:1/-1;font-family:var(--font-display);font-weight:500;
  font-size:var(--size-display);line-height:.94;letter-spacing:-.03em;
  color:var(--paper);margin-top:16px;overflow-wrap:break-word;
}
.hero__title .t2{display:block;font-size:var(--size-display-b);margin-top:12px}
.hero__sub{grid-column:1/-1;margin-top:24px;max-width:34ch}
.hero__ctas{grid-column:1/-1;margin-top:24px;display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.hero__figure{grid-column:1/-1;margin-top:32px}
.hero__figure .ph{aspect-ratio:4/5}
.hero__sheet{grid-column:1/-1;margin-top:16px}
.hero__creds{grid-column:1/-1;margin-top:24px}
.hero__creds ul{display:flex;flex-wrap:wrap;gap:4px 10px}
.hero__creds li{color:var(--cognac)}
.hero__creds li:not(:last-child)::after{content:" ·";color:var(--rule-dark)}
@media (max-width:767px){
  .hero__figure{margin-inline:calc(-1*var(--grid-margin));width:calc(100% + 2*var(--grid-margin))}
}
@media (min-width:768px) and (max-width:1279px){
  .hero__title{grid-column:1/span 4}
  .hero__title .t2{display:inline;font-size:inherit;margin:0}
  .hero__sub{grid-column:1/span 2;max-width:none}
  .hero__ctas{grid-column:1/span 2;flex-direction:row;align-items:flex-start;gap:32px}
  .hero__figure{grid-column:3/span 2;grid-row:3/span 2;margin-top:0}
  .hero__sheet{grid-column:1/span 4}
  .hero__creds{grid-column:1/span 4}
}
@media (min-width:1280px){
  .hero__kicker{grid-column:1/span 3;grid-row:1}
  .hero__title{grid-column:1/span 4;grid-row:2;margin-top:24px}
  .hero__title .t2{display:inline;font-size:inherit;margin:0}
  .hero__sub{grid-column:1/span 3;grid-row:3;margin-top:40px;max-width:none}
  .hero__ctas{grid-column:1/span 2;grid-row:4;flex-direction:row;align-items:flex-start;gap:40px;margin-top:32px}
  .hero__figure{grid-column:5/span 2;grid-row:1/span 3;margin-top:0}
  .hero__sheet{grid-column:4/span 3;grid-row:4;margin-top:0;align-self:end}
  .hero__creds{grid-column:1/span 6;grid-row:5;margin-top:48px}
}

/* ============================================================
   KONTAKTBOGEN — native Radiogruppe
   ============================================================ */
.sheet{display:flex;flex-direction:column;gap:8px}
.sheet__strip{
  display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;padding-bottom:2px;
}
.sheet__strip::-webkit-scrollbar{display:none}
.frame{
  flex:0 0 84px;scroll-snap-align:start;cursor:pointer;position:relative;
  display:flex;flex-direction:column;gap:6px;
  opacity:.55;transition:opacity var(--dur-fast) ease-out;
}
.frame input{position:absolute;width:1px;height:1px;opacity:0;margin:0}
.frame__tile{
  aspect-ratio:4/5;border:1px solid var(--rule-dark);background:#421827;
  transition:border-color var(--dur-fast) ease-out;
}
.frame__no{
  font-family:var(--font-text);font-size:10px;font-weight:600;font-stretch:85%;
  letter-spacing:.1em;color:var(--cognac);transition:color var(--dur-fast) ease-out;
}
.frame[data-on="true"]{opacity:1}
.frame[data-on="true"] .frame__tile{border-color:var(--fuchsia)}
.frame[data-on="true"] .frame__no{color:var(--fuchsia)}
.frame input:focus-visible ~ .frame__tile{outline:var(--focus-w) solid var(--fuchsia);outline-offset:var(--focus-o)}
.sheet__meta{
  font-family:var(--font-text);font-size:10px;font-weight:600;font-stretch:85%;
  letter-spacing:.1em;color:var(--cognac);text-align:right;
}
@media (min-width:768px){
  .sheet__strip{overflow:visible;scroll-snap-type:none}
  .frame{flex:1 1 0;min-width:0}
}
.frame:nth-of-type(1) .frame__tile{background:#35131F}
.frame:nth-of-type(2) .frame__tile{background:#3B1523}
.frame:nth-of-type(3) .frame__tile{background:#431927}
.frame:nth-of-type(4) .frame__tile{background:#4A1D2D}
.frame:nth-of-type(5) .frame__tile{background:#522233}
.frame:nth-of-type(6) .frame__tile{background:#5A2739}
/* Ladesequenz: staffeln, Auswahl erscheint zuletzt */
.sheet[data-anim="pending"] .frame,
.sheet[data-anim="run"] .frame[data-on="true"] .frame__tile{border-color:var(--rule-dark)}
.sheet[data-anim="pending"] .frame{opacity:0}
.sheet[data-anim="run"] .frame{animation:frameIn 240ms ease-out forwards}
.sheet[data-anim="run"] .frame[data-on="true"]{animation-name:frameInSel}
.sheet[data-anim="run"] .frame[data-on="true"] .frame__no{color:var(--cognac)}
@keyframes frameIn{from{opacity:0}to{opacity:.55}}
@keyframes frameInSel{from{opacity:0}to{opacity:1}}

/* ============================================================
   2 · SITUATIONEN — bildfrei
   ============================================================ */
.sit__head{grid-column:1/-1}
.sit__sub{margin-top:24px}
.sit__list{grid-column:1/-1;margin-top:56px;display:flex;flex-direction:column;gap:28px}
.sit__no{
  display:block;font-family:var(--font-text);font-size:11px;font-weight:600;font-stretch:85%;
  text-transform:uppercase;letter-spacing:.1em;color:var(--graphite);margin-bottom:6px;
  transition:color var(--dur-fast) ease-out;
}
.sit__txt{
  font-family:var(--font-display);font-weight:500;font-size:var(--size-situation);
  line-height:1.25;letter-spacing:-.01em;color:var(--ink);max-width:44ch;display:block;
}
.sit__item:hover .sit__no{color:var(--fuchsia)}
.sit__close2{display:block;margin-top:16px}
.sit__close{
  grid-column:1/-1;margin-top:56px;font-family:var(--font-display);font-weight:500;
  font-size:var(--size-h2);line-height:1.1;letter-spacing:-.02em;color:var(--berry);
}
@media (min-width:768px){
  .sit__head{grid-column:1/span 3}
  .sit__list{margin-top:80px;gap:32px;grid-column:1/span 4}
  .sit__item{display:grid;grid-template-columns:var(--col1) 1fr}
  .sit__no{margin-bottom:0;padding-top:8px}
  .sit__close2{display:block;margin-top:16px}
.sit__close{margin-top:96px}
}
@media (min-width:1280px){
  .sit__list{grid-column:1/span 5}
  .sit__close2{display:block;margin-top:16px}
.sit__close{grid-column:2/span 4}
}

/* ============================================================
   3 · METHODE
   ============================================================ */
.meth{background:var(--ink);color:var(--paper);padding-top:var(--section-y)}
.meth__head{grid-column:1/-1}
.meth__h2{margin-top:20px}
.meth__sub{margin-top:24px}
@media (min-width:768px){.meth__head{grid-column:1/span 4}}
.step{padding-block:var(--section-y);overflow-x:clip}
.step__verb{
  font-family:var(--font-display);font-weight:600;font-size:var(--size-section-display);
  line-height:.92;letter-spacing:-.03em;grid-column:1/-1;overflow-wrap:break-word;
}
.step--left .step__verb{margin-left:calc(-1 * var(--clip))}
.step--right .step__verb{justify-self:end;margin-right:calc(-1 * var(--clip));text-align:right}
.step__body{grid-column:1/-1;margin-top:32px}
@media (min-width:768px){
  .step__body{grid-column:1/span 3;margin-top:48px}
  .step--right .step__body{grid-column:2/span 3}
}
@media (min-width:1280px){
  .step__body{grid-column:2/span 3}
  .step--right .step__body{grid-column:3/span 3}
}
.step--ink{background:var(--ink);color:var(--paper)}
.step--ink .step__verb{color:var(--paper)}
.step--ink .step__body{color:var(--paper-88)}
.step--paper{background:var(--paper);color:var(--ink)}
.step--paper .step__verb{color:var(--ink)}
.step--decide .step__verb{color:var(--berry);margin:0;justify-self:start;text-align:left}
.step__close{
  grid-column:1/-1;margin-top:48px;font-family:var(--font-display);font-weight:500;
  font-size:var(--size-h2);line-height:1.1;letter-spacing:-.02em;color:var(--ink);
}
@media (min-width:1280px){.step__close{grid-column:2/span 4}}

.lens{background:var(--paper);color:var(--ink);padding-bottom:var(--section-y)}
.lens__h2{grid-column:1/-1}
.lens__intro{grid-column:1/-1;margin-top:24px;font-size:20px;color:var(--graphite)}
.lens__dl{grid-column:1/-1;margin-top:56px}
.lens__row{border-top:1px solid var(--rule-light);padding-top:20px;margin-top:32px}
.lens__row:first-child{margin-top:0}
.lens__t{font-weight:600;font-size:var(--size-body)}
.lens__d{margin-top:8px}
.lens__close{grid-column:1/-1;margin-top:56px}
.lens__lead{font-weight:600;margin-bottom:20px;display:block}
@media (min-width:768px){
  .lens__h2{grid-column:1/span 3}
  .lens__intro,.lens__dl,.lens__close{grid-column:1/span 4}
}
@media (min-width:1280px){
  .lens__dl{grid-column:1/span 5}
  .lens__row{display:grid;grid-template-columns:2fr 3fr;gap:var(--grid-gutter)}
  .lens__d{margin-top:0}
  .lens__close{grid-column:1/span 4}
}

/* ============================================================
   4 · ZUSAMMENARBEIT — überwiegend typografisch, ein Bild
   ============================================================ */
.zus__head{grid-column:1/-1}
.zus__h2{margin-top:20px}
.zus__sub{margin-top:24px}
@media (min-width:768px){.zus__head{grid-column:1/span 4}}
.mode{border-top:1px solid var(--rule-dark);padding-top:32px;margin-top:56px}
.mode__label{
  font-family:var(--font-display);font-weight:500;font-size:var(--size-label4);
  line-height:1;letter-spacing:-.03em;color:var(--paper);
  overflow-wrap:break-word;hyphens:auto;
}
.mode__cols{margin-top:32px}
.mode__occ{margin-top:20px;font-size:15px;font-style:italic;color:var(--cognac);line-height:1.5}
@media (min-width:768px){.mode{margin-top:72px}}
@media (min-width:1280px){
  .mode{margin-top:96px}
  .mode__cols{display:grid;grid-template-columns:3fr 2fr;gap:var(--grid-gutter)}
  .mode__occ{margin-top:0}
}
/* Full-Bleed ohne 100vw: Figure liegt außerhalb von .wrap */
.zus__figure{margin-top:48px;margin-bottom:0}
.zus__figure .ph{aspect-ratio:21/9}
@media (max-width:767px){.zus__figure .ph{aspect-ratio:4/5}}
.zus__ctas{margin-top:96px;display:flex;flex-direction:column;align-items:flex-start;gap:20px}
@media (min-width:768px){.zus__ctas{flex-direction:row;align-items:flex-start;gap:40px}}

/* ============================================================
   5 · STATIONEN
   ============================================================ */
.stat__head{grid-column:1/-1}
.stat__h2{margin-top:20px}
.stat__sub{margin-top:24px}
.stat__since{margin-top:12px;font-weight:600;font-size:16px;color:var(--ink)}
.stat__dl{grid-column:1/-1;margin-top:56px}
.stat__row{border-top:1px solid var(--rule-light);padding-top:20px;margin-top:36px}
.stat__row:first-child{margin-top:0}
.stat__t{
  font-family:var(--font-display);font-weight:500;font-size:var(--size-station);
  line-height:1.05;letter-spacing:-.02em;overflow-wrap:break-word;hyphens:auto;
}
.stat__y{
  font-family:var(--font-text);font-size:13px;font-weight:600;font-stretch:85%;
  letter-spacing:.06em;color:var(--graphite);white-space:nowrap;display:inline-block;
  margin-left:10px;vertical-align:baseline;
}
.stat__d{margin-top:12px;font-size:17px}
.stat__cta{grid-column:1/-1;margin-top:64px}
@media (min-width:768px){
  .stat__head{grid-column:1/span 3}
  .stat__dl,.stat__cta{grid-column:1/span 4}
}
@media (min-width:1280px){
  .stat__dl{grid-column:1/span 5}
  .stat__row{display:grid;grid-template-columns:2fr 3fr;gap:var(--grid-gutter)}
  .stat__d{margin-top:0}
  .stat__cta{grid-column:1/span 2}
}

/* ============================================================
   6 · SPEAKING
   ============================================================ */
.spk__head{grid-column:1/-1}
.spk__h2{margin-top:20px}
.spk__sub{margin-top:24px}
.spk__figure{grid-column:1/-1;margin-top:40px}
.spk__figure .ph{aspect-ratio:3/2}
.spk__intro{grid-column:1/-1;margin-top:48px;font-size:13px;font-weight:600;font-stretch:85%;
  text-transform:uppercase;letter-spacing:.1em;line-height:1.9;color:var(--cognac)}
.spk__list{grid-column:1/-1;margin-top:32px;display:flex;flex-direction:column;gap:32px}
.spk__t{
  font-family:var(--font-display);font-weight:500;font-size:24px;
  line-height:1.1;letter-spacing:-.02em;color:var(--paper);overflow-wrap:break-word;
}
.spk__d{margin-top:10px;font-size:17px;color:var(--paper-78)}
.spk__fmt{grid-column:1/-1;margin-top:48px;font-size:16px;color:var(--cognac)}
.spk__cta{grid-column:1/-1;margin-top:40px}
@media (max-width:767px){
  .spk__figure{margin-inline:calc(-1*var(--grid-margin));width:calc(100% + 2*var(--grid-margin))}
}
@media (min-width:768px){
  .spk__head,.spk__figure,.spk__intro,.spk__list,.spk__fmt,.spk__cta{grid-column:1/span 4}
  .spk__t{font-size:28px}
}
@media (min-width:1280px){
  .spk__head{grid-column:1/span 3;grid-row:1}
  .spk__figure{grid-column:4/span 3;grid-row:1;margin-top:0}
  .spk__intro{grid-column:1/span 3;grid-row:2}
  .spk__list{grid-column:1/span 4;grid-row:3}
  .spk__fmt{grid-column:1/span 3;grid-row:4}
  .spk__cta{grid-column:1/span 3;grid-row:5}
  .spk__t{font-size:32px}
}

/* ============================================================
   7 · MINDQUEST
   ============================================================ */
.mq__figure{grid-column:1/-1}
.mq__figure .ph{aspect-ratio:3/2}
.mq__body{grid-column:1/-1;margin-top:40px}
.mq__h2{margin-top:16px}
.mq__sub{margin-top:20px}
.mq__text{margin-top:24px}
.mq__cta{margin-top:32px}
@media (max-width:767px){
  .mq__figure{margin-inline:calc(-1*var(--grid-margin));width:calc(100% + 2*var(--grid-margin))}
}
@media (min-width:768px){
  .mq__figure{grid-column:1/span 4}
  .mq__body{grid-column:1/span 3}
}
@media (min-width:1280px){
  .mq__figure{grid-column:1/span 3;grid-row:1}
  .mq__body{grid-column:4/span 3;grid-row:1;margin-top:0}
}

/* ============================================================
   8 · PERSON
   ============================================================ */
.per__head{grid-column:1/-1}
.per__h2{margin-top:20px}
.per__p1{grid-column:1/-1;margin-top:32px}
.per__figure{grid-column:1/-1;margin-top:40px}
.per__figure .ph{aspect-ratio:4/5}
.per__p2{grid-column:1/-1;margin-top:40px}
.per__cta{grid-column:1/-1;margin-top:40px}
@media (max-width:767px){
  .per__figure{margin-inline:calc(-1*var(--grid-margin));width:calc(100% + 2*var(--grid-margin))}
}
@media (min-width:768px){
  .per__head,.per__p1,.per__p2,.per__cta{grid-column:1/span 2}
  .per__figure{grid-column:3/span 2;grid-row:2/span 3;margin-top:0}
}
@media (min-width:1280px){
  .per__head{grid-column:1/span 3;grid-row:1}
  .per__p1{grid-column:1/span 3;grid-row:2}
  .per__p2{grid-column:1/span 3;grid-row:3}
  .per__cta{grid-column:1/span 3;grid-row:4}
  .per__figure{grid-column:5/span 2;grid-row:2/span 3;margin-top:0;align-self:center}
}

/* ============================================================
   9 · ABSCHLUSS + FORMULAR
   ============================================================ */
.fin{text-align:center}
.fin__h2{
  font-family:var(--font-display);font-weight:500;font-size:var(--size-section-display);
  line-height:.98;letter-spacing:-.03em;color:var(--berry);
}
.fin__sub{
  margin-top:16px;font-family:var(--font-display);font-weight:500;
  font-size:var(--size-h2);line-height:1.05;letter-spacing:-.02em;color:var(--ink);
}
.fin__body{max-width:640px;margin:40px auto 0;text-align:left}
.form{max-width:640px;margin:64px auto 0;text-align:left}
.row2{display:grid;grid-template-columns:1fr;gap:20px}
@media (min-width:768px){.row2{grid-template-columns:1fr 1fr;gap:24px}}
.field{margin-top:24px}
.row2 .field{margin-top:0}
.field label,.fs__legend{
  display:block;font-family:var(--font-text);font-size:13px;font-weight:600;font-stretch:85%;
  text-transform:uppercase;letter-spacing:.08em;color:var(--graphite);margin-bottom:10px;
}
@media (min-width:768px){.field label,.fs__legend{font-size:12px}}
.field input,.field textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--rule-light);
  border-radius:2px 2px 0 0;color:var(--ink);font-family:var(--font-text);
  font-size:16px;line-height:1.5;padding:14px 2px;min-height:52px;
}
@media (min-width:768px){.field input,.field textarea{font-size:17px}}
.field textarea{min-height:132px;resize:vertical}
.field input:focus-visible,.field textarea:focus-visible{
  outline:var(--focus-w) solid var(--fuchsia);outline-offset:var(--focus-o);border-bottom-width:2px;
}
.fs{margin-top:24px}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg label{
  display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;
  border:1px solid var(--rule-light);border-radius:2px;cursor:pointer;
  font-family:var(--font-text);font-size:14px;font-weight:500;color:var(--ink);
  text-transform:none;letter-spacing:0;margin:0;position:relative;
}
.seg input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.seg input:checked ~ span{font-weight:600}
.seg label[data-on="true"]{border-color:var(--fuchsia)}
.seg input:focus-visible ~ span{outline:var(--focus-w) solid var(--fuchsia);outline-offset:6px}
.err{display:block;margin-top:8px;font-size:14px;color:var(--berry);font-weight:500}
.err:empty{display:none}
[aria-invalid="true"]{border-bottom-color:var(--berry);border-bottom-width:2px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn{
  margin-top:32px;background:var(--berry);color:var(--paper);border:0;border-radius:2px;
  font-family:var(--font-text);font-size:14px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;padding:18px 32px;cursor:pointer;min-height:44px;width:100%;
}
@media (min-width:768px){.btn{width:auto}}
.btn[disabled]{opacity:.55;cursor:wait}
.form[aria-busy="true"]{opacity:.88}
.formmicro{margin-top:16px;font-size:15px;color:var(--graphite)}
.fstatus{max-width:640px;margin:32px auto 0;text-align:left}
.fstatus:empty{display:none}
.fstatus__box{border-top:1px solid var(--rule-light);padding-top:24px}
.fstatus h3{
  font-family:var(--font-display);font-weight:500;font-size:var(--size-h2);
  letter-spacing:-.02em;line-height:1.1;
}
.fstatus p{margin-top:12px}
.fstatus--demo h3,.fstatus--error h3{color:var(--berry)}
/* --- Terminbuchung: Einstieg und Dialog --- */
.bkg__intro{
  max-width:640px;margin:56px auto 0;text-align:left;
  border-top:1px solid var(--rule-light);padding-top:32px;
}
.bkg__h3{
  font-family:var(--font-display);font-weight:500;font-size:var(--size-h3);
  letter-spacing:-.02em;line-height:1.15;color:var(--ink);
}
.bkg__p{margin-top:12px;font-size:17px;color:var(--ink)}
.bkg__btn{margin-top:20px}
.bkg{
  position:fixed;inset:0;z-index:160;display:none;
  align-items:center;justify-content:center;padding:16px;
  background:rgba(14,10,12,.72);
}
.bkg[data-open="true"]{display:flex}
.bkg__panel{
  background:var(--paper);width:100%;max-width:760px;
  height:min(82svh,780px);display:flex;flex-direction:column;border-radius:2px;
}
.bkg__bar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 16px;border-bottom:1px solid var(--rule-light);
}
.bkg__title{
  font-family:var(--font-text);font-size:12px;font-weight:600;font-stretch:85%;
  text-transform:uppercase;letter-spacing:.08em;color:var(--graphite);
}
.bkg__close{
  background:none;border:0;cursor:pointer;color:var(--ink);
  font-family:var(--font-text);font-size:13px;font-weight:600;font-stretch:90%;
  text-transform:uppercase;letter-spacing:.06em;
  min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:flex-end;
}
.bkg__frame{flex:1 1 auto;border:0;width:100%;background:var(--paper)}
.bkg__note{padding:12px 16px;font-size:13px;color:var(--graphite);border-top:1px solid var(--rule-light)}
.fin__contact{
  margin-top:48px;font-size:16px;color:var(--graphite);
  display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:center;align-items:center;
}
.fin__contact a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.fin__contact a:hover{color:var(--berry)}

/* ============================================================
   FOOTER
   ============================================================ */
.ftr{background:var(--ink);color:var(--paper);border-top:1px solid var(--rule-dark)}
.ftr__in{
  max-width:1440px;margin-inline:auto;padding:40px var(--grid-margin);
  display:flex;flex-direction:column;gap:8px;font-size:13px;
}
.ftr a{
  color:var(--paper);text-decoration:none;border-bottom:1px solid transparent;
  display:inline-flex;align-items:center;min-height:44px;
}
.ftr a:hover{border-bottom-color:var(--cognac);color:var(--cognac)}
.ftr__legal{display:flex;gap:20px;flex-wrap:wrap}
.ftr__c{color:var(--cognac)}
.ftr__lang{display:flex;gap:4px;align-items:center}
.ftr__lang a{min-width:34px;justify-content:center}
.ftr__lang a:not([aria-current="true"]){opacity:.45}
@media (min-width:768px){
  .ftr__in{flex-direction:row;align-items:center;justify-content:space-between;padding-block:0;min-height:120px}
  .ftr__right{display:flex;gap:32px;align-items:center}
}

/* ============================================================
   STICKY CTA — nur < 1024
   ============================================================ */
.scta{
  position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--ink-96);
  border-top:1px solid var(--rule-dark);padding-bottom:env(safe-area-inset-bottom,0px);
  transform:translateY(110%);transition:transform 240ms ease-out;
}
.scta[data-show="true"]{transform:translateY(0)}
.scta a{
  display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;
  color:var(--paper);text-decoration:none;font-family:var(--font-text);font-size:15px;font-weight:600;
}
@media (min-width:1024px){.scta{display:none}}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:1ms;animation-delay:0ms;transition-duration:1ms;
  }
  .sheet[data-anim="pending"] .frame{opacity:.55}
  .sheet[data-anim="pending"] .frame[data-on="true"]{opacity:1}
  .sheet[data-anim="pending"] .frame[data-on="true"] .frame__tile{border-color:var(--fuchsia)}
  .sheet[data-anim="pending"] .frame[data-on="true"] .frame__no{color:var(--fuchsia)}
}

/* ============================================================
   SIGNATURE-ROLLEN — Fuchsia bleibt UI-only.
   Display-Type, Button und Fehlermeldungen tragen den Berry-Akzent.
   ============================================================ */
::selection{background:var(--berry);color:var(--paper)}


/* ============================================================
   REAL PHOTO PASS
   ============================================================ */
.realimg{width:100%;height:100%;display:block;object-fit:cover}
.hero__figure{overflow:hidden;background:#35131F}
.hero__img{aspect-ratio:4/5;object-position:50% 38%}
.per__figure{overflow:hidden;background:#35131F}
.per__img{aspect-ratio:4/5;object-position:50% 50%}
/* REVIEW ONLY: Beide Fotos in Originalfarben, unbearbeitet, nur auf 900 px
   Lieferbreite skaliert (rund 2,2x der 416-px-Slotbreite, deckt Mobile bei 2x DPR).
   Das vorliegende Timmy-Foto ist 4:3 im Querformat, daher ein eigener Review-Slot,
   damit nichts beschnitten wird. Der Production-Slot A8 bleibt 4:5 —
   das Shooting-System ist davon unberührt. */
.per__img--review{aspect-ratio:4/3;object-position:50% 50%}  /* 1536x1152 = 4:3, kein Beschnitt */

/* The contact sheet is now visually meaningful even before the final shoot:
   six different crops from the supplied portrait. */
.frame__photo{
  display:block;background-image:url("alexandra-portrait.jpg");
  background-size:auto 128%;background-repeat:no-repeat;
}
.frame:nth-of-type(1) .frame__photo{background-position:40% 20%}
.frame:nth-of-type(2) .frame__photo{background-position:46% 24%}
.frame:nth-of-type(3) .frame__photo{background-position:52% 19%}
.frame:nth-of-type(4) .frame__photo{background-position:50% 26%}
.frame:nth-of-type(5) .frame__photo{background-position:56% 22%}
.frame:nth-of-type(6) .frame__photo{background-position:60% 28%}

@media (max-width:767px){
  .hero__img{object-position:50% 35%}
  .per__img{aspect-ratio:4/5;object-position:50% 50%}
}

/* ============================================================
   /speaking — nutzt ausschließlich bestehende Tokens
   ============================================================ */
.spk-hero{background:var(--ink);padding-top:calc(56px + 40px);padding-bottom:56px;overflow-x:clip}
@media (min-width:1024px){.spk-hero{padding-top:calc(64px + 56px)}}
.spk-hero__kicker{grid-column:1/-1}
.spk-hero__h1{
  grid-column:1/-1;margin-top:16px;font-family:var(--font-display);font-weight:500;
  font-size:var(--size-section-display);line-height:.96;letter-spacing:-.03em;
  color:var(--paper);overflow-wrap:break-word;
}
.spk-hero__topics{grid-column:1/-1;margin-top:28px}
.spk-hero__proof{grid-column:1/-1;margin-top:20px;font-size:17px;color:var(--cognac)}
.spk-hero__cta{grid-column:1/-1;margin-top:32px}
.spk-hero__fig{grid-column:1/-1;margin-top:40px}
.spk-hero__fig .ph{aspect-ratio:3/2}
@media (max-width:767px){
  .spk-hero__fig{margin-inline:calc(-1*var(--grid-margin));width:calc(100% + 2*var(--grid-margin))}
}
@media (min-width:1280px){
  .spk-hero__kicker,.spk-hero__h1,.spk-hero__topics,.spk-hero__proof,.spk-hero__cta{grid-column:1/span 3}
  .spk-hero__fig{grid-column:4/span 3;grid-row:1/span 5;margin-top:0;align-self:center}
}

.formats{background:var(--ink);color:var(--paper);padding-bottom:var(--section-y);border-top:1px solid var(--rule-dark)}
.formats__line{
  grid-column:1/-1;font-family:var(--font-text);font-size:var(--size-caption);font-weight:600;
  font-stretch:85%;text-transform:uppercase;letter-spacing:.14em;line-height:1.9;color:var(--cognac);
  padding-top:var(--section-y);
}
.formats__note{grid-column:1/-1;margin-top:20px;font-size:17px;color:var(--paper-78)}

.sig{border-top:1px solid var(--rule-light);padding-top:32px;margin-top:56px}
.sig:first-of-type{margin-top:0}
.sig__no{
  font-family:var(--font-text);font-size:11px;font-weight:600;font-stretch:85%;
  text-transform:uppercase;letter-spacing:.1em;color:var(--graphite);
}
.sig__t{
  margin-top:12px;font-family:var(--font-display);font-weight:500;font-size:var(--size-h2);
  line-height:1.05;letter-spacing:-.02em;color:var(--ink);overflow-wrap:break-word;
}
.sig__sub{margin-top:14px;font-size:var(--size-subline);line-height:1.4;color:var(--berry)}
.sig__d{margin-top:24px;font-size:var(--size-body);max-width:64ch}
.sig__f{margin-top:20px;font-size:15px;font-style:italic;color:var(--graphite)}

.tl__head{grid-column:1/-1}
.tl__lead{margin-top:24px}
.tl{grid-column:1/-1;margin-top:56px}
.tl__cities{
  display:flex;flex-wrap:wrap;gap:8px 24px;padding:0;margin:0;border:0;
}
.tl__city{
  background:none;border:0;padding:6px 0;cursor:pointer;
  font-family:var(--font-display);font-weight:500;font-size:clamp(26px,4vw,44px);
  line-height:1.05;letter-spacing:-.02em;color:var(--paper);opacity:.4;
  transition:opacity var(--dur-fast) ease-out;position:relative;
}
.tl__city:hover{opacity:.75}
.tl__city[aria-selected="true"]{opacity:1}
.tl__city[aria-selected="true"]::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--fuchsia);
}
.tl__panels{margin-top:40px;border-top:1px solid var(--rule-dark);padding-top:32px}
.tl__panel[hidden]{display:none}
.tl__place{
  font-family:var(--font-text);font-size:var(--size-caption);font-weight:600;font-stretch:85%;
  text-transform:uppercase;letter-spacing:.1em;color:var(--cognac);
}
.tl__item{margin-top:24px;display:grid;grid-template-columns:1fr;gap:6px}
.tl__item:first-of-type{margin-top:20px}
.tl__y{
  font-family:var(--font-text);font-size:13px;font-weight:600;font-stretch:85%;
  letter-spacing:.08em;color:var(--cognac);
}
.tl__t{font-family:var(--font-display);font-weight:500;font-size:var(--size-h3);line-height:1.2;letter-spacing:-.01em}
.tl__o{font-size:16px;color:var(--paper-78)}
.tl__role{color:var(--cognac);font-style:italic;font-size:15px}
@media (min-width:1024px){
  .tl__item{grid-template-columns:110px 1fr;gap:0 24px;align-items:baseline}
  .tl__y{grid-row:1}
  .tl__t{grid-column:2}
  .tl__o,.tl__role{grid-column:2;margin-top:6px}
}
.tl__more{grid-column:1/-1;margin-top:56px;border-top:1px solid var(--rule-dark);padding-top:28px}
.tl__more h3{
  font-family:var(--font-text);font-size:var(--size-caption);font-weight:600;font-stretch:85%;
  text-transform:uppercase;letter-spacing:.1em;color:var(--cognac);
}
.tl__more ul{margin-top:18px;display:flex;flex-direction:column;gap:14px}
.tl__more li{font-size:16px;color:var(--paper-78)}
.tl__more b{color:var(--paper);font-weight:600}

/* Mobile: keine Tabs, alles offen als vertikale Abfolge */
@media (max-width:1023px){
  .tl__cities{display:none}
  .tl__panels{border-top:0;padding-top:0;margin-top:0}
  .tl__panel{display:block!important;border-top:1px solid var(--rule-dark);padding-top:24px;margin-top:32px}
  .tl__panel:first-of-type{margin-top:0}
  .tl__panel .tl__place{
    font-family:var(--font-display);font-size:30px;font-weight:500;letter-spacing:-.02em;
    text-transform:none;color:var(--paper);display:block;
  }
}

.cur__head{grid-column:1/-1}
.cur__h2{margin-top:20px}
.cur__body{grid-column:1/-1;margin-top:28px}
.cur__f{grid-column:1/-1;margin-top:20px;font-size:15px;font-style:italic;color:var(--graphite)}
@media (min-width:1280px){
  .cur__head{grid-column:1/span 4}
  .cur__body,.cur__f{grid-column:1/span 4}
}

.ask{text-align:center}
.ask__h2{
  font-family:var(--font-display);font-weight:500;font-size:var(--size-section-display);
  line-height:1;letter-spacing:-.03em;color:var(--berry);
}
.ask__formats{
  margin-top:24px;font-family:var(--font-text);font-size:var(--size-caption);font-weight:600;
  font-stretch:85%;text-transform:uppercase;letter-spacing:.12em;line-height:1.9;color:var(--graphite);
}
.ask__p{margin-top:24px;max-width:560px;margin-inline:auto}
.ask__cta{margin-top:32px}

/* ============================================================
   Weltkarte der Vortragsorte — Teil der Ortsauswahl, nicht Dekoration.
   Fuchsia markiert ausschließlich den aktiven Ort.
   ============================================================ */
.map{grid-column:1/-1;margin-top:40px}
.map__svg{width:100%;height:auto;display:block}
.map__grat line{stroke:var(--rule-dark);stroke-width:1;opacity:.55}
.map__land{fill:none;stroke:var(--rule-dark);stroke-width:1;opacity:.9}
.map__line{
  fill:none;stroke:var(--cognac);stroke-width:1;opacity:.32;
  transition:opacity var(--dur-fast) ease-out,stroke var(--dur-fast) ease-out;
}
.map__dot{fill:var(--cognac);transition:fill var(--dur-fast) ease-out,r var(--dur-fast) ease-out}
.map__dot--hub{fill:var(--paper)}
.map__line[data-active="true"]{stroke:var(--fuchsia);opacity:1;stroke-width:1.5}
.map__dot[data-active="true"]{fill:var(--fuchsia)}
.map__cap{
  margin-top:16px;display:flex;flex-wrap:wrap;gap:6px 24px;
  font-family:var(--font-text);font-size:var(--size-caption);font-weight:600;font-stretch:85%;
  text-transform:uppercase;letter-spacing:.1em;color:var(--cognac);
}
.map__cap b{color:var(--paper);font-weight:600}
.map__hub{color:var(--paper);opacity:.55}
@media (max-width:767px){
  .map{margin-top:32px}
  .map__grat{display:none}
  .map__cap{gap:4px 16px}
}
@media (prefers-reduced-motion:reduce){
  .map__line,.map__dot{transition:none}
}
.map__mark{fill:var(--fuchsia)}
.map__mark--hub{transition:transform var(--dur-fast) ease-out;transform-box:fill-box;transform-origin:center}
.map__mark[data-active="true"]{transform:scale(1.18)}
.map__key{display:inline-flex;align-items:center;gap:8px;color:var(--paper);opacity:.75}
.map__gl{width:13px;height:13px;flex:0 0 auto;overflow:visible}
.map__gl path{fill:var(--fuchsia)}
@media (prefers-reduced-motion:reduce){.map__mark--hub{transition:none}}

/* ============================================================
   Key Visual über dem Hero. Bewusst begrenzt in der Breite,
   damit der eingebrannte Text lesbar bleibt.
   ============================================================ */
.kv{background:var(--ink);padding-top:calc(56px + 24px);padding-bottom:24px}
@media (min-width:1024px){.kv{padding-top:calc(64px + 32px);padding-bottom:32px}}
.kv__fig{margin:0}
.kv__fig img{width:100%;height:auto;display:block;max-width:760px;margin-inline:auto}
@media (max-width:767px){
  .kv{padding-top:calc(56px + 16px)}
  .kv__fig{margin-inline:calc(-1*var(--grid-margin));width:calc(100% + 2*var(--grid-margin))}
}
/* Der Hero folgt direkt darunter und braucht keinen zweiten Kopfabstand. */
.kv + .hero{padding-top:32px}
@media (min-width:1280px){.kv + .hero{padding-top:48px;min-height:0}}

/* ============================================================
   Stimmen & Gespräche
   ============================================================ */
.med{border-top:1px solid var(--rule-light);padding-top:32px;margin-top:56px;max-width:68ch}
.med:first-of-type{margin-top:48px}
.med__meta{
  font-family:var(--font-text);font-size:var(--size-caption);font-weight:600;font-stretch:85%;
  text-transform:uppercase;letter-spacing:.1em;color:var(--graphite);
}
.med__t{
  margin-top:14px;font-family:var(--font-display);font-weight:500;font-size:var(--size-h2);
  line-height:1.08;letter-spacing:-.02em;color:var(--ink);overflow-wrap:break-word;
}
.med__host{margin-top:12px;font-size:var(--size-subline);color:var(--berry)}
.med__d{margin-top:20px;font-size:var(--size-body)}
.med__cta{margin-top:24px}

.voice{margin:0;border-top:1px solid var(--rule-dark);padding-top:32px;margin-top:56px}
.voice:first-of-type{margin-top:48px}
.voice__q{
  font-family:var(--font-display);font-weight:500;font-size:var(--size-h2);
  line-height:1.15;letter-spacing:-.02em;color:var(--paper);max-width:44ch;
}
.voice__q::before{content:"„"}
.voice__q::after{content:"“"}
.voice__a{margin-top:24px;display:flex;flex-direction:column;gap:4px}
.voice__a b{
  font-family:var(--font-text);font-size:var(--size-caption);font-weight:600;font-stretch:85%;
  text-transform:uppercase;letter-spacing:.1em;color:var(--cognac);
}
.voice__a span{font-size:16px;color:var(--paper-78)}
@media (min-width:1280px){
  .voice{display:grid;grid-template-columns:3fr 2fr;gap:var(--grid-gutter)}
  .voice__a{margin-top:0;padding-top:6px}
}

/* ============================================================
   BILDINTEGRATION — Refinement.
   Keine neuen Sektionen, keine neue Typografie, kein neues Branding.
   Grundgedanke: Die beiden echten Fotos haben helle Hintergründe und
   sitzen auf Burgunder. Genau daraus entsteht der Kastencharakter.
   Also nicht überall derselbe Effekt, sondern je Bild eine eigene
   Lösung für den jeweiligen Übergang.
   ============================================================ */

/* ---- A · Key Visual: löst sich in den Grund auf --------------
   Die Illustration liegt auf Creme. Statt einer Kante wird der
   Rand ausmaskiert; das Motiv scheint aus dem Grund zu treten. */
.kv__fig img{
  -webkit-mask-image:radial-gradient(120% 108% at 50% 44%,#000 52%,rgba(0,0,0,.86) 68%,transparent 96%);
          mask-image:radial-gradient(120% 108% at 50% 44%,#000 52%,rgba(0,0,0,.86) 68%,transparent 96%);
}
@media (min-width:1280px){
  /* leicht aus der Mitte gerückt und größer als der Satzspiegel:
     wirkt komponiert statt zentriert eingesetzt */
  .kv__fig img{max-width:820px;margin-left:auto;margin-right:6%}
}

/* ---- B · Hero-Porträt: zwei weiche Kanten und ein Überlapp ---
   Links und unten läuft das Bild in den Grund. Der Kontaktbogen
   überlagert die untere Ecke leicht — dadurch Vordergrund und
   Mittelgrund statt zweier getrennter Boxen. */
.hero__figure{background:transparent;overflow:visible;position:relative}
.hero__figure .realimg{
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 16%,#000 100%),
                     linear-gradient(to top,transparent 0,#000 14%,#000 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 16%,#000 100%),
                     linear-gradient(to top,transparent 0,#000 14%,#000 100%);
  -webkit-mask-composite:source-in; mask-composite:intersect;
}
/* Tonaler Ausgleich: der helle Studiohintergrund wird nach unten
   in die Burgunderfläche geführt, ohne das Gesicht anzufassen. */
.hero__figure::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,rgba(53,19,31,0) 46%,rgba(53,19,31,.55) 82%,rgba(53,19,31,.92) 100%),
             linear-gradient(to right,rgba(53,19,31,.5) 0,rgba(53,19,31,0) 22%);
}
@media (min-width:1280px){
  /* Feine Linie vom Kicker zum Bild: „verbinden“, einmalig auf der Seite. */
  .hero__figure::before{
    content:"";position:absolute;top:38px;right:100%;width:64px;height:1px;
    background:linear-gradient(to right,rgba(216,135,63,0),rgba(216,135,63,.55));
  }
  .hero__sheet{position:relative;z-index:2;margin-top:-28px}
}

/* ---- C · Timmy: asymmetrischer Anschnitt ---------------------
   Querformat, das rechts über den Satzspiegel hinausläuft und
   links weich in den Grund übergeht. Text und Bild greifen ineinander. */
.per__figure{background:transparent;overflow:visible}
.per__figure .realimg{
  -webkit-mask-image:linear-gradient(to right,transparent 0,#000 22%,#000 100%);
          mask-image:linear-gradient(to right,transparent 0,#000 22%,#000 100%);
}
@media (min-width:1280px){
  .sect--ink .per__figure{margin-right:calc(-1 * var(--grid-margin));width:calc(100% + var(--grid-margin))}
  .sect--paper .per__figure .realimg{
    -webkit-mask-image:linear-gradient(to left,transparent 0,#000 20%,#000 100%);
            mask-image:linear-gradient(to left,transparent 0,#000 20%,#000 100%);
  }
  .sect--paper .per__figure{margin-left:calc(-1 * var(--grid-margin));width:calc(100% + var(--grid-margin))}
}

/* ---- D · Full-Bleed-Band: keine waagrechte Nahtstelle --------
   Oben und unten läuft das Band in den Abschnitt aus. */
.zus__figure .ph,
.zus__figure img{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 88%,transparent 100%);
          mask-image:linear-gradient(to bottom,transparent 0,#000 12%,#000 88%,transparent 100%);
}

/* ---- E · MindQuest auf Papier: bewusst harte Kante ----------
   Auf hellem Grund ist der Kontrast gering, eine Kante wirkt
   dort gewollt. Tiefe entsteht stattdessen durch eine versetzte
   Hilfslinie hinter dem Bild. */
.mq__figure{position:relative}
.mq__figure::before{
  content:"";position:absolute;inset:auto auto -14px -14px;width:62%;height:1px;
  background:var(--rule-light);
}
@media (min-width:1280px){
  .mq__figure::after{
    content:"";position:absolute;top:-14px;left:-14px;width:1px;height:46%;
    background:var(--rule-light);
  }
}

/* ---- F · Speaking: eine weiche Ecke und eine Verbindung -----
   Nur die zum Text zeigende Kante wird geöffnet. */
.spk__figure .ph,.spk__figure img,
.spk-hero__fig .ph,.spk-hero__fig img{
  -webkit-mask-image:linear-gradient(115deg,transparent 0,#000 18%,#000 100%);
          mask-image:linear-gradient(115deg,transparent 0,#000 18%,#000 100%);
}

/* ---- Platzhalterflächen ruhiger, solange keine Fotos da sind -- */
.ph{border-color:transparent;box-shadow:inset 0 0 0 1px var(--rule-dark)}
.sect--paper .ph{box-shadow:inset 0 0 0 1px var(--rule-light)}

/* ---- Mobile: Komposition vereinfachen -----------------------
   Weiche Kanten bleiben, Überlappungen und Ausbrüche entfallen.
   Keine Maske auf der Leseseite, kein Text über Bild. */
@media (max-width:1023px){
  .hero__figure::before{display:none}
  .hero__sheet{margin-top:16px}
  .sect--ink .per__figure,.sect--paper .per__figure{margin-right:0;margin-left:0;width:auto}
}
@media (max-width:767px){
  .hero__figure .realimg{
    -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 84%,transparent 100%);
            mask-image:linear-gradient(to bottom,#000 0,#000 84%,transparent 100%);
    -webkit-mask-composite:source-over; mask-composite:add;
  }
  .hero__figure::after{
    background:linear-gradient(to bottom,rgba(53,19,31,0) 58%,rgba(53,19,31,.9) 100%);
  }
  .per__figure .realimg,.kv__fig img{
    -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 88%,transparent 100%);
            mask-image:linear-gradient(to bottom,#000 0,#000 88%,transparent 100%);
  }
  .mq__figure::before,.mq__figure::after{display:none}
}

/* Wo Masken nicht unterstützt werden, bleibt alles wie vorher:
   sichtbares Bild mit Kante. Kein Verlust an Inhalt. */
@supports not ((mask-image:linear-gradient(#000,#000)) or (-webkit-mask-image:linear-gradient(#000,#000))){
  .hero__figure{background:#35131F;overflow:hidden}
  .per__figure{background:#35131F;overflow:hidden}
}