/* vorschau.css — das eigene Stylesheet der Vorschau.
 *
 * Angelegt in Auftrag A33. In A33 bewusst leer: A33 baut das Geruest, keine
 * Gestaltung. Seit A46 traegt sie die Gestaltung.
 *
 * WOFUER SIE DA IST
 * Jede Gestaltungsaenderung der Vorschau gehoert ausschliesslich hierher.
 * all.css ist geteilt — sie liegt auf denselben 37 Live-Seiten. Wer dort etwas
 * aendert, aendert die oeffentliche Seite mit und merkt es erst, wenn der Kunde
 * anruft. all.css bleibt tabu, solange die Vorschau Vorschau ist.
 *
 * Diese Datei wird NACH all.css eingebunden. Sie ueberschreibt also, sie
 * ersetzt nicht: eine Regel hier gewinnt bei gleicher Spezifitaet.
 *
 * CACHE-ANHAENGSEL: ?20260813m   (A46 setzte ?20260813, A46/2 das b, A49 das c,
 * A52 das d, A53 das e, A54 das f, A56 das g, A57 das h, A58 das i, A61 das j,
 * A62 das k, A63 das l, A64 das m)
 * DIESE ZEILE STAND IN A63 AUF "j", WAEHREND DIE DATEI AUF "k" LIEF — A62 hat
 * das Anhaengsel richtig gesetzt und diesen Kommentar vergessen. Wer hier
 * nachliest, misst den Ort trotzdem in BasisLayout.astro nach (E9).
 * Es steht in src/layouts/BasisLayout.astro und ist ein EIGENES — getrennt von
 * dem hinter all.css (?20260811) und dem hinter all.js (?20260731). Wer diese
 * Datei anfasst, setzt nur dieses Anhaengsel hoch, sonst holen wiederkehrende
 * Besucher grundlos 40 KB neu (gemessen in A19, Regel seit A20).
 * Die .htaccess auf IONOS haelt CSS einen Monat im Browser vor — ohne neue
 * Adresse bekaeme ein Wiederkehrender die alte Datei. Auf Strato gibt es keine
 * solche Regel, dort ist das Anhaengsel harmlos.
 *
 * A64, 14.08.2026 — Annas Texte sind eingebaut (Vorspann, acht
 * Kategorieband-Saetze, drei Kontaktbaender). Gebraucht hat das genau eine
 * Regel: der Abstand ueber "Termin vereinbaren" im neuen Kontaktband,
 * Abschnitt 14 ganz unten — dieselbe Bauart wie A61/12.3 und A62/13, weil
 * D9 jede Abstands-Hilfsklasse am .btn totlegt. Alles Uebrige traegt aus
 * dem Bestand: der Vorspann aus dem h6 der Kopfspalte, die acht Saetze aus
 * dem tc-1420-h6 des Experten-Fragen-Blocs, das Band aus bgc-5545 und
 * row g-0.
 *
 * A63, 14.08.2026 — Drei Handgriffe aus Christians Sichtdurchgang: der
 * Kopfblock von /ueber-uns/ bekommt ab 992 px die Luft nach unten
 * zurueck, die N1 ihm optisch genommen hat (Abschnitt 12.6, gemessener
 * Regelabstand der Seite: 40 px). Die me-2-Regel aus Abschnitt 8 ist
 * gestrichen, damit der einzelne Knopf "Zum Parkett" unter 992 px
 * mittig steht; mb-2 bleibt. Der dritte Punkt, ein ueberzaehliges <br>
 * auf /bodenbelaege/, steht im Markup, nicht hier.
 *
 * A62, 14.08.2026 — Der Satz "Rufen Sie an unter 0234 14015 ..." ist aus
 * den letzten sieben Bauteilen der Vorschau verschwunden. Er war dort
 * ueberall zugleich der Abstandhalter ueber dem Knopf; Abschnitt 13 ganz
 * unten stellt die gemessenen 24 px wieder her, nach demselben Muster wie
 * A61/12.3. Abschnitt 8 wurde nachgemessen und bleibt — der Grund steht
 * dort.
 *
 * A61, 14.08.2026 — Nacharbeiten aus Christians Sichtdurchgang: Abstand
 * Ueberschrift zu Subline, Zahlenband in die Container-Flucht, Knopfabstand
 * auf /parkett/, Sidebar-Schrift, Lightbox ohne Rand. Abschnitt 12 ganz unten.
 *
 * A58, 14.08.2026 — Das Glossar: aus einem Absatz mit 142 <br> werden 47
 * Eintraege in 20 Buchstabengruppen, dazu die A-Z-Leiste und die 46
 * "mehr zu ..."-Links. Alles in Abschnitt 11 ganz unten.
 *
 * A54, 13.08.2026 — Die Hinweiskachel bekommt unter 768 px dieselbe
 * Titelgroesse wie die acht anderen (15 px). Die dazugehoerige Kuerzung
 * des Satzes steht im Markup von vorschau/BlocStart.astro, nicht hier.
 * Dazu Abschnitt 8: der Abstand zwischen den zwei Knoepfen im
 * Parkett-Abschnitt, weil die Bootstrap-Klassen dafuer nicht ankommen.
 *
 * A53, 13.08.2026 — Die Startseiten-Kacheln auf dem Telefon: zwei
 * nebeneinander statt einer, ohne Kicker und ohne Untertitel, Titel 15 px,
 * und der Fuss bleibt unter 768 px auch in Variante 1 sichtbar. Alles in
 * einem Block, Abschnitt 7 ganz unten — der Grund steht dort.
 *
 * A49, 13.08.2026 — Korrekturen nach Christians Durchgang am Telefon:
 * schwaechere Textschatten auf den Kacheln, breitere Seitenleiste unter
 * 768 px, Knopfschrift 13 px, Fussbereich wieder in der Reihenfolge des
 * Entwurfs. Alle vier Stellen sind unten mit "A49" gekennzeichnet.
 *
 * A46, 13.08.2026 — Optik: Startseiten-Kacheln, Sidebar, Produktkastenkoepfe,
 * der Abstand aus A42 und der 1/2-Schalter fuers Kundengespraech.
 * Die Overlay-Regeln der zugekauften Blocs-Erweiterung bleiben in all.css
 * stehen und laufen ins Leere: die Live-Startseite benutzt sie weiter, bis der
 * Kunde die Vorschau freigibt. Wer sie jetzt loescht, zerstoert die
 * oeffentliche Startseite — und zwar unbemerkt, weil der Server seit A37
 * hinterherhaengt.
 */

/* ------------------------------------------------------------------ *
 * 1 · Gemeinsame Werte (A46 Abschnitt 1)
 * Alle Namen tragen das Praefix rk-, damit sie mit nichts aus all.css
 * oder Bootstrap kollidieren. Die Farben sind die vier --swatch-var-*
 * aus all.css, hier nur unter sprechendem Namen gespiegelt; am
 * 13.08. geprueft, dass alle vier dort existieren.
 * ------------------------------------------------------------------ */
:root{
  --rk-radius:5px;
  --rk-ease:cubic-bezier(.2,.7,.2,1);
  --rk-gelb:var(--swatch-var-159);    /* #FFDB83 */
  --rk-rot:var(--swatch-var-779);     /* #8D1A18 */
  --rk-blau:var(--swatch-var-7662);   /* #0070E3 */
  --rk-creme:var(--swatch-var-1420);  /* #FFFBF7 */
  --rk-creme-2:var(--swatch-var-3166);/* #FFF6EA */
  --rk-warm:58,46,40;                 /* Warmton fuer Verlaeufe — nie Schwarz */
  --rk-linie:rgba(141,26,24,.14);
  --rk-grau:#545156;
}

/* ------------------------------------------------------------------ *
 * 2 · Startseiten-Kacheln (A46 Abschnitt 2)
 * ------------------------------------------------------------------ */

/* Das Raster traegt eigene Spaltenzahlen statt .design-grid-overlay:
 * jenes schaltet unter 992 px auf ZWEI Spalten und bleibt dort bis 0.
 *
 * A46 bis A52 stand unter 768 px EINE Kachel je Zeile: bei zwei Spalten
 * auf 360 px bleiben je Kachel 155 px (A53 nachgemessen), und ein
 * 21-px-Titel bricht darin zwangslaeufig um.
 * A53, 13.08.2026: Der Titel ist unter 768 px nicht mehr 21 px gross,
 * damit faellt der Grund weg. Zwei Kacheln stehen jetzt von 360 px an
 * nebeneinander; die einspaltige Stufe gibt es nicht mehr. Die Regeln
 * dazu stehen gesammelt in Abschnitt 7 — sie muessen HINTER Abschnitt 6
 * stehen, sonst gewinnen .kachel-kicker{display:block}, der 21-px-Titel
 * und die verdeckt-Regel als spaetere Regeln gleicher Spezifitaet.
 * Alex' Entwurf zog die Grenze zur Einspaltigkeit bei 620 px. Mit A53
 * gibt es gar keine einspaltige Stufe mehr, die Abweichung ist damit
 * gegenstandslos. */
.kachel-raster{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  column-gap:20px;
  row-gap:20px;
}
@media (max-width:991.98px){
  .kachel-raster{grid-template-columns:1fr 1fr;column-gap:18px;row-gap:18px}
}

.kachel{
  position:relative;
  display:block;
  overflow:hidden;
  border-radius:var(--rk-radius);
  aspect-ratio:3/2;
  text-decoration:none;
  background:#ddd;
  box-shadow:0 1px 2px rgba(0,0,0,.06);
}
.kachel:focus-visible{outline:3px solid var(--rk-rot);outline-offset:3px}

.kachel img,
.kachel picture,
.kachel video{
  width:100%;height:100%;display:block;object-fit:cover;
}
.kachel img{
  transition:transform .7s var(--rk-ease),filter .55s var(--rk-ease);
}
.kachel:hover img{transform:scale(1.05);filter:grayscale(.6) contrast(1.04)}

/* Farbflaeche in der Kachelfarbe --kf, in Ruhe unsichtbar */
.kachel-flaeche{
  position:absolute;inset:0;
  background:var(--kf,#7C7574);
  opacity:0;
  transition:opacity .45s var(--rk-ease);
  pointer-events:none;
}
.kachel:hover .kachel-flaeche{opacity:.93}

/* Der Fuss traegt den Verlauf. Warmton, nie Schwarz. */
.kachel-fuss{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:16px 18px 15px;
  background:linear-gradient(to top,
    rgba(var(--rk-warm),.66) 0%,
    rgba(var(--rk-warm),.38) 40%,
    rgba(var(--rk-warm),.10) 74%,
    rgba(var(--rk-warm),0) 100%);
  transition:background .45s var(--rk-ease);
  pointer-events:none;
}
.kachel:hover .kachel-fuss{
  background:linear-gradient(to top,
    rgba(var(--rk-warm),.30) 0%,
    rgba(var(--rk-warm),.12) 55%,
    rgba(var(--rk-warm),0) 100%);
}
/* Traeger von Kicker, Titel und Untertitel. Auf Kachel 7 steht daneben das
 * P-Schild, dort ist der Fuss ein Flexkasten — deshalb ueberall derselbe
 * Wrapper, damit beide Faelle dieselbe Struktur haben. */
.kachel-zeilen{display:block;min-width:0}

/* Der Textschatten ist kein Schmuck: er ersetzt die dunkle Flaeche unter
 * der Schrift. Im Rollover uebernimmt die Farbflaeche, dann faellt er weg.
 *
 * A49 Punkt 2, 13.08.2026: deutlich schwaecher. Am Bildschirm wirkte der
 * A46-Wert wie eine schwarze Unterlegung statt wie ein Abheben.
 *   Kicker  0 1px 5px rgba(30,20,14,.7)  ->  0 1px 3px rgba(30,20,14,.28)
 *   Titel   0 1px 7px rgba(30,20,14,.55) ->  0 1px 4px rgba(30,20,14,.22)
 * NICHT ganz entfernt: unter der Schrift liegt in dieser Fassung keine
 * dunkle Flaeche mehr, der Schatten ist das Einzige, was sie vom Bild
 * trennt. Wer ihn streicht, verliert die Lesbarkeit auf hellen Motiven. */
.kachel-kicker{
  display:block;margin:0 0 5px;
  font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--rk-creme-2);
  text-shadow:0 1px 3px rgba(30,20,14,.28);
  transition:text-shadow .38s var(--rk-ease);
}
.kachel:hover .kachel-kicker{text-shadow:none}

/* !important ist hier Pflicht, nicht Bequemlichkeit: all.css setzt
 * p{font-size:16px!important;line-height:1.4!important} als BARE-Element-
 * Regel, dazu drei Breakpoint-Varianten (14px, 13px, 13px). Eine Klasse
 * ohne !important verliert dagegen, egal wie spaet sie steht — am
 * 13.08. im Browser gemessen, nicht aus dem Stylesheet abgeleitet
 * (messfallen.md D2). Betroffen sind genau die <p>: Titel und Untertitel.
 * Der Kicker ist ein <span> und braucht nichts. */
