/*
 * Gestaltung der Schulwissen-Plattform.
 *
 * Leitlinien aus SPEC.md §12: ruhig, große Schrift (Grundgröße 17 px), große
 * Klickflächen (mindestens 44 px), gut auf dem iPad bedienbar, ausreichende
 * Kontraste, alles mit der Tastatur erreichbar.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: var(--grundgroesse);
}

body {
  margin: 0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  font-family: var(--schrift);
  font-size: var(--schrift-normal);
  line-height: var(--zeilenhoehe);
  color: var(--text);
  background: var(--flaeche);
  -webkit-text-size-adjust: 100%;
}

a { color:var(--akzent); }

/* --- Sprungmarke für die Tastaturbedienung --- */

.sprungmarke {
  position: absolute;
  left: -9999px;
  padding: 0.75rem 1.25rem;
  background: var(--papier);
  z-index: 100;
}

.sprungmarke:focus {
  left: 1rem;
  top: 0.5rem;
}

/* --- Kopfzeile und Konto --- */
.kopf { background:var(--papier); border-bottom:1px solid var(--linie); }
.kopf-innen { max-width:var(--seitenbreite); min-height:64px; margin:auto; padding:var(--abstand-2) var(--abstand-6); display:flex; align-items:center; gap:var(--abstand-6); }
.kopf-marke { display:flex; align-items:center; gap:var(--abstand-3); color:var(--text); text-decoration:none; flex-shrink:0; }
.kopf-logo { display:grid; place-items:center; width:40px; height:40px; border-radius:var(--radius); background:var(--akzent-leise); color:var(--akzent); }
.kopf-logo .symbol { width:26px; height:26px; }
.kopf-name { display:block; font-size:var(--schrift-abschnitt); font-weight:700; line-height:1.2; letter-spacing:-.03em; }
.kopf-schule { display:block; font-size:var(--schrift-klein); color:var(--text-leise); }
.kopf-mitte { flex:1; min-width:0; }
.kopf-einstiege { display:flex; justify-content:flex-end; gap:var(--abstand-5); }
.kopf-einstiege a { display:inline-flex; align-items:center; gap:var(--abstand-2); min-height:var(--klickflaeche); font-size:var(--schrift-klein); color:var(--text-leise); text-decoration:none; }
.kopf-einstiege a:hover { color:var(--akzent); }
.benutzermenue { position:relative; flex-shrink:0; }
.benutzermenue summary { display:flex; align-items:center; gap:var(--abstand-2); min-height:var(--klickflaeche); padding:var(--abstand-1) var(--abstand-2); border-radius:var(--radius); cursor:pointer; list-style:none; font-size:var(--schrift-klein); }
.benutzermenue summary::-webkit-details-marker { display:none; }
.benutzermenue[open] summary,.benutzermenue summary:hover { background:var(--flaeche-tief); }
.benutzer-avatar { display:grid; place-items:center; width:32px; height:32px; border-radius:50%; background:var(--akzent-leise); color:var(--akzent); font-weight:700; }
.benutzer-name { max-width:12rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.benutzermenue-inhalt { position:absolute; right:0; top:calc(100% + var(--abstand-2)); z-index:60; width:min(320px,calc(100vw - 32px)); max-height:calc(100dvh - 100px); overflow:auto; padding:var(--abstand-2); background:var(--papier); border:1px solid var(--linie); border-radius:var(--radius); box-shadow:var(--schatten-menue); font-size:var(--schrift-klein); }
.benutzermenue-person { margin:0; padding:var(--abstand-3); border-bottom:1px solid var(--linie); }
.benutzermenue-person span { display:block; color:var(--text-leise); }
.benutzermenue-inhalt a,.benutzermenue-inhalt button { display:flex; align-items:center; gap:var(--abstand-3); min-height:var(--klickflaeche); width:100%; padding:var(--abstand-2) var(--abstand-3); background:transparent; border:0; border-radius:var(--radius-feld); color:var(--text); text-decoration:none; text-align:left; font:inherit; cursor:pointer; }
.benutzermenue-inhalt a:hover,.benutzermenue-inhalt button:hover { background:var(--akzent-leise); }
.benutzermenue-inhalt form { margin:0; }
.benutzermenue-abmelden { border-top:1px solid var(--linie); }
@media(max-width:1100px) { .benutzer-name { display:none; } }
@media(max-width:650px) { .kopf-innen { flex-wrap:wrap; padding:var(--abstand-2) var(--abstand-4); gap:var(--abstand-2); justify-content:space-between; } .kopf-mitte { order:3; flex-basis:100%; } .kopf-einstiege { justify-content:flex-start; } }

/* --- Grundgerüst: Navigation links, Inhalt mittig, Nebenspalte rechts --- */

.geruest {
  display: grid;
  grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
  gap: 1.5rem;
  max-width: 100rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
}

.geruest.mit-nebenspalte {
  grid-template-columns: minmax(14rem, 17rem) minmax(0, 1fr) minmax(15rem, 20rem);
}

.geruest.ohne-navigation {
  grid-template-columns: minmax(0, 1fr);
  max-width: 62rem;
}

@media (max-width: 1100px) {
  .geruest,
  .geruest.mit-nebenspalte {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Karten --- */

.karte {
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}

.karte > h2:first-child,
.karte > h3:first-child {
  margin-top: 0;
}

/* --- Gliederungsbaum --- */

.navigation {
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 0.75rem;
  align-self: start;
  position: sticky;
  top: 1rem;
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
}

.navigation h2 {
  font-size: var(--schrift-klein);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-leise);
  margin: 0.25rem 0.5rem 0.75rem;
}

.baum-zeile {
  display: block;
  padding: 0.6rem 0.6rem;
  min-height: var(--klickflaeche);
  border-radius: 6px;
  color: var(--text);
  text-decoration: none;
  line-height: 1.35;
}

.baum-zeile:hover {
  background: var(--flaeche-tief);
}

.baum-zeile.ist-hier {
  background: var(--akzent-leise);
  box-shadow: inset 3px 0 0 var(--akzent);
  font-weight: 600;
}

.baum-nummer {
  color: var(--text-leise);
  font-variant-numeric: tabular-nums;
  margin-right: 0.4rem;
}

.baum-tiefe-1 { padding-left: 1.5rem; }
.baum-tiefe-2 { padding-left: 2.6rem; font-size: var(--schrift-klein); }
.baum-tiefe-3 { padding-left: 3.6rem; font-size: var(--schrift-klein); }

/* Einspaltig (Tablet, Handy) darf die Gliederung nicht kleben – sonst liegt
   sie über dem Formular. Sie bekommt eine eigene Höhe und scrollt für sich.
   Diese Regel muss NACH der .navigation-Regel oben stehen, sonst gewinnt die
   spätere. */
@media (max-width: 1100px) {
  .navigation {
    position: static;
    max-height: 18rem;
    margin-bottom: 1.25rem;
  }
}

/* --- Überschriften --- */

h1 { font-size: var(--schrift-titel); line-height: 1.25; margin: 0 0 0.5rem; }
h2 { font-size: var(--schrift-abschnitt); line-height: 1.3; margin: 1.75rem 0 0.5rem; }
h3 { font-size: var(--schrift-normal); margin: 1.25rem 0 0.4rem; }

/* Schulsprache ist voll von langen Zusammensetzungen –
   „Kompetenzerwartungen“, „Rechtschreibstrategien“. In einer Überschrift
   passt so ein Wort auf einem 390 px breiten Bildschirm nicht in eine Zeile
   und würde die ganze Seite seitlich verschieben. */
h1, h2, h3, h4 { overflow-wrap: anywhere; }

.ueberschrift-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem;
}

.kennung {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--schrift-klein);
  background: var(--flaeche-tief);
  border-radius: 5px;
  padding: 0.15rem 0.45rem;
  color: var(--text-leise);
}

