/* =====================================================================
   Arbeitsplatz - der Rahmen der Konstruktionswerkstatt (Oktober 2026)

   Vorher eine lange Webseite: Kopf, Hilfe-Streifen, Werkbank und 17 Tabs
   in vier Reihen standen ueber JEDEM Modul. Auf einem 1366x900-Laptop
   begann der Modulinhalt erst bei 1061px, also unterhalb des Bildschirms.

   Jetzt ein Arbeitsplatz in drei Spalten:
     links   dunkle Seitenleiste - Marke, Schnellsuche, Navigation
     Mitte   helle Arbeitsflaeche - kompakte Werkbank-Leiste, Modul
     rechts  Konstruktionsleiste - die Auswahl, mit der alle Module arbeiten

   Farbe: alles aus der Pergamentwelt der Werkstatt. Die Seitenleiste ist
   ein tieferer Pergamentton (vorher Tiefblau - das biss sich mit dem Beige),
   Auswahl und Markierungen in Umbra, Terrakotta bleibt die Farbe fuers
   Handeln (Knoepfe). Die vier Modul-Familien haben je eine gedeckte
   Kennfarbe wie aus einem alten Atlas: Ocker, Malve, Ziegel, Oliv.

   Zielgeraete: Laptop und Tablet. Das Handy bleibt benutzbar, mehr nicht.
   ===================================================================== */

:root {
  /* Seitenleiste: derselbe helle Pergamentton wie die Konstruktionsleiste
     rechts - beide Raender symmetrisch, Schrift schwarz wie dort */
  --leiste:     #f8f2e6;
  --nav:        var(--leiste);
  --nav-2:      #ffffff;
  --nav-ink:    var(--ink);
  --nav-strong: var(--ink);
  --nav-muted:  var(--ink-soft);
  --nav-faint:  var(--ink-muted);
  --nav-line:   var(--rule-soft);
  --nav-hover:  rgba(120,80,40,0.07);
  --nav-active: rgba(162,86,42,0.13);
  /* Auswahl und Markierungen: Umbra */
  --sepia:      #5e4330;
  --sepia-ink:  #44301f;
  --sepia-soft: #efe5d3;
  --canvas:     #f4f1ea;
  /* Kopfkarte des Unterrichtspfads: dunkles Leder */
  --leder:      #3a2b1f;
  --leder-ink:  #f3ebdc;
  --leder-muted:#c3b096;
  /* Kennfarben der Familien - gedeckt, auf Pergament gut lesbar */
  --fam-gewinnen:    #9a7128;
  --fam-vorbereiten: #80587a;
  --fam-anwenden:    #b4542c;
  --fam-niveau:      #5f7644;
  --fam-start:       #a0855f;
  --side-w: 240px;
  --rail-w: 292px;
  --radius: 10px;
}

body { background: var(--canvas); }

/* ── Grundgeruest ─────────────────────────────────────────────── */
.app {
  position: relative; z-index: 1;
  display: grid;
  grid-template-columns: var(--side-w) minmax(0, 1fr) var(--rail-w);
  min-height: 100vh;
}
.main { min-width: 0; display: flex; flex-direction: column; }
#panels { padding: 1.6rem clamp(1.1rem, 2.6vw, 2.4rem) 5rem; max-width: 1080px; width: 100%; }

/* ── Seitenleiste ─────────────────────────────────────────────── */
.side {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--nav); color: var(--nav-ink);
  border-right: 1px solid var(--rule-soft);
  display: flex; flex-direction: column;
  padding: 1.15rem 0.75rem 1rem;
  scrollbar-width: thin; scrollbar-color: var(--nav-faint) transparent;
}
.side-brand { padding: 0.2rem 0.55rem 1rem; }
.brand { display: flex; align-items: flex-start; gap: 0.7rem; text-decoration: none; color: var(--nav-strong); cursor: pointer; }
.brand-name {
  font-family: var(--serif); font-weight: 700; font-size: 1.28rem; line-height: 1.08;
  letter-spacing: -0.01em; color: var(--nav-strong); -webkit-hyphens: manual; hyphens: manual;
}
.brand-name .dot { color: var(--accent-line); }
.brand-sub { display: block; margin: 0.45rem 0 0 2.6rem; font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nav-muted); white-space: nowrap; }

