/*!
 * MjM Polo Arena · Version 1.28.8
 * MjM AG · More Joyful Matches
 * Copyright (c) 2026 MjM AG. Alle Rechte vorbehalten.
 * Weitergabe, Vervielfältigung oder Nachbau nur mit schriftlicher Zustimmung.
 */
/* =========================================================================
   Die Gastseite als Onepage.
   Erst der Anlass, dann die Buchung. Das Buchungsfeld selbst bleibt
   unangetastet – es ist geprüft und läuft. Diese Datei baut nur den
   Weg dorthin: Bühne, drei Tage, Ihr Tisch, der Platz, der Ablauf.

   Grundsätze, aus Fassung 1.23/1.24 gelernt:
     · Farben stehen immer mit Element + Klasse, damit keine
       Element-Regel sie schlägt (Gold auf Gold gibt es hier nicht).
     · Der Grundreiniger steht in :where() und wiegt null.
     · Inhalt ist sichtbar, bis JavaScript etwas anderes einschaltet;
       ein Sicherheitsnetz macht nach 1,2 Sekunden alles sichtbar.
     · Helle und dunkle Ansicht folgen demselben Schalter wie das
       Buchungsfeld: html[data-lay].
   ========================================================================= */

:root {
  --fn-ink:    #0C110F;
  --fn-ink-2:  #141C18;
  --fn-ink-3:  #1E2924;
  --fn-gold:   #C8A44D;
  --fn-gold-h: #E6CA85;
  --fn-gold-d: #8C7233;
  --fn-on-gold:#0C110F;
  --fn-creme:  #F4F1E8;
  --fn-grau:   #A9B4AD;
  --fn-grau-2: #8A958E;
  --fn-linie:  rgba(200, 164, 77, .24);
  --fn-linie-2:rgba(244, 241, 232, .09);
  --fn-kopf:   62px;
  --fn-rand:   clamp(16px, 4vw, 30px);
  --fn-breit:  1120px;
}

/* Die helle Ansicht. Denselben Schalter benutzt das Buchungsfeld. */
html[data-lay="light"] {
  --fn-ink:    #F7F5EF;
  --fn-ink-2:  #FFFFFF;
  --fn-ink-3:  #EFEBE0;
  --fn-gold:   #7A5E14;
  --fn-gold-h: #9C7B24;
  --fn-gold-d: #5E480E;
  --fn-on-gold:#FFFFFF;
  --fn-creme:  #15201B;
  --fn-grau:   #4C5851;
  --fn-grau-2: #5F6B63;
  --fn-linie:  rgba(122, 94, 20, .30);
  --fn-linie-2:rgba(21, 32, 27, .12);
}

html { background: var(--fn-ink); }

.fn :where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure) { margin: 0; padding: 0; }
.fn :where(ul, ol) { list-style: none; }
.fn [hidden] { display: none !important; }
.fn *, .fn *::before, .fn *::after { box-sizing: border-box; }

