/* ADVANGERS, section styles */

/* HERO */
.hero {
  position: relative;
  min-height: 100vh;
  padding: 180px 0 60px;
  overflow: hidden;
  background: var(--bg);
  display: flex; align-items: center;
}
.hero-glow { position: absolute; inset: 0; pointer-events: none; transition: background .2s; }
.hero-content { position: relative; z-index: 2; width: 100%; }
.hero-meta {
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap;
  margin-bottom: 32px;
}
.live-status {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px; border: 1px solid var(--line-2);
  border-radius: 999px; background: rgba(255,255,255,0.06);
  color: var(--ink);
  backdrop-filter: blur(6px);
}
.live-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.live-dot.on {
  background: var(--accent-5);
  box-shadow: 0 0 12px var(--accent-5), 0 0 24px color-mix(in srgb, var(--accent-5) 50%, transparent);
  animation: pulse 1.6s ease-in-out infinite;
}
.live-dot.off {
  background: var(--accent-6);
  box-shadow: 0 0 10px var(--accent-6), 0 0 20px color-mix(in srgb, var(--accent-6) 40%, transparent);
}

.hero-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(72px, 13vw, 220px);
  line-height: 0.85;
  letter-spacing: -0.045em;
  margin: 0;
  display: flex; flex-direction: column;
  transition: transform .2s ease;
}
.hero-title .line { display: block; }
.hero-title .line.accent { color: var(--accent); }
.hero-title .line.glitch { color: var(--ink); }

.hero-sub {
  margin-top: 32px; max-width: 560px;
  font-size: 18px; line-height: 1.55; color: var(--ink-2);
}
.hero-cta { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.hero-stats {
  margin-top: 80px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  border-top: 1px solid var(--line); padding-top: 32px;
}
.stat-num { font-family: var(--display); font-weight: 700; font-size: clamp(32px, 4vw, 56px); letter-spacing: -0.03em; }
.stat-label { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-top: 4px; }

.hero-corner { position: absolute; z-index: 3; }
.hero-corner.top-left { top: 90px; left: 32px; }
.hero-corner.top-right { top: 90px; right: 32px; }
.hero-corner.bottom-right { bottom: 32px; right: 32px; }
.scroll-cue {
  display: inline-flex; flex-direction: column; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--ink-3);
}
.scroll-line { width: 1px; height: 40px; background: linear-gradient(to bottom, var(--ink-3), transparent); animation: scroll-tick 2s ease-in-out infinite; }
@keyframes scroll-tick { 50% { transform: scaleY(1.4); transform-origin: top; opacity: 0.4; } }

/* SECTIONS */
.section-head { max-width: 720px; margin-bottom: 60px; }
.section-head .h-section { margin: 16px 0 20px; }
.section-sub { color: var(--ink-2); font-size: 17px; line-height: 1.55; max-width: 600px; }

/* AREAS */
.areas-section { padding: 140px 0 80px; position: relative; }
/* .areas-grid entfaellt: der Abschnitt laeuft jetzt als Slider, siehe .areas-track ganz unten. */

.area-card { position: relative; transition: transform .3s; }

/* PIXEL variant, poster cards w/ logo badge */
.area-card.pixel {
  background: linear-gradient(165deg, var(--bg-1), #000);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
}
.area-card.pixel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 60% at 0% 0%, var(--c), transparent 55%);
  opacity: 0.08;
  transition: opacity .4s;
  z-index: 0;
}
.area-card.pixel::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse 80% 60% at 100% 100%, #000, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 100% 100%, #000, transparent 70%);
  opacity: 0.4;
  z-index: 0;
}
.area-card.pixel:hover,
.area-card.pixel.is-active {
  border-color: var(--c);
  transform: translateY(-4px);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,0.7), 0 0 60px -20px var(--c);
}
.area-card.pixel:hover::before,
.area-card.pixel.is-active::before { opacity: 0.18; }

.area-num {
  position: absolute; top: 24px; right: 28px; z-index: 3;
  font-family: var(--display); font-weight: 800;
  font-size: 13px; letter-spacing: 0.06em;
  color: var(--ink-2);
  display: inline-flex; align-items: center; gap: 10px;
}
.area-num::before {
  content: "";
  width: 28px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--c));
}

.area-img-wrap {
  position: relative;
  aspect-ratio: 16/10;
  border-radius: 18px;
  overflow: hidden;
  margin: 14px 14px 0;
  margin-bottom: 0;
  z-index: 1;
}
.area-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2,.6,.2,1), filter .5s;
  filter: saturate(0.85) contrast(1.05);
}
.area-card.pixel:hover .area-img-wrap img,
.area-card.pixel.is-active .area-img-wrap img {
  transform: scale(1.06);
  filter: saturate(1.1) contrast(1.1);
}
.area-img-wrap::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.9) 100%),
    linear-gradient(180deg, var(--c), transparent 35%);
  mix-blend-mode: multiply;
  opacity: 0.55;
}

/* logo badge bottom-right of image */
.area-card.pixel .area-img-wrap::before {
  content: "";
  position: absolute;
  bottom: 16px; right: 16px;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: url("assets/logo_2026.webp") center/contain no-repeat transparent;
  box-shadow:
    0 0 0 1px var(--c),
    0 0 20px -2px var(--c),
    0 4px 14px rgba(0,0,0,0.7);
  z-index: 3;
  transition: transform .4s, box-shadow .4s;
}
.area-card.pixel:hover .area-img-wrap::before,
.area-card.pixel.is-active .area-img-wrap::before {
  transform: scale(1.08) rotate(-6deg);
  box-shadow:
    0 0 0 1px var(--c),
    0 0 28px -1px var(--c),
    0 0 50px -8px var(--c);
}

.area-card .area-pixel-overlay { display: none; }

.area-tag {
  position: absolute; top: 18px; left: 18px;
  z-index: 3;
  font-family: var(--mono); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c);
  padding: 8px 12px;
  /* Deckender Grund statt backdrop-filter: Beim Hover skaliert das Bild dahinter,
     und der Weichzeichner-Bereich zeichnete sich dabei als Rechteck ab — die Pille
     sah oben und unten abgeschnitten aus. */
  background: rgba(6,8,24,0.82);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  display: inline-flex; align-items: center; gap: 8px;
}
.area-tag::before {
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 8px var(--c);
}

.area-body {
  padding: 28px 32px 32px;
  position: relative; z-index: 2;
}
/* Auf dem Handy fressen 32px links/rechts ein Fuenftel der Kartenbreite - genau
   der Platz, der der dreispaltigen Stat-Reihe fehlt. */
@media (max-width: 560px) {
  .area-body { padding: 22px 20px 24px; }
  .area-stat { padding: 0 5px; }
  /* "SCHWARZLICHT" / "GEBURTSTAGE" stiessen sonst an die Spaltentrenner */
  .area-stat .l { font-size: 9px; letter-spacing: .06em; }
}
.area-meta {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11px;
  color: var(--ink-3); letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.area-meta > span:first-child { color: var(--c); font-size: 14px; }
.area-name {
  font-family: var(--display);
  font-size: clamp(28px, 2.6vw, 40px);
  font-weight: 800; letter-spacing: -0.025em;
  margin: 0 0 14px; line-height: 1;
  text-transform: uppercase;
}
.area-desc {
  color: var(--ink-2); line-height: 1.55;
  margin: 0 0 24px; font-size: 14px;
}
.area-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0; padding: 18px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 24px;
  position: relative;
}
.area-stats::before, .area-stats::after {
  content: ""; position: absolute; top: 18px; bottom: 18px;
  width: 1px; background: var(--line);
}
.area-stats::before { left: 33.33%; }
.area-stats::after { left: 66.66%; }
.area-stat { text-align: center; min-width: 0; padding: 0 8px; }
.area-stat .n {
  font-family: var(--display);
  font-size: clamp(16px, 4.4vw, 26px); font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.05;
  margin-bottom: 6px;
  overflow-wrap: anywhere;
}
/* Lange Wort-Werte statt Zahlen: eine Stufe kleiner, sonst laufen sie ueber die
   Spaltentrenner in die Nachbarspalte. */
