/* ============================================================
   BAUKASTEN – Grund-Stylesheet
   Wird von JEDER Seite geladen (Startseite + alle Unterseiten).

   Beim Anlegen eines Projekts nach assets/style.css kopieren und
   NUR die Farbrollen unten in :root anpassen. Der Rest bleibt.

   Die Farben stehen als ROLLEN da, nicht als Farbnamen: es gibt
   genau eine Handlungsfarbe, alles andere ist neutral. Das ist
   die Regel aus REGELN.md §6 – sie kam aus drei Fehlversuchen.
   ============================================================ */
:root{
  /* --------------------------------------------------------------
     Farbrollen, nicht Farbnamen.

     Zwei Anläufe vorher: erst beide Logofarben großflächig
     gegeneinander, dann dieselben Farben nur sortiert. Beide Male
     blieb der Eindruck "grün-rot", weil es drei farbige
     Flächenrollen gab – Dunkelgrün, Grün und Weinrot.

     Jetzt trägt genau EINE Farbe die Handlung: ein helles Blau auf
     den Knöpfen. Alles andere ist Weiß, Anthrazit oder Haarlinie.
     Die Logofarben kommen nur noch im Logo selbst vor.

     Warum die Knöpfe dunkle Schrift tragen: Ein wirklich helles
     Blau erreicht mit weißer Schrift nur 1,8:1 – unlesbar. Mit
     fast schwarzer Schrift sind es 9,2:1.
     -------------------------------------------------------------- */

  /* Handlungsfarbe – Knöpfe, Fokus, aktiver Zustand. Sonst nichts. */
  --aktion:#8ecbee;
  --aktion-hover:#6fb9e8;
  --aktion-line:#2f8fd0;    /* Kontur des hellen Knopfs – 3,5:1 auf Weiß */
  --aktion-schrift:#12608f; /* Akzentschrift auf Hell – 6,8:1 */
  --aktion-text:#0d2430;    /* Knopfbeschriftung – 9,2:1 auf --aktion */
  --aktion-soft:#eaf6fd;    /* getönte Fläche, sehr sparsam */
  --aktion-dunkel:#8ecbee;  /* dieselbe Farbe auf dunklem Grund: 8,4:1 */

  /* Dunkle Flächen: Topbar, Handlungsband, Fußzeile, Anrufleiste.
     Neutral, damit nichts mit der Handlungsfarbe konkurriert. */
  --dark:#14181b;
  --dark-2:#1e2429;
  --dark-3:#2b3238;
  --auf-dunkel:#c9d0d6;     /* Fließtext auf Dunkel */
  --auf-dunkel-2:#98a2aa;   /* Nebensächliches auf Dunkel */

  --wa:#25d366;

  /* Schrift und Grundflächen */
  --ink:#12161a;
  --ink-2:#1e2429;
  --ink-3:#2b3238;
  --muted:#5d666e;
  --bg:#fff;
  --soft:#f5f6f7;
  --line:#e5e8ea;
  --line-dark:rgba(255,255,255,.15);

  --radius:16px;
  --shadow:0 24px 60px -30px rgba(10,12,14,.28);
  --shadow-karte:0 2px 4px rgba(24,32,26,.04),0 12px 32px -12px rgba(24,32,26,.14);
  --maxw:1100px;

  /* --------------------------------------------------------------
     GESTALTUNG — die Stellschrauben, an denen sich ein Stil-Profil
     festmacht. Vorher standen diese Werte fest im Regelwerk verteilt;
     damit war jede Seite dieselbe Seite in einer anderen Farbe.

     Die Werte hier sind der Hausstil. Ein Profil aus
     werkzeuge/baukasten/stil.mjs ueberschreibt sie im Seitenkopf.
     Wer nichts setzt, bekommt exakt das, was vorher da war.
     -------------------------------------------------------------- */
  --font-text:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-titel:var(--font-text);
  --titel-gewicht:800;
  --titel-laufweite:-.025em;
  --zeilenhoehe:1.7;

  --rhythmus:clamp(46px,6vw,76px);   /* Luft ueber und unter jedem Abschnitt */
  --karten-polster:26px;
  --raster-abstand:22px;

  --radius-knopf:12px;
  --radius-klein:11px;

  /* --------------------------------------------------------------
     FLAECHEN-ROLLEN
     Vorher stand an ~14 Stellen schlicht #fff. Solange es nur einen
     hellen Modus gab, ging das. Fuer den Dunkelmodus braucht jede
     Flaeche einen Namen, sonst muesste man 14 Regeln einzeln
     umbiegen und wuerde eine davon vergessen.
     -------------------------------------------------------------- */
  --flaeche:#fff;                  /* Karten, Kacheln, Aufklapper */
  --kopf-grund:rgba(255,255,255,.95); /* der klebende Kopfbereich */
  --knopf-grund:var(--dark);       /* Flaeche des Standardknopfs */
  --raster-linie:rgba(0,0,0,.05);  /* Textur-Linien, siehe Block ZONEN UND RHYTHMUS */

  /* Die Sternchen in den Bewertungen zeigten auf --signal, das es nie
     gab: die Regel war ungueltig, die Sterne erbten stumm die
     Textfarbe. Gefunden am 05.09.2026 beim Dunkelmodus-Umbau. */
  --signal:#b07800;              /* 3,8:1 auf Weiss */

  /* Hoehe der klebenden Anrufleiste. Steht hier, weil zwei Dinge sie
     brauchen: die Polsterung des body und der Abstand der schwebenden
     Knoepfe. Getrennt gepflegt laufen die beiden Werte irgendwann
     auseinander und die Knoepfe verschwinden unter der Leiste. */
  --leiste-hoehe:76px;
}
/* ============================================================
   DUNKELMODUS
   Umgeschaltet ueber die Klasse .dunkel am <html>. Gesetzt wird sie
   von einem winzigen Skript im Seitenkopf, VOR dem ersten Zeichnen —
   sonst blitzt die helle Seite kurz auf.

   DER TRICK, auf dem alles beruht:
   Fusszeile, CTA-Band, Topbar und dunkle Karten haengen fest an
   --dark. Wuerde man nur --bg dunkel drehen, saessen sie unsichtbar
   auf gleichem Grund — dunkel auf dunkel.
   Stattdessen wird der SEITENGRUND DUNKLER als diese Zonen. Sie
   werden dadurch zur erhabenen statt zur versenkten Flaeche und
   bleiben unterscheidbar — ohne dass eine einzige dieser Regeln
   angefasst werden muss.

        hell                     dunkel
   --bg   #fff                   #0f1316   <- dunkler als --dark
   --dark #14181b                #1e2429   <- heller als der Grund

   Alle Werte hier sind nachgerechnet (WCAG 2.1), nicht geschaetzt.
   ============================================================ */
html.dunkel{
  /* Sagt dem Browser Bescheid. Ohne das bleiben Bildlaufleisten und
     die Felder im Kontaktformular hell — das faellt sofort auf. */
  color-scheme:dark;

  /* KEIN reines Grau. Jeder Neutralton traegt einen Rest der
     Handlungsfarbe (Saettigung ~0,012 im selben Farbtonbereich).
     Das ist der Kniff, den wir am 05.09.2026 an einer sehr gut
     gemachten Seite derselben Branche gemessen haben: dort trennen
     sich die Flaechen sogar SCHWAECHER als bei uns (1,08:1 gegen
     1,19:1) — die Wirkung kommt nicht vom Kontrast, sondern davon,
     dass nichts grau ist. Siehe design-system/referenzen/. */
  --bg:#060a0d;
  --flaeche:#0f1519;
  --soft:#192025;
  --kopf-grund:rgba(6,10,13,.95);

  /* Die drei dunklen Stufen ruecken gemeinsam eine Stufe hoch.
     Einzeln verschoben kippt die Hierarchie: .photo.dark (--dark-2)
     waere sonst gleich hell wie .box.dark. */
  --dark:#0f1519;
  --dark-2:#192025;
  --dark-3:#272f35;

  --ink:#f2f6f8;                      /* 18,3:1 auf Grund */
  --ink-2:#dae1e6;
  --ink-3:#b6bfc6;                    /* 9,9:1 auf der Karte */
  --muted:#919aa0;                    /* 7,0:1 auf Grund */
  --line:#272f35;

  /* --aktion-schrift war ausdruecklich "6,8:1 auf WEISS" gerechnet und
     wird unter anderem fuer den Fokusring benutzt. Auf dunklem Grund
     sind es nur 2,75:1 — der Fokusring waere praktisch unsichtbar.
     --aktion-dunkel ist genau fuer diesen Fall da: 10,6:1. */
  /* Die Handlungsfarbe wird im Dunkeln KRAEFTIGER, nicht blasser.
     Ein aufgehelltes Pastell wirkt auf dunklem Grund kraftlos. */
  --aktion:#6bc3f4;                   /* 10,2:1 auf Grund */
  --aktion-hover:#8ed3f8;
  --aktion-dunkel:#6bc3f4;
  --aktion-text:#0d2430;              /* 8,2:1 auf der Handlungsfarbe */
  --aktion-schrift:#6bc3f4;
  --aktion-soft:rgba(255,255,255,.06);

  /* Der Standardknopf traegt background:var(--dark). Auf dem neuen
     Grund waeren das 1,19:1 — als Flaeche vertretbar, als BEDIENELEMENT
     nicht (dort gelten 3:1). Deshalb eine eigene Knopf-Flaeche: 3,19:1
     gegen den Grund, weisse Schrift darauf 5,85:1. */
  --knopf-grund:#5b656c;              /* 3,3:1 gegen Grund, Weiss darauf 6,0:1 */

  --signal:#e8a300;                   /* 8,6:1 auf Grund */
  --raster-linie:rgba(255,255,255,.05);

  /* Schatten wirken auf Dunkel kaum — dafuer traegt die Kante. */
  --shadow:0 24px 60px -30px rgba(0,0,0,.75);
  --shadow-karte:0 1px 2px rgba(0,0,0,.4),0 12px 32px -12px rgba(0,0,0,.55);
}

/* --- Vier Stellen, die der Rollentausch allein nicht rettet --- */

/* Karten heben sich nur mit 1,19:1 vom Grund ab. Das ist sichtbar,
   aber schwach — deshalb traegt im Dunkelmodus die Kante die Trennung. */
html.dunkel .card,
html.dunkel .box,
html.dunkel .step,
html.dunkel .faq details,
html.dunkel .linkgrid a,
html.dunkel .factor,
html.dunkel .arealist span,
html.dunkel .quote{border-color:var(--line)}

/* Der helle Knopf steht in der Anrufleiste und in dunklen Karten auf
   ohnehin dunklem Grund. Mit --flaeche waere er dort unsichtbar. */
