/* ==========================================================================
   STUDINACHHILFE MUSTERSTADT · Design-System
   --------------------------------------------------------------------------
   Aufbau dieser Datei:
   01 Variablen (Farben, Abstände, Schriften)  ← HIER fast alles ändern
   02 Reset & Basis
   03 Typografie & Textmarker-Effekt
   04 Layout (Container, Abschnitte)
   05 Fokus & Skip-Link (Barrierefreiheit)
   06 Header & Navigation
   07 Buttons
   08 Hero (Startbereich)
   09 Zwei Türen (Startseite)
   10 Vertrauensleiste
   11 Schritte (So läuft's)
   12 Karten & Raster
   13 Fächer-Chips
   14 Tutor-Karten & Avatare
   15 Preisblock & Vergleichstabelle
   16 FAQ (Aufklapp-Elemente)
   17 Formulare & Erfolgs-Panel
   18 Info- & Warnboxen
   19 Perspektiven (zwei Spalten)
   20 Footer
   21 Mobile Aktionsleiste (unten fixiert)
   22 Badges & Kleinkram
   23 Größere Bildschirme (Tablet/Desktop)
   24 Bewegung reduzieren & Druck
   ========================================================================== */

/* ==========================================================================
   01 VARIABLEN – die Schaltzentrale.
   Eine Farbe hier ändern = überall geändert.
   ========================================================================== */
:root {
  /* --- Farben: FARBSCHEMA v2 – WALDGRÜN · SENFGELB · TERRACOTTA · CREME ---
     Entschieden am 20.08.2026 (Vorlage: farbschema_folie_v2_2). Warme,
     vertrauensbildende Palette statt Signalfarben. Die früheren Paletten
     A–D (Blau/Weiß/Rot) sind raus – das hier ist die eine Wahrheit.
     Regel aus der Vorlage: Auf Senfgelb steht IMMER dunkler Text
     (Weiß auf Senfgelb ist zu kontrastarm). Kontraste gegen WCAG AA geprüft.
     ------------------------------------------------------------------------ */
  --tinte:        #223626;  /* Dunkelgrün: Überschriften, betonter Text */
  --fliess:       #5F513C;  /* Warmbraun: Fließtext statt Schwarz */
  --tinte-soft:   #6B5C44;  /* gedämpfter Text, Nebensätze */

  --marke:        #2B4234;  /* Waldgrün: Flächen, Hauptknöpfe, Logo */
  --marke-dunkel: #223626;  /* Hover-Zustand (= Dunkelgrün) */
  --marke-tint:   #E7EEE3;  /* sanfte grüne Fläche */
  --marke-text:   #2B4234;  /* Waldgrün als TEXT/Zahl/Link (dunkel: heller) */

  --akzent:       #E0AB52;  /* Senfgelb: CTA-Knöpfe, Akzentflächen.
                               IMMER mit dunklem Text (--auf-akzent) –
                               Weiß auf Senfgelb wäre zu kontrastarm. */
  --akzent-dunkel:#C99539;  /* Hover auf Senfgelb */
  --akzent-tint:  #F7ECD4;  /* sanfte gelbe Fläche */
  --akzent-text:  #7A5716;  /* Senf als Text AUF heller gelber Fläche */
  --akzent-hell:  #E8BC6F;  /* Senf als Text/Hover auf DUNKLER Markenfläche */
  --akzent-rand:  #E3CD9F;  /* gestrichelte Ränder auf Gelb-Tint */
  --marker:       #F1DCA8;  /* Textmarker (helles Senfgelb) */

  --terra:        #B5623A;  /* Terracotta: Highlights, Kicker, Kopf im Logo */
  --terra-dunkel: #9C4E2C;
  --terra-text:   #A85C37;  /* Terracotta als Text auf Creme (≈ 5,6:1) */
  --terra-tint:   #F5E3D7;  /* sanfte Terracotta-Fläche (Problem-Signale) */

  --papier:       #FAF6EC;  /* Creme statt Weiß – Karten bleiben weiß und
                               heben sich dadurch ab */
  --weiss:        #ffffff;
  --linie:        #DED3B8;  /* Sand: Rahmen, Trennlinien, Tabellenraster */
  --sand:         #EDE4CE;  /* Icon-Kreise, Bänder */
  --fehler:       #9B3B20;  /* Formular-Fehler – DUNKLER als Terracotta,
                               damit „Fehler“ und „Highlight“ unterscheidbar sind */
  --fehler-tint:  #F7E3DB;
  --haken:        #1F86BE;  /* Blauer Haken – bewusst die einzige kühle Farbe:
                               das Verifiziert-Signal soll herausstechen */
  --haken-text:   #135F88;
  --whatsapp:     #128c7e;  /* WhatsApp-Grün bleibt WhatsApp-Grün */
  --whatsapp-dunkel: #0e6f64;
  --auf-farbe:    #FAF6EC;  /* Text auf Waldgrün-Flächen (Creme) */
  --flaeche-tinte: #223626; /* dunkle Fläche (Footer, Countdown, Chat-Knopf) –
                               bleibt auch im Dark Mode dunkel! --tinte kippt
                               dort ins Helle und taugt NICHT als Hintergrund. */
  --auf-akzent:   #223626;  /* Text auf Senfgelb – IMMER dunkel */

  /* Alte Namen zeigen auf die neuen – damit bestehende Regeln weiterlaufen */
  --gruen:        var(--marke);
  --gruen-dunkel: var(--marke-dunkel);
  --gruen-tint:   var(--marke-tint);
  --gruen-text:   var(--marke-text);
  --gelb:         var(--akzent);
  --gelb-tint:    var(--akzent-tint);
  --auf-gelb:     var(--auf-akzent);

  /* --- Abstände (4er-Raster) ---------------------------------------------- */
  --raum-1: 0.25rem;   /*  4px */
  --raum-2: 0.5rem;    /*  8px */
  --raum-3: 0.75rem;   /* 12px */
  --raum-4: 1rem;      /* 16px */
  --raum-5: 1.5rem;    /* 24px */
  --raum-6: 2rem;      /* 32px */
  --raum-7: 3rem;      /* 48px */
  --raum-8: 4.5rem;    /* 72px */

  /* --- Rundungen & Schatten ----------------------------------------------- */
  --radius-s: 8px;
  --radius:   14px;
  --radius-l: 22px;
  --schatten:   0 1px 2px rgba(63, 52, 35, 0.06), 0 6px 18px rgba(63, 52, 35, 0.08);
  --schatten-l: 0 2px 6px rgba(63, 52, 35, 0.09), 0 16px 40px rgba(63, 52, 35, 0.14);

  /* --- Schrift ------------------------------------------------------------ */
  /* System-Schriften: schnell, ohne externe Server → kein Cookie-Banner nötig.
     Serifen-Headlines gehören zum Farbschema v2 (wie in Deck und Flyern). */
  --schriftfamilie: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --schrift-serif: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --schrift-xs:  0.8125rem;
  --schrift-s:   0.9375rem;
  --schrift-m:   1.0625rem;                    /* Fließtext: 17px */
  --schrift-l:   1.25rem;
  --schrift-xl:  clamp(1.45rem, 3.4vw, 1.9rem);
  --schrift-xxl: clamp(1.9rem, 5vw, 2.75rem);  /* Seitentitel */

  /* --- Stadtkarte (script.js liest diese Farben aus, damit die Karte
         sich automatisch an Hell/Dunkel anpasst) ---------------------------- */
  --karte-bg:     #F3EDDD;
  --karte-raster: #DED3B8;
  --karte-fluss:  #9FC2C8;

  /* --- Glas-Effekt (Glassmorphism) ---------------------------------------- */
  --glas-bg:     rgba(250, 246, 236, 0.72);
  --glas-rand:   rgba(255, 255, 255, 0.55);
  --glas-blur:   14px;

  /* --- Sonstiges ---------------------------------------------------------- */
  --inhalt-breite: 1100px;
  --uebergang: 180ms ease;
}

/* ==========================================================================
   01b DARK MODE – automatisch nach Systemthema (kein Cookie, kein Umschalter).
   Nur die Variablen werden neu belegt + ein paar Text-Grün-Stellen.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  :root {
    --tinte:        #EFEAD9;   /* warmes Hell für Überschriften */
    --flaeche-tinte: #2A362C;  /* dunkle Fläche, im Dunkeln leicht angehoben */
    --fliess:       #D6CCB6;   /* warmes Hell für Fließtext */
    --tinte-soft:   #A79B80;
    --marke:        #47705A;   /* helleres Waldgrün – Knöpfe brauchen Präsenz */
    --marke-dunkel: #395C4A;
    --marke-tint:   #24322A;   /* dunkle grüne Fläche */
    --marke-text:   #A8C7B2;   /* helles Salbeigrün für Text/Zahlen/Links */
    --akzent-tint:  #3A2E1A;   /* dunkle Senf-Fläche */
    --akzent-text:  #EDC583;   /* Senf-Text auf dunkler gelber Fläche */
    --akzent-hell:  #EDC583;
    --akzent-rand:  #6E5A33;
    --marker:       #7A5C23;   /* Textmarker im Dunkeln */
    --terra:        #C97A54;   /* helleres Terracotta für dunkle Flächen */
    --terra-dunkel: #B5623A;
    --terra-text:   #E2A283;
    --terra-tint:   #3B241A;
    --papier:       #161811;   /* tiefes, warmes Grün-Schwarz */
    --weiss:        #21241B;   /* Kartenfläche (statt Weiß) */
    --linie:        #3A3D2E;   /* Rahmen im Dunkeln */
    --sand:         #2E3126;
    --fehler:       #F2A08B;
    --fehler-tint:  #3B1F16;
    --haken:        #4FB0E2;
    --haken-text:   #9AD2F0;
    --karte-bg:     #20241B;
    --karte-raster: #3A3D2E;
    --karte-fluss:  #3E6A70;
    --glas-bg:      rgba(22, 24, 17, 0.66);
    --glas-rand:    rgba(255, 255, 255, 0.10);
    --schatten:     0 1px 2px rgba(0,0,0,0.4), 0 6px 18px rgba(0,0,0,0.45);
    --schatten-l:   0 2px 6px rgba(0,0,0,0.5), 0 16px 40px rgba(0,0,0,0.6);
    color-scheme: dark;
  }
  /* Grün, das als TEXT dient, auf die helle Variante umstellen */
  a { color: var(--marke-text); }
  .preis-zahl, .bento-zahl, .zahl, .kachel .wert { color: var(--marke-text); }
  .dachzeile { color: var(--terra-text); }
  .preis-box { border-color: var(--marke-text); }
  .vergleich thead th { background: var(--marke-dunkel); color: var(--auf-farbe); }
  /* Senfgelbe Flächen behalten IMMER dunklen Text (--tinte flippt sonst ins Helle) */
  .nav-liste .nav-cta a, .btn--gelb, .btn--gelb:hover,
  .tuer--tutor h2, .tuer--tutor .tuer-pfeil, .schritte li::before,
  .avatar--gelb, .chat-avatar, .bento--gelb .bento-zahl,
  .stepper li.aktiv .punkt { color: var(--auf-akzent); }
  /* Das Logo-Zeichen ist KEINE gelbe Fläche – es folgt der hellen Markenfarbe. */
  .logo-zeichen { color: var(--marke-text); }
  /* Textmarker: heller Marker, dunkler Text – im Dunkeln umgekehrt */
  .marker { color: #ffffff; }
}

/* ==========================================================================
   02 RESET & BASIS
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

/* Das hidden-Attribut gewinnt IMMER – auch gegen display:flex/grid von Klassen */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

/* Sprungziele nicht unter der klebenden Kopfzeile verstecken */
[id] { scroll-margin-top: 92px; }

body {
  margin: 0;
  font-family: var(--schriftfamilie);
  font-size: var(--schrift-m);
  line-height: 1.65;
  color: var(--fliess);   /* Warmbraun als Fließtext – Überschriften bleiben Dunkelgrün */
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--gruen-text); text-underline-offset: 3px; }
a:hover { color: var(--gruen-text); }

ul, ol { padding-left: 1.3em; }
ul li, ol li { margin-bottom: var(--raum-2); }

hr { border: 0; border-top: 1px solid var(--linie); margin: var(--raum-6) 0; }

/* ==========================================================================
   03 TYPOGRAFIE & TEXTMARKER
   ========================================================================== */
h1, h2, h3, h4 {
  line-height: 1.2;
  margin: 0 0 var(--raum-4);
  font-weight: 750;
  letter-spacing: -0.015em;
  text-wrap: balance;
  color: var(--tinte);   /* Überschriften in Dunkelgrün */
}
/* Serifen-Headlines wie im Deck und auf den Flyern (Farbschema v2) */
h1, h2, h3 {
  font-family: var(--schrift-serif);
  font-weight: 700;
  letter-spacing: 0;
}
h1 { font-size: var(--schrift-xxl); }
h2 { font-size: var(--schrift-xl); }
h3 { font-size: var(--schrift-l); }
h4 { font-size: var(--schrift-m); }

p { margin: 0 0 var(--raum-4); }

/* Textmarker: gelber Balken hinter der unteren Worthälfte – unser Markenzeichen */
.marker {
  background: linear-gradient(var(--marker), var(--marker)) no-repeat left bottom / 100% 42%;
  padding: 0 0.12em;
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Vorspann: der größere Einleitungssatz unter einer Überschrift */
.vorspann {
  font-size: var(--schrift-l);
  color: var(--tinte-soft);
  max-width: 46ch;
  text-wrap: pretty;
}

/* Kleiner Etiketten-Text über Überschriften */
.dachzeile {
  display: inline-block;
  font-size: var(--schrift-xs);
  font-weight: 750;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--terra-text);   /* Kicker in Terracotta (Farbschema v2) */
  margin-bottom: var(--raum-3);
}

.klein { font-size: var(--schrift-s); color: var(--tinte-soft); }
.zentriert { text-align: center; }
.zentriert .vorspann { margin-inline: auto; }

/* ==========================================================================
   04 LAYOUT
   ========================================================================== */
.container {
  max-width: var(--inhalt-breite);
  margin-inline: auto;
  padding-inline: var(--raum-4);
}

