/* =====================================================================
   L'AVA – Elegant (hell)
   Papierweiß · Tinte · Silber. Rundbogen als Leitmotiv, sanfte Übergänge.
   ===================================================================== */
@font-face{font-family:"Montserrat";src:url("/fonts/montserrat-var.woff2") format("woff2");font-weight:200 700;font-display:swap;}
@font-face{font-family:"Cormorant";src:url("/fonts/cormorant.woff2") format("woff2");font-weight:500 700;font-display:swap;}
@font-face{font-family:"Cormorant";src:url("/fonts/cormorant-italic.woff2") format("woff2");font-weight:500 700;font-style:italic;font-display:swap;}

:root{
  --papier:#f6f4f0;
  --papier-2:#eeebe5;
  --weiss:#fdfcfa;
  --tinte:#121212;
  --tinte-2:#2a2a2a;
  --grau:#6b6863;
  --hell-grau:#a7a39c;
  --linie:#dcd7ce;
  --silber:linear-gradient(115deg, #8a8a8a, #d6d6d6 35%, #ffffff 48%, #a3a3a3 62%, #cfcfcf);
  --serif:"Cormorant", Georgia, "Times New Roman", serif;
  --sans:"Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --rand:clamp(18px, 4vw, 56px);
  --breite:1240px;
  --kopf:86px;
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.65,0,.35,1);
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--kopf) + 10px);}
body{margin:0;background:var(--papier);color:var(--tinte);font-family:var(--sans);font-size:16px;line-height:1.7;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;}
img,svg{display:block;max-width:100%;}
p{margin:0 0 1em;}
::selection{background:var(--tinte);color:var(--papier);}
:focus-visible{outline:1.5px solid var(--tinte);outline-offset:4px;border-radius:4px;}
.huelle{max-width:var(--breite);margin:0 auto;padding:0 var(--rand);}
.nur-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.springen{position:fixed;left:12px;top:-60px;z-index:300;background:var(--tinte);color:var(--papier);padding:10px 16px;border-radius:999px;transition:top .2s;}
.springen:focus{top:12px;}

/* ---------- Typografie ---------- */
.kicker{display:inline-flex;align-items:center;gap:14px;font-size:11px;font-weight:500;letter-spacing:.36em;text-transform:uppercase;color:var(--grau);}
.kicker::before,.kicker::after{content:"";width:26px;height:1px;background:currentColor;opacity:.6;}
.kicker--links::after{display:none;}
.titel{font-family:var(--serif);font-weight:500;font-size:clamp(42px, 6vw, 84px);line-height:1.02;letter-spacing:-.015em;margin:18px 0 0;text-wrap:balance;}
.titel em{font-style:italic;}
.lead{font-size:clamp(16px, 1.3vw, 18px);color:var(--grau);max-width:56ch;}
.mitte{text-align:center;}
.mitte .lead{margin-left:auto;margin-right:auto;}

/* ---------- Knöpfe ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:0 30px;border:1px solid var(--tinte);border-radius:999px;font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;overflow:hidden;isolation:isolate;transition:color .6s var(--ease);white-space:nowrap;}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--tinte);transform:translateY(101%);border-radius:inherit;transition:transform .6s var(--ease);}
.btn:hover{color:var(--papier);}
.btn:hover::before{transform:none;}
.btn svg{width:17px;height:17px;transition:transform .6s var(--ease);}
.btn:hover svg{transform:translateX(4px);}
.btn--voll{background:var(--tinte);color:var(--papier);}
.btn--voll::before{background:var(--papier);}
.btn--voll:hover{color:var(--tinte);}
.textlink{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;padding-bottom:6px;background:linear-gradient(currentColor, currentColor) left bottom/100% 1px no-repeat;transition:background-size .6s var(--ease);}
.textlink:hover{background-size:0 1px;background-position:right bottom;}
.textlink svg{width:16px;height:16px;}

/* ---------- Kopfzeile ---------- */
.kopf{position:fixed;inset:0 0 auto;z-index:60;height:var(--kopf);display:flex;align-items:center;transition:background .5s, border-color .5s, height .5s var(--ease);border-bottom:1px solid transparent;}
.kopf.fest{background:rgba(246,244,240,.86);-webkit-backdrop-filter:saturate(140%) blur(14px);backdrop-filter:saturate(140%) blur(14px);border-bottom-color:var(--linie);height:72px;}
.kopf .huelle{width:100%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;}
.kopf nav{display:flex;gap:clamp(18px, 2.6vw, 36px);}
.kopf nav a{font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;padding:8px 0;background:linear-gradient(currentColor, currentColor) left bottom/0 1px no-repeat;transition:background-size .5s var(--ease);}
.kopf nav a:hover,.kopf nav a[aria-current="page"]{background-size:100% 1px;}
.marke{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--tinte);}
.marke svg{width:38px;height:auto;}
.marke span{font-family:var(--serif);font-size:20px;font-weight:600;letter-spacing:.32em;line-height:1;margin-right:-.32em;}
.kopf__rechts{display:flex;justify-content:flex-end;align-items:center;gap:16px;}
.kopf__rechts .btn{min-height:44px;padding:0 22px;font-size:11px;}
.menue-knopf{display:none;width:44px;height:44px;position:relative;}
.menue-knopf span{position:absolute;left:10px;right:10px;height:1.5px;background:var(--tinte);transition:transform .5s var(--ease), top .5s var(--ease);}
.menue-knopf span:nth-child(1){top:17px;} .menue-knopf span:nth-child(2){top:26px;}
.menue-offen .menue-knopf span:nth-child(1){top:21.5px;transform:rotate(45deg);}
.menue-offen .menue-knopf span:nth-child(2){top:21.5px;transform:rotate(-45deg);}
@media (max-width: 900px){
  .kopf .huelle{grid-template-columns:auto 1fr auto;}
  .kopf nav,.kopf__rechts .btn{display:none;}
  .marke{flex-direction:row;gap:10px;}
  .marke span{font-size:18px;}
  .menue-knopf{display:block;}
}
.menue{position:fixed;inset:0;z-index:55;background:var(--papier);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;clip-path:inset(0 0 100% 0);transition:clip-path .8s var(--ease-io);visibility:hidden;}
.menue-offen .menue{clip-path:inset(0 0 0 0);visibility:visible;}
.menue a{font-family:var(--serif);font-size:clamp(38px, 10vw, 60px);line-height:1.2;opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease), transform .6s var(--ease);}
.menue-offen .menue a{opacity:1;transform:none;}
.menue-offen .menue a:nth-child(2){transition-delay:.06s;} .menue-offen .menue a:nth-child(3){transition-delay:.12s;} .menue-offen .menue a:nth-child(4){transition-delay:.18s;} .menue-offen .menue a:nth-child(5){transition-delay:.24s;}
.menue p{margin-top:30px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--grau);}

