/* ============================================================
   SAUNA LOUNGE & SPA — "Private SPA bei Nacht"
   Signature Dark-Luxe Theme · unverwechselbar
   ============================================================ */
:root{
  --bg:#120c08;            /* tiefes Espressoschwarz */
  --bg-2:#180f0a;
  --surface:#1f150d;       /* warmes Dunkelholz */
  --surface-2:#271a10;
  --line:#3a281a;
  --line-2:#4a3623;
  --ink:#f4e9d8;           /* warmes Cremeweiß */
  --ink-2:#cbbca3;
  --muted:#9a8669;
  --gold:#d6ab5f;          /* leuchtendes Gold */
  --gold-2:#f0d49a;
  --gold-deep:#a87c38;
  --ember:#e3742a;         /* Glut */
  --ember-soft:#b85a24;
  --maxw:1180px;
  --radius:14px;
  --radius-lg:26px;
  --shadow:0 30px 80px rgba(0,0,0,.55);
  --glow:0 0 0 1px rgba(214,171,95,.25),0 18px 50px rgba(227,116,42,.18);
  /* --serif heisst aus historischen Gruenden so, ist aber die Display-Schrift
     fuer Ueberschriften und Auszeichnungen. Serifen kommen auf der Seite nicht
     mehr vor. Outfit wird lokal ausgeliefert (public/fonts, css/fonts.css). */
  --serif:'Outfit',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --sans:'Outfit',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;position:relative;
}
/* Feine Körnung über allem (Atmosphäre) */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{max-width:100%;display:block}
a{color:var(--gold);text-decoration:none;transition:.2s}
a:hover{color:var(--gold-2)}
/* Outfit ist eine geometrische Grotesk. Grosse Ueberschriften wirken darin
   leichter und hochwertiger, wenn Strichstaerke und Laufweite zurueckgenommen
   werden – kleine Ueberschriften brauchen dagegen etwas mehr Gewicht. */
h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.06;margin:0 0 .4em;letter-spacing:-.02em}
h1{font-size:clamp(2.9rem,7vw,5.6rem);font-weight:300;letter-spacing:-.035em}
h2{font-size:clamp(2.1rem,4.6vw,3.6rem);font-weight:300;letter-spacing:-.03em}
h3{font-size:clamp(1.35rem,2.5vw,1.9rem);font-weight:500;letter-spacing:-.015em}
p{margin:0 0 1rem}
.container{max-width:var(--maxw);margin:0 auto;padding:0 26px;position:relative;z-index:2}
.narrow{max-width:760px;margin-inline:auto}
.center{text-align:center}
.muted{color:var(--muted)}
.lead{font-size:clamp(1.12rem,2vw,1.4rem);color:var(--ink-2);font-weight:400}
section{padding:110px 0;position:relative}
.section-alt{background:linear-gradient(180deg,var(--bg-2),var(--bg))}
.section-sm{padding:70px 0}

/* Eyebrow mit goldener Linie */
.eyebrow{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--sans);font-size:.74rem;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);margin-bottom:1.1rem}
.eyebrow::before{content:"";width:34px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}
.center .eyebrow{justify-content:center}
.center .eyebrow::after{content:"";width:34px;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.6rem;justify-content:center;padding:1rem 2rem;border-radius:999px;font-weight:600;font-size:.95rem;letter-spacing:.02em;border:1px solid transparent;cursor:pointer;transition:.22s;font-family:var(--sans);position:relative}
.btn-primary,.btn-gold{background:linear-gradient(135deg,var(--gold-2),var(--gold) 45%,var(--ember-soft));color:#231405;box-shadow:var(--glow)}
.btn-primary:hover,.btn-gold:hover{transform:translateY(-2px);color:#231405;box-shadow:0 0 0 1px rgba(214,171,95,.4),0 22px 60px rgba(227,116,42,.36)}
.btn-ghost{background:rgba(255,255,255,.02);border-color:var(--line-2);color:var(--ink)}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.btn-block{width:100%}
.btn-lg{padding:1.15rem 2.4rem;font-size:1.02rem}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.link-arrow{color:var(--gold);font-weight:600;letter-spacing:.02em}
.link-arrow:hover{color:var(--gold-2)}

/* Header */
.site-header{position:sticky;top:0;z-index:60;background:rgba(18,12,8,.6);backdrop-filter:saturate(160%) blur(18px);border-bottom:1px solid rgba(214,171,95,.12)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand img{height:38px;width:auto;color:var(--ink);filter:drop-shadow(0 2px 8px rgba(0,0,0,.5))}
.nav-links{display:flex;gap:2rem;align-items:center;list-style:none;margin:0;padding:0}
.nav-links a{color:var(--ink-2);font-size:.86rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase}
.nav-links a:hover,.nav-links a.active{color:var(--gold)}
.nav-cta a{padding:.6rem 1.3rem;text-transform:none;letter-spacing:0}
.burger{display:none;background:none;border:0;color:var(--gold);font-size:1.6rem;cursor:pointer}

/* HERO — immersiv, mit Goldrahmen & Glut */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,12,8,.55),rgba(18,12,8,.82)),url('/img/hero.jpg') center/cover no-repeat;background-color:#160d08}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(55% 60% at 76% 28%,rgba(227,116,42,.32),transparent 65%),radial-gradient(40% 50% at 10% 90%,rgba(214,171,95,.12),transparent 60%)}
.hero .container{z-index:3;padding-top:60px}
.hero-frame{position:absolute;inset:22px;border:1px solid rgba(214,171,95,.28);border-radius:6px;z-index:2;pointer-events:none}
.hero h1{max-width:16ch;text-shadow:0 4px 40px rgba(0,0,0,.5)}
.hero .lead{max-width:46ch;margin:1.4rem 0 2.4rem;color:rgba(244,233,216,.9)}
.hero-cta{display:flex;gap:1.2rem;flex-wrap:wrap;align-items:center}
.hero-side{position:absolute;right:30px;top:50%;transform:translateY(-50%) rotate(180deg);writing-mode:vertical-rl;font-size:.72rem;letter-spacing:.5em;text-transform:uppercase;color:var(--muted);z-index:3}

/* Das laufende Band mit den Leistungen ist auf Kundenwunsch entfallen.
   Die zugehoerigen Regeln wurden entfernt. */

/* Section heading block */
.shead{margin-bottom:60px}
.shead .num{font-family:var(--serif);font-size:1rem;color:var(--gold-deep);letter-spacing:.1em}

/* Grids & Cards */
.grid{display:grid;gap:24px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;transition:.3s}
.tile:hover{transform:translateY(-6px);border-color:var(--gold-deep);box-shadow:var(--glow)}
.tile img{aspect-ratio:4/3;object-fit:cover;width:100%;filter:saturate(1.05) brightness(.92)}
.tile .pad{padding:26px}
.tile h3{font-size:1.35rem;margin-bottom:.3rem}
.tile p{color:var(--muted);margin:0;font-size:.97rem}
.feature{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:30px;transition:.25s}
.feature:hover{border-color:var(--gold-deep);box-shadow:var(--glow);transform:translateY(-4px)}
.feature .ico{font-size:1.7rem;margin-bottom:.7rem;display:block;filter:drop-shadow(0 0 14px rgba(227,116,42,.5))}
.feature h3{font-size:1.2rem;margin-bottom:.25rem}
.feature p{color:var(--muted);margin:0;font-size:.95rem}

/* Split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split img{border-radius:var(--radius-lg);box-shadow:var(--shadow);aspect-ratio:4/3;object-fit:cover;width:100%;border:1px solid var(--line)}
.split.reverse .txt{order:2}

/* Band */
.band{position:relative;border-radius:var(--radius-lg);overflow:hidden;min-height:480px;display:flex;align-items:center;border:1px solid var(--line)}
.band::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(18,12,8,.82),rgba(18,12,8,.2));z-index:1}
.band::after{content:"";position:absolute;inset:0;background:radial-gradient(50% 60% at 80% 30%,rgba(227,116,42,.3),transparent 70%);z-index:1}
.band img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.band .band-in{position:relative;z-index:2;padding:54px;max-width:560px}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;counter-reset:s}
.stepc{text-align:center}
.stepc .n{width:64px;height:64px;border-radius:50%;border:1px solid var(--gold-deep);background:radial-gradient(circle at 50% 30%,rgba(227,116,42,.25),transparent);color:var(--gold);display:grid;place-items:center;margin:0 auto 1.2rem;font-family:var(--serif);font-size:1.5rem;counter-increment:s;box-shadow:0 0 30px rgba(227,116,42,.2)}
.stepc .n::before{content:counter(s,decimal-leading-zero)}

/* Pricing */
.price-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.price-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:38px;display:flex;flex-direction:column;transition:.25s}
.price-card:hover{border-color:var(--gold-deep);box-shadow:var(--glow)}
.price-card.featured{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),var(--shadow);background:linear-gradient(180deg,var(--surface-2),var(--surface))}
.price-card .tag{font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:.5rem}
.price-card .amount{font-family:var(--serif);font-size:3.6rem;font-weight:500;color:var(--gold-2);line-height:1}
.price-card .per{color:var(--muted);font-size:1rem}
.price-card ul{list-style:none;padding:0;margin:1.4rem 0;color:var(--ink-2)}
.price-card li{padding:.5rem 0;border-bottom:1px solid var(--line);font-size:.97rem}
.price-card .btn{margin-top:auto}

/* FAQ */
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{width:100%;text-align:left;background:none;border:0;color:var(--ink);font-family:var(--serif);font-size:1.3rem;padding:26px 0;cursor:pointer;display:flex;justify-content:space-between;gap:1rem;align-items:center}
.faq-q .plus{color:var(--gold);font-size:1.6rem;transition:.2s;font-weight:300}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;color:var(--ink-2)}
.faq-item.open .faq-a{max-height:520px}
.faq-item.open .plus{transform:rotate(45deg)}
.faq-a-inner{padding:0 0 26px;max-width:70ch}

