/*
 * WELTREGLER – Design-System (Konzept 10.2)
 * Leitidee: modernes Schulatlas- und Lehrtafel-Gefühl. Ein auffälliges Element (der Klimastreifen), alles andere ruhig und klar.
 */

/* ---------- Schriften (vorher fonts.css; hier, damit eine Datei weniger das erste Rendern blockiert) ---------- */
/* Lokale Schriften (SIL Open Font License 1.1), geladen über Google Fonts, keine externen Anfragen */
/* latin-ext */
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url(../fonts/atkinson-hyperlegible-next-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url(../fonts/atkinson-hyperlegible-next-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(../fonts/atkinson-hyperlegible-next-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(../fonts/atkinson-hyperlegible-next-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/bricolage-grotesque-normal-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Bricolage Grotesque';
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/bricolage-grotesque-normal-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ---------- Farben und Maße ---------- */
:root {
  --ocean: #14365C;
  --ocean-soft: #2A5480;
  --forest: #2E6B50;
  --wheat: #C99A2E;
  --wheat-dark: #8A6514;
  --map-grey: #E8EDEB;
  --paper: #FBFCFB;
  --signal: #B3261E;

  --bg: var(--map-grey);
  --surface: var(--paper);
  --surface-sunken: #F1F4F3;
  --text: var(--ocean);
  --text-muted: #3F5560;
  --border: #C9D3D0;
  --border-strong: #93A6A2;
  --grid-line: rgba(20, 54, 92, 0.045);
  --positive: var(--forest);
  --negative: var(--signal);
  --accent: var(--wheat);
  --accent-text: #7E5C10; /* etwas dunkler als --wheat-dark: mindestens 4,5:1 auch auf --bg (map-grey) */
  --focus: #1F6FB2;
  --on-primary: #FFFFFF;
  --shadow: 0 1px 0 rgba(20, 54, 92, 0.06), 0 6px 18px -12px rgba(20, 54, 92, 0.35);

  --stripe-cold: #08306B;
  --stripe-neutral: #F7F7F7;
  --stripe-hot: #67000D;
  --stripe-empty: #D5DCDA;

  --font-text: 'Atkinson Hyperlegible Next', system-ui, sans-serif;
  --font-head: 'Bricolage Grotesque', 'Atkinson Hyperlegible Next', system-ui, sans-serif;
  --radius: 10px;
  --radius-small: 6px;
  --wrap: 76rem;
  --gap: 1.25rem;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0E1A25;
    --surface: #152434;
    --surface-sunken: #112030;
    --text: #E4EBE9;
    --text-muted: #A9BAC1;
    --border: #2B3F52;
    --border-strong: #46607A;
    --grid-line: rgba(228, 235, 233, 0.04);
    --positive: #6DB592;
    --negative: #F08A82;
    --accent: #E2B85A;
    --accent-text: #E2B85A;
    --focus: #7FB4E8;
    --on-primary: #0E1A25;
    --shadow: 0 1px 0 rgba(0, 0, 0, 0.3), 0 8px 20px -12px rgba(0, 0, 0, 0.6);
    --stripe-empty: #2B3A47;
    color-scheme: dark;
  }
}

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

html { font-size: 100%; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--bg);
  /* Feines Gradnetz wie in einem Atlas */
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
  color: var(--text);
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  line-height: 1.15;
  font-weight: 700;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2rem, 3.2vw + 1rem, 3.25rem); }
h2 { font-size: clamp(1.4rem, 1.2vw + 1rem, 1.9rem); }
h3, .h3 { font-size: 1.2rem; }
.h3 { font-family: var(--font-head); font-weight: 700; line-height: 1.15; margin: 0 0 0.5em; }
dd { margin: 0; }

p { margin: 0 0 1em; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
img { max-width: 100%; height: auto; display: block; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }

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

.skip-link {
  position: absolute; left: 1rem; top: -4rem; z-index: 50;
  background: var(--surface); color: var(--text); padding: 0.75rem 1rem; border-radius: var(--radius-small);
}
.skip-link:focus { top: 1rem; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 1rem; }
@media (min-width: 48rem) { .wrap { padding: 0 1.5rem; } }

main { flex: 1; padding: 2rem 0 3rem; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-text);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 0.5rem;
}
.lead { font-size: 1.2rem; max-width: 42rem; }
.muted, .note { color: var(--text-muted); }
.note { font-size: 1rem; }
.center { text-align: center; }

/* ---------- Topleiste (alle Seiten außer Beamer) ----------
 * Markup src/View/templates/_topbar.php, Verhalten public/assets/js/lib/topbar.js. Hier die feste Leiste in Ozeanblau
 * (topbar--solid) und alles Gemeinsame; die Glasleiste und die Animation der Marke stehen in start.css (nur Startseite).
 * topbar--static scrollt mit (Spielansicht), topbar--static-narrow nur auf schmalen Bildschirmen, wo das Codefeld eine
 * zweite Zeile braucht. */
.topbar { position: sticky; top: 0; z-index: 40; color: #F3F6F5; }
.topbar--static { position: relative; }
@media (max-width: 40rem) { .topbar--static-narrow { position: relative; } }
.topbar--solid { background: var(--ocean); box-shadow: 0 6px 18px -14px rgba(0, 0, 0, 0.6); }
.topbar__inner {
  max-width: var(--wrap); margin: 0 auto; padding: 0.5rem 1rem;
  display: flex; align-items: center; gap: 0.75rem 1.25rem; min-height: 4rem;
}
@media (min-width: 48rem) { .topbar__inner { padding: 0.5rem 1.5rem; } }

.topbar__brand { display: inline-flex; align-items: center; gap: 0.6rem; color: inherit; text-decoration: none; margin-right: auto; }
.topbar__name { font-family: var(--font-head); font-weight: 800; font-size: 1.3rem; letter-spacing: 0.07em; }
.topbar__mark { display: inline-flex; align-items: flex-end; gap: 2px; height: 1.4rem; }
.topbar__mark span { width: 5px; height: 100%; border-radius: 1px; }
.topbar__mark span:nth-child(1) { background: #2171B5; }
.topbar__mark span:nth-child(2) { background: #6BAED6; }
.topbar__mark span:nth-child(3) { background: #DEEBF7; }
.topbar__mark span:nth-child(4) { background: #FCBBA1; }
.topbar__mark span:nth-child(5) { background: #EF3B2C; }
.topbar__mark span:nth-child(6) { background: #A50F15; }

.topbar__nav { display: flex; align-items: center; gap: 0.35rem; }
.topbar__nav a {
  color: inherit; text-decoration: none; font-weight: 700; font-size: 1rem;
  padding: 0.5rem 0.8rem; border-radius: 999px; transition: background-color 0.2s ease;
}
.topbar__nav a:hover { background: rgba(255, 255, 255, 0.12); }
/* Menüpunkt des aktuellen Bereichs (Einzelspiel, Lehrkräfte- und Admin-Bereich) */
.topbar__nav a[aria-current] { background: rgba(255, 255, 255, 0.18); }
.topbar__teacher { border: 1.5px solid rgba(255, 255, 255, 0.55); }

.topbar__join { display: flex; align-items: center; background: rgba(255, 255, 255, 0.12); border: 1.5px solid rgba(255, 255, 255, 0.35); border-radius: 999px; padding: 0.2rem; }
.topbar__code {
  width: 7.5rem; background: transparent; border: 0; color: inherit; font: inherit; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase; padding: 0.4rem 0.4rem 0.4rem 0.9rem;
}
.topbar__code::placeholder { color: rgba(243, 246, 245, 0.7); letter-spacing: 0.04em; text-transform: none; font-weight: 400; }
.topbar__code:focus-visible { outline: none; }
.topbar__join:focus-within { border-color: #F1D58F; box-shadow: 0 0 0 3px rgba(241, 213, 143, 0.35); }
.topbar__go {
  background: var(--wheat); color: #1D1A10; border: 0; border-radius: 999px; font: inherit; font-weight: 700;
  padding: 0.45rem 1rem; cursor: pointer;
}
.topbar__go:hover { background: #E2B85A; }

.topbar__account { position: relative; }
.topbar__account summary {
  list-style: none; cursor: pointer; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  display: grid; place-items: center; font-weight: 700; background: rgba(255, 255, 255, 0.16); border: 1.5px solid rgba(255, 255, 255, 0.4);
}
.topbar__account summary::-webkit-details-marker { display: none; }
.topbar__menu-panel {
  position: absolute; right: 0; top: calc(100% + 0.6rem); min-width: 15rem; z-index: 5;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 18px 40px -20px rgba(20, 54, 92, 0.55); padding: 0.5rem; display: grid;
}
.topbar__menu-panel a, .topbar__menu-panel button {
  display: block; text-align: left; padding: 0.6rem 0.75rem; border-radius: var(--radius-small); text-decoration: none;
  font: inherit; color: inherit; background: none; border: 0; cursor: pointer; width: 100%;
}
.topbar__menu-panel a:hover, .topbar__menu-panel button:hover { background: var(--surface-sunken); }
.topbar__who { margin: 0; padding: 0.5rem 0.75rem; font-weight: 700; border-bottom: 1px solid var(--border); margin-bottom: 0.35rem; }

.topbar__toggle { display: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.4); background: transparent; color: inherit; cursor: pointer; }
.topbar__toggle-lines, .topbar__toggle-lines::before, .topbar__toggle-lines::after {
  display: block; width: 1.1rem; height: 2px; background: currentColor; border-radius: 2px; margin: 0 auto; position: relative; transition: transform 0.2s ease;
}
.topbar__toggle-lines::before, .topbar__toggle-lines::after { content: ""; position: absolute; left: 0; }
.topbar__toggle-lines::before { top: -6px; }
.topbar__toggle-lines::after { top: 6px; }
.is-open .topbar__toggle-lines { background: transparent; }
.is-open .topbar__toggle-lines::before { transform: translateY(6px) rotate(45deg); }
.is-open .topbar__toggle-lines::after { transform: translateY(-6px) rotate(-45deg); }

/* Fortschrittslinie in den Farben des Klimastreifens */
.topbar__progress { height: 3px; background: rgba(255, 255, 255, 0.08); }
.topbar__progress span {
  display: block; height: 100%; transform: scaleX(0); transform-origin: left;
  background: linear-gradient(90deg, #08306B, #4292C6, #DEEBF7, #FC9272, #CB181D, #67000D);
}

@media (max-width: 60rem) {
  .topbar__toggle { display: inline-grid; place-items: center; }
  .topbar__nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch;
    background: var(--ocean); padding: 0.75rem 1rem 1.25rem; gap: 0.25rem; box-shadow: 0 18px 30px -20px rgba(0, 0, 0, 0.6);
  }
  .is-open .topbar__nav { display: flex; }
  .topbar__nav a { font-size: 1.15rem; padding: 0.85rem 1rem; }
  .topbar__teacher { text-align: center; margin-top: 0.5rem; }
}
@media (max-width: 40rem) {
  .topbar__inner { flex-wrap: wrap; }
  .topbar__join { order: 5; flex: 1 1 100%; }
  .topbar__code { flex: 1; width: auto; }
  .topbar__name { font-size: 1.15rem; }
}

/* Sprungziele, fokussierte Felder und klebende Leisten (Glossar) bleiben unter der festen Leiste sichtbar.
 * Einzeilig ist sie 4rem hoch plus Fortschrittslinie; zweizeilig (Handy mit Codefeld) scrollt sie mit. */
:root { --topbar-offset: 0px; }
html:has(.topbar--sticky, .topbar--static-narrow) { --topbar-offset: calc(4rem + 3px); scroll-padding-top: var(--topbar-offset); }
@media (max-width: 40rem) { html:has(.topbar--static-narrow) { --topbar-offset: 0px; } }

/* ---------- Fuß ---------- */
.site-footer { border-top: 1px solid var(--border); background: var(--surface); padding: 1.5rem 0; font-size: 1rem; color: var(--text-muted); }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; justify-content: space-between; align-items: center; }
.site-footer nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }

/* ---------- Bausteine ---------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.25rem;
}
.card > :last-child { margin-bottom: 0; }
.card--accent { border-top: 4px solid var(--accent); }
.card--ocean { border-top: 4px solid var(--ocean-soft); }
.card--forest { border-top: 4px solid var(--forest); }

.grid { display: grid; gap: var(--gap); }
@media (min-width: 48rem) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) { .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.stack > * + * { margin-top: 1rem; }
.cluster { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

/* Buttons */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3rem; padding: 0.65rem 1.25rem;
  border: 2px solid var(--ocean); border-radius: var(--radius-small);
  background: var(--ocean); color: var(--on-primary);
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.button:hover { background: var(--ocean-soft); border-color: var(--ocean-soft); text-decoration: none; }
.button--secondary { background: transparent; color: var(--text); border-color: var(--border-strong); }
.button--secondary:hover { background: var(--surface-sunken); border-color: var(--text); }
.button--accent { background: var(--wheat); border-color: var(--wheat); color: #1D1A10; }
.button--accent:hover { background: #B58825; border-color: #B58825; }
.button--danger { background: var(--signal); border-color: var(--signal); color: #FFFFFF; }
.button--block { width: 100%; }
.button--small { min-height: 2.5rem; padding: 0.35rem 0.9rem; }
.button[disabled], .button[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
@media (prefers-color-scheme: dark) {
  .button:not(.button--secondary):not(.button--accent):not(.button--danger) { background: #7FB4E8; border-color: #7FB4E8; }
  .button:not(.button--secondary):not(.button--accent):not(.button--danger):hover { background: #A5CAEE; border-color: #A5CAEE; }
}

/* Formulare */
.field { display: grid; gap: 0.35rem; margin-bottom: 1rem; }
.field label, .label { font-weight: 700; }
.field__hint { color: var(--text-muted); font-size: 1rem; }
.field__error { color: var(--negative); font-weight: 700; }
.input, .select, .textarea {
  width: 100%; min-height: 3rem; padding: 0.6rem 0.8rem;
  border: 2px solid var(--border-strong); border-radius: var(--radius-small);
  background: var(--surface); color: var(--text); font: inherit;
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--focus); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 35%, transparent); }
.input--code {
  font-family: var(--font-head); font-size: 1.6rem; font-weight: 700; letter-spacing: 0.35em;
  text-transform: uppercase; text-align: center;
}
.inline-form { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.inline-form .input { flex: 1 1 12rem; }

fieldset { border: 0; margin: 0 0 1rem; padding: 0; }
legend { font-weight: 700; margin-bottom: 0.5rem; }

.choice-list { display: grid; gap: 0.75rem; }
.choice {
  display: flex; gap: 0.75rem; align-items: flex-start;
  padding: 0.9rem 1rem; border: 2px solid var(--border); border-radius: var(--radius);
  background: var(--surface); cursor: pointer;
}
.choice:hover { border-color: var(--border-strong); }
.choice:has(input:checked) { border-color: var(--ocean-soft); background: var(--surface-sunken); }
.choice input { margin-top: 0.3rem; width: 1.15rem; height: 1.15rem; accent-color: var(--ocean-soft); }

/* Hinweise */
.alert { border-radius: var(--radius-small); padding: 0.85rem 1rem; border-left: 5px solid var(--ocean-soft); background: var(--surface); margin-bottom: 1rem; }
.alert--success { border-left-color: var(--forest); }
.alert--warning { border-left-color: var(--wheat); }
.alert--error { border-left-color: var(--signal); }
.badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.15rem 0.55rem; border-radius: 999px; font-size: 0.875rem; font-weight: 700;
  background: var(--surface-sunken); border: 1px solid var(--border);
}
.badge--warning { border-color: var(--wheat); color: var(--accent-text); }
.badge--danger { border-color: var(--signal); color: var(--negative); }

/* Kennzahlen */
.metric {
  display: grid; grid-template-columns: 1fr auto; gap: 0.1rem 0.75rem; align-items: baseline;
  padding: 0.85rem 1rem; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); text-align: left; font: inherit; color: inherit; width: 100%;
}
button.metric { cursor: pointer; }
button.metric:hover { border-color: var(--border-strong); }
.metric__label { font-weight: 700; grid-column: 1 / -1; line-height: 1.25; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: anywhere; }
.metric__value { font-family: var(--font-head); font-size: 1.7rem; font-weight: 700; line-height: 1.1; white-space: nowrap; }
.metric__delta { font-weight: 700; grid-column: 2; justify-self: end; white-space: nowrap; }
.metric__spark { grid-column: 1 / -1; height: 28px; width: 100%; margin-top: 0.35rem; }
.delta--up { color: var(--positive); }
.delta--down { color: var(--negative); }
.delta--flat { color: var(--text-muted); }

/* Regler */
.slider { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) auto; gap: 0.25rem 0.75rem; align-items: center; padding: 0.75rem 0; border-bottom: 1px solid var(--border); }
.slider__icon { width: 2.75rem; height: 2.75rem; border-radius: var(--radius-small); background: var(--surface-sunken); overflow: hidden; }
.slider__label { font-weight: 700; }
.slider__value { font-family: var(--font-head); font-size: 1.4rem; font-weight: 700; min-width: 2.5ch; text-align: right; }
.slider__input { grid-column: 2 / 4; width: 100%; accent-color: var(--ocean-soft); height: 2rem; }
.slider__hint { grid-column: 2 / 4; color: var(--text-muted); font-size: 1rem; }
.slider__stepper { display: inline-flex; gap: 0.35rem; }
.slider__stepper button { min-width: 2.5rem; min-height: 2.5rem; border: 2px solid var(--border-strong); border-radius: var(--radius-small); background: var(--surface); color: var(--text); font: inherit; font-weight: 700; cursor: pointer; }

/* Klimastreifen */
.stripes {
  display: flex; height: 3rem; border-radius: var(--radius-small); overflow: hidden;
  border: 1px solid var(--border);
}
.stripes--tall { height: 4.5rem; }
.stripes--thin { height: 0.75rem; border: 0; border-radius: 0; }
.stripe { flex: 1; background: var(--stripe-empty); }
.stripe--new { animation: stripe-in 0.8s ease-out both; transform-origin: left; }
@keyframes stripe-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.stripes-legend { display: flex; justify-content: space-between; font-size: 0.875rem; color: var(--text-muted); margin-top: 0.25rem; }

/* Bilder und Platzhalter mit festem Seitenverhältnis (Konzept 11.4) */
.img-placeholder {
  display: flex; align-items: center; justify-content: center; text-align: center;
  background: var(--map-grey); border: 1px solid var(--ocean); color: var(--ocean);
  font-family: var(--font-head); font-weight: 700; padding: 1rem; border-radius: var(--radius-small);
  width: 100%;
}
@media (prefers-color-scheme: dark) { .img-placeholder { background: #1C2D3E; border-color: #7FB4E8; color: #E4EBE9; } }
.ratio-16-9 { aspect-ratio: 16 / 9; }
.ratio-4-3 { aspect-ratio: 4 / 3; }
.ratio-3-4 { aspect-ratio: 3 / 4; }
.ratio-2-1 { aspect-ratio: 2 / 1; }
.ratio-1-1 { aspect-ratio: 1 / 1; }
/* Ohne Spezifität, damit feste Breiten kleiner Bilder (Spielkopf, Rollenkarten) Vorrang haben */
:where(img.ratio-16-9, img.ratio-4-3, img.ratio-3-4, img.ratio-2-1, img.ratio-1-1) { width: 100%; object-fit: cover; }

/* Reiter */
.tabs { display: flex; gap: 0.25rem; border-bottom: 2px solid var(--border); margin-bottom: 1rem; flex-wrap: wrap; }
.tabs [role="tab"] {
  border: 0; background: transparent; color: var(--text-muted); font: inherit; font-weight: 700;
  padding: 0.75rem 1rem; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; min-height: 3rem;
}
.tabs [role="tab"][aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }

/* Dialog */
dialog {
  border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem;
  background: var(--surface); color: var(--text); max-width: min(36rem, calc(100vw - 2rem)); box-shadow: var(--shadow);
}
dialog::backdrop { background: rgba(14, 26, 37, 0.55); }

/* Tabellen */
.table { width: 100%; border-collapse: collapse; background: var(--surface); }
.table th, .table td { text-align: left; padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.table th { font-weight: 700; background: var(--surface-sunken); }
.table td.num, .table th.num { text-align: right; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }

/* ---------- Startseite ---------- */
.hero { position: relative; margin: -2rem 0 2rem; }
.hero__image { position: relative; }
.hero__image img, .hero__image .img-placeholder { border-radius: 0; border-left: 0; border-right: 0; }
.hero__text { padding: 1.5rem 0 0; }
@media (max-width: 63.99rem) {
  /* Schmale Bildschirme: nur das Mobile zeigen, nicht den leeren Bereich links */
  .hero__image img { aspect-ratio: 4 / 3; object-position: 82% 50%; }
}
.hero__text h1 { margin-bottom: 0.4rem; }
.hero__subtitle { font-family: var(--font-head); font-size: clamp(1.3rem, 1.5vw + 1rem, 2rem); font-weight: 600; margin-bottom: 1rem; }
@media (min-width: 64rem) {
  .hero { margin-bottom: 2.5rem; }
  .hero__image img, .hero__image .img-placeholder { max-height: 78vh; }
  .hero__text {
    position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
    padding: 0; pointer-events: none;
  }
  .hero__text .wrap > * { max-width: 30rem; pointer-events: auto; }
}
@media (min-width: 64rem) and (max-width: 82rem) {
  .hero__text .wrap > * { max-width: 25rem; }
  .hero__text .lead { font-size: 1.1rem; }
}
@media (min-width: 64rem) and (prefers-color-scheme: dark) {
  .hero__text .wrap > * { text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); }
  .hero__text { color: #14365C; }
}

.actions .card { display: flex; flex-direction: column; }
.actions .card > .button, .actions .card > form { margin-top: auto; }
.actions h2 { font-size: 1.35rem; }

.learnings { counter-reset: learning; list-style: none; padding: 0; margin: 0; }
.learning { padding-left: 3.25rem; position: relative; }
.learning::before {
  counter-increment: learning; content: counter(learning);
  position: absolute; left: 0; top: 0; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--font-head); font-weight: 800;
  background: var(--ocean); color: var(--on-primary);
}

.section { margin-top: 3rem; }
.section__head { margin-bottom: 1.25rem; }

/* ---------- Einzelspiel einrichten ---------- */
.narrow { max-width: 40rem; }
.choice--card { flex-direction: column; align-items: stretch; padding: 0.75rem; position: relative; }
.choice--card input { position: absolute; top: 1rem; left: 1rem; z-index: 1; width: 1.4rem; height: 1.4rem; }
.choice__body { display: grid; gap: 0.4rem; }
.choice__image { border-radius: var(--radius-small); }
.choice-cards .choice__image { max-width: 9rem; }
.choice__title { display: block; font-family: var(--font-head); font-size: 1.15rem; font-weight: 700; }
.choice__text { color: var(--text-muted); }
.region-tiles { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
@media (min-width: 64rem) { .region-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Spielansicht ---------- */
.page-game main { padding-top: 1rem; }
.game-loading { padding: 3rem 0; text-align: center; color: var(--text-muted); }
.rejoin-note { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; font-weight: 700; }

.game-header { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; }
.game-header__region { display: flex; gap: 0.75rem; align-items: center; }
.game-header__image { width: 4.5rem; flex: none; border-radius: var(--radius-small); }
.img-placeholder.game-header__image { font-size: 0.75rem; padding: 0.25rem; }
.game-header__name { font-family: var(--font-head); font-size: 1.5rem; display: block; line-height: 1.1; }
.game-header__facts { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: center; list-style: none; margin: 0; padding: 0; font-size: 1.05rem; }
.game-stripes { margin-bottom: 1.25rem; }

.game-layout { display: grid; gap: var(--gap); }
.game-layout__main, .game-layout__side { display: grid; gap: var(--gap); align-content: start; min-width: 0; }
@media (min-width: 64rem) {
  .game-layout { grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr); }
  .game-layout__side { position: sticky; top: 1rem; }
}

.metrics-grid { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); margin-bottom: 0.75rem; }
.metric .metric__delta { font-size: 0.95rem; }

.budget-head { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; justify-content: space-between; }
.points { display: grid; justify-items: end; text-align: right; }
.points__value { font-family: var(--font-head); font-size: 2.6rem; font-weight: 800; line-height: 1; color: var(--forest); }
.points__value--over { color: var(--negative); }
.points__label { font-weight: 700; }
.slider__controls { display: inline-flex; gap: 0.6rem; align-items: center; }
.slider__details summary { cursor: pointer; color: var(--text-muted); width: fit-content; }
.slider__details[open] { color: var(--text); }
.slider__icon .img-placeholder { font-size: 0.6rem; padding: 0.1rem; border-radius: var(--radius-small); }
.aid-box { display: grid; gap: 0 1rem; padding: 0.75rem 0; }
@media (min-width: 48rem) { .aid-box { grid-template-columns: 1fr 1fr; } }
.l3-controls { display: grid; gap: 0 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border); margin-bottom: 0.5rem; }
@media (min-width: 48rem) { .l3-controls { grid-template-columns: 1fr 1fr; } }

.law-cards { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); }
.law-card {
  position: relative; display: grid; gap: 0.5rem; align-content: start; padding: 0.6rem;
  border: 2px solid var(--border); border-radius: var(--radius); background: var(--surface);
}
.law-card__main { display: grid; gap: 0.5rem; cursor: pointer; }
.law-card__more summary { cursor: pointer; font-weight: 700; color: var(--text-muted); }
.law-card__more .note { margin: 0.4rem 0 0; }
.law-card:hover { border-color: var(--border-strong); }
.law-card input { position: absolute; top: 0.9rem; left: 0.9rem; width: 1.3rem; height: 1.3rem; z-index: 1; accent-color: var(--ocean-soft); }
.law-card--selected { border-color: var(--ocean-soft); background: var(--surface-sunken); }
.law-card--active { border-color: var(--forest); cursor: default; }
.law-card:has(input:disabled:not(:checked)):not(.law-card--active) .law-card__main { opacity: 0.7; cursor: not-allowed; }
.law-card--active .law-card__main { cursor: default; }
.law-card__image { border-radius: var(--radius-small); }
.law-card__body { display: grid; gap: 0.35rem; }
.law-card__name { font-family: var(--font-head); font-size: 1.1rem; }
.law-card__hint { font-weight: 700; color: var(--accent-text); }
.law-card__status { color: var(--negative); font-weight: 700; }
.law-card__status:empty { display: none; }
/* Schmale Bildschirme: kleines Bild links, Text rechts, sonst wird jede Karte bildschirmhoch */
@media (max-width: 30rem) {
  .law-card__main { grid-template-columns: 5.5rem minmax(0, 1fr); align-items: start; gap: 0.75rem; }
  .law-card__image { font-size: 0.7rem; padding: 0.25rem; }
  .law-card input { top: 0.4rem; left: 0.4rem; }
}

.event { display: grid; gap: 0.75rem; padding: 0.75rem 0; border-top: 1px solid var(--border); }
.event:first-of-type { border-top: 0; }
@media (min-width: 48rem) { .event { grid-template-columns: 14rem minmax(0, 1fr); } }
.event__image { border-radius: var(--radius-small); }
.event__body > :last-child { margin-bottom: 0; }

.submit-bar { position: sticky; bottom: 0; z-index: 2; background: var(--bg); padding: 0.75rem 0; border-top: 1px solid var(--border); }
.submit-bar .alert { margin-bottom: 0.5rem; }
.submit-bar__row { display: flex; gap: 0.75rem; align-items: center; }
.submit-bar__row .button { flex: 1 1 auto; }
.submit-bar__points { flex: 0 1 11rem; font-weight: 700; font-size: 0.875rem; line-height: 1.25; }
.submit-bar__points--over { color: var(--negative); }

.world-panel .h3 { margin-bottom: 0.75rem; }
.temp-gauge__value { display: flex; gap: 0.75rem; align-items: baseline; }
.temp-gauge__bar {
  position: relative; height: 0.9rem; margin: 1.6rem 0 0.5rem; border-radius: 999px;
  background: linear-gradient(90deg, #6BAED6 0%, #F7F7F7 25%, #FCBBA1 45%, #FB6A4A 65%, #CB181D 85%, #67000D 100%);
}
.temp-gauge__mark { position: absolute; top: -1.4rem; transform: translateX(-50%); font-size: 0.8rem; font-weight: 700; color: var(--text-muted); }
.temp-gauge__mark::after { content: ''; position: absolute; left: 50%; top: 1.15rem; width: 2px; height: 1.4rem; background: var(--text); opacity: 0.55; }
.temp-gauge__needle {
  position: absolute; top: -0.35rem; width: 0.4rem; height: 1.6rem; transform: translateX(-50%);
  background: var(--text); border-radius: 2px; box-shadow: 0 0 0 2px var(--surface);
}
/* Regionen als Kacheln, grob wie auf der Karte angeordnet. In der schmalen Seitenspalte (ab 1024 px) und auf dem Smartphone
   zwei Spalten, damit lange Namen wie „Lateinamerika“ ganz zu lesen sind; drei Spalten erst ab 24rem Kartenbreite. */
.world-panel { container: world-panel / inline-size; }
.world-tiles { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.4rem; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "na eu" "la af" "swa oap"; }
@container world-panel (min-width: 24rem) { .world-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "na eu oap" "la af swa"; } }
.world-tile { display: grid; gap: 0.1rem; padding: 0.45rem 0.5rem; border-radius: var(--radius-small); border: 2px solid transparent; font-size: 0.875rem; line-height: 1.25; background: var(--surface-sunken); }
.world-tile strong { font-size: 0.875rem; }
.world-tile strong, .world-tile .badge { min-width: 0; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: anywhere; }
.world-tile--na { grid-area: na; } .world-tile--eu { grid-area: eu; } .world-tile--oap { grid-area: oap; }
.world-tile--la { grid-area: la; } .world-tile--af { grid-area: af; } .world-tile--swa { grid-area: swa; }
.world-tile--good { border-left: 6px solid var(--forest); }
.world-tile--mid { border-left: 6px solid var(--wheat); }
.world-tile--bad { border-left: 6px solid var(--signal); }
.world-tile--me { border-color: var(--ocean-soft); }

/* Weltkarte mit Regionsmarkern (Konzept 11.1). Marker per CSSOM positioniert (layoutMaps), Beschriftung erst ab 34rem Kartenbreite. */
.world-map { position: relative; container-type: inline-size; --dot: 0.9rem; }
.world-map__image { display: block; border-radius: var(--radius-small); }
.world-map__markers { position: absolute; inset: 0; list-style: none; margin: 0; padding: 0; visibility: hidden; }
.world-map--ready .world-map__markers { visibility: visible; }
.map-marker { position: absolute; width: 0; height: 0; --state: var(--ocean-soft); }
.map-marker--good { --state: var(--forest); }
.map-marker--mid { --state: var(--wheat); }
.map-marker--bad { --state: var(--signal); }
.map-marker__dot {
  position: absolute; left: 0; top: 0; width: var(--dot); height: var(--dot); transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--state); border: 2px solid #FFFFFF;
  box-shadow: 0 0 0 1px rgba(14, 26, 37, 0.45), 0 2px 6px rgba(14, 26, 37, 0.45);
}
.map-marker--me, .map-marker--selected { --dot: 1.25rem; }
.map-marker--me .map-marker__dot, .map-marker--selected .map-marker__dot { box-shadow: 0 0 0 3px var(--ocean), 0 0 0 5px #FFFFFF, 0 2px 8px rgba(14, 26, 37, 0.5); }
.map-marker__label {
  display: none; position: absolute; left: 0; top: calc(var(--dot) / 2 + 0.35em); transform: translateX(-50%);
  width: max-content; max-width: 9.5em; gap: 0.05em; padding: 0.3em 0.55em; text-align: left; line-height: 1.2;
  border-radius: var(--radius-small); border-left: 0.3em solid var(--state);
  background: color-mix(in srgb, var(--surface) 92%, transparent); color: var(--text); box-shadow: var(--shadow);
}
.map-marker__label strong { font-family: var(--font-head); }
.map-marker__group { color: var(--text-muted); font-size: 0.85em; }
/* Beschriftung je Region so, dass sich die Nachbarn nicht überdecken: Lateinamerika und Europa links, Süd- und Westasien oben */
.map-marker--la .map-marker__label, .map-marker--eu .map-marker__label { left: auto; right: calc(var(--dot) / 2 + 0.4em); top: 0; transform: translateY(-50%); }
.map-marker--swa .map-marker__label { top: auto; bottom: calc(var(--dot) / 2 + 0.35em); }
@container (min-width: 34rem) { .map-marker__label { display: grid; } }
.world-map--mini { margin-top: 1rem; --dot: 0.75rem; }
.world-map--mini .map-marker--me { --dot: 0.95rem; }
/* Regionswahl im Einzelspiel: Punkt und Name sind ein Knopf mit großer Trefferfläche */
.world-map--choose { margin-bottom: 1rem; font-size: 0.95rem; }
.map-marker__button { position: absolute; left: 0; top: 0; width: 0; height: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.map-marker__button::before { content: ""; position: absolute; left: -1.4rem; top: -1.4rem; width: 2.8rem; height: 2.8rem; border-radius: 50%; }
.map-marker__button:hover .map-marker__dot { --dot: 1.25rem; }
.map-marker--selected { --state: var(--forest); z-index: 1; }
.map-marker--selected .map-marker__label { background: var(--ocean); color: #FFFFFF; }
/* Schmale Karte: nur die gewählte Region trägt ihren Namen, immer unter dem Punkt */
@container (max-width: 33.99rem) {
  .map-marker--selected .map-marker__label { display: grid; left: 0; right: auto; top: calc(var(--dot) / 2 + 0.35em); bottom: auto; transform: translateX(-50%); }
}

/* ---------- Klassenspiel: Timer, Lobby, Spielleitung, Beamer (Phase 6) ---------- */
.cluster--between { justify-content: space-between; align-items: flex-end; }
.code { font-family: var(--font-head); letter-spacing: 0.12em; }

.timer { display: inline-flex; gap: 0.4rem; align-items: baseline; padding: 0.2rem 0.65rem; border-radius: 999px; background: var(--surface-sunken); border: 1px solid var(--border); }
.timer[hidden] { display: none; }
.timer__label { font-size: 0.875rem; color: var(--text-muted); }
.timer__value { font-family: var(--font-head); font-variant-numeric: tabular-nums; font-size: 1.15rem; }
.timer--low { border-color: var(--wheat); background: color-mix(in srgb, var(--wheat) 18%, var(--surface)); }
.timer--over { border-color: var(--signal); color: var(--negative); }
.timer--paused .timer__value { color: var(--text-muted); }

.lobby-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.lobby-list__item { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.5rem 0.7rem; border-radius: var(--radius-small); background: var(--surface-sunken); border-left: 6px solid var(--border-strong); }
.lobby-list__item--human { border-left-color: var(--forest); }
.lobby-list__item--free { border-left-color: var(--border); color: var(--text-muted); }
.lobby-list__item--me { outline: 2px solid var(--ocean-soft); }

.control-grid { display: grid; gap: var(--gap); }
@media (min-width: 64rem) { .control-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } .control-grid > [data-phase-panel] { grid-column: 1 / -1; } }
.control-grid > * { min-width: 0; }
.control-grid .card { display: grid; gap: 0.9rem; align-content: start; }
.control-grid .card > * { min-width: 0; }
.control-danger summary { cursor: pointer; color: var(--text-muted); font-weight: 700; }
.control-danger[open] { display: grid; gap: 0.5rem; }
.join-box { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; }
.join-box__qr { width: 11rem; height: 11rem; background: #FFFFFF; border-radius: var(--radius-small); padding: 0.35rem; }
.join-box__url { font-weight: 700; word-break: break-all; margin: 0; }
.join-box__code { font-family: var(--font-head); font-size: 2.6rem; letter-spacing: 0.16em; margin: 0; line-height: 1; }
.status-dot { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--border-strong); vertical-align: middle; }
.status-dot--on { background: var(--positive); }
.select--small { min-height: 2.5rem; padding: 0.3rem 2rem 0.3rem 0.6rem; width: auto; }
.table--compact th, .table--compact td { padding: 0.35rem 0.5rem; font-size: 0.9rem; white-space: nowrap; }

/* Regionen und Gruppen: In schmalen Spalten (ab 1024 px neben dem Ereignis-Kasten, Smartphone) wird jede Zeile zur Karte,
   damit Knöpfe und Auswahl nicht aus der Karte ragen und niemand seitlich scrollen muss. */
.groups { container-type: inline-size; }
.row-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
@container (max-width: 35.99rem) {
  .groups-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .groups-table, .groups-table tbody { display: block; }
  /* Erste Zeile: Region und „Gesteuert von“; zweite Zeile (nach dem Umbruch durch ::after): Stand und Knöpfe */
  .groups-table tr { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 2px solid var(--border-strong); padding: 0.4rem 0; }
  .groups-table tr::after { content: ''; flex-basis: 100%; order: 1; }
  .groups-table tr:last-child { border-bottom: 0; }
  .groups-table th, .groups-table td { display: block; border-bottom: 0; padding-top: 0.2rem; padding-bottom: 0.2rem; }
  .groups-table th[scope="row"] { background: transparent; }
  .groups-table td[data-label="Stand"], .groups-table td:last-child { order: 2; }
  .groups-table td:empty { display: none; }
  .groups-table td[data-label]::before { content: attr(data-label) ": "; font-weight: 700; color: var(--text-muted); }
}

/* Beamer: keine Bedienelemente, große Schrift, ganze Fläche */
.page-beamer .site-footer, .page-beamer .skip-link { display: none; }
.page-beamer main { padding: 0; }
.beamer { min-height: 100vh; padding: clamp(1rem, 2.5vw, 2.5rem); display: grid; gap: clamp(0.75rem, 1.5vw, 1.5rem); align-content: start; font-size: clamp(1rem, 1.35vw, 1.6rem); }
.beamer__eyebrow { font-family: var(--font-head); text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-text); margin: 0; font-size: 0.85em; }
.beamer__note { color: var(--text-muted); }
.beamer-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; }
.beamer-header__round { font-family: var(--font-head); font-size: 2em; margin: 0; line-height: 1.1; }
.beamer .timer { font-size: 1.4em; padding: 0.3em 0.9em; }
.beamer .timer__value { font-size: 1.3em; }
.stripes--beamer { height: clamp(4rem, 11vh, 9rem); }
.beamer-grid { display: grid; gap: clamp(1rem, 2vw, 2rem); }
@media (min-width: 56rem) { .beamer-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.beamer-world { display: grid; gap: 1rem; align-content: start; }
.world-map--beamer { --dot: 1.25em; font-size: 0.8em; }
.world-map--beamer .world-map__image { border-radius: var(--radius); }
.beamer-temp { font-family: var(--font-head); font-size: 3.2em; line-height: 1; }
.beamer-temp__delta { font-size: 1.1em; color: var(--negative); font-weight: 700; }
.temp-gauge--beamer .temp-gauge__bar { height: 1.1rem; }
.beamer-regions { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.beamer-regions--map { grid-template-areas: "na eu oap" "la af swa"; }
.beamer-region { display: grid; gap: 0.15rem; padding: 0.7em 0.8em; border-radius: var(--radius); background: var(--surface); border: 2px solid var(--border); border-left-width: 10px; }
.beamer-region strong { font-family: var(--font-head); font-size: 1.15em; }
.beamer-region__group { color: var(--text-muted); font-size: 0.85em; }
.beamer-region--human { border-left-color: var(--forest); }
.beamer-region--bot { border-left-color: var(--border-strong); }
.beamer-region--free { border-left-color: var(--border); color: var(--text-muted); }
.beamer-side { display: grid; gap: 1rem; align-content: start; }
.beamer-side .news-item { font-size: 1em; }
/* Mehrere Eilmeldungen: kleines Bild neben dem Text, damit der Beamer nicht scrollen muss */
.beamer-side .news:has(.news-item + .news-item) .news-item { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; gap: 0.75rem; }
.beamer-side .news:has(.news-item + .news-item) .news-item p { font-size: 0.85em; }
.beamer-side .table { font-size: 1em; }
.beamer-lobby { display: grid; gap: 2rem; align-items: center; min-height: 85vh; }
@media (min-width: 56rem) { .beamer-lobby { grid-template-columns: minmax(0, 1.2fr) auto; } .beamer-lobby__groups { grid-column: 1 / -1; } }
.beamer-lobby__code { font-family: var(--font-head); font-size: clamp(4rem, 11vw, 11rem); letter-spacing: 0.14em; line-height: 1; margin: 0.2em 0; }
.beamer-lobby__url { font-size: 1.6em; font-weight: 700; margin: 0; word-break: break-all; }
.beamer-lobby__qr { width: clamp(14rem, 28vw, 26rem); height: auto; aspect-ratio: 1; background: #FFFFFF; padding: 0.75rem; border-radius: var(--radius); }
.beamer-final__title { font-size: 2.2em; margin: 0.4em 0 0.2em; }
.beamer-final__score, .beamer-final__scale { font-size: 1.4em; font-family: var(--font-head); }
.beamer-final__image { border-radius: var(--radius); }

.news { margin-top: 1rem; display: grid; gap: 0.75rem; }
.news h3 { margin: 0; color: var(--negative); }
.news-item { display: grid; gap: 0.5rem; }
.news-item p { margin: 0.25rem 0 0; }
.news-item__image { border-radius: var(--radius-small); }

.why-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.link-button { border: 0; background: none; padding: 0.4rem 0; color: inherit; font: inherit; text-align: left; text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }
.why-dialog ul { padding-left: 1.2rem; }

.charts-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.chart-card { margin: 0; }
.chart-card figcaption { font-weight: 700; margin-bottom: 0.25rem; }
.chart-box { position: relative; height: 11rem; }
.row--me th, .row--me td { background: var(--surface-sunken); font-weight: 700; }

.final-hero { display: grid; gap: 1rem; }
@media (min-width: 64rem) { .final-hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; } }
.final-hero__image { border-radius: var(--radius-small); }
.final-scale { font-family: var(--font-head); font-size: 1.8rem; font-weight: 800; color: var(--accent-text); margin-bottom: 0.25rem; }
.score-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.75rem; margin: 0 0 1rem; }
.score-list div { padding: 0.6rem 0.8rem; border: 1px solid var(--border); border-radius: var(--radius-small); }
.score-list dt { font-size: 0.875rem; font-weight: 700; color: var(--text-muted); }
.score-list dd { font-family: var(--font-head); font-size: 1.7rem; font-weight: 800; }
.scale { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.25rem; }
.scale li { padding: 0.35rem 0.6rem; border-radius: var(--radius-small); color: var(--text-muted); }
.scale__step--current { background: var(--surface-sunken); color: var(--text); font-weight: 700; border-left: 5px solid var(--accent); }

/* ---------- Rollenkarten (Ergebnis und Druckansicht) ---------- */
.role-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.role-result { padding: 0.8rem 1rem; border-radius: var(--radius); background: var(--surface-sunken); border-left: 6px solid var(--border-strong); }
.role-result p { margin: 0.35rem 0 0; }
.role-result--met { border-left-color: var(--forest); }
.role-result--missed { border-left-color: var(--signal); }
.role-result__status { font-weight: 700; }
.role-result--met .role-result__status { color: var(--positive); }
.role-result--missed .role-result__status { color: var(--negative); }
.print-page { margin-top: 2rem; }
.print-page__title { font-size: 1.4rem; margin-bottom: 0.75rem; }
.role-cards { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.role-card { display: grid; gap: 0.5rem; align-content: start; padding: 1rem; border: 2px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); }
.role-card p { margin: 0; }
.role-card__head { display: flex; gap: 0.75rem; align-items: center; }
.role-card__image { width: 4.5rem; flex: none; }
.img-placeholder.role-card__image { font-size: 0.65rem; padding: 0.2rem; }
.role-card__name { margin: 0; font-size: 1.15rem; }
.role-card__text { color: var(--text-muted); }
.role-card__secret { margin-top: 0.5rem; padding-top: 0.75rem; border-top: 2px dashed var(--border-strong); position: relative; }
.role-card__fold { position: absolute; top: -0.7rem; left: 0.75rem; padding: 0 0.4rem; background: var(--surface); font-size: 0.75rem; color: var(--text-muted); }

/* ---------- Debriefing und Modell ansehen (Phase 8) ---------- */
.h4 { font-family: var(--font-head); font-size: 1.05rem; margin: 1.25rem 0 0.5rem; }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.timeline__item { display: flex; flex-wrap: wrap; gap: 0.35rem 0.75rem; align-items: baseline; padding: 0.55rem 0.8rem; border-radius: var(--radius-small); background: var(--surface-sunken); border-left: 6px solid var(--border-strong); }
.timeline__item--tipping { border-left-color: var(--signal); }
.timeline__item--crisis { border-left-color: var(--wheat); }
.timeline__item--summit { border-left-color: var(--forest); }
.timeline__year { font-family: var(--font-head); font-weight: 700; min-width: 3rem; }
.question-list { margin: 0; padding-left: 1.5rem; display: grid; gap: 0.6rem; }
.question-list li { padding-left: 0.25rem; }
.effect-list { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.2rem; }
.model-view .table td, .model-view .table th { min-width: 10rem; }
@media print { .debrief .chart-box { break-inside: avoid; } .timeline__item, .question-list li { break-inside: avoid; } }

/* ---------- Druck ---------- */
@media print {
  body { background: #FFFFFF; color: #000000; }
  .topbar, .site-footer, .no-print, .skip-link { display: none !important; }
  .card { box-shadow: none; }
  main { padding: 0; }
  .print-page { margin: 0; break-after: page; }
  .print-page:last-of-type { break-after: auto; }
  .role-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5cm; }
  .role-card { break-inside: avoid; border-color: #666666; background: #FFFFFF; }
  .role-card__fold { background: #FFFFFF; }
}

/* ---------- Weniger Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   Wirkungsnetz (Konzept 10.1 Nr. 6) – public/assets/js/lib/network.js
   Farben nach Vorzeichen bewusst ohne Rot/Grün: „−“ heißt „mehr führt zu weniger“, nicht „schlecht“.
   Die Dicke der Linien setzt das Skript als stroke-width-Attribut, die Strichlängen per element.style.
   ========================================================================== */
kp-network { display: block; min-height: 4rem; }
.network { --net-pos: var(--ocean-soft); --net-neg: var(--wheat-dark); --net-node: var(--ocean); }
@media (prefers-color-scheme: dark) {
  .network { --net-pos: #7FB4E8; --net-neg: #E2B85A; --net-node: #A9BAC1; }
}
.network--pos { --net-c: var(--net-pos); }
.network--neg { --net-c: var(--net-neg); }

.network-sign {
  display: inline-flex; align-items: center; justify-content: center; width: 1.45em; height: 1.45em;
  border: 2px solid currentColor; border-radius: 50%; font-weight: 800; line-height: 1; vertical-align: -0.2em;
}
.network-sign--pos { color: var(--net-pos); }
.network-sign--neg { color: var(--net-neg); }
.network-meta { color: var(--text-muted); }
.network-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }

.network-fields { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-bottom: 0.75rem; }
.network-fields__label { font-weight: 700; margin-right: 0.25rem; }
.network-chip {
  border: 2px solid var(--border-strong); background: var(--surface); color: var(--text); border-radius: 999px;
  padding: 0.3rem 0.8rem; min-height: 2.5rem; font: inherit; cursor: pointer;
}
.network-chip:hover { border-color: var(--text); }
.network-chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #1D1A10; font-weight: 700; }

.network-figure { margin: 0 0 0.75rem; min-height: 12rem; }
.network-svg { display: block; width: 100%; height: auto; margin: 0 auto; overflow: visible; -webkit-tap-highlight-color: transparent; }
.network-backdrop { fill: transparent; }
.network-edge__line { stroke: var(--net-c); stroke-linecap: round; fill: none; }
.network-edge__head { fill: var(--net-c); }
.network-badge__dot { fill: var(--surface); stroke: var(--net-c); stroke-width: 1.5; }
.network-badge__text { fill: var(--net-c); font-weight: 800; }
.network-edge { opacity: 0.6; }
.network-svg.has-selection .network-edge { opacity: 0.07; }
.network-svg.has-selection .network-edge.is-related { opacity: 1; }
/* Auf schmalen Bildschirmen ohne Auswahl keine Vorzeichen: sie würden sich in der Mitte stapeln (Farbe und Legende zeigen sie) */
.network-svg--compact:not(.has-selection) .network-badge { display: none; }
.network-fedges, .network-center { display: none; }
.network-fedges.is-active, .network-center.is-active { display: inline; }
.network-center__box { fill: var(--accent); stroke: var(--accent-text); stroke-width: 1.5; }
.network-center__text { fill: #1D1A10; font-weight: 700; }

.network-node { cursor: pointer; outline: none; }
.network-node__hit { fill: transparent; }
.network-node__ring { fill: none; stroke: none; }
.network-node:focus-visible .network-node__ring { stroke: var(--focus); stroke-width: 3; }
.network-node__dot { fill: var(--surface); stroke: var(--net-node); stroke-width: 2.5; }
.network-node--global .network-node__dot { stroke-dasharray: 4 3; }
.network-node__label { fill: var(--text); font-weight: 700; }
.network-node:hover .network-node__dot { stroke-width: 4; }
.network-svg.has-selection .network-node { opacity: 0.4; }
.network-svg.has-selection .network-node.is-related, .network-svg.has-selection .network-node.is-selected { opacity: 1; }
.network-node.is-related .network-node__dot { stroke-width: 4; }
.network-node.is-selected .network-node__dot { fill: var(--accent); stroke: var(--accent-text); stroke-width: 3; }

.network-legend { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; color: var(--text-muted); }
.network-legend li { display: inline-flex; align-items: center; gap: 0.4rem; }
.network-legend .network-legend__wide { display: block; flex-basis: 100%; }
.network-legend__line { width: 2.5rem; height: 0.75rem; }
.network-legend__stroke { stroke: var(--text-muted); stroke-width: 2.5; stroke-linecap: round; }
.network-legend__stroke--d1 { stroke-dasharray: 8 5; }
.network-legend__stroke--d2 { stroke-dasharray: 0.1 6; }

.network-info { border-top: 1px solid var(--border); padding-top: 0.75rem; min-height: 3rem; }
.network-info h4, .network-all__heading { font-family: var(--font-head); font-size: 1.05rem; margin: 0.75rem 0 0.4rem; }
.network-info__grid { display: grid; gap: 0 1.5rem; }
@media (min-width: 48rem) { .network-info__grid { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); } }
.network-all { margin-top: 1rem; }
.network-all summary { cursor: pointer; font-weight: 700; padding: 0.5rem 0; }

/* ---------- Admin-Bereich (Phase 11) ---------- */
.admin-nav { display: flex; flex-wrap: wrap; gap: 0.25rem; border-bottom: 2px solid var(--border); }
.admin-nav a {
  padding: 0.55rem 0.9rem; margin-bottom: -2px; border-bottom: 3px solid transparent;
  font-weight: 700; color: var(--text-muted); text-decoration: none;
}
.admin-nav a:hover { color: var(--text); }
.admin-nav a[aria-current="page"] { color: var(--text); border-bottom-color: var(--accent); }
@media (min-width: 56rem) { .admin-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.admin-actions { gap: 0.4rem; }
.admin-code { font-size: 1.6rem; font-weight: 700; margin: 0; overflow-wrap: anywhere; }
.badge--active { border-color: var(--forest); color: var(--positive); margin-left: 0.35rem; }
.row--current > * { background: var(--surface-sunken); }

/* Einmal angezeigtes Passwort */
.secret { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.35rem 1rem; margin: 0; }
.secret dt { font-weight: 700; }
.secret__password { font-family: var(--font-head); font-size: 1.5rem; font-weight: 700; letter-spacing: 0.06em; overflow-wrap: anywhere; user-select: all; }

/* Tabellen, die auf schmalen Bildschirmen zu Karten werden */
@media (max-width: 47.99rem) {
  .table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .table--stack, .table--stack tbody, .table--stack tr, .table--stack th, .table--stack td { display: block; width: 100%; }
  .table--stack tr { border-bottom: 2px solid var(--border-strong); padding: 0.4rem 0; }
  .table--stack tr:last-child { border-bottom: 0; }
  .table--stack th[scope="row"] { background: transparent; border-bottom: 0; }
  .table--stack td { border-bottom: 0; padding-top: 0.2rem; padding-bottom: 0.2rem; }
  .table--stack td.num { text-align: left; }
  .table--stack td[data-label]::before { content: attr(data-label) ": "; font-weight: 700; color: var(--text-muted); }
  .table--stack td.admin-actions::before { content: none; }
  .table--stack td.admin-actions { padding-top: 0.5rem; }
}

/* Prüfliste (Systemprüfung, Balancing-Kurzprüfung) */
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.check {
  display: grid; grid-template-columns: 1.75rem minmax(0, 1fr) auto; gap: 0.15rem 0.6rem; align-items: baseline;
  padding: 0.6rem 0.75rem; border-radius: var(--radius-small); background: var(--surface-sunken); border-left: 5px solid var(--border-strong);
}
.check__icon { font-weight: 800; font-size: 1.15rem; }
.check__label { font-weight: 700; }
.check__status { font-weight: 700; white-space: nowrap; }
.check__hint { grid-column: 2 / -1; color: var(--text-muted); }
.check--ok { border-left-color: var(--forest); }
.check--ok .check__icon, .check--ok .check__status { color: var(--positive); }
.check--fehler { border-left-color: var(--signal); }
.check--fehler .check__icon, .check--fehler .check__status { color: var(--negative); }
@media (max-width: 30rem) { .check { grid-template-columns: 1.5rem minmax(0, 1fr); } .check__status { grid-column: 2; } }

/* Modelleditor */
.param-group { border: 1px solid var(--border); border-radius: var(--radius-small); padding: 0 0.9rem; background: var(--surface); }
.param-group > summary { cursor: pointer; padding: 0.75rem 0; display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; align-items: baseline; }
.param-group[open] { padding-bottom: 0.9rem; }
.param-group[open] > summary { border-bottom: 1px solid var(--border); margin-bottom: 0.75rem; }
.param-group__title { font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; }
.param-group .note { margin-bottom: 0.5rem; }
.param-grid { display: grid; gap: 0.75rem 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
.param { display: grid; gap: 0.25rem; align-content: start; min-width: 0; }
.param label { font-weight: 700; font-size: 0.95rem; overflow-wrap: anywhere; }
.param code { font-size: 0.9rem; }
.input--num { min-height: 2.6rem; padding: 0.35rem 0.6rem; font-variant-numeric: tabular-nums; }
.param--changed .input { border-color: var(--wheat); background: color-mix(in srgb, var(--wheat) 10%, var(--surface)); }
.param--error .input { border-color: var(--signal); }
.effect-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; }
.effect-row { display: grid; grid-template-columns: minmax(0, 1fr) 9rem 11rem; gap: 0.5rem 1rem; align-items: start; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border); }
.effect-row:last-child { border-bottom: 0; padding-bottom: 0; }
.effect-row__label { display: grid; font-weight: 700; padding-top: 1.6rem; }
.effect-row__label .note { font-weight: 400; margin: 0; }
@media (max-width: 40rem) { .effect-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .effect-row__label { grid-column: 1 / -1; padding-top: 0; } }
.error-links { margin: 0.5rem 0 0; padding-left: 1.25rem; }
.changes { margin: 0; padding-left: 1.25rem; display: grid; gap: 0.25rem; }
.changes code { overflow-wrap: anywhere; }
.admin-submit { flex-wrap: wrap; }
.admin-submit .button { flex: 1 1 14rem; }
/* Angesprungene oder fokussierte Felder nicht hinter der festen Knopfleiste */
html:has(.admin-submit) { scroll-padding-bottom: 9rem; }

/* ==========================================================================
   „Nach oben“-Knopf (alle Seiten außer Beamer) – public/assets/js/lib/to-top.js
   Erscheint nach etwa einer Bildschirmhöhe Scrollen. Liegt eine Knopfleiste (.submit-bar) unten,
   hebt ihn das Skript per --to-top-lift darüber. Ohne JavaScript bleibt er verborgen.
   ========================================================================== */
.to-top {
  position: fixed; z-index: 5;
  right: calc(1rem + env(safe-area-inset-right, 0px));
  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  width: 3rem; height: 3rem; padding: 0;
  display: grid; place-items: center;
  border: 2px solid var(--ocean); border-radius: 50%;
  background: var(--ocean); color: #FFFFFF;
  box-shadow: 0 0 0 1px rgba(251, 252, 251, 0.7), 0 4px 14px -4px rgba(14, 26, 37, 0.55);
  cursor: pointer;
  opacity: 0; visibility: hidden;
  transform: translateY(calc(-1 * var(--to-top-lift, 0px)));
  transition: opacity 0.2s ease, visibility 0.2s, background-color 0.15s ease, border-color 0.15s ease;
}
.to-top[hidden] { display: none; }
.to-top--visible { opacity: 1; visibility: visible; }
.to-top:hover { background: var(--ocean-soft); border-color: var(--ocean-soft); }
.to-top:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 50%; }
.to-top svg { width: 1.5rem; height: 1.5rem; }
@media (min-width: 64rem) {
  .to-top { right: calc(1.5rem + env(safe-area-inset-right, 0px)); bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-color-scheme: dark) {
  .to-top { background: var(--surface); border-color: #7FB4E8; color: #7FB4E8; box-shadow: 0 4px 14px -4px rgba(0, 0, 0, 0.8); }
  .to-top:hover { background: #1C2D3E; border-color: #A5CAEE; color: #A5CAEE; }
}
@media print { .to-top { display: none; } }
/* Ziel des Knopfs für den Tastaturfokus; kein Bedienelement, deshalb ohne Fokusrahmen */
.topbar[tabindex="-1"]:focus { outline: none; }

/* ==========================================================================
   Glossar – src/View/templates/glossary.php, public/assets/js/glossary.js
   Buchstaben-Navigation (ab 48rem beim Scrollen oben), Suchfeld nur mit JavaScript, Begriffe als Karten.
   --glossary-offset (Höhe der Buchstabenleiste) setzt das Skript; Sprungziele landen darunter.
   ========================================================================== */
.glossary { --glossary-offset: 7rem; }
.glossary-tools { display: grid; gap: 1rem; margin-bottom: 1rem; }
.glossary-tools__row { display: grid; gap: 1rem; align-items: end; }
@media (min-width: 48rem) { .glossary-tools__row { grid-template-columns: minmax(0, 26rem) auto; justify-content: space-between; } }
.glossary-search { margin: 0; }
.glossary-search[hidden] { display: none; }
.glossary-status { margin: 0; font-weight: 700; color: var(--text-muted); }
.glossary-status:empty { display: none; }

.glossary-level { display: grid; gap: 0.35rem; }
.glossary-level__links { display: flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.25rem; width: fit-content; max-width: 100%; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); }
.glossary-level__links a {
  display: grid; align-content: center; min-height: 3rem; padding: 0.3rem 0.9rem; line-height: 1.2;
  border-radius: var(--radius-small); text-decoration: none; font-weight: 700;
}
.glossary-level__links a:hover { background: var(--surface-sunken); }
.glossary-level__stage { font-weight: 400; color: var(--text-muted); }
.glossary-level__links a[aria-current="page"] { background: var(--ocean); color: #FFFFFF; }
.glossary-level__links a[aria-current="page"] .glossary-level__stage { color: inherit; }

.glossary-letters { margin: 0 -0.25rem 0.5rem; padding: 0.5rem 0.25rem; background: var(--bg); }
.glossary-letters ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.glossary-letters a {
  display: grid; place-items: center; min-width: 2.6rem; height: 2.6rem; padding: 0 0.4rem;
  border: 1px solid var(--border-strong); border-radius: var(--radius-small); background: var(--surface);
  font-family: var(--font-head); font-weight: 700; font-size: 1.1rem; text-decoration: none;
}
.glossary-letters a:hover { border-color: var(--text); background: var(--surface-sunken); }
.glossary-letters a[aria-disabled="true"] { opacity: 0.35; cursor: default; border-style: dashed; }
@media (min-width: 48rem) {
  .glossary-letters { position: sticky; top: var(--topbar-offset); z-index: 2; border-bottom: 1px solid var(--border); }
}

.glossary-letter { margin-top: 1.75rem; scroll-margin-top: 1rem; }
.glossary-letter[hidden] { display: none; }
.glossary-letter__title { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 0.9rem; font-size: 1.5rem; }
.glossary-letter__mark {
  display: grid; place-items: center; width: 2.6rem; height: 2.6rem; flex: none;
  border-radius: var(--radius-small); background: var(--ocean); color: #FFFFFF;
}
.glossary-letter__title::after { content: ""; flex: 1; height: 1px; background: var(--border-strong); }

.glossary-grid { display: grid; gap: 0.9rem; margin: 0; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }
.glossary-term {
  display: flex; flex-direction: column; gap: 0.45rem; padding: 1rem 1.1rem; scroll-margin-top: 1rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.glossary-term[hidden] { display: none; }
.glossary-term:target { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent), var(--shadow); }
.glossary-term__name { font-family: var(--font-head); font-size: 1.2rem; font-weight: 700; line-height: 1.2; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: anywhere; }
.glossary-term__text { display: flex; flex-direction: column; flex: 1; gap: 0.75rem; }
.glossary-term__text p { margin: 0; }
.glossary-refs { margin-top: auto; padding-top: 0.65rem; border-top: 1px dashed var(--border); display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.glossary-refs__label { color: var(--text-muted); margin-right: 0.15rem; }
.glossary-refs ul { display: contents; list-style: none; }
.glossary-refs a {
  display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0.15rem 0.7rem;
  border: 1px solid var(--border-strong); border-radius: 999px; text-decoration: none; line-height: 1.2;
}
.glossary-refs a:hover { border-color: var(--text); background: var(--surface-sunken); text-decoration: underline; }

@media (min-width: 48rem) {
  .glossary-letter, .glossary-term { scroll-margin-top: calc(var(--glossary-offset) + 1rem); }
}
@media (prefers-color-scheme: dark) {
  .glossary-level__links a[aria-current="page"], .glossary-letter__mark { background: #7FB4E8; color: #0E1A25; }
}
@media print {
  .glossary-tools, .glossary-letters { display: none; }
  .glossary-term { box-shadow: none; break-inside: avoid; }
}

/* ---------- Impressum und Datenschutz: lesbare Zeilenlänge ---------- */
.legal { max-width: 52rem; }
.legal h2 { margin-top: 2rem; }
.legal h3 { margin-top: 1.5rem; }
.legal ul { padding-left: 1.25rem; }
.legal li + li { margin-top: 0.4rem; }

/* ---------- Unterrichtsmaterial (/unterrichtsmaterial) ----------
 * Vorlage teaching.php, Texte in data/content/teaching.json. Kopf mit Klimastreifen, darunter auf breiten Bildschirmen das
 * Inhaltsverzeichnis klebend links, auf schmalen als Knöpfe über dem Text. Jeder Abschnitt ist eine Karte. */
.teaching-hero {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 2rem 1.25rem 1.5rem;
}
@media (min-width: 48rem) { .teaching-hero { padding: 2.75rem 2.5rem 2.25rem; } }
.teaching-hero h1 { max-width: 22em; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
/* „Schon ein Konto? Anmelden“ für wiederkehrende Lehrkräfte: auf dem Handy über der Überschrift, ab Tablet oben rechts */
.teaching-signin { margin: 0 0 0.85rem; font-size: 0.95rem; color: var(--text-muted, inherit); }
.teaching-signin a { font-weight: 700; }
@media (min-width: 48rem) { .teaching-signin { text-align: right; margin-bottom: -0.25rem; } }
.teaching-hero .lead { max-width: 46rem; }
/* Klimastreifen als Schmuckband von kühl nach warm (keine Messwerte) */
.teaching-stripes {
  position: absolute; left: 0; right: 0; top: 0; height: 0.5rem;
  background: linear-gradient(90deg,
    #08306B 0 8.33%, #08519C 0 16.67%, #2171B5 0 25%, #4292C6 0 33.33%, #6BAED6 0 41.67%, #C6DBEF 0 50%,
    #FCBBA1 0 58.33%, #FC9272 0 66.67%, #FB6A4A 0 75%, #EF3B2C 0 83.33%, #CB181D 0 91.67%, #67000D 0);
}
.teaching-facts { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.teaching-facts li {
  display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.85rem;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface-sunken); font-weight: 700;
}
.teaching-facts li::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--positive); }

.teaching-layout { margin-top: 1.5rem; display: grid; gap: 1.5rem; }
.teaching-toc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.1rem; }
.teaching-toc__title {
  margin: 0 0 0.6rem; font-size: 0.875rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text);
}
.teaching-toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.teaching-toc a {
  display: inline-flex; align-items: center; min-height: 2.25rem; padding: 0.2rem 0.75rem;
  border: 1px solid var(--border-strong); border-radius: 999px; text-decoration: none; line-height: 1.2;
}
.teaching-toc a:hover { border-color: var(--text); background: var(--surface-sunken); text-decoration: underline; }
@media (min-width: 64rem) {
  .teaching-layout { grid-template-columns: 15rem minmax(0, 1fr); gap: 2rem; align-items: start; }
  .teaching-toc { position: sticky; top: calc(var(--topbar-offset) + 1.25rem); }
  .teaching-toc ol { display: grid; gap: 0.1rem; }
  .teaching-toc a { display: block; min-height: 0; padding: 0.4rem 0.6rem; border: 0; border-radius: var(--radius-small); }
}

.teaching-body { min-width: 0; display: grid; gap: 1.25rem; }
.teaching-section {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 1.5rem 1.25rem; scroll-margin-top: 1rem;
}
@media (min-width: 48rem) { .teaching-section { padding: 2rem 2.25rem; } }
.teaching-section > :last-child { margin-bottom: 0; }
.teaching-section > p, .teaching-list { max-width: 46rem; }
.teaching-section h3 { margin-top: 1.75rem; }
.teaching-closing { border-top: 4px solid var(--accent); }

.teaching-list { margin: 0 0 1rem; padding-left: 1.25rem; }
.teaching-list li + li { margin-top: 0.6rem; }
.teaching-list--steps { list-style: none; padding: 0; counter-reset: step; }
.teaching-list--steps li { position: relative; min-height: 2rem; padding-left: 2.75rem; counter-increment: step; }
.teaching-list--steps li::before {
  content: counter(step); position: absolute; left: 0; top: -0.1rem; width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--text); color: var(--surface); font-weight: 700;
}

.teaching-points { list-style: none; margin: 0 0 1.25rem; padding: 0; display: grid; gap: 0.75rem; }
@media (min-width: 40rem) { .teaching-points { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.teaching-point { padding: 1rem 1.1rem; border-left: 4px solid #2171B5; border-radius: var(--radius-small); background: var(--surface-sunken); }
.teaching-point:nth-child(2) { border-left-color: #6BAED6; }
.teaching-point:nth-child(3) { border-left-color: #FC9272; }
.teaching-point:nth-child(4) { border-left-color: #CB181D; }
.teaching-point p { margin: 0; }
.teaching-point .teaching-point__title { margin-bottom: 0.3rem; font-family: var(--font-head); font-size: 1.15rem; font-weight: 700; line-height: 1.2; }
.teaching-points--numbered { counter-reset: point; }
.teaching-points--numbered .teaching-point { counter-increment: point; }
.teaching-points--numbered .teaching-point__title::before { content: counter(point) ". "; color: var(--accent-text); }

.teaching-schedule tbody th, .teaching-table tbody th { background: none; }
.teaching-schedule__time { white-space: nowrap; font-weight: 700; color: var(--accent-text); }
/* Auf dem Handy wird jede Zeile des Ablaufs ein Block: Zeit und Phase oben, Beschreibung darunter */
@media (max-width: 40rem) {
  .teaching-schedule thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
  .teaching-schedule tr { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.75rem; padding: 0.75rem; border-bottom: 1px solid var(--border); }
  .teaching-schedule tbody tr:last-child { border-bottom: 0; }
  .teaching-schedule th, .teaching-schedule td { padding: 0; border: 0; }
  .teaching-schedule td:last-child { grid-column: 1 / -1; }
}

.teaching-cards { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.75rem; }
@media (min-width: 40rem) { .teaching-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 56rem) { .teaching-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.teaching-card { padding: 1rem 1.1rem; border-top: 4px solid var(--ocean-soft); border-radius: var(--radius-small); background: var(--surface-sunken); }
.teaching-section .teaching-card h3 { margin: 0 0 0.6rem; }
.teaching-card__meta { display: block; margin-top: 0.2rem; font-family: var(--font-text); font-size: 1rem; color: var(--accent-text); }
.teaching-card__facts { max-width: 22rem; margin: 0 0 0.75rem; }
.teaching-card__facts div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 0.75rem; padding: 0.3rem 0; border-bottom: 1px dashed var(--border); }
.teaching-card__facts dt { color: var(--text-muted); }
.teaching-card__facts dd { font-weight: 700; }
.teaching-card p { margin: 0; }
@media (prefers-color-scheme: dark) { .teaching-card { border-top-color: #7FB4E8; } }

.teaching-tip {
  margin: 1.25rem 0 0; padding: 1rem 1.15rem; border-left: 4px solid var(--accent); border-radius: var(--radius-small);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}
.teaching-tip p { margin: 0; max-width: 46rem; }
.teaching-tip .teaching-tip__title { margin-bottom: 0.3rem; font-weight: 700; }

.teaching-faq { display: grid; gap: 1rem; }
.teaching-faq__item + .teaching-faq__item { padding-top: 1rem; border-top: 1px solid var(--border); }
.teaching-section .teaching-faq__item h3 { margin: 0 0 0.35rem; font-size: 1.1rem; }
.teaching-faq__item p { margin: 0; max-width: 46rem; }

@media print {
  .teaching-toc, .teaching .cluster { display: none; }
  .teaching-hero, .teaching-section { box-shadow: none; }
  .teaching-layout { display: block; }
  .teaching-section { margin-top: 1rem; }
  .teaching-point, .teaching-card, .teaching-faq__item { break-inside: avoid; }
}