/* =============================================================
   RAUSZEIT – STYLES
   Mobile first. Alle Werte kommen aus den Skalen unten.
   Grundregeln (aus der Wissensbasis):
   - Fliesstext 18px, Zeilenhoehe 1,55, Zeilenlaenge unter 70 Zeichen
   - Abstaende nur aus der 8er-Skala
   - Markenfarbe ausschliesslich fuer Interaktives, nie fuer Text
   - ein Primaerbutton pro Ansicht, Touchziele mindestens 48px
   - Kontrast mindestens 4,5:1 fuer Text, 3:1 fuer Raender
   - Farbe ist nie das einzige Signal (immer Text oder Symbol dazu)
   ============================================================= */

/* ---------- 1. Tokens ---------------------------------------- */
:root {
  /* Flaechen und Text */
  --papier:     #F1F0EA;
  --flaeche:    #FFFFFF;
  --flaeche-2:  #F7F6F1;
  --flaeche-3:  #EBEAE3;
  --tinte:      #1C2A2B;   /* kein reines Schwarz */
  --tinte-2:    #46575A;
  --tinte-3:    #5C6D6F;   /* 5,4:1 auf Weiss; #6E7F81 lag bei 4,2:1 */
  --linie:      #D8D7CE;   /* Trennlinien und Kartenraender, dekorativ */
  --linie-2:    #E9E8E1;
  --rand:       #7A8886;   /* Feldraender: 3,7:1 auf Weiss, 3,2:1 auf Papier
                              (WCAG 1.4.11 verlangt 3:1 fuer Eingabefelder) */

  /* Aktion (nur fuer Interaktives) */
  --aktion:        #0F6B6E;
  --aktion-dunkel: #0A5254;
  --aktion-sanft:  #DDEBEA;
  --aktion-text:   #FFFFFF;

  /* Signale */
  --stern:        #8A5606;
  --stern-flaeche:#FAEFD8;
  --herz:         #A62F51;
  --herz-flaeche: #F9E4EA;
  --hinweis:      #5B4A20;
  --hinweis-flaeche:#F6F0DC;

  /* Kategorietoene (Flaechen fuer Illustrationen) */
  --ton-blau:    #DCE8F2;
  --ton-beere:   #F5E3EB;
  --ton-lehm:    #EDE4D7;
  --ton-violett: #E6E3F1;
  --ton-gruen:   #DEEAD8;
  --ton-honig:   #F9EED2;
  --ton-tuerkis: #D8EAEB;
  --ton-sand:    #F1E9DF;
  --ton-orange:  #F7E4D5;
  --ton-limette: #E6EFD2;

  /* Typografie ------------------------------------------------------
     Modulare Skala nach McFedries, "Math for Web Design", Kap. 8:
         Sn = B * F^n
     Basis B = 1.25rem (20px), Faktor F = 1.2 (dezente Abstufung,
     laut Buch die richtige Wahl fuer lesbare, inhaltsdichte Seiten).
         S-2 = 13.9px   S-1 = 16.7px   S0 = 20px
         S1  = 24px     S2  = 28.8px   S3 = 34.6px   S4 = 41.5px
     Fliesstext liegt damit auf 20px statt der Browser-Vorgabe 16px,
     Zeilenhoehe 1.5, Zeilenlaenge 45–75 Zeichen – die drei Werte der
     "typografischen Trinitaet" aus demselben Kapitel.

     Die beiden groessten Stufen skalieren fliessend. Die Vorzugsgroesse
     kommt aus der linearen Interpolation (Kap. 6.5):
         vw-Anteil = (maxWert - minWert) / (maxBreite - minBreite) * 100
     Beispiel Ueberschrift: (41.5 - 34.6) / (1200 - 360) * 100 = 0.83vw  */
  --font-titel: 'Bricolage Grotesque', Georgia, serif;
  --font-text:  'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --t-12: .868rem;            /* S-2  13.9px – Mikro-Label      */
  --t-14: 1.042rem;           /* S-1  16.7px – Label, Metazeile */
  --t-16: 1.042rem;           /* S-1  16.7px – Kartentext       */
  --t-18: 1.25rem;            /* S0   20px   – Fliesstext       */
  --t-20: 1.5rem;             /* S1   24px   – Kartentitel      */
  --t-24: 1.8rem;             /* S2   28.8px – Abschnittstitel  */
  --t-30: clamp(1.8rem, 1.645rem + 0.69vw, 2.16rem);   /* S2 → S3 */
  --t-36: clamp(2.16rem, 1.975rem + 0.83vw, 2.592rem); /* S3 → S4 */

  --lh-text:  1.5;            /* Zeilenhoehe skaliert invers zur Groesse */
  --lh-titel: 1.15;
  --mass:     68ch;           /* Zeilenlaenge, Mitte des 45–75-Fensters  */

  /* Abstaende (8er-Raster) */
  --s-4: 4px; --s-8: 8px; --s-12: 12px; --s-16: 16px;
  --s-24: 24px; --s-32: 32px; --s-48: 48px; --s-64: 64px;

  /* Abstand zwischen den Kaesten eines Rasters. Alle Seitenraster
     (Ergebnisliste, Startseite, Kartenansicht) nehmen diesen einen
     Wert, damit die Luecken auf jeder Seite gleich breit sind. Er
     waechst am Breakpoint mit, siehe Abschnitt 14. */
  --raster: var(--s-16);

  /* Radien und Tiefe */
  --r-8: 8px; --r-12: 12px; --r-16: 16px; --r-24: 24px;
  --schatten-1: 0 1px 2px rgba(28,42,43,.06);
  --schatten-2: 0 2px 8px -2px rgba(28,42,43,.16);
  --schatten-3: 0 -8px 32px rgba(28,42,43,.18);

  /* Bewegung ---------------------------------------------------------
     Dauern nach der Tabelle im Motion-Wissen (Tastendruck 120–180ms,
     Karte 200–350ms, Dialog 300–400ms). Kurven aus McFedries Kap. 11:
       sanftes Ein- und Ausblenden  cubic-bezier(0.25, 0.1, 0.25, 1.0)
       schnelles Verschwinden       cubic-bezier(0.5, 0.05, 0.7, 0.2)
       Ueberschwinger (y2 > 1)      cubic-bezier(0.7, -0.6, 0.25, 1.5) */
  --zeit-schnell: 150ms;
  --zeit-mittel:  260ms;
  --zeit-blatt:   360ms;
  --kurve:        cubic-bezier(.25,.1,.25,1);
  --kurve-raus:   cubic-bezier(.5,.05,.7,.2);
  --kurve-feder:  cubic-bezier(.7,-.6,.25,1.5);
}

