/* Lokal eingebundene Schriften – es werden keine externen Server aufgerufen (DSGVO).
   Beide Dateien sind Variable Fonts, ein Schnitt deckt den ganzen Gewichtsbereich ab. */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('../fonts/cormorant-garamond.woff2') format('woff2');}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('../fonts/source-sans-3.woff2') format('woff2');}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/cinzel.woff2') format('woff2');}

/* =========================================================
   Taverne Mykonos – Stylesheet
   Farbwelt: Schwarz & Beige (aus dem Logo abgeleitet)
   ========================================================= */

:root{
  --bg:#f6f0e3;          /* Papierbeige – Seitengrund      */
  --surface:#fffdf8;     /* Weiß-Beige – Karten, Formulare */
  --surface2:#ebdfc7;    /* Sandbeige – abgesetzte Blöcke  */
  --ink:#16130f;         /* Schwarz aus dem Logo           */
  --mut:#7a6f5b;         /* Grautext                       */
  --line:#ddd0b3;        /* Linien                         */
  --accent:#a8804a;      /* Bronze – Akzentfarbe           */
  --accent-soft:#f0e5d0;
  --band-ink:#f6f0e3;    /* Text auf schwarzen Bändern     */
  --r:3px;
  --ff-display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --ff-headline:"Cinzel",Georgia,"Times New Roman",serif;   /* Überschriften, Kapitalis */
  --ff-body:"Source Sans 3",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --wrap:1140px;
  --shadow:0 1px 2px rgba(30,22,10,.05),0 12px 30px -18px rgba(30,22,10,.45);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--ff-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
a{color:var(--ink)}
h1,h2,h3,h4{font-family:var(--ff-headline); margin:0; text-wrap:balance}
p{margin:0 0 15px}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 30px}
.wrap.narrow{max-width:880px}
@media (max-width:640px){ .wrap{padding:0 20px} }

.skip{position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--bg); padding:10px 16px; z-index:200}
.skip:focus{left:8px; top:8px}

/* ---------- Typografie ---------- */
.h1{font-family:var(--ff-headline); font-size:clamp(26px,3.4vw,42px); font-weight:500;
  line-height:1.16; letter-spacing:.015em}
.h2{font-family:var(--ff-headline); font-size:clamp(21px,2.4vw,31px); font-weight:500;
  line-height:1.2; letter-spacing:.02em; margin-bottom:12px}
.h3{font-family:var(--ff-headline); font-size:17px; font-weight:600; line-height:1.3;
  letter-spacing:.02em; margin-bottom:8px}
.lead{font-size:17px; color:var(--mut); line-height:1.62; max-width:62ch; margin:0}
.eyebrow{display:block; font-size:14px; text-transform:uppercase; letter-spacing:.2em;
  color:var(--accent); font-weight:600; margin-bottom:12px}
.meander{display:block; width:118px; height:14px; margin:0 auto 18px; color:var(--accent)}

/* ---------- Abschnitte ---------- */
.sec{padding:64px 0}
.sec.tight{padding:44px 0}
.sec.alt{background:var(--surface2); border-block:1px solid var(--line)}
.sec.dark{background:var(--ink); color:var(--band-ink)}
.sec.dark .lead{color:rgba(246,240,227,.74)}
.sec.dark .eyebrow{color:rgba(246,240,227,.82)}
.sec.dark .card{background:rgba(246,240,227,.08); border-color:rgba(246,240,227,.22); color:var(--band-ink)}
.sec.dark .card p{color:rgba(246,240,227,.72)}
.sechead{max-width:62ch; margin:0 auto 30px; text-align:center}
.sechead .h1{margin-bottom:12px}
.sechead.left{margin-inline:0; text-align:left}

/* ---------- Schaltflächen ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--ff-body); font-size:12.5px; font-weight:600; text-transform:uppercase; letter-spacing:.07em;
  padding:14px 26px; border:1px solid var(--ink); border-radius:var(--r);
  background:var(--ink); color:var(--bg); cursor:pointer; text-decoration:none; line-height:1.1;
  transition:transform .12s ease, background .15s ease, color .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{background:transparent; color:var(--accent); border-color:var(--accent)}
.btn.ghost:hover{background:var(--accent); border-color:var(--accent); color:#fff}
.btn.acc{background:var(--accent); border-color:var(--accent); color:#fff}
.btn.sm{padding:10px 16px; font-size:11px}
.btnrow{display:flex; flex-wrap:wrap; gap:12px; margin-top:24px}
.btnrow.center{justify-content:center}

/* ---------- Raster & Karten ---------- */
.grid{display:grid; gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.grid.center{align-items:center}
@media (max-width:900px){ .g3,.g4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:760px){ .g2,.g3,.g4{grid-template-columns:1fr} }
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:24px}
.card p{color:var(--mut); font-size:14.5px; margin:0}