.brotkrumen {
  font-size: var(--schrift-klein);
  color: var(--text-leise);
  margin-bottom: 0.75rem;
}

.brotkrumen a { color: var(--akzent); }

/* --- Schilder --- */

.schild {
  display: inline-block;
  font-size: var(--schrift-klein);
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid transparent;
}

.schild-idee        { background: var(--flaeche-tief); color: var(--text-leise); }
.schild-entwurf     { background: var(--warnung-flaeche); color: var(--warnung); }
.schild-abgestimmt  { background: var(--info-flaeche); color: var(--info); }
.schild-beschlossen { background: var(--gut-flaeche); color: var(--gut); }
.schild-archiviert  { background: var(--flaeche-tief); color: var(--text-leise); }

.schild-klein { font-size: var(--schrift-klein); padding: 0.1rem 0.45rem; }

/* --- Knöpfe --- */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: var(--klickflaeche);
  padding: 0 1.15rem;
  font: inherit;
  font-weight: 600;
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius);
  background: var(--papier);
  color: var(--text);
  cursor: pointer;
  text-decoration: none;
}

.knopf:hover { background: var(--flaeche-tief); }

.knopf-wichtig {
  background: var(--akzent);
  border-color: var(--akzent-dunkel);
  color: var(--akzent-kontrast);
}

