/* ===========================================================================
   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}
/* Ruhige Fläche: die Leiste liegt auf durchgehendem Tiefpetrol mit Haarlinien,
   nicht auf dem Punktraster — sonst flimmern Logos und Punkte gegeneinander. */
.presse-band.ruhig{background:var(--deep);border-top:1px solid var(--line);border-bottom:1px solid var(--line);z-index:1}
.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}
.zahlen.drei{grid-template-columns:repeat(3,minmax(0,1fr))}
.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}
  /* **Auf dem Handy kommt das Formular zuerst.** Zweispaltig steht der
     erklärende Text links, das Formular rechts — beides zugleich im Blick.
     Gestapelt rutscht das Formular 778 Pixel nach unten, hinter 551 Pixel
     Text. Wer auf „Platz reservieren" tippt, landete damit in der
     Erklärung und sah kein einziges Eingabefeld; dass darunter noch etwas
     kommt, erwartet an dieser Stelle niemand.
     Nur dort, wo ein Formular im zweiten Feld steht — sonst bliebe überall
     die Reihenfolge auf dem Kopf. */
  .duo:has(> :nth-child(2) form) > :nth-child(2){order:-1}
  .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:16px;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:16px;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}

/* ---------- Orientierung: vier Fragen als Vollbild-Schicht ----------
   Nachbau des Perspective-Evergreen-Funnels (go.ulrichkammerer.de/
   evergreen-insolvenz/, 24.09.2026). Jeder CTA auf der Seite öffnet diese
   Schicht; darin ein einziges Formular in vier Schritten (orientierung.js),
   abgeschickt über den Doppelweg aus uk.js. Die Felder sind die Formular-
   felder von oben (.feld, .feldpaar) — hier kommt nur dazu, was die
   Strecke braucht: Schicht, Fortschritt, Stufenknöpfe, Schrittfuß. */
body.quiz-offen{overflow:hidden}
.quiz{position:fixed;inset:0;z-index:85;overflow-y:auto;overscroll-behavior:contain;
  background:
    radial-gradient(900px 560px at 84% -10%,rgba(231,62,7,.14),transparent 62%),
    linear-gradient(152deg,var(--petrol) 0%,var(--deep) 62%,#04141b 100%)}
.quiz[hidden]{display:none}
.quiz::before{content:'';position:fixed;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.05) 1.4px,transparent 1.4px);background-size:42px 42px}
.quiz-kopf{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:16px max(24px,calc((100% - 1072px) / 2));background:rgba(5,20,25,.82);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line)}
.quiz-kopf img{height:24px;width:auto}
.quiz-zu{background:none;border:1px solid var(--line);color:var(--mut);border-radius:9999px;
  padding:9px 18px;font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;
  transition:border-color .25s,color .25s}
.quiz-zu:hover{border-color:rgba(255,255,255,.4);color:#fff}
.quiz-zu i{font-style:normal;margin-right:6px}
.quiz-in{position:relative;z-index:1;max-width:720px;margin:0 auto;padding:44px 24px 80px}
.quiz .form{margin-top:0}
.schritt-kopf{display:flex;align-items:center;gap:16px;margin-bottom:26px}
.schritt-nr{flex:none;font-size:12.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--orange-l)}
.schritt-balken{flex:1;height:6px;border-radius:9999px;background:rgba(255,255,255,.08);overflow:hidden}
.schritt-balken i{display:block;height:100%;width:25%;border-radius:inherit;
  background:linear-gradient(90deg,var(--orange),var(--orange-l));transition:width .45s var(--ez)}
.schritt h2{font-size:clamp(22px,3vw,30px)}
.schritt .unter{color:var(--mut);font-size:15.5px;line-height:1.65;margin-top:10px}
.schritt[hidden]{display:none}
.schritt-fuss{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:26px}
.zurueck{background:none;border:none;color:var(--fnt);font-family:inherit;font-size:14.5px;font-weight:700;
  cursor:pointer;padding:8px 0}
