@charset "UTF-8";
/* =============================================================================
   Solartechnik Wessel — Stylesheet
   Handschrift: "Klare Kante Nordlicht"
   Alle Design-Tokens stehen in :root. Wer eine Farbe oder einen Abstand
   aendern will, aendert sie genau hier — nirgendwo sonst.
   ========================================================================== */

/* ---------- Schriften (selbst gehostet, keine Verbindung zu Google) -------- */
@font-face{font-family:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('../fonts/manrope-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:'Manrope';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('../fonts/manrope-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:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/inter-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:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/inter-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;}

/* =========================== 1 · Design-Tokens ============================ */
:root{
  /* Marke — direkt aus dem Logo gemessen */
  --marke-tief:#11395C;          /* Logo-Navy, Signet "Modulseite"          */
  --marke-tief-2:#1B5480;        /* aufgehellt, fuer Verlaeufe und Hover    */
  --marke-signal:#F18431;        /* Logo-Orange, Signet "Sonnenseite"       */
  --marke-signal-2:#F9A64F;      /* aufgehellt, Akzenttext auf Dunkel       */
  --marke-signal-text:#96470A;   /* Orange als Text auf Hell (Kontrast 5,0) */

  /* Fundament */
  --ink:#0C1F31;                 /* dunkelste Flaeche                       */
  --ink-2:#14324B;               /* zweite dunkle Ebene, Karten auf Dunkel  */
  --weiss:#FFFFFF;
  --flaeche:#F4F7F9;             /* kuehle Grundflaeche                     */
  --flaeche-warm:#FAF6F1;        /* warme Grundflaeche, Sand                */

  /* Text */
  --text:#16232E;                /* Haupttext  — 13,8:1 auf Weiss           */
  --text-gedaempft:#57697A;      /* Nebentext  —  5,3:1 auf Weiss           */
  --text-hell:#EAF1F6;           /* Haupttext auf Dunkel — 13,1:1           */
  --text-hell-gedaempft:#A9BECE; /* Nebentext auf Dunkel —  7,0:1           */

  /* Linien — immer rgba der Ink-Farbe, nie ein eigener Grauton */
  --linie:rgba(12,31,49,.12);
  --linie-stark:rgba(12,31,49,.20);
  --linie-hell:rgba(255,255,255,.16);
  --linie-hell-stark:rgba(255,255,255,.28);

  /* Verlaeufe */
  --verlauf-dunkel:linear-gradient(155deg,#14324B 0%,#0C1F31 68%);
  --verlauf-signal:linear-gradient(100deg,#F18431 0%,#F9A64F 100%);
  --verlauf-bild:linear-gradient(180deg,rgba(12,31,49,0) 0%,rgba(12,31,49,.18) 42%,rgba(12,31,49,.82) 100%);
  --verlauf-bild-quer:linear-gradient(90deg,rgba(12,31,49,.88) 0%,rgba(12,31,49,.62) 46%,rgba(12,31,49,.12) 100%);

  /* Typografie */
  --schrift-display:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --schrift-text:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  /* Raster */
  --container:1240px;
  --container-schmal:820px;
  --rand:20px;
  --rand-gross:40px;

  /* Abstandsskala, 8er-Basis */
  --s1:4px;  --s2:8px;   --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px;  --s8:64px; --s9:96px; --s10:128px;

  /* Sektionsabstaende in drei Stufen */
  --sektion-kompakt:clamp(56px,4vw + 34px,88px);
  --sektion:clamp(72px,6vw + 38px,124px);
  --sektion-gross:clamp(96px,8vw + 46px,168px);

  /* Radien */
  --r-klein:10px;
  --r-mittel:18px;
  --r-gross:30px;
  --r-pille:999px;

  /* Schatten — Unschaerfe ca. 3x Y-Versatz, eingefaerbt in Ink */
  --schatten-ruhe:0 1px 2px rgba(12,31,49,.05),0 10px 30px rgba(12,31,49,.07);
  --schatten-hover:0 2px 6px rgba(12,31,49,.07),0 22px 54px rgba(12,31,49,.13);
  --schatten-hart:0 18px 44px rgba(12,31,49,.22);

  /* Motion — drei Zeiten, eine Kurve. Mehr braucht es nicht. */
  --dur-micro:180ms;
  --dur-ui:320ms;
  --dur-reveal:680ms;
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-schwung:cubic-bezier(.34,1.56,.64,1);
}

/* ============================ 2 · Grundlagen ============================== */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px;overflow-x:clip;}
body{
  margin:0;background:var(--weiss);color:var(--text);
  font-family:var(--schrift-text);font-size:1rem;line-height:1.72;
  font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block;}
a{color:inherit;}
button{font:inherit;}
ul,ol{margin:0;padding:0;}
h1,h2,h3,h4,p,figure,blockquote{margin:0;}
:focus-visible{outline:3px solid var(--marke-signal);outline-offset:3px;border-radius:4px;}
::selection{background:var(--marke-signal);color:var(--ink);}

.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.sprunglink{position:absolute;left:var(--s4);top:-100px;z-index:999;background:var(--marke-signal);color:var(--ink);
  padding:12px 20px;border-radius:var(--r-pille);font-weight:700;text-decoration:none;transition:top var(--dur-ui) var(--ease-out);}
.sprunglink:focus{top:var(--s4);}

/* ============================ 3 · Typografie ============================== */
.display,h1.display{
  font-family:var(--schrift-display);font-weight:800;
  font-size:clamp(2.55rem,1.15rem + 5.6vw,6.25rem);
  line-height:.95;letter-spacing:-.038em;text-wrap:balance;
}
h2,.h2{
  font-family:var(--schrift-display);font-weight:800;
  font-size:clamp(1.95rem,1.15rem + 2.9vw,3.4rem);
  line-height:1.03;letter-spacing:-.028em;text-wrap:balance;
}
h3,.h3{
  font-family:var(--schrift-display);font-weight:700;
  font-size:clamp(1.3rem,1.1rem + .85vw,1.85rem);
  line-height:1.2;letter-spacing:-.017em;
}
h4,.h4{
  font-family:var(--schrift-display);font-weight:700;
  font-size:clamp(1.08rem,1.02rem + .28vw,1.25rem);
  line-height:1.35;letter-spacing:-.012em;
}
.lead{
  font-size:clamp(1.1rem,1.02rem + .38vw,1.375rem);
  line-height:1.55;color:var(--text-gedaempft);max-width:58ch;
}
p{max-width:68ch;}
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--schrift-display);font-weight:700;
  font-size:clamp(.75rem,.72rem + .1vw,.8125rem);
  letter-spacing:.16em;text-transform:uppercase;line-height:1.4;
  color:var(--marke-signal-text);margin-bottom:var(--s4);
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--marke-signal);flex:none;}
.eyebrow.hell{color:var(--marke-signal-2);}
.zahl{font-family:var(--schrift-display);font-weight:800;letter-spacing:-.04em;
  font-size:clamp(2.1rem,1.5rem + 2.2vw,3.1rem);line-height:1;color:var(--marke-tief);}
