/* Salt & Silver — Neufassung · Tasty Studios
   Bewegung nur über transform + opacity. Kein Weichzeichner, kein Schatten über Bewegtem. */
@import url('fonts.css?h=4c7c5e5264');

:root{
  --nacht:#111421; --schiefer:#1f212c; --navy:#1f213b;
  --papier:#f5eee6; --creme:#ebdbce; --taupe:#9e947f; --rot:#ff3132; --tinte:#0b0c10;
  --serif:'Antonio','Arial Narrow','Helvetica Neue',sans-serif;
  --sans:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'DM Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --e1:cubic-bezier(.16,1,.3,1); --e2:cubic-bezier(.32,.72,0,1);
  --rand:clamp(20px,4.6vw,76px); --max:1480px;
  --abschnitt:clamp(96px,13vw,208px);
  --r-xl:34px; --r-l:26px; --r-m:18px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{margin:0;background:var(--nacht);color:#fff;font-family:var(--sans);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd{margin:0;padding:0}
ul,ol{list-style:none}
::selection{background:var(--creme);color:var(--tinte)}
:focus-visible{outline:1.5px solid var(--rot);outline-offset:4px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Flächen ---------- */
.fl{position:relative;padding:var(--abschnitt) var(--rand)}
.fl--nacht{background:var(--nacht);color:#fff}
.fl--schiefer{background:var(--schiefer);color:#fff}
.fl--papier{background:var(--papier);color:var(--tinte)}
.fl--creme{background:var(--creme);color:var(--tinte)}
.in{max-width:var(--max);margin:0 auto}
.fl--eng{padding-top:clamp(64px,8vw,120px);padding-bottom:clamp(64px,8vw,120px)}

/* ---------- Schrift ---------- */
.kopf{font-family:var(--mono);font-weight:400;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:12px;color:var(--taupe)}
.kopf::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--rot);flex:none}
.kopf--still::before{background:currentColor;opacity:.5}
.fl--papier .kopf,.fl--creme .kopf{color:#6f6757}
.d1,.d2,.d3{font-family:var(--serif);font-weight:400;letter-spacing:-.022em;line-height:.94;text-wrap:balance}
.d1{font-size:clamp(3.5rem,10.2vw,10.6rem)}
.d2{font-size:clamp(2.7rem,6.6vw,6.9rem);line-height:.97}
.d3{font-size:clamp(2rem,3.7vw,3.7rem);line-height:1.02;letter-spacing:-.015em}
.d1 em,.d2 em,.d3 em{font-style:italic;letter-spacing:-.03em}
.fl--nacht em.w,.fl--schiefer em.w{color:var(--creme)}
.lauf{font-size:clamp(1rem,1.12vw,1.14rem);line-height:1.66;max-width:60ch}
.lauf p+p{margin-top:1.05em}
.fl--nacht .lauf,.fl--schiefer .lauf{color:rgba(255,255,255,.74)}
.fl--papier .lauf,.fl--creme .lauf{color:rgba(11,12,16,.78)}
.gross{font-family:var(--serif);font-size:clamp(1.55rem,2.5vw,2.5rem);line-height:1.2;letter-spacing:-.012em;text-wrap:pretty}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.mono--k{font-size:11px;letter-spacing:.16em}
.leise{opacity:.62}

/* Zeilen-Maske für große Überschriften */
.z{display:block;overflow:hidden;padding:.16em 0 .11em;margin:-.16em 0 -.11em}
.z>span{display:block;transform:translateY(108%);transition:transform 1.25s var(--e1)}
.da .z>span,.z.da>span{transform:none}
.z:nth-child(2)>span{transition-delay:.09s}.z:nth-child(3)>span{transition-delay:.18s}.z:nth-child(4)>span{transition-delay:.27s}

/* Einblenden */
[data-r]{opacity:0;transform:translateY(30px);transition:opacity 1.1s var(--e1),transform 1.3s var(--e1);transition-delay:calc(var(--i,0)*90ms)}
[data-r].da{opacity:1;transform:none}
[data-r="bild"]{transform:none}
[data-r="bild"] .rahmen__k img{transform:scale(1.13);transition:transform 1.9s var(--e1)}
[data-r="bild"].da.nah .rahmen__k img{transform:none}

/* ---------- Knöpfe ---------- */
.kn{display:inline-flex;align-items:center;gap:14px;height:54px;padding:0 7px 0 26px;border-radius:999px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;white-space:nowrap;
  background:var(--creme);color:var(--tinte);transition:transform .5s var(--e2),background-color .5s var(--e2),color .5s var(--e2)}
.kn i{flex:none;width:40px;height:40px;border-radius:50%;background:rgba(11,12,16,.09);display:grid;place-items:center;
  transition:transform .6s var(--e2),background-color .5s var(--e2)}
.kn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.2;transition:transform .6s var(--e2)}
.kn:hover{background:#fff}
.kn:hover i{transform:scale(1.07)}
.kn:hover svg{transform:translate(2px,-2px)}
.kn:active{transform:scale(.975)}
.kn--linie{background:transparent;color:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.26)}
.kn--linie i{background:rgba(255,255,255,.1)}
.kn--linie:hover{background:rgba(255,255,255,.08)}
.fl--papier .kn,.fl--creme .kn{background:var(--nacht);color:#fff}
.fl--papier .kn i,.fl--creme .kn i{background:rgba(255,255,255,.12)}
.fl--papier .kn:hover,.fl--creme .kn:hover{background:var(--navy)}
.fl--papier .kn--linie,.fl--creme .kn--linie{background:transparent;color:var(--tinte);box-shadow:inset 0 0 0 1px rgba(11,12,16,.24)}
.fl--papier .kn--linie i,.fl--creme .kn--linie i{background:rgba(11,12,16,.07)}
.fl--papier .kn--linie:hover,.fl--creme .kn--linie:hover{background:rgba(11,12,16,.05)}
.kn--klein{height:44px;padding-left:20px;font-size:10.5px;gap:10px}
.kn--klein i{width:32px;height:32px}
.kn-reihe{display:flex;flex-wrap:wrap;gap:12px}
.pfeil{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:11.5px;letter-spacing:.17em;text-transform:uppercase;padding:8px 0;position:relative}
.pfeil::after{content:'';position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;opacity:.3;transform-origin:left;transition:transform .7s var(--e1),opacity .5s}
.pfeil:hover::after{opacity:1}
.pfeil svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.2;transition:transform .6s var(--e2)}
.pfeil:hover svg{transform:translate(3px,-3px)}

/* ---------- Bildrahmen (doppelter Rand) ---------- */
.rahmen{display:block;padding:7px;border-radius:var(--r-xl);background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.fl--papier .rahmen,.fl--creme .rahmen{background:rgba(11,12,16,.04);box-shadow:inset 0 0 0 1px rgba(11,12,16,.08)}
.rahmen__k{display:block;position:relative;overflow:hidden;border-radius:calc(var(--r-xl) - 7px);background:#191b27;isolation:isolate}
.rahmen__k img{width:100%;height:100%;object-fit:cover}
.rahmen--m{border-radius:var(--r-l);padding:6px}.rahmen--m .rahmen__k{border-radius:calc(var(--r-l) - 6px)}
.v-34 .rahmen__k{aspect-ratio:3/4}.v-45 .rahmen__k{aspect-ratio:4/5}.v-32 .rahmen__k{aspect-ratio:3/2}
.v-169 .rahmen__k{aspect-ratio:16/9}.v-11 .rahmen__k{aspect-ratio:1}.v-219 .rahmen__k{aspect-ratio:21/9}.v-43 .rahmen__k{aspect-ratio:4/3}
.legende{display:flex;justify-content:space-between;gap:16px;margin-top:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.6}

/* Stempel (Zeichnungen aus der Marke, als Maske) */
.stempel{display:block;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;opacity:.9}

/* ---------- Navigation ---------- */
.nav{position:fixed;z-index:60;top:18px;left:0;right:0;padding:0 var(--rand);pointer-events:none;
  transition:transform .8s var(--e2)}
.nav.weg{transform:translateY(-130%)}
.nav__insel{pointer-events:auto;max-width:var(--max);margin:0 auto;height:62px;padding:0 9px 0 26px;border-radius:999px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  background:rgba(17,20,33,.94);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.nav__logo img{height:15px;width:auto}
.nav__links{display:flex;gap:clamp(18px,2.6vw,40px)}
.nav__links a{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.72);padding:10px 0;position:relative;transition:color .4s}
.nav__links a::after{content:'';position:absolute;left:0;right:0;bottom:4px;height:1px;background:var(--creme);transform:scaleX(0);transform-origin:right;transition:transform .6s var(--e1)}
.nav__links a:hover,.nav__links a[aria-current]{color:#fff}
.nav__links a:hover::after,.nav__links a[aria-current]::after{transform:scaleX(1);transform-origin:left}
.nav__rechts{display:flex;align-items:center;gap:8px}
.burger{display:none;width:44px;height:44px;border-radius:50%;position:relative;background:rgba(255,255,255,.08)}
.burger span{position:absolute;left:14px;right:14px;height:1.2px;background:#fff;transition:transform .6s var(--e2)}
.burger span:first-child{top:19px}.burger span:last-child{top:25px}
.offen .burger span:first-child{transform:translateY(3px) rotate(45deg)}
.offen .burger span:last-child{transform:translateY(-3px) rotate(-45deg)}

.menue{position:fixed;inset:0;z-index:55;background:var(--nacht);padding:118px var(--rand) 40px;display:flex;flex-direction:column;justify-content:space-between;
  opacity:0;visibility:hidden;transition:opacity .5s var(--e2),visibility 0s .5s}
.offen .menue{opacity:1;visibility:visible;transition:opacity .5s var(--e2)}
.menue__links a{display:block;font-family:var(--serif);font-size:clamp(2.6rem,11vw,4.4rem);line-height:1.08;letter-spacing:-.02em;overflow:hidden}
.menue__links a span{display:block;transform:translateY(105%);transition:transform .9s var(--e1);transition-delay:calc(var(--i)*55ms)}
.offen .menue__links a span{transform:none}
.menue__fuss{display:grid;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--taupe)}

/* ---------- Auftakt ---------- */
.vorhang{position:fixed;inset:0;z-index:90;background:var(--nacht);display:grid;place-items:center;pointer-events:none;
  animation:vorhang 1s var(--e2) 1.05s forwards}
.vorhang img{width:74px;height:74px;animation:emblem 1.1s var(--e1) both}
@keyframes vorhang{to{transform:translateY(-101%)}}
@keyframes emblem{0%{opacity:0;transform:scale(.8) rotate(-14deg)}45%{opacity:1;transform:none}100%{opacity:1;transform:none}}
.kein-vorhang .vorhang{display:none}

.hero{position:relative;height:100svh;min-height:640px;overflow:hidden;background:var(--nacht);display:flex;align-items:flex-end}
.hero__bild{position:absolute;inset:-7% 0 -7% 0;will-change:transform}
.hero__bild picture{display:block;width:100%;height:100%}
.hero__bild img{width:100%;height:100%;object-fit:cover;object-position:58% 42%;transform:scale(1.1);animation:heroein 2.6s var(--e1) .9s forwards}
.kein-vorhang .hero__bild img{animation-delay:0s}
@keyframes heroein{to{transform:none}}
.hero__in{position:relative;width:100%;max-width:calc(var(--max) + 2*var(--rand));margin:0 auto;padding:0 var(--rand) clamp(34px,5vw,64px);
  display:grid;grid-template-columns:1fr auto;align-items:end;gap:40px}
.hero h1{margin-top:22px}
.hero .z>span{transition-delay:1.25s}.hero .z:nth-child(2)>span{transition-delay:1.36s}
.kein-vorhang .hero .z>span{transition-delay:.1s}.kein-vorhang .hero .z:nth-child(2)>span{transition-delay:.2s}
.hero__sub{margin-top:30px;max-width:44ch;font-size:clamp(1rem,1.2vw,1.18rem);color:rgba(255,255,255,.8)}
.hero .kn-reihe{margin-top:34px}
.hero__seite{display:grid;gap:22px;justify-items:end;text-align:right;padding-bottom:6px}
.hero__koord{font-family:var(--mono);font-size:11px;letter-spacing:.17em;text-transform:uppercase;line-height:1.9;color:rgba(255,255,255,.72)}
.hero__koord b{font-weight:400;color:#fff}
.michelin{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:10.5px;letter-spacing:.17em;text-transform:uppercase}
.michelin::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--rot)}
.hero [data-r]{transition-delay:calc(1.5s + var(--i,0)*90ms)}
.kein-vorhang .hero [data-r]{transition-delay:calc(.35s + var(--i,0)*90ms)}

/* Seitenkopf der Unterseiten */
.sk{padding:clamp(150px,17vw,230px) var(--rand) clamp(40px,5vw,70px);background:var(--nacht)}
.sk__zeile{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(30px,5vw,90px);align-items:end;margin-top:26px}
.sk__fakten{display:grid;gap:0;border-top:1px solid rgba(255,255,255,.14)}
.sk__fakten div{display:grid;grid-template-columns:110px 1fr;gap:16px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.14);font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;line-height:1.55}
.sk__fakten dt{color:var(--taupe)}
.sk__bild{padding:0 var(--rand) clamp(60px,8vw,110px);background:var(--nacht)}
.sk__bild .rahmen__k{aspect-ratio:21/9}

/* ---------- Raster ---------- */
.zwei{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(24px,3vw,56px);align-items:start}
.sp-5{grid-column:span 5}.sp-6{grid-column:span 6}.sp-7{grid-column:span 7}.sp-4{grid-column:span 4}.sp-8{grid-column:span 8}
.ab-7{grid-column:7/-1}.ab-8{grid-column:8/-1}.ab-2{grid-column:2/span 5}
.mitte{align-items:center}.unten{align-items:end}
.kopfzeile{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:end;margin-bottom:clamp(44px,6vw,92px)}
.kopfzeile .d2{margin-top:22px}
.stapel{display:grid;gap:26px;justify-items:start}

/* Auftakt-Text: Bildpaar */
.paar{position:relative;padding-bottom:13%}
.paar__klein{position:absolute;right:-6%;bottom:0;width:48%;transform:rotate(3deg)}
.paar__klein .rahmen{background:var(--papier);box-shadow:inset 0 0 0 1px rgba(11,12,16,.1)}
.paar .stempel{position:absolute;left:-9%;top:-7%;width:clamp(74px,8vw,124px);height:clamp(90px,10vw,150px);transform:rotate(-9deg);color:var(--tinte)}
.unterschrift{font-family:var(--serif);font-style:italic;font-size:1.7rem;letter-spacing:-.01em}

.zahlen{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(70px,9vw,140px);border-top:1px solid rgba(11,12,16,.16)}
.zahlen div{padding:26px 22px 0 0;border-right:1px solid rgba(11,12,16,.16);padding-left:22px}
.zahlen div:first-child{padding-left:0}.zahlen div:last-child{border-right:0}
.zahlen b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(3rem,6vw,6rem);line-height:.9;letter-spacing:-.03em}
.zahlen span{display:block;margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.17em;text-transform:uppercase;opacity:.62}
.fl--nacht .zahlen,.fl--nacht .zahlen div{border-color:rgba(255,255,255,.14)}

/* ---------- Bühne: drei Häuser ---------- */
.buehne{position:relative;background:var(--nacht)}
.buehne__kopf{padding:var(--abschnitt) var(--rand) clamp(30px,4vw,60px)}
.buehne__strecke{height:300vh;position:relative}
.buehne__halt{position:sticky;top:0;height:100vh;min-height:620px;padding:96px var(--rand) 34px;display:grid;grid-template-columns:minmax(340px,.82fr) 1.18fr;gap:clamp(24px,3.4vw,64px);max-width:calc(var(--max) + 2*var(--rand));margin:0 auto}
.buehne__texte{position:relative}
.haus{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;opacity:0;visibility:hidden;will-change:opacity;
  transition:opacity .7s cubic-bezier(.4,0,.6,1),visibility 0s .7s}
.haus.an{opacity:1;visibility:visible;transition:opacity 1.1s cubic-bezier(.4,0,.2,1) .3s}
.haus .z>span{transform:none;transition:none}
.haus__nr{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;color:var(--taupe);display:flex;gap:14px;align-items:center}
.haus__nr b{font-weight:400;color:#fff}
.haus h3{margin-top:20px}
.haus__art{margin-top:18px;font-family:var(--serif);font-style:italic;font-size:clamp(1.25rem,1.9vw,1.75rem);color:var(--creme)}
.haus .lauf{margin-top:22px;max-width:44ch}
.liste{border-top:1px solid rgba(255,255,255,.14);margin-top:26px}
.liste div{display:grid;grid-template-columns:104px 1fr;gap:14px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.14);font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;line-height:1.5}
.liste dt{color:var(--taupe)}
.fl--papier .liste,.fl--papier .liste div,.fl--creme .liste,.fl--creme .liste div{border-color:rgba(11,12,16,.16)}
.fl--papier .liste dt,.fl--creme .liste dt{color:#6f6757}
.haus .kn-reihe{margin-top:26px}
.buehne__bilder{position:relative}
.buehne__bilder .rahmen{position:absolute;inset:0}
.buehne__bilder .rahmen__k{height:100%}
.buehne__bilder img{position:absolute;inset:0;z-index:1;opacity:.001;will-change:opacity;transition:opacity 0s linear .9s}
.buehne__bilder img.an{opacity:1;z-index:2;transition:opacity .9s var(--e2)}
.buehne__takt{position:absolute;right:26px;bottom:24px;display:flex;gap:6px;z-index:3}
.buehne__takt i{width:34px;height:2px;background:rgba(255,255,255,.3);transition:background-color .6s}
.buehne__takt i.an{background:#fff}

/* ---------- Kompass ---------- */
.kompass{width:100%;height:auto;overflow:visible}
.kompass .ring{fill:none;stroke:currentColor;stroke-width:.7;opacity:.28}
.kompass .ring--p{stroke-dasharray:1.5 5}
.kompass .strahl{stroke:currentColor;stroke-width:.9;stroke-dasharray:var(--l);stroke-dashoffset:var(--l);transition:stroke-dashoffset 1.9s var(--e1);transition-delay:calc(var(--i)*110ms + .2s)}
.da .kompass .strahl{stroke-dashoffset:0}
.kompass .ziel{opacity:0;transition:opacity .8s var(--e2);transition-delay:calc(var(--i)*110ms + 1s)}
.da .kompass .ziel{opacity:1}
.kompass text{font-family:var(--mono);font-size:9.6px;letter-spacing:.16em;text-transform:uppercase;fill:currentColor}
.kompass .km{opacity:.55;font-size:8.6px}
.kompass .hh{font-size:10.5px}
.kompass .n{font-size:8.5px;opacity:.5}

/* Speisekarte */
.karte{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(30px,5vw,96px)}
.karte__g+.karte__g{margin-top:clamp(36px,4vw,60px)}
.karte__t{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:14px;border-bottom:1px solid currentColor;font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase}
.karte__t span{opacity:.5}
.gericht{display:grid;grid-template-columns:1fr auto;gap:22px;align-items:baseline;padding:15px 0;border-bottom:1px solid rgba(11,12,16,.13)}
.fl--nacht .gericht,.fl--schiefer .gericht{border-color:rgba(255,255,255,.12)}
.gericht b{font-family:var(--serif);font-weight:400;font-size:clamp(1.25rem,1.6vw,1.55rem);line-height:1.2;letter-spacing:-.005em}
.gericht small{display:block;margin-top:3px;font-size:.92rem;opacity:.64;line-height:1.45}
.gericht span{font-family:var(--mono);font-size:12.5px;letter-spacing:.06em;white-space:nowrap}
.karte__hin{margin-top:26px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;opacity:.58;line-height:1.8}
.wahl{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;margin-top:clamp(40px,5vw,70px);padding:clamp(24px,3vw,40px);border-radius:var(--r-l);background:var(--nacht);color:#fff}
.wahl b{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,2.6vw,2.5rem);line-height:1.05}
.wahl span{font-family:var(--mono);font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--taupe);display:block;margin-top:10px}
.wahl strong{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,4.4vw,4.4rem);line-height:1;white-space:nowrap}
.wahl strong small{font-family:var(--mono);font-size:11px;letter-spacing:.17em;margin-left:8px;color:var(--taupe)}
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(30px,4vw,54px)}
.tab{height:42px;padding:0 20px;border-radius:999px;font-family:var(--mono);font-size:11px;letter-spacing:.17em;text-transform:uppercase;box-shadow:inset 0 0 0 1px rgba(11,12,16,.22);transition:background-color .4s,color .4s}
.tab[aria-selected="true"]{background:var(--nacht);color:#fff;box-shadow:none}
.fl--nacht .tab{box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}
.fl--nacht .tab[aria-selected="true"]{background:var(--creme);color:var(--tinte)}
.tabfeld[hidden]{display:none}
.tabfeld{animation:tabein .8s var(--e1)}
@keyframes tabein{from{opacity:0;transform:translateY(16px)}}

/* ---------- Band (seitliches Blättern, nativ) ---------- */
.band{display:flex;gap:clamp(14px,1.6vw,26px);overflow-x:auto;scroll-snap-type:x proximity;padding:4px var(--rand) 26px;margin:0 calc(-1*var(--rand));scrollbar-width:none;cursor:grab}
.band::-webkit-scrollbar{display:none}
.band.zieht{cursor:grabbing;scroll-snap-type:none}
.band>*{flex:none;scroll-snap-align:start;width:clamp(250px,24vw,370px)}
.band--breit>*{width:clamp(300px,38vw,600px)}
.band img{pointer-events:none;-webkit-user-drag:none}
.kachel h3{font-family:var(--serif);font-weight:400;font-size:1.65rem;line-height:1.1;margin-top:18px}
.kachel .mono{display:block;margin-top:8px;color:var(--taupe);font-size:10.5px}
.kachel p{margin-top:10px;font-size:.96rem;line-height:1.55;opacity:.72}
.band-hinweis{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;opacity:.55}
.band-hinweis::after{content:'';width:54px;height:1px;background:currentColor}

/* ---------- Dreiklang + Bruch (Stimmungsbilder) ---------- */
.drei{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,34px);align-items:start;margin-top:clamp(70px,9vw,140px)}
.drei figure:nth-child(2){margin-top:clamp(40px,7vw,112px)}
.drei figure:nth-child(3){margin-top:clamp(14px,2.6vw,42px)}
.drei figcaption{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-top:14px}
.drei figcaption b{font-family:var(--serif);font-weight:400;font-style:italic;font-size:clamp(2.2rem,4.6vw,4.8rem);line-height:1;letter-spacing:-.025em}
.drei figcaption span{font-family:var(--mono);font-size:11px;letter-spacing:.2em;opacity:.5}
.bruch{position:relative;min-height:min(88vh,860px);display:flex;align-items:flex-end;padding:var(--abschnitt) var(--rand) clamp(44px,6vw,96px);background:var(--nacht);color:#fff;overflow:hidden}
.bruch>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bruch .in{position:relative;width:100%}
.bruch .kopf{color:rgba(255,255,255,.8)}
.bruch .d2{margin-top:22px;font-size:clamp(2.3rem,5.4vw,5.7rem);text-wrap:nowrap}
.band--breit>.schmal{width:clamp(210px,24vw,380px)}
.band--breit{align-items:flex-start}

/* ---------- Produkte ---------- */
.waren{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,26px)}
.waren--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.ware{display:block}
/* Waren schweben gemeinsam von links herein, eine nach der anderen (Robert 10.10.2026: elegant, nicht aufploppen) */
/* Waren, Lieferanten-Kacheln und Karten-Gerichte schweben gemeinsam von links herein, eine nach der anderen (Robert 10.10.2026) */
.waren .ware[data-r],.band>.kachel[data-r],.gangband>.gk[data-r],.lieferband>.lk[data-r],.fach>.ware[data-r],.fach>.quer[data-r],.band>.bk[data-r]{opacity:0;transform:translateX(-64px);transition:opacity 1.3s var(--e1),transform 1.8s cubic-bezier(.19,1,.22,1);transition-delay:calc(var(--i,0)*170ms)}
.waren .ware[data-r].da,.band>.kachel[data-r].da,.gangband>.gk[data-r].da,.lieferband>.lk[data-r].da,.fach>.ware[data-r].da,.fach>.quer[data-r].da,.band>.bk[data-r].da{opacity:1;transform:none}
/* Kleidung und Gutscheine kommen von rechts, die rechte Karte zuerst (Robert 10.10.2026) */
#kleidung .fach>[data-r],#gutscheine .fach>[data-r]{transform:translateX(64px);transition-delay:calc((var(--n,4) - 1 - var(--i,0))*170ms)}
#kleidung .fach>[data-r].da,#gutscheine .fach>[data-r].da{opacity:1;transform:none}
/* Versand im Shop: Satz links, Lieferung und Zahlung als zwei Kuhlen rechts (Robert 10.10.2026) */
.versand__in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,72px);align-items:center}
.versand__t .kn-reihe{margin-top:clamp(22px,2.4vw,34px)}
.versand__k{display:grid;gap:14px}
.versand__fach{padding:clamp(20px,2vw,28px) clamp(22px,2.4vw,32px);border-radius:24px;background:var(--knopf);box-shadow:inset 0 2px 6px rgba(0,0,0,.5),inset 0 -1px 0 rgba(255,255,255,.07),0 1px 0 rgba(255,255,255,.05)}
.versand__fach .mono{display:block;font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--taupe);margin-bottom:12px}
.versand__fach b{display:block;font-family:var(--serif);font-weight:700;text-transform:uppercase;font-size:clamp(1.15rem,1.45vw,1.55rem);line-height:1.22;letter-spacing:.012em;color:#fff}
@media (max-width:860px){.versand__in{grid-template-columns:1fr;gap:28px}}
.ware .rahmen__k{aspect-ratio:1;background:#fff}
.ware .rahmen__k img{transition:transform 1.4s var(--e1)}
.ware:hover .rahmen__k img{transform:scale(1.045)}
.ware__z{display:flex;justify-content:space-between;gap:14px;align-items:baseline;margin-top:16px}
.ware h3{font-family:var(--serif);font-weight:400;font-size:1.4rem;line-height:1.15;min-width:0;text-wrap:balance}
.ware span{font-family:var(--mono);font-size:12px;letter-spacing:.06em;white-space:nowrap}
.ware em{display:block;font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;opacity:.55;margin-top:6px}
.marke{position:absolute;left:14px;top:14px;z-index:2;height:28px;padding:0 12px;border-radius:999px;background:var(--nacht);color:#fff;font-family:var(--mono);font-size:10px;letter-spacing:.17em;text-transform:uppercase;display:grid;place-items:center}

/* ---------- Namenszeile (Presse, Partner) ---------- */
.namen{display:flex;flex-wrap:wrap;gap:6px 0;font-family:var(--serif);font-size:clamp(1.7rem,3.5vw,3.4rem);line-height:1.2;letter-spacing:-.015em}
.namen li{display:flex;align-items:center}
.namen li:not(:last-child)::after{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.3;margin:0 .5em}
.namen li:nth-child(even){font-style:italic}

/* ---------- Galerie ---------- */
.galerie{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(12px,1.4vw,22px)}
.galerie>*{min-width:0}
.g-7{grid-column:span 7}.g-5{grid-column:span 5}.g-4{grid-column:span 4}.g-8{grid-column:span 8}.g-6{grid-column:span 6}.g-12{grid-column:span 12}
.galerie .rahmen,.galerie .rahmen__k{height:100%}
.galerie .hoch .rahmen__k{aspect-ratio:auto;min-height:100%}

/* ---------- Reihen (Lieferanten, Stellen) ---------- */
.reihe{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(24px,3vw,56px);align-items:center;padding:clamp(40px,5vw,80px) 0;border-top:1px solid rgba(11,12,16,.14)}
.fl--nacht .reihe{border-color:rgba(255,255,255,.13)}
.reihe__nr{font-family:var(--mono);font-size:11px;letter-spacing:.2em;opacity:.5}
.reihe h3{margin:14px 0 8px}
.reihe .ort{font-family:var(--mono);font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:#6f6757}
.fl--nacht .reihe .ort{color:var(--taupe)}
.reihe .lauf{margin-top:20px}
.reihe .pfeil{margin-top:18px}
.reihe--um .reihe__b{order:2}

/* Aufklapper */
.fragen{border-top:1px solid rgba(11,12,16,.16)}
.frage{border-bottom:1px solid rgba(11,12,16,.16)}
.frage summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;padding:24px 0;font-family:var(--serif);font-size:clamp(1.35rem,2vw,1.8rem);line-height:1.15}
.frage summary::-webkit-details-marker{display:none}
.frage summary i{width:38px;height:38px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(11,12,16,.2);position:relative;transition:transform .6s var(--e2),background-color .4s}
.frage summary i::before,.frage summary i::after{content:'';position:absolute;left:12px;right:12px;top:50%;height:1px;background:currentColor}
.frage summary i::after{transform:rotate(90deg);transition:transform .6s var(--e2)}
.frage[open] summary i{background:var(--nacht);color:#fff}
.frage[open] summary i::after{transform:rotate(0)}
.frage__a{padding:0 60px 28px 0;max-width:68ch;color:rgba(11,12,16,.78);animation:tabein .7s var(--e1)}
.frage__a p+p,.frage__a p+ul,.frage__a ul+p{margin-top:.9em}
.frage__a a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.frage__a b{font-weight:500}
.punkte li{position:relative;padding-left:22px;margin-top:8px}
.punkte li::before{content:'';position:absolute;left:0;top:.72em;width:10px;height:1px;background:currentColor;opacity:.6}

/* ---------- Konzept-Board ---------- */
.liste--breit div{grid-template-columns:150px 1fr;font-family:var(--sans);font-size:1rem;letter-spacing:0;text-transform:none;padding:18px 0;line-height:1.55}
.liste--breit dt{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;padding-top:4px}
.marke-feld{padding:clamp(22px,3vw,40px);border-radius:var(--r-xl);background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);display:grid;gap:26px;align-content:start;height:100%}
.marke-logos{display:flex;align-items:center;gap:34px}
.marke-logos img:first-child{height:26px;width:auto}.marke-logos img:last-child{height:70px;width:auto}
.stempelreihe{display:flex;flex-wrap:wrap;gap:16px;color:var(--creme)}
.stempelreihe .stempel{width:50px;height:58px}
.farben{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.farbe{border-radius:16px;padding:14px;min-height:112px;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.farbe b{font-family:var(--serif);font-weight:400;font-size:1.3rem;line-height:1}
.farbe span,.farbe em{font-family:var(--mono);font-style:normal;font-size:10px;letter-spacing:.12em;text-transform:uppercase;opacity:.7;margin-top:5px}
.schrift{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(24px,4vw,70px);margin-top:clamp(40px,5vw,80px);padding-top:clamp(30px,4vw,56px);border-top:1px solid rgba(255,255,255,.13);align-items:end}
.schrift .d2{margin-top:16px}.schrift .lauf{margin-top:10px}
.ideen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(30px,4vw,70px) clamp(18px,2.4vw,40px)}
.idee__t{display:grid;grid-template-columns:44px 1fr;gap:4px 10px;margin-top:18px}
.idee__t span{font-family:var(--mono);font-size:11px;letter-spacing:.2em;opacity:.5;padding-top:9px}
.idee__t h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.6rem,2.3vw,2.2rem);line-height:1.1}
.idee__t p{grid-column:2;font-size:.98rem;line-height:1.6;opacity:.76;max-width:52ch}
.seitenliste{border-top:1px solid rgba(255,255,255,.14)}
.seitenzeile{display:grid;grid-template-columns:54px minmax(0,1fr) minmax(0,1.4fr) 20px;gap:18px;align-items:baseline;padding:20px 0;border-bottom:1px solid rgba(255,255,255,.14);transition:padding .6s var(--e1)}
.seitenzeile span{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--taupe)}
.seitenzeile b{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,2.4vw,2.3rem);line-height:1.05}
.seitenzeile em{font-style:normal;font-size:.95rem;color:rgba(255,255,255,.62)}
.seitenzeile svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.2;align-self:center;transition:transform .6s var(--e2)}
.seitenzeile:hover svg{transform:translate(3px,-3px)}
.tabelle{overflow-x:auto}
.tabelle table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;min-width:720px}
.tabelle th{text-align:left;font-weight:400;font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;opacity:.55;padding:0 14px 12px 0;border-bottom:1px solid currentColor}
.tabelle td{padding:13px 14px 13px 0;border-bottom:1px solid rgba(11,12,16,.13)}
.tabelle td:first-child{font-family:var(--serif);font-size:1.25rem;letter-spacing:0}
.bogen{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.bogen .rahmen{padding:4px;border-radius:18px}.bogen .rahmen__k{border-radius:14px}

/* ---------- Schluss ---------- */
.schluss{position:relative;padding:var(--abschnitt) var(--rand) clamp(60px,7vw,110px);background:var(--nacht);text-align:center}
.schluss .d1{margin:24px auto 0}
.schluss .kn-reihe{justify-content:center;margin-top:40px}
.schluss__bild{margin-top:clamp(56px,7vw,110px)}
.schluss__bild .rahmen__k{aspect-ratio:2560/868}
.post{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;max-width:var(--max);margin:clamp(50px,6vw,90px) auto 0;padding-top:34px;border-top:1px solid rgba(255,255,255,.14);text-align:left}
.post p{font-family:var(--serif);font-size:clamp(1.4rem,2.2vw,2.1rem);line-height:1.15}

.fuss{background:var(--nacht);padding:clamp(60px,7vw,100px) var(--rand) 34px;border-top:1px solid rgba(255,255,255,.1)}
.fuss__oben{display:grid;grid-template-columns:1.25fr repeat(3,1fr);gap:clamp(26px,3vw,60px)}
.fuss__marke img{height:20px;width:auto}
.fuss__marke p{margin-top:22px;font-family:var(--serif);font-style:italic;font-size:1.5rem;line-height:1.2;color:var(--creme);max-width:15ch}
.fuss h4{font-family:var(--mono);font-weight:400;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe);margin-bottom:16px}
.fuss li,.fuss address{font-style:normal;font-size:.95rem;line-height:1.7;color:rgba(255,255,255,.76)}
.fuss a{transition:color .3s}.fuss a:hover{color:#fff}
.fuss__haeuser{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(26px,3vw,60px);margin-top:clamp(46px,5vw,80px);padding-top:34px;border-top:1px solid rgba(255,255,255,.1)}
.fuss__unten{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px 30px;margin-top:clamp(46px,5vw,80px);padding-top:22px;border-top:1px solid rgba(255,255,255,.1);font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.fuss__unten nav{display:flex;flex-wrap:wrap;gap:8px 24px}
.studie{display:inline-flex;align-items:center;gap:10px}
.studie::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--rot)}

