/* ===========================================================================
   ulrichkammerer.de — gemeinsames Stylesheet aller Seiten
   Design-Erbe: Unternehmerkompass (Petrol, Dot-Grid, Orange, TT Chocolates).
   Getauscht ist die Marke: volle UK-Wortmarke statt Kompass-Signet.
   =========================================================================== */
@font-face{font-family:'TT Chocolates';src:url('/assets/fonts/TT-Chocolates-Regular.ttf');font-weight:400;font-display:swap}
@font-face{font-family:'TT Chocolates';src:url('/assets/fonts/TT-Chocolates-Bold.ttf');font-weight:700;font-display:swap}
@font-face{font-family:'TT Chocolates';src:url('/assets/fonts/TT-Chocolates-ExtraBold.ttf');font-weight:800;font-display:swap}

:root{
  --deep:#051419;--petrol:#08313f;--card:rgba(255,255,255,.05);--line:rgba(255,255,255,.10);
  --orange:#e73e07;--orange-l:#ff7a3d;--grey:#e1e3e7;
  --mut:rgba(255,255,255,.72);--fnt:rgba(255,255,255,.45);--green:#2d8a4e;
  --ez:cubic-bezier(.23,1,.32,1);
  --ez-weich:cubic-bezier(.32,.72,0,1);
  --ez-feder:cubic-bezier(.34,1.42,.5,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-gutter:stable;scroll-padding-top:96px}
body{font-family:'TT Chocolates',ui-sans-serif,system-ui,sans-serif;background:
  radial-gradient(1000px 640px at 84% -8%,rgba(231,62,7,.12),transparent 62%),
  radial-gradient(820px 600px at -6% 108%,rgba(10,64,82,.5),transparent 60%),
  linear-gradient(152deg,var(--petrol) 0%,var(--deep) 58%,#04141b 100%);
  background-attachment:fixed;color:#fff;-webkit-font-smoothing:antialiased;line-height:1.55}
body::before{content:'';position:fixed;inset:0;background-image:radial-gradient(rgba(255,255,255,.05) 1.4px,transparent 1.4px);background-size:42px 42px;pointer-events:none;z-index:0}
img{max-width:100%}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px;position:relative;z-index:2}
.wrap-eng{max-width:820px}
section{padding:104px 0;position:relative}
section.knapp{padding:74px 0}
/* Trennstrich zwischen Abschnitten */
section.tr::before{content:'';position:absolute;top:0;left:50%;
  transform:translateX(-50%) scaleY(0);transform-origin:top center;width:2px;height:72px;
  background:linear-gradient(180deg,var(--orange) 0%,rgba(231,62,7,.5) 45%,transparent 100%);
  box-shadow:0 0 14px rgba(231,62,7,.45);z-index:3;transition:transform 1s var(--ez)}
section.tr.seen::before{transform:translateX(-50%) scaleY(1)}

/* ---------- Typografie ---------- */
.eyebrow{color:var(--orange);font-size:13.5px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;display:flex;align-items:center;gap:14px;margin-bottom:20px}
.eyebrow::before{content:'';width:44px;height:4px;background:var(--orange);border-radius:2px;
  transform-origin:left center;transition:transform .7s var(--ez) .12s}
.js .eyebrow.rv::before{transform:scaleX(0)}
.js .eyebrow.rv.in::before{transform:scaleX(1)}
.eyebrow.mitte{justify-content:center}
h1{font-size:clamp(32px,4.2vw,50px);font-weight:800;line-height:1.1}
h2{font-size:clamp(26px,3.4vw,38px);font-weight:800;line-height:1.16}
h3{font-size:19px;font-weight:800;line-height:1.3}
h4{font-size:16.5px;font-weight:800;line-height:1.35}
.o{background:linear-gradient(100deg,var(--orange) 20%,var(--orange-l) 80%);-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{color:var(--mut);font-size:clamp(16px,1.8vw,18.5px);line-height:1.72;max-width:62ch;margin-top:20px}
.flie p{color:var(--mut);font-size:16.5px;line-height:1.78}
.flie p + p{margin-top:18px}
.flie b,.flie strong{color:#fff;font-weight:800}
.card{background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.02));
  border:1px solid var(--line);border-radius:22px}

/* ---------- Knöpfe ---------- */
.btn{display:inline-flex;align-items:center;background:var(--orange);color:#fff;font-weight:800;font-size:16px;
  padding:15px 32px;border-radius:9999px;text-decoration:none;border:none;cursor:pointer;
  font-family:inherit;box-shadow:0 14px 38px rgba(231,62,7,.32);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(-2px);box-shadow:0 18px 44px rgba(231,62,7,.42)}
.btn::after{content:'\2192';display:inline-block;margin-left:12px;transition:transform .2s}
.btn:hover::after{transform:translateX(5px)}
.btn.extern::after{content:'\2197'}
.btn.extern:hover::after{transform:translate(3px,-3px)}
.btn-geist{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;border-radius:9999px;
  border:1px solid var(--line);background:rgba(255,255,255,.05);text-decoration:none;
  font-size:15px;font-weight:700;transition:border-color .25s,background .25s,transform .25s var(--ez)}
.btn-geist:hover{border-color:rgba(231,62,7,.45);background:rgba(231,62,7,.09);transform:translateY(-2px)}
.tat{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:32px}

/* ---------- Einblenden ---------- */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .75s ease,transform .75s ease}
.js .rv.in{opacity:1;transform:none}
.js .rv.d1{transition-delay:.08s}
.js .rv.d2{transition-delay:.16s}
.js .rv.d3{transition-delay:.24s}
.js .rv.d4{transition-delay:.32s}

/* ---------- Fortschrittsbalken + Kopfleiste ---------- */
.prog{position:fixed;top:0;left:0;height:3px;width:0;
  background:linear-gradient(90deg,var(--orange),var(--orange-l));z-index:61}
.kopfleiste{position:sticky;top:0;z-index:50;transition:background .35s ease,border-color .35s ease,backdrop-filter .35s}
.kopfleiste{background:rgba(5,20,25,0);border-bottom:1px solid transparent}
.kopfleiste.fest{background:rgba(5,20,25,.82);backdrop-filter:blur(16px);border-bottom-color:var(--line)}
.kopfleiste .in{display:flex;align-items:center;gap:24px;padding:16px 24px;max-width:1120px;margin:0 auto}
.kopfleiste .marke{height:26px;width:auto;flex:none;transition:height .35s var(--ez)}
.kopfleiste.fest .marke{height:23px}
.nav{display:flex;gap:22px;margin-left:12px;font-size:14.5px;font-weight:700}
.nav a{text-decoration:none;color:var(--mut);transition:color .2s;position:relative;padding:4px 0}
.nav a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
  background:var(--orange);transform:scaleX(0);transform-origin:left center;transition:transform .3s var(--ez)}
