/* ============================================================================
   app.css  ·  Schale „Einfach (Mike)“: zwei Zonen, Akte, Fallsuche, Wichtig,
               Chat, Blöcke, Blatt „Woher?“, Login (SPEC 14.3)
   ----------------------------------------------------------------------------
   Warum so: Mike (Laie, steht für die echten Nutzer) fand die Oberfläche
   „zu verwirrend“. Darum zwei Zonen statt drei, eine Sache je Karte,
   Erklärungen nur auf Klick. Tokens und gemeinsame Bausteine stehen in
   design.css (SPEC 13.3.6) – hier keine neue Palette.

   Regeln, die hier überall gelten:
     - Keine CSS-Übergänge auf Breite, Höhe, Lage oder calc(var())-Längen
       (Höhen laufen über WAAPI in bewegung.js, gemessen px → px).
     - Keine horizontale Scrollleiste bei keiner Breite.
     - Unter 1024 px: Akte als einklappbare Kopfkarte, Blätter von unten.
     - prefers-reduced-motion: Kreisel und Schimmer stehen (design.css setzt
       Dauern auf 0).
   ========================================================================= */

html, body { min-height: 100%; }
body { overflow-x: hidden; }

/* ---------------------------------------------------------------- Banner */
.banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-banner);
  height: var(--banner-h);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 var(--rand);
  background: var(--insel);
  color: var(--insel-text);
  font-size: var(--gr-2);
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
}
.banner strong { font-weight: var(--gewicht-fett); }
#banner-zusatz { color: var(--insel-text-2); }

/* Die App füllt das Fenster unter dem Banner; gescrollt wird in den Zonen. */
.app {
  position: fixed;
  inset: var(--banner-h) 0 0 0;
  display: flex;
  flex-direction: column;
  background: var(--grund);
}
.haupt { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.laden { padding: var(--a-8) var(--rand); text-align: center; color: var(--text-2); }

/* --------------------------------------------------------------- Kopfzeile */
.kopf { flex: none; height: var(--kopf-h); }
.kopf-innen {
  height: 100%;
  max-width: var(--inhalt-max);
  margin: 0 auto;
  padding: 0 var(--rand);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: var(--a-3);
}
.kopf-marke {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--text);
  text-decoration: none;
  border-radius: var(--r-s);
}
.marke-name { font-weight: var(--gewicht-fett); font-size: var(--gr-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Mit Logo nennt das Bild den Namen (alt) – kein zweites Mal als Text. */
.marke-name.mit-logo { display: none; }

/* Logo immer auf heller Plakette (Start-Logo ist dunkler Text, SPEC 12.6) */
.logo-plakette {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  background: #FFFFFF;
  overflow: hidden;
}
.logo-plakette img { display: block; width: auto; height: 100%; max-width: 100%; object-fit: contain; }
.logo-kopf { height: 36px; max-width: 200px; background: transparent; }
.logo-kopf[data-format="quadrat"] { width: 36px; border-radius: var(--r-s); }
.logo-gross { height: 52px; max-width: 280px; background: transparent; }

.modus-segment {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border-radius: var(--r-voll);
  background: var(--karte-2);
  border: 1px solid var(--linie);
}
.modus-segment button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 18px;
  border: 0;
  border-radius: var(--r-voll);
  background: transparent;
  color: var(--text-2);
  font-size: var(--gr-3);
  font-weight: var(--gewicht-fett);
  white-space: nowrap;
  transition: background-color var(--dauer-1) var(--ease), color var(--dauer-1) var(--ease), box-shadow var(--dauer-1) var(--ease);
}
.modus-segment button:hover { color: var(--text); }
.modus-segment button[aria-pressed="true"] { background: var(--karte); color: var(--text); box-shadow: var(--schatten-1); }
.seg-kurz { display: none; }

.person { justify-self: end; position: relative; }
.avatar-knopf {
  position: relative;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--linie);
  background: var(--karte);
  color: var(--text-2);
  font-size: var(--gr-2);
  font-weight: 700;
}
.avatar-knopf:hover { border-color: var(--linie-stark); color: var(--text); }
.avatar-zahl:not([hidden]) {
  position: absolute;
  top: -3px;
  right: -3px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--marke-knopf);
  color: var(--auf-marke);
  font-size: 11px;
  line-height: 18px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.menue {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: var(--z-overlay);
  min-width: 240px;
  padding: 6px;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--r-l);
  box-shadow: var(--schatten-3);
}
.menue-kopf { padding: 10px 12px; font-size: var(--gr-3); color: var(--text-2); border-bottom: 1px solid var(--linie-fein); margin-bottom: 4px; }
.menue-eintrag {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font-size: var(--gr-3);
  text-align: left;
}
.menue-eintrag:hover { background: var(--karte-2); }
.menue-eintrag .ikon { color: var(--text-2); }

/* ------------------------------------------------------- Login, Rolle, Modus */
.einstieg { flex: 1; min-height: 0; overflow: auto; display: grid; place-items: center; padding: var(--a-5) var(--rand); }
.einstieg-innen { position: relative; width: 100%; max-width: 560px; text-align: center; padding: var(--a-6) 0; }
.einstieg-logo { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 0 auto var(--a-7); min-height: 52px; }
.einstieg-logo .marke-name { font-size: var(--gr-5); }
.einstieg-titel { font: var(--gewicht-fett) var(--gr-7)/1.15 var(--schrift-serif); margin: 0 0 var(--a-6); letter-spacing: -.01em; }
.einstieg-zurueck {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-2);
}
.einstieg-zurueck:hover { background: var(--karte-2); color: var(--text); }
.passcode { display: flex; gap: var(--a-2); max-width: 400px; margin: 0 auto; }
.passcode-feld {
  flex: 1;
  min-width: 0;
  min-height: 56px;
  padding: 0 22px;
  border: 1px solid var(--linie-feld);
  border-radius: var(--r-voll);
  background: var(--karte);
  font-size: var(--gr-4);
}
.passcode-feld::placeholder { color: var(--text-3); opacity: 1; }
.passcode-feld:focus { outline: none; border-color: var(--marke-fokus); box-shadow: 0 0 0 3px var(--marke-flaeche-2); }
.login-fehler { min-height: 1.5em; margin: var(--a-3) 0 0; color: var(--stopp-tinte); font-size: var(--gr-3); font-weight: var(--gewicht-mittel); }
.login-fehler:empty { visibility: hidden; }
.einstieg-fuss { margin: var(--a-6) 0 0; font-size: var(--gr-2); color: var(--text-3); }

/* Runde Knöpfe (Senden, Weiter, Mikrofon, Schließen) */
.rund {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: var(--karte-2);
  color: var(--text-2);
}
.rund.senden { background: var(--marke-knopf); color: var(--auf-marke); }
.rund.senden:hover:not(:disabled) { background: var(--marke-700); }
.rund.senden:disabled { opacity: .55; }
.rund.mikro { background: transparent; color: var(--text-3); }
.rund.mikro:hover { color: var(--text); }
.passcode-weiter { width: 56px; height: 56px; }
.passcode-weiter.ist-laeuft .ikon { animation: drehen .9s linear infinite; }

/* Große Kacheln: ein Symbol, ein Wort, höchstens eine kurze Zeile */
.kacheln { display: grid; gap: var(--a-3); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kacheln-1 { grid-template-columns: minmax(0, 360px); justify-content: center; }
.kacheln-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kachel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--a-3);
  min-height: 172px;
  padding: var(--a-6) var(--a-4) var(--a-5);
  border: 1px solid var(--linie);
  border-radius: var(--r-xl);
  background: var(--karte);
  box-shadow: var(--schatten-1);
  color: var(--text);
  text-align: center;
  text-decoration: none;
  transition: border-color var(--dauer-1) var(--ease), box-shadow var(--dauer-1) var(--ease), transform var(--dauer-1) var(--ease);
}
.kachel:hover:not(:disabled):not([aria-disabled="true"]) { border-color: var(--marke-linie); box-shadow: var(--schatten-2); transform: translateY(-2px); }
.kachel:disabled, .kachel[aria-disabled="true"] { opacity: .6; cursor: default; }
.kachel.ist-laeuft { border-color: var(--marke-linie); }
.kachel-ikon {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 18px;
  background: var(--marke-flaeche);
  color: var(--marke-text);
}
.kachel-text { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.kachel-text strong { font-size: var(--gr-5); font-weight: var(--gewicht-fett); line-height: 1.25; }
.kachel-text > span { font-size: var(--gr-3); color: var(--text-2); }
.kachel .zahl-marke {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 9px;
  border-radius: var(--r-voll);
  background: var(--marke-knopf);
  color: var(--auf-marke);
  font-size: var(--gr-2);
  font-weight: 700;
  vertical-align: 3px;
}

/* ------------------------------------------------------- Arbeitsfläche */
.flaeche {
  flex: 1;
  min-height: 0;
  width: 100%;
  max-width: var(--inhalt-max);
  margin: 0 auto;
  padding: 0 var(--rand) var(--rand);
  display: grid;
  grid-template-columns: var(--akte-b) minmax(0, 1fr);
  gap: var(--a-5);
}
.flaeche.ohne-links { grid-template-columns: minmax(0, 1fr); }

/* Linke Zone: Akte oder Fallsuche – bleibt auf jedem Bildschirm stehen */
.links { min-height: 0; min-width: 0; overflow: auto; border-radius: var(--r-xl); }
.rechts { min-height: 0; min-width: 0; display: flex; flex-direction: column; }
.rechts-chat { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.rechts-bildschirm { flex: 1; min-height: 0; overflow: auto; border-radius: var(--r-xl); }

/* ------------------------------------------------------------------- Akte */
.akte, .suche {
  background: var(--karte);
  border: 1px solid var(--linie-fein);
  border-radius: var(--r-xl);
  box-shadow: var(--schatten-1);
  padding: var(--a-5);
}
.akte-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--a-3); }
.akte-kopf-text { min-width: 0; }
.akte-name { font: var(--gewicht-fett) var(--gr-6)/1.15 var(--schrift-serif); letter-spacing: -.01em; }
.akte-adresse { margin-top: var(--a-3); font-size: var(--gr-5); line-height: 1.3; }
.akte-adresse > span { display: block; }
/* Straße und Hausnummer mit geschütztem Leerzeichen (app.js) – und nicht mitten im Wort trennen:
   „Kastanienallee 8“ ragt lieber ein Stück in den freien Raum neben dem Knopf als „8“ allein unten. */
