/* EB Klein — Nachbesserungen zur Live-Abnahme vom 16.09.2026.
 *
 * Zwei Dinge stehen hier drin:
 *
 * A) Fehlende Tailwind-Klassen.
 *    Die Seiten werden nicht mehr aus dem Astro-Quelltext gebaut, sondern
 *    direkt gepflegt. Tailwind erzeugt Klassen wie `text-[15.5px]` aber nur,
 *    wenn sie beim Bauen schon im Quelltext stehen. Jede spaeter von Hand
 *    ergaenzte Klasse dieser Art existiert im ausgelieferten CSS nicht und
 *    faellt wirkungslos aus — die Ueberschrift der Startseite lief dadurch
 *    mobil auf geerbte 16 px statt der gesetzten Groesse.
 *    Die Regeln unten holen genau die fehlenden Klassen nach. Reihenfolge
 *    ist wichtig: erst ohne Praefix, dann sm:, dann lg: — sonst gewinnt die
 *    kleinere Stufe gegen die groessere.
 *
 * B) Schwebende Bedienelemente auf schmalen Geraeten.
 *    Schriftregler, Sprachumschalter und Chatknopf lagen auf drei Hoehen
 *    uebereinander und belegten zusammen ein Band von rund 120 px am unteren
 *    Rand. Bei 390 px Breite deckte der Chatknopf messbar die Ueberschrift
 *    der Startseite ab. Unten liegen sie in EINER Zeile von 44 px Hoehe.
 *
 * Diese Datei wird als letztes Stylesheet geladen und darf daher mit
 * einfacher Spezifitaet ueberschreiben. Nur die Regeln gegen Inline-Styles
 * der schwebenden Knoepfe brauchen !important.
 */

/* ── A · fehlende Tailwind-Klassen ────────────────────────────────── */

.text-\[14\.5px\] { font-size: 14.5px }
.text-\[15\.5px\] { font-size: 15.5px }
.text-\[42px\]    { font-size: 42px }
.leading-\[1\.07\]{ line-height: 1.07 }
.h-\[380px\]      { height: 380px }
.w-\[152px\]      { width: 152px }
.h-\[152px\]      { height: 152px }

@media (min-width: 640px) {
  .sm\:text-\[46px\] { font-size: 46px }
}

@media (min-width: 1024px) {
  .lg\:text-\[38px\] { font-size: 38px }
  .lg\:text-\[42px\] { font-size: 42px }
}

/* ── B · Bedienleiste auf schmalen Geraeten ───────────────────────── */

@media (max-width: 640px) {

  /* Schriftregler: Wort "Groesser" weg, es bleiben A- und A+ */
  .eb-a11y-wort { display: none }

  #eb-a11y {
    bottom: 12px !important;
    left: 10px !important;
  }

  #lang-toggle {
    bottom: 12px !important;
    right: auto !important;
    left: 50% !important;
    transform: translateX(-50%);
  }

  /* Chatknopf auf dieselbe Zeile, etwas kompakter */
  button[aria-label*="Junior EB"] {
    bottom: 12px !important;
    right: 10px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
  }

  /* Das geoeffnete Chatfenster bleibt ueber der Zeile stehen */
  #eb-kleini-panel,
  div[role="dialog"][aria-label*="Junior EB"] {
    bottom: 64px !important;
  }

  /* Weitere schwebende Helfer aus den Formularstrecken hochsetzen,
     damit sie nicht in die Bedienzeile laufen */
  #eb-stand-btn  { bottom: 64px !important }
  #eb-stand-tipp { bottom: 116px !important }

  /* Platz am Seitenende reservieren: die Zeile darf keine Fusszeilen-
     Links verdecken, wenn man ganz nach unten scrollt */
  footer { padding-bottom: 76px }
}

/* Sehr schmale Geraete: Chatknopf nur noch als Symbol, sonst passen
   die drei Elemente nicht nebeneinander. Die Beschriftung bleibt fuer
   Screenreader ueber aria-label erhalten. */
@media (max-width: 410px) {
  button[aria-label*="Junior EB"] > span:last-child { display: none }
  button[aria-label*="Junior EB"] {
    padding: 11px !important;
    border-radius: 9999px !important;
  }
}

/* ── C · Vorbau ueber dem Hero auf schmalen Geraeten kuerzen ──────────
 *
 * Gemessen bei 390 px Breite lagen ueber dem ersten Inhalt:
 *   BEG-Hinweisleiste 165 px + Kopfzeile 74 px + Anmeldeleiste 220 px
 *   = 459 px. Die Ueberschrift der Startseite begann dadurch erst bei
 *   618 px, also unterhalb der ersten Bildschirmseite — und geriet in
 *   den Bereich der schwebenden Bedienelemente.
 *
 * Beide Leisten bleiben sichtbar und voll bedienbar, nur kompakter:
 * die BEG-Leiste zeigt drei Zeilen mit "Details"-Link daneben, die
 * Anmeldeleiste verliert den Erklaersatz, den Eingabefeld und Knopf
 * ohnehin schon sagen.
 */

@media (max-width: 640px) {

  /* BEG-Hinweis: Text auf drei Zeilen begrenzen, Rest hinter "Details" */
  .begbar .begbar-tx {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Anmeldeleiste: Erklaersatz weg, engere Abstaende */
  #eb-loginbar > div {
    padding: 8px 12px !important;
    gap: 7px !important;
    font-size: 13.5px !important;
  }
  #eb-loginbar > div > span:nth-of-type(2) { display: none }
  #eb-loginbar input { min-width: 150px !important; padding: 8px 10px !important }
  #eb-loginbar button { padding: 8px 13px !important }
}

/* ── D · Chatknopf klappt beim Scrollen ein ───────────────────────────
 *
 * Gesteuert von assets/eb-chat-einklappen.v2.js, das beim Scrollen nach
 * unten [data-eb-chat="klein"] auf <html> setzt. Der Knopf schrumpft dann
 * auf sein Symbol — aus rund 206 px werden rund 46 px — und gibt den
 * Inhalt darunter frei. Er verschwindet nie ganz und bleibt anklickbar;
 * die Beschriftung bleibt ueber aria-label fuer Screenreader erhalten.
 */

button[aria-label*="Junior EB"] {
  transition: padding .18s ease, border-radius .18s ease;
}

[data-eb-chat="klein"] button[aria-label*="Junior EB"] > span:last-child {
  display: none;
}
[data-eb-chat="klein"] button[aria-label*="Junior EB"] {
  padding: 11px !important;
  border-radius: 9999px !important;
}

@media (prefers-reduced-motion: reduce) {
  button[aria-label*="Junior EB"] { transition: none }
}

/* v5 (10.10.2026): max-w-6xl fehlte im Tailwind-Build */
.max-w-6xl{max-width:72rem}