.nav a:hover{color:#fff}
.nav a:hover::after,.nav a.hier::after{transform:scaleX(1)}
.nav a.hier{color:#fff}
.nav .nur-klein{display:none}
.nav-rechts{margin-left:auto;display:flex;gap:10px;align-items:center}
.nav-rechts a{text-decoration:none;font-size:13.5px;font-weight:800;padding:9px 16px;border-radius:9999px;
  border:1px solid var(--line);white-space:nowrap;transition:border-color .25s,background .25s,transform .2s}
.nav-rechts a:hover{border-color:rgba(231,62,7,.5);background:rgba(231,62,7,.1);transform:translateY(-1px)}
.nav-rechts .akut{border-color:rgba(231,62,7,.45);color:var(--orange-l)}
.menue{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:10px;
  padding:8px 10px;cursor:pointer;color:#fff}
.menue svg{width:20px;height:20px;display:block}

/* ---------- Schwebender Knopf ---------- */
.cta-float{position:fixed;bottom:22px;right:24px;z-index:60;display:inline-flex;align-items:center;
  column-gap:14px;width:auto;max-width:300px;
  background:linear-gradient(120deg,var(--orange),var(--orange-l));color:#fff;padding:12px 20px 12px 12px;
  border-radius:16px;text-decoration:none;
  box-shadow:0 18px 48px rgba(4,16,22,.5),0 10px 32px rgba(231,62,7,.35);
  opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .4s ease,transform .3s var(--ez)}
.cta-float.show{opacity:1;transform:none;pointer-events:auto;animation:ctanudge 8s ease-in-out 5s infinite}
.cta-float:hover{animation-play-state:paused;transform:translateY(-3px);
  box-shadow:0 24px 60px rgba(4,16,22,.55),0 14px 40px rgba(231,62,7,.45)}
.cta-float .ic{width:44px;height:44px;border-radius:12px;flex:none;
  background:rgba(5,20,25,.32) url('/assets/uk_signet.svg') center/24px no-repeat}
.cta-float .tx{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.cta-float .tx small{font-size:11.5px;opacity:.85;font-weight:600}
.cta-float .tx b{font-size:15px;font-weight:800;white-space:nowrap}
.cta-float .ar{font-size:18px;font-weight:800}
@keyframes ctanudge{0%,88%,100%{transform:translateY(0)}91%{transform:translateY(-7px)}94%{transform:translateY(0)}}

/* ---------- Hero mit freigestelltem Portrait ----------
   Das Bild sitzt rechts und geht an drei Kanten in den Hintergrund über,
   statt in einem Rahmen zu stehen: unten, links zum Text hin und am rechten
   Rand. Zwei Masken werden verschnitten (`intersect`) — dadurch bleibt der
   Verlauf echte Transparenz und legt sich nicht als Farbfläche darüber, die
   auf dem Seitenverlauf sichtbar würde. */
.hero{position:relative;padding:0;min-height:min(86vh,840px);
  display:flex;flex-direction:column;justify-content:flex-end}
.hero-bild{position:absolute;top:0;right:0;bottom:0;left:calc(50% + 10px);z-index:0;
  background:url('/assets/uk_portrait_full.jpg') 58% 6%/cover no-repeat;
  -webkit-mask-image:
    linear-gradient(180deg,#000 0%,#000 58%,rgba(0,0,0,.55) 83%,transparent 100%),
    linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 10%,#000 34%,#000 64%,rgba(0,0,0,.5) 86%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(180deg,#000 0%,#000 58%,rgba(0,0,0,.55) 83%,transparent 100%),
    linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 10%,#000 34%,#000 64%,rgba(0,0,0,.5) 86%,transparent 100%);
  mask-composite:intersect}
/* Zusätzlicher Schleier nur links: hält die Schrift lesbar, wo sie das Bild
   streift, ohne die ausgefadeten Kanten anzufassen. */
.hero-bild::after{content:'';position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(5,20,25,.92) 0%,rgba(5,20,25,.6) 18%,rgba(5,20,25,.2) 42%,rgba(5,20,25,0) 70%)}
/* `width:100%` ist hier Pflicht: Ohne schrumpft der Flex-Container auf seine
   Inhaltsbreite, und das `margin:0 auto` aus `.wrap` rückt ihn in die Mitte —
   der Hero-Text stünde dann weiter rechts als Logo und alle anderen
   Sektionen. */
.hero-in{position:relative;z-index:2;flex:1;width:100%;display:flex;flex-direction:column;
  justify-content:center;padding-top:56px;padding-bottom:88px}
.hero-txt{max-width:min(640px,58%)}
.hero-txt h1{text-shadow:0 2px 40px rgba(5,20,25,.55)}
.hero-txt .sub{max-width:48ch}
.hero-name{margin-top:34px;font-size:12.5px;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:var(--fnt)}
.hero-name b{color:var(--orange-l);font-weight:800}

/* ---------- Presse-Laufleiste ---------- */
.presse-band{position:relative;padding:96px 0 84px}
.pl-kick{font-size:11px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(255,255,255,.26);text-align:center;margin-bottom:26px}
.pl-band{position:relative;overflow:hidden;padding:8px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.3) 8%,#000 24%,#000 76%,rgba(0,0,0,.3) 92%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.3) 8%,#000 24%,#000 76%,rgba(0,0,0,.3) 92%,transparent 100%)}
.pl-track{display:flex;gap:64px;width:max-content;align-items:center;animation:plauf 62s linear infinite}
.pl-band:hover .pl-track{animation-play-state:paused}
.pl-logo{width:auto;flex:0 0 auto;opacity:.44;transition:opacity .35s}
.pl-logo:hover{opacity:.85}
@keyframes plauf{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Zahlenband ---------- */
.zahlen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.zahl{padding:30px 22px;text-align:center;position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center}
.zahl::after{content:'';position:absolute;inset:0;border-radius:22px;pointer-events:none;
  background:radial-gradient(320px 150px at 50% 0%,rgba(231,62,7,.14),transparent 70%);
  opacity:0;transition:opacity .45s ease}
.zahl:hover::after{opacity:1}
.zahl .n{font-size:clamp(28px,3.2vw,38px);font-weight:800;color:var(--orange-l);line-height:1;
  font-variant-numeric:tabular-nums}
.zahl .t{font-size:14px;color:var(--mut);margin-top:12px;line-height:1.5;
  max-width:22ch;margin-left:auto;margin-right:auto}
.zahl-fuss{margin-top:22px;font-size:12.5px;color:var(--fnt);text-align:center}

/* ---------- Karten-Raster ---------- */
.raster-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.raster-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
/* Ungleiche Zweispalter. Als Klassen, nicht als style-Attribut: ein
   Inline-Wert schlägt jede Media-Query, und die Seite läuft auf dem Handy
   seitlich über. */
.duo{display:grid;gap:44px;align-items:start}
.duo.mitte{align-items:center}
.duo.a{grid-template-columns:.92fr 1.08fr;gap:56px}
.duo.b{grid-template-columns:.8fr 1.2fr;gap:52px}
.duo.c{grid-template-columns:.72fr 1.28fr;gap:52px}
.duo.d{grid-template-columns:1fr auto;gap:36px}
.kach{padding:30px 28px;display:flex;flex-direction:column;gap:13px;text-decoration:none;
  transition:transform .35s var(--ez),border-color .35s,background .35s}
.kach:hover{transform:translateY(-5px);border-color:rgba(231,62,7,.4);background:rgba(231,62,7,.06)}
.kach .kick{font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--orange)}
.kach p{font-size:14.5px;color:var(--fnt);line-height:1.62;flex:1}
.kach .hin{font-size:14px;font-weight:800;color:var(--orange-l);margin-top:4px}
.kach .hin::after{content:' \2192';display:inline-block;transition:transform .25s}
.kach:hover .hin::after{transform:translateX(5px)}
.kach .hin.extern::after{content:' \2197'}

/* ---------- Zitat ---------- */
.zitat{padding:34px 36px}
.zitat p{font-size:clamp(19px,2.2vw,23px);font-weight:800;line-height:1.45}
.zitat .wer{margin-top:20px;font-size:13px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--orange-l)}

/* ---------- Merkmal-Chips ---------- */
.merk{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.merk span{font-size:13px;font-weight:700;padding:8px 14px;border-radius:9999px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--mut)}

/* ---------- Aufklapper (FAQ, Kapitel) ---------- */
.klapp{border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.035);
  margin-bottom:10px;overflow:hidden;transition:border-color .3s,background .3s}
.klapp[open]{border-color:rgba(231,62,7,.35);background:rgba(231,62,7,.05)}
.klapp summary{list-style:none;cursor:pointer;padding:18px 22px;display:flex;align-items:center;gap:16px;
  font-size:16px;font-weight:800}
.klapp summary::-webkit-details-marker{display:none}
.klapp summary::after{content:'+';margin-left:auto;font-size:22px;font-weight:800;color:var(--orange-l);
  transition:transform .3s var(--ez-weich);line-height:1}
.klapp[open] summary::after{transform:rotate(45deg)}
.klapp .inh{padding:0 22px 20px;color:var(--mut);font-size:15.5px;line-height:1.72}
.klapp .nr{flex:none;width:30px;height:30px;border-radius:9px;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-size:12.5px;color:var(--orange-l)}

/* ---------- Zeitstrahl (Vita) ---------- */
.strahl{position:relative;padding-left:38px;margin-top:44px}
.strahl::before{content:'';position:absolute;left:9px;top:8px;bottom:8px;width:2px;
  background:linear-gradient(180deg,var(--orange),rgba(231,62,7,.22) 60%,transparent);
  transform-origin:top;transform:scaleY(0);transition:transform 1.6s var(--ez)}
.strahl.seen::before{transform:scaleY(1)}
.etappe{position:relative;padding-bottom:38px}
.etappe:last-child{padding-bottom:0}
.etappe::before{content:'';position:absolute;left:-34px;top:7px;width:12px;height:12px;border-radius:50%;
  background:var(--deep);border:2px solid var(--orange);box-shadow:0 0 0 4px rgba(231,62,7,.12)}
.etappe .jahr{font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--orange)}
.etappe h3{margin:8px 0 10px}
.etappe p{color:var(--mut);font-size:15.5px;line-height:1.72}

/* ---------- Filterleiste (Auftritte) ---------- */
.filter{display:flex;flex-wrap:wrap;gap:9px;margin-top:32px}
.filter button{font-family:inherit;font-size:13.5px;font-weight:800;padding:9px 18px;border-radius:9999px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--mut);cursor:pointer;
  transition:border-color .25s,background .25s,color .25s,transform .2s}
