/* =========================================================
   TEST & ELEVATE — Design System v1.0
   "Evidenz-Ästhetik": editorial precision × lab instrumentation
   ========================================================= */

@font-face{font-family:'Editorial';src:url('instrument-serif-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:'Editorial';src:url('instrument-serif-latin-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:block}
@font-face{font-family:'Grotesk';src:url('inter-tight-latin-wght-normal.woff2') format('woff2-variations');font-weight:100 900;font-style:normal;font-display:block}
@font-face{font-family:'Data';src:url('ibm-plex-mono-latin-400-normal.woff2') format('woff2');font-weight:400;font-display:block}
@font-face{font-family:'Data';src:url('ibm-plex-mono-latin-500-normal.woff2') format('woff2');font-weight:500;font-display:block}

:root{
  /* ---- Core palette ---- */
  --ink:#121110;              /* near-black, warm neutral */
  --ink-80:rgba(18,17,16,.80);
  --ink-60:rgba(18,17,16,.58);
  --ink-40:rgba(18,17,16,.38);
  --ink-12:rgba(18,17,16,.12);
  --ink-06:rgba(18,17,16,.06);
  --paper:#F4F1EA;            /* warm off-white, editorial ground */
  --paper-raised:#FAF8F3;
  --paper-sunk:#EBE7DE;
  --signal:#C8462A;           /* vermilion — the "elevate" accent */
  --signal-soft:rgba(200,70,42,.10);
  --on-dark:#F4F1EA;
  --on-dark-60:rgba(244,241,234,.60);
  --on-dark-40:rgba(244,241,234,.38);
  --on-dark-12:rgba(244,241,234,.14);

  /* ---- Decision semantics (used only in evidence components) ---- */
  --go:#2F6E4F;
  --iterate:#B07419;
  --stop:#6E7276;

  /* ---- Type ---- */
  --f-display:'Editorial',Georgia,serif;
  --f-text:'Grotesk','Inter Tight',system-ui,sans-serif;
  --f-data:'Data','IBM Plex Mono',monospace;

  /* ---- Rhythm ---- */
  --gutter:clamp(20px,4vw,72px);
  --maxw:1240px;
  --sec:clamp(72px,9vw,148px);
  --r:3px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{
  background:var(--paper);color:var(--ink);
  font-family:var(--f-text);font-size:17px;line-height:1.62;font-weight:400;
  letter-spacing:-.005em;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}

/* ========== Layout primitives ========== */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.wrap-wide{max-width:1520px;margin:0 auto;padding-inline:var(--gutter)}
.sec{padding-block:var(--sec)}
.sec-tight{padding-block:calc(var(--sec)*.6)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2vw,32px)}
.rule{height:1px;background:var(--ink-12);border:0}
.dark{background:var(--ink);color:var(--on-dark)}
.dark .rule{background:var(--on-dark-12)}
.sunk{background:var(--paper-sunk)}

/* ========== Type styles ========== */
.eyebrow{
  font-family:var(--f-data);font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-40);
  display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--signal);flex:none}
.dark .eyebrow{color:var(--on-dark-40)}
.num{font-family:var(--f-data);font-size:11px;letter-spacing:.14em;color:var(--ink-40)}
.dark .num{color:var(--on-dark-40)}

h1,h2,h3,h4{font-weight:520;letter-spacing:-.03em;line-height:1.06}
.display{font-family:var(--f-display);font-weight:400;letter-spacing:-.022em;line-height:.98}
.d1{font-size:clamp(44px,7.4vw,104px)}
.d2{font-size:clamp(34px,4.6vw,62px);line-height:1.02}
.d3{font-size:clamp(26px,2.7vw,38px);line-height:1.1}
.h4{font-size:20px;font-weight:560;letter-spacing:-.02em;line-height:1.25}
em.hi{font-style:italic;color:var(--signal)}
.lead{font-size:clamp(18px,1.5vw,22px);line-height:1.5;color:var(--ink-80);letter-spacing:-.015em;font-weight:380}
.dark .lead{color:var(--on-dark-60)}
.small{font-size:14.5px;line-height:1.55;color:var(--ink-60)}
.dark .small{color:var(--on-dark-60)}
.tiny{font-family:var(--f-data);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-40)}
.dark .tiny{color:var(--on-dark-40)}

/* ========== Buttons ========== */
.btn{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--f-text);font-size:15px;font-weight:520;letter-spacing:-.01em;
  padding:15px 24px;border-radius:var(--r);border:1px solid transparent;
  background:var(--ink);color:var(--paper);white-space:nowrap;
  transition:transform .35s cubic-bezier(.2,.7,.3,1),background .3s;
}
.btn .ar{width:8px;height:8px;border-right:1.4px solid currentColor;border-top:1.4px solid currentColor;transform:rotate(45deg);opacity:.7}
.btn:hover{background:var(--signal);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink-12)}
.btn-ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.dark .btn{background:var(--paper);color:var(--ink)}
.dark .btn:hover{background:var(--signal);color:var(--paper)}
.dark .btn-ghost{background:transparent;color:var(--on-dark);border-color:var(--on-dark-12)}
.link{
  display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:520;
  padding-bottom:3px;border-bottom:1px solid var(--ink-12);
}
.link .ar{width:7px;height:7px;border-right:1.4px solid var(--signal);border-top:1.4px solid var(--signal);transform:rotate(45deg)}
.dark .link{border-color:var(--on-dark-12)}

/* ========== Header ========== */
header.nav{position:sticky;top:0;z-index:50;background:rgba(244,241,234,.86);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--ink-12)}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:28px;height:74px}
.logo{display:flex;align-items:center;gap:12px}
.logo .mark{width:34px;height:34px;flex:none}
.logo .wm{font-size:13.5px;font-weight:620;letter-spacing:.19em;text-transform:uppercase;line-height:1;display:flex;align-items:baseline;gap:6px}
.logo .wm i{font-family:var(--f-display);font-style:italic;color:var(--signal);font-size:19px;letter-spacing:0;font-weight:400;position:relative;top:1px}
.navlinks{display:flex;align-items:center;gap:30px;font-size:14.5px;font-weight:480;letter-spacing:-.005em}
.navlinks a{color:var(--ink-80);padding-block:6px;border-bottom:1px solid transparent}
.navlinks a.on{color:var(--ink);border-color:var(--signal)}
.nav-cta{display:flex;align-items:center;gap:12px}
.nav-cta .btn{padding:11px 19px;font-size:14px}
.burger{display:none;width:40px;height:40px;border:1px solid var(--ink-12);border-radius:var(--r);align-items:center;justify-content:center;flex-direction:column;gap:4px}
.burger span{width:15px;height:1.4px;background:var(--ink);display:block}
.mobile-only{display:none}

/* ========== Signature hero ========== */
.hero{position:relative;background:var(--ink);color:var(--on-dark);overflow:hidden}
.hero-grid-bg{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(var(--on-dark-12) 1px,transparent 1px),linear-gradient(90deg,var(--on-dark-12) 1px,transparent 1px);
  background-size:96px 96px;mask-image:radial-gradient(120% 90% at 70% 40%,#000 0%,transparent 78%)}
.hero-glow{position:absolute;width:900px;height:900px;right:-160px;top:-320px;border-radius:50%;
  background:radial-gradient(circle,rgba(200,70,42,.22),transparent 62%);filter:blur(20px)}
.hero-in{position:relative;padding-block:clamp(70px,10vw,132px) clamp(56px,7vw,96px)}
.hero-layout{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,4vw,64px);align-items:center}
.hero h1{margin-block:26px 26px}
.hero-metrics{display:flex;gap:0;border-top:1px solid var(--on-dark-12);margin-top:44px}
.hero-metrics div{padding:20px 26px 0 0;margin-right:26px;border-right:1px solid var(--on-dark-12)}
.hero-metrics div:last-child{border-right:0}
.hero-metrics b{display:block;font-family:var(--f-display);font-size:34px;font-weight:400;letter-spacing:-.02em;line-height:1}
.hero-metrics span{display:block;margin-top:7px;font-size:12.5px;color:var(--on-dark-60);line-height:1.4;max-width:200px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.scrollcue{display:flex;align-items:center;gap:12px;margin-top:56px;color:var(--on-dark-40);font-family:var(--f-data);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
.scrollcue i{display:block;width:1px;height:34px;background:linear-gradient(var(--signal),transparent)}

/* ========== Cards & modules ========== */
.card{background:var(--paper-raised);border:1px solid var(--ink-12);border-radius:var(--r);padding:clamp(22px,2.4vw,34px);display:flex;flex-direction:column;gap:12px}
.dark .card{background:rgba(244,241,234,.045);border-color:var(--on-dark-12)}
.card .idx{font-family:var(--f-data);font-size:11px;letter-spacing:.14em;color:var(--signal)}
.card p{color:var(--ink-60);font-size:15px;line-height:1.55}
.dark .card p{color:var(--on-dark-60)}
.card-hover{position:relative;overflow:hidden}
.card-hover::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:34%;background:var(--signal)}

.split{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr);gap:clamp(28px,5vw,88px);align-items:start}
.stack-l{display:flex;flex-direction:column;gap:18px}

.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--ink-12);border:1px solid var(--ink-12);border-radius:var(--r);overflow:hidden}
.steps>div{background:var(--paper);padding:26px 22px;display:flex;flex-direction:column;gap:10px;min-height:210px}
.dark .steps{background:var(--on-dark-12);border-color:var(--on-dark-12)}
.dark .steps>div{background:var(--ink)}
.steps .k{font-family:var(--f-data);font-size:10.5px;letter-spacing:.14em;color:var(--signal)}
.steps h4{font-size:17px;font-weight:560;letter-spacing:-.02em}
.steps p{font-size:13.5px;line-height:1.5;color:var(--ink-60)}
.dark .steps p{color:var(--on-dark-60)}
.steps .out{margin-top:auto;padding-top:12px;border-top:1px solid var(--ink-12);font-family:var(--f-data);font-size:10.5px;letter-spacing:.06em;color:var(--ink-40);text-transform:uppercase}
.dark .steps .out{border-color:var(--on-dark-12);color:var(--on-dark-40)}