/* ---------- Hero mit Rundbogen ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:grid;place-items:center;padding:calc(var(--kopf) + 20px) var(--rand) 90px;text-align:center;overflow:hidden;}
.hero__bogen{position:absolute;left:50%;top:calc(var(--kopf) + 10px);bottom:70px;aspect-ratio:.84;translate:-50% 0;pointer-events:none;max-width:92vw;}
.hero__bogen svg{width:100%;height:100%;overflow:visible;}
.hero__bogen path{fill:none;stroke:var(--tinte);stroke-width:1;stroke-dasharray:1 1;stroke-dashoffset:1;}
.hero__bogen.los path{animation:zeichnen 2.4s .2s var(--ease-io) forwards;}
.hero__bogen.los path + path{stroke:var(--linie);animation-delay:.5s;}
.hero__bogen path + path{stroke:var(--linie);}
@keyframes zeichnen{to{stroke-dashoffset:0;}}
.hero__inhalt{position:relative;max-width:820px;}
.hero__stier{width:64px;margin:0 auto 22px;color:var(--tinte);}
.hero__titel{font-family:var(--serif);font-weight:500;font-size:clamp(54px, 8.6vw, 128px);line-height:.98;letter-spacing:-.02em;margin:22px 0 26px;}
.hero__titel em{font-style:italic;}
.hero__text{color:var(--grau);max-width:46ch;margin:0 auto 34px;font-size:clamp(15px, 1.3vw, 17px);}
.hero .knoepfe{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.hero__ecken{position:absolute;left:0;right:0;bottom:28px;display:flex;justify-content:space-between;padding:0 var(--rand);font-size:12px;letter-spacing:.14em;color:var(--grau);}
.hero__ecken span{display:inline-flex;align-items:center;gap:10px;}
.status i{width:7px;height:7px;border-radius:50%;background:var(--hell-grau);display:inline-block;}
.status.offen i{background:#2f8a4f;box-shadow:0 0 0 0 rgba(47,138,79,.5);animation:puls 2.4s infinite;}
@keyframes puls{70%{box-shadow:0 0 0 8px rgba(47,138,79,0);}100%{box-shadow:0 0 0 0 rgba(47,138,79,0);}}
@media (max-width: 700px){ .hero__ecken{flex-direction:column;align-items:center;gap:6px;bottom:20px;} .hero__bogen{aspect-ratio:.62;} }

/* Wörter weich einblenden (Hero) */
.wort{display:inline-block;opacity:0;filter:blur(10px);transform:translateY(.25em);animation:wort-rein 1.2s var(--ease) forwards;}
@keyframes wort-rein{to{opacity:1;filter:blur(0);transform:none;}}
.weich{opacity:0;filter:blur(8px);transform:translateY(14px);animation:wort-rein 1.2s var(--ease) forwards;}

