/* site.css — Lehrplan-Apps: Startseite, Übungs-Apps-Liste, Lehrplan-21-Seite. Tokens aus
   DESIGN.md, Akzentfamilie amber (Familien-Akzent). */

@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('fonts/atkinson-hyperlegible-400.woff2?v=4') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url('fonts/atkinson-hyperlegible-700.woff2?v=4') format('woff2');
  font-weight: 700;
  font-display: swap;
}

:root {
  --color-background-app: #0E141D;
  --color-background-surface: #162232;
  --color-background-surface-raised: #1B2A3C;
  --color-background-surface-soft: #13202E;
  --color-border-subtle: #263648;
  --color-border-strong: #3A4B5F;
  --color-border-focus: #F4E7B1;
  --color-text-primary: #F5F7FA;
  --color-text-secondary: #C5D0DD;
  --color-text-muted: #8FA1B4;
  --color-accent: #D8C47A;
  --color-accent-soft: #D8C47A26;
  --color-accent-muted: #A99858;

  --font-body: 'Atkinson Hyperlegible', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.375rem;
  --font-size-xxl: 1.75rem;
  --line-height-title: 1.15;
  --line-height-body: 1.55;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;

  --radius-md: 0.75rem;
  --radius-lg: 1rem;

  --target-child: 3rem;
  --max-width-narrow: 42rem;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100svh;
  background: var(--color-background-app);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  line-height: var(--line-height-body);
}

#app {
  max-width: var(--max-width-narrow);
  margin: 0 auto;
  padding: var(--space-4);
}

@media (min-width: 40rem) { #app { padding: var(--space-6); } }

/* ── Pfad (Breadcrumb): Lehrplan-Apps › Bereich ─────────────────── */

.crumbs {
  margin-bottom: var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}
.crumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-1);
}
.crumbs li { display: inline-flex; align-items: center; gap: var(--space-1); }
.crumbs a,
.crumbs [aria-current="page"] {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  color: var(--color-text-secondary);
  text-decoration: none;
}
.crumbs a:hover { color: var(--color-text-primary); text-decoration: underline; text-underline-offset: 3px; }
.crumbs a:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }
.crumbs [aria-current="page"] { font-weight: 700; }
.crumb-sep { width: 1rem; height: 1rem; flex: none; color: var(--color-text-muted); }

/* ── Kopf ────────────────────────────────────────────────────── */

.app-header { margin-bottom: var(--space-8); }

.app-title {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-xxl);
  line-height: var(--line-height-title);
  letter-spacing: -0.015em;
}

.title-icon { width: 1.75rem; height: 1.75rem; flex: none; color: var(--color-accent); }

.tagline { margin: 0; color: var(--color-text-secondary); max-width: 65ch; }

.section-label {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
}

.gruppe { margin-bottom: var(--space-8); }

/* ── Listenzeilen: Bereiche auf der Startseite, Apps in der Liste ── */

.entry-list,
.row-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2);
}

.entry-list { gap: var(--space-3); }

.row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--target-child);
  padding: var(--space-3) var(--space-4);
  background: var(--color-background-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  color: inherit;
  text-decoration: none;
}

.row:hover { background: var(--color-background-surface-raised); }
.row:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }

.row-icon { width: 1.5rem; height: 1.5rem; flex: none; color: var(--color-accent); }

.row-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.row-name { font-weight: 700; overflow-wrap: anywhere; }
.row-desc { color: var(--color-text-secondary); font-size: var(--font-size-sm); overflow-wrap: anywhere; }
.row-meta { color: var(--color-text-muted); font-size: var(--font-size-xs); }
.row-list .row-meta { font-family: var(--font-mono); }

.chevron { width: 1.25rem; height: 1.25rem; flex: none; color: var(--color-text-muted); }

/* Die fünf Bereiche der Startseite sind grösser und tragen den Weg:
   verstehen, einschätzen, nachschlagen, üben, nachfragen. */
.entry {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
}
.entry .row-icon { width: 1.75rem; height: 1.75rem; }
.entry .row-name { font-size: var(--font-size-lg); }
.entry .row-desc { font-size: var(--font-size-md); }
.entry .row-meta { font-size: var(--font-size-sm); }

/* ── Fusszeile ───────────────────────────────────────────────── */

.app-footer {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-subtle);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}
.app-footer p { margin: 0 0 var(--space-2); }
.quiet-link { color: var(--color-text-secondary); text-underline-offset: 3px; }
.quiet-link:hover { color: var(--color-text-primary); }
.quiet-link:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }

/* ── Textseite: Der Lehrplan 21 (lehrplan21/) ──────────────────────
   Lange Leseseite mit Abschnitten, zwei Schemata und Glossar. Zeilen
   bleiben bei rund 68 Zeichen, Bilder sind Inline-SVG im
   illustration-Stil aus DESIGN.md. */