/* ---------- Bilder ---------- */
figure{margin:0}
.ph{position:relative; overflow:hidden; border-radius:var(--r); background:var(--surface2)}
.ph picture{display:block}
.ph img{width:100%; height:100%; object-fit:cover}
.ph figcaption{position:absolute; left:11px; bottom:10px; z-index:2; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:#fff; background:rgba(12,10,6,.45); padding:4px 10px; border-radius:20px}
.gal{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media (max-width:760px){ .gal{grid-template-columns:1fr} }
.h240 img{height:240px} .h200 img{height:200px} .h340 img{height:340px}
.h320 img{height:320px} .h260 img{height:260px} .h210 img{height:210px}

/* ---------- Kopfbereich ---------- */
.topbar{background:var(--ink); color:var(--band-ink); font-size:12.5px}
.topbar .in{max-width:var(--wrap); margin:0 auto; padding:8px 30px; display:flex; gap:22px; flex-wrap:wrap; align-items:center}
.topbar a{color:inherit; text-decoration:none}
.topbar .right{margin-left:auto; font-weight:700}
.dot{width:6px; height:6px; border-radius:50%; background:#6ed6a4; display:inline-block; margin-right:6px}
@media (max-width:760px){ .topbar .in{padding:8px 20px; font-size:12px} .topbar .hide-s{display:none} }

.nav{background:var(--surface); border-bottom:1px solid var(--line); position:relative; z-index:50}
.nav .in{max-width:var(--wrap); margin:0 auto; padding:11px 30px; display:flex; align-items:center; gap:26px}
.brandmark{display:flex; align-items:center; gap:14px; margin-right:auto; text-decoration:none}
.brandmark img{height:90px; width:auto}
.brandmark span{font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--mut);
  font-weight:600; border-left:1px solid var(--line); padding-left:14px; line-height:1.5; max-width:150px}
.navlinks{display:flex; gap:22px; flex-wrap:wrap; list-style:none; margin:0; padding:0}
.navlinks a{font-size:12.5px; text-transform:uppercase; letter-spacing:.1em; text-decoration:none;
  padding-bottom:3px; border-bottom:2px solid transparent; display:inline-block}
.navlinks a:hover{color:var(--accent)}
.navlinks a[aria-current="page"]{border-color:var(--accent); font-weight:700}
.burger{display:none; width:44px; height:40px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface); cursor:pointer; padding:0; align-items:center; justify-content:center}
.burger span{display:block; width:20px; height:2px; background:var(--ink); position:relative}
.burger span::before,.burger span::after{content:""; position:absolute; left:0; width:20px; height:2px; background:var(--ink)}
.burger span::before{top:-6px} .burger span::after{top:6px}
@media (max-width:900px){
  .brandmark span{display:none}
  .burger{display:inline-flex}
  .navlinks{position:absolute; top:100%; left:0; right:0; background:var(--surface);
    border-bottom:1px solid var(--line); flex-direction:column; gap:0; padding:6px 20px 14px; display:none}
  .navlinks.open{display:flex}
  .navlinks li{border-top:1px solid var(--line)}
  .navlinks a{padding:13px 0; font-size:13px; border-bottom:0; width:100%}
  .navlinks a[aria-current="page"]{color:var(--accent)}
}

/* ---------- Hero ---------- */
.hero{position:relative}
.hero .ph{border-radius:0}
.hero .ph img{height:min(58vh,470px); object-position:center 18%}
.hero .ph::before{content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(10,8,4,.30),rgba(10,8,4,.05) 45%,rgba(10,8,4,.40))}
.hero .box{position:relative; z-index:3; max-width:760px; margin:-110px auto 0; padding:44px 48px 40px;
  background:var(--surface); border:1px solid var(--line); text-align:center;
  box-shadow:0 24px 50px -34px rgba(20,14,6,.55)}
.hero .box .lead{margin:16px auto 0}
.hero .box .btnrow{justify-content:center}
@media (max-width:760px){ .hero .box{margin:-56px 20px 0; padding:30px 24px} }

.pagehead{padding:44px 0 0}
.banner{position:relative}
.banner .ph{border-radius:0}
.banner .ph img{height:330px}
.banner .ph::before{content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(10,8,4,.15),rgba(10,8,4,.62))}
.banner .cap{position:absolute; inset:auto 0 0 0; z-index:2; padding:0 30px 34px; text-align:center; color:#fff}
.banner .cap h1{font-family:var(--ff-headline); font-size:clamp(24px,3.2vw,40px); font-weight:500;
  line-height:1.18; letter-spacing:.015em; margin-bottom:10px}
.banner .cap p{max-width:56ch; margin:0 auto; color:rgba(255,255,255,.88)}

/* ---------- Speisekarte ---------- */
.mcats{display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:28px; padding:0; list-style:none}
.mcats button{font:inherit; font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; font-weight:600;
  padding:9px 16px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface);
  color:var(--mut); cursor:pointer}
