:root{
  --ink:#0F1115; --ink2:#171A21; --paper:#F5F3EE; --card:#FFFFFF;
  --flare:#FF5A1F; --flare2:#FFB020; --mist:#E9E5DC; --line:#E4E0D6;
  --text:#1B1D22; --slate:#6B6F7A; --white:#FCFBF9;
  --r:22px; --r-sm:12px; --shadow:0 18px 50px -22px rgba(15,17,21,.35);
  --max:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--text); background:var(--paper); line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,.brand{font-family:"Bricolage Grotesque","Instrument Sans",system-ui,sans-serif;
  font-weight:800; letter-spacing:-.02em; line-height:1.02}
.wrap{max-width:var(--max); margin:0 auto; padding:0 24px}
a{color:inherit; text-decoration:none}
.muted{color:var(--slate)} .small{font-size:.85rem} b{font-weight:800}

/* eyebrow labels */
.eyebrow{display:inline-block; font-size:.72rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--flare); margin-bottom:14px}
.eyebrow-dark{color:var(--slate)}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:.4em; border:0; cursor:pointer;
  font:inherit; font-weight:600; border-radius:999px; padding:.85em 1.4em;
  transition:transform .15s ease, box-shadow .2s ease, background .2s; white-space:nowrap}
.btn-sm{padding:.6em 1.1em; font-size:.92rem}
.btn-flare{background:var(--flare); color:#fff; box-shadow:0 10px 24px -10px rgba(255,90,31,.7)}
.btn-flare:hover{transform:translateY(-2px); box-shadow:0 16px 30px -10px rgba(255,90,31,.8)}
.btn-ghost{background:transparent; color:var(--ink); border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--ink); transform:translateY(-2px)}
.btn:disabled{opacity:.4; cursor:not-allowed; transform:none!important; box-shadow:none}
.full{width:100%; justify-content:center; margin-top:6px}

/* NAV */
.nav{position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:24px;
  padding:14px 24px; max-width:var(--max); margin:0 auto; inset-inline:0;
  background:rgba(245,243,238,.9);
  border-bottom:1px solid transparent; transition:.3s}
.nav.stuck{background:rgba(245,243,238,.9); border-color:var(--line)}
.brand{font-size:1.35rem; letter-spacing:-.03em; display:inline-flex; align-items:center}
.brand span{color:var(--flare)} .brand i{width:7px;height:7px;border-radius:50%;
  background:var(--flare); display:inline-block; margin-left:3px; margin-bottom:-2px}
.nav-links{display:flex; gap:26px; margin-left:auto; font-weight:500}
.nav-links a{color:var(--slate)} .nav-links a:hover{color:var(--ink)}
.nav .btn{margin-left:0}

/* HERO */
.hero{position:relative; background:var(--ink); color:var(--white); overflow:hidden;
  border-radius:0 0 34px 34px}
.hero-glow{position:absolute; inset:-30% -10% auto -10%; height:120%;
  background:radial-gradient(60% 55% at 72% 12%, rgba(255,90,31,.55), transparent 60%),
             radial-gradient(45% 40% at 15% 8%, rgba(255,176,32,.25), transparent 60%);
  pointer-events:none}
.hero-inner{position:relative; max-width:var(--max); margin:0 auto; padding:86px 24px 120px}
.hero .eyebrow{color:var(--flare2)}
.hero h1{font-size:clamp(2.6rem,6.4vw,5rem); max-width:14ch}
.hero h1 em{font-style:normal; color:var(--flare)}
.lead{margin-top:22px; max-width:52ch; font-size:clamp(1.05rem,1.6vw,1.25rem);
  color:#C7C9D1}

/* finder bar */
.finder{margin-top:38px; display:flex; gap:10px; align-items:end; flex-wrap:wrap;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  padding:16px; border-radius:20px; max-width:760px}
.finder label{display:flex; flex-direction:column; gap:6px; font-size:.78rem;
  font-weight:600; letter-spacing:.04em; color:#AEB1BC; text-transform:uppercase}
.finder select,.finder input{font:inherit; font-size:1rem; color:var(--white);
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.16);
  border-radius:12px; padding:.7em .9em; min-width:150px; text-transform:none;
  letter-spacing:normal; font-weight:400}
.finder select option{color:#111}
.finder .btn{height:46px}
.hero-stats{display:flex; gap:40px; margin-top:40px; flex-wrap:wrap}
.hero-stats b{font-family:"Bricolage Grotesque"; font-size:1.9rem; display:block; color:#fff}
.hero-stats span{color:#9A9DA8; font-size:.9rem}

/* section head */
.sec-head{padding:70px 0 8px}
.sec-head h2,.ablauf h2{font-size:clamp(1.8rem,3.6vw,2.7rem); text-wrap:balance}

/* chips */
.chips{display:flex; gap:10px; flex-wrap:wrap; margin:24px 0 34px}
.chip{padding:.5em 1.05em; border-radius:999px; border:1.5px solid var(--line);
  font-weight:600; font-size:.92rem; color:var(--slate); background:var(--white);
  transition:.15s}
.chip:hover{border-color:var(--ink); color:var(--ink)}
.chip.on{background:var(--ink); color:#fff; border-color:var(--ink)}

/* grid + cards */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(258px,1fr)); gap:22px;
  padding-bottom:20px}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column; transition:transform .2s ease,
  box-shadow .25s ease, border-color .2s}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow); border-color:transparent}