.kachel-titel{
  display:flex;align-items:center;margin:0!important;
  font-size:21px!important;font-weight:700;line-height:1.15!important;
  /* Ohne diese Zeile erbt der Titel Inter-Regular aus der p-Regel von
   * all.css. Ein 700er Inter existiert lokal nicht — siehe Kommentar
   * bei .header-referenzen-typo. Inter-SemiBold ist der schwerste. */
  font-family:"Inter-SemiBold"!important;
  letter-spacing:-.01em;color:#fff!important;
  text-shadow:0 1px 4px rgba(30,20,14,.22);   /* A49 Punkt 2, siehe .kachel-kicker */
  transition:text-shadow .38s var(--rk-ease);
}
.kachel:hover .kachel-titel{text-shadow:none}

/* Der gelbe Marker waechst im Rollover vor dem Titel auf */
.kachel-titel::before{
  content:"";flex:0 0 auto;
  width:0;height:9px;margin-right:0;
  background:var(--rk-gelb);border-radius:1px;
  transition:width .34s var(--rk-ease),margin-right .34s var(--rk-ease);
}
.kachel:hover .kachel-titel::before{width:9px;margin-right:11px}

.kachel-sub{
  margin:0!important;overflow:hidden;
  max-height:0;opacity:0;
  font-size:14px!important;line-height:1.35!important;font-weight:500;color:rgba(255,255,255,.94)!important;
  transition:max-height .4s var(--rk-ease),opacity .3s var(--rk-ease),margin .4s var(--rk-ease);
}
.kachel:hover .kachel-sub{max-height:44px;opacity:1;margin-top:7px!important}

/* 2.3 Einlauf beim Laden.
 *
 * Die Ausgangslage (unsichtbar, 26 px tiefer, leicht verkleinert) haengt an
 * der Klasse .bereit — und die setzt ein Skript. Das ist Absicht und die
 * eine Stelle, an der diese Datei vom Entwurf abweicht:
 * stuende opacity:0 direkt an .kachel, blieben die neun Kacheln fuer jeden
 * Besucher OHNE JavaScript dauerhaft unsichtbar. Kein Einlauf ist ein
 * Schoenheitsfehler, eine leere Startseite ist einer zu viel.
 * Das Skript steht unmittelbar hinter dem Raster im Markup, laeuft also
 * noch vor dem ersten Anzeigen — es blitzt nichts auf.
 *
 * Die Staffelung selbst steckt in --kachel-nr im Markup, nicht im Skript:
 * 70 ms je Kachel, die neunte startet damit 560 ms nach der ersten (8 x 70).
 * Ausgeloest wird der Lauf von .laeuft, das der IntersectionObserver
 * einmalig setzt (threshold .2, danach unobserve). */
.kachel-raster.bereit .kachel{
  opacity:0;
  transform:translateY(26px) scale(.965);
}
.kachel-raster.bereit.laeuft .kachel{
  animation:kachel-einlauf .62s var(--rk-ease) forwards;
  animation-delay:calc(var(--kachel-nr,0) * 70ms);
}
@keyframes kachel-einlauf{to{opacity:1;transform:none}}

/* 2.5 Filmkacheln. Der Mechanismus aus A17/A20 bleibt unangetastet —
 * .video-klick, .video-lokal und .video-klick-knopf sind woertlich die
 * alten, das Skript in BlocStart.astro ist nicht angefasst. Hier wird nur
 * die Huelle neu gezeichnet.
 * Die Halter fuellen die Kachel: die Bootstrap-Klasse .ratio ist entfallen,
 * weil sie ein eigenes Seitenverhaeltnis erzwingt und die Kachel bereits
 * 3/2 vorgibt. */
.kachel .video-klick,
.kachel .video-div{
  position:absolute;inset:0;
  width:100%;height:100%;
  overflow:hidden;
}
.kachel .video-klick-bild{width:100%;height:100%;object-fit:cover}

/* Der Abspielknopf ist immer sichtbar. Die vier Selektoren tragen je drei
 * bis vier Klassen, weil der <style is:inline> in BlocStart.astro im
 * <body> steht und bei gleicher Spezifitaet spaeter kaeme als diese Datei
 * (messfallen.md D2 — die Kaskade entscheidet, nicht die Absicht). */
.kachel .video-klick-knopf{
  display:block;position:absolute;inset:0;z-index:3;
  width:100%;height:100%;padding:0;border:0;background:transparent;cursor:pointer;
}
.kachel .video-klick-knopf .video-klick-symbol{
  position:absolute;top:44%;left:50%;
  transform:translate(-50%,-50%);
  width:56px;height:56px;opacity:1;
  border-radius:50%;
  background:rgba(255,251,247,.9);
  box-shadow:0 2px 14px rgba(30,20,14,.28);
  transition:background .4s var(--rk-ease),transform .4s var(--rk-ease);
}
.kachel .video-klick-knopf .video-klick-symbol circle{fill:transparent;stroke:none}
.kachel .video-klick-knopf .video-klick-symbol path{fill:var(--rk-rot)}
.kachel:hover .video-klick-knopf .video-klick-symbol{
  background:var(--rk-gelb);
  transform:translate(-50%,-50%) scale(1.08);
}

/* 2.6 Kachel 7, Parkplatz. Sie zeigt ihren Text in BEIDEN Varianten —
 * ein Hinweis, den man nicht suchen soll. */
.kachel-hinweis .kachel-fuss{display:flex;align-items:flex-end;gap:13px}
.kachel-hinweis .kachel-titel{font-size:18px!important;line-height:1.22!important}
.kachel-hinweis .kachel-titel::before{display:none}
.kachel-pschild{
  flex:0 0 auto;
  width:36px;height:36px;margin-bottom:1px; /* optischer Ausgleich zur Schriftlinie */
  border-radius:4px;
  background:var(--rk-blau);color:#fff;
  display:grid;place-items:center;
  font-size:23px;font-weight:800;line-height:1;
  box-shadow:0 1px 7px rgba(20,14,10,.4);
}

/* ------------------------------------------------------------------ *
 * 6 · Variante 1: Titel erst beim Rollover (A46 Abschnitt 6)
 * Der 1/2-Schalter setzt .verdeckt am Raster. Kachel 7 bleibt sichtbar.
 * ------------------------------------------------------------------ */
.kachel-raster.verdeckt .kachel-fuss{
  opacity:0;transform:translateY(10px);
  transition:opacity .38s var(--rk-ease),transform .38s var(--rk-ease),background .45s var(--rk-ease);
}
.kachel-raster.verdeckt .kachel:hover .kachel-fuss{opacity:1;transform:none}
.kachel-raster.verdeckt .kachel-hinweis .kachel-fuss{opacity:1;transform:none}

.vs-schalter{
  display:inline-flex;align-items:center;gap:0;
  height:30px;padding:3px;
  background:var(--rk-creme);
  border:1px solid var(--rk-linie);
  border-radius:99px;
  vertical-align:middle;
}
.vs-schalter button{
  font:inherit;font-size:13px;font-weight:700;line-height:1;
  color:var(--rk-rot);background:transparent;border:0;border-radius:99px;
  width:34px;height:22px;padding:0;cursor:pointer;
  transition:background .25s var(--rk-ease),color .25s var(--rk-ease);
}
.vs-schalter button[aria-pressed="true"]{background:var(--rk-rot);color:#fff}

/* ------------------------------------------------------------------ *
 * 7 · Die Kacheln auf dem Telefon (A53, 13.08.2026)
 *
 * WARUM DIESER BLOCK GANZ HINTEN STEHT und nicht oben bei Abschnitt 2:
 * Er ueberschreibt vier Regeln, die WEITER OBEN stehen und dieselbe
 * Spezifitaet haben (.kachel-kicker, .kachel-titel, .kachel-sub) oder
 * eine hoehere (.kachel-raster.verdeckt .kachel-fuss aus Abschnitt 6).
 * Bei gleicher Spezifitaet entscheidet die Reihenfolge, und ein
 * @media-Block hebt sie nicht auf (messfallen.md D2). Stuende dieser
 * Block oben, waere der Kicker weiterhin sichtbar und der Titel 21 px.
 *
 * !important beim Titel ist Pflicht, nicht Bequemlichkeit: all.css setzt
 * p{font-size:…!important;line-height:…!important} als Element-Regel und
 * unter 575 px ein ZWEITES Mal mit anderen Werten (messfallen.md D8).
 * Ohne !important gewaenne die neue Groesse ueber 575 px und verloere
 * darunter — ausgerechnet auf den Baendern, um die es hier geht.
 *
 * Der Untertitel geht nicht verloren: er steht auf max-height:0 und
 * klappt nur bei :hover auf. Ein Finger loest kein :hover aus, auf dem
 * Telefon war er nie zu sehen. display:none schreibt den tatsaechlichen
 * Zustand hin.
 *
 * Die letzte Zeile ist eine Korrektur, keine Gestaltung: Variante 1
 * (.verdeckt, Vorauswahl seit A49) zeigt den Fuss erst beim Rollover.
 * Auf einem Geraet ohne Zeigegeraet heisst das neun stumme Bilder ohne
 * einen einzigen Titel. Unter 768 px bleibt der Fuss deshalb immer
 * sichtbar; ab 768 px bleibt Variante 1 unangetastet.
 *
 * 15 px ist gemessen, nicht geschaetzt: Leiter 15 → 14 → 13,5 px auf
 * 360/375/390/575/576/767 px, genommen wurde die groesste Stufe, die
 * jeden Titel bei hoechstens zwei Zeilen und ohne Ueberlauf haelt.
 *
 * DIE HINWEISKACHEL WAR BIS A53 DIE AUSNAHME: .kachel-hinweis (Parkplatz)
 * traegt seit A46 eigene 18px!important mit ZWEI Klassen im Selektor und
 * schlug die Zeile hier. Ihr 44-Zeichen-Titel wurde auf 360–390 px am
 * Kachelrand abgeschnitten (bis 51,5 px, gemessen in A53).
 * A54 hat beides erledigt: hier unten steht jetzt eine eigene Zeile fuer
 * .kachel-hinweis .kachel-titel, und im Markup steht unter 768 px ein
 * kuerzerer Satz ("Parkplatz im Hof ist frei!") — umgeschaltet ueber die
 * Bootstrap-Hilfsklassen d-none/d-md-inline/d-md-none, deren Grenze in
 * all.css bei min-width:768px liegt und damit auf dieselbe Kante faellt
 * wie dieser Block. Belege in berichte/A54.md.
 * ------------------------------------------------------------------ */
@media (max-width:767.98px){
  .kachel-raster{grid-template-columns:1fr 1fr;column-gap:10px;row-gap:10px}
  .kachel-kicker{display:none}
  .kachel-sub{display:none}
  .kachel-titel{font-size:15px!important;line-height:1.2!important}
  /* A54: Die Hinweiskachel traegt seit A46 eigene 18px mit zwei Klassen im
   * Selektor und wird von der Zeile darueber nicht erreicht. Auf dem Telefon
   * soll sie dieselbe Groesse haben wie die acht anderen Kacheln — sonst
   * steht der gekuerzte Satz auf 84 px Textbreite mit 3 px Luft. */
  .kachel-hinweis .kachel-titel{font-size:15px!important;line-height:1.2!important}
  .kachel-titel::before{height:7px}
  .kachel-fuss{padding:10px 11px 9px}
  .kachel-raster.verdeckt .kachel-fuss{opacity:1;transform:none}
}

/* ------------------------------------------------------------------ *
 * 8 · Der Knopf "Zum Parkett" im Parkett-Abschnitt der Startseite
 *     (A54-Nachtrag, in A62 nachgemessen, in A63 auf me-2 verzichtet)
 * ------------------------------------------------------------------ */
/* A54-Nachtrag: me-2 und mb-2 kommen an den Knoepfen nicht an.
 * all.css setzt .btn{margin:0!important} rund 79.000 Zeichen HINTER
 * .me-2 — gleiche Spezifitaet, die spaetere Regel gewinnt. Mit der id
 * im Selektor ist die Reihenfolge egal. Die Hilfsklassen bleiben im
 * Markup stehen, damit die Absicht dort lesbar ist.
 *
 * NUR NOCH mb-2 STEHT HIER. Der Abschnitt trug bis A62 zwei Regeln,
 * gebaut fuer zwei Knoepfe nebeneinander; seit A61/N4 steht in #bloc-17
 * nur noch EINER ("Zum Parkett").
 *
 *   mb-2 (margin-bottom:12px) wirkt auf allen Baendern, in A62 mit
 *     deleteRule aus dem geladenen Stylesheet gemessen: 12,00 px auf
 *     390 / 768 / 1440 / 1600. Bei 390 px wird der Bloc 538,69 -> 526,69,
 *     der Folge-Bloc rueckt 12 px hoch, die Seite wird 12 px kuerzer;
 *     bei 768 / 1440 / 1600 px wird die Spalte 12 px flacher, und weil
 *     sie align-self-center traegt, rutscht der Knopf 6 px nach unten.
 *     Ein Inline-Block gibt seine senkrechten Raender an die Zeilenhoehe
 *     weiter — deshalb wirkt der Rand hier, anders als bei einem
 *     gewoehnlichen Inline-Element. Diese Regel bleibt.
 *
 *   me-2 (margin-right:12px) IST IN A63 GESTRICHEN — auf Christians "ja"
 *     vom 14.08. Sie war kein Aufraeumfall, sondern eine Optikfrage: der
 *     rechte Rand war das Erbe des zweiten Knopfes. Die Spalte ist bis
 *     991 px zentriert (text-center / text-md-center) und erst ab lg
 *     linksbuendig; ein rechter Rand am letzten Inline-Element zaehlt
 *     beim Zentrieren mit, also stand der einzelne Knopf dort 6,00 px
 *     LINKS der Spaltenmitte (gemessen 390 / 575 / 767 / 768 / 991 px).
 *     Ohne die Regel steht er auf 0,00 px Versatz. Ab 992 px ist die
 *     Spalte linksbuendig, dort war der rechte Rand ohnehin folgenlos
 *     (0,00 px in A62 gemessen, in A63 als Schutzwert wiederholt).
 *     Gegenreferenz im selben Lauf: der Knopf "Zu den Gewerbeboeden" in
 *     #bloc-21 traegt kein me-2 und stand vorher wie nachher auf
 *     0,00 / -0,01 px — er zeigt, dass die Messgroesse ueberhaupt
 *     anschlagen kann (B12). */
#bloc-17 .btn.mb-2{margin-bottom:12px!important}

/* ------------------------------------------------------------------ *
 * 3 · Sidebar-Navigation (A46 Abschnitt 3)
 * ------------------------------------------------------------------ */
#sidebar.offcanvas{
  background:var(--rk-creme);
  padding:0;
}

