/* Kartenalmanach · Startseite
   Welt: Schiefer, Leder, Blattgold, Holo-Folie. Schrift: Crimson Text (Markenschrift der App). */

@font-face { font-family: "Crimson Text"; src: url("/assets/fonts/crimson-text-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Crimson Text"; src: url("/assets/fonts/crimson-text-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* Farben aus packages/core_ui (KAColors) */
  --schiefer: #141314;
  --schiefer-2: #1c1b1d;
  --schiefer-3: #262427;
  --leder: #3b2a1e;
  --leder-tief: #24190f;
  --gold: #c8a95c;
  --gold-hell: #f0d680;
  --gold-tief: #8a6a2a;
  --pergament: #f5f0e8;
  --pergament-2: #ede5da;
  --tinte: #3a2e10;
  --text: #e6e1e3;
  --text-leise: #b5aa9c;
  --text-sehr-leise: #8f8577;
  --fehler: #f08a6a;

  /* Holo-Folie aus den Raritätsfarben der App */
  --holo-blau: #7fa8b8;
  --holo-violett: #9b5fc0;
  --holo-orange: #e06a20;

  /* Schrift */
  --schrift: "Crimson Text", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --groesse-text: clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem);
  --groesse-h1: clamp(2.6rem, 1.5rem + 5vw, 5.5rem);
  --groesse-h2: clamp(1.75rem, 1.35rem + 2vw, 3.3rem);
  --groesse-h3: clamp(1.6rem, 1.3rem + 1vw, 2rem);

  /* Abstände (für das Regler-Panel) */
  --rand: 1rem;
  --abschnitt: clamp(2.75rem, 1.8rem + 4vw, 6rem);
  --buch-laenge: 220vh;
  --spiele-ueberlappung: 30vh;
  --buch-text-unten: clamp(1.25rem, 4vh, 3rem);
  --karte-breite: min(80vw, 285px);
  /* Holo-Karten (Regler-Panel: ?tweak) */
  --wabern-neigung: 2.7deg;
  --wabern-hub: 1.1px;
  --wabern-tempo: 7s;
  --wabern-schatten: 6px;
  --schleier-dunkel: .9;
  --schleier-unschaerfe: 12px;
  --folie-empf: 16;
  --folie-scroll: 50;
  --folie-staerke: .5;
  --almanach-glanz: .2;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --haarlinie: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold-hell) 50%, var(--gold) 80%, transparent);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 4rem; background: var(--schiefer); }
body {
  margin: 0; min-height: 100vh; background: var(--schiefer); color: var(--text);
  font-family: var(--schrift); font-size: var(--groesse-text); line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip;
  caret-color: var(--gold); accent-color: var(--gold);
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-weight: 700; line-height: 1.04; letter-spacing: -0.012em; margin: 0; text-wrap: balance; color: var(--pergament); }
p { margin: 0; text-wrap: pretty; }
a { color: var(--gold-hell); text-underline-offset: .2em; text-decoration-thickness: 1px; }
::selection { background: var(--gold); color: var(--schiefer); }
:focus-visible { outline: 2px solid var(--gold-hell); outline-offset: 3px; border-radius: 2px; }
html { scrollbar-color: var(--gold-tief) var(--schiefer); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--schiefer); }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--gold-tief), var(--leder)); border-radius: 10px; border: 2px solid var(--schiefer); }

.sprung { position: absolute; left: -999px; top: .5rem; z-index: 50; background: var(--gold); color: var(--schiefer); padding: .5rem 1rem; }
.sprung:focus { left: .5rem; }

.rahmen { width: min(100% - 2 * var(--rand), 72rem); margin-inline: auto; }
.rahmen--schmal { width: min(100% - 2 * var(--rand), 46rem); }

