/* Bildschirm-Anzeige. Die Bühne hat feste Pixelmaße je Format (quer 1920 × 1080, hoch 1080 × 1920, Banner 1920 × 720);
   player.js skaliert sie auf jeden Fernseher.
   So sieht jede Tafel auf jedem Gerät gleich aus, und hier lässt sich in echten Pixeln gestalten.
   Zwei Designs: [data-thema="dunkel"] (kräftig) und [data-thema="hell"] (ruhig). Farbe und Logo kommen vom Betrieb. */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 800; font-display: block; src: url("../schrift/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 800; font-display: block; src: url("../schrift/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: block; src: url("../schrift/barlow-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: block; src: url("../schrift/barlow-condensed-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 800; font-display: block; src: url("../schrift/barlow-condensed-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 100 900; font-display: block; src: url("../schrift/fraunces-latin-wght-normal.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: italic; font-weight: 100 900; font-display: block; src: url("../schrift/fraunces-latin-wght-italic.woff2") format("woff2"); }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; }

.rahmen { position: fixed; inset: 0; overflow: hidden; background: #000; cursor: none; }
.buehne {
  position: absolute; left: 50%; top: 50%; width: var(--b, 1920px); height: var(--h, 1080px); overflow: hidden;
  transform: translate(-50%, -50%) scale(var(--s, 1)); transform-origin: center;
  font-family: "Inter", system-ui, sans-serif; font-size: 24px; line-height: 1.3;
  color: var(--text); background: var(--bg);
  --akzent: #ffc400; --akzent-text: #111111;
}

/* ---------- Designs ---------- */
.buehne, .buehne[data-thema="dunkel"] {
  --bg: #0b0b0d; --flaeche: #18181b; --flaeche-2: #26262b; --text: #ffffff; --leise: #b9b9c2; --linie: #2e2e34;
  --anzeige: "Barlow Condensed", "Arial Narrow", sans-serif; --titel-gewicht: 800; --titel-gross: uppercase; --titel-skala: 1;
  --radius: 28px; --schatten: 0 28px 60px rgba(0, 0, 0, .55);
}
.buehne[data-thema="hell"] {
  --bg: #f7f0e4; --flaeche: #fffdf9; --flaeche-2: #efe4d1; --text: #231d17; --leise: #6a6055; --linie: #ddd0bb;
  --anzeige: "Fraunces", Georgia, serif; --titel-gewicht: 600; --titel-gross: none; --titel-skala: .86;
  --radius: 24px; --schatten: 0 22px 46px rgba(80, 52, 24, .2);
}

/* ---------- Folien: Grundlage und Übergang ---------- */
.folie { position: absolute; inset: 0; overflow: hidden; background: var(--bg); opacity: 0; transition: opacity 900ms ease; }
.folie.ist-sichtbar { opacity: 1; }
.folie.geht { opacity: 0; }
.leer { position: absolute; inset: 0; display: grid; place-items: center; color: var(--leise); font-size: 40px; }

/* Bildschirm einrichten: Code eingeben (groß, mit der Fernbedienung bedienbar) */
.rahmen:has(.koppeln) { cursor: auto; }
.koppeln { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 80px;
  background: radial-gradient(1200px 700px at 50% 0%, #1d1f26, #0b0b0d 70%); color: #fff; }
.koppeln-ueber { margin: 0 0 12px; color: var(--akzent); font-weight: 700; font-size: 30px; letter-spacing: .14em; text-transform: uppercase; }
.koppeln-titel { margin: 0 0 18px; font: 800 150px/0.95 "Barlow Condensed", sans-serif; text-transform: uppercase; }
.koppeln-text { margin: 0 0 56px; color: #b9b9c2; font-size: 34px; }
.koppeln-form { display: flex; gap: 24px; align-items: stretch; }
.koppeln-feld { width: 560px; padding: 18px 30px; border-radius: 22px; border: 4px solid #3a3a42; background: #141418; color: #fff;
  font: 800 96px/1 "Barlow Condensed", sans-serif; letter-spacing: .18em; text-align: center; text-transform: uppercase; }
.koppeln-feld:focus { outline: none; border-color: var(--akzent); }
.koppeln-feld::placeholder { color: #3f3f47; }
.koppeln-knopf { padding: 0 56px; border: 0; border-radius: 22px; background: var(--akzent); color: var(--akzent-text); font: 700 44px/1 "Inter", sans-serif; cursor: pointer; }
.koppeln-knopf:focus-visible { outline: 6px solid #fff; outline-offset: 4px; }
.koppeln-fehler { min-height: 44px; margin: 28px 0 0; color: #ff8a7a; font-size: 32px; }
/* Verbinden per QR-Code: links der Code zum Scannen, rechts die drei Schritte und derselbe Code als Text */
.koppeln.mit-qr { flex-direction: row; gap: 110px; text-align: left; }
.koppeln-qr { flex: none; width: 560px; height: 560px; padding: 30px; border-radius: 34px; background: #fff; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.koppeln-qr img { display: block; width: 100%; height: 100%; }
.koppeln-qr img:not([src]) { visibility: hidden; }
.koppeln-spalte { max-width: 820px; }
.koppeln-titel-qr { font-size: 132px; margin-bottom: 30px; }
.koppeln-schritte { list-style: none; counter-reset: schritt; display: grid; gap: 18px; margin: 0 0 44px; }
.koppeln-schritte li { counter-increment: schritt; display: flex; align-items: center; gap: 22px; font-size: 38px; font-weight: 600; }
.koppeln-schritte li::before { content: counter(schritt); display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--akzent); color: var(--akzent-text); font-weight: 800; font-size: 30px; flex: none; }
.koppeln-klein { color: #8d8d98; font-size: 26px; letter-spacing: .08em; text-transform: uppercase; }
.koppeln-code { margin: 6px 0 0; font: 800 120px/1 "Barlow Condensed", sans-serif; letter-spacing: .16em; color: var(--akzent); }
.koppeln-status { min-height: 40px; margin: 16px 0 0; color: #ff8a7a; font-size: 30px; }
.koppeln-wechsel { margin-top: 30px; padding: 14px 26px; border-radius: 16px; border: 3px solid #3a3a42; background: transparent; color: #c9c9d1; font: 600 28px/1 "Inter", sans-serif; cursor: pointer; }
.koppeln-wechsel:focus-visible { outline: 6px solid #fff; outline-offset: 4px; border-color: var(--akzent); }

h1, h2, p, ul { margin: 0; padding: 0; }
ul { list-style: none; }
.titel { font-family: var(--anzeige); font-weight: var(--titel-gewicht); text-transform: var(--titel-gross); line-height: .92; letter-spacing: .004em; text-wrap: balance; font-variant-numeric: lining-nums; }

/* ---------- Bewegung ---------- */
@keyframes rein { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes pop { 0% { opacity: 0; transform: scale(.5) rotate(-16deg); } 65% { opacity: 1; transform: scale(1.07) rotate(-4deg); } 100% { opacity: 1; transform: scale(1) rotate(-6deg); } }
@keyframes kb { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.13) translate(-1.6%, -1.2%); } }
.rein { opacity: 0; }
.folie.ist-sichtbar .rein { animation: rein 800ms cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(250ms + var(--i, 0) * 110ms); }
.folie.ist-sichtbar .pop { animation-name: pop; animation-duration: 900ms; }
.kb { animation: kb var(--dauer, 10s) ease-out both paused; }
.folie.ist-sichtbar .kb { animation-play-state: running; }
.ruhig .rein { opacity: 1; animation: none !important; }
.ruhig .kb { animation: none; }
.ruhig .pop { transform: rotate(-6deg); }
.ruhig .folie { transition-duration: 300ms; }

/* ---------- Bausteine ---------- */
.marke { display: inline-flex; align-items: center; gap: 18px; position: absolute; z-index: 3; }
.marke-kreis { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: var(--akzent); color: var(--akzent-text);
  font: 800 30px/1 var(--anzeige); letter-spacing: .02em; }
.marke-name { font: 700 30px/1 var(--anzeige); letter-spacing: .1em; text-transform: uppercase; }
.marke-logo { display: block; max-height: 76px; max-width: 320px; width: auto; }

.preis { display: inline-flex; align-items: flex-start; font-family: var(--anzeige); font-weight: 800; line-height: .84; font-variant-numeric: lining-nums; white-space: nowrap; }
.preis-rest { display: flex; flex-direction: column; justify-content: space-between; margin-left: .1em; font-size: .42em; line-height: 1; padding-top: .1em; }
.preis-cent { letter-spacing: .02em; }
.preis-eur { font-weight: 700; }
.buehne[data-thema="hell"] .preis { font-weight: 700; }

.kicker { align-self: flex-start; background: var(--akzent); color: var(--akzent-text); font: 800 30px/1 var(--anzeige); letter-spacing: .14em; text-transform: uppercase; padding: 11px 24px 12px; border-radius: 10px; }
.buehne[data-thema="hell"] .kicker { border-radius: 999px; font-family: "Inter", sans-serif; font-size: 22px; font-weight: 700; padding: 12px 26px; }

.kennzeichen { display: flex; gap: 10px; flex-wrap: wrap; }
.kz { font: 700 19px/1 "Inter", sans-serif; letter-spacing: .07em; text-transform: uppercase; padding: 8px 14px 8px; border-radius: 999px; background: var(--flaeche-2); color: var(--text); white-space: nowrap; }
.kz-scharf { background: #d93a3a; color: #fff; }
.kz-vegan, .kz-vegetarisch { background: #2b9a57; color: #fff; }
.kz-glutenfrei { background: #6a5acd; color: #fff; }
.kz-neu { background: var(--akzent); color: var(--akzent-text); }
.kz-beliebt { background: transparent; color: var(--text); box-shadow: inset 0 0 0 2px var(--akzent); }

.ohne-bild { background: linear-gradient(135deg, var(--flaeche-2), var(--flaeche)); }
.ausverkauft-marke { position: absolute; z-index: 3; font: 800 34px/1 var(--anzeige); letter-spacing: .1em; text-transform: uppercase; padding: 12px 24px; background: #d93a3a; color: #fff; border-radius: 10px; }

/* ---------- Hero ---------- */
.folie-hero .marke { left: 96px; top: 60px; }
.hero-grund { position: absolute; inset: 0; overflow: hidden; }
.hero-grund-bild { width: 100%; height: 100%; object-fit: cover; transform: scale(1.25); filter: blur(34px) brightness(.5) saturate(1.25); }
.hero-grund::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 8, 10, .94) 0, rgba(8, 8, 10, .6) 52%, rgba(8, 8, 10, .15) 100%); }
.buehne[data-thema="hell"] .hero-grund { background: linear-gradient(110deg, var(--bg) 0 52%, color-mix(in srgb, var(--akzent) 16%, var(--bg)) 52% 100%); }
.buehne[data-thema="hell"] .hero-grund-bild, .buehne[data-thema="hell"] .hero-grund::after { display: none; }

.hero-foto { position: absolute; right: 96px; top: 150px; width: 900px; height: 790px; overflow: hidden; border-radius: 44px; box-shadow: var(--schatten); }
.hero-foto .kb, .karte-foto .kb, .menue-foto .kb { width: 100%; height: 100%; object-fit: cover; display: block; }
.buehne[data-thema="hell"] .hero-foto { border-radius: 450px 450px 40px 40px; }

.hero-text { position: absolute; left: 96px; top: 150px; bottom: 140px; width: 790px; display: flex; flex-direction: column; justify-content: center; gap: 30px; }
.folie-hero .titel-t1 { font-size: calc(190px * var(--titel-skala)); }
.folie-hero .titel-t2 { font-size: calc(150px * var(--titel-skala)); }
.folie-hero .titel-t3 { font-size: calc(116px * var(--titel-skala)); }
.folie-hero .titel-t4 { font-size: calc(90px * var(--titel-skala)); }
.untertitel { font-size: 36px; line-height: 1.32; color: var(--leise); max-width: 680px; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.buehne:not([data-thema="hell"]) .untertitel { color: #d4d4db; }

.hero-schild { position: absolute; right: 56px; top: 96px; z-index: 4; width: 300px; height: 300px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: var(--akzent); color: var(--akzent-text); transform: rotate(-6deg); box-shadow: 0 18px 40px rgba(0, 0, 0, .4), inset 0 0 0 7px rgba(255, 255, 255, .22); }
.hero-schild .preis-gross { font-size: 138px; }
.vorher { font: 600 26px/1 "Inter", sans-serif; text-decoration: line-through; text-decoration-thickness: 2px; opacity: .8; }

/* ---------- Tafel: Kopf und Fuß ---------- */
.kopf { position: absolute; left: 96px; right: 96px; top: 56px; height: 190px; display: flex; justify-content: space-between; align-items: flex-start; }
.kopf-titel { min-width: 0; }
.kopf .marke { position: static; margin-top: 8px; }
.folie-tafel .titel-t1 { font-size: calc(132px * var(--titel-skala)); }
.folie-tafel .titel-t2 { font-size: calc(112px * var(--titel-skala)); }
.folie-tafel .titel-t3 { font-size: calc(96px * var(--titel-skala)); }
.folie-tafel .titel-t4 { font-size: calc(78px * var(--titel-skala)); }
.kopf .titel::after { content: ""; display: block; width: 150px; height: 12px; margin-top: 16px; background: linear-gradient(90deg, var(--akzent) 0 38%, color-mix(in srgb, var(--akzent) 35%, #fff) 50%, var(--akzent) 62% 100%) 100% 0 / 300% 100%; transform: skewX(-24deg); animation: balken 3.4s linear infinite; }
.buehne[data-thema="hell"] .kopf .titel::after { width: 90px; height: 4px; transform: none; margin-top: 18px; }
.kopf-unter { margin-top: 14px; font-size: 32px; color: var(--leise); }
.buehne[data-thema="hell"] .kopf-unter { font-style: italic; font-family: var(--anzeige); font-weight: 400; }

.fuss { position: absolute; left: 96px; right: 96px; bottom: 34px; display: flex; justify-content: space-between; align-items: center; gap: 40px; font-size: 21px; color: var(--leise); }
.fussnote { max-width: 1400px; }
.seiten { display: flex; gap: 12px; align-items: center; }
.punkt { width: 14px; height: 14px; border-radius: 999px; background: var(--linie); }
.punkt.aktiv { width: 40px; background: var(--akzent); }

/* ---------- Tafel: Fotokarten ---------- */
.dar-foto .eintraege { position: absolute; left: 96px; right: 96px; top: 290px; bottom: 104px; display: flex; justify-content: center; gap: 36px; }
.karte { flex: 0 0 calc((100% - 3 * 36px) / 4); position: relative; display: flex; flex-direction: column; background: var(--flaeche); border-radius: var(--radius); box-shadow: var(--schatten); }
.buehne[data-thema="hell"] .karte { box-shadow: var(--schatten), inset 0 0 0 1px var(--linie); }
.karte-bild { position: relative; flex: 0 0 60%; }
.karte-foto { position: absolute; inset: 0; overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; }
.karte .preis-schild { position: absolute; right: 22px; bottom: -46px; z-index: 2; font-size: 70px; padding: 12px 22px 14px 24px; border-radius: 22px;
  background: var(--akzent); color: var(--akzent-text); box-shadow: 0 14px 26px rgba(0, 0, 0, .35); }
.karte-text { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 60px 30px 28px; min-height: 0; }
.name { margin: 0; font-family: var(--anzeige); font-weight: var(--titel-gewicht); text-transform: var(--titel-gross); letter-spacing: .01em; line-height: 1; font-size: 46px; text-wrap: balance; }
.buehne[data-thema="dunkel"] .name { font-weight: 700; }
.buehne[data-thema="hell"] .name { font-size: 38px; }
.beschreibung { font-size: 25px; line-height: 1.28; color: var(--leise); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.zusatz { font-size: .8em; opacity: .75; white-space: nowrap; }
.karte-text .kennzeichen { margin-top: auto; }
.ausverkauft .karte-foto, .ausverkauft .zeile-bild { filter: grayscale(1) brightness(.45); }
.karte .ausverkauft-marke { left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-8deg); }

/* ---------- Tafel: Preisliste ---------- */
.dar-liste .eintraege { position: absolute; left: 96px; right: 96px; top: 280px; bottom: 100px; display: grid; grid-auto-flow: column; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(var(--zeilen, 5), minmax(0, 164px)); column-gap: 80px; align-content: center; }
.zeile { display: grid; grid-template-columns: 124px 1fr auto; align-items: center; column-gap: 28px; padding: 10px 0; border-bottom: 2px solid var(--linie); min-width: 0; }
.zeile-bild { position: relative; width: 124px; height: 124px; border-radius: 22px; overflow: hidden; background: var(--flaeche-2); }
.zeile-bild img { position: relative; width: 100%; height: 100%; object-fit: cover; display: block; }
.zeile-zeichen { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--anzeige); font-weight: var(--titel-gewicht); font-size: 64px; line-height: 1; color: var(--akzent); }
.buehne[data-thema="farbe"] .zeile-zeichen { color: var(--akzent-text); }
.zeile-bild.ohne-bild { background: var(--flaeche-2); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--akzent) 45%, transparent); }
.buehne[data-thema="farbe"] .zeile-bild.ohne-bild { box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .3); }
[data-format="hoch"] .zeile-zeichen { font-size: 76px; }
.zeile-text { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.zeile-kopf { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 16px; min-width: 0; }
.zeile-kopf .name { font-size: 46px; }
.buehne[data-thema="hell"] .zeile-kopf .name { font-size: 34px; }
.zeile .beschreibung { font-size: 24px; -webkit-line-clamp: 1; line-clamp: 1; }
.zeile .kz { font-size: 15px; padding: 5px 11px; }
.zeile .kennzeichen { gap: 8px; flex-wrap: nowrap; }
.zeile .preis-zeile { font-size: 64px; color: var(--akzent); }
.buehne[data-thema="hell"] .zeile .preis-zeile { color: var(--akzent); }
.zeile .ausverkauft-marke { position: static; font-size: 26px; }

/* ---------- Menü / Angebot ---------- */
.menue-foto { position: absolute; left: 0; top: 0; bottom: 0; width: 1080px; overflow: hidden; clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%); }
.buehne[data-thema="hell"] .menue-foto { clip-path: none; width: 900px; left: 96px; top: 150px; bottom: 150px; border-radius: 40px; box-shadow: var(--schatten); }
.folie-menue .marke { right: 96px; top: 60px; }
.menue-inhalt { position: absolute; left: 1130px; right: 96px; top: 150px; bottom: 100px; display: flex; flex-direction: column; justify-content: center; gap: 26px; }
.buehne[data-thema="hell"] .menue-inhalt { left: 1080px; }
.folie-menue .titel-t1 { font-size: calc(150px * var(--titel-skala)); }
.folie-menue .titel-t2 { font-size: calc(126px * var(--titel-skala)); }
.folie-menue .titel-t3 { font-size: calc(100px * var(--titel-skala)); }
.folie-menue .titel-t4 { font-size: calc(80px * var(--titel-skala)); }
.enthalten { display: flex; flex-direction: column; gap: 14px; margin: 6px 0 10px; }
.enthalten-punkt { display: flex; align-items: center; gap: 18px; font-size: 38px; font-weight: 600; }
.haken { width: 40px; height: 40px; flex: none; padding: 7px; border-radius: 50%; background: var(--akzent); stroke: var(--akzent-text); fill: none; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.menue-preis { align-self: flex-start; display: flex; align-items: center; flex-wrap: wrap; gap: 8px 30px; padding: 22px 44px 26px; border-radius: var(--radius); background: var(--akzent); color: var(--akzent-text); transform: rotate(-2deg); box-shadow: 0 20px 40px rgba(0, 0, 0, .35); }
.menue-preis .preis-gross { font-size: 172px; }
.menue-preis .vorher { font-size: 32px; }
.menue-preis .hinweis { flex-basis: 100%; font: 700 28px/1.1 "Inter", sans-serif; letter-spacing: .02em; }

/* ---------- Eigenes Bild oder Video ---------- */
.folie-medium { background: #000; }
.medium-grund { position: absolute; inset: 0; overflow: hidden; }
.medium-grund-bild { width: 100%; height: 100%; object-fit: cover; transform: scale(1.2); filter: blur(40px) brightness(.5); }
.medium-inhalt { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.medium-inhalt.ganz { object-fit: contain; }

/* ================================================================== */
/* Hochformat: stehender Bildschirm, 1080 × 1920                       */
/* ================================================================== */
[data-format="hoch"] .fuss { left: 64px; right: 64px; bottom: 44px; }

/* Hero: Foto oben, Text darunter */
[data-format="hoch"] .folie-hero .marke { left: 64px; top: 60px; }
[data-format="hoch"] .hero-grund::after { background: linear-gradient(180deg, rgba(8, 8, 10, .45) 0, rgba(8, 8, 10, .93) 52%); }
[data-format="hoch"][data-thema="hell"] .hero-grund { background: linear-gradient(180deg, var(--bg) 0 54%, color-mix(in srgb, var(--akzent) 16%, var(--bg)) 54% 100%); }
[data-format="hoch"] .hero-foto { left: 64px; right: 64px; top: 190px; width: auto; height: 1060px; }
[data-format="hoch"][data-thema="hell"] .hero-foto { border-radius: 476px 476px 40px 40px; }
[data-format="hoch"] .hero-text { left: 64px; right: 64px; width: auto; top: 1290px; bottom: 70px; justify-content: center; gap: 28px; }
[data-format="hoch"] .folie-hero .titel-t1 { font-size: calc(176px * var(--titel-skala)); }
[data-format="hoch"] .folie-hero .titel-t2 { font-size: calc(140px * var(--titel-skala)); }
[data-format="hoch"] .folie-hero .titel-t3 { font-size: calc(110px * var(--titel-skala)); }
[data-format="hoch"] .folie-hero .titel-t4 { font-size: calc(86px * var(--titel-skala)); }
[data-format="hoch"] .untertitel { max-width: none; font-size: 38px; }
[data-format="hoch"] .hero-schild { right: 36px; top: 990px; width: 270px; height: 270px; }
[data-format="hoch"] .hero-schild .preis-gross { font-size: 122px; }

/* Tafel: Marke über dem Titel */
[data-format="hoch"] .kopf { left: 64px; right: 64px; top: 56px; height: 270px; flex-direction: column-reverse; align-items: flex-start; justify-content: flex-end; gap: 30px; }
[data-format="hoch"] .kopf .marke { margin-top: 0; }
[data-format="hoch"] .folie-tafel .titel-t1 { font-size: calc(120px * var(--titel-skala)); }
[data-format="hoch"] .folie-tafel .titel-t2 { font-size: calc(104px * var(--titel-skala)); }
[data-format="hoch"] .folie-tafel .titel-t3 { font-size: calc(88px * var(--titel-skala)); }
[data-format="hoch"] .folie-tafel .titel-t4 { font-size: calc(72px * var(--titel-skala)); }

/* Fotokarten: zwei mal zwei */
[data-format="hoch"] .dar-foto .eintraege { left: 64px; right: 64px; top: 400px; bottom: 110px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 64px 36px; justify-content: normal; }
[data-format="hoch"] .karte { flex: none; }

/* Preisliste: eine Spalte, große Fotos */
[data-format="hoch"] .dar-liste .eintraege { left: 64px; right: 64px; top: 390px; bottom: 120px; grid-auto-flow: row; grid-template-columns: 1fr; grid-template-rows: repeat(var(--zeilen, 8), minmax(0, 188px)); column-gap: 0; }
[data-format="hoch"] .zeile { grid-template-columns: 150px 1fr auto; }
[data-format="hoch"] .zeile-bild { width: 150px; height: 150px; }
[data-format="hoch"] .zeile .beschreibung { -webkit-line-clamp: 2; line-clamp: 2; }

/* Menü: Foto oben, Inhalt darunter */
[data-format="hoch"] .menue-foto { left: 0; top: 0; width: 100%; height: 1010px; bottom: auto; clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%); }
[data-format="hoch"][data-thema="hell"] .menue-foto { left: 64px; top: 170px; width: 952px; height: 840px; clip-path: none; }
[data-format="hoch"] .folie-menue .marke { left: 64px; right: auto; top: 56px; padding: 10px 28px 10px 10px; border-radius: 999px; background: var(--flaeche); box-shadow: var(--schatten); }
[data-format="hoch"][data-thema="hell"] .folie-menue .marke { box-shadow: none; padding: 0; background: none; }
[data-format="hoch"] .menue-inhalt { left: 64px; right: 64px; top: 1060px; bottom: 70px; justify-content: flex-start; gap: 22px; }
[data-format="hoch"][data-thema="hell"] .menue-inhalt { left: 64px; }
[data-format="hoch"] .folie-menue .titel-t1 { font-size: calc(124px * var(--titel-skala)); }
[data-format="hoch"] .folie-menue .titel-t2 { font-size: calc(104px * var(--titel-skala)); }
[data-format="hoch"] .folie-menue .titel-t3 { font-size: calc(84px * var(--titel-skala)); }
[data-format="hoch"] .folie-menue .titel-t4 { font-size: calc(68px * var(--titel-skala)); }
[data-format="hoch"] .enthalten-punkt { font-size: 34px; }
[data-format="hoch"] .menue-preis .preis-gross { font-size: 140px; }

/* ================================================================== */
/* Banner: breiter, flacher Bildschirm, 1920 × 720                     */
/* ================================================================== */
[data-format="streifen"] .fuss { left: 470px; right: 48px; bottom: 20px; font-size: 17px; }

/* Hero: Text links, Foto rechts mit schräger Kante, Preisschild auf der Kante */
[data-format="streifen"] .folie-hero .marke { left: 64px; top: 40px; }
[data-format="streifen"] .hero-foto { left: auto; right: 0; top: 0; bottom: 0; width: 820px; height: auto; border-radius: 0; box-shadow: none; clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); }
[data-format="streifen"][data-thema="hell"] .hero-foto { right: 56px; top: 56px; bottom: 56px; width: 700px; clip-path: none; border-radius: 360px 40px 40px 360px; box-shadow: var(--schatten); }
[data-format="streifen"] .hero-text { left: 64px; top: 110px; bottom: 50px; width: 980px; gap: 18px; }
[data-format="streifen"] .folie-hero .titel-t1 { font-size: calc(150px * var(--titel-skala)); }
[data-format="streifen"] .folie-hero .titel-t2 { font-size: calc(124px * var(--titel-skala)); }
[data-format="streifen"] .folie-hero .titel-t3 { font-size: calc(98px * var(--titel-skala)); }
[data-format="streifen"] .folie-hero .titel-t4 { font-size: calc(76px * var(--titel-skala)); }
[data-format="streifen"] .untertitel { font-size: 31px; -webkit-line-clamp: 2; line-clamp: 2; }
[data-format="streifen"] .hero-schild { right: 650px; top: auto; bottom: 64px; width: 250px; height: 250px; }
[data-format="streifen"][data-thema="hell"] .hero-schild { right: 560px; }
[data-format="streifen"] .hero-schild .preis-gross { font-size: 116px; }
[data-format="streifen"] .hero-schild .vorher { font-size: 22px; }
[data-format="streifen"] .kicker { font-size: 26px; padding: 9px 20px 10px; }

/* Menü: Foto links, Text und Preisplatte nebeneinander */
[data-format="streifen"] .menue-foto { width: 660px; clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%); }
[data-format="streifen"][data-thema="hell"] .menue-foto { left: 56px; top: 56px; bottom: 56px; width: 620px; clip-path: none; }
[data-format="streifen"] .folie-menue .marke { right: 64px; top: 36px; }
[data-format="streifen"] .menue-inhalt { left: 740px; right: 64px; top: 70px; bottom: 50px; display: grid; grid-template-columns: 1fr auto; column-gap: 56px; align-content: center; justify-content: stretch; gap: 16px 56px; }
[data-format="streifen"][data-thema="hell"] .menue-inhalt { left: 740px; }
[data-format="streifen"] .menue-inhalt > * { grid-column: 1; }
[data-format="streifen"] .menue-inhalt > .kicker { justify-self: start; }
[data-format="streifen"] .menue-inhalt > .menue-preis { grid-column: 2; grid-row: 1 / span 3; align-self: center; flex-direction: column; align-items: flex-start; padding: 22px 38px 24px; }
[data-format="streifen"] .folie-menue .titel-t1 { font-size: calc(132px * var(--titel-skala)); }
[data-format="streifen"] .folie-menue .titel-t2 { font-size: calc(116px * var(--titel-skala)); }
[data-format="streifen"] .folie-menue .titel-t3 { font-size: calc(92px * var(--titel-skala)); }
[data-format="streifen"] .folie-menue .titel-t4 { font-size: calc(62px * var(--titel-skala)); }
[data-format="streifen"] .enthalten { flex-direction: row; flex-wrap: wrap; gap: 10px 30px; margin: 0; }
[data-format="streifen"] .enthalten-punkt { font-size: 32px; }
[data-format="streifen"] .haken { width: 34px; height: 34px; padding: 6px; }
[data-format="streifen"] .menue-preis .preis-gross { font-size: 124px; }
[data-format="streifen"] .menue-preis .vorher { font-size: 26px; }
[data-format="streifen"] .menue-preis .hinweis { font-size: 23px; }

/* Tafel: Titel links, daneben eine Reihe kleiner Fotokarten */
[data-format="streifen"] .kopf { left: 64px; top: 0; bottom: 0; width: 360px; height: auto; flex-direction: column-reverse; justify-content: center; align-items: flex-start; gap: 28px; }
[data-format="streifen"] .kopf .marke { margin-top: 0; }
[data-format="streifen"] .folie-tafel .titel-t1 { font-size: calc(104px * var(--titel-skala)); }
[data-format="streifen"] .folie-tafel .titel-t2 { font-size: calc(88px * var(--titel-skala)); }
[data-format="streifen"] .folie-tafel .titel-t3 { font-size: calc(74px * var(--titel-skala)); }
[data-format="streifen"] .folie-tafel .titel-t4 { font-size: calc(60px * var(--titel-skala)); }
[data-format="streifen"] .kopf-unter { font-size: 25px; }
[data-format="streifen"] .dar-foto .eintraege { left: 470px; right: 48px; top: 50px; bottom: 64px; justify-content: flex-start; gap: 22px; }
[data-format="streifen"] .karte { flex: 1 1 0; min-width: 0; max-width: 345px; }
[data-format="streifen"] .karte-bild { flex: 0 0 72%; }
[data-format="streifen"] .karte .preis-schild { font-size: 52px; right: 14px; bottom: -34px; padding: 8px 16px 10px 18px; border-radius: 18px; }
[data-format="streifen"] .karte-text { padding: 44px 20px 14px; gap: 6px; }
[data-format="streifen"] .name { font-size: 34px; }
[data-format="streifen"][data-thema="hell"] .name { font-size: 29px; }
[data-format="streifen"] .karte .beschreibung, [data-format="streifen"] .karte-text .kennzeichen { display: none; }

/* ================================================================== */
/* Bewegung wie im Video: Einflug, Aufdecken, Glanz, Dampf, Lichter, Wisch */
/* ================================================================== */
@property --p { syntax: "<number>"; inherits: true; initial-value: 0; }

@keyframes einflug-r { from { opacity: 0; transform: translateX(200px) rotate(3deg) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes einflug-l { from { opacity: 0; transform: translateX(-200px) rotate(-3deg) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes rein-r { from { opacity: 0; transform: translateX(120px); } to { opacity: 1; transform: none; } }
@keyframes rein-l { from { opacity: 0; transform: translateX(-120px); } to { opacity: 1; transform: none; } }
@keyframes titel-reveal { from { opacity: 0; transform: translateX(-70px); clip-path: inset(0 100% 0 0); } to { opacity: 1; transform: none; clip-path: inset(-10% -3% -10% -3%); } }
@keyframes puls { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }
@keyframes glanz { 0%, 52% { left: -60%; } 78%, 100% { left: 135%; } }
@keyframes dampf-steigt { 0% { transform: translate(0, 40px) scale(.6); opacity: 0; } 22% { opacity: .8; } 100% { transform: translate(34px, -430px) scale(1.8); opacity: 0; } }
@keyframes bokeh-treiben { from { transform: translate(0, 0) scale(1); } to { transform: translate(140px, -90px) scale(1.3); } }
@keyframes balken { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes wisch-fahrt { from { --p: 0; } to { --p: 1; } }

.einflug, .einflug-l { opacity: 0; }
.folie.ist-sichtbar .einflug { animation: einflug-r 1100ms cubic-bezier(.2, .8, .2, 1) 120ms both; }
.folie.ist-sichtbar .einflug-l { animation: einflug-l 1100ms cubic-bezier(.2, .8, .2, 1) 120ms both; }
.folie.ist-sichtbar .rein-r { animation-name: rein-r; }
.folie.ist-sichtbar .rein-l { animation-name: rein-l; }
.folie.ist-sichtbar .titel-reveal { animation: titel-reveal 950ms cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(250ms + var(--i, 0) * 110ms); }

/* Preisschilder: ein Glanz läuft in Abständen darüber, die Zahl atmet leicht */
.preis-schild, .hero-schild, .menue-preis { overflow: hidden; }
.menue-preis { position: relative; }
.preis-schild::after, .hero-schild::after, .menue-preis::after {
  content: ""; position: absolute; top: -25%; bottom: -25%; left: -60%; width: 38%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent); transform: skewX(-18deg);
  animation: glanz 5s ease-in-out infinite 1.8s;
}
.hero-schild .preis-gross, .menue-preis .preis-gross { animation: puls 3.6s ease-in-out infinite 2.2s; }

/* Lichtflecken im Hintergrund */
.bokeh { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.bokeh i { position: absolute; border-radius: 50%; background: var(--akzent); opacity: .24; filter: blur(70px); animation: bokeh-treiben 10s ease-in-out infinite alternate; animation-delay: calc(var(--k) * -4s); }
.bokeh i:nth-child(1) { left: 4%; top: 14%; width: 360px; height: 360px; }
.bokeh i:nth-child(2) { left: 30%; top: 62%; width: 420px; height: 420px; opacity: .12; }
.bokeh i:nth-child(3) { left: 58%; top: 8%; width: 300px; height: 300px; }
.bokeh i:nth-child(4) { left: 80%; top: 56%; width: 380px; height: 380px; opacity: .14; }
.bokeh i:nth-child(5) { left: 46%; top: 36%; width: 260px; height: 260px; opacity: .1; }
.buehne[data-thema="hell"] .bokeh i { opacity: .2; filter: blur(80px); }

/* Dampf über warmen Gerichten */
.dampf { position: absolute; inset: 0; overflow: hidden; pointer-events: none; mix-blend-mode: screen; }
.dampf i { position: absolute; bottom: 2%; width: 220px; height: 320px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0)); filter: blur(26px); opacity: 0; animation: dampf-steigt 5.4s ease-out infinite; animation-delay: calc(var(--k) * -.9s); left: calc(16% + var(--k) * 12%); }

/* Wisch: farbige Streifen fahren über das Bild; in der Mitte wird die Folie getauscht */
.wisch { position: absolute; inset: 0; z-index: 60; overflow: hidden; pointer-events: none; --p: 0; --schraege: 14deg; }
[data-format="hoch"] .wisch { --schraege: 6deg; }
.wisch i { position: absolute; top: -14%; bottom: -14%; left: 0; width: 100%;
  transform: translateX(calc(var(--b, 1920px) * (-1.2 + var(--q) * 2.6))) skewX(calc(var(--schraege) * -1)); }
.wisch .w-c { background: var(--wisch-c, var(--bg)); --q: max(0, calc(var(--p) - .26)); }
.wisch .w-b { background: var(--wisch-b, var(--flaeche-2)); --q: max(0, calc(var(--p) - .13)); }
.wisch .w-a { background: var(--wisch-a, var(--akzent)); --q: var(--p); box-shadow: 0 0 90px rgba(0, 0, 0, .5); }
.wisch.laeuft { animation: wisch-fahrt 950ms cubic-bezier(.62, 0, .3, 1) both; }
[data-uebergang="wisch"] .folie { transition: none; }

/* Ruhig: nichts davon, wenn der Fernseher es nicht schafft oder ?bewegung=aus gesetzt ist */
.ruhig .einflug, .ruhig .einflug-l { opacity: 1; animation: none !important; }
.ruhig .bokeh, .ruhig .dampf, .ruhig .wisch { display: none; }
.ruhig .preis-schild::after, .ruhig .hero-schild::after, .ruhig .menue-preis::after, .ruhig .preis-gross { animation: none; }

/* ================================================================== */
/* Film: Video vollflächig, darüber Text und Preis                      */
/* ================================================================== */
.folie-film { background: #000; }
.film-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film-video.film-scheibe { inset: auto; top: 0; height: var(--h, 1080px); width: calc(var(--spalten) * var(--b, 1920px)); left: calc((1 - var(--spalte)) * var(--b, 1920px)); }
.film-schleier { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .66), rgba(0, 0, 0, 0) 64%); }
.folie-film .marke { left: 96px; top: 60px; }
.film-text { position: absolute; left: 96px; bottom: 120px; width: 1020px; display: flex; flex-direction: column; gap: 24px; }
.folie-film .titel { color: #fff; }
.folie-film .titel-t1 { font-size: calc(170px * var(--titel-skala)); }
.folie-film .titel-t2 { font-size: calc(140px * var(--titel-skala)); }
.folie-film .titel-t3 { font-size: calc(108px * var(--titel-skala)); }
.folie-film .titel-t4 { font-size: calc(84px * var(--titel-skala)); }
.folie-film .marke-name, .folie-film .untertitel { color: #f1f1f4; }
.film-schild { right: 96px; top: auto; bottom: 96px; }
.buehne[data-thema="hell"] .film-schleier { background: linear-gradient(90deg, rgba(20, 12, 6, .62), rgba(20, 12, 6, 0) 64%); }

[data-format="hoch"] .film-schleier { background: linear-gradient(0deg, rgba(0, 0, 0, .75), rgba(0, 0, 0, 0) 62%); }
[data-format="hoch"] .folie-film .marke { left: 64px; top: 60px; }
[data-format="hoch"] .film-text { left: 64px; right: 64px; width: auto; bottom: 170px; }
[data-format="hoch"] .folie-film .titel-t1 { font-size: calc(150px * var(--titel-skala)); }
[data-format="hoch"] .folie-film .titel-t2 { font-size: calc(124px * var(--titel-skala)); }
[data-format="hoch"] .folie-film .titel-t3 { font-size: calc(96px * var(--titel-skala)); }
[data-format="hoch"] .film-schild { right: 48px; bottom: 640px; width: 270px; height: 270px; }
/* Produktvideo im Hochformat: Titel oben, Preis unten rechts (das Gericht steht in den unteren zwei Dritteln) */
[data-format="hoch"] .film-oben .film-schleier { background: linear-gradient(180deg, rgba(0, 0, 0, .62), rgba(0, 0, 0, .18) 38%, rgba(0, 0, 0, 0) 55%); }
[data-format="hoch"] .film-oben .film-text { top: 200px; bottom: auto; }
[data-format="hoch"] .film-oben .film-schild { top: auto; right: 56px; bottom: 110px; }

[data-format="streifen"] .folie-film .marke { left: 64px; top: 40px; }
[data-format="streifen"] .film-text { left: 64px; bottom: 70px; width: 1000px; gap: 14px; }
[data-format="streifen"] .folie-film .titel-t1 { font-size: calc(132px * var(--titel-skala)); }
[data-format="streifen"] .folie-film .titel-t2 { font-size: calc(112px * var(--titel-skala)); }
[data-format="streifen"] .folie-film .titel-t3 { font-size: calc(90px * var(--titel-skala)); }
[data-format="streifen"] .folie-film .titel-t4 { font-size: calc(72px * var(--titel-skala)); }
[data-format="streifen"] .film-schild { right: 80px; bottom: 64px; width: 250px; height: 250px; }

/* Export: jedes Bild wird einzeln berechnet, nichts darf von selbst übergehen */
.rendern .folie { transition: none !important; }

/* Funken: Dauerbewegung über Foto und Text */
@keyframes funke-steigt { 0% { transform: translate(0, 0) scale(.6); opacity: 0; } 12% { opacity: .95; } 70% { opacity: .7; } 100% { transform: translate(calc(var(--k) * 5px - 30px), calc(var(--h, 1080px) * -1.05)) scale(1); opacity: 0; } }
.funken { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.funken i { position: absolute; bottom: -20px; left: calc(var(--k) * 7.1% + 3%); width: 8px; height: 8px; border-radius: 50%; background: var(--akzent);
  box-shadow: 0 0 14px 4px color-mix(in srgb, var(--akzent) 70%, transparent); opacity: 0;
  animation: funke-steigt calc(5.5s + var(--k) * .42s) linear infinite; animation-delay: calc(var(--k) * -.7s); }
.funken i:nth-child(3n) { width: 5px; height: 5px; }
.funken i:nth-child(4n) { width: 11px; height: 11px; }
.ruhig .funken { display: none; }

/* ================================================================== */
/* Design „Markenfarbe“: alles in der Farbe des Betriebs, Schrift hell  */
/* (oder dunkel, wenn die Farbe hell ist). Wie viele Imbiss-Ketten.     */
/* ================================================================== */
.buehne[data-thema="farbe"] {
  --bg: var(--akzent); --text: var(--akzent-text);
  --flaeche: color-mix(in srgb, #000 24%, var(--akzent)); --flaeche-2: color-mix(in srgb, #000 38%, var(--akzent));
  --leise: color-mix(in srgb, var(--akzent-text) 80%, var(--akzent)); --linie: color-mix(in srgb, var(--akzent-text) 28%, var(--akzent));
  --anzeige: "Barlow Condensed", "Arial Narrow", sans-serif; --titel-gewicht: 800; --titel-gross: none; --titel-skala: 1.06;
  --radius: 26px; --schatten: 0 26px 60px rgba(0, 0, 0, .38);
  --wisch-a: var(--akzent-text); --wisch-b: color-mix(in srgb, #000 45%, var(--akzent)); --wisch-c: color-mix(in srgb, #000 22%, var(--akzent));
}
/* Tiefe: Licht in der Mitte, dunkle Ränder, feine schräge Streifen */
.buehne[data-thema="farbe"] .folie {
  background:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 26px),
    radial-gradient(120% 90% at 50% 32%, color-mix(in srgb, #fff 16%, var(--akzent)) 0, var(--akzent) 46%, color-mix(in srgb, #000 42%, var(--akzent)) 100%);
}
.buehne[data-thema="farbe"] .folie-film, .buehne[data-thema="farbe"] .folie-medium { background: #000; }
.buehne[data-thema="farbe"] .hero-grund-bild, .buehne[data-thema="farbe"] .hero-grund::after { display: none; }
.buehne[data-thema="farbe"] .titel { letter-spacing: -.005em; line-height: .88; }
.buehne[data-thema="farbe"] .name { font-weight: 800; }
/* Preisschilder, Kennzeichen und Markenzeichen umgekehrt: helle Fläche, Schrift in Markenfarbe */
.buehne[data-thema="farbe"] .preis-schild, .buehne[data-thema="farbe"] .hero-schild, .buehne[data-thema="farbe"] .menue-preis,
.buehne[data-thema="farbe"] .kicker, .buehne[data-thema="farbe"] .marke-kreis, .buehne[data-thema="farbe"] .kz-neu {
  background: var(--akzent-text); color: var(--akzent);
}
.buehne[data-thema="farbe"] .zeile .preis-zeile { color: var(--akzent-text); }
.buehne[data-thema="farbe"] .haken { background: var(--akzent-text); stroke: var(--akzent); }
.buehne[data-thema="farbe"] .kz { background: rgba(0, 0, 0, .28); color: #fff; }
.buehne[data-thema="farbe"] .kz-beliebt { background: transparent; color: var(--akzent-text); box-shadow: inset 0 0 0 2px var(--akzent-text); }
.buehne[data-thema="farbe"] .kz-scharf, .buehne[data-thema="farbe"] .kz-vegan, .buehne[data-thema="farbe"] .kz-vegetarisch { box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); }
.buehne[data-thema="farbe"] .kopf .titel::after { background: linear-gradient(90deg, var(--akzent-text) 0 38%, color-mix(in srgb, var(--akzent-text) 40%, var(--akzent)) 50%, var(--akzent-text) 62% 100%) 100% 0 / 300% 100%; }
.buehne[data-thema="farbe"] .punkt.aktiv { background: var(--akzent-text); }
.buehne[data-thema="farbe"] .bokeh i { background: #fff; opacity: .1; }
.buehne[data-thema="farbe"] .funken i { background: #fff; box-shadow: 0 0 14px 4px rgba(255, 255, 255, .55); }
.buehne[data-thema="farbe"] .karte { box-shadow: var(--schatten), inset 0 0 0 1px rgba(255, 255, 255, .08); }
.buehne[data-thema="farbe"] .hero-foto, .buehne[data-thema="farbe"] .menue-foto { box-shadow: 0 30px 70px rgba(0, 0, 0, .45); }
.buehne[data-thema="farbe"] .untertitel { color: var(--leise); }

/* Hochformat in Markenfarbe: Produkttafel mit Titel oben, großem Foto, Preis unten rechts */
[data-format="hoch"][data-thema="farbe"] .hero-text { top: 180px; bottom: auto; justify-content: flex-start; gap: 22px; }
[data-format="hoch"][data-thema="farbe"] .folie-hero .titel-t1 { font-size: calc(220px * var(--titel-skala)); }
[data-format="hoch"][data-thema="farbe"] .folie-hero .titel-t2 { font-size: calc(170px * var(--titel-skala)); }
[data-format="hoch"][data-thema="farbe"] .folie-hero .titel-t3 { font-size: calc(124px * var(--titel-skala)); }
[data-format="hoch"][data-thema="farbe"] .untertitel { -webkit-line-clamp: 2; line-clamp: 2; }
[data-format="hoch"][data-thema="farbe"] .hero-foto { top: auto; bottom: 190px; height: 1080px; border-radius: 44px; }
[data-format="hoch"][data-thema="farbe"] .hero-schild { top: auto; bottom: 100px; right: 40px; }

/* ---------- Bestellen per QR-Code ---------- */
@keyframes qr-auf { 0% { opacity: 0; transform: scale(.82); } 70% { opacity: 1; transform: scale(1.03); } 100% { opacity: 1; transform: scale(1); } }
.folie.ist-sichtbar .qr-auf { animation-name: qr-auf; animation-duration: 900ms; }
.qr-rahmen { background: #ffffff; border-radius: 18px; box-shadow: 0 18px 40px rgba(0, 0, 0, .35); display: grid; place-items: center; overflow: hidden; }
.qr-bild { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.qr-rahmen.qr-fehlt .qr-bild { visibility: hidden; }
.ecke-qr:has(.qr-fehlt) { display: none; }
.kopf-rechts { display: flex; align-items: flex-start; gap: 34px; flex: none; }
.ecke-qr { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.qr-klein { width: 136px; height: 136px; padding: 8px; border-radius: 14px; }
.ecke-qr-text { font: 700 19px/1 var(--anzeige); letter-spacing: .1em; text-transform: uppercase; color: var(--text); white-space: nowrap; }
[data-format="hoch"] .kopf-rechts { width: 100%; justify-content: flex-start; }
[data-format="hoch"] .ecke-qr { position: absolute; top: 0; right: 0; }
[data-format="hoch"] .kopf.mit-qr .kopf-titel { padding-right: 190px; }
[data-format="streifen"] .ecke-qr { display: none; }

.folie-bestellen .marke { left: 96px; top: 60px; }
.bestellen-text { position: absolute; left: 96px; top: 170px; bottom: 120px; width: 900px; display: flex; flex-direction: column; justify-content: center; gap: 28px; }
.folie-bestellen .titel-t1, .folie-bestellen .titel-t2 { font-size: calc(160px * var(--titel-skala)); }
.bestellen-schritte { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 22px; }
.bestellen-schritt { display: flex; align-items: center; gap: 26px; font: 600 40px/1.1 "Inter", sans-serif; }
.bestellen-nr { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; flex: none; background: var(--akzent); color: var(--akzent-text); font: 800 36px/1 var(--anzeige); }
.bestellen-karte { position: absolute; right: 150px; top: 50%; translate: 0 -50%; display: flex; flex-direction: column; align-items: center; gap: 24px; }
.qr-gross { width: 600px; height: 600px; padding: 34px; border-radius: 34px; box-shadow: 0 0 0 10px color-mix(in srgb, var(--akzent) 70%, transparent), 0 30px 70px rgba(0, 0, 0, .45); }
.qr-gross.qr-fehlt { background: repeating-linear-gradient(45deg, #f2f2f2 0 18px, #ffffff 18px 36px); }
.bestellen-hinweis { margin: 0; font-size: 26px; color: var(--leise); }
.buehne[data-thema="farbe"] .bestellen-nr { background: var(--akzent-text); color: var(--akzent); }
.buehne[data-thema="farbe"] .qr-gross { box-shadow: 0 0 0 10px rgba(255, 255, 255, .35), 0 30px 70px rgba(0, 0, 0, .35); }
[data-format="hoch"] .bestellen-karte { right: auto; left: 50%; top: 250px; translate: -50% 0; }
[data-format="hoch"] .qr-gross { width: 680px; height: 680px; }
[data-format="hoch"] .bestellen-text { left: 64px; right: 64px; width: auto; top: 1110px; bottom: 80px; justify-content: flex-start; gap: 22px; }
[data-format="hoch"] .folie-bestellen .marke { left: 64px; top: 56px; }
[data-format="streifen"] .bestellen-karte { right: auto; left: 70px; }
[data-format="streifen"] .qr-gross { width: 520px; height: 520px; padding: 28px; }
[data-format="streifen"] .bestellen-hinweis { display: none; }
[data-format="streifen"] .bestellen-text { left: 680px; right: 64px; width: auto; top: 40px; bottom: 40px; gap: 16px; }
[data-format="streifen"] .folie-bestellen .marke { display: none; }
[data-format="streifen"] .bestellen-schritt { font-size: 30px; }
[data-format="streifen"] .bestellen-nr { width: 52px; height: 52px; font-size: 28px; }
[data-format="streifen"] .folie-bestellen .titel-t1, [data-format="streifen"] .folie-bestellen .titel-t2 { font-size: calc(110px * var(--titel-skala)); }