/* A49 Punkt 4, 13.08.2026 — die Panelbreite.
 *
 * ZUERST EIN BEFUND, damit ihn niemand zweimal bezahlt: A46 hat hier
 * --bs-offcanvas-width gesetzt (346 px, unter 400 px 310 px). Diese zwei
 * Angaben haben NIE gewirkt und sind deshalb entfallen. Bootstrap liest die
 * Variable in .offcanvas-end{width:var(--bs-offcanvas-width)} — genau diese
 * Regel ueberschreibt all.css aber mit einem festen Wert:
 *     .offcanvas-end{width:330px!important;max-width:330px!important}
 *     @media (max-width:767px) .offcanvas-end{width:280px!important;
 *                                min-width:280px;max-width:280px!important}
 * Gegen einen ausgerechneten !important-Wert kommt die Variable nicht an; sie
 * hat gar keinen Abnehmer mehr (messfallen.md D2 — die Regel, die dasteht,
 * muss nicht wirken). Am 13.08. gemessen: 330 px am Schreibtisch, 280 px auf
 * allen drei Telefonbaendern — die A46-Zahlen waren auf dem Bildschirm nie zu
 * sehen.
 *
 * NEU, nur unterhalb 768 px: 80 % der Fensterbreite, nach oben 380 px.
 * 280 px waren auf einem 390-px-Telefon 71,8 %; die vier Knoepfe brachen
 * dadurch um (Punkt 5).
 * Alle DREI Angaben muessen fallen — width, max-width UND min-width. Die
 * ersten beiden tragen in all.css !important, min-width nicht; ohne das
 * Ueberschreiben von min-width bliebe das Panel unter 350 px Fensterbreite
 * an 280 px kleben.
 * #sidebar davor ist Absicht: .offcanvas-end allein waere gleich spezifisch
 * wie die Regel in all.css, und dann entschiede allein die Reihenfolge der
 * beiden Dateien im <head>. Die id macht den Vorrang unabhaengig davon. */
@media (max-width:767.98px){
  #sidebar.offcanvas-end{
    width:80vw!important;
    max-width:380px!important;
    min-width:0!important;
  }
}
.vs-navi{
  display:flex;flex-direction:column;
  min-height:100%;
  padding:22px 0 20px;
}
.vs-kopf{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 22px 20px;
  position:relative;
}
/* Das Logo ist die Originaldatei. Nicht nachbauen, nicht einfaerben,
 * nicht beschneiden.
 *
 * A46/2, GEMESSEN am 13.08.: Bei 26 px Hoehe ist das Logo 245 px breit.
 * Im Panel bleiben bei 375 px Fensterbreite nur 236 px zwischen den
 * Innenabstaenden. Das Logo ist ein Flexkind und schrumpft von sich aus
 * nicht (min-width:auto bei Bildern) — es hat den Schliesser aus dem Panel
 * geschoben: Kante bei 397 px, Fenster 375 px, also 22 px ausserhalb und
 * nicht mehr antippbar.
 * Das war ein Fehler aus A46: dort war der Schliesser bei 360 px auf 27 px
 * gequetscht, das wurde mit flex:0 0 auto behoben — wodurch stattdessen das
 * Logo ueberlief. Beides zusammen loest erst diese Regel.
 * max-width laesst das Logo schmaler werden, object-fit:contain haelt dabei
 * das Seitenverhaeltnis. Seit A93 ist der Schliesser 26 px gross und absolut
 * positioniert: 40px = 26 Schliesser + 14 Abstand. */
.vs-logo{
  height:26px;width:auto;display:block;
  flex:0 1 auto;min-width:0;
  max-width:calc(100% - 40px);
  object-fit:contain;object-position:left center;
}
.vs-zu{
  width:22px;height:22px;
  /* Seit A93 sitzt der Schliesser absolut in der oberen rechten Ecke des
   * Kopfes (.vs-kopf ist dafuer position:relative), nicht mehr im Flexfluss:
   * kleiner als das Logo und klar ein Bedienelement. Dass er das Logo nicht
   * mehr wegdrueckt, haelt jetzt das max-width am .vs-logo frei — deshalb
   * dort 40px statt 47px. flex:0 0 auto bleibt wirkungslos stehen.
   * Herkunft: Bei 360 px am 13.08. auf 27 px gemessen — Sollwert war damals 34.
   *
   * A95, 02.09.2026: kein Rahmen und kein Radius mehr, 22 px statt 26, dafuer
   * die Glyphe selbst groesser (15 px statt 13) und weiter in die Ecke
   * (top:-6px, right:12px). Beim Ueberfahren nur noch opacity:.6 — eine
   * gefuellte rote Flaeche ohne Rahmen sah nach Fehlermeldung aus.
   * Die Trefferflaeche bleibt trotzdem fingergerecht: ::after legt ein
   * unsichtbares 44x44-Rechteck mittig darueber. Es aendert die Optik nicht,
   * weil es weder Farbe noch Rahmen traegt — und es vergroessert den Kasten
   * nicht, weil es absolut positioniert ist. */
  position:absolute;top:-6px;right:12px;
  flex:0 0 auto;
  display:grid;place-items:center;
  border:0;
  background:transparent;color:var(--rk-rot);
  font-size:15px;line-height:1;cursor:pointer;
  transition:opacity .25s var(--rk-ease);
}
.vs-zu::after{content:"";position:absolute;top:50%;left:50%;
  width:44px;height:44px;transform:translate(-50%,-50%)}
.vs-zu:hover{opacity:.6}
@media (prefers-reduced-motion:reduce){ .vs-zu{transition:none} }

.vs-liste{display:flex;flex-direction:column}
.vs-haupt{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;
  width:100%;
  padding:14px 22px;
  font-family:inherit;font-size:19px;font-weight:600;text-align:left;
  color:var(--rk-rot);text-decoration:none;
  background:transparent;border:0;border-top:1px solid var(--rk-linie);
  cursor:pointer;
  transition:padding-left .34s var(--rk-ease),background .34s var(--rk-ease);
  /* Ausgangslage des Einlaufs beim Oeffnen */
  opacity:0;transform:translateX(16px);
}
.vs-haupt.vs-letzte{border-bottom:1px solid var(--rk-linie)}
.vs-haupt::before{
  content:"";position:absolute;left:0;top:0;bottom:0;
  width:0;background:var(--rk-rot);
  transition:width .34s var(--rk-ease);
}
.vs-haupt:hover{padding-left:34px;background:var(--rk-creme-2)}
.vs-haupt:hover::before{width:8px}
.vs-pfeil{
  font-size:13px;color:rgba(141,26,24,.35);
  transition:color .34s var(--rk-ease),transform .34s var(--rk-ease);
}
.vs-haupt:hover .vs-pfeil{color:var(--rk-rot);transform:translateX(4px)}
.vs-haupt[aria-expanded="true"] .vs-pfeil{transform:rotate(90deg);color:var(--rk-rot)}

/* Einlauf der ersten Ebene: 50 ms Staffelung, ausgeloest beim Oeffnen
 * durch .show, das Bootstrap am Offcanvas setzt. */
#sidebar.show .vs-haupt{animation:vs-navrein .5s var(--rk-ease) forwards}
@keyframes vs-navrein{to{opacity:1;transform:none}}

/* 3.3 Untermenues — standardmaessig zu, Aufklappen per Klick.
 * grid-template-rows 0fr -> 1fr animiert sauber ohne feste Hoehe. */
.vs-unter{
  display:grid;grid-template-rows:0fr;
  background:#FDF7F0;
  box-shadow:inset 3px 0 0 var(--rk-linie);
  transition:grid-template-rows .42s var(--rk-ease);
}
.vs-unter.auf{grid-template-rows:1fr;border-bottom:1px solid var(--rk-linie)}
.vs-unter>div{overflow:hidden;display:flex;flex-direction:column}
.vs-unter.auf>div{padding:8px 0 12px}
.vs-unter a{
  position:relative;
  padding:7px 22px 7px 40px;
  font-size:14px;font-weight:500;color:var(--rk-grau);text-decoration:none;
  transition:color .3s var(--rk-ease),padding-left .3s var(--rk-ease);
}
.vs-unter a::before{
  content:"";position:absolute;left:24px;top:50%;
  width:0;height:7px;
  background:var(--rk-rot);border-radius:1px;
  transform:translateY(-50%);
  transition:width .3s var(--rk-ease);
}
.vs-unter a:hover{color:var(--rk-rot);padding-left:46px}
.vs-unter a:hover::before{width:7px}

/* Das "neu"-Faehnchen hinter den drei Ratgeber-Zeilen. Woertlich aus Alex'
 * Entwurf (Zeile 143). Bewusst unter .vs-unter eingehaengt statt als blankes
 * .neu: der Name ist zu allgemein, um ihn global zu vergeben — heute steht er
 * in all.css nicht, morgen vielleicht doch. */
.vs-unter .neu{
  display:inline-block;margin-left:8px;padding:2px 5px;
  font-size:9.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--rk-rot);background:var(--rk-gelb);
  border-radius:2px;vertical-align:2px;
}

/* 3.4 Fussbereich
 *
 * A49 Punkt 6, 13.08.2026: Die Umstellung aus A46/2 ist zurueckgedreht.
 * Firmenzeile und Oeffnungszeiten stehen wieder oben, die vier Knoepfe
 * darunter — die Reihenfolge aus Alex' Entwurf. Umgestellt wird im Markup
 * (Sidebar.astro), hier stehen nur die Abstaende.
 * margin-top:auto bleibt weg — es hatte den ganzen Block ans Panelende
 * geschoben.
 * Die zwei Masszahlen aus A46/2 gelten sinngemaess weiter, sie haengen jetzt
 * nur an anderen Nachbarn:
 *   18px zwischen dem Menuepunkt "Kontakt" und der Firmenzeile — das ist das
 *        padding-top hier; die Firmenzeile bringt selbst keinen oberen
 *        Abstand mehr mit (siehe .vs-firma).
 *   22px zwischen den Oeffnungszeiten und dem ersten Knopf — das ist das
 *        margin-bottom an .vs-zeiten.
 * Das zugeklappte Untermenue von "Kontakt" ist 0 hoch und zaehlt nicht mit. */
.vs-fuss{margin-top:0;padding:18px 22px 0}

/* Die Farbe MUSS !important tragen. all.css setzt
 *   p{color:var(--swatch-var-7747)!important}   /· 7747 = weiss ·/
 * als BARE-Element-Regel, und unter 575px ein ZWEITES Mal. Ohne !important
 * standen Firmenzeile und Oeffnungszeiten weiss auf Creme — unlesbar, der
 * Block sah leer aus (Knut, 13.08.). Gilt fuer alle vier Eigenschaften, die
 * jene Regel setzt: color, font-size, line-height, font-family
 * (messfallen.md D1/D2). */
.vs-firma{
  /* A49: oben 0 statt 22px. Die Firmenzeile ist jetzt das erste Kind des
   * Fussbereichs, ihr oberer Abstand kaeme zu den 18px padding hinzu. */
  margin:0 0 8px!important;
  font-size:14px!important;font-weight:700;line-height:1.4!important;
  font-family:"Inter-SemiBold"!important;
  color:var(--rk-rot)!important;
}
.vs-zeiten{
  /* A49: 22px nach unten — der Abstand zum ersten Knopf. Die Knoepfe bringen
   * oben keinen Abstand mit, hier faellt also nichts zusammen. */
  margin:0 0 22px!important;
  font-size:13px!important;line-height:1.55!important;
  font-family:"Inter-Regular"!important;
  color:var(--rk-grau)!important;
}