/* ---------- Abschnitte & Übergänge ---------- */
.abschnitt{padding:clamp(100px, 13vw, 180px) 0;position:relative;}
.abschnitt--papier2{background:var(--papier-2);}
.auf{opacity:0;filter:blur(8px);transform:translateY(26px);transition:opacity 1.2s var(--ease), filter 1.2s var(--ease), transform 1.2s var(--ease);}
.auf.da{opacity:1;filter:none;transform:none;}
.v1{transition-delay:.1s!important;} .v2{transition-delay:.2s!important;} .v3{transition-delay:.3s!important;} .v4{transition-delay:.4s!important;}
.trenner{height:1px;background:var(--linie);transform:scaleX(0);transition:transform 1.6s var(--ease-io);}
.trenner.da{transform:none;}
.zier{display:flex;align-items:center;justify-content:center;gap:16px;color:var(--hell-grau);margin:0 auto 26px;}
.zier::before,.zier::after{content:"";width:60px;height:1px;background:currentColor;}
.zier svg{width:18px;height:18px;}

/* ---------- Willkommen ---------- */
.fakten{display:grid;grid-template-columns:repeat(3, 1fr);margin-top:clamp(50px, 7vw, 90px);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);}
.fakt{padding:clamp(28px, 3.4vw, 46px) 16px;text-align:center;}
.fakt + .fakt{border-left:1px solid var(--linie);}
.fakt b{display:block;font-family:var(--serif);font-weight:500;font-size:clamp(48px, 6vw, 84px);line-height:1;}
.fakt b small{font-size:.4em;font-style:italic;margin-left:4px;}
.fakt span{display:block;margin-top:12px;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--grau);}
@media (max-width: 640px){ .fakten{grid-template-columns:1fr;} .fakt + .fakt{border-left:0;border-top:1px solid var(--linie);} }

/* ---------- Spezialitäten in Bögen ---------- */
.boegen{display:grid;grid-template-columns:repeat(4, 1fr);gap:clamp(16px, 2vw, 28px);margin-top:clamp(50px, 6vw, 80px);}
.bogen{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(50px, 6vw, 80px) 24px 34px;border:1px solid var(--linie);border-radius:999px 999px 6px 6px;background:var(--weiss);overflow:hidden;isolation:isolate;transition:color .7s var(--ease), border-color .7s, transform .7s var(--ease);min-height:420px;}
.bogen::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--tinte);clip-path:circle(0 at 50% 100%);transition:clip-path .9s var(--ease-io);}
.bogen:hover{color:var(--papier);border-color:var(--tinte);transform:translateY(-6px);}
.bogen:hover::before{clip-path:circle(150% at 50% 100%);}
.bogen .ikon{width:46px;height:46px;margin-bottom:28px;}
.bogen h3{font-family:var(--serif);font-weight:500;font-size:clamp(26px, 2.2vw, 32px);line-height:1.1;margin:0 0 12px;}
.bogen p{font-size:14px;color:var(--grau);margin:0 0 auto;transition:color .7s;}
.bogen:hover p{color:rgba(246,244,240,.72);}
.bogen .preis{margin-top:24px;font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;padding-top:16px;border-top:1px solid currentColor;opacity:.75;}
@media (max-width: 1000px){ .boegen{grid-template-columns:1fr 1fr;} }
@media (max-width: 560px){ .boegen{grid-template-columns:1fr;} .bogen{min-height:0;} }

/* ---------- Karte mit Reitern ---------- */
.reiter{position:relative;display:flex;justify-content:center;gap:clamp(14px, 2.4vw, 34px);flex-wrap:wrap;margin:clamp(40px, 5vw, 64px) 0 clamp(36px, 4vw, 54px);border-bottom:1px solid var(--linie);}
.reiter button{font-size:12px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--grau);padding:14px 2px;transition:color .4s;}
.reiter button[aria-selected="true"],.reiter button:hover{color:var(--tinte);}
.reiter__strich{position:absolute;bottom:-1px;left:0;height:2px;background:var(--tinte);transition:transform .6s var(--ease), width .6s var(--ease);}
.karte-liste{list-style:none;margin:0 auto;padding:0;max-width:1000px;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(30px, 6vw, 90px);min-height:300px;}
.karte-liste li{padding:20px 0;border-bottom:1px solid var(--linie);opacity:0;transform:translateY(12px);animation:liste-rein .8s var(--ease) forwards;}
@keyframes liste-rein{to{opacity:1;transform:none;}}
.kl__kopf{display:flex;align-items:baseline;gap:12px;}
.kl__name{font-family:var(--serif);font-weight:500;font-size:clamp(21px, 1.8vw, 25px);line-height:1.2;}
.kl__punkte{flex:1;min-width:20px;border-bottom:1px dotted var(--hell-grau);transform:translateY(-5px);}
.kl__preis{font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums;}
.kl__info{margin:4px 0 0;font-size:13.5px;color:var(--grau);}
.karte-hinweis{text-align:center;color:var(--grau);font-size:14px;font-style:italic;font-family:var(--serif);font-size:18px;margin:-10px auto 26px;max-width:60ch;}
@media (max-width: 760px){ .karte-liste{grid-template-columns:1fr;} .reiter{justify-content:flex-start;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;} .reiter::-webkit-scrollbar{display:none;} .reiter button{flex:none;} }