.fn {
  background: var(--fn-ink); color: var(--fn-creme);
  font: 17px/1.65 "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.fn a { color: var(--fn-gold); text-underline-offset: 3px; }
.fn :focus-visible { outline: 3px solid var(--fn-gold); outline-offset: 3px; border-radius: 2px; }

.fn-in { width: 100%; max-width: var(--fn-breit); margin: 0 auto; padding: 0 var(--fn-rand); }
.fn-in--eng { max-width: 800px; }

/* ============================================================== Knöpfe */
/* Element + Klasse. Nie wieder Gold auf Gold. */
.fn a.fn-knopf, .fn button.fn-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 26px;
  background: linear-gradient(165deg, var(--fn-gold-h), var(--fn-gold) 52%, var(--fn-gold-d));
  color: var(--fn-on-gold); font-weight: 700;
  border: 1px solid var(--fn-gold); border-radius: 3px;
  font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; text-align: center;
  box-shadow: 0 10px 30px rgba(200, 164, 77, .18);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.fn a.fn-knopf:hover, .fn button.fn-knopf:hover {
  transform: translateY(-2px); filter: brightness(1.06);
  box-shadow: 0 16px 38px rgba(200, 164, 77, .28);
}
.fn a.fn-knopf--geist, .fn button.fn-knopf--geist {
  background: transparent; color: var(--fn-gold); font-weight: 600;
  border-color: var(--fn-linie); box-shadow: none;
}
.fn a.fn-knopf--geist:hover, .fn button.fn-knopf--geist:hover {
  background: rgba(200, 164, 77, .09); border-color: var(--fn-gold); filter: none;
}
.fn a.fn-knopf--klein, .fn button.fn-knopf--klein {
  min-height: 42px; padding: 10px 17px; font-size: 11px; letter-spacing: .12em;
  white-space: nowrap;
}
.fn-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
@media (max-width: 560px) { .fn-knoepfe > .fn-knopf { width: 100%; } }

/* ============================================================ Kopfzeile */
.fn-kopf {
  position: sticky; top: 0; z-index: 60; height: var(--fn-kopf);
  display: flex; align-items: center;
  /* Bewusst ohne color-mix: der Wert soll auf jedem Gerät und in jeder
     Prüfung eindeutig messbar sein. */
  background: rgba(12, 17, 15, .86);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease;
}
html[data-lay="light"] .fn-kopf { background: rgba(247, 245, 239, .90); }
.fn-kopf.is-fest { border-bottom-color: var(--fn-linie); }
.fn-kopf .fn-in { display: flex; align-items: center; gap: 16px; }

.fn-marke {
  display: inline-flex; align-items: baseline; gap: 9px; min-height: 44px;
  align-items: center; padding: 4px 2px;
  text-decoration: none; color: var(--fn-creme); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.fn-marke b { font-size: 15.5px; font-weight: 600; letter-spacing: .02em; }
.fn-marke span {
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--fn-gold);
}
.fn-kopf-cta { margin-left: auto; }
@media (max-width: 560px) { .fn-marke span { display: none; } }

/* Leseband */
.fn-band { position: fixed; left: 0; top: 0; z-index: 70; height: 2px; width: 100%; pointer-events: none; }
.fn-band span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--fn-gold-d), var(--fn-gold) 60%, var(--fn-gold-h));
  box-shadow: 0 0 12px rgba(200, 164, 77, .5);
  transition: width .12s linear;
}

/* ================================================================ Bühne */
.fn-buehne {
  position: relative; overflow: hidden;
  padding: clamp(52px, 9vw, 108px) 0 clamp(44px, 7vw, 84px);
  border-bottom: 1px solid var(--fn-linie-2);
  background:
    radial-gradient(ellipse 82% 58% at 50% -14%, rgba(200, 164, 77, .17), transparent 68%),
    var(--fn-ink);
}
html[data-lay="light"] .fn-buehne {
  background:
    radial-gradient(ellipse 82% 58% at 50% -14%, rgba(122, 94, 20, .12), transparent 68%),
    var(--fn-ink);
}

.fn-ober {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--fn-gold);
}
.fn-ober::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: .8; }

.fn h1 {
  margin-top: 22px; max-width: 18ch;
  font-weight: 400; font-size: clamp(33px, 5.6vw, 62px);
  line-height: 1.03; letter-spacing: -.015em;
}
.fn h1 em { font-style: normal; color: var(--fn-gold); }

.fn-vorspann {
  margin-top: 24px; max-width: 52ch;
  font-size: clamp(17px, 1.6vw, 21px); color: var(--fn-grau);
}

/* ============================================================ Countdown */
.fn-countdown { margin-top: 34px; }
.fn-countdown-titel {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--fn-gold);
}
.fn-uhr {
  display: grid; gap: 10px; margin-top: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 460px;
}
.fn-uhr li {
  padding: 14px 8px 12px; text-align: center;
  background: var(--fn-ink-3); border: 1px solid var(--fn-linie-2); border-radius: 4px;
}
.fn-uhr b {
  display: block; font-size: clamp(24px, 3.4vw, 34px); font-weight: 300;
  line-height: 1; color: var(--fn-gold); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.fn-uhr span {
  display: block; margin-top: 7px;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--fn-grau-2);
}
.fn-countdown.is-jetzt .fn-uhr { display: none; }