.knopf-wichtig:hover { background: var(--akzent-dunkel); }

.knopf-leise {
  border-color: transparent;
  background: transparent;
  color: var(--akzent);
  padding: 0 0.5rem;
}

.knopf-leise:hover { background: var(--akzent-leise); }

.knopf-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 2px;
}

/* --- Formulare --- */

.block {
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  background: var(--papier);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}

.block-leistung {
  background: var(--leistung);
  border-left: 5px solid var(--leistung-linie);
}

.block > h2 {
  margin-top: 0;
  font-size: var(--schrift-normal);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--linie);
}

.feld { margin-bottom: 1.5rem; }

.feld > label,
.feld-beschriftung {
  display: block;
  font-weight: 600;
  margin-bottom: 0.3rem;
}

.feld-pflicht {
  color: var(--fehler);
  margin-left: 0.2rem;
}

.feld-hilfe {
  font-size: var(--schrift-klein);
  color: var(--text-leise);
  margin: 0.15rem 0 0.4rem;
}

.feld input[type="text"],
.feld input[type="url"],
.feld input[type="email"],
.feld input[type="password"],
.feld input[type="number"],
.feld input[type="date"],
.feld select,
.feld textarea {
  width: 100%;
  min-height: var(--klickflaeche);
  font: inherit;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--linie-stark);
  border-radius: 6px;
  background: var(--papier);
  color: var(--text);
}

.feld textarea { min-height: 6rem; resize: vertical; }

.feld input[type="number"] { max-width: 10rem; }

.feld select { max-width: 28rem; }

.feld-berechnet {
  font-size: var(--schrift-normal);
  font-weight: 600;
  background: var(--flaeche-tief);
  border-radius: 6px;
  padding: 0.55rem 0.8rem;
  display: inline-block;
  min-width: 6rem;
}

.feld-fehler {
  color: var(--fehler);
  font-weight: 600;
  margin-top: 0.3rem;
}

/* --- Meldungen --- */

.meldung {
  border-radius: var(--radius);
  padding: 0.9rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid;
}

.meldung-success { background: var(--gut-flaeche); border-color: var(--gut); color: var(--gut); }
.meldung-warning { background: var(--warnung-flaeche); border-color: var(--warnung); color: var(--warnung); }
.meldung-error   { background: var(--fehler-flaeche); border-color: var(--fehler); color: var(--fehler); }
.meldung-info    { background: var(--akzent-leise); border-color: var(--akzent); color: var(--akzent-dunkel); }