table.tbl{width:100%;border-collapse:collapse;font-size:14.5px}
table.tbl th{text-align:left;font-family:var(--f-data);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-40);font-weight:500;padding:0 18px 12px 0;border-bottom:1px solid var(--ink-12)}
table.tbl td{padding:16px 18px 16px 0;border-bottom:1px solid var(--ink-12);vertical-align:top;color:var(--ink-80)}
table.tbl td:first-child{font-weight:540;color:var(--ink)}
.dark table.tbl th,.dark table.tbl td{border-color:var(--on-dark-12)}
.dark table.tbl td{color:var(--on-dark-60)}
.dark table.tbl td:first-child{color:var(--on-dark)}

/* price cards */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,22px)}
.tier{border:1px solid var(--ink-12);border-radius:var(--r);padding:30px 28px 28px;background:var(--paper-raised);display:flex;flex-direction:column;gap:16px}
.tier.feature{background:var(--ink);color:var(--on-dark);border-color:var(--ink);position:relative}
.tier .price{font-family:var(--f-display);font-size:42px;line-height:1;letter-spacing:-.02em}
.tier .price small{font-family:var(--f-text);font-size:13px;letter-spacing:0;color:var(--ink-40);margin-left:6px}
.tier.feature .price small{color:var(--on-dark-40)}
.tier ul{list-style:none;display:flex;flex-direction:column;gap:9px;font-size:14px;color:var(--ink-60)}
.tier.feature ul{color:var(--on-dark-60)}
.tier li{display:flex;gap:10px;line-height:1.45}
.tier li::before{content:"";width:5px;height:5px;background:var(--signal);flex:none;margin-top:8px;border-radius:50%}
.tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-data);font-size:10px;letter-spacing:.13em;text-transform:uppercase;padding:5px 10px;border:1px solid var(--ink-12);border-radius:100px;color:var(--ink-60);width:fit-content}
.tag.sig{border-color:var(--signal);color:var(--signal)}
.dark .tag,.tier.feature .tag{border-color:var(--on-dark-12);color:var(--on-dark-60)}

/* quote / proof */
.quote{font-family:var(--f-display);font-size:clamp(24px,2.7vw,38px);line-height:1.22;letter-spacing:-.02em}
.placeholder{border:1px dashed var(--ink-12);border-radius:var(--r);padding:26px;display:flex;flex-direction:column;gap:10px}
.dark .placeholder{border-color:var(--on-dark-12)}
.ph-note{font-family:var(--f-data);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--signal)}

/* forms */
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:8px}
.field.full{grid-column:1/-1}
.field label{font-family:var(--f-data);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-40)}
.dark .field label{color:var(--on-dark-40)}
.field .inp{border:0;border-bottom:1px solid var(--ink-12);background:transparent;padding:12px 0;font-family:var(--f-text);font-size:16px;color:var(--ink-40);min-height:44px}
.dark .field .inp{border-color:var(--on-dark-12);color:var(--on-dark-40)}
.field .inp.filled{color:var(--ink)}
.dark .field .inp.filled{color:var(--on-dark)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--ink-12);border-radius:100px;padding:9px 15px;font-size:13.5px;color:var(--ink-60)}
.chip.on{border-color:var(--signal);color:var(--signal);background:var(--signal-soft)}
.dark .chip{border-color:var(--on-dark-12);color:var(--on-dark-60)}

/* logos strip */
.strip{display:flex;align-items:center;gap:clamp(24px,4vw,58px);flex-wrap:wrap}
.strip span{font-family:var(--f-display);font-size:21px;color:var(--ink-40);letter-spacing:-.01em}
.dark .strip span{color:var(--on-dark-40)}

/* footer */
footer.ft{background:var(--ink);color:var(--on-dark);padding-block:clamp(56px,7vw,96px) 34px}
.ft-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;padding-bottom:52px;border-bottom:1px solid var(--on-dark-12)}
.ft h5{font-family:var(--f-data);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-40);font-weight:500;margin-bottom:16px}
.ft ul{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:14.5px;color:var(--on-dark-60)}
.ft-bot{display:flex;justify-content:space-between;gap:20px;padding-top:26px;font-family:var(--f-data);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--on-dark-40);flex-wrap:wrap}
.ft-cta{display:flex;justify-content:space-between;align-items:flex-end;gap:36px;padding-bottom:56px;flex-wrap:wrap}

/* page header (subpages) */
.phead{background:var(--ink);color:var(--on-dark);position:relative;overflow:hidden}
.phead-in{position:relative;padding-block:clamp(56px,7vw,104px) clamp(46px,6vw,84px)}
.phead .crumb{font-family:var(--f-data);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-40);margin-bottom:26px}
.phead h1{margin-bottom:22px}
.phead-bg{position:absolute;inset:0;opacity:.45;background-image:linear-gradient(90deg,var(--on-dark-12) 1px,transparent 1px);background-size:96px 96px;mask-image:linear-gradient(90deg,#000,transparent 85%)}

/* misc */
.kpi{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--ink-12);border-radius:var(--r);overflow:hidden}
.kpi>div{padding:28px;border-right:1px solid var(--ink-12)}
.kpi>div:last-child{border-right:0}
.kpi b{display:block;font-family:var(--f-display);font-size:clamp(30px,3.4vw,46px);line-height:1;letter-spacing:-.02em}
.kpi span{display:block;margin-top:10px;font-size:13.5px;color:var(--ink-60);line-height:1.45}
.dark .kpi{border-color:var(--on-dark-12)}
.dark .kpi>div{border-color:var(--on-dark-12)}
.dark .kpi span{color:var(--on-dark-60)}
.mobile-bar{display:none}

/* ================= MOBILE ================= */
@media (max-width:860px){
  body{font-size:16px}
  .navlinks,.nav-cta{display:none}
  .burger{display:flex}
  .mobile-only{display:block}
  .nav-in{height:64px}
  .hero-layout{grid-template-columns:1fr;gap:38px}
  .hero-metrics{flex-direction:column;gap:0}
  .hero-metrics div{border-right:0;border-bottom:1px solid var(--on-dark-12);padding:16px 0;margin:0}
  .hero-metrics div:last-child{border-bottom:0}
  .hero-metrics span{max-width:none}
  .hero-actions .btn{flex:1 1 100%;justify-content:center}
  .split{grid-template-columns:1fr;gap:30px}
  .steps{grid-template-columns:1fr}
  .steps>div{min-height:0}
  .tiers{grid-template-columns:1fr}
  .form{grid-template-columns:1fr}
  .kpi{grid-template-columns:1fr}
  .kpi>div{border-right:0;border-bottom:1px solid var(--ink-12)}
  .ft-top{grid-template-columns:1fr 1fr;gap:30px}
  .cols3,.cols2,.cols4{grid-template-columns:1fr!important}
  table.tbl{font-size:13.5px}
  table.tbl td,table.tbl th{padding-right:10px}
  .mobile-bar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;gap:10px;
    padding:11px 16px calc(11px + env(safe-area-inset-bottom));
    background:rgba(18,17,16,.95);backdrop-filter:blur(12px);
  }
  .mobile-bar .btn{flex:1;justify-content:center;padding:13px 14px;font-size:14px;background:var(--paper);color:var(--ink)}
  .mobile-bar .btn.g{background:transparent;color:var(--on-dark);border:1px solid var(--on-dark-12)}
  footer.ft{padding-bottom:96px}
  .hscroll{display:flex;gap:12px;overflow-x:auto;padding-bottom:8px}
  .hscroll>*{min-width:78%}
}
.cols2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.6vw,24px)}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,24px)}
.cols4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,24px)}