.abschnitt { padding-block: var(--raum-7); }
.abschnitt--getoent { background: var(--weiss); border-block: 1px solid var(--linie); }
.abschnitt--gruen { background: var(--gruen); color: var(--auf-farbe); }
.abschnitt--gruen h2 { color: var(--auf-farbe); }
.abschnitt--gruen a:not(.btn) { color: #fff; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.abschnitt--schmal > .container { max-width: 780px; }

.abschnitt-kopf { max-width: 640px; margin-bottom: var(--raum-6); }
.abschnitt-kopf--mittig { margin-inline: auto; text-align: center; }

/* ==========================================================================
   05 FOKUS & SKIP-LINK
   ========================================================================== */
:focus-visible {
  outline: 3px solid var(--gruen);
  outline-offset: 2px;
  border-radius: 4px;
}
.abschnitt--gruen :focus-visible,
.site-footer :focus-visible,
.btn--primaer:focus-visible,
.btn--whatsapp:focus-visible {
  outline-color: var(--gelb);
}

.skip-link {
  position: absolute;
  left: var(--raum-4);
  top: -100px;
  z-index: 100;
  background: var(--flaeche-tinte);
  color: var(--auf-farbe);
  padding: var(--raum-3) var(--raum-4);
  border-radius: var(--radius-s);
  transition: top var(--uebergang);
}
.skip-link:focus { top: var(--raum-3); color: var(--auf-farbe); }

/* ==========================================================================
   06 HEADER & NAVIGATION
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--glas-bg);                 /* Milchglas (Glassmorphism) */
  -webkit-backdrop-filter: blur(var(--glas-blur)) saturate(1.4);
  backdrop-filter: blur(var(--glas-blur)) saturate(1.4);
  border-bottom: 1px solid var(--glas-rand);
}
/* Fallback ohne backdrop-filter-Unterstützung: deckende Fläche */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header, .aktionsleiste { background: var(--papier); }
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-4);
  min-height: 64px;
  flex-wrap: wrap;
  padding-block: var(--raum-2);
}

/* Logo: Wortmarke mit Textmarker-Quadrat */
.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--raum-2);
  font-weight: 800;
  font-size: var(--schrift-l);
  letter-spacing: -0.02em;
  color: var(--tinte);
  text-decoration: none;
}
.logo:hover { color: var(--tinte); }
/* Wortmarke „Dein-Aufwind": Radler mit Rückenwind.
   Rad und Fahrer:in erben die Farbe (currentColor), die Böen bleiben immer
   gelb – so funktioniert dieselbe Grafik auf hellem und dunklem Grund. */
.logo-zeichen {
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: var(--gruen-text);
}
.logo-zeichen svg { width: 100%; height: 100%; overflow: visible; }
.footer-marke .logo-zeichen { color: var(--auf-farbe); }

/* Burger-Knopf (nur mobil sichtbar, nur mit JS aktiv) */
.nav-toggle {
  display: none;
  appearance: none;
  border: 1px solid var(--linie);
  background: var(--weiss);
  border-radius: var(--radius-s);
  padding: 10px 14px;
  min-height: 44px;
  font: inherit;
  font-weight: 700;
  color: var(--tinte);
  cursor: pointer;
  align-items: center;
  gap: var(--raum-2);
}
.nav-toggle .burger { display: inline-block; width: 18px; }
.nav-toggle .burger span {
  display: block; height: 2px; background: var(--tinte);
  margin: 4px 0; border-radius: 2px; transition: transform var(--uebergang), opacity var(--uebergang);
}
.nav-offen .nav-toggle .burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-offen .nav-toggle .burger span:nth-child(2) { opacity: 0; }
.nav-offen .nav-toggle .burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav-liste {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--raum-1);
  margin: 0;
  padding: 0;
}
.nav-liste li { margin: 0; }
.nav-liste a {
  display: inline-block;
  padding: 10px 12px;
  min-height: 44px;
  border-radius: var(--radius-s);
  color: var(--tinte);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--schrift-s);
}
.nav-liste a:hover { background: var(--gruen-tint); color: var(--gruen-text); }
.nav-liste a[aria-current="page"] {
  background: var(--gruen);
  color: var(--auf-farbe);
}
.nav-liste .nav-cta a {
  background: var(--akzent);
  color: var(--auf-akzent);
  font-weight: 750;
}
.nav-liste .nav-cta a:hover { background: var(--akzent-dunkel); color: var(--auf-akzent); }

/* Mobil: Liste einklappen, wenn JS aktiv ist (ohne JS bleibt alles sichtbar) */
@media (max-width: 859px) {
  .js .nav-toggle { display: inline-flex; }
  .js .nav-liste {
    display: none;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    padding-block: var(--raum-3) var(--raum-4);
    border-top: 1px solid var(--linie);
    margin-top: var(--raum-2);
  }
  .js .nav-offen .nav-liste { display: flex; }
  .js .nav-liste a { display: block; padding: 12px 14px; font-size: var(--schrift-m); }
}

/* ==========================================================================
   07 BUTTONS
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--raum-2);
  min-height: 48px;                 /* Daumen-freundlich: nie unter 44px */
  padding: 12px 22px;
  border-radius: 12px;
  border: 2px solid transparent;
  font: inherit;
  font-weight: 750;
  font-size: var(--schrift-m);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--uebergang), border-color var(--uebergang), transform var(--uebergang);
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 20px; height: 20px; flex-shrink: 0; }

.btn--primaer { background: var(--gruen); color: var(--auf-farbe); }
.btn--primaer:hover { background: var(--gruen-dunkel); color: var(--auf-farbe); }

.btn--gelb { background: var(--akzent); color: var(--auf-akzent); }
.btn--gelb:hover { background: var(--akzent-dunkel); color: var(--auf-akzent); }

.btn--sekundaer { background: var(--weiss); color: var(--gruen-text); border-color: var(--gruen-text); }
.btn--sekundaer:hover { background: var(--gruen-tint); color: var(--gruen-text); }

.btn--whatsapp { background: var(--whatsapp); color: var(--auf-farbe); }
.btn--whatsapp:hover { background: var(--whatsapp-dunkel); color: var(--auf-farbe); }

.btn--gross { min-height: 56px; padding: 16px 28px; font-size: var(--schrift-l); border-radius: 14px; }
.btn--breit { width: 100%; }

.btn-zeile { display: flex; flex-wrap: wrap; gap: var(--raum-3); }

/* ==========================================================================
   08 HERO
   ========================================================================== */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: var(--raum-7) var(--raum-7);
  /* Punktraster wie kariertes Papier + weicher gelber Schein */
  background:
    radial-gradient(ellipse 640px 420px at 88% -10%, var(--gelb-tint), transparent 65%),
    radial-gradient(var(--linie) 1.2px, transparent 1.2px) 0 0 / 24px 24px,
    var(--papier);
}
.hero h1 { max-width: 21ch; }
.hero .vorspann { margin-bottom: var(--raum-5); }

.hero-preis {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--raum-2) var(--raum-3);
  background: var(--glas-bg);                 /* frostige Glas-Optik über dem Punktraster */
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  backdrop-filter: blur(10px) saturate(1.3);
  border: 1px solid var(--glas-rand);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: var(--raum-3) var(--raum-4);
  margin-bottom: var(--raum-5);
}
.hero-preis strong { font-size: var(--schrift-xl); letter-spacing: -0.02em; }
.hero-preis span { color: var(--tinte-soft); font-size: var(--schrift-s); }

/* ==========================================================================
   09 ZWEI TÜREN (Startseite)
   ========================================================================== */
.tueren {
  display: grid;
  gap: var(--raum-4);
  margin-top: var(--raum-5);
}
.tuer {
  display: block;
  padding: var(--raum-5);
  border-radius: var(--radius-l);
  text-decoration: none;
  box-shadow: var(--schatten);
  transition: transform var(--uebergang), box-shadow var(--uebergang);
  border: 2px solid transparent;
}
.tuer:hover { transform: translateY(-3px); box-shadow: var(--schatten-l); }
.tuer h2 { display: flex; align-items: center; gap: var(--raum-2); font-size: var(--schrift-l); margin-bottom: var(--raum-2); }
.tuer p { margin: 0; font-size: var(--schrift-s); }
.tuer .tuer-pfeil { margin-top: var(--raum-3); font-weight: 750; display: inline-flex; align-items: center; gap: 6px; }

.tuer--eltern { background: var(--gruen); color: var(--auf-farbe); }
.tuer--eltern h2, .tuer--eltern .tuer-pfeil { color: var(--auf-farbe); }
.tuer--eltern p { color: rgba(255,255,255,.84); }
.tuer--eltern:hover { background: var(--gruen-dunkel); }

.tuer--tutor { background: var(--akzent); color: var(--auf-akzent); }
.tuer--tutor h2, .tuer--tutor .tuer-pfeil { color: var(--auf-akzent); }
.tuer--tutor p { color: rgba(34, 54, 38, .92); }   /* dunkles Grün auf Senfgelb – Weiß wäre zu kontrastarm */
.tuer--tutor:hover { background: var(--akzent-dunkel); }

/* ==========================================================================
   10 VERTRAUENSLEISTE
   ========================================================================== */
.vertrauensleiste {
  display: grid;
  gap: var(--raum-4);
  padding: var(--raum-5) 0;
  margin: 0;
  list-style: none;
}
.vertrauensleiste li {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  margin: 0;
}
.vertrauensleiste .zahl {
  font-size: var(--schrift-xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--gruen-text);
  line-height: 1;
}
.vertrauensleiste .label { font-size: var(--schrift-s); color: var(--tinte-soft); line-height: 1.35; }

/* ==========================================================================
   11 SCHRITTE
   ========================================================================== */
.schritte {
  list-style: none;
  counter-reset: schritt;
  display: grid;
  gap: var(--raum-4);
  padding: 0;
  margin: 0;
}
.schritte li {
  counter-increment: schritt;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: var(--raum-5);
  position: relative;
  margin: 0;
}
.schritte li::before {
  content: counter(schritt);
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--akzent);
  color: var(--auf-akzent);
  font-weight: 800;
  font-size: var(--schrift-l);
  margin-bottom: var(--raum-3);
}
.schritte h3 { font-size: var(--schrift-m); margin-bottom: var(--raum-2); }
.schritte p { margin: 0; font-size: var(--schrift-s); color: var(--tinte-soft); }

/* ==========================================================================
   12 KARTEN & RASTER
   ========================================================================== */
.karten-raster { display: grid; gap: var(--raum-4); }

.karte {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: var(--raum-5);
  box-shadow: var(--schatten);
}
.karte h3 { display: flex; align-items: center; gap: var(--raum-2); font-size: var(--schrift-m); }
.karte p:last-child { margin-bottom: 0; }
.karte--tint { background: var(--gruen-tint); border-color: transparent; box-shadow: none; }
.karte--gelb { background: var(--gelb-tint); border-color: transparent; box-shadow: none; }

.icon-kreis {
  width: 42px; height: 42px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--gruen-tint);
  color: var(--gruen-text);
  display: grid;
  place-items: center;
}
.icon-kreis svg { width: 22px; height: 22px; }

/* ==========================================================================
   13 FÄCHER-CHIPS
   ========================================================================== */
.chips { display: flex; flex-wrap: wrap; gap: var(--raum-2); padding: 0; margin: 0; list-style: none; }
.chips li { margin: 0; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: var(--schrift-s);
  font-weight: 650;
}
.chip small { font-weight: 500; color: var(--tinte-soft); }
.chip--voll { background: var(--gruen-tint); border-color: transparent; color: var(--gruen-text); }

/* ==========================================================================
   14 TUTOR-KARTEN & AVATARE
   ========================================================================== */
.tutor-karte {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: var(--raum-5);
  box-shadow: var(--schatten);
  display: flex;
  flex-direction: column;
  gap: var(--raum-3);
  position: relative;
}
.tutor-kopf { display: flex; align-items: center; gap: var(--raum-3); }
.tutor-kopf h3 { margin: 0; font-size: var(--schrift-l); }
.tutor-kopf .studiengang { margin: 2px 0 0; font-size: var(--schrift-s); color: var(--tinte-soft); }

/* Ehrliche Platzhalter: Initialen-Kreise statt Stockfotos.
   Vor dem Livegang durch echte Fotos ersetzen (<img class="avatar-foto">). */
.avatar {
  width: 60px; height: 60px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: var(--schrift-l);
  letter-spacing: 0.02em;
  background: var(--gruen);
  color: var(--auf-farbe);
}
.avatar--gelb  { background: var(--akzent); color: var(--auf-akzent); }
.avatar--tint  { background: var(--gruen-tint); color: var(--gruen-text); }
.avatar--tinte { background: var(--flaeche-tinte); color: var(--auf-farbe); }
.avatar-foto { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; }

.tutor-zitat { margin: 0; font-size: var(--schrift-s); color: var(--tinte-soft); font-style: italic; }
.tutor-fuss { display: flex; flex-wrap: wrap; gap: var(--raum-2); margin-top: auto; }

/* ==========================================================================
   15 PREISBLOCK & VERGLEICHSTABELLE
   ========================================================================== */
.preis-box {
  background: var(--weiss);
  border: 2px solid var(--gruen);
  border-radius: var(--radius-l);
  padding: var(--raum-6);
  text-align: center;
  box-shadow: var(--schatten);
}
.preis-box .preis-zahl {
  font-size: clamp(2.6rem, 7vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--gruen-text);
  line-height: 1;
  display: block;
  margin-bottom: var(--raum-2);
}
.preis-box .preis-einheit { color: var(--tinte-soft); font-size: var(--schrift-m); }
.preis-merkmale {
  list-style: none;
  padding: 0;
  margin: var(--raum-5) 0 0;
  display: grid;
  gap: var(--raum-2);
  text-align: left;
}
.preis-merkmale li { display: flex; gap: var(--raum-2); align-items: flex-start; margin: 0; }
.preis-merkmale svg { width: 22px; height: 22px; color: var(--gruen-text); flex-shrink: 0; margin-top: 2px; }

.tabelle-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.vergleich {
  width: 100%;
  border-collapse: collapse;
  background: var(--weiss);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--schatten);
  font-size: var(--schrift-s);
  min-width: 560px;
}
.vergleich caption { text-align: left; padding-bottom: var(--raum-3); font-weight: 750; font-size: var(--schrift-m); caption-side: top; }
.vergleich th, .vergleich td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--linie); }
.vergleich thead th { background: var(--flaeche-tinte); color: var(--auf-farbe); font-weight: 700; }
.vergleich tbody tr:last-child td, .vergleich tbody tr:last-child th { border-bottom: 0; }
.vergleich .wir th, .vergleich .wir td { background: var(--gelb-tint); font-weight: 750; }
.vergleich tbody th { font-weight: 650; }

/* ==========================================================================
   16 FAQ
   ========================================================================== */
.faq { display: grid; gap: var(--raum-3); }
.faq details {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
}
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: var(--raum-4) var(--raum-5);
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--raum-3);
  min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--gruen-text);
  transition: transform var(--uebergang);
  flex-shrink: 0;
  line-height: 1;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details[open] summary { border-bottom: 1px dashed var(--linie); }
.faq .faq-antwort { padding: var(--raum-4) var(--raum-5); color: var(--tinte-soft); }
.faq .faq-antwort p:last-child { margin-bottom: 0; }

/* ==========================================================================
   17 FORMULARE & ERFOLGS-PANEL
   ========================================================================== */
.formular {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius-l);
  padding: var(--raum-5);
  box-shadow: var(--schatten);
}
.formular fieldset { border: 0; padding: 0; margin: 0 0 var(--raum-4); min-width: 0; }
.formular legend {
  font-weight: 750;
  padding: 0;
  margin-bottom: var(--raum-3);
  font-size: var(--schrift-m);
}

