/* Süßer Schoppe · Bembel-Steinzeug
   Die Seite ist ein Bembel: Kragen-Ringe tragen die Navigation, der Bauch das Dessert, der Fußring die Fakten. */

@font-face {
  font-family: "Young Serif";
  src: url("../fonts/young-serif-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  src: url("../fonts/work-sans-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Farben */
  --steinzeug: #D6D2C9;
  --steinzeug-tief: #C7C2B7;
  --papier: #F4EFE6;
  --kobalt: #213B98;
  --kobalt-tief: #172C78;
  --tinte: #17203A;
  --tinte-weich: #3B4360;
  --himbeere: #C8325A;
  --himbeere-tief: #A9264A;

  /* Schrift */
  --serif: "Young Serif", Georgia, serif;
  --sans: "Work Sans", system-ui, sans-serif;
  --groesse-name: clamp(3.6rem, 9vw, 7.2rem);
  --groesse-h2: clamp(2.2rem, 4.6vw, 3.9rem);
  --groesse-zahl: clamp(1.7rem, 3vw, 2.6rem);
  --groesse-text: 1.0625rem;

  /* Raster: jeder Abschnitt ist ein Ring gleicher Grundhöhe */
  --ring: clamp(4.5rem, 9vw, 8rem);
  --seite: 16px;
  --breite: 1240px;
  --bauch-breite: 1120px;
  --bauch-oben: clamp(1.5rem, 3vw, 2.5rem);

  /* Pinselband: beginnt dünn, wird dicker */
  --band: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 24' preserveAspectRatio='none'%3E%3Cpath d='M0 11.6 C180 10.8 380 9.2 560 7.8 C720 6.6 860 5 1000 3.6 L1000 20.4 C860 19 720 17.6 560 16.4 C380 15 180 13.2 0 12.4 Z' fill='%23213B98'/%3E%3C/svg%3E");
  --band-hell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 24' preserveAspectRatio='none'%3E%3Cpath d='M0 11.6 C180 10.8 380 9.2 560 7.8 C720 6.6 860 5 1000 3.6 L1000 20.4 C860 19 720 17.6 560 16.4 C380 15 180 13.2 0 12.4 Z' fill='%23F4EFE6'/%3E%3C/svg%3E");
  --pinsel-feld: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M4 34 C30 12 90 8 150 10 C176 11 194 16 197 26 C199 40 180 52 140 54 C90 57 30 55 10 50 C2 47 0 40 4 34 Z' fill='%23213B98'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 5.5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--groesse-text);
  line-height: 1.6;
  color: var(--tinte);
  background-color: var(--steinzeug);
  /* Salzglasur: feiner Sprenkel in zwei Lagen */
  background-image:
    radial-gradient(rgba(108, 100, 86, .22) .7px, transparent 1.1px),
    radial-gradient(rgba(255, 255, 255, .35) .6px, transparent 1px);
  background-size: 9px 9px, 13px 13px;
  background-position: 0 0, 4px 6px;
  overflow-x: hidden;
}

::selection { background: var(--kobalt); color: var(--papier); }
:focus-visible { outline: 3px solid var(--himbeere); outline-offset: 3px; border-radius: 6px; }
/* Auf Kobalt reicht Himbeere als Fokusrahmen nicht, dort Papier */
.ring--kobalt :focus-visible, .ergebnis :focus-visible, .fuss :focus-visible, .fussring :focus-visible { outline-color: var(--papier); }
html { scrollbar-color: var(--kobalt) var(--steinzeug-tief); }

img, video { display: block; max-width: 100%; height: auto; }
a { color: var(--kobalt); text-underline-offset: .22em; text-decoration-thickness: 1.5px; }
a:hover { color: var(--kobalt-tief); }
p { margin: 0 0 1em; text-wrap: pretty; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; color: var(--kobalt); margin: 0; text-wrap: balance; letter-spacing: -.01em; }
h2 { font-size: var(--groesse-h2); line-height: 1.02; margin-bottom: .45em; }
h3 { font-size: 1.45rem; line-height: 1.15; }
.zahlen { font-variant-numeric: tabular-nums lining-nums; }

.huelle { width: min(100% - 2 * var(--seite), var(--breite)); margin-inline: auto; }
.nur-vorleser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Pinselbänder */
.band { height: 14px; background: var(--band) center / 100% 100% no-repeat; }
.band--dick { height: 22px; }
.band--dreh { transform: scaleX(-1); }
.band--hell { background-image: var(--band-hell); }

/* Buttons */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 3.1rem; padding: .8rem 1.5rem;
  border-radius: 999px; border: 2px solid transparent;
  font: 600 1rem/1.2 var(--sans); text-decoration: none; cursor: pointer;
  transition: background-color .25s ease-out, color .25s ease-out, transform .25s cubic-bezier(.16, 1, .3, 1), border-color .25s;
}
.knopf:active { transform: translateY(1px) scale(.99); }
.knopf--voll { background: var(--himbeere); color: #fff; }
.knopf--voll:hover { background: var(--himbeere-tief); color: #fff; }
.knopf--rand { border-color: var(--kobalt); color: var(--kobalt); background: transparent; }
.knopf--rand:hover { background: var(--kobalt); color: var(--papier); }
.knopf--hell { border-color: var(--papier); color: var(--papier); }
.knopf--hell:hover { background: var(--papier); color: var(--kobalt); }

/* ---------- Kragen (Kopfleiste) ---------- */
.kragen { position: sticky; top: 0; z-index: 20; background: var(--steinzeug); background-image: inherit; background-size: inherit; }
.kragen__zeile { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 4.6rem; }
.wortmarke { font: 400 clamp(1.45rem, 2.4vw, 1.8rem)/1 var(--serif); color: var(--kobalt); text-decoration: none; white-space: nowrap; }
.kragen nav ul { display: flex; gap: clamp(.9rem, 1.8vw, 1.8rem); list-style: none; margin: 0; padding: 0; }
.kragen nav a { font-weight: 600; font-size: .95rem; text-decoration: none; color: var(--kobalt); padding: .3rem 0; background: var(--band) 0 100% / 0 5px no-repeat; transition: background-size .45s cubic-bezier(.16, 1, .3, 1); }
/* Pinselstrich unter dem Menüpunkt: beim Zeigen und für den Abschnitt, in dem man gerade ist */
.kragen nav a:hover, .kragen nav a.ist-aktiv { background-size: 100% 5px; }
.kragen__ringe { display: grid; gap: 5px; }
.kragen__ringe .band:last-child { height: 7px; }
.menue-knopf { display: none; }

/* ---------- Bauch (Einstieg) ---------- */
.bauch-buehne { padding: var(--bauch-oben) var(--seite) 0; }
.bauch {
  position: relative;
  width: min(100%, var(--bauch-breite));
  margin-inline: auto;
  background: var(--papier);
  border: 7px solid var(--kobalt);
  border-radius: 48% 48% 30% 30% / 26% 26% 12% 12%;
  padding: clamp(2.2rem, 3.6vw, 2.8rem) clamp(1.2rem, 6vw, 5rem) 0;
  text-align: center;
  box-shadow: 0 30px 60px -38px rgba(23, 32, 58, .45);
}
.bauch::before { /* zweiter, feiner Ring innen wie eine Glasurkante */
  content: ""; position: absolute; inset: 14px; border: 2px solid rgba(33, 59, 152, .28);
  border-radius: inherit; pointer-events: none;
}
.name { font-size: var(--groesse-name); line-height: .88; letter-spacing: -.02em; }
.name span { display: block; }
.bauch__unten { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: end; text-align: left; margin-top: clamp(1.4rem, 3vw, 2rem); }
.bauch__links { padding-bottom: clamp(2rem, 4vw, 3rem); }
.bauch__text { max-width: 46ch; margin: 0 0 1.4rem; color: var(--tinte-weich); }
.knopfreihe { display: flex; flex-wrap: wrap; gap: .8rem; }
/* ---------- Fußring (Fakten) ---------- */
.fussring { position: relative; z-index: 2; margin-top: -2px; margin-bottom: clamp(1rem, 5vw, 4.5rem); }
.fussring__band {
  width: min(100% - 2 * var(--seite), calc(var(--bauch-breite) + 80px)); margin: 0 auto;
  background: var(--kobalt); color: var(--papier);
  border-radius: 14px 14px 40px 40px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  list-style: none; margin-block: 0;
  padding: 1.4rem clamp(1rem, 3vw, 2.5rem);
}
.fakt { text-align: center; padding: .3rem .6rem; }
.fakt + .fakt { border-left: 1px solid rgba(244, 239, 230, .28); }
.fakt b { display: block; font: 400 var(--groesse-zahl)/1.05 var(--serif); white-space: nowrap; }
.fakt span { font-size: .9rem; }
.fakt__unendlich { display: block; width: 2.1em; height: 1.05em; margin: 0 auto; }
.fakt .fakt__vor { display: block; margin-bottom: -.15rem; }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Ringe (Abschnitte) ---------- */
.ring { padding-block: var(--ring); }
.ring--papier { background: var(--papier); }
.ring--kobalt { background: var(--kobalt); color: var(--papier); }
.ring--kobalt h2, .ring--kobalt h3 { color: var(--papier); }
.ring__kante { height: 22px; }

/* Das Dessert: mittig, darunter vier Punkte mit Pinsel-Zeichen, zwei pro Zeile */
.dessert { position: relative; text-align: center; }
/* Stempel: rund, schräg gesetzt, rechts neben der Überschrift */
.stempel { position: absolute; top: 5.2rem; right: 0; width: clamp(8.5rem, 12vw, 10.5rem); height: auto; color: var(--kobalt); transform: rotate(-12deg); }
.stempel__rand { font: 600 13.5px var(--sans); fill: currentColor; }
.stempel__zahl { font: 400 38px var(--serif); fill: currentColor; }
.dessert__titel { margin-inline: auto; }
.dessert__einleitung { max-width: 58ch; margin: 0 auto; font-size: 1.15rem; color: var(--tinte-weich); }
.punkte { list-style: none; margin: clamp(2.4rem, 5vw, 3.6rem) auto 0; padding: 0; max-width: 980px; display: grid; grid-template-columns: 1fr 1fr; gap: 2rem clamp(2rem, 5vw, 4rem); text-align: left; }
.punkte li { position: relative; padding-left: 3.4rem; color: var(--tinte-weich); }
.punkte li::before { content: ""; position: absolute; left: 0; top: .35em; width: 2.4rem; height: .95rem; background: var(--pinsel-feld) center / 100% 100% no-repeat; }
.punkte b { display: block; font-family: var(--serif); font-weight: 400; color: var(--kobalt); font-size: 1.3rem; line-height: 1.2; margin-bottom: .3rem; text-wrap: balance; }

/* Für die Küche: Ablauf als Strecke */
/* Kopf über zwei Drittel der Breite, damit Überschrift und Text Luft haben */
.kueche__kopf { max-width: calc(100% * 2 / 3); }
.kueche__kopf h2 { font-size: clamp(2.2rem, 4vw, 3.6rem); }
.kueche__kopf p { color: var(--tinte-weich); font-size: 1.12rem; }
.dessert .knopfreihe--mitte { justify-content: center; margin-top: clamp(2.4rem, 5vw, 3.4rem); }
#kueche .knopfreihe { margin-top: 2rem; }
.strecke { position: relative; list-style: none; margin: 3rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.4rem; }
.strecke::before, .strecke::after { content: ""; position: absolute; left: 1.6rem; right: 1.6rem; top: 1.6rem; height: 10px; background: var(--band) center / 100% 100% no-repeat; opacity: .22; }
.strecke::after { opacity: 1; clip-path: inset(0 calc(100% - var(--fuellung, 0%)) 0 0); transition: clip-path 1.2s cubic-bezier(.16, 1, .3, 1); }
.schritt { position: relative; z-index: 1; }
.schritt__nr { display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 50%; background: var(--papier); border: 3px solid var(--kobalt); font: 400 1.4rem/1 var(--serif); color: var(--kobalt); margin-bottom: 1rem; transition: background-color .4s, color .4s; }
.schritt.ist-an .schritt__nr { background: var(--kobalt); color: var(--papier); }
.schritt h3 { margin-bottom: .35rem; }
.schritt p { font-size: .97rem; color: var(--tinte-weich); margin: 0; }

/* Portionsrechner: der Bembel-Ring */
.rechner-ring { background: var(--papier); border-block: 7px solid var(--kobalt); position: relative; }
.rechner-ring::before, .rechner-ring::after { content: ""; position: absolute; left: 0; right: 0; height: 3px; background: var(--kobalt); }
.rechner-ring::before { top: 9px; } .rechner-ring::after { bottom: 9px; }
.rechner { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.rechner__text > p { max-width: 50ch; }
.rechner__form { margin-top: 2rem; }
fieldset { border: 0; margin: 0 0 1.6rem; padding: 0; }
legend { font-weight: 600; margin-bottom: .6rem; padding: 0; }
.wahl { display: flex; flex-wrap: wrap; gap: .55rem; }
.wahl label { position: relative; cursor: pointer; }
.wahl input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.wahl span {
  display: inline-flex; align-items: center; min-height: 2.9rem; padding: .55rem 1.25rem;
  border: 2px solid var(--kobalt); border-radius: 999px; font-weight: 600; color: var(--kobalt);
  background: transparent; transition: color .25s, background-color .25s;
}
/* gewählter Zustand: das Feld füllt sich mit Pinselband */
.wahl input:checked + span { color: var(--papier); background: var(--kobalt) var(--pinsel-feld) center / 100% 100% no-repeat; border-color: var(--kobalt); box-shadow: inset 0 0 0 2px var(--himbeere); }
.wahl input:focus-visible + span { outline: 3px solid var(--himbeere); outline-offset: 3px; }
.rechner__stueck { margin: .8rem 0 0; font: 400 1.5rem/1.2 var(--serif); color: var(--kobalt); }

/* Rechts: das Stück und darunter sein Preis */
.ergebnis { text-align: center; background: var(--kobalt); color: var(--papier); border-radius: 46% 46% 26px 26px / 20% 20% 26px 26px; padding: clamp(2.4rem, 4vw, 3.2rem) clamp(1.2rem, 3vw, 2rem) clamp(1.8rem, 3vw, 2.4rem); }
.ergebnis__bild img { width: min(100%, 15rem); margin: 0 auto; filter: drop-shadow(0 26px 22px rgba(0, 0, 0, .35)) drop-shadow(0 6px 6px rgba(0, 0, 0, .2)); }
.ergebnis__preis { margin-top: 1.4rem; }
.ergebnis__zahl { margin: 0; font-size: 1.1rem; color: rgba(244, 239, 230, .9); }
.ergebnis__zahl b { display: block; font: 400 clamp(3.2rem, 6vw, 4.6rem)/1 var(--serif); color: var(--papier); }
.ergebnis__klein { margin: .6rem auto 0; max-width: 30ch; font-size: .9rem; color: rgba(244, 239, 230, .82); }
.ergebnis__mehr { display: none; margin-top: 1.8rem; }
.ergebnis.ist-mehr .ergebnis__preis, .ergebnis.ist-mehr .ergebnis__tasting { display: none; }
.ergebnis.ist-mehr .ergebnis__mehr { display: block; }
.ergebnis__tasting { margin-top: 1.4rem; }

/* Servierideen: blaue Fläche, Text links, Videos als aufklappende Leiste rechts */
.servier__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.servier__kopf h2 { font-size: clamp(2.2rem, 4vw, 3.4rem); }
.servier__kopf p { max-width: 44ch; color: rgba(244, 239, 230, .9); font-size: 1.12rem; }
/* Karussell: das Video in der Mitte ist groß, links und rechts schauen die Nachbarn herein */
.videos { --karte: 66%; --luecke: 1.2rem; position: relative; overflow: hidden; padding-block: 1rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.videos__spur { display: flex; gap: var(--luecke); will-change: transform; }
.videos__spur.gleitet { transition: transform .9s cubic-bezier(.65, 0, .35, 1); }
.video {
  position: relative; flex: 0 0 var(--karte); aspect-ratio: 3 / 4; border-radius: 26px; overflow: hidden;
  background: var(--kobalt-tief); box-shadow: 0 30px 50px -30px rgba(0, 0, 0, .6);
  transform: scale(.86); opacity: .5; cursor: pointer;
  transition: transform .9s cubic-bezier(.65, 0, .35, 1), opacity .9s;
}
.video.ist-mitte { transform: none; opacity: 1; cursor: default; }
.video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Steuerung unter dem Karussell: zurück, anhalten, weiter */
.videos__steuerung { display: flex; justify-content: center; gap: .7rem; margin-top: 1.2rem; }
.rund-knopf { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; border: 2px solid rgba(244, 239, 230, .7); background: transparent; color: var(--papier); cursor: pointer; transition: background-color .25s, color .25s, border-color .25s; }
.rund-knopf:hover { background: var(--papier); color: var(--kobalt); border-color: var(--papier); }
.rund-knopf svg { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.rund-knopf .zeichen-play { display: none; fill: currentColor; }
.rund-knopf[aria-pressed="true"] .zeichen-pause { display: none; }
.rund-knopf[aria-pressed="true"] .zeichen-play { display: block; }

/* Rechtstexte: Impressum und Datenschutz */
.recht { max-width: 46rem; }
.recht h1 { font-size: var(--groesse-h2); margin-bottom: .6em; }
.recht h2 { font-size: 1.45rem; margin: 2.2rem 0 .5rem; }
.recht p { max-width: 65ch; }
.recht .offen { background: #FFF3C4; color: var(--tinte); padding: .6rem .8rem; border-radius: 8px; }
.recht__stand { margin-top: 2.4rem; font-size: .9rem; color: var(--tinte-weich); }

/* Über uns */
/* Familie: mittig, eine Spalte */
.familie { text-align: center; }
.familie h2 { max-width: 24ch; margin-inline: auto; }
.familie p { max-width: 60ch; margin-inline: auto; text-wrap: pretty; font-size: 1.12rem; color: var(--tinte-weich); }
.familie__ort { display: inline-block; margin-top: .5rem; font-weight: 600; }

/* Fragen */
.fragen { max-width: 880px; }
.frage { border-top: 3px solid var(--kobalt); }
.frage:last-of-type { border-bottom: 3px solid var(--kobalt); }
.frage summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.15rem 0; font: 400 1.3rem/1.25 var(--serif); color: var(--kobalt); }
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after { content: ""; flex: none; width: 1.1rem; height: 1.1rem; background: linear-gradient(var(--kobalt), var(--kobalt)) center / 100% 3px no-repeat, linear-gradient(var(--kobalt), var(--kobalt)) center / 3px 100% no-repeat; transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.frage[open] summary::after { transform: rotate(45deg); }
.frage p { margin: 0 0 1.3rem; max-width: 62ch; }

/* Anfrage: noch einmal der Bauch */
.anfrage-buehne { padding: var(--ring) var(--seite); }
.anfrage { width: min(100%, var(--bauch-breite)); margin-inline: auto; background: var(--papier); border: 7px solid var(--kobalt); border-radius: 40% 40% 28px 28px / 12% 12% 28px 28px; padding: clamp(3rem, 7vw, 5.5rem) clamp(1.2rem, 6vw, 5rem) clamp(2rem, 5vw, 3.5rem); }
.anfrage__kopf { text-align: center; max-width: 46ch; margin: 0 auto 2.4rem; }
.formular { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.4rem; }
.field { display: grid; gap: .35rem; align-content: start; }
.field--breit { grid-column: 1 / -1; }
.field label { font-weight: 600; font-size: .95rem; }
.field label small { font-weight: 400; color: var(--tinte-weich); }
.field input, .field select, .field textarea {
  font: 400 1rem/1.4 var(--sans); color: var(--tinte); width: 100%;
  padding: .8rem .9rem; border: 2px solid rgba(33, 59, 152, .7); border-radius: 12px; background: #fff;
  transition: border-color .2s;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--kobalt); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--kobalt); box-shadow: 0 0 0 3px var(--himbeere); }
.field ::placeholder { color: #6A6F84; }
.field textarea { min-height: 7.5rem; resize: vertical; }
.field .hinweis { font-size: .85rem; color: var(--tinte-weich); }
.field-error { display: none; font-size: .88rem; color: var(--himbeere-tief); font-weight: 600; }
.field.has-error .field-error { display: block; }
.field.has-error input, .field.has-error select { border-color: var(--himbeere-tief); }
.field--check label { display: flex; gap: .7rem; align-items: start; font-weight: 400; }
.field--check input { width: 1.25rem; height: 1.25rem; margin-top: .15rem; accent-color: var(--kobalt); flex: none; }
.hp { position: absolute; left: -9999px; }
.absenden { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.knopf:disabled { opacity: .6; cursor: progress; }
.form-status { margin: 0; font-size: .95rem; }
.form-status.is-error { color: var(--himbeere-tief); font-weight: 600; }
#form-wrap.is-sent form { display: none; }
#form-success { text-align: center; padding: 2rem 0; outline: none; }
#form-success h3 { font-size: 2rem; margin-bottom: .5rem; }

/* Fußzeile: Fußring */
.fuss { background: var(--kobalt); color: var(--papier); padding: 3rem 0 2.4rem; border-radius: 48px 48px 0 0; }
.fuss__zeile { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.6rem; align-items: end; }
.fuss .wortmarke { color: var(--papier); font-size: 2.2rem; }
.fuss a { color: var(--papier); }
.fuss ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.4rem; }

/* Einblenden: sichtbar per Standard, nur mit JS und ohne Bewegungswunsch animiert */
.js .zeigen { opacity: 0; transform: translateY(18px); transition: opacity .8s cubic-bezier(.16, 1, .3, 1), transform .8s cubic-bezier(.16, 1, .3, 1); }
.js .zeigen.ist-da { opacity: 1; transform: none; }
.punkte li:nth-child(2) { transition-delay: .08s; }
.punkte li:nth-child(3) { transition-delay: .16s; }
.punkte li:nth-child(4) { transition-delay: .24s; }
/* Pinselstriche vor den Punkten malen sich von links nach rechts */
.js .punkte li::before { clip-path: inset(0 100% 0 0); transition: clip-path .7s cubic-bezier(.65, 0, .35, 1) .3s; }
.js .punkte li.ist-da::before { clip-path: inset(0 0 0 0); }
/* Stempel drückt sich einmal auf */
.js .stempel { opacity: 0; transform: rotate(-20deg) scale(1.4); transition: opacity .25s ease-out .2s, transform .6s cubic-bezier(.22, 1, .36, 1) .2s; }
.js .stempel.ist-da { opacity: 1; transform: rotate(-12deg) scale(1); }
/* Das Unendlich-Zeichen zieht sich einmal nach */
.js .fakt__unendlich path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s cubic-bezier(.65, 0, .35, 1) .4s; }
.js .fakt__unendlich.ist-da path { stroke-dashoffset: 0; }
/* Telefonfeld leuchtet kurz auf, wenn es zur Pflicht wird */
@keyframes aufleuchten { 0%, 100% { box-shadow: 0 0 0 0 rgba(200, 50, 90, 0); } 35% { box-shadow: 0 0 0 5px rgba(200, 50, 90, .45); } }
.field.ist-neu input { border-color: var(--himbeere); animation: aufleuchten 1.1s ease-out 2; }
@media (prefers-reduced-motion: reduce) {
  .js .zeigen { opacity: 1; transform: none; transition: none; }
  .js .punkte li::before { clip-path: none; transition: none; }
  .js .stempel { opacity: 1; transform: rotate(-12deg); transition: none; }
  .js .fakt__unendlich path { stroke-dashoffset: 0; transition: none; }
  .field.ist-neu input { animation: none; }
  .strecke::after { transition: none; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1080px) {
  .strecke { grid-template-columns: repeat(3, 1fr); row-gap: 2.4rem; }
  .strecke::before, .strecke::after { display: none; }
  .fussring__band { grid-template-columns: repeat(2, 1fr); row-gap: 1rem; }
  .fakt:nth-child(3) { border-left: 0; }
  .kueche__kopf { max-width: none; }
  .stempel { position: static; display: block; margin: 1.2rem auto 1.6rem; width: 8.5rem; }
}

/* ---------- Handy ---------- */
@media (max-width: 760px) {
  :root { --bauch-oben: 1rem; }
  .kragen nav { display: none; }
  .kragen.ist-offen nav { display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--papier); border-bottom: 5px solid var(--kobalt); padding: 1rem var(--seite) 1.4rem; }
  .kragen.ist-offen nav ul { flex-direction: column; gap: .2rem; }
  .kragen.ist-offen nav a { display: block; padding: .65rem 0; font-size: 1.1rem; }
  .menue-knopf { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 .9rem; border: 2px solid var(--kobalt); border-radius: 999px; background: transparent; color: var(--kobalt); font: 600 .95rem var(--sans); cursor: pointer; }
  .kragen__zeile .knopf--voll { display: none; }
  .bauch { border-width: 5px; border-radius: 44% 44% 24px 24px / 14% 14% 24px 24px; padding-top: 3rem; }
  .bauch::before { inset: 9px; }
  .bauch__unten { grid-template-columns: 1fr; text-align: center; }
  .bauch__text { margin-inline: auto; }
  .knopfreihe { justify-content: center; }
  .fakt b { white-space: normal; }
  .knopfreihe .knopf { width: 100%; }
  .fussring__band { grid-template-columns: 1fr; border-radius: 12px 12px 28px 28px; padding-block: .6rem; }
  .fakt { padding: .9rem .6rem; }
  .fakt + .fakt { border-left: 0; border-top: 1px solid rgba(244, 239, 230, .28); }
  .rechner { grid-template-columns: 1fr; }
  .punkte { grid-template-columns: 1fr; gap: 1.6rem; }
  .strecke { grid-template-columns: 1fr; gap: 1.6rem; }
  .schritt { display: grid; grid-template-columns: 3.2rem 1fr; column-gap: 1rem; }
  .schritt__nr { grid-row: span 2; margin: 0; }
  .servier__raster { grid-template-columns: 1fr; }
  .videos { --karte: 76%; --luecke: .8rem; margin-inline: calc(-1 * var(--seite)); }
  .video { border-radius: 18px; }
  .formular { grid-template-columns: 1fr; }
  .anfrage { border-width: 5px; border-radius: 36% 36% 22px 22px / 6% 6% 22px 22px; }
  .fuss__zeile { flex-direction: column; align-items: start; }
}

/* ---------- Einstieg: kein Bauch, keine Wortmarke, die Platte von oben auf dem Steinzeug ---------- */
.kragen__zeile { justify-content: space-between; }
.kragen nav ul { gap: clamp(1.1rem, 2.2vw, 2.2rem); }

.bauch {
  background: none; border: 0; box-shadow: none; border-radius: 0;
  padding: clamp(1.5rem, 3vw, 2.5rem) 0 0;
  width: min(100%, var(--breite));
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center; text-align: left;
}
.bauch::before { display: none; }
.name { grid-column: 1; grid-row: 1; align-self: end; }
.name span { font-size: clamp(3.6rem, 10vw, 8.4rem); }
.bauch__unten { display: contents; }
.bauch__links { grid-column: 1; grid-row: 2; align-self: start; padding: 1.6rem 0 2.5rem; }
.bauch__text { max-width: 48ch; }
.knopfreihe { justify-content: flex-start; }

.brett { grid-column: 2; grid-row: 1 / span 2; margin: 0 0 -2rem clamp(-6rem, -5vw, -2rem); justify-self: start; position: relative; z-index: 3; }
.brett img {
  height: auto; width: auto; max-height: min(78vh, 40rem); max-width: 100%;
  transform: translateY(var(--parallax, 0px)) rotate(var(--dreh, -15deg));
  will-change: transform;
  filter: drop-shadow(0 28px 26px rgba(23, 32, 58, .26)) drop-shadow(0 6px 6px rgba(23, 32, 58, .14));
}

@media (max-width: 760px) {
  .bauch { grid-template-columns: 1fr; text-align: center; }
  .name, .bauch__links, .brett { grid-column: 1; grid-row: auto; }
  .knopfreihe { justify-content: center; }
  .bauch__text { margin-inline: auto; }
  .brett { margin: .5rem 0 .6rem; justify-self: center; }
  .brett img { height: auto; width: min(70vw, 17rem); }
}