/* ---------- Zitat: Wörter färben sich beim Scrollen ---------- */
.zitat{height:220vh;position:relative;}
.zitat__klebt{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;}
.zitat p{font-family:var(--serif);font-weight:500;font-size:clamp(32px, 5vw, 72px);line-height:1.15;letter-spacing:-.01em;max-width:20ch;margin:0 auto;}
.zitat .w{color:#cdc8bf;transition:color .4s linear;}
.zitat .w.an{color:var(--tinte);}
.zitat em{font-style:italic;}

/* ---------- Anlässe ---------- */
.anlaesse{display:grid;grid-template-columns:repeat(4, 1fr);gap:0;margin-top:clamp(50px, 6vw, 80px);border-top:1px solid var(--linie);}
.anlass{padding:36px clamp(16px, 2vw, 30px) 0;text-align:center;}
.anlass + .anlass{border-left:1px solid var(--linie);}
.anlass .ikon{width:34px;height:34px;margin:0 auto 20px;}
.anlass h3{font-family:var(--serif);font-weight:500;font-size:clamp(23px, 2vw, 28px);margin:0 0 10px;}
.anlass p{font-size:14px;color:var(--grau);margin:0;}
@media (max-width: 900px){ .anlaesse{grid-template-columns:1fr 1fr;row-gap:40px;} .anlass:nth-child(3){border-left:0;} }
@media (max-width: 520px){ .anlaesse{grid-template-columns:1fr;} .anlass + .anlass{border-left:0;border-top:1px solid var(--linie);padding-bottom:10px;} }

/* ---------- Besuch ---------- */
.besuch{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(30px, 6vw, 90px);align-items:start;margin-top:clamp(50px, 6vw, 80px);}
.besuch__linie{width:1px;align-self:stretch;background:var(--linie);}
.besuch h3{font-size:11px;font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:var(--grau);margin:0 0 22px;}
.zeiten{width:100%;border-collapse:collapse;}
.zeiten th,.zeiten td{padding:16px 0;border-bottom:1px solid var(--linie);font-weight:400;text-align:left;vertical-align:top;font-size:16px;}
.zeiten td{text-align:right;font-variant-numeric:tabular-nums;}
.zeiten td span{display:block;}
.zeiten tr.heute th,.zeiten tr.heute td{font-weight:600;}
.zeiten tr.heute th::after{content:"heute";margin-left:10px;font-family:var(--serif);font-style:italic;font-weight:500;font-size:15px;color:var(--grau);}
.adresse{font-family:var(--serif);font-weight:500;font-size:clamp(30px, 3vw, 42px);line-height:1.15;margin:0 0 24px;}
.kontakt{list-style:none;margin:0 0 28px;padding:0;}
.kontakt li{padding:10px 0;border-bottom:1px solid var(--linie);}
.kontakt a{transition:opacity .3s;}
.kontakt a:hover{opacity:.6;}
@media (max-width: 820px){ .besuch{grid-template-columns:1fr;} .besuch__linie{display:none;} }

/* ---------- Reservieren ---------- */
.res{position:relative;text-align:center;padding:clamp(120px, 16vw, 220px) 0;overflow:hidden;}
.res__bogen{position:absolute;left:50%;top:50%;width:min(560px, 86vw);aspect-ratio:.8;translate:-50% -50%;border:1px solid var(--linie);border-radius:999px 999px 0 0;border-bottom:0;pointer-events:none;}
.res__bogen::after{content:"";position:absolute;inset:16px 16px 0;border:1px solid var(--linie);border-radius:999px 999px 0 0;border-bottom:0;}
.res .titel{position:relative;font-size:clamp(46px, 7vw, 100px);}
.res p{position:relative;color:var(--grau);margin:20px auto 36px;max-width:42ch;}
.res .knoepfe{position:relative;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}

/* ---------- Laufband ---------- */
.band{overflow:hidden;border-block:1px solid var(--linie);padding:26px 0;background:var(--papier-2);}
.band__spur{display:flex;width:max-content;animation:band 46s linear infinite;}
.band span{font-family:var(--serif);font-style:italic;font-weight:500;font-size:clamp(28px, 3.4vw, 46px);padding:0 28px;white-space:nowrap;color:var(--tinte-2);}
.band i{align-self:center;width:6px;height:6px;border:1px solid var(--hell-grau);transform:rotate(45deg);flex:none;}
@keyframes band{to{transform:translateX(-50%);}}

/* ---------- Fuß ---------- */
.fuss{border-top:1px solid var(--linie);padding:clamp(60px, 8vw, 100px) 0 calc(34px + env(safe-area-inset-bottom));text-align:center;}
.fuss__logo{width:150px;margin:0 auto 34px;}
.fuss__spalten{display:grid;grid-template-columns:repeat(3, 1fr);gap:30px;max-width:900px;margin:0 auto;}
.fuss h4{font-size:11px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--grau);margin:0 0 14px;}
.fuss p,.fuss li{font-size:14.5px;margin:0 0 6px;}
.fuss ul{list-style:none;margin:0;padding:0;}
.fuss a:hover{opacity:.6;}
.fuss__unten{display:flex;justify-content:center;gap:24px;flex-wrap:wrap;margin-top:56px;padding-top:24px;border-top:1px solid var(--linie);font-size:12.5px;color:var(--grau);}
@media (max-width: 700px){ .fuss__spalten{grid-template-columns:1fr;} }