.zurueck::before{content:'\2190';margin-right:8px}
.zurueck:hover{color:#fff}
.schritt-hinweis{margin-top:14px;font-size:14px;color:#e05a4c;font-weight:700}
.schritt-hinweis[hidden]{display:none}
.stufen{display:flex;flex-direction:column;gap:9px;margin-top:22px}
.stufe{display:flex;align-items:center;gap:16px;width:100%;text-align:left;cursor:pointer;
  background:rgba(255,255,255,.045);border:1px solid var(--line);border-left:4px solid var(--f);
  border-radius:13px;padding:13px 16px;color:#fff;font-family:inherit;font-size:16px;line-height:1.4;
  transition:border-color .2s,background .2s,transform .2s var(--ez)}
.stufe b{flex:none;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.07);font-size:15px;font-weight:800;color:var(--orange-l)}
.stufe:hover{background:rgba(231,62,7,.09);border-color:rgba(231,62,7,.45);border-left-color:var(--f);transform:translateX(3px)}
.stufe.gewaehlt{background:rgba(231,62,7,.14);border-color:var(--orange);border-left-color:var(--f)}
.zustimmung{display:flex;align-items:flex-start;gap:12px;margin-top:20px;font-size:14px;color:var(--mut);line-height:1.6;cursor:pointer}
.zustimmung input{flex:none;width:20px;height:20px;margin-top:2px;accent-color:var(--orange)}
.zustimmung a{color:var(--orange-l)}
.quiz .form-danke{text-align:left;padding:6px 0}
.quiz .form-danke p{margin:16px 0 0;max-width:none}
.quiz .form-danke .tat{margin-top:26px}
.quiz .form-danke .form-hinweis{margin-top:12px;font-size:12.5px}

/* ---------- Wiederkehrender CTA nach jedem Abschnitt ---------- */
.cta-zeile{text-align:center;margin-top:48px}
.cta-zeile .form-hinweis{margin:12px auto 0;max-width:none}

/* ---------- Evergreen: Einstieg nach dem Aufbau des Originals ----------
   Wie beim Perspective-Vorbild: Kicker, Überschrift und Unterzeile über die
   ganze Breite, darunter zwei Spalten — die drei Druckpunkte mit dem Knopf
   und das Portrait mit der Siegelleiste. Anders als dort steht das Bild
   rechts: Rechts im Einstieg steht nur Bild oder Formular. */
.eg-held{padding:36px 0 104px}
.eg-kopf{text-align:center;max-width:1000px;margin:0 auto}
.eg-kopf .eyebrow{justify-content:center;line-height:1.5}
.eg-kopf .eyebrow::before{display:none}
.eg-kopf .eyebrow svg{width:17px;height:17px;flex:none}
.eg-kopf h1{font-size:clamp(28px,3vw,42px);line-height:1.15;text-wrap:balance}
.eg-kopf .sub{margin:18px auto 0;max-width:70ch;text-wrap:pretty}
.eg-duo{display:grid;grid-template-columns:1.04fr .96fr;gap:56px;align-items:start;margin-top:44px}
.eg-druck{list-style:none;display:flex;flex-direction:column;gap:12px}
.eg-druck li{display:flex;gap:18px;align-items:center;padding:18px 22px}
.eg-druck .ic{flex:none;width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:rgba(231,62,7,.12);border:1px solid rgba(231,62,7,.34);color:var(--orange-l)}
.eg-druck .ic svg{width:23px;height:23px}
.eg-druck p{color:var(--mut);font-size:15.5px;line-height:1.6}
.eg-druck b{color:#fff;font-weight:800}
.eg-duo .tat{margin-top:26px}
.eg-portrait{position:relative;border-radius:24px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 30px 80px rgba(0,0,0,.45);background:#0b3947}
.eg-portrait > img{display:block;width:100%;height:auto;aspect-ratio:1100/979;object-fit:cover}
/* Siegelleiste auf dem Bild, wie im Original — heller Träger, damit die
   farbigen Siegel nicht auf dem Foto untergehen. */
.eg-siegel{position:absolute;left:16px;right:16px;bottom:16px;display:flex;align-items:center;
  justify-content:space-around;gap:14px;padding:12px 16px;border-radius:16px;
  background:rgba(5,20,25,.78);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.14)}
.eg-siegel img{height:46px;width:auto;flex:none;min-width:0}
.eg-siegel .rund{height:54px;border-radius:50%;background:rgba(255,255,255,.94);padding:2px}
.eg-siegel .breit{height:32px}
.eg-siegel .hell{height:34px;border-radius:7px;background:#fff;padding:3px 7px}
.eg-name{margin-top:16px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--fnt);text-align:center}
.eg-name b{color:var(--orange-l)}

/* Karten-Kopf mit Zeichen statt Emoji */
.kach .ic{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:rgba(231,62,7,.12);border:1px solid rgba(231,62,7,.34);color:var(--orange-l);margin-bottom:6px}
.kach .ic svg{width:23px;height:23px}

/* „Aber es gibt einen Weg raus": Foto mit Ulrich Kammerer im Gespräch neben
   dem Satz, der zum Gespräch führt. Oben ausgerichtet, gleiche Höhe. */
.eg-weg{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;margin-top:64px}
.eg-weg figure{border-radius:24px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.4)}
.eg-weg img{display:block;width:100%;height:auto;aspect-ratio:1400/763;object-fit:cover}
.eg-weg .flie p{font-size:18px}
.eg-weg .tat{margin-top:28px}
.eg-weg .form-hinweis{margin-top:12px}
.eg-zwischen{margin-top:72px;font-size:clamp(20px,2.2vw,24px)}
.eg-flie{margin-top:24px;max-width:760px}
.eg-abstand{margin-top:48px}
.eg-abstand-k{margin-top:28px}
.eg-fragen{margin-top:32px;display:flex;flex-direction:column;gap:12px}

/* ---------- Mandantenstimme ----------
   Zitat oben, dann die Person mit rundem Foto, darunter Ausgangssituation,
   Maßnahme und Ergebnis. Die Karten teilen sich über `subgrid` dieselben
   Zeilen: Name, Foto und Fallbeschreibung stehen in allen drei Karten auf
   einer Höhe, und die Karten sind gleich hoch. */
.stimmen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:48px}
.stimme{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0;padding:36px 32px 32px}
.stimme .sterne{display:flex;gap:4px;color:#f5b301}
.stimme .sterne svg{width:18px;height:18px}
.stimme blockquote{margin-top:20px;font-size:16.5px;font-weight:600;line-height:1.62;color:#fff;position:relative}
.stimme-wer{display:flex;align-items:center;gap:16px;margin-top:26px;padding-top:24px;border-top:1px solid var(--line)}
.stimme-wer img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none;
  border:2px solid rgba(242,103,34,.7);box-shadow:0 0 0 4px rgba(242,103,34,.12)}
.stimme-wer b{display:block;font-size:16.5px;color:#fff;line-height:1.3}
.stimme-wer span{display:block;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--orange-l);margin-top:5px}
.stimme-fall{margin-top:24px;display:flex;flex-direction:column;gap:14px;padding:20px 22px;border-radius:16px;
  background:rgba(255,255,255,.035);border:1px solid var(--line)}
.stimme-fall dt{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--orange)}
.stimme-fall dd{font-size:14.5px;color:var(--mut);line-height:1.6;margin-top:4px}
.stimme-fall .fall-ergebnis dd{color:#fff;font-weight:700}
@media (max-width:980px){
  .eg-held{padding:40px 0 78px}
  .eg-duo,.eg-weg{grid-template-columns:1fr;gap:36px;margin-top:40px}
  /* Auf dem Handy wie im Original: erst das Gesicht, dann die Druckpunkte. */
  .eg-bild{order:-1;max-width:560px;width:100%;margin:0 auto}
  .eg-duo .tat{justify-content:center}
  .eg-duo .hero-mikro{text-align:center}
  .stimmen{grid-template-columns:1fr;max-width:620px;margin-left:auto;margin-right:auto}
  .stimme{grid-row:auto;grid-template-rows:none;display:flex;flex-direction:column}
}
@media (max-width:620px){
  .eg-kopf .eyebrow{display:block;font-size:11.5px;letter-spacing:.16em}
  .eg-kopf .eyebrow svg{display:inline-block;vertical-align:-3px;margin-right:8px;width:15px;height:15px}
  .eg-portrait > img{aspect-ratio:4/3;object-position:50% 12%}
  .eg-siegel{left:10px;right:10px;bottom:10px;padding:9px 10px;gap:8px}
  .eg-siegel img{height:34px}
  .eg-siegel .rund{height:38px}
  .eg-siegel .breit{height:22px}
  .eg-siegel .hell{height:28px}
  .zahlen.drei{grid-template-columns:1fr}
  .eg-druck li{padding:18px 18px;gap:14px}
  .eg-druck .ic{width:42px;height:42px}
  .stimme{padding:30px 22px 24px}
  .eg-duo .tat .btn,.cta-zeile .btn,.eg-weg .tat .btn{width:100%;justify-content:center;text-align:center}
}
@media (max-width:620px){
  .quiz-in{padding:28px 16px 64px}
  .quiz-kopf{padding:13px 16px}
  .schritt-kopf{flex-wrap:wrap;gap:10px}
  .schritt-balken{flex-basis:100%}
  .stufe{font-size:15px;padding:12px 14px}
}

/* ---------- Unternehmertum lernen (/unternehmertum-lernen/, 29.09.2026) ----------
   Der Stundenplan mit der Leerstelle ist der Baustein der Kompass-Webinarseite
   (go.unternehmerkompass.de/webinar/), 1:1 übernommen: leeres Klassenzimmer,
   davor der Plan, in dem das Fach „Ein Unternehmen führen“ fehlt. Dazu die
   Gastgeber-Reihe und die Terminkarte, die auf den Kompass-Termin zeigt. */
.plan{position:relative;margin:0}
.plan-foto{position:relative;height:420px;border-radius:20px;overflow:hidden;
  background:url('/assets/bilder/schulfach_klassenzimmer.jpg') center 34%/cover no-repeat;
  border:1px solid rgba(255,255,255,.12);box-shadow:0 30px 70px rgba(4,16,22,.5)}
.plan-foto::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,20,25,.1) 0%,rgba(5,20,25,.25) 46%,rgba(5,20,25,.88) 100%)}
.plan-card{position:relative;z-index:2;margin:-64px 0 0 44px;
  background:linear-gradient(180deg,rgba(9,34,44,.95),rgba(5,20,25,.97));
  border:1px solid rgba(255,255,255,.16);border-radius:20px;padding:24px 24px 20px;
  backdrop-filter:blur(14px);box-shadow:0 30px 70px rgba(4,16,22,.6)}