.akte-adresse .str { overflow-wrap: normal; }
.akte-adresse .ort { color: var(--text-2); font-size: var(--gr-4); }
.akte-id { margin-top: var(--a-2); color: var(--text-3); font-size: var(--gr-2); }
.akte-kopf-knoepfe { display: flex; align-items: center; gap: var(--a-2); flex-shrink: 0; }
/* „Nächster Kunde“: gut sichtbar neben dem Namen, aber kleiner als ein Hauptknopf.
   Mit .knopf-e davor: .knopf-e steht weiter unten und gewann sonst – der Knopf war
   so groß, dass „Familie Petersen“ mitten im Wort umbrach (09.10.). */
.knopf-e.naechster-kunde { min-height: 36px; padding: 6px 12px; font-size: var(--gr-2); gap: 6px; }
.akte-auf-knopf { display: none; }
.akte-auf-knopf .ikon { transition: transform var(--dauer-1) var(--ease); }
.akte.auf .akte-auf-knopf .ikon { transform: rotate(180deg); }

.akte-teil { border-top: 1px solid var(--linie-fein); margin-top: var(--a-5); padding-top: var(--a-4); }
.akte-teil-titel, .akte-teil-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: var(--gr-2);
  font-weight: var(--gewicht-fett);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-3);
  text-align: left;
}
.akte-teil-kopf:hover { color: var(--text); }
.teil-pfeil { transition: transform var(--dauer-1) var(--ease); }
.akte-teil-kopf[aria-expanded="true"] .teil-pfeil { transform: rotate(180deg); }

.geraete { list-style: none; display: grid; gap: var(--a-1); margin-top: var(--a-2); }
/* Jedes Gerät ist ein Knopf (Vincent 09.10.): Klick → häufigste Probleme als Chips im Chat. */
.geraet {
  display: flex;
  align-items: center;
  gap: var(--a-3);
  width: calc(100% + 16px);
  min-height: 52px;
  margin: 0 -8px;
  padding: 6px 8px;
  border: 0;
  border-radius: var(--r-m);
  background: transparent;
  color: var(--text);
  text-align: left;
  transition: background-color var(--dauer-1) var(--ease);
}
.geraet:hover { background: var(--flaeche); }
.geraet:hover .geraet-ikon { background: var(--marke-flaeche); color: var(--marke-text); }
.geraet-pfeil { flex: none; margin-left: auto; color: var(--text-3); }
.geraet:hover .geraet-pfeil { color: var(--marke-text); }
.geraet-ikon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--r-m); background: var(--karte-2); color: var(--text-2); }
.geraet-text { display: flex; flex-direction: column; min-width: 0; }
.geraet-text strong { font-size: var(--gr-4); font-weight: var(--gewicht-fett); }
.geraet-text span { font-size: var(--gr-3); color: var(--text-2); }

.verlauf-liste { list-style: none; margin-top: var(--a-2); }
.verlauf-zeile {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: var(--a-2);
  align-items: baseline;
  width: calc(100% + 16px);
  margin: 0 -8px;
  padding: 7px 8px;
  border: 0;
  border-radius: var(--r-s);
  background: transparent;
  color: var(--text);
  font-size: var(--gr-3);
  text-align: left;
}
.verlauf-zeile:hover { background: var(--flaeche); }
.verlauf-datum { color: var(--text-3); font-variant-numeric: tabular-nums; }
.verlauf-offen { font-size: var(--gr-1); font-weight: 700; color: var(--marke-text); background: var(--marke-flaeche); border-radius: var(--r-voll); padding: 2px 8px; }
.verlauf-leer { padding: 7px 0; color: var(--text-3); font-size: var(--gr-3); }
.verlauf-alle { margin-top: 4px; }

.akte-unten { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--a-3); margin-top: var(--a-5); }

.akte-fehler { margin-top: var(--a-4); padding: var(--a-3); border-radius: var(--r-m); background: var(--achtung-flaeche); color: var(--achtung-tinte); font-size: var(--gr-3); }
.akte-skelett { display: grid; gap: 12px; margin-top: var(--a-5); }

