/* Projekt-Werkstatt – schlichtes eigenes CSS, keine externen Schriften */
:root {
  /* Farben aus dem Schullogo (Rot #B51621, Grau #868889). Leise geführt (08.11.2026):
     Handlungen in gedämpftem, leicht grauem Rot mit flachem Verlauf (Weiß darauf 5,2:1),
     Flächen nur als Hauch (rgba 6–8 %). Der volle Markenton bleibt Fehlern, Löschen und
     Warnungen vorbehalten. Tinte bleibt Text- und Fokusfarbe — sonst liest sich jede
     Tastaturmarkierung als Warnung. */
  --handeln: #a04a50; --handeln-hell: #f8eef0; --text: #1c1e20; --grau: #5f6365; --linie: #e2e2e2;
  --verlauf: linear-gradient(180deg, #a85156 0%, #96424a 100%);
  --grund: #f6f6f6; --weiss: #fff; --gruen: #137a55; --gruen-hell: #e4f6ef; --rot: #b51621; --rot-hell: #fbeff0;
  --gelb-hell: #fff7d6; --gelb: #8a6100;
  --marke: #b51621; --marke-linie: rgba(181, 22, 33, .42); --marke-schleier: rgba(181, 22, 33, .06);
}
/* Immer gleiche Breite, auch wenn eine Seite kurz ist: sonst springt der Kopf beim
   Wechsel zwischen Seiten mit und ohne Bildlaufleiste (gemeldet 08.11.2026). */
html { overflow-y: scroll; scrollbar-gutter: stable; }
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif; color: var(--text);
  background: var(--grund); line-height: 1.45; font-size: 16px; display: flex; flex-direction: column; min-height: 100vh; }
a { color: #96424a; text-decoration: underline; text-decoration-color: rgba(150, 66, 74, .38);
  text-underline-offset: 2px; }