/* Die vier Knoepfe tragen weiterhin .design-button-sidebar. all.css setzt
 * dort height:50px!important, min-width:250px!important und einen
 * Schlagschatten — dokumentierte Absicht, die einen latenten Ueberlauf
 * einfriert (plan.md). Nichts davon wird in all.css entfernt; alles wird
 * hier ueberstimmt. height:auto ist Pflicht, sonst bricht der zweizeilige
 * Parkplatz-Knopf bei 360 px aus. */
.vs-karte.design-button-sidebar{
  display:flex!important;align-items:center;gap:13px;
  height:auto!important;
  min-height:62px!important;
  min-width:0!important;
  margin:0 0 13px 0!important;
  padding:11px 14px!important;
  background-color:#fff!important;
  border:1px solid var(--rk-linie)!important;
  border-radius:var(--rk-radius)!important;
  box-shadow:none!important;
  font-family:inherit!important;
  /* A49 Punkt 5: 13px statt 13.5px. GEMESSEN am 13.08. bei 360/375/390 px,
   * Zeilenrechtecke ueber Range (messfallen.md C5), Panel auf den neuen 80 %:
   *   13.5px -> 390: [2,2,1,1]   375: [2,3,1,2]   360: [2,3,1,2]
   *   13.0px -> 390: [1,2,1,1]   375: [2,2,1,1]   360: [2,3,1,2]
   *   12.5px -> 390: [1,2,1,1]   375: [2,2,1,1]   360: [2,3,1,2]
   * 13px ist damit die groesste Groesse, die auf 390 px das Sollbild
   * 1/2/1/1 erreicht — und unterhalb von 13px aendert sich auf keinem der
   * drei Baender noch etwas. Der Auftrag erlaubt bis 12.5px; kleiner zu
   * setzen kostet Lesbarkeit, ohne eine Zeile zu sparen.
   * Auf 375 und 360 px bleibt das Sollbild unerreicht; die Zahl, die dort
   * fehlt, steht in berichte/A49.md. */
  font-size:13px!important;font-weight:500;line-height:1.3;
  color:#2a2528!important;
  text-align:left!important;
  transition:border-color .28s var(--rk-ease),background-color .28s var(--rk-ease),transform .28s var(--rk-ease);
}
/* A49: Der Randzusammenfall aus A46/2 (13px unten am letzten Knopf gegen 22px
 * oben an .vs-firma) ist mit der neuen Reihenfolge gegenstandslos. Der letzte
 * Knopf ist jetzt das letzte Kind des Fussbereichs; unter ihm liegen seine
 * 13px und die 20px padding-bottom von .vs-navi. */

.vs-karte.design-button-sidebar:hover{
  border-color:var(--rk-rot)!important;
  background-color:var(--rk-creme-2)!important;
  box-shadow:none!important;
  transform:translateX(3px);
}
.vs-karte .vs-icon{
  flex:0 0 auto;
  width:23px;
  font-size:23px!important;
  line-height:1;
  text-align:center;
  margin:0!important;padding:0!important;
  /* A75: NICHT transparent. Seit A74 sind die Icons CSS-Masken -
     * background-color ist ihre Tinte, nicht ihr Hintergrund. Diese Regel
     * hat (0,2,0) und schlug die Maskenregel aus all.css; die vier Icons
     * in der Seitenleiste waren dadurch unsichtbar. */
    background-color:currentColor!important;
}
/* Das P-Symbol ist blau, die drei anderen sind rot. all.css setzt
 * .design-icon-sidebarparkplatz im Grundzustand zwar auf Blau, zieht es in
 * drei Medienabfragen aber wieder auf Rot — auf den kleinen Baendern waere
 * es also rot. Hier steht die Farbe bandunabhaengig. */
.vs-karte .design-icon-sidebarparkplatz{color:var(--rk-blau)!important}
.vs-karte .design-icon-sidebar{color:var(--rk-rot)!important}

.vs-karte .vs-zeilen{display:block;min-width:0}
.vs-karte .vs-zeilen b{display:block;font-weight:500}
.vs-karte .vs-zeilen span{display:block;margin-top:2px}

/* ------------------------------------------------------------------ *
 * 4 · Die drei Schwebefelder am rechten Rand (A46 Abschnitt 4)
 *
 * Grundlage berichte/A42-1.md: drei baugleiche Felder (Parkplatz, Telefon,
 * Navi) liegen unter 768 px als je 50 px breiter Streifen am rechten Rand
 * und decken Text ab — 117 h1-Ueberdeckungen auf 48 von 70 Adressen, dazu
 * 120 im Fliesstext. Noetig sind 38 px, bandunabhaengig konstant.
 * Fuenf von sechs Loesungsideen sind durch Messung ausgeschieden;
 * tragfaehig ist nur der Abstand am Inhaltsblock: 20 Grundpolster + 38.
 *
 * !important ist Pflicht, nicht Vorsicht: ohne das verliert die Regel auf
 * zwei von sechs Baendern gegen Bootstraps .pe-sm-0 (messfallen.md D2).
 *
 * Sie gilt nur in der Vorschau. Die Live-Seite bleibt unveraendert —
 * Christian sieht am Bildschirm, was die Daumenbreite kostet, bevor
 * irgendetwas davon live geht.
 * ------------------------------------------------------------------ */
@media (max-width:767.98px){
  /* A46/2, Christians Entscheidung vom 13.08.: die drei Felder werden auf dem
   * Telefon AUSGEBLENDET statt umgangen. Sie stehen inhaltlich doppelt —
   * Adresse, Parkplatz, Telefon und Mail sind seit A46 die vier Knoepfe im
   * Fussbereich der Sidebar, und die ist einen Daumendruck entfernt.
   *
   * display:none, NICHT visibility:hidden. Ein unsichtbares Element hat
   * weiterhin ein Rechteck und meldet spaeter Ueberdeckungen
   * (messfallen.md C1/B8). Geprueft wird "kein Rechteck", nicht "nicht zu
   * sehen". */
  .design-button-parkplatdiv,
  .design-button-telefondiv,
  .design-button-navidiv{display:none!important}
}

/* ------------------------------------------------------------------ *
 * HERKUNFTSNACHWEIS zu den zwei Regeln, die hier bis A46/2 standen.
 * Sie sind ERSATZLOS ENTFALLEN, weil es ohne Felder nichts mehr zu
 * umgehen gibt und der Text seine volle Breite zurueckbekommt. Wer nur
 * die Felder ausblendet und den Abstand stehenlaesst, nimmt Christian die
 * Daumenbreite, ohne dass sie noch einen Zweck haette.
 *
 * Die Zahlen bleiben stehen, falls die Felder je zurueckkommen:
 *
 * 1) Es stand hier   .bloc{padding-right:58px!important}
 *    58 = 20 Grundpolster + 38. Die 38 stammen aus berichte/A42-1.md:
 *    117 h1-Ueberdeckungen auf 48 von 70 Adressen, dazu 120 im Fliesstext.
 *
 * 2) Es stand hier   #kopf-navi.bloc{padding-right:20px!important}
 *    Ohne diese Ausnahme wirkte Regel 1 GAR NICHT. Die drei Felder sind
 *    position:absolute und haengen an .container INNERHALB von #kopf-navi,
 *    und der ist selbst ein .bloc. Gilt Regel 1 auch fuer ihn, schrumpft
 *    sein .container um dieselben 38 px und die Felder wandern MIT.
 *    Gemessen am 13.08. bei 390 px, sichtbarer Streifen ab rechtem Rand:
 *      ohne Regel ............... 70 px
 *      Regel auf ALLE .bloc ..... 108 px  (= 70 + 38, Feld mitgewandert)
 *      Regel ohne #kopf-navi .... 70 px   (Feld steht still)
 *
 * 3) Auch mit der Ausnahme reichten 38 px nicht. Reste je Adresse und Band:
 *      /bochum/ 375 ........... 6,6 px    (0 erst ab 66 px)
 *      /produkte/ 390 ......... 12,0 px   (0 erst ab 66 px)
 *      /gewerbespezial/ 375 ... 4,7 px    (0 erst ab 74 px)
 *    Vollstaendige Tabellen in berichte/A46.md, Abschnitt 3.
 * ------------------------------------------------------------------ */

/* ------------------------------------------------------------------ *
 * 5 · Produktkasten-Koepfe (A46 Abschnitt 5)
 * Karte, Farbe und Sublinks bleiben wie live. Geaendert wird nur der Kopf.
 * Die Regeln stehen in all.css und werden dort NICHT geloescht, sondern
 * hier ueberschrieben — auch die vier Breakpoint-Varianten von
 * .header-referenzen-typo (90 %, 90 %, 13px, 12px), sonst zoege eine
 * davon den Titel auf kleinen Baendern wieder zusammen.
 * Der Kopf traegt jetzt die Kastenfarbe dauerhaft: sie kommt vom
 * .card-body (bgc-*), deshalb background:transparent statt einer
 * eigenen Farbangabe — so bleibt jede Karte bei ihrer eigenen.
 * ------------------------------------------------------------------ */
.card-produkte-headerdiv{
  height:auto!important;
  min-height:0!important;
  padding:8px 20px!important;
  background-color:transparent!important;
  display:flex;align-items:center;
}
/* Die Hover-Aufhellung rgba(255,255,255,.5) faellt weg: der Kopf soll
 * dauerhaft in der Kastenfarbe stehen, nicht erst beim Darueberfahren. */
.card-produkte-headerdiv:hover{background-color:transparent!important}

.header-referenzen-typo{
  font-size:16.5px!important;
  /* A46/2, GEMESSEN am 13.08.: "Inter-Bold" gibt es in diesem Projekt NICHT.
   * all.css deklariert nur Inter-Light, Inter-Regular, Inter-Medium und
   * Inter-SemiBold. Breitenprobe bei 40px: "Inter-Bold" liefert exakt
   * dieselbe Textbreite wie eine frei erfundene Familie (520,0 px) —
   * es rendert also in der Systemschrift, nicht in Inter.
   * A46 hatte den Wert woertlich aus dem Auftrag uebernommen und damit
   * den vorherigen, echten Wert "Inter-Medium" verschlechtert.
   * Inter-SemiBold (600) ist der schwerste vorhandene Schnitt. */
  font-family:"Inter-SemiBold"!important;
  font-weight:700!important;
  color:var(--rk-creme)!important;
  text-align:left!important;
  line-height:1.25!important;
  letter-spacing:.005em;
  margin:0!important;
}

/* ------------------------------------------------------------------ *
 * 6 · A52 Teil A — das Polster unter dem letzten Knopf im Panel
 *
 * DER BEFUND aus A51, hier am 13.08. nachgemessen und bestaetigt: Das Panel
 * scrollt sauber (API, Mausrad und Wischgeste erreichen denselben Anschlag).
 * Am Anschlag endet der Mail-Knopf aber nur 13,00 px ueber der Panelunterkante
 * — auf allen vier Messpunkten dieselbe Zahl, sie haengt am Inhalt, nicht am
 * Fenster. Jede Browser-Fussleiste, die hoeher als 13 px ist, verdeckt ihn,
 * und Scrollen holt ihn nicht mehr hervor, weil der Kasten dort zu Ende ist.
 *
 * WELCHES ELEMENT DAS POLSTER TRAEGT, hat die Messung entschieden, nicht die
 * Vermutung — und die naheliegende Vermutung war falsch. Gemessen am 13.08.,
 * je Kandidat 140 px eingeschleust, Scrollweg bei 390x844 vorher 66 px:
 *     #sidebar        padding-bottom 140px angekommen -> Scrollweg  66  (nichts)
 *     .vs-navi        padding-bottom 140px angekommen -> Scrollweg  66  (nichts)
 *     .vs-fuss        padding-bottom 140px angekommen -> Scrollweg 206  (+140)
 * Die ersten beiden Regeln KOMMEN AN (computed 140px) und BEWIRKEN NICHTS —
 * genau der Fall aus messfallen.md D2/B15. Der Grund steht im Layout:
 * #sidebar ist ein Spalten-Flexkasten (Bootstrap), .vs-navi ist ein Flexkind
 * mit flex:0 1 auto und min-height:100% und wird deshalb auf die Fensterhoehe
 * zusammengedrueckt (gemessen: Rechteckhoehe 844 bei Inhalt 910). Ihr
 * Innenabstand liegt INNERHALB dieses 844-px-Kastens und erreicht die
 * Ueberlaufkante nie. Die Ueberlaufkante bildet das LETZTE KIND .vs-fuss
 * (Unterkante 910). Nur dessen Rechteck vergroessert den Scrollweg.
 *
 * 120 px deckt die ueblichen Fussleisten (49 / 83 / 88 px aus der
 * A51-Rechnung) mit Reserve; env(safe-area-inset-bottom) kommt fuer Geraete
 * mit Hausbalken dazu. .vs-fuss bringt bisher padding-bottom 0 mit, die 120
 * kommen also voll auf den Scrollweg: 66 -> 186, 243 -> 363, 185 -> 305,
 * 10 -> 130. Rest unter dem Mail-Knopf am Anschlag: 13 + 120 = 133 px.
 *
 * KEIN dvh, KEINE Hoehenakrobatik am Panel: die dynamische Fensterhoehe
 * wackelt, waehrend die Browserleiste ein- und ausfaehrt, und liesse das
 * Panel bei jeder Wischgeste zucken.
 *
 * !important ist Pflicht, weil all.css am Panel mit !important arbeitet (D8).
 * Die Zahl steht als Variable am Anfang der Regel — wer die Fussleiste eines
 * neuen Geraets abdecken muss, aendert genau eine Zahl.
 * ------------------------------------------------------------------ */
