/* ==========================================================================
   Mockup 2 „Schwarze Flagge“ – Basis: Schriften, Tokens, Reset, Typografie
   ========================================================================== */

@font-face { font-family: "Grenze Gotisch"; src: url("../../fonts/grenze-gotisch-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../../fonts/barlow-condensed-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../../fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../../fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../../fonts/barlow-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../../fonts/barlow-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../../fonts/barlow-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("../../fonts/barlow-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  /* Farbe – Kernpalette aus dem Konzept */
  --abyss: #05080C;
  --nacht: #0B1621;
  --schiefer: #1C2A36;
  --mond: #C9D6E3;
  --laterne: #F2A541;
  --gold: #E8C26B;
  --blut: #B3261E;
  /* abgeleitet */
  --mond-hell: #E9EFF5;
  --mond-matt: #9AABBC;        /* 7,6:1 auf Abyss */
  --nebel: #5E7286;            /* nur Dekor, nie Text */
  --gold-hell: #F6DFA0;
  --gold-tief: #9C7428;
  --laterne-tief: #8A4F12;
  --blut-hell: #E86A5E;        /* Fehlertext auf Dunkel, 5,4:1 */
  --rost: #7A4128;
  --tiefsee: #03141A;
  --see: #0B3341;
  --see-hell: #46C6D8;
  --plankton: #8FF3FF;
  --linie: rgba(201, 214, 227, .14);
  --linie-stark: rgba(201, 214, 227, .3);
  --gold-linie: rgba(232, 194, 107, .42);
  --glas: rgba(11, 22, 33, .72);
  --glas-stark: rgba(5, 8, 12, .86);

  /* Typografie */
  --f-display: "Grenze Gotisch", "Iowan Old Style", Georgia, serif;
  --f-hud: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --f-text: "Barlow", "Segoe UI", system-ui, sans-serif;
  --t-xs: .78rem;
  --t-s: .9rem;
  --t-m: clamp(1.02rem, .98rem + .18vw, 1.12rem);
  --t-l: clamp(1.18rem, 1.06rem + .45vw, 1.42rem);
  --t-xl: clamp(1.5rem, 1.2rem + 1.1vw, 2.2rem);
  --t-2xl: clamp(2rem, 1.4rem + 2.2vw, 3.4rem);
  --t-3xl: clamp(2.5rem, 1.5rem + 3.8vw, 5.6rem);
  --t-hero: clamp(3.2rem, 1.2rem + 7.6vw, 11.5rem);
  --zeile: 1.68;
  --sperr-hud: .14em;

  /* Abstände (Basis 4px, wächst über die Wurzelschrift mit) */
  --r1: .25rem; --r2: .5rem; --r3: .75rem; --r4: 1rem; --r5: 1.5rem; --r6: 2rem; --r7: 3rem; --r8: 4.5rem; --r9: 7rem;
  --abschnitt: clamp(4.5rem, 2.5rem + 6vw, 10rem);
  --rand: clamp(1rem, .4rem + 3.2vw, 5rem);
  --breite: 152rem;
  --text-mass: 68ch;

  /* Form */
  --rad-s: 2px;
  --rad-m: 6px;
  --rad-karte: 14px;
  --fase: 10px;                /* abgeschrägte HUD-Ecken */
  --schatten-tief: 0 2.4rem 4.8rem -1.6rem rgba(0, 0, 0, .85);
  --schatten-karte: 0 1.4rem 2.6rem -1.2rem rgba(0, 0, 0, .9), 0 0 0 1px rgba(232, 194, 107, .1);
  --glimmen: 0 0 1.4rem rgba(242, 165, 65, .38);

  /* Bewegung */
  --ease-segel: cubic-bezier(.22, 1, .36, 1);
  --ease-welle: cubic-bezier(.65, 0, .35, 1);
  --ease-kanone: cubic-bezier(.2, 1.5, .35, 1);
  --d-s: .18s; --d-m: .42s; --d-l: .9s;

  /* Ebenen (bewusst niedrig, Usercentrics kommt darüber) */
  --z-unterwasser: 5; --z-tiefe: 40; --z-kopf: 50; --z-menue: 55; --z-cursor: 60; --z-toast: 65; --z-kraken: 70; --z-lader: 80;

  color-scheme: dark;
}

/* Wurzelschrift wächst bis 4K mit: 16px bis 1280px, ~25px bei 3840px */
html { font-size: clamp(100%, .55rem + .42vw, 162.5%); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 6rem; }
@media (prefers-reduced-motion: no-preference) { html:not(.ruhig) { scroll-behavior: smooth; } }

*, *::before, *::after { box-sizing: border-box; }
:where(body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol) { margin: 0; }
:where(ul[class], ol[class], nav ul, nav ol) { list-style: none; padding: 0; margin: 0; }
img, picture, svg, canvas, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; }
[hidden]:not([hidden="until-found"]) { display: none !important; }

body {
  min-height: 100vh;
  background: var(--abyss);
  color: var(--mond);
  font-family: var(--f-text);
  font-size: var(--t-m);
  line-height: var(--zeile);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}
main { display: block; outline: none; }

::selection { background: var(--gold); color: var(--abyss); }

/* Fokus: Laternenring */
:focus-visible {
  outline: 2px solid var(--laterne);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(242, 165, 65, .22);
  border-radius: var(--rad-s);
}

/* Rollbalken */
html { scrollbar-color: var(--gold-tief) var(--abyss); scrollbar-width: thin; }