/* ---- instrument ---- */
.hero-panel{position:relative}
.instrument{width:100%;height:auto}
.hero-panel::before{content:"";position:absolute;inset:-8%;background:radial-gradient(circle at 55% 45%,rgba(200,70,42,.14),transparent 62%);filter:blur(30px);pointer-events:none}
@media (max-width:860px){.hero-panel{margin-inline:calc(var(--gutter)*-.25)}}

/* =========================================================
   ÜBERARBEITUNG v2 — kleinere Typo, dominante CTAs, immer sichtbar
   ========================================================= */
:root{
  --sec:clamp(56px,6vw,104px);          /* vorher bis 148 */
  --gutter:clamp(20px,4vw,64px);
}

/* ---- Typografie: kleiner und ruhiger ---- */
.d1{font-size:clamp(34px,4.4vw,62px);line-height:1.02;letter-spacing:-.025em}
/* Sektionstitel wechseln von der Antiqua in die Grotesk — deutlich cleaner */
.d2{font-family:var(--f-text);font-weight:560;font-size:clamp(26px,2.9vw,38px);
    line-height:1.1;letter-spacing:-.032em}
.d3{font-family:var(--f-text);font-weight:560;font-size:clamp(20px,1.9vw,25px);
    line-height:1.2;letter-spacing:-.028em}
.lead{font-size:clamp(16.5px,1.15vw,19px);line-height:1.52}
.h4{font-size:18px}
em.hi{font-style:normal;color:var(--signal)}          /* kein Kursiv mehr in der Grotesk */
.d1 em.hi{font-family:var(--f-display);font-style:italic}  /* nur im Hero bleibt die Antiqua */

/* ---- Primärer CTA: Signal-Fläche statt Ink ---- */
.btn-primary{background:var(--signal);color:var(--paper);border-color:var(--signal);
  box-shadow:0 1px 0 rgba(18,17,16,.06)}