/* Gallery + Lightbox */
.gallery{columns:3;column-gap:20px}
.gallery img{margin-bottom:20px;border-radius:var(--radius);break-inside:avoid;border:1px solid var(--line);cursor:zoom-in;transition:.25s;filter:brightness(.9)}
.gallery img:hover{filter:brightness(1.05);border-color:var(--gold-deep);transform:scale(1.01)}
.lightbox{position:fixed;inset:0;background:rgba(8,5,3,.92);display:none;place-items:center;z-index:300;padding:24px;cursor:zoom-out;backdrop-filter:blur(8px)}
.lightbox.open{display:grid}
.lightbox img{max-width:92vw;max-height:90vh;border-radius:14px;box-shadow:var(--shadow);border:1px solid var(--gold-deep)}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px}
.info-row{display:flex;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.info-row .ico{color:var(--gold);font-size:1.3rem}
iframe.map{width:100%;height:360px;border:0;border-radius:var(--radius-lg);filter:invert(.9) hue-rotate(180deg) saturate(.7) brightness(.9);border:1px solid var(--line)}

/* ===== Booking wizard ===== */
.wizard{max-width:1000px;margin:0 auto}
.stepbar{display:flex;gap:10px;margin-bottom:40px;flex-wrap:wrap;justify-content:center}
.stepbar .s{padding:9px 18px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--muted);font-size:.82rem;font-weight:600;letter-spacing:.03em}
.stepbar .s.active{background:linear-gradient(135deg,var(--gold-2),var(--gold));color:#231405;border-color:transparent}
.stepbar .s.done{color:var(--gold);border-color:var(--gold-deep)}
.wstep{display:none}.wstep.active{display:block;animation:fade .3s}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1}}
.book-layout{display:grid;grid-template-columns:1.7fr 1fr;gap:36px;align-items:start}
.book-layout .bk-main{position:sticky;top:84px;align-self:start}
.tariff-opt{display:flex;justify-content:space-between;gap:1rem;align-items:center;border:1px solid var(--line);border-radius:var(--radius);padding:22px;cursor:pointer;margin-bottom:14px;transition:.2s;background:var(--surface)}
.tariff-opt:hover{border-color:var(--gold-deep)}
.tariff-opt.selected{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.tariff-opt h4{margin:0 0 .15rem;font-size:1.15rem}
.tariff-opt .desc{color:var(--muted);font-size:.9rem}
.tariff-opt .price{font-family:var(--serif);font-size:1.8rem;color:var(--gold-2);white-space:nowrap}
.cal{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px}
.cal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.cal-head strong{font-family:var(--serif);font-size:1.25rem}
.cal-head button{background:var(--surface-2);border:1px solid var(--line);color:var(--ink);border-radius:50%;width:42px;height:42px;cursor:pointer;font-size:1.1rem}
.cal-head button:hover{border-color:var(--gold);color:var(--gold)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.cal-grid .dow{text-align:center;color:var(--muted);font-size:.7rem;font-weight:600;padding:4px 0;letter-spacing:.1em}
.cal-day{aspect-ratio:1;border-radius:12px;background:var(--bg-2);border:1px solid var(--line);color:var(--ink-2);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;font-size:1rem;font-weight:500;position:relative;transition:.15s}
.cal-day.empty{background:none;border:0;cursor:default}
.cal-day .dot{width:6px;height:6px;border-radius:50%;margin-top:3px}
.cal-day.free .dot{background:#6cc28a}
.cal-day.limited .dot{background:var(--ember)}
.cal-day.free:hover,.cal-day.limited:hover{border-color:var(--gold);color:var(--gold);box-shadow:0 0 16px rgba(227,116,42,.2)}
.cal-day.full,.cal-day.unavailable{opacity:.32;cursor:not-allowed}
.cal-day.full .dot{background:var(--muted)}
.cal-day.selected{background:linear-gradient(135deg,var(--gold-2),var(--gold));color:#231405;border-color:transparent}
.cal-day.selected .dot{background:#231405}
.cal-legend{display:flex;gap:20px;margin-top:18px;flex-wrap:wrap;color:var(--muted);font-size:.82rem;align-items:center}
.cal-legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:middle}
.daypanel{margin-top:28px;padding-top:28px;border-top:1px solid var(--line)}
.daypanel h4{font-family:var(--serif);font-size:1.3rem;margin-bottom:4px}
.timeline{margin:18px 0 8px}
.tl-bar{position:relative;height:48px;background:var(--bg-2);border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.tl-seg{position:absolute;top:0;bottom:0}
.tl-seg.booking{background:repeating-linear-gradient(45deg,#5a3f22,#5a3f22 6px,#43301b 6px,#43301b 12px);border-left:2px solid var(--gold)}
.tl-seg.buffer{background:rgba(227,116,42,.14)}
.tl-seg.block{background:rgba(184,90,36,.3)}
.tl-ticks{display:flex;justify-content:space-between;color:var(--muted);font-size:.7rem;margin-top:6px}
.tl-key{display:flex;gap:16px;font-size:.8rem;color:var(--muted);margin-top:10px;flex-wrap:wrap}
.tl-key span::before{content:"";display:inline-block;width:12px;height:10px;border-radius:3px;margin-right:6px;vertical-align:middle}
.tl-key .k-free::before{background:#2f4a36}.tl-key .k-book::before{background:#5a3f22}.tl-key .k-buf::before{background:rgba(227,116,42,.3)}
.slot-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px;margin-top:18px}
.slot{padding:13px 8px;border:1px solid var(--line);border-radius:12px;text-align:center;cursor:pointer;background:var(--surface);transition:.15s;font-weight:600}
.slot:hover{border-color:var(--gold)}
.slot.selected{background:linear-gradient(135deg,var(--gold-2),var(--gold));color:#231405;border-color:transparent}
.slot small{display:block;color:var(--muted);font-weight:400;font-size:.76rem;margin-top:2px}
.slot.selected small{color:rgba(35,20,5,.7)}
.empty-note{color:var(--muted);padding:14px;background:var(--bg-2);border:1px solid var(--line);border-radius:12px;font-size:.95rem}
.field{margin-bottom:16px}
.field label{display:block;margin-bottom:6px;font-size:.86rem;color:var(--ink-2);font-weight:500}
.field input,.field select,.field textarea{width:100%;padding:14px 16px;background:var(--bg-2);border:1px solid var(--line);border-radius:12px;color:var(--ink);font-size:1rem;font-family:var(--sans)}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 4px rgba(214,171,95,.15)}
.checkrow{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;color:var(--ink-2)}
.checkrow input{width:18px;height:18px;margin-top:3px;flex:0 0 auto;accent-color:var(--gold)}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.stepper button{width:48px;height:48px;border:0;background:var(--surface);color:var(--ink);font-size:1.3rem;cursor:pointer}
.stepper button:hover{background:var(--surface-2);color:var(--gold)}
.stepper input{width:66px;text-align:center;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);border-radius:0;background:var(--bg-2)}
.stepper input:focus{box-shadow:none}
.summary{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px;position:sticky;top:84px;align-self:start}
.summary h4{font-family:var(--serif);font-size:1.4rem}
.summary .row{display:flex;justify-content:space-between;padding:.4rem 0;color:var(--ink-2);font-size:.95rem;gap:1rem}
.summary .total{border-top:1px solid var(--line);margin-top:.6rem;padding-top:.9rem;font-family:var(--serif);font-size:1.7rem;color:var(--gold-2);display:flex;justify-content:space-between}
.pay-methods{display:grid;gap:12px;margin:18px 0}
.pay-opt{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;padding:15px;cursor:pointer;background:var(--surface)}
.pay-opt.selected{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.note{background:rgba(227,116,42,.1);border:1px solid var(--ember-soft);border-radius:12px;padding:15px 16px;color:var(--gold-2);font-size:.9rem}
.alert{background:rgba(184,60,47,.14);border:1px solid #8a3a30;color:#f0b8b0;border-radius:12px;padding:12px 14px;margin:14px 0;font-size:.92rem}
.success-icon{width:76px;height:76px;border-radius:50%;background:radial-gradient(circle,rgba(227,116,42,.25),transparent);border:1px solid var(--gold-deep);color:var(--gold);display:grid;place-items:center;font-size:2rem;margin:0 auto 1rem;box-shadow:0 0 40px rgba(227,116,42,.25)}

/* Badges */
.badge{display:inline-block;padding:.2rem .6rem;border-radius:999px;font-size:.74rem;font-weight:600}
.badge.green{background:rgba(108,194,138,.16);color:#8fd4a3}
.badge.amber{background:rgba(227,116,42,.18);color:var(--gold-2)}
.badge.red{background:rgba(184,60,47,.18);color:#f0a59c}
.badge.blue{background:rgba(214,171,95,.16);color:var(--gold)}

/* Cookie banner */
.cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:200;max-width:460px;margin-inline:auto;background:rgba(31,21,13,.94);backdrop-filter:blur(16px);border:1px solid var(--line-2);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
.cookie h4{font-family:var(--serif);font-size:1.1rem;margin-bottom:.3rem}
.cookie p{font-size:.86rem;color:var(--ink-2);margin:0 0 .9rem}
.cookie .row{display:flex;gap:10px;flex-wrap:wrap}
.cookie .btn{padding:.65rem 1.1rem;font-size:.88rem;flex:1}
.cookie-hide{display:none}

/* Footer */
.site-footer{background:var(--bg-2);border-top:1px solid var(--line);padding:64px 0 30px;color:var(--muted);font-size:.9rem}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:44px}
.footer-grid img{height:34px;margin-bottom:1rem}
.footer-grid h4{color:var(--gold);font-family:var(--sans);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:1rem}
.footer-grid a{color:var(--ink-2);display:block;padding:.25rem 0}
.footer-grid a:hover{color:var(--gold)}
.footer-bottom{margin-top:44px;padding-top:24px;border-top:1px solid var(--line);display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.footer-bottom a{color:var(--muted)}

/* Admin (dunkel) */
.admin-shell{display:grid;grid-template-columns:240px 1fr;min-height:100vh;transition:grid-template-columns .25s ease}
.admin-shell.side-collapsed{grid-template-columns:72px 1fr}
.admin-topbar,.admin-scrim{display:none}
.admin-side{background:var(--bg-2);border-right:1px solid var(--line);padding:18px 14px}
.admin-side-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px}
.as-logo{height:42px}
.as-burger{background:none;border:0;cursor:pointer;display:flex;flex-direction:column;gap:4px;padding:7px;border-radius:8px}
.as-burger:hover{background:var(--surface)}
.as-burger span{width:20px;height:2px;background:var(--gold);border-radius:2px}
.admin-side a,.as-logout button{display:flex;align-items:center;gap:12px;padding:11px 12px;border-radius:10px;color:var(--ink-2);margin-bottom:4px;white-space:nowrap;position:relative;width:100%;text-align:left;font-size:1rem}
.admin-side .ai{flex:none;width:22px;text-align:center;font-size:1.05rem}
.admin-side a.active,.admin-side a:hover,.as-logout button:hover{background:var(--surface);color:var(--gold)}
.as-logout{margin-top:16px}
.as-home{font-size:.9rem;margin-top:6px}
/* Eingeklappt: nur Symbole + Tooltip beim Hover */
.side-collapsed .admin-side{padding:18px 10px}
.side-collapsed .admin-side-top{justify-content:center}
.side-collapsed .as-logo{display:none}
.side-collapsed .admin-side .al{display:none}
.side-collapsed .admin-side a,.side-collapsed .as-logout button{justify-content:center;padding:11px 0;gap:0}
.side-collapsed .admin-side a[data-t]:hover::after{content:attr(data-t);position:absolute;left:54px;top:50%;transform:translateY(-50%);background:linear-gradient(180deg,#241812,#160e09);border:1px solid var(--gold-deep);color:#fff;padding:7px 12px;border-radius:8px;white-space:nowrap;z-index:50;box-shadow:0 10px 28px rgba(0,0,0,.55);font-size:.85rem}
/* Admin-Kalender: Buchungstage in Gold */
.cal-day.has-book{background:linear-gradient(135deg,rgba(214,171,95,.2),rgba(227,116,42,.12));border-color:var(--gold-deep);cursor:pointer}
.cal-day.has-book b{color:var(--ink)}
.cal-day.has-book small{color:var(--gold-2)}
.cal-day.has-book:hover{border-color:var(--gold);box-shadow:0 0 16px rgba(227,116,42,.3)}
/* Geschlossene / vergangene Tage deutlich markieren */
.cal-day.closed,.cal-day.past{background-image:repeating-linear-gradient(45deg,rgba(150,120,80,.09),rgba(150,120,80,.09) 5px,transparent 5px,transparent 11px);background-color:var(--bg-2);border-color:var(--line);color:var(--muted);cursor:not-allowed}
.cal-day.closed b,.cal-day.past b{opacity:.5}
.cal-day.closed small,.cal-day.past small{color:var(--muted);font-size:.5rem;letter-spacing:.02em;text-transform:uppercase}
/* GiroCode auf der Bestaetigungsseite – heller Grund, sonst liest ihn keine App */
.giro{margin:22px auto 6px;max-width:280px}
.giro img{display:block;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px;width:200px;height:200px}
.giro p{font-size:.88rem;margin:10px 0 0}

.admin-main{padding:36px;max-width:1000px}
/* Kleines Schildchen in der Buchungsliste, etwa fuer "inkognito" */
.admin-main .tag{display:inline-block;font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;
  padding:2px 8px;border-radius:999px;border:1px solid var(--gold-deep);color:var(--gold-2);vertical-align:middle}
/* Reiter auf der Einstellungen-Seite */
.set-tabs{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 22px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.set-tabs button{padding:9px 16px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);
  color:var(--ink-2);font-size:.86rem;font-weight:600;letter-spacing:.02em;cursor:pointer;transition:.15s}
.set-tabs button:hover{color:var(--ink);border-color:var(--gold-deep)}
.set-tabs button.active{background:var(--gold-deep);border-color:var(--gold-deep);color:var(--ink)}
@media (max-width:640px){
  .set-tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;margin-left:-12px;margin-right:-12px;padding-left:12px;padding-right:12px}
  .set-tabs::-webkit-scrollbar{display:none}
  .set-tabs button{flex:0 0 auto}
}
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px;margin-bottom:30px}
.kpi .card{display:flex;flex-direction:column;gap:6px}
.kpi .muted{font-size:.82rem}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.kpi .big{font-family:var(--serif);font-size:2.4rem;color:var(--gold-2)}
table.data{width:100%;border-collapse:collapse;font-size:.92rem}
table.data th,table.data td{text-align:left;padding:12px 10px;border-bottom:1px solid var(--line)}
table.data th{color:var(--muted);font-weight:600;font-size:.76rem;letter-spacing:.05em;text-transform:uppercase}
table.data th[data-sort]{cursor:pointer;user-select:none;white-space:nowrap}
table.data th[data-sort]:hover{color:var(--gold)}
table.data th[data-sort]::after{content:"⇅";opacity:.4;margin-left:4px}
table.data th[data-sortdir="asc"]::after{content:"▲";opacity:1;color:var(--gold)}
table.data th[data-sortdir="desc"]::after{content:"▼";opacity:1;color:var(--gold)}
.sortbar{display:none;align-items:center;gap:10px;margin:0 0 14px}
.sortbar select{flex:1;max-width:240px}
@media(max-width:640px){ .sortbar{display:flex} }
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px}
.login-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:42px;width:100%;max-width:400px;box-shadow:var(--shadow)}
.oh-grid{display:grid;grid-template-columns:120px 1fr 1fr 90px;gap:10px;align-items:center;margin-bottom:8px}
.oh-grid .day{font-weight:500}

/* Responsive */
@media(max-width:900px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}
  .split,.contact-grid,.book-layout,.steps{grid-template-columns:1fr}
  .split.reverse .txt{order:0}
  .price-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .gallery{columns:2}
  .admin-shell,.admin-shell.side-collapsed{grid-template-columns:1fr}
  /* Feste Kopfleiste */
  .admin-topbar{display:flex;align-items:center;justify-content:space-between;position:fixed;top:0;left:0;right:0;height:58px;padding:0 16px;background:#140d08;border-bottom:1px solid var(--line);z-index:100}
  .atb-logo{height:30px;display:block}
  .atb-burger{background:none;border:0;display:flex;flex-direction:column;gap:5px;padding:8px;cursor:pointer;border-radius:8px}
  .atb-burger span{width:24px;height:2px;background:var(--gold);border-radius:2px}
  .admin-main{padding-top:76px}
  /* Menü-Drawer von links */
  .admin-side{position:fixed;top:0;left:0;bottom:0;width:min(80vw,290px);z-index:110;transform:translateX(-100%);transition:transform .28s ease;border-right:1px solid var(--line);border-bottom:0;display:block;overflow-y:auto;padding:18px 14px;background:var(--bg-2)}
  .admin-shell.drawer-open .admin-side{transform:none;box-shadow:0 0 50px rgba(0,0,0,.7)}
  .admin-side-top{display:flex;margin-bottom:16px}
  .as-burger{display:none}
  .admin-side .al{display:inline}
  .as-nav{display:block}
  .admin-side a,.as-logout button{width:100%;padding:14px;font-size:1.05rem;margin-bottom:4px;justify-content:flex-start}
  .admin-side .ai{width:26px;font-size:1.2rem}
  .as-logout{margin-top:16px}
  .as-home{margin-top:6px;padding:12px 14px}
  /* Abdunkeln hinter dem Drawer */
  .admin-scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.55);opacity:0;visibility:hidden;transition:.28s;z-index:105}
  .admin-shell.drawer-open .admin-scrim{opacity:1;visibility:visible}
  .kpi{grid-template-columns:repeat(2,1fr)}
  .summary,.book-layout .bk-main{position:static}
  .hero-side{display:none}
  .nav-links{position:fixed;inset:74px 0 auto 0;background:rgba(18,12,8,.97);backdrop-filter:blur(18px);flex-direction:column;padding:20px;border-bottom:1px solid var(--line);display:none}
  .nav-links.open{display:flex}
  .burger{display:block}
  .oh-grid{grid-template-columns:90px 1fr 1fr 70px;gap:6px}
  /* Admin mobil */
  .admin-main{padding:76px 14px 24px;max-width:100%}
  .admin-main h2{font-size:1.5rem}
  table.data{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  .card{padding:16px}
}
@media(max-width:560px){
  section{padding:72px 0}
  .grid-3,.grid-4,.footer-grid,.gallery{grid-template-columns:1fr;columns:1}
  .hero-frame{inset:12px}
  .kpi{grid-template-columns:1fr 1fr}
  .kpi .big{font-size:1.9rem}
  .admin-main{padding:74px 12px 22px}
}

/* ============================================================
   KONZEPT v2 — Vertikale Rail · Overlay-Menü · Kapitel-Editorial
   ============================================================ */
:root{ --rail:116px; }

/* Fixe vertikale Seitenleiste statt Topbar */
.rail{position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:70;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:26px 0;background:rgba(15,10,6,.72);backdrop-filter:blur(18px);border-right:1px solid var(--line)}
.rail-logo{display:block;filter:drop-shadow(0 2px 10px rgba(0,0,0,.5))}
.rail-menu{background:none;border:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:5px}
.rail-menu span{display:block;width:26px;height:2px;background:var(--gold);transition:.25s}
.rail-menu:hover span:nth-child(1){transform:translateY(1px)}
.rail-menu:hover span:nth-child(3){transform:translateY(-1px)}
.rail-menu em{writing-mode:vertical-rl;transform:rotate(180deg);font-style:normal;font-size:.66rem;letter-spacing:.38em;text-transform:uppercase;color:var(--muted);margin-top:14px}
.rail-book{writing-mode:vertical-rl;transform:rotate(180deg);text-transform:uppercase;letter-spacing:.34em;font-size:.68rem;font-weight:600;color:var(--gold);padding:18px 7px;border:1px solid var(--gold-deep);border-radius:999px;transition:.2s}
.rail-book:hover{background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#231405;border-color:transparent}

/* Content-Shell rechts neben der Rail */
.shell{padding-left:var(--rail);min-height:100vh}

/* Vollbild-Overlay-Menü */
.menu-overlay{position:fixed;inset:0;z-index:90;background:radial-gradient(60% 70% at 75% 25%,rgba(227,116,42,.18),transparent 60%),linear-gradient(135deg,#1c130b,#0c0704);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:.4s}
.menu-overlay.open{opacity:1;visibility:visible}
.menu-close{position:absolute;top:30px;right:36px;background:none;border:1px solid var(--line-2);color:var(--gold);width:48px;height:48px;border-radius:50%;font-size:1.2rem;cursor:pointer;transition:.2s}
.menu-close:hover{border-color:var(--gold);transform:rotate(90deg)}
.menu-inner{display:grid;grid-template-columns:1.5fr 1fr;gap:60px;max-width:1040px;width:100%;padding:0 48px;align-items:center}
.menu-nav{display:flex;flex-direction:column}
.menu-nav a{font-family:var(--serif);font-size:clamp(2rem,4.6vw,3.4rem);font-weight:500;color:var(--ink);display:flex;align-items:baseline;gap:1.1rem;padding:.34rem 0;transition:padding .25s,color .25s;opacity:0;transform:translateY(22px)}
.menu-overlay.open .menu-nav a{opacity:1;transform:none;transition:opacity .5s calc(var(--i)*.06s),transform .5s calc(var(--i)*.06s),color .2s,padding .25s}
.menu-nav a i{font-size:.78rem;font-style:normal;color:var(--gold-deep);letter-spacing:.1em;font-family:var(--sans)}
.menu-nav a:hover{color:var(--gold);padding-left:1.1rem}
.menu-nav a.hl{color:var(--gold)}
.menu-meta{align-self:center;color:var(--muted);font-size:.96rem}
.menu-meta .ml{display:block;color:var(--gold);font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;margin:1.4rem 0 .35rem}

/* Hero v2 */
.hero .kicker{display:flex;align-items:center;gap:.8rem;color:var(--gold);font-size:.74rem;letter-spacing:.34em;text-transform:uppercase;margin-bottom:1.6rem}
.hero .kicker::before{content:"";width:46px;height:1px;background:var(--gold)}
.scroll-cue{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);color:var(--muted);font-size:.7rem;letter-spacing:.3em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:10px;z-index:3}
.scroll-cue::after{content:"";width:1px;height:46px;background:linear-gradient(var(--gold),transparent);animation:cue 2s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.3;height:30px}50%{opacity:1;height:50px}}

/* Kapitel-Kopf mit großer Ziffer */
.chap{display:flex;align-items:flex-end;gap:28px;border-bottom:1px solid var(--line);padding-bottom:26px;margin-bottom:54px}
.chap .no{font-family:var(--serif);font-size:clamp(2.6rem,7vw,5rem);color:transparent;-webkit-text-stroke:1px var(--gold-deep);line-height:.78}
.chap .ct{flex:1}
.chap h2{margin:0}
.chap .k{color:var(--muted);font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;white-space:nowrap}

/* Ausstattung: Karten mit Bild oben und Text darunter – derselbe Aufbau wie auf
   dem Handy. Auf dem Bildschirm stehen zwei Karten nebeneinander, sonst wirkt
   die Seite endlos lang. Alle Karten einer Reihe sind gleich hoch. */
.fgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.frow{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface);transition:.3s}
.frow:hover{border-color:var(--gold-deep);box-shadow:var(--glow)}
.frow .fr-img{position:relative;aspect-ratio:4/3}
.frow .fr-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.86)}
.frow .fr-txt{padding:30px 34px 34px;display:flex;flex-direction:column;gap:.5rem}
.frow .fr-txt h3{font-size:1.55rem;margin:0}
.frow .fr-txt p{color:var(--ink-2);margin:0}

/* Tarif-Editorial-Liste */
.tarif-list{border-top:1px solid var(--line)}
.tarif-row{display:grid;grid-template-columns:auto 1fr auto auto;gap:28px;align-items:center;padding:30px 4px;border-bottom:1px solid var(--line);transition:.2s}
.tarif-row:hover{background:rgba(214,171,95,.04);padding-left:14px}
.tarif-row .tno{font-family:var(--serif);font-size:1.5rem;color:var(--gold-deep)}
.tarif-row .tname{font-family:var(--serif);font-size:1.5rem}
.tarif-row .tmeta{color:var(--muted);font-size:.9rem}
.tarif-row .tprice{font-family:var(--serif);font-size:2.2rem;color:var(--gold-2);text-align:right;white-space:nowrap}
.tarif-row .tgo{color:var(--gold);font-size:1.4rem}

/* Vollbild-Galerie-Streifen (horizontal) */
.gstrip{display:flex;gap:18px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x mandatory}
.gstrip img{height:300px;border-radius:var(--radius);scroll-snap-align:start;flex:0 0 auto;border:1px solid var(--line);filter:brightness(.9)}

/* Mobile: Rail wird zur schlanken Topbar */
@media(max-width:980px){
  .rail{flex-direction:row;left:0;right:0;bottom:auto;width:auto;height:62px;padding:0 18px;justify-content:space-between;border-right:0;border-bottom:1px solid var(--line)}
  .rail-menu{flex-direction:row;gap:9px}
  .rail-menu em{writing-mode:horizontal-tb;transform:none;margin:0 0 0 4px}
  .rail-book{writing-mode:horizontal-tb;transform:none;padding:.5rem 1.1rem;letter-spacing:.12em}
  .shell{padding-left:0;padding-top:62px}
  .menu-inner{grid-template-columns:1fr;gap:34px}
  .fgrid{grid-template-columns:1fr;gap:20px}
  .tarif-row{grid-template-columns:auto 1fr;gap:10px}.tarif-row .tprice{grid-column:2;text-align:left}.tarif-row .tgo{display:none}
}

/* Feinschliff v2.1 — Atmosphäre & Bewegung */
.hero::after{animation:breathe 9s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
.hero .steam{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.hero .steam i{position:absolute;bottom:-120px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(227,116,42,.16),transparent 60%);filter:blur(14px);animation:rise 16s linear infinite}
.hero .steam i:nth-child(1){left:62%;animation-delay:0s}
.hero .steam i:nth-child(2){left:78%;animation-delay:6s;background:radial-gradient(circle,rgba(214,171,95,.14),transparent 60%)}
.hero .steam i:nth-child(3){left:70%;animation-delay:11s}
@keyframes rise{0%{transform:translateY(0) scale(.7);opacity:0}20%{opacity:.9}100%{transform:translateY(-90vh) scale(1.5);opacity:0}}

.rv{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.rv-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}.hero::after{animation:none}.hero .steam{display:none}}

.menu-nav a.cur{color:var(--gold)}
.menu-nav a.cur i{color:var(--gold)}

/* Editorial-Kopf für Unterseiten */
.page-head{padding:30px 0 0}
.page-head .eyebrow{margin-bottom:1rem}
.page-head h1{font-size:clamp(2.6rem,6vw,4.4rem)}
.page-head .lead{max-width:60ch;margin-top:.4rem}

/* Echtes Logo einbinden */
.rail-logo img{width:46px;height:auto;display:block}
.menu-logo{position:absolute;top:30px;left:48px;z-index:2}
.menu-logo img{height:44px;width:auto;display:block}
.site-footer .footer-grid img{height:46px}
@media(max-width:980px){.rail-logo img{width:38px}.menu-logo{left:18px;top:14px}.menu-logo img{height:34px}}

/* ===== v2.2 — Menü responsiver + Kalender klarer ===== */
/* Overlay-Menü: flüssige Größen, Scroll-Fallback */
.menu-overlay{overflow-y:auto;padding:24px 0}
.menu-inner{align-content:center;gap:clamp(22px,5vw,60px);padding:0 clamp(20px,5vw,48px)}
.menu-nav a{font-size:clamp(1.6rem,1rem + 2.4vw,3.2rem);padding:clamp(.1rem,1.1vh,.38rem) 0;gap:clamp(.6rem,1.6vw,1.1rem)}
.menu-meta{font-size:clamp(.82rem,1.3vw,.96rem)}
.menu-logo img{height:clamp(30px,4.6vw,46px)}
@media(max-height:720px){
  .menu-overlay{align-items:flex-start}
  .menu-inner{align-content:start;padding-top:84px}
  .menu-nav a{font-size:clamp(1.4rem,3.4vh,2rem);padding:.08rem 0}
}
@media(max-width:760px){
  .menu-inner{grid-template-columns:1fr;gap:20px;padding-top:88px;align-content:start}
  .menu-meta{align-self:start}
  .menu-overlay{align-items:flex-start}
}

/* Kalender: ausgebuchte Tage deutlich sichtbar */
.cal-day.full,.cal-day.unavailable{opacity:1}
.cal-day.unavailable{color:var(--line-2);background:transparent;border-color:transparent;cursor:not-allowed}
.cal-day.unavailable .dot{display:none}
.cal-day.full{cursor:not-allowed;background:rgba(196,74,38,.16);border-color:rgba(196,74,38,.55);color:#eba886}
.cal-day.full .dot{background:#d8552a}
.cal-day.full::after{content:"";position:absolute;left:16%;right:16%;top:52%;height:2px;background:#c44a26;transform:rotate(-16deg);opacity:.85;border-radius:2px}
.cal-day.free .dot{box-shadow:0 0 8px rgba(108,194,138,.55)}
.cal-day.limited{border-color:rgba(227,116,42,.4)}

/* Tages-Timeline: Reservierungen klarer */
.tl-seg.booking{background:linear-gradient(135deg,#c46a2a,#a8521f);border-left:3px solid var(--gold-2);box-shadow:inset 0 0 0 1px rgba(0,0,0,.25)}
.tl-key .k-book::before{background:#c46a2a}

/* Verfügbarkeits-Übersicht */
.cal-day b{font-weight:600;font-size:1rem;line-height:1}
.cal-day small{font-size:.58rem;color:var(--muted);margin-top:3px;line-height:1}
.cal-day.free small{color:#8fd4a3}
.cal-day.limited small{color:var(--gold-2)}
.cal-day.full small{color:#eba886;text-decoration:none}
.ov-summary{margin-top:18px;text-align:center;color:var(--ink-2);font-size:.95rem}

/* Verfügbarkeit: Direkt-Buchen-Panel */
.ov-pick{margin-top:22px;background:var(--surface);border:1px solid var(--gold-deep);border-radius:var(--radius);padding:20px;max-width:520px;margin-inline:auto;animation:fade .3s}
.ov-pick-head{font-family:var(--serif);font-size:1.2rem;margin-bottom:12px;color:var(--gold-2)}
.ov-pick-opts{display:grid;gap:10px}
.ov-pick-opt{display:flex;justify-content:space-between;align-items:center;gap:1rem;border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--bg-2);transition:.18s}
.ov-pick-opt:hover{border-color:var(--gold);text-decoration:none;transform:translateX(2px)}
.ov-pick-opt b{display:block;color:var(--ink)}
.ov-pick-opt small{color:var(--muted)}
.ov-pick-opt .go{color:var(--gold);font-size:1.3rem}

/* Verfügbarkeits-Popup in der Buchung */
.modal{position:fixed;inset:0;background:rgba(8,5,3,.82);backdrop-filter:blur(6px);display:none;place-items:center;z-index:120;padding:20px}
.modal.open{display:grid}
.modal-box{background:var(--surface);border:1px solid var(--line-2);border-radius:var(--radius-lg);padding:28px;max-width:560px;width:100%;max-height:90vh;overflow:auto;position:relative;box-shadow:var(--shadow)}
.modal-box h3{font-family:var(--serif)}
.modal-close{position:absolute;top:14px;right:14px;background:none;border:1px solid var(--line);color:var(--gold);width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:1.1rem;transition:.2s}
.modal-close:hover{border-color:var(--gold);transform:rotate(90deg)}

/* Verfügbarkeits-Popup: dynamisch, immer ohne Scrollen (skaliert per vmin) */
.modal-box{width:min(540px,92vmin);max-height:96vh;padding:clamp(14px,2.5vmin,26px);overflow:hidden;display:flex;flex-direction:column}
.modal-box h3{font-size:clamp(1.05rem,2.4vmin,1.5rem);margin-bottom:4px}
.modal-box > p{font-size:clamp(.74rem,1.5vmin,.9rem);margin-bottom:clamp(6px,1.4vmin,14px)}
.modal .cal{flex:1;display:flex;flex-direction:column;min-height:0}
.modal .cal-head{margin-bottom:clamp(6px,1.4vmin,16px)}
.modal .cal-head strong{font-size:clamp(.95rem,2.1vmin,1.2rem)}
.modal .cal-head button{width:clamp(30px,4.8vmin,40px);height:clamp(30px,4.8vmin,40px);font-size:1rem}
.modal .cal-grid{gap:clamp(3px,0.7vmin,7px)}
.modal .cal-grid .dow{font-size:clamp(.52rem,1.15vmin,.72rem);padding:2px 0}
.modal .cal-day{font-size:clamp(.68rem,1.5vmin,1rem);border-radius:clamp(7px,1.3vmin,12px)}
.modal .cal-day b{font-size:clamp(.72rem,1.7vmin,1rem)}
.modal .cal-day small{font-size:clamp(.46rem,1.05vmin,.6rem);margin-top:1px}
.modal .cal-day.full::after{height:1.5px}
.modal .cal-legend{gap:clamp(7px,1.8vmin,20px);font-size:clamp(.62rem,1.35vmin,.82rem);margin-top:clamp(7px,1.4vmin,16px)}
.modal .cal-legend i{width:8px;height:8px}

/* FIX Kalender-Versatz: Spalten dürfen nicht durch Textbreite wachsen */
.cal-grid{grid-template-columns:repeat(7,minmax(0,1fr))}
.cal-day{overflow:hidden;text-align:center;padding:2px}
.cal-day b{line-height:1.05}
.cal-day small{white-space:nowrap;font-size:clamp(.46rem,2.3vw,.62rem);max-width:100%;overflow:hidden;text-overflow:ellipsis;display:block}

/* Button-Feedback & Animation + Touch-Fix */
.btn{touch-action:manipulation}
.btn:active{transform:scale(.97)}
.btn-gold,.btn-primary{position:relative;overflow:hidden}
.btn-gold::after{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .6s ease;pointer-events:none}
.btn-gold:hover::after{left:130%}
.btn.is-loading{pointer-events:none;color:transparent!important}
.btn.is-loading::before{content:"";position:absolute;top:50%;left:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border:2px solid rgba(35,20,5,.35);border-top-color:#231405;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* Touch-Geräte: kein Doppel-Tipp durch :hover */
@media (hover:none){
  .tariff-opt:hover,.slot:hover,.cal-day.free:hover,.cal-day.limited:hover,.pay-opt:hover,.scope-opt:hover,.frow:hover,.tile:hover,.feature:hover{transform:none}
}

/* Zeit-Gruppen (Schritt 2) */
.time-group{margin-bottom:22px}
.tg-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.tg-head strong{font-family:var(--serif);font-size:1.2rem}
.tg-head .muted{font-size:.85rem;white-space:nowrap}

/* Zahlungsumfang-Optionen */
.scope-opt{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;padding:14px 16px;cursor:pointer;background:var(--surface);transition:.15s}
.scope-opt.selected{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold)}

/* Angebots-/Zeitkarten (Schritt 2) – mit Effekt, nicht steril */
.time-group{background:linear-gradient(180deg,var(--surface),var(--bg-2));border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px 26px;margin-bottom:18px;transition:.28s}
.time-group:hover{border-color:var(--gold-deep);box-shadow:var(--glow);transform:translateY(-2px)}
.tg-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.tg-head strong{font-family:var(--serif);font-size:1.4rem;color:var(--ink)}
.tg-head .muted{font-size:.9rem;color:var(--gold);white-space:nowrap}

/* Ausgewähltes Angebot (Schritt 3) */
.offer-card{background:linear-gradient(135deg,var(--surface-2),var(--surface));border:1px solid var(--gold-deep);border-radius:var(--radius-lg);padding:22px 24px;margin-bottom:18px;box-shadow:0 0 0 1px rgba(214,171,95,.15),var(--glow)}
.offer-card.price-look{padding:32px 30px}
.offer-card .oc-tag{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:10px}
.offer-card .oc-name{font-family:var(--serif);font-size:1.9rem;color:var(--ink);line-height:1.12}
.offer-card .oc-meta{color:var(--ink-2);font-size:.95rem;margin:6px 0 16px}
.offer-card .oc-row{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;border-bottom:1px dashed var(--line);color:var(--ink-2);font-size:.95rem}
.offer-card .oc-row:last-child{border-bottom:0}
.offer-card .oc-total{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-top:14px;padding-top:16px;border-top:1px solid var(--gold-deep)}
.offer-card .oc-total>span:first-child{font-family:var(--serif);font-size:1.4rem;color:var(--ink)}
.offer-card .oc-amount{font-family:var(--serif);font-size:2.5rem;color:var(--gold-2);line-height:1}
@media(max-width:560px){.offer-card.price-look{padding:24px 20px}.offer-card .oc-name{font-size:1.6rem}.offer-card .oc-amount{font-size:2rem}}

/* Preis-Aufschlüsselung */
#price-breakdown{background:linear-gradient(180deg,var(--surface-2),var(--bg-2));border:1px solid var(--gold-deep);border-radius:var(--radius-lg);box-shadow:0 0 0 1px rgba(214,171,95,.12),0 14px 40px rgba(0,0,0,.35);padding:22px 24px !important}
.pb-row{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px dashed var(--line);color:var(--ink-2);font-size:.97rem}
.pb-row:last-of-type{border-bottom:0}
.pb-total{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding-top:1rem;margin-top:.5rem;border-top:1px solid var(--gold-deep);font-family:var(--serif);font-size:1.85rem;color:var(--gold-2)}
.persons-fixed{align-items:center;gap:8px;font-family:var(--serif);font-size:1.45rem;color:var(--gold-2);background:var(--bg-2);border:1px solid var(--line-2);border-radius:12px;padding:10px 20px}
/* Optionale Extras */
.extras-block{margin:8px 0 20px;border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px;background:var(--bg-2)}
.extra-row{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px dashed var(--line)}
.extra-row:last-child{border-bottom:0}
.extra-row .ex-name{flex:1;font-weight:500}
.extra-row .ex-price{color:var(--gold-2);white-space:nowrap;font-weight:500}
.ex-stepper{flex:none}
.ex-stepper button{width:38px;height:38px;font-size:1.1rem}
.ex-stepper input{width:44px}
@media(max-width:560px){ .extra-row{flex-wrap:wrap} .extra-row .ex-name{flex:1 1 100%} .extra-row .ex-price{order:2} .ex-stepper{margin-left:auto} }

/* Geführte Buchung: nur ein Schritt sichtbar */
.wstep{display:none;padding:26px;border:1px solid var(--line);border-radius:var(--radius-lg);background:linear-gradient(180deg,var(--surface),var(--bg-2))}
.wstep.active{display:block;animation:stepIn .34s ease}
@keyframes stepIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.wstep>h3{margin-top:0}
.bk-intro{margin-bottom:20px}
.bk-nav{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}
.bk-nav .btn-primary,.bk-nav .btn-gold{margin-left:auto}
/* Fortschrittsleiste mit Nummern */
.stepbar{position:sticky;top:0;z-index:40;display:flex;gap:8px;justify-content:center;flex-wrap:wrap;background:#120c08;padding:14px 10px;border-bottom:1px solid var(--line);margin:0 0 24px}
@media(max-width:980px){ .stepbar{top:62px} }
.stepbar .s{display:flex;align-items:center;gap:9px;padding:7px 14px 7px 8px;border-radius:999px;color:var(--muted);font-size:.92rem;border:1px solid transparent;transition:.25s;pointer-events:none}
.stepbar .s i{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font-style:normal;font-size:.85rem;background:var(--bg-2);border:1px solid var(--line-2);color:var(--muted);transition:.25s}
.stepbar .s span{white-space:nowrap}
.stepbar .s.clickable{pointer-events:auto;cursor:pointer}
.stepbar .s.done i{background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#120c08;border-color:transparent}
.stepbar .s.done{color:var(--ink)}
.stepbar .s.active{color:#fff;border-color:var(--gold-deep);background:linear-gradient(90deg,rgba(214,171,95,.16),transparent)}
.stepbar .s.active i{background:linear-gradient(180deg,var(--gold-2),var(--ember));color:#120c08;border-color:transparent;box-shadow:0 0 16px rgba(227,116,42,.5)}
@media(max-width:640px){ .stepbar .s span{display:none} .stepbar .s{padding:6px} }
/* Aufklappbare Preisliste */
.price-details{margin-top:20px;border-top:1px solid var(--line);padding-top:14px}
.price-details summary{cursor:pointer;color:var(--gold-2);font-family:var(--serif);font-size:1.05rem;list-style:none}
.price-details summary::-webkit-details-marker{display:none}
.price-details summary::before{content:"▸ ";color:var(--gold-deep)}
.price-details[open] summary::before{content:"▾ "}
.price-mini{margin-top:12px;display:flex;flex-direction:column;gap:8px}
.pm-row{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px dashed var(--line)}
.pm-row b{color:var(--gold-2);white-space:nowrap}
/* Preis-Popup mit Kacheln */
.price-modal-box{width:min(880px,94vmin) !important;max-height:92vh !important;overflow:auto !important;display:block !important}
#priceModal .price-grid{gap:16px}
#priceModal .price-card{padding:22px}
@media(max-width:640px){ #priceModal .price-grid{grid-template-columns:1fr} }

/* Captcha "Ich bin kein Roboter" */
.captcha-box{align-items:center;gap:12px;border:1px solid var(--line-2);border-radius:12px;padding:14px 16px;background:var(--surface);margin:6px 0 16px;transition:.2s;cursor:pointer}
.captcha-box:hover{border-color:var(--gold-deep)}
.captcha-box input{width:22px;height:22px;accent-color:var(--gold)}
.captcha-box span{font-weight:500}

/* Timeline-/Aufklapp-Galerie */
.expand-gallery{display:flex;gap:12px;height:460px;border-radius:var(--radius-lg);overflow:hidden}
.eg-card{position:relative;flex:1;background-size:cover;background-position:center;border-radius:var(--radius);cursor:pointer;transition:flex .6s cubic-bezier(.22,1,.36,1),filter .4s;filter:brightness(.7) saturate(.9);overflow:hidden;min-width:0}
.eg-card.active{flex:6;filter:brightness(1) saturate(1.05)}
.eg-card::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(214,171,95,.2)}
.eg-card.active::after{box-shadow:inset 0 0 0 1px var(--gold-deep),0 0 60px rgba(227,116,42,.25)}
.eg-label{position:absolute;left:0;right:0;bottom:0;padding:22px;display:flex;align-items:baseline;gap:12px;color:#fff}
.eg-idx{font-family:var(--serif);font-size:1.1rem;color:var(--gold-2)}
.eg-name{font-family:var(--serif);font-size:1.6rem;opacity:0;transform:translateY(8px);transition:.4s .1s;white-space:nowrap}
.eg-card.active .eg-name{opacity:1;transform:none}
.eg-progress{height:3px;background:var(--line);border-radius:3px;margin-top:16px;overflow:hidden}
.eg-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold-2),var(--ember))}
@media(max-width:760px){
  .expand-gallery{flex-direction:column;height:auto}
  .eg-card{height:90px;flex:none}
  .eg-card.active{height:300px;flex:none}
  .eg-name{opacity:1;transform:none;font-size:1.3rem}
}

/* Expanding-Hover-Navigation in der Seitenleiste */
.rail-nav{display:flex;flex-direction:column;gap:6px;margin:14px 0;align-items:center;width:100%}
.rn{position:relative;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;color:var(--gold-2);border:1px solid transparent;transition:.25s}
.rn svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rn::after{content:attr(data-t);position:absolute;left:52px;white-space:nowrap;font-family:var(--serif);font-size:.98rem;color:#fff;background:linear-gradient(180deg,#241812,#160e09);border:1px solid var(--gold-deep);padding:8px 14px;border-radius:10px;opacity:0;transform:translateX(-6px);pointer-events:none;transition:.25s;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.rn:hover{color:#120c08;background:linear-gradient(180deg,var(--gold-2),var(--gold));border-color:var(--gold);box-shadow:0 0 22px rgba(227,116,42,.45)}
.rn:hover::after{opacity:1;transform:none}
@media(max-width:900px){ .rail-nav{display:none} }

/* Aufklapp-/Glüh-Menü im Burger-Overlay */
.xnav{gap:12px}
.xnav .xrow{display:inline-flex;align-items:center;gap:18px;padding:12px 20px 12px 12px;border-radius:999px;border:1px solid transparent;width:max-content;max-width:100%;color:var(--gold-2);transition:transform .3s,background .3s,border-color .3s,box-shadow .3s}
.xnav .xic{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;border:1px solid var(--gold-deep);flex:none;transition:.3s}
.xnav .xic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.xnav .xlb{font-family:var(--serif);font-weight:500;font-size:clamp(1.5rem,3.4vw,2.4rem);color:#fff;line-height:1;transition:color .3s}
.xnav .xrow:hover{transform:translateX(8px);border-color:var(--gold-deep);background:linear-gradient(90deg,rgba(214,171,95,.16),transparent);box-shadow:0 0 34px rgba(227,116,42,.22)}
.xnav .xrow:hover .xic{background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#120c08;box-shadow:0 0 24px rgba(227,116,42,.5)}
.xnav .xrow.hl .xic{background:linear-gradient(180deg,var(--gold-2),var(--ember));color:#120c08;border-color:transparent}
.xnav .xrow.hl .xlb{color:var(--gold-2)}
.xnav .xrow.cur .xic{border-color:var(--gold);color:var(--gold)}
@media (hover:none){ .xnav .xrow{transform:none} }
@media(max-height:640px){ .xnav .xic{width:40px;height:40px} .xnav .xrow{padding:8px 16px 8px 8px} }

/* ============================================================
   MOBILE ROBUST — kein seitliches Scrollen, Kalender passt sauber
   ============================================================ */
html,body{overflow-x:clip;max-width:100%}
*{box-sizing:border-box}
img,video{max-width:100%;height:auto}
.container,.wizard-wrap,.book-layout,.bk-main,.cal,.summary{max-width:100%;min-width:0}
.book-layout>*{min-width:0}
/* Nichts abschneiden: breite Inhalte scrollen/umbrechen statt verstecken */
input,select,textarea{max-width:100%}
pre,code{max-width:100%;overflow-x:auto;white-space:pre-wrap;word-break:break-word}
p,li,td,th,h1,h2,h3,label,.card,dd,dt{overflow-wrap:break-word}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}

@media(max-width:560px){
  .container{padding-left:16px;padding-right:16px}
  .grid-2{grid-template-columns:1fr}
  .wstep{padding:18px}
  .bk-nav{gap:8px}
  .bk-nav .btn{flex:1 1 auto}
  /* Kalender: Zahlen sicher sichtbar */
  .cal{padding:14px}
  .cal-grid{gap:5px}
  .cal-day{padding:1px;aspect-ratio:1;justify-content:center}
  .cal-day b{font-size:.92rem;line-height:1}
  .cal-day small{font-size:.5rem;margin-top:1px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
@media(max-width:380px){
  .cal-grid{gap:4px}
  .cal-day small{display:none}   /* nur die Zahl – garantiert lesbar */
}

/* Popups auf dem Handy: vollflächig & sauber scrollbar */
@media(max-width:640px){
  .modal{align-items:stretch;padding:0}
  .modal-box{width:100% !important;max-width:100% !important;max-height:100dvh !important;min-height:100dvh;border-radius:0;overflow-y:auto !important;-webkit-overflow-scrolling:touch;display:block !important;padding:22px 18px 46px !important}
  .modal-close{position:fixed;top:12px;right:12px;background:rgba(20,13,8,.92);z-index:6}
  #priceModal .price-grid{grid-template-columns:1fr;gap:14px}
  #priceModal .price-card{padding:22px}
}

/* Datentabellen im Hochformat: jede Zeile als Karte (nichts abgeschnitten) */
@media(max-width:640px){
  table.data{display:block;width:100%;white-space:normal;overflow:visible;font-size:.92rem}
  table.data thead{display:none}
  table.data tbody,table.data tr,table.data td{display:block;width:100%}
  table.data tr{position:relative;border:1px solid var(--line);border-radius:12px;margin-bottom:12px;padding:10px 34px 10px 14px;background:var(--surface);cursor:pointer}
  table.data td{border:0;padding:7px 0;display:flex;justify-content:space-between;align-items:center;gap:14px;text-align:right}
  table.data td:not(:last-child){border-bottom:1px dashed var(--line)}
  table.data td::before{content:attr(data-label);color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;text-align:left;flex:none}
  table.data td:not([data-label])::before{display:none}
  table.data td.actions{display:block;text-align:left;padding-top:10px}
  table.data td:empty{display:none}
  /* Karten auf-/zuklappbar: zugeklappt nur Schlüssel-Infos */
  table.data tbody tr td:not(.key):not(:first-child){display:none}
  table.data tbody tr.open td{display:flex}
  table.data tbody tr.open td.actions{display:block}
  table.data tbody tr.open td:empty{display:none}
  table.data tbody tr::after{content:"▾";position:absolute;top:13px;right:14px;color:var(--gold);font-size:.85rem;pointer-events:none}
  table.data tbody tr.open::after{content:"▴"}
}

/* ============================================================
   ECHTES BILD- UND VIDEOMATERIAL (Shooting 07/2026)
   Fotos kommen als <picture> aus views/partials/pic.ejs — die
   folgenden Regeln geben dem picture-Wrapper die Layout-Rolle,
   die vorher das nackte <img> hatte.
   ============================================================ */

/* --- Hero mit Hintergrundvideo ------------------------------- */
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;background:#160d08}
.hero-media .hero-still,.hero-media .hero-video{position:absolute;inset:0;display:block;width:100%;height:100%}
.hero-media .hero-still img{width:100%;height:100%;object-fit:cover}
/* Video bewusst gedaempft: dunkler, leicht entsaettigt und minimal weichgezeichnet.
   Das nimmt Unruhe aus dem Bild und laesst die Schrift klar davor stehen.
   Das leichte Vergroessern verhindert helle Kanten durch die Weichzeichnung. */
.hero-media .hero-video{
  object-fit:cover;opacity:0;transition:opacity 1.6s ease;
  filter:brightness(.62) saturate(.88) blur(1.4px);
  transform:scale(1.04);
}
.hero-media .hero-still img{filter:brightness(.66) saturate(.9)}
.hero-media .hero-video.is-playing{opacity:1}
/* Verlauf liegt über dem Video, damit die Schrift lesbar bleibt */
.hero.has-media::before{background:linear-gradient(180deg,rgba(18,12,8,.5),rgba(18,12,8,.86));z-index:1}
.hero.has-media::after{z-index:1}
@media (prefers-reduced-motion:reduce){.hero-media .hero-video{display:none}}

/* --- picture-Wrapper in bestehenden Bausteinen ---------------- */
.split picture{display:block;min-width:0}
.split picture img{aspect-ratio:4/5;object-fit:cover;width:100%;border-radius:var(--radius-lg);border:1px solid var(--line);box-shadow:var(--shadow)}
.frow .fr-img picture{position:absolute;inset:0;display:block}
.frow .fr-img picture img{width:100%;height:100%;object-fit:cover;filter:brightness(.86)}
.band picture{position:absolute;inset:0;z-index:0;display:block}
.band picture img{width:100%;height:100%;object-fit:cover}

/* --- Foto-Galerie (Masonry) ---------------------------------- */
/* .gitem ist nur noch der Anker fuers Fenster (siehe initFenster in main.js).
   Die frueheren Album-Regeln stehen hier NICHT mehr: sie ueberschrieben die
   Aufklapp-Bewegung der Zeitleiste, weil die Karten beide Klassen tragen
   (.eg-card .gitem) und .gitem spaeter im Stylesheet steht. Nur Formatierung,
   die die Zeitleiste nicht stoert: */
.gitem{cursor:pointer}
.album,.gallery picture{display:block}

/* --- Zeitleiste fuer Fotos UND Videos ------------------------
   Ein gemeinsames Muster: Ueberfahren klappt die Karte auf, ein
   Klick zeigt sie gross im Fenster. Ein separater Albumbereich
   entfaellt dadurch – alle Aufnahmen stehen in der Leiste.
   ------------------------------------------------------------ */
.zeit-hinweis{font-size:.82rem;margin:0 0 16px}
/* Hinweistext passend zum Geraet: „Fahren Sie darueber" ergibt ohne Maus keinen Sinn */
.nur-tippen{display:none}
@media (hover:none),(pointer:coarse){
  .nur-zeiger{display:none}
  .nur-tippen{display:inline}
}
.expand-gallery .eg-card{
  /* Karten sind jetzt <a> bzw. <button> – Eigenheiten zuruecksetzen */
  appearance:none;padding:0;font:inherit;color:inherit;text-align:left;
  display:block;text-decoration:none;border:0;
}
.expand-gallery .eg-card:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.eg-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.85);
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  border:1px solid rgba(240,212,154,.5);background:rgba(18,12,8,.42);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:var(--gold-2);opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;
}
.eg-play svg{width:22px;height:22px;fill:currentColor;margin-left:3px}
.eg-card.active .eg-play{opacity:1;transform:translate(-50%,-50%) scale(1)}
/* Vorschau: der Clip spielt beim Ueberfahren stumm in der Karte an */
.eg-vorschau{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .45s ease;pointer-events:none;z-index:0}
.eg-card.vorschau .eg-vorschau{opacity:1}
.eg-card.vorschau .eg-play{opacity:0}
.eg-card .eg-label{position:absolute;z-index:2}

/* Auf schmalen Fenstern taugt das Aufklappen nicht – dort ein
   ruhiges Raster, das ebenfalls ins Fenster fuehrt. */
/* Auf schmalen Fenstern bleibt der Filmstreifen erhalten – er wird nur
   schiebbar. Die aktive Karte klappt auf wie am Desktop, die uebrigen stehen
   als schmale Streifen daneben. Das Skript schiebt die aktive Karte in die
   Mitte, damit man ihr nicht hinterherwischen muss. */
@media(max-width:900px){
  .expand-gallery{
    /* flex-direction ausdruecklich zuruecksetzen: eine aeltere Mobilregel
       stapelte die Karten senkrecht – der Filmstreifen soll aber bleiben. */
    flex-direction:row;
    height:min(58vh,420px);gap:8px;
    overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;scroll-behavior:smooth;
    scrollbar-width:none;padding-bottom:2px;
  }
  .expand-gallery::-webkit-scrollbar{display:none}
  .expand-gallery .eg-card{
    height:auto;flex:0 0 46px;min-width:0;
    transition:flex-basis .55s cubic-bezier(.22,1,.36,1),filter .4s;
  }
  .expand-gallery .eg-card.active{height:auto;flex:0 0 min(74vw,340px)}
  .eg-label{padding:14px 10px}
  .eg-name{font-size:.9rem}
  .eg-idx{font-size:.7rem}
  .eg-play{width:44px;height:44px}
  .zeit-hinweis{font-size:.78rem}
}
@media(max-width:560px){
  .expand-gallery{height:min(56vh,380px)}
  .expand-gallery .eg-card{flex:0 0 38px}
  .expand-gallery .eg-card.active{flex:0 0 min(78vw,300px)}
}

/* --- Lightbox: Beschriftung, Schließen, Blättern -------------- */
.lb-fig{margin:0;display:grid;justify-items:center;gap:16px;max-width:92vw;cursor:default}
.lightbox img,.lightbox video{max-width:92vw;max-height:78vh;width:auto;height:auto;object-fit:contain;display:block}
.lightbox video{border-radius:12px;background:#000;outline:none}
.lightbox video[hidden],.lightbox img[hidden]{display:none}
.lb-fig figcaption{color:var(--ink-2);font-size:.9rem;text-align:center;max-width:62ch;line-height:1.5}
.lb-close,.lb-nav{position:fixed;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1px solid var(--line-2);background:rgba(18,12,8,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--gold-2);font-size:1.5rem;line-height:1;cursor:pointer;transition:.25s;z-index:2}
.lb-close{top:20px;right:24px;font-size:1.1rem}
.lb-nav{top:50%;transform:translateY(-50%);font-size:2rem}
.lb-prev{left:20px}
.lb-next{right:20px}
.lb-close:hover,.lb-nav:hover,.lb-close:focus-visible,.lb-nav:focus-visible{background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#120c08;border-color:var(--gold);outline:none}
@media(max-width:640px){
  .lb-nav{width:44px;height:44px;font-size:1.6rem}
  .lb-prev{left:8px}
  .lb-next{right:8px}
  .lightbox img{max-height:72vh}
}

/* ============================================================
   MARMOR-UNTERGRUND
   Der Stein stammt aus der Visitenkarte (23627 x 15752 px),
   rechtes Bilddrittel – dort steht weder Logo noch Schrift.
   Er liegt als feste Ebene HINTER dem Inhalt, nicht darueber:
   Fotos und Videos bleiben unberuehrt, nur die dunklen Flaechen
   bekommen Struktur.
   ============================================================ */
html{background-color:var(--bg)}
body{background-color:transparent}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:url('/img/marmor-1600.jpg') center/cover no-repeat;
  background:-webkit-image-set(url('/img/marmor-1600.webp') 1x,url('/img/marmor-2752.webp') 2x) center/cover no-repeat;
  background:image-set(url('/img/marmor-1600.webp') 1x,url('/img/marmor-2752.webp') 2x) center/cover no-repeat;
  transition:opacity .3s;
}
/* Auf Seiten, die vor allem aus Text und Formularfeldern bestehen, tritt der
   Stein deutlich zurueck. Dort steht Lesbarkeit vor Atmosphaere – die
   Steinstruktur lief sonst mitten durch die Kontaktdaten. */
body.seite-kontakt::after,
body.seite-faq::after,
body.seite-impressum::after,
body.seite-datenschutz::after,
body.seite-agb::after,
body.seite-widerruf::after,
body.seite-cookies::after,
body.seite-verwalten::after,
body.seite-erfolg::after,
body.seite-storniert::after,
body.seite-abbruch::after{ opacity:.3 }
/* Zusaetzlich ein ruhiger Schleier, damit Flaechen hinter Text gleichmaessig bleiben */
body.seite-kontakt,body.seite-faq,body.seite-impressum,body.seite-datenschutz,
body.seite-agb,body.seite-widerruf,body.seite-cookies{
  background-image:linear-gradient(180deg,rgba(18,12,8,.55),rgba(18,12,8,.72));
}
/* Abschnitte mit eigenem Ton leicht durchlaessig, damit der Stein durchscheint */
.section-alt{background:linear-gradient(180deg,rgba(24,15,10,.88),rgba(18,12,8,.88))}
.site-footer{background:rgba(24,15,10,.9)}

/* ============================================================
   GOLDSCHIMMER
   Ein heller Streifen wandert langsam durch den Kupferverlauf.
   Dieselbe Bewegung wie im Logo (dort als SVG umgesetzt).
   ============================================================ */
@keyframes goldzug{0%{background-position:0% 50%}100%{background-position:100% 50%}}
/* Zwei Ebenen: die Woelbung bleibt stehen, nur der Metallverlauf wandert */
@keyframes goldzugFein{
  0%{background-position:0 0, 0% 50%}
  100%{background-position:0 0, 100% 50%}
}
/* Winkel, Tempo und Startzeitpunkt setzt main.js je Element zufaellig – dadurch
   laufen die Lichter in verschiedene Richtungen und nie im Gleichschritt. */
/* Die Menuepunkte sind hier bewusst NICHT mehr aufgefuehrt – auf Kundenwunsch
   ohne Schimmer. Das Laufband gibt es nicht mehr. */
.gold-schimmer,.scroll-cue{
  background-image:linear-gradient(var(--goldwinkel,100deg),
    #c8894f 0%,#e6b184 9%,#ffe6c4 16%,#fffdf7 21%,#ffe6c4 26%,#e6b184 34%,#c8894f 48%,#c8894f 100%);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:goldzug var(--golddauer,3.2s) linear infinite;
  animation-delay:var(--goldstart,0s);
  /* dezentes Leuchten nach aussen */
  text-shadow:0 0 12px rgba(227,116,42,.3),0 0 32px rgba(214,171,95,.16);
}
/* Menuepunkte in ruhigem Gold, ohne wandernden Verlauf */
.xnav .xlb{color:var(--gold-2);-webkit-text-fill-color:currentColor;background:none;animation:none;text-shadow:none}
.xnav .xrow:hover .xlb{color:#fff}
.xnav .xrow.hl .xlb{color:var(--gold-2)}

/* --- Marke in der Leiste --------------------------------------
   Senkrechte Leiste (Desktop): nur das Signet – fuer den Schriftzug
   ist dort kein Platz. Als Kopfleiste (Handy): Signet und Schriftzug
   nebeneinander, wie im Adminbereich. */
.rail-logo{filter:none}                       /* Schein sitzt am Signet selbst */
/* Hoehe UND Breite ausdruecklich: die aeltere Regel .rail-logo img{height:auto}
   liesse das Signet sonst auf seine natuerliche SVG-Groesse aufgehen. */
.rail-logo .marke{--marke-h:46px}
.rail-logo .marke-signet{width:auto;height:var(--marke-h,40px)}
.rail-logo .marke-wort{display:none}

@media(max-width:980px){
  .rail-logo .marke{--marke-h:30px}
  .rail-logo .marke-wort{display:block}

  /* Burger hochkant: drei senkrechte Striche nebeneinander statt
     drei waagerechter Striche in einer Reihe. */
  .rail-menu{flex-direction:row;align-items:center;gap:5px}
  .rail-menu span{width:2px;height:19px;border-radius:1px}
  .rail-menu:hover span:nth-child(1){transform:translateX(1px)}
  .rail-menu:hover span:nth-child(3){transform:translateX(-1px)}
}
@media(max-width:400px){
  .rail-logo .marke{--marke-h:26px}
  .rail-menu em{display:none}                 /* auf sehr schmalen Geraeten reicht das Symbol */
}

/* --- Klangschalter in der Leiste ------------------------------ */
.rail-klang{
  background:none;border:1px solid var(--line-2);color:var(--muted);
  width:40px;height:40px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;transition:.25s;flex:none;
}
.rail-klang svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.rail-klang .k-korpus{fill:currentColor;stroke:none}
.rail-klang .k-welle{opacity:0;transition:opacity .3s}
.rail-klang .k-aus{opacity:1;transition:opacity .3s}
.rail-klang:hover{border-color:var(--gold-deep);color:var(--gold)}
.rail-klang[aria-pressed="true"]{border-color:var(--gold);color:var(--gold);
  box-shadow:0 0 18px rgba(227,116,42,.28)}
.rail-klang[aria-pressed="true"] .k-aus{opacity:0}
.rail-klang[aria-pressed="true"] .k-welle{opacity:1}
/* Wellen atmen leicht, solange Ton laeuft */
.rail-klang[aria-pressed="true"] .k-w1{animation:klangWelle 2.4s ease-in-out infinite}
.rail-klang[aria-pressed="true"] .k-w2{animation:klangWelle 2.4s ease-in-out infinite .35s}
@keyframes klangWelle{0%,100%{opacity:.45}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.rail-klang .k-welle{animation:none!important}}
@media(max-width:980px){ .rail-klang{width:34px;height:34px} .rail-klang svg{width:17px;height:17px} }
/* Kurze Rueckmeldung, wenn der Browser den Ton verweigert */
.klang-hinweis{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,14px);z-index:400;
  background:rgba(28,19,11,.96);border:1px solid var(--gold-deep);border-radius:999px;
  color:var(--ink);font-size:.86rem;padding:11px 20px;pointer-events:none;
  box-shadow:0 18px 44px rgba(0,0,0,.5);opacity:0;transition:opacity .3s,transform .3s;
}
.klang-hinweis.sichtbar{opacity:1;transform:translate(-50%,0)}

/* ============================================================
   ADMINBEREICH
   Der Marmor gehoert auf die Gaesteseiten, nicht ins Werkzeug:
   hinter Tabellen und Formularen kostet er nur Lesbarkeit.
   Hier liegt er deshalb stark gedaempft hinter ruhigen Flaechen.
   ============================================================ */
.admin-shell{position:relative;z-index:1;background:linear-gradient(180deg,rgba(20,13,8,.94),rgba(15,10,6,.97))}
/* Marke in der Seitenleiste: Hoehe kommt aus dem Partial, die alte Bildregel
   .as-logo{height:42px} wuerde sie sonst stauchen. */
.as-logo,.atb-logo{height:auto;display:inline-flex;align-items:center;min-width:0}
.as-logo .marke,.atb-logo .marke{max-width:100%}
.as-logo .marke-wort,.atb-logo .marke-wort{flex:0 1 auto;min-width:0}
/* Eingeklappte Leiste: nur das Signet, die Wortmarke waere zu breit */
.side-collapsed .as-logo{display:inline-flex}
.side-collapsed .as-logo .marke-wort{display:none}
.admin-side{background:linear-gradient(180deg,rgba(26,17,11,.96),rgba(17,11,7,.98));border-right:1px solid var(--line-2)}
.admin-main{color:var(--ink)}
.admin-main .card{background:linear-gradient(180deg,rgba(38,25,16,.92),rgba(26,17,11,.95));border-color:var(--line-2);
  box-shadow:0 18px 44px rgba(0,0,0,.35)}
.admin-main .muted{color:#ab9576}                      /* heller als aussen: besserer Kontrast auf der Karte */
.admin-main label{color:var(--ink-2)}
.admin-main input,.admin-main select,.admin-main textarea{background:rgba(12,8,5,.6);border-color:var(--line-2);color:var(--ink)}
.admin-main input:focus,.admin-main select:focus,.admin-main textarea:focus{border-color:var(--gold-deep);outline:none}
.admin-main table.data{background:rgba(20,13,8,.6)}

/* Oeffnungszeiten: Zeilen statt Tabellenraster – gleiche Anmutung wie die
   Karten im Buchungsdialog, nicht wie eine Tabellenkalkulation. */
.oh-kopf{display:none}
.oh-grid{
  grid-template-columns:1.1fr 1fr 1fr auto;gap:14px;align-items:center;
  padding:12px 14px;margin-bottom:8px;border-radius:var(--radius);
  border:1px solid var(--line);background:rgba(255,255,255,.02);
  transition:border-color .2s,background .2s;
}
.oh-grid:hover{border-color:var(--gold-deep);background:rgba(214,171,95,.06)}
.oh-grid .day{font-family:var(--serif);font-size:1.02rem;font-weight:500;color:var(--ink)}
.oh-zeit{display:flex;align-items:center;gap:8px;margin:0}
.oh-zeit>span{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);flex:none}
.oh-grid input[type=time]{width:100%;padding:9px 10px;border-radius:10px;font-variant-numeric:tabular-nums}
.oh-grid.zu{opacity:.55}
.oh-grid.zu input[type=time]{text-decoration:line-through}
/* Schalter statt Kaestchen fuer „Geschlossen" */
.oh-schalter{display:inline-flex;align-items:center;gap:9px;cursor:pointer;white-space:nowrap;font-size:.82rem;color:var(--muted)}
.oh-schalter input{position:absolute;opacity:0;width:0;height:0}
.oh-schalter .bahn{position:relative;width:44px;height:24px;border-radius:999px;background:rgba(255,255,255,.09);
  border:1px solid var(--line-2);transition:.25s;flex:none}
.oh-schalter .bahn::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;
  background:var(--muted);transition:.25s}
.oh-schalter input:checked + .bahn{background:linear-gradient(135deg,var(--gold-2),var(--ember));border-color:transparent}
.oh-schalter input:checked + .bahn::after{transform:translateX(20px);background:#231405}
.oh-schalter input:focus-visible + .bahn{box-shadow:0 0 0 3px rgba(214,171,95,.35)}
@media(max-width:700px){
  .oh-grid{grid-template-columns:1fr 1fr;gap:10px}
  .oh-grid .day{grid-column:1 / -1}
  .oh-schalter{grid-column:1 / -1}
}

/* --- Wort-Bild-Marke -----------------------------------------
   Die Wortmarke ist eine Maske aus der gelieferten Vorlage. Durch
   die Buchstabenform scheint derselbe Goldverlauf, der auch im
   Menue wandert – dadurch schimmert sie mit, statt ein starres
   Bild zu sein. Groesse ueber --marke-h. */
.marke{display:inline-flex;align-items:center;gap:.32em;line-height:1}
/* flex:none ist wichtig – sonst quetscht ein enger Kopfbereich die Teile zusammen */
.marke-signet{height:var(--marke-h,40px);width:auto;display:block;flex:none;
  filter:drop-shadow(0 0 8px rgba(227,116,42,.32)) drop-shadow(0 0 22px rgba(214,171,95,.16))}
.marke-wort{
  display:block;flex:none;
  height:calc(var(--marke-h,40px) * .86);
  width:calc(var(--marke-h,40px) * .86 * 3.048);   /* Seitenverhaeltnis der Vorlage */
  -webkit-mask:url('/img/wortmarke-1200.png') center/contain no-repeat;
          mask:url('/img/wortmarke-1200.png') center/contain no-repeat;
  /* Eigener, feiner abgestufter Verlauf statt des einfachen aus .gold-schimmer:
     durchgehend metallisch mit mehreren Glanzkanten, dazu eine zweite,
     senkrechte Ebene, die eine leichte Woelbung andeutet. Anfangs- und Endfarbe
     sind gleich – dadurch laeuft die Wanderung nahtlos.
     Der Verlauf fuellt die ganze Flaeche, die Form gibt allein die Maske vor. */
  -webkit-background-clip:border-box;background-clip:border-box;
  -webkit-text-fill-color:initial;color:transparent;
  background-image:
    linear-gradient(180deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.06) 34%,
                    rgba(0,0,0,.10) 62%,rgba(0,0,0,.24) 100%),
    linear-gradient(100deg,
      #8d5c27 0%,  #c99553 6%,  #f0d3a4 12%, #fffaf0 17%, #ecc590 23%,
      #ab7434 31%, #d9a765 38%, #fff6e4 45%, #ffffff 49%, #f2d3a2 54%,
      #bd8341 62%, #e8c48d 70%, #fff3de 77%, #d9a55f 85%, #a26a2d 93%,
      #8d5c27 100%);
  background-size:100% 100%, 240% 100%;
  background-repeat:no-repeat, repeat-x;
  animation:goldzugFein var(--golddauer,4.2s) linear infinite;
  filter:drop-shadow(0 1px 0 rgba(0,0,0,.35)) drop-shadow(0 0 9px rgba(227,116,42,.34));
}
@media(max-width:980px){ .marke{gap:.26em} }

/* Logo: weicher, gleichmaessiger Schein nach aussen.
   Bewusst OHNE Pulsieren – ein auf- und abschwellendes Logo liest sich als
   Blinken. Bewegung kommt allein vom Glanzband, das durch den Verlauf wandert. */
.rail-logo img,.menu-panel .menu-logo img,.site-footer .footer-grid img{
  filter:drop-shadow(0 0 9px rgba(227,116,42,.34)) drop-shadow(0 0 24px rgba(214,171,95,.18));
}

@media (prefers-reduced-motion:reduce){
  .gold-schimmer,.scroll-cue{animation:none;background-position:22% 50%}
}

/* Menue: Marmor unter den Verlaeufen, etwas praesenter als auf den Seiten */
.menu-overlay{
  background:
    radial-gradient(60% 70% at 75% 25%,rgba(227,116,42,.16),transparent 60%),
    linear-gradient(135deg,rgba(28,19,11,.72),rgba(10,6,3,.86)),
    url('/img/marmor-1600.jpg') center/cover no-repeat;
  background:
    radial-gradient(60% 70% at 75% 25%,rgba(227,116,42,.16),transparent 60%),
    linear-gradient(135deg,rgba(28,19,11,.72),rgba(10,6,3,.86)),
    -webkit-image-set(url('/img/marmor-1600.webp') 1x,url('/img/marmor-2752.webp') 2x) center/cover no-repeat;
  background:
    radial-gradient(60% 70% at 75% 25%,rgba(227,116,42,.16),transparent 60%),
    linear-gradient(135deg,rgba(28,19,11,.72),rgba(10,6,3,.86)),
    image-set(url('/img/marmor-1600.webp') 1x,url('/img/marmor-2752.webp') 2x) center/cover no-repeat;
}

/* ============================================================
   BUCHUNGSLEISTE (Schnelleinstieg im Hero)
   Aufbau wie die Suchleiste von myspa.me, aber im dunklen
   Kupferlook der Seite. Uebergibt an den bestehenden
   Buchungsdialog, ersetzt ihn nicht.
   ============================================================ */
.bleiste{
  display:grid;grid-template-columns:repeat(3,1fr) auto;align-items:stretch;
  gap:0;margin-top:2.4rem;max-width:920px;
  background:rgba(20,13,8,.62);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid rgba(214,171,95,.32);border-radius:999px;padding:8px 8px 8px 10px;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.bl-feld{position:relative;display:flex;flex-direction:column;justify-content:center;gap:2px;padding:10px 22px;min-width:0}
.bl-feld+.bl-feld::before{content:"";position:absolute;left:0;top:16%;height:68%;width:1px;background:rgba(214,171,95,.28)}
.bl-feld label{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);cursor:pointer}
.bl-feld:focus-within label,.bl-feld.offen label{color:var(--gold)}

/* Ausloeser sieht aus wie Text, verhaelt sich wie eine Schaltflaeche */
.bl-trigger{
  appearance:none;background:transparent;border:0;padding:0 18px 0 0;text-align:left;
  font-family:var(--serif);font-size:1.05rem;font-weight:400;color:var(--ink);
  width:100%;min-width:0;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  position:relative;
}
.bl-trigger::after{
  content:"";position:absolute;right:2px;top:50%;width:7px;height:7px;
  border-right:1.5px solid var(--gold);border-bottom:1.5px solid var(--gold);
  transform:translateY(-70%) rotate(45deg);transition:transform .25s;
}
.bl-feld.offen .bl-trigger::after{transform:translateY(-20%) rotate(225deg)}
.bl-trigger:focus-visible{outline:none;color:var(--gold-2)}
.bl-leer{color:var(--muted)}

/* Aufklappflaechen */
/* Die Flaechen haengen per position:fixed am Fenster und werden vom Skript
   ausserdem direkt an <body> gehaengt. Grund: der Hero hat overflow:hidden und
   die Leiste selbst backdrop-filter – letzteres macht sie zum Bezugsrahmen fuer
   fixierte Kindelemente, wodurch die berechneten Fensterkoordinaten daneben
   liegen wuerden. initBuchleiste() setzt Lage und Zustandsklasse. */
.bl-panel[hidden]{display:none}   /* muss .bl-tarife{display:flex} schlagen */
.bl-panel{
  position:fixed;top:0;left:0;z-index:120;
  /* Die Seite setzt an vielen Stellen max-width:100% – hier ausdruecklich
     aufheben, sonst wird die Flaeche auf Feldbreite zusammengedrueckt. */
  max-width:92vw;
  background:linear-gradient(180deg,rgba(38,25,15,.98),rgba(22,14,9,.99));
  border:1px solid var(--line-2);border-radius:var(--radius-lg);
  box-shadow:0 30px 70px rgba(0,0,0,.6);
  padding:20px;
  opacity:0;transform:translateY(-8px) scale(.985);transform-origin:top left;
  transition:opacity .22s ease,transform .22s cubic-bezier(.22,1,.36,1);
}
/* Zustandsklasse sitzt auf der Flaeche selbst – sie ist kein Kind des Feldes mehr */
.bl-panel.offen{opacity:1;transform:none}
/* Nach oben aufklappen, wenn unten kein Platz mehr ist (Leiste sitzt tief im Hero) */
.bl-panel.nach-oben{transform-origin:bottom left;transform:translateY(8px) scale(.985)}
.bl-panel.nach-oben.offen{transform:none}
.bl-panel-titel{font-family:var(--serif);font-size:1.05rem;color:var(--ink);margin:0 0 14px}
@media (prefers-reduced-motion:reduce){.bl-panel{transition:none}}

/* --- Kalender in der Leiste: nutzt die Gestaltung des Buchungskalenders --- */
/* .bl-panel.bl-kal statt nur .bl-kal: die spaeter im Stylesheet stehende
   .cal-Regel wuerde den Hintergrund sonst durchscheinend ueberschreiben. */
.bl-panel.bl-kal{
  width:min(360px,88vw);padding:18px;
  background:linear-gradient(180deg,rgba(40,26,16,.985),rgba(20,13,8,.995));
  border-color:var(--line-2);
}
.bl-kal .cal-head{margin-bottom:12px}
.bl-kal .cal-head strong{font-size:1.02rem;white-space:nowrap}
.bl-kal .cal-head button{width:34px;height:34px;font-size:1rem}
.bl-kal .cal-grid{gap:5px}
.bl-kal .cal-day{border-radius:10px;font-size:.9rem}
.bl-kal .cal-day b{font-size:.86rem}
.bl-kal .cal-day small{display:none}          /* im kleinen Raster nur Farbe, kein Wort */
.bl-kal .cal-legend{margin-top:14px;padding-top:12px;font-size:.72rem;gap:8px 14px}
.bl-kal .cal-laedt{padding:26px 0;text-align:center;color:var(--muted);font-size:.85rem}

/* --- Personen: Figuren wachsen mit der Anzahl mit --- */
.bl-pers{width:min(330px,84vw);text-align:center}
/* Kein gap: ausgeblendete Figuren wuerden sonst weiter Platz beanspruchen.
   Der Abstand steckt im margin der sichtbaren Figuren. */
.pers-reihe{display:flex;flex-wrap:wrap;justify-content:center;min-height:78px;align-items:center;margin-bottom:6px}
.pers-reihe span{
  display:inline-flex;width:0;margin:0;opacity:0;overflow:hidden;
  transform:translateY(7px) scale(.5);
  transition:width .3s cubic-bezier(.22,1,.36,1),margin .3s cubic-bezier(.22,1,.36,1),
             opacity .26s ease,transform .3s cubic-bezier(.22,1,.36,1);
}
.pers-reihe span.aktiv{width:26px;margin:3px 4px;opacity:.94;transform:none}
.pers-reihe svg{width:26px;height:26px;flex:none;fill:var(--gold)}
.pers-steuer{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:4px}
.pers-knopf{width:42px;height:42px;border-radius:50%;border:1px solid var(--line-2);background:var(--surface-2);
  color:var(--gold);font-size:1.3rem;line-height:1;cursor:pointer;transition:.2s}
.pers-knopf:hover:not(:disabled){border-color:var(--gold);background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#231405}
.pers-knopf:disabled{opacity:.3;cursor:not-allowed}
.pers-zahl{font-family:var(--serif);font-size:2rem;font-weight:300;color:var(--ink);min-width:2.2ch}
.pers-hinweis{font-size:.78rem;margin:10px 0 0}
/* Im Buchungsdialog steht die Figurenreihe linksbuendig ueber dem Zaehler */
#bkPersReihe{justify-content:flex-start;min-height:44px;margin:2px 0 10px}
#bkPersReihe span.aktiv{width:24px;margin:2px 3px}
#bkPersReihe svg{width:24px;height:24px}
@media (prefers-reduced-motion:reduce){.pers-reihe span{transition:none}}

/* Die Leiste muss ueber dem Scroll-Hinweis liegen – auf flachen Fenstern
   ueberlappen sich beide sonst. */
.bleiste{position:relative;z-index:6}
.hero .scroll-cue{z-index:2}
@media(max-height:820px){ .hero .scroll-cue{display:none} }

/* --- Angebote als Kacheln --- */
.bl-tarife{width:min(420px,88vw);display:flex;flex-direction:column;gap:8px}
.tarif-kachel{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;cursor:pointer;
  padding:13px 15px;border-radius:var(--radius);border:1px solid var(--line);
  background:rgba(255,255,255,.02);color:var(--ink);transition:.22s;
}
.tarif-kachel:hover{border-color:var(--gold-deep);background:rgba(214,171,95,.09);transform:translateX(3px)}
.tarif-kachel.is-aktiv{border-color:var(--gold);background:linear-gradient(100deg,rgba(214,171,95,.16),rgba(227,116,42,.07));box-shadow:var(--glow)}
.tk-ico{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--gold-deep);color:var(--gold)}
.tk-ico svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tarif-kachel.is-aktiv .tk-ico{background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#231405;border-color:transparent}
.tk-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.tk-name{font-family:var(--serif);font-size:1rem;line-height:1.2}
.tk-meta{font-size:.76rem;color:var(--muted)}
.tk-preis{margin-left:auto;flex:none;font-family:var(--serif);font-size:1rem;color:var(--gold-2)}
.bl-knopf{
  border:0;border-radius:999px;padding:0 34px;cursor:pointer;white-space:nowrap;
  font-family:var(--serif);font-size:1rem;font-weight:500;letter-spacing:.01em;color:#1a1008;
  background:linear-gradient(135deg,var(--gold-2),var(--gold) 45%,var(--ember));
  box-shadow:0 10px 30px rgba(227,116,42,.34);transition:filter .25s,transform .25s,box-shadow .25s;
}
.bl-knopf:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 14px 38px rgba(227,116,42,.46)}
.bl-knopf:active{transform:translateY(0)}
@media(max-width:900px){
  .bleiste{grid-template-columns:1fr 1fr;border-radius:var(--radius-lg);padding:6px;gap:2px;max-width:100%}
  .bl-feld{padding:12px 16px}
  .bl-feld+.bl-feld::before{display:none}
  .bl-feld:nth-child(3){grid-column:1 / -1;border-top:1px solid rgba(214,171,95,.2)}
  .bl-knopf{grid-column:1 / -1;padding:15px 24px;margin-top:4px}
  /* Die Lage berechnet das Skript; hier nur die Groesse begrenzen */
  .bl-panel{max-width:94vw}
}

/* In der Buchungsleiste vorgemerktes Angebot im Buchungsdialog hervorheben */
.time-group.vorgemerkt{border-color:var(--gold-deep);box-shadow:var(--glow)}
/* Angebot passt nicht zur gewaehlten Personenzahl: sichtbar, aber stumpf */
.time-group.nicht-buchbar{opacity:.5}
.tarif-kachel.nicht-buchbar{opacity:.38;filter:saturate(.35);pointer-events:none}
.tg-merk{margin-left:auto;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);border:1px solid var(--gold-deep);border-radius:999px;padding:3px 10px}

/* ============================================================
   BUCHUNGSKALENDER – klarer lesbar
   Die Anzahl freier Zeiten stand frueher in jeder Zelle und hat
   Gaeste eher verwirrt. Jetzt zaehlt nur die Aussage: buchbar,
   knapp, ausgebucht oder geschlossen – in Farbe und Wort.
   ============================================================ */
/* Knapp und Belegt muessen deutlich auseinanderliegen: Bernstein Richtung
   Gelb, Rot kalt und tief – die alten Toene (#e08a3c / #c4553a) lagen im
   Farbkreis nur wenige Grad auseinander und waren fuer Menschen mit
   Rot-Gruen-Schwaeche praktisch gleich. */
:root{ --frei:#5fb87f; --knapp:#eaa73e; --belegt:#c23528; }

.cal{background:linear-gradient(180deg,rgba(38,25,15,.72),rgba(24,15,10,.8));border-color:var(--line-2);padding:26px}
.cal-head strong{font-weight:500;letter-spacing:-.01em}
.cal-grid .dow{color:var(--gold-deep);letter-spacing:.16em;text-transform:uppercase;font-weight:600}

.cal-day{aspect-ratio:1;gap:0;border-radius:14px;transition:transform .18s,border-color .18s,box-shadow .18s,background .18s}
.cal-day b{font-weight:500;font-size:1.05rem}
/* Keine Worte in den Zellen – der Zustand steht in Farbe und Legende */
.cal-day small{display:none}

/* Die Farben muessen im RUHEZUSTAND unterscheidbar sein, nicht erst beim
   Ueberfahren: mit 10 % Fuellung sahen frei, knapp und ausgebucht auf dem
   dunklen Grund fast gleich aus – Gaeste hielten freie Monate fuer belegt.
   Deshalb kraeftige Fuellung und satter Rand schon ohne Maus; das
   Ueberfahren legt nur noch etwas nach. */

/* frei: klar hervorgehoben und einladend */
.cal-day.free{background:rgba(95,184,127,.22);border-color:rgba(120,206,150,.85);color:var(--ink)}
.cal-day.free small{color:#9ad9b0}
.cal-day.free:hover{transform:translateY(-2px);border-color:var(--frei);background:rgba(95,184,127,.34);box-shadow:0 8px 22px rgba(95,184,127,.28);color:var(--ink)}

/* knapp: gleiche Bauform, in warmem Bernstein Richtung Gelb */
.cal-day.limited{background:rgba(234,167,62,.26);border-color:rgba(243,192,105,.95);color:var(--ink)}
.cal-day.limited small{color:#f6cd8a}
.cal-day.limited:hover{transform:translateY(-2px);border-color:var(--knapp);background:rgba(234,167,62,.38);box-shadow:0 8px 22px rgba(234,167,62,.28);color:var(--ink)}

/* ausgebucht: kaltes, tiefes Rot und zusaetzlich DURCHGESTRICHEN – die Form
   traegt die Botschaft auch dort, wo die Farbe es nicht kann (Rot-Gruen-
   Schwaeche, schlechte Bildschirme, grelles Licht). */
.cal-day.full{background:rgba(194,53,40,.2);border-color:rgba(214,72,58,.65);color:#dc9184;cursor:not-allowed}
.cal-day.full small{color:#dc9184}
.cal-day.full::after{content:"";position:absolute;left:18%;right:18%;top:50%;height:2px;background:var(--belegt);transform:rotate(-16deg);opacity:.9;border-radius:2px}

.cal-day.closed,.cal-day.past{color:var(--muted)}
.cal-day.closed small,.cal-day.past small{font-size:.5rem}
.cal-day.unavailable{color:var(--line-2);background:transparent;border-color:transparent}

.cal-day.selected{background:linear-gradient(135deg,var(--gold-2),var(--gold));color:#231405;border-color:transparent;box-shadow:0 10px 26px rgba(227,116,42,.32)}
.cal-day.selected small{color:#3a2409}
.cal-day .dot{display:none}

.cal-legend{gap:14px 22px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-size:.8rem}
.cal-legend i{width:11px;height:11px;border-radius:4px;border:1px solid transparent}
.cal-legend .lg-frei{background:rgba(95,184,127,.22);border-color:var(--frei)}
.cal-legend .lg-knapp{background:rgba(234,167,62,.26);border-color:var(--knapp)}
.cal-legend .lg-belegt{background:rgba(194,53,40,.2);border-color:rgba(214,72,58,.75);position:relative}
/* derselbe Durchstrich wie in der Zelle, damit die Legende die Form erklaert */
.cal-legend .lg-belegt::after{content:"";position:absolute;left:10%;right:10%;top:46%;height:1.5px;background:var(--belegt);transform:rotate(-16deg)}
.cal-legend .lg-zu{background:repeating-linear-gradient(45deg,rgba(150,120,80,.22),rgba(150,120,80,.22) 3px,transparent 3px,transparent 6px);border-color:var(--line-2)}

@media(max-width:560px){
  .cal{padding:16px}
  .cal-day{border-radius:11px}
  .cal-day small{font-size:.46rem;letter-spacing:.02em}
}

/* ============================================================
   MENUE ALS SEITENPANEL
   Frueher legte sich das Menue als Vollbild ueber die Seite. Jetzt
   faehrt neben der Leiste ein Panel ein, die Seite bleibt dahinter
   sichtbar und wird nur abgedunkelt.
   ============================================================ */
.menu-overlay{
  position:fixed;inset:0;z-index:90;display:block;padding:0;overflow:visible;
  background:none;opacity:1;visibility:hidden;
  transition:visibility 0s linear .45s;
}
.menu-overlay.open{visibility:visible;transition-delay:0s}

.menu-schleier{
  position:absolute;inset:0;background:rgba(8,5,3,.58);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .4s ease;cursor:pointer;
}
.menu-overlay.open .menu-schleier{opacity:1}

.menu-panel{
  position:absolute;left:var(--rail);top:0;bottom:0;
  width:clamp(300px,32vw,440px);max-width:calc(100vw - var(--rail));
  display:flex;flex-direction:column;justify-content:center;
  padding:84px 30px 34px;overflow-y:auto;overscroll-behavior:contain;
  border-right:1px solid var(--line-2);
  box-shadow:34px 0 80px rgba(0,0,0,.55);
  transform:translateX(-102%);
  transition:transform .45s cubic-bezier(.22,1,.36,1);
  background:
    radial-gradient(70% 40% at 50% 0%,rgba(227,116,42,.16),transparent 62%),
    linear-gradient(160deg,rgba(28,19,11,.9),rgba(10,6,3,.95)),
    url('/img/marmor-1600.jpg') center/cover no-repeat;
  background:
    radial-gradient(70% 40% at 50% 0%,rgba(227,116,42,.16),transparent 62%),
    linear-gradient(160deg,rgba(28,19,11,.9),rgba(10,6,3,.95)),
    -webkit-image-set(url('/img/marmor-1600.webp') 1x,url('/img/marmor-2752.webp') 2x) center/cover no-repeat;
  background:
    radial-gradient(70% 40% at 50% 0%,rgba(227,116,42,.16),transparent 62%),
    linear-gradient(160deg,rgba(28,19,11,.9),rgba(10,6,3,.95)),
    image-set(url('/img/marmor-1600.webp') 1x,url('/img/marmor-2752.webp') 2x) center/cover no-repeat;
}
.menu-overlay.open .menu-panel{transform:none}

/* Inhalt untereinander statt zweispaltig – das Panel ist schmal */
.menu-panel .menu-inner{display:flex;flex-direction:column;gap:26px;padding:0;max-width:none;width:100%}
.menu-panel .menu-logo{position:absolute;top:26px;left:30px}
.menu-panel .menu-logo img{height:34px}
.menu-panel .menu-close{top:24px;right:24px;width:40px;height:40px;font-size:1rem}
.menu-panel .menu-meta{align-self:stretch;font-size:.86rem;border-top:1px solid var(--line);padding-top:20px}

/* Navigationszeilen auf Panelbreite bringen */
.menu-panel .xnav{gap:6px}
.menu-panel .xnav .xrow{width:100%;gap:14px;padding:10px 14px 10px 10px}
.menu-panel .xnav .xic{width:38px;height:38px}
.menu-panel .xnav .xic svg{width:18px;height:18px}
.menu-panel .xnav .xlb{font-size:clamp(1.15rem,1.6vw,1.45rem)}
.menu-panel .xnav .xrow:hover{transform:translateX(5px)}

@media(max-width:980px){
  .menu-panel{
    left:0;top:62px;bottom:0;width:min(86vw,380px);max-width:86vw;
    padding:26px 22px 30px;justify-content:flex-start;
  }
  .menu-panel .menu-logo{display:none}
  .menu-panel .menu-close{top:14px;right:14px}
  .menu-panel .xnav .xlb{font-size:1.25rem}
}
@media(prefers-reduced-motion:reduce){
  .menu-panel{transition:none}
  .menu-schleier{transition:none}
}

/* Menueband (feste Leiste links, auf Mobilgeraeten oben): derselbe Stein.
   Der Ausschnitt ist schmal, deshalb greift hier ein Bildausschnitt statt cover. */
.rail{z-index:95}
.rail{
  background:
    linear-gradient(180deg,rgba(15,10,6,.82),rgba(10,6,3,.88)),
    url('/img/marmor-1600.jpg') center/cover no-repeat;
  background:
    linear-gradient(180deg,rgba(15,10,6,.82),rgba(10,6,3,.88)),
    -webkit-image-set(url('/img/marmor-1600.webp') 1x,url('/img/marmor-2752.webp') 2x) center/cover no-repeat;
  background:
    linear-gradient(180deg,rgba(15,10,6,.82),rgba(10,6,3,.88)),
    image-set(url('/img/marmor-1600.webp') 1x,url('/img/marmor-2752.webp') 2x) center/cover no-repeat;
}