/* Sichtbar nur für Screenreader */
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.sprunglink {
  position: fixed; left: var(--r4); top: var(--r4); z-index: calc(var(--z-lader) + 1);
  padding: var(--r3) var(--r5); background: var(--gold); color: var(--abyss);
  font-family: var(--f-hud); font-weight: 700; letter-spacing: .06em; text-decoration: none;
  transform: translateY(-200%); transition: transform var(--d-m) var(--ease-segel);
}
.sprunglink:focus { transform: none; }

/* ---------- Layout ---------- */
.breit { width: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; }
.sym { width: 1.15em; height: 1.15em; flex: none; fill: currentColor; }

/* ---------- Typografie ---------- */
h1, h2, h3, h4 { font-weight: 600; line-height: 1.08; text-wrap: balance; color: var(--mond-hell); }
.titel-hero, .titel-1, .titel-2, .titel-3 { font-family: var(--f-display); font-optical-sizing: auto; letter-spacing: -.005em; hyphens: manual; overflow-wrap: break-word; }
@media (max-width: 30rem) { .titel-hero, .titel-1, .titel-2 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; } }
.titel-hero { font-size: var(--t-hero); font-weight: 620; line-height: .92; }
.titel-1 { font-size: var(--t-3xl); font-weight: 600; line-height: .98; }
.titel-2 { font-size: var(--t-2xl); font-weight: 600; }
.titel-3 { font-size: var(--t-xl); font-weight: 600; line-height: 1.12; }

.hud-label {
  display: inline-flex; align-items: center; gap: .6em; flex-wrap: wrap;
  font-family: var(--f-hud); font-weight: 600; font-size: var(--t-xs);
  letter-spacing: var(--sperr-hud); text-transform: uppercase; color: var(--mond-matt);
  font-variant-numeric: tabular-nums;
}
.hud-punkt { width: .5em; height: .5em; border-radius: 50%; background: var(--laterne); box-shadow: 0 0 .7em var(--laterne); flex: none; }
.hud-punkt--rot { background: var(--blut-hell); box-shadow: 0 0 .7em var(--blut); }
.hud-trenner { display: inline-block; width: 1.4em; height: 1px; background: currentColor; opacity: .5; }

/* Fließtext aus den Live-Inhalten */
.fliesstext { max-width: var(--text-mass); text-wrap: pretty; hyphens: auto; -webkit-hyphens: auto; }
.fliesstext > * + * { margin-top: 1.05em; }
.fliesstext p { text-wrap: pretty; }
.fliesstext--gross { font-size: var(--t-l); line-height: 1.6; max-width: 62ch; }
.fliesstext--spalten { max-width: none; columns: 2 34ch; column-gap: var(--r7); }
.fliesstext--spalten > * { break-inside: avoid; }
.fliesstext--spalten > * + * { margin-top: 0; margin-bottom: 1.05em; }
.fliesstext--spalten > *:first-child { margin-bottom: 1.05em; }
.fliesstext h2 { font-family: var(--f-display); font-size: var(--t-2xl); margin-top: 1.6em; scroll-margin-top: 6rem; }
.fliesstext h3 { font-family: var(--f-display); font-size: var(--t-xl); margin-top: 1.5em; scroll-margin-top: 6rem; color: var(--gold-hell); }
.fliesstext h4 { font-family: var(--f-hud); font-size: var(--t-l); letter-spacing: .04em; margin-top: 1.3em; color: var(--gold-hell); }
.fliesstext h2 + *, .fliesstext h3 + *, .fliesstext h4 + * { margin-top: .6em; }
.fliesstext b, .fliesstext strong { font-weight: 600; color: var(--mond-hell); }
.fliesstext i, .fliesstext em { font-style: italic; }
.fliesstext u { text-decoration: underline dotted var(--mond-matt); text-underline-offset: .22em; }
.fliesstext ul:not([class]) { padding-left: 1.2em; }
.fliesstext ul:not([class]) li::marker { color: var(--gold); }
.fliesstext a, .lauflink {
  color: var(--gold-hell);
  text-decoration: underline;
  text-decoration-color: rgba(232, 194, 107, .5);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  transition: color var(--d-s), text-decoration-color var(--d-s), text-shadow var(--d-s);
}
.fliesstext a:hover, .lauflink:hover { color: var(--laterne); text-decoration-color: var(--laterne); text-shadow: 0 0 .9em rgba(242, 165, 65, .55); }
.fliesstext a b { color: inherit; }
.fliesstext img { border-radius: var(--rad-m); box-shadow: var(--schatten-tief); }
.fliesstext img.alignright, .fliesstext .alignright { float: right; margin: .3em 0 1em 1.6em; max-width: min(46%, 400px); }
.fliesstext img.alignleft, .fliesstext .alignleft { float: left; margin: .3em 1.6em 1em 0; max-width: min(46%, 400px); }
.fliesstext img.aligncenter { margin-inline: auto; width: 100%; max-width: 100%; }
.fliesstext img.alignleft[width="110"] { max-width: 110px; }
.fliesstext::after { content: ""; display: table; clear: both; }
.fliesstext ul.table { display: grid; gap: .25em; }
.fliesstext ul.table li { display: flex; gap: .8em; flex-wrap: wrap; }
.fliesstext ul.table li span:first-child { min-width: 5.5em; color: var(--mond-matt); }
@media (max-width: 34rem) {
  .fliesstext img.alignright, .fliesstext img.alignleft, .fliesstext .alignright, .fliesstext .alignleft { float: none; margin: 1em 0; max-width: 100%; }
}