.filter button:hover{transform:translateY(-2px);color:#fff}
.filter button.an{border-color:rgba(231,62,7,.55);background:rgba(231,62,7,.12);color:#fff}
.aus{display:none}

/* ---------- Siegel ---------- */
.siegel{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:30px 44px;margin-top:32px}
.siegel img{height:64px;width:auto;opacity:.9;transition:transform .35s var(--ez),opacity .3s}
.siegel img:hover{transform:translateY(-4px);opacity:1}
.siegel .breit{height:38px}

/* ---------- Kopieren-Feld (Presse) ---------- */
.kopf-feld{display:flex;align-items:flex-start;gap:16px;padding:22px 24px;margin-top:14px}
.kopf-feld p{flex:1;color:var(--mut);font-size:15.5px;line-height:1.72;font-style:italic}
.kopier{flex:none;font-family:inherit;font-size:13px;font-weight:800;padding:9px 16px;border-radius:9999px;
  border:1px solid var(--line);background:rgba(255,255,255,.05);color:#fff;cursor:pointer;
  transition:border-color .25s,background .25s}
.kopier:hover{border-color:rgba(231,62,7,.5);background:rgba(231,62,7,.1)}
.kopier.fertig{border-color:rgba(79,191,120,.6);color:#4fbf78}

/* ---------- Seitenkopf der Unterseiten ---------- */
.seitenkopf{padding:66px 0 12px}
.seitenkopf .pfad{font-size:12.5px;color:var(--fnt);margin-bottom:20px}
.seitenkopf .pfad a{text-decoration:none;color:var(--fnt);transition:color .2s}
.seitenkopf .pfad a:hover{color:var(--orange-l)}

/* ---------- Fuß ---------- */
.foot{border-top:1px solid var(--line);padding:52px 0 30px;font-size:13.5px;color:var(--fnt);position:relative;z-index:2}
.foot .in{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:34px;align-items:start}
.foot .marke{height:24px;width:auto;opacity:.85;margin-bottom:16px}
.foot h4{font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);margin-bottom:14px}
.foot ul{list-style:none;display:grid;gap:9px}
.foot a{text-decoration:none;transition:color .2s}
.foot a:hover{color:#fff}
.foot .unten{margin-top:40px;padding-top:22px;border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:12.5px}

@media (max-width:980px){
  section{padding:78px 0}
  .raster-3,.raster-2,.zahlen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .duo,.duo.a,.duo.b,.duo.c,.duo.d{grid-template-columns:1fr;gap:36px}
  .duo .haftend{position:static !important}
  .nav{display:none}
  .nav.auf{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
    background:rgba(5,20,25,.97);border-bottom:1px solid var(--line);padding:8px 24px 16px;margin:0}
  .nav.auf a{padding:13px 0;border-bottom:1px solid var(--line)}
  .menue{display:block;order:3;margin-left:12px}
  /* Der akute Weg bleibt in der Logo-Zeile stehen — verkürzt auf das, was
     zählt. Die Akademie ist im Menü besser aufgehoben als in einer eigenen
     Zeile unter dem Logo. */
  .nav-rechts{margin-left:auto;order:2;width:auto;padding:0;gap:0}
  .nav-rechts .akademie{display:none}
  .nav-rechts .akut .lang{display:none}
  .nav-rechts .akut{font-size:12.5px;padding:8px 13px}
  .nav .nur-klein{display:block}
  .kopfleiste .in{flex-wrap:wrap;gap:0;position:relative;padding:13px 20px}
  .kopfleiste .marke{height:23px}
  .foot .in{grid-template-columns:1fr 1fr}
  .siegel img{height:52px}
  .cta-float{left:16px;right:16px;bottom:16px;max-width:none;justify-content:center}
  .pl-track{gap:44px;animation-duration:46s}
  /* Auf dem Handy liegt das Portrait hinter dem ganzen Text, oben angesetzt,
     und fadet nach unten weg — nebeneinander wäre für beides zu wenig Platz. */
  .hero{min-height:0}
  .hero-bild{left:0;background-position:56% top}
  .hero-bild{-webkit-mask-image:linear-gradient(180deg,#000 0%,#000 40%,rgba(0,0,0,.5) 68%,transparent 92%);
    mask-image:linear-gradient(180deg,#000 0%,#000 40%,rgba(0,0,0,.5) 68%,transparent 92%);
    -webkit-mask-composite:source-over;mask-composite:add}
  .hero-bild::after{background:
    linear-gradient(180deg,rgba(5,20,25,.3) 0%,rgba(5,20,25,.55) 24%,rgba(5,20,25,.9) 46%,rgba(5,20,25,.97) 100%)}
  .hero-in{padding-top:230px;padding-bottom:56px}
  .hero-txt{max-width:none}
}
@media (max-width:620px){
  .raster-3,.raster-2,.zahlen{grid-template-columns:1fr}
  .foot .in{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .js .rv,.js .rv.in{opacity:1;transform:none;transition:none}
  section.tr::before{transition:none;transform:translateX(-50%) scaleY(1) !important}
  .strahl::before{transition:none;transform:scaleY(1)}
  .pl-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto;gap:38px 46px;max-width:900px;margin:0 auto}
  .pl-band{mask-image:none;-webkit-mask-image:none}
  .cta-float.show{animation:none}
  html{scroll-behavior:auto}
}

/* ---------- Standortbestimmung (eigenes Instrument der Personen-Site) ------
   Bewusst kein Klon des Struktur-Checks: acht Fragen zur Früherkennung, die
   Auswertung läuft im Browser. Keine Anmeldung, keine Datenübergabe an ein
   anderes Produkt — das ist der Punkt an einem eigenen Instrument. */
.test{padding:38px 40px;margin-top:38px}
.test-balken{height:4px;border-radius:9999px;background:rgba(255,255,255,.09);overflow:hidden;margin-bottom:30px}
.test-balken span{display:block;height:100%;width:12.5%;border-radius:9999px;
  background:linear-gradient(90deg,var(--orange),var(--orange-l));transition:width .6s var(--ez-weich)}
.test-zaehler{font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--fnt);margin-bottom:14px}
.frage{display:none}
.frage.an{display:block;animation:reinschieben .45s var(--ez-weich) both}
@keyframes reinschieben{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.frage h3{font-size:clamp(19px,2.4vw,24px);line-height:1.32}
.frage .hint{font-size:14px;color:var(--fnt);margin-top:9px}
.wahl{display:grid;gap:11px;margin-top:26px}
.wahl button{display:flex;align-items:center;gap:14px;padding:16px 20px;border-radius:14px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);color:#fff;cursor:pointer;
  font-family:inherit;font-size:15.5px;text-align:left;
  transition:border-color .25s,background .25s,transform .25s var(--ez)}
.wahl button:hover{border-color:rgba(231,62,7,.45);background:rgba(231,62,7,.08);transform:translateX(4px)}
.wahl .kreis{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.28);
  position:relative;transition:border-color .25s}
.wahl button:hover .kreis{border-color:var(--orange)}
.test-nav{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:26px}
.test-zurueck{background:none;border:none;color:var(--fnt);font-family:inherit;font-size:14px;
  font-weight:700;cursor:pointer;padding:8px 0;transition:color .25s}
.test-zurueck:hover{color:var(--mut)}
.test-zurueck[hidden]{display:none}
/* Auswertung */
.ergebnis{display:none}
.ergebnis.an{display:block;animation:reinschieben .5s var(--ez-weich) both}
.ampel{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.ampel .punkt{flex:none;width:88px;height:88px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:30px;font-weight:800;font-variant-numeric:tabular-nums}
.ampel.gruen .punkt{background:rgba(45,138,78,.16);border:2px solid rgba(79,191,120,.65);color:#4fbf78}
.ampel.gelb .punkt{background:rgba(245,158,11,.14);border:2px solid rgba(245,158,11,.6);color:#f59e0b}
.ampel.rot .punkt{background:rgba(192,57,43,.16);border:2px solid rgba(224,90,76,.6);color:#e05a4c}
.ampel h3{font-size:clamp(21px,2.6vw,27px)}
.ampel .stufe{font-size:12px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--fnt);margin-bottom:6px}
.luecken{margin-top:30px;display:grid;gap:10px}
.luecke{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:14px;
  border:1px solid var(--line);background:rgba(255,255,255,.035);font-size:15px;line-height:1.6;color:var(--mut)}
.luecke::before{content:'!';flex:none;width:24px;height:24px;border-radius:7px;display:flex;
  align-items:center;justify-content:center;font-size:13px;font-weight:800;
  background:rgba(231,62,7,.16);color:var(--orange-l)}
.luecken .gut::before{content:'✓';background:rgba(45,138,78,.18);color:#4fbf78}
.test-neu{margin-top:26px;background:none;border:none;color:var(--fnt);font-family:inherit;
  font-size:14px;font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.test-neu:hover{color:var(--mut)}
@media (max-width:620px){
  .test{padding:28px 22px}
  .ampel .punkt{width:70px;height:70px;font-size:25px}
}
@media (prefers-reduced-motion:reduce){
  .frage.an,.ergebnis.an{animation:none}
}

/* ---------- Buch-Cover ----------
   Das Mockup ist freigestellt und braucht keinen Rahmen mehr. Ein weicher
   Schlagschatten unter dem Stapel ersetzt den, der beim Freistellen
   weggefallen ist. */
.buch-bild{display:flex;align-items:center;justify-content:center;padding:10px}
.buch-bild img{width:100%;max-width:420px;height:auto;display:block;
  filter:drop-shadow(0 30px 46px rgba(0,0,0,.55)) drop-shadow(0 8px 16px rgba(0,0,0,.4));
  transition:transform .6s var(--ez)}
.buch-bild.gross img{max-width:480px}
.buch-bild:hover img{transform:translateY(-6px) rotate(-.6deg)}
@media (max-width:980px){
  .buch-bild img,.buch-bild.gross img{max-width:340px}
}
@media (prefers-reduced-motion:reduce){
  .buch-bild:hover img{transform:none}
}

/* ---------- Die acht Stationen neben der Check-Karte ----------
   Eine nackte Ziffer neben dem Text sah aus wie hingestellt. Acht Punkte
   zeigen dagegen, worauf sich der Besucher einlässt: eine kurze Strecke mit
   Anfang und Ende. Sie laufen einmal durch, wenn die Karte ins Bild kommt. */
.acht{display:flex;flex-direction:column;align-items:center;gap:18px;padding-left:8px}
.acht-reihe{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}
.acht-reihe span{width:15px;height:15px;border-radius:50%;
  border:2px solid rgba(255,255,255,.22);background:transparent;
  transition:background .5s var(--ez-weich),border-color .5s var(--ez-weich),transform .5s var(--ez-weich)}
.seen .acht-reihe span{background:var(--orange-l);border-color:var(--orange-l);transform:scale(1.12)}
.seen .acht-reihe span:nth-child(1){transition-delay:.05s}
.seen .acht-reihe span:nth-child(2){transition-delay:.12s}
.seen .acht-reihe span:nth-child(3){transition-delay:.19s}
.seen .acht-reihe span:nth-child(4){transition-delay:.26s}
.seen .acht-reihe span:nth-child(5){transition-delay:.33s}
.seen .acht-reihe span:nth-child(6){transition-delay:.40s}
.seen .acht-reihe span:nth-child(7){transition-delay:.47s}
.seen .acht-reihe span:nth-child(8){transition-delay:.54s}
.acht-l{text-align:center;line-height:1.35}
.acht-l b{display:block;font-size:17px;font-weight:800}
.acht-l i{display:block;font-style:normal;font-size:12px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fnt);margin-top:5px}
@media (max-width:980px){
  .acht{flex-direction:row;justify-content:center;gap:22px;padding:0}
  .acht-reihe{grid-template-columns:repeat(4,1fr);gap:9px}
  .acht-l{text-align:left}
}
@media (prefers-reduced-motion:reduce){
  .acht-reihe span{background:var(--orange-l);border-color:var(--orange-l);transition:none}
}

/* ---------- Bildsektionen ----------
   Bricht die Folge aus Karten-Rastern auf. Aufbau wie die Büffel-Sektion auf
   der Webinarseite: Bild als Fläche, Text darüber, ein Verlauf hält die
   Schrift lesbar. Auf dem Handy kippt der Verlauf von seitlich auf vertikal,
   sonst steht die Schrift auf dem hellsten Teil des Bildes. */
.bildzone{position:relative;overflow:hidden;padding:0;min-height:520px;display:flex;align-items:center}
.bildzone-bg{position:absolute;inset:0;z-index:0;background-position:center;background-size:cover;
  background-repeat:no-repeat;transform:scale(1.04);transition:transform 1.4s var(--ez)}
.bildzone.seen .bildzone-bg{transform:scale(1)}
.bildzone-bg::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(5,20,25,.95) 0%,rgba(5,20,25,.8) 42%,rgba(5,20,25,.3) 100%)}
.bildzone .wrap{position:relative;z-index:2;width:100%;padding-top:92px;padding-bottom:92px}
.bildzone-in{max-width:600px}
.bildzone h2{text-shadow:0 2px 30px rgba(5,20,25,.8)}
.bildzone .sub{color:rgba(255,255,255,.82)}
.bildzone-cap{position:absolute;right:26px;bottom:20px;z-index:2;font-size:12px;color:rgba(255,255,255,.32)}
/* Spiegelverkehrt, wenn der Text rechts stehen soll */
.bildzone.rechts .bildzone-bg::after{
  background:linear-gradient(270deg,rgba(5,20,25,.95) 0%,rgba(5,20,25,.8) 42%,rgba(5,20,25,.3) 100%)}
.bildzone.rechts .bildzone-in{margin-left:auto}
@media (max-width:900px){
  .bildzone{min-height:0}
  .bildzone-bg::after,.bildzone.rechts .bildzone-bg::after{
    background:linear-gradient(180deg,rgba(5,20,25,.72) 0%,rgba(5,20,25,.88) 46%,rgba(5,20,25,.95) 100%)}
  .bildzone .wrap{padding-top:64px;padding-bottom:64px}
  .bildzone-in{max-width:none}
  .bildzone-cap{display:none}
}
@media (prefers-reduced-motion:reduce){
  .bildzone-bg,.bildzone.seen .bildzone-bg{transform:none;transition:none}
}

/* ---------- Formulare ----------
   Zwei Wege gleichzeitig: Netlify nimmt die Einsendung entgegen (Auswertung
   und Benachrichtigung im Netlify-Backend), parallel geht sie an die
   Erfassung und von dort ins CRM. Fällt eine Seite aus, ist die Anfrage
   trotzdem da. */
.form{padding:34px 36px;margin-top:32px}
.feldpaar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.feld{display:block;margin-top:14px}
.feld > span{display:block;font-size:13px;font-weight:800;color:var(--mut);margin-bottom:7px}
.feld > span i{font-style:normal;color:var(--fnt);font-weight:700}
.feld input,.feld textarea,.feld select{width:100%;background:rgba(255,255,255,.05);
  border:1px solid var(--line);border-radius:13px;padding:13px 15px;color:#fff;
  font-family:inherit;font-size:15.5px;line-height:1.55;transition:border-color .25s,background .25s}
.feld textarea{min-height:130px;resize:vertical}
.feld select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--orange-l) 50%),linear-gradient(135deg,var(--orange-l) 50%,transparent 50%);
  background-position:calc(100% - 20px) 21px,calc(100% - 14px) 21px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.feld select option{background:var(--deep);color:#fff}
.feld input:focus,.feld textarea:focus,.feld select:focus{outline:none;border-color:var(--orange);
  background:rgba(255,255,255,.07)}
.feld input::placeholder,.feld textarea::placeholder{color:rgba(255,255,255,.3)}
.form-fuss{display:flex;align-items:center;justify-content:space-between;gap:18px;
  flex-wrap:wrap;margin-top:24px}
.form-hinweis{font-size:12.5px;color:var(--fnt);max-width:46ch;line-height:1.6}
.honig{position:absolute;left:-9999px}
.form-danke{display:none;text-align:center;padding:18px 0}
.form-danke.an{display:block;animation:reinschieben .5s var(--ez-weich) both}
.form-danke .gross{font-size:22px;font-weight:800;margin-bottom:10px}
.form-danke p{color:var(--mut);font-size:15.5px;line-height:1.65;max-width:52ch;margin:0 auto}
.form-fehler{margin-top:16px;font-size:14px;color:#e05a4c;font-weight:700;display:none}
.form-fehler.an{display:block}
@media (max-width:620px){
  .form{padding:26px 22px}
  .feldpaar{grid-template-columns:1fr}
}

/* ---------- Trust-Siegel im Hero ---------- */
.hero-siegel{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:26px;
  padding-top:22px;border-top:1px solid var(--line);max-width:520px}
.hero-siegel img{height:46px;width:auto;opacity:.82;transition:opacity .3s,transform .3s var(--ez)}
.hero-siegel img:hover{opacity:1;transform:translateY(-2px)}
.hero-siegel .breit{height:26px}
/* Die runden Siegel sind für weißen Grund gemacht — auf Petrol gehen sie sonst unter.
   Ein heller Kreis darunter macht sie lesbar, ohne sie zu verfälschen. */
.hero-siegel .rund{height:52px;opacity:1;border-radius:50%;background:rgba(255,255,255,.92);
  padding:3px;box-shadow:0 4px 16px rgba(0,0,0,.28)}
/* ---------- Scroll-Hinweis unter dem Hero ---------- */
.scroll-hinweis{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:4;
  width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.28);
  background:rgba(8,49,63,.5);backdrop-filter:blur(8px);display:flex;align-items:center;
  justify-content:center;color:var(--orange-l);animation:hinweis 2.4s ease-in-out infinite;
  transition:opacity .35s ease,border-color .25s}
.scroll-hinweis:hover{border-color:rgba(231,62,7,.5)}
.scroll-hinweis svg{width:20px;height:20px}
@keyframes hinweis{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(7px)}}
/* ---------- Warnzeichen bei akuten Wegen ---------- */
svg.warn{width:14px;height:14px;display:inline-block;vertical-align:-2px;margin-right:6px;flex:none}
.nav-rechts .akut svg.warn{width:13px;height:13px;margin-right:5px}
@media (max-width:980px){
  .hero-siegel{gap:18px;margin-top:22px;padding-top:18px}
  .hero-siegel img{height:38px}
  .hero-siegel .breit{height:22px}
  .scroll-hinweis{display:none}
}
@media (prefers-reduced-motion:reduce){ .scroll-hinweis{animation:none} }

/* ---------- Portrait in der Vita ---------- */
.vita-bild{border-radius:22px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 26px 70px rgba(0,0,0,.45)}
.vita-bild img{display:block;width:100%;height:auto}