/* =========================================================================
   Players Lounge Dorsten
   Eigenes Stylesheet, keine Bibliothek, keine externen Schriften.
   Aufbau: 1 Grundlagen, 2 Bausteine, 3 Kopf, 4 Start, 5 Abschnitte,
           6 Formulare, 7 Fuß, 8 Bewegung, 9 Schmale Bildschirme
   ========================================================================= */

/* --- 1 Grundlagen ------------------------------------------------------ */

:root {
  --grund:        #0d0d10;
  --grund-2:      #121217;
  --karte:        #1b1b23;
  --karte-hoch:   #22222c;
  --rand:         #292932;
  --text:         #ecedf0;
  --gedaempft:    #a2a4ad;
  --akzent:       #e01b24;
  --akzent-dunkel:#bc1919;
  --akzent-hell:  #ff4d4d;
  --tuerkis:      #17b9c6;

  --breite:       1180px;
  --luft:         clamp(1rem, 4vw, 2rem);
  --abschnitt:    clamp(3.5rem, 9vw, 7rem);
  --radius:       14px;
  --radius-gross: 22px;

  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;

  --schatten:      0 12px 34px rgba(0, 0, 0, .42);
  --schatten-hoch: 0 22px 60px rgba(0, 0, 0, .55);
  --tempo:         .45s cubic-bezier(.22, .68, .35, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--schrift);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: var(--akzent-hell); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: #fff; }

h1, h2, h3 {
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0 0 .6em;
  font-weight: 800;
}

h1 { font-size: clamp(2rem, 1.2rem + 3.6vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 1.1rem + 2.1vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 1rem + .7vw, 1.45rem); }

p { margin: 0 0 1.1em; }
ul, ol { margin: 0 0 1.1em; padding-left: 1.3em; }
li { margin-bottom: .45em; }

:focus-visible {
  outline: 3px solid var(--tuerkis);
  outline-offset: 3px;
  border-radius: 4px;
}

.sprungmarke {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--akzent);
  color: #fff;
  padding: .8rem 1.2rem;
  border-radius: 0 0 var(--radius) 0;
  font-weight: 700;
}
.sprungmarke:focus { left: 0; }

/* Nur für Screenreader, optisch unsichtbar */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --- 2 Bausteine ------------------------------------------------------- */

.huelle {
  width: min(100% - 2 * var(--luft), var(--breite));
  margin-inline: auto;
}
.huelle.schmal { width: min(100% - 2 * var(--luft), 780px); }

.knopf {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .95rem 1.6rem .95rem 1.75rem;
  border: 0;
  border-radius: 3px;
  background: var(--akzent-dunkel);
  color: #fff;
  font: inherit;
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(224, 27, 36, .28);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
/* Akzentkante links, wächst beim Zeigen */
.knopf::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: #fff;
  opacity: .92;
  transition: width .25s ease;
  z-index: 1;
}
/* Lichtstreifen, der beim Zeigen einmal durchläuft */
.knopf::after {
  content: "";
  position: absolute;
  top: -50%;
  bottom: -50%;
  left: -70%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .38), transparent);
  transform: skewX(-22deg);
  transition: left .55s ease;
  pointer-events: none;
}
.knopf:hover,
.knopf:focus-visible {
  color: #fff;
  background: var(--akzent);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(224, 27, 36, .4);
}
.knopf:hover::before,
.knopf:focus-visible::before { width: 9px; }
.knopf:hover::after,
.knopf:focus-visible::after { left: 135%; }
.knopf:active { transform: translateY(0); }

.knopf-leer {
  background: transparent;
  border: 2px solid #3a3a46;
  box-shadow: none;
  color: var(--text);
}
.knopf-leer::before { background: var(--akzent); opacity: 1; }
.knopf-leer:hover,
.knopf-leer:focus-visible {
  border-color: var(--akzent);
  background: rgba(224, 27, 36, .12);
  box-shadow: none;
}

.knopf-klein { padding: .6rem 1.05rem .6rem 1.25rem; font-size: .8rem; }

/* Pulsierender Ring für die Reservierung, langsam genug für jeden Kopf */
.knopf-puls { animation: puls 2.2s cubic-bezier(.4, 0, .6, 1) infinite; }
@keyframes puls {
  0%   { box-shadow: 0 0 0 0 rgba(224, 27, 36, .6), 0 6px 18px rgba(224, 27, 36, .28); background: var(--akzent-dunkel); }
  45%  { background: var(--akzent); }
  70%  { box-shadow: 0 0 0 18px rgba(224, 27, 36, 0), 0 6px 18px rgba(224, 27, 36, .28); }
  100% { box-shadow: 0 0 0 0 rgba(224, 27, 36, 0), 0 6px 18px rgba(224, 27, 36, .28); background: var(--akzent-dunkel); }
}
.knopf-puls:hover { animation-play-state: paused; }

.knopf-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin-top: 1.8rem;
}

.marke {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .32rem .85rem .32rem .7rem;
  border: 1px solid var(--rand);
  border-radius: 3px;
  background: rgba(18, 18, 23, .8);
  color: var(--gedaempft);
  font-size: .85rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-weight: 600;
}
.marke::before {
  content: "";
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--akzent);
  box-shadow: 0 0 10px var(--akzent);
  animation: pulsieren 2s ease-in-out infinite;
}