/* Dunkles Schema nur auf ausdruecklichen Wunsch: dafuer im <html>-Tag
   data-theme="dunkel" setzen. Standard ist bewusst hell, damit die
   Seite bei allen Testfamilien gleich aussieht. */
:root[data-theme="dunkel"] {
    --papier:    #14191A;
    --flaeche:   #1D2425;
    --flaeche-2: #232B2C;
    --flaeche-3: #2B3435;
    --tinte:     #E9EEED;
    --tinte-2:   #B6C3C3;
    --tinte-3:   #8D9C9C;
    --linie:     #36403F;
    --linie-2:   #2A3333;
    --aktion:        #58C0BE;
    --aktion-dunkel: #7FD3D1;
    --aktion-sanft:  #15302F;
    --aktion-text:   #0A1516;
    --stern:        #E8B75A;
    --stern-flaeche:#33290F;
    --herz:         #EE8AA6;
    --herz-flaeche: #3A202A;
    --hinweis:      #DFD0A4;
    --hinweis-flaeche:#2E2A18;
    --ton-blau:#22323F; --ton-beere:#3A2630; --ton-lehm:#352C21;
    --ton-violett:#2C2839; --ton-gruen:#233021; --ton-honig:#332C15;
    --ton-tuerkis:#1E3132; --ton-sand:#332B22; --ton-orange:#3A2A1E;
    --ton-limette:#2B3320;
}

/* ---------- 2. Grundlagen ------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  /* Notbremse gegen ueberlaufende Woerter, vererbt sich an alles.
     Sie greift nur, wenn ein Wort sonst aus seinem Kasten liefe; am
     normalen Zeilenumbruch aendert sie nichts. Ohne sie reicht ein
     einziger langer Strassenname in neuen Daten, um eine Karte zu
     sprengen. Silbentrennung steht nur auf Ueberschriften, im
     Fliesstext waere sie bei 68 Zeichen Zeilenlaenge unnoetig. */
  overflow-wrap: break-word;
  font-family: var(--font-text);
  font-size: var(--t-18);
  line-height: var(--lh-text);
  -webkit-font-smoothing: antialiased;
}

/* Ueberschriften duerfen umbrechen. In den Daten stehen Namen wie
   "Spielplatz Werrastrasse/Richartzstrasse": 26 Zeichen ohne Leerzeichen,
   die in keine Kartenspalte passen. Browser brechen von sich aus weder
   innerhalb eines Wortes noch nach einem Schraegstrich, der Titel liefe
   also aus dem Kasten heraus.

   hyphens trennt nach den Silbenregeln der Seitensprache (lang="de" in
   index.html) und setzt einen Trennstrich. overflow-wrap ist die
   Notbremse fuer den Fall, dass auch das nicht reicht. */
h1, h2, h3 { font-family: var(--font-titel); line-height: var(--lh-titel); margin: 0; letter-spacing: -.015em;
  overflow-wrap: break-word; hyphens: auto; }
/* Titel mit Schraegstrich: Umbruch an der Fuge statt in der Silbe.
   Das <wbr> dahinter setzt app.js. */
.titel-fuge { hyphens: manual; }
h1 { font-size: var(--t-30); font-weight: 700; }
h2 { font-size: var(--t-24); font-weight: 600; }
h3 { font-size: var(--t-20); font-weight: 600; }
p  { margin: 0; max-width: var(--mass); }

