/* ============================================================
   nischenseiten.com – gemeinsames Stylesheet

   Eine Quelle für Typografie, Farben, Abstände und Raster aller
   21 Seiten. Seitenweise Sonderwerte nur, wo es einen inhaltlichen
   Grund gibt; sonst ausschließlich die Tokens unten.
   ============================================================ */

/* ---------- 0. Schriften, lokal ausgeliefert ----------
   Archivo (Variable, 400–800) und DM Serif Display, beide unter der
   SIL Open Font License 1.1. Die Lizenztexte liegen unverändert
   daneben in assets/fonts/. Keine Anfrage an Google oder ein CDN –
   die Dateien kommen vom eigenen Server.

   Archivo ist eine Variable-Datei: ein Download deckt Regular bis
   ExtraBold ab, statt drei einzelner Schnitte. */
@font-face{
  font-family:'Archivo';
  src:url('/assets/fonts/archivo-var-latin.woff2') format('woff2');
  font-weight:400 800; font-style:normal; font-display:swap;
  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:'Archivo';
  src:url('/assets/fonts/archivo-var-latin-ext.woff2') format('woff2');
  font-weight:400 800; font-style:normal; font-display:swap;
  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 Serif Display';
  src:url('/assets/fonts/dmserifdisplay-latin.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
  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 Serif Display';
  src:url('/assets/fonts/dmserifdisplay-latin-ext.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
  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;
}

/* ---------- 1. Tokens ---------- */
:root{
  /* Flächen: nahezu weiß statt cremefarben, damit die kräftige
     Typografie und der Akzent klar stehen. */
  --paper:      #FFFFFF;
  --paper-2:    #F4F4F2;
  --paper-3:    #E7E7E3;
  --linie:      rgba(20,21,25,.12);

  /* Schrift: sehr dunkles Anthrazit, kein Rein-Schwarz.
     Kontrast auf Weiß 16,7:1 – deutlich über WCAG AA. */
  --ink:        #15161A;
  --ink-2:      #4A4D55;
  --ink-3:      #787C86;

  /* Akzent: das gewachsene Rotbraun der Marke, nicht die Farbwelt
     der Referenzseite. Auf Weiß 6,1:1 – AA für Fließtext. */
  --accent:     #A8442A;
  --accent-2:   #8E3722;
  --accent-soft:#F6E7E1;

  --wa:        #0E7C5A;
  --wa-dark:   #0A5E44;
  --wa-bright: #25D366;

  /* Nur zwei Familien. Die früheren Mono-Beschriftungen laufen jetzt
     in Archivo mit weitem Zeichenabstand – das hält das System
     zusammen und spart eine dritte Schrift. */
  --sans:  'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --serif: 'DM Serif Display', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, 'Times New Roman', serif;
  --mono:  var(--sans);

  /* Raster und Abstände */
  /* Ein Container für Header, Hero und alle Sektionen.
     1808 px Außenmaß plus 64 px Innenabstand ergeben auf 1920 px
     genau 1680 px Nutzbreite; darunter skaliert clamp() mit. */
  --wrap: 1808px;
  --gut: clamp(20px, 3.4vw, 64px);
  --hdr-h: 78px;

  --r-s: 6px;
  --r-m: 12px;
  --r-knopf: 100px;

  --schatten-s: 0 1px 2px rgba(20,21,25,.05);
  --schatten-m: 0 10px 30px rgba(20,21,25,.08);
  --schatten-l: 0 24px 60px rgba(20,21,25,.12);

  /* Bewegung */
  --zeit-s: .2s;
  --zeit-m: .38s;
  --zeit-l: .6s;
  --kurve: cubic-bezier(.2,.8,.2,1);

  /* Alte Namen, damit bestehende Regeln weiterlaufen, bis sie
     umgestellt sind. */
  --line: var(--linie);
  --line-dark: rgba(255,255,255,.16);
  --r: var(--r-s);
}
@media(min-width:900px){ :root{ --hdr-h:84px; } }


*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
/* Browser geben <figure> standardmaessig 40px Seitenrand – das hat die
   Hero-Buehne schmaler gemacht als den uebrigen Satzspiegel. */
figure{ margin:0; }
a{ color:inherit; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:absolute; left:var(--gut); top:-60px; z-index:100;
  background:var(--ink); color:var(--paper); padding:12px 18px;
  border-radius:100px; text-decoration:none; font-size:14px;
  transition:top .25s;
}
.skip:focus{ top:14px; }

/* Icon-Sprite */
.ic{ width:1em; height:1em; display:inline-block; flex:none; fill:currentColor; }

/* ---------- 2. Layout ---------- */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }
/* Abschnittsabstände: eine Quelle, mit der Breite skalierend.
   Die früheren pauschalen 150 px waren die Hauptursache der
   überlangen Seite. */
.sect{ padding-block:clamp(56px, 6vw, 88px); position:relative; }
.sect--kompakt{ padding-block:clamp(40px, 4.5vw, 64px); }
.sect--gross{ padding-block:clamp(76px, 8vw, 120px); }

/* ---------- 3. Typografie ---------- */
.kicker{
  font-family:var(--mono); font-size:12px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent);
  display:flex; align-items:center; gap:.7em; margin:0 0 22px;
}
.kicker::before{ content:""; width:26px; height:1px; background:currentColor; flex:none; }

/* Überschriften laufen jetzt in der kräftigen Grotesk. Die elegante
   Serif ist der Sonderfall für die erste Hero-Zeile (.zeile-serif) –
   dadurch entsteht der gewünschte Wechsel, ohne dass jede H2 zur
   Displayzeile wird. */
h1,h2,h3{ font-family:var(--sans); font-weight:800; letter-spacing:-.022em; margin:0; }
h1{ font-size:clamp(2.1rem,1.05rem+2.9vw,4.2rem); line-height:.97; }
h2{ font-size:clamp(1.7rem,1rem+2vw,2.9rem); line-height:1.02; }
h3{ font-size:clamp(1.12rem,.95rem+.6vw,1.45rem); line-height:1.22; font-weight:700; letter-spacing:-.012em; }

/* Die Serifzeile: ruhig, redaktionell, bewusst leichter als die
   Sans-Zeile darunter. */
.zeile-serif{
  font-family:var(--serif); font-weight:400; letter-spacing:-.005em;
  font-size:clamp(1.5rem,.9rem+1.7vw,2.6rem); line-height:1.08;
  display:block; color:var(--ink-2);
}
.lead{ font-size:clamp(1.05rem,1.9vw,1.32rem); line-height:1.6; color:var(--ink-2); max-width:38ch; }
.it{ font-style:italic; color:var(--accent); }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }

/* Zeilenmaske für den Reveal der Überschriften */
.mask{ display:block; overflow:hidden; padding-bottom:.06em; }
.mask > span{ display:block; will-change:transform; }

/* ---------- 4. Buttons ---------- */
.btn{
  --bg:var(--ink); --fg:var(--paper);
  display:inline-flex; align-items:center; gap:.6em;
  background:var(--bg); color:var(--fg);
  font-size:15px; font-weight:500; text-decoration:none; text-align:left;
  padding:16px 26px; border-radius:100px; border:1px solid var(--bg);
  transition:transform .35s cubic-bezier(.2,.8,.2,1), background .3s, color .3s, border-color .3s;
  will-change:transform;
}
.btn:hover{ transform:translateY(-3px); }
.btn .ic{ font-size:1.3em; }
.btn--wa{ --bg:var(--wa); --fg:#fff; }
.btn--wa:hover{ --bg:var(--wa-dark); }
.btn--ghost{ --bg:transparent; --fg:var(--ink); border-color:var(--line); }
.btn--ghost:hover{ --fg:var(--accent); border-color:var(--accent); }
.btn--lg{ padding:20px 34px; font-size:16.5px; }

/* Kleine Inline-Aufforderung mitten im Text */
.inline-cta{
  display:flex; flex-wrap:wrap; align-items:center; gap:16px 22px;
  margin-top:44px; padding-top:26px; border-top:1px solid var(--line);
}
.inline-cta p{ margin:0; color:var(--ink-2); font-size:15.5px; max-width:40ch; }

/* ---------- 5. Header ---------- */
.hdr{
  position:fixed; inset:0 0 auto 0; z-index:50;
  padding-block:16px;
  transition:background .4s, box-shadow .4s, padding .4s;
}
.hdr__innen{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
}
.hdr.is-stuck{
  background:rgba(255,255,255,.9);
  backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 1px 0 var(--line);
  padding-block:12px;
}
/* Mehr Markenpräsenz, ohne den Kopfbereich höher zu machen:
   Die Schrift wächst, die Zeilenhöhe bleibt gedeckelt. */
.brand{
  font-family:var(--sans); font-weight:800; font-size:clamp(19px,1.15vw,24px);
  line-height:1.1; text-decoration:none; letter-spacing:-.035em; white-space:nowrap;
  display:inline-flex; align-items:center;
}
.brand span{ color:var(--accent); }
.nav{ display:none; gap:28px; font-size:14.5px; }
.nav a{ text-decoration:none; color:var(--ink-2); position:relative; }
.nav a::after{
  content:""; position:absolute; left:0; bottom:-4px; width:100%; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:right;
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
}
.nav a:hover{ color:var(--ink); }
.nav a:hover::after{ transform:scaleX(1); transform-origin:left; }
.hdr .btn{ padding:11px 20px; font-size:14px; }
@media(min-width:940px){ .nav{ display:flex; } }
@media(max-width:560px){ .hdr .btn span{ display:none; } .hdr .btn{ padding:11px 13px; } }

/* ---------- 6. Schwebender WhatsApp-Knopf ---------- */
.wa-float{
  position:fixed; right:16px; bottom:16px; z-index:60;
  display:flex; align-items:center; gap:.6em;
  background:var(--wa); color:#fff; text-decoration:none;
  padding:14px 20px 14px 16px; border-radius:100px;
  font-size:15px; font-weight:500;
  box-shadow:0 6px 24px rgba(14,124,90,.34), 0 0 0 4px rgba(37,211,102,.18);
  transition:transform .3s cubic-bezier(.2,.8,.2,1), background .3s;
}
.wa-float:hover{ transform:translateY(-3px); background:var(--wa-dark); }
.wa-float .ic{ font-size:1.5em; }
@media(min-width:900px){ .wa-float{ right:26px; bottom:26px; } }
/* Auf schmalen Geräten nur das Symbol – verdeckt so keine Inhalte */
@media(max-width:480px){
  .wa-float{ padding:15px; right:14px; bottom:14px; }
  .wa-float span{ display:none; }
}
@media print{ .wa-float,.hdr{ display:none; } }

/* ---------- 7. Fußbereich ----------
   Die untere Innenabstand ist bewusst groß: der schwebende
   WhatsApp-Knopf sitzt fest in der Ecke und würde sonst am Seitenende
   auf den Rechtslinks liegen. Der Wert deckt Knopfhöhe plus Abstand. */
.ft{ padding-block:64px 132px; border-top:1px solid var(--line); }
@media(min-width:900px){ .ft{ padding-block:64px 124px; } }
.ft__top{ display:grid; gap:34px; grid-template-columns:1fr; }
@media(min-width:820px){ .ft__top{ grid-template-columns:1.5fr 1fr 1fr 1.1fr; gap:44px; } }
.ft h2{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 16px; font-weight:400;
}
.ft ul{ margin:0; padding:0; list-style:none; display:grid; gap:10px; font-size:15px; }
.ft a{ text-decoration:none; color:var(--ink-2); }
.ft a:hover{ color:var(--accent); }
.ft__claim{ font-family:var(--serif); font-size:clamp(1.35rem,3.2vw,1.9rem); line-height:1.18; max-width:20ch; margin:0 0 18px; }
.ft__wa{
  display:inline-flex; align-items:center; gap:.55em;
  color:var(--wa); font-weight:500; text-decoration:none; font-size:15px;
}
.ft__wa:hover{ color:var(--wa-dark); text-decoration:underline; }
.ft__wa .ic{ font-size:1.35em; }
.ft__bottom{
  margin-top:48px; padding-top:22px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:10px 24px; justify-content:space-between;
  font-size:13.5px; color:var(--ink-3);
}
.ft__bottom a{ color:var(--ink-3); }

/* ---------- 8. Rechtsseiten ---------- */
.page-head{ padding:136px 0 0; }
@media(min-width:900px){ .page-head{ padding-top:180px; } }
.page-head h1{ font-size:clamp(2.2rem,6vw,4.4rem); max-width:18ch; }
.page-head .lead{ margin-top:26px; max-width:52ch; }

.legal{ padding-block:70px 96px; }
.legal__grid{ display:grid; gap:40px; grid-template-columns:1fr; }
@media(min-width:960px){ .legal__grid{ grid-template-columns:250px minmax(0,1fr); gap:70px; } }

.toc{ font-size:14.5px; }
@media(min-width:960px){ .toc{ position:sticky; top:120px; align-self:start; } }
.toc h2{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin:0 0 14px; font-weight:400; }
.toc ul{ margin:0; padding:0; list-style:none; display:grid; gap:9px; }
.toc a{ color:var(--ink-2); text-decoration:none; }
.toc a:hover{ color:var(--accent); }

/* Rechtstexte: ruhig gesetzt, keine Animation, gut lesbare Zeilenlänge */
.prose{ max-width:68ch; }
.prose h2{
  font-size:clamp(1.45rem,3vw,2rem); margin:56px 0 16px;
  padding-top:26px; border-top:1px solid var(--line); scroll-margin-top:110px;
}
.prose h2:first-of-type{ margin-top:0; border-top:0; padding-top:0; }
.prose h3{ font-size:1.15rem; margin:32px 0 10px; }
.prose p,.prose li{ color:var(--ink-2); font-size:16.5px; }
.prose strong{ color:var(--ink); font-weight:600; }
.prose ul{ margin:0 0 1.2em; padding-left:1.15em; }
.prose li{ margin-bottom:.5em; }
.prose a{ color:var(--accent); }
.prose blockquote{
  margin:26px 0; padding:22px 26px; background:var(--paper-2);
  border-left:2px solid var(--accent); border-radius:var(--r);
}
.prose blockquote p{ font-family:var(--serif); font-size:1.08rem; color:var(--ink); }

.datatable{ width:100%; border-collapse:collapse; margin:0 0 1.6em; font-size:16px; }
.datatable th,.datatable td{
  text-align:left; vertical-align:top; padding:13px 18px 13px 0;
  border-bottom:1px solid var(--line);
}
.datatable th{ font-weight:500; color:var(--ink-3); font-size:14px; width:34%; }
.datatable td{ color:var(--ink); }
@media(max-width:560px){
  .datatable th{ width:auto; display:block; padding-bottom:2px; border-bottom:0; }
  .datatable td{ display:block; padding-top:0; }
}

.backlink{
  display:inline-flex; align-items:center; gap:.55em;
  margin-top:56px; font-size:15px; text-decoration:none; color:var(--accent);
}
.backlink:hover{ text-decoration:underline; }
.backlink .ic{ font-size:1.25em; }

/* Schlusskarte auf den Rechtsseiten */
.legal-cta{
  margin-top:64px; padding:38px 32px; border-radius:var(--r);
  background:var(--paper-2); border:1px solid var(--line);
  display:grid; gap:20px; align-items:center;
}
@media(min-width:760px){ .legal-cta{ grid-template-columns:1fr auto; gap:34px; padding:44px 40px; } }
.legal-cta h2{ font-family:var(--serif); font-size:clamp(1.4rem,3vw,1.9rem); margin:0 0 8px; text-transform:none; letter-spacing:normal; color:var(--ink); border:0; padding:0; }
.legal-cta p{ margin:0; color:var(--ink-2); font-size:15.5px; max-width:46ch; }

/* ============================================================
   14. Mobilmenü

   Grundzustand ohne JavaScript: die Navigation ist eine normale
   Liste und damit bedienbar. Erst wenn am <html> die Klasse .js
   sitzt, wird sie auf schmalen Schirmen eingeklappt.

   Hier steckten drei Fehler, die erst die Breitenmessung gezeigt
   hat. Die Bruchstelle stand auf 939 px, die waagerechte Navigation
   erscheint aber erst ab 1040 px – zwischen 940 und 1039 px war
   weder Schalter noch Navigation zu sehen. Ohne JavaScript war
   unterhalb 1040 px ebenfalls keine Navigation da, weil die spätere
   Regel .nav{display:none} die umbrechende Liste überschrieben hat.
   Und das Untermenü blieb im aufgeklappten Telefonmenü absolut
   positioniert und 248 px breit; es lief rechts aus dem Bild.

   Deshalb: eine Bruchstelle (1039/1040 px) für CSS und Skript, der
   Grundzustand ohne Skript ausdrücklich gesetzt, und das Untermenü
   auf schmalen Schirmen im Textfluss.
   ============================================================ */
.nav-schalter{ display:none; }
/* Der zugehörige @media-Block steht weiter unten, direkt hinter der
   Grunddefinition der Navigation – nur dort greift er zuverlässig. */


.nav a.ist-aktiv{ color:var(--ink); }
.nav a.ist-aktiv::after{ transform:scaleX(1); transform-origin:left; }

/* Sprungziele dürfen nicht unter dem festen Header verschwinden */
[id]{ scroll-margin-top:96px; }

/* ============================================================
   15. Brotkrumen
   ============================================================ */
.krumen{ padding-top:104px; }
@media(min-width:900px){ .krumen{ padding-top:112px; } }
.krumen ol{
  margin:0; padding:0; list-style:none;
  display:flex; flex-wrap:wrap; align-items:center; gap:4px 2px;
  font-size:13.5px; color:var(--ink-3);
}
.krumen li{ display:flex; align-items:center; gap:2px; }
.krumen a{ color:var(--ink-3); text-decoration:none; }
.krumen a:hover{ color:var(--accent); }
.krumen__pfeil{ width:14px; height:14px; opacity:.6; }
.krumen [aria-current="page"]{ color:var(--ink-2); }

/* ============================================================
   16. Fußbereich: fünf Spalten
   ============================================================ */
@media(min-width:820px){ .ft__top{ grid-template-columns:1.6fr 1fr 1fr 1.2fr 1fr; gap:36px; } }

/* ============================================================
   17. Seitenkopf für Unterseiten
   ============================================================ */
.seitenkopf{ padding-block:34px 0; }
.seitenkopf h1{ max-width:20ch; }
.seitenkopf .lead{ margin-top:24px; max-width:56ch; }
.seitenkopf__meta{
  display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:26px;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3);
}
.seitenkopf__meta span{ display:inline-flex; align-items:center; gap:.5em; }
.seitenkopf__meta .ic{ width:15px; height:15px; color:var(--accent); }

