/* =====================================================================
   stil.css — Lichtenfels-CI für die öffentliche AV-Meldeseite.
   Farben und Quadratband entsprechen dem Lichtenfels-Skin aus TeacherOS
   (static/skins.css), damit die Seite als Schulseite erkennbar ist.

   Grundsatz: groß, ruhig, hoher Kontrast. Die Seite wird am Handy
   zwischen zwei Stunden bedient — Tippziele sind nie kleiner als 44 px.
   ===================================================================== */

:root {
  /* Quadratband der Schule */
  --lf-mauve: #b488a6; --lf-rose: #af7875; --lf-slate: #7c84a4;
  --lf-blue:  #9ab6d9; --lf-grey: #96a4a9; --lf-gold:  #eccd84;
  /* Akzente */
  --blau:   #40679f;  --blau-hell: #5b8ac7;  --violett: #883e71;
  --gruen:  #2f6d4f;  --gold:      #96660b;  --rot:     #a4434e;
  /* Flächen */
  --grund:  #f6f7f9;  --karte: #ffffff;  --karte2: #eef1f5;
  --text:   #1e242e;  --dim:   #5c6675;  --linie:  #d9dee6;
  --schatten: 0 1px 3px rgba(30,36,46,.07), 0 6px 20px rgba(30,36,46,.05);
  --radius: 14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Corbel, "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  color: var(--text);
  background: var(--grund);
  -webkit-text-size-adjust: 100%;
}

/* ------------------------------------------------------- Quadratband */
.band {
  height: 7px;
  background: linear-gradient(90deg,
    var(--lf-mauve) 0 16.667%, var(--lf-rose) 0 33.333%, var(--lf-slate) 0 50%,
    var(--lf-blue) 0 66.667%, var(--lf-grey) 0 83.333%, var(--lf-gold) 0 100%);
}