#sidebar .vs-fuss{
  --vs-panel-polster:120px;
  padding-bottom:calc(var(--vs-panel-polster) + env(safe-area-inset-bottom))!important;
}

/* ------------------------------------------------------------------ *
 * 7 · A52 Teil B — die Auto-Hide-Kopfzeile
 *
 * Christians Entscheidung vom 13.08.: Das Hamburger-Zeichen und der
 * 1/2-Schalter fahren mit weg, genau wie bei Lightblue. Kein separat
 * schwebender Knopf. Beim Hochscrollen kommen beide zurueck.
 *
 * Aus A51 feststehend: Die Verschiebung haengt an #kopf-navi. #sidebar ist
 * dessen GESCHWISTER, nicht Nachfahre — das Offcanvas wird nicht herausgeloest
 * und oeffnet bei verschobenem Kopf unveraendert (auf allen neun Baendern
 * geprueft). all.js setzt am Kopf nur die Klasse "sticky" und Inline-top:0px;
 * beides wird hier NICHT angefasst. transform ist frei und gehoert uns.
 *
 * translateY(-100%), NIE eine feste Pixelzahl: die Kopfhoehe wechselt ueber
 * die neun Baender dreimal (62,39 bis 76,30 px). Eine feste Zahl waere auf
 * sechs von neun Baendern falsch.
 *
 * DIE FALLE, DIE DIESEN BAU SONST FRISST (messfallen.md B16): Eine
 * Uebergangsangabe steht in der Kaskade ueber dem !important des Autors.
 * all.css setzt an .sticky-nav.sticky ein "transition: all .2s ease-out";
 * ohne eigene Angabe faehre der Kopf mit fremder Dauer statt mit 400/260 ms.
 * Deshalb steht die Dauer hier mit !important — und sie ist am Rueckgabewert
 * geprueft (computed transition-duration je Zustand, Bericht A52).
 * Die Reihenfolge ist Absicht: Der Uebergang richtet sich nach dem ZIEL-
 * zustand. Ausblenden = Weg zu .vs-navi-weg -> 400 ms. Einblenden = Weg
 * zurueck zur Grundregel -> 260 ms.
 * box-shadow bleibt mit seinen 0,2 s aus all.css stehen, sonst erschiene der
 * Schlagschatten beim Sticky-Werden schlagartig — eine Nebenwirkung, die
 * dieser Auftrag nicht bestellt hat.
 * ------------------------------------------------------------------ */
#kopf-navi{
  transition:transform 260ms var(--rk-ease),box-shadow .2s ease-out!important;
}
#kopf-navi.vs-navi-weg{
  transform:translateY(-100%);
  transition:transform 400ms var(--rk-ease),box-shadow .2s ease-out!important;
}

/* ------------------------------------------------------------------ *
 * 8 · A52 Teil C — die zeitgesteuerte Einfahrt im ersten Bild
 *
 * Betroffen sind nur die Effekt-Elemente, die BEIM LADEN im ersten Bild
 * stehen. Alle uebrigen bleiben scrollgekoppelt und werden nicht angefasst.
 * Welche das sind, entscheidet vorschau-navi.js zur Ladezeit am Rechteck —
 * nicht eine abgeschriebene Liste: die Menge haengt an der Fensterhoehe
 * (bei 768x900 sind es 16 Elemente, bei 768x1024 dieselben plus fuenf).
 *
 * WEG 1, durch Probe entschieden, nicht durch Lehrbuchwissen: all.js schreibt
 * den Versatz als Inline-transform. Eine CSS-Animation steht in der Kaskade
 * ueber normalen Inline-Angaben — mit animation-fill-mode:both gilt der
 * Animationswert schon waehrend der Verzoegerung und nach dem Ende dauerhaft.
 * all.js darf also weiterrechnen und weiterschreiben; sichtbar wird es nicht
 * mehr. Der gelesene transform waehrend und nach der Animation steht im
 * Bericht A52, Teil C.
 *
 * Die Startweite kommt aus all.js selbst (vorschau-navi.js liest den von
 * all.js geschriebenen Wert ab) — so ist die Richtung und die Weite exakt
 * die bisherige, und es gibt keine zweite Formel, die auseinanderlaufen kann.
 * ------------------------------------------------------------------ */
.vs-einfahrt{
  animation:vs-einfahrt 600ms ease-out 150ms both;
}
@keyframes vs-einfahrt{
  from{transform:translate3d(var(--vs-einfahrt-von,0px),0,0)}
  to  {transform:translate3d(0,0,0)}
}

/* ------------------------------------------------------------------ *
 * Pflicht aus Abschnitt 1: unter prefers-reduced-motion faellt jede
 * Bewegung weg. Die neun Kacheln stehen dann sofort da — kein Einlauf,
 * keine Transformation. Das ist keine Abschwaechung, sondern ein
 * Abschalten: wer das Betriebssystem so eingestellt hat, bekommt das
 * Bild, nicht die halbe Bewegung.
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
  .kachel,
  .kachel-raster.bereit .kachel,
  .kachel-raster.bereit.laeuft .kachel{opacity:1!important;transform:none!important;animation:none!important}
  .kachel img,
  .kachel:hover img{transform:none!important;transition:none!important}
  .kachel-flaeche,
  .kachel-fuss,
  .kachel-kicker,
  .kachel-titel,
  .kachel-titel::before,
  .kachel-sub,
  .kachel .video-klick-knopf .video-klick-symbol{transition:none!important}
  .kachel:hover .video-klick-knopf .video-klick-symbol{transform:translate(-50%,-50%)!important}
  .vs-haupt{opacity:1;transform:none;animation:none!important;transition:none!important}
  #sidebar.show .vs-haupt{animation:none!important;opacity:1;transform:none}
  .vs-haupt::before,
  .vs-pfeil,
  .vs-unter,
  .vs-unter a,
  .vs-unter a::before,
  .vs-zu,
  .vs-schalter button,
  .vs-karte.design-button-sidebar{transition:none!important}
  .vs-karte.design-button-sidebar:hover{transform:none}

  /* A52 Teil B: Der Kopf bleibt stehen. Nicht "faehrt langsamer weg" —
   * er faehrt gar nicht weg. vorschau-navi.js setzt die Klasse unter
   * reduced-motion erst gar nicht; diese Regel ist der zweite Riegel,
   * falls die Klasse aus einem frueheren Zustand noch haengt. */
  #kopf-navi,
  #kopf-navi.vs-navi-weg{transform:none!important;transition:none!important}

  /* A52 Teil C: Die Elemente im ersten Bild stehen sofort an ihrer
   * Endposition. transform:none!important ist Pflicht und nicht Zierde:
   * ohne das faellt das Element auf den Inline-transform von all.js
   * zurueck und stuende dauerhaft verschoben da. */
  .vs-einfahrt{animation:none!important;transform:none!important}
}

/* ------------------------------------------------------------------ *
 * 9 · A56 — die acht Kategoriebaender auf /haeufige-fragen/
 *
 * Die Seite war eine Rolle aus 80 h4/p-Paaren. Seit A56 sind es acht
 * Baender in der Bauform von faq-renovierung (BlocRenovierung.astro):
 * links h2 und Knopf, rechts zehn Aufklapper. Nachgezogen werden musste
 * genau ein Wert — alles Uebrige traegt aus all.css.
 * Getroffen wird ausschliesslich diese Seite: die acht Baender tragen
 * die Markierungsklasse .faq-band, die es sonst nirgends gibt. Ohne sie
 * wuerde die Regel auch faq-renovierung auf /renovierung/ mitziehen.
 * ------------------------------------------------------------------ */

/* 9.1 Abstand h2 -> Knopf.
 * D9: .btn traegt in all.css margin:0!important, .design-button-hell
 * ein zweites Mal — jede Abstands-Hilfsklasse ist am Knopf tot. Die
 * Regel braucht deshalb eine eigene, hoehere Spezifitaet und !important.
 * Gemessen am 13.08. auf allen neun Baendern: die Luecke betrug ueberall
 * 8 px, das ist allein die margin-bottom der h2, der Knopf steuert 0 bei.
 * Sollwerte hier sind die des Entwurfs A55 (h2 14 px + Knopfzeile 20 px
 * = 34 px auf dem breiten Band), nach unten gestuft:
 *   ab 992 px  8 + 26 = 34 px
 *   768-991    8 + 18 = 26 px
 *   bis 767    8 + 12 = 20 px                                        */
.faq-band .design-column-produkte .btn.faq-band-knopf{margin-top:26px!important}
@media (max-width:991px){
  .faq-band .design-column-produkte .btn.faq-band-knopf{margin-top:18px!important}
}
@media (max-width:767px){
  .faq-band .design-column-produkte .btn.faq-band-knopf{margin-top:12px!important}
}

/* 9.2 Bandinnenabstand — bewusst KEINE Regel. Gemessen, nicht geraten:
 * all.css setzt .design-column-faq ab 576 px auf 100 px und ueberschreibt
 * das mit !important in @media (max-width:991px) auf 20 px. Der Auftrag
 * vermutete die Umschaltstelle bei 767 px; sie liegt bei 991 px.
 * Getragen hat es auf allen neun Messbaendern: kein seitlicher Ueberlauf,
 * Aufklappbox 320 px (360) bis 727 px (767) einspaltig, 336,5 px (768)
 * bis 512,5 px (1440) zweispaltig.
 * Die engste Stelle ist 992 px: dort greift die 100-px-Fassung, waehrend
 * die Spalte noch halb so breit wie ein 992-px-Fenster ist — die Box
 * faellt von 448 px (991) auf 288,5 px (992) und erreicht 448 px erst
 * wieder bei rund 1.311 px. Das ist KEIN Schaden aus A56, sondern die
 * Fassung, mit der jedes Produktband des Projekts arbeitet, faq-renovierung
 * auf /renovierung/ eingeschlossen. Eine Sonderregel nur fuer diese Seite
 * wuerde sie aus der Reihe nehmen. Steht im Bericht A56, Entscheidung
 * gehoert an den Bildschirm, nicht ins Stylesheet.                      */

/* ------------------------------------------------------------------ *
 * 10 · A57 — die Lesestrecke auf /parkett-schleifen/
 *
 * Die Seite war eine Rolle aus h1, Lead und zehn h2/p-Paaren. Seit A57
 * hat sie Zahlenband, Sprungliste und eine Vorher/Nachher-Bildzeile.
 * Die Sprungliste selbst braucht hier nichts: sie ist markup-gleich mit
 * der von /haeufige-fragen/ und traegt aus all.css.
 * ------------------------------------------------------------------ */

/* 10.1 Lead-Absatz.
 * D8 ist hier kein Nebensatz, sondern der Grund fuer jede Zeile:
 * all.css setzt p{font-size:...!important} VIER Mal — 16 px ab 576,
 * 14 px bis 991, 13 px bis 767 und ein zweites Mal 13 px bis 575.
 * Eine Klasse (0,1,0) schlaegt das Element (0,0,1), aber nur mit
 * !important gegen deren !important. Gegenprobe gehoert aufs schmalste
 * Band, weil die vierte Fassung nur dort greift. */
.vs-lead{font-size:18px!important;line-height:145%!important}
@media (max-width:991px){
  .vs-lead{font-size:16px!important}
}

/* 10.2 Zahlenband, drei Zellen.
 * Raster kommt aus Bootstrap: col-md-4 heisst drei nebeneinander ab
 * 768 px, darunter gestapelt. Nur die Innenabstaende und die Erklaerzeile
 * sind eigene Werte, Sollwerte aus dem Entwurf A55.
 * Die Zahl ist eine h2 und erbt Inter-Light und Creme (--swatch-var-3166)
 * aus all.css — hier steht deshalb nichts zur Schrift der Zahl.
 * Die Erklaerzeile ist ein p: weiss kommt aus all.css
 * (p{color:var(--swatch-var-7747)!important}), Groesse und Zeilenbreite
 * nicht — die 14 px muessen gegen alle vier p-Fassungen gesetzt werden. */
.vs-zahlzelle{padding:38px 40px}
@media (max-width:991px){
  .vs-zahlzelle{padding:28px 26px}
}
.vs-zahlzelle p{font-size:14px!important;line-height:140%!important;max-width:26ch}