.btn-primary:hover{background:#B03B22;border-color:#B03B22;transform:translateY(-2px)}
.dark .btn-primary{background:var(--signal);color:var(--paper);border-color:var(--signal)}
.dark .btn-primary:hover{background:#DA5333;border-color:#DA5333}
.btn-lg{padding:18px 30px;font-size:16px;font-weight:560}
.btn .ar{transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.btn:hover .ar{transform:rotate(45deg) translate(3px,-3px)}
.btn-primary .ar{opacity:.9}

/* Einblenden beim Erscheinen — einmalig, ohne Wiederholung */
@keyframes cta-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hero-actions .btn,.cta-group .btn,.ctaband .btn{animation:cta-in .55s cubic-bezier(.2,.7,.3,1) both}
.hero-actions .btn:nth-child(2){animation-delay:.09s}

.cta-note{margin-top:12px;font-family:var(--f-data);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-40)}
.dark .cta-note{color:var(--on-dark-40)}
.cta-group{display:flex;flex-direction:column;align-items:flex-start;gap:0}

/* ---- Hero kompakter, CTA über der Falz ---- */
.hero-in{padding-block:clamp(46px,5.5vw,78px) clamp(38px,4.5vw,60px)}
.hero h1{margin-block:18px 18px}
.hero-actions{margin-top:26px}
.hero-metrics{margin-top:30px}
.hero-metrics b{font-size:27px}
.scrollcue{margin-top:32px}
.phead-in{padding-block:clamp(44px,5vw,76px) clamp(34px,4vw,58px)}
.phead h1{margin-bottom:16px}

/* ---- Zwischen-CTA-Band ---- */
.ctaband{background:var(--ink);color:var(--on-dark);padding-block:clamp(38px,4.5vw,60px)}
.ctaband .in{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.ctaband h3{font-family:var(--f-text);font-weight:560;font-size:clamp(20px,2.1vw,27px);
  letter-spacing:-.03em;line-height:1.2;max-width:24ch}
.ctaband .sub{margin-top:8px;font-size:14.5px;color:var(--on-dark-60);max-width:46ch}

/* ---- Sticky-Leiste Desktop: der CTA verlässt das Bild nie ---- */
.deskbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:flex;align-items:center;
  justify-content:space-between;gap:24px;padding:12px clamp(20px,4vw,64px);
  background:rgba(18,17,16,.96);backdrop-filter:blur(12px);color:var(--on-dark);
  border-top:1px solid var(--on-dark-12)}
.deskbar .db-txt{font-size:14.5px;color:var(--on-dark-60)}
.deskbar .db-act{display:flex;gap:10px;flex:none}
.deskbar .btn{padding:11px 20px;font-size:14px}
.deskbar .btn-ghost{color:var(--on-dark);border-color:var(--on-dark-12)}
footer.ft{padding-bottom:96px}
@media (max-width:860px){.deskbar{display:none}footer.ft{padding-bottom:104px}}
@media (min-width:861px){.mobile-bar{display:none!important}}

/* Mobile-Leiste: primär in Signal */
.mobile-bar .btn.btn-primary{background:var(--signal);color:var(--paper)}

@media (prefers-reduced-motion:reduce){
  .hero-actions .btn,.cta-group .btn,.ctaband .btn{animation:none}
}

/* CTA-Band: Text auf dunkler Fläche */
.ctaband .cta-note{color:var(--on-dark-40)}
.ctaband h3{max-width:30ch}
.ctaband .in>div:first-child{flex:1 1 420px}

/* ============================================================ v3
   Kontrast, Auswahllogik, CTA-Hygiene */
:root{
  --ink-60:rgba(18,17,16,.68);
  --ink-40:rgba(18,17,16,.62);
  --ink-12:rgba(18,17,16,.14);
  --on-dark-60:rgba(244,241,234,.72);
  --on-dark-40:rgba(244,241,234,.58);
  --on-dark-12:rgba(244,241,234,.16);
  --signal-text:#AC3A20;      /* 5,1:1 auf Papier */
  --signal-dark:#E3634A;      /* 5,5:1 auf Tinte  */
  --signal-fill:#B83E22;      /* 4,6:1 mit Papierschrift */
}
em.hi{color:var(--signal-text)}
.dark em.hi{color:var(--signal-dark)}
.btn-primary{background:var(--signal-fill);border-color:var(--signal-fill)}
.btn-primary:hover{background:#9E3219;border-color:#9E3219}
.eyebrow::before{background:var(--signal-text)}
.dark .eyebrow::before{background:var(--signal-dark)}
.tiny{font-size:11px;letter-spacing:.1em}
.small{font-size:15px}
.hero-metrics span{font-size:13.5px;color:var(--on-dark-60)}
.cta-note{color:var(--ink-60)}
.dark .cta-note,.ctaband .cta-note{color:var(--on-dark-60)}
.scrollcue{color:var(--on-dark-60)}
.tag{color:var(--ink-80)}

/* fixierte Desktop-Leiste entfällt — der Aufruf steht in der Sektion, nicht am Fensterrand */
.deskbar{display:none!important}
@media (max-width:860px){footer.ft{padding-bottom:96px}}

/* ---------------------------------------------------------- Programmauswahl */
.picker{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.opt{position:relative;display:flex;flex-direction:column;gap:14px;
  border:1px solid var(--ink-12);border-radius:var(--r);background:var(--paper-raised);
  padding:26px 24px 24px;transition:border-color .18s,box-shadow .18s,transform .18s}
.opt:hover{border-color:rgba(18,17,16,.34);box-shadow:0 10px 30px rgba(18,17,16,.07);transform:translateY(-2px)}
.opt .rank{font-family:var(--f-data);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-40)}
.opt h3{font-family:var(--f-text);font-weight:560;font-size:22px;letter-spacing:-.02em;line-height:1.15}
.opt .who{font-size:14px;line-height:1.5;color:var(--ink-60);min-height:44px}
.opt .pr{font-family:var(--f-data);font-size:27px;letter-spacing:-.02em;line-height:1;padding-top:4px}
.opt .pr small{font-family:var(--f-text);font-size:13px;color:var(--ink-60);margin-left:7px;letter-spacing:0}
.opt ul{list-style:none;display:flex;flex-direction:column;gap:8px;font-size:14px;color:var(--ink-80);
  border-top:1px solid var(--ink-12);padding-top:16px;margin-top:2px}
.opt ul li{padding-left:19px;position:relative;line-height:1.45}
.opt ul li::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;
  border-left:1.5px solid var(--signal-text);border-bottom:1.5px solid var(--signal-text);
  transform:rotate(-45deg) translateY(-1px)}
.opt .act{margin-top:auto;padding-top:20px}
.opt .act .btn{width:100%;justify-content:center}
.opt.pick{border-color:var(--signal-fill);border-width:2px;padding:25px 23px 23px;
  box-shadow:0 16px 44px rgba(184,62,34,.16)}
.opt.pick .flag{position:absolute;top:-13px;left:23px;background:var(--signal-fill);color:var(--paper);
  font-family:var(--f-data);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  padding:6px 12px;border-radius:100px}
.opt.pick .pr{color:var(--signal-text)}
.picker-note{margin-top:18px;font-size:14px;color:var(--ink-60)}
@media (max-width:980px){.picker{grid-template-columns:1fr;gap:26px}
  .opt.pick{order:-1}.opt .who{min-height:0}}

/* ---------------------------------------------------------- kompakter Seitenkopf */
.phead.tight{padding-block:clamp(34px,4vw,58px)}
.phead.tight .d1{font-size:clamp(30px,3.4vw,46px);max-width:20ch}
.phead.tight .lead{font-size:clamp(16px,1.05vw,17.5px);max-width:56ch;margin-top:14px}
.sec-first{padding-top:clamp(34px,3.6vw,52px)}

/* v3.1 — Kopf staucht sich, damit die Auswahl ohne Scrollen sichtbar ist */
.phead.tight{padding-block:clamp(26px,2.6vw,38px)}
.phead.tight .crumb{margin-bottom:14px}
.phead.tight .d1{font-size:clamp(27px,2.7vw,37px);line-height:1.08;max-width:36ch}
.phead.tight .lead{font-size:16px;line-height:1.5;max-width:74ch;margin-top:12px}
.phead.tight .hero-actions{margin-top:22px}
.phead.tight .cta-note{margin-top:10px}
.sec-first{padding-top:clamp(26px,2.8vw,40px)}
.opt{padding:22px 22px 20px;gap:11px}
.opt.pick{padding:27px 21px 19px}
.opt .who{min-height:40px;font-size:13.5px}
.opt ul{padding-top:13px;gap:7px;font-size:13.5px}
.opt .act{padding-top:16px}
.opt .pr{font-size:25px}
.opt ul li::before{width:9px;height:5px;border-width:0 0 1.6px 1.6px;top:6px;
  transform:rotate(-45deg)}
.opt.pick .flag{top:-12px;left:auto;right:18px}
.opt .rank{display:block}
.phead.tight .phead-in{padding-block:38px 34px}
.phead.tight h1{margin-bottom:12px}

/* v3.2 — gemessene Nacharbeit: alle Textrollen erreichen AA */
:root{--signal-fill:#AF3A1E}
.card .idx,.steps .k,.ph-note,.chip.on{color:var(--signal-text)}
.dark .card .idx,.dark .steps .k,.dark .ph-note{color:var(--signal-dark)}
.chip.on{border-color:var(--signal-text)}
.ph-note{font-size:10.5px}
.btn-primary{background:#A63417;border-color:#A63417}
.btn-primary:hover{background:#8E2B12;border-color:#8E2B12}
.idx{color:var(--signal-text)}
.dark .idx{color:var(--signal-dark)}
.dark .btn-primary,.mobile-bar .btn.btn-primary{background:#A63417;border-color:#A63417;color:var(--paper)}
.dark .btn-primary:hover{background:#C24A28;border-color:#C24A28}
.dark .tiny,.dark .idx{color:var(--on-dark-60)}
:root{--go:#2A6146;--iterate:#8C5A0E;--stop:#5C6064}
.dark{--go:#5FBF8F;--iterate:#D9A445;--stop:#A7ACB1}
.dark{--signal-text:var(--signal-dark)}

/* v3.3 — mobile Feinarbeit */
@media (max-width:620px){
  .phead.tight .d1{font-size:26px;line-height:1.12}
  .phead.tight .lead{font-size:15px;line-height:1.48}
  .phead.tight .phead-in{padding-block:30px 26px}
  .opt .who{font-size:14px}
  .opt ul{font-size:14px}
}

/* ============================================================ v4
   Portraits — der Kreis bleibt Menschen vorbehalten.
   Ruhezustand warmes Schwarzweiß, beim Hover läuft die Farbe auf. */
.pf{position:relative;flex:none;border-radius:50%;overflow:hidden;isolation:isolate;
  width:var(--pf,168px);height:var(--pf,168px);
  box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--signal-fill);
  transition:box-shadow .4s cubic-bezier(.2,.7,.3,1),transform .4s cubic-bezier(.2,.7,.3,1)}
.dark .pf{box-shadow:0 0 0 2px var(--ink),0 0 0 3.5px var(--signal-dark)}
.pf img{width:100%;height:100%;object-fit:cover;display:block;
  filter:grayscale(1) sepia(.22) saturate(.85) contrast(1.04) brightness(1.02);
  transition:filter .55s cubic-bezier(.2,.7,.3,1),transform .55s cubic-bezier(.2,.7,.3,1)}
.pf:hover img,.pf:focus-visible img{filter:none;transform:scale(1.035)}
.pf:hover{box-shadow:0 0 0 2px var(--paper),0 0 0 5px var(--signal-fill);transform:translateY(-2px)}
.dark .pf:hover{box-shadow:0 0 0 2px var(--ink),0 0 0 5px var(--signal-dark)}
@media (prefers-reduced-motion:reduce){.pf,.pf img{transition:none}.pf:hover{transform:none}}

/* Personenblock */
.people{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,3.4vw,56px)}
.person{display:flex;gap:clamp(20px,2.2vw,32px);align-items:flex-start}
.person .body{min-width:0}
.person .role{font-family:var(--f-data);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--signal-text)}
.person h3{font-family:var(--f-text);font-weight:560;font-size:23px;letter-spacing:-.022em;
  margin:9px 0 10px;line-height:1.15}
.person p{font-size:14.5px;line-height:1.58;color:var(--ink-60)}
.dark .person p{color:var(--on-dark-60)}
.person .lnk{margin-top:14px;display:inline-flex}
@media (max-width:900px){.people{grid-template-columns:1fr;gap:34px}}
@media (max-width:520px){.person{flex-direction:column}.pf{--pf:132px}}

/* Artefakte als Abbildung */
.artgrid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,34px)}
.art{margin:0}
.art img{width:100%;height:auto;border-radius:3px;display:block}
.art figcaption{margin-top:14px;font-size:14px;line-height:1.55;color:var(--ink-60);max-width:52ch}
.art figcaption b{color:var(--ink);font-weight:560}
.art .ph-note{margin-right:6px}
.art.wide{grid-column:1 / -1}
.art.wide img{max-width:820px}
@media (max-width:820px){.artgrid{grid-template-columns:1fr}}

/* Beitragsbilder */
.artcard{padding-top:0;overflow:hidden}
.artcard .thumb{width:calc(100% + 2px);height:118px;display:block;
  margin:0 -1px 18px;background:var(--paper-sunk);
  border-bottom:1px solid var(--ink-12)}
.dark .artcard .thumb{background:rgba(244,241,234,.05)}
.artcard>*:not(.thumb){padding-inline:0}
.card-hover .thumb{transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.card-hover:hover .thumb{transform:scale(1.03)}

/* ============================================================ v5
   Mobiles Menü — das Icon hatte bisher keine Funktion. */
.burger.mobile-only{display:none}
@media (max-width:860px){
  .burger.mobile-only{display:flex;background:transparent;cursor:pointer;
    padding:0;gap:4px;position:relative;z-index:70;-webkit-tap-highlight-color:transparent}
  .burger span{transition:transform .28s cubic-bezier(.2,.7,.3,1),opacity .18s}
  .burger.x{border-color:var(--ink)}
  .burger.x span:nth-child(1){transform:translateY(5.4px) rotate(45deg)}
  .burger.x span:nth-child(2){opacity:0}
  .burger.x span:nth-child(3){transform:translateY(-5.4px) rotate(-45deg)}
}
html.menu-open,html.menu-open body{overflow:hidden}

.mnav{position:fixed;inset:64px 0 0;z-index:65;background:var(--ink);color:var(--on-dark);
  display:flex;flex-direction:column;padding:clamp(20px,5vw,34px) var(--gutter)
  calc(28px + env(safe-area-inset-bottom));overflow-y:auto;
  opacity:0;transform:translateY(-10px);
  transition:opacity .26s ease,transform .3s cubic-bezier(.2,.7,.3,1)}
.mnav.on{opacity:1;transform:none}
.mnav[hidden]{display:none}
@media (min-width:861px){.mnav{display:none!important}}
.mnav-links{display:flex;flex-direction:column;border-top:1px solid var(--on-dark-12)}
.mnav-links a{font-family:var(--f-text);font-weight:520;font-size:23px;letter-spacing:-.022em;
  padding:17px 0;border-bottom:1px solid var(--on-dark-12);display:flex;
  align-items:center;justify-content:space-between;color:var(--on-dark)}
.mnav-links a::after{content:"";width:8px;height:8px;opacity:.45;
  border-right:1.4px solid currentColor;border-top:1.4px solid currentColor;transform:rotate(45deg)}
.mnav-links a.on{color:var(--signal-dark)}
.mnav-cta{display:flex;flex-direction:column;gap:11px;margin-top:26px}
.mnav-cta .btn{width:100%;justify-content:center}
.mnav-meta{display:flex;flex-wrap:wrap;gap:14px 22px;margin-top:auto;padding-top:30px;
  font-family:var(--f-data);font-size:11px;letter-spacing:.11em;text-transform:uppercase}
.mnav-meta a{color:var(--on-dark-60)}
@media (prefers-reduced-motion:reduce){.mnav,.burger span{transition:none}}

/* Tabellen auf schmalen Schirmen: Zeile wird Block, Spaltenkopf wandert an die Zelle */
@media (max-width:860px){
  table.tbl td,table.tbl th{overflow-wrap:anywhere}
  table.stackable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  table.stackable,table.stackable tbody,table.stackable tr,table.stackable td{display:block;width:100%}
  table.stackable tr{border-bottom:1px solid var(--ink-12);padding:16px 0 6px}
  table.stackable tr:last-child{border-bottom:0}
  table.stackable td{border:0;padding:0 0 9px}
  table.stackable td:first-child{font-family:var(--f-data);font-size:10.5px;letter-spacing:.13em;
    text-transform:uppercase;color:var(--ink-40);padding-bottom:11px}
  .dark table.stackable td:first-child{color:var(--on-dark-40)}
  table.stackable td[data-l]{display:flex;justify-content:space-between;gap:18px;
    align-items:baseline;padding:6px 0;border-bottom:1px solid var(--ink-06)}
  .dark table.stackable td[data-l]{border-color:var(--on-dark-12)}
  table.stackable td[data-l]::before{content:attr(data-l);flex:none;
    font-family:var(--f-data);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
    color:var(--ink-40)}
  .dark table.stackable td[data-l]::before{color:var(--on-dark-40)}
  table.stackable td[data-l]{text-align:right}
}

/* ============================================================ v6
   Die Marke im Kopf: Wortmarke mit dem Intervall zwischen den Wörtern. */
.logo{display:flex;align-items:center;gap:0}
.logo .lock{height:30px;width:auto;display:block}
.logo .sign{display:none}
.nav-in{height:92px}
header.nav .logo .lock{height:36px}
footer.ft .logo .lock{height:34px}
.mnav .logo .lock{height:28px}
@media (max-width:860px){
  .nav-in{height:70px}
  header.nav .logo .lock{display:none}
  header.nav .logo .sign{display:block;height:26px;width:auto}
  .mnav{top:70px}
}
@media (max-width:400px){header.nav .logo .sign{height:24px}}
/* Auf schmalen Schirmen bleibt der Name lesbar: die Marke ist neu,
   das Zeichen allein trägt sie noch nicht. */
@media (max-width:860px){
  header.nav .logo .lock{display:block;height:23px}
  header.nav .logo .sign{display:none}
}
@media (max-width:400px){header.nav .logo .lock{height:21px}}

/* ============================================================ v7
   Kopfgrafiken: nur dort, wo sie etwas erklären. */
.phead-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,64px);
  align-items:center}
.ph-vis{min-width:0}
.phead.has-visual .phead-in{padding-block:clamp(34px,3.6vw,52px)}
.phead.has-visual .d1{max-width:16ch}
.phead.has-visual .lead{max-width:44ch}
@media (max-width:900px){
  .phead-grid{grid-template-columns:1fr;gap:30px}
  .phead.has-visual .lead{max-width:62ch}
}

/* Artefaktstapel */
.stack{position:relative;padding:14px 0 30px}
.stack img{position:absolute;border-radius:3px;box-shadow:0 20px 48px rgba(0,0,0,.42);
  border:1px solid rgba(244,241,234,.10)}
.stack .s1{position:relative;width:78%;z-index:3}
.stack .s2{width:64%;right:0;top:34px;z-index:2;opacity:.92}
.stack .s3{width:52%;right:6%;bottom:0;z-index:1;opacity:.82}
.stack-note{position:absolute;left:0;bottom:4px;z-index:4;font-family:var(--f-data);
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-60)}
@media (max-width:900px){.stack .s1{width:70%}.stack .s2{width:56%;top:24px}
  .stack .s3{width:46%}}

/* Portraitpaar im Kopf */
.pair{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.pair .pf{--pf:126px}
.pair .pf:nth-child(2){margin-left:-38px}
.pair-note{flex:1 1 190px;font-size:14px;line-height:1.55;color:var(--on-dark-60);
  min-width:180px}
@media (max-width:520px){.pair .pf{--pf:104px}.pair .pf:nth-child(2){margin-left:-28px}}

/* Köpfe ohne Grafik: flacher, damit die schwarze Fläche nicht leer wirkt */
.phead.tight:not(.has-visual) .phead-in{padding-block:30px 26px}
.phead.tight:not(.has-visual) .d1{font-size:clamp(26px,2.5vw,34px)}
.phead.tight:not(.has-visual) .lead{font-size:15.5px;max-width:70ch}
/* Der Personenblock trägt unten die Vitas, die Gesichter stehen im Kopf */
.person{display:block}
@media (max-width:860px){header.nav .logo .lock{height:25px}}
@media (max-width:400px){header.nav .logo .lock{height:22px}}
.phead.tight:not(.has-visual) .hero-actions{margin-top:18px}

/* ============================================================ v8
   Award-Bild. Im Ruhezustand entsättigt, aber leichter als die Portraits,
   weil das Bühnenlicht sonst matschig wird. Farbe läuft beim Hover auf. */
.aw{position:relative;isolation:isolate}
.aw picture,.aw img{display:block;width:100%;height:auto}
.aw img{filter:grayscale(.94) sepia(.13) contrast(1.05) brightness(1.02);
  transition:filter .6s cubic-bezier(.2,.7,.3,1)}
.aw:hover img,.aw:focus-within img{filter:none}
@media (prefers-reduced-motion:reduce){.aw img{transition:none}}

/* A · auslaufend mit Datenschicht */
.aw-data .aw-img{position:relative}
.aw-data picture{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 24%),
    linear-gradient(to top,transparent 0,#000 16%);
  mask-image:linear-gradient(to right,transparent 0,#000 24%),
    linear-gradient(to top,transparent 0,#000 16%);
  -webkit-mask-composite:source-in;mask-composite:intersect;display:block}
.aw-brace{position:absolute;left:2%;top:28%;display:flex;align-items:center;gap:10px;
  font-family:var(--f-data);font-size:10px;letter-spacing:.15em;color:var(--signal-dark);
  white-space:nowrap}
.aw-brace i{position:relative;display:block;width:74px;height:1.5px;background:var(--signal-dark)}
.aw-brace i::after{content:"";position:absolute;right:0;top:-5px;width:1.5px;height:12px;
  background:var(--signal-dark)}
.aw-meta{display:flex;align-items:flex-start;gap:26px;margin-top:6px;padding-left:2%}
.aw-num{display:flex;align-items:baseline;gap:10px;flex:none}
.aw-num em{font-style:normal;font-family:var(--f-data);font-size:34px;letter-spacing:-.02em;
  color:var(--on-dark);line-height:1}
.aw-num>span{font-family:var(--f-data);font-size:10px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--on-dark-60);line-height:1.5}
.aw-src{font-size:13px;line-height:1.5;color:var(--on-dark-60);max-width:34ch}
.aw-src i{font-style:normal;font-family:var(--f-data);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--on-dark-40)}

/* B · Belegstück in Haarlinie */
.aw-plate{margin:0;padding:12px;border:1px solid var(--on-dark-12);border-radius:2px;
  transition:border-color .4s}
.aw-plate:hover{border-color:var(--signal-dark)}
.aw-plate figcaption{display:flex;align-items:center;gap:10px;margin-top:12px;
  font-family:var(--f-data);font-size:10px;letter-spacing:.14em;color:var(--on-dark-60)}
.aw-plate .mk{width:8px;height:8px;background:var(--signal-dark);flex:none}

/* C · randlose Bühne */
.phead.aw-full{overflow:hidden}
.phead.aw-full .phead-grid{grid-template-columns:1fr}
.phead.aw-full .ph-vis{position:absolute;right:0;top:0;bottom:0;width:46vw;max-width:820px}
.aw-stage{height:100%}
.aw-stage picture,.aw-stage img{height:100%;object-fit:cover}
.aw-stage::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--signal-dark);z-index:2}
.aw-stage::after{content:"";position:absolute;left:0;top:0;bottom:0;width:180px;
  background:linear-gradient(to right,var(--ink),transparent);z-index:1}
.aw-cap{position:absolute;left:26px;bottom:22px;z-index:2;font-family:var(--f-data);
  font-size:10px;letter-spacing:.14em;color:var(--on-dark)}
.aw-cap b{display:block;font-size:13px;letter-spacing:.06em;margin-bottom:5px}
.aw-cap span{color:var(--on-dark-60)}
@media (max-width:900px){
  .phead.aw-full .ph-vis{position:relative;width:auto;max-width:none;height:230px;
    margin-top:26px}
  .aw-brace{left:24%;top:20%}
  .aw-num em{font-size:24px}
}
/* Die Gesichter stehen im Kopf, unten begleiten sie die Vitas */
.person{display:flex;gap:clamp(18px,2vw,28px);align-items:flex-start}
.person .pf{--pf:96px}
@media (max-width:520px){.person{flex-direction:column}.person .pf{--pf:104px}}

/* ============================================================ v9
   Programme und Insights: Kopf flacher, damit die Handlung früher steht. */
.phead.tight.lean .phead-in{padding-block:24px 22px}
.phead.tight.lean .crumb{margin-bottom:10px}
.phead.tight.lean .d1{font-size:clamp(25px,2.3vw,31px);max-width:34ch}
.phead.tight.lean h1{margin-bottom:9px}
.phead.tight.lean .lead{font-size:15px;line-height:1.45;max-width:76ch;margin-top:0}
.sec-first{padding-top:clamp(22px,2.2vw,30px)}

/* Kurze Bildschirme: die Auswahl staucht sich, damit die Buttons oben bleiben */
@media (min-width:900px) and (max-height:780px){
  .opt{padding:16px 18px 15px;gap:8px}
  .opt.pick{padding:21px 17px 14px}
  .opt h3{font-size:20px}
  .opt .who{min-height:0;font-size:13px;line-height:1.45}
  .opt .pr{font-size:22px;padding-top:2px}
  .opt ul{padding-top:10px;gap:5px;font-size:13px}
  .opt ul li{line-height:1.35}
  .opt .act{padding-top:12px}
  .opt .act .btn{padding:13px 20px}
  .picker-note{margin-top:12px;font-size:13px}
}

/* Kopf noch einmal gestrafft: Überschrift einzeilig, Lead einzeilig */
.phead.tight.lean .phead-in{padding-block:22px 20px}
.phead.tight.lean .d1{font-size:clamp(24px,2.05vw,28px);max-width:52ch}
.phead.tight.lean h1{margin-bottom:8px}
.phead.tight.lean .lead{font-size:14.5px;max-width:96ch}
/* Schwerpunktbeitrag als kompakte Zeile statt als halbe Seite */
.card .thumb{width:100%;height:150px;background:var(--paper-sunk);
  border:1px solid var(--ink-12);border-radius:2px}
@media (min-width:900px) and (max-height:780px){
  .card .thumb{height:120px}
  .sec-first{padding-top:18px}
  .sec-tight{padding-block:calc(var(--sec)*.42)}
  .phead.tight.lean .phead-in{padding-block:18px 16px}
}

/* ============================================================ v10
   Gemeinsames Raster für die Programmauswahl.
   Rang, Name, Beschreibung, Preis, Button und Trennstrich liegen in allen
   drei Karten auf derselben Linie, unabhängig von der Textlänge.
   Feste Zeilenhöhen statt Zufall: nur so bleibt es auch nach einer
   Textänderung ausgerichtet. */
:root{--opt-rank:17px;--opt-name:27px;--opt-who:40px;--opt-price:29px;--opt-btn:50px}
.opt{display:flex;flex-direction:column;gap:0;
  padding:22px 22px 20px;border:1px solid var(--ink-12);background:var(--paper-raised)}
.opt .rank{height:var(--opt-rank);line-height:var(--opt-rank);margin:0}
.opt h3{height:var(--opt-name);line-height:var(--opt-name);margin:11px 0 0;
  display:flex;align-items:center}
.opt .who{height:var(--opt-who);min-height:0;margin:9px 0 0;overflow:hidden}
.opt .pr{height:var(--opt-price);line-height:var(--opt-price);margin:13px 0 0;
  display:flex;align-items:baseline;padding-top:0}
.opt .act{margin:16px 0 0;padding:0}
.opt .act .btn{width:100%;justify-content:center;height:var(--opt-btn);padding:0 20px;
  font-size:15px;font-weight:520}
.opt ul{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--ink-12)}

