@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap');

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

/* ════════════════════════════════════════════════════════════
   DESIGN TOKENS
   Brand colours are constant; semantic tokens switch per theme.
   ════════════════════════════════════════════════════════════ */
:root {
  /* Brand constants */
  --navy:   #15233E;
  --deep:   #0E1A30;
  --amber:  #FF8F46;
  --yellow: #FFCB50;
  --coral:  #FB6B61;
  --gold:   #D9871F;
  --creme:  #FFF7EC;
  --creme2: #F5EDDF;

  /* Dark "feature band" text (header/hero/footer are dark in both modes) */
  --band-text:      #FFF7EC;
  --band-text-soft: rgba(255,247,236,.82);
  --band-text-mut:  rgba(255,247,236,.60);
  --band-line:      rgba(255,247,236,.10);

  /* ── Semantic tokens · LIGHT (default) ── */
  --bg:         #FFF7EC;
  --surface:    #FFFFFF;
  --surface-2:  #F5EDDF;
  --text:       #15233E;
  --text-soft:  #2F3F5D;
  --text-muted: #5C6E8E;
  --border:     rgba(21,35,62,.12);
  --row-alt:    rgba(21,35,62,.025);
  --shadow:     0 2px 16px rgba(21,35,62,.08);
  --shadow-lg:  0 6px 32px rgba(21,35,62,.14);

  --header-bg:  #15233E;
  --band-bg:    #15233E;
  --band-line2: transparent;
  --footer-bg:  #0E1A30;
  --footer-deep:#080F1E;

  --ok-bg:   rgba(46,160,92,.12);
  --ok-text: #166534;

  --radius: 12px;
  --font:   'Outfit','DejaVu Sans',sans-serif;
  --max:    1180px;
}

/* ── Semantic tokens · DARK ── */
:root[data-theme="dark"] {
  --bg:         #0B1322;
  --surface:    #15233E;
  --surface-2:  #1A2942;
  --text:       #F3ECDD;
  --text-soft:  #CAD4E6;
  --text-muted: #93A3C0;
  --border:     rgba(255,247,236,.12);
  --row-alt:    rgba(255,247,236,.035);
  --shadow:     0 2px 16px rgba(0,0,0,.45);
  --shadow-lg:  0 12px 40px rgba(0,0,0,.55);

  --header-bg:  #0E1A30;
  --band-bg:    #111E38;
  --band-line2: rgba(255,247,236,.07);
  --footer-bg:  #080F1E;
  --footer-deep:#05090F;

  --ok-bg:   rgba(63,185,115,.16);
  --ok-text: #7CE0A6;
}

/* Follow the OS preference when the user hasn't chosen explicitly */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:         #0B1322;
    --surface:    #15233E;
    --surface-2:  #1A2942;
    --text:       #F3ECDD;
    --text-soft:  #CAD4E6;
    --text-muted: #93A3C0;
    --border:     rgba(255,247,236,.12);
    --row-alt:    rgba(255,247,236,.035);
    --shadow:     0 2px 16px rgba(0,0,0,.45);
    --shadow-lg:  0 12px 40px rgba(0,0,0,.55);

    --header-bg:  #0E1A30;
    --band-bg:    #111E38;
    --band-line2: rgba(255,247,236,.07);
    --footer-bg:  #080F1E;
    --footer-deep:#05090F;

    --ok-bg:   rgba(63,185,115,.16);
    --ok-text: #7CE0A6;
  }
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  transition: background .25s ease, color .25s ease;
}