.leuchten {
  background: linear-gradient(95deg, var(--akzent-hell), #fff 45%, var(--akzent-hell));
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: wandern 9s linear infinite;
}

.vorspann {
  font-size: clamp(1.05rem, 1rem + .45vw, 1.28rem);
  color: var(--gedaempft);
  max-width: 62ch;
}

/* --- 3 Kopf ------------------------------------------------------------ */

.kopf {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(13, 13, 16, .55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: background .35s ease, border-color .35s ease, padding .35s ease;
  padding-block: .85rem;
}
body.menue-offen .kopf { background: #0a0a0d; border-bottom-color: transparent; }
.kopf.ist-gescrollt {
  background: rgba(13, 13, 16, .94);
  border-bottom-color: var(--rand);
  padding-block: .5rem;
}

.kopf-reihe {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  justify-content: space-between;
}

.kopf-logo img {
  height: clamp(38px, 4.4vw, 52px);
  width: auto;
  transition: transform var(--tempo);
}
.kopf-logo:hover img { transform: scale(1.04); }

/* Das Menü ist auf jeder Breite ein bildschirmfüllendes Overlay. Es öffnet
   sich als Kreis aus der Ecke des Schalters, wie eine Kugel, die sich ausdehnt. */
.kopf-menue {
  position: fixed;
  inset: 0;
  z-index: 98;                 /* unter dem Kopf (100): Logo und X bleiben sichtbar */
  display: flex;
  flex-direction: column;
  padding: clamp(6.5rem, 14vh, 8rem) var(--luft) clamp(1.5rem, 4vh, 3rem);
  overflow-y: auto;
  background:
    radial-gradient(60% 50% at 85% 10%, rgba(224, 27, 36, .28), transparent 65%),
    radial-gradient(50% 40% at 10% 90%, rgba(23, 185, 198, .12), transparent 60%),
    #0a0a0d;
  visibility: hidden;
  clip-path: circle(0% at calc(100% - 3.5rem) 4.2rem);
  transition: clip-path .75s cubic-bezier(.4, .1, .2, 1);
}
/* Keine Transition auf visibility: der vererbte Wert bleibt sonst an den
   Kindern hängen. Das Schließen steuert dynamik.js über die Klasse
   „schliesst", solange die Blende zuläuft. */
.kopf-menue.ist-offen,
.kopf-menue.schliesst,
.kopf-menue.ist-offen *,
.kopf-menue.schliesst * { visibility: visible; }
.kopf-menue.ist-offen {
  clip-path: circle(170% at calc(100% - 3.5rem) 4.2rem);
  transition: clip-path .85s cubic-bezier(.4, .1, .2, 1);
}

.menue-innen {
  width: min(100%, var(--breite));
  margin: auto;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}

.menue-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menue-liste li { margin: 0; }
.menue-liste a {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(.9rem, 2vw, 1.4rem);
  padding: .35em 0;
  color: #d9dade;
  text-decoration: none;
  font-size: clamp(1.7rem, 1rem + 3.4vw, 3.4rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  transition: color .25s ease, transform .35s cubic-bezier(.22, .68, .35, 1);
}
/* Jeder Punkt bekommt eine Kugel aus dem Satz 1 bis 7 */
.menue-liste a::before {
  content: "";
  flex: 0 0 auto;
  width: .55em;
  height: .55em;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .7), transparent 45%),
    radial-gradient(circle at 68% 74%, rgba(0, 0, 0, .5), transparent 60%),
    var(--k, #cf2b2b);
  box-shadow: inset -2px -3px 5px rgba(0, 0, 0, .5), 0 4px 10px rgba(0, 0, 0, .5);
  transition: transform .35s cubic-bezier(.22, .68, .35, 1);
}
.menue-liste li:nth-child(1) a { --k: #f2c230; }
.menue-liste li:nth-child(2) a { --k: #1f56b5; }
.menue-liste li:nth-child(3) a { --k: #cf2b2b; }
.menue-liste li:nth-child(4) a { --k: #7b3fa0; }
.menue-liste li:nth-child(5) a { --k: #ef7d1a; }
.menue-liste li:nth-child(6) a { --k: #1f8a4c; }
.menue-liste li:nth-child(7) a { --k: #8d2b2b; }
.menue-liste a:hover,
.menue-liste a:focus-visible,
.menue-liste a[aria-current="page"] { color: #fff; transform: translateX(.35em); }
.menue-liste a:hover::before,
.menue-liste a:focus-visible::before { transform: rotate(180deg) scale(1.15); }
.menue-liste a[aria-current="page"]::after {
  content: "";
  width: .35em;
  height: 2px;
  background: var(--akzent);
}

/* Punkte gleiten gestaffelt herein, sobald das Menü offen ist */
.js .menue-liste li { opacity: 0; transform: translateY(26px); transition: opacity .45s ease, transform .55s cubic-bezier(.22, .68, .35, 1); }
.js .kopf-menue.ist-offen .menue-liste li { opacity: 1; transform: none; }
.js .kopf-menue.ist-offen .menue-liste li:nth-child(1) { transition-delay: .25s; }
.js .kopf-menue.ist-offen .menue-liste li:nth-child(2) { transition-delay: .31s; }
.js .kopf-menue.ist-offen .menue-liste li:nth-child(3) { transition-delay: .37s; }
.js .kopf-menue.ist-offen .menue-liste li:nth-child(4) { transition-delay: .43s; }
.js .kopf-menue.ist-offen .menue-liste li:nth-child(5) { transition-delay: .49s; }
.js .kopf-menue.ist-offen .menue-liste li:nth-child(6) { transition-delay: .55s; }
.js .kopf-menue.ist-offen .menue-liste li:nth-child(7) { transition-delay: .61s; }

.menue-info {
  border-left: 1px solid rgba(255, 255, 255, .12);
  padding-left: clamp(1.5rem, 3vw, 3rem);
  color: var(--gedaempft);
  font-size: .98rem;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease .55s, transform .6s ease .55s;
}
.kopf-menue.ist-offen .menue-info { opacity: 1; transform: none; }
.menue-info-titel { color: #fff; font-weight: 800; font-size: 1.15rem; margin-bottom: .6rem; }
.menue-info address { font-style: normal; line-height: 1.8; margin-bottom: 1rem; }
.menue-info .menue-status { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 1rem; font-weight: 600; }
.menue-info .menue-status::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: #7a7d86; }
.menue-info .menue-status.ist-offen { color: #7ddc9f; }
.menue-info .menue-status.ist-offen::before { background: #4ade80; box-shadow: 0 0 9px #4ade80; }
.menue-info .menue-tel { display: block; color: #fff; font-size: 1.35rem; font-weight: 800; text-decoration: none; margin-bottom: .6rem; }
.menue-info .menue-tel:hover { color: var(--akzent-hell); }
.menue-info .social { margin-top: .6rem; }
.menue-info .knopf { margin-top: 1.6rem; }

.kopf-knopf { display: inline-flex; }
.kopf-rechts { display: flex; align-items: center; gap: .8rem; }

.kopf-schalter {
  position: relative;
  z-index: 120;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: none;
  border: 1.5px solid var(--rand);
  border-radius: 3px;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  padding: .5rem 1rem;
  cursor: pointer;
}
.kopf-schalter-balken {
  position: relative;
  width: 18px;
  height: 2px;
  background: currentColor;
  transition: background .2s ease;
}
.kopf-schalter-balken::before,
.kopf-schalter-balken::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: currentColor;
  transition: transform var(--tempo);
}
.kopf-schalter-balken::before { top: -6px; }
.kopf-schalter-balken::after  { top: 6px; }
.kopf-schalter[aria-expanded="true"] .kopf-schalter-balken { background: transparent; }
.kopf-schalter[aria-expanded="true"] .kopf-schalter-balken::before { transform: translateY(6px) rotate(45deg); }
.kopf-schalter[aria-expanded="true"] .kopf-schalter-balken::after  { transform: translateY(-6px) rotate(-45deg); }

/* --- 4 Startseite: Hero und Fakten ------------------------------------- */

.hero {
  position: relative;
  min-height: clamp(30rem, 82vh, 46rem);
  display: grid;
  align-items: end;
  overflow: hidden;
  margin-top: -5.2rem;
  padding-top: 5.2rem;
}

.hero-bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  animation: heranfahren 22s ease-out forwards;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgba(13,13,16,.86) 0%, rgba(13,13,16,.58) 34%, rgba(13,13,16,.94) 88%),
    radial-gradient(90% 60% at 18% 78%, rgba(224,27,36,.22), transparent 62%);
}

.hero-inhalt {
  position: relative;
  z-index: 2;
  padding-block: clamp(2.5rem, 7vw, 5rem);
  max-width: 44rem;
}
.hero-inhalt h1 { margin-top: .7rem; }
.hero-text { font-size: clamp(1.05rem, 1rem + .5vw, 1.3rem); color: #d7d8de; max-width: 40rem; }

/* --- 4b Die Kugelreihe -------------------------------------------------
   Vier Billardkugeln tragen die Eckdaten. Reines CSS, kein Bild: der
   Farbkörper kommt aus übereinanderliegenden Verläufen, das Glanzlicht aus
   ::before, der Schatten auf dem Tuch aus ::after. Die Zahlen sind echter
   Text und werden vorgelesen, die Kugel selbst ist nur Farbe.
   --------------------------------------------------------------------- */

.fakten {
  position: relative;
  z-index: 3;
  margin-top: clamp(-4.5rem, -6vw, -3rem);
  padding-block: 0 clamp(1rem, 3vw, 2rem);
}

/* Das Tuch, auf dem die Kugeln liegen */
.fakten-tuch {
  position: relative;
  border-radius: var(--radius-gross);
  padding: clamp(2.2rem, 4vw, 3rem) clamp(1rem, 3vw, 2.4rem) clamp(1.8rem, 3vw, 2.4rem);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(23, 185, 198, .10), transparent 60%),
    linear-gradient(170deg, #12343a 0%, #0f272b 45%, #0c1f22 100%);
  border: 1px solid #1d4249;
  box-shadow: var(--schatten-hoch), inset 0 1px 0 rgba(255, 255, 255, .05);
  overflow: hidden;
}

/* Die Bande: schmaler heller Streifen am oberen Rand */
.fakten-tuch::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, transparent, rgba(23, 185, 198, .5), transparent);
}

.kugelreihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: clamp(1.4rem, 3vw, 2.2rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.fakt {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .9rem;
}

/* --- Die Kugel selbst ------------------------------------------------- */

.kugel {
  --k: #d32f2f;
  --k-dunkel: #6d1414;
  position: relative;
  width: clamp(5.2rem, 11vw, 7rem);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    /* Glanzkante unten rechts, Licht von oben links */
    radial-gradient(circle at 72% 80%, rgba(255, 255, 255, .16), transparent 34%),
    radial-gradient(circle at 30% 26%, rgba(255, 255, 255, .5), transparent 46%),
    radial-gradient(circle at 68% 74%, var(--k-dunkel), transparent 62%),
    var(--k);
  box-shadow:
    inset -6px -8px 16px rgba(0, 0, 0, .55),
    inset 4px 5px 12px rgba(255, 255, 255, .18),
    0 10px 20px rgba(0, 0, 0, .45);
  transition: transform .9s cubic-bezier(.2, .7, .3, 1);
}

/* Glanzlicht */
.kugel::before {
  content: "";
  position: absolute;
  top: 12%;
  left: 18%;
  width: 26%;
  height: 20%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .92), rgba(255, 255, 255, 0) 70%);
  filter: blur(1px);
}

/* Schatten auf dem Tuch */
.kugel::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -14%;
  height: 18%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, .6), transparent 70%);
  z-index: -1;
}

/* Gestreifte Kugel: weisser Körper mit farbigem Gürtel */
.kugel-gestreift {
  background:
    radial-gradient(circle at 72% 80%, rgba(255, 255, 255, .14), transparent 34%),
    radial-gradient(circle at 30% 26%, rgba(255, 255, 255, .55), transparent 46%),
    radial-gradient(circle at 68% 74%, rgba(0, 0, 0, .42), transparent 62%),
    linear-gradient(176deg,
      #f4f3ee 0 21%,
      var(--k) 21% 79%,
      #e9e7e0 79% 100%);
}

/* Das Nummernfeld */
.kugel-zahl {
  position: relative;
  width: 58%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 38% 32%, #fff, #e7e5dd 78%, #cfccc2 100%);
  box-shadow: inset 0 -2px 5px rgba(0, 0, 0, .22), 0 1px 2px rgba(0, 0, 0, .3);
  color: #14141a;
  font-weight: 800;
  font-size: clamp(1.15rem, .8rem + 1.3vw, 1.65rem);
  line-height: 1;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.kugel-zahl .einheit { font-size: .62em; margin-left: .04em; }
.kugel-zahl.ist-lang { font-size: clamp(.92rem, .62rem + 1.05vw, 1.3rem); }

/* Farben nach dem Poolsatz */
.kugel-rot      { --k: #cf2b2b; --k-dunkel: #6b1212; }
.kugel-violett  { --k: #7b3fa0; --k-dunkel: #3b1a52; }
.kugel-blau     { --k: #1f56b5; --k-dunkel: #0e2a5e; }
.kugel-weinrot  { --k: #8d2b2b; --k-dunkel: #471212; }

.fakt-text {
  color: #c9ccd2;
  font-size: .95rem;
  line-height: 1.45;
  max-width: 15rem;
}
.fakt-text strong { color: #fff; display: block; font-size: 1rem; }

/* --- Der Anstoß --------------------------------------------------------
   Beim Laden liegen die vier Kugeln als Haufen links. Die weiße Spielkugel
   rollt von außerhalb herein, trifft, und die Kugeln rollen auseinander auf
   ihre Plätze. Strecke und Drehung je Kugel setzt dynamik.js als --dx und
   --rot, weil sie vom Raster abhängen. Liegen die Kugeln untereinander
   (schmale Bildschirme), gibt es keinen Stoß, dann rollen sie einzeln von
   links herein.
   --------------------------------------------------------------------- */

.spielkugel {
  --sk-start: -40vw;
  --sk-ziel: 0px;
  position: absolute;
  z-index: 2;
  width: clamp(4.6rem, 9.5vw, 6.2rem);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 30% 26%, #fff, transparent 48%),
    radial-gradient(circle at 68% 74%, #b9b7ad, transparent 60%),
    #f1efe8;
  box-shadow:
    inset -6px -8px 16px rgba(0, 0, 0, .35),
    inset 4px 5px 12px rgba(255, 255, 255, .6),
    0 10px 20px rgba(0, 0, 0, .45);
  transform: translateX(var(--sk-start)) rotate(0deg);
}
.spielkugel::before {
  content: "";
  position: absolute;
  top: 12%;
  left: 18%;
  width: 26%;
  height: 20%;
  border-radius: 50%;
  background: radial-gradient(circle, #fff, rgba(255, 255, 255, 0) 70%);
}

.fakten-tuch.ist-angestossen .spielkugel {
  animation: anstoss 3s linear forwards;   /* Dauer setzt dynamik.js */
}
@keyframes anstoss {
  0%   { opacity: 1; transform: translateX(var(--sk-start)) rotate(0deg); }
  100% { opacity: 1; transform: translateX(var(--sk-ziel)) rotate(var(--sk-rot, 1440deg)); }
}

.js .kugelreihe .kugel {
  --dx: 160px;
  --rot: -300deg;
  opacity: 0;
  transform: translateX(calc(-1 * var(--dx))) rotate(var(--rot));
}
.js .kugelreihe.bereit .kugel {
  opacity: 1;
  transition: opacity .3s ease;
}
.js .kugelreihe.ist-da .kugel {
  opacity: 1;
  transform: translateX(0) rotate(0deg);
  /* fast gleichmäßig, am Ende sanft ausrollend; Dauer und Verzögerung je Kugel aus dynamik.js */
  transition: transform var(--dauer, 2.4s) cubic-bezier(.22, .58, .3, 1) var(--verz, 0s), opacity .3s ease;
}

.js .kugelreihe .fakt-text { opacity: 0; transform: translateY(8px); transition: opacity .6s ease var(--text-verz, 1.2s), transform .6s ease var(--text-verz, 1.2s); }
.js .kugelreihe.ist-da .fakt-text { opacity: 1; transform: none; }

/* --- Der Hero kommt gestaffelt ---------------------------------------- */

.js .hero-inhalt > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s ease, transform .9s cubic-bezier(.22, .68, .35, 1);
}
.js .hero.ist-da .hero-inhalt > * { opacity: 1; transform: none; }
.js .hero.ist-da .hero-inhalt > :nth-child(2) { transition-delay: .12s; }
.js .hero.ist-da .hero-inhalt > :nth-child(3) { transition-delay: .26s; }
.js .hero.ist-da .hero-inhalt > :nth-child(4) { transition-delay: .4s; }
.js .hero.ist-da .hero-inhalt > :nth-child(5) { transition-delay: .5s; }
.js .hero.ist-da .hero-inhalt > :nth-child(6) { transition-delay: .6s; }

/* --- Der Slogan: die Hervorhebung wandert von Wort zu Wort ------------ */

.slogan {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.4rem;
  margin: 1.4rem 0 .35rem;
  font-size: clamp(1.05rem, .95rem + .6vw, 1.35rem);
  font-weight: 800;
  letter-spacing: .01em;
}
.slogan-teil {
  position: relative;
  color: #8a8d97;
  padding-bottom: .2rem;
  transition: color .5s ease, text-shadow .5s ease;
  animation: slogan-wandert 7.2s ease-in-out infinite;
}
.slogan-teil::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--akzent);
  transform: scaleX(0);
  transform-origin: left;
  animation: slogan-linie 7.2s ease-in-out infinite;
}
.slogan-teil:nth-child(2),
.slogan-teil:nth-child(2)::after { animation-delay: 2.4s; }
.slogan-teil:nth-child(3),
.slogan-teil:nth-child(3)::after { animation-delay: 4.8s; }

@keyframes slogan-wandert {
  0%, 30%      { color: #fff; text-shadow: 0 0 18px rgba(255, 255, 255, .35); }
  36%, 100%    { color: #8a8d97; text-shadow: none; }
}
@keyframes slogan-linie {
  0%           { transform: scaleX(0); transform-origin: left; }
  8%, 28%      { transform: scaleX(1); transform-origin: left; }
  34%, 100%    { transform: scaleX(0); transform-origin: right; }
}

.orte {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .55rem;
  margin: 0 0 .4rem;
  color: var(--gedaempft);
  font-size: .95rem;
  letter-spacing: .04em;
}
.orte strong { color: #fff; }
.orte span::before,
.orte strong + span::before { content: "·"; margin-right: .55rem; color: #5c5f69; }

/* Anstoßen: beim Zeigen dreht die Kugel eine Winzigkeit weiter */
.kugel:hover { transform: rotate(14deg) translateY(-3px); }
.js .kugelreihe.ist-da .kugel:hover { transform: rotate(14deg) translateY(-3px); }

/* --- 5 Abschnitte ------------------------------------------------------ */

.block { padding-block: var(--abschnitt); position: relative; }
.block-dunkel { background: var(--grund-2); }
.block-linie { border-top: 1px solid var(--rand); }

.block-kopf { max-width: 48rem; margin-bottom: clamp(2rem, 4vw, 3rem); }

.paar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
  gap: clamp(1.8rem, 4vw, 3.5rem);
  align-items: center;
}
.paar-gedreht > .paar-bild { order: -1; }

.paar-bild {
  position: relative;
  border-radius: var(--radius-gross);
  overflow: hidden;
  box-shadow: var(--schatten);
}
.paar-bild img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 1.1s cubic-bezier(.16, .8, .3, 1);
}
.paar-bild:hover img { transform: scale(1.05); }
.paar-bild::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, transparent 55%, rgba(13, 13, 16, .55));
  pointer-events: none;
}

.karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  gap: 1.2rem;
}

.karte {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--radius-gross);
  padding: 1.7rem 1.5rem;
  position: relative;
  overflow: hidden;
  transition: transform var(--tempo), border-color var(--tempo), box-shadow var(--tempo);
}
.karte::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, var(--akzent), var(--tuerkis));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--tempo);
}
.karte:hover {
  transform: translateY(-5px);
  border-color: #3a3a46;
  box-shadow: var(--schatten);
}
.karte:hover::before { transform: scaleX(1); }
.karte h3 { margin-bottom: .45rem; }
.karte p:last-child { margin-bottom: 0; }
.karte-text { color: var(--gedaempft); }

/* Preistabelle */
.preisliste {
  display: grid;
  gap: 1px;
  background: var(--rand);
  border: 1px solid var(--rand);
  border-radius: var(--radius-gross);
  overflow: hidden;
}
.preiszeile {
  background: var(--karte);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .4rem 1.5rem;
  padding: 1.35rem 1.5rem;
  transition: background var(--tempo);
}
.preiszeile:hover { background: var(--karte-hoch); }
.preiszeile-was { font-weight: 700; font-size: 1.08rem; }
.preiszeile-zusatz { display: block; font-weight: 400; font-size: .92rem; color: var(--gedaempft); }
.preiszeile-preis {
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem);
  font-weight: 800;
  color: var(--akzent-hell);
  white-space: nowrap;
  letter-spacing: -.02em;
}
.preiszeile-preis.ohne-betrag { font-size: 1.05rem; color: var(--gedaempft); font-weight: 600; }

/* Öffnungszeiten */
.zeitliste {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .55rem 1.5rem;
  margin: 0;
  padding: 1.5rem 1.6rem;
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--radius-gross);
}
.zeitliste dt { color: var(--gedaempft); }
.zeitliste dd { margin: 0; font-weight: 700; text-align: right; }

/* Filialen */
.filialen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: 1.1rem;
}
.filiale {
  border: 1px solid var(--rand);
  border-radius: var(--radius-gross);
  padding: 1.5rem;
  background: var(--karte);
  text-align: center;
}
.filiale-ort { font-size: 1.45rem; font-weight: 800; margin-bottom: .2rem; }
.filiale-stand { color: var(--gedaempft); font-size: .95rem; }
.filiale.ist-offen { border-color: var(--akzent); background: linear-gradient(160deg, rgba(224,27,36,.14), var(--karte) 60%); }
.filiale.ist-offen .filiale-stand { color: var(--akzent-hell); font-weight: 700; }

/* Aufruf-Band */
.band {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-gross);
  padding: clamp(2.2rem, 5vw, 3.6rem);
  text-align: center;
  background: var(--karte);
  border: 1px solid var(--rand);
}
.band-bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .28;
  z-index: 0;
}
.band > :not(.band-bild) { position: relative; z-index: 1; }
.band h2 { margin-bottom: .5rem; }
.band p { color: #d5d6dc; max-width: 46rem; margin-inline: auto; }
.band .knopf-reihe { justify-content: center; }

/* Galerie */
.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: 1rem;
}
.galerie figure { margin: 0; border-radius: var(--radius); overflow: hidden; position: relative; }
.galerie img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 1s cubic-bezier(.16,.8,.3,1); }
.galerie figure:hover img { transform: scale(1.06); }
.galerie figcaption {
  position: absolute;
  inset: auto 0 0;
  padding: 1.4rem .9rem .7rem;
  background: linear-gradient(rgba(13,13,16,0) 0%, rgba(13,13,16,.62) 34%, rgba(13,13,16,.95) 100%);
  font-size: .9rem;
  color: #e3e4e8;
}

/* Hinweiskasten */
.hinweis {
  border-left: 3px solid var(--akzent);
  background: var(--karte);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1.1rem 1.3rem;
  color: var(--gedaempft);
}
.hinweis strong { color: var(--text); }

/* Fließtext-Seiten */
.text-seite h2 { margin-top: 2.4rem; }
.text-seite h3 { margin-top: 1.8rem; }
.text-seite { color: #d9dade; }
.text-seite strong { color: var(--text); }

.seiten-kopf {
  position: relative;
  padding-block: clamp(3.5rem, 9vw, 6rem) clamp(2rem, 5vw, 3rem);
  border-bottom: 1px solid var(--rand);
  overflow: hidden;
}
.seiten-kopf-bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .22;
  z-index: 0;
}
.seiten-kopf > :not(.seiten-kopf-bild) { position: relative; z-index: 1; }
.seiten-kopf h1 { margin-bottom: .35rem; }

/* Kompakter Kopf für die Kartenseite: die Karte soll am Tisch sofort da sein */
.seiten-kopf-kompakt { padding-block: clamp(1.8rem, 4vw, 3rem) clamp(1rem, 2.5vw, 1.8rem); }
.seiten-kopf-kompakt h1 { font-size: clamp(1.6rem, 1.1rem + 2.4vw, 2.8rem); }
.seiten-kopf-kompakt .vorspann { margin-bottom: 0; }
.seite-getraenke-speisen #karte.block { padding-top: clamp(1.2rem, 3vw, 2.5rem); }
@media (max-width: 720px) {
  .seiten-kopf-kompakt .vorspann { display: none; }
  .seiten-kopf-kompakt .marke { display: none; }
  .seiten-kopf-kompakt h1 { margin-bottom: 0; }
  .seite-getraenke-speisen #karte.block { padding-top: .9rem; }
}

/* --- 6 Formulare ------------------------------------------------------- */

.formular {
  display: grid;
  gap: 1.15rem;
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--radius-gross);
  padding: clamp(1.4rem, 3.5vw, 2.2rem);
}
.feld { display: grid; gap: .4rem; }
.feld-paar { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); gap: 1.15rem; }
.feld label { font-weight: 600; font-size: .95rem; }
.feld .pflicht { color: var(--akzent-hell); }