/* Die Empfehlungskarte hat dieselbe Geometrie. Die stärkere Kontur kommt
   aus einem innenliegenden Schatten, nicht aus einem dickeren Rahmen,
   sonst sitzt ihr gesamter Inhalt einen Pixel tiefer als in den Nachbarn. */
.opt.pick{border:1px solid var(--signal-fill);border-width:1px;
  padding:22px 22px 20px;
  box-shadow:inset 0 0 0 1px var(--signal-fill),0 16px 44px rgba(184,62,34,.16)}
.opt.pick .flag{top:-13px;right:18px;left:auto}

@media (min-width:900px) and (max-height:780px){
  :root{--opt-who:36px;--opt-price:26px;--opt-btn:46px}
  .opt,.opt.pick{padding:17px 18px 15px}
  .opt h3{font-size:20px}
  .opt .who{font-size:13px;line-height:1.42}
  .opt .pr{font-size:22px;margin-top:10px}
  .opt .act{margin-top:13px}
  .opt ul{margin-top:14px;padding-top:12px}
}
@media (max-width:980px){
  :root{--opt-who:auto}
  .opt .who{height:auto;overflow:visible}
}

/* (Die frühere Teilregel ist entfallen, sie ist im Rhythmus von v17
   vollständig aufgegangen.) */

