/* N6 Kitchen & Bar · Design „Die Jukebox an der Poststraße“
   Die Seite ist die weiße Wand im N6 mit dem schwarzen Schriftzug, davor steht die Jukebox
   aus der gedruckten Karte. Inhalte sind Dinge, die dazugehören: Titelstreifen mit Nummern,
   Abzüge mit Fotoecken, Pergament wie in der Karte, Tischaufsteller, Türfolie, Stadtplan, Plakat, Platte. */
@import url('/assets/fonts/fonts.css');

:root{
  --ink:#121315; --ink-2:#1d1e21; --ink-3:#2b2c31;
  --wall:#eeebe4; --wall-2:#e3dfd5;
  --paper:#eadcc0; --paper-2:#f3e9d3; --paper-ink:#2a2419; --paper-line:#7a6740;
  --cream:#f6f1e6; --strip:#f8f2e4;
  --chrome:#d9dce1; --chrome-2:#a3a8b0; --chrome-3:#6d7178;
  --red:#c4322b; --red-2:#e2483f; --amber:#f0b24a; --amber-2:#ffd58a; --teal:#2b9a92; --brass:#b98c3f; --velvet:#8d8c92;
  --shadow:14px 24px 42px -14px rgba(18,19,21,.45), 2px 5px 12px -5px rgba(18,19,21,.35);
  --display:'Bodoni Moda',Didot,'Bodoni 72',Georgia,serif;
  --west:Rye,'Playfair Display',Georgia,serif;
  --slab:'Alfa Slab One',Rockwell,'Roboto Slab',serif;
  --mono:'Courier Prime','Courier New',monospace;
  --text:'Source Sans 3','Segoe UI',Helvetica,Arial,sans-serif;
  --w:1200px; --gut:clamp(16px,4vw,56px); --ease:cubic-bezier(.2,.7,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;color:var(--ink);font:400 17px/1.6 var(--text);overflow-x:hidden;background:var(--wall)}
/* Putzwand: feines Korn, Licht von oben */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:linear-gradient(180deg,rgba(255,255,255,.55),transparent 18%),radial-gradient(900px 600px at 80% 0%,rgba(255,255,255,.35),transparent 60%)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.09;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
main,header,footer{position:relative;z-index:1}
img{max-width:100%;height:auto;display:block}
svg{display:block}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-weight:400}
p{margin:0 0 1em}
::selection{background:var(--amber);color:var(--ink)}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:var(--amber);color:var(--ink);padding:8px 14px;z-index:100}
.skip:focus{left:8px}
.wrap{width:min(var(--w),100% - 2*var(--gut));margin-inline:auto}
.mono{font-family:var(--mono)}
.sr{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}
mark{background:#ffe97a;padding:0 3px}

/* Knöpfe: eckig, wie die Tasten an der Jukebox */
.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 22px;font:700 12px/1 var(--text);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;
  color:var(--cream);background:var(--ink);border:1px solid var(--ink);box-shadow:0 2px 0 #000,3px 6px 14px -6px rgba(18,19,21,.6);cursor:pointer;transition:transform .25s var(--ease),box-shadow .25s}
.btn:hover{transform:translateY(-2px);box-shadow:0 4px 0 #000,6px 10px 20px -8px rgba(18,19,21,.6)}
.btn:active{transform:translateY(1px);box-shadow:0 0 0 #000}
.btn-red{background:var(--red);border-color:#8e211c;box-shadow:0 2px 0 #7d1d18,3px 6px 14px -6px rgba(18,19,21,.6)}
.btn-red:hover{box-shadow:0 4px 0 #7d1d18,6px 10px 20px -8px rgba(18,19,21,.6)}
.btn-amber{background:var(--amber);border-color:#b57d22;color:var(--ink);box-shadow:0 2px 0 #9a6a1c,3px 6px 14px -6px rgba(18,19,21,.6)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:none}
.night .btn-ghost{color:var(--cream);border-color:rgba(246,241,230,.5)}
.link{color:inherit;font-weight:600;text-decoration:none;border-bottom:2px solid var(--red)}
.link:hover{border-color:currentColor}

/* Kopfleiste */
.top{position:sticky;top:0;z-index:50;background:rgba(238,235,228,.9);backdrop-filter:blur(10px);color:var(--ink);border-bottom:1px solid rgba(18,19,21,.14)}
.top-inner{width:min(var(--w),100% - 2*var(--gut));margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:68px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.brand img{width:42px;height:42px;border-radius:50%}
.brand span{font:500 20px/1 var(--display);letter-spacing:.02em}
.brand span small{display:block;font:700 9px/1 var(--text);letter-spacing:.32em;text-transform:uppercase;margin-top:5px;color:#4a4b50}
nav{display:flex;align-items:center;gap:6px}
nav a:not(.btn){padding:10px 12px;font:700 12px/1 var(--text);letter-spacing:.18em;text-transform:uppercase;text-decoration:none;border-bottom:2px solid transparent}
nav a:not(.btn):hover,nav a[aria-current=page]{border-bottom-color:var(--red)}
nav .btn{padding:11px 16px;margin-left:8px}
.burger{display:none;background:none;border:1px solid rgba(18,19,21,.4);color:var(--ink);padding:9px 12px;font:700 12px/1 var(--text);letter-spacing:.2em;text-transform:uppercase;cursor:pointer;align-items:center;gap:10px}
.burger i{display:block;width:20px;height:12px;position:relative}
.burger i::before,.burger i::after,.burger b{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .3s,opacity .3s}
.burger i::before{top:0}.burger b{top:5px}.burger i::after{bottom:0}
.burger[aria-expanded=true] i::before{transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded=true] i::after{transform:translateY(-5px) rotate(-45deg)}
.burger[aria-expanded=true] b{opacity:0}
@media(max-width:900px){
  .burger{display:inline-flex}
  nav{position:absolute;left:0;right:0;top:100%;display:none;flex-direction:column;align-items:stretch;background:var(--wall);border-bottom:1px solid rgba(18,19,21,.14);padding:10px var(--gut) 18px}
  nav.open{display:flex}
  nav a:not(.btn){padding:14px 4px;border-bottom:1px solid rgba(18,19,21,.1)}
  nav .btn{margin:14px 0 0;justify-content:center}
}

/* Szene: Objekte frei auf der Wand, unter 1000 px gestapelt */
.scene{position:relative;width:min(var(--w),100% - 2*var(--gut));margin-inline:auto;min-height:var(--h,700px)}
.obj{position:absolute;left:var(--x,0);top:var(--y,0);width:var(--wd,auto);transform:rotate(var(--r,0deg));transform-origin:center}
.obj.z1{z-index:1}.obj.z2{z-index:2}.obj.z3{z-index:3}.obj.z4{z-index:4}.obj.z5{z-index:5}
@media(max-width:1000px){
  .scene{min-height:0;padding:30px 0 10px;display:flex;flex-direction:column;align-items:center}
  .obj{position:relative;left:auto;top:auto;width:var(--wm,100%);max-width:100%;transform:rotate(var(--rm,0deg));margin:0 0 28px}
  .hide-m{display:none!important}
}

/* Wandschriftzug wie im Laden */
.wall-sign{position:absolute;right:0;top:-26px;z-index:0;color:var(--ink);pointer-events:none;user-select:none;text-align:center}
.wall-sign b{display:block;font:500 clamp(150px,24vw,330px)/.82 var(--display);letter-spacing:-.03em}
.wall-sign small{display:block;font:700 clamp(10px,1.4vw,18px)/1 var(--text);letter-spacing:.7em;text-transform:uppercase;margin-top:14px;padding-left:.7em}
@media(max-width:1000px){.wall-sign{position:relative;right:auto;top:auto;order:-1;margin-bottom:10px}}

/* Jukebox aus der Karte */
.jukebox{position:relative;width:100%;filter:drop-shadow(10px 26px 30px rgba(18,19,21,.5))}
.jb-arch{position:relative;padding-top:64%;background:#17171a;border-radius:50% 50% 0 0/100% 100% 0 0;border:8px solid #35363c;border-bottom:0;overflow:hidden;
  box-shadow:inset 0 0 0 3px #101013}
.tube{position:absolute;left:var(--i);right:var(--i);top:var(--i);bottom:0;border-radius:50% 50% 0 0/100% 100% 0 0;border:9px solid var(--c);border-bottom:0;
  box-shadow:0 0 22px var(--c),inset 0 0 12px rgba(255,255,255,.35);opacity:.95}
.tube::before{content:"";position:absolute;inset:-9px -9px 0;border-radius:inherit;background:radial-gradient(circle at 20% 10%,rgba(255,255,255,.55) 0 3px,transparent 4px) 0 0/48px 48px;opacity:.7;animation:bubbles 6s linear infinite}
@keyframes bubbles{to{background-position:0 -48px}}
@media(prefers-reduced-motion:reduce){.tube::before{animation:none}}
.jb-window{position:absolute;left:19%;right:19%;bottom:0;top:34%;background:linear-gradient(180deg,#0c0c0e,#16161a);border:3px solid #4a4c53;border-bottom:0;border-radius:10px 10px 0 0;
  padding:12px 12px 8px;color:var(--amber-2);font:400 12px/1.35 var(--mono);text-align:center;box-shadow:inset 0 0 30px rgba(240,178,74,.15)}
.jb-window .now{display:block;font:700 9px/1 var(--text);letter-spacing:.32em;text-transform:uppercase;color:var(--red-2);margin-bottom:8px}
.jb-window .big{display:block;font:600 clamp(20px,2vw,26px)/1.05 var(--display);color:var(--cream);text-transform:none;letter-spacing:.02em;margin-bottom:6px}
.jb-window i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 8px var(--teal);vertical-align:middle;margin-right:6px;animation:pulse 2.2s infinite}
.jb-window[data-open=false] i{background:var(--red-2);box-shadow:0 0 8px var(--red-2);animation:none}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(43,154,146,.6)}50%{box-shadow:0 0 0 7px rgba(43,154,146,0)}}
.jb-body{background:linear-gradient(90deg,#26262b,#3a3b41 8%,#2a2a2f 50%,#3a3b41 92%,#26262b);border:8px solid #35363c;border-top:0;border-bottom:0;padding:10px 10px 0}
.jb-grille{position:relative;display:grid;place-items:center;aspect-ratio:2.1;background:
  repeating-linear-gradient(45deg,transparent 0 9px,rgba(0,0,0,.55) 9px 11px),repeating-linear-gradient(-45deg,transparent 0 9px,rgba(0,0,0,.55) 9px 11px),linear-gradient(#3b2b1b,#1e1610);
  border:3px solid var(--chrome-2);box-shadow:inset 0 0 0 2px #17171a,inset 0 0 26px #000}
.jb-grille img{width:36%;border-radius:50%;box-shadow:0 0 0 4px var(--chrome-2),0 6px 14px rgba(0,0,0,.6)}
.jb-panel{margin:10px -2px 0;background:#1a1a1d;border:3px solid var(--chrome-2);padding:6px}
.jb-keys{display:flex;gap:4px;justify-content:center;padding:10px 4px;background:linear-gradient(#3e3f46,#26262b)}
.jb-keys b{display:grid;place-items:center;width:24px;height:24px;background:linear-gradient(#f2f3f5,#c2c6cc);color:var(--ink);font:700 11px/1 var(--mono);border-radius:2px;box-shadow:0 2px 0 #7a7e86}
.jb-keys b.red{background:linear-gradient(#ef5a50,#b52c26);color:#fff;box-shadow:0 2px 0 #6e1712}
.jb-base{height:26px;background:linear-gradient(#26262b,#111114);border:8px solid #35363c;border-top:0;border-radius:0 0 6px 6px}

/* Titelstreifen: jede Position ein Streifen mit Nummer, wie in der Jukebox */
.strips{display:grid;gap:5px}
.strip{display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:10px;background:var(--strip);color:var(--ink);padding:7px 10px;
  border-top:2px solid var(--red);border-bottom:2px solid var(--ink);text-decoration:none;position:relative;transition:transform .25s var(--ease),background .25s}
.strip::before{content:"";position:absolute;left:0;right:0;top:2px;height:1px;background:rgba(18,19,21,.35)}
.strip .code{font:700 11px/1 var(--mono);background:var(--ink);color:var(--strip);padding:6px 6px 5px;letter-spacing:.06em;min-width:34px;text-align:center}
.strip.red .code{background:var(--red)}
.strip .name{font:700 14px/1.15 var(--mono);text-transform:uppercase;letter-spacing:.02em}
.strip .name small{display:block;font:400 12px/1.3 var(--text);text-transform:none;letter-spacing:0;color:#5a544a;margin-top:2px}
.strip .price{font:700 14px/1 var(--mono);white-space:nowrap}
a.strip:hover{background:#fffaf0;transform:translateX(3px)}
.strip.big{padding:12px 14px;column-gap:14px}
.strip.big .name{font:600 19px/1.15 var(--display);text-transform:none;letter-spacing:.01em}
.strip.big .name small{font-size:14.5px;line-height:1.4;margin-top:4px}
.strip.big .price{font-size:17px}
.strip .al{font:400 11px/1 var(--mono);color:#6d665a;margin-left:6px;letter-spacing:.04em}
.strip .plus{display:block;font:400 12.5px/1.4 var(--mono);color:#4d4639;margin-top:3px}

/* Abzüge mit schwarzen Fotoecken */
.print{position:relative;background:#fff;padding:9px 9px 12px;box-shadow:var(--shadow)}
.print picture,.print img{display:block;width:100%}
.print img{object-fit:cover;aspect-ratio:var(--ar,4/3)}
.print::before,.print::after,.print .ec::before,.print .ec::after{content:"";position:absolute;width:0;height:0;border:15px solid transparent}
.print::before{left:-3px;top:-3px;border-left-color:var(--ink);border-top-color:var(--ink)}
.print::after{right:-3px;top:-3px;border-right-color:var(--ink);border-top-color:var(--ink)}
.print .ec::before{left:-3px;bottom:-3px;border-left-color:var(--ink);border-bottom-color:var(--ink)}
.print .ec::after{right:-3px;bottom:-3px;border-right-color:var(--ink);border-bottom-color:var(--ink)}
.cap{display:block;margin:9px 2px 0;font:400 12px/1.3 var(--mono);color:#4a4b50;letter-spacing:.02em}
figure{margin:0}

/* Pergament wie die gedruckte Karte */
.card{position:relative;background:radial-gradient(120% 90% at 20% 0%,rgba(255,250,236,.7),transparent 60%),linear-gradient(160deg,var(--paper-2),var(--paper) 55%,#e0cfae);
  color:var(--paper-ink);padding:24px 26px 22px;border:1px solid #c9b78f;box-shadow:var(--shadow);font-size:16.5px;line-height:1.55}
.card::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.02 .05' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .55 0 0 0 0 .45 0 0 0 0 .3 0 0 0 .45 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.card>*{position:relative}
.card h1,.card h2{display:flex;align-items:center;gap:14px;font:400 clamp(24px,2.6vw,32px)/1.1 var(--west);letter-spacing:.06em;text-transform:uppercase;color:#1f1a12;margin:0 0 14px}
.card h1::before,.card h1::after,.card h2::before,.card h2::after{content:"";flex:1;height:1px;background:var(--paper-line);box-shadow:0 3px 0 -1px var(--paper-line)}
.card h1.left::before,.card h2.left::before{display:none}
.card h3{font:600 20px/1.2 var(--display);margin:14px 0 6px}
.card .lead{font:400 20px/1.4 var(--display);color:#1f1a12;margin-bottom:12px}
.card p:last-child{margin-bottom:0}
.card.dark{background:linear-gradient(160deg,#2a2823,#1c1b18);color:#eee4cf;border-color:#4a4536}
.card.dark h2{color:#f0e3c4}
.card.dark h2::before,.card.dark h2::after{background:#8c7b52;box-shadow:0 3px 0 -1px #8c7b52}
.card .rule{height:1px;background:var(--paper-line);margin:16px 0;box-shadow:0 3px 0 -1px var(--paper-line)}
.card ul{margin:0;padding-left:20px}
.card li{margin:4px 0}

/* Tischaufsteller aus schwarzem Acryl: der Reservierungsknopf */
.stand{display:block;width:100%;text-decoration:none;color:var(--cream);background:linear-gradient(160deg,#34353b,#121316 55%,#1f2025);padding:22px 20px 18px;text-align:center;
  border:1px solid #4a4c53;box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.18);position:relative;transition:transform .35s var(--ease)}
.stand::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 42%,rgba(255,255,255,.09) 47%,transparent 54%);pointer-events:none}
.stand::after{content:"";position:absolute;left:8%;right:8%;bottom:-14px;height:14px;background:linear-gradient(#d3d6db,#8b8f96 60%,#5e6167);border-radius:0 0 3px 3px}
.stand b{display:block;font:500 clamp(52px,5vw,72px)/1 var(--display);color:var(--cream)}
.stand span{display:block;font:400 22px/1.15 var(--display);margin-top:6px}
.stand small{display:block;margin-top:12px;font:700 10px/1 var(--text);letter-spacing:.26em;text-transform:uppercase;color:var(--amber)}
.stand:hover{transform:perspective(700px) rotateX(10deg) rotate(var(--r,0deg)) translateY(-3px)}

/* Türfolie: Öffnungszeiten auf dem Glas */
.door{background:linear-gradient(120deg,#262930,#101215 55%,#1c1f25);color:#fff;border:9px solid #2c2f34;padding:22px 20px;position:relative;box-shadow:var(--shadow)}
.door::before{content:"";position:absolute;inset:0;background:linear-gradient(112deg,transparent 30%,rgba(255,255,255,.07) 36%,rgba(255,255,255,.02) 52%,transparent 60%);pointer-events:none}
.door .t{font:700 11px/1 var(--text);letter-spacing:.34em;text-transform:uppercase;color:#fff;text-align:center;margin:0 0 14px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.35)}
.door ul{list-style:none;margin:0;padding:0;font:400 14px/1.5 var(--mono)}
.door li{display:flex;justify-content:space-between;gap:12px;padding:3px 0;border-bottom:1px dotted rgba(255,255,255,.18)}
.door li.today{color:var(--amber-2);font-weight:700}
.door li.today span:first-child::after{content:" · heute";font-weight:400;font-size:12px}
.door .st{margin:14px 0 0;text-align:center;font:400 13px/1.4 var(--mono);color:#cfd3d9}
.door .st i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 8px var(--teal);margin-right:7px;vertical-align:middle}
.door[data-open=false] .st i{background:var(--red-2);box-shadow:0 0 8px var(--red-2)}
.door .n6{display:block;margin:16px auto 0;width:54px;opacity:.9}

/* Stadtplan aus Papier */
.plan{position:relative;background:#f7f4ec;padding:10px;box-shadow:var(--shadow);border:1px solid #d8d2c4}
.plan svg{width:100%;height:auto;background:#f3efe4}
.plan .map{display:grid;place-items:center;position:relative}
.plan .map .btn{position:absolute;bottom:14px;left:50%;transform:translateX(-50%)}
.plan .map iframe{width:100%;aspect-ratio:1.15;border:0}
.plan .adr{font:400 13px/1.4 var(--mono);color:#3b3c41;padding:10px 4px 2px}

/* Plakat mit Reißzwecken */
.poster{position:relative;background:#fff;padding:6px;box-shadow:var(--shadow)}
.poster img{width:100%;aspect-ratio:var(--ar,4/5);object-fit:cover}
.pin{position:absolute;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff8a80,var(--red) 60%,#7d1d18);box-shadow:2px 3px 5px rgba(0,0,0,.45);z-index:2}
.pin.tl{left:10px;top:8px}.pin.tr{right:10px;top:8px}.pin.bl{left:12px;bottom:10px}.pin.br{right:12px;bottom:10px}

/* Single mit Etikett */
.record{position:relative;width:100%;aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle at 50% 50%,#131315 0 1.5px,#1e1e22 1.5px 3.5px),#151518;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.7),inset 0 0 0 1px #2a2a2f;display:grid;place-items:center;transition:transform 1.4s var(--ease)}
.record::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 200deg,transparent 0 40%,rgba(255,255,255,.09) 46%,transparent 52%,transparent 80%,rgba(255,255,255,.06) 86%,transparent 92%)}
.record .label{width:38%;aspect-ratio:1;border-radius:50%;background:var(--cream);display:grid;place-items:center;position:relative;box-shadow:0 0 0 2px #0a0a0b}
.record .label img{width:88%}
.record .label::after{content:"";position:absolute;width:9%;height:9%;border-radius:50%;background:#151518;box-shadow:inset 0 0 0 1px #000}
.record:hover{transform:rotate(38deg)}
@media(prefers-reduced-motion:reduce){.record:hover{transform:none}}

/* Notizzettel, getippt */
.note{background:#fbf8f1;color:var(--ink);padding:16px 18px;box-shadow:var(--shadow);font:400 14px/1.5 var(--mono);border-top:6px solid var(--red)}
.note b{display:block;font:700 15px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.note p:last-child{margin:0}

/* Bänder über die volle Breite: Bartresen (schwarzer Marmor) und Nacht */
.band{position:relative;padding:60px 0}
.marble{background:#111113 url(/assets/img/marmor-schwarz.webp) center/720px repeat;color:var(--cream)}
.marble::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.18) 14%,rgba(0,0,0,.18) 86%,rgba(0,0,0,.45));pointer-events:none}
.night{background:#0e0f12;color:var(--cream)}
.night::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(700px 520px at 18% 30%,rgba(240,178,74,.16),transparent 65%),radial-gradient(600px 400px at 80% 70%,rgba(43,154,146,.1),transparent 60%)}
.night .wall-sign{color:rgba(246,241,230,.08)}
.night .cap{color:#b7b3a8}
.night .print{background:#f4efe4}
.night .note{background:#1c1d21;color:var(--cream);border-top-color:var(--amber)}
.night .note b{color:var(--amber-2)}

/* Speisekarte: Wahlpanel mit Tasten */
.menu-nav{position:sticky;top:68px;z-index:40;background:linear-gradient(#3e3f46,#26262b);border-bottom:3px solid var(--chrome-2);padding:10px 0}
.menu-nav .row{width:min(var(--w),100% - 2*var(--gut));margin-inline:auto;display:flex;flex-wrap:wrap;gap:6px}
.menu-nav a{display:inline-flex;align-items:center;gap:8px;padding:8px 12px 8px 8px;background:linear-gradient(#f2f3f5,#c9cdd3);color:var(--ink);text-decoration:none;font:700 12px/1 var(--text);letter-spacing:.14em;text-transform:uppercase;border-radius:2px;box-shadow:0 2px 0 #7a7e86}
.menu-nav a b{display:grid;place-items:center;width:22px;height:22px;background:var(--ink);color:var(--cream);font:700 11px/1 var(--mono);border-radius:2px}
.menu-nav a.active,.menu-nav a:hover{background:linear-gradient(#ffe2a8,var(--amber))}
.menu-nav a.active b{background:var(--red)}
.panel{background:#1a1a1d;border:4px solid var(--chrome-2);box-shadow:var(--shadow),inset 0 0 0 3px #101013;padding:14px}
.panel+.panel{margin-top:34px}
.cat{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;padding:10px 6px 14px;color:var(--cream)}
.cat b{display:grid;place-items:center;width:38px;height:38px;background:linear-gradient(#f2f3f5,#c2c6cc);color:var(--ink);font:700 18px/1 var(--mono);border-radius:2px;box-shadow:0 3px 0 #7a7e86;align-self:center}
.cat span{font:400 clamp(24px,3vw,34px)/1 var(--west);letter-spacing:.06em;text-transform:uppercase;color:var(--amber-2)}
.cat small{font:400 14px/1.3 var(--mono);color:#cfcabd}
.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;align-items:start}
.menu-grid .strips{gap:8px}
@media(max-width:860px){.menu-grid{grid-template-columns:1fr}}
.legend{font:400 13px/1.6 var(--mono);color:#4a4b50;margin-top:20px}

/* Formulare: Wunschkarte */
.field{display:grid;gap:2px;line-height:32px}
.field label{font:700 12px/28px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:#4d4639}
.field input,.field select,.field textarea{width:100%;background:rgba(255,255,255,.35);border:0;border-bottom:1.5px solid rgba(42,36,25,.6);color:var(--paper-ink);padding:0 6px;font:400 17px/30px var(--text);border-radius:0;min-height:32px}
.field select{appearance:auto}
.field textarea{min-height:96px;resize:vertical;line-height:1.5;padding:6px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-bottom-color:var(--red);box-shadow:0 2px 0 var(--red)}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 22px}
.form-grid .full{grid-column:1/-1}
@media(max-width:600px){.form-grid{grid-template-columns:1fr}}
.hp{position:absolute;clip-path:inset(50%);width:1px;height:1px;overflow:hidden}
.msg{padding:10px 14px;border:1px solid rgba(42,36,25,.3);font-size:15px;display:none;background:rgba(255,255,255,.5);line-height:1.4}
.msg.ok{display:block;border-color:var(--teal);color:#145b56}
.msg.err{display:block;border-color:var(--red);color:#8e211c}

/* A4-Blatt für Rechtstexte */
.sheet{max-width:820px;margin:50px auto 70px;background:#fff;color:var(--ink);padding:clamp(24px,5vw,60px);box-shadow:var(--shadow);font-size:16px;line-height:1.6}
.sheet h1{font:500 clamp(34px,4vw,48px)/1.05 var(--display);margin:0 0 22px}
.sheet h2{font:600 22px/1.2 var(--display);margin:30px 0 8px;padding-top:14px;border-top:1px solid rgba(18,19,21,.2)}
.sheet h3{font:700 13px/1.3 var(--text);letter-spacing:.18em;text-transform:uppercase;margin:18px 0 4px;color:#4a4b50}
.sheet p{margin:0 0 12px}
.sheet a{color:var(--red)}

/* Einblenden */
.r{opacity:0;translate:0 18px;transition:opacity .9s var(--ease),translate .9s var(--ease)}
.r.in{opacity:1;translate:0 0}
.r-2{transition-delay:.12s}.r-3{transition-delay:.24s}.r-4{transition-delay:.36s}
@media(prefers-reduced-motion:reduce){.r{opacity:1;translate:none;transition:none}}

/* Fuß */
footer{background:var(--ink);color:#cfcabd;padding:50px 0 30px;margin-top:70px;font-size:14.5px}
.foot{display:grid;grid-template-columns:auto 1fr auto;gap:30px;align-items:start}
.foot img{width:96px;height:96px;border-radius:50%}
.foot p{margin:0;line-height:1.7}
.foot a{color:var(--cream);text-decoration:none}
.foot a:hover{color:var(--amber)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;font:700 12px/1.4 var(--text);letter-spacing:.14em;text-transform:uppercase}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:30px;padding-top:18px;border-top:1px solid rgba(246,241,230,.15);font:400 12.5px/1.5 var(--mono);color:#8f8a7e}
@media(max-width:820px){.foot{grid-template-columns:1fr}}