/* ---------- Aktionsleiste (Handy) ---------- */
.aktion{position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:50;display:none;grid-template-columns:1fr 1.5fr;gap:8px;transform:translateY(150%);transition:transform .7s var(--ease);}
.aktion.zeigen{transform:none;}
.aktion a{height:52px;border-radius:999px;display:grid;place-items:center;font-size:11.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;}
.aktion a:first-child{background:rgba(253,252,250,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--linie);}
.aktion a:last-child{background:var(--tinte);color:var(--papier);box-shadow:0 14px 30px -14px rgba(0,0,0,.5);}
@media (max-width: 760px){ .aktion{display:grid;} .fuss{padding-bottom:calc(100px + env(safe-area-inset-bottom));} }

/* ---------- Unterseiten ---------- */
.seitenkopf{padding:calc(var(--kopf) + clamp(60px, 9vw, 120px)) 0 clamp(36px, 5vw, 60px);text-align:center;}
.seitenkopf h1{font-family:var(--serif);font-weight:500;font-size:clamp(56px, 9vw, 130px);line-height:.95;margin:18px 0 0;}
.seitenkopf h1 em{font-style:italic;}
.seitenkopf p{color:var(--grau);max-width:52ch;margin:22px auto 0;}
.werkzeug{position:sticky;top:72px;z-index:40;background:rgba(246,244,240,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-block:1px solid var(--linie);}
.werkzeug__oben{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:12px 0 10px;}
.umschalter{display:flex;border:1px solid var(--linie);border-radius:999px;padding:4px;background:var(--weiss);}
.umschalter button{min-height:42px;padding:0 22px;border-radius:999px;font-size:11.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--grau);transition:background .4s var(--ease), color .4s;}
.umschalter button[aria-pressed="true"]{background:var(--tinte);color:var(--papier);}
.suche{flex:1;min-width:220px;position:relative;display:block;}
.suche svg{position:absolute;left:18px;top:50%;width:17px;height:17px;transform:translateY(-50%);color:var(--grau);pointer-events:none;}
.suche input{width:100%;height:52px;border:1px solid var(--linie);border-radius:999px;background:var(--weiss);color:var(--tinte);font:inherit;font-size:16px;padding:0 46px 0 48px;}
.suche input:focus{outline:none;border-color:var(--tinte);}
.suche button{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:50%;display:none;place-items:center;color:var(--grau);}
.suche button svg{position:static;transform:none;}
.suche.hat-text button{display:grid;}
.chips{display:flex;gap:6px;overflow-x:auto;padding:0 0 12px;scrollbar-width:none;}
.chips::-webkit-scrollbar{display:none;}
.chips a{flex:none;min-height:36px;display:inline-flex;align-items:center;padding:0 15px;border-radius:999px;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--grau);transition:color .3s, background .3s;}
.chips a:hover{color:var(--tinte);}
.chips a.aktiv{background:var(--tinte);color:var(--papier);}
.karte{padding:clamp(40px, 6vw, 80px) 0 20px;}
.kategorie{padding:clamp(40px, 5vw, 70px) 0;border-top:1px solid var(--linie);scroll-margin-top:200px;}
.kategorie__kopf{display:flex;align-items:baseline;justify-content:center;gap:16px;flex-wrap:wrap;text-align:center;margin-bottom:10px;}
.kategorie h2{font-family:var(--serif);font-weight:500;font-size:clamp(36px, 4.4vw, 58px);margin:0;}
.kategorie__kopf small{width:100%;font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--grau);}
.kategorie .hinweis{text-align:center;color:var(--grau);font-family:var(--serif);font-style:italic;font-size:17px;max-width:62ch;margin:0 auto 6px;}
.gerichte{list-style:none;margin:20px auto 0;padding:0;max-width:1000px;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(30px, 6vw, 90px);}
.zwischentitel{grid-column:1 / -1;text-align:center;font-size:11px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;color:var(--grau);padding:26px 0 4px;}
.gericht{padding:18px 0;border-bottom:1px solid var(--linie);}
.gericht__kopf{display:flex;align-items:baseline;gap:10px;}
.gericht__name{font-family:var(--serif);font-weight:500;font-size:clamp(20px, 1.7vw, 24px);line-height:1.2;}
.gericht__nr{font-family:var(--sans);font-size:11px;color:var(--hell-grau);margin-right:10px;}
.gericht__punkte{flex:1;min-width:16px;border-bottom:1px dotted var(--hell-grau);transform:translateY(-5px);}
.gericht__preis{font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums;}
.gericht__info{color:var(--grau);font-size:13.5px;margin-top:4px;}
.marken{display:inline-flex;gap:6px;margin-left:8px;vertical-align:3px;}
.allergene,.veg{font-family:var(--sans);font-size:10px;letter-spacing:.06em;border:1px solid var(--linie);border-radius:4px;padding:1px 5px;color:var(--grau);}
.veg{color:#2f7a45;border-color:rgba(47,122,69,.4);}
.varianten{list-style:none;margin:8px 0 0;padding:0;}
.varianten li{display:flex;align-items:baseline;gap:10px;font-size:15px;padding:3px 0;}
mark{background:var(--tinte);color:var(--papier);padding:0 3px;border-radius:2px;}
.keine-treffer{text-align:center;padding:80px 0;color:var(--grau);}
.keine-treffer b{display:block;font-family:var(--serif);font-weight:500;font-size:40px;color:var(--tinte);margin-bottom:8px;}
.fussnote{margin:20px auto 60px;max-width:80ch;text-align:center;font-size:13.5px;color:var(--grau);padding-top:24px;border-top:1px solid var(--linie);}
.fussnote strong{color:var(--tinte);}
.rechtstext{max-width:760px;margin:0 auto;padding:0 var(--rand) 60px;}
.rechtstext h2{font-family:var(--serif);font-weight:500;font-size:30px;margin:44px 0 10px;}
.rechtstext p{color:var(--grau);}
.rechtstext strong{color:var(--tinte);}
.rechtstext a{border-bottom:1px solid currentColor;}
@media (max-width: 760px){ .gerichte{grid-template-columns:1fr;} .umschalter{width:100%;} .umschalter button{flex:1;} }

/* ---------- Seitenwechsel ---------- */
@view-transition{navigation:auto;}
::view-transition-old(root){animation:.5s var(--ease-io) both raus;}
::view-transition-new(root){animation:.7s var(--ease-io) both rein;}
@keyframes raus{to{opacity:0;filter:blur(6px);}}
@keyframes rein{from{opacity:0;transform:translateY(24px);filter:blur(6px);}}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
  .auf,.wort,.weich{opacity:1;filter:none;transform:none;}
  .trenner{transform:none;}
  .hero__bogen path{stroke-dashoffset:0;}
  .zitat{height:auto;} .zitat__klebt{position:static;height:auto;padding:120px 0;} .zitat .w{color:var(--tinte);}
  .band__spur{animation:none;}
  @view-transition{navigation:none;}
}

