/* ═══════════════════════════════════════════════════════════════
   JadeHawk Capital · CI-Standard 2026
   Farben und Schriften sind verbindlich, siehe recherche/kunde/CI-Standard_2026.md
   Sandakzent #B9A06A bewusst NICHT enthalten: laut CI nur für Präsentationen.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* CI 2026 */
  --forest:#12362B;          /* Dark Forest: Marke, Flächen, Überschriften */
  --tint:#DEE3E1;            /* Tintkante: Haarlinien */
  --ink:#232323;             /* Fließtext */
  --paper:#FFFFFF;

  /* abgeleitete Tint-Leiter aus dem Hausstil, dort „pending sign-off" */
  --forest-2:#2E5A4B;
  --forest-3:#5E8375;
  --tint-2:#A8BEB5;
  --tint-3:#C7D5CF;
  --tint-4:#E3EAE6;
  --tint-5:#F1F4F2;

  --display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --text:"Helvetica Neue",Helvetica,Arial,sans-serif;   /* CI-Vorgabe, kein Webfont nötig */

  --w:1200px;
  --pad:40px;
}

/* ── Muster der dunklen Flächen: Origami-Facetten ─────────────────
   Gewählt am 25.09.2026. Nimmt das Logo auf, das aus gefalteten Dreiecken
   besteht: große, sehr schwach abgesetzte Flächen wie gefaltetes Papier.
   Gilt für Hero, Seitenköpfe, Slogan-Band und dunkle Abschnitte.

   Zum Ändern nur diese eine Regel anfassen. Vier Alternativen liegen in
   entwurf/muster.html, darunter „ohne Muster": dafür den Block löschen.
   Reines CSS, keine Bilddateien, keine fremden Quellen. */
.hero::before,
.pagehead::before,
.slogan-band::before,
section.dark::before{
  content:"";position:absolute;inset:-14%;pointer-events:none;
  background:
    linear-gradient(118deg, transparent 0 34%, rgba(222,227,225,.045) 34% 52%, transparent 52%),
    linear-gradient(-142deg, transparent 0 46%, rgba(222,227,225,.035) 46% 71%, transparent 71%),
    linear-gradient(64deg, transparent 0 62%, rgba(0,0,0,.10) 62% 100%);
  /* Die Flächen driften sehr langsam, wie Licht auf gefaltetem Papier. Dafür
     ragt das Muster über den Rand hinaus (inset -14 %), sonst würden beim
     Verschieben Kanten sichtbar. Ein Umlauf dauert fast eine Minute. */
  animation:facetten 52s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes facetten{
  from{transform:translate3d(0,0,0) rotate(0deg)}
  to{transform:translate3d(-2.4%,1.6%,0) rotate(.7deg)}
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--text);color:var(--ink);background:var(--paper);line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--forest-3);outline-offset:3px}
.wrap{max-width:var(--w);margin:0 auto;padding:0 var(--pad)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:20px;top:20px;z-index:99;background:var(--paper);color:var(--forest);padding:12px 18px;border:1px solid var(--forest)}

/* ── Typografie ──────────────────────────────────────────────── */
h1,h2,h3{font-family:var(--display);font-weight:500;line-height:1.05;color:var(--forest);letter-spacing:-.01em}
h1{font-size:clamp(42px,5.6vw,84px)}
h2{font-size:clamp(32px,3.8vw,54px)}
h3{font-size:26px;line-height:1.2}
.lede{font-size:19px;line-height:1.6;max-width:36em}
p+p{margin-top:16px}
.on-dark,.on-dark h1,.on-dark h2,.on-dark h3{color:var(--paper)}
.on-dark .lede{color:var(--tint-4)}
.hair{border:0;border-top:1px solid var(--tint)}

/* Kicker: gesperrte Versalien in Cormorant, wie im Briefkopf */
.kicker{font-family:var(--display);font-weight:500;letter-spacing:.3em;text-transform:uppercase;font-size:13px;color:var(--forest-3)}
.kicker.on-dark{color:var(--tint-2)}
.kicker .num{color:var(--tint-2);margin-right:.7em}
.kicker.rule{display:flex;align-items:center;gap:18px}
.kicker.rule::before{content:"";width:48px;height:1px;background:currentColor;opacity:.6;flex:none}

/* ── Knöpfe ──────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:14px;padding:16px 26px;border:1px solid currentColor;font-size:15px;letter-spacing:.02em;transition:background .25s,color .25s;background:none;cursor:pointer;font-family:inherit}
.btn .arr{transition:transform .25s}
.btn:hover .arr{transform:translateX(6px)}
.btn.auf-dunkel{color:var(--paper)}
.btn.auf-dunkel:hover{background:var(--paper);color:var(--forest)}
.btn.auf-hell{color:var(--forest)}
.btn.auf-hell:hover{background:var(--forest);color:var(--paper)}
.btn.solid{background:var(--forest);color:var(--paper);border-color:var(--forest)}
.btn.solid:hover{background:var(--forest-2);border-color:var(--forest-2)}

/* ── Hinweisstreifen der Vorschau ────────────────────────────────
   Erscheint nur, wenn mit `node build.mjs --vorschau` gebaut wurde.
   Steht bewusst ganz oben und schiebt die Seite nach unten, damit er
   nicht übersehen wird. */
/* Der Streifen liegt fest am oberen Rand und bleibt beim Scrollen stehen.
   Der Kopfbereich ist absolut positioniert und bezieht sich nicht auf das
   Innenabstand des body, deshalb wird er zusätzlich um dieselbe Höhe
   nach unten gesetzt. --banner-h hält beides zusammen. */
:root{--banner-h:38px}
.vorschau-streifen{position:fixed;top:0;left:0;right:0;z-index:40;height:var(--banner-h);display:flex;align-items:center;justify-content:center;gap:10px;background:#8B3A2F;color:#fff;font-size:13px;line-height:1.3;padding:0 16px;text-align:center}
.vorschau-streifen b{font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:11.5px;flex:none}
body:has(.vorschau-streifen){padding-top:var(--banner-h)}
body:has(.vorschau-streifen) header{top:var(--banner-h)}
@media (max-width:820px){
  :root{--banner-h:52px}
  .vorschau-streifen{flex-direction:column;gap:1px;justify-content:center;font-size:11.5px}
}
@media print{
  .vorschau-streifen{display:none}
  body:has(.vorschau-streifen){padding-top:0}
}

/* ── Kopfzeile ───────────────────────────────────────────────────
   Immer fest am oberen Rand. Am Seitenanfang durchsichtig über dem dunklen
   Kopf, nach kurzem Scrollweg (html.scrolled, gesetzt von site.js) mit
   Hintergrund und etwas niedriger. Fest statt absolut, damit beim Umschalten
   nichts springt: nur Farbe und Höhe ändern sich, nie die Position. */
header{position:fixed;inset:0 0 auto 0;z-index:20;border-bottom:1px solid transparent;transition:background-color .4s,box-shadow .4s,border-color .4s}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:30px;height:96px;transition:height .4s cubic-bezier(.2,.7,.2,1)}
.brand img{height:64px;width:auto;transition:height .4s cubic-bezier(.2,.7,.2,1)}
/* Helle Linie unter der dunklen Kopfzeile (Jans Punkt 1): ohne sie wirkte es, als
   verschwinde der Text beim Scrollen hinter dem Grün, weil Kopf und Seitenkopf
   dieselbe Farbe haben. */