.area-stat .n.long {
  font-size: clamp(11.5px, 3.1vw, 17px);
  letter-spacing: 0;
}
.area-stat .l {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .12em; color: var(--ink-3);
  text-transform: uppercase;
  line-height: 1.3;
}
.area-cta {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display); font-weight: 700;
  font-size: 13px; letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 13px 22px;
  border: 1px solid var(--line-2);
  background: rgba(255,255,255,0.02);
  border-radius: 999px;
  color: var(--ink);
  cursor: pointer;
  width: auto;
  justify-content: center;
  transition: border-color .25s, color .25s, background .25s;
}
.area-cta span {
  display: inline-block;
  color: var(--c);
  transition: transform .25s, color .25s;
}
.area-cta:hover {
  border-color: var(--c);
  background: var(--c);
  color: var(--on-accent);
}
.area-cta:hover span { color: var(--on-accent); transform: translateX(4px); }

/* MINIMAL variant */
.area-card.minimal { background: transparent; padding: 0; }
.area-min-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.area-min-num { font-family: var(--mono); font-size: 14px; color: var(--c); font-weight: 600; }
.area-min-tag { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--ink-3); }
.area-min-name { font-size: clamp(48px, 5vw, 80px); font-weight: 700; letter-spacing: -0.035em; margin: 16px 0; line-height: 0.9; }
.area-min-img { aspect-ratio: 16/9; overflow: hidden; border-radius: 8px; }
.area-min-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s, filter .4s; filter: grayscale(60%) contrast(1.05); }
.area-card.minimal:hover .area-min-img img { transform: scale(1.04); filter: grayscale(0) contrast(1); }
.area-min-desc { color: var(--ink-2); line-height: 1.55; margin: 16px 0; font-size: 15px; }
.area-min-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; border-top: 1px solid var(--line); }

/* EDITORIAL variant */
.area-card.editorial {
  position: relative; aspect-ratio: 3/4; overflow: hidden; border-radius: var(--r-lg);
  cursor: pointer;
}
.ed-img { position: absolute; inset: 0; }
.ed-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s; }
.area-card.editorial:hover .ed-img img { transform: scale(1.06); }
.ed-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(8,8,10,0.95) 0%, rgba(8,8,10,0.4) 50%, transparent 100%);
}
.ed-num { position: absolute; top: 24px; left: 24px; font-family: var(--mono); font-size: 14px; color: var(--c); z-index: 2; }
.ed-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 24px; z-index: 2; }
.ed-tag { font-family: var(--mono); font-size: 10px; letter-spacing: .15em; margin-bottom: 8px; }
.ed-title { font-size: clamp(28px, 2.6vw, 40px); font-weight: 700; letter-spacing: -0.025em; margin: 0 0 12px; line-height: 0.9; }
.ed-foot { display: flex; flex-direction: column; gap: 14px; }
/* Der Beschreibungstext klappte per max-height auf und wurde dabei bei 100px
   abgeschnitten - laengere Texte endeten mitten im Satz. Und auf Touch-Geraeten
   gibt es kein :hover, dort war er nie zu sehen. Jetzt blendet er nur noch ein,
   ohne Hoehendeckel, und ist auf Touch von vornherein sichtbar. */
.ed-foot p { color: var(--ink-2); font-size: 13px; line-height: 1.5; margin: 0; opacity: 0; transition: opacity .3s; }
.area-card.editorial:hover .ed-foot p { opacity: 1; }
@media (hover: none) {
  .ed-foot p { opacity: 1; }
}

/* BOOKING MODAL */
.booking-modal { padding: 28px 32px 24px; position: relative; }
.bk-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.bk-title { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin-top: 8px; }
.bk-close { font-size: 28px; color: var(--ink-3); padding: 4px 12px; }
.bk-close:hover { color: var(--ink); }
.bk-progress { display: flex; gap: 6px; margin-bottom: 28px; }
.bk-pip { flex: 1; height: 3px; background: var(--bg-3); border-radius: 2px; transition: background .3s; }
.bk-pip.on { background: var(--accent); }
.bk-body { min-height: 320px; }

.bk-areas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.bk-area { padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); cursor: pointer; transition: all .2s; text-align: left; }
.bk-area:hover { border-color: var(--c); }
.bk-area.sel { border-color: var(--c); box-shadow: 0 0 0 1px var(--c); background: rgba(255,31,182,0.05); }
.bk-area img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 8px; margin-bottom: 12px; }
.bk-area-name { font-weight: 600; font-size: 18px; }
.bk-area-meta { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: .1em; }

.bk-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.bk-day { padding: 14px 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); cursor: pointer; transition: all .2s; text-align: center; position: relative; }
.bk-day:not(:disabled):hover { border-color: var(--accent); }
.bk-day.sel { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.bk-day.off { opacity: 0.35; cursor: not-allowed; }
.bk-dow { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; opacity: 0.7; }
.bk-dnum { font-size: 22px; font-weight: 700; margin: 4px 0; }
.bk-dmon { font-family: var(--mono); font-size: 10px; opacity: 0.5; }
.bk-doff { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 9px; color: var(--ink-4); pointer-events: none; }

.bk-times { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.bk-time { padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-2); cursor: pointer; font-family: var(--mono); font-weight: 600; transition: all .2s; }
.bk-time:hover { border-color: var(--accent); }
.bk-time.sel { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }

.bk-people { display: flex; flex-direction: column; gap: 8px; }
.bk-counter { display: flex; justify-content: space-between; align-items: center; padding: 18px; background: var(--bg-2); border-radius: 12px; border: 1px solid var(--line); }
.bk-cnt-controls { display: flex; align-items: center; gap: 14px; }
.bk-cnt-controls button { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line-2); font-size: 18px; transition: all .15s; }
.bk-cnt-controls button:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.bk-total { display: flex; justify-content: space-between; padding: 18px; margin-top: 8px; background: rgba(255,31,182,0.08); border: 1px solid rgba(255,31,182,0.3); border-radius: 12px; font-size: 22px; font-weight: 700; }

.bk-confirm { display: flex; flex-direction: column; gap: 16px; }
.bk-summary { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; padding: 8px 16px; }
.bk-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--line); }
.bk-row:last-child { border-bottom: 0; }
.bk-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bk-form label { display: block; font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: .1em; text-transform: uppercase; }
.bk-form input { margin-top: 6px; }

.bk-foot { display: flex; gap: 12px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); align-items: center; }
.bk-foot button:disabled { opacity: 0.4; cursor: not-allowed; }

.bk-done { position: absolute; inset: 0; background: var(--bg-1); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; border-radius: var(--r-lg); animation: fade .3s; padding: 40px; text-align: center; }
.bk-done-icon { width: 80px; height: 80px; border-radius: 50%; background: var(--accent-2); color: var(--on-accent); display: flex; align-items: center; justify-content: center; font-size: 40px; font-weight: 700; }
.bk-done h3 { font-size: 40px; font-weight: 700; letter-spacing: -0.02em; margin: 0; }
.bk-done p { color: var(--ink-2); margin: 0; }

/* Wischreihe: Reihe plus Hinweispfeil. Der Pfeil liegt ueber dem rechten Rand
   der Reihe, deshalb braucht der Rahmen einen Bezugspunkt. */
.wischreihe { position: relative; }
.wisch-hinweis {
  display: none;                 /* nur auf dem Handy, siehe Media Query */
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 3;
  align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(9,9,20,0.86);
  color: #fff;
  transition: opacity .2s;
}
.wisch-hinweis.l { left: 0; }
.wisch-hinweis.r { right: 0; }
.wisch-hinweis:active { transform: translateY(-50%) scale(0.92); }
.wisch-hinweis:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 2px; }
/* Am Ende der Reihe stehen bleiben, aber unsichtbar: ein wegspringender Knopf
   waere unruhiger als ein ausgeblendeter. */
.wisch-hinweis.aus { opacity: 0; pointer-events: none; }