/* 10.3 Vorher/Nachher.
 * Zwei Spalten ab 576 px (col-sm-6), darunter gestapelt. Das Etikett
 * sitzt in der oberen linken Ecke des Bildfeldes, deshalb braucht das
 * Feld position:relative. Werte aus dem Entwurf A55: Inter-SemiBold,
 * 10 px, Kapitaelchen mit 0,14em Sperrung, dunkler Grund, Gelb
 * (--swatch-var-159).
 *
 * Das feste 4:3-Fenster ist kein Schmuck. Die zwei Quelldateien haben
 * NICHT dasselbe Format: -01.jpg ist 900x506 quer (1,78), -14.jpg ist
 * 675x900 hoch (0,75). Ohne Rahmen stuende das Nachher-Bild bei 390 px
 * Fensterbreite 520 px hoch neben einem 219 px hohen Vorher-Bild — fuer
 * ein Vorher/Nachher-Paar unbrauchbar. Der Entwurf A55 rahmt beide
 * Felder mit aspect-ratio:4/3; dieselbe Zahl steht hier.
 * object-fit:cover schneidet dabei zu: beim Querbild an den Seiten,
 * beim Hochbild oben und unten. Deshalb ist img-fluid am Bild raus —
 * dessen height:auto schlaegt sonst die 100 %. */
.vs-bildfeld{position:relative;line-height:0;aspect-ratio:4/3;overflow:hidden}
.vs-bildfeld picture{display:block;width:100%;height:100%}
.vs-bildfeld img{width:100%;height:100%;object-fit:cover;display:block}
.vs-bildetikett{
  position:absolute;top:0;left:0;z-index:2;
  font-family:"Inter-SemiBold",sans-serif;font-size:10px;line-height:1.4;
  letter-spacing:.14em;text-transform:uppercase;
  background:var(--swatch-var-4497);color:var(--swatch-var-159);
  padding:4px 9px;
}

/* 10.4 Der Textblock nach der Sprungliste faengt nicht noch einmal von
 * vorn an. bloc-lg gibt oben wie unten grosses Polster; zwischen
 * Sprungliste und erstem Abschnitt stuende es doppelt. Gemessen und
 * halbiert, nicht geraten — der Wert steht im Bericht A57. */
#sprungliste.vs-sprungbloc{padding-bottom:0}

/* 10.5 Die Sprungliste ist zweispaltig — ab jetzt wirklich.
 *
 * GEMESSEN, NICHT AUS DEM KLASSENNAMEN GESCHLOSSEN: `list-is-lg-2` klingt
 * nach zwei Spalten und liefert keine. In all.css stehen genau zwei Regeln
 * dazu, beide in @media (min-width:992px), und beide setzen nur Abstaende:
 *   .list-is-lg-2:not(.list-horizontal-layout):not(.navbar-nav) li{margin-bottom:.5rem!important}
 *   .list-horizontal-layout.list-is-lg-2 li, … .navbar-nav.list-is-lg-2 li{margin-left/right:.5rem!important}
 * Kein column-count, kein Raster, kein Flex. Am 13.08. auf
 * /vorschau/haeufige-fragen/ bei 1440 px nachgesehen: acht Listenpunkte,
 * alle auf derselben linken Kante (137 px), acht verschiedene Oberkanten —
 * eine Spalte. Die Sprungleiste dort war seit dem Blocs-Export einspaltig,
 * A56 hat das aus dem Klassennamen abgeschrieben und nicht gemessen.
 *
 * Diese Regel steht bewusst am Klassennamen und nicht an einer id: sie soll
 * BEIDE Sprunglisten der Vorschau treffen, die auf /haeufige-fragen/ und die
 * neue auf /parkett-schleifen/. Die dritte Fundstelle im Quellbaum liegt in
 * src/components/seiten/ und bleibt unberuehrt — vorschau.css wird in
 * BasisLayout.astro nur fuer die Vorschau eingebunden, die Live-Seite laedt
 * sie nicht.
 *
 * Werte aus dem Entwurf A55: zwei Spalten, 40 px Rinne, unter 768 px eine. */
.list-is-lg-2.list-unstyled{columns:2;column-gap:40px}
.list-is-lg-2.list-unstyled li{break-inside:avoid}
@media (max-width:767px){
  .list-is-lg-2.list-unstyled{columns:1}
}

/* ------------------------------------------------------------------ *
 * 11 · A58 — das Glossar auf /glossar/
 *
 * Die Seite war EIN <p> mit 142 <br>. Seit A58 sind es 47 Eintraege in
 * 20 Buchstabengruppen, darueber die A-Z-Leiste. Kein Wort ist geaendert
 * worden; alles Folgende ist Gestaltung, kein Text.
 *
 * Alle Namen tragen das Praefix gl-. Am 14.08. gegengelesen, dass keiner
 * davon in all.css vorkommt (0 Treffer je Name) — die Regeln hier koennen
 * also nichts aus dem Bestand mitziehen, weder auf der Vorschau noch
 * spaeter live. Getroffen wird ausschliesslich diese eine Seite.
 * ------------------------------------------------------------------ */

/* 11.1 Die A-Z-Leiste.
 * 27 Zeichen: 26 Buchstaben plus Oe nach O. 20 sind Links auf ihre Gruppe,
 * 7 sind Spans ohne Link (C I O Q X Y Z) — es gibt zu ihnen keinen Begriff.
 * Elemente und Links werden getrennt gezaehlt (messfallen.md A2).
 * min-width:30px haelt die Leiste als Raster ruhig, obwohl "Ö" und "W"
 * breiter laufen als "I". Die Links tragen im Markup .bloc-link; die
 * Farbe kommt von hier, weil all.css an .bloc-link nur fill setzt. */
.gl-abc{display:flex;flex-wrap:wrap;gap:2px;margin:0 0 34px}
.gl-abc a,.gl-abc span{
  font-family:"Inter-Medium";font-size:15px;line-height:1.2;
  min-width:30px;text-align:center;padding:6px 4px;
  border-radius:var(--rk-radius);text-decoration:none;color:var(--rk-rot);
}
.gl-abc a:hover{background:var(--rk-gelb);color:var(--rk-rot)}
/* Unbelegte Buchstaben: sichtbar, aber deutlich zurueckgenommen. Der Ton
 * ist der Cremeschatten des Entwurfs A55, kein Grau aus dem Nichts. */
.gl-abc span{color:#cdc2b4}

/* 11.2 Gruppenkopf — die Bauform der Produktkarten-Koepfe.
 * card-produkte-headerdiv + header-referenzen-typo, Werte aus Abschnitt 5.
 * Die Klasse card-produkte-headerdiv selbst ist hier NICHT benutzt: sie
 * traegt seit A46 background-color:transparent!important, weil dort die
 * Farbe vom .card-body kommt. Hier bringt der Kopf seine Farbe selbst mit
 * (bgc-*), also braucht er eine eigene Klasse — sonst loeschte das
 * !important aus Abschnitt 5 genau die Farbe, die den Balken ausmacht.
 * Das Typo-Bauteil .header-referenzen-typo wird dagegen unveraendert
 * mitbenutzt (16,5 px Inter-SemiBold in Creme, Abschnitt 5).
 *
 * scroll-margin-top:80px: die A-Z-Leiste springt ueber echte Anker. Die
 * Kopfzeile ist am gerenderten Element 76 px hoch (in A57 nachgemessen)
 * und faehrt beim Hochscrollen wieder ein — ohne diesen Rand stuende der
 * Gruppenkopf beim Sprung unter ihr. 80 = 76 + 4 px Luft. */
.gl-gruppe{margin:0 0 34px;scroll-margin-top:80px}
.gl-kopf{
  display:flex;align-items:center;
  padding:8px 20px;border-radius:var(--rk-radius);
}

/* 11.3 Die Eintraege, ab 992 px zweispaltig.
 * CSS-Grid und NICHT Bootstrap-Spalten — so ausdruecklich beauftragt und
 * hier auch das Richtige: die Spaltenzahl haengt an einer Zahl in dieser
 * Datei, nicht an Klassen an 47 Kaesten.
 * D13 ist der Grund fuer die Zaehlregel im Bericht: "zweispaltig" wird an
 * verschiedenen linken Kanten der Eintraege nachgezaehlt, nicht am Namen
 * einer Klasse geglaubt. Gemessen 14.08. — 1440/1200/992 px zwei Kanten,
 * 991 px und darunter eine.
 * Die Trennlinie ist der Bestandston --rk-linie (rgba(141,26,24,.14)),
 * dieselbe Linie, die der Entwurf A55 zeigt. */
.gl-eintraege{display:grid;grid-template-columns:1fr 1fr;gap:0 44px;padding:14px 0 0}
@media (max-width:991px){
  .gl-eintraege{grid-template-columns:1fr}
}
.gl-eintrag{padding:12px 0 14px;border-bottom:1px solid var(--rk-linie)}
/* Der Begriff steht dunkler als der Fliesstext, damit die Liste beim
 * Ueberfliegen Halt hat. rgb(32,32,32) ist --swatch-var-4497 aus all.css,
 * derselbe Ton, den A57 fuer die Bildetiketten benutzt. Groesse und
 * Schnitt bleiben geerbt (h4: 21/17/15/13 px, Inter-SemiBold). */
.gl-eintrag h4{color:var(--swatch-var-4497)}
/* D8: all.css setzt p{...!important} vier Mal — 16 px ab 576, 14 px bis
 * 991, 13 px bis 767 und ein zweites Mal 13 px PLUS Farbe bis 575. Diese
 * Regel setzt nur den Abstand, aber sie bekommt trotzdem !important und
 * ist auf dem schmalsten Band gegengelesen: die Hausregel aus plan.md
 * lautet "jede eigene Regel an einem <p> braucht !important", und eine
 * Ausnahme mit Begruendung im Kommentar ist genau die Stelle, an der
 * spaeter jemand stolpert. Die Textfarbe kommt wie im Bestand aus der
 * Klasse tc-1393 am Element, nicht von hier. */
.gl-eintrag p{margin-bottom:6px!important}

/* 11.4 Der "mehr zu ..."-Link.
 * Stil kommt aus all.css (.design-produkte: rot 779, Hover Terrakotta
 * 5545, Inter-Medium, Grund durchsichtig — alles mit !important). Hier
 * stehen nur die zwei Werte, die dort fehlen: Groesse und Blockform,
 * damit der Link unter der Erklaerung sitzt und nicht in ihr klebt. */
.gl-mehr{display:inline-block;font-size:14px;line-height:1.2;text-decoration:none}

/* ------------------------------------------------------------------ *
 * 12 · A61 — Nacharbeiten aus Christians Sichtdurchgang vom 14.08.2026
 *
 * Fuenf Punkte aus auftraege/nacharbeiten-sammelliste-2026-08-14.md, die
 * Gestaltung sind und deshalb hierher gehoeren: N1 (Abstand Ueberschrift
 * zu Subline), N2 (Zahlenband in die Container-Flucht), N4 (Abstand des
 * neuen Knopfes auf /parkett/), N5 (Sidebar-Schrift), N6 (Lightbox ohne
 * Rand). Die Textpunkte N3, N7 und N8 stehen im Markup, nicht hier.
 * Alle Zahlen unten sind am 14.08. im Browser gemessen, Layoutbreite je
 * Band ueber Emulation.setDeviceMetricsOverride PLUS setScrollbarsHidden
 * gestellt (B2) — Rohwerte in berichte/A61-rohdaten.json.
 *
 * A63 hat 12.6 angehaengt: die Luft UNTER dem Kopfblock von /ueber-uns/,
 * das Gegenstueck zu 12.1. Sie steht hier und nicht in einem eigenen
 * Abschnitt, weil sie dieselbe Stelle derselben Seite betrifft und nur
 * zusammen mit 12.1 zu lesen ist. Ihre Zahlen sind am 14.08. eigens
 * gemessen — Rohwerte in berichte/A63-rohdaten.json.
 * ------------------------------------------------------------------ */

/* 12.1 N1 — Abstand h1 -> direkt folgende h4.
 *
 * ERST DIE URSACHE, DANN DIE REGEL. Der grosse Abstand ist weder ein
 * Polster des Blocs noch ein eigener Zwischen-Bloc: er steckt in der h1
 * selbst. all.css gibt .design-column-headline ein
 * padding-bottom:50px!important (30 px bis 767, 15 px bis 575). Die
 * Klassen mb-0 pb-0 im Markup verlieren dagegen — gleiche Spezifitaet,
 * die spaetere Regel gewinnt (D9).
 *
 * DIE MESSGROESSE IST DIE TEXTKANTE, NICHT DAS ELEMENTRECHTECK. Weil die
 * 50 px INNEN liegen, meldet die Rechteckmessung h1-Unterkante zu
 * h4-Oberkante 0,00 px — ein Nullbefund aus der falschen Messgroesse
 * (B15). Gemessen wird deshalb ueber eine Range ueber den Textinhalt
 * (C5), also Textkante zu Textkante:
 *
 *   Band     h1->h4 vorher   Referenz h2->h4   padding-bottom hier
 *   1440           50,00 px           6,00 px        6,0 px
 *    991           50,00 px           7,59 px        7,5 px
 *    767           29,00 px           6,41 px        7,5 px
 *    390           14,80 px           6,20 px        6,5 px
 *
 * Die Referenz ist das Paar "Der Blick nach vorn" -> "Zukunft
 * gestalten..." bzw. in der Vorschau "Was dazugekommen ist." Sie traegt
 * auf ALLEN 59 h2+h4-Paaren der Vorschau denselben Wert: 8 px
 * margin-bottom an der h2, 0 px an der h4.
 * Warum der Zielwert nicht ueberall 8 px lautet: die Textkante liegt
 * nicht auf der Rechteckkante. Der Versatz ist reine Schriftmetrik und
 * je Band gemessen (0,00 / 0,00 / -1,00 / -0,20 px); die Werte oben
 * sind Referenz minus Versatz.
 *
 * DIE PAAR-LISTE. Zaehlregel: h4 ist das direkt folgende Geschwister-
 * element der h1. Gemessen im gerenderten Baum ueber alle 37 Adressen
 * der Vorschau: 35 h1, davon genau EINE mit direkt folgender h4 —
 * /ueber-uns/. Auf die uebrigen folgt 30x ein p, 1x h6, 1x ul, 2x
 * nichts. /kontakt/ und /referenzen/ tragen zwar spaeter im Bauteil
 * eine h4, aber nicht als Nachbarn der h1 — sie sind kein Paar.
 * Der Selektor beschreibt trotzdem die Sache und nicht die eine Seite:
 * :has(+ h4) traegt auch das naechste Paar, das jemand baut.
 *
 * WARUM .page-container DAVOR STEHT. Der erste Anlauf hiess blank
 * "h1:has(+ h4)" — und kam nicht an, gemessen am Rueckgabewert:
 * padding-bottom blieb auf 50 px, auch mit !important. :has() erbt die
 * Spezifitaet seines Arguments, und "+ h4" ist ein TYPselektor. Der
 * Selektor stand damit bei 0,0,2 und verlor gegen die 0,1,0 von
 * .design-column-headline — beide !important, also entscheidet die
 * Spezifitaet. .page-container ist die Huelle, die BasisLayout.astro um
 * jede Seite legt; damit steht der Selektor bei 0,1,2 und gewinnt.
 * Die Probe dazu steht im Bericht (B12/D6): mit 99 px eingeschleust
 * meldet die Messung 99 px, ohne die Regel 50 px. */
.page-container h1:has(+ h4){padding-bottom:6px!important;margin-bottom:0!important}
@media (max-width:991px){
  .page-container h1:has(+ h4){padding-bottom:7.5px!important}
}
@media (max-width:575px){
  .page-container h1:has(+ h4){padding-bottom:6.5px!important}
}

/* 12.2 N2 — Zahlenband: Band bleibt vollbreit, der Inhalt rueckt in die
 * Flucht des Fliesstextes darueber.
 *
 * Gemessen, woraus die Flucht besteht: der Textbloc #bloc-223 traegt
 * .bloc{padding:0 20px}, sein .container hat max-width:1440px und
 * padding 0 — der Fliesstext beginnt also bei 20 px und ist hoechstens
 * 1440 px breit. Das Zahlenband ist ein full-width-bloc (Polster 0) und
 * sein Container traegt bloc-no-padding-* — er lief bis an beide
 * Bildschirmkanten, die Zelle steuerte 40 px Innenabstand bei. Gemessene
 * Abweichung der linken Textkante Zelle 1 gegen den Fliesstext:
 * 20,00 px bei 1440, 6,00 px bei 768 und 390.
 *
 * max-width:1480px und nicht 1440: 1480 = 1440 Inhalt + 2x20 Polster.
 * Weil box-sizing:border-box gilt, ist erst damit der INHALTSkasten so
 * breit wie der Container des Fliesstextes — sonst laufen die zwei
 * Fluchten oberhalb 1440 px Fensterbreite um 20 px auseinander.
 * Die aeusseren Zellenpolster fallen weg, die inneren bleiben: so sitzt
 * Zelle 1 links auf der Textkante, Zelle 3 rechts, und zwischen den
 * Zellen stehen weiterhin 80 px. Unter 768 px sind die Zellen gestapelt
 * (col-md-4) — dort faellt das Polster auf beiden Seiten weg, sonst
 * stuenden Zelle 2 und 3 um 26 px eingerueckt.
 *
 * !important AN max-width IST PFLICHT, und zwar gemessen: all.css setzt
 * .full-width-bloc .container{width:100%;max-width:100%!important}. Der
 * erste Anlauf hier stand ohne !important — das padding kam an, die
 * Obergrenze nicht, und bis 1440 px Fensterbreite sah alles richtig aus,
 * weil dort ohnehin kein Unterschied entsteht. Erst bei 1600 px zeigte
 * die Messung 60 px Abweichung. Die auto-Raender daneben sind die zweite
 * Haelfte davon: ohne sie klebt der gedeckelte Kasten links. */
#zahlenband>.container{
  width:100%;
  max-width:1480px!important;
  margin-left:auto;margin-right:auto;
  padding-left:20px;padding-right:20px;
}
@media (min-width:768px){
  #zahlenband .vs-zahlzelle:first-child{padding-left:0}
  #zahlenband .vs-zahlzelle:last-child{padding-right:0}
}
@media (max-width:767px){
  #zahlenband .vs-zahlzelle{padding-left:0;padding-right:0}
}

