/* ============================================================
   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;
  width: 1.4rem; height: 1.4rem;
  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;
}