/* Nur was Schule eigen ist. Huelle, Kopfzeile, Knoepfe und der Fotoscreen stehen in
   basis.css und foto-screen.css, beide kopiert aus _suite/. */

:root {
  /* Tuerkis. Der alte Vite-Build trug #5EEAD4 als Akzent, das ist als Knopffarbe mit
     weisser Schrift zu hell: der helle Ton bleibt als --akzent-hell die Identitaet,
     der dunklere traegt den Kontrast. */
  --akzent: #0c8576;
  --akzent-hell: #47d8c2;
  --grund: #f7faf9;
  --karte: #ffffff;
  --text: #16201e;
  --grau: #5e716d;
  --linie: #dde8e5;
  --neu: #b45309;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #111a19;
    --karte: #182322;
    --text: #e9f2f0;
    --grau: #93a8a4;
    --linie: #2a3936;
    --neu: #fcd34d;
  }
}

/* --- Karten und Abschnitte -------------------------------------------------- */

.karte {
  padding: 14px;
  border: 1px solid var(--linie);
  border-radius: 16px;
  background: var(--karte);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

main h2 {
  margin: 6px 0 0;
  font-size: 16px;
  font-weight: 650;
  color: var(--grau);
}

.zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.stapel { display: flex; flex-direction: column; gap: 10px; }
.knopfreihe { display: flex; gap: 8px; flex-wrap: wrap; }
.klein { font-size: 14px; color: var(--grau); }

/* Neues seit dem letzten Hinsehen. Der Punkt steht vor der Zeile, damit er auch
   wirkt, wenn die Zeile lang ist und umbricht. */
.neu::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--neu);
  vertical-align: 0.1em;
}

/* --- Vertretungen ----------------------------------------------------------- */

.tag { display: flex; flex-direction: column; gap: 6px; }
.tag .datum { font-weight: 650; }
.aenderung { display: flex; gap: 10px; font-size: 15px; }
.aenderung .stunde { flex: 0 0 2.2em; color: var(--grau); font-variant-numeric: tabular-nums; }
.aenderung.entfaellt .was { text-decoration: line-through; text-decoration-thickness: 1px; }
.info { font-size: 15px; }

/* --- Stundenplan ------------------------------------------------------------ */

/* Die Tabelle scrollt seitlich fuer sich, statt die ganze Seite breit zu machen.
   flex: 0 0 auto ist entscheidend: main ist ein Flex-Container, und ohne das schrumpft
   der Rahmen auf die Hoehe einer Zeile zusammen. Genau so sah es am 17.09.2026 auf dem
   iPhone aus, eine Kopfzeile und eine halbe Stunde. */
.planrahmen {
  flex: 0 0 auto;
  overflow-x: auto;
  border: 1px solid var(--linie);
  border-radius: 14px;
  background: var(--karte);
  -webkit-overflow-scrolling: touch;
}

table.plan { border-collapse: collapse; font-size: 13px; min-width: 100%; }
table.plan th, table.plan td { padding: 6px 8px; text-align: left; vertical-align: top; border-top: 1px solid var(--linie); }
table.plan thead th { border-top: none; font-size: 12px; color: var(--grau); position: sticky; top: 0; background: var(--karte); }
table.plan tbody th { color: var(--grau); font-weight: 400; white-space: nowrap; }
table.plan col.heute, table.plan td.heute { background: color-mix(in srgb, var(--akzent) 7%, transparent); }

/* Kompakt: sechs feste Spalten ueber die ganze Breite, nur das Fach in der Zelle,
   kein seitliches Schieben. Lehrer und Raum stehen nach dem Antippen darunter. */
table.plan.kompakt { width: 100%; table-layout: fixed; }
table.plan.kompakt th:first-child { width: 2.6em; padding-right: 2px; }
table.plan.kompakt td { padding: 7px 2px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; }
table.plan.kompakt thead th { text-align: center; }
table.plan.kompakt td.aktiv { box-shadow: inset 0 0 0 2px var(--akzent); border-radius: 6px; }
.zelle-fach { font-weight: 600; }
.zelle-fach.vertretung { color: var(--akzent); }
.zelle-fach.entfaellt { color: #b42318; text-decoration: line-through; }
.zelle-fach.abw { color: var(--neu); }
.plandetail { margin-top: 10px; }

.zelle-soll { color: var(--grau); }
.zelle-mark { display: block; margin-top: 2px; font-weight: 600; color: var(--akzent); }
.zelle-mark.entfaellt { color: #b42318; text-decoration: line-through; }
.zelle-abw { display: block; margin-top: 2px; font-weight: 600; color: var(--neu); }

/* --- Dokumente -------------------------------------------------------------- */

.dokzeile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--linie);
  border-radius: 14px;
  background: var(--karte);
  text-align: left;
  width: 100%;
}