::selection { background: var(--amber); color: #fff; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ── Layout ─────────────────────────────────────────────── */
.container { width:100%; max-width:var(--max); margin:0 auto; padding:0 1.5rem; }

/* ── Typography ──────────────────────────────────────────── */
h1 { font-size: clamp(2rem,5vw,3.25rem); font-weight:700; line-height:1.15; color:var(--text); }
h2 { font-size: clamp(1.5rem,3.5vw,2.25rem); font-weight:700; line-height:1.2; color:var(--text); }
h3 { font-size: clamp(1.125rem,2.5vw,1.5rem); font-weight:700; line-height:1.25; color:var(--text); }
h4 { font-size: 1.1rem; font-weight:600; color:var(--text); }
p  { max-width:68ch; }
a  { color:var(--amber); text-decoration:none; }
a:hover { color:var(--gold); text-decoration:underline; }
:root[data-theme="dark"] a:hover { color:var(--yellow); }
strong { font-weight:600; }
ul, ol { padding-left:1.25em; }
li + li { margin-top:.35em; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.75rem 1.75rem; border-radius:8px;
  font-family:var(--font); font-weight:600; font-size:1rem;
  cursor:pointer; border:none; transition:all .18s ease;
  text-decoration:none; white-space:nowrap;
}
.btn-primary  { background:var(--amber); color:#fff; }
.btn-primary:hover  { background:var(--gold); color:#fff; text-decoration:none; }
.btn-outline  { background:transparent; color:var(--text); border:2px solid var(--text); }
.btn-outline:hover  { background:var(--text); color:var(--bg); text-decoration:none; }
.btn-ghost    { background:transparent; color:var(--band-text); border:2px solid rgba(255,247,236,.45); }
.btn-ghost:hover    { background:rgba(255,247,236,.12); color:#fff; border-color:var(--creme); text-decoration:none; }
.btn-sm { padding:.5rem 1.25rem; font-size:.9rem; }

/* ── Compliance strip ─────────────────────────────────────── */
.age-strip {
  background:var(--footer-deep); color:rgba(255,247,236,.7);
  font-size:.78rem; text-align:center; padding:.4rem 1rem; letter-spacing:.01em;
}
.age-strip a { color:rgba(255,247,236,.85); text-decoration:underline; }
.age-badge {
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:50%;
  background:var(--amber); color:#fff; font-weight:700; font-size:.6rem;
  margin-right:.35rem; flex-shrink:0; vertical-align:middle;
}

/* ── Header ─────────────────────────────────────────────── */
.site-header {
  background:var(--header-bg); position:sticky; top:0; z-index:200;
  box-shadow:0 2px 12px rgba(0,0,0,.35); transition:background .25s ease;
}
.site-header .container {
  display:flex; align-items:center; justify-content:space-between;
  height:68px; gap:1rem;
}
.site-logo { display:flex; align-items:center; text-decoration:none; flex-shrink:0; }
.site-logo img { height:46px; width:auto; display:block; }

.site-nav { display:flex; align-items:center; gap:.15rem; }
.site-nav a {
  color:rgba(255,247,236,.8); font-weight:500; font-size:.88rem;
  padding:.45rem .7rem; border-radius:6px; transition:all .15s;
  text-decoration:none; white-space:nowrap;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { color:var(--band-text); background:rgba(255,247,236,.1); }
.site-nav .nav-cta { background:var(--amber); color:#fff; margin-left:.5rem; border-radius:6px; }
.site-nav .nav-cta:hover { background:var(--gold); }

.header-actions { display:flex; align-items:center; gap:.5rem; flex-shrink:0; }

.nav-toggle {
  display:none; background:none; border:none; cursor:pointer;
  color:var(--band-text); padding:.5rem; border-radius:6px;
  flex-direction:column; gap:5px; align-items:center;
}
.nav-toggle span { display:block; width:22px; height:2px; background:var(--band-text); border-radius:2px; transition:all .2s; }

/* Theme toggle */
.theme-toggle {
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:8px; flex-shrink:0;
  background:rgba(255,247,236,.08); border:1px solid rgba(255,247,236,.16);
  color:var(--band-text); cursor:pointer; transition:background .15s, transform .15s;
}
.theme-toggle:hover { background:rgba(255,247,236,.18); }
.theme-toggle:active { transform:scale(.92); }
.theme-toggle svg { width:18px; height:18px; display:block; }
.theme-toggle .icon-sun  { display:none; }
.theme-toggle .icon-moon { display:block; }
:root[data-theme="dark"] .theme-toggle .icon-sun  { display:block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display:none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun  { display:block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display:none; }
}

/* ── Hero ────────────────────────────────────────────────── */
.hero {
  background:var(--band-bg); color:var(--band-text);
  padding:5.5rem 0 4.5rem; position:relative; overflow:hidden;
  border-bottom:1px solid var(--band-line2);
}
.hero::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 80% 60% at 85% 50%, rgba(255,203,80,.08) 0%, transparent 60%);
  pointer-events:none;
}
.hero .container { position:relative; }
.hero-tag {
  display:inline-flex; align-items:center; gap:.5rem;
  background:rgba(255,143,70,.15); color:var(--amber);
  font-size:.82rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  padding:.35rem .85rem; border-radius:20px; border:1px solid rgba(255,143,70,.3);
  margin-bottom:1.25rem;
}
.hero h1 { color:var(--band-text); margin-bottom:1rem; }
.hero h1 em { font-style:normal; color:var(--yellow); }
.hero-lead { color:var(--band-text-soft); font-size:1.1rem; max-width:58ch; margin-bottom:2.25rem; line-height:1.7; }
.hero-actions { display:flex; gap:1rem; flex-wrap:wrap; }
.hero-meta { margin-top:3.5rem; display:flex; gap:2.5rem; flex-wrap:wrap; border-top:1px solid var(--band-line); padding-top:2rem; }
.hero-meta-item { display:flex; flex-direction:column; gap:.2rem; }
.hero-meta-label { font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:var(--amber); }
.hero-meta-value { font-size:1rem; color:var(--band-text-soft); font-weight:500; }

/* ── Section ─────────────────────────────────────────────── */
.section    { padding:5rem 0; }
.section-sm { padding:3rem 0; }
.section-xs { padding:1.5rem 0; }
.section-dark { background:var(--band-bg); border-top:1px solid var(--band-line2); border-bottom:1px solid var(--band-line2); }
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4 { color:var(--band-text); }
.section-dark p, .section-dark li { color:var(--band-text-soft); }
.section-alt { background:var(--surface-2); }

.section-label { display:inline-block; color:var(--amber); font-weight:600; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; margin-bottom:.5rem; }
.section-title { margin-bottom:.6rem; }
.section-lead  { color:var(--text-muted); font-size:1.05rem; margin-bottom:2.75rem; max-width:62ch; }
.section-dark .section-lead { color:var(--band-text-mut); }

/* ── Cards ───────────────────────────────────────────────── */
.card-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.75rem; }
.card-grid-2 { grid-template-columns:repeat(2,1fr); }
.card-grid-3 { grid-template-columns:repeat(3,1fr); }

.card {
  background:var(--surface); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden; border:1px solid var(--border);
  transition:box-shadow .2s, transform .2s; display:flex; flex-direction:column;
}
.card:hover { box-shadow:var(--shadow-lg); transform:translateY(-2px); }

.card-img {
  aspect-ratio:16/9; overflow:hidden; flex-shrink:0;
  background:linear-gradient(135deg,var(--yellow) 0%,var(--amber) 55%,var(--coral) 100%);
  display:flex; align-items:center; justify-content:center;
}
.card-img img { width:100%; height:100%; object-fit:cover; display:block; }
.card-img-placeholder { color:rgba(255,255,255,.55); font-size:.85rem; font-weight:500; text-align:center; padding:1rem; }

.card-body { padding:1.75rem; flex:1; display:flex; flex-direction:column; gap:.75rem; }
.card-eyebrow { font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--amber); }
.card-title { font-size:1.2rem; color:var(--text); }
.card-text  { color:var(--text-muted); font-size:.94rem; line-height:1.65; flex:1; }
.card-footer { margin-top:auto; padding-top:1rem; }

/* ── Location cards ──────────────────────────────────────── */
.loc-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:2rem; }
.loc-card {
  background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:2.25rem; display:flex; flex-direction:column; gap:1.25rem;
  border:1px solid var(--border); border-top:4px solid var(--amber); transition:box-shadow .2s;
}
.loc-card:hover { box-shadow:var(--shadow-lg); }
.loc-card h3 { font-size:1.4rem; }
.loc-card-addr { color:var(--text-muted); font-size:.94rem; line-height:1.8; display:flex; gap:.5rem; align-items:flex-start; }
.loc-card-addr svg { flex-shrink:0; margin-top:3px; color:var(--amber); }
.loc-hours { display:flex; flex-direction:column; gap:.3rem; }
.loc-hours dt { font-weight:600; font-size:.9rem; }
.loc-hours dd { margin:0; color:var(--text-muted); font-size:.9rem; }

.tags { display:flex; flex-wrap:wrap; gap:.4rem; }
.tag {
  display:inline-block; background:var(--surface-2); color:var(--text);
  font-size:.78rem; font-weight:600; letter-spacing:.03em;
  padding:.2rem .65rem; border-radius:20px; border:1px solid var(--border);
}
.tag-amber { background:rgba(255,143,70,.12); color:var(--amber); border-color:rgba(255,143,70,.25); }
.loc-actions { display:flex; gap:.75rem; flex-wrap:wrap; margin-top:.5rem; }

/* ── Hours table ─────────────────────────────────────────── */
.hours-wrap { overflow-x:auto; border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid var(--border); }
.hours-table { width:100%; border-collapse:collapse; font-size:.94rem; background:var(--surface); }
.hours-table th { text-align:left; padding:.8rem 1.25rem; background:var(--deep); color:var(--creme); font-weight:600; }
.hours-table th:first-child { border-radius:var(--radius) 0 0 0; }
.hours-table th:last-child  { border-radius:0 var(--radius) 0 0; }
.hours-table td { padding:.75rem 1.25rem; border-bottom:1px solid var(--border); vertical-align:middle; color:var(--text); }
.hours-table tr:last-child td { border-bottom:none; }
.hours-table tr:nth-child(even) td { background:var(--row-alt); }
.hours-tag-open { display:inline-block; background:var(--ok-bg); color:var(--ok-text); font-size:.78rem; font-weight:600; padding:.15rem .6rem; border-radius:20px; }
.hours-tag-note { display:inline-block; background:rgba(255,143,70,.14); color:var(--gold); font-size:.78rem; font-weight:600; padding:.15rem .6rem; border-radius:20px; }
:root[data-theme="dark"] .hours-tag-note { color:var(--yellow); }

/* ── FAQ ──────────────────────────────────────────────────── */
.faq-list { list-style:none; display:flex; flex-direction:column; gap:.75rem; }
.faq-item { background:var(--surface); border-radius:10px; border:1px solid var(--border); overflow:hidden; }
.faq-q {
  width:100%; background:none; border:none; padding:1.1rem 1.4rem; text-align:left;
  font-family:var(--font); font-size:.97rem; font-weight:600; color:var(--text); cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:1rem; transition:background .15s;
}
.faq-q:hover { background:var(--row-alt); }
.faq-icon {
  width:22px; height:22px; flex-shrink:0; border-radius:50%; background:var(--surface-2);
  display:flex; align-items:center; justify-content:center; color:var(--amber);
  font-size:1rem; font-weight:700; line-height:1; transition:transform .2s, background .2s;
}
.faq-item.open .faq-icon { transform:rotate(45deg); background:var(--amber); color:#fff; }
.faq-a { display:none; padding:0 1.4rem 1.1rem; color:var(--text-muted); font-size:.93rem; line-height:1.7; }
.faq-item.open .faq-a { display:block; }
.faq-a a { color:var(--amber); }

/* ── Info boxes ──────────────────────────────────────────── */
.infobox {
  padding:1.25rem 1.5rem; border-radius:0 var(--radius) var(--radius) 0;
  border-left:4px solid var(--amber); background:rgba(255,143,70,.08);
  font-size:.93rem; line-height:1.65; color:var(--text);
}
.infobox-warning { border-left-color:var(--coral); background:rgba(251,107,97,.09); }
.infobox-info { border-left-color:var(--text-muted); background:var(--surface-2); }
.infobox-title { font-weight:700; margin-bottom:.35rem; display:block; }
.infobox a { color:var(--amber); }

/* ── Info rows ───────────────────────────────────────────── */
.info-list { list-style:none; display:flex; flex-direction:column; gap:.9rem; }
.info-row { display:flex; align-items:flex-start; gap:.75rem; }
.info-icon { width:20px; height:20px; flex-shrink:0; margin-top:3px; color:var(--amber); }

/* ── Stats ───────────────────────────────────────────────── */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:1.5rem; }
.stat-card { background:rgba(255,247,236,.06); border-radius:var(--radius); border:1px solid rgba(255,247,236,.1); padding:1.5rem; text-align:center; }
.stat-num  { font-size:2.25rem; font-weight:700; color:var(--yellow); line-height:1; margin-bottom:.25rem; }
.stat-desc { font-size:.85rem; color:var(--band-text-mut); font-weight:500; }

/* ── Split ───────────────────────────────────────────────── */
.split { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.split-reverse { direction:rtl; }
.split-reverse > * { direction:ltr; }

/* ── Image placeholder ───────────────────────────────────── */
.img-placeholder {
  width:100%; border-radius:var(--radius); overflow:hidden;
  background:linear-gradient(135deg,var(--yellow) 0%,var(--amber) 50%,var(--coral) 100%);
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,.65); font-size:.85rem; font-weight:500; text-align:center; gap:.5rem; flex-direction:column;
}
.img-placeholder svg { opacity:.55; }

/* ── Breadcrumb ──────────────────────────────────────────── */
.breadcrumb { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; font-size:.82rem; color:var(--text-muted); padding:1rem 0; }
.breadcrumb a { color:var(--text-muted); text-decoration:none; }
.breadcrumb a:hover { color:var(--text); }
.breadcrumb-sep { color:var(--text-muted); opacity:.5; }

/* ── Page hero ───────────────────────────────────────────── */
.page-hero { background:var(--band-bg); color:var(--band-text); padding:3.5rem 0 3rem; border-bottom:1px solid var(--band-line2); }
.page-hero .breadcrumb, .page-hero .breadcrumb a { color:var(--band-text-mut); }
.page-hero .breadcrumb-sep { color:var(--band-text-mut); opacity:.6; }
.page-hero h1 { color:var(--band-text); margin-bottom:.6rem; }
.page-hero p { color:var(--band-text-soft); font-size:1.05rem; max-width:58ch; }

/* ── Footer ──────────────────────────────────────────────── */
.site-footer { background:var(--footer-bg); color:rgba(255,247,236,.78); transition:background .25s ease; }
.footer-main { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:3rem; padding:4rem 0 2.5rem; }
.footer-brand img { height:44px; margin-bottom:1rem; display:block; }
.footer-brand p { font-size:.875rem; max-width:26ch; color:rgba(255,247,236,.6); line-height:1.7; }
.footer-col h4 { color:var(--band-text); font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; margin-bottom:1rem; }
.footer-col ul { list-style:none; display:flex; flex-direction:column; gap:.55rem; }
.footer-col a { color:rgba(255,247,236,.65); font-size:.88rem; text-decoration:none; }
.footer-col a:hover { color:var(--band-text); }
.footer-col address { font-style:normal; font-size:.875rem; line-height:1.85; color:rgba(255,247,236,.65); }
.footer-col address strong { color:var(--band-text); }
.footer-sep { border:none; border-top:1px solid rgba(255,247,236,.08); }
.footer-bottom { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; padding:1.1rem 0; font-size:.8rem; color:rgba(255,247,236,.45); }
.footer-bottom a { color:rgba(255,247,236,.55); text-decoration:none; }
.footer-bottom a:hover { color:var(--band-text); }
.footer-legal-links { display:flex; gap:1.5rem; flex-wrap:wrap; }
.footer-compliance { background:var(--footer-deep); border-top:1px solid rgba(255,247,236,.06); padding:1rem 0; text-align:center; font-size:.78rem; color:rgba(255,247,236,.5); line-height:1.6; }
.footer-compliance strong { color:rgba(255,247,236,.78); }
.footer-compliance a { color:rgba(255,247,236,.68); }

/* ── Map embed ───────────────────────────────────────────── */
.map-embed { width:100%; aspect-ratio:4/3; border:none; border-radius:var(--radius); display:block; box-shadow:var(--shadow); }

/* ── Blog ─────────────────────────────────────────────────── */
.blog-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:2rem; }
.blog-date { font-size:.8rem; color:var(--text-muted); }
.article { max-width:760px; margin:0 auto; }
.article p, .article ul, .article ol { color:var(--text-soft); margin-bottom:1.1rem; font-size:1.02rem; }
.article h2 { margin:2.5rem 0 1rem; }
.article h3 { margin:2rem 0 .75rem; }
.article ul, .article ol { padding-left:1.3em; }
.article-meta { display:flex; gap:1rem; flex-wrap:wrap; align-items:center; color:var(--text-muted); font-size:.85rem; margin-bottom:1.5rem; }
.article-lead { font-size:1.15rem; color:var(--text); line-height:1.6; margin-bottom:2rem; font-weight:500; }
.toc { background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); padding:1.25rem 1.5rem; margin:2rem 0; }
.toc h4 { font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-muted); margin-bottom:.6rem; }
.toc ul { list-style:none; padding:0; display:flex; flex-direction:column; gap:.4rem; }
.toc a { font-size:.95rem; }

