/* Hamburg Streetwars – Homepage im »Hafen-Stil« des Spiels (heller Himmel, Pergament-Fenster im Goldrahmen,
   pinkes Titelband, Pillen-Knöpfe). Gemalte Teile unter hafen/ stammen aus dem Spiel (assets/ui/hafen).
   Schriften selbst gehostet (keine Abfrage bei Dritten, DSGVO); Lizenzen: schrift/OFL-*.txt. */
@font-face { font-family: "Bowlby One"; src: url("schrift/bowlby-one-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("schrift/barlow-condensed-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("schrift/barlow-condensed-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --pergament: #faedd1;
  --text: #5a3420;        /* 9,3:1 auf Pergament, 8,3:1 auf Rosa */
  --text-leise: #6d4a30;  /* 6,9:1 auf Pergament, 6,1:1 auf Rosa */
  --pink: #f0237f;
  --pink-tief: #b80d5c;   /* Schrift/Links auf Pergament: 5,4:1 */
  --pink-rand: #8a0c45;
  --tuerkis: #0f7f92;
  --gold: #e8a92e;
  --gold-dunkel: #b07828;
  --rosa: #f8dadd;
  --himmel: #49d3f4;
  --titel: "Bowlby One", Impact, system-ui, sans-serif;
  --schrift: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--himmel);
  color: var(--text);
  font: 600 1.2rem/1.45 var(--schrift);
  -webkit-text-size-adjust: 100%;
}
/* Himmel und Elbe stehen fest hinter der Seite – wie die Vollbild-Seiten im Spiel */
body::before {
  content: ""; position: fixed; z-index: -1; left: 0; right: 0; top: 0; height: 100vh; height: 100lvh;
  background: var(--himmel) url("hafen/himmel.webp") center bottom / cover no-repeat;
}
@media (min-width: 760px) { body::before { background-image: url("hafen/himmel-gross.webp"); } }
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--pink-tief); text-underline-offset: 0.15em; }
a:hover { color: var(--pink-rand); }
:focus-visible { outline: 3px solid #1d4f8f; outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--titel); font-weight: 400; line-height: 1.08; text-wrap: balance; margin: 0; }
p { margin: 0; }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprung { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 12px 18px; background: var(--pergament); border: 3px solid var(--gold); border-radius: 12px; }
.sprung:focus { top: 12px; }

.huelle { width: min(1120px, 100% - 32px); margin-inline: auto; }

/* ---------- Kopfzeile: Pergament-Leiste mit Goldkante ---------- */
.kopf {
  position: sticky; top: 0; z-index: 20; padding-top: env(safe-area-inset-top, 0px);
  background: #f8ebcd; border-bottom: 3px solid var(--gold);
  box-shadow: 0 1px 0 #fff6de inset, 0 2px 0 var(--gold-dunkel), 0 8px 18px rgba(20, 70, 110, 0.22);
}
.kopf .huelle { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; }
.marke { display: flex; align-items: center; justify-content: center; flex: none; gap: 10px; min-width: 44px; min-height: 48px; text-decoration: none; color: var(--text); }
.marke img { width: 42px; height: 42px; border-radius: 11px; border: 2px solid var(--gold); box-shadow: 0 2px 0 var(--gold-dunkel); }
.marke span { font-family: var(--titel); font-size: 1.1rem; letter-spacing: 0.01em; white-space: nowrap; }
.kopf nav { display: flex; align-items: center; gap: 2px; }
.kopf nav a {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 48px; padding: 0 11px; border-radius: 999px;
  color: var(--text); text-decoration: none; text-transform: uppercase; letter-spacing: 0.07em; font-size: 1.02rem; font-weight: 700; white-space: nowrap;
}
.kopf nav a:hover { background: var(--rosa); color: var(--pink-rand); }
.kopf nav a.nav-testen { color: #fff; background: linear-gradient(180deg, #e3176f, #c40b5c); border: 2px solid var(--gold); min-height: 44px; padding: 0 16px; margin-right: 6px; box-shadow: 0 2px 0 var(--pink-rand); }
.kopf nav a.nav-testen:hover { background: linear-gradient(180deg, #d0105f, #ad0850); color: #fff; }

/* ---------- Fenster: Pergament im Goldrahmen (hafen/fenster.webp als 9-Teile-Rahmen) ---------- */
section, .abschnitt { padding-block: 34px; }
.fenster {
  position: relative;
  border: 22px solid transparent;
  border-image: url("hafen/fenster.webp") 44 fill / 22px stretch;
  border-radius: 28px;
  box-shadow: 0 18px 40px rgba(16, 62, 100, 0.3);
  padding: 46px clamp(0px, 2.4vw, 30px) 14px;
  margin-top: 42px;
}
.fenster.ohne-band { padding-top: 14px; margin-top: 0; }
.fenster.schmal { max-width: 820px; margin-inline: auto; }
/* Titelband: sitzt wie im Spiel halb über der Oberkante; der Titel steht waagerecht und senkrecht mittig im pinken
   Band und folgt seinem Bogen (bogen.js – gleiche Krümmung wie im Spiel) */
.band {
  position: absolute; left: 50%; top: -60px; width: min(430px, calc(100% + 28px)); height: 80px; transform: translateX(-50%);
  isolation: isolate;
}
/* Band etwas satter als im Spiel: weiße Schrift erreicht so auch in kleiner Größe 4,5:1 */
.band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("hafen/titelband.webp") center / 100% 100% no-repeat; filter: brightness(0.83) saturate(1.14) drop-shadow(0 4px 5px rgba(120, 20, 60, 0.22)); }
.band > :is(h1, h2) {
  height: 62.5%; margin: 0; padding: 0 14%; display: flex; align-items: center; justify-content: center;
  color: #fff; font: 400 25px/1 var(--titel); white-space: nowrap;
  text-shadow: 1.600px 0.000px 0 #8a0c45, 1.386px 0.800px 0 #8a0c45, 0.800px 1.386px 0 #8a0c45, 0.000px 1.600px 0 #8a0c45, -0.800px 1.386px 0 #8a0c45, -1.386px 0.800px 0 #8a0c45, -1.600px 0.000px 0 #8a0c45, -1.386px -0.800px 0 #8a0c45, -0.800px -1.386px 0 #8a0c45, -0.000px -1.600px 0 #8a0c45, 0.800px -1.386px 0 #8a0c45, 1.386px -0.800px 0 #8a0c45, 0 3.4px 0 rgba(110, 8, 55, 0.75);
}
.band .bz { display: inline-block; white-space: pre; }
.fenster.mit-moewe::before, .fenster.mit-moewe::after { content: ""; position: absolute; z-index: 2; pointer-events: none; background: center / contain no-repeat; }
.fenster.mit-moewe::before { left: calc(50% - min(215px, 50% + 14px) - 16px); top: -90px; width: 64px; height: 70px; background-image: url("hafen/moewe.webp"); }
.fenster.mit-moewe::after { left: calc(50% + min(215px, 50% + 14px) - 38px); top: -68px; width: 52px; height: 64px; background-image: url("hafen/anker.webp"); }
.wellen { height: 30px; margin-top: 18px; background: url("hafen/wellen.webp") center / auto 100% no-repeat; }
.einleitung { max-width: 62ch; margin: 0 auto 22px; text-align: center; font-size: 1.25rem; text-wrap: balance; }

/* ---------- Knöpfe: Pillen aus dem Spiel ---------- */
.knopf {
  --kh: 58px;
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--kh); padding: 0 34px 3px; border: 0; background: none; cursor: pointer;
  font: 400 1.2rem/1.1 var(--titel); color: #fff; text-decoration: none; text-align: center;
  text-shadow: 1.400px 0.000px 0 #8a0c45, 1.212px 0.700px 0 #8a0c45, 0.700px 1.212px 0 #8a0c45, 0.000px 1.400px 0 #8a0c45, -0.700px 1.212px 0 #8a0c45, -1.212px 0.700px 0 #8a0c45, -1.400px 0.000px 0 #8a0c45, -1.212px -0.700px 0 #8a0c45, -0.700px -1.212px 0 #8a0c45, -0.000px -1.400px 0 #8a0c45, 0.700px -1.212px 0 #8a0c45, 1.212px -0.700px 0 #8a0c45, 0 2.8px 0 rgba(110, 8, 55, 0.7);
  filter: drop-shadow(0 3px 3px rgba(120, 40, 30, 0.3));
  transition: transform 0.12s;
}
.knopf::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  border-style: solid; border-color: transparent; border-width: 0 calc(var(--kh) * 0.515);
  border-image: url("hafen/pille_pink.webp") 0 70 fill / 0 calc(var(--kh) * 0.515) stretch;
  /* etwas satter als im Spiel, damit weiße Schrift auch als Fließtext-Größe 4,5:1 erreicht */
  filter: brightness(0.84) saturate(1.14);
}
.knopf:hover { color: #fff; transform: translateY(-2px); }
.knopf:active { transform: translateY(1px); }
.knopf.creme, .knopf.aus { color: var(--text); text-shadow: none; }
.knopf.creme::after, .knopf.aus::after { border-image-source: url("hafen/pille_creme.webp"); border-image-slice: 0 77 fill; filter: none; }
.knopf.creme:hover { color: var(--pink-rand); }
.knopf.aus { cursor: default; color: var(--text-leise); }
.knopf.aus:hover { transform: none; color: var(--text-leise); }
.knoepfe { display: flex; flex-wrap: wrap; gap: 14px; }
.hinweis-klein { font-size: 1.05rem; color: var(--text-leise); text-wrap: balance; }
.stempel {
  display: inline-block; padding: 5px 16px 6px; border: 2px solid var(--pink-tief); color: var(--pink-tief); background: #fff6e4;
  border-radius: 999px; text-transform: uppercase; letter-spacing: 0.1em; font-size: 1rem; font-weight: 700; transform: rotate(-2deg);
}

/* ---------- Kopfbereich: Schriftzug auf dem Himmel, Tafel darunter ---------- */
.titel { padding-block: 34px 18px; }
.titel .huelle { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; align-items: center; }
.schriftzug { text-align: center; font-family: var(--titel); line-height: 0.95; margin: 0; display: grid; justify-items: center; }
.schriftzug .z1, .schriftzug .z2 { display: block; color: #fff; }
.schriftzug .z1 { font-size: clamp(1.6rem, 7vw, 2.9rem); letter-spacing: 0.14em; margin-right: -0.14em; text-shadow: 0.085em 0.000em 0 #0b6d80, 0.081em 0.026em 0 #0b6d80, 0.069em 0.050em 0 #0b6d80, 0.050em 0.069em 0 #0b6d80, 0.026em 0.081em 0 #0b6d80, 0.000em 0.085em 0 #0b6d80, -0.026em 0.081em 0 #0b6d80, -0.050em 0.069em 0 #0b6d80, -0.069em 0.050em 0 #0b6d80, -0.081em 0.026em 0 #0b6d80, -0.085em 0.000em 0 #0b6d80, -0.081em -0.026em 0 #0b6d80, -0.069em -0.050em 0 #0b6d80, -0.050em -0.069em 0 #0b6d80, -0.026em -0.081em 0 #0b6d80, -0.000em -0.085em 0 #0b6d80, 0.026em -0.081em 0 #0b6d80, 0.050em -0.069em 0 #0b6d80, 0.069em -0.050em 0 #0b6d80, 0.081em -0.026em 0 #0b6d80, 0 0.115em 0 #084f5e, 0 0.145em 0 #084f5e, 0 0.175em 0 #084f5e; transform: rotate(-4deg) translateX(-4%); }
.schriftzug .z2 { font-size: clamp(2.3rem, 11.2vw, 4.9rem); text-shadow: 0.065em 0.000em 0 #8a0c45, 0.063em 0.017em 0 #8a0c45, 0.056em 0.032em 0 #8a0c45, 0.046em 0.046em 0 #8a0c45, 0.033em 0.056em 0 #8a0c45, 0.017em 0.063em 0 #8a0c45, 0.000em 0.065em 0 #8a0c45, -0.017em 0.063em 0 #8a0c45, -0.032em 0.056em 0 #8a0c45, -0.046em 0.046em 0 #8a0c45, -0.056em 0.032em 0 #8a0c45, -0.063em 0.017em 0 #8a0c45, -0.065em 0.000em 0 #8a0c45, -0.063em -0.017em 0 #8a0c45, -0.056em -0.032em 0 #8a0c45, -0.046em -0.046em 0 #8a0c45, -0.033em -0.056em 0 #8a0c45, -0.017em -0.063em 0 #8a0c45, -0.000em -0.065em 0 #8a0c45, 0.017em -0.063em 0 #8a0c45, 0.033em -0.056em 0 #8a0c45, 0.046em -0.046em 0 #8a0c45, 0.056em -0.033em 0 #8a0c45, 0.063em -0.017em 0 #8a0c45, 0 0.090em 0 #5d072e, 0 0.115em 0 #5d072e, 0 0.140em 0 #5d072e; transform: rotate(-4deg); margin-top: 0.04em; }
.schriftzug::after { content: ""; width: min(56%, 300px); height: 5px; margin-top: 16px; border-radius: 3px; background: linear-gradient(90deg, transparent, var(--gold) 20%, #ffd874 50%, var(--gold) 80%, transparent); }
.titel-tafel { display: grid; gap: 16px; justify-items: center; text-align: center; }
.titel-tafel .unterzeile { font-size: clamp(1.3rem, 2.4vw, 1.6rem); line-height: 1.3; max-width: 30ch; }
.titel-tafel .knoepfe { justify-content: center; }
.titel-bild { position: relative; margin: 0; }
.rahmen { border: 5px solid var(--gold); border-radius: 22px; box-shadow: 0 0 0 2px var(--gold-dunkel), 0 2px 0 3px #fff3cf inset, 0 16px 34px rgba(16, 62, 100, 0.35); background: #1a0d2b; overflow: hidden; }
.titel-bild .rahmen { aspect-ratio: 16 / 10; transform: rotate(1.2deg); }
.titel-bild .rahmen > * { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 78% 30%; }
.titel-bild .moewe { position: absolute; left: -6px; top: -50px; width: 62px; height: auto; z-index: 2; }
/* Variante A: Spielbild · Variante B: Video (data-kopf am <html>) */
html[data-kopf="a"] .kopf-b, html[data-kopf="b"] .kopf-a { display: none; }
.kopf-b video { object-position: center; }
@media (min-width: 900px) {
  .titel { padding-block: 54px 26px; }
  .titel .huelle { grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); grid-template-areas: "zug bild" "tafel bild"; column-gap: 54px; row-gap: 30px; }
  .schriftzug { grid-area: zug; align-self: end; }
  .titel-tafel { grid-area: tafel; align-self: start; }
  .titel-bild { grid-area: bild; }
  .titel-bild .rahmen { aspect-ratio: 5 / 5.3; }
  .schriftzug .z1 { font-size: min(2.9rem, 3.5vw); }
  .schriftzug .z2 { font-size: min(4.7rem, 5.7vw); }
  .band { width: 500px; height: 93px; top: -68px; }
  /* Band etwas satter als im Spiel: weiße Schrift erreicht so auch in kleiner Größe 4,5:1 */
.band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("hafen/titelband.webp") center / 100% 100% no-repeat; filter: brightness(0.83) saturate(1.14) drop-shadow(0 4px 5px rgba(120, 20, 60, 0.22)); }
.band > :is(h1, h2) { font-size: 30px; }
  .fenster { margin-top: 50px; padding-top: 54px; }
  .fenster.ohne-band { margin-top: 0; padding-top: 14px; }
  .fenster.mit-moewe::before { left: calc(50% - 250px - 18px); top: -104px; width: 74px; height: 81px; }
  .fenster.mit-moewe::after { left: calc(50% + 250px - 44px); top: -78px; width: 60px; height: 74px; }
}

/* ---------- Jetzt testen ---------- */
.test-wege { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); }
.test-weg {
  display: grid; gap: 14px; align-content: start; justify-items: center; text-align: center;
  border: 12px solid transparent; border-image: url("hafen/karte.webp") 40 fill / 12px stretch; padding: 12px clamp(4px, 2vw, 18px) 14px;
}
.test-kopf { display: flex; align-items: center; justify-content: center; gap: 12px; }
.test-kopf svg { width: 44px; height: 44px; flex: none; color: var(--tuerkis); }
.test-kopf h3 { font-size: 1.7rem; text-align: left; }
.test-kopf h3 small { display: block; font: 700 1rem/1.3 var(--schrift); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-leise); }
.test-weg .knopf { --kh: 62px; min-width: min(100%, 280px); font-size: 1.3rem; }
.test-stand { font-size: 1.05rem; color: var(--text-leise); max-width: 36ch; text-wrap: balance; }
.schritte { list-style: none; counter-reset: schritt; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; text-align: left; width: 100%; }
.schritte li { counter-increment: schritt; display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; padding: 10px 14px 10px 10px; background: #fff8ea; border: 2px solid rgba(176, 120, 40, 0.4); border-radius: 16px; line-height: 1.3; }
.schritte li::before { content: counter(schritt); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe08a, var(--gold) 60%, #c98a1c); border: 2px solid var(--gold-dunkel); font: 400 1.15rem/1 var(--titel); color: #4a2408; }
.so-gehts { font: 400 1.15rem/1 var(--titel); color: #4a2408; justify-self: start; margin: 6px 0 -4px -22px; padding: 8px 34px 10px 14px; background: url("hafen/abschnitt.webp") center / 100% 100% no-repeat; filter: drop-shadow(0 2px 2px rgba(120, 70, 10, 0.3)); }
.qr { display: grid; grid-template-columns: 132px 1fr; gap: 14px; align-items: center; text-align: left; width: 100%; padding: 10px; background: #fff8ea; border: 2px solid rgba(176, 120, 40, 0.4); border-radius: 16px; }
.qr[hidden] { display: none; }
.qr svg { width: 132px; height: 132px; border-radius: 8px; border: 3px solid var(--gold); background: #fff; }
.qr p { font-size: 1.05rem; line-height: 1.3; }
.qr strong { display: block; font: 400 1.05rem/1.2 var(--titel); margin-bottom: 4px; }
.platzhalter-marke { display: inline-block; margin-top: 6px; padding: 2px 10px; border: 2px dashed var(--pink-tief); border-radius: 8px; color: var(--pink-tief); background: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.95rem; }
.wlan-hinweis { display: grid; grid-template-columns: 46px 1fr; gap: 14px; align-items: center; margin: 22px auto 0; max-width: 760px; padding: 14px 18px; background: #e3f6f3; border: 2px solid #7cc9cf; border-radius: 18px; text-align: left; }
@media (min-width: 700px) { .test-stand { min-height: 4.4em; } }
.wlan-hinweis span { text-wrap: balance; }
.wlan-hinweis svg { width: 46px; height: 46px; color: var(--tuerkis); }

/* ---------- Trailer, Videos, Spielbilder ---------- */
.trailer-video { display: block; width: 100%; max-width: 960px; aspect-ratio: 16 / 9; margin-inline: auto; border: 5px solid var(--gold); border-radius: 20px; background: #000; box-shadow: 0 0 0 2px var(--gold-dunkel), 0 10px 26px rgba(60, 30, 20, 0.3); }
@media (max-width: 700px) { .trailer-video { aspect-ratio: 9 / 16; max-width: 400px; } }
.reihe-hinweis { text-align: center; color: var(--text-leise); margin: -6px 0 16px; }
.video-reihe, .szenen { display: grid; grid-auto-flow: column; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding: 4px 4px 14px; scrollbar-width: thin; scrollbar-color: var(--gold-dunkel) transparent; }
.video-reihe { grid-auto-columns: minmax(220px, calc((100% - 48px) / 4)); }
.szenen { grid-auto-columns: minmax(150px, calc((100% - 80px) / 6)); }
@media (max-width: 720px) { .video-reihe { grid-auto-columns: 72%; } .szenen { grid-auto-columns: 46%; gap: 12px; } }
.video-karte, .szene { scroll-snap-align: start; margin: 0; min-width: 0; display: grid; gap: 10px; align-content: start; }
.video-karte video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 18px; border: 4px solid var(--gold); background: #000; box-shadow: 0 0 0 2px var(--gold-dunkel), 0 6px 14px rgba(60, 30, 20, 0.28); }
.video-karte figcaption, .klasse figcaption { color: var(--text-leise); font-size: 1.05rem; line-height: 1.3; padding-inline: 4px; }
.video-karte strong, .klasse strong { display: block; color: var(--text); font-size: 1.2rem; }
.szene img { width: 100%; aspect-ratio: 402 / 874; object-fit: cover; border-radius: 18px; border: 4px solid var(--gold); box-shadow: 0 0 0 2px var(--gold-dunkel), 0 6px 14px rgba(60, 30, 20, 0.28); background: #1a0d2b; }
.szene figcaption { color: var(--text); text-align: center; font-size: 1.1rem; }
/* Bildreihen »Aus dem Spiel« (13.10.): am Handy wischen, am Rechner stehen alle Bilder nebeneinander (bei schmalem Fenster
   in zwei Zeilen) – nichts liegt versteckt hinter einem Rollbalken. Jedes Bild ist ein Link auf die große Fassung;
   galerie.js öffnet sie im Leuchtkasten. Die Lupe unten rechts sagt: das geht groß. */
@media (min-width: 721px) { .szenen { grid-auto-flow: row; grid-template-columns: repeat(6, minmax(0, 1fr)); overflow: visible; scroll-snap-type: none; } }
/* »Mehr Videos« genauso: am Rechner stehen alle vier nebeneinander (schmales Fenster: 2 × 2), nichts hinter einem Rollbalken */
@media (min-width: 721px) { .video-reihe { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; scroll-snap-type: none; } }
@media (min-width: 721px) and (max-width: 980px) { .video-reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; margin-inline: auto; } }
@media (min-width: 721px) and (max-width: 980px) { .szenen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hinweis-klick { display: none; }
@media (min-width: 721px) { .hinweis-wisch { display: none; } .hinweis-klick { display: inline; } }
.szene a.gross { display: block; position: relative; border-radius: 18px; cursor: zoom-in; -webkit-tap-highlight-color: transparent; }
.szene a.gross:focus-visible { outline-offset: 1px; border-radius: 18px; }
.szene a.gross img { transition: transform .15s ease-out, filter .15s ease-out; }
.szene a.gross::after {
  content: ""; position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%; pointer-events: none;
  background: var(--pergament) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%235a3420' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15.2 15.2 20 20M10.5 8v5M8 10.5h5'/%3E%3C/g%3E%3C/svg%3E") center / 20px no-repeat;
  border: 2px solid var(--gold); box-shadow: 0 0 0 1px var(--gold-dunkel), 0 3px 6px rgba(60, 30, 20, 0.35);
}
@media (hover: hover) { .szene a.gross:hover img { transform: translateY(-3px); filter: brightness(1.06); } }

/* ---------- Videos groß (13.10.) ----------
   Natives Vollbild (Knopf in der Video-Leiste, Doppelklick): die Karten-Regeln galten dort weiter – `object-fit: cover`
   schnitt das hochkante Video am Rechner auf einen Querstreifen zusammen (Kopf weg), Goldrand und Rundung lagen um den
   ganzen Bildschirm. Im Vollbild deshalb: ganzes Bild, kein Rahmen. Zwei Regeln, weil ein unbekannter Selektor in einer
   Liste die ganze Regel ungültig macht. */
video:fullscreen { object-fit: contain !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; aspect-ratio: auto !important; background: #000 !important; }
video:-webkit-full-screen { object-fit: contain !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; aspect-ratio: auto !important; background: #000 !important; }
/* Knopf »Groß ansehen« unter jedem Video (galerie.js setzt ihn ein): öffnet das Video im Leuchtkasten */
.video-gross {
  display: inline-flex; align-items: center; gap: 7px; justify-self: start; min-height: 40px; padding: 5px 14px 6px 10px; cursor: pointer;
  background: var(--pergament); color: var(--text); font: 700 1.05rem/1.1 var(--schrift); border: 2px solid var(--gold); border-radius: 999px;
  box-shadow: 0 0 0 1px var(--gold-dunkel), 0 3px 6px rgba(60, 30, 20, 0.22); -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.video-gross:hover { background: #fff6de; }
.video-gross svg { flex: none; width: 20px; height: 20px; }
.video-gross.mitte { display: flex; width: fit-content; margin: 12px auto 0; }
.lk-platz { display: block; background: #000; border-radius: 18px; }

/* ---------- Leuchtkasten (galerie.js) ---------- */
html.lk-offen { overflow: hidden; }
.lk {
  position: fixed; inset: 0; z-index: 200; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; justify-items: center;
  padding: 16px; background: rgba(26, 13, 43, 0.94); touch-action: none; overscroll-behavior: contain; animation: lk-ein .16s ease-out;
  --lk-rand: 152px; /* Platz über und unter dem Bild: Luft, Rahmen, Titelzeile */
}
.lk[hidden], .lk [hidden] { display: none; }
@keyframes lk-ein { from { opacity: 0; } }
.lk-buehne { grid-column: 2; margin: 0; display: grid; gap: 12px; justify-items: center; }
.lk-buehne picture { display: block; }
.lk-bild {
  box-sizing: content-box; display: block; max-width: none; aspect-ratio: var(--b) / var(--h); height: auto;
  width: min(var(--b) * 1px, 100vw - 32px, (100vh - var(--lk-rand)) * var(--b) / var(--h));
  width: min(var(--b) * 1px, 100vw - 32px, (100dvh - var(--lk-rand)) * var(--b) / var(--h));
  border: 4px solid var(--gold); border-radius: 18px; background: #1a0d2b center / cover no-repeat;
  box-shadow: 0 0 0 2px var(--gold-dunkel), 0 18px 44px rgba(0, 0, 0, 0.55); transition: transform .18s ease-out;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
/* Video im Leuchtkasten: ganzes Bild im richtigen Seitenverhältnis, so groß wie es geht; die Leiste des Browsers bleibt */
.lk video.lk-film {
  box-sizing: content-box; display: block; max-width: none; margin: 0; aspect-ratio: var(--b) / var(--h); height: auto; object-fit: contain;
  width: min(var(--b) * 1px, 100vw - 32px, (100vh - var(--lk-rand)) * var(--b) / var(--h));
  width: min(var(--b) * 1px, 100vw - 32px, (100dvh - var(--lk-rand)) * var(--b) / var(--h));
  border: 4px solid var(--gold); border-radius: 18px; background: #000; box-shadow: 0 0 0 2px var(--gold-dunkel), 0 18px 44px rgba(0, 0, 0, 0.55);
}
.lk.lk-film-an { touch-action: auto; }
.lk.lk-film-an picture, .lk.lk-film-an .lk-vor, .lk.lk-film-an .lk-weiter, .lk.lk-film-an .lk-zahl { display: none; }
.lk-zeile {
  display: flex; align-items: baseline; justify-content: center; gap: 10px; max-width: min(92vw, 560px); min-height: 40px; padding: 6px 16px 7px;
  background: var(--pergament); border: 3px solid var(--gold); border-radius: 14px; box-shadow: 0 0 0 1px var(--gold-dunkel);
  color: var(--text); font: 700 1.15rem/1.2 var(--schrift);
}
.lk-titel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lk-zahl { flex: none; color: var(--text-leise); font-weight: 600; white-space: nowrap; }
.lk-knopf {
  display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border-radius: 50%; cursor: pointer; color: #fff;
  background: radial-gradient(circle at 35% 28%, #ff5aa3, #e0126c 55%, #b80d5c); border: 3px solid var(--gold);
  box-shadow: 0 0 0 1px var(--gold-dunkel), 0 5px 12px rgba(0, 0, 0, 0.45); -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.lk-knopf:hover { filter: brightness(1.1); }
.lk-knopf:active { transform: translateY(1px); }
.lk-knopf:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 50%; }
.lk-vor { grid-column: 1; grid-row: 1; justify-self: end; margin-right: 22px; }
.lk-weiter { grid-column: 3; grid-row: 1; justify-self: start; margin-left: 22px; }
.lk-weiter svg { transform: scaleX(-1); }
.lk-zu { position: absolute; top: max(14px, env(safe-area-inset-top, 0px)); right: max(14px, env(safe-area-inset-right, 0px)); width: 46px; height: 46px; }
@media (max-width: 720px) {
  /* Handy: Bild fast bildschirmfüllend, Pfeile neben der Titelzeile (nichts liegt auf dem Bild), X oben rechts */
  .lk { padding: 8px; --lk-rand: 132px; align-items: end; }
  .lk-buehne { gap: 8px; padding-bottom: max(2px, env(safe-area-inset-bottom, 0px)); }
  .lk-bild { width: min(var(--b) * 1px, 100vw - 24px, (100vh - var(--lk-rand)) * var(--b) / var(--h)); width: min(var(--b) * 1px, 100vw - 24px, (100dvh - var(--lk-rand) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) * var(--b) / var(--h)); }
  .lk video.lk-film { width: min(var(--b) * 1px, 100vw - 24px, (100vh - var(--lk-rand)) * var(--b) / var(--h)); width: min(var(--b) * 1px, 100vw - 24px, (100dvh - var(--lk-rand) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) * var(--b) / var(--h)); }
  .lk-zeile { max-width: calc(100vw - 124px); min-height: 44px; align-items: center; font-size: 1.05rem; }
  .lk-vor, .lk-weiter { position: absolute; bottom: max(10px, env(safe-area-inset-bottom, 0px) + 8px); width: 44px; height: 44px; margin: 0; }
  .lk-vor { left: 10px; } .lk-weiter { right: 10px; }
  .lk-zu { top: max(8px, env(safe-area-inset-top, 0px)); right: 8px; width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .lk { animation: none; } .lk-bild, .szene a.gross img { transition: none; } }

/* ---------- Was dich erwartet ---------- */
.kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.kachel { border: 14px solid transparent; border-image: url("hafen/kachel.webp") 44 fill / 14px stretch; padding: 6px 6px 8px; display: grid; gap: 6px; align-content: start; }
.kachel .zeichen { font-size: 2rem; line-height: 1.1; }
.kachel h3 { font-size: 1.3rem; }
.kachel p { color: var(--text-leise); line-height: 1.35; }
.unterkopf { width: fit-content; margin: 34px 0 18px -14px; padding: 9px 44px 11px 16px; background: url("hafen/abschnitt.webp") center / 100% 100% no-repeat; font-size: clamp(1.2rem, 3vw, 1.5rem); color: #4a2408; filter: drop-shadow(0 2px 2px rgba(120, 70, 10, 0.3)); }
.klassen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: 880px; margin-inline: auto; }
.klasse { margin: 0; display: grid; gap: 8px; align-content: start; }
.klasse img { width: 100%; aspect-ratio: 448 / 752; object-fit: cover; border-radius: 18px; border: 4px solid var(--gold); box-shadow: 0 0 0 2px var(--gold-dunkel), 0 6px 14px rgba(60, 30, 20, 0.28); background: #0d1530; }
.klasse strong { border-bottom: 4px solid; width: fit-content; padding-bottom: 1px; margin-bottom: 3px; }
.k-pink strong { border-color: #ff3fa4; } .k-orange strong { border-color: #f09a1e; } .k-blau strong { border-color: #19b4c8; }
@media (max-width: 1000px) { .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .kachel { padding: 2px 2px 4px; } .kachel h3 { font-size: 1.08rem; } .kachel p { font-size: 1rem; } .kachel .zeichen { font-size: 1.6rem; }
  .klassen { gap: 8px; } .klasse figcaption { font-size: 0.98rem; } .klasse strong { font-size: 0.98rem; hyphens: auto; }
}

/* ---------- Termin ---------- */
.termin .fenster { text-align: center; display: grid; gap: 14px; justify-items: center; }
.termin .datum { font-family: var(--titel); font-size: clamp(2.6rem, 9vw, 4.4rem); line-height: 1; color: var(--pink-tief); text-shadow: 0 3px 0 #ffd874; }

/* ---------- Textseiten ---------- */
.text { padding-block: 40px 56px; }
.text .huelle { max-width: 800px; }
.text .fenster { padding-inline: clamp(2px, 3vw, 34px); padding-bottom: 20px; }
.text h2 { font: 700 1.5rem/1.2 var(--schrift); color: #4a2408; margin: 30px 0 6px; overflow-wrap: anywhere; }
.text p { margin: 0 0 0.8em; }
.text p, .text li { max-width: 70ch; }
.text ul { padding-left: 1.2em; }
.text .leise { color: var(--text-leise); }
.platzhalter { background: #fff; border: 1px dashed var(--pink-tief); padding: 2px 6px; border-radius: 6px; }
details { border: 10px solid transparent; border-image: url("hafen/karte.webp") 40 fill / 10px stretch; padding: 0 6px; margin-bottom: 10px; }
summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; gap: 10px; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::before { content: "+"; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--gold); border: 2px solid var(--gold-dunkel); font: 400 1.1rem/1 var(--titel); color: #4a2408; }
details[open] > summary::before { content: "–"; }
details p { margin: 4px 0 8px; color: var(--text); }

/* ---------- Fuß ---------- */
.fuss { margin-top: 40px; background: #f8ebcd; border-top: 3px solid var(--gold); box-shadow: 0 -2px 0 var(--gold-dunkel), 0 -8px 18px rgba(20, 70, 110, 0.18); padding-block: 14px calc(14px + env(safe-area-inset-bottom, 0px)); font-size: 1.1rem; }
.fuss .huelle { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; }
.fuss nav { display: flex; flex-wrap: wrap; gap: 0 6px; }
.fuss a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; color: var(--text); }
.fuss a:hover { color: var(--pink-rand); }

/* ---------- Social-Knöpfe schweben rechts mit ---------- */
.social-schwebe { position: fixed; right: max(12px, env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-50%); z-index: 50; display: grid; gap: 12px; }
.social-schwebe a { position: relative; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; color: #fff; text-decoration: none; isolation: isolate; }
.social-schwebe a::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 50%; background: radial-gradient(circle at 35% 28%, #ff5aa3, #e0126c 55%, #b80d5c); border: 3px solid var(--gold); box-shadow: 0 0 0 1px var(--gold-dunkel), 0 5px 12px rgba(16, 62, 100, 0.4); }
.social-schwebe a > svg { position: relative; z-index: 2; }
.social-schwebe .knall { position: absolute; inset: -14px; z-index: 0; background: var(--gold); clip-path: polygon(50% 0,59% 30%,88% 12%,72% 41%,100% 50%,72% 59%,88% 88%,59% 70%,50% 100%,41% 70%,12% 88%,28% 59%,0 50%,28% 41%,12% 12%,41% 30%); transform: scale(0) rotate(-30deg); opacity: 0; }
.social-schwebe .etikett { position: absolute; z-index: 3; right: calc(100% + 14px); top: 50%; transform: translate(12px,-50%) rotate(-2deg); white-space: nowrap; display: grid; gap: 1px; padding: 6px 12px 7px; border-radius: 12px; background: var(--pergament); border: 3px solid var(--gold); color: var(--text); font: 600 1rem/1.15 var(--schrift); box-shadow: 0 6px 14px rgba(16, 62, 100, 0.35); opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; }
.social-schwebe .etikett b { font: 400 1.05rem/1.1 var(--titel); color: var(--pink-tief); letter-spacing: .02em; }
.social-schwebe a:hover, .social-schwebe a:focus-visible { animation: faust .38s ease-out; }
.social-schwebe a:hover .knall, .social-schwebe a:focus-visible .knall { animation: knall .38s ease-out forwards; }
.social-schwebe a:hover .etikett, .social-schwebe a:focus-visible .etikett { opacity: 1; transform: translate(0,-50%) rotate(-2deg); }
@keyframes faust { 0% { transform: scale(1); } 30% { transform: scale(1.22) rotate(-10deg); } 55% { transform: scale(.94) rotate(6deg); } 100% { transform: scale(1.08); } }
@keyframes knall { 0% { transform: scale(0) rotate(-30deg); opacity: 0; } 40% { transform: scale(1.1) rotate(8deg); opacity: 1; } 100% { transform: scale(.85) rotate(0); opacity: .9; } }
@media (hover: none) { .social-schwebe .etikett { display: none; } }
/* Schmaler als 1260 px (Handy, Tablet): als Reihe über dem Fuß statt schwebend – schwebend verdeckten sie Knöpfe, Bilder und Text */
@media (max-width: 1259px) { .social-schwebe { position: static; transform: none; display: flex; justify-content: center; gap: 18px; margin-top: 26px; } .social-schwebe .etikett { display: none; } }

/* ---------- Handy ---------- */
@media (max-width: 700px) {
  body { font-size: 1.15rem; }
  .kopf .huelle { width: 100%; padding-inline: 8px 4px; gap: 4px; min-height: 56px; }
  .marke span { display: none; }
  .kopf nav { gap: 0; }
  .kopf nav a { padding: 0 7px; font-size: 0.95rem; letter-spacing: 0.03em; }
  .kopf nav a.nav-testen { padding: 0 12px; margin-right: 2px; }
  .kopf nav a.nur-breit { display: none; }
  section, .abschnitt { padding-block: 26px; }
  .fenster { padding-inline: 0; }
  /* Band etwas satter als im Spiel: weiße Schrift erreicht so auch in kleiner Größe 4,5:1 */
.band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("hafen/titelband.webp") center / 100% 100% no-repeat; filter: brightness(0.83) saturate(1.14) drop-shadow(0 4px 5px rgba(120, 20, 60, 0.22)); }
.band > :is(h1, h2) { font-size: 22px; }
  .knopf { padding-inline: 26px; }
  .qr { grid-template-columns: 112px 1fr; } .qr svg { width: 112px; height: 112px; }
  .fuss .huelle { justify-content: center; text-align: center; }
  .fuss nav { justify-content: center; }
  .fuss { margin-top: 22px; }
}

@media (max-width: 374px) {
  .kopf nav a { padding: 0 4px; font-size: 0.86rem; letter-spacing: 0; }
  .kopf nav a.nav-testen { padding: 0 9px; }
  .kopf nav a[href^="support"] { display: none; } /* Support steht auch im Fuß */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .knopf, .social-schwebe .etikett { transition: none; }
  .knopf:hover, .knopf:active { transform: none; }
  .social-schwebe a:hover, .social-schwebe a:focus-visible, .social-schwebe a:hover .knall, .social-schwebe a:focus-visible .knall { animation: none; }
  .social-schwebe a:hover .knall { transform: scale(.85); opacity: .9; }
}