.feld { margin-bottom: var(--raum-4); }
.feld label { display: block; font-weight: 650; margin-bottom: 6px; font-size: var(--schrift-s); }
.feld .optional { font-weight: 500; color: var(--tinte-soft); }

.feld input[type="text"],
.feld input[type="tel"],
.feld input[type="email"],
.feld input[type="password"],
.feld input[type="number"],
.feld input[type="date"],
.feld input[type="time"],
.feld input[type="url"],
.feld input[type="search"],
.feld select,
.feld textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  font: inherit;
  color: var(--tinte);
  background: var(--papier);
  border: 1.5px solid var(--linie);
  border-radius: var(--radius-s);
  transition: border-color var(--uebergang), background var(--uebergang);
}
.feld textarea { min-height: 110px; resize: vertical; }
.feld input:focus, .feld select:focus, .feld textarea:focus {
  outline: none;
  border-color: var(--gruen-text);
  background: var(--weiss);
  box-shadow: 0 0 0 3px var(--gruen-tint);
}

/* Fehlerzustand */
.feld.hat-fehler input, .feld.hat-fehler select, .feld.hat-fehler textarea {
  border-color: var(--fehler);
  background: var(--fehler-tint);
}
.feld-fehler {
  display: none;
  color: var(--fehler);
  font-size: var(--schrift-s);
  font-weight: 650;
  margin-top: 6px;
}
.feld.hat-fehler .feld-fehler { display: block; }

/* Auswahl-Pillen (Radio/Checkbox als große Tap-Flächen) */
.pillen { display: flex; flex-wrap: wrap; gap: var(--raum-2); }
.pille { position: relative; }
.pille input {
  position: absolute;
  opacity: 0;
  inset: 0;
  cursor: pointer;
}
.pille span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1.5px solid var(--linie);
  background: var(--papier);
  font-weight: 650;
  font-size: var(--schrift-s);
  transition: all var(--uebergang);
}
.pille input:checked + span { background: var(--gruen); border-color: var(--gruen-text); color: var(--auf-farbe); }
.pille input:focus-visible + span { outline: 3px solid var(--gruen); outline-offset: 2px; }
.pille:hover span { border-color: var(--gruen-text); }

/* Honeypot: für Menschen unsichtbar, Spam-Bots füllen es aus */
.hp-feld {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
}

.formular-fusszeile { font-size: var(--schrift-xs); color: var(--tinte-soft); margin-top: var(--raum-3); }

/* Zusammenfassung nach dem Absenden */
.erfolg-panel {
  display: none;
  background: var(--gruen-tint);
  border: 2px solid var(--gruen);
  border-radius: var(--radius-l);
  padding: var(--raum-5);
}
.erfolg-panel.sichtbar { display: block; }
.erfolg-panel h3 { display: flex; align-items: center; gap: var(--raum-2); color: var(--gruen-text); }
.erfolg-panel h3 svg { width: 26px; height: 26px; color: var(--gruen-text); }
.nachricht-vorschau {
  background: var(--weiss);
  border: 1px dashed var(--gruen);
  border-radius: var(--radius-s);
  padding: var(--raum-4);
  font-size: var(--schrift-s);
  white-space: pre-wrap;
  word-break: break-word;
  margin-bottom: var(--raum-4);
}

/* ==========================================================================
   18 INFO- & WARNBOXEN
   ========================================================================== */
.infobox {
  display: flex;
  gap: var(--raum-3);
  background: var(--gelb-tint);
  border-left: 4px solid var(--gelb);
  border-radius: var(--radius-s);
  padding: var(--raum-4) var(--raum-5);
  margin-block: var(--raum-5);
}
.infobox svg { width: 24px; height: 24px; flex-shrink: 0; color: var(--tinte); margin-top: 2px; }
.infobox p { margin: 0; font-size: var(--schrift-s); }
.infobox p + p { margin-top: var(--raum-2); }

.warnbox {
  background: var(--fehler-tint);
  border: 1.5px dashed var(--fehler);
  border-radius: var(--radius);
  padding: var(--raum-4) var(--raum-5);
  margin-block: var(--raum-5);
  font-size: var(--schrift-s);
}
.warnbox strong { color: var(--fehler); }
.warnbox p:last-child { margin-bottom: 0; }

/* ==========================================================================
   19 PERSPEKTIVEN (zwei Spalten: Familie / Tutor)
   ========================================================================== */
.perspektiven { display: grid; gap: var(--raum-4); }
.perspektive {
  border-radius: var(--radius-l);
  padding: var(--raum-5);
}
.perspektive--familie { background: var(--gruen-tint); }
.perspektive--tutor { background: var(--gelb-tint); }
.perspektive ol { margin: 0; padding-left: 1.4em; }
.perspektive ol li { margin-bottom: var(--raum-3); }
.perspektive ol li::marker { font-weight: 800; color: var(--gruen-text); }
.perspektive--tutor ol li::marker { color: var(--akzent-text); }

/* ==========================================================================
   20 FOOTER
   ========================================================================== */
.site-footer {
  background: var(--flaeche-tinte);
  color: rgba(255,255,255,.80);
  padding-block: var(--raum-7) var(--raum-5);
  margin-top: var(--raum-8);
  font-size: var(--schrift-s);
}
.site-footer a { color: var(--auf-farbe); }
.site-footer a:hover { color: var(--akzent-hell); }
.site-footer h4 { color: var(--auf-farbe); font-size: var(--schrift-s); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: var(--raum-3); }
.footer-raster { display: grid; gap: var(--raum-6); margin-bottom: var(--raum-6); }
.footer-raster ul { list-style: none; padding: 0; margin: 0; }
.footer-raster li { margin-bottom: var(--raum-2); }
.footer-marke .logo { color: var(--auf-farbe); margin-bottom: var(--raum-3); }
.footer-unten {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: var(--raum-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-3) var(--raum-5);
  justify-content: space-between;
  font-size: var(--schrift-xs);
}
.footer-unten ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--raum-4); padding: 0; margin: 0; }
.footer-unten li { margin: 0; }

/* ==========================================================================
   21 MOBILE AKTIONSLEISTE (unten fixiert, nur Handy)
   ========================================================================== */
.aktionsleiste {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 60;
  display: flex;
  gap: var(--raum-2);
  padding: var(--raum-2) var(--raum-3) calc(var(--raum-2) + env(safe-area-inset-bottom));
  background: var(--glas-bg);
  -webkit-backdrop-filter: blur(var(--glas-blur)) saturate(1.4);
  backdrop-filter: blur(var(--glas-blur)) saturate(1.4);
  border-top: 1px solid var(--glas-rand);
}
.aktionsleiste .btn { flex: 1; min-height: 50px; font-size: var(--schrift-s); padding-inline: var(--raum-3); }
body.hat-aktionsleiste { padding-bottom: 84px; }
@media (min-width: 860px) {
  .aktionsleiste { display: none; }
  body.hat-aktionsleiste { padding-bottom: 0; }
}

/* ==========================================================================
   22 BADGES & KLEINKRAM
   ========================================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--schrift-xs);
  font-weight: 750;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--gruen-tint);
  color: var(--gruen-text);
}
.badge--gelb { background: var(--akzent-tint); color: var(--akzent-text); }
.badge--muster {
  position: absolute;
  top: 12px; right: 12px;
  background: var(--gelb-tint);
  color: var(--akzent-text);
  border: 1px dashed var(--akzent-rand);
}

.quellen { font-size: var(--schrift-xs); color: var(--tinte-soft); }
.quellen p { margin-bottom: var(--raum-1); }

/* ==========================================================================
   23 GRÖSSERE BILDSCHIRME
   ========================================================================== */
@media (min-width: 640px) {
  .tueren { grid-template-columns: 1fr 1fr; }
  .vertrauensleiste { grid-template-columns: repeat(3, 1fr); }
  .karten-raster--2 { grid-template-columns: 1fr 1fr; }
  .footer-raster { grid-template-columns: 1.4fr 1fr 1fr; }
}

@media (min-width: 860px) {
  .abschnitt { padding-block: var(--raum-8); }
  .schritte { grid-template-columns: repeat(3, 1fr); }
  .karten-raster--3 { grid-template-columns: repeat(3, 1fr); }
  .karten-raster--4 { grid-template-columns: repeat(2, 1fr); }
  .perspektiven { grid-template-columns: 1fr 1fr; }
  .hero { padding-block: var(--raum-8); }

  /* Hero zweispaltig: Text links, Preis/Türen rechts */
  .hero-raster {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: var(--raum-7);
    align-items: center;
  }

  /* Formular-Seiten: Inhalt + Formular nebeneinander */
  .split {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: var(--raum-7);
    align-items: start;
  }
  .split .formular-spalte { position: sticky; top: 88px; }
}

@media (min-width: 1000px) {
  .karten-raster--4 { grid-template-columns: repeat(4, 1fr); }
  .tutor-raster { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 640px) and (max-width: 999px) {
  .tutor-raster { grid-template-columns: repeat(2, 1fr); }
}
.tutor-raster { display: grid; gap: var(--raum-4); }

/* ==========================================================================
   25 KONTO-BEREICHE (Schüler- & Tutor-Dashboard)
   ========================================================================== */
/* Hinweisband: ehrlich sagen, dass das ein Prototyp ist */
.demo-band {
  background: var(--gelb-tint);
  border-bottom: 1px solid var(--akzent-rand);
  font-size: var(--schrift-xs);
  padding: 8px 0;
  color: var(--akzent-text);
}
.demo-band .container { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }

/* Status-Stepper der Vermittlung */
.stepper { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--raum-3); }
.stepper li {
  display: flex;
  gap: var(--raum-3);
  align-items: flex-start;
  margin: 0;
  opacity: 0.45;
}
.stepper li.aktiv, .stepper li.erledigt { opacity: 1; }
.stepper .punkt {
  width: 34px; height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: var(--schrift-s);
  background: var(--linie);
  color: var(--tinte-soft);
}
.stepper li.erledigt .punkt { background: var(--gruen); color: var(--auf-farbe); }
.stepper li.aktiv .punkt { background: var(--akzent); color: var(--auf-akzent); box-shadow: 0 0 0 4px var(--akzent-tint); }
.stepper h3 { font-size: var(--schrift-m); margin: 2px 0 2px; }
.stepper p { margin: 0; font-size: var(--schrift-s); color: var(--tinte-soft); }

/* Statuszeilen-Badges */
.status-badge { font-size: var(--schrift-xs); font-weight: 750; padding: 4px 10px; border-radius: 999px; }
.status-badge--suche { background: var(--akzent-tint); color: var(--akzent-text); }
.status-badge--angefragt { background: var(--marke-tint); color: var(--marke-text); }
.status-badge--vermittelt { background: var(--gruen-tint); color: var(--gruen-text); }
.status-badge--pausiert { background: var(--linie); color: var(--tinte-soft); }

/* Kontokopf */
.konto-kopf { display: flex; align-items: center; gap: var(--raum-3); flex-wrap: wrap; margin-bottom: var(--raum-5); }
.konto-kopf .avatar { width: 52px; height: 52px; }
.konto-kopf h1 { margin: 0; font-size: var(--schrift-xl); }
.konto-kopf .klein { margin: 2px 0 0; }
.konto-kopf .rechts { margin-left: auto; display: flex; gap: var(--raum-2); flex-wrap: wrap; }

.konto-raster { display: grid; gap: var(--raum-4); }
@media (min-width: 860px) {
  .konto-raster { grid-template-columns: 1.2fr 0.8fr; align-items: start; }
}

/* Verlaufs-/Protokoll-Listen */
.verlauf { list-style: none; padding: 0; margin: 0; }
.verlauf li {
  display: flex; gap: var(--raum-3);
  padding: 10px 0;
  border-bottom: 1px dashed var(--linie);
  font-size: var(--schrift-s);
  margin: 0;
}
.verlauf li:last-child { border-bottom: 0; }
.verlauf time { color: var(--tinte-soft); white-space: nowrap; font-size: var(--schrift-xs); padding-top: 2px; }

/* Kennzahl-Kacheln (Tutor: Stunden, Verdienst) */
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)); gap: var(--raum-3); }
.kachel {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: var(--raum-4);
  text-align: center;
}
.kachel .wert { display: block; font-size: var(--schrift-xl); font-weight: 800; color: var(--gruen-text); letter-spacing: -0.02em; }
.kachel .label { font-size: var(--schrift-xs); color: var(--tinte-soft); }

/* Schülerkarten im Tutor-Bereich */
.schueler-karte {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: var(--raum-4);
  display: grid;
  gap: var(--raum-3);
}
.schueler-karte .kopf { display: flex; align-items: center; gap: var(--raum-3); flex-wrap: wrap; }
.schueler-karte .kopf h3 { margin: 0; font-size: var(--schrift-m); }
.schueler-karte .kopf .klein { margin: 0; }
.schueler-karte .aktionen { display: flex; gap: var(--raum-2); flex-wrap: wrap; }
.schueler-karte .aktionen .btn { min-height: 42px; padding: 8px 14px; font-size: var(--schrift-s); }

/* Kleine Inline-Formulare (Termin setzen, Stunde protokollieren) */
.inline-form { display: flex; flex-wrap: wrap; gap: var(--raum-2); align-items: end; }
.inline-form .feld { margin: 0; flex: 1 1 140px; }
.inline-form .btn { min-height: 44px; }

/* Umschalter (verfügbar / pausiert) */
.schalter { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 650; font-size: var(--schrift-s); }
.schalter input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.schalter .bahn {
  width: 46px; height: 26px; border-radius: 999px;
  background: var(--linie); position: relative; transition: background var(--uebergang); flex-shrink: 0;
}
.schalter .bahn::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%; background: var(--weiss);
  box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: left var(--uebergang);
}
.schalter input:checked + .bahn { background: var(--gruen); }
.schalter input:checked + .bahn::after { left: 23px; }
.schalter input:focus-visible + .bahn { outline: 3px solid var(--gruen); outline-offset: 2px; }

/* Sortier-Auswahl */
.sortieren { display: flex; align-items: center; gap: var(--raum-2); font-size: var(--schrift-s); flex-wrap: wrap; }
.sortieren select {
  font: inherit; padding: 8px 12px; border-radius: var(--radius-s);
  border: 1.5px solid var(--linie); background: var(--weiss); min-height: 44px;
}

/* Leere Zustände freundlich gestalten */
.leer-hinweis {
  border: 1.5px dashed var(--linie);
  border-radius: var(--radius);
  padding: var(--raum-5);
  text-align: center;
  color: var(--tinte-soft);
  font-size: var(--schrift-s);
}

/* ==========================================================================
   26 HILFE-CHAT (schwebendes Fenster)
   ========================================================================== */
.chat-wrap { position: fixed; right: 14px; bottom: 14px; z-index: 70; }
body.hat-aktionsleiste .chat-wrap { bottom: 88px; }
@media (min-width: 860px) { body.hat-aktionsleiste .chat-wrap { bottom: 14px; } }