/* Help / resource cards */
.help-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.25rem; }
.help-card { background:var(--surface); border:1px solid var(--border); border-left:4px solid var(--amber); border-radius:0 var(--radius) var(--radius) 0; padding:1.5rem; box-shadow:var(--shadow); }
.help-card h3 { font-size:1.05rem; margin-bottom:.4rem; }
.help-card p { font-size:.92rem; color:var(--text-muted); margin-bottom:.4rem; }
.help-card .help-contact { font-weight:700; color:var(--text); font-size:1.05rem; }

/* ── Spielerschutz ───────────────────────────────────────── */
.spiel-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.5rem; }
.spiel-card { background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); padding:1.75rem; display:flex; flex-direction:column; gap:.75rem; border:1px solid var(--border); border-top:3px solid var(--amber); }
.spiel-card h3 { font-size:1.1rem; }
.spiel-card p { font-size:.92rem; color:var(--text-muted); }
.spiel-icon { width:36px; height:36px; color:var(--amber); }

/* ── Contact reveal (obfuscated mail/phone) ──────────────── */
.contact-reveal {
  display:inline-flex; align-items:center; gap:.4rem;
  background:rgba(255,143,70,.12); color:var(--amber);
  border:1px solid rgba(255,143,70,.3); border-radius:6px;
  padding:.2rem .65rem; font:inherit; font-size:.92em; font-weight:600;
  cursor:pointer; text-decoration:none; transition:background .15s;
}
.contact-reveal:hover { background:rgba(255,143,70,.2); color:var(--gold); text-decoration:none; }
.contact-reveal svg { width:14px; height:14px; }
.contact-reveal.is-revealed { background:transparent; border-color:transparent; padding:0; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width:960px) {
  .split { grid-template-columns:1fr; gap:2.5rem; }
  .split-reverse { direction:ltr; }
  .footer-main { grid-template-columns:1fr 1fr; }
  .card-grid-3 { grid-template-columns:1fr 1fr; }
}
@media (max-width:768px) {
  .nav-toggle { display:flex; }
  .site-nav {
    display:none; position:absolute; top:68px; left:0; right:0;
    background:var(--header-bg); flex-direction:column; align-items:stretch;
    padding:.75rem; border-top:1px solid rgba(255,247,236,.08); gap:0; z-index:100;
    box-shadow:0 8px 24px rgba(0,0,0,.5);
  }
  .site-nav.open { display:flex; }
  .site-nav a { padding:.8rem 1rem; font-size:.97rem; border-radius:6px; width:100%; }
  .site-nav .nav-cta { margin-left:0; margin-top:.5rem; text-align:center; justify-content:center; }
  .hero { padding:3.5rem 0 3rem; }
  .section { padding:3.5rem 0; }
  .card-grid-2, .card-grid-3 { grid-template-columns:1fr; }
  .footer-main { grid-template-columns:1fr 1fr; gap:2rem; padding:3rem 0 1.5rem; }
}
@media (max-width:520px) {
  h1 { font-size:1.9rem; }
  .hero { padding:2.5rem 0 2rem; }
  .hero-actions { flex-direction:column; }
  .footer-main { grid-template-columns:1fr; }
  .loc-grid { grid-template-columns:1fr; }
  .stat-grid { grid-template-columns:1fr 1fr; }
  .hours-table th, .hours-table td { padding:.55rem .75rem; font-size:.88rem; }
  .hours-table th:last-child, .hours-table td:last-child { display:none; }
}