/* PRICING */
.pricing { padding: 128px 0 104px; }
.price-toggle {
  display: flex; position: relative; padding: 4px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px;
  margin-bottom: 52px;
  max-width: 100%;
}
/* Alle Reiter gleich breit: Die Pille darunter rechnet mit (100% - 8px) / Anzahl.
   Bei unterschiedlich langen Beschriftungen ("Interactive Sector") sass sie
   deshalb nicht mehr unter ihrem Reiter und ragte rechts aus der Leiste. */
.pt-btn { position: relative; z-index: 2; flex: 1 1 0; min-width: 0; text-align: center; padding: 12px 18px; font-weight: 600; font-size: 14px; color: var(--ink-3); transition: color .2s; border-radius: 999px; white-space: nowrap; }
/* Schmale Screens: Fünf ausgeschriebene Bereichsnamen passen nicht nebeneinander
   (bei 390px blieben 63px pro Reiter, die Beschriftungen überlappten). Deshalb
   hier seitlich wischen statt quetschen — und der aktive Reiter färbt sich selbst
   ein, weil die Pille eine feste Reiterbreite voraussetzt. */
@media (max-width: 760px) {
  .price-toggle {
    width: 100%;
    /* Auf dem Handy folgt direkt darunter die Tarif-Auswahl, deshalb hier weniger
       Abstand — sonst klafft eine Lücke, und mit negativem Rand überlappten beide. */
    margin-bottom: 12px;
    overflow-x: auto;
    justify-content: flex-start;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .price-toggle::-webkit-scrollbar { display: none; }
  /* Sichtbar machen, dass die Reihe weitergeht: die Seite, auf der noch etwas
     liegt, blendet aus statt hart abzuschneiden. Die Klassen setzt useWischbar,
     deshalb verschwindet der Verlauf am Ende der Reihe wieder. */
  .price-toggle, .plan-toggle {
    --w-l: 0px; --w-r: 0px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--w-l), #000 calc(100% - var(--w-r)), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 var(--w-l), #000 calc(100% - var(--w-r)), transparent 100%);
  }
  .price-toggle.hat-l, .plan-toggle.hat-l { --w-l: 34px; }
  .price-toggle.hat-r, .plan-toggle.hat-r { --w-r: 34px; }
  .wisch-hinweis { display: inline-flex; }
  .pt-btn { flex: 0 0 auto; padding: 11px 14px; font-size: 13px; }
  .pt-pill { display: none; }
  .pt-btn.on {
    background: var(--accent-3);
    color: var(--on-accent);
    box-shadow: 0 4px 14px rgba(255,182,39,0.35);
  }
}
.pt-btn.on { color: var(--on-accent); }
/* Die Pille war auf drei Reiter festgenagelt (33,333 %). Die Preisreiter richten
   sich jetzt nach den Bereichen, deshalb kommt die Anzahl per --pt-n aus dem
   Markup; Standard bleibt 3, falls die Variable fehlt. */
.pt-pill { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--pt-n, 3)); background: var(--accent-3); border-radius: 999px; transition: transform .3s cubic-bezier(.2,.9,.3,1.2); z-index: 1; box-shadow: 0 4px 14px rgba(255,182,39,0.35); }
/* Vier Tarifkarten bei Playground und 3D Golf, drei beim Archery Battlefield.
   auto-fit statt fester Dreier-Spur, damit beide Faelle sauber aufgehen. */
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 28px; position: relative; }
/* Traeger-Flaeche hinter dem Karten-Trio: die Karten "schwebten" vorher ohne
   Bezug im dunklen Raum. Die Flaeche ist etwas heller als der Seitenhintergrund
   und dunkler als die Karten - so entsteht eine klare Ebenen-Staffelung
   (Seite < Flaeche < Karte). */
.price-grid::before {
  content: "";
  position: absolute;
  inset: -30px -26px;
  z-index: 0;
  border-radius: 34px;
  background:
    radial-gradient(90% 65% at 50% 0%, rgba(255,255,255,0.045), transparent 70%),
    linear-gradient(180deg, rgba(22,28,64,0.60), rgba(14,19,45,0.38));
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 44px 90px -56px rgba(0,0,0,0.65);
  pointer-events: none;
}
.price-card {
  --c: var(--accent);
  z-index: 1;
  padding: 40px 30px 30px;
  /* Klar gefuellter Karten-Hintergrund: der KOERPER ist ein neutraler, heller
     Marine-Verlauf (bg-3 -> bg-1), damit die Karte deutlich vorn steht. Die
     Kartenfarbe kommt nur als konzentrierter Schein OBEN dazu - so liest sich
     Magenta als Pink und kippt nicht ins Lila (Brand: kein Lila). */
  background:
    radial-gradient(90% 46% at 50% 0%, color-mix(in srgb, var(--c) 24%, transparent), transparent 55%),
    linear-gradient(180deg, var(--bg-3) 0%, var(--bg-2) 44%, var(--bg-1) 100%);
  border: 1px solid var(--line-2);
  border-radius: 22px;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 50px -34px rgba(0,0,0,0.7);
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.price-card:hover { transform: translateY(-4px); border-color: var(--c); box-shadow: 0 24px 60px -20px color-mix(in srgb, var(--c) 35%, transparent); }
.price-card.hot {
  background:
    radial-gradient(95% 50% at 50% 0%, color-mix(in srgb, var(--c) 34%, transparent), transparent 58%),
    linear-gradient(180deg, color-mix(in srgb, var(--c) 8%, var(--bg-3)) 0%, var(--bg-2) 46%, var(--bg-1) 100%);
  border-color: var(--c);
  box-shadow: 0 26px 70px -34px color-mix(in srgb, var(--c) 55%, transparent);
}

/* Schlanker Farb-Akzent oben statt des frueheren 68px-Farbklotzes:
   eine feine Linie an der Oberkante plus ein weicher Schein darunter. */
.pc-hero {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 7%, var(--c) 50%, transparent 93%);
  border-bottom: 0;
  overflow: visible;
}
.pc-hero::before {
  content: "";
  position: absolute;
  left: 50%; top: 0;
  transform: translateX(-50%);
  width: 74%; height: 52px;
  background: radial-gradient(62% 100% at 50% 0%, color-mix(in srgb, var(--c) 24%, transparent), transparent 72%);
  opacity: 0.6;
  filter: blur(7px);
}
.pc-hero-grid { display: none; }
.pc-hero-glow { display: none; }