html.dunkel .box.dark .btn-outline,
html.dunkel .mobilebar .btn-outline{
  background:transparent;color:#fff;border-color:rgba(255,255,255,.32)}

/* Der Hinweiskasten bleibt bewusst cremefarben — er soll auffallen.
   Nur die fette Schrift darin zeigte auf --ink und waere im
   Dunkelmodus hell auf Creme geworden, also unlesbar. */
html.dunkel .offen b{color:#4a3a0d}   /* 10,4:1 auf dem Cremegrund */

/* Der Vorschaubalken soll auffallen, aber im Dunkelmodus nicht die
   ganze Seite ueberstrahlen — creme auf fast schwarz blendet.
   Gedaempfte Fassung mit derselben Warnwirkung. */
html.dunkel .preview-banner{
  background:#241d09;color:#f0d089;border-bottom-color:#3d3212}

/* Der Textmarker legt die Handlungsfarbe UNTER den Text. Im
   Dunkelmodus ist der Text hell — hell auf Hellblau ginge nicht.
   Also nur noch ein getoenter Streifen statt der vollen Farbe. */
html.dunkel .hl{background:linear-gradient(transparent 62%,rgba(255,255,255,.14) 62%)}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
body{font-family:var(--font-text);color:var(--ink);line-height:var(--zeilenhoehe);background:var(--bg);-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
a{color:var(--ink)}
img{max-width:100%;height:auto;display:block}
section{padding:var(--rhythmus) 0}

/* Abgesetzte Flaeche — <section class="alt">.
   -------------------------------------------------------------
   Befund 08.09.2026, im Browser gemessen: Diese Klasse stand im
   Klassen-Wortschatz (LIESMICH.md) und wurde in 87 gebauten Seiten
   benutzt, hatte aber KEINE einzige CSS-Regel. section.alt und ihre
   Nachbarn hatten exakt denselben Grund — der Wechsel, den die Klasse
   verspricht, fand nie statt. Genau der monotone Scroll aus
   REGELN.md 4d, nur diesmal ungewollt.

   Bewusst SCHWAECHER als .zone-erhaben: die erhabene Zone hebt genau
   einen Abschnitt heraus und darf hoechstens einmal pro Seite kommen.
   .alt ist der leise Taktwechsel dazwischen und steht zwei- bis
   dreimal auf einer Seite. Gleiche Staerke wuerde beide entwerten.

   Steht bewusst VOR dem Zonen-Block: bei <section class="alt zone-erhaben">
   gewinnt so die erhabene Zone, weil sie spaeter in der Datei steht.
   Beide Klassen haben dieselbe Spezifitaet — die Reihenfolge entscheidet. */
.alt{background:#fafbfb}                                        /* Rueckfall */
.alt{background:color-mix(in srgb,var(--soft) 55%,var(--bg))}
html.dunkel .alt{background:#0b1114}                            /* Rueckfall */
html.dunkel .alt{background:color-mix(in srgb,var(--flaeche) 70%,var(--bg))}
h1,h2,h3{font-family:var(--font-titel);letter-spacing:var(--titel-laufweite);font-weight:var(--titel-gewicht);line-height:1.15}
h2{font-size:clamp(27px,4.3vw,46px);margin-bottom:16px}
h3{font-size:19px;margin-bottom:8px}
p{margin-bottom:14px}
/* Die Sprungmarke ueber einer Ueberschrift — kleine versale Zeile in
   der Handlungsfarbe. Bisher gab es sie nur INNERHALB von .shot-card;
   im Hero stand sie unformatiert da. Aufgefallen am 05.09.2026 beim
   Vergleich mit einer Referenzseite, die sie ueber jeder Sektion
   einsetzt: sie ordnet die Seite, ohne eine Farbflaeche zu kosten. */
.eyebrow{display:block;font-size:12px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--aktion-schrift);margin-bottom:12px}

.lead{color:var(--muted);font-size:clamp(16px,2vw,18.5px);max-width:680px}
.skiplink{position:absolute;left:-9999px;top:0;z-index:200;background:var(--dark);color:#fff;padding:12px 20px;border-radius:0 0 10px 0;font-weight:700}
.skiplink:focus{left:0}
:focus-visible{outline:3px solid var(--aktion-schrift);outline-offset:3px;border-radius:6px}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--knopf-grund);color:#fff;font-weight:700;padding:15px 26px;border-radius:var(--radius-knopf);transition:.18s;font-size:16px;border:none;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.btn-primary{background:var(--aktion);color:var(--aktion-text);box-shadow:inset 0 0 0 1px var(--aktion-line)}
.btn-primary:hover{background:var(--aktion-hover);color:var(--aktion-text)}
.btn-wa{background:var(--wa);color:#fff}
.btn-wa:hover{background:#1fb356;color:#fff}
.btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.32)}
.btn-ghost:hover{background:rgba(255,255,255,.09);color:#fff}
.btn-outline{background:var(--flaeche);color:var(--ink);border:1.5px solid var(--line)}
.btn-outline:hover{border-color:var(--ink);background:var(--soft);color:var(--ink)}
.btn-big{font-size:19px;padding:19px 34px;border-radius:calc(var(--radius-knopf) + 2px)}

/* ---------- Kopf ---------- */
.preview-banner{background:#f4efd9;color:#6b5518;border-bottom:1px solid #e2d7ae;text-align:center;font-weight:700;font-size:13px;padding:8px 14px}
.topbar{background:var(--dark);color:var(--auf-dunkel);font-size:13px}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;min-height:40px;gap:14px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.topbar strong{color:#fff}
.topbar .pulse{display:inline-flex;align-items:center;gap:7px;font-weight:700;color:#fff}
/* Ruhiger Punkt, kein Pulsieren. Ein pulsierender Punkt liest sich wie
   "jetzt live / jetzt geöffnet" – das behauptet die Seite bewusst nicht,
   weil die Öffnungszeiten unvollständig und Feiertage unbekannt sind. */
.topbar .pulse:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--aktion)}
@media(max-width:700px){.topbar .hide-sm{display:none}}

header{position:sticky;top:0;z-index:60;background:var(--kopf-grund);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:16px}
.logo{display:flex;align-items:center;gap:11px;font-weight:800;font-size:18.5px;letter-spacing:-.03em;text-decoration:none;color:var(--ink);line-height:1.15}
.logo .mark{width:40px;height:40px;flex:0 0 40px;border-radius:var(--radius-klein);background:var(--dark);display:grid;place-items:center;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.09)}
.logo small{display:block;font-size:11.5px;font-weight:600;color:var(--muted);letter-spacing:.02em}
.menu{display:flex;align-items:center;gap:2px;list-style:none}
.menu a{padding:9px 11px;border-radius:calc(var(--radius-klein) - 2px);font-weight:600;font-size:15px;color:var(--muted);text-decoration:none;white-space:nowrap}
.menu a:hover{color:var(--ink);background:var(--soft)}
.nav-cta{display:flex;align-items:center;gap:10px}
.nav-cta .btn{padding:12px 18px;font-size:15px}
.burger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;background:none;border:none;cursor:pointer;padding:9px;min-width:44px;min-height:44px}
.burger span{width:24px;height:2.5px;background:var(--ink);border-radius:2px;transition:.25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
/* ---------- Leistungen-Menü ----------
   Aufklapper nach dem Disclosure-Muster: ein normaler Link plus ein
   eigener Knopf. Ohne JavaScript ist der Knopf ausgeblendet und der
   Link führt auf die Übersicht – kein totes Bedienelement. */
.nojs .drop-toggle{display:none}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

.has-drop{position:relative;display:flex;align-items:center}
.drop-toggle{display:grid;place-items:center;width:32px;height:36px;background:none;border:none;
  cursor:pointer;color:var(--muted);border-radius:calc(var(--radius-klein) - 2px);margin-left:-6px}
.drop-toggle:hover{color:var(--ink);background:var(--soft)}
.arw{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s}
.has-drop.open .arw{transform:rotate(225deg) translate(-2px,-2px)}

.drop{position:absolute;top:calc(100% + 12px);left:-10px;z-index:50;
  background:var(--flaeche);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);
  padding:10px;width:min(640px,94vw)}
.drop-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.drop-grid a{display:block;min-width:0;padding:11px 13px;border-radius:var(--radius-klein);text-decoration:none;color:var(--ink)}
.drop-grid a:hover{background:var(--soft)}
.drop-grid b{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.drop-grid span{display:block;font-size:12.5px;color:var(--muted);line-height:1.4;margin-top:1px}
.drop-alle{grid-column:1 / -1;border-top:1px solid var(--line);border-radius:0 0 11px 11px;margin-top:4px;padding-top:12px !important}
.drop-alle b{color:var(--aktion-schrift)}

@media(max-width:1000px){
  /* Menü hängt am Header selbst, nicht am Viewport – sonst schiebt es sich
     über den Vorschau-Banner und die Topbar.
     Die Höhe wird vom Skript nicht gebraucht: dvh rechnet die Adressleiste
     des Handy-Browsers mit, und --kopf trägt die tatsächliche Unterkante
     des Kopfbereichs (Vorschaubalken + Topbar + Navigation). Vorher stand
     hier pauschal 72px – ein aufgeklapptes Untermenü lief unten heraus. */
  .menu{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--flaeche);padding:8px 24px 20px;border-bottom:1px solid var(--line);box-shadow:var(--shadow);
    z-index:40;max-height:calc(100dvh - var(--kopf, 112px));overflow-y:auto;overscroll-behavior:contain;
    opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .22s,transform .22s,visibility .22s}
  .menu.open{opacity:1;visibility:visible;transform:none}
  .menu a{display:block;width:100%;padding:15px 2px;font-size:17px;color:var(--ink);border-bottom:1px solid var(--line);border-radius:0}
  .menu li:last-child a{border-bottom:none}
  .nav-cta .btn{display:none}
  .burger{display:flex}

  /* Auf dem Handy steht das Untermenü im Fluss, nicht schwebend –
     sonst läge es über der Scrollfläche statt darin. */
  .has-drop{display:block}
  .has-drop > a{padding-right:52px}
  .drop-toggle{position:absolute;top:0;right:0;width:52px;height:52px;margin:0}
  .drop{position:static;width:auto;border:none;box-shadow:none;border-radius:0;
    padding:2px 0 10px;background:var(--soft);margin:0 -24px;padding-left:24px;padding-right:24px}
  .drop-grid{grid-template-columns:1fr;gap:0}
  .drop-grid a{padding:13px 2px;border-bottom:1px solid var(--line);border-radius:0}
  .drop-grid a:last-child{border-bottom:none}
  .drop-grid span{font-size:13px}
  .drop-alle{margin-top:0;padding-top:13px !important}
}
.crumb{background:var(--soft);border-bottom:1px solid var(--line);font-size:13px;color:var(--muted)}
.crumb .wrap{padding-top:11px;padding-bottom:11px}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--ink);text-decoration:underline}

/* ---------- Hero der Startseite ----------
   Heller Grund, Text links, Foto rechts. Die frühere dunkelgrüne
   Vollfläche mit rotem Knopf und rosa Akzentschrift ist ersetzt:
   zu schwer, und die beiden Logofarben haben sich gebissen. */
.hero{position:relative;background:var(--flaeche);
  padding:clamp(38px,5.5vw,66px) 0 clamp(44px,6vw,76px);border-bottom:1px solid var(--line)}
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(32px,4vw,56px);align-items:center}
/* Kachelraster — Abstand kommt aus dem Stil-Profil. */
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--raster-abstand)}
@media(max-width:920px){.hero-grid{grid-template-columns:1fr;gap:30px}}

.badge{display:inline-flex;align-items:center;background:var(--soft);
  border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:6px 14px;
  font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}

/* Große Schrift verträgt engere Laufweite als kleine – deshalb hier
   ein anderer Wert als im Fließtext (Apple, „Details of UI Typography"). */
.hero h1{font-size:clamp(36px,6.4vw,74px);line-height:1.01;margin:20px 0 18px;
  letter-spacing:-.038em;color:var(--ink)}
.hero h1 em{font-style:normal;color:var(--aktion-schrift)}
.hero .sub{color:var(--muted);font-size:clamp(16.5px,2vw,19.5px);line-height:1.62;
  max-width:560px;margin-bottom:28px}
.hero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:30px}

.trustrow{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:11px 30px;border-top:1px solid var(--line);padding-top:22px;font-size:14px;color:var(--muted)}
@media(max-width:520px){.trustrow{grid-template-columns:1fr}}
.trustrow b{display:block;color:var(--ink);font-weight:700}

/* Foto rechts, mit einer kleinen weißen Karte, die halb darüber liegt.
   Die Karte trägt die Telefonnummer – der Blick landet erst auf der
   Arbeit, dann auf der Nummer. */
.hero-shot{position:relative;margin:0}
.hero-shot picture,.hero-shot img{width:100%;border-radius:20px;display:block}
.hero-shot img{aspect-ratio:4/5;object-fit:cover;box-shadow:var(--shadow)}
@media(max-width:920px){.hero-shot img{aspect-ratio:16/10}}

.shot-card{position:absolute;left:-14px;bottom:-26px;right:36px;background:var(--flaeche);
  border:1px solid var(--line);border-radius:16px;padding:18px 20px;box-shadow:var(--shadow-karte)}
.shot-card .eyebrow{display:block;font-size:11.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.shot-card .tel{display:inline-block;font-size:clamp(23px,2.6vw,28px);font-weight:800;
  letter-spacing:-.03em;color:var(--ink);text-decoration:none;line-height:1.15}
.shot-card .tel:hover{color:var(--aktion-schrift)}
.shot-card p{font-size:13.5px;color:var(--muted);line-height:1.5;margin:6px 0 0}
@media(max-width:920px){
  .hero-shot{margin-bottom:34px}
  .shot-card{left:12px;right:12px;bottom:-24px}
}
@media(max-width:420px){.shot-card{position:static;margin-top:14px;left:auto;right:auto}
  .hero-shot{margin-bottom:0}}

/* ---------- Unterseiten-Hero ----------
   Ebenfalls hell. Vorher eine dunkelgrüne Vollfläche mit rotem Knopf
   darauf – genau die Kombination, die nicht funktioniert. Jetzt trägt
   die Seite durchgehend hellen Grund, Dunkelgrün bleibt Kopfzeile,
   Handlungsband und Fußzeile vorbehalten. */
.phero{position:relative;background:var(--flaeche);
  border-bottom:1px solid var(--line);padding:clamp(34px,4.5vw,54px) 0 clamp(30px,4vw,46px)}
.phero .kicker{display:inline-block;background:var(--soft);border:1px solid var(--line);
  border-radius:999px;padding:6px 14px;font-size:12px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted)}
.phero h1{font-size:clamp(29px,4.7vw,47px);margin:16px 0 16px;letter-spacing:-.034em;color:var(--ink)}
.phero .sub{color:var(--muted);font-size:clamp(16px,2vw,19px);line-height:1.6;max-width:660px;margin-bottom:26px}
.phero .cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:32px}
.phero .facts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
  border-top:1px solid var(--line);padding-top:24px}
.phero .facts div{font-size:14px;color:var(--muted)}
.phero .facts b{display:block;font-size:19px;color:var(--ink);font-weight:800;
  letter-spacing:-.02em;margin-bottom:2px;line-height:1.25}
@media(max-width:640px){.phero .facts{grid-template-columns:1fr;gap:12px}}

/* ---------- Karten / Raster ---------- */
.grid2{display:grid;grid-template-columns:1.15fr .85fr;gap:38px;align-items:start}
@media(max-width:860px){.grid2{grid-template-columns:1fr}}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cards{grid-template-columns:1fr}}
.card{background:var(--flaeche);border:1px solid var(--line);border-radius:var(--radius);padding:24px;text-decoration:none;color:var(--ink);display:flex;flex-direction:column;transition:.18s}
a.card:hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:var(--shadow)}
a.card:hover .ico{background:var(--aktion);border-color:var(--aktion-line);color:var(--aktion-text)}
.card .ico{width:46px;height:46px;border-radius:12px;background:var(--soft);border:1px solid var(--line);color:var(--muted);display:grid;place-items:center;margin-bottom:15px;transition:.18s}
.card p{font-size:14.5px;color:var(--muted);margin:0}
.card .more{display:inline-block;margin-top:auto;padding-top:14px;font-size:14px;font-weight:700;color:var(--ink)}