.fn-belege {
  display: flex; flex-wrap: wrap; gap: 12px 28px;
  margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--fn-linie-2);
}
.fn-belege li {
  display: inline-flex; align-items: baseline; gap: 9px;
  font-size: 14px; color: var(--fn-grau);
}
.fn-belege b { font-size: 19px; font-weight: 500; color: var(--fn-gold); }

/* =============================================================== Stufen */
.fn-stufe { padding: clamp(48px, 7vw, 92px) 0; border-bottom: 1px solid var(--fn-linie-2); }
.fn-stufe--alt { background: var(--fn-ink-2); }

.fn-nummer {
  display: flex; align-items: center; gap: 14px;
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--fn-gold);
}
.fn-nummer b {
  font-size: 12px; font-weight: 700; letter-spacing: .1em;
  color: var(--fn-on-gold); background: var(--fn-gold);
  padding: 3px 8px; border-radius: 2px;
}
.fn-nummer span { color: var(--fn-grau-2); }

.fn h2 {
  margin-top: 16px; max-width: 24ch;
  font-weight: 400; font-size: clamp(26px, 3.6vw, 40px);
  line-height: 1.1; letter-spacing: -.01em;
}
.fn h3 { font-weight: 600; font-size: 18px; line-height: 1.3; }
.fn-lead { margin-top: 22px; max-width: 60ch; font-size: clamp(16.5px, 1.5vw, 19px); color: var(--fn-grau); }

/* ================================================================ Tage */
.fn-tage { display: grid; gap: 18px; margin-top: 38px; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); }
.fn-tage article {
  position: relative; padding: 28px 26px 30px;
  background: var(--fn-ink-3); border: 1px solid var(--fn-linie-2); border-radius: 4px;
  transition: border-color .22s ease, transform .22s ease;
}
.fn-stufe--alt .fn-tage article { background: var(--fn-ink); }
.fn-tage article:hover { border-color: var(--fn-linie); transform: translateY(-3px); }
.fn-tag-nr {
  display: block; font-size: clamp(38px, 5vw, 52px); font-weight: 200;
  line-height: 1; color: var(--fn-gold); letter-spacing: -.03em;
}
.fn-tag-wo { display: block; margin-top: 8px; font-size: 11.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--fn-grau-2); }
.fn-tage h3 { margin-top: 18px; }
.fn-tage p { margin-top: 10px; color: var(--fn-grau); font-size: 15.5px; }
.fn-motto {
  display: inline-block; margin-top: 16px; padding: 4px 11px;
  border: 1px solid var(--fn-linie); border-radius: 2px;
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--fn-gold);
}