.chat-start {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--flaeche-tinte); color: var(--auf-farbe);
  border: 0; border-radius: 999px;
  padding: 12px 18px; min-height: 48px;
  font: inherit; font-weight: 750; font-size: var(--schrift-s);
  cursor: pointer; box-shadow: var(--schatten-l);
}
.chat-start:hover { background: var(--marke-dunkel); }
.chat-start svg { width: 20px; height: 20px; }

.chat-fenster[hidden] { display: none; } /* hidden-Attribut gewinnt gegen display:flex */
.chat-fenster {
  position: fixed;
  right: 14px; bottom: 76px;
  width: min(380px, calc(100vw - 28px));
  max-height: min(560px, calc(100vh - 100px));
  display: flex; flex-direction: column;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius-l);
  box-shadow: var(--schatten-l);
  overflow: hidden;
}
body.hat-aktionsleiste .chat-fenster { bottom: 150px; }
@media (min-width: 860px) { body.hat-aktionsleiste .chat-fenster { bottom: 76px; } }

.chat-kopf {
  display: flex; align-items: center; gap: var(--raum-3);
  background: var(--gruen); color: var(--auf-farbe);
  padding: var(--raum-3) var(--raum-4);
}
.chat-kopf strong { display: block; line-height: 1.2; }
.chat-kopf small { color: rgba(255,255,255,.78); font-size: var(--schrift-xs); }
.chat-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--akzent); color: var(--auf-akzent);
  display: grid; place-items: center; font-weight: 900; flex-shrink: 0;
}
.chat-zu {
  margin-left: auto; background: transparent; border: 0; color: var(--auf-farbe);
  font-size: 1.6rem; line-height: 1; cursor: pointer; padding: 4px 8px; min-height: 44px;
}

.chat-verlauf { flex: 1; overflow-y: auto; padding: var(--raum-4); display: grid; gap: var(--raum-3); align-content: start; background: var(--papier); }
.chat-nachricht { max-width: 88%; padding: 10px 14px; border-radius: 14px; font-size: var(--schrift-s); line-height: 1.5; }
.chat-nachricht--bot { background: var(--weiss); border: 1px solid var(--linie); border-bottom-left-radius: 4px; justify-self: start; }
.chat-nachricht--ich { background: var(--gruen); color: var(--auf-farbe); border-bottom-right-radius: 4px; justify-self: end; }
.chat-nachricht a { color: var(--gruen-text); font-weight: 650; }
.chat-nachricht--ich a { color: #fff; text-decoration-thickness: 2px; }

/* Aktionsknöpfe innerhalb einer Bot-Nachricht (Anfrage starten, Rechner …) */
.chat-aktionen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--raum-3); }
.chat-aktion {
  display: inline-flex; align-items: center;
  background: var(--gruen); color: var(--auf-farbe);
  border: 0; border-radius: 999px;
  padding: 7px 14px; min-height: 38px;
  font: inherit; font-size: var(--schrift-xs); font-weight: 700;
  text-decoration: none; cursor: pointer;
}
.chat-aktion:hover { background: var(--gruen-dunkel); color: var(--auf-farbe); }

/* Tippanzeige (drei pulsierende Punkte) */
.tipp { display: inline-flex; gap: 4px; padding: 2px 0; }
.tipp span {
  width: 8px; height: 8px; border-radius: 50%; background: var(--tinte-soft);
  animation: tippen 1.2s infinite ease-in-out both;
}
.tipp span:nth-child(2) { animation-delay: 0.18s; }
.tipp span:nth-child(3) { animation-delay: 0.36s; }
@keyframes tippen { 0%, 80%, 100% { opacity: 0.3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .tipp span { animation: none; opacity: 0.6; } }

.chat-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 var(--raum-4) var(--raum-2); background: var(--papier); }
.chat-chip {
  border: 1.5px solid var(--linie); background: var(--weiss);
  border-radius: 999px; padding: 7px 12px; font: inherit; font-size: var(--schrift-xs);
  font-weight: 650; cursor: pointer; min-height: 36px;
}
.chat-chip:hover { border-color: var(--gruen-text); color: var(--gruen-text); }

.chat-form { display: flex; gap: var(--raum-2); padding: var(--raum-3); border-top: 1px solid var(--linie); background: var(--weiss); }
.chat-form input {
  flex: 1; min-height: 44px; padding: 10px 12px;
  font: inherit; border: 1.5px solid var(--linie); border-radius: var(--radius-s); background: var(--papier);
}
.chat-form input:focus { outline: none; border-color: var(--gruen-text); background: var(--weiss); }
.chat-form .btn { min-height: 44px; padding: 8px 16px; font-size: var(--schrift-s); }

/* Nur für Vorlese-Software sichtbar */
.sr-nur {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   27 LOKAL-ELEMENTE (Stadt-Chip, Partnerleiste, Städtewahl)
   ========================================================================== */
.stadt-chip {
  display: flex;
  width: max-content; align-items: center; gap: 7px;
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: 999px; padding: 7px 14px;
  font-size: var(--schrift-s); font-weight: 650;
  text-decoration: none; color: var(--tinte);
  box-shadow: var(--schatten);
  margin-bottom: var(--raum-4);
}
.stadt-chip svg { width: 16px; height: 16px; color: var(--gruen-text); }
.stadt-chip small { color: var(--tinte-soft); font-weight: 500; }
.stadt-chip:hover { border-color: var(--gruen-text); color: var(--tinte); }

/* Partnerleiste: Platzhalter, bis echte Partnerschaften bestehen */
.partner-leiste { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr)); gap: var(--raum-3); }
.partner-platz {
  border: 1.5px dashed var(--linie);
  border-radius: var(--radius);
  padding: var(--raum-4);
  text-align: center;
  color: var(--tinte-soft);
  font-size: var(--schrift-xs);
  display: grid; place-items: center; gap: 6px;
  min-height: 86px;
}
.partner-platz svg { width: 26px; height: 26px; opacity: 0.5; }

/* Eigenes Heidelberg-Badge (KEIN offizielles Uni-Logo – Markenrecht!) */
.hd-badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 10px 16px;
  font-size: var(--schrift-s); font-weight: 650; color: var(--tinte);
}
.hd-badge svg { width: 30px; height: 30px; flex-shrink: 0; }
.hd-badge small { display: block; font-weight: 500; color: var(--tinte-soft); font-size: var(--schrift-xs); }

/* Städtewahl-Karten */
.stadt-karte {
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--radius-l); padding: var(--raum-5);
  box-shadow: var(--schatten);
  display: grid; gap: var(--raum-3);
}
.stadt-karte h3 { display: flex; align-items: center; gap: var(--raum-2); margin: 0; }
.stadt-karte--bald { opacity: 0.85; border-style: dashed; box-shadow: none; }

/* ==========================================================================
   28 LOKAL-FEATURES: Stadtkarte, Abi-Countdown, Kanal-Banner
   ========================================================================== */
/* Stilisierte Stadtkarte (eigenes SVG – kein Google Maps, keine Cookies) */
.karte-box {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius-l);
  box-shadow: var(--schatten);
  padding: var(--raum-3);
  overflow: hidden;
}
.karte-box svg { width: 100%; height: auto; display: block; border-radius: var(--radius); }
.karte-punkt { cursor: default; }
.karte-punkt circle { transition: r var(--uebergang); }
.karte-punkt:hover circle.punkt-kern { r: 8; }
.karte-legende { font-size: var(--schrift-xs); color: var(--tinte-soft); margin: var(--raum-2) var(--raum-2) 0; }

/* Abi-Countdown */
.countdown {
  background: var(--flaeche-tinte);
  color: var(--auf-farbe);
  border-radius: var(--radius-l);
  padding: var(--raum-5);
  text-align: center;
  display: grid;
  gap: var(--raum-2);
}
.countdown .zahl {
  font-size: clamp(3rem, 8vw, 4.2rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--akzent-hell);
}
.countdown .label { font-size: var(--schrift-s); color: rgba(255,255,255,.80); text-wrap: balance; }
.countdown .hinweis { font-size: var(--schrift-xs); color: rgba(255,255,255,.62); }
.countdown .btn { justify-self: center; margin-top: var(--raum-2); }

/* Kanal-Banner: erscheint bei ?von=… (Flyer, Aushang, Instagram, Schule) */
.kanal-banner {
  background: var(--gelb);
  color: var(--tinte);
  font-size: var(--schrift-s);
  font-weight: 650;
}
.kanal-banner .container {
  display: flex;
  align-items: center;
  gap: var(--raum-3);
  padding-block: 10px;
  flex-wrap: wrap;
}
.kanal-banner a { color: var(--tinte); font-weight: 750; }
.kanal-banner button {
  margin-left: auto;
  background: transparent;
  border: 0;
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  color: var(--tinte);
  padding: 6px 10px;
  min-height: 40px;
}

/* ==========================================================================
   28b BENTO-GRID (lebende Lokal-Zahlen, „Alles auf einen Blick“)
   ========================================================================== */
.bento { display: grid; grid-template-columns: 1fr 1fr; gap: var(--raum-3); }
@media (min-width: 720px) { .bento { grid-template-columns: repeat(4, 1fr); } }

.bento-kachel {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius-l);
  padding: var(--raum-5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  box-shadow: var(--schatten);
}
.bento-zahl { font-size: clamp(1.9rem, 5vw, 2.8rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--gruen-text); }
.bento-label { font-size: var(--schrift-s); color: var(--tinte-soft); line-height: 1.35; }

.bento--gross { grid-column: span 2; grid-row: span 1; }
.bento--breit { grid-column: span 2; }
@media (min-width: 720px) { .bento--gross { grid-row: span 2; justify-content: flex-end; } }

.bento--gruen { background: var(--gruen); border-color: transparent; }
.bento--gruen .bento-zahl { color: var(--akzent-hell); font-size: clamp(2.4rem, 7vw, 3.6rem); }
.bento--gruen .bento-label { color: rgba(255,255,255,.84); }
.bento--gelb { background: var(--gelb); border-color: transparent; }
.bento--gelb .bento-zahl { color: var(--auf-akzent); }
.bento--gelb .bento-label { color: rgba(255,255,255,.9); }
.bento--rahmen { border: 2px dashed var(--gruen); box-shadow: none; background: var(--gruen-tint); }

.bento-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.bento-liste li { margin: 0; font-size: var(--schrift-s); color: var(--tinte); }
.bento-liste strong { color: var(--gruen-text); font-size: var(--schrift-m); }

/* Testimonial-Platzhalter (ehrlich: echte Stimmen kommen später) */
.stimme-platz {
  border: 1.5px dashed var(--linie);
  border-radius: var(--radius);
  padding: var(--raum-5);
  background: var(--weiss);
}
.stimme-platz .sterne { color: var(--akzent-rand); letter-spacing: 2px; font-size: 1.1rem; }
.stimme-platz p { color: var(--tinte-soft); font-style: italic; margin: var(--raum-2) 0; }
.stimme-platz .wer { font-size: var(--schrift-s); font-weight: 650; color: var(--tinte); font-style: normal; }

/* ==========================================================================
   28c PWA-Installieren-Chip (unten links), Scroll-Fortschritt, Nach-oben
   ========================================================================== */
.pwa-install {
  position: fixed;
  left: 14px; bottom: 14px;
  z-index: 65;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--gruen); color: var(--auf-farbe);
  border: 0; border-radius: 999px;
  padding: 10px 16px; min-height: 46px;
  font: inherit; font-weight: 700; font-size: var(--schrift-s);
  cursor: pointer; box-shadow: var(--schatten-l);
}
.pwa-install:hover { background: var(--gruen-dunkel); color: var(--auf-farbe); }
body.hat-aktionsleiste .pwa-install { bottom: 88px; }
@media (min-width: 860px) { body.hat-aktionsleiste .pwa-install { bottom: 14px; } }

/* Lesefortschritts-Balken ganz oben */
.fortschritt {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: var(--gelb); z-index: 60;
  transition: width 80ms linear;
}

/* „Nach oben“-Knopf */
.nach-oben {
  position: fixed; right: 14px; bottom: 74px;
  z-index: 55;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--weiss); color: var(--gruen-text);
  border: 1px solid var(--linie); box-shadow: var(--schatten);
  cursor: pointer; display: grid; place-items: center;
  opacity: 0; transform: translateY(8px); pointer-events: none;
  transition: opacity var(--uebergang), transform var(--uebergang);
}
.nach-oben.sichtbar { opacity: 1; transform: none; pointer-events: auto; }
.nach-oben svg { width: 22px; height: 22px; }
/* über dem schwebenden Chat-Knopf einordnen (der sitzt unten rechts) */
.nach-oben { bottom: 74px; }
body.hat-aktionsleiste .nach-oben { bottom: 152px; }
@media (min-width: 860px) { body.hat-aktionsleiste .nach-oben { bottom: 74px; } }

/* ==========================================================================
   28d SCROLL-GETRIEBENE REVEAL-ANIMATIONEN (nativ, progressiv)
   Inhalt ist IMMER sichtbar; wo der Browser es kann, blenden Abschnitte
   beim Hereinscrollen sanft ein. Kein JavaScript, kein Framework.
   ========================================================================== */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .abschnitt {
      animation: reveal-auf linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
  }
}
@keyframes reveal-auf {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================================
   29 VIEW TRANSITIONS – App-Gefühl beim Seitenwechsel (progressive)
   Browser ohne Unterstützung ignorieren das einfach.
   ========================================================================== */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-raus 200ms ease both; }