.feld input,
.feld select,
.feld textarea {
  width: 100%;
  padding: .85rem 1rem;
  background: var(--grund);
  border: 1.5px solid var(--rand);
  border-radius: var(--radius);
  color: var(--text);
  font: inherit;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.feld input:focus,
.feld select:focus,
.feld textarea:focus {
  outline: none;
  border-color: var(--akzent);
  box-shadow: 0 0 0 3px rgba(224, 27, 36, .18);
}
.feld textarea { min-height: 8.5rem; resize: vertical; }

.feld-wahl { display: flex; gap: .65rem; align-items: flex-start; }
.feld-wahl input { width: auto; margin-top: .3rem; flex: 0 0 auto; }
.feld-wahl label { font-weight: 400; font-size: .93rem; color: var(--gedaempft); }

.honig { position: absolute; left: -9999px; }

.meldung {
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  margin-bottom: 1.5rem;
  border: 1px solid;
}
.meldung-gut { border-color: #2f7d4a; background: rgba(47, 125, 74, .16); }
.meldung-fehler { border-color: var(--akzent); background: rgba(224, 27, 36, .14); }
.meldung p:last-child { margin-bottom: 0; }

/* --- 7 Fuß ------------------------------------------------------------- */

.fuss {
  background: var(--grund-2);
  border-top: 1px solid var(--rand);
  padding-block: clamp(2.8rem, 6vw, 4.5rem) 1.5rem;
  margin-top: var(--abschnitt);
  font-size: .95rem;
}
.fuss-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
  gap: clamp(1.8rem, 4vw, 3rem);
}
.fuss-titel { font-size: 1rem; text-transform: uppercase; letter-spacing: .07em; color: var(--gedaempft); margin-bottom: 1rem; font-weight: 700; }
.fuss-text { color: var(--gedaempft); margin-top: 1.1rem; }
.fuss-adresse { font-style: normal; color: var(--gedaempft); line-height: 1.9; }
.fuss-adresse strong { color: var(--text); }
.fuss-adresse a { color: var(--gedaempft); text-decoration: none; }
.fuss-adresse a:hover { color: var(--akzent-hell); text-decoration: underline; }

.fuss-zeiten { display: grid; grid-template-columns: 1fr auto; gap: .4rem 1rem; margin: 0; color: var(--gedaempft); }
.fuss-zeiten dd { margin: 0; text-align: right; color: var(--text); font-weight: 600; }

.fuss-liste { list-style: none; margin: 0; padding: 0; }
.fuss-liste li { margin-bottom: .55rem; }
.fuss-liste a { color: var(--gedaempft); text-decoration: none; }
.fuss-liste a:hover { color: var(--akzent-hell); }

.fuss-unten {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem 1.5rem;
  justify-content: space-between;
  align-items: center;
  margin-top: 2.8rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rand);
  color: var(--gedaempft);
}
.fuss-unten p { margin: 0; }
.fuss-recht { display: flex; gap: 1.3rem; list-style: none; margin: 0; padding: 0; }
.fuss-recht li { margin: 0; }
.fuss-recht a { color: var(--gedaempft); text-decoration: none; }
.fuss-recht a:hover { color: var(--akzent-hell); }