.mehr-anlage { display: grid; gap: var(--a-4); margin-top: var(--a-3); }
.mehr-notiz { font-size: var(--gr-3); color: var(--text-2); padding: 10px 12px; border-radius: var(--r-m); background: var(--flaeche); }
.mehr-titel { font-size: var(--gr-2); font-weight: var(--gewicht-fett); margin-bottom: 4px; }
.eigenschaften { display: grid; gap: 2px; }
.eigenschaft {
  display: grid;
  grid-template-columns: minmax(96px, 36%) minmax(0, 1fr);
  gap: var(--a-3);
  align-items: baseline;
  padding: 4px 0;
  font-size: var(--gr-2);
}
.eigenschaft dt { display: flex; align-items: center; gap: 8px; color: var(--text-2); }
.eigenschaft dt .ikon { color: var(--text-3); width: 15px; height: 15px; }
.eigenschaft dd { color: var(--text); min-width: 0; }
.eigenschaften-kompakt { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 4px 16px; }
.eigenschaften-kompakt .eigenschaft { grid-template-columns: 1fr; gap: 0; }
.leise { color: var(--text-3); }
.akte-komponenten, .akte-wv, .akte-uebergaben { list-style: none; display: grid; gap: 2px; }
.akte-komponente { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--linie-fein); }
.akte-komponente:last-child { border-bottom: 0; }
.komponente-symbol { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--r-s); background: var(--karte-2); color: var(--text-2); }
.komponente-name { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: var(--gr-3); }
.komponente-modell { font-size: var(--gr-2); color: var(--text-2); }
.komponente-sn { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.attr-marken { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.attr-marke { padding: 1px 7px; border-radius: var(--r-xs); background: var(--karte-2); font-size: 12px; color: var(--text-2); }
.attr-marke strong { color: var(--text); font-weight: var(--gewicht-mittel); }
.attr-auffaellig { background: var(--achtung-flaeche); color: var(--achtung-tinte); box-shadow: inset 0 0 0 1px var(--achtung-linie); }
.attr-auffaellig strong { color: var(--achtung-tinte); font-weight: var(--gewicht-fett); }
.akte-wv-eintrag { padding: 6px 0; border-bottom: 1px solid var(--linie-fein); font-size: var(--gr-2); }
.akte-wv-eintrag:last-child { border-bottom: 0; }
.akte-wv-kopf { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.akte-wv-text { margin-top: 2px; }
/* Wiederholung in „Mehr zur Anlage“: derselbe Renderer, flach */
.mehr-wiederholung .blk-recurrence_alert { padding: 0; border: 0; box-shadow: none; background: transparent; }

/* --------------------------------------------------------------- Fallsuche */
.suche-titel { margin: 0 0 var(--a-4); font-size: var(--gr-5); font-weight: var(--gewicht-fett); }
.suchfeld {
  display: flex;
  align-items: center;
  gap: var(--a-2);
  min-height: 52px;
  padding: 0 var(--a-4);
  border: 1px solid var(--linie-feld);
  border-radius: var(--r-l);
  background: var(--karte);
  color: var(--text-2);
}
.suchfeld:focus-within { outline: 2px solid var(--marke-fokus); outline-offset: 2px; }
/* Platzhalter „Kunde, Adresse oder Anlagennummer“: bei 15 px wurde er in der
   360-px-Spalte und am Handy mitten im Wort abgeschnitten („Anlagennum“) –
   13 px passen bei 1440 und 390; in der 300-px-Spalte (1024–1279) endet er
   sauber mit „…“ statt mit einem halben Buchstaben. */
.suchfeld-eingabe { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: var(--gr-4); color: var(--text); text-overflow: ellipsis; }
.suchfeld-eingabe::placeholder { color: var(--text-3); opacity: 1; }
.suchfeld-eingabe::-webkit-search-cancel-button { cursor: pointer; }
.treffer { list-style: none; margin-top: var(--a-3); }
.treffer:empty { display: none; }
.treffer-knopf {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 12px;
  border: 0;
  border-radius: var(--r-l);
  background: transparent;
  color: var(--text);
  text-align: left;
}
.treffer-knopf:hover, .treffer-knopf:focus-visible { background: var(--karte-2); }
.treffer-knopf strong { font-weight: var(--gewicht-fett); font-size: var(--gr-4); }
.treffer-knopf span { color: var(--text-2); font-size: var(--gr-3); }
.treffer-leer { padding: 12px; color: var(--text-3); font-size: var(--gr-3); }
.suche-zurueck { margin-top: var(--a-3); }

/* ------------------------------------------------- Kopf der rechten Zone
   Lage der jüngsten Antwort (Ampel, SPEC 14.10.5) + „Wichtig“ in einer Zeile. */
.zone-kopf {
  flex: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--a-2) var(--a-3);
  width: 100%;
  max-width: var(--chat-max);
  margin: 0 auto var(--a-3);
}
.lage-kopf { min-height: 36px; padding: 6px 14px 6px 12px; font-size: var(--gr-3); }
.lage-kopf .lage-punkt { width: 10px; height: 10px; }

/* ----------------------------------------------------------------- Wichtig */
.wichtig {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--a-2);
  min-width: 0;
  max-width: 100%;
}
.wichtig-marke { margin-right: 2px; font-size: var(--gr-1); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.wichtig-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  max-width: 100%;
  padding: 7px 14px 7px 10px;
  border: 1px solid;
  border-radius: var(--r-voll);
  font-size: var(--gr-3);
  font-weight: var(--gewicht-fett);
  text-align: left;
}
.wichtig-chip span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wc-wiederholung, .wc-wiedervorlage { background: var(--achtung-flaeche); border-color: var(--achtung-linie); color: var(--achtung-tinte); }
.wc-stopp { background: var(--stopp-flaeche); border-color: var(--stopp-linie); color: var(--stopp-tinte); }
.wc-regel { background: var(--achtung-flaeche); border-color: var(--achtung-linie); color: var(--achtung-tinte); }
/* Blatt eines Regel-Chips („Nicht nur nachfüllen“) */
.regel-blatt-titel { display: flex; align-items: flex-start; gap: 8px; color: var(--achtung-tinte); }
.wc-mehr { background: var(--karte); border-color: var(--linie); color: var(--text-2); padding: 7px 12px; }

/* ------------------------------------------------------------------- Chat */
.verlauf-chat { flex: 1; min-height: 0; overflow: auto; padding: 0 2px; overscroll-behavior: contain; }
.verlauf-innen {
  max-width: var(--chat-max);
  margin: 0 auto;
  padding: var(--a-2) 0 var(--a-6);
  display: flex;
  flex-direction: column;
  gap: var(--a-5);
}
.leer-chat { text-align: center; padding: 12vh var(--a-4) 0; }
.leer-titel { font: var(--gewicht-fett) var(--gr-7)/1.15 var(--schrift-serif); margin: 0 0 var(--a-5); letter-spacing: -.01em; text-wrap: balance; }
.vorschlaege { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--a-2); }
.vorschlag {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--linie);
  border-radius: var(--r-voll);
  background: var(--karte);
  color: var(--text);
  font-size: var(--gr-3);
  font-weight: var(--gewicht-mittel);
}
.vorschlag:hover { border-color: var(--linie-stark); }

.runde { display: flex; flex-direction: column; gap: var(--a-4); }
.blase {
  align-self: flex-end;
  max-width: 78%;
  padding: 12px 16px;
  border-radius: var(--r-xl) var(--r-xl) 6px var(--r-xl);
  background: var(--blase);
  color: var(--text);
  font-size: var(--gr-4);
  line-height: var(--zh);
}
.blase-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.beleg-wellig { text-decoration: underline wavy var(--stopp); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.runde-antwort { display: flex; flex-direction: column; gap: var(--a-3); min-width: 0; }
.vorab { display: flex; flex-direction: column; gap: var(--a-3); }

.schaut { display: flex; align-items: center; gap: var(--a-3); color: var(--text-2); font-size: var(--gr-4); }
.kreisel-e {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--marke-200);
  border-top-color: var(--marke-knopf);
  animation: drehen 900ms linear infinite;
}
@keyframes drehen { to { transform: rotate(360deg); } }
.schimmer {
  background: linear-gradient(90deg, var(--text-2) 0%, var(--text-2) 40%, var(--marke-300) 50%, var(--text-2) 60%, var(--text-2) 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: schimmern 1.6s linear infinite;
}
@keyframes schimmern { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) {
  .kreisel-e { animation: none; }
  .schimmer { animation: none; background: none; color: var(--text-2); }
}
/* Kleiner Kreisel (Module, Knöpfe) */
.kreisel {
  display: inline-block;
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-right-color: transparent;
  opacity: .85;
  animation: drehen .8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .kreisel { animation: none; border-right-color: currentColor; opacity: .5; }
}

.fehlerbox {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--a-3);
  padding: var(--a-3) var(--a-4);
  border: 1px solid var(--achtung-linie);
  border-radius: var(--r-l);
  background: var(--achtung-flaeche);
  color: var(--achtung-tinte);
}
.fehlerbox-text { display: flex; align-items: flex-start; gap: 8px; flex: 1; min-width: 200px; font-size: var(--gr-3); }
.fehlerbox-text .ikon { margin-top: 3px; }

/* Eingabe */
.eingabe { flex: none; width: 100%; max-width: var(--chat-max); margin: 0 auto; }
.eingabe-feld {
  display: flex;
  align-items: flex-end;
  gap: var(--a-2);
  padding: 6px 6px 6px 20px;
  border: 1px solid var(--linie-stark);
  border-radius: 26px;
  background: var(--karte);
  box-shadow: var(--schatten-2);
}
.eingabe-feld:focus-within { border-color: var(--marke-fokus); box-shadow: 0 0 0 3px var(--marke-flaeche-2), var(--schatten-2); }
.eingabe-text {
  flex: 1;
  min-width: 0;
  max-height: 160px;
  padding: 11px 0;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  font-size: var(--gr-4);
  line-height: 1.4;
}
.eingabe-text::placeholder { color: var(--text-3); opacity: 1; }
.eingabe-text:focus-visible { outline: none; }

/* --------------------------------------------------------------- Knöpfe (einfach) */
.knopf-e {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 11px 20px;
  border: 1.5px solid transparent;
  border-radius: var(--r-voll);
  background: var(--karte);
  color: var(--text);
  font-size: var(--gr-4);
  font-weight: var(--gewicht-fett);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dauer-1) var(--ease), border-color var(--dauer-1) var(--ease), transform var(--dauer-1) var(--ease);
}
.knopf-e:active:not(:disabled) { transform: scale(.98); }
.knopf-e:disabled { opacity: .55; cursor: default; }
.knopf-e-primaer { background: var(--marke-knopf); color: var(--auf-marke); }
.knopf-e-primaer:hover:not(:disabled) { background: var(--marke-700); }
.knopf-e-rand { border-color: var(--linie-stark); }
.knopf-e-rand:hover:not(:disabled) { border-color: var(--linie-feld); }
.knopf-e.ist-erledigt, .knopf-e.ist-erledigt:disabled { opacity: 1; background: var(--gut-flaeche); border-color: var(--gut-linie); color: var(--gut-tinte); }
.knopf-leise-e {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 10px;
  border: 0;
  border-radius: var(--r-voll);
  background: transparent;
  color: var(--text-2);
  font-size: var(--gr-2);
  font-weight: var(--gewicht-fett);
  white-space: nowrap;
  text-decoration: none;
}
.knopf-leise-e:hover:not(:disabled) { background: var(--karte-2); color: var(--text); }
.knopf-leise-e:disabled { opacity: .55; }

/* --------------------------------------------------------------- Blöcke */
.antwort { display: flex; flex-direction: column; gap: var(--a-3); min-width: 0; }
/* Ampel (SPEC 14.10.5): dezenter farbiger Rand links an der Antwort + Pille am Kopf.
   Nur die Farbe gleitet (border-color), nie Breite oder Abstand. */
.antwort[data-lage] {
  --lage-rand: var(--ampel-grau);
  padding-left: 14px;
  border-left: 3px solid var(--lage-rand);
  transition: border-color var(--dauer-2) var(--ease);
}
.antwort[data-lage="gruen"] { --lage-rand: var(--ampel-gruen); }
.antwort[data-lage="gelb"] { --lage-rand: var(--ampel-gelb); }
.antwort[data-lage="rot"] { --lage-rand: var(--ampel-rot); }
.antwort[data-lage="grau"] { --lage-rand: var(--linie-stark); }
.antwort > .lage-antwort { margin-bottom: calc(var(--a-1) * -1); }
.antwort > .lage-antwort.lage-doppelt { display: none; }
.blk { position: relative; min-width: 0; }
.karte-e {
  background: var(--karte);
  border: 1px solid var(--linie-fein);
  border-radius: var(--r-xl);
  box-shadow: var(--schatten-1);
  padding: var(--a-5);
}
.karte-titel { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: var(--a-3); font-size: var(--gr-4); font-weight: var(--gewicht-fett); }

