/* FREQ — die Welt. Dunkles Chrome, ein Cyan, Systemschrift (wie die App).
   Ohne JavaScript, ohne WebGL oder mit „Bewegung reduzieren" ist dies eine
   ruhige, normale Seite (Standard). Mit der Welt (html.welt) werden die Kapitel
   zu festen Tafeln über der 3D-Welt, und die Seite scrollt nur noch unsichtbar. */

:root {
  --asphalt: #0b0d0f;
  --karte: #16181c;
  --rand: rgba(255, 255, 255, 0.12);
  --licht: #f2f3f5;
  --nebel: #9ba1a8;
  --cyan: #27c4e8;
  --rot: #e8402a;
  --gruen: #30d158;
  --mx: 51.9%;
  --my: 48.0%;
  --bogen: 372deg;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--asphalt); }
body {
  margin: 0;
  background: var(--asphalt);
  color: var(--licht);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: var(--cyan); }
img { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }
.springen { position: absolute; left: 12px; top: -60px; z-index: 60; background: var(--karte); color: var(--licht); padding: 8px 12px; border-radius: 8px; text-decoration: none; }
.springen:focus { top: 12px; }

/* ── Hintergrund: Standbild und Leinwand ── */
.poster {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: var(--asphalt) url("hero.webp") center / cover no-repeat;
  transition: opacity 1.2s ease;
}
.poster::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11, 13, 15, 0.55), rgba(11, 13, 15, 0.25) 40%, rgba(11, 13, 15, 0.75));
}
canvas#welt {
  position: fixed; inset: 0; z-index: 1; display: block; width: 100%; height: 100%;
  opacity: 0; transition: opacity 0.9s ease; pointer-events: none;
}
.bereit canvas#welt { opacity: 1; }
.bereit .poster { opacity: 0; }

/* ── Kopf (immer da) ── */
header.kopf {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) 10px calc(16px + env(safe-area-inset-left));
  pointer-events: none;
}
header.kopf > * { pointer-events: auto; }
.marke { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--licht); }
.marke img { width: 30px; height: 30px; }
.marke b { font-size: 17px; letter-spacing: 3px; font-weight: 700; }
.schalter { display: flex; align-items: center; gap: 8px; }
.knopf, nav.sprachen {
  height: 36px; padding: 0 12px; border-radius: 999px;
  background: rgba(22, 24, 28, 0.72); border: 1px solid var(--rand); color: var(--licht);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  display: inline-flex; align-items: center; gap: 7px;
  font: 600 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  cursor: pointer;
}
.knopf svg { width: 16px; height: 16px; }
.knopf[aria-pressed="true"] { border-color: var(--cyan); color: var(--cyan); }
.knopf[hidden] { display: none; }
html:not(.welt) .knopf { display: none; }
nav.sprachen { gap: 10px; cursor: default; }
nav.sprachen a { color: var(--nebel); text-decoration: none; }
nav.sprachen a.aktiv { color: var(--cyan); }

/* ── Kapitelpunkte (nur in der Welt) ── */
.kapitelnav { display: none; }

/* ── Fuß (immer erreichbar) ── */
footer.fuss {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  color: var(--nebel); font-size: 13px; position: relative; z-index: 40;
}
footer.fuss a { color: var(--nebel); text-decoration: none; }
footer.fuss a:hover { color: var(--licht); }
footer.fuss span { opacity: 0.7; }