.dunkel .zahl{color:var(--marke-signal-2);}
strong,b{font-weight:600;color:var(--text);}
.dunkel strong,.dunkel b{color:var(--weiss);}
.fliess p + p{margin-top:var(--s5);}
.fliess a{color:var(--marke-tief);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;transition:color var(--dur-micro) var(--ease-out);}
.fliess a:hover{color:var(--marke-signal-text);}
.dunkel .fliess a{color:var(--marke-signal-2);}

/* ============================== 4 · Raster ================================ */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--rand);}
.container-schmal{max-width:var(--container-schmal);}
@media (min-width:768px){.container{padding-inline:var(--rand-gross);}}

.sektion{padding-block:var(--sektion);}
.sektion-kompakt{padding-block:var(--sektion-kompakt);}
.sektion-gross{padding-block:var(--sektion-gross);}
.flaeche{background:var(--flaeche);}
.flaeche-warm{background:var(--flaeche-warm);}
.dunkel{background:var(--verlauf-dunkel);color:var(--text-hell);}

.raster{display:grid;gap:var(--s5);}
.raster-2{grid-template-columns:1fr;}
.raster-3{grid-template-columns:1fr;}
.raster-4{grid-template-columns:1fr;}
@media (min-width:640px){
  .raster-2{grid-template-columns:repeat(2,1fr);}
  .raster-3{grid-template-columns:repeat(2,1fr);}
  .raster-4{grid-template-columns:repeat(2,1fr);}
}
@media (min-width:1024px){
  .raster-3{grid-template-columns:repeat(3,1fr);}
  .raster-4{grid-template-columns:repeat(4,1fr);}
  .raster{gap:var(--s6);}
}
.split{display:grid;gap:var(--s6);align-items:center;}
@media (min-width:1024px){
  .split{grid-template-columns:1fr 1fr;gap:var(--s9);}
  .split-5-7{grid-template-columns:5fr 7fr;}
  .split-7-5{grid-template-columns:7fr 5fr;}
  .split-oben{align-items:start;}
}
.sektionskopf{max-width:min(760px,100%);margin-bottom:var(--s7);}
.sektionskopf .lead{margin-top:var(--s4);}
.sektionskopf-breit{display:grid;gap:var(--s5);align-items:end;margin-bottom:var(--s7);}
@media (min-width:1024px){.sektionskopf-breit{grid-template-columns:7fr 5fr;gap:var(--s8);}}

/* ============================== 5 · Buttons =============================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--schrift-display);font-weight:700;font-size:.98rem;letter-spacing:-.01em;
  padding:16px 26px;border-radius:var(--r-pille);border:1.5px solid transparent;
  text-decoration:none;cursor:pointer;min-height:52px;
  transition:transform var(--dur-micro) var(--ease-out),
             box-shadow var(--dur-micro) var(--ease-out),
             background-color var(--dur-micro) var(--ease-out),
             border-color var(--dur-micro) var(--ease-out),
             color var(--dur-micro) var(--ease-out);
}
.btn svg{width:17px;height:17px;flex:none;transition:transform var(--dur-micro) var(--ease-out);}
.btn:hover svg{transform:translateX(4px);}
.btn:active{transform:translateY(1px);}

.btn-signal{background:var(--marke-signal);color:#2A1400;box-shadow:0 6px 20px rgba(241,132,49,.28);}
.btn-signal:hover{background:var(--marke-signal-2);transform:translateY(-2px);box-shadow:0 12px 30px rgba(241,132,49,.36);}
.btn-tief{background:var(--marke-tief);color:var(--weiss);}
.btn-tief:hover{background:var(--ink);transform:translateY(-2px);box-shadow:var(--schatten-hover);}
.btn-rand{border-color:var(--linie-stark);color:var(--text);background:transparent;}
.btn-rand:hover{border-color:var(--marke-tief);background:var(--marke-tief);color:var(--weiss);transform:translateY(-2px);}
.btn-hell{background:var(--weiss);color:var(--ink);}
.btn-hell:hover{background:var(--marke-signal);color:#2A1400;transform:translateY(-2px);}
.btn-rand-hell{border-color:var(--linie-hell-stark);color:var(--weiss);background:transparent;}
.btn-rand-hell:hover{background:var(--weiss);color:var(--ink);transform:translateY(-2px);}
.btn-gruppe{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;}

.textlink{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--schrift-display);font-weight:700;
  font-size:.95rem;color:var(--marke-tief);text-decoration:none;
  border-bottom:2px solid var(--marke-signal);padding-bottom:3px;
  transition:gap var(--dur-micro) var(--ease-out),color var(--dur-micro) var(--ease-out);
}
.textlink:hover{gap:13px;color:var(--marke-signal-text);}
.dunkel .textlink{color:var(--weiss);}
.dunkel .textlink:hover{color:var(--marke-signal-2);}

/* ============================ 6 · Kopfzeile =============================== */
.kopf{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.90);
  backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--linie);transition:box-shadow var(--dur-ui) var(--ease-out);}