/* ------------------------------------------------------------- Kopf */
header.kopf {
  background: var(--karte);
  border-bottom: 1px solid var(--linie);
  /* Bleibt oben stehen, deshalb bewusst schmal: er begleitet die ganze
     Seite und darf nicht zu viel verdecken. Das Polster oben hält ihn
     frei von Statusleiste und Dynamic Island, falls die Seite je randlos
     läuft. */
  position: sticky; top: 0; z-index: 30;
  padding: 9px 15px;
  padding-top: calc(9px + env(safe-area-inset-top, 0px));
}
.kopf-innen {
  max-width: 720px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px;
}
.kopf img { height: 42px; width: auto; flex: none; }
.kopf h1 {
  margin: 0; font-size: 17.5px; font-weight: 700; letter-spacing: -.2px;
  color: var(--violett); line-height: 1.2;
}
.kopf p {
  margin: 1px 0 0; font-size: 12.5px; color: var(--dim); line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ------------------------------------------------------------ Rumpf */
main { max-width: 720px; margin: 0 auto; padding: 18px 14px 60px; }

.karte {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 18px;
  margin-bottom: 16px;
}
.karte.aus { display: none; }

/* Nummerierte Abschnitte — der Ablauf ist auf einen Blick zu sehen */
.schritt { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.nr {
  flex: none;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--blau); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; line-height: 1;
}
.schritt h2 { margin: 3px 0 0; font-size: 18px; font-weight: 700; }
.schritt .unter { margin: 3px 0 0; font-size: 14px; color: var(--dim); }
.optional {
  font-size: 12px; font-weight: 600; color: var(--dim);
  background: var(--karte2); border-radius: 20px; padding: 2px 9px;
  margin-left: 7px; vertical-align: 2px; white-space: nowrap;
}

/* ---------------------------------------------------- Auswahlkacheln */
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 9px; }
.kachel {
  display: flex; align-items: center; gap: 10px;
  min-height: 58px; padding: 10px 12px;
  background: var(--karte); color: var(--text);
  border: 2px solid var(--linie); border-radius: 11px;
  cursor: pointer; text-align: left;
  font: inherit; font-size: 16px;
  transition: border-color .12s, background .12s;
}
.kachel:hover { border-color: var(--lf-blue); background: var(--karte2); }
.kachel .em { font-size: 22px; line-height: 1; flex: none; }
.kachel b { font-weight: 600; display: block; }
.kachel small { display: block; font-size: 12px; color: var(--dim); }
.kachel.an {
  border-color: var(--blau);
  background: color-mix(in srgb, var(--blau) 8%, #fff);
}
.kachel.an small { color: var(--blau); }

/* Symptome und Checkliste — volle Breite, ein Fingertipp */
.liste { display: flex; flex-direction: column; gap: 7px; }
.zeile {
  display: flex; align-items: center; gap: 11px;
  min-height: 48px; padding: 9px 13px;
  background: var(--karte); border: 2px solid var(--linie); border-radius: 10px;
  cursor: pointer; font: inherit; font-size: 15.5px; text-align: left;
  transition: border-color .12s, background .12s;
}
.zeile:hover { border-color: var(--lf-blue); background: var(--karte2); }
.haken {
  flex: none; width: 22px; height: 22px; border-radius: 5px;
  border: 2px solid var(--linie); background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; color: #fff; line-height: 1;
}
.zeile.an { border-color: var(--blau); background: color-mix(in srgb, var(--blau) 7%, #fff); }
.zeile.an .haken { background: var(--blau); border-color: var(--blau); }
.zeile.an .haken::after { content: "✓"; font-weight: 700; }

.gruppe { margin-bottom: 16px; }
.gruppe > .titel {
  font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--dim); margin-bottom: 7px;
}

/* Dringlichkeit */
.prios { display: flex; flex-direction: column; gap: 7px; }
.prio.an[data-p="kritisch"] { border-color: var(--rot); background: color-mix(in srgb, var(--rot) 7%, #fff); }
.prio.an[data-p="hoch"]     { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 8%, #fff); }

/* ----------------------------------------------------------- Felder */
label.feld { display: block; font-weight: 600; font-size: 15px; margin-bottom: 6px; }
input[type=text], textarea, select {
  width: 100%; font: inherit; font-size: 16px;   /* 16px verhindert iOS-Zoom */
  padding: 12px 13px;
  border: 2px solid var(--linie); border-radius: 10px;
  background: #fff; color: var(--text);
}
input[type=text]:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--blau-hell);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--blau-hell) 22%, transparent);
}
textarea { min-height: 92px; resize: vertical; }
.hinweis { font-size: 13px; color: var(--dim); margin-top: 6px; }
.fehler { color: var(--rot); font-size: 14px; font-weight: 600; margin-top: 7px; }

/* Honigtopf gegen automatische Einsendungen — für Menschen unsichtbar */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------------ Fotos */
.foto-knopf {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 68px; padding: 14px;
  border: 2px dashed var(--linie); border-radius: 11px;
  background: var(--karte2); color: var(--blau);
  font: inherit; font-size: 16px; font-weight: 600; cursor: pointer;
}
.foto-knopf:hover { border-color: var(--blau-hell); }
.fotos { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 11px; }
.foto {
  position: relative; width: 84px; height: 84px; border-radius: 9px;
  overflow: hidden; border: 1px solid var(--linie); background: var(--karte2);
}
.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto .weg {
  position: absolute; top: 3px; right: 3px;
  width: 24px; height: 24px; border-radius: 50%;
  border: none; background: rgba(0,0,0,.62); color: #fff;
  font-size: 14px; line-height: 1; cursor: pointer;
}
.foto .dateiname {
  position: absolute; inset: auto 0 0 0; padding: 3px 5px;
  background: rgba(0,0,0,.6); color: #fff; font-size: 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ----------------------------------------------------------- Knöpfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 54px; padding: 14px 26px; width: 100%;
  border: none; border-radius: 11px;
  background: var(--blau); color: #fff;
  font: inherit; font-size: 18px; font-weight: 700; cursor: pointer;
  transition: background .12s;
}
.knopf:hover { background: var(--blau-hell); }
.knopf:disabled { opacity: .55; cursor: default; }
.knopf.leise {
  background: var(--karte); color: var(--blau);
  border: 2px solid var(--linie); font-size: 16px; min-height: 48px;
}
.knopf.leise:hover { background: var(--karte2); border-color: var(--blau-hell); }

/* ------------------------------------------------------ Bestätigung */
.fertig { text-align: center; padding: 30px 20px; }
.fertig .zeichen { font-size: 56px; line-height: 1; margin-bottom: 12px; }
.fertig h2 { margin: 0 0 8px; font-size: 24px; color: var(--gruen); }
.nummer {
  display: inline-block; margin: 14px 0;
  font-size: 30px; font-weight: 700; letter-spacing: 1px;
  color: var(--violett);
  background: var(--karte2); border-radius: 11px; padding: 10px 22px;
}

/* --------------------------------------------------------- Statusseite */
.statuszeile { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; margin-bottom: 6px; }
.marke {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 20px;
  font-size: 15px; font-weight: 700;
}
.marke.blau  { background: color-mix(in srgb, var(--blau) 12%, #fff);  color: var(--blau); }
.marke.gold  { background: color-mix(in srgb, var(--gold) 14%, #fff);  color: var(--gold); }
.marke.gruen { background: color-mix(in srgb, var(--gruen) 12%, #fff); color: var(--gruen); }
.marke.grau  { background: var(--karte2); color: var(--dim); }

.daten { display: grid; grid-template-columns: max-content 1fr; gap: 7px 16px; font-size: 15px; }
.daten dt { color: var(--dim); }
.daten dd { margin: 0; }

.schiene { list-style: none; margin: 0; padding: 0; }
.schiene li {
  position: relative; padding: 0 0 18px 26px;
  border-left: 2px solid var(--linie); margin-left: 6px;
}
.schiene li:last-child { border-left-color: transparent; padding-bottom: 0; }
.schiene li::before {
  content: ""; position: absolute; left: -7px; top: 4px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--lf-blue); border: 2px solid var(--karte);
}
.schiene li.jetzt::before { background: var(--blau); }
.schiene .wann { font-size: 12.5px; color: var(--dim); }

footer {
  max-width: 720px; margin: 0 auto; padding: 24px 14px 40px;
  font-size: 13px; color: var(--dim); text-align: center;
}
footer a { color: var(--blau); }

/* ----------------------------------------------------------- schmal */
@media (max-width: 480px) {
  body { font-size: 16px; }
  .kopf h1 { font-size: 16px; }
  .kopf img { height: 38px; }
  .kopf p { font-size: 11.5px; }
  main { padding: 14px 11px 50px; }
  .karte { padding: 15px; border-radius: 12px; }
  .kacheln { grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); }
}

/* Manche Kolleg:innen haben das Handy auf Dunkelmodus. Die Seite bleibt
   bewusst hell — Schul-CI, gleiches Bild für alle. Nur das Systemfeld
   für Formularelemente wird festgehalten, sonst werden Eingaben unlesbar. */
:root { color-scheme: light; }

/* =====================================================================
   Ergänzungen: Raumerkennung, Zuständigkeitshinweis, Raumplan, Rückfrage
   ===================================================================== */

/* Lange Gerätenamen dürfen die Kachel nicht sprengen ("Dokumentenkamera") */
.kachel > span:last-child { min-width: 0; }
.kachel b { overflow-wrap: break-word; }   /* nie mitten im Wort trennen */

/* Live-Rückmeldung unter dem Raumfeld: bestätigt, dass die Eingabe
   verstanden wurde — und blockiert nie, wenn der Raum unbekannt ist. */
.raum-echo { font-size: 14.5px; margin-top: 8px; min-height: 1px; }
.raum-echo.treffer {
  color: var(--gruen);
  background: color-mix(in srgb, var(--gruen) 8%, #fff);
  border-radius: 9px; padding: 9px 12px;
}
.raum-echo.treffer::before { content: "✓ "; font-weight: 700; }
.raum-echo.offen { color: var(--dim); padding: 3px 2px; }

/* Zuständigkeitshinweis: das AV-Kustodiat ist NICHT die IT */
.merker {
  margin-top: 14px; padding: 12px 14px;
  border-left: 4px solid var(--lf-gold);
  background: color-mix(in srgb, var(--lf-gold) 16%, #fff);
  border-radius: 0 9px 9px 0;
  font-size: 14.5px; line-height: 1.45;
}
.merker b { display: block; margin-bottom: 2px; }

/* Rückfrage, die nur bei bestimmten Symptomen erscheint (Blinkcode) */
.nachfrage {
  margin: -2px 0 7px; padding: 11px 13px;
  background: var(--karte2); border-radius: 0 0 10px 10px;
}
.nachfrage.aus { display: none; }
.nachfrage input { background: #fff; }

/* -------------------------------------------------------- Raumplan */
.overlay {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(20, 26, 36, .62);
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0;
}
.overlay[hidden] { display: none; }
.overlay-innen {
  background: var(--karte);
  width: 100%; max-width: 860px;
  /* FESTE Höhe, nicht max-height: sonst richtet sich der Dialog nach dem
     Bild und das Bild nach dem Dialog — beide schaukeln sich klein. */
  height: 92dvh;
  border-radius: 16px 16px 0 0;
  display: flex; flex-direction: column; overflow: hidden;
}
.overlay-innen header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid var(--linie);
  font-size: 17px;
}

@media (min-width: 700px) {
  .overlay { align-items: center; padding: 24px; }
  .overlay-innen { border-radius: 16px; height: 86dvh; }
}

/* =====================================================================
   Piktogramme, Sofort-Hinweise und Raumauswahl im Plan
   ===================================================================== */

/* Schilder-Piktogramme: einfarbig, nehmen die Textfarbe an, damit sie
   den Zustand der Zeile mitfärben (grau -> blau, wenn ausgewählt). */
.pik {
  flex: none; width: 28px; height: 28px;
  fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
  color: var(--dim);
}
.pik.gross { width: 31px; height: 31px; }
.zeile .pik  { color: var(--lf-slate); }
.zeile.an .pik { color: var(--blau); }
.kachel .pik { color: var(--lf-slate); }
.kachel.an .pik { color: var(--blau); }
.zeile .txt { flex: 1; min-width: 0; }
.gruppe > .titel { display: flex; align-items: center; gap: 7px; }
.gruppe > .titel .pik { width: 19px; height: 19px; }

/* Sofort-Hilfe, die bei einem Symptom eingeblendet wird und den Fall
   oft schon erledigt (Batterien im Sekretariat, Fernbedienung versperrt). */
.sofort {
  display: flex; gap: 10px; align-items: flex-start;
  margin: -2px 0 7px; padding: 11px 13px;
  background: color-mix(in srgb, var(--lf-gold) 17%, #fff);
  border-radius: 0 0 10px 10px;
  font-size: 14.5px; line-height: 1.45;
}
.sofort.aus { display: none; }
.sofort .pik { color: var(--gold); width: 21px; height: 21px; margin-top: 1px; }

/* Räume im Plan: als antippbare Marken über dem Bild. Am Handy sind die
   Kästchen im Plan kleiner als eine Fingerkuppe — deshalb keine
   Klickflächen im Bild, sondern große Ziele darunter. */

/* Antippbare Raumbeschriftungen direkt im Plan ------------------------ */

.plan-flaeche {
  position: absolute; padding: 0;
  border: 2px solid color-mix(in srgb, var(--blau) 45%, transparent);
  border-radius: 5px;
  background: color-mix(in srgb, var(--blau) 9%, transparent);
  cursor: pointer;
}
/* Trefferfläche über den sichtbaren Rahmen hinaus — die Kästchen im Plan
   sind kleiner als eine Fingerkuppe. */
.plan-flaeche::after { content: ""; position: absolute; inset: -9px; }
.plan-flaeche.klasse {
  border-color: var(--blau);
  background: color-mix(in srgb, var(--blau) 16%, transparent);
}
.plan-flaeche:hover, .plan-flaeche:focus-visible {
  background: color-mix(in srgb, var(--blau) 40%, transparent);
  border-color: var(--violett); outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--violett) 30%, transparent);
}

/* Auf schmalen Geräten den Plan breiter als den Bildschirm zeichnen und
   waagrecht scrollen lassen — sonst sind die Räume nicht zu treffen. */
@media (max-width: 640px) {
  
  
}

/* Der Planausschnitt bekommt im Dialog eigenen Platz und scrollt selbst,
   damit die Marken darüber immer sichtbar bleiben. */

/* Geräte in der Statusübersicht: Piktogramm und Wort auf einer Zeile */
.mit-pik { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 14px; }
.mit-pik .pik { width: 22px; height: 22px; color: var(--blau); }

/* =====================================================================
   Raumplan-Dialog — nach dem iPhone-Test neu geordnet.

   Reihenfolge von oben: Titel mit großem Schließer · Stockwerk · schmale
   Raumleiste · Plan · Fußzeile mit Vergrößern und Zurück. Der Plan zeigt
   zuerst das GANZE Stockwerk; wer genauer hinsehen will, vergrößert mit
   einem Tipp. Vorher war er größer als der Bildschirm — man sah nur einen
   Ausschnitt und musste blind schieben.
   ===================================================================== */

.overlay-zu {
  border: none; background: var(--karte2); color: var(--text);
  width: 46px; height: 46px; border-radius: 50%;
  font-size: 21px; line-height: 1; cursor: pointer; flex: none;
}
.overlay-zu:hover { background: var(--linie); }

/* Stockwerk */
.plan-tabs {
  display: flex; gap: 6px; padding: 10px 13px;
  border-bottom: 1px solid var(--linie); overflow-x: auto; flex: none;
}
.plan-tab {
  flex: none; padding: 8px 15px; min-height: 42px;
  border: 2px solid var(--linie); border-radius: 21px;
  background: var(--karte); color: var(--text);
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.plan-tab.an { background: var(--blau); border-color: var(--blau); color: #fff; }

/* Räume als EINE schmale, seitlich scrollbare Leiste — der große Block
   davor hat den Plan erdrückt und den Stockwerkwechsel verdeckt. */
.raum-chips {
  display: flex; flex-wrap: nowrap; gap: 6px;
  padding: 9px 13px; overflow-x: auto; flex: none;
  border-bottom: 1px solid var(--linie); background: var(--karte);
  scrollbar-width: thin;
}
.raum-chip {
  flex: none; display: flex; align-items: baseline; gap: 6px;
  min-height: 40px; padding: 8px 13px;
  border: 2px solid var(--linie); border-radius: 10px;
  background: var(--karte); color: var(--text);
  font: inherit; cursor: pointer; white-space: nowrap;
}
.raum-chip:hover { border-color: var(--blau-hell); background: var(--karte2); }
.raum-chip b { font-size: 15.5px; font-weight: 700; }
.raum-chip small { font-size: 11px; color: var(--dim); }
.raum-chip.klasse { border-color: var(--lf-blue); background: color-mix(in srgb, var(--lf-blue) 13%, #fff); }
.raum-chip.klasse:hover { border-color: var(--blau); }

/* Der Plan selbst */
.plan-bild {
  flex: 1; min-height: 0; overflow: auto;
  padding: 10px; background: var(--karte2);
  display: flex; justify-content: center; align-items: flex-start;
}
.plan-halter { position: relative; display: inline-block; flex: none; }
.plan-halter img { display: block; border-radius: 6px; background: #fff; }

/* Klein: das ganze Stockwerk ist zu sehen, nichts muss geschoben werden.
   Das Seitenverhältnis steht fest am Halter (alle fünf Pläne sind
   1811x2560) — nur so behält er exakt die Bildmaße, und nur dann sitzen
   die prozentual platzierten Klickflächen richtig. Ein bloßes
   max-height am Bild greift nicht, weil der Halter keine eigene Höhe hat. */
.plan-bild:not(.gross) { align-items: center; }
.plan-bild:not(.gross) .plan-halter { max-width: 100%; }
.plan-bild:not(.gross) img {
  /* Die Höhe setzt das Skript beim Öffnen (planPassend): ein prozentualer
     Wert löst sich hier nicht auf, weil der Halter keine eigene Höhe hat,
     und eine feste Rechnung ginge bei jeder Bildschirmgröße daneben. */
  max-width: 100%; width: auto; height: auto;
}

/* Groß: der Plan wird breiter als der Ausschnitt, der Kasten scrollt. */
.plan-bild.gross { align-items: flex-start; }
.plan-bild.gross .plan-halter { width: 760px; max-width: none; aspect-ratio: auto; }
.plan-bild.gross img { width: 100%; height: auto; max-height: none; }

.plan-fuss {
  display: flex; gap: 9px; padding: 11px 13px;
  border-top: 1px solid var(--linie); flex: none;
}
.plan-fuss .knopf { min-height: 46px; font-size: 15px; }

/* Antippbare Raumbeschriftungen im Plan */
.plan-flaeche {
  position: absolute; padding: 0;
  border: 2px solid color-mix(in srgb, var(--blau) 55%, transparent);
  border-radius: 4px;
  background: color-mix(in srgb, var(--blau) 12%, transparent);
  cursor: pointer;
}
/* Trefferfläche über den sichtbaren Rahmen hinaus: im verkleinerten Plan
   sind die Kästchen nur wenige Millimeter groß. */
.plan-flaeche::after { content: ""; position: absolute; inset: -12px; }
.plan-flaeche.klasse {
  border-color: var(--blau);
  background: color-mix(in srgb, var(--blau) 22%, transparent);
}
.plan-flaeche:hover, .plan-flaeche:focus-visible {
  background: color-mix(in srgb, var(--violett) 45%, transparent);
  border-color: var(--violett); outline: none;
}
/* Der bereits gewählte Raum bleibt im Plan erkennbar, wenn man ihn erneut öffnet. */
.plan-flaeche.gewaehlt {
  border-color: var(--violett);
  background: color-mix(in srgb, var(--violett) 38%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--violett) 35%, transparent);
}

/* =====================================================================
   Eigene frühere Meldungen — der bequeme Weg zurück zum Stand.
   Bewusst KEINE Suche nach der Meldungsnummer: die wäre ratbar, und in
   den Meldungen stehen Namen von Kolleg:innen.
   ===================================================================== */
.karte.meine { padding: 13px 15px; }
.meine-kopf {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 9px; font-size: 15px;
}
.meine-zu {
  border: none; background: none; color: var(--dim);
  width: 32px; height: 32px; border-radius: 50%; font-size: 15px; cursor: pointer;
}
.meine-zu:hover { background: var(--karte2); color: var(--text); }
.meine-zeile {
  display: flex; align-items: center; gap: 10px;
  min-height: 46px; padding: 8px 11px; margin-bottom: 6px;
  border: 1px solid var(--linie); border-radius: 10px;
  text-decoration: none; color: var(--text); font-size: 15px;
}
.meine-zeile:last-child { margin-bottom: 0; }
.meine-zeile:hover { background: var(--karte2); border-color: var(--blau-hell); }
/* Suchtreffer sind nicht anklickbar — sie führen bewusst nirgendwohin. */
.meine-zeile.still { cursor: default; }
.meine-zeile.still:hover { background: var(--karte); border-color: var(--linie); }
.meine-zeile b { color: var(--violett); font-size: 15.5px; }
.meine-zeile .wo { color: var(--dim); flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meine-zeile .stand { font-size: 13px; color: var(--dim); white-space: nowrap; }
.meine-zeile .stand.marke { padding: 4px 10px; font-size: 12.5px; font-weight: 700; }
.meine-zeile .pfeil { color: var(--dim); font-size: 20px; line-height: 1; }

/* =====================================================================
   Bestätigung nach dem Absenden — eigene Ansicht, nicht im Seitenfluss.
   Vorher stand man nach dem Absenden ganz unten vor einer leeren Seite,
   weil das Formular ausgeblendet wird und der Sprung nach oben auf dem
   iPhone nicht ankam.
   ===================================================================== */
.danke-schirm {
  position: fixed; inset: 0; z-index: 60;
  background: var(--grund);
  overflow-y: auto;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 22px 14px 40px;
}
.danke-schirm.aus { display: none; }
.danke-schirm .fertig {
  background: var(--karte);
  border: 1px solid var(--linie); border-radius: var(--radius);
  box-shadow: var(--schatten);
  width: 100%; max-width: 520px;
  margin: auto 0;
}
body.danke-offen { overflow: hidden; }

/* =====================================================================
   Statusseite: Fortschritt und Klartext dazu.
   Der wiederkehrende Besucher soll auf einen Blick sehen, wo seine
   Meldung steht — und warum, wenn es hakt.
   ===================================================================== */
.weg {
  list-style: none; display: flex; margin: 17px 0 0; padding: 0;
  counter-reset: schritt;
}
.weg li {
  flex: 1; position: relative;
  text-align: center; font-size: 11.5px; color: var(--dim);
  padding-top: 20px;
}
.weg li::before {                     /* Verbindungslinie */
  content: ""; position: absolute; top: 6px; left: -50%; width: 100%;
  height: 2px; background: var(--linie);
}
.weg li:first-child::before { display: none; }
.weg .punkt {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--karte); border: 2px solid var(--linie);
}
.weg li.vorbei::before { background: var(--gruen); }
.weg li.vorbei .punkt { background: var(--gruen); border-color: var(--gruen); }
.weg li.vorbei { color: var(--gruen); }
.weg li.hier::before { background: var(--gruen); }
.weg li.hier .punkt {
  background: var(--blau); border-color: var(--blau);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--blau) 22%, transparent);
}
.weg li.hier { color: var(--blau); font-weight: 700; }
.weg .wort { display: block; padding: 0 2px; }

.stand-info {
  margin-top: 14px; padding: 12px 14px; border-radius: 10px;
  background: color-mix(in srgb, var(--lf-gold) 15%, #fff);
  border-left: 4px solid var(--gold);
  font-size: 15px; line-height: 1.45;
}
.stand-info.erledigt {
  background: color-mix(in srgb, var(--gruen) 9%, #fff);
  border-left-color: var(--gruen);
}

/* Statt einer Markenleiste ein Satz: der Plan selbst ist die Auswahl. */
.plan-anleitung {
  margin: 0; padding: 10px 14px; flex: none;
  border-bottom: 1px solid var(--linie);
  background: color-mix(in srgb, var(--blau) 6%, #fff);
  font-size: 14px; color: var(--blau); font-weight: 600;
}
.plan-anleitung::before { content: "👆 "; }

/* =====================================================================
   „Wer meldet?" — Kürzel für Lehrpersonen, Name für alle anderen.
   Auf der Seite steht bewusst nur die Kürzelliste, nie die Namen; wer
   hinter einem Kürzel steckt, weiß das Kustodiat.
   ===================================================================== */
.wer { display: grid; gap: 11px; }
.wer-oder {
  text-align: center; font-size: 13px; color: var(--dim);
  position: relative;
}
.wer-oder::before, .wer-oder::after {
  content: ""; position: absolute; top: 50%; width: calc(50% - 26px);
  height: 1px; background: var(--linie);
}
.wer-oder::before { left: 0; }
.wer-oder::after  { right: 0; }
.wer .hinweis { margin-top: 4px; }

@media (min-width: 620px) {
  .wer { grid-template-columns: 1fr auto 1fr; align-items: start; }
  .wer-oder { padding-top: 34px; }
  .wer-oder::before, .wer-oder::after { display: none; }
}

/* Stand nachsehen — zugeklappt, damit es beim Melden nicht im Weg steht */
.karte.nachsehen { padding: 0; overflow: hidden; }
.karte.nachsehen summary {
  list-style: none; cursor: pointer;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 2px;
}
.karte.nachsehen summary::-webkit-details-marker { display: none; }
.karte.nachsehen summary::after {
  content: "›"; position: absolute; right: 18px;
  font-size: 21px; color: var(--dim); transform: rotate(90deg);
}
.karte.nachsehen { position: relative; }
.karte.nachsehen details[open] > summary::after { transform: rotate(-90deg); }
.karte.nachsehen summary b { font-size: 15.5px; }
.karte.nachsehen summary span { font-size: 13px; color: var(--dim); }
.karte.nachsehen summary:hover { background: var(--karte2); }
.nachsehen-inhalt { padding: 0 16px 16px; }

.such-zeile { display: flex; gap: 8px; }
.such-zeile input { flex: 1; }
.such-zeile .knopf { width: auto; min-height: 48px; padding: 0 20px; font-size: 16px; }
#suchErgebnis { margin-top: 11px; }
#suchErgebnis:empty { margin: 0; }

/* =====================================================================
   Schritt 1 — der Plan ist der Hauptweg.
   Vorher stand das Textfeld oben, und man fing an zu überlegen, wie der
   Raum wohl heißt. Jetzt springt der Plan ins Auge; Eintippen bleibt als
   Ausweg darunter, aber zugeklappt.
   ===================================================================== */
.raum-haupt {
  display: flex; align-items: center; gap: 14px; width: 100%;
  min-height: 84px; padding: 16px 18px;
  border: 2px solid var(--blau); border-radius: 13px;
  background: linear-gradient(135deg,
              color-mix(in srgb, var(--blau) 11%, #fff),
              color-mix(in srgb, var(--lf-blue) 17%, #fff));
  color: var(--text); font: inherit; text-align: left; cursor: pointer;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--blau) 16%, transparent);
  transition: transform .12s, box-shadow .12s;
}
.raum-haupt:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 18px color-mix(in srgb, var(--blau) 26%, transparent);
}
.raum-haupt:active { transform: none; }
.rh-karte { font-size: 34px; line-height: 1; flex: none; }
.rh-text { flex: 1; min-width: 0; }
.rh-text b { display: block; font-size: 18px; font-weight: 700; color: var(--blau); }
.rh-text small { display: block; font-size: 13.5px; color: var(--dim); margin-top: 2px; }
.rh-pfeil { font-size: 27px; color: var(--blau); line-height: 1; flex: none; }

/* Steht der Raum schon fest, tritt der Knopf zurück. */
body.raum-steht .raum-haupt {
  min-height: 54px; padding: 11px 15px;
  background: var(--karte); border-color: var(--linie);
  box-shadow: none;
}
body.raum-steht .rh-karte { font-size: 23px; }
body.raum-steht .rh-text b { font-size: 15px; color: var(--dim); }
body.raum-steht .rh-text small { display: none; }
body.raum-steht .rh-pfeil { font-size: 21px; color: var(--dim); }

/* Der gewählte Raum, deutlich sichtbar */
.raum-echo.treffer, .raum-echo.offen {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 11px; padding: 13px 15px; border-radius: 11px; font-size: 15px;
}
.raum-echo.treffer {
  background: color-mix(in srgb, var(--gruen) 10%, #fff);
  border: 2px solid color-mix(in srgb, var(--gruen) 45%, transparent);
  color: var(--gruen);
}
.raum-echo.treffer::before { content: "✓"; font-size: 21px; font-weight: 700; flex: none; }
.raum-echo.offen {
  background: var(--karte2); border: 2px solid var(--linie); color: var(--text);
}
.raum-echo.offen::before { content: "📍"; font-size: 19px; flex: none; }
.raum-echo b { font-size: 17px; }
.raum-echo small { color: var(--dim); font-size: 13px; }
.raum-echo span { flex: 1; min-width: 0; }
.echo-weg {
  flex: none; padding: 8px 14px; min-height: 40px;
  border: 1px solid currentColor; border-radius: 9px;
  background: transparent; color: inherit;
  font: inherit; font-size: 14px; cursor: pointer; opacity: .8;
}
.echo-weg:hover { opacity: 1; }

/* Eintippen als Ausweg */
.raum-tippen { margin-top: 12px; }
.raum-tippen summary {
  list-style: none; cursor: pointer;
  font-size: 13.5px; color: var(--dim);
  padding: 8px 2px; display: flex; align-items: center; gap: 6px;
}
.raum-tippen summary::-webkit-details-marker { display: none; }
.raum-tippen summary::before { content: "⌨️"; font-size: 15px; }
.raum-tippen summary:hover { color: var(--blau); text-decoration: underline; }
.raum-tippen[open] summary { margin-bottom: 8px; }

/* --------------------------------------------------------- Fußleiste */
footer p { margin: 4px 0; }
.fuss-schule { font-weight: 600; color: var(--text); }
.fuss-os { font-size: 11.5px; color: var(--dim); margin-top: 4px; opacity: .9; }
.fuss-os b { color: var(--violett); }
/* Shopseite und Impressum: so leise wie die Zeile darueber. */
.fuss-os-links { margin-top: 0; font-size: 11px; }
.fuss-os-links a { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; }
/* „Bereitgestellt von Salbright“ – gemeinsamer Absender aller Lichtenfels Apps
   (brand/salbright/lichtenfels-v1, wie auf lichtenfels.app): Lichtenfelsfarben,
   klein und leise, erst beim Antippen voll. Dunkle Farbwelten bekommen die
   helle Fassung. Reines CSS, kein Skript nötig. */
.fuss-marke { margin-top: 10px; }
.sb-marke {
  display: inline-block; width: 80px; height: 25px; vertical-align: middle;
  background: url("assets/salbright/provided-by-lichtenfels-light.svg") center / contain no-repeat;
  opacity: .5; transition: opacity .15s;
}
.sb-marke:hover, .sb-marke:focus-visible { opacity: 1; }
:root[data-thema="terminal"] .sb-marke, :root[data-thema="wald"] .sb-marke,
:root[data-thema="anime-neon"] .sb-marke, :root[data-thema="anime-sakura"] .sb-marke,
:root[data-thema="halloween"] .sb-marke, :root[data-thema="weihnachten"] .sb-marke,
:root[data-thema="biologie"] .sb-marke, :root[data-thema="chemie"] .sb-marke {
  background-image: url("assets/salbright/provided-by-lichtenfels-dark.svg");
}

/* Ganz unten, klein und unbeschriftet: ein Osterei für alle, die es
   entdecken. Wer es nicht bemerkt, vermisst nichts — deshalb auch keine
   Überschrift mehr und deutlich weniger Fläche als vorher. */
.thema-wahl {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  margin: 18px 0 2px; flex-wrap: wrap; opacity: .55;
}
.thema-wahl:hover { opacity: 1; }
.thema-knopf {
  width: 15px; height: 15px; padding: 2px; border-radius: 50%;
  border: 1px solid var(--linie); background: var(--karte);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.thema-knopf span { display: block; width: 100%; height: 100%; border-radius: 50%; }
.thema-knopf:hover { border-color: var(--blau-hell); }
.thema-knopf[aria-pressed="true"] {
  border-color: var(--blau);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--blau) 25%, transparent);
}

/* Aktuelle Raumzuteilung, vorerst als Planfoto. */
.plan-foto-hinweis {
  margin: 0 0 8px; padding: 7px 11px; border-radius: 8px;
  font-size: 12px; line-height: 1.4;
  color: var(--text);
  background: color-mix(in srgb, var(--gold) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold) 34%, transparent);
}

/* Flächen, die im Dunkelmodus sonst hell stehen bleiben */
:root[data-thema="terminal"] .raum-haupt, :root[data-thema="wald"] .raum-haupt, :root[data-thema="anime-neon"] .raum-haupt, :root[data-thema="anime-sakura"] .raum-haupt, :root[data-thema="halloween"] .raum-haupt, :root[data-thema="weihnachten"] .raum-haupt, :root[data-thema="biologie"] .raum-haupt, :root[data-thema="chemie"] .raum-haupt {
  background: linear-gradient(135deg,
              color-mix(in srgb, var(--blau) 22%, var(--karte2)),
              color-mix(in srgb, var(--blau) 9%, var(--karte2)));
}
:root[data-thema="terminal"] body.raum-steht .raum-haupt, :root[data-thema="wald"] body.raum-steht .raum-haupt, :root[data-thema="anime-neon"] body.raum-steht .raum-haupt, :root[data-thema="anime-sakura"] body.raum-steht .raum-haupt, :root[data-thema="halloween"] body.raum-steht .raum-haupt, :root[data-thema="weihnachten"] body.raum-steht .raum-haupt, :root[data-thema="biologie"] body.raum-steht .raum-haupt, :root[data-thema="chemie"] body.raum-steht .raum-haupt { background: var(--karte2); }
:root[data-thema="terminal"] .merker, :root[data-thema="wald"] .merker, :root[data-thema="anime-neon"] .merker, :root[data-thema="anime-sakura"] .merker, :root[data-thema="halloween"] .merker, :root[data-thema="weihnachten"] .merker, :root[data-thema="biologie"] .merker, :root[data-thema="chemie"] .merker { background: color-mix(in srgb, var(--gold) 20%, var(--karte2)); }
:root[data-thema="terminal"] .sofort, :root[data-thema="wald"] .sofort, :root[data-thema="anime-neon"] .sofort, :root[data-thema="anime-sakura"] .sofort, :root[data-thema="halloween"] .sofort, :root[data-thema="weihnachten"] .sofort, :root[data-thema="biologie"] .sofort, :root[data-thema="chemie"] .sofort { background: color-mix(in srgb, var(--gold) 22%, var(--karte2)); }
:root[data-thema="terminal"] .raum-echo.treffer, :root[data-thema="wald"] .raum-echo.treffer, :root[data-thema="anime-neon"] .raum-echo.treffer, :root[data-thema="anime-sakura"] .raum-echo.treffer, :root[data-thema="halloween"] .raum-echo.treffer, :root[data-thema="weihnachten"] .raum-echo.treffer, :root[data-thema="biologie"] .raum-echo.treffer, :root[data-thema="chemie"] .raum-echo.treffer { background: color-mix(in srgb, var(--gruen) 18%, var(--karte2)); }
:root[data-thema="terminal"] .kachel.an,, :root[data-thema="wald"] .kachel.an,, :root[data-thema="anime-neon"] .kachel.an,, :root[data-thema="anime-sakura"] .kachel.an,, :root[data-thema="halloween"] .kachel.an,, :root[data-thema="weihnachten"] .kachel.an,, :root[data-thema="biologie"] .kachel.an,, :root[data-thema="chemie"] .kachel.an,
:root[data-thema="terminal"] .zeile.an, :root[data-thema="wald"] .zeile.an, :root[data-thema="anime-neon"] .zeile.an, :root[data-thema="anime-sakura"] .zeile.an, :root[data-thema="halloween"] .zeile.an, :root[data-thema="weihnachten"] .zeile.an, :root[data-thema="biologie"] .zeile.an, :root[data-thema="chemie"] .zeile.an { background: color-mix(in srgb, var(--blau) 26%, var(--karte2)); }
:root[data-thema="terminal"] .prio.an[data-p="kritisch"], :root[data-thema="wald"] .prio.an[data-p="kritisch"], :root[data-thema="anime-neon"] .prio.an[data-p="kritisch"], :root[data-thema="anime-sakura"] .prio.an[data-p="kritisch"], :root[data-thema="halloween"] .prio.an[data-p="kritisch"], :root[data-thema="weihnachten"] .prio.an[data-p="kritisch"], :root[data-thema="biologie"] .prio.an[data-p="kritisch"], :root[data-thema="chemie"] .prio.an[data-p="kritisch"] { background: color-mix(in srgb, var(--rot) 24%, var(--karte2)); }
:root[data-thema="terminal"] .prio.an[data-p="hoch"], :root[data-thema="wald"] .prio.an[data-p="hoch"], :root[data-thema="anime-neon"] .prio.an[data-p="hoch"], :root[data-thema="anime-sakura"] .prio.an[data-p="hoch"], :root[data-thema="halloween"] .prio.an[data-p="hoch"], :root[data-thema="weihnachten"] .prio.an[data-p="hoch"], :root[data-thema="biologie"] .prio.an[data-p="hoch"], :root[data-thema="chemie"] .prio.an[data-p="hoch"] { background: color-mix(in srgb, var(--gold) 24%, var(--karte2)); }
:root[data-thema="terminal"] .foto-knopf, :root[data-thema="wald"] .foto-knopf, :root[data-thema="anime-neon"] .foto-knopf, :root[data-thema="anime-sakura"] .foto-knopf, :root[data-thema="halloween"] .foto-knopf, :root[data-thema="weihnachten"] .foto-knopf, :root[data-thema="biologie"] .foto-knopf, :root[data-thema="chemie"] .foto-knopf { background: var(--karte2); }
:root[data-thema="terminal"] .plan-anleitung, :root[data-thema="wald"] .plan-anleitung, :root[data-thema="anime-neon"] .plan-anleitung, :root[data-thema="anime-sakura"] .plan-anleitung, :root[data-thema="halloween"] .plan-anleitung, :root[data-thema="weihnachten"] .plan-anleitung, :root[data-thema="biologie"] .plan-anleitung, :root[data-thema="chemie"] .plan-anleitung { background: color-mix(in srgb, var(--blau) 18%, var(--karte2)); }
:root[data-thema="terminal"] .haken, :root[data-thema="wald"] .haken, :root[data-thema="anime-neon"] .haken, :root[data-thema="anime-sakura"] .haken, :root[data-thema="halloween"] .haken, :root[data-thema="weihnachten"] .haken, :root[data-thema="biologie"] .haken, :root[data-thema="chemie"] .haken { background: var(--karte2); }
:root[data-thema="terminal"] .marke.blau, :root[data-thema="wald"] .marke.blau, :root[data-thema="anime-neon"] .marke.blau, :root[data-thema="anime-sakura"] .marke.blau, :root[data-thema="halloween"] .marke.blau, :root[data-thema="weihnachten"] .marke.blau, :root[data-thema="biologie"] .marke.blau, :root[data-thema="chemie"] .marke.blau { background: color-mix(in srgb, var(--blau) 26%, var(--karte2)); }
:root[data-thema="terminal"] .marke.gold, :root[data-thema="wald"] .marke.gold, :root[data-thema="anime-neon"] .marke.gold, :root[data-thema="anime-sakura"] .marke.gold, :root[data-thema="halloween"] .marke.gold, :root[data-thema="weihnachten"] .marke.gold, :root[data-thema="biologie"] .marke.gold, :root[data-thema="chemie"] .marke.gold { background: color-mix(in srgb, var(--gold) 26%, var(--karte2)); }
:root[data-thema="terminal"] .marke.gruen, :root[data-thema="wald"] .marke.gruen, :root[data-thema="anime-neon"] .marke.gruen, :root[data-thema="anime-sakura"] .marke.gruen, :root[data-thema="halloween"] .marke.gruen, :root[data-thema="weihnachten"] .marke.gruen, :root[data-thema="biologie"] .marke.gruen, :root[data-thema="chemie"] .marke.gruen { background: color-mix(in srgb, var(--gruen) 26%, var(--karte2)); }
:root[data-thema="terminal"] .marke.grau, :root[data-thema="wald"] .marke.grau, :root[data-thema="anime-neon"] .marke.grau, :root[data-thema="anime-sakura"] .marke.grau, :root[data-thema="halloween"] .marke.grau, :root[data-thema="weihnachten"] .marke.grau, :root[data-thema="biologie"] .marke.grau, :root[data-thema="chemie"] .marke.grau { background: var(--karte2); }
:root[data-thema="terminal"] .stand-info, :root[data-thema="wald"] .stand-info, :root[data-thema="anime-neon"] .stand-info, :root[data-thema="anime-sakura"] .stand-info, :root[data-thema="halloween"] .stand-info, :root[data-thema="weihnachten"] .stand-info, :root[data-thema="biologie"] .stand-info, :root[data-thema="chemie"] .stand-info { background: color-mix(in srgb, var(--gold) 20%, var(--karte2)); }
:root[data-thema="terminal"] .stand-info.erledigt, :root[data-thema="wald"] .stand-info.erledigt, :root[data-thema="anime-neon"] .stand-info.erledigt, :root[data-thema="anime-sakura"] .stand-info.erledigt, :root[data-thema="halloween"] .stand-info.erledigt, :root[data-thema="weihnachten"] .stand-info.erledigt, :root[data-thema="biologie"] .stand-info.erledigt, :root[data-thema="chemie"] .stand-info.erledigt { background: color-mix(in srgb, var(--gruen) 18%, var(--karte2)); }
:root[data-thema="terminal"] .weg .punkt, :root[data-thema="wald"] .weg .punkt, :root[data-thema="anime-neon"] .weg .punkt, :root[data-thema="anime-sakura"] .weg .punkt, :root[data-thema="halloween"] .weg .punkt, :root[data-thema="weihnachten"] .weg .punkt, :root[data-thema="biologie"] .weg .punkt, :root[data-thema="chemie"] .weg .punkt { background: var(--karte2); }

/* =====================================================================
   FARBWELTEN — dieselben Skins wie in TeacherOS, aber ohne Figuren.

   Von den Themenwelt-Bildern wird nur der figurfreie Teil verwendet: die
   Wify-Figur steht in allen Vorlagen rechts, hier ist die linke Hälfte
   zugeschnitten. Über jedem Bild liegt ein kräftiger Schleier, damit die
   Seite in jeder Einstellung gleich gut lesbar bleibt — wer eine Störung
   meldet, soll nicht mit dem Hintergrund kämpfen.

   Aufbau je Skin: Farbwerte + `--bild`. Die body-Regel weiter unten setzt
   beides zusammen.
   ===================================================================== */

/* --- HELLE WELTEN ---------------------------------------------------- */

:root[data-thema="lichtenfels"] { --bild: url("assets/skins/lichtenfels.jpg"); }

:root[data-thema="kawaii"] {
  --blau: #be185d; --blau-hell: #db2777; --violett: #9d3f8f;
  --gruen: #2f7d5c; --gold: #a06a10; --rot: #c9315c;
  --grund: #fff3f8; --karte: #fff; --karte2: #ffe9f2;
  --text: #4a3340; --dim: #7d5268; --linie: #f4cfe0;
  --lf-mauve: #ffb3d4; --lf-rose: #ffc9c0; --lf-slate: #d9a8d0;
  --lf-blue: #b9d6f5; --lf-grey: #e2c6d6; --lf-gold: #ffd9a0;
  --bild: url("assets/skins/kawaii.jpg");
}

:root[data-thema="schlicht"] {
  --blau: #3c5a80; --blau-hell: #5678a0; --violett: #3c4658;
  --grund: #f7f8f9; --karte: #fff; --karte2: #eef0f3;
  --lf-mauve: #b9bfc7; --lf-rose: #aab1ba; --lf-slate: #9aa2ad;
  --lf-blue: #b6c2cf; --lf-grey: #a7aeb7; --lf-gold: #c8ccd2;
  --bild: none;
}

/* --- DUNKLE WELTEN ---------------------------------------------------
   Gemeinsame Grundlage; die einzelnen Skins setzen darunter nur noch
   ihre Leitfarben und ihr Bild. */
:root[data-thema="terminal"],
:root[data-thema="wald"],
:root[data-thema="anime-neon"],
:root[data-thema="anime-sakura"],
:root[data-thema="halloween"],
:root[data-thema="weihnachten"],
:root[data-thema="biologie"],
:root[data-thema="chemie"] {
  --karte: #1c2230cc; --karte2: #2a3242;
  --text: #eef2f8; --dim: #a9b4c4; --linie: #3d4759;
  --schatten: 0 1px 3px rgba(0,0,0,.5), 0 8px 26px rgba(0,0,0,.35);
  color-scheme: dark;
}

:root[data-thema="terminal"] {
  --blau: #34d399; --blau-hell: #6ee7b7; --violett: #7dd3fc;
  --gruen: #34d399; --gold: #eab308; --rot: #f87171;
  --grund: #020604; --karte: #0d1712e0; --karte2: #142019;
  --text: #d6f5e4; --dim: #8fc3a8; --linie: #1f3a2c;
  --lf-mauve: #16a34a; --lf-rose: #22c55e; --lf-slate: #15803d;
  --lf-blue: #4ade80; --lf-grey: #166534; --lf-gold: #86efac;
  --bild: url("assets/skins/terminal.jpg");
}

:root[data-thema="wald"] {
  --blau: #9bd66a; --blau-hell: #bce88f; --violett: #d8b26a;
  --gruen: #7ab648; --gold: #d9a441; --rot: #e07a5f;
  --grund: #0e1c14; --karte: #17281de0; --karte2: #1f3527;
  --text: #e6f2e0; --dim: #a8c6a0; --linie: #2e4a37;
  --lf-mauve: #6b8f4e; --lf-rose: #8fae5c; --lf-slate: #4e6b45;
  --lf-blue: #9bd66a; --lf-grey: #5c7a52; --lf-gold: #d9c26a;
  --bild: url("assets/skins/wald.jpg");
}

:root[data-thema="anime-neon"] {
  --blau: #22d3ee; --blau-hell: #67e8f9; --violett: #f472b6;
  --gruen: #4ade80; --gold: #fbbf24; --rot: #fb7185;
  --grund: #09111f; --karte: #111d33e0; --karte2: #17273f;
  --lf-mauve: #f472b6; --lf-rose: #fb7185; --lf-slate: #6366f1;
  --lf-blue: #22d3ee; --lf-grey: #475569; --lf-gold: #fbbf24;
  --bild: url("assets/skins/anime-neon.jpg");
}

:root[data-thema="anime-sakura"] {
  --blau: #f0a6c8; --blau-hell: #f8c8dd; --violett: #c084fc;
  --gruen: #6ee7b7; --gold: #fcd34d; --rot: #fb7185;
  --grund: #211724; --karte: #2d1f31e0; --karte2: #3a2940;
  --lf-mauve: #f0a6c8; --lf-rose: #f8c8dd; --lf-slate: #a78bfa;
  --lf-blue: #c084fc; --lf-grey: #6b5570; --lf-gold: #fcd34d;
  --bild: url("assets/skins/anime-sakura.jpg");
}

:root[data-thema="halloween"] {
  --blau: #fb923c; --blau-hell: #fdba74; --violett: #c084fc;
  --gruen: #84cc16; --gold: #facc15; --rot: #f87171;
  --grund: #181221; --karte: #24192fe0; --karte2: #30223e;
  --lf-mauve: #a855f7; --lf-rose: #fb923c; --lf-slate: #7c3aed;
  --lf-blue: #facc15; --lf-grey: #4c1d95; --lf-gold: #fb923c;
  --bild: url("assets/skins/halloween.jpg");
}

:root[data-thema="weihnachten"] {
  --blau: #f87171; --blau-hell: #fca5a5; --violett: #fcd34d;
  --gruen: #4ade80; --gold: #fcd34d; --rot: #ef4444;
  --grund: #0b1629; --karte: #13223bde; --karte2: #1b2d4b;
  --lf-mauve: #ef4444; --lf-rose: #f87171; --lf-slate: #1d4ed8;
  --lf-blue: #93c5fd; --lf-grey: #334155; --lf-gold: #fcd34d;
  --bild: url("assets/skins/weihnachten.jpg");
}

:root[data-thema="biologie"] {
  --blau: #86d96a; --blau-hell: #a7e88f; --violett: #d8b26a;
  --gruen: #5fb84b; --gold: #d9a441; --rot: #ef7f6e;
  --grund: #101f19; --karte: #182b22e0; --karte2: #21382c;
  --lf-mauve: #5fb84b; --lf-rose: #86d96a; --lf-slate: #3f7a4e;
  --lf-blue: #7dd3a0; --lf-grey: #2f5c3f; --lf-gold: #d9c26a;
  --bild: url("assets/skins/biologie.jpg");
}

:root[data-thema="chemie"] {
  --blau: #38bdf8; --blau-hell: #7dd3fc; --violett: #a78bfa;
  --gruen: #34d399; --gold: #fbbf24; --rot: #fb7185;
  --grund: #0c1420; --karte: #142033e0; --karte2: #1c2c44;
  --lf-mauve: #a78bfa; --lf-rose: #38bdf8; --lf-slate: #2563eb;
  --lf-blue: #7dd3fc; --lf-grey: #334155; --lf-gold: #fbbf24;
  --bild: url("assets/skins/chemie.jpg");
}

/* --- Das Bild hinter allem -------------------------------------------
   Fest stehend, damit beim Scrollen Ruhe bleibt, und mit einem Schleier,
   der von oben nach unten dichter wird: oben sieht man die Kulisse, unten
   liest man das Formular. */
:root:not([data-thema="schlicht"]) body {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--grund) 22%, transparent) 0,
      color-mix(in srgb, var(--grund) 62%, transparent) 380px,
      color-mix(in srgb, var(--grund) 88%, transparent) 780px,
      var(--grund) 1200px),
    var(--bild, none) center top / cover fixed no-repeat,
    var(--grund);
}
/* Auf schmalen Geräten scrollt der feste Hintergrund auf iOS ruckelig —
   dort wird er mitgescrollt. */
@media (max-width: 700px) {
  :root:not([data-thema="schlicht"]) body { background-attachment: scroll, scroll, scroll; }
}

/* Kopf und Fuß dürfen die Kulisse durchscheinen lassen */
:root:not([data-thema="schlicht"]) header.kopf {
  background: color-mix(in srgb, var(--karte) 72%, transparent);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

/* Die Karten lassen bei den bebilderten Welten etwas Kulisse durch — gerade
   so viel, dass man sie spürt, ohne dass die Lesbarkeit leidet. */
:root:not([data-thema="schlicht"]):not([data-thema="lichtenfels"]) .karte {
  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);
}
:root[data-thema="lichtenfels"] .karte,
:root[data-thema="kawaii"] .karte {
  background: color-mix(in srgb, var(--karte) 90%, transparent);
  backdrop-filter: blur(11px);
  -webkit-backdrop-filter: blur(11px);
}

/* --------------------------------------------------------- Zahlen im Fuß */
.karte.zahlen { margin-top: 22px; }
.zahlen-kacheln {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 9px; margin-bottom: 16px;
}
.zahlen-kacheln div {
  padding: 12px; border-radius: 11px; text-align: center;
  background: var(--karte2); border: 1px solid var(--linie);
}
.zahlen-kacheln b { display: block; font-size: 25px; color: var(--blau); line-height: 1.1; }
.zahlen-kacheln small { display: block; font-size: 11.5px; color: var(--dim); margin-top: 3px; }

.zahlen-block { margin-bottom: 15px; }
.zahlen-titel {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--dim); margin-bottom: 7px;
}
.zahlen-zeile {
  display: grid; grid-template-columns: 1fr 70px 26px;
  align-items: center; gap: 9px; padding: 4px 0; font-size: 14px;
}
.zahlen-zeile > span:first-child {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zahlen-balken {
  height: 7px; border-radius: 4px; background: var(--karte2); overflow: hidden;
}
.zahlen-balken i { display: block; height: 100%; background: var(--blau); border-radius: 4px; }
.zahlen-zeile b { text-align: right; font-size: 13px; color: var(--dim); }

/* --------------------------------------------- Rückmeldung zur Seite */
.fb-fuss {
  background: none; border: none; padding: 0; font: inherit;
  color: var(--dim); font-size: 13px; cursor: pointer;
  text-decoration: underline dotted currentColor; text-underline-offset: 3px;
}
.fb-fuss:hover { color: var(--blau); text-decoration-style: solid; }

.fb-back {
  position: fixed; inset: 0; z-index: 5200;
  background: rgba(12, 16, 22, .7);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.fb-fenster {
  background: var(--karte); color: var(--text);
  border: 1px solid var(--linie); border-radius: 15px;
  width: 100%; max-width: 440px; max-height: 88dvh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 20px 60px rgba(8, 12, 18, .5);
}
.fb-fenster header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 16px; border-bottom: 1px solid var(--linie); font-size: 16px;
}
.fb-zu {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--linie); background: var(--karte2);
  color: inherit; font-size: 15px; cursor: pointer;
}
.fb-inhalt { padding: 16px; overflow-y: auto; }
.fb-inhalt textarea { min-height: 110px; }
.fb-danke { text-align: center; padding: 26px 10px; font-size: 17px; margin: 0; }

/* --------------------------------- Längere Anleitung zu einem Symptom */
.anleitung {
  margin: -2px 0 7px; border-radius: 0 0 10px 10px;
  background: color-mix(in srgb, var(--blau) 8%, var(--karte2));
  overflow: hidden;
}
.anleitung.aus { display: none; }
/* Fernbedienungs-Hilfe erst nach Antippen des Punkts, sonst wird die Liste zu lang. */
.remote-advice.aus { display: none; }
.anleitung summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: 9px;
  padding: 11px 13px; font-size: 14.5px; font-weight: 600; color: var(--blau);
}
.anleitung summary::-webkit-details-marker { display: none; }
.anleitung summary .pik { color: var(--blau); width: 21px; height: 21px; }
.anleitung summary::after { content: "›"; margin-left: auto; font-size: 19px; transform: rotate(90deg); }
.anleitung details[open] > summary::after { transform: rotate(-90deg); }
.anl-inhalt { padding: 0 13px 13px; }
.anl-schritt {
  padding: 9px 0; border-top: 1px solid color-mix(in srgb, var(--blau) 18%, transparent);
}
.anl-schritt b { display: block; font-size: 14px; margin-bottom: 2px; }
.anl-schritt span { font-size: 13.5px; color: var(--dim); line-height: 1.45; }
.anl-schluss { margin: 11px 0 0; font-size: 13px; color: var(--dim); font-style: italic; }

/* Die Zeichnung steht über den Schritten: wer sie ansieht, braucht den Text
   oft gar nicht mehr. Antippen öffnet sie in voller Größe — auf dem Handy
   ist das A4-Blatt in der Spalte sonst zu klein zum Lesen. */
.anl-bild {
  display: block; margin: 2px 0 12px; border-radius: 8px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--blau) 22%, transparent);
  background: #fff;
}
.anl-bild { position: relative; }
.anl-bild img { display: block; width: 100%; height: auto; }
/* Auf dem Handy gibt es kein Hover — der Hinweis muss dastehen. */
.anl-lupe {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 10px; font-size: 12px; font-weight: 600; color: var(--blau);
  background: color-mix(in srgb, var(--blau) 8%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--blau) 18%, transparent);
}
.anl-lupe .pik { width: 15px; height: 15px; }
.anl-druck { margin: 9px 0 0; font-size: 12.5px; color: var(--dim); }
.anl-druck a { color: var(--blau); font-weight: 600; }

/* Kompakter Einstieg: Raumabfrage schon vor dem Melden erreichbar. */
.av-report .kopf-innen { flex-wrap: wrap; }
.av-report .report-title { flex: 1; min-width: 0; }
.av-report .report-title p { white-space: normal; }
.av-report .infra-login-link {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 8px 12px; border-radius: 9px;
  color: #fff; background: var(--blau); font-size: 13px;
  font-weight: 700; text-decoration: none; white-space: nowrap;
}
.av-report .infra-login-link:hover { background: var(--violett); }
.av-report .infra-login-link:focus-visible { outline: 3px solid var(--violett); outline-offset: 3px; }
.av-report .av-arbeitszeit { margin: 0 0 14px; color: var(--dim); font-size: 13px; }
@media (max-width: 560px) {
  .av-report .infra-login-link { margin-left: auto; }
  .av-report .report-title { flex-basis: calc(100% - 96px); }
}

/* Raumvorschläge vor nachfolgenden Karten mit eigener Glas-Ebene halten. */
.av-report .karte:has(.av-room-suggestions:not([hidden])) { position: relative; z-index: 2; }

/* Aus der Raumabfrage uebernommene Vorauswahl - sichtbar, aber nicht laut. */
.hinweis.uebernommen {
  margin: 0 0 14px; padding: 11px 14px; border-radius: 11px;
  border: 1px solid color-mix(in srgb, var(--blau) 40%, var(--linie));
  background: color-mix(in srgb, var(--blau) 8%, var(--karte));
  color: var(--text); font-size: 14px; line-height: 1.5;
}
.hinweis.uebernommen[hidden] { display: none; }

/* Bekannter raumbezogener Lösungsvorschlag, vor allgemeinen Vermutungen. */
.speaker-power-advice{padding:16px;margin:12px 0;border:2px solid var(--gold,#b57918);border-left-width:6px;border-radius:12px;background:var(--karte,#fff);color:var(--text,#232323);overflow-wrap:anywhere}.speaker-power-advice strong{display:block;font-size:1.05em}.speaker-power-advice p{margin:8px 0 0;line-height:1.55}

/* Einmalige Rückmeldung nach erfolgreichem Versand. */
.av-success-projector{color:var(--blau,#3979a3);width:140px;height:94px;margin:0 auto 12px}.av-success-projector svg{width:100%;height:100%}.danke-schirm:not(.aus) .av-success-projector svg{animation:av-projector-nod .55s ease-out both}.danke-schirm:not(.aus) .av-success-check{stroke-dasharray:40;stroke-dashoffset:40;animation:av-check-in .5s .3s ease-out forwards}.danke-schirm:not(.aus) .av-success-ray{animation:av-light-on .5s .2s both}@keyframes av-projector-nod{0%{transform:translateY(10px) rotate(-5deg);opacity:0}65%{transform:translateY(-3px) rotate(2deg);opacity:1}100%{transform:none;opacity:1}}@keyframes av-check-in{to{stroke-dashoffset:0}}@keyframes av-light-on{from{opacity:0}to{opacity:.12}}@media(prefers-reduced-motion:reduce){.danke-schirm .av-success-projector svg,.danke-schirm .av-success-check,.danke-schirm .av-success-ray{animation:none!important}.danke-schirm .av-success-check{stroke-dashoffset:0!important}}