a { color: var(--aktion); text-decoration: underline; text-underline-offset: 3px; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

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

.skiplink {
  position: absolute; left: -9999px; top: var(--s-8);
  background: var(--flaeche); padding: var(--s-12) var(--s-16); border-radius: var(--r-8);
  z-index: 100;
}
.skiplink:focus { left: var(--s-16); }

.nur-fuer-screenreader {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- 3. Grundgerüst ----------------------------------- */
.huelle {
  max-width: 40rem; margin: 0 auto;
  /* fliessender Rand: 16px bei 320px Breite, 32px bei 1200px */
  padding: 0 clamp(1rem, 1.82vw + .75rem, 2rem) var(--s-64);
}

.kopf {
  display: flex; align-items: center; gap: var(--s-12);
  padding: var(--s-16) 0 var(--s-8); min-height: 64px;
}
.marke { display: flex; align-items: center; gap: var(--s-8); font-family: var(--font-titel); font-weight: 700; font-size: var(--t-20); text-decoration: none; color: inherit; }
.marke-zeichen { width: 38px; height: 38px; flex: 0 0 auto; display: block; }
.marke-wort { font-size: var(--t-20); letter-spacing: -.03em; display: inline-flex; align-items: baseline; gap: 3px; }
.marke-punkt { width: 6px; height: 6px; border-radius: 50%; background: var(--stern); display: inline-block; }
/* Sekundaerer Knopf: Er soll auffallen, aber dem Primaerbutton der
   jeweiligen Seite nicht die Aufmerksamkeit nehmen. */
.kopf-feedback {
  margin-left: auto; flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--s-8);
  min-height: 44px; padding: var(--s-8) var(--s-16);
  border: 1px solid var(--rand); border-radius: 999px; background: var(--flaeche);
  color: var(--tinte); font-size: var(--t-14); font-weight: 600; text-decoration: none;
  transition: background var(--zeit-schnell), border-color var(--zeit-schnell);
}
.kopf-feedback:active { background: var(--flaeche-3); }
.kopf-feedback svg { width: 18px; height: 18px; flex: 0 0 auto; }
.kopf-nav { display: none; }

.seite { display: none; }
.seite.aktiv { display: block; animation: auf var(--zeit-mittel) var(--kurve) both; }
@keyframes auf { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes blatt-auf { from { transform: translateY(24px); } to { transform: none; } }

/* Ueberschwinger nur an einer Stelle: die Rueckmeldung beim Merken */
@keyframes herz-puls { 0% { transform: scale(1); } 45% { transform: scale(1.22); } 100% { transform: scale(1); } }
.herz.puls svg { animation: herz-puls var(--zeit-mittel) var(--kurve-feder); }

.zurueck-zeile { display: flex; align-items: center; gap: var(--s-12); padding: var(--s-8) 0 var(--s-16); }
.rund {
  width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--linie);
  background: var(--flaeche); display: grid; place-items: center; flex: 0 0 auto;
  transition: background var(--zeit-schnell);
}
.rund:active { background: var(--flaeche-3); }
.rund svg { width: 22px; height: 22px; }

/* ---------- 4. Hinweisbanner -------------------------------- */
.banner {
  display: flex; flex-wrap: wrap; gap: var(--s-12); align-items: flex-start;
  background: var(--hinweis-flaeche); color: var(--hinweis);
  border-radius: var(--r-12); padding: var(--s-12) var(--s-16);
  font-size: var(--t-14); line-height: 1.5; margin-bottom: var(--s-16);
}
/* Auf schmalen Schirmen rutscht der Knopf unter den Text, sonst
   quetscht er ihn auf halbe Breite. */
.banner p { max-width: 60ch; flex: 1 1 14rem; }
.banner svg { width: 22px; height: 22px; flex: 0 0 auto; }
.banner strong { font-weight: 600; }
.banner button { margin-left: auto; flex: 0 0 auto; min-height: 48px; text-decoration: underline; font-size: var(--t-14); }

/* ---------- 5. Startseite ----------------------------------- */
.buehne { padding: var(--s-16) 0 var(--s-24); }
.buehne h1 { font-size: var(--t-36); max-width: 16ch; }
.buehne .anspruch { margin-top: var(--s-12); color: var(--tinte-2); font-size: var(--t-16); max-width: 32ch; }

.tafel {
  background: var(--flaeche); border: 1px solid var(--linie-2); border-radius: var(--r-24);
  padding: var(--s-16); box-shadow: var(--schatten-1); margin-bottom: var(--s-16);
}
.tafel-kopf { display: flex; align-items: baseline; gap: var(--s-12); margin-bottom: var(--s-8); }
.tafel-kopf h2 { font-size: var(--t-20); }
.tafel-kopf .rechts { margin-left: auto; font-size: var(--t-14); }
.anspruch-klein { color: var(--tinte-2); font-size: var(--t-16); }
/* Auf dem Handy braucht der vorbelegte Satz fuenf Zeilen. Ein Feld, in dem
   der eigene Text nicht ganz sichtbar ist, laedt nicht zum Aendern ein. */
.tafel-plan textarea { min-height: 9.5rem; }

.zeilen { margin: 0; }
.zeile {
  display: flex; align-items: center; gap: var(--s-12);
  width: 100%; text-align: left; padding: var(--s-12) 0;
  border-top: 1px solid var(--linie-2); min-height: 56px;
}
.zeile:first-child { border-top: 0; }
.zeile-symbol { width: 28px; flex: 0 0 auto; display: grid; place-items: center; color: var(--tinte-2); }
.zeile-symbol svg { width: 22px; height: 22px; }
.zeile-text { flex: 1 1 auto; min-width: 0; }
/* Label und Wert sind eigene Zeilen. Ohne display:block kleben die
   beiden Spans aneinander ("StartpunktHannover Mitte"). */
.zeile-label { display: block; font-size: var(--t-14); color: var(--tinte-3); line-height: 1.3; }
.zeile-wert  { display: block; font-weight: 600; font-size: var(--t-16); line-height: 1.35; margin-top: 2px; }
.zeile-aktion { flex: 0 0 auto; color: var(--aktion); font-size: var(--t-14); font-weight: 600; text-decoration: underline; }

/* ---------- 6. Bedienelemente ------------------------------- */
.knopf {
  display: flex; align-items: center; justify-content: center; gap: var(--s-8);
  width: 100%; min-height: 56px; padding: var(--s-16);
  border-radius: var(--r-16); font-size: var(--t-18); font-weight: 600;
  background: var(--aktion); color: var(--aktion-text);
  transition: transform var(--zeit-schnell), background var(--zeit-schnell);
}
.knopf:active { transform: scale(.985); background: var(--aktion-dunkel); }
.knopf svg { width: 20px; height: 20px; stroke: currentColor; }

.knopf-2 {
  display: flex; align-items: center; justify-content: center; gap: var(--s-8);
  width: 100%; min-height: 52px; padding: var(--s-12) var(--s-16);
  border: 1px solid var(--linie); border-radius: var(--r-16);
  background: var(--flaeche); font-size: var(--t-16); font-weight: 600;
}
.knopf-2:active { background: var(--flaeche-3); }
.knopf-2 svg { width: 20px; height: 20px; flex: 0 0 auto; }
.knopf-text { color: var(--aktion); font-weight: 600; font-size: var(--t-16); text-decoration: underline; text-underline-offset: 3px; min-height: 48px; }

.feld-label { display: block; font-size: var(--t-16); font-weight: 600; margin: var(--s-24) 0 var(--s-8); }
.feld-hilfe { font-size: var(--t-14); color: var(--tinte-3); margin-top: var(--s-8); }
select, input[type="date"], input[type="time"], input[type="number"], input[type="text"], textarea {
  width: 100%; min-height: 52px; padding: var(--s-12);
  background: var(--flaeche-2); border: 1px solid var(--rand); border-radius: var(--r-12);
}
/* Der vom Browser gezeichnete Pfeil sitzt dicht am Rand und laesst sich
   nicht verschieben. Deshalb ein eigener Pfeil mit 16 px Abstand; das
   Auswahlmenue selbst bleibt das native <select> (siehe CLAUDE.md). */
select {
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  padding-right: var(--s-48);   /* 16 px Rand + 16 px Pfeil + 16 px Luft */
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2346575A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s-16) center;
}
select::-ms-expand { display: none; }
textarea { min-height: 120px; resize: vertical; line-height: 1.5; }
.paar { display: flex; align-items: center; gap: var(--s-8); }
.paar select { flex: 1 1 0; min-width: 0; }
.paar input[type="text"] { flex: 1 1 auto; min-width: 0; }
/* Knopf neben einem Feld: so breit wie sein Text, nicht wie die Zeile. */
.knopf-schmal { width: auto; flex: 0 0 auto; min-height: 52px; padding: 0 var(--s-16); }