/* ============================================================
   18. Karten-Raster für Übersichten
   ============================================================ */
.raster{ display:grid; gap:1px; background:var(--line); border-block:1px solid var(--line); margin-top:44px; }
@media(min-width:720px){ .raster--2{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:900px){ .raster--3{ grid-template-columns:repeat(3,1fr); } }

.karte{
  background:var(--paper); padding:0 0 34px;
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  transition:background .4s;
}
a.karte:hover{ background:var(--paper-2); }
.karte__bild{
  aspect-ratio:16/7; overflow:hidden; background:var(--paper-3);
  border-bottom:1px solid var(--line); margin-bottom:26px;
}
.karte__bild img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
.karte__inhalt{ padding-inline:28px; display:flex; flex-direction:column; gap:10px; flex:1; }
.karte__oben{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.karte__label{
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent);
}
.karte__go{ font-size:19px; color:var(--ink-3); transition:transform .4s cubic-bezier(.2,.8,.2,1), color .3s; }
a.karte:hover .karte__go{ transform:translate(4px,-4px); color:var(--accent); }
.karte h3{ margin:0; }
.karte p{ margin:0; color:var(--ink-2); font-size:15.5px; }
.karte__fuss{
  margin-top:auto; padding-top:18px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3);
  display:flex; flex-wrap:wrap; gap:6px 16px;
}
.karte--offline{ background:var(--paper-2); }
.marke{
  display:inline-flex; align-items:center; gap:.45em;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  border:1px solid var(--line); border-radius:100px; padding:5px 11px; color:var(--ink-3);
}
.marke--neu{ border-color:var(--accent); color:var(--accent); }
.marke--offline{ border-style:dashed; }

/* ============================================================
   19. Cluster-Abschnitte im Ratgeber
   ============================================================ */
.cluster{ margin-top:80px; }
.cluster__kopf{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 20px;
  padding-bottom:18px; border-bottom:1px solid var(--line);
}
.cluster__kopf h2{ font-size:clamp(1.5rem,3vw,2.1rem); }
.cluster__kopf p{ margin:0; color:var(--ink-2); font-size:15px; }
/* Kein Flächenhintergrund: Sonst erscheint bei ungerader Beitragszahl
   die leere Rasterzelle als grauer Block. Die Trennlinien sitzen deshalb
   an den Einträgen selbst. */
.cluster__liste{ display:grid; gap:0; margin-top:0; border-top:1px solid var(--line); }
@media(min-width:760px){ .cluster__liste{ grid-template-columns:repeat(2,1fr); } }
.cluster__eintrag{ border-bottom:1px solid var(--line); }
@media(min-width:760px){ .cluster__eintrag:nth-child(odd){ border-right:1px solid var(--line); } }
.cluster__eintrag{
  background:var(--paper); padding:26px 24px 28px; text-decoration:none; color:inherit;
  display:flex; flex-direction:column; gap:8px; transition:background .4s;
}
.cluster__eintrag:hover{ background:var(--paper-2); }
.cluster__eintrag h3{ margin:0; font-size:1.2rem; }
.cluster__eintrag p{ margin:0; font-size:15px; color:var(--ink-2); }

/* ============================================================
   20. Pillar-Hinweis
   ============================================================ */
.pillar{
  margin-top:48px; background:var(--ink); color:var(--paper);
  border-radius:var(--r); padding:38px 30px; display:grid; gap:24px;
}
@media(min-width:880px){ .pillar{ grid-template-columns:1.5fr auto; align-items:center; padding:52px 48px; gap:50px; } }
.pillar .kicker{ color:var(--accent-soft); }
.pillar h2{ font-size:clamp(1.7rem,3.6vw,2.6rem); max-width:18ch; }
.pillar p{ color:rgba(250,248,244,.7); margin:16px 0 0; font-size:15.5px; max-width:48ch; }
.pillar .btn{ --bg:var(--paper); --fg:var(--ink); }
.pillar .btn:hover{ --bg:var(--accent); --fg:var(--paper); }

/* ============================================================
   21. Artikel
   ============================================================ */
.artikel{ display:grid; gap:44px; grid-template-columns:1fr; align-items:start; margin-top:40px; }
@media(min-width:1000px){ .artikel{ grid-template-columns:250px minmax(0,1fr); gap:70px; } }

.artikel__nav{ font-size:14.5px; }
@media(min-width:1000px){ .artikel__nav{ position:sticky; top:120px; align-self:start; } }
.artikel__nav h2{
  font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 14px; font-weight:400;
}
.artikel__nav ol{ margin:0; padding:0; list-style:none; display:grid; gap:9px; }
.artikel__nav a{ color:var(--ink-2); text-decoration:none; display:block; }
.artikel__nav a:hover{ color:var(--accent); }

.autorbox{
  margin-top:44px; padding:24px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--paper-2); display:flex; gap:16px; align-items:flex-start;
}
.autorbox .ic{ width:34px; height:34px; color:var(--accent); flex:none; }
.autorbox p{ margin:0; font-size:14.5px; color:var(--ink-2); }
.autorbox strong{ display:block; color:var(--ink); font-size:15.5px; margin-bottom:4px; }

.hinweis{
  margin:32px 0; padding:20px 24px; border-radius:var(--r);
  background:var(--paper-2); border-left:2px solid var(--accent);
}
.hinweis p{ margin:0; font-size:15.5px; color:var(--ink-2); }
.hinweis strong{ color:var(--ink); }

.quellen{ margin-top:44px; padding-top:24px; border-top:1px solid var(--line); }
.quellen h2{ font-size:1.2rem; margin-bottom:14px; }
.quellen ul{ margin:0; padding-left:1.15em; font-size:15px; }
.quellen li{ margin-bottom:8px; color:var(--ink-2); }

.weiterlesen{ margin-top:56px; padding-top:30px; border-top:1px solid var(--line); }
.weiterlesen h2{ font-size:1.3rem; margin-bottom:20px; }
.weiterlesen ul{ margin:0; padding:0; list-style:none; display:grid; gap:12px; }
.weiterlesen a{ color:var(--ink-2); text-decoration:none; display:inline-flex; align-items:baseline; gap:.55em; font-size:15.5px; }
.weiterlesen a:hover{ color:var(--accent); }

/* ============================================================
   22. Projektseiten
   ============================================================ */
.browser{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden;
}
.browser__leiste{
  height:38px; background:var(--paper-2); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:7px; padding:0 14px;
}
.browser__punkt{ width:9px; height:9px; border-radius:50%; background:var(--paper-3); flex:none; }
.browser__url{
  margin-left:8px; flex:1; height:22px; border-radius:100px;
  background:var(--paper); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:11.5px; color:var(--ink-3);
}
.browser img{ width:100%; display:block; }
.projekt__buehne{ margin-top:38px; }

.projekt__fakten{ display:grid; gap:1px; background:var(--line); border-block:1px solid var(--line); margin:48px 0 0; }
@media(min-width:700px){ .projekt__fakten{ grid-template-columns:repeat(3,1fr); } }
.projekt__fakt{ background:var(--paper); padding:24px 22px 26px; }
.projekt__fakt dt{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3); margin-bottom:8px;
}
.projekt__fakt dd{ margin:0; font-size:15.5px; color:var(--ink); }

.galerie{ display:grid; gap:20px; margin-top:24px; }
@media(min-width:760px){ .galerie{ grid-template-columns:repeat(2,1fr); } }
.galerie figure{ margin:0; }
.galerie figcaption{ margin-top:10px; font-size:13.5px; color:var(--ink-3); }

.projekt__nachbarn{
  display:grid; gap:1px; background:var(--line);
  border-block:1px solid var(--line); margin-top:70px;
}
@media(min-width:700px){ .projekt__nachbarn{ grid-template-columns:repeat(2,1fr); } }
.projekt__nachbar{
  background:var(--paper); padding:26px 24px; text-decoration:none; color:inherit;
  display:flex; flex-direction:column; gap:6px; transition:background .4s;
}
.projekt__nachbar:hover{ background:var(--paper-2); }
.projekt__nachbar span{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3);
}
.projekt__nachbar strong{ font-family:var(--serif); font-weight:400; font-size:1.25rem; }
@media(min-width:700px){ .projekt__nachbar--zurueck{ text-align:right; align-items:flex-end; } }