.box{background:var(--flaeche);border:1px solid var(--line);border-radius:var(--radius);padding:var(--karten-polster)}
.box.soft{background:var(--soft)}
.box.dark{background:var(--dark);color:#fff;border-color:var(--dark)}
.box.dark h3{color:#fff}
.box.dark p{color:var(--auf-dunkel)}
.ticks{list-style:none;margin:0}
.ticks li{position:relative;padding-left:28px;margin-bottom:9px;font-size:15.5px}
.ticks li:before{content:"✓";position:absolute;left:0;top:0;color:var(--aktion-schrift);font-weight:800}
.ticks.no li:before{content:"✕";color:var(--muted)}
.box.dark .ticks li:before{color:var(--aktion)}

/* ---------- Ablauf ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:12px;list-style:none;padding-left:0}
/* list-style:none ist noetig, sobald .steps ein <ol> ist — sonst stehen die
   Ziffern doppelt: einmal als Listenmarke neben der Kachel, einmal als
   Plakette .n darin. Gefunden am 05.09.2026 im Screenshot der Dachdecker-
   Demo; keine der Messungen davor hat es bemerkt.
   Bei einem <ol class="steps"> gehoert role="list" ins HTML: Safari nimmt
   einer Liste ohne Marken sonst die Listen-Semantik, und VoiceOver sagt
   dann nicht mehr an, dass es vier Schritte sind. */
@media(max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}
.step{background:var(--flaeche);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.step .n{width:36px;height:36px;border-radius:var(--radius-klein);background:var(--dark);color:#fff;display:grid;place-items:center;font-weight:800;margin-bottom:13px}
.step p{font-size:14.5px;color:var(--muted);margin:0}

/* ---------- Fotoplätze (bis echte Bilder da sind) ---------- */
.photo{position:relative;border-radius:var(--radius);overflow:hidden;border:1px dashed var(--line);background:var(--soft);
  min-height:230px;display:grid;place-items:center;text-align:center;padding:26px}
.photo .ph{max-width:280px}
.photo .ph b{display:block;font-size:15px;margin-bottom:4px}
.photo .ph span{font-size:13px;color:var(--muted)}
.photo .ph .ico{font-size:28px;display:block;margin-bottom:8px;opacity:.55}
.photo.dark{border-color:rgba(255,255,255,.22);background:var(--dark-2)}
.photo.dark .ph b{color:#fff}
.photo.dark .ph span{color:var(--auf-dunkel-2)}
.photo.tall{min-height:340px}

/* ---------- FAQ ---------- */
.faq details{background:var(--flaeche);border:1px solid var(--line);border-radius:14px;margin-bottom:11px;overflow:hidden}
.faq details[open]{border-color:var(--ink);box-shadow:var(--shadow)}
.faq summary{padding:18px 22px;font-weight:700;font-size:16px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";font-size:26px;font-weight:400;line-height:1;color:var(--muted);transition:.2s}
.faq details[open] summary:after{transform:rotate(45deg)}
.faq .a{padding:0 22px 18px;color:var(--muted);font-size:15.5px}
.faq .a p:last-child{margin-bottom:0}

/* ---------- Link-Raster ---------- */
.linkgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:820px){.linkgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.linkgrid{grid-template-columns:1fr}}
.linkgrid a{display:block;background:var(--flaeche);border:1px solid var(--line);border-radius:12px;padding:15px 17px;font-weight:700;color:var(--ink);text-decoration:none;transition:.18s}
.linkgrid a:hover{border-color:var(--ink);transform:translateY(-2px);box-shadow:var(--shadow)}
.linkgrid span{display:block;font-size:13px;color:var(--muted);font-weight:500;margin-top:3px}

/* ---------- Preis-Faktoren (statt erfundener Preisliste) ---------- */
.factors{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:20px}
@media(max-width:700px){.factors{grid-template-columns:1fr}}
.factor{background:var(--flaeche);border:1px solid var(--line);border-radius:14px;padding:20px 22px}
.factor b{display:block;margin-bottom:4px}
.factor span{font-size:14.5px;color:var(--muted)}

/* ---------- CTA-Band ---------- */
.cta-band{background:var(--dark);color:#fff;text-align:center;position:relative;overflow:hidden}
/* Farbschleier entfernt – das Handlungsband ist eine flache Fläche. */
.cta-band .wrap{position:relative;z-index:1}
.cta-band h2{color:#fff}
.cta-band p{color:var(--auf-dunkel);max-width:640px;margin:0 auto 24px}
.cta-band .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---------- Einsatzgebiet ---------- */
.region{background:var(--soft)}
.arealist{display:flex;flex-wrap:wrap;gap:9px;margin-top:18px}
.arealist span{background:var(--flaeche);border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:14.5px;font-weight:600}

/* ---------- Kontaktzeile ---------- */
.contactgrid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:820px){.contactgrid{grid-template-columns:1fr}}
.dl{list-style:none;margin:0}
.dl li{display:flex;flex-wrap:wrap;gap:4px 14px;padding:12px 0;border-bottom:1px solid var(--line);font-size:15.5px}
.dl li:last-child{border-bottom:none}
.dl b{flex:0 0 128px;color:var(--muted);font-weight:600}
/* Lange Werte (E-Mail-Adresse plus Hinweis) dürfen umbrechen statt über den
   Bildschirmrand zu laufen. Auf dem Handy steht das Label über dem Wert. */
.dl li>:not(b){min-width:0;overflow-wrap:anywhere}
@media(max-width:520px){.dl b{flex:0 0 100%}}
.box.dark .dl li{border-color:rgba(255,255,255,.12)}
.box.dark .dl b{color:var(--auf-dunkel-2)}
.box.dark a:not(.btn){color:var(--aktion)}
/* Buttons behalten in dunklen Boxen ihre eigene Schriftfarbe – sonst gelb auf gelb */
.box.dark .btn{color:#fff}
/* btn-outline hat einen weißen Grund – dort gehört dunkle Schrift hin.
   btn-primary hat einen weinroten Grund und behält weiße Schrift.
   Vorher galt die dunkle Schrift für beide: auf Weinrot ergab das 2,1:1. */
.box.dark .btn-outline{color:var(--ink)}
/* Der Hauptknopf ist hellblau – dort gehört dunkle Schrift hin, egal auf
   welchem Untergrund der Knopf steht. WhatsApp-Grün trägt weiße Schrift. */
.box.dark .btn-primary{color:var(--aktion-text)}
.box.dark .btn-wa{color:#fff}

/* ---------- Fußzeile ---------- */
footer{background:var(--dark);color:var(--auf-dunkel-2);font-size:14px;padding:52px 0 26px}
.foot{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:28px;padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.1)}
@media(max-width:860px){.foot{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.foot{grid-template-columns:1fr}}
footer .logo{color:#fff;margin-bottom:12px}
footer .logo .mark{background:var(--dark-3)}
footer h4{color:#fff;font-size:14px;margin-bottom:12px}
footer a{display:block;padding:5px 0;color:var(--auf-dunkel);text-decoration:none}
footer a:hover{color:var(--aktion)}
.copyright{padding-top:22px;font-size:13px;color:var(--auf-dunkel-2);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}

/* ---------- Feste Notruf-Leiste mobil ---------- */
.mobilebar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;background:var(--dark);border-top:1px solid var(--dark-3);padding:9px 12px calc(9px + env(safe-area-inset-bottom));gap:10px}
.mobilebar a{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:14px;border-radius:var(--radius-klein);font-weight:800;font-size:15.5px;text-decoration:none}
.mobilebar .wa{background:var(--wa);color:#fff}
@media(max-width:900px){.mobilebar{display:flex}body{padding-bottom:var(--leiste-hoehe)}}

/* ---------- Kleinkram ---------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.note{font-size:13px;color:var(--muted);margin-top:10px}
.hl{background:linear-gradient(transparent 62%,var(--aktion) 62%);padding:0 2px}

/* ============================================================
   ERGÄNZUNGEN FÜR DIESES PROJEKT
   Drei-Spuren-Block, Karriere-Strang, Bewerbungs-Funnel,
   Bildergalerie und die Karte mit Zustimmungsschritt.
   ============================================================ */

/* ---------- Karte mit Zustimmungsschritt ---------- */
/* Der Zustimmungskasten für die Karte ist .calembed – siehe oben.
   Der frühere zusätzliche Wrapper .map-consent ist entfallen: Er ergab
   einen Kasten im Kasten und schob den Inhalt 1 px über den Bildschirmrand. */

/* ============================================================
   TOUCH-TARGETS
   Google empfiehlt für Tippziele mindestens 48 × 48 px mit 8 px
   Abstand. Geprüft am 31.08.2026 bei 390 px Breite: Fußzeilen-
   Links lagen bei 34 px, der Menü-Knopf bei 36 px.
   ============================================================ */
@media(max-width:900px){
  footer .foot a{min-height:44px;display:flex;align-items:center}
  .copyright a{padding:10px 4px;display:inline-flex;align-items:center;min-height:44px}
  .burger{padding:13px 11px}
  .callcard .tel{padding:6px 0;display:inline-block}
  .ratingbar .meta a{padding:6px 0;display:inline-block}
}
.copyright .inline-link{display:inline-block}
@media(max-width:900px){
  .copyright .inline-link{padding:12px 6px;min-height:44px;display:inline-flex;align-items:center}
  .box .dl a,.box.dark .dl a{padding:8px 0;display:inline-block;min-height:44px}
  .ratingbar .meta a{padding:12px 0;min-height:44px;display:inline-flex;align-items:center}
}

/* ============================================================
   FOTOPLATZ
   Sichtbare Lücke statt schwaches Bild. Ein unscharfes
   Videostandbild schadet dem Eindruck mehr als ein ehrlicher
   Platzhalter.
   ============================================================ */
.fotoplatz{margin:0;border:1.5px dashed var(--line);border-radius:16px;background:var(--soft);
  display:grid;place-items:center;text-align:center;padding:34px 26px;min-height:250px}
.fotoplatz.hoch{min-height:340px}
.fp-inhalt{max-width:340px;color:var(--muted)}
.fp-inhalt svg{color:var(--aktion-schrift);margin-bottom:12px}
.fp-inhalt b{display:block;font-size:16.5px;color:var(--ink);margin-bottom:5px}
.fp-inhalt span{display:block;font-size:14.5px;line-height:1.55}
.fp-inhalt em{display:block;margin-top:12px;font-size:12.5px;font-style:normal;letter-spacing:.02em;
  color:var(--gedaempft,var(--auf-dunkel-2));border-top:1px solid var(--line);padding-top:11px}


/* ============================================================
   ERGÄNZUNGEN FÜR DIESES PROJEKT
   Öffnungszeiten-Tafel, Mietkatalog, Zwei-Spuren-Kopf.
   ============================================================ */

/* ---------- Öffnungszeiten ----------
   Das ist hier kein Beiwerk, sondern ein Verkaufsargument: Der Betrieb
   hat nachmittags, abends und am Wochenende offen – also genau dann,
   wenn normale Werkstätten und Verleihe zu haben. Deshalb steht die
   Tafel prominent und nicht klein in der Fußzeile. */
.hours{list-style:none;margin:0}
.hours li{display:flex;justify-content:space-between;gap:18px;padding:11px 0;border-bottom:1px solid var(--line);font-size:15.5px}
.hours li:last-child{border-bottom:none}
.hours li b{font-weight:600;color:var(--muted)}
.hours li span{font-weight:700;font-variant-numeric:tabular-nums}
.hours li[data-heute]{background:var(--aktion-soft);margin:0 -12px;padding-left:12px;padding-right:12px;border-radius:calc(var(--radius-klein) - 2px)}
.hours li[data-heute] b{color:var(--ink)}
.box.dark .hours li{border-color:rgba(255,255,255,.12)}
.box.dark .hours li b{color:var(--auf-dunkel-2)}
.box.dark .hours li span{color:#fff}
/* Erst ein schlichter Rueckfall, dann die getoente Variante: aeltere
   Browser ohne color-mix ignorieren die zweite Zeile und behalten die erste. */
.box.dark .hours li[data-heute]{background:rgba(255,255,255,.10)}
.box.dark .hours li[data-heute]{background:color-mix(in srgb,var(--aktion-dunkel) 14%,transparent)}
.box.dark .hours li[data-heute] b{color:#fff}

/* ---------- Hinweiszeile über offene Angaben ---------- */
.offen{border-left:3px solid #c9a227;background:#fdf8e8;border-radius:0 12px 12px 0;
  padding:14px 18px;font-size:14.5px;color:#6b5518;margin-top:18px}
.offen b{color:var(--ink)}

/* ---------- Kontaktformular ----------
   Das Formular ist neu gegenüber den Vorgängerprojekten: dort gab es nur
   mailto:-Links, die auf dem Handy oft ins Leere laufen. Die Felder nutzen
   die vorhandenen .fields/.field-Klassen. */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{display:flex;gap:11px;align-items:flex-start;margin-top:18px;font-size:14.5px;color:var(--muted);line-height:1.55}
.consent input{width:20px;height:20px;flex:0 0 20px;margin-top:2px;accent-color:var(--aktion-line)}
.consent a{color:var(--ink);font-weight:700}
.formfoot{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:20px}
.formfoot .btn{flex:0 0 auto}
.formfoot .note{margin-top:0;flex:1 1 220px}
.danke{text-align:center;max-width:620px;margin:0 auto}
.danke .haken{width:74px;height:74px;border-radius:50%;background:var(--aktion-soft);color:var(--aktion-schrift);
  display:flex;align-items:center;justify-content:center;font-size:38px;font-weight:800;margin:0 auto 22px}


/* ============================================================
   BEWERTUNGEN
   Diese Klassen erzeugt bewertungsBlock() im Baukasten. Ohne sie
   rendert der Block als unformatierter Text - das war beim ersten
   Ende-zu-Ende-Test am 05.09.2026 der Fall.
   Herkunft: aus einem frueheren Projekt uebernommen.
   ============================================================ */
.ratingbar {display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:var(--soft);border:1px solid var(--line);border-radius:var(--radius);padding:20px 24px;margin-bottom:26px}
.ratingbar .score {font-size:38px;font-weight:800;letter-spacing:-.03em;line-height:1}
.ratingbar .meta {font-size:14.5px;color:var(--muted)}
.ratingbar .meta a {padding:6px 0;display:inline-block}
.ratingbar .meta a {padding:12px 0;min-height:44px;display:inline-flex;align-items:center}
.stars {color:var(--signal);letter-spacing:1px}
.quote .stars {font-size:15px;margin-bottom:10px}
.quotes {display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px} /* 27.09.2026: vorher repeat(3,1fr) — lief bei 390 px ueber den Rand (Quedlinburg) */
.quote {background:var(--flaeche);border:1px solid var(--line);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column}
.quote p {font-size:15.5px;margin-bottom:14px}
.quote .who {margin-top:auto;font-size:13.5px;color:var(--muted);border-top:1px solid var(--line);padding-top:12px}
.quote .who b {color:var(--ink)}

/* ============================================================
   ABSCHNITTS-RHYTHMUS
   .schmal begrenzt Lesetexte auf eine angenehme Zeilenlaenge.
   ============================================================ */
.wrap.schmal{max-width:760px}

/* ============================================================
   BEWEGUNG
   Gesteuert wird in site.js ueber Motion. Hier steht nur der
   Ausgangszustand und die Notbremse.

   [data-reveal] startet verborgen — sonst blitzt der Inhalt kurz
   auf, bevor das Skript ihn versteckt. Sichtbar wird es entweder
   durch die Einblend-Animation ODER durch eine der beiden Klassen
   unten. Ohne diese Regeln bliebe die Seite leer, wenn JavaScript
   aus ist oder motion.js fehlt — deshalb sind sie Pflicht.
     .nojs            kein JavaScript (site.js entfernt die Klasse)
     .keine-bewegung  Motion fehlt ODER "Bewegung reduzieren" ist an
   ============================================================ */
[data-reveal]{opacity:0}

/* !important ist hier kein Schlamperei-Zeichen, sondern noetig: faellt
   Motion mitten im Lauf aus, steht opacity:0 bereits als Inline-Stil am
   Element — und ein Inline-Stil schlaegt jede normale Klassenregel.
   Ohne !important bliebe die Sektion trotz Notbremse unsichtbar. */
html.nojs [data-reveal],
html.keine-bewegung [data-reveal]{opacity:1 !important;transform:none !important}

/* Wer Bewegung reduziert haben will, meint auch die CSS-Uebergaenge —
   nicht nur die per JavaScript. Ganz auf 0 wird bewusst nicht gesetzt:
   ein sehr kurzer Uebergang bleibt als Rueckmeldung erhalten, ohne zu
   schwingen. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important
  }
}

/* ============================================================
   SCHWEBENDE KNOEPFE — Hell/Dunkel und "Nach oben"
   Ein senkrechter Stapel unten rechts.

   Zwei Dinge, die hier keine Kuer sind:

   1. Der "Nach oben"-Knopf wird mit visibility:hidden versteckt,
      NICHT mit opacity:0. Zwei Gruende: er behaelt seinen Platz,
      also springt der Theme-Knopf nie — und er faellt gleichzeitig
      aus der Tabreihenfolge, ist also fuer die Tastatur nicht
      erreichbar, solange man ihn nicht sehen kann.

   2. Der Stapel liegt bei z-index 65: ueber dem klebenden Kopf (60),
      aber UNTER der Anrufleiste (70). Falls die Abstandsrechnung auf
      einem Geraet doch nicht aufgeht, gewinnt immer die Anrufleiste —
      sie ist der wichtigste Kontaktweg, nicht der Umschalter.
   ============================================================ */
.schwebeknoepfe{
  position:fixed;right:20px;z-index:65;
  bottom:calc(20px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:10px}

.schwebeknopf{
  width:48px;height:48px;                    /* ueber den geforderten 44 */
  display:flex;align-items:center;justify-content:center;
  background:var(--flaeche);color:var(--ink);
  border:1px solid var(--line);border-radius:999px;
  box-shadow:var(--shadow-karte);
  cursor:pointer;padding:0;
  transition:background .18s,border-color .18s,transform .18s}
.schwebeknopf:hover{border-color:var(--aktion-line);transform:translateY(-2px)}
.schwebeknopf:active{transform:translateY(0)}
.schwebeknopf svg{width:22px;height:22px;display:block}

/* Ohne JavaScript kann der Umschalter nichts tun — dann kommt er weg,
   statt als toter Knopf dazustehen. */
html.nojs .schwebeknopf[data-thema]{display:none}

/* Sonne oder Mond — nie beide.
   WICHTIG, weil es genau einmal falsch war: Das HTML-Attribut `hidden`
   wirkt bei SVG-Elementen NICHT. Die Regel [hidden]{display:none} im
   Browser gilt nur fuer HTML, und `element.hidden = true` setzt bei
   einem <g> nicht einmal das Attribut. Ergebnis waren Sonne UND Mond
   uebereinander — ein Knaeuel. Gefunden im Browser am 05.09.2026.
   Deshalb haengt die Sichtbarkeit hier an der Klasse am <html>, nicht
   an JavaScript. Nebeneffekt: das Symbol stimmt schon beim ersten
   Zeichnen, noch bevor site.js ueberhaupt laeuft. */
html:not(.dunkel) .schwebeknopf [data-mond]{display:none}
html.dunkel .schwebeknopf [data-sonne]{display:none}

/* Der Pfeil belegt seinen Platz auch unsichtbar. */
.schwebeknopf[data-nach-oben]{visibility:hidden;opacity:0;
  transition:opacity .2s,visibility .2s,transform .18s}
.schwebeknopf[data-nach-oben].sichtbar{visibility:visible;opacity:1}

/* Auf dem Handy sitzt darunter die Anrufleiste. Die 12px sind Luft
   zwischen Knopf und Leiste, damit sich nichts beruehrt. */
@media(max-width:900px){
  .schwebeknoepfe{right:16px;
    bottom:calc(var(--leiste-hoehe) + env(safe-area-inset-bottom) + 12px)}
}

/* Auf Papier haben schwebende Knoepfe nichts verloren. */
@media print{.schwebeknoepfe{display:none}}

/* Wer Bewegung reduziert haben will, meint auch den Farbwechsel. */
@media (prefers-reduced-motion: reduce){
  .schwebeknopf{transition:none}
  .schwebeknopf:hover{transform:none}
}

/* ============================================================
   WIRKUNG AUF DUNKLEM GRUND
   Drei Techniken, gemessen am 05.09.2026 an einer sehr gut
   gemachten Seite derselben Branche. Alle drei kosten nichts:
   kein Bild, keine Bibliothek, kein zusaetzlicher Ladevorgang.
   Volle Analyse: design-system/referenzen/bredhauer.md
   ============================================================ */

/* 1. STIMMUNGSLICHT
   Eine grosse, sehr schwache Aufhellung oben und ein Hauch der
   Handlungsfarbe unten rechts. Ohne das wirkt eine dunkle Seite
   flach und tot — mit ihr bekommt sie Raum. Bewusst unter dem
   Inhalt (z-index -1) und ohne Mausereignisse. */
html.dunkel body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(80% 55% at 50% 0%, rgba(255,255,255,.045), transparent 70%),
    radial-gradient(60% 50% at 100% 100%,
      color-mix(in srgb, var(--aktion) 12%, transparent), transparent 70%)}

/* 2. BILDSCHLEIER
   Text auf einem Foto ist nur lesbar, wenn darunter ein Verlauf
   liegt — nicht eine flache Abdunklung ueber dem ganzen Bild.
   Der Verlauf laesst die Bildmitte hell und macht nur den Fuss
   dunkel, wo die Beschriftung sitzt.
       <figure class="bildkarte">
         <img …><figcaption><b>ABHOLUNG</b><span>…</span></figcaption>
       </figure> */
.bildkarte{position:relative;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line)}
.bildkarte img{width:100%;height:100%;object-fit:cover;display:block}
.bildkarte figcaption{position:absolute;left:0;right:0;bottom:0;
  padding:56px 20px 18px;
  background:linear-gradient(to top,
    rgba(0,0,0,.92) 0%, rgba(0,0,0,.55) 45%, transparent 100%)}
.bildkarte figcaption b{display:block;color:var(--aktion-dunkel);
  font-size:13px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  margin-bottom:5px}
.bildkarte figcaption span{display:block;color:#e6e9ec;font-size:15px;line-height:1.5}

/* Bildstrecke: ein grosses Bild links, zwei kleine rechts.
   Auf dem Handy einfach untereinander — ein zweispaltiges Raster
   bei 390px macht aus zwei Bildern zwei Briefmarken. */
.bildstrecke{display:grid;gap:var(--raster-abstand);margin-top:28px;
  grid-template-columns:1.25fr 1fr;align-items:start}
.bildstrecke .gross{grid-row:span 2}
@media(max-width:860px){
  .bildstrecke{grid-template-columns:1fr}
  .bildstrecke .gross{grid-row:auto}
}

/* 3. HANDLUNGSFARBE IM TITEL
   EIN Teil der Ueberschrift traegt die Handlungsfarbe als Verlauf.
   Das setzt den Blick ohne eine zweite Flaechenfarbe — die Regel
   "eine Farbe, sonst neutral" bleibt unangetastet.

   Gebaut wird der Verlauf aus --aktion-schrift, NICHT aus --aktion.
   Grund: --aktion ist die Flaechenfarbe des Knopfs und im Hellmodus
   viel zu hell fuer Schrift. Erster Versuch mass 1,48:1 auf Weiss —
   unlesbar. --aktion-schrift ist die Variante, die je Modus auf
   Lesbarkeit geprueft ist. Gemessen ueber alle sechs Faelle (drei
   Profile x hell/dunkel): schlechtestes Ende 4,1:1.
       <h1>Ihr Auto ist <em>bares Wert</em>.</h1>
   Der Rueckfall darunter ist Pflicht: kann ein Browser den Verlauf
   nicht auf Text legen, bliebe die Schrift sonst unsichtbar. */
.titel-akzent{color:var(--aktion-schrift);font-style:normal}
@supports (-webkit-background-clip:text) or (background-clip:text){
  .titel-akzent{
    /* Zuerst eine einfarbige Fuellung als Rueckfall: kann ein Browser
       color-mix nicht, wird die zweite Zeile ignoriert und der Text
       traegt trotzdem eine Farbe. Ohne diese Zeile waere er
       unsichtbar — der Text ist ja auf transparent gestellt. */
    background:var(--aktion-schrift);
    background:linear-gradient(135deg,
      color-mix(in srgb, var(--aktion-schrift) 80%, white),
      color-mix(in srgb, var(--aktion-schrift) 88%, black));
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent}
}

/* Wer Bewegung reduziert, bekommt auch kein Stimmungslicht-Flackern:
   es ist ohnehin statisch, aber der Vollstaendigkeit halber. */
@media (prefers-reduced-motion: reduce){
  html.dunkel body::before{transition:none}
}

/* ============================================================
   ZONEN UND RHYTHMUS
   Der Befund vom 05.09.2026: unsere Seiten waren sauber, aber
   monoton. Jede Sektion hatte dieselbe Form (Kleintitel, Titel,
   Zeile, Kastenraster) und denselben Grund — beim Scrollen ein
   durchgehender Teppich ohne Hoehepunkt.
   Die Bausteine hier kosten kein zusaetzliches Skript und keine
   zusaetzliche Anfrage. Sie sind OPT-IN: ohne die Klasse im HTML
   aendert sich nichts.
   ============================================================ */

/* --- 1. Abwechselnder Grund -------------------------------
   Nicht jede zweite Sektion, sondern gezielt gesetzt: eine
   erhabene Zone hebt genau EINEN Abschnitt heraus. Drei davon
   hintereinander waeren wieder monoton. */
.zone-erhaben{
  background:var(--soft);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
html.dunkel .zone-erhaben{
  background:linear-gradient(180deg,var(--flaeche),var(--bg) 88%)}

/* Nur eine Kante, kein Farbwechsel — der leiseste Trenner. */
.zone-kante{border-top:1px solid var(--line)}

/* Kante, die zu den Raendern hin ausblendet. Eine durchgezogene
   Linie ueber die volle Breite wirkt wie ein Tabellenstrich. */
.zone-verlauf{position:relative}
.zone-verlauf::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--line) 18%,var(--line) 82%,transparent)}

/* --- 2. Raster-Textur --------------------------------------
   Feine 1-px-Linien, zur Mitte hin sichtbar, zu den Raendern
   ausgeblendet. Ohne die Maske sieht es nach Millimeterpapier
   aus. Liegt hinter dem Inhalt (z-index -1 im eigenen Kontext),
   faengt keine Klicks ab und wird beim Drucken nicht gebraucht. */
.zone-raster{position:relative;isolation:isolate}
.zone-raster::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(var(--raster-linie) 1px,transparent 1px),
    linear-gradient(90deg,var(--raster-linie) 1px,transparent 1px);
  background-size:66px 66px;
  -webkit-mask-image:radial-gradient(72% 62% at 50% 42%,#000,transparent 78%);
          mask-image:radial-gradient(72% 62% at 50% 42%,#000,transparent 78%)}
@media print{.zone-raster::after{display:none}}

/* --- 3. Nummerierte Schritte -------------------------------
   Fuer Ablauf-Abschnitte ("so laeuft es ab"). Die Ziffer kommt
   aus dem CSS-Zaehler, steht also NICHT im Text und wird von
   Screenreadern nicht vorgelesen — die Ueberschrift traegt die
   Bedeutung. Deshalb auch aria-hidden unnoetig. */
.schritte{counter-reset:schritt;display:grid;
  grid-template-columns:repeat(3,1fr);gap:var(--raster-abstand);margin-top:30px}
@media(max-width:900px){.schritte{grid-template-columns:1fr}
  .schritt{padding-top:58px}
  .schritt::before{font-size:66px;top:-10px}}
.schritt{counter-increment:schritt;position:relative;overflow:hidden;
  padding:68px 22px 26px;border-top:2px solid var(--line);
  transition:border-color .25s}
.schritt::before{
  content:counter(schritt,decimal-leading-zero);
  position:absolute;right:2px;top:-16px;pointer-events:none;
  font-family:var(--font-titel);font-weight:800;line-height:1;
  font-size:clamp(64px,7vw,96px);
  letter-spacing:-.04em;color:var(--aktion-schrift);opacity:.16}
.schritt:hover{border-top-color:var(--aktion)}
.schritt h3,.schritt p{position:relative}
.schritt p{color:var(--muted);font-size:14.5px;margin:0}

/* --- 4. Karten mit Leben -----------------------------------
   Bisher wechselte beim Ueberfahren nur die Rahmenfarbe. Eine
   Akzentlinie, die von links einfaehrt, kostet nichts und macht
   den Unterschied zwischen "Kasten" und "Bedienelement".
   Bei reduzierter Bewegung faellt der Lauf weg (globale Regel
   weiter oben setzt die Dauer auf .01ms) — die Linie erscheint
   dann sofort, verschwindet aber nicht. */
.card,.box[data-lift]{position:relative;overflow:hidden}
.card::before,.box[data-lift]::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;
  background:var(--aktion);transform:scaleX(0);transform-origin:left;
  transition:transform .3s cubic-bezier(.22,1,.36,1)}
a.card:hover::before,a.card:focus-visible::before,
.box[data-lift]:hover::before{transform:scaleX(1)}
html.dunkel a.card:hover{
  border-color:var(--dark-3);
  box-shadow:var(--shadow-karte)}

/* --- 5. Ein Hoehepunkt pro Seite ---------------------------
   Genau EINE Ueberschrift darf gross werden. Wird die Klasse
   mehrfach vergeben, ist der Effekt weg.

   NUR fuer einspaltige Abschnitte. Im zweispaltigen .hero-grid
   gemessen (1440 x 900): bei 92 px braucht die Ueberschrift sechs
   Zeilen und schiebt den Telefonknopf unter die Falz. Deshalb
   wird sie dort gedeckelt — die Erreichbarkeit der Telefonnummer
   im ersten Bildschirm geht vor. */
h1.titel-gross,h2.titel-gross{font-size:clamp(38px,7.4vw,92px);line-height:.98;
  letter-spacing:-.042em;text-wrap:balance}
.hero-grid h1.titel-gross{font-size:clamp(36px,5.4vw,68px);line-height:1.01}

/* ============================================================
   TIEFE — Glanz, Glas und farbiges Licht
   Nachgemessen am 05.09.2026 an der Referenzseite. Die erste
   Fassung hatte nur die Farbtoene uebernommen; die Kritik war
   berechtigt: "Buttons einfarbig matt und leblos", "es fehlt der
   Hintergrundeffekt und die glaenzenden Elemente".

   Vier Techniken, alle gemessen, keine geraten:
     1. Knopfschatten in der AKTIONSFARBE, nicht in Schwarz
     2. Glas: backdrop-filter blur(24px) Kopf, blur(8px) Karten
     3. weichgezeichnete Farbkugel ausserhalb der Kartenecke
     4. Stimmungslicht bei 50 % statt bei 4,5 %
   ============================================================ */

/* --- 1. Knoepfe, die leuchten ------------------------------
   Der entscheidende Unterschied: der Schatten traegt die
   Aktionsfarbe. Ein schwarzer Schatten auf dunklem Grund ist
   unsichtbar — deshalb wirkten die Knoepfe tot.
   color-mix wird nicht ueberall unterstuetzt, darum steht in
   jeder Regel zuerst ein einfarbiger Rueckfall. */
.btn-primary,.btn.btn-primary{
  /* Der innere Ring aus Zeile 249 muss mitwandern — eine zweite
     box-shadow-Deklaration ersetzt die erste vollstaendig. */
  box-shadow:inset 0 0 0 1px var(--aktion-line),0 10px 22px -8px rgba(0,0,0,.45);
  box-shadow:inset 0 0 0 1px var(--aktion-line),
             0 10px 22px -8px color-mix(in srgb, var(--aktion) 45%, transparent),
             0 2px 6px -2px color-mix(in srgb, var(--aktion) 30%, transparent);
  transition:transform .15s cubic-bezier(.4,0,.2,1),
             box-shadow .15s cubic-bezier(.4,0,.2,1),
             background-color .15s cubic-bezier(.4,0,.2,1)}
.btn-primary:hover,.btn.btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:inset 0 0 0 1px var(--aktion-line),
             0 18px 34px -10px color-mix(in srgb, var(--aktion) 60%, transparent),
             0 3px 10px -2px color-mix(in srgb, var(--aktion) 38%, transparent)}
.btn-primary:active,.btn.btn-primary:active{transform:translateY(0)}

/* Ein feiner heller Rand oben laesst die Flaeche gewoelbt wirken,
   statt wie ein aufgeklebtes Rechteck. */
html.dunkel .btn-primary{
  border-top:1px solid rgba(255,255,255,.22)}

@media (prefers-reduced-motion: reduce){
  .btn-primary:hover,.btn.btn-primary:hover{transform:none}
}

/* --- 2. Glas ------------------------------------------------
   Nur dort, wo wirklich etwas dahinter durchscheint: die
   klebende Kopfleiste. Ohne Unterstuetzung bleibt der Kopf
   einfach deckend — nichts geht kaputt. */
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  html.dunkel header{
    -webkit-backdrop-filter:blur(20px) saturate(1.4);
            backdrop-filter:blur(20px) saturate(1.4);
    background:color-mix(in srgb, var(--bg) 72%, transparent)}
}

/* --- 3. Farbiges Licht hinter Karten ------------------------
   Eine weichgezeichnete Kugel in der Aktionsfarbe, halb
   ausserhalb der oberen rechten Ecke. Das ist der Glanz, der in
   der ersten Fassung fehlte. Nur im Dunkelmodus — auf Weiss
   wuerde daraus ein schmutziger Fleck.
   Traegt kein Klickziel (pointer-events:none) und liegt hinter
   dem Inhalt. */
html.dunkel .box[data-lift],
html.dunkel .card,
html.dunkel .schritt{isolation:isolate}
html.dunkel .box[data-lift]::after,
html.dunkel .card::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  top:-34px;right:-34px;width:130px;height:130px;border-radius:999px;
  background:color-mix(in srgb, var(--aktion) 14%, transparent);
  filter:blur(40px);
  transition:opacity .25s,transform .25s}
html.dunkel .box[data-lift]:hover::after,
html.dunkel a.card:hover::after{
  background:color-mix(in srgb, var(--aktion) 26%, transparent)}

/* --- 4. Stimmungslicht, jetzt in der gemessenen Staerke -----
   Vorher: 4,5 % Weiss oben, 12 % Aktionsfarbe unten rechts —
   praktisch unsichtbar. Die Referenz arbeitet mit einer um eine
   Stufe helleren Flaeche bei 50 % Deckkraft oben und 15 %
   Aktionsfarbe in der Ecke. Genau das steht jetzt hier. */
html.dunkel body::before{
  background:
    radial-gradient(120% 60% at 50% 0%,
      color-mix(in srgb, var(--dark-3) 50%, transparent), transparent 62%),
    radial-gradient(90% 60% at 100% 100%,
      color-mix(in srgb, var(--aktion) 15%, transparent), transparent 62%),
    radial-gradient(70% 50% at 0% 42%,
      color-mix(in srgb, var(--aktion) 7%, transparent), transparent 66%)}

/* Ein Lichtsaum ueber der herausgehobenen Zone, damit sie nicht
   nur "etwas anderes Dunkles" ist. Das war der offene Punkt aus
   der ersten Fassung. */
html.dunkel .zone-erhaben{position:relative}
html.dunkel .zone-erhaben::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,
    color-mix(in srgb, var(--aktion) 55%, transparent) 30%,
    color-mix(in srgb, var(--aktion) 55%, transparent) 70%,transparent)}

/* Der Titelverlauf nimmt, wenn ein Profil sie mitbringt, zwei
   echte Farben statt zweimal derselben mit Aufhellung. */
@supports (-webkit-background-clip:text) or (background-clip:text){
  html.dunkel .titel-akzent{
    background:linear-gradient(135deg,
      var(--titel-verlauf-a, color-mix(in srgb, var(--aktion-schrift) 80%, white)),
      var(--titel-verlauf-b, color-mix(in srgb, var(--aktion-schrift) 88%, black)));
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent}
}

/* ============================================================
   TIEFE IM HELLMODUS
   Der Dunkelmodus hatte Licht, Glas und Glanz — der Hellmodus
   war weiter die brave Fassung: flache weisse Kaesten, kein
   Licht. Wer nichts umstellt, bekommt aber genau den.

   Auf Weiss funktionieren andere Mittel als auf Schwarz:
   - Eine weichgezeichnete Farbkugel wird auf Weiss ein
     Schmutzfleck. Stattdessen eine sehr flache Tonung.
   - Tiefe kommt hier aus SCHATTEN und einer hellen Oberkante,
     nicht aus Leuchten. Auf Weiss ist ein Schatten sichtbar,
     ein Leuchten nicht — auf Schwarz genau andersherum.
   Kontraste aendern sich dadurch nicht: die Kartenflaeche
   bleibt weiss, es kommt nur Schattierung dazu.
   ============================================================ */

/* --- Stimmungslicht, sehr flach ----------------------------
   6 % Handlungsfarbe oben, 4 % unten rechts. Mehr wirkt auf
   Weiss sofort schmutzig — im Dunkeln sind es 50 %. */
html:not(.dunkel) body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(110% 55% at 50% 0%,
      color-mix(in srgb, var(--aktion) 6%, transparent), transparent 62%),
    radial-gradient(80% 55% at 100% 100%,
      color-mix(in srgb, var(--aktion) 4%, transparent), transparent 64%)}

/* --- Karten bekommen echte Hoehe ---------------------------
   Vorher nur ein Rahmen. Jetzt Schatten plus eine hellere
   Oberkante — das laesst die Flaeche gewoelbt statt aufgeklebt
   wirken, dieselbe Idee wie der helle Rand am Knopf im Dunkeln. */
html:not(.dunkel) .box,
html:not(.dunkel) .card{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),
             0 1px 2px rgba(16,20,24,.05),
             0 10px 24px -14px rgba(16,20,24,.18)}
html:not(.dunkel) .box[data-lift]:hover,
html:not(.dunkel) a.card:hover{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),
             0 2px 6px rgba(16,20,24,.07),
             0 18px 38px -16px rgba(16,20,24,.26)}
/* Die dunkle Karte hat ihren eigenen Grund — die helle
   Oberkante wuerde dort als heller Strich aufsitzen. */
html:not(.dunkel) .box.dark{box-shadow:var(--shadow-karte)}

/* --- Statt Glanzkugel: eine flache Ecktonung ---------------- */
html:not(.dunkel) .box[data-lift],
html:not(.dunkel) .card{isolation:isolate}
html:not(.dunkel) .box[data-lift]::after,
html:not(.dunkel) .card::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  top:0;right:0;width:56%;height:60%;border-radius:0 var(--radius) 0 0;
  background:linear-gradient(215deg,
    color-mix(in srgb, var(--aktion) 9%, transparent), transparent 68%);
  transition:opacity .25s}
html:not(.dunkel) .box[data-lift]:hover::after,
html:not(.dunkel) a.card:hover::after{
  background:linear-gradient(215deg,
    color-mix(in srgb, var(--aktion) 16%, transparent), transparent 68%)}

/* --- Glas auch hier ----------------------------------------- */
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  html:not(.dunkel) header{
    -webkit-backdrop-filter:blur(18px) saturate(1.3);
            backdrop-filter:blur(18px) saturate(1.3);
    background:rgba(255,255,255,.76)}
}

/* --- Die erhabene Zone bekommt Licht von oben --------------- */
html:not(.dunkel) .zone-erhaben{
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--aktion) 5%, var(--soft)), var(--soft) 62%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
html:not(.dunkel) .zone-erhaben::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,
    color-mix(in srgb, var(--aktion) 40%, transparent) 30%,
    color-mix(in srgb, var(--aktion) 40%, transparent) 70%,transparent)}