.chips { display: flex; flex-wrap: wrap; gap: var(--s-8); }
.chip {
  min-height: 48px; padding: var(--s-8) var(--s-16);
  border: 1px solid var(--rand); border-radius: 999px;
  background: var(--flaeche); font-size: var(--t-16); font-weight: 500;
  display: inline-flex; align-items: center; gap: var(--s-8);
  transition: background var(--zeit-schnell), border-color var(--zeit-schnell);
}
.chip svg { width: 18px; height: 18px; }
.chip[aria-pressed="true"] { background: var(--aktion-sanft); border-color: var(--aktion); font-weight: 600; }
.chip[aria-pressed="true"]::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--aktion); }

.kinder { display: flex; flex-direction: column; gap: var(--s-8); }
/* Alter pro Kind als natives Select: ein Tipp statt bis zu zwoelf auf
   einem Stepper (Lacey, "Select instead of type"; Enders: natives Select).
   Entfernen-Knopf 48px, Touchziel nach Tabelle 5.2 bei Lacey. */
.kind { display: flex; align-items: center; gap: var(--s-8); }
.kind-name { font-size: var(--t-16); font-weight: 600; min-width: 6ch; }
.kind select { flex: 1 1 auto; width: auto; min-width: 0; }
.kind-weg { width: 48px; height: 48px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; color: var(--tinte-2); border: 1px solid var(--rand); background: var(--flaeche); }

.kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-8); }
.kachel {
  border: 1px solid var(--linie); border-radius: var(--r-16); background: var(--flaeche);
  padding: var(--s-12) var(--s-4); text-align: center; font-size: var(--t-14); font-weight: 600;
  min-height: 84px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s-4);
}
.kachel svg { width: 26px; height: 26px; }
.kachel[aria-pressed="true"] { border-color: var(--aktion); background: var(--aktion-sanft); }

/* ---------- 7. Ergebnisse ----------------------------------- */
.ergebnis-kopf { display: flex; align-items: flex-end; gap: var(--s-12); margin: var(--s-8) 0 var(--s-12); }
.ergebnis-kopf h2 { flex: 1 1 auto; font-size: var(--t-24); max-width: 20ch; }
.umschalter { display: inline-flex; background: var(--flaeche-3); border-radius: 999px; padding: 3px; gap: 2px; flex: 0 0 auto; }
.umschalter button { min-height: 44px; padding: 0 var(--s-16); border-radius: 999px; font-size: var(--t-14); font-weight: 600; color: var(--tinte-2); }
.umschalter button[aria-pressed="true"] { background: var(--flaeche); color: var(--tinte); box-shadow: var(--schatten-1); }

/* Sortierung und Hinweistext. Auf dem Handy untereinander: nebeneinander
   blieben vom Auswahlfeld knapp 150 px, und "Unsere Empfehlung" stand
   dann als "Unsere Em" da. */
.leiste { display: flex; flex-wrap: wrap; gap: var(--s-8); align-items: center; margin-bottom: var(--s-8); }
.leiste select { min-height: 48px; flex: 1 1 14rem; }
.filterzahl { font-size: var(--t-14); color: var(--tinte-2); flex: 1 1 100%; }

.karten { display: grid; gap: var(--raster); }
/* Die Karte ist eine Spalte: Bild, Inhalt, Fuss. Der Inhalt waechst, der
   Fuss mit Preis und Details sitzt immer unten. Dadurch stehen Preis und
   Link in einer Zeile nebeneinander auf gleicher Hoehe, auch wenn die
   Beschreibungen unterschiedlich lang sind. */
.karte {
  position: relative; background: var(--flaeche); border: 1px solid var(--linie-2);
  border-radius: var(--r-24); overflow: hidden; box-shadow: var(--schatten-1);
  display: flex; flex-direction: column; height: 100%;
}
.karte-inhalt { flex: 1 1 auto; display: flex; flex-direction: column; }
.karte.top { border: 2px solid var(--stern); }
.karte-band {
  display: flex; align-items: center; gap: var(--s-8);
  background: var(--stern-flaeche); color: var(--stern);
  font-size: var(--t-14); font-weight: 600; padding: var(--s-8) var(--s-16);
}
.karte-band svg { width: 18px; height: 18px; }
.karte-flaeche { display: block; width: 100%; text-align: left; }
.karte-bild { height: 128px; position: relative; }
.karte-bild svg { display: block; width: 100%; height: 100%; }
.karte-bild .marke-beispiel.geprueft {
  background: var(--aktion); color: var(--aktion-text);
  display: inline-flex; align-items: center; gap: 4px;
}
.karte-bild .marke-beispiel.geprueft svg { width: 13px; height: 13px; stroke: currentColor; fill: none; }
.karte-bild .marke-beispiel {
  position: absolute; left: var(--s-12); bottom: var(--s-8);
  background: rgba(255,255,255,.86); color: #1C2A2B; border-radius: 999px;
  font-size: var(--t-12); font-weight: 600; padding: 2px var(--s-8);
}
.karte-inhalt { padding: var(--s-16); }
.karte-kategorie { font-size: var(--t-14); color: var(--tinte-2); }
.karte h3 { margin: var(--s-4) 0 var(--s-8); }
.karte-daten { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-16); font-size: var(--t-14); color: var(--tinte-2); }
.karte-daten span { display: inline-flex; align-items: center; gap: var(--s-4); }
.karte-daten svg { width: 16px; height: 16px; flex: 0 0 auto; }
.karte-text { font-size: var(--t-16); color: var(--tinte-2); margin-top: var(--s-12); }