/* ============================================================
   23. Filterleiste der Projektübersicht
   ============================================================ */
.filter{ display:flex; flex-wrap:wrap; align-items:center; gap:8px;
         margin:40px 0 0; padding:0; list-style:none; }
.filter__lbl{ font-family:var(--mono); font-size:11px; letter-spacing:.12em;
              text-transform:uppercase; color:var(--ink-3); margin-right:6px; }
.filter a{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--line); border-radius:100px; padding:9px 16px;
  text-decoration:none; color:var(--ink-2); transition:border-color .3s, color .3s, background .3s;
}
.filter a:hover{ color:var(--accent); border-color:var(--accent); }
.filter a.ist-aktiv{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

/* ============================================================
   24. Abschluss-CTA auf Unterseiten
   ============================================================ */
.abschluss{
  margin-top:70px; padding:40px 30px; border-radius:var(--r);
  background:var(--paper-2); border:1px solid var(--line);
  display:grid; gap:22px; align-items:center;
}
@media(min-width:760px){ .abschluss{ grid-template-columns:1fr auto; gap:36px; padding:46px 44px; } }
.abschluss h2{ font-size:clamp(1.4rem,3vw,1.95rem); margin:0 0 8px; }
.abschluss p{ margin:0; color:var(--ink-2); font-size:15.5px; max-width:48ch; }

/* ============================================================
   25. Startseite
   ============================================================ */
/* ---------- Hero ---------- */
.hero{ padding-top:132px; padding-bottom:0; }
@media(min-width:900px){ .hero{ padding-top:112px; } }

/* Der Hero ist ein Raster, damit die Reihenfolge je Breite anders sein
   kann, ohne das HTML zu verdoppeln.

   Schmal: Überschrift, dann Beschreibung und Knöpfe, dann die Suchdemo.
   Der WhatsApp-Knopf bleibt so weit oben, wie er es vorher war – die
   Demo schiebt sich nicht zwischen Überschrift und Handlungsaufruf.

   Breit: Die Demo rückt neben die Überschrift in den Weißraum rechts,
   der dort ohnehin frei war. Die Höhe des Heros ändert sich dadurch
   nicht. */
.hero .wrap{ display:grid; grid-template-columns:minmax(0,1fr); }
.hero .kicker    { order:1; }
.hero .hero__meta{ order:3; }
.hero .stage     { order:5; }

@media(min-width:1040px){
  .hero .wrap{ grid-template-columns:minmax(0,1fr) minmax(320px,400px); column-gap:52px; }
  .hero .kicker    { grid-column:1 / -1; grid-row:1; }
  .hero .hero__meta{ grid-column:1 / -1; grid-row:3; }
  .hero .stage     { grid-column:1 / -1; grid-row:4; }
}

/* ---------- Suchdemo im Hero ---------- */

/* Ohne Skript ist diese Liste die Darstellung. Sie ist vollständig
   lesbar und braucht keine Animation, um Sinn zu ergeben. */
/* Frage über Antwort statt nebeneinander: Bei ungleich langen Fragen
   sprang die Antwort sonst mal in dieselbe, mal in die nächste Zeile. */

/* Die Bühne erscheint erst, wenn das Skript sie übernommen hat. */

/* Die Liste bleibt im Dokument – für Vorleseprogramme –, verschwindet
   aber aus dem Bild, sobald die Bühne läuft. Kein display:none, sonst
   wäre der Inhalt auch akustisch weg. */


/* Der Treffer fährt von unten ein. Die Höhe ist fest, damit beim
   Wechsel nichts springt und der Hero seine Höhe behält. */

/* Drei Punkte laufen kurz, während „gesucht“ wird. Sie machen die
   Pause zwischen Eingabe und Antwort zu einem Moment statt zu einem
   Hänger – und erklären nebenbei, was gerade passiert. */
/* Bewusst direkt hinter der Eingabe statt am rechten Rand: dort läge
   auf schmalen Schirmen der schwebende WhatsApp-Knopf darüber. */
/* Während gesucht wird, ist der Schreibcursor weg – sonst blinkt er
   neben den Ladepunkten, als würde weitergetippt. Die Klasse setzt das
   Skript; über :has() wäre es kürzer, aber nicht überall unterstützt. */

/* Punkte zeigen, das wievielte von vier Beispielen gerade läuft. */

/* Auf schmalen Schirmen sitzt die Demo unter den Knöpfen und damit hart
   an der Falzkante. Deshalb dort enger gesetzt: Feld und Treffer sollen
   zusammen noch sichtbar sein, sonst bliebe die Pointe unter dem Rand. */
@media(max-width:1039px){
  /* Eine feine Linie trennt die Demo vom Hinweis darüber – beide sind
     kleine Mono-Zeilen und liefen sonst optisch ineinander. */
}

@media(prefers-reduced-motion:reduce){
}
.hero__meta{
  display:flex; flex-wrap:wrap; gap:26px 46px; align-items:flex-start;
  margin-top:28px; padding-top:22px; border-top:1px solid var(--line);
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:12px; }
.hero__hint{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-3); margin-top:14px !important;
  flex-basis:100%;
}

.stage{
  position:relative; margin-top:54px; aspect-ratio:10/7;
  overflow:hidden; border-radius:var(--r); background:var(--paper-3);
}
@media(min-width:900px){ .stage{ aspect-ratio:21/9; margin-top:30px; } }
.stage picture{ display:contents; }
.stage img{
  width:100%; height:124%; object-fit:cover;
  position:absolute; left:0; top:-12%; will-change:transform;
}

/* ---------- Kompetenzband ---------- */
.facts{ background:var(--ink); color:var(--paper); }
.facts .kicker{ color:var(--accent-soft); }
.fact{ padding:32px 0; border-bottom:1px solid var(--line-dark); }
@media(min-width:760px){
  .fact{ padding:44px 30px 48px 0; border-bottom:0; border-right:1px solid var(--line-dark); }
  .fact:last-child{ border-right:0; }
  .fact + .fact{ padding-left:30px; }
}
.fact .ic{ font-size:34px; color:var(--accent-soft); display:block; margin-bottom:20px; }
.fact h3{ margin:0; }
.fact p{ margin:12px 0 0; font-size:15.5px; color:rgba(250,248,244,.66); max-width:34ch; }

/* ---------- Leistung ---------- */
.split{ display:grid; gap:44px; grid-template-columns:1fr; align-items:start; }
@media(min-width:960px){ .split{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:80px; } }
.split__note{ margin-top:1.2em; color:var(--ink-2); font-size:15.5px; max-width:46ch; }

.cards{ display:grid; gap:1px; margin-top:56px; background:var(--line); border-block:1px solid var(--line); }
@media(min-width:820px){ .cards{ grid-template-columns:repeat(3,1fr); } }
.card{ background:var(--paper); padding:36px 30px 40px; position:relative; overflow:hidden; transition:background .45s; }
.card:hover{ background:var(--paper-2); }
.card .ic{ font-size:40px; color:var(--accent); display:block; margin-bottom:22px; transition:transform .5s cubic-bezier(.2,.8,.2,1); }
.card:hover .ic{ transform:translateY(-5px) rotate(-6deg); }
.card p{ color:var(--ink-2); font-size:15.5px; margin:12px 0 0; }
.card__no{ position:absolute; top:22px; right:26px; font-family:var(--mono); font-size:11px; letter-spacing:.1em; color:var(--ink-3); }

/* ---------- Ablauf ---------- */
.flow{ background:var(--paper-2); }
.flow__grid{ display:grid; gap:44px; grid-template-columns:1fr; }
@media(min-width:960px){ .flow__grid{ grid-template-columns:.85fr 1.15fr; gap:90px; } }
@media(min-width:960px){ .flow__stick{ position:sticky; top:130px; align-self:start; height:max-content; } }
.flow__intro{ margin:30px 0 0; color:var(--ink-2); font-size:15.5px; max-width:38ch; }
.flow__count{ display:flex; align-items:baseline; gap:.25em; margin:38px 0 0; font-family:var(--serif); }
.flow__now{ font-size:clamp(2.6rem,5vw,3.6rem); line-height:1; color:var(--accent); font-variant-numeric:tabular-nums; }
.flow__of{ font-size:1.1rem; color:var(--ink-3); }
.flow__prog{ height:2px; background:var(--paper-3); margin-top:22px; overflow:hidden; }
.flow__prog i{ display:block; height:100%; background:var(--accent); transform:scaleX(0); transform-origin:left; }

.steps{ display:grid; gap:1px; background:var(--line); }
.step{ background:var(--paper-2); padding:34px 0; }
.step__h{ display:flex; align-items:baseline; gap:14px; }
.step__n{ font-family:var(--mono); font-size:12px; color:var(--ink-3); letter-spacing:.1em; }
.step p{ color:var(--ink-2); margin:14px 0 0; max-width:46ch; font-size:15.5px; }
.step ul{ margin:18px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:8px; }
.step li{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  border:1px solid var(--line); border-radius:100px; padding:6px 12px; color:var(--ink-2);
}

/* ---------- Laufband ---------- */
.band{ overflow:hidden; border-block:1px solid var(--line); padding-block:20px; background:var(--paper); }
.band__track{ display:flex; gap:48px; white-space:nowrap; will-change:transform; }
.band__track span{ font-family:var(--serif); font-size:clamp(1.3rem,3vw,2rem); color:var(--ink-3); display:flex; align-items:center; gap:48px; }
.band__track span::after{ content:"◆"; font-size:.4em; color:var(--accent); }

/* ---------- Projekte ---------- */
.projects{ display:grid; gap:1px; margin-top:56px; background:var(--line); border-block:1px solid var(--line); }
@media(min-width:720px){ .projects{ grid-template-columns:repeat(2,1fr); } }
.proj{
  background:var(--paper); padding:34px 30px 36px;
  display:flex; flex-direction:column; gap:12px;
  text-decoration:none; color:inherit; position:relative; transition:background .4s;
}
a.proj:hover{ background:var(--paper-2); }
.proj__top{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.proj__dom{ font-family:var(--mono); font-size:12.5px; letter-spacing:.05em; color:var(--accent); }
.proj__go{ font-size:20px; color:var(--ink-3); transition:transform .4s cubic-bezier(.2,.8,.2,1), color .3s; }
a.proj:hover .proj__go{ transform:translate(4px,-4px); color:var(--accent); }
.proj h3{ margin:0; }
.proj p{ margin:0; color:var(--ink-2); font-size:15.5px; }
.proj__tags{ margin:6px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:7px; }
.proj__tags li{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  border:1px solid var(--line); border-radius:100px; padding:5px 11px; color:var(--ink-3);
}
.more{ margin:46px 0 0; padding:0; list-style:none; display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
/* Projekt ohne Link, weil die Seite gerade nicht erreichbar ist */
.more__off{
  display:inline-flex; align-items:center; gap:.6em;
  font-size:14.5px; color:var(--ink-3);
  border:1px dashed var(--line); border-radius:100px; padding:9px 17px;
}
.more__off i{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; font-style:normal; color:var(--ink-3); opacity:.8;
}
.more li a{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:14.5px; text-decoration:none; color:var(--ink-2);
  border:1px solid var(--line); border-radius:100px; padding:9px 17px; transition:border-color .3s, color .3s;
}
.more li a:hover{ color:var(--accent); border-color:var(--accent); }
.more__lbl{ font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); width:100%; margin:0 0 4px; }

/* ---------- Abschluss-CTA ---------- */
.cta{ background:var(--ink); color:var(--paper); text-align:center; overflow:hidden; position:relative; }
.cta .kicker{ color:var(--accent-soft); justify-content:center; }
.cta h2{ max-width:16ch; margin-inline:auto; }
.cta__p{ color:rgba(250,248,244,.66); max-width:46ch; margin:26px auto 0; }
.cta__actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin:40px 0 0; }
.cta .btn--ghost{ --bg:transparent; --fg:var(--paper); border-color:rgba(250,248,244,.3); }
.cta .btn--ghost:hover{ --fg:var(--accent-soft); border-color:var(--accent-soft); }
.cta__meta{ margin-top:30px; font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:rgba(250,248,244,.45); }
/* Grüner Schimmer hinter dem WhatsApp-Abschluss */
.cta::before{
  content:""; position:absolute; left:50%; top:58%; width:min(680px,105vw); aspect-ratio:1;
  transform:translate(-50%,-50%); pointer-events:none;
  background:radial-gradient(circle, rgba(37,211,102,.17) 0%, rgba(37,211,102,0) 68%);
}
.cta .wrap{ position:relative; z-index:1; }

/* ============================================================
   Animation ist ausschließlich eine Verbesserung, kein Grundzustand.
   Im normalen CSS ist der gesamte Hero sichtbar: keine opacity:0,
   kein transform, kein clip-path. Die Ausgangszustände der Animation
   setzt allein JavaScript über gsap.set(), und zwar erst, nachdem
   GSAP nachweislich geladen und initialisiert ist. Schlägt irgendetwas
   fehl, bleibt oder wird der sichtbare Endzustand hergestellt.

   Die Klasse .js-animations-ready sitzt dann am <html>-Element. Sie
   dient nur als Schalter für Feinheiten, nicht zum Verstecken.
   ============================================================ */
.js-animations-ready .stage img{ will-change:transform; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .band__track{ transform:none !important; }
}