/* text: Absatz ohne Karte */
.antwort-text { font-size: var(--gr-4); line-height: 1.5; }
.antwort-text + .antwort-text { margin-top: var(--a-2); }
.antwort-leise { display: flex; align-items: center; gap: 8px; font-size: var(--gr-3); color: var(--text-2); }
.blk-text[data-herkunft="system"] .antwort-text { color: var(--text); }

/* „Mehr“ / „Warum?“ / „Ansehen“ */
.mehr { margin-top: var(--a-3); }
.mehr > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  font-size: var(--gr-3);
  font-weight: var(--gewicht-fett);
  color: var(--text-2);
  list-style: none;
  cursor: pointer;
  border-radius: var(--r-s);
}
.mehr > summary::-webkit-details-marker { display: none; }
.mehr > summary:hover { color: var(--text); }
.mehr-pfeil { transition: transform var(--dauer-1) var(--ease); }
.mehr[open] > summary .mehr-pfeil, .quelle-wortlaut[open] > summary .mehr-pfeil { transform: rotate(180deg); }
.mehr-inhalt { display: grid; gap: var(--a-2); margin-top: var(--a-2); font-size: var(--gr-3); color: var(--text-2); }
.mehr-regel, .mehr-beleg { font-size: var(--gr-2); color: var(--text-2); }
.mehr-knoepfe { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

/* Stopp: nicht einklappbar, Symbol UND Wort, 4-px-Streifen, nie Markenfarbe */
.w-stopp {
  padding: var(--a-4) var(--a-5);
  border: 1px solid var(--stopp-linie);
  border-left: 4px solid var(--stopp);
  border-radius: var(--r-xl);
  background: var(--stopp-flaeche);
}
.stopp-kopf { display: flex; align-items: flex-start; gap: var(--a-3); }
.stopp-text { min-width: 0; flex: 1; }
.w-stopp .warn-symbol { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--stopp); color: #FFFFFF; }
.w-stopp .warn-stufe { display: block; font-size: var(--gr-1); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--stopp); }
.w-stopp .warn-titel { font-size: var(--gr-5); font-weight: 700; line-height: 1.25; color: var(--stopp-tinte); }
.stopp-statt { margin-top: var(--a-2); font-size: var(--gr-4); color: var(--text); }
.w-stopp .mehr-inhalt { color: var(--text-2); }

/* Achtung und Hinweis: eine Zeile */
.w-zeile { border-radius: var(--r-l); border: 1px solid; }
.blk-stufe-caution.w-zeile { background: var(--achtung-flaeche); border-color: var(--achtung-linie); color: var(--achtung-tinte); }
.blk-stufe-info.w-zeile { background: var(--hinweis-flaeche); border-color: var(--hinweis-linie); color: var(--hinweis-tinte); }
.warn-zeile {
  display: flex;
  align-items: center;
  gap: var(--a-3);
  min-height: 44px;
  padding: 10px 14px;
  list-style: none;
  cursor: pointer;
  border-radius: var(--r-l);
}
div.warn-zeile { cursor: default; }
.warn-zeile::-webkit-details-marker { display: none; }
.w-zeile .warn-symbol { flex: none; display: grid; place-items: center; }
.warn-zeile-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.w-zeile .warn-titel { font-size: var(--gr-3); font-weight: var(--gewicht-fett); line-height: 1.35; }
.warn-kurz { font-size: var(--gr-3); font-weight: var(--gewicht-normal); color: var(--text); }
.warn-mehr { flex: none; margin-left: auto; font-size: var(--gr-3); font-weight: var(--gewicht-fett); color: var(--text-2); }
.w-zeile .mehr-inhalt { margin: 0; padding: 0 14px 12px 44px; color: var(--text); }

/* Fragebaum (14.3.6) */
.baum { padding: var(--a-5); }
.baum-intro { margin-bottom: var(--a-3); font-size: var(--gr-3); color: var(--text-2); }
.baum-chips { display: flex; flex-wrap: wrap; gap: var(--a-2); margin-bottom: var(--a-4); }
.baum-chips:empty { display: none; }
.antwort-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 4px 4px 12px;
  border-radius: var(--r-voll);
  background: var(--karte-2);
  font-size: var(--gr-3);
}
.antwort-chip-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Richtung der gewählten Antwort (14.10.5): Punkt grün (gut) bzw. gelb (schlecht), offen ohne. */
.antwort-chip-punkt { flex: none; width: 9px; height: 9px; margin-right: 2px; border-radius: 50%; }
.antwort-chip.ist-gut { background: var(--ampel-gruen-flaeche); }
.antwort-chip.ist-gut .antwort-chip-punkt { background: var(--ampel-gruen); }
.antwort-chip.ist-schlecht { background: var(--ampel-gelb-flaeche); }
.antwort-chip.ist-schlecht .antwort-chip-punkt { background: var(--ampel-gelb); }
.antwort-chip-text strong { font-weight: var(--gewicht-fett); }
.antwort-chip-aendern {
  flex: none;
  min-height: 32px;
  padding: 4px 10px;
  border: 0;
  border-radius: var(--r-voll);
  background: transparent;
  color: var(--marke-text);
  font-size: var(--gr-2);
  font-weight: var(--gewicht-fett);
}
.antwort-chip-aendern:hover { background: var(--karte); }
.baum-frage { margin-bottom: var(--a-4); font-size: var(--gr-5); font-weight: var(--gewicht-fett); line-height: 1.3; letter-spacing: -.005em; }
.baum-antworten { display: flex; flex-wrap: wrap; gap: var(--a-2); }
.baum-antwort {
  min-height: 48px;
  padding: 10px 20px;
  border: 1.5px solid var(--linie-stark);
  border-radius: var(--r-voll);
  background: var(--karte);
  color: var(--text);
  font-size: var(--gr-4);
  font-weight: var(--gewicht-fett);
  transition: border-color var(--dauer-1) var(--ease), color var(--dauer-1) var(--ease), background-color var(--dauer-1) var(--ease);
}
.baum-antwort:hover { border-color: var(--marke-knopf); color: var(--marke-text); }
.baum-antwort.ist-leise { border-color: var(--linie); color: var(--text-2); font-weight: var(--gewicht-mittel); }
.baum-frei { display: flex; gap: var(--a-2); margin-top: var(--a-3); max-width: 420px; }
.baum-feld {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 8px 16px;
  border: 1px solid var(--linie-feld);
  border-radius: var(--r-voll);
  background: var(--karte);
  font-size: 16px;
}
.baum-feld:focus { outline: none; border-color: var(--marke-fokus); box-shadow: 0 0 0 3px var(--marke-flaeche-2); }
.baum-frei-senden { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--karte-2); color: var(--text); }
.baum-frei-senden:hover { background: var(--marke-flaeche); color: var(--marke-text); }
/* Eigene Antwort (Vincent 09.10.): leiser Chip unter den Antworten, klappt das Feld auf.
   Auch „Etwas anderes …“ an der Geräte-Karte. */
.baum-anders {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  margin-top: var(--a-3);
  padding: 6px 14px;
  border: 1px solid var(--linie);
  border-radius: var(--r-voll);
  background: transparent;
  color: var(--text-2);
  font-size: var(--gr-3);
  font-weight: var(--gewicht-mittel);
  transition: border-color var(--dauer-1) var(--ease), color var(--dauer-1) var(--ease);
}
.baum-anders:hover { border-color: var(--marke-knopf); color: var(--marke-text); }
.baum-antworten .baum-anders { margin-top: 0; min-height: 48px; padding: 10px 18px; }
.baum-punkte { display: flex; justify-content: flex-end; gap: 6px; margin-top: var(--a-4); }
.baum-punkte:empty { display: none; }
.baum-punkte i { display: block; width: 6px; height: 6px; border-radius: 3px; background: var(--linie-stark); }
.baum-punkte i.ist-jetzt { background: var(--marke-knopf); }
.baum-meldung { margin-top: var(--a-2); font-size: var(--gr-3); color: var(--text-2); }
.baum-meldung:empty { display: none; }