.plan-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.12)}
.plan-kopf .t{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--fnt)}
.plan-grid{display:grid;grid-template-columns:46px repeat(4,1fr);gap:7px}
.plan-grid span{font-size:11.5px;padding:9px 6px;border-radius:7px;text-align:center;
  color:rgba(255,255,255,.5);background:rgba(255,255,255,.045);line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.plan-grid span.tag{background:none;font-weight:800;letter-spacing:.1em;font-size:10px;
  text-transform:uppercase;color:var(--fnt);padding-bottom:4px}
.plan-grid span.zeit{background:none;color:rgba(255,255,255,.3);font-size:10.5px;
  font-variant-numeric:tabular-nums}
.plan-grid .luecke{grid-column:2/-1;background:rgba(231,62,7,.09);
  border:1.5px dashed rgba(231,62,7,.6);color:var(--orange-l);font-weight:800;
  font-size:12.5px;letter-spacing:.02em;padding:13px 6px}
.plan-cap{margin-top:16px;font-size:13px;line-height:1.5;color:var(--fnt)}
.plan-cap b{color:#fff;font-weight:700}
.kopf-abstand{margin-top:48px}
.geschichte .flie p{font-size:17px}
.geschichte .zitat{margin-top:36px}
.geschichte .zahlen{margin-top:56px}
.gastgeber{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:28px}
.gastgeber .card{display:flex;align-items:center;gap:16px;padding:20px 22px}
.gastgeber img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none;
  border:2px solid rgba(242,103,34,.7);box-shadow:0 0 0 4px rgba(242,103,34,.12)}
.gastgeber b{display:block;font-size:16px;line-height:1.3}
.gastgeber span{display:block;font-size:11.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--orange-l);margin-top:5px}
.kp-termin{display:grid;grid-template-columns:1fr auto;gap:36px;align-items:center;
  margin-top:56px;padding:36px 40px;border-color:rgba(242,103,34,.35);
  background:linear-gradient(180deg,rgba(242,103,34,.10),rgba(255,255,255,.02))}
