/* ══════════════════════════════════════════════
   TOKENS
   ══════════════════════════════════════════════ */
:root{
  --paper:#ffffff;
  --paper-2:#f3f7f8;
  --paper-3:#e9f0f1;

  --deep:#0d3a40;
  --deep-2:#124b53;
  --deep-3:#0a2e33;
  --deep-grad:linear-gradient(135deg,#0a3036 0%,#14535b 52%,#0c3b42 100%);

  --teal:#17868f;
  --teal-d:#0f6b74;
  --teal-l:#5cbcc4;

  --ink:#15242b;
  --ink-2:#47585f;
  --muted:#7a8b92;
  --line:#e1e9eb;
  --line-d:rgba(255,255,255,.16);

  --font:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-display:"Literata",Georgia,"Times New Roman",serif;
  /* Linke Kante des Inhaltsrasters – für den geteilten Hero */
  --edge:max(var(--gut), calc((100vw - 1160px) / 2));

  --gut:clamp(20px,5vw,44px);
  --sec:clamp(64px,8.5vw,116px);
  --r:8px;
  --shadow:0 1px 2px rgba(13,58,64,.04),0 10px 30px -18px rgba(13,58,64,.22);
}

/* ══════════════════════════════════════════════
   BASE
   ══════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font);font-size:16.5px;font-weight:400;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:400;line-height:1.18;letter-spacing:-.015em}
/* Überschriften, Zahlen und Zitate in Literata – Fließtext bleibt Roboto */
.h1,.h2,.h3,.phero__t,.hero__h,.feature__h,.stance,.pull,.cover__t,
.stat b,.proof__n,.bookband__t,.sec2 h2{font-family:var(--font-display)}
p{margin:0}
::selection{background:var(--teal);color:#fff}
:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:3px}

.wrap{width:min(1160px,100% - var(--gut)*2);margin-inline:auto}
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--deep);color:#fff;padding:12px 18px}
.skip:focus{left:12px;top:12px}
/* Der Header bekommt beim "nach oben"-Klick programmatisch den Fokus.
   Er ist kein Bedienelement, deshalb hier kein sichtbarer Fokusring. */
.hdr:focus{outline:none}

/* ══════════════════════════════════════════════
   TYPO
   ══════════════════════════════════════════════ */
.h1{font-size:clamp(2rem,4.4vw,3.1rem);font-weight:400;line-height:1.14;letter-spacing:-.018em}
.h2{font-size:clamp(1.55rem,3.2vw,2.35rem);font-weight:400;line-height:1.24;letter-spacing:-.016em}
.h3{font-size:clamp(1.15rem,1.8vw,1.35rem);font-weight:500;line-height:1.32;letter-spacing:-.01em}
.accent{color:var(--teal)}
.on-dark .accent{color:var(--teal-l)}

.kicker{
  font-size:.73rem;font-weight:500;letter-spacing:.19em;text-transform:uppercase;
  color:var(--teal);margin-bottom:16px;display:block;
}
.on-dark .kicker{color:var(--teal-l)}

