/* ============================================================
   site.css — Oberstufe Gymnasium am Wall
   Baut auf tokens.css auf. Klassenbasiert, mobile first.
   Getestet ab 375 px Breite. Breakpoints: 40rem / 64rem.
   ============================================================ */

/* --- Korrekturen an den Tokens ------------------------------
   tokens.css bleibt unveraendert. Zwei Werte werden hier
   ueberschrieben, weil sie den Kontrast nach WCAG AA verfehlen:
   --text-muted #8A8378 auf --bg ergibt 3,6:1 (noetig: 4,5:1).
   Die abgedunkelten Werte erreichen 5,3:1.
------------------------------------------------------------ */
:root {
  --text-muted: #6E675C;
  --lock:       #6E675C;

  /* Akzentton fuer Text auf --accent-tint / --info-bg. --accent-deep
     erreicht dort nur 4,3:1; dieser Wert erreicht 5,1:1. */
  --accent-auf-tint: #A64A0A;

  /* Werte, fuer die tokens.css keinen Token vorsieht */
  --hairline:      1px;
  --header-glas:   rgba(251, 249, 246, .88);
  --fokus:         var(--accent-deep);
  --scroll-schatten: rgba(33, 28, 22, .13);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  overflow-wrap: break-word;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--ink);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 var(--sp-4); }
a { color: var(--accent-deep); }
a:hover { color: var(--ink); }

img { max-width: 100%; height: auto; }

/* Fokusring: :focus als Grundlage, damit auch aeltere Browser ihn zeigen;
   :focus-visible blendet ihn bei reiner Mausbedienung wieder aus. */
:focus {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
:focus:not(:focus-visible) { outline: none; }
:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

.nur-vorlesen {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

.skiplink {
  position: absolute;
  left: var(--sp-4); top: calc(-1 * var(--sp-9));
  z-index: 90;
  background: var(--ink);
  color: var(--surface);
  font-family: var(--font-display);
  font-size: var(--fs-small);
  padding: var(--sp-3) var(--sp-5);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  text-decoration: none;
  transition: top var(--t-base);
}
.skiplink:focus {
  top: 0;
  color: var(--surface);
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

/* Ohne JavaScript bleiben die Steuerelemente der interaktiven
   Komponenten verborgen (Attribut hidden); die Inhalte stehen dann
   vollstaendig untereinander. site.js entfernt das Attribut. */

/* ============================================================
   Header
   ============================================================ */
.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--header-glas);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: var(--hairline) solid var(--line);
}
.header__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--sp-3) var(--gutter);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.marke {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  margin-right: auto;
  min-width: 0;
}
.marke__logo { height: 28px; width: auto; display: block; }
.marke__wort {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent-deep);
  padding-left: var(--sp-3);
  border-left: var(--hairline) solid var(--line-strong);
  white-space: nowrap;
}

/* --- Burger (mobil, ohne JavaScript lauffaehig) --------------- */
.burger { position: relative; }
.burger__knopf {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-small);
  color: var(--ink);
  background: var(--surface);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: var(--sp-2) var(--sp-4);
}
.burger__knopf::-webkit-details-marker { display: none; }
.burger__striche {
  position: relative;
  width: 16px; height: 2px;
  background: var(--ink);
  border-radius: var(--r-pill);
}
.burger__striche::before, .burger__striche::after {
  content: ""; position: absolute; left: 0;
  width: 16px; height: 2px;
  background: var(--ink);
  border-radius: var(--r-pill);
}
.burger__striche::before { top: -5px; }
.burger__striche::after  { top: 5px; }
.burger[open] .burger__striche { background: transparent; }
.burger[open] .burger__striche::before { top: 0; transform: rotate(45deg); }
.burger[open] .burger__striche::after  { top: 0; transform: rotate(-45deg); }

.nav--mobile {
  position: absolute;
  right: 0;
  top: calc(100% + var(--sp-3));
  width: min(21rem, calc(100vw - 2 * var(--gutter)));
  max-height: 72vh;
  overflow-y: auto;
  background: var(--surface);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lift);
  padding: var(--sp-4);
}
.nav--mobile__liste, .nav--mobile ul { list-style: none; margin: 0; padding: 0; }
.nav--mobile__gruppe + .nav--mobile__gruppe { margin-top: var(--sp-4); }
.nav--mobile__gruppentitel {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 var(--sp-2);
}
.nav--mobile__link {
  display: block;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  color: var(--text);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: var(--fs-small);
}
.nav--mobile__link:hover { background: var(--surface-tint); color: var(--ink); }
.nav--mobile__link[aria-current="page"] {
  background: var(--accent-tint);
  color: var(--accent-auf-tint);
  font-weight: 700;
}

/* --- Desktop-Navigation -------------------------------------- */
.nav { display: none; }