::view-transition-new(root) { animation: vt-rein 240ms ease both; }
@keyframes vt-raus { to { opacity: 0; transform: translateY(-6px); } }
@keyframes vt-rein { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ==========================================================================
   30 DASHBOARD-BAUSTEINE: Kalender, Meter, nächste Stunde, Countdown
   ========================================================================== */
/* Farbige Kennzahl-Kacheln */
.kachel--gruen { background: var(--gruen); border-color: transparent; }
.kachel--gruen .wert { color: var(--akzent-hell); }
.kachel--gruen .label { color: rgba(255,255,255,.84); }
.kachel--gelb { background: var(--gelb); border-color: transparent; }
.kachel--gelb .wert { color: var(--auf-akzent); }
.kachel--gelb .label { color: rgba(255,255,255,.9); }

/* Grenzen-Meter */
.meter {
  position: relative;
  height: 14px; border-radius: 999px;
  background: var(--gruen-tint);
  margin-top: var(--raum-5);
}
.meter-fuell {
  height: 100%; border-radius: 999px;
  background: var(--gruen); transition: width var(--uebergang);
}
.meter-fuell.meter--warn { background: var(--gelb); }
.meter-fuell.meter--voll { background: var(--fehler); }
.meter-marke { position: absolute; top: -6px; transform: translateX(-50%); }
.meter-marke::before { content: ""; display: block; width: 2px; height: 26px; background: var(--tinte-soft); margin: 0 auto; opacity: .5; }
.meter-marke span { position: absolute; top: -18px; left: 50%; transform: translateX(-50%); font-size: 11px; color: var(--tinte-soft); white-space: nowrap; }

/* Nächste-Stunde-Karte */
.naechste-karte { border: 2px solid var(--gruen); }
.naechste-raster { display: grid; gap: var(--raum-4); align-items: center; }
@media (min-width: 560px) { .naechste-raster { grid-template-columns: 1fr auto; } }
.countdown-box {
  text-align: center; background: var(--gruen-tint);
  border-radius: var(--radius); padding: var(--raum-4) var(--raum-5); min-width: 150px;
}
.cd-label { display: block; font-size: var(--schrift-xs); color: var(--tinte-soft); text-transform: uppercase; letter-spacing: .08em; }
.cd-zeit { display: block; font-size: var(--schrift-l); font-weight: 800; color: var(--gruen-text); }

.plan-details { margin-top: var(--raum-4); border-top: 1px dashed var(--linie); padding-top: var(--raum-3); }
.plan-details summary { cursor: pointer; font-weight: 700; color: var(--gruen-text); min-height: 40px; display: flex; align-items: center; }

/* ---- Kalender-Widget ---- */
.kalender { --kal-luecke: 4px; }
.kal-kopf { display: flex; align-items: center; gap: var(--raum-2); margin-bottom: var(--raum-3); }
.kal-titel { flex: 1; font-size: var(--schrift-m); }
.kal-nav, .kal-heute {
  appearance: none; border: 1px solid var(--linie); background: var(--weiss);
  border-radius: var(--radius-s); min-height: 40px; min-width: 40px; padding: 0 12px;
  font: inherit; font-weight: 700; color: var(--tinte); cursor: pointer;
}
.kal-heute { font-size: var(--schrift-xs); }
.kal-nav:hover, .kal-heute:hover { border-color: var(--gruen); color: var(--gruen-text); }

.kal-gitter { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--kal-luecke); }
.kal-wt { text-align: center; font-size: var(--schrift-xs); font-weight: 700; color: var(--tinte-soft); padding-bottom: 4px; }
.kal-zelle {
  appearance: none; border: 1px solid var(--linie); background: var(--weiss);
  border-radius: 10px; aspect-ratio: 1 / 1; min-height: 40px; padding: 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  cursor: pointer; font: inherit; position: relative;
}
.kal-zelle:hover { border-color: var(--gruen); }
.kal-znr { font-size: var(--schrift-s); font-weight: 650; }
.kal-fremd { opacity: .38; }
.kal-heute-zelle { border-color: var(--gruen); box-shadow: inset 0 0 0 1px var(--gruen); }
.kal-gewaehlt { background: var(--gruen-tint); border-color: var(--gruen); }
.kal-punkte { display: flex; gap: 2px; margin-top: auto; }
.kal-punkt { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.kal-punkt--geplant { background: var(--gruen); }
.kal-punkt--erledigt { background: var(--gelb); }
.kal-punkt--abgesagt { background: var(--tinte-soft); }

.kal-tag { margin-top: var(--raum-4); }
.kal-tag-kopf { font-size: var(--schrift-m); margin: 0 0 var(--raum-2); }
.kal-liste { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--raum-2); }
.kal-termin {
  display: grid; grid-template-columns: auto 1fr; gap: var(--raum-3);
  padding: var(--raum-3); border-radius: var(--radius-s);
  background: var(--papier); border-left: 4px solid var(--gruen); margin: 0;
}
.kal-termin--erledigt { border-left-color: var(--gelb); opacity: .85; }
.kal-termin--abgesagt { border-left-color: var(--tinte-soft); opacity: .6; text-decoration: line-through; }
.kal-termin-zeit { font-weight: 750; font-size: var(--schrift-s); white-space: nowrap; }
.kal-termin-inhalt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--schrift-s); }
.kal-termin-aktionen { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; margin-top: 4px; }
.kal-mini { min-height: 36px; padding: 5px 12px; font-size: var(--schrift-xs); }

/* ==========================================================================
   31 DEMO-/ADMIN-LEISTE (nur zum Ausprobieren – vor Livegang demo.js entfernen)
   ========================================================================== */