/* ---------- Kartenmotiv in den Cluster-Einträgen ---------- */
.cluster__eintrag{ padding:0 0 26px; }
.cluster__bild{
  aspect-ratio:16/7; overflow:hidden; background:var(--paper-3);
  border-bottom:1px solid var(--line); margin-bottom:22px;
}
.cluster__bild img{ width:100%; height:100%; object-fit:cover; }
.cluster__eintrag > :not(.cluster__bild){ margin-inline:24px; }
.pillar__seite{ display:grid; gap:20px; justify-items:start; }
.pillar__seite img{ width:100%; max-width:300px; border-radius:var(--r); border:1px solid rgba(250,248,244,.18); }

/* ---------- Aufmacher der Ratgeberbeiträge ----------
   Feste Maße und aspect-ratio reservieren den Platz, damit beim
   Laden nichts springt. Keine Beschneidung: Die Motive sind
   Zeichnungen, teils mit Beschriftung. */
.aufmacher{ margin:34px 0 0; max-width:760px; }
.aufmacher img{
  width:100%; height:auto; aspect-ratio:8/5; display:block;
  border:1px solid var(--line); border-radius:var(--r); background:var(--paper-2);
}
.aufmacher figcaption{
  margin-top:10px; font-size:13px; color:var(--ink-3);
}

/* ============================================================
   26. Kopf-Animationen der Unterseiten

   Gleiches Grundmuster wie die Suchdemo im Hero: Die Liste im HTML
   ist der Inhalt und ohne Skript sichtbar. Die Bühne erscheint erst,
   wenn das Skript die jeweilige Klasse an <html> setzt; die Liste
   wandert dann in den akustischen Bereich – kein display:none, sonst
   wäre sie auch für Vorleseprogramme weg.
   ============================================================ */
.buehne-versteckt,

/* Seitenkopf mit Animation: zweispaltig, sobald Platz ist – links der
   Text, rechts die Animation in dem Raum, der vorher leer blieb. Die
   Zusatzklasse steht nur auf den beiden Übersichtsseiten; Impressum,
   Datenschutz, Projekt- und Artikelseiten nutzen denselben Seitenkopf
   unverändert weiter. */
@media(min-width:1040px){
}
.seitenkopf__demo{ margin-top:34px; }
@media(min-width:1040px){
  /* Oben ausgerichtet, nicht unten: Die Animation soll neben der
     Überschrift stehen wie im Hero der Startseite – nicht am Fuß des
     Textblocks kleben. Der kleine Versatz bringt ihre erste Mono-Zeile
     auf die Grundlinie des Kickers daneben. */
  .seitenkopf__demo{ margin-top:4px; }
}

/* ---------- Projektübersicht: Bauart-Wechsler ---------- */

/* Fensterrahmen um das Schema – erkennbar als Darstellung einer
   Seite, ohne ein Abbild zu behaupten. */

/* Die Balken stehen für Seitenbereiche, nicht für Messwerte. */


/* Ohne Skript: die vier Bauarten als lesbare Liste. */

/* ---------- Ratgeber: Gliederung, die entsteht ---------- */
/* Einrückungsstrich: macht die Zugehörigkeit zum Bereich sichtbar. */

/* Ohne Skript: alle Bereiche mit ihren Beiträgen untereinander. */

/* ---------- Startseite: Bestandsliste im Abschnitt „Wer dahintersteht“ ---------- */
.bestand{ margin-top:30px; }
.bestand__titel{
  font-family:var(--mono); font-size:11px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-3); margin:0 0 12px;
}
.bestand__liste{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.bestand__liste li{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:3px 10px;
  padding:9px 0; border-bottom:1px solid var(--line);
}
/* Mit Skript fahren die Zeilen beim Hereinscrollen einmal ein.
   Ohne Skript greift diese Regel nicht – dann steht die Liste da. */
.js-bestand .bestand__liste li{
  opacity:0; transform:translateY(8px);
  transition:opacity .4s ease, transform .4s cubic-bezier(.2,.9,.25,1);
}
.js-bestand .bestand__liste li.is-da{ opacity:1; transform:none; }

.bestand__punkt{
  width:7px; height:7px; border-radius:50%; flex:none;
  background:var(--wa); align-self:center;
}
[data-betrieb="hinweis"] .bestand__punkt{ background:#B8891F; }
[data-betrieb="nein"]    .bestand__punkt{ background:var(--ink-3); }
.bestand__domain{ font-size:14.5px; color:var(--ink); font-weight:600; }
.bestand__art{ font-size:13px; color:var(--ink-3); }
.bestand__stand{
  margin-left:auto; font-family:var(--mono); font-size:10.5px;
  letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3);
}
[data-betrieb="nein"] .bestand__domain{ color:var(--ink-2); }

@media(max-width:560px){
  .bestand__stand{ margin-left:0; flex-basis:100%; }
}

@media(prefers-reduced-motion:reduce){
}

/* ============================================================
   27. Zentraler Hero (alle 21 Seiten)

   Ein Raster: Text links, Motiv rechts. Gemeinsame Seitenbreite über
   --wrap (1240 px). Kein vollbreiter Titel über beide Spalten.

   Die Maße sind so gewählt, dass bei 1366×650 und 1280×720 Eyebrow,
   H1, Kurztext, Aktionen und das vollständige Motiv in den ersten
   Bildschirm passen – ohne feste Höhe und ohne overflow:hidden. Bei
   kurzen Fenstern, Querformat oder starkem Zoom wächst der Bereich
   natürlich und wird gescrollt, statt etwas abzuschneiden.
   ============================================================ */
.hero{
  padding-block:calc(var(--hdr-h) + 26px) 34px;
  position:relative;
}
.hero--kompakt{ padding-block:calc(var(--hdr-h) + 22px) 26px; }

.hero__raster{ display:grid; gap:28px; align-items:center; }
@media(min-width:1000px){
  .hero__raster{
    grid-template-columns:minmax(0,1fr) minmax(360px,470px);
    column-gap:48px; gap:0;
  }
  .hero--kompakt .hero__raster{ grid-template-columns:minmax(0,1fr) minmax(330px,430px); }
}
.hero--ohne-motiv .hero__raster{ grid-template-columns:minmax(0,1fr); }

/* H1: 36 px mobil, rund 58 px auf Laptop, 72 px auf großem Desktop.
   Lange Artikelüberschriften laufen in der kompakten Variante. */
.hero__h1{
  font-size:clamp(2.25rem, 1.1rem + 3vw, 4.5rem);
  line-height:1.03; margin:0; max-width:17ch;
}
.hero--kompakt .hero__h1{
  font-size:clamp(1.8rem, 1.05rem + 1.9vw, 3rem);
  line-height:1.1; max-width:22ch;
}
.hero__text-kurz{
  margin:20px 0 0; max-width:46ch;
  font-size:clamp(1rem, .95rem + .25vw, 1.16rem);
  line-height:1.58; color:var(--ink-2);
}
.hero__meta{
  display:flex; flex-wrap:wrap; gap:8px 22px; margin:18px 0 0;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3);
}
.hero__meta span{ display:inline-flex; align-items:center; gap:.5em; }
.hero__meta .ic{ width:14px; height:14px; color:var(--accent); }
.hero__meta a{ color:inherit; }