html:not(.dunkel) .zone-erhaben{position:relative}

/* ============================================================
   KARRIERE — Recruiting-Band und Stellen-Bausteine
   Ergaenzt am 08.09.2026.

   Befund davor: kern.mjs gibt seit Anfang an jobBand() aus
   (<section class="job-band">), im Stylesheet stand dafuer keine
   einzige Regel. Der Baustein rendete als nackter Fliesstext —
   derselbe Fehler wie die erfundenen Klassennamen im Dachdecker-
   VS-Test (LIESMICH.md, "Klassen-Wortschatz").

   WARUM .job-band BEWUSST ANDERS AUSSIEHT ALS .cta-band:
   .cta-band ist die dunkle Flaeche fuer die KUNDEN-Ansprache.
   Stuenden beide Baender untereinander auf einer Seite, zeigte sie
   zweimal dasselbe dunkle Band — der zweite Aufruf wird dann gar
   nicht mehr gelesen. .job-band ist deshalb eine HELLE, abgesetzte
   Flaeche mit Kante oben und unten: Bewerber-Ansprache trennt sich
   optisch von Kunden-Ansprache.

   Das bleibt EINE Handlungsfarbe (REGELN.md 6): --aktion-soft ist
   dieselbe Farbe, nur getoent — keine zweite Flaechenrolle. Aus
   demselben Grund traegt .bewerbung-kurz weiter unten den
   NEUTRALEN --soft und nicht noch einmal die getoente Flaeche.

   Weil auf hellem Grund gearbeitet wird, gehoeren in dieses Band
   .btn-primary und .btn-outline. .btn-ghost ist weisse Schrift auf
   transparent und dort unsichtbar (LIESMICH.md) — jobBand() in
   kern.mjs wurde am selben Tag entsprechend umgestellt.

   Alle Regeln benutzen ausschliesslich vorhandene Variablen und
   wirken damit in allen vier Stil-Profilen (handfest, ruhig,
   tiefe, himmel) ohne eine einzige neue Farbe.

   Der Fokusring kommt von der globalen Regel weiter oben
   (:focus-visible, 3 px --aktion-schrift) und greift auf jedem
   Link und Knopf hier — es braucht keine eigene Regel.
   ============================================================ */

