/* design2027.css v2 (30.10.2026 abends, erweitert 31.10.2026 für alle Seiten; v2 31.10. abends: Vereinsbonus-Seite verein.php) – Design 2027 nach Bennys Mockups vom 30.10.2026 (dunkles Blau, Weiß, Gelb).
   Nur Layout und Farben: lädt NACH style.css/fix.css/aktion.css und übersteuert. Texte, Preise, Links, Formular, JS bleiben unverändert.
   Eingebunden in index.html, alle Artikel-/Rechts-/Aktiv-Seiten (main.legal), verein.php und aktion_vorlage.php (Vereinsseite /v); Landingpages: design2027-landing.css.
   Kontrast (WCAG): Gelb #FFC629 auf Blau #0B2A4A 9,25:1, Weiß auf Blau 14,54:1, Blau auf Gelb 9,25:1, Grau-Blau #C3D0E0 auf Kartenblau #12365E 7,82:1.
   Gelb nie als Text auf Weiß (1,57:1) – auf hellem Grund Blau #0B2A4A / #1F5FA8.
   Keine vh-Höhen (Ganzseiten-Screenshots), keine fremden Schriften: nur DM Sans aus style.css (300/400/500). CSP-fest: keine Inline-Styles nötig. */

:root{
  --black:#0B2A4A;--gold:#FFC629;--gold2:#FFD45C;--cream:#FFFFFF;--warm:#EAF2FB;
  --grey:#4A5568;--light:#DCE4EE;--card:#12365E;--card-hover:#163F6D;--desc:#C3D0E0;
  --d27-tief:#071D35;--d27-hell:#EAF2FB;--d27-link:#1F5FA8;--d27-linie:#DCE4EE
}
html,body{background:#fff}
:focus-visible{outline-color:var(--d27-link)}

/* ---------- Schrift: Überschriften in DM Sans statt Playfair (Mockup: kräftige Grotesk) ---------- */
.hero h1,.sec-title,.cat-label,.pcard-name,.nav-word,.foot-word,.vb-leiste-titel,.seo-links h2,
.legal h1,.legal h1.pp-h1,.legal h2,.legal h3,.drawer-head h2,.form-success h3,.hero-dlg-head h3,
.ak-seite h1,.ak-seite h2,.ak-seite h3,.ak-codebox b,.ak-preis strong,.ak-paketpreis strong,.ak-verfuegbar strong,.stat-num{
  font-family:'DM Sans',sans-serif;font-weight:500;font-style:normal;letter-spacing:0
}

/* ---------- Kopf Startseite: dunkelblau, Logo, gelber Anfrage-Knopf ---------- */
.topnav{background:var(--d27-tief);border-bottom:0;backdrop-filter:none;padding:.55rem max(1.2rem,calc((100% - 1160px)/2))}
.nav-logo-img{background:#fff;border-radius:8px;padding:2px}
.nav-word{color:#fff;font-size:1.05rem}
.nav-word small{color:var(--gold)}
.nav-links{gap:1.6rem}
.nav-links a{color:#fff;font-size:.86rem;letter-spacing:.02em;text-transform:none}
.nav-links a:hover{color:var(--gold)}
.nav-cta{background:var(--gold);color:var(--black)!important;border-radius:8px;padding:.6rem 1.15rem;font-weight:500}
.nav-cta:hover{background:var(--gold2)}

/* ---------- Hero: Foto Sternenzelt mit dunklem Verlauf, Text links ---------- */
.hero{min-height:0;align-items:flex-start;justify-content:flex-end;text-align:left;color:#fff;
  padding:8.5rem max(1.2rem,calc((100% - 1160px)/2)) 3rem;
  background:linear-gradient(90deg,rgba(7,29,53,.95) 0%,rgba(7,29,53,.78) 38%,rgba(7,29,53,.25) 75%,rgba(7,29,53,.1) 100%),
    url(../img/design2027-hero-sternenzelt.webp) center 45%/cover no-repeat var(--black)}
.hero::before{display:none}
.hero-logo{display:none}
.hero-tag{color:var(--gold);border-color:rgba(255,198,41,.6);border-radius:999px;margin-bottom:1.1rem}
.hero h1{color:#fff;font-size:clamp(2.2rem,4.6vw,3.7rem);line-height:1.08;max-width:15ch;margin:0 0 1rem}
.hero h1 em{color:var(--gold)}
.hero-desc{color:#E6EDF5;font-size:1.02rem;line-height:1.7;max-width:540px;margin:0 0 1.7rem}
.hero-btns{justify-content:flex-start}
.btn{border-radius:999px;letter-spacing:.06em;font-weight:500}
.btn-dark{background:var(--black);color:#fff}
.btn-dark:hover{background:var(--d27-link);color:#fff}
.hero .btn-dark{background:var(--gold);color:var(--black);padding:.95rem 1.9rem;font-size:.85rem}
.hero .btn-dark:hover{background:var(--gold2);color:var(--black)}
.hero-stats{margin:2.2rem 0 0;max-width:620px;background:transparent;gap:.6rem}
.stat{background:rgba(7,29,53,.72);border:1px solid rgba(255,255,255,.2);border-radius:10px;padding:.9rem .6rem}
.stat-num{color:var(--gold);font-size:1.5rem}
.stat-label{color:#E6EDF5}

/* ---------- Vier Foto-Kacheln unter dem Hero ---------- */
.d27-kacheln{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;max-width:1160px;margin:0 auto;padding:1.4rem 1.2rem 2.2rem}
.d27-kachel{position:relative;display:block;aspect-ratio:4/3;border-radius:12px;overflow:hidden;background:var(--card);text-decoration:none;box-shadow:0 6px 18px rgba(11,42,74,.18)}
.d27-kachel img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .3s}
.d27-kachel:hover img{transform:scale(1.04)}
.d27-kachel::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,29,53,0) 45%,rgba(7,29,53,.88) 100%)}
.d27-kachel span{position:absolute;left:1rem;right:1rem;bottom:.8rem;z-index:1;color:#fff;font-size:1.4rem;font-weight:500;line-height:1.2}
.d27-kachel span::after{content:"\2192";content:"\2192" / "";margin-left:.45rem;color:var(--gold)}
.d27-kachel:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

/* ---------- Vereinsleiste, Sortiment ---------- */
.vb-leiste{background:var(--black);border-top:0}
.vb-leiste-btn{background:var(--gold);color:var(--black);border-radius:999px}
.vb-leiste-btn:hover,.vb-leiste-btn:focus-visible{background:var(--gold2)}
.section{padding:4.5rem max(1.2rem,calc((100% - 1160px)/2))}
.container{max-width:1160px}
.produkte{background:var(--black)}
.sort-hinweis{color:var(--desc)}
.cat-label{color:var(--gold);font-size:1.35rem;border-bottom-color:rgba(255,255,255,.14)}
.product-grid{gap:1rem;background:transparent}
.pcard{border-radius:12px;background:var(--card)}
.pcard:hover{background:var(--card-hover)}
.gallery{border-radius:10px;background:var(--d27-tief)}
.pcard-badge{background:rgba(255,198,41,.16);border-radius:999px}
.pcard-qty{color:var(--desc)}
.pcard-cart-btn{border-radius:8px;color:var(--black)}
.pcard-variant,.pcard-variant option,.tech-box{background:var(--d27-tief)}
.pcard-inkl{color:var(--desc)}
.media-placeholder{background:var(--d27-tief);color:var(--desc)}

/* ---------- Bewertungen, Vertrauen, Städte-Links, Fuß ---------- */
.reviews{background:var(--d27-hell)}
.reviews .sec-label,.review-source{color:var(--d27-link)}
.review-stars,.sterne{color:#8A6100}
.check a:hover,.legal a:hover{color:var(--black)}
.pcard-more a{color:#fff}
.pcard-more a:hover{color:var(--gold)}
.bew-box{border-color:var(--d27-linie)}
.bew-btn{border-color:var(--black)}
.seo-links{background:var(--d27-tief);border-top:0}
.seo-links h3{color:var(--gold)}
.seo-links a,.seo-links .seo-intro{color:var(--desc)}
.seo-links a:hover{color:var(--gold);border-bottom-color:var(--gold)}
.site-footer{background:var(--d27-tief);color:var(--desc)}
.foot-links a{color:var(--desc)}
.foot-links a:hover{color:var(--gold)}
.foot-note{color:var(--desc)}

/* ---------- Anfrage-Schublade, Kalender, Overlays (heller Grund: kein Gelb als Text) ---------- */
.cart-list-title,.req,.check a{color:var(--d27-link)}
.drawer .cart-period,.drawer .cart-total-note{color:var(--grey)}
.drawer .cart-price{color:var(--black)}
.radio input,.check input{accent-color:var(--black)}
.qty-btn:hover{border-color:var(--black);color:var(--black)}
.cal-dialog{border-color:rgba(255,198,41,.45)}
.hero-dialog{background:var(--black);border-color:rgba(255,198,41,.55)}
.hero-item{background:var(--card);border-color:rgba(255,198,41,.35)}
.cart-float-btn{color:var(--black)}

/* ---------- Artikelseite (sternenzelt-mieten.html) ---------- */
.legal-back{background:var(--d27-tief);padding:.55rem 1.25rem}
.legal-back a{display:inline-flex;align-items:center;gap:.7rem;color:#fff}
.legal-back a:hover{color:var(--gold)}
.legal-back img{width:40px;height:auto;border-radius:6px}
.legal.d27-artikel{max-width:1160px;padding-top:5.5rem}
.d27-artikel .pp-eyebrow{color:var(--d27-link)}
.d27-artikel .pp-h1{color:var(--black)}
.d27-artikel .pp-orte{color:var(--d27-link);border-color:var(--d27-linie)}
.d27-artikel .pp-check li::before{color:var(--d27-link)}
.d27-artikel a{color:var(--d27-link)}
.d27-artikel a.btn{color:inherit;text-decoration:none}
.d27-oben{display:grid;gap:1.4rem;margin:1.4rem 0 1.8rem}
.d27-oben>*{min-width:0}
.d27-galerie-gross{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;border-radius:12px;background:var(--black)}
.d27-galerie-gross img{flex:0 0 100%;width:100%;aspect-ratio:4/3;height:auto;object-fit:contain;scroll-snap-align:start;display:block;border:0}
.d27-galerie-thumbs{display:flex;gap:.5rem;margin-top:.6rem;overflow-x:auto;padding-bottom:.2rem}
.d27-galerie-thumbs a{flex:0 0 92px;aspect-ratio:4/3;border-radius:8px;overflow:hidden;border:2px solid var(--d27-linie);background:var(--black)}
.d27-galerie-thumbs a:hover,.d27-galerie-thumbs a:focus-visible{border-color:var(--gold)}
.d27-galerie-thumbs img{display:block;width:100%;height:100%;object-fit:cover}
.d27-preisbox{align-self:start;background:var(--d27-hell);border-radius:12px;padding:1.2rem 1.3rem}
.legal .d27-preisbox h2{margin:0 0 .6rem;padding:0;border:0;color:var(--black);font-size:1.4rem}
.d27-preisbox .legal-table{width:100%;font-size:.88rem;margin:.2rem 0 .8rem;background:#fff}
.d27-preisbox .legal-table th{white-space:normal;background:var(--black);color:#fff;border-color:var(--black)}
.d27-preisbox .legal-table td{border-color:var(--d27-linie)}
.d27-preisbox .legal-table th,.d27-preisbox .legal-table td{padding:.4rem .5rem;overflow-wrap:anywhere;hyphens:auto}
/* 31.10.2026: Tabellen außerhalb der Preisbox (Zubehör, Zeltverleih-Übersicht, Anlass-Seiten) bei Handybreite seitlich scrollbar statt abgeschnitten */
@media (max-width:640px){.d27-artikel .legal-table{display:block;overflow-x:auto;max-width:100%}.d27-artikel .d27-preisbox .legal-table{display:table;overflow:visible}}
@media (max-width:520px){.d27-preisbox{padding:1rem .8rem}.d27-preisbox .legal-table{table-layout:fixed;font-size:.78rem}.d27-preisbox .legal-table th,.d27-preisbox .legal-table td{padding:.35rem .3rem}}
.d27-preisbox .pp-cta{flex-direction:column;margin:1rem 0 0}
.d27-preisbox .pp-cta .btn{width:100%;text-align:center}
.d27-preisbox .btn-dark{background:var(--gold);color:var(--black)}
.d27-preisbox .btn-dark:hover{background:var(--gold2);color:var(--black)}
.btn-outline{color:var(--black);border-color:var(--black)}
.btn-outline:hover{color:var(--d27-link);border-color:var(--d27-link)}
.legal p.gesamtpreis,main p.gesamtpreis{margin:-.4rem 0 .8rem;color:var(--grey);font-size:.88rem}
/* Aufklapp-Abschnitte (<details>, ohne JS) */
.d27-auf{border:1px solid var(--d27-linie);border-radius:12px;background:#fff;margin:.8rem 0}
.d27-auf>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.95rem 1.2rem}
.d27-auf>summary::-webkit-details-marker{display:none}
.d27-auf>summary::after{content:"+";content:"+" / "";flex:none;width:1.8rem;height:1.8rem;border-radius:50%;background:var(--black);color:var(--gold);display:flex;align-items:center;justify-content:center;font-size:1.2rem;line-height:1}
.d27-auf[open]>summary::after{content:"\2212";content:"\2212" / ""}
.d27-auf>summary:focus-visible{outline:3px solid var(--d27-link);outline-offset:2px;border-radius:12px}
.legal .d27-auf>summary h2{margin:0;padding:0;border:0;color:var(--black);font-size:1.1rem}
.d27-auf-inhalt{padding:0 1.2rem 1rem}
.d27-auf-inhalt>:first-child{margin-top:0}
.legal h2,.legal h3{color:var(--black)}

/* ---------- Vereinsseite /v (aktion_vorlage_design2027.php) ---------- */
.ak-seite{background:#fff;color:var(--black)}
.ak-leiste{background:#fff;color:var(--black);border-bottom:1px solid var(--d27-linie);padding:.5rem max(1rem,calc((100% - 1160px)/2))}
.ak-marke small{color:var(--grey)}
.ak-leiste-link{color:var(--black)}
.ak-hero{text-align:left;color:#fff;padding:3rem max(1.1rem,calc((100% - 1160px)/2)) 2.8rem;
  background:linear-gradient(90deg,rgba(7,29,53,.94) 0%,rgba(7,29,53,.75) 40%,rgba(7,29,53,.2) 80%,rgba(7,29,53,.1) 100%),
    url(../img/design2027-hero-sternenzelt-nacht.webp) center 55%/cover no-repeat var(--black)}
.ak-hero h1{margin:.2rem 0 .6rem;max-width:14ch}
.ak-seite p.ak-gueltig,.ak-seite p.ak-hero-text{margin-left:0;margin-right:0;color:#E6EDF5}
.ak-kicker{color:var(--gold)}
.ak-codebox{border-color:var(--gold);background:rgba(7,29,53,.55)}
.ak-codebox span{color:#E6EDF5}
.ak-codebox b{color:var(--gold)}
.ak-knoepfe{justify-content:flex-start}
.ak-btn,.ak-btn:hover{border-radius:999px}
.ak-btn{background:var(--gold);border-color:var(--gold)}
.ak-btn:hover{background:var(--gold2);border-color:var(--gold2)}
.ak-seite a.ak-btn{color:var(--black)}
.ak-seite a.ak-btn-zweit{background:transparent;color:var(--black);border-color:var(--black)}
.ak-btn-zweit:hover{background:var(--d27-linie)}
.ak-seite a.ak-btn-dunkel{background:var(--black);color:#fff;border-color:var(--black)}
.ak-btn-dunkel:hover{background:var(--d27-link)}
.ak-inhalt{max-width:1160px}
.ak-hinweis{color:var(--grey)}
.ak-kachel{background:#fff;color:var(--black);border:1px solid var(--d27-linie);box-shadow:0 6px 18px rgba(11,42,74,.10)}
.ak-zeitraum,.ak-klein{color:var(--grey)}
.ak-preis del,.ak-tag del{color:#5F6B7A}
.ak-preis strong{color:var(--black)}
.ak-tag{color:var(--black)}
.ak-tag strong{color:var(--black)}
.ak-frei{color:var(--black)}
.ak-kachel p.d27-abzeichen{align-self:flex-start;margin:0 1rem .7rem;padding:.3rem .85rem;border-radius:999px;background:var(--gold);color:var(--black);font-weight:500;font-size:.9rem}
.d27-vereinsbonus{display:flex;align-items:center;gap:1.1rem 1.4rem;flex-wrap:wrap;background:var(--d27-hell);border-radius:14px;padding:1.2rem 1.3rem;margin:0 0 1rem}
.d27-pokal{flex:none;width:64px;height:64px;border-radius:50%;background:var(--black);display:flex;align-items:center;justify-content:center}
.d27-vereinsbonus-text{flex:1 1 280px;min-width:0}
.d27-vereinsbonus .ak-kicker{color:var(--d27-link);margin:0 0 .2rem}
.ak-seite .d27-vereinsbonus p.ak-hero-text{color:var(--black);margin:0}
.ak-paket{border-color:var(--d27-linie)}
.ak-paket-empfohlen{border-color:var(--gold)}
.ak-abzeichen{background:var(--black);color:var(--gold)}
.ak-paket ul,.ak-einzeln{color:var(--grey)}
.ak-verfuegbar li{border-color:var(--d27-linie)}
.ak-verfuegbar .ak-frei{color:var(--black)}
.ak-vertrauen{background:#fff;color:var(--black);border:1px solid var(--d27-linie);display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.4rem 1.2rem;padding:1rem 1.1rem}
.ak-vertrauen p{margin:0}
.ak-sterne{color:#8A6100}
.ak-fuss{background:var(--d27-tief);color:var(--desc)}
.ak-fuss-links a{color:#fff}

/* ---------- Breiten ---------- */
@media (min-width:900px){
  .d27-oben{grid-template-columns:7fr 5fr;align-items:start}
  .d27-preisbox{position:sticky;top:5rem}
}
@media (min-width:1000px){
  .ak-kacheln{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .section{padding:3.2rem 1.1rem}
  .product-grid{grid-template-columns:1fr}
}
@media (max-width:700px){
  /* Kopf zweizeilig: Logo oben, Menü darunter umbrechend (nichts gestrichen) */
  .topnav{flex-wrap:wrap;row-gap:.4rem;padding:.5rem .9rem}
  .nav-links{flex-wrap:wrap;justify-content:flex-start;width:100%;gap:.5rem 1rem}
  .nav-links a{white-space:nowrap;font-size:.84rem}
  .hero{padding:8.2rem 1.1rem 2rem;
    background:linear-gradient(180deg,rgba(7,29,53,.35) 0%,rgba(7,29,53,.82) 42%,var(--d27-tief) 100%),
      url(../img/design2027-hero-sternenzelt.webp) center top/auto 330px no-repeat var(--d27-tief)}
  .hero-tag{margin-top:6.5rem}
  .hero-stats{grid-template-columns:repeat(2,1fr)}
  .d27-kacheln{grid-template-columns:repeat(2,1fr);gap:.7rem;padding:1rem .9rem 1.6rem}
  .d27-kachel span{font-size:1.05rem;left:.7rem;bottom:.55rem}
  .ak-hero{padding:2.2rem 1.1rem 2.2rem;
    background:linear-gradient(180deg,rgba(7,29,53,.3) 0%,rgba(7,29,53,.85) 45%,var(--d27-tief) 100%),
      url(../img/design2027-hero-sternenzelt-nacht.webp) center top/auto 300px no-repeat var(--d27-tief)}
  .ak-hero .ak-kicker{margin-top:5.5rem}
}
@media (max-width:420px){
  .nav-word{display:block;font-size:.95rem}
}

/* ---------- 31.10.2026: Rechtsseiten, Blog, Gästebuch, Gewinnspiel (main.legal ohne d27-artikel) ---------- */
.legal a{color:var(--d27-link)}
.legal a:hover{color:var(--black)}
.legal a.btn{color:inherit;text-decoration:none}
.legal h2{border-bottom-color:var(--d27-linie)}
.legal-box{border-color:var(--d27-linie)}
.legal .legal-table th{background:rgba(11,42,74,.08)}
.legal .d27-preisbox .legal-table th{background:var(--black);color:#fff;border-color:var(--black)}
.legal .legal-table th,.legal .legal-table td{border-color:var(--d27-linie)}
.legal .beendet{border-color:var(--black);background:var(--d27-hell)}
.gb-entry{border-left-color:var(--black)}
.gb-fld input:focus,.gb-fld textarea:focus{outline-color:var(--d27-link);border-color:var(--d27-link)}
.btn-mini:hover{border-color:var(--d27-link)}
.legal p.gb-hinweis,.gb-entry footer,.legal p.blog-date,.legal .legal-meta{color:var(--grey)}
.legal .ph,.ph{background:var(--d27-hell);border-color:var(--d27-link);color:var(--black)}
/* Prüfer 31.10.: a.btn{color:inherit} hatte die weiße Schrift von .btn-dark überstimmt */
.legal a.btn-dark,.d27-artikel a.btn-dark{color:#fff}
.legal a.btn-dark:hover,.d27-artikel a.btn-dark:hover{color:#fff}
.legal .d27-preisbox a.btn-dark,.legal .d27-preisbox a.btn-dark:hover{color:var(--black)}
.d27-artikel .pp-stimme{border-color:var(--d27-linie);border-left-color:var(--black)}
.d27-artikel .pp-stimme .pp-stimme-meta{color:var(--d27-link)}
.d27-artikel .pp-stimme .pp-sterne{color:#8A6100}
.d27-artikel .pp-links,.d27-artikel .pp-foot{border-top-color:var(--d27-linie)}
.d27-artikel .pp-foot,.d27-artikel .pp-note{color:var(--grey)}
.d27-oben-1 .d27-galerie{max-width:760px}

/* ---------- 31.10.2026: Vereinsbonus-Seite verein.php (main.legal.vb) ---------- */
.vb .vb-hero{background:linear-gradient(160deg,var(--d27-tief) 0%,var(--black) 55%,var(--card) 100%);box-shadow:0 12px 32px rgba(11,42,74,.25)}
.vb .vb-hero-kopf h1{font-family:'DM Sans',sans-serif;font-weight:500;color:#fff}
.vb .vb-kicker{color:var(--gold)}
.vb .vb-hero-badge{background:var(--gold);color:var(--black)}
.vb .vb-hero-text,.vb .vb-liste{color:#E6EDF5}
.vb .vb-liste li{border-top-color:rgba(255,255,255,.14)}
.vb .vb-liste li::before{color:var(--gold)}
.vb .vb-hero .vb-code{background:#fff;color:var(--black)}
.vb .vb-hero .vb-code span{color:var(--grey)}
.vb .vb-btn{background:var(--gold);color:var(--black);box-shadow:0 6px 18px rgba(255,198,41,.3);font-weight:500}
.vb .vb-btn:hover{background:var(--gold2)}
.vb .vb-btn-zweit{background:transparent;color:#fff;border-color:#fff;box-shadow:none}
.vb .vb-btn-zweit:hover{background:rgba(255,255,255,.12)}
.vb .vb-code{border-color:var(--black);background:var(--d27-hell)}
.vb .vb-qr img{border-color:var(--d27-linie)}
.vb .vb-ok{border-color:var(--black);background:var(--d27-hell)}
.vb .vb-form input{border-color:#B8C4D4}
.vb .vb-form input:focus{outline:2px solid var(--d27-link);outline-offset:1px;border-color:var(--d27-link)}

/* ---------- 31.10.2026: Aktiv-Verleih-Seiten (SUP-Spots, Fahrradverleih; body.d27-aktiv, aktiv-seiten.css) ---------- */
body.d27-aktiv{background:var(--d27-tief);color:#E6EDF5}
.d27-aktiv main h1,.d27-aktiv main h2{font-family:'DM Sans',sans-serif;font-weight:500;color:#fff}
.d27-aktiv main a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.d27-aktiv main a:hover{color:var(--gold)}
.d27-aktiv main a.btn-cta{background:var(--gold);color:var(--black);text-decoration:none;border-radius:999px;font-weight:500}
.d27-aktiv main a.btn-cta:hover{background:var(--gold2);color:var(--black)}
.d27-aktiv .pp-hero{border-bottom-color:rgba(255,255,255,.14)}
.d27-aktiv .pp-hero p{opacity:1;color:#C3D0E0}
.d27-aktiv .info-box{background:var(--card);border-color:rgba(255,255,255,.14)}
.d27-aktiv .legal-back{position:fixed;top:0;left:0;right:0;z-index:10}
.d27-aktiv .pp-foot{color:#C3D0E0}
.d27-aktiv .pp-foot a{color:#fff}

/* ---------- v2 31.10.2026: Vereinsbonus-Seite /verein (main.legal.vb) – Hero-Karte, Punkte-Karten, Anmeldekarte, Aufklapper ---------- */
.legal.vb{max-width:960px}
.vb .vb-hero,.vb .d27-vb-start{color:#fff;border-radius:16px;padding:2rem 1.6rem;margin:0 0 1.6rem;
  background:linear-gradient(90deg,rgba(7,29,53,.95) 0%,rgba(7,29,53,.8) 45%,rgba(7,29,53,.35) 80%,rgba(7,29,53,.2) 100%),
    url(../img/design2027-hero-sternenzelt-nacht.webp) center 55%/cover no-repeat var(--black)}
.vb .d27-vb-start .pp-eyebrow{color:var(--gold);margin:0 0 .5rem}
.legal.vb .d27-vb-start h1{color:#fff;font-size:clamp(1.8rem,4vw,2.6rem);max-width:22ch;margin:0 0 .8rem}
.legal.vb .d27-vb-start p.pp-lead{color:#E6EDF5;max-width:60ch;margin:0 0 1.2rem}
.vb .d27-vb-start .vb-ok{background:#fff;color:var(--black);border:0;border-radius:12px;box-shadow:0 6px 18px rgba(7,29,53,.25);display:inline-block;max-width:100%}
.vb .d27-vb-start .vb-ok p{margin:0;color:var(--black)}
.vb .d27-vb-start .vb-ok b,.vb .d27-vb-start .vb-ok strong{color:var(--black)}
.legal.vb h2{font-size:1.5rem;border:0;padding:0;margin:2rem 0 .8rem}
/* Punktetabelle als Karten (Kopfzeile blau, je Zeile eine Karte) */
.vb table.d27-punkte{display:block;width:100%;border:0;margin:0 0 1rem}
.vb table.d27-punkte tbody,.vb table.d27-punkte tr{display:block}
.vb table.d27-punkte tr{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:0 1rem;background:#fff;border:1px solid var(--d27-linie);border-radius:12px;margin:0 0 .6rem;overflow:hidden}
.vb table.d27-punkte tr:first-child:has(th+th){background:var(--black);border-color:var(--black)}
.vb table.d27-punkte tr:first-child:has(th+th) th{color:#fff;background:transparent}
.vb table.d27-punkte th,.vb table.d27-punkte td{display:block;border:0;padding:.85rem 1rem;background:transparent;white-space:normal;color:var(--black)}
.vb table.d27-punkte th{font-weight:500;color:var(--d27-link)}
.vb table.d27-punkte tr:not(:first-child) th{background:var(--d27-hell)}
.vb table.d27-punkte td strong{color:var(--black)}
@media (max-width:600px){.vb table.d27-punkte tr{grid-template-columns:1fr}.vb table.d27-punkte th{padding-bottom:.3rem}.vb table.d27-punkte td{padding-top:.2rem}}
/* Anmeldekarte */
.vb .d27-vb-karte{background:var(--d27-hell);border-radius:14px;padding:1.4rem 1.4rem 1.2rem;margin:0 0 1.6rem}
.vb .d27-vb-karte .vb-form{margin:0}
.vb .d27-vb-karte .vb-form input{background:#fff}
.vb .d27-vb-karte .vb-form .btn-dark,.legal.vb a.btn-dark,.vb .pp-cta .btn-dark{background:var(--gold);color:var(--black);border-radius:999px}
.vb .d27-vb-karte .vb-form .btn-dark:hover,.legal.vb a.btn-dark:hover{background:var(--gold2);color:var(--black)}
.vb .d27-vb-karte .vb-ok{background:#fff}
.vb .vb-fehler{border-radius:8px}
/* Einwilligungszeile: Block statt Grid, sonst zerfallen Text und Link in einzelne Zellen */
.vb .vb-form .vb-check{display:block;line-height:1.5}
.vb .vb-form .vb-check input{display:inline-block;width:auto;margin:.2rem .5rem 0 0;vertical-align:top}
/* Teilnahmebedingungen als Aufklapper */
.legal .d27-auf>summary h3{margin:0;padding:0;border:0;color:var(--black);font-size:1.02rem;font-weight:500}
.vb .d27-vb-faq .d27-auf-inhalt p{margin:0}
.vb .pp-eyebrow{color:var(--d27-link)}
.vb .vb-btn{background:var(--gold);color:var(--black);box-shadow:none;font-weight:500}
.vb .vb-btn-zweit{background:transparent;color:#fff;border-color:#fff}
.vb .vb-btn-zweit:hover{background:rgba(255,255,255,.12)}
.vb p .vb-btn{margin:0}
.vb .pp-note{color:var(--grey)}
/* Prüfer 31.10.: .legal li/p (fix.css) färbte die Häkchen-Liste im dunklen Hero dunkelblau */
.legal.vb .vb-hero li,.legal.vb .vb-hero p,.legal.vb .vb-hero .vb-hero-text,.legal.vb .vb-hero .vb-liste{color:#E6EDF5}
.legal.vb .vb-hero .vb-code,.legal.vb .vb-hero .vb-code b{color:var(--black)}
.legal.vb .vb-hero .vb-code span{color:var(--grey)}
/* weiße Box „Verein des Monats“ im Start-Hero: Text dunkel (sonst greift die helle Hero-Regel) */
.legal.vb .vb-hero .vb-ok p,.legal.vb .vb-hero .vb-ok b,.legal.vb .vb-hero .vb-ok strong{color:var(--black)}
.vb .vb-badge-prozent{white-space:nowrap}
/* Kopfzeile der Punkte-Karten bleibt einzeilig; Hero bei Handybreite gleichmäßig abgedunkelt (Lead-Text über heller Zeltplane) */
.vb table.d27-punkte tr:first-child:has(th+th){grid-template-columns:minmax(0,2fr) minmax(0,3fr)}
@media (max-width:700px){.vb .vb-hero,.vb .d27-vb-start{background:linear-gradient(180deg,rgba(7,29,53,.82) 0%,rgba(7,29,53,.9) 60%,var(--d27-tief) 100%),url(../img/design2027-hero-sternenzelt-nacht.webp) center top/cover no-repeat var(--d27-tief);padding:1.6rem 1.2rem}}

/* v3 (01.11.2026): leere Anfrageliste – Formular aus, Weg zum Sortiment an */
.drawer-leer-weg{display:none;margin:.4rem 0 1.2rem}
.drawer.drawer-leer .drawer-leer-weg{display:block}
.drawer.drawer-leer .anfrage-form{display:none}
.drawer-leer-weg .btn{background:var(--gold);color:var(--black)}
.drawer-leer-weg .btn:hover{background:var(--gold2);color:var(--black)}
.drawer.drawer-erfolg .drawer-leer-weg,.drawer.drawer-erfolg .cart-empty{display:none}
.form-success:focus{outline:none}
/* frueher Inline-Stile (CSP style-src 'self'): slotwahl.js v9, app.js Zeitaufschlag */
.slot-hint{display:block;font-size:.82em;opacity:.75;margin-top:3px}
.slot-chips{display:block}
.slot-info{font-size:.85em;opacity:.75;margin:0 0 10px}
.cart-zeitplus{margin-top:4px}
/* 12.11.2026: Tabellen mit Klasse d27-fest passen am Handy in ihren Kasten (feste Spalten statt seitlichem Wischen) */
@media (max-width:640px){.d27-artikel .legal-table.d27-fest{display:table;overflow:visible;width:100%;max-width:100%;table-layout:fixed;font-size:.78rem}.d27-artikel .legal-table.d27-fest th,.d27-artikel .legal-table.d27-fest td{padding:.35rem .3rem;white-space:normal;overflow-wrap:anywhere;hyphens:auto}}