.hinweis-beschluss {
  background: var(--gut-flaeche);
  border: 1px solid var(--gut);
  border-radius: var(--radius);
  padding: 0.85rem 1.25rem;
  margin-bottom: 1.25rem;
  font-weight: 600;
  color: var(--gut);
}

.hinweis-entwurf {
  background: var(--warnung-flaeche);
  border: 1px solid var(--warnung);
  border-radius: var(--radius);
  padding: 0.85rem 1.25rem;
  margin-bottom: 1.25rem;
  color: var(--warnung);
}

/* --- Leseansicht --- */

.lesefeld { margin-bottom: 1.5rem; }

.lesefeld-inhalt > *:first-child { margin-top: 0; }
.lesefeld-inhalt > *:last-child { margin-bottom: 0; }

.lesefeld-inhalt table {
  border-collapse: collapse;
  width: 100%;
  margin: 0.75rem 0;
}

.lesefeld-inhalt th,
.lesefeld-inhalt td {
  border: 1px solid var(--linie-stark);
  padding: 0.5rem 0.7rem;
  text-align: left;
  vertical-align: top;
}

.lesefeld-inhalt th { background: var(--flaeche-tief); }

/* --- Kompetenzen --- */

.kompetenzliste {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.kompetenz {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 6px;
  padding: 0.5rem 0.7rem;
}

.kompetenz-kennung {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: var(--schrift-klein);
  font-weight: 700;
  background: var(--akzent);
  color: var(--akzent-kontrast);
  border-radius: 4px;
  padding: 0.12rem 0.4rem;
  white-space: nowrap;
  margin-top: 0.15rem;
}

.kompetenz-text { flex: 1; line-height: 1.45; }

.kompetenz-stufe {
  font-size: var(--schrift-klein);
  color: var(--text-leise);
  white-space: nowrap;
}

/* Auswahl-Widget */

.auswahl { border: 1px solid var(--linie-stark); border-radius: var(--radius); overflow: hidden; }

.auswahl-kopf {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.6rem;
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
}

.auswahl-kopf input[type="search"] { flex: 1 1 12rem; min-height: var(--klickflaeche); }
.auswahl-kopf select { min-height: var(--klickflaeche); }

.auswahl-gewaehlt {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.7rem;
  min-height: 3.5rem;
  background: var(--papier);
}

.auswahl-gewaehlt:empty::after {
  content: "Noch keine Kompetenz gewählt.";
  color: var(--text-leise);
}

.marke {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--akzent-leise);
  border: 1px solid var(--akzent);
  border-radius: 999px;
  padding: 0.25rem 0.3rem 0.25rem 0.6rem;
  font-size: var(--schrift-klein);
  max-width: 100%;
}

.marke-kennung { font-weight: 700; font-family: ui-monospace, Menlo, monospace; font-size: var(--schrift-klein); }

.marke-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 22rem;
}

.marke-weg {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: var(--schrift-normal);
  line-height: 1;
  min-width: 1.9rem;
  min-height: 1.9rem;
  border-radius: 999px;
  color: var(--akzent-dunkel);
}

.marke-weg:hover { background:var(--papier); }

.auswahl-treffer { max-height: 20rem; overflow-y: auto; border-top: 1px solid var(--linie); }

.treffer-knopf {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  width: 100%;
  text-align: left;
  font: inherit;
  background: var(--papier);
  border: 0;
  border-bottom: 1px solid var(--flaeche-tief);
  padding: 0.65rem 0.7rem;
  cursor: pointer;
  min-height: var(--klickflaeche);
}

.treffer-knopf:hover { background: var(--akzent-leise); }
.treffer-knopf[disabled] { opacity: 0.5; cursor: default; }

/* --- Editor --- */

.editor { border: 1px solid var(--linie-stark); border-radius: 6px; background: var(--papier); }

.editor-leiste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding: 0.4rem;
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
}