.mcats button:hover{color:var(--ink)}
.mcats button[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--bg)}
.mgroup{margin-bottom:44px}
.mgroup > h2{font-family:var(--ff-headline); font-size:22px; font-weight:500;
  letter-spacing:.02em; margin-bottom:6px}
.mgroup .ghint{font-size:13px; color:var(--mut); margin:0 0 14px}
.mlist{display:grid; gap:0}
.mrow{display:grid; grid-template-columns:1fr auto; gap:4px 16px; align-items:baseline;
  padding:13px 0; border-bottom:1px solid var(--line)}
.mrow .mn{font-family:var(--ff-display); font-size:20px; font-weight:600}
.mnum{display:inline-block; min-width:2.4em; font-family:var(--ff-body); font-size:11.5px; font-weight:700;
  color:var(--mut); letter-spacing:.04em; margin-right:8px; vertical-align:2px}
.mrow .md{grid-column:1; font-size:13.5px; color:var(--mut); margin-top:2px; max-width:70ch}
.mrow .mp{font-family:var(--ff-display); font-size:19px; font-weight:700; color:var(--accent);
  font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right}
.mp-zeile{display:block}
.mp-zeile + .mp-zeile{margin-top:2px}
.mp-zeile i{font-style:normal; font-family:var(--ff-body); font-size:12.5px; font-weight:600;
  color:var(--mut); margin-right:12px}
.mnote{font-size:13px; color:var(--mut); margin-top:22px}

/* ---------- Anlässe ---------- */
.anlaesse{display:grid; grid-template-columns:repeat(3,1fr); gap:32px 36px; margin-top:38px}
@media (max-width:860px){ .anlaesse{grid-template-columns:1fr; gap:26px} }
.anlassgruppe h3{font-family:var(--ff-body); font-size:11px; text-transform:uppercase;
  letter-spacing:.16em; color:var(--accent); font-weight:700; margin:0 0 15px;
  padding-bottom:11px; border-bottom:1px solid var(--line)}
.tags{display:flex; flex-wrap:wrap; gap:8px; list-style:none; margin:0; padding:0}
.tags li{font-size:13.5px; line-height:1.2; padding:9px 15px; border-radius:20px;
  background:var(--surface); border:1px solid var(--line); color:var(--ink)}
.anlassnote{max-width:72ch; margin:32px auto 0; text-align:center; font-size:14.5px;
  color:var(--mut); text-wrap:balance}

/* ---------- Plattformen (Creator-Seite) ---------- */
.plattformen{display:flex; flex-wrap:wrap; justify-content:center; gap:12px; list-style:none; margin:34px 0 0; padding:0}
.plattform{display:flex; flex-direction:column; align-items:center; gap:10px; width:116px; padding:20px 8px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r)}
.plattform svg{color:var(--ink)}
.plattform span{font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--mut); font-weight:600}
.sec.dark .plattform{background:rgba(246,240,227,.08); border-color:rgba(246,240,227,.25)}
.sec.dark .plattform svg{color:var(--band-ink)}
.sec.dark .plattform span{color:rgba(246,240,227,.72)}
.grid .plattformen{margin-top:0}
/* Startseite: füllt die Spalte, drei Kacheln oben, zwei mittig darunter */
.plattformen.kompakt{display:grid; grid-template-columns:repeat(6,1fr); gap:14px; width:100%; margin:0}
.plattformen.kompakt .plattform{width:auto; grid-column:span 2; padding:26px 12px; gap:13px}
.plattformen.kompakt .plattform:nth-child(4){grid-column:2 / span 2}
.plattformen.kompakt .plattform:nth-child(5){grid-column:4 / span 2}
.plattformen.kompakt .plattform svg{width:40px; height:40px}
.plattformen.kompakt .plattform span{font-size:12px}
@media (max-width:760px){
  .plattformen.kompakt{grid-template-columns:repeat(2,1fr)}
  .plattformen.kompakt .plattform,
  .plattformen.kompakt .plattform:nth-child(4),
  .plattformen.kompakt .plattform:nth-child(5){grid-column:auto}
}

