@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 800;font-display:swap;src:url('fonts/bricolage-grotesque-400-800-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, U+1E9E;}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:400 800;font-display:swap;src:url('fonts/bricolage-grotesque-400-800-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:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-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, U+1E9E;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-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:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-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, U+1E9E;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-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:'IBM Plex Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url('fonts/ibm-plex-sans-400-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, U+1E9E;}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 600;font-display:swap;src:url('fonts/ibm-plex-sans-400-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;}

/* Metrik-Fallback gegen Layout-Shift, solange Plex Sans lädt */
@font-face{font-family:'PlexFallback';src:local('Helvetica Neue'),local('Arial');
  size-adjust:104%;ascent-override:92%;descent-override:24%;line-gap-override:0%;}

:root{
  /* Heller Modus ist der Standard; dunkel nur auf ausdrücklichen Wunsch. */
  color-scheme: light;

  --paper:       light-dark(#F5F2EA, #0F1A22);
  --surface:     light-dark(#FFFFFF, #17242E);
  --ink:         light-dark(#14212B, #E8EDF1);
  --ink-2:       light-dark(#4A5B67, #A0B0BC);
  --rule:        light-dark(#D8D3C8, #2A3B47);
  --rule-strong: light-dark(#868C94, #676D75);
  --blau:        light-dark(#1B4F7E, #5AA9E6);
  --blau-tief:   light-dark(#143C61, #7CBCEC);
  --kupfer:      light-dark(#A34813, #E08A4C);
  --auf-blau:    light-dark(#FFFFFF, #14212B);
  /* Abgesetzte Fläche: Kopf, Fuß und Förderband teilen sie sich. */
  --flaeche:     light-dark(#E9E3D5, #17242E);
  --flaeche-rule:light-dark(#D2CABA, #2C3F4D);

  /* Wärmebild-Rampe: kalt → warm, vier Stufen wie auf der Falschfarbenskala.
     Bewusst abgedunkelt, damit jeder Stopp als Text noch ≥ 4.5:1 auf dem
     Papierton liegt — ein echtes IR-Gelb wäre unlesbar. */
  --ir-kalt: light-dark(#1B4F7E, #5AA9E6);
  --ir-gruen:light-dark(#1B6E4B, #4FBF8B);
  --ir-mitte:light-dark(#8A6100, #E8C15C);
  --ir-warm: light-dark(#A34813, #F0A35F);

  --sans: 'IBM Plex Sans','PlexFallback',system-ui,sans-serif;
  --display: 'Bricolage Grotesque','PlexFallback',system-ui,sans-serif;
  --mono: 'IBM Plex Mono',ui-monospace,'SF Mono',monospace;

  --kopf-hoehe: 5.35rem;
  --rand: clamp(1.25rem, 5vw, 5rem);
  --spalte: min(100% - 2*var(--rand), 78rem);
}

@supports not (color: light-dark(#000,#fff)){
  :root{
    --paper:#F5F2EA; --surface:#FFFFFF; --ink:#14212B; --ink-2:#4A5B67;
    --rule:#D8D3C8; --rule-strong:#868C94; --blau:#1B4F7E; --blau-tief:#143C61;
    --kupfer:#A34813; --auf-blau:#FFFFFF;
    --ir-kalt:#1B4F7E; --ir-gruen:#1B6E4B; --ir-mitte:#8A6100; --ir-warm:#A34813;
    --flaeche:#E9E3D5; --flaeche-rule:#D2CABA;
  }
  :root[data-thema="dark"]{
      --paper:#0F1A22; --surface:#17242E; --ink:#E8EDF1; --ink-2:#A0B0BC;
      --rule:#2A3B47; --rule-strong:#676D75; --blau:#5AA9E6; --blau-tief:#7CBCEC;
      --kupfer:#E08A4C; --auf-blau:#14212B;
      --ir-kalt:#5AA9E6; --ir-gruen:#4FBF8B; --ir-mitte:#E8C15C; --ir-warm:#F0A35F;
      --flaeche:#17242E; --flaeche-rule:#2C3F4D;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{
  hyphens:auto;-webkit-hyphens:auto;
  -webkit-text-size-adjust:100%;
}
/* Konservativ trennen — Safari kennt hyphenate-limit-chars bis heute nicht */
p,li,dd,summary{
  hyphenate-limit-chars:6 3 2;
  -webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:2;
}
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth} }
/* Anker nicht unter die feste Kopfleiste schieben */
html{scroll-padding-block-start:5.8rem}

body{
  margin:0;background:var(--paper);color:var(--ink);
  padding-block-start:var(--kopf-hoehe);
  font-family:var(--sans);font-size:clamp(1rem,.96rem + .2vw,1.125rem);
  line-height:1.65;font-synthesis-weight:none;
}
:where(a){color:var(--blau);text-underline-offset:.2em;text-decoration-thickness:1px}
:where(a):hover{color:var(--blau-tief)}
:focus-visible{outline:2px solid var(--kupfer);outline-offset:3px;border-radius:2px}
img,svg{max-width:100%;height:auto;display:block}

h1,h2,h3{
  font-family:var(--display);font-weight:600;line-height:1.06;
  text-wrap:balance;margin:0;letter-spacing:-.015em;
  font-optical-sizing:auto;
}
h1{font-size:clamp(2.4rem,1.4rem + 4.2vw,5rem);font-weight:700;letter-spacing:-.03em}
h2{font-size:clamp(1.9rem,1.3rem + 2.4vw,3.1rem)}
h3{font-size:clamp(1.15rem,1.05rem + .5vw,1.4rem);line-height:1.2}
p{text-wrap:pretty;margin:0}

.spalte{width:var(--spalte);margin-inline:auto}
.zahl,.tab{font-variant-numeric:tabular-nums}

/* Marginalie: Bauzeichnungs-Vokabular — Mono-Label an einer Haarlinie */
.marke{
  font-family:var(--mono);font-size:.72rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
  display:flex;align-items:center;gap:.85rem;margin:0 0 1.6rem;
}
.marke::before{content:"";inline-size:2.5rem;block-size:1px;background:var(--kupfer);flex:none}

section{padding-block:clamp(3.5rem,8vw,7rem);border-block-start:1px solid var(--rule)}
section:first-of-type{border-block-start:0}

/* ---------- Kopf ---------- */
.scroll-wache{block-size:1px}

/* Fest statt klebrig: Die Leiste schrumpft beim Scrollen von 85 auf 50 px.
   Im Fluss verschiebt das beim Neuladen einer gescrollten Seite das ganze
   Dokument — gemessen CLS 0,16. Außerhalb des Flusses kostet es nichts. */
.kopf{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:20;
  border-block-end:1px solid transparent;
  background:color-mix(in srgb, var(--flaeche) 72%, transparent);
  transition:background .2s ease-out, border-color .2s ease-out;
}
/* Ohne backdrop-filter würde man den Text durch die halbdurchsichtige
   Leiste hindurch lesen — dann lieber deckend. */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .kopf{-webkit-backdrop-filter:blur(14px) saturate(150%);
        backdrop-filter:blur(14px) saturate(150%)}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .kopf{background:var(--flaeche)}
}
.kopf.geschrumpft{
  background:color-mix(in srgb, var(--flaeche) 86%, transparent);
  border-block-end-color:var(--rule);
}

.kopf > div{
  width:var(--spalte);margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding-block:1.1rem;
  transition:padding-block .2s ease-out;
}
.kopf.geschrumpft > div{padding-block:.3rem}
.kopf nav{transition:font-size .2s ease-out}
.kopf.geschrumpft nav{font-size:.84rem}

.wortmarke{
  font-family:var(--display);font-weight:700;font-size:1.15rem;
  letter-spacing:.02em;text-decoration:none;color:var(--ink);
  display:flex;align-items:baseline;gap:.6rem;
  transition:font-size .2s ease-out;
}
.kopf.geschrumpft .wortmarke{font-size:.88rem}
.wortmarke svg{inline-size:1.6rem;flex:none;align-self:center;
  transition:inline-size .2s ease-out}
.kopf.geschrumpft .wortmarke svg{inline-size:1.05rem}
.wortmarke small{
  font-family:var(--mono);font-size:.62rem;font-weight:400;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-2);
  display:inline-block;max-inline-size:14rem;overflow:hidden;white-space:nowrap;
  transition:max-inline-size .2s ease-out, opacity .2s ease-out;
}
.kopf.geschrumpft .wortmarke small{max-inline-size:0;opacity:0}

.kopf .knopf{transition:background .15s ease-out, padding .2s ease-out, font-size .2s ease-out}
.kopf.geschrumpft .knopf{padding:.45rem .9rem;font-size:.86rem}

@media (prefers-reduced-motion: reduce){
  .kopf,.kopf > div,.wortmarke,.wortmarke svg,.wortmarke small,.kopf .knopf{
    transition:none;
  }
}
.kopf > div{flex-wrap:wrap}
.kopf nav{display:flex;gap:1.6rem;align-items:center;font-size:.92rem}
.kopf nav a:not(.knopf){color:var(--ink-2);text-decoration:none}
.kopf nav a:not(.knopf):hover{color:var(--ink)}
/* Aktueller Abschnitt */
.kopf nav a[aria-current="true"]:not(.knopf){color:var(--ink);position:relative}
.kopf nav a[aria-current="true"]:not(.knopf)::after{
  content:"";position:absolute;inset-inline:0;inset-block-end:-.35rem;
  block-size:2px;background:var(--kupfer);border-radius:2px;
}
@media (max-width:52rem){
  .kopf nav a[aria-current="true"]:not(.knopf){color:var(--kupfer)}
  .kopf nav a[aria-current="true"]:not(.knopf)::after{display:none}
}
.werkzeuge{display:flex;align-items:center;gap:1rem;flex:none}

/* Hamburger — drei Striche aus einem Element, mittlerer ist der Kasten selbst */
.menue{
  display:none;background:none;border:0;padding:0;cursor:pointer;color:var(--ink);
  inline-size:2rem;block-size:2rem;place-items:center;flex:none;
}
.menue span,.menue span::before,.menue span::after{
  display:block;inline-size:1.25rem;block-size:2px;background:currentColor;
  border-radius:2px;transition:transform .2s ease-out, opacity .15s ease-out;
}
.menue span{position:relative}
.menue span::before,.menue span::after{content:"";position:absolute;inset-inline-start:0}
.menue span::before{inset-block-start:-.4rem}
.menue span::after{inset-block-start:.4rem}
.kopf.offen .menue span{background:transparent}
.kopf.offen .menue span::before{transform:translateY(.4rem) rotate(45deg)}
.kopf.offen .menue span::after{transform:translateY(-.4rem) rotate(-45deg)}

@media (max-width:52rem){
  .menue{display:grid}
  .kopf nav{
    order:3;flex-basis:100%;flex-direction:column;align-items:stretch;
    gap:0;font-size:1rem;
    display:none;
  }
  .kopf.offen nav{display:flex}
  .kopf nav a:not(.knopf){
    padding-block:.85rem;border-block-start:1px solid var(--rule);color:var(--ink);
  }
  .kopf nav .knopf{margin-block:1rem .6rem;text-align:center}
  /* Beim Aufklappen nicht auch noch schrumpfen — das ruckelt. */
  .kopf.offen.geschrumpft > div{padding-block:.7rem}
}
/* Unterhalb der Menüschwelle wandert die Nummer ins aufklappbare Menü —
   in der Leiste passt sie neben Marke, Schalter und Menüknopf nicht mehr. */
.ruf-menue{display:none}
@media (max-width:52rem){
  .ruf{display:none}
  .kopf nav .ruf-menue{display:block;color:var(--blau);font-weight:600;border-block-start:0}
}
@media (max-width:34rem){ .kopf .wortmarke small{display:none} }

/* Themenschalter — Text nur für Screenreader, sichtbar ist das Symbol */
.thema{
  font:inherit;cursor:pointer;color:var(--ink-2);
  background:none;border:0;border-radius:999px;
  inline-size:2rem;block-size:2rem;padding:0;flex:none;
  display:inline-grid;place-items:center;
  transition:color .15s ease-out;
}
.thema:hover{color:var(--ink)}
.thema-text{
  position:absolute;inline-size:1px;block-size:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;
}
.thema-sicht{
  inline-size:1rem;block-size:1rem;background:currentColor;
  -webkit-mask:var(--mond) center / contain no-repeat;
  mask:var(--mond) center / contain no-repeat;
}
/* Im dunklen Modus bietet der Schalter das helle an — also Sonne zeigen. */
:root{
  --mond:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M21 13.2A9.2 9.2 0 1 1 10.8 3a7.2 7.2 0 0 0 10.2 10.2Z'/%3E%3C/svg%3E");
  --sonne:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.2' fill='%23000' stroke='none'/%3E%3Cpath d='M12 2.5v2.2M12 19.3v2.2M2.5 12h2.2M19.3 12h2.2M5.3 5.3l1.6 1.6M17.1 17.1l1.6 1.6M18.7 5.3l-1.6 1.6M6.9 17.1l-1.6 1.6'/%3E%3C/g%3E%3C/svg%3E");
}
:root[data-thema="light"] .thema-sicht{-webkit-mask-image:var(--mond);mask-image:var(--mond)}
:root[data-thema="dark"] .thema-sicht{-webkit-mask-image:var(--sonne);mask-image:var(--sonne)}

.knopf{
  display:inline-block;background:var(--blau);color:var(--auf-blau);
  font-weight:600;text-decoration:none;padding:.7rem 1.2rem;border-radius:3px;
  border:1px solid transparent;
  transition:background .15s ease-out;
}
.knopf:hover{background:var(--blau-tief);color:var(--auf-blau)}
.knopf.leer{background:transparent;color:var(--ink);border-color:var(--rule-strong)}
.knopf.leer:hover{background:transparent;border-color:var(--ink);color:var(--ink)}

/* ---------- Held ---------- */
.held{padding-block:clamp(3rem,7vw,6rem) clamp(3rem,7vw,5.5rem)}
.held-raster{display:grid;gap:clamp(2.5rem,5vw,4rem);align-items:center}
@media (min-width:60rem){ .held-raster{grid-template-columns:1.05fr .95fr} }
.held p.vorspann{
  font-size:clamp(1.1rem,1rem + .5vw,1.35rem);color:var(--ink-2);
  max-width:34ch;margin-block-start:1.6rem;
}
.tat{display:flex;flex-wrap:wrap;gap:.8rem;margin-block-start:2.2rem}
.tat-hinweis{
  font-size:.9rem;color:var(--ink-2);max-width:44ch;margin-block-start:1.1rem;
}
.abschluss{max-width:52ch;margin-block-start:2.5rem;color:var(--ink-2)}
.rechnung-tat{
  display:flex;flex-wrap:wrap;align-items:center;gap:.9rem;
  margin-block-start:1.6rem;padding-block-start:1.4rem;
  border-block-start:1px solid var(--rule);
}
.rechnung-tat span{font-size:.86rem;color:var(--ink-2);flex:1 1 12rem}
/* Telefonnummer im Kopf — bleibt auch auf schmalen Schirmen sichtbar */
.ruf{
  font-family:var(--mono);font-size:.85rem;font-weight:500;letter-spacing:.02em;
  text-decoration:none;color:var(--ink);white-space:nowrap;
}
.ruf:hover{color:var(--blau)}
@media (max-width:34rem){ .ruf{font-size:.78rem} }

.nachweis{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-2);margin-block-start:2.4rem;padding-block-start:1.1rem;
  border-block-start:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;
}
.nachweis span{white-space:nowrap}

/* Wärmeverlauf auf der Kernaussage. Ohne background-clip:text bleibt schlicht
   die Kupferfarbe stehen — nie color:transparent ohne Absicherung setzen. */
.warm{color:var(--ir-warm)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .warm{
    padding-inline-end:.04em;
    background-image:linear-gradient(96deg,
      var(--ir-kalt) 0%, var(--ir-gruen) 34%, var(--ir-mitte) 64%, var(--ir-warm) 92%);
    -webkit-background-clip:text;background-clip:text;
    color:transparent;
  }
}

/* ---------- Signatur: Gebäudeschnitt ---------- */
.schnitt{inline-size:100%}
.schnitt .linie{fill:none;stroke:var(--ink);stroke-width:1.25;
  vector-effect:non-scaling-stroke;stroke-linejoin:round}
.schnitt .duenn{fill:none;stroke:var(--rule-strong);stroke-width:1;vector-effect:non-scaling-stroke}
.schnitt .fuellung{fill:var(--surface)}
.schnitt .waerme{fill:none;stroke:var(--kupfer);stroke-width:1.75;
  vector-effect:non-scaling-stroke;stroke-linecap:round}
.schnitt marker path{fill:var(--kupfer)}
.schnitt text{font-family:var(--mono);font-size:11px;fill:var(--ink-2);letter-spacing:.06em}
.schnitt text.wert{fill:var(--kupfer);font-weight:500}
.schnitt figcaption,.bild-quelle{
  font-family:var(--mono);font-size:.68rem;color:var(--ink-2);
  letter-spacing:.06em;margin-block-start:.9rem;
}

@media (prefers-reduced-motion: no-preference){
  .schnitt .linie,.schnitt .duenn{
    stroke-dasharray:1;stroke-dashoffset:1;
    animation:zeichnen 1.1s cubic-bezier(.4,0,.2,1) forwards;
  }
  .schnitt .linie{animation-delay:.15s}
  .schnitt .duenn{animation-delay:.5s;animation-duration:.8s}
  .schnitt .waerme,.schnitt text{
    opacity:0;animation:auftauchen .5s ease-out 1.15s forwards;
  }
  @keyframes zeichnen{to{stroke-dashoffset:0}}
  @keyframes auftauchen{to{opacity:1}}
}

/* ---------- Unabhängigkeit ---------- */
.klartext .these{
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.5rem,1.1rem + 1.8vw,2.5rem);line-height:1.2;
  letter-spacing:-.02em;max-width:26ch;text-wrap:balance;
}
.klartext .these + p{
  color:var(--ink-2);max-width:46ch;margin-block-start:1.8rem;
}
.klartext{display:grid;gap:clamp(2rem,4vw,4rem)}
@media (min-width:60rem){ .klartext{grid-template-columns:1.1fr .9fr;align-items:start} }
.klartext > div:last-child{align-self:center}

/* ---------- Anliegen (Router) ---------- */
.anliegen{list-style:none;padding:0;margin:0;display:grid;gap:1px;background:var(--rule);
  border:1px solid var(--rule)}
@media (min-width:44rem){ .anliegen{grid-template-columns:1fr 1fr} }
.anliegen li{background:var(--paper)}
.anliegen a{
  display:flex;flex-direction:column;gap:.7rem;block-size:100%;
  padding:clamp(1.5rem,3vw,2.2rem);text-decoration:none;color:inherit;
  transition:background .15s ease-out;
}
.anliegen a:hover{background:var(--surface)}
.anliegen h3{color:var(--ink)}
.anliegen p{color:var(--ink-2);font-size:.95rem}
.anliegen .pfeil{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--blau);margin-block-start:auto;padding-block-start:.8rem;
}
@media (prefers-reduced-motion: no-preference){
  .anliegen .pfeil{transition:translate .15s ease-out}
  .anliegen a:hover .pfeil{translate:.3rem 0}
}

/* ---------- Band ----------
   Kein Sonderfall-CSS: die Sektion schreibt einfach die Farbtoken um,
   alles darin (Rechnung, Links, Linien) zieht automatisch nach. */
/* Abgesetzter Block, aber dem Thema folgend: im Hellen ein tieferer
   Papierton, im Dunklen die angehobene Fläche. Nur der Untergrund wird
   umgeschrieben — alle übrigen Token bleiben die der Seite. */
.band{
  --paper:var(--flaeche); --rule:var(--flaeche-rule);
  background:var(--paper);border-block-start:0;
}
.band-zahl{
  font-family:var(--display);font-weight:700;letter-spacing:-.04em;line-height:.9;
  font-size:clamp(4.5rem,3rem + 11vw,10rem);
  /* inline-block, damit der Verlauf über die Ziffern läuft und nicht über die
     ganze Spalte — sonst mischen sich Blau und Orange in der Mitte zu Grau. */
  display:inline-block;
  /* Das negative letter-spacing zieht die Elementbox schmaler als die letzte
     Glyphe breit ist. Ohne Polster endet der Verlauf vor dem %-Rand und der
     Rest wird transparent — sieht aus wie abgeschnitten. */
  padding-inline-end:.09em;
  background-image:linear-gradient(96deg,
    var(--ir-kalt) 0%, var(--ir-gruen) 36%, var(--ir-mitte) 70%, var(--ir-warm) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  margin:0 0 .6rem;
}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){
  .band-zahl{color:var(--ir-warm)}
}
.band-zahl + h2{
  font-family:var(--display);font-weight:500;letter-spacing:-.02em;
  font-size:clamp(1.4rem,1.1rem + 1.4vw,2.1rem);line-height:1.15;
  max-width:18ch;text-wrap:balance;
}

/* ---------- Leistungen: seine zwei Bereiche ---------- */
.leistungen{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);
  margin-block-start:2.5rem}
/* Subgrid, damit Marke, Überschrift, Vorspann und Liste über beide Spalten
   auf einer Linie liegen — sonst versetzt ein Umbruch die ganze rechte Seite. */
@media (min-width:56rem){
  .leistungen{grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto 1fr}
  .bereich{display:grid;grid-row:span 4;grid-template-rows:subgrid}
}
.bereich{background:var(--paper);padding:clamp(1.6rem,3vw,2.4rem)}
.bereich > h3{font-size:clamp(1.4rem,1.2rem + .9vw,1.9rem)}
.bereich > p{color:var(--ink-2);font-size:.95rem;margin-block-start:.7rem;max-width:42ch}
.bereich ul{list-style:none;padding:0;margin:1.8rem 0 0;display:grid;gap:1.3rem}
.bereich li{border-block-start:1px solid var(--rule);padding-block-start:1.3rem}
.bereich li:first-child{border-block-start:0;padding-block-start:0}
.bereich li b{display:block;font-weight:600;font-size:1.02rem}
.bereich li p{color:var(--ink-2);font-size:.92rem;margin-block-start:.4rem}
/* Siegel statt Etikett: grüner Stempel mit Haken, leicht schräg wie gestempelt. */
.gefoerdert{
  display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--mono);font-size:.66rem;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--ir-gruen);
  border:1.5px solid currentColor;border-radius:999px;
  background:color-mix(in srgb, var(--ir-gruen) 10%, transparent);
  padding:.25rem .7rem .25rem .55rem;
  margin-block-start:.8rem;rotate:-1.5deg;
}
.gefoerdert::before{
  content:"";inline-size:.85em;block-size:.85em;flex:none;
  background:currentColor;
  -webkit-mask:var(--haken) center / contain no-repeat;
  mask:var(--haken) center / contain no-repeat;
}
:root{
  --haken:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round' d='M4 12.5 9.5 18 20 6.5'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce){ .gefoerdert{rotate:none} }

/* ---------- Beispiele ---------- */
.beispiele{list-style:none;padding:0;margin:2.5rem 0 0;display:grid;gap:1px;
  background:var(--rule);border:1px solid var(--rule)}
@media (min-width:56rem){
  .beispiele{grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto 1fr}
  .beispiele > li{display:grid;grid-row:span 4;grid-template-rows:subgrid}
}
.beispiele > li{background:var(--paper);padding:clamp(1.6rem,3vw,2.4rem)}
.beispiele h3{margin-block-start:.6rem}
.beispiele > li > p{color:var(--ink-2);font-size:.95rem;margin-block-start:.9rem;max-width:40ch}
.werte{list-style:none;padding:0;margin:1.8rem 0 0;
  display:grid;grid-template-columns:1fr 1fr;gap:1.3rem 1rem}
.werte b{
  display:block;font-family:var(--display);font-weight:600;letter-spacing:-.02em;
  font-size:clamp(1.5rem,1.2rem + 1vw,2.1rem);line-height:1.05;
  font-variant-numeric:tabular-nums;
}
.werte span{
  display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-2);margin-block-start:.4rem;
}

.auffang{margin-block-start:1.6rem;color:var(--ink-2);font-size:.95rem}
.direkt .zeiten{font-size:.82rem;color:var(--ink-2);margin-block-start:.35rem}

/* ---------- Grundsätze: seine drei Säulen von der alten Seite,
   die Labels sind wörtlich seine — der Text darunter ist konkret. */
.grundsaetze{
  list-style:none;padding:0;
  margin-block-start:clamp(2rem,4vw,3rem);
  display:grid;gap:2rem;
}
@media (min-width:56rem){
  .grundsaetze{grid-template-columns:repeat(3,1fr);gap:clamp(2rem,4vw,3.5rem)}
}
.grundsaetze .marke{margin-block-end:.9rem}
.marke.mit-icon::before{display:none}
.marke svg{inline-size:1.2rem;block-size:1.2rem;flex:none;color:var(--kupfer)}
.grundsaetze b{
  display:block;font-family:var(--display);font-weight:600;
  font-size:1.15rem;line-height:1.25;letter-spacing:-.01em;
  margin-block-end:.5rem;text-wrap:balance;
}
.grundsaetze p:not(.marke){color:var(--ink-2);font-size:.95rem;max-width:38ch}

/* ---------- Förderrechnung ---------- */
.rechnung{
  border:1px solid var(--rule-strong);background:var(--surface);
  padding:clamp(1.5rem,3vw,2.5rem);max-width:34rem;
}
.rechnung dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:.9rem 1.5rem;
  font-variant-numeric:tabular-nums}
.rechnung dt{color:var(--ink-2)}
.rechnung dd{margin:0;font-family:var(--mono);font-weight:500;text-align:right;white-space:nowrap}
.rechnung .summe{border-block-start:1px solid var(--rule-strong);padding-block-start:.9rem;
  margin-block-start:.2rem}
.rechnung dt.summe,.rechnung dd.summe{font-weight:600;color:var(--ink)}
.rechnung dd.abzug{color:var(--blau)}
.fussnote{font-size:.82rem;color:var(--ink-2);margin-block-start:1.4rem;max-width:46ch}
.deckel{
  font-size:.82rem;color:var(--ink-2);margin-block-start:1rem;
  padding-inline-start:.9rem;border-inline-start:2px solid var(--kupfer);
}
.foerder-raster{display:grid;gap:clamp(2rem,4vw,3.5rem)}
@media (min-width:60rem){ .foerder-raster{grid-template-columns:1fr 1fr;align-items:start} }

/* ---------- Ablauf ---------- */
.ablauf{list-style:none;padding:0;margin:0;counter-reset:schritt;display:grid;gap:0}
.ablauf li{
  counter-increment:schritt;display:grid;gap:.4rem 2rem;
  padding-block:1.8rem;border-block-start:1px solid var(--rule);
}
.ablauf li:first-child{border-block-start:0}
@media (min-width:48rem){
  .ablauf li{grid-template-columns:4rem 1fr 13rem;align-items:baseline}
}
.ablauf li::before{
  content:counter(schritt,decimal-leading-zero);
  font-family:var(--mono);font-size:.85rem;color:var(--kupfer);font-weight:500;
}
.ablauf p{color:var(--ink-2);font-size:.95rem;margin-block-start:.35rem}
.ablauf .ergebnis{
  font-family:var(--mono);font-size:.75rem;letter-spacing:.06em;color:var(--ink-2);
  text-transform:uppercase;
}
.ablauf .ergebnis b{display:block;font-weight:500;color:var(--ink);text-transform:none;
  letter-spacing:0;font-size:.9rem;margin-block-start:.2rem}

/* ---------- Beispiel ---------- */

/* ---------- Person ---------- */
.person{display:grid;gap:clamp(2rem,4vw,3.5rem)}
@media (min-width:56rem){ .person{grid-template-columns:.8fr 1.2fr;align-items:start} }
.person img{border:1px solid var(--rule)}
.person .signatur{
  font-family:var(--mono);font-size:.75rem;line-height:1.9;color:var(--ink-2);
  border-block-start:1px solid var(--rule);margin-block-start:1.8rem;padding-block-start:1.2rem;
}
.person .signatur b{color:var(--ink);font-weight:500}

/* ---------- FAQ ---------- */
.faq{max-width:52rem}
.faq details{border-block-end:1px solid var(--rule)}
.faq details:first-of-type{border-block-start:1px solid var(--rule)}
.faq summary{
  cursor:pointer;padding-block:1.15rem;padding-inline-end:2.5rem;position:relative;
  font-weight:600;list-style:none;transition:color .15s ease-out;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--blau)}
.faq summary::after{
  content:"+";position:absolute;inset-inline-end:.3rem;inset-block-start:1rem;
  font-family:var(--mono);color:var(--kupfer);font-size:1.2rem;line-height:1;
}
.faq details[open] summary::after{content:"–"}
.faq details > *:not(summary){margin:0 0 1.4rem;color:var(--ink-2);max-width:60ch}
@supports (interpolate-size: allow-keywords){
  :root{interpolate-size:allow-keywords}
  @media (prefers-reduced-motion: no-preference){
    .faq details::details-content{
      block-size:0;overflow:hidden;
      transition:block-size .25s ease-out, content-visibility .25s allow-discrete;
    }
    .faq details[open]::details-content{block-size:auto}
  }
}

/* ---------- Kontakt ---------- */
.kontakt{display:grid;gap:clamp(2rem,4vw,4rem)}
@media (min-width:56rem){ .kontakt{grid-template-columns:1fr 1fr;align-items:start} }
.direkt{list-style:none;padding:0;margin:2rem 0 0;display:grid;gap:1.4rem}
.direkt a{
  font-family:var(--display);font-weight:600;letter-spacing:-.01em;
  font-size:clamp(1.2rem,1rem + .8vw,1.6rem);text-decoration:none;
}
.direkt a:hover{text-decoration:underline}
.direkt span{
  display:block;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2);margin-block-end:.3rem;
}
form{display:grid;gap:1.1rem}
label{display:grid;gap:.4rem;font-size:.85rem;font-weight:600}
input,textarea,select{
  font:inherit;font-size:1rem;color:var(--ink);background:var(--surface);
  border:1px solid var(--rule-strong);border-radius:3px;padding:.7rem .8rem;
  inline-size:100%;
}
input:focus-visible,textarea:focus-visible,select:focus-visible{border-color:var(--blau)}
label:has(input:user-invalid),label:has(textarea:user-invalid){color:var(--kupfer)}
label:has(input:user-invalid) input,label:has(textarea:user-invalid) textarea{border-color:var(--kupfer)}
textarea{min-block-size:7rem;resize:vertical}
form .hinweis{font-size:.8rem;color:var(--ink-2)}
form button{
  font:inherit;font-weight:600;cursor:pointer;justify-self:start;
  background:var(--blau);color:var(--auf-blau);border:1px solid transparent;
  padding:.75rem 1.4rem;border-radius:3px;transition:background .15s ease-out;
}
form button:hover{background:var(--blau-tief)}
.formularmeldung{
  border:1px solid var(--rule-strong);background:var(--surface);
  padding:1rem 1.1rem;font-size:.9rem;
}
.formularmeldung:not([hidden]) + form{display:none}

/* ---------- Fuß ---------- */
.fuss{background:var(--flaeche);border-block-start:1px solid var(--flaeche-rule);
  padding-block:clamp(2.5rem,5vw,4rem)}
.fuss-raster{display:grid;gap:2.5rem}
@media (min-width:48rem){ .fuss-raster{grid-template-columns:1.6fr 1fr 1fr} }
.fuss-spalte{font-size:.92rem;color:var(--ink-2)}
.fuss-spalte .marke{margin-block-end:1.2rem}
.fuss-spalte a{color:var(--ink-2);text-decoration:none;display:block;padding-block:.2rem}
.fuss-spalte a:hover{color:var(--ink);text-decoration:underline}
.fuss-spalte address{font-style:normal;margin-block-end:.6rem}
.fuss-marke .wortmarke{font-size:1.2rem;margin-block-end:1.2rem;display:inline-flex}
.fuss-marke .nummer{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  margin-block-start:1.2rem;line-height:1.9;
}
.fuss-schluss{
  display:flex;flex-wrap:wrap;gap:.8rem 2rem;justify-content:space-between;
  margin-block-start:clamp(2.5rem,5vw,3.5rem);padding-block-start:1.5rem;
  border-block-start:1px solid var(--rule);
  font-size:.85rem;color:var(--ink-2);
}
.fuss-schluss p{margin:0}
.credit{font-family:var(--mono);font-size:.78rem;letter-spacing:.04em}
.credit a{color:var(--ink-2);text-decoration:none}
.credit a:hover{color:var(--kupfer)}

/* ---------- Nach oben ---------- */
.nach-oben{
  position:fixed;inset-block-end:1.5rem;inset-inline-end:1.5rem;z-index:15;
  inline-size:2.9rem;block-size:2.9rem;padding:0;cursor:pointer;
  display:grid;place-items:center;border-radius:999px;
  color:var(--ink);background:var(--surface);
  border:1px solid var(--rule-strong);
  box-shadow:0 1px 3px rgb(0 0 0 / .08);
  opacity:0;visibility:hidden;translate:0 .6rem;
  transition:opacity .2s ease-out, translate .2s ease-out,
             visibility .2s, color .15s ease-out, border-color .15s ease-out;
}
.nach-oben.zeigen{opacity:1;visibility:visible;translate:none}
.nach-oben:hover{color:var(--blau);border-color:var(--blau)}
.nach-oben span{
  inline-size:1.1rem;block-size:1.1rem;background:currentColor;
  -webkit-mask:var(--pfeil-hoch) center / contain no-repeat;
  mask:var(--pfeil-hoch) center / contain no-repeat;
}
:root{
  --pfeil-hoch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5'/%3E%3Cpath d='M5.5 11.5 12 5l6.5 6.5'/%3E%3C/g%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce){ .nach-oben{transition:opacity .2s, visibility .2s} }
@media (max-width:34rem){ .nach-oben{inset-block-end:1rem;inset-inline-end:1rem} }

/* ---------- Siegel-Banner ----------
   Steht im Förderband, direkt neben der Aussage, die es belegt.
   Behördenmarken nie invertieren — helle Platte, damit sie in beiden
   Modi als Marke lesbar bleiben. */
.siegel{
  margin-block-start:clamp(2.5rem,5vw,3.5rem);
  padding-block-start:clamp(2rem,4vw,3rem);
  border-block-start:1px solid var(--rule);
  display:flex;flex-wrap:wrap;align-items:center;gap:clamp(1.5rem,4vw,3rem);
}
.siegel img{
  inline-size:min(100%,32rem);block-size:auto;
  background:#fff;padding:.9rem 1.2rem;border-radius:3px;
}
.siegel p{
  font-family:var(--mono);font-size:.76rem;line-height:1.9;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-2);flex:1 1 15rem;margin:0;
}
.siegel p b{display:block;color:var(--ink);font-weight:500}

/* ponytail: Platzhalter sichtbar markieren, damit im Pitch keine erfundene Zahl
   für bare Münze genommen wird. Vor dem Livegang eine Zeile löschen. */
.pl{
  border-block-end:1px dotted var(--kupfer);cursor:help;
  text-decoration:none;
}

/* ---------- Einblenden beim Hereinscrollen ----------
   Nur mit JS (.js am <html>), damit ohne JS nichts unsichtbar bleibt.
   Nach dem Einblenden wird das Element nicht mehr beobachtet. */
@media (prefers-reduced-motion: no-preference){
  .js .reveal{
    opacity:0;translate:0 14px;
    transition:opacity .5s ease-out var(--verzug,0ms), translate .5s ease-out var(--verzug,0ms);
  }
  .js .reveal.sichtbar{opacity:1;translate:none}
}

/* ---------- Persönliche Notiz ---------- */
.notiz{
  border-inline-start:2px solid var(--kupfer);
  padding-inline-start:1.4rem;margin-block-start:2rem;max-width:44ch;
}
.notiz p{font-style:italic;color:var(--ink)}
.notiz .unterschrift{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-2);font-style:normal;margin-block-start:.9rem;
}

/* ---------- News ---------- */
.news{list-style:none;padding:0;margin:2.5rem 0 0;display:grid;gap:1px;
  background:var(--rule);border:1px solid var(--rule)}
@media (min-width:52rem){ .news{grid-template-columns:repeat(3,1fr)} }
.news li{background:var(--paper);padding:clamp(1.4rem,2.5vw,2rem);
  display:flex;flex-direction:column;gap:.7rem}
.news time{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--kupfer);
}
.news h3{font-size:1.15rem}
.news p{color:var(--ink-2);font-size:.95rem}
.news .quelle{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;
  margin-block-start:auto;padding-block-start:.8rem;
}
/* steht als Geschwister nach der Liste, nicht darin */
.stand{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--ink-2);
  margin-block-start:1.4rem;
}

/* ---------- Bauplan hinter dem Kontakt ---------- */
#kontakt{position:relative;overflow:clip}
/* Die Drehung steckt im SVG selbst, nicht hier: ein transformiertes Element
   wird zum Bezugsrahmen und macht background-attachment:fixed wirkungslos. */
#kontakt::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:.2;
  background:url('img/bauplan.svg') center / cover no-repeat fixed;
}
/* Festgepinnter Hintergrund ist ein vestibulärer Reiz — bei reduzierter
   Bewegung scrollt er einfach mit. iOS Safari ignoriert fixed ohnehin. */
@media (prefers-reduced-motion: reduce){
  #kontakt::before{background-attachment:scroll}
}
#kontakt > .spalte{position:relative;z-index:1}
/* Formularfelder brauchen deckenden Grund, sonst liest der Plan durch */
#kontakt input,#kontakt textarea,#kontakt select,#kontakt .formularmeldung{
  background:var(--surface);
}

/* ---------- Zugangsseite ---------- */
.zugang{
  padding-block-start:0;               /* keine feste Kopfleiste auf dieser Seite */
  min-block-size:100dvh;
  display:grid;place-items:center;
  background:
    radial-gradient(120% 90% at 50% 0%,
      color-mix(in srgb, var(--surface) 70%, transparent) 0%, transparent 60%),
    linear-gradient(165deg,
      var(--paper) 0%, var(--flaeche) 55%,
      color-mix(in srgb, var(--flaeche) 82%, var(--ink)) 100%);
}
/* derselbe Bauplan wie hinter dem Kontakt, nur ruhiger */
.zugang::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:.16;
  background:url('img/bauplan.svg') center / cover no-repeat;
}
.tor{
  position:relative;z-index:1;
  inline-size:min(100% - 2.5rem, 26rem);
  text-align:center;padding-block:3rem;
}
.tor-marke{
  justify-content:center;font-size:clamp(1.4rem,1.1rem + 1.4vw,2rem);
  margin-block-end:1.6rem;
}
.tor-marke svg{inline-size:2.2rem}
.tor-hinweis{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2);margin-block-end:2.5rem;
}
.tor-fehler{
  color:var(--kupfer);font-size:.9rem;margin-block-end:1rem;
}
.tor form{gap:.6rem;text-align:start}
.tor label{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-2);font-weight:400;
}
.tor-feld{display:flex;gap:.6rem}
.tor-feld input{flex:1;min-inline-size:0}
.tor-feld .knopf{flex:none;border:0;font:inherit;font-weight:600;cursor:pointer}
.tor-fuss{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;
  color:var(--ink-2);margin-block-start:3rem;opacity:.7;
}

/* Rechtsseiten */
/* Eigener Wrapper INNERHALB von .spalte — nicht auf demselben Element,
   sonst hebelt margin-inline-start:0 die Zentrierung der Spalte aus und
   der Text klebt am Bildschirmrand. */
.rechtstext{max-width:44rem}
.rechtstext h2{margin-block:2.5rem 1rem;font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem)}
.rechtstext h3{margin-block:1.8rem .6rem;font-family:var(--sans);font-size:1rem;font-weight:600}
.rechtstext p,.rechtstext ul{margin-block:0 1rem;color:var(--ink-2)}
.rechtstext ul{padding-inline-start:1.2rem}
.rechtstext strong{color:var(--ink)}
.hinweis-kasten{
  border-inline-start:3px solid var(--kupfer);background:var(--surface);
  padding:1rem 1.2rem;margin-block:1.5rem;font-size:.9rem;
}