.toc { margin-bottom: var(--space-6); }
.toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.toc a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-background-surface);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  text-decoration: none;
}
.toc a:hover { background: var(--color-background-surface-raised); color: var(--color-text-primary); }
.toc a:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }

.text-page section { margin-bottom: var(--space-8); }
.text-page section:last-child { margin-bottom: 0; }
.text-page h2 {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-xl);
  line-height: var(--line-height-title);
  letter-spacing: -0.015em;
  scroll-margin-top: var(--space-4);
}
.text-page section { scroll-margin-top: var(--space-4); }
.text-page p,
.text-page li,
.text-page dd { color: var(--color-text-secondary); }
.text-page p,
.text-page ul { margin: 0 0 var(--space-3); max-width: 68ch; }
.text-page strong { color: var(--color-text-primary); }
.text-page ul { padding-left: 1.25rem; display: grid; gap: var(--space-2); }
.text-page li::marker { color: var(--color-accent); }
.milestones { margin: 0 0 var(--space-4); padding-left: 1.75rem; display: grid; gap: var(--space-2); max-width: 68ch; }
.milestones li { color: var(--color-text-secondary); }
.milestones li::marker { color: var(--color-accent); font-weight: 700; }
/* Unterlagen: Listenzeilen wie in der App-Liste, mit Dokument-Symbol. */
.text-page .doc-list { margin: 0 0 var(--space-4); padding: 0; max-width: none; }
.doc-list .row { min-width: 0; }
.doc-list .row-desc { max-width: 60ch; }
.text-page a.quiet-link { color: var(--color-text-primary); }
.code {
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  background: var(--color-background-surface-soft);
  border-radius: 0.5rem;
  padding: 0 var(--space-1);
}

.figure {
  margin: var(--space-4) 0 0;
  padding: var(--space-4);
  background: var(--color-background-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
}
.figure svg { display: block; width: min(460px, 100%); height: auto; margin: 0 auto; }
.figure figcaption {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  max-width: 68ch;
}
/* Tabelle: Berichte und Noten pro Schuljahr. Breite Inhalte rollen im
   eigenen Rahmen, nie die Seite. */
.table-wrap { margin: var(--space-4) 0; overflow-x: auto; }
.years { width: 100%; border-collapse: collapse; font-size: var(--font-size-sm); }
.years caption { text-align: left; padding-bottom: var(--space-2); color: var(--color-text-muted); font-size: var(--font-size-sm); }
.years th, .years td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border-subtle); text-align: left; vertical-align: top; }
.years thead th { color: var(--color-text-muted); font-weight: 700; letter-spacing: 0.02em; }
.years tbody th { white-space: nowrap; font-weight: 700; color: var(--color-text-primary); }
.years td { color: var(--color-text-secondary); }
.years td:last-child { white-space: nowrap; }

/* Schema-Klassen: Zeitleiste der Zyklen und Stufenleiter einer Kompetenz. */
.lp-h { fill: var(--color-accent); font-size: 0.85rem; font-weight: 700; }
.lp-label { fill: var(--color-text-primary); font-size: 0.85rem; font-weight: 700; }
.lp-word { fill: var(--color-text-muted); font-size: 0.62rem; }
.lp-band { fill: none; stroke: var(--color-border-strong); stroke-width: 1.5; }
.lp-box { fill: var(--color-background-surface-raised); stroke: var(--color-border-subtle); stroke-width: 1; }
.lp-box-ga { fill: var(--color-accent-soft); stroke: var(--color-accent-muted); }
.lp-text { fill: var(--color-border-strong); }
.lp-ga { fill: var(--color-accent); }
.lp-op { stroke: var(--color-accent); stroke-width: 2; stroke-dasharray: 3 4; stroke-linecap: round; }
.lp-arrow { stroke: var(--color-text-secondary); stroke-width: 1.5; stroke-linecap: round; fill: none; }
.lp-arrowhead { fill: var(--color-text-secondary); }
.lp-panel { fill: var(--color-background-surface-soft); stroke: var(--color-border-subtle); stroke-width: 1; }

.glossar,
.pairs {
  margin: 0;
  display: grid;
  gap: var(--space-2);
}
.glossar div,
.pairs div {
  padding: var(--space-3) var(--space-4);
  background: var(--color-background-surface);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}
.glossar dt,
.pairs dt { font-weight: 700; }
.glossar dd,
.pairs dd { margin: var(--space-1) 0 0; font-size: var(--font-size-sm); max-width: 68ch; }

/* Keine Bewegung auf der Startseite, in der Liste und auf der Textseite:
   Zustände wechseln sofort, darum braucht es hier auch keine Regel für
   reduzierte Bewegung. */