/* ============================================================ v11
   Buttons springen nicht mehr. Rückmeldung über Farbe und Pfeil. */
.btn:hover,.btn-primary:hover{transform:none}
.dark .btn:hover{background:var(--paper);color:var(--ink)}
.dark .btn-primary:hover,.btn-primary:hover{background:#8E2B12;border-color:#8E2B12;color:var(--paper)}
.btn-ghost:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.dark .btn-ghost:hover{background:var(--paper);color:var(--ink);border-color:var(--paper)}

/* Menüpunkte: Unterstreichung wächst von links ein */
.navlinks a{position:relative;border-bottom:0;transition:color .2s}
.navlinks a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:var(--signal-text);transform:scaleX(0);transform-origin:left;
  transition:transform .22s cubic-bezier(.2,.7,.3,1)}
.navlinks a:hover{color:var(--ink)}
.navlinks a:hover::after,.navlinks a.on::after{transform:scaleX(1)}
.navlinks a.on{color:var(--ink)}
.mnav-links a{transition:color .2s,padding-left .22s cubic-bezier(.2,.7,.3,1)}
.mnav-links a:hover{color:var(--signal-dark);padding-left:8px}

/* Telefonnummer */
.tel{display:inline-flex;align-items:center;gap:10px;margin-top:16px;
  font-family:var(--f-data);font-size:13px;letter-spacing:.06em;color:var(--on-dark);
  border-bottom:1px solid var(--on-dark-12);padding-bottom:4px;transition:border-color .2s}
.tel:hover{border-color:var(--signal-dark)}
.tel .ic{width:13px;height:13px;flex:none;border:1.5px solid var(--signal-dark);
  border-radius:2px 6px 2px 2px}
.ft .tel{margin-top:18px}
@media (prefers-reduced-motion:reduce){.navlinks a::after,.mnav-links a{transition:none}}