/* ---------- Recruiting-Band ---------- */
.job-band{background:var(--aktion-soft);position:relative;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.job-band .wrap{position:relative;z-index:1;max-width:820px}
/* Links buendig — das CTA-Band ist zentriert. Auch daran erkennt
   der Besucher, dass hier jemand anderes angesprochen wird. */
.job-band h2{margin-bottom:12px}
.job-band p{color:var(--muted);max-width:620px;margin-bottom:24px}
.job-band .cta{display:flex;gap:12px;flex-wrap:wrap}

/* Hellmodus: Tiefe aus Schlagschatten und heller Oberkante
   (REGELN.md 4e — auf Weiss ist ein Schatten sichtbar, ein
   Leuchten nicht). */
html:not(.dunkel) .job-band{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),
             0 1px 2px rgba(16,20,24,.05),
             0 14px 30px -22px rgba(16,20,24,.22)}

/* Dunkelmodus: eine Helligkeitsstufe ueber der Flaeche, sichtbarer
   Rahmen, und der Schatten traegt die Handlungsfarbe statt Schwarz
   (REGELN.md 4c/4e). Erste Zeile ist der einfarbige Rueckfall fuer
   Browser ohne color-mix. */
html.dunkel .job-band{background:var(--dark-2);border-color:var(--line);color:var(--ink);
  box-shadow:0 18px 44px -30px rgba(0,0,0,.8);
  box-shadow:0 18px 44px -30px color-mix(in srgb, var(--aktion) 45%, transparent)}
html.dunkel .job-band p{color:var(--ink-3)}
/* Lichtsaum auf der Oberkante, wie bei .zone-erhaben. */
html.dunkel .job-band::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  background:rgba(255,255,255,.14);
  background:linear-gradient(90deg,transparent,
    color-mix(in srgb, var(--aktion) 55%, transparent) 30%,
    color-mix(in srgb, var(--aktion) 55%, transparent) 70%,transparent)}