.editor-knopf {
  min-height: 2.3rem;
  min-width: 2.3rem;
  padding: 0 0.6rem;
  font: inherit;
  font-size: var(--schrift-klein);
  border: 1px solid var(--linie);
  border-radius: 5px;
  background: var(--papier);
  cursor: pointer;
}

.editor-knopf:hover { background: var(--flaeche-tief); }
.editor-knopf.ist-aktiv { background: var(--akzent); border-color: var(--akzent-dunkel); color:var(--akzent-kontrast); }

.editor-trenner { width: 1px; background: var(--linie); margin: 0.2rem 0.3rem; }

.editor-flaeche .ProseMirror {
  min-height: 9rem;
  padding: 0.75rem 0.9rem;
  outline: none;
}

.editor-flaeche .ProseMirror > *:first-child { margin-top: 0; }

.editor-flaeche table { border-collapse: collapse; width: 100%; }

.editor-flaeche th,
.editor-flaeche td {
  border: 1px solid var(--linie-stark);
  padding: 0.4rem 0.55rem;
  min-width: 4rem;
}

.editor-flaeche th { background: var(--flaeche-tief); }

.editor-flaeche .selectedCell { background: var(--akzent-leise); }

.editor-quelle { display: none; }

/* Bedingte Felder (z. B. „Klassenarbeit") sind verborgen, bis Alpine geladen
   ist – sonst blitzen sie beim Laden der Maske kurz auf. */
[x-cloak] { display: none !important; }

/* --- Tabellen --- */

.tabelle { width: 100%; border-collapse: collapse; }

.tabelle th,
.tabelle td {
  border-bottom: 1px solid var(--linie);
  padding: 0.6rem 0.65rem;
  text-align: left;
  vertical-align: top;
}

.tabelle th { background: var(--flaeche-tief); font-size: var(--schrift-klein); }

.tabelle tbody tr:hover { background: var(--flaeche); }

.tabelle .zahl { text-align: right; font-variant-numeric: tabular-nums; }

.tabelle tr.summe td,
.tabelle tr.summe th { font-weight: 700; border-top: 2px solid var(--linie-stark); background: var(--flaeche); }

/* Abdeckungsmatrix: fehlt rot, nur berührt gelb, Schwerpunkt grün. */
.abdeckung-schwerpunkt { background: var(--gut-flaeche); color: var(--gut); font-weight: 600; }
.abdeckung-beruehrt    { background: var(--warnung-flaeche); color: var(--warnung); font-weight: 600; }
.abdeckung-fehlt       { background: var(--fehler-flaeche); color: var(--fehler); font-weight: 600; }

.balken {
  display: block;
  height: 0.55rem;
  border-radius: 999px;
  background: var(--flaeche-tief);
  overflow: hidden;
  min-width: 5rem;
}

.balken > span { display: block; height: 100%; background: var(--gut); }

/* --- Nebenspalte --- */

.nebenspalte { align-self: start; }