.lead{font-size:clamp(1rem,1.15vw,1.1rem);line-height:1.72;color:var(--ink-2);font-weight:300}
.on-dark .lead{color:rgba(255,255,255,.78)}
.body{color:var(--ink-2);font-weight:300}
.body strong{font-weight:500;color:var(--ink)}
.body > * + *{margin-top:1.05em}
.on-dark .body{color:rgba(255,255,255,.76)}
.on-dark .body strong{color:#fff}
.measure{max-width:60ch}
.center{text-align:center;margin-inline:auto}

/* ══════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:inherit;font-size:.92rem;font-weight:500;letter-spacing:.005em;
  text-decoration:none;cursor:pointer;border:1px solid transparent;
  padding:13px 26px;border-radius:5px;
  transition:background .22s ease,border-color .22s ease,color .22s ease,transform .16s ease;
}
.btn:active{transform:translateY(1px)}
.btn--teal{background:var(--teal);color:#fff}
.btn--teal:hover{background:var(--teal-d)}
.btn--line{border-color:rgba(255,255,255,.42);color:#fff}
.btn--line:hover{background:rgba(255,255,255,.13);border-color:#fff}
.btn--dark-line{border-color:var(--line);color:var(--ink);background:#fff}
.btn--dark-line:hover{border-color:var(--teal);color:var(--teal)}

/* ══════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════ */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:200;
  background:transparent;border-bottom:1px solid transparent;
  transition:background .32s ease,border-color .32s ease,backdrop-filter .32s ease;
}
.hdr.is-stuck{
  background:rgba(10,46,51,.94);border-bottom-color:rgba(255,255,255,.1);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.hdr__in{display:flex;align-items:center;justify-content:space-between;gap:22px;height:80px}
.logo{display:inline-flex;align-items:center;padding:6px 0}
.logo img{height:36px;width:auto}

.nav{display:flex;align-items:center;gap:clamp(12px,1.7vw,26px)}
.nav a{
  position:relative;text-decoration:none;font-size:.9rem;font-weight:400;
  color:rgba(255,255,255,.82);padding:8px 0;transition:color .2s ease;white-space:nowrap;
}
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--teal-l);
  transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.2,.7,.3,1);
}
.nav a:hover{color:#fff}
.nav a:hover::after,.nav a[aria-current="true"]::after{transform:scaleX(1)}
.nav a[aria-current="true"]{color:#fff}
.nav .cta{background:var(--teal);color:#fff;padding:11px 22px;border-radius:5px;font-weight:500}
.nav .cta::after{display:none}
.nav .cta:hover{background:var(--teal-d);color:#fff}

.burger{
  display:none;width:46px;height:46px;border:1px solid rgba(255,255,255,.3);background:none;
  border-radius:5px;cursor:pointer;padding:0;align-items:center;justify-content:center;
}
.burger span{display:block;width:18px;height:2px;background:#fff;position:relative;transition:background .2s}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:18px;height:2px;background:#fff;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),top .2s;
}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

@media (max-width:1000px){
  .burger{display:flex}
  .nav{
    position:fixed;inset:80px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--deep-3);padding:8px var(--gut) 26px;
    transform:translateY(-14px);opacity:0;pointer-events:none;
    transition:opacity .25s ease,transform .25s ease;
    max-height:calc(100dvh - 80px);overflow:auto;
  }
  .nav.is-open{transform:none;opacity:1;pointer-events:auto}
  .nav a{padding:16px 0;font-size:1.05rem;border-bottom:1px solid rgba(255,255,255,.1)}
  .nav a::after{display:none}
  .nav .cta{margin-top:20px;border-bottom:0;text-align:center}
}

/* ══════════════════════════════════════════════
   MEDIA-SLOTS (Fallback ohne Bilddatei)
   ══════════════════════════════════════════════ */
.media{position:relative;overflow:hidden;background:var(--deep-grad)}
.media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.media::after{
  content:attr(data-note);position:absolute;inset:0;display:none;
  align-items:center;justify-content:center;text-align:center;padding:20px;
  color:rgba(255,255,255,.45);font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
}
.media.is-empty::after{display:flex}
.media.is-empty img{display:none}

/* ══════════════════════════════════════════════
   HERO – geteilt: Textfläche links, Bild rechts
   ══════════════════════════════════════════════ */
.hero,.phero{background:var(--deep);color:#fff;overflow:hidden}
.phero__in{
  display:grid;grid-template-columns:1.06fr .94fr;
  min-height:600px;align-items:stretch;
}
.phero__txt{
  display:flex;flex-direction:column;justify-content:center;
  padding:clamp(96px,10vw,120px) clamp(28px,4vw,64px) clamp(44px,5vw,60px) var(--edge);
  background:var(--deep);
}
.phero__img{position:relative;background:var(--deep-grad)}
.phero__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 26%}
@media (max-width:900px){
  .phero__in{grid-template-columns:1fr;min-height:0}
  .phero__txt{padding:clamp(104px,16vw,128px) var(--gut) clamp(36px,6vw,48px);min-height:430px}
  .phero__img{aspect-ratio:16/9}
}

.hero .kicker,.phero .kicker{color:rgba(255,255,255,.62)}
.hero .h1{color:#fff;margin-bottom:20px}
.hero__lead,.phero__d{color:rgba(255,255,255,.78);font-weight:300;font-size:1.01rem;line-height:1.72;max-width:46ch}
.phero__d{margin-top:18px}
.hero__note{
  margin-top:18px;color:rgba(255,255,255,.6);font-size:.94rem;font-weight:300;
  padding-left:16px;border-left:2px solid var(--teal-l);max-width:44ch;
}
.hero__actions,.phero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* ══════════════════════════════════════════════
   SECTIONS
   ══════════════════════════════════════════════ */
.sec{padding:var(--sec) 0}
.sec--tint{background:var(--paper-2)}
.sec--dark{background:linear-gradient(160deg,#0b3339,#11464d 60%,#0c383f);color:#fff;position:relative;overflow:hidden}
.sec--dark::before{
  content:"";position:absolute;inset:0;opacity:.22;pointer-events:none;
  background:radial-gradient(65% 85% at 84% 6%,rgba(92,188,196,.24),transparent 60%);
}
.sec--dark .wrap{position:relative;z-index:1}

.split{display:grid;gap:clamp(30px,5vw,66px);grid-template-columns:1fr 1fr;align-items:center}
.split--wide-r{grid-template-columns:.9fr 1.1fr}
@media (max-width:900px){.split,.split--wide-r{grid-template-columns:1fr}}

.figure{aspect-ratio:4/3;border-radius:var(--r);box-shadow:var(--shadow)}
.figure--tall{aspect-ratio:4/5}

.head-c{text-align:center;max-width:52ch;margin:0 auto clamp(34px,4.4vw,54px)}
.head-c .kicker{margin-bottom:14px}

/* ══════════════════════════════════════════════
   ZAHLEN
   ══════════════════════════════════════════════ */
/* Zahlenleiste – volle Breite direkt unter dem Hero */
.statbar{background:var(--paper-2);border-bottom:1px solid var(--line)}
.stats{display:grid;grid-template-columns:repeat(3,1fr)}
.stat{
  display:flex;gap:18px;align-items:center;
  padding:clamp(24px,3vw,34px) clamp(14px,2vw,30px);border-left:1px solid var(--line);
}
.stat:first-child{border-left:0}
.stat svg{width:30px;height:30px;stroke:var(--teal);fill:none;stroke-width:1.3;flex:none}
.stat b{display:block;font-size:clamp(1.6rem,2.6vw,2.1rem);font-weight:400;line-height:1.05;letter-spacing:-.015em}
.stat span{display:block;font-size:.82rem;color:var(--muted);font-weight:300;line-height:1.45;margin-top:4px}
@media (max-width:760px){
  .stats{grid-template-columns:1fr}
  .stat{border-left:0;border-top:1px solid var(--line)}
  .stat:first-child{border-top:0}
}

/* ══════════════════════════════════════════════
   PRINZIPIEN (dunkel, 4 Spalten)
   ══════════════════════════════════════════════ */
.pill-row{
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line-d);margin-top:clamp(30px,4vw,48px);
}
.pill{padding:clamp(26px,3vw,36px) clamp(14px,2vw,26px);text-align:center;border-left:1px solid var(--line-d)}
.pill:first-child{border-left:0}
.pill svg{width:30px;height:30px;stroke:var(--teal-l);fill:none;stroke-width:1.4;margin:0 auto 16px}
.pill p{font-size:.92rem;line-height:1.5;color:rgba(255,255,255,.86)}
@media (max-width:860px){
  .pill-row{grid-template-columns:1fr 1fr}
  .pill:nth-child(odd){border-left:0}
  .pill:nth-child(n+3){border-top:1px solid var(--line-d)}
}
@media (max-width:520px){
  .pill-row{grid-template-columns:1fr}
  .pill{border-left:0;border-top:1px solid var(--line-d)}
  .pill:first-child{border-top:0}
}

/* ══════════════════════════════════════════════
   STATIONEN / TAGS
   ══════════════════════════════════════════════ */
.stations{list-style:none;margin:0;padding:0}
.stations li{display:flex;justify-content:space-between;gap:20px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--line)}
.stations li:first-child{border-top:1px solid var(--line)}
.stations .co{font-weight:500;font-size:.98rem}
.stations .yr{font-size:.84rem;color:var(--muted);white-space:nowrap}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:24px 0 0;list-style:none;padding:0}
.tags li{font-size:.82rem;color:var(--ink-2);border:1px solid var(--line);padding:6px 14px;border-radius:99px;background:#fff}

/* ══════════════════════════════════════════════
   SCHWERPUNKT-BLOCK (#TeamPOWER)
   ══════════════════════════════════════════════ */
.feature{
  display:grid;grid-template-columns:.82fr 1.18fr;
  background:#fff;border:1px solid var(--line);border-left:3px solid var(--teal);
  border-radius:var(--r);overflow:hidden;margin-bottom:clamp(14px,1.6vw,20px);
}
@media (max-width:860px){.feature{grid-template-columns:1fr}}
.feature__brand{
  background:var(--paper-2);border-right:1px solid var(--line);
  padding:clamp(28px,3.4vw,44px);
  display:flex;flex-direction:column;justify-content:center;gap:24px;
}
@media (max-width:860px){.feature__brand{border-right:0;border-bottom:1px solid var(--line)}}
.feature__brand img{max-width:240px;width:100%;height:auto}
.feature__body{padding:clamp(28px,3.4vw,46px)}
.feature__h{
  font-size:clamp(1.4rem,2.5vw,1.95rem);font-weight:400;letter-spacing:-.02em;
  line-height:1.24;margin-bottom:16px;
}
.flist{list-style:none;margin:24px 0 0;padding:0;display:grid;gap:11px}
.flist li{
  font-size:.92rem;color:var(--ink-2);font-weight:300;line-height:1.55;
  padding-left:22px;position:relative;
}
.flist li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--teal)}
.flist b{font-weight:500;color:var(--ink)}

/* ══════════════════════════════════════════════
   PROJEKTKARTEN
   ══════════════════════════════════════════════ */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,20px)}
