:root {
  --grund: #FBF8EF;
  --weiss: #FFFDF7;
  --text: #1A1A17;
  --t1: rgba(26, 26, 23, .92);
  --t2: rgba(26, 26, 23, .66);
  --t3: rgba(26, 26, 23, .44);
  --linie: rgba(26, 26, 23, .14);
  --gelb: #FFD31A;
  --rand: 20px;
  --luft: 64px;
  --expo: cubic-bezier(0.19, 1, 0.22, 1);
  --sans: "Chivo", system-ui, sans-serif;
  --mono: "Chivo Mono", ui-monospace, monospace;
}
@media (min-width: 900px) { :root { --rand: 40px; --luft: 104px; } }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { overflow-x: clip; background: var(--grund); color: var(--t1); font: 400 17px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: .03em; text-transform: uppercase; color: var(--t2); }

.kopf { position: sticky; top: 0; z-index: 10; display: flex; justify-content: space-between; align-items: center; padding: 8px var(--rand); background: rgba(251, 248, 239, .9); backdrop-filter: blur(12px); border-bottom: 1px solid var(--linie); }
.marke { display: inline-flex; align-items: center; min-height: 44px; }
.marke img { width: 72px; mix-blend-mode: multiply; }
.kopf-tel { font-weight: 600; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }

main, .fuss { max-width: 1240px; margin: 0 auto; padding: 0 var(--rand); }

.maske { overflow: hidden; padding-bottom: .06em; }
.maske span { display: inline-block; transform: translateY(105%); transition: transform 1s var(--expo); }
.maske.da span { transform: none; }

/* Held: gelbe Fläche */
.held { margin: 0 calc(var(--rand) * -1); padding: 40px var(--rand) var(--luft); background: var(--gelb); color: var(--text); }
.held .mono { color: rgba(26, 26, 23, .72); }
h1 { font: 600 clamp(48px, 13vw, 136px)/0.95 var(--sans); letter-spacing: -0.035em; color: var(--text); max-width: 10ch; margin-top: 16px; }
.lead { font-size: 18px; max-width: 44ch; margin-top: 24px; }
.knoepfe { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 24px; margin-top: 24px; }
.knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 24px; border-radius: 999px; background: var(--text); color: var(--gelb); font-weight: 600; text-decoration: none;
  transition: background-color .15s ease-out, transform .15s ease-out; }
.knopf:hover { background: #33332E; }
.knopf:active { transform: scale(.97); }
.textlink { min-height: 44px; display: inline-flex; align-items: center; font-weight: 600; text-underline-offset: 6px; }
.liefer { margin-top: 40px; max-width: 46ch; line-height: 1.7; }
.held { position: relative; }
.held-logo { display: none; }
@media (min-width: 900px) {
  .held { border-radius: 0 0 8px 8px; margin: 0; padding: 64px; }
  .held-logo { display: block; position: absolute; right: 64px; bottom: 64px; width: min(34%, 400px); mix-blend-mode: multiply; transform: rotate(-6deg); }
}

/* Rechner */
.rechner { padding: var(--luft) 0; }
h2 { font: 600 clamp(36px, 7vw, 80px)/1 var(--sans); letter-spacing: -0.03em; color: var(--text); }
h3 { font: 600 22px/1.2 var(--sans); letter-spacing: -0.01em; color: var(--text); margin-bottom: 16px; }
.einleitung { margin-top: 16px; color: var(--t2); max-width: 52ch; }
.formular { display: grid; gap: 24px; margin-top: 40px; }
.feld { display: grid; gap: 8px; border: 0; }
.feld legend { margin-bottom: 8px; }
.regler { display: flex; align-items: center; gap: 16px; }
.regler input { flex: 1; accent-color: var(--text); height: 40px; }
.regler output { font-size: 20px; color: var(--text); min-width: 3ch; text-align: right; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { position: relative; }
.chips input { position: absolute; opacity: 0; inset: 0; }
.chips span { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--linie); border-radius: 999px; background: var(--weiss); cursor: pointer;
  transition: background-color .15s ease-out, border-color .15s ease-out; }
.chips i { font: 400 13px var(--mono); font-style: normal; color: var(--t2); }
.chips input:checked + span { background: var(--gelb); border-color: var(--text); }
.chips input:focus-visible + span { outline: 2px solid var(--text); outline-offset: 2px; }
select { font: inherit; min-height: 48px; padding: 0 16px; border: 1px solid var(--linie); border-radius: 8px; background: var(--weiss); color: var(--text); width: 100%; max-width: 520px; }
.summe { background: var(--text); color: #F6F2E4; border-radius: 8px; padding: 24px; }
.summe .mono { color: rgba(246, 242, 228, .6); }
.betrag { font: 600 clamp(48px, 12vw, 96px)/1 var(--sans); letter-spacing: -0.03em; color: var(--gelb); margin: 8px 0; font-variant-numeric: tabular-nums; }
.summe .klein { font-size: 14px; color: rgba(246, 242, 228, .7); margin-bottom: 24px; }
.summe .knopf { background: var(--gelb); color: var(--text); }
.summe .knopf:hover { background: #FFE15A; }
@media (min-width: 900px) {
  .formular { grid-template-columns: 1.4fr 1fr; column-gap: 64px; }
  .formular > .feld { grid-column: 1; }
  .summe { grid-column: 2; grid-row: 1 / span 4; align-self: start; position: sticky; top: 96px; padding: 40px; }
}

/* Karte */
.block { padding: var(--luft) 0; border-top: 1px solid var(--linie); }
.karte { display: grid; gap: 40px; margin-top: 40px; }
.preise { list-style: none; }
.preise li { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-top: 1px solid var(--linie); }
.preise i { font: 400 15px var(--mono); font-style: normal; color: var(--text); white-space: nowrap; }
.saucen { color: var(--t2); margin-bottom: 16px; }
.notiz { margin-top: 24px; color: var(--t2); max-width: 64ch; font-size: 15px; }
.miete { margin-top: 40px; max-width: 640px; }
@media (min-width: 900px) { .karte { grid-template-columns: repeat(3, 1fr); } }

/* Kontakt */
.kontakt { margin: 0 calc(var(--rand) * -1); padding: var(--luft) var(--rand); background: var(--gelb); color: var(--text); }
.kontakt-satz { margin: 16px 0 24px; font-size: 18px; max-width: 40ch; }
.tel-gross { font: 600 clamp(40px, 10vw, 104px)/1 var(--sans); letter-spacing: -0.03em; text-decoration: none; display: inline-block; }
.adresse { margin-top: 16px; }
.mail { display: inline-flex; align-items: center; min-height: 44px; }
.entwurf a { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 900px) { .kontakt { border-radius: 8px; margin: 0; padding: var(--luft) 64px; } }

.fuss { padding-top: 40px; padding-bottom: 40px; color: var(--t2); font-size: 15px; }
.entwurf { margin-top: 8px; color: var(--t3); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .maske span { transition: none !important; transform: none !important; }
}