/* Handy-Feinschliff */
@media (max-width: 560px){
  .kicker{letter-spacing:.26em;font-size:10.5px;}
  .hero .kicker::before,.hero .kicker::after{display:none;}
  .hero__bogen{bottom:96px;top:calc(var(--kopf) + 4px);}
  .hero{padding-bottom:110px;}
  .hero__titel{margin:16px 0 20px;}
}

/* =====================================================================
   Version 2: Wand-Struktur (schwarz mit Silber) & Video-Vorspann
   ===================================================================== */
/* Silberner Lichtschimmer, der langsam über die Wand wandert */
@keyframes schimmer{0%{transform:translateX(-60%) rotate(8deg);}100%{transform:translateX(60%) rotate(8deg);}}
@keyframes wand-atmen{0%,100%{background-position:50% 40%;}50%{background-position:50% 60%;}}

.wand{position:relative;isolation:isolate;color:#f4f2ee;background:#0d0d0d url("/bilder/wand.jpg") center/cover;animation:wand-atmen 40s ease-in-out infinite;}
@media (max-width: 760px){ .wand{background-image:url("/bilder/wand-klein.jpg");} }
.wand::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(70% 60% at 50% 50%, rgba(10,10,10,.62), rgba(10,10,10,.4) 70%, rgba(10,10,10,.7));}
.wand::after{content:"";position:absolute;inset:-20% -40%;z-index:-1;pointer-events:none;mix-blend-mode:screen;opacity:.55;
  background:linear-gradient(100deg, transparent 38%, rgba(255,255,255,.08) 45%, rgba(255,255,255,.22) 50%, rgba(255,255,255,.08) 55%, transparent 62%);
  animation:schimmer 11s ease-in-out infinite alternate;}
