/* ==========================================================================
   Spieleseite Browsergames und PC („Spieldeck“): Aufbau aus Mockup 3, Stil von Mockup 2
   Kopf mit Fernrohr · Kursbuch · Testtext · Seitenkarte mit Steuerrad-Wertung · Reihe · Backbord/Steuerbord
   Nur Regeln mit Präfix .deck-…; gemeinsame Bausteine (Kanone, Kurs, Reihe, Karten) werden hier nur ergänzt.
   ========================================================================== */

/* ---------- Kopf: scharfe Kinoszene ---------- */
.deck-kopf { min-height: max(100svh, 42rem); align-items: stretch; }
.deck-kopf .szene-schleier {
  background:
    radial-gradient(80% 78% at 6% 92%, rgba(5, 8, 12, .9), rgba(5, 8, 12, .62) 42%, rgba(5, 8, 12, 0) 74%),
    linear-gradient(0deg, var(--abyss) 0%, rgba(5, 8, 12, .45) 13%, rgba(5, 8, 12, 0) 32%),
    linear-gradient(180deg, rgba(5, 8, 12, .78) 0%, rgba(5, 8, 12, .3) 14%, rgba(5, 8, 12, 0) 24%);
}
.deck-kopf-inhalt {
  display: grid; grid-template-rows: auto 1fr; gap: var(--r5);
  min-height: max(100svh, 42rem); padding-top: 7.2rem; padding-bottom: clamp(2rem, 6vh, 5rem);
}
.deck-kopf-raster { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--r6) var(--r8); align-items: end; }
.deck-kopf-text { display: grid; gap: 1.05rem; justify-items: start; align-self: end; min-width: 0; }
.deck-kopf-text > .hud-label { color: var(--mond); text-shadow: 0 1px 8px #000; }
.deck-kopf .brotkrumen { justify-self: start; }
.deck-kopf .brotkrumen ol { padding: .3rem .8rem; border-radius: var(--rad-s); background: rgba(5, 8, 12, .62); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 0 0 1px var(--linie); }
.deck-titel {
  font-size: clamp(3rem, 1rem + 6.2vw, 10rem); max-width: 13ch; line-height: .94;
  text-shadow: 0 .04em .22em rgba(0, 0, 0, .8);   /* klein halten: SplitText-Masken schneiden große Schatten ab */
}
.deck-titel--mittel { font-size: clamp(2.7rem, 1rem + 4.9vw, 8.4rem); max-width: 15ch; }
.deck-titel--lang { font-size: clamp(2.3rem, .9rem + 3.7vw, 6.4rem); max-width: 19ch; line-height: 1; }

/* Chips */
.deck-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.deck-chip {
  --hk: var(--gold);
  display: inline-flex; align-items: center; gap: .55em; min-height: 2.3rem; padding: .3rem .95rem;
  font-family: var(--f-hud); font-weight: 600; font-size: .86rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--mond-hell); text-decoration: none; border: 1px solid var(--linie-stark); border-radius: var(--rad-s);
  background:
    linear-gradient(var(--hk), var(--hk)) top left / .55rem 1px no-repeat,
    linear-gradient(var(--hk), var(--hk)) top left / 1px .55rem no-repeat,
    linear-gradient(var(--hk), var(--hk)) bottom right / .55rem 1px no-repeat,
    linear-gradient(var(--hk), var(--hk)) bottom right / 1px .55rem no-repeat,
    rgba(5, 8, 12, .66);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: color var(--d-s), border-color var(--d-s), background-size var(--d-m) var(--ease-segel);
}
.deck-chip .sym { width: 1rem; height: 1rem; color: var(--gold); }
.deck-chip--kat { color: var(--gold-hell); border-color: var(--gold-linie); }
a.deck-chip:hover { color: #FFF4D6; border-color: var(--gold); background-size: 1.1rem 1px, 1px 1.1rem, 1.1rem 1px, 1px 1.1rem, auto; }
.deck-chip-licht { width: .55em; height: .55em; border-radius: 50%; flex: none; background: #5BE08A; box-shadow: 0 0 .6em #2FBF68; }
.deck-chip--aus { color: #FFC9C1; border-color: rgba(224, 87, 75, .5); --hk: var(--blut-hell); }
.deck-chip--aus .deck-chip-licht { background: var(--blut-hell); box-shadow: 0 0 .6em var(--blut); }
.deck-chip--test .deck-chip-licht { background: var(--mond-matt); box-shadow: none; }

/* Mini-Wertung */
.deck-mini { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem 1rem; }
.deck-mini-pips .pips { font-size: 1.3rem; gap: .1em; }
.deck-mini-text { font-family: var(--f-hud); font-weight: 600; font-size: 1.02rem; letter-spacing: .03em; color: var(--mond); text-shadow: 0 1px 8px #000; }
.deck-mini-text b { font-family: var(--f-display); font-size: 1.45em; font-weight: 600; color: var(--gold-hell); letter-spacing: 0; }
.deck-mini-anzahl { color: var(--mond); }
.deck-mini-link {
  font-family: var(--f-hud); font-weight: 600; font-size: .9rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold-hell); text-decoration: underline; text-decoration-color: var(--gold-linie); text-underline-offset: .3em;
}
.deck-mini-link:hover { color: var(--laterne); text-decoration-color: var(--laterne); }
.deck-aktion { display: flex; flex-wrap: wrap; gap: .8rem 1rem; align-items: center; margin-top: .45rem; }

/* Gesunken: Wachssiegel + Hinweis statt Spielknopf */
.deck-gesunken {
  display: flex; align-items: center; gap: 1rem; max-width: 36rem; padding: .55rem 1.3rem .55rem .55rem;
  border: 1px solid rgba(224, 87, 75, .45); border-radius: 999px var(--rad-m) var(--rad-m) 999px;
  background: linear-gradient(90deg, rgba(122, 20, 14, .55), rgba(5, 8, 12, .7) 70%);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.deck-gesunken p { font-size: .98rem; line-height: 1.45; color: var(--mond-hell); }
.deck-gesunken strong { color: #FFC9C1; font-weight: 600; }
.deck-siegel { position: relative; display: grid; place-items: center; flex: none; width: 5.2rem; height: 5.2rem; rotate: -9deg; filter: drop-shadow(0 .35rem .5rem rgba(0, 0, 0, .7)); }
.deck-siegel-wachs { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; color: #8E1A14; fill: currentColor; }
.deck-siegel::before {
  content: ""; position: absolute; inset: 15%; z-index: 1; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #DC5246, var(--blut) 52%, #5A0E0A 100%);
  box-shadow: inset 0 2px 3px rgba(255, 190, 180, .4), inset 0 -3px 6px rgba(40, 0, 0, .6), 0 0 0 1px rgba(60, 0, 0, .5);
}
.deck-siegel::after { content: ""; position: absolute; inset: 23%; z-index: 1; border-radius: 50%; border: 1.5px dashed rgba(255, 214, 205, .5); }
.deck-siegel-innen { position: relative; z-index: 2; display: grid; justify-items: center; gap: .05rem; color: #FFE3DE; text-shadow: 0 1px 0 rgba(60, 0, 0, .8); }
.deck-siegel-innen .sym { width: 1.35rem; height: 1.35rem; }
.deck-siegel-innen span { font-family: var(--f-hud); font-weight: 700; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; }
.deck-siegel--klein { width: 4.2rem; height: 4.2rem; }
.deck-siegel--klein .deck-siegel-innen .sym { width: 1.1rem; height: 1.1rem; }
.deck-siegel--klein .deck-siegel-innen span { font-size: .55rem; }
.deck-gesunken--klein { border-radius: 999px var(--rad-m) var(--rad-m) 999px; padding-right: 1rem; }
.deck-gesunken--klein p { font-size: .9rem; }

/* ---------- Messing-Fernrohr mit Spielbild ---------- */
.deck-fernrohr {
  /* Linse höchstens 340 px: das Vorschaubild (300×220) wird so maximal etwa 1,6-fach gezeigt */
  --d: min(340px, max(11rem, 23vw));
  --fb: max(calc(var(--d) * .125), 3.4rem);   /* Fassungsbreite wächst mit, die Linse nicht */
  --px: 0px; --py: 0px;
  position: relative; display: grid; justify-items: center; gap: .9rem; align-self: center; justify-self: end;
  width: calc(var(--d) + 2 * var(--fb)); translate: 0 3vh;
}
.deck-fernrohr-tubus {
  position: absolute; left: 50%; top: calc(var(--d) / 2 + var(--fb)); width: calc(var(--d) * 2.1); aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; pointer-events: none; z-index: -1;
  background: radial-gradient(circle, rgba(242, 165, 65, .2), rgba(242, 165, 65, .06) 42%, transparent 66%);
}
.deck-fernrohr-fassung {
  position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent calc(var(--d) / 2 + 2px), rgba(0, 0, 0, .5) calc(var(--d) / 2 + 5px), transparent calc(var(--d) / 2 + 9px)),
    conic-gradient(from 200deg, #6E521C, #F6DFA0 10%, #C99A45 22%, #6E521C 34%, #E8C26B 48%, #9C7428 60%, #FFF1C4 72%, #8E6A24 84%, #6E521C);
  box-shadow:
    0 0 0 2px rgba(5, 8, 12, .8), 0 0 0 5px rgba(232, 194, 107, .22),
    inset 0 0 0 .3rem rgba(255, 241, 196, .28), inset 0 -.8rem 1.4rem rgba(40, 24, 4, .55), inset 0 .5rem 1rem rgba(255, 244, 214, .35),
    0 2.4rem 4rem -1rem rgba(0, 0, 0, .9);
}
.deck-fernrohr-skala { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dfs-ring { fill: none; stroke: #3A2A10; stroke-opacity: .55; stroke-width: 1; }
.dfs-ring--innen { stroke-width: 1.6; stroke-opacity: .7; }
.dfs-ticks line { stroke: #3A2A10; stroke-opacity: .7; stroke-width: .9; }
.dfs-nieten circle { fill: #FFF1C4; stroke: #5A4012; stroke-width: .8; }
.dfs-rose text { font-family: var(--f-hud); font-weight: 700; font-size: 8px; letter-spacing: .5px; text-anchor: middle; fill: #3A2A10; fill-opacity: .85; }
.deck-fernrohr-linse {
  position: relative; width: var(--d); aspect-ratio: 1; border-radius: 50%; overflow: hidden; isolation: isolate;
  background: var(--nacht); box-shadow: 0 0 0 3px #2B1E08, 0 0 0 5px rgba(255, 241, 196, .35);
}
.deck-fernrohr-linse img {
  width: 100%; height: 100%; object-fit: cover; scale: 1.04; translate: var(--px) var(--py);
  filter: saturate(1.05) contrast(1.04);
  animation: deck-fokus 1.7s var(--ease-segel) .5s both;
}
@keyframes deck-fokus { from { filter: blur(12px) brightness(.55) saturate(.6); scale: 1.18; } to { filter: saturate(1.05) contrast(1.04); scale: 1.04; } }
.deck-fernrohr-faden {
  position: absolute; inset: 0; pointer-events: none; opacity: .32;
  background:
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(255, 241, 196, .7) calc(50% - .5px), rgba(255, 241, 196, .7) calc(50% + .5px), transparent calc(50% + .5px)) center / 100% 100% no-repeat,
    linear-gradient(0deg, transparent calc(50% - .5px), rgba(255, 241, 196, .7) calc(50% - .5px), rgba(255, 241, 196, .7) calc(50% + .5px), transparent calc(50% + .5px)) center / 100% 100% no-repeat;
  -webkit-mask: radial-gradient(circle, transparent 10%, #000 11%, #000 30%, transparent 31%, transparent 60%, #000 61%);
  mask: radial-gradient(circle, transparent 10%, #000 11%, #000 30%, transparent 31%, transparent 60%, #000 61%);
}
.deck-fernrohr-glas {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(120% 90% at 30% 18%, rgba(255, 255, 255, .2), rgba(255, 255, 255, 0) 34%),
    radial-gradient(circle, transparent 54%, rgba(5, 8, 12, .38) 78%, rgba(5, 8, 12, .82) 100%);
  box-shadow: inset 0 0 1.6rem rgba(0, 0, 0, .7), inset 0 0 0 1px rgba(0, 0, 0, .6);
}
.deck-fernrohr-plakette {
  padding: .2rem 1rem .25rem; border-radius: var(--rad-s);
  font-family: var(--f-hud); font-weight: 700; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: #2B1E08;
  background: linear-gradient(180deg, var(--gold-hell), var(--gold) 50%, #B88A3A);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(80, 50, 10, .5), 0 .5rem 1rem -.4rem #000;
}
.deck-fernrohr-plakette span { opacity: .78; margin-right: .3em; }
.deck-fernrohr--gesunken .deck-fernrohr-linse img { filter: grayscale(.75) sepia(.3) brightness(.7) contrast(1.1); animation-name: deck-fokus-grau; }
@keyframes deck-fokus-grau { from { filter: blur(12px) grayscale(.75) brightness(.4); scale: 1.18; } to { filter: grayscale(.75) sepia(.3) brightness(.7) contrast(1.1); scale: 1.04; } }
.deck-fernrohr-stempel {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; rotate: -16deg; padding: .25rem 1rem;
  font-family: var(--f-display); font-size: clamp(1.4rem, 1rem + 1.2vw, 2.6rem); line-height: 1; color: #FFD9D2;
  border: 3px double rgba(255, 190, 180, .8); border-radius: var(--rad-s); background: rgba(90, 14, 10, .62);
  text-shadow: 0 1px 0 rgba(60, 0, 0, .8); box-shadow: 0 0 1.4rem rgba(0, 0, 0, .6);
}

/* ---------- Raster: Kursbuch · Test · Seitenkarte ---------- */
.deck-raster {
  display: grid; grid-template-columns: minmax(13rem, 16rem) minmax(0, 1fr) minmax(19rem, 23rem);
  gap: var(--r7); align-items: start; padding-top: var(--abschnitt);
}
.deck-artikel { min-width: 0; }
.deck-artikel .fliesstext { max-width: 70ch; margin-inline: auto; }

/* Kursbuch (Markup und Scrollspy aus vorlagen.kurs / spiel.js) */
.deck-kurs { position: sticky; top: 6rem; max-height: calc(100vh - 7.5rem); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.deck-kurs .kurs { position: static; max-height: none; overflow: visible; }
.deck-kurs .kurs-titel { font-family: var(--f-display); font-size: var(--t-l); letter-spacing: 0; text-transform: none; color: var(--gold-hell); }
.deck-kurs .kurs-liste::after {
  content: ""; position: absolute; left: .4rem; top: .5rem; width: 3px; border-radius: 2px;
  height: calc((100% - 1rem) * var(--fortschritt, 0));
  background: linear-gradient(180deg, var(--gold-tief), var(--gold) 80%, var(--laterne));
  box-shadow: 0 0 .7rem rgba(242, 165, 65, .55);
}
.deck-kurs .kurs-liste a { color: var(--mond-matt); }
.deck-kurs .kurs-liste a:hover, .deck-kurs .kurs-liste a.aktiv { color: var(--mond-hell); }
.deck-kurs .kurs-liste a.aktiv { text-shadow: 0 0 1rem rgba(242, 165, 65, .35); }

/* ---------- Seitenkarte (klebend) ---------- */
.deck-karte { position: sticky; top: var(--klebe-top, 6rem); }
.deck-karte-innen {
  position: relative; display: grid; gap: var(--r4); padding: var(--r4) var(--r5) var(--r5);
  background: linear-gradient(180deg, rgba(20, 33, 46, .92), rgba(9, 17, 26, .94));
  border: 1px solid var(--linie);
  clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
  box-shadow: var(--schatten-tief);
}
.deck-karte-innen::before { content: ""; position: absolute; left: 0; top: 0; width: 3.4rem; height: 2px; background: var(--gold); box-shadow: 0 0 .7rem var(--gold); }
.deck-karte-bild {
  position: relative; margin-top: var(--r2); margin-inline: auto; width: 100%; max-width: 480px; aspect-ratio: 300 / 220;
  border-radius: 8px; overflow: hidden; background: var(--schiefer); box-shadow: 0 0 0 1px var(--gold-linie), 0 1rem 1.6rem -1rem #000;
}
.deck-karte-bild img { width: 100%; height: 100%; object-fit: cover; }
.deck-karte-bild::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 1.6rem rgba(0, 0, 0, .6); }
.deck-karte-bild--gesunken img { filter: grayscale(.8) sepia(.3) brightness(.8) contrast(1.1); }
.deck-karte-titel { font-family: var(--f-hud); font-weight: 600; font-size: .82rem; letter-spacing: var(--sperr-hud); text-transform: uppercase; color: var(--mond-matt); }
.deck-karte-titel--fakten { padding-top: var(--r4); border-top: 1px solid var(--linie); }
.deck-karte-knopf .kanone { width: 100%; justify-content: flex-start; }

/* Faktentabelle */
.deck-fakten { display: grid; margin-top: -.4rem; }
.deck-fakten > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--linie); }
.deck-fakten > div:last-child { border-bottom: 0; }
.deck-fakten dt { font-family: var(--f-hud); font-weight: 600; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mond-matt); }
.deck-fakten dd { font-family: var(--f-hud); font-weight: 600; font-size: 1.04rem; text-align: right; color: var(--mond-hell); font-variant-numeric: tabular-nums; }
.deck-fakten dd a { color: var(--gold-hell); text-decoration-color: var(--gold-linie); text-underline-offset: .22em; }
.deck-fakten dd a:hover { color: var(--laterne); }
.deck-status--an { color: #8EE8B0 !important; }
.deck-status--aus { color: var(--blut-hell) !important; }

/* ---------- Steuerrad-Wertung 1–10 ---------- */
.deck-ruder { display: grid; gap: .55rem; padding-top: var(--r4); border-top: 1px solid var(--linie); text-align: center; }
.deck-ruder .deck-karte-titel { text-align: left; }
.deck-ruder-buehne {
  position: relative; width: min(100%, 17.5rem); aspect-ratio: 1; margin: 2.1rem auto .9rem; container-type: inline-size;
  -webkit-tap-highlight-color: transparent;
}
.deck-ruder-rad { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 .9rem 1.1rem rgba(0, 0, 0, .75)); }
.dr-speiche-holz { fill: url(#g-holz); stroke: #24150A; stroke-width: .6; }
.dr-griff { fill: #5A3820; stroke: #24150A; stroke-width: .6; }
.dr-griff-licht { fill: none; stroke: rgba(255, 220, 170, .22); stroke-width: 1.1; stroke-linecap: round; }
.dr-ring-messing { fill: url(#g-messing); }
.dr-speiche .dr-speiche-holz, .dr-speiche .dr-griff { transition: fill var(--d-m), filter var(--d-m); }
.dr-speiche.an .dr-speiche-holz { fill: #9A6A3A; filter: drop-shadow(0 0 2px rgba(242, 165, 65, .9)); }
.dr-speiche.vorschau .dr-speiche-holz { fill: #B98A52; }
.dr-kranz-schatten { fill: none; stroke: #000; stroke-opacity: .55; stroke-width: 16; }
.dr-kranz { fill: none; stroke: #5A3820; stroke-width: 12.5; }
.dr-kranz-messing { fill: none; stroke: url(#g-gold); stroke-width: 2.3; }
.dr-kranz-messing--innen { stroke-width: 1.8; }
.dr-schnitt-spur { fill: none; stroke: rgba(10, 6, 2, .7); stroke-width: 3.6; }
.dr-schnitt { fill: none; stroke: var(--gold); stroke-width: 3.2; stroke-linecap: round; filter: drop-shadow(0 0 2px rgba(232, 194, 107, .8)); transition: stroke-dasharray .9s var(--ease-segel); }
.dr-wahl { fill: none; stroke: var(--laterne); stroke-width: 3.4; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(242, 165, 65, .95)); transition: stroke-dasharray .5s var(--ease-segel); }
.dr-niete { fill: #E8C26B; opacity: .85; }
.dr-nabe { fill: url(#g-messing); stroke: #5A4012; stroke-width: .8; }
.dr-nabe-ring { fill: #0B1621; stroke: rgba(232, 194, 107, .55); stroke-width: 1; }
.deck-ruder-nabe {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; justify-items: center; line-height: 1;
  width: 23%; pointer-events: none;
}
.deck-ruder-nabe b { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.25rem, 10cqw, 1.9rem); color: var(--gold-hell); }
.deck-ruder-nabe span { margin-top: .15rem; font-family: var(--f-hud); font-weight: 600; font-size: clamp(.58rem, 3.6cqw, .72rem); letter-spacing: .12em; text-transform: uppercase; color: var(--mond); }
.deck-ruder-wahl { position: absolute; inset: 0; }
.deck-griff {
  --s: 2.35rem;
  position: absolute; left: 50%; top: 50%; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  display: grid; place-items: center; border-radius: 50%;
  transform: rotate(calc(var(--i) * 36deg)) translateY(-41.8cqw) rotate(calc(var(--i) * -36deg));
  font-family: var(--f-hud); font-weight: 700; font-size: 1.02rem; line-height: 1; color: var(--gold-hell); font-variant-numeric: tabular-nums;
  background: radial-gradient(circle at 35% 30%, #A07A4A, #5A4126 58%, #2E1F10);
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .5), inset 0 1px 1px rgba(255, 220, 170, .25), 0 0 0 2px rgba(5, 8, 12, .85), 0 .3rem .6rem rgba(0, 0, 0, .6);
  transition: color var(--d-s), background var(--d-s), box-shadow var(--d-m), scale var(--d-s) var(--ease-kanone);
  touch-action: manipulation;
}
.deck-griff:hover { scale: 1.12; }
.deck-griff.vorschau { color: #1A1206; background: radial-gradient(circle at 35% 30%, #FFE7BF, #F7B25A 55%, #A35E14); }
.deck-griff.an {
  color: #1A1206; background: radial-gradient(circle at 35% 30%, #FFF1C4, var(--gold) 48%, var(--gold-tief));
  box-shadow: inset 0 -2px 3px rgba(80, 50, 10, .5), 0 0 0 2px rgba(5, 8, 12, .85), 0 0 .9rem rgba(232, 194, 107, .6);
}
.deck-griff[aria-checked="true"] {
  scale: 1.16; color: #1A1206; background: radial-gradient(circle at 35% 30%, #FFE2B0, var(--laterne) 55%, #9A5410);
  box-shadow: inset 0 -2px 3px rgba(80, 40, 0, .5), 0 0 0 2px rgba(5, 8, 12, .9), 0 0 0 4px rgba(242, 165, 65, .55), 0 0 1.4rem rgba(242, 165, 65, .8);
}
.deck-griff:focus-visible { outline-offset: 4px; border-radius: 50%; }
.deck-ruder-stand { font-family: var(--f-hud); font-weight: 600; font-size: 1.04rem; letter-spacing: .03em; color: var(--mond-hell); font-variant-numeric: tabular-nums; }
.deck-ruder-text { min-height: 2.9em; font-size: .92rem; line-height: 1.45; color: var(--mond); text-wrap: balance; }
.deck-ruder-vorschau { font-size: .8rem; line-height: 1.4; color: var(--mond-matt); }
.deck-ruder.sendet .deck-ruder-buehne { opacity: .8; }
.deck-ruder.gestempelt .deck-ruder-nabe { animation: stempel .5s var(--ease-kanone); }

/* ---------- Weitere Schiffe der Kategorie ---------- */
.deck-weitere { padding-top: var(--abschnitt); }
.deck-weitere .reihe-titel { font-size: var(--t-2xl); }
.deck-gold { color: var(--gold-hell); }
.deck-weitere .karte--reihe { width: min(clamp(13.5rem, 13rem + 5vw, 23rem), 460px); }
.deck-weitere .reihe-alle { width: min(clamp(11rem, 10rem + 4vw, 18rem), 380px); }
.deck-weitere .reihe-liste { cursor: grab; }
.deck-weitere .reihe-liste.zieht { cursor: grabbing; scroll-snap-type: none; -webkit-user-select: none; user-select: none; }
.deck-weitere .reihe-liste.zieht .karte-koerper { cursor: grabbing; }
.deck-weitere .reihe-pfeile .hud-knopf:disabled { opacity: .35; cursor: default; }
.deck-weitere-tipp {
  display: none; align-items: center; gap: .5rem; margin-top: 1rem;
  font-family: var(--f-hud); font-weight: 600; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mond-matt);
}
.deck-weitere-tipp .sym { width: .95rem; height: .95rem; color: var(--gold); }

/* ---------- Backbord / Steuerbord ---------- */
.deck-wechsel { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: var(--r5); padding-top: var(--abschnitt); }
.deck-wechsel-link {
  --licht: #E0574B; --licht-glut: rgba(224, 87, 75, .55);
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--r5);
  min-height: 8.5rem; padding: var(--r4) var(--r5); text-decoration: none; color: var(--mond-hell);
  border: 1px solid var(--linie); background: linear-gradient(90deg, rgba(20, 33, 46, .75), rgba(9, 17, 26, .5));
  transition: border-color var(--d-m), background-color var(--d-m), box-shadow var(--d-m) var(--ease-segel);
}
.deck-wechsel-link--steuerbord { --licht: #4FD68A; --licht-glut: rgba(79, 214, 138, .5); grid-template-columns: minmax(0, 1fr) auto; text-align: right; background: linear-gradient(270deg, rgba(20, 33, 46, .75), rgba(9, 17, 26, .5)); }
.deck-wechsel-link--steuerbord .deck-wechsel-bild { order: 2; }
.deck-wechsel-link--steuerbord .deck-wechsel-art { justify-content: flex-end; }
.deck-wechsel-link--steuerbord .deck-wechsel-art .sym { order: 3; }
.deck-wechsel-link:hover { border-color: var(--gold-linie); box-shadow: 0 1.4rem 2.4rem -1.6rem #000, 0 0 2rem -0.8rem var(--licht-glut); }
.deck-wechsel-licht {
  position: absolute; top: -.4rem; left: var(--r5); width: .8rem; height: .8rem; border-radius: 50%;
  background: var(--licht); box-shadow: 0 0 .8rem var(--licht), 0 0 1.8rem var(--licht-glut);
}
.deck-wechsel-link--steuerbord .deck-wechsel-licht { left: auto; right: var(--r5); }
.deck-wechsel-bild {
  display: block; width: clamp(5.5rem, 4.5rem + 3vw, 8rem); max-width: 190px; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 3px #2B1E08, 0 0 0 5px rgba(232, 194, 107, .55), 0 .8rem 1.4rem -.6rem #000;
}
.deck-wechsel-bild img { width: 100%; height: 100%; object-fit: cover; transition: scale .7s var(--ease-segel); }
.deck-wechsel-link:hover .deck-wechsel-bild img { scale: 1.08; }
.deck-wechsel-text { display: grid; gap: .3rem; min-width: 0; }
.deck-wechsel-art { display: flex; align-items: center; flex-wrap: wrap; gap: .1rem .5rem; font-family: var(--f-hud); font-weight: 600; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.deck-wechsel-art .sym { width: 1rem; height: 1rem; transition: translate var(--d-m) var(--ease-segel); }
.deck-wechsel-satz { color: var(--mond-matt); letter-spacing: .1em; }
.deck-wechsel-satz::before { content: "·"; margin-right: .5rem; color: var(--mond-matt); }
.deck-wechsel-titel { font-family: var(--f-display); font-size: var(--t-xl); line-height: 1.05; color: var(--mond-hell); overflow-wrap: anywhere; }
.deck-wechsel-link--backbord:hover .deck-wechsel-art .sym { translate: -.3rem 0; }
.deck-wechsel-link--steuerbord:hover .deck-wechsel-art .sym { translate: .3rem 0; }
.deck-wechsel-mitte { display: grid; place-items: center; width: 3.2rem; color: var(--gold-tief); }
.deck-wechsel-mitte .sym { width: 2rem; height: 2rem; }

/* ---------- Breiten ---------- */
@media (max-width: 89.99rem) {
  .deck-raster { grid-template-columns: minmax(0, 1fr) minmax(18rem, 21rem); column-gap: var(--r6); row-gap: var(--r5); }
  .deck-kurs { grid-column: 1; grid-row: 1; position: static; max-height: none; overflow: visible; }
  .deck-kurs .kurs { max-width: 70ch; margin-inline: auto; padding: .9rem 1.2rem; border: 1px solid var(--linie); background: rgba(11, 22, 33, .55); }
  .deck-kurs .kurs-titel { padding: 0; }
  .deck-kurs .kurs[open] .kurs-titel { padding-bottom: .8rem; }
  .deck-artikel { grid-column: 1; grid-row: 2; }
  .deck-karte { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 63.99rem) {
  .deck-raster { grid-template-columns: minmax(0, 1fr); }
  .deck-kurs, .deck-artikel { grid-column: 1; }
  .deck-karte { grid-column: 1; grid-row: auto; position: static; max-width: 36rem; width: 100%; margin-inline: auto; }
  .deck-kopf-raster { grid-template-columns: minmax(0, 1fr); gap: var(--r5); }
  .deck-fernrohr { --d: min(12rem, 44vw); --fb: calc(var(--d) * .125); order: -1; align-self: end; justify-self: start; translate: none; gap: .6rem; }
  .deck-fernrohr-plakette { display: none; }
  .deck-wechsel { grid-template-columns: minmax(0, 1fr); }
  .deck-wechsel-mitte { display: none; }
}
@media (max-width: 47.99rem) {
  .deck-kopf .szene-schleier {
    background:
      linear-gradient(0deg, var(--abyss) 0%, rgba(5, 8, 12, .82) 30%, rgba(5, 8, 12, .4) 58%, rgba(5, 8, 12, .2) 76%, rgba(5, 8, 12, .7) 100%);
  }
  .deck-kopf-inhalt { padding-top: 5.6rem; }
  .deck-titel, .deck-titel--mittel { font-size: clamp(2.4rem, 1.2rem + 6vw, 3.6rem); max-width: none; }
  .deck-titel--lang { font-size: clamp(2rem, 1rem + 5vw, 2.8rem); max-width: none; }
  .deck-gesunken { border-radius: var(--rad-m); align-items: center; }
  .deck-siegel { width: 4.4rem; height: 4.4rem; }
  .deck-weitere .reihe-titel { font-size: var(--t-xl); }
  .deck-weitere-tipp { display: flex; }
  .deck-wechsel-link { min-height: 6.5rem; gap: var(--r4); padding: var(--r4); }
  .deck-wechsel-bild { width: 4.6rem; }
  .deck-wechsel-titel { font-size: var(--t-l); }
  .deck-wechsel-art { flex-wrap: nowrap; gap: .1rem .35rem; font-size: .75rem; letter-spacing: .08em; }
  .deck-wechsel-satz::before { margin-right: .35rem; }
  .deck-karte-innen { padding-inline: var(--r4); }
}
@media (max-width: 22rem) {
  .deck-griff { --s: 2.05rem; font-size: .9rem; }
}

/* Ruhig: keine Bewegung, Szene als Standbild (Leinwand blendet effekte.css aus) */
html.ruhig .deck-fernrohr-linse img { animation: none; translate: none; }
html.ruhig .deck-fernrohr--gesunken .deck-fernrohr-linse img { animation: none; }
html.ruhig .deck-griff, html.ruhig .deck-wechsel-bild img { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .deck-fernrohr-linse img { animation: none; }
}

/* Druck: nur Test und Steckbrief */
@media print {
  .deck-fernrohr, .deck-weitere, .deck-wechsel, .deck-ruder-buehne, .deck-kurs { display: none !important; }
  .deck-raster { display: block; }
  .deck-karte { position: static; }
}