@media (min-width: 64rem) {
  .burger { display: none; }
  .nav { display: block; }
  .marke__logo { height: 36px; }

  .nav__liste {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    list-style: none;
    margin: 0; padding: 0;
  }
  .nav__dropdown { position: relative; }
  .nav__summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-family: var(--font-display);
    font-size: var(--fs-small);
    font-weight: 600;
    color: var(--text);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-pill);
    white-space: nowrap;
  }
  .nav__summary::-webkit-details-marker { display: none; }
  .nav__summary:hover { background: var(--surface-tint); color: var(--ink); }
  .nav__summary--aktiv { color: var(--accent-deep); }
  .nav__chevron {
    width: 7px; height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform var(--t-fast);
  }
  .nav__dropdown[open] .nav__chevron { transform: translateY(1px) rotate(-135deg); }
  .nav__panel {
    position: absolute;
    top: calc(100% + var(--sp-2));
    left: 0;
    min-width: 19rem;
    background: var(--surface);
    border: var(--hairline) solid var(--line-strong);
    border-radius: var(--r-md);
    box-shadow: var(--sh-lift);
    padding: var(--sp-2);
    z-index: 70;
  }
  /* Die beiden rechten Menues klappen nach rechts auf, sonst
     ragen sie ueber den Bildschirmrand hinaus. */
  .nav__punkt:nth-last-child(-n+2) .nav__panel { left: auto; right: 0; }
  .nav__panel ul { list-style: none; margin: 0; padding: 0; }
  .nav__link {
    display: block;
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--r-sm);
    color: var(--text);
    text-decoration: none;
    font-family: var(--font-display);
    font-size: var(--fs-small);
  }
  .nav__link:hover { background: var(--surface-tint); color: var(--ink); }
  .nav__link[aria-current="page"] {
    background: var(--accent-tint);
    color: var(--accent-auf-tint);
    font-weight: 700;
  }
}

/* ============================================================
   Aufbau-Banner
   ============================================================ */
.banner--aufbau {
  background: var(--warn-bg);
  border-bottom: var(--hairline) solid var(--warn);
}
.banner__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--sp-3) var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-3);
  font-size: var(--fs-small);
  color: var(--text-soft);
}
.banner__marke {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink);
  background: var(--warn);
  border-radius: var(--r-pill);
  padding: 2px var(--sp-3);
  white-space: nowrap;
}

/* ============================================================
   Hero
   ============================================================ */
.hero {
  background:
    radial-gradient(60rem 22rem at 12% -20%, var(--accent-tint), transparent 60%),
    var(--bg);
  border-bottom: var(--hairline) solid var(--line);
}
.hero__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--sp-7) var(--gutter) var(--sp-6);
}
.hero--kompakt .hero__inner { padding: var(--sp-5) var(--gutter) var(--sp-5); }

.hero__titel {
  font-size: var(--fs-h1);
  font-weight: 800;
  max-width: 20ch;
}
.hero--kompakt .hero__titel { font-size: var(--fs-h2); max-width: 24ch; }

.hero__lead {
  margin: var(--sp-4) 0 0;
  font-size: var(--fs-lead);
  color: var(--text-soft);
  max-width: var(--container-text);
}

.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-deep);
  margin: 0 0 var(--sp-2);
}

/* --- Breadcrumb ---------------------------------------------- */
.breadcrumb { margin: 0 0 var(--sp-4); }
.breadcrumb ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-label);
  letter-spacing: .01em;
  color: var(--text-muted);
}
.breadcrumb li + li::before {
  content: "\203A";
  margin-right: var(--sp-2);
  color: var(--line-strong);
}
.breadcrumb a {
  color: var(--text-muted);
  text-decoration: none;
  /* WCAG 2.5.8 verlangt 24x24 px Zielflaeche. Der Text ist kleiner, also
     wird die Flaeche mit Innenabstand erreicht - ohne dass sich am Bild
     etwas aendert, weil der Ausgleich am Rand wieder abgezogen wird. */
  display: inline-block;
  padding: 5px 4px;
  margin: -5px -4px;
}
.breadcrumb a:hover { color: var(--accent-deep); text-decoration: underline; }

/* ============================================================
   Seitenraster
   ============================================================ */
.seite {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--sp-6) var(--gutter) var(--sp-8);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-7);
}
@media (min-width: 64rem) {
  .seite {
    grid-template-columns: minmax(0, 1fr) 17rem;
    gap: var(--sp-8);
    align-items: start;
  }
}

@media (min-width: 64rem) {
  .seite--breit { grid-template-columns: minmax(0, 1fr); }
}

.prosa { max-width: var(--container-text); min-width: 0; }

/* Seiten ohne Untermenue duerfen die volle Breite nutzen; der
   Fliesstext bleibt trotzdem auf Lesebreite begrenzt. */
.prosa--breit { max-width: none; }
.prosa--breit > p,
.prosa--breit > h2,
.prosa--breit > h3,
.prosa--breit > ul:not(.kacheln):not(.linkliste),
.prosa--breit > ol,
.prosa--breit > blockquote,
.prosa--breit > .kasten,
.prosa--breit > .akkordeon,
.prosa--breit > .inhaltsverzeichnis { max-width: var(--container-text); }
@media (min-width: 64rem) {
  .prosa--breit .kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .prosa--breit .download-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prosa--breit .termine { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.prosa > h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  margin: var(--sp-7) 0 var(--sp-4);
  padding-top: var(--sp-2);
  scroll-margin-top: var(--sp-9);
}
.prosa > h2:first-child { margin-top: 0; }
.prosa h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  margin: var(--sp-6) 0 var(--sp-3);
  scroll-margin-top: var(--sp-9);
}
.prosa h4 { font-size: var(--fs-body); font-weight: 700; margin: var(--sp-5) 0 var(--sp-2); }
.prosa ul, .prosa ol { margin: 0 0 var(--sp-5); padding-left: var(--sp-5); }
.prosa li { margin-bottom: var(--sp-2); }
.prosa li::marker { color: var(--accent-deep); }
.prosa strong { font-weight: 600; color: var(--ink); }
.prosa blockquote {
  margin: 0 0 var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-style: italic;
  color: var(--text-soft);
}
.prosa blockquote p:last-child { margin-bottom: 0; }
.prosa hr { border: 0; border-top: var(--hairline) solid var(--line); margin: var(--sp-6) 0; }
.prosa code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: .92em;
  background: var(--surface-tint);
  border-radius: var(--r-xs);
  padding: .1em .35em;
}
.prosa > p:last-child, .prosa > ul:last-child { margin-bottom: 0; }