.hot-tag {
  position: absolute;
  top: 18px; right: 20px;
  background: var(--c);
  color: #0b0b14;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .15em;
  padding: 5px 11px;
  border-radius: 4px;
  z-index: 2;
  box-shadow: 0 8px 24px -4px var(--c);
}
.pc-name {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .15em;
  color: var(--c);
  margin-bottom: 18px;
  text-shadow: 0 0 18px color-mix(in srgb, var(--c) 50%, transparent);
}
.pc-price { display: flex; align-items: baseline; gap: 5px; margin-bottom: 10px; }
.pc-cur { font-size: 22px; color: var(--ink-3); }
.pc-num { font-size: clamp(40px, 4vw, 56px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.pc-sub { color: var(--ink-2); margin-bottom: 26px; }

.pc-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 18px 14px;
  margin-bottom: 26px;
  background: color-mix(in srgb, var(--c) 5%, rgba(255,255,255,0.02));
  border: 1px solid color-mix(in srgb, var(--c) 18%, var(--line));
  border-radius: 14px;
}
.pc-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  min-width: 0;
}
.pc-stat + .pc-stat {
  border-left: 1px solid color-mix(in srgb, var(--c) 14%, var(--line));
  padding-left: 10px;
}
.pc-stat-v {
  font-family: var(--display);
  font-size: clamp(17px, 1.6vw, 22px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
  overflow-wrap: anywhere;
}
.pc-stat-l {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .14em;
  color: var(--ink-3);
  line-height: 1.3;
}

.pc-feats {
  list-style: none;
  margin: 0;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  margin-bottom: 26px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  font-size: 14px;
  color: var(--ink-2);
}
.pc-feat {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  line-height: 1.4;
}
.pc-feat-tick {
  flex-shrink: 0;
  position: relative;
  width: 14px;
  height: 14px;
  margin-top: 4px;
}
.pc-feat-tick::before,
.pc-feat-tick::after {
  content: "";
  position: absolute;
  background: var(--c);
  border-radius: 1px;
}
.pc-feat-tick::before {
  left: 1px; bottom: 3px;
  width: 6px; height: 2px;
  transform: rotate(45deg);
  transform-origin: left center;
  box-shadow: 0 0 6px color-mix(in srgb, var(--c) 55%, transparent);
}
.pc-feat-tick::after {
  left: 4px; bottom: 2px;
  width: 10px; height: 2px;
  transform: rotate(-50deg);
  transform-origin: left center;
  box-shadow: 0 0 6px color-mix(in srgb, var(--c) 55%, transparent);
}
.pc-feat-txt {
  color: var(--ink);
}

/* margin-top:auto haelt den Button unabhaengig von der Laenge der Feature-Liste
   auf einer Linie mit den Nachbarkarten. */
.pc-btn {
  width: 100%; justify-content: center; margin-top: auto;
  padding-top: 15px; padding-bottom: 15px;
  /* getoente Fuellung in der jeweiligen Kartenfarbe statt dreimal grellem Pink.
     Nur die empfohlene Karte bekommt weiter unten den voll gefuellten CTA. */
  background: color-mix(in srgb, var(--c) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
  color: #fff;
  font-weight: 700;
}
.pc-btn:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--c) 26%, transparent);
  border-color: var(--c);
  box-shadow: 0 12px 32px -10px color-mix(in srgb, var(--c) 45%, transparent);
}
/* Empfohlene Karte: einziger voll gefuellter Button -> klare Hierarchie */
.price-card.hot .pc-btn {
  background: var(--c);
  border-color: var(--c);
  color: #0b0b14;
  box-shadow: 0 12px 34px -8px color-mix(in srgb, var(--c) 55%, transparent);
}
.price-card.hot .pc-btn:hover {
  background: color-mix(in srgb, var(--c) 86%, #fff);
  border-color: color-mix(in srgb, var(--c) 86%, #fff);
}

@media (max-width: 1100px) {
  .price-grid { gap: 18px; }
  .price-card { padding: 38px 24px 28px; }
  .pc-stats { padding: 15px 10px; }
  .pc-stat + .pc-stat { padding-left: 8px; }
  .pc-stat-l { letter-spacing: .1em; }
}
@media (max-width: 900px) {
  .price-grid { gap: 22px; }
  .price-card { padding: 38px 28px 30px; }
}
@media (max-width: 560px) {
  .pricing { padding: 88px 0 76px; }
  .price-toggle { margin-bottom: 36px; }
  .price-card { padding: 34px 20px 26px; }
  .pc-sub { margin-bottom: 20px; }
  .pc-stats { padding: 15px 10px; margin-bottom: 22px; }
  .pc-feats { padding: 20px 0; margin-bottom: 22px; gap: 11px; }
}

/* PARTY */
.party {
  padding: 120px 0;
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(ellipse 70% 80% at 15% 30%, rgba(255,31,182,0.16), transparent 60%),
    radial-gradient(ellipse 60% 70% at 85% 75%, rgba(91,216,255,0.10), transparent 60%),
    linear-gradient(180deg, #181140 0%, #1d1648 55%, #1a1340 100%);
}
.party::before {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.045) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: radial-gradient(ellipse 80% 80% at center, #000 20%, transparent 92%);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at center, #000 20%, transparent 92%);
}
.party::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 4px 4px;
  opacity: 0.5;
  mix-blend-mode: overlay;
}
.party > .wrap { position: relative; z-index: 1; }
.party-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.party-feats { display: flex; gap: 32px; margin-top: 32px; }
.party-feat { padding-right: 32px; border-right: 1px solid var(--line); }
.party-feat:last-child { border-right: 0; }
.pf-n { font-size: 48px; font-weight: 700; letter-spacing: -0.03em; }
.pf-l { font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: .12em; text-transform: uppercase; }
.party-themes { display: flex; flex-direction: column; gap: 12px; }
.theme { display: flex; gap: 20px; align-items: center; padding: 24px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; transition: all .2s; }
.theme:hover { border-color: var(--c); transform: translateX(4px); }
.theme:hover .theme-arrow { color: var(--c); transform: translateX(4px); }
.theme-bar { width: 4px; align-self: stretch; background: var(--c); border-radius: 2px; }
.theme-name { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.theme-desc { font-family: var(--mono); font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.theme-arrow { margin-left: auto; font-size: 24px; color: var(--ink-3); transition: all .2s; }

/* VOUCHER */
.voucher { padding: 120px 0; }
/* Drei Grid-Kinder: Karte, Textspalte, Kauf-Button. Auf Desktop steht die Karte
   links und spannt ueber beide Zeilen der rechten Spalte (Text + Button). */
.voucher-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  grid-template-areas:
    "card text"
    "card buy";
  grid-template-rows: auto auto;
  gap: 24px 80px;
  align-content: center;
}
.voucher-grid > .voucher-card { grid-area: card; align-self: center; }
.voucher-text { grid-area: text; align-self: end; }
.voucher-buy { grid-area: buy; align-self: start; }

.vc-custom { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.vc-custom-l { font-family: var(--mono); font-size: 12px; color: var(--ink-3); flex-shrink: 0; }
.vc-custom input[type="range"] { flex: 1; min-width: 0; accent-color: var(--accent); }
.vc-custom-v { font-weight: 600; min-width: 60px; text-align: right; }

.voucher-card {
  position: relative;
  padding: 32px 36px 28px;
  background: #0a0a0c;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 22px;
  aspect-ratio: 1.586; /* credit-card ratio */
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow:
    0 30px 80px -30px rgba(255,31,182,0.35),
    0 20px 60px -20px rgba(91,216,255,0.25),
    inset 0 1px 0 rgba(255,255,255,0.06);
  transform-style: preserve-3d;
  transition: transform .4s ease;
}

/* mesh gradient blobs */
.voucher-card::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(35% 50% at 15% 20%, rgba(255,31,182,0.55), transparent 65%),
    radial-gradient(40% 55% at 85% 30%, rgba(91,216,255,0.4), transparent 65%),
    radial-gradient(30% 45% at 70% 90%, rgba(255,182,39,0.25), transparent 65%),
    radial-gradient(45% 60% at 25% 95%, rgba(185,97,255,0.35), transparent 65%);
  filter: blur(20px);
  pointer-events: none;
  z-index: 0;
}

/* pixel confetti */
.voucher-card::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    /* pink dots */
    radial-gradient(circle at 12% 65%, #ff1fb6 1.5px, transparent 2px),
    radial-gradient(circle at 78% 18%, #ff1fb6 1.2px, transparent 1.7px),
    radial-gradient(circle at 45% 85%, #ff1fb6 1px, transparent 1.5px),
    /* cyan dots */
    radial-gradient(circle at 28% 12%, #5bd8ff 1.3px, transparent 1.8px),
    radial-gradient(circle at 92% 72%, #5bd8ff 1.1px, transparent 1.6px),
    radial-gradient(circle at 58% 35%, #5bd8ff 0.9px, transparent 1.4px),
    /* yellow dots */
    radial-gradient(circle at 8% 35%, #ffb627 1px, transparent 1.5px),
    radial-gradient(circle at 65% 60%, #ffb627 1.1px, transparent 1.6px),
    /* white sparkles */
    radial-gradient(circle at 35% 50%, rgba(255,255,255,0.6) 0.7px, transparent 1.2px),
    radial-gradient(circle at 88% 88%, rgba(255,255,255,0.5) 0.6px, transparent 1.1px),
    radial-gradient(circle at 18% 82%, rgba(255,255,255,0.5) 0.7px, transparent 1.2px);
  pointer-events: none;
  z-index: 1;
  opacity: .9;
}
.voucher-card:hover { transform: perspective(1200px) rotateX(2deg) rotateY(-3deg) translateY(-4px); }

/* holographic foil edge */
.vc-foil {
  position: absolute; inset: -1px; border-radius: 22px;
  padding: 1px;
  background: conic-gradient(from 180deg,
    #ff1fb6, #ffb627, #5bd8ff, #b961ff, #ff1fb6);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
  opacity: .9;
  animation: vcFoil 8s linear infinite;
}
@keyframes vcFoil { to { filter: hue-rotate(360deg); } }

.vc-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 18px 18px;
  pointer-events: none;
  mask-image: radial-gradient(120% 80% at 50% 50%, #000 30%, transparent 100%);
}

.vc-watermark {
  position: absolute;
  right: -4%; bottom: 22%;
  font-family: var(--display, var(--mono));
  font-weight: 900;
  font-size: clamp(80px, 13vw, 180px);
  letter-spacing: -0.06em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.05);
  pointer-events: none;
  white-space: nowrap;
  transform: rotate(-4deg);
}

.vc-noise {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.4 0'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.5'/></svg>");
  opacity: .06; mix-blend-mode: overlay; pointer-events: none;
}

.vc-top {
  position: relative; z-index: 2;
  display: flex; justify-content: space-between; align-items: flex-start;
  /* ohne gap stiessen "ADVANGERS" und die Seriennummer auf schmalen Karten
     direkt aneinander */
  gap: 16px;
}
.vc-brand { display: flex; align-items: center; gap: 12px; }
.vc-logo {
  width: auto; height: 28px;
  max-width: 140px;
  object-fit: contain;
  filter: drop-shadow(0 2px 10px rgba(255,31,182,0.4));
}
.vc-brand-meta { display: flex; flex-direction: column; gap: 2px; }
.vc-brand-name { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .2em; }
.vc-brand-sub { font-family: var(--mono); font-size: 10px; color: var(--ink-3); letter-spacing: .25em; }
.vc-serial {
  display: flex; align-items: baseline; gap: 6px;
  font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: .12em;
}
.vc-serial-n { color: var(--ink-1); font-weight: 700; font-size: 13px; }

.vc-mid {
  position: relative; z-index: 2;
  margin-top: auto; margin-bottom: 8px;
  display: flex; flex-direction: column; gap: 10px;
}
.vc-amount-wrap {
  position: relative;
  display: flex; align-items: flex-start; gap: 10px;
  line-height: 0.85;
}
.vc-cur {
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 600; opacity: .85;
  margin-top: 12px;
  font-feature-settings: "tnum";
}
.vc-amount {
  position: relative; z-index: 2;
  font-size: clamp(72px, 11vw, 132px);
  font-weight: 800; letter-spacing: -0.05em;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 55%, #c8c8d4 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-feature-settings: "tnum";
  text-shadow: 0 0 40px rgba(255,255,255,0.15);
}
.vc-amount-shadow {
  position: absolute; left: 50px; top: 4px;
  font-size: clamp(72px, 11vw, 132px);
  font-weight: 800; letter-spacing: -0.05em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,31,182,0.5);
  z-index: 1;
  font-feature-settings: "tnum";
  pointer-events: none;
}
.vc-tagline {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .22em;
  color: rgba(255,255,255,0.55);
}
.vc-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--accent); }

@media (max-width: 560px) {
  .vc-top { gap: 10px; }
  .vc-brand { gap: 8px; }
  .vc-logo { height: 22px; max-width: 104px; }
  .vc-brand-name { font-size: 9.5px; letter-spacing: .14em; }
  .vc-brand-sub { font-size: 8.5px; letter-spacing: .16em; }
  .vc-serial { font-size: 9.5px; letter-spacing: .05em; gap: 4px; }
  .vc-serial-n { font-size: 11px; }
  .vc-tagline { gap: 7px; font-size: 8.5px; letter-spacing: .12em; }
}

/* perforated tear line */
.vc-perf {
  position: relative; z-index: 2;
  height: 1px;
  margin: 16px -36px 14px;
  background-image: radial-gradient(circle, rgba(255,255,255,0.25) 1px, transparent 1.2px);
  background-size: 8px 1px;
  background-repeat: repeat-x;
}
.vc-perf::before, .vc-perf::after {
  content: ""; position: absolute; top: -7px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--bg-0, #000);
  border: 1px solid rgba(255,255,255,0.08);
}
.vc-perf::before { left: -7px; }
.vc-perf::after { right: -7px; }

.vc-stub {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 24px;
  padding-top: 4px;
}
.vc-stub-col { display: flex; flex-direction: column; gap: 3px; }
.vc-stub-col.right { margin-left: auto; text-align: right; }
.vc-stub-l { font-family: var(--mono); font-size: 9px; letter-spacing: .25em; color: var(--ink-3); }
.vc-stub-v { font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: .08em; }

.vc-chip {
  width: 44px; height: 44px;
  border-radius: 6px;
  background: #fff;
  padding: 3px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.15), 0 4px 12px rgba(0,0,0,0.4);
  display: block;
}
.vc-chip svg { width: 100%; height: 100%; display: block; image-rendering: pixelated; }

/* Motiv-Figur auf der Karte: liegt auf z-index 1, also ueber den Hintergrund-
   Blobs (z0) und unter den Karten-Texten (z2), die dadurch lesbar bleiben. */
.vc-figure {
  position: absolute;
  right: -3%; bottom: -2%;
  height: 98%;
  width: auto;
  z-index: 1;
  pointer-events: none;
  object-fit: contain; object-position: bottom right;
  filter: drop-shadow(0 12px 22px rgba(0,0,0,0.55));
}

/* Motiv-Auswahl */
.vc-motifs { margin-top: 24px; }
.vc-motifs-l { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--ink-3); margin-bottom: 10px; }
.vc-motif-row { display: flex; gap: 10px; }
.vc-motif {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 6px 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,0.02);
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.vc-motif img { height: 56px; width: auto; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4)); }
.vc-motif-name { font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: var(--ink-3); text-transform: uppercase; }
/* Auf dem Handy bleiben je Kachel nur 62px, "SCHATZKISTE" ist aber 73px breit und
   stand deshalb links und rechts ueber den Rahmen hinaus. Ein einzelnes Wort kann
   nicht umbrechen — also brechen die Kacheln um: drei pro Reihe, dadurch rund
   104px je Kachel. Das groessere Bild tut dem Antippen ohnehin gut. */
@media (max-width: 560px) {
  .vc-motif-row { flex-wrap: wrap; }
  .vc-motif { flex: 0 1 calc(33.333% - 7px); }
  /* Die Betraege darunter brachen 4 + 1 um. Dieselbe Dreier-Teilung wie bei den
     Motiven daruber macht daraus 3 + 2. */
  .vc-preset { flex: 0 1 calc(33.333% - 6px); padding: 12px 8px; }
}
.vc-motif:hover { border-color: var(--line-2); background: rgba(255,255,255,0.05); transform: translateY(-2px); }
.vc-motif.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.vc-motif.on .vc-motif-name { color: var(--ink); }

/* ============ Gutschein-Karte: 1:1 aus dem abgenommenen Print-Design ============
   Groessen in cqw (1cqw = 1% Kartenbreite), damit alles proportional mitskaliert.
   Basis-Design ist 660px breit; px/6.6 = cqw. */
.gv-card {
  container-type: inline-size;
  position: relative;
  padding: 0;
  border-radius: 24px;
  aspect-ratio: 660 / 419;
  overflow: hidden;
  background:
    radial-gradient(90% 74% at 74% 96%, rgba(255,182,39,.28), transparent 60%),
    radial-gradient(80% 70% at 20% 6%, rgba(47,125,255,.28), transparent 60%),
    linear-gradient(158deg, var(--bg) 0%, var(--bg-mid) 52%, var(--bg-bot) 100%);
  box-shadow: 0 30px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.07);
}
/* alte Deko-Ebenen aus .voucher-card abschalten */
.gv-card::before, .gv-card::after { display: none; }

.gv-stars { position: absolute; inset: 0; opacity: .5; z-index: 1;
  background-image:
    radial-gradient(circle at 12% 18%, var(--accent-3) 1.1px, transparent 1.6px),
    radial-gradient(circle at 88% 12%, var(--accent-2) .9px, transparent 1.4px),
    radial-gradient(circle at 22% 72%, var(--accent) .9px, transparent 1.4px),
    radial-gradient(circle at 58% 26%, var(--accent-3) .8px, transparent 1.3px),
    radial-gradient(circle at 40% 88%, var(--accent-2) .8px, transparent 1.2px),
    radial-gradient(circle at 70% 62%, var(--accent-3) .7px, transparent 1.2px);
}
.gv-grid { position: absolute; inset: 0; opacity: .10; z-index: 1;
  background-image: linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px);
  background-size: 5.15cqw 5.15cqw;
  -webkit-mask-image: radial-gradient(70% 70% at 30% 50%, #000, transparent 75%);
  mask-image: radial-gradient(70% 70% at 30% 50%, #000, transparent 75%);
}
.gv-watermark { position: absolute; left: -2%; top: 32%; z-index: 1;
  font-size: 22.7cqw; font-weight: 700; letter-spacing: -.04em;
  color: rgba(255,255,255,.032); white-space: nowrap; font-family: var(--display); }
.gv-glow { position: absolute; right: 4%; bottom: -16%; width: 60cqw; height: 60cqw; z-index: 2;
  border-radius: 50%; filter: blur(6px);
  background: radial-gradient(circle, rgba(255,182,39,.42), rgba(255,182,39,0) 66%); }

/* Crew: drei Figuren gestaffelt (wie im Print) */
.gv-crew { position: absolute; right: -1.2cqw; bottom: -2.1cqw; width: 56%; height: 96%; z-index: 3; }
.gv-crew img { position: absolute; bottom: 0; filter: drop-shadow(-8px 8px 18px rgba(0,0,0,.6)); }
.gv-k1 { height: 100%; right: 18%; z-index: 4; }
.gv-k2 { height: 76%; right: 44%; z-index: 3; opacity: .96; }
.gv-k3 { height: 72%; right: 2%; z-index: 3; opacity: .97; }
/* Einzelfigur */
.gv-solo { position: absolute; right: -6cqw; bottom: -6cqw; height: 106%; z-index: 3;
  filter: drop-shadow(-16px 10px 34px rgba(0,0,0,.6)); }

/* Statue: steht auf einem Sockel mit „ADVENTURE RANGERS". Die Figuren duerfen ueber
   den Rand hinauslaufen, die Statue nicht — sonst wird genau der Schriftzug
   abgeschnitten. Deshalb ganz im Bild, mit etwas Luft nach unten. */
.gv-card[data-motif="statue"] .gv-solo {
  right: 1.5cqw; bottom: 2cqw; height: 92%;
  filter: drop-shadow(-14px 12px 30px rgba(0,0,0,.65));
}
/* Der Lichtschein sitzt tiefer, damit er unter dem Sockel liegt statt hinter dem Kopf. */
.gv-card[data-motif="statue"] .gv-glow { right: 8%; bottom: -26%; width: 52cqw; height: 52cqw; }

/* Im Motiv-Wähler ist die Statue hochformatig — sonst wird sie neben den
   breiteren Figuren winzig. */
.vc-motif[data-motif="statue"] img { height: 62px; }

.gv-pad { position: absolute; inset: 0; padding: 5.15cqw 5.76cqw; display: flex; flex-direction: column; z-index: 5; }
.gv-logo { width: 25.45cqw; display: block; filter: drop-shadow(0 2px 10px rgba(0,0,0,.5)); }
.gv-eyebrow { font-family: var(--mono); font-size: max(8px, 1.667cqw); letter-spacing: .2em; color: var(--ink-3);
  margin-top: 3.64cqw; display: flex; align-items: center; gap: 1.21cqw; }
.gv-dot { width: max(5px,.909cqw); height: max(5px,.909cqw); border-radius: 50%; background: var(--accent); flex: none; }
.gv-word { font-family: var(--display); font-size: 8.18cqw; font-weight: 700; letter-spacing: -.035em;
  line-height: .94; margin-top: 1.5cqw; text-shadow: 0 3px 24px rgba(0,0,0,.5); }
.gv-word em { font-style: normal; color: var(--accent-3); }
.gv-amount { margin-top: .9cqw; display: flex; align-items: baseline; gap: .9cqw; color: var(--accent-3);
  text-shadow: 0 0 40px rgba(255,182,39,.45); font-family: var(--display); }
.gv-cur { font-size: 4.39cqw; font-weight: 600; }
.gv-num { font-size: 11.82cqw; font-weight: 700; letter-spacing: -.05em; line-height: .86; font-variant-numeric: tabular-nums; }
.gv-foot { margin-top: auto; }
.gv-foot-rule { height: 2px; width: 7.88cqw; background: var(--accent); margin-bottom: 1.36cqw; border-radius: 2px; }
.gv-foot-txt { font-family: var(--mono); font-size: max(8px, 1.591cqw); letter-spacing: .16em; color: var(--ink-2); }
.gv-foot-txt b { color: var(--accent-3); font-weight: 500; }

.vc-presets { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
.vc-preset { padding: 12px 20px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-2); font-weight: 600; transition: all .15s; }
.vc-preset.on { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
.vc-preset:hover { border-color: var(--accent); }

/* HOURS */
.hours-section { padding: 120px 0; background: var(--bg-1); border-top: 1px solid var(--line); }
.hours-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: start; }
.hours-table { display: flex; flex-direction: column; }
.hours-row { display: grid; grid-template-columns: auto 1fr auto auto; gap: 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); font-size: 18px; }
.hours-row.off { color: var(--ink-4); }
.hours-row.today { color: var(--accent); font-weight: 700; }
.hours-dots { border-bottom: 1px dashed var(--line); height: 1px; align-self: end; margin-bottom: 6px; }
.hours-today { font-family: var(--mono); font-size: 10px; background: var(--accent); color: var(--on-accent); padding: 3px 8px; border-radius: 4px; letter-spacing: .15em; font-weight: 700; }

/* FOOTER */
.footer-v2 {
  position: relative;
  margin-top: 80px;
  border-top: 1px solid var(--line);
  background:
    radial-gradient(60% 80% at 80% 0%, rgba(255,31,182,0.08), transparent 60%),
    radial-gradient(50% 70% at 10% 100%, rgba(91,216,255,0.06), transparent 60%),
    var(--bg-1);
  overflow: hidden;
}

.ft-mark-wrap {
  position: relative;
  padding: 80px 0 0;
  overflow: hidden;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ft-mark-logo {
  position: absolute;
  top: 50%; left: 0;
  transform: translate(-50%, -50%);
  width: clamp(220px, 30vw, 460px);
  height: clamp(220px, 30vw, 460px);
  border-radius: 50%;
  object-fit: cover;
  opacity: 0.18;
  filter: saturate(1.05);
  mask-image: radial-gradient(circle at 70% 50%, #000 35%, transparent 75%);
  -webkit-mask-image: radial-gradient(circle at 70% 50%, #000 35%, transparent 75%);
  z-index: 0;
  pointer-events: none;
}
.ft-mark {
  position: relative;
  z-index: 1;
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(80px, 18vw, 280px);
  letter-spacing: -0.05em;
  line-height: 0.85;
  text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.1) 0%, transparent 90%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,0.07);
  user-select: none;
  white-space: nowrap;
  margin-bottom: -0.15em;
}

.ft-hero {
  position: relative;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 80px;
  padding: 60px 0 80px;
  border-bottom: 1px solid var(--line);
  align-items: center;
}

.ft-brand {
  /* inline-block landete in derselben Zeile wie das inline-flex .eyebrow darunter */
  display: block;
  width: fit-content;
  margin-bottom: 28px;
  text-decoration: none;
  line-height: 0;
}
.ft-brand-logo {
  /* Logo ist 1200x230 (5,2:1). Nur ueber die Breite steuern, Hoehe automatisch -
     sonst kollidierte fixe Hoehe mit max-width und stauchte das Logo. */
  width: clamp(200px, 20vw, 250px);
  height: auto;
  display: block;
  filter: drop-shadow(0 0 18px rgba(255,182,39,0.22)) drop-shadow(0 0 24px rgba(255,31,182,0.18));
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), filter .3s ease;
}
.ft-brand:hover .ft-brand-logo {
  transform: scale(1.04);
  filter: drop-shadow(0 0 22px rgba(255,182,39,0.4)) drop-shadow(0 0 30px rgba(255,31,182,0.32));
}
@media (max-width: 860px) {
  .ft-brand-logo { width: 200px; }
}

.ft-hero-left .eyebrow { margin-bottom: 16px; }
.ft-address {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(32px, 3.4vw, 52px);
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 28px;
  max-width: 15ch;
}
/* Die Ortszeile ist zu lang für die Display-Größe der Straße, sonst bricht sie
   über drei Zeilen und wirkt verzogen. */
.ft-address-sub {
  display: block;
  margin-top: 12px;
  max-width: 34ch;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.5;
  color: var(--ink-3);
}
.ft-address-sub a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; }
.ft-address-sub a:hover { color: var(--accent-2); }
.ft-contact-row {
  display: flex; gap: 40px; flex-wrap: wrap;
}
.ft-contact {
  display: flex; flex-direction: column; gap: 6px;
  text-decoration: none;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  min-width: 220px;
  transition: border-color .2s;
}
.ft-contact:hover { border-color: var(--accent); }
.ft-contact-l {
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
  color: var(--ink-3);
}
.ft-contact-v {
  font-size: 18px; font-weight: 600; color: var(--ink);
  letter-spacing: -0.01em;
}

.ft-hero-right {
  display: flex; flex-direction: column; gap: 20px;
  align-items: flex-start;
}
.ft-status {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  background: rgba(91,216,255,0.06);
  border: 1px solid rgba(91,216,255,0.2);
  border-radius: 12px;
  width: 100%;
}
.ft-status-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 0 4px rgba(91,216,255,0.18), 0 0 12px var(--accent-2);
  animation: ftPulse 2s ease-in-out infinite;
}
@keyframes ftPulse {
  0%,100% { box-shadow: 0 0 0 4px rgba(91,216,255,0.18), 0 0 12px var(--accent-2); }
  50%     { box-shadow: 0 0 0 8px rgba(91,216,255,0.05), 0 0 18px var(--accent-2); }
}
.ft-status-label {
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  color: var(--accent-2); font-weight: 700;
}
.ft-status-sub {
  font-size: 13px; color: var(--ink-2); margin-top: 2px;
}

