/* =========================================================
   Unterseiten — Lehrpersonen, Plan, Material, Noten.
   Baut nur auf den Bauteilen aus core.css auf: Schiene, Klemme,
   Panel, Tabelle. Nichts hier erfindet ein zweites Formenvokabular.
   ========================================================= */

/* ---------- Seitenkopf ----------
   Kein Kicker ueber der Ueberschrift. Die Ueberschrift traegt sich
   selbst; die Einordnung steht rechts als Datenzeile.            */
.phead { padding: 1.75rem 0 1.25rem; border-bottom: 1px solid var(--line); margin-bottom: 1.75rem; }
.phead .top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.25rem; }
.phead h1 { font-size: var(--t-2xl); }
.phead .meta {
  margin-left: auto; font-family: var(--f-data); font-size: var(--t-s);
  color: var(--muted); font-variant-numeric: tabular-nums;
  display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap;
}
.phead .marks { display: flex; flex-wrap: wrap; gap: 0.3rem; align-items: center; margin-top: 0.85rem; }
.phead .lead {
  margin: 0.9rem 0 0; max-width: 68ch;
  font-size: var(--t-m); color: var(--ink-2); line-height: 1.6;
}
@media (max-width: 660px) { .phead .meta { margin-left: 0; width: 100%; } }

/* Hinweis, dass hier die Pruefungen laufen — eine Tatsache, kein Orden. */
.badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.6875rem; font-weight: 600;
  /* Der Rahmen traegt die Fachfarbe, die Schrift den Kontrast:
     ABT-Orange als Text schaffte auf dem Grund nur 4.19:1. */
  color: var(--ink-2);
  border: 1px solid color-mix(in srgb, var(--s-abt) 60%, transparent);
  border-radius: var(--r-s); padding: 0.08rem 0.36rem;
}

/* ---------- Wochenkennzeichnung in Tabellen ---------- */
.wk {
  display: inline-block; font-size: 0.6875rem; font-weight: 500;
  color: var(--muted); border: 1px solid var(--line-2);
  border-radius: var(--r-s); padding: 0.02rem 0.3rem; white-space: nowrap;
}
.tnote {
  padding: 0.75rem 0.95rem; margin: 0; font-size: var(--t-s);
  color: var(--muted); border-top: 1px solid var(--line);
}
.tbl tr.hl td { background: color-mix(in srgb, var(--s-abt) 10%, transparent); }

/* ---------- Themenbloecke ----------
   Keine gleich grossen Karten im Raster: die Bloecke tragen sehr
   unterschiedlich viel Inhalt und stehen deshalb gestapelt, jeder
   mit seinem eigenen Kopf.                                        */
.topics { display: grid; gap: 1rem; }
.topic > .ph { justify-content: flex-start; }
.topic > .ph .t { font-weight: 600; }
.topic > .pb > p { font-size: var(--t-b); color: var(--ink-2); margin: 0 0 0.75rem; }
.topic > .pb > p:last-child { margin-bottom: 0; }
.bul { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.3rem; }
.bul li { font-size: var(--t-s); color: var(--ink-2); }

/* Lernziele — eine echte Abhakliste, keine Aufzaehlung mit Punkt.
   Kein eigener Rahmen: der Block sitzt bereits in einem Panel, und eine
   Karte in der Karte ist immer falsch. Eine Trennlinie reicht. */
.goals {
  margin-top: 1rem; padding: 0.85rem 0 0;
  border-top: 1px solid var(--line);
}
.goals h4 {
  font-size: var(--t-xs); color: var(--muted); margin: 0 0 0.6rem; font-weight: 700;
}
.goals ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.45rem; }
.goals li {
  font-size: var(--t-s); color: var(--ink-2); line-height: 1.5;
  padding-left: 1.5rem; position: relative;
}
.goals li::before {
  content: ""; position: absolute; left: 0.15rem; top: 0.42em;
  width: 0.62rem; height: 0.34rem;
  border-left: 2px solid var(--s-atd); border-bottom: 2px solid var(--s-atd);
  transform: rotate(-45deg);
}