/* =============================================================== Tisch */
.fn-karten { display: grid; gap: 18px; margin-top: 38px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.fn-karten article {
  padding: 26px 24px 28px;
  background: var(--fn-ink-3); border: 1px solid var(--fn-linie-2); border-radius: 4px;
}
.fn-stufe--alt .fn-karten article { background: var(--fn-ink); }
.fn-karten h3 { margin-top: 16px; }
.fn-karten p { margin-top: 10px; color: var(--fn-grau); font-size: 15.5px; }
.fn-ikone {
  display: inline-grid; place-items: center; width: 46px; height: 46px;
  border-radius: 3px; color: var(--fn-gold);
  background: rgba(200, 164, 77, .12);
  border: 1px solid var(--fn-linie);
}
html[data-lay="light"] .fn-ikone { background: rgba(122, 94, 20, .10); }

/* =============================================================== Preise */
.fn-preise { display: grid; gap: 18px; margin-top: 38px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.fn-preise > div {
  padding: 30px 28px; border-radius: 4px;
  background: var(--fn-ink-3); border: 1px solid var(--fn-linie-2);
}
.fn-stufe--alt .fn-preise > div { background: var(--fn-ink); }
.fn-preise--haupt { border-color: var(--fn-gold) !important; }
.fn-preis-zahl {
  margin-top: 14px; font-size: clamp(32px, 4.4vw, 44px); font-weight: 300;
  line-height: 1; color: var(--fn-gold); letter-spacing: -.02em;
}
.fn-preis-zahl small { font-size: 15px; font-weight: 400; letter-spacing: .06em; margin-right: 8px; color: var(--fn-grau-2); }
.fn-preis-fein { margin-top: 12px; color: var(--fn-grau-2); font-size: 13.5px; }
.fn-preise p { margin-top: 14px; color: var(--fn-grau); font-size: 15.5px; }

/* =============================================================== Ablauf */
.fn-schritte { margin-top: 36px; display: grid; gap: 0; }
.fn-schritte li {
  display: grid; gap: 4px 22px; grid-template-columns: 46px 1fr; align-items: start;
  padding: 20px 0; border-top: 1px solid var(--fn-linie-2);
}
.fn-schritte li:last-child { border-bottom: 1px solid var(--fn-linie-2); }
.fn-schritte > li > .fn-schritt-nr {
  grid-column: 1; grid-row: 1 / span 2;
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--fn-linie); color: var(--fn-gold);
  font-size: 12.5px; font-weight: 600;
}
.fn-schritte > li > b { grid-column: 2; grid-row: 1; font-size: 17px; font-weight: 600; }
.fn-schritte > li > span:not(.fn-schritt-nr) {
  grid-column: 2; grid-row: 2; color: var(--fn-grau); font-size: 15.5px;
}
.fn-hinweis {
  margin-top: 28px; padding: 20px 24px; border-left: 2px solid var(--fn-gold);
  background: rgba(200, 164, 77, .07);
  font-size: clamp(16px, 1.7vw, 19px); color: var(--fn-creme); max-width: 52ch;
}
html[data-lay="light"] .fn-hinweis { background: rgba(122, 94, 20, .07); }

/* ============================================================== Buchung */
/* Die Überleitung zum eigentlichen Buchungsfeld. */
.fn-buchen { padding: clamp(44px, 6vw, 76px) 0 0; }
.fn-buchen .fn-nummer { margin-bottom: 0; }
.fn-buchen h2 { margin-bottom: 6px; }

/* ================================================================ Hilfe */
.fn-hilfe { display: grid; gap: 18px; margin-top: 34px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.fn-hilfe a {
  display: grid; gap: 8px; padding: 24px 22px; text-decoration: none;
  background: var(--fn-ink-3); border: 1px solid var(--fn-linie-2); border-radius: 4px;
  transition: border-color .2s ease;
}
.fn-stufe--alt .fn-hilfe a { background: var(--fn-ink); }
.fn-hilfe a:hover { border-color: var(--fn-gold); }
.fn-hilfe b { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--fn-gold); }
.fn-hilfe span { font-size: 17px; color: var(--fn-creme); }

/* ======================================================== Klebe-Knopf */
.fn-klebe {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  padding: 11px var(--fn-rand) calc(11px + env(safe-area-inset-bottom, 0px));
  background: var(--fn-ink); border-top: 1px solid var(--fn-linie);
  transform: translateY(120%); transition: transform .28s ease;
}
.fn-klebe.is-da { transform: translateY(0); }
.fn-klebe .fn-knopf { width: 100%; }
@media (min-width: 760px) { .fn-klebe { display: none; } }

/* ============================================================ Einblenden */
.fn-js .fn-auf > * {
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s ease, transform .5s ease;
}
.fn-js .fn-auf > .is-da { opacity: 1; transform: none; }
.fn-alles-zeigen .fn-auf > *, .fn-alles-zeigen .fn-auf > .is-da {
  opacity: 1 !important; transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .fn *, .fn *::before, .fn *::after {
    animation-duration: .001ms !important; transition-duration: .001ms !important;
  }
  .fn-js .fn-auf > * { opacity: 1 !important; transform: none !important; }
}
@media print {
  .fn-kopf, .fn-klebe, .fn-band { display: none !important; }
  .fn-auf > * { opacity: 1 !important; transform: none !important; }
}

/* Der Begleiter-Knopf sitzt rechts unten – auf dem Telefon steht dort
   auch der Klebe-Knopf. Also rückt der Begleiter darüber, sobald der
   Klebe-Knopf sichtbar ist. */
@media (max-width: 759px) {
  .fn-klebe.is-da ~ .pca-avatar,
  body:has(.fn-klebe.is-da) .pca-avatar { bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
  body:has(.fn-klebe.is-da) .pca-hand { bottom: calc(156px + env(safe-area-inset-bottom, 0px)); }
}

/* =========================================================================
   DIE BÜHNENBILDER · Fassung 1.28.4
   Jeder Bereich bekommt seinen eigenen Hintergrund – ruhig, langsam,
   thematisch. Nichts blinkt, nichts springt. Alles liegt hinter dem
   Inhalt, nimmt keine Klicks an und steht still, sobald jemand in der
   Hand «Bewegung» ausschaltet oder sein Gerät weniger Bewegung wünscht.
   ========================================================================= */

.fn-buehnenbild {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; overflow: hidden;
}
.fn-stufe, .fn-buehne { position: relative; isolation: isolate; }
.fn-stufe > .fn-in, .fn-buehne > .fn-in { position: relative; z-index: 1; }
.fn-buehnenbild svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* --------------------------------------------------------- Der Rasen */
/* Drei Linien, die langsam nach rechts wandern: das Feld von oben. */
.fn-rasen path { fill: none; stroke: var(--fn-gold); stroke-width: 1; opacity: .10; }
.fn-rasen .r1 { animation: fn-ziehen 34s linear infinite; }
.fn-rasen .r2 { animation: fn-ziehen 46s linear infinite reverse; }
.fn-rasen .r3 { animation: fn-ziehen 58s linear infinite; }
@keyframes fn-ziehen {
  from { transform: translateX(-4%); }
  to   { transform: translateX(4%); }
}

/* ------------------------------------------------------- Der Sonnenbogen */
/* Stufe 01: ein Licht wandert über den Tag – drei Tage, drei Stimmungen. */
.fn-sonne .bahn { fill: none; stroke: var(--fn-gold); stroke-width: 1; opacity: .14; }
.fn-sonne .licht {
  fill: var(--fn-gold-h); opacity: .55;
  offset-path: path('M -40 260 C 260 40, 940 40, 1240 260');
  animation: fn-lauf 26s ease-in-out infinite;
}
@supports not (offset-path: path('M 0 0 L 1 1')) { .fn-sonne .licht { display: none; } }
@keyframes fn-lauf {
  0%   { offset-distance: 0%;   opacity: 0; }
  12%  { opacity: .6; }
  88%  { opacity: .6; }
  100% { offset-distance: 100%; opacity: 0; }
}
.fn-sonne .marke { fill: var(--fn-gold); opacity: .3; }

/* ------------------------------------------------------ Das Kerzenlicht */
/* Stufe 02: warme Ringe, wie Licht auf einer Tischdecke. */
.fn-kerze span {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, rgba(200,164,77,.16), transparent 68%);
  animation: fn-atmen 11s ease-in-out infinite;
}
.fn-kerze span:nth-child(1) { width: 46vw; height: 46vw; left: -8vw;  top: -14vw; }
.fn-kerze span:nth-child(2) { width: 34vw; height: 34vw; right: -6vw; bottom: -12vw; animation-delay: -4s; }
.fn-kerze span:nth-child(3) { width: 22vw; height: 22vw; left: 46%;   top: 32%;  animation-delay: -8s; }
@keyframes fn-atmen {
  0%, 100% { transform: scale(1);    opacity: .55; }
  50%      { transform: scale(1.14); opacity: 1; }
}

/* ----------------------------------------------------------- Die Reihen */
/* Stufe 03: drei Reihen am Feldrand, die vordere hebt sich. */
.fn-reihen rect { fill: var(--fn-gold); opacity: .07; }
.fn-reihen .vorn { opacity: .13; animation: fn-pochen 7s ease-in-out infinite; }
@keyframes fn-pochen { 0%,100% { opacity: .09; } 50% { opacity: .18; } }

/* ------------------------------------------------------------ Der Weg */
/* Stufe 04: eine Linie, die sich beim Lesen selbst zeichnet. */
.fn-weg path {
  fill: none; stroke: var(--fn-gold); stroke-width: 1.5; opacity: .13;
  stroke-dasharray: 1800; stroke-dashoffset: 1800;
  transition: stroke-dashoffset 1.2s ease;
}
.fn-weg.is-da path { stroke-dashoffset: 0; }

/* --------------------------------------------------------- Der Hufschlag */
/* Bühne: der Ball zieht seinen Bogen, so wie im Buchungsfeld. */
.fn-bogen path { fill: none; stroke: var(--fn-gold); stroke-width: 1; opacity: .16; }
.fn-ball {
  fill: var(--fn-gold-h); opacity: .8;
  offset-path: path('M -40 240 C 260 40, 900 40, 1240 236');
  animation: fn-flug 19s ease-in-out infinite;
}
@supports not (offset-path: path('M 0 0 L 1 1')) { .fn-ball { display: none; } }
@keyframes fn-flug {
  0%   { offset-distance: 0%;   opacity: 0; }
  10%  { opacity: .85; }
  90%  { opacity: .85; }
  100% { offset-distance: 100%; opacity: 0; }
}

/* ====================================================== Lebendige Karten */
.fn-tage article, .fn-karten article, .fn-preise > div {
  transition: transform .3s cubic-bezier(.2,.7,.3,1), border-color .3s ease, box-shadow .3s ease;
}
.fn-tage article:hover, .fn-karten article:hover {
  transform: translateY(-6px);
  border-color: var(--fn-linie);
  box-shadow: 0 22px 46px rgba(0,0,0,.32);
}
html[data-lay="light"] .fn-tage article:hover,
html[data-lay="light"] .fn-karten article:hover { box-shadow: 0 22px 46px rgba(30,36,31,.14); }

/* Die Tagesnummer wächst mit, wenn man die Karte ansieht. */
.fn-tage article .fn-tag-nr { transition: transform .3s cubic-bezier(.2,.7,.3,1), color .3s ease; transform-origin: left center; }
.fn-tage article:hover .fn-tag-nr { transform: scale(1.12); }

/* Ein Lichtstreif wandert einmal über die Karte. */
.fn-tage article, .fn-karten article { position: relative; overflow: hidden; }
.fn-tage article::after, .fn-karten article::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 40%, rgba(200,164,77,.14) 50%, transparent 60%);
  transform: translateX(-120%); transition: transform .8s ease;
}
.fn-tage article:hover::after, .fn-karten article:hover::after { transform: translateX(120%); }