.ft-cta {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 18px 24px;
  background: var(--accent); color: var(--on-accent);
  border-radius: 999px;
  font-weight: 700; font-size: 15px;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s;
}
.ft-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -8px var(--accent);
}
.ft-cta-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  background: #000; color: #fff;
  border-radius: 50%; font-size: 12px;
}

.ft-socials {
  display: flex; gap: 10px; margin-top: 6px;
}
.ft-socials a {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-2);
  transition: all .2s;
  cursor: pointer;
}
.ft-socials a:hover {
  color: var(--ink);
  border-color: var(--accent);
  background: rgba(255,31,182,0.08);
  transform: translateY(-2px);
}

.ft-cols {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 40px;
  padding: 60px 0 40px;
  border-bottom: 1px solid var(--line);
}
.ft-h {
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
  color: var(--ink-3); margin-bottom: 18px;
  position: relative;
  padding-bottom: 12px;
}
.ft-h::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 24px; height: 1px; background: var(--accent);
}
.ft-cols a {
  display: block; padding: 7px 0; color: var(--ink-2);
  font-size: 14px; line-height: 24px;
  transition: color .15s, transform .15s;
  cursor: pointer;
}
.ft-cols a:hover { color: var(--accent); transform: translateX(4px); }

.ft-bot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 28px 0;
  font-family: var(--mono); font-size: 10px; letter-spacing: .15em;
  color: var(--ink-4);
}
.ft-bot-left, .ft-bot-right {
  display: flex; align-items: center; gap: 12px;
}
.ft-tick {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 8px var(--accent-2);
}
.ft-bot-sep { color: var(--ink-4); opacity: .5; }
.ft-credit {
  /* Unten Luft fuer den schwebenden Buchen-Knopf: er liegt fest ueber dem Inhalt
     und deckte die letzte Zeile des Fusses sonst dauerhaft zu. */
  padding: 18px 0 clamp(4px, 1vw, 8px);
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .15em;
  color: var(--ink-4);
  text-align: center;
  text-transform: uppercase;
}
.ft-credit a {
  color: var(--ink-3);
  text-decoration: none;
  transition: color .2s ease, text-shadow .2s ease;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  padding-bottom: 1px;
}
.ft-credit a:hover {
  color: var(--accent);
  text-shadow: 0 0 12px color-mix(in srgb, var(--accent) 60%, transparent);
  border-bottom-color: var(--accent);
}