.link-extern::after {
  content: "\2197";
  font-size: .8em;
  margin-left: .2em;
  vertical-align: baseline;
  color: var(--text-muted);
}
.mailto { word-break: break-word; }

.quelle { font-size: var(--fs-small); color: var(--text-muted); }
.seitenstand {
  margin: var(--sp-7) 0 0;
  padding-top: var(--sp-4);
  border-top: var(--hairline) solid var(--line);
  font-family: var(--font-display);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* --- offene Angaben und Redaktionsmarker --------------------- */
.offen {
  color: var(--text-muted);
  font-style: italic;
  border-bottom: 1px dotted var(--line-strong);
  cursor: help;
}
mark.todo {
  display: inline;
  background: var(--warn-bg);
  box-shadow: 0 0 0 2px var(--warn-bg);
  border-bottom: 2px solid var(--warn);
  color: var(--text-soft);
  font-size: var(--fs-small);
  font-family: var(--font-display);
}
.todo__label {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-deep);
  margin-right: var(--sp-1);
}
.fehler-inline {
  background: var(--warn-bg);
  border-bottom: 2px solid var(--warn);
  font-family: var(--font-display);
  font-size: var(--fs-small);
}
.fehlerkasten {
  display: grid;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  background: var(--warn-bg);
  border: 2px solid var(--warn);
  border-radius: var(--r-md);
  font-family: var(--font-display);
  font-size: var(--fs-small);
}
.fehlerkasten code { background: var(--surface); }

/* ============================================================
   Inhaltsverzeichnis
   ============================================================ */
.inhaltsverzeichnis {
  margin: 0 0 var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface);
  border: var(--hairline) solid var(--line);
  border-radius: var(--r-md);
}
.inhaltsverzeichnis__titel {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-muted);
  margin: 0 0 var(--sp-3);
}
.inhaltsverzeichnis ol {
  list-style: none;
  margin: 0; padding: 0;
  counter-reset: iv;
  display: grid;
  gap: var(--sp-2);
}
.inhaltsverzeichnis li { counter-increment: iv; margin: 0; }
.inhaltsverzeichnis a {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  text-decoration: none;
  color: var(--text);
  /* Wie bei den Brotkrumen: 24 px hohe Zielflaeche fuer den Daumen. */
  display: inline-block;
  padding: 4px 4px;
  margin: -4px -4px;
}
.inhaltsverzeichnis a::before {
  content: counter(iv) ".";
  color: var(--accent-deep);
  font-weight: 700;
  margin-right: var(--sp-2);
}
.inhaltsverzeichnis a:hover { color: var(--accent-deep); text-decoration: underline; }

/* ============================================================
   Seitenmenu (Untermenue der aktuellen Gruppe)
   ============================================================ */
.seitenmenu {
  padding: var(--sp-5);
  background: var(--surface);
  border: var(--hairline) solid var(--line);
  border-radius: var(--r-lg);
}
@media (min-width: 64rem) {
  .seitenmenu { position: sticky; top: var(--sp-8); }
}
.seitenmenu__titel {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-deep);
  margin: 0 0 var(--sp-3);
  padding-bottom: var(--sp-3);
  border-bottom: var(--hairline) solid var(--line);
}
.seitenmenu ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-1); }
.seitenmenu a {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-small);
  text-decoration: none;
  color: var(--text);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
}
.seitenmenu a:hover { background: var(--surface-tint); color: var(--ink); }
.seitenmenu__aktiv {
  background: var(--accent-tint);
  color: var(--accent-auf-tint) !important;
  font-weight: 700;
}

/* ============================================================
   Kaesten
   ============================================================ */
.kasten {
  display: flex;
  gap: var(--sp-4);
  margin: 0 0 var(--sp-5);
  padding: var(--sp-5);
  border-radius: var(--r-md);
}
.kasten__icon { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 2px; }
.kasten__text { min-width: 0; }
.kasten__text > :last-child { margin-bottom: 0; }
.kasten__text ul, .kasten__text ol { margin-bottom: var(--sp-3); padding-left: var(--sp-5); }

/* Auf --accent-tint / --info-bg reicht --accent-deep nicht fuer AA. */
.kasten--hinweis a:not(.btn),
.abitur-termine a:not(.btn),
.linkliste-za__hinweis a:not(.btn),
.card--kachel__link:hover .card--kachel__titel { color: var(--accent-auf-tint); }

.kasten--hinweis {
  background: var(--info-bg);
  border-left: 4px solid var(--accent);
  color: var(--text-soft);
}
.kasten--hinweis .kasten__icon { color: var(--accent-deep); }

.kasten--achtung {
  background: var(--warn-bg);
  border: 2px solid var(--warn);
  color: var(--text-soft);
}
.kasten--achtung .kasten__icon { color: var(--accent-deep); }

/* ============================================================
   Akkordeon (FAQ)
   ============================================================ */
.akkordeon {
  margin: 0 0 var(--sp-5);
  border: var(--hairline) solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  overflow: hidden;
}
.akkordeon__punkt + .akkordeon__punkt { border-top: var(--hairline) solid var(--line); }
.akkordeon__punkt > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
}
.akkordeon__punkt > summary::-webkit-details-marker { display: none; }
.akkordeon__punkt > summary:hover { background: var(--surface-tint); }
.akkordeon__zeichen {
  flex: 0 0 auto;
  position: relative;
  width: 14px; height: 14px;
  margin-top: 5px;
}
.akkordeon__zeichen::before, .akkordeon__zeichen::after {
  content: ""; position: absolute; background: var(--accent-deep); border-radius: var(--r-pill);
}
.akkordeon__zeichen::before { left: 0; top: 6px; width: 14px; height: 2px; }
.akkordeon__zeichen::after  { left: 6px; top: 0; width: 2px; height: 14px; transition: transform var(--t-fast); }
.akkordeon__punkt[open] .akkordeon__zeichen::after { transform: scaleY(0); }
.akkordeon__inhalt { padding: 0 var(--sp-5) var(--sp-4); }
.akkordeon__inhalt > :last-child { margin-bottom: 0; }

