/* =========================================================================
   DACHDECKEREI HARBECK : Design-System der Musterseite 4
   Rein statische Seite, kein Framework, keine fremden Hosts.

   CORPORATE DESIGN WECHSELN: nur den :root-Block anfassen.
   Alles Weitere leitet sich daraus ab.

   Farbregel: ein dunkler Anker (Schiefer) und GENAU EINE Signalfarbe
   (Kupfer). Kupfer steht ausschliesslich auf dem Hauptaufruf, also auf den
   Knoepfen zum Dach-Check und auf der aktiven Rechnermarkierung, und
   erscheint je Seite hoechstens zwoelf Mal. Nie als Flaeche hinter Text,
   nie in Symbolen, nie im Fuss, nie als Textfarbe auf Hell.
   Die Karrierespur hat ihre eigene Farbe (Gruen) und sonst nichts.

   Der Bauplan nannte #C2703D. Weisse Schrift darauf erreicht 3,7:1, das
   reicht fuer 17-px-Knoepfe nicht. #B05E2D erreicht 4,7:1 und ist immer
   noch Kupfer, deshalb steht es hier.

   Formregel: Knoepfe und Eingabefelder 4 px, Karten und Bilder 8 px,
   einzig Statuspille, Schrittnummern und Avatar sind rund. Keine Ausnahmen.

   Schriftregel: Instrument Sans traegt Ueberschriften, Kennzahlen, Preise,
   Knoepfe und die grosse Rufnummer. Source Sans 3 alles andere. Keine
   Versalien auf Knoepfen, kein Serif.

   Markenregel: die Seite hat genau drei eigene Zeichen. Die Giebelmarke
   (marke() in bausteine.py), die Firstlinie, ein 3-px-Strich in Kupfer ueber
   jeder Abschnittsueberschrift, und das Deckungsmuster, zwei versetzte Reihen
   Schuppen, das an drei Stellen leise hinter einem Abschnitt liegt und nach
   unten ausblendet. Mehr nicht, sonst wird aus einer Handschrift eine Tapete.

   Firstlinie und die kleinen Kupferstriche sind IMMER Pseudoelemente. Die
   Abnahme zaehlt Kupfer ueber die Hintergrundfarbe echter Elemente
   (Regel 10, hoechstens zwoelf je Seite); ein ::before taucht dort nicht auf
   und das Budget bleibt den Aufrufknoepfen.

   Massstab (gemessen an 38 Seiten, Bauplan Teil 6):
   H1 56 px Rechner / 36 px Handy (Verhaeltnis 0,64), Fliesstext 17 px bei
   Zeilenhoehe 1,6 auf allen Groessen, Zeilenlaenge hoechstens 68 Zeichen,
   Inhaltsbreite 1200 px.
   ========================================================================= */

:root{
  /* --- Flaechen ------------------------------------------------------- */
  --grund:#FFFFFF;          /* Standardflaeche                              */
  --grund-warm:#F6F3F0;     /* jeder zweite Abschnitt, Trennung ohne Linie  */
  --linie:#E2DCD6;          /* Rahmen, Trenner, Tabellenzeilen              */
  --anker:#16202B;          /* Ueberschriften, Fuss, Band, Knoepfe zweiter Ordnung */
  --anker-2:#233242;        /* Karten auf dunklem Grund                     */
  --anker-3:#2F4052;        /* Rahmen auf dunklem Grund                     */

  /* --- Signal, nur der Hauptaufruf ------------------------------------ */
  --signal:#B05E2D;
  --signal-hover:#964E22;
  --auf-signal:#FFFFFF;     /* 4,7:1 auf der Signalfarbe                    */

  /* --- Karriere, nur die Karrierespur --------------------------------- */
  --karriere:#2E6E5B;       /* 6,0:1 mit Weiss                              */
  --karriere-hover:#245A4A;
  --karriere-hell:#E9F1ED;

  /* --- Text ----------------------------------------------------------- */
  --text:#1B242E;           /* 15,6:1 auf Weiss                             */
  --text-leise:#5C6873;     /* 5,7:1 auf Weiss, 5,2:1 auf grund-warm        */
  --text-hell:#FFFFFF;
  --text-hell-leise:rgba(255,255,255,.76);
  --linie-hell:rgba(255,255,255,.14);
  --status-gut:#0B7A4B;     /* ausschliesslich "Jetzt erreichbar"           */
  --fehler:#9B2C2C;

  /* --- Schrift -------------------------------------------------------- */
  --s-kopf:"Instrument Sans","Helvetica Neue",Arial,sans-serif;
  --s-text:"Source Sans 3","Source Sans Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  /* Die Zwischenwerte sind Geraden durch 390 und 1440 px Fensterbreite. */
  --fs-h1:clamp(36px,28.57px + 1.905vw,56px);
  --fs-h2:clamp(27px,22.91px + 1.048vw,38px);
  --fs-h3:clamp(21px,19.89px + .286vw,24px);
  --fs-lead:clamp(19px,18.26px + .19vw,21px);
  --fs-text:17px;
  --fs-klein:15px;
  --fs-etikett:13px;
  --fs-zahl:clamp(40px,34.06px + 1.524vw,56px);
  --fs-preis:clamp(26px,23.77px + .571vw,32px);

  /* --- Form ----------------------------------------------------------- */
  --r-knopf:4px;
  --r-feld:4px;
  --r-karte:8px;

  /* --- Raster und Abstaende ------------------------------------------- */
  --max:1200px;
  --max-eng:800px;
  --rand:clamp(24px,4vw,40px);
  --sek-y:clamp(56px,7vw,104px);
  --nav-h:72px;
  --leiste-h:68px;

  /* --- Schatten, in den Anker getoent, nie reines Schwarz -------------- */
  --schatten-s:0 1px 2px rgba(22,32,43,.06),0 2px 10px rgba(22,32,43,.06);
  --schatten-m:0 2px 4px rgba(22,32,43,.05),0 14px 34px rgba(22,32,43,.12);

  --uebergang:.26s cubic-bezier(.16,1,.3,1);

  /* --- Deckungsmuster, zwei Fassungen fuer hellen und dunklen Grund ---- */
  --muster-hell:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cg fill='none' stroke='%2316202B' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M0 20 Q10 7 20 20 Q30 7 40 20'/%3E%3Cpath d='M-10 10 Q0 -3 10 10 Q20 -3 30 10 Q40 -3 50 10'/%3E%3C/g%3E%3C/svg%3E");
  --muster-dunkel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cg fill='none' stroke='%23FFFFFF' stroke-width='1.3' stroke-linecap='round'%3E%3Cpath d='M0 20 Q10 7 20 20 Q30 7 40 20'/%3E%3Cpath d='M-10 10 Q0 -3 10 10 Q20 -3 30 10 Q40 -3 50 10'/%3E%3C/g%3E%3C/svg%3E");

  color-scheme:light;
}

