/* =================================================================
   PadelKing Bremen – Stylesheet
   Marke: Gold #D6913D · Dunkelblau #0D1B2A · heller/dunkler Wechsel
   ================================================================= */

/* Selbst gehostete Schriften (DSGVO: kein Google-Fonts-Abruf).
   Pfade relativ zum Stylesheet (padelking-Root) – gelten auch für en/ + es/. */
@font-face{
  font-family:'Montserrat';font-style:normal;font-weight:300 800;font-display:swap;
  src:url('assets/fonts/montserrat-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Montserrat';font-style:normal;font-weight:300 800;font-display:swap;
  src:url('assets/fonts/montserrat-latinext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('assets/fonts/inter-latinext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ----------------------------- Tokens ----------------------------- */
:root{
  --navy:        #0D1B2A;
  --navy-2:      #13263a;
  --navy-3:      #1b3450;
  --gold:        #E2AC55;
  --gold-2:      #EEBE73;
  --gold-soft:   #f5e7cf;

  --bg:          #ffffff;
  --cream:       #f5efe6;
  --cream-2:     #efe7da;

  --ink:         #12202e;   /* Text auf hell */
  --ink-soft:    #4a5764;
  --light:       #f4f6f8;   /* Text auf dunkel */
  --light-soft:  #aebccb;

  --line:        #e7ded1;
  --line-dark:   rgba(255,255,255,.14);

  --radius:      22px;
  --radius-sm:   14px;
  --radius-lg:   28px;

  --shadow:      0 18px 50px -22px rgba(13,27,42,.45);
  --shadow-sm:   0 8px 24px -12px rgba(13,27,42,.35);

  --wrap:        1400px;
  --gap:         14px;
  --header-h:    88px;

  --font-head:   'Montserrat', system-ui, sans-serif;
  --font-body:   'Inter', system-ui, sans-serif;

  --ease:        cubic-bezier(.22,.61,.36,1);
}

/* ----------------------------- Reset ------------------------------ */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; font-family:var(--font-body); color:var(--ink);
  background:var(--bg); line-height:1.6; font-size:17px;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family:var(--font-head); line-height:1.18; margin:0; letter-spacing:-.005em; font-weight:700; }
/* feiner Heading-Stil passend zum Logo: dünne erste Zeile, kräftige zweite */
.thin{ font-weight:300; }
p{ margin:0; }
ul{ margin:0; padding:0; list-style:none; }

.wrap{ width:min(var(--wrap), 92%); margin-inline:auto; }
.section{ padding:clamp(56px,8vw,108px) 0; }
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--navy); color:#fff; padding:10px 16px; border-radius:0 0 10px 0;
}
.skip-link:focus{ left:0; }

/* ----------------------------- Buttons ---------------------------- */
.btn{
  --bg:var(--navy); --fg:#fff;
  display:inline-flex; align-items:center; gap:.6em;
  background:var(--bg); color:var(--fg);
  padding:.85em 1.4em; border-radius:999px; border:0;
  font-family:var(--font-head); font-weight:700; font-size:.95rem;
  letter-spacing:.005em; line-height:1; white-space:nowrap;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .2s;
}
.btn svg{ flex:0 0 auto; }
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.btn-gold{ background:var(--gold); color:var(--navy); }
.btn-gold:hover{ background:var(--gold-2); }
.btn-dark{ background:var(--navy); color:#fff; }
.btn-lg{ padding:1.05em 1.8em; font-size:1.05rem; }
.btn-sm{ padding:.7em 1.1em; font-size:.85rem; }
.btn-ghost-light{
  background:transparent; color:#fff;
  border:1.5px solid rgba(255,255,255,.35);
}
.btn-ghost-light:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.6); }
.btn-arrow .arrow{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.9em; height:1.9em; margin-right:-.5em; border-radius:50%;
  background:rgba(13,27,42,.14);
}
.btn-gold.btn-arrow .arrow{ background:rgba(13,27,42,.18); }
.btn-dark.btn-arrow .arrow{ background:rgba(255,255,255,.18); }

/* --------------------------- Pills / Heads ------------------------ */
.pill{
  display:inline-flex; align-items:center; gap:.5em;
  background:var(--cream-2); color:var(--ink);
  font-family:var(--font-head); font-weight:700; font-size:.8rem;
  padding:.5em 1em; border-radius:999px; letter-spacing:.02em;
}
.pill-gold{ background:rgba(214,145,61,.16); color:var(--gold); }
.pill .dot, .kicker .dot{
  width:.55em; height:.55em; border-radius:50%; background:var(--gold);
}
.kicker{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--font-head); font-weight:600; font-size:.85rem;
  color:var(--light-soft); letter-spacing:.02em;
}
h1{ font-size:clamp(2.1rem,5.2vw,3.5rem); }
h2{ font-size:clamp(1.8rem,4vw,2.9rem); }
h3{ font-size:clamp(1.25rem,2.2vw,1.6rem); }