/* 12.3 N4 — der Knopf "Mehr Informationen" im Band "Parkett schleifen"
 * auf /parkett/ (#bloc-110), und die zwei Knoepfe, denen N7 ihren
 * Abstandhalter weggenommen hat.
 *
 * D9: all.css setzt .btn{margin:0!important} rund 79.000 Zeichen hinter
 * den Bootstrap-Abstandsklassen — mt-* und mb-* sind an jedem Knopf
 * dieses Projekts tot. Die Regel braucht deshalb die id im Selektor.
 *
 * Der Sollwert kommt aus dem Bestand derselben Seite, nicht aus dem
 * Auftrag: der Knopf "Termin vereinbaren" im Band parkett-faq stand am
 * 14.08. gemessen 24,00 px unter seinem Vortext (h6.mb-4 = 1,5rem).
 * Dieselben 24 px bekommt der neue Knopf.
 *
 * Die zweite Haelfte ist eine Nebenwirkung von N7: der geloeschte Satz
 * stand in genau dem h6.mb-4, das den Knopf auf Abstand hielt. Ohne
 * Ersatz saesse "Termin vereinbaren" auf /parkett/ und /renovierung/
 * direkt am Text. Der Abstand war vor N7 da und ist nicht das, was
 * Christian weghaben wollte — er wird hier wiederhergestellt, mit
 * demselben gemessenen Wert. */
#bloc-110 .btn,
#parkett-faq .design-column-produkte .btn,
#faq-renovierung .design-column-produkte .btn{margin-top:24px!important}

/* 12.4 N5 — Schriftgroesse der Seitenleisten-Navigation.
 *
 * ERST DEN ORT MESSEN (E9). Der Auftrag nennt den Selektor
 * .design-link-sidebar. Den gibt es in der VORSCHAU nicht mehr: seit A52
 * baut vorschau/Sidebar.astro die Navigation aus .vs-haupt (erste Ebene)
 * und .vs-unter a (zweite Ebene); .design-link-sidebar steht nur noch in
 * components/Sidebar.astro, also auf den Live-Seiten. Eine Regel auf den
 * Auftragsselektor haette in der Vorschau null Elemente getroffen und
 * saehe im Stylesheet trotzdem richtig aus (D2).
 *
 * Gemessen am 14.08.:
 *   .design-link-topnavi (Vorschau, Kopfzeile) 16 / 14 / 12 / 12 px
 *   .design-link-sidebar (all.css, nur Live)   18 / 17 / 17 / 16 px
 *   .vs-haupt            (Vorschau, IST)       19 px auf allen Baendern,
 *                                              ohne jede Medienstufe
 * Die Sidebar war also nicht 1 px, sondern 3 px groesser als die
 * Kopfzeile — und blieb es auch dort, wo die Kopfzeile auf 12 px faellt.
 *
 * SOLL aus dem Auftrag: 16 / 15 / 15 / 14 px. Die Medienstufen sind die
 * der Bestandsregeln in all.css, an der Datei gemessen und nicht aus dem
 * Auftrag uebernommen: 992+, bis 991, bis 767, bis 575. Weil 991 und 767
 * denselben Wert tragen, stehen hier drei Stufen statt vier.
 * Die zweite Ebene (.vs-unter a, gemessen 14 px) bleibt unangetastet —
 * sie war nie groesser als die Kopfzeile. Feinjustage nach Christians
 * Sichtpruefung. */
.vs-haupt{font-size:16px}
@media (max-width:991px){
  .vs-haupt{font-size:15px}
}
@media (max-width:575px){
  .vs-haupt{font-size:14px}
}

/* 12.5 N6 — Referenzen-Lightbox: der Kasten legt sich randlos ums Bild.
 *
 * GEMESSEN, WER DIE BREITE SETZT. all.js baut die Lightbox zur Laufzeit
 * (setUpLightBox): .modal-dialog.modal-lg > .modal-content.frameless-lb >
 * .modal-body > img#lightbox-image.img-fluid. Die Breite kommt von
 * Bootstraps .modal-lg{max-width:800px} ab 992 px; .modal-content ist ein
 * Blockkasten und fuellt sie aus. img-fluid heisst max-width:100% — ein
 * Hochformatbild wird also NICHT hochskaliert und laesst den Rest des
 * Kastens weiss stehen. Gemessen auf /referenzen/parkett-fussboden/,
 * 1440 px Fensterbreite:
 *   quer  900x675 -> Bild 800,00 px, Kasten 800,00 px, Rand 0,00 px
 *   hoch  675x900 -> Bild 675,00 px, Kasten 800,00 px, Rand 62,50 px je Seite
 * Bei 390 px trat der Fehler nie auf (das Bild fuellt die Breite).
 *
 * Die Korrektur sitzt am Kasten, nicht am Dialog: der Dialog behaelt
 * seine 800 px als Obergrenze, der weisse Kasten schrumpft auf die
 * Bildbreite und wird darin zentriert. Das Schliesskreuz ist
 * position:absolute im Kasten und wandert mit — es bleibt sichtbar und
 * anklickbar (nachgemessen).
 *
 * DIE BEDINGUNG IST KEIN SCHMUCK. setLightboxUI() schaltet je Aufruf
 * #lightbox-image auf display:block (Bild) oder display:none (Video).
 * Ein Video sitzt in .ratio.ratio-16x9 — ein Kasten ohne eigene Breite,
 * der in einem fit-content-Elternteil auf 0 zusammenfiele. Heute traegt
 * die Vorschau kein Video-Lightbox (gepruefte Suche ueber das Paket: 0
 * Treffer auf data-lightbox mit .mp4; das eine Video der Startseite ist
 * ein eingebettetes <video>). Die Bedingung ist der Riegel fuer den Tag,
 * an dem eines dazukommt. */
#lightbox-modal .modal-content:has(#lightbox-image[style*="display: block"]){
  width:-moz-fit-content;
  width:fit-content;
  max-width:100%;
  margin-left:auto;
  margin-right:auto;
}

/* 12.6 A63 — die Luft UNTER dem Kopfblock. Gegenstueck zu 12.1/N1.
 *
 * WAS 12.1 GETAN HAT UND WAS NICHT. N1 hat das 50-px-Polster ZWISCHEN
 * h1 und h4 auf 6 px gebracht. Der Abstand darunter, h4 zum folgenden
 * Bild-Bloc, hat sich dadurch rechnerisch nicht geaendert — der ganze
 * Kopfblock wurde nur 44 px kuerzer und rueckte samt Bild-Bloc hoch.
 * Was sich geaendert hat, ist das Verhaeltnis: eine zweizeilige, eng
 * gesetzte Einheit sitzt jetzt mit denselben 24 px ueber der Bildkante.
 * Christian fehlt genau diese Luft (Freigabe 14.08.).
 *
 * IST, an der h4-Unterkante gegen die Oberkante von #bloc-159 gemessen,
 * zehn Baender inkl. 1600 (B23), Rechteck und Textkante getrennt:
 *
 *   bis 767 px   74,00 px Rechteck / 74,00-74,59 Textkante
 *   768-991 px   44,00 px           / 44,41
 *   ab 992 px    24,00 px           / 24,20
 *
 * Die 24 px sind nichts als das mb-4 der h4 (1,5rem): der Container
 * traegt ab lg bloc-no-padding-lg, darunter bloc-md-sm/bloc-sm-md, und
 * daher kommen die 20 bzw. 50 px Unterschied der schmalen Baender.
 *
 * DER SOLLWERT KOMMT AUS DER SEITE, NICHT AUS DEM AUFTRAG. Gemessen
 * wurden zwei gewoehnliche Bloc-Uebergaenge derselben Seite, Inhalts-
 * unterkante zu Inhaltsoberkante (die Bloc-RECHTECKE stossen ueberall
 * auf 0,00 px aneinander, sie taugen als Referenz nicht):
 *   #bloc-157 -> #bloc-158 und #bloc-158 -> #bloc-160
 *   ab 767 px  40,00 px   (20 Polster unten + 20 oben)
 *   bis 575 px 60,00 px   (20 + 40)
 * Der Regelabstand der Seite ist ab 992 px also 40 px, und die
 * Untergrenze des Auftrags (40 / 30 / 20 px) sagt dort dasselbe.
 *
 * DESHALB GREIFT DIE REGEL NUR AB 992 px. Auf 768-991 px stehen schon
 * 44 px, bis 767 px sogar 74 px — beides ueber Regelabstand UND
 * Untergrenze. Dort etwas zu tun hiesse, Luft wegzunehmen, wo Christian
 * mehr wollte. Nur nach oben, nie nach unten.
 *
 * SPEZIFITAET AUSGEZAEHLT (D14). Gegner ist .mb-4{margin-bottom:
 * 1.5rem!important} aus all.css, also (0,1,0). Ein blankes
 * "h1:has(+ h4) + h4" stuende bei (0,0,3) und verloere — :has() wiegt
 * nur, was in ihm steht, und "+ h4" ist ein Typselektor. Mit
 * .page-container davor steht der Selektor bei (0,1,3) und gewinnt.
 * Die Ankunft ist am gerenderten Element zurueckgelesen, nicht aus dem
 * Stylesheet geschlossen (B13/Fall 3): computed margin-bottom 40px,
 * und ein eingeschleuster Probewert von 99 px meldet 99 px.
 *
 * DAS h1-INNENPOLSTER AUS 12.1 IST NICHT ANGEFASST. Der Abstand h1 -> h4
 * ist als Schutzwert mitgemessen worden und steht unveraendert bei
 * 6,00 / 7,50 / 6,30 px (ab 992 / 768-991 / bis 767).
 *
 * DER SELEKTOR BESCHREIBT DIE SACHE, NICHT DIE EINE SEITE — wie 12.1.
 * Gezaehlt im gerenderten Baum ueber alle 37 Adressen der Vorschau:
 * genau EIN h1 mit direkt folgender h4, /ueber-uns/. */