/* ============================================================
   Karten und Kacheln
   ============================================================ */
.card {
  background: var(--surface);
  border: var(--hairline) solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-card);
}

.kacheln {
  list-style: none;
  margin: 0 0 var(--sp-6);
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
@media (min-width: 40rem) { .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.card--kachel { padding: 0; overflow: hidden; }
.card--kachel__link {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-5);
  text-decoration: none;
  color: var(--text-soft);
  height: 100%;
  transition: background var(--t-base), transform var(--t-base);
}
.card--kachel__link:hover { background: var(--accent-tint); color: var(--text); transform: translateY(-2px); }
.card--kachel__titel {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  color: var(--ink);
  letter-spacing: var(--ls-tight);
}
.card--kachel__text { font-size: var(--fs-small); }
.card--kachel__pfeil {
  width: 9px; height: 9px;
  border-right: 2px solid var(--accent-deep);
  border-top: 2px solid var(--accent-deep);
  transform: rotate(45deg);
  margin-top: var(--sp-1);
}

/* --- Download-Karten ----------------------------------------- */
.download-liste { display: grid; gap: var(--sp-4); margin: 0 0 var(--sp-6); }

.card--download {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-5);
  margin: 0 0 var(--sp-5);
  text-decoration: none;
  color: var(--text-soft);
}
.download-liste .card--download { margin: 0; }
a.card--download:hover { border-color: var(--accent); }
.karte__icon, .karte__schloss { flex: 0 0 auto; width: 24px; height: 24px; color: var(--accent-deep); }
.karte__schloss { color: var(--lock); }
.karte__koerper { flex: 1 1 14rem; min-width: 0; }
.karte__titel {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--sp-1);
}
.karte__text { font-size: var(--fs-small); margin-bottom: var(--sp-2); }
.karte__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
}
.karte__jahrgang {
  background: var(--accent-tint);
  color: var(--accent-auf-tint);
  border-radius: var(--r-xs);
  padding: 1px var(--sp-2);
  font-weight: 700;
}
.karte__typ {
  background: var(--surface-tint);
  border-radius: var(--r-xs);
  padding: 1px var(--sp-2);
  font-weight: 700;
  color: var(--text-soft);
}
.karte__hinweis {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.karte__aktion { flex: 0 0 auto; align-self: center; }
.karte__aktion--folgt {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-muted);
  border: var(--hairline) dashed var(--line-strong);
  border-radius: var(--r-pill);
  padding: var(--sp-2) var(--sp-4);
}
.card--geschuetzt { background: var(--surface); border-style: dashed; }
.card--folgt { box-shadow: none; background: transparent; border-style: dashed; }

/* ============================================================
   Buttons und Chips
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  border-radius: var(--r-pill);
  padding: var(--sp-3) var(--sp-5);
  border: var(--hairline) solid transparent;
  cursor: pointer;
  transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
}
.btn--primary {
  background: var(--accent-deep);
  color: var(--surface);
  box-shadow: var(--sh-btn);
}
.btn--primary:hover { background: var(--ink); color: var(--surface); }
.btn--ghost {
  background: var(--surface);
  color: var(--accent-deep);
  border-color: var(--line-strong);
}
.btn--ghost:hover { background: var(--accent-tint); color: var(--accent-deep); border-color: var(--accent); }

.chip {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-auf-tint);
  background: var(--accent-tint);
  border-radius: var(--r-pill);
  padding: 2px var(--sp-3);
  white-space: nowrap;
}

/* ============================================================
   Tabellen
   ============================================================ */
.tabelle-wrap {
  overflow-x: auto;
  /* Der Rahmen darf nie breiter werden als sein Platz - sonst schiebt die
     Mindestbreite der Tabelle die ganze Seite nach rechts, statt nur
     innerhalb des Rahmens zu scrollen. */
  min-width: 0;
  max-width: 100%;
  margin: 0 0 var(--sp-5);
  border-radius: var(--r-md);
  border: var(--hairline) solid var(--line);
  background:
    linear-gradient(to right, var(--surface) 30%, transparent),
    linear-gradient(to left,  var(--surface) 30%, transparent) 100% 0,
    radial-gradient(farthest-side at 0 50%, var(--scroll-schatten), transparent),
    radial-gradient(farthest-side at 100% 50%, var(--scroll-schatten), transparent) 100% 0;
  background-repeat: no-repeat;
  background-size: 44px 100%, 44px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
  background-color: var(--surface);
}
.tabelle {
  border-collapse: collapse;
  width: 100%;
  min-width: 30rem;
  font-size: var(--fs-small);
  background: transparent;
}
.tabelle th, .tabelle td {
  text-align: left;
  vertical-align: top;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: var(--hairline) solid var(--line);
}
.tabelle thead th {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg);
  border-bottom: 2px solid var(--line-strong);
  white-space: nowrap;
}
.tabelle tbody th { font-family: var(--font-display); font-weight: 600; color: var(--ink); }
/* Raster ohne Kopfzeile: erste Spalte trotzdem hervorheben */
.tabelle--raster tbody td:first-child { font-family: var(--font-display); color: var(--ink); }
.tabelle tbody tr:last-child th, .tabelle tbody tr:last-child td { border-bottom: 0; }
.tabelle tbody tr:hover { background: var(--bg); }

