/* =========================================================
   GUIDO KOCH — Unterseiten (Impressum, Datenschutz, Kaboom)
   Baut auf css/style.css auf (Farben, Schriften, Buttons, Menü, Footer, Korn)
   und ergänzt nur das, was es auf den Unterseiten zusätzlich braucht.
   ========================================================= */

/* ---------- KOPF-KARTE (türkis, wie der Hero der Startseite – nur niedriger) ---------- */
.sub-hero{ padding:calc(25 * var(--u)) calc(25 * var(--u)) 0; }
.sub-card{ position:relative; height:calc(470 * var(--u)); background:var(--teal); overflow:hidden; }
.sub-card .hero-logo{ position:absolute; left:calc(28.3 * var(--u)); top:calc(24 * var(--u)); width:calc(386 * var(--u)); color:var(--white); z-index:2; }
.sub-eyebrow{ position:absolute; left:calc(34 * var(--u)); bottom:calc(178 * var(--u)); }
.sub-title{ position:absolute; left:calc(30 * var(--u)); bottom:calc(30 * var(--u));
  font-family:var(--f-display); font-weight:460; font-variation-settings:"opsz" 99,"SOFT" 0,"WONK" 0;
  font-size:calc(122 * var(--u)); line-height:calc(128.8 * var(--u)); letter-spacing:-.022em; white-space:nowrap; }

/* ---------- KOPF ohne Fläche: nur das Logo (Position wie auf der Startseite) ---------- */
.sub-top{ position:relative; height:calc(170 * var(--u)); max-width:calc(1440 * var(--u)); margin:0 auto; }
.sub-top .hero-logo{ left:calc(53.3 * var(--u)); top:calc(49 * var(--u)); }
.sub-h1{ font-family:var(--f-display); font-weight:460; font-variation-settings:"opsz" 99,"SOFT" 0,"WONK" 0;
  font-size:calc(90 * var(--u)); line-height:1; letter-spacing:-.022em; margin-bottom:calc(56 * var(--u)); }

/* ---------- TEXTSPALTE ---------- */
.sub-body{ width:calc(860 * var(--u)); margin:0 auto; padding:calc(40 * var(--u)) 0 calc(140 * var(--u));
  font-size:calc(20 * var(--u)); line-height:calc(31 * var(--u)); }
.sub-body h2{ font-family:var(--f-display); font-weight:460; font-variation-settings:"opsz" 60,"SOFT" 0,"WONK" 0;
  font-size:calc(36 * var(--u)); line-height:calc(42 * var(--u)); letter-spacing:-.015em; color:var(--teal);
  margin:calc(64 * var(--u)) 0 calc(16 * var(--u)); }
.sub-body h2:first-child{ margin-top:0; }
.sub-body h3{ font-family:var(--f-display); font-weight:480; font-variation-settings:"opsz" 40,"SOFT" 0,"WONK" 0;
  font-size:calc(25 * var(--u)); line-height:calc(31 * var(--u)); letter-spacing:-.01em; margin-bottom:calc(8 * var(--u)); }
.sub-body p{ margin-bottom:calc(16 * var(--u)); }
.sub-body ul{ margin:0 0 calc(16 * var(--u)) 1.1em; } .sub-body li{ margin-bottom:calc(4 * var(--u)); }
.sub-body a:not(.btn){ color:var(--teal); font-weight:500; background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat; transition:background-size .45s var(--ease); }
.sub-body a:not(.btn):hover{ background-size:100% 1px; }
.sub-body .muted{ color:rgba(255,255,255,.6); }
.sub-back{ margin-top:calc(70 * var(--u)); }
.sub-stand{ margin-top:calc(40 * var(--u)); font-size:calc(15 * var(--u)); letter-spacing:.02em; color:rgba(255,255,255,.55); }

/* ---------- KABOOM ---------- */
.kab-logo{ width:calc(420 * var(--u)); aspect-ratio:604/455; margin-bottom:calc(30 * var(--u)); }
.kab-logo img{ width:100%; height:100%; object-fit:contain; object-position:left center; }
.chips{ display:flex; flex-wrap:wrap; gap:calc(10 * var(--u)); margin-bottom:calc(50 * var(--u)); }
.chip{ font-size:calc(15 * var(--u)); line-height:1; letter-spacing:.06em; text-transform:uppercase; font-weight:500;
  border:1px solid rgba(255,255,255,.5); border-radius:var(--r); padding:calc(11 * var(--u)) calc(14 * var(--u)); }
.chip strong{ color:var(--teal); }
.lead{ font-family:var(--f-display); font-weight:460; font-variation-settings:"opsz" 72,"SOFT" 0,"WONK" 0;
  font-size:calc(50 * var(--u)); line-height:calc(56 * var(--u)); letter-spacing:-.02em; margin-bottom:calc(40 * var(--u)) !important; }