/* Kreislauf */
.zyk{max-width:430px;margin-inline:auto;display:block}
@media (max-width:1100px){.zyk{max-width:370px}}
@media (max-width:520px){
  /* Auf dem Telefon nur Skala und Nummern, die Namen stehen in der Liste darunter */
  .zyk{max-width:290px}
  .zyk text[font-family^="Grotesk"]{display:none}
}

/* ============================================================ v12
   Das Angebot als Weg. Drei Stufen mit sichtbar unterschiedlichem Gewicht,
   damit Vorstufe, Einstieg und laufendes Programm nicht gleichrangig wirken. */
.st-n{font-family:var(--f-data);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink-40);display:block}
.stufe{display:grid;grid-template-columns:104px 1fr 200px 110px;gap:24px;align-items:center;
  padding:18px 22px;border:1px solid var(--ink-12);border-radius:var(--r);
  background:var(--paper-raised);transition:border-color .2s,background .2s}
.stufe:hover{border-color:rgba(18,17,16,.34)}
.stufe .st-b b{display:block;font-weight:560;font-size:17px;letter-spacing:-.02em}
.stufe .st-b span{display:block;font-size:13.5px;line-height:1.5;color:var(--ink-60);margin-top:3px}
.stufe .st-p{font-family:var(--f-data);font-size:17px;color:var(--ink)}
.stufe .st-p i{display:block;font-style:normal;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-40);margin-top:5px}
.stufe .st-a{display:inline-flex;align-items:center;gap:9px;justify-self:end;font-weight:520;
  font-size:14.5px}

.stufe-haupt{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(24px,3vw,48px);
  margin-top:14px;padding:clamp(26px,3vw,38px);border:1px solid var(--signal-fill);
  border-radius:var(--r);background:var(--paper-raised);
  box-shadow:inset 0 0 0 1px var(--signal-fill),0 18px 48px rgba(184,62,34,.13)}
.stufe-haupt h3{font-family:var(--f-text);font-weight:560;font-size:clamp(24px,2.4vw,31px);
  letter-spacing:-.025em;margin:10px 0 12px}
.stufe-haupt p{font-size:15px;line-height:1.58;color:var(--ink-60);max-width:46ch}
.sh-cta{display:flex;align-items:center;gap:20px;margin-top:22px;flex-wrap:wrap}
.sh-r{display:flex;flex-direction:column;justify-content:center;
  border-left:1px solid var(--ink-12);padding-left:clamp(20px,2.4vw,34px)}
.sh-r .pr{font-family:var(--f-data);font-size:clamp(30px,3.2vw,40px);letter-spacing:-.025em;
  color:var(--signal-text);line-height:1}
.sh-r .pr small{display:block;font-family:var(--f-text);font-size:13px;letter-spacing:0;
  color:var(--ink-60);margin-top:8px}
.sh-r ul{list-style:none;margin-top:20px;padding-top:16px;border-top:1px solid var(--ink-12);
  display:flex;flex-direction:column;gap:8px;font-size:13.5px;color:var(--ink-80)}
.sh-r li{padding-left:18px;position:relative;line-height:1.45}
.sh-r li::before{content:"";position:absolute;left:0;top:6px;width:9px;height:5px;
  border-left:1.6px solid var(--signal-text);border-bottom:1.6px solid var(--signal-text);
  transform:rotate(-45deg)}

.stufe-drei{margin-top:26px}
.drei{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:12px}
.drei a{display:flex;flex-direction:column;gap:5px;padding:16px 18px;
  border:1px solid var(--ink-12);border-radius:var(--r);background:var(--paper-raised);
  transition:border-color .2s}
.drei a:hover{border-color:rgba(18,17,16,.34)}
.drei b{font-weight:560;font-size:16px;letter-spacing:-.02em}
.drei span{font-size:13px;line-height:1.45;color:var(--ink-60)}
.drei i{font-style:normal;font-family:var(--f-data);font-size:12.5px;color:var(--ink-80);
  margin-top:4px}
@media (max-width:900px){
  .stufe{grid-template-columns:1fr;gap:12px}
  .stufe .st-a{justify-self:start}
  .stufe-haupt{grid-template-columns:1fr}
  .sh-r{border-left:0;border-top:1px solid var(--ink-12);padding-left:0;padding-top:22px}
  .drei{grid-template-columns:1fr}
}

/* ============================================================ v13
   Microanimations. Einmalig, kurz, ohne Wiederholung. */
.kommt{opacity:0;transform:translateY(8px);
  transition:opacity .5s ease,transform .55s cubic-bezier(.2,.7,.3,1)}
.kommt.da{opacity:1;transform:none}
.no-motion .kommt{opacity:1;transform:none;transition:none}