/* ── Utilities ────────────────────────────────────────────── */
.text-center { text-align:center; }
.text-amber  { color:var(--amber); }
.text-gold   { color:var(--gold); }
.text-muted  { color:var(--text-muted); }
.mb-0 { margin-bottom:0; }
.mt-1 { margin-top:.5rem; }
.mt-2 { margin-top:1rem; }
.mt-3 { margin-top:1.5rem; }
.mt-4 { margin-top:2rem; }
.gap-2 { gap:1rem; }
.w-full { width:100%; }
.flex { display:flex; }
.flex-wrap { flex-wrap:wrap; }
.items-center { align-items:center; }
.justify-between { justify-content:space-between; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ════════════════════════════════════════════════════════════
   ERWEITERUNGEN — Bild-Hero, Galerie/Lightbox, Bewertungen,
   Karten-Consent, Cookie-Banner, Hilfe-Ticker
   ════════════════════════════════════════════════════════════ */

/* ── Hero mit Hintergrundbild + schwebender Textkarte ── */
.hero--image { position:relative; isolation:isolate; padding:6rem 0 5rem; }
.hero--image .hero-bg {
  position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center;
  background-image:var(--hero-img, linear-gradient(120deg,#16243f 0%,#243150 38%,#3a2742 100%));
}
.hero--image::after {
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(11,19,34,.60) 0%, rgba(11,19,34,.40) 45%, rgba(11,19,34,.80) 100%);
}
.hero-card {
  background:rgba(13,22,40,.55); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  border:1px solid rgba(255,247,236,.14); border-radius:18px;
  box-shadow:0 24px 60px rgba(0,0,0,.45); padding:2.5rem 2.75rem; max-width:680px;
}
.hero--image h1 { color:#fff; text-shadow:0 2px 18px rgba(0,0,0,.55); }
.hero--image .hero-lead { color:rgba(255,247,236,.92); text-shadow:0 1px 10px rgba(0,0,0,.45); }
.hero--image .hero-meta { border-top-color:rgba(255,247,236,.18); }
.hero-photo-note {
  position:absolute; right:1rem; bottom:1rem; z-index:1; font-size:.7rem;
  background:rgba(0,0,0,.45); color:rgba(255,247,236,.7); padding:.2rem .6rem; border-radius:20px;
}
@media (max-width:600px){ .hero-card{ padding:1.75rem 1.4rem; } }

/* ── Bildergalerie + Lightbox ── */
.gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:.8rem; margin-top:1.5rem; }
.gallery-item {
  position:relative; aspect-ratio:4/3; border-radius:12px; overflow:hidden; cursor:pointer;
  border:1px solid var(--border); background:linear-gradient(135deg,var(--yellow),var(--amber) 55%,var(--coral));
  display:flex; align-items:center; justify-content:center;
}
.gallery-item img { width:100%; height:100%; object-fit:cover; display:block; }
.gallery-item .ph { color:rgba(255,255,255,.72); font-size:.72rem; font-weight:600; text-align:center; padding:.5rem; }
.gallery-item:focus-visible { outline:3px solid var(--amber); outline-offset:2px; }
.gallery-item .zoom {
  position:absolute; right:.5rem; bottom:.5rem; width:26px; height:26px; border-radius:50%;
  background:rgba(0,0,0,.45); color:#fff; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .15s;
}
.gallery-item:hover .zoom { opacity:1; }

.lightbox { position:fixed; inset:0; z-index:950; background:rgba(5,9,16,.93); display:none; align-items:center; justify-content:center; padding:2rem; }
.lightbox.open { display:flex; }
.lightbox figure { margin:0; max-width:94vw; max-height:90vh; text-align:center; }
.lightbox img { max-width:94vw; max-height:80vh; border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,.6); }
.lightbox figcaption { color:rgba(255,247,236,.8); font-size:.85rem; margin-top:.75rem; }
.lightbox-btn {
  position:absolute; background:rgba(255,247,236,.12); border:1px solid rgba(255,247,236,.25); color:#fff;
  width:48px; height:48px; border-radius:50%; cursor:pointer; font-size:1.4rem; line-height:1; display:flex; align-items:center; justify-content:center;
}
.lightbox-close { top:1.25rem; right:1.25rem; }
.lightbox-prev { left:1.25rem; top:50%; transform:translateY(-50%); }
.lightbox-next { right:1.25rem; top:50%; transform:translateY(-50%); }
.lightbox-btn:hover { background:rgba(255,247,236,.22); }

/* ── Google-Bewertungen ── */
.reviews-head { display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; margin-top:1rem; }
.reviews-score { display:flex; align-items:center; gap:.6rem; }
.reviews-score .num { font-size:2.4rem; font-weight:700; color:var(--text); line-height:1; }
/* Bewertungen: einreihiger Auto-Slider (langsames Endlos-Durchrollen) */
@keyframes review-roll { from { transform:translateX(0); } to { transform:translateX(-50%); } }
.review-grid { display:flex; gap:1.5rem; margin-top:1.75rem; padding:.25rem 0 1rem; overflow-x:auto; scrollbar-width:none; }
.review-grid::-webkit-scrollbar { display:none; }
.review-grid .review-card { flex:0 0 clamp(270px,82vw,350px); }
.review-slider-wrap { position:relative; overflow:hidden; margin-top:1.75rem; }
.review-slider-wrap .review-grid { width:max-content; margin-top:0; overflow:visible; animation:review-roll 60s linear infinite; }
.review-slider-wrap:hover .review-grid, .review-slider-wrap:focus-within .review-grid { animation-play-state:paused; }
.review-slider-wrap::before, .review-slider-wrap::after {
  content:''; position:absolute; top:0; bottom:0; width:60px; z-index:2; pointer-events:none;
}
.review-slider-wrap::before { left:0; background:linear-gradient(90deg, var(--bg), transparent); }
.review-slider-wrap::after { right:0; background:linear-gradient(270deg, var(--bg), transparent); }
.section-alt .review-slider-wrap::before { background:linear-gradient(90deg, var(--surface-2), transparent); }
.section-alt .review-slider-wrap::after { background:linear-gradient(270deg, var(--surface-2), transparent); }
/* schlicht: ohne Avatar-Kreise, ruhigere Karten */
.review-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; box-shadow:none; display:flex; flex-direction:column; gap:.7rem; }
.review-top { display:flex; align-items:center; gap:.75rem; }
.review-avatar { display:none; }
.review-name { font-weight:600; font-size:.95rem; }
.review-date { font-size:.78rem; color:var(--text-muted); }
.stars { color:#FBB400; letter-spacing:1px; font-size:.95rem; }
.review-text { font-size:.92rem; color:var(--text-soft); line-height:1.6; }
.gbadge { display:inline-flex; align-items:center; gap:.4rem; font-size:.8rem; color:var(--text-muted); }
.gbadge svg { width:16px; height:16px; }

/* ── Karten-Consent (Google Maps DSGVO-konform) ── */
.map-consent {
  position:relative; width:100%; aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--border); display:flex; align-items:center; justify-content:center; text-align:center;
  background-color:#0f1a2e;
  background-image:
    linear-gradient(135deg, rgba(16,27,48,.90), rgba(9,16,30,.96)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 40px);
}
.map-consent .mc-inner { padding:1.5rem; max-width:44ch; position:relative; z-index:1; }
.map-consent .mc-inner::before {
  content:''; display:block; width:42px; height:42px; margin:0 auto .8rem;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FF8F46'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
}
.map-consent h4 { margin-bottom:.4rem; color:#fff; }
.map-consent p { font-size:.85rem; color:rgba(255,247,236,.72); margin:0 auto .9rem; }
.map-consent iframe { position:absolute; inset:0; width:100%; height:100%; border:0; z-index:2; }

/* ── Cookie-Banner (DSGVO / EU) ── */
.cookie-banner {
  position:fixed; left:0; right:0; bottom:0; z-index:920; background:var(--surface); color:var(--text);
  border-top:3px solid var(--amber); box-shadow:0 -10px 40px rgba(0,0,0,.28); transform:translateY(115%); transition:transform .4s ease;
}
.cookie-banner.show { transform:none; }
.cookie-inner { padding:1.3rem 0; display:grid; gap:1rem; }
.cookie-text h4 { font-size:1.05rem; margin-bottom:.25rem; }
.cookie-text p { font-size:.86rem; color:var(--text-muted); max-width:78ch; }
.cookie-text a { color:var(--amber); }
.cookie-actions { display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; }
.cookie-link { background:none; border:none; color:var(--text-muted); font:inherit; font-size:.85rem; text-decoration:underline; cursor:pointer; padding:.4rem; }
.cookie-cats { display:none; gap:.6rem; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); margin-top:.2rem; }
.cookie-banner.settings .cookie-cats { display:grid; }
.cookie-cat { border:1px solid var(--border); border-radius:10px; padding:.9rem 1rem; background:var(--bg); }
.cookie-cat label { display:flex; align-items:center; justify-content:space-between; gap:.75rem; font-weight:600; font-size:.92rem; cursor:pointer; }
.cookie-cat p { font-size:.78rem; color:var(--text-muted); margin-top:.35rem; }
.cookie-cat input { width:18px; height:18px; accent-color:var(--amber); flex-shrink:0; }
.cookie-cat input:disabled { opacity:.55; }

