/* IF Grand Prix · Wettbewerbswebsite
   Alle Gestaltungseinstellungen stehen hier. Keine externen Schriften. */
:root {
  color-scheme: light;
  /* Farben: ruhiges Papier, Burgunder nach ifwizz, warme rote Akzente. */
  --papier: #fffefb;
  --seitenrand: #f3f0e9;
  --text: #262522;
  --text-leise: #59534c;
  --akzent: #800000;
  --akzent-hell: #b33b23;
  --link-besucht: #65416d;
  --linie: #c9b9ad;
  --tabellenkopf: #eee5da;
  --tabellenfeld: #f5f1eb;
  --hinweis: #f5eee4;
  --fokus: #005a75;
  --gesamtbalken: #6c655e;
  --logo-filter: none;
  /* Typografie, Breite und Abstände: hier einfach anpassbar. */
  --schrift: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --titel-schrift: Georgia, 'Times New Roman', serif;
  --schriftgroesse: 1rem;
  --zeilenhoehe: 1.65;
  --seitenbreite: 51rem;
  --innenabstand: clamp(1rem, 4vw, 2.5rem);
  --abschnittabstand: 3.2rem;
}

/* Dunkle Darstellung: dieselben Inhalte und Abstände, andere Kontrastfarben. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --papier: #181b1d;
  --seitenrand: #101214;
  --text: #ece8e1;
  --text-leise: #bdb7ad;
  --akzent: #ffb3a7;
  --akzent-hell: #ed846d;
  --link-besucht: #d0b5ef;
  --linie: #68635d;
  --tabellenkopf: #303438;
  --tabellenfeld: #24282b;
  --hinweis: #2c2825;
  --fokus: #8bd8f4;
  --gesamtbalken: #bcb5ab;
  --logo-filter: invert(1);
}

/* Auch ohne JavaScript ist die dunkle Systemdarstellung möglich. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --papier: #181b1d;
    --seitenrand: #101214;
    --text: #ece8e1;
    --text-leise: #bdb7ad;
    --akzent: #ffb3a7;
    --akzent-hell: #ed846d;
    --link-besucht: #d0b5ef;
    --linie: #68635d;
    --tabellenkopf: #303438;
    --tabellenfeld: #24282b;
    --hinweis: #2c2825;
    --fokus: #8bd8f4;
    --gesamtbalken: #bcb5ab;
    --logo-filter: invert(1);
  }
}

* { box-sizing: border-box; }
html { background: var(--seitenrand); color: var(--text); scroll-padding-top: 4.5rem; }
body {
  max-width: calc(var(--seitenbreite) + 2 * var(--innenabstand));
  margin: 0 auto;
  padding: 0 var(--innenabstand);
  background: var(--papier);
  font-family: var(--schrift);
  font-size: var(--schriftgroesse);
  line-height: var(--zeilenhoehe);
  border-top: .4rem solid var(--akzent);
}
a { color: var(--akzent); text-underline-offset: .16em; text-decoration-thickness: .065em; }
a:visited { color: var(--link-besucht); }
a:hover { color: var(--akzent); text-decoration-thickness: .13em; }
a, p, li, td, th { overflow-wrap: break-word; }
a { overflow-wrap: anywhere; }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 4px; }
img { max-width: 100%; height: auto; }
p { margin: .8rem 0 1.05rem; }
address { font-style: normal; line-height: 1.6; margin-block: 1rem; }
ul, ol { padding-left: 1.5rem; }
li { margin: .35rem 0; }
h1, h2, h3, h4 { line-height: 1.25; text-wrap: pretty; }
h1, h2 { font-family: var(--titel-schrift); font-weight: 400; }
h1 { font-size: clamp(2rem, 5vw, 2.85rem); margin: .3rem 0 .8rem; color: var(--akzent); }
h2 { color: var(--akzent); font-size: clamp(1.6rem, 4vw, 2rem); margin: 0 0 1.1rem; }
h3 { font-size: 1.15rem; margin: 1.8rem 0 .65rem; }
h4 { font-size: 1rem; margin: 1.4rem 0 .4rem; }
strong { font-weight: 650; }
small { font-size: .875em; }
section { margin-block: var(--abschnittabstand); scroll-margin-top: 1rem; }
section + section { border-top: 2px solid var(--akzent); padding-top: 2.2rem; }
main > section > h3 { border-bottom: 1px solid var(--linie); padding-bottom: .4rem; }
hr { border: 0; border-top: 1px solid var(--linie); margin: 2rem 0; }

/* Kopf und kompakte, umbrechende Inhaltsnavigation. */
.site-header { padding-top: 1rem; }
.title-row { display: grid; grid-template-columns: minmax(0,1fr) clamp(112px,28vw,230px); align-items: center; gap: 1.3rem; }
.title-row h1 { margin: 0; }
.title-row .archive-logo { width: 100%; max-width: 230px; height: auto; justify-self: end; }
.site-header-year { padding-top: .7rem; }
.site-header-year + main > section:first-child { margin-top: 1.2rem; }
.brand-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.wordmark { color: var(--akzent); font-family: var(--titel-schrift); font-size: 1.2rem; line-height: 1.3; margin: 0; }
.wordmark a { color: inherit; }
.wordmark span { display: block; color: var(--text-leise); font-family: var(--schrift); font-size: .72em; margin-top: .2em; }
.breadcrumb { font-size: .85rem; color: var(--text-leise); }
.archive-logo { width: 160px; flex: 0 1 160px; object-fit: contain; background: transparent; filter: var(--logo-filter); }
.eyebrow { font-size: .84rem; color: var(--text-leise); letter-spacing: .055em; margin-bottom: .35rem; }
.lead { font-size: 1.08rem; margin-bottom: 1.4rem; }
.contents { border-block: 1px solid var(--linie); padding: .65rem 0; margin-top: 1.6rem; }
.contents ul { display: flex; flex-wrap: wrap; column-gap: 1.2rem; row-gap: .15rem; list-style: none; padding: 0; margin: 0; }
.contents li { margin: 0; }
.contents a { display: inline-block; padding-block: .35rem; font-size: .9rem; }