/* Lösungen 1 · 2 · 3 (14.3.7) */
.loesungen { display: flex; flex-direction: column; gap: var(--a-2); }
.loesungen-liste { display: flex; flex-direction: column; gap: var(--a-2); }
.loesungen-liste[hidden] { display: none; }
/* „Prüft der Techniker vor Ort:“ – die Lösungen sind Arbeit für den Techniker. */
.loesungen-kicker { margin: var(--a-1) 0 0; font-size: var(--gr-3); font-weight: var(--gewicht-fett); color: var(--text-2); }
/* Leise Zeile „Lösungen schon jetzt ansehen (3)“ bzw. „Lösungen von vorhin (3)“ */
.loesungen-auf {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  min-height: 40px;
  padding: 6px 2px;
  border: 0;
  background: transparent;
  color: var(--text-2);
  font-size: var(--gr-3);
  font-weight: var(--gewicht-fett);
}
.loesungen-auf[hidden] { display: none; }
.loesungen-auf:hover { color: var(--text); }
.loesungen-auf.ist-telefon { color: var(--ampel-gruen-tinte); }
.loesungen-auf .telefon-ikon { width: 22px; height: 22px; }
.loesungen-auf-pfeil { transition: transform var(--dauer-1) var(--ease); }
.loesungen-auf[aria-expanded="true"] .loesungen-auf-pfeil { transform: rotate(180deg); }
.loesung {
  overflow: hidden;
  border: 1px solid var(--linie-fein);
  border-radius: var(--r-xl);
  background: var(--karte);
  box-shadow: var(--schatten-1);
}
.loesung-kopf {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--a-3);
  width: 100%;
  padding: var(--a-4) var(--a-5);
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
}
.loesung-kopf-text { display: flex; flex-direction: column; min-width: 0; }
.loesung-nr { margin-bottom: 2px; font-size: var(--gr-1); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--marke-text); }
.loesung-titel { display: flex; align-items: center; gap: 6px; font-size: var(--gr-4); font-weight: var(--gewicht-fett); line-height: 1.3; }
.loesung.ist-offen .loesung-titel { font-size: var(--gr-5); }
.ohne-quelle-ikon { display: inline-flex; color: var(--achtung); }
.loesung-kopf-rechts { display: flex; align-items: center; gap: var(--a-3); color: var(--text-3); }
.loesung-zahl { font-size: var(--gr-2); color: var(--text-2); white-space: nowrap; }
.loesung-pfeil { transition: transform var(--dauer-1) var(--ease); }
.loesung.ist-offen .loesung-pfeil { transform: rotate(180deg); }
.loesung-koerper { padding: 0 var(--a-5) var(--a-5); }
.loesung-wie { font-size: var(--gr-4); color: var(--text); }
.loesung-warum { margin-top: var(--a-2); font-size: var(--gr-3); color: var(--text-2); }
.loesung-fuss { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--a-3); margin-top: var(--a-4); }
.evidenz { display: inline-flex; align-items: center; gap: 8px; font-size: var(--gr-2); color: var(--text-2); white-space: nowrap; }
.evidenz-balken { display: inline-flex; gap: 2px; }
.evidenz-balken i { display: block; width: 5px; height: 12px; border-radius: 2px; background: var(--linie); }
.evidenz-balken i.ist-an { background: var(--marke-balken); }
.weiter-knopf {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 40px;
  padding: 8px 14px;
  border: 0;
  border-radius: var(--r-voll);
  background: var(--marke-flaeche);
  color: var(--marke-text);
  font-size: var(--gr-3);
  font-weight: var(--gewicht-fett);
}
.weiter-knopf:hover { background: var(--marke-100); }
/* „Hat geklappt“ (SPEC 14.9, A2): leise neben „Klappt nicht? …“, wird nach dem Klick
   zu „Notiert – zählt in der Monatsauswertung“. */
.loesung-knoepfe { display: flex; align-items: center; flex-wrap: wrap; gap: var(--a-2); margin-left: auto; }
/* Eine Statuszeile darf den Knopf nie zusammendrücken („Hat / geklappt“): Knopf ohne Umbruch, Status darunter. */
.geklappt { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-width: 0; }
.geklappt-knopf {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  min-height: 40px;
  padding: 8px 14px 8px 12px;
  border: 1px solid var(--linie);
  border-radius: var(--r-voll);
  background: var(--karte);
  color: var(--text-2);
  font-size: var(--gr-3);
  font-weight: var(--gewicht-fett);
}
.geklappt-knopf:hover:not(:disabled) { border-color: var(--gut-linie); background: var(--gut-flaeche); color: var(--gut-tinte); }
/* Auf der grünen Karte der Hauptknopf (14.10.5). */
.geklappt-knopf.ist-haupt {
  min-height: 44px;
  padding: 10px 20px 10px 16px;
  border-color: var(--ampel-gruen);
  background: var(--ampel-gruen);
  color: #FFFFFF;
  font-size: var(--gr-4);
}
.geklappt-knopf.ist-haupt:hover:not(:disabled) { border-color: var(--ampel-gruen-knopf-hover); background: var(--ampel-gruen-knopf-hover); color: #FFFFFF; }

/* Grüne Karte „Am Telefon lösbar“ (SPEC 14.10.5): grün getönt, offen, der Satz als Zitat. */
.loesung.ist-telefon { border-color: var(--ampel-gruen-rand); background: var(--ampel-gruen-karte); box-shadow: inset 4px 0 0 var(--ampel-gruen); }
.telefon-nr { font-weight: var(--gewicht-fett); }
.loesungen-gruen + .loesungen-auf { margin-top: var(--a-2); }
.telefon-marke { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 4px; color: var(--ampel-gruen-tinte); letter-spacing: .04em; }
.telefon-ikon { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ampel-gruen); color: #FFFFFF; }
.ist-telefon .loesung-pfeil { color: var(--ampel-gruen-tinte); }
.telefon-sagen { font-size: var(--gr-2); font-weight: var(--gewicht-fett); color: var(--ampel-gruen-tinte); }
.telefon-satz {
  margin: 6px 0 0;
  padding: 14px 18px;
  border: 1px solid var(--ampel-gruen-rand);
  border-radius: var(--r-l);
  background: var(--ampel-gruen-satz);
  color: var(--text);
  font-size: 19px;
  font-weight: var(--gewicht-mittel);
  line-height: 1.45;
  text-wrap: pretty;
}
.telefon-zeile { display: flex; align-items: center; flex-wrap: wrap; gap: var(--a-1) var(--a-3); margin-top: var(--a-2); }
.telefon-beleg { font-size: var(--gr-2); color: var(--text-2); }
.telefon-warum-knopf {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 32px;
  margin-left: auto;
  padding: 4px 6px;
  border: 0;
  border-radius: var(--r-s);
  background: transparent;
  color: var(--text-2);
  font-size: var(--gr-3);
  font-weight: var(--gewicht-fett);
}
.telefon-warum-knopf:hover { color: var(--text); }
.telefon-warum-knopf.ist-auf .mehr-pfeil { transform: rotate(180deg); }
.telefon-warum { margin-top: var(--a-2); padding-top: var(--a-2); border-top: 1px solid var(--ampel-gruen-linie); }
.telefon-warum .loesung-wie { font-size: var(--gr-3); }
.ist-telefon .loesung-fuss { justify-content: flex-start; }
.ist-telefon .loesung-knoepfe { margin-left: 0; }
.geklappt-knopf:disabled { opacity: .55; }
.geklappt-status { font-size: var(--gr-3); color: var(--text-2); }
.geklappt-status:empty { display: none; }
.geklappt-status.ist-notiert { display: inline-flex; align-items: center; gap: 6px; color: var(--gut-tinte); font-weight: var(--gewicht-fett); }

/* Bild ansehen */
.bild-zeile {
  display: inline-flex;
  align-items: center;
  gap: var(--a-3);
  padding: 8px 16px 8px 8px;
  border: 1px solid var(--linie);
  border-radius: var(--r-l);
  background: var(--karte);
  color: var(--text);
  font-size: var(--gr-3);
  font-weight: var(--gewicht-fett);
}
.bild-zeile:hover { border-color: var(--linie-stark); }
.blk-image { align-self: flex-start; max-width: 100%; }
.bild-vorschau { display: grid; place-items: center; width: 52px; height: 40px; flex: none; overflow: hidden; border-radius: 8px; background: var(--karte-2); color: var(--text-3); }
.bild-vorschau img { width: 100%; height: 100%; object-fit: cover; }
.bild-vorschau-skelett { width: 100%; height: 100%; border-radius: 0; }
.bild-inline { display: grid; gap: 6px; margin-top: var(--a-2); font-size: var(--gr-2); color: var(--text-2); }
.bild-inline img { border-radius: var(--r-m); border: 1px solid var(--linie); background: #FFFFFF; max-height: 420px; object-fit: contain; }
.bild-hinweis { padding: 16px; color: var(--text-2); font-size: var(--gr-2); }

/* Schritte */
.schritte { list-style: none; display: grid; gap: 10px; }
.schritte li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; font-size: var(--gr-3); }
.schritt-nr { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--karte-2); font-size: var(--gr-2); font-weight: var(--gewicht-fett); }
.blk-steps .knopf-leise-e { margin-top: var(--a-2); }

