/* Graal-Müritz-Quiz — Frontend. Nur Tokens (I-09), kein Inline-CSS im Markup (OE-10).
   Kanon-Bausteine (gm-subpage, gm-stats, gm-features/gm-region-card, gm-datenliste) kommen aus gm-content.css;
   hier stehen nur die quiz-eigenen Ergänzungen: Unternavigation, Datentabelle, Tafel-Kicker, Bewegung, Verlaufslinie. */

/* DEMO-Kennzeichnung (bis 03.10.2026): Sonne als Signalfläche der Bestandspalette, Tinte als Text */
.quiz-demo { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; margin: 0 0 var(--gm-space-md); padding: .7rem 1rem;
  border-radius: var(--gm-radius); background: var(--gm-sun); color: var(--gm-ink); font-size: var(--gm-fs-kompakt); line-height: 1.45; }
.quiz-demo strong { font-weight: var(--gm-fw-label); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.gm-prose.quiz-page .quiz-demo a, .quiz-saal .quiz-demo a { color: var(--gm-ink); text-decoration: underline; text-underline-offset: .15em; }
.quiz-saal .quiz-demo { align-self: flex-start; margin-bottom: clamp(1rem, 3vh, 2rem); font-size: clamp(.95rem, 1.4vw, 1.25rem); }

/* ───────────── Bühne: Kopf aller Quiz-Ansichten in der Saal-Anmutung (Tinte, Seeglühen, Sonne als Akzent) ───────────── */
.quiz-buehne { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 0; margin: 0 0 var(--gm-space-lg);
  border-radius: var(--gm-radius); background: var(--gm-ink); color: var(--gm-white); font-variant-numeric: tabular-nums lining-nums; }
.quiz-buehne::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 75% 55% at 50% 108%, color-mix(in srgb, var(--gm-sea) 30%, transparent), transparent 72%); }
.quiz-buehne-text { padding: clamp(1.5rem, 4vw, 3rem); align-self: center; }
.quiz-buehne-marke { margin: 0 0 .6rem; font-size: var(--gm-fs-klein); letter-spacing: .14em; text-transform: uppercase; font-weight: var(--gm-fw-label); }
.gm-prose.quiz-page .quiz-buehne .quiz-buehne-text .quiz-buehne-marke a { color: var(--gm-sun); text-decoration: none; }
/* !important: die gm.css-Hover-Kette a:not(…)×9 (Spezifität 0,9,1) ist per Klassen nicht zu schlagen (siehe css-reihenfolge-und-spezifitaet) */
.gm-prose.quiz-page .quiz-buehne .quiz-buehne-text .quiz-buehne-marke a:hover, .gm-prose.quiz-page .quiz-buehne .quiz-buehne-text .quiz-buehne-marke a:focus-visible { color: var(--gm-sun-light) !important; text-decoration: underline; }
.gm-prose.quiz-page .quiz-buehne .gm-usp-title { color: var(--gm-white); margin-top: 0; font-size: clamp(2.2rem, 1.4rem + 3vw, 3.4rem); letter-spacing: -.01em; }
.gm-prose.quiz-page .quiz-buehne .gm-usp-lead, .gm-prose.quiz-page .quiz-buehne-master { color: color-mix(in srgb, var(--gm-white) 82%, transparent); max-width: 46ch; }
.gm-prose.quiz-page .quiz-buehne .gm-usp-lead { margin-bottom: 0; }
.quiz-buehne-master { margin: var(--gm-space-md) 0 0; font-size: var(--gm-fs-kompakt); line-height: 1.5; }
/* 5 Klassen: schlägt die .gm-prose-Linkkette (4 Klassen) */
.gm-prose.quiz-page .quiz-buehne .quiz-buehne-text .quiz-buehne-master a { color: var(--gm-white); white-space: nowrap; font-weight: var(--gm-fw-betont); text-decoration: underline; text-decoration-color: var(--gm-sun); text-underline-offset: .18em; }
.gm-prose.quiz-page .quiz-buehne .quiz-buehne-text .quiz-buehne-master a:hover, .gm-prose.quiz-page .quiz-buehne .quiz-buehne-text .quiz-buehne-master a:focus-visible { color: var(--gm-sun-light) !important; text-decoration-color: var(--gm-sun-light); }
.quiz-buehne a:focus-visible { outline: var(--gm-focus-width) solid var(--gm-sun); outline-offset: var(--gm-focus-offset); }
/* Foto: bündig am Rand, mit Maske in die Tinte verlaufend – Mobil oben (nach unten), Desktop rechts (nach links) */
.quiz-buehne-foto { margin: 0; order: -1; aspect-ratio: 16 / 9; }
.quiz-buehne-foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 68% 30%;
  -webkit-mask-image: linear-gradient(to bottom, black 55%, transparent 100%); mask-image: linear-gradient(to bottom, black 55%, transparent 100%); }