/* Pruefungszeiten: Minuten gross, Stunden klein darunter.
   Schmaler als die uebrigen Tabellen, damit sie bei 375 px ohne
   Querscrollen auskommt. */
.pruefungszeiten { min-width: 0; }
.tabelle--zeiten { min-width: 20rem; }
.tabelle--zeiten th, .tabelle--zeiten td {
  padding: var(--sp-3) var(--sp-3);
}
.tabelle--zeiten thead th:not(:first-child),
.tabelle--zeiten .zeit { text-align: right; }
.tabelle--zeiten thead th { white-space: normal; }
.zeit__min {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.zeit__std, .zeit__zusatz {
  display: block;
  font-size: var(--fs-label);
  color: var(--text-muted);
}
.zeit__std { white-space: nowrap; }
.zeit__zusatz { margin-top: 0.15em; font-style: italic; }
.zeit--leer { color: var(--text-muted); }
.pruefungszeiten__quelle {
  font-size: var(--fs-small);
  color: var(--text-muted);
  margin: calc(var(--sp-5) * -1 + var(--sp-2)) 0 var(--sp-5);
}

/* Unter 22rem Fensterbreite (sehr alte Geraete) darf die Tabelle enger
   werden, statt die Seite nach rechts zu schieben. Sie bleibt lesbar,
   weil die Zeilen ohnehin nur drei Spalten haben. */
@media (max-width: 22rem) {
  .tabelle--zeiten { min-width: 0; }
  .tabelle--zeiten th, .tabelle--zeiten td { padding: var(--sp-2); }
  /* Auf sehr schmalen Geraeten entfaellt die Stundenangabe. Die Minuten
     stehen weiter da; zwei Zahlen fuer dieselbe Sache waeren hier der
     Grund, warum die Seite waagerecht scrollt. */
  .zeit__std { display: none; }
}

/* ============================================================
   Termine
   ============================================================ */
.termine { display: grid; gap: var(--sp-3); margin: 0 0 var(--sp-6); }
.termin-zeile {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  background: var(--surface);
  border: var(--hairline) solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
}
.termin-zeile--ferien { background: var(--bg); border-style: dashed; }
.termin-zeile__datum {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 3.25rem;
  padding: var(--sp-2) 0;
  background: var(--accent-tint);
  border-radius: var(--r-sm);
  line-height: 1.1;
}
.termin-zeile--ferien .termin-zeile__datum { background: var(--surface-tint); }
.termin-zeile__tag {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-h3);
  color: var(--ink);
}
.termin-zeile__monat {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-auf-tint);
}
.termin-zeile--ferien .termin-zeile__monat { color: var(--text-muted); }
.termin-zeile__text { min-width: 0; display: grid; gap: 2px; }
.termin-zeile__titel { font-family: var(--font-display); font-weight: 600; color: var(--ink); }
.termin-zeile__wann { font-size: var(--fs-small); color: var(--text-muted); }
.termin-zeile__hinweis {
  display: block;
  font-size: var(--fs-label);
  color: var(--text-muted);
  margin-top: .15em;
}

.termine__offen {
  grid-column: 1 / -1;
}
.termine__offen, .termine__offenliste {
  margin: var(--sp-2) 0 0;
  padding: var(--sp-4) var(--sp-5);
  background: var(--bg);
  border: var(--hairline) dashed var(--line-strong);
  border-radius: var(--r-md);
}
.termine__offen-titel {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-muted);
  margin: 0 0 var(--sp-2);
}
.termine__offen ul, .termine__offenliste {
  list-style: none; padding-left: 0; margin-bottom: 0;
}
.termine__offen li, .termine__offenliste li {
  font-size: var(--fs-small);
  padding: var(--sp-1) 0;
}

.abitur-termine { margin: 0 0 var(--sp-6); }
.abitur-termine__zeitraeume {
  list-style: none; margin: 0 0 var(--sp-4); padding: 0;
  display: grid; gap: var(--sp-3);
}
.abitur-termine__zeitraeume li {
  display: grid; gap: 2px;
  padding: var(--sp-3) var(--sp-4);
  background: var(--info-bg);
  border-radius: var(--r-sm);
  margin: 0;
}
.abitur-termine__label {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-auf-tint);
}
.abitur-termine__wert { font-weight: 600; color: var(--ink); }
.abitur-termine__quelle { font-size: var(--fs-small); color: var(--text-muted); margin: 0; }

/* ============================================================
   Linklisten
   ============================================================ */
.linkliste { list-style: none; margin: 0 0 var(--sp-6); padding: 0; display: grid; gap: var(--sp-3); }
.linkliste__punkt {
  /* Ohne min-width: 0 schrumpft ein Grid-Element nicht unter seine
     min-content-Breite. Auf schmalen Android-Geraeten (360 px und
     weniger) schob das die ganze Seite nach rechts. */
  display: grid; gap: var(--sp-1); min-width: 0;
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface);
  border: var(--hairline) solid var(--line);
  border-radius: var(--r-md);
  margin: 0;
}
.linkliste__link {
  font-family: var(--font-display); font-weight: 600;
  min-width: 0; overflow-wrap: anywhere;
}
.linkliste__hinweis {
  font-size: var(--fs-small); color: var(--text-muted);
  min-width: 0; overflow-wrap: anywhere;
}
.linkliste__hinweis--pruefen::before {
  content: "\2022 ";
  color: var(--warn);
  font-weight: 700;
}
.linkliste-za { margin: 0 0 var(--sp-6); }
.linkliste-za__hinweis {
  margin: var(--sp-3) 0 var(--sp-5);
  font-size: var(--fs-small);
  color: var(--text-muted);
}