/* Übergabe */
.uebergabe-zeile { display: flex; align-items: center; flex-wrap: wrap; gap: var(--a-3) var(--a-4); }
.uebergabe-symbol { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--r-m); background: var(--karte-2); color: var(--text-2); }
.uebergabe-text { display: flex; flex-direction: column; flex: 1; min-width: 180px; }
.uebergabe-text strong { font-size: var(--gr-4); }
.uebergabe-text span { font-size: var(--gr-3); color: var(--text-2); }
.aktion-status { margin-top: var(--a-2); font-size: var(--gr-3); color: var(--text-2); }
.aktion-status:empty { display: none; }
.kopier-status { font-size: var(--gr-2); color: var(--gut-tinte); }

/* Aktionen */
.aktion-knoepfe { display: flex; flex-wrap: wrap; gap: var(--a-2); }
.aktion-knoepfe .knopf-e { white-space: normal; text-align: left; }
.aktion-bereiche { display: grid; gap: 8px; }
.aktion-bereich:empty, .aktion-ergebnis:empty { display: none; }
/* Leere Bereiche (noch keine Bestätigung, kein Formular) nehmen keinen Platz. */
.aktion-bereich:not(:has(.aktion-formular, .aktion-ergebnis:not(:empty))) { display: none; }
.aktion-bereiche:not(:has(.aktion-formular, .aktion-ergebnis:not(:empty))) { display: none; }
.aktion-hinweis { font-size: var(--gr-3); color: var(--text-2); }
.aktion-ok { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: var(--r-m); background: var(--gut-flaeche); color: var(--gut-tinte); font-size: var(--gr-3); }
.aktion-ok .ikon { margin-top: 3px; }
.aktion-fehler { padding: 10px 12px; border-radius: var(--r-m); background: var(--achtung-flaeche); color: var(--achtung-tinte); font-size: var(--gr-3); }
.aktion-formular { display: grid; gap: 8px; padding: 14px; border-radius: var(--r-l); background: var(--karte); border: 1px solid var(--linie); }
.aktion-formular .feld-label { margin: 4px 0 0; }
.aktion-formular-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }

/* Auswahl „Welche Frau Petersen?“ */
.auswahl-frage { margin-bottom: var(--a-4); font-size: var(--gr-5); font-weight: var(--gewicht-fett); }
.auswahl-knoepfe { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--a-3); }
.auswahl-knopf {
  display: flex;
  align-items: center;
  gap: var(--a-3);
  min-height: 72px;
  padding: var(--a-4);
  border: 1.5px solid var(--linie-stark);
  border-radius: var(--r-l);
  background: var(--karte);
  color: var(--text);
  text-align: left;
}
.auswahl-knopf:hover:not(:disabled) { border-color: var(--marke-knopf); }
.auswahl-knopf:disabled { cursor: default; opacity: .6; }
.auswahl-knopf.ist-gewaehlt { opacity: 1; border-color: var(--marke-knopf); box-shadow: 0 0 0 3px var(--marke-100); }
.auswahl-text { display: flex; flex-direction: column; min-width: 0; }
.auswahl-text strong { font-size: var(--gr-5); font-weight: var(--gewicht-fett); }
.auswahl-text span { font-size: var(--gr-3); color: var(--text-2); }
.ort-ikon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--marke-flaeche); color: var(--marke-text); }
.ort-ikon.neutral { background: var(--karte-2); color: var(--text-2); }
.auswahl-unten { margin-top: var(--a-3); text-align: right; }

