/* Fiammetta · Seite
 * Farben von ihren eigenen Drucksachen abgenommen (Fotos im Google-Profil):
 * Tapetenblau und Zitrone von der Pizzatafel, Karo-Rot und Tintengrün von der
 * Getränkekarte, Terrakotta von der Wand hinter der Bar.
 * Rot heißt auf dieser Seite immer: hier handelst du (＋, Zur Theke, Senden).
 */
:root {
  --sc-canvas: #f6f1e4;
  --sc-surface: #fbf8ef;
  --sc-ink: #1f2a25;
  --sc-ink-soft: #3f4b45;
  --sc-accent: #a33b2a;
  --sc-accent-ink: #fffaf0;
  --sc-font-display: "Libre Baskerville", Georgia, serif;
  --sc-font-text: "Poppins", system-ui, sans-serif;
  --sc-font-mono: "Poppins", system-ui, sans-serif;

  --papier: #fbf8ef;
  --tapete: #c9d6d6;
  --tapete-tief: #b3c5c6;
  --terrakotta: #ecc9b3;
  --wand: #e3b49b;
  --zitrone: #eed25a;
  --blatt: #3f6440;
  --karo: #a33b2a;
  --linie: #33443d;
  --leiste-h: 3.4rem;

  /* Wellenrand ihrer Getränkekarte: eine Wellenlinie je Kante, 20 px Periode,
     als Kachel. (border-image mit einer SVG ohne Eigenmaß zerfiel in Striche.) */
  --welle-h: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='8' viewBox='0 0 20 8'%3E%3Cpath d='M0 4Q5 0.5 10 4T20 4' fill='none' stroke='%2333443d' stroke-width='1.3'/%3E%3C/svg%3E");
  --welle-v: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='20' viewBox='0 0 8 20'%3E%3Cpath d='M4 0Q0.5 5 4 10T4 20' fill='none' stroke='%2333443d' stroke-width='1.3'/%3E%3C/svg%3E");
}

html { scroll-padding-top: calc(var(--leiste-h) + 1rem); }
body { background: var(--sc-canvas); }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprung { position: absolute; left: 1rem; top: -4rem; z-index: 100; background: var(--sc-ink); color: var(--papier); padding: .6rem 1rem; border-radius: 6px; }
.sprung:focus { top: 1rem; }

/* ---------------------------------------------------------------- Leiste -- */
.leiste {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  height: var(--leiste-h);
  display: flex; align-items: center; gap: 1.2rem;
  padding: 0 clamp(1rem, 3vw, 2rem);
  background: color-mix(in srgb, var(--papier) 92%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--linie) 18%, transparent);
  backdrop-filter: blur(6px);
}
.leiste__name {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--sc-font-display); text-transform: uppercase; letter-spacing: .22em;
  font-size: 1rem; text-decoration: none;
}
.weg { flex: 1; min-width: 0; }
.weg ol { display: flex; gap: .2rem; list-style: none; margin: 0; padding: 0; justify-content: center; }
.weg li { display: flex; align-items: center; }
.weg li + li::before { content: "·"; color: color-mix(in srgb, var(--linie) 45%, transparent); margin-right: .2rem; }
.weg a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 .45rem;
  font-size: .86rem; text-decoration: none; color: var(--sc-ink-soft);
  background: linear-gradient(var(--karo), var(--karo)) left 70% / 0 2px no-repeat;
  transition: background-size 200ms var(--sc-ease-out), color 140ms var(--sc-ease-out);
}
.weg a:hover { color: var(--sc-ink); }
.weg a[aria-current="step"] { color: var(--sc-ink); font-weight: 500; background-size: 100% 2px; }
.leiste__theke { margin-left: auto; display: inline-flex; align-items: center; min-height: 44px; font-size: .88rem; font-weight: 500; color: var(--karo); text-decoration: none; padding: 0 .3rem; }
@media (max-width: 980px) { .weg { display: none; } }