.sec-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px; margin-bottom:clamp(28px,4vw,48px); flex-wrap:wrap;
}
.sec-head .pill{ margin-bottom:14px; }
.sec-head.center{ flex-direction:column; align-items:center; text-align:center; gap:0; }
.sec-head.center .pill{ margin-bottom:14px; }
.sec-head.light h2{ color:#fff; }

/* ----------------------------- Header ----------------------------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:var(--navy); color:#fff;
  border-bottom:1px solid var(--line-dark);
}
.header-inner{
  display:flex; align-items:center; gap:24px;
  min-height:var(--header-h);
}
.logo img{ height:58px; width:auto; }
.nav{ margin-left:8px; }
.nav-list{ display:flex; align-items:center; gap:4px; }
.nav-list > li > a{
  display:inline-flex; align-items:center; gap:.35em;
  padding:.6em .85em; border-radius:999px;
  font-family:var(--font-head); font-weight:600; font-size:.92rem;
  color:var(--light-soft); transition:color .2s, background .2s;
  white-space:nowrap;   /* "Über uns" soll nie zweizeilig in der Kopfzeile stehen */
}
.nav-list > li > a:hover,
.nav-list > li > a.is-current{ color:#fff; }
.nav-list > li > a.is-current{ background:rgba(255,255,255,.08); }
.caret{ width:11px; height:11px; transition:transform .25s; }
.has-sub{ position:relative; }
.has-sub:hover .caret{ transform:rotate(180deg); }

.submenu{
  position:absolute; top:calc(100% + 8px); left:0; min-width:230px;
  background:var(--navy-2); border:1px solid var(--line-dark);
  border-radius:var(--radius-sm); padding:8px; box-shadow:var(--shadow);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:.22s var(--ease); z-index:50;
}
.has-sub:hover .submenu,
.has-sub:focus-within .submenu{ opacity:1; visibility:visible; transform:translateY(0); }
.submenu a{
  display:block; padding:.65em .85em; border-radius:10px;
  font-size:.9rem; color:var(--light-soft); font-weight:500;
}
.submenu a:hover{ background:rgba(255,255,255,.07); color:#fff; }

.nav-close, .nav-cta{ display:none; }   /* nur im mobilen Drawer sichtbar */

.header-actions{ display:flex; align-items:center; gap:10px; margin-left:auto; }
.ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:50%; color:var(--light-soft);
  border:1px solid var(--line-dark); transition:.2s;
}
.ico:hover{ color:#fff; border-color:rgba(255,255,255,.4); }
.header-cta{ }
/* Buchen-Knopf: traegt als einziger Kopfzeilen-Knopf Gold, damit die Buchung
   optisch gewinnt. Das kurze Label greift erst auf schmalen Displays. */
.header-cta-book .cta-short, .nav-cta-book .cta-short{ display:none; }
/* WhatsApp sitzt in der Kopfzeile als rundes Icon neben dem Buchen-Knopf –
   mit vollem Label passten Navigation + beide Knoepfe nicht in eine Zeile. */
.ico-wa{ color:#fff; border-color:rgba(255,255,255,.28); background:rgba(37,211,102,.16); }
.ico-wa:hover{ background:rgba(37,211,102,.28); border-color:rgba(37,211,102,.55); }
.ico-wa svg{ width:20px; height:20px; }

/* Sprachumschalter */
.lang{ position:relative; }
.lang-btn{
  display:inline-flex; align-items:center; gap:.4em;
  background:transparent; color:var(--light-soft);
  border:1px solid var(--line-dark); border-radius:999px;
  padding:.5em .8em; font-family:var(--font-head); font-weight:600; font-size:.82rem;
  transition:.2s;
}
.lang-btn:hover, .lang.open .lang-btn{ color:#fff; border-color:rgba(255,255,255,.4); }
.lang-btn .caret{ width:10px; height:10px; transition:transform .25s; }
.lang.open .lang-btn .caret{ transform:rotate(180deg); }
.lang-menu{
  position:absolute; top:calc(100% + 8px); right:0; min-width:160px;
  background:var(--navy-2); border:1px solid var(--line-dark);
  border-radius:var(--radius-sm); padding:8px; box-shadow:var(--shadow);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:.22s var(--ease); z-index:60;
}
.lang.open .lang-menu{ opacity:1; visibility:visible; transform:translateY(0); }
.lang-menu a{ display:block; padding:.6em .8em; border-radius:10px; font-size:.9rem; color:var(--light-soft); font-weight:500; }
.lang-menu a:hover{ background:rgba(255,255,255,.07); color:#fff; }
.lang-menu a.is-active{ color:var(--gold); font-weight:600; }

.burger{
  display:none; flex-direction:column; gap:5px; width:44px; height:44px;
  align-items:center; justify-content:center; background:transparent;
  border:1px solid var(--line-dark); border-radius:12px;
}
.burger span{ width:22px; height:2px; background:#fff; border-radius:2px; transition:.3s var(--ease); }
body.menu-open .burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
body.menu-open .burger span:nth-child(2){ opacity:0; }
body.menu-open .burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
body.menu-open{ overflow:hidden; overscroll-behavior:contain; }

/* ----------------------------- Tiles ------------------------------ */
.tile{ border-radius:var(--radius); overflow:hidden; position:relative; }
.tile-navy{ background:var(--navy); color:#fff; }
.tile-cream{ background:var(--cream); color:var(--ink); }
.tile-white{ background:#fff; color:var(--ink); border:1px solid var(--line); }
.tile-photo img,
.tile-photo video{ width:100%; height:100%; object-fit:cover; }

/* Glas-Effekte (durchgehende Design-Sprache) */
.glass{
  background:rgba(255,255,255,.18);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(255,255,255,.25);
}
.glass-dark{
  background:linear-gradient(180deg, rgba(13,27,42,.35), rgba(13,27,42,.78));
  backdrop-filter:blur(10px) saturate(130%);
  -webkit-backdrop-filter:blur(10px) saturate(130%);
  border:1px solid rgba(255,255,255,.12);
}
.glass-chip{
  position:absolute; top:14px; left:14px;
  padding:.45em .9em; border-radius:999px; font-size:.78rem; font-weight:600;
  color:#fff; font-family:var(--font-head);
  background:rgba(13,27,42,.4);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.2);
}

/* ------------------------------ HERO ------------------------------ */
.hero{
  background:var(--cream);
  padding-block:clamp(24px,3.5vw,44px);
}
.hero-grid{
  display:grid;
  grid-template-columns:1.02fr 1.12fr .92fr;
  gap:var(--gap);
  width:100%;
  min-height:560px;
}
/* Auf breiten Screens (z. B. MacBook): kompletter Hero passt in die Bildschirmhöhe
   mit etwas Luft nach unten – Inhalt wird auf schmaleren Breiten nicht beschnitten. */
@media (min-width:1200px){
  /* 40px sichtbarer Abstand oben; unten verlängert das Creme bis zum Slider
     (gleich groß wie der Abstand Slider → 2. Abschnitt = Section-Padding). */
  .hero{ padding-top:40px; padding-bottom:clamp(56px,8vw,108px); }
  /* Grid = Bildschirmhöhe minus Header minus 40px oben minus 40px sichtbar unten.
     Auf größeren Monitoren werden die Kacheln dadurch höher, der Rand bleibt 40px. */
  /* min-height statt height: auf flachen Fenstern (z. B. 1440x760) sind zwei
     CTA-Zeilen hoeher als die Bildschirmhoehe – mit fester Hoehe lief der
     Inhalt aus der Kachel heraus. */
  .hero-grid{ min-height:max(460px, calc(100svh - var(--header-h) - 80px)); max-height:none; }
}
.hero-intro{
  padding:clamp(26px,3vw,40px);
  display:flex; flex-direction:column;
  background:var(--navy);
}
.hero-intro .kicker{ margin-bottom:18px; }
.hero-intro h1{ color:#fff; }
.hero-intro .hl{ color:var(--gold); }
.hero-intro .lead{ color:var(--light-soft); margin-top:18px; font-size:1.02rem; max-width:42ch; }
.hero-cta{ margin-top:auto; padding-top:26px; display:flex; flex-wrap:wrap; gap:10px; }

.hero-mid{ display:grid; grid-template-rows:1.45fr 1fr; gap:var(--gap); }
.hero-photo{ min-height:200px; }
.hero-mid-bottom{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); }
.hero-mini{ padding:20px; display:flex; flex-direction:column; justify-content:center; }
.avatars{ display:flex; align-items:center; }
.avatars img{
  width:42px; height:42px; border-radius:50%; object-fit:cover;
  border:2.5px solid #fff; margin-left:-12px;
}
.avatars img:first-child{ margin-left:0; }
.avatars-more{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%; margin-left:-12px;
  background:var(--gold); color:var(--navy); font-weight:700;
  font-family:var(--font-head); border:2.5px solid #fff;
}
.mini-text{ margin-top:16px; display:flex; flex-direction:column; line-height:1.3; }
.mini-text strong{ font-family:var(--font-head); font-size:1.05rem; }
.mini-text span{ color:var(--ink-soft); font-size:.88rem; margin-top:2px; }
.hero-stat{ align-items:flex-start; justify-content:flex-start; background:var(--navy); gap:6px; }
.stat-num{ font-family:var(--font-head); font-weight:700; font-size:clamp(1.4rem,2.1vw,1.85rem); color:var(--gold); line-height:1.05; }
.stat-label{ margin-top:8px; color:var(--light-soft); font-size:.95rem; }
.stat-label strong{ color:#fff; }
.epassi-chip{ margin-top:auto; align-self:flex-start; background:#fff; border-radius:10px; padding:7px 11px; }
.epassi-chip img{ width:118px; max-width:46vw; height:auto; display:block; }

.hero-video{ min-height:260px; }
.hero-video video{ transition:transform .5s var(--ease); }
.hero-video:hover video{ transform:scale(1.05); }
.hero-video::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(13,27,42,0), rgba(13,27,42,.14));
}
.play-btn{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2;
  display:inline-flex; align-items:center; justify-content:center;
  width:62px; height:62px; border-radius:50%; color:var(--navy);
  background:var(--gold); box-shadow:0 8px 24px rgba(0,0,0,.3);
  transition:transform .25s var(--ease);
}
.play-btn svg{ margin-left:3px; }
.play-btn.lg{ width:74px; height:74px; }
.hero-video:hover .play-btn,
.media-card:hover .play-btn{ transform:translate(-50%,-50%) scale(1.08); }
.hero-video-cap{
  position:absolute; left:20px; bottom:20px; z-index:2; color:#fff;
  font-family:var(--font-head); font-weight:700; font-size:1.05rem; line-height:1.15;
}

/* ----------------------------- Marquee ---------------------------- */
.marquee{
  background:var(--gold); color:var(--navy);
  padding:16px 0; overflow:hidden; white-space:nowrap;
  border-block:1px solid rgba(13,27,42,.12);
}
.marquee-track{
  display:inline-flex; gap:0; align-items:center;
  animation:marquee 32s linear infinite; will-change:transform;
}
.marquee-track span{
  font-family:var(--font-head); font-weight:800; font-size:clamp(1.1rem,2.4vw,1.7rem);
  letter-spacing:.01em; padding:0 .55em; text-transform:none;
}
.marquee-track span::after{ content:"·"; margin-left:1.1em; opacity:.5; }
.marquee-track .muted{ color:rgba(13,27,42,.42); }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* --------------------------- Was ist Padel ------------------------ */
.sec-padel{ background:var(--bg); }
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px); align-items:center; }
.split-text .pill{ margin-bottom:14px; }
.split-text h2{ margin-bottom:18px; }
.split-text p{ color:var(--ink-soft); }
.check-list{ margin:22px 0 28px; display:grid; gap:12px; }
.check-list li{ position:relative; padding-left:34px; font-weight:500; }
.check-list li::before{
  content:""; position:absolute; left:0; top:1px;
  width:22px; height:22px; border-radius:50%;
  background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230D1B2A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4L19 7'/%3E%3C/svg%3E") center/14px no-repeat;
}
.split-media .media-card{ aspect-ratio:4/3.2; }
.media-card video{ transition:transform .5s var(--ease); }
.media-card:hover video{ transform:scale(1.04); }
.media-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(13,27,42,.05),rgba(13,27,42,.4)); }
.glass-bar{
  position:absolute; left:16px; right:16px; bottom:16px; z-index:2;
  display:flex; flex-direction:column; gap:2px;
  padding:14px 18px; border-radius:var(--radius-sm); color:#fff;
  background:rgba(13,27,42,.34);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,255,255,.18);
}
.glass-bar strong{ font-family:var(--font-head); font-size:1.05rem; }
.glass-bar span{ font-size:.88rem; color:rgba(255,255,255,.82); }

/* ----------------------------- Angebote --------------------------- */
.sec-angebote{ background:var(--cream); }
.cards-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); }
.card{
  position:relative; aspect-ratio:3/4.1; border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow-sm); transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.card img,