/* ---------- Offene Stellen ---------- */
/* Einspaltig auf dem Handy, ab 760 px zweispaltig. Bewusst nicht
   dreispaltig wie .cards: eine Stellenanzeige traegt mehr Text. */
.stellenliste{display:grid;grid-template-columns:1fr;gap:var(--raster-abstand);
  margin-top:20px;list-style:none;padding-left:0}
@media(min-width:760px){.stellenliste{grid-template-columns:repeat(2,1fr)}}
.stelle{background:var(--flaeche);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--karten-polster);display:flex;flex-direction:column;gap:8px;
  color:var(--ink);text-decoration:none;transition:.18s}
.stelle h3{margin-bottom:0}
.stelle p{font-size:14.5px;color:var(--muted);margin:0}
.stelle .more{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:14px;
  font-size:14px;font-weight:700;color:var(--ink);text-decoration:none}
.stelle .more::after{content:"→";transition:transform .18s}
.stelle .more:hover::after,.stelle .more:focus-visible::after{transform:translateX(4px)}
a.stelle:hover,.stelle:focus-within{border-color:var(--ink)}
a.stelle:hover{transform:translateY(-3px);box-shadow:var(--shadow)}

/* Die Plakette fuer die Art der Stelle: Vollzeit, Ausbildung,
   Teilzeit. Getoente Flaeche, Akzentschrift — keine neue Farbe.
   Kontrast nachgerechnet (WCAG 2.1, relative Leuchtdichte),
   --aktion-schrift auf --aktion-soft:
     handfest #7a5602 auf #fdf6e3 = 6,16:1
     ruhig    #1c6b52 auf #eef7f4 = 5,88:1
     tiefe    #0053a1 auf #eff4f9 = 6,90:1
     himmel   #0b4f94 auf #e8f1fb = 7,19:1
     Hausstil #12608f auf #eaf6fd = 6,17:1
   Alle ueber 4,5:1, der kleinste Wert ist handfest mit 6,16:1. */
.stelle .art{align-self:flex-start;display:inline-block;
  background:var(--aktion-soft);color:var(--aktion-schrift);
  border-radius:999px;padding:4px 12px;
  font-size:12.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
/* Im Dunkeln umgekehrt: dort ist --aktion-soft nur ein Hauch Weiss
   und die Plakette verschwaende. Volle Handlungsfarbe mit dunkler
   Schrift — handfest 8,63:1, Hausstil 8,18:1, ruhig 8,99:1. */
html.dunkel .stelle .art{background:var(--aktion);color:var(--aktion-text)}

/* ---------- Einstiegswege ---------- */
/* Ausbildung / Quereinstieg / Fachkraft. Kartenoptik wie .card,
   aber mit grosser Ordnungsziffer (.n) oder Icon-Platz (.ico) oben. */
.wege{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--raster-abstand);
  margin-top:20px;list-style:none;padding-left:0}
@media(max-width:900px){.wege{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.wege{grid-template-columns:1fr}}
.weg{background:var(--flaeche);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--karten-polster);color:var(--ink)}
.weg .n{display:block;font-family:var(--font-titel);font-size:42px;line-height:1;
  font-weight:var(--titel-gewicht);letter-spacing:var(--titel-laufweite);
  color:var(--aktion-schrift);margin-bottom:12px}
.weg .ico{width:46px;height:46px;border-radius:12px;background:var(--soft);
  border:1px solid var(--line);color:var(--muted);display:grid;place-items:center;margin-bottom:15px}
.weg p{font-size:14.5px;color:var(--muted);margin:0}

/* ---------- Faktenzeile einer Stellenseite ---------- */
/* Aufbau wie .facts im Leistungs-Hero, aber als eigene Klasse —
   .facts bleibt dadurch unberuehrt (87 bestehende Seiten). */
.jobfakten{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;
  margin-top:22px;padding:20px 0;list-style:none;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media(max-width:820px){.jobfakten{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.jobfakten{grid-template-columns:1fr;gap:12px}}
.jobfakten>*{font-size:14px;color:var(--muted)}
.jobfakten b{display:block;font-size:18px;color:var(--ink);font-weight:800;margin-top:2px}

/* ---------- Kurzbewerbung ---------- */
/* Deutlich abgesetzt, aber NEUTRAL: --soft, nicht noch einmal die
   getoente Flaeche. Zwei getoente Flaechenformate auf einer Seite
   waeren die zweite Farbrolle, die REGELN.md 6 verbietet. */
.bewerbung-kurz{background:var(--soft);border:1px solid var(--line);
  border-radius:var(--radius);padding:var(--karten-polster);margin-top:24px}
.bewerbung-kurz h3{margin-bottom:12px}
.bewerbung-kurz .fragen{list-style:none;margin:0 0 20px;padding:0;counter-reset:frage}
.bewerbung-kurz .fragen li{counter-increment:frage;position:relative;
  padding-left:34px;margin-bottom:10px;font-size:15.5px}
.bewerbung-kurz .fragen li::before{content:counter(frage);position:absolute;left:0;top:2px;
  width:24px;height:24px;border-radius:var(--radius-klein);background:var(--dark);color:#fff;
  display:grid;place-items:center;font-size:13px;font-weight:800}
.bewerbung-kurz .cta{display:flex;gap:12px;flex-wrap:wrap}
.bewerbung-kurz .note{margin-top:14px;margin-bottom:0}
/* Im Dunkeln liegt --soft zu dicht am Grund, und die Ziffernplakette
   traegt --dark — das waere dunkel auf dunkel. Beides eine Stufe hoch. */
html.dunkel .bewerbung-kurz{background:var(--dark-2);border-color:var(--line)}
html.dunkel .bewerbung-kurz .fragen li::before{background:var(--aktion);color:var(--aktion-text)}

/* ---------- Tiefe, gleiche Mittel wie bei .card ---------- */
html:not(.dunkel) .stelle,
html:not(.dunkel) .weg,
html:not(.dunkel) .bewerbung-kurz{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),
             0 1px 2px rgba(16,20,24,.05),
             0 10px 24px -14px rgba(16,20,24,.18)}
html:not(.dunkel) a.stelle:hover{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),
             0 2px 6px rgba(16,20,24,.07),
             0 18px 38px -16px rgba(16,20,24,.26)}
html.dunkel .stelle,
html.dunkel .weg{border-color:var(--line)}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce){
  .stelle,.stelle .more::after{transition:none}
  a.stelle:hover{transform:none}
  .stelle .more:hover::after,.stelle .more:focus-visible::after{transform:none}
}

/* ============================================================
   LEBENDIG — Bilddichte, Rhythmus, Bewegung   (24.09.2026)

   Befund vom 22.09.2026: unsere Startseiten trugen 3–4 Bilder,
   die Referenz 29. Nicht die Animation macht eine Seite lebendig,
   sondern die Bilddichte — deshalb stehen hier zuerst die
   BILD-Bausteine und erst danach die Bewegung.

   ALLES HIER IST OPT-IN. Entweder es haengt an einer Klasse, die
   heute kein Projekt benutzt (.foto-band, .kachel-bild,
   .hero-foto, .hero-bild), oder an `html.lebendig` — gesetzt von
   setLebendig(true) in kern.mjs. Bestehende Seiten aendern sich
   dadurch um kein Byte in der Darstellung.

   Werte durchgaengig aus Skill /lebendig Abschnitt 4:
   16–24 px Weg, 500–700 ms, cubic-bezier(.22,1,.36,1), einmalig.
   Navigation, Telefon und Formular bleiben ohne Animation.
   ============================================================ */

/* ---------- 1. FOTO-BAND ----------
   Randlos ueber die volle Breite, waagerecht wischbar.
   Baustein: fotoBand() in kern.mjs — das Band gehoert NEBEN
   das .wrap, nicht hinein (siehe Kommentar dort).

   Bewusst KEIN width:100vw: das rechnet die Scrollleiste mit und
   erzeugt auf Windows einen waagerechten Ueberlauf der ganzen
   Seite. Als eigenes Kind der Sektion ist das Band ohnehin schon
   volle Breite — es braucht nur Polster statt .wrap.

   Der linke Rand richtet sich an .wrap aus, damit das erste Foto
   unter der Ueberschrift beginnt. Rechts bleibt nur 24 px Polster,
   also haengt das naechste Foto sichtbar in den Rand — sonst sieht
   niemand, dass es weitergeht. */
.foto-band{
  display:flex;gap:14px;margin-top:28px;
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding:4px max(24px, calc((100% - var(--maxw)) / 2 + 24px)) 18px;
  /* scroll-padding MUSS dasselbe Mass tragen wie padding-left.
     Ohne das schnappt der Browser das erste Foto an die linke
     KANTE des Scrollbereichs — also hinter das Polster — und das
     Band beginnt sichtbar weiter links als die Ueberschrift
     darueber. Im Browser gemessen am 24.09.2026: 194 px Polster,
     Foto trotzdem bei 0. */
  scroll-padding-left:max(24px, calc((100% - var(--maxw)) / 2 + 24px));
  scrollbar-width:thin}
.foto-band > *{flex:0 0 auto;scroll-snap-align:start;margin:0;position:relative}
.foto-band picture{display:block;width:100%}
.foto-band img{display:block;width:100%;object-fit:cover;
  border-radius:var(--radius);background:var(--soft)}
.foto-band figcaption{margin-top:8px;font-size:13.5px;color:var(--muted)}

/* Desktop: feste Hoehe, Breite daraus im Verhaeltnis 3:2.
   Feste Hoehe statt fester Breite, damit alle Fotos eine Linie
   halten, auch wenn eins hochkant geliefert wird.

   Die Hoehe sitzt am BILD, nicht an der figure: sonst steht die
   Beschriftung ausserhalb und wird vom overflow abgeschnitten.
   Im Browser gemessen am 24.09.2026 — die Bildunterschrift ragte
   14 px unter den Rand des Bandes. */
@media(min-width:701px){
  .foto-band > *{width:calc(var(--band-hoehe,320px) * 1.5)}
  .foto-band img{height:var(--band-hoehe,320px)}
}
/* Handy: knapp vier Fuenftel der Breite. Bei 100 % sieht man den
   Ueberhang nicht und das Band wirkt wie ein einzelnes Bild. */
@media(max-width:700px){
  .foto-band{gap:12px;padding-left:20px;padding-right:20px;
    scroll-padding-left:20px}
  .foto-band > *{width:78%}
  .foto-band img{aspect-ratio:3/2;height:auto}
}
/* Fokusring, weil das Band selbst fokussierbar ist (tabindex="0"). */
.foto-band:focus-visible{outline:2px solid var(--aktion-line);outline-offset:3px;
  border-radius:var(--radius-klein)}

/* ---------- 2. LEISTUNGSKACHEL MIT BILD ----------
   Bild oben 3:2, Beschriftung unten. Ersetzt das Icon-Raster,
   sobald es echte Fotos gibt. Fehlt ein Foto: Kachel ohne Bild,
   KEIN Platzhalter-Foto (Hausregel).

   Der Zoom liegt hinter @media (hover:hover). Auf dem Handy gibt
   es keinen Zeiger — dort bliebe der Hover-Zustand haengen. */
.kachel-bild{display:flex;flex-direction:column;overflow:hidden;padding:0;
  background:var(--flaeche);border:1px solid var(--line);
  border-radius:var(--radius);color:var(--ink);text-decoration:none}
.kachel-bild > picture,.kachel-bild > .bild{display:block;overflow:hidden}
.kachel-bild img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;
  background:var(--soft)}
.kachel-bild .inhalt{padding:var(--karten-polster);display:flex;
  flex-direction:column;flex:1}
.kachel-bild h3{margin-bottom:8px}
.kachel-bild p{color:var(--muted);font-size:15.5px}
.kachel-bild .more{display:inline-block;margin-top:auto;padding-top:14px;
  font-size:14px;font-weight:700;color:var(--ink)}

@media (hover:hover){
  .kachel-bild{transition:transform .25s cubic-bezier(.22,1,.36,1),
                          box-shadow .25s cubic-bezier(.22,1,.36,1),
                          border-color .25s}
  .kachel-bild img{transition:transform .4s cubic-bezier(.22,1,.36,1)}
  .kachel-bild:hover,.kachel-bild:focus-visible{transform:translateY(-2px);
    border-color:var(--aktion-line);
    box-shadow:0 12px 30px -14px color-mix(in srgb, var(--aktion) 60%, transparent)}
  .kachel-bild:hover img{transform:scale(1.03)}
}
@media (prefers-reduced-motion: reduce){
  .kachel-bild,.kachel-bild img{transition:none}
  .kachel-bild:hover,.kachel-bild:focus-visible{transform:none}
  .kachel-bild:hover img{transform:none}
}

/* ---------- 3. STAFFELUNG ----------
   Gestaffelt wird schon seit dem 05.09.2026 — aber in site.js,
   ueber den Verzug der Motion-Animation (70 ms je Kind). Diese
   Regel ist die CSS-Haelfte davon, fuer Uebergaenge, die nicht
   Motion faehrt. `--i` setzt site.js an jedem direkten Kind.

   Gedeckelt bei 5: ab dem sechsten Kind kein weiterer Versatz.
   Sonst wartet das zwoelfte Foto fast eine Sekunde und der Effekt
   kippt von "inszeniert" nach "laedt nach".

   AUSGENOMMEN sind Links, Knoepfe und alles mit data-lift: dort
   wuerde der Verzug den Hover-Uebergang mitbremsen — eine Kachel,
   die sich erst nach 350 ms hebt, fuehlt sich kaputt an. */
html.lebendig [data-reveal-group] > *:not(a):not(button):not([data-lift]){
  transition-delay:calc(min(var(--i,0), 5) * 70ms)}
html.nojs [data-reveal-group] > *,
html.keine-bewegung [data-reveal-group] > *{transition-delay:0s !important}

/* ---------- 4. HERO-ATMEN ----------
   scale(1.04) → scale(1) ueber 1,2 s beim Laden, danach Ruhe.
   KEIN Parallax: das ruckelt am Handy und laesst sich mit
   "Bewegung reduzieren" schlecht abschalten.

   Bewusst in @media (prefers-reduced-motion: no-preference)
   statt per reduce-Regel abgeschaltet: so entsteht die Animation
   gar nicht erst, statt in 0,01 ms durchzulaufen. */