.demo-launch {
  position: fixed; top: 10px; right: 10px; z-index: 95;
  display: inline-flex; align-items: center; gap: 7px;
  background: #223626; color: #FAF6EC;   /* feste Farben: --tinte ist im Dark Mode hell */
  border: 1.5px dashed var(--gelb); border-radius: 999px;
  padding: 8px 14px; min-height: 40px;
  font: inherit; font-weight: 750; font-size: var(--schrift-xs);
  cursor: pointer; box-shadow: var(--schatten-l);
}
.demo-launch:hover { background: #2B4234; color: #FAF6EC; }
.demo-launch .punkt-live { width: 8px; height: 8px; border-radius: 50%; background: var(--gelb); }

.demo-panel {
  position: fixed; top: 58px; right: 10px; z-index: 95;
  width: min(360px, calc(100vw - 20px));
  max-height: calc(100vh - 74px); overflow-y: auto;
  background: var(--weiss); color: var(--tinte);
  border: 1.5px solid var(--linie); border-radius: var(--radius-l);
  box-shadow: var(--schatten-l);
  padding: var(--raum-4);
}
.demo-panel[hidden] { display: none; }
.demo-panel h3 { font-size: var(--schrift-m); margin: 0 0 var(--raum-2); }
.demo-panel h4 {
  font-size: var(--schrift-xs); text-transform: uppercase; letter-spacing: .08em;
  color: var(--tinte-soft); margin: var(--raum-4) 0 var(--raum-2);
}
.demo-status {
  font-size: var(--schrift-xs); background: var(--gruen-tint); color: var(--gruen-text);
  border-radius: var(--radius-s); padding: 8px 10px; margin-bottom: var(--raum-3); font-weight: 650;
}
.demo-panel .btn { width: 100%; margin-bottom: 8px; min-height: 44px; }
.demo-links { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.demo-links a {
  display: block; text-decoration: none; font-size: var(--schrift-xs); font-weight: 650;
  background: var(--papier); border: 1px solid var(--linie); border-radius: var(--radius-s);
  padding: 8px 10px; color: var(--tinte);
}
.demo-links a:hover { border-color: var(--gruen); color: var(--gruen-text); }
.demo-panel .demo-hinweis { font-size: 11px; color: var(--tinte-soft); margin: var(--raum-3) 0 0; }
.demo-schliessen {
  position: absolute; top: 8px; right: 10px; background: transparent; border: 0;
  font-size: 1.4rem; line-height: 1; cursor: pointer; color: var(--tinte-soft); padding: 6px 8px;
}

/* ==========================================================================
   32 BLAUER HAKEN (Verifizierung) & UNGELESEN-PUNKT
   ========================================================================== */
.haken-blau {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.05em; height: 1.05em; vertical-align: -0.12em; margin-left: .25em;
  flex: none;
}
.haken-blau svg { width: 100%; height: 100%; }
.haken-blau svg path:first-child { fill: var(--haken); }
.haken-blau .haken-strich { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.haken-blau--gross { width: 1.35em; height: 1.35em; }

.link-knopf {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: var(--gruen-text); text-decoration: underline; text-underline-offset: 2px;
}
.link-knopf:hover { color: var(--tinte); }

.ungelesen-punkt {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px; margin-left: 4px;
  border-radius: 999px; background: var(--gruen); color: var(--auf-farbe);
  font-size: var(--schrift-xs); font-weight: 750; line-height: 1;
}

/* ==========================================================================
   33 SUCHE – Kriterien-Formular + Ergebnis-Karten
   ========================================================================== */
.suche-kasten {
  background: var(--weiss); border: 1.5px solid var(--linie); border-radius: var(--radius-l);
  box-shadow: var(--schatten-m); padding: var(--raum-5);
}
.suche-zeile {
  display: grid; gap: var(--raum-3);
  /* min() statt festem Minimum: sonst erzwingt minmax(160px) auf schmalen
     Handys eine Gesamtbreite, die den Container sprengt – auf der Förderseite
     schob das die ganze Seite um 200 px seitlich weg. */
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  align-items: end;
  min-width: 0;
}
.suche-zeile .feld { margin: 0; }
.suche-knopf { min-height: 52px; white-space: nowrap; }
.suche-meta {
  display: flex; flex-wrap: wrap; gap: var(--raum-2); align-items: center;
  margin-top: var(--raum-3); font-size: var(--schrift-s); color: var(--tinte-soft);
}
.ergebnis-anzahl { font-weight: 750; color: var(--tinte); }
.ort-hinweis {
  margin-top: var(--raum-3); font-size: var(--schrift-s); color: var(--tinte-soft);
  background: var(--papier); border: 1px dashed var(--linie); border-radius: var(--radius-s);
  padding: 8px 12px;
}

.ergebnis-liste { display: grid; gap: var(--raum-4); margin-top: var(--raum-5); }
.ergebnis-karte {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--raum-4);
  align-items: start;
  background: var(--weiss); border: 1.5px solid var(--linie); border-radius: var(--radius-l);
  padding: var(--raum-4) var(--raum-5);
}
.ergebnis-karte:hover { border-color: var(--gruen); }
.ergebnis-kopf { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ergebnis-name { font-weight: 800; font-size: var(--schrift-m); }
.ergebnis-sub { color: var(--tinte-soft); font-size: var(--schrift-s); margin-top: 2px; }
.ergebnis-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--raum-2); }
.tag {
  font-size: var(--schrift-xs); font-weight: 650;
  background: var(--papier); border: 1px solid var(--linie);
  border-radius: 999px; padding: 4px 10px;
}
.tag--gruen { background: var(--gruen-tint); color: var(--gruen-text); border-color: transparent; }
.tag--gelb { background: var(--akzent-tint); color: var(--akzent-text); border-color: transparent; }
.tag--online { background: var(--flaeche-tinte); color: var(--auf-farbe); border-color: transparent; }
.ergebnis-aktion { display: flex; flex-direction: column; gap: 8px; align-items: stretch; min-width: 170px; }
.ergebnis-zitat { font-size: var(--schrift-s); color: var(--tinte-soft); font-style: italic; margin-top: var(--raum-2); }
.suche-leer {
  text-align: center; padding: var(--raum-6); border: 1.5px dashed var(--linie);
  border-radius: var(--radius-l); color: var(--tinte-soft); margin-top: var(--raum-5);
}
@media (max-width: 640px) {
  .ergebnis-karte { grid-template-columns: auto 1fr; }
  .ergebnis-aktion { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .ergebnis-aktion .btn { flex: 1 1 140px; }
}

/* ==========================================================================
   34 NACHRICHTEN-CENTER
   ========================================================================== */
.chat-layout {
  display: grid; grid-template-columns: minmax(220px, 300px) 1fr;
  gap: var(--raum-4); align-items: start;
}
.gespraech-liste {
  background: var(--weiss); border: 1.5px solid var(--linie); border-radius: var(--radius-l);
  overflow: hidden;
}
.gespraech-eintrag {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--raum-3); align-items: center;
  width: 100%; text-align: left; background: transparent; border: 0; cursor: pointer;
  font: inherit; color: inherit;
  padding: var(--raum-3) var(--raum-4); border-bottom: 1px solid var(--linie);
}
.gespraech-eintrag:last-child { border-bottom: 0; }
.gespraech-eintrag:hover { background: var(--papier); }
.gespraech-eintrag[aria-current="true"] { background: var(--gruen-tint); }
.gespraech-name { font-weight: 750; display: flex; align-items: center; gap: 4px; }
.gespraech-vorschau {
  font-size: var(--schrift-xs); color: var(--tinte-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%;
}
.thread {
  background: var(--weiss); border: 1.5px solid var(--linie); border-radius: var(--radius-l);
  display: flex; flex-direction: column; min-height: 460px;
}
.thread-kopf {
  display: flex; align-items: center; gap: var(--raum-3);
  padding: var(--raum-3) var(--raum-4); border-bottom: 1.5px solid var(--linie);
}
.thread-verlauf {
  flex: 1; overflow-y: auto; padding: var(--raum-4);
  display: flex; flex-direction: column; gap: var(--raum-2);
  max-height: 480px;
}
.blase {
  max-width: 78%; padding: 10px 14px; border-radius: var(--radius-m);
  font-size: var(--schrift-s); line-height: 1.5; width: fit-content;
}
.blase--ich { align-self: flex-end; background: var(--gruen); color: var(--auf-farbe); border-bottom-right-radius: 4px; }
.blase--partner { align-self: flex-start; background: var(--papier); border: 1px solid var(--linie); border-bottom-left-radius: 4px; }
.blase--auto { border-style: dashed; opacity: .92; }
.blase-zeit { display: block; font-size: 10.5px; opacity: .75; margin-top: 4px; }
.thread-form {
  display: flex; gap: var(--raum-2); padding: var(--raum-3) var(--raum-4);
  border-top: 1.5px solid var(--linie);
}
.thread-form textarea {
  flex: 1; resize: none; min-height: 48px; max-height: 140px;
  font: inherit; padding: 10px 12px;
  border: 1.5px solid var(--linie); border-radius: var(--radius-s);
  background: var(--weiss); color: var(--tinte);
}
.thread-form textarea:focus-visible { outline: 3px solid var(--gruen); outline-offset: 1px; }
.thread-leer { flex: 1; display: grid; place-items: center; color: var(--tinte-soft); padding: var(--raum-6); text-align: center; }
@media (max-width: 760px) {
  .chat-layout { grid-template-columns: 1fr; }
  .chat-layout--thread-offen .gespraech-liste { display: none; }
  .thread { min-height: 380px; }
}

/* ==========================================================================
   35 VERIFIZIERUNG (Schritte, Status, Admin-Liste)
   ========================================================================== */
.verif-status {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: var(--schrift-s);
  border-radius: 999px; padding: 6px 14px;
}
.verif-status--unverifiziert { background: var(--papier); border: 1.5px dashed var(--linie); color: var(--tinte-soft); }
.verif-status--eingereicht { background: var(--akzent-tint); color: var(--akzent-text); }
.verif-status--verifiziert { background: var(--gruen-tint); color: var(--gruen-text); }
.verif-status--abgelaufen, .verif-status--abgelehnt { background: var(--fehler-tint); color: var(--fehler); }
@media (prefers-color-scheme: dark) {
}
.verif-schritt { display: grid; grid-template-columns: auto 1fr; gap: var(--raum-4); align-items: start; }
/* Grid-Kinder haben min-width:auto und schrumpfen deshalb NICHT unter ihren
   Inhalt. Auf der Förderseite blies der Kostenangebot-Generator die Spalte auf
   452 px und schob damit die ganze Seite seitlich weg (Handy, 375 px). */
.verif-schritt > * { min-width: 0; }
@media (max-width: 520px) {
  /* Auf schmalen Geräten die Nummer über den Text setzen statt daneben */
  .verif-schritt { grid-template-columns: 1fr; gap: var(--raum-3); }
}
.verif-nummer {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-weight: 800;
  background: var(--gruen-tint); color: var(--gruen-text);
}
.verif-nummer--fertig { background: var(--gruen); color: var(--auf-farbe); }
.ki-ergebnis {
  margin-top: var(--raum-3); padding: var(--raum-3) var(--raum-4);
  border-radius: var(--radius-s); font-size: var(--schrift-s);
  background: var(--papier); border: 1px solid var(--linie);
}
.ki-ergebnis--ok { background: var(--gruen-tint); border-color: transparent; color: var(--gruen-text); }
.ki-ergebnis--warnung { background: var(--akzent-tint); border-color: transparent; color: var(--akzent-text); }
.admin-zeile {
  display: grid; grid-template-columns: 1fr auto; gap: var(--raum-3); align-items: center;
  padding: var(--raum-3) 0; border-bottom: 1px solid var(--linie);
}
.admin-zeile:last-child { border-bottom: 0; }
.admin-aktionen { display: flex; gap: 8px; flex-wrap: wrap; }

/* Umschalter Student:in / Schülertutor:in (Registrierung) */
.typ-schalter { display: grid; grid-template-columns: 1fr 1fr; gap: var(--raum-2); margin-bottom: var(--raum-4); }
.typ-schalter .pille span { justify-content: center; text-align: center; width: 100%; }

/* ==========================================================================
   36 v8: LIQUID-GLASS-SUCHE, GLAS-DROPDOWNS, STERNE, MODAL, MELDEN
   ========================================================================== */

/* Bühne hinter der Suche: sanfter Farbverlauf, damit das Glas sichtbar wird */
.suche-buehne {
  position: relative;
  background:
    radial-gradient(ellipse 60% 80% at 15% 10%, rgba(14, 90, 71, .18), transparent 60%),
    radial-gradient(ellipse 50% 70% at 85% 90%, rgba(255, 201, 77, .22), transparent 60%),
    linear-gradient(160deg, var(--gruen-tint), var(--papier));
  border-radius: var(--radius-l);
  padding: var(--raum-5);
}

/* Der Glas-Kasten selbst */
.suche-kasten--glas {
  background: var(--glas-bg);
  border: 1px solid var(--glas-rand);
  border-radius: 22px;
  box-shadow:
    0 18px 40px rgba(14, 44, 36, .16),
    inset 0 1px 0 rgba(255, 255, 255, .55);
  padding: var(--raum-5);
}
@supports (backdrop-filter: blur(1px)) {
  .suche-kasten--glas { backdrop-filter: blur(var(--glas-blur)) saturate(1.5); }
}

/* GlasSelect: Knopf + schwebendes Panel */
.glas-select { position: relative; }
.glas-nativ {
  position: absolute !important; width: 1px; height: 1px;
  opacity: 0; pointer-events: none; overflow: hidden;
}
.glas-knopf {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 52px; padding: 10px 16px;
  font: inherit; font-weight: 650; color: var(--tinte);
  background: var(--glas-bg);
  border: 1px solid var(--glas-rand); border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
  cursor: pointer; text-align: left;
  transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
@supports (backdrop-filter: blur(1px)) {
  .glas-knopf { backdrop-filter: blur(10px) saturate(1.4); }
}
.glas-knopf:hover { border-color: var(--gruen); }
.glas-knopf:active { transform: scale(.985); }
.glas-knopf:focus-visible { outline: 3px solid var(--gruen); outline-offset: 2px; }
.glas-wert { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.glas-pfeil { flex: none; color: var(--gruen-text); transition: transform .18s ease; }
.glas-knopf[aria-expanded="true"] .glas-pfeil { transform: rotate(180deg); }

.glas-panel {
  position: absolute; z-index: 60; top: calc(100% + 8px); left: 0; right: 0;
  max-height: 300px; overflow-y: auto;
  background: var(--glas-bg);
  border: 1px solid var(--glas-rand); border-radius: 18px;
  box-shadow: 0 22px 44px rgba(14, 44, 36, .22), inset 0 1px 0 rgba(255, 255, 255, .5);
  padding: 6px;
  animation: glasAuf .16s ease;
}
@supports (backdrop-filter: blur(1px)) {
  .glas-panel { backdrop-filter: blur(var(--glas-blur)) saturate(1.6); }
}
@keyframes glasAuf { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.glas-option {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 11px 14px; border: 0; border-radius: 12px;
  font: inherit; font-weight: 600; color: var(--tinte);
  background: transparent; cursor: pointer; text-align: left;
}
.glas-option:hover, .glas-option:focus-visible { background: var(--gruen-tint); color: var(--gruen-text); outline: none; }
.glas-option[aria-selected="true"] { color: var(--gruen-text); font-weight: 800; }
.glas-option svg { flex: none; }

/* Tipp-Filter in langen Glas-Listen (z. B. Schulwahl mit 90 Einträgen) */
.glas-filter {
  width: 100%; margin-bottom: 6px; padding: 10px 14px;
  border: 1.5px solid var(--linie); border-radius: 12px;
  font: inherit; font-size: var(--schrift-s);
  background: var(--weiss); color: var(--tinte);
  position: sticky; top: 0;
}
.glas-filter:focus-visible { outline: 3px solid var(--gruen); outline-offset: 1px; }
.glas-leer { margin: 6px 8px; font-size: var(--schrift-s); color: var(--tinte-soft); }

/* Nur-Verifizierte-Schalter in der Suche */
/* Filterzeile unter den Suchfeldern */
.such-filter { display: flex; flex-wrap: wrap; gap: var(--raum-3); align-items: center; margin-top: var(--raum-3); }
.such-filter .feld { margin: 0; min-width: 220px; }

/* „label.glas-schalter“ statt „.glas-schalter“: sonst gewinnt die spätere
   Regel „.feld label { display:block }“ und der Schieber klappt zusammen. */
label.glas-schalter, .glas-schalter {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 10px 16px; cursor: pointer;
  background: var(--glas-bg); border: 1px solid var(--glas-rand); border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5);
  font-weight: 650; user-select: none;
}
@supports (backdrop-filter: blur(1px)) { .glas-schalter { backdrop-filter: blur(10px) saturate(1.4); } }
.glas-schalter input { position: absolute; opacity: 0; pointer-events: none; }
.glas-schalter .schalter-text { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.glas-schalter small { font-weight: 500; color: var(--tinte-soft); font-size: var(--schrift-xs); }
.glas-schalter:has(input:checked) { border-color: var(--haken); box-shadow: 0 0 0 2px rgba(29,127,224,.18); }
.glas-schalter .schalter-optik {
  display: block; width: 40px; height: 24px; border-radius: 999px; flex: none;
  background: var(--linie); position: relative; transition: background .15s ease;
}
.glas-schalter .schalter-optik::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .15s ease;
}
.glas-schalter input:checked + .schalter-optik { background: var(--haken); }
.glas-schalter input:checked + .schalter-optik::after { transform: translateX(16px); }
.glas-schalter input:focus-visible + .schalter-optik { outline: 3px solid var(--gruen); outline-offset: 2px; }

/* Zweitfach ein-/ausblenden */
.zweitfach-knopf {
  background: none; border: 0; padding: 6px 2px; font: inherit; font-size: var(--schrift-s);
  font-weight: 700; color: var(--gruen-text); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}

/* Verifizierungs-Hinweisleiste über den Ergebnissen */
.verif-banner {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: var(--raum-4); padding: 10px 16px;
  background: rgba(29, 127, 224, .09);
  border: 1px solid rgba(29, 127, 224, .25); border-radius: 14px;
  font-size: var(--schrift-s);
}
.verif-banner strong { color: var(--haken-text); }
@media (prefers-color-scheme: dark) {
  .verif-banner { background: rgba(29, 127, 224, .16); }
}

/* Badge auf unverifizierten Karten */
.badge--unverifiziert {
  background: var(--papier); border: 1.5px dashed var(--linie);
  color: var(--tinte-soft); font-size: var(--schrift-xs); font-weight: 650;
  border-radius: 999px; padding: 4px 10px;
}
.ergebnis-karte--verifiziert { border-color: rgba(29, 127, 224, .45); }

/* Sterne-Anzeige */
.sterne { display: inline-flex; align-items: center; gap: 6px; font-size: var(--schrift-s); }
.sterne-zeichen { color: var(--gelb); letter-spacing: 1px; font-size: 1.05em; }
.sterne-text { font-weight: 750; }
.sterne--leer { color: var(--tinte-soft); font-size: var(--schrift-xs); font-style: italic; }
.sterne--klein .sterne-zeichen { font-size: .95em; }

/* Sterne-Eingabe */
.sterne-eingabe { display: inline-flex; gap: 2px; }
.stern-knopf {
  background: none; border: 0; cursor: pointer; padding: 2px 3px;
  font-size: 1.7rem; line-height: 1; color: var(--linie);
  transition: transform .1s ease, color .1s ease;
}
.stern-knopf:hover { transform: scale(1.15); }
.stern-knopf--voll { color: var(--gelb); }
.stern-knopf:focus-visible { outline: 3px solid var(--gruen); outline-offset: 2px; border-radius: 6px; }

/* Modal */
.modal-schleier {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center; padding: var(--raum-4);
  background: rgba(14, 30, 25, .45);
}
@supports (backdrop-filter: blur(1px)) { .modal-schleier { backdrop-filter: blur(4px); } }
.modal-karte {
  width: min(460px, 100%);
  background: var(--weiss); color: var(--tinte);
  border: 1px solid var(--glas-rand); border-radius: 20px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, .3);
  padding: var(--raum-5);
  animation: glasAuf .18s ease;
}
.modal-karte h3 { margin: 0 0 var(--raum-2); font-size: var(--schrift-m); }
.modal-inhalt { font-size: var(--schrift-s); }
.modal-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; margin-top: var(--raum-4); }
.modal-knoepfe .btn { flex: 1 1 auto; min-height: 46px; }
.modal-symbol {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; margin-bottom: var(--raum-3);
  background: var(--akzent-tint); color: var(--akzent-text); font-size: 1.4rem;
}
.modal-symbol--blau { background: var(--marke-tint); color: var(--haken-text); }

/* Melden-Link */
.melden-link {
  background: none; border: 0; padding: 4px 0; cursor: pointer;
  font: inherit; font-size: var(--schrift-xs); color: var(--tinte-soft);
  text-decoration: underline; text-underline-offset: 2px;
}
.melden-link:hover { color: var(--fehler); }

/* Avatar mit Foto */
img.avatar--foto { object-fit: cover; border: 2px solid var(--weiss); box-shadow: var(--schatten-s); }

/* Profilbild-Vorschau im Tutor-Bereich */
.bild-zeile { display: flex; align-items: center; gap: var(--raum-3); }
.bild-zeile .avatar, .bild-zeile img.avatar--foto { width: 64px; height: 64px; font-size: 1.5rem; }

/* Bewertungsliste im Tutor-Bereich */
.bewertung-eintrag { border-top: 1px solid var(--linie); padding: var(--raum-3) 0; }
.bewertung-eintrag:first-child { border-top: 0; padding-top: 0; }

/* ==========================================================================
   24 BEWEGUNG REDUZIEREN & DRUCK
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

@media print {
  .site-header, .site-footer, .aktionsleiste, .nav-toggle, .btn { display: none !important; }
  body { background: #fff; color: #000; }
  .abschnitt { padding-block: 1rem; }
}


/* ==========================================================================
   37 KLEINKRAM v11 (Fehler-Link, Suchfilter)
   --------------------------------------------------------------------------
   Hinweis: Hier standen früher die Farbvarianten A, C und D (Blau/Weiß/Rot).
   Seit dem 20.08.2026 gilt das Farbschema v2 (Waldgrün/Senfgelb/Terracotta/
   Creme) – die Werte stehen oben in :root, die Alternativen sind raus.
   ========================================================================== */

/* Fehler-melden-Link in der Fußzeile */
.fehler-link {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px;
  display: inline-flex; align-items: center; gap: 6px;
}
.fehler-link:hover { color: var(--akzent-hell); }

/* Suchleiste v11: Filterzeile trägt Zweitfach-Knopf, Verifiziert-Schalter und Schulfeld */
.such-filter .zweitfach-knopf { align-self: center; white-space: nowrap; }
.such-filter .feld--schule { flex: 1 1 320px; }
.such-filter .feld--schule label { margin-bottom: 6px; display: block; font-weight: 650; font-size: var(--schrift-s); }
@media (max-width: 640px) { .such-filter { gap: var(--raum-2); } .such-filter .feld--schule { flex-basis: 100%; } }

/* ==========================================================================
   38 START-FENSTER (v11) – Stadt wählen, dann anmelden
   ========================================================================== */
.start-schleier {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: var(--raum-4);
  background: rgba(10, 20, 35, .55); backdrop-filter: blur(6px);
  animation: start-auf .2s ease;
}
@keyframes start-auf { from { opacity: 0; } to { opacity: 1; } }
.start-karte {
  background: var(--weiss); color: var(--tinte);
  border-radius: var(--radius-l); box-shadow: var(--schatten-l);
  padding: var(--raum-6); width: min(560px, 100%); max-height: 92vh; overflow: auto;
}
.start-karte h2 { margin: 0 0 var(--raum-2); font-size: var(--schrift-xl); }
.start-karte > section > .klein { color: var(--tinte-soft); margin-bottom: var(--raum-4); }
.start-schritte { display: flex; gap: var(--raum-2); margin-bottom: var(--raum-4); font-size: var(--schrift-xs); }
.start-schritt {
  padding: 4px 12px; border-radius: 999px; background: var(--papier);
  border: 1px solid var(--linie); color: var(--tinte-soft); font-weight: 650;
}
.start-schritt--aktiv { background: var(--marke); border-color: transparent; color: var(--auf-farbe); }
.start-staedte { display: grid; grid-template-columns: 1fr 1fr; gap: var(--raum-3); }
.start-stadt {
  appearance: none; text-align: left; cursor: pointer; font: inherit;
  background: var(--papier); border: 1.5px solid var(--linie); border-radius: var(--radius);
  padding: var(--raum-4); display: grid; gap: 2px; transition: var(--uebergang);
}
.start-stadt:hover { border-color: var(--marke); transform: translateY(-1px); }
.start-stadt--hier { border-color: var(--marke); background: var(--marke-tint); }
.start-stadt-name { font-weight: 750; font-size: var(--schrift-m); }
.start-stadt-klein { font-size: var(--schrift-xs); color: var(--tinte-soft); }
.start-keine {
  appearance: none; cursor: pointer; font: inherit; text-align: left; width: 100%;
  margin-top: var(--raum-3); padding: var(--raum-4);
  background: transparent; border: 1.5px dashed var(--linie); border-radius: var(--radius);
  display: grid; gap: 2px; color: var(--tinte);
}
.start-keine:hover { border-color: var(--akzent); background: var(--akzent-tint); }
.start-keine .klein { color: var(--tinte-soft); }
.start-knoepfe { display: grid; gap: var(--raum-3); margin-bottom: var(--raum-3); }
.start-spaeter { display: block; margin: 0 auto; }
.start-fuss { color: var(--tinte-soft); text-align: center; margin: var(--raum-3) 0 0; }
@media (max-width: 480px) { .start-staedte { grid-template-columns: 1fr; } .start-karte { padding: var(--raum-5); } }

/* Stadt-Knopf oben links (v12): sitzt neben dem Logo in der klebenden
   Kopfzeile der Startseite – damit die Stadtwahl nie wieder verschwindet. */
.nav-marke { display: flex; align-items: center; gap: var(--raum-3); min-width: 0; }
.stadt-knopf {
  appearance: none; cursor: pointer; font: inherit;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; min-height: 38px;
  background: var(--weiss); color: var(--tinte);
  border: 1px solid var(--linie); border-radius: 999px;
  font-size: var(--schrift-xs); font-weight: 700;
  box-shadow: var(--schatten);
  transition: border-color var(--uebergang), transform var(--uebergang);
}
.stadt-knopf:hover { border-color: var(--gruen); transform: translateY(-1px); }
.stadt-knopf > svg:first-child { width: 15px; height: 15px; color: var(--terra); flex: none; }
.stadt-knopf-pfeil { color: var(--tinte-soft); flex: none; }
.stadt-knopf-name { max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 540px) {
  /* Mobil: Wortmarke nicht mitten im Namen umbrechen, Knopf kompakt daneben */
  .nav-marke { gap: var(--raum-2); flex-wrap: wrap; }
  .nav-marke .logo { font-size: var(--schrift-m); white-space: nowrap; }
  .stadt-knopf { min-height: 34px; padding: 5px 10px; }
  .stadt-knopf-name { max-width: 9ch; }
}

/* Schließen-Knopf im Stadt-Fenster */
.start-karte { position: relative; }
.start-zu {
  position: absolute; top: 10px; right: 12px;
  appearance: none; border: 0; background: none; cursor: pointer;
  font-size: 1.6rem; line-height: 1; color: var(--tinte-soft);
  padding: 6px 10px; border-radius: 999px;
}
.start-zu:hover { background: var(--papier); color: var(--tinte); }

/* Kurzes Aufblitzen, wenn der Kalender das Datumsfeld setzt */
.feld-blitzt { animation: feld-blitz 1.1s ease; }
@keyframes feld-blitz {
  0%, 100% { box-shadow: none; }
  20%, 60% { box-shadow: 0 0 0 3px var(--marke-tint), 0 0 0 5px var(--marke); }
}
.modal-symbol--warn { background: var(--akzent-tint); color: var(--akzent-text); }
.kal-termin--angefragt { border-left-color: var(--marke); }
.kal-termin--abgelehnt { border-left-color: var(--tinte-soft); opacity: .8; }

/* Admin v11: Statistikzeilen, Auffälligkeiten, Sperr-Optik */
.admin-zeile--breit { align-items: flex-start; }
.admin-zeile--gesperrt { background: var(--fehler-tint); border-radius: var(--radius-s); }
.stat-zeile { display: flex; flex-wrap: wrap; gap: var(--raum-2) var(--raum-4); margin-top: var(--raum-3); }
.stat-zahl { font-size: var(--schrift-xs); color: var(--tinte-soft); }
.stat-zahl strong { color: var(--tinte); font-size: var(--schrift-s); }
.auffaellig {
  margin: var(--raum-3) 0 0; padding: var(--raum-3) var(--raum-4) var(--raum-3) 2em;
  background: var(--akzent-tint); border-radius: var(--radius-s); font-size: var(--schrift-xs);
  color: var(--akzent-text);
}
.tag--rot { background: var(--fehler-tint); color: var(--fehler); border-color: transparent; }
.tag--gruen { background: var(--marke-tint); color: var(--marke-text); border-color: transparent; }
.kachel-wert { font-weight: 800; font-size: var(--schrift-l); color: var(--marke-text); }

/* ==========================================================================
   39 FREIBERUFLER-TUTORIAL (v11)
   ========================================================================== */
.zitat-kasten {
  background: var(--marke-tint); border-left: 4px solid var(--marke);
  border-radius: var(--radius-s); padding: var(--raum-3) var(--raum-4);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--schrift-s);
  margin: var(--raum-3) 0;
}
.ampel-liste { list-style: none; margin: var(--raum-4) 0 0; padding: 0; display: grid; gap: var(--raum-3); }
.ampel-liste li {
  display: flex; gap: var(--raum-3); align-items: flex-start;
  padding: var(--raum-3) var(--raum-4); border-radius: var(--radius); border: 1px solid var(--linie);
  min-width: 0;   /* sonst schiebt langer Text die Zeile über den Rand */
}
.ampel-liste li > div { min-width: 0; }
.ampel-zeichen {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 800; flex: none; color: #fff;
}
.ampel--gruen { background: var(--marke-tint); border-color: transparent; }
.ampel--gruen .ampel-zeichen { background: var(--marke); }
.ampel--gelb { background: var(--akzent-tint); border-color: transparent; }
.ampel--gelb .ampel-zeichen { background: var(--akzent); }
.ampel--rot { background: var(--fehler-tint); border-color: transparent; }
.ampel--rot .ampel-zeichen { background: var(--fehler); }
.check-liste { color: #fff; }
.check-liste li { margin-bottom: var(--raum-2); }
.quellen-liste { color: var(--tinte-soft); }
.quellen-liste li { margin-bottom: 4px; }
input[type="range"] { accent-color: var(--marke); }

/* Geld-Kacheln: dunkel statt rot – Rot signalisiert im Web „Fehler“ */
.kachel--tinte { background: var(--flaeche-tinte); border-color: transparent; color: var(--auf-farbe); }
.kachel--tinte .wert { color: #fff; }
.kachel--tinte .label { color: rgba(255,255,255,.84); }

/* ==========================================================================
   40 RECHNUNGSKOPIE / BELEG (v12)
   Bildschirm: Overlay mit Blatt. Druck: NUR das Blatt (→ „als PDF sichern“).
   ========================================================================== */
.beleg-schleier {
  position: fixed; inset: 0; z-index: 220;
  background: rgba(20, 24, 15, .55); backdrop-filter: blur(4px);
  display: grid; place-items: center; padding: var(--raum-4);
}
.beleg-rahmen {
  width: min(860px, 100%); max-height: 94vh; display: flex; flex-direction: column;
  background: var(--papier); border-radius: var(--radius-l); box-shadow: var(--schatten-l);
  overflow: hidden;
}
.beleg-leiste {
  display: flex; justify-content: space-between; align-items: center; gap: var(--raum-3);
  padding: var(--raum-3) var(--raum-4); border-bottom: 1px solid var(--linie);
  flex-wrap: wrap; color: var(--tinte);
}
.beleg-knoepfe { display: flex; gap: var(--raum-2); flex-wrap: wrap; }
.beleg-inhalt { overflow: auto; padding: var(--raum-4); }

.re-blatt {
  background: #ffffff; color: #2a2a24;
  border: 1px solid var(--linie); border-radius: var(--radius-s);
  padding: clamp(18px, 4vw, 42px);
  font-size: 0.95rem; line-height: 1.55;
  max-width: 760px; margin-inline: auto;
}
.re-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; border-bottom: 3px solid #2B4234; padding-bottom: 14px; }
.re-titel { font-family: var(--schrift-serif); font-size: 1.5rem; font-weight: 700; color: #223626; margin: 0 0 2px; }
.re-marke { display: flex; align-items: center; gap: 8px; font-weight: 800; color: #2B4234; }
.re-klein { font-size: 0.8rem; color: #6B5C44; margin: 0 0 4px; }
.re-abschnitt { margin-bottom: 20px; }
.re-parteien { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 12px; margin-bottom: 14px; }
.re-parteien p { margin: 0; }
.re-tabelle { width: 100%; border-collapse: collapse; margin: 8px 0; }
.re-tabelle th, .re-tabelle td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #DED3B8; vertical-align: top; }
.re-tabelle thead th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: .06em; color: #6B5C44; border-bottom: 2px solid #2B4234; }
.re-tabelle tfoot td { border-top: 2px solid #2B4234; border-bottom: 0; font-size: 1rem; }
.re-zahl { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.re-gebuehr .re-tabelle td { border-bottom: 0; }
.re-gesamt td { border-top: 2px solid #2B4234 !important; padding-top: 10px; }
.re-fuss { border-top: 1px solid #DED3B8; margin-top: 8px; padding-top: 10px; }

/* Beim Druck: nur das Blatt, sauber auf A4 */
@media print {
  body.beleg-offen > *:not(.beleg-schleier) { display: none !important; }
  body.beleg-offen .beleg-schleier { position: static; background: none; padding: 0; display: block; }
  body.beleg-offen .beleg-rahmen { box-shadow: none; border-radius: 0; max-height: none; background: #fff; }
  body.beleg-offen .beleg-leiste { display: none; }
  body.beleg-offen .beleg-inhalt { padding: 0; overflow: visible; }
  body.beleg-offen .re-blatt { border: 0; border-radius: 0; max-width: none; }
  body.beleg-offen .fortschritt, body.beleg-offen .nach-oben, body.beleg-offen .chat-start { display: none !important; }
}

/* Knopf in einer Nachrichten-Blase (z. B. „Beleg öffnen“ bei Rechnungskopien) */
.blase-knopf { display: block; margin: 8px 0 4px; min-height: 38px; padding: 8px 14px; font-size: var(--schrift-xs); }

/* Startphase: ehrliche Kacheln statt erfundener Zahlen */
.bento--start .bento-zahl { font-family: var(--schrift-serif); }
.zahl--wort { font-family: var(--schrift-serif); }

/* ==========================================================================
   41 TERMIN-KARTE (v13) – Terminanfragen mit Knöpfen statt Chat-Text
   ========================================================================== */
.t-karte {
  border: 1.5px solid var(--linie); border-radius: var(--radius-l);
  background: var(--weiss); overflow: hidden; margin: var(--raum-3) 0;
  max-width: 560px;
}
.t-streifen {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 18px; font-size: var(--schrift-xs); font-weight: 750;
}
.t-streifen svg { width: 15px; height: 15px; flex: none; }
.t-streifen--warte { background: var(--akzent-tint); color: var(--akzent-text); }
.t-streifen--fest  { background: var(--marke-tint);  color: var(--marke-text); }
.t-streifen--aus   { background: var(--terra-tint);  color: var(--terra-text); }

.t-kopf { display: flex; gap: var(--raum-3); padding: var(--raum-4); align-items: flex-start; }
.t-text { min-width: 0; }
.t-frage { font-weight: 750; color: var(--tinte); margin: 0 0 3px; font-size: var(--schrift-m); }
.t-unter { margin: 0; font-size: var(--schrift-s); color: var(--tinte-soft); }

/* Mini-Kalenderblatt */
.kal-blatt {
  flex: none; width: 56px; border-radius: 11px; overflow: hidden;
  border: 1.5px solid var(--linie); text-align: center; background: var(--papier);
  display: grid;
}
.kal-mon { background: var(--terra); color: #fff; font-size: .66rem; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; padding: 3px 0; }
.kal-tag { font-size: 1.5rem; font-weight: 800; color: var(--tinte); line-height: 1.15;
  padding-top: 2px; font-family: var(--schrift-serif); }
.kal-wt  { font-size: .68rem; color: var(--tinte-soft); padding-bottom: 5px; }

.t-fakten { list-style: none; margin: 0; padding: 0 var(--raum-4) var(--raum-2); display: grid; gap: 7px; }
.t-fakten li { display: flex; gap: 9px; align-items: flex-start; font-size: var(--schrift-s); margin: 0; }
.t-fakten svg { width: 17px; height: 17px; flex: none; color: var(--marke); margin-top: 2px; }
.t-ort-ikon { display: inline-grid; place-items: center; flex: none; color: var(--marke); }
.t-ort-ikon svg { width: 17px; height: 17px; }

/* Ortswahl */
.t-orte { display: grid; gap: 9px; padding: var(--raum-2) var(--raum-4) 0; }
.t-ort {
  display: flex; gap: 11px; align-items: center; width: 100%; text-align: left;
  border: 1.5px solid var(--linie); border-radius: 12px; padding: 12px 13px;
  cursor: pointer; background: var(--papier); font: inherit; min-height: 56px;
}
.t-ort:hover { border-color: var(--marke); }
.t-ort--gewaehlt { border-color: var(--marke); background: var(--marke-tint); box-shadow: inset 0 0 0 1px var(--marke); }
.t-ort .t-ort-ikon { width: 34px; height: 34px; border-radius: 9px; background: var(--sand); }
.t-ort--gewaehlt .t-ort-ikon { background: var(--weiss); }
.t-ort-name { font-weight: 750; color: var(--tinte); display: block; font-size: var(--schrift-s); }
.t-ort-klein { font-size: var(--schrift-xs); color: var(--tinte-soft); }
.t-ort-tag { margin-left: auto; font-size: .7rem; font-weight: 750; background: var(--marke);
  color: var(--auf-farbe); padding: 3px 8px; border-radius: 99px; flex: none; }
.t-hinweis { margin: var(--raum-2) var(--raum-4) 0; font-size: var(--schrift-xs); color: var(--tinte-soft); }

.t-knoepfe {
  display: flex; flex-wrap: wrap; gap: 9px; align-items: center;
  padding: var(--raum-3) var(--raum-4) var(--raum-4);
  border-top: 1px solid var(--sand); margin-top: var(--raum-3);
}
.t-knoepfe .btn { min-height: 44px; font-size: var(--schrift-s); }
.t-knoepfe .btn svg { width: 16px; height: 16px; }
.t-still { color: var(--tinte-soft); font-size: var(--schrift-s); min-height: 44px; padding-inline: 6px; }

/* Dialog-Felder nebeneinander (Gegenvorschlag) */
.raster-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)); gap: var(--raum-3); }
.raster-felder .feld { margin-bottom: 0; }

@media (max-width: 480px) {
  .t-knoepfe .btn { flex: 1 1 100%; justify-content: center; }
}

/* Feld über die volle Breite einer inline-form */
.inline-form .feld--breit { grid-column: 1 / -1; }

/* ==========================================================================
   42 ZAHLUNGSBLÖCKE (v13) – getrennt nach Empfänger
   ========================================================================== */
.zahl-block {
  border: 1.5px solid var(--linie); border-radius: var(--radius);
  padding: var(--raum-3) var(--raum-4); margin-bottom: var(--raum-3);
  background: var(--papier);
}
.zahl-block:last-of-type { margin-bottom: 0; }
.zahl-block-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: var(--raum-2); flex-wrap: wrap; }
.zahl-block-titel { font-weight: 750; color: var(--tinte); font-size: var(--schrift-s); }
.zahl-block-summe { font-weight: 800; color: var(--marke-text); font-size: var(--schrift-l); font-family: var(--schrift-serif); }

.iban-zeile {
  display: flex; align-items: center; justify-content: space-between; gap: var(--raum-2);
  flex-wrap: wrap; padding: 8px 0; border-top: 1px dashed var(--linie); margin-top: 8px;
}
.iban-label { display: block; font-size: var(--schrift-xs); color: var(--tinte-soft); font-weight: 650; }
.iban {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--schrift-s); color: var(--tinte); word-break: break-all;
}
.iban-knopf { min-height: 40px; padding: 8px 14px; font-size: var(--schrift-xs); flex: none; }
.iban-knopf--ok { background: var(--marke); color: var(--auf-farbe); border-color: transparent; }

/* Zahlweise-Marker an einer Stunde */
.zw-pille {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--schrift-xs); font-weight: 700; padding: 3px 9px; border-radius: 99px;
  background: var(--sand); color: var(--tinte);
}
.zw-pille--bar { background: var(--marke-tint); color: var(--marke-text); }

/* Profil-Liste im Tutor-Bereich: jede Angabe mit eigenem Ändern-Knopf (v13) */
.profil-liste { list-style: none; margin: 0 0 var(--raum-3); padding: 0; display: grid; gap: 2px; }
.profil-zeile {
  display: flex; align-items: center; gap: var(--raum-2); margin: 0;
  padding: 9px 0; border-bottom: 1px solid var(--sand);
}
.profil-zeile:last-child { border-bottom: 0; }
.profil-inhalt { min-width: 0; flex: 1; }
.profil-titel { display: block; font-size: var(--schrift-xs); color: var(--tinte-soft); font-weight: 650; }
.profil-wert { display: block; font-size: var(--schrift-s); color: var(--tinte); font-weight: 650; overflow-wrap: anywhere; }
.profil-wert--leer { color: var(--terra-text); font-weight: 500; font-style: italic; }
.profil-stift {
  appearance: none; border: 1.5px solid var(--linie); background: var(--weiss);
  border-radius: 999px; cursor: pointer; font: inherit; font-size: var(--schrift-xs); font-weight: 700;
  color: var(--tinte); display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 12px; min-height: 40px; flex: none;
}
.profil-stift:hover { border-color: var(--marke); background: var(--marke-tint); }
.profil-stift svg { width: 14px; height: 14px; }
@media (max-width: 380px) { .profil-stift span { display: none; } .profil-stift { padding: 8px 10px; } }

/* --------------------------------------------------------------------------
   43 STABILE LAYOUTS BEI MEHRFACHAUSWAHL (v13)
   Problem: Wer viele Fächer/Stufen anklickt, ließ die Pillen-Blöcke wachsen –
   alles darunter rutschte weg, und man verlor beim Klicken die Stelle.
   Lösung: Der Block reserviert seinen Platz, die Pille ändert beim Auswählen
   ihre Größe nicht (nur Farbe), und der Umbruch bleibt vorhersehbar.
   -------------------------------------------------------------------------- */
.pillen {
  display: flex; flex-wrap: wrap; gap: var(--raum-2);
  /* Platz für mindestens zwei Reihen: der Block wächst nicht sprunghaft */
  align-content: flex-start;
}
/* Nur Farben animieren – „all" ließ auch Größen/Ränder mitlaufen und flimmern */
.pille span {
  transition: background-color var(--uebergang), border-color var(--uebergang), color var(--uebergang);
  /* Rahmen liegt innen: ausgewählte Pillen sind exakt so breit wie nicht ausgewählte */
  box-sizing: border-box;
}
.pille input:checked + span {
  background: var(--gruen); border-color: var(--gruen-text); color: var(--auf-farbe);
  /* kein zusätzliches Gewicht – sonst wird die Pille breiter und die Reihe bricht um */
  font-weight: 650;
}
/* Fieldsets in den Bearbeiten-Bereichen behalten ihre Höhe */
#unterricht-details fieldset.feld { min-height: 0; }
#unterricht-details .pillen { min-height: 96px; }
@media (max-width: 520px) { #unterricht-details .pillen { min-height: 140px; } }

/* ==========================================================================
   44 SPRUNGNAVIGATION (v13) – Abschnitte ohne Scrollen erreichen
   ========================================================================== */
.sprungnav {
  position: sticky; top: 64px; z-index: 40;
  background: var(--glas-bg);
  -webkit-backdrop-filter: blur(var(--glas-blur)) saturate(1.4);
  backdrop-filter: blur(var(--glas-blur)) saturate(1.4);
  border-bottom: 1px solid var(--linie);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sprungnav { background: var(--papier); }
}
.sprungnav-liste {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none;
  scroll-snap-type: x proximity;
}
.sprungnav-liste::-webkit-scrollbar { display: none; }
.sprungnav-liste li { margin: 0; flex: none; scroll-snap-align: start; }
.sprungnav-liste a {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 8px 14px; white-space: nowrap;
  font-size: var(--schrift-xs); font-weight: 700; color: var(--tinte-soft);
  text-decoration: none; border-bottom: 2.5px solid transparent;
}
.sprungnav-liste a:hover { color: var(--tinte); }
.sprungnav-liste a.ist-hier { color: var(--marke-text); border-bottom-color: var(--marke); }
/* Sprungziele nicht unter beiden Leisten verstecken */
.sprungnav ~ main [id] { scroll-margin-top: 128px; }
@media (max-width: 859px) { .sprungnav { top: 56px; } }
@media print { .sprungnav { display: none; } }

/* ==========================================================================
   45 BARRIEREFREIHEIT: Tap-Ziele & Feldrahmen (v13)
   ========================================================================== */
/* Feldrahmen: --linie hatte gegen Creme nur 1,38:1 – WCAG fordert 3:1 für
   Bedienelemente. In der Sonne verschwanden die Eingabefelder optisch.
   Als Trennlinie zwischen Abschnitten bleibt das zarte Sand richtig. */
:root { --feld-rand: #9E8B5C; }   /* 3,09:1 auf Creme – erfüllt WCAG 1.4.11 für Bedienelemente */
@media (prefers-color-scheme: dark) { :root { --feld-rand: #7E8470; } }
.feld input[type="text"], .feld input[type="tel"], .feld input[type="email"],
.feld input[type="password"], .feld input[type="number"], .feld input[type="date"],
.feld input[type="time"], .feld input[type="url"], .feld input[type="search"],
.feld select, .feld textarea, .glas-knopf, .glas-filter {
  border-color: var(--feld-rand);
}

/* Tap-Ziele auf Touch-Geräten: 44 px sind die Empfehlung, Fußzeilen-Links
   lagen bei 18 px – ausgerechnet Impressum, Datenschutz und AGB. */
@media (pointer: coarse) {
  .site-footer a, .footer-unten a, .footer-unten li {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  .site-footer ul li { margin-bottom: 2px; }
  .fehler-link { min-height: 44px; }
  .melden-link { min-height: 44px; padding-block: 10px; }
  /* Kästchen und Radios groß genug zum Treffen */
  input[type="checkbox"]:not(.sr-nur), input[type="radio"]:not(.sr-nur) {
    min-width: 24px; min-height: 24px;
  }
  .pille { min-height: 44px; }
  .sterne-eingabe .stern-knopf { min-width: 44px; min-height: 44px; }
}
/* Logo und Stadt-Knopf: 34 px → 44 px Trefferfläche, ohne optisch zu wachsen */
.logo { min-height: 44px; }
.stadt-knopf { min-height: 44px; }

/* ==========================================================================
   ERKLÄRGRAFIKEN (v14) – Problem, Marktvergleich, Preis, Prüfung
   --------------------------------------------------------------------------
   Übernommen aus der Schulvorstellung und für die Website neu gebaut:
   als reines HTML/SVG auf den vorhandenen Farbtoken, damit sie im hellen
   und dunklen Modus funktionieren und keine Bilddateien nötig sind.

   REGELN, die hier eingebaut sind und bleiben müssen:
   – Preise stehen NICHT im CSS. Balkenlängen kommen aus --anteil, das
     script.js aus KONFIG rechnet (siehe preisBalkenSkalieren).
   – Keine Wertung von Wettbewerbern über Farbe allein: jede Aussage steht
     als Text daneben und ist belegbar (Quellenzeile unter der Grafik).
   ========================================================================== */

/* --- Gegenüberstellung: zwei Seiten, die sich nicht finden ---------------- */
.gegenueber {
  display: grid;
  gap: var(--raum-5);
  grid-template-columns: 1fr;
  align-items: stretch;
}
@media (min-width: 900px) {
  .gegenueber { grid-template-columns: 1fr auto 1fr; gap: var(--raum-6); }
}

.gegenueber-seite {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius-l);
  padding: var(--raum-5);
  box-shadow: var(--schatten);
  display: flex;
  flex-direction: column;
  gap: var(--raum-3);
}
.gegenueber-seite h3 {
  display: flex; align-items: center; gap: var(--raum-3);
  margin: 0; font-size: 1.05rem;
}
.gegenueber-seite h3 svg {
  flex: none; width: 26px; height: 26px;
  padding: 7px; box-sizing: content-box;
  border-radius: 50%;
  background: var(--marke-tint); color: var(--marke-text);
}
.gegenueber-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--raum-3); }
.gegenueber-liste li {
  display: grid; grid-template-columns: 20px 1fr; gap: var(--raum-3);
  margin: 0; color: var(--fliess); font-size: 0.95rem; line-height: 1.5;
}
/* Das Kreuz markiert den Missstand, nicht die Person – deshalb Terracotta
   (Warnfarbe der Palette), nicht Rot. */
.gegenueber-liste li::before {
  content: ""; margin-top: 0.35em;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--terra-tint);
  border: 2px solid var(--terra);
}

/* Die Brücke in der Mitte: auf schmalen Schirmen liegt sie zwischen den
   Karten, auf breiten steht sie senkrecht dazwischen. */
.bruecke {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--raum-3); text-align: center;
}
.bruecke svg { width: 100%; max-width: 190px; height: auto; }
.bruecke-text {
  font-weight: 700; color: var(--marke-text);
  font-size: 0.9rem; letter-spacing: 0.02em; margin: 0;
}

/* --- Wege im Markt: drei Karten, eine davon unsere ------------------------ */
.wege { display: grid; gap: var(--raum-5); grid-template-columns: 1fr; }
@media (min-width: 860px) { .wege { grid-template-columns: repeat(3, 1fr); } }

.weg {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius-l);
  padding: var(--raum-5);
  display: flex; flex-direction: column; gap: var(--raum-3);
}
.weg--unser {
  background: var(--marke-tint);
  border-color: var(--marke);
  box-shadow: var(--schatten-l);
}
.weg-kopf { display: flex; align-items: center; gap: var(--raum-3); }
.weg-kopf svg {
  flex: none; width: 22px; height: 22px;
  padding: 8px; box-sizing: content-box; border-radius: 50%;
  background: var(--sand); color: var(--tinte-soft);
}
.weg--unser .weg-kopf svg { background: var(--marke); color: var(--papier); }
@media (prefers-color-scheme: dark) { .weg--unser .weg-kopf svg { color: var(--tinte); } }
.weg-kopf h3 { margin: 0; font-size: 1.02rem; }
.weg-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--raum-2); }
.weg-liste li {
  margin: 0; padding-left: 1.4em; position: relative;
  font-size: 0.93rem; line-height: 1.5; color: var(--fliess);
}
.weg-liste li::before {
  content: "–"; position: absolute; left: 0; color: var(--terra);
  font-weight: 700;
}
.weg--unser .weg-liste li::before { content: "✓"; color: var(--marke-text); font-size: 0.85em; }

/* --- Preisvergleich als Balken ------------------------------------------- */
.preis-balken { display: grid; gap: var(--raum-4); margin: 0; }
.preis-balken > div { display: grid; gap: var(--raum-2); }
.preis-balken dt {
  font-weight: 700; color: var(--tinte); font-size: 0.95rem;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--raum-2);
}
.preis-balken .balken-zusatz { font-weight: 400; color: var(--tinte-soft); font-size: 0.85rem; }
/* Feste Spur, damit die Balkenlängen wirklich vergleichbar sind: Der Wert
   steht in einer eigenen Spalte und schiebt den Balken nicht. */
.preis-balken dd {
  margin: 0; display: grid; align-items: center; gap: var(--raum-4);
  grid-template-columns: minmax(0, 1fr) 6.5em;
}

.balken {
  height: 30px; border-radius: 999px;
  /* --anteil setzt script.js aus den KONFIG-Preisen; 60% ist nur der
     Rückfallwert, falls JavaScript nicht läuft. */
  width: var(--anteil, 60%);
  min-width: 40px;
  background: var(--sand);
  border: 1px solid var(--linie);
}
.balken--wir { background: var(--marke); border-color: var(--marke); }
.balken-wert {
  font-weight: 800; font-size: 1rem; color: var(--tinte);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.preis-balken .wir dt { color: var(--marke-text); }

/* --- Aufteilung: wohin die Stunde geht ----------------------------------- */
.aufteilung { display: grid; gap: var(--raum-4); margin: var(--raum-5) 0 0; }
.aufteilung-leiste {
  display: flex; height: 44px; border-radius: var(--radius);
  overflow: hidden; border: 1px solid var(--linie);
}
.aufteilung-teil {
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.95rem; font-variant-numeric: tabular-nums;
}
.aufteilung-teil--tutor { background: var(--marke); color: #FAF6EC; }
.aufteilung-teil--service { background: var(--akzent); color: var(--akzent-text); }
@media (prefers-color-scheme: dark) {
  .aufteilung-teil--tutor { color: var(--tinte); }
  .aufteilung-teil--service { color: #2A2013; }
}
.aufteilung-legende {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--raum-3); grid-template-columns: 1fr;
}
@media (min-width: 640px) { .aufteilung-legende { grid-template-columns: 1fr 1fr; } }
.aufteilung-legende li { margin: 0; display: grid; grid-template-columns: 14px 1fr; gap: var(--raum-3); }
.aufteilung-legende li::before {
  content: ""; width: 14px; height: 14px; border-radius: 4px; margin-top: 0.3em;
}
.aufteilung-legende .tutor::before { background: var(--marke); }
.aufteilung-legende .service::before { background: var(--akzent); }
.aufteilung-legende strong { display: block; color: var(--tinte); }
.aufteilung-legende span { font-size: 0.92rem; line-height: 1.5; color: var(--fliess); }

/* --- Prüfschritte als Raster --------------------------------------------- */
.pruef-raster {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: var(--raum-4); grid-template-columns: 1fr;
}
@media (min-width: 640px) { .pruef-raster { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .pruef-raster { grid-template-columns: repeat(3, 1fr); } }
.pruef-raster li {
  margin: 0; display: grid; grid-template-columns: auto 1fr; gap: var(--raum-4);
  align-items: start;
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: var(--raum-4);
}
.pruef-raster svg {
  width: 22px; height: 22px; padding: 9px; box-sizing: content-box;
  border-radius: 50%; background: var(--marke-tint); color: var(--marke-text);
}
.pruef-raster strong { display: block; margin-bottom: var(--raum-1); color: var(--tinte); }
.pruef-raster p { margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--fliess); }

/* --- Fußnote unter Grafiken ---------------------------------------------- */
.grafik-quelle {
  margin: var(--raum-4) 0 0; font-size: 0.82rem; color: var(--tinte-soft);
  line-height: 1.5;
}

/* Bewegung nur, wenn gewünscht: die Balken wachsen beim Erscheinen. */
@media (prefers-reduced-motion: no-preference) {
  .balken, .aufteilung-teil { transition: width 700ms cubic-bezier(0.22, 1, 0.36, 1); }
}