.cards--2{grid-template-columns:1fr 1fr}
@media (max-width:940px){.cards{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.cards,.cards--2{grid-template-columns:1fr}}
.card{
  display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:clamp(24px,2.6vw,32px);text-decoration:none;position:relative;
  transition:border-color .26s ease,box-shadow .26s ease,transform .26s ease;
}
.card:hover{border-color:var(--teal);box-shadow:var(--shadow);transform:translateY(-3px)}
.card__logo{height:58px;display:flex;align-items:center;margin-bottom:20px}
.card__logo img{max-height:54px;max-width:88%;width:auto;height:auto;object-fit:contain}
.card__t{
  font-size:.74rem;font-weight:500;letter-spacing:.17em;text-transform:uppercase;
  color:var(--teal);margin-bottom:12px;line-height:1.4;
}
.card__d{font-size:.93rem;color:var(--ink-2);font-weight:300;line-height:1.65;flex:1}
.card__f{margin-top:22px;font-size:.82rem;color:var(--teal);display:flex;align-items:center;gap:7px;word-break:break-all}
.card__f .arw{transition:transform .22s ease;flex:none}
.card:hover .card__f .arw{transform:translateX(4px)}

/* Band */
.band{
  margin-top:20px;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(26px,3.2vw,38px);display:flex;gap:26px;align-items:center;
  justify-content:space-between;flex-wrap:wrap;border-left:3px solid var(--teal);
}
.band__t{font-size:1.28rem;font-weight:500;margin-bottom:8px;letter-spacing:-.012em}
.band__d{color:var(--ink-2);font-size:.94rem;font-weight:300;max-width:58ch}

/* ══════════════════════════════════════════════
   DAFÜR / DAGEGEN
   ══════════════════════════════════════════════ */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,22px)}