/* responsive */
@media (max-width: 900px) {
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  .price-grid { grid-template-columns: 1fr; }
  .party-grid, .hours-grid { grid-template-columns: 1fr; gap: 40px; }
  /* Handy: erst Text + Betrag waehlen, dann die Karte mit dem Ergebnis, dann
     kaufen. Vorher stand die Karte ganz oben, noch bevor man wusste, worum es
     geht. */
  .voucher-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "text" "card" "buy";
    gap: 28px;
  }
  .voucher-text, .voucher-buy { align-self: auto; }
  .voucher-buy .btn { width: 100%; justify-content: center; }
  .ft-cols { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .ft-hero { grid-template-columns: 1fr; gap: 40px; padding: 40px 0 60px; }
  .ft-bot { flex-direction: column; gap: 12px; align-items: flex-start; }
  /* .nav-links wird bewusst NICHT hier ausgeblendet: Der Burger erscheint in
     styles.css, und diese Datei wird spaeter geladen. Beides zusammen ergab eine
     Luecke (821-900px) ganz ohne Navigation - weder Links noch Burger. */
  /* Der Scroll-Hinweis sass unten rechts genau auf dem letzten Stat-Label
     ("MIN. AB HAMBURG") - beide Texte lagen uebereinander. */
  .hero-corner.top-left, .hero-corner.top-right, .hero-corner.bottom-right { display: none; }
  .bk-areas { grid-template-columns: 1fr; }
  .bk-days { grid-template-columns: repeat(4, 1fr); }
  .bk-times { grid-template-columns: repeat(3, 1fr); }
  .bk-form { grid-template-columns: 1fr; }
}