/* ---------- Ablauf ---------- */
.steps{list-style:none; margin:0; padding:0; position:relative}
.steps::before{content:""; position:absolute; left:19px; top:12px; bottom:12px; width:1px; background:var(--line)}
.steps li{position:relative; padding:0 0 26px 58px}
.steps .num{position:absolute; left:0; top:0; width:39px; height:39px; border-radius:50%;
  border:1px solid var(--accent); background:var(--bg); color:var(--accent);
  display:grid; place-items:center; font-family:var(--ff-display); font-size:19px}
.steps p{font-size:14.5px; color:var(--mut); margin:0}
.steps .when{display:block; font-size:12px; font-weight:700; color:var(--accent); letter-spacing:.04em; margin-top:8px}

/* ---------- Pakete ---------- */
.pack{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
@media (max-width:900px){ .pack{grid-template-columns:1fr} }
.packcard{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:24px; display:flex; flex-direction:column; gap:12px}
.packcard.feat{border-color:var(--ink); border-width:2px}
.packprice{font-family:var(--ff-display); font-size:34px; font-weight:700; line-height:1; letter-spacing:-.02em}
.packprice small{font-family:var(--ff-body); font-size:13px; font-weight:600; color:var(--mut); letter-spacing:0}
.packcard ul{margin:0; padding-left:18px; font-size:14px; color:var(--mut); display:grid; gap:6px}
.packcard .btn{margin-top:auto}

/* ---------- Kostenrechner ---------- */
.calc{display:grid; grid-template-columns:1fr 340px; gap:24px; align-items:start}
@media (max-width:1000px){ .calc{grid-template-columns:1fr} }
.calc-main{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:24px 26px}
.pers{display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding-bottom:20px; border-bottom:1px solid var(--line)}
.pers label{font-weight:700; font-size:15px}
.pers .hint{font-size:13px; color:var(--mut)}
.stepper{display:flex; align-items:center; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--bg)}
.stepper button{width:38px; height:40px; border:0; background:none; font:inherit; font-size:19px; color:var(--accent); cursor:pointer}
.stepper button:hover{background:var(--surface2)}
.stepper input{width:66px; height:40px; border:0; border-inline:1px solid var(--line); text-align:center;
  font:inherit; font-size:16px; font-weight:800; font-variant-numeric:tabular-nums; background:var(--surface); color:var(--ink)}
.cgrp{border:0; margin:0; padding:22px 0 4px; border-bottom:1px solid var(--line)}
.cgrp:last-of-type{border-bottom:0}
.cgrp legend{padding:0; font-family:var(--ff-display); font-size:20px; font-weight:600}
.cgrp .ghint{font-size:12.5px; color:var(--mut); margin:2px 0 14px}
.citems{display:grid; grid-template-columns:repeat(2,1fr); gap:8px}
@media (max-width:760px){ .citems{grid-template-columns:1fr} }
.citem{display:flex; gap:11px; align-items:flex-start; padding:11px 13px; background:var(--bg);
  border:1px solid var(--line); border-radius:var(--r); cursor:pointer; transition:border-color .12s ease, background .12s ease}
.citem:hover{border-color:var(--ink)}
.citem.on{border-color:var(--ink); background:var(--surface2)}
.citem input{margin:2px 0 0; width:17px; height:17px; flex:none; accent-color:var(--ink)}
.citem .cn{display:block; font-weight:700; font-size:14.5px; line-height:1.3}
.citem .cd{display:block; font-size:12.5px; color:var(--mut); margin-top:2px}
.citem .cp{margin-left:auto; text-align:right; font-weight:700; font-size:14px;
  font-variant-numeric:tabular-nums; white-space:nowrap}
.citem .cp small{display:block; font-size:10.5px; font-weight:600; color:var(--mut)}
.calc-sum{position:sticky; top:16px; background:var(--ink); color:var(--band-ink); border-radius:var(--r); padding:22px 24px}
.calc-sum h3{font-family:var(--ff-body); font-size:12px; text-transform:uppercase; letter-spacing:.14em;
  font-weight:700; opacity:.8; margin-bottom:16px}