@media (max-width:820px){.duo{grid-template-columns:1fr}}
.panel{
  background:rgba(255,255,255,.055);border:1px solid var(--line-d);
  border-radius:var(--r);padding:clamp(24px,3vw,34px);
}
.panel__h{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.panel__h svg{width:24px;height:24px;stroke:var(--teal-l);fill:none;stroke-width:1.4;flex:none}
.panel__h span{font-size:1rem;font-weight:500;color:#fff}
.panel ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.panel li{
  font-size:.93rem;color:rgba(255,255,255,.78);font-weight:300;line-height:1.5;
  padding-left:20px;position:relative;
}
.panel li::before{content:"–";position:absolute;left:0;color:var(--teal-l)}
.panel--no .panel__h svg{stroke:rgba(255,255,255,.5)}
.panel--no li::before{color:rgba(255,255,255,.4)}

/* ══════════════════════════════════════════════
   BUCH
   ══════════════════════════════════════════════ */
.book{display:grid;grid-template-columns:.5fr 1fr;gap:clamp(30px,5vw,64px);align-items:center}
/* Zurückgenommene Variante: kleineres Cover, engerer Satz */
.book--sm{grid-template-columns:.32fr 1fr;gap:clamp(24px,3.6vw,48px)}
@media (max-width:820px){.book,.book--sm{grid-template-columns:1fr}}
.cover{
  position:relative;aspect-ratio:2/3;max-width:280px;border-radius:4px;overflow:hidden;
  background:linear-gradient(155deg,#12484f,#0a2e33);box-shadow:0 24px 48px -26px rgba(13,58,64,.6);
  display:flex;flex-direction:column;justify-content:space-between;padding:26px 22px;color:#fff;
}
.cover::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--teal-l)}
.cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
.cover__a{font-size:.7rem;letter-spacing:.17em;text-transform:uppercase;color:rgba(255,255,255,.62);position:relative;z-index:1}
.cover__t{font-size:1.42rem;font-weight:400;line-height:1.2;position:relative;z-index:1;letter-spacing:-.015em}
.cover--sm{max-width:190px;padding:20px 17px}
.cover--sm .cover__t{font-size:1.1rem}
.cover--sm .cover__a{font-size:.62rem}
.meta{list-style:none;margin:26px 0 0;padding:0;max-width:420px}
.meta li{display:flex;justify-content:space-between;gap:18px;font-size:.9rem;padding:11px 0;border-bottom:1px solid var(--line)}
.meta li:first-child{border-top:1px solid var(--line)}
.meta span:first-child{color:var(--muted);font-weight:300}
.meta span:last-child{text-align:right;font-weight:400}

/* ══════════════════════════════════════════════
   FAQ
   ══════════════════════════════════════════════ */
.faq{max-width:800px;margin:0 auto;display:grid;gap:10px}
.faq__i{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.faq__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;
  background:none;border:0;font:inherit;font-size:.98rem;font-weight:400;color:var(--ink);
  text-align:left;padding:19px 24px;cursor:pointer;transition:color .2s ease;
}
.faq__q:hover{color:var(--teal)}
.faq__ico{position:relative;width:14px;height:14px;flex:none}
.faq__ico::before,.faq__ico::after{
  content:"";position:absolute;background:var(--teal);border-radius:2px;
  transition:transform .3s cubic-bezier(.2,.7,.3,1),opacity .25s ease;
}
.faq__ico::before{top:6px;left:0;width:14px;height:2px}
.faq__ico::after{left:6px;top:0;width:2px;height:14px}
.faq__i.is-open .faq__ico::after{transform:scaleY(0);opacity:0}
.faq__a{overflow:hidden;height:0;transition:height .34s cubic-bezier(.2,.7,.3,1)}
.faq__a > div{padding:0 24px 22px;font-size:.94rem;color:var(--ink-2);font-weight:300;line-height:1.7;max-width:70ch}

/* ══════════════════════════════════════════════
   CTA / NEWSLETTER
   ══════════════════════════════════════════════ */
.cta-sec{position:relative;padding:clamp(66px,8vw,110px) 0;overflow:hidden;color:#fff;text-align:center}
.cta-sec__bg{position:absolute;inset:0;z-index:0}
.cta-sec__bg::before{content:"";position:absolute;inset:0;z-index:2;background:rgba(7,33,37,.86)}
.cta-sec .wrap{position:relative;z-index:3}
.cta-sec .kicker{margin-bottom:14px}

/* ══════════════════════════════════════════════
   KONTAKT
   ══════════════════════════════════════════════ */
.crow{
  display:flex;gap:18px;align-items:center;justify-content:space-between;
  padding:17px 0;border-bottom:1px solid var(--line);text-decoration:none;
  transition:padding-left .26s cubic-bezier(.2,.7,.3,1),color .2s ease;
}
.crow:first-child{border-top:1px solid var(--line)}
.crow:hover{padding-left:10px;color:var(--teal)}
.crow__k{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);flex:none}
.crow__v{text-align:right;font-size:.98rem;font-weight:400}

/* ══════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════ */
.ftr{background:var(--deep-3);color:rgba(255,255,255,.72);padding:clamp(54px,6.5vw,84px) 0 30px}
.ftr a{text-decoration:none;transition:color .2s ease}
.ftr a:hover{color:#fff}
.ftr__grid{display:grid;grid-template-columns:1.75fr 1fr 1fr 1.1fr;gap:clamp(28px,4vw,48px)}
@media (max-width:1100px){
  .ftr__grid{grid-template-columns:1fr 1fr}
  .ftr__brand{grid-column:1/-1}
}
@media (max-width:560px){.ftr__grid{grid-template-columns:1fr}}
.ftr__logo img{height:40px;width:auto;margin-bottom:18px}
.ftr__blurb{font-size:.9rem;font-weight:300;line-height:1.7;max-width:34ch;color:rgba(255,255,255,.58)}
.ftr h4{font-size:.74rem;letter-spacing:.17em;text-transform:uppercase;color:#fff;margin-bottom:18px;font-weight:500}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:.92rem;font-weight:300}
.ftr__addr{font-style:normal;font-size:.92rem;font-weight:300;line-height:1.75}
/* Social-Reihe – .ftr .social schlägt bewusst die generische .ftr ul (display:grid) */
.ftr .social{
  display:flex;flex-wrap:nowrap;align-items:center;
  gap:6px;margin-top:24px;list-style:none;padding:0;
}
.ftr .social li{flex:0 0 auto;margin:0}
.ftr .social a{
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.72);
  transition:background .22s ease,border-color .22s ease,color .22s ease,transform .18s ease;
}
.ftr .social svg{width:15px;height:15px;fill:currentColor;display:block}
.ftr .social a:hover{
  background:var(--bc,rgba(255,255,255,.12));
  border-color:var(--bc,var(--teal-l));
  color:#fff;transform:translateY(-2px);
}
/* Ab hier hat der Markenblock die volle Footerbreite – Icons dürfen wachsen */
@media (max-width:1100px){
  .ftr .social{gap:9px}
  .ftr .social a{width:40px;height:40px}
  .ftr .social svg{width:17px;height:17px}
}
/* Einspaltig: Größe an die Viewportbreite koppeln, damit die Reihe nie umbricht */
@media (max-width:560px){
  .ftr .social{gap:clamp(4px,1.6vw,9px)}
  .ftr .social a{
    width:clamp(30px,8.4vw,40px);height:clamp(30px,8.4vw,40px);
  }
}
.ftr__bar{
  margin-top:clamp(38px,4.6vw,58px);padding-top:24px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:.82rem;color:rgba(255,255,255,.45);
}
.ftr__legal{display:flex;gap:20px;flex-wrap:wrap}

/* ══════════════════════════════════════════════
   REVEAL
   ══════════════════════════════════════════════ */
.rv{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1!important;transform:none!important;transition:none}
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}

/* ══════════════════════════════════════════════
   UNTERSEITEN – KOPFBEREICH
   ══════════════════════════════════════════════ */
/* Sprungmarken unter dem Kopf */
.subnav{background:var(--deep-3);border-bottom:1px solid rgba(255,255,255,.1)}
.subnav ul{display:flex;gap:clamp(16px,2.6vw,34px);list-style:none;margin:0;padding:0;overflow-x:auto;scrollbar-width:none}
.subnav ul::-webkit-scrollbar{display:none}
.subnav a{
  display:block;padding:16px 0;font-size:.86rem;color:rgba(255,255,255,.68);
  text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent;transition:color .2s ease,border-color .2s ease;
}
.subnav a:hover{color:#fff;border-bottom-color:var(--teal-l)}

/* ══════════════════════════════════════════════
   RASTER & KARTEN FÜR UNTERSEITEN
   ══════════════════════════════════════════════ */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,20px)}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.6vw,20px)}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(12px,1.4vw,18px)}
