/* ============================================================================
   site.css — Corporate Design kaj-bau-digital.de  (Stand 2026-07-08)
   „Deep-Ocean-Terminal" (Midjourney-Struktur) in Kajs Marke Grün/Creme.

   EINE Quelle der Wahrheit für ALLE Seiten. Es stylt bewusst die BESTEHENDEN
   Klassennamen der alten Seiten (hero, karte, zahlen, btn, formel …), damit der
   Inhalt der Seiten unangetastet bleibt -> kein SEO-Risiko.

   Struktur-Tokens von Midjourney: 8-Punkt-Raster, Radien 8px / 9999px,
   Elevation über Farbstufe statt Schatten, Monospace als Struktur-Schrift.
   ========================================================================== */

/* --- Selbst-gehostete Schriften (DSGVO: keine Google-Verbindung des Besuchers) --- */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/dm-sans-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/dm-sans-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/dm-sans-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/dm-sans-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/dm-sans-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/dm-sans-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/jetbrains-mono-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* --- Flächen (Elevation über Farbstufe) --- */
  --void:        #FAF7EF;   /* Basis-Seitenhintergrund */
  --void-2:      #F5F0E4;   /* zweite helle Bandfläche */
  --surface:     #FFFFFF;   /* Karten */
  --surface-2:   #FBF8F1;   /* Karte hover */
  --deep:        #2E4A3B;   /* Grün-Band */
  --deep-2:      #243B2F;   /* tiefstes Grün (Nav, Footer, Terminal) */
  --deep-3:      #1B2E24;   /* Hero-Tiefe */

  /* --- Tinte --- */
  --ink:         #2B3A32;
  --ink-strong:  #1F3128;
  --ink-soft:    #5A6B61;
  --on-deep:     #EDE8DC;
  --on-deep-soft:rgba(237,232,220,0.82);

  /* --- Linien --- */
  --line:        #D8CFBC;
  --line-deep:   rgba(245,240,228,0.22);

  /* --- Akzente --- */
  --brand:       #2E4A3B;
  --brand-dark:  #243B2F;
  --amber:       #A9741F;   /* Förder-/Geld-Akzent */
  --amber-on-deep:#EBD9B4;
  --amber-soft:  rgba(169,116,31,0.12);
  --mint:        #9BC7A6;

  /* --- ALTE Variablennamen als Alias (inline style="var(--creme)" o.ä. lebt weiter!) --- */
  --gruen:        #2E4A3B;
  --gruen-dunkel: #243B2F;
  --creme:        #F5F0E4;
  --creme-hell:   #FAF7EF;
  --text:         #2B3A32;
  --text-hell:    #EDE8DC;
  --linie:        #D8CFBC;

  /* --- Schrift --- */
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans: 'DM Sans', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* --- Maße --- */
  --sp-8:8px; --sp-16:16px; --sp-24:24px; --sp-32:32px; --sp-48:48px; --sp-64:64px;
  --r-lg:8px; --r-full:9999px;
  --page:1080px; --prose:680px;
  --shadow-sm: rgba(31,49,40,0.10) 0 4px 6px -1px, rgba(31,49,40,0.10) 0 2px 4px -2px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--void);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: var(--page); margin:0 auto; padding:0 var(--sp-24); }
section { padding: var(--sp-64) 0; }
img { max-width:100%; }

a { color: var(--brand); text-decoration:none; }
a:hover { text-decoration:underline; }
:focus-visible { outline:2px solid var(--amber); outline-offset:2px; }

/* ---------- Typografie: Monospace = Terminal-Signatur ---------- */
h1, h2, h3 { font-family: var(--mono); color: var(--ink-strong); line-height:1.25; font-weight:600; }
h2 {
  font-size: clamp(1.5rem, 2.4vw, 1.9rem); font-weight:500;
  margin-bottom: var(--sp-16); letter-spacing:-0.01em;
}
h2::before { content:"// "; color: var(--amber); font-weight:600; }
h3 { font-size:1.15rem; font-weight:600; }
p { margin-bottom: 0; }
section p + p, .item p + p, .uebermich p { margin-top: var(--sp-16); }
.uebermich p { margin-top:0; margin-bottom:14px; }

