/* ==========================================================================
   Seiten: Szenen-Köpfe, Startseite, Kategorie, Spiel, Impressum, Datenschutz,
   Links, Casino, 404
   ========================================================================== */

/* ---------- Kinoszene (gemeinsamer Kopf) ---------- */
.szene { position: relative; isolation: isolate; display: grid; align-items: end; min-height: 100svh; overflow: hidden; background: var(--abyss); }
.szene-bild, .szene-bild picture, .szene-bild img { position: absolute; inset: 0; width: 100%; height: 100%; }
.szene-bild img { object-fit: cover; background-size: cover; background-position: center; }
.szene-leinwand { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity 1.6s var(--ease-segel); pointer-events: none; }
.szene-leinwand.an { opacity: 1; }
.szene-leinwand canvas { width: 100% !important; height: 100% !important; }
.szene-schleier {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5, 8, 12, .86) 0%, rgba(5, 8, 12, .5) 34%, rgba(5, 8, 12, 0) 62%),
    linear-gradient(0deg, var(--abyss) 0%, rgba(5, 8, 12, .55) 18%, rgba(5, 8, 12, 0) 44%),
    linear-gradient(180deg, rgba(5, 8, 12, .7) 0%, rgba(5, 8, 12, 0) 18%);
}
.szene > :not(.szene-bild):not(.szene-leinwand):not(.szene-schleier):not(.dublone):not(.spiel-kopf-thumb) { position: relative; z-index: 3; }
.blitz-flackern { animation: flackern .5s steps(4) 1; }
@keyframes flackern { 0%, 100% { opacity: 1; } 25% { opacity: .82; } 50% { opacity: 1; } 75% { opacity: .9; } }

/* ---------- Startseite: Hero ---------- */
.held { min-height: max(100svh, 40rem); }
.held .szene-schleier {
  background:
    radial-gradient(70% 90% at 12% 55%, rgba(5, 8, 12, .78), rgba(5, 8, 12, 0) 70%),
    linear-gradient(0deg, var(--abyss) 0%, rgba(5, 8, 12, .5) 16%, rgba(5, 8, 12, 0) 40%),
    linear-gradient(180deg, rgba(5, 8, 12, .65) 0%, rgba(5, 8, 12, 0) 16%);
}
.held-inhalt { align-self: center; padding-top: 7rem; padding-bottom: 11rem; }
.held-text { max-width: 54rem; }
.held-kicker { color: var(--laterne); }
.held-titel { margin-top: 1.2rem; display: grid; gap: .5rem; }
.ht-gross {
  --lx: -999px; --ly: -999px;
  font-family: var(--f-display); font-size: var(--t-hero); font-weight: 640; line-height: .86; letter-spacing: -.01em;
  background: radial-gradient(18rem 18rem at var(--lx) var(--ly), #FFD49A 0%, #F4E9DA 28%, var(--mond-hell) 52%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 .4rem 1.6rem rgba(0, 0, 0, .7));
}
.ht-strich { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ht-klein { font-family: var(--f-hud); font-weight: 600; font-size: var(--t-xl); line-height: 1.15; letter-spacing: .04em; color: var(--gold-hell); max-width: 30ch; text-shadow: 0 2px 14px rgba(0, 0, 0, .8); }
.held-lead { margin-top: 1.4rem; max-width: 44ch; font-size: var(--t-l); color: var(--mond); text-shadow: 0 2px 12px rgba(0, 0, 0, .9); }
.held-aktion { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.held-hud { position: absolute !important; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; gap: 1rem 2.4rem; padding-bottom: 1.6rem; }
.held-hud .hud-raster { grid-template-columns: repeat(4, minmax(0, max-content)); column-gap: 2.4rem; border-top-color: var(--linie-stark); }
.held-tipp { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--f-hud); font-weight: 600; font-size: .86rem; letter-spacing: .08em; color: var(--mond-matt); }
.held-tipp .sym { color: var(--see-hell); }
.held-abtauchen { display: grid; justify-items: center; gap: .4rem; font-family: var(--f-hud); font-weight: 600; font-size: .78rem; letter-spacing: var(--sperr-hud); text-transform: uppercase; color: var(--mond); text-decoration: none; }
.abtauchen-linie { width: 1px; height: 3.4rem; background: linear-gradient(var(--gold), transparent); position: relative; overflow: hidden; }
.abtauchen-linie::after { content: ""; position: absolute; left: -2px; width: 5px; height: 1rem; border-radius: 3px; background: var(--laterne); box-shadow: 0 0 .6rem var(--laterne); animation: lot-sinkt 2.2s var(--ease-welle) infinite; }
@keyframes lot-sinkt { 0% { top: -1rem; } 100% { top: 3.4rem; } }
@media (max-width: 63.99rem) {
  .held-hud { grid-template-columns: 1fr auto; }
  .held-hud .hud-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .held-tipp { display: none; }
}
@media (max-width: 40rem) {
  .held-inhalt { padding-top: 6rem; padding-bottom: 13rem; }
  .held .szene-schleier { background: linear-gradient(0deg, var(--abyss) 5%, rgba(5, 8, 12, .74) 42%, rgba(5, 8, 12, .3) 72%, rgba(5, 8, 12, .55) 100%); }
  .dublone--sturm { right: 7%; top: 17%; }
  .held-hud .hud-raster > div:nth-child(n+3) { display: none; }
}

/* ---------- Startseite: Willkommen ---------- */
.willkommen { position: relative; isolation: isolate; display: grid; align-items: center; min-height: max(92svh, 38rem); overflow: hidden; background: var(--abyss); }
.willkommen-bild { position: absolute; inset: -6% 0; z-index: -3; }
.willkommen-bild picture, .willkommen-bild img { width: 100%; height: 100%; object-fit: cover; background-size: cover; }
.willkommen-bild img { filter: saturate(.92) contrast(1.04); }
.willkommen-glut { position: absolute; z-index: -2; left: var(--gx, 70%); top: var(--gy, 50%); width: 22rem; height: 22rem; translate: -50% -50%; border-radius: 50%; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(closest-side, rgba(255, 190, 110, .26), rgba(242, 165, 65, .08) 55%, transparent); animation: kerze 2.6s ease-in-out infinite; }
.wg-kerze { width: 14rem; height: 14rem; animation-duration: 1.9s; animation-delay: -.7s; }
/* Verlauf für den Text: links fast deckend (Mond im Fenster wird stark gedämpft), rechts frei für Laterne und Logbuch */
.willkommen-schleier { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(5, 8, 12, .95) 0%, rgba(5, 8, 12, .92) 38%, rgba(5, 8, 12, .55) 54%, rgba(5, 8, 12, .08) 72%, rgba(5, 8, 12, 0) 100%),
    linear-gradient(180deg, var(--abyss) 0%, rgba(5, 8, 12, 0) 16%, rgba(5, 8, 12, 0) 82%, var(--abyss) 100%); }
.willkommen-inhalt { padding-block: var(--abschnitt); }
.willkommen-text { max-width: min(100%, 66ch); }
.willkommen-fliess { font-size: clamp(1.02rem, .96rem + .26vw, 1.18rem); line-height: 1.72; }
.willkommen-text .titel-2 { margin: .8rem 0 1.6rem; max-width: 24ch; text-shadow: 0 .3rem 1.6rem rgba(0, 0, 0, .8); }
.willkommen-text .fliesstext { text-shadow: 0 1px 10px rgba(0, 0, 0, .7); }
@media (max-width: 63.99rem) {
  .willkommen { display: block; min-height: 0; }
  .willkommen-bild { position: relative; inset: auto; z-index: 0; height: clamp(14rem, 56vw, 30rem); }
  .willkommen-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--abyss) 0%, rgba(5, 8, 12, 0) 22%, rgba(5, 8, 12, 0) 60%, var(--abyss) 100%); }
  .willkommen-bild img { object-position: 76% 50% !important; }
  .willkommen-glut, .willkommen-schleier { display: none; }
  .willkommen-inhalt { position: relative; z-index: 1; margin-top: -3rem; padding-top: 0; }
}