/* ============================================================
   Belegungs-Checkliste (6.1)
   ============================================================ */
.belegung {
  margin: 0 0 var(--sp-5);
  padding: var(--sp-5);
  background: var(--surface);
  border: var(--hairline) solid var(--line);
  border-radius: var(--r-lg);
}
.belegung__h {
  font-size: var(--fs-h3);
  font-weight: 700;
  margin: 0 0 var(--sp-3);
}
.belegung__wahl { margin-bottom: var(--sp-5); }
.wahlfeld { border: 0; margin: 0; padding: 0; }
.wahlfeld__legende {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-muted);
  padding: 0;
  margin-bottom: var(--sp-3);
}
.wahlfeld__optionen { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.wahlfeld__option input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
}
.wahlfeld__option label {
  display: inline-block;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text-soft);
  background: var(--bg);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: var(--sp-2) var(--sp-4);
}
.wahlfeld__option label:hover { background: var(--surface-tint); color: var(--ink); }
.wahlfeld__option input:checked + label {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: var(--surface);
}
.wahlfeld__option input:focus-visible + label {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
}

.belegung__spalten { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .belegung__spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.belegung__gemeinsam { padding-bottom: var(--sp-5); border-bottom: var(--hairline) solid var(--line); }
.belegung__kopf {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
  margin: var(--sp-5) 0 var(--sp-3);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
}
.belegung__block .belegung__kopf:first-child { margin-top: 0; }
.belegung__liste { list-style: none; margin: 0; padding: 0; }
.belegung__liste li {
  display: flex; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-2) 0;
  border-bottom: var(--hairline) solid var(--line);
  font-size: var(--fs-small);
  margin: 0;
}
.belegung__liste li:last-child { border-bottom: 0; }
.belegung__liste b { font-family: var(--font-display); color: var(--accent-deep); }
.belegung__merkliste { margin: 0; padding-left: var(--sp-5); font-size: var(--fs-small); }