/* ---------------------------------------------------------------------------
   AREAS ALS SLIDER
   Sechs hohe Karten untereinander machten diesen Abschnitt zur laengsten
   Strecke der Startseite. Jetzt eine breite Karte auf einmal, seitlich
   durchgeblaettert - Bild links, Text rechts, also echtes Breitbild statt
   Hochformat. Gescrollt wird nativ mit Einrasten, die Pfeile springen nur
   dorthin; wischen funktioniert damit auch ohne JavaScript.
   --------------------------------------------------------------------------- */
.areas-slider { position: relative; }
.areas-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.areas-track::-webkit-scrollbar { display: none; }
.areas-track > .area-card {
  flex: 0 0 100%;
  scroll-snap-align: start;
  min-width: 0;
}

/* Breitbild-Karte: Bild links, Inhalt rechts. */
@media (min-width: 1024px) {
  .areas-track.pixel > .area-card.pixel {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    align-items: stretch;
  }
  .areas-track.pixel > .area-card.pixel .area-img-wrap {
    /* `aspect-ratio` zusammen mit `height: 100%` laesst die BREITE aus der Hoehe
       folgen: Karte 450px hoch ergab 800px Bildbreite in einer 735px-Spalte. Das
       Bild sprengte seine Rasterspalte und schob sich mitsamt der Logo-Marke
       (.area-img-wrap::before, 16px vom rechten Bildrand) ueber den Knopf im
       Textbereich - und zwar umso weiter, je laenger der Beschreibungstext war.
       Die Spalte gibt die Breite vor, die Rasterzeile (align-items: stretch)
       die Hoehe. */
    aspect-ratio: auto;
    height: auto;
    margin: 14px 0 14px 14px;
    border-radius: 16px;
  }
  .areas-track.pixel > .area-card.pixel .area-body {
    display: flex; flex-direction: column; justify-content: center;
  }
}