.wand .kicker{color:rgba(244,242,238,.7);}
.wand .titel{color:#f4f2ee;}
.wand .titel em{background:linear-gradient(110deg, #9a9a9a, #ffffff 40%, #b9b9b9 60%, #f0f0f0);-webkit-background-clip:text;background-clip:text;color:transparent;}
.wand p{color:rgba(244,242,238,.75)!important;}
.res.wand .res__bogen,.res.wand .res__bogen::after{border-color:rgba(244,242,238,.25);}



/* =====================================================================
   Version 3: Weiß · Schwarz · Silber, Video im Bogen, Logo-Intro, Wand bei Klick
   ===================================================================== */
:root{--papier:#ffffff;--papier-2:#f4f4f4;--weiss:#ffffff;--linie:#e2e2e2;--grau:#6a6a6a;--hell-grau:#a9a9a9;--tinte:#0f0f0f;}
.zitat .w{color:#d2d2d2;}
.bogen{background:#fff;}
.werkzeug{background:rgba(255,255,255,.94);}
.kopf.fest{background:rgba(255,255,255,.88);}
.menue{background:#fff;}
/* Silberner Akzent bei kursiven Wörtern */
.titel em{background:linear-gradient(110deg, #1a1a1a 0%, #5e5e5e 35%, #9a9a9a 50%, #3a3a3a 70%, #1a1a1a 100%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.05em;}

/* ---------- Hero: Video im Bogenfenster ---------- */
.hero__bogen path + path{display:none;}
.hero__fenster{position:absolute;z-index:1;border-radius:999px 999px 0 0;overflow:hidden;background:#0d0d0d;display:flex;align-items:flex-end;justify-content:center;text-align:center;color:#fff;box-shadow:0 40px 80px -50px rgba(0,0,0,.6);}
.hero__fenster video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 3s var(--ease);}
.hero__fenster.laeuft video{transform:scale(1);}
.hero__fenster::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.25) 35%, rgba(0,0,0,.7) 75%, rgba(0,0,0,.88) 100%);}
.hero__fenster .hero__inhalt{position:relative;z-index:1;padding:0 clamp(18px, 3vw, 40px) clamp(26px, 4vh, 44px);max-width:100%;}
.hero__fenster .kicker{color:rgba(255,255,255,.75);}
.hero__fenster .hero__titel{font-size:clamp(40px, 4.6vw, 74px);margin:14px 0 16px;color:#fff;}
.hero__fenster .hero__titel em{background:linear-gradient(110deg, #cfcfcf, #ffffff 40%, #b5b5b5 60%, #f2f2f2);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em;}
.hero__fenster .hero__text{color:rgba(255,255,255,.78);margin-bottom:24px;font-size:14.5px;}
.hero__fenster .knoepfe{gap:10px;}
.hero__fenster .btn{min-height:50px;padding:0 24px;}
.hero{min-height:max(720px, 100svh);}
@media (max-width: 560px){
  .hero__fenster .hero__titel{font-size:clamp(34px, 10vw, 44px);}
  .hero__fenster .hero__text{display:none;}
  .hero__fenster .knoepfe{flex-direction:column;width:100%;}
  .hero__fenster .btn{width:100%;}
}

/* ---------- Logo-Intro auf der Wand ---------- */
.intro{display:none;}
html.intro-laeuft{overflow:hidden;}
html.intro-laeuft .intro{display:block;position:fixed;inset:0;z-index:600;}
.intro__vorhang{position:absolute;left:0;right:0;height:50.5%;overflow:hidden;transition:transform 1.2s var(--ease-io);}
.intro__vorhang .wand{position:absolute;left:0;right:0;height:100vh;height:100lvh;animation:none;}
.intro__vorhang--oben .wand{top:0;}
.intro__vorhang--unten .wand{bottom:0;}
.intro__vorhang--oben{top:0;background-position:50% 0;}
.intro__vorhang--unten{bottom:0;background-position:50% 100%;}
.intro__logo{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px, 2.4vh, 26px);transition:opacity .6s, transform 1.2s var(--ease-io);z-index:2;}
.intro__logo svg{width:clamp(200px, 34vw, 440px);height:auto;filter:drop-shadow(0 10px 40px rgba(0,0,0,.6));}
.intro__logo .wisch{transform-origin:left;transform:scaleX(0);animation:wischen 1.4s .2s var(--ease-io) forwards;}
@keyframes wischen{to{transform:scaleX(1);}}
.intro__logo span{font-family:var(--serif);font-weight:600;font-size:clamp(34px, 5vw, 64px);letter-spacing:.42em;margin-right:-.42em;background:linear-gradient(110deg, #8d8d8d, #ffffff 45%, #a9a9a9 60%, #e6e6e6);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:0;animation:wort-rein 1.2s .9s var(--ease) forwards;}
.intro.auf .intro__vorhang--oben{transform:translateY(-101%);}
.intro.auf .intro__vorhang--unten{transform:translateY(101%);}
.intro.auf .intro__logo{opacity:0;transform:scale(1.12);}
html.intro-laeuft .hero *{animation-play-state:paused!important;}

/* ---------- Wand-Effekt bei jedem Klick ---------- */
.wand-klick{position:fixed;inset:0;z-index:700;pointer-events:none;opacity:0;clip-path:circle(0 at var(--kx, 50%) var(--ky, 50%));animation:none;}
.wand-klick.an{animation:wand-kreis .9s var(--ease) forwards;}
@keyframes wand-kreis{
  0%{opacity:1;clip-path:circle(0 at var(--kx) var(--ky));}
  45%{opacity:1;clip-path:circle(var(--kr, 140px) at var(--kx) var(--ky));}
  100%{opacity:0;clip-path:circle(calc(var(--kr, 140px) * 1.25) at var(--kx) var(--ky));}
}
@media (prefers-reduced-motion: reduce){ .wand-klick,.intro{display:none!important;} }
/* Silber auf einzelne Wörter (Verlauf auf dem Elternteil funktioniert nicht mit animierten Wörtern) */
.hero__fenster .hero__titel em{background:none;color:#fff;}
.hero__fenster .hero__titel em .wort{background:linear-gradient(110deg, #c9c9c9, #ffffff 40%, #b0b0b0 60%, #f2f2f2);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.04em;}

/* =====================================================================
   Version 4: Video vollflächig auf der Startseite
   ===================================================================== */
.hero--video{color:#fff;background:#000;isolation:isolate;}
.hero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transform:scale(1.06);transition:transform 4s var(--ease);}
.hero--video.laeuft .hero__video{transform:scale(1);}
.hero--video::before{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.25) 28%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.8) 100%),
  radial-gradient(80% 60% at 50% 55%, rgba(0,0,0,.35), transparent 70%);}
.hero--video .hero__inhalt{max-width:900px;}
.hero--video .kicker{color:rgba(255,255,255,.78);}
.hero--video .hero__titel{color:#fff;}
.hero--video .hero__titel em .wort{background:linear-gradient(110deg, #c9c9c9, #ffffff 40%, #b0b0b0 60%, #f2f2f2);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.04em;}
.hero--video .hero__text{color:rgba(255,255,255,.8);}
.hero--video .hero__ecken{color:rgba(255,255,255,.75);}
.hero--video .status i{background:rgba(255,255,255,.55);}
.hero--video .status.offen i{background:#4cc274;}
/* Kopfzeile über dem Video: weiß, nach dem Scrollen: weiße Leiste mit schwarzer Schrift */
.kopf:not(.fest){color:#fff;}
.kopf:not(.fest) .marke{color:#fff;}
.kopf:not(.fest) .menue-knopf span{background:#fff;}
.menue-offen .kopf .marke{color:var(--tinte);}
.menue-offen .kopf .menue-knopf span{background:var(--tinte);}

/* =====================================================================
   Version 5: keine Bogenformen mehr – alles rechteckig
   ===================================================================== */
.bogen{border-radius:0;padding:clamp(40px, 4vw, 56px) 26px 30px;min-height:380px;}
.bogen::before{clip-path:inset(100% 0 0 0);transition:clip-path .8s var(--ease-io);}
.bogen:hover::before{clip-path:inset(0 0 0 0);}
.res__bogen{border-radius:0;border-bottom:1px solid var(--linie);aspect-ratio:auto;width:min(760px, 88vw);height:calc(100% - clamp(80px, 10vw, 140px));}
.res__bogen::after{border-radius:0;border-bottom:1px solid var(--linie);inset:14px;}
.res.wand .res__bogen,.res.wand .res__bogen::after{border-color:rgba(244,242,238,.25);}
.hero__bogen,.hero__fenster{display:none!important;}

/* =====================================================================
   Version 6: Knöpfe schlicht & sauber (ohne Struktur), in jedem Zustand lesbar
   ===================================================================== */
/* Auf hellem Grund */
.btn{background:transparent;border:1px solid var(--tinte);color:var(--tinte);box-shadow:none;}
.btn::before{background:var(--tinte);mix-blend-mode:normal;transform:translateY(101%);}
.btn:hover,.btn:focus-visible{color:#fff;}
.btn:hover::before,.btn:focus-visible::before{transform:none;}
.btn--voll{background:var(--tinte);border-color:var(--tinte);color:#fff;}
.btn--voll::before{background:#fff;}
.btn--voll:hover,.btn--voll:focus-visible{color:var(--tinte);}
/* Auf dunklem Grund (Video, Wand, Kopfzeile über dem Video) */
.hero--video .btn,.wand .btn,.kopf:not(.fest) .kopf__rechts .btn{border-color:rgba(255,255,255,.7);color:#fff;}
.hero--video .btn::before,.wand .btn::before,.kopf:not(.fest) .kopf__rechts .btn::before{background:#fff;}
.hero--video .btn:hover,.wand .btn:hover,.kopf:not(.fest) .kopf__rechts .btn:hover,
.hero--video .btn:focus-visible,.wand .btn:focus-visible,.kopf:not(.fest) .kopf__rechts .btn:focus-visible{color:#111;}
.hero--video .btn--voll,.wand .btn--voll{background:#fff;border-color:#fff;color:#111;}
.hero--video .btn--voll::before,.wand .btn--voll::before{background:#111;}
.hero--video .btn--voll:hover,.wand .btn--voll:hover,.hero--video .btn--voll:focus-visible,.wand .btn--voll:focus-visible{color:#fff;border-color:#fff;}
.btn:active{transform:scale(.98);}