@media (min-width: 768px) {
  .quiz-buehne--bild { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
  .quiz-buehne-foto { order: 0; aspect-ratio: auto; min-height: 100%; }
  .quiz-buehne-foto img { -webkit-mask-image: linear-gradient(to right, transparent, black 42%); mask-image: linear-gradient(to right, transparent, black 42%); }
}
/* Statband in der Bühne: dieselbe Bauform (.gm-stats), in der Saal-Tafel-Anmutung */
.quiz-buehne .gm-stats { margin: var(--gm-space-lg) 0 0; gap: var(--gm-space-sm); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.quiz-buehne .gm-stat { text-align: left; padding: var(--gm-space-md) var(--gm-space-sm);
  background: color-mix(in srgb, var(--gm-white) 6%, transparent); border: 1px solid color-mix(in srgb, var(--gm-white) 22%, transparent); }
.quiz-buehne .gm-stat-num { color: var(--gm-white); font-size: clamp(1.7rem, 1.1rem + 1.6vw, 2.2rem); }
.quiz-buehne .gm-stat-num small { display: block; margin-top: .2rem; color: var(--gm-sun); }
.quiz-buehne .gm-stat-label { text-wrap: balance; }
.quiz-buehne .gm-stat-label { color: color-mix(in srgb, var(--gm-white) 82%, transparent); }
@media (prefers-contrast: more) { .quiz-buehne::before { content: none; } .quiz-buehne-foto img { -webkit-mask-image: none; mask-image: none; } }

/* ───────────── Unternavigation: Segmented Control (Bauform wie ilgm .gmilgm-seg), schwebt sticky unterm gm-Header ───────────── */
.quiz-nav { position: sticky; top: 6.25rem; /* gm-Header gescrollt (.is-scrolled) endet bei 93 px, gemessen 18.09.2026 */ z-index: 20; margin: 0 0 var(--gm-space-xl); scroll-margin-top: 6.25rem; /* #quiz-nav-Anker: Klick auf einen Reiter springt zur Nav statt zum Seitenanfang */ }
.quiz-nav ul { list-style: none; display: flex; gap: .15rem; padding: .32rem; margin: 0; overflow-x: auto; scrollbar-width: none;
  border: 1px solid var(--gm-border); border-radius: var(--gm-radius); box-shadow: var(--gm-shadow-card);
  background: color-mix(in srgb, var(--gm-flaeche-ruhig) 78%, transparent); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); }
.quiz-nav ul::-webkit-scrollbar { display: none; }
.quiz-nav li { flex: 1 0 auto; }
.quiz-nav .btn { display: block; width: 100%; padding: .6rem 1.1rem; border: 0; border-radius: var(--gm-radius); background: transparent;
  font-size: var(--gm-fs-kompakt); font-weight: var(--gm-fw-betont); letter-spacing: .01em; color: var(--gm-text); white-space: nowrap; text-decoration: none;
  transition: color var(--gm-dur-fast), background-color var(--gm-dur-fast), transform var(--gm-dur-press) ease-out; }
.quiz-nav .btn:hover { color: var(--gm-primary); background: color-mix(in srgb, var(--gm-white) 55%, transparent); }
.quiz-nav .btn:active { transform: scale(.96); }
.quiz-nav .btn.active, .quiz-nav .btn.active:hover { color: var(--gm-primary); background: var(--gm-white); box-shadow: var(--gm-shadow-card); }
.quiz-nav .btn:focus-visible { outline: var(--gm-focus-width) solid var(--gm-sea); outline-offset: var(--gm-focus-offset); box-shadow: none; }
@media (prefers-reduced-transparency: reduce) { .quiz-nav ul { background: var(--gm-white); -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (prefers-contrast: more) { .quiz-nav ul { background: var(--gm-white); border-color: var(--gm-primary); } }
@media (prefers-reduced-motion: reduce) { .quiz-nav .btn { transition: none; } .quiz-nav .btn:active { transform: none; } }

.quiz-blaettern { display: flex; justify-content: space-between; gap: var(--gm-space-md); margin: 0 0 var(--gm-space-lg); font-size: var(--gm-fs-kompakt); }
.quiz-saisonwahl { text-align: center; }
.quiz-saisonwahl a, .quiz-saisonwahl strong { margin: 0 .25rem; }

/* Datentabelle (einmal, für alle Quiz-Tabellen): caption, th scope, ab 360 px in einem horizontal rollbaren Rahmen */
.quiz-tabellenrahmen { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 var(--gm-space-xl); border: 1px solid var(--gm-border); border-radius: var(--gm-radius); }
.quiz-tabellenrahmen:focus-visible { outline: var(--gm-focus-width) solid var(--gm-primary); outline-offset: var(--gm-focus-offset); }
.gm-table { width: 100%; border-collapse: collapse; font-size: var(--gm-fs-kompakt); background: var(--gm-flaeche-grund); font-variant-numeric: tabular-nums lining-nums; }
.gm-table caption { caption-side: top; text-align: left; padding: var(--gm-space-sm) var(--gm-space-md); color: var(--gm-text); font-size: var(--gm-fs-klein); background: var(--gm-flaeche-ruhig); }
.gm-table th, .gm-table td { padding: .55rem var(--gm-space-md); text-align: left; vertical-align: top; border-top: 1px solid var(--gm-border); }
.gm-table thead th { border-top: 0; font-size: var(--gm-fs-klein); font-weight: var(--gm-fw-label); letter-spacing: .04em; text-transform: uppercase; color: var(--gm-primary); background: var(--gm-flaeche-ruhig); white-space: nowrap; }
.gm-table .num { text-align: right; }
.gm-table td.quiz-platz { font-family: var(--gm-font-head); font-weight: var(--gm-fw-titel); font-size: 1.1rem; color: var(--gm-primary); width: 3.5rem; }
.gm-table tr.quiz-rang1 td { background: var(--gm-flaeche-signal); }
.gm-table a { color: var(--gm-primary); }
.gm-table small { color: var(--gm-text); }

.quiz-flag { display: inline-block; margin-left: .35rem; padding: .05rem .45rem; border-radius: var(--gm-radius); background: var(--gm-flaeche-ruhig); color: var(--gm-primary); font-size: var(--gm-fs-klein); font-weight: var(--gm-fw-betont); vertical-align: middle; }
.quiz-flag--offen { background: var(--gm-flaeche-signal); }

.quiz-bew { font-weight: var(--gm-fw-betont); white-space: nowrap; }
.quiz-bew--auf { color: var(--gm-green-dark); }
.quiz-bew--ab { color: var(--gm-primary); }
.quiz-bew--gleich, .quiz-bew--neu { color: var(--gm-text); font-weight: var(--gm-fw-text); }

.quiz-pzellen { display: inline-flex; flex-wrap: nowrap; gap: .3rem; white-space: nowrap; }
.quiz-pz { display: inline-block; min-width: 2.1rem; padding: .1rem .35rem; text-align: center; border-radius: var(--gm-radius); background: var(--gm-flaeche-ruhig); color: var(--gm-primary); }
.quiz-pz--gestrichen { color: var(--gm-text); opacity: .7; }
.quiz-pz--fehlt { color: var(--gm-text); background: transparent; }

/* Tafeln (gm-region-card) */
.quiz-tafel-kicker { font-size: .72rem; font-weight: var(--gm-fw-label); letter-spacing: .08em; text-transform: uppercase; color: var(--gm-primary); /* WCAG 1.4.3: sea 3,73:1 reicht für kleine Versalien nicht */ margin: 0 0 var(--gm-space-xs) !important; font-variant-numeric: lining-nums; }
.quiz-tafel .gm-region-h a { color: inherit; text-decoration: none; }
.quiz-tafel .gm-region-h a:hover, .quiz-tafel .gm-region-h a:focus-visible { text-decoration: underline; }
.quiz-tafel-link { display: block; font-family: var(--gm-font-body); font-size: var(--gm-fs-klein); font-weight: var(--gm-fw-betont); letter-spacing: .04em; margin-top: .25rem; }
.quiz-tafel--gross { background: var(--gm-flaeche-marke-verlauf); color: var(--gm-text-invers); }
.quiz-tafel--gross .quiz-tafel-kicker { color: var(--gm-sun); }
/* 5 Klassen: schlägt die gm.css/gm-content.css-Linkkette .gm-prose a:not(.btn):not(.gmbtn):not(…) (4 Klassen) in allen Zuständen */
.gm-prose.quiz-page .quiz-tafel.quiz-tafel--gross .gm-region-h, .gm-prose.quiz-page .quiz-tafel.quiz-tafel--gross p, .quiz-tafel--gross .gm-region-ico { color: var(--gm-white); }
.gm-prose.quiz-page .quiz-tafel.quiz-tafel--gross .gm-region-h a, .gm-prose.quiz-page .quiz-tafel.quiz-tafel--gross .gm-region-h a:hover,
.gm-prose.quiz-page .quiz-tafel.quiz-tafel--gross .gm-region-h a:focus, .gm-prose.quiz-page .quiz-tafel.quiz-tafel--gross .gm-region-h a:focus-visible { color: var(--gm-white); }
.gm-prose.quiz-page .quiz-tafel.quiz-tafel--gross .quiz-tafel-link, .gm-prose.quiz-page .quiz-tafel.quiz-tafel--gross .quiz-tafel-link:hover { color: var(--gm-sun-light); }
.quiz-tafel--gross a:focus-visible { outline-color: var(--gm-sun); }
.quiz-ortssieger { grid-template-columns: 1fr; }
.quiz-podest .quiz-tafel--gross { grid-column: 1 / -1; }

.quiz-hinweis { font-size: var(--gm-fs-kompakt); color: var(--gm-text); }
.quiz-korrekturen li { margin-bottom: var(--gm-space-xs); line-height: 1.6; }

/* Verlaufslinie (Steckbrief) */
.quiz-verlauf { margin: 0 0 var(--gm-space-xl); }
.quiz-verlauf svg { width: 100%; height: auto; display: block; background: var(--gm-flaeche-ruhig); border-radius: var(--gm-radius); }
.quiz-verlauf-grid { stroke: var(--gm-border); stroke-width: 1; }
.quiz-verlauf-ach { fill: var(--gm-text); font-family: var(--gm-font-body); font-size: 12px; }
.quiz-verlauf-linie { fill: none; stroke: var(--gm-primary); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.quiz-verlauf-punkt { fill: var(--gm-white); stroke: var(--gm-primary); stroke-width: 2.5; }
.quiz-verlauf-punkt--sieg { fill: var(--gm-primary); }
.quiz-verlauf figcaption { font-size: var(--gm-fs-klein); color: var(--gm-text); margin-top: var(--gm-space-xs); }

@media (max-width: 575px) {
  .gm-table th, .gm-table td { padding: .45rem .6rem; }
}

/* ───────────── Saalmodus (Beamer): Theme-Gerüst aus, Tinte-Fläche, große Schrift ───────────── */
body:has(.quiz-saal) header.gm-header, body:has(.quiz-saal) aside.gm-festband, body:has(.quiz-saal) .page-title-section,
body:has(.quiz-saal) .gm-subhero-signet, body:has(.quiz-saal) .gm-page-eyebrow, body:has(.quiz-saal) section.gm-claim,
body:has(.quiz-saal) .gm-hero-waveband, body:has(.quiz-saal) nav.gm-toc, body:has(.quiz-saal) section.gm-cta,
body:has(.quiz-saal) aside.gm-feedback, body:has(.quiz-saal) section.gm-prefooter, body:has(.quiz-saal) footer,
body:has(.quiz-saal) .gm-back-to-top, body:has(.quiz-saal) .gm-breadcrumb-nav { display: none !important; }
body:has(.quiz-saal) { background: var(--gm-ink); }
body:has(.quiz-saal) main section.no-padding > .container { padding: 0 !important; max-width: none; }
.quiz-saal { position: relative; box-sizing: border-box; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column;
  margin: 0 calc(50% - 50vw); padding: clamp(1.5rem, 4vh, 3rem) clamp(1.5rem, 5vw, 5rem); background: var(--gm-ink); color: var(--gm-white);
  font-variant-numeric: tabular-nums lining-nums; transition: opacity .25s ease; }
.quiz-saal::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 75% 55% at 50% 108%, color-mix(in srgb, var(--gm-sea) 30%, transparent), transparent 72%); }
.quiz-saal > * { position: relative; }
.quiz-saal--aus { opacity: 0; }
.quiz-saal-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; border-bottom: 1px solid color-mix(in srgb, var(--gm-white) 22%, transparent); padding-bottom: 1rem; margin-bottom: clamp(1.5rem, 4vh, 3rem); }
.quiz-saal-marke { margin: 0; font-size: clamp(1rem, 1.6vw, 1.4rem); letter-spacing: .14em; text-transform: uppercase; font-weight: var(--gm-fw-label); color: var(--gm-sun); }
.gm-prose .quiz-saal-titel, .quiz-saal-titel { margin: 0; color: var(--gm-white); font-size: clamp(2rem, 4.5vw, 4rem); line-height: 1.05; }
.quiz-saal-inhalt { flex: 1; }
.quiz-saal-gross { text-align: center; margin: 0 auto clamp(1.5rem, 4vh, 3rem); }
.quiz-saal-kicker { display: block; margin: 0; font-size: clamp(.85rem, 1.1vw, 1.1rem); letter-spacing: .08em; text-transform: uppercase; font-weight: var(--gm-fw-label); color: var(--gm-sun); }
.quiz-saal-name { display: block; margin: .2em 0; font-family: var(--gm-font-head); font-weight: var(--gm-fw-titel); color: var(--gm-white); font-size: clamp(1.5rem, 2.4vw, 2.6rem); line-height: 1.1; text-wrap: balance; overflow-wrap: break-word; hyphens: manual; }
.quiz-saal-gross .quiz-saal-name { font-size: clamp(2.6rem, 7vw, 6.5rem); }
.quiz-saal-zahl { display: block; margin: 0; font-size: clamp(1.1rem, 2vw, 1.8rem); color: color-mix(in srgb, var(--gm-white) 82%, transparent); }
.quiz-saal-tafeln { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: clamp(.8rem, 2vw, 1.5rem); }
.quiz-saal-tafeln li { padding: clamp(1rem, 2.5vw, 2rem); border: 1px solid color-mix(in srgb, var(--gm-white) 22%, transparent); border-radius: var(--gm-radius); background: color-mix(in srgb, var(--gm-white) 6%, transparent); }
.quiz-saal-podest li.quiz-saal-erster { grid-column: 1 / -1; text-align: center; border-color: var(--gm-sun); background: color-mix(in srgb, var(--gm-white) 10%, transparent); }
.quiz-saal-podest li.quiz-saal-erster .quiz-saal-name { font-size: clamp(2.4rem, 6vw, 5.5rem); }
.quiz-saal-rest { columns: 2; column-gap: 3rem; margin: clamp(1rem, 3vh, 2rem) 0 0; padding-left: 2.5rem; font-size: clamp(1.2rem, 2.2vw, 2rem); line-height: 1.6; }
.quiz-saal-rest li { break-inside: avoid; display: flex; justify-content: space-between; gap: 1rem; padding-right: 1rem; }
.quiz-saal-rest li span { color: var(--gm-sun); font-weight: var(--gm-fw-betont); }
.quiz-saal-tabelle { width: 100%; border-collapse: collapse; font-size: clamp(1.2rem, 2.4vw, 2.2rem); }
.quiz-saal-tabelle th { text-align: left; font-size: .6em; letter-spacing: .12em; text-transform: uppercase; color: var(--gm-sun); padding: 0 .6em .4em; font-weight: var(--gm-fw-label); }
.quiz-saal-tabelle td { padding: .35em .6em; border-top: 1px solid color-mix(in srgb, var(--gm-white) 16%, transparent); }
.quiz-saal-tabelle td:first-child { font-family: var(--gm-font-head); font-weight: var(--gm-fw-titel); width: 3em; }
.quiz-saal-tabelle td:nth-child(3), .quiz-saal-tabelle th:nth-child(3), .quiz-saal-tabelle td:nth-child(4), .quiz-saal-tabelle th:nth-child(4) { text-align: right; }
.quiz-saal-tabelle tr.quiz-saal-rang1 td { color: var(--gm-sun); }
.quiz-saal-rekorde { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: clamp(.8rem, 2vw, 1.5rem); }
.quiz-saal-rekorde li { padding: clamp(1rem, 2.5vw, 2rem); border-left: 3px solid var(--gm-sun); }
.quiz-saal-leer { font-size: clamp(1.1rem, 2vw, 1.8rem); color: color-mix(in srgb, var(--gm-white) 82%, transparent); text-align: center; margin: 1.5rem 0 0; }
.quiz-saal-fuss { background: transparent; color: var(--gm-white); display: flex; gap: 1rem; align-items: center; justify-content: flex-end; margin-top: clamp(1.5rem, 4vh, 3rem); padding-top: 1rem; border-top: 1px solid color-mix(in srgb, var(--gm-white) 22%, transparent); font-size: .95rem; }
.quiz-saal-stand { margin-right: auto; color: color-mix(in srgb, var(--gm-white) 70%, transparent); }
.quiz-saal-knopf, .gm-prose .quiz-saal-knopf { color: var(--gm-white); text-decoration: none; padding: .45rem .9rem; border: 1px solid color-mix(in srgb, var(--gm-white) 40%, transparent); border-radius: var(--gm-radius); font-weight: var(--gm-fw-betont); letter-spacing: .04em; text-transform: uppercase; font-size: .8rem; }
.quiz-saal-knopf:hover, .quiz-saal-knopf:focus-visible, .gm-prose .quiz-saal-knopf:hover { color: var(--gm-white); background: color-mix(in srgb, var(--gm-white) 14%, transparent); }
.quiz-saal a:focus-visible { outline: var(--gm-focus-width) solid var(--gm-sun); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .quiz-saal { transition: none; } .quiz-saal--aus { opacity: 1; } }
@media (prefers-contrast: more) { .quiz-saal::before { content: none; } }