/* Tandu Landingpage (/de, /en). Dieselbe Marke wie App und Gruppenseiten: Signalgelb, Schwarz, Creme, Archivo.
   Erkennungszeichen: der Kassenbon mit Zackenkante, die Chips mit Initiale und 3D-Objekte im Knet-Look
   (mit Higgsfield erzeugt, statisch/lp/o-*.webp). Die Größen springen bewusst: Überschriften bis 190 px, Fließtext 18–23 px.
   Die Seite ist immer hell (Gelb ist das Gesicht der Marke). Mobil zuerst, kein Inline-Style im HTML (CSP).
   Bewegung: landing-effekte.js (GSAP) verschiebt nur transform und opacity; ohne Skript steht alles an seinem Platz. */

@font-face { font-family: "Archivo"; src: url("/statisch/Archivo-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("/statisch/Archivo-ExtraBold.ttf") format("truetype"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("/statisch/Archivo-Black.ttf") format("truetype"); font-weight: 900; font-display: swap; }

:root {
  --gelb: #FFE14D;
  --schwarz: #111111;
  --creme: #FFFBEA;
  --leise: #524A1F;
  --leise-dunkel: #C9BC80;
  --trenner: rgba(17, 17, 17, 0.16);
  --linie: 2.5px;
  --rund: 26px;
  --rand: clamp(18px, 4.5vw, 44px);
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --bon-schrift: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 16px; }
body {
  margin: 0; background: var(--gelb); color: var(--schwarz);
  font-family: "Archivo", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 18px; line-height: 1.45; overflow-x: clip;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; }
button, a, summary { touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--schwarz); outline-offset: 3px; border-radius: 6px; }
.dunkel :focus-visible { outline-color: var(--gelb); }
.nur-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nur-js { display: none; }
.js .nur-js { display: block; }

.breite { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: max(var(--rand), env(safe-area-inset-left)) max(var(--rand), env(safe-area-inset-right)); }
.breite.schmal { max-width: 860px; }
.sprung { position: absolute; left: 12px; top: -80px; z-index: 20; padding: 12px 18px; border-radius: 999px; background: var(--schwarz); color: var(--gelb); font-weight: 800; }
.sprung:focus { top: 12px; }

/* ── Schrift: drei Stufen mit großem Abstand ── */
.riesig { font-weight: 900; font-size: clamp(54px, 13.2vw, 128px); line-height: 0.88; letter-spacing: -0.045em; }
.riesig .zeile { display: block; text-wrap: balance; }
.gross { font-weight: 900; font-size: clamp(34px, 6.2vw, 68px); line-height: 0.98; letter-spacing: -0.03em; text-wrap: balance; }
.gross.maechtig { font-size: clamp(40px, 7.6vw, 104px); line-height: 0.92; letter-spacing: -0.04em; }
.vorspann { font-size: clamp(19px, 2.1vw, 23px); line-height: 1.4; max-width: 34em; }
h3 { font-weight: 900; font-size: 24px; line-height: 1.1; letter-spacing: -0.01em; }

/* ── Knöpfe und Links ── */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; min-height: 58px; padding: 0 28px;
  border: var(--linie) solid var(--schwarz); border-radius: 999px; background: var(--schwarz); color: var(--gelb);
  font-weight: 800; font-size: 19px; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform 160ms var(--ease), background-color 160ms var(--ease), color 160ms var(--ease);
}
.knopf.klein { min-height: 44px; padding: 0 18px; font-size: 16px; }
@media (max-width: 380px) { .knopf { white-space: normal; text-align: center; padding-block: 10px; line-height: 1.15; } }
.knopf.zweit { background: var(--gelb); color: var(--schwarz); }
.knopf.breit { width: 100%; }
.knopf:active { transform: scale(0.97); }
.link, .textknopf { font-weight: 800; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.textknopf { padding: 0; border: 0; background: none; cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  .knopf:hover { transform: translateY(-2px); }
  .knopf.zweit:hover { background: var(--schwarz); color: var(--gelb); }
  .link:hover, .textknopf:hover, .fuss a:hover { text-decoration-thickness: 3.5px; }
}

/* ── Kopf ── */
.kopf { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: max(16px, env(safe-area-inset-top)) 12px; }
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 900; font-size: 26px; letter-spacing: -0.03em; text-decoration: none; }
.logo img { width: 44px; height: 44px; border-radius: 11px; border: var(--linie) solid var(--schwarz); }
.kopf-nav { display: none; gap: 28px; font-weight: 800; font-size: 17px; }
.kopf-nav a, .sprache { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 5px; transition: text-decoration-color 160ms var(--ease); }
.kopf-nav a:hover, .sprache:hover { text-decoration-color: currentColor; }
.kopf-rechts { display: flex; align-items: center; gap: 14px; }
.sprache { font-weight: 800; font-size: 16px; padding: 10px 4px; }
.kopf-rechts .knopf { display: none; }
@media (min-width: 560px) { .kopf-rechts .knopf { display: inline-flex; } }
@media (min-width: 900px) { .kopf-nav { display: flex; } }

