/* 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: ?20260813f   (A46 setzte ?20260813, A46/2 das b, A49 das c,
 * A52 das d, A53 das e, A54 das f)
 * 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.
 *
 * 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 · Die zwei Knoepfe im Parkett-Abschnitt (A54-Nachtrag)
 * ------------------------------------------------------------------ */
/* 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. */
#bloc-17 .btn.me-2{margin-right:12px!important}
#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;
}
/* 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. 47px = 34 Schliesser + 13 Abstand. */
.vs-logo{
  height:26px;width:auto;display:block;
  flex:0 1 auto;min-width:0;
  max-width:calc(100% - 47px);
  object-fit:contain;object-position:left center;
}
.vs-zu{
  width:34px;height:34px;
  /* flex:0 0 auto ist Pflicht, nicht Zierde: der Kopf ist ein Flexkasten,
   * und ohne das schrumpft der Schliesser neben dem Logo. Bei 360 px am
   * 13.08. auf 27 px gemessen — Sollwert 34. */
  flex:0 0 auto;
  display:grid;place-items:center;
  border:1px solid var(--rk-linie);border-radius:var(--rk-radius);
  background:transparent;color:var(--rk-rot);
  font-size:17px;line-height:1;cursor:pointer;
  transition:background .25s var(--rk-ease),color .25s var(--rk-ease),border-color .25s var(--rk-ease);
}
.vs-zu:hover{background:var(--rk-rot);color:#fff;border-color:var(--rk-rot)}

.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;
  background:transparent!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}
}