/* --- Schriften, selbst gehostet, beide als Variable Font mit einer Datei
       je Zeichenbereich. --- */
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("/assets/schriften/instrument-sans-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("/assets/schriften/instrument-sans-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:200 900;font-display:swap;
  src:url("/assets/schriften/source-sans-3-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:200 900;font-display:swap;
  src:url("/assets/schriften/source-sans-3-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* =========================================================================
   Grundlagen
   ========================================================================= */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  font-family:var(--s-text);
  font-size:var(--fs-text);
  line-height:1.6;
  color:var(--text);
  background:var(--grund);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4{
  margin:0;
  font-family:var(--s-kopf);
  color:var(--anker);
  text-wrap:balance;
}
h1{font-size:var(--fs-h1);font-weight:700;line-height:1.05;letter-spacing:-.025em}
h2{font-size:var(--fs-h2);font-weight:700;line-height:1.15;letter-spacing:-.02em}
h3{font-size:var(--fs-h3);font-weight:600;line-height:1.25;letter-spacing:-.01em}
h4{font-size:18px;font-weight:600;line-height:1.3}
p{margin:0 0 1em;text-wrap:pretty}
p:last-child{margin-bottom:0}
a{color:var(--anker);text-decoration-thickness:1px;text-underline-offset:3px}
img{max-width:100%;height:auto;display:block}
ul,ol{margin:0 0 1em;padding-left:1.15em}
strong{font-weight:600}
small{font-size:var(--fs-klein)}
svg{flex:none}
:focus-visible{outline:3px solid var(--anker);outline-offset:3px;border-radius:4px}
.dd-band :focus-visible,.dd-fuss :focus-visible,.dd-schub :focus-visible,
.dd-leiste :focus-visible,.dd-nebenkarte-dunkel :focus-visible,.dd-ergebnis :focus-visible,
.dd-paket-plus :focus-visible{outline-color:#fff}
.dd-nav.ist-fest :focus-visible{outline-color:var(--anker)}

.dd-nur-vorleser{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.dd-sprung{position:absolute;left:-999px;top:8px;z-index:100;background:var(--anker);color:#fff;padding:10px 16px;border-radius:var(--r-knopf);text-decoration:none;font-weight:600}
.dd-sprung:focus{left:8px}

.dd-bahn{max-width:var(--max);margin:0 auto;padding:0 var(--rand)}
.dd-bahn-eng{max-width:var(--max-eng);margin:0 auto;padding:0 var(--rand)}
.dd-sek{padding:var(--sek-y) 0}
.dd-sek-warm{background:var(--grund-warm)}
.dd-sek-knapp{padding:clamp(36px,4.5vw,64px) 0}
.dd-sek-oben-weg{padding-top:0}

/* --- Sektionskopf ------------------------------------------------------ */
/* Die Firstlinie. Als Pseudoelement, siehe Markenregel oben. */
.dd-kopf{position:relative;max-width:740px;padding-top:24px;margin-bottom:clamp(28px,4vw,46px)}
.dd-kopf::before{content:"";position:absolute;top:0;left:0;width:56px;height:3px;background:var(--signal)}
.dd-kopf-mitte{margin-left:auto;margin-right:auto;text-align:center}
.dd-kopf-mitte::before{left:50%;transform:translateX(-50%)}
.dd-band .dd-kopf .dd-lead{color:var(--text-hell-leise)}

/* Das Deckungsmuster. Blendet nach unten aus, damit es Flaeche bleibt und
   nicht Tapete wird. Die Kinder brauchen position, sonst liegen sie unter
   dem absolut gesetzten ::before. */
.dd-deckung{position:relative;overflow:hidden}
.dd-deckung::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:var(--muster-hell);background-size:40px 20px;opacity:.07;
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 60%);
  mask-image:linear-gradient(to bottom,#000,transparent 60%);
}
.dd-deckung > *{position:relative}
.dd-band.dd-deckung::before{background-image:var(--muster-dunkel);opacity:.17}
.dd-kopf h2,.dd-kopf h1{margin-bottom:14px}
.dd-lead{font-size:var(--fs-lead);line-height:1.5;color:var(--text-leise);max-width:64ch}
.dd-etikett{display:inline-block;margin-bottom:14px;font-family:var(--s-kopf);font-size:var(--fs-etikett);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-leise);line-height:1.2}
.dd-etikett-hell{color:var(--text-hell-leise)}
.dd-quelle{font-size:var(--fs-klein);color:var(--text-leise);line-height:1.45}
.dd-mailtext{font-weight:500;word-break:break-all}

/* =========================================================================
   Knoepfe und Links
   ========================================================================= */
.dd-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:12px 26px;border-radius:var(--r-knopf);
  font-family:var(--s-kopf);font-size:17px;font-weight:600;line-height:1.2;letter-spacing:-.005em;
  text-decoration:none;border:2px solid transparent;cursor:pointer;white-space:nowrap;
  transition:transform .15s ease,box-shadow var(--uebergang),background var(--uebergang),border-color var(--uebergang);
}
.dd-btn svg{width:20px;height:20px;transition:transform var(--uebergang)}
.dd-btn:hover svg{transform:translateX(3px)}
.dd-btn:active{transform:translateY(1px) scale(.985)}
.dd-btn-signal{background:var(--signal);color:var(--auf-signal);box-shadow:0 1px 0 rgba(22,32,43,.08),0 8px 20px rgba(176,94,45,.22)}
.dd-btn-signal:hover{background:var(--signal-hover);transform:translateY(-1px);box-shadow:0 12px 26px rgba(176,94,45,.30)}
.dd-btn-dunkel{background:var(--anker);color:#fff}
.dd-btn-dunkel:hover{background:var(--anker-2)}
.dd-btn-hell{background:transparent;color:#fff;border-color:rgba(255,255,255,.42)}
.dd-btn-hell:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.dd-btn-rand{background:transparent;color:var(--anker);border-color:var(--anker)}
.dd-btn-rand:hover{background:var(--anker);color:#fff}
.dd-btn-karriere{background:var(--karriere);color:#fff}
.dd-btn-karriere:hover{background:var(--karriere-hover);transform:translateY(-1px)}
.dd-btn-klein{min-height:48px;padding:11px 16px;font-size:16px}
.dd-btn-klein svg{width:18px;height:18px}

.dd-pfeil{display:inline-flex;align-items:center;gap:6px;font-family:var(--s-kopf);font-weight:600;font-size:16px;color:var(--anker);text-decoration:none;border-bottom:2px solid var(--linie);padding-bottom:2px;transition:border-color var(--uebergang)}
.dd-pfeil svg{width:18px;height:18px;transition:transform var(--uebergang)}
.dd-pfeil:hover{border-color:var(--anker)}
.dd-pfeil:hover svg{transform:translateX(3px)}
.dd-pfeil-hell{color:#fff;border-color:var(--linie-hell)}
.dd-pfeil-hell:hover{border-color:#fff}

.dd-tel{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:inherit;text-decoration:none;white-space:nowrap}
.dd-tel svg{width:20px;height:20px}

.dd-aktion{display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center}
.dd-aktion-fuss{margin-top:clamp(28px,4vw,40px)}
@media (max-width:600px){
  .dd-aktion .dd-btn:not(.dd-btn-klein){width:100%}
}

/* Der Zweitweg: Anrufen, gross, neben dem Hauptknopf */
.dd-hero-tel{display:inline-flex;flex-direction:column;color:var(--anker);text-decoration:none}
.dd-hero-tel strong{display:inline-flex;align-items:center;gap:8px;font:700 21px/1.15 var(--s-kopf);letter-spacing:-.01em;white-space:nowrap}
.dd-hero-tel strong svg{width:21px;height:21px}
.dd-hero-tel span{font-size:14px;color:var(--text-leise);margin-top:3px}
.dd-hero-tel-hell{color:#fff}
.dd-hero-tel-hell span{color:var(--text-hell-leise)}
.dd-hero-tel:hover strong{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}

/* =========================================================================
   Kopfleiste
   Ueber dem hellen Held ohne Grund, ab 24 px Scrollweg weiss mit Linie
   (Klasse ist-fest, gesetzt von seite.js).
   ========================================================================= */
.dd-nav{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--nav-h);color:var(--anker);transition:background var(--uebergang),box-shadow var(--uebergang)}
.dd-nav.ist-fest{background:rgba(255,255,255,.96);box-shadow:0 1px 0 var(--linie),0 8px 24px rgba(22,32,43,.08);-webkit-backdrop-filter:saturate(140%) blur(8px);backdrop-filter:saturate(140%) blur(8px)}
.dd-nav-innen{max-width:var(--max);margin:0 auto;padding:0 var(--rand);height:100%;display:flex;align-items:center;gap:24px}

.dd-logo{display:flex;align-items:center;gap:12px;color:inherit;text-decoration:none;flex:none}
/* Die Giebelmarke erbt die Textfarbe und braucht deshalb keine zweite
   Fassung fuer den Fuss oder die offene Schublade. */
.dd-logo-mark{display:block;flex:none;width:42px;height:42px;color:var(--anker)}
.dd-logo-mark svg{width:100%;height:100%}
.dd-logo-text{display:flex;flex-direction:column;line-height:1.05}
.dd-logo-text strong{font:700 21px/1 var(--s-kopf);letter-spacing:-.01em}
.dd-logo-text span{font-size:12.5px;color:var(--text-leise);margin-top:4px;letter-spacing:.01em}
.dd-fuss .dd-logo-mark{color:#fff}
.dd-fuss .dd-logo-text strong{color:#fff}
.dd-fuss .dd-logo-text span{color:var(--text-hell-leise)}

.dd-menue{display:flex;gap:2px;list-style:none;margin:0 0 0 auto;padding:0}
.dd-menue > li > a{display:block;padding:10px 12px;color:var(--anker);font-family:var(--s-kopf);font-size:16px;font-weight:500;text-decoration:none;border-radius:var(--r-knopf);white-space:nowrap;transition:background var(--uebergang)}
.dd-menue > li > a:hover{background:rgba(22,32,43,.06)}
.dd-menue > li > a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--anker)}
.dd-menue > li > a svg{width:16px;height:16px;vertical-align:-3px;margin-left:2px}

.dd-klapp{position:relative}
.dd-klapp-inhalt{position:absolute;top:calc(100% + 6px);left:0;min-width:340px;margin:0;padding:8px;list-style:none;background:#fff;color:var(--text);border:1px solid var(--linie);border-radius:var(--r-karte);box-shadow:var(--schatten-m);opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity var(--uebergang),transform var(--uebergang),visibility 0s linear .26s}
.dd-klapp:hover .dd-klapp-inhalt,.dd-klapp:focus-within .dd-klapp-inhalt{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.dd-klapp-inhalt a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-knopf);color:var(--text);text-decoration:none;font-size:16px;font-weight:500}
.dd-klapp-inhalt a:hover{background:var(--grund-warm)}
.dd-klapp-inhalt a svg{width:22px;height:22px;color:var(--anker)}
.dd-klapp-inhalt a small{display:block;color:var(--text-leise);font-size:14px;font-weight:400}
.dd-klapp-inhalt li:last-child a{margin-top:4px;border-top:1px solid var(--linie);border-radius:0;padding-top:14px;font-weight:600}

.dd-nav-rechts{display:flex;align-items:center;gap:18px;flex:none}
.dd-nav-tel{display:inline-flex;align-items:center;gap:8px;color:var(--anker);font-family:var(--s-kopf);font-weight:600;text-decoration:none;white-space:nowrap;font-size:16px}
.dd-nav-tel svg{width:20px;height:20px}

.dd-brenner{display:none;width:44px;height:44px;border-radius:var(--r-knopf);color:var(--anker);cursor:pointer;align-items:center;justify-content:center}
.dd-brenner svg{width:28px;height:28px}
.dd-brenner .dd-ico-zu{display:none}
/* Das versteckte Kaestchen braucht eigene Masse, sonst trifft es die
   globale input-Regel und wird seitenbreit (Musterseite 3, vier Pixel
   waagerechtes Scrollen). */
.dd-schub-schalter{position:absolute;top:0;left:0;width:1px;height:1px;min-height:0;margin:0;padding:0;opacity:0;pointer-events:none}

/* Schublade */
.dd-schub{position:fixed;inset:var(--nav-h) 0 0 0;z-index:45;background:var(--anker);color:#fff;padding:18px var(--rand) 40px;overflow-y:auto;transform:translateX(100%);visibility:hidden;transition:transform var(--uebergang),visibility 0s linear .26s}
.dd-schub ul{list-style:none;margin:0;padding:0}
.dd-schub > ul > li > a{display:block;padding:14px 0;font:600 24px/1.15 var(--s-kopf);letter-spacing:-.01em;color:#fff;text-decoration:none;border-bottom:1px solid var(--linie-hell)}
.dd-schub .dd-schub-unter a{display:block;padding:9px 0 9px 18px;color:var(--text-hell-leise);text-decoration:none;font-size:16px}
.dd-schub .dd-schub-unter:last-of-type a{padding-bottom:16px}
.dd-schub-fuss{display:grid;gap:12px;margin-top:26px}
.dd-schub-fuss .dd-btn{width:100%}
.dd-schub-schalter:checked ~ .dd-nav{background:var(--anker);color:#fff}
.dd-schub-schalter:checked ~ .dd-nav .dd-logo-mark{color:#fff}
.dd-schub-schalter:checked ~ .dd-nav .dd-logo-text span{color:var(--text-hell-leise)}
.dd-schub-schalter:checked ~ .dd-nav .dd-brenner{color:#fff}
.dd-schub-schalter:checked ~ .dd-schub{transform:none;visibility:visible;transition-delay:0s}
.dd-schub-schalter:checked ~ .dd-nav .dd-ico-auf{display:none}
.dd-schub-schalter:checked ~ .dd-nav .dd-ico-zu{display:block}

@media (max-width:1259px){
  .dd-nav-tel span{display:none}
}
@media (max-width:1023px){
  .dd-menue,.dd-nav-tel{display:none}
  .dd-brenner{display:inline-flex}
  .dd-nav-innen{gap:12px}
  .dd-nav-rechts{margin-left:auto;gap:8px}
}
@media (max-width:460px){
  .dd-nav-cta{display:none}
}

/* =========================================================================
   Held der Startseite
   Hell. Text links in der Bahn, Bild rechts bis an den Fensterrand. Das
   Raster hat vier Spalten: Rand, Text (640 bis 700), Bild (bis 500), Rand;
   die mittleren ergeben zusammen die 1200 der Bahn. So entsteht der Anschnitt
   ohne negative Raender und ohne 100vw, die am Rollbalken vorbeischiessen.
   Die Textspalte hat eine Mindestbreite, damit die H1 bis 1100 px herunter
   zweizeilig bleibt; darunter steht das Bild unter dem Text.
   ========================================================================= */
.dd-hero{background:var(--grund);color:var(--text);padding-top:var(--nav-h)}
.dd-hero-innen{
  display:grid;
  grid-template-columns:minmax(var(--rand),1fr) minmax(640px,700px) minmax(0,500px) minmax(var(--rand),1fr);
  column-gap:clamp(24px,4vw,56px);
  min-height:min(680px,calc(100svh - var(--nav-h)));
}
.dd-hero-text{grid-column:2;align-self:center;padding:clamp(36px,5vw,64px) 0 clamp(44px,6vw,80px)}
.dd-hero h1{margin:0 0 24px}
.dd-hero-bild{grid-column:3 / 5;position:relative;min-height:100%}
.dd-hero-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:var(--r-karte) 0 0 var(--r-karte)}

.dd-zusagen{display:flex;flex-wrap:wrap;gap:12px 32px;list-style:none;margin:0 0 32px;padding:0}
.dd-zusagen li{display:flex;align-items:center;gap:10px;font-weight:500;font-size:var(--fs-text);color:var(--text)}
.dd-zusagen svg{width:24px;height:24px;color:var(--anker)}

@media (max-width:1099px){
  .dd-hero-innen{grid-template-columns:1fr;min-height:0}
  .dd-hero-text{grid-column:1;padding:clamp(32px,6vw,52px) var(--rand) clamp(32px,6vw,44px)}
  .dd-hero h1{max-width:none}
  .dd-hero-bild{grid-column:1;min-height:0;aspect-ratio:16/10}
  .dd-hero-bild img{border-radius:0}
}
@media (max-width:600px){
  .dd-hero-text .dd-aktion{gap:18px}
  .dd-hero-text .dd-aktion .dd-btn{width:100%}
}

/* =========================================================================
   Das Antwortversprechen. Die staerkste Zahl der Seite wird zum Bild:
   zwei Deckungsraster nebeneinander, links die Branche mit 37 von hundert
   gedeckten Ziegeln, rechts der Betrieb mit allen hundert. Der Abschnitt
   steht auf Schiefer und ist damit die erste dunkle Flaeche der Seite,
   frueher kam die erste erst an elfter Stelle.
   ========================================================================= */
.dd-vergleich{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(30px,4vw,64px)}
/* Raster und Zahl stehen nebeneinander. Uebereinander war der Abschnitt
   1.617 px hoch, und zwischen Held und Aufruf klafften 1.720 px, erlaubt
   sind 1.200 (Abnahmeregel 5). */
.dd-vergleich-block{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(18px,2.2vw,30px);align-items:center;margin:0;min-width:0}
.dd-raster{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:3px;width:clamp(168px,14vw,204px)}
.dd-ziegel{aspect-ratio:1;border-radius:0 0 46% 46%;border:1px solid rgba(255,255,255,.24)}
.dd-ziegel.ist-gedeckt{background:rgba(255,255,255,.88);border-color:transparent}
.dd-vergleich-block figcaption{margin:0;min-width:0}
.dd-vergleich-block .dd-grosszahl{margin-bottom:10px !important}
.dd-vergleich-block .dd-grosszahl b{font-size:clamp(52px,44px + 2vw,78px)}
.dd-vergleich-block .dd-grosszahl span{font-size:clamp(18px,17px + .4vw,22px)}
.dd-vergleich-block .dd-grosszahl{color:#fff !important}
.dd-vergleich-block .dd-grosszahl span{color:var(--text-hell-leise)}
.dd-vergleich-block p{color:var(--text-hell-leise);max-width:46ch}
.dd-vergleich-block .dd-quelle{margin-top:12px;color:rgba(255,255,255,.56)}
.dd-grosszahl{display:flex;align-items:baseline;gap:12px;margin:0 0 14px !important;color:var(--anker) !important}
.dd-grosszahl b{font:700 clamp(72px,60px + 3vw,112px)/1 var(--s-kopf);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.dd-grosszahl span{font:600 clamp(20px,18px + .5vw,26px)/1.1 var(--s-kopf);color:var(--text-leise)}

/* Die vier Zusagen als Reihe darunter, ohne Kaesten, jede unter ihrem
   eigenen Kupferstrich (Pseudoelement, zaehlt nicht mit). */
.dd-zusagen-reihe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(22px,2.6vw,32px);list-style:none;margin:clamp(34px,4vw,52px) 0 0;padding:clamp(26px,3vw,38px) 0 0;border-top:1px solid var(--linie-hell)}
.dd-zusagen-reihe > li{position:relative;padding-top:18px}
.dd-zusagen-reihe > li::before{content:"";position:absolute;top:0;left:0;width:40px;height:3px;background:var(--signal)}
.dd-zusagen-reihe svg{width:26px;height:26px;color:#fff;margin-bottom:12px}
.dd-zusagen-reihe h3{font-size:19px;margin-bottom:6px}
.dd-zusagen-reihe p{font-size:16px;line-height:1.55;color:var(--text-hell-leise);margin:0}
.dd-antwort-aktion{margin-top:clamp(30px,3.5vw,42px)}
@media (max-width:960px){.dd-zusagen-reihe{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1100px){.dd-vergleich{grid-template-columns:1fr;gap:30px}}
@media (max-width:620px){.dd-vergleich-block{grid-template-columns:1fr;gap:16px}.dd-raster{width:190px}}
@media (max-width:520px){.dd-zusagen-reihe{grid-template-columns:1fr;gap:26px}}

/* =========================================================================
   Der Rechner (Bauplan Teil 8)
   ========================================================================= */
.dd-rechner-rahmen{background:#fff;border:1px solid var(--linie);border-radius:var(--r-karte);padding:clamp(20px,3vw,36px);box-shadow:var(--schatten-s)}
.dd-sek-warm .dd-rechner-rahmen{box-shadow:none}
.dd-rechner{display:block}
.dd-rs-zaehler{margin:0 0 10px;font-family:var(--s-kopf);font-size:15px;font-weight:600;color:var(--text-leise)}
.dd-rs-zaehler b{color:var(--anker);font-weight:700}
.dd-fortschritt{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;list-style:none;margin:0 0 clamp(22px,3vw,32px);padding:0;counter-reset:none}
.dd-fortschritt li{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;position:relative}
.dd-fortschritt li::before{content:"";position:absolute;top:15px;left:-50%;right:50%;height:2px;background:var(--linie);z-index:0}
.dd-fortschritt li:first-child::before{display:none}
.dd-fortschritt li.ist-fertig::before,.dd-fortschritt li.ist-aktiv::before{background:var(--anker)}
.dd-fortschritt span{position:relative;z-index:1;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#fff;border:2px solid var(--linie);font:600 14px/1 var(--s-kopf);color:var(--text-leise)}
.dd-fortschritt li.ist-fertig span{background:var(--anker);border-color:var(--anker);color:#fff}
.dd-fortschritt li.ist-aktiv span{background:var(--signal);border-color:var(--signal);color:#fff}
.dd-fortschritt em{font-style:normal;font-size:13px;color:var(--text-leise);line-height:1.2}
.dd-fortschritt li.ist-aktiv em{color:var(--anker);font-weight:600}
@media (max-width:640px){.dd-fortschritt em{display:none}.dd-fortschritt li.ist-aktiv em{display:block}}

.dd-rs{border:0;padding:0;margin:0;min-width:0}
.dd-js .dd-rs{display:none}
.dd-js .dd-rs.ist-aktiv{display:block}
.dd-rs legend{padding:0;margin-bottom:6px;font:700 var(--fs-h3)/1.25 var(--s-kopf);letter-spacing:-.01em;color:var(--anker)}
.dd-rs legend:focus{outline:none}
.dd-warum{color:var(--text-leise);font-size:16px;margin:0 0 20px;max-width:68ch}
.dd-rs-fehler{margin:12px 0 0;color:var(--fehler);font-weight:600;font-size:var(--fs-klein)}
.dd-rs-hinweis{margin:12px 0 0;padding:10px 14px;background:var(--grund-warm);border-radius:var(--r-knopf);font-size:var(--fs-klein);color:var(--text-leise)}
.dd-rs-nav{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;margin-top:clamp(20px,3vw,28px)}
.dd-rs-nav .dd-btn{margin-left:auto}
.dd-zurueck{display:inline-flex;align-items:center;gap:6px;padding:10px 4px;border:0;background:none;font:600 16px var(--s-kopf);color:var(--text-leise);cursor:pointer;border-radius:var(--r-knopf)}
.dd-zurueck:hover{color:var(--anker)}
.dd-zurueck svg{width:18px;height:18px}
.dd-zurueck-inline{padding:0;margin-left:6px;text-decoration:underline;text-underline-offset:3px;color:var(--anker)}

/* Schritt 1: Bildauswahl */
.dd-bildwahl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.dd-bildwahl-karte{position:relative;display:flex;flex-direction:column;border:2px solid var(--linie);border-radius:var(--r-karte);overflow:hidden;background:#fff;cursor:pointer;transition:border-color var(--uebergang),box-shadow var(--uebergang)}
.dd-bildwahl-karte:hover{border-color:#B9B0A6}
.dd-bildwahl-karte input{position:absolute;opacity:0;width:1px;height:1px;min-height:0;margin:0}
.dd-bildwahl-bild{display:block;aspect-ratio:3/2;overflow:hidden}
.dd-bildwahl-bild img{width:100%;height:100%;object-fit:cover}
.dd-bildwahl-text{display:block;padding:12px 14px 14px;font:600 16px/1.3 var(--s-kopf);color:var(--anker)}
.dd-bildwahl-text small{display:block;margin-top:3px;font:400 14px/1.3 var(--s-text);color:var(--text-leise)}
.dd-bildwahl-karte:has(input:checked){border-color:var(--anker);box-shadow:inset 0 0 0 1px var(--anker)}
.dd-bildwahl-karte:has(input:checked) .dd-bildwahl-text::after{content:"ausgewählt";float:right;font:600 12px/1 var(--s-kopf);color:#fff;background:var(--anker);padding:4px 7px;border-radius:3px;margin-top:2px}
.dd-bildwahl-karte:has(input:focus-visible){outline:3px solid var(--anker);outline-offset:2px}
@media (max-width:700px){.dd-bildwahl{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:400px){.dd-bildwahl{grid-template-columns:1fr}}

/* Schritt 2: Masse mit Skizze */
.dd-masse{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:24px 32px;align-items:center}
.dd-masse-felder{display:grid;gap:16px;max-width:420px}
.dd-skizze{width:220px;height:150px;color:var(--text-leise);justify-self:end}
@media (max-width:640px){.dd-masse{grid-template-columns:1fr}.dd-skizze{justify-self:start;width:180px;height:123px}}

/* Schritt 3: Neigung */
.dd-neigung{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.dd-neigung-karte{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 12px 14px;border:2px solid var(--linie);border-radius:var(--r-karte);background:#fff;cursor:pointer;text-align:center;font:600 15px/1.3 var(--s-kopf);color:var(--anker);transition:border-color var(--uebergang)}
.dd-neigung-karte:hover{border-color:#B9B0A6}
.dd-neigung-karte input{position:absolute;opacity:0;width:1px;height:1px;min-height:0;margin:0}
.dd-giebel{width:100px;height:60px;color:var(--anker)}
.dd-neigung-karte:has(input:checked){border-color:var(--anker);box-shadow:inset 0 0 0 1px var(--anker);background:var(--grund-warm)}
.dd-neigung-karte:has(input:focus-visible){outline:3px solid var(--anker);outline-offset:2px}
@media (max-width:560px){.dd-neigung{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Schritt 4: Schieberegler */
.dd-regler{max-width:560px}
.dd-regler label{display:block;font-weight:600;margin-bottom:10px}
.dd-regler output{font:700 24px/1 var(--s-kopf);color:var(--anker);font-variant-numeric:tabular-nums;margin-left:4px}
.dd-regler input[type=range]{width:100%;min-height:0;padding:0;border:0;background:transparent;accent-color:var(--anker);cursor:pointer}
.dd-regler-skala{display:flex;justify-content:space-between;font-size:13px;color:var(--text-leise);margin-top:4px;padding:0 2px}
.dd-regler .dd-feld-hilfe{margin-top:14px}

/* Schritt 5: Ergebnis */
.dd-ergebnis{background:var(--anker);color:#fff;border-radius:var(--r-karte);padding:clamp(22px,3vw,34px)}
.dd-ergebnis dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px clamp(20px,3vw,40px);margin:0}
.dd-ergebnis dl > div{min-width:0}
.dd-ergebnis dt{font-size:15px;color:var(--text-hell-leise);margin-bottom:6px}
.dd-ergebnis dd{margin:0}
.dd-ergebnis dd b{display:block;font:700 clamp(24px,20px + 1vw,34px)/1.1 var(--s-kopf);letter-spacing:-.02em;font-variant-numeric:tabular-nums;text-wrap:balance}
.dd-ergebnis-haupt dd b{font-size:clamp(28px,22px + 1.6vw,44px)}
.dd-ergebnis dd small{display:block;margin-top:8px;font-size:14px;line-height:1.45;color:var(--text-hell-leise)}
.dd-ergebnis-rechenweg{margin:22px 0 0;padding-top:18px;border-top:1px solid var(--linie-hell);font-size:15px;color:var(--text-hell-leise);font-variant-numeric:tabular-nums}
.dd-ergebnis-hinweis{margin:12px 0 0;font-size:16px;line-height:1.55;color:#fff}
.dd-ergebnis-hinweis:empty{display:none}
.dd-rs-nav-ergebnis{align-items:center}
.dd-ergebnis-ehrlich{margin:16px 0 0;font-size:var(--fs-klein);color:var(--text-leise);max-width:68ch}
@media (max-width:760px){.dd-ergebnis dl{grid-template-columns:1fr}}

/* Schritt 6: Zusammenfassung */
.dd-zusammenfassung{margin:0 0 20px;padding:14px 18px;background:var(--grund-warm);border-radius:var(--r-knopf);font-size:16px;line-height:1.5}

/* =========================================================================
   Anlass-Kacheln. Alle sechs sind dasselbe Bauteil und fuehren mit einem
   Foto: vorher hatten nur die ersten beiden eines, die vier darunter ein
   graues Symbolquadrat, und das Raster zerfiel sichtbar in zwei Haelften.
   Jede Kachel beginnt mit der Kundenfrage aus ANLAESSE, dann erst kommt
   der Titel. Die Fassung ohne Foto (dd-kachel ohne dd-kachel-foto) bleibt,
   /betrieb/ baut damit die Kacheln "So arbeiten wir".
   ========================================================================= */
.dd-kacheln{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,2vw,22px)}
.dd-kachel{position:relative;display:flex;flex-direction:column;gap:10px;padding:26px 24px 22px;background:#fff;border:1px solid var(--linie);border-radius:var(--r-karte);transition:transform var(--uebergang),box-shadow var(--uebergang),border-color var(--uebergang)}
.dd-kachel:hover{transform:translateY(-3px);box-shadow:var(--schatten-m);border-color:transparent}
.dd-kachel-foto{gap:0;padding:0;overflow:hidden;border-color:transparent;box-shadow:var(--schatten-s)}
.dd-kachel-gross{grid-column:span 2}
.dd-kachel-bild{aspect-ratio:4/3;overflow:hidden;background:var(--grund-warm)}
.dd-kachel-gross .dd-kachel-bild{aspect-ratio:2/1}
.dd-kachel-bild img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.dd-kachel:hover .dd-kachel-bild img{transform:scale(1.03)}
.dd-kachel-text{display:flex;flex-direction:column;gap:10px;padding:22px 24px 20px;flex:1}
/* Die Kundenfrage als Aufhaenger, davor der kleine First. */
.dd-kachel-frage{position:relative;margin:0;padding-left:28px;font:500 15.5px/1.45 var(--s-text);color:var(--text-leise)}
.dd-kachel-frage::before{content:"";position:absolute;left:0;top:.62em;width:18px;height:2px;background:var(--signal)}
.dd-kachel-ico{width:48px;height:48px;border-radius:var(--r-karte);background:var(--grund-warm);display:grid;place-items:center;color:var(--anker);margin-bottom:4px}
.dd-kachel-ico svg{width:26px;height:26px}
.dd-kachel h3{font-size:21px}
.dd-kachel-gross h3{font-size:23px}
.dd-kachel h3 a{color:inherit;text-decoration:none}
.dd-kachel h3 a::after{content:"";position:absolute;inset:0;border-radius:var(--r-karte)}
.dd-kachel p{color:var(--text-leise);font-size:16px;line-height:1.55;margin:0}
.dd-kachel-anriss{flex:1}
/* Preis und Link brechen jetzt untereinander um statt in die Zeile hinein.
   Vorher stand "90 bis 190 EUR je m2" in den schmalen Kacheln fuenfzeilig. */
.dd-kachel-fuss{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 16px;margin-top:auto;padding-top:14px;border-top:1px solid var(--linie)}
.dd-kachel-preis{font:600 15px/1.3 var(--s-kopf);color:var(--anker);font-variant-numeric:tabular-nums;white-space:nowrap}
.dd-kachel-link{display:inline-flex;align-items:center;gap:4px;flex:none;font:600 15px/1.2 var(--s-kopf);color:var(--anker);text-decoration:none;white-space:nowrap}
.dd-kachel-link svg{width:16px;height:16px;transition:transform var(--uebergang)}
.dd-kachel-link:hover svg{transform:translateX(3px)}
@media (max-width:1000px){.dd-kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.dd-kacheln{grid-template-columns:1fr}.dd-kachel-gross{grid-column:auto}.dd-kachel-bild,.dd-kachel-gross .dd-kachel-bild{aspect-ratio:16/9}}

/* =========================================================================
   So laeuft Ihre Sanierung. Sieben Schritte bleiben sieben (Bauplan Teil 4),
   sie stehen nur nicht mehr untereinander: drei Phasen nebeneinander, jede
   mit einem Baustellenfoto. Vorher war der Abschnitt 1.080 px hoch, daneben
   600 px leer unter einem klebenden Kopf, und am Handy rund 1.800 px.
   ========================================================================= */
.dd-phasen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,38px);list-style:none;margin:0;padding:0}
.dd-phase{display:flex;flex-direction:column;min-width:0}
/* Kopfreihe: Ueberschrift links, Aufruf rechts auf derselben Grundlinie.
   Spart die Aktionszeile unten und bricht die Gleichfoermigkeit, in der
   vorher jeder Abschnitt mit demselben Kupferknopf endete. Ablauf und
   Projekte benutzen sie. */
.dd-kopfreihe{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px 40px;align-items:end;margin-bottom:clamp(26px,3.5vw,42px)}
.dd-kopfreihe .dd-kopf{margin-bottom:0}
@media (max-width:900px){.dd-kopfreihe{grid-template-columns:1fr;align-items:start}}
.dd-phase-bild{aspect-ratio:2/1;overflow:hidden;border-radius:var(--r-karte);background:var(--grund-warm)}
.dd-phase-bild img{width:100%;height:100%;object-fit:cover}
.dd-phase-kopf{margin-top:18px;padding-top:12px;border-top:3px solid var(--anker)}
.dd-phase-kopf h3{font-size:21px}
.dd-phase-kopf span{display:block;margin-top:4px;font-size:15px;color:var(--text-leise)}
.dd-phase-schritte{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:16px}
.dd-phase-schritte > li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;align-items:start}
.dd-schritt-nr{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--anker);color:#fff;font:700 15px/1 var(--s-kopf)}
.dd-phase-schritte h4{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;font-size:17px;margin-bottom:5px}
.dd-phase-schritte h4 small{font:500 14px/1.2 var(--s-text);color:var(--text-leise);padding:2px 7px;background:var(--grund-warm);border-radius:3px}
.dd-phase-schritte p{font-size:15.5px;line-height:1.5;color:var(--text-leise);margin:0}
.dd-phasen-fuss{display:flex;flex-wrap:wrap;align-items:center;gap:16px 36px;margin-top:clamp(30px,3.5vw,42px);padding-top:clamp(24px,3vw,32px);border-top:1px solid var(--linie)}
.dd-phasen-fuss p{margin:0;color:var(--text-leise);max-width:50ch}

@media (max-width:900px){
  .dd-phasen{grid-template-columns:1fr;gap:28px}
  /* Am Handy ist das Foto ein flaches Band. Hoch wie am Rechner waere der
     Abschnitt sonst laenger als die Zeitleiste, die er ersetzt. */
  .dd-phase-bild{aspect-ratio:3/1}
  .dd-phase-kopf{margin-top:14px;padding-top:10px}
  .dd-phase-schritte{margin-top:14px;gap:14px}
}

/* =========================================================================
   Projekte mit Zahlen
   ========================================================================= */
.dd-projekte{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.dd-projekt{display:flex;flex-direction:column;background:#fff;border-radius:var(--r-karte);overflow:hidden;box-shadow:var(--schatten-s)}
.dd-projekt-bild{aspect-ratio:3/2;overflow:hidden;background:var(--grund-warm)}
.dd-projekt-bild img{width:100%;height:100%;object-fit:cover}
.dd-projekt-text{padding:22px 26px 24px;display:flex;flex-direction:column;gap:12px;flex:1}
.dd-projekt h3{font-size:22px}
.dd-projekt h3 small{display:block;margin-top:4px;font:400 15px/1.3 var(--s-text);color:var(--text-leise)}
.dd-projekt p{font-size:16px;color:var(--text-leise);line-height:1.55;margin:0}
.dd-projekt-geschichte{color:var(--text) !important}
.dd-projekt-daten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px;margin:auto 0 0;padding-top:16px;border-top:1px solid var(--linie)}
.dd-projekt-daten dt{font-size:14px;color:var(--text-leise);margin-bottom:2px}
.dd-projekt-daten dd{margin:0;font:600 19px/1.2 var(--s-kopf);color:var(--anker);font-variant-numeric:tabular-nums}
.dd-projekt-summe{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:baseline;padding-top:12px;border-top:1px solid var(--linie)}
.dd-projekt-summe dt{font-size:15px;font-weight:600;color:var(--anker)}
.dd-projekt-summe dd{font-size:26px;font-weight:700}
.dd-projekt-text > .dd-kachel-link{margin-top:14px;align-self:flex-start}
.dd-projekte-liste{display:grid;gap:24px}
.dd-projekt-gross{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.dd-projekt-gross .dd-projekt-bild{aspect-ratio:auto;min-height:100%}
.dd-projekt-gross .dd-projekt-text{padding:clamp(22px,3vw,34px)}
.dd-projekt-gross .dd-projekt-daten{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:860px){.dd-projekte{grid-template-columns:1fr}.dd-projekt-gross{grid-template-columns:1fr}.dd-projekt-gross .dd-projekt-bild{aspect-ratio:3/2}.dd-projekt-gross .dd-projekt-daten{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* =========================================================================
   Zwei Listen nebeneinander (Festpreis)
   ========================================================================= */
.dd-zwei{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.dd-zwei-karte{padding:clamp(24px,3vw,34px);background:var(--grund-warm);border-radius:var(--r-karte)}
.dd-zwei-karte-leise{background:#fff;border:1px solid var(--linie)}
.dd-zwei-karte h3{display:flex;align-items:center;gap:10px;font-size:22px;margin-bottom:18px}
.dd-zwei-karte h3 svg{width:24px;height:24px;color:var(--anker)}
.dd-zwei-karte .dd-haken{margin:0}
.dd-zwei-karte-leise .dd-haken svg{background:var(--grund-warm)}
@media (max-width:860px){.dd-zwei{grid-template-columns:1fr}}

/* =========================================================================
   Foerderung: Text links, drei Werte rechts
   ========================================================================= */
.dd-foerder{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,6vw,96px);align-items:start}
.dd-foerder-text h2{margin-bottom:16px}
.dd-foerder-text p{color:var(--text-leise);max-width:60ch}
.dd-foerder-text .dd-aktion{margin-top:24px}
.dd-foerder .dd-zahlen{grid-template-columns:1fr;gap:0}
.dd-foerder .dd-zahl{border-top:1px solid var(--linie);padding:20px 0}
.dd-foerder .dd-zahl:first-child{border-top:3px solid var(--anker)}
@media (max-width:860px){.dd-foerder{grid-template-columns:1fr}.dd-foerder .dd-zahlen{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.dd-foerder .dd-zahl{border-top:3px solid var(--anker);padding:16px 0 0}}
@media (max-width:560px){.dd-foerder .dd-zahlen{grid-template-columns:1fr}}

/* =========================================================================
   Kennzahlen
   ========================================================================= */
.dd-zahlen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.dd-zahlen-drei{grid-template-columns:repeat(3,minmax(0,1fr))}
.dd-zahlen-rand{margin-top:clamp(44px,6vw,72px);padding-top:clamp(28px,4vw,40px);border-top:1px solid var(--linie)}
.dd-zahl{border-top:3px solid var(--anker);padding-top:16px}
.dd-zahl-wert{display:block;font:700 var(--fs-zahl)/1 var(--s-kopf);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--anker)}
.dd-zahl-text{display:block;margin-top:8px;color:var(--text-leise);font-size:16px;line-height:1.45}
@media (max-width:760px){.dd-zahlen,.dd-zahlen-drei{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.dd-zahlen,.dd-zahlen-drei{grid-template-columns:1fr}}

/* =========================================================================
   Betrieb: Portraet und Text, Nachweise darunter
   ========================================================================= */
.dd-portraet{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,88px);align-items:center}
.dd-portraet-bild{margin:0;max-width:460px}
.dd-portraet-bild img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-karte)}
.dd-portraet-bild figcaption{margin-top:12px;font-size:var(--fs-klein);color:var(--text-leise);line-height:1.5}
.dd-portraet-bild figcaption strong{color:var(--anker)}
.dd-portraet-text h2{margin-bottom:16px}
.dd-portraet-text p{color:var(--text-leise)}
.dd-portraet-text .dd-aktion{margin-top:24px}
.dd-nachweise{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 24px;list-style:none;margin:26px 0 0;padding:22px 0 0;border-top:1px solid var(--linie)}
.dd-nachweise li{display:flex;gap:10px;align-items:flex-start;font-size:16px;line-height:1.45;font-weight:500}
.dd-nachweise svg{width:22px;height:22px;color:var(--anker);margin-top:2px}
.dd-nachweis-karten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.dd-nachweis-karte{padding:22px;background:#fff;border:1px solid var(--linie);border-radius:var(--r-karte)}
.dd-nachweis-karte p{margin:12px 0 0;font-weight:500;line-height:1.45}
@media (max-width:860px){.dd-portraet{grid-template-columns:1fr}.dd-portraet-bild{max-width:380px}}
@media (max-width:560px){.dd-nachweise,.dd-nachweis-karten{grid-template-columns:1fr}}

/* =========================================================================
   Streifen (Karriere auf der Startseite) in der Karrierefarbe
   ========================================================================= */
.dd-streifen{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 48px;align-items:center;padding:clamp(28px,4vw,44px);background:var(--grund-warm);border-radius:var(--r-karte)}
.dd-streifen h2{margin-bottom:10px}
.dd-streifen p{color:var(--text-leise);max-width:62ch}
.dd-streifen-links{display:grid;gap:14px;justify-items:start}
.dd-streifen-karriere{background:var(--karriere-hell);border-left:5px solid var(--karriere)}
@media (max-width:760px){.dd-streifen{grid-template-columns:1fr}}

/* =========================================================================
   Dunkles Band: der Dach-Check mit vier Feldern
   ========================================================================= */
.dd-band{background:var(--anker);color:#fff}
.dd-band h2,.dd-band h3{color:#fff}
.dd-band-kopf{max-width:760px;margin-bottom:clamp(28px,4vw,46px)}
.dd-band-kopf h2{margin-bottom:14px}
.dd-band-kopf .dd-lead{color:var(--text-hell-leise)}
.dd-band-felder{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.dd-band-feld{padding:24px 22px 22px;background:var(--anker-2);border-radius:var(--r-karte)}
.dd-band-ico{display:grid;place-items:center;width:48px;height:48px;border-radius:var(--r-karte);background:var(--anker-3);color:#fff;margin-bottom:16px}
.dd-band-ico svg{width:26px;height:26px}
.dd-band-feld h3{font-size:21px;margin-bottom:8px}
.dd-band-feld p{font-size:16px;color:var(--text-hell-leise);line-height:1.55;margin:0}
.dd-band-aktion{margin-top:26px}
@media (max-width:960px){.dd-band-felder{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.dd-band-felder{grid-template-columns:1fr}}

/* =========================================================================
   Fragen: Kopf links, Aufklapper rechts
   ========================================================================= */
.dd-fragen{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(32px,6vw,96px);align-items:start}
.dd-fragen-kopf{position:sticky;top:calc(var(--nav-h) + 32px)}
.dd-fragen-kopf h2{margin-bottom:14px}
.dd-fragen-kopf .dd-aktion{margin-top:22px}
@media (max-width:860px){.dd-fragen{grid-template-columns:1fr}.dd-fragen-kopf{position:static}}

.dd-faq{border-top:1px solid var(--linie)}
.dd-faq details{border-bottom:1px solid var(--linie)}
.dd-faq summary{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:18px 0;list-style:none;cursor:pointer;font:600 18px/1.4 var(--s-kopf);letter-spacing:-.01em;color:var(--anker)}
.dd-faq summary::-webkit-details-marker{display:none}
.dd-faq summary svg{width:22px;height:22px;margin-top:3px;transition:transform var(--uebergang)}
.dd-faq details[open] summary svg{transform:rotate(45deg)}
.dd-faq-antwort{padding:0 0 22px;max-width:68ch;color:var(--text-leise)}
.dd-faq-antwort p{margin:0}

/* =========================================================================
   Schluss: Aufruf und Erreichbarkeit
   ========================================================================= */
.dd-schluss{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,72px);align-items:center}
.dd-schluss h2{margin-bottom:14px}
.dd-schluss .dd-lead{margin-bottom:28px}
.dd-kontaktkarte{padding:28px 30px;background:#fff;border:1px solid var(--linie);border-radius:var(--r-karte)}
.dd-kontaktkarte h3{margin-bottom:16px;font-size:22px}
.dd-kontaktkarte dl{display:grid;grid-template-columns:26px minmax(0,1fr);gap:16px 14px;margin:18px 0 0}
.dd-kontaktkarte dt{color:var(--anker)}
.dd-kontaktkarte dt svg{width:22px;height:22px}
.dd-kontaktkarte dd{margin:0;line-height:1.5;min-width:0}
.dd-kontaktkarte dd a{color:var(--anker);font-weight:500}
.dd-kontaktkarte dd small{display:block;color:var(--text-leise);font-size:14px}
.dd-tel-gross{display:inline-block;font:700 clamp(28px,24px + 1vw,38px)/1.1 var(--s-kopf);letter-spacing:-.02em;color:var(--anker);text-decoration:none}
.dd-tel-gross:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}

.dd-status{display:inline-flex;align-items:center;gap:9px;padding:6px 13px 6px 11px;border-radius:999px;background:var(--grund-warm);font-size:14.5px;font-weight:600;color:var(--text-leise);line-height:1.3}
.dd-status::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--text-leise);flex:none}
.dd-status.ist-offen{color:var(--status-gut)}
.dd-status.ist-offen::before{background:var(--status-gut)}
.dd-band .dd-status,.dd-nebenkarte-dunkel .dd-status{background:var(--anker-2);color:var(--text-hell-leise)}
.dd-band .dd-status::before,.dd-nebenkarte-dunkel .dd-status::before{background:var(--text-hell-leise)}
.dd-band .dd-status.ist-offen,.dd-nebenkarte-dunkel .dd-status.ist-offen{color:#6FD39E}
.dd-band .dd-status.ist-offen::before,.dd-nebenkarte-dunkel .dd-status.ist-offen::before{background:#6FD39E}
@media (max-width:860px){.dd-schluss{grid-template-columns:1fr}}

/* =========================================================================
   Fussbereich
   ========================================================================= */
.dd-fuss{background:var(--anker);color:var(--text-hell-leise);padding:clamp(48px,6vw,76px) 0 32px;font-size:16px}
.dd-fuss a{color:rgba(255,255,255,.84);text-decoration:none}
.dd-fuss a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.dd-fuss h3{color:#fff;font-size:18px;margin-bottom:14px}
.dd-fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.dd-fuss-oben{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr);gap:40px clamp(24px,4vw,56px)}
.dd-fuss-marke p{margin-top:18px;max-width:34ch;line-height:1.6}
.dd-fuss-kontakt li{display:flex;gap:10px;align-items:flex-start}
.dd-fuss-kontakt svg{width:20px;height:20px;margin-top:3px;color:#fff}
.dd-stellen-marker{display:inline-block;margin-left:8px;padding:2px 7px;border-radius:3px;background:var(--karriere);color:#fff;font:600 12px/1.3 var(--s-kopf);vertical-align:1px}
.dd-fuss-gebiete{margin:40px 0 0;padding-top:28px;border-top:1px solid var(--linie-hell);font-size:14.5px;line-height:1.65}
.dd-fuss-gebiete strong{color:#fff}
.dd-fuss-unten{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;margin-top:28px;padding-top:24px;border-top:1px solid var(--linie-hell);font-size:14.5px}
.dd-fuss-unten ul{display:flex;gap:20px}
.dd-muster-hinweis{margin:26px 0 0;font-size:13px;line-height:1.55;color:rgba(255,255,255,.5);max-width:76ch}
@media (max-width:900px){.dd-fuss-oben{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.dd-fuss-oben{grid-template-columns:1fr}}
@media (max-width:899px){.dd-fuss{padding-bottom:calc(32px + var(--leiste-h))}}

/* =========================================================================
   Feste Handyleiste: Anrufen und Dach-Check (oder Bewerben)
   ========================================================================= */
.dd-leiste{position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:10px;padding:10px var(--rand) calc(10px + env(safe-area-inset-bottom));background:rgba(22,32,43,.96);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 -8px 24px rgba(0,0,0,.22);transform:translateY(110%);transition:transform var(--uebergang)}
.dd-leiste.ist-sichtbar{transform:none}
.dd-leiste .dd-btn{width:100%;min-height:48px;padding:10px 12px;font-size:15.5px;letter-spacing:-.01em}
.dd-leiste .dd-btn svg{width:18px;height:18px}
@media (max-width:899px){.dd-leiste{display:grid}}

/* =========================================================================
   Kopfband der Unterseiten, hell und warm
   ========================================================================= */
.dd-kopfband{background:var(--grund-warm);color:var(--text);padding:calc(var(--nav-h) + clamp(36px,5vw,64px)) 0 clamp(40px,6vw,72px)}
.dd-kopfband-innen{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,5vw,64px);align-items:center}
.dd-kopfband h1{margin-bottom:16px}
.dd-kopfband .dd-lead{max-width:60ch}
.dd-kopfband .dd-aktion{margin-top:28px}
.dd-kopfband-bild img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r-karte)}
.dd-kopfband-schmal .dd-kopfband-innen{grid-template-columns:minmax(0,1fr)}
.dd-kopfband-schmal .dd-kopfband-text{max-width:800px}
.dd-krumen ol{display:flex;flex-wrap:wrap;gap:6px 8px;list-style:none;margin:0 0 18px;padding:0;font-size:14px;color:var(--text-leise)}
.dd-krumen li + li::before{content:"/";margin-right:8px;opacity:.5}
.dd-krumen a{color:inherit;text-decoration:none}
.dd-krumen a:hover{color:var(--anker);text-decoration:underline}
.dd-kopfband-fakten{display:flex;flex-wrap:wrap;gap:10px 26px;list-style:none;margin:22px 0 0;padding:0}
.dd-kopfband-fakten li{display:flex;align-items:center;gap:8px;font-weight:500;font-size:16px}
.dd-kopfband-fakten svg{width:22px;height:22px;color:var(--anker)}
.dd-kopfband-hoch .dd-kopfband-innen{grid-template-columns:minmax(0,7fr) minmax(0,4fr)}
.dd-kopfband-hoch .dd-kopfband-bild img{aspect-ratio:4/5}
.dd-kopfband-hoch .dd-kopfband-bild{max-width:420px;justify-self:end}
.dd-kopfband-karriere{background:var(--karriere-hell)}
.dd-kopfband-karriere .dd-kopfband-fakten svg{color:var(--karriere)}
@media (max-width:860px){
  .dd-kopfband-innen,.dd-kopfband-hoch .dd-kopfband-innen{grid-template-columns:1fr}
  .dd-kopfband-bild{order:-1;max-width:520px}
  .dd-kopfband-hoch .dd-kopfband-bild{max-width:340px;justify-self:start}
}

/* =========================================================================
   Inhalt mit Nebenspalte
   ========================================================================= */
.dd-inhalt{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(32px,5vw,80px);align-items:start}
.dd-neben{position:sticky;top:calc(var(--nav-h) + 24px);display:grid;gap:20px}
.dd-nebenkarte{padding:24px 26px;border:1px solid var(--linie);border-radius:var(--r-karte);background:#fff}
.dd-nebenkarte h3{font-size:21px;margin-bottom:12px}
.dd-nebenkarte p{color:var(--text-leise);font-size:16px}
.dd-nebenkarte ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.dd-nebenkarte ul a{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-weight:500;font-size:16px;padding:6px 0}
.dd-nebenkarte ul a:hover{color:var(--anker);text-decoration:underline;text-underline-offset:3px}
.dd-nebenkarte ul a svg{width:20px;height:20px;color:var(--anker)}
.dd-nebenkarte ul a small{display:block;font-size:14px;color:var(--text-leise);font-weight:400}
.dd-nebenkarte ul a[aria-current="page"]{font-weight:700}
.dd-nebenkarte-dunkel{background:var(--anker);border-color:var(--anker);color:#fff}
.dd-nebenkarte-dunkel h3{color:#fff}
.dd-nebenkarte-dunkel p{color:var(--text-hell-leise)}
.dd-nebenkarte-dunkel .dd-btn{width:100%;margin-top:16px}
.dd-nebenkarte-dunkel .dd-tel{margin-top:14px;font:700 22px/1.1 var(--s-kopf);color:#fff}
.dd-nebenkarte .dd-status{margin-top:10px}
.dd-nebenkarte-karriere{border-top:4px solid var(--karriere)}
.dd-nebenkarte-karriere .dd-tel{font:700 20px/1.1 var(--s-kopf);color:var(--anker);margin-top:8px}
.dd-ansprech{display:flex;align-items:center;gap:14px;margin:0 0 14px}
.dd-ansprech img{width:72px;height:72px;border-radius:50%;object-fit:cover;flex:none}
.dd-ansprech figcaption strong{display:block;font:600 19px/1.2 var(--s-kopf);color:var(--anker)}
.dd-ansprech figcaption span{display:block;font-size:15px;color:var(--text-leise);margin-top:3px}
@media (max-width:900px){
  .dd-inhalt{grid-template-columns:1fr}
  .dd-neben{position:static}
}

/* Fliesstext */
.dd-text{max-width:68ch}
.dd-text h2{font-size:clamp(24px,20px + .95vw,32px);margin:1.8em 0 .55em}
.dd-text h2:first-child{margin-top:0}
.dd-text h3{margin:1.5em 0 .45em}
.dd-text p,.dd-text li{color:var(--text)}
.dd-text > p{color:var(--text-leise)}
.dd-haken{list-style:none;margin:0 0 1.2em;padding:0;display:grid;gap:10px}
.dd-haken li{display:flex;gap:12px;align-items:flex-start;line-height:1.55}
.dd-haken svg{width:22px;height:22px;margin-top:2px;padding:3px;border-radius:50%;background:var(--grund-warm);color:var(--anker)}
.dd-sek-warm .dd-haken svg{background:#fff}
.dd-haken-zwei{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 28px}
.dd-band .dd-haken svg,.dd-nebenkarte-dunkel .dd-haken svg{background:var(--anker-2);color:#fff}
@media (max-width:640px){.dd-haken-zwei{grid-template-columns:1fr}}

.dd-merkbox{margin:0 0 28px;padding:18px 22px;background:var(--grund-warm);border-left:4px solid var(--anker);border-radius:0 var(--r-karte) var(--r-karte) 0}
.dd-merkbox h3{font-size:20px;margin-bottom:6px}
.dd-merkbox p{color:var(--text-leise);font-size:16px}

/* Ablauf in drei oder vier Schritten */
.dd-schritte{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;counter-reset:schritt;list-style:none;margin:0;padding:0}
.dd-schritte-vier{grid-template-columns:repeat(4,minmax(0,1fr))}
.dd-schritt{counter-increment:schritt;padding:26px 24px;border:1px solid var(--linie);border-radius:var(--r-karte);background:#fff}
.dd-schritt::before{content:counter(schritt);display:block;font:700 44px/1 var(--s-kopf);letter-spacing:-.03em;color:#C9CFD5;margin-bottom:14px}
.dd-schritt h3{font-size:21px;margin-bottom:8px}
.dd-schritt p{color:var(--text-leise);font-size:16px;margin:0}
@media (max-width:960px){.dd-schritte-vier{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.dd-schritte,.dd-schritte-vier{grid-template-columns:1fr}}

/* Galerie */
.dd-galerie{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.dd-galerie figure{margin:0}
.dd-galerie img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-karte)}
.dd-galerie figcaption{margin-top:8px;font-size:14px;color:var(--text-leise)}
@media (max-width:760px){.dd-galerie{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.dd-galerie{grid-template-columns:1fr}}

/* Rollen im Team, ohne Gesichter */
.dd-rollen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.dd-rollen-fuenf{grid-template-columns:repeat(5,minmax(0,1fr))}
.dd-rolle{padding:22px 22px 20px;border:1px solid var(--linie);border-radius:var(--r-karte);background:#fff}
.dd-rolle strong{display:block;font:700 40px/1 var(--s-kopf);letter-spacing:-.03em;color:var(--anker);margin-bottom:8px}
.dd-rolle span{display:block;font-weight:600;line-height:1.35}
.dd-rolle small{display:block;color:var(--text-leise);font-size:14px;margin-top:4px;line-height:1.45}
@media (max-width:960px){.dd-rollen-fuenf{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){.dd-rollen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.dd-rollen-fuenf{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Stellen */
.dd-stellen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.dd-stelle{position:relative;display:flex;flex-direction:column;gap:12px;padding:28px;border:1px solid var(--linie);border-top:4px solid var(--karriere);border-radius:var(--r-karte);background:#fff}
.dd-stelle h3{font-size:24px}
.dd-stelle h3 a{color:inherit;text-decoration:none}
.dd-stelle h3 a:hover{text-decoration:underline;text-underline-offset:4px}
.dd-stelle dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 16px;margin:0;font-size:16px}
.dd-stelle dt{color:var(--text-leise)}
.dd-stelle dd{margin:0;font-weight:500}
.dd-stelle p{color:var(--text-leise);font-size:16px;flex:1}
.dd-stelle .dd-btn{align-self:flex-start}
@media (max-width:760px){.dd-stellen{grid-template-columns:1fr}}

/* Bildkarte auf Uebersichtsseiten */
.dd-karten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.dd-karte{position:relative;display:flex;flex-direction:column;border:1px solid var(--linie);border-radius:var(--r-karte);overflow:hidden;background:#fff;transition:transform var(--uebergang),box-shadow var(--uebergang)}
.dd-karte:hover{transform:translateY(-3px);box-shadow:var(--schatten-m)}
.dd-karte-bild{aspect-ratio:3/2;overflow:hidden}
.dd-karte-bild img{width:100%;height:100%;object-fit:cover}
.dd-karte-text{display:flex;flex-direction:column;gap:10px;padding:22px 24px 22px;flex:1}
.dd-karte h3{font-size:22px}
.dd-karte h3 a{color:inherit;text-decoration:none}
.dd-karte h3 a::after{content:"";position:absolute;inset:0}
.dd-karte p{color:var(--text-leise);font-size:16px;flex:1}
.dd-karte .dd-kachel-fuss{margin-top:4px}
@media (max-width:960px){.dd-karten{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.dd-karten{grid-template-columns:1fr}}

/* Preise auf den Leistungsseiten */
.dd-preise-eins{display:grid}
.dd-preis{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:20px;row-gap:3px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--linie)}
.dd-preis:first-child{padding-top:0}
.dd-preis h3{grid-column:1;font-size:19px;font-family:var(--s-text);font-weight:600;letter-spacing:0}
.dd-preis small{grid-column:1;color:var(--text-leise);font-size:14.5px;line-height:1.45}
.dd-preis strong{grid-column:2;grid-row:1 / 3;align-self:center;font:700 clamp(20px,18px + .5vw,24px)/1.1 var(--s-kopf);letter-spacing:-.01em;color:var(--anker);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.dd-fussnote{font-size:var(--fs-klein);color:var(--text-leise);line-height:1.5;max-width:68ch}
@media (max-width:480px){.dd-preis{grid-template-columns:1fr}.dd-preis strong{grid-column:1;grid-row:auto;text-align:left;margin-top:4px}}

/* Spannen-Tafel auf /kosten/ */
.dd-tafel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.dd-tafel-zeile{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 24px;align-items:center;padding:22px 24px;background:#fff;border:1px solid var(--linie);border-radius:var(--r-karte)}
.dd-tafel-zeile h3{font-size:20px;margin-bottom:4px}
.dd-tafel-zeile p{font-size:15px;color:var(--text-leise);margin:0;line-height:1.45}
.dd-tafel-zeile strong{font:700 clamp(20px,18px + .5vw,24px)/1.1 var(--s-kopf);letter-spacing:-.01em;color:var(--anker);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.dd-tafel-zeile strong small{display:block;font:400 13px/1.3 var(--s-text);color:var(--text-leise);margin-top:4px}
@media (max-width:860px){.dd-tafel{grid-template-columns:1fr}}
@media (max-width:480px){.dd-tafel-zeile{grid-template-columns:1fr}.dd-tafel-zeile strong{text-align:left}}

/* Beispieltabelle */
.dd-tabelle-rahmen{overflow-x:auto;contain:paint;border:1px solid var(--linie);border-radius:var(--r-karte);background:#fff}
.dd-tabelle{width:100%;min-width:640px;border-collapse:collapse;font-size:16px}
.dd-tabelle th,.dd-tabelle td{padding:16px 20px;text-align:left;vertical-align:top;border-top:1px solid var(--linie)}
.dd-tabelle thead th{border-top:0;background:var(--grund-warm);font:600 15px/1.3 var(--s-kopf);color:var(--text-leise)}
.dd-tabelle tbody th{font-weight:600;color:var(--anker)}
.dd-tabelle tbody th small{display:block;font-size:14px;font-weight:400;color:var(--text-leise);margin-top:2px}
.dd-tabelle td{font-family:var(--s-kopf);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--anker)}

/* Was den Preis bewegt */
.dd-punktkarten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.dd-punktkarte{padding:24px 24px 22px;background:#fff;border:1px solid var(--linie);border-top:3px solid var(--anker);border-radius:var(--r-karte)}
.dd-punktkarte h3{font-size:20px;margin-bottom:8px}
.dd-punktkarte p{font-size:16px;color:var(--text-leise);margin:0;line-height:1.55}
@media (max-width:960px){.dd-punktkarten{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.dd-punktkarten{grid-template-columns:1fr}}

/* Foerderprogramme */
.dd-programme{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.dd-programm{display:flex;flex-direction:column;padding:24px 22px 22px;background:#fff;border:1px solid var(--linie);border-radius:var(--r-karte)}
.dd-programm:nth-child(2){background:var(--anker);border-color:var(--anker);color:#fff}
.dd-programm:nth-child(2) h3,.dd-programm:nth-child(2) strong{color:#fff}
.dd-programm:nth-child(2) p{color:var(--text-hell-leise)}
.dd-programm:nth-child(2) .dd-programm-ico{background:var(--anker-2);color:#fff}
.dd-programm-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:var(--r-karte);background:var(--grund-warm);color:var(--anker);margin-bottom:16px}
.dd-programm-ico svg{width:24px;height:24px}
.dd-programm h3{font-size:20px;margin-bottom:8px}
.dd-programm p{font-size:15.5px;color:var(--text-leise);line-height:1.5;flex:1}
.dd-programm strong{display:block;margin-top:16px;padding-top:14px;border-top:1px solid var(--linie);font:700 24px/1.1 var(--s-kopf);letter-spacing:-.02em;color:var(--anker);font-variant-numeric:tabular-nums}
.dd-programm:nth-child(2) strong{border-color:var(--linie-hell)}
@media (max-width:960px){.dd-programme{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.dd-programme{grid-template-columns:1fr}}

.dd-rechnung{padding:clamp(22px,3vw,32px);background:#fff;border:1px solid var(--linie);border-radius:var(--r-karte)}
.dd-rechnung h3{font-size:21px;margin-bottom:14px}
.dd-rechnung dl{margin:0 0 16px}
.dd-rechnung dl > div{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:10px 0;border-bottom:1px solid var(--linie);font-size:16px}
.dd-rechnung dt{color:var(--text-leise)}
.dd-rechnung dd{margin:0;font:600 18px/1.2 var(--s-kopf);color:var(--anker);font-variant-numeric:tabular-nums;white-space:nowrap}
.dd-rechnung-summe dt{color:var(--anker) !important;font-weight:600}
.dd-rechnung-summe dd{font-size:24px !important;font-weight:700 !important}

/* Abo-Pakete */
.dd-pakete{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;max-width:900px}
.dd-paket{padding:clamp(24px,3vw,34px);background:#fff;border:1px solid var(--linie);border-radius:var(--r-karte)}
.dd-paket h3{font-size:24px;margin-bottom:8px}
.dd-paket-preis{font:700 var(--fs-zahl)/1 var(--s-kopf);letter-spacing:-.03em;color:var(--anker);font-variant-numeric:tabular-nums;margin-bottom:22px !important}
.dd-paket-preis small{display:block;margin-top:8px;font:400 15px/1.3 var(--s-text);color:var(--text-leise);letter-spacing:0}
.dd-paket .dd-haken{margin:0}
.dd-paket-plus{background:var(--anker);border-color:var(--anker);color:#fff}
.dd-paket-plus h3,.dd-paket-plus .dd-paket-preis{color:#fff}
.dd-paket-plus .dd-paket-preis small{color:var(--text-hell-leise)}
.dd-paket-plus .dd-haken svg{background:var(--anker-2);color:#fff}
@media (max-width:760px){.dd-pakete{grid-template-columns:1fr}}

/* =========================================================================
   Formulare
   ========================================================================= */
.dd-form{display:grid;gap:24px}
.dd-schritt-feld{margin:0;padding:clamp(20px,3vw,32px);border:1px solid var(--linie);border-radius:var(--r-karte);background:#fff;min-width:0}
.dd-schritt-feld legend{display:flex;align-items:center;gap:12px;padding:0 10px;margin-left:-10px;font:700 24px/1.2 var(--s-kopf);letter-spacing:-.01em;color:var(--anker);background:#fff;border-radius:4px}
.dd-schritt-feld > p{color:var(--text-leise);font-size:16px;margin:4px 0 20px}
.dd-form-karriere .dd-schritt-feld{border-top:4px solid var(--karriere)}
.dd-felder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
.dd-feld{min-width:0}
.dd-feld-breit{grid-column:1 / -1}
.dd-feld label{display:block;margin-bottom:6px;font-weight:600;font-size:16px}
.dd-pflicht{color:var(--anker)}
.dd-feld-hilfe{display:block;margin-top:6px;font-size:14px;color:var(--text-leise);line-height:1.45}
input,select,textarea{width:100%;min-height:48px;padding:11px 14px;border:1px solid #A9B0B7;border-radius:var(--r-feld);background:#fff;color:var(--text);font:inherit;font-size:17px}
input:focus,select:focus,textarea:focus{outline:3px solid rgba(22,32,43,.22);outline-offset:0;border-color:var(--anker)}
input::placeholder,textarea::placeholder{color:#6F7A85}
textarea{min-height:120px;resize:vertical}
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231B242E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:40px}

.dd-wahl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.dd-wahl label{position:relative;display:flex;align-items:center;gap:12px;min-height:52px;padding:12px 16px;border:1px solid var(--linie);border-radius:var(--r-knopf);background:#fff;cursor:pointer;font-weight:600;font-size:16px;line-height:1.3;transition:border-color var(--uebergang),background var(--uebergang)}
.dd-wahl label:hover{border-color:#A9B0B7}
.dd-wahl label svg{width:24px;height:24px;color:var(--anker)}
.dd-wahl input{position:absolute;opacity:0;width:1px;height:1px;min-height:0;margin:0}
.dd-wahl label:has(input:checked){border-color:var(--anker);background:var(--grund-warm);box-shadow:inset 0 0 0 1px var(--anker)}
.dd-wahl label:has(input:focus-visible){outline:3px solid var(--anker);outline-offset:2px}
.dd-wahl-zeile{display:flex;flex-wrap:wrap}
.dd-wahl-zeile label{min-height:48px;padding:11px 18px;flex:0 1 auto}
@media (max-width:700px){.dd-wahl{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.dd-felder{grid-template-columns:1fr}.dd-wahl{grid-template-columns:1fr}}

.dd-zustimmung{display:flex;gap:12px;align-items:flex-start;font-size:var(--fs-klein);color:var(--text-leise);line-height:1.5}
.dd-zustimmung input{width:20px;height:20px;min-height:0;margin:2px 0 0;flex:none;accent-color:var(--anker)}
.dd-zustimmung a{color:var(--anker)}
.dd-versprechen{display:flex;align-items:center;gap:12px;padding:16px 18px;background:var(--grund-warm);border-radius:var(--r-knopf);font-weight:600;line-height:1.4}
.dd-versprechen svg{width:24px;height:24px;color:var(--anker);flex:none}
.dd-form-fuss{display:grid;gap:20px;margin-top:20px}
.dd-formularhinweis{margin-top:20px;padding:16px 20px;background:var(--grund-warm);border-left:4px solid var(--anker);border-radius:0 var(--r-karte) var(--r-karte) 0;line-height:1.55}
button.dd-btn{font-family:var(--s-kopf)}
.dd-gruppe{border:0;padding:0;margin:0;min-width:0}
.dd-gruppe legend{padding:0;margin-bottom:8px;font-weight:600;font-size:16px}

/* =========================================================================
   Auftritt beim Hineinscrollen
   Der versteckte Zustand haengt an .dd-js, das ein Einzeiler im <head>
   setzt. Ohne Javascript bleibt alles sichtbar.
   ========================================================================= */
.dd-js .dd-auftritt{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
.dd-js .dd-auftritt.ist-da{opacity:1;transform:none}
.dd-js .dd-auftritt:nth-child(2){transition-delay:.06s}
.dd-js .dd-auftritt:nth-child(3){transition-delay:.12s}

@media (prefers-reduced-motion:reduce){
  .dd-js .dd-auftritt{opacity:1;transform:none;transition:none}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}

/* =========================================================================
   Hauptspalte der Unterseiten, Eckdaten, Sonderformen
   ========================================================================= */
.dd-haupt h2{font-size:clamp(24px,20px + .95vw,32px);margin:0 0 .6em}
.dd-haupt > * + h2{margin-top:2em}
.dd-haupt > p{max-width:68ch}
.dd-haupt .dd-haken{max-width:68ch;margin-bottom:0}
.dd-haupt .dd-fussnote{margin-top:16px}
.dd-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(32px,6vw,88px);align-items:center}
.dd-split-text h2{margin-bottom:16px}
.dd-split-text p{color:var(--text-leise)}
@media (max-width:860px){.dd-split{grid-template-columns:1fr}}

.dd-zeiten{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 24px;margin:0 0 1em;max-width:460px}
.dd-zeiten dt{font-weight:600}
.dd-zeiten dd{margin:0;color:var(--text-leise)}
.dd-eckdaten{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 16px;margin:0;font-size:16px}
.dd-eckdaten dt{color:var(--text-leise)}
.dd-eckdaten dd{margin:0;font-weight:500}