.gruende { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-12); }
.grund {
  font-size: var(--t-14); font-weight: 600; border-radius: 999px;
  padding: var(--s-4) var(--s-12); background: var(--aktion-sanft); color: var(--tinte);
  display: inline-flex; align-items: center; gap: var(--s-4);
}
.grund svg { width: 14px; height: 14px; }
.alters-warnung {
  display: flex; gap: var(--s-8); align-items: flex-start; margin-top: var(--s-12);
  font-size: var(--t-14); color: var(--hinweis); background: var(--hinweis-flaeche);
  border-radius: var(--r-8); padding: var(--s-8) var(--s-12);
}
.alters-warnung svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; }

.karte-fuss { display: flex; align-items: center; gap: var(--s-12); margin-top: auto; padding-top: var(--s-16); }
.preis { font-family: var(--font-titel); font-weight: 700; font-size: var(--t-20); }
.preis small { display: block; font-family: var(--font-text); font-weight: 400; font-size: var(--t-12); color: var(--tinte-3); }
.karte-fuss .detail { margin-left: auto; color: var(--aktion); font-weight: 600; font-size: var(--t-16); display: inline-flex; align-items: center; gap: var(--s-4); }

.herz {
  position: absolute; top: var(--s-8); right: var(--s-8); z-index: 2;
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,.9); border: 1px solid var(--linie);
  display: grid; place-items: center;
}
.herz svg { width: 22px; height: 22px; stroke: var(--tinte-2); fill: none; }
.herz[aria-pressed="true"] { background: var(--herz-flaeche); border-color: var(--herz); }
.herz[aria-pressed="true"] svg { stroke: var(--herz); fill: var(--herz); }

.mehr {
  display: block; width: 100%; min-height: 56px; margin-top: var(--s-16);
  border: 1px dashed var(--linie); border-radius: var(--r-16);
  background: var(--flaeche); font-size: var(--t-16); font-weight: 600; color: var(--aktion);
}
.mehr:active { background: var(--flaeche-3); }

/* ---------- 8. Karte (Landkarte) ---------------------------- */
.karten-rahmen { border: 1px solid var(--linie); border-radius: var(--r-16); overflow: hidden; background: var(--flaeche-2); }
#landkarte { height: 58vh; min-height: 300px; width: 100%; }
.karten-spalte { min-width: 0; }
/* Bildunterschrift der Karte: 8 px statt 24. Der Abstand innerhalb einer
   Gruppe muss kleiner sein als der zur naechsten, sonst wandert der Text
   optisch zum Angebot nebenan. */
.karten-hinweis { font-size: var(--t-12); color: var(--tinte-3); margin-top: var(--s-8); }
.karten-auswahl { margin-top: var(--raster); }
.leaflet-marke {
  background: var(--flaeche); border: 2px solid var(--tinte); border-radius: 999px;
  padding: 2px var(--s-8); font-size: var(--t-14); font-weight: 700; white-space: nowrap;
  box-shadow: var(--schatten-2); color: var(--tinte);
}
.leaflet-marke.aktiv { background: var(--aktion); border-color: var(--aktion); color: var(--aktion-text); }
/* Die Huelle ist ein Punkt auf der Koordinate, das Schild haengt
   zentriert darueber. So darf der Text so lang sein wie er ist. */
.marke-huelle { width: 0 !important; height: 0 !important; overflow: visible; }
.marke-huelle .leaflet-marke {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%);
}
.leaflet-marke-start { background: var(--tinte); border-color: var(--tinte); color: #fff; }
/* Die kleine Form fuer weit herausgezoomte Ansichten: nur der Ort, kein
   Preis. Der weisse Ring trennt zwei dicht benachbarte Punkte, sonst
   verschmelzen sie zu einem Fleck. */
.leaflet-punkt {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--tinte); border: 2px solid #fff; box-shadow: var(--schatten-2);
}
.leaflet-punkt.aktiv { background: var(--aktion); }
/* Das ausgewaehlte Preisschild liegt ueber den anderen. */
.leaflet-marker-icon:has(.aktiv) { z-index: 1000 !important; }

/* ---------- 9. Detailseite ---------------------------------- */
.detail-bild { border-radius: var(--r-24); overflow: hidden; border: 1px solid var(--linie-2); position: relative; }
.detail-bild svg { display: block; width: 100%; height: 172px; }
.detail-kopf { margin-top: var(--s-16); }
.detail-kopf h1 { font-size: var(--t-30); }
.detail-kopf .anbieter { color: var(--tinte-2); font-size: var(--t-16); margin-top: var(--s-4); }

.fakten { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); margin-top: var(--s-16); }
.fakt { background: var(--flaeche); border: 1px solid var(--linie-2); border-radius: var(--r-12); padding: var(--s-12); }
.fakt .l { font-size: var(--t-12); color: var(--tinte-3); }
.fakt .w { font-weight: 600; font-size: var(--t-16); margin-top: 2px; }

.infoliste { margin-top: var(--s-8); }
.infoliste div { display: flex; justify-content: space-between; gap: var(--s-16); padding: var(--s-12) 0; border-top: 1px solid var(--linie-2); font-size: var(--t-16); }
.infoliste div:first-child { border-top: 0; }
.infoliste .k { color: var(--tinte-3); }
.infoliste .w { font-weight: 600; text-align: right; }
/* Lange Werte (Hinweise zu Zeiten, Preisstaffeln) stehen unter ihrem
   Label statt daneben: rechtsbuendiger Flattersatz ueber sechs Zeilen in
   halber Spaltenbreite liest sich schlecht. */
.infoliste .breit { display: block; }
.infoliste .breit .w { display: block; text-align: left; margin-top: 2px; }