/* Startseite, erster Besuch der Sitzung: der Hero läuft gestaffelt ein */
@keyframes auf{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.intro .hero .eyebrow,.intro .hero h1,.intro .hero .lead,
.intro .hero .hero-actions,.intro .hero .cta-note,.intro .hero .hero-metrics,
.intro .hero .hero-panel{animation:auf .58s cubic-bezier(.2,.7,.3,1) both}
.intro .hero h1{animation-delay:.06s}
.intro .hero .lead{animation-delay:.12s}
.intro .hero .hero-actions{animation-delay:.18s}
.intro .hero .cta-note{animation-delay:.24s}
.intro .hero .hero-metrics{animation-delay:.3s}
.intro .hero .hero-panel{animation-delay:.14s}
.no-motion .intro .hero *{animation:none}

/* Das Hero-Diagramm zeichnet sich einmal auf. Danach zieht sich das
   Konfidenzintervall zusammen: erst weit und über die Null hinweg, also
   der Zustand, in dem nichts entschieden werden kann, dann enger, bis die
   untere Grenze die Null überschreitet. In dem Moment erscheint das
   Verdikt. Der Punkt bewegt sich dabei, weil sich der Schätzwert
   einpendelt, nicht weil er von links nach rechts fährt. */
@keyframes zeichnen{from{stroke-dashoffset:var(--len)}to{stroke-dashoffset:0}}
@keyframes ci-eng{from{transform:scaleX(1.72)}to{transform:scaleX(1)}}
@keyframes ci-lo{from{transform:translateX(-136px)}to{transform:none}}
@keyframes ci-hi{from{transform:translateX(134px)}to{transform:none}}
@keyframes ci-pt{from{transform:translateX(-58px);opacity:.35}
  to{transform:none;opacity:1}}
.intro .hero-panel svg path[stroke]{stroke-dasharray:var(--len,1400);
  stroke-dashoffset:var(--len,1400);
  animation:zeichnen .95s cubic-bezier(.35,.6,.25,1) .3s forwards}
.intro .hero-panel svg text,.intro .hero-panel svg rect,
.intro .hero-panel svg circle,.intro .hero-panel svg line{
  animation:auf .45s ease .85s both}
.intro .hero-panel svg .ci-bar,.intro .hero-panel svg .ci-lo,
.intro .hero-panel svg .ci-hi,.intro .hero-panel svg .ci-pt{
  transform-box:view-box;transform-origin:399px 0;
  animation-duration:1.05s;animation-delay:1.05s;
  animation-timing-function:cubic-bezier(.25,.85,.3,1);animation-fill-mode:both}
.intro .hero-panel svg .ci-bar{animation-name:ci-eng}
.intro .hero-panel svg .ci-lo{animation-name:ci-lo}
.intro .hero-panel svg .ci-hi{animation-name:ci-hi}
.intro .hero-panel svg .ci-pt{animation-name:ci-pt}
.intro .hero-panel svg .ci-bar *,.intro .hero-panel svg .ci-lo *,
.intro .hero-panel svg .ci-hi *,.intro .hero-panel svg .ci-pt *{animation:none}
/* Zahl, Grenzen und Verdikt erscheinen erst, wenn das Intervall steht */
.intro .hero-panel svg .ci-num,.intro .hero-panel svg .ci-ends,
.intro .hero-panel svg .ci-verdikt{animation:auf .5s ease 2.0s both}
.intro .hero-panel svg .ci-num *,.intro .hero-panel svg .ci-ends *,
.intro .hero-panel svg .ci-verdikt *{animation:none}
.no-motion .hero-panel svg path[stroke]{stroke-dasharray:none;stroke-dashoffset:0;animation:none}

/* Die alte Einblendung der Buttons entfällt, das übernimmt jetzt der Intro-Lauf */
.hero-actions .btn,.cta-group .btn,.ctaband .btn{animation:none}
.intro .hero-actions .btn{animation:auf .58s cubic-bezier(.2,.7,.3,1) both;animation-delay:.18s}

/* Sprachumschalter */
.lang{display:inline-flex;align-items:center;gap:2px;font-family:var(--f-data);font-size:11px;
  letter-spacing:.1em;border:1px solid var(--ink-12);border-radius:var(--r);overflow:hidden}
.lang a,.lang b{padding:8px 10px;font-weight:400;line-height:1;transition:background .2s,color .2s}
.lang b{background:var(--ink);color:var(--paper)}
.lang a{color:var(--ink-60)}
.lang a:hover{background:var(--ink-06);color:var(--ink)}
.dark .lang{border-color:var(--on-dark-12)}
@media (max-width:860px){.nav-cta .lang{display:none}
  .mnav .lang{display:inline-flex;margin-top:22px;border-color:var(--on-dark-12)}
  .mnav .lang b{background:var(--paper);color:var(--ink)}
  .mnav .lang a{color:var(--on-dark-60)}}
/* Der Umschalter im mobilen Menü steht immer auf dunklem Grund */
.mnav .lang{border-color:var(--on-dark-12);margin-top:22px}
.mnav .lang b{background:var(--paper);color:var(--ink)}
.mnav .lang a{color:var(--on-dark-60)}
.mnav .lang a:hover{background:rgba(244,241,234,.10);color:var(--on-dark)}

/* ============================================================ v14
   Eine Größe für alle Seitentitel. Die frühere Sonderregel für Köpfe
   ohne Grafik hatte sie auf 34 px gedrückt, während Seiten mit Grafik
   bei 37 px standen. Das war der sichtbare Unterschied. */
.phead.tight .d1,.phead.tight:not(.has-visual) .d1{font-size:clamp(27px,2.7vw,37px)}
.phead.tight:not(.has-visual) .lead{font-size:clamp(16px,1.05vw,17.5px)}

/* ============================================================ v15
   Typografische Leiter. Vorher sind beim Bauen einzelner Bauteile drei
   verschiedene H3-Größen entstanden, 22, 23 und 31 px, ohne gemeinsame
   Grundlage. Jetzt hat jede Rolle eine Stufe, und jede Stufe einen Namen. */
:root{
  --t-hero:clamp(34px,4.4vw,62px);   /* nur der Hero der Startseite */
  --t-seite:clamp(27px,2.7vw,38px);  /* Seitentitel im dunklen Kopf     */
  --t-sektion:clamp(26px,2.9vw,38px);/* Abschnittsüberschrift           */
  --t-haupt:clamp(24px,2.4vw,31px);  /* hervorgehobenes Bauteil         */
  --t-unter:clamp(21px,1.9vw,25px);  /* Bauteil-Überschrift             */
  --t-karte:20px;                    /* Karte                           */
  --t-schritt:17px;                  /* Schritt, Tabellenkopf einer Zeile */
}
.hero .d1{font-size:var(--t-hero)}
.phead .d1,.phead.tight .d1,.phead.tight:not(.has-visual) .d1{font-size:var(--t-seite)}
.d2{font-size:var(--t-sektion)}
.d3{font-size:var(--t-unter)}
.h4{font-size:var(--t-karte)}
.steps h4{font-size:var(--t-schritt)}
.stufe-haupt h3{font-size:var(--t-haupt)}
.opt h3,.person h3{font-size:var(--t-unter)}
.stufe-haupt h3{font-size:var(--t-haupt)}
.opt .who{height:auto;min-height:var(--opt-who)}
:root{--opt-name:31px}
@media (min-width:900px) and (max-height:780px){
  .opt h3{font-size:22px}
  :root{--opt-name:27px}
}
/* Der Hero bekommt eine eigene Stufe statt einer Ausnahme in derselben Klasse */
.d0{font-family:var(--f-display);font-weight:400;font-size:var(--t-hero);
  line-height:1.02;letter-spacing:-.025em}
.d0 em.hi{font-family:var(--f-display);font-style:italic}
/* Eine Zeilenführung für die Bauteil-Überschrift, unabhängig vom Bauteil */
.t-unter,.t-haupt{font-family:var(--f-text);font-weight:560;line-height:1.15;letter-spacing:-.022em}
.t-unter{font-size:var(--t-unter)}
.t-haupt{font-size:var(--t-haupt)}
.opt h3{height:var(--opt-name);display:flex;align-items:center}
/* Die Stufe gilt auch dort, wo das Bauteil eine feste Zeilenhöhe braucht */
.opt h3.t-unter{line-height:1.15;letter-spacing:-.022em;height:var(--opt-name);
  display:flex;align-items:center}

/* ============================================================ v16
   Was direkt auf den dunklen Kopf folgt, bekommt überall denselben
   Abstand. Vorher hing er davon ab, welche Klasse die erste Sektion
   zufällig trug: 86 px auf Ansatz, 52 auf Impact Pilot, 30 auf
   Evidenz und Über uns. Als Regel statt als Klasse, damit es beim
   Anlegen einer neuen Seite nicht wieder auseinanderläuft. */
.phead + section,
.phead + section.sec,
.phead + section.sec-tight,
.phead + section.sec-first{padding-top:var(--nach-kopf,30px)}
/* Kurze Bildschirme: der Abstand nach dem Kopf gibt etwas nach,
   damit die Handlung sicher über der Falz bleibt */
@media (min-width:900px) and (max-height:780px){:root{--nach-kopf:20px}}

/* ============================================================ v17
   Ein Rhythmus für die ganze Seite.
   Gemessen gab es vorher acht verschiedene Abstände zwischen Abschnitten:
   52, 67, 86, 87, 121, 138 und zweimal 173 px. Sie entstanden, weil sich
   der Innenabstand des einen Abschnitts und der des nächsten addiert haben.

   Das Prinzip jetzt: Ein Abschnitt trägt seinen Abstand oben, der vorige
   trägt unten keinen. Zwischen zwei Abschnitten steht damit genau ein
   Abstand statt zweier. Wo eine sichtbare Kante dazwischen liegt, also ein
   Farbwechsel oder ein umrandeter Block, reicht der kleinere Wert, weil
   die Kante die Trennung bereits leistet. Farbblöcke behalten ihren
   eigenen Innenabstand, der gehört zum Block und nicht zur Lücke. */
:root{
  --raum:clamp(56px,6vw,86px);    /* zwei Abschnitte ohne Kante dazwischen */
  --kante:clamp(30px,3.2vw,46px); /* Abstand zu einer sichtbaren Kante     */
  --inset:var(--kante);           /* Farbblöcke bekommen denselben Wert:  */
  /* Kante zu Inhalt ist derselbe optische Vorgang, ob die Kante nun die
     Oberkante eines schwarzen Blocks ist oder seine Unterkante.        */
}
/* Die Regeln stehen auf Klassenebene, sonst gewinnen die alten
   Abschnittsklassen mit ihren eigenen Innenabständen. */
main > section.sec,main > section.sec-tight,main > section.sec-first,
main > section.ctaband{padding-top:var(--raum);padding-bottom:0}
main > section.sec:last-child,main > section.sec-tight:last-child,
main > section.sec-first:last-child{padding-bottom:var(--raum)}
main > section.sec.dark,main > section.sec.sunk,
main > section.sec-tight.dark,main > section.sec-tight.sunk{padding-block:var(--inset)}
main > section.sec:has(+ .dark),main > section.sec:has(+ .sunk),
main > section.sec-tight:has(+ .dark),main > section.sec-tight:has(+ .sunk),
main > section.sec-first:has(+ .dark),main > section.sec-first:has(+ .sunk){
  padding-bottom:var(--kante)}
main > section.dark + section.sec,main > section.sunk + section.sec,
main > section.dark + section.sec-tight,main > section.sunk + section.sec-tight{
  padding-top:var(--kante)}
/* Ein Abschnitt, der mit einer Rahmenkante endet, trennt ebenfalls schon */
main > section:has(.kpi) + section.sec,
main > section:has(.artgrid) + section.sec,
main > section:has(.picker) + section.sec{padding-top:var(--kante)}
/* Ein Abschnitt mit eigener Abschlusslinie wirkt wie eine Farbkante */
main > section[style*="border-bottom"] + section.sec,
main > section[style*="border-bottom"] + section.sec-tight{padding-top:var(--kante)}
/* Der Abstand nach dem dunklen Kopf gilt weiter, er steht über dem
   allgemeinen Rhythmus und muss ihn deshalb überschreiben */
main > .phead + section.sec,main > .phead + section.sec-tight,
main > .phead + section.sec-first{padding-top:var(--nach-kopf,30px)}
main > .phead.dark + section.sec,main > .phead.dark + section.sec-tight,
main > .phead.dark + section.sec-first{padding-top:var(--nach-kopf,30px)}