.kopf.geschoben{box-shadow:0 6px 26px rgba(12,31,49,.09);}
.kopf-innen{display:flex;align-items:center;justify-content:space-between;gap:var(--s5);min-height:76px;}
@media (min-width:1024px){.kopf-innen{min-height:88px;}}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none;}
.logo img{height:44px;width:auto;}
@media (min-width:1024px){.logo img{height:54px;}}

.nav{display:none;}
@media (min-width:1180px){
  .nav{display:flex;align-items:center;gap:2px;}
  .nav a{
    position:relative;text-decoration:none;font-family:var(--schrift-display);font-weight:600;
    font-size:.92rem;color:var(--text);padding:10px 11px;border-radius:var(--r-klein);white-space:nowrap;
    transition:color var(--dur-micro) var(--ease-out),background-color var(--dur-micro) var(--ease-out);
  }
  .nav a::after{content:"";position:absolute;left:11px;right:11px;bottom:4px;height:2px;
    background:var(--marke-signal);transform:scaleX(0);transform-origin:left;
    transition:transform var(--dur-micro) var(--ease-out);}
  .nav a:hover{color:var(--marke-tief);}
  .nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1);}
  .nav a[aria-current="page"]{color:var(--marke-tief);}
}
.kopf-aktion{display:flex;align-items:center;gap:var(--s3);}
.kopf-tel{display:none;white-space:nowrap;}
@media (min-width:1440px){
  .kopf-tel{display:inline-flex;align-items:center;gap:9px;text-decoration:none;
    font-family:var(--schrift-display);font-weight:700;font-size:.95rem;color:var(--marke-tief);
    padding:10px 16px;border-radius:var(--r-pille);border:1.5px solid var(--linie);
    transition:border-color var(--dur-micro) var(--ease-out),background-color var(--dur-micro) var(--ease-out);}
  .kopf-tel:hover{border-color:var(--marke-tief);background:var(--flaeche);}
  .kopf-tel svg{width:16px;height:16px;}
}
.kopf .btn{padding:13px 20px;min-height:46px;font-size:.92rem;display:none;white-space:nowrap;}
@media (min-width:1180px){.kopf .btn{display:inline-flex;}}

.burger{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;
  border:1.5px solid var(--linie);background:transparent;border-radius:var(--r-klein);cursor:pointer;
  transition:border-color var(--dur-micro) var(--ease-out);}
.burger:hover{border-color:var(--marke-tief);}
@media (min-width:1180px){.burger{display:none;}}
.burger span{position:relative;display:block;width:20px;height:2px;background:var(--text);
  transition:background-color var(--dur-micro) var(--ease-out);}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--text);
  transition:transform var(--dur-ui) var(--ease-out);}
.burger span::before{top:-6px;}
.burger span::after{top:6px;}
.burger[aria-expanded="true"] span{background:transparent;}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg);}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg);}

.overlay{
  position:fixed;inset:0;z-index:99;background:var(--verlauf-dunkel);color:var(--text-hell);
  transform:translateX(102%);visibility:hidden;
  transition:transform var(--dur-ui) var(--ease-out),visibility 0s linear var(--dur-ui);
  display:flex;flex-direction:column;padding:96px var(--rand) var(--s7);overflow-y:auto;
}
.overlay.offen{transform:translateX(0);visibility:visible;transition-delay:0s;}
.overlay nav{display:flex;flex-direction:column;gap:2px;}
.overlay nav a{
  font-family:var(--schrift-display);font-weight:700;font-size:clamp(1.5rem,1.1rem + 1.8vw,2.1rem);
  letter-spacing:-.025em;color:var(--weiss);text-decoration:none;padding:11px 0;
  border-bottom:1px solid var(--linie-hell);
  opacity:0;transform:translateY(14px);
  transition:opacity var(--dur-ui) var(--ease-out),transform var(--dur-ui) var(--ease-out),color var(--dur-micro) var(--ease-out);
}
.overlay.offen nav a{opacity:1;transform:none;transition-delay:calc(90ms + var(--i,0) * 40ms);}
.overlay nav a:hover,.overlay nav a[aria-current="page"]{color:var(--marke-signal-2);}
.overlay-fuss{margin-top:auto;padding-top:var(--s7);display:grid;gap:var(--s4);}
.overlay-fuss a{color:var(--weiss);text-decoration:none;font-family:var(--schrift-display);font-weight:700;font-size:1.15rem;}
.overlay-fuss small{color:var(--text-hell-gedaempft);font-size:.85rem;letter-spacing:.02em;}

/* ================================ 7 · Hero ================================ */
.hero{position:relative;isolation:isolate;background:var(--ink);color:var(--text-hell);overflow:hidden;}
.hero-bild{position:absolute;inset:0;z-index:-2;}
.hero-bild img{width:100%;height:100%;object-fit:cover;}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--verlauf-bild);}
@media (min-width:1024px){.hero::after{background:var(--verlauf-bild-quer),var(--verlauf-bild);}}
.hero-innen{position:relative;padding-block:clamp(96px,14vw,180px) clamp(56px,7vw,104px);
  display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(560px,84vh,860px);}