/* Steuerung unter dem Slider */
.as-controls {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; margin-top: 22px; flex-wrap: wrap;
}
/* Ueber der Reihe statt darunter: der Gast sieht die Steuerung, bevor er an der
   Box haengenbleibt, und muss nicht erst daran vorbeiscrollen. */
.as-controls.oben { margin-top: 0; margin-bottom: 18px; }
.as-dots { display: flex; align-items: center; gap: 9px; }
.as-dot {
  width: 9px; height: 9px; padding: 0;
  border-radius: 999px; border: 1px solid var(--line-2);
  background: transparent; cursor: pointer;
  transition: width .25s ease, background .2s ease, border-color .2s ease;
}
.as-dot:hover { border-color: var(--c); }
.as-dot.on {
  width: 30px;
  background: var(--c); border-color: var(--c);
  box-shadow: 0 0 14px color-mix(in srgb, var(--c) 55%, transparent);
}
.as-dot:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }

.as-arrows { display: flex; align-items: center; gap: 14px; }
.as-count {
  font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.14em; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.as-arrow {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border-radius: 999px; border: 1px solid var(--line-2);
  background: transparent; color: var(--ink); cursor: pointer;
  transition: border-color .18s ease, background .18s ease, color .18s ease;
}
.as-arrow:hover:not(:disabled) { border-color: var(--accent-3); color: var(--accent-3); background: rgba(255,182,39,0.08); }
.as-arrow:disabled { opacity: 0.3; cursor: default; }
.as-arrow:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; }

/* Auf dem Handy schaut die naechste Karte an, damit erkennbar ist, dass es
   seitlich weitergeht. Die Pfeile entfallen, gewischt wird ohnehin. */
@media (max-width: 1023px) {
  .areas-track { gap: 14px; }
  .areas-track > .area-card { flex-basis: 88%; }
  /* Die Pfeile bleiben auch auf dem Handy sichtbar: Ohne sie sieht man einer
     Wisch-Reihe nicht an, dass rechts noch etwas kommt. Nur etwas kleiner. */
  .as-arrows .as-arrow { width: 38px; height: 38px; }
  .as-controls { justify-content: center; }
}
@media (max-width: 700px) {
  .areas-track > .area-card { flex-basis: 92%; }
}

/* ---- Zweite Auswahlstufe: Tarif (nur auf schmalen Screens) ---- */
.plan-toggle { display: none; }
@media (max-width: 760px) {
  /* Vier volle Preiskarten untereinander machen die Startseite auf dem Handy
     unnoetig lang. Deshalb: erst den Bereich waehlen, dann den Tarif — und nur
     die gewaehlte Karte anzeigen. */
  .plan-toggle {
    display: flex;
    gap: 8px;
    width: 100%;
    margin: 0 0 22px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .plan-toggle::-webkit-scrollbar { display: none; }
  .plan-btn {
    flex: 0 0 auto;
    padding: 9px 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--ink-3);
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    white-space: nowrap;
    transition: color .2s, border-color .2s, background .2s;
  }
  .plan-btn.on {
    color: var(--ink);
    border-color: var(--c, var(--accent-2));
    background: color-mix(in srgb, var(--accent-2) 14%, transparent);
  }
  .price-card:not(.is-current) { display: none; }
  /* Auf den Bereichsseiten gibt es keine Tarif-Pillen, die eine Karte
     auszeichnen koennten. Dort traf die Regel darueber auf ALLE Karten zu und
     der Abschnitt "Was es kostet." blieb leer. Sie laufen stattdessen als
     wischbare Reihe, eine Karte pro Blick. */
  .ap-tarife .price-card { display: block; }
  .ap-tarife {
    display: flex; gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ap-tarife::-webkit-scrollbar { display: none; }
  /* Volle Breite statt 84 %: bei angeschnittenen Nachbarkarten blieb nach dem
     Wischen immer eine halbe Karte stehen. Eine Karte je Blick, die Pfeile
     sagen, dass es weitergeht. */
  .ap-tarife > .price-card { flex: 0 0 100%; scroll-snap-align: start; min-width: 0; }
  /* Die Traegerflaeche haengt am Gitter und wuerde mitscrollen. */
  .ap-tarife::before { display: none; }
  .plan-toggle { margin-bottom: 28px; }
  .ft-credit { padding-bottom: 92px; }
  /* Die Traegerflaeche hinter den Karten ragt 30px nach oben und schnitt dadurch
     in die Tarif-Pillen. Auf dem Handy reicht ein knapperer Rand. */
  .price-grid::before { inset: -16px -14px; }
}

/* ---- Bereichskarte auf schmalen Screens ---- */
/* Drei Spalten sind auf schmalen Handys zu eng: "AUFENTHALT" und
   "BEGLEITUNG FREI" liefen bis zu 14px aus ihrer Spalte heraus und wurden am
   Kartenrand abgeschnitten. Zwei Spalten, die dritte Angabe darunter ueber die
   volle Breite. */
@media (max-width: 430px) {
  .pc-stats { grid-template-columns: repeat(2, 1fr); gap: 14px 10px; }
  .pc-stat + .pc-stat { border-left: none; padding-left: 0; }
  .pc-stat:nth-child(3):last-child { grid-column: 1 / -1; }
  .pc-stat-l { letter-spacing: .06em; }
}

@media (max-width: 560px) {
  /* Die Nummer steht schon im Slider-Zaehler unter den Karten. Auf der Karte
     selbst lag sie ueber dem Tag, sobald der zweizeilig wurde. */
  .area-num { display: none; }
  .area-tag { font-size: 9px; letter-spacing: 0.1em; padding: 7px 10px; top: 14px; left: 14px; right: 14px; }
}

/* Beschreibung in Absaetzen (neue Bereichstexte) */
.area-desc p { margin: 0 0 10px; }
.area-desc p:last-child { margin-bottom: 0; }

/* Wisch-Punkte mittig unter den Bildern, Pfeile bleiben rechts */
.as-controls { position: relative; justify-content: center; min-height: 44px; }
.as-arrows { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
@media (max-width: 1023px) {
  .as-controls { flex-direction: column; gap: 12px; }
  .as-arrows { position: static; transform: none; }
}

/* Karte ohne Online-Buchung */
.area-cta.vorort { justify-content: center; cursor: default; opacity: .75; border-style: dashed; }
/* Handy: nur der erste Absatz (der volle Text steht auf der Bereichsseite), und jede
   Karte nur so hoch wie ihr Text - sonst erben kurze Karten die Hoehe der laengsten */
@media (max-width: 700px) {
  .area-desc p + p { display: none; }
  .areas-track { align-items: flex-start; }
}

/* --- Öffnungszeiten: zwei Wochenplaene ---------------------------------------
   Ferien und Normalbetrieb unterscheiden sich deutlich (montags zu, Di-Do erst
   nachmittags). Eine Tabelle mit Fussnote hat das nicht getragen. */
.hours-two { display: grid; gap: 28px; }
.hours-block {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 20px 12px;
  background: rgba(255,255,255,0.02);
  transition: border-color .2s ease, background .2s ease;
}
.hours-block.aktiv {
  border-color: color-mix(in srgb, var(--accent-2) 45%, transparent);
  background: color-mix(in srgb, var(--accent-2) 5%, rgba(255,255,255,0.02));
}
.hours-block-h {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--display); font-weight: 700; font-size: 16px;
  margin-bottom: 10px;
}
.hours-block-tag {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em;
  padding: 3px 8px; border-radius: 999px;
  background: var(--accent-2); color: var(--on-accent);
}
@media (min-width: 900px) { .hours-two { grid-template-columns: 1fr 1fr; gap: 20px; } }