/* Fliesstext braucht ein Mass, sonst laeuft er auf 1120px ueber 170 Zeichen. */
.panel > .pb > p, .openbox > .pb p, .topic > .pb > p { max-width: 68ch; }

/* ---------- Offene Fragen ----------
   Unbekanntes bekommt eine eigene Flaeche, keinen Farbstreifen. */
.openbox { border-color: color-mix(in srgb, var(--warn) 40%, var(--line-2)); }
.openbox > .ph {
  background: color-mix(in srgb, var(--warn) 10%, var(--plate-2));
  border-bottom-color: color-mix(in srgb, var(--warn) 30%, var(--line));
  color: var(--warn-ink);
}
.openbox > .pb p { margin: 0; font-size: var(--t-s); color: var(--ink-2); line-height: 1.6; }
.openbox > .pb p + p { margin-top: 0.6rem; }

/* ---------- Gesetzespyramide ---------- */
.pyr-wrap { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.pyr-svg { padding: 1.35rem 1.15rem 0.85rem; }
.pyr-svg svg { width: 100%; height: auto; display: block; }
.pyr-hint {
  text-align: center; font-size: var(--t-xs); color: var(--muted);
  margin: 0.4rem 0 0; font-family: var(--f-data);
}
.tier path {
  fill: var(--plate-2); stroke: var(--line-2); stroke-width: 1.4;
  cursor: pointer; transition: fill 0.16s var(--ease), stroke 0.16s var(--ease);
}
.tier:hover path { fill: color-mix(in srgb, var(--s-abt) 22%, var(--plate)); }
.tier.on path { fill: var(--s-abt); stroke: var(--s-abt); }
.tier:focus { outline: none; }
.tier:focus-visible path { stroke: var(--ink); stroke-width: 2.4; }
.tier .tl { font-family: var(--f-ui); font-size: 14px; font-weight: 700; fill: var(--ink); text-anchor: middle; pointer-events: none; }
.tier .ts { font-family: var(--f-data); font-size: 10px; fill: var(--muted); text-anchor: middle; pointer-events: none; }
.tier.on .tl, .tier.on .ts { fill: #fff; }
/* Im Dunkelmodus ist die aktive Stufe aufgehellt — weisse Schrift traegt
   darauf nur 2.87:1. Gleiche Umkehr wie am Klemmenfuss: dunkel auf hell. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tier.on .tl,
  :root:not([data-theme="light"]) .tier.on .ts { fill: var(--ground); }
}
:root[data-theme="dark"] .tier.on .tl,
:root[data-theme="dark"] .tier.on .ts { fill: var(--ground); }
.axis { font-family: var(--f-data); font-size: 9.5px; fill: var(--muted); letter-spacing: 0.08em; text-transform: uppercase; }

.pyr-detail { border-left: 1px solid var(--line); background: var(--plate-2); padding: 1.35rem 1.25rem; }
.pyr-card .kind { font-family: var(--f-data); font-size: var(--t-xs); color: var(--muted); }
.pyr-card h3 { font-size: var(--t-l); margin: 0.25rem 0 0.5rem; }
.pyr-card p { font-size: var(--t-s); color: var(--muted); line-height: 1.6; margin: 0; }
.pyr-items { list-style: none; margin: 0.85rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.pyr-items li {
  font-size: var(--t-s); color: var(--ink-2); padding: 0.48rem 0 0.48rem 0.7rem;
  border-left: 1px solid var(--line-2); line-height: 1.45;
}
.pyr-items .data { color: var(--muted); font-size: var(--t-xs); }
.merksatz {
  margin-top: 1rem; padding: 0.7rem 0 0; font-size: var(--t-s);
  color: var(--ink-2); border-top: 1px solid var(--line); line-height: 1.55;
}
.merksatz b { color: var(--ink); }

/* ---------- ABU-Modulrad ----------
   Heisst .arc, nicht .seg: unter .seg lief hier frueher das Donut-Segment
   und in core.css gleichzeitig ein Segmentschalter — zwei Bedeutungen,
   ein Name. Der Schalter heisst heute .langswitch / .wk-toggle.      */
.rad-wrap { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 1.4rem; padding: 1.35rem; align-items: center; }
.rad svg { width: 100%; height: auto; display: block; }
.arc { fill: none; stroke-width: 17; stroke-linecap: butt; transition: stroke-width 0.16s var(--ease); }
.arc.done { stroke: var(--s-abu); }
.arc.cur  { stroke: var(--s-abt); stroke-width: 22; }
.arc.todo { stroke: var(--line-2); }
.arc:hover { stroke-width: 22; }
.arc-l { font-family: var(--f-data); font-size: 8px; text-anchor: middle; font-weight: 600; pointer-events: none; }
/* Die Zahl steht auf dem Segment, also richtet sich ihre Farbe nach dessen
   Fuellung. Auf done/cur traegt Hell (6.8:1 / 4.7:1), auf dem blassen
   todo-Segment traegt nur Dunkel — hell waeren es 1.66:1. */
.arc-l.done, .arc-l.cur { fill: var(--plate); }
.arc-l.todo { fill: var(--ink-2); }
.rad-c1 { font-family: var(--f-ui); font-size: 28px; font-weight: 700; fill: var(--ink); text-anchor: middle; letter-spacing: -0.03em; }
.rad-c2 { font-family: var(--f-data); font-size: 9px; fill: var(--muted); text-anchor: middle; letter-spacing: 0.08em; text-transform: uppercase; }

.rad-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.rad-legend li {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: var(--t-s); padding: 0.3rem 0.5rem; border-radius: var(--r-s);
}
.rad-legend .k { font-family: var(--f-data); font-size: var(--t-xs); color: var(--muted); min-width: 2.5rem; font-weight: 600; }
.rad-legend .cur .k { color: var(--ink-2); }
.rad-legend .v { color: var(--ink-2); }
/* Keine Deckkraft: sie senkt den Kontrast unvorhersehbar mit. */
.rad-legend .done .v, .rad-legend .done .k { color: var(--muted); }
.rad-legend .done .tick { color: var(--s-abu); margin-left: auto; display: inline-flex; }
.rad-legend .tick svg { width: 12px; height: 12px; display: block; }
.rad-legend .cur { background: color-mix(in srgb, var(--s-abt) 13%, transparent); }
.rad-legend .cur .v { color: var(--ink); font-weight: 600; }
.rad-legend .badge2 {
  margin-left: auto; font-family: var(--f-data); font-size: 0.6875rem;
  color: var(--ink-2); border: 1px solid color-mix(in srgb, var(--s-abt) 55%, transparent);
  border-radius: var(--r-s); padding: 0.02rem 0.3rem;
}
.rad-legend .todo .v { color: var(--muted); }

@media (max-width: 860px) {
  .pyr-wrap { grid-template-columns: 1fr; }
  .pyr-detail { border-left: 0; border-top: 1px solid var(--line); }
  .rad-wrap { grid-template-columns: 1fr; }
  .rad { max-width: 240px; margin: 0 auto; }
}

/* ---------- Freie Tage im Plan ---------- */
.free {
  padding: 0.75rem 0.95rem; font-size: var(--t-s); color: var(--muted);
  background: var(--plate); border: 1px solid var(--line-2); border-radius: var(--r);
}
.free b { color: var(--ink-2); font-weight: 600; }

/* ---------- Wochengruppe im Plan ---------- */
.wkgroup { margin-bottom: 1.6rem; }
.wkhead { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.7rem; }
.wkhead h3 { font-size: var(--t-b); }
.wkhead .kwtag {
  font-family: var(--f-data); font-size: var(--t-xs); color: var(--muted);
  border: 1px solid var(--line-2); padding: 0.05rem 0.4rem; border-radius: var(--r-s); white-space: nowrap;
}
.wkhead .rule { flex: 1; border-top: 1px dashed var(--line-2); }

/* ---------- Einfacher senkrechter Stapel ---------- */
.stack { display: grid; gap: 0.5rem; }

/* ---------- PIN-Sperre ----------
   Der einzige Ort, an dem ein Modal richtig ist: die Sperre braucht
   geschuetzten Fokus, sonst ist sie keine. Die Unschaerfe dahinter ist
   der Zweck, nicht Zierde — sie verdeckt die Noten.
   Was sie leistet und was nicht, steht in assets/pin.js.            */
/* Verbergen, nicht weichzeichnen.
   Ein Blur ist hier die falsche Mechanik: schlaegt er fehl — und im
   Test loeste filter:blur(9px) auf genau diesem Element zu blur(0px)
   auf —, stehen die Noten vollstaendig offen. visibility:hidden kann
   nicht halb misslingen. Nebenbei passt es besser: diese Welt hat
   keine Glasflaechen.                                                */
body.locked > main,
body.locked > .foot,
body.locked > .topbar { visibility: hidden; pointer-events: none; user-select: none; }

.pinwrap {
  position: fixed; inset: 0; z-index: 999;
  display: grid; place-items: center; padding: 1.5rem;
  background: color-mix(in srgb, var(--ground) 78%, transparent);
  animation: pinIn 0.18s var(--ease);
}
.pinwrap.gone { opacity: 0; transition: opacity 0.18s; }
@keyframes pinIn { from { opacity: 0 } to { opacity: 1 } }

.pinbox {
  background: var(--plate); border: 1px solid var(--line-2); border-radius: var(--r);
  padding: 1.75rem 1.75rem 1.5rem; text-align: center;
  max-width: 330px; width: 100%;
}
.pinbox.shake { animation: pinShake 0.4s; }
@keyframes pinShake {
  0%, 100% { transform: translateX(0) }
  20% { transform: translateX(-7px) } 40% { transform: translateX(7px) }
  60% { transform: translateX(-4px) } 80% { transform: translateX(4px) }
}

.pin-ico {
  width: 42px; height: 42px; margin: 0 auto 0.85rem; border-radius: var(--r);
  display: grid; place-items: center; color: #fff; background: var(--s-abt);
}
:root[data-theme="dark"] .pin-ico { color: var(--ground); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pin-ico { color: var(--ground); }
}
.pin-ico svg { width: 21px; height: 21px; }

.pinbox h2 { font-size: var(--t-l); margin-bottom: 0.4rem; }
.pinbox p { font-size: var(--t-s); color: var(--muted); margin-bottom: 1.1rem; line-height: 1.5; }

.pin-dots { display: flex; gap: 0.7rem; justify-content: center; margin-bottom: 1rem; }
.pin-dots i {
  width: 12px; height: 12px; border-radius: 999px; display: block;
  border: 1.5px solid var(--line-2); background: transparent;
  transition: background 0.14s var(--ease), border-color 0.14s var(--ease);
}
.pin-dots i.on { background: var(--s-abt); border-color: var(--s-abt); }

#pinInput { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pin-err { color: var(--alert); font-size: var(--t-s); min-height: 1.2em; margin: 0 0 0.5rem; }

/* Kleiner Textknopf — Sperren, PIN aendern, "ohne PIN weiter" */
.tinybtn {
  border: 1px solid var(--line-2); background: transparent; cursor: pointer;
  border-radius: var(--r-s); padding: 0.34rem 0.7rem;
  font-size: var(--t-xs); font-weight: 500; color: var(--muted);
  transition: color 0.14s var(--ease), border-color 0.14s var(--ease), background 0.14s var(--ease);
}
.tinybtn:hover { color: var(--ink); border-color: var(--rail); background: var(--plate-2); }
.tinybtn:active { background: var(--line); }
.pinlock { margin-left: auto; }

@media (pointer: coarse) { .tinybtn { padding: 0.5rem 0.9rem; font-size: var(--t-s); } }
@media (prefers-reduced-motion: reduce) {
  .pinwrap, .pinbox.shake { animation: none; }
  .pin-dots i { transition: none; }
}