@media (min-width: 1101px) {
  .nebenspalte { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
}

.nebenspalte .karte { padding: 1rem 1.15rem; }
.nebenspalte h3 { font-size: var(--schrift-normal); margin-top: 0; }

.liste-schlicht { list-style: none; margin: 0; padding: 0; }
.liste-schlicht > li { padding: 0.4rem 0; border-bottom: 1px solid var(--flaeche-tief); }
.liste-schlicht > li:last-child { border-bottom: 0; }

.kommentar { border-left: 3px solid var(--linie-stark); padding: 0.1rem 0 0.1rem 0.75rem; margin-bottom: 1rem; }
.kommentar.ist-erledigt { opacity: 0.6; border-left-color: var(--gut); }
.kommentar-kopf { font-size: var(--schrift-klein); color: var(--text-leise); }

.leise { color: var(--text-leise); }
.klein { font-size: var(--schrift-klein); }
.nur-fuer-vorleser {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* --- Allgemeine Seiten und Druck --- */
main { flex:1; min-width:0; }
.start { max-width:56rem; margin:auto; padding:var(--abstand-7) var(--abstand-5); }
.anmeldung { max-width:26rem; margin:var(--abstand-7) auto; padding:0 var(--abstand-5); }
.seitenfuss { max-width:var(--seitenbreite); width:100%; margin:auto; padding:var(--abstand-5) var(--abstand-6); display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--abstand-2); color:var(--text-leise); font-size:var(--schrift-klein); }
@media print {
 .kopf,.navigation,.nebenspalte,.knopf-reihe,.sprungmarke,.seitenfuss,.meldungen { display:none!important; }
 .geruest,.geruest.mit-nebenspalte { display:block; padding:0; }
 .karte,.block { border:0; box-shadow:none; padding:0; }
 body { background:var(--papier); font-size:11pt; display:block; }
}

/* --- Suche ---------------------------------------------------------------- */

.vorschlaege {
  position: absolute;
  z-index: 50;
  left: 0;
  right: 0;
  top: calc(100% + 0.3rem);
  background: var(--papier);
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius);
  box-shadow: var(--schatten-menue);
  max-height: 26rem;
  overflow-y: auto;
}

.vorschlaege:empty { display: none; }

/* Das Suchfeld ist der Bezugspunkt für die Vorschlagsliste darunter. */
.kopf-suche,
.start-suche { position: relative; }

.vorschlagsliste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.vorschlagsliste > li { border-bottom: 1px solid var(--flaeche-tief); }
.vorschlagsliste > li:last-child { border-bottom: 0; }

.vorschlagsliste a {
  display: block;
  padding: 0.6rem 0.8rem;
  min-height: var(--klickflaeche);
  color: var(--text);
  text-decoration: none;
  line-height: 1.4;
}

.vorschlagsliste a:hover,
.vorschlagsliste a:focus-visible { background: var(--akzent-leise); }

.vorschlag-titel { font-weight: 600; }

.vorschlag-kontext {
  display: block;
  font-size: var(--schrift-klein);
  color: var(--text-leise);
}

.vorschlag-hinweis {
  margin: 0;
  padding: 0.75rem 0.8rem;
  font-size: var(--schrift-klein);
  color: var(--text-leise);
}

.trefferliste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.treffer {
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--flaeche-tief);
}

.treffer:last-child { border-bottom: 0; }

.treffer-titel {
  font-size: var(--schrift-normal);
  font-weight: 600;
  color: var(--akzent);
  text-decoration: none;
}

.treffer-titel:hover { text-decoration: underline; }

.treffer-kontext {
  margin: 0.2rem 0 0;
  font-size: var(--schrift-klein);
  color: var(--text-leise);
}

.treffer-ausschnitt {
  margin: 0.35rem 0 0;
  line-height: 1.55;
}

/* Die Hervorhebung kommt aus PostgreSQL (SearchHeadline). */
mark {
  background: var(--markierung);
  color: inherit;
  padding: 0 0.12em;
  border-radius: 3px;
  font-weight: 600;
}

.filterreihe {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 0.9rem;
}

.filterreihe label {
  display: block;
  font-size: var(--schrift-klein);
  font-weight: 600;
  margin-bottom: 0.2rem;
}

.filterreihe select,
.filterreihe input[type="text"] {
  min-height: var(--klickflaeche);
  font: inherit;
  padding: 0 0.6rem;
  border: 1px solid var(--linie-stark);
  border-radius: 6px;
  background: var(--papier);
  color: var(--text);
}

/* --- Fassungsvergleich ---------------------------------------------------- */

.vergleich { line-height: 1.8; }

ins {
  background: var(--gut-flaeche);
  color: var(--gut);
  text-decoration: none;
  padding: 0.05em 0.15em;
  border-radius: 3px;
}

del {
  background: var(--fehler-flaeche);
  color: var(--fehler);
  padding: 0.05em 0.15em;
  border-radius: 3px;
}