.pfaecher { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3) var(--sp-4); margin: 0; }
.pfaecher__pos {
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--ink);
  padding-top: 3px;
}
.pfaecher__werte { margin: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.fachchip {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  color: var(--text-soft);
  background: var(--bg);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 1px var(--sp-3);
  white-space: nowrap;
}
.belegung__legende {
  margin: var(--sp-5) 0 0;
  padding-top: var(--sp-4);
  border-top: var(--hairline) solid var(--line);
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.belegung__fussnote { font-size: var(--fs-small); color: var(--text-muted); margin: var(--sp-3) 0 0; }
.belegung__panel { padding-top: var(--sp-5); }
.belegung__panel + .belegung__panel { border-top: var(--hairline) solid var(--line); }
.belegung__zusammenfassung { color: var(--text-soft); }
.belegung__schulregeln {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: var(--hairline) solid var(--line);
}
/* Mit JavaScript wird nur der gewaehlte Schwerpunkt gezeigt. */
.hat-js .belegung__panel + .belegung__panel { border-top: 0; }
.hat-js .belegung__panel[hidden] { display: none; }

/* ============================================================
   Erster-Schultag-Checkliste (6.2)
   ============================================================ */
.checkliste {
  margin: 0 0 var(--sp-5);
  padding: var(--sp-5);
  background: var(--surface);
  border: var(--hairline) solid var(--line);
  border-radius: var(--r-lg);
}
.checkliste__tabs { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.checkliste__tab {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--text-soft);
  background: var(--bg);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: var(--sp-2) var(--sp-4);
  cursor: pointer;
}
.checkliste__tab:hover { background: var(--surface-tint); color: var(--ink); }
.checkliste__tab[aria-selected="true"] {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: var(--surface);
}
.checkliste__h { font-size: var(--fs-h3); font-weight: 700; margin: 0 0 var(--sp-4); }
.hat-js .checkliste__panel[hidden] { display: none; }
.checkliste__panel + .checkliste__panel { margin-top: var(--sp-6); }
.checkliste__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.checkliste__punkt {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border: var(--hairline) solid var(--line);
  border-radius: var(--r-sm);
  background: var(--bg);
  margin: 0;
}
.checkliste__box {
  grid-area: 1 / 1;
  /* 1.5rem sind 24 px: das Mindestmass fuer Bedienelemente nach WCAG 2.5.8.
     Vorher standen hier 1.4rem, also 22.4 px - knapp darunter. */
  width: 1.5rem; height: 1.5rem;
  margin: 0;
  accent-color: var(--accent-deep);
  cursor: pointer;
}
.checkliste__punkt label {
  grid-area: 1 / 1;
  padding-left: 2.1rem;
  display: grid; gap: 2px;
  cursor: pointer;
}
.checkliste__text { font-family: var(--font-display); font-weight: 600; color: var(--ink); }
.checkliste__box:checked ~ label .checkliste__text {
  text-decoration: line-through;
  color: var(--text-muted);
}
.checkliste__zusatz { font-size: var(--fs-small); color: var(--text-soft); }
.checkliste__download {
  justify-self: start;
  margin-left: 2.1rem;
  font-family: var(--font-display);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: 700;
}
.checkliste__download--folgt {
  color: var(--text-muted);
  border-bottom: var(--hairline) dashed var(--line-strong);
}
.checkliste__hinweis, .checkliste__fussnote {
  font-size: var(--fs-small);
  color: var(--text-muted);
  margin: var(--sp-4) 0 0;
}


/* ============================================================
   Startseite: Rollen-Einstieg und Schnellliste
   ============================================================ */
.rollen {
  list-style: none;
  margin: 0 0 var(--sp-7);
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
@media (min-width: 48rem) { .rollen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.rolle { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.rolle__kopf {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  text-decoration: none;
  color: var(--text-soft);
  border-bottom: var(--hairline) solid var(--line);
  transition: background var(--t-base);
}
.rolle__kopf:hover { background: var(--accent-tint); }
.rolle__titel {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  color: var(--ink);
  letter-spacing: var(--ls-tight);
}
.rolle__kopf:hover .rolle__titel { color: var(--accent-auf-tint); }
.rolle__text { font-size: var(--fs-small); }
.rolle__punkte {
  list-style: none;
  margin: 0;
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  display: grid;
  gap: var(--sp-1);
}
.rolle__punkte li { margin: 0; }
.rolle__punkte a {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-small);
  text-decoration: none;
  color: var(--text);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
}
.rolle__punkte a::before {
  content: "\203A";
  color: var(--accent-deep);
  font-weight: 700;
  margin-right: var(--sp-2);
}
.rolle__punkte a:hover { background: var(--surface-tint); color: var(--ink); }

.kacheln--gross .card--kachel__link { gap: var(--sp-3); padding: var(--sp-6) var(--sp-5); }
.kacheln--gross .card--kachel__titel { font-size: var(--fs-h2); }
.kacheln--gross .eyebrow { margin: 0; }
@media (min-width: 64rem) {
  .prosa--breit .kacheln--gross { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.schnellliste {
  list-style: none;
  margin: 0 0 var(--sp-7);
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-2);
}
@media (min-width: 48rem) { .schnellliste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.schnellliste li { margin: 0; }
.schnellliste a {
  display: grid;
  gap: 2px;
  height: 100%;
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface);
  border: var(--hairline) solid var(--line);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--text-soft);
  transition: border-color var(--t-base), background var(--t-base);
}
.schnellliste a:hover { border-color: var(--accent); background: var(--accent-tint); }
.schnellliste__titel {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
}
.schnellliste a:hover .schnellliste__titel { color: var(--accent-auf-tint); }
.schnellliste__text { font-size: var(--fs-small); }

/* Schloss an geschuetzten Navigationspunkten */
.nav__schloss, .nav--mobile__schloss {
  display: inline-block;
  width: 9px; height: 11px;
  margin-left: var(--sp-2);
  vertical-align: -1px;
  border: 1.5px solid var(--lock);
  border-radius: 2px;
  position: relative;
}
.nav__schloss::before, .nav--mobile__schloss::before {
  content: "";
  position: absolute;
  left: 1px; top: -4px;
  width: 5px; height: 4px;
  border: 1.5px solid var(--lock);
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
}

/* ============================================================
   QR-Codes
   ============================================================ */
.qr { margin-top: var(--sp-3); }
.qr__knopf {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-display);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--accent-deep);
  background: var(--surface);
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: var(--sp-2) var(--sp-4);
}
.qr__knopf::-webkit-details-marker { display: none; }
.qr__knopf:hover { background: var(--accent-tint); color: var(--accent-auf-tint); }
.qr__symbol {
  width: 12px; height: 12px;
  background:
    linear-gradient(var(--accent-deep), var(--accent-deep)) 0 0 / 5px 5px no-repeat,
    linear-gradient(var(--accent-deep), var(--accent-deep)) 100% 0 / 5px 5px no-repeat,
    linear-gradient(var(--accent-deep), var(--accent-deep)) 0 100% / 5px 5px no-repeat,
    linear-gradient(var(--accent-deep), var(--accent-deep)) 100% 100% / 3px 3px no-repeat;
}
.qr__feld {
  margin-top: var(--sp-3);
  padding: var(--sp-4);
  background: var(--surface);
  border: var(--hairline) solid var(--line);
  border-radius: var(--r-md);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
}
.qr__bild { flex: 0 0 auto; width: 8.5rem; }
.qr__bild svg { display: block; width: 100%; height: auto; border-radius: var(--r-xs); }
.qr__hinweis { flex: 1 1 12rem; margin: 0; font-size: var(--fs-small); color: var(--text-muted); }
.prosa > .qr { margin-top: var(--sp-7); }

/* ============================================================
   Footer
   ============================================================ */
.footer {
  background: var(--ink);
  color: var(--text-on-dark);
  border-top: var(--hairline) solid var(--line-dark);
  margin-top: var(--sp-8);
}
.footer__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--sp-7) var(--gutter) var(--sp-6);
}
.footer__raster {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}
@media (min-width: 40rem) { .footer__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .footer__raster { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.footer__titel {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--surface);
  margin: 0 0 var(--sp-3);
}
.footer__spalte ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-2); }
.footer__link {
  color: var(--text-on-dark);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: var(--fs-small);
}
.footer__link:hover { color: var(--surface); text-decoration: underline; }
.footer__adresse { font-style: normal; font-size: var(--fs-small); color: var(--text-on-dark-muted); }
.footer__fuss {
  margin: var(--sp-7) 0 0;
  padding-top: var(--sp-4);
  border-top: var(--hairline) solid var(--line-dark);
  font-size: var(--fs-small);
  color: var(--text-on-dark-muted);
}
.footer .link-extern::after { color: var(--text-on-dark-muted); }

/* ============================================================
   Druck
   ============================================================ */