/* Das Zeichen: drei Bausteine = das Kontinuum gebrauchsfertig - halbfertig - unfertig */
.brand-mark { display: inline-flex; gap: 3px; flex: 0 0 auto; padding-top: 0.28rem; }
.brand-mark i { display: block; width: 8px; height: 15px; border-radius: 2px; }
.brand-mark .bm-voll { background: var(--nav-strong); }
.brand-mark .bm-halb { border: 1.5px solid var(--nav-strong); background: linear-gradient(to top, var(--nav-strong) 50%, transparent 50%); }
.brand-mark .bm-leer { border: 1.5px solid var(--accent-line); }
.brand-mark.sm { padding-top: 0; gap: 2px; }
.brand-mark.sm i { width: 6px; height: 11px; border-radius: 1.5px; }
.brand-mark.sm .bm-voll { background: var(--sepia); }
.brand-mark.sm .bm-halb { border-color: var(--sepia); background: linear-gradient(to top, var(--sepia) 50%, transparent 50%); }
.brand-mark.sm .bm-leer { border-color: var(--accent); }

.side-search {
  display: flex; align-items: center; gap: 0.55rem; width: 100%;
  margin: 0 0 0.6rem; padding: 0.55rem 0.7rem;
  background: var(--nav-2); border: 1px solid var(--nav-line); border-radius: 8px;
  color: var(--nav-muted); font-family: var(--sans); font-size: 0.84rem; cursor: pointer; text-align: left;
  transition: border-color .15s, color .15s;
}
.side-search:hover, .side-search:focus-visible { border-color: var(--accent-line); color: var(--nav-ink); outline: none; }
.side-search .ss-ic { font-size: 1rem; line-height: 1; }
.side-search .ss-t { flex: 1 1 auto; }
.side-search kbd { font-family: var(--mono); font-size: 10px; color: var(--nav-muted); border: 1px solid var(--nav-line); border-radius: 4px; padding: 0.05rem 0.35rem; }

/* Navigation: dieselben .tab-Knoepfe wie vorher, nur senkrecht */
.side .tabs { display: block; margin: 0; padding: 0; border: none; flex: 1 1 auto; }
.side .tab {
  display: flex; align-items: baseline; gap: 0.15rem; width: 100%; min-height: 0;
  font-family: var(--sans); font-size: 0.875rem; letter-spacing: 0; text-transform: none;
  color: var(--nav-ink); font-weight: 500; padding: 0.4rem 0.65rem; margin: 1px 0;
  border: none; border-radius: 7px; text-align: left; white-space: normal; line-height: 1.3;
  transition: background .12s, color .12s;
}
.side .tab .tab-nr { flex: 0 0 2.3em; font-family: var(--mono); font-size: 10.5px; color: var(--nav-faint); margin: 0; }
.side .tab:hover { background: var(--nav-hover); color: var(--nav-strong); }
.side .tab:focus-visible { outline: 2px solid var(--fam, var(--accent-line)); outline-offset: -2px; }
.side .tab.active { background: var(--nav-active); color: var(--nav-strong); font-weight: 600; box-shadow: inset 3px 0 0 var(--fam, var(--accent-line)); }
.side .tab.active .tab-nr { color: var(--fam, var(--accent-line)); }
.side .tab-group {
  display: flex; align-items: center; gap: 0.5rem;
  margin: 1.05rem 0.65rem 0.35rem; padding: 0;
  font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--nav-muted);
}
.side .tab-group::before { content: ''; width: 7px; height: 7px; border-radius: 2px; background: var(--fam, var(--nav-faint)); flex: 0 0 auto; }
.side .tab-group::after { content: ''; flex: 1 1 auto; height: 1px; background: var(--nav-line); }
.fam-gewinnen    { --fam: var(--fam-gewinnen); }
.fam-vorbereiten { --fam: var(--fam-vorbereiten); }
.fam-anwenden    { --fam: var(--fam-anwenden); }
.fam-niveau      { --fam: var(--fam-niveau); }
.fam-start       { --fam: var(--fam-start); }