html.scrolled header{background-color:var(--forest);border-bottom-color:rgba(222,227,225,.32);box-shadow:0 14px 34px -22px rgba(0,0,0,.55)}
html.scrolled header .wrap{height:70px}
html.scrolled .brand img{height:46px}
html.scrolled header nav.main,html.scrolled header .lang{color:var(--paper)}
nav.main{display:flex;align-items:center;gap:34px;font-size:15px}
nav.main a{position:relative;padding:6px 0;white-space:nowrap}
nav.main a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:currentColor;transition:right .25s}
nav.main a:hover::after,nav.main a[aria-current]::after{right:0}
header.ton-dunkel nav.main,header.ton-dunkel .lang{color:var(--paper)}
header.ton-hell nav.main,header.ton-hell .lang{color:var(--forest)}

/* Sprachumschalter */
.lang{display:flex;align-items:center;gap:10px;font-size:13px;letter-spacing:.06em}
.lang a{opacity:.6;transition:opacity .2s}
.lang a:hover{opacity:1}
.lang .sep{opacity:.35}
.lang [aria-current]{opacity:1;font-weight:700}

/* Menüknopf, nur mobil */
.burger{display:none;background:none;border:0;padding:10px;cursor:pointer;color:inherit}
.burger span{display:block;width:26px;height:1.5px;background:currentColor;margin:6px 0;transition:transform .25s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ── Hero ────────────────────────────────────────────────────── */
.hero{position:relative;background:var(--forest);color:var(--paper);display:flex;align-items:center;overflow:hidden;padding:190px 0 190px}
/* Muster der dunklen Flächen: siehe „Origami-Facetten" weiter unten.
   Der Hero brauchte früher zusätzlich einen Verlauf nach rechts, der ist
   mit den Facetten überflüssig geworden. */
.hero .wrap{position:relative;display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
.hero .kicker{margin-bottom:34px}
.hero h1{margin-bottom:30px}
.hero h1 em{font-style:italic;font-weight:400;color:var(--tint-3)}
.hero .lede{color:var(--tint-4);margin-bottom:44px}
.hero .actions{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.hero .tel{font-size:15px;color:var(--tint-2)}
.hero .tel b{color:var(--paper);font-weight:500}
.hawk{position:relative;justify-self:end;width:min(520px,100%);aspect-ratio:1/.6;overflow:hidden;opacity:.92;filter:drop-shadow(0 30px 60px rgba(0,0,0,.35))}
.hawk img{width:100%;height:100%;object-fit:cover;object-position:top}
.hawk::after{content:"";position:absolute;inset:auto 10% -6% 10%;height:1px;background:linear-gradient(90deg,transparent,var(--tint-2),transparent)}

/* Kopfbereich der Unterseiten, ohne Vogel */
.pagehead{position:relative;background:var(--forest);color:var(--paper);padding:180px 0 110px;overflow:hidden}
.pagehead .wrap{position:relative;max-width:1000px}
.pagehead .kicker{margin-bottom:30px}
.pagehead h1{font-size:clamp(36px,4.6vw,68px);max-width:20em;margin-bottom:28px}

/* Einstiegs-Choreografie, einmal beim Laden */
.rise{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.rise-1{animation-delay:.08s}.rise-2{animation-delay:.16s}.rise-3{animation-delay:.26s}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .rise{animation:none}
  html{scroll-behavior:auto}
  *{transition-duration:.01ms!important;animation:none!important}
  .hero::before,.pagehead::before,.slogan-band::before,section.dark::before{inset:0}
}

/* ── Slogan-Banner ───────────────────────────────────────────────
   Der Kicker der Marke, groß. CI-Vorgabe: zweizeilig, ohne Bindestrich,
   beide Zeilen auf gleiche Breite gesperrt, links und rechts bündig.
   Umgesetzt als SVG mit textLength, damit die Breiten exakt gleich sind,
   unabhängig von Schriftgröße und Fallback-Schrift. */
.slogan-band{background:var(--forest);color:var(--paper);padding:104px 0;position:relative;overflow:hidden}
.slogan-band .wrap{position:relative;display:grid;grid-template-columns:1.25fr .75fr;gap:70px;align-items:end}
.slogan{display:block;width:100%;max-width:640px}
.slogan text{font-family:var(--display);font-weight:500;fill:var(--paper)}
.slogan .zeile2{fill:var(--tint-3);font-style:italic}
.slogan-band .satz{font-size:18px;line-height:1.6;color:var(--tint-4);border-left:1px solid rgba(222,227,225,.35);padding-left:32px;max-width:26em}

/* dieselbe Marke klein, für die Fußzeile */
.slogan.klein{max-width:190px}
.slogan.klein text{fill:var(--tint-2)}
.slogan.klein .zeile2{fill:var(--tint-3)}

/* ── Durchschau-Kacheln ──────────────────────────────────────── */
.durchschau{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--tint);border:1px solid var(--tint);margin-top:52px}
.durchschau .z{background:var(--paper);padding:34px 30px}
.durchschau .v{font-family:var(--display);font-size:clamp(32px,3.2vw,44px);font-weight:500;color:var(--forest);line-height:1;letter-spacing:-.02em}
.durchschau .v small{font-size:.45em;color:var(--forest-3);margin-left:4px}
.durchschau .l{margin-top:10px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--forest-3)}
.durchschau-note{margin-top:22px;font-size:12.5px;line-height:1.6;color:var(--forest-3);max-width:62em}

/* ── Kennzahlen-Band ─────────────────────────────────────────── */
.kpis{position:relative;z-index:5;margin-top:-108px}
.kpis .band{display:grid;grid-template-columns:repeat(4,1fr);background:var(--paper);border:1px solid var(--tint);box-shadow:0 40px 80px -34px rgba(18,54,43,.35)}
.kpi{padding:36px 32px}
.kpi+.kpi{border-left:1px solid var(--tint)}
.kpi .v{font-family:var(--display);font-size:clamp(38px,4vw,54px);font-weight:500;color:var(--forest);line-height:1;letter-spacing:-.02em}
.kpi .v small{font-size:.48em;color:var(--forest-3);margin-left:5px;letter-spacing:0}
.kpi .l{margin-top:12px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--forest-3);line-height:1.5}
.kpis .note{padding:16px 2px 0;font-size:12.5px;color:var(--forest-3)}
.kpis .note b{font-weight:400;color:var(--ink)}