.dokzeile .titel { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.dokzeile .meta { font-size: 13px; color: var(--grau); font-weight: 400; }

.punkt { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; }
.punkt input { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px; }
.punkt.erledigt span { color: var(--grau); text-decoration: line-through; }
.punkt .frist { display: block; font-size: 13px; color: var(--grau); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { padding: 7px 12px; border-radius: 999px; font-size: 14px; background: var(--grund); }
.chips button[aria-pressed="true"] { background: var(--akzent); border-color: var(--akzent); color: #fff; font-weight: 600; }

.dateien { display: flex; flex-direction: column; gap: 10px; }
.dateien img { width: 100%; border-radius: 12px; background: var(--grund); }

/* --- Chat ------------------------------------------------------------------- */

.chatseite { gap: 10px; }
.verlauf { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }

.blase {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 15px;
  line-height: 1.45;
}

.blase.ich { align-self: flex-end; background: var(--akzent); color: #fff; border-bottom-right-radius: 6px; }
.blase.claude { align-self: flex-start; background: var(--karte); border: 1px solid var(--linie); border-bottom-left-radius: 6px; }
.blase.claude.fehler { border-color: var(--neu); color: var(--neu); }
.blase.claude.denkt { color: var(--grau); }
.blase .md > *:first-child { margin-top: 0; }
.blase .md > *:last-child { margin-bottom: 0; }

/* Das Feld ueber die ganze Breite, die Knoepfe darunter rechtsbuendig. Vorher standen
   sie daneben, und weil beide rund und 44 Punkte breit sind, blieb fuer den Text kaum
   Platz: er rutschte in eine schmale Spalte und die Knoepfe untereinander. */
.eingabe {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: var(--sicher-unten);
}

.eingabe textarea { width: 100%; resize: none; max-height: 8em; }
.eingabe .knoepfe { display: flex; justify-content: flex-end; gap: 8px; }

/* Mikrofon und Papierflieger sollen gleich gross wirken. Der Mikrofonknopf kommt aus
   diktat.js und bringt seine eigene Groesse mit, deshalb hier festgelegt. */
.eingabe .knoepfe button svg { width: 22px; height: 22px; }

/* --- Markdown --------------------------------------------------------------- */

.md h3 { margin: 10px 0 4px; font-size: 16px; }
.md h4 { margin: 8px 0 4px; font-size: 15px; color: var(--grau); }
.md p { margin: 6px 0; }
.md ul { margin: 6px 0; padding-left: 20px; }
.md li { margin: 3px 0; }

/* --- Kamera und Aufnahmen --------------------------------------------------- */

.standzeile:empty { display: none; }
.wartet.schlimm { background: color-mix(in srgb, #d92d20 10%, var(--karte)); border-color: color-mix(in srgb, #d92d20 35%, var(--linie)); color: #b42318; }
.wartet.gut { background: color-mix(in srgb, #12855a 10%, var(--karte)); border-color: color-mix(in srgb, #12855a 35%, var(--linie)); color: #0b6b47; }
.wartet .knoepfe { display: flex; gap: 8px; flex: 0 0 auto; }
.wartet button.warnung { color: #b42318; border-color: color-mix(in srgb, #d92d20 35%, var(--linie)); }

button.flach { border-color: transparent; background: transparent; padding: 10px 12px; }
button.flach.stark { font-weight: 650; color: var(--akzent); }
.sitzungszeile { flex: 0 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; justify-items: center; }
.zaehler { flex: 0 0 auto; text-align: center; font-size: 14px; color: var(--grau); }
label.ersatz { align-items: center; gap: 10px; cursor: pointer; }

.fotokarte { display: flex; flex-direction: column; gap: 10px; padding: 12px; border: 1px solid var(--linie); border-radius: 16px; background: var(--karte); }
.fotokopf { display: flex; align-items: center; gap: 12px; }
.fotokopf img { width: 96px; height: 96px; flex: 0 0 auto; object-fit: cover; border-radius: 10px; background: var(--grund); }
.fotokopf .titel { flex: 1 1 auto; min-width: 0; font-size: 15px; color: var(--grau); }
button.weg { flex: 0 0 auto; color: #b42318; border-color: color-mix(in srgb, #d92d20 30%, var(--linie)); }
.feldname { font-size: 13px; color: var(--grau); }

/* --- Kopfzeile: Aktualisieren und Menü ------------------------------------- */

.kopfknoepfe { display: flex; gap: 6px; flex: 0 0 auto; }

/* Dreht, solange etwas geholt wird. Wer die Bewegung nicht mag, bekommt sie nicht. */
@keyframes dreht { to { transform: rotate(360deg); } }
.rund.dreht svg { animation: dreht 1s linear infinite; }
@media (prefers-reduced-motion: reduce) { .rund.dreht svg { animation: none; } }

/* --- Menü als Blatt von unten ----------------------------------------------- */

/* Kein <dialog>: Safari behandelt das in der Home-Bildschirm-App eigenwillig, und
   gebraucht wird nur ein Blatt mit Dunkelgrund darüber. */
.grund {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: flex-end;
  animation: einblenden 0.15s ease-out;
}

@keyframes einblenden { from { opacity: 0; } }
@keyframes hochschieben { from { transform: translateY(100%); } }

.blatt {
  width: 100%;
  max-height: 80%;
  overflow-y: auto;
  background: var(--karte);
  border-radius: 20px 20px 0 0;
  /* Die untere Safe-Area trägt das Blatt selbst, sonst klebt der letzte Eintrag
     am Bildschirmrand. */
  padding: 8px 12px calc(12px + var(--sicher-unten));
  animation: hochschieben 0.2s ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .grund, .blatt { animation: none; }
}

.blattkopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 4px 10px;
}

.menueeintrag {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 12px;
  border: none;
  border-radius: 14px;
  background: transparent;
  font-size: 17px;
  text-align: left;
}

.menueeintrag + .menueeintrag { border-top: 1px solid var(--linie); border-radius: 14px; }
.menueeintrag:active { background: var(--grund); }
.menueeintrag .sinnbild { flex: 0 0 auto; display: grid; place-items: center; color: var(--akzent); }
.menueeintrag .was { flex: 1 1 auto; min-width: 0; }

.menueeintrag .zahl {
  flex: 0 0 auto;
  min-width: 24px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--akzent);
  color: #fff;
  font-size: 14px;
  font-weight: 650;
  text-align: center;
}