.marker-reihe { display: flex; flex-wrap: wrap; gap: var(--s-8); margin-top: var(--s-12); }
.merkmal { font-size: var(--t-14); border-radius: 999px; padding: var(--s-4) var(--s-12); background: var(--flaeche-3); color: var(--tinte-2); display: inline-flex; align-items: center; gap: var(--s-4); }
.merkmal svg { width: 14px; height: 14px; }

.aktionen { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); margin-top: var(--s-16); }
.aktionen .knopf, .aktionen .knopf-2 { min-height: 52px; font-size: var(--t-16); }
/* Zwei Knoepfe untereinander (Feedback abschicken oder kopieren), nicht
   vier nebeneinander wie auf der Detailseite. Doppelte Klasse, damit die
   Spaltenregel aus den Breakpoints weiter unten nicht gewinnt. */
.aktionen.aktionen-schmal { grid-template-columns: 1fr; }

/* ---------- 10. Tagesplan ----------------------------------- */
.plan { margin-top: var(--s-16); }
.station { display: flex; gap: var(--s-12); }
.station-zeit { width: 58px; flex: 0 0 auto; font-weight: 700; font-size: var(--t-16); padding-top: var(--s-16); font-variant-numeric: tabular-nums; }
.station-schiene { width: 12px; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; }
.station-punkt { width: 12px; height: 12px; border-radius: 50%; background: var(--aktion); margin-top: 22px; flex: 0 0 auto; }
.station-linie { flex: 1 1 auto; width: 2px; background: var(--linie); }
.station:last-child .station-linie { display: none; }
/* Die ganze Station ist ein Link. Unterstrichen wird nur der Titel:
   drei unterstrichene Zeilen uebereinander liest niemand, und die
   Flaeche allein waere kein sichtbares Signal (Farbe ist nie das
   einzige Merkmal). */
.station-box { flex: 1 1 auto; min-width: 0; background: var(--flaeche); border: 1px solid var(--linie-2); border-radius: var(--r-16); padding: var(--s-12); margin: var(--s-8) 0; text-align: left; text-decoration: none; }
.station-box .rolle { display: block; font-size: var(--t-12); color: var(--tinte-3); }
.station-box b { display: block; font-family: var(--font-titel); font-size: var(--t-18); font-weight: 600; margin: 2px 0; color: var(--aktion); text-decoration: underline; text-underline-offset: 3px; }
.station-box .details { display: block; font-size: var(--t-14); color: var(--tinte-2); margin-top: 2px; }
.station-box:hover { border-color: var(--aktion); }
.fahrt { display: flex; align-items: center; gap: var(--s-8); font-size: var(--t-12); color: var(--tinte-3); padding-left: 82px; }
.fahrt svg { width: 14px; height: 14px; }
.erkannt { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-12); }

.denkt { display: flex; align-items: center; gap: var(--s-12); color: var(--tinte-2); font-size: var(--t-16); margin-top: var(--s-16); }
.kreisel { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--linie); border-top-color: var(--aktion); animation: dreh .7s linear infinite; }
@keyframes dreh { to { transform: rotate(360deg); } }

/* ---------- 11. Leere Zustaende ----------------------------- */
.leer { text-align: center; padding: var(--s-48) var(--s-16); }
.leer svg { width: 48px; height: 48px; stroke: var(--tinte-3); }
.leer h3 { margin: var(--s-16) 0 var(--s-8); }
.leer p { margin: 0 auto; color: var(--tinte-2); font-size: var(--t-16); max-width: 30ch; }
.leer .knopf, .leer .knopf-2 { max-width: 20rem; margin: var(--s-24) auto 0; }

/* ---------- 12. Dialog (Filter) ----------------------------- */
dialog {
  border: 0; padding: 0; background: transparent; width: 100%; max-width: 40rem;
  max-height: 92vh; margin: auto auto 0; color: var(--tinte);
  /* Nur das Blatt darin scrollt. Ohne diese Zeile bekommt der Dialog eine
     zweite Bildlaufleiste, und ein Sprung im Formular schiebt die
     Kopfzeile mit dem Schliessen-Knopf aus dem Bild. */
  overflow: hidden;
}
dialog::backdrop { background: rgba(20,25,26,.5); }
.blatt {
  animation: blatt-auf var(--zeit-blatt) var(--kurve) both;
  background: var(--papier); border-radius: var(--r-24) var(--r-24) 0 0;
  box-shadow: var(--schatten-3); display: flex; flex-direction: column; max-height: 92vh;
}
.blatt-kopf { flex: 0 0 auto; display: flex; align-items: center; gap: var(--s-12); padding: var(--s-16); border-bottom: 1px solid var(--linie); }
.blatt-kopf h2 { flex: 1 1 auto; font-size: var(--t-20); }
/* min-height:0 ist noetig, damit dieses Flex-Kind unter seine
   Inhaltshoehe schrumpfen darf. Ohne die Zeile rechnet der Browser das
   Blatt hoeher als seinen Rahmen; Safari schneidet dann den Fuss mit dem
   Absenden-Knopf ab. */
.blatt-koerper { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 var(--s-16) var(--s-16); -webkit-overflow-scrolling: touch; }
.blatt-fuss { flex: 0 0 auto; padding: var(--s-12) var(--s-16) calc(var(--s-16) + env(safe-area-inset-bottom)); border-top: 1px solid var(--linie); background: var(--flaeche); display: flex; gap: var(--s-12); align-items: center; }
.blatt-fuss .knopf { flex: 1 1 auto; }
.fehler { color: var(--herz); font-size: var(--t-14); font-weight: 600; margin-top: var(--s-8); min-height: 1px; }

.schalter { display: flex; align-items: center; gap: var(--s-12); padding: var(--s-12) 0; }
.schalter input { width: 26px; height: 26px; accent-color: var(--aktion); flex: 0 0 auto; }
.schalter label { font-size: var(--t-16); }