.hero__aktionen{ display:flex; flex-wrap:wrap; gap:12px; margin-top:26px; }
.hero__hinweis{
  margin:14px 0 0; font-family:var(--mono); font-size:11px;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3);
}
.btn--dunkel{ --bg:var(--ink); --fg:var(--paper); }
.btn--dunkel:hover{ --bg:#2b2620; }

/* ---------- Motiv ---------- */
.hero__motiv{ min-width:0; }
.motiv{ margin:0; }
.motiv__svg{
  width:100%; height:auto; display:block;
  /* Fläche von Anfang an reservieren – kein Nachrücken beim Laden. */
  aspect-ratio:480/340;
}
.hero--kompakt .motiv__svg{ aspect-ratio:480/260; }

/* Grundzustand: alles sichtbar, ruhig. Die Animation hebt nur hervor. */
.m-karte rect{ fill:var(--paper-2); stroke:rgba(22,19,15,.22); stroke-width:1; }
.m-karte text{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.06em;
  fill:var(--ink-2); text-transform:uppercase;
}
.m-karte--stark rect{ fill:var(--paper-3); }
.m-karte--wa rect{ fill:rgba(14,124,90,.1); stroke:rgba(14,124,90,.35); }
.m-karte--wa text{ fill:var(--wa-dark); }
.m-zeile{ fill:#DCD5C6; }
.m-pfad{ stroke:rgba(22,19,15,.28); stroke-width:1.5; stroke-linecap:round; }
.m-pfad--weich{ stroke-dasharray:4 4; }
.m-text{
  font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  fill:var(--ink-3); text-transform:uppercase;
}
.m-browser__rahmen{ fill:var(--paper); stroke:var(--line); stroke-width:1; }
.m-browser__trenn{ stroke:var(--line); stroke-width:1; }
.m-browser__punkt{ fill:var(--paper-3); }
.m-browser__url{
  font-family:var(--mono); font-size:8.5px; letter-spacing:.06em;
  fill:var(--ink-3); text-anchor:middle; text-transform:uppercase;
}

/* Hervorhebung des laufenden Schritts. Nur Farbe und Strichstärke –
   keine Bewegung, die Inhalte verschiebt. */
.motiv [data-schritt]{
  transition:opacity .45s ease, fill .45s ease, stroke .45s ease;
}
.js-motive .motiv:not(.ist-fertig) [data-schritt]{ opacity:.42; }
.motiv [data-schritt].ist-aktiv{ opacity:1; }
.motiv [data-schritt].ist-aktiv rect:not(.m-browser__rahmen){ fill:var(--accent-soft); stroke:var(--accent); }
.motiv [data-schritt].ist-aktiv.m-karte--wa rect{ fill:rgba(14,124,90,.18); stroke:var(--wa); }
.motiv [data-schritt].ist-aktiv text{ fill:var(--ink); }
.motiv rect[data-schritt].ist-aktiv{ fill:var(--accent-soft); }
.motiv path[data-schritt].ist-aktiv{ stroke:var(--accent); stroke-width:2; }
.motiv text[data-schritt].ist-aktiv{ fill:var(--accent); }
/* Nach dem Durchlauf steht alles gleichwertig da. */
.motiv.ist-fertig [data-schritt]{ opacity:1; }

.motiv__fuss{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:12px; margin-top:12px; min-height:34px;
}
/* Die Beschriftungen liegen übereinander, damit die Höhe konstant
   bleibt und beim Wechsel nichts springt. */
.motiv__zeile{ position:relative; flex:1 1 auto; min-height:34px; }
.motiv__schritt{
  position:absolute; inset:0; opacity:0;
  font-family:var(--mono); font-size:11px; letter-spacing:.07em;
  color:var(--ink-2); line-height:1.45;
  transition:opacity .3s ease;
}
.motiv__schritt.ist-da{ opacity:1; }
.motiv__knopf{
  flex:none; border:1px solid var(--line); background:var(--paper);
  border-radius:100px; padding:6px 14px; cursor:pointer;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-2);
  transition:border-color .3s, color .3s;
}
.motiv__knopf:hover{ border-color:var(--accent); color:var(--accent); }

@media(max-width:999px){
  /* Mobil eigene Anordnung: Motiv unter dem Text, flacher zugeschnitten,
     Abstände gestrafft. Die Beschriftungen werden dabei nicht kleiner –
     sie werden größer, weil das SVG schmaler skaliert. */
  .hero{ padding-block:calc(var(--hdr-h) + 14px) 24px; }
  .hero__raster{ gap:20px; }
  .hero__text-kurz{ margin-top:16px; }
  .hero__aktionen{ margin-top:20px; gap:10px; }
  /* Etwas kompakter, damit die lange Beschriftung des Hauptknopfes
     einzeilig bleibt. Die Touchfläche bleibt mit rund 52 px deutlich
     über dem Mindestmaß. */
  .hero__aktionen .btn--lg{ padding:15px 22px; font-size:15.5px; }
  .hero__hinweis{ margin-top:10px; }
  .hero__motiv{ margin-top:0; }
  .motiv__svg{ aspect-ratio:480/240; }
  .motiv__fuss{ margin-top:9px; min-height:30px; }
  .motiv__zeile{ min-height:30px; }
  .m-karte text, .m-text{ font-size:12px; }
  .m-browser__url{ font-size:9px; }
}

@media(prefers-reduced-motion:reduce){
  .motiv [data-schritt], .motiv__schritt{ transition:none; }
}

/* Flache Fenster: Laptops mit 650–768 px Höhe sind der Normalfall, nicht
   die Ausnahme. Dort werden die Abstände gestrafft und die Überschrift
   etwas kleiner gesetzt, damit Aussage, Aktion und Grafik zusammen
   sichtbar bleiben. Die H1 bleibt dabei über 48 px. */
@media(min-width:1000px) and (max-height:780px){
  .hero{ padding-block:calc(var(--hdr-h) + 16px) 22px; }
  /* Etwas breitere Zeilen: Das spart bei langen Überschriften eine
     ganze Zeile, ohne die Schrift kleiner zu machen. */
  .hero__h1{ font-size:clamp(2.1rem, 1rem + 2.4vw, 3.5rem); max-width:21ch; }
  .hero--kompakt .hero__h1{ font-size:clamp(1.7rem, 1rem + 1.5vw, 2.5rem); }
  .hero__text-kurz{ margin-top:14px; }
  .hero__meta{ margin-top:12px; }
  .hero__aktionen{ margin-top:18px; }
  .hero__hinweis{ margin-top:9px; }
  .hero__aktionen .btn--lg{ padding:16px 26px; font-size:15.5px; }
  .motiv__fuss{ margin-top:9px; }
}

/* Seiten mit Brotkrumen: Deren Innenabstand schafft bereits den Platz
   unter dem fest stehenden Kopfbereich. Der Hero darf ihn nicht noch
   einmal addieren – sonst steht der Inhalt doppelt so tief und die
   Aktionen rutschen bei flachen Fenstern unter den Rand. */
.hat-krumen .hero{ padding-top:12px; }
@media(min-width:1000px) and (max-height:780px){
  .hat-krumen .hero{ padding-top:6px; }
  .krumen{ padding-top:96px; }
}

/* Mobil sitzt der Kopfbereich niedriger; die Brotkrumen brauchen dort
   weniger Vorlauf. Das holt die letzten Pixel, die dem Motiv im ersten
   Bildschirm gefehlt haben. */
@media(max-width:999px){
  .krumen{ padding-top:94px; }
  .hero__meta{ margin-top:14px; }
}

/* In der kompakten Variante ist die Grafik schmaler. Damit die
   Beschriftungen nicht mit heruntergerechnet werden, sind sie dort
   eine Spur größer angelegt. */
.hero--kompakt .m-karte text{ font-size:13px; }
.hero--kompakt .m-text{ font-size:12.5px; }
.hero--kompakt .m-browser__url{ font-size:10px; }

/* ============================================================
   28. Redesign: Hero mit Serifzeile, kräftiger Sans und Smartphone

   Spaltenverhältnis nach Vorgabe: links rund 60 % für Aussage und
   Aktion, rechts rund 38 % für das Gerät. Das Gerät steht vollständig
   im Container und wird nie angeschnitten.
   ============================================================ */
@media(min-width:1000px){
  .hero__raster{
    grid-template-columns:minmax(0,1.6fr) auto;
    column-gap:clamp(32px,4vw,64px); gap:0; align-items:center;
    /* Nur das Gerät rückt an die rechte Rasterkante. Der Text bleibt
       an der linken – sonst schiebt justify-items beide Spalten. */
    justify-items:stretch;
  }
  .hero--kompakt .hero__raster{ grid-template-columns:minmax(0,1.7fr) auto; }
}

/* H1: Laptop 48–68 px, großer Desktop bis 88 px – über clamp an die
   Breite gekoppelt, mit eigener Regel für flache Fenster weiter unten. */
.hero__h1{
  font-family:var(--sans); font-weight:800; letter-spacing:-.028em;
  font-size:clamp(2.1rem, .95rem + 3.2vw, 5.5rem);
  line-height:.96; max-width:15ch;
}
.hero__h1 .zeile-serif{
  font-size:clamp(1.45rem, .85rem + 1.65vw, 2.75rem);
  margin-bottom:.12em; letter-spacing:-.005em;
}
.hero--kompakt .hero__h1{
  font-size:clamp(1.75rem, 1rem + 1.9vw, 3.1rem);
  line-height:1.04; max-width:19ch;
}
.hero__akzent{ color:var(--accent); }

.hero__text-kurz{
  font-size:clamp(1.05rem, 1rem + .28vw, 1.32rem);
  line-height:1.55; color:var(--ink-2); max-width:600px; margin-top:22px;
}

/* ---------- Smartphone-Mockup ----------
   Markenneutrale Geräteform aus HTML und CSS: kein Herstellerbezug,
   kein fremdes Bildmaterial, kein Video.

   Die Größe hängt an der Fensterhöhe, nicht an einer festen Zahl.
   Dadurch bleibt das Gerät bei flachen Laptops vollständig sichtbar
   und wird auf großen Schirmen groß genug für lesbare Beschriftungen.
   Das Seitenverhältnis ist fest – so entsteht kein Layoutsprung. */
.phone{ margin:0; display:flex; flex-direction:column; align-items:center; gap:10px; }
.geraet{
  /* Höhe folgt dem Fenster, Breite dem festen Seitenverhältnis.
     Auf großen Schirmen ergibt das rund 340 px Breite, auf flachen
     Laptops entsprechend weniger – aber nie angeschnitten. */
  --geraet-h: clamp(360px, 68svh, 600px);
  height: var(--geraet-h);
  width: calc(var(--geraet-h) / 1.76);
  max-width:100%;
  position:relative;
}
.geraet__rahmen{
  position:absolute; inset:0;
  border-radius:clamp(22px, 7%, 34px);
  background:var(--ink);
  padding:9px;
  box-shadow:var(--schatten-l), 0 0 0 1px rgba(20,21,25,.06);
}
/* Neutraler Lautsprecherschlitz mit kleinem Kamerapunkt daneben –
   bewusst schmal und mittig, damit keine Assoziation zu einer
   bestimmten Gerätereihe entsteht. */
.geraet__steg{
  position:absolute; top:15px; left:50%; transform:translateX(-50%);
  width:46px; height:4px; border-radius:2px; background:rgba(255,255,255,.28);
  z-index:3; display:flex; align-items:center;
}
.geraet__steg i{
  position:absolute; right:-14px; width:5px; height:5px; border-radius:50%;
  background:rgba(255,255,255,.22);
}
.geraet__schirm{
  height:100%; border-radius:clamp(15px,5%,26px); background:var(--paper);
  overflow:hidden; display:flex; flex-direction:column;
}
.geraet__kopf{
  flex:none; display:flex; align-items:center; gap:7px;
  padding:9px 12px 7px; border-bottom:1px solid var(--linie);
}
.geraet__punkt{ width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none; }
.geraet__url{
  font-size:10px; letter-spacing:.04em; color:var(--ink-3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.phone__svg{ flex:1 1 auto; width:100%; min-height:0; display:block; }
.phone__zeile{
  flex:none; position:relative; margin:0; padding:9px 12px 11px;
  min-height:46px; border-top:1px solid var(--linie); background:var(--paper-2);
}
.phone__schritt{
  position:absolute; left:12px; right:12px; top:9px; opacity:0;
  font-size:11.5px; line-height:1.35; color:var(--ink-2);
  transition:opacity var(--zeit-m) ease;
}
.phone__schritt.ist-da{ opacity:1; }
.phone__fuss{ display:flex; justify-content:center; }
.phone__knopf{
  border:1px solid var(--linie); background:var(--paper); cursor:pointer;
  border-radius:var(--r-knopf); padding:8px 16px; min-height:44px;
  font-family:var(--sans); font-size:11.5px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2);
  transition:border-color var(--zeit-s), color var(--zeit-s);
}
.phone__knopf:hover{ border-color:var(--accent); color:var(--accent); }

/* Szenen-Vokabular. Grundzustand vollständig sichtbar und ruhig. */
.p-karte rect{ fill:var(--paper-2); stroke:var(--linie); stroke-width:1; }
.p-karte text{ font-family:var(--sans); font-size:13px; font-weight:600; fill:var(--ink-2); }
.p-karte--stark rect{ fill:#EDEDE9; }
.p-karte--stark text{ fill:var(--ink); }
.p-karte--such rect{ fill:var(--paper); stroke:var(--ink-3); stroke-dasharray:5 4; }
.p-karte--ziel rect{ fill:var(--accent-soft); stroke:var(--accent); }
.p-karte--ziel text{ fill:var(--accent-2); font-weight:700; }
.p-karte--wa rect{ fill:rgba(14,124,90,.12); stroke:var(--wa); }
.p-karte--wa text{ fill:var(--wa-dark); font-weight:700; }
.p-label{ font-family:var(--sans); font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; fill:var(--ink-3); }
.p-zeile{ fill:#E4E4E0; }
.p-pfeil{ stroke:var(--ink-3); stroke-width:1.6; }
.p-spitze{ fill:var(--ink-3); }

/* Hervorhebung des laufenden Schritts – nur Farbe, keine Bewegung,
   die das Layout verschiebt. */
.phone [data-schritt]{ transition:opacity var(--zeit-m) ease, fill var(--zeit-m) ease, stroke var(--zeit-m) ease; }
.js-motive .phone:not(.ist-fertig) [data-schritt]{ opacity:.34; }
.phone [data-schritt].ist-aktiv{ opacity:1; }
.phone [data-schritt].ist-aktiv rect{ stroke:var(--accent); }
.phone g[data-schritt].ist-aktiv rect{ fill:var(--accent-soft); }
.phone g[data-schritt].ist-aktiv text{ fill:var(--accent-2); }
.phone text[data-schritt].ist-aktiv{ fill:var(--accent); }
.phone rect.p-zeile[data-schritt].ist-aktiv{ fill:#E6CFC6; }
.phone path[data-schritt].ist-aktiv{ stroke:var(--accent); }
.phone path.p-spitze[data-schritt].ist-aktiv{ fill:var(--accent); stroke:none; }
.phone.ist-fertig [data-schritt]{ opacity:1; }

@media(prefers-reduced-motion:reduce){
  .phone [data-schritt], .phone__schritt{ transition:none; }
}

@media(max-width:999px){
  /* Mobil steht das Gerät unter dem Text. Es wird kleiner angesetzt,
     damit Überschrift, Nutzen und Aktion sicher vollständig im ersten
     Bildschirm bleiben; der untere Rand des Geräts darf dabei bewusst
     angeschnitten sein und scrollt natürlich nach. */
  .geraet{ --geraet-h: clamp(320px, 54svh, 470px); }
  .hero__raster{ justify-items:start; }
  .phone{ align-items:flex-start; }
}

/* ---------- Feedback-Runde: Hero selbstbewusster ---------- */
/* Die Serifzeile war zu hell und verlor gegen die schwarze Sans. */
.zeile-serif{ color:var(--ink); }
.hero__h1 .zeile-serif{ color:#2A2C33; }

/* Auf großen Schirmen darf die H1 kräftiger stehen – bei höchstens
   drei visuellen Zeilen. Der Umbruch bleibt redaktionell gesetzt. */
.hero__h1{ max-width:17ch; }
@media(min-width:1500px){
  .hero__h1{ font-size:clamp(4.2rem, 2rem + 2.75vw, 5.4rem); max-width:15ch; }
  .hero__h1 .zeile-serif{ font-size:clamp(2.3rem, 1.2rem + 1.5vw, 3.1rem); }
}

/* Erklärungstext: bewusst begrenzte Zeilenlänge. */
.hero__text-kurz{ max-width:660px; }

/* Die Antwortzeile unter den Aktionen soll lesbar sein, nicht wie
   Kleingedrucktes wirken. */
.hero__hinweis{
  font-size:13px; letter-spacing:.02em; text-transform:none;
  color:var(--ink-2); font-weight:500; margin-top:16px;
}

/* ---------- Szenen-Vokabular, Feedback-Runde ----------
   Größere Formen, weniger graue Kleinteile, Terrakotta und Grün
   gezielt zur Führung. */
.p-feld{ fill:var(--paper); stroke:var(--ink-3); stroke-width:1.5; }
.p-lupe{ stroke:var(--ink-3); stroke-width:2; stroke-linecap:round; }
.p-eingabe{ font-family:var(--sans); font-size:14px; font-weight:600; fill:var(--ink); }
.p-cursor{ fill:var(--accent); }
[data-schritt="1"].ist-aktiv .p-cursor{ animation:p-blink .9s steps(1,end) infinite; }
@keyframes p-blink{ 0%,50%{opacity:1} 51%,100%{opacity:0} }

/* Die ausgewählte Frage */
.p-karte--wahl rect{ fill:var(--accent-soft); stroke:var(--accent); stroke-width:1.5; }
.p-karte--wahl text{ fill:var(--accent-2); font-weight:700; }

/* Inhalt und Technik als farbige Module */
.p-modul{ stroke-width:1.5; }
.p-modul--inhalt{ fill:var(--accent-soft); stroke:var(--accent); }
.p-modul--technik{ fill:rgba(14,124,90,.12); stroke:var(--wa); }
.p-modul__t{ font-family:var(--sans); font-size:15px; font-weight:800; fill:var(--ink); }
.p-modul__u{ font-family:var(--sans); font-size:12px; font-weight:500; fill:var(--ink-2); }

/* Die kleine Website-Vorschau im Display */
.p-site{ fill:var(--paper); stroke:var(--ink); stroke-width:1.8; }
.p-site__leiste{ stroke:var(--linie); stroke-width:1; }
.p-site__punkt{ fill:var(--paper-3); }
.p-site__url{ font-family:var(--sans); font-size:9.5px; font-weight:500; fill:var(--ink-3); }
.p-site__h1{ font-family:var(--sans); font-size:19px; font-weight:800; fill:var(--ink); letter-spacing:-.03em; }
.p-site__z{ fill:#E4E4E0; }
.p-site__cta{ fill:var(--wa); }
.p-site__ctat{ font-family:var(--sans); font-size:11.5px; font-weight:700; fill:#fff; }
.p-site__bild{ fill:var(--paper-2); stroke:var(--linie); }

/* Hervorhebung greift auch auf die neuen Formen. */
.phone g[data-schritt].ist-aktiv .p-feld{ stroke:var(--accent); }
.phone g[data-schritt].ist-aktiv .p-modul--inhalt{ stroke-width:2.2; }
.phone g[data-schritt].ist-aktiv .p-modul--technik{ stroke-width:2.2; }
.phone g[data-schritt].ist-aktiv .p-site{ stroke-width:2.4; }
/* Innerhalb der Website-Vorschau bleiben die Farben stehen – sie
   wird nicht flächig eingefärbt wie eine einfache Karte. */
.phone g[data-schritt].ist-aktiv .p-site__cta{ fill:var(--wa); }
.phone g[data-schritt].ist-aktiv .p-site__z{ fill:#E4E4E0; }
.phone g[data-schritt].ist-aktiv .p-site__bild{ fill:var(--paper-2); }
.phone g[data-schritt].ist-aktiv .p-modul__t,
.phone g[data-schritt].ist-aktiv .p-site__h1{ fill:var(--ink); }
.phone g[data-schritt].ist-aktiv .p-eingabe{ fill:var(--ink); }
@media(prefers-reduced-motion:reduce){ .p-cursor{ animation:none !important; } }

/* ---------- WhatsApp-Hierarchie ----------
   Drei grüne Einstiege gleichzeitig sind zu viel. Der schwebende
   Knopf tritt zurück, solange der Hero im Bild ist, und erscheint
   erst danach. Header-Knopf und Hero-CTA bleiben unverändert.
   Ohne JavaScript ist er von Anfang an da – dann fehlt niemandem
   der Kontaktweg. */
.js-wa-ruht .wa-float{
  opacity:0; transform:translateY(14px) scale(.92);
  pointer-events:none; visibility:hidden;
}
.wa-float{
  transition:opacity var(--zeit-m) var(--kurve),
             transform var(--zeit-m) var(--kurve),
             visibility 0s linear var(--zeit-m),
             background var(--zeit-s);
}
.js-wa-frei .wa-float{
  opacity:1; transform:none; pointer-events:auto; visibility:visible;
  transition-delay:0s;
}
@media(prefers-reduced-motion:reduce){
  .wa-float{ transition:none; }
}

/* ---------- Orientierungsstreifen unter dem Hero ----------
   Kompakt und sofort mit Inhalt: vier Stationen, verbunden durch
   eine Linie. Keine leere dunkle Fläche mehr. */
.pfad{
  background:var(--ink); color:var(--paper);
  padding-block:clamp(44px, 5vw, 76px);
}
.pfad__titel{
  font-size:clamp(1.1rem, .95rem + .5vw, 1.45rem); font-weight:700;
  letter-spacing:-.01em; color:var(--paper); margin:0 0 clamp(26px,3vw,40px);
}
.pfad__reihe{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(24px,2.4vw,34px); grid-template-columns:1fr;
  position:relative;
}
@media(min-width:760px){ .pfad__reihe{ grid-template-columns:repeat(4,1fr); } }
.pfad__station{ position:relative; padding-top:26px; }
/* Die Verbindungslinie: eine durchgehende Kante über allen Stationen,
   je Station ein Punkt darauf. */
.pfad__station::before{
  content:""; position:absolute; left:0; right:0; top:0;
  height:1px; background:rgba(255,255,255,.22);
}
.pfad__station::after{
  content:""; position:absolute; left:0; top:-3.5px;
  width:8px; height:8px; border-radius:50%; background:var(--paper-3);
  transition:background var(--zeit-m) ease, transform var(--zeit-m) ease;
}
.pfad__station.ist-da::after{ background:var(--accent); transform:scale(1.25); }
.pfad__nr{
  display:block; font-size:11.5px; font-weight:700; letter-spacing:.14em;
  color:rgba(255,255,255,.45); margin-bottom:10px;
}
.pfad__station h3{
  font-size:clamp(1.15rem,1rem+.5vw,1.5rem); color:var(--paper);
  margin:0 0 8px; font-weight:800; letter-spacing:-.02em;
}
.pfad__station p{
  margin:0; font-size:14.5px; line-height:1.55; color:rgba(255,255,255,.72);
}
.pfad__fuss{
  margin:clamp(28px,3vw,44px) 0 0; font-size:14.5px; color:rgba(255,255,255,.6);
}
.pfad__fuss a{ color:var(--paper); text-underline-offset:3px; }
@media(prefers-reduced-motion:reduce){ .pfad__station::after{ transition:none; } }

@media(max-width:999px){
  /* Mobil: der sekundäre Weg tritt deutlich zurück und wird zum
     Textlink. Das spart die Höhe eines zweiten Knopfes und macht die
     Rangfolge eindeutig – genau ein starker Handlungsaufruf. */
  .hero__aktionen{ align-items:center; gap:8px 18px; }
  .hero__aktionen .btn--ghost{
    border:0; background:none; padding:6px 2px; min-height:44px;
    font-size:15px; color:var(--ink-2); text-decoration:underline;
    text-underline-offset:4px; text-decoration-thickness:1px;
  }
  .hero__aktionen .btn--ghost:hover{ color:var(--accent); }
  .hero__aktionen .btn--ghost .ic{ display:none; }
  /* Hinweis einzeilig halten */
  .hero__hinweis{ font-size:12.5px; margin-top:12px; }
  /* Gerät so groß wie möglich, ohne den Hero zu überdehnen */
  .geraet{ --geraet-h: clamp(300px, 40svh, 380px); }
  .phone{ gap:8px; }
}

@media(min-width:1000px){
  .hero__motiv{ justify-self:end; }
}

/* ---------- Weitere Szenen-Formen ---------- */
.p-stamm{ fill:#E9E2D6; stroke:var(--ink-3); stroke-width:1.5; }
.p-ring{ fill:#DDD3C2; stroke:var(--ink-3); stroke-width:1.5; }
.p-ring--in{ fill:#CFC3AE; }

/* Ergebnisfläche: ruhig, ohne erfundenen Zahlenwert */
.p-ergebnis{ fill:var(--accent-soft); stroke:var(--accent); stroke-width:1.8; }
.p-ergebnis__l{ font-family:var(--sans); font-size:11.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; fill:var(--accent-2); }
.p-ergebnis__w{ font-family:var(--sans); font-size:21px; font-weight:800; fill:var(--ink); letter-spacing:-.03em; }

/* Warnfläche für Sicherheits- und Rechtshinweise */
.p-warn{ fill:#FBF3E4; stroke:#C08A2E; stroke-width:1.6; }
.p-warn__t{ font-family:var(--sans); font-size:14px; font-weight:800; fill:#6B4A12; }
.p-warn__u{ font-family:var(--sans); font-size:11.5px; font-weight:500; fill:#7C5A22; }

/* Abgeschaltet / verworfen */
.p-aus{ fill:var(--paper-2); stroke:var(--ink-3); stroke-width:1.6; stroke-dasharray:6 5; }
.p-aus__t{ font-family:var(--sans); font-size:15px; font-weight:800; fill:var(--ink-2); }
.p-aus__u{ font-family:var(--sans); font-size:11.5px; font-weight:500; fill:var(--ink-3); }
.p-karte--aus rect{ fill:var(--paper-2); stroke:var(--linie); stroke-dasharray:5 4; }
.p-karte--aus text{ fill:var(--ink-3); }

/* Sachlicher Hinweis am Fuß einer Szene */
.p-karte--hinweis rect{ fill:none; stroke:var(--ink-3); stroke-width:1.2; stroke-dasharray:5 4; }
.p-karte--hinweis text{ fill:var(--ink-3); font-weight:500; font-size:12px; }

/* Firmenkarte auf der Impressumsseite */
.p-firma{ fill:var(--ink); }
.p-firma__t{ font-family:var(--sans); font-size:19px; font-weight:800; fill:var(--paper); letter-spacing:-.02em; }
.p-firma__u{ font-family:var(--sans); font-size:12.5px; font-weight:500; fill:rgba(255,255,255,.66); }

/* Zweite Überschriftengröße in der Website-Vorschau */
.p-site__h2{ font-family:var(--sans); font-size:16px; font-weight:800; fill:var(--ink); letter-spacing:-.02em; }
/* Beschriftung an einem Weg */
.p-weg{ font-family:var(--sans); font-size:11.5px; font-weight:600; fill:var(--ink-3); }
/* Abgehakter Prüfschritt */
.p-haken{ stroke:var(--wa); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }

/* Diese Flächen behalten ihre Farbe, auch wenn ihr Schritt läuft. */
.phone g[data-schritt].ist-aktiv .p-warn{ fill:#FBF3E4; stroke-width:2.2; }
.phone g[data-schritt].ist-aktiv .p-warn__t{ fill:#6B4A12; }
.phone g[data-schritt].ist-aktiv .p-warn__u{ fill:#7C5A22; }
.phone g[data-schritt].ist-aktiv .p-firma{ fill:var(--ink); }
.phone g[data-schritt].ist-aktiv .p-firma__t{ fill:var(--paper); }
.phone g[data-schritt].ist-aktiv .p-firma__u{ fill:rgba(255,255,255,.66); }
.phone g[data-schritt].ist-aktiv .p-ergebnis{ stroke-width:2.4; }
.phone g[data-schritt].ist-aktiv .p-ergebnis__w{ fill:var(--ink); }
.phone g[data-schritt].ist-aktiv .p-aus{ stroke-width:2; }
.phone g[data-schritt].ist-aktiv .p-aus__t,
.phone g[data-schritt].ist-aktiv .p-aus__u{ fill:var(--ink-2); }
.phone g[data-schritt].ist-aktiv .p-stamm{ stroke:var(--accent); stroke-width:2; }
.phone g[data-schritt].ist-aktiv .p-ring{ stroke:var(--accent); }
.phone g[data-schritt].ist-aktiv .p-haken{ stroke:var(--wa); }
.phone g[data-schritt].ist-aktiv .p-site__h2{ fill:var(--ink); }

@media(max-width:999px){
  /* Auf Unterseiten ist der Hero voller: Brotkrumen, Meta-Angaben und
     zwei Aktionen kommen dazu. Diese drei Stellen werden deshalb
     mobil gestrafft, damit möglichst viel vom Gerät im ersten
     Bildschirm bleibt. Inhalte gehen dabei keine verloren. */

  /* Brotkrumen einzeilig – ein langer Beitragstitel brach sonst um
     und kostete eine ganze Zeile. */
  .krumen ol{ flex-wrap:nowrap; overflow:hidden; }
  .krumen li:last-child{ overflow:hidden; }
  .krumen li:last-child span,
  .krumen li:last-child a{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  /* Meta-Angaben als dichte Zeile statt dreier Zeilen. */
  .hero__meta{ gap:4px 14px; font-size:11px; line-height:1.35; margin-top:12px; }
  .hero__meta .ic{ width:13px; height:13px; }

  /* Der Replay-Knopf ist eine Zugabe; mobil rückt er in die
     Displayzeile statt unter das Gerät eine eigene Zeile zu belegen. */
  .phone__fuss{ position:absolute; right:14px; bottom:12px; z-index:2; }
  .phone{ position:relative; }
  /* Sitzt absolut im Gerät und kostet deshalb keine Höhe im Fluss –
     die Bedienfläche darf hier ruhig die vollen 44 px haben. */
  .phone__knopf{ padding:5px 12px; font-size:10px; min-height:44px; background:var(--paper); }

  /* Beiträge haben die dichteren Szenen – dort darf das Gerät etwas
     kleiner sein, ohne dass Beschriftungen unlesbar werden. */
  .hero--kompakt .geraet{ --geraet-h: clamp(285px, 36svh, 340px); }
}

/* ---------- Navigation mit Untermenüs ----------
   Grundsatz: Alle Ziele sind ohne JavaScript erreichbar. Der
   Hauptlink führt immer zum Überblick; das Untermenü ist die
   Abkürzung. Es klappt per Klick auf den Schalter auf – auf dem
   Desktop zusätzlich beim Überfahren, auf Touchgeräten nicht. */
.nav{ display:none; gap:4px; align-items:center; }
@media(min-width:1040px){ .nav{ display:flex; } }
.nav__punkt{ position:relative; display:flex; align-items:center; }
.nav__haupt{
  display:inline-block; padding:9px 10px; font-size:15px; font-weight:600;
  color:var(--ink-2); text-decoration:none; border-radius:var(--r-s);
  transition:color var(--zeit-s);
}
.nav__haupt:hover{ color:var(--ink); }
.nav__haupt.ist-aktiv{ color:var(--ink); }
.nav__haupt.ist-aktiv::after{
  content:""; display:block; height:2px; background:var(--accent);
  margin-top:3px; border-radius:1px;
}
/* Bedienfläche mindestens 44 × 44 px – das Symbol bleibt klein,
   der anklickbare Bereich nicht. */
.nav__schalter{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; margin-left:-14px; padding:0;
  border:0; background:none; cursor:pointer; color:var(--ink-3);
  border-radius:var(--r-s);
}
.nav__schalter:hover{ color:var(--ink); }
.nav__pfeil{ width:13px; height:13px; transform:rotate(90deg); transition:transform var(--zeit-s) var(--kurve); }
.nav__punkt.ist-offen .nav__pfeil{ transform:rotate(-90deg); }

.nav__unter{
  position:absolute; top:calc(100% + 10px); left:-6px; z-index:60;
  margin:0; padding:8px; list-style:none; min-width:248px;
  background:var(--paper); border:1px solid var(--linie);
  border-radius:var(--r-m); box-shadow:var(--schatten-m);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity var(--zeit-s) ease, transform var(--zeit-s) var(--kurve), visibility 0s linear var(--zeit-s);
}
.nav__punkt.ist-offen .nav__unter{
  opacity:1; visibility:visible; transform:none; transition-delay:0s;
}
/* Ohne JavaScript bleibt das Untermenü über die Tastatur erreichbar.
   Mit JavaScript steuert allein das Skript – sonst hielte der Fokus
   auf dem Schalter das Menü nach Escape offen. */
html:not(.js) .nav__punkt:focus-within .nav__unter{ opacity:1; visibility:visible; transform:none; transition-delay:0s; }
.nav__unter a{
  display:flex; align-items:center; padding:9px 12px; font-size:14.5px; color:var(--ink-2);
  text-decoration:none; border-radius:var(--r-s); min-height:44px;
  transition:background var(--zeit-s), color var(--zeit-s);
}
.nav__unter a:hover{ background:var(--paper-2); color:var(--ink); }

/* Rechter Rand: Das letzte Untermenü darf nicht aus dem Bild laufen. */
.nav__punkt:last-child .nav__unter{ left:auto; right:-6px; }

@media(prefers-reduced-motion:reduce){
  .nav__unter, .nav__pfeil{ transition:none; }
}

/* Die Regeln für schmale Schirme stehen bewusst HINTER der
   Grunddefinition: sie müssen position, Breite und Sichtbarkeit des
   Untermenüs überschreiben. Standen sie davor, blieb das Untermenü
   absolut positioniert und legte sich als Karte über die übrigen
   Menüpunkte. Siehe Abschnitt 14. */
@media(max-width:1039px){
  .hdr, .hdr__innen{ flex-wrap:wrap; row-gap:14px; }

  /* Ohne Skript: alles offen und im Fluss, nichts zum Aufklappen. */
  html:not(.js) .nav{
    display:flex; flex-direction:column; align-items:stretch;
    order:3; width:100%; gap:0;
    padding-top:10px; margin-top:4px; border-top:1px solid var(--linie);
  }
  html:not(.js) .nav__unter{ display:block; }

  .js .nav-schalter{
    display:inline-flex; align-items:center; justify-content:center;
    width:44px; height:44px; padding:0;
    background:transparent; border:1px solid var(--linie); border-radius:100px;
    color:var(--ink); cursor:pointer;
  }
  .js .nav-schalter .ic{ width:22px; height:22px; }
  .js .nav-schalter__zu{ display:none; }
  .js .nav-schalter[aria-expanded="true"] .nav-schalter__auf{ display:none; }
  .js .nav-schalter[aria-expanded="true"] .nav-schalter__zu{ display:block; }

  .js .nav{ display:none; }
  .js .nav.ist-offen{
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    order:3; width:100%;
    padding-top:10px; margin-top:4px; border-top:1px solid var(--linie);
  }

  /* Ein Menüpunkt füllt die Zeile: Hauptlink links, Schalter rechts. */
  .nav__punkt{ flex-wrap:wrap; justify-content:space-between; width:100%; }
  .nav__punkt + .nav__punkt{ border-top:1px solid var(--linie); }
  .nav__haupt{ flex:1 1 auto; padding:13px 2px; font-size:16px; }
  .nav__haupt::after{ display:none; }
  .nav__haupt.ist-aktiv::after{ display:none; }
  .nav__schalter{ margin-left:0; flex:none; }
  .nav__pfeil{ transform:rotate(90deg); }
  .nav__punkt.ist-offen .nav__pfeil{ transform:rotate(-90deg); }

  /* Im Textfluss statt als schwebendes Feld – sonst läuft das
     248 px breite Feld am rechten Bildrand hinaus. */
  .nav__unter{
    position:static; width:100%; min-width:0; flex-basis:100%;
    margin:0 0 8px; padding:2px 0 4px 14px;
    background:none; border:0; border-left:2px solid var(--linie);
    border-radius:0; box-shadow:none;
    opacity:1; visibility:visible; transform:none; transition:none;
    display:none;
  }
  .nav__punkt.ist-offen .nav__unter{ display:block; }
  .nav__unter a{ padding:11px 6px; font-size:15px; }

  /* Solange das Menü offen ist, bekommt der Header seinen Hintergrund,
     damit die Punkte nicht auf dem Inhalt liegen. */
  /* Deckend, nicht fast deckend: bei .97 schimmerte die H1 des Heros
     zwischen den Menuepunkten durch. */
  .js.nav-offen .hdr{
    background:var(--paper);
    box-shadow:0 1px 0 var(--linie);
  }
}

/* ---------- Footer im neuen Designsystem ---------- */
.ft{ padding-block:clamp(48px,5vw,80px) clamp(80px,7vw,120px); border-top:1px solid var(--linie); }

/* Themenpfad – drei echte Wege statt eines Logostreifens */
.ftpfad{
  display:grid; gap:14px; grid-template-columns:1fr;
  margin-bottom:clamp(40px,4vw,64px);
}
@media(min-width:760px){ .ftpfad{ grid-template-columns:repeat(3,1fr); gap:18px; } }
.ftpfad__station{
  display:block; padding:22px 24px; text-decoration:none;
  border:1px solid var(--linie); border-radius:var(--r-m);
  background:var(--paper); transition:border-color var(--zeit-s), transform var(--zeit-s) var(--kurve);
}
.ftpfad__station:hover{ border-color:var(--ink); transform:translateY(-2px); }
.ftpfad__nr{
  display:block; font-size:11px; font-weight:700; letter-spacing:.14em;
  color:var(--accent); margin-bottom:8px;
}
.ftpfad__name{
  display:block; font-size:clamp(1.15rem,1rem+.5vw,1.4rem); font-weight:800;
  letter-spacing:-.02em; color:var(--ink); margin-bottom:6px;
}
.ftpfad__text{ display:block; font-size:14px; line-height:1.5; color:var(--ink-2); }

/* Abschlusszeile: bricht auf schmalen Schirmen sauber um, nie
   waagerecht scrollend. Die Trenner verschwinden dort. */
.ft__zeile{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px;
  margin-top:clamp(32px,3vw,48px); padding-top:22px;
  border-top:1px solid var(--linie);
  font-size:14px; color:var(--ink-2);
}
.ft__zeile a{ color:var(--ink-2); text-decoration:none; text-underline-offset:3px; }
.ft__zeile a:hover{ color:var(--accent); text-decoration:underline; }
.ft__copy{ font-weight:600; color:var(--ink); }
.ft__trenn{ color:var(--ink-3); }
.ft__sitz{ margin:10px 0 0; font-size:13px; color:var(--ink-3); }
@media(max-width:560px){
  /* Zwei saubere Zeilen statt einer gedrängten Reihe */
  .ft__zeile{ gap:4px 12px; }
  .ft__trenn{ display:none; }
  .ft__copy{ flex-basis:100%; margin-bottom:4px; }
}

/* ============================================================
   29. Redesign: übrige Komponenten auf die neue Formensprache

   Klare Flächen mit eigenem Rand und Radius statt durchgehender
   Rasterlinien; kräftige Abschlussflächen; Karten, die als Objekte
   lesbar sind. Alles über die zentralen Tokens, keine Sonderwerte.
   ============================================================ */

/* ---------- Projekt- und Beitragskarten ---------- */
.raster{ gap:clamp(18px,2vw,28px) !important; border:0 !important; }
.raster > *{ border:0 !important; }
.karte{
  background:var(--paper); padding:0 0 26px;
  border:1px solid var(--linie); border-radius:var(--r-m); overflow:hidden;
  transition:border-color var(--zeit-m), transform var(--zeit-m) var(--kurve),
             box-shadow var(--zeit-m);
}
a.karte:hover{
  background:var(--paper); border-color:var(--ink);
  transform:translateY(-3px); box-shadow:var(--schatten-m);
}
.karte__bild{ border-radius:0; overflow:hidden; }
.karte__inhalt{ padding-inline:clamp(20px,2vw,26px); }
.karte h3{ font-size:clamp(1.15rem,1rem+.5vw,1.45rem); }
.karte__label{
  font-family:var(--sans); font-size:11px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent);
}
.karte__fuss{ color:var(--ink-3); }
.karte--offline{ background:var(--paper-2); }

/* ---------- Leistungskarten ---------- */
.cards{ gap:clamp(18px,2vw,28px) !important; border:0 !important; }
.cards > *{ border:0 !important; }
.card{
  background:var(--paper); border:1px solid var(--linie); border-radius:var(--r-m);
  padding:clamp(26px,2.4vw,34px);
  transition:border-color var(--zeit-m), transform var(--zeit-m) var(--kurve), box-shadow var(--zeit-m);
}
.card:hover{
  background:var(--paper); border-color:var(--ink);
  transform:translateY(-3px); box-shadow:var(--schatten-m);
}
.card .ic{ font-size:32px; margin-bottom:18px; }
.card__no{
  font-family:var(--sans); font-weight:700; letter-spacing:.12em;
  color:var(--ink-3); font-size:11px;
}

/* ---------- Ratgeber-Cluster ---------- */
.cluster__liste{ gap:clamp(18px,2vw,28px) !important; border:0 !important; }
.cluster__eintrag{
  border:1px solid var(--linie) !important; border-radius:var(--r-m);
  padding:0 0 24px; overflow:hidden;
  transition:border-color var(--zeit-m), transform var(--zeit-m) var(--kurve), box-shadow var(--zeit-m);
}
.cluster__eintrag:hover{
  border-color:var(--ink) !important; transform:translateY(-3px); box-shadow:var(--schatten-m);
}
.cluster__eintrag > :not(.cluster__bild){ padding-inline:clamp(20px,2vw,26px); }
.cluster__bild{ border-radius:0; }
.cluster__kopf h2{ letter-spacing:-.025em; }

/* ---------- Abschlussflächen: kräftig statt grau ---------- */
.abschluss{
  background:var(--ink); color:var(--paper);
  border:0; border-radius:var(--r-m);
  padding:clamp(30px,3vw,46px) clamp(24px,3vw,44px);
}
.abschluss h2{ color:var(--paper); font-size:clamp(1.45rem,1.1rem+1.1vw,2.1rem); margin-bottom:10px; }
.abschluss p{ color:rgba(255,255,255,.72); }

/* ---------- Ablaufschritte ---------- */
.step{
  background:var(--paper); border:1px solid var(--linie); border-radius:var(--r-m);
  padding:clamp(24px,2.4vw,32px) !important; margin-bottom:16px;
  min-height:0 !important;
}
.step__n{ font-family:var(--sans); font-weight:700; letter-spacing:.12em; color:var(--accent); }
.step h3{ font-size:clamp(1.15rem,1rem+.5vw,1.5rem); }

/* ---------- Marken und Legenden ---------- */
.marke{
  font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.06em;
  border-color:var(--linie); color:var(--ink-2); padding:6px 12px;
}
.marke--neu{ border-color:var(--accent); color:var(--accent); }
.filter__lbl, .kicker{
  font-family:var(--sans); font-weight:700; letter-spacing:.13em; font-size:11.5px;
}

/* ---------- Pillar-Block ---------- */
.pillar{ border-radius:var(--r-m); overflow:hidden; }

/* ---------- Rechts- und Artikeltexte ---------- */
.legal h2, .artikel h2{ letter-spacing:-.025em; }
.artikel__nav{ border:1px solid var(--linie); border-radius:var(--r-m); }
.hinweis{ border-radius:var(--r-m); }

/* Motiv als Kartenbild: gleiche Fläche wie zuvor das Rasterbild,
   damit beim Laden nichts springt. */
.cluster__bild--motiv{
  background:var(--paper-2); border-bottom:1px solid var(--linie);
  padding:14px 16px;
}
/* 16/7 – vorher stand hier faktisch wieder 16/10. */
.cluster__bild--motiv .motiv__svg{ aspect-ratio:480/210; }
.cluster__bild--motiv .m-karte text{ font-size:13px; }
.cluster__bild--motiv .m-text{ font-size:12px; }
.cluster__bild--motiv .m-browser__url{ font-size:9.5px; }

/* ---------- Bedienflächen: mindestens 44 × 44 CSS-Pixel ----------
   Zwei Stellen lagen darunter. Beide bleiben optisch gleich groß; der
   anklickbare Bereich wächst über eine unsichtbare Fläche. */
.hdr .btn--wa{ min-width:44px; min-height:44px; }
@media(max-width:560px){
  /* Nur-Symbol-Zustand im Kopfbereich */
  .hdr .btn--wa{ padding:12px; }
}

/* ============================================================
   30. Verdichtung: Ablauf, Leistungen, Pfad, Abschluss, Footer
   ============================================================ */

/* ---------- Ablauf: vier Schritte nebeneinander ---------- */
.ablauf__kopf{
  display:grid; gap:20px; align-items:start;
  margin-bottom:clamp(36px,4vw,56px);
}
@media(min-width:900px){
  .ablauf__kopf{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); column-gap:clamp(32px,4vw,72px); }
}
.ablauf__kopf h2{ margin-top:4px; }
.ablauf__intro{
  margin:0; color:var(--ink-2); font-size:clamp(1rem,.95rem+.25vw,1.15rem);
  line-height:1.55; max-width:50ch; align-self:end;
}
.ablauf__reihe{
  list-style:none; margin:0; padding:0;
  display:grid; gap:clamp(16px,1.8vw,24px); grid-template-columns:1fr;
}
@media(min-width:700px){ .ablauf__reihe{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1100px){ .ablauf__reihe{ grid-template-columns:repeat(4,1fr); } }
.ablauf__schritt{
  border:1px solid var(--linie); border-radius:var(--r-m);
  padding:clamp(22px,2vw,28px); background:var(--paper);
  display:flex; flex-direction:column;
  transition:border-color var(--zeit-m), box-shadow var(--zeit-m);
}
/* Die Fortschrittsmarkierung läuft einmal durch und verlängert den
   Abschnitt nicht – sie färbt nur die Nummer. */
.ablauf__schritt.ist-da{ border-color:var(--ink); box-shadow:var(--schatten-s); }
.ablauf__nr{
  display:block; font-size:12px; font-weight:700; letter-spacing:.14em;
  color:var(--ink-3); margin-bottom:10px;
  transition:color var(--zeit-m);
}
.ablauf__schritt.ist-da .ablauf__nr{ color:var(--accent); }
.ablauf__schritt h3{ font-size:clamp(1.1rem,1rem+.4vw,1.35rem); margin:0 0 10px; }
.ablauf__schritt p{ margin:0 0 16px; font-size:14.5px; line-height:1.55; color:var(--ink-2); }
.ablauf__schritt ul{
  margin:auto 0 0; padding:0; list-style:none;
  display:flex; flex-wrap:wrap; gap:6px;
}
.ablauf__schritt li{
  font-size:11px; font-weight:600; letter-spacing:.05em;
  border:1px solid var(--linie); border-radius:100px; padding:5px 10px; color:var(--ink-3);
}

/* Abschlussleiste innerhalb einer Sektion – waagerecht, im Fluss,
   nicht als graue Extrafläche. */
.leiste{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:16px 28px; margin-top:clamp(28px,3vw,42px); padding-top:24px;
  border-top:1px solid var(--linie);
}
.leiste p{ margin:0; color:var(--ink-2); font-size:15px; max-width:52ch; }

@media(prefers-reduced-motion:reduce){
  .ablauf__schritt, .ablauf__nr{ transition:none; }
}

/* ---------- Abschnittsköpfe: ausgewogene Zweispaltigkeit ----------
   Vorher stand links eine kleine Überschrift und rechts ein breiter
   Textblock; dazwischen und darunter blieb viel Höhe ungenutzt. */
.split{
  display:grid; gap:20px; align-items:start;
  margin-bottom:clamp(36px,4vw,56px);
}
@media(min-width:900px){
  .split{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); column-gap:clamp(32px,4vw,72px); }
}
.split > div:first-child h2{ margin-top:6px; }
.split .lead{
  max-width:48ch; font-size:clamp(1rem,.95rem+.3vw,1.18rem); line-height:1.55;
}
.split__note{ margin-top:14px; font-size:15px; line-height:1.55; color:var(--ink-2); max-width:50ch; }

/* Abstand zwischen Kopf und folgendem Raster vereinheitlichen */
.cards, .raster, .cluster__liste, .ablauf__reihe{ margin-top:0 !important; }

/* ---------- Leistungskarten gleich hoch ---------- */
.card{ display:flex; flex-direction:column; }
.card p{ margin-bottom:14px; }
.card > p:last-child{ margin-top:auto !important; margin-bottom:0; }

/* ---------- Über uns: beide Spalten ausgewogen ---------- */
#ueber .split > div:first-child{ align-self:stretch; display:flex; flex-direction:column; }
#ueber .split h2{ margin-bottom:18px; }
.ueber__belege{
  list-style:none; margin:0 0 22px; padding:0;
  display:grid; gap:10px;
}
.ueber__belege li{
  position:relative; padding-left:22px; font-size:15px; line-height:1.5; color:var(--ink-2);
}
.ueber__belege li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:8px; height:8px; border-radius:50%; background:var(--accent);
}

/* ---------- Abschluss-CTA kompakter ---------- */
.cta__p{ margin-top:18px; }
.cta__actions{ margin-top:28px; }

/* ---------- Footer kompakter ---------- */
.ft{ padding-block:clamp(40px,4vw,64px) clamp(64px,5vw,88px); }
.ftpfad{ margin-bottom:clamp(30px,3vw,44px); }
.ftpfad__station{ padding:18px 20px; }
.ft__top{ gap:26px; }
@media(min-width:820px){ .ft__top{ gap:34px; } }
.ft__zeile{ margin-top:clamp(24px,2.4vw,34px); padding-top:18px; }

/* ---------- Dunkler Leistungsweg kompakter ---------- */
.pfad{ padding-block:clamp(36px,4vw,52px); }
.pfad__titel{ margin-bottom:clamp(20px,2.2vw,28px); }
.pfad__reihe{ gap:clamp(18px,2vw,26px); }
.pfad__station{ padding-top:20px; }
.pfad__station p{ font-size:14px; }
.pfad__fuss{ margin-top:clamp(20px,2.2vw,30px); }
@media(min-width:520px) and (max-width:759px){
  /* Statt vier langer Einzelblöcke ein 2×2-Raster */
  .pfad__reihe{ grid-template-columns:repeat(2,1fr); }
}

/* ---------- Ratgeberkarten: Grafik nutzt die Fläche ----------
   Vorher schwebte das Diagramm klein in einer großen beigen Fläche.
   Jetzt flacher zugeschnitten, weniger Innenabstand, Beschriftungen
   etwas größer – die Aussage füllt den Raum. */
.cluster__bild--motiv{ padding:10px 14px; }
.cluster__bild--motiv .m-karte text{ font-size:14px; }
.cluster__bild--motiv .m-text{ font-size:13px; }
.cluster__bild--motiv .m-browser__url{ font-size:10.5px; }
.cluster__eintrag{ padding-bottom:20px; }
.cluster__eintrag h3{ margin-top:4px; }
.cluster__eintrag p{ font-size:14.5px; line-height:1.5; margin:8px 0 0; }
.cluster__eintrag .karte__fuss{ margin-top:14px; }

/* ---------- Über uns: linke Spalte trägt Inhalt ---------- */
#ueber .split{ align-items:start; }
.bestand__liste li{ padding:7px 0; }
.bestand__titel{ margin-bottom:9px; }
.bestand{ margin-top:22px; }

/* Auf der Startseite steht ein Teaser mit drei Beiträgen in einer
   Reihe – die vollständige Liste trägt die Ratgeberübersicht. */
@media(min-width:1000px){
  #ratgeber-teaser .cluster__liste{ grid-template-columns:repeat(3,1fr); }
}

/* ---------- Letzte Verdichtung nach Messung ---------- */
/* Leistungen: Kopf und Karten enger, Abschlussleiste im Fluss */
#leistung .split{ margin-bottom:clamp(30px,3.2vw,44px); }
#leistung .card{ padding:clamp(22px,2vw,28px); }
#leistung .card .ic{ font-size:28px; margin-bottom:14px; }
#leistung .card p{ font-size:14.5px; line-height:1.55; }

/* Über uns: beide Spalten tragen Inhalt, Abstände dichter */
#ueber .split{ margin-bottom:0; }
#ueber .lead{ font-size:clamp(1rem,.95rem+.3vw,1.15rem); }
#ueber .split__note{ margin-top:12px; }

/* Footer: Themenpfad und Spalten enger */
.ft{ padding-block:clamp(34px,3.4vw,52px) clamp(56px,4.5vw,76px); }
.ftpfad{ margin-bottom:clamp(24px,2.4vw,34px); }
.ftpfad__station{ padding:16px 18px; }
.ftpfad__text{ font-size:13.5px; line-height:1.45; }
.ft__top{ gap:22px; }
@media(min-width:820px){ .ft__top{ gap:28px; } }
.ft ul{ gap:8px; font-size:14.5px; }
.ft__claim{ font-size:clamp(1.2rem,1rem+.8vw,1.7rem); }
.ft__zeile{ margin-top:clamp(20px,2vw,28px); padding-top:16px; }

/* Dunkler Leistungsweg: letzte Feinjustierung auf die Zielhöhe */
.pfad{ padding-block:clamp(32px,3.4vw,46px); }
.pfad__station p{ line-height:1.5; }

/* Abschluss-CTA */
.cta__actions{ margin-top:24px; }
.cta__p{ margin-top:16px; }

/* ---------- Hero-Variante für Ratgeberbeiträge ----------
   Zwischen der großen Startseiten- und der sachlichen Rechtsfassung:
   Die Überschrift trägt den Beitrag, bleibt aber unter der Wucht der
   Startseite. Rechtsseiten behalten bewusst die kompakte Stufe, damit
   die Pflichttexte schnell erreichbar sind. */
.hero--artikel .hero__raster{ grid-template-columns:minmax(0,1fr); }
@media(min-width:1000px){
  .hero--artikel .hero__raster{ grid-template-columns:minmax(0,1.55fr) auto; }
}
.hero--artikel .hero__h1{
  font-size:clamp(1.9rem, 1.1rem + 2.1vw, 3.6rem);
  line-height:1.02; max-width:17ch;
}
.hero--artikel .geraet{ --geraet-h: clamp(330px, 56svh, 500px); }
@media(max-width:999px){
  .hero--artikel .geraet{ --geraet-h: clamp(285px, 36svh, 340px); }
}

/* ---------- Projektkarten der Startseite mit echtem Screenshot ----------
   Kompakte Mini-Browseransicht: zeigt echte Arbeit, ohne dass die
   Karte zur reinen Bildfläche wird. */
.proj{ display:flex; flex-direction:column; overflow:hidden; }
.proj__bild{
  position:relative; margin:-1px -1px 18px; background:var(--paper-2);
  border-bottom:1px solid var(--linie); overflow:hidden;
}
.proj__leiste{
  display:flex; align-items:center; gap:5px;
  padding:8px 12px; border-bottom:1px solid var(--linie); background:var(--paper);
}
.proj__leiste i{ width:6px; height:6px; border-radius:50%; background:var(--paper-3); flex:none; }
.proj__leiste em{
  font-style:normal; font-size:10.5px; font-weight:600; color:var(--ink-3);
  margin-left:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.proj__bild img{
  width:100%; height:clamp(150px,17vw,210px); object-fit:cover; object-position:top center;
  display:block;
}
.proj__top{ padding-inline:clamp(18px,1.8vw,24px); }
.proj h3, .proj p, .proj__tags{ padding-inline:clamp(18px,1.8vw,24px); }
.proj__tags{ margin-top:auto; }

/* Projektkarten: Bild flacher, Text dichter – der Abschnitt soll die
   Arbeit zeigen, nicht zur Bildergalerie werden. */
.proj__bild img{ height:clamp(130px,13vw,168px); }
.proj__bild{ margin-bottom:14px; }
.proj h3{ font-size:clamp(1.1rem,1rem+.4vw,1.35rem); margin-bottom:8px; }
.proj p{ font-size:14.5px; line-height:1.5; margin:0 0 14px; }
.proj__tags{ margin-top:auto; padding-bottom:18px; }
.proj__top{ padding-top:2px; }

/* Letzte Verdichtung der Projektkarten: 2×2 bleibt, aber der
   Screenshot ist ein Beleg, keine Bühne. */
.proj__bild img{ height:clamp(118px,11.5vw,150px); }
.proj__bild{ margin-bottom:12px; }
.proj__leiste{ padding:6px 12px; }
.proj p{ margin-bottom:12px; }
.proj__tags{ padding-bottom:16px; }
#projekte .split{ margin-bottom:clamp(26px,2.8vw,38px); }
.more{ margin-top:clamp(20px,2.2vw,30px); }

/* ------------------------------------------------------------------
   Cluster mit nur einem Beitrag (Nischenwahl, Recht & Pflichten)
   ließen im zweispaltigen Raster die halbe Zeile leer stehen. Die
   einzelne Karte nimmt die volle Breite und stellt das Motiv neben
   den Text. Die Motivfläche verliert dabei ihr festes Seitenverhältnis
   und füllt die Kartenhöhe; das Motiv selbst behält seine Form und
   steht mittig darin.
   ------------------------------------------------------------------ */
@media(min-width:760px){
  .cluster__liste > .cluster__eintrag:only-child{
    grid-column:1 / -1;
    display:grid;
    grid-template-columns:minmax(0, .88fr) minmax(0, 1.12fr);
    grid-template-rows:1fr auto auto auto auto 1fr;
    column-gap:clamp(22px, 2.4vw, 36px);
    padding:clamp(22px, 2.4vw, 30px) 0;
  }
  .cluster__liste > .cluster__eintrag:only-child .cluster__bild{
    grid-column:1; grid-row:1 / -1;
    aspect-ratio:auto; align-self:stretch;
    display:grid; align-content:center;
    margin:clamp(-22px, -2.4vw, -30px) 0;
    border-bottom:0; border-right:1px solid var(--linie);
  }
  /* Der Text steht mittig neben dem Motiv: je eine dehnbare Zeile
     ober- und unterhalb der vier festen Textzeilen. */
  .cluster__liste > .cluster__eintrag:only-child > :not(.cluster__bild){
    grid-column:2;
  }
  .cluster__liste > .cluster__eintrag:only-child .karte__oben{ grid-row:2; }
  .cluster__liste > .cluster__eintrag:only-child > h3{ grid-row:3; }
  .cluster__liste > .cluster__eintrag:only-child > p{ grid-row:4; }
  .cluster__liste > .cluster__eintrag:only-child .karte__fuss{ grid-row:5; }
  .cluster__liste > .cluster__eintrag:only-child .karte__fuss{
    margin-bottom:0;
  }
}