.card video{ width:100%; height:100%; object-fit:cover; transition:transform .55s var(--ease); }
.card video{ position:absolute; inset:0; }
.card::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(13,27,42,0) 40%,rgba(13,27,42,.5)); }
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.card:hover img,
.card:hover video{ transform:scale(1.06); }
.card-ico{
  position:absolute; top:14px; left:14px; z-index:2;
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:12px; color:var(--navy);
  background:var(--gold);
}
.card-label{
  position:absolute; left:12px; right:12px; bottom:12px; z-index:2;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:14px 16px; border-radius:var(--radius-sm); color:#fff;
}
.card-title{ font-family:var(--font-head); font-weight:700; font-size:1.08rem; line-height:1.15; }
.card-arrow{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:50%; background:var(--gold); color:var(--navy);
  transition:transform .25s var(--ease);
}
.card:hover .card-arrow{ transform:rotate(45deg); }

/* Vierte „Alle Angebote"-Kachel (solide statt Foto) */
.card-all{ background:var(--navy); display:flex; align-items:center; justify-content:center; text-align:center; }
.card-all::after{ display:none; }
.card-all-inner{ display:flex; flex-direction:column; align-items:center; gap:14px; padding:24px; color:#fff; }
.card-all-arrow{ display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:50%; background:var(--gold); color:var(--navy); transition:transform .25s var(--ease); }
.card-all:hover .card-all-arrow{ transform:rotate(45deg); }
.card-all-title{ font-family:var(--font-head); font-weight:700; font-size:1.25rem; line-height:1.15; }
.card-all-sub{ color:rgba(255,255,255,.68); font-size:.9rem; }

/* ------------------------------ USP ------------------------------- */
.sec-usp{ background:var(--navy); color:#fff; }
.usp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
.usp-card{ position:relative; min-height:440px; border-radius:var(--radius-lg); overflow:hidden; display:flex; }
.usp-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.usp-card::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(11,22,36,.55) 0%, rgba(11,22,36,.86) 100%);
}
.usp-inner{
  position:relative; z-index:2; margin-top:auto; width:100%;
  padding:clamp(22px,2.6vw,34px);
}
.usp-tag{
  display:inline-block; margin-bottom:14px; padding:.4em .9em; border-radius:999px;
  font-family:var(--font-head); font-weight:700; font-size:.78rem;
  background:var(--gold); color:var(--navy);
}
.usp-inner h3{ color:#fff; font-size:clamp(1.4rem,2.5vw,1.9rem); }
.usp-inner p{ color:rgba(255,255,255,.85); margin:14px 0 22px; max-width:46ch; }

/* --------------------------- Community ---------------------------- */
.sec-community{ background:var(--bg); }
.community-card{ position:relative; min-height:480px; border-radius:var(--radius-lg); overflow:hidden; display:flex; align-items:center; }
.community-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.community-inner{
  position:relative; z-index:2; margin:clamp(18px,3vw,40px);
  max-width:560px; padding:clamp(26px,3vw,40px); border-radius:var(--radius);
}
.avatars.lg img, .avatars.lg .avatars-more{ width:50px; height:50px; border-color:rgba(255,255,255,.5); }
.community-inner h2{ color:#fff; margin:20px 0 14px; }
.community-inner p{ color:rgba(255,255,255,.86); margin-bottom:24px; }
.community-cta{ display:flex; flex-wrap:wrap; gap:10px; }

/* ----------------------------- Events ----------------------------- */
.sec-events{ background:var(--cream); }
.events-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
/* Breites Feature über die volle Reihe, Inhalt seitlich (horizontal) */
.event-feature{ grid-column:1 / -1; position:relative; min-height:380px; border-radius:var(--radius-lg); overflow:hidden; display:flex; }
.event-feature img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.event-feature::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(11,22,36,.92) 0%, rgba(11,22,36,.64) 44%, rgba(11,22,36,.12) 100%); }
.event-feat-content{
  position:relative; z-index:2; display:flex; flex-direction:column; justify-content:center; gap:14px;
  max-width:560px; padding:clamp(26px,3.4vw,52px); color:#fff;
}
.event-feat-content h3{ color:#fff; font-size:clamp(1.5rem,2.6vw,2.1rem); }
.event-feat-content p{ color:rgba(255,255,255,.85); max-width:44ch; }
.event-tags{ display:flex; flex-wrap:wrap; gap:8px; }
.event-tags span{
  padding:.4em .85em; border-radius:999px; font-size:.78rem; font-weight:600; color:#fff;
  background:rgba(255,255,255,.14); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.28);
}
.event-tags.sm{ position:relative; z-index:2; padding:14px; }
.event-meta{ display:grid; gap:8px; margin-top:4px; }
.event-meta li{ display:flex; align-items:center; gap:10px; font-size:.92rem; color:rgba(255,255,255,.92); }
.event-meta svg{ color:var(--gold); flex:0 0 auto; }

/* CTA jetzt als kräftige Gold-Karte (Akzent / Abwechslung) */
.event-cta{ padding:clamp(26px,3vw,38px); display:flex; flex-direction:column; justify-content:center;
  background:var(--gold); color:var(--navy); }
.event-cta h3{ color:var(--navy); }
.event-cta p{ color:rgba(13,27,42,.74); margin:12px 0 22px; }
.event-cta .btn{ align-self:flex-start; }

.event-small{ position:relative; min-height:200px; border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; }
.event-small img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); }
.event-small:hover img{ transform:scale(1.06); }
.event-small::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(13,27,42,.05),rgba(13,27,42,.45)); }
.event-sm-label{
  position:relative; z-index:2; margin:12px; margin-top:auto; padding:14px 16px;
  border-radius:var(--radius-sm); color:#fff; display:flex; flex-direction:column; gap:2px;
}
.event-sm-label strong{ font-family:var(--font-head); font-size:1.02rem; }
.event-sm-label span{ font-size:.85rem; color:rgba(255,255,255,.82); }