/* ── Hilfe-Ticker unter dem Footer ── */
.help-ticker { background:var(--footer-deep); border-top:1px solid rgba(255,247,236,.07); overflow:hidden; }
.help-ticker__track { display:flex; align-items:center; gap:2.5rem; width:max-content; padding:.5rem 0; animation:ct-ticker 50s linear infinite; }
.help-ticker:hover .help-ticker__track, .help-ticker:focus-within .help-ticker__track { animation-play-state:paused; }
.help-ticker__item { display:inline-flex; align-items:center; gap:.5rem; white-space:nowrap; color:rgba(255,247,236,.62); font-size:.78rem; }
.help-ticker__item strong { color:rgba(255,247,236,.85); }
.help-ticker__item a { color:var(--yellow); text-decoration:none; }
.help-ticker__item a:hover { text-decoration:underline; }
.help-ticker__dot { width:5px; height:5px; border-radius:50%; background:var(--amber); flex-shrink:0; }
@keyframes ct-ticker { from { transform:translateX(0); } to { transform:translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .help-ticker__track { animation:none; flex-wrap:wrap; white-space:normal; justify-content:center; gap:1.25rem; }
}

/* ── Fotos (eingebundene Bilder) ── */
.photo { width:100%; border-radius:var(--radius); object-fit:cover; display:block; box-shadow:var(--shadow); }
.page-hero--photo { position:relative; isolation:isolate; }
.page-hero--photo .ph-bg { position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center; }
.page-hero--photo::after { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(11,19,34,.72) 0%, rgba(11,19,34,.90) 100%); }

/* ── Infoboxen auf dunklen Sektionen: immer lesbar (hell-/dunkel-Modus) ── */
.section-dark .infobox { background:rgba(255,247,236,.07); color:var(--band-text-soft); border-left-color:var(--amber); }
.section-dark .infobox-title { color:var(--band-text); }
.section-dark .infobox p, .section-dark .infobox li, .section-dark .infobox strong { color:var(--band-text-soft); }
.section-dark .infobox a { color:var(--yellow); }