/* --- 8 Bewegung -------------------------------------------------------- */

.js .reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.22, .68, .35, 1);
}
.js .reveal.ist-da { opacity: 1; transform: none; }
.js .reveal-2 { transition-delay: .1s; }
.js .reveal-3 { transition-delay: .2s; }

@keyframes pulsieren { 50% { opacity: .35; transform: scale(.85); } }
@keyframes wandern   { to { background-position: 220% center; } }
@keyframes heranfahren { from { transform: scale(1.12); } to { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
    animation-delay: 0s !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .hero-bild { animation: none; }
  .js .kugelreihe .kugel, .js .kugelreihe .fakt-text, .js .hero-inhalt > * { opacity: 1; transform: none; }
  .spielkugel { display: none; }
  .knopf-puls, .aktionsleiste a.ist-haupt { animation: none; }
  .slogan-teil, .slogan-teil::after { animation: none; }
  .kopf-menue { transition: none; }
  .kopf-menue.ist-offen { clip-path: none; }
  .js .menue-liste li, .menue-info { transition: none; }
  .js .kopf-menue.ist-offen .menue-liste li, .kopf-menue.ist-offen .menue-info { opacity: 1; transform: none; }
  .slogan-teil { color: #fff; }
}

/* --- 9 Schmale Bildschirme --------------------------------------------- */

@media (max-width: 1180px) {
  .paar-gedreht > .paar-bild { order: 0; }
}

body.menue-offen { overflow: hidden; }

@media (max-width: 860px) {
  .menue-innen { grid-template-columns: 1fr; gap: 2rem; align-items: start; }
  .menue-info { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255,255,255,.12); padding-top: 1.5rem; }
  .kopf-knopf { display: none; }
}

@media (max-width: 640px) {
  .hero { min-height: 32rem; }
  .fakten { margin-top: -2rem; }
  .fakt { padding: 1.2rem 1.15rem; }
  .zeitliste { grid-template-columns: 1fr; gap: .15rem; }
  .zeitliste dd { text-align: left; margin-bottom: .6rem; }
  .preiszeile { flex-direction: column; align-items: flex-start; }
  .fuss-zeiten { grid-template-columns: 1fr; gap: .1rem; }
  .fuss-zeiten dd { text-align: left; margin-bottom: .55rem; }
  .fuss-unten { flex-direction: column; align-items: flex-start; }
}

/* --- 10 Nachträge aus dem Design-Review -------------------------------- */

/* Sprungziel nicht unter dem klebenden Kopf verstecken */
#inhalt { scroll-margin-top: 6rem; }
[id] { scroll-margin-top: 6rem; }

/* Angenehme Zeilenlänge im Fließtext */
.huelle.schmal p,
.text-seite p,
.text-seite li { max-width: 68ch; }

/* Öffnungsstatus als schmale Leiste über dem Kopf */
.statusleiste {
  background: #08080a;
  border-bottom: 1px solid var(--rand);
  font-size: .87rem;
}
.statusleiste-reihe {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .3rem 1.2rem;
  padding-block: .45rem;
}
.kopf-status {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 0;
  font-weight: 600;
}
.kopf-status a { color: var(--gedaempft); text-decoration: none; }
.kopf-status a:hover { color: var(--text); text-decoration: underline; }
.kopf-status-zusatz { color: #7a7d86; font-weight: 400; }
.kopf-status-punkt {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--gedaempft);
  flex: 0 0 .5rem;
}
.statusleiste.ist-offen .kopf-status a { color: #7ddc9f; }
.statusleiste.ist-offen .kopf-status-punkt {
  background: #4ade80;
  box-shadow: 0 0 9px #4ade80;
}
.statusleiste.ist-zu .kopf-status-punkt { background: #7a7d86; }

.statusleiste-tel { margin: 0; }
.statusleiste-tel a { color: var(--gedaempft); text-decoration: none; font-weight: 600; }
.statusleiste-tel a:hover { color: var(--text); text-decoration: underline; }

/* Social-Links */
.social { display: flex; gap: .6rem; list-style: none; margin: 1rem 0 0; padding: 0; }
.social li { margin: 0; }
.social a {
  display: inline-grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 1.5px solid var(--rand);
  border-radius: 3px;
  color: var(--gedaempft);
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .2s ease;
}
.social svg { width: 1.15rem; height: 1.15rem; }
.social a:hover, .social a:focus-visible { color: #fff; border-color: var(--akzent); background: rgba(224, 27, 36, .14); transform: translateY(-2px); }
.social-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.social-klein { margin: 0; gap: .35rem; }
.social-klein a { width: 1.7rem; height: 1.7rem; border-color: transparent; }
.social-klein svg { width: .95rem; height: .95rem; }
.statusleiste-rechts { display: flex; align-items: center; gap: .9rem; }

@media (max-width: 520px) {
  .statusleiste-tel { display: none; }
  .kopf-status-zusatz { display: none; }
}

/* Schließen-Knopf im ausgefahrenen Menü */
.kopf-zu {
  display: inline-flex;
  align-self: center;
  margin-top: 1.5rem;
  background: none;
  border: 1.5px solid var(--rand);
  border-radius: 3px;
  color: var(--text);
  font: inherit;
  font-size: .9rem;
  font-weight: 600;
  padding: .5rem 1rem;
  cursor: pointer;
}
.kopf-zu:hover { border-color: var(--akzent); }


/* Feste Aktionsleiste auf dem Handy: anrufen oder reservieren */
.aktionsleiste { display: none; }


@media (max-width: 720px) {
  .aktionsleiste {
    position: fixed;
    inset: auto 0 0;
    z-index: 95;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: var(--rand);
    border-top: 1px solid var(--rand);
    box-shadow: 0 -8px 24px rgba(0, 0, 0, .45);
  }
  .aktionsleiste a {
    background: var(--grund-2);
    color: var(--text);
    text-decoration: none;
    font-weight: 700;
    font-size: .98rem;
    text-align: center;
    padding: .95rem .5rem;
    padding-bottom: calc(.95rem + env(safe-area-inset-bottom, 0px));
  }
  .aktionsleiste a.ist-haupt { background: var(--akzent-dunkel); color: #fff; animation: puls-flach 2.2s ease-in-out infinite; }
  @keyframes puls-flach { 50% { background: var(--akzent); } }
  .aktionsleiste a:active { filter: brightness(1.2); }

  /* Platz schaffen, damit die Leiste nichts verdeckt */
  .fuss { padding-bottom: 5.5rem; }
  body.menue-offen .aktionsleiste { display: none; }
}

/* Kleine Helfer statt Inline-Styles */
.block-luftig { padding-block: clamp(4rem, 12vw, 8rem); }
.abstand-oben { margin-top: 2.5rem; }
.abstand-oben-gross { margin-top: 3rem; }
.karten-einspaltig { grid-template-columns: 1fr; }
.adresse-gross { font-size: 1.05rem; }
.karte-link { text-decoration: none; color: inherit; display: block; }
.karte-link:hover { color: inherit; }
.huelle.schmal.ohne-luft { padding: 0; }
.knopf-zusatz { font-weight: 400; opacity: .85; }

/* --- 11 Die Karte zum Blättern ------------------------------------------
   Jede Seite des PDF ist ein Bild. Mit JavaScript liegen die Blätter als
   Stapel übereinander und klappen um die linke Kante um, wie in einem Heft.
   Ohne JavaScript stehen alle Seiten untereinander.
   --------------------------------------------------------------------- */

.karte {
  width: min(100%, 640px);
  margin-inline: auto;
}

.karte-buehne {
  position: relative;
  aspect-ratio: 596 / 842;
  perspective: 2400px;
  border-radius: 6px;
}

.blatt {
  margin: 0 0 1rem;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
  background: #101014;
}
.blatt img { width: 100%; height: auto; display: block; }

.js .blatt {
  position: absolute;
  inset: 0;
  margin: 0;
  transform-origin: left center;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform .8s cubic-bezier(.42, .08, .22, 1);
  will-change: transform;
}
.js .blatt:not(.ist-nah) { display: none; }
.js .blatt.ist-hinten { transform: rotateY(-180deg); }
.js .blatt.ohne-uebergang { transition: none; }

/* Schatten an der Falz, solange sich ein Blatt dreht */
.js .blatt::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, .55), transparent 28%);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.js .blatt.dreht::after { opacity: 1; }

/* Steuerung */
.karte-steuer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
}
.karte-pfeil {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 2px solid #3a3a46;
  border-radius: 3px;
  background: var(--karte);
  color: var(--text);
  font: inherit;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.karte-pfeil:hover:not(:disabled) { border-color: var(--akzent); background: rgba(224, 27, 36, .12); transform: translateY(-1px); }
.karte-pfeil:disabled { opacity: .3; cursor: default; }
.karte-stand { color: var(--gedaempft); font-variant-numeric: tabular-nums; font-weight: 600; }
.karte-stand strong { color: var(--text); }
.js .karte-hinweis-nojs { display: none; }

/* Rubriken als Sprungziele */
.karte-rubriken {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.2rem;
  list-style: none;
  padding: 0;
}
.karte-rubriken li { margin: 0; }
.karte-rubriken button,
.karte-rubriken a {
  display: inline-block;
  padding: .45rem .85rem;
  border: 1px solid var(--rand);
  border-radius: 3px;
  background: transparent;
  color: var(--gedaempft);
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.karte-rubriken button:hover,
.karte-rubriken a:hover,
.karte-rubriken .ist-aktuell {
  color: #fff;
  border-color: var(--akzent);
  background: rgba(224, 27, 36, .14);
}

/* Hinweis auf dem Handy: wischen */
.karte-wisch { display: none; color: var(--gedaempft); font-size: .85rem; text-align: center; margin-top: .6rem; }
@media (max-width: 720px) and (hover: none) { .js .karte-wisch { display: block; } }

@media (prefers-reduced-motion: reduce) {
  .js .blatt { transition: none; }
}