.side-foot { display: flex; flex-direction: column; gap: 0.3rem; padding: 1.1rem 0.65rem 0.2rem; margin-top: 1rem; border-top: 1px solid var(--nav-line); font-size: 0.78rem; }
.side-foot a { color: var(--nav-muted); text-decoration: none; }
.side-foot a:hover { color: var(--accent); }
.side-foot .side-coffee { color: var(--accent-ink); }
.side-foot .side-credit { color: var(--nav-faint); font-size: 0.72rem; margin-top: 0.35rem; line-height: 1.45; }
.side-foot .side-credit a { color: var(--nav-faint); text-decoration: underline; }
.side-foot .ampersand { font-family: var(--serif); font-style: italic; color: var(--accent); }

/* ── Werkbank-Leiste oben (kompakt, klebend) ──────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: flex-start; gap: 0.6rem;
  padding: 0.7rem clamp(1.1rem, 2.6vw, 2.4rem);
  background: rgba(244,241,234,0.9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule-soft);
}
.topbar .werkbank {
  position: static; flex: 1 1 auto; min-width: 0; margin: 0; padding: 0;
  background: none; border: none; border-radius: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  /* Festes Raster statt freiem Umbruch: Zeile 1 = Einheit + Aktionen,
     Zeile 2 = die beiden Anker nebeneinander. Freies flex-wrap verteilte
     die Teile je nach Breite auf drei Zeilen in wechselnder Ordnung. */
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 0.45rem 0.75rem;
}
.topbar .werkbank-id { grid-column: 1; grid-row: 1; gap: 0.55rem; flex-wrap: nowrap; min-width: 0; }
.topbar .werkbank-actions { grid-column: 2; grid-row: 1; }
.topbar .werkbank-anker { grid-column: 1 / -1; grid-row: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.45rem; min-width: 0; }
.topbar .werkbank-unit {
  display: inline-flex; align-items: baseline; gap: 0.35rem; min-width: 0; max-width: 30ch;
  background: none; border: 1px solid transparent; border-radius: 7px; padding: 0.15rem 0.45rem 0.2rem; margin-left: -0.45rem;
  font-family: var(--serif); font-weight: 700; font-size: 1.12rem; color: var(--ink); cursor: pointer;
  transition: background .12s, border-color .12s;
}
.topbar .werkbank-unit:hover, .topbar .werkbank-unit:focus-visible { background: var(--bg-card); border-color: var(--rule-soft); outline: none; }
.topbar .werkbank-unit .wu-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.topbar .werkbank-unit .wu-caret { font-family: var(--sans); font-size: 0.7rem; color: var(--ink-muted); }
.topbar .ls-label { display: none; }
.topbar .langswitch { flex: 0 0 auto; }
.topbar .segmented button { padding: 0.28rem 0.55rem; }
.topbar .werkbank-id select { flex: 0 0 auto; }
.topbar .werkbank-actions { flex: 0 0 auto; gap: 0.35rem; flex-wrap: nowrap; }
.topbar .werkbank-actions .btn { padding: 0.42rem 0.6rem; }
.topbar .werkbank-actions .wv-n {
  display: inline-block; min-width: 1.3em; padding: 0 0.3em; margin-left: 0.25em; border-radius: 999px;
  background: var(--warn); color: #fff; font-size: 9.5px; line-height: 1.5; text-align: center;
}
/* Die Ankerzeilen (Lernaufgabe, Situation) teilen sich eine Zeile als Chips */
.topbar .werkbank-task {
  min-width: 0; margin: 0; padding: 0.3rem 0.6rem;
  border: 1px solid var(--rule-soft); border-radius: 8px; background: rgba(255,255,255,0.55);
  align-items: center;
}
.topbar .werkbank-task:hover { border-color: var(--accent-line); background: var(--bg-card); }
.topbar .werkbank-task.werkbank-sit { padding-top: 0.3rem; border-top-style: solid; }
.topbar .werkbank-task .wt-label { font-size: 9.5px; letter-spacing: 0.1em; }
.topbar .werkbank-task .wt-val { font-size: 0.86rem; }
.topbar .werkbank-task .wt-edit { font-size: 9.5px; }
/* Der Zaehler steht in der Konstruktionsleiste bzw. auf ihrem Knopf */
.topbar .werkbank-count { display: none; }