@media (max-width:940px){.grid3,.grid4{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.grid3,.grid2,.grid4{grid-template-columns:1fr}}

.tile{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,2.4vw,30px)}
.tile__n{font-size:.78rem;font-weight:500;letter-spacing:.16em;color:var(--teal);margin-bottom:12px;display:block}
.tile__t{font-size:1.06rem;font-weight:500;margin-bottom:8px;letter-spacing:-.01em;line-height:1.35}
.tile__d{font-size:.92rem;color:var(--ink-2);font-weight:300;line-height:1.6}
.tile svg{width:26px;height:26px;stroke:var(--teal);fill:none;stroke-width:1.4;margin-bottom:16px}

/* Werdegang */
.cv{list-style:none;margin:0;padding:0}
.cv li{padding:20px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:150px 1fr;gap:20px}
.cv li:first-child{border-top:1px solid var(--line)}
@media (max-width:620px){.cv li{grid-template-columns:1fr;gap:6px}}
.cv .yr{font-size:.84rem;color:var(--muted);padding-top:.18em}
.cv .co{font-size:1.02rem;font-weight:500;margin-bottom:5px}
.cv .ds{font-size:.92rem;color:var(--ink-2);font-weight:300;line-height:1.6}

/* Zitate */
.quote{background:#fff;border:1px solid var(--line);border-left:3px solid var(--teal);border-radius:var(--r);padding:clamp(22px,2.4vw,28px)}
.quote p{font-size:.98rem;color:var(--ink);line-height:1.62;font-weight:300}
.quote cite{display:block;margin-top:14px;font-style:normal;font-size:.82rem;color:var(--muted)}
.on-dark .quote{background:rgba(255,255,255,.055);border-color:var(--line-d);border-left-color:var(--teal-l)}
.on-dark .quote p{color:rgba(255,255,255,.86)}
.on-dark .quote cite{color:rgba(255,255,255,.5)}

/* Ja/Nein-Listen */
.yn{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.yn li{font-size:.94rem;color:var(--ink-2);font-weight:300;line-height:1.55;padding-left:30px;position:relative}
.yn li::before{
  content:"";position:absolute;left:0;top:.28em;width:18px;height:18px;border-radius:50%;
  background:var(--teal);opacity:.14;
}
.yn li::after{
  content:"";position:absolute;left:5px;top:.62em;width:7px;height:4px;
  border-left:1.6px solid var(--teal);border-bottom:1.6px solid var(--teal);transform:rotate(-45deg);
}
.yn--no li::before{background:var(--muted)}
.yn--no li::after{
  width:8px;height:8px;left:5px;top:.55em;border:0;transform:none;
  background:
    linear-gradient(45deg,transparent 42%,var(--muted) 42%,var(--muted) 58%,transparent 58%),
    linear-gradient(-45deg,transparent 42%,var(--muted) 42%,var(--muted) 58%,transparent 58%);
}

/* Zitat-Block */
.pull{
  border-left:3px solid var(--teal);padding:6px 0 6px 26px;
  font-size:clamp(1.15rem,2.1vw,1.5rem);font-weight:300;line-height:1.5;color:var(--ink);letter-spacing:-.012em;
}
.on-dark .pull{border-left-color:var(--teal-l);color:#fff}
.pull cite{display:block;margin-top:14px;font-style:normal;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* Galerie */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,20px)}
@media (max-width:940px){.gal{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.gal{grid-template-columns:1fr}}
.gal__i{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.gal__img{aspect-ratio:16/10;background:var(--deep-grad);position:relative;overflow:hidden}
.gal__img img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.gal__b{padding:20px 22px}
.gal__t{font-size:1rem;font-weight:500;margin-bottom:6px}
.gal__d{font-size:.9rem;color:var(--ink-2);font-weight:300;line-height:1.55}

/* Preisbox */
.buy{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,2.8vw,34px)}
.buy__p{font-size:1.5rem;font-weight:400;color:var(--teal);margin-bottom:4px}
.buy__s{font-size:.88rem;color:var(--muted);margin-bottom:22px}
.buy .btn{width:100%;margin-bottom:10px}
.buy__fine{font-size:.78rem;color:var(--muted);line-height:1.55;margin-top:14px}

/* Formular */
.form{display:grid;gap:14px}
.field{display:grid;gap:7px}
.field label{font-size:.84rem;font-weight:500;color:var(--ink)}
.field input,.field textarea,.field select{
  font:inherit;font-size:.96rem;font-weight:300;color:var(--ink);background:#fff;
  border:1px solid var(--line);border-radius:5px;padding:12px 16px;width:100%;
  transition:border-color .2s ease;
}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--teal);outline:none}
.field--row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:620px){.field--row{grid-template-columns:1fr}}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.86rem;color:var(--ink-2);font-weight:300;line-height:1.55}
.check input{width:17px;height:17px;margin-top:3px;flex:none;accent-color:var(--teal)}
.formmsg{font-size:.9rem;min-height:1.4em;color:var(--teal)}

