/* Panda Noodles Hamburg · „Das Tablett am Fenstertisch“
   Die Seite ist der Holztisch an der Hoheluftchaussee 28 von oben: schwarzes Tablett, weiße Schüssel mit
   grünem Aufdruck, rote Serviette, Stäbchen, Holzlöffel, Tischaufsteller aus Creme-Karton mit weinroter
   Bordüre (wie die echten Aufsteller im Laden), Panda-Tea-Becher, Bestellzettel, Papiertüte. */

:root {
  --gruen: #6cb92c;          /* Logo-Grün, aus dem Original-PNG gemessen */
  --gruen-schild: #3d8b1f;   /* Ladenschild, dunkler für weiße Schrift */
  --gruen-tinte: #2f6b2a;    /* Pinselschrift der Aufsteller */
  --gruen-hell: #e4f2d6;
  --orange: #f39a2b;
  --orange-tinte: #d97a12;
  --weinrot: #7a2a2a;        /* Bordüre der Aufsteller */
  --signalrot: #c8202c;      /* Papierserviette, Chili */
  --creme: #f6efe1;
  --creme-2: #efe4cd;
  --papier: #fffdf7;
  --holz: #5a3b26;
  --holz-2: #4a2f1d;
  --holz-3: #6b4a31;
  --tablett: #161616;
  --tinte: #1f1c18;
  --text: #2b2520;
  --text-2: #5d534a;
  --f-brush: 'Caveat Brush', 'Segoe Print', cursive;
  --f-hand: 'Patrick Hand', 'Segoe Print', cursive;
  --f-text: 'Nunito', 'Segoe UI', system-ui, sans-serif;
  --f-serif: 'Times New Roman', Times, 'Liberation Serif', serif;
  --f-cn: 'Noto Serif SC', 'Songti SC', 'STSong', 'SimSun', 'PingFang SC', 'Microsoft YaHei', serif;
  --rand: clamp(16px, 4vw, 56px);
  --breite: 1280px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body {
  margin: 0; font-family: var(--f-text); font-size: 17px; line-height: 1.55; color: var(--text);
  background: var(--holz-2); overflow-x: hidden;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.05; font-weight: 400; }
p { margin: 0 0 .9em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure, blockquote { margin: 0; }
button { font: inherit; }
.skip { position: absolute; left: -9999px; top: 0; background: var(--tinte); color: #fff; padding: 10px 16px; z-index: 100; }
.skip:focus { left: 12px; top: 12px; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Ladenschild (Header) ---------- */
.schild {
  position: sticky; top: 0; z-index: 50;
  background: linear-gradient(180deg, #4a9f27, var(--gruen-schild) 45%, #327218);
  box-shadow: 0 6px 0 #235410, 0 14px 30px rgba(0, 0, 0, .45);
  color: #fff;
}
.schild-innen { max-width: var(--breite); margin: 0 auto; padding: 10px var(--rand); display: flex; align-items: center; gap: 22px; min-height: 76px; }
.schild-marke { display: flex; align-items: center; gap: 12px; text-decoration: none; color: #fff; }
.schild-wort { font-family: var(--f-text); font-weight: 800; font-size: clamp(22px, 2.6vw, 34px); letter-spacing: .04em; text-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.schild-panda { width: clamp(46px, 4.4vw, 62px); height: auto; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .3)); }
.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav a { text-decoration: none; font-weight: 700; padding: 9px 14px; border-radius: 6px; font-size: 16px; }
.nav a:hover { background: rgba(255, 255, 255, .14); }
.nav .nav-bestellen { background: var(--orange); color: var(--tinte); box-shadow: 0 3px 0 var(--orange-tinte); margin-left: 8px; }
.nav .nav-bestellen:hover { background: #ffad4a; }
.nav-knopf { display: none; margin-left: auto; background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, .8); border-radius: 8px; padding: 8px 12px; font-weight: 700; cursor: pointer; }
.schild-status { font-family: var(--f-hand); font-size: 18px; white-space: nowrap; padding: 6px 12px; border-radius: 999px; background: rgba(0, 0, 0, .22); }
.schild-status::before { content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #ffd23f; margin-right: 8px; vertical-align: 1px; }
.schild-status.offen::before { background: #b6ff5c; box-shadow: 0 0 8px #b6ff5c; }
.schild-status.zu::before { background: #ff6b6b; }
@media (max-width: 1000px) {
  .schild-innen { flex-wrap: wrap; gap: 12px; }
  .nav-knopf { display: inline-block; }
  .schild-status { order: 3; margin-left: auto; font-size: 16px; }
  .nav { display: none; width: 100%; order: 4; flex-direction: column; align-items: stretch; padding: 6px 0 10px; border-top: 1px solid rgba(255, 255, 255, .25); }
  .nav.offen { display: flex; }
  .nav a { padding: 12px 8px; font-size: 18px; }
  .nav .nav-bestellen { margin: 8px 0 0; text-align: center; }
}
@media (max-width: 480px) { .schild-status { display: none; } }

/* ---------- Tisch (Hintergrund) ---------- */
.tisch {
  background:
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .06) 0 2px, transparent 2px 9px, rgba(255, 255, 255, .02) 9px 11px, transparent 11px 26px),
    repeating-linear-gradient(88deg, rgba(0, 0, 0, .05) 0 140px, rgba(255, 255, 255, .03) 140px 141px, transparent 141px 300px),
    radial-gradient(120% 60% at 50% 0%, var(--holz-3), var(--holz) 45%, var(--holz-2) 100%);
  color: var(--text);
}
.tisch { overflow-x: hidden; overflow-x: clip; }
.tisch-innen { max-width: var(--breite); margin: 0 auto; padding: 0 var(--rand); }

/* Szenen: 12-Spalten-Raster für Objekte, ab 1000 px gestapelt */
.szene { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 28px 24px; align-items: start; padding: 56px 0; position: relative; }
.szene > .obj { grid-column: var(--c, 1 / -1); transform: rotate(var(--rot, 0deg)); margin-top: var(--mt, 0); position: relative; }
@media (max-width: 1000px) {
  .szene { display: flex; flex-direction: column; gap: 28px; padding: 36px 0; }
  .szene > .obj { transform: rotate(var(--rot-m, 0deg)); margin-top: 0; width: 100%; }
}

/* ---------- Pinselschrift, Karton, Knöpfe ---------- */
.brush { font-family: var(--f-brush); line-height: .95; letter-spacing: .01em; }
.hand { font-family: var(--f-hand); }
.titel { font-family: var(--f-brush); font-size: clamp(38px, 5vw, 62px); color: var(--gruen-tinte); line-height: .95; }
.titel .o { color: var(--orange-tinte); }
.titel .w { color: var(--weinrot); }
.unterstrich { display: inline-block; position: relative; }
.unterstrich::after { content: ''; position: absolute; left: -2%; right: -2%; bottom: -6px; height: 10px; background: var(--gruen); opacity: .55; border-radius: 40% 60% 50% 50% / 60% 40% 60% 40%; transform: rotate(-1deg); z-index: -1; }
.knopf { display: inline-block; text-decoration: none; font-weight: 800; font-size: 17px; padding: 12px 22px; border-radius: 8px; background: var(--gruen-tinte); color: #fff; box-shadow: 0 4px 0 #1f4a1b; transition: transform .12s, box-shadow .12s; border: 0; cursor: pointer; }
.knopf:hover { transform: translateY(-1px); }
.knopf:active { transform: translateY(2px); box-shadow: 0 2px 0 #1f4a1b; }
.knopf-orange { background: var(--orange); color: var(--tinte); box-shadow: 0 4px 0 var(--orange-tinte); }
.knopf-orange:active { box-shadow: 0 2px 0 var(--orange-tinte); }
.knopf-hell { background: var(--papier); color: var(--gruen-tinte); box-shadow: 0 4px 0 #cdbfa4; border: 2px solid var(--gruen-tinte); }
.knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 10px; }

/* Aufsteller: Creme-Karton mit weinroter Bordüre und Fadenlinie, wie die Tischaufsteller im Laden */
.aufsteller {
  background: var(--creme);
  background-image: radial-gradient(circle at 20% 10%, rgba(255, 255, 255, .8), transparent 40%), radial-gradient(circle at 80% 90%, rgba(122, 42, 42, .06), transparent 45%);
  border: 2px solid var(--weinrot); outline: 1px solid rgba(122, 42, 42, .35); outline-offset: -8px;
  padding: 32px 34px 30px; position: relative;
  box-shadow: 0 24px 40px -18px rgba(0, 0, 0, .7), 0 2px 0 rgba(255, 255, 255, .5) inset;
}
.aufsteller::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .013) 0 2px, transparent 2px 5px); mix-blend-mode: multiply; }
.cn-box { position: absolute; top: 18px; right: 18px; writing-mode: vertical-rl; font-family: var(--f-cn); font-size: 22px; letter-spacing: .18em; color: var(--weinrot); border: 1.5px solid var(--weinrot); padding: 10px 6px; line-height: 1; background: rgba(255, 255, 255, .5); }
.cn-box.klein { font-size: 17px; padding: 8px 4px; top: 12px; right: 12px; }
.wolke { position: absolute; left: 14px; bottom: 12px; width: 60px; opacity: .55; }

/* Foto-Abzug mit Klebeband */
.abzug { background: var(--papier); padding: 12px 12px 42px; box-shadow: 0 18px 30px -12px rgba(0, 0, 0, .7); position: relative; }
.abzug img { width: 100%; height: auto; object-fit: cover; }
.abzug figcaption { font-family: var(--f-hand); font-size: 20px; color: var(--text-2); text-align: center; position: absolute; left: 0; right: 0; bottom: 10px; }
.tape { position: absolute; width: 96px; height: 26px; background: rgba(255, 244, 200, .8); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); backdrop-filter: blur(1px); }
.tape.ol { left: -22px; top: -10px; transform: rotate(-38deg); }
.tape.or { right: -22px; top: -10px; transform: rotate(38deg); }
.tape.mitte { left: 50%; top: -12px; transform: translateX(-50%) rotate(-3deg); }

/* ---------- Hero: Tablett ---------- */
.hero { padding-top: 40px; }
.hero > .obj { grid-row: 1; }
.tablett { --c: 1 / 8; --rot: -1.4deg; z-index: 1; }
.tablett-flaeche {
  aspect-ratio: 5 / 3.7; background: var(--tablett); border-radius: 22px; position: relative;
  box-shadow: inset 0 0 0 7px #222, inset 0 3px 0 8px #2c2c2c, inset 0 0 40px rgba(0, 0, 0, .8), 0 34px 60px -22px rgba(0, 0, 0, .85);
}
.schale { position: absolute; right: 4%; top: 4%; width: 58%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 30%, #ffffff, #f2f0ea 70%, #d9d6cd); box-shadow: 0 18px 30px -10px rgba(0, 0, 0, .8), inset 0 -6px 12px rgba(0, 0, 0, .12); }
.schale-rand { position: absolute; inset: 0; width: 100%; height: 100%; }
.schale-rand text { font-family: var(--f-serif); font-size: 21px; letter-spacing: .12em; fill: #2f4f2f; font-weight: 700; }
.schale-rand .ring { fill: none; stroke: #4c7a3c; stroke-width: 1.6; opacity: .75; }
.schale-inhalt { position: absolute; inset: 13%; border-radius: 50%; overflow: hidden; box-shadow: inset 0 10px 22px rgba(0, 0, 0, .35), inset 0 -4px 10px rgba(0, 0, 0, .12); background: #b8894a; }
.schale-inhalt picture { position: absolute; inset: 0; }
.schale-inhalt img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; transform: scale(1.55); }
.schale-inhalt::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .28), transparent 45%); pointer-events: none; }
.schale-panda { position: absolute; width: 6%; left: 15.5%; top: 19.5%; }
.serviette { position: absolute; left: 5%; top: 10%; width: 30%; height: 76%; background: var(--signalrot); background-image: linear-gradient(135deg, rgba(255, 255, 255, .12), transparent 40%, rgba(0, 0, 0, .12)); border-radius: 3px; transform: rotate(-3deg); box-shadow: 0 6px 10px rgba(0, 0, 0, .5); }
.serviette::after { content: ''; position: absolute; inset: 50% 0 0 0; background: rgba(0, 0, 0, .05); border-top: 1px solid rgba(0, 0, 0, .12); }
.loeffel { position: absolute; left: 32%; top: 6%; width: 22%; height: 84%; transform: rotate(8deg); }
.loeffel::before { content: ''; position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 1 / 1.25; border-radius: 50% 50% 46% 46%; background: radial-gradient(circle at 45% 40%, #d9a56a, #a86f3c 55%, #7d4e26); box-shadow: inset 0 -5px 10px rgba(0, 0, 0, .35), 0 3px 6px rgba(0, 0, 0, .5); }
.loeffel::after { content: ''; position: absolute; left: 36%; width: 28%; top: 24%; bottom: 0; border-radius: 40% 40% 50% 50%; background: linear-gradient(90deg, #7d4e26, #b8813f 40%, #8f5c2d); box-shadow: 0 3px 6px rgba(0, 0, 0, .5); }
.staebchen { position: absolute; left: 60%; top: -6%; width: 8%; height: 112%; transform: rotate(9deg); }
.staebchen::before, .staebchen::after { content: ''; position: absolute; top: 0; bottom: 0; width: 3.5px; background: linear-gradient(180deg, #1b1b1b, #2c2c2c 30%, #444 100%); border-radius: 3px; box-shadow: 1px 2px 4px rgba(0, 0, 0, .6); }
.staebchen::before { left: 30%; } .staebchen::after { left: 62%; }
.staebchen span { position: absolute; top: 3%; height: 9%; width: 100%; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255, 255, 255, .55) 3px 4px); opacity: .9; }
.becher-klein { position: absolute; left: 5%; bottom: 5%; width: 13%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff, #e6e6e0 70%, #cfcfc6); box-shadow: 0 6px 10px rgba(0, 0, 0, .55), inset 0 -4px 8px rgba(0, 0, 0, .12); }
.becher-klein i { position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #f06b2a, #c8341c 55%, #8e1d10); box-shadow: inset 0 4px 8px rgba(0, 0, 0, .35); }

.hero-aufsteller { --c: 7 / 13; --rot: 1.2deg; --mt: 30px; z-index: 2; padding-top: 40px; }
.hero-aufsteller h1 { font-family: var(--f-brush); font-size: clamp(40px, 4.6vw, 60px); color: var(--tinte); line-height: .95; margin: 8px 0 18px; padding-right: 54px; }
.hero-aufsteller h1 em { font-style: normal; color: var(--orange-tinte); }
.hero-aufsteller .ort { font-family: var(--f-hand); font-size: 20px; color: var(--weinrot); margin: 0; padding-right: 54px; }
.hero-aufsteller p.lead { font-size: 18px; max-width: 46ch; }
.status { font-family: var(--f-hand); font-size: 20px; color: var(--gruen-tinte); margin: 6px 0 0; }
.status::before { content: ''; display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: #e0b400; margin-right: 8px; }
.status.offen::before { background: var(--gruen); box-shadow: 0 0 6px var(--gruen); }
.status.zu::before { background: var(--signalrot); }
.status.zu { color: var(--weinrot); }
@media (max-width: 1000px) {
  .tablett-flaeche { aspect-ratio: 5 / 4; }
  .hero-aufsteller { padding-top: 32px; }
}
@media (max-width: 560px) {
  .schale-rand text { font-size: 24px; }
  .aufsteller { padding: 26px 22px 24px; }
  .hero-aufsteller h1 { padding-right: 44px; }
}

/* ---------- Aufsteller-Reihe (Signature-Gerichte) ---------- */
.reihe-titel { --c: 1 / 13; text-align: left; margin-bottom: -10px; }
.reihe-titel .titel { color: var(--creme); text-shadow: 0 3px 0 rgba(0, 0, 0, .45); }
.reihe-titel p { color: var(--creme-2); font-family: var(--f-hand); font-size: 22px; margin: 6px 0 0; }
.karte-aufsteller { padding: 22px 22px 24px; }
.karte-aufsteller .foto { aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid rgba(122, 42, 42, .35); margin-bottom: 16px; background: #d8c9a8; }
.karte-aufsteller .foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.karte-aufsteller:hover .foto img { transform: scale(1.04); }
.karte-aufsteller .nr { font-family: var(--f-hand); color: var(--weinrot); font-size: 18px; letter-spacing: .06em; margin: 0; }
.karte-aufsteller h3 { font-family: var(--f-brush); font-size: 34px; color: var(--tinte); margin: 2px 0 8px; padding-right: 50px; }
.karte-aufsteller h3 span { display: block; color: var(--weinrot); font-size: 26px; }
.karte-aufsteller p { font-size: 15.5px; color: var(--text-2); margin-bottom: 14px; min-height: 3.2em; }
.preis-klecks { display: inline-block; white-space: nowrap; font-family: var(--f-brush); font-size: 30px; color: #fff; background: var(--orange); padding: 6px 18px 4px; border-radius: 48% 52% 45% 55% / 55% 45% 60% 40%; transform: rotate(-3deg); box-shadow: 0 3px 0 var(--orange-tinte); }
.preis-klecks.rot { background: var(--weinrot); box-shadow: 0 3px 0 #4e1a1a; }
.karte-aufsteller .kf { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.karte-aufsteller .tag { font-family: var(--f-hand); color: var(--gruen-tinte); font-size: 17px; }
.karte-aufsteller .cn-box { top: 32px; right: 32px; background: rgba(255, 253, 247, .88); }
.a1 { --c: 1 / 5; --rot: -1.6deg; --rot-m: -1deg; }
.a2 { --c: 5 / 9; --rot: .8deg; --mt: 26px; --rot-m: .8deg; }
.a3 { --c: 9 / 13; --rot: -.9deg; --mt: 8px; --rot-m: -.8deg; }
.poster { --c: 1 / 5; --rot: -2deg; --rot-m: -1.5deg; }
.poster .abzug { padding: 10px 10px 10px; }
.poster img { aspect-ratio: 4 / 5; }
.poster-text { --c: 5 / 9; --mt: 40px; color: var(--creme); }
.poster-text .titel { font-size: clamp(34px, 3.6vw, 48px); color: var(--orange); text-shadow: 0 3px 0 rgba(0, 0, 0, .45); }
.poster-text p { font-size: 17px; color: var(--creme-2); max-width: 40ch; }
.poster-text .hand { font-size: 22px; color: #fff; }

/* Bestellzettel: Block mit Karo-Papier, „Deine Nudeln, deine Wahl“ */
.zettel { --c: 9 / 13; --rot: 1.8deg; --mt: 20px; --rot-m: 1deg; background: var(--papier); background-image: linear-gradient(rgba(108, 185, 44, .16) 1px, transparent 1px), linear-gradient(90deg, rgba(108, 185, 44, .16) 1px, transparent 1px); background-size: 22px 22px; padding: 26px 26px 30px; box-shadow: 0 18px 30px -12px rgba(0, 0, 0, .7); position: relative; }
.zettel::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 18px; background: repeating-linear-gradient(90deg, transparent 0 14px, #fff 14px 20px), linear-gradient(#cfcfc8, #e9e9e2); border-radius: 4px 4px 0 0; }
.zettel h3 { font-family: var(--f-brush); font-size: 34px; color: var(--gruen-tinte); margin: 14px 0 12px; padding-right: 90px; }
.zettel ol { counter-reset: s; }
.zettel li { font-family: var(--f-hand); font-size: 20px; line-height: 1.3; padding: 7px 0 7px 38px; position: relative; border-bottom: 1px dashed rgba(0, 0, 0, .15); }
.zettel li::before { counter-increment: s; content: counter(s); position: absolute; left: 0; top: 6px; width: 27px; height: 27px; border: 2px solid var(--gruen-tinte); border-radius: 50%; text-align: center; line-height: 24px; font-size: 16px; color: var(--gruen-tinte); }
.zettel li b { color: var(--weinrot); font-weight: 400; }
.zettel .stempel { position: absolute; right: 14px; top: 26px; width: 84px; height: 84px; border: 3px solid rgba(200, 32, 44, .7); border-radius: 50%; color: rgba(200, 32, 44, .8); font-family: var(--f-brush); font-size: 15px; text-align: center; display: grid; place-items: center; transform: rotate(-14deg); line-height: 1; padding: 8px; mix-blend-mode: multiply; }
.zettel .stempel b { display: block; font-size: 22px; }

/* ---------- Die Karte (kurz auf der Startseite, komplett auf karte.html) ---------- */
.karte { --c: 1 / 13; padding: 40px 44px 44px; }
.karte h2 { font-family: var(--f-brush); font-size: clamp(40px, 5vw, 64px); color: var(--tinte); text-align: center; }
.karte h2 span { color: var(--weinrot); }
.karte .zeile { text-align: center; font-family: var(--f-hand); font-size: 20px; color: var(--weinrot); margin: 4px 0 26px; }
.karte-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px 44px; }
.karte h3 { font-family: var(--f-brush); font-size: 30px; color: var(--gruen-tinte); border-bottom: 2px solid var(--gruen-tinte); padding-bottom: 6px; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: baseline; }
.karte h3 small { font-family: var(--f-cn); font-size: 17px; color: var(--weinrot); letter-spacing: .1em; }
.gericht { display: grid; grid-template-columns: 34px 1fr auto; gap: 4px 10px; padding: 9px 0; border-bottom: 1px dotted rgba(122, 42, 42, .35); align-items: baseline; }
.gericht .nr { font-family: var(--f-hand); color: var(--weinrot); font-size: 17px; }
.gericht .name { font-weight: 700; font-size: 17px; }
.gericht .name small { font-family: var(--f-cn); font-weight: 400; color: var(--weinrot); margin-left: 6px; font-size: 14.5px; white-space: nowrap; }
.gericht .preis { font-family: var(--f-hand); font-size: 20px; color: var(--tinte); white-space: nowrap; }
.gericht .preis i { font-style: normal; font-size: 14px; color: var(--text-2); margin-right: 4px; }
.gericht .info { grid-column: 2 / 4; font-size: 14.5px; color: var(--text-2); line-height: 1.4; }
.tagchen { display: inline-block; font-family: var(--f-hand); font-size: 13px; color: var(--gruen-tinte); border: 1px solid var(--gruen-tinte); border-radius: 999px; padding: 0 7px; margin-left: 6px; vertical-align: 1px; line-height: 1.4; }
.tagchen.scharf { color: var(--signalrot); border-color: var(--signalrot); }
.karte .hinweis { font-family: var(--f-hand); font-size: 17px; color: var(--text-2); text-align: center; margin: 26px 0 0; }
.karte .mitte { text-align: center; margin-top: 22px; }
.karte.komplett { padding-top: 34px; }
.karte.komplett .karte-spalten { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.karte.komplett h3 { margin-top: 8px; }
.wahl-box { background: rgba(108, 185, 44, .12); border: 1.5px dashed var(--gruen-tinte); padding: 14px 18px; font-size: 15px; margin: 14px 0 4px; }
.wahl-box b { font-family: var(--f-hand); font-weight: 400; font-size: 19px; color: var(--gruen-tinte); }
@media (max-width: 600px) { .karte { padding: 28px 20px 30px; } .karte-spalten { gap: 22px; } .karte > .cn-box { position: static; display: inline-block; writing-mode: horizontal-tb; margin: 0 0 8px; letter-spacing: .3em; padding: 4px 8px; } }

/* ---------- Panda Tea: Becherreihe ---------- */
.tea-titel { --c: 1 / 13; color: var(--creme); }
.tea-titel .titel { color: var(--creme); text-shadow: 0 3px 0 rgba(0, 0, 0, .45); }
.tea-titel .titel .o { color: var(--orange); }
.tea-titel p { font-family: var(--f-hand); font-size: 21px; color: var(--creme-2); max-width: 60ch; margin: 8px 0 0; }
.becher-reihe { --c: 1 / 13; display: grid; grid-template-columns: repeat(9, 1fr); gap: 18px 14px; align-items: end; }
@media (max-width: 1100px) { .becher-reihe { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 640px) { .becher-reihe { grid-template-columns: repeat(3, 1fr); } }
.becher { position: relative; text-align: center; text-decoration: none; color: var(--creme); }
.becher .glas { position: relative; height: 150px; margin: 0 auto; width: 88px; border-radius: 8px 8px 22px 22px; background: linear-gradient(180deg, rgba(255, 255, 255, .85) 0 9%, var(--tee) 9%, var(--tee-2)); border: 2px solid rgba(255, 255, 255, .7); box-shadow: inset 0 0 18px rgba(255, 255, 255, .35), 0 16px 22px -12px rgba(0, 0, 0, .8); overflow: hidden; }
.becher .glas::before { content: ''; position: absolute; left: 10px; top: 8px; width: 8px; height: 60%; border-radius: 6px; background: rgba(255, 255, 255, .5); }
.becher .glas::after { content: ''; position: absolute; left: 18px; right: 10px; top: 22%; height: 26%; border-radius: 6px; background: linear-gradient(135deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .15)); transform: rotate(-12deg); }
.becher .halm { position: absolute; left: 52%; top: -18px; width: 9px; height: 74px; background: var(--gruen); border-radius: 4px; transform: rotate(9deg); box-shadow: 1px 2px 3px rgba(0, 0, 0, .4); }
.becher .deckel { position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 96px; height: 10px; background: #fff; border-radius: 4px; box-shadow: 0 2px 0 rgba(0, 0, 0, .25); }
.becher .name { font-family: var(--f-hand); font-size: 18px; margin-top: 12px; line-height: 1.15; display: block; }
.becher .preis { font-family: var(--f-brush); font-size: 22px; color: var(--orange); display: block; }
.becher .panda-mini { position: absolute; width: 30px; left: 50%; top: 58%; transform: translateX(-50%); opacity: .9; }
.tea-hinweis { --c: 1 / 13; color: var(--creme-2); font-family: var(--f-hand); font-size: 19px; text-align: center; }

/* ---------- Panda-Welt (Abzüge) und Gästestimmen ---------- */
.welt-1 { --c: 1 / 5; --rot: -2.2deg; --rot-m: -1.5deg; }
.welt-2 { --c: 5 / 9; --rot: 1.6deg; --mt: 50px; --rot-m: 1.2deg; }
.welt-text { --c: 9 / 13; --mt: 24px; color: var(--creme); }
.welt-text .titel { font-size: clamp(34px, 3.6vw, 46px); color: var(--creme); text-shadow: 0 3px 0 rgba(0, 0, 0, .45); }
.welt-text .titel .o { color: var(--orange); }
.welt-text p { color: var(--creme-2); }
.welt-text .hand { font-size: 21px; color: #fff; }
.abzug img.hoch { aspect-ratio: 3 / 4; }
.abzug img.quer { aspect-ratio: 4 / 3; }

.google { --c: 1 / 5; --rot: -1deg; --rot-m: -.6deg; background: var(--papier); padding: 26px 26px 24px; box-shadow: 0 18px 30px -12px rgba(0, 0, 0, .7); position: relative; }
.google .sterne { font-size: 26px; color: #f4b400; letter-spacing: 2px; }
.google .note { font-family: var(--f-brush); font-size: 62px; line-height: 1; color: var(--tinte); }
.google .quelle { font-family: var(--f-hand); font-size: 18px; color: var(--text-2); }
.google .quelle a { color: var(--gruen-tinte); }
.stimme { --rot: .8deg; background: var(--creme); padding: 22px 24px 20px; box-shadow: 0 18px 30px -12px rgba(0, 0, 0, .7); position: relative; }
.stimme p { font-family: var(--f-hand); font-size: 21px; line-height: 1.3; color: var(--tinte); margin: 0 0 8px; }
.stimme footer { font-size: 14px; color: var(--text-2); }
.s1 { --c: 5 / 9; --rot: 1.4deg; --mt: 16px; --rot-m: .8deg; }
.s2 { --c: 9 / 13; --rot: -1.1deg; --mt: 38px; --rot-m: -.8deg; }
.s3 { --c: 5 / 9; --rot: -.6deg; --mt: -10px; --rot-m: .6deg; }
.s4 { --c: 9 / 13; --rot: 1deg; --mt: 8px; --rot-m: -.5deg; }
.pin { position: absolute; left: 50%; top: -12px; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff7a7a, var(--signalrot) 60%, #7a0f16); box-shadow: 0 3px 5px rgba(0, 0, 0, .5); transform: translateX(-50%); }

/* ---------- Zeiten: Leuchtkasten wie an der Tür, Weg: Serviette mit Skizze ---------- */
.leuchtkasten { --c: 1 / 6; --rot: -.8deg; --rot-m: -.5deg; background: #fbfaf5; border: 10px solid #d9d7cf; box-shadow: inset 0 0 40px rgba(255, 255, 255, 1), inset 0 0 0 2px #fff, 0 0 46px rgba(255, 255, 210, .35), 0 24px 40px -18px rgba(0, 0, 0, .8); padding: 26px 28px 24px; text-align: center; }
.leuchtkasten .lk-titel { font-family: var(--f-text); font-weight: 800; font-size: clamp(26px, 3vw, 36px); line-height: 1.05; color: var(--gruen-schild); letter-spacing: .02em; }
.leuchtkasten .lk-titel span { display: block; color: var(--signalrot); font-size: .78em; }
.leuchtkasten .lk-titel img { width: 54px; margin: 6px auto 4px; }
.zeiten { margin: 16px auto 0; width: 100%; border-collapse: collapse; font-size: 17px; }
.zeiten th { text-align: left; font-family: var(--f-hand); font-weight: 400; font-size: 20px; color: var(--weinrot); padding: 8px 6px; border-bottom: 1px dotted rgba(0, 0, 0, .25); }
.zeiten td { text-align: right; padding: 8px 6px; border-bottom: 1px dotted rgba(0, 0, 0, .25); white-space: nowrap; }
.zeiten tr.heute th, .zeiten tr.heute td { background: rgba(108, 185, 44, .16); }
.zeiten td small { display: block; color: var(--text-2); font-size: 13px; }
.leuchtkasten .status { margin-top: 14px; font-size: 21px; }
.leuchtkasten .lk-fuss { font-size: 14.5px; color: var(--text-2); margin: 12px 0 0; }

.weg { --c: 6 / 13; --rot: 1.1deg; --rot-m: .6deg; background: #fffefb; background-image: repeating-linear-gradient(45deg, rgba(0, 0, 0, .025) 0 2px, transparent 2px 12px); border: 1px solid #e6e2d6; padding: 24px 26px 22px; box-shadow: 0 18px 30px -12px rgba(0, 0, 0, .7); position: relative; }
.weg::before { content: ''; position: absolute; inset: 10px; border: 1px dashed rgba(0, 0, 0, .18); pointer-events: none; }
.weg h3 { font-family: var(--f-brush); font-size: 34px; color: var(--gruen-tinte); margin-bottom: 8px; }
.weg-inhalt { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; align-items: start; }
.skizze { width: 100%; height: auto; font-family: var(--f-hand); }
.skizze .strasse { stroke: #2b2520; stroke-width: 3; fill: none; stroke-linecap: round; }
.skizze .nebenstrasse { stroke: #2b2520; stroke-width: 1.6; fill: none; opacity: .55; }
.skizze .kanal { stroke: #4a90c2; stroke-width: 7; fill: none; opacity: .55; stroke-linecap: round; }
.skizze text { font-size: 15px; fill: #2b2520; }
.skizze .u { font-weight: 700; fill: #fff; font-size: 13px; font-family: var(--f-text); }
.skizze .ubahn { fill: #0d5ba5; }
.weg address { font-style: normal; font-size: 17px; }
.weg address b { font-family: var(--f-brush); font-size: 26px; display: block; color: var(--tinte); }
.weg ul { margin: 10px 0 14px; font-family: var(--f-hand); font-size: 18px; }
.weg li { padding: 3px 0 3px 26px; position: relative; }
.weg li::before { content: '•'; position: absolute; left: 8px; color: var(--gruen); font-size: 26px; line-height: 20px; }
.karte-einbett { grid-column: 1 / -1; margin-top: 8px; }
.karte-einbett iframe { width: 100%; height: 300px; border: 0; display: block; filter: sepia(.15); }
@media (max-width: 720px) { .weg-inhalt { grid-template-columns: 1fr; } }

/* ---------- Bestellen: Papiertüte mit App-Stickern ---------- */
.tuete { --c: 1 / 7; --rot: -1.2deg; --rot-m: -.8deg; background: linear-gradient(180deg, #d9b98b, #c9a674 60%, #b8935f); border-radius: 6px 6px 10px 10px; padding: 34px 30px 30px; position: relative; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12), inset 12px 0 20px -12px rgba(0, 0, 0, .35), inset -12px 0 20px -12px rgba(0, 0, 0, .35), 0 24px 40px -18px rgba(0, 0, 0, .8); }
.tuete::before { content: ''; position: absolute; left: 22%; right: 22%; top: -26px; height: 44px; border: 9px solid #8a6a43; border-bottom: 0; border-radius: 40px 40px 0 0; }
.tuete::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 22px; background: linear-gradient(180deg, rgba(0, 0, 0, .12), transparent); }
.tuete h2 { font-family: var(--f-brush); font-size: clamp(36px, 4vw, 50px); color: var(--weinrot); padding-right: 100px; }
.tuete .hand { font-size: 20px; color: #4a2f1d; margin: 4px 0 16px; }
.tuete img.panda-tuete { width: 84px; position: absolute; right: 24px; top: 26px; opacity: .92; }
.sticker { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.sticker a { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; padding: 12px 18px; border-radius: 12px; border: 3px solid #fff; box-shadow: 0 4px 8px rgba(0, 0, 0, .3); font-size: 17px; transform: rotate(var(--r, 0deg)); }
.sticker a:hover { transform: rotate(var(--r, 0deg)) scale(1.03); }
.sticker .wolt { background: #009de0; color: #fff; --r: -2deg; }
.sticker .uber { background: #06c167; color: #142328; --r: 1.5deg; }
.sticker .lieferando { background: #ff8000; color: #fff; --r: -1deg; }
.sticker .tel { background: #fff; color: var(--tinte); --r: 1deg; }
.tuete .klein { font-size: 14.5px; color: #4a2f1d; margin: 0; }
.abholen { --c: 7 / 13; --rot: 1.3deg; --mt: 30px; --rot-m: .6deg; }
.abholen h3 { font-family: var(--f-brush); font-size: 32px; color: var(--gruen-tinte); margin-bottom: 8px; padding-right: 50px; }
.abholen .tel-gross { font-family: var(--f-brush); font-size: clamp(30px, 3.2vw, 40px); color: var(--tinte); text-decoration: none; display: inline-block; margin: 4px 0 8px; }
.abholen .tel-gross:hover { color: var(--orange-tinte); }
.abholen p { font-size: 16px; }
.insta { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; text-decoration: none; color: var(--weinrot); margin-top: 6px; }
.insta svg { width: 26px; height: 26px; }

/* ---------- Fußleiste ---------- */
.fuss { background: var(--tablett); color: #d8d3c8; padding: 40px var(--rand) 34px; border-top: 8px solid var(--gruen-schild); }
.fuss-innen { max-width: var(--breite); margin: 0 auto; display: grid; grid-template-columns: auto 1fr auto; gap: 24px 40px; align-items: center; }
.fuss img { width: 70px; }
.fuss .marke { font-family: var(--f-serif); font-size: 22px; letter-spacing: .12em; color: #fff; }
.fuss .marke small { display: block; font-family: var(--f-cn); font-size: 15px; letter-spacing: .12em; color: var(--gruen); }
.fuss address { font-style: normal; font-size: 15px; line-height: 1.5; }
.fuss nav { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 15px; }
.fuss nav a { color: #fff; }
.fuss .klein { grid-column: 1 / -1; font-size: 13px; color: #9a948a; margin: 0; }
@media (max-width: 720px) { .fuss-innen { grid-template-columns: 1fr; text-align: left; } }

/* ---------- Aushang (Impressum, Datenschutz) und 404 ---------- */
.aushang { --c: 2 / 12; --rot: -.4deg; background: var(--papier); padding: 48px clamp(22px, 5vw, 64px) 56px; box-shadow: 0 24px 40px -18px rgba(0, 0, 0, .8); position: relative; }
.aushang h1 { font-family: var(--f-brush); font-size: clamp(38px, 5vw, 56px); color: var(--gruen-tinte); margin-bottom: 10px; }
.aushang h2 { font-family: var(--f-brush); font-size: 30px; color: var(--weinrot); margin: 30px 0 8px; }
.aushang h3 { font-weight: 800; font-size: 18px; margin: 20px 0 6px; }
.aushang p, .aushang li { font-size: 16.5px; max-width: 72ch; }
.aushang ul { list-style: disc; padding-left: 22px; margin-bottom: 12px; }
.aushang li { margin-bottom: 4px; }
.aushang a { color: var(--gruen-tinte); }
.aushang .folgt { background: #fff3b0; padding: 0 6px; font-family: var(--f-hand); color: #7a5b00; }
.aushang .pin { top: -10px; }
.leer { --c: 3 / 11; text-align: center; padding: 40px 30px 46px; }
.leer .schale-leer { width: 200px; aspect-ratio: 1; margin: 0 auto 18px; border-radius: 50%; background: radial-gradient(circle at 40% 30%, #fff, #ece9e1 70%, #d3d0c6); box-shadow: inset 0 14px 26px rgba(0, 0, 0, .18), 0 18px 30px -12px rgba(0, 0, 0, .7); display: grid; place-items: center; }
.leer .schale-leer img { width: 46%; }
.leer h1 { font-family: var(--f-brush); font-size: 52px; color: var(--weinrot); }