.tb-icon, .tb-rail {
  flex: 0 0 auto; display: none; align-items: center; justify-content: center; gap: 0.4rem;
  min-width: 38px; height: 36px; padding: 0 0.6rem; margin-top: 0.05rem;
  background: var(--bg-card); border: 1px solid var(--rule-soft); border-radius: 8px;
  color: var(--ink-soft); font-size: 1rem; cursor: pointer;
}
.tb-icon:hover, .tb-rail:hover { border-color: var(--accent-line); color: var(--accent); }
.tb-rail .tbr-n { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); }
.tb-rail .tbr-n b { color: var(--ink); }

/* ── Modulkopf: kompakter, der Inhalt soll oben stehen ────────── */
.panel { padding-top: 0.3rem; }
.module-head { margin-bottom: 1.25rem; }
.module-head .eyebrow { margin-bottom: 0.55rem; }
.module-head .eyebrow::before { background: var(--fam-line, var(--accent-line)); }
.module-title { font-size: clamp(1.5rem, 2.4vw, 1.95rem); margin-bottom: 0.35rem; }
.module-lead { font-size: 1rem; line-height: 1.6; max-width: 68ch; }

/* Karten etwas ruhiger und runder - die Arbeitsflaeche ist jetzt der Hintergrund */
.card { border-color: var(--rule-soft); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(60,40,20,0.05), 0 6px 18px rgba(60,40,20,0.05); }