.sumrows{display:grid; gap:7px; font-size:14px; padding-bottom:14px; border-bottom:1px solid rgba(246,240,227,.28)}
.sumrow{display:flex; justify-content:space-between; gap:14px; font-variant-numeric:tabular-nums}
.sumrow span:first-child{opacity:.82}
.sumtotal{display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-top:16px}
.sumtotal b{font-family:var(--ff-display); font-size:33px; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.sumpp{font-size:14px; opacity:.85; margin-top:2px; font-variant-numeric:tabular-nums}
.alertline{display:flex; gap:9px; align-items:flex-start; font-size:12.5px; line-height:1.45;
  background:rgba(246,240,227,.14); padding:9px 11px; border-radius:var(--r); margin-top:14px}
.sumnote{font-size:12px; opacity:.78; margin:14px 0 0; line-height:1.5}
.calc-sum .btn{width:100%; margin-top:16px; background:var(--bg); color:var(--ink); border-color:var(--bg)}

/* ---------- Bestellvorschau ---------- */
.hinweis{display:flex; gap:12px; align-items:flex-start; background:var(--accent-soft);
  border-left:4px solid var(--accent); padding:14px 18px; border-radius:var(--r); font-size:14px; margin-bottom:26px}
.hinweis b{display:block; margin-bottom:2px}
.order{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden}
.ordhead{display:flex; flex-wrap:wrap; gap:12px; align-items:center; padding:16px 20px;
  border-bottom:1px solid var(--line); background:var(--bg)}
.pillon{display:inline-flex; align-items:center; gap:7px; font-size:11.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; padding:8px 14px; border-radius:20px; background:var(--surface2); color:var(--ink)}
.ordhead .slot{font-size:13.5px; color:var(--mut); margin-left:auto}
.ordbody{display:grid; grid-template-columns:212px 1fr 300px}
@media (max-width:1000px){ .ordbody{grid-template-columns:1fr} }
.ordcats{border-right:1px solid var(--line); padding:14px 0}
.ordcats button{display:block; width:100%; text-align:left; font:inherit; font-size:13.5px; line-height:1.3;
  padding:9px 18px; border:0; border-left:3px solid transparent; background:none; color:var(--mut); cursor:pointer}
.ordcats button[aria-pressed="true"]{color:var(--ink); font-weight:700; border-left-color:var(--accent); background:var(--surface2)}
.orditems{padding:18px 20px; display:grid; gap:10px; align-content:start; max-height:560px; overflow:auto}
.oitem{display:flex; gap:14px; align-items:center; padding:12px 14px; background:var(--bg);
  border:1px solid var(--line); border-radius:var(--r)}
.oitem .oth{flex:1}
.oitem b{display:block; font-size:15px}
.oitem span{display:block; font-size:13px; color:var(--mut)}
.onum{font-style:normal; font-size:11px; font-weight:700; color:var(--mut); margin-right:8px}
.oitem .op{font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap}
.addbtn{flex:none; width:34px; height:34px; border-radius:var(--r); border:1px solid var(--ink);
  background:var(--ink); color:var(--bg); font:inherit; font-size:19px; line-height:1; cursor:pointer}
.ordcart{border-left:1px solid var(--line); padding:18px 20px; background:var(--bg); display:flex; flex-direction:column; gap:12px}
.ordcart h2{font-family:var(--ff-body); font-size:12px; text-transform:uppercase; letter-spacing:.14em; color:var(--mut); font-weight:700}
.cartlist{display:grid; gap:9px; font-size:13.5px; min-height:60px}
.cartrow{display:grid; grid-template-columns:auto 1fr auto auto; gap:9px; align-items:baseline; font-variant-numeric:tabular-nums}
.cartrow em{font-style:normal; font-weight:800; color:var(--accent)}
.cartrow button{border:0; background:none; font:inherit; font-size:15px; color:var(--mut); cursor:pointer; padding:0 2px}
.cartempty{font-size:13px; color:var(--mut); margin:0}
.carttot{border-top:1px solid var(--line); padding-top:12px; display:grid; gap:5px; font-size:13.5px; font-variant-numeric:tabular-nums}
.carttot .row{display:flex; justify-content:space-between}
.carttot .big{display:flex; justify-content:space-between; font-size:19px; font-weight:800; margin-top:4px}
.ordcart .btn{width:100%}
@media (max-width:1000px){ .ordcats{border-right:0; border-bottom:1px solid var(--line); display:flex; overflow:auto; padding:10px}
  .ordcats button{width:auto; white-space:nowrap; border-left:0; border-bottom:3px solid transparent; padding:8px 12px}
  .ordcats button[aria-pressed="true"]{border-left-color:transparent; border-bottom-color:var(--accent)}
  .ordcart{border-left:0; border-top:1px solid var(--line)} }

/* ---------- Formulare ---------- */
.formbox{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:28px}
.form{display:grid; grid-template-columns:repeat(2,1fr); gap:16px}
@media (max-width:760px){ .form{grid-template-columns:1fr} .formbox{padding:22px} }
.field{display:grid; gap:6px; align-content:start}
.field.full{grid-column:1/-1}
.field label{font-size:12.5px; font-weight:700; letter-spacing:.03em; color:var(--mut)}
.field input,.field select{min-height:48px}
.field input,.field select,.field textarea{
  font:inherit; font-size:15px; line-height:1.5; padding:11px 13px; width:100%;
  border:1px solid var(--line); border-radius:var(--r); background:var(--bg); color:var(--ink)}
.field textarea{min-height:110px; resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink); outline:2px solid var(--accent); outline-offset:1px}