/* Stets sichtbares, nativ bedienbares Inhaltsmenü; Skript ergänzt automatisches Schließen. */
.has-navigation { padding-top: 3.7rem; }
.persistent-nav { position: fixed; inset: 0 0 auto; z-index: 100; background: var(--papier); border-bottom: 1px solid var(--linie); }
.nav-inner { max-width: calc(var(--seitenbreite) + 2 * var(--innenabstand)); margin-inline: auto; padding: .3rem var(--innenabstand); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.nav-inner > a { font-size: .95rem; font-weight: 600; }
.nav-actions { display: flex; align-items: center; gap: .6rem; flex: 0 0 auto; }
.nav-menu { margin: 0; border: 0; padding: 0; }
.nav-menu > summary { display: flex; align-items: center; gap: .55rem; min-height: 44px; padding: .35rem .5rem; list-style: none; font-size: .95rem; }
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu[open] > summary { margin: 0; }
.menu-icon { display: inline-block; width: 1.25rem; height: 1rem; background: linear-gradient(currentColor,currentColor) top / 100% 2px no-repeat, linear-gradient(currentColor,currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor,currentColor) bottom / 100% 2px no-repeat; }
.menu-open, .nav-menu[open] .menu-closed { display: none; }
.nav-menu[open] .menu-open { display: inline; }
.nav-menu .contents { position: absolute; top: 100%; inset-inline: 0; max-width: calc(var(--seitenbreite) + 2 * var(--innenabstand)); margin: 0 auto; padding: .6rem var(--innenabstand) 1rem; max-height: calc(100vh - 4rem); max-height: calc(100dvh - 4rem); overflow-y: auto; border-top: 1px solid var(--linie); border-bottom: 2px solid var(--akzent); background: var(--papier); }
.nav-menu .contents ul { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 1.3rem; }
.nav-menu .contents a { display: block; padding: .7rem .2rem; min-height: 44px; line-height: 1.3; border-bottom: 1px solid var(--linie); }
.has-navigation .skip-link:focus { position: fixed; top: 4rem; left: 1rem; z-index: 110; }
.archive-label { font-size: .85em; font-weight: 400; }

/* Sprachwahl und Hell-Dunkel-Schalter. */
.display-controls { position: fixed; top: .55rem; right: max(1rem, calc((100vw - var(--seitenbreite)) / 2)); z-index: 105; display: flex; align-items: center; gap: .5rem; }
.display-controls:has(.theme-toggle:not([hidden])) + .site-header:not(:has(.eyebrow)) { padding-top: 3.8rem; }
.theme-toggle, .language-switch { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border: 1px solid var(--text-leise); border-radius: 2px; background: var(--papier); color: var(--text); }
.theme-toggle { gap: .5rem; padding: .4rem .65rem; font: inherit; font-size: .85rem; line-height: 1.2; white-space: nowrap; cursor: pointer; }
.theme-toggle[hidden] { display: none; }
.theme-toggle:hover, .language-switch:hover { background: var(--tabellenkopf); color: var(--akzent); border-color: var(--akzent); }
.language-switch img { display: block; width: 24px; height: 16px; object-fit: contain; }
.theme-icon { display: inline-block; flex: 0 0 1.05rem; width: 1.05rem; height: 1.05rem; border: 1.5px solid currentColor; border-radius: 50%; background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.theme-toggle[aria-pressed="true"] .theme-icon { background: linear-gradient(90deg, transparent 50%, currentColor 50%); }

/* Hinweise und Downloads bleiben Teil des Leseflusses. */
.notice { border-left: 3px solid var(--akzent-hell); background: var(--hinweis); padding: .65rem 1rem; font-size: .93rem; }
.notice p:first-child, .download-box p:first-child { margin-top: 0; }
.notice p:last-child, .download-box p:last-child { margin-bottom: 0; }
.download-box { padding: .9rem 1rem; border-block: 1px solid var(--linie); background: var(--tabellenfeld); margin-block: 1.4rem; }
.download-box h3 { margin-top: 0; }
.file-list { padding-left: 1.4rem; }
.file-list li { margin-block: .4rem; }
.external-mark, .download-mark { font-family: var(--schrift); font-size: .85em; white-space: nowrap; }
.external-mark { color: var(--akzent); }
.download-mark { font-weight: 700; }
.meta, .source-date, .back-top { color: var(--text-leise); font-size: .9rem; }
.source-date { margin-top: 1.5rem; }
.back-top { margin-top: 1.6rem; }

/* Beiträge mit kleinen, vorhandenen Coverabbildungen. */
.game { display: flow-root; margin-block: 1.7rem; padding: 1.2rem; border: 1px solid var(--linie); border-left: 4px solid var(--akzent); border-radius: 2px; }
.game h3 { margin-top: 0; padding-bottom: 0; border-bottom: 0; }
.game > h3 + br { display: none; }
.game .cover-link { float: right; width: 90px; margin: .15rem 0 1rem 1.2rem; }
.game .cover { display: block; width: 100%; height: auto; border: 1px solid var(--linie); }
.game .meta { margin-top: -.2rem; }
.prose { overflow-wrap: break-word; }
details { margin-block: 1rem; border-block: 1px solid var(--linie); padding-block: .6rem; }
summary { color: var(--akzent); cursor: pointer; font-weight: 600; padding: .15rem 0; }
details[open] > summary { margin-bottom: .8rem; }
details > :last-child { margin-bottom: .35rem; }
pre { font-family: ui-monospace, Consolas, monospace; font-size: .88rem; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; margin-block: .8rem; }
blockquote { margin-inline: 0; padding-left: 1rem; border-left: 2px solid var(--linie); }

/* Historische Tabellen: Note und Balken bleiben ohne Aufklappen sichtbar. */
.table-wrap { max-width: 100%; overflow-x: auto; margin-block: 1.2rem; }
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; line-height: 1.45; }
caption { text-align: left; font-weight: 650; margin-bottom: .6rem; }
th, td { padding: .6rem .55rem; vertical-align: top; text-align: left; }
thead { background: var(--tabellenkopf); }
thead th { border-bottom: 1px solid var(--linie); font-size: .9rem; }
.results tbody tr { border-bottom: 1px solid var(--akzent-hell); }
.results td:first-child, .results th:first-child { width: 2.2rem; }
.results td:last-child, .results thead th:last-child { text-align: right; white-space: nowrap; }
.results td:nth-child(3) { font-size: .9rem; }
.stats { background: var(--tabellenfeld); margin-bottom: 1.6rem; font-size: .9rem; }
.stats th[rowspan] { width: 52%; font-weight: 400; line-height: 1.2; border-right: 1px solid var(--papier); padding: .45rem .7rem; }
.stats-author, .stats-title, .stats-value, .stats-deviation { display: block; }
.stats-value { margin-top: .3rem; }
.stats-deviation { font-size: .9em; }
.stats td { padding: .05rem .5rem; line-height: 1.1; vertical-align: middle; }
.stats thead th:nth-child(2), .stats tbody td:first-of-type { text-align: center; }
.stats thead th:last-child, .stats tbody td:last-child { width: 1%; white-space: nowrap; text-align: right; }
.stats tbody + tbody { border-top: .45rem solid var(--papier); }
.stats span.bar { display: block; height: .65rem; max-width: 100%; background: var(--akzent-hell); }
.stats .total { background: var(--tabellenkopf); }
.stats .total .bar { background: var(--gesamtbalken); }

/* Jahrgangsverzeichnis und Fuß. */
.year-list { list-style: none; padding: 0; margin-block: 1.3rem; }
.year-list li { display: flex; flex-wrap: wrap; gap: .2rem 1.3rem; align-items: baseline; border-bottom: 1px solid var(--linie); margin: 0; padding-block: .85rem; }
.year-list strong { min-width: 4rem; font-family: var(--titel-schrift); font-size: 1.45rem; font-weight: 400; }
.year-list span { color: var(--text-leise); font-size: .93rem; }
.site-footer { margin-top: 3rem; border-top: 2px solid var(--akzent); padding: 1rem 0 1.8rem; color: var(--text-leise); font-size: .85rem; }
.site-footer p { margin-block: .4rem; }

/* Tastatur- und Screenreader-Zugänglichkeit. */
.visually-hidden, .skip-link:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link:focus { position: relative; display: inline-block; z-index: 2; background: var(--papier); padding: .7rem 1rem; margin-top: .6rem; color: var(--akzent); }

@media (max-width: 480px) {
  body { --abschnittabstand: 2.4rem; }
  .brand-row { align-items: flex-start; }
  .archive-logo { width: 120px; flex-basis: 120px; }
  .title-row { gap: .8rem; }
  .title-row h1 { font-size: 1.8rem; }
  .title-row .archive-logo { width: 100%; max-width: none; }
  .wordmark { font-size: 1.05rem; }
  .contents ul { column-gap: 1rem; }
  .contents a { padding-block: .4rem; }
  .nav-menu .contents ul { grid-template-columns: 1fr; }
  .nav-actions { gap: .25rem; }
  .theme-toggle { padding-inline: .5rem; }
  .display-controls:has(.language-switch) + .site-header .eyebrow { margin-inline-end: 6.5rem; }
  .game .cover-link { margin-left: .8rem; width: 76px; }
  .game { padding: .85rem; }
  th, td { padding: .5rem .3rem; }
  .results { font-size: .86rem; }
  .results td:nth-child(3) { font-size: .8rem; }
  .stats { font-size: .83rem; }
  .stats th[rowspan] { padding: .55rem; width: 52%; }
  .stats td { padding-inline: .3rem; }
  .download-box, .notice { padding-inline: .8rem; }
}

/* Lesbare Druckfassung ohne versteckte Archivtexte. */
@media print {
  :root, :root[data-theme], :root:not([data-theme]) { color-scheme: light; --papier: #fff; --seitenrand: #fff; --text: #000; --text-leise: #333; --akzent: #000; --akzent-hell: #555; --link-besucht: #000; --linie: #bbb; --tabellenkopf: #eee; --tabellenfeld: #f5f5f5; --hinweis: #f5f5f5; --gesamtbalken: #555; --logo-filter: none; }
  html, body { background: #fff; color: #000; }
  body { max-width: none; padding: 0; border: 0; font-size: 10pt; line-height: 1.4; }
  .skip-link, .contents, .back-top, .persistent-nav, .display-controls, .theme-toggle { display: none; }
  .has-navigation { padding-top: 0; }
  .site-header { padding-top: 0; }
  .display-controls:has(.theme-toggle:not([hidden])) + .site-header:not(:has(.eyebrow)) { padding-top: 0; }
  h1 { font-size: 24pt; }
  h2 { font-size: 18pt; }
  h1, h2, h3, h4 { break-after: avoid; }
  a, a:visited { color: #000; }
  section { margin-block: 1.5rem; }
  section + section { padding-top: 1.3rem; }
  tr, .game .cover { break-inside: avoid; }
  .table-wrap { overflow: visible; }
  .stats span.bar { background: #555; print-color-adjust: exact; }
  details { break-inside: auto; }
  details > :not(summary) { display: block !important; }
  .site-footer { margin-top: 1.5rem; }
}