code { font-family: Consolas, "Courier New", monospace; background: #f2f3f3; padding: 0 4px; border-radius: 4px; }
h1 { font-size: 1.6rem; margin: 0 0 .3rem; } h2 { font-size: 1.2rem; margin: 0 0 .6rem; }

.kopf { display: flex; align-items: center; gap: .9rem; padding: .6rem 1.2rem; background: var(--weiss);
  border-bottom: 1px solid var(--linie); box-shadow: 0 2px 0 rgba(181, 22, 33, .14); flex-wrap: wrap; }
.marke { display: flex; align-items: center; gap: .5rem; font-weight: 700; font-size: 1rem; color: var(--text); text-decoration: none; }
/* Feste Box: sonst ist das Logo bis zum Dekodieren 0 px breit, und Kopf samt Navigation
   springen beim Seitenwechsel nach rechts (gemeldet 08.11.2026). */
.logo { width: 52px; height: 44px; object-fit: contain; flex: none; }
.logo-gross { max-height: 80px; max-width: 100%; display: block; margin: 0 auto .6rem; }
.nav { display: flex; gap: .45rem; flex-wrap: wrap; }
.nav a, .nav-bald { padding: .4rem .5rem; border-radius: 6px; text-decoration: none; color: var(--text); font-weight: 600; }
.nav a:hover { background: var(--handeln-hell); }
.nav a.aktiv { background: transparent; color: var(--text); box-shadow: inset 0 -2px 0 var(--marke-linie);
  text-decoration: none; }
.nav-bald { color: #a3abb5; cursor: default; }
.wer { margin-left: auto; color: var(--grau); font-size: .9rem; }
.kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: .7rem; flex: none; }
.kopf-rechts .wer { margin-left: 0; }
.abmelden { margin: 0; }

.inhalt { flex: 1; width: 100%; max-width: 1100px; margin: 0 auto; padding: 1.5rem 1.2rem 3rem; }
.fuss { text-align: center; color: var(--grau); font-size: .8rem; padding: 1rem; border-top: 1px solid var(--linie); background: var(--weiss); }
.fuss .fassung { display: block; margin-top: .15rem; font-size: .74rem; color: #8a8d8f; font-variant-numeric: tabular-nums; }

.karte { background: var(--weiss); border: 1px solid var(--linie); border-radius: 10px; padding: 1.2rem 1.4rem; margin: 1rem 0; }
.karte.schmal { max-width: 420px; margin: 2rem auto; }
.karte.schritt { border-left: 3px solid var(--marke-linie); }
.leise { color: var(--grau); }

.formular { display: flex; flex-direction: column; gap: .8rem; }
.formular.zeile { flex-direction: row; flex-wrap: wrap; align-items: flex-end; }
.formular label { display: flex; flex-direction: column; gap: .25rem; font-weight: 600; font-size: .95rem; }
.formular label.haken { flex-direction: row; align-items: center; font-weight: 400; }
input, select, textarea { font: inherit; padding: .5rem .6rem; border: 1px solid var(--linie); border-radius: 6px; background: #fff; min-width: 12rem; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--text); outline-offset: 1px; }
.knopf { display: inline-block; font: inherit; font-weight: 600; padding: .5rem 1rem; border-radius: 6px; border: 1px solid #96424a;
  background: var(--verlauf); color: #fff; cursor: pointer; text-decoration: none; }
.knopf:hover { filter: brightness(1.1); }
.knopf.leise { background: #fff; color: var(--text); border-color: var(--linie); }

.meldung { padding: .7rem 1rem; border-radius: 8px; margin: .6rem 0; border: 1px solid; }
.meldung.ok { background: var(--gruen-hell); border-color: #9ad9bf; color: var(--gruen); }
.meldung.fehler { background: var(--rot-hell); border-color: #eeb3ad; color: var(--rot); }
.meldung.hinweis { background: var(--gelb-hell); border-color: #ecd36a; color: var(--gelb); }

.tabelle { width: 100%; border-collapse: collapse; margin: .5rem 0 1rem; }
.tabelle th, .tabelle td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
.tabelle th { font-size: .85rem; color: var(--grau); }
.tabelle.klein { font-size: .85rem; background: var(--weiss); }
.tabelle tr.gesperrt td { color: #a3abb5; }
.aktionen { display: flex; gap: .3rem; flex-wrap: wrap; }
.aktionen form { margin: 0; }
.aktionen .knopf { padding: .25rem .6rem; font-size: .85rem; }

.zettel-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
.zettel { border: 2px dashed var(--grau); border-radius: 8px; padding: 1rem; background: #fff; display: flex; flex-direction: column; gap: .3rem; }
.zettel-kopf { font-weight: 700; }
@media print {
  .kopf, .fuss, .nicht-drucken { display: none; }
  body { background: #fff; } .inhalt { padding: 0; max-width: none; }
  .zettel { break-inside: avoid; }
}

/* Gruppe */
.knopfreihe { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.leise-karte { background: #fbfcfd; }
.ablauf li { margin: .3rem 0; }
.ampel { list-style: none; padding: 0; margin: .4rem 0; }
.ampel li { display: flex; gap: .6rem; align-items: flex-start; padding: .45rem .6rem; border-radius: 6px; margin: .3rem 0; }
.ampel .punkt { flex: 0 0 .8rem; height: .8rem; border-radius: 50%; margin-top: .35rem; }
.ampel .ok { background: var(--gruen-hell); } .ampel .ok .punkt { background: var(--gruen); }
.ampel .warnung { background: var(--gelb-hell); } .ampel .warnung .punkt { background: #d29b00; }
.ampel .fehler { background: var(--rot-hell); } .ampel .fehler .punkt { background: var(--rot); }
.ampel .hinweis { background: #f1f2f2; } .ampel .hinweis .punkt { background: var(--grau); }
.zaehler { font-weight: 600; } .zaehler.zu-viele { color: var(--rot); }
.dateiliste td { vertical-align: middle; }
input.haken { min-width: 0; width: 1.3rem; height: 1.3rem; }
.marke-neu { background: var(--gelb-hell); color: var(--gelb); border: 1px solid #ecd36a; border-radius: 4px; padding: 0 5px; font-size: .8rem; font-weight: 700; }
.starttext { white-space: pre-wrap; background: var(--grund); border: 1px solid var(--linie); border-radius: 8px; padding: 1rem; font-family: inherit; font-size: .95rem; }
.werkzeugleiste { margin-bottom: .6rem; }
.umschalter { display: flex; gap: .3rem; }
.rahmen { background: #e9ecf0; border: 1px solid var(--linie); border-radius: 10px; padding: .8rem; display: flex; justify-content: center; }
.rahmen iframe { border: 0; background: #fff; width: 100%; height: 75vh; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.rahmen.smartphone iframe { width: 390px; height: 760px; }
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1rem; align-items: stretch; }
.kachel { margin: 0; display: flex; flex-direction: column; }
.kachel > p:first-of-type { min-height: 3em; }
.kachel .copilot { min-height: 5.8em; }
.kachel .materialliste { flex: 1; }
.copilot { font-weight: 700; padding: .4rem .6rem; border-radius: 6px; }
.copilot.ja { background: var(--gruen-hell); color: var(--gruen); }
.copilot.einmal { background: var(--handeln-hell); color: var(--handeln); }
.copilot.nie { background: var(--rot-hell); color: var(--rot); }
.ablage input[type=file] { border: 2px dashed var(--linie); padding: 1rem; width: 100%; background: var(--grund); }
.materialliste { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-direction: column; gap: .5rem; }
.materialliste li { display: flex; gap: .6rem; align-items: center; border: 1px solid var(--linie); border-radius: 8px; padding: .5rem; flex-wrap: wrap; }
.materialliste li.inaktiv { opacity: .55; }
.vorschaubild { width: 64px; height: 48px; object-fit: cover; border-radius: 4px; border: 1px solid var(--linie); }
.materialtext { display: flex; flex-direction: column; flex: 1; min-width: 10rem; gap: .1rem; }
.materialtext code { overflow-wrap: anywhere; }
.status { font-size: .85rem; color: var(--grau); }
.bildzeile { font-size: .8rem; color: var(--grau); }
.materialknoepfe { display: flex; gap: .3rem; flex-wrap: wrap; }
.materialknoepfe form { margin: 0; }
.knopf.klein { padding: .2rem .5rem; font-size: .8rem; }
.material-kategorie { border: 1px solid var(--linie); border-radius: 8px; margin: .6rem 0; padding: .6rem .8rem; background: var(--weiss); }
.material-kategorie[open] { border-color: var(--handeln); box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.material-kategorie summary { font-size: 1rem; cursor: pointer; padding: .2rem 0; outline: none; }
.material-filter { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .8rem; }

/* Lehrkraft */
.klassenkopf { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.lieferung { border-top: 1px solid var(--linie); padding: .7rem 0; }
.lieferung-kopf { display: flex; gap: .7rem; align-items: center; flex-wrap: wrap; }
.marke-art { font-size: .78rem; font-weight: 700; border-radius: 4px; padding: 0 6px; background: var(--handeln-hell); color: var(--handeln); }
.marke-art.arbeitsstand, .marke-art.interview, .marke-art.feedbackrunde { background: var(--gelb-hell); color: var(--gelb); }
.marke-art.final { background: var(--gruen-hell); color: var(--gruen); }
.diff { font-family: Consolas, "Courier New", monospace; font-size: .8rem; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.diff .plus, td.plus { color: var(--gruen); } .diff .plus { background: var(--gruen-hell); display: inline-block; width: 100%; }
.diff .minus, td.minus { color: var(--rot); } .diff .minus { background: var(--rot-hell); display: inline-block; width: 100%; }
.diff .kopf { color: var(--handeln); font-weight: 700; }

.knopf.loeschen { color: var(--rot); border-color: #e3a29c; }
.situationen { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .6rem; }
.situation { display: flex; flex-direction: column; gap: .2rem; padding: .8rem 1rem; border: 2px solid var(--linie); border-radius: 8px; text-decoration: none; color: var(--text); background: #fff; }
.situation:hover { border-color: var(--handeln); }
.situation.gewaehlt { border-color: var(--handeln); background: var(--handeln-hell); }
.situation-titel { font-weight: 700; }
.situation-chat { font-size: .85rem; color: var(--grau); }
.alle-starttexte summary { cursor: pointer; font-weight: 700; }
.alle-starttexte h3 { font-size: 1rem; margin: 1rem 0 .3rem; }

.stundenband { background: #fff3c4; border-bottom: 3px solid #d29b00; padding: .7rem 1.2rem; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; justify-content: center; font-size: 1.05rem; }
.stundenband[hidden] { display: none; }
.ampelpunkt { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; vertical-align: -1px; }
.ampelpunkt.gruen { background: var(--gruen); } .ampelpunkt.gelb { background: #d29b00; } .ampelpunkt.grau { background: #c4cad2; }
.stundenformular { margin: .6rem 0 1.2rem; padding: .6rem 0 1rem; border-top: 1px dashed var(--linie); border-bottom: 1px dashed var(--linie); }

/* Ablaufleiste */
.ablaufleiste { background: #fff; border-bottom: 1px solid var(--linie); padding: .5rem 1.2rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.ablauf-titel { font-weight: 700; font-size: .85rem; color: var(--grau); text-transform: uppercase; letter-spacing: .04em; }
.ablaufleiste ol { list-style: none; margin: 0; padding: 0; display: flex; gap: .3rem; flex: 1; flex-wrap: wrap; }
.ablaufleiste li { flex: 1; min-width: 150px; }
.ablaufleiste .schritt { display: flex; gap: .5rem; align-items: center; padding: .35rem .6rem; border-radius: 8px; text-decoration: none; color: var(--grau); background: var(--grund); border: 2px solid transparent; height: 100%; }
.ablaufleiste .schritt-nr { flex: 0 0 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; background: #c4cad2; color: #fff; font-weight: 800; font-size: .85rem; }
.ablaufleiste .schritt-text { display: flex; flex-direction: column; line-height: 1.2; }
.ablaufleiste small { font-size: .75rem; }
.ablaufleiste li.erledigt .schritt-nr { background: var(--gruen); }
.ablaufleiste li.jetzt .schritt { border-color: var(--handeln); background: var(--handeln-hell); color: var(--text);
  box-shadow: inset 0 2px 0 rgba(181, 22, 33, .35); }
.ablaufleiste li.jetzt .schritt-nr { background: var(--verlauf); }
.ablauf-hilfe { font-size: .85rem; white-space: nowrap; }
/* Hilfe */
.hilfe-schritte { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .7rem; counter-reset: s; }
.hilfe-schritt { border: 1px solid var(--linie); border-radius: 10px; padding: .8rem 1rem; background: #fff; position: relative; }
.hilfe-schritt h3 { margin: 0 0 .3rem; font-size: 1rem; }
.hilfe-schritt .wo { font-size: .78rem; font-weight: 700; border-radius: 4px; padding: 0 6px; display: inline-block; margin-bottom: .3rem; }
.wo.chat { background: var(--handeln-hell); color: var(--handeln); } .wo.werkstatt { background: #f2f2f2; color: var(--grau); }
.tabelle.hilfe td:first-child { white-space: nowrap; font-weight: 700; }

.ansichtband { background: linear-gradient(180deg, #7f3a41 0%, #6d3238 100%); color: #fff; padding: .5rem 1.2rem; display: flex; gap: 1rem; align-items: center; justify-content: center; flex-wrap: wrap; }
.ansichtband .knopf { background: #fff; color: var(--text); border-color: #fff; }
form.knopfform { display: inline; margin: 0; }
.knopfreihe form { margin: 0; }
.nachricht-kopf td { background: var(--handeln-hell); font-weight: 700; }

/* Website + Testnotizen */
.website-raster { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1rem; align-items: start; }
.website-raster .rahmen iframe { height: 78vh; }
.testnotizen { margin: 0; position: sticky; top: .5rem; max-height: 92vh; overflow: auto; }
.testnotizen h3 { font-size: .95rem; margin: 1rem 0 .4rem; }
.testnotizen .formular { gap: .5rem; margin: .6rem 0; }
.testnotizen textarea { width: 100%; min-width: 0; }
.klein-text { font-size: .8rem; }
.notizliste, .checkliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.notizliste li { border: 1px solid var(--linie); border-left: 4px solid var(--text); border-radius: 6px; padding: .4rem .6rem; }
.notizliste li.leer { border-left-color: var(--linie); }
.notizliste form { margin: .2rem 0 0; }
.markierung { background: #fdeee7; border: 1px solid #f4c5b0; border-radius: 8px; padding: .6rem; }
.markierung[hidden] { display: none; }
.markiert { font-size: .9rem; }
.knopf.markieren-an { background: var(--text); border-color: var(--text); }
.rahmen.markiermodus { background: #fbe3d7; }
@media (max-width: 1000px) { .website-raster { grid-template-columns: 1fr; } .testnotizen { position: static; max-height: none; } }

.inhalt.breit { max-width: 1800px; padding-left: 2rem; padding-right: 2rem; }
.website-raster.desktop .rahmen iframe { min-width: 1024px; }
.website-raster .rahmen { overflow-x: auto; }

.checkliste label.haken { display: flex; flex-direction: row; gap: .5rem; align-items: flex-start; font-weight: 400; font-size: .9rem; }
input[type=checkbox] { min-width: 0; width: 1.1rem; height: 1.1rem; margin-top: .15rem; flex: 0 0 auto; }

/* Kanban – ruhiges Board: Inhalt zuerst, Bedienung erscheint bei Bedarf */
.kopfzeile-board { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 1.2rem; }
.kopfzeile-board .unterzeile { font-size: .95rem; color: var(--grau); margin: .35rem 0 0; max-width: 64ch; line-height: 1.55; }
.bilanz { display: flex; gap: 24px; margin: 0; font-size: .86rem; color: var(--grau); font-variant-numeric: tabular-nums; }
.bilanz b { color: var(--text); font-weight: 650; }

.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(236px, 1fr); gap: 18px; align-items: start; overflow-x: auto; padding-bottom: .8rem; }
.spalte { background: #f0f2f5; border-radius: 16px; padding: 0 12px 12px; min-height: 58vh;
  display: flex; flex-direction: column;
  transition: background .14s ease, box-shadow .14s ease; }
.sp-kopf { display: flex; align-items: center; gap: 9px; padding: 16px 2px 5px; }
.spalte h2 { font-size: .86rem; font-weight: 700; letter-spacing: .01em; margin: 0; color: #2c3947;
  display: flex; align-items: center; gap: 7px; }
.spalte .punkt { width: 7px; height: 7px; border-radius: 50%; background: #b9c3cf; flex: 0 0 auto; }
.spalte[data-spalte="copilot"] .punkt { background: var(--handeln); }
.spalte[data-spalte="testen"] .punkt { background: #d79117; }
.spalte[data-spalte="erledigt"] .punkt { background: var(--gruen); }
.spalte .zahl { margin-left: auto; font-size: .8rem; font-weight: 700; color: var(--grau); font-variant-numeric: tabular-nums; }
.sp-hinweis { font-size: .75rem; color: var(--grau); margin: 0 2px 14px; line-height: 1.35;
  min-height: 2.05em; }

.kanbankarte { background: #fff; border: 1px solid #e6eaf0; border-radius: 12px; padding: 14px 14px 12px; margin: 0 0 12px;
  cursor: grab; display: flex; flex-direction: column; box-shadow: none;
  transition: border-color .14s ease, box-shadow .14s ease; }
.kanbankarte:hover, .kanbankarte:focus-visible { border-color: #cfd8e4; box-shadow: 0 3px 12px rgba(16, 24, 40, .07); }
.kanbankarte:focus-visible { outline: 2px solid var(--handeln); outline-offset: 2px; }
.kanbankarte.zieht { opacity: .45; cursor: grabbing; }
.kanbankarte h3 { font-size: .95rem; font-weight: 650; line-height: 1.35; margin: 0 0 5px; overflow-wrap: anywhere; }
.kanbankarte p { font-size: .82rem; line-height: 1.5; color: var(--grau); margin: 0 0 12px; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.kanbankarte input, .kanbankarte textarea { min-width: 0; width: 100%; }
.karte-fuss { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: auto; min-height: 26px; }
.marke-bezug { font-family: Consolas, "Courier New", monospace; font-size: .72rem; font-weight: 700; letter-spacing: -.02em;
  background: #f3f4f4; border: 1px solid var(--linie); color: var(--text); border-radius: 5px; padding: 1px 6px; }
/* Kartenfelder nach dem MPR-Aufgabenblatt (P1): Priorität, Bezug, Frist, Woran erkennbar.
   Eigene Namen, weil .marke-* und .jetzt/.aktiv schon belegt sind. */
.kanbankarte p.karte-woran { font-size: .76rem; line-height: 1.4; color: #6b7686; margin: -4px 0 10px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.marke-prio { font-size: .72rem; font-weight: 700; border-radius: 5px; padding: 1px 6px;
  background: var(--handeln-hell); color: var(--handeln); }
.marke-prio.prio-S { background: #eef2f7; color: #4a5568; }
.marke-prio.prio-K { background: #f3f4f4; color: var(--grau); }
.marke-thema { font-size: .72rem; border: 1px solid #e4e9f0; border-radius: 5px; padding: 1px 6px; color: var(--grau); }
.marke-frist { font-size: .72rem; color: var(--grau); }
.sprintziel { margin-bottom: 1.1rem; }
.sprintziel h2 { margin-bottom: .2rem; }
.sprintziel > p { margin: .2rem 0 .6rem; }
.marke-wer { font-size: .72rem; background: #fbfcfd; border: 1px solid #e4e9f0; color: var(--grau); border-radius: 5px; padding: 1px 6px; }
.kartenmenue { margin-left: auto; position: relative; opacity: 0; transition: opacity .14s ease; }
.kanbankarte:hover .kartenmenue, .kanbankarte:focus-within .kartenmenue { opacity: 1; }
.kartenmenue > summary { width: 26px; height: 26px; display: grid; place-items: center; padding: 0; list-style: none;
  border-radius: 6px; cursor: pointer; color: #6b7686; font-size: 1rem; line-height: 1; }
.kartenmenue > summary::-webkit-details-marker { display: none; }
.kartenmenue > summary:hover, .kartenmenue[open] > summary { background: #eef2f7; color: var(--text); }
.kartenmenue > summary:focus-visible { outline: 2px solid var(--handeln); outline-offset: 1px; }
.kartenmenue form { margin: 0; }
.kartenmenue .menue { position: absolute; right: 0; top: 32px; z-index: 20; min-width: 172px; padding: 5px;
  background: #fff; border: 1px solid var(--linie); border-radius: 10px; box-shadow: 0 10px 24px rgba(16, 24, 40, .14); }
.kartenmenue[open] .menue { display: flex; flex-direction: column; }
.menue-punkt { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 9px; border: 0; border-radius: 7px;
  background: transparent; color: var(--text); font: inherit; font-size: .82rem; text-align: left; cursor: pointer; text-decoration: none; }
.menue-punkt:hover { background: #f2f5f9; }
.menue-punkt.loeschen { color: var(--rot); }
.menue-punkt.loeschen:hover { background: var(--rot-hell); }
.menue-punkt:focus-visible { outline: 2px solid var(--handeln); outline-offset: -2px; }

.leer { display: grid; place-items: center; gap: 4px; text-align: center; padding: 28px 14px; border: 1.5px dashed #dde3ea;
  border-radius: 12px; color: var(--grau); font-size: .76rem; line-height: 1.45; }
.leer b { color: var(--grau); font-weight: 600; font-size: .82rem; }

.spalte .liste { flex: 1; }
.neue-karte { margin-top: 2px; }
.neue-karte > summary { list-style: none; cursor: pointer; padding: 9px 10px; border-radius: 9px; color: var(--grau);
  font-weight: 650; font-size: .82rem; border: 1px dashed transparent; }
.neue-karte > summary::-webkit-details-marker { display: none; }
.neue-karte > summary:hover { background: #fff; border-color: var(--linie); color: var(--handeln); }
.neue-karte[open] > summary { color: var(--grau); }
.neue-karte form { background: #fff; border: 1px solid #bcd2ec; border-radius: 12px; padding: 10px; margin-top: 6px;
  display: flex; flex-direction: column; gap: 7px; box-shadow: 0 0 0 3px rgba(31, 95, 168, .07); }
.neue-karte input, .neue-karte textarea { min-width: 0; width: 100%; font-size: .83rem; padding: 7px 8px; }
.neue-karte .extra { display: flex; flex-direction: column; gap: 6px; }
.neue-karte .extra > summary { font-size: .75rem; color: var(--handeln); cursor: pointer; list-style: none; }
.neue-karte .extra > summary::-webkit-details-marker { display: none; }
.neue-karte .extra:not([open]) > textarea, .neue-karte .extra:not([open]) > input { display: none; }

.spalte.ziel { background: #e8f0fb; box-shadow: inset 0 0 0 2px #b9d2ef; }

@media (hover: none) { .kartenmenue { opacity: 1; } }
@media (max-width: 900px) { .board { grid-auto-columns: minmax(78vw, 1fr); } }
@media (prefers-reduced-motion: reduce) { .spalte, .kanbankarte, .kartenmenue { transition: none; } }

.ziel-knoepfe { display: flex; gap: .3rem; flex-wrap: wrap; }
.ziel-knoepfe .knopf { padding: .35rem .6rem; font-size: .85rem; }
.notizknoepfe { display: flex; gap: .25rem; flex-wrap: wrap; margin-top: .3rem; align-items: center; }
.notizknoepfe form { margin: 0; }
.marke-kanban { font-size: .75rem; font-weight: 700; background: var(--gruen-hell); color: var(--gruen); border-radius: 4px; padding: 0 5px; }

.kanban-kurz { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .8rem; font-size: .9rem; }
.kanban-kurz ul { padding-left: 1.1rem; margin: .3rem 0; }

/* Eine Hauptaktion, eine Nebenaktion, ein Textlink (Startseite) */
.textlink { align-self: center; padding: .5rem .5rem; color: var(--handeln); font-weight: 600; text-decoration: none; }
.textlink:hover { text-decoration: underline; }
.textlink:focus-visible { outline: 2px solid var(--handeln); outline-offset: 2px; border-radius: 4px; }

/* Tabellenzeile: eine Aktion sichtbar, der Rest im Menü */
.aktionen { align-items: center; flex-wrap: nowrap; }
.zeilenmenue { position: relative; display: inline-block; }
.zeilenmenue > summary { width: 32px; height: 32px; display: grid; place-items: center; list-style: none; cursor: pointer;
  border: 1px solid var(--linie); border-radius: 6px; background: #fff; color: #6b7686; font-size: 1rem; line-height: 1; }
.zeilenmenue > summary::-webkit-details-marker { display: none; }
.zeilenmenue > summary:hover, .zeilenmenue[open] > summary { background: #f2f5f9; color: var(--text); border-color: #c9d3df; }
.zeilenmenue > summary:focus-visible { outline: 2px solid var(--handeln); outline-offset: 1px; }
.zeilenmenue form { margin: 0; }
.zeilenmenue .menue { position: absolute; right: 0; top: 38px; z-index: 20; min-width: 190px; padding: 5px; background: #fff;
  border: 1px solid var(--linie); border-radius: 10px; box-shadow: 0 10px 24px rgba(16, 24, 40, .14); }
.zeilenmenue[open] .menue { display: flex; flex-direction: column; }
.menue-punkt { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 9px; border: 0; border-radius: 7px;
  background: transparent; color: var(--text); font: inherit; font-size: .85rem; text-align: left; cursor: pointer; text-decoration: none; }
.menue-punkt:hover { background: #f2f5f9; }
.menue-punkt:focus-visible { outline: 2px solid var(--handeln); outline-offset: -2px; }
.marke-gesperrt { font-size: .8rem; font-weight: 700; color: var(--rot); }
.tabelle tbody tr:hover td { background: #fbfcfd; }

/* Abnahme je Übergabe (0.8.9) */
.abnahme-titel { margin: 1.2rem 0 .1rem; font-size: 1rem; }
.abnahme { list-style: none; margin: .4rem 0 .8rem; padding: 0; }
.abnahme li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem .8rem;
  align-items: start; padding: .55rem 0; border-bottom: 1px solid var(--linie); }
.abnahme li:last-child { border-bottom: none; }
.abnahme-text { font-size: .93rem; }
.abnahme-wahl { display: flex; gap: .6rem; align-items: center; }
.abnahme-wahl .wahl { display: inline-flex; gap: .25rem; align-items: center; font-size: .85rem; font-weight: 500;
  white-space: nowrap; }
.abnahme-wahl input { min-width: 0; }
.abnahme-notiz { grid-column: 1 / -1; min-width: 0; max-width: 34rem; font-size: .88rem; padding: .3rem .5rem;
  border-color: var(--linie); }
.abnahme-notiz:placeholder-shown { border-color: transparent; background: #fbfbfb; }
.abnahme-pruefungen { margin: .6rem 0 1rem; font-size: .88rem; color: var(--grau); }
.abnahme-pruefungen summary { cursor: pointer; }

/* Seit eurem letzten Besuch (0.8.10) */
.besuch { border-left: 3px solid var(--marke-linie); }
.besuch-liste { margin: 0; padding-left: 1.1rem; font-size: .93rem; }
.besuch-liste li { margin: .15rem 0; }
/* Karten bei der Übergabe mitgeben (0.8.10) */
.kartenwahl { border: 1px solid var(--linie); border-radius: 8px; padding: .5rem .9rem .7rem; margin: .5rem 0 1rem; }
.kartenwahl legend { font-weight: 600; font-size: .92rem; padding: 0 .35rem; }
.kartenwahl .wahl { display: flex; gap: .45rem; align-items: baseline; font-weight: 400; margin: .25rem 0; }
/* Häkchen und Text nebeneinander: `.formular label` setzt sonst column (0.8.27 gefunden) */
.kartenwahl .wahl { flex-direction: row; align-items: flex-start; }
.kartenwahl .wahl input[type=checkbox] { margin: .2rem 0 0; }

/* Was hat sich geändert (0.8.11) */
.diff-alt { color: var(--grau); text-decoration: line-through; text-decoration-color: rgba(95, 99, 101, .45); }
.diff-neu { font-weight: 600; }

/* Startseite als Dashboard (0.8.14) */
.jetzt-dran { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; padding: 10px 13px;
  border: 1px solid #e2c9cb; border-left: 3px solid var(--handeln); border-radius: 9px; background: #fdfafa; font-size: .92rem; }
.jetzt-dran .knopf { margin-left: auto; }
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 0 0 16px; }
.kachel { background: #fff; border: 1px solid var(--linie); border-radius: 11px; padding: 13px 14px;
  display: flex; flex-direction: column; gap: 6px; }
.kachel.fertig { border-left: 3px solid var(--gruen); }
.kachel.offen { border-left: 3px solid var(--handeln); }
.kachel.gesperrt { border-left: 3px solid #c4cad2; opacity: .7; }
.kachel h3 { margin: 0; font-size: .95rem; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.kachel p { margin: 0; font-size: .8rem; color: var(--grau); }
.kachel-fuss { margin-top: auto; font-size: .75rem; color: var(--grau); }
.kachel .knopf { align-self: flex-start; }
.stand { font-size: .72rem; font-weight: 700; border-radius: 4px; padding: 1px 6px; background: var(--gruen-hell); color: var(--gruen); }
.stand.offen { background: var(--handeln-hell); color: var(--handeln); }
.stand.gesperrt { background: #f2f2f2; color: var(--grau); }

/* Meeting mit dem Webteam (0.8.15) */
.raum-rollen { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 0 0 14px; }
.rolle { border: 1px solid var(--linie); border-radius: 10px; padding: 9px 11px; background: #fff; }
.rolle.spricht { border-color: #d9b6b8; background: #fdfafa; }
.rolle .kreis { width: 24px; height: 24px; border-radius: 50%; background: var(--handeln-hell); color: var(--handeln);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .74rem; margin-bottom: 5px; }
.rolle b { display: block; font-size: .87rem; }
.rolle span { font-size: .75rem; color: var(--grau); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.chip { font-size: .82rem; padding: 4px 11px; border-radius: 99px; border: 1px solid var(--linie); background: #fff;
  color: var(--text); text-decoration: none; }
.chip.an { background: var(--handeln-hell); border-color: #d9b6b8; font-weight: 600; }
.chip.fertig::after { content: " ✓"; color: var(--gruen); }
.dialog { background: #fff; border: 1px solid var(--linie); border-radius: 11px; padding: 14px 16px; }
.dialog .zeile { display: flex; gap: 10px; margin-bottom: 12px; align-items: flex-start; }
.dialog .zeile.ich { flex-direction: column; gap: 8px; }
.dialog .kreis { width: 26px; height: 26px; border-radius: 50%; background: var(--handeln-hell); color: var(--handeln);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .72rem; flex: none; }
.dialog .blase { background: #fafafa; border: 1px solid var(--linie); border-radius: 9px; padding: 9px 12px;
  font-size: .9rem; max-width: 680px; }
.dialog textarea { width: 100%; }
.dialog .knopf, .formular:not(.zeile) > .knopf { align-self: flex-start; }
.braucht { margin: 0 0 12px; padding: 10px 12px; border: 1px dashed #d9b6b8; border-radius: 9px;
  background: #fdfafa; font-size: .86rem; }
.braucht b { display: block; margin-bottom: 3px; }
.braucht ul { margin: 0; padding-left: 1.1rem; }
.frage { font-size: .9rem; }
.rolle-marke { font-size: .72rem; font-weight: 700; color: var(--grau); text-transform: uppercase; letter-spacing: .03em; }
.offen-liste { margin: .3rem 0 1rem; }
.umschalt { display: inline-block; margin-left: 14px; padding-left: 12px; border-left: 1px solid var(--linie); }
.umschalt a { color: var(--grau); text-decoration: underline; text-decoration-color: rgba(95,99,101,.45); padding: 0 4px; }
.umschalt a.an { color: var(--text); font-weight: 700; text-decoration: none; }
.freigabe { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 14px 0 0; }
.freigabe .knopf[disabled] { opacity: .5; cursor: not-allowed; }

/* Vorgaben und Gespräch (0.8.16) */
.vorgaben-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .6rem 1rem; }
.vorgaben-raster label { min-width: 0; }
.vorgaben-raster input { width: 100%; min-width: 0; }
.themenwahl { border: 1px solid var(--linie); border-radius: 8px; padding: .5rem .9rem .7rem; margin: .2rem 0 .8rem; }
.themenwahl legend { font-weight: 600; font-size: .9rem; padding: 0 .35rem; }
.themenwahl .wahl { display: inline-flex; gap: .35rem; align-items: baseline; font-weight: 400; margin: 0 .9rem .2rem 0; }
.hinweis-karte { border-left: 3px solid var(--marke-linie); }

/* Startseite als Dashboard: Jetzt-Karte und Zeitachse (0.8.17) */
.jetzt-karte { background: var(--weiss); border: 1px solid var(--linie); border-left: 4px solid transparent;
  border-image: linear-gradient(180deg, #a85156, #96424a) 1; border-image-slice: 0 0 0 4;
  border-radius: 10px; padding: 1.1rem 1.4rem; margin: 1rem 0 1.3rem; }
.jetzt-karte h2 { font-size: 1.35rem; margin: .15rem 0 .45rem; }
.jetzt-karte p { margin: .2rem 0 .6rem; max-width: 68ch; }
.jetzt-nr { font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--handeln); }
.zeitachse { list-style: none; margin: 0 0 1.2rem; padding: 0; position: relative; }
.zeitachse li { display: flex; gap: 14px; padding: 0 0 1.1rem 0; position: relative; }
.zeitachse li::before { content: ""; position: absolute; left: 15px; top: 34px; bottom: 0; width: 2px; background: var(--linie); }
.zeitachse li:last-child::before { display: none; }
.zeit-marke { flex: none; width: 32px; height: 32px; border-radius: 50%; border: 2px solid var(--linie);
  background: var(--weiss); color: var(--grau); font-weight: 700; font-size: .88rem;
  display: flex; align-items: center; justify-content: center; z-index: 1; }
.zeitachse li.fertig .zeit-marke { background: var(--gruen-hell); border-color: var(--gruen); color: var(--gruen); }
.zeitachse li.hier .zeit-marke { border-color: var(--handeln); color: var(--handeln); background: var(--handeln-hell); }
.zeitachse li.gesperrt { opacity: .62; }
.zeit-inhalt { flex: 1; min-width: 0; background: var(--weiss); border: 1px solid var(--linie); border-radius: 10px;
  padding: .8rem 1.1rem .9rem; }
.zeitachse li.hier .zeit-inhalt { border-color: #d9b6b8; }
.zeitachse li.fertig .zeit-inhalt { background: #fcfdfc; }
.zeit-inhalt h3 { font-size: 1.02rem; margin: 0 0 .2rem; display: flex; gap: .55rem; align-items: baseline; flex-wrap: wrap; }
.zeit-inhalt p { margin: .15rem 0; max-width: 70ch; }
.fertig-banner { border-left: 3px solid var(--gruen); background: #fcfdfc; }

/* Lehrkraft-Übersicht: Spalten und Knöpfe in einer Zeile (gemeldet 08.11.2026) */
.tabelle td, .tabelle th { padding: .5rem .55rem; }
.tabelle .aktionen { white-space: nowrap; justify-content: flex-start; }
.tabelle .aktionen .knopf { white-space: nowrap; }
.tabelle td.zeit { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabelle td.uebergabe .name { display: block; white-space: nowrap; }
.klassenkopf { margin-bottom: .3rem; }
.stundenformular { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap;
  margin-top: .4rem; padding-top: .9rem; border-top: 1px dashed var(--linie); }
.stundenformular span.leise { flex-basis: 100%; }

/* Projektname: genug Platz für echte Produktnamen (0.8.17) */
.formular.zeile input[name=projektname] { min-width: 20rem; }

/* Meeting-Darstellung je Klasse (0.8.26, W-41): eigene Zeile, gleiche Trennung wie die Stunde */
.formular.meetingstil { margin-top: .7rem; padding-top: .9rem; border-top: 1px dashed var(--linie); }

/* Dateiliste (Für Copilot): ruhige Spalten, Knopf rechts (0.8.17) */
.tabelle.dateiliste th:first-child, .tabelle.dateiliste td:first-child { width: 7.5rem; }
.tabelle.dateiliste th:last-child, .tabelle.dateiliste td:last-child { width: 10.5rem; text-align: right; }

/* Vor dem Chat prüfen (0.8.18) */
.pruef-karte { border-left: 3px solid var(--handeln); }
.pruefliste { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.pruefliste li { display: flex; align-items: center; gap: .7rem; padding: .5rem .6rem; border: 1px solid var(--linie); border-radius: 8px; }
.pruefliste li.ok { background: #fcfdfc; }
.pruefliste li.fehlt { background: #fdfafa; border-color: #e8d3d5; }
.pruef-haken { flex: none; width: 1.4rem; height: 1.4rem; border-radius: 50%; display: grid; place-items: center;
  font-size: .8rem; font-weight: 700; }
.pruefliste li.ok .pruef-haken { background: var(--gruen-hell); color: var(--gruen); }
.pruefliste li.fehlt .pruef-haken { background: var(--handeln-hell); color: var(--handeln); }
.pruef-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.pruef-text b { font-size: .93rem; }
.pruef-text .leise { font-size: .84rem; }

/* Heute-Ansicht der Lehrkraft (0.8.19) */
.heute-karte h2 { display: flex; align-items: center; gap: .5rem; }
.heute-karte h2 .zahl { font-size: .8rem; font-weight: 700; color: #fff; background: var(--grau);
  border-radius: 99px; padding: .05rem .45rem; }
.heute-karte.heute-ruhig h2 .zahl { background: #c4cad2; }
.heute-karte.heute-ruhig { background: #fbfbfb; }
.heute-liste { list-style: none; margin: .5rem 0 0; padding: 0; }
.heute-liste li { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap;
  padding: .45rem 0; border-bottom: 1px solid var(--linie); }
.heute-liste li:last-child { border-bottom: 0; }
.heute-gruppe { font-weight: 700; }
.heute-projekt { font-size: .9rem; }

/* Hilfe-Ruf und Warteschlange (0.8.20) */
.hilfe-ruf { border-left: 3px solid var(--marke-linie); }
.hilfe-ruf h2 { font-size: 1.15rem; }
.heute-aktionen { margin-left: auto; display: flex; gap: .4rem; align-items: center; }
.heute-aktionen form { margin: 0; }

/* Offene Berichtspunkte als Karten (0.8.21) */
.karten-aus-bericht { border-left: 3px solid var(--linie); }
.offene-punkte { margin: .4rem 0 .8rem; padding-left: 1.1rem; font-size: .9rem; }
.offene-punkte li { margin: .2rem 0; }

/* Gruppenname im Kopf führt zu den Einstellungen (0.8.22) */
a.wer { text-decoration: underline; text-decoration-color: rgba(95, 99, 101, .4);
  text-underline-offset: 2px; }
a.wer:hover { color: var(--text); text-decoration-color: currentColor; }

/* Zwei Fassungen nebeneinander im Website-Viewer (0.8.23) */
.vergleich { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: .4rem 0 .8rem; }
.vergleich .pane { min-width: 0; }
.vergleich .pane-kopf { font-size: .82rem; color: var(--grau); margin: 0 0 .35rem; padding-left: .2rem; }
.vergleich .pane-kopf b { color: var(--text); }
.vergleich .rahmen { padding: .5rem; }
.vergleich .rahmen iframe { height: 70vh; min-width: 0; }
@media (max-width: 1100px) { .vergleich { grid-template-columns: 1fr; } }

/* Beamer-Ansicht (0.8.24): eigenes Blatt, weil die CSP Inline-Stile verbietet */
body.beamer { margin: 0; background: #f6f6f6; }
  .b-kopf { display: flex; align-items: baseline; gap: 1.2rem; padding: 1.1rem 1.6rem .8rem; }
  .b-kopf h1 { font-size: 3rem; margin: 0; }
  .b-kopf .zeit { margin-left: auto; font-size: 1.5rem; color: var(--grau); font-variant-numeric: tabular-nums; }
  .b-inhalt { display: grid; grid-template-columns: minmax(320px, 1fr) 2fr; gap: 1.2rem; padding: 0 1.6rem 1.6rem; }
  @media (max-width: 1000px) { .b-inhalt { grid-template-columns: 1fr; } }
  .b-karte { background: #fff; border: 1px solid var(--linie); border-radius: 14px; padding: 1rem 1.2rem; }
  .b-karte h2 { font-size: 1.7rem; margin: 0 0 .8rem; }
  .b-ruf { font-size: 2rem; font-weight: 700; padding: .7rem 0; border-bottom: 1px solid var(--linie); }
  .b-ruf:last-child { border-bottom: 0; }
  .b-ruf small { font-size: 1.2rem; font-weight: 400; color: var(--grau); margin-left: .5rem; }
  .b-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: .9rem; }
  .b-gruppe { border: 1px solid var(--linie); border-radius: 12px; padding: .8rem 1rem; background: #fff; }
  .b-gruppe b { display: block; font-size: 1.9rem; }
  .b-gruppe .projekt { font-size: 1.1rem; color: var(--grau); min-height: 1.2em; }
  .b-status { display: inline-block; margin-top: .5rem; font-size: 1.15rem; font-weight: 700; border-radius: 99px; padding: .1rem .6rem; }
  .b-gruppe.ruft { border-color: #d9b6b8; background: #fdf7f7; }
  .b-gruppe.ruft .b-status { background: var(--handeln-hell); color: var(--handeln); }
  .b-gruppe\\.ruft { }
  .b-status.ruft { background: var(--handeln-hell); color: var(--handeln); }
  .b-status.Abnahme { background: var(--gelb-hell); color: var(--gelb); }
  .b-status.hat { background: var(--gruen-hell); color: var(--gruen); }
  .b-status.arbeitet { background: #eef1f4; color: var(--text); }
  .b-status.still { background: #f2f2f2; color: var(--grau); }
  .b-fuss { padding: 0 1.6rem 1.4rem; color: var(--grau); font-size: 1.05rem; }
  .b-fuss a { color: var(--grau); }

/* Abgabefrist (W-11, 0.8.27): eigene Zeile in der Klassenkarte, gleiche Trennung wie die Stunde */
.formular.abgabefrist { margin-top: .7rem; padding-top: .9rem; border-top: 1px dashed var(--linie); }
.formular.abgabefrist span.leise { flex-basis: 100%; }
.fristkarte h2 { margin-top: 0; }
.fristkarte.abgelaufen { border-left: 4px solid var(--rot); }

/* Prüfliste vor der letzten Abgabe: Karten statt Tabelle, Status als Marke */
.finalcheck summary { cursor: pointer; font-weight: 700; }
.checkpunkte { list-style: none; margin: .8rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.checkpunkt { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .55rem .7rem;
  border: 1px solid var(--linie); border-radius: 8px; background: var(--weiss); }
.checkpunkt .leise { flex-basis: 100%; }
.checkpunkt.ok { border-color: #bcdcc9; }
.checkmarke { font-size: .78rem; font-weight: 700; border-radius: 4px; padding: 0 6px;
  background: var(--rot-hell); color: var(--rot); }
.checkmarke.gut { background: var(--gruen-hell); color: var(--gruen); }

/* Restzeit der Stunde in der Kopfleiste (0.8.28) */
.restzeit { margin-left: 0; font-size: .8rem; color: var(--grau); border: 1px solid var(--linie);
  border-radius: 999px; padding: 2px 8px; white-space: nowrap; }
.restzeit[hidden] { display: none; }
.restzeit.knapp { background: var(--gelb-hell); border-color: #ecd36a; color: var(--gelb); font-weight: 700; }
.restzeit.vorbei { background: var(--rot-hell); border-color: var(--rot); color: var(--rot); font-weight: 700; }

/* Konzeptpapier der Gruppe in der Lehrkraft-Ansicht (0.8.28) */
.konzepttext { white-space: pre-wrap; max-height: 26rem; overflow: auto; border: 1px solid var(--linie);
  border-radius: 6px; padding: .9rem 1rem; background: var(--weiss); font-size: .95rem; }

/* Konzept als Dokument mit Absätzen und Randnotizen (0.8.29) */
.konzeptlesen { display: flex; flex-direction: column; gap: .9rem; margin-top: .8rem; }
.absatz { position: relative; padding: .1rem 0 .1rem 2.6rem; }
.absatz-nr { position: absolute; left: 0; top: .15rem; font: 700 .72rem/1.4 Consolas, "Courier New", monospace;
  color: var(--grau); }
.absatz-text { font-size: 1rem; line-height: 1.6; white-space: pre-wrap; }
.absatz.h1 .absatz-text { font-size: 1.35rem; font-weight: 700; }
.absatz.h2 .absatz-text { font-size: 1.15rem; font-weight: 700; }
.absatz.li .absatz-text::before { content: "–  "; }
.randnotizen { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.randnotizen li { border-left: 3px solid var(--gelb); background: var(--gelb-hell); padding: .35rem .6rem;
  border-radius: 4px; font-size: .92rem; }
.randnotizen li.frage { border-color: var(--rot); background: var(--rot-hell); }
.randnotizen form.miniform { display: inline; }
.randnotizen button { margin-left: .4rem; }
.anmerken { margin-top: .35rem; }
.anmerken summary { cursor: pointer; font-size: .85rem; color: var(--grau); }
.feld-breit { flex: 1; }
.freigabe-karte { border-left: 4px solid var(--gruen); }
.vorgabenliste { margin: .4rem 0 .8rem; padding-left: 1.2rem; }
.vorgabenliste li { margin: .2rem 0; }
.beschluesse { white-space: pre-wrap; background: var(--weiss); border: 1px solid var(--linie);
  border-radius: 6px; padding: .8rem 1rem; }

/* PDF-Viewer mit Markierungen (0.8.31) */
#pdfseiten { display: flex; flex-direction: column; gap: 1rem; align-items: center; margin: .9rem 0; }
.pdfseite { position: relative; box-shadow: 0 2px 12px rgba(20, 30, 35, .14); background: #fff;
  max-width: 100%; line-height: 0; }
.pdfseite canvas { display: block; max-width: 100%; height: auto; }
.pdfoverlay { position: absolute; inset: 0; }
.pdfoverlay:not(.nurlesen) { cursor: crosshair; touch-action: none; }
.pdfmarke { position: absolute; border: 2px solid rgba(181, 22, 33, .8); background: rgba(181, 22, 33, .12);
  border-radius: 2px; font-size: .7rem; line-height: 1.2; color: var(--rot); font-weight: 700;
  padding: 0 2px; cursor: help; }
.pdfmarke.frage { border-color: rgba(138, 97, 0, .85); background: rgba(255, 247, 214, .5); color: var(--gelb); }
.pdfmarke.ziehen { border-style: dashed; border-color: var(--text); background: rgba(28, 30, 32, .06);
  color: transparent; }
.markformular { margin-top: 1rem; border: 1px solid var(--linie); border-radius: 8px;
  padding: .8rem 1rem; background: var(--weiss); }
.markierungsliste { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.markierungsliste li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem;
  padding: .45rem .6rem; border: 1px solid var(--linie); border-radius: 6px; background: var(--weiss);
  font-size: .95rem; }
.marke-nr { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem;
  height: 1.5rem; border-radius: 50%; background: var(--rot); color: #fff; font-size: .78rem;
  font-weight: 700; }
.pdfstatus-fehler { color: var(--rot); font-weight: 700; }

/* PDF-Werkzeug, Sprungmarken, Statistik (0.8.33) */
.pdfwerkzeug { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin: .2rem 0 .7rem; }
.pdfwerkzeug[hidden] { display: none; }
.pdfwerkzeug .trenner { width: 1px; height: 1.3rem; background: var(--linie); margin: 0 .3rem; }
.pdfwerkzeug .knopf { padding: .18rem .45rem; min-width: 2rem; }
.sprung { text-decoration: none; }
.pdfmarke.blink { animation: pdfblink 1.6s ease-in-out; }
@keyframes pdfblink {
  0%, 100% { outline: 0 solid transparent; }
  25%, 65% { outline: 4px solid var(--gelb); outline-offset: 2px; }
}
.hinweis { background: var(--gelb-hell); border-left: 4px solid var(--gelb); padding: .55rem .8rem;
  border-radius: 4px; margin: .5rem 0; }
.marke-feedback, .marke-gesehen { font-size: .72rem; padding: .08rem .4rem; border-radius: 999px;
  background: var(--grund); white-space: nowrap; }
.marke-gesehen { background: var(--gruen-hell); color: var(--gruen); }
.rueckmeldung { white-space: nowrap; }
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .6rem;
  margin: .6rem 0 1rem; }
.kennzahl { background: var(--grund); border-radius: 6px; padding: .55rem .7rem; }
.kennzahl b { display: block; font-size: 1.25rem; }
.kennzahl span { font-size: .78rem; color: var(--grau); }
.balkenliste { display: grid; gap: .35rem; max-width: 34rem; margin-top: .4rem; }
.balkenzeile { display: grid; grid-template-columns: 8.5rem 1fr 2rem; align-items: center; gap: .5rem; }
.balkenname { font-size: .82rem; }
.statbalken { height: .62rem; background: var(--grund); border-radius: 999px; overflow: hidden; }
.statbalken span { display: block; height: 100%; background: var(--handeln); border-radius: 999px; }

@media print {
  .kopf, .nav, .knopfreihe, .knopf, .pdfwerkzeug, .zeilenmenue, .miniform, form, .meldungen { display: none !important; }
  body { background: #fff; color: #000; }
  .karte { box-shadow: none; border: 1px solid #ccc; page-break-inside: avoid; }
  a { color: #000; text-decoration: none; }
}
.karte[id] { scroll-margin-top: 6rem; }

/* Hilfe steht rechts, nicht mehr in der Navigation (0.8.33) */
.hilfe-link { padding: .32rem .62rem; border: 1px solid var(--linie); border-radius: 6px;
  text-decoration: none; color: var(--text); font-weight: 600; font-size: .9rem; white-space: nowrap; }
.hilfe-link:hover { background: var(--handeln-hell); }
.hilfe-link.aktiv { border-color: var(--marke-linie); box-shadow: inset 0 -2px 0 var(--marke-linie); }
.marke-test { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: .1rem .4rem; border-radius: 4px; background: var(--gelb-hell); color: var(--gelb);
  vertical-align: middle; }

/* Interview mit dem Webdesign-Team (0.9.0) */
.dialog-kopf { display: flex; align-items: center; gap: .7rem; margin-bottom: .8rem; }
.avatar { width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--handeln); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: .78rem; letter-spacing: .02em;
  flex: none; }
.sprechblase { background: var(--grund); border-left: 4px solid var(--handeln); border-radius: 12px;
  padding: 1rem 1.2rem; font-size: 1.06rem; line-height: 1.55; margin-bottom: .4rem; }
.zusammenfassung { display: grid; grid-template-columns: 11rem 1fr; gap: .4rem 1rem; margin: 1rem 0; }
.zusammenfassung dt { font-weight: 700; color: var(--grau); font-size: .85rem; }
.zusammenfassung dd { margin: 0; }
@media (max-width: 640px) {
  .zusammenfassung { grid-template-columns: 1fr; }
  .zusammenfassung dt { margin-top: .6rem; }
}

/* Interview: Redaktionsmeeting (0.9.1) */
.interview { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 2rem; align-items: start; }
.iverlauf { position: sticky; top: 1rem; background: #fff; border: 1px solid var(--linie);
  border-radius: 10px; padding: 1rem; }
.iverlauf .ueber { font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--grau); margin-bottom: .6rem; }
.iverlauf ol { list-style: none; margin: 0; padding: 0; }
.iverlauf li a { display: flex; gap: .5rem; align-items: center; padding: .38rem .35rem; border-radius: 6px;
  text-decoration: none; color: var(--grau); font-size: .85rem; }
.iverlauf li a:hover { background: var(--handeln-hell); }
.iverlauf li.fertig a { color: var(--text); }
.iverlauf li.jetzt a { background: var(--handeln-hell); color: var(--handeln); font-weight: 700; }
.iverlauf .nr { width: 1.35rem; height: 1.35rem; border-radius: 50%; border: 1px solid var(--linie);
  display: grid; place-items: center; font-size: .68rem; font-weight: 800; flex: none; }
.iverlauf li.fertig .nr { background: var(--text); color: #fff; border-color: var(--text); }
.iverlauf li.jetzt .nr { background: var(--handeln); color: #fff; border-color: var(--handeln); }
.iverlauf .klein { font-size: .72rem; line-height: 1.45; margin-top: .7rem; }
.ibuehne { min-width: 0; }
.iteam { display: flex; gap: 1rem; align-items: flex-end; border-bottom: 1px solid var(--linie);
  padding-bottom: .8rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.iperson { width: 5.4rem; text-align: center; }
.iperson img { width: 3.6rem; height: 3.6rem; border-radius: 50%; display: block; margin: 0 auto .3rem;
  border: 1px solid var(--linie); }
.iperson.aktiv img { box-shadow: 0 0 0 3px var(--weiss), 0 0 0 5px var(--handeln); }
.iperson b { display: block; font-size: .78rem; }
.iperson span { font-size: .64rem; color: var(--grau); text-transform: uppercase; letter-spacing: .07em; }
.iperson.aktiv b { color: var(--handeln); }
.istatus { margin-left: auto; font-size: .74rem; color: var(--grau); display: flex; gap: .4rem;
  align-items: center; }
.istatus i { width: .45rem; height: .45rem; border-radius: 50%; background: var(--gruen); }
.ikicker { font-size: .68rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  color: var(--handeln); margin-bottom: .4rem; }
.isprech { position: relative; background: #fff; border: 1px solid var(--linie); border-radius: 10px;
  padding: 1.1rem 1.3rem; margin-bottom: .8rem; box-shadow: 0 8px 24px rgba(28, 30, 32, .05); }
.isprech .wer { font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--handeln); margin-bottom: .3rem; }
.isprech h1 { font-size: 1.45rem; line-height: 1.3; margin: 0; font-weight: 400; letter-spacing: -.2px; }
.inotiz { border-left: 3px solid var(--handeln); padding: .25rem 0 .25rem .8rem; font-size: .85rem;
  line-height: 1.55; color: var(--grau); margin: 0 0 1rem; }
.inotiz b { display: block; font-size: .64rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--handeln); margin-bottom: .2rem; }
.ichips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }
.ichip { position: relative; border: 1px solid var(--linie); border-radius: 99px; padding: .38rem .75rem;
  font-size: .82rem; cursor: pointer; background: #fff; color: var(--text); }
.ichip input { position: absolute; opacity: 0; pointer-events: none; }
.ichip:has(input:checked) { background: var(--handeln); border-color: var(--handeln); color: #fff;
  font-weight: 700; }
.eigenes { display: block; font-size: .85rem; margin-bottom: .8rem; }
.eigenes input { margin-top: .3rem; }
.interviewform .ifeld { display: block; font-size: .85rem; margin-bottom: .6rem; }
.interviewform textarea.gross { min-height: 230px; margin-top: .3rem; }
.ileiste { display: flex; align-items: center; gap: .8rem; margin-top: .5rem; font-size: .78rem;
  color: var(--grau); }
.ileiste .weiter { margin-left: auto; background: var(--handeln); color: #fff; border: 0; border-radius: 6px;
  padding: .6rem 1.1rem; font-weight: 700; font-size: .88rem; }
.ileiste .zurueck { border: 1px solid var(--linie); background: #fff; border-radius: 6px;
  padding: .55rem .9rem; font-weight: 600; font-size: .85rem; }
@media (max-width: 860px) {
  .interview { grid-template-columns: 1fr; gap: 1rem; }
  .iverlauf { position: static; }
  .iteam .istatus { margin-left: 0; width: 100%; }
}
.interviewform .ifeld input, .interviewform .ifeld textarea { width: 100%; display: block; }
.interviewform .eigenes input { width: 100%; }

/* Arbeitsauftrag für die Mappe (0.9.2, Variante B) */
.regel { background: var(--grund); border-radius: 8px; padding: .55rem .8rem; font-size: .9rem; margin: .2rem 0 .8rem; }
.auftrag-plaetze { list-style: none; margin: .6rem 0 .8rem; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.auftrag-plaetze li { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; border: 1px solid var(--linie); border-radius: 8px; padding: .45rem .7rem; background: #fff; }
.auftrag-plaetze li.fest { background: var(--handeln-hell); border-color: var(--marke-linie); }
.auftrag-plaetze .n { color: var(--grau); min-width: 4.2rem; font-size: .82rem; }
.auftrag-plaetze .art { margin-left: auto; color: var(--grau); font-size: .8rem; }
.platzform { display: flex; gap: .35rem; align-items: center; margin: 0; flex-wrap: wrap; }
.platzform select { min-width: 11rem; padding: .3rem .5rem; }
.auftrag-tausch { margin-top: .9rem; }
.trenner { border: 0; border-top: 1px solid var(--linie); margin: 1.2rem 0 1rem; }
.nicht { font-size: .9rem; color: var(--grau); }
.auftrag-zaehler { margin-top: 2rem; padding-top: .6rem; border-top: 1px solid var(--linie); font-weight: 600; font-size: .9rem; }
.auftrag-marke { display: inline-block; font-size: .78rem; font-weight: 600; color: var(--handeln);
  border: 1px solid var(--marke-linie); background: var(--handeln-hell); border-radius: 999px; padding: 1px 10px; margin: 0 0 .4rem; }
.auftrag-status { display: inline-block; font-size: .8rem; color: var(--gruen); background: var(--gruen-hell);
  border-radius: 999px; padding: 1px 10px; margin: 0 0 .4rem .4rem; }
.auftrag-liste { font-size: 1.02rem; margin: .4rem 0 1rem 1.2rem; padding: 0; }
.auftrag-liste li { margin: .25rem 0; }
.auftrag-frist { border: 1px dashed var(--marke-linie); border-radius: 8px; padding: .45rem .7rem;
  color: var(--grau); font-size: .9rem; margin: .9rem 0; }
.auftrag-karte .knopf { margin: .2rem 0; }

/* Bewertung (Stufe B) und Abschnitte des Konzepts */
.bewertung-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem 1.2rem; }
.bewertung-raster textarea { min-height: 110px; width: 100%; }
.belegliste { list-style: none; margin: .5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.belegliste li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; border-left: 3px solid var(--marke-linie);
  padding: .3rem .6rem; background: var(--grund); font-size: .9rem; }
.belegliste form.miniform { display: inline; }
.kriterium { border-top: 1px solid var(--linie); padding-top: .8rem; margin-top: .8rem; }
.kriterium:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.abschnitt-zeile { border-top: 1px solid var(--linie); padding: .7rem 0; }
.abschnitt-zeile:first-of-type { border-top: 0; }
.abschnittliste { list-style: none; margin: 0; padding: 0; }
.abschnitt-zeile .formular.zeile { align-items: flex-end; }
.abschnitt-zeile .wahl { flex-direction: row; align-items: center; gap: .35rem; font-weight: 400; min-width: 0; }
.abschnitt-zeile .wahl input { min-width: 0; width: 1.2rem; height: 1.2rem; }
.abschnitt-text { background: var(--grund); border-radius: 6px; padding: .4rem .6rem; font-size: .87rem;
  color: var(--grau); max-height: 8rem; overflow: auto; white-space: pre-wrap; }
.abschnitt-status { display: inline-block; font-size: .76rem; border-radius: 999px; padding: 1px 9px; margin-left: .4rem; }
.abschnitt-status.passt { color: var(--gruen); background: var(--gruen-hell); }
.abschnitt-status.nachbessern { color: var(--rot); background: var(--rot-hell); }
.abschnitt-status.fehlt { color: var(--grau); background: var(--grund); }

/* Abnahme-Meeting (0.9.3): Team und Gruppe sitzen sich gegenüber */
.amschritte { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; padding: 0; margin: .4rem 0 1rem; }
.amschritte li a { display: block; padding: .3rem .75rem; border-radius: 99px; background: var(--weiss);
  border: 1px solid var(--linie); font-size: .85rem; color: var(--grau); text-decoration: none; }
.amschritte li.getan a { background: var(--gruen-hell); color: var(--gruen); border-color: #b8e3d1; }
.amschritte li.jetzt a { background: var(--handeln); color: #fff; border-color: var(--handeln); font-weight: 700; }
.amraum { display: flex; align-items: stretch; background: #2b2f33; border-radius: 14px; padding: .9rem 1.1rem; margin-bottom: 1rem; gap: 1rem; }
.amseite { display: flex; flex-direction: column; gap: .5rem; }
.amseite.amteam { flex: 1; }
.amueber { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: #aeb3b8; font-weight: 700; }
.amkoepfe { display: flex; gap: 1rem; flex-wrap: wrap; }
.amperson { width: 5.2rem; text-align: center; color: #c9ccd0; opacity: .55; transition: opacity .2s; }
.amperson.spricht { opacity: 1; color: #fff; }
.amperson img, .amwir { width: 3.8rem; height: 3.8rem; border-radius: 50%; display: block; margin: 0 auto .25rem;
  object-fit: cover; border: 3px solid transparent; background: #fff; }
.amperson.spricht img, .amperson.spricht .amwir { border-color: #e9a1a6; box-shadow: 0 0 0 4px rgba(233, 161, 166, .25); }
.amwir { background: #2a5d8f; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .85rem; }
.amwir.klein { width: 2.6rem; height: 2.6rem; font-size: .7rem; margin: 0; flex: none; }
.amperson b { display: block; font-size: .78rem; } .amperson span { font-size: .7rem; }
.amtisch { width: 0; border-left: 2px dashed #5b6168; margin: 0 .3rem; }
.amgruppe { align-items: center; padding-left: .4rem; min-width: 8rem; }
.amblase { display: flex; gap: .7rem; margin: .7rem 0; align-items: flex-start; }
.amblase img { width: 2.6rem; height: 2.6rem; border-radius: 50%; flex: none; object-fit: cover; }
.amblase .amtext { padding: .7rem 1rem; max-width: 46rem; font-size: 1.02rem; line-height: 1.5; background: var(--weiss);
  border-left: 5px solid var(--handeln); border-radius: 4px 14px 14px 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); }
.amblase .amtext ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.amblase.wir { justify-content: flex-end; }
.amblase.wir .amtext { background: #eaf1f8; border-left: 0; border-right: 5px solid #2a5d8f; border-radius: 14px 4px 14px 14px; }
.amname { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--handeln); margin-bottom: .15rem; }
.amblase.wir .amname { color: #2a5d8f; text-align: right; }
.amkarten { list-style: none; padding: 0; margin: 0 0 .8rem; }
.amkarten li { padding: .35rem 0; border-bottom: 1px solid var(--linie); }
.amkarten label { display: flex; gap: .6rem; align-items: flex-start; }
@media (max-width: 700px) { .amraum { flex-direction: column; } .amtisch { display: none; } }

/* Gegenüber im Meeting: das Webdesign-Team spricht mit den Auftraggebern (0.9.3) */
.igegenueber { align-self: stretch; border-left: 2px dashed var(--linie); margin: 0 .2rem; }
.igruppe { width: 5.4rem; text-align: center; }
.iwir, .kreis.wir { width: 3.6rem; height: 3.6rem; border-radius: 50%; display: grid; place-items: center; margin: 0 auto .3rem;
  background: #2a5d8f; color: #fff; font-weight: 800; font-size: .8rem; }
.kreis.wir { width: 24px; height: 24px; font-size: .55rem; margin: 0 0 4px; }
.igruppe b { display: block; font-size: .78rem; color: #2a5d8f; }
.igruppe span { font-size: .64rem; color: var(--grau); text-transform: uppercase; letter-spacing: .07em; }
.rolle.gruppe-seite { border-color: #b8cde3; background: #f2f7fc; }
.iantwort-kopf { font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #2a5d8f;
  border-left: 4px solid #2a5d8f; padding-left: .5rem; margin-bottom: .5rem; }
.interviewform, .dialog .zeile.ich { border-right: 4px solid #cfdeed; padding-right: .8rem; }
.istatus { margin-left: 0; }

/* Iterationsassistent (0.9.6): links die fünf Schritte, rechts der Kontext. */
.ia { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.ia-schritte { position: sticky; top: .8rem; }
.ia-titel { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--grau); margin: 0 0 .45rem .2rem; }
.ia-schritt { display: flex; gap: .65rem; align-items: flex-start; padding: .55rem .6rem;
  border: 1px solid var(--linie); border-radius: 8px; background: var(--weiss);
  color: var(--text); text-decoration: none; margin: 0 0 .4rem; }
.ia-schritt b { width: 1.55rem; height: 1.55rem; border-radius: 50%; display: grid; place-items: center;
  background: #eef2f7; color: var(--grau); font-size: .8rem; flex: none; }
.ia-schritt span { font-weight: 700; font-size: .9rem; line-height: 1.2; }
.ia-schritt small { display: block; font-weight: 400; color: var(--grau); font-size: .72rem; margin-top: .15rem; }
.ia-schritt.jetzt { border-color: var(--handeln); box-shadow: inset 3px 0 0 var(--handeln); }
.ia-schritt.jetzt b { background: var(--handeln); color: #fff; }
.ia-schritt.getan { background: var(--gruen-hell); border-color: #b8e3d1; }
.ia-schritt.getan b { background: var(--gruen); color: #fff; }
.ia-fuss { font-size: .76rem; color: var(--grau); padding: .3rem .2rem; }
.ia-panel-kopf { display: flex; gap: .8rem; align-items: flex-start; margin: 0 0 .8rem; }
.ia-nr { width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--handeln); color: #fff;
  display: grid; place-items: center; font-weight: 800; flex: none; }
.ia-panel h2 { margin: 0 0 .15rem; }
.ia-panel h3 { margin: 0 0 .35rem; font-size: 1.02rem; }
.ia-fussleiste { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center;
  border-top: 1px solid var(--linie); padding-top: .8rem; margin-top: 1rem; }
.ia-fussleiste .rechts { margin-left: auto; }
.ia-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.ia-status { display: inline-block; font-size: .72rem; font-weight: 700; padding: .12rem .45rem;
  border-radius: 99px; background: #eef2f7; color: var(--grau); }
.ia-status.ok { background: var(--gruen-hell); color: var(--gruen); }
.ia-status.warn { background: var(--gelb-hell); color: var(--gelb); }
.ia-knopfreihe { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.ia-knopfreihe form { margin: 0; }
.ia-leise { color: var(--grau); font-size: .82rem; }
@media (max-width: 760px) {
  .ia { grid-template-columns: 1fr; }
  .ia-schritte { position: static; display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }
  .ia-titel, .ia-fuss { grid-column: 1 / -1; }
  .ia-schritt { margin: 0; }
  .ia-schritt small { display: none; }
  .ia-zwei { grid-template-columns: 1fr; }
  .ia-fussleiste .rechts { margin-left: 0; }
}

/* Bei 1366 px bleibt die Kopfleiste eine Zeile, auch mit dem Iterations-Link. */
@media (min-width: 1000px) and (max-width: 1400px) {
  .nav { gap: .25rem; }
  .nav a { padding: .4rem .4rem; }
}

/* Kanban-Motto (A-02, 0.9.8) */
.board-motto { margin: -.2rem 0 1rem; color: var(--grau); font-size: .95rem; font-style: italic; }

/* Schritt 4 und 5 im Iterationsassistenten (0.9.8) */
.kartenwahl { display: flex; gap: .55rem; align-items: flex-start; padding: .45rem 0;
  border-bottom: 1px solid var(--linie); }
.kartenwahl input { margin-top: .25rem; flex: none; }
.kartentext { display: grid; gap: .1rem; }
.kartentext small { color: var(--grau); font-size: .75rem; }
.kartentext .leise { font-size: .85rem; }
.dateiliste-prompt { list-style: none; padding: 0; margin: 0; }
.dateiliste-prompt li { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap;
  padding: .4rem 0; border-bottom: 1px solid var(--linie); }
.dateiliste-prompt .marke-art { font-size: .72rem; font-weight: 700; color: var(--grau);
  background: #eef2f7; border-radius: 99px; padding: .1rem .45rem; }
.dateiliste-prompt .marke-art.neu { background: var(--gelb-hell); color: var(--gelb); }
.dateiliste-prompt .knopf { margin-left: auto; }
.promptfeld { width: 100%; font-family: Consolas, "Courier New", monospace; font-size: .82rem;
  line-height: 1.35; }

/* Arbeitsauftrag für die Mappe: drei Schritte und Platz-Karten (A-01, 0.9.9) */
.auftrag-schritte { display: flex; gap: .5rem; list-style: none; padding: 0; margin: 0 0 1rem; flex-wrap: wrap; }
.auftrag-schritte li { display: flex; align-items: center; gap: .45rem; padding: .4rem .8rem;
  border: 1px solid var(--linie); border-radius: 99px; background: var(--weiss); color: var(--grau);
  font-size: .88rem; }
.auftrag-schritte b { display: grid; place-items: center; width: 1.5rem; height: 1.5rem;
  border-radius: 50%; background: #eef2f7; color: var(--grau); font-size: .8rem; }
.auftrag-schritte li.jetzt { border-color: var(--handeln); color: var(--text); font-weight: 700; }
.auftrag-schritte li.jetzt b { background: var(--handeln); color: #fff; }
.auftrag-schritte li.fertig b { background: var(--gruen); color: #fff; }
.platz-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .7rem; }
.platz-karte { position: relative; display: grid; gap: .25rem; padding: .8rem .9rem .9rem;
  border: 1px solid var(--linie); border-radius: 10px; background: var(--weiss); align-content: start; }
.platz-karte.fest { background: var(--handeln-hell); border-color: rgba(160, 74, 80, .35); }
.platz-karte.zieh { opacity: .55; }
.platz-nr { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  background: var(--handeln); color: #fff; font-weight: 800; font-size: .9rem; }
.platz-karte.fest .platz-nr { background: var(--rot); }
.platz-karte b { font-size: 1rem; line-height: 1.25; }
.platz-art { color: var(--grau); font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; }
.platz-pfeile { display: flex; gap: .3rem; margin-top: .3rem; }
.platz-pfeile form { margin: 0; }
.platz-kandidaten { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; margin-top: .4rem;
  border-top: 1px dashed var(--linie); padding-top: .4rem; }
.platz-kandidaten form { margin: 0; }
.chip-knopf { border: 1px solid var(--linie); background: #f7f7f7; color: var(--text);
  border-radius: 99px; padding: .2rem .6rem; font: inherit; font-size: .8rem; cursor: pointer; }
.chip-knopf:hover { background: var(--handeln-hell); border-color: rgba(160, 74, 80, .4); }
@media (max-width: 700px) {
  .platz-board { grid-template-columns: 1fr 1fr; }
}

/* Faktenblatt (P4a, T8). Eigene Namen mit fb-, damit .karte/.marke/.jetzt unbelegt bleiben. */
.fb-kopf { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem; margin: .8rem 0 1rem; }
.fb-kachel { border: 1px solid var(--linie); border-radius: 8px; padding: .5rem .6rem; background: var(--weiss); }
.fb-kachel-titel { display: block; font-size: .7rem; color: var(--grau); text-transform: uppercase; letter-spacing: .03em; }
.fb-zahl { font-size: 1.3rem; font-weight: 700; color: var(--text); text-decoration: none; }
a.fb-zahl { border-bottom: 1px dotted var(--marke-linie); }
a.fb-zahl:hover { border-bottom-style: solid; }
.fb-einheit { font-size: .75rem; color: var(--grau); }
.fb-kachel-fuss { display: block; font-size: .65rem; margin-top: 2px; }
.fb-leer { color: #8a8f98; font-style: italic; }
.fb-leise { color: var(--grau); font-size: .8rem; }
.fb-belege a { font-size: .7rem; margin-right: .3rem; white-space: nowrap; }
.fb-legende { color: var(--grau); font-size: .8rem; }
.fb-legende .ampelpunkt { margin: 0 .2rem 0 .7rem; }
.fb-tabelle td:first-child { min-width: 240px; }
.fb-kennzahlen { table-layout: fixed; }
.fb-kennzahlen th:nth-child(1), .fb-kennzahlen td:nth-child(1) { width: 38%; }
.fb-kennzahlen th:nth-child(2), .fb-kennzahlen td:nth-child(2) { width: 28%; }
.fb-kennzahlen th:nth-child(3), .fb-kennzahlen td:nth-child(3) { width: 9%; }
.fb-kennzahlen th:nth-child(4), .fb-kennzahlen td:nth-child(4) { width: 25%; }
.fb-kennzahlen td { overflow-wrap: break-word; }
.fb-kennzahlen td:nth-child(4) { overflow-wrap: anywhere; }
.fb-felder { font-size: .82rem; }
.fb-feld { margin-right: .4rem; }
.fb-block { margin-bottom: .7rem; }
.fb-block p { margin: .2rem 0; }
.fb-punkte { margin: .2rem 0 .2rem 1.1rem; padding: 0; font-size: .88rem; }
.fb-liste { font-size: .82rem; }
.fb-zaehler span { margin-right: .9rem; }
.fb-hinweise { border-left: 3px solid #d29b00; padding-left: .7rem; }
.fb-hinweis { background: var(--gelb-hell); border-radius: 6px; padding: .5rem .7rem; }
.fb-kriterium h3 { margin-bottom: .4rem; }
.fb-matrix-scroll { overflow-x: auto; }
.fb-matrix th, .fb-matrix td { padding: .25rem .12rem; font-size: .78rem; }
.fb-matrix td.fb-zelle-ampel { padding: .25rem 0; }
.fb-matrix .ampelpunkt { width: .7rem; height: .7rem; }
.fb-matrix th { font-size: .68rem; }
.fb-matrix .fb-senkrecht { display: inline-block; font-family: Consolas, monospace; font-size: .68rem; }
.fb-zelle-ampel { text-align: center; }
.fb-zahlfeld { width: 5rem; padding: .2rem .3rem; }
.fb-pre { white-space: pre-wrap; font-size: .78rem; background: #fbfcfd; border: 1px solid var(--linie);
  border-radius: 6px; padding: .5rem .6rem; max-height: 24rem; overflow: auto; }
.fb-beleg th { width: 12rem; }
@media (max-width: 900px) {
  .fb-kopf { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media print {
  .fb-matrix-scroll { overflow: visible; }
  .karte { break-inside: avoid; }
}
.fb-matrix th { white-space: nowrap; }
.fb-belege a { overflow-wrap: anywhere; }
@media (max-width: 900px) {
  .fb-tabelle td:first-child { min-width: 0; }
  .fb-belege a { white-space: normal; }
}
@media (max-width: 900px) {
  .fb-kennzahlen { table-layout: auto; }
  .fb-kennzahlen thead { display: none; }
  .fb-kennzahlen, .fb-kennzahlen tbody, .fb-kennzahlen tr, .fb-kennzahlen td { display: block; width: auto; }
  .fb-kennzahlen tr { border: 1px solid var(--linie); border-radius: 8px; margin: .4rem 0; padding: .5rem .6rem; }
  .fb-kennzahlen td { border: 0; padding: .1rem 0; }
  .fb-kennzahlen td:nth-child(2)::before { content: "Wert: "; font-weight: 700; color: var(--grau); }
  .fb-kennzahlen td:nth-child(3)::before { content: "Ampel: "; font-weight: 700; color: var(--grau); }
  .fb-kennzahlen td:nth-child(4)::before { content: "Belege: "; font-weight: 700; color: var(--grau); }
}

/* Bewertung nach Rubrik (P5, T9). Eigene Namen, damit .karte/.kriterium/.ampel unberuehrt bleiben. */
.rubrik-felder { display: grid; grid-template-columns: 10rem minmax(0, 1fr) minmax(16rem, 1fr);
  gap: .6rem 1.2rem; align-items: start; margin: .7rem 0 .5rem; }
.rubrik-felder label { display: flex; flex-direction: column; gap: .25rem; font-weight: 600; font-size: .9rem; }
.rubrik-felder input, .rubrik-felder select, .rubrik-felder textarea { min-width: 0; width: 100%; }
.rubrik-felder textarea { min-height: 4.6rem; }
.rubrik-punkte { grid-column: 1 / -1; font-size: .9rem; }
.rubrik-formular .formular.zeile label { min-width: 12rem; }
@media (max-width: 900px) { .rubrik-felder { grid-template-columns: 1fr; } }
@media print {
  .rubrik-felder { display: none; }
  .kriterium { break-inside: avoid; }
}