/* Rechtstexte */
.legal{max-width:78ch}
.legal h2{font-size:1.3rem;font-weight:500;margin:2.2em 0 .7em;letter-spacing:-.012em}
.legal h2:first-child{margin-top:0}
.legal h3{font-size:1.02rem;font-weight:500;margin:1.6em 0 .5em}
.legal p,.legal li{font-size:.96rem;color:var(--ink-2);font-weight:300;line-height:1.75}
.legal p + p{margin-top:.9em}
.legal ul{padding-left:20px;margin:.7em 0}
.legal li{margin-bottom:.35em}
.legal a{color:var(--teal)}
.legal address{font-style:normal;color:var(--ink-2);font-weight:300;line-height:1.85}
.legal .note{
  background:var(--paper-2);border:1px dashed var(--line);border-left:3px solid var(--teal);
  border-radius:var(--r);padding:20px 24px;margin:1.4em 0;font-size:.92rem;color:var(--ink-2);
}

/* Werdegang mit Aufgaben */
.cv .ctx{font-size:.85rem;color:var(--muted);font-style:italic;margin:4px 0 10px;line-height:1.5}
.cv ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:9px}
/* Wichtig: die Aufgabenpunkte erben sonst Rahmen, Innenabstand und
   Rasterlayout von .cv li – dort steht jeder Stichpunkt danach mit
   eigener Trennlinie und verrutschtem Punkt. */