/* ---------- 13. Fußnavigation ------------------------------- */
.fussnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: var(--flaeche); border-top: 1px solid var(--linie);
  padding-bottom: env(safe-area-inset-bottom);
}
.fussnav-innen { max-width: 40rem; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); }
.reiter {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 60px; font-size: var(--t-12); font-weight: 600; color: var(--tinte-2);
  text-decoration: none; position: relative;
}
.reiter svg { width: 24px; height: 24px; }
.reiter[aria-current="page"] { color: var(--aktion); }
.reiter .zahl {
  position: absolute; top: 6px; left: 50%; margin-left: 6px;
  background: var(--herz); color: #fff; border-radius: 999px;
  font-size: 10px; font-weight: 700; padding: 0 5px; line-height: 16px;
}

/* ---------- 14. Meldung ------------------------------------- */
.meldung {
  position: fixed; left: 50%; bottom: calc(76px + env(safe-area-inset-bottom));
  transform: translateX(-50%) translateY(10px);
  background: var(--tinte); color: var(--papier);
  padding: var(--s-12) var(--s-16); border-radius: 999px;
  font-size: var(--t-14); font-weight: 600; z-index: 40;
  opacity: 0; pointer-events: none; transition: opacity var(--zeit-mittel), transform var(--zeit-mittel);
  max-width: calc(100% - 32px); text-align: center;
}
.meldung.sichtbar { opacity: 1; transform: translateX(-50%); }

/* Die Trennlinie ist ein Strich unter der ganzen Seite, kein Unterstrich
   des Textes: ohne max-width:none endete sie mitten im Layout, weil fuer
   Absaetze sonst die Zeilenlaenge begrenzt wird. Der Hinweis darunter ist
   Kleingedrucktes, kein Fliesstext, und darf die Breite mitnehmen. */
.fussnote { max-width: none; font-size: var(--t-14); color: var(--tinte-3); margin-top: var(--s-32); padding-top: var(--s-16); border-top: 1px solid var(--linie-2); }

/* ---------- 15. Groessere Bildschirme ----------------------- */
@media (min-width: 40rem) {
  .huelle { max-width: 46rem; padding-bottom: var(--s-48); }
  .kacheln { grid-template-columns: repeat(5, 1fr); }
  .fakten { grid-template-columns: repeat(4, 1fr); }
  .aktionen { grid-template-columns: repeat(4, 1fr); }
  /* Auf grossen Schirmen steht der Filter als Fenster in der Mitte.
     Das Blatt muss dieselbe Hoehe haben wie der Rahmen, sonst haengt
     der Fuss mit dem Absenden-Knopf unten heraus. */
  dialog { margin: auto; max-height: 86vh; }
  .blatt { border-radius: var(--r-24); max-height: 86vh; }
}

/* Ab hier ist Platz fuer zwei Karten nebeneinander: bei 736 px Breite
   waere eine einzelne Karte so breit wie ein halber Bildschirm und die
   Liste doppelt so lang. Der Umbruchpunkt folgt dem Inhalt, nicht einem
   Geraetemass (Robbins). */