.hero .display{color:var(--weiss);max-width:16ch;text-shadow:0 2px 24px rgba(12,31,49,.35);}
.hero .lead{color:var(--text-hell);margin-top:var(--s5);max-width:52ch;}
.hero .btn-gruppe{margin-top:var(--s7);}
.hero-marken{margin-top:var(--s8);padding-top:var(--s5);border-top:1px solid var(--linie-hell);
  display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);align-items:center;}
.hero-marken span{font-family:var(--schrift-display);font-weight:600;font-size:.82rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text-hell-gedaempft);}

.hero-kacheln{position:absolute;right:var(--rand-gross);bottom:clamp(56px,7vw,104px);z-index:2;
  display:none;gap:var(--s3);}
@media (min-width:1180px){.hero-kacheln{display:flex;}}
.hero-kachel{background:rgba(255,255,255,.10);border:1px solid var(--linie-hell-stark);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-radius:var(--r-mittel);padding:20px 24px;min-width:172px;}
.hero-kachel b{display:block;font-family:var(--schrift-display);font-weight:800;font-size:2rem;
  line-height:1;letter-spacing:-.04em;color:var(--weiss);}
.hero-kachel small{display:block;margin-top:8px;font-size:.8rem;line-height:1.4;color:var(--text-hell-gedaempft);}

/* Kompakter Seitenkopf fuer Unterseiten */
.seitenkopf{position:relative;isolation:isolate;background:var(--ink);color:var(--text-hell);overflow:hidden;}
.seitenkopf-bild{position:absolute;inset:0;z-index:-2;}
.seitenkopf-bild img{width:100%;height:100%;object-fit:cover;opacity:.55;}
.seitenkopf::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(12,31,49,.86) 0%,rgba(12,31,49,.72) 60%,rgba(12,31,49,.94) 100%);}
.seitenkopf-innen{padding-block:clamp(112px,12vw,168px) clamp(48px,6vw,84px);}
.seitenkopf h1{color:var(--weiss);font-family:var(--schrift-display);font-weight:800;
  font-size:clamp(2.15rem,1.3rem + 3.4vw,4.1rem);line-height:1.02;letter-spacing:-.032em;max-width:20ch;}
.seitenkopf .lead{color:var(--text-hell);margin-top:var(--s5);}

/* ============================ 8 · Brotkrumen ============================== */
.brotkrumen{font-size:.82rem;color:var(--text-hell-gedaempft);margin-bottom:var(--s5);}
.brotkrumen ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.brotkrumen a{color:var(--text-hell-gedaempft);text-decoration:none;border-bottom:1px solid transparent;}
.brotkrumen a:hover{color:var(--weiss);border-bottom-color:var(--marke-signal);}
.brotkrumen li + li::before{content:"/";margin-right:6px;opacity:.5;}
.brotkrumen [aria-current]{color:var(--weiss);}

/* ============================== 9 · Karten =============================== */
.karte{
  background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-mittel);
  padding:var(--s6);display:flex;flex-direction:column;gap:var(--s4);height:100%;
  transition:transform var(--dur-micro) var(--ease-out),box-shadow var(--dur-micro) var(--ease-out),
             border-color var(--dur-micro) var(--ease-out);
}
.karte:hover{transform:translateY(-3px);box-shadow:var(--schatten-hover);border-color:transparent;}
.karte p{color:var(--text-gedaempft);font-size:.98rem;}
.karte .textlink{margin-top:auto;align-self:flex-start;}
.karte-still:hover{transform:none;box-shadow:none;border-color:var(--linie);}
.flaeche .karte{background:var(--weiss);}
.dunkel .karte{background:rgba(255,255,255,.055);border-color:var(--linie-hell);color:var(--text-hell);}
.dunkel .karte:hover{background:rgba(255,255,255,.09);border-color:var(--linie-hell-stark);box-shadow:none;}
.dunkel .karte p{color:var(--text-hell-gedaempft);}
.dunkel .karte h3,.dunkel .karte h4{color:var(--weiss);}

.karte-signal{background:var(--verlauf-signal);border-color:transparent;color:#2A1400;}
.karte-signal p{color:rgba(42,20,0,.78);}
.karte-signal h3{color:#2A1400;}

.symbol{width:52px;height:52px;border-radius:14px;background:rgba(17,57,92,.08);
  display:grid;place-items:center;flex:none;color:var(--marke-tief);}
.symbol svg{width:25px;height:25px;}
.dunkel .symbol{background:rgba(249,166,79,.14);color:var(--marke-signal-2);}
.karte-signal .symbol{background:rgba(42,20,0,.12);color:#2A1400;}

.bildkarte{position:relative;border-radius:var(--r-mittel);overflow:hidden;background:var(--ink);
  display:flex;flex-direction:column;justify-content:flex-end;min-height:340px;padding:var(--s6);
  color:var(--weiss);text-decoration:none;isolation:isolate;
  transition:transform var(--dur-micro) var(--ease-out),box-shadow var(--dur-micro) var(--ease-out);}
.bildkarte img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform 560ms var(--ease-out);}
.bildkarte::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(12,31,49,.20) 0%,rgba(12,31,49,.42) 38%,rgba(12,31,49,.78) 68%,rgba(12,31,49,.94) 100%);}
.bildkarte:hover{transform:translateY(-3px);box-shadow:var(--schatten-hover);}
.bildkarte:hover img{transform:scale(1.045);}
.bildkarte h3{color:var(--weiss);}
.bildkarte p{color:rgba(234,241,246,.86);font-size:.95rem;margin-top:10px;}
.bildkarte-pille{position:absolute;top:var(--s5);left:var(--s5);z-index:1;
  background:var(--marke-signal);color:#2A1400;font-family:var(--schrift-display);font-weight:700;
  font-size:.78rem;letter-spacing:.04em;padding:7px 14px;border-radius:var(--r-pille);}