.hero-bild{display:block;overflow:hidden}
.hero-bild img{display:block;width:100%;height:100%;object-fit:cover}
@keyframes hero-atmen{from{transform:scale(1.04)}to{transform:scale(1)}}
@media (prefers-reduced-motion: no-preference){
  html.lebendig .hero .hero-bild img,
  html.lebendig .hero-foto .hero-bild img{
    animation:hero-atmen 1.2s cubic-bezier(.22,1,.36,1) both}
}

/* ---------- 5. HERO MIT VOLLBILD-FOTO ----------
   Desktop: das Foto fuellt den ersten Bildschirm, links liegt ein
   Verlauf von dunkel nach klar, der Text steht weiss darauf.

   KONTRASTREGEL: Text nur ueber dem dunklen Teil des Verlaufs.
   Deshalb .inhalt mit fester Hoechstbreite — laeuft die Zeile
   weiter nach rechts, steht sie irgendwann auf blankem Foto und
   niemand kann sie lesen. Die 640 px sind keine Gestaltung,
   sondern die Grenze, bis zu der der Verlauf traegt. */
.hero-foto{position:relative;padding:0;overflow:hidden;
  background:var(--dark);isolation:isolate}
.hero-foto .hero-bild{position:absolute;inset:0;z-index:0}
.hero-foto .hero-bild img{width:100%;height:100%}
.hero-foto::before{content:"";position:absolute;inset:0;z-index:1;
  pointer-events:none;
  background:linear-gradient(90deg,
    rgba(8,11,14,.94) 0%, rgba(8,11,14,.82) 34%,
    rgba(8,11,14,.34) 68%, rgba(8,11,14,0) 100%)}
.hero-foto .wrap{position:relative;z-index:2;
  min-height:min(88vh,760px);
  display:flex;flex-direction:column;justify-content:center;
  padding-top:56px;padding-bottom:56px}