/* --------------------------- Vorteile ----------------------------- */
.sec-features{ background:var(--bg); }
.features-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap); }
.feature{
  position:relative; overflow:hidden;
  background:#fff; border-radius:var(--radius); padding:30px 28px 28px;
  border:1px solid var(--line); transition:.35s var(--ease);
}
.feature:hover{ transform:translateY(-6px); background:var(--navy); border-color:var(--navy); box-shadow:var(--shadow); }
.feature-num{
  position:absolute; right:18px; bottom:0;
  font-family:var(--font-head); font-weight:800; font-size:4.4rem; line-height:1;
  color:var(--gold); opacity:.16; pointer-events:none; transition:.35s var(--ease);
}
.feature:hover .feature-num{ color:#fff; opacity:.13; }
.feature-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:58px; height:58px; border-radius:16px; color:var(--navy);
  background:var(--gold); margin-bottom:20px;
}
.feature h3{ position:relative; font-size:1.18rem; margin-bottom:8px; transition:color .35s; }
.feature p{ position:relative; color:var(--ink-soft); font-size:.95rem; transition:color .35s; }
.feature:hover h3{ color:#fff; }
.feature:hover p{ color:var(--light-soft); }

/* ---------------------------- Kontakt ----------------------------- */
.sec-contact{ background:var(--cream); }
.contact-card{
  display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(24px,3vw,44px);
  padding:clamp(26px,3vw,44px); border-radius:var(--radius-lg);
  background:var(--navy); align-items:stretch;
}
.contact-info{ display:flex; flex-direction:column; align-items:flex-start; }
.contact-info .hours{ margin-top:8px; align-self:stretch; }
.contact-info .pill{ align-self:flex-start; margin-bottom:14px; }
.contact-info .btn{ align-self:flex-start; margin-top:24px; }
.contact-map{ display:flex; flex-direction:column; }
.map-card{
  position:relative; display:block; flex:1; min-height:300px;
  border-radius:var(--radius); overflow:hidden; border:1px solid var(--line-dark);
}
.map-card img{ width:100%; height:100%; min-height:300px; object-fit:cover; transition:transform .5s var(--ease); }
.map-card:hover img{ transform:scale(1.04); }
.map-pill{
  position:absolute; left:16px; bottom:16px; display:inline-flex; align-items:center; gap:.5em;
  background:var(--gold); color:var(--navy); font-family:var(--font-head); font-weight:700;
  font-size:.82rem; padding:.6em 1.1em; border-radius:999px; box-shadow:var(--shadow-sm);
  transition:background .2s;
}
.map-card:hover .map-pill{ background:var(--gold-2); }
.map-credit{ margin-top:10px; font-size:.72rem; color:var(--light-soft); text-align:right; }
.contact-col .pill{ margin-bottom:16px; }
.contact-card h2{ color:#fff; }
.contact-addr{ color:var(--light-soft); margin:16px 0 22px; font-size:1.05rem; line-height:1.7; }
.contact-links{ display:flex; flex-direction:column; gap:12px; }
.contact-links a{ display:inline-flex; align-items:center; gap:10px; color:#fff; font-weight:500; width:max-content; }
.contact-links svg{ color:var(--gold); flex:0 0 auto; }
.contact-hours h3{ color:#fff; margin-bottom:18px; }
.hours{ display:grid; gap:14px; margin-bottom:24px; }
.hours li{ display:flex; flex-direction:column; gap:2px; padding-bottom:14px; border-bottom:1px solid var(--line-dark); }
.hours li span{ color:var(--light-soft); font-size:.9rem; }
.hours li strong{ font-family:var(--font-head); font-size:1.15rem; color:var(--gold); }

/* --------------------------- Footer-CTA --------------------------- */
.footer-cta{
  background:radial-gradient(120% 130% at 50% 0%, var(--navy-3), var(--navy) 60%);
  color:#fff; position:relative;
}
.footer-cta-inner{
  display:grid; grid-template-columns:1.2fr .8fr; align-items:center;
  gap:24px; padding:clamp(40px,6vw,70px) 0;
}
.cta-text h2{ color:#fff; }
.cta-text p{ color:var(--light-soft); margin:16px 0 28px; max-width:42ch; }
.cta-player{
  align-self:end; justify-self:center;
  width:min(360px,90%); aspect-ratio:3/4; object-fit:cover;
  object-position:top center; border-radius:var(--radius-lg);
  margin-top:clamp(-110px,-7vw,-40px);
  -webkit-mask-image:linear-gradient(180deg,#000 80%,transparent);
          mask-image:linear-gradient(180deg,#000 80%,transparent);
}

/* ----------------------------- Footer ----------------------------- */
.site-footer{ background:var(--cream); color:var(--ink); padding-top:clamp(48px,6vw,72px); }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:clamp(28px,4vw,48px); padding-bottom:48px; }
.footer-logo{ display:inline-flex; align-items:center; border-radius:var(--radius-sm); overflow:hidden; line-height:0; }
.footer-logo img{ height:144px; width:auto; display:block; }

/* Partner-Logos – je Logo eine eigene Kachel (die Logo-Hintergründe sind unterschiedlich hell/dunkel) */
.partner-lead{ text-align:center; margin:clamp(40px,5vw,60px) 0 0; color:var(--ink-soft); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:.8rem; }
.partner-logos{ display:flex; flex-wrap:wrap; justify-content:center; align-items:stretch; gap:16px; margin-top:20px; }
.partner-logo{ display:flex; align-items:center; justify-content:center; flex:0 1 190px; min-height:100px; padding:20px 28px; border-radius:var(--radius-sm); }
.partner-logo img{ max-height:52px; max-width:140px; width:auto; height:auto; object-fit:contain; display:block; }
.pl-light{ background:#fff; border:1px solid var(--line); }
.pl-dark{ background:var(--navy); }
@media (max-width:560px){ .partner-logo{ flex-basis:44%; min-height:78px; padding:14px 16px; } .partner-logo img{ max-height:38px; max-width:100px; } }
.footer-tag{ color:var(--ink-soft); margin:16px 0 20px; max-width:34ch; font-size:.95rem; }
.footer-social{ display:flex; gap:10px; }
.footer-social a{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%; color:var(--navy);
  border:1px solid var(--line); transition:.2s;
}
.footer-social a:hover{ background:var(--navy); color:#fff; border-color:var(--navy); }
.footer-col h4{ font-family:var(--font-head); font-size:1rem; margin-bottom:16px; }
.footer-col a{ display:block; color:var(--ink-soft); padding:5px 0; font-size:.93rem; transition:color .2s; }
.footer-col a:hover{ color:var(--gold); }
.footer-contact p{ color:var(--ink-soft); font-size:.93rem; line-height:1.8; }
.footer-contact a{ color:var(--ink-soft); }
.footer-contact a:hover{ color:var(--gold); }
.footer-hours{ margin-top:12px; font-weight:600; color:var(--ink); }
.footer-hours span{ display:block; }

.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  padding:22px 0; border-top:1px solid var(--line); font-size:.88rem; color:var(--ink-soft);
}
/* Drei Links (Impressum · Datenschutz · Teilnahmebedingungen) passen auf 320px
   nicht in eine Zeile und haben die Footer-Zeile über den Rand gedrückt. */
.footer-legal{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px 20px; }
.footer-legal a:hover{ color:var(--gold); }

/* --------------------------- Scroll-Top --------------------------- */
.to-top{
  position:fixed; right:22px; bottom:22px; z-index:90;
  width:50px; height:50px; border-radius:50%; color:var(--navy);
  background:var(--gold); border:0; box-shadow:var(--shadow-sm);
  display:inline-flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transform:translateY(14px); transition:.3s var(--ease);
}
.to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.to-top:hover{ background:var(--gold-2); transform:translateY(-3px); }

/* ----------------------------- Toast ------------------------------ */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,20px);
  background:var(--navy); color:#fff; padding:14px 22px; border-radius:14px;
  font-size:.92rem; box-shadow:var(--shadow); z-index:130;
  opacity:0; visibility:hidden; transition:.3s var(--ease); max-width:90vw; text-align:center;
}
.toast.show{ opacity:1; visibility:visible; transform:translate(-50%,0); }

/* ---------------------------- Reveal ------------------------------ */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width:1080px){
  .hero{ min-height:0; display:block; padding-top:clamp(24px,4vw,40px); }
  .hero-grid{ grid-template-columns:1fr 1fr; grid-auto-rows:auto; height:auto; min-height:0; max-height:none; }
  .hero-intro{ grid-column:1 / -1; }
  .hero-video{ min-height:340px; }
  .cards-grid{ grid-template-columns:repeat(2,1fr); }
  .features-grid{ grid-template-columns:repeat(2,1fr); }
  .usp-grid{ grid-template-columns:repeat(2,1fr); }
}

/* 2+1-Umbruch: einzelne dritte Kachel zentrieren statt linksbündig */
@media (min-width:901px) and (max-width:1080px){
  .usp-grid > :nth-child(3):last-child{ grid-column:1 / -1; max-width:calc(50% - var(--gap) / 2); margin-inline:auto; }
}

/* In diesem Band ist die Desktop-Navigation noch aktiv (Burger erst ab 900px
   abwärts), aber Nav + Sprachwahl + Buchen-Knopf + WhatsApp passen nicht mehr
   locker in eine Zeile. Darum hier alles etwas kompakter – sonst bricht ein
   Menüpunkt um oder die Seite scrollt horizontal. */
@media (min-width:901px) and (max-width:1320px){
  .header-inner{ gap:12px; }
  .logo img{ height:48px; }
  .nav{ margin-left:0; }
  .nav-list{ gap:0; }
  .nav-list > li > a{ padding:.6em .42em; font-size:.86rem; }
  .header-actions{ gap:8px; }
  .header-actions .ico:not(.ico-wa){ display:none; }   /* Instagram steht auch im Footer */
  .header-cta{ padding:.62em .9em; font-size:.8rem; }
}

@media (max-width:900px){
  /* Mobile-Nav */
  .burger{ display:flex; }
  .nav{
    position:fixed; inset:0 0 0 auto; width:min(360px,86vw);
    background:var(--navy); margin:0; padding:90px 22px 32px;
    transform:translateX(100%); transition:transform .35s var(--ease);
    overflow-y:auto; z-index:99; box-shadow:-20px 0 60px rgba(0,0,0,.4);
  }
  body.menu-open .nav{ transform:translateX(0); }
  .nav-list{ flex-direction:column; align-items:stretch; gap:2px; }
  .nav-list > li > a{ font-size:1.05rem; padding:.85em .6em; justify-content:space-between; }
  .nav-list > li{ border-bottom:1px solid var(--line-dark); }
  .submenu{
    position:static; opacity:1; visibility:visible; transform:none;
    background:transparent; border:0; box-shadow:none; padding:0 0 8px 12px;
    max-height:0; overflow:hidden; transition:max-height .3s var(--ease);
  }
  .has-sub.open .submenu{ max-height:320px; }
  .has-sub.open .caret{ transform:rotate(180deg); }
  .header-cta-wa{ display:none; }
  /* Home-Hervorhebung: nur Goldton, kein hoher Block der an den nächsten Punkt stößt */
  .nav-list > li > a.is-current{ background:transparent; color:var(--gold); }
  .nav-close{
    display:inline-flex; align-items:center; justify-content:center;
    position:absolute; top:18px; right:18px; width:42px; height:42px;
    border-radius:12px; background:rgba(255,255,255,.07);
    border:1px solid var(--line-dark); color:#fff;
  }
  .nav-cta{ display:inline-flex; justify-content:center; width:100%; margin-top:22px; }
  .nav-cta-wa{ margin-top:10px; }

  .split{ grid-template-columns:1fr; }
  .split-media{ order:-1; }
  .usp-grid{ grid-template-columns:1fr; }
  .events-grid{ grid-template-columns:1fr; }
  .event-feature{ grid-row:auto; min-height:0; }
  .event-feat-content{ max-width:none; padding:clamp(22px,5vw,30px); gap:12px; }
  /* Gradient mobil von unten, da Inhalt jetzt knapp sitzt */
  .event-feature::after{ background:linear-gradient(180deg, rgba(11,22,36,.35) 0%, rgba(11,22,36,.78) 100%); }
  .contact-card{ grid-template-columns:1fr; }
  .footer-cta-inner{ grid-template-columns:1fr; text-align:center; }
  .cta-text p{ margin-inline:auto; }
  .cta-text .btn{ }
  .cta-player{ margin-top:24px; order:-1; width:min(280px,70%); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
}

@media (max-width:560px){
  body{ font-size:16px; }
  h1, h2{ line-height:1.24; }
  .hero-grid{ grid-template-columns:1fr; }
  .hero-mid-bottom{ grid-template-columns:1fr 1fr; }
  .cards-grid{ grid-template-columns:1fr; }
  .cards-grid .card{ aspect-ratio:3 / 2.1; }   /* mobil deutlich flacher */
  .features-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr; }
  .footer-bottom{ flex-direction:column; text-align:center; }
  .sec-head{ align-items:flex-start; }
  .hero-cta .btn{ width:100%; justify-content:center; }
  /* Die Buttons im Abschluss-CTA sind nowrap und damit breiter als 320px – ihre
     Mindestbreite hat die ganze Sektion seitlich rausgeschoben. Hier dürfen die
     Labels umbrechen und die Buttons die volle Breite nehmen. */
  .footer-cta .btn{ width:100%; justify-content:center; white-space:normal; text-align:center; }
  /* Gleiche Falle in den Abschluss-Baendern der Unterseiten: "WhatsApp-Community
     beitreten" ist nowrap 381px breit und schob die Seite bei 320px seitlich raus. */
  .cta-actions .btn, .page-hero-actions .btn{ width:100%; justify-content:center; white-space:normal; text-align:center; }
  .header-actions .ico:not(.ico-wa){ display:none; }   /* Platz sparen: Insta liegt im Footer */
  .header-inner{ gap:12px; }
  /* Ab hier zaehlt jeder Pixel: Buchen-Knopf auf das kurze Label eindampfen. */
  .header-cta-book .cta-long{ display:none; }
  .header-cta-book .cta-short{ display:inline; }
  .header-cta-book{ padding:.6em .85em; gap:.45em; }
  .header-actions{ gap:8px; }
}

@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .marquee-track{ animation:none; }
  html{ scroll-behavior:auto; }
}

/* =================================================================
   UNTERSEITEN – auf der Design-Grundlage der Startseite
   (gleiche Tokens, Glas-Sprache, dünn/fett-Headings, Gold/Navy)
   ================================================================= */

/* --- Kompakter Seitenkopf statt Bento-Hero --- */
.page-hero{
  position:relative; background:var(--navy); color:#fff; overflow:hidden;
  padding:clamp(40px,6vw,76px) 0 clamp(40px,5.5vw,64px);
}
.page-hero::before{                       /* dezenter Gold-Schimmer (kein Box-Shadow) */
  content:""; position:absolute; right:-12%; top:-50%; width:62%; height:200%;
  background:radial-gradient(closest-side, rgba(226,172,85,.16), transparent 70%);
  pointer-events:none; z-index:1;
}
.page-hero .wrap{ position:relative; z-index:3; }
.page-hero-bg{ position:absolute; inset:0; z-index:0; }
.page-hero-bg img{ width:100%; height:100%; object-fit:cover; }
.page-hero.has-media::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(11,22,36,.72) 0%, rgba(11,22,36,.9) 100%);
}
.page-hero-inner{ max-width:780px; }
.page-hero h1{ color:#fff; margin-top:16px; overflow-wrap:break-word; hyphens:auto; }
.page-hero .lead{ color:var(--light-soft); margin-top:18px; max-width:60ch;
  font-size:clamp(1.02rem,1.5vw,1.18rem); }
.page-hero-actions{ margin-top:28px; display:flex; flex-wrap:wrap; gap:12px; }
.page-hero .pill{ background:rgba(255,255,255,.1); color:#fff; }
.page-hero .pill-gold{ background:rgba(226,172,85,.18); color:var(--gold); }

/* Breadcrumb */
.breadcrumb{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5em;
  font-family:var(--font-head); font-weight:600; font-size:.8rem; color:var(--light-soft);
}
.breadcrumb a{ color:var(--light-soft); transition:color .2s; }
.breadcrumb a:hover{ color:#fff; }
.breadcrumb .sep{ opacity:.4; }
.breadcrumb .here{ color:var(--gold); }

/* Aktiver Nav-Zustand auf Unterseiten */
.submenu a.is-current{ color:#fff; background:rgba(255,255,255,.07); }

/* Intro-Zeile über Rastern */
.lede{ max-width:62ch; color:var(--ink-soft); font-size:1.06rem; }
.lede.on-dark{ color:var(--light-soft); }

/* Generische Inhalts-Panels */
.panel{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:clamp(24px,3vw,36px);
}
.panel-cream{ background:var(--cream); border-color:transparent; }
.panel-navy{ background:var(--navy); border-color:transparent; color:#fff; }
.panel-navy h3{ color:#fff; } .panel-navy p{ color:var(--light-soft); }
.panel h3{ margin-bottom:10px; }
.panel > p{ color:var(--ink-soft); }
.panel-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap); align-items:start; }
.panel-grid.cols-3{ grid-template-columns:repeat(3,1fr); }

/* Icon-Liste (in Panels / Spalten) */
.icon-list{ display:grid; gap:16px; }
.icon-list li{ display:flex; gap:14px; align-items:flex-start; }
.icon-list .li-ico{
  flex:0 0 auto; width:42px; height:42px; border-radius:12px;
  background:var(--gold); color:var(--navy);
  display:inline-flex; align-items:center; justify-content:center;
}
.icon-list .li-txt strong{ font-family:var(--font-head); display:block; margin-bottom:2px; }
.icon-list .li-txt span{ color:var(--ink-soft); font-size:.95rem; }
.panel-navy .icon-list .li-txt span{ color:var(--light-soft); }

/* Steps (nummeriert) */
.steps{ display:grid; gap:var(--gap); grid-template-columns:repeat(4,1fr); }
.step{
  position:relative; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); padding:30px 26px 26px;
}
.step-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:48px; height:48px; border-radius:50%; background:var(--navy); color:var(--gold);
  font-family:var(--font-head); font-weight:800; font-size:1.15rem; margin-bottom:18px;
}
.step h3{ font-size:1.12rem; margin-bottom:8px; }
.step p{ color:var(--ink-soft); font-size:.95rem; }

/* FAQ (natives <details>) */
.faq{ display:grid; gap:12px; max-width:880px; margin-inline:auto; }
.faq-item{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; }
.faq-item summary{
  list-style:none; cursor:pointer; padding:20px 22px;
  font-family:var(--font-head); font-weight:600; font-size:1.04rem;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:""; flex:0 0 auto; width:11px; height:11px;
  border-right:2px solid var(--gold); border-bottom:2px solid var(--gold);
  transform:rotate(45deg); transition:transform .25s var(--ease);
}
.faq-item[open] summary::after{ transform:rotate(225deg); }
.faq-item .faq-body{ padding:0 22px 20px; color:var(--ink-soft); }
.faq-item .faq-body p + p{ margin-top:10px; }

/* CTA-Band (Seitenabschluss vor Footer) */
.cta-band{ background:radial-gradient(120% 130% at 50% 0%, var(--navy-3), var(--navy) 62%); color:#fff; }
.cta-band .wrap{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px;
  padding:clamp(48px,7vw,88px) 0;
}
.cta-band .pill{ background:rgba(226,172,85,.18); color:var(--gold); }
.cta-band h2{ color:#fff; max-width:18ch; }
.cta-band p{ color:var(--light-soft); max-width:52ch; }
.cta-band .cta-actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:6px; }

/* Foto-Splitkarte (Text + Bild) – nutzt vorhandenes .split, hier Bildkarte */
.media-tall{ position:relative; aspect-ratio:4/3.4; border-radius:var(--radius-lg); overflow:hidden; }
.media-tall img{ width:100%; height:100%; object-fit:cover; }
.media-tall .glass-chip{ top:auto; bottom:14px; }

/* Kennzahl-/Fakten-Reihe */
.facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap); }
.fact{ background:var(--cream); border-radius:var(--radius); padding:26px 24px; }
.fact-num{ font-family:var(--font-head); font-weight:800; font-size:clamp(1.6rem,2.6vw,2.2rem); color:var(--gold); line-height:1; }
.fact-label{ display:block; margin-top:8px; color:var(--ink-soft); font-size:.95rem; }

/* Vision-/Statement-Band (Team-Stimme, ohne erfundene Person) */
.statement{ background:var(--navy); color:#fff; }
.statement .wrap{ max-width:920px; text-align:center; }
.statement blockquote{
  margin:0; font-family:var(--font-head); font-weight:300; line-height:1.3;
  font-size:clamp(1.4rem,3vw,2.2rem); color:#fff;
}
.statement blockquote b{ font-weight:700; }
.statement .by{ display:block; margin-top:22px; color:var(--gold); font-family:var(--font-head); font-weight:600; font-size:.95rem; letter-spacing:.02em; }

/* --- Rechtstexte (Impressum / Datenschutz) --- */
.legal{ background:var(--bg); }
.prose{ max-width:840px; }
.prose h2{ font-size:clamp(1.25rem,2.3vw,1.6rem); margin:40px 0 12px; }
.prose > h2:first-child{ margin-top:0; }
.prose h3{ font-size:1.08rem; margin:24px 0 8px; }
.prose p{ color:var(--ink-soft); margin-bottom:14px; }
.prose strong{ color:var(--ink); }
.prose a{ color:var(--navy); text-decoration:underline; text-decoration-color:var(--gold); text-underline-offset:2px; }
.prose ul.dash{ margin:0 0 16px; display:grid; gap:8px; }
.prose ul.dash li{ position:relative; padding-left:20px; color:var(--ink-soft); }
.prose ul.dash li::before{ content:"–"; position:absolute; left:0; color:var(--gold); }
.prose .ph{ background:rgba(226,172,85,.2); border-radius:4px; padding:0 .3em; font-style:normal; }
.prose .updated{ color:var(--ink-soft); font-size:.9rem; margin-bottom:28px; }

/* --- Kontaktformular (webabo-Mailer-Modul) --- */
.contact-form{
  display:grid; gap:16px; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); padding:clamp(24px,3vw,34px);
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field{ display:grid; gap:.4rem; }
.field label{ font-family:var(--font-head); font-weight:600; font-size:.9rem; }
.field input,
.field textarea{
  font-family:var(--font-body); font-size:16px; color:var(--ink);
  background:var(--cream); border:1px solid var(--line); border-radius:12px;
  padding:.8em .9em; width:100%; transition:border-color .2s, box-shadow .2s;
}
.field textarea{ resize:vertical; min-height:130px; }
.field input:focus,
.field textarea:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(226,172,85,.22); }
.contact-form .btn{ justify-self:start; margin-top:.2rem; }
.form-note{ font-size:.82rem; color:var(--ink-soft); }
.form-note a{ color:var(--navy); text-decoration:underline; text-decoration-color:var(--gold); }

/* --- Unterseiten: Responsive --- */
@media (max-width:1080px){
  .steps{ grid-template-columns:repeat(2,1fr); }
  .panel-grid.cols-3{ grid-template-columns:1fr 1fr; }
  .facts{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:900px){
  .panel-grid,
  .panel-grid.cols-3{ grid-template-columns:1fr; }
  .facts{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .steps{ grid-template-columns:1fr; }
  .form-row{ grid-template-columns:1fr; }
  .page-hero-actions .btn{ width:100%; justify-content:center; }
}

/* --- Sprach-Hinweis-Popup (EN/ES noch nicht verfügbar) --- */
body.modal-open{ overflow:hidden; overscroll-behavior:contain; }
.lang-modal{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center; padding:24px;
  background:rgba(13,27,42,.6);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; visibility:hidden;
  transition:opacity .25s var(--ease), visibility .25s var(--ease);
}
.lang-modal.open{ opacity:1; visibility:visible; }
.lang-modal-card{
  position:relative; width:min(440px,100%); text-align:center;
  background:#fff; color:var(--ink); border-radius:var(--radius-lg);
  padding:clamp(30px,5vw,44px); box-shadow:var(--shadow);
  transform:translateY(14px) scale(.97); transition:transform .3s var(--ease);
}
.lang-modal.open .lang-modal-card{ transform:none; }
.lang-modal-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:64px; height:64px; border-radius:50%; margin-bottom:20px;
  background:var(--gold); color:var(--navy);
}
.lang-modal-card h3{ font-size:clamp(1.3rem,2.4vw,1.6rem); margin-bottom:12px; }
.lang-modal-card p{ color:var(--ink-soft); margin-bottom:24px; }
.lang-modal-ok{ width:100%; justify-content:center; }
.lang-modal-x{
  position:absolute; top:14px; right:14px; width:38px; height:38px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--cream); color:var(--ink-soft); border:0; transition:.2s;
}
.lang-modal-x:hover{ background:var(--cream-2); color:var(--ink); }
@media (prefers-reduced-motion:reduce){
  .lang-modal, .lang-modal-card{ transition:none; }
}

/* --- WhatsApp-Community: dezentes Slide-in (unten rechts) --- */
.wa-pop{
  position:fixed; right:22px; bottom:88px; z-index:120;   /* sitzt über dem Scroll-to-top-Button */
  width:min(330px, calc(100vw - 32px));
  background:#fff; color:var(--ink);
  border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:20px 20px 18px;
  opacity:0; visibility:hidden; transform:translateY(16px);
  transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s var(--ease);
}
.wa-pop.show{ opacity:1; visibility:visible; transform:none; }
.wa-pop-head{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.wa-pop-ico{
  flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:50%; background:#25D366; color:#fff;
}
.wa-pop-head strong{ font-family:var(--font-head); font-size:1.08rem; line-height:1.2; }
.wa-pop p{ color:var(--ink-soft); font-size:.92rem; margin-bottom:16px; }
.wa-pop .btn{ width:100%; justify-content:center; }
.wa-pop .btn + .btn{ margin-top:8px; }
.wa-pop.gw .wa-pop-ico{ background:var(--gold); color:var(--navy); }
.wa-pop-x{
  position:absolute; top:10px; right:10px; width:30px; height:30px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:transparent; color:var(--ink-soft); border:0; transition:.2s;
}
.wa-pop-x:hover{ background:var(--cream); color:var(--ink); }
/* Handy: Bottom-Sheet – volle Breite, bündig unten, nur oben gerundet,
   fährt von ganz unten hoch und überdeckt den Nach-oben-Button. */
@media (max-width:560px){
  .wa-pop{
    left:0; right:0; bottom:0; width:auto;
    border-radius:var(--radius) var(--radius) 0 0;
    padding:22px 20px calc(26px + env(safe-area-inset-bottom, 0px));
    transform:translateY(100%);
    box-shadow:0 -12px 32px rgba(13,27,42,.20);
  }
  .wa-pop.show{ transform:translateY(0); }
}
@media (prefers-reduced-motion:reduce){ .wa-pop{ transition:none; } }

/* =================================================================
   GEWINNSPIEL-LANDINGPAGE (/gewinnspiel)
   Ziel aller Meta-Anzeigen zum Eröffnungsgewinnspiel. Mobil-first:
   der WhatsApp-Button muss auf einem iPhone SE ohne Scrollen sichtbar
   sein – darum kompaktere Hero-Paddings und kleineres H1 als sonst.
   ================================================================= */

/* Hinweis-Band „Aktion beendet“ (steht im HTML auskommentiert bereit) */
.gw-ended{
  background:var(--gold); color:var(--navy);
  padding:14px 0; font-weight:600;
}
.gw-ended p{ margin:0; font-size:.98rem; }

/* ------------------------------ Hero ------------------------------ */
.gw-hero{ padding:clamp(26px,4.5vw,64px) 0 clamp(34px,5vw,60px); }
.gw-hero .pill{ margin-top:14px; }
.gw-hero h1{
  font-size:clamp(1.9rem,4.6vw,3.2rem);
  margin-top:14px; text-wrap:balance;
}
/* Dünne erste Zeile / kräftige zweite Zeile – der Umbruch sitzt an der
   Sinngrenze, nicht irgendwo mitten im Satz. */
.gw-hero h1 .thin,
.sec-prizes .sec-head h2 .thin,
.sec-steps .sec-head h2 .thin,
.sec-know .sec-head h2 .thin{ display:block; }
.gw-hero .lead{ margin-top:14px; color:#dbe4ec; max-width:56ch; }

/* WhatsApp-Button: echter <a>-Link, WhatsApp-Grün, mind. 48px hoch,
   auf dem Handy volle Breite. Wird auf der Seite zweimal eingesetzt. */
.btn-wa{ background:#25D366; color:#fff; min-height:52px; }
.btn-wa:hover{ background:#1fbe5a; color:#fff; }
.gw-cta{ margin-top:24px; }
.gw-cta .btn-wa{ font-size:1.06rem; }
.gw-cta-note{
  margin:14px 0 0; max-width:46ch;
  color:var(--light-soft); font-size:.95rem;
}
.gw-cta-center{ display:flex; flex-direction:column; align-items:center; text-align:center; }
.gw-cta-center .gw-cta-note{ color:var(--ink-soft); }

/* ----------------------------- Preise ----------------------------- */
.sec-prizes{ background:var(--cream); }
.prize-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap);
}
.prize{
  display:flex; flex-direction:column; gap:8px;
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 24px 24px;
}
.prize-rank{
  font-family:var(--font-head); font-weight:700; font-size:.82rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);
}
.prize-title{
  font-family:var(--font-head); font-weight:700; line-height:1.2;
  text-wrap:balance;
  font-size:clamp(1.15rem,1.7vw,1.4rem); color:var(--ink);
}
.prize-value{ margin-top:auto; padding-top:6px; color:var(--ink-soft); font-size:.95rem; }

/* 1. Preis optisch hervorgehoben (Gold) */
.prize-top{
  background:var(--navy); border-color:var(--navy); color:#fff;
  box-shadow:var(--shadow-sm); position:relative; overflow:hidden;
}
.prize-top::before{
  content:""; position:absolute; right:-40%; top:-60%; width:120%; height:180%;
  background:radial-gradient(closest-side, rgba(226,172,85,.28), transparent 70%);
  pointer-events:none;
}
.prize-top > *{ position:relative; }
.prize-top .prize-rank{ color:var(--gold); }
.prize-top .prize-title{ color:#fff; }
.prize-top .prize-value{ color:var(--light-soft); }

/* Sternchen-Auflösung: bewusst NICHT kleiner als der Fließtext */
.prize-note{
  max-width:78ch; margin:26px auto 0; text-align:center;
  color:var(--ink-soft); font-size:1rem;
}
.prize-note strong{ color:var(--gold); }

/* --------------------------- So mitmachen -------------------------- */
.sec-steps{ background:var(--bg); }
.gw-steps{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap);
}
.gw-steps li{
  background:var(--cream); border-radius:var(--radius);
  padding:28px 26px; display:flex; flex-direction:column; gap:10px;
}
.step-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%;
  background:var(--gold); color:var(--navy);
  font-family:var(--font-head); font-weight:700; font-size:1.15rem;
}
.gw-steps h3{ font-size:1.2rem; margin-top:4px; }
.gw-steps p{ margin:0; color:var(--ink-soft); }
.sec-steps .gw-cta{ margin-top:clamp(28px,4vw,44px); }

/* --------------------------- Gut zu wissen ------------------------- */
.sec-know{ background:var(--navy); color:#fff; }
.know-grid{
  margin:0; display:grid; grid-template-columns:repeat(4,1fr); gap:var(--gap);
}
.know-item{
  background:rgba(255,255,255,.06); border:1px solid var(--line-dark);
  border-radius:var(--radius-sm); padding:22px 20px;
}
/* Label und Wert immer gestapelt, nie in einer Zeile */
.know-item dt{
  font-family:var(--font-head); font-weight:700; font-size:.82rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--gold);
}
.know-item dd{ margin:8px 0 0; font-size:1.02rem; line-height:1.45; }
.know-notes{ margin-top:clamp(24px,3vw,34px); max-width:74ch; }
.know-notes p{ margin:0 0 10px; color:rgba(255,255,255,.88); }
.know-meta{ font-size:.9rem; color:var(--light-soft) !important; }

/* ----------------------- Teilnahmebedingungen --------------------- */
.sec-terms{ background:var(--bg); }
.gw-terms{
  max-width:880px; margin-inline:auto;
  border:1px solid var(--line); border-radius:var(--radius-sm);
  background:#fff; overflow:hidden;
}
.gw-terms > summary{
  list-style:none; cursor:pointer; position:relative;
  padding:20px 56px 20px 22px;
  font-family:var(--font-head); font-weight:700;
  font-size:clamp(1.1rem,1.8vw,1.3rem);
}
.gw-terms > summary::-webkit-details-marker{ display:none; }
.gw-terms > summary::after{
  content:""; position:absolute; right:24px; top:50%; width:9px; height:9px;
  border-right:2px solid var(--gold); border-bottom:2px solid var(--gold);
  transform:translateY(-70%) rotate(45deg); transition:transform .25s var(--ease);
}
.gw-terms[open] > summary::after{ transform:translateY(-30%) rotate(225deg); }
.gw-terms .prose{ padding:0 22px 26px; max-width:none; }
.gw-terms .prose h2{ font-size:1.12rem; margin:26px 0 8px; }

/* ---------------------------- Responsive -------------------------- */
@media (max-width:1080px){
  .prize-grid{ grid-template-columns:repeat(2,1fr); }
  .know-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
  .gw-steps{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .prize-grid{ grid-template-columns:1fr; }
  .know-grid{ grid-template-columns:1fr; }
  .prize{ padding:22px 20px; }
  .gw-cta .btn-wa{ width:100%; justify-content:center; }
  .prize-note{ text-align:left; }
  .gw-terms > summary{ padding:18px 48px 18px 18px; }
  .gw-terms .prose{ padding:0 18px 22px; }
}

/* =================================================================
   EINWILLIGUNGSVERWALTUNG (Cookie-Consent) — consent.js
   Fabrik-Standard: Karte unten links, Keks über der Ecke,
   aufklappbare Kategorien mit den Details je Dienst.
   Farben kommen aus den CD-Variablen -> folgt der Marke (Gold/Navy).
   ================================================================= */
/* Karte selbst scrollt NICHT und clippt nicht -> der Keks darf über die Ecke
   ragen. Gescrollt wird ausschliesslich innen (.cc-scroll). */
.cc-box{
  position:fixed; left:24px; bottom:24px; z-index:120;
  width:min(422px, calc(100vw - 32px));
  background:#fff; border-radius:16px;
  box-shadow:0 24px 70px -18px rgba(13,27,42,.34), 0 4px 14px -6px rgba(13,27,42,.14);
  opacity:0; visibility:hidden; transform:translateY(14px) scale(.98);
  transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
}
.cc-box.is-open{ opacity:1; visibility:visible; transform:none; }
/* overflow-x explizit gesetzt: sonst macht CSS daraus wegen overflow-y:auto
   ebenfalls auto -> waagerechte Scrollleiste im Banner. */
.cc-scroll{
  max-height:calc(100svh - 48px); overflow-y:auto; overflow-x:hidden;
  padding:26px 24px 24px; border-radius:16px;
}
/* Keks oben rechts, ragt über die Ecke */
.cc-cookie{
  position:absolute; top:-16px; right:-10px; width:58px; height:58px;
  display:grid; place-items:center; font-size:38px; line-height:1;
  filter:drop-shadow(0 6px 12px rgba(13,27,42,.24)); pointer-events:none; user-select:none;
}
.cc-title{
  font-family:var(--font-head); font-size:1.06rem; font-weight:700;
  letter-spacing:-.01em; line-height:1.3; padding-right:44px; color:var(--ink);
}
.cc-body{ margin:.6rem 0 0; color:var(--ink-soft); font-size:.88rem; line-height:1.6; }
.cc-links{ display:flex; flex-wrap:wrap; gap:.3rem 1.15rem; margin-top:1rem; }
.cc-links a{
  color:var(--ink-soft); font-size:.82rem; font-weight:500;
  text-decoration:underline; text-underline-offset:3px;
}
.cc-links a:hover{ color:var(--navy); }

/* Kategorien */
.cc-cats{ margin-top:1.15rem; display:flex; flex-direction:column; gap:2px; }
.cc-cat-row{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:7px 0; }
.cc-toggle-details{
  display:flex; align-items:center; gap:.6rem; background:none; border:0;
  padding:4px 0; text-align:left; flex:1 1 auto; min-width:0; color:inherit;
}
.cc-caret{
  width:0; height:0; flex:0 0 auto;
  border-left:6px solid var(--ink-soft); border-top:4.5px solid transparent;
  border-bottom:4.5px solid transparent; transition:transform .2s var(--ease);
}
.cc-cat.is-open .cc-caret{ transform:rotate(90deg); }
.cc-cat-name{
  font-family:var(--font-head); font-size:.92rem; font-weight:600; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cc-toggle-details:hover .cc-cat-name{ color:var(--navy); }
/* Details (aufklappbar) */
.cc-details{ display:none; padding:.2rem 0 .6rem 1.2rem; }
.cc-cat.is-open .cc-details{ display:block; }
.cc-service{ border-left:2px solid var(--line); padding:.55rem 0 .55rem .85rem; margin-bottom:.5rem; }
.cc-service:last-child{ margin-bottom:0; }
.cc-service h4{ font-size:.84rem; font-weight:700; color:var(--ink); margin-bottom:.35rem; }
.cc-dt{ display:flex; gap:.5rem; font-size:.76rem; line-height:1.5; margin-bottom:.15rem; }
.cc-dt > span{ flex:0 0 66px; color:var(--ink-soft); font-weight:600; }
.cc-dt > div{ flex:1 1 auto; min-width:0; color:var(--ink-soft); overflow-wrap:anywhere; }
.cc-dt code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.72rem;
  background:var(--cream); border-radius:4px; padding:1px 5px; color:var(--ink);
}
.cc-dt a{ color:var(--navy); text-decoration:underline; text-underline-offset:2px; }

/* Buttons
   „Alle zulassen" und „Ablehnen" MÜSSEN gleichwertig aussehen: gleiche Breite,
   gleiche Farbe, gleiche Schriftgrösse, gleiche Polsterung. Ein hervorgehobener
   Zustimmen-Button neben einem blassen Ablehnen-Button ist Nudging – die
   Einwilligung ist dann nicht freiwillig und damit unwirksam. Deshalb teilen
   sich beide dieselbe Klasse .cc-btn-primary und liegen in einer Reihe.
   Nur die feingranulare Auswahl darunter darf zurücktreten (.cc-btn-soft):
   sie ist keine Ablehnung, sondern der ausführliche Weg. */
.cc-btns{ margin-top:1.25rem; display:flex; flex-direction:column; gap:.5rem; }
.cc-btn{
  border:0; border-radius:10px; font-family:var(--font-head); font-weight:700;
  font-size:.9rem; line-height:1.25; padding:14px 12px;
  transition:background .18s var(--ease), color .18s var(--ease);
}
.cc-btn-primary{ background:var(--gold); color:var(--navy); }
.cc-btn-primary:hover{ background:var(--gold-2); }
.cc-btn-row{ display:flex; gap:.5rem; }
/* gleiche Breite unabhängig von der Textlänge – sonst wirkt der längere
   Button dominanter, und genau das soll hier nicht passieren */
.cc-btn-row .cc-btn{ flex:1 1 0; min-width:0; }
.cc-btn-soft{
  background:var(--cream); color:var(--navy); font-weight:600;
  font-size:.85rem; padding:13px 10px;
}
.cc-btn-soft:hover{ background:var(--cream-2); color:var(--ink); }
.cc-btn-wide{ width:100%; }

/* Toggle-Schalter */
.cc-switch{ position:relative; display:inline-block; width:44px; height:25px; flex:0 0 auto; }
.cc-switch input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.cc-switch.is-locked input{ cursor:default; }
.cc-slider{ position:absolute; inset:0; background:#dcdcdc; border-radius:999px; transition:background .2s; }
.cc-slider::before{
  content:""; position:absolute; top:3px; left:3px; width:19px; height:19px;
  background:#fff; border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,.28); transition:transform .2s;
}
.cc-switch input:checked + .cc-slider{ background:var(--gold); }
.cc-switch input:checked + .cc-slider::before{ transform:translateX(19px); }
.cc-switch input:focus-visible + .cc-slider{ outline:2px solid var(--navy); outline-offset:2px; }

/* Handy: volle Breite, damit die Karte den Daumenbereich nicht sprengt.
   Der Nach-oben-Button würde sonst unter der Karte liegen -> solange der
   Banner offen ist, wird er ausgeblendet. */
@media (max-width:520px){
  .cc-box{ left:12px; right:12px; bottom:12px; width:auto; }
  .cc-scroll{ padding:24px 18px 18px; max-height:calc(100svh - 24px); }
}
.cc-box.is-open ~ .to-top{ opacity:0; visibility:hidden; }