/* Kennzahlen dunkel, für die Insti-Seite */
.kpis-dark{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(222,227,225,.2);border:1px solid rgba(222,227,225,.2);margin-top:54px}
.kpis-dark .kpi{background:var(--forest);padding:32px 28px}
.kpis-dark .kpi+.kpi{border-left:0}
.kpis-dark .v{color:var(--paper);font-size:clamp(34px,3.4vw,46px)}
.kpis-dark .v small{color:var(--tint-2)}
.kpis-dark .l{color:var(--tint-2)}

/* ── Abschnitte ──────────────────────────────────────────────── */
section.block{padding:128px 0}
section.block.tight{padding:96px 0}
.dark{background:var(--forest);color:var(--paper);position:relative;overflow:hidden}
.dark .wrap{position:relative}
.soft{background:var(--tint-5)}

/* Abschnittskopf: Titel links, Text rechts. Oben bündig (Jans Punkt 10, 26.09.2026),
   vorher standen die Titel unten bündig unter dem Textanfang. */
.head{display:grid;grid-template-columns:1fr 1.35fr;gap:60px;align-items:start;margin-bottom:68px}
.head .kicker{margin-bottom:22px}

/* Ablauf in drei Schritten */
.steps{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--tint)}
.step{position:relative;padding:52px 40px 52px 0}
.step+.step{border-left:1px solid var(--tint);padding-left:40px}
.step .n{font-family:var(--display);font-size:118px;line-height:.8;color:var(--tint-4);position:absolute;top:32px;right:26px;font-weight:400;user-select:none;pointer-events:none}
.step h3{position:relative;margin-bottom:14px}
.step p{position:relative;max-width:26em}
.step .dur{margin-top:22px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--forest-3)}

/* Was wir kaufen */
.split{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.list{list-style:none;border-top:1px solid var(--forest)}
.list li{display:grid;grid-template-columns:42px 1fr auto;gap:20px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--tint);font-size:22px;font-family:var(--display);font-weight:500;color:var(--forest);transition:padding-left .35s cubic-bezier(.2,.7,.2,1),border-color .35s}
.list li:hover{padding-left:12px;border-bottom-color:var(--forest-3)}
.list li:hover i{color:var(--forest-3)}
.list li i{transition:color .35s}
.list li i{font-style:normal;font-size:13px;letter-spacing:.2em;color:var(--tint-2);font-family:var(--text)}
.list li span{font-family:var(--text);font-size:14px;color:var(--forest-3);text-align:right}

/* Textspalten der Insti-Seite */
.prose{max-width:38em}
.prose h2{margin-bottom:24px}
.prose p{font-size:17px;line-height:1.65}
.lead-in{display:block;font-family:var(--display);font-size:21px;font-weight:500;color:var(--forest);margin-bottom:4px}
.dark .lead-in{color:var(--tint-2)}
.defs{border-top:1px solid var(--tint);margin-top:30px}
.def{padding:24px 0;border-bottom:1px solid var(--tint)}
.def p{margin:0;max-width:44em}
.dark .defs,.dark .def{border-color:rgba(222,227,225,.2)}

/* Zwei Karten nebeneinander */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:44px}
/* Drei gleich wichtige Wege nebeneinander, z. B. auf der Fehlerseite. Im
   Zweierraster stünde die dritte Karte allein in einer zweiten Reihe. */
.cards.drei{grid-template-columns:repeat(3,1fr);gap:24px}
.card{border:1px solid var(--tint);padding:34px 36px;position:relative;transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
.card::after{content:"";position:absolute;left:0;top:0;width:3px;height:100%;background:var(--forest);transition:width .3s}
.card h3{font-size:22px;margin-bottom:12px}
.card p{font-size:15.5px}
.dark .card{border-color:rgba(222,227,225,.2)}
.dark .card::after{background:var(--tint-2)}

/* Karte mit Verweis */
.linkcard{border:1px solid var(--tint);padding:34px 36px;position:relative;background:var(--paper);transition:transform .4s cubic-bezier(.2,.7,.2,1),box-shadow .4s}
.linkcard::after{content:"";position:absolute;left:0;top:0;width:4px;height:100%;background:var(--forest);transition:width .3s}
.linkcard .kicker{margin-bottom:16px}
.linkcard h3{margin-bottom:12px}
.linkcard p{font-size:15px;margin-bottom:24px}
.linkcard .btn{font-size:14px;padding:13px 20px}

/* Abschluss-Aufforderung */
.cta .wrap{display:grid;grid-template-columns:1.2fr .8fr;gap:60px;align-items:center}
.cta h2{margin-bottom:22px}
.cta .lede{margin-bottom:38px}
.cta .side{border-left:1px solid var(--tint-2);padding-left:40px;font-size:16px;line-height:1.9}
.cta .side b{display:block;font-family:var(--display);font-size:22px;font-weight:500;color:var(--forest);margin-bottom:6px}
.dark .cta .side{border-color:rgba(222,227,225,.3)}
.dark .cta .side b{color:var(--paper)}

/* ── Investor Relations ──────────────────────────────────────── */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Disclaimer-Schranke */
.disclaimer{max-width:56em}
.disclaimer p{font-size:15px;line-height:1.65;margin-bottom:16px;color:var(--ink)}
.disclaimer p.hervor{border-left:3px solid var(--forest);padding-left:24px;color:var(--forest);font-size:16px}
.disclaimer p.vorrang{font-size:13px;color:var(--forest-3);font-style:italic}
.disclaimer-aktionen{display:flex;gap:16px;margin-top:34px;flex-wrap:wrap}

/* Eckdaten-Liste */
.eckdaten{border-top:1px solid var(--forest)}
.eckdaten .zeile{display:grid;grid-template-columns:20em 1fr;gap:30px;padding:18px 0;border-bottom:1px solid var(--tint);align-items:baseline}
.eckdaten dt{font-family:var(--display);font-size:18px;font-weight:500;color:var(--forest);line-height:1.3}
.eckdaten dd{font-size:15px;line-height:1.6}
.eckdaten dd span{display:block}
.eckdaten dd span+span{margin-top:6px;padding-left:18px;position:relative}
.eckdaten dd span+span::before{content:"";position:absolute;left:0;top:.7em;width:8px;height:1px;background:var(--forest-3)}

/* Dokumentenlisten */
.dok-gruppe+.dok-gruppe{margin-top:52px}
.dok-gruppe h3{font-size:22px;margin-bottom:6px;padding-bottom:14px;border-bottom:1px solid var(--forest)}
.dok-liste{list-style:none}
.dok-liste li{border-bottom:1px solid var(--tint)}
.dok-liste a{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:baseline;padding:16px 0;transition:padding-left .2s,color .2s}
.dok-liste a:hover{padding-left:12px;color:var(--forest)}
.dok-titel{font-size:16px;line-height:1.45;max-width:58em}
.dok-meta{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--forest-3);white-space:nowrap}
.dok-liste.extern a::after{content:"↗";margin-left:6px;color:var(--forest-3);font-size:13px}