/* ---------------------------------------------------------------- Knöpfe -- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 2.9rem; padding: .7rem 1.3rem;
  border-radius: 999px; border: 1.5px solid var(--linie);
  font-weight: 500; font-size: .95rem; text-decoration: none; white-space: nowrap;
  transition: transform 140ms var(--sc-ease-out), background-color 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out);
}
.knopf:active { transform: translateY(1px); }
.knopf--handeln { background: var(--karo); border-color: var(--karo); color: var(--sc-accent-ink); }
.knopf--handeln:hover { background: #8c3022; }
.knopf--leise { background: transparent; color: var(--sc-ink); }
.knopf--leise:hover { background: color-mix(in srgb, var(--papier) 70%, transparent); }
.knopf--gross { min-height: 3.4rem; font-size: 1.02rem; padding-inline: 1.7rem; }
.knopf--klein { min-height: 2.4rem; padding: .45rem 1rem; font-size: .86rem; }
.knopf[aria-disabled="true"] { background: #cfc7b8; border-color: #cfc7b8; color: #4a4239; cursor: not-allowed; }

/* ------------------------------------------------------- Wellenrand, Karo -- */
.welle { position: relative; background: var(--papier); padding: 16px; }
.welle::before {
  content: ""; position: absolute; inset: 5px; pointer-events: none; z-index: 1;
  background:
    var(--welle-h) left top / 20px 8px repeat-x,
    var(--welle-h) left bottom / 20px 8px repeat-x,
    var(--welle-v) left top / 8px 20px repeat-y,
    var(--welle-v) right top / 8px 20px repeat-y;
}
.welle:has(> .karo) { padding-bottom: 34px; }
.welle:has(> .karo)::before { bottom: 21px; }
.welle--klein { padding: 13px; }
.welle--klein::before { inset: 3px; }
.welle--karte { padding: 1.6rem 1.6rem 2.6rem; }
.karo {
  position: absolute; left: 0; right: 0; bottom: 0; height: 16px; z-index: 2;
  background: repeating-conic-gradient(var(--karo) 0 25%, transparent 0 50%) 0 0 / 16px 16px;
  opacity: .92;
}

/* ------------------------------------------------------------ Handschrift -- */
.hand { display: inline-block; height: 1.3em; width: calc(1.3em * var(--hand-verhaeltnis, 4)); overflow: visible; vertical-align: -0.3em; fill: currentColor; }
.hand--text { font-family: "Comic Sans MS", cursive; height: auto; width: auto; }
.hand__stift path { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation-name: hand-zieht; animation-fill-mode: forwards; animation-timing-function: ease-out; }
.hand--zieht .hand__tinte { opacity: 0; animation: hand-tinte .35s ease-out forwards; }
@keyframes hand-zieht { to { stroke-dashoffset: 0; } }
@keyframes hand-tinte { to { opacity: 1; } }