/* ── Standard: die ruhige Seite ── */
main { position: relative; z-index: 2; }
.kapitel { max-width: 760px; margin: 0 auto; padding: 14vh 24px; }
.kapitel .text { max-width: 36rem; }
.kapitel h1 { margin: 0 0 14px; font-size: clamp(34px, 6.4vw, 80px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.03; }
.kapitel h2 { margin: 0 0 12px; font-size: clamp(27px, 4.2vw, 50px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; }
.kapitel p { margin: 0; color: var(--nebel); font-size: clamp(16px, 1.3vw, 19px); }
.kapitel p b { color: var(--licht); font-weight: 600; }
.kapitel .beispiel { margin-top: 12px; font-size: 15px; color: var(--nebel); }
/* Wetterwarnung als Streifen wie in der App: Amtsfarbe (Meteoalarm-Orange), Symbol, zwei Zeilen */
.warnstreifen {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 16px;
  padding: 10px 16px 10px 0; border-radius: 12px; overflow: hidden;
  background: rgba(28, 28, 30, 0.92); border: 1px solid var(--rand); text-shadow: none;
}
.warnstreifen .stufe { align-self: stretch; width: 8px; margin-right: 2px; background: #ff9300; }
.warnstreifen .symbol { width: 26px; height: 26px; color: #ff9300; flex: none; }
.warnstreifen .text { display: grid; line-height: 1.3; }
.warnstreifen .text b { color: var(--licht); font-size: 16px; }
.warnstreifen .text span { color: var(--nebel); font-size: 14px; }
html.welt .kapitel.rechts .warnstreifen { margin-left: auto; }
.kapitel .beispiel::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); margin-right: 8px; vertical-align: 1px; }
.kapitel.auftakt { min-height: 78svh; display: grid; align-content: center; padding-top: 110px; }
.kapitel.auftakt p { font-size: clamp(17px, 1.6vw, 22px); }
.hinweis { display: none; }
.finale-logo-rahmen { width: min(52vmin, 360px); aspect-ratio: 900 / 893; margin: 0 0 22px; }
.finale-logo { width: 100%; height: 100%; object-fit: contain; }
.kapitel.finale .text { margin-top: 0; }
.stand { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; padding: 9px 16px; border-radius: 999px; background: var(--karte); border: 1px solid var(--rand); font-size: 14px; font-weight: 600; }
.stand .puls { width: 8px; height: 8px; border-radius: 50%; background: var(--gruen); }
.kapitel h1 .spiel, .kapitel h2 .spiel { display: none; }

/* ── Die Welt ── */
html.welt { scrollbar-width: none; overscroll-behavior: none; }
html.welt::-webkit-scrollbar { display: none; }
html.welt body { overscroll-behavior: none; }
html.welt main { height: 100vh; }
html.welt .kapitel {
  position: fixed; inset: 0; z-index: 2; max-width: none; margin: 0;
  display: grid; align-content: end; justify-content: start;
  padding: calc(72px + env(safe-area-inset-top)) calc(24px + env(safe-area-inset-right)) calc(64px + env(safe-area-inset-bottom)) calc(24px + env(safe-area-inset-left));
  opacity: 0; visibility: hidden; pointer-events: none;
  will-change: opacity, transform;
}
html.welt .kapitel.da { visibility: visible; }
html.welt .kapitel.da a, html.welt .kapitel.da button { pointer-events: auto; }
html.welt .kapitel .text {
  max-width: 34rem; position: relative; padding: 30px 40px; margin: -30px -40px; border-radius: 28px;
  /* dezenter dunkler Hof hinter dem Text, damit er vor Autos und Lichtern lesbar bleibt – farthest-corner und
     Ende bei 70 %: der Verlauf ist an jeder Kante des Kastens schon 0, keine sichtbare Kante (Luka 22.10., Punkt 21) */
  background: radial-gradient(farthest-corner at 50% 50%, rgba(8, 10, 14, 0.6), rgba(8, 10, 14, 0.36) 38%, rgba(8, 10, 14, 0) 70%);
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.85), 0 1px 3px rgba(0, 0, 0, 0.8), 0 0 2px rgba(0, 0, 0, 0.6);
}
html.welt .kapitel p { color: #c9ced6; }
/* Kapitel „Im Auto“: Text oben (über der Frontscheibe), nie auf Lenkrad, Kombi oder CarPlay-Bildschirm */
html.welt .kapitel.oben { align-content: start; padding-top: calc(96px + env(safe-area-inset-top)); }
html.welt .kapitel.rechts { justify-content: end; }
html.welt .kapitel.rechts .text { text-align: right; }
html.welt .kapitel.mitte, html.welt .kapitel.auftakt { justify-content: center; align-content: center; }
html.welt .kapitel.mitte .text, html.welt .kapitel.auftakt .text { text-align: center; max-width: 42rem; }
html.welt .kapitel.oben { align-content: start; }
html.welt .kapitel.finale { justify-content: center; align-content: center; }
html.welt .kapitel.finale .text { text-align: center; display: grid; justify-items: center; }
html.welt .finale-logo-rahmen { margin: 0 auto 20px; }
html.welt .finale-logo {
  -webkit-mask-image: conic-gradient(from 180deg at var(--mx) var(--my), #000 calc(var(--bogen) - 9deg), rgba(0, 0, 0, 0) var(--bogen));
  mask-image: conic-gradient(from 180deg at var(--mx) var(--my), #000 calc(var(--bogen) - 9deg), rgba(0, 0, 0, 0) var(--bogen));
}
html.welt .kapitel h1 .echt, html.welt .kapitel h2 .echt { transition: opacity 0.15s; }
html.welt .kapitel h1 .echt, html.welt .kapitel h2 .echt, html.welt .kapitel h1 .spiel, html.welt .kapitel h2 .spiel { white-space: pre-line; }
html.welt .kapitel h1, html.welt .kapitel h2 { position: relative; }
/* Während der Entschlüsselung bestimmt die Kopie die Höhe der Überschrift (sie läuft im Textfluss, der echte Text liegt
   unsichtbar darunter): bricht sie anders um, rückt der Absatz kurz nach, nichts überlappt oder wird abgeschnitten */
html.welt .kapitel h1 .spiel, html.welt .kapitel h2 .spiel { display: none; color: var(--cyan); }
html.welt .kapitel h1.entschluesselt .echt, html.welt .kapitel h2.entschluesselt .echt { position: absolute; inset: 0; opacity: 0; }
html.welt .kapitel h1.entschluesselt .spiel, html.welt .kapitel h2.entschluesselt .spiel { display: block; }
html.welt .hinweis {
  display: block; position: fixed; left: 50%; bottom: calc(52px + env(safe-area-inset-bottom)); transform: translateX(-50%);
  z-index: 3; color: var(--nebel); font-size: 13px; letter-spacing: 0.06em; text-align: center; pointer-events: none;
  transition: opacity 0.6s;
}
html.welt .hinweis::after {
  content: ""; display: block; width: 10px; height: 10px; margin: 8px auto 0;
  border-right: 2px solid var(--nebel); border-bottom: 2px solid var(--nebel); transform: rotate(45deg);
  animation: nicken 1.8s ease-in-out infinite;
}
@keyframes nicken { 0%, 100% { transform: translateY(0) rotate(45deg); opacity: 1; } 50% { transform: translateY(6px) rotate(45deg); opacity: 0.4; } }
html.welt .kapitelnav {
  display: flex; flex-direction: column; gap: 6px;
  position: fixed; right: calc(10px + env(safe-area-inset-right)); top: 50%; transform: translateY(-50%); z-index: 40;
}
html.welt .kapitelnav button { width: 32px; height: 30px; background: none; border: 0; padding: 0; cursor: pointer; display: grid; place-items: center; color: var(--licht); }
html.welt .kapitelnav button::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.35); transition: transform 0.3s, background 0.3s; }
html.welt .kapitelnav button[aria-current="true"]::before { background: var(--cyan); transform: scale(1.7); }
html.welt .kapitelnav button:hover::before { background: var(--licht); }
html.welt footer.fuss {
  position: fixed; left: 0; right: 0; bottom: 0; padding-top: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom));
  pointer-events: none; background: linear-gradient(180deg, rgba(11, 13, 15, 0), rgba(11, 13, 15, 0.55));
}
html.welt footer.fuss a { pointer-events: auto; }
html.welt footer.fuss span { display: none; }