.card-top{position:relative; height:132px;
  background:linear-gradient(135deg,var(--c1),var(--c2)); display:flex; align-items:center;
  justify-content:center; overflow:hidden}
.card-top::after{content:""; position:absolute; width:180px; height:180px; border-radius:50%;
  background:rgba(255,255,255,.16); right:-60px; top:-70px}
.glyph{font-size:3.1rem; filter:drop-shadow(0 6px 12px rgba(0,0,0,.25)); position:relative}
/* Echtes Foto schlaegt jedes Symbol. Der Farbverlauf bleibt als Fallback
   darunter, damit die Karte auch waehrend des Ladens nie leer wirkt. */
.card-top.hat-foto{background:var(--ink)}
.card-top.hat-foto::after{display:none}
.card-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .35s ease}
.card:hover .card-img{transform:scale(1.05)}
.card-tag{position:absolute; left:14px; top:14px; background:rgba(0,0,0,.28); color:#fff;
  font-size:.68rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  padding:.35em .7em; border-radius:999px}
.card-body{padding:18px 18px 16px; display:flex; flex-direction:column; gap:6px; flex:1}
.card-body h3{font-size:1.18rem}
.card-body .muted{font-size:.9rem; flex:1}
.card-foot{display:flex; align-items:end; justify-content:space-between; margin-top:12px; gap:8px}
.price{display:flex; flex-direction:column; line-height:1.15}
.price .ab{font-size:.72rem; color:var(--slate); font-weight:600}
.price b{font-family:"Bricolage Grotesque"; font-size:1.5rem; font-variant-numeric:tabular-nums}
.price .soon{color:var(--slate); font-size:1.1rem}
.price .kaut{font-size:.72rem; color:var(--slate)}

/* ABHOLZEITEN im Ablauf-Block */
.zeiten{display:grid; grid-template-columns:1fr auto; gap:14px 30px; align-items:start;
  margin-top:26px; padding:22px 24px; border-radius:var(--r);
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12)}
.zeiten .adr{margin:6px 0 0; font-size:.94rem; color:rgba(255,255,255,.78)}
.zeiten .zeit-t{border-collapse:collapse}
.zeiten .zeit-t td{padding:3px 0; font-size:.95rem}
.zeiten .zeit-t td:first-child{font-weight:700; padding-right:20px; white-space:nowrap}
.zeiten .zeit-t td:last-child{text-align:right; font-variant-numeric:tabular-nums}
@media (max-width:640px){.zeiten{grid-template-columns:1fr}}

/* ABLAUF */
.ablauf{background:var(--ink); color:var(--white); margin-top:80px; padding:82px 0}
.ablauf .eyebrow{color:var(--flare2)}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:36px}
.step{background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12);
  border-radius:var(--r); padding:28px 24px}
.step .num{font-family:"Bricolage Grotesque"; font-size:1.1rem; color:var(--flare2);
  font-weight:800}