/* Auf einen Blick */
.blick{border:1px solid var(--linie);border-left:4px solid var(--marke-signal);
  border-radius:var(--r-mittel);background:var(--flaeche-warm);padding:var(--s6);}
.blick h2{font-size:clamp(1.15rem,1.05rem + .4vw,1.35rem);letter-spacing:-.015em;line-height:1.3;}
.blick ul{list-style:none;margin-top:var(--s4);display:grid;gap:12px;}
.blick li{display:flex;gap:12px;font-size:.98rem;line-height:1.6;}
.blick li::before{content:"";flex:none;width:8px;height:8px;margin-top:10px;border-radius:50%;background:var(--marke-signal);}
.blick li b{color:var(--marke-tief);font-weight:600;}

/* Liste mit Haken */
.haken{list-style:none;display:grid;gap:13px;}
.haken li{display:flex;gap:13px;line-height:1.6;}
.haken li::before{
  content:"";flex:none;width:21px;height:21px;margin-top:4px;border-radius:50%;
  background:var(--marke-tief) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/13px no-repeat;
}
.dunkel .haken li::before{background-color:var(--marke-signal);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A1400' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");}
.kreuz{list-style:none;display:grid;gap:13px;}
.kreuz li{display:flex;gap:13px;line-height:1.6;color:var(--text-gedaempft);}
.kreuz li::before{
  content:"";flex:none;width:21px;height:21px;margin-top:4px;border-radius:50%;
  background:rgba(12,31,49,.10) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2357697A' stroke-width='3.4' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* ============================ 10 · Ablaufschritte ========================= */
.schritte{counter-reset:schritt;display:grid;gap:var(--s4);}
@media (min-width:768px){.schritte{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1180px){.schritte{grid-template-columns:repeat(4,1fr);}}
.schritt{counter-increment:schritt;position:relative;background:var(--weiss);border:1px solid var(--linie);
  border-radius:var(--r-mittel);padding:var(--s6);display:flex;flex-direction:column;gap:var(--s3);
  transition:transform var(--dur-micro) var(--ease-out),box-shadow var(--dur-micro) var(--ease-out);}
.schritt:hover{transform:translateY(-3px);box-shadow:var(--schatten-hover);}
.schritt::before{content:"0" counter(schritt);font-family:var(--schrift-display);font-weight:800;
  font-size:2.6rem;line-height:1;letter-spacing:-.05em;color:var(--marke-tief);opacity:.16;}
.schritt-dauer{font-family:var(--schrift-display);font-weight:700;font-size:.76rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--marke-signal-text);}
.schritt p{color:var(--text-gedaempft);font-size:.96rem;}
.schritt.aktiv{background:var(--verlauf-signal);border-color:transparent;}
.schritt.aktiv::before{color:#2A1400;opacity:.28;}
.schritt.aktiv p{color:rgba(42,20,0,.82);}
.schritt.aktiv h3,.schritt.aktiv .schritt-dauer{color:#2A1400;}

/* Vertikale Zeitleiste */
.zeitleiste{list-style:none;display:grid;gap:0;position:relative;}
.zeitleiste li{position:relative;padding:0 0 var(--s7) 44px;}
.zeitleiste li::before{content:"";position:absolute;left:11px;top:26px;bottom:0;width:2px;background:var(--linie);}
.zeitleiste li:last-child{padding-bottom:0;}
.zeitleiste li:last-child::before{display:none;}
.zeitleiste li::after{content:"";position:absolute;left:4px;top:8px;width:16px;height:16px;border-radius:50%;
  background:var(--weiss);border:3px solid var(--marke-signal);}
.zeitleiste h3{margin-bottom:10px;}
.zeitleiste p{color:var(--text-gedaempft);}
.dunkel .zeitleiste li::before{background:var(--linie-hell);}
.dunkel .zeitleiste li::after{background:var(--ink);}
.dunkel .zeitleiste p{color:var(--text-hell-gedaempft);}

/* ============================= 11 · Akkordeon ============================= */
.akkordeon{border-top:1px solid var(--linie);}
.frage{border-bottom:1px solid var(--linie);}
.frage-knopf{
  width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s5);
  background:none;border:0;padding:24px 0;text-align:left;cursor:pointer;color:var(--text);
  font-family:var(--schrift-display);font-weight:700;
  font-size:clamp(1.02rem,.98rem + .35vw,1.2rem);line-height:1.4;letter-spacing:-.012em;
  transition:color var(--dur-micro) var(--ease-out);
}
.frage-knopf:hover{color:var(--marke-tief);}
.frage-knopf .plus{flex:none;width:30px;height:30px;border-radius:50%;background:var(--flaeche);
  display:grid;place-items:center;position:relative;margin-top:2px;
  transition:background-color var(--dur-micro) var(--ease-out),transform var(--dur-ui) var(--ease-out);}
.frage-knopf .plus::before,.frage-knopf .plus::after{content:"";position:absolute;background:var(--marke-tief);
  transition:opacity var(--dur-ui) var(--ease-out),background-color var(--dur-micro) var(--ease-out);}
.frage-knopf .plus::before{width:12px;height:2px;}
.frage-knopf .plus::after{width:2px;height:12px;}
.frage-knopf:hover .plus{background:var(--marke-signal);}
.frage-knopf:hover .plus::before,.frage-knopf:hover .plus::after{background:#2A1400;}
.frage-knopf[aria-expanded="true"] .plus{background:var(--marke-signal);transform:rotate(180deg);}
.frage-knopf[aria-expanded="true"] .plus::before,.frage-knopf[aria-expanded="true"] .plus::after{background:#2A1400;}
.frage-knopf[aria-expanded="true"] .plus::after{opacity:0;}
.frage-inhalt{display:grid;grid-template-rows:0fr;transition:grid-template-rows 400ms var(--ease-out);}
/* Der Knopf steckt in einem h3 — deshalb ueber die Elternebene schalten,
   nicht ueber den Geschwister-Selektor. Die JS-Klasse .offen ist der
   verlaessliche Weg, :has() der Zusatz fuer den Fall ohne JS-Klasse.        */
.frage.offen > .frage-inhalt{grid-template-rows:1fr;}
.frage:has(.frage-knopf[aria-expanded="true"]) > .frage-inhalt{grid-template-rows:1fr;}
.frage-inhalt > div{overflow:hidden;min-height:0;}
.frage-inhalt p{padding-bottom:26px;max-width:74ch;color:var(--text-gedaempft);}
.frage-inhalt p:first-child{padding-top:0;}
.frage-inhalt p + p{padding-top:0;margin-top:-12px;}
.frage-inhalt .antwort-kern{color:var(--text);font-weight:600;}
.dunkel .akkordeon,.dunkel .frage{border-color:var(--linie-hell);}
.dunkel .frage-knopf{color:var(--weiss);}
.dunkel .frage-knopf .plus{background:rgba(255,255,255,.10);}
.dunkel .frage-knopf .plus::before,.dunkel .frage-knopf .plus::after{background:var(--weiss);}
.dunkel .frage-inhalt p{color:var(--text-hell-gedaempft);}
.dunkel .frage-inhalt .antwort-kern{color:var(--weiss);}

/* ============================= 12 · Tabellen ============================== */
.tabelle-huelle{overflow-x:auto;border:1px solid var(--linie);border-radius:var(--r-mittel);background:var(--weiss);
  -webkit-overflow-scrolling:touch;}
table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:560px;}
caption{text-align:left;padding:var(--s5) var(--s5) 0;font-size:.85rem;color:var(--text-gedaempft);}
th,td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--linie);vertical-align:top;line-height:1.55;}
thead th{font-family:var(--schrift-display);font-weight:700;font-size:.82rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--marke-tief);background:var(--flaeche);}
tbody tr:last-child td{border-bottom:0;}
tbody tr:hover{background:rgba(17,57,92,.028);}
td b{color:var(--marke-tief);}

/* ============================ 13 · Kennzahlen ============================= */
.kennzahlen{display:grid;gap:var(--s5);}
@media (min-width:640px){.kennzahlen{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1024px){.kennzahlen{grid-template-columns:repeat(4,1fr);gap:var(--s6);}}
.kennzahl{padding:var(--s5) 0;border-top:2px solid var(--marke-signal);}
.kennzahl b{display:block;font-family:var(--schrift-display);font-weight:800;
  font-size:clamp(2.2rem,1.6rem + 2vw,3rem);line-height:1;letter-spacing:-.04em;color:var(--marke-tief);}
.kennzahl span{display:block;margin-top:10px;font-size:.92rem;line-height:1.5;color:var(--text-gedaempft);}
.dunkel .kennzahl b{color:var(--weiss);}
.dunkel .kennzahl span{color:var(--text-hell-gedaempft);}
.dunkel .kennzahl{border-top-color:var(--marke-signal);}

/* ============================ 14 · Zitat / Person ========================= */
.zitat{border-left:3px solid var(--marke-signal);padding-left:var(--s5);}
.zitat p{font-family:var(--schrift-display);font-weight:600;
  font-size:clamp(1.15rem,1.02rem + .7vw,1.6rem);line-height:1.42;letter-spacing:-.018em;color:var(--text);}
.zitat cite{display:block;margin-top:var(--s4);font-style:normal;font-size:.9rem;color:var(--text-gedaempft);}
.dunkel .zitat p{color:var(--weiss);}
.dunkel .zitat cite{color:var(--text-hell-gedaempft);}

/* ============================== 15 · Abschluss-CTA ======================== */
.abschluss{position:relative;isolation:isolate;overflow:hidden;background:var(--ink);color:var(--text-hell);}
.abschluss img.hintergrund{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.42;}
.abschluss::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(12,31,49,.80),rgba(12,31,49,.94));}
.abschluss h2{color:var(--weiss);}
.abschluss .lead{color:var(--text-hell);margin-top:var(--s5);}
.abschluss-kontakt{display:grid;gap:var(--s5);margin-top:var(--s7);}
@media (min-width:768px){.abschluss-kontakt{grid-template-columns:repeat(2,1fr);gap:var(--s6);}}
.abschluss-kontakt a{display:flex;align-items:center;gap:var(--s4);text-decoration:none;color:var(--weiss);
  padding:var(--s5);border:1px solid var(--linie-hell);border-radius:var(--r-mittel);
  transition:background-color var(--dur-micro) var(--ease-out),border-color var(--dur-micro) var(--ease-out),transform var(--dur-micro) var(--ease-out);}