.kab-cards{ margin:0 0 calc(30 * var(--u)); }
.kab-cards img{ width:100%; height:auto; border-radius:var(--r); }
.sec{ border-top:.5px solid rgba(255,255,255,.5); padding-top:calc(26 * var(--u)); margin-top:calc(60 * var(--u)); }
.sec h2{ margin-top:0; }
ol.rounds{ list-style:none; counter-reset:r; margin:calc(10 * var(--u)) 0 0 !important; display:flex; flex-direction:column; gap:calc(16 * var(--u)); }
ol.rounds > li{ counter-increment:r; position:relative; margin:0; padding:calc(22 * var(--u)) calc(26 * var(--u)) calc(22 * var(--u)) calc(76 * var(--u));
  background:rgba(255,255,255,.05); border-radius:var(--r); }
ol.rounds > li::before{ content:counter(r); position:absolute; left:calc(26 * var(--u)); top:calc(16 * var(--u));
  font-family:var(--f-display); font-weight:460; font-size:calc(38 * var(--u)); line-height:1; color:var(--teal); }
ol.rounds > li p:last-child{ margin-bottom:0; }
ol.rounds .kaboom{ background:var(--teal); }
ol.rounds .kaboom::before{ color:var(--white); }
.note{ font-size:calc(17 * var(--u)); line-height:calc(26 * var(--u)); color:rgba(255,255,255,.65); border-left:2px solid var(--teal); padding-left:calc(14 * var(--u)); }
ul.choices{ list-style:none; margin:0 !important; }
ul.choices li{ position:relative; padding-left:1.2em; }
ul.choices li::before{ content:"›"; position:absolute; left:0; color:var(--teal); font-weight:700; }
dl.actions{ display:grid; grid-template-columns:auto 1fr; gap:calc(10 * var(--u)) calc(26 * var(--u)); }
dl.actions dt{ font-family:var(--f-display); font-weight:480; font-size:calc(25 * var(--u)); color:var(--teal); }
ul.special{ list-style:none; margin:0 !important; display:flex; flex-direction:column; gap:calc(14 * var(--u)); }
ul.special li{ margin:0; padding:calc(20 * var(--u)) calc(24 * var(--u)); background:rgba(255,255,255,.05); border-radius:var(--r); }
ul.special b{ color:var(--teal); }
.outro{ margin-top:calc(90 * var(--u)); }
.outro .fun{ font-family:var(--f-display); font-weight:460; font-variation-settings:"opsz" 99,"SOFT" 0,"WONK" 0; font-size:calc(90 * var(--u)); line-height:1; letter-spacing:-.022em; color:var(--teal); }
.outro .ki{ display:block; margin-top:calc(16 * var(--u)); font-size:calc(15 * var(--u)); color:rgba(255,255,255,.55); }

/* sanftes Einblenden beim Scrollen (aus bei „Bewegung reduzieren“) */
.js .reveal{ opacity:0; transform:translateY(30px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.js .reveal.in, .rm .reveal{ opacity:1; transform:none; }

/* Menü öffnet sich auf den Unterseiten per CSS statt per GSAP */
.dd{ transition:clip-path .55s var(--ease), visibility 0s linear .55s; }
.dd.open{ clip-path:inset(0 0 0% 0 round 5px); transition:clip-path .55s var(--ease), visibility 0s; }

/* ---------- MOBIL ---------- */
@media (max-width:900px){
  .sub-hero{ padding:10px 10px 0; }
  .sub-card{ height:auto; min-height:min(62svh, 460px); display:flex; flex-direction:column; justify-content:flex-end; padding:110px var(--m) 26px; }
  .sub-card .hero-logo{ left:var(--m); top:18px; width:min(118px,30vw); }
  .sub-eyebrow, .sub-title{ position:static; }
  .sub-eyebrow{ font-size:12px; line-height:16px; margin-bottom:10px; }
  .sub-title{ font-size:clamp(40px,12vw,88px); line-height:1.05; white-space:normal; overflow-wrap:anywhere; hyphens:auto; }
  .sub-top{ height:90px; }
  .sub-top .hero-logo{ left:calc(10px + var(--m)); top:28px; }
  .sub-h1{ font-size:clamp(44px,12vw,72px); margin-bottom:28px; }
  .sub-body{ width:auto; padding:20px var(--m) 80px; font-size:17px; line-height:27px; }
  .sub-body h2{ font-size:26px; line-height:31px; margin:44px 0 10px; }
  .sub-body h3{ font-size:20px; line-height:26px; }
  .sub-body p, .sub-body ul{ margin-bottom:14px; }
  .sub-back{ margin-top:48px; }
  .sub-stand{ font-size:13px; }
  .kab-logo{ width:min(300px,80%); }
  .chip{ font-size:12px; padding:9px 11px; }
  .chips{ gap:8px; margin-bottom:36px; }
  .lead{ font-size:32px; line-height:37px; }
  .sec{ margin-top:44px; padding-top:20px; }
  ol.rounds{ gap:12px; }
  ol.rounds > li{ padding:18px 18px 18px 54px; }
  ol.rounds > li::before{ left:18px; top:14px; font-size:28px; }
  .note{ font-size:15px; line-height:23px; }
  dl.actions{ grid-template-columns:1fr; gap:2px 0; } dl.actions dt{ font-size:20px; } dl.actions dd{ margin-bottom:10px; }
  ul.special li{ padding:16px 18px; }
  .outro{ margin-top:60px; } .outro .fun{ font-size:56px; } .outro .ki{ font-size:13px; }
}