.step h4{font-size:1.25rem; margin:14px 0 8px; color:#fff}
.step p{color:#B9BCC6; font-size:.96rem}
.step.human{background:linear-gradient(150deg,rgba(255,90,31,.22),rgba(255,90,31,.05));
  border-color:rgba(255,90,31,.5)}
.step.human h4 i{font-style:normal}

/* FOOTER */
.foot{background:var(--ink2); color:#C7C9D1; padding:46px 0}
.foot-in{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; align-items:end}
.foot .brand{color:#fff; font-size:1.25rem}

/* DRAWER */
.drawer-bg{position:fixed; inset:0; background:rgba(15,17,21,.55);
  opacity:0; pointer-events:none; transition:.3s; z-index:60}
.drawer-bg.on{opacity:1; pointer-events:auto}
.drawer{position:fixed; top:0; right:0; height:100%; width:min(420px,92vw); z-index:70;
  background:var(--paper); box-shadow:-30px 0 60px -30px rgba(0,0,0,.5);
  padding:56px 30px 30px; transform:translateX(105%); transition:transform .32s cubic-bezier(.4,.0,.1,1);
  overflow-y:auto}
.drawer.on{transform:none}
.drawer-x{position:absolute; top:18px; right:20px; background:var(--mist); border:0; width:34px;
  height:34px; border-radius:50%; cursor:pointer; font-size:.9rem}
.drawer h3{font-size:1.5rem; margin:6px 0 18px}
.d-dates,.d-form label{display:flex; gap:12px; margin-bottom:14px}
.d-dates{gap:12px}
.d-dates label,.d-form label{flex-direction:column; flex:1; font-size:.78rem; font-weight:600;
  letter-spacing:.03em; text-transform:uppercase; color:var(--slate); gap:6px}
.drawer input,.drawer select{font:inherit; font-size:1rem; color:var(--text); background:#fff;
  border:1.5px solid var(--line); border-radius:12px; padding:.7em .8em; text-transform:none;
  font-weight:400; letter-spacing:normal}
.d-result{margin:8px 0 6px}
.d-badge{display:flex; align-items:center; gap:10px; padding:14px 16px; border-radius:14px;
  font-weight:600; margin-bottom:6px}
.d-badge.ok{background:#E7F6EC; color:#137a3a}
.d-badge.warn{background:#FFF3E4; color:#9a5b00}
.d-badge.no{background:#FBE9E9; color:#b0392f}
.d-price{font-family:"Bricolage Grotesque"; font-size:1.6rem; margin:6px 0}
.d-price small{font-family:"Instrument Sans"; font-weight:500; color:var(--slate); font-size:.85rem}
.fineprint{font-size:.78rem; color:var(--slate); margin-top:10px}
.drawer .btn.full{margin-top:4px}
.d-liefer{display:flex; gap:8px; margin:2px 0 12px}
.d-liefer .pick{flex:1; display:flex; align-items:center; gap:8px; border:1.5px solid var(--line);
  border-radius:12px; padding:.6em .7em; cursor:pointer; font-size:.88rem; font-weight:500;
  text-transform:none; letter-spacing:normal; color:var(--text)}
.d-liefer .pick input{accent-color:var(--flare); margin:0}
.d-liefer .pick:has(input:checked){border-color:var(--flare); background:#FFF3E4}

@media (max-width:820px){
  .nav-links{display:none}
  .steps{grid-template-columns:1fr}
  .hero-inner{padding:64px 24px 90px}
}
/* CHAT */
.chat-fab{position:fixed; right:22px; bottom:22px; z-index:50; display:flex; align-items:center; gap:8px;
  background:var(--flare); color:#fff; border:0; cursor:pointer; font:inherit; font-weight:600;
  padding:.8em 1.2em; border-radius:999px; box-shadow:0 14px 30px -10px rgba(255,90,31,.7); font-size:1.1rem}
.chat-fab span{font-size:.9rem}
.chat-fab:hover{transform:translateY(-2px)}
.chat{position:fixed; right:22px; bottom:22px; z-index:55; width:min(380px,92vw); height:min(560px,80vh);
  background:#fff; border:1px solid var(--line); border-radius:22px; box-shadow:0 30px 70px -25px rgba(0,0,0,.45);
  display:flex; flex-direction:column; overflow:hidden; transform:translateY(20px) scale(.96); opacity:0;
  pointer-events:none; transition:.25s cubic-bezier(.4,0,.1,1); transform-origin:bottom right}
.chat.on{transform:none; opacity:1; pointer-events:auto}
.chat-head{background:var(--ink); color:#fff; padding:16px 18px; display:flex; justify-content:space-between;
  align-items:center}
.chat-head b{font-family:'Bricolage Grotesque',Segoe UI,sans-serif} .chat-head span{color:#9A9DA8; font-size:.82rem}
.chat-head button{background:rgba(255,255,255,.12); color:#fff; border:0; width:30px; height:30px;
  border-radius:50%; cursor:pointer}
.chat-log{flex:1; overflow-y:auto; padding:18px; display:flex; flex-direction:column; gap:10px; background:var(--paper)}
.msg{max-width:80%; padding:10px 14px; border-radius:16px; font-size:.93rem; line-height:1.45}
.msg.bot{background:#fff; border:1px solid var(--line); align-self:flex-start; border-bottom-left-radius:5px}
.msg.me{background:var(--flare); color:#fff; align-self:flex-end; border-bottom-right-radius:5px}
.chat-in{display:flex; gap:8px; padding:12px; border-top:1px solid var(--line); background:#fff}
.chat-in input{flex:1; font:inherit; border:1.5px solid var(--line); border-radius:999px; padding:.7em 1em}
.chat-in .btn{padding:.7em 1em; border-radius:50%}

/* WARENKORB */
.cart-fab{position:fixed; left:22px; bottom:22px; z-index:50; display:flex; align-items:center;
  justify-content:center; background:var(--ink); color:#fff; border:0; cursor:pointer; font-size:1.3rem;
  width:58px; height:58px; border-radius:50%; box-shadow:0 14px 30px -10px rgba(15,17,21,.6);
  transition:transform .15s, opacity .15s}
/* Leerer Warenkorb verschwindet: er verdeckte auf dem Handy den Hauptknopf
   "Verfuegbarkeit pruefen" — den wichtigsten Klick der Seite. */
.cart-fab.leer{opacity:0; pointer-events:none; transform:scale(.7)}
.cart-fab b{font-family:'Bricolage Grotesque',Segoe UI,sans-serif; font-size:.82rem; color:#fff;
  background:var(--flare); border-radius:999px; min-width:20px; height:20px; line-height:20px;
  padding:0 5px; position:absolute; top:-4px; right:-4px}
.cart-fab:hover{transform:translateY(-2px)} .cart-fab.pulse{transform:scale(1.14)}
.cart-items{margin:2px 0 14px; display:flex; flex-direction:column; gap:8px}
.citem{display:flex; align-items:center; justify-content:space-between; background:#fff;
  border:1px solid var(--line); border-radius:12px; padding:.55em .8em; font-size:.92rem; font-weight:500}
.citem .crm{background:var(--mist); border:0; width:26px; height:26px; border-radius:50%; cursor:pointer; font-size:.78rem}
.posbox{margin:8px 0; border:1px solid var(--line); border-radius:12px; overflow:hidden}
.prow{display:flex; justify-content:space-between; padding:.55em .8em; font-size:.9rem;
  border-bottom:1px solid var(--line); background:#fff}
.prow:last-child{border-bottom:0} .prow b{font-variant-numeric:tabular-nums}
.prow em{font-style:normal; color:var(--flare); font-weight:600; font-size:.8rem}
.prow.disc{color:#137a3a; font-weight:600}
.citem .cname{flex:1}
.qty{display:inline-flex; align-items:center; gap:8px; margin-right:8px}
.qty b{min-width:16px; text-align:center; font-variant-numeric:tabular-nums}
.qty .qm{background:var(--mist); border:0; width:26px; height:26px; border-radius:8px; cursor:pointer; font-size:1rem; line-height:1; font-weight:700; color:var(--ink)}
.qty .qm:hover{background:var(--flare); color:#fff}
.cart-reco{margin:0 0 14px}
.reco-t{font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--slate); margin-bottom:6px}
.reco{display:inline-block; margin:0 6px 6px 0; font:inherit; font-size:.85rem; font-weight:600;
  background:#fff; border:1.5px dashed var(--flare); color:var(--flare); border-radius:999px;
  padding:.45em .9em; cursor:pointer}
.reco:hover{background:var(--flare); color:#fff; border-style:solid}

/* MINI-KALENDER */
.kal{background:#fff; border:1px solid var(--line); border-radius:14px; padding:12px; margin:0 0 14px}
.kal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
.kal-head b{font-size:.9rem}
.kal-head button{background:var(--mist); border:0; width:28px; height:28px; border-radius:8px; cursor:pointer; font-size:1rem}
.kal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px}
.kd{aspect-ratio:1; display:flex; align-items:center; justify-content:center; border-radius:8px;
  font-size:.78rem; font-weight:600; cursor:pointer; border:2px solid transparent}
.kd.wd{cursor:default; color:var(--slate); font-size:.66rem; font-weight:700; aspect-ratio:auto; padding:2px 0}
.kd.frei{background:#E7F6EC; color:#137a3a}
.kd.teils{background:#FFF3E4; color:#9a5b00}
.kd.belegt{background:#FBE9E9; color:#b0392f; cursor:not-allowed}
.kd.offen{background:#EDEBE6; color:#555}
.kd.vorbei{background:transparent; color:#c9c5bc; cursor:not-allowed}
.kd.sel{border-color:var(--ink)}
.kd.range{outline:2px solid rgba(255,90,31,.35)}
.kal-legende{display:flex; gap:14px; margin-top:8px; font-size:.72rem; color:var(--slate); align-items:center}
.kal-legende i{width:12px; height:12px; border-radius:4px; display:inline-block; margin-right:4px}
.kal-legende .frei{background:#E7F6EC} .kal-legende .teils{background:#FFF3E4} .kal-legende .belegt{background:#FBE9E9}

/* EVENT-PLANER (nutzt Drawer-Optik) */
.btn-ghost-dunkel{border-color:rgba(255,255,255,.35); color:#fff}
.btn-ghost-dunkel:hover{border-color:#fff}
#event{z-index:75}

@media (prefers-reduced-motion:reduce){*{transition:none!important; scroll-behavior:auto}}

/* Mobil: FABs kompakt (Text weg) + Platz am Seitenende, damit nichts verdeckt wird */
@media (max-width:640px){
  .chat-fab span{display:none}
  .chat-fab{padding:14px; border-radius:50%}
  body{padding-bottom:86px}
}

/* Familien-Karten: Groessen-Auswahl */
.var-select{width:100%; margin:6px 0 2px; padding:9px 10px; border:1.5px solid var(--line);
  border-radius:10px; font:inherit; font-size:.88rem; background:#fff; cursor:pointer}
.var-select:focus{outline:2px solid var(--flare); outline-offset:1px}

/* AGB-Zeile im Buchungsformular: Haekchen + Text in einer Reihe, normale Schrift */
.agb-line{display:flex; gap:9px; align-items:flex-start; margin-top:10px;
  font-size:.8rem; text-transform:none; letter-spacing:0; color:var(--text); cursor:pointer}
.agb-line input{margin-top:2px; width:16px; height:16px; accent-color:var(--flare); flex:none}
.agb-line a{color:var(--flare); font-weight:600}


/* --- UX-Feinschliff --- */
.verf-badge{position:absolute; left:14px; bottom:12px; padding:.25em .7em; border-radius:999px;
  font-size:.72rem; font-weight:800; background:rgba(255,255,255,.92); color:#137a3a}
.verf-badge[data-s="belegt"]{color:#b0392f}
.verf-badge[data-s="offen"]{color:#9a5b00}
.card .card-top{position:relative}
.card{transition:transform .18s ease, box-shadow .18s ease}
.card:hover{transform:translateY(-3px); box-shadow:0 14px 34px rgba(15,17,21,.10)}
.card-link{color:inherit; text-decoration:none}
.card-link:hover{color:var(--flare)}
.fam-detail{display:block; margin-top:2px; color:var(--flare); font-weight:600}
.bald-reihe{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:12px}
.bald-karte{display:flex; gap:12px; align-items:center; background:#fff; border:1.5px dashed var(--line);
  border-radius:16px; padding:14px 16px; opacity:.92}
.bald-glyph{font-size:1.9rem; flex:none}
.bald-karte b{font-size:.95rem}
.bald-karte .bald-alarm{margin-left:auto; flex:none}
.reveal{opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease}
.reveal.da{opacity:1; transform:none}
.skel{height:16px; border-radius:8px; margin:8px 0; background:linear-gradient(90deg,var(--mist) 25%,#fff 50%,var(--mist) 75%);
  background-size:200% 100%; animation:skel 1.1s infinite linear}
.skel.kurz{width:55%}
@keyframes skel{from{background-position:200% 0} to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1; transform:none} .card{transition:none}}