/* Auswahlfelder ohne Betriebssystem-Optik, mit eigenem Pfeil */
.field select{
  appearance:none; -webkit-appearance:none; cursor:pointer; accent-color:var(--accent);
  padding-right:42px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4 11 1.6' fill='none' stroke='%237a6f5b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat;
  background-position:right 15px center; background-size:12px 8px;
}
.field select:hover{border-color:var(--ink)}
.field select:focus{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4 11 1.6' fill='none' stroke='%2316130f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.field select option{background:var(--surface); color:var(--ink)}
.field select option:checked,.field select option:hover{background:var(--accent-soft); color:var(--ink)}
.field input[type="date"]{cursor:pointer}
.field input[type="date"]::-webkit-calendar-picker-indicator{cursor:pointer; opacity:.55}
.field input[type="date"]:hover::-webkit-calendar-picker-indicator{opacity:1}

/* Textmarkierung in der Hausfarbe statt Browser-Blau */
::selection{background:var(--accent-soft); color:var(--ink)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.formnote{font-size:12.5px; color:var(--mut); margin:0}
.feldhinweis{margin:6px 0 0; font-size:12px; color:var(--mut)}

/* Personenzahl: Zahlenfeld mit Plus und Minus, nach oben offen */
.stepper-feld{width:100%; min-height:48px; background:var(--bg)}
.stepper-feld input{flex:1 1 0; min-width:0; width:auto; height:auto; min-height:46px; text-align:left;
  padding:0 13px; font-size:15px; font-weight:400; background:transparent;
  border-inline:1px solid var(--line); appearance:textfield; -moz-appearance:textfield}
.stepper-feld input::-webkit-outer-spin-button,
.stepper-feld input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0}
.stepper-feld button{width:48px; min-height:46px; height:auto; font-size:20px; color:var(--accent)}
.stepper-feld:focus-within{border-color:var(--ink); outline:2px solid var(--accent); outline-offset:1px}
.msg{padding:14px 18px; border-radius:var(--r); font-size:14.5px; margin-bottom:22px; border:1px solid}
.msg.ok{background:#eaf3ea; border-color:#b7d4b7; color:#28502c}
.msg.err{background:#f8e9e5; border-color:#e0b7ab; color:#7a2f1c}

/* ---------- Mehrfachauswahl im Formular ---------- */
.checkgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
@media (max-width:620px){ .checkgrid{grid-template-columns:repeat(2,1fr)} }
.checkgrid label{display:flex; align-items:center; gap:9px; padding:10px 14px; font-size:13.5px;
  border:1px solid var(--line); border-radius:20px; background:var(--bg); cursor:pointer; color:var(--ink);
  font-weight:400; letter-spacing:0}
.checkgrid label svg{flex:none; width:18px; height:18px; color:var(--mut)}
.checkgrid label:has(input:checked) svg{color:var(--ink)}
.checkgrid label span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.checkgrid input{width:16px; height:16px; margin:0; flex:none; accent-color:var(--ink)}
.checkgrid label:hover{border-color:var(--ink)}
.checkgrid label:has(input:checked){border-color:var(--ink); background:var(--surface2); font-weight:700}

.consent label{display:flex; gap:10px; align-items:flex-start; font-size:13.5px; color:var(--mut); font-weight:400; letter-spacing:0}
.consent input{width:18px; height:18px; margin-top:2px; flex:none; accent-color:var(--ink)}
.consent a{color:var(--accent)}

/* ---------- FAQ ---------- */
.faq details{border-bottom:1px solid var(--line); padding:14px 0}
.faq summary{cursor:pointer; font-weight:700; font-size:15.5px; list-style:none;
  display:flex; justify-content:space-between; gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--accent); font-size:19px; line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{margin:10px 0 0; color:var(--mut); font-size:14.5px; max-width:66ch}

/* ---------- Karte / Anfahrt ---------- */
.karte{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:18px 18px 12px}
.karte svg{display:block; width:100%; height:auto}
.kartenhinweis{margin:10px 0 0; font-size:12px; color:var(--mut); text-align:center}

/* ---------- Fußzeile ---------- */
.foot{background:var(--ink); color:var(--band-ink); padding:46px 0 26px}
.foot .in{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:26px}
@media (max-width:900px){ .foot .in{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .foot .in{grid-template-columns:1fr} }
.foot h2{font-family:var(--ff-body); font-size:11px; text-transform:uppercase; letter-spacing:.16em;
  font-weight:700; opacity:.7; margin-bottom:10px}
.foot p,.foot li{font-size:14px; opacity:.9; margin:0 0 5px; line-height:1.55}
.foot ul{list-style:none; margin:0; padding:0}
.foot a{color:inherit}
.foot img{height:62px; width:auto; margin-bottom:14px; filter:invert(1) sepia(.35) saturate(.6) brightness(1.15)}
.footbase{border-top:1px solid rgba(246,240,227,.25); margin-top:30px; padding-top:16px;
  font-size:12.5px; opacity:.78; display:flex; gap:18px; flex-wrap:wrap}

/* ---------- Dialog ---------- */
.ovl{position:fixed; inset:0; z-index:120; background:rgba(12,10,6,.55); display:grid; place-items:center; padding:24px}
.ovl .box{background:var(--surface); border-radius:var(--r); max-width:560px; width:100%; padding:26px 28px;
  max-height:80vh; overflow:auto; box-shadow:0 30px 70px -20px rgba(0,0,0,.6)}
.ovl h2{font-size:18px; letter-spacing:.02em; margin-bottom:8px}
.ovl .box.gross{max-width:800px; padding:0; display:flex; flex-direction:column; max-height:86vh}
.ovl-inhalt{overflow:auto; padding:30px 34px 6px; text-align:left}
.ovl-inhalt .sechead{margin-inline:0; text-align:left}
.ovl-inhalt .hinweis{margin-bottom:22px}
.ovl-inhalt .h2{font-size:26px}
.ovl-fuss{display:flex; flex-wrap:wrap; gap:12px; padding:18px 34px 22px; border-top:1px solid var(--line);
  background:var(--surface)}
.ovl-fuss .btn{text-decoration:none}
@media (max-width:640px){ .ovl-inhalt{padding:22px 20px 4px} .ovl-fuss{padding:16px 20px 18px} }
.consent a.laedt{opacity:.5}
.ovl pre{background:var(--surface2); border-radius:var(--r); padding:14px 16px; font-size:12.5px; line-height:1.6;
  white-space:pre-wrap; margin:14px 0 0; font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

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

/* =========================================================
   Barrierefrei-Modus
   ========================================================= */

/* --- Schaltfläche und Bedienfeld --- */
.bf{position:fixed; right:18px; bottom:18px; z-index:9999; font-family:var(--ff-body)}
.bf-btn{display:flex; align-items:center; gap:9px; padding:11px 18px; border:2px solid var(--ink);
  border-radius:26px; background:var(--ink); color:var(--bg); font:inherit; font-size:13.5px;
  font-weight:700; cursor:pointer; box-shadow:0 8px 22px -8px rgba(0,0,0,.6)}
.bf-btn.aktiv{background:var(--accent); border-color:var(--accent); color:#fff}
.bf-panel{position:absolute; right:0; bottom:calc(100% + 10px); width:330px; padding:18px 20px;
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 22px 54px -20px rgba(0,0,0,.55)}
.bf-panel h2{font-family:var(--ff-body); font-size:11.5px; text-transform:uppercase;
  letter-spacing:.14em; color:var(--mut); margin:0 0 12px}
.bf-zeile,.bf-schalter{display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  padding:12px 0; border:0; border-top:1px solid var(--line); background:none; font:inherit; color:var(--ink)}
.bf-schalter{cursor:pointer}
.bf-name{flex:1; font-size:14px; font-weight:700; line-height:1.25}
.bf-name small{display:block; margin-top:2px; font-size:12px; font-weight:400; color:var(--mut)}
.bf-knopf{flex:none; position:relative; width:46px; height:26px; border-radius:14px;
  background:var(--surface2); border:1px solid var(--line)}
.bf-knopf::after{content:""; position:absolute; top:3px; left:3px; width:18px; height:18px;
  border-radius:50%; background:var(--ink); transition:transform .15s ease}
.bf-schalter[aria-pressed="true"] .bf-knopf{background:var(--accent); border-color:var(--accent)}
.bf-schalter[aria-pressed="true"] .bf-knopf::after{transform:translateX(20px); background:#fff}
.bf-stufen{display:flex; align-items:center; gap:6px}
.bf-schritt{width:36px; height:36px; border:1px solid var(--line); border-radius:8px;
  background:var(--bg); font:inherit; font-size:14px; font-weight:700; cursor:pointer}
.bf-schritt:hover{border-color:var(--ink)}
.bf-wert{min-width:54px; text-align:center; font-size:13px; font-variant-numeric:tabular-nums}
.bf-zuruecksetzen{width:100%; margin-top:14px; padding:11px; border:1px solid var(--line);
  border-radius:8px; background:var(--bg); font:inherit; font-size:13px; font-weight:700; cursor:pointer}
.bf-zuruecksetzen:hover{border-color:var(--ink)}
.bf-hinweis{margin:10px 0 0; font-size:11.5px; color:var(--mut)}
@media (max-width:460px){ .bf{right:12px; bottom:12px} .bf-panel{width:min(90vw,330px)} }

/* --- Leuchtring um den Mauszeiger --- */
.bf-ring{position:fixed; left:0; top:0; width:54px; height:54px; border-radius:50%;
  border:3px solid #111; background:rgba(255,212,0,.18);
  box-shadow:0 0 0 2px #ffd400, 0 0 0 5px rgba(0,0,0,.35);
  pointer-events:none; z-index:9998; will-change:transform}
@media (pointer:coarse){ .bf-ring{display:none} }

/* --- Großer Mauszeiger --- */
html.bf-cursor, html.bf-cursor *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='44'%3E%3Cpath d='M5 3 5 37 13.5 29 18.5 40.5 25 37.5 20 26.5 30 26.5Z' fill='%23000000' stroke='%23ffffff' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") 5 3, auto !important}
html.bf-cursor a, html.bf-cursor button, html.bf-cursor summary, html.bf-cursor label,
html.bf-cursor select, html.bf-cursor [role="button"]{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='44'%3E%3Cpath d='M5 3 5 37 13.5 29 18.5 40.5 25 37.5 20 26.5 30 26.5Z' fill='%23ffd400' stroke='%23000000' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") 5 3, pointer !important}

/* --- Schriftgröße (skaliert die ganze Seite wie der Browser-Zoom) --- */
html.bf-gross{zoom:1.15}
html.bf-groesser{zoom:1.3}
html.bf-riesig{zoom:1.5}

/* --- Links unterstreichen --- */
html.bf-links a:not(.btn){text-decoration:underline !important; text-underline-offset:.18em}

/* --- Bewegungen reduzieren --- */
html.bf-ruhig{scroll-behavior:auto !important}
html.bf-ruhig *{transition:none !important; animation:none !important}

/* --- Erhöhter Kontrast --- */
html.bf-kontrast{
  --bg:#ffffff; --surface:#ffffff; --surface2:#ebebeb; --ink:#000000; --mut:#1c1c1c;
  --line:#000000; --accent:#7a4a00; --accent-soft:#fff0d9; --band-ink:#ffffff;
}
html.bf-kontrast .card,html.bf-kontrast .formbox,html.bf-kontrast .order,
html.bf-kontrast .calc-main,html.bf-kontrast .packcard,html.bf-kontrast .hero .box{border-width:2px}
html.bf-kontrast .btn{border-width:2px}
html.bf-kontrast .btn.ghost{color:#000; border-color:#000; background:#fff}
html.bf-kontrast .btn.ghost:hover{background:#000; color:#fff}
html.bf-kontrast .ph figcaption{background:#000; color:#fff; border:1px solid #fff}
html.bf-kontrast .hero .ph::before{background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.2) 45%,rgba(0,0,0,.55))}
html.bf-kontrast .tags li,html.bf-kontrast .mcats button,html.bf-kontrast .plattform,
html.bf-kontrast .checkgrid label{border-color:#000; color:#000}
html.bf-kontrast .mrow .mp,html.bf-kontrast .steps .when,html.bf-kontrast .eyebrow{color:#7a4a00}
html.bf-kontrast .field input,html.bf-kontrast .field select,html.bf-kontrast .field textarea{
  border-width:2px; background:#fff}
html.bf-kontrast .field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.6 6 6.4 11 1.6' fill='none' stroke='%23000000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
html.bf-kontrast .field select option:checked{background:#000; color:#fff}
html.bf-kontrast ::selection{background:#000; color:#fff}
html.bf-kontrast .sumnote,html.bf-kontrast .sumpp,html.bf-kontrast .calc-sum h3,
html.bf-kontrast .foot p,html.bf-kontrast .foot li,html.bf-kontrast .footbase{opacity:1}
html.bf-kontrast :focus-visible{outline:3px solid #000 !important; outline-offset:3px;
  box-shadow:0 0 0 6px #ffd400}
html.bf-kontrast .topbar a,html.bf-kontrast .foot a{text-decoration:underline}

/* ---------- Druck (Speisekarte) ---------- */
@media print{
  .topbar,.nav,.foot,.mcats,.btnrow,.gal,.hinweis,.bf,.bf-ring{display:none !important}
  body{background:#fff; font-size:11pt}
  .sec{padding:0}
  .mgroup{break-inside:avoid}
  .mrow{border-bottom:1px solid #ccc}
  .mrow .mp{color:#000}
}