.abschluss-kontakt a:hover{background:rgba(255,255,255,.07);border-color:var(--linie-hell-stark);transform:translateY(-2px);}
.abschluss-kontakt .symbol{background:rgba(249,166,79,.16);color:var(--marke-signal-2);}
.abschluss-kontakt small{display:block;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-hell-gedaempft);font-family:var(--schrift-display);font-weight:700;}
.abschluss-kontakt b{display:block;font-family:var(--schrift-display);font-weight:800;
  font-size:clamp(1.05rem,.95rem + .5vw,1.3rem);letter-spacing:-.02em;margin-top:4px;color:var(--weiss);
  overflow-wrap:anywhere;}

/* ============================== 16 · Fusszeile ============================ */
.fuss{background:var(--ink);color:var(--text-hell-gedaempft);padding-block:var(--sektion-kompakt) var(--s6);
  font-size:.93rem;}
.fuss-raster{display:grid;gap:var(--s7);}
@media (min-width:768px){.fuss-raster{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1024px){.fuss-raster{grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:var(--s6);}}
.fuss h3{font-family:var(--schrift-display);font-weight:700;font-size:.82rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--weiss);margin-bottom:var(--s4);}
.fuss ul{list-style:none;display:grid;gap:11px;}
.fuss a{color:var(--text-hell-gedaempft);text-decoration:none;
  transition:color var(--dur-micro) var(--ease-out);}