.cv ul li{
  display:block;grid-template-columns:none;
  border:0;padding:0 0 0 19px;margin:0;
  font-size:.92rem;color:var(--ink-2);font-weight:300;line-height:1.6;
  position:relative;
}
.cv ul li:first-child{border-top:0}
.cv ul li::before{
  content:"";position:absolute;left:0;top:.6em;
  width:6px;height:6px;border-radius:50%;background:var(--teal);opacity:.5;
}
.cv .role{font-size:.84rem;color:var(--teal);font-weight:500;margin-bottom:3px}


/* Aktiver Abschnitt in der Sprungmarken-Leiste */
.subnav a.is-active{color:#fff;border-bottom-color:var(--teal-l)}

@media (max-width:600px){
  .phero__t{font-size:clamp(1.7rem,7vw,2.1rem)}
  .phero__d{font-size:.97rem;margin-top:14px}
  .phero__actions{gap:10px;margin-top:24px}
}


/* Breites Kinoformat für Content-Bilder (2560×1097) */
.figure--wide{aspect-ratio:21/9}
@media (max-width:900px){.figure--wide{aspect-ratio:16/9}}

/* ══════════════════════════════════════════════
   EINGEBETTETE DRITTANBIETER (Zwei-Klick)
   Der Kalender lädt erst nach ausdrücklichem Klick.
   Vorher geht keine Verbindung zu Zeeg raus.
   ══════════════════════════════════════════════ */
.embed{
  border:1px solid var(--line);border-radius:var(--r);background:#fff;
  min-height:420px;display:flex;align-items:center;justify-content:center;overflow:hidden;
}
/* Nach dem Laden bringt Zeeg seine eigene Karte mit Rahmen mit.
   Der Container tritt deshalb komplett zurück – sonst Kasten im Kasten. */
.embed.is-loaded{
  display:block;min-height:0;padding:0;
  background:transparent;border:0;border-radius:0;
}
.embed.is-loaded .zeeg-inline-widget{margin:0 auto}
.embed__ph{text-align:center;padding:clamp(30px,5vw,52px) clamp(20px,4vw,40px);max-width:46ch}
.embed__ph svg{width:34px;height:34px;stroke:var(--teal);fill:none;stroke-width:1.3;margin:0 auto 18px}
.embed__t{font-family:var(--font-display);font-size:1.25rem;font-weight:400;letter-spacing:-.012em;margin-bottom:10px}
.embed__d{font-size:.92rem;color:var(--ink-2);font-weight:300;line-height:1.6;margin-bottom:22px}
.embed__n{font-size:.8rem;color:var(--muted);margin-top:16px;line-height:1.5}
.embed__n a{color:var(--teal)}

/* Textlinks im Fließtext */
.body a{color:var(--teal);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:color .2s ease}
.body a:hover{color:var(--teal-d)}
.on-dark .body a{color:var(--teal-l)}
.on-dark .body a:hover{color:#fff}

/* ══════════════════════════════════════════════
   EINWILLIGUNGSBANNER
   Erscheint nur, solange keine Entscheidung vorliegt.
   Ablehnen und Akzeptieren sind bewusst gleich
   gewichtet – ungleiche Gestaltung gilt als
   „Dark Pattern" und macht die Einwilligung angreifbar.
   ══════════════════════════════════════════════ */
.cc{
  position:fixed;left:var(--gut);right:var(--gut);bottom:var(--gut);z-index:300;
  max-width:640px;margin-inline:auto;
  background:var(--deep-3);color:#fff;border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r);padding:clamp(22px,3vw,30px);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.7);
  transform:translateY(14px);opacity:0;pointer-events:none;
  transition:opacity .3s ease,transform .3s ease;
}
.cc.is-open{transform:none;opacity:1;pointer-events:auto}
.cc__t{font-family:var(--font-display);font-size:1.1rem;font-weight:400;margin-bottom:10px}
.cc__d{font-size:.9rem;font-weight:300;line-height:1.6;color:rgba(255,255,255,.76)}
.cc__d a{color:var(--teal-l)}
.cc__btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.cc__btns .btn{flex:1 1 auto;min-width:150px;justify-content:center}
@media (max-width:520px){.cc__btns .btn{flex:1 1 100%}}

/* ── Leitfrage im Hero (nur /buch/) ──────────────────────────
   Die Kernfrage des Buchs. Steht bewusst zwischen Beschreibung
   und Buttons: das Letzte, was man liest, bevor man klickt. */
.phero__q{
  margin:22px 0 0;
  padding-left:16px;
  border-left:2px solid var(--teal-l);
  font-family:var(--font-display);
  font-size:clamp(1.06rem,1.7vw,1.24rem);
  line-height:1.45;
  color:#fff;
  max-width:26ch}
@media (max-width:900px){.phero__q{font-size:1.04rem;margin-top:18px}}

/* ── Kleingedrucktes als Hilfsklasse ────────────────────────── */
.fine{font-size:.78rem;color:var(--muted);line-height:1.55}
.on-dark .fine{color:rgba(255,255,255,.55)}


/* ══════════════════════════════════════════════
   ORIENTIERUNG BEIM SCROLLEN
   Zwei zusammenhängende Korrekturen:
   1. Die Sprungmarken-Leiste bleibt unter dem Header stehen,
      damit man auch weit unten noch zwischen Abschnitten wechseln kann.
   2. Ankersprünge brauchen einen Versatz, sonst landet die
      Überschrift hinter der fixierten Kopfzeile.
   ══════════════════════════════════════════════ */
.subnav{
  position:sticky;top:80px;z-index:190;
  /* deckt sich mit .hdr.is-stuck, damit beide Leisten eine Einheit bilden */
  background:rgba(10,46,51,.96);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
html{scroll-padding-top:146px}
@media (max-width:600px){html{scroll-padding-top:150px}}


/* ══════════════════════════════════════════════
   ZURÜCK NACH OBEN
   Wird per JS eingehängt, erscheint ab 700 px Scrolltiefe.
   Weicht dem Cookie-Banner aus, solange der offen ist.
   ══════════════════════════════════════════════ */
.totop{
  position:fixed;right:var(--gut);bottom:var(--gut);z-index:210;
  width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--teal);color:#fff;border:0;cursor:pointer;
  box-shadow:0 12px 30px -10px rgba(0,0,0,.55);
  opacity:0;transform:translateY(12px) scale(.9);pointer-events:none;
  transition:opacity .28s ease,transform .28s ease,background .2s ease;
}
.totop.is-on{opacity:1;transform:none;pointer-events:auto}
.totop:hover{background:var(--teal-d)}
.totop:focus-visible{outline:2px solid var(--teal-l);outline-offset:3px}
.totop svg{width:19px;height:19px;display:block}
/* Solange der Einwilligungs-Dialog offen ist, hat er Vorrang. */
body.cc-open .totop{opacity:0;transform:translateY(12px) scale(.9);pointer-events:none}
@media (prefers-reduced-motion:reduce){
  .totop{transition:opacity .01s}
  .totop.is-on{transform:none}
}
@media (max-width:600px){.totop{width:44px;height:44px}}