/* ── 3D-Objekte: schweben leicht, wandern beim Scrollen (Parallax über data-tiefe) ── */
.schweb, .deko, .roll { position: absolute; display: block; pointer-events: none; -webkit-user-select: none; user-select: none; will-change: transform; }
.schweb img, .deko img, .roll img { width: 100%; }
/* Kurzes Schweben beim Laden: zweimal hin und her, nach 5 s Ruhe (nichts bewegt sich endlos von selbst). */
.schweb img, .deko img { animation: schweben 2.5s ease-in-out 2 alternate; }
.schweb:nth-of-type(even) img, .deko:nth-of-type(even) img { animation-duration: 2.1s; }
.schweb:nth-of-type(3n) img { animation-duration: 1.8s; }
@keyframes schweben { from { transform: none; } to { transform: translateY(-10px) rotate(2deg); } }

/* ── Hero: Überschrift über die ganze Breite, Objekte davor und dahinter ── */
.hero { position: relative; overflow: clip; padding-bottom: clamp(56px, 8vw, 110px); }
.hero-buehne { position: relative; max-width: 1480px; container-type: inline-size; }
.hero-titel { position: relative; z-index: 1; padding-top: clamp(14px, 3cqi, 44px); font-size: clamp(44px, 15.4cqi, 128px); }
:lang(en) .hero-titel { font-size: clamp(44px, 13.8cqi, 128px); }
.hero-unten { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; margin-top: clamp(22px, 3.4cqi, 48px); }
.hero-text { display: flex; flex-direction: column; gap: 22px; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.zusatz { font-weight: 800; color: var(--leise); }

/* Handy: zwei Chips neben der ersten Zeile, Pizza und Kette neben der letzten. Nichts verdeckt Text. */
.s-chip-a { z-index: 2; top: 4.5cqi; left: 68%; width: 13cqi; }
.s-chip-l { z-index: 2; top: 3cqi; left: 84%; width: 12cqi; }
.s-pizza { z-index: 2; top: 29.5cqi; left: 44%; width: 19cqi; transform: rotate(-8deg); }
.s-link { z-index: 2; top: 28cqi; left: 76%; width: 17cqi; }
:lang(en) .s-chip-a { top: 1cqi; left: 67%; width: 11cqi; }
:lang(en) .s-chip-l { top: 0; left: 83%; width: 11cqi; }
/* Englisch hat am Handy nur zwei Zeilen, neben der letzten ist kein Platz. */
:lang(en) .s-pizza, :lang(en) .s-link { display: none; }
.s-bier, .s-chip-t, .s-muenzen, .s-chip-m { display: none; }

@media (min-width: 760px) {
  .hero-titel, :lang(en) .hero-titel { font-size: 10.6cqi; }
  :lang(en) .hero-titel { font-size: 12.4cqi; }
  /* Hinter „Ein Link.“ ist die halbe Zeile frei: dort reihen sich Pizza, Chip, Bier und Chip auf. */
  .s-pizza, :lang(en) .s-pizza { display: block; top: 1.6cqi; left: 49.5%; width: 13cqi; }
  .s-chip-a, :lang(en) .s-chip-a { top: 4cqi; left: 64.5%; width: 8cqi; }
  .s-bier { display: block; z-index: 2; top: 1.2cqi; left: 75%; width: 9.4cqi; transform: rotate(8deg); }
  .s-chip-l { top: 5cqi; left: 88%; width: 7cqi; }
  :lang(en) .s-pizza { left: 56%; width: 11.5cqi; }
  :lang(en) .s-chip-a { left: 69.5%; width: 7.4cqi; }
  :lang(en) .s-bier { left: 79%; width: 8.6cqi; }
  :lang(en) .s-chip-l { top: 5cqi; left: 90.5%; width: 6.4cqi; }
  .hero-text { max-width: 60%; }
  .s-link, :lang(en) .s-link { display: block; z-index: 1; top: 25cqi; left: auto; right: 1%; width: 24cqi; }
}
@media (min-width: 1000px) {
  .hero-unten { grid-template-columns: minmax(0, 1fr) minmax(340px, 420px); gap: 56px; align-items: start; }
  .hero-text { padding-top: 12px; max-width: min(560px, 40cqi); }
  /* Die Kette hängt zwischen Text und Bon und verbindet beide. */
  .s-link, :lang(en) .s-link { top: 25.5cqi; right: auto; left: 43.5%; width: 21cqi; }
  /* Chip T und Münzen hängen am unteren Rand der Bühne, also immer unter dem Text; Chip M lugt hinter dem Bon hervor. */
  .s-chip-t { display: block; z-index: 1; bottom: 15%; left: 0.5%; width: 7.4cqi; }
  .s-muenzen { display: block; z-index: 1; bottom: 19%; left: 12%; width: 14cqi; }
  .s-chip-m { display: block; z-index: 1; top: 50cqi; right: -4.2%; width: 8cqi; }
}

/* ── Bon-Demo ── */
.demo { position: relative; width: 100%; max-width: 420px; margin-inline: auto; }
.bon-rahmen { filter: drop-shadow(7px 9px 0 rgba(17, 17, 17, 0.2)); transform: rotate(1.2deg); }
.drucker { position: relative; z-index: 1; height: 20px; margin-inline: -10px; border-radius: 999px; background: var(--schwarz); }
.bon-schlitz { overflow: hidden; margin-top: -10px; padding-bottom: 2px; }
.bon {
  --zacke: 9px;
  padding: 30px 20px 30px; background: var(--creme); font-family: var(--bon-schrift); font-size: 15px; line-height: 1.35;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--zacke)) 100%;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / calc(2 * var(--zacke)) 100%;
  animation: bon-druck 900ms steps(16, end) 150ms backwards;
}
@keyframes bon-druck { from { transform: translateY(-101%); } to { transform: none; } }
.bon-laden { font-family: "Archivo", system-ui, sans-serif; font-weight: 900; font-size: 24px; letter-spacing: -0.02em; text-align: center; }
.bon-klein { font-size: 13px; color: var(--leise); }
.bon-laden + .bon-klein { text-align: center; margin-bottom: 14px; }
.bon-liste { border-top: 2px dashed var(--schwarz); }
.bon-liste li { border-bottom: 2px dashed var(--trenner); }
.pos {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; align-items: baseline; min-height: 62px;
  padding: 10px 6px; margin-inline: -6px; width: calc(100% + 12px); border: 0; border-radius: 12px; background: none;
  font-family: inherit; font-size: inherit; text-align: start; cursor: default;
}
.pos:disabled, .mensch:disabled { color: inherit; opacity: 1; }
.js .pos { cursor: pointer; transition: background-color 150ms var(--ease); }
.js .pos:active { background: rgba(255, 225, 77, 0.55); }
.pos-name { font-weight: 700; }
.marker { background: linear-gradient(transparent 58%, var(--gelb) 58% 92%, transparent 92%) no-repeat 0 0 / 0% 100%; transition: background-size 220ms var(--ease); padding-inline: 2px; margin-inline: -2px; }
.pos[aria-pressed="true"] .marker { background-size: 100% 100%; }
.pos-preis { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pos-wer { grid-column: 1 / -1; display: flex; align-items: center; gap: 5px; min-height: 26px; font-size: 13px; color: var(--leise); }
.mini {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; flex: none;
  border: 2px solid var(--schwarz); border-radius: 52% 48% 50% 50% / 49% 52% 48% 51%; background: var(--gelb); color: var(--schwarz);
  font-family: "Archivo", system-ui, sans-serif; font-weight: 900; font-size: 13px; line-height: 1; transform: rotate(-4deg);
  animation: stempel 260ms var(--ease) backwards;
}
.mini:nth-child(even) { transform: rotate(3deg); }
.bon-liste li:nth-child(1) .mini { animation-delay: 1100ms; }
.bon-liste li:nth-child(2) .mini { animation-delay: 1220ms; }
.bon-liste li:nth-child(3) .mini { animation-delay: 1340ms; }
.bon-liste li:nth-child(4) .mini { animation-delay: 1460ms; }
.js .bon.bereit .mini { animation: none; }
.js .bon.bereit .mini.frisch { animation: stempel 260ms var(--ease); }
@keyframes stempel { from { transform: scale(1.9) rotate(-14deg); opacity: 0; } }
.bon-zeile { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.bon-zeile .bon-klein { font-weight: 400; }
.bon-zeile.summe { border-top: 2px dashed var(--schwarz); font-family: "Archivo", system-ui, sans-serif; font-weight: 900; font-size: 24px; letter-spacing: -0.02em; padding-top: 12px; }
.bon-danke { text-align: center; padding-top: 6px; letter-spacing: 0.08em; text-transform: uppercase; }

.leute { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 26px; }
.mensch { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 2px; border: 0; border-radius: 18px; background: none; cursor: default; }
.js .mensch { cursor: pointer; }
.avatar {
  display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; margin-bottom: 4px;
  border: var(--linie) solid var(--schwarz); border-radius: 52% 48% 50% 50% / 49% 52% 48% 51%; background: var(--creme);
  font-weight: 900; font-size: 24px; line-height: 1; transform: rotate(-3deg);
  transition: transform 180ms var(--ease), background-color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.mensch:nth-child(even) .avatar { transform: rotate(2deg); }
.js .mensch.aktiv .avatar { background: var(--schwarz); color: var(--gelb); box-shadow: 0 0 0 4px var(--gelb), 0 0 0 6.5px var(--schwarz); transform: rotate(0deg) scale(1.06); }
.mensch-name { font-weight: 800; font-size: 16px; line-height: 1.1; }
.mensch-betrag { font-weight: 900; font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mensch-betrag.neu { animation: zahl 240ms var(--ease); }
@keyframes zahl { from { transform: translateY(-5px); opacity: 0.3; } }
.demo-fuss { display: none; margin-top: 14px; font-size: 15px; font-weight: 800; color: var(--leise); text-align: center; }
.js .demo-fuss { display: block; }
.demo-stand { display: none; color: var(--schwarz); }
.demo.benutzt .demo-hinweis { display: none; }
.demo.benutzt .demo-stand { display: inline; }
.textknopf[data-zurueck] { display: none; margin-inline-start: 6px; color: var(--schwarz); }
.demo.benutzt .textknopf[data-zurueck] { display: inline; }

/* ── Schwarze Bänder ── */
.dunkel { background: var(--schwarz); color: var(--creme); }
.band { padding-block: clamp(72px, 11vw, 150px); overflow: clip; }
.band-satz { font-weight: 900; font-size: clamp(46px, 11.6vw, 190px); line-height: 0.88; letter-spacing: -0.05em; color: var(--gelb); text-wrap: balance; }
.band-text { margin-top: clamp(30px, 4vw, 56px); max-width: 30em; font-size: clamp(20px, 2.4vw, 28px); line-height: 1.35; }
.szene-rahmen { width: min(94vw, 1480px); margin: clamp(40px, 6vw, 90px) auto 0; overflow: hidden; border-radius: clamp(20px, 3vw, 44px); will-change: transform; }
.szene { width: 100%; will-change: transform; }
.versprechen { display: grid; gap: 44px; }
.versprechen h3 { font-size: clamp(38px, 5.2vw, 72px); line-height: 0.95; letter-spacing: -0.04em; color: var(--gelb); }
.versprechen p { margin-top: 12px; font-size: 19px; color: var(--creme); }
@media (min-width: 900px) { .versprechen { grid-template-columns: repeat(3, 1fr); gap: 52px; } }

/* ── Abschnitte ── */
.abschnitt { position: relative; padding-block: clamp(72px, 10vw, 140px); }
.abschnitt.hell { background: var(--creme); overflow: clip; }
.abschnitt .gross + .vorspann { margin-top: 18px; }

/* ── Handy- und Browser-Rahmen ── */
.handy { overflow: hidden; border: 3.5px solid var(--schwarz); border-radius: 13% / 6%; background: var(--schwarz); }
.handy img { width: 100%; }
.browser { overflow: hidden; border: 3.5px solid var(--schwarz); border-radius: var(--rund); background: var(--gelb); }
.browser-leiste { display: flex; justify-content: center; padding: 10px 14px; border-bottom: 3.5px solid var(--schwarz); background: var(--schwarz); }
.browser-adresse { padding: 5px 16px; border-radius: 999px; background: var(--creme); font-weight: 800; font-size: 14px; }
.browser img { width: 100%; }

/* ── Vier Schritte: ohne Skript und am Handy seitlich wischen, am Rechner angepinnt (html.fx-pin, siehe unten) ── */
.ziffer { display: none; }
.schritte {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(72vw, 290px); gap: 22px; margin-top: 40px;
  padding-inline: max(var(--rand), env(safe-area-inset-left)) max(var(--rand), env(safe-area-inset-right)); padding-bottom: 10px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--rand);
  scrollbar-width: none;
}
.schritte::-webkit-scrollbar { display: none; }
.schritte:focus-visible { outline-offset: -3px; border-radius: 12px; }
@media (pointer: fine) and (max-width: 1099px) { .schritte { scrollbar-width: thin; scrollbar-color: var(--schwarz) transparent; padding-bottom: 18px; } .schritte::-webkit-scrollbar { display: block; height: 8px; } .schritte::-webkit-scrollbar-thumb { background: var(--schwarz); border-radius: 8px; } }
.schritt { display: flex; flex-direction: column; gap: 18px; scroll-snap-align: start; }
.schritt-text { display: flex; gap: 14px; align-items: flex-start; }
.schritt-text p { margin-top: 6px; }
.nummer {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px;
  border: var(--linie) solid var(--schwarz); border-radius: 52% 48% 50% 50% / 49% 52% 48% 51%; background: var(--schwarz); color: var(--gelb);
  font-weight: 900; font-size: 20px; line-height: 1; transform: rotate(-4deg);
}
.schritt:nth-child(even) .nummer { transform: rotate(3deg); }
@media (min-width: 1100px) {
  .schritte { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); gap: 32px; max-width: 1240px; margin-inline: auto; overflow: visible; }
  .schritt:nth-child(even) { margin-top: 56px; }
}

/* Angepinnt: die Spur fährt beim Scrollen seitlich durch, jede Station mit Riesenziffer. */
.fx-pin .ablauf { display: flex; flex-direction: column; justify-content: center; min-height: 100vh; padding-block: 4vh; overflow: clip; }
.fx-pin .schritte { display: flex; gap: 0; width: max-content; max-width: none; margin: 3vh 0 0; padding: 0 0 0 max(var(--rand), calc((100vw - 1240px) / 2 + var(--rand))); overflow: visible; will-change: transform; }
.fx-pin .schritt { position: relative; flex: none; flex-direction: row; align-items: center; gap: clamp(28px, 3vw, 56px); width: clamp(620px, 58vw, 900px); margin: 0; padding-right: 7vw; }
.fx-pin .schritt:nth-child(even) { margin-top: 0; }
.fx-pin .schritt .handy { position: relative; z-index: 1; flex: none; height: min(64vh, 640px); aspect-ratio: 600 / 1304; }
.fx-pin .schritt .handy img { height: 100%; object-fit: cover; }
.fx-pin .schritt-text { position: relative; z-index: 1; display: block; max-width: 320px; }
.fx-pin .schritt-text h3 { font-size: clamp(34px, 3.6vw, 58px); line-height: 0.95; letter-spacing: -0.035em; }
.fx-pin .schritt-text p { margin-top: 14px; font-size: 20px; }
.fx-pin .nummer { display: none; }
.fx-pin .ziffer {
  display: block; position: absolute; z-index: 0; top: 50%; left: clamp(120px, 14vw, 230px); translate: 0 -54%;
  font-weight: 900; font-size: min(86vh, 56vw); line-height: 0.8; letter-spacing: -0.06em; color: #F3CE2B; will-change: transform;
}

/* ── Merkmale ── */
.merkmale { display: grid; gap: clamp(90px, 13vw, 190px); }
.merkmal { display: grid; gap: 96px; align-items: center; scroll-margin-top: 24px; }
.merkmal-text { display: flex; flex-direction: column; gap: 22px; }
.merkmal-bild { position: relative; width: 100%; max-width: 340px; margin-inline: auto; }
.merkmal-rahmen { position: relative; z-index: 1; will-change: transform; }
.deko.d-1 { z-index: 2; top: -7%; left: -14%; width: 38%; }
.deko.d-2 { z-index: 2; bottom: -7%; right: -20%; width: 40%; }
.merkmal:nth-child(even) .deko.d-1 { left: auto; right: -14%; }
.merkmal:nth-child(even) .deko.d-2 { right: auto; left: -22%; z-index: 0; bottom: 6%; width: 52%; }
@media (min-width: 860px) {
  .merkmal { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 72px; }
  .merkmal:nth-child(even) .merkmal-bild { order: -1; }
  .merkmal:nth-child(even) { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); }
  .deko.d-1 { top: -9%; width: 58%; left: -34%; }
  .merkmal:nth-child(even) .deko.d-1 { right: -34%; }
}
.haken { display: grid; gap: 10px; font-weight: 800; }
.haken li { position: relative; padding-inline-start: 34px; }
.haken li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.12em; width: 22px; height: 22px; border-radius: 50%; background: var(--schwarz); }
.haken li::after {
  content: ""; position: absolute; inset-inline-start: 7px; top: calc(0.12em + 4.5px); width: 8px; height: 12px;
  border: solid var(--gelb); border-width: 0 3px 3px 0; transform: rotate(40deg) scale(0.82);
}