/* ── Konstruktionsleiste (rechts) ─────────────────────────────── */
.rail {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; flex-direction: column;
  background: var(--leiste); border-left: 1px solid var(--rule-soft);
}
.rail-head { padding: 1rem 1rem 0.7rem; border-bottom: 1px solid var(--rule-soft); }
.rail-kicker { display: flex; align-items: center; gap: 0.5rem; font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sepia); }
.rail-zahl { display: flex; align-items: baseline; gap: 0.4rem; margin: 0.35rem 0 0.15rem; }
.rail-zahl b { font-family: var(--serif); font-size: 2rem; font-weight: 700; color: var(--ink); line-height: 1; }
.rail-zahl span { font-size: 0.82rem; color: var(--ink-muted); }
.rail-hint { font-size: 0.76rem; color: var(--ink-muted); line-height: 1.4; }
.rail-tools { display: flex; gap: 0.35rem; margin-top: 0.65rem; }
.rail-tools input { flex: 1 1 auto; min-width: 0; padding: 0.38rem 0.55rem; font-size: 0.82rem; border-radius: 7px; }
.rail-tools .btn { padding: 0.38rem 0.5rem; }
.rail-filter { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.5rem; }
.rail-filter button {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.18rem 0.5rem; border-radius: 999px; border: 1px solid var(--rule-soft); background: none; color: var(--ink-muted); cursor: pointer;
}
.rail-filter button.on { background: var(--sepia); border-color: var(--sepia); color: #fff; }
.rail-list { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; padding: 0.35rem 0.5rem 0.8rem; scrollbar-width: thin; }
.rail-item {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: start; gap: 0.5rem;
  padding: 0.4rem 0.5rem; border-radius: 8px; cursor: pointer;
}
.rail-item:hover { background: var(--sepia-soft); }
.rail-item input { margin-top: 0.22rem; width: 15px; height: 15px; accent-color: var(--sepia); cursor: pointer; }
.rail-item .ri-glyph { margin-top: 0.3rem; }
.rail-item .ri-text { min-width: 0; }
.rail-item .ri-chunk { display: block; font-family: var(--serif); font-weight: 600; font-size: 0.92rem; line-height: 1.25; color: var(--ink); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rail-item .ri-meta { display: block; font-size: 0.74rem; color: var(--ink-muted); line-height: 1.3; margin-top: 0.1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-item.aus .ri-chunk { color: var(--ink-faint); font-weight: 500; }
.rail-item.aus .ri-meta { color: var(--ink-faint); }
.rail-item.flash { animation: railFlash 1.2s ease; }
@keyframes railFlash { 0%, 40% { background: var(--accent-soft); } 100% { background: transparent; } }
.rail-empty { padding: 1.2rem 1rem; font-family: var(--serif); font-style: italic; font-size: 0.9rem; color: var(--ink-muted); }
.rail-empty .btn { margin-top: 0.7rem; font-style: normal; }
.rail-foot { display: flex; gap: 0.35rem; flex-wrap: wrap; padding: 0.65rem 0.9rem; border-top: 1px solid var(--rule-soft); background: #f7f5ef; }
.rail-foot .btn { flex: 1 1 auto; justify-content: center; }
.rail-close { display: none; margin-left: auto; background: none; border: none; font-size: 1.2rem; color: var(--ink-muted); cursor: pointer; padding: 0 0.2rem; }

/* Kontinuum-Zeichen pro Konstruktion: voll = gebrauchsfertig, halb = halbfertig, leer = unfertig */
.kz { display: inline-block; width: 8px; height: 14px; border-radius: 2px; border: 1.5px solid var(--sepia); flex: 0 0 auto; }
.kz.kz-gebrauchsfertig { background: var(--sepia); }
.kz.kz-halbfertig { background: linear-gradient(to top, var(--sepia) 50%, transparent 50%); }
.kz.kz-unfertig { background: none; border-color: var(--accent); }

/* ── Schnellsuche (⌘K) ────────────────────────────────────────── */
.cmdk-back { position: fixed; inset: 0; z-index: 150; background: rgba(40,28,16,0.40); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 1rem 1rem; animation: fadeIn .15s ease; }
.cmdk {
  width: 100%; max-width: 620px; max-height: 70vh; display: flex; flex-direction: column;
  background: var(--bg-card); border: 1px solid var(--rule); border-radius: 14px;
  box-shadow: 0 24px 70px rgba(10,20,40,0.28); overflow: hidden;
}
.cmdk-in { display: flex; align-items: center; gap: 0.6rem; padding: 0.85rem 1rem; border-bottom: 1px solid var(--rule-soft); }
.cmdk-in .ci-ic { font-size: 1.15rem; color: var(--ink-muted); }
.cmdk-in input { flex: 1 1 auto; border: none; outline: none; background: none; font-size: 1.05rem; padding: 0.2rem 0; box-shadow: none; }
.cmdk-in kbd { font-family: var(--mono); font-size: 10px; color: var(--ink-muted); border: 1px solid var(--rule-soft); border-radius: 4px; padding: 0.05rem 0.35rem; }
.cmdk-list { overflow-y: auto; padding: 0.4rem; }
.cmdk-sec { font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); padding: 0.6rem 0.65rem 0.25rem; }
.cmdk-row {
  display: flex; align-items: center; gap: 0.65rem; width: 100%; text-align: left;
  padding: 0.5rem 0.65rem; border-radius: 8px; border: none; background: none; cursor: pointer; color: var(--ink-soft);
}
.cmdk-row .cr-ic { flex: 0 0 1.5rem; text-align: center; color: var(--ink-muted); }
.cmdk-row .cr-dot { width: 8px; height: 8px; border-radius: 2px; background: var(--fam-dot, var(--ink-faint)); }
.cmdk-row .cr-t { flex: 1 1 auto; min-width: 0; }
.cmdk-row .cr-t b { color: var(--ink); font-weight: 600; }
.cmdk-row .cr-t small { display: block; font-size: 0.76rem; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-row .cr-k { font-family: var(--mono); font-size: 10px; color: var(--ink-faint); white-space: nowrap; }
.cmdk-row.on { background: var(--sepia-soft); }
.cmdk-row.on .cr-k { color: var(--sepia); }
.cmdk-leer { padding: 1rem; font-family: var(--serif); font-style: italic; color: var(--ink-muted); }
.cmdk-foot { display: flex; gap: 1rem; flex-wrap: wrap; padding: 0.5rem 1rem; border-top: 1px solid var(--rule-soft); font-family: var(--mono); font-size: 10px; color: var(--ink-muted); background: #faf8f3; }
.cmdk-foot kbd { font-family: var(--mono); border: 1px solid var(--rule-soft); border-radius: 3px; padding: 0 0.3rem; margin-right: 0.25rem; }

/* Kurzes Aufleuchten einer Karte, zu der die Suche gesprungen ist */
.chunk-card.ziel-flash { animation: railFlash 1.6s ease; }

/* ── Abdeckung (Seitenleiste/Konstruktionsleiste als Schubladen) ─ */
.scrim { position: fixed; inset: 0; z-index: 70; background: rgba(40,28,16,0.34); animation: fadeIn .15s ease; }
.scrim[hidden] { display: none; }

/* Unter 1300px: Konstruktionsleiste wird zur Schublade von rechts */
@media (max-width: 1299px) {
  :root { --side-w: 228px; }
  .app { grid-template-columns: var(--side-w) minmax(0, 1fr); }
  .tb-rail { display: inline-flex; }
  .rail {
    position: fixed; top: 0; right: 0; bottom: 0; height: auto; width: min(340px, 92vw); z-index: 80;
    transform: translateX(102%); transition: transform .22s ease; box-shadow: -18px 0 50px rgba(10,20,40,0.18);
  }
  .app.rail-open .rail { transform: none; }
  .rail-close { display: inline-block; }
}
/* Unter 1024px: auch die Navigation wird zur Schublade von links */
@media (max-width: 1023px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .tb-icon { display: inline-flex; }
  .side {
    position: fixed; top: 0; left: 0; bottom: 0; height: auto; width: min(290px, 86vw); z-index: 80;
    transform: translateX(-102%); transition: transform .22s ease; box-shadow: 18px 0 50px rgba(10,20,40,0.25);
  }
  .app.side-open .side { transform: none; }
}
/* Handy: muss gehen, nicht glaenzen. Die Leiste klebt hier nicht mit -
   sonst frisst sie ein Drittel des Bildschirms. */
@media (max-width: 640px) {
  .topbar { position: static; padding: 0.55rem 0.8rem; gap: 0.45rem; flex-wrap: wrap; justify-content: space-between; }
  /* Menue- und Leisten-Knopf oben an die Raender, die Werkbank darunter in voller Breite */
  .topbar .werkbank { order: 3; flex: 1 1 100%; }
  .topbar .werkbank-id { grid-column: 1 / -1; flex-wrap: wrap; }
  .topbar .werkbank-actions { grid-column: 1 / -1; grid-row: 2; }
  .topbar .werkbank-actions .btn:not(.btn-primary) .lbl { display: none; }
  .topbar .werkbank-anker { grid-row: 3; grid-template-columns: minmax(0, 1fr); }
  #panels { padding: 1.1rem 0.9rem 4rem; }
}
/* Unter 1500px ist es oben eng: "Wiedervorlage" zeigt nur Glocke + Zahl.
   "Sichern" und "Export" behalten ihr Wort - ⇅ allein waere ein Raetsel. */
@media (max-width: 1499px) {
  .topbar .werkbank-actions .btn[title^="Wiedervorlage"] .lbl { display: none; }
}

@media (pointer: coarse) {
  .side .tab { min-height: 40px; align-items: center; }
  .rail-item { padding: 0.55rem 0.5rem; }
  .rail-item input { width: 20px; height: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .side, .rail { transition: none; }
  .rail-item.flash, .chunk-card.ziel-flash { animation: none; }
}

@media print {
  .side, .rail, .topbar, .scrim { display: none !important; }
  .app { display: block; }
  #panels { padding: 0; max-width: none; }
}

/* Abzeichen der privaten API-Version (steht nur dort im Markup) */
.brand-badge { display: inline-block; margin: 0.55rem 0 0 2.6rem; padding: 0.12rem 0.5rem; border: 1px solid var(--accent-line); border-radius: 999px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); white-space: nowrap; }

/* ══ Unterrichtspfad (Phase 3) ════════════════════════════════════
   Der Weg einer Stunde als senkrechte Linie mit Stationen - wie eine
   Bahnlinie: gefuellter Knoten = vorbereitet, halber = teilweise,
   leerer = offen. Die Linie traegt die Familienfarbe der Station. */
.pfad-kopf { display: flex; flex-wrap: wrap; gap: 1.2rem 2rem; align-items: flex-end; justify-content: space-between;
  background: var(--leder); color: var(--leder-ink); border-radius: 14px; padding: 1.4rem 1.6rem; margin-bottom: 1.6rem;
  background-image: radial-gradient(120% 140% at 100% 0%, rgba(216,173,136,0.18), transparent 55%); }
.pfad-kopf-l { flex: 1 1 340px; min-width: 0; }
.pfad-einheit { font-family: var(--serif); font-weight: 700; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.1; color: #fff; }
.pfad-sit { margin-top: 0.35rem; font-family: var(--serif); font-style: italic; color: #e3d3b8; font-size: 0.98rem; }
.pfad-sit.leer { color: var(--leder-muted); }
.pfad-fort { display: flex; gap: 4px; margin-top: 1rem; max-width: 460px; }
.pfad-fort .pf-seg { flex: 1 1 0; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.14); }
.pfad-fort .pf-seg.fertig { background: #a7b986; }
.pfad-fort .pf-seg.teilweise { background: linear-gradient(to right, #d8ad88 50%, rgba(255,255,255,0.14) 50%); }
.pfad-fort-t { margin-top: 0.45rem; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--leder-muted); }
.pfad-fort-t b { color: #fff; }
.pfad-kopf-r { display: flex; flex-wrap: wrap; gap: 0.5rem 0.8rem; align-items: center; justify-content: flex-end; flex: 0 1 auto; }
.pfad-kopf .btn.pfad-gross { font-size: 11px; padding: 0.7rem 1rem; }
.pfad-kopf .btn:not(.btn-primary) { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.22); color: #fff; }
.pfad-kopf .btn:not(.btn-primary):hover { background: rgba(255,255,255,0.14); color: #fff; }
.pfad-opt { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--leder-muted); cursor: pointer; flex-basis: 100%; justify-content: flex-end; }
.pfad-opt + .pfad-opt { flex-basis: auto; }
.pfad-opt input { accent-color: #d8ad88; }

.pfad-weg { list-style: none; margin: 0; padding: 0; position: relative; }
.pfad-st { position: relative; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 0 0.9rem; padding-bottom: 0.9rem; }
.pfad-st::before { content: ''; position: absolute; left: calc(1.3rem - 1.5px); top: 2.4rem; bottom: -0.1rem; width: 3px; border-radius: 2px; background: var(--fam, var(--rule)); opacity: 0.35; }
.pfad-st:last-child::before { display: none; }
.pfad-knoten { width: 2.6rem; height: 2.6rem; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 0.85rem; font-weight: 600; border: 3px solid var(--fam, var(--rule)); background: var(--canvas); color: var(--ink-soft); position: relative; z-index: 1; }
.pfad-st.st-fertig .pfad-knoten { background: var(--fam); color: #fff; }
.pfad-st.st-teilweise .pfad-knoten { background: linear-gradient(to top, var(--fam) 50%, var(--canvas) 50%); color: var(--ink); }
.pfad-karte { background: var(--bg-card); border: 1px solid var(--rule-soft); border-radius: 12px; padding: 0.85rem 1rem 0.75rem; box-shadow: 0 1px 2px rgba(60,40,20,0.05); }
.pfad-st.st-offen .pfad-karte { background: rgba(255,255,255,0.55); }
.pfad-st-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; }
.pfad-st-titel { font-family: var(--serif); font-weight: 700; font-size: 1.12rem; color: var(--ink); }
.pfad-stand { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); white-space: nowrap; }
.pfad-stand.fertig { color: var(--ok); }
.pfad-stand.teilweise { color: var(--warn); }
.pfad-st-text { margin: 0.2rem 0 0.5rem; font-size: 0.86rem; color: var(--ink-muted); line-height: 1.45; max-width: 70ch; }
.pfad-inhalt { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.pfad-chip { font-size: 0.8rem; padding: 0.15rem 0.55rem; border-radius: 999px; background: var(--sepia-soft); color: var(--sepia-ink); }
.pfad-chip.leer { background: none; border: 1px dashed var(--rule); color: var(--ink-muted); }
.pfad-st-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-top: 0.7rem; padding-top: 0.6rem; border-top: 1px solid var(--rule-soft); }
.pfad-st-fuss .grow { flex: 1 1 auto; }
.pfad-num { font-family: var(--mono); color: var(--ink-faint); margin-right: 0.4em; }
.pfad-paket { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8rem; color: var(--ink-soft); cursor: pointer; }
.pfad-paket input { accent-color: var(--sepia); width: 16px; height: 16px; }
.pfad-paket.aus { color: var(--ink-faint); cursor: default; }
@media (max-width: 640px) {
  .pfad-kopf { padding: 1.1rem; }
  .pfad-kopf-r { justify-content: flex-start; }
  .pfad-opt { justify-content: flex-start; }
  .pfad-st { grid-template-columns: 2rem minmax(0, 1fr); gap: 0 0.6rem; }
  .pfad-knoten { width: 2rem; height: 2rem; font-size: 0.75rem; border-width: 2px; }
  .pfad-st::before { left: calc(1rem - 1.5px); top: 2rem; }
}