@media (min-width: 48rem) {
  /* Ab zwei Spalten wird die Luecke groesser: 16 px trennen zwei
     nebeneinander liegende Kaesten zu schwach, sie verschmelzen dann
     optisch zu einem Block. Ein Wert, ein Token, ueberall gleich. */
  :root { --raster: var(--s-24); }
  /* stretch statt start: Alle Karten einer Zeile sind gleich hoch, die
     Abstaende dazwischen bleiben dadurch ueberall gleich. */
  .karten { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .ergebnis-kopf .umschalter { margin-left: auto; }
  .leiste select { max-width: 20rem; flex: 0 1 20rem; }
  .filterzahl { flex: 1 1 auto; }
}

@media (min-width: 60rem) {
  .huelle { max-width: 64rem; padding-bottom: var(--s-64); }
  .fussnav { display: none; }
  body { padding-bottom: 0; }
  /* Navigation mittig, Logo links, Feedback rechts. Die mittlere Spalte
     ist "auto", die beiden aussen "1fr": Damit sitzt die Navigation
     exakt in der Mitte der Kopfzeile, unabhaengig davon, wie breit
     Logo und Knopf sind. */
  .kopf {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: var(--s-16);
  }
  .kopf .marke { grid-column: 1; justify-self: start; }
  .kopf-nav { grid-column: 2; display: flex; gap: var(--s-8); margin-left: 0; }
  .kopf-feedback { grid-column: 3; justify-self: end; margin-left: 0; }
  .kopf-nav a { display: inline-flex; align-items: center; gap: var(--s-8); padding: var(--s-8) var(--s-12); border-radius: var(--r-12); text-decoration: none; color: var(--tinte-2); font-size: var(--t-16); font-weight: 600; }
  .kopf-nav a[aria-current="page"] { background: var(--aktion-sanft); color: var(--tinte); }
  .kopf-nav svg { width: 20px; height: 20px; }
  .kopf-feedback { font-size: var(--t-16); min-height: 48px; margin-left: 0; }
  .karte-bild { height: 150px; }
  #landkarte { height: 62vh; }

  /* --- Startseite zweispaltig ------------------------------------
     In einer Spalte stuende die Suchmaske ueber 1024 px breit da:
     zwischen "Hannover Mitte" und "ändern" laegen 600 px Leere, und
     die Kacheln stuenden erst nach langem Scrollen. Links die
     Eingaben, rechts das Beiwerk (Schoger: feste, inhaltsoptimierte
     Breiten statt alles ueber die volle Seite). */
  #seite-start.aktiv {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--raster);
    /* stretch statt start: sonst enden die beiden Spalten auf
       unterschiedlicher Hoehe und die Seite wirkt abgerissen. */
    align-items: stretch;
  }
  /* Die Abstaende kommen im Raster aus dem gap, nicht aus dem Aussenrand
     der Tafeln. Sonst summieren sich beide. */
  #seite-start.aktiv > * { margin-bottom: 0; }
  #seite-start .banner,
  #seite-start .buehne,
  #seite-start .tafel-plan,
  #seite-start .fussnote { grid-column: 1 / -1; }
  /* Die Familie spannt zwei Zeilen, damit die beiden Tafeln rechts
     direkt aufeinander folgen statt auf ihrer Hoehe zu schweben. */
  .tafel-familie { grid-column: 1; grid-row: span 2; }
  .tafel-kacheln, .tafel-test { grid-column: 2; }

  /* Zehn Kategorien: zwei Spalten gehen glatt auf, drei liessen eine
     einzelne Kachel in der letzten Reihe stehen. */
  .tafel-kacheln .kacheln { grid-template-columns: repeat(2, 1fr); }

  /* Die Ueberschrift darf breiter laufen, bevor sie umbricht. */
  .buehne h1 { max-width: 22ch; }
  .buehne .anspruch { max-width: 46ch; }

  /* --- Formulare: Feldbreite folgt der erwarteten Eingabe --------
     (Enders). Ein Namensfeld ueber die volle Seitenbreite ist der
     klassische Desktop-Fehler. Im Filterblatt gilt das nicht, dort
     ist der Rahmen selbst schon schmal. */
  .tafel select,
  .tafel textarea,
  .tafel input[type="text"] { max-width: 34rem; }
  .tafel > .knopf, .tafel > .knopf-2 { width: fit-content; min-width: 18rem; }
  /* Der Tagesplan ist die Hauptaktion der Startseite: Das Eingabefeld nimmt
     die ganze Tafelbreite, damit der Satz in zwei Zeilen sichtbar bleibt.
     Die erklaerenden Saetze daneben bleiben auf Lesebreite. */
  .tafel-plan textarea { max-width: none; min-height: 7.5rem; }
  .tafel-plan .anspruch-klein, .tafel-plan .feld-hilfe { max-width: 68ch; }
  .aktionen.aktionen-schmal { max-width: 34rem; }

  /* --- Detailseite ----------------------------------------------
     Zwei Angaben pro Zeile statt einer: sonst steht das Label ganz
     links, der Wert 900 px weiter rechts, und lange Werte brechen
     rechtsbuendig um. */
  .detail-bild svg { height: 220px; }
  .detail-kopf h1 { max-width: 24ch; }
  .infoliste { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s-32); }
  .infoliste div:nth-child(2) { border-top: 0; }
  /* Feste Spalte fuers Label, Wert linksbuendig daneben: rechtsbuendiger
     Flattersatz ueber mehrere Zeilen ist schwer zu lesen, und ohne feste
     Breite zerlegt ein langer Wert das Label in Einzelwoerter. */
  .infoliste div { display: grid; grid-template-columns: 10rem 1fr; gap: var(--s-12); align-content: start; }
  .infoliste .w { text-align: left; }
  .infoliste .breit { grid-column: 1 / -1; grid-template-columns: 10rem minmax(0, 60ch); }

  /* --- Kartenansicht --------------------------------------------
     Karte und ausgewaehltes Angebot nebeneinander: sonst liegt die
     Beschreibung unterhalb der Karte und man scrollt bei jedem Marker
     hin und her. Der Ersatzweg ohne Internet (Banner plus Liste)
     behaelt die volle Breite. */
  #ergebnis-karte {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--raster);
    align-items: start;
  }
  #ergebnis-karte > .banner,
  #ergebnis-karte > .karten { grid-column: 1 / -1; }
  /* Im Raster kommt der Abstand aus dem gap. Der eigene Aussenrand der
     Kaesten wuerde sich sonst dazuaddieren und die Luecken ungleich
     machen. */
  #ergebnis-karte > * { margin-top: 0; }

  /* --- Tagesplan ------------------------------------------------
     Die Stationen nutzen die ganze Breite: Sie stehen ohnehin in einer
     schmalen Spalte neben der Zeitleiste, und ein abgeschnittener Kasten
     mitten auf der Seite sieht nach Fehler aus. */
  .station-box { max-width: none; }
}

body { padding-bottom: 72px; }
@media (min-width: 60rem) { body { padding-bottom: 0; } }

/* ---------- 15b. Textfassung aller Ziele (angebote.html) ------
   Diese Seite ist die Fassung ohne JavaScript: fuer Suchmaschinen, fuer
   KI-Systeme und fuer alle, bei denen die App nicht laeuft. */
.liste-seite { padding-bottom: var(--s-64); }
.liste-seite h1 { margin-bottom: var(--s-12); }
.liste-seite > p { margin-bottom: var(--s-16); }
.liste-seite section { margin-top: var(--s-48); }
.liste-seite h2 {
  font-size: var(--t-24); padding-bottom: var(--s-8);
  border-bottom: 2px solid var(--linie); margin-bottom: var(--s-12);
}
.ziel {
  background: var(--flaeche); border: 1px solid var(--linie-2); border-radius: var(--r-16);
  padding: var(--s-16); margin-top: var(--s-16); box-shadow: var(--schatten-1);
}
.ziel h3 { font-size: var(--t-20); margin-bottom: var(--s-8); }
.ziel p { color: var(--tinte-2); font-size: var(--t-16); }
.ziel dl {
  margin: var(--s-12) 0 0; display: grid; grid-template-columns: 11rem minmax(0, 1fr);
  gap: var(--s-4) var(--s-12); font-size: var(--t-16);
}
.ziel dt { color: var(--tinte-3); }
.ziel dd { margin: 0; font-weight: 500; }
@media (max-width: 34rem) {
  .ziel dl { grid-template-columns: 1fr; }
  .ziel dt { margin-top: var(--s-8); font-size: var(--t-14); }
}

/* ---------- 16. Bewegung reduzieren ------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  /* Der Ladekreisel ist Information, keine Zierde: ohne Drehung saehe
     das Warten wie ein Absturz aus. Langsamer, aber sichtbar. */
  .kreisel { animation-duration: 1.4s !important; }
}

/* ---------- 17. Druck --------------------------------------- */
@media print {
  .fussnav, .herz, .umschalter, .leiste, .banner { display: none !important; }
  body { background: #fff; padding: 0; }
}