/* ── Anlässe: das Objekt ragt aus der Karte ── */
.anlaesse { display: grid; gap: 84px 16px; margin-top: clamp(96px, 11vw, 150px); }
.anlass { position: relative; padding: 78px 22px 24px; border: var(--linie) solid var(--schwarz); border-radius: var(--rund); background: var(--creme); }
.anlass-bild { position: absolute; top: -74px; left: 14px; width: 150px; transition: transform 320ms var(--ease); }
.anlass:nth-child(even) .anlass-bild { transform: rotate(6deg); }
.anlass:nth-child(odd) .anlass-bild { transform: rotate(-5deg); }
.anlass h3 { font-size: 30px; letter-spacing: -0.03em; }
.anlass p { margin-top: 8px; }
@media (hover: hover) and (pointer: fine) { .anlass:hover .anlass-bild { transform: translateY(-14px) rotate(0deg) scale(1.08); } }
@media (min-width: 620px) { .anlaesse { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .anlaesse { grid-template-columns: repeat(4, 1fr); } .anlass-bild { width: 170px; top: -88px; } }

/* ── Preise ── */
.tarife { display: grid; gap: 20px; margin-top: 44px; }
.tarif { position: relative; display: flex; flex-direction: column; gap: 18px; padding: clamp(24px, 3.4vw, 40px); border: var(--linie) solid var(--schwarz); border-radius: var(--rund); background: var(--gelb); }
.tarif h3 { font-size: 30px; letter-spacing: -0.03em; }
.tarif-preis { font-weight: 900; font-size: clamp(110px, 17vw, 230px); line-height: 0.8; letter-spacing: -0.06em; margin-block: 4px 10px; }
.tarif .knopf { margin-top: auto; }
.tarif.dunkel { background: var(--schwarz); color: var(--creme); }
.tarif.dunkel h3 { color: var(--gelb); }
.tarif-unter { font-weight: 800; color: var(--leise-dunkel); margin-top: -10px; }
.tarif.dunkel .haken li::before { background: var(--gelb); }
.tarif.dunkel .haken li::after { border-color: var(--schwarz); }
.tarif-liste { display: grid; margin-top: auto; padding-top: 8px; }
.tarif-liste div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 2px solid rgba(255, 225, 77, 0.24); }
.tarif-liste dt { font-weight: 800; }
.tarif-liste dt span { display: block; font-weight: 400; font-size: 15px; color: var(--leise-dunkel); }
.tarif-liste dd { font-weight: 900; font-size: 24px; color: var(--gelb); white-space: nowrap; font-variant-numeric: tabular-nums; }
.kleingedrucktes { margin-top: 22px; max-width: 46em; font-size: 15px; color: var(--leise); }
.deko.d-preis { z-index: 2; top: 20px; right: -18px; width: clamp(120px, 17vw, 230px); }
@media (min-width: 860px) { .tarife { grid-template-columns: repeat(2, 1fr); } }