@media (max-width: 720px) {
  html.welt .kapitel, html.welt .kapitel.rechts, html.welt .kapitel.mitte { justify-content: center; align-content: end; padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  html.welt .kapitel .text, html.welt .kapitel.rechts .text { text-align: center; max-width: 100%; }
  html.welt .kapitel.auftakt { align-content: center; padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  html.welt .kapitel.finale { align-content: center; }
  html.welt .kapitel h2 { font-size: clamp(22px, 6vw, 30px); }
  html.welt .kapitel p { font-size: 14px; line-height: 1.45; }
  html.welt .kapitel .beispiel { display: none; } /* Hochkant: der Textblock deckte die halbe Bildhöhe (Convoy von oben) */
  html.welt .finale-logo-rahmen { width: min(40vmin, 220px); margin-bottom: 12px; }
  html.welt .kapitelnav { right: calc(2px + env(safe-area-inset-right)); gap: 2px; }
  html.welt .kapitelnav button { width: 30px; height: 26px; }
  .knopf .wort { display: none; }
  .knopf { padding: 0 10px; }
  footer.fuss { font-size: 12px; gap: 4px 10px; padding-left: 8px; padding-right: 8px; }
}
@media (max-height: 460px) and (orientation: landscape) {
  html.welt .kapitel { padding-top: calc(56px + env(safe-area-inset-top)); padding-bottom: calc(40px + env(safe-area-inset-bottom)); padding-right: calc(44px + env(safe-area-inset-right)); }
  html.welt .kapitel h1 { font-size: clamp(26px, 5vw, 40px); }
  html.welt .kapitel h2 { font-size: clamp(20px, 3.6vw, 28px); }
  html.welt .kapitel p { font-size: 14px; }
  html.welt .kapitel .beispiel { display: none; }
  html.welt .finale-logo-rahmen { width: 120px; margin-bottom: 8px; }
  html.welt .hinweis { display: none; }
  html.welt .kapitelnav { gap: 0; }
  html.welt .kapitelnav button { height: 20px; }
}

/* ── Ruhig: Bewegung reduziert ── */
@media (prefers-reduced-motion: reduce) {
  .poster, canvas#welt { transition: none; }
  .hinweis::after { animation: none; }
}

/* ── Ladebildschirm (nur HTML/CSS): sofort da, Wort für Wort, Ring des echten Logos = echter Fortschritt ── */
.laden {
  position: fixed; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 26px;
  padding: 24px; text-align: center;
  background: linear-gradient(180deg, rgba(8, 10, 14, 0.5), rgba(8, 10, 14, 0.3) 45%, rgba(8, 10, 14, 0.8));
  transition: opacity 0.9s ease, visibility 0s linear 0.9s;
  --laden-bogen: 0deg; --kx: 51.9%; --ky: 95.2%;
}
.laden-text { margin: 0; font-size: clamp(30px, 5vw, 58px); font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; color: var(--licht); text-shadow: 0 2px 28px rgba(0, 0, 0, 0.85), 0 1px 3px rgba(0, 0, 0, 0.8); }
.laden-zeile { display: block; }
.laden-text .w { display: inline-block; opacity: 0; transform: translateY(10px); animation: laden-wort 0.6s ease-out forwards; }
.laden-zeile:nth-child(1) .w:nth-child(1) { animation-delay: 0.1s; }
.laden-zeile:nth-child(1) .w:nth-child(2) { animation-delay: 0.5s; }
.laden-zeile:nth-child(2) .w:nth-child(1) { animation-delay: 1.2s; }
.laden-zeile:nth-child(2) .w:nth-child(2) { animation-delay: 1.6s; }
@keyframes laden-wort { to { opacity: 1; transform: none; } }
.laden-logo { position: relative; width: min(40vmin, 230px); aspect-ratio: 900 / 893; }
.laden-bild {
  width: 100%; height: 100%; object-fit: contain; display: block;
  /* dieselbe Maske wie das Finale-Logo: der Ring füllt sich von unten gegen den Uhrzeigersinn (--laden-bogen aus dem Fortschritt) */
  -webkit-mask-image: conic-gradient(from 180deg at var(--mx) var(--my), #000 calc(var(--laden-bogen) - 8deg), rgba(0, 0, 0, 0) var(--laden-bogen));
  mask-image: conic-gradient(from 180deg at var(--mx) var(--my), #000 calc(var(--laden-bogen) - 8deg), rgba(0, 0, 0, 0) var(--laden-bogen));
}
.laden-komet {
  position: absolute; left: var(--kx); top: var(--ky); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: #e6f9ff; box-shadow: 0 0 8px 3px rgba(39, 196, 232, 0.95), 0 0 26px 10px rgba(39, 196, 232, 0.45);
  transition: left 0.25s linear, top 0.25s linear;
}
.laden-stand { margin: 0; display: flex; gap: 12px; align-items: baseline; font-size: 14px; color: var(--nebel); }
.laden-prozent { font-variant-numeric: tabular-nums; color: var(--licht); font-weight: 600; min-width: 3.2em; text-align: right; }
html.bereit .laden { opacity: 0; visibility: hidden; pointer-events: none; }
html.ruhig .laden, html.ohne-webgl .laden { display: none; }
@media (prefers-reduced-motion: reduce) {
  .laden { transition: none; }
  .laden-text .w { animation: none; opacity: 1; transform: none; }
  .laden-komet { display: none; transition: none; }
}
@media (max-width: 720px) {
  .laden { gap: 20px; }
  .laden-logo { width: min(44vmin, 190px); }
}