/* ---------- Knöpfe ---------- */
.plakette {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3.3rem; padding: .7rem 1.9rem; border: 0; border-radius: 99px; cursor: pointer;
  font: 700 1.15rem/1 var(--schrift); letter-spacing: .01em; color: #1d1508; text-decoration: none;
  background: var(--gold);
  transition: background .3s, transform .3s var(--ease);
}
.plakette:hover { background: var(--gold-hell); transform: translateY(-1px); }
.plakette:active { transform: translateY(0); background: #b8974c; }
.plakette:focus-visible { outline: 2px solid var(--gold-hell); outline-offset: 3px; }
.plakette[disabled] { opacity: .7; cursor: progress; }
.plakette--breit { width: 100%; }
.leise { display: inline-flex; align-items: center; min-height: 3rem; padding: .4rem .2rem; color: var(--gold-hell); font-size: 1.1rem; text-decoration: none; border-bottom: 1px solid rgba(240,214,128,.35); transition: border-color .3s, color .3s; }
.leise:hover { border-color: var(--gold-hell); color: #fff4cf; }
.leise::after { content: ""; width: .5em; height: .5em; margin-left: .55em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); }
.leise--hell::after { transform: rotate(-45deg); }

/* ---------- Kopfzeile ---------- */
.kopf {
  position: fixed; inset: 0 0 auto; z-index: 20; display: flex; justify-content: space-between; align-items: center;
  padding: max(.6rem, env(safe-area-inset-top)) var(--rand) .6rem;
  background: linear-gradient(rgba(20,19,20,.85), rgba(20,19,20,0)); pointer-events: none;
}
.kopf > * { pointer-events: auto; }
.kopf { transition: background .4s, box-shadow .4s, backdrop-filter .4s; }
.kopf.ist-unten { background: rgba(20,19,20,.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(200,169,92,.22), 0 10px 30px -18px #000; padding-bottom: .55rem; }
.kopf__marke img { width: 150px; filter: drop-shadow(0 3px 8px rgba(0,0,0,.85)); }
.kopf__menue {
  position: relative; z-index: 31; width: 3rem; height: 3rem; display: grid; place-content: center; gap: 5px; padding: 0; cursor: pointer;
  border: 1px solid rgba(200,169,92,.45); border-radius: 99px; background: rgba(20,19,20,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: border-color .3s;
}
.kopf__menue span { display: block; width: 1.15rem; height: 1.5px; border-radius: 2px; background: var(--gold-hell); transition: transform .35s var(--ease), opacity .2s; }
.kopf__menue:hover { border-color: var(--gold-hell); }
.kopf__menue:focus-visible { outline: 2px solid var(--gold-hell); outline-offset: 3px; }
.kopf__menue[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.kopf__menue[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.kopf__menue[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Menü: Seite des Almanachs, die sich über alles legt */
.menue {
  position: fixed; inset: 0; z-index: 30; overflow-y: auto;
  background: radial-gradient(90% 60% at 80% 0%, rgba(200,169,92,.14), transparent 60%), rgba(20,19,20,.97);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  opacity: 0; transition: opacity .35s var(--ease);
}
.menue.ist-offen { opacity: 1; }
.menue[hidden] { display: none; }
.menue__innen { width: min(100% - 2 * var(--rand), 34rem); margin: 0 auto; padding: calc(max(.6rem, env(safe-area-inset-top)) + 4.6rem) 0 1.5rem; }
.menue__liste { list-style: none; margin: 0; padding: 0; }
.menue__liste li { border-bottom: 1px solid rgba(200,169,92,.22); transform: translateY(12px); opacity: 0; transition: transform .5s var(--ease), opacity .5s var(--ease); }
.menue.ist-offen .menue__liste li { transform: none; opacity: 1; }
.menue.ist-offen .menue__liste li:nth-child(2) { transition-delay: .04s; } .menue.ist-offen .menue__liste li:nth-child(3) { transition-delay: .08s; }
.menue.ist-offen .menue__liste li:nth-child(4) { transition-delay: .12s; } .menue.ist-offen .menue__liste li:nth-child(5) { transition-delay: .16s; }
.menue.ist-offen .menue__liste li:nth-child(6) { transition-delay: .2s; }
.menue.ist-offen .menue__liste li:nth-child(7) { transition-delay: .24s; }
.menue.ist-offen .menue__liste li:nth-child(8) { transition-delay: .28s; }
.menue__liste a { display: flex; align-items: baseline; gap: .8rem; padding: .62rem .2rem; color: var(--pergament); text-decoration: none; font-size: clamp(1.15rem, 1rem + .8vw, 1.55rem); font-weight: 700; line-height: 1.15; transition: color .25s; }
.menue__liste a:hover, .menue__liste a:focus-visible { color: var(--gold-hell); }
.menue__liste i { flex: 0 0 2.1rem; font-style: normal; font-size: .9rem; letter-spacing: .2em; color: var(--gold); }
.menue__social-titel { margin: 1.5rem 0 .7rem; font-weight: 700; font-size: .95rem; letter-spacing: .28em; text-transform: uppercase; color: var(--text-sehr-leise); }
.menue__social { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem .8rem; }
.menue__social a { display: flex; align-items: center; gap: .55rem; padding: .45rem 0; color: var(--text-leise); text-decoration: none; font-size: 1rem; transition: color .25s; }
.menue__social svg { flex: none; width: 1.25rem; height: 1.25rem; fill: var(--gold); transition: fill .25s; }
.menue__social a:hover, .menue__social a:focus-visible { color: var(--gold-hell); }
.menue__social a:hover svg, .menue__social a:focus-visible svg { fill: var(--gold-hell); }
html.menue-offen { overflow: hidden; }
/* Kopfzeile bleibt im Menü fest und deckend: Logo und Schließen-Knopf werden nie überlagert */
html.menue-offen .kopf { z-index: 40; background: #161516; box-shadow: 0 1px 0 rgba(200,169,92,.22); -webkit-backdrop-filter: none; backdrop-filter: none; padding-bottom: .6rem; }

/* ---------- Einstieg: Buch ---------- */
.buch { position: relative; height: var(--buch-laenge); background: var(--schiefer); }
.buch__buehne { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.buch__leinwand, .buch__standbild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.buch__leinwand { opacity: 0; transition: opacity .6s; }
.ist-bereit .buch__leinwand { opacity: 1; }
.ist-bereit .buch__standbild { opacity: 0; }
.buch__licht { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(20,19,20,.92) 0%, rgba(20,19,20,.45) 22%, rgba(20,19,20,0) 40%, rgba(20,19,20,0) 52%, rgba(20,19,20,.75) 74%, rgba(20,19,20,.97) 100%); }
.buch__text {
  position: absolute; left: var(--rand); right: var(--rand); bottom: var(--buch-text-unten);
  display: grid; gap: .9rem; max-width: 34rem;
  opacity: calc(1 - var(--fortschritt, 0) * 3.2); transform: translateY(calc(var(--fortschritt, 0) * -80px));
}
.buch__text { isolation: isolate; }
/* Schleier hinter dem Text: weiche Unschärfe plus Abdunklung, nach oben ausgeblendet (nur Handy/Tablet hochkant) */
.buch__text::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: -9rem calc(var(--rand) * -1) calc(var(--buch-text-unten) * -1 - 1rem);
  -webkit-backdrop-filter: blur(var(--schleier-unschaerfe)); backdrop-filter: blur(var(--schleier-unschaerfe));
  background: linear-gradient(180deg, rgba(20,19,20,0) 0%, rgba(20,19,20,calc(var(--schleier-dunkel) * .8)) 30%, rgba(20,19,20,var(--schleier-dunkel)) 55%);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 32%); mask-image: linear-gradient(180deg, transparent 0%, #000 32%);
}
.buch h1 { font-size: var(--groesse-h1); text-shadow: 0 2px 4px rgba(0,0,0,.6), 0 4px 30px rgba(0,0,0,.85); }
.buch__widmung { font-style: italic; color: var(--gold-hell); font-size: 1.25rem; margin-top: -.3rem; text-shadow: 0 1px 3px rgba(0,0,0,.8), 0 2px 16px rgba(0,0,0,.8); }
.buch__einleitung { color: var(--text); max-width: 32rem; text-shadow: 0 1px 12px rgba(0,0,0,.8); }
.buch__knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.4rem; margin-top: .3rem; }
.buch__fakten { font-size: 1rem; color: var(--text-leise); }
.buch__hinweis { position: absolute; left: 50%; top: 5.2rem; width: 1px; height: 0; }
/* Scroll-Hinweis: kleine Maus mit wanderndem Punkt, verschwindet mit dem Text */
.scrollhinweis { display: inline-flex; align-items: center; gap: .7rem; font-size: 1rem; letter-spacing: .04em; color: var(--text-leise); margin-top: .2rem; }
/* Handy: Knopf über die volle Breite, darunter der Hinweis mittig und größer */
@media (max-width: 899px) {
  .buch__knoepfe .plakette { width: 100%; min-height: 3.6rem; font-size: 1.2rem; }
  .scrollhinweis { flex-direction: column; gap: .55rem; align-self: center; justify-self: center; margin-top: .8rem; font-size: .95rem; letter-spacing: .14em; text-transform: uppercase; }
  .scrollhinweis__maus { width: 1.9rem; height: 3rem; border-width: 2px; }
  .scrollhinweis__maus i { width: 4px; height: .65rem; margin-left: -2px; top: .5rem; }
}
.scrollhinweis__maus { position: relative; flex: none; width: 1.35rem; height: 2.1rem; border: 1.5px solid var(--gold); border-radius: 99px; }
.scrollhinweis__maus i { position: absolute; left: 50%; top: .35rem; width: 3px; height: .45rem; margin-left: -1.5px; border-radius: 3px; background: var(--gold-hell); animation: scrollpunkt 1.8s var(--ease) infinite; }
@keyframes scrollpunkt { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: 1; } 70% { transform: translateY(.9rem); opacity: 0; } 100% { opacity: 0; } }
@media (max-width: 599px) {
  .buch__einleitung { display: none; }
  .buch__text { gap: .7rem; }
}

/* ---------- Was ist der Almanach & Vorteile ---------- */
/* Schiebt sich über das Ende des Buchs: weicher Übergang von Bildfolge nach Schiefer */
.vorteile {
  position: relative; z-index: 2; margin-top: calc(var(--spiele-ueberlappung) * -1);
  padding-top: calc(var(--spiele-ueberlappung) * .55 + 1.5rem);
  padding-bottom: 2.5rem;
  background: linear-gradient(180deg, rgba(20,19,20,0) 0, rgba(20,19,20,.85) calc(var(--spiele-ueberlappung) * .35), var(--schiefer) calc(var(--spiele-ueberlappung) * .55));
}
.vorteile__kopf { max-width: 44rem; margin: 0 auto 2.5rem; text-align: center; }
.vorteile__kicker { color: var(--gold-hell); font-size: .95rem; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; margin-bottom: .8rem; }
.vorteile__kopf h2 { font-size: var(--groesse-h2); line-height: 1.12; color: var(--pergament); margin: 0 0 1.2rem; }
.vorteile__lead { font-size: clamp(1.15rem, 1.05rem + .3vw, 1.35rem); line-height: 1.55; color: var(--text-leise); margin: 0; }
.vorteile__elefant { margin-top: 1.1rem; font-size: clamp(1.02rem, .95rem + .2vw, 1.15rem); line-height: 1.5; color: var(--text-sehr-leise); font-style: italic; }
.vorteile__elefant a { color: var(--gold-hell); text-decoration: underline; text-underline-offset: 3px; font-style: normal; transition: color .2s; }
.vorteile__elefant a:hover { color: var(--pergament); }
.vorteile__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.2rem; margin-bottom: 2rem; }
.vorteilskarte {
  background: linear-gradient(180deg, rgba(38,36,39,.65) 0%, rgba(20,19,20,.85) 100%);
  border: 1px solid rgba(200,169,92,.25); border-radius: 12px; padding: 1.6rem 1.4rem;
  box-shadow: 0 10px 24px -12px rgba(0,0,0,.6);
  transition: transform .3s var(--ease), border-color .3s, box-shadow .3s;
}
.vorteilskarte:hover {
  transform: translateY(-3px); border-color: rgba(200,169,92,.5);
  box-shadow: 0 14px 30px -12px rgba(0,0,0,.8), 0 0 20px rgba(200,169,92,.12);
}
.vorteilskarte__icon {
  width: 2.8rem; height: 2.8rem; border-radius: 8px; background: rgba(200,169,92,.12);
  border: 1px solid rgba(200,169,92,.3); display: grid; place-content: center;
  color: var(--gold-hell); margin-bottom: 1.1rem;
}
.vorteilskarte__icon svg { width: 1.5rem; height: 1.5rem; }
.vorteilskarte__icon--text { font-family: var(--schrift); font-size: 1.65rem; font-weight: 700; line-height: 1; user-select: none; }
.vorteilskarte h3 { font-size: 1.35rem; color: var(--pergament); margin: 0 0 .6rem; line-height: 1.2; }
.vorteilskarte p { color: var(--text-leise); font-size: 1.05rem; line-height: 1.5; margin: 0; }

/* Förderer- und Kosten-Box */
.vorteile__foerderer {
  display: flex; align-items: flex-start; gap: 1.2rem;
  background: radial-gradient(80% 120% at 50% 0%, rgba(200,169,92,.12), transparent 75%), rgba(28,27,29,.7);
  border: 1px solid rgba(200,169,92,.32); border-radius: 12px; padding: 1.5rem 1.6rem; margin-top: 2rem;
}
.vorteile__foerderer-icon {
  flex: none; width: 3rem; height: 3rem; border-radius: 99px;
  background: rgba(200,169,92,.15); border: 1.5px solid var(--gold);
  display: grid; place-content: center; color: var(--gold-hell); margin-top: .1rem;
}
.vorteile__foerderer-icon svg { width: 1.5rem; height: 1.5rem; }
.vorteile__foerderer-text h4 { font-size: 1.3rem; color: var(--gold-hell); margin: 0 0 .4rem; font-weight: 700; }
.vorteile__foerderer-text p { color: var(--text); font-size: 1.08rem; line-height: 1.5; margin: 0; }
@media (max-width: 599px) {
  .vorteile__foerderer { flex-direction: column; gap: .9rem; padding: 1.3rem 1.1rem; }
}

/* ---------- Spiele: eine Hand voller Karten ---------- */
.spiele {
  position: relative; z-index: 2;
  padding: 1rem 0 2.2rem;
  background: var(--schiefer);
  border-bottom: 0;
}
.spiele__label { text-align: center; color: var(--text-sehr-leise); font-size: .95rem; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; margin-bottom: 1.2rem; }
.spiele__reihe { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 0; color: var(--text-leise); font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem); }
.spiele__reihe li { padding: 0 .9rem; position: relative; line-height: 1.3; }
@media (min-width: 40rem) { .spiele__reihe li { padding: 0 1.1rem; } .spiele__reihe li + li::before { content: ""; position: absolute; left: 0; top: 15%; bottom: 15%; width: 1px; background: #4a4034; } }

/* ---------- Kartenstapel ---------- */
.almanach { padding: var(--abschnitt) 0 calc(var(--abschnitt) * .8); background: radial-gradient(90% 55% at 50% 38%, rgba(200,169,92,var(--almanach-glanz)), transparent 70%), linear-gradient(180deg, #2a2118 0%, #3b2a1e 45%, #2c2219 100%); }
.almanach h2 { font-size: var(--groesse-h2); max-width: 24ch; }
.almanach__text { margin-top: 1rem; color: var(--text-leise); }
.almanach__schimmer { width: min(100% - 2 * var(--rand), 36rem); margin: 2.5rem auto 0; text-align: center; font-style: italic; color: var(--gold-hell); font-size: 1.25rem; }

.stapel { margin-top: 1.5rem; }
.stapel__spur {
  list-style: none; margin: 0; padding: 1.5rem calc((100vw - var(--karte-breite)) / 2) 4.5rem;
  display: flex; gap: 1.1rem; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.stapel__spur::-webkit-scrollbar { display: none; }
.stapel__spur:focus-visible { outline-offset: -4px; }

.holo {
  flex: 0 0 var(--karte-breite); scroll-snap-align: center; perspective: 750px;
}
/* Schweben wie in der Aura-Ansicht der App: eine gleichmäßige Kreisbahn.
   Animiert wird nur der Winkel --w; Neigung, Lichtreflex und Schatten werden daraus berechnet
   und lassen sich über die Regler in :root (--wabern-*, --folie-*) einstellen. */
@property --w { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
@property --neigung { syntax: "<angle>"; inherits: true; initial-value: 0deg; }
@property --hub { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --schatten-weg { syntax: "<length>"; inherits: true; initial-value: 0px; }
@property --fl { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
@keyframes schweben { from { --w: 0deg; } to { --w: 360deg; } }
.holo {
  --neigung: var(--wabern-neigung); --hub: var(--wabern-hub); --schatten-weg: var(--wabern-schatten);
  transition: --fl .9s var(--ease), --neigung .7s var(--ease), --hub .7s var(--ease), --schatten-weg .7s var(--ease);
}
.holo__dreh {
  position: relative; aspect-ratio: 63 / 88; cursor: pointer; transform-style: preserve-3d;
  animation: schweben var(--wabern-tempo) linear infinite; animation-delay: calc(var(--n, 0) * var(--wabern-tempo) / -4);
  transform: translateY(calc(var(--hub) * -1 * sin(var(--w)))) rotateY(calc(var(--neigung) * cos(var(--w)))) rotateX(calc(var(--neigung) * .83 * sin(var(--w))));
  -webkit-tap-highlight-color: transparent; border-radius: 18px;
}
.holo:nth-child(1) { --n: 0; } .holo:nth-child(2) { --n: 1; } .holo:nth-child(3) { --n: 2; } .holo:nth-child(4) { --n: 3; } .holo:nth-child(5) { --n: 4; } .holo:nth-child(6) { --n: 5; }
/* umgedreht: Karte kommt sanft zur Ruhe, Glanz zieht einmal darüber */
.holo.ist-gedreht { --fl: 90%; --neigung: 0deg; --hub: 0px; --schatten-weg: 0px; }
.holo.ist-gedreht .holo__dreh { animation-play-state: paused; }
.holo__dreh:focus-visible { outline: 2px solid var(--gold-hell); outline-offset: 4px; }
.holo__seite {
  position: absolute; inset: 0; border-radius: 18px; overflow: hidden; isolation: isolate;
  background: linear-gradient(165deg, #2b2520 0%, #1b1815 55%, #141113 100%);
  border: 1.5px solid var(--gold);
  box-shadow: inset 0 0 0 5px #141113, inset 0 0 0 6px rgba(200,169,92,.45), calc(var(--schatten-weg) * -1 * cos(var(--w))) calc(30px + var(--schatten-weg) * .7 * sin(var(--w))) 50px -16px rgba(0,0,0,.95);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transition: transform .7s var(--ease);
}
.holo__vorn { transform: rotateY(0deg); }
.holo__hinten { transform: rotateY(180deg); padding: 1.6rem 1.4rem 1.4rem; display: flex; flex-direction: column; gap: .7rem; }
.holo.ist-gedreht .holo__vorn { transform: rotateY(-180deg); }
.holo.ist-gedreht .holo__hinten { transform: rotateY(0deg); }
.holo__seite::before { /* Folie */
  --mx: calc(50% + var(--folie-empf) * 1% * cos(var(--w)) + var(--sv, 0) * var(--folie-scroll) * 1% + var(--fl));
  --my: calc(50% - var(--folie-empf) * 1% * sin(var(--w)) + var(--sv, 0) * var(--folie-scroll) * .5%);
  /* Folie liegt hinter Bild und Text und wird exakt auf die abgerundete Kartenform zugeschnitten (kein Überstand an den Ecken) */
  content: ""; position: absolute; inset: 1px; z-index: -1; pointer-events: none; mix-blend-mode: color-dodge;
  border-radius: 17px; clip-path: inset(0 round 17px);
  opacity: calc(var(--folie-staerke) * (.8 + .2 * cos(var(--w)) * cos(var(--w))));
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(255,255,255,.85), rgba(255,255,255,.15) 22%, transparent 42%),
    repeating-linear-gradient(115deg,
      rgba(127,168,184,.0) 0%, rgba(127,168,184,.8) 6%, rgba(240,214,128,.8) 12%,
      rgba(155,95,192,.8) 18%, rgba(224,106,32,.55) 24%, rgba(127,168,184,0) 30%);
  background-size: 100% 100%, 420% 420%;
  background-position: 0 0, var(--mx) var(--my);
}
.holo__seite::after { /* feine Prägung */
  content: ""; position: absolute; inset: 1px; z-index: -1; pointer-events: none; opacity: .18;
  border-radius: 17px; clip-path: inset(0 round 17px);
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 1px, transparent 1px 7px);
}
/* Bild im Rahmen: gleiches Fenster mit Goldlinie auf allen Karten, darunter Platz für Ziffer und Titel */
.holo__bildrahmen { position: absolute; inset: .95rem .95rem 6.2rem; border-radius: 12px; overflow: hidden; z-index: 0; border: 1px solid rgba(200,169,92,.6); box-shadow: inset 0 0 0 1px #000, 0 8px 18px -8px #000; background: #0d0c0d; }
.holo__bild { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.holo__bild--foto { object-position: 40% 28%; }
.holo__bild--unten { object-position: 50% 100%; }
.holo__video { display: block; background: #0d0c0d; }
.holo__schmuck { font-style: italic; line-height: 1.45 !important; font-size: 1.12rem !important; }
.holo__bild--tausch { object-position: 50% 28%; }
/* Titel mittig im Bereich unter dem Bildfenster */
.holo__titel { position: absolute; left: 1.2rem; right: 1.2rem; bottom: 0; height: 6.2rem; display: flex; flex-direction: column; justify-content: center; gap: .15rem; padding: 0; }
.holo__titel h3 { line-height: 1.08; }
/* „kostenlos“: Gold mit wanderndem Glanzstreifen und kleinem Funkeln */
.kostenlos {
  position: relative; display: inline-block; color: var(--gold-hell);
  background: linear-gradient(100deg, #b98f2e 0%, #f0d680 30%, #fffbe6 46%, #f0d680 54%, #b98f2e 75%, #f0d680 100%) 0 0 / 260% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: kostenlos-glanz 3.2s linear infinite;
}
.kostenlos::after { content: "✦"; position: absolute; right: -.55em; top: -.35em; font-size: .6em; line-height: 1; -webkit-text-fill-color: var(--gold-hell); color: var(--gold-hell); animation: kostenlos-funkeln 3.2s ease-in-out infinite; }
@keyframes kostenlos-glanz { from { background-position: 100% 0; } to { background-position: -160% 0; } }
@keyframes kostenlos-funkeln { 0%, 30%, 100% { opacity: 0; transform: scale(.4) rotate(0); } 45% { opacity: 1; transform: scale(1.15) rotate(45deg); } 60% { opacity: 0; transform: scale(.5) rotate(90deg); } }
.holo__zusage { margin-top: auto; padding: .7rem .9rem; border: 1px solid rgba(200,169,92,.55); border-radius: 12px; background: rgba(20,19,20,.45); font-size: 1.02rem !important; line-height: 1.35 !important; color: var(--pergament) !important; }
.holo__zusage .kostenlos { font-weight: 700; }
.holo__nummer { font-weight: 700; font-size: 1rem; letter-spacing: .32em; color: var(--gold); }
.holo h3 { font-size: var(--groesse-h3); }
.holo__hinten::before { filter: opacity(.55); }
.holo__hinten p:not(.holo__nummer) { font-size: 1.16rem; line-height: 1.42; color: var(--text); }

.stapel__aufruf {
  display: flex; align-items: center; justify-content: center; gap: .7rem; width: fit-content; max-width: calc(100% - 2 * var(--rand)); margin: 1.2rem auto 0; padding: .75rem 1.3rem .75rem 1rem;
  border: 1.5px solid var(--gold); border-radius: 99px; background: rgba(20,19,20,.55); color: var(--gold-hell); font-weight: 700; font-size: 1.15rem; line-height: 1.2; text-align: left;
  animation: aufruf-puls 2.8s var(--ease) infinite; transition: opacity .6s, border-color .6s;
}
.stapel__aufruf-icon { flex: none; width: 1.7rem; height: 1.7rem; animation: aufruf-dreh 2.8s var(--ease) infinite; }
.stapel__aufruf-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@keyframes aufruf-dreh { 0%, 35% { transform: rotate(0); } 70%, 100% { transform: rotate(360deg); } }
@keyframes aufruf-puls { 0%, 35% { box-shadow: 0 0 0 0 rgba(240,214,128,.45); } 70% { box-shadow: 0 0 0 .8rem rgba(240,214,128,0); } 100% { box-shadow: 0 0 0 0 rgba(240,214,128,0); } }
/* nach dem ersten Umdrehen wird der Hinweis ruhig */
.stapel__aufruf.ist-erledigt { animation: none; opacity: .55; border-color: rgba(200,169,92,.4); }
.stapel__aufruf.ist-erledigt .stapel__aufruf-icon { animation: none; }
.stapel__steuer { display: flex; justify-content: center; align-items: center; gap: 1.2rem; color: var(--text-leise); font-size: 1rem; letter-spacing: .14em; }
.stapel__zaehler b { color: var(--gold-hell); font-weight: 700; }
.stapel__punkte { display: flex; gap: .45rem; }
.stapel__punkte i { width: .5rem; height: .5rem; border-radius: 50%; border: 1px solid var(--gold); transition: background .3s, transform .3s; }
.stapel__punkte i.an { background: var(--gold-hell); transform: scale(1.25); }

@media (min-width: 900px) {
  :root { --karte-breite: min(15.5vw, 250px); }
  .holo h3 { font-size: clamp(1.2rem, 1.35vw, 1.55rem); }
  .holo__titel h3 { line-height: 1.06; }
  .stapel__spur { justify-content: center; overflow: visible; padding: 2.5rem var(--rand) 3rem; gap: 0; scroll-snap-type: none; }
  .holo { flex-basis: var(--karte-breite); margin-inline: .35rem; transition: transform .6s var(--ease); }
  .holo:nth-child(1) { transform: rotate(-5deg) translateY(1.4rem); }
  .holo:nth-child(2) { transform: rotate(-1.6deg) translateY(.2rem); }
  .holo:nth-child(3) { transform: rotate(1.6deg) translateY(.2rem); }
  .holo:nth-child(1) { transform: rotate(-7deg) translateY(1.6rem); }
  .holo:nth-child(2) { transform: rotate(-4.2deg) translateY(.6rem); }
  .holo:nth-child(3) { transform: rotate(-1.4deg); }
  .holo:nth-child(4) { transform: rotate(1.4deg); }
  .holo:nth-child(5) { transform: rotate(4.2deg) translateY(.6rem); }
  .holo:nth-child(6) { transform: rotate(7deg) translateY(1.6rem); }
  .holo:hover { z-index: 3; }
  .stapel__steuer { display: none; }
}

/* ---------- Smartphone und Tablet ---------- */
.geraete { padding: calc(var(--abschnitt) * .7) 0 var(--abschnitt); background: radial-gradient(70% 60% at 75% 55%, rgba(200,169,92,.1), transparent 65%), var(--schiefer-2); overflow: hidden; }
.geraete__raster { display: grid; gap: 1.8rem; align-items: center; }
.geraete h2 { font-size: var(--groesse-h2); max-width: 24ch; }
.geraete__text p { margin-top: .8rem; max-width: 34rem; color: var(--text); }
.geraete__text .geraete__fakt { color: var(--gold-hell); font-style: italic; }
.geraete__buehne { position: relative; height: clamp(20rem, 85vw, 34rem); }
.tablet, .telefon { position: absolute; margin: 0; background: #0b0a0b; overflow: hidden; box-shadow: 0 0 0 1px #3a332b, 0 30px 60px -25px rgba(0,0,0,.95); }
.tablet img, .telefon img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.tablet { right: 0; top: 0; width: 78%; aspect-ratio: 1640 / 2360; border-radius: 22px; border: 10px solid #1d1b1c; transform: rotate(3deg); }
.telefon { left: 0; bottom: 0; width: 38%; aspect-ratio: 1206 / 2622; border-radius: 30px; border: 7px solid #1d1b1c; transform: rotate(-6deg); z-index: 2; }
@media (min-width: 900px) {
  .geraete__raster { grid-template-columns: 1fr 1.1fr; gap: 4rem; }
  .geraete__buehne { height: 38rem; }
  .tablet { width: 72%; }
  .telefon { width: 34%; left: 4%; }
}

/* ---------- Gemeinschaft: Leder ---------- */
.gemeinschaft {
  position: relative; padding: var(--abschnitt) 0; color: var(--pergament);
  background:
    radial-gradient(90% 70% at 20% 10%, rgba(240,214,128,.08), transparent 60%),
    radial-gradient(120% 100% at 80% 100%, rgba(0,0,0,.45), transparent 60%),
    linear-gradient(160deg, #47331f 0%, var(--leder) 45%, var(--leder-tief) 100%);
}
.gemeinschaft::before, .gemeinschaft::after { content: ""; position: absolute; left: 0; right: 0; height: 10px; background: var(--haarlinie); opacity: .5; }
.gemeinschaft::before { top: 14px; height: 1px; }
.gemeinschaft::after { bottom: 14px; height: 1px; }
/* dieselbe goldene Haarlinie am Anfang jedes weiteren Abschnitts */
.almanach, .geraete, .fragen, .fuss { position: relative; }
.almanach::before, .geraete::before, .fragen::before, .fuss::before { content: ""; position: absolute; left: 0; right: 0; top: 14px; height: 1px; background: var(--haarlinie); opacity: .5; pointer-events: none; z-index: 4; }
.gemeinschaft h2 { font-size: var(--groesse-h2); max-width: 24ch; }
.gemeinschaft__text { margin-top: 1.4rem; max-width: 40rem; font-size: clamp(1.2rem, 1.1rem + .5vw, 1.45rem); color: #efe4d2; }
.grundsaetze { list-style: none; padding: 0; margin: 3rem 0 0; display: grid; gap: 1.8rem; }
.grundsaetze li { display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; align-items: start; }
.grundsaetze svg { width: 3rem; height: 3rem; padding: .55rem; border-radius: 50%; border: 1.5px solid var(--gold); fill: none; stroke: var(--gold-hell); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; background: rgba(20,19,20,.35); }
.grundsaetze p { color: #e9dcc7; }
.grundsaetze strong { color: var(--pergament); display: block; font-size: 1.25rem; }


/* ---------- Alpha ---------- */
.alpha { padding: var(--abschnitt) 0; background: radial-gradient(80% 60% at 70% 30%, rgba(200,169,92,.12), transparent 60%), var(--schiefer); }
.alpha__raster { display: grid; gap: 2rem; align-items: start; }
.alpha h2 { font-size: var(--groesse-h2); margin-top: 1.4rem; max-width: 24ch; }
.alpha__kopf p { margin: 1.2rem 0 1rem; color: var(--text); max-width: 34rem; }
@media (min-width: 900px) { .alpha__raster { grid-template-columns: 1fr minmax(0, 27rem); gap: 5rem; } .alpha__kopf { position: sticky; top: 7rem; } }

.alpha__titelzeile { display: flex; align-items: center; gap: 1rem; }
.alpha__titelzeile h2 { flex: 1; margin-top: 0 !important; }
.siegel { display: block; flex: none; width: clamp(5.5rem, 24vw, 8.5rem); height: auto; transform: rotate(8deg); filter: drop-shadow(0 10px 14px rgba(0,0,0,.55)); }

.platz {
  position: relative; border-radius: 22px; padding: 1.6rem 1.3rem 1.4rem;
  background: linear-gradient(165deg, #2b2520 0%, #1b1815 60%, #151213 100%);
  border: 1.5px solid var(--gold);
  box-shadow: inset 0 0 0 6px #141113, inset 0 0 0 7px rgba(200,169,92,.4), 0 40px 70px -30px rgba(0,0,0,.95);
}
.formular { display: grid; gap: 1.35rem; }
.feld { border: 0; margin: 0; padding: 0; display: grid; gap: .45rem; min-width: 0; }
.feld label, .feld legend { font-weight: 700; font-size: 1.15rem; color: var(--pergament); padding: 0; }
.feld legend { margin-bottom: .45rem; }
.feld label span, .feld legend span { font-weight: 400; color: var(--text-leise); }
.feld input[type=email], .feld input[type=text], .feld select {
  width: 100%; min-height: 3.2rem; padding: .6rem .9rem; border-radius: 8px;
  font: 400 1.15rem var(--schrift); color: var(--pergament);
  background: #0f0e0f; border: 1px solid #574a35; transition: border-color .25s, box-shadow .25s;
}
.feld--sub {
  margin-top: -0.35rem;
  animation: feldEinfliegen .2s ease-out;
}
@keyframes feldEinfliegen {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.feld select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%); background-position: calc(100% - 1.3rem) 55%, calc(100% - .95rem) 55%; background-size: .38rem .38rem; background-repeat: no-repeat; }
.feld input::placeholder { color: #8d8274; }
.feld input:focus, .feld select:focus { outline: 2px solid var(--gold-hell); outline-offset: 1px; border-color: var(--gold-hell); }
.feld [aria-invalid="true"] { border-color: var(--fehler); }
.feld__hinweis { font-size: 1rem; color: var(--text-leise); }
.feld__fehler { font-size: 1rem; color: var(--fehler); min-height: 0; }
.feld__fehler:empty { display: none; }
.wahl, .chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.wahl label, .chips label { position: relative; cursor: pointer; }
.wahl input, .chips input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.wahl span, .chips span {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: .35rem 1rem; border-radius: 99px;
  border: 1px solid #574a35; color: var(--text); font-size: 1.05rem; background: #0f0e0f; transition: all .25s var(--ease);
}
.wahl label span { min-width: 8.5rem; justify-content: center; }
.wahl input:checked + span, .chips input:checked + span { border-color: var(--gold-hell); color: #1d1508; background: linear-gradient(180deg, #f2dc92, #c9a656); box-shadow: 0 4px 10px -6px rgba(0,0,0,.8); }
.wahl input:focus-visible + span, .chips input:focus-visible + span { outline: 2px solid var(--gold-hell); outline-offset: 2px; }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular__einwilligung { font-size: .98rem; color: var(--text-leise); }
.formular__einwilligung a { color: var(--gold-hell); }
.danke { text-align: center; display: grid; gap: 1rem; justify-items: center; padding: 1.5rem .5rem; }
.danke h3 { font-size: var(--groesse-h3); }
.danke:focus { outline: none; }
.danke[hidden], .formular[hidden], .feld[hidden], [hidden] { display: none !important; }

/* ---------- Fragen ---------- */
.fragen { padding: var(--abschnitt) 0; background: var(--schiefer-2);  }
.fragen h2 { font-size: var(--groesse-h2); margin-bottom: 1.2rem; }
.fragen details { border-bottom: 1px solid #3a332b; }
.fragen summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.15rem 0; font-weight: 700; font-size: clamp(1.15rem, 1.05rem + .4vw, 1.35rem); color: var(--pergament); }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: ""; flex: none; width: .7rem; height: .7rem; border-right: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold); transform: rotate(45deg); transition: transform .35s var(--ease); margin-right: .3rem; }
.fragen details[open] summary::after { transform: rotate(-135deg); }
.fragen summary:hover { color: var(--gold-hell); }
.fragen details p { padding: 0 0 1.1rem; color: var(--text); max-width: 40rem; line-height: 1.55; }
.fragen details p:last-child { padding-bottom: 1.3rem; }
.fragen details em { font-style: italic; color: var(--gold-hell); }
.fragen details#faq-ki:target { background: rgba(200,169,92,.08); border-radius: 8px; padding-left: .8rem; padding-right: .8rem; }

/* ---------- Fuß ---------- */
.fuss { padding: 4rem 0 calc(3rem + env(safe-area-inset-bottom)); background: #0e0d0e; text-align: center; color: var(--text-leise); }
.fuss__k { width: 5rem; height: 5rem; margin: 0 auto 1.4rem; border-radius: 14px; box-shadow: 0 10px 24px -10px #000; }
.fuss__satz { font-size: 1.2rem; color: var(--text); max-width: 30rem; margin: 0 auto 1.8rem; font-style: italic; }
.fuss ul { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1.3rem; }
.fuss a { color: var(--text-leise); text-decoration: none; display: inline-block; padding: .4rem 0; }
.fuss a:hover { color: var(--gold-hell); }
.fuss__profile { gap: .55rem !important; margin-bottom: 1.6rem !important; }
.fuss__profile a { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; padding: 0; color: var(--gold); transition: color .25s; }
.fuss__profile a:hover, .fuss__profile a:focus-visible { color: var(--gold-hell); }
.fuss__profile svg { width: 1.35rem; height: 1.35rem; fill: currentColor; }
.fuss__recht a { color: var(--text-sehr-leise); font-size: 1rem; }
.fuss__zeile { font-size: .95rem; color: var(--text-sehr-leise); }

/* ---------- Desktop ---------- */
@media (min-width: 900px) {
  :root { --rand: 2.5rem; }
  .kopf__marke img { width: 220px; }
  .buch__standbild { object-fit: contain; object-position: 18% 60%; height: 108%; top: -2%; }
  .buch__text::before { display: none; }
  .buch__text { left: auto; right: max(var(--rand), calc((100vw - 72rem) / 2)); bottom: 50%; transform: translateY(calc(50% + var(--fortschritt, 0) * -80px)); width: min(40vw, 34rem); }
  .buch__licht { background:
    linear-gradient(270deg, rgba(20,19,20,.92) 0%, rgba(20,19,20,.6) 32%, rgba(20,19,20,0) 55%),
    linear-gradient(180deg, rgba(20,19,20,.7) 0%, rgba(20,19,20,0) 18%, rgba(20,19,20,0) 80%, rgba(20,19,20,.95) 100%); }
  .gemeinschaft .rahmen { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2rem 5rem; align-items: center; }
  .gemeinschaft h2, .gemeinschaft__text { grid-column: 1; }
  .gemeinschaft .grundsaetze { grid-column: 2; grid-row: 1 / span 2; grid-template-columns: 1fr; margin: 0; gap: 2rem; padding: 2.2rem; border: 1px solid rgba(200,169,92,.35); border-radius: 18px; background: rgba(20,19,20,.28); }
}

/* ---------- Weniger Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .buch { height: auto; }
  .spiele { --spiele-ueberlappung: 0px; padding-top: 2.2rem; background: var(--schiefer); }
  .buch__buehne { position: relative; height: 100svh; }
  .buch__leinwand { display: none; }
  .buch__text { opacity: 1; transform: none; }
  .holo__dreh { animation: none; transform: none; }
  .scrollhinweis__maus i { animation: none; opacity: 1; }
  .stapel__aufruf, .stapel__aufruf-icon { animation: none; }
  .kostenlos, .kostenlos::after { animation: none; }
  .kostenlos::after { opacity: 0; }
  .menue, .menue__liste li { transition: none; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
.ohne-js .buch { height: auto; }
.ohne-js .spiele { --spiele-ueberlappung: 0px; padding-top: 2.2rem; background: var(--schiefer); }

/* Desktop: Die Spiele-Zeile gehört optisch zum Leder-Gold-Bereich darunter.
   Sie läuft aus dem Video-Schwarz in denselben Ton, mit dem der Almanach-Abschnitt beginnt (kein Band dazwischen). */
@media (min-width: 900px) {
  .spiele {
    --spiele-ueberlappung: 18vh;
    padding: calc(var(--spiele-ueberlappung) * .5) 0 1.4rem;
    background: linear-gradient(180deg, rgba(42,33,24,0) 0, rgba(42,33,24,.9) 28%, #2a2118 48%);
    border-bottom: 0;
  }
  .spiele__label { color: var(--gold); }
  .spiele__reihe { color: var(--pergament); }
  .spiele__reihe li + li::before { background: rgba(200,169,92,.4); }
  .almanach { padding-top: calc(var(--abschnitt) * .45); background: radial-gradient(70% 40% at 50% 32%, rgba(200,169,92,var(--almanach-glanz)), transparent 70%), linear-gradient(180deg, #2a2118 0%, #2a2118 6%, #3b2a1e 50%, #2c2219 100%); }
  /* Naht absichern: die Zeile überdeckt die obersten Pixel des Almanach-Abschnitts im selben Ton (kein Streifen bei Bruchteilen von Pixeln) */
  .spiele { margin-bottom: -1px; position: relative; z-index: 3; box-shadow: 0 10px 0 #2a2118; }
}