.kp-termin .tk-l{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--fnt)}
.kp-termin .wann{font-size:clamp(21px,2.4vw,27px);font-weight:800;margin-top:8px;line-height:1.25}
.kp-termin p{color:var(--mut);font-size:15px;line-height:1.65;margin-top:10px;max-width:56ch}
.kp-termin .tat{margin-top:0;flex-direction:column;align-items:stretch;gap:10px}
.kp-termin .form-hinweis{text-align:center;max-width:none}
.schluss{text-align:center}
.schluss .eyebrow{justify-content:center}
.schluss .eyebrow::before{display:none}
.schluss .sub{margin-left:auto;margin-right:auto}
.schluss .tat{justify-content:center}
@media (max-width:980px){
  .plan-grid{grid-template-columns:40px repeat(4,1fr);gap:5px}
  .plan-grid span{font-size:10px;padding:8px 3px}
  .plan-card{padding:20px 16px 16px;margin:-56px 0 0 16px}
  .plan-foto{height:250px}
  .gastgeber{grid-template-columns:1fr;max-width:520px}
  .kp-termin{grid-template-columns:1fr;gap:24px;padding:30px 24px}
}
@media (max-width:620px){
  .kp-termin .tat .btn,.schluss .tat .btn,.schluss .tat .btn-geist{width:100%;justify-content:center;text-align:center}
}