/* --- Auswertungen --------------------------------------------------------- */

.auswertungen-navigation {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 1.25rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--linie);
}

.auswertungen-navigation a {
  display: inline-flex;
  align-items: center;
  min-height: 2.4rem;
  padding: 0 0.8rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  background: var(--papier);
  color: var(--text);
  text-decoration: none;
  font-size: var(--schrift-klein);
}

.auswertungen-navigation a:hover { background: var(--akzent-leise); }

.fahrplan {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.fahrplan-spalte {
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 0.9rem;
}

.fahrplan-spalte > h2 {
  margin: 0 0 0.7rem;
  font-size: var(--schrift-normal);
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--linie);
}

.fahrplan-karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 6px;
  padding: 0.6rem 0.7rem;
  margin-bottom: 0.6rem;
}

.fahrplan-karte a { color: var(--text); text-decoration: none; font-weight: 600; }
.fahrplan-karte a:hover { text-decoration: underline; }

.progression {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.9rem;
  margin-top: 0.9rem;
}

.progression-spalte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 6px;
  padding: 0.7rem 0.8rem;
}

.progression-spalte.ist-offen { background: var(--fehler-flaeche); border-color: var(--fehler); }

.progression-spalte > h3 {
  margin: 0 0 0.4rem;
  font-size: var(--schrift-klein);
  color: var(--text-leise);
}

/* --- Nextcloud-Dateiauswahl ----------------------------------------------- */

.dateizeichen {
  display: inline-block;
  min-width: 3.6rem;
  text-align: center;
  font-size: var(--schrift-klein);
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  background: var(--flaeche-tief);
  color: var(--text-leise);
}

/* Noch nicht freigegebene Kapitel: als Gerüst sichtbar, aber nicht anklickbar. */
.baum-zeile.ist-gesperrt {
  color: var(--text-leise);
  cursor: default;
}

.baum-zeile.ist-gesperrt:hover { background: transparent; }

/* Persönliche Planung: Häkchen auch auf dem Tablet sicher treffen. */
.feld input[type="checkbox"] {
  width: 1.5rem;
  height: 1.5rem;
  accent-color: var(--akzent);
}