/* Passwortschranke einer Dokumentengruppe */
.dok-schutz{border:1px solid var(--tint);background:var(--paper);padding:28px 30px;margin-top:18px;max-width:38em}
.dok-schutz p{font-size:14.5px;margin-bottom:16px}
.dok-schutz p.fehler{color:#8B3A2F}
.dok-schutz form{display:flex;gap:12px;flex-wrap:wrap}
.dok-schutz input{flex:1 1 15em;padding:14px 16px;border:1px solid var(--tint);font-family:inherit;font-size:15px;background:var(--paper)}
.dok-schutz input:focus{outline:2px solid var(--forest-3);outline-offset:1px;border-color:var(--forest-3)}

/* Finanzkalender */
.kalender{border-top:1px solid rgba(222,227,225,.3)}
.kalender .zeile{display:grid;grid-template-columns:16em 1fr;gap:30px;padding:20px 0;border-bottom:1px solid rgba(222,227,225,.2);align-items:baseline}
.kalender dt{font-family:var(--display);font-size:22px;font-weight:500;color:var(--paper)}
.kalender dd{font-size:15.5px;color:var(--tint-4)}

@media (max-width:1000px){
  .eckdaten .zeile,.kalender .zeile{grid-template-columns:1fr;gap:6px}
  .dok-liste a{grid-template-columns:1fr;gap:4px}
  .dok-meta{white-space:normal}
  .feldpaar{grid-template-columns:1fr;gap:0}
}

/* ── Formular ────────────────────────────────────────────────── */
.formular{max-width:44em}
.feldpaar{display:grid;grid-template-columns:1fr 1fr;gap:0 24px}
.feld{margin-bottom:22px}
.feld label{display:block;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--forest-3);margin-bottom:8px}
.feld .pflicht{color:var(--forest-2)}
.feld input,.feld textarea{width:100%;padding:14px 16px;border:1px solid var(--tint);background:var(--paper);font-family:inherit;font-size:16px;color:var(--ink);transition:border-color .2s}
.feld input:hover,.feld textarea:hover{border-color:var(--tint-2)}
.feld input:focus,.feld textarea:focus{outline:2px solid var(--forest-3);outline-offset:1px;border-color:var(--forest-3)}
.feld input[aria-invalid],.feld textarea[aria-invalid]{border-color:#8B3A2F;background:#fdf7f6}
.feld textarea{resize:vertical;min-height:9em;line-height:1.55}
.feld.einwilligung label{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;text-transform:none;letter-spacing:0;font-size:14.5px;color:var(--ink);line-height:1.5}
.feld.einwilligung input{width:18px;height:18px;margin-top:2px;accent-color:var(--forest)}
.feld.pflichtnote{font-size:13px;color:var(--forest-3);margin-bottom:26px}
/* Honigtopf: für Menschen unsichtbar, aber nicht display:none, sonst füllen
   ihn manche Maschinen gerade deshalb nicht aus. */
.honigtopf{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.hinweis{border:1px solid var(--tint);padding:30px 32px;position:relative;max-width:44em}
.hinweis::after{content:"";position:absolute;left:0;top:0;width:3px;height:100%}
.hinweis.erfolg::after{background:var(--forest)}
.hinweis.problem::after{background:#8B3A2F}
.hinweis.problem p{color:#8B3A2F}
.hinweis+.formular{margin-top:30px}

/* ── Rechtstexte ─────────────────────────────────────────────── */
.rechtstext{max-width:46em}
.rechtstext h3{font-size:24px;margin:44px 0 14px;padding-top:26px;border-top:1px solid var(--tint)}
.rechtstext h3:first-child{margin-top:0;padding-top:0;border-top:0}
.rechtstext h4{font-family:var(--display);font-size:19px;font-weight:500;color:var(--forest);margin:28px 0 10px}
.rechtstext p{font-size:15.5px;line-height:1.68;margin-bottom:13px}
.rechtstext p.punkt{padding-left:20px;position:relative}
.rechtstext p.punkt::before{content:"";position:absolute;left:0;top:.72em;width:9px;height:1px;background:var(--forest-3)}
.rechtstext p.vorrang{font-style:italic;color:var(--forest-3);border-left:3px solid var(--tint-2);padding-left:20px;margin-bottom:30px}

/* ── Fußzeile ────────────────────────────────────────────────── */
footer{background:var(--forest);color:var(--tint-3);padding:64px 0 36px;font-size:14px}
footer .wrap{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:start}
footer .addr{line-height:1.85}
footer .addr b{color:var(--paper);font-family:var(--display);font-size:20px;font-weight:500;display:block;margin-bottom:8px}
footer nav{display:flex;flex-wrap:wrap;gap:12px 28px;font-size:14px;justify-content:flex-end;max-width:36em}
footer nav a:hover{color:var(--paper)}
footer .copy{grid-column:1/-1;border-top:1px solid rgba(222,227,225,.2);margin-top:14px;padding-top:22px;font-size:12px;color:var(--tint-2);display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}

/* ── Schmale Bildschirme ─────────────────────────────────────── */
@media (max-width:1000px){
  :root{--pad:26px}
  .hero{padding:150px 0 150px}
  .hero .wrap,.head,.split,.cta .wrap,footer .wrap{grid-template-columns:1fr}
  .hawk{display:none}
  .kpis{margin-top:-80px}
  .kpis .band{grid-template-columns:1fr 1fr}
  .kpi:nth-child(odd){border-left:0}
  .kpi:nth-child(n+3){border-top:1px solid var(--tint)}
  .kpis-dark{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr}
  .step,.step+.step{padding:40px 0;border-left:0;border-bottom:1px solid var(--tint)}
  .cards,.cards.drei{grid-template-columns:1fr}
  .cta .side{border-left:0;border-top:1px solid var(--tint-2);padding:26px 0 0}
  footer nav{justify-content:flex-start}
  .slogan-band{padding:72px 0}
  .slogan-band .wrap{grid-template-columns:1fr;gap:38px}
  .slogan-band .satz{border-left:0;border-top:1px solid rgba(222,227,225,.35);padding:24px 0 0}
  .durchschau{grid-template-columns:1fr 1fr}

  /* Navigation einklappen */
  .burger{display:block}
  nav.main{position:fixed;inset:0 0 0 auto;width:min(360px,86vw);background:var(--forest);color:var(--paper);flex-direction:column;align-items:flex-start;justify-content:center;gap:18px;padding:40px;font-size:22px;font-family:var(--display);transform:translateX(100%);transition:transform .3s cubic-bezier(.2,.7,.2,1);z-index:30}
  nav.main[data-open="true"]{transform:none;box-shadow:-30px 0 60px rgba(0,0,0,.3)}
  header.ton-hell nav.main{color:var(--paper)}
  header .wrap{height:80px}
  .brand img{height:52px}
}
@media (max-width:560px){
  .kpis .band{grid-template-columns:1fr}
  .kpi+.kpi{border-left:0;border-top:1px solid var(--tint)}
  .kpi:nth-child(n+3){border-top:1px solid var(--tint)}
  .kpis-dark{grid-template-columns:1fr}
  .list li{grid-template-columns:32px 1fr;font-size:19px}
  .list li span{grid-column:2;text-align:left;margin-top:2px}
  .durchschau{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════════
   Auffrischung vom 25.09.2026: Bewegung und Tiefe
   Vier Bausteine, alle ohne fremde Bibliotheken, alle abschaltbar über die
   Systemeinstellung „Bewegung reduzieren". Zusammenspiel mit assets/js/site.js.
   Die Sicherung des Stands davor liegt in site_backup_2026-09-25_225039_*.
   ═══════════════════════════════════════════════════════════════ */

/* ── Abstände als Klassen ─────────────────────────────────────────
   Ersetzen die früheren style="…"-Attribute in den Vorlagen. Die CSP erlaubt
   nur Stylesheets vom eigenen Server (style-src 'self'), Inline-Angaben werden
   vom Browser still verworfen. Die Werte sind die, die vorher inline standen. */
.mt-18{margin-top:18px}.mt-22{margin-top:22px}.mt-24{margin-top:24px}.mt-26{margin-top:26px}
.mt-28{margin-top:28px}.mt-34{margin-top:34px}.mt-36{margin-top:36px}.mt-40{margin-top:40px}.mt-44{margin-top:44px}
.mb-22{margin-bottom:22px}.mb-26{margin-bottom:26px}.mb-28{margin-bottom:28px}
.pagehead.kurz{padding-bottom:76px}
.pagehead h1.kleiner{font-size:clamp(30px,3.4vw,46px)}
.lede.schmal{max-width:34em}
.split.weit{gap:70px}
.hinweis h2{font-size:28px;margin-bottom:12px}
.dark .prose p,.dark .card p{color:var(--tint-4)}
.dark .fussnote{margin-top:30px;font-size:13px;color:var(--tint-2);max-width:60em}

/* ── Erscheinen beim Scrollen ─────────────────────────────────────
   Nur wirksam, wenn site.js html.js gesetzt hat. Ohne Skript ist alles da.
   .rv gleitet als Ganzes ein, .rv-gruppe lässt die Kinder nacheinander
   kommen. site.js setzt .in, sobald das Ziel ins Bild rückt. */
html.js .rv,
html.js .rv-gruppe>*{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
html.js .rv.in,
html.js .rv-gruppe.in>*{opacity:1;transform:none}
.rv-gruppe>:nth-child(2){transition-delay:.09s}
.rv-gruppe>:nth-child(3){transition-delay:.18s}
.rv-gruppe>:nth-child(4){transition-delay:.27s}
.rv-gruppe>:nth-child(5){transition-delay:.36s}
.rv-gruppe>:nth-child(6){transition-delay:.45s}
.rv-gruppe>:nth-child(n+7){transition-delay:.52s}
/* Das Kennzahlen-Band gehört zur Lade-Choreografie des Hero, nicht an den
   Scroll-Beobachter: es liegt beim Laden am unteren Bildrand, mal knapp
   drin, mal knapp draußen, und soll in jedem Fall nach dem Hero erscheinen. */
.kpis .kpi{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.kpis .kpi:nth-child(1){animation-delay:.48s}
.kpis .kpi:nth-child(2){animation-delay:.57s}
.kpis .kpi:nth-child(3){animation-delay:.66s}
.kpis .kpi:nth-child(4){animation-delay:.75s}
.kpis .note{animation:rise .9s .9s cubic-bezier(.2,.7,.2,1) both}

/* Das Slogan-Band: die Zeilen sperren sich auf, wenn das Band ins Bild kommt */
.rv-slogan .slogan text{transform-box:fill-box;transform-origin:center}
html.js .rv-slogan .slogan text{opacity:0;transform:scaleX(.9);transition:opacity 1.1s cubic-bezier(.2,.7,.2,1),transform 1.3s cubic-bezier(.2,.7,.2,1)}
html.js .rv-slogan .slogan .zeile2{transition-delay:.18s}
html.js .rv-slogan .satz{opacity:0;transform:translateX(18px);transition:opacity .9s .35s,transform .9s .35s cubic-bezier(.2,.7,.2,1)}
html.js .rv-slogan.in .slogan text,
html.js .rv-slogan.in .satz{opacity:1;transform:none}

/* ── Tiefe bei Berührung ──────────────────────────────────────────── */
.card:hover,.linkcard:hover{transform:translateY(-5px);box-shadow:0 34px 54px -32px rgba(18,54,43,.42)}
.card:hover::after,.linkcard:hover::after{width:7px}
.dark .card:hover{box-shadow:0 34px 54px -30px rgba(0,0,0,.7)}
.kpi{transition:background-color .35s}
.kpi:hover{background-color:var(--tint-5)}
.step{transition:background-color .35s}
.step .n{transition:color .45s}
.step:hover .n{color:var(--tint-3)}
.durchschau .z{transition:background-color .35s}
.durchschau .z:hover{background-color:var(--tint-5)}
.eckdaten .zeile,.kalender .zeile{transition:background-color .3s,padding-left .3s}
.eckdaten .zeile:hover{padding-left:12px;background-color:var(--tint-5)}
.kalender .zeile:hover{padding-left:12px;background-color:rgba(222,227,225,.06)}
.dok-liste a{position:relative}
.dok-liste a::before{content:"";position:absolute;left:0;top:50%;width:0;height:1px;background:var(--forest);transition:width .3s}
.dok-liste a:hover::before{width:6px}
.dok-liste a:hover{padding-left:16px}

@media (prefers-reduced-motion:reduce){
  html.js .rv,html.js .rv-gruppe>*,html.js .rv-slogan .slogan text,html.js .rv-slogan .satz{opacity:1;transform:none;transition:none}
  .card:hover,.linkcard:hover{transform:none}
}

/* ═══════════════════════════════════════════════════════════════
   Jans Rückmeldung vom 26.09.2026
   ═══════════════════════════════════════════════════════════════ */

/* Hero: ein Strich statt des kleinen Slogans über dem Titel, der Slogan groß
   unter dem Falken (Punkt 8). Der Slogan sperrt sich beim Laden auf. */
.hero-strich{width:120px;height:1px;background:currentColor;opacity:.55;margin-bottom:34px}
.hero-marke{position:relative;justify-self:end;width:min(520px,100%);display:grid;gap:30px}
.hero-marke .hawk{justify-self:stretch;width:100%}
.hero-slogan{width:100%;max-width:none}
.hero-slogan text{transform-box:fill-box;transform-origin:center;animation:sperren 1.3s cubic-bezier(.2,.7,.2,1) .55s both}
.hero-slogan .zeile2{animation-delay:.75s}
@keyframes sperren{from{opacity:0;transform:scaleX(.9)}to{opacity:1;transform:none}}

/* Kennzahlen: drei Kacheln auf der Startseite (Punkt 4), Band auf der
   Investoren-Seite zwischen dunklem Kopf und Inhalt (Punkt 9). Der Kopf
   braucht dafür unten so viel Platz wie der Hero der Startseite. */
.kpis.drei .band{grid-template-columns:repeat(3,1fr)}
.pagehead.mit-band{padding-bottom:190px}

/* Investoren-Seite (Punkt 14): Karten auf hellgrünem Grund, Textpaar nebeneinander */
.soft .card{background:var(--paper)}
.split p.prose{font-size:17px;line-height:1.65}

/* News (Punkt 16): Chronik mit Datum vorn */
.news-liste{list-style:none;border-top:1px solid var(--forest)}
.news-liste li{border-bottom:1px solid var(--tint)}
.news-liste a{display:grid;grid-template-columns:8.5em 1fr auto;gap:28px;align-items:baseline;padding:22px 0;transition:padding-left .3s,color .3s}
.news-liste a:hover{padding-left:12px;color:var(--forest)}
.news-datum{font-family:var(--display);font-size:20px;font-weight:500;color:var(--forest-3);white-space:nowrap}
.news-titel{font-size:16.5px;line-height:1.45;max-width:58em}
.news-meta{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--forest-3);white-space:nowrap}

@media (max-width:1000px){
  .hero-marke{justify-self:start;width:min(360px,100%)}
  .kpis.drei .band{grid-template-columns:1fr}
  .kpis.drei .kpi+.kpi{border-left:0;border-top:1px solid var(--tint)}
  .pagehead.mit-band{padding-bottom:160px}
  .news-liste a{grid-template-columns:1fr;gap:4px}
  .news-meta{white-space:normal}
}
@media (prefers-reduced-motion:reduce){
  .hero-slogan text{animation:none}
}

/* ── Druck ───────────────────────────────────────────────────── */
@media print{
  header,.burger,.lang,.hawk{display:none}
  html.js .rv,html.js .rv-gruppe>*,html.js .rv-slogan .slogan text,html.js .rv-slogan .satz{opacity:1!important;transform:none!important}
  .hero,.pagehead,.dark,footer{background:#fff!important;color:#000!important}
  .hero h1,.dark h2,.on-dark{color:#000!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;color:#555}
}

/* ═══════════════════════════════════════════════════════════════
   Jans Entwurf vom 27.09.2026
   Wörtlich aus entwurf-aenderungen.css (01 Dokumente vom Kunden/
   JadeHawk_Website_Entwurf_2026-09-27). Steht am Ende, weil die Datei im
   Entwurf nach site.css geladen wurde; so bleibt die Wirkung gleich.
   Ergänzungen von nd-solutions folgen danach in einem eigenen Block.
   ═══════════════════════════════════════════════════════════════ */

/* ── Kopf: höher, Logo größer, Claim daneben ─────────────────── */
header .wrap{height:116px}
.brand{display:flex;align-items:center;gap:22px}
.brand img{height:82px}
.brand-claim{
  display:flex;flex-direction:column;gap:3px;
  padding-left:22px;border-left:1px solid rgba(222,227,225,.35);
  font-family:var(--display);font-weight:500;font-size:14px;line-height:1.25;
  letter-spacing:.32em;text-transform:uppercase;white-space:nowrap;
  color:var(--tint-3);transition:font-size .4s cubic-bezier(.2,.7,.2,1)
}
.brand-claim span+span{color:var(--tint-2)}
html.scrolled header .wrap{height:82px}
html.scrolled .brand img{height:58px}
html.scrolled .brand-claim{font-size:12.5px}

/* Zwischen 1000 und 1180 px wird es neben der vollen Navigation eng */
@media (max-width:1180px) and (min-width:1001px){
  nav.main{gap:22px;font-size:14px}
  .brand{gap:16px}
  .brand-claim{font-size:12px;padding-left:16px}
}
@media (max-width:1000px){
  header .wrap{height:84px}
  .brand img{height:56px}
  .brand{gap:14px}
  .brand-claim{font-size:11px;padding-left:14px;letter-spacing:.28em}
  html.scrolled header .wrap{height:70px}
  html.scrolled .brand img{height:46px}
  html.scrolled .brand-claim{font-size:10.5px}
}

/* ── Hero: Claim einzeilig und klein unter dem Falken ─────────── */
.hero-claim{
  font-family:var(--display);font-weight:500;font-size:21px;line-height:1;
  letter-spacing:.3em;text-transform:uppercase;text-align:center;
  margin-right:-.3em;                /* letzte Sperrung ausgleichen, sonst wirkt es nach links verrutscht */
  color:var(--tint-3);white-space:nowrap;
  animation:sperren 1.3s cubic-bezier(.2,.7,.2,1) .55s both
}
/* Auf schmalen Bildschirmen ist der Falke ohnehin ausgeblendet; der Claim steht dann im Kopf. */
@media (max-width:1000px){ .hero-marke{display:none} }
@media (prefers-reduced-motion:reduce){ .hero-claim{animation:none} }

/* ═══ Kennzahlen, 27.09.2026 ═══════════════════════════════════ */

/* ── Hero: Rollzählwerk (Variante 2D) ──────────────────────────
   27.09.2026: Titel links, Zahlen rechts untereinander, alle neunstellig. */
.hero-zaehler{grid-column:1/-1;justify-self:end;display:grid;grid-template-columns:max-content max-content;justify-content:start;
  column-gap:36px;row-gap:12px;align-items:center;margin-top:44px;padding-top:28px;border-top:1px solid rgba(222,227,225,.22)}
.zw{display:contents}
.zw-l{font-size:15px;letter-spacing:.2em;text-transform:uppercase;color:var(--tint-2)}   /* +30 % (vorher 11,5 px) */
.zw-wert{display:flex;align-items:center;gap:10px}
.zw-z{font-family:var(--display);font-size:36px;font-weight:500;color:var(--paper);font-variant-numeric:lining-nums}
.zw-e{display:inline-block;min-width:.7em;font-family:var(--display);font-size:28px;color:var(--tint-2);line-height:1}
.zw-stand{grid-column:2;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--tint-2);padding-top:2px}
.zw-stand time{color:var(--tint-4)}
.odo .rad.null .streifen span{opacity:.38}   /* führende Nullen zurücknehmen */

/* vom Skript gebaute Räder */
.odo{--h:46px;--b:31px;display:inline-flex;align-items:stretch;gap:2px;padding:4px;
  border:1px solid rgba(222,227,225,.28);background:rgba(0,0,0,.18);box-shadow:inset 0 1px 6px rgba(0,0,0,.35)}
.odo .rad{position:relative;width:var(--b);height:var(--h);overflow:hidden;
  background:linear-gradient(#0d2a21,#1d4a3b 30%,#1d4a3b 70%,#0d2a21)}
.odo .rad::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(rgba(0,0,0,.4),transparent 28%,transparent 72%,rgba(0,0,0,.4))}
.odo .streifen{will-change:transform}
.odo .streifen span{display:block;height:var(--h);line-height:var(--h);text-align:center;
  font-family:var(--display);font-size:calc(var(--h)*.78);font-weight:500;color:var(--paper);font-variant-numeric:lining-nums}
.odo .rad.letzte{background:linear-gradient(#c9d6d0,#fff 30%,#fff 70%,#c9d6d0)}
.odo .rad.letzte .streifen span{color:var(--forest)}
.odo .rad.letzte::after{background:linear-gradient(rgba(18,54,43,.25),transparent 28%,transparent 72%,rgba(18,54,43,.25))}
.odo .tr{width:9px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:5px;
  font-family:var(--display);font-size:30px;line-height:1;color:var(--tint-2)}

@media (max-width:1180px){
  .odo{--h:40px;--b:26px}
}
@media (max-width:1000px){
  .hero-zaehler{grid-template-columns:1fr;row-gap:6px;margin-top:40px}
  .zw-l{text-align:left;margin-top:10px}
  .zw-stand{grid-column:1;margin-top:10px}
  .odo{--h:36px;--b:24px}
}
@media (max-width:380px){ .odo{--h:34px;--b:22px} }

/* ── Kennzahlen-Karten auf den Übergängen (Ansatz 1) ─────────────
   Stand 27.09.2026:
   · je Übergang eine Karte, halb auf der Kante; Überschrift des Abschnitts daneben
   · Kartenhöhe nach Inhalt (kein Leerraum über der Zahl)
   · Zahl 80 % der vorigen Größe, „Mio“ 10 px tiefer, € darunter fast so breit wie „Mio“
   Technik: Die Karte steht im neuen Abschnitt in einem Raster neben der
   Überschrift (.kk-zeile) und wird um Abschnitts-Innenabstand + halbe eigene
   Höhe nach oben gezogen. Die Höhe misst entwurf-karten.js (--kh-el); ohne
   Skript gilt der Schätzwert --kh. */
:root{--kh:260px;--pt:60px}

section.block.mit-karte{padding-top:var(--pt)}
section.block.vor-karte{padding-bottom:calc(var(--kh) / 2 + 72px)}
.hero{padding-bottom:44px}   /* Karte 3.723 ragt links neben das (rechtsbündige) Zählwerk */

.kk-zeile{display:grid;grid-template-columns:auto 1fr;gap:72px;align-items:start;margin-bottom:80px}
.kk-zeile.rechts{grid-template-columns:1fr auto}
.kk-zeile.rechts .kk{order:2}
.kk-zeile .kk{margin-top:calc(-1 * (var(--pt) + var(--kh-el, var(--kh)) / 2));position:relative;z-index:5}
.kk-nachbar{padding-top:6px}
.kk-nachbar h2{margin-bottom:26px}
.kk-nachbar .lede{max-width:30em}
.kk-nachbar .list{margin-top:48px}

/* Farben je Karte (kontrastreich) */
.kk{--bg:var(--paper);--z:var(--forest);--e:var(--forest-3);--t:var(--forest);--p:#555;--rand:var(--tint);--balken:var(--forest);
  display:grid;justify-items:start;align-content:start;min-width:340px;
  background:var(--bg);border:1px solid var(--rand);padding:29px 37px 24px 41px;
  box-shadow:0 40px 80px -38px rgba(18,54,43,.45)}
.kk::after{content:"";position:absolute;left:0;top:0;width:3px;height:100%;background:var(--balken)}
.kk.wald{--bg:var(--forest);--z:var(--paper);--e:var(--tint-2);--t:var(--tint-3);--p:var(--tint-4);--rand:var(--forest);--balken:var(--tint-2);
  box-shadow:0 40px 80px -34px rgba(0,0,0,.55);overflow:hidden}
.kk.wald::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(118deg,transparent 0 40%,rgba(222,227,225,.05) 40% 58%,transparent 58%)}
.kk.mittel{--bg:var(--forest-2);--z:var(--paper);--e:var(--tint-3);--t:var(--tint-4);--p:var(--tint-4);--rand:var(--forest-2);--balken:var(--paper)}
.kk.salbei{--bg:var(--tint-3);--z:var(--forest);--e:var(--forest-2);--t:var(--forest);--p:#2f4a40;--rand:var(--tint-3);--balken:var(--forest)}
.kk.kontur{--bg:transparent;--rand:var(--forest);--balken:transparent;box-shadow:none}
.kk.kontur::after{display:none}

/* Zahl; Einheit klein zweizeilig daneben */
.kk .v{display:flex;align-items:flex-start;gap:14px;
  font-family:var(--display);font-weight:500;color:var(--z);font-size:178px;line-height:.72;
  letter-spacing:-.03em;font-variant-numeric:lining-nums;white-space:nowrap;margin-left:-.04em}
.kk .v .e{display:flex;flex-direction:column;align-items:center;font-size:.22em;line-height:1;letter-spacing:0;color:var(--e);
  margin-top:calc(.05em + 9px);gap:.02em}
.kk .v .e .eur{font-size:2.1em;line-height:.8}
.kk.schmal .v{font-size:132px}   /* 3.723: Karte so breit wie die 60-Mio-Karte */
.kk-fuss{padding-top:12px;border-top:1px solid color-mix(in srgb,var(--z) 18%,transparent);margin-top:17px;width:0;min-width:100%}
.kk .l{font-family:var(--text);font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--t);line-height:1.4}
.kk p{margin-top:7px;font-size:12.5px;line-height:1.5;color:var(--p)}

/* Wegweiser neben der 60-Mio-Karte (seit „Geschlossene Immobilienfonds“ entfällt) */
.kk-nachbar .cards{margin-top:0}
.kk-nachbar .linkcard p{font-size:14.5px}

@media (max-width:1180px) and (min-width:1001px){
  .kk .v{font-size:136px}
  .kk.schmal .v{font-size:101px}
  .kk-zeile{gap:48px}
}
@media (max-width:1000px){
  :root{--kh:250px;--pt:56px}
  .kk-zeile,.kk-zeile.rechts{grid-template-columns:1fr;gap:44px;margin-bottom:56px}
  .kk-zeile.rechts .kk{order:0;justify-self:end}
  .kk{min-width:0;width:calc(100% - 28px);padding:24px 26px 20px 30px}
  .kk .v,.kk.schmal .v{font-size:clamp(72px,24vw,102px)}
  .kk-nachbar{padding-top:0}
}
/* „Wir kaufen …“ unter den drei Aussagen, links neben der 143-Mio-Karte */
.lage-schluss{margin-top:64px;max-width:30em}
#lage.vor-karte{padding-bottom:64px}   /* Satz steht dadurch links neben der hochragenden 143-Mio-Karte */
@media (max-width:1000px){ .lage-schluss{margin-top:44px} #lage.vor-karte{padding-bottom:calc(var(--kh) / 2 + 72px)} }

/* ═══ Textrunde 27.09.2026 ═══════════════════════════════════════ */
/* Wegweiser auf „Für Verkäufer“: nur Kennzeile und Knopf */
.wegweiser-knapp .linkcard{display:flex;flex-direction:column;justify-content:space-between;gap:22px;padding:30px 32px}
.wegweiser-knapp .linkcard .kicker{margin-bottom:0}
/* EN-Claim ist länger: kleiner, damit er nicht breiter als das Logo wird */
html[lang="en"] .hero-marke .hero-claim{font-size:15px}
/* „Über JadeHawk“ */
.kpi .v small.vor{margin:0 3px 0 0}
.ansatz-kicker{margin-bottom:40px}
.rechte{margin-top:44px;max-width:44em}
.linkcard h3+.btn{margin-top:18px}

/* ── Ergänzung nd-solutions, 30.09.2026 ─────────────────────────
   Handy: Das Zählwerk steht dort über die volle Breite, die erste Karte ragt
   von unten in den Hero und verdeckte in Jans Entwurf die dritte Zählwerk-
   zeile. Der Hero bekommt unten so viel Platz, wie die Karte hineinragt.
   Die Höhe misst karten.js (--kh-folge), ohne Skript gilt die Schätzung --kh. */
@media (max-width:1000px){
  .hero{padding-bottom:calc(var(--kh-folge, var(--kh)) / 2 + 40px)}
}
/* Menüknopf auf dem Handy: Er erbte die Textfarbe und war auf dem dunklen Kopf
   kaum zu sehen (gemessen 30.09.2026: rgb(35,35,35) auf #12362B). Betraf auch
   den Stand vor Jans Entwurf. */
header.ton-dunkel .burger,html.scrolled .burger{color:var(--paper)}
/* Hero-Logo in seinen echten Proportionen. In Jans Entwurf fehlte eine Regel für
   .hero-logo img: max-width verkleinerte nur die Breite, die Höhe blieb bei den
   1076 px aus dem HTML, das Logo war 2,4-fach in die Höhe gezogen. Nico hat am
   30.09.2026 die richtigen Proportionen gewählt (Variante B im Vergleichsbild). */
.hero-logo img{width:100%;height:auto}
/* Kopf-Logo auf ganze Pixel (Nicos Hinweis zur Schärfe, 30.09.2026). Jans Entwurf setzt die
   Höhe (82 / 58 px, Handy 56 / 46), das ergab 88,4 px Breite: dann rechnet der Browser auch
   ein passend verkleinertes Bild noch einmal um, und es wird weich. Jetzt die Breite in
   ganzen Pixeln, die Höhe folgt dem Bild (88 → 82, 62 → 58, 60 → 56, 50 → 47). */
.brand img{width:88px;height:auto;transition:width .4s cubic-bezier(.2,.7,.2,1)}
html.scrolled .brand img{width:62px;height:auto}
@media (max-width:1000px){
  .brand img{width:60px;height:auto}
  html.scrolled .brand img{width:50px;height:auto}
}
/* Kontaktformular: Felder einer Zeile auf gleicher Höhe (Nicos Hinweis 30.09.2026).
   Jedes Feld ist ein <p>, und die allgemeine Regel p+p gab dem jeweils zweiten 16 px
   Abstand nach oben: die rechte Spalte stand tiefer, auf dem Handy war der Abstand
   innerhalb eines Paars größer als zwischen den Paaren. Dazu schob ein zweizeiliges
   Etikett („Emissionshaus und Fondsname") sein Eingabefeld tiefer als das daneben.
   Jetzt ohne den p+p-Abstand, und die Felder einer Zeile stehen unten bündig, damit
   die Eingabefelder auf einer Linie liegen und das Etikett direkt darüber. */
.formular .feld{margin-top:0}
.feldpaar{align-items:end}
/* Die Regel „ein Feld je Zeile" bis 1000 px stand im Stylesheet VOR der Grundregel
   .feldpaar{grid-template-columns:1fr 1fr} und wurde von ihr überschrieben. Auf dem
   Handy standen deshalb zwei schmale Felder nebeneinander. Hier nach der Grundregel. */
@media (max-width:1000px){ .feldpaar{grid-template-columns:1fr;gap:0} }