@media (min-width:992px){
  .page-container h1:has(+ h4) + h4{margin-bottom:40px!important}
}

/* 12.7 A95, 02.09.2026 — dieselbe Stelle noch einmal, jetzt auf 96 px.
 *
 * Christian am 02.09.: am Schreibtisch ist es weiterhin zu eng, am
 * Telefon passt es. Zielwert ab 992 px: 96 px, gemessen wie in A93
 * (Unterkante der Subline bis Oberkante des Teamfotos).
 *
 * IST, vor diesem Eingriff gemessen, Paket an der Wurzel (B20/G8),
 * Layoutbreite zurueckgelesen (B2), Rauschboden 0,00 px ueber drei
 * Laeufe, Positivkontrolle +50,00 px:
 *   1440 px   60,00 px      390 px   94,00 px
 *
 * WORAUS DIE 60 PX BESTEHEN — zerlegt, nicht geschaetzt:
 *   40 px  margin-bottom der h4, gesetzt von 12.6/A63
 *  + 0 px  Container- und Bloc-Unterkante fallen zusammen
 *  + 20 px Innenpolster des folgenden #bloc-159
 *   = 60 px
 * Es fehlen also 36 px.
 *
 * WARUM PADDING AM CONTAINER UND NICHT MEHR MARGIN AN DER h4:
 * Die 40 px aus 12.6 sind ein gemessener, begruendeter Wert (der
 * Regelabstand der Seite). Sie hier auf 76 px hochzudrehen hiesse, die
 * Rechnung von 12.6 unbrauchbar zu machen und zwei Regeln um dieselbe
 * Eigenschaft streiten zu lassen. Das Polster ist eine zweite,
 * unabhaengige Groesse: 12.6 bleibt wahr, A95 legt 36 px darunter.
 *
 * SPEZIFITAET AUSGEZAEHLT (D9/D14). Gegner ist
 * .bloc-no-padding-lg{padding:0 20px} aus all.css in derselben
 * Medienabfrage — eine Klasse (0,1,0), OHNE !important. Der Selektor
 * hier steht mit id plus Klasse bei (1,1,0) und gewinnt ohne
 * !important. Die Ankunft wird am gerenderten Element zurueckgelesen,
 * nicht aus dem Stylesheet geschlossen (B13/Fall 3).
 *
 * NUR AB 992 px. Unter 992 px stehen 94 px (bis 767) bzw. 78 px
 * (768-991) — dort waere jede Aenderung ein Wegnehmen. Wie 12.6:
 * nur nach oben, nie nach unten.
 *
 * EINZELFALL, KEINE VEREINHEITLICHUNG. Der Anker ist die Bloc-Id, die
 * im ganzen Paket an genau einem Element haengt (drei Textvorkommen:
 * oeffnender Blocs-Kommentar, id-Attribut, schliessender Kommentar).
 * Die zwoelf Kopfmuster aus A93 bleiben unberuehrt, bis Christian eine
 * Zahl fuer alle Seiten entscheidet. */
@media (min-width:992px){
  #bloc-44-159-19875-40533-31752-12923 .container{padding-bottom:36px}
}

/* ------------------------------------------------------------------ *
 * 13 · A62 — der Abstand ueber "Termin vereinbaren" / "Projekt
 *      besprechen" auf den sieben restlichen Produktseiten
 * ------------------------------------------------------------------ */
/* Dieselbe Nebenwirkung wie in A61/12.3, nur siebenfach. Der gestrichene
 * Satz "Rufen Sie an unter 0234 14015 ..." stand in genau dem
 * <h6 class="mb-4">, das den Knopf auf Abstand hielt. Ohne Ersatz saesse
 * der Knopf direkt an der Adresszeile.
 *
 * DER SOLLWERT KOMMT AUS DER MESSUNG, NICHT AUS DEM AUFTRAG: auf allen
 * sieben Seiten und allen vier Baendern (390 / 768 / 1440 / 1600) stand
 * der Knopf vor dem Schnitt 24,00 px unter seinem Vortext — das mb-4 des
 * geloeschten h6, also 1,5rem. Dieselben 24 px bekommt er zurueck.
 *
 * D9: all.css setzt .btn{margin:0!important} rund 79.000 Zeichen hinter
 * den Bootstrap-Abstandsklassen. mt-* waere an diesen Knoepfen tot, die
 * Regel braucht deshalb die id im Selektor (0,3,0 statt 0,2,0).
 *
 * SECHS SELEKTOREN FUER SIEBEN SEITEN: /farben/ und /ueber-uns/ tragen
 * beide die Bloc-id faq-farben (am Markup gemessen, nicht angenommen —
 * der Blocs-Export hat sie beim Duplizieren mitgenommen). Die ids liegen
 * auf verschiedenen Seiten, kollidieren also nicht, und beide Seiten
 * brauchen ohnehin denselben Wert.
 *
 * In jeder der sieben .design-column-produkte steht genau EIN .btn
 * (im Browser gezaehlt, nicht im Markup geschaetzt) — der Selektor kann
 * also keinen zweiten Knopf mitnehmen. */
#bloc-43b .design-column-produkte .btn,            /* /bodenbelaege/  */
#faq-farben .design-column-produkte .btn,          /* /farben/ + /ueber-uns/ */
#bloc-43-14884-26888 .design-column-produkte .btn, /* /sonnenschutz/  */
#faq-tapeten .design-column-produkte .btn,         /* /tapeten/       */
#bloc-43-14884 .design-column-produkte .btn,       /* /gewerbeboeden/ */
#faq-gw-objekte .design-column-produkte .btn{      /* /gewerbeobjekte/ */
  margin-top:24px!important;
}

/* ------------------------------------------------------------------ *
 * 14 · A64 — der Abstand ueber "Termin vereinbaren" im Kontaktband
 *      der drei Ratgeberseiten
 * ------------------------------------------------------------------ */
/* Das Kontaktband ist die Bauform des Experten-Fragen-Blocs, nur ohne
 * Aufklapper. Gemessen wurde deshalb zuerst das Muster selbst — der Bloc
 * faq-renovierung auf /renovierung/, im selben Lauf, auf 390 / 768 / 1440
 * / 1600 px:
 *
 *      h2 -> h6      8,00 px   (die margin-bottom der h2, aus all.css)
 *      h6 -> Knopf  24,00 px   (Abschnitt 12.3, A61)
 *
 * Das neue Band traf die 8,00 px von allein und die 24,00 px NICHT: ohne
 * Regel sass der Knopf mit 0,00 px direkt an der Faktenzeile. Grund ist
 * D9 — all.css setzt .btn{margin:0!important} rund 79.000 Zeichen hinter
 * den Bootstrap-Abstandsklassen, ein mt-* waere hier tot. Die Regel
 * braucht die id im Selektor (0,3,0 statt 0,2,0), genau wie in A61/12.3
 * und A62/13.
 *
 * EINE id AUF DREI SEITEN: das Band heisst auf allen dreien
 * id="kontaktband". Die Seiten sind verschieden, die ids kollidieren also
 * nicht, und alle drei brauchen denselben Wert. In jeder der drei
 * .design-column-produkte steht genau EIN .btn — im Browser gezaehlt,
 * nicht im Markup geschaetzt.
 *
 * Die acht Kategorieband-Knoepfe auf /haeufige-fragen/ liegen NICHT in
 * #kontaktband und behalten ihre Leiter aus Abschnitt 9.1 (26 / 18 / 12
 * px). Nachgemessen nach dem Einbau der acht Saetze: die Leiter wirkt
 * genau einmal, nicht doppelt.                                        */
#kontaktband .design-column-produkte .btn{margin-top:24px!important}

/* ------------------------------------------------------------------
 * A94, 02.09.2026 — Kontaktkarten auf /kontakt/ (nur Vorschau).
 * Bauform bewusst wie .vs-karte: weisse Flaeche, feine Linie, Radius,
 * beim Ueberfahren Rand in --rk-rot und Flaeche in --rk-creme-2.
 * Vorher waren es sechs freie Zeilen, klickbar war nur das Icon.
 * Die Icons sind CSS-Masken (A74/D15): background-color ist ihre TINTE.
 * Sie kommt aus .fa,.fas,.ion{background-color:currentColor!important}
 * und damit aus color von .design-icon-kontakt — hier NICHT anfassen.
 * min-height 62px liegt ueber den 44px Fingergroesse.
 * ------------------------------------------------------------------ */
.kk-karte{
  display:flex;align-items:center;gap:13px;
  min-height:62px;margin:0 0 13px 0;padding:11px 14px;
  background:#fff;border:1px solid var(--rk-linie);border-radius:var(--rk-radius);
  color:inherit;text-decoration:none;
  transition:border-color .25s var(--rk-ease),background-color .25s var(--rk-ease);
}
a.kk-karte:hover{border-color:var(--rk-rot);background-color:var(--rk-creme-2)}
.kk-tot{cursor:default}
.kk-icon{flex:0 0 auto;width:23px;font-size:23px;line-height:1;text-align:center}
.kk-text{display:block;min-width:0}
.kk-text b{display:block;font-weight:500;color:var(--rk-rot)}
.kk-text span{display:block;margin-top:2px}
@media (prefers-reduced-motion:reduce){ .kk-karte{transition:none} }

/* A94 — Produktkoepfe: Rollover auf der ganzen Karte.
 * Der Hintergrund des Kopfes bleibt unveraendert: die Aufhellung beim
 * Ueberfahren ist in A46 bewusst entfernt worden (siehe
 * .card-produkte-headerdiv:hover weiter oben) und wird nicht zurueckgedreht.
 * font-family bleibt ebenfalls unangetastet — .header-referenzen-typo
 * traegt Inter-SemiBold bereits seit A46/2.
 *
 * 02.09.2026, Christian: KEINE Unterstreichung beim Ueberfahren. Die Regel
 * .design-card-produkte:hover .header-referenzen-typo{text-decoration:
 * underline} ist deshalb wieder raus. Der Rollover besteht jetzt nur noch
 * aus dem Bild-Zoom unten. Nicht wieder einbauen. */
.kk-bildlink{display:block;overflow:hidden}
.kk-bildlink img{transition:transform .25s var(--rk-ease)}
.design-card-produkte:hover .kk-bildlink img{transform:scale(1.02)}

/* 02.09.2026, Christian: der Kopf soll beim Ueberfahren FARBIG werden, so wie
 * die Links unter dem Foto. Nicht ausgedacht, sondern von dort abgelesen:
 * .design-link-subnavi in all.css geht von --swatch-var-3131 auf
 * --swatch-var-159 (rgba(255,219,131), das warme Gold) mit
 * transition:color 0.4s ease. Dieselbe Zielfarbe und dieselbe Dauer stehen
 * deshalb hier — waeren es eigene Werte, liefen zwei Rollover auf derselben
 * Karte verschieden.
 * Ausgangsfarbe bleibt --rk-creme aus .header-referenzen-typo.
 * SPEZIFITAET (D9): Gegner ist .header-referenzen-typo{color:...!important},
 * also (0,1,0) mit !important. Der Selektor hier steht bei (0,2,0) und
 * gewinnt, braucht dafuer aber selbst !important.
 * Die Uebergangsangabe haengt an der Karte, nicht an der Klasse allein —
 * .header-referenzen-typo wird auch ausserhalb der Produktkarten benutzt. */
.design-card-produkte .header-referenzen-typo{transition:color .4s ease}
.design-card-produkte:hover .header-referenzen-typo{color:var(--swatch-var-159)!important}

@media (prefers-reduced-motion:reduce){
  .kk-bildlink img,.design-card-produkte:hover .kk-bildlink img{transition:none;transform:none}
  .design-card-produkte .header-referenzen-typo{transition:none}
}