/* ---------- Tischwahl ---------- */
dialog.tisch{border:0;padding:0;background:transparent;color:#fff;width:min(680px,calc(100vw - 28px));max-height:calc(100svh - 28px);overflow:visible}
dialog.tisch::backdrop{background:rgba(8,9,15,.8)}
dialog.tisch[open]{animation:dialogein .7s var(--e1)}
@keyframes dialogein{from{opacity:0;transform:translateY(26px) scale(.98)}}
.tisch__k{background:var(--schiefer);border-radius:var(--r-xl);padding:clamp(24px,4vw,44px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.tisch__kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.tisch__kopf h2{margin-top:14px}
.zu{flex:none;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.08);position:relative;transition:transform .6s var(--e2)}
.zu:hover{transform:rotate(90deg)}
.zu::before,.zu::after{content:'';position:absolute;left:14px;right:14px;top:50%;height:1.2px;background:#fff;transform:rotate(45deg)}
.zu::after{transform:rotate(-45deg)}
.tisch__wahl{margin-top:26px;border-top:1px solid rgba(255,255,255,.13)}
.tisch__wahl a{display:grid;grid-template-columns:70px 1fr auto;gap:18px;align-items:center;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.13)}
.tisch__wahl img{width:70px;height:70px;object-fit:cover;border-radius:14px}
.tisch__wahl a>span{margin:0;font-family:inherit;font-size:inherit;letter-spacing:0;text-transform:none;color:inherit}
.tisch__wahl b{display:block;font-family:var(--serif);font-weight:400;font-size:1.55rem;line-height:1.1}
.tisch__wahl span span{display:block;margin-top:5px;font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--taupe)}
.tisch__wahl i{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;transition:background-color .4s,transform .6s var(--e2)}
.tisch__wahl svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.2}
.tisch__wahl a:hover i{background:var(--creme);color:var(--tinte);transform:translate(2px,-2px)}
.tisch__fuss{margin-top:20px;font-size:.9rem;color:rgba(255,255,255,.6)}
.tisch__fuss a{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* ---------- Kleinere Schirme ---------- */
@media (max-width:1060px){
  .nav__links{display:none}.burger{display:block}
  .hero__in{grid-template-columns:1fr}.hero__seite{justify-items:start;text-align:left;grid-auto-flow:row}
  .sk__zeile{grid-template-columns:1fr}
  .waren{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fuss__oben{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  body{font-size:16px}
  .nav{top:12px}.nav__insel{height:56px;padding-left:20px;padding-right:6px}
  .nav .kn{height:44px;padding-left:16px;font-size:10px;gap:8px}.nav .kn i{width:32px;height:32px}
  .zwei,.reihe{grid-template-columns:1fr}
  .zwei>*,.reihe>*{grid-column:auto!important}
  .reihe--um .reihe__b{order:0}
  .kopfzeile{grid-template-columns:1fr}
  .paar{padding-bottom:16%;margin:0 6% 0 9%}
  .zahlen{grid-template-columns:1fr 1fr}
  .zahlen div{padding:22px 0 22px 18px;border-bottom:1px solid rgba(11,12,16,.16)}
  .zahlen div:nth-child(odd){padding-left:0}.zahlen div:nth-child(even){border-right:0}
  .ideen,.schrift{grid-template-columns:1fr}.bogen{grid-template-columns:repeat(3,minmax(0,1fr))}.seitenzeile{grid-template-columns:34px 1fr 20px}.seitenzeile em{display:none}.liste--breit div{grid-template-columns:1fr;gap:4px}.farben{grid-template-columns:repeat(2,minmax(0,1fr))}
  .drei{grid-template-columns:1fr;gap:34px}.drei figure{margin-top:0!important}.drei .rahmen__k{aspect-ratio:5/4}
  .bruch{min-height:78svh}.bruch .d2{text-wrap:balance}.band--breit>.schmal{width:62vw}
  .buehne__strecke{height:auto}
  .buehne__halt{position:static;height:auto;min-height:0;display:block;padding:0 var(--rand) 40px}
  .buehne__bilder,.buehne__takt{display:none}
  .haus{position:static;opacity:1;visibility:visible;transform:none;display:block;padding:34px 0 44px;border-top:1px solid rgba(255,255,255,.14)}
  .haus__mbild{display:block!important;margin-bottom:26px}
  .haus .z>span{transform:none}
  .karte{grid-template-columns:1fr}
  .wahl{grid-template-columns:1fr}
  .galerie>*{grid-column:span 12!important}
  .galerie .rahmen__k{aspect-ratio:4/3!important;min-height:0!important}
  .waren,.waren--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .post{grid-template-columns:1fr}
  .fuss__oben,.fuss__haeuser{grid-template-columns:1fr 1fr}
  .fuss__marke{grid-column:1/-1}
  .frage__a{padding-right:0}
  .sk__bild .rahmen__k{aspect-ratio:4/3}
  .schluss__bild .rahmen__k{aspect-ratio:16/10}
  .hero__bild img{object-position:62% 40%}
  .band>*{width:74vw}.band--breit>*{width:84vw}
}
@media (max-width:520px){
  .ware__z{display:block}.ware h3{font-size:1.15rem}.ware__z>span{display:block;margin-top:6px}
  .nur-breit{display:none}
  .hero__bild img{object-position:50% 0}
  .hero__koord{font-size:10px;line-height:1.75}
  .fuss__haeuser{grid-template-columns:1fr}
  .kn{height:50px}
  .sk__fakten div,.liste div{grid-template-columns:86px 1fr}
}
.haus__mbild{display:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important}
  [data-r],.z>span,.hero__bild img{opacity:1!important;transform:none!important}
  .vorhang{display:none}
}
[data-r="z"]{opacity:1;transform:none}
.hero .kopf{color:rgba(255,255,255,.82)}
.fl--nacht+.schluss{padding-top:clamp(30px,4vw,60px)}

/* ---------- Titelschrift = Schrift der Wortmarke: schmal, kräftig, Versalien ---------- */
.d1,.d2,.d3,.zahlen b,.gericht b,.wahl b,.wahl strong,.kachel h3,.ware h3,.namen,.fuss__marke p,.tisch__wahl b,.menue__links a,
.drei figcaption b,.idee__t h3,.seitenzeile b,.farbe b,.tabelle td:first-child,.unterschrift{font-weight:700;font-style:normal;text-transform:uppercase;letter-spacing:.012em}
.d1{line-height:.99}.d2{line-height:1.01}.d3{line-height:1.08;letter-spacing:.015em}
.d1 em,.d2 em,.d3 em{font-style:normal;letter-spacing:inherit;color:#978c77}
.fl--nacht em,.fl--schiefer em,.hero em,.sk em,.buehne em,.schluss em,.bruch em,dialog em{color:var(--creme)}
.z{padding:.2em 0 .08em;margin:-.2em 0 -.08em}
.gross{font-family:var(--sans);font-size:clamp(1.3rem,1.85vw,1.85rem);line-height:1.36;letter-spacing:-.012em}
.gross em{font-style:normal}
.unterschrift{font-size:1.25rem;letter-spacing:.05em}
.haus__art{font-family:var(--mono);font-style:normal;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase}
.gericht b{font-weight:600;font-size:clamp(1.15rem,1.4vw,1.34rem);letter-spacing:.035em}
.kachel h3{font-size:1.45rem;letter-spacing:.03em}
.ware h3{font-weight:600;font-size:1.2rem;letter-spacing:.035em}
.namen{font-size:clamp(1.6rem,3.3vw,3.2rem);line-height:1.22}
.namen li:nth-child(even){font-style:normal;opacity:.5}
.fuss__marke p{font-size:1.3rem;letter-spacing:.04em;line-height:1.25}
.frage summary{font-family:var(--sans);font-weight:500;font-size:clamp(1.08rem,1.4vw,1.28rem);line-height:1.3;letter-spacing:-.005em}
.post p{font-family:var(--sans);font-size:clamp(1.15rem,1.6vw,1.5rem);line-height:1.3;letter-spacing:-.01em}
.tisch__wahl b{font-size:1.4rem;letter-spacing:.03em}
.menue__links a{letter-spacing:.01em;line-height:1.14}
.drei figcaption b{font-size:clamp(2.2rem,4.4vw,4.6rem);letter-spacing:.01em}
.idee__t h3,.seitenzeile b{letter-spacing:.03em}
.wahl strong{letter-spacing:0}
.bruch .d2{font-size:clamp(2.4rem,6vw,6.4rem)}

/* ================= Shop: Produktseite, Warenkorb, Kasse ================= */
.korbknopf{position:relative;flex:none;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;transition:background-color .4s}
.korbknopf:hover{background:rgba(255,255,255,.16)}
.korbknopf svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:1.15;stroke-linejoin:round}
.korbknopf b{position:absolute;right:-2px;top:-2px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--rot);color:#fff;font-family:var(--mono);font-weight:500;font-size:10px;line-height:18px;text-align:center}
.korbknopf b[hidden]{display:none}

.produkt{padding-top:clamp(124px,12vw,170px)}
.strecke{padding-top:clamp(130px,13vw,190px);min-height:92svh}
.pfad{display:flex;gap:10px;font-size:11px;letter-spacing:.17em;color:#6f6757;margin-bottom:clamp(22px,3vw,40px)}
.pfad a{position:relative}.pfad a:hover{color:var(--tinte)}
.produkt__r{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(28px,5vw,96px);align-items:start}
.schau{position:sticky;top:104px}
.schau__k{aspect-ratio:1;background:#fff}
.schau__bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s var(--e2)}
.schau__bild.an{opacity:1}
.daumen{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.daumen button{width:74px;height:74px;border-radius:14px;overflow:hidden;opacity:.55;box-shadow:inset 0 0 0 1px rgba(11,12,16,.12);transition:opacity .4s,transform .5s var(--e2)}
.daumen button img{width:100%;height:100%;object-fit:cover}
.daumen button:hover{opacity:.9}
.daumen button[aria-pressed="true"]{opacity:1;outline:1.5px solid var(--tinte);outline-offset:2px}
.produkt__t{display:grid;gap:22px;justify-items:start}
.produkt__t>*{width:100%}
.produkt__n{font-size:clamp(2.1rem,4vw,4rem);line-height:1.02;text-wrap:balance}
.produkt__preis{display:flex;align-items:baseline;gap:14px}
.produkt__preis b{font-family:var(--serif);font-weight:600;font-size:clamp(1.7rem,2.4vw,2.3rem);letter-spacing:.01em}
.produkt__preis span{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.55}
.kauf{display:grid;gap:22px;padding:6px 0 4px}
.wahlreihe{border:0;padding:0;margin:0;display:grid;gap:12px}
.wahlreihe legend{padding:0;font-size:10.5px;letter-spacing:.2em;color:#6f6757;margin-bottom:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;cursor:pointer}
.chip input{position:absolute;opacity:0;inset:0;cursor:pointer}
.chip span{display:grid;place-items:center;min-width:56px;height:48px;padding:0 18px;border-radius:999px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;box-shadow:inset 0 0 0 1px rgba(11,12,16,.22);transition:background-color .35s,color .35s,box-shadow .35s}
.chip:hover span{box-shadow:inset 0 0 0 1px var(--tinte)}
.chip input:checked+span{background:var(--nacht);color:#fff;box-shadow:none}
.chip input:focus-visible+span{outline:1.5px solid var(--rot);outline-offset:3px}
.chip--k span{min-width:0}
.hin{font-size:.9rem;line-height:1.55;color:rgba(11,12,16,.62)}
.kauf__z{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.kauf__z .kn{flex:1;justify-content:space-between;min-width:230px}
.stueck,.menge{display:inline-flex;align-items:center;height:54px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(11,12,16,.22)}
.stueck button,.menge button{width:46px;height:100%;font-family:var(--mono);font-size:16px;border-radius:999px;transition:background-color .3s}
.stueck button:hover,.menge button:hover{background:rgba(11,12,16,.06)}
.stueck input{width:34px;border:0;background:none;text-align:center;font-family:var(--mono);font-size:13px;color:inherit;padding:0;outline:0}
.menge{height:36px;margin-top:10px}.menge button{width:34px;font-size:14px}.menge b{min-width:26px;text-align:center;font-family:var(--mono);font-weight:400;font-size:12px}
.aus{height:54px;display:inline-flex;align-items:center;padding:0 26px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(11,12,16,.22);opacity:.6;width:auto!important}
.produkt .fragen{margin-top:6px}
.produkt .frage summary{padding:20px 0;font-family:var(--mono);font-weight:400;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase}
.produkt .frage summary i{width:32px;height:32px}.produkt .frage summary i::before,.produkt .frage summary i::after{left:10px;right:10px}
.produkt .frage__a{padding-right:0}

/* Felder */
.felder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.feld{display:grid;gap:7px}
.feld--2{grid-column:1/-1}
.feld>span{font-family:var(--mono);font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:#6f6757}
.feld input,.feld select{width:100%;height:54px;padding:0 18px;border:0;border-radius:14px;background:rgba(11,12,16,.045);box-shadow:inset 0 0 0 1px rgba(11,12,16,.1);font:inherit;font-size:1rem;color:var(--tinte);outline:0;transition:box-shadow .3s,background-color .3s;-webkit-appearance:none;appearance:none}
.feld select{background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 23px) 24px,calc(100% - 18px) 24px;background-size:5px 5px;background-repeat:no-repeat}
.feld input::placeholder{color:rgba(11,12,16,.32)}
.feld input:focus,.feld select:focus{background:#fff;box-shadow:inset 0 0 0 1.5px var(--tinte)}
.feld--betrag{max-width:260px}

/* Posten + Rechnung */
.postenliste{display:grid}
.posten{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:18px;align-items:start;padding:20px 0;border-bottom:1px solid rgba(11,12,16,.13)}
.posten:first-child{border-top:1px solid rgba(11,12,16,.13)}
.posten__b img{width:96px;height:96px;object-fit:cover;border-radius:16px;background:#fff}
.posten__t b{display:block;font-family:var(--serif);font-weight:600;font-size:1.2rem;line-height:1.15;letter-spacing:.035em;text-transform:uppercase}
.posten__t>span:not(.menge){display:block;margin-top:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;opacity:.6}
.posten__p{display:grid;gap:10px;justify-items:end;font-family:var(--mono);font-size:13px;letter-spacing:.04em;white-space:nowrap}
.weg{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.5;text-decoration:underline;text-underline-offset:3px;transition:opacity .3s}
.weg:hover{opacity:1}
.postenliste--k .posten{grid-template-columns:60px minmax(0,1fr) auto;gap:14px;padding:14px 0}
.postenliste--k .posten__b img{width:60px;height:60px;border-radius:12px}
.postenliste--k .posten__t b{font-size:1.02rem}
.posten__m{display:inline-block!important;margin-top:6px}
.rechnung{display:grid;gap:0;margin:0}
.rechnung div{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:12px 0;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.rechnung dt{opacity:.66}
.rechnung dt small{display:block;margin-top:4px;font-size:10px;letter-spacing:.12em;opacity:.8}
.rechnung__g{border-top:1px solid currentColor;margin-top:6px;padding-top:16px!important}
.rechnung__g dt{opacity:1}
.rechnung__g dd{font-family:var(--serif);font-weight:600;font-size:1.7rem;letter-spacing:.01em}
.kn--voll{width:100%;justify-content:space-between}

/* Warenkorb-Seite + Kasse */
.schritte{display:flex;flex-wrap:wrap;gap:8px 26px;font-size:11px;letter-spacing:.18em;margin-bottom:26px;color:#6f6757}
.schritte li{opacity:.5}.schritte li.an{opacity:1;color:var(--tinte)}
.schritte li.an::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--rot);margin-right:10px;vertical-align:middle}
.fl--nacht .schritte{color:var(--taupe)}.fl--nacht .schritte li.an{color:#fff}
.korbseite{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(28px,5vw,90px);align-items:start;margin-top:clamp(36px,5vw,70px)}
.korbseite[hidden],.leer[hidden]{display:none}
.kasten{position:sticky;top:104px;display:grid;gap:18px;padding:clamp(22px,2.6vw,36px);border-radius:var(--r-l);background:var(--creme)}
.kasten--dunkel{position:static;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);color:#fff}
.kasten--dunkel .posten,.kasten--dunkel .posten:first-child{border-color:rgba(255,255,255,.13)}
.leer{display:grid;gap:26px;justify-items:start;margin-top:clamp(36px,5vw,70px)}
.leer .stempel{width:110px;height:76px;color:var(--tinte)}
.block{border:0;padding:0;margin:0 0 clamp(34px,4vw,56px)}
.block legend{display:flex;align-items:baseline;gap:14px;padding:0;margin-bottom:20px;font-family:var(--serif);font-weight:700;font-size:1.7rem;letter-spacing:.03em;text-transform:uppercase}
.block legend span{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.2em;color:#6f6757}
.block .hin{margin-top:14px}
.block[hidden]{display:none}
.zahlarten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.zahlart{position:relative;cursor:pointer}
.zahlart input{position:absolute;opacity:0;inset:0;cursor:pointer}
.zahlart span{display:flex;justify-content:space-between;align-items:center;height:64px;padding:0 20px;border-radius:16px;box-shadow:inset 0 0 0 1px rgba(11,12,16,.16);transition:box-shadow .3s,background-color .3s}
.zahlart b{font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.zahlart i{width:18px;height:18px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(11,12,16,.4);transition:box-shadow .3s}
.zahlart:hover span{box-shadow:inset 0 0 0 1px var(--tinte)}
.zahlart input:checked+span{background:#fff;box-shadow:inset 0 0 0 1.5px var(--tinte)}
.zahlart input:checked+span i{box-shadow:inset 0 0 0 6px var(--tinte)}
.zahlart input:focus-visible+span{outline:1.5px solid var(--rot);outline-offset:3px}
.zahlfeld{margin-top:16px}.zahlfeld[hidden]{display:none}
.haken{display:grid;grid-template-columns:22px 1fr;gap:14px;align-items:start;padding:10px 0;font-size:.95rem;line-height:1.5;cursor:pointer}
.haken[hidden]{display:none}
.haken input{width:22px;height:22px;margin:1px 0 0;border-radius:7px;-webkit-appearance:none;appearance:none;box-shadow:inset 0 0 0 1px rgba(11,12,16,.4);background:transparent;cursor:pointer;transition:background-color .3s,box-shadow .3s}
.haken input:checked{background:var(--tinte) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6 11.4l3.4 3.3L16 8' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E") center/100% no-repeat;box-shadow:none}
.haken a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.studie-hin{font-size:10px;letter-spacing:.14em;line-height:1.7;opacity:.6;display:flex;gap:10px}
.studie-hin::before{content:'';flex:none;width:6px;height:6px;border-radius:50%;background:var(--rot);margin-top:5px}

/* Schublade */
dialog.korb{border:0;padding:0;margin:0 0 0 auto;width:min(480px,100vw);height:100dvh;max-height:none;background:var(--papier);color:var(--tinte)}
dialog.korb::backdrop{background:rgba(8,9,15,.72)}
dialog.korb[open]{animation:korbein .65s var(--e1)}
@keyframes korbein{from{transform:translateX(100%)}}
.korb__k{display:grid;grid-template-rows:auto 1fr auto;height:100%;padding:26px clamp(20px,3vw,34px) 26px}
.korb__kopf{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}
.korb__kopf .kopf{color:#6f6757}
.korb .zu{background:rgba(11,12,16,.07)}.korb .zu::before,.korb .zu::after{background:var(--tinte)}
.korb .postenliste{overflow-y:auto;align-content:start;overscroll-behavior:contain}
.korb .posten{grid-template-columns:76px minmax(0,1fr) auto}.korb .posten__b img{width:76px;height:76px}
.korb__leer{font-size:1.1rem;opacity:.6}.korb__leer[hidden]{display:none}
.korb__fuss{display:grid;gap:14px;padding-top:8px;justify-items:start}.korb__fuss[hidden]{display:none}
.korb__fuss .rechnung{width:100%}
.korb .kn{background:var(--nacht);color:#fff}.korb .kn i{background:rgba(255,255,255,.12)}

@media (max-width:860px){
  .produkt__r,.korbseite{grid-template-columns:1fr}
  .schau,.kasten{position:static}
  .daumen button{width:58px;height:58px}
  .zahlarten{grid-template-columns:1fr}
  .posten{grid-template-columns:76px minmax(0,1fr) auto;gap:14px}.posten__b img{width:76px;height:76px}
  .kasten--kasse{order:2}
}
@media (max-width:520px){
  .nav .kn--klein i{display:none}.nav .kn--klein{padding:0 16px}
  .korbknopf,.burger{width:40px;height:40px}.burger span{left:12px;right:12px}.burger span:first-child{top:17px}.burger span:last-child{top:23px}
  .nav__rechts{gap:6px}.nav__insel{padding-left:16px}
  .felder{grid-template-columns:1fr}
  .feld{grid-column:1/-1}
}
.produkt__n{line-height:1.12}
.rechnung dd{white-space:nowrap}
.rechnung dt{min-width:0}
dialog.korb{max-width:100vw}

/* ================= Die Karte: Häuser, Kategorien links, Gerichte zum Blättern ================= */
.khero{padding-bottom:clamp(30px,4vw,56px)}
.karten .tabs{margin:0;justify-content:flex-end}
.erkunder{display:grid;grid-template-columns:minmax(230px,.33fr) minmax(0,1fr);gap:clamp(28px,4.5vw,84px);align-items:start}
.erkunder__nav{position:sticky;top:108px;display:grid;gap:22px;justify-items:start}
.erkunder__nav nav{display:grid;width:100%;border-top:1px solid rgba(255,255,255,.13)}
.erkunder__nav nav button{display:flex;justify-content:space-between;align-items:baseline;gap:14px;width:100%;padding:17px 0;border-bottom:1px solid rgba(255,255,255,.13);
  font-family:var(--serif);font-weight:700;font-size:clamp(1.6rem,2.5vw,2.5rem);line-height:1.05;letter-spacing:.02em;text-transform:uppercase;text-align:left;color:rgba(255,255,255,.34);transition:color .4s}
.erkunder__nav nav button span{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.18em;opacity:.7}
.erkunder__nav nav button:hover{color:rgba(255,255,255,.8)}
.erkunder__nav nav button.an{color:var(--creme)}
.erkunder__nav .hin{color:rgba(255,255,255,.45);max-width:26ch}
.erkunder__links{display:flex;flex-wrap:wrap;gap:6px 24px}
.erkunder__feld{min-width:0}
.gang{display:none}
.gang.an{display:block;animation:tabein .7s var(--e1)}
.gang__kopf{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px}
.gang__hin{margin:-8px 0 22px;font-size:.96rem;color:rgba(255,255,255,.62);max-width:60ch}
.pfeile{display:flex;gap:8px}
.pfeile button{width:54px;height:54px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(255,255,255,.24);display:grid;place-items:center;transition:background-color .4s,opacity .4s,transform .5s var(--e2)}
.pfeile button:hover{background:rgba(255,255,255,.1)}
.pfeile button:active{transform:scale(.95)}
.pfeile button:disabled{opacity:.28;pointer-events:none}
.pfeile svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:1.2}
.gangband{margin:0 calc(-1*var(--rand)) 0 0;padding:4px var(--rand) 22px 0;align-items:stretch}
.gangband>.gk{width:clamp(250px,22.5vw,330px)}
.gk{display:grid;grid-template-rows:auto auto 1fr auto;background:var(--papier);color:var(--tinte);border-radius:28px;padding:9px 9px 20px}
.gk__b{position:relative;aspect-ratio:1/.8;border-radius:20px;overflow:hidden;background:var(--nacht)}
.gk__b img{width:100%;height:100%;object-fit:cover}
.gk__b--s{display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.gk__b--s .stempel{width:40%;height:54%;color:var(--creme);opacity:.82}
.gk__n{margin:14px 5px 0;padding:13px 12px;border-radius:16px;background:rgba(11,12,16,.045);box-shadow:inset 0 0 0 1px rgba(11,12,16,.07);text-align:center}
.gk__n h4{font-family:var(--serif);font-weight:600;font-size:1.2rem;line-height:1.16;letter-spacing:.035em;text-transform:uppercase;text-wrap:balance}
.gk p{margin:14px 14px 0;font-size:.94rem;line-height:1.5;color:rgba(11,12,16,.7)}
.gk__p{justify-self:end;margin:16px 16px 0;font-family:var(--serif);font-weight:600;font-size:1.3rem;letter-spacing:.02em;color:#8c8069}
.laufbalken{position:relative;height:1px;width:min(240px,42%);margin:6px 0 0 auto;background:rgba(255,255,255,.18)}
.laufbalken i{position:absolute;left:0;top:-.5px;height:2px;width:30%;background:#fff;will-change:transform}
.karten .wahl{background:var(--creme);color:var(--tinte)}
.karten .wahl span,.karten .wahl strong small{color:#6f6757}
.karten .karte__hin{max-width:90ch}
.mauer{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:clamp(150px,19.5vw,300px);grid-auto-flow:dense;gap:clamp(12px,1.4vw,22px)}
.mauer figure{min-width:0;min-height:0}
.mauer .rahmen{height:100%}
.mauer .rahmen__k{height:100%}
.mauer img{position:absolute;inset:0}
.mauer .hoch{grid-row:span 2}
.mauer img{transition:transform 1.4s var(--e1)}
.mauer figure:hover img{transform:scale(1.04)}
@media (max-width:860px){
  .karten .tabs{justify-content:flex-start}
  .erkunder{grid-template-columns:1fr;gap:26px}
  .erkunder__nav{position:static;gap:16px}
  .erkunder__nav nav{display:flex;gap:8px;overflow-x:auto;border:0;scrollbar-width:none;margin:0 calc(-1*var(--rand));padding:0 var(--rand);width:auto;max-width:100vw}
  .erkunder__nav nav::-webkit-scrollbar{display:none}
  .erkunder__nav nav button{flex:none;width:auto;padding:0 18px;height:44px;border:0;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);font-size:1.15rem;align-items:center}
  .erkunder__nav nav button.an{background:var(--creme);color:var(--tinte);box-shadow:none}
  .erkunder__nav nav button span,.erkunder__nav .hin,.erkunder__nav>.mono:last-child{display:none}
  .gangband>.gk{width:74vw}
  .pfeile button{width:46px;height:46px}
  .mauer{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:29vw}
}

/* ---------- Ohne Etikett-Zeilen: Stempel am Seitenkopf, Kapitelzeile nur bei nummerierten Kapiteln ---------- */
.kopfzeile .d2,.hero h1,.bruch .d2,.tisch__kopf h2{margin-top:0}
.sk__zeile{margin-top:0}
.sk__stempel{width:clamp(72px,7vw,112px);height:clamp(80px,7.8vw,124px);color:var(--creme);transform:rotate(-7deg);transform-origin:left bottom;margin:0 0 clamp(16px,2vw,28px) 4px;-webkit-mask-position:left bottom;mask-position:left bottom}
.sk__stempel[data-r]{transform:translateY(30px) rotate(-7deg)}
.sk__stempel[data-r].da{transform:rotate(-7deg)}
.schluss__stempel{width:clamp(70px,7vw,104px);height:clamp(70px,7vw,104px);margin:0 auto;color:var(--creme);opacity:.85}
.schluss .d1{margin-top:clamp(14px,2vw,26px)}
.kap{display:inline-flex;align-items:center;gap:14px;font-family:var(--serif);font-weight:600;font-size:clamp(1rem,1.25vw,1.2rem);letter-spacing:.07em;text-transform:uppercase;color:#8c8069}
.kap b{font-weight:700;color:var(--tinte);display:inline-flex;align-items:center;gap:14px}
.kap b::after{content:'';width:34px;height:1px;background:currentColor;opacity:.5}
.fl--nacht .kap,.fl--schiefer .kap,.sk .kap,.bruch .kap{color:var(--taupe)}
.fl--nacht .kap b,.fl--schiefer .kap b,.sk .kap b,.bruch .kap b{color:#fff}
.stapel>.kap,.kopfzeile .kap{margin-bottom:-6px}
.kopfzeile .kap+.d2,.bruch .kap+.d2{margin-top:18px}
.sk .kap{margin-bottom:22px}
.kastentitel{display:block;font-family:var(--serif);font-weight:600;font-size:1.3rem;letter-spacing:.045em;text-transform:uppercase}
.michelin::before,.studie::before,.studie-hin::before,.schritte li.an::before{content:none}
.michelin{padding-top:14px;border-top:1px solid rgba(255,255,255,.3)}
.schritte li.an{text-decoration:underline;text-underline-offset:7px;text-decoration-thickness:1px}

/* ---------- Navigation: schmale Insel in der Mitte ---------- */
.nav__insel{width:fit-content;max-width:100%;gap:clamp(18px,2.4vw,40px);padding-left:26px}
.nav__links{gap:clamp(16px,2vw,30px)}
@media (max-width:1060px){.nav__insel{width:auto;max-width:560px}}
@media (max-width:860px){.nav__insel{max-width:none}}

/* ---------- Dreiklang: Bilder schweben herauf ---------- */
[data-r="schweb"]{opacity:0;transform:translateY(clamp(90px,14vw,190px)) scale(.94);transform-origin:50% 100%;
  transition:opacity .65s var(--e1),transform 1.05s cubic-bezier(.19,1,.22,1);transition-delay:calc(var(--i,0)*90ms)}
[data-r="schweb"].da{opacity:1;transform:none}
[data-r="schweb"] .rahmen__k img{transform:scale(1.14);transition:transform 1.4s cubic-bezier(.19,1,.22,1);transition-delay:calc(var(--i,0)*90ms)}
[data-r="schweb"].da.nah .rahmen__k img{transform:none}
.schweb{will-change:transform}
/* 10.10.2026: Foto-Kacheln ohne eigenen Bild-Auftritt (Orte, Stellen, Mannschaft, Shop-Kopf) zoomen jetzt genauso von 1,13 auf 1, sobald man sie sieht */
:is(.ortkachel,.stelle,.mannschaft__b,.bieten__fotos,.held)[data-r] .rahmen__k img{transform:scale(1.13);transition:transform 1.9s var(--e1)}
:is(.ortkachel,.stelle,.mannschaft__b,.bieten__fotos,.held)[data-r].da.nah .rahmen__k img{transform:none}
.drei figcaption b{display:block;overflow:hidden;padding-top:.12em}
.drei{padding-bottom:clamp(20px,4vw,70px)}

/* ---------- Die großen Zahlen ---------- */
.prunk{position:relative;background:var(--navy);color:#fff;padding:clamp(90px,11vw,180px) var(--rand) clamp(80px,10vw,160px);overflow:hidden}
.prunk__satz{font-family:var(--serif);font-weight:600;font-size:clamp(1.1rem,1.5vw,1.45rem);letter-spacing:.08em;text-transform:uppercase;color:var(--taupe);text-align:center;margin-bottom:clamp(44px,6vw,90px)}
.prunk__r{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.prunk__z{position:relative;display:grid;justify-items:center;text-align:center;padding:0 clamp(10px,1.6vw,28px)}
.prunk__z+.prunk__z::before{content:'';position:absolute;left:0;top:8%;bottom:8%;width:1px;background:rgba(235,219,206,.2)}
.prunk__z .stempel{width:clamp(34px,3.4vw,54px);height:clamp(40px,4vw,62px);color:var(--creme);opacity:.75;margin-bottom:clamp(14px,2vw,28px)}
.prunk__z b{display:block;overflow:hidden;font-family:var(--serif);font-weight:700;font-size:clamp(4.6rem,12.4vw,13rem);line-height:.92;letter-spacing:-.005em;color:var(--creme);padding-top:.06em;font-variant-numeric:tabular-nums}
.prunk__z b span{display:block;transform:translateY(104%);transition:transform 1.7s cubic-bezier(.19,1,.22,1);transition-delay:calc(var(--i,0)*140ms + .1s)}
.prunk__z.da b span{transform:none}
.prunk__z i{display:block;width:clamp(40px,5vw,84px);height:1px;background:var(--creme);margin:clamp(16px,2vw,30px) 0 clamp(12px,1.4vw,20px);transform:scaleX(0);transition:transform 1.4s var(--e1);transition-delay:calc(var(--i,0)*140ms + .7s)}
.prunk__z.da i{transform:none}
.prunk__z em{font-style:normal;font-family:var(--serif);font-weight:600;font-size:clamp(.95rem,1.25vw,1.25rem);letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.prunk__z[data-r]{transform:none}
.prunk+.buehne .buehne__kopf{padding-top:clamp(90px,11vw,170px)}
@media (max-width:860px){
  .prunk__r{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:56px}
  .prunk__z:nth-child(3)::before{content:none}
  .prunk__z b{font-size:clamp(4.4rem,21vw,7rem)}
  [data-r="schweb"]{transform:translateY(70px) scale(.96)}
}
.prunk__r{grid-template-columns:1.6fr 1fr 1fr 1.25fr}
.prunk__z b{font-size:clamp(4.6rem,14.4vw,14.5rem)}
.prunk .in{position:relative;padding:clamp(40px,5vw,80px) 0;border-top:1px solid rgba(235,219,206,.22);border-bottom:1px solid rgba(235,219,206,.22)}
.prunk .in::before,.prunk .in::after{content:'';position:absolute;left:0;right:0;height:1px;background:rgba(235,219,206,.1)}
.prunk .in::before{top:7px}.prunk .in::after{bottom:7px}
@media (max-width:860px){.prunk__r{grid-template-columns:repeat(2,minmax(0,1fr))}.prunk__z b{font-size:clamp(4.4rem,21vw,7rem)}}
.prunk__z b{line-height:1;padding:.04em 0 .07em}

/* ---------- Lieferanten als Galerie zum Blättern ---------- */
.liefergang .gang__kopf{margin-bottom:clamp(24px,3vw,44px);align-items:flex-end}
.lieferband{gap:clamp(14px,1.6vw,24px);scroll-snap-type:x mandatory;padding-bottom:26px}
.lieferband>.lk{width:min(1120px,80vw);scroll-snap-align:start}
.lk{display:grid;grid-template-columns:1.08fr 1fr;min-height:clamp(430px,41vw,600px);border-radius:var(--r-xl);overflow:hidden;background:var(--nacht);color:#fff}
.lk__b{position:relative;min-height:0;background:#191b27}
.lk__b img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--e1)}
.lk:hover .lk__b img{transform:scale(1.035)}
.lk__t{display:flex;flex-direction:column;justify-content:space-between;gap:28px;padding:clamp(24px,3.4vw,54px)}
.lk__nr{font-family:var(--serif);font-weight:600;font-size:1.05rem;letter-spacing:.09em;color:var(--taupe)}
.lk h3{font-family:var(--serif);font-weight:700;font-size:clamp(2rem,3.5vw,3.5rem);line-height:1.02;letter-spacing:.012em;text-transform:uppercase;color:var(--creme);text-wrap:balance}
.lk__ort{display:block;margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--taupe)}
.lk p{margin-top:20px;font-size:clamp(.96rem,1.05vw,1.06rem);line-height:1.62;color:rgba(255,255,255,.76);max-width:52ch}
.lk .pfeil{margin-top:20px}
.pfeile--hell button{box-shadow:inset 0 0 0 1px rgba(11,12,16,.26)}
.pfeile--hell button:hover{background:rgba(11,12,16,.06)}
.pfeile--hell svg{stroke:var(--tinte)}
.laufbalken--hell{background:rgba(11,12,16,.18)}
.laufbalken--hell i{background:var(--tinte)}
@media (max-width:860px){
  .lieferband>.lk{width:84vw}
  .lk{grid-template-columns:1fr;min-height:0}
  .lk__b{aspect-ratio:4/3}
  .lk__t{gap:20px}
}

/* ================= Knöpfe mit Tiefe: Lichtkante oben, Schattenkante unten, Knauf, Glanz beim Darüberfahren ================= */
.kn{--o:#f8eee4;--m:#ebdbce;--u:#d6c2b1;--t:var(--tinte);--licht:rgba(255,255,255,.9);--kante:rgba(104,80,58,.34);--tief:rgba(0,0,0,.6);
  --ko:#2b3049;--ku:#0a0c15;--kt:var(--creme);--klicht:rgba(255,255,255,.22);
  position:relative;overflow:hidden;isolation:isolate;color:var(--t);
  background:linear-gradient(180deg,var(--o) 0%,var(--m) 46%,var(--u) 100%);
  box-shadow:inset 0 1px 0 var(--licht),inset 0 -3px 0 var(--kante),inset 0 0 0 1px rgba(255,255,255,.08),0 1px 1px rgba(0,0,0,.3),0 16px 26px -14px var(--tief);
  transition:transform .55s var(--e2),box-shadow .55s var(--e2)}
.kn:hover{background:linear-gradient(180deg,var(--o) 0%,var(--m) 46%,var(--u) 100%);transform:translateY(-2px);
  box-shadow:inset 0 1px 0 var(--licht),inset 0 -3px 0 var(--kante),inset 0 0 0 1px rgba(255,255,255,.08),0 2px 2px rgba(0,0,0,.25),0 24px 32px -16px var(--tief)}
.kn:active{transform:translateY(1px) scale(.985);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.28),inset 0 -1px 0 var(--kante),0 1px 1px rgba(0,0,0,.3),0 6px 12px -8px var(--tief)}
.kn::after{content:'';position:absolute;z-index:-1;top:-20%;bottom:-20%;left:0;width:38%;
  background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.5) 50%,transparent 100%);transform:translateX(-180%) skewX(-18deg);transition:transform 0s}
.kn:hover::after{transform:translateX(360%) skewX(-18deg);transition:transform 1s var(--e1)}
.kn i{background:linear-gradient(180deg,var(--ko),var(--ku));color:var(--kt);
  box-shadow:inset 0 1px 0 var(--klicht),inset 0 -2px 0 rgba(0,0,0,.28),0 3px 6px rgba(0,0,0,.35);transition:transform .6s var(--e2)}
.kn:hover i{transform:translateX(2px) scale(1.05)}
.kn svg{stroke:currentColor}
/* dunkler Knopf auf hellen Flächen */
.fl--papier .kn,.fl--creme .kn,.korb .kn,.kasten .kn{--o:#2d3250;--m:#151929;--u:#080a12;--t:#fff;--licht:rgba(255,255,255,.26);--kante:rgba(0,0,0,.55);--tief:rgba(17,20,33,.6);
  --ko:#f8eee4;--ku:#d6c2b1;--kt:var(--tinte);--klicht:rgba(255,255,255,.9);
  background:linear-gradient(180deg,var(--o) 0%,var(--m) 46%,var(--u) 100%);color:var(--t)}
.fl--papier .kn:hover,.fl--creme .kn:hover,.korb .kn:hover,.kasten .kn:hover{background:linear-gradient(180deg,var(--o) 0%,var(--m) 46%,var(--u) 100%)}
.fl--papier .kn::after,.fl--creme .kn::after,.korb .kn::after,.kasten .kn::after{background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.2) 50%,transparent 100%)}
.fl--papier .kn i,.fl--creme .kn i,.korb .kn i,.kasten .kn i{background:linear-gradient(180deg,var(--ko),var(--ku));box-shadow:inset 0 1px 0 var(--klicht),inset 0 -2px 0 rgba(104,80,58,.3),0 3px 6px rgba(0,0,0,.4)}
/* zweiter Knopf: auf Dunkel eine Platte aus Nachtblau, auf Hell eine aus Porzellan */
.kn--linie{--o:#343a56;--m:#1e2236;--u:#11141f;--t:#fff;--licht:rgba(255,255,255,.24);--kante:rgba(0,0,0,.45);--tief:rgba(0,0,0,.55);
  --ko:#f8eee4;--ku:#d6c2b1;--kt:var(--tinte);--klicht:rgba(255,255,255,.9);
  background:linear-gradient(180deg,var(--o) 0%,var(--m) 46%,var(--u) 100%);color:#fff}
.kn--linie:hover{background:linear-gradient(180deg,var(--o) 0%,var(--m) 46%,var(--u) 100%)}
.kn--linie::after{background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.16) 50%,transparent 100%)}
.kn--linie i{background:linear-gradient(180deg,var(--ko),var(--ku));box-shadow:inset 0 1px 0 var(--klicht),inset 0 -2px 0 rgba(104,80,58,.3),0 3px 6px rgba(0,0,0,.4)}
.fl--papier .kn--linie,.fl--creme .kn--linie,.kasten .kn--linie{--o:#fffdf9;--m:#f4ebe1;--u:#dfd0c2;--t:var(--tinte);--licht:#fff;--kante:rgba(104,80,58,.26);--tief:rgba(70,52,36,.42);
  --ko:#2b3049;--ku:#0a0c15;--kt:var(--creme);--klicht:rgba(255,255,255,.22);
  background:linear-gradient(180deg,var(--o) 0%,var(--m) 46%,var(--u) 100%);color:var(--tinte);
  box-shadow:inset 0 1px 0 var(--licht),inset 0 -3px 0 var(--kante),inset 0 0 0 1px rgba(104,80,58,.14),0 1px 1px rgba(70,52,36,.2),0 16px 26px -14px var(--tief)}
.fl--papier .kn--linie:hover,.fl--creme .kn--linie:hover,.kasten .kn--linie:hover{background:linear-gradient(180deg,var(--o) 0%,var(--m) 46%,var(--u) 100%);
  box-shadow:inset 0 1px 0 var(--licht),inset 0 -3px 0 var(--kante),inset 0 0 0 1px rgba(104,80,58,.14),0 2px 2px rgba(70,52,36,.2),0 24px 32px -16px var(--tief)}
.fl--papier .kn--linie::after,.fl--creme .kn--linie::after,.kasten .kn--linie::after{background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.75) 50%,transparent 100%)}
.fl--papier .kn--linie i,.fl--creme .kn--linie i,.kasten .kn--linie i{background:linear-gradient(180deg,var(--ko),var(--ku));box-shadow:inset 0 1px 0 var(--klicht),inset 0 -2px 0 rgba(0,0,0,.3),0 3px 6px rgba(0,0,0,.3)}
/* helle Knöpfe in dunklen Kästen (Karte) */
.karten .kn:not(.kn--linie),.erkunder .kn{--o:#f8eee4;--m:#ebdbce;--u:#d6c2b1;--t:var(--tinte);--licht:rgba(255,255,255,.9);--kante:rgba(104,80,58,.34);--tief:rgba(0,0,0,.6);--ko:#2b3049;--ku:#0a0c15;--kt:var(--creme);--klicht:rgba(255,255,255,.22)}

/* Reiter und Auswahl-Pillen */
.tab,.chip span{background:linear-gradient(180deg,#fffdf9,#efe4d9);color:var(--tinte);
  box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(104,80,58,.2),inset 0 0 0 1px rgba(104,80,58,.14),0 8px 14px -10px rgba(70,52,36,.45);transition:transform .45s var(--e2),box-shadow .45s var(--e2)}
.tab:hover,.chip:hover span{transform:translateY(-1px);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(104,80,58,.2),inset 0 0 0 1px rgba(104,80,58,.2),0 12px 18px -10px rgba(70,52,36,.5)}
.tab[aria-selected="true"],.chip input:checked+span{background:linear-gradient(180deg,#2d3250,#151929 50%,#080a12);color:#fff;transform:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 -2px 0 rgba(0,0,0,.55),0 10px 16px -10px rgba(17,20,33,.7)}
.fl--nacht .tab{background:linear-gradient(180deg,#343a56,#1e2236 50%,#11141f);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -2px 0 rgba(0,0,0,.45),0 10px 16px -10px rgba(0,0,0,.7)}
.fl--nacht .tab[aria-selected="true"]{background:linear-gradient(180deg,#f8eee4,#ebdbce 50%,#d6c2b1);color:var(--tinte);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -2px 0 rgba(104,80,58,.34),0 10px 16px -10px rgba(0,0,0,.7)}

/* runde Knöpfe: Pfeile, Warenkorb, Menü, Schließen */
.pfeile button,.korbknopf,.burger,.zu{background:linear-gradient(180deg,#343a56,#1e2236 50%,#11141f);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -2px 0 rgba(0,0,0,.45),0 10px 16px -10px rgba(0,0,0,.75);transition:transform .5s var(--e2),box-shadow .5s var(--e2),opacity .4s}
.pfeile button:hover,.korbknopf:hover,.burger:hover{background:linear-gradient(180deg,#3d4463,#232840 50%,#141826);transform:translateY(-2px)}
.pfeile button:active,.korbknopf:active,.burger:active{transform:translateY(1px) scale(.96);box-shadow:inset 0 2px 5px rgba(0,0,0,.5)}
.zu:hover{transform:rotate(90deg)}
.pfeile--hell button,.korb .zu{background:linear-gradient(180deg,#fffdf9,#f1e7dc 50%,#dfd0c2);
  box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(104,80,58,.24),inset 0 0 0 1px rgba(104,80,58,.14),0 10px 16px -10px rgba(70,52,36,.5)}
.pfeile--hell button:hover{background:linear-gradient(180deg,#fff,#f6eee5 50%,#e6d8cb)}
.stueck,.menge,.zahlart span{background:linear-gradient(180deg,#fffdf9,#f1e7dc);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(104,80,58,.16),inset 0 0 0 1px rgba(104,80,58,.16),0 8px 14px -12px rgba(70,52,36,.4)}
.zahlart input:checked+span{background:linear-gradient(180deg,#fff,#f6eee5);box-shadow:inset 0 0 0 1.5px var(--tinte),inset 0 1px 0 #fff,0 12px 18px -12px rgba(70,52,36,.5)}
@media (max-width:860px){.erkunder__nav nav button{box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -2px 0 rgba(0,0,0,.45);background:linear-gradient(180deg,#343a56,#1e2236 50%,#11141f)}
  .erkunder__nav nav button.an{background:linear-gradient(180deg,#f8eee4,#ebdbce 50%,#d6c2b1);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -2px 0 rgba(104,80,58,.34)}}

/* ================= Die Karte, groß: Essen · Drinks · Wein ================= */
.hauszeile{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px 30px;padding:22px 0;margin-bottom:clamp(44px,6vw,96px);border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14)}
.hauszeile b{display:block;font-family:var(--serif);font-weight:700;font-size:clamp(1.5rem,2.2vw,2.1rem);letter-spacing:.03em;text-transform:uppercase;color:var(--creme)}
.hauszeile span{display:block;margin-top:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--taupe)}
.gruppe{margin-bottom:clamp(70px,9vw,150px)}
.gruppe__kopf{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px 40px;margin-bottom:clamp(22px,3vw,44px)}
.gruppe__kopf .d2{font-size:clamp(3.4rem,8.6vw,9rem);line-height:.96;margin:0}
.gruppe__kopf .lauf{max-width:38ch;color:rgba(255,255,255,.66)}
.unterreiter{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:10px}
.unterreiter button{height:50px;padding:0 22px;border-radius:999px;font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:#fff;
  background:linear-gradient(180deg,#343a56,#1e2236 50%,#11141f);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -2px 0 rgba(0,0,0,.45),0 10px 16px -10px rgba(0,0,0,.7);
  transition:transform .45s var(--e2),box-shadow .45s var(--e2)}
.unterreiter button:hover{transform:translateY(-1px)}
.unterreiter button.an{color:var(--tinte);background:linear-gradient(180deg,#f8eee4,#ebdbce 50%,#d6c2b1);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -2px 0 rgba(104,80,58,.34),0 10px 16px -10px rgba(0,0,0,.7)}
.karten .gang__kopf{margin-bottom:20px}
.karten .gang__kopf h4{display:flex;align-items:baseline;gap:14px;color:var(--creme)}
.karten .gang__kopf h4 span{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.18em;color:var(--taupe)}
.karten .gangband{margin:0 calc(-1*var(--rand));padding:4px var(--rand) 26px;gap:clamp(14px,1.5vw,22px)}
.karten .gangband>.gk{width:clamp(290px,25.4vw,396px)}
.karten .gk{border-radius:30px;padding:10px 10px 24px}
.karten .gk__b{border-radius:22px;aspect-ratio:1/.84}
.karten .gk__n h4{font-size:1.36rem}
.karten .gk p{font-size:1rem;min-height:3em}
.karten .gk__p{font-size:1.5rem}
.karten .laufbalken{width:min(320px,46%)}
.weinspalten{columns:3;column-gap:clamp(28px,4vw,72px)}
.weingruppe{break-inside:avoid;margin-bottom:clamp(34px,4vw,56px)}
.weingruppe h4{font-family:var(--serif);font-weight:600;font-size:1.25rem;letter-spacing:.06em;text-transform:uppercase;color:var(--creme);padding-bottom:12px;border-bottom:1px solid rgba(235,219,206,.4)}
.weingruppe li{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.1)}
.weingruppe b{display:block;font-weight:500;font-size:1rem;line-height:1.35;color:#fff}
.weingruppe small{display:block;margin-top:2px;font-size:.86rem;line-height:1.4;color:rgba(255,255,255,.56)}
.weingruppe i{font-style:normal;font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;white-space:nowrap;color:var(--creme)}
.gruppe--wein{margin-bottom:clamp(40px,5vw,80px)}
@media (max-width:1060px){.weinspalten{columns:2}}
@media (max-width:860px){
  .gruppe__kopf{flex-direction:column;align-items:flex-start}
  .unterreiter{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1*var(--rand));padding:0 var(--rand) 14px;max-width:100vw}
  .unterreiter::-webkit-scrollbar{display:none}
  .unterreiter button{flex:none;height:44px;padding:0 18px}
  .karten .gangband>.gk{width:78vw}
  .weinspalten{columns:1}
}

/* ---------- Schmaler Ausklang der Unterseiten ---------- */
.ausklang{background:var(--nacht);padding:clamp(44px,5vw,72px) var(--rand);border-top:1px solid rgba(255,255,255,.1)}
.ausklang .in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:22px 40px}
.ausklang p{font-size:clamp(1.1rem,1.5vw,1.4rem);line-height:1.35;letter-spacing:-.01em;color:rgba(255,255,255,.86);max-width:36ch}
.fuss{border-top:0}
.ausklang+.fuss{border-top:1px solid rgba(255,255,255,.1)}
.hauszeile{margin-bottom:clamp(34px,4.4vw,70px)}

/* ---------- Laufband der Firmenzeichen: einfarbig, ein Zug, nur transform */
.pressband{overflow:hidden}
.pressband__kopf{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,5fr) auto;gap:20px clamp(26px,4vw,80px);align-items:end}
.pressband__kopf .lauf{max-width:52ch}
.laufband{--e:clamp(25px,2.7vw,42px);overflow:hidden;margin:clamp(40px,5vw,76px) calc(var(--rand)*-1) 0;padding:clamp(22px,2.6vw,38px) 0;border-block:1px solid rgba(11,12,16,.14);color:var(--tinte)}
.laufband--ab{margin-top:clamp(50px,6vw,96px)}
.laufband--hell{color:#fff;border-color:rgba(255,255,255,.14)}
.laufband__zug{display:flex;width:max-content;align-items:center;animation:lauf var(--t,50s) linear infinite;animation-play-state:paused}
.laufband.laeuft .laufband__zug{animation-play-state:running;will-change:transform}
.laufband--zurueck .laufband__zug{animation-direction:reverse}
.laufband li{flex:none;display:flex;align-items:center;justify-content:center;height:calc(var(--e)*1.5);padding-right:clamp(52px,6.4vw,112px)}
.firma{display:block;width:calc(var(--e)*var(--w));height:calc(var(--e)*var(--h));background:currentColor;opacity:.84;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
@keyframes lauf{to{transform:translate3d(-50%,0,0)}}
@media (hover:hover){.laufband:hover .laufband__zug{animation-play-state:paused}}
@media (max-width:860px){
  .pressband__kopf{grid-template-columns:1fr;align-items:start}
}
@media (prefers-reduced-motion:reduce){
  .laufband__zug{animation:none!important;flex-wrap:wrap;width:auto;justify-content:center;row-gap:22px}
  .laufband li[aria-hidden]{display:none}
}

/* ---------- Fuß: Marke groß, Brett in der Ecke, Häuser als Karten mit Bild, Punkte mit Linie und Pfeil */
.fuss{position:relative;overflow:hidden;padding-top:clamp(64px,7vw,112px)}
.fuss__kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:30px}
.fuss__marke img{height:clamp(20px,2vw,28px);width:auto}
.fuss__marke p{margin-top:clamp(22px,2.6vw,38px);max-width:none;font-family:var(--serif);font-style:normal;font-weight:700;text-transform:uppercase;font-size:clamp(2.1rem,5vw,4.9rem);line-height:.98;letter-spacing:.005em;color:#fff}
.fuss__marke p em{font-style:normal;color:var(--taupe)}
.fuss__netz{display:flex;gap:10px;margin-top:clamp(24px,2.6vw,38px)}
.rund{--o:#2b2e3f;--u:#151722;position:relative;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;color:var(--creme);background:linear-gradient(180deg,var(--o),var(--u));box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -1px 0 rgba(0,0,0,.5),0 3px 0 #0a0b11,0 12px 22px -10px rgba(0,0,0,.8);transition:transform .35s var(--e2),box-shadow .35s,color .3s}
.rund svg{width:21px;height:21px}
.rund:hover{color:#fff;transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.5),0 5px 0 #0a0b11,0 18px 26px -12px rgba(0,0,0,.85)}
.rund:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(0,0,0,.5),0 1px 0 #0a0b11,0 6px 12px -8px rgba(0,0,0,.8)}
.fuss__brett{flex:none;width:clamp(128px,17vw,264px);aspect-ratio:2736/2480;background:var(--creme);opacity:.92}

.fuss__haeuser{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.5vw,24px);margin-top:clamp(44px,5vw,80px);padding-top:0;border-top:0}
.fh{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);background:linear-gradient(180deg,#232638,#1a1c29);border-radius:18px;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 22px 40px -28px rgba(0,0,0,.9)}
.fh__bild{position:relative;display:block;overflow:hidden;min-height:190px}
.fh__bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--e2)}
.fh:hover .fh__bild img{transform:scale(1.06)}
.fh__t{display:flex;flex-direction:column;padding:clamp(18px,1.6vw,26px);min-width:0}
.fh h3{font-family:var(--serif);font-weight:700;text-transform:uppercase;font-size:clamp(1.15rem,1.35vw,1.5rem);line-height:1.05;letter-spacing:.01em;color:#fff}
.fh address{margin-top:10px;font-size:.9rem;line-height:1.5;color:rgba(255,255,255,.7)}
.fh__zeit{margin-top:10px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;line-height:1.6;color:var(--taupe)}
.fh__kn{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:auto;padding-top:18px}

.fuss__oben{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.2fr);gap:clamp(26px,3.4vw,64px);margin-top:clamp(46px,5vw,84px)}
.fuss h4{display:flex;align-items:center;gap:14px;margin-bottom:6px;color:var(--taupe)}
.fuss h4::after{content:'';flex:1;height:1px;background:rgba(255,255,255,.12)}
.fuss__sp li{border-bottom:1px solid rgba(255,255,255,.07)}
.fl-link{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;font-size:.97rem;line-height:1.3;color:rgba(255,255,255,.78);transition:color .3s}
.fl-link i{flex:none;display:block;opacity:0;transform:translateX(-8px);transition:opacity .35s,transform .5s var(--e2)}
.fl-link i svg{display:block;width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.2}
.fl-link:hover,.fl-link:focus-visible{color:#fff}
.fl-link:hover i,.fl-link:focus-visible i{opacity:1;transform:none}
.fh .fl-link{display:inline-flex;justify-content:flex-start;gap:9px;padding:6px 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.fh .fl-link i{opacity:.7;transform:none}
.fh .fl-link:hover i{transform:translate(3px,-3px)}
.fuss__tisch p{margin:14px 0 22px;font-size:.97rem;line-height:1.5;color:rgba(255,255,255,.72);max-width:26ch}
.fuss__unten{align-items:center}
.fuss__unten .studie{color:rgba(255,255,255,.4)}

@media (max-width:1180px){
  .fuss__haeuser{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fh{grid-template-columns:1fr}
  .fh__bild{min-height:0;aspect-ratio:16/10}
}
@media (max-width:860px){
  .fuss__haeuser{grid-template-columns:1fr}
  .fh{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}
  .fh__bild{aspect-ratio:auto;min-height:170px}
  .fuss__oben{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fuss__tisch{grid-column:1/-1}
  .fuss__tisch p{max-width:none}
}
@media (max-width:560px){
  .fuss__kopf{align-items:flex-start}
  .fuss__brett{width:104px;margin:-6px 0 0}
  .fuss__marke p{font-size:clamp(1.9rem,9.4vw,2.6rem)}
  .fh__kn .kn{width:100%}
}
.pressband{padding-bottom:clamp(46px,5vw,84px)}

.fuss__ecke{flex:none;display:flex;flex-direction:column;align-items:center;gap:clamp(12px,1.3vw,20px);transform:rotate(4deg);transform-origin:60% 60%;margin:0 clamp(0px,1.6vw,26px) 4px 0}
.fuss__ecke small{font-family:var(--mono);font-size:clamp(8.5px,.78vw,11px);letter-spacing:.3em;text-transform:uppercase;color:var(--taupe);white-space:nowrap}
@media (max-width:560px){.fuss__ecke{margin:-4px 0 0}.fuss__ecke small{font-size:7.5px;letter-spacing:.22em}}

/* ---------- Hero: Kursblatt in der Ecke (Hamburg → Sankt Peter-Ording), gleiche Zeichnung wie der Kompass */
.kurs{display:block;width:clamp(330px,31vw,450px);max-width:100%;color:#fff}
.kurs .ort{font-family:var(--serif);font-weight:700;font-size:17px;letter-spacing:.035em}
.kurs text{font-size:9.8px}
.kurs .km{opacity:.62;font-size:9px}
.kurs .n{font-size:9px;opacity:.7}
.kurs .ring{opacity:.42}
.kurs .strahl{stroke-width:1}
.hero__seite{gap:16px}
@media (max-width:860px){.kurs{width:min(100%,380px);margin-left:-6px}}

/* ---------- Bühne: je Restaurant ein großes Zeichen leise hinter dem Text */
.haus__zeichen{position:absolute;left:50%;top:50%;z-index:-1;width:min(92%,620px);height:min(84%,620px);object-fit:contain;transform:translate(-50%,-50%);opacity:.035;pointer-events:none;user-select:none}
@media (max-width:860px){
  .haus{position:relative;isolation:isolate}
  .haus__zeichen{top:auto;bottom:6%;width:86%;height:46%;transform:translateX(-50%);opacity:.035}
}

/* ---------- Fenster: kleiner, das Bild steht dahinter still, die Seite zieht darüber hinweg (Ausschnitt über clip-path, kein Skript) */
.bruch{min-height:min(58vh,560px);clip-path:inset(0);padding-top:clamp(60px,7vw,110px)}
.bruch>img{position:fixed;left:0;top:0;right:auto;bottom:auto;width:100%;height:100vh;height:100lvh;object-fit:cover}
/* Fenster-Bild erst, wenn der Abschnitt naht (bilder.js setzt .nah): es steht fest über dem Schirm und würde sonst beim Öffnen der Seite gleich mitgeladen, neben dem Kopfbild (14.10.2026) */
.bruch:not(.nah)>img{display:none}
.bruch .d2{text-shadow:0 2px 26px rgba(8,9,16,.55)}
@media (max-width:860px){.bruch{min-height:54svh}}

/* ---------- Fenster: auch der Satz steht hinter dem Fenster, Bild und Satz bleiben zusammen */
.bruch .in{position:fixed;left:0;right:0;top:50%;width:auto;max-width:calc(var(--max) + 2*var(--rand));padding:0 var(--rand);transform:translateY(-50%)}
.bruch{padding-top:0;padding-bottom:0}

/* ---------- Hero: Michelin-Jahre unten rechts unter dem Kursblatt, Sternform als rote Linie, Mitte offen */
.hero__michelin{display:flex;justify-content:flex-end;gap:clamp(18px,1.8vw,28px);width:clamp(330px,31vw,450px);max-width:100%;padding-top:16px;border-top:1px solid rgba(255,255,255,.3)}
.hero__michelin span{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:#fff}
.hero__michelin svg{display:block;width:clamp(26px,2.1vw,32px);height:auto;overflow:visible}
.hero__michelin path{fill:none;stroke:#e2122f;stroke-width:11;stroke-linejoin:round}
@media (max-width:860px){
  .hero__michelin{justify-content:flex-start;width:min(100%,380px);gap:18px}
  .hero__michelin svg{width:24px}
  .hero__michelin span{font-size:9.5px}
}

/* ---------- Seitenköpfe: ein echtes Foto liegt leise im Dunkel, damit die Fläche nicht leer ist (Abdunklung steckt im Bild) */
.sk{position:relative;overflow:hidden}
.sk__hg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:100% 50%;pointer-events:none;user-select:none}
.sk>.in{position:relative}
@media (max-width:860px){.sk__hg{object-position:58% 50%}}

/* ---------- Bühne: je Restaurant fünf Abzüge. Vier fliegen an die Ecken, der fünfte landet zuletzt in der Mitte obenauf (nur transform und opacity) */
.polas{position:absolute;inset:0;opacity:0;transition:opacity .75s cubic-bezier(.4,0,.6,1);pointer-events:none}
.polas.an{opacity:1;transition:opacity 1s cubic-bezier(.4,0,.2,1) .2s}
.pola{position:absolute;left:50%;top:50%;width:min(39%,36vh);margin:0;padding:2.1% 2.1% 0;background:linear-gradient(180deg,#f7f3ec,#ece6db);box-shadow:0 30px 50px -24px rgba(0,0,0,.95),0 2px 0 rgba(255,255,255,.5) inset,0 0 0 1px rgba(0,0,0,.1);
  translate:-50% -50%;opacity:0;transform:translate3d(calc(var(--x)*.6),95%,0) rotate(calc(var(--r)*2.6)) scale(calc(var(--s,1)*.86));transition:opacity .6s var(--e2),transform 1.3s cubic-bezier(.16,1,.3,1);will-change:transform}
.pola img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;outline:1px solid rgba(0,0,0,.14);outline-offset:-1px}
.pola figcaption{display:flex;align-items:center;justify-content:space-between;gap:10px;height:clamp(34px,3.5vw,52px);font-family:var(--mono);font-size:clamp(9px,.76vw,11px);letter-spacing:.15em;text-transform:uppercase;color:#2a2c36}
.pola figcaption .stempel{flex:none;width:clamp(20px,1.9vw,28px);height:clamp(20px,1.9vw,28px);opacity:.82}
.pola.da{opacity:1;transform:translate3d(var(--x),var(--y),0) rotate(var(--r)) scale(var(--s,1))}
.polas:not(.an) .pola{transition-duration:0s;transition-delay:.78s}
/* Klebestreifen an zwei Abzügen */
.p1::before,.p2::before{content:'';position:absolute;left:50%;top:-11px;width:34%;height:22px;margin-left:-17%;background:#cbbda3;box-shadow:0 1px 0 rgba(255,255,255,.35) inset;transform:rotate(-4deg)}
.p2::before{transform:rotate(5deg);background:#bfb39d;margin-left:-4%}
.p1{--x:-74%;--y:-60%;--r:-8deg;--s:.94;z-index:1}
.p2{--x:72%;--y:-57%;--r:6deg;--s:1;z-index:2}
.p3{--x:-66%;--y:58%;--r:4deg;--s:1.02;z-index:3}
.p4{--x:76%;--y:60%;--r:-7deg;--s:.94;z-index:4}
.p5{--x:2%;--y:0%;--r:-2deg;--s:1.1;z-index:5;transition:opacity .5s var(--e2),transform 1.25s cubic-bezier(.2,1.25,.3,1)}
.buehne__takt{display:none}
.polas--m{display:none}
@media (max-width:860px){
  .polas--m{display:block;position:relative;inset:auto;height:118vw;max-height:540px;margin:6px 0 30px;opacity:1}
  .polas--m .pola{width:40%}
  .polas--m .pola figcaption{height:32px;font-size:7.5px;letter-spacing:.08em}
  .polas--m .pola figcaption .stempel{width:16px;height:16px}
  .polas--m .p1{--x:-62%;--y:-56%}.polas--m .p2{--x:60%;--y:-50%}.polas--m .p3{--x:-58%;--y:54%}.polas--m .p4{--x:62%;--y:58%}
  .polas--m .p1::before,.polas--m .p2::before{top:-7px;height:14px}
  .polas--m.an .pola{opacity:1;transform:translate3d(var(--x),var(--y),0) rotate(var(--r)) scale(var(--s,1));transition-delay:calc(var(--k)*.15s)}
  .polas--m:not(.an) .pola{transition-duration:0s;transition-delay:0s}
}
@media (prefers-reduced-motion:reduce){.pola{opacity:1!important;transform:translate3d(var(--x),var(--y),0) rotate(var(--r)) scale(var(--s,1))!important}}
.buehne__bilder .pola img{position:static;inset:auto;z-index:auto;opacity:1;transition:none;will-change:auto}

/* ---------- Karte: Knöpfe des Hauses stehen am Ende, oben bleibt nur die Wahl des Restaurants */
.hausfuss{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:18px 30px;margin-top:clamp(40px,5vw,80px);padding-top:24px;border-top:1px solid rgba(255,255,255,.14)}
.hausfuss>span{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;line-height:1.7;text-transform:uppercase;color:var(--taupe)}
.gruppe--erste{margin-top:clamp(10px,2vw,30px)}
/* ---------- Knopf mittig unter einer Reihe */
.kn-mitte{display:flex;justify-content:center;margin-top:clamp(40px,5vw,72px)}

/* ---------- Bühne: jedes Restaurant legt seine fünf Abzüge anders aus (nur am Rechner; am Handy bleibt die ruhige Grundform) */
@media (min-width:861px){
  /* Crudo: oben drei kleinere in einer lockeren Reihe, unten zwei große */
  .polas--b .p1{--x:-84%;--y:-58%;--r:-7deg;--s:.82}
  .polas--b .p2{--x:0%;--y:-66%;--r:3deg;--s:.82}
  .polas--b .p3{--x:84%;--y:-56%;--r:8deg;--s:.82}
  .polas--b .p4{--x:-50%;--y:50%;--r:5deg;--s:1.12}
  .polas--b .p5{--x:52%;--y:46%;--r:-4deg;--s:1.2}
  /* am Meer: das Haus ganz groß in der Mitte (echte Größe, nicht hochgezogen, damit es scharf bleibt), vier kleine Abzüge liegen locker an seinen Rändern obenauf */
  .polas--c .p5{--x:-1%;--y:0%;--r:-2deg;--s:1;width:min(66%,62vh);z-index:1}
  .polas--c .p1{--x:-86%;--y:-65%;--r:-8deg;--s:.62;z-index:2}
  .polas--c .p2{--x:88%;--y:-53%;--r:7deg;--s:.62;z-index:3}
  .polas--c .p3{--x:-90%;--y:12%;--r:5deg;--s:.62;z-index:4}
  .polas--c .p4{--x:90%;--y:22%;--r:-6deg;--s:.62;z-index:5}
  .polas--c.an .p5.da{transition-delay:.05s!important}
  .polas--c .p5 img{aspect-ratio:1/.92}
}

/* ---------- Bühne: Adresse, Öffnungszeiten und Art als kräftige Dreier-Zeile statt kleiner Tabelle */
.haus .liste{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:26px;border-top:1px solid rgba(255,255,255,.34);border-bottom:1px solid rgba(255,255,255,.34)}
.haus .liste div{display:block;padding:18px 16px 20px 0;border-bottom:0;font:inherit;letter-spacing:0;text-transform:none}
.haus .liste div+div{padding-left:18px;border-left:1px solid rgba(255,255,255,.16)}
.haus .liste dt{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--creme);opacity:.75}
.haus .liste dd{margin-top:10px;font-family:var(--serif);font-weight:700;text-transform:uppercase;font-size:clamp(1.02rem,1.3vw,1.3rem);line-height:1.18;letter-spacing:.022em;color:#fff}
@media (max-width:860px){
  .haus .liste{grid-template-columns:1fr}
  .haus .liste div{padding:14px 0 15px}
  .haus .liste div+div{padding-left:0;border-left:0;border-top:1px solid rgba(255,255,255,.16)}
  .haus .liste dd{font-size:1.15rem;margin-top:6px}
}

/* ---------- Bänder: die erste Karte hält Abstand zum Rand, auch nach dem Einrasten */
.band{scroll-padding-inline:var(--rand)}
/* ---------- Karte: Getränke-Karten etwas kleiner als die Gerichte */
.karten .gruppe--erste .gangband>.gk{width:clamp(230px,19.5vw,304px)}
.karten .gruppe--erste .gk{border-radius:26px;padding:8px 8px 20px}
@media (max-width:860px){.karten .gruppe--erste .gangband>.gk{width:62vw}}
/* ---------- Karte: Restaurant-Wahl rechts neben der Überschrift, drei kleine Karten mit Foto (wie die Häuser im Fuß), das offene Haus ist hell */
.karten .kopfzeile--wahl{grid-template-columns:auto minmax(0,840px);justify-content:space-between;gap:clamp(30px,5vw,90px)}
.hauswahl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.1vw,16px);margin-bottom:0}
.karten .tab.tab--haus{display:flex;flex-direction:column;height:auto;padding:0;border-radius:18px;overflow:hidden;text-align:left;font-family:var(--sans);font-size:1rem;letter-spacing:0;text-transform:none;color:#fff;
  background:linear-gradient(180deg,#232638,#1a1c29);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 3px 0 #0a0b11,0 22px 36px -26px rgba(0,0,0,.95);transition:transform .35s var(--e2),box-shadow .35s}
.karten .tab.tab--haus:hover{transform:translateY(-3px)}
.karten .tab.tab--haus:active{transform:translateY(1px)}
.tab__bild{position:relative;display:block;width:100%;aspect-ratio:16/12.4;overflow:hidden}
.tab__bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tab__t{display:flex;flex-direction:column;flex:1;min-width:0;padding:19px 17px 20px}
.tab__t b{font-family:var(--serif);font-weight:700;text-transform:uppercase;font-size:clamp(1rem,1.2vw,1.3rem);line-height:1.08;letter-spacing:.012em}
.tab__zeit{margin-top:7px;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;line-height:1.5;text-transform:uppercase;color:var(--taupe)}
.tab__zu{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-top:auto;padding-top:22px;font-family:var(--mono);font-size:10px;letter-spacing:.15em;text-transform:uppercase}
.tab__zu i{font-style:normal}
.tab__zu svg{flex:none;width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.3;transition:transform .5s var(--e2)}
.tab__an{display:none}
.karten .tab.tab--haus:hover .tab__zu svg{transform:translate(3px,-3px)}
.karten .tab.tab--haus[aria-selected="true"]{color:var(--tinte);background:linear-gradient(180deg,#f8eee4,#ebdbce 55%,#dccab9);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 3px 0 #9c8b7c,0 22px 36px -26px rgba(0,0,0,.95);transform:none}
.tab--haus[aria-selected="true"] .tab__zeit{color:#6f6757}
.tab--haus[aria-selected="true"] .tab__aus{display:none}
.tab--haus[aria-selected="true"] .tab__an{display:inline}
.tab--haus[aria-selected="true"] .tab__zu svg{transform:rotate(90deg)}
@media (max-width:1100px){
  .karten .kopfzeile--wahl{grid-template-columns:1fr}
}
@media (max-width:860px){
  .hauswahl{grid-template-columns:1fr;width:100%}
  .karten .tab.tab--haus{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);min-height:112px}
  .tab__bild{aspect-ratio:auto;height:100%}
}

/* ---------- Titel mit Kommas am Zeilenende: etwas mehr Zeilenabstand, damit das Komma nicht in die nächste Zeile ragt */
.d1--luft .z+.z{margin-top:-.08em}

/* ---------- Tisch-Fenster: groß, mit drei Bildkarten, feinem Innenrahmen und hellem Fußstreifen */
dialog.tisch{width:min(1120px,calc(100vw - 28px));max-height:calc(100svh - 28px);overflow:auto;scrollbar-width:none}
.tisch__k{position:relative;padding:clamp(34px,4.6vw,64px) clamp(18px,3.4vw,50px) 0;border-radius:28px;overflow:hidden;background:linear-gradient(180deg,#262a3f,#191b29 46%,#141622);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 0 0 1px rgba(255,255,255,.08),0 4px 0 #090a10}
.tisch__k::before{content:'';position:absolute;inset:10px;border:1px solid rgba(235,219,206,.2);border-radius:20px;pointer-events:none}
.tisch__k>.zu{position:absolute;right:22px;top:22px;z-index:2}
.tisch__kopf{display:block;text-align:center}
.tisch__kopf .stempel{width:58px;height:58px;margin:0 auto 18px;color:var(--creme)}
.tisch__kopf h2{font-size:clamp(2.2rem,5vw,4.4rem);line-height:1}
.tisch__kopf p{margin:14px auto 0;max-width:40ch;font-size:1rem;line-height:1.5;color:rgba(255,255,255,.66)}
.tisch__kopf{margin-bottom:clamp(28px,3.4vw,46px)}  /* Luft zwischen Überschrift und Feldern */
.tisch__wahl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.3vw,18px);margin-top:clamp(26px,3.2vw,44px);border-top:0}
.tisch__wahl a.sitz{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;border-bottom:0;border-radius:20px;overflow:hidden;background:linear-gradient(180deg,#2b2f45,#1c1e2c);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 3px 0 #0a0b11,0 26px 40px -26px rgba(0,0,0,.95);transition:transform .45s var(--e2)}
.tisch__wahl a.sitz:hover{transform:translateY(-5px)}
.sitz__bild{position:relative;display:block;width:100%;aspect-ratio:4/3.2;overflow:hidden;margin:0}
.tisch__wahl .sitz__bild img{position:absolute;inset:0;width:100%;height:100%;border-radius:0;object-fit:cover;transition:transform 1.2s var(--e2)}
.tisch__wahl a.sitz:hover .sitz__bild img{transform:scale(1.06)}
.sitz__bild em{position:absolute;left:14px;top:12px;font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;color:#fff;padding:5px 9px;border-radius:999px;background:#141622}
.tisch__wahl a>span.sitz__t{display:flex;flex-direction:column;flex:1;padding:18px 18px 18px;margin:0}
.tisch__wahl .sitz__t b{font-size:clamp(1.2rem,1.7vw,1.6rem);line-height:1.05;letter-spacing:.02em;font-weight:700}
.tisch__wahl .sitz__adr{display:block;margin-top:9px;font-family:var(--sans);font-size:.9rem;line-height:1.45;letter-spacing:0;text-transform:none;color:rgba(255,255,255,.72)}
.tisch__wahl .sitz__zeit{display:block;margin-top:9px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;line-height:1.6;text-transform:uppercase;color:var(--taupe)}
.tisch__wahl .sitz__kn{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;height:50px;padding:0 6px 0 20px;border-radius:999px;font-family:var(--mono);font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--tinte);
  background:linear-gradient(180deg,#f8eee4,#ebdbce 50%,#d6c2b1);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -2px 0 rgba(104,80,58,.34),0 3px 0 #9c8b7c}
.tisch__wahl .sitz__zeit+.sitz__kn{margin-top:18px}
.tisch__wahl .sitz__t{justify-content:flex-start}
.tisch__wahl .sitz__kn i{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(180deg,#2d3250,#151929 50%,#080a12);box-shadow:inset 0 1px 0 rgba(255,255,255,.26);transition:transform .5s var(--e2)}
.tisch__wahl a.sitz:hover .sitz__kn i{background:linear-gradient(180deg,#2d3250,#151929 50%,#080a12);color:#fff;transform:translate(2px,-2px)}
.tisch__fuss{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;margin:clamp(22px,2.8vw,36px) calc(-1*clamp(18px,3.4vw,50px)) 0;padding:18px clamp(26px,3.8vw,58px) 20px;font-size:.95rem;color:var(--tinte);background:linear-gradient(180deg,#f4e8dc,#e2cfbf)}
.tisch__fuss span{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}
.tisch__fuss a{color:var(--tinte);font-family:var(--serif);font-weight:700;font-size:1.15rem;letter-spacing:.03em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid rgba(11,12,16,.4)}
@media (max-width:860px){
  .tisch__k{padding-top:44px}
  .tisch__kopf .stempel{width:44px;height:44px;margin-bottom:12px}
  .tisch__kopf p{display:none}
  .tisch__wahl{grid-template-columns:1fr}
  .tisch__wahl a.sitz{flex-direction:row}
  .sitz__bild{flex:none;width:36%;aspect-ratio:auto}
  .tisch__wahl a>span.sitz__t{padding:14px}
  .tisch__wahl .sitz__adr{display:none}
  .tisch__wahl .sitz__kn{height:44px;font-size:9.5px;letter-spacing:.12em;padding-left:14px}
  .tisch__wahl .sitz__kn i{width:32px;height:32px}
  .tisch__wahl .sitz__zeit+.sitz__kn{margin-top:12px}
}

/* ---------- Dreiklang: die drei Bilder kommen früh und eins nach dem anderen von unten */
[data-r="schweb"]{transition:opacity .9s var(--e1),transform 1.35s cubic-bezier(.19,1,.22,1);transition-delay:calc(var(--i,0)*240ms)}
[data-r="schweb"] .rahmen__k img{transition:transform 1.7s cubic-bezier(.19,1,.22,1);transition-delay:calc(var(--i,0)*240ms)}

/* ---------- Fuß: Wortzeile unter dem Brett in einem leichten Bogen (Reisen zieht links hoch, Kochen rechts hoch), ohne Banner */
.fuss__ecke{gap:clamp(4px,.6vw,10px)}
.fuss__band{display:block;width:clamp(128px,17vw,264px);height:auto;overflow:visible}
@media (max-width:560px){.fuss__band{width:104px}.fuss__band text{font-size:13.5px}}
.fuss__band text{font-family:var(--mono);font-size:12.5px;letter-spacing:.3em;text-transform:uppercase;fill:var(--taupe)}

/* ---------- Fuß: Linkspalten mit Nummer, großer Schrift und runder Pfeil-Taste */
.fuss h4{font-family:var(--serif);font-weight:700;font-size:1.25rem;letter-spacing:.06em;text-transform:uppercase;color:var(--creme);margin-bottom:10px}
.fuss h4::after{background:rgba(235,219,206,.26)}
.fuss__sp li{border-bottom:1px solid rgba(255,255,255,.09)}
.fuss__sp .fl-link{display:grid;grid-template-columns:30px minmax(0,1fr) 34px;align-items:center;gap:8px;padding:13px 0;font-size:1.02rem}
.fuss__sp .fl-link em{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--taupe)}
.fuss__sp .fl-link span{display:block;min-width:0;overflow-wrap:anywhere;transition:transform .5s var(--e2)}
.fuss__sp .fl-link i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;opacity:1;transform:none;color:rgba(255,255,255,.7);background:linear-gradient(180deg,#2b2e3f,#161824);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 2px 0 #0a0b11;transition:transform .45s var(--e2),color .3s}
.fuss__sp .fl-link i svg{width:11px;height:11px}
.fuss__sp .fl-link:hover span,.fuss__sp .fl-link:focus-visible span{transform:translateX(6px)}
.fuss__sp .fl-link:hover i,.fuss__sp .fl-link:focus-visible i{transform:translate(2px,-2px);color:var(--tinte);background:linear-gradient(180deg,#f8eee4,#ebdbce 50%,#d6c2b1);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 2px 0 #9c8b7c}
@media (max-width:560px){.fuss__sp .fl-link{grid-template-columns:minmax(0,1fr) 30px;font-size:.95rem}.fuss__sp .fl-link em{display:none}.fuss__sp .fl-link span{overflow-wrap:break-word}.fuss__sp .fl-link i{width:30px;height:30px}.fuss__oben .fuss__sp:nth-child(3){grid-column:1/-1}}

/* ---------- Newsletter */
.nl{display:grid;gap:16px;padding:clamp(24px,3.2vw,44px);border-radius:26px;background:#fff;box-shadow:inset 0 0 0 1px rgba(11,12,16,.08),0 3px 0 rgba(11,12,16,.08),0 30px 50px -34px rgba(60,44,30,.5)}
.nl .kn{justify-self:start;margin-top:6px}
.nl__fehler{font-size:.92rem;color:#b3202a}
.nl--danke{justify-items:start}
.nl--danke .stempel{width:64px;height:64px;color:var(--tinte)}
.nl[hidden]{display:none}
.nl__liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:10px}
.nl__p{padding:18px 18px 20px;border-radius:18px;background:var(--creme)}
.nl__p b{display:block;font-family:var(--mono);font-weight:400;font-size:10.5px;letter-spacing:.2em;color:#6f6757}
.nl__p h3{margin-top:26px;font-family:var(--serif);font-weight:700;font-size:1.3rem;letter-spacing:.03em;text-transform:uppercase}

/* ---------- Rechtstexte */
.rechtliste{list-style:none;border-top:1px solid rgba(11,12,16,.16)}
.rechtliste li{display:grid;grid-template-columns:54px minmax(0,1fr);align-items:baseline;gap:10px;padding:17px 0;border-bottom:1px solid rgba(11,12,16,.16)}
.rechtliste b{font-family:var(--mono);font-weight:400;font-size:10.5px;letter-spacing:.2em;color:#6f6757}
.rechtliste span{font-family:var(--serif);font-weight:700;font-size:clamp(1.1rem,1.5vw,1.45rem);line-height:1.15;letter-spacing:.02em;text-transform:uppercase}
.rechtsnav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.rechtsnav a{display:flex;align-items:center;justify-content:space-between;gap:10px;height:62px;padding:0 10px 0 22px;border-radius:999px;font-family:var(--mono);font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:var(--tinte);background:linear-gradient(180deg,#fff,#f3ece4);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(104,80,58,.2),0 3px 0 rgba(104,80,58,.25);transition:transform .35s var(--e2)}
.rechtsnav a:hover{transform:translateY(-2px)}
.rechtsnav a i{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;color:#fff;background:linear-gradient(180deg,#2d3250,#151929 50%,#080a12)}
.rechtsnav a i svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.3}
.rechtsnav a[aria-current="page"]{color:#fff;background:linear-gradient(180deg,#2d3250,#151929 50%,#080a12);box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 3px 0 #06070c}
.rechtsnav a[aria-current="page"] i{color:var(--tinte);background:linear-gradient(180deg,#f8eee4,#ebdbce 50%,#d6c2b1)}
@media (max-width:860px){.rechtsnav{grid-template-columns:1fr 1fr}.nl__liste{grid-template-columns:1fr 1fr}.rechtliste{grid-column:1/-1!important}}

/* ---------- Karte: die drei Restaurant-Karten schließen oben mit der Überschrift „Such dir“ ab, die Kapitelzeile steht darüber */
@media (min-width:1101px){
  .karten .kopfzeile--wahl{align-items:start;row-gap:0}
  .karten .kopfzeile--wahl>div:first-child{display:contents}
  .karten .kopfzeile--wahl .kap{grid-column:1/-1}
  .karten .kopfzeile--wahl .hauswahl{margin-top:calc(21px + clamp(6px,.9vw,14px))}
}

/* ---------- Haus-Seiten: die drei Restaurant-Karten als Links neben der Überschrift, das eigene Haus hell */
.karten a.tab.tab--haus[aria-current="page"]{color:var(--tinte);background:linear-gradient(180deg,#f8eee4,#ebdbce 55%,#dccab9);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 3px 0 #9c8b7c,0 22px 36px -26px rgba(0,0,0,.95)}
a.tab--haus[aria-current="page"] .tab__zeit{color:#6f6757}
a.tab--haus[aria-current="page"] .tab__aus{display:none}
a.tab--haus[aria-current="page"] .tab__an{display:inline}
a.tab--haus[aria-current="page"] .tab__zu svg{transform:rotate(90deg)}
.karten__satz{max-width:62ch;margin:calc(-1*clamp(10px,2vw,30px)) 0 clamp(40px,5vw,80px);font-size:clamp(1.05rem,1.35vw,1.3rem);line-height:1.5;color:rgba(255,255,255,.8)}

/* ---------- Seitenkopf der Häuser: Angaben kräftiger, zweispaltig, Werte in der Titelschrift */
.sk__fakten{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(18px,2.4vw,40px);border-top:1px solid rgba(255,255,255,.34)}
.sk__fakten div{display:block;padding:15px 0 17px;border-bottom:1px solid rgba(255,255,255,.2);font:inherit;letter-spacing:0;text-transform:none}
.sk__fakten div:first-child{grid-column:1/-1}
.sk__fakten dt{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--creme);opacity:.78}
.sk__fakten dd{margin-top:8px;font-family:var(--serif);font-weight:700;text-transform:uppercase;font-size:clamp(1.05rem,1.35vw,1.4rem);line-height:1.16;letter-spacing:.022em;color:#fff}
@media (max-width:560px){.sk__fakten{grid-template-columns:1fr}}

/* ---------- Dreiklang: Bilder sitzen höher, weniger Leerraum über ihnen */
.drei{margin-top:clamp(30px,3.6vw,56px)}

/* ---------- Michelin-Jahre klein unter dem Text (Bühne) */
.michelin-reihe{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:20px}
.michelin-reihe span{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:#fff}
.michelin-reihe svg{display:block;width:24px;height:auto;overflow:visible}
.michelin-reihe path{fill:none;stroke:#e2122f;stroke-width:11;stroke-linejoin:round}
/* ---------- Willkommen: heller Streifen unter den drei Bildern schmaler */
#willkommen{padding-bottom:clamp(44px,5vw,84px)}
#willkommen .drei{padding-bottom:0}
/* ---------- Gründerfoto: eigene Ebene, damit es in Safari beim Scrollen nicht aufblitzt */
.paar .v-34 .rahmen__k{transform:translateZ(0);backface-visibility:hidden}
.paar .v-34 .rahmen__k img{backface-visibility:hidden}
/* ---------- Kompass: Teller in der Mitte, Strahlen kräftiger, Länder größer */
.kompass .kteller{opacity:1}
.kompass .ziel text{font-size:10.4px}
.kompass .ziel .km{font-size:9px}
.kompass .strahl{stroke-width:1.1}

/* ---------- Haus-Seiten: weniger Leerraum zwischen dem Ende der Karte und dem nächsten Abschnitt */
.karten--haus{padding-bottom:clamp(36px,4vw,64px)}
.karten--haus .karte__hin{margin-top:clamp(20px,2.4vw,34px)}
.karten--haus+.fl{padding-top:clamp(56px,6.5vw,104px)}
@media (min-width:1101px){.karten .kopfzeile--haus{grid-template-columns:minmax(0,1fr) minmax(0,700px)}}

/* ---------- Startseite, Karte: Gerichte auf einer dunklen Tafel mit feinem Innenrahmen, Hamburg pulsiert im Kompass */
.tafel{position:relative;width:100%;padding:clamp(22px,2.6vw,38px) clamp(22px,2.8vw,42px) clamp(24px,2.8vw,40px);border-radius:26px;color:#fff;background:linear-gradient(180deg,#262a3f,#191b29 50%,#141622);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 4px 0 #090a10,0 34px 54px -34px rgba(40,28,18,.7)}
.tafel::before{content:'';position:absolute;inset:9px;border:1px solid rgba(235,219,206,.2);border-radius:19px;pointer-events:none}
.tafel__kopf{display:flex;justify-content:space-between;gap:20px;padding-bottom:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe);border-bottom:1px solid rgba(255,255,255,.3)}
.tafel .gericht{border-bottom:1px solid rgba(255,255,255,.14);padding:17px 0}
.tafel .gericht b{color:#fff;font-size:clamp(1.25rem,1.6vw,1.6rem)}
.tafel .gericht small{color:rgba(255,255,255,.7);opacity:1}
.tafel .gericht>span{font-family:var(--serif);font-weight:700;font-size:clamp(1.2rem,1.5vw,1.5rem);letter-spacing:.03em;color:var(--creme)}
.tafel .kn-reihe{position:relative;margin-top:24px}
.tafel .kn--linie{--o:#343a56;--m:#1e2236;--u:#11141f;color:#fff}
.kompass .puls{vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;opacity:0;animation:puls 3.6s cubic-bezier(.2,.6,.3,1) infinite;animation-play-state:paused}
.kompass .puls--2{animation-delay:1.8s}
.laeuft .kompass .puls{animation-play-state:running}
@keyframes puls{0%{opacity:.75;transform:scale(1)}100%{opacity:0;transform:scale(7)}}

/* ---------- Haus-Seiten: der Satz steht direkt unter der Überschrift, die Karten laufen rechts über beide Zeilen */
@media (min-width:1101px){
  .karten .kopfzeile--haus h2{grid-column:1;grid-row:2}
  .karten .kopfzeile--haus .hauswahl{grid-column:2;grid-row:2}
}
/* ---------- Ausklang: Satz links, Knöpfe rechts wie zuvor, der Satz größer und kräftiger (nicht so schwer wie die Titelschrift) */
.ausklang p{max-width:30ch;font-family:var(--sans);font-weight:600;font-size:clamp(1.35rem,2.1vw,2rem);line-height:1.22;letter-spacing:-.012em;color:#fff}

/* ---------- Über uns, „Was bisher geschah“: Text links, rechts fünf echte Fotos als ruhiges Raster */
.bisher{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(34px,5vw,96px);align-items:center}
.bisher__t .gross{font-size:clamp(1.3rem,1.9vw,1.85rem);line-height:1.32;max-width:30em}
.bisher__b{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(8px,1vw,14px)}
.bb{margin:0}
.bb--1{grid-column:1/5;grid-row:1/3}
.bb--2{grid-column:5/7;grid-row:1}
.bb--3{grid-column:5/7;grid-row:2}
.bb--4{grid-column:1/4;grid-row:3}
.bb--5{grid-column:4/7;grid-row:3}
.bb--1 .rahmen,.bb--1 .rahmen__k{height:100%}
.bb--1 .rahmen__k{aspect-ratio:auto}
@media (max-width:860px){.bisher{grid-template-columns:1fr}}

/* ---------- Leiste oben kürzer: engere Schrift, kleinere Abstände, Reservieren ohne Pfeilkreis */
@media (min-width:1061px){
  .nav__insel{height:54px;gap:clamp(14px,1.7vw,26px);padding:0 7px 0 22px}
  .nav__logo img{height:13.5px}
  .nav__links{gap:clamp(11px,1.35vw,20px)}
  .nav__links a{font-size:10.5px;letter-spacing:.09em}
  .nav .kn--klein{height:40px;padding:0 18px;font-size:10px;letter-spacing:.12em}
  .nav .kn--klein i{display:none}
  .nav .korbknopf{width:40px;height:40px}
  .nav__rechts{gap:6px}
}
/* ---------- Glanzkante wie bei txtme.social: dunkle Fläche, ein feines Licht läuft um den Rand (hier in Creme und Weiß) */
@property --ga{syntax:"<angle>";initial-value:0deg;inherits:false}
@property --go{syntax:"<angle>";initial-value:0deg;inherits:false}
@property --gp{syntax:"<percentage>";initial-value:5%;inherits:false}
.glanz{isolation:isolate;position:relative;overflow:hidden;border:1px solid transparent;border-radius:999px;color:#f5eee6;
  background:linear-gradient(180deg,#1b1e30,#101220) padding-box,
    conic-gradient(from calc(var(--ga) - var(--go)),transparent,var(--creme) var(--gp),#fff calc(var(--gp)*2),var(--taupe) calc(var(--gp)*3),transparent calc(var(--gp)*4)) border-box;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 14px 26px -16px rgba(0,0,0,.8);
  transition:--go .8s cubic-bezier(.25,1,.5,1),--gp .8s cubic-bezier(.25,1,.5,1),transform .3s var(--e2)}
.glanz--laeuft{animation:ga 3.6s linear infinite}
.glanz:is(:hover,:focus-visible,:focus-within){--gp:20%;--go:95deg;animation:ga 3.6s linear infinite}
.glanz:active{transform:translateY(1px)}
@keyframes ga{to{--ga:360deg}}
@media (prefers-reduced-motion:reduce){.glanz,.glanz--laeuft{animation:none!important}}

/* ---------- Oben: Sprache links in der Ecke, Leiste in der Mitte, Reservieren rechts in der Ecke */
.sprache{position:fixed;z-index:61;top:22px;left:max(18px,calc(var(--rand)*.5));display:flex;align-items:center;gap:7px;height:46px;padding:0 17px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em}
.sprache a{padding:6px 2px;color:rgba(255,255,255,.5);transition:color .3s}
.sprache a[aria-current="true"]{color:#fff;box-shadow:inset 0 -1px 0 var(--creme)}
.sprache a:hover{color:#fff}
.sprache i{font-style:normal;opacity:.35}
.eckknopf{position:fixed;z-index:61;top:22px;right:max(18px,calc(var(--rand)*.5));display:inline-flex;align-items:center;gap:12px;height:46px;padding:0 22px 0 24px;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;cursor:pointer}
.eckknopf svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:1.4;transition:transform .5s var(--e2)}
.eckknopf:hover svg{transform:translate(3px,-3px)}
.menue__sprache a[aria-current="true"]{color:#fff}
@media (min-width:1061px){
  .nav .nav__rechts [data-tisch]{display:none}
  .nav__insel{padding-right:6px;border:1px solid rgba(235,219,206,.22);background:linear-gradient(180deg,rgba(27,30,48,.96),rgba(16,18,32,.96));box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 16px 30px -18px rgba(0,0,0,.85)}
  .nav .korbknopf{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(235,219,206,.22)}
}
@media (max-width:1060px){.sprache,.eckknopf{display:none}}
.sprache{transition:transform .5s var(--e2)}
.eckknopf{transition:--go .8s cubic-bezier(.25,1,.5,1),--gp .8s cubic-bezier(.25,1,.5,1),transform .5s var(--e2)}
.nav.weg~.sprache,.nav.weg~.eckknopf{transform:translateY(-220%)}

/* ---------- Startseite, „Kommt uns besuchen“: echtes Foto leise im Hintergrund, Newsletter-Satz kräftig wie auf den anderen Seiten */
.schluss{position:relative;overflow:hidden}
.schluss>.in{position:relative}
.schluss .sk__hg{object-position:60% 50%}
.post p{font-family:var(--sans);font-weight:600;font-size:clamp(1.35rem,2.1vw,2rem);line-height:1.22;letter-spacing:-.012em;color:#fff;max-width:30ch}

/* ---------- Leiste: Wörter größer, beim Überfahren rollen die Buchstaben nacheinander durch (nur transform) */
@media (min-width:1061px){
  .nav__links{gap:clamp(14px,1.6vw,26px)}
  .nav__links a{font-size:12px;letter-spacing:.11em;padding:10px 0}
}
.rl{display:inline-flex;overflow:hidden;line-height:1.5;vertical-align:top;white-space:pre}
.rl i{position:relative;display:block;font-style:normal;transition:transform .55s cubic-bezier(.2,.7,.25,1);transition-delay:calc(var(--k,0)*16ms)}
.rl i::after{content:attr(data-b);position:absolute;left:0;top:100%}
.nav__links .rl i::after{color:var(--creme)}
@media (hover:hover){.nav__links a:hover .rl i{transform:translateY(-100%)}}
@media (prefers-reduced-motion:reduce){.rl i{transition:none}}


/* ---------- Restaurants: in den gedrehten Reihen schließt das Bild rechts mit dem Rand ab */
@media (min-width:861px){.reihe--um .reihe__b{grid-column:7/-1}}

/* ---------- Lage eines Hauses: Bild über die volle Breite, helle Tafel liegt darüber, Angaben groß daneben */
.ort__b .rahmen__k{aspect-ratio:21/9}
.ort__unten{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(24px,4vw,70px);align-items:end;margin-top:calc(-1*clamp(70px,11vw,170px));padding:0 clamp(14px,3vw,48px)}
.ort__k{display:grid;gap:18px;justify-items:start;padding:clamp(24px,3vw,44px);border-radius:26px;color:var(--tinte);background:linear-gradient(180deg,#f8eee4,#ebdbce 60%,#e0cdbc);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 4px 0 #9c8b7c,0 34px 50px -30px rgba(0,0,0,.9)}
.ort__k .d3{font-size:clamp(1.7rem,2.9vw,2.9rem);line-height:1.02}
.ort__k .d3 em{color:#857b68}
.ort__k .lauf{color:rgba(11,12,16,.78)}
.ort__koord{display:grid;grid-template-columns:repeat(3,minmax(0,auto));justify-content:end;gap:0;padding-bottom:6px}
.ort__koord div{padding:4px clamp(14px,2vw,30px);border-left:1px solid rgba(255,255,255,.2)}
.ort__koord div:first-child{border-left:0;padding-left:0}
.ort__koord dt{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe)}
.ort__koord dd{margin-top:8px;font-family:var(--serif);font-weight:700;font-size:clamp(1.2rem,1.9vw,1.95rem);line-height:1.08;letter-spacing:.02em;text-transform:uppercase;color:#fff;white-space:nowrap}
@media (max-width:1100px){.ort__unten{grid-template-columns:1fr}.ort__koord{justify-content:start}}
@media (max-width:860px){.ort__b .rahmen__k{aspect-ratio:4/3}.ort__unten{margin-top:-46px;padding:0 10px}.ort__koord{grid-template-columns:1fr;gap:12px}.ort__koord div{border-left:0;padding:0}.ort__koord dd{white-space:normal}}

/* ---------- Hamburg, Wein: großes Bild links, rechts Satz und drei offene Weine auf heller Tafel */
.glas{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(30px,5vw,96px);align-items:center}
.glas__t .gross{font-size:clamp(1.25rem,1.8vw,1.75rem);line-height:1.34}
.glasliste{width:100%;padding:clamp(18px,2vw,28px) clamp(20px,2.4vw,34px);border-radius:22px;background:#fff;box-shadow:inset 0 0 0 1px rgba(11,12,16,.08),0 3px 0 rgba(11,12,16,.08),0 30px 44px -34px rgba(60,44,30,.5)}
.glasliste .tafel__kopf{color:#6f6757;border-bottom-color:rgba(11,12,16,.3)}
.glasliste .gericht:last-child{border-bottom:0;padding-bottom:4px}
.glasliste .gericht>span{font-family:var(--serif);font-weight:700;font-size:1.25rem;letter-spacing:.03em}
@media (max-width:860px){.glas{grid-template-columns:1fr}}

/* ---------- Startseite, Karte: Tafel ruhig und hell statt dunkelblau */
.tafel{color:var(--tinte);background:#fff;box-shadow:inset 0 0 0 1px rgba(11,12,16,.08),0 3px 0 rgba(11,12,16,.08),0 30px 44px -34px rgba(60,44,30,.45)}
.tafel::before{content:none}
.tafel__kopf{color:#6f6757;border-bottom-color:rgba(11,12,16,.3)}
.tafel .gericht{border-bottom-color:rgba(11,12,16,.12)}
.tafel .gericht b{color:var(--tinte)}
.tafel .gericht small{color:rgba(11,12,16,.66)}
.tafel .gericht>span{color:var(--tinte)}
.tafel .kn--linie{--o:#fffdf9;--m:#f4ebe1;--u:#dfd0c2;color:var(--tinte)}
/* ---------- Lage: Angaben dürfen umbrechen, nichts überlappt */
.ort__koord{grid-template-columns:repeat(3,minmax(0,1fr));justify-content:stretch}
.ort__koord dd{white-space:normal;font-size:clamp(1.05rem,1.55vw,1.6rem);overflow-wrap:anywhere}
/* ---------- Rechtstexte im vollen Wortlaut */
.rechttext{max-width:78ch;font-size:1.02rem;line-height:1.62;color:rgba(11,12,16,.84)}
.rechttext h2{margin:2.2em 0 .6em;font-family:var(--serif);font-weight:700;font-size:clamp(1.5rem,2.2vw,2.1rem);line-height:1.08;letter-spacing:.02em;text-transform:uppercase;color:var(--tinte)}
.rechttext h3,.rechttext h4{margin:1.7em 0 .5em;font-family:var(--serif);font-weight:700;font-size:1.22rem;line-height:1.2;letter-spacing:.03em;text-transform:uppercase;color:var(--tinte)}
.rechttext>:first-child{margin-top:0}
.rechttext p{margin:.8em 0}
.rechttext ul{margin:.8em 0;padding-left:1.2em;list-style:disc}
.rechttext li{margin:.35em 0}
.rechttext a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.rechttext strong{font-weight:600;color:var(--tinte)}
.rechttext__kn{margin-top:34px}
.rechtsnav{grid-template-columns:repeat(3,minmax(0,1fr))}
.feld textarea{width:100%;padding:14px 18px;border:0;border-radius:14px;background:rgba(11,12,16,.045);box-shadow:inset 0 0 0 1px rgba(11,12,16,.1);font:inherit;font-size:1rem;resize:vertical}
/* ---------- Häufige Fragen: dunkel, Karten mit Nummer, helle Taste */
.fragen__links{position:sticky;top:120px;display:grid;gap:22px;justify-items:start}
.fragen__links .stempel{width:70px;height:84px;color:var(--creme)}
.fragen__karte{display:grid;gap:12px;justify-items:start;margin-top:10px;padding:22px 24px;border-radius:22px;color:var(--tinte);background:linear-gradient(180deg,#f8eee4,#ebdbce 60%,#e0cdbc);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 3px 0 #9c8b7c}
.fragen__karte b{font-family:var(--serif);font-weight:700;font-size:1.3rem;letter-spacing:.03em;text-transform:uppercase}
.fragen__karte p{font-size:.95rem;line-height:1.45;color:rgba(11,12,16,.75)}
.fragen--neu{border-top:0;display:grid;gap:10px}
.fragen--neu .frage{border-bottom:0;border-radius:20px;padding:0 clamp(16px,2vw,26px);background:linear-gradient(180deg,#232638,#1a1c29);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 3px 0 #0a0b11}
.fragen--neu .frage summary{grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(12px,1.6vw,22px);padding:20px 0;font-size:clamp(1.15rem,1.55vw,1.45rem);line-height:1.12;letter-spacing:.02em;text-transform:uppercase;color:#fff}
.fragen--neu .frage summary em{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--taupe)}
.fragen--neu .frage summary i{width:40px;height:40px;color:var(--tinte);background:linear-gradient(180deg,#f8eee4,#ebdbce 50%,#d6c2b1);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 2px 0 #9c8b7c}
.fragen--neu .frage[open]{background:linear-gradient(180deg,#2b2f47,#1e2133)}
.fragen--neu .frage[open] summary i{background:linear-gradient(180deg,#f8eee4,#ebdbce 50%,#d6c2b1);color:var(--tinte)}
.fragen--neu .frage__a{padding:0 0 22px;color:rgba(255,255,255,.8);font-size:1rem;line-height:1.6;max-width:62ch}
.fragen--neu .frage__a p{margin:.6em 0}
.fragen--neu .frage__a h3,.fragen--neu .frage__a strong{font-family:var(--sans);font-weight:600;font-size:1rem;letter-spacing:0;text-transform:none;color:#fff}
.fragen--neu .frage__a a{color:var(--creme);text-decoration:underline;text-underline-offset:3px}
@media (max-width:860px){.fragen__links{position:static}}
/* ---------- am Meer, Salzwiesen: Bild über die Breite, riesige Zeile, drei kleine Bilder */
.wiese__b .rahmen__k{aspect-ratio:21/9}
.wiese__unten{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,70px);align-items:end;margin-top:clamp(26px,3.4vw,54px)}
.wiese__h{font-size:clamp(2.6rem,6.6vw,6.8rem);line-height:.98}
.wiese__t .gross{font-size:clamp(1.1rem,1.5vw,1.45rem);line-height:1.4;color:rgba(255,255,255,.84)}
.wiese__klein{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,1.2vw,18px);margin-top:clamp(30px,4vw,60px)}
@media (max-width:860px){.wiese__unten{grid-template-columns:1fr}.wiese__b .rahmen__k{aspect-ratio:4/3}.wiese__klein{grid-template-columns:1fr 1fr}.wiese__klein>:last-child{display:none}}
/* ---------- Über uns: das ganze Team und ihr Spruch */
.mannschaft__satz{text-align:center;font-size:clamp(2.8rem,8.4vw,9rem);line-height:.96;margin-bottom:clamp(26px,3.4vw,54px)}
.mannschaft__b .rahmen__k{aspect-ratio:21/9}
.mannschaft__unten{display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(34px,3.6vw,54px);margin-top:clamp(34px,4vw,60px)}
.mannschaft__unten .lauf{color:#fff;font-weight:600;font-size:clamp(1.35rem,2.1vw,2rem);line-height:1.22;letter-spacing:-.012em;max-width:30ch;text-wrap:balance}
@media (max-width:860px){.mannschaft__b .rahmen__k{aspect-ratio:4/3}}
.fuss__spruch{display:block;margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--creme)}

/* ---------- Weinkarte: drei feste Spalten, alle beginnen auf einer Höhe */
.weinspalten{columns:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 clamp(28px,4vw,72px);align-items:start}
.weinspalte>.weingruppe:last-child{margin-bottom:0}
@media (max-width:1000px){.weinspalten{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.weinspalten{grid-template-columns:1fr}.weinspalte>.weingruppe:last-child{margin-bottom:clamp(34px,4vw,56px)}}

/* Abschluss der Haus-Karte: Zeile, Knöpfe und Hinweis stehen rechts */
@media (min-width:701px){
  .hausfuss{flex-direction:column;align-items:flex-end;justify-content:flex-start;text-align:right}
  .hausfuss .kn-reihe{justify-content:flex-end}
  .karten--haus .karte__hin{margin-left:auto;text-align:right;max-width:78ch}
}

/* Weingruppe, die in der nächsten Spalte weiterläuft */
.weingruppe h4{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.weingruppe .weiter{font-family:var(--mono);font-weight:400;font-size:9.5px;letter-spacing:.2em;color:var(--taupe);white-space:nowrap}
@media (max-width:700px){
  .weingruppe--weiter h4{display:none}
  .weinspalte>.weingruppe.weingruppe--offen:last-child{margin-bottom:0}
}

/* Sonne, die oben rechts hinter dem Gruppenfoto aufgeht */
.mannschaft{overflow:hidden}
.mannschaft__b{position:relative;isolation:isolate}
.sonne{position:absolute;z-index:-1;top:calc(var(--sg)*-.44);right:calc(var(--sg)*-.2);width:var(--sg);height:var(--sg);--sg:clamp(150px,19vw,330px);color:var(--creme);pointer-events:none}
.sonne svg{display:block;width:100%;height:100%;animation:sonne 140s linear infinite}
.sonne circle{fill:currentColor}
.sonne line{stroke:currentColor;stroke-width:3.4;stroke-linecap:round}
@keyframes sonne{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.sonne svg{animation:none}}
@media (max-width:860px){.sonne{right:calc(var(--sg)*-.3)}}

/* Kooperation anfragen */
.koop{margin-top:clamp(50px,6vw,90px);align-items:start}
.koop__t{grid-column:1/span 5;display:grid;gap:clamp(16px,1.8vw,26px)}
.koop__f{grid-column:7/-1}
.koop__mail{display:grid;gap:6px;font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--taupe)}
.koop__mail a{font-family:var(--serif);font-weight:600;font-size:clamp(1.3rem,2vw,1.9rem);letter-spacing:.03em;text-transform:none;color:#fff;justify-self:start;border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:3px}
.koop .feldreihe{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.koop textarea{resize:vertical;min-height:110px}
@media (max-width:860px){.koop__t,.koop__f{grid-column:1/-1}.koop .feldreihe{grid-template-columns:1fr}}

/* ---------- Jobs: Stellen als große Karten, Vorteile als eigener Abschnitt */
.stellen{padding-top:clamp(40px,5vw,80px)}
.stellen .in{display:grid;gap:clamp(22px,2.6vw,40px)}
.stelle{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(22px,3.4vw,60px);align-items:stretch;padding:clamp(14px,1.4vw,22px);border-radius:clamp(26px,2.6vw,40px);background:#fff;box-shadow:inset 0 0 0 1px rgba(11,12,16,.07),0 3px 0 rgba(11,12,16,.07),0 40px 60px -44px rgba(60,44,30,.55)}
.stelle--um{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.stelle--um .stelle__b{order:2}
.stelle__b{position:relative;min-height:clamp(320px,38vw,620px)}
.stelle__b figure,.stelle__b .rahmen,.stelle__b .rahmen__k{height:100%}
.stelle__b figure{position:absolute;inset:0;margin:0}
.stelle__b .rahmen{padding:0;background:none;box-shadow:none}
.stelle__b .rahmen__k{display:block;border-radius:clamp(18px,1.8vw,26px);overflow:hidden}
.stelle__b img{width:100%;height:100%;object-fit:cover}
.stelle__nr{position:absolute;left:clamp(16px,1.8vw,28px);bottom:clamp(6px,.8vw,14px);font-family:var(--serif);font-weight:700;font-size:clamp(5rem,11vw,11rem);line-height:.9;letter-spacing:.02em;color:#fff;opacity:.92;pointer-events:none}
.stelle__t{display:grid;align-content:center;justify-items:start;gap:clamp(14px,1.5vw,22px);padding:clamp(14px,2.4vw,44px) clamp(8px,2vw,36px) clamp(18px,2.4vw,44px) 0}
.stelle--um .stelle__t{padding-left:clamp(14px,2.6vw,44px);padding-right:0}
.stelle__t .d2{font-size:clamp(3rem,6.4vw,7rem);line-height:.92}
.stelle__orte{display:flex;flex-wrap:wrap;gap:8px}
.stelle__orte span{padding:9px 14px 8px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(11,12,16,.16);font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;line-height:1}
.stelle__orte span:last-child{background:var(--tinte);color:#fff;box-shadow:none}
.stelle__text{font-size:clamp(1.02rem,1.25vw,1.22rem);line-height:1.55;color:rgba(11,12,16,.8);max-width:58ch}
.stelle__mit{width:100%;padding:clamp(18px,1.8vw,26px);border-radius:20px;background:var(--papier,#f5eee8)}
.stelle__mit h3{font-family:var(--mono);font-weight:400;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#6f6757;margin-bottom:12px}
.stelle__mit ul{display:grid;gap:10px}
.stelle__mit li{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;line-height:1.45}
.stelle__mit svg{width:22px;height:22px;padding:4px;border-radius:50%;background:var(--tinte);fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.stelle .kn-reihe{margin-top:4px}
@media (max-width:860px){
  .stelle,.stelle--um{grid-template-columns:1fr}
  .stelle--um .stelle__b{order:0}
  .stelle__b{min-height:0;aspect-ratio:4/3}
  .stelle__t,.stelle--um .stelle__t{padding:6px 8px 14px}
}
.bieten__kopf{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(22px,3.4vw,60px);align-items:end;margin-bottom:clamp(30px,3.6vw,56px)}
.bieten__liste{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.1vw,16px);counter-reset:none;list-style:none}
.bieten__liste li{display:grid;align-content:space-between;gap:clamp(28px,3.4vw,60px);min-height:clamp(170px,15vw,230px);padding:clamp(18px,1.7vw,26px);border-radius:22px;background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),inset 0 1px 0 rgba(255,255,255,.08)}
.bieten__liste b{font-family:var(--serif);font-weight:700;font-size:clamp(2rem,2.8vw,3rem);line-height:1;letter-spacing:.03em;color:var(--creme)}
.bieten__liste p{font-size:clamp(.98rem,1.1vw,1.1rem);line-height:1.4;color:rgba(255,255,255,.86)}
@media (max-width:1060px){.bieten__liste{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.bieten__kopf{grid-template-columns:1fr}}
@media (max-width:520px){.bieten__liste{grid-template-columns:1fr}.bieten__liste li{min-height:0}}
.bieten__b .rahmen__k{aspect-ratio:21/9}

/* ---------- Mein Konto */
.konto__hin{font-family:var(--mono);font-size:10px;letter-spacing:.12em;line-height:1.7;text-transform:uppercase;color:#6f6757}
.konto[hidden],[data-konto-tor][hidden]{display:none}
.konto{display:grid;grid-template-columns:minmax(220px,3fr) minmax(0,9fr);gap:clamp(18px,2.4vw,40px);align-items:start;scroll-margin-top:120px}
.konto__nav{display:grid;gap:6px;padding:clamp(16px,1.6vw,24px);border-radius:26px;background:var(--tinte);color:#fff;position:sticky;top:120px}
.konto__gruss{display:grid;gap:2px;padding:8px 12px 18px;font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe)}
.konto__gruss b{font-family:var(--serif);font-weight:700;font-size:2rem;letter-spacing:.03em;line-height:1;color:#fff;overflow-wrap:anywhere}
.konto__nav button{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-radius:14px;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;text-align:left;color:rgba(255,255,255,.72);transition:background-color .3s,color .3s}
.konto__nav button:hover{background:rgba(255,255,255,.07);color:#fff}
.konto__nav button.an{background:var(--creme);color:var(--tinte)}
.konto__nav [data-konto-aus]{margin-top:10px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.konto__feld{display:grid;gap:18px}
.konto__t{display:grid;gap:clamp(16px,1.8vw,26px);padding:clamp(24px,3.2vw,48px);border-radius:26px;background:#fff;box-shadow:inset 0 0 0 1px rgba(11,12,16,.08),0 3px 0 rgba(11,12,16,.08),0 30px 50px -34px rgba(60,44,30,.5)}
.konto__t[hidden]{display:none}
.konto__kacheln{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.konto__kacheln button{display:grid;grid-template-columns:1fr auto;align-items:end;gap:26px 10px;padding:20px;border-radius:20px;background:var(--papier);text-align:left;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.konto__kacheln button:hover{transform:translateY(-3px)}
.konto__kacheln b{grid-column:1/-1;font-family:var(--serif);font-weight:700;font-size:clamp(2.2rem,3.4vw,3.6rem);line-height:1}
.konto__kacheln span{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase}
.konto__kacheln svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.4}
.konto__letzte{display:grid;gap:10px}
.konto__zeile{display:grid;grid-template-columns:1fr auto auto;gap:20px;align-items:baseline;padding:16px 0;border-top:1px solid rgba(11,12,16,.12);border-bottom:1px solid rgba(11,12,16,.12)}
.konto__zeile span{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:#6f6757}
.konto__zeile i,.konto__liste i{font-style:normal;font-family:var(--mono);font-size:12.5px;white-space:nowrap}
.konto__liste{display:grid;gap:14px}
.konto__liste article{display:grid;gap:12px;padding:20px 22px;border-radius:20px;background:var(--papier)}
.konto__liste header,.konto__liste li,.konto__liste footer{display:flex;justify-content:space-between;align-items:baseline;gap:18px}
.konto__liste header b{font-family:var(--serif);font-weight:600;font-size:1.25rem;letter-spacing:.04em;text-transform:uppercase}
.konto__liste ul{display:grid;gap:8px;padding:12px 0;border-top:1px solid rgba(11,12,16,.12);border-bottom:1px solid rgba(11,12,16,.12)}
.konto__liste footer{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}
.konto__status{padding:8px 12px 7px;border-radius:999px;background:#fff;font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;line-height:1;white-space:nowrap}
.konto__status--weg{background:var(--tinte);color:#fff}
.konto__adressen{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.konto__adressen article{display:grid;gap:12px;justify-items:start;padding:22px;border-radius:20px;background:var(--papier);line-height:1.6}
.konto__link{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:3px}
.konto__form{display:grid;gap:16px}
.konto__form .feldreihe{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.konto__form .kn{justify-self:start;margin-top:6px}
.konto__ok{font-size:.95rem;color:#1c6b3c}
@media (max-width:900px){
  .konto{grid-template-columns:1fr}
  .konto__nav{position:static;grid-template-columns:1fr 1fr}
  .konto__gruss{grid-column:1/-1}
  .konto__kacheln,.konto__adressen,.konto__form .feldreihe{grid-template-columns:1fr}
  .konto__zeile{grid-template-columns:1fr auto}
  .konto__zeile span{grid-row:2}
  .konto__liste header{flex-wrap:wrap}
}

/* Stellen-Nummer sitzt als Einkerbung in der Bildecke: immer lesbar, immer gleich weit vom Rand */
.stelle__nr{left:0;bottom:0;display:block;padding:clamp(10px,1.1vw,16px) clamp(16px,1.7vw,26px) 0 0;border-radius:0 clamp(18px,1.8vw,26px) 0 0;background:#fff;color:var(--tinte);opacity:1;font-size:clamp(3.6rem,7.4vw,7.6rem);line-height:.82;letter-spacing:.02em;--e:clamp(18px,1.8vw,26px)}
.stelle__nr::before,.stelle__nr::after{content:'';position:absolute;width:var(--e);height:var(--e);background:radial-gradient(circle at 100% 0,transparent calc(var(--e) - .5px),#fff var(--e))}
.stelle__nr::before{left:0;bottom:100%}
.stelle__nr::after{left:100%;bottom:0}

/* ---------- Jobs: „Was wir bieten“ neu – Fotos links, acht Zeilen rechts, Aufruf direkt darunter */
.bieten{padding-block:clamp(54px,6.4vw,104px)}
.bieten>.in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,90px);align-items:start}
.bieten__links{position:sticky;top:clamp(96px,10vw,130px);display:grid;gap:clamp(20px,2.4vw,36px)}
.bieten__links .d1{font-size:clamp(3.4rem,8vw,8.6rem);line-height:.9}
.bieten__fotos{position:relative;padding:0 clamp(18px,3vw,50px) clamp(34px,4vw,60px) 0}
.bieten__gross .rahmen__k{aspect-ratio:5/4}
.schnapp{position:absolute;margin:0;padding:7px 7px 0;background:#fbf7f1;border-radius:4px;box-shadow:0 18px 30px -16px rgba(0,0,0,.7);color:var(--tinte)}
.schnapp img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:2px}
.schnapp figcaption{padding:7px 2px 8px;font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;text-align:center}
.schnapp--a{right:0;bottom:clamp(60px,9vw,150px);width:clamp(110px,13vw,200px);transform:rotate(5deg)}
.schnapp--b{left:clamp(16px,3vw,50px);bottom:0;width:clamp(96px,11vw,170px);transform:rotate(-6deg)}
.bieten__liste{display:block;list-style:none;border-top:1px solid rgba(235,219,206,.4)}
.bieten__liste li{display:grid;grid-template-columns:clamp(54px,5.4vw,92px) 1fr;align-items:baseline;gap:0;min-height:0;padding:clamp(16px,1.7vw,26px) 0;border-radius:0;background:none;box-shadow:none;border-bottom:1px solid rgba(255,255,255,.12)}
.bieten__liste b{font-family:var(--serif);font-weight:700;font-size:clamp(1.5rem,2.1vw,2.3rem);line-height:1;letter-spacing:.04em;color:var(--creme)}
.bieten__liste p{font-size:clamp(1.12rem,1.65vw,1.7rem);font-weight:500;line-height:1.28;letter-spacing:-.005em;color:#fff;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.bieten__liste li:hover p{transform:translateX(8px)}
.bieten__ruf{display:grid;grid-template-columns:1fr auto;gap:18px 30px;align-items:center;margin-top:clamp(22px,2.6vw,40px);padding:clamp(20px,2.2vw,34px);border-radius:26px;background:var(--creme);color:var(--tinte)}
.bieten__ruf p{font-size:clamp(1.05rem,1.35vw,1.35rem);font-weight:500;line-height:1.35;max-width:36ch}
@media (max-width:1060px){.bieten__liste{grid-template-columns:none}}
@media (max-width:860px){
  .bieten>.in{grid-template-columns:1fr}
  .bieten__links{position:static}
  .bieten__ruf{grid-template-columns:1fr;justify-items:start}
}
@media (max-width:860px){.rechtsnav{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.rechtsnav{grid-template-columns:1fr}.rechtsnav a{height:56px}}
.rechttext{overflow-wrap:anywhere}

/* Guide Michelin: runde Plaketten wie beim Haus selbst (empfohlen, kein Stern) */
.hero__michelin{gap:clamp(8px,.8vw,12px)}
.hero__michelin svg{width:clamp(48px,3.9vw,62px)}
.michelin-reihe{gap:8px}
.michelin-reihe svg{width:46px}
@media (max-width:860px){.hero__michelin svg{width:44px}}

/* Sonne größer, nur ein Viertel hinter dem Foto */
.sonne{--sg:clamp(190px,21vw,440px);top:calc(var(--sg)*-.7);right:calc(var(--sg)*-.1)}
@media (max-width:860px){
  .sonne{--sg:128px;top:calc(var(--sg)*-.7);right:calc(var(--sg)*-.06)}
  .mannschaft__satz{margin-bottom:100px;text-align:left}
}
.hero__michelin{justify-content:center;gap:clamp(18px,1.8vw,28px);padding-top:clamp(22px,2vw,30px)}
@media (max-width:1060px){.hero__michelin{justify-content:center;gap:18px;padding-top:20px}}
.michelin-reihe{justify-content:center;gap:clamp(16px,1.6vw,24px);margin-top:clamp(26px,2.6vw,40px);padding-top:clamp(22px,2vw,30px);border-top:1px solid rgba(255,255,255,.22)}
.rechthin{max-width:70ch;margin:0 0 clamp(20px,2.4vw,34px);padding:14px 18px;border-radius:14px;background:rgba(11,12,16,.06);font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;line-height:1.7;text-transform:uppercase}
.michelin-reihe{justify-content:flex-start;gap:10px;margin-top:clamp(22px,2.2vw,32px);padding-top:0;border-top:0}

/* ---------- Restaurants: zwei Orte, zwei Jahre */
.orte__kopf{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(20px,4vw,70px);align-items:end;margin-bottom:clamp(30px,4vw,60px)}
.orte__kopf .d2{font-size:clamp(2.5rem,5.6vw,6rem);line-height:.95}
.orte__t{display:grid;gap:18px;justify-items:start}
.orte__zwei{--g:clamp(14px,1.8vw,28px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--g);align-items:start;position:relative}
.orte__weg{position:absolute;z-index:2;left:50%;top:0;width:0;height:0}
.orte__weg span{position:absolute;left:0;top:clamp(90px,16.5vw,300px);transform:translate(-50%,-50%);padding:13px 18px 12px;border-radius:999px;background:var(--creme);color:var(--tinte);font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;line-height:1;white-space:nowrap;box-shadow:0 0 0 7px var(--nacht-grund,#111421)}
.orte__weg i{display:none}
.ortkachel{display:grid;gap:clamp(16px,1.8vw,26px)}
.ortkachel__b{position:relative}
.ortkachel__b figure{margin:0}
.ortkachel__b .rahmen{padding:0;background:none;box-shadow:none}
.ortkachel__b .rahmen__k{display:block;aspect-ratio:4/3;border-radius:clamp(20px,2vw,30px);overflow:hidden}
.ortkachel__b img{width:100%;height:100%;object-fit:cover}
.ortkachel__jahr{position:absolute;left:0;bottom:0;padding:clamp(10px,1.1vw,16px) clamp(16px,1.7vw,26px) 0 0;border-radius:0 clamp(20px,2vw,30px) 0 0;background:var(--nacht-grund,#111421);font-family:var(--serif);font-weight:700;font-size:clamp(3.2rem,6.6vw,7rem);line-height:.82;letter-spacing:.02em;color:var(--creme);--e:clamp(20px,2vw,30px)}
.ortkachel__jahr::before,.ortkachel__jahr::after{content:'';position:absolute;width:var(--e);height:var(--e);background:radial-gradient(circle at 100% 0,transparent calc(var(--e) - .5px),var(--nacht-grund,#111421) var(--e))}
.ortkachel__jahr::before{left:0;bottom:100%}
.ortkachel__jahr::after{left:100%;bottom:0}
.ortkachel__t{display:grid;gap:8px;max-width:56ch}
.ortkachel__t h3{font-family:var(--serif);font-weight:700;font-size:clamp(1.8rem,2.8vw,3rem);line-height:1;letter-spacing:.03em;text-transform:uppercase}
.ortkachel__t span{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--taupe)}
.ortkachel__t p{margin-top:8px;font-size:clamp(1rem,1.2vw,1.16rem);line-height:1.55;color:rgba(255,255,255,.82)}
@media (max-width:860px){
  .orte__kopf,.orte__zwei{grid-template-columns:1fr}
  .orte__weg{display:none}
  .orte__zwei{gap:clamp(34px,8vw,56px)}
}

/* ---------- Presse: „Berichtet haben“ als Wand aus Kacheln, die ZDF-Reihe groß */
.berichte__kopf{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,5vw,90px);align-items:end;margin-bottom:clamp(30px,4vw,60px)}
.berichte__kopf .d2{font-size:clamp(3rem,7.4vw,8rem);line-height:.9}
.berichte__kopf .d2 em{font-style:normal;color:#8a7d68}
.berichte__t{display:grid;gap:16px;justify-items:start;max-width:62ch}
.berichte__t .kn{margin-top:8px}
.berichte__wand{--e:clamp(22px,2.3vw,36px);display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(8px,.9vw,14px);list-style:none}
.berichte__wand li{display:grid;place-items:center;min-height:clamp(96px,10.5vw,170px);padding:14px;border-radius:clamp(16px,1.6vw,24px);background:#fff;box-shadow:inset 0 0 0 1px rgba(11,12,16,.07),0 2px 0 rgba(11,12,16,.06);color:var(--tinte);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.berichte__wand li:hover{transform:translateY(-4px)}
.berichte__wand .firma{opacity:.9}
.berichte__wand .berichte__film{grid-column:span 2;grid-row:span 2;position:relative;place-items:stretch;padding:0;overflow:hidden;background:var(--tinte);color:#fff}
.berichte__film img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.berichte__film div{position:relative;align-self:end;display:grid;gap:6px;padding:clamp(16px,1.8vw,28px);background:linear-gradient(180deg,rgba(8,10,18,0),rgba(8,10,18,.82))}
.berichte__film span{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--creme)}
.berichte__film b{font-family:var(--serif);font-weight:700;font-size:clamp(1.8rem,3.2vw,3.6rem);line-height:.95;letter-spacing:.03em;text-transform:uppercase}
@media (max-width:1060px){.berichte__wand{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:860px){
  .berichte__kopf{grid-template-columns:1fr}
  .berichte__wand{grid-template-columns:repeat(2,minmax(0,1fr));--e:22px}
  .berichte__wand .berichte__film{min-height:220px}
}
.orte__km{position:absolute;z-index:2;left:calc(100% + var(--g)/2);top:50%;transform:translate(-50%,-50%);padding:13px 18px 12px;border-radius:999px;background:var(--creme);color:var(--tinte);font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;line-height:1;white-space:nowrap;box-shadow:0 0 0 7px var(--nacht)}
@media (max-width:860px){.orte__km{display:none}}
.orte__kopf .d2{font-size:clamp(2.4rem,5.1vw,5.5rem)}

/* ---------- Newsletter: „Post von unterwegs“ als Postkarten und eine Karte zum Ausfüllen */
.post{overflow:hidden}
.post__in{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(30px,6vw,110px);align-items:center}
.post__links{display:grid;gap:clamp(22px,2.6vw,40px)}
.post__links .d1{font-size:clamp(3.2rem,8vw,8.6rem);line-height:.9}
.post__links .d1 em{font-style:normal;color:#8a7d68}
.post__karten{position:relative;height:clamp(230px,25vw,400px);margin-right:clamp(0px,4vw,60px)}
.pk{position:absolute;margin:0;width:46%;padding:8px 8px 0;background:#fff;border-radius:5px;box-shadow:0 2px 0 rgba(11,12,16,.06),0 26px 40px -22px rgba(60,44,30,.55);transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.pk img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px}
.pk figcaption{padding:9px 2px 10px;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:#6f6757}
.pk--a{left:0;top:10%;transform:rotate(-7deg)}
.pk--b{left:27%;top:0;transform:rotate(3deg);z-index:1}
.pk--c{left:54%;top:14%;transform:rotate(8deg)}
.post__karten:hover .pk--a{transform:rotate(-10deg) translate(-10px,4px)}
.post__karten:hover .pk--b{transform:rotate(1deg) translateY(-10px)}
.post__karten:hover .pk--c{transform:rotate(11deg) translate(10px,4px)}
.post__themen{display:flex;flex-wrap:wrap;gap:10px;list-style:none}
.post__themen li{display:flex;align-items:baseline;gap:10px;padding:12px 16px 11px;background:var(--creme);border:3px dotted var(--papier);border-radius:8px;font-family:var(--serif);font-weight:700;font-size:1.05rem;letter-spacing:.06em;text-transform:uppercase;line-height:1}
.post__themen b{font-family:var(--mono);font-weight:400;font-size:10px;letter-spacing:.16em;color:#6f6757}
.postkarte{position:relative;padding:clamp(26px,3.4vw,52px)}
.postkarte__kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding-bottom:clamp(14px,1.6vw,22px);margin-bottom:4px;border-bottom:1.5px dashed rgba(11,12,16,.2)}
.postkarte__kopf .kastentitel{align-self:flex-end;font-size:clamp(1.5rem,2.2vw,2.2rem)}
.postkarte__ecke{position:relative;display:flex;align-items:center}
.briefmarke{display:grid;place-items:center;width:clamp(62px,5.4vw,84px);aspect-ratio:5/6;background:var(--creme);border:4px dotted #fff;border-radius:6px;box-shadow:0 0 0 1px rgba(11,12,16,.08)}
.briefmarke .stempel{width:64%;height:64%;color:var(--tinte)}
.poststempel{position:relative;z-index:1;display:grid;place-content:center;justify-items:center;gap:3px;width:clamp(70px,6vw,92px);aspect-ratio:1;margin-right:-22px;border-radius:50%;border:1.5px solid rgba(11,12,16,.55);box-shadow:inset 0 0 0 4px #fff,inset 0 0 0 5px rgba(11,12,16,.35);transform:rotate(-14deg);color:rgba(11,12,16,.7)}
.poststempel b{font-family:var(--mono);font-weight:500;font-size:9px;letter-spacing:.16em;text-transform:uppercase}
.poststempel i{font-style:normal;font-family:var(--mono);font-size:7.5px;letter-spacing:.16em;text-transform:uppercase}
@media (max-width:860px){
  .post__in{grid-template-columns:1fr}
  .post__karten{height:clamp(190px,52vw,300px);margin-right:0}
}
.post__karten{height:clamp(200px,20.5vw,330px)}

/* Name in der Leiste größer, alles andere bleibt */
.nav__logo img{height:18px}
@media (min-width:1061px){.nav__logo img{height:clamp(18px,1.5vw,22px)}}
@media (min-width:1061px) and (max-width:1199px){.nav__logo img{height:15px}}
@media (min-width:1061px) and (max-width:1119px){.nav__logo img{height:13.5px}}
/* Schmale Handys: nichts ragt über den Rand */
@media (max-width:400px){
  .kn{max-width:100%;padding-left:18px;gap:9px;font-size:10.5px;letter-spacing:.11em}
  [class*="sp-"],[class*="ab-"]{min-width:0}
  .frage{overflow-wrap:anywhere;hyphens:auto}
  .nav__insel{gap:10px;padding-left:16px}
  .nav__logo{flex:none}.nav__logo img{height:clamp(13px,4.3vw,18px)}
  .nav .kn{padding:0 12px}
  .nav__rechts{gap:5px}
}
@media (max-width:375px){
  .nav__insel{gap:8px;padding-left:14px}
  .nav .kn{padding:0 10px;letter-spacing:.08em}
}
@media (max-width:340px){
  .kn{padding-left:15px;font-size:9.5px;letter-spacing:.07em}
  .fuss__brett{width:84px}
  .nav__insel{gap:7px;padding-left:13px}
  .nav .kn{height:38px;padding:0 9px;font-size:9px;letter-spacing:.05em}
  .nav .korbknopf,.nav .burger{width:36px;height:36px}
}

/* Bühne der Restaurants: schmale Zeile statt zweiter großer Überschrift */
.buehne .buehne__kopf.buehne__kopf--schmal{padding:clamp(56px,6.4vw,100px) var(--rand) 0}
.buehne__band{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:10px 40px;padding-bottom:clamp(14px,1.5vw,22px);border-bottom:1px solid rgba(255,255,255,.16)}
.buehne__titel{font-family:var(--serif);font-weight:700;font-size:clamp(1.35rem,2.1vw,2.2rem);line-height:1;letter-spacing:.05em;text-transform:uppercase;color:#fff}
.buehne__titel em{font-style:normal;color:var(--creme)}
.buehne__band p{font-size:clamp(.92rem,1.05vw,1.05rem);line-height:1.4;color:rgba(255,255,255,.66)}
.wahl--haus{margin-top:clamp(30px,4vw,56px)}

/* ---------- Mein Konto: Anmeldung mit Foto, Gruß in der Bildecke und drei Zeilen, was das Konto kann */
.kontoteil{padding-top:clamp(40px,5vw,80px)}
.konto-tor{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(18px,2.4vw,40px);align-items:stretch}
.konto-tor__links{display:grid;grid-template-rows:1fr auto;gap:clamp(16px,1.8vw,26px);padding:clamp(12px,1.2vw,18px) clamp(12px,1.2vw,18px) clamp(20px,2.2vw,34px);border-radius:clamp(26px,2.6vw,40px);background:var(--tinte);color:#fff}
.konto-tor__b{position:relative;min-height:clamp(240px,26vw,430px)}
.konto-tor__b figure{position:absolute;inset:0;margin:0}
.konto-tor__b figure,.konto-tor__b .rahmen,.konto-tor__b .rahmen__k{height:100%}
.konto-tor__b .rahmen{padding:0;background:none;box-shadow:none}
.konto-tor__b .rahmen__k{display:block;border-radius:clamp(18px,1.8vw,26px);overflow:hidden}
.konto-tor__b img{width:100%;height:100%;object-fit:cover}
.konto-tor__gruss{position:absolute;left:0;bottom:0;padding:clamp(10px,1.1vw,16px) clamp(16px,1.8vw,28px) 0 clamp(8px,1vw,16px);border-radius:0 clamp(18px,1.8vw,26px) 0 0;background:var(--tinte);font-family:var(--serif);font-weight:700;font-size:clamp(3.2rem,6.4vw,6.8rem);line-height:.84;letter-spacing:.02em;text-transform:uppercase;color:var(--creme);--e:clamp(18px,1.8vw,26px)}
.konto-tor__gruss::before,.konto-tor__gruss::after{content:'';position:absolute;width:var(--e);height:var(--e);background:radial-gradient(circle at 100% 0,transparent calc(var(--e) - .5px),var(--tinte) var(--e))}
.konto-tor__gruss::before{left:0;bottom:100%}
.konto-tor__gruss::after{left:100%;bottom:0}
.konto-tor__liste{list-style:none;padding:0 clamp(8px,1vw,16px);border-top:0}
.konto-tor__liste li{display:grid;grid-template-columns:clamp(44px,4vw,64px) 1fr;align-items:baseline;padding:clamp(11px,1.1vw,16px) 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:clamp(1.02rem,1.35vw,1.35rem);font-weight:500}
.konto-tor__liste li:last-child{border-bottom:0;padding-bottom:0}
.konto-tor__liste b{font-family:var(--serif);font-weight:700;font-size:1.25em;letter-spacing:.04em;color:var(--creme)}
.konto-tor__rechts{display:grid;grid-template-rows:1fr auto;gap:clamp(14px,1.4vw,20px)}
.konto-tor__form{align-content:center;padding:clamp(26px,3.6vw,56px);gap:18px}
.konto-tor__form .d3{font-size:clamp(2.2rem,4vw,4.2rem);line-height:.95;margin-bottom:6px}
.konto-tor__neu{display:grid;grid-template-columns:1fr auto;gap:14px 26px;align-items:center;padding:clamp(18px,2vw,28px) clamp(20px,2.4vw,36px);border-radius:26px;background:var(--creme)}
.konto-tor__neu h3{font-family:var(--serif);font-weight:700;font-size:1.35rem;letter-spacing:.045em;text-transform:uppercase;line-height:1}
.konto-tor__neu p{margin-top:6px;font-size:.98rem;line-height:1.45;color:rgba(11,12,16,.78);max-width:46ch}
@media (max-width:860px){
  .konto-tor{grid-template-columns:1fr}
  .konto-tor__b{min-height:0;aspect-ratio:4/3}
  .konto-tor__neu{grid-template-columns:1fr;justify-items:start}
}

/* ---------- Rechnungsstellung: Wortlaut links groß, rechts ein Kassenbon mit dem, was wir brauchen */
.beleg__in{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(30px,6vw,110px);align-items:center}
.beleg__text{max-width:none}
.beleg__text p{font-size:clamp(1.12rem,1.55vw,1.5rem);line-height:1.5;max-width:44ch}
.beleg__text p:first-child{font-size:clamp(1.4rem,2.3vw,2.3rem);line-height:1.3;font-weight:500;letter-spacing:-.01em;max-width:30ch;color:var(--tinte)}
.beleg__text ul{list-style:none;display:grid;gap:12px;margin:clamp(18px,2vw,28px) 0;padding:clamp(18px,2vw,28px);border-radius:22px;background:#fff;box-shadow:inset 0 0 0 1px rgba(11,12,16,.07),0 2px 0 rgba(11,12,16,.06);max-width:52ch}
.beleg__text li{position:relative;padding-left:38px;font-size:clamp(1.02rem,1.25vw,1.2rem);line-height:1.45}
.beleg__text li::before{content:'';position:absolute;left:0;top:.08em;width:24px;height:24px;border-radius:50%;background:var(--tinte) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='m3.4 7.3 2.4 2.4 4.8-5' fill='none' stroke='%23fff' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.beleg__text .kn-reihe{margin-top:clamp(20px,2.2vw,32px)}
.bon__halt{justify-self:center;filter:drop-shadow(0 28px 30px rgba(60,44,30,.28));transform:rotate(2.4deg)}
.bon{display:grid;justify-items:center;gap:6px;width:min(100%,370px);padding:38px 28px 44px;background:#fff;color:var(--tinte);font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;line-height:1.5;text-align:center;-webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50% 100%/14px 51% repeat-x,conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) 50% 0/14px 51% repeat-x;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50% 100%/14px 51% repeat-x,conic-gradient(from 135deg at top,#0000,#000 1deg 89deg,#0000 90deg) 50% 0/14px 51% repeat-x}
.bon img{width:54px;height:54px;margin-bottom:6px}
.bon__kopf{font-family:var(--serif);font-weight:700;font-size:1.7rem;letter-spacing:.06em;text-transform:uppercase;line-height:1}
.bon__ort{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#6f6757}
.bon__posten,.bon__summe{width:100%;margin-top:12px;padding-top:14px;border-top:1.5px dashed rgba(11,12,16,.3);display:grid;gap:9px;list-style:none;text-align:left}
.bon__posten li,.bon__summe div{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.bon__posten i{font-style:normal;font-weight:500}
.bon__summe dt{text-transform:uppercase;letter-spacing:.14em;font-size:10px;color:#6f6757}
.bon__summe dd{text-align:right;font-weight:500}
.bon__gruss{margin-top:16px;padding-top:14px;border-top:1.5px dashed rgba(11,12,16,.3);width:100%;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}
@media (max-width:860px){.beleg__in{grid-template-columns:1fr}.bon__halt{transform:rotate(1.2deg)}}
.beleg__text .kn{text-decoration:none;border-bottom:0;font-weight:400}
.bon__halt{transform:none}
.bon__halt .bon{transform:rotate(2.4deg)}
@media (max-width:860px){.bon__halt .bon{transform:rotate(1.2deg)}}

/* Konto-Anmeldung: dunkles Feld in Navy statt Schwarz */
.konto-tor__links{--feld:var(--navy);background:var(--feld)}
.konto-tor__gruss{background:var(--feld)}
.konto-tor__gruss::before,.konto-tor__gruss::after{background:radial-gradient(circle at 100% 0,transparent calc(var(--e) - .5px),var(--feld) var(--e))}

/* ---------- Vertrag widerrufen: Navy-Feld mit der Frist groß, daneben das Formular */
.frist{grid-template-rows:1fr auto auto;padding:clamp(22px,2.6vw,40px) clamp(18px,2vw,30px) clamp(22px,2.4vw,36px)}
.frist__kopf{position:relative;display:grid;align-content:end;gap:4px;min-height:clamp(200px,22vw,360px);padding:0 clamp(8px,1vw,16px)}
.frist__zeichen{position:absolute;right:clamp(0px,1vw,14px);top:0;width:clamp(90px,11vw,170px);height:clamp(90px,11vw,170px);color:var(--creme);opacity:.16}
.frist__marke{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe)}
.frist__zahl{display:flex;align-items:baseline;gap:clamp(10px,1.2vw,18px);font-family:var(--serif);font-weight:700;text-transform:uppercase;line-height:.82;color:var(--creme)}
.frist__zahl b{font-size:clamp(7rem,15vw,15rem);letter-spacing:.01em}
.frist__zahl span{font-size:clamp(2.2rem,4.4vw,4.6rem);letter-spacing:.04em;color:#fff}
.frist .konto-tor__liste{border-top:1px solid rgba(255,255,255,.14)}
.frist__fuss{padding:0 clamp(8px,1vw,16px);font-size:.98rem;line-height:1.5;color:rgba(255,255,255,.72)}
.frist__fuss a{color:#fff;border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:1px}
.konto-tor__form .felder{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.konto-tor__form textarea{resize:vertical;min-height:110px}
@media (max-width:620px){.konto-tor__form .felder{grid-template-columns:1fr}}
/* Feld im Blau der Knöpfe */
.konto-tor__links{--feld:#151929;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 3px 0 #06070c,0 34px 50px -34px rgba(21,25,41,.7)}

/* ---------- Rechtsseiten: Inhaltsfeld links (bleibt stehen), Text als Blatt rechts */
.rechtteil{padding-top:clamp(40px,5vw,80px)}
.rechtteil__in{display:grid;grid-template-columns:minmax(260px,4fr) minmax(0,8fr);gap:clamp(18px,2.4vw,40px);align-items:start}
.rechtfeld{position:sticky;top:clamp(96px,9vw,120px);display:grid;gap:8px;max-height:calc(100vh - 140px);max-height:calc(100svh - 140px);overflow:auto;padding:clamp(22px,2.4vw,36px);border-radius:clamp(26px,2.6vw,40px);background:#151929;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 3px 0 #06070c,0 34px 50px -34px rgba(21,25,41,.7);scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
.rechtfeld__zeichen{position:absolute;right:clamp(14px,1.6vw,24px);top:clamp(14px,1.6vw,24px);width:clamp(56px,5.4vw,84px);height:clamp(56px,5.4vw,84px);color:var(--creme);opacity:.2}
.rechtfeld__marke{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe)}
.rechtfeld__name{font-family:var(--serif);font-weight:700;font-size:clamp(2.2rem,3.6vw,3.8rem);line-height:.92;letter-spacing:.03em;text-transform:uppercase;color:var(--creme);padding-right:clamp(60px,6vw,96px);overflow-wrap:anywhere}
.rechtfeld__inhalt{margin-top:clamp(14px,1.6vw,24px);display:grid;gap:6px}
.rechtfeld__inhalt>span{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--taupe)}
.rechtfeld__inhalt ol{list-style:none;border-top:1px solid rgba(255,255,255,.16)}
.rechtfeld__inhalt a{display:grid;grid-template-columns:2.4em 1fr;align-items:baseline;gap:4px;padding:10px 8px 10px 0;border-bottom:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.72);font-size:.92rem;line-height:1.3;transition:color .3s,transform .5s cubic-bezier(.2,.8,.2,1)}
.rechtfeld__inhalt a b{font-family:var(--serif);font-weight:700;font-size:1.05rem;letter-spacing:.04em;color:var(--creme)}
.rechtfeld__inhalt a i{font-style:normal;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rechtfeld__inhalt a:hover,.rechtfeld__inhalt a.an{color:#fff;transform:translateX(5px)}
.rechtfeld .kn{justify-self:start;margin-top:clamp(14px,1.6vw,22px)}
.rechttext.blatt{max-width:none;padding:clamp(24px,4.4vw,72px);border-radius:clamp(22px,2.4vw,34px);background:#fff;box-shadow:inset 0 0 0 1px rgba(11,12,16,.07),0 3px 0 rgba(11,12,16,.07),0 40px 60px -44px rgba(60,44,30,.5);font-size:1.02rem;line-height:1.66}
.blatt>*{max-width:74ch}
.blatt h2,.blatt h3,.blatt h4{scroll-margin-top:clamp(100px,10vw,130px)}
.blatt h2{margin:2.4em 0 .7em;padding-top:1.1em;border-top:1px solid rgba(11,12,16,.14);font-size:clamp(1.6rem,2.5vw,2.4rem);max-width:none}
.blatt h3{margin:2.4em 0 .7em;padding-top:1.1em;border-top:1px solid rgba(11,12,16,.14);font-size:clamp(1.3rem,1.9vw,1.75rem);line-height:1.12;max-width:none}
.blatt h4{margin:2em 0 .45em;font-size:1.16rem;letter-spacing:.05em}
.blatt>:first-child{margin-top:0;padding-top:0;border-top:0}
.blatt .rechthin+*{margin-top:0;padding-top:0;border-top:0}
.blatt em{font-style:normal;font-weight:600;color:var(--tinte)}
.blatt .kl{display:grid;grid-template-columns:3.4em 1fr;gap:0 6px}
.blatt .kl b{font-family:var(--mono);font-weight:400;font-size:.82em;letter-spacing:.06em;color:#6f6757;padding-top:.22em}
.blatt .zeile{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:4px 24px;margin:0;padding:14px 0;border-bottom:1px solid rgba(11,12,16,.12)}
.blatt .zeile b{font-family:var(--mono);font-weight:400;font-size:10.5px;letter-spacing:.16em;line-height:1.7;text-transform:uppercase;color:#6f6757;padding-top:.25em}
.blatt .zeile span{font-weight:500;color:var(--tinte)}
.blatt .rt-liste{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(20px,3vw,48px);margin:1.2em 0 1.6em;padding:0;max-width:none}
.blatt .rt-liste li{display:grid;grid-template-columns:2.4em 1fr;align-items:baseline;margin:0;padding:10px 0;border-bottom:1px solid rgba(11,12,16,.12)}
.blatt .rt-liste b{font-family:var(--serif);font-weight:700;font-size:1.05rem;letter-spacing:.04em;color:#8a7d68}
.rechtteil__in--kurz{grid-template-columns:minmax(260px,4fr) minmax(0,8fr)}
@media (max-width:980px){
  .rechtteil__in,.rechtteil__in--kurz{grid-template-columns:1fr}
  .rechtfeld{position:relative;top:auto;max-height:none;overflow:visible}
  .rechtfeld__inhalt ol{max-height:42vh;overflow:auto}
  .blatt .rt-liste,.blatt .zeile{grid-template-columns:1fr}
}
.rechtteil__in--kurz .blatt>p:first-child,.rechtteil__in--kurz .blatt .rechthin+p{font-size:clamp(1.2rem,1.7vw,1.6rem);font-weight:500;line-height:1.35;color:var(--tinte);margin-bottom:.8em}
/* Startbild am Handy: der erste Schirm gehört Bild, Titel, Satz und Knöpfen; Kursblatt und Michelin stehen als eigener Streifen darunter */
@media (max-width:860px){
  .hero{display:block;height:auto;min-height:0}
  .hero__bild{inset:-7svh 0 auto 0;height:114svh}
  .hero__in{display:block;padding-bottom:0}
  .hero__in>div:first-child{display:flex;flex-direction:column;justify-content:flex-end;min-height:100svh;padding:104px 0 clamp(26px,4.5svh,40px)}
  .hero__seite{position:relative;margin:0 calc(var(--rand)*-1);padding:34px var(--rand) 36px;gap:22px;justify-items:center;background:var(--nacht)}
  .hero__seite .kurs{width:min(100%,420px);transform:translateX(10.4%)}
  .hero__michelin{width:100%}
}
@media (min-width:701px){.karten .karte__hin{margin-left:auto;text-align:right;max-width:78ch}}

/* Hero: weicher Schatten nur hinter den Buchstaben – besser lesbar, ohne Fläche über dem Bild */
.hero h1{filter:drop-shadow(0 2px 2px rgba(8,10,18,.34)) drop-shadow(0 16px 38px rgba(8,10,18,.44))}
.hero__sub{text-shadow:0 1px 2px rgba(8,10,18,.45),0 6px 22px rgba(8,10,18,.6)}
/* Hero-Schatten kräftiger */
.hero h1{filter:drop-shadow(0 3px 3px rgba(8,10,18,.55)) drop-shadow(0 18px 44px rgba(8,10,18,.72))}
.hero__sub{text-shadow:0 1px 2px rgba(8,10,18,.7),0 6px 24px rgba(8,10,18,.85)}

/* Hero-Schatten fährt mit der Schrift hoch: eigene Schattenlage direkt hinter der Überschrift, gleiche Bewegung */
.hero h1{filter:none}
.hero__titel{position:relative;margin-top:22px}
.hero .hero__titel h1{position:relative;margin-top:0}
.hero__schatten{position:absolute;left:0;top:0;right:0;color:transparent;pointer-events:none;-webkit-user-select:none;user-select:none}
.hero__schatten em{color:transparent}
.hero__schatten .z>span{text-shadow:0 .02em .022em rgba(8,10,18,.55),0 .125em .3em rgba(8,10,18,.72)}
.hero__titel .z>span{transform:translateY(185%)}
.hero__titel .da .z>span,.hero__titel .da.z>span{transform:none}
/* Schattenlage liegt in derselben Rasterzelle wie die Überschrift: gleiche Maße, gleiche Bewegung */
.hero__titel{display:grid}
.hero__titel>*{grid-area:1/1;min-width:0}
.hero__schatten{position:relative;left:auto;top:auto;right:auto}
.hero__schatten .z{overflow:visible;clip-path:inset(-.3em -.45em -.62em -.45em)}

/* Hero-Schatten in zwei Lagen: eine fährt mit der Schrift durch denselben Schlitz hoch (nichts scheint unter der Kante durch),
   die zweite ist der fertige Schatten und blendet weich über, wenn die Schrift angekommen ist. Nur Deckkraft und Verschiebung. */
.hero .hero__schatten[data-r]{transform:none}
.hero__schatten--mit .z{clip-path:inset(-.3em -.45em 0 -.45em)}
.hero .hero__schatten--mit[data-r]{opacity:1;transition:opacity .45s linear .8s}
.hero .hero__schatten--mit[data-r].da{opacity:0}
.hero__schatten--ruhe .z{clip-path:none;overflow:visible}
.hero__titel .hero__schatten--ruhe .z>span{transform:none;transition:none}
.hero .hero__schatten--ruhe[data-r]{opacity:0;transition:opacity .45s linear .8s}
.hero .hero__schatten--ruhe[data-r].da{opacity:1}

/* Fuß: vierte Spalte mit Shop-Links oben und dem Tisch darunter, damit alle Spalten etwa gleich lang sind */
.fuss__vier .fuss__tisch{grid-column:auto;margin-top:clamp(24px,2.6vw,40px)}
.fuss__vier .fuss__tisch p{margin:12px 0 18px}
@media (max-width:1100px){.fuss__vier{grid-column:1/-1}.fuss__vier .fuss__tisch{grid-column:auto}}
.fuss__vier .fuss__tisch{margin-top:clamp(18px,2vw,30px)}.fuss__vier .fuss__tisch p{margin:10px 0 14px}
.fuss__vier .fuss__tisch .kn{margin-top:16px}

/* Hero-Schatten hängt am selben Startzeitpunkt wie die Schrift – mit Vorhang (erstes Laden) später, ohne Vorhang früher */
.hero{--hd:1.25s}
.kein-vorhang .hero{--hd:.1s}
.hero .hero__schatten--mit[data-r],.hero .hero__schatten--ruhe[data-r]{transition:opacity .45s linear calc(var(--hd) + .85s)}

/* ---------- Shop-Übersicht, Fassung 2 (08.10.2026): jede Reihe füllt die Breite, das neueste Buch bekommt eine Bühne.
   Reihen (.fach): 1 Stück = Bühne (.held), 2 = breite Karten (.quer), 3 und 4 = Kacheln (.ware). Der Preis sitzt als Einkerbung in der Bildecke. */
.fl--papier{--grund:var(--papier);--rt:#ece5dd}
.fl--creme{--grund:var(--creme);--rt:#e2d3c6}
.regal{display:grid;gap:clamp(26px,3vw,48px)}
.fach{display:grid;gap:clamp(14px,1.6vw,26px)}
.fach--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.fach--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.fach--4{grid-template-columns:repeat(4,minmax(0,1fr))}

.ware__z{display:block;margin-top:16px}
.ware h3{font-size:1.28rem;line-height:1.16}
.fach--3 .ware h3{font-size:clamp(1.3rem,1.7vw,1.62rem)}
.ware em{margin-top:8px;opacity:.7;white-space:normal;line-height:1.5}
.ware .ware__zwei{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .55s var(--e2),transform 1.4s var(--e1)}
.ware:hover .ware__zwei.an{opacity:1}
.ware .marke,.held .marke,.quer .marke{z-index:3}

.kerbe{position:absolute;right:0;bottom:0;z-index:2;--e:15px;padding:10px 13px 7px 15px;border-radius:var(--e) 0 0 0;background:var(--rt);color:var(--tinte);
  font-family:var(--serif);font-weight:700;font-size:1.22rem;line-height:1;letter-spacing:.04em;white-space:nowrap}
.kerbe::before,.kerbe::after{content:'';position:absolute;width:var(--e);height:var(--e);background:radial-gradient(circle at 0 0,transparent calc(var(--e) - .5px),var(--rt) var(--e))}
.kerbe::before{right:0;bottom:100%}
.kerbe::after{right:100%;bottom:0}
.fach--3 .kerbe{font-size:clamp(1.25rem,1.6vw,1.55rem);--e:18px;padding:12px 16px 9px 18px}
.kerbe--g{--e:clamp(18px,2vw,28px);font-size:clamp(1.9rem,3.3vw,3.5rem);padding:clamp(12px,1.4vw,20px) clamp(16px,1.9vw,28px) clamp(9px,1.1vw,16px) clamp(18px,2vw,30px)}

/* Bühne */
.held{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);gap:clamp(26px,4.4vw,84px);align-items:stretch}
.held__k{aspect-ratio:1;background:#fff}
.held__bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s var(--e2),transform 1.6s var(--e1)}
.held__bild.an{opacity:1}
.held__b a:hover .held__bild{transform:scale(1.03)}
.held__t{display:flex;flex-direction:column;justify-content:space-between;gap:clamp(24px,2.8vw,44px);min-width:0}
.held__o{display:grid;justify-items:start;gap:clamp(16px,1.7vw,26px)}
.held__n{font-family:var(--serif);font-weight:700;text-transform:uppercase;font-size:clamp(2rem,3.5vw,3.6rem);line-height:1.08;letter-spacing:.015em;text-wrap:balance}
.held__k2{font-size:clamp(1.05rem,1.32vw,1.34rem);line-height:1.5;color:rgba(11,12,16,.8);max-width:34em;text-wrap:pretty}
.held__d{width:100%;border-top:1px solid rgba(11,12,16,.18)}
.held__d li{padding:13px 0 12px;border-bottom:1px solid rgba(11,12,16,.18);font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;line-height:1.5}
.held__o .kn{margin-top:6px}
.held__blick{display:grid;grid-template-columns:repeat(var(--n,6),minmax(0,150px));gap:clamp(6px,.7vw,10px)}
.held__blick button{display:block;aspect-ratio:1;border-radius:clamp(10px,1vw,16px);overflow:hidden;opacity:.62;box-shadow:inset 0 0 0 1px rgba(11,12,16,.12);transition:opacity .4s,transform .5s var(--e2)}
.held__blick img{width:100%;height:100%;object-fit:cover}
.held__blick button:hover{opacity:1;transform:translateY(-3px)}
.held__blick button[aria-pressed="true"]{opacity:1;outline:1.5px solid var(--tinte);outline-offset:2px}

/* breite Karte */
.quer{display:grid;grid-template-columns:minmax(0,43%) minmax(0,1fr);padding:8px;border-radius:var(--r-l);background:#fffdfa;color:var(--tinte);
  box-shadow:inset 0 0 0 1px rgba(11,12,16,.07),0 3px 0 rgba(104,80,58,.16),0 30px 44px -34px rgba(60,44,30,.5)}
.quer__b{position:relative;display:block;align-self:stretch;justify-self:stretch;overflow:hidden;border-radius:18px;background:#fff;isolation:isolate}
.quer__b::before{content:'';display:block;padding-top:100%}
.quer__b img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--e1)}
.quer:hover .quer__b img{transform:scale(1.045)}
.quer__t{position:relative;display:flex;flex-direction:column;gap:12px;min-width:0;padding:clamp(14px,1.7vw,28px) clamp(12px,1.5vw,24px) clamp(8px,1vw,16px) clamp(18px,2.1vw,36px)}
.quer h3{font-family:var(--serif);font-weight:600;text-transform:uppercase;font-size:clamp(1.35rem,1.9vw,1.9rem);line-height:1.12;letter-spacing:.03em;text-wrap:balance}
.quer em{font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;opacity:.62;line-height:1.5}
.quer__k{font-size:clamp(.94rem,1.02vw,1.04rem);line-height:1.56;color:rgba(11,12,16,.76);text-wrap:pretty}
.quer__f{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:clamp(10px,1.1vw,16px);border-top:1px solid rgba(11,12,16,.14)}
.quer__f b{font-family:var(--serif);font-weight:700;font-size:clamp(1.35rem,1.7vw,1.7rem);letter-spacing:.04em;line-height:1}
.knauf{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--creme);background:linear-gradient(180deg,#2d3250,#151929 50%,#080a12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),inset 0 -2px 0 rgba(0,0,0,.55),0 10px 14px -9px rgba(17,20,33,.7);transition:transform .5s var(--e2)}
.knauf svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.2;transition:transform .6s var(--e2)}
.quer:hover .knauf{transform:translateY(-2px)}
.quer:hover .knauf svg{transform:translate(2px,-2px)}

/* Gutschein als Karte mit Abriss */
.quer--karte{box-shadow:inset 0 0 0 1px rgba(11,12,16,.07),0 30px 44px -34px rgba(60,44,30,.5)}
.quer--karte .quer__t{margin-left:clamp(8px,1vw,16px);border-left:1.5px dashed rgba(11,12,16,.24)}
.quer--karte .quer__t::before,.quer--karte .quer__t::after{content:'';position:absolute;left:-14px;width:26px;height:26px;border-radius:50%;background:var(--grund);box-shadow:inset 0 0 0 1px rgba(11,12,16,.09)}
.quer--karte .quer__t::before{top:-21px;clip-path:inset(13px 0 0 0)}
.quer--karte .quer__t::after{bottom:-21px;clip-path:inset(0 0 13px 0)}

@media (max-width:1060px){
  .fach--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .held{gap:clamp(22px,3vw,40px)}
}
@media (max-width:860px){
  .held{grid-template-columns:1fr}
  .held__blick{grid-template-columns:repeat(var(--n,6),minmax(0,1fr))}
  .fach--2{grid-template-columns:1fr;grid-auto-rows:1fr}
  .fach--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fach--3>:first-child{grid-column:1/-1}
  .fach--3 .ware:not(:first-child) h3{font-size:1.15rem}
  .fach--3 .ware:not(:first-child) .kerbe{font-size:1.1rem;--e:14px;padding:9px 11px 6px 13px}
  .fach--karten{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quer--karte{grid-template-columns:1fr}
  .quer--karte .quer__t{margin:8px 0 0;border-left:0;border-top:1.5px dashed rgba(11,12,16,.24);padding:16px 8px 6px}
  .quer--karte .quer__t::before{left:-21px;top:-14px;clip-path:inset(0 0 0 13px)}
  .quer--karte .quer__t::after{left:auto;right:-21px;top:-14px;bottom:auto;clip-path:inset(0 13px 0 0)}
  .quer--karte .quer__k{display:none}
  .quer--karte h3{font-size:1.12rem}
}
@media (max-width:520px){
  .fach--2{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto}
  .quer{grid-template-columns:1fr}
  .quer__k{display:none}
  .quer__t{gap:8px;padding:14px 8px 6px}
  .quer h3{font-size:1.12rem}
  .quer__f b{font-size:1.25rem}
  .ware h3{font-size:1.12rem}
  .kerbe{font-size:1.08rem;--e:13px;padding:9px 10px 6px 12px}
  .fach--3>.ware:first-child h3{font-size:1.3rem}
  .fach--3>.ware:first-child .kerbe{font-size:1.3rem;--e:16px;padding:11px 13px 8px 15px}
  .knauf{width:38px;height:38px}
  .kerbe--g{font-size:1.7rem;--e:18px;padding:12px 15px 9px 17px}
  .quer--karte .knauf{display:none}
  .quer--karte em{letter-spacing:.12em;font-size:10px}
}
@media (max-width:370px){
  .fach--3>.ware:not(:first-child) .kerbe,.fach--4 .kerbe{font-size:.94rem;--e:11px;padding:8px 8px 5px 10px;letter-spacing:.02em}
}

/* Sprungknöpfe im Shop: einzeln, links, helle Pille mit Tiefe, ohne Knauf. Die erste Gruppe rückt näher heran */
.sprungreihe{z-index:2;padding-top:clamp(30px,3.6vw,52px);padding-bottom:0}
.sprungreihe nav{display:flex;flex-wrap:wrap;gap:12px}
.sprungreihe .kn{height:50px;padding:0 26px;font-size:11px}
.sprungreihe+.fl{padding-top:clamp(34px,3.8vw,58px)}
@media (max-width:860px){
  .sprungreihe nav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:-8px calc(var(--rand)*-1) -26px;padding:8px var(--rand) 26px}
  .sprungreihe nav::-webkit-scrollbar{display:none}
  .sprungreihe .kn{flex:none;height:46px;padding:0 22px}
}

/* Shop-Kopf: der Satz neben dem Titel steht kräftiger und sitzt auf einer feinen Linie */
.sk:has(~ .sprungreihe) .sk__zeile .lauf{max-width:none;padding-top:clamp(14px,1.5vw,22px);border-top:1px solid rgba(255,255,255,.34)}
.sk:has(~ .sprungreihe) .sk__zeile .lauf p{font-size:clamp(1.14rem,1.5vw,1.52rem);line-height:1.42;font-weight:500;letter-spacing:-.008em;color:#fff;text-wrap:pretty}

/* Zeile unter dem Namen (Größen, Flaschen, Hinweis): Lesetext statt kleiner Sperrschrift */
.ware em,.quer em{font-family:var(--sans);font-size:1.04rem;letter-spacing:0;text-transform:none;line-height:1.4;opacity:1;color:rgba(11,12,16,.8)}
.ware em{margin-top:7px}
.fach--3 .ware em{font-size:1.1rem}
@media (max-width:520px){.ware em,.quer em,.quer--karte em{font-size:.92rem;letter-spacing:0}}

/* ---------- Hinweis für Gäste (aus dem Studio: Betriebsferien, Feiertage) ---------- */
.hinweisband{background:var(--creme);color:var(--tinte);padding:12px var(--rand);position:relative;z-index:5}
.hinweisband .in{display:flex;align-items:center;gap:14px;justify-content:center;text-align:center}
.hinweisband .stempel{width:22px;height:25px;flex:none}
.hinweisband p{margin:0;font-size:15px;line-height:1.4}
.hinweisband a{text-decoration:underline;text-underline-offset:3px;margin-left:6px;white-space:nowrap}
.hinweisband+.hero{margin-top:0}
@media (max-width:700px){.hinweisband{padding:10px var(--rand)}.hinweisband p{font-size:14px}}
/* ---------- Kurzbewerbung ---------- */
.bewerbung .feld select{width:100%;background:#fff;border:0;border-radius:12px;padding:13px 15px;font:inherit;color:inherit;box-shadow:inset 0 0 0 1px rgba(11,12,16,.14)}
.bewerbung .feld input[type=file]{font-size:14px;padding:10px 0}
.bewerbung .koop__f{grid-column:7/-1}
@media (max-width:860px){.bewerbung .koop__f{grid-column:1/-1}}
/* ---------- Karte: Kacheln als Bogen (08.10.). Die helle Kachel ist weg: Bild mit rundem Kopf, Name und Preis stehen mittig darunter auf dem Dunkel.
   Überschreibt die Kachel-Blöcke weiter oben (.gk); wer zur hellen Kachel zurück will, nimmt nur diesen Block heraus. */
.karten .gangband{align-items:flex-start}
.karten .gk,.karten .gruppe--erste .gk{display:flex;flex-direction:column;align-items:center;text-align:center;background:none;color:#fff;border-radius:0;padding:0}
.karten .gk__b{align-self:stretch;aspect-ratio:1/1.14;border-radius:50% 50% 3px 3px/43.86% 43.86% 3px 3px;background:#191b27}
.karten .gk__n{margin:17px 8px 0;padding:0;border-radius:0;background:none;box-shadow:none}
.karten .gk__n h4{color:var(--creme)}
.karten .gk p{margin:6px 10px 0;min-height:0;font-size:.95rem;line-height:1.45;color:rgba(255,255,255,.62)}
.karten .gk p:empty{display:none}
.karten .gk__p{margin:8px 0 0;font-size:1.36rem;color:var(--taupe)}

/* ---------- Stempel und Logos: Die Maske liegt auf einer inneren Fläche statt auf dem Element selbst.
   Safari zeichnet Fläche und Maske dann in einem Zug, die Zeichen blinken beim Scrollen nicht mehr auf (08.10.2026) */
:where(.stempel,.firma){position:relative}
.stempel,.firma{isolation:isolate;background:none;-webkit-mask:none;mask:none}
.stempel::before,.firma::before{content:"";position:absolute;inset:0;background:currentColor;-webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.sk__stempel::before{-webkit-mask-position:left bottom;mask-position:left bottom}
.fuss__brett::before{background:var(--creme)}

/* Auswahlfeld: Safari rechnet die längste Zeile der Liste in die Seitenbreite ein, die Jobs-Seite ließ sich am Handy seitlich schieben */
.feld select,.bewerbung .feld select{overflow:hidden;text-overflow:ellipsis;padding-right:44px}

/* Herz auf der Startseite und Brett im Fuß: keine Maske mehr, sondern das fertige farbige Zeichen (zeichen-herz-tinte.svg, zeichen-brett-creme.svg aus stempel.py farbig(),
   Farbe und Deckkraft stecken in der Datei). Safari ließ die beiden beim Hereinscrollen trotz innerer Maskenfläche einmal aufflackern (09.10.2026).
   Dazu je eine ruhige eigene Ebene; die Drehung liegt innen, damit die Kanten scharf bleiben. */
.paar .stempel{opacity:1;isolation:auto;transform:translateZ(0);backface-visibility:hidden}
.paar .stempel::before{background:url(../logo/zeichen-herz-tinte.svg?h=2adfcedbfb) center/contain no-repeat;-webkit-mask:none;mask:none;transform:rotate(-9deg)}
.fuss__brett{opacity:1;isolation:auto}
.fuss__brett::before{background:url(../logo/zeichen-brett-creme.svg?h=8dc3f65f5a) center/contain no-repeat;-webkit-mask:none;mask:none}
.fuss__kopf{transform:translateZ(0);backface-visibility:hidden}

/* Kursblatt im Hero: derselbe Puls wie im großen Kompass, auf die kleinere Zeichnung abgestimmt; läuft nur, solange es im Bild ist */
.kurs .puls{animation-name:puls-kurs}
@keyframes puls-kurs{0%{opacity:.75;transform:scale(1)}100%{opacity:0;transform:scale(4.2)}}

/* ---------- 10.10.2026, Robert: Ausklang mittig, tiefer zum Fuß gerückt, Knöpfe darunter. Keine Linie mehr zwischen Ausklang und Fuß, beides eine Fläche */
.ausklang{padding:clamp(90px,10vw,150px) var(--rand) clamp(10px,1.5vw,20px)}
.ausklang .in{flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:clamp(24px,2.6vw,36px)}
.ausklang p{max-width:28ch;margin-inline:auto}
.ausklang .kn-reihe{justify-content:center}
.ausklang+.fuss{border-top:0}

/* ---------- 10.10.2026, Robert: nur zwei Fenster mit mittigem Satz («Life is short» auf Restaurants, «Fernweh und Heimat» auf Hamburg), alle anderen bleiben links */
.bruch--mittig .in{text-align:center}
.bruch--mittig .d2,.bruch--mittig .unterschrift{margin-inline:auto}

/* ---------- 10.10.2026, Robert: Fuß eleganter. Die Tapete des Hauses (Gitter mit Medaillon aus Ring und Brett, wie auf «Salt & Silver im Chat») liegt leise hinter dem ganzen Fuß,
   Ton in Ton, steht still. Oben eine Glanzkante aus Creme statt der grauen Linie, der Inhalt liegt über der Tapete. */
.fuss{isolation:isolate;--fuss-tapete:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg fill='none' stroke='%236b5f4a' stroke-width='1.1'%3E %3Cpath d='M0 0L150 150L300 0M0 300L150 150L300 300' stroke-width='.7'/%3E %3Ccircle cx='150' cy='150' r='40'/%3E%3Ccircle cx='150' cy='150' r='35' stroke-width='.6'/%3E %3Cpath d='M150 118C163 134 163 166 150 182C137 166 137 134 150 118Z'/%3E%3Cpath d='M150 122V178' stroke-width='.6'/%3E %3Cpath d='M0 -9L9 0L0 9L-9 0ZM300 -9L309 0L300 9L291 0ZM0 291L9 300L0 309L-9 300ZM300 291L309 300L300 309L291 300Z' fill='%236b5f4a' stroke='none'/%3E %3Cpath d='M150 -6L156 0L150 6L144 0ZM150 294L156 300L150 306L144 300ZM-6 150L0 156L6 150L0 144ZM294 150L300 156L306 150L300 144Z' fill='%236b5f4a' stroke='none'/%3E %3C/g%3E%3C/svg%3E")}
.fuss::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--fuss-tapete);background-size:300px 300px;background-position:50% 0;opacity:.085}
.fuss::after{content:'';position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;background:linear-gradient(90deg,rgba(235,219,206,0) 0%,rgba(235,219,206,.55) 50%,rgba(235,219,206,0) 100%)}
.fuss>.in{position:relative;z-index:1}
@media (max-width:860px){.fuss::before{background-size:220px 220px}}

/* ---------- 10.10.2026, Robert: «Neues von Salt & Silver» nicht mehr als loser Ausklang über dem Fuß, sondern als Auftakt-Platte oben im Fuß, auf jeder Seite gleich.
   Platte wie die Haus-Karten (matt, Glanzkante oben), Text links, Knöpfe rechts; auf dem Handy mittig. Die Tapete liegt dahinter, oben die Glanzkante aus Creme. */
.fuss{padding-top:clamp(56px,6vw,96px)}
.fuss__auftakt{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:clamp(24px,3vw,56px);padding:clamp(28px,3.2vw,50px) clamp(26px,3.6vw,60px);margin-bottom:clamp(64px,7.5vw,120px);border-radius:22px;
  background:linear-gradient(180deg,#232638,#1a1c29);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 22px 40px -28px rgba(0,0,0,.9)}
.fuss__auftakt h2{font-size:clamp(1.7rem,2.7vw,2.7rem);line-height:1;letter-spacing:.01em;color:#fff}
.fuss__auftakt h2 em{font-style:normal;color:var(--creme)}
.fuss__auftakt p{margin-top:10px;font-size:clamp(1rem,1.15vw,1.15rem);line-height:1.4;color:rgba(255,255,255,.7)}
.fuss__auftakt .kn-reihe{justify-content:flex-end;flex-wrap:wrap;gap:12px}
@media (max-width:860px){.fuss__auftakt{grid-template-columns:1fr;text-align:center;padding:30px 22px}.fuss__auftakt .kn-reihe{justify-content:center}}

/* ---------- 10.10.2026, Robert: Umlaut-Punkte ragten in die Zeile darüber («Schreib uns was Schönes», Kontakt). Überschriften mit Ä/Ö/Ü bekommen vom Bau die Klasse uml und etwas mehr Luft. */
.d1.uml{line-height:1.08}
.d2.uml{line-height:1.09}

/* Anfrage ab zehn Personen: drei Abzüge unter dem Text, liegen still (Robert 10.10.2026: «schöner mit Bildern, Polaroids») */
.gpolas{position:relative;width:100%;align-self:stretch;height:clamp(280px,27vw,420px);margin:0 0 clamp(18px,2.4vw,40px)}   /* über der Überschrift (Robert 10.10.2026) */
.gpola{position:absolute;width:clamp(170px,17vw,260px);margin:0;padding:3.2% 3.2% 0;background:linear-gradient(180deg,#f9f5ee,#ede6da);
  box-shadow:0 34px 50px -26px rgba(40,30,20,.55),0 2px 0 rgba(255,255,255,.6) inset,0 0 0 1px rgba(0,0,0,.08)}
.gpola img{display:block;width:100%!important;height:auto!important;aspect-ratio:1/1!important;object-fit:cover;outline:1px solid rgba(0,0,0,.14);outline-offset:-1px}
.gpola figcaption{display:flex;align-items:center;height:clamp(34px,3.2vw,48px);font-family:var(--mono);font-size:clamp(9px,.74vw,11px);letter-spacing:.15em;text-transform:uppercase;color:#2a2c36}
.gpola::before{content:'';position:absolute;left:50%;top:-10px;width:36%;height:20px;margin-left:-18%;background:#cbbda3;box-shadow:0 1px 0 rgba(255,255,255,.35) inset;transform:rotate(-4deg)}
.gp1{left:0;top:6%;rotate:-6deg;z-index:1}
.gp2{left:31%;top:0;rotate:4deg;z-index:3}
.gp2::before{transform:rotate(5deg);background:#bfb39d}
.gp3{left:61%;top:12%;rotate:-3deg;z-index:2}
.gp3::before{display:none}
@media (max-width:860px){.gpolas{height:min(78vw,380px)}.gpola{width:40%}.gp2{left:29%}.gp3{left:58%}}

/* ---------- Karte, edler (Robert 10.10.2026 abends): keine angeschnittene Kachel am Rand, je Ansicht genau 5 Drinks / 4 Speisen,
   feine Bogenlinie in Creme im Bild, kleine Raute unter dem Namen, Speisen schweben von rechts herein */
@media (min-width:861px){
  .karten .gangband{--g:clamp(18px,2vw,32px);margin:0;padding:6px 0 30px;gap:var(--g)}
  .karten .gangband>.gk{width:calc((100% - 3*var(--g))/4)}
  .karten .gruppe--erste .gangband>.gk{width:calc((100% - 4*var(--g))/5)}
}
.karten .gk__b::after{content:'';position:absolute;inset:8px;border:1px solid rgba(235,219,206,.5);border-radius:50% 50% 2px 2px/43.86% 43.86% 2px 2px;pointer-events:none}
.karten .gk__n h4{letter-spacing:.06em}
.karten .gk__n::after{content:'';display:block;width:6px;height:6px;margin:13px auto 0;border:1px solid var(--taupe);transform:rotate(45deg)}
.karten .gk p{margin-top:12px}
.karten .gk__p{margin-top:10px;font-size:1.28rem;letter-spacing:.06em}
/* Karte: Drinks und Speisen schweben zügig von unten herein, in der Reihe von links nach rechts (Robert 10.10.2026, ersetzt «von der Seite») */
.karten .gangband>.gk[data-r]{transform:translateY(70px);transition:opacity .8s var(--e1),transform 1.1s cubic-bezier(.19,1,.22,1);transition-delay:calc(var(--i,0)*90ms)}
.karten .gangband>.gk[data-r].da{transform:none}

/* ---------- Hero, Kursblatt: ein Punkt fährt auf der Kurslinie von Hamburg nach Sankt Peter-Ording, dort ein kurzer Ring (Robert 10.10.2026: «soll kein Standbild sein») */
.kurs .fahrt{opacity:0;animation:kurs-fahrt 4.2s linear infinite;animation-play-state:paused;animation-delay:2.6s}
.kurs .ankunft{transform-box:fill-box;transform-origin:center;opacity:0;animation:kurs-ankunft 4.2s linear infinite;animation-play-state:paused;animation-delay:2.6s}
.laeuft .kurs .fahrt,.laeuft .kurs .ankunft{animation-play-state:running}
.kurs .puls{stroke-width:1.4}
@keyframes kurs-fahrt{0%{opacity:1;transform:translate(0,0);animation-timing-function:cubic-bezier(.5,0,1,.55)}30%{opacity:1;transform:translate(-120.9px,-116.6px);animation-timing-function:ease-in}33%{opacity:0;transform:translate(-120.9px,-116.6px)}100%{opacity:0;transform:translate(-120.9px,-116.6px)}}
@keyframes kurs-ankunft{0%,29.9%{opacity:0;transform:scale(1)}30%{opacity:1;transform:scale(1);animation-timing-function:cubic-bezier(.2,.6,.3,1)}62%{opacity:0;transform:scale(4.4)}100%{opacity:0;transform:scale(4.4)}}
@media (prefers-reduced-motion:reduce){.kurs .fahrt,.kurs .ankunft{animation:none;opacity:0}}

/* ---------- Tapete aus dem Zeichen (Gitter mit Ring und Brett), Ton in Ton. Nur punktuell, nie flächig über die ganze Seite (Robert 10.10.2026:
   «ganz dezent punktuell, um zu unterstreichen, wie edel die Seite ist, nicht in jedem zweiten Absatz»).
   Eine Stelle je Seite, auf der Kontaktseite zwei (zweite Runde, Robert: «jetzt ist es zu wenig»). */
.orte,.mannschaft,#kooperationen,#bieten,.versand{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg fill='none' stroke='%23ebdbce' stroke-opacity='0.065' stroke-width='1.1'%3E %3Cpath d='M0 0L150 150L300 0M0 300L150 150L300 300' stroke-width='.7'/%3E %3Ccircle cx='150' cy='150' r='40'/%3E%3Ccircle cx='150' cy='150' r='35' stroke-width='.6'/%3E %3Cpath d='M150 118C163 134 163 166 150 182C137 166 137 134 150 118Z'/%3E%3Cpath d='M150 122V178' stroke-width='.6'/%3E %3Cpath d='M0 -9L9 0L0 9L-9 0ZM300 -9L309 0L300 9L291 0ZM0 291L9 300L0 309L-9 300ZM300 291L309 300L300 309L291 300Z' fill='%23ebdbce' fill-opacity='0.065' stroke='none'/%3E %3Cpath d='M150 -6L156 0L150 6L144 0ZM150 294L156 300L150 306L144 300ZM-6 150L0 156L6 150L0 144ZM294 150L300 156L306 150L300 144Z' fill='%23ebdbce' fill-opacity='0.065' stroke='none'/%3E %3C/g%3E%3C/svg%3E");background-size:300px;background-position:50% 0}
#karte.karten{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg fill='none' stroke='%23ebdbce' stroke-opacity='0.065' stroke-width='1.1'%3E %3Cpath d='M0 0L150 150L300 0M0 300L150 150L300 300' stroke-width='.7'/%3E %3Ccircle cx='150' cy='150' r='40'/%3E%3Ccircle cx='150' cy='150' r='35' stroke-width='.6'/%3E %3Cpath d='M150 118C163 134 163 166 150 182C137 166 137 134 150 118Z'/%3E%3Cpath d='M150 122V178' stroke-width='.6'/%3E %3Cpath d='M0 -9L9 0L0 9L-9 0ZM300 -9L309 0L300 9L291 0ZM0 291L9 300L0 309L-9 300ZM300 291L309 300L300 309L291 300Z' fill='%23ebdbce' fill-opacity='0.065' stroke='none'/%3E %3Cpath d='M150 -6L156 0L150 6L144 0ZM150 294L156 300L150 306L144 300ZM-6 150L0 156L6 150L0 144ZM294 150L300 156L306 150L300 144Z' fill='%23ebdbce' fill-opacity='0.065' stroke='none'/%3E %3C/g%3E%3C/svg%3E");background-size:300px;background-position:50% 0}
/* Startseite: Tapete beim Kompass statt bei Herkunft (Robert 10.10.2026) */
#karte:not(.karten){background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg fill='none' stroke='%236b5f4a' stroke-opacity='0.075' stroke-width='1.1'%3E %3Cpath d='M0 0L150 150L300 0M0 300L150 150L300 300' stroke-width='.7'/%3E %3Ccircle cx='150' cy='150' r='40'/%3E%3Ccircle cx='150' cy='150' r='35' stroke-width='.6'/%3E %3Cpath d='M150 118C163 134 163 166 150 182C137 166 137 134 150 118Z'/%3E%3Cpath d='M150 122V178' stroke-width='.6'/%3E %3Cpath d='M0 -9L9 0L0 9L-9 0ZM300 -9L309 0L300 9L291 0ZM0 291L9 300L0 309L-9 300ZM300 291L309 300L300 309L291 300Z' fill='%236b5f4a' fill-opacity='0.075' stroke='none'/%3E %3Cpath d='M150 -6L156 0L150 6L144 0ZM150 294L156 300L150 306L144 300ZM-6 150L0 156L6 150L0 144ZM294 150L300 156L306 150L300 144Z' fill='%236b5f4a' fill-opacity='0.075' stroke='none'/%3E %3C/g%3E%3C/svg%3E");background-size:300px;background-position:50% 0}
#gruppen{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cg fill='none' stroke='%236b5f4a' stroke-opacity='0.075' stroke-width='1.1'%3E %3Cpath d='M0 0L150 150L300 0M0 300L150 150L300 300' stroke-width='.7'/%3E %3Ccircle cx='150' cy='150' r='40'/%3E%3Ccircle cx='150' cy='150' r='35' stroke-width='.6'/%3E %3Cpath d='M150 118C163 134 163 166 150 182C137 166 137 134 150 118Z'/%3E%3Cpath d='M150 122V178' stroke-width='.6'/%3E %3Cpath d='M0 -9L9 0L0 9L-9 0ZM300 -9L309 0L300 9L291 0ZM0 291L9 300L0 309L-9 300ZM300 291L309 300L300 309L291 300Z' fill='%236b5f4a' fill-opacity='0.075' stroke='none'/%3E %3Cpath d='M150 -6L156 0L150 6L144 0ZM150 294L156 300L150 306L144 300ZM-6 150L0 156L6 150L0 144ZM294 150L300 156L306 150L300 144Z' fill='%236b5f4a' fill-opacity='0.075' stroke='none'/%3E %3C/g%3E%3C/svg%3E");background-size:300px;background-position:50% 0}

/* ---------- Karte: Strich mit dem Zeichen in der Mitte zwischen Drinks, Essen und Wein */
.trenner{display:flex;align-items:center;gap:clamp(20px,2.4vw,36px);margin:clamp(56px,7vw,110px) 0}
.trenner::before,.trenner::after{content:'';flex:1;height:1px;background:rgba(235,219,206,.22)}
.trenner img{width:clamp(38px,3.2vw,50px);height:auto;opacity:.92}

/* Presse, Kooperation anfragen: zwei Abzüge und das Herz-Zeichen unter der Mail-Adresse (Robert 10.10.2026: «cooler machen») */
.koop__polas{position:relative;height:clamp(260px,24vw,380px);margin-top:clamp(30px,3.6vw,56px)}
.koop__polas .gpola{width:clamp(160px,15vw,230px)}
.koop__p1{left:0;top:4%;rotate:-5deg;z-index:1}
.koop__p2{left:40%;top:0;rotate:4deg;z-index:2}
.koop__p2::before{transform:rotate(5deg);background:#bfb39d}
.koop__stempel{position:absolute;left:min(72%,400px);top:46%;width:clamp(54px,5vw,78px);height:clamp(54px,5vw,78px);color:var(--creme);opacity:.55;rotate:-12deg}
@media (max-width:860px){.koop__polas .gpola{width:44%}.koop__p2{left:42%}.koop__stempel{left:auto;right:0;top:auto;bottom:0}}

/* Bewerbung (helle Fläche): Mail-Adresse dunkel, damit sie lesbar ist; Zeichen in Taupe */
.fl--papier .koop__mail a,.fl--creme .koop__mail a{color:var(--tinte);border-bottom-color:rgba(11,12,16,.3)}
.fl--papier .koop__stempel,.fl--creme .koop__stempel{color:var(--taupe);opacity:.7}
/* Breite Knöpfe in Formularen: Wort mittig, der Knauf bleibt rechts (Robert 10.10.2026, Newsletter «Anmelden») */
.kn--voll{position:relative;justify-content:center;padding-left:64px;padding-right:64px}
.kn--voll i{position:absolute;right:8px;top:50%;margin-top:-20px}
.kn--voll:hover i{transform:translateX(2px) scale(1.06) rotate(45deg)}

/* Abzüge in schmalen Spalten (Bewerbung): fest nebeneinander statt in Prozent */
.koop__polas{min-width:min(100%,460px)}
.koop__polas .koop__p2{left:clamp(150px,13.5vw,210px)}
.koop__polas .koop__stempel{left:clamp(330px,30vw,420px)}
@media (max-width:860px){.koop__polas .koop__p2{left:44%}.koop__polas .koop__stempel{left:auto}}

/* Bänder zum Blättern scrollen nur waagerecht. Ohne das macht die Einschwebe-Bewegung (Karten 70 px tiefer) das Band kurz senkrecht scrollbar,
   und das Mausrad schiebt dann die Karte im Band hoch statt die Seite (Robert 10.10.2026, alle Restaurant-Karten) */
.band{overflow-y:hidden}

/* Karten (alle Restaurants), dritte Fassung «eleganter, edler» (Robert 10.10.2026 abends): jede Karte steigt sanft und lang aus der Tiefe,
   von links nach rechts gestaffelt; das Foto zoomt dabei langsam in Ruhe, Bogenlinie und Text folgen einen Atemzug später. Nur transform/opacity. */
.karten .gangband>.gk[data-r]{opacity:0;transform:translateY(46px) scale(.975);transform-origin:50% 100%;
  transition:opacity 1.5s cubic-bezier(.22,1,.36,1),transform 2s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0)*150ms)}
.karten .gangband>.gk[data-r].da{opacity:1;transform:none}
.karten .gk[data-r] .gk__b img{transform:scale(1.12);transition:transform 2.6s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0)*150ms)}
.karten .gk[data-r].da .gk__b img{transform:none}
.karten .gk[data-r] .gk__b::after{opacity:0;transition:opacity 1.4s ease;transition-delay:calc(var(--i,0)*150ms + .7s)}
.karten .gk[data-r].da .gk__b::after{opacity:1}
.karten .gk[data-r]>:not(.gk__b){opacity:0;transform:translateY(12px);transition:opacity 1.2s ease,transform 1.6s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0)*150ms + .45s)}
.karten .gk[data-r].da>:not(.gk__b){opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.karten .gangband>.gk[data-r],.karten .gk[data-r] *,.karten .gk[data-r] .gk__b::after{opacity:1!important;transform:none!important;transition:none!important}}

/* Querprüfung 21.10.2026 (Lernauswertung Kuchler, Punkt 11): Zoom beim Überfahren leise, höchstens 2 % über 2,6 s. Werte vorher: 1.035; 1.04; 1.045; 1.06 */
html:not(#q1):not(#q2):not(#q3) .ware:hover .rahmen__k img{transform:scale(1.02);transition:transform 2.6s cubic-bezier(.2,.62,.24,1)}
html:not(#q1):not(#q2):not(#q3) .mauer figure:hover img{transform:scale(1.02);transition:transform 2.6s cubic-bezier(.2,.62,.24,1)}
html:not(#q1):not(#q2):not(#q3) .lk:hover .lk__b img{transform:scale(1.02);transition:transform 2.6s cubic-bezier(.2,.62,.24,1)}
html:not(#q1):not(#q2):not(#q3) .fh:hover .fh__bild img{transform:scale(1.02);transition:transform 2.6s cubic-bezier(.2,.62,.24,1)}
html:not(#q1):not(#q2):not(#q3) .tisch__wahl a.sitz:hover .sitz__bild img{transform:scale(1.02);transition:transform 2.6s cubic-bezier(.2,.62,.24,1)}
html:not(#q1):not(#q2):not(#q3) .quer:hover .quer__b img{transform:scale(1.02);transition:transform 2.6s cubic-bezier(.2,.62,.24,1)}
/* Durchgang 23.10.2026 (Robert «ok»): Restaurants je Reihe ein Knopf, Speisekarte und Details als Textlinks darunter */
.reihe__wege{display:flex;flex-wrap:wrap;gap:6px 30px;margin-top:14px}
/* Durchgang 23.10.2026 (Robert «ok»): weniger leere Fläche zwischen dem Bildband «Erst die Welle» und den grossen Zahlen */
.bruch+.prunk{padding-top:clamp(36px,4vw,60px)}
/* Durchgang 23.10.2026: Kleidung und Gutscheine fliegen von rechts ein; bis sie da sind, lag die Seite am Handy 40 px zu breit (seitlich wischbar) */
#kleidung,#gutscheine{overflow-x:clip}