/* ═══════════════════════════════════════════════════
   Don Marcello — style.css v4 (Helles Theme)
   Mobile-first + Desktop 1200px
═══════════════════════════════════════════════════ */

:root {
    --c-bg:      #ffffff;   /* Haupt-Hintergrund: reines Weiß wie Flyer */
    --c-bg2:     #f7f5f1;   /* Karten / leicht abgesetzt (warmes Off-White) */
    --c-bg3:     #f0ede7;   /* Footer / Sektionen */
    --c-border:  #e5e1d8;   /* helle Borders */
    --c-border2: #d8d3c8;   /* etwas kräftigere Border (Inputs) */
    --c-gold:    #d4a03c;   /* wärmeres, gedämpftes Gold wie auf den Flyern */
    --c-gold2:   #c08f2e;   /* dunkleres Gold für Hover */
    --c-text:    #1a1815;   /* Fließtext: fast Schwarz */
    --c-muted:   #5c574f;   /* Sekundärtext (dunkelgrau-warm) */
    --c-dim:     #8f887c;   /* deaktiviert / feine Labels */
    --c-white:   #0e0d0b;   /* WICHTIG: "white" war Überschriftsfarbe → jetzt Schwarz.
                               So werden alle h1/h2/h3 & .c-white automatisch dunkel */
    --c-ink:     #0e0d0b;   /* explizite Tinte für dunkle Flächen */
    --c-red:     #dc2626;
    --f-display: 'Cormorant Garamond', Georgia, serif;
    --f-body:    'Jost', system-ui, sans-serif;
    --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 50px;
    --nav-h-mobile:  72px;
    --nav-h-desktop: 72px;
    --max-w: 1200px;
    --pad:   20px;
}

/* ── RESET ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent }
html { height:100%; scroll-behavior:smooth }
body { font-family:var(--f-body); background:var(--c-bg); color:var(--c-text); min-height:100%; -webkit-font-smoothing:antialiased; overflow-x:hidden }
img  { max-width:100%; height:auto; display:block }
a    { color:inherit; text-decoration:none }
button { cursor:pointer; font-family:var(--f-body) }
input,textarea,select { font-family:var(--f-body) }

h1,h2,h3 { font-family:var(--f-display); font-weight:400; color:var(--c-white); line-height:1.1 }
h1 { font-size:clamp(44px,13vw,80px) }
h2 { font-size:clamp(22px,4vw,36px) }
h3 { font-size:clamp(17px,2.5vw,22px) }
p  { font-size:13px; color:var(--c-muted); line-height:1.8 }

.section-label { font-size:9px; letter-spacing:.35em; text-transform:uppercase; color:var(--c-gold); display:block; margin-bottom:6px }
.container     { max-width:var(--max-w); margin:0 auto; padding:0 var(--pad) }

/* Mobile: padding für Bottom-Nav */
@media (max-width:899px) { body { padding-bottom:var(--nav-h-mobile) } }
/* Desktop: padding für Top-Nav */
@media (min-width:900px) { body { padding-top:var(--nav-h-desktop) } }

/* ══════════════════════════════════════════════════
   DESKTOP NAV (ab 900px) — nur Icons
══════════════════════════════════════════════════ */
.desktop-nav {
    position:fixed; top:0; left:0; right:0; z-index:100;
    transition:background .4s, border-color .4s;
}
.desktop-nav.scrolled {
    background:rgba(255,255,255,.95);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--c-border);
    box-shadow:0 1px 12px rgba(0,0,0,.05);
}
.desktop-nav__inner {
    max-width:var(--max-w); margin:0 auto;
    padding:0 var(--pad);
    height:var(--nav-h-desktop);
    display:flex; align-items:center; justify-content:space-between;
}
.desktop-nav__logo { display:flex; align-items:center }
.desktop-nav__logo-name { font-family:var(--f-display); font-size:22px; color:var(--c-gold); letter-spacing:.15em }
.desktop-nav__actions { display:flex; align-items:center; gap:8px }

/* Icon-Buttons in Desktop-Nav */
.dn-icon-btn {
    width:40px; height:40px; border-radius:50%;
    border:1px solid rgba(0,0,0,.12);
    background:transparent;
    color:rgba(26,24,21,.65);
    display:flex; align-items:center; justify-content:center;
    transition:color .2s, border-color .2s, background .2s;
    text-decoration:none;
}
.dn-icon-btn:hover { color:var(--c-gold2); border-color:rgba(212,160,60,.4); background:rgba(212,160,60,.06) }
.dn-icon-btn svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round }