/* --- Gemeinsame Komponenten des neuen Grundlayouts --- */
.symbol-vorrat { position:absolute; width:0; height:0; overflow:hidden; }
.symbol { width:var(--symbolgroesse); height:var(--symbolgroesse); flex-shrink:0; vertical-align:middle; }
.knopf { gap:var(--abstand-2); min-width:var(--klickflaeche); border-radius:var(--radius-feld); }
.knopf-gefahr { color:var(--fehler); border-color:var(--fehler); }
.knopf:disabled { opacity:.5; cursor:not-allowed; }
:focus-visible { outline:3px solid var(--fokus); outline-offset:3px; }
.schild::before { content:""; display:inline-block; width:6px; height:6px; margin-right:var(--abstand-2); border-radius:50%; background:currentColor; vertical-align:middle; }
.suchformular { position:relative; margin:0; }
.suchfeld { display:flex; align-items:center; gap:var(--abstand-2); min-height:var(--klickflaeche); padding:var(--abstand-1); border:1px solid var(--linie-stark); border-radius:var(--radius); background:var(--papier); }
.suchfeld:focus-within { outline:2px solid var(--fokus); outline-offset:2px; }
.suchfeld-symbol { color:var(--text-leise); display:flex; padding-left:var(--abstand-2); }
.suchfeld input { flex:1; min-width:0; width:100%; min-height:var(--klickflaeche); padding:var(--abstand-2); border:0; background:transparent; color:var(--text); font:inherit; outline:none; }
.suchfeld input::placeholder { color:var(--text-leise); opacity:1; }
.kopf-suche { display:block; }
.kopf-suche .suchfeld { font-size:var(--schrift-klein); }
.suchfeld .knopf { flex-shrink:0; }
.vorschlaege { text-align:left; box-shadow:var(--schatten-menue); }
.vorschlagsliste [aria-selected="true"] a { background:var(--akzent-leise); outline:2px solid var(--fokus); outline-offset:-2px; }
.suchfeld-laden { width:16px; height:16px; flex-shrink:0; border:2px solid var(--linie); border-top-color:var(--akzent); border-radius:50%; animation:suche-laedt .8s linear infinite; }
@keyframes suche-laedt { to { transform:rotate(360deg); } }
.meldungen { position:fixed; bottom:var(--abstand-5); left:50%; transform:translateX(-50%); z-index:80; width:min(38rem,calc(100% - 32px)); }
.toast { display:flex; align-items:center; gap:var(--abstand-3); margin:var(--abstand-2) 0 0; box-shadow:var(--schatten-menue); }
.toast>span { flex:1; }
.symbol-knopf { display:inline-flex; align-items:center; justify-content:center; min-width:var(--klickflaeche); min-height:var(--klickflaeche); padding:var(--abstand-2); background:transparent; border:0; color:inherit; cursor:pointer; border-radius:var(--radius-feld); }
.meldung-info { background:var(--info-flaeche); color:var(--info); border-color:var(--info); }
.leerer-zustand { width:100%; padding:var(--abstand-6); border:1px dashed var(--linie-stark); border-radius:var(--radius); text-align:center; color:var(--text-leise); }
.leerer-zustand h3 { color:var(--text); }
.accordion { border:1px solid var(--linie); border-radius:var(--radius); background:var(--papier); }
.accordion summary { min-height:var(--klickflaeche); cursor:pointer; padding:var(--abstand-3) var(--abstand-4); font-weight:600; }
.accordion>div { padding:0 var(--abstand-4) var(--abstand-4); }
.anhang-kachel { display:flex; align-items:center; gap:var(--abstand-3); padding:var(--abstand-4); border:1px solid var(--linie); border-radius:var(--radius); color:var(--text); text-decoration:none; min-height:var(--klickflaeche); }
.anhang-kachel small { display:block; color:var(--text-leise); font-size:var(--schrift-klein); }
.tabelle-rahmen { overflow:auto; max-height:20rem; border:1px solid var(--linie); border-radius:var(--radius); }
.tabelle-rahmen table { margin:0; }
.tabelle-rahmen th { position:sticky; top:0; background:var(--flaeche-tief); }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

.kompetenz-chip { display:inline-flex; align-items:center; gap:var(--abstand-2); padding:var(--abstand-2) var(--abstand-3); background:var(--akzent-leise); color:var(--akzent); border:1px solid var(--linie); border-radius:var(--radius-rund); font-size:var(--schrift-klein); }

.gueltigkeitsbanner { display:flex; align-items:flex-start; gap:var(--abstand-3); padding:var(--abstand-4); border:1px solid; border-radius:var(--radius); margin:var(--abstand-4) 0; }
.gueltigkeitsbanner .symbol { margin-top:var(--abstand-1); }
.gueltigkeitsbanner p { margin:var(--abstand-1) 0 0; }
.gueltigkeitsbanner-beschlossen { background:var(--gut-flaeche); color:var(--gut); border-color:var(--gut); }
.gueltigkeitsbanner-entwurf { background:var(--warnung-flaeche); color:var(--warnung); border-color:var(--warnung); }

.vorschlagsliste [role="group"]>ul { list-style:none; margin:0; padding:0; }
.vorschlag-gruppe { display:block; padding:var(--abstand-3) var(--abstand-4) var(--abstand-1); font-size:var(--schrift-klein); font-weight:600; color:var(--text-leise); background:var(--flaeche); }
.vorschlagsliste { max-height:60vh; overflow:auto; }
.vorschlagsliste [role="option"] a { min-height:var(--klickflaeche); }
.vorschlagsliste .vorschlag-titel { display:block; }