/* ---------- Startseite: Spiele-Bibliothek (Launcher) ---------- */
.bibliothek { position: relative; padding-bottom: var(--abschnitt); }
.buehne { position: relative; height: clamp(30rem, 64vh, 62rem); overflow: hidden; margin-bottom: -9rem; }
.buehne-bg { position: absolute; inset: 0; }
.buehne-bild { position: absolute; inset: -8%; background-size: cover; background-position: center; filter: blur(34px) saturate(1.25) brightness(.55); opacity: 0; transition: opacity 1s var(--ease-segel); }
.buehne-bild.an { opacity: 1; }
.buehne-bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, var(--abyss) 18%, rgba(5, 8, 12, .2) 62%, var(--abyss) 100%), linear-gradient(90deg, rgba(5, 8, 12, .92) 0%, rgba(5, 8, 12, .2) 75%);
}
.buehne-inhalt { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--r5) var(--r7); align-items: center; padding-top: var(--r7); }
.buehne-label { grid-column: 1 / -1; color: var(--laterne); }
.buehne-anzahl { color: var(--mond-matt); }
.buehne-karte { width: clamp(14rem, 9rem + 14vw, 30rem); max-width: 460px; padding: .5rem; rotate: -3deg; background: linear-gradient(135deg, var(--gold-hell), var(--gold-tief) 30%, var(--gold) 55%, #6E521C); border-radius: 12px; box-shadow: var(--schatten-tief); }
.buehne-karte img { width: 100%; aspect-ratio: 300 / 220; object-fit: cover; border-radius: 8px; }
.buehne-kat { font-family: var(--f-hud); font-weight: 600; letter-spacing: var(--sperr-hud); text-transform: uppercase; font-size: .86rem; color: var(--gold); }
.buehne-titel { margin-top: .3rem; font-family: var(--f-display); font-size: var(--t-3xl); font-weight: 620; line-height: .95; color: var(--mond-hell); text-wrap: balance; }
.buehne-wertung { display: flex; align-items: center; gap: .8rem; margin-top: 1rem; }
.buehne-wertung .pips { font-size: 1.2rem; }
.buehne-wertung-text { font-family: var(--f-hud); font-weight: 600; color: var(--mond-matt); }
.buehne-auszug { margin-top: 1rem; max-width: 56ch; color: var(--mond); }
.buehne-status { display: inline-block; margin-top: 1rem; padding: .2rem .6rem; border: 1px solid var(--linie-stark); font-family: var(--f-hud); font-weight: 600; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mond-hell); }
.reihen { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--r7); }
.reihe { min-width: 0; }
.reihe-kopf { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: .6rem; }
.reihe-titel { font-family: var(--f-display); font-size: var(--t-xl); line-height: 1.1; color: var(--mond-hell); }
.reihe-pfeile { display: flex; gap: .4rem; }
.reihe-liste { display: flex; gap: clamp(.8rem, 1.2vw, 1.6rem); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 1.6rem .4rem 2.4rem; margin: -1.6rem -.4rem -2.4rem; scrollbar-width: none; }
.reihe-liste::-webkit-scrollbar { display: none; }
.reihe-platz { flex: none; scroll-snap-align: start; }
.reihe-liste .karte-koerper { transition: transform .5s var(--ease-segel), box-shadow .5s, filter .5s; }
.reihe-liste.hat-fokus .karte:not(.aktiv) .karte-koerper { filter: brightness(.66) saturate(.75); }
.reihe-liste .karte.aktiv { --hebung: 24; }
.reihe-alle {
  display: grid; align-content: center; justify-items: start; gap: .6rem; width: clamp(11rem, 10rem + 4vw, 18rem); height: 100%; min-height: 20rem;
  padding: 1.4rem; border: 1px dashed var(--gold-linie); border-radius: var(--rad-karte); color: var(--mond-hell); text-decoration: none;
  background: linear-gradient(160deg, rgba(232, 194, 107, .08), rgba(11, 22, 33, .4)); transition: border-color var(--d-m), background-color var(--d-m);
}
.reihe-alle-zahl { font-family: var(--f-display); font-size: var(--t-3xl); line-height: 1; color: var(--gold); }
.reihe-alle-text { font-family: var(--f-hud); font-weight: 600; font-size: 1.1rem; letter-spacing: .03em; }
.reihe-alle .sym { width: 1.6rem; height: 1.6rem; color: var(--gold); transition: transform var(--d-m) var(--ease-segel); }
.reihe-alle:hover { border-style: solid; background-color: rgba(232, 194, 107, .06); }
.reihe-alle:hover .sym { transform: translateX(.4rem); }
@media (max-width: 47.99rem) {
  .buehne { height: auto; margin-bottom: -2rem; padding-bottom: 5rem; }
  .buehne-inhalt { grid-template-columns: 1fr; }
  .buehne-karte { display: none; }
  .buehne-auszug { display: none; }
  .reihe-pfeile { display: none; }
  .karte--reihe { width: min(72vw, 17rem); }
}