/* Desktop-Nav nur auf Desktop */
@media (max-width:899px) { .desktop-nav { display:none } }

/* ══════════════════════════════════════════════════
   BOTTOM NAV — nur Mobile
══════════════════════════════════════════════════ */
.bottom-nav {
    position:fixed; bottom:0; left:0; right:0;
    background:#fff; border-top:1px solid var(--c-border); box-shadow:0 -1px 10px rgba(0,0,0,.04);
    display:flex; z-index:350;
    padding-bottom:env(safe-area-inset-bottom);
}
.nav-btn { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:8px 2px 6px; border:none; background:none; gap:3px; color:#b3ada0; font-family:var(--f-body); text-decoration:none; transition:color .2s; font-size:9px; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; touch-action:manipulation }
.nav-btn.active,.nav-btn:hover { color:var(--c-gold) }
.nav-btn svg { width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round }
/* Bottom-Nav nur auf Mobile */
@media (min-width:900px) { .bottom-nav { display:none } }

/* ══════════════════════════════════════════════════
   DRAWER (beide Versionen)
══════════════════════════════════════════════════ */
#drawerOverlay { position:fixed; inset:0; background:rgba(26,24,21,.45); z-index:400; opacity:0; pointer-events:none; transition:opacity .3s }
#drawerOverlay.open { opacity:1; pointer-events:all }
#drawer { position:fixed; top:0; right:-100%; width:300px; max-width:85vw; height:100%; background:var(--c-bg2); border-left:1px solid var(--c-border); z-index:410; transition:right .35s cubic-bezier(.4,0,.2,1); overflow-y:auto }
#drawer.open { right:0 }
.drawer__head { display:flex; justify-content:space-between; align-items:center; padding:20px; border-bottom:1px solid var(--c-border) }
.drawer__logo { font-family:var(--f-display); font-size:18px; color:var(--c-gold); letter-spacing:.12em }
.drawer__close { background:none; border:none; color:var(--c-muted); font-size:18px; line-height:1 }
.drawer__section { display:block; padding:12px 20px 4px; font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--c-dim); margin-top:4px }
.drawer__link { display:block; padding:13px 20px; font-size:14px; color:var(--c-muted); border-bottom:1px solid var(--c-border); transition:color .2s }
.drawer__link:hover { color:var(--c-gold) }
.drawer__cta { padding:16px }

/* ══════════════════════════════════════════════════
   SLIDER
══════════════════════════════════════════════════ */
.slider-section { position:relative }
.slider-wrap { position:relative; height:100svh; overflow:hidden }
@media (min-width:900px) { .slider-wrap { height:calc(100svh - var(--nav-h-desktop)) } }

.slides { display:flex; height:100%; will-change:transform }
.slide { min-width:100%; height:100%; position:relative; display:flex; flex-direction:column; justify-content:flex-end }
.slide__bg { position:absolute; inset:0; z-index:0 }
.slide__bg video { width:100%; height:100%; object-fit:cover; opacity:.9 }
.slide__overlay { position:absolute; inset:0; background:linear-gradient(0deg,rgba(255,255,255,1) 0%,rgba(255,255,255,.55) 45%,rgba(255,255,255,.12) 100%) }
.slide__content { position:relative; z-index:2; padding:0 var(--pad) 40px; max-width:var(--max-w); margin:0 auto; width:100% }
@media (min-width:900px) { .slide__content { padding-bottom:72px } .slide__desc { max-width:480px !important; font-size:15px !important } }

.slide__eyebrow { font-size:10px; letter-spacing:.4em; text-transform:uppercase; color:var(--c-gold); margin-bottom:10px; opacity:0; transform:translateY(12px); transition:opacity .5s .15s,transform .5s .15s }
.slide__title { font-family:var(--f-display); font-size:clamp(52px,14vw,88px); line-height:.92; color:var(--c-ink); margin-bottom:12px; opacity:0; transform:translateY(12px); transition:opacity .5s .28s,transform .5s .28s }
.slide__title em { color:var(--c-gold); font-style:italic; display:block }
.slide__desc { font-size:13px; color:var(--c-muted); line-height:1.75; max-width:280px; margin-bottom:22px; opacity:0; transform:translateY(12px); transition:opacity .5s .4s,transform .5s .4s }
.slide__btns { display:flex; gap:10px; flex-wrap:wrap; opacity:0; transform:translateY(12px); transition:opacity .5s .52s,transform .5s .52s }
.slide--active .slide__eyebrow,.slide--active .slide__title,.slide--active .slide__desc,.slide--active .slide__btns { opacity:1; transform:none }