@media print {
  .header, .footer, .seitenmenu, .skiplink, .banner, .inhaltsverzeichnis { display: none; }
  body { background: #fff; }
  .akkordeon__inhalt { display: block !important; }
  .card, .kasten, .tabelle-wrap { box-shadow: none; }
  .hat-js .belegung__panel[hidden], .hat-js .checkliste__panel[hidden] { display: block !important; }
}


/* ============================================================
   Sammeladresse der Oberstufenkoordination
   ============================================================ */
.kontaktkarte {
  background: var(--surface);
  border: var(--hairline) solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  margin: 0 0 var(--sp-5);
}
.kontaktkarte .kontaktmail { margin: 0; }
.kontaktkarte__daten {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-1) var(--sp-4);
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-small);
}
.kontaktkarte__daten dt {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--text-muted);
}
.kontaktkarte__daten dd { margin: 0; color: var(--text); }

.kontaktmail {
  font-family: var(--font-display);
  font-size: var(--fs-body);
}
.kontaktmail__adresse { font-weight: 600; }
.kontaktmail__text {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--text-muted);
  margin-top: .2em;
}


/* ============================================================
   Eingebettet in eine fremde Seite
   ------------------------------------------------------------
   Die Schulhomepage bindet diese Seiten in einen iframe ein. Darin
   funktionieren sie schlecht: Der Kasten ist schmaler als das Layout
   vorsieht, er bekommt eine zweite Bildlaufleiste, die eigene
   Navigation liegt neben der fremden, und die Adresszeile zeigt eine
   Adresse, unter der man das Gelesene nicht wiederfindet. Statt die
   Einbettung hart zu verbieten - dann stuende dort ein leerer Kasten -
   erscheint im Rahmen nur dieser Hinweis mit einem Link, der die Seite
   im ganzen Fenster oeffnet. Ohne JavaScript aendert sich nichts.
   ============================================================ */
.rahmen { display: none; }

.im-rahmen body > *:not(.rahmen):not(script) { display: none !important; }

.im-rahmen .rahmen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--sp-5);
  background: var(--bg);
}

.rahmen__inner {
  max-width: 30rem;
  text-align: center;
}

.rahmen__logo {
  width: 15rem; max-width: 100%; height: auto;
  margin-bottom: var(--sp-4);
}

.rahmen__text {
  margin: 0 0 var(--sp-4);
  font-size: var(--fs-lead);
  color: var(--text);
}

.rahmen__knopf {
  display: inline-block;
  padding: 0.7em 1.4em;
  border-radius: var(--r-pill);
  background: var(--accent-deep);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.rahmen__knopf:hover,
.rahmen__knopf:focus-visible { background: var(--accent); }

/* --- Klausurpapier stempeln ---------------------------------------------
   Steht nur auf der versteckten Seite fuer die Aufsicht. Die Bedienung
   entsteht erst im Browser; ohne JavaScript bleibt die Liste der drei
   Papiere sichtbar, und die reicht zum Herunterladen. */
.papierwerk {
  background: var(--surface);
  border: var(--hairline) solid var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  margin: 0 0 var(--sp-5);
}
.papierwerk__gruppe {
  border: 0;
  border-top: var(--hairline) solid var(--line);
  padding: var(--sp-3) 0 0;
  margin: 0 0 var(--sp-4);
}
.papierwerk__gruppe:first-child { border-top: 0; padding-top: 0; }
.papierwerk__gruppe legend {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent-deep);
  padding: 0;
  margin: 0 0 var(--sp-2);
}
.papierwerk__wahl {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 var(--sp-4) var(--sp-2) 0;
  font-size: var(--fs-body);
}
.papierwerk__datum {
  font: inherit;
  font-size: var(--fs-small);
  padding: .35em .6em;
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--text);
}
.papierwerk__frei {
  font: inherit;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-small);
  width: 6.5em;
  padding: .35em .6em;
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--text);
  text-transform: none;
}
.papierwerk__hilfe {
  display: block;
  font-size: var(--fs-small);
  color: var(--text-muted);
  margin: var(--sp-1) 0 var(--sp-2);
}
.papierwerk__symbole {
  /* Feste Spalten statt Umbruch: sechzehn Felder ergeben so vier volle
     Reihen und keine angebrochene. */
  display: grid;
  grid-template-columns: repeat(4, 2.75rem);
  gap: var(--sp-2);
  margin: var(--sp-2) 0 0;
}
@media (min-width: 40rem) {
  .papierwerk__symbole { grid-template-columns: repeat(8, 2.75rem); }
}
.papierwerk__symbol input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.papierwerk__symbol > span:first-of-type {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: var(--hairline) solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--text-muted);
  cursor: pointer;
}
.papierwerk__symbol input:checked + span {
  border-color: var(--accent);
  background: var(--accent-tint);
  color: var(--ink);
}
.papierwerk__symbol input:focus-visible + span {
  outline: 2px solid var(--accent-deep);
  outline-offset: 2px;
}
.papierwerk__nur-lesen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.papierwerk__vorschau {
  font-size: var(--fs-small);
  color: var(--text-soft);
  margin: 0 0 var(--sp-3);
}
.papierwerk__marke {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .25em .6em;
  border: var(--hairline) dashed var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--ink);
}
.papierwerk__datumtext {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .8rem;
}
.papierwerk__meldung {
  font-size: var(--fs-small);
  color: var(--text-soft);
  margin: var(--sp-2) 0 0;
  min-height: 1.5em;
}
.papierwerk__roh-titel {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: var(--sp-4) 0 0;
  border-top: var(--hairline) solid var(--line);
  padding-top: var(--sp-3);
}
.papierwerk__roh-liste {
  list-style: none;
  padding: 0;
  margin: var(--sp-2) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  font-size: var(--fs-small);
}
.papierwerk__roh { color: var(--text-muted); }