.hero-foto .inhalt{max-width:640px}
.hero-foto h1,.hero-foto .eyebrow,.hero-foto .trustrow b{color:#fff}
.hero-foto .lead,.hero-foto .sub,.hero-foto .trustrow{color:#e6e9ec}
.hero-foto .eyebrow{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22)}

/* Handy: der Verlauf traegt bei 390 px keinen Text mehr — bei
   dieser Breite liegt jede Zeile ueber dem Foto. Also Foto als
   Band oben mit weichem Auslauf, Text darunter auf dem normalen
   Sektionsgrund. Das ist kein Kompromiss, sondern der lesbarere
   Aufbau: schwarze Schrift auf Weiss statt Weiss auf Bildrauschen. */
@media(max-width:700px){
  .hero-foto{background:var(--flaeche);overflow:visible}
  .hero-foto::before{display:none}
  .hero-foto .hero-bild{position:relative;height:210px}
  .hero-foto .hero-bild img{
    -webkit-mask-image:linear-gradient(to bottom,#000 58%,transparent 100%);
    mask-image:linear-gradient(to bottom,#000 58%,transparent 100%)}
  .hero-foto .wrap{min-height:0;padding-top:18px;padding-bottom:34px}
  .hero-foto .inhalt{max-width:none}
  .hero-foto h1,.hero-foto .eyebrow,.hero-foto .trustrow b{color:var(--ink)}
  .hero-foto .lead,.hero-foto .sub,.hero-foto .trustrow{color:var(--muted)}
  .hero-foto .eyebrow{background:var(--soft);border-color:var(--line)}
}

/* ---------- 6. GLAS-KOPFLEISTE ----------
   Die Kopfleiste hatte bisher blur(10px) ohne Saettigung — im
   Hellmodus sah man davon praktisch nichts. Mit saturate(1.4)
   bekommt der durchscheinende Inhalt Farbe zurueck, statt grau
   durchzuschlagen.

   Hinter @supports, weil Firefox das lange nicht konnte: ohne
   Rueckhalt bliebe dort eine halbtransparente Leiste ohne jede
   Unschaerfe stehen — Text auf Text.

   Beim Scrollen wird die Leiste 4 px kompakter (Klasse .kompakt
   aus site.js). Kein Ein- oder Ausblenden der Navigation: das ist
   in Skill /lebendig Abschnitt 4 ausdruecklich ausgeschlossen. */
@supports ((backdrop-filter:blur(20px)) or (-webkit-backdrop-filter:blur(20px))){
  html.lebendig header{
    -webkit-backdrop-filter:blur(20px) saturate(1.4);
    backdrop-filter:blur(20px) saturate(1.4);
    background:color-mix(in srgb, var(--kopf-grund) 82%, transparent)}
}
html.lebendig header nav{transition:height .25s cubic-bezier(.22,1,.36,1)}
html.lebendig header.kompakt nav{height:68px}
@media (prefers-reduced-motion: reduce){
  html.lebendig header nav{transition:none}
}

/* 27.09.2026 (Quedlinburg): lange Knopftexte liefen bei 390 px ueber den Rand — grosse Knoepfe duerfen auf dem Handy umbrechen */
@media(max-width:520px){.btn-big{white-space:normal;text-align:center;line-height:1.25}}


/* ============================================================
   WOLKENDESIGN — Ergaenzungen zum Baukasten-Stylesheet
   Nur das, was die Agenturseite zusaetzlich braucht:
   der Himmel-Hero, die Boden-Strecke, die Konzept-Kacheln.
   Bewegt wird ausschliesslich transform und opacity.
   ============================================================ */

/* ---------- 1. Der Himmel ----------
   Ohne JavaScript oder bei reduzierter Bewegung: ein normaler,
   ein Bildschirm hoher Hero mit Standbild. Erst die Klasse
   html.himmel-an (setzt wolken.js) macht daraus die zwei
   Bildschirme mit klebender Buehne. */
.himmel{position:relative;background:#e9f1f8;color:#0e1620;
  border-bottom:1px solid var(--line);padding:0;overflow:clip}
.himmel-buehne{position:relative;min-height:min(100svh,900px);display:flex;align-items:center;overflow:hidden}
.himmel-film,.himmel-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}
.himmel-film{display:none}
.himmel-poster{display:block}

/* Der Schleier: links eine helle Flaeche, damit dunkle Schrift auf
   hellen Wolken lesbar bleibt (gemessen: --ink auf #f4f8fb 16:1).
   Zu den Raendern hin blendet er aus, das Bild bleibt sichtbar. */
.himmel-schleier{position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(244,248,251,.94) 0%,rgba(244,248,251,.86) 38%,rgba(244,248,251,.35) 62%,rgba(244,248,251,0) 82%),
    linear-gradient(180deg,rgba(244,248,251,.35),rgba(244,248,251,0) 30%,rgba(244,248,251,0) 70%,rgba(244,248,251,.55))}
@media(max-width:900px){
  .himmel-schleier{background:
    linear-gradient(180deg,rgba(244,248,251,.92) 0%,rgba(244,248,251,.88) 55%,rgba(244,248,251,.45) 100%)}
}

.himmel-text{position:relative;z-index:1;padding-top:clamp(56px,9vw,120px);padding-bottom:clamp(56px,9vw,120px);width:100%}
.himmel-stufe{max-width:820px}
.himmel-stufe + .himmel-stufe{display:none}
.himmel-meta{font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:#3a4654;margin:0 0 22px}
/* Studio-Aufbau (08.09.): keine Knoepfe, keine Vertrauenszeile im Hero.
   Ein grosser Satz, ein Untertitel, drei Textwege. Telefon bleibt im
   ersten Bildschirm — als Textlink, gemessen bei 390 und 1440. */
.himmel h1{font-size:clamp(40px,6.4vw,92px);line-height:.98;letter-spacing:-.035em;margin:0 0 22px;color:#0e1620;text-wrap:balance}
.himmel .lead{color:#3a4654;font-size:clamp(17px,2vw,21px);max-width:560px;margin-bottom:30px}
.himmel-wege{display:flex;flex-wrap:wrap;gap:6px 34px;margin:0}
.himmel-wege a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;font-size:clamp(16px,1.6vw,19px);color:#0e1620;
  text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:6px;text-decoration-color:rgba(14,22,32,.35);
  transition:text-decoration-color .2s ease-out,color .2s ease-out}
.himmel-wege a:first-child{font-variant-numeric:tabular-nums}
.himmel-wege a:hover{text-decoration-color:#0b4f94;color:#0b4f94}

/* Der Hinweis unten: "weiterscrollen" — eine Zeile, kein Pfeil-Gehuepfe. */
.himmel-hinweis{position:absolute;left:0;right:0;bottom:18px;text-align:center;font-size:12.5px;
  letter-spacing:.08em;text-transform:uppercase;color:#3a4654;z-index:1;display:none}

/* --- Mit JavaScript und erlaubter Bewegung ------------------ */
html.himmel-an .himmel{height:200svh}
html.himmel-an .himmel-buehne{position:sticky;top:0;height:100svh;min-height:0}
html.himmel-an .himmel-film.bereit{display:block}
html.himmel-an .himmel-film.bereit + .himmel-poster{opacity:0;transition:opacity .4s ease-out}
html.himmel-an .himmel-hinweis{display:block}
html.himmel-an .himmel-stufe{position:absolute;left:24px;right:24px;top:50%;transform:translateY(calc(-50% + 12px));
  opacity:0;pointer-events:none;display:block;
  transition:opacity .35s ease-out,transform .35s ease-out}
html.himmel-an .himmel-stufe.aktiv{opacity:1;transform:translateY(-50%);pointer-events:auto;
  transition:opacity .4s ease-out .05s,transform .4s ease-out .05s}
html.himmel-an .himmel-text{position:absolute;inset:0;padding:0}
html.himmel-an .himmel-stufe .wrap-innen{max-width:var(--maxw);margin:0 auto;padding:0 24px}
html.himmel-an .himmel-stufe{left:0;right:0}
html.himmel-an .himmel-stufe > *{max-width:820px}
html.himmel-an .himmel-stufe[data-stufe="2"] h2,
html.himmel-an .himmel-stufe[data-stufe="3"] h2{font-size:clamp(32px,5vw,62px);line-height:1.04;letter-spacing:-.02em;color:#0e1620;margin-bottom:18px}
html.himmel-an .himmel-stufe[data-stufe="2"] p,
html.himmel-an .himmel-stufe[data-stufe="3"] p{color:#3a4654;font-size:clamp(17px,2vw,20px);max-width:560px}
/* Stufe 1 muss beim ersten Zeichnen sichtbar sein — noch bevor das
   Skript den ersten Fortschritt gerechnet hat. */
html.himmel-an .himmel-stufe[data-stufe="1"]{opacity:1;transform:translateY(-50%);pointer-events:auto}
html.himmel-an .himmel-stufe[data-stufe="1"].weg{opacity:0;transform:translateY(calc(-50% - 12px));pointer-events:none}

/* Auf dem Handy bleibt der Hero ein Bildschirm hoch: kein Film,
   kein Kleben — das Standbild und der Text, sofort. */
@media(max-width:899px){
  html.himmel-an .himmel{height:auto}
  html.himmel-an .himmel-buehne{position:relative;height:auto;min-height:min(100svh,780px)}
  /* Seitliche 24 px ausdruecklich setzen: die Desktop-Regel nullt padding komplett,
     und der Text klebte bei 390 px am linken Rand (Runde 1). */
  html.himmel-an .himmel-text{position:relative;inset:auto;padding:clamp(56px,9vw,120px) 24px 64px}
  /* Die Attribut-Regeln fuer Stufe 1 sind spezifischer als diese Klasse —
     ohne die zweite Zeile gewann translateY(-50%) und schob den Text bei
     390 px ueber den oberen Rand (gemessen 08.09.: h1 bei y = -133). */
  html.himmel-an .himmel-stufe{position:static;transform:none;opacity:1;pointer-events:auto}
  html.himmel-an .himmel-stufe[data-stufe="1"],
  html.himmel-an .himmel-stufe[data-stufe="1"].weg{transform:none;opacity:1;pointer-events:auto}
  html.himmel-an .himmel-stufe + .himmel-stufe{display:none}
  html.himmel-an .himmel-hinweis{display:none}
}
@media (prefers-reduced-motion: reduce){
  .himmel-stufe,.himmel-film,.himmel-poster{transition:none !important}
}

/* Im Dunkelmodus bleibt der Himmel hell — er ist Himmel. Nur die
   Kante zur naechsten Sektion wird weicher. */
html.dunkel .himmel{border-bottom-color:rgba(255,255,255,.08)}

/* ---------- 5. Kontaktformular ---------- */
.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.fields{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:6px}
.field.voll{grid-column:1 / -1}
.field label{font-size:14px;font-weight:700}
.field input,.field textarea{font:inherit;font-size:16px;padding:13px 14px;border:1px solid var(--line);border-radius:var(--radius-klein);
  background:var(--flaeche);color:var(--ink);width:100%}
.field input:focus,.field textarea:focus{outline:3px solid var(--aktion-schrift);outline-offset:2px;border-color:var(--aktion-line)}
.field textarea{min-height:150px;resize:vertical}
.field .hilfe{font-size:13px;color:var(--muted)}

/* ---------- 7. Kleinkram ---------- */
.zeile-offen{display:inline-block;background:#fdf8e8;border:1px dashed #c9a227;color:#6b5518;
  border-radius:8px;padding:2px 8px;font-size:.92em}
html.dunkel .zeile-offen{background:#241d09;color:#f0d089;border-color:#7a6220}
.rechtstext h2{font-size:clamp(21px,2.6vw,27px);margin-top:34px}
.rechtstext h3{font-size:17px;margin-top:22px}
.rechtstext table{width:100%;border-collapse:collapse;font-size:15px;margin:14px 0 22px}
.rechtstext th,.rechtstext td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--line)}
.rechtstext th{width:34%;color:var(--muted);font-weight:600}
.rechtstext .tabelle{overflow-x:auto}


/* ============================================================
   STUDIO-AUFBAU (08.09.2026)
   Kein Topbar, kein Mobilbalken, keine Karten-Raster. Nummerierte
   Abschnitte mit Haarlinie, Textlinks statt Knoepfen, ein grosser
   Kontakt-Schluss. Herkunft der Muster: REFERENZEN.md.
   ============================================================ */

/* ---------- Kopf ---------- */
.kopf{border-bottom-color:transparent}
.kopf nav{height:76px}
.marke{display:flex;align-items:center;gap:11px;font-weight:700;font-size:19px;letter-spacing:-.02em;color:var(--ink);text-decoration:none}
.marke .mark{width:34px;height:34px;flex:0 0 34px;border-radius:9px;background:var(--dark);display:grid;place-items:center}
.marke .mark svg{width:22px;height:22px}
.kopf .menu a{font-weight:500;font-size:15px;color:var(--muted)}
.kopf .menu a:hover{background:transparent;color:var(--ink)}
.kopf-tel{font-weight:600;font-size:15px;color:var(--ink);text-decoration:none;padding:10px 0;font-variant-numeric:tabular-nums;
  border-bottom:1.5px solid transparent;transition:border-color .2s ease-out}
.kopf-tel:hover{border-bottom-color:var(--ink)}
@media(max-width:1000px){.kopf-tel{display:none}}
/* Der Kopf liegt ueber dem hellen Himmel — dort ohne eigene Flaeche. */
body:has(.himmel) .kopf{background:transparent;backdrop-filter:none}
body:has(.himmel) .kopf.fest{background:var(--kopf-grund);backdrop-filter:blur(10px)}

/* ---------- Abschnittskopf: Nummer, Titel, Satz ---------- */
.nr{display:block;font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.abschnitt-kopf{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px 56px;align-items:end;
  padding-top:22px;border-top:1px solid var(--ink);margin-bottom:clamp(36px,5vw,64px)}
.abschnitt-kopf h2{margin:0;font-size:clamp(30px,4.6vw,56px);line-height:1.02;letter-spacing:-.03em;text-wrap:balance}
.abschnitt-kopf p{margin:0 0 6px;color:var(--muted);font-size:clamp(16px,1.6vw,18px);max-width:520px}
html.dunkel .abschnitt-kopf{border-top-color:rgba(255,255,255,.6)}
@media(max-width:860px){.abschnitt-kopf{grid-template-columns:1fr;gap:14px}}

.textlink{display:inline-block;font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-thickness:1.5px;
  text-underline-offset:6px;text-decoration-color:var(--line);padding:8px 0;transition:text-decoration-color .2s ease-out,color .2s ease-out}
.textlink:hover,a:hover .textlink{text-decoration-color:var(--aktion-schrift);color:var(--aktion-schrift)}
.alle{margin-top:clamp(28px,4vw,48px)}

/* ---------- 01 Konzepte: eine Strecke, keine Kacheln ---------- */
.arbeit{padding-top:clamp(56px,8vw,112px)}
.arbeiten{list-style:none;margin:0;padding:0;display:grid;gap:clamp(48px,7vw,96px)}
.arbeit-zeile > a,.arbeit-zeile > div{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:end;
  text-decoration:none;color:inherit}
.arbeit-zeile:nth-child(even) > a,.arbeit-zeile:nth-child(even) > div{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.arbeit-zeile:nth-child(even) .arbeit-bild{order:2}
.arbeit-bild{position:relative;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--soft)}
/* Natuerliches Seitenverhaeltnis: die Ablauf-Ausschnitte sind breit (1200x411) und
   wurden mit festem 16/10 rechts abgeschnitten (Konzepte-Seite, 08.09.). */
.arbeit-bild img{display:block;width:100%;height:auto;object-position:left top;
  transition:transform .4s cubic-bezier(.22,1,.36,1)}
.arbeit-zeile a:hover img,.arbeit-zeile a:focus-visible img{transform:scale(1.02)}
/* Unten rechts: oben links steht in jedem Screenshot die Ueberschrift des Konzepts (390 px, 08.09.). */
.arbeit-bild .etikett{position:absolute;bottom:12px;right:12px;background:rgba(14,22,32,.84);color:#fff;
  font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:6px 10px;border-radius:999px}
.arbeit-meta .gewerk{display:block;font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--aktion-schrift);margin-bottom:10px}
.arbeit-meta h3{font-size:clamp(24px,2.7vw,38px);line-height:1.08;letter-spacing:-.025em;margin:0 0 14px;text-wrap:balance}
.arbeit-meta p{color:var(--muted);margin:0 0 10px;max-width:440px}
.arbeit-meta .merkmale{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px;max-width:440px}
.arbeit-meta .merkmale li{position:relative;padding-left:22px;font-size:14.5px;color:var(--muted)}
.arbeit-meta .merkmale li::before{content:"";position:absolute;left:0;top:10px;width:10px;height:1.5px;background:var(--aktion-schrift)}
@media(max-width:860px){
  .arbeit-zeile a,.arbeit-zeile:nth-child(even) > a,.arbeit-zeile:nth-child(even) > div{grid-template-columns:1fr;gap:18px}
  .arbeit-zeile:nth-child(even) .arbeit-bild{order:0}
}

/* ---------- 02 Haltung: der eine grosse Titel ---------- */
.haltung .nr{padding-top:22px;border-top:1px solid var(--ink)}
html.dunkel .haltung .nr{border-top-color:rgba(255,255,255,.6)}
.haltung .titel-gross{max-width:15ch;margin-bottom:clamp(28px,4vw,48px)}
.haltung-text{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);max-width:1000px}
.haltung-text p{margin:0;color:var(--muted);font-size:clamp(16px,1.6vw,18.5px);line-height:1.6}
@media(max-width:760px){.haltung-text{grid-template-columns:1fr}}

/* ---------- 03 Umfang: nummerierte Liste mit Haarlinien ---------- */
.liste-nr{list-style:none;margin:0;padding:0;counter-reset:pos}
.liste-nr li{counter-increment:pos;display:grid;grid-template-columns:64px minmax(0,1fr) minmax(0,1.5fr);gap:20px 32px;
  padding:26px 0;border-top:1px solid var(--line)}
.liste-nr li:last-child{border-bottom:1px solid var(--line)}
.liste-nr li::before{content:counter(pos,decimal-leading-zero);font-family:var(--font-titel);font-size:15px;color:var(--muted);padding-top:5px;font-variant-numeric:tabular-nums}
.liste-nr h3{font-size:clamp(19px,2vw,25px);line-height:1.15;letter-spacing:-.015em;margin:0}
.liste-nr p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.6}
@media(max-width:760px){
  .liste-nr li{grid-template-columns:44px minmax(0,1fr);gap:8px 16px}
  .liste-nr p{grid-column:2}
}

/* ---------- 04 Ablauf: drei Spalten, senkrechte Haarlinien ---------- */
.ablauf-spalten{display:grid;grid-template-columns:repeat(3,1fr)}
.ablauf-spalten article{padding:6px 28px 10px;border-left:1px solid var(--line)}
.ablauf-spalten article:first-child{padding-left:0;border-left:0}
.schritt-nr{display:block;font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--aktion-schrift);margin-bottom:14px}
.ablauf-spalten h3{font-size:clamp(22px,2.4vw,30px);line-height:1.1;letter-spacing:-.02em;margin:0 0 12px}
.ablauf-spalten p{margin:0;color:var(--muted);font-size:15.5px;line-height:1.6}
@media(max-width:860px){
  .ablauf-spalten{grid-template-columns:1fr;gap:28px}
  .ablauf-spalten article,.ablauf-spalten article:first-child{padding:0 0 0 20px;border-left:1px solid var(--line)}
}

/* ---------- 05 Wer baut das ---------- */
.wer{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,72px);align-items:start}
.wer .fotoplatz{aspect-ratio:4/5;min-height:0;border-radius:10px}
.portrait{margin:0}
.portrait img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;border-radius:10px;box-shadow:var(--shadow)}
@media(max-width:860px){.portrait img{aspect-ratio:4/3;object-position:50% 22%}}
.bildzeile{margin:12px 0 0;font-size:13.5px;color:var(--muted)}
.wer-text .lead{margin-bottom:18px;max-width:none;color:var(--ink);font-size:clamp(18px,1.9vw,23px);line-height:1.45}
.wer-text p{color:var(--muted);max-width:560px}
@media(max-width:860px){.wer{grid-template-columns:1fr}.wer .fotoplatz{aspect-ratio:4/3}}

/* ---------- 06 Fragen: Haarlinien statt Kaesten ---------- */
.fragen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(24px,5vw,72px);align-items:start}
.fragen > div:first-child{position:sticky;top:96px}
.fragen h2{font-size:clamp(30px,4vw,48px);line-height:1.04;letter-spacing:-.03em;margin:0}
.fragen .faq{margin:0}
.fragen .faq details{background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;margin:0;box-shadow:none}
.fragen .faq details:last-child{border-bottom:1px solid var(--line)}
.fragen .faq details[open]{border-color:var(--line);box-shadow:none}
.fragen .faq summary{padding:20px 0;font-family:var(--font-titel);font-weight:600;font-size:clamp(17px,1.8vw,21px);letter-spacing:-.01em}
.fragen .faq .a{padding:0 40px 22px 0}
@media(max-width:860px){.fragen{grid-template-columns:1fr}.fragen > div:first-child{position:static}}

/* ---------- Schluss und Fuss ---------- */
.schluss{background:var(--dark);color:#fff;padding:clamp(72px,10vw,140px) 0 clamp(56px,7vw,96px)}
.schluss .nr{color:rgba(255,255,255,.62);padding-top:22px;border-top:1px solid rgba(255,255,255,.45)}
.schluss h2{font-size:clamp(40px,7.2vw,108px);line-height:.96;letter-spacing:-.035em;color:#fff;max-width:13ch;margin:0 0 22px;text-wrap:balance}
.schluss p{color:var(--auf-dunkel);font-size:clamp(17px,2vw,21px);max-width:560px;margin:0 0 clamp(32px,4vw,52px)}
.schluss-wege{display:flex;flex-wrap:wrap;gap:14px 56px}
.schluss-wege a{font-family:var(--font-titel);font-size:clamp(24px,3.6vw,48px);line-height:1.2;letter-spacing:-.02em;color:#fff;
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:10px;text-decoration-color:var(--aktion-dunkel, #7cc0ff);
  transition:text-decoration-color .2s ease-out}
.schluss-wege a:first-child{font-variant-numeric:tabular-nums}
.schluss-wege a:hover{text-decoration-color:#fff}

.fuss{background:var(--dark);color:var(--auf-dunkel-2);border-top:1px solid rgba(255,255,255,.1);padding:40px 0 26px;font-size:14px}
.fuss-raster{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:28px;padding-bottom:26px}
.fuss h4{color:#fff;font-family:inherit;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;margin:0 0 10px;font-weight:600}
.fuss nav{display:block;height:auto;justify-content:normal;gap:0}
.fuss a{display:block;color:var(--auf-dunkel);text-decoration:none;padding:4px 0}
.fuss a:hover{color:#fff}
.fuss span{display:block;color:var(--auf-dunkel);line-height:1.55;padding-top:4px}
.fuss-marke b{display:block;color:#fff;font-size:17px;margin-bottom:6px}
.fuss-klein{border-top:1px solid rgba(255,255,255,.1);padding-top:18px;margin:0;font-size:13px}
@media(max-width:860px){.fuss-raster{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fuss-raster{grid-template-columns:1fr}}

/* ---------- Unterseiten-Kopf im selben Ton ---------- */
.phero{background:transparent;padding-top:clamp(44px,6vw,88px);padding-bottom:clamp(24px,3vw,40px)}
.phero .kicker{background:transparent;border:0;padding:0;font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.phero h1{font-size:clamp(38px,6vw,84px);line-height:1;letter-spacing:-.035em;max-width:16ch;margin:14px 0 20px;text-wrap:balance}
.phero .sub{font-size:clamp(17px,1.8vw,20px);max-width:600px}

/* ---------- Unterseiten: Baukasten-Bausteine im Studio-Ton ----------
   Die Unterseiten nutzen .box/.grid3/.ticks/.step aus dem Baukasten.
   Statt sie neu zu schreiben, verlieren sie hier Kasten, Schatten und
   Rundung und werden zu Spalten mit Haarlinie — dasselbe Vokabular
   wie die Startseite. */
.eyebrow{font-size:12.5px;font-weight:600;letter-spacing:.12em;color:var(--muted);margin-bottom:16px}
.box:not(.dark){background:transparent;border:0;border-top:1px solid var(--ink);border-radius:0;padding:22px 0 8px;box-shadow:none}
html.dunkel .box:not(.dark){border-top-color:rgba(255,255,255,.6)}
.box[data-lift]::before{display:none}
.box h3{font-size:clamp(19px,2vw,24px);letter-spacing:-.015em;margin-bottom:10px}
.box p{color:var(--muted);font-size:15.5px}
.box.dark{border-radius:10px}
.ticks li{padding-left:24px;font-size:15.5px}
.ticks li:before{content:"";top:11px;width:12px;height:1.5px;background:var(--aktion-schrift)}
.ticks.no li:before{background:var(--muted)}
.box.dark .ticks li:before{background:var(--aktion)}
.steps .step{background:transparent;border:0;border-left:1px solid var(--line);border-radius:0;padding:4px 0 8px 22px;box-shadow:none}
.steps .step .n{background:transparent;color:var(--aktion-schrift);width:auto;height:auto;font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;border-radius:0;margin-bottom:12px}
.steps .step h3{font-size:clamp(20px,2.2vw,26px)}
.note{border-left:2px solid var(--aktion-schrift);background:transparent;border-radius:0;padding:4px 0 4px 18px}
.dl li{border-color:var(--line)}

/* Telefon auf dem Handy (Codex 08.09., blockierend): oben rechts ist die Nummer
   unter 1000 px ausgeblendet, Unterseiten haben keinen Mobilbalken. Deshalb steht sie
   im aufgeklappten Menue und als Textweg im Kopf jeder Unterseite. */
.menu-tel{display:none}
@media(max-width:1000px){.menu-tel{display:block}.kopf .menu .menu-tel a{font-weight:700;color:var(--ink)}}
.phero .wege{display:flex;flex-wrap:wrap;gap:6px 34px;margin:0 0 8px}
.phero .wege a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;font-size:clamp(16px,1.6vw,19px);color:var(--ink);
  text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:6px;text-decoration-color:var(--line);
  transition:text-decoration-color .2s ease-out,color .2s ease-out}
.phero .wege a:first-child{font-variant-numeric:tabular-nums}
.phero .wege a:hover{text-decoration-color:var(--aktion-schrift);color:var(--aktion-schrift)}