.pill-switcher { position:absolute; top:20px; left:50%; transform:translateX(-50%); z-index:20; white-space:nowrap; display:inline-flex; background:rgba(255,255,255,.75); backdrop-filter:blur(12px); border:1px solid rgba(0,0,0,.1); border-radius:var(--r-pill); padding:4px; gap:2px; box-shadow:0 2px 12px rgba(0,0,0,.08); transition:box-shadow .3s }
.pill-switcher--sticky { position:fixed !important; top:16px; left:50%; transform:translateX(-50%); z-index:95; box-shadow:0 4px 20px rgba(0,0,0,.15) }
.pill-switcher__btn { padding:8px 18px; border-radius:var(--r-pill); border:none; background:transparent; font-size:12px; color:rgba(26,24,21,.55); cursor:pointer; font-family:var(--f-body); letter-spacing:.04em; transition:all .3s; touch-action:manipulation }
.pill-switcher__btn--active { background:var(--c-gold); color:#fff; font-weight:500 }

.slider-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:10; width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.8); border:1px solid rgba(0,0,0,.1); color:rgba(26,24,21,.7); box-shadow:0 2px 12px rgba(0,0,0,.08); display:none; align-items:center; justify-content:center; cursor:pointer; transition:.2s }
.slider-arrow:hover { background:rgba(212,160,60,.15); color:var(--c-gold2); border-color:rgba(212,160,60,.4) }
.slider-arrow--prev { left:20px }
.slider-arrow--next { right:20px }
.slider-arrow svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round }
@media (min-width:900px) { .slider-arrow { display:flex } }

.slider-dots { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); display:flex; gap:6px; z-index:10 }
.slider-dot { width:20px; height:2px; border-radius:2px; background:rgba(0,0,0,.2); border:none; cursor:pointer; transition:.3s; padding:0 }
.slider-dot--active { background:var(--c-gold); width:32px }

/* ══════════════════════════════════════════════════
   LOGO-BANNER
══════════════════════════════════════════════════ */
.logo-banner { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:28px var(--pad) 24px; border-bottom:1px solid var(--c-border); background:var(--c-bg) }
.logo-banner__img  { height:60px; width:auto; margin-bottom:8px }
.logo-banner__name { font-family:var(--f-display); font-size:28px; color:var(--c-gold); letter-spacing:.2em; text-align:center }
.logo-banner__sub  { font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--c-dim); text-align:center; margin-top:3px }
@media (min-width:900px) { .logo-banner__img { height:80px } .logo-banner__name { font-size:40px } }