/* auf dunklen Flächen */
.on-deep, .zahlen, .zwischen-cta, .bafa, .foerder-teaser, .hero { color: var(--on-deep); }
.on-deep h2, .zahlen h2, .zwischen-cta h2, .bafa h2, .foerder-teaser h2 { color:#fff; }
.on-deep h2::before, .bafa h2::before, .foerder-teaser h2::before,
.zwischen-cta h2::before { color: var(--amber-on-deep); }

/* ---------- Sticky-Navigation ---------- */
.nav { position:sticky; top:0; z-index:50; background: var(--deep-2); border-bottom:1px solid var(--line-deep); }
.nav .wrap { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:10px; padding-bottom:10px; }
.nav .nav-brand { font-family:var(--mono); font-weight:600; color:#fff; font-size:0.95rem; letter-spacing:0.02em; }
.nav .nav-brand:hover { text-decoration:none; }
.nav .nav-brand .cursor { color: var(--amber-on-deep); }
.nav-actions { display:flex; gap:10px; align-items:center; }
.nav .nav-link { font-family:var(--mono); font-size:0.85rem; color:var(--on-deep-soft); }
.nav .nav-link:hover { color:#fff; text-decoration:none; }
.nav .btn { margin:0; padding:8px 18px; font-size:0.85rem; width:auto; }
@media (max-width:640px){ .nav .nav-link { display:none; } }

/* ---------- Buttons = Specimen-Pills ---------- */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:0.9rem; font-weight:500;
  padding:11px 22px; border-radius: var(--r-full); border:1px solid transparent;
  margin:0 10px 10px 0; transition: transform .12s ease, background .15s ease;
}
.btn:hover { text-decoration:none; transform:translateY(-1px); }
/* SICHERER STANDARD: ein blankes class="btn" ist NIE unsichtbar (grüne Pille auf hellem Grund) */
.btn { background: var(--brand); color: var(--void-2); box-shadow: var(--shadow-sm); }
.btn:hover { background: var(--brand-dark); color:#fff; }

.btn-hell { background: var(--void-2); color: var(--brand-dark); }
.btn-hell:hover { background:#fff; color: var(--brand-dark); }

/* Ghost-Pill: leichter dunkler Rücken, damit er über dem animierten Feld lesbar bleibt */
.btn-rand { background: rgba(15,25,20,0.45); color: var(--on-deep); border-color: rgba(245,240,228,0.45); box-shadow:none; }
.btn-rand:hover { background: rgba(15,25,20,0.65); color:#fff; }
.nav .btn-rand { background: transparent; border-color: var(--line-deep); }
.nav .btn-rand:hover { background: rgba(245,240,228,0.08); }

/* Auf dunkelgrünen Bändern muss ein blankes .btn hell werden, sonst grün-auf-grün */
.zwischen-cta .btn, .foerder-teaser .btn, .bafa .btn, .hero .btn:not(.btn-rand) {
  background: var(--void-2); color: var(--brand-dark);
}
.zwischen-cta .btn:hover, .foerder-teaser .btn:hover, .bafa .btn:hover, .hero .btn:not(.btn-rand):hover {
  background:#fff; color: var(--brand-dark);
}

/* ---------- HERO: dunkelgrüner „Ankommens-Banner" mit ASCII-Prompt-Feld ---------- */
.hero {
  position:relative; overflow:hidden;
  padding: var(--sp-48) 0 var(--sp-64); min-height: 78vh;
  display:flex; align-items:center;
  background: radial-gradient(120% 90% at 62% 42%, #2f4d3d 0%, var(--deep-2) 46%, var(--deep-3) 100%);
}
.hero--full { min-height: 88vh; }              /* Startseite: voller Banner */
.hero--compact { min-height: 0; padding: var(--sp-48) 0; }   /* Blog-Artikel: ruhiger Banner */
.hero--compact h1 { margin-bottom: 10px; }
.hero-ascii { position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
/* Lesbarkeits-Schleier: hält die Textspalte garantiert dunkel, lässt das Feld rechts durchglühen */
.hero-scrim {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(90deg,
    rgba(27,46,36,0.94) 0%, rgba(27,46,36,0.90) 42%,
    rgba(27,46,36,0.62) 58%, rgba(27,46,36,0.18) 80%, rgba(27,46,36,0) 100%);
}
.hero .wrap { position:relative; z-index:2; width:100%; }
.hero .brand, .hero .brand a { font-family:var(--mono); font-size:0.8rem; letter-spacing:0.14em;
  text-transform:uppercase; color: var(--on-deep-soft); margin-bottom:22px; display:inline-block; }
.hero .brand a:hover { color:#fff; text-decoration:none; }
.hero .prompt { font-family:var(--mono); font-size:0.8rem; color:var(--on-deep-soft); margin-bottom:18px; }
.hero .prompt .path { color: var(--mint); }
.hero .prompt .cursor { display:inline-block; width:8px; height:1em; background: var(--amber-on-deep);
  margin-left:2px; transform:translateY(2px); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }

.hero-grid { display:grid; grid-template-columns:1.4fr 1fr; gap: var(--sp-48); align-items:center; }
.hero h1 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); color:#fff; margin-bottom:18px; line-height:1.2;
  text-shadow: 0 2px 18px rgba(15,25,20,0.45); }
.hero .sub-frage { font-family:var(--sans); font-size:1.3rem; font-weight:600; color:#fff; margin-bottom:14px; line-height:1.3; }
.hero .sub { font-size:1.05rem; margin-bottom:14px; color: var(--on-deep); }
.hero .foerder { font-size:1.05rem; margin-bottom:26px; background: rgba(169,116,31,0.18);
  border-left:3px solid #D2A24E; padding:12px 16px; border-radius:0 var(--r-lg) var(--r-lg) 0; color: var(--on-deep); }
.hero .foerder strong { color:#fff; }
/* Direktantwort-Box (GEO: die Antwort, die KI-Antwortmaschinen zitieren) */
.hero .direktantwort {
  background: rgba(15,25,20,0.55); border-left:4px solid var(--mint); border-radius:0 var(--r-lg) var(--r-lg) 0;
  padding:18px 20px; font-size:1.05rem; margin-bottom:26px; color: var(--on-deep);
  backdrop-filter: blur(2px);
}
.hero .direktantwort strong { color:#fff; }

.portrait { width:100%; max-width:300px; aspect-ratio:1; border-radius: var(--r-lg); object-fit:cover;
  border:2px solid rgba(245,240,228,0.55); box-shadow: 0 8px 40px rgba(10,18,14,0.5); display:block; margin:0 auto; }
.portrait-name { font-family:var(--mono); text-align:center; margin-top:16px; font-size:1.05rem; color:#fff; font-weight:600; }
.portrait-rolle { text-align:center; font-size:0.92rem; color: var(--on-deep-soft); }

/* ---------- Zahlen-Band ---------- */
.zahlen { background: var(--deep); padding: var(--sp-48) 0; }
.zahlen-grid { display:grid; grid-template-columns:repeat(4,1fr); gap: var(--sp-24); text-align:center; }
.zahl { font-family:var(--mono); font-size:2.6rem; font-weight:700; color:#fff; line-height:1.1; }
.zahl-label { font-size:0.9rem; margin-top:8px; color: var(--on-deep-soft); line-height:1.45; }
.zahlen .fussnote { text-align:center; font-size:0.8rem; color: rgba(237,232,220,0.6); margin-top: var(--sp-24); }
.zahlen a { color: var(--on-deep); text-decoration:underline; }

/* ---------- Karten-Raster ---------- */
.kann-grid { display:grid; grid-template-columns:repeat(3,1fr); gap: var(--sp-16); margin-top: var(--sp-32); }
.karte { background: var(--surface); border:1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--sp-24); transition: transform .15s ease, box-shadow .15s ease; }
.karte:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); background: var(--surface-2); }
.karte-kicker { font-family:var(--mono); font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase;
  color: var(--amber); font-weight:600; margin-bottom:10px; }
.karte h3 { font-size:1.02rem; margin-bottom:8px; line-height:1.3; }
.karte p { font-size:0.94rem; }
.karte a { font-family:var(--mono); font-size:0.86rem; }

/* ---------- Zwischen-CTA / Förder-Teaser ---------- */
.zwischen-cta { background: var(--deep); text-align:center; padding: var(--sp-48) 0; }
.zwischen-cta p { font-size:1.12rem; max-width:760px; margin:0 auto var(--sp-24); color:#fff; }
.foerder-teaser { background: var(--deep); }
.foerder-teaser a { color: var(--amber-on-deep); font-weight:600; text-decoration:underline; }

/* ---------- Leistungen ---------- */
.leistungen .item { display:flex; gap: var(--sp-24); padding: var(--sp-24) 0; border-bottom:1px solid var(--line); }
.leistungen .item:last-child { border-bottom:none; }
.nr { flex:none; width:52px; height:52px; background: var(--surface); border:1px solid var(--line);
  color: var(--brand); border-radius: var(--r-lg); display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-weight:700; font-size:1.1rem; }
.leistungen h3 { margin-bottom:8px; }
.hinweis-ehrlich { font-size:0.94rem; color: var(--ink-soft); }

/* ---------- Rechnung / Grenze: Formel als Terminal-Fenster ---------- */
.rechnung, .grenze { background: var(--void-2); }
.formel {
  background: var(--deep-2); color: var(--on-deep); font-family: var(--mono); font-size:1rem; line-height:1.9;
  border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 22px 24px; margin: var(--sp-24) 0;
  max-width: var(--prose); position:relative; overflow-x:auto;
}
.formel::before {  /* Terminal-Ampel */
  content:""; display:block; width:44px; height:11px; margin-bottom:14px;
  background:
    radial-gradient(circle 5.5px at 5.5px 5.5px, #c25b5b 96%, transparent 100%),
    radial-gradient(circle 5.5px at 22px 5.5px, #c9a24b 96%, transparent 100%),
    radial-gradient(circle 5.5px at 38.5px 5.5px, #5fa06a 96%, transparent 100%);
}
.formel strong { color: var(--amber-on-deep); font-size:1.15rem; }

/* ---------- BAFA-Faktenblock ---------- */
.bafa { background: var(--deep); }
.bafa table { width:100%; border-collapse:collapse; margin-top: var(--sp-16); }
.bafa td { padding:13px 14px 13px 0; border-bottom:1px solid var(--line-deep); vertical-align:top; font-size:0.98rem; }
.bafa td:first-child { font-family:var(--mono); font-weight:500; color:#fff; width:32%; }
.bafa strong { color:#fff; }
.bafa a { color: var(--amber-on-deep); text-decoration:underline; }
.quelle { margin-top: var(--sp-16); font-size:0.88rem; color: rgba(237,232,220,0.7); }
.fussnote { font-size:0.82rem; color: var(--ink-soft); }

/* ---------- Über mich / Vorträge ---------- */
.uebermich-grid { display:grid; grid-template-columns:1.5fr 1fr; gap: var(--sp-48); align-items:start; }
.selfie { width:100%; border-radius: var(--r-lg); border:1px solid var(--line); }
.vortraege { background: var(--void-2); }
.galerie { display:grid; grid-template-columns:2fr 1fr; gap: var(--sp-16); margin-top: var(--sp-24); }
.galerie img { width:100%; height:100%; object-fit:cover; border-radius: var(--r-lg); border:1px solid var(--line); }

/* ---------- Kontakt ---------- */
.kontakt { text-align:center; }
.kontakt p { max-width:640px; margin-left:auto; margin-right:auto; }

/* ---------- Listen (Regionen etc.) ---------- */
section ul { margin-top: var(--sp-16); }
section ul li { margin-bottom:6px; }

/* ---------- Footer ---------- */
footer { background: var(--deep-2); color: var(--on-deep); padding: var(--sp-32) 0;
  font-size:0.92rem; font-family: var(--mono); }
footer .wrap { display:block; }
/* nur zweispaltig, wenn es echte <div>-Kinder gibt — sonst zerreißt Flexbox losen Text
   (Impressum/Datenschutz haben Text direkt im .wrap) */
footer .wrap:has(> div) { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }
footer a { color: var(--on-deep-soft); }
footer a:hover { color:#fff; }

/* ---------- Rechtsseiten-Inhalt (<main><div class="wrap">, ohne <section>) ---------- */
main > .wrap { padding-top: var(--sp-48); padding-bottom: var(--sp-48); }
main h1 { margin-bottom: var(--sp-24); }
main h2 { margin-top: var(--sp-32); }
main p { margin-bottom: var(--sp-16); }

/* ---------- Rechtsseiten (Impressum/Datenschutz): schlicht, kein Banner ---------- */
.hero--slim { min-height:0; padding: var(--sp-24) 0; display:block;
  background: var(--deep-3); color: var(--on-deep); font-family: var(--mono); font-size:0.85rem; }
.hero--slim a { color: var(--on-deep-soft); }
.hero--slim a:hover { color:#fff; text-decoration:none; }

/* ---------- Scroll-Reveal (Progressive Enhancement; ohne JS alles sichtbar) ---------- */
.reveal { opacity:1; transform:none; }
html.js .reveal { opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease; }
html.js .reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal { opacity:1; transform:none; transition:none; }
  .hero .prompt .cursor { animation:none; }
  html { scroll-behavior:auto; }
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hero-grid, .uebermich-grid { grid-template-columns:1fr; }
  .kann-grid { grid-template-columns:1fr 1fr; }
  .zahlen-grid { grid-template-columns:1fr 1fr; }
  .hero { min-height:auto; padding: var(--sp-48) 0; }
  .hero--full { min-height:auto; }
  /* einspaltig: Schleier von oben nach unten, sonst steht Text im hellen Feld */
  .hero-scrim { background: linear-gradient(180deg, rgba(27,46,36,0.88) 0%, rgba(27,46,36,0.74) 60%, rgba(27,46,36,0.58) 100%); }
}
@media (max-width:560px){
  .kann-grid, .galerie { grid-template-columns:1fr; }
  .zahl { font-size:2.1rem; }
  section { padding: var(--sp-48) 0; }
  .btn { width:100%; justify-content:center; }
}