.fuss a:hover{color:var(--marke-signal-2);}
.fuss-logo img{height:56px;width:auto;margin-bottom:var(--s5);}
.fuss address{font-style:normal;line-height:1.8;}
.fuss-unten{margin-top:var(--s8);padding-top:var(--s5);border-top:1px solid var(--linie-hell);
  display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);align-items:center;justify-content:space-between;
  font-size:.85rem;}
.fuss-unten nav{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5);}

/* ============================= 17 · Cookie-Banner ========================= */
.cookie{position:fixed;left:var(--s4);right:var(--s4);bottom:var(--s4);z-index:200;max-width:520px;
  background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-mittel);
  box-shadow:var(--schatten-hart);padding:var(--s6);display:none;}
.cookie.sichtbar{display:block;}
.cookie h2{font-size:1.15rem;letter-spacing:-.015em;line-height:1.3;}
.cookie p{font-size:.9rem;color:var(--text-gedaempft);margin-top:12px;}
.cookie-optionen{margin-top:var(--s5);display:grid;gap:12px;}
.cookie-option{display:flex;gap:12px;align-items:flex-start;font-size:.88rem;line-height:1.5;}
.cookie-option input{margin-top:3px;width:18px;height:18px;accent-color:var(--marke-tief);flex:none;}
.cookie-option b{display:block;color:var(--text);font-weight:600;}
.cookie-option span{color:var(--text-gedaempft);}
.cookie-knoepfe{margin-top:var(--s5);display:grid;gap:10px;}
@media (min-width:520px){.cookie-knoepfe{grid-template-columns:1fr 1fr;}
  .cookie-knoepfe .btn:first-child{grid-column:1/-1;}}
.cookie .btn{padding:13px 18px;min-height:46px;font-size:.9rem;}
.cookie-fuss{margin-top:var(--s4);font-size:.8rem;color:var(--text-gedaempft);}
.cookie-fuss a{color:var(--marke-tief);}
.cookie-schalter{position:fixed;left:16px;bottom:16px;z-index:150;width:44px;height:44px;border-radius:50%;
  background:var(--weiss);border:1px solid var(--linie);box-shadow:var(--schatten-ruhe);cursor:pointer;
  display:grid;place-items:center;color:var(--marke-tief);
  transition:transform var(--dur-micro) var(--ease-out),box-shadow var(--dur-micro) var(--ease-out);}
.cookie-schalter:hover{transform:translateY(-2px);box-shadow:var(--schatten-hover);}
.cookie-schalter svg{width:20px;height:20px;}

/* Einwilligungs-Platzhalter fuer externe Inhalte */
.extern{border:1px solid var(--linie);border-radius:var(--r-mittel);background:var(--flaeche);
  padding:var(--s7) var(--s6);text-align:center;display:grid;gap:var(--s4);place-items:center;}
.extern p{color:var(--text-gedaempft);font-size:.95rem;max-width:52ch;}
.extern iframe{width:100%;height:420px;border:0;border-radius:var(--r-mittel);display:block;}

/* ============================== 18 · Rechtstexte ========================== */
.recht{max-width:78ch;}
.recht h2{font-size:clamp(1.45rem,1.2rem + 1.1vw,2rem);margin-top:var(--s8);margin-bottom:var(--s4);
  padding-top:var(--s5);border-top:1px solid var(--linie);}
.recht h2:first-of-type{margin-top:0;border-top:0;padding-top:0;}
.recht h3{font-size:1.1rem;margin-top:var(--s6);margin-bottom:12px;}
.recht p,.recht li{font-size:.98rem;line-height:1.78;color:var(--text-gedaempft);}
.recht p + p{margin-top:var(--s4);}
.recht ul,.recht ol{margin:var(--s4) 0;padding-left:22px;display:grid;gap:9px;}
.recht li{list-style:disc;}
.recht ol li{list-style:decimal;}
.recht strong{color:var(--text);}
.recht address{font-style:normal;line-height:1.9;color:var(--text);font-size:1rem;}
.recht .tabelle-huelle{margin:var(--s5) 0;}
.recht table{min-width:480px;font-size:.9rem;}
.hinweis{background:var(--flaeche-warm);border-left:4px solid var(--marke-signal);
  border-radius:0 var(--r-klein) var(--r-klein) 0;padding:var(--s5);margin:var(--s6) 0;}
.hinweis p{color:var(--text);font-size:.93rem;margin:0;}
.stand{font-size:.85rem;color:var(--text-gedaempft);margin-top:var(--s7);padding-top:var(--s5);
  border-top:1px solid var(--linie);}

/* ============================== 19 · Diverses ============================= */
.pillen{display:flex;flex-wrap:wrap;gap:10px;}
.pille{display:inline-flex;align-items:center;gap:8px;padding:8px 15px;border-radius:var(--r-pille);
  border:1px solid var(--linie);font-size:.86rem;font-weight:500;color:var(--text-gedaempft);background:var(--weiss);}