/* ══════════════════════════════════════════════════
   BEREICH-INHALT
══════════════════════════════════════════════════ */
.area-section { display:none }
.area-section--active { display:block; animation:fadeUp .4s ease }
@keyframes fadeUp { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.area-inner { max-width:var(--max-w); margin:0 auto; padding:0 var(--pad) }

/* WETTER-STATUS */
.weather-banner {
    display:flex; align-items:center; gap:14px;
    padding:14px 18px; margin:20px 0 0;
    border-radius:var(--r-lg);
    font-size:13px;
}
.weather-banner--closed {
    background:rgba(220,38,38,.08);
    border:1px solid rgba(220,38,38,.25);
    color:#b91c1c;
}
.weather-banner--open {
    background:rgba(22,163,74,.08);
    border:1px solid rgba(22,163,74,.22);
    color:#15803d;
}
.weather-banner__icon { font-size:20px; flex-shrink:0; line-height:1 }
.weather-banner__title { font-weight:500; font-size:13px; margin-bottom:2px }
.weather-banner__sub   { font-size:11px; opacity:.7 }
.weather-dot { width:8px; height:8px; border-radius:50%; background:#22c55e; flex-shrink:0; animation:pulse-green 2s infinite }
@keyframes pulse-green { 0%,100%{opacity:1} 50%{opacity:.35} }

/* INFO BLOCK */
.info-block { display:flex; align-items:stretch; min-height:220px; border-bottom:1px solid var(--c-border) }
.info-block__gallery { width:48%; flex-shrink:0; position:relative; overflow:hidden }
.gallery-slides { display:flex; height:100%; transition:transform .5s cubic-bezier(.4,0,.2,1) }
.gallery-slide { min-width:100%; height:100% }
.gallery-slide img { width:100%; height:100%; object-fit:cover }
.gallery-dots { position:absolute; bottom:10px; left:50%; transform:translateX(-50%); display:flex; gap:5px }
.gallery-dot { width:14px; height:2px; border-radius:2px; background:rgba(255,255,255,.55); border:none; cursor:pointer; transition:.3s; padding:0 }
.gallery-dot--active { background:var(--c-gold); width:20px }
.info-block__text { flex:1; padding:24px 20px; display:flex; flex-direction:column; justify-content:center }
.info-block__title { font-size:clamp(18px,3vw,24px); margin-bottom:10px }
.info-block__body  { font-size:13px; color:var(--c-muted); line-height:1.8 }
@media (min-width:900px) { .info-block { min-height:340px } .info-block__gallery { width:52% } .info-block__text { padding:44px 40px } .info-block__body { font-size:14px; max-width:400px } }

/* SECTION */
.section { padding:28px var(--pad); border-bottom:1px solid var(--c-border) }
.section:last-child { border-bottom:none }
@media (min-width:900px) { .section { padding:44px var(--pad) } }

/* ÖFFNUNGSZEITEN */
.oz-row { display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--c-border); font-size:13px }
.oz-row:last-child { border-bottom:none }
.oz-row__day { color:var(--c-muted) }
.oz-row__time { color:var(--c-text) }
.oz-row__closed { color:var(--c-dim) }
.oz-row__special { color:var(--c-gold) }
/* Heute-Highlight — Dot im Label, nicht als Flex-Element (kein Layout-Shift) */
.oz-row--today .oz-row__day  { color:var(--c-text); font-weight:500 }
.oz-row--today .oz-row__day::before { content:'● '; color:#16a34a; font-size:7px; vertical-align:middle }
.oz-row--today .oz-row__time { color:#16a34a; font-weight:500 }
.oz-row--today .oz-row__closed { color:var(--c-red) }
/* restaurant.php nutzt .oz-day/.oz-time/.oz-closed statt __-Modifier */
.oz-row.today .oz-day  { color:var(--c-text); font-weight:500 }
.oz-row.today .oz-day::before { content:'● '; color:#16a34a; font-size:7px; vertical-align:middle }
.oz-row.today .oz-time { color:#16a34a; font-weight:500 }
.oz-row.today .oz-closed { color:var(--c-red) }

/* Desktop 2-Spalten */
@media (min-width:900px) {
    .desktop-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start }
}

/* EVENT CARDS */
.event-card { background:var(--c-bg2); border:1px solid var(--c-border); border-radius:var(--r-lg); overflow:hidden; cursor:pointer; transition:border-color .25s, transform .2s }
.event-card:hover { border-color:rgba(245,158,11,.3); transform:translateY(-2px) }
.event-card + .event-card { margin-top:10px }
@media (min-width:900px) { .event-card + .event-card { margin-top:0 } }
.event-card__img { height:140px; position:relative }
.event-card__img img { width:100%; height:100%; object-fit:cover }
.event-card__badge { position:absolute; bottom:10px; left:12px; font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--c-gold); background:rgba(245,158,11,.12); border:1px solid rgba(245,158,11,.25); padding:3px 9px; border-radius:var(--r-pill) }
.event-card__meta { padding:14px }
.event-card__name { font-size:13px; color:var(--c-white); font-weight:500; margin-bottom:4px }
.event-card__row  { display:flex; gap:10px; font-size:11px; color:var(--c-dim) }
.event-card__more { font-size:11px; color:var(--c-gold); margin-top:6px; display:block }

/* BUTTONS */
.btn { display:inline-flex; align-items:center; justify-content:center; padding:12px 22px; border-radius:var(--r-pill); font-size:13px; font-weight:500; letter-spacing:.04em; border:none; transition:.2s; text-decoration:none; cursor:pointer; font-family:var(--f-body) }
.btn--gold  { background:var(--c-gold); color:#fff }.btn--gold:hover  { background:var(--c-gold2) }
.btn--ghost { background:transparent; color:var(--c-text); border:1px solid rgba(0,0,0,.18) }.btn--ghost:hover { border-color:rgba(0,0,0,.4) }
.btn--outline { background:transparent; color:var(--c-gold2); border:1px solid rgba(212,160,60,.4) }.btn--outline:hover { border-color:var(--c-gold) }
.btn--dark  { background:var(--c-ink); color:#fff }.btn--dark:hover { background:#2a2622 }
.btn--full  { width:100% }
.btn + .btn { margin-top:8px }
@media (min-width:900px) { .btn + .btn { margin-top:0; margin-left:10px } }

/* ══════════════════════════════════════════════════
   SOCIAL MEDIA SEKTION (Startseite)
══════════════════════════════════════════════════ */
.social-section { padding:44px var(--pad) 48px; background:var(--c-bg); border-top:1px solid var(--c-border) }
.social-section__inner { max-width:var(--max-w); margin:0 auto }
.social-section__head { text-align:center; margin-bottom:28px }
.social-section__head h2 { font-family:var(--f-display); font-size:clamp(22px,4vw,32px); color:var(--c-white); margin-bottom:8px }
.social-section__head p  { font-size:13px; color:var(--c-muted) }

/* Instagram Preview-Grid */
.ig-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:3px; margin-bottom:28px }
@media (min-width:600px) { .ig-grid { grid-template-columns:repeat(4,1fr) } }
@media (min-width:900px) { .ig-grid { grid-template-columns:repeat(6,1fr); gap:6px } }
.ig-tile { position:relative; aspect-ratio:1; overflow:hidden; border-radius:var(--r-sm); background:var(--c-bg3); cursor:pointer; display:block; text-decoration:none }
.ig-tile:hover .ig-tile__overlay { opacity:1 }
.ig-tile__bg { width:100%; height:100%; object-fit:cover }
.ig-tile__placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center }
.ig-tile__overlay { position:absolute; inset:0; background:rgba(0,0,0,.35); display:flex; align-items:center; justify-content:center; opacity:0; transition:.25s }
.ig-tile__overlay svg { width:24px; height:24px; stroke:#fff; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round }

/* Platform-Links */
.social-links { display:flex; flex-wrap:wrap; gap:10px; justify-content:center }
.social-link { display:inline-flex; align-items:center; gap:8px; padding:10px 18px; border-radius:var(--r-pill); border:1px solid var(--c-border2); font-size:12px; color:var(--c-muted); font-family:var(--f-body); text-decoration:none; transition:all .2s; background:var(--c-bg); touch-action:manipulation }
.social-link:hover { border-color:var(--c-gold); color:var(--c-gold); background:rgba(212,160,60,.04) }
.social-link svg { width:16px; height:16px; flex-shrink:0 }
.social-link--instagram svg { stroke:none; fill:#e1306c }
.social-link--facebook  svg { stroke:none; fill:#1877f2 }
.social-link--tiktok    svg { fill:#000 }
.social-link--tripadvisor svg { fill:#00af87 }
.social-link--google    svg { stroke:none }

/* POPUP */
#popupOverlay { position:fixed; inset:0; background:rgba(26,24,21,.5); z-index:200; display:flex; align-items:flex-end; opacity:0; pointer-events:none; transition:opacity .3s }
#popupOverlay.open { opacity:1; pointer-events:all }
#popup { background:var(--c-bg2); border-radius:var(--r-xl) var(--r-xl) 0 0; width:100%; max-height:88svh; overflow-y:auto; transform:translateY(100%); transition:transform .4s cubic-bezier(.4,0,.2,1) }
#popupOverlay.open #popup { transform:none }
@media (min-width:900px) { #popupOverlay { align-items:center; justify-content:center } #popup { border-radius:var(--r-xl); max-width:540px; max-height:88vh } }
.popup__handle { width:34px; height:3px; background:var(--c-border2); border-radius:2px; margin:12px auto 0 }
@media (min-width:900px) { .popup__handle { display:none } }
.popup__img { height:200px; position:relative }
.popup__img img { width:100%; height:100%; object-fit:cover }
.popup__close { position:absolute; top:12px; right:12px; width:32px; height:32px; border-radius:50%; background:rgba(0,0,0,.45); border:none; color:#fff; font-size:15px; cursor:pointer; display:flex; align-items:center; justify-content:center }
.popup__body { padding:20px 24px 28px }
.popup__area { font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--c-gold); display:block; margin-bottom:5px }
.popup__title { font-family:var(--f-display); font-size:26px; color:var(--c-ink); margin-bottom:10px }
.popup__meta { display:flex; gap:16px; margin-bottom:14px; font-size:12px; color:var(--c-muted) }
.popup__meta strong { color:var(--c-text); font-weight:400 }
.popup__text { font-size:13px; color:var(--c-muted); line-height:1.85; margin-bottom:18px }

/* SEO BLOCK */
.seo-block { padding:40px var(--pad); background:var(--c-bg3); border-top:1px solid var(--c-border) }
.seo-block__inner { max-width:var(--max-w); margin:0 auto }
.seo-block__title { font-family:var(--f-display); font-size:clamp(20px,3vw,28px); color:var(--c-white); margin-bottom:14px }
.seo-block p { font-size:13px; color:var(--c-dim); line-height:1.9; margin-bottom:10px; max-width:800px }

/* ══════════════════════════════════════════════════
   FOOTER — Desktop: 3 Spalten nebeneinander
══════════════════════════════════════════════════ */
.site-footer { background:var(--c-bg3); border-top:1px solid var(--c-border); padding:48px var(--pad) 24px }
.site-footer__inner { max-width:var(--max-w); margin:0 auto; display:grid; grid-template-columns:1fr; gap:32px }
@media (min-width:900px) {
    .site-footer__inner { grid-template-columns:1.8fr 1fr 1fr 1fr; gap:48px }
}
.site-footer__logo { font-family:var(--f-display); font-size:24px; color:var(--c-gold); letter-spacing:.15em; display:block; margin-bottom:6px }
.site-footer__sub  { font-size:10px; letter-spacing:.2em; color:var(--c-dim); text-transform:uppercase; display:block; margin-bottom:14px }
.site-footer__address { font-size:13px; color:var(--c-muted); line-height:1.9; font-style:normal }
.site-footer__address a { color:var(--c-muted) }
.site-footer__nav-title { font-size:9px; letter-spacing:.2em; text-transform:uppercase; color:var(--c-dim); margin-bottom:12px; display:block }
.site-footer__nav a { display:block; font-size:13px; color:var(--c-muted); margin-bottom:8px; transition:color .2s }
.site-footer__nav a:hover { color:var(--c-gold) }

/* Footer-Nav: Mobile untereinander, Desktop nebeneinander */
.footer-nav-group { display:grid; grid-template-columns:1fr; gap:24px }
@media (min-width:900px) { .footer-nav-group { display:contents } }

.site-footer__bottom { max-width:var(--max-w); margin:28px auto 0; padding-top:20px; border-top:1px solid var(--c-border); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; font-size:12px; color:var(--c-dim) }
.site-footer__social { display:flex; gap:10px }
.site-footer__social a { color:var(--c-dim); transition:color .2s }
.site-footer__social a:hover { color:var(--c-gold) }

/* FORMULARE */
.form-group { margin-bottom:18px }
.form-label { display:block; font-size:12px; color:var(--c-muted); margin-bottom:7px }
.form-input,.form-select,.form-textarea { width:100%; background:#fff; border:1px solid var(--c-border2); color:var(--c-text); border-radius:var(--r-md); padding:13px 16px; font-size:14px; font-family:var(--f-body); transition:border-color .2s; outline:none }
.form-input:focus,.form-select:focus,.form-textarea:focus { border-color:var(--c-gold) }
.form-input.error { border-color:var(--c-red) }
.form-error { font-size:11px; color:#f87171; margin-top:4px; display:block }
.form-hint  { font-size:11px; color:var(--c-dim); margin-top:4px; display:block }
.form-textarea { min-height:120px; resize:vertical }
.form-checkbox { display:flex; align-items:flex-start; gap:10px; margin-bottom:14px }
.form-checkbox input { width:16px; height:16px; margin-top:2px; flex-shrink:0; accent-color:var(--c-gold) }
.form-checkbox label { font-size:13px; color:var(--c-muted); line-height:1.6 }

/* AUTH */
.auth-page { min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px var(--pad) }
.auth-card { background:var(--c-bg2); border:1px solid var(--c-border); border-radius:var(--r-xl); padding:36px; width:100%; max-width:420px }
.auth-logo  { font-family:var(--f-display); font-size:30px; color:var(--c-gold); letter-spacing:.2em; text-align:center; display:block; margin-bottom:4px }
.auth-sub   { font-size:11px; color:var(--c-muted); text-align:center; display:block; margin-bottom:28px; letter-spacing:.08em }
.auth-title { font-family:var(--f-display); font-size:24px; color:var(--c-white); margin-bottom:24px }
.auth-footer { text-align:center; font-size:13px; color:var(--c-muted); margin-top:20px }
.auth-footer a { color:var(--c-gold) }

/* FLASH */
.flash { position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:500; padding:12px 20px; border-radius:var(--r-pill); font-size:13px; font-weight:500; display:flex; align-items:center; gap:10px; box-shadow:0 4px 24px rgba(0,0,0,.18); max-width:380px; width:calc(100% - 32px); animation:slideDown .3s ease }
.flash--success { background:var(--c-gold); color:#fff }
.flash--error   { background:var(--c-red);  color:#fff }
.flash--info    { background:#1e40af; color:#fff }
.flash__close   { background:none; border:none; opacity:.7; font-size:14px; cursor:pointer; color:inherit; margin-left:auto }
@keyframes slideDown { from{opacity:0;transform:translateX(-50%) translateY(-10px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }

/* ══════════════════════════════════════════════════
   COOKIE BANNER
══════════════════════════════════════════════════ */
.cookie-banner {
    position:fixed; bottom:0; left:0; right:0; z-index:300;
    background:var(--c-bg2);
    border-top:1px solid var(--c-border);
    padding:20px var(--pad);
    opacity:0; pointer-events:none;
    transform:translateY(8px);
    transition:opacity .4s, transform .4s;
}
.cookie-banner.visible { opacity:1; pointer-events:all; transform:none }
.cookie-banner__inner { max-width:var(--max-w); margin:0 auto; display:flex; flex-direction:column; gap:16px }
@media (min-width:700px) { .cookie-banner__inner { flex-direction:row; align-items:center; justify-content:space-between } }
.cookie-banner__title { font-size:14px; font-weight:500; color:var(--c-white); margin-bottom:4px }
.cookie-banner__desc  { font-size:12px; color:var(--c-muted); line-height:1.6 }
.cookie-banner__link  { color:var(--c-gold); transition:color .2s }
.cookie-banner__link:hover { color:#fbbf24 }
.cookie-banner__actions { display:flex; gap:8px; flex-shrink:0; flex-wrap:wrap }
.cookie-btn { padding:9px 16px; font-size:12px; white-space:nowrap }
.cookie-banner__settings-link { background:none; border:none; font-size:12px; color:var(--c-muted); cursor:pointer; font-family:var(--f-body); padding:6px; text-decoration:underline; transition:color .2s }
.cookie-banner__settings-link:hover { color:var(--c-text) }

/* COOKIE SETTINGS MODAL */
.cookie-settings { position:fixed; inset:0; z-index:400; display:flex; align-items:flex-end; justify-content:center; pointer-events:none; opacity:0; transition:opacity .3s }
.cookie-settings.open { pointer-events:all; opacity:1 }
@media (min-width:600px) { .cookie-settings { align-items:center } }
.cookie-settings__overlay { position:absolute; inset:0; background:rgba(0,0,0,.7) }
.cookie-settings__box { position:relative; z-index:1; background:var(--c-bg2); border-radius:var(--r-xl) var(--r-xl) 0 0; width:100%; max-width:480px; max-height:90svh; overflow-y:auto; transform:translateY(20px); transition:transform .3s }
.cookie-settings.open .cookie-settings__box { transform:none }
@media (min-width:600px) { .cookie-settings__box { border-radius:var(--r-xl) } }
.cookie-settings__head { display:flex; justify-content:space-between; align-items:center; padding:20px 24px; border-bottom:1px solid var(--c-border) }
.cookie-settings__title { font-family:var(--f-display); font-size:20px; color:var(--c-white) }
.cookie-settings__close { background:none; border:none; color:var(--c-muted); font-size:18px; cursor:pointer }
.cookie-settings__body { padding:8px 0 }
.cookie-settings__foot { padding:16px 24px 24px }
.cookie-item { display:flex; justify-content:space-between; align-items:center; padding:16px 24px; border-bottom:1px solid var(--c-border); gap:16px }
.cookie-item__name { font-size:13px; font-weight:500; color:var(--c-text); margin-bottom:3px }
.cookie-item__desc { font-size:11px; color:var(--c-muted); line-height:1.6 }

/* Toggle Switch */
.cookie-toggle { position:relative; width:44px; height:24px; flex-shrink:0; cursor:pointer }
.cookie-toggle__input { position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer }
.cookie-toggle__slider { position:absolute; inset:0; background:var(--c-border2); border-radius:12px; transition:.3s }
.cookie-toggle__slider::after { content:''; position:absolute; width:18px; height:18px; border-radius:50%; background:#fff; top:3px; left:3px; transition:.3s }
.cookie-toggle__input:checked + .cookie-toggle__slider { background:var(--c-gold) }
.cookie-toggle__input:checked + .cookie-toggle__slider::after { transform:translateX(20px) }
.cookie-toggle--locked { width:44px; height:24px; background:rgba(245,158,11,.15); border:1px solid rgba(245,158,11,.25); border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:11px; color:var(--c-gold); flex-shrink:0 }

/* Cookie-Einstellungen Button (immer in Ecke) */
.cookie-settings-btn { position:fixed; bottom:calc(var(--nav-h-mobile) + 12px); right:14px; z-index:90; width:36px; height:36px; border-radius:50%; background:var(--c-bg2); border:1px solid var(--c-border2); font-size:16px; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:.6; transition:opacity .2s }
.cookie-settings-btn:hover { opacity:1 }
@media (min-width:900px) { .cookie-settings-btn { bottom:16px } }

/* ══════════════════════════════════════════════════
   HELLES THEME — Ergänzungen (v4)
   Küstenlandschaft-Motiv + Feinschliff
══════════════════════════════════════════════════ */

/* Body: warmes Weiß, feine Textur-Basis */
body {
    background:
        radial-gradient(ellipse 120% 80% at 50% -10%, rgba(212,160,60,.05), transparent 60%),
        var(--c-bg);
}

/* Dezentes Küsten-Motiv — nutzt /assets/images/kueste.png falls vorhanden.
   Als Wasserzeichen im Footer + optional in Sektionen. */
.site-footer {
    position:relative;
    overflow:hidden;
}
.site-footer::before {
    content:'';
    position:absolute;
    right:-40px; bottom:-20px;
    width:min(420px, 60%);
    height:220px;
    background:url('/assets/images/kueste.png') no-repeat right bottom;
    background-size:contain;
    opacity:.06;
    pointer-events:none;
    filter:grayscale(1);
}
@media (max-width:899px){ .site-footer::before { opacity:.04; width:70% } }

/* Küsten-Motiv als optionales Section-Wasserzeichen */
.coast-watermark { position:relative; overflow:hidden }
.coast-watermark::after {
    content:'';
    position:absolute;
    left:-30px; top:50%; transform:translateY(-50%);
    width:min(340px,45%); height:180px;
    background:url('/assets/images/kueste.png') no-repeat left center;
    background-size:contain;
    opacity:.05;
    filter:grayscale(1);
    pointer-events:none;
}

/* Logo-Banner: heller Hintergrund, dunkler Untertitel */
.logo-banner { background:var(--c-bg2) }
.logo-banner__sub { color:var(--c-muted) }

/* Karten & Sektionen bekommen feinen Schatten statt harter Border-Kontraste */
.event-card {
    background:#fff;
    box-shadow:0 1px 3px rgba(26,24,21,.04), 0 8px 24px rgba(26,24,21,.03);
}
.event-card:hover {
    border-color:rgba(212,160,60,.4);
    box-shadow:0 2px 6px rgba(26,24,21,.06), 0 12px 32px rgba(26,24,21,.06);
}
.event-card__badge {
    background:rgba(212,160,60,.12);
    border:1px solid rgba(212,160,60,.3);
    color:var(--c-gold2);
}

/* Auth-Card: sanfter Schatten */
.auth-card {
    background:#fff;
    box-shadow:0 4px 40px rgba(26,24,21,.08);
}

/* Popup / Drawer / Cookie: helle Flächen */
#popup, #drawer, .cookie-banner,
.cookie-settings__box { background:#fff }
#drawer { border-left:1px solid var(--c-border) }
.cookie-banner { box-shadow:0 -2px 24px rgba(26,24,21,.08) }

/* SEO-Block: warmes Off-White statt fast-schwarz */
.seo-block { background:var(--c-bg2) }
.seo-block p { color:var(--c-muted) }

/* Info-Block Gallery-Overlay bei fehlendem Bild */
.info-block { border-color:var(--c-border) }

/* Section-Label: wärmeres Gold, etwas kräftiger auf Weiß */
.section-label { color:var(--c-gold2) }

/* Cookie settings button hell */
.cookie-settings-btn { background:#fff; border:1px solid var(--c-border2); box-shadow:0 2px 8px rgba(26,24,21,.06) }

/* Gold-Balken-Element wie auf Flyern (nutzbar für Badges/Highlights) */
.flyer-bar {
    display:inline-block;
    background:var(--c-gold);
    color:#fff;
    font-family:var(--f-body);
    font-weight:700;
    letter-spacing:.02em;
    padding:8px 20px;
    font-size:clamp(20px,4vw,34px);
    line-height:1.1;
}

/* Weiße Flächen-Überschriften garantiert dunkel (Fallback) */
h1,h2,h3,.popup__title,.auth-title,.cookie-settings__title { color:var(--c-ink) }

/* ── ICONS v4: feine Ausrichtung ── */
.drawer__link { display:flex; align-items:center; gap:10px }
.drawer__link svg { flex-shrink:0; color:var(--c-gold); opacity:.85 }
.drawer__close svg { display:block }
.nav-btn svg { stroke-width:1.4 }
.dn-icon-btn svg { stroke-width:1.4 }