/* Fußzeile jeder Antwort: Woher? + eine Quellenzeile */
.antwort-fuss { display: flex; align-items: center; gap: var(--a-2); min-width: 0; font-size: var(--gr-2); color: var(--text-3); }
.woher {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  min-height: 32px;
  padding: 5px 12px 5px 9px;
  border: 1px solid var(--linie);
  border-radius: var(--r-voll);
  background: var(--karte);
  color: var(--text-2);
  font-size: var(--gr-2);
  font-weight: var(--gewicht-fett);
}
.woher:hover { border-color: var(--linie-stark); color: var(--text); }
.quellenzeile {
  min-width: 0;
  padding: 4px 2px;
  border: 0;
  background: transparent;
  color: var(--text-3);
  font-size: var(--gr-2);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.quellenzeile:hover { color: var(--text); text-decoration: underline; }
.fuss-ohne-ki { color: var(--text-3); }
/* „Notiz fürs Ticket“ (SPEC 14.9, A1): leise, unter der letzten Antwort neben „Woher?“ und in der Akte. */
.notiz-knopf { flex: none; }
.notiz-symbol { display: inline-flex; }
.notiz-knopf.ist-kopiert, .notiz-knopf.ist-kopiert:hover:not(:disabled) { color: var(--gut-tinte); }
.antwort-fuss .notiz-knopf { min-height: 32px; padding: 5px 10px; }

/* ------------------------------------------- Prüfseite: volle Fassungen */
.antwort-kopfzeile { display: flex; flex-wrap: wrap; gap: 6px; }
.antwort-pillen { display: flex; flex-wrap: wrap; gap: 6px; }
.steckbrief-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.steckbrief-id { padding: 4px 8px; border-radius: var(--r-xs); background: var(--karte-2); border: 1px solid var(--linie); font-weight: var(--gewicht-fett); font-size: var(--gr-2); }
.steckbrief-name { font-size: var(--gr-4); font-weight: var(--gewicht-fett); }
.steckbrief-unter { font-size: var(--gr-2); color: var(--text-2); }
.blk-steckbrief .eigenschaften { margin-bottom: var(--a-3); }
.komponenten-liste { list-style: none; display: grid; gap: 8px; }
.komponente { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1px solid var(--linie-fein); }
.ticket-zeilen { list-style: none; display: grid; gap: 4px; font-size: var(--gr-2); }
.ticket-zeilen li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.ticket-symptom { flex: 1; min-width: 12ch; }
.blk-zwischentitel { font-size: var(--gr-2); font-weight: var(--gewicht-fett); margin: 12px 0 6px; }
.liste { padding-left: 1.1em; }
.blk-recurrence_alert.karte-e { background: var(--achtung-flaeche); border-color: var(--achtung-linie); }
.alarm-kopf { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.alarm-symbol { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: var(--r-s); background: var(--karte); border: 1px solid var(--achtung-linie); color: var(--achtung); }
.alarm-kennzahl { font-size: var(--gr-4); line-height: var(--zh-eng); }
.alarm-unter { font-size: var(--gr-2); color: var(--achtung-tinte); margin-top: 2px; }
.zeitleiste { list-style: none; position: relative; display: grid; padding-left: 22px; }
.zeitleiste::before { content: ""; position: absolute; left: 6px; top: 8px; bottom: 8px; border-left: 2px solid var(--achtung-linie); }
.zl-ticket { position: relative; padding: 6px 0 10px; }
.zl-ticket::before { content: ""; position: absolute; left: -22px; top: 10px; width: 14px; height: 14px; border-radius: 50%; background: var(--karte); border: 2px solid var(--text-3); }
.zl-ticket.ist-offen::before { border-color: var(--achtung); background: var(--achtung-flaeche); box-shadow: 0 0 0 3px var(--achtung-linie); }
.zl-kopf { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: var(--gr-2); }
.zl-datum { font-size: var(--gr-3); }
.zl-kanal { display: inline-flex; align-items: center; gap: 4px; color: var(--text-2); }
.zl-id { margin-left: auto; color: var(--text-2); font-size: 12px; }
.zl-symptom { margin-top: 2px; font-size: var(--gr-3); }
.zl-massnahmen { list-style: none; display: grid; gap: 6px; margin-top: 6px; }
.zl-massnahme { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 4px 8px; align-items: start; padding: 8px 10px; border-radius: var(--r-s); background: rgba(255, 255, 255, .7); border: 1px solid var(--linie-fein); font-size: var(--gr-2); }
.zl-massnahme > .ikon { margin-top: 3px; color: var(--text-3); }
.zl-massnahme .pille { grid-column: 2; justify-self: start; }
.zl-leer { margin-top: 4px; font-size: var(--gr-2); color: var(--text-3); }
.zl-rueckkehr { display: inline-flex; align-items: center; gap: 6px; justify-self: start; margin: 2px 0 6px -16px; padding: 3px 10px; border-radius: var(--r-voll); background: var(--karte); border: 1px solid var(--achtung-linie); color: var(--achtung-tinte); font-size: var(--gr-1); font-weight: var(--gewicht-fett); }
.alarm-hypothese { margin-top: 6px; padding: 10px 12px; border-radius: var(--r-s); background: rgba(255, 255, 255, .6); font-size: var(--gr-3); color: var(--achtung-tinte); }
.mehr-wiederholung .alarm-kopf { margin-bottom: var(--a-2); }
.mehr-wiederholung .alarm-symbol { display: none; }
.mehr-wiederholung .alarm-kennzahl { font-size: var(--gr-3); }
/* Quellenliste (Prüfseite) */
.blk-sources:not(.blk-versteckt) { padding: 12px 2px 0; border-top: 1px solid var(--linie); }
.quellen-kopf { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: var(--gr-1); font-weight: var(--gewicht-fett); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.quellen-anzahl { display: inline-flex; min-width: 18px; height: 18px; align-items: center; justify-content: center; padding: 0 5px; border-radius: var(--r-voll); background: var(--karte-2); letter-spacing: 0; }
.quellen-zeilen { list-style: none; display: grid; gap: 4px; font-size: var(--gr-2); color: var(--text-2); }
.quellen-zeile { display: flex; align-items: flex-start; gap: 8px; padding: 2px 4px; border-radius: var(--r-xs); }
.quellen-zeile > .ikon { margin-top: 3px; color: var(--text-3); }
.quellen-titel { color: var(--text); }
.quellen-seite, .quellen-link { padding: 0 2px; border: 0; background: transparent; color: var(--marke-text); font: inherit; font-weight: var(--gewicht-fett); text-decoration: underline; text-decoration-color: var(--marke-linie); text-underline-offset: 3px; }
.quellen-link { font-weight: var(--gewicht-normal); }
span.quellen-seite, span.quellen-link { color: var(--text); text-decoration: none; }
.ohne-quelle { font-size: var(--gr-2); color: var(--text-3); }

/* ------------------------------------------------------------ Blatt „Woher?“ */
.schleier { position: fixed; inset: 0; z-index: var(--z-overlay); background: var(--schleier); }
.blatt {
  position: fixed;
  z-index: var(--z-sheet);
  top: calc(var(--banner-h) + 12px);
  right: 12px;
  bottom: 12px;
  width: min(var(--blatt-b), calc(100vw - 24px));
  display: flex;
  flex-direction: column;
  border-radius: var(--r-xl);
  background: var(--karte);
  box-shadow: var(--schatten-3);
}
.blatt:focus { outline: none; }
.blatt-griff { display: none; }
.blatt-kopf { display: flex; align-items: center; gap: var(--a-2); padding: var(--a-5) var(--a-5) var(--a-3); }
.blatt-zurueck-platz:empty { display: none; }
.blatt-titel { flex: 1; min-width: 0; font: var(--gewicht-fett) var(--gr-6)/1.15 var(--schrift-serif); letter-spacing: -.01em; }
.blatt-zurueck { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 6px 10px 6px 4px; border: 0; border-radius: var(--r-voll); background: transparent; color: var(--marke-text); font-size: var(--gr-3); font-weight: var(--gewicht-fett); }
.blatt-zurueck:hover { background: var(--marke-flaeche); }
.blatt-zu { background: var(--karte-2); color: var(--text); }
.blatt-zu:hover { background: var(--linie-fein); }
.blatt-innen { flex: 1; min-height: 0; overflow: auto; padding: 0 var(--a-5) var(--a-5); overscroll-behavior: contain; }
.blatt-abschnitt { margin: var(--a-5) 0 var(--a-2); font-size: var(--gr-2); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
.blatt-abschnitt:first-child { margin-top: var(--a-2); }
.haken-liste { list-style: none; }
.haken-liste li { display: flex; align-items: center; gap: var(--a-2); padding: 5px 0; font-size: var(--gr-3); }
.haken-liste .ikon { flex: none; color: var(--gut); }
.regel-liste .ist-stopp .ikon { color: var(--stopp); }
.regel-liste .ist-achtung .ikon { color: var(--achtung); }
.quellen-reihen { list-style: none; display: grid; gap: var(--a-2); }
.quelle-reihe {
  display: flex;
  align-items: center;
  gap: var(--a-3);
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--linie-fein);
  border-radius: var(--r-l);
  background: var(--karte);
  color: var(--text);
  text-align: left;
}
.quelle-reihe:hover { border-color: var(--linie-stark); }
.quelle-reihe-dok { position: relative; }
.quelle-reihe-dok .quelle-reihe { padding-bottom: 32px; }
.quelle-reihe-text { display: flex; flex-direction: column; min-width: 0; }
.quelle-reihe-text strong { font-size: var(--gr-3); }
.quelle-reihe-text span { font-size: var(--gr-2); color: var(--text-2); }
.quelle-ikon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--karte-2); color: var(--text-2); }
.quelle-seiten { position: absolute; left: 62px; bottom: 10px; font-size: var(--gr-2); color: var(--text-2); }
.quelle-seite { position: relative; padding: 0 1px; border: 0; background: transparent; color: var(--marke-text); font: inherit; font-weight: var(--gewicht-fett); text-decoration: underline; text-decoration-color: var(--marke-linie); text-underline-offset: 3px; }
/* Größere Trefferfläche ohne Lücke vor dem Komma */
.quelle-seite::after { content: ""; position: absolute; inset: -8px -4px; }
.woher-ohne-ki { margin-top: var(--a-2); padding: 10px 12px; border-radius: var(--r-m); background: var(--karte-2); font-size: var(--gr-3); }
.woher-ohne-quelle { display: flex; align-items: center; gap: 8px; margin-top: var(--a-4); font-size: var(--gr-3); color: var(--achtung-tinte); }
.satz-db { display: flex; gap: var(--a-3); margin-top: var(--a-5); padding: var(--a-4); border-radius: var(--r-l); background: var(--karte-2); font-size: var(--gr-3); color: var(--text); }
.satz-db .ikon { flex: none; color: var(--text-2); margin-top: 1px; }

/* Quelle-Detail im Blatt */
.quelle { display: grid; gap: var(--a-3); }
.quelle-kicker { display: flex; align-items: center; gap: 6px; }
.quelle-titel { font: var(--gewicht-fett) var(--gr-5)/1.25 var(--schrift-serif); letter-spacing: -.005em; text-wrap: balance; }
.quelle-titel.mono { font-family: var(--schrift-mono); font-size: var(--gr-4); }
.quelle-unter { font-size: var(--gr-2); color: var(--text-2); margin-top: -6px; }
.quelle .eigenschaften { padding: 4px 0; border-top: 1px solid var(--linie-fein); border-bottom: 1px solid var(--linie-fein); }
.quelle-seitenwahl .segment > button { min-height: 32px; }
.quelle-seitenbild { display: grid; gap: 6px; }
.seitenbild { overflow: hidden; border-radius: var(--r-m); border: 1px solid var(--linie); background: #FFFFFF; box-shadow: var(--schatten-1); }
.seitenbild img { width: 100%; }
.seitenbild-fehlt { padding: 24px; text-align: center; }
.quelle-seitenbild figcaption { font-size: var(--gr-1); }
.quelle-abschnitt { display: grid; gap: 8px; padding-top: var(--a-3); border-top: 1px solid var(--linie-fein); }
.quelle-wortlaut > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: var(--gr-3); font-weight: var(--gewicht-fett); color: var(--text-2); list-style: none; cursor: pointer; }
.quelle-wortlaut > summary::-webkit-details-marker { display: none; }
.quelle-text { white-space: pre-line; font-size: var(--gr-2); line-height: var(--zh-weit); color: var(--text); }
.quelle-text mark { padding: 1px 2px; border-radius: 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.quelle-markiert-hinweis { display: flex; align-items: center; gap: 6px; font-size: var(--gr-1); color: var(--text-2); }
.quelle-abbildungen { list-style: none; display: grid; gap: 10px; font-size: var(--gr-2); }
.quelle-abbildungen li { display: grid; gap: 6px; justify-items: start; }
.quelle-abbildung-bild img { border-radius: var(--r-s); border: 1px solid var(--linie); }
.quelle-original a { display: inline-flex; align-items: center; gap: 6px; font-size: var(--gr-2); font-weight: var(--gewicht-fett); }
.quelle-zitate { list-style: none; display: grid; gap: 6px; }
.quelle-zitat { display: flex; align-items: flex-start; gap: 8px; width: 100%; padding: 10px 12px; border: 1px solid var(--linie); border-radius: var(--r-m); background: var(--karte); color: var(--text); font-size: var(--gr-2); text-align: left; }
.quelle-zitat .ikon { margin-top: 2px; color: var(--marke-text); }
.quelle-zitat:hover { border-color: var(--marke-linie); background: var(--marke-flaeche); }
.quelle-zitat-block { margin: 0; padding: 10px 14px; border-left: 3px solid var(--linie-stark); border-radius: 0 var(--r-s) var(--r-s) 0; background: var(--flaeche); font-size: var(--gr-3); }
.quelle-massnahmen { list-style: none; display: grid; gap: 8px; font-size: var(--gr-2); }
.quelle-massnahmen li { padding: 8px 10px; border-radius: var(--r-s); background: var(--flaeche); border: 1px solid var(--linie-fein); }
/* Bild im Blatt */
.bild-blatt { display: grid; gap: var(--a-3); margin-top: var(--a-2); font-size: var(--gr-3); }
.bild-rahmen { overflow: hidden; min-height: 120px; border-radius: var(--r-m); border: 1px solid var(--linie-fein); background: #FFFFFF; }
.bild-rahmen img { width: 100%; max-height: 60vh; object-fit: contain; }
.bild-beschriftung { margin-top: 0; }
.quelle-mehr { margin-top: var(--a-4); padding-top: var(--a-3); border-top: 1px solid var(--linie-fein); }
.bild-quelle-knopf { padding: 0; border: 0; background: transparent; color: var(--marke-text); font-size: var(--gr-2); text-align: left; text-decoration: underline; text-decoration-color: var(--marke-linie); text-underline-offset: 3px; }

/* Skelett-Größen */
.skelett-zeile { height: 14px; }
.skelett-titel { width: 70%; height: 28px; }
.skelett-block { height: 140px; border-radius: var(--r-m); }
.skelett-seite { height: 320px; border-radius: var(--r-m); }

/* ------------------------------------------- Rechte Zone: Wissen aufladen */
.bildschirm-innen { max-width: 820px; margin: 0 auto; padding: var(--a-5) 0 var(--a-7); }
.bildschirm-innen.ist-breit { max-width: none; padding-left: 2px; padding-right: 2px; }
.flaeche.ohne-links .bildschirm-innen.ist-breit { max-width: var(--inhalt-max); }
.zurueck-link { display: inline-flex; align-items: center; gap: 4px; margin-bottom: var(--a-4); padding: 6px 10px 6px 4px; border-radius: var(--r-voll); color: var(--text-2); font-size: var(--gr-3); font-weight: var(--gewicht-fett); text-decoration: none; }
.zurueck-link:hover { background: var(--karte-2); color: var(--text); }
.bildschirm { min-width: 0; }
.bildschirm-laden { display: grid; gap: 12px; max-width: var(--form-max); }
.platzhalter { max-width: var(--form-max); display: grid; gap: var(--a-3); justify-items: start; padding: var(--a-6) 0; }
.platzhalter p { color: var(--text-2); font-size: var(--gr-4); }
.platzhalter-symbol { display: grid; place-items: center; width: 52px; height: 52px; border-radius: var(--r-m); background: var(--karte-2); color: var(--text-2); }

/* ------------------------------------------------------- Toast, Dialog */
.toasts {
  position: fixed;
  left: 50%;
  /* Über der Eingabeleiste, damit eine Bestätigung nie „Senden“ verdeckt. */
  bottom: calc(104px + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-toast);
  display: grid;
  gap: 8px;
  justify-items: center;
  width: max-content;
  max-width: calc(100vw - 32px);
  transform: translateX(-50%);
  pointer-events: none;
}
.toast { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: var(--r-voll); background: var(--insel); color: var(--insel-text); box-shadow: var(--schatten-3); font-size: var(--gr-2); pointer-events: auto; }
.toast-gut .ikon { color: var(--gut-hell); }
.toast-achtung .ikon, .toast-hinweis .ikon { color: var(--achtung-hell); }
.toast-fehler .ikon { color: var(--stopp-hell); }
.dialog-huelle { position: fixed; inset: 0; z-index: var(--z-toast); display: flex; align-items: center; justify-content: center; padding: var(--rand); }
.dialog-schleier { position: absolute; inset: 0; background: var(--schleier); }
.dialog { position: relative; width: 100%; max-width: 420px; padding: var(--a-5); border-radius: var(--r-l); background: var(--karte); box-shadow: var(--schatten-3); }
.dialog-text { margin-bottom: var(--a-4); font-size: var(--gr-4); line-height: var(--zh); }
.dialog-knoepfe { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }

/* Titel, auf den nur programmatisch fokussiert wird (Screenreader-Einstieg) */
[tabindex="-1"]:focus { outline: none; }

/* =====================================================================
   Breiten (SPEC 14.3.4)
   ===================================================================== */

/* < 1024: eine Spalte – Kopfkarte (Akte zu: Name + Adresse einzeilig) →
   Wichtig → Chat → Eingabe. Blätter von unten. */
@media (max-width: 1023.98px) {
  .flaeche { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: var(--a-3); padding-bottom: calc(var(--a-3) + env(safe-area-inset-bottom, 0px)); }
  .flaeche.ohne-links { grid-template-rows: minmax(0, 1fr); }
  .links { overflow: visible; }
  .akte { padding: var(--a-3) var(--a-4); border-radius: var(--r-l); }
  .akte .akte-kopf { align-items: center; }
  .akte .akte-name { font-size: var(--gr-5); }
  .akte .akte-adresse { margin-top: 2px; font-size: var(--gr-3); color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .akte .akte-adresse > span { display: inline; }
  .akte .akte-adresse .ort { font-size: var(--gr-3); }
  .akte .akte-adresse .str + .ort::before { content: ", "; }
  .akte .akte-adresse .plz { display: none; }
  .akte:not(.auf) .akte-mehr-wrap, .akte:not(.auf) .akte-id { display: none; }
  /* Die Verlauf-Zeilen ragen für ihre Hover-Fläche 8 px links und rechts über
     (margin: 0 -8px). In diesem eigenen Scroll-Bereich gab das rechts eine
     waagerechte Scrollleiste – 8 px Innenabstand, um 8 px nach außen versetzt,
     fangen den Überstand auf, ohne dass sich der Inhalt verschiebt. */
  .akte.auf .akte-mehr-wrap { max-height: 55dvh; overflow: auto; overscroll-behavior: contain; margin-inline: -8px; padding-inline: 8px; }
  .akte .akte-teil { margin-top: var(--a-3); }
  .akte-auf-knopf { display: grid; }
  .knopf-e.naechster-kunde { min-height: 44px; }
  .suche { padding: var(--a-3) var(--a-4); border-radius: var(--r-l); }
  .suche-titel { display: none; }
  .suchfeld { min-height: 48px; padding: 0 var(--a-3); gap: 6px; }
  .suchfeld-eingabe { font-size: 16px; }
  .zone-kopf { margin-bottom: var(--a-2); }
  .leer-chat { padding-top: 6vh; }
  .leer-titel { font-size: var(--gr-6); }
  .blase { max-width: 88%; }
  .bildschirm-innen { padding-top: var(--a-3); }
  .blatt { top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: var(--sheet-max); border-radius: var(--r-xl) var(--r-xl) 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: var(--schatten-sheet); }
  .blatt-griff { display: block; width: 40px; height: 5px; margin: 8px auto 0; border-radius: 3px; background: var(--linie-stark); }
  .blatt-kopf { padding: var(--a-3) var(--a-4) var(--a-2); touch-action: none; }
  .blatt-innen { padding: 0 var(--a-4) var(--a-5); }
}
@supports not (height: 1dvh) {
  @media (max-width: 1023.98px) {
    .akte.auf .akte-mehr-wrap { max-height: 55vh; }
  }
}

/* < 640: Kopfzeile kompakt (Logo-Symbol, Segment kurz, Initialen), Ziele ≥ 44 px,
   Fragebaum-Antworten füllen die Zeile, Kacheln einspaltig mit Symbol links. */
@media (max-width: 639.98px) {
  .kopf-innen { grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--a-2); }
  .modus-segment { justify-self: center; }
  .modus-segment button { padding: 8px 12px; font-size: var(--gr-2); gap: 6px; }
  .seg-lang { display: none; }
  .seg-kurz { display: inline; }
  .logo-kopf { width: 34px; height: 34px; max-width: 34px; }
  /* Logo-Symbol: vom Wortbild nur das linke Quadrat (Start-Logo: das Zeichen) */
  .logo-kopf img { width: 34px; height: 34px; max-width: none; object-fit: cover; object-position: left center; border-radius: 9px; }
  .marke-name { display: none; }
  .avatar-knopf { width: 44px; height: 44px; }
  .karte-e, .baum { padding: var(--a-4); }
  .baum-antworten .baum-antwort { flex: 1 1 auto; }
  .loesung-kopf { padding: var(--a-3) var(--a-4); }
  .loesung-koerper { padding: 0 var(--a-4) var(--a-4); }
  .w-stopp { padding: var(--a-3) var(--a-4); }
  .w-zeile .mehr-inhalt { padding-left: 14px; }
  .einstieg-titel, .leer-titel { font-size: var(--gr-6); }
  .kacheln, .kacheln-2, .kacheln-1 { grid-template-columns: minmax(0, 1fr); }
  .kachel { flex-direction: row; justify-content: flex-start; min-height: 0; padding: var(--a-4); text-align: left; }
  .kachel-ikon { width: 48px; height: 48px; border-radius: 14px; }
  .kachel-text { align-items: flex-start; }
  .auswahl-knoepfe { grid-template-columns: minmax(0, 1fr); }
  .knopf-leise-e { min-height: 44px; }
  .verlauf-zeile { grid-template-columns: 56px minmax(0, 1fr) auto; }
  .quelle-seite::after { inset: -12px -6px; }
  .antwort-chip-aendern { min-height: 36px; }
  .baum-anders { min-height: 44px; }
  .baum-antworten .baum-anders { flex: 1 1 auto; justify-content: center; }
  /* Ampel: schmalerer Rand-Abstand, Satz etwas kleiner, Hauptknopf über die Breite */
  .antwort[data-lage] { padding-left: 10px; }
  .telefon-satz { padding: 12px 14px; font-size: var(--gr-4); }
  .ist-telefon .loesung-knoepfe { width: 100%; }
  .geklappt-knopf.ist-haupt { flex: 1 1 auto; justify-content: center; }
  .ist-telefon .geklappt { flex: 1 1 auto; }
}