/* ── Fragen ── */
.frage { border-bottom: var(--linie) solid var(--schwarz); }
.frage:first-of-type { margin-top: 36px; border-top: var(--linie) solid var(--schwarz); }
.frage summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 0; font-weight: 900; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.15; letter-spacing: -0.01em; cursor: pointer; list-style: none; }
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
  content: ""; flex: none; width: 22px; height: 22px;
  background: linear-gradient(var(--schwarz), var(--schwarz)) center / 100% 3.5px no-repeat, linear-gradient(var(--schwarz), var(--schwarz)) center / 3.5px 100% no-repeat;
  transition: transform 200ms var(--ease);
}
.frage[open] summary::after { transform: rotate(45deg); }
.antwort { display: grid; gap: 12px; padding: 0 0 24px; max-width: 40em; }
.mehr { margin-top: 28px; }

/* ── Schluss: die vier Chips rollen herein ── */
.schluss { position: relative; overflow: clip; padding-block: clamp(90px, 13vw, 190px); border-top: var(--linie) solid var(--schwarz); }
.schluss-innen { position: relative; z-index: 1; display: grid; gap: 40px; align-items: center; max-width: 1480px; }
.schluss-innen > div { container-type: inline-size; min-width: 0; }
.schluss .riesig { font-size: clamp(46px, 10.7cqi, 150px); }
.schluss .vorspann { margin: 28px 0 28px; font-weight: 800; }
.roll { z-index: 0; width: clamp(84px, 11vw, 170px); }
.r-a { top: 5%; left: 50%; }
.r-l { top: 5%; right: 9%; }
.r-t { bottom: 6%; right: 30%; }
.r-m { bottom: 9%; right: 3%; }
.qr { display: none; }
@media (min-width: 900px) {
  .schluss-innen { grid-template-columns: 1fr auto; }
  .qr { display: flex; flex-direction: column; align-items: center; gap: 12px; font-weight: 800; }
  .qr a { display: block; width: 210px; padding: 6px; border: var(--linie) solid var(--schwarz); border-radius: var(--rund); background: #ffffff; transform: rotate(2deg); }
  .qr-svg { display: block; width: 100%; height: auto; }
}

/* ── Fuß mit Laufband ── */
.fuss { padding-block: 0 max(34px, env(safe-area-inset-bottom)); overflow: clip; }
.laufband { padding-block: clamp(26px, 4vw, 56px); border-bottom: 2px solid rgba(255, 225, 77, 0.22); margin-bottom: 34px; }
.laufband-spur { display: flex; width: max-content; will-change: transform; }
.laufband-spur span {
  flex: none; padding-inline-end: 0.5em; font-weight: 900; font-size: clamp(64px, 13vw, 210px); line-height: 0.9; letter-spacing: -0.05em;
  white-space: nowrap; color: transparent; -webkit-text-stroke: 2.5px var(--gelb);
}
.laufband-spur span:nth-child(even) { color: var(--gelb); -webkit-text-stroke: 0; }
.fuss-innen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; }
.fuss-marke { color: var(--leise-dunkel); }
.fuss-marke span { margin-inline-end: 8px; font-weight: 900; font-size: 24px; letter-spacing: -0.03em; color: var(--gelb); }
.fuss nav { display: flex; flex-wrap: wrap; gap: 8px 24px; font-weight: 800; }
.fuss a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
  .knopf:hover, .knopf:active { transform: none; }
}