/* ============================================================ 1 · DIE ECKE */
.akt-ecke { background: var(--tapete); }
.ecke {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "kopf karte" "text karte";
  align-items: center; column-gap: clamp(1.5rem, 4vw, 4rem);
  padding: calc(var(--leiste-h) + 2rem) clamp(1.2rem, 5vw, 5rem) 2.5rem;
  background: var(--tapete);
}
.ecke__kopf { grid-area: kopf; align-self: end; }
.ecke__name {
  font-family: var(--sc-font-display); font-weight: 400;
  text-transform: uppercase; letter-spacing: .12em;
  font-size: clamp(2.6rem, 7.4vw, 6.4rem); line-height: 1; margin: 0;
}
.ecke__unter {
  font-family: var(--sc-font-display); text-transform: uppercase; letter-spacing: .1em;
  font-size: clamp(1rem, 1.8vw, 1.4rem); margin: .8rem 0 0 .2rem;
}
.ecke__unter sup { font-size: .55em; margin-left: .15em; letter-spacing: .02em; }
.ecke__text { grid-area: text; align-self: start; margin-top: 1.6rem; }
.ecke__text .sc-lede { max-width: 30ch; }
.ecke__knoepfe { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.6rem 0 0; }
.ecke__karte {
  grid-area: karte; margin: 0; box-shadow: 0 18px 40px -22px rgb(31 42 37 / .45);
  transform-origin: 50% 0;
  transform: rotate(calc(-3.5deg * (1 - clamp(0, var(--sc-p, 0) * 2.2, 1))));
}
.ecke__karte::after {
  content: ""; position: absolute; top: -.9rem; left: 50%; width: 1rem; height: 2rem; margin-left: -.5rem; z-index: 3;
  border-radius: 3px; background: linear-gradient(90deg, #c9a577, #e3c596 50%, #c9a577); box-shadow: 0 1px 0 rgb(0 0 0 / .15);
}
.ecke__foto { overflow: hidden; }
.ecke__foto img { width: 100%; height: auto; aspect-ratio: 1100 / 619; object-fit: cover; }
@media (max-width: 860px) {
  .ecke {
    grid-template-columns: 1fr; grid-template-rows: auto auto auto;
    grid-template-areas: "kopf" "karte" "text";
    align-content: center; row-gap: 1.1rem;
    padding-top: calc(var(--leiste-h) + 1rem); padding-bottom: 5.2rem;
  }
  .ecke__text { margin-top: 0; }
  .ecke__knoepfe { margin-top: 1rem; }
}

/* ============================================================== 2 · BAR */
.akt-bar { background: var(--terrakotta); }
.bar { display: flex; align-items: center; background: var(--terrakotta); }
.bar__schiene {
  display: flex; align-items: center; gap: clamp(1.4rem, 3vw, 3rem);
  padding: calc(var(--leiste-h) + 1rem) 8vw 2rem;
  width: max-content;
}
.bar__kopf, .bar__schluss { width: min(26rem, 78vw); flex: none; }
.bar__kopf .sc-body { margin-top: 1rem; }
.bild { flex: none; margin: 0; width: clamp(15rem, 25vw, 22rem); box-shadow: 0 16px 30px -20px rgb(31 42 37 / .5); }
.bild img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.bild--tief { transform: translateY(2.4rem); }
.bild figcaption { font-size: .86rem; padding: .7rem .2rem .1rem; color: var(--sc-ink-soft); }
.bar__hand { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin: 0 0 1rem; color: var(--karo); }
@media (prefers-reduced-motion: no-preference) {
  .bar__schiene > :not(:first-child) {
    opacity: clamp(.55, calc(var(--sc-p, 1) * 6 - var(--i, 0) * .9), 1);
  }
}
@media (max-width: 700px) {
  .bild { width: 68vw; }
  .bild--tief { transform: translateY(1.2rem); }
}

/* ============================================================ 3 · TAFEL */
.akt-tafel { background: var(--tapete); padding-block: clamp(4rem, 9vw, 7rem); }
.tafel {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  grid-template-areas: "kopf seite" "karte seite";
  column-gap: clamp(2rem, 5vw, 5rem); row-gap: 2rem; align-items: start;
}
.tafel__kopf { grid-area: kopf; }
.tafel__kopf .sc-body { margin-top: 1rem; }
.tafel__seite { grid-area: seite; align-self: stretch; }
.tafel__foto { margin: 0 auto; width: min(100%, 17rem); transform: rotate(-1.5deg); box-shadow: 0 16px 30px -22px rgb(31 42 37 / .5); }
.tafel__foto img { width: 100%; height: auto; aspect-ratio: 3/4; object-fit: cover; }
.tafel__foto figcaption { font-size: .86rem; padding: .6rem .2rem 0; color: var(--sc-ink-soft); }
.karte {
  grid-area: karte; list-style: none; margin: 0; padding: clamp(1.2rem, 3vw, 2.4rem);
  background: color-mix(in srgb, var(--papier) 88%, transparent);
  border-radius: 4px;
}
.gericht {
  display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto;
  grid-template-areas: "nr zeile tun" "nr was tun";
  column-gap: .8rem; align-items: center;
  padding: .95rem 0; border-bottom: 1px dashed color-mix(in srgb, var(--linie) 28%, transparent);
}
.gericht:last-child { border-bottom: 0; }
.gericht__nr { grid-area: nr; font-family: var(--sc-font-display); color: var(--sc-ink-soft); align-self: start; padding-top: .15rem; }
.gericht__zeile { grid-area: zeile; display: flex; align-items: baseline; gap: .6rem; min-width: 0; }
.gericht__name { font-family: var(--sc-font-display); font-weight: 400; text-transform: uppercase; letter-spacing: .08em; font-size: clamp(1rem, 1.5vw, 1.2rem); margin: 0; }
.gericht__punkte { flex: 1; min-width: 1rem; border-bottom: 2px dotted color-mix(in srgb, var(--linie) 40%, transparent); transform: translateY(-.25rem); }
.gericht__preis { font-family: var(--sc-font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gericht__was { grid-area: was; margin: .2rem 0 0; font-size: .88rem; color: var(--sc-ink-soft); }
.vegan { color: var(--blatt); font-weight: 500; margin-left: .35rem; white-space: nowrap; }
.gericht__tun { grid-area: tun; display: flex; gap: .4rem; }
.plus {
  min-width: 2.75rem; height: 2.75rem; padding: 0 .7rem;
  border-radius: 999px; border: 1.5px solid var(--karo);
  background: var(--papier); color: var(--karo);
  font-size: 1.15rem; font-weight: 600; line-height: 1; cursor: pointer;
  transition: background-color 140ms var(--sc-ease-out), color 140ms var(--sc-ease-out), transform 140ms var(--sc-ease-out);
}
@media (hover: hover) { .plus:hover { background: var(--karo); color: var(--sc-accent-ink); } }
.plus:active { transform: scale(.94); }
.plus--vegan { font-size: .78rem; font-weight: 500; border-color: var(--blatt); color: var(--blatt); }
@media (hover: hover) { .plus--vegan:hover { background: var(--blatt); color: #fff; } }
.plus.ist-drauf { animation: tupf .5s var(--sc-ease-out); }
@keyframes tupf { 40% { transform: scale(1.12); } }
@media (max-width: 900px) {
  .tafel { grid-template-columns: 1fr; grid-template-areas: "kopf" "karte" "brett" "foto"; }
  .tafel__seite { display: contents; }
  .tafel .brett { grid-area: brett; }
  .tafel__foto { grid-area: foto; width: min(20rem, 76vw); }
}
@media (max-width: 520px) {
  .gericht { grid-template-columns: 1.6rem minmax(0, 1fr); grid-template-areas: "nr zeile" "nr was" "nr tun"; }
  .gericht__tun { margin-top: .6rem; }
}

/* ============================================================= 4 · OFEN */
.akt-ofen { background: var(--wand); }
.ofen {
  --bake: clamp(0, calc((var(--sc-p, 0) - .1) * 1.45), 1);
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) minmax(0, .95fr);
  grid-template-areas: "film buehne text";
  align-items: center; gap: clamp(1rem, 3vw, 3rem);
  padding: calc(var(--leiste-h) + 1.5rem) clamp(1.2rem, 4vw, 4rem) 2rem;
  background: var(--wand);
}
.ofen__film { grid-area: film; margin: 0; position: relative; aspect-ratio: 3 / 4; max-height: 76vh; justify-self: center; width: 100%; }
.ofen__rahmen { position: absolute; inset: 16px; overflow: hidden; }
.ofen__rahmen :is(video, .sc-stage__poster) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ki-hinweis {
  position: absolute; left: 1.4rem; bottom: 1.4rem; z-index: 2;
  font-size: .72rem; padding: .25rem .55rem; border-radius: 999px;
  background: rgb(251 248 239 / .92); color: var(--sc-ink);
}
.ofen__buehne { grid-area: buehne; position: relative; display: grid; place-items: center; aspect-ratio: 1; }
.ofen__glut {
  position: absolute; inset: 4%;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 170 60 / calc(var(--bake) * .55)) 0%, rgb(230 90 30 / calc(var(--bake) * .35)) 45%, transparent 70%);
  transform: scale(calc(.85 + var(--bake) * .25));
}
.ofen__pizza { position: relative; width: 88%; transform: rotate(calc(var(--bake) * 40deg)); }
.ofen__text { grid-area: text; }
.ofen__text > * + * { margin-top: 1.2rem; }
.ofen__name { font-size: clamp(1.6rem, 2.8vw, 2.4rem); color: var(--karo); margin-bottom: 0; min-height: 1.3em; }
.ofen__satz { color: var(--sc-ink); }

/* Die Pizza backt: Teig bräunt, Flecken und Blasen kommen, Käse zieht. */
.pizza { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 14px 18px rgb(60 30 10 / .35)); }
.p-rand { fill: color-mix(in srgb, #c98a45 calc(var(--bake) * 100%), #f0ddb4); }
.p-rand-glanz { fill: none; stroke: color-mix(in srgb, #e3ad6a calc(var(--bake) * 100%), #f6e8c6); stroke-width: 6; opacity: .7; }
.p-flecken { opacity: clamp(0, calc(var(--bake) * 1.6 - .5), 1); }
.p-fleck { fill: #3a2112; }
.p-sosse { fill: color-mix(in srgb, #a8331f calc(var(--bake) * 100%), #cf4b2e); }
.p-kaese { fill: color-mix(in srgb, #f3d58f calc(var(--bake) * 100%), #fbf5e3); opacity: calc(.75 + var(--bake) * .25); transform-box: fill-box; transform-origin: center; transform: scale(calc(.8 + var(--bake) * .35)); }
.p-blasen { opacity: clamp(0, calc(var(--bake) * 1.8 - .8), 1); }
.p-blase { fill: #c07a33; opacity: .55; }
.p-basilikum { fill: #3f7a36; }
.p-salami circle { fill: #b2352a; } .p-salami .p-fett { fill: #f0c9b3; }
.p-sucuk circle { fill: #7d2418; } .p-sucuk .p-fett { fill: #e8b39a; }
.p-champignon { fill: #d8c7ad; stroke: #8b6f52; stroke-width: 1; }
.p-thunfisch { fill: #b99a86; }
.p-zwiebel { fill: none; stroke: #8f3a73; stroke-width: 2.2; stroke-linecap: round; }
.p-paprika { fill: none; stroke: #c3301f; stroke-width: 4; stroke-linecap: round; }
.p-paprika--gelb { stroke: #e0a92a; }
.p-aubergine circle { fill: #4a2a4f; } .p-aubergine .p-innen { fill: #d9cfa8; }
.p-zucchini circle { fill: #3d6b35; } .p-zucchini .p-innen { fill: #e6e0b0; }
.p-spinat { fill: #2f5a2c; }
.p-schafskaese { fill: #fbfaf4; stroke: #ddd6c4; stroke-width: .6; }
.p-haehnchen { fill: #e2c28f; stroke: #b98a4f; stroke-width: .8; }
.p-brokkoli circle, .p-brokkoli rect { fill: #3f7f3a; }
.p-mais { fill: #f1c233; }
.p-aioli { fill: none; stroke: #fbf7ea; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; opacity: .95; }
.p-hollandaise { fill: none; stroke: #f2cf55; stroke-width: 3.4; stroke-linecap: round; }
.p-kaese-weiss { fill: #fbf6e6; } .p-kaese-gelb { fill: #f4d47a; } .p-kaese-blau { fill: #e7e8df; stroke: #6f7e8f; stroke-width: 1.4; stroke-dasharray: 2 3; } .p-kaese-orange { fill: #efae55; }

@media (max-width: 860px) {
  .ofen {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto;
    grid-template-areas: "text text" "film buehne";
    align-content: center; row-gap: 1.2rem;
    padding-top: calc(var(--leiste-h) + .8rem); padding-bottom: 5rem;
  }
  .ofen__film { max-height: 42vh; }
  .ofen__rahmen { inset: 12px; }
  .ofen__text > * + * { margin-top: .6rem; }
  .ofen__text .sc-display--lg { font-size: clamp(1.7rem, 7vw, 2.4rem); }
}

/* ======================================================== 5 · GETRÄNKE */
.akt-getraenke { background: var(--sc-canvas); }
.getraenke { display: flex; align-items: center; background: var(--sc-canvas); }
.getraenke__schiene {
  display: flex; align-items: center; gap: clamp(1.4rem, 3vw, 2.6rem);
  padding: calc(var(--leiste-h) + 1rem) 8vw 2rem; width: max-content;
}
.getraenke__kopf { width: min(24rem, 78vw); flex: none; }
.getraenke__titel { font-family: var(--sc-font-display); font-style: italic; font-weight: 400; font-size: clamp(2.4rem, 4.6vw, 3.8rem); color: var(--blatt); margin: 0; line-height: 1.05; }
.getraenke__kopf .sc-body { margin-top: 1rem; }
.getraenke__schluss { width: min(20rem, 70vw); flex: none; }
.getraenke__hand { font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--karo); margin: .6rem 0 .6rem; }
.glaeser { width: 10rem; overflow: visible; }
.glas path { fill: none; stroke: var(--karo); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.glas .glas__inhalt { fill: color-mix(in srgb, var(--karo) 28%, transparent); stroke: none; }
.glas--links { transform-origin: 53px 95px; }
.glas--rechts { transform-origin: 107px 95px; }
.glas__funken path { stroke: var(--karo); stroke-width: 2; stroke-linecap: round; fill: none; opacity: 0; }
.glaeser.stoesst .glas--links { animation: anstossen-l .6s var(--sc-ease-out); }
.glaeser.stoesst .glas--rechts { animation: anstossen-r .6s var(--sc-ease-out); }
.glaeser.stoesst .glas__funken path { animation: funken .6s var(--sc-ease-out); }
@keyframes anstossen-l { 45% { transform: rotate(14deg) translateX(6px); } }
@keyframes anstossen-r { 45% { transform: rotate(-14deg) translateX(-6px); } }
@keyframes funken { 40%, 60% { opacity: 1; } }
.blatt { flex: none; width: clamp(17rem, 24vw, 21rem); }
.blatt__titel { font-family: var(--sc-font-display); font-weight: 400; font-size: 1.35rem; margin: .2rem 0 .6rem; text-align: center; }
.liste { list-style: none; margin: 0; padding: 0; }
.trank { display: flex; align-items: center; gap: .5rem; padding: .28rem 0; font-size: .9rem; }
.trank__name { font-family: var(--sc-font-display); text-transform: uppercase; letter-spacing: .05em; font-size: .78rem; flex: 1; min-width: 0; }
.trank__preis { font-family: var(--sc-font-display); font-size: .86rem; white-space: nowrap; }
.trank .plus { min-width: 2.6rem; height: 2.6rem; font-size: 1rem; }
@media (pointer: coarse) { .trank .plus { min-width: 2.75rem; height: 2.75rem; } .trank__sorte select { min-height: 2.75rem; } }
.trank__sorte select { min-height: 2.2rem; font-size: .76rem; padding: .2rem .3rem; border: 1px solid color-mix(in srgb, var(--linie) 35%, transparent); border-radius: 4px; background: var(--papier); max-width: 7.5rem; }
.liste--laden .trank { padding: .5rem 0; }
.blatt__klein { font-size: .78rem; color: var(--sc-ink-soft); margin: .8rem 0 0; }
.getraenke__foto { width: clamp(14rem, 22vw, 19rem); }
@media (max-width: 700px) {
  .blatt { width: 82vw; }
  .trank { padding: .15rem 0; }
}

/* ============================================================ 6 · THEKE */
.akt-theke { background: var(--tapete); }
.theke {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  grid-template-areas: "kopf kopf" "zettel form";
  column-gap: clamp(2rem, 5vw, 5rem); row-gap: 2rem; align-items: start;
}
.theke__kopf { grid-area: kopf; max-width: 44rem; }
.theke__kopf .sc-body { margin-top: 1rem; }
.theke__zettel { grid-area: zettel; box-shadow: 0 18px 36px -24px rgb(31 42 37 / .5); transform: rotate(-.8deg); }
.theke__zettel-kopf { font-family: var(--sc-font-display); text-transform: uppercase; letter-spacing: .14em; font-size: .9rem; margin: .2rem 0 1rem; text-align: center; }
.rechnung { margin: 1.2rem 0 .4rem; border-top: 1.5px solid var(--linie); padding-top: .8rem; }
.rechnung div { display: flex; justify-content: space-between; gap: 1rem; padding: .2rem 0; }
.rechnung dt { color: var(--sc-ink-soft); }
.rechnung dd { margin: 0; font-family: var(--sc-font-display); font-variant-numeric: tabular-nums; }
.rechnung__summe dt, .rechnung__summe dd { color: var(--sc-ink); font-weight: 700; font-size: 1.15rem; }
.theke__form { grid-area: form; }
.wahl { border: 0; padding: 0; margin: 0 0 1.4rem; display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.wahl__titel { font-family: var(--sc-font-display); font-size: 1.2rem; margin-bottom: .8rem; padding: 0; }
.wahl__knopf { position: relative; display: block; cursor: pointer; }
.wahl__knopf input { position: absolute; opacity: 0; }
.wahl__knopf span { display: block; padding: .9rem 1rem; border-radius: 10px; border: 1.5px solid color-mix(in srgb, var(--linie) 40%, transparent); background: var(--papier); font-weight: 500; }
.wahl__knopf small { display: block; font-weight: 400; font-size: .8rem; color: var(--sc-ink-soft); margin-top: .15rem; }
.wahl__knopf input:checked + span { border-color: var(--karo); box-shadow: inset 0 0 0 1.5px var(--karo); }
.wahl__knopf input:focus-visible + span { outline: 2px solid var(--karo); outline-offset: 3px; }
.feld-gruppe { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem 1rem; margin-bottom: 1.2rem; }
.feld { display: grid; gap: .3rem; font-size: .88rem; }
.feld--breit { grid-column: 1 / -1; }
.feld small { color: var(--sc-ink-soft); font-weight: 400; }
.feld input, .feld select {
  min-height: 2.9rem; padding: .55rem .8rem; font-size: 1rem;
  border-radius: 8px; border: 1.5px solid color-mix(in srgb, var(--linie) 35%, transparent);
  background: var(--papier);
}
.feld input:focus, .feld select:focus { border-color: var(--karo); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--karo) 22%, transparent); }
.feld input[aria-invalid="true"] { border-color: var(--karo); }
.feld-hinweis { grid-column: 1 / -1; margin: 0; font-size: .82rem; color: var(--sc-ink-soft); }
.feld-hinweis[data-ton="gut"] { color: var(--blatt); font-weight: 500; }
.feld-hinweis[data-ton="nein"] { color: var(--karo); font-weight: 500; }
.theke__stand { min-height: 1.4em; font-size: .9rem; margin: 0 0 .9rem; color: var(--sc-ink-soft); }
.entwurf-hinweis { font-size: .8rem; margin: .8rem 0 0; padding: .5rem .7rem; border: 1px dashed var(--linie); background: color-mix(in srgb, var(--zitrone) 30%, transparent); max-width: 46ch; }
.theke__klein { font-size: .8rem; color: var(--sc-ink-soft); margin: 1rem 0 0; max-width: 46ch; }
@media (max-width: 900px) {
  .theke { grid-template-columns: 1fr; grid-template-areas: "kopf" "zettel" "form"; }
  .theke__zettel { transform: none; }
}
@media (max-width: 460px) {
  .feld-gruppe, .wahl { grid-template-columns: 1fr; }
}

/* ======================================================= 7 · VOR DER TÜR */
.akt-tuer { background: var(--terrakotta); }
.tuer { display: grid; place-items: center; padding: calc(var(--leiste-h) + 1rem) 1rem 4.5rem; background: var(--terrakotta); }
.tuer__grund { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.tuer__karte { position: relative; width: min(30rem, 100%); text-align: center; box-shadow: 0 24px 48px -24px rgb(20 20 20 / .55); }
.tuer__hand { font-size: clamp(2rem, 4vw, 2.8rem); color: var(--karo); margin: 0 0 .4rem; }
.tuer__adresse { margin: .6rem 0 0; color: var(--sc-ink-soft); }
.tuer__zeit { margin: .4rem 0 0; font-weight: 500; }
.tuer__knoepfe { display: flex; justify-content: center; flex-wrap: wrap; gap: .7rem; margin: 1.4rem 0 .4rem; }
.tuer__foto-hinweis { position: absolute; right: 1rem; bottom: 1rem; margin: 0; font-size: .74rem; padding: .25rem .6rem; border-radius: 999px; background: rgb(251 248 239 / .9); }

/* ----------------------------------------------------------------- Fuß -- */
.fuss { background: var(--linie); color: #eae4d6; padding: 2rem clamp(1.2rem, 5vw, 5rem) 6rem; font-size: .86rem; }
.fuss p { margin: .3rem 0; }
.fuss a { color: #fffaf0; }
@media (min-width: 1000px) { .fuss { padding-bottom: 2rem; } }

/* Reduzierte Bewegung: kein Tupfen, kein Anstoßen, keine Schräglage, die sich aufrichtet. */
@media (prefers-reduced-motion: reduce) {
  .plus.ist-drauf, .glaeser.stoesst .glas--links, .glaeser.stoesst .glas--rechts, .glaeser.stoesst .glas__funken path { animation: none !important; }
  .ecke__karte { transform: none; }
}