.pille-signal{background:rgba(241,132,49,.13);border-color:rgba(241,132,49,.32);color:var(--marke-signal-text);font-weight:600;}
.dunkel .pille{background:rgba(255,255,255,.06);border-color:var(--linie-hell);color:var(--text-hell-gedaempft);}

.medien{border-radius:var(--r-gross);overflow:hidden;position:relative;background:var(--flaeche);}
.medien img{width:100%;height:100%;object-fit:cover;}
.medien-4-3{aspect-ratio:4/3;}
.medien-3-2{aspect-ratio:3/2;}
.medien-16-9{aspect-ratio:16/9;}
.medien-hoch{aspect-ratio:4/5;}
.medien-notiz{position:absolute;left:var(--s5);bottom:var(--s5);right:var(--s5);
  background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-radius:var(--r-klein);padding:14px 18px;font-size:.86rem;line-height:1.5;color:var(--text);}
.medien-notiz b{display:block;font-family:var(--schrift-display);font-weight:700;color:var(--marke-tief);}

.trenner{height:1px;background:var(--linie);border:0;margin:0;}
.dunkel .trenner{background:var(--linie-hell);}

.logoleiste{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s5) var(--s8);justify-content:center;}
.logoleiste img{height:38px;width:auto;opacity:.62;filter:grayscale(1);
  transition:opacity var(--dur-micro) var(--ease-out),filter var(--dur-micro) var(--ease-out),transform var(--dur-micro) var(--ease-out);}
.logoleiste a:hover img,.logoleiste img:hover{opacity:1;filter:grayscale(0);transform:translateY(-2px);}

.notizbox{background:var(--flaeche);border:1px solid var(--linie);border-radius:var(--r-mittel);padding:var(--s6);}
.notizbox h3{margin-bottom:var(--s3);}
.notizbox p{color:var(--text-gedaempft);font-size:.96rem;}

/* Rechner */
.rechner{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r-gross);
  padding:var(--s7) var(--s6);box-shadow:var(--schatten-ruhe);}
@media (min-width:768px){.rechner{padding:var(--s7);}}
.rechner-feld{margin-bottom:var(--s6);}
.rechner-feld label{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);
  font-family:var(--schrift-display);font-weight:700;font-size:.95rem;margin-bottom:14px;}
.rechner-feld output{font-family:var(--schrift-display);font-weight:800;font-size:1.15rem;color:var(--marke-tief);
  letter-spacing:-.02em;}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:3px;
  background:var(--linie);outline-offset:6px;}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:26px;border-radius:50%;
  background:var(--marke-signal);border:3px solid var(--weiss);box-shadow:0 2px 8px rgba(12,31,49,.25);cursor:pointer;}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--marke-signal);
  border:3px solid var(--weiss);box-shadow:0 2px 8px rgba(12,31,49,.25);cursor:pointer;}
.rechner-ergebnis{margin-top:var(--s6);padding-top:var(--s6);border-top:1px solid var(--linie);
  display:grid;gap:var(--s5);}
@media (min-width:640px){.rechner-ergebnis{grid-template-columns:repeat(3,1fr);}}
.rechner-ergebnis div b{display:block;font-family:var(--schrift-display);font-weight:800;
  font-size:clamp(1.6rem,1.3rem + 1.2vw,2.2rem);line-height:1;letter-spacing:-.035em;color:var(--marke-tief);}
.rechner-ergebnis div span{display:block;margin-top:8px;font-size:.86rem;color:var(--text-gedaempft);line-height:1.45;}
.rechner-fuss{margin-top:var(--s5);font-size:.8rem;color:var(--text-gedaempft);line-height:1.6;}

/* 404 */
.fehlerseite{min-height:64vh;display:grid;place-items:center;text-align:center;}
.fehlerseite .display{color:var(--marke-tief);}

/* ======================= 20 · Motion (nur mit JS aktiv) =================== */
/* P1: Jede Versteck-Regel steht hinter html.js UND hinter no-preference. */
@media (prefers-reduced-motion:no-preference){
  html.js .reveal{opacity:0;transform:translateY(26px);}
  html.js .reveal.sichtbar{opacity:1;transform:none;
    transition:opacity var(--dur-reveal) var(--ease-out) var(--verzug,0ms),
               transform var(--dur-reveal) var(--ease-out) var(--verzug,0ms);}
  html.js .hero-auftritt > *{opacity:0;transform:translateY(20px);}
  html.js .hero-auftritt.los > *{opacity:1;transform:none;
    transition:opacity 760ms var(--ease-out) var(--auftritt,0ms),
               transform 760ms var(--ease-out) var(--auftritt,0ms);}
  html.js .hero-bild img{transform:scale(1.07);}
  html.js .hero-bild.los img{transform:scale(1);transition:transform 1500ms var(--ease-out);}
}

/* P4: Globaler Reset — steht bewusst am Dateiende. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .reveal,.hero-auftritt > *{opacity:1!important;transform:none!important;}
  .hero-bild img{transform:none!important;}
  .karte:hover,.schritt:hover,.btn:hover,.bildkarte:hover,.abschluss-kontakt a:hover,.cookie-schalter:hover{transform:none!important;}
  .bildkarte:hover img,.logoleiste a:hover img{transform:none!important;}
}

/* ============================== 21 · Druck ================================ */
@media print{
  .kopf,.overlay,.cookie,.cookie-schalter,.abschluss,.burger,.sprunglink{display:none!important;}
  body{background:#fff;color:#000;font-size:11pt;}
  .hero,.seitenkopf,.dunkel{background:#fff!important;color:#000!important;}
  .hero::after,.seitenkopf::after,.hero-bild,.seitenkopf-bild{display:none!important;}
  .hero .display,.seitenkopf h1,.dunkel h2,.dunkel h3{color:#000!important;}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;}
  .reveal{opacity:1!important;transform:none!important;}
}