/* Die Zahlen im Vertrauensband zählen sich hoch. */
.fn-belege b { font-variant-numeric: tabular-nums; }

/* ======================================================= Punktnavigation */
.fn-punkte {
  position: fixed; z-index: 38; right: 10px; top: 50%;
  transform: translateY(-50%);
  display: none; grid-auto-flow: row; gap: 4px;
}
@media (min-width: 1000px) and (min-height: 620px) { .fn-punkte { display: grid; } }
.fn-punkte a {
  position: relative; display: grid; place-items: center;
  width: 30px; height: 30px; text-decoration: none;
}
.fn-punkte i {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(200,164,77,.35);
  transition: transform .15s ease, background .15s ease;
}
html[data-lay="light"] .fn-punkte i { background: rgba(122,94,20,.35); }
.fn-punkte a:hover i, .fn-punkte a.is-da i { background: var(--fn-gold); transform: scale(1.55); }
.fn-punkte a.is-da i { box-shadow: 0 0 10px rgba(200,164,77,.55); }
.fn-punkte b {
  position: absolute; right: 30px; top: 50%; transform: translateY(-50%);
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  font-size: 12px; font-weight: 500; padding: 6px 11px;
  color: var(--fn-creme); background: var(--fn-ink-3);
  border: 1px solid var(--fn-linie); border-radius: 3px;
  opacity: 0; pointer-events: none; transition: opacity .15s ease;
}
.fn-punkte b span { color: var(--fn-gold); font-size: 10.5px; letter-spacing: .1em; }
.fn-punkte a:hover b, .fn-punkte a:focus-visible b { opacity: 1; }

/* ============================================ Wer keine Bewegung will */
html[data-motion="aus"] .fn-buehnenbild * { animation: none !important; }
html[data-motion="aus"] .fn-weg path { transition: none !important; stroke-dashoffset: 0 !important; }
html[data-motion="aus"] .fn-tage article::after,
html[data-motion="aus"] .fn-karten article::after { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .fn-buehnenbild * { animation: none !important; }
  .fn-weg path { transition: none !important; stroke-dashoffset: 0 !important; }
  .fn-tage article::after, .fn-karten article::after { display: none !important; }
}
@media print { .fn-buehnenbild, .fn-punkte { display: none !important; } }