/* ---------- Startseite: Steuerrad (Kategorien) ---------- */
.kurswahl { position: relative; isolation: isolate; display: grid; align-items: center; min-height: max(100svh, 46rem); overflow: hidden; }
.kurswahl-bilder { position: absolute; inset: 0; z-index: -1; }
.kurs-bild { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s var(--ease-segel), transform 6s linear; transform: scale(1.06); }
.kurs-bild[data-aktiv] { opacity: 1; transform: scale(1); }
.kurs-bild picture, .kurs-bild img { width: 100%; height: 100%; object-fit: cover; background-size: cover; }
.kurswahl-schleier { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5, 8, 12, .94) 0%, rgba(5, 8, 12, .62) 38%, rgba(5, 8, 12, .5) 62%, rgba(5, 8, 12, .9) 100%), linear-gradient(0deg, var(--abyss), transparent 30%, transparent 72%, var(--abyss)); }
.kurswahl-inhalt { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, .85fr); gap: var(--r7); align-items: center; padding-block: var(--abschnitt); }
.kurswahl-text .titel-2 { margin: .8rem 0 1.4rem; }
.kurswahl-rad { position: relative; display: grid; justify-items: center; }
.rad-halter { width: min(100%, clamp(17rem, 10rem + 18vw, 46rem)); aspect-ratio: 1; touch-action: none; cursor: grab; border-radius: 50%; }
.rad-halter:active { cursor: grabbing; }
.rad-halter:focus-visible { outline-offset: 10px; }
.steuerrad { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 2rem 2.6rem rgba(0, 0, 0, .85)); }
.sr-drehteil { transform-origin: 0 0; }
.sr-speiche { fill: url(#sr-holz); stroke: #22150B; stroke-width: .8; }
.sr-griff { fill: url(#sr-holz); stroke: #1E1209; stroke-width: 1; }
.sr-griff-licht { fill: none; stroke: rgba(255, 214, 160, .28); stroke-width: 1.2; stroke-linecap: round; }
.sr-ring-messing { fill: none; stroke: #C69A45; stroke-width: 1.6; }
.sr-kranz-schatten { fill: none; stroke: #140B05; stroke-width: 19; }
.sr-kranz { fill: none; stroke: url(#sr-kranz-verlauf); stroke-width: 15; }
.sr-kranz-licht { fill: none; stroke: rgba(255, 214, 160, .18); stroke-width: 1.2; }
.sr-kranz-innen { fill: none; stroke: #E8C26B; stroke-opacity: .75; stroke-width: 2.4; }
.sr-niete { fill: #E8C26B; }
.sr-plakette-grund { fill: url(#g-messing); stroke: #4A3510; stroke-width: .6; }
.sr-plakette { dominant-baseline: central; font-family: var(--f-hud); font-weight: 700; font-size: 7.4px; letter-spacing: 1px; text-transform: uppercase; fill: #2A1D08; }
.sr-nabe { fill: url(#g-messing); stroke: #4A3510; stroke-width: 1.2; }
.sr-nabe-ring { fill: none; stroke: #6E521C; stroke-width: 1.4; }
.sr-bolzen { fill: #4A3510; }
.sr-schaedel { fill: #0B1621; }
.rad-zeiger { position: absolute; top: -1.6rem; left: 50%; translate: -50% 0; z-index: 2; display: grid; justify-items: center; gap: .1rem; pointer-events: none; }
.rad-zeiger span { font-family: var(--f-hud); font-weight: 700; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--laterne); }
.rad-zeiger::after { content: ""; width: 0; height: 0; border-left: .7rem solid transparent; border-right: .7rem solid transparent; border-top: 1.1rem solid var(--laterne); filter: drop-shadow(0 0 .5rem var(--laterne)); }
.rad-hilfe { margin-top: 1.2rem; text-align: center; font-family: var(--f-hud); font-size: .86rem; letter-spacing: .06em; color: var(--mond-matt); }
.kurswahl-anzeige { align-self: center; }
.ka-name { margin-top: .4rem; font-family: var(--f-display); font-size: var(--t-3xl); line-height: 1; color: var(--gold-hell); }
.ka-text { margin: .9rem 0 1.4rem; max-width: 34ch; color: var(--mond); }
.kurs-wahlen { display: grid; gap: .3rem; margin-top: 1.6rem; }
.kurs-wahl { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem .2rem; border-bottom: 1px solid var(--linie); text-decoration: none; font-family: var(--f-hud); font-weight: 600; letter-spacing: .03em; color: var(--mond-matt); transition: color var(--d-s), padding var(--d-m) var(--ease-segel); }
.kurs-wahl[aria-current], .kurs-wahl:hover { color: var(--mond-hell); padding-left: .6rem; }
.kurs-wahl[aria-current] .kw-name::before { content: ""; display: inline-block; width: .45rem; height: .45rem; margin-right: .55rem; border-radius: 50%; background: var(--laterne); box-shadow: 0 0 .5rem var(--laterne); vertical-align: middle; }
.kw-zahl { color: var(--gold); font-size: .9rem; }
@media (max-width: 79.99rem) {
  .kurswahl-inhalt { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .kurswahl-text { grid-column: 1 / -1; }
}
@media (max-width: 47.99rem) {
  .kurswahl-inhalt { grid-template-columns: 1fr; }
  .rad-halter { width: min(86vw, 22rem); }
}

/* ---------- Startseite: Alternativen ---------- */
.alternativen { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--r8); align-items: center; padding-block: var(--abschnitt) 0; }
.alternativen-bild { justify-self: end; width: min(100%, 24rem); }
.goldrahmen { position: relative; padding: .55rem; border-radius: 6px; background: linear-gradient(135deg, var(--gold-hell), var(--gold-tief) 25%, var(--gold) 50%, #6E521C 75%, var(--gold-hell)); box-shadow: var(--schatten-tief), inset 0 0 0 1px rgba(0, 0, 0, .4); rotate: -2deg; transition: rotate var(--d-l) var(--ease-segel); }
.goldrahmen img { width: 100%; height: auto; border-radius: 3px; box-shadow: inset 0 0 0 1px #000; }
.goldrahmen:hover { rotate: 0deg; }
.alternativen-text .titel-3 { margin-bottom: 1.2rem; max-width: 28ch; }
@media (max-width: 47.99rem) { .alternativen { grid-template-columns: 1fr; gap: var(--r6); } .alternativen-bild { justify-self: start; width: min(80%, 22rem); } }

/* ---------- Startseite: Blitz-Kinoszene ---------- */
.blitzszene { --hell: .3; position: relative; isolation: isolate; display: grid; align-items: end; min-height: max(92svh, 34rem); margin-top: var(--abschnitt); overflow: hidden; }
.blitzszene-bild { position: absolute; inset: 0; z-index: -2; }
.blitzszene-bild picture, .blitzszene-bild img { width: 100%; height: 100%; object-fit: cover; background-size: cover; }
.blitzszene-bild img { filter: brightness(var(--hell)) saturate(calc(.45 + var(--hell) * .5)) contrast(1.08); }
.blitzszene-schleier { position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, var(--abyss) 2%, rgba(5, 8, 12, .55) 30%, rgba(5, 8, 12, 0) 60%), linear-gradient(180deg, var(--abyss), transparent 22%); }
.blitzszene-inhalt { padding-bottom: var(--r8); }
.blitzszene-inhalt .titel-1 { max-width: 18ch; margin-top: .8rem; text-shadow: 0 .4rem 2rem rgba(0, 0, 0, .8); }
.blitz-knopf { position: absolute !important; right: var(--rand); bottom: var(--r8); }
.blitz-knopf .sym { color: var(--see-hell); }

.fuenf { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--r7) var(--r6); padding-top: var(--r6); }
.fuenf-text { grid-column: 1 / -1; }
.fuenf-video { grid-column: 1 / span 7; }
.fuenf-video .video { margin: 0; }
.fuenf-nach { grid-column: 8 / -1; align-self: center; }
@media (max-width: 63.99rem) { .fuenf { grid-template-columns: minmax(0, 1fr); } .fuenf-text, .fuenf-video, .fuenf-nach { grid-column: 1; } }

/* ---------- Startseite: Top-5 ---------- */
.topfuenf { padding-top: var(--abschnitt); }
.topfuenf-kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--r4) var(--r8); align-items: end; margin-bottom: var(--r8); }
.topfuenf-kopf .hud-label { grid-column: 1 / -1; }
.plaetze { display: grid; gap: var(--abschnitt); counter-reset: platz; }
.platz { position: relative; display: grid; grid-template-columns: minmax(6rem, .5fr) minmax(0, .9fr) minmax(0, 1.4fr); gap: var(--r6) var(--r7); align-items: center; }
.platz:nth-child(even) { grid-template-columns: minmax(0, 1.4fr) minmax(0, .9fr) minmax(6rem, .5fr); }
.platz:nth-child(even) .platz-nr { order: 3; }
.platz:nth-child(even) .platz-bild { order: 2; }
.platz:nth-child(even) .platz-text { order: 1; }
.platz-nr {
  font-family: var(--f-display); font-size: clamp(6rem, 4rem + 9vw, 19rem); font-weight: 700; line-height: .8; text-align: center;
  color: transparent; -webkit-text-stroke: 2px rgba(232, 194, 107, .75);
  background: linear-gradient(180deg, rgba(246, 223, 160, .55), rgba(232, 194, 107, .05) 85%); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 0 2rem rgba(232, 194, 107, .18));
}
.platz-bild .goldrahmen { width: 100%; }
.platz:nth-child(even) .goldrahmen { rotate: 2deg; }
.platz-bild img { width: 100%; height: auto; }
.platz-text .titel-3 { margin-bottom: .8rem; }
.platz-text .wertung { margin-bottom: 1.1rem; }
.platz-text .knopf { margin-top: 1.4rem; }
@media (max-width: 63.99rem) {
  .platz, .platz:nth-child(even) { grid-template-columns: auto minmax(0, 1fr); }
  .platz-nr, .platz:nth-child(even) .platz-nr { order: 0; grid-row: span 2; align-self: start; font-size: clamp(5rem, 18vw, 9rem); }
  .platz-bild, .platz:nth-child(even) .platz-bild { order: 1; max-width: 26rem; }
  .platz-text, .platz:nth-child(even) .platz-text { order: 2; grid-column: 2; }
  .topfuenf-kopf { grid-template-columns: 1fr; }
}
@media (max-width: 34rem) {
  .platz, .platz:nth-child(even) { grid-template-columns: 1fr; }
  .platz-nr, .platz:nth-child(even) .platz-nr { grid-row: auto; text-align: left; font-size: 5.5rem; }
  .platz-text, .platz:nth-child(even) .platz-text { grid-column: 1; }
}
.schluss { padding-top: var(--abschnitt); }
.schluss .titel-2 { max-width: 24ch; margin-bottom: var(--r6); }

/* ---------- Kategorie ---------- */
.kat-kopf { min-height: max(88svh, 36rem); }
.kat-kopf-inhalt { padding-top: 8rem; padding-bottom: var(--r7); display: grid; gap: 1.1rem; justify-items: start; }
.kat-kopf-inhalt .titel-hero { max-width: 19ch; font-size: clamp(2.5rem, 1rem + 4.4vw, 7.6rem); line-height: .95; }
.kat-unter { max-width: 46ch; font-family: var(--f-hud); font-weight: 600; font-size: var(--t-l); letter-spacing: .02em; color: var(--gold-hell); }
.hud-raster--kat { width: min(100%, 40rem); margin-top: .4rem; }
.kat-tabs ul { display: flex; flex-wrap: wrap; gap: .4rem; }
.kat-tabs a { display: inline-flex; align-items: baseline; gap: .5rem; padding: .5rem .9rem; border: 1px solid var(--linie-stark); font-family: var(--f-hud); font-weight: 600; letter-spacing: .04em; color: var(--mond); text-decoration: none; background: rgba(5, 8, 12, .45); transition: border-color var(--d-s), color var(--d-s), background-color var(--d-s); }
.kat-tabs a span { font-size: .8em; color: var(--gold); }
.kat-tabs a:hover { border-color: var(--gold-linie); color: var(--gold-hell); }
.kat-tabs a[aria-current] { background: var(--gold); border-color: var(--gold); color: #1A1206; }
.kat-tabs a[aria-current] span { color: #4A3510; }
.kat-einleitung { padding-block: var(--r8); }
.kat-bibliothek { padding-bottom: var(--abschnitt); }
.kat-bib-kopf { display: grid; gap: 1.2rem; margin-bottom: var(--r6); }
.bib-filter { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.6rem; }
.bib-gruppe { display: flex; flex-wrap: wrap; gap: .3rem; }
.bib-zaehler { margin-left: auto; font-family: var(--f-hud); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: .85rem; color: var(--mond-matt); }
.karten-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr)); gap: clamp(1rem, 1.4vw, 2rem); }
.raster-platz { min-width: 0; }
.raster-platz.versteckt { display: none; }
.kat-mehr { padding-bottom: 0; }
/* Kategorie-Texte: ein durchgehender Text, so breit wie die Kartensammlung darunter. */
.fliesstext--kat, .fliesstext--gross.fliesstext--kat { max-width: none; }
.fliesstext--kat > :first-child { margin-top: 0; }
.kat-mehr .mehr { margin-top: 1.05em; }
.kat-mehr .mehr-inhalt > .fliesstext--kat { margin-top: 0; }

/* ---------- Spieleseite ---------- */
.spiel-kopf { min-height: max(94svh, 40rem); }
.spiel-kopf--kat .szene-bild img { filter: blur(7px) brightness(.42) saturate(.75); transform: scale(1.08); }
.spiel-kopf-thumb { position: absolute; inset: -10%; z-index: 1; background-size: cover; background-position: center; filter: blur(70px) saturate(1.5); opacity: .38; mix-blend-mode: screen; pointer-events: none; }
.spiel-kopf-inhalt { padding-top: 7.5rem; padding-bottom: var(--r6); }
.spiel-kopf-raster { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--r6) var(--r8); align-items: end; margin-top: 1.4rem; }
.spiel-kopf-text { display: grid; gap: 1.1rem; justify-items: start; }
.titel-hero--spiel { font-size: clamp(2.8rem, 1rem + 6.4vw, 10rem); max-width: 14ch; }
.spiel-auszug { max-width: 56ch; font-size: var(--t-l); color: var(--mond); text-shadow: 0 2px 12px rgba(0, 0, 0, .8); }
.spiel-aktion { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-top: .4rem; }
.spiel-kopf-karte { rotate: 4deg; animation: schweben 7s ease-in-out infinite; }
@keyframes schweben { 50% { translate: 0 -.8rem; rotate: 2.5deg; } }
.hud-raster--spiel { margin-top: var(--r6); }
.spiel-raster { display: grid; grid-template-columns: minmax(13rem, 17rem) minmax(0, 1fr) minmax(16rem, 23rem); gap: var(--r7); align-items: start; padding-top: var(--abschnitt); }
.spiel-raster--artikel { grid-template-columns: minmax(13rem, 17rem) minmax(0, 1fr) minmax(0, 17rem); }
.spiel-raster--artikel .spiel-artikel { justify-self: center; width: min(100%, 72ch); }
.spiel-artikel { min-width: 0; }
.spiel-artikel .fliesstext { max-width: 70ch; }
.spiel-seite { position: sticky; top: 6rem; }
.panel--spielen .kanone { width: 100%; }
.weitere { padding-top: var(--abschnitt); }
@media (max-width: 89.99rem) {
  .spiel-raster { grid-template-columns: minmax(12rem, 16rem) minmax(0, 1fr); }
  .spiel-seite { position: static; grid-column: 2; display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--r4); }
  .spiel-seite .panel + .panel { margin-top: 0; }
}
@media (max-width: 63.99rem) {
  .spiel-raster, .spiel-raster--artikel { grid-template-columns: 1fr; gap: var(--r6); }
  .spiel-seite { grid-column: auto; }
  .spiel-kurs .kurs { position: static; max-height: none; padding: .9rem 1.1rem; border: 1px solid var(--linie); background: rgba(11, 22, 33, .55); }
  .spiel-kurs .kurs-titel { padding: 0; }
  .spiel-kurs .kurs[open] .kurs-titel { padding-bottom: .8rem; }
  .spiel-kopf-raster { grid-template-columns: 1fr; }
  .spiel-kopf-karte { display: none; }
}

/* ---------- Impressum „Kapitänskajüte“ ---------- */
.kajuete { --kx: 50%; --ky: 8%; --cx: -50rem; --cy: -50rem; --kr: 14rem; position: relative; isolation: isolate; display: grid; align-items: end; min-height: max(100svh, 40rem); overflow: hidden; background: #020304; }
.kajuete-bild, .kajuete-bild picture, .kajuete-bild img { position: absolute; inset: 0; width: 100%; height: 100%; }
.kajuete-bild img { object-fit: cover; background-size: cover; }
.kajuete-dunkel {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; background: rgba(2, 3, 4, .9);
  -webkit-mask-image: radial-gradient(circle at var(--kx) var(--ky), transparent 0, rgba(0, 0, 0, .15) calc(var(--kr) * .45), #000 var(--kr)), radial-gradient(circle at var(--cx) var(--cy), transparent 0, rgba(0, 0, 0, .2) 7rem, #000 19rem);
  mask-image: radial-gradient(circle at var(--kx) var(--ky), transparent 0, rgba(0, 0, 0, .15) calc(var(--kr) * .45), #000 var(--kr)), radial-gradient(circle at var(--cx) var(--cy), transparent 0, rgba(0, 0, 0, .2) 7rem, #000 19rem);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  transition: background-color 1.2s;
}
html.no-js .kajuete-dunkel, html.ruhig .kajuete-dunkel { background: rgba(2, 3, 4, .45); -webkit-mask-image: none; mask-image: none; }
.kajuete.ausgepustet .kajuete-dunkel { background: rgba(1, 1, 2, .97); }
.kerzen-glut { position: absolute; z-index: 2; left: 0; top: 0; width: 26rem; height: 26rem; translate: calc(var(--kx, 50vw) - 50%) calc(var(--ky, 80vh) - 50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 190, 110, .26), rgba(242, 165, 65, .08) 55%, transparent); mix-blend-mode: screen; pointer-events: none; animation: kerze 2.8s ease-in-out infinite; }
.kajuete.ausgepustet .kerzen-glut { opacity: 0; animation: none; }
@keyframes kerze { 0%, 100% { scale: 1; opacity: 1; } 20% { scale: .96; opacity: .85; } 45% { scale: 1.04; } 70% { scale: .98; opacity: .92; } }
.kerze-knopf { position: absolute; z-index: 4; left: 0; top: 0; width: 3.2rem; height: 4.2rem; translate: calc(var(--kx, 50vw) - 50%) calc(var(--ky, 80vh) - 60%); border-radius: 50% 50% 40% 40%; cursor: pointer; }
.siegel-im-bild { position: absolute; z-index: 4; left: var(--sx, 62%); top: var(--sy, 70%); width: clamp(3rem, 6vw, 7rem); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; }
.siegel-ring { position: absolute; inset: -.4rem; border-radius: 50%; border: 2px solid rgba(232, 120, 100, .7); box-shadow: 0 0 1.4rem rgba(179, 38, 30, .7); animation: puls 2.2s var(--ease-segel) infinite; }
.kajuete.entsiegelt .siegel-im-bild { display: none; }
.geheimfach { position: absolute; z-index: 4; left: var(--gx, 7%); top: var(--gy, 88%); }
.geheimfach-knauf { width: 1.3rem; height: 1.3rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFF1C4, #B8923F 45%, #4A3510); box-shadow: 0 0 0 2px rgba(0, 0, 0, .6), 0 .2rem .4rem #000; transition: transform var(--d-m) var(--ease-kanone); }
.geheimfach-knauf:hover { transform: scale(1.25); }
.geheimfach-lade { position: absolute; left: -.4rem; bottom: 2rem; width: min(22rem, 80vw); padding: 1rem 1.1rem; background: linear-gradient(180deg, #3A2414, #22150B); border: 1px solid #6A4325; box-shadow: var(--schatten-tief); color: #F2E6D6; font-size: .95rem; transform-origin: 0 100%; }
.geheimfach-notiz { font-style: italic; }
.kajuete-inhalt { position: relative; z-index: 3; padding-top: 8rem; padding-bottom: var(--r8); display: grid; gap: 1rem; justify-items: start; max-width: none; }
.kajuete-inhalt > * { max-width: 44rem; }
.kajuete-inhalt .titel-hero { text-shadow: 0 .4rem 2rem rgba(0, 0, 0, .9); }
.kajuete-lead { font-size: var(--t-l); color: var(--mond); max-width: 42ch; text-shadow: 0 2px 12px #000; }
.kajuete-aktion { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: .4rem; }
.kajuete-meta { margin-top: .4rem; }

.kaperbrief { position: relative; padding-block: var(--abschnitt) 0; }
.kaperbrief-umschlag { display: none; }
html.js:not(.ruhig) .kaperbrief.versiegelt .kaperbrief-umschlag { display: grid; }
.kaperbrief-umschlag {
  position: relative; place-items: center; width: min(44rem, 100%); aspect-ratio: 1.55; margin-inline: auto; overflow: hidden;
  background: radial-gradient(120% 90% at 30% 20%, #E9DAB4, #CDB27A 55%, #9C7D46), #CDB27A; border-radius: 6px;
  box-shadow: var(--schatten-tief), inset 0 0 4rem rgba(80, 50, 15, .55);
}
.umschlag-klappe { position: absolute; inset: 0 0 38% 0; background: linear-gradient(170deg, rgba(255, 245, 215, .5), rgba(120, 90, 40, .25)); clip-path: polygon(0 0, 100% 0, 50% 100%); filter: drop-shadow(0 4px 6px rgba(60, 35, 5, .4)); }
.umschlag-siegel { position: absolute; left: 50%; top: 62%; width: clamp(6rem, 22%, 9rem); translate: -50% -50%; filter: drop-shadow(0 .5rem .8rem rgba(40, 10, 5, .6)); }
.umschlag-siegel svg { width: 100%; overflow: visible; }
.siegel-haelfte path { fill: #A3231B; stroke: #6E120D; stroke-width: 1.2; }
.siegel-praegung circle { stroke: rgba(60, 0, 0, .55); stroke-width: 2; }
.siegel-praegung path { fill: rgba(60, 0, 0, .55); }
.umschlag-text { position: absolute; bottom: 9%; left: 0; right: 0; text-align: center; font-family: var(--f-display); font-size: var(--t-xl); color: #3A2410; }
.umschlag-text span { display: block; font-family: var(--f-hud); font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: #5A3E1C; }
.kaperbrief-inhalt { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: var(--r7); align-items: start; }
.musterrolle, .schiffsartikel { position: relative; padding: clamp(1.4rem, 2.4vw, 3rem); background: linear-gradient(180deg, rgba(18, 30, 41, .92), rgba(9, 16, 23, .92)); border: 1px solid var(--gold-linie); box-shadow: var(--schatten-tief); }
.musterrolle::before, .schiffsartikel::before { content: ""; position: absolute; inset: .5rem; border: 1px solid rgba(232, 194, 107, .16); pointer-events: none; }
.musterrolle-kopf { margin-bottom: 1.4rem; }
.musterrolle-titel { font-family: var(--f-display); font-size: var(--t-2xl); line-height: 1; color: var(--gold-hell); margin-top: .5rem; }
.crew-liste { display: grid; }
.crew { display: grid; grid-template-columns: minmax(10rem, 15rem) minmax(0, 1fr); gap: .8rem 1.8rem; padding: 1.4rem 0; border-top: 1px dashed rgba(232, 194, 107, .25); }
.crew-rolle { display: grid; grid-template-columns: auto 1fr; gap: .1rem .8rem; align-content: start; }
.crew-icon { grid-row: span 2; display: grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; color: #1A1206; background: radial-gradient(circle at 35% 30%, #FFF1C4, var(--gold) 45%, var(--gold-tief)); }
.crew-icon .sym { width: 1.4rem; height: 1.4rem; }
.crew-name { font-family: var(--f-display); font-size: 1.45rem; line-height: 1.05; color: var(--mond-hell); }
.crew-unter { font-size: .82rem; color: var(--mond-matt); line-height: 1.35; }
.crew-titel { font-family: var(--f-hud); font-weight: 600; font-size: 1.12rem; letter-spacing: .03em; color: var(--gold-hell); margin-bottom: .4rem; }
.crew-angabe p, .crew-angabe li { font-size: 1.04rem; }
.crew-angabe ul.table { display: grid; gap: .3rem; }
.crew-angabe ul.table li { display: flex; flex-wrap: wrap; gap: .2rem 1rem; }
.crew-angabe ul.table li span:first-child { min-width: 5.5rem; color: var(--mond-matt); }
.artikel-liste { display: grid; gap: 1.6rem; }
.artikel { padding-top: 1.4rem; border-top: 1px dashed rgba(232, 194, 107, .25); }
.artikel-nr { font-family: var(--f-hud); font-weight: 600; font-size: .78rem; letter-spacing: var(--sperr-hud); text-transform: uppercase; color: var(--laterne); }
.artikel-titel { font-family: var(--f-display); font-size: var(--t-xl); margin: .3rem 0 .7rem; }
.artikel .fliesstext { font-size: .98rem; }
.unterschrift { grid-column: 1 / -1; display: grid; justify-items: center; gap: .4rem; padding-top: var(--r5); }
.unterschrift-svg { width: min(26rem, 80%); }
.unterschrift-zug { fill: none; stroke: var(--gold-hell); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.unterschrift-strich { stroke-width: 1.4; opacity: .7; }
.unterschrift p { font-family: var(--f-hud); font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mond-matt); }
@media (max-width: 63.99rem) { .kaperbrief-inhalt { grid-template-columns: 1fr; } }
@media (max-width: 40rem) { .crew { grid-template-columns: 1fr; } }

/* ---------- Datenschutz „Schatzkammer“ ---------- */
.kammer-kopf { --cx: -50rem; --cy: -50rem; position: relative; isolation: isolate; display: grid; align-items: end; min-height: max(92svh, 38rem); overflow: hidden; background: #020304; }
.kammer-bild, .kammer-bild picture, .kammer-bild img { position: absolute; inset: 0; width: 100%; height: 100%; }
.kammer-bild img { object-fit: cover; background-size: cover; }
.kammer-dunkel {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(2, 3, 4, .88), rgba(2, 3, 4, .55) 55%, rgba(2, 3, 4, .35)), linear-gradient(0deg, var(--abyss), transparent 40%);
  -webkit-mask-image: radial-gradient(circle at var(--cx) var(--cy), rgba(0, 0, 0, .25) 0, #000 20rem); mask-image: radial-gradient(circle at var(--cx) var(--cy), rgba(0, 0, 0, .25) 0, #000 20rem);
}
.fackel { position: absolute; z-index: 2; width: 18rem; height: 18rem; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 170, 80, .3), rgba(242, 120, 40, .1) 50%, transparent); mix-blend-mode: screen; pointer-events: none; animation: kerze 2.1s ease-in-out infinite; }
.fackel.f1 { left: var(--f1x, 38%); top: var(--f1y, 23%); }
.fackel.f2 { left: var(--f2x, 75.5%); top: var(--f2y, 21%); animation-duration: 2.7s; animation-delay: -.9s; }
.kammer-inhalt { position: relative; z-index: 3; padding-top: 8rem; padding-bottom: var(--r7); display: grid; gap: 1rem; justify-items: start; }
.kammer-inhalt .titel-hero { max-width: none; font-size: clamp(1.75rem, .2rem + 5vw, 8.4rem); text-shadow: 0 .4rem 2rem rgba(0, 0, 0, .9); }
.kammer-lead { max-width: 52ch; font-size: var(--t-l); color: var(--mond); text-shadow: 0 2px 12px #000; }
.hud-raster--kammer { width: min(100%, 38rem); }
.kammer-leiste { position: sticky; top: 4.6rem; z-index: 20; background: rgba(5, 8, 12, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-block: 1px solid var(--linie); }
.kammer-leiste-innen { display: grid; grid-template-columns: auto minmax(14rem, 1fr) auto; gap: .8rem 1.6rem; align-items: center; padding-block: .7rem; }
.truhen-leiste ol { display: flex; gap: .3rem; }
.truhen-leiste a { position: relative; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 1px solid var(--linie); color: var(--mond-matt); text-decoration: none; background: rgba(11, 22, 33, .6); transition: color var(--d-s), border-color var(--d-s), background-color var(--d-s); }
.truhen-leiste .lt-icon .sym { width: 1.35rem; height: 1.35rem; }
.lt-nr { position: absolute; right: .12rem; bottom: 0; font-family: var(--f-hud); font-weight: 700; font-size: .75rem; color: var(--mond-hell); }
.truhen-leiste a:hover { color: var(--gold-hell); border-color: var(--gold-linie); }
.truhen-leiste a.offen { color: var(--gold); border-color: var(--gold); background: rgba(232, 194, 107, .12); box-shadow: inset 0 0 .8rem rgba(232, 194, 107, .25); }
.truhen-leiste a.hier { outline: 1px solid var(--laterne); outline-offset: 2px; }
.laternen-suche { display: flex; align-items: center; gap: .3rem; min-width: 0; padding: .2rem .3rem .2rem .7rem; border: 1px solid var(--linie-stark); background: rgba(11, 22, 33, .7); }
.laternen-suche:focus-within { border-color: var(--laterne); box-shadow: 0 0 1.4rem -0.4rem var(--laterne); }
.ls-icon .sym { width: 1.25rem; height: 1.25rem; color: var(--laterne); }
.laternen-suche input { flex: 1; min-width: 0; height: 2.3rem; border: 0; background: none; outline: none; color: var(--mond-hell); }
.laternen-suche input::placeholder { color: var(--mond-matt); }
.laternen-suche .hud-knopf { min-width: 2.2rem; height: 2.2rem; padding: 0 .3rem; border: 0; background: none; }
.ls-treffer { font-family: var(--f-hud); font-weight: 600; font-size: .85rem; color: var(--mond-matt); white-space: nowrap; }
.kammer-knoepfe { display: flex; gap: .4rem; }
.kammer-knoepfe .knopf { min-height: 2.6rem; padding: .4rem .9rem; font-size: .95rem; }
.gold-balken { height: 3px; background: rgba(28, 42, 54, .9); }
.gold-balken span { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: linear-gradient(90deg, var(--gold-tief), var(--gold-hell)); box-shadow: 0 0 .8rem var(--gold); transition: width .9s var(--ease-segel); }
@media (max-width: 79.99rem) { .kammer-leiste-innen { grid-template-columns: 1fr auto; } .truhen-leiste { grid-column: 1 / -1; } }
@media (max-width: 47.99rem) {
  .kammer-inhalt .titel-hero { max-width: none; }
  .kammer-leiste { top: 4rem; }
  .kammer-leiste-innen { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .truhen-leiste ol { justify-content: space-between; gap: .15rem; }
  .truhen-leiste a { width: min(2.2rem, calc((100vw - 2rem) / 8 - .2rem)); height: 2.2rem; }
  .kammer-knoepfe { flex-wrap: wrap; }
  .kammer-knoepfe .knopf span { font-size: .9rem; }
}
mark.fund { background: rgba(242, 165, 65, .3); color: inherit; border-radius: 2px; box-shadow: 0 0 0 2px rgba(242, 165, 65, .3); }
mark.fund.aktuell { background: var(--laterne); color: #1A1206; box-shadow: 0 0 1.4rem var(--laterne), 0 0 0 3px rgba(242, 165, 65, .5); }

.truhen { display: grid; gap: var(--r6); padding-top: var(--r8); }
.truhe { position: relative; scroll-margin-top: 10rem; }
.truhe-kopf {
  position: relative; display: grid; grid-template-columns: clamp(6.5rem, 9vw, 11rem) minmax(0, 1fr) auto; gap: 1rem 2rem; align-items: center;
  padding: clamp(1rem, 1.6vw, 1.8rem); background: linear-gradient(180deg, rgba(20, 33, 46, .85), rgba(11, 22, 33, .85)); border: 1px solid var(--linie);
  transition: border-color var(--d-m), box-shadow var(--d-m);
}
.truhe.offen .truhe-kopf { border-color: var(--gold-linie); box-shadow: 0 0 3rem -1rem rgba(232, 194, 107, .35); }
.truhe-bild { position: relative; }
.truhe-svg { width: 100%; overflow: visible; filter: drop-shadow(0 .8rem 1rem rgba(0, 0, 0, .6)); }
.td-holz { fill: #5A3820; stroke: #22150B; stroke-width: 1.4; }
.tk-holz { fill: #4A2E1A; stroke: #22150B; stroke-width: 1.4; }
.td-band { fill: none; stroke: #9C7428; stroke-width: 6; }
.td-rand { stroke: #2E1C10; stroke-width: 3; }
.tk-schloss { fill: url(#g-messing); stroke: #4A3510; }
.tk-loch { fill: #1A1206; }
.truhe-gold { fill: var(--gold); opacity: 0; filter: drop-shadow(0 0 6px rgba(255, 210, 110, .8)); transition: opacity .6s .15s; }
.truhe-deckel { transform-box: view-box; transform-origin: 148px 52px; transition: transform .8s var(--ease-kanone); }
.truhe.offen .truhe-deckel { transform: translate(-4px, -14px) rotate(-16deg); }
.truhe.offen .truhe-gold { opacity: 1; }
.truhe-nr { position: absolute; left: 50%; top: 72%; translate: -50% -50%; font-family: var(--f-display); font-size: clamp(1.4rem, 2vw, 2.4rem); color: #F6DFA0; text-shadow: 0 2px 4px #000; pointer-events: none; }
.truhe-titel { font-family: var(--f-display); font-size: var(--t-xl); margin-top: .3rem; }
.truhe-inhalt { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin-top: .6rem; }
.truhe-inhalt a { font-size: .86rem; color: var(--mond-matt); text-decoration: none; border-bottom: 1px dotted var(--linie-stark); }
.truhe-inhalt a:hover { color: var(--gold-hell); }
.truhe-schloss { display: grid; gap: .5rem; justify-items: end; min-width: 13rem; }
.schloss-titel { font-family: var(--f-hud); font-weight: 600; font-size: .75rem; letter-spacing: var(--sperr-hud); text-transform: uppercase; color: var(--mond-matt); }
.schloss-hinweis { display: flex; align-items: center; gap: .25rem; font-family: var(--f-hud); font-size: .86rem; color: var(--mond-matt); }
.code-ziffer { display: inline-grid; place-items: center; width: 1.5rem; height: 1.7rem; border: 1px solid var(--linie); font-weight: 700; color: var(--gold-hell); }
.code-geheim span { opacity: var(--sicht, 0); color: var(--laterne); text-shadow: 0 0 .6rem var(--laterne); transition: opacity .25s; }
html.no-js .code-geheim span, html.ruhig .code-geheim span, html:not(.feinzeiger) .code-geheim span, .truhe-schloss:focus-within .code-geheim span { opacity: 1; }
.schloss-raeder { display: flex; gap: .3rem; }
.rad-ziffer { position: relative; display: grid; place-items: center; width: 2.6rem; height: 3.1rem; overflow: hidden; border: 1px solid var(--gold-linie); background: linear-gradient(180deg, #0A1016, #2A3642 50%, #0A1016); font-family: var(--f-display); font-size: 1.6rem; color: var(--gold-hell); box-shadow: inset 0 .6rem .8rem rgba(0, 0, 0, .7), inset 0 -.6rem .8rem rgba(0, 0, 0, .7); }
.rad-ziffer:hover { border-color: var(--gold); }
.rad-ziffer.richtig { border-color: var(--gold); color: #FFF4D6; box-shadow: inset 0 0 1rem rgba(232, 194, 107, .35); }
.truhe.offen .truhe-schloss .schloss-raeder, .truhe.offen .schloss-hinweis { opacity: .45; }
.to-auf, .truhe.offen .to-zu { display: none; }
.truhe.offen .to-auf { display: inline; }
.gepluendert { position: absolute; right: 1.2rem; top: -.9rem; z-index: 2; padding: .2rem .8rem; border: 2px solid var(--blut-hell); color: var(--blut-hell); font-family: var(--f-display); font-size: 1.15rem; rotate: -6deg; background: rgba(5, 8, 12, .85); opacity: 0; scale: 1.6; transition: opacity .3s, scale .4s var(--ease-kanone); pointer-events: none; }
.truhe.offen .gepluendert { opacity: 1; scale: 1; }
.truhe-schatz { margin-left: clamp(1rem, 9vw, 13rem); padding: 1.8rem 0 1rem 1.8rem; border-left: 2px solid var(--gold-linie); max-width: 76ch; }
.truhe-schatz[hidden="until-found"] { display: block; }
.truhe-schatz h3 { font-size: var(--t-l); }
.truhe-schatz a { word-break: break-word; }
.kammer-ende { display: flex; justify-content: center; padding-top: var(--r6); }
.muenz-regen { position: fixed; z-index: var(--z-toast); width: 1.4rem; height: 1.4rem; pointer-events: none; }
@media (max-width: 47.99rem) {
  .truhe-kopf { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .truhe-schloss { grid-column: 1 / -1; justify-items: start; grid-template-columns: 1fr auto; align-items: center; }
  .schloss-titel, .schloss-hinweis { grid-column: 1 / -1; }
  .truhe-schatz { margin-left: .6rem; padding-left: 1rem; }
}

/* ---------- Links „Hafenregister“ ---------- */
.hafen { position: relative; isolation: isolate; min-height: max(100svh, 40rem); display: grid; align-items: center; overflow: hidden; }
.hafen-brett, .hafen-brett picture, .hafen-brett img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hafen-brett { z-index: -2; }
.hafen-brett img { object-fit: cover; background-size: cover; filter: brightness(.55) saturate(.85); }
.hafen-schleier { position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 70% at 30% 50%, rgba(242, 165, 65, .12), transparent 70%), linear-gradient(0deg, var(--abyss), transparent 30%), linear-gradient(180deg, rgba(5, 8, 12, .8), transparent 30%); }
.hafen-inhalt { position: relative; z-index: 1; display: grid; gap: 1.2rem; justify-items: start; padding-block: 8rem var(--r8); }
.aushang { position: relative; width: min(46rem, 100%); margin-top: var(--r5); rotate: -1.2deg; }
.aushang-papier {
  position: relative; padding: clamp(1.6rem, 3vw, 3rem); color: #1B140B; font-size: var(--t-l);
  background: radial-gradient(120% 120% at 20% 10%, #F3E8CC, #E0CFA4 60%, #C7AE78); box-shadow: 0 2rem 3rem -1rem rgba(0, 0, 0, .8), inset 0 0 3rem rgba(120, 80, 30, .35);
  clip-path: polygon(0 1%, 4% 0, 30% 1.5%, 58% 0, 100% 1%, 99% 30%, 100% 62%, 98.5% 100%, 66% 98.5%, 35% 100%, 2% 98.6%, 0 70%, 1% 36%);
}
.aushang-papier a { color: #6E1A10; text-decoration-color: rgba(110, 26, 16, .5); }
.aushang-papier a:hover { color: #A3231B; text-shadow: none; }
.aushang-nagel { position: absolute; z-index: 1; left: 50%; top: -.6rem; width: 1.3rem; height: 1.3rem; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #D8DEE4, #5E6B78 60%, #2A323A); box-shadow: 0 .3rem .4rem rgba(0, 0, 0, .7); }
.aushang-stempel { position: absolute; right: 1.4rem; bottom: -1.6rem; padding: .4rem .9rem; border: 3px double rgba(163, 35, 27, .85); color: rgba(163, 35, 27, .9); font-family: var(--f-display); font-size: 1.2rem; rotate: -9deg; background: rgba(243, 232, 204, .4); }
.hafen-wege { margin-top: var(--r7); }
.hafen-liste { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }

/* ---------- Casino-Seiten ---------- */
.artikel-kopf { min-height: max(72svh, 30rem); }
.artikel-kopf .szene-bild img { filter: brightness(.6) saturate(.85); }
.artikel-kopf--taverne .szene-bild img { filter: brightness(.78) saturate(.95); }
.artikel-kopf-inhalt { padding-top: 8rem; padding-bottom: var(--r7); display: grid; gap: 1rem; justify-items: start; }
.titel-hero--artikel { font-size: clamp(2.4rem, 1rem + 4.6vw, 7.5rem); max-width: 20ch; }

/* ---------- 404 „Über Bord“ ---------- */
.ueberbord { position: relative; isolation: isolate; display: grid; align-items: center; min-height: max(100svh, 42rem); overflow: hidden; background: #010203; }
.ueberbord-bild, .ueberbord-bild picture, .ueberbord-bild img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ueberbord-bild { z-index: 0; }
.ueberbord-bild img { object-fit: cover; background-size: cover; }
.boot-laterne { position: absolute; z-index: 1; left: var(--bx, 74%); top: var(--by, 56%); width: 16rem; height: 16rem; translate: -50% -50%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 190, 110, .32), rgba(242, 165, 65, .1) 50%, transparent); mix-blend-mode: screen; pointer-events: none; animation: kerze 2.4s ease-in-out infinite; }
.bojen { position: absolute; inset: 0; z-index: 1; }
.boje { position: absolute; display: grid; justify-items: center; gap: .4rem; text-decoration: none; translate: -50% -50%; animation: boje-wiegen 4s ease-in-out infinite; }
.boje-licht { width: 1rem; height: 1rem; border-radius: 50%; background: #FF6B5A; box-shadow: 0 0 1rem #FF4A36, 0 0 2.6rem rgba(255, 74, 54, .6); animation: boje-blinken 2s steps(2) infinite; }
.boje--1 .boje-licht, .boje--3 .boje-licht { background: #6BFFB0; box-shadow: 0 0 1rem #3DFF95, 0 0 2.6rem rgba(61, 255, 149, .55); }
.boje-text { padding: .2rem .6rem; font-family: var(--f-hud); font-weight: 600; letter-spacing: .06em; color: var(--mond-hell); background: rgba(5, 8, 12, .7); border: 1px solid var(--linie-stark); }
.boje--0 { left: 60%; top: 74%; } .boje--1 { left: 86%; top: 66%; animation-delay: -1s; } .boje--2 { left: 70%; top: 88%; animation-delay: -2s; } .boje--3 { left: 92%; top: 84%; animation-delay: -3s; }
@keyframes boje-wiegen { 50% { translate: -50% calc(-50% - .4rem); rotate: 2deg; } }
@keyframes boje-blinken { 50% { opacity: .35; } }
.nebel-canvas { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; }
.ueberbord-schleier { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(90deg, rgba(1, 2, 3, .82) 0%, rgba(1, 2, 3, .5) 34%, rgba(1, 2, 3, 0) 60%), linear-gradient(0deg, rgba(1, 2, 3, .6), transparent 30%); }
.ueberbord-inhalt { position: relative; z-index: 3; display: grid; gap: 1rem; justify-items: start; padding-block: 8rem 5rem; }
.ueberbord-inhalt > * { max-width: 40rem; }
.ueberbord-inhalt .titel-hero { text-shadow: 0 .4rem 2rem #000; }
.ueberbord-text { padding: 1.2rem 1.4rem; background: rgba(2, 4, 6, .72); border-left: 2px solid var(--gold-linie); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.rettung-liste { display: flex; flex-wrap: wrap; gap: .5rem; }
.ueberbord-spiel { display: grid; gap: .8rem; justify-items: start; margin-top: .6rem; }
.ueberbord-tipp { font-size: .95rem; color: var(--mond); text-shadow: 0 1px 6px #000, 0 0 14px #000; }
@media (max-width: 47.99rem) {
  .boje--0 { left: 22%; top: 90%; } .boje--1 { left: 78%; top: 92%; } .boje--2 { left: 50%; top: 96%; } .boje--3 { left: 84%; top: 12%; }
  .ueberbord-inhalt { padding-bottom: 9rem; }
}

.dublone--nebel { left: 16%; top: 62%; z-index: 1 !important; }
.zwieback { float: right; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; margin: -.2rem 0 .4rem 1rem; color: #C9A46A; border-radius: 6px; transition: transform var(--d-m) var(--ease-kanone), filter var(--d-m); }
.zwieback svg { width: 100%; height: 100%; }
.zwieback:hover { transform: rotate(-12deg) scale(1.12); filter: drop-shadow(0 0 .5rem rgba(242, 165, 65, .5)); }
.zwieback.zerbroeselt { opacity: 0; pointer-events: none; transition: opacity .4s; }
.truhe-schatz[hidden] { padding-block: 0; border-left-color: transparent; }
.mehr-inhalt[hidden] { margin: 0; }
@media (max-width: 30rem) {
  .truhe-kopf { grid-template-columns: 4.2rem minmax(0, 1fr); gap: .8rem 1rem; padding: .9rem; }
  .truhe-titel { font-size: 1.3rem; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
  .truhe-nr { font-size: 1.1rem; }
  .truhe-schloss { min-width: 0; }
}
/* Originalbilder der Live-Seite sind klein (250–400 px): höchstens ~1,6-fach vergrößern, damit sie scharf bleiben */
.platz-bild { max-width: 480px; justify-self: center; width: 100%; }
.alternativen-bild { max-width: 400px; }

.geheimfach.rechts .geheimfach-lade { left: auto; right: -.4rem; transform-origin: 100% 100%; }

/* ---------- Handy-Feinschliff (iPhone-Prüfung 2026-11-08) ---------- */
@media (max-width: 40rem) {
  /* „Blitz auslösen“ lag über der Überschrift: unter den Titel setzen */
  .blitzszene { align-content: end; }
  .blitzszene-inhalt { padding-bottom: 1.2rem; }
  .blitz-knopf { position: relative !important; right: auto; bottom: auto; justify-self: start; margin: 0 0 var(--r8) var(--rand); }
  /* Kategorie-Kopf: Text liegt auf dem Handy über dem ganzen Bild (z. B. Kerzenlicht bei PC) → kräftiger Schleier */
  .kat-kopf .szene-schleier {
    background: linear-gradient(0deg, var(--abyss) 0%, rgba(5, 8, 12, .88) 28%, rgba(5, 8, 12, .74) 56%, rgba(5, 8, 12, .38) 80%, rgba(5, 8, 12, .6) 100%);
  }
  .kat-kopf-inhalt :is(.titel-hero, .kat-unter, .brotkrumen, .hud-label) { text-shadow: 0 2px 14px rgba(0, 0, 0, .9), 0 0 2px rgba(0, 0, 0, .7); }
}
/* Größere Tippfläche für den Messingknauf (Impressum), Optik bleibt */
.geheimfach-knauf { position: relative; }
.geheimfach-knauf::after { content: ""; position: absolute; inset: -.65rem; border-radius: 50%; }