/* ==========================================================================
   tippstern – Farben und Formen kommen direkt von den Produkten:
   Nachtblau (Logo), Tafelblau (blaue Tafel), Sterngold (die fünf Sterne),
   Acrylweiß (weißer Aufsteller). Die Welle stammt von der blauen Tafel.
   ========================================================================== */

:root {
  --ink: #141A4A;          /* Nachtblau */
  --ink-soft: #2A2E45;
  --blue: #3A6BC4;         /* Tafelblau */
  --blue-deep: #2F5CAD;
  --blue-band: #B9CDEE;    /* heller Streifen über der Welle */
  --gold: #F4B324;         /* Sterngold */
  --gold-deep: #D99A0B;
  --paper: #FBFCFE;        /* Acrylweiß */
  --tint: #EEF2F9;
  --mist: #DCE3F0;
  --slate: #4A5068;

  --f-display: "Gabarito", "Trebuchet MS", sans-serif;
  --f-body: "Onest", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, monospace;

  --radius: 14px;
  --gutter: clamp(16px, 4vw, 40px);
  --max: 1160px;
  --shadow-lift: 0 1px 0 rgba(20, 26, 74, .04), 0 18px 40px -18px rgba(20, 26, 74, .28);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 76px; }

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink-soft);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Honeypot gegen Spam-Bots: für Menschen unsichtbar */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; color: var(--ink); font-family: var(--f-display); line-height: 1.05; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 16px; background: var(--ink); color: #fff; border-radius: 8px;
  text-decoration: none;
}
.skip:focus { top: 12px; }

.wrap { width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; }
.wrap--narrow { width: min(760px, 100% - 2 * var(--gutter)); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 50px; padding: 0 24px;
  font: 600 1rem/1 var(--f-body);
  text-decoration: none; cursor: pointer;
  border: 2px solid transparent; border-radius: 999px;
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn--sm { min-height: 40px; padding: 0 18px; font-size: .9375rem; }
.btn--block { width: 100%; }

.btn--gold { background: var(--gold); color: var(--ink); box-shadow: 0 6px 0 -2px var(--gold-deep); }
.btn--gold:hover { background: #FFC23A; }

.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: #222A6B; }

.btn--ghost { border-color: var(--mist); color: var(--ink); background: #fff; }
.btn--ghost:hover { border-color: var(--ink); }

/* ---------- Header ---------- */

.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251, 252, 254, .86);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid rgba(220, 227, 240, .7);
}
.topbar__inner {
  width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto;
  display: flex; align-items: center; gap: 24px; height: 64px;
}

.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand__mark { width: 40px; height: 30px; fill: var(--ink); }
.brand__word { font: 500 1.375rem/1 Arial, Helvetica, sans-serif; letter-spacing: -.01em; color: var(--ink-soft); }
.brand--small .brand__mark { width: 32px; height: 24px; }
.brand--small .brand__word { font-size: 1.125rem; }

.nav { display: flex; gap: 28px; margin-left: auto; }
.nav a { text-decoration: none; font-weight: 500; font-size: .9375rem; color: var(--slate); }
.nav a:hover { color: var(--ink); }

.lang {
  display: inline-flex; padding: 3px; gap: 2px;
  border: 1px solid var(--mist); border-radius: 999px; background: #fff;
}
.lang__btn {
  min-width: 40px; height: 32px; padding: 0 10px;
  border: 0; border-radius: 999px; background: transparent; cursor: pointer;
  font: 500 .75rem/1 var(--f-mono); letter-spacing: .06em; color: var(--slate);
  transition: background-color .15s ease, color .15s ease;
}
.lang__btn:hover { color: var(--ink); }
.lang__btn[aria-pressed="true"] { background: var(--ink); color: #fff; }

@media (max-width: 760px) {
  .nav { display: none; }
  .lang { margin-left: auto; }
  .topbar__inner { gap: 10px; }
}

/* ---------- Hero ---------- */

.hero { padding: clamp(40px, 7vw, 96px) 0 clamp(24px, 4vw, 48px); }
.hero__inner {
  width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 5vw, 72px); align-items: center;
}

.hero__title {
  font-weight: 900;
  font-size: clamp(3rem, 7.4vw, 6.4rem);
  line-height: .92;
  letter-spacing: -.035em;
  max-width: 9ch;
}
.nowrap { white-space: nowrap; }
.hero__star {
  display: inline-block; width: .42em; height: .42em; margin-left: .04em;
  fill: var(--gold); vertical-align: baseline;
  transform: translateY(.02em) rotate(-8deg);
}

.hero__lead { margin-top: 28px; max-width: 34ch; font-size: clamp(1.0625rem, 1.5vw, 1.25rem); color: var(--slate); }

.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.specs { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 28px 0 0; }
.specs li {
  font: 500 .75rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em;
  padding: 8px 10px; border: 1px solid var(--mist); border-radius: 6px; color: var(--slate); background: #fff;
}

@media (max-width: 880px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__title { max-width: 11ch; }
}

/* ---------- Szene: Handy tippt auf den Aufsteller ---------- */

.scene {
  position: relative;
  width: 100%; max-width: 520px; margin-inline: auto;
  aspect-ratio: 1 / 1.02;
  container-type: inline-size;
}

.scene__stand { position: absolute; left: 6cqw; top: 2cqw; width: 54cqw; }

.ripple { position: absolute; left: 33cqw; top: 60cqw; width: 0; height: 0; z-index: 2; pointer-events: none; }
.ripple span {
  position: absolute; left: -9cqw; top: -9cqw; width: 18cqw; height: 18cqw;
  border: .7cqw solid var(--blue); border-radius: 50%;
  opacity: 0; transform: scale(.3);
}
.scene.is-contact.is-approach .ripple span { animation: ripple 1.3s cubic-bezier(.2, .7, .3, 1) 2; }
.scene.is-contact.is-approach .ripple span:nth-child(2) { animation-delay: .18s; }
.scene.is-contact.is-approach .ripple span:nth-child(3) { animation-delay: .36s; }

@keyframes ripple {
  0% { opacity: .8; transform: scale(.3); }
  100% { opacity: 0; transform: scale(2.4); }
}

.phone {
  position: absolute; left: 66cqw; top: 26cqw; z-index: 3;
  width: 29cqw; aspect-ratio: 9 / 19;
  padding: 1.1cqw;
  background: #11142B;
  border-radius: 4.6cqw;
  box-shadow: 0 3cqw 6cqw -2cqw rgba(20, 26, 74, .45), inset 0 0 0 .35cqw #2B3055;
  transform: rotate(9deg);
  transition: transform .9s cubic-bezier(.55, .05, .25, 1);
}
.scene.is-approach .phone { transform: translate(-30cqw, 4cqw) rotate(-4deg); }

.phone__screen {
  position: relative; height: 100%; overflow: hidden;
  border-radius: 3.6cqw; background: #fff;
}
.phone__screen::before { /* Dynamic Island */
  content: ""; position: absolute; top: 1.6cqw; left: 50%; z-index: 2;
  width: 8cqw; height: 2.2cqw; border-radius: 2cqw; background: #11142B; transform: translateX(-50%);
}

.screen {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center;
  transition: opacity .35s ease;
}

.screen--idle {
  justify-content: flex-start; padding-top: 11cqw; gap: .6cqw;
  background: linear-gradient(170deg, #3A6BC4 0%, #141A4A 100%); color: #fff;
}
.screen__time { font: 600 7.4cqw/1 var(--f-display); letter-spacing: -.02em; }
.screen__date { font-size: 1.8cqw; opacity: .8; }

.screen--review { opacity: 0; padding: 7cqw 2.4cqw 2.4cqw; gap: 1.6cqw; background: #fff; text-align: center; }
.scene.is-contact .screen--review { opacity: 1; }
.scene.is-contact .screen--idle { opacity: 0; }

.rv__url {
  width: 100%; padding: .8cqw 1cqw; border-radius: 2cqw; background: var(--tint);
  font: 500 1.35cqw/1.2 var(--f-mono); color: var(--slate);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rv__place { margin-top: 2cqw; font: 700 2.9cqw/1.1 var(--f-display); color: var(--ink); }
.rv__label { font-size: 1.8cqw; color: var(--slate); }
.rv__stars { display: flex; gap: .6cqw; margin-top: .6cqw; }
.rv__stars svg {
  width: 4cqw; height: 4cqw;
  fill: var(--mist);
  transform: scale(.85);
  transition: fill .2s ease, transform .3s cubic-bezier(.3, 1.6, .5, 1);
}
.scene.is-contact .rv__stars svg { fill: var(--gold); transform: scale(1); }
.scene.is-contact .rv__stars svg:nth-child(1) { transition-delay: .55s; }
.scene.is-contact .rv__stars svg:nth-child(2) { transition-delay: .7s; }
.scene.is-contact .rv__stars svg:nth-child(3) { transition-delay: .85s; }
.scene.is-contact .rv__stars svg:nth-child(4) { transition-delay: 1s; }
.scene.is-contact .rv__stars svg:nth-child(5) { transition-delay: 1.15s; }

.rv__lines { display: flex; flex-direction: column; gap: 1cqw; width: 100%; margin-top: 1.6cqw; }
.rv__lines i { height: 1.3cqw; border-radius: 1cqw; background: var(--tint); }
.rv__lines i:nth-child(2) { width: 86%; }
.rv__lines i:nth-child(3) { width: 58%; }
.rv__btn {
  margin-top: auto; align-self: flex-end;
  padding: 1cqw 2.4cqw; border-radius: 3cqw;
  background: var(--blue); color: #fff; font-size: 1.7cqw; font-weight: 600;
}

/* ---------- Produktflächen (Aufsteller + Tafel), rein in CSS ---------- */

.product { container-type: inline-size; position: relative; width: 100%; }

/* Aufsteller Weiß */
.product--stand .face {
  aspect-ratio: 10 / 14;
  display: flex; flex-direction: column; align-items: center;
  padding: 12cqw 6cqw 7cqw;
  background: linear-gradient(160deg, #FFFFFF 0%, #F4F6FA 70%, #EBEEF4 100%);
  border-radius: 3cqw;
  box-shadow:
    inset 0 0 0 .5cqw rgba(255, 255, 255, .9),
    inset -.8cqw -.8cqw 0 rgba(20, 26, 74, .04),
    0 3cqw 6cqw -3cqw rgba(20, 26, 74, .35),
    0 .5cqw 1cqw rgba(20, 26, 74, .08);
}
.product--stand::after { /* Acrylfuß */
  content: ""; display: block;
  height: 5cqw; margin: -1cqw -4cqw 0;
  background: linear-gradient(180deg, rgba(210, 218, 234, .9), rgba(236, 240, 247, .5));
  border-radius: 0 0 2cqw 2cqw;
  clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%);
}

.face__g { width: 36cqw; height: 36cqw; }
.face__title {
  margin-top: 9cqw;
  font: 600 8.4cqw/1 "Open Sans", Arial, sans-serif; color: #1a1a1a; letter-spacing: -.01em; white-space: nowrap;
}
.face__stars { display: flex; gap: 3cqw; margin-top: 6cqw; }
.face__stars svg { width: 8cqw; height: 8cqw; fill: #E7B53A; }
.face__tap { margin-top: 7cqw; font: 700 6.4cqw/1 "Open Sans", Arial, sans-serif; color: #1a1a1a; }
.face__icon { width: 34cqw; height: 25cqw; margin-top: 5cqw; color: #1a1a1a; }
.face__brand {
  margin-top: auto;
  display: flex; align-items: center; gap: 2cqw;
  font: 400 6cqw/1 Arial, Helvetica, sans-serif; color: var(--ink-soft);
}
.face__brand svg { width: 13cqw; height: 9.6cqw; fill: var(--ink); }

/* Tafel Blau */
.product--square .face {
  aspect-ratio: 1 / 1.02;
  display: flex; flex-direction: column;
  overflow: hidden;
  background: #fff;
  border-radius: 4cqw;
  box-shadow: 0 3cqw 6cqw -3cqw rgba(20, 26, 74, .45), 0 .5cqw 1cqw rgba(20, 26, 74, .1);
}
.face__top {
  position: relative;
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 6cqw;
  padding: 10cqw 7cqw 16cqw;
  background: #3B6CC0; color: #fff;
}
.face__gbadge {
  display: grid; place-items: center;
  width: 30cqw; height: 30cqw; border-radius: 50%; background: #fff;
}
.face__gbadge svg { width: 20cqw; height: 20cqw; }
.face__top-text { text-align: center; }
.face__top-text .face__l1 { display: block; font: 600 6.4cqw/1.1 "Open Sans", Arial, sans-serif; }
.face__top-text .face__l2 { display: block; font: 700 11cqw/1.05 "Open Sans", Arial, sans-serif; }
.face__top-text .face__stars { justify-content: center; gap: 2.4cqw; margin-top: 4cqw; }
.face__top-text .face__stars svg { width: 6.4cqw; height: 6.4cqw; fill: #F6B51E; }
.face__wave { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 12cqw; }
.face__bottom {
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
  padding: 2cqw 6cqw 5cqw;
}
.face__bottom .face__tap { margin-top: 0; font-size: 5.4cqw; }
.face__bottom .face__icon { width: 30cqw; height: 22cqw; margin-top: 3cqw; }
.face__bottom .face__brand { font-size: 5.2cqw; }
.face__bottom .face__brand svg { width: 11cqw; height: 8cqw; }

/* ---------- Abschnitte ---------- */

.section { padding: clamp(72px, 10vw, 128px) 0; }
.section--tint { background: var(--tint); }
.section--ink { background: var(--ink); color: #D6DBF0; }

.section-title {
  font-weight: 800;
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  letter-spacing: -.03em;
  line-height: 1;
}
.section-title--light { color: #fff; }
.section-lead { margin-top: 16px; max-width: 52ch; color: var(--slate); font-size: 1.125rem; }

/* So geht's – die Welle der blauen Tafel als Übergang */
.how { position: relative; margin-top: clamp(16px, 4vw, 40px); }
.wave { display: block; width: 100%; height: clamp(60px, 9vw, 120px); }
.wave__band { fill: var(--blue-band); }
.wave__fill { fill: var(--blue); }
.how__body { background: var(--blue); color: #E6EEFB; padding: 24px 0 clamp(72px, 9vw, 112px); margin-top: -1px; }

.steps {
  list-style: none; padding: 0; margin: 48px 0 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 3vw, 32px);
}
.step {
  position: relative;
  padding: 28px 24px 28px;
  border-top: 2px solid rgba(255, 255, 255, .35);
}
.step__num {
  display: block;
  font: 800 3.4rem/1 var(--f-display); color: var(--gold);
  letter-spacing: -.04em;
}
.step__title { margin-top: 16px; font-size: 1.5rem; font-weight: 700; color: #fff; letter-spacing: -.015em; }
.step p { margin-top: 8px; max-width: 30ch; }
.how__note {
  margin-top: 40px; padding: 18px 22px;
  background: rgba(20, 26, 74, .22); border-radius: var(--radius);
  max-width: 64ch;
}
.how__note strong { color: #fff; }

@media (max-width: 760px) {
  .steps { grid-template-columns: 1fr; margin-top: 32px; }
  .step { padding: 22px 0 8px; display: grid; grid-template-columns: 64px 1fr; column-gap: 8px; }
  .step__num { grid-row: span 2; font-size: 2.8rem; }
  .step__title { margin-top: 2px; }
}

/* Produkte */
.products { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 3vw, 32px); margin-top: 48px; }
.card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--mist); border-radius: 22px; overflow: hidden;
}
.card__stage {
  display: grid; place-items: center;
  padding: 32px 24px;
  height: clamp(320px, 34vw, 420px);
}
.card__stage--light { background: radial-gradient(120% 90% at 50% 30%, #FFFFFF 0%, #E8EDF6 100%); }
.card__stage--blue { background: radial-gradient(120% 90% at 50% 30%, #F2F6FD 0%, #D5E1F4 100%); }
.card__stage .product--stand { width: min(210px, 56%); transform: rotate(-2deg); }
.card__stage .product--square { width: min(250px, 66%); transform: rotate(2deg); }
.card__body { display: flex; flex-direction: column; gap: 14px; padding: 28px; flex: 1; }
.card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.card__title { font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; }
.card__price { font: 700 1.375rem/1 var(--f-display); color: var(--ink); white-space: nowrap; }
.card__body > .btn { margin-top: auto; }

.tags { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0 0 8px; }
.tags li {
  font: 500 .7rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em;
  padding: 7px 9px; border-radius: 6px; background: var(--tint); color: var(--slate);
}

.tiers-box {
  display: grid; grid-template-columns: minmax(200px, 1fr) 2.4fr; gap: 24px 40px; align-items: center;
  margin-top: clamp(16px, 3vw, 32px); padding: 28px;
  border-radius: 22px; background: var(--ink); color: #C9D0EC;
}
.tiers-box__title { font-size: 1.5rem; font-weight: 800; letter-spacing: -.02em; color: #fff; margin-bottom: 6px; }
.tiers-box__intro p { font-size: .9375rem; line-height: 1.5; }
.tiers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.tier {
  position: relative;
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 16px 14px; border-radius: 14px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
}
.tier__range { font: 500 .75rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; color: #AEB7DC; }
.tier__price { margin-top: 6px; font: 800 1.5rem/1 var(--f-display); color: #fff; letter-spacing: -.02em; }
.tier__unit { font-size: .8125rem; }
.tier__save {
  position: absolute; top: 12px; right: 12px;
  padding: 3px 7px; border-radius: 999px;
  background: var(--gold); color: var(--ink); font: 700 .75rem/1.2 var(--f-body);
}
.tier:last-child { border-color: var(--gold); }
.tiers-box__ship {
  grid-column: 1 / -1;
  padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .875rem; line-height: 1.5;
}
.tiers-box__ship strong { color: #fff; font-weight: 600; }

@media (max-width: 960px) {
  .tiers-box { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .tiers { grid-template-columns: 1fr 1fr; }
  .tiers-box { padding: 22px 16px; }
}

@media (max-width: 760px) {
  .products { grid-template-columns: 1fr; }
  .card__stage { height: 340px; }
}

/* ---------- Formulare ---------- */

.order {
  display: grid; grid-template-columns: 1fr 360px; gap: clamp(20px, 3vw, 40px);
  align-items: start; margin-top: 40px;
}
.order__main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

.fs {
  margin: 0; padding: 24px; min-width: 0;
  border: 1px solid var(--mist); border-radius: 18px; background: #fff;
  display: flex; flex-direction: column; gap: 16px;
}
.fs__legend {
  float: left; width: 100%; margin-bottom: 4px; padding: 0;
  font: 700 1.25rem/1.2 var(--f-display); color: var(--ink); letter-spacing: -.01em;
}
.fs__legend + * { clear: both; }

.qty-row {
  display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 14px;
  padding: 12px 0; border-top: 1px solid var(--tint);
}
.qty-row:first-of-type { border-top: 0; }
.qty-row__swatch { width: 28px; height: 36px; border-radius: 5px; box-shadow: 0 2px 6px rgba(20, 26, 74, .18); }
.qty-row__swatch--stand { background: linear-gradient(160deg, #fff, #E8ECF3); border: 1px solid var(--mist); }
.qty-row__swatch--square { height: 28px; background: linear-gradient(180deg, #3B6CC0 55%, #fff 55%); }
.qty-row__name { font-weight: 600; color: var(--ink); }
.qty-row__name small { display: block; font-weight: 400; color: var(--slate); font-size: .875rem; }

.stepper { display: inline-flex; align-items: center; border: 1px solid var(--mist); border-radius: 999px; overflow: hidden; }
.stepper__btn {
  width: 44px; height: 44px; border: 0; background: #fff; cursor: pointer;
  font: 500 1.25rem/1 var(--f-body); color: var(--ink);
}
.stepper__btn:hover { background: var(--tint); }
.stepper__input {
  width: 44px; height: 44px; border: 0; text-align: center;
  font: 700 1rem/1 var(--f-body); color: var(--ink); background: #fff;
  -moz-appearance: textfield;
}
.stepper__input::-webkit-outer-spin-button,
.stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-weight: 600; font-size: .9375rem; color: var(--ink); }
.opt { font-weight: 400; color: var(--slate); font-size: .8125rem; margin-left: 4px; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  font: 400 1rem/1.4 var(--f-body); color: var(--ink);
  background: var(--paper); border: 1.5px solid var(--mist); border-radius: 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(58, 107, 196, .16);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #C23A3A; }
.field__hint { font-size: .8125rem; color: var(--slate); line-height: 1.45; }
.field__error { font-size: .8125rem; color: #B42F2F; font-weight: 500; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: 1fr 2fr 1.4fr; gap: 16px; }

.summary {
  position: sticky; top: 88px;
  display: flex; flex-direction: column; gap: 16px;
  padding: 24px; border-radius: 18px;
  background: #fff; border: 1px solid var(--mist); box-shadow: var(--shadow-lift);
}
.summary__title { font-size: 1.25rem; font-weight: 700; }
.summary__lines { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.summary__lines li { display: flex; justify-content: space-between; gap: 12px; font-size: .9375rem; }
.summary__empty { color: var(--slate); }
.summary__lines .summary__discount { color: #1C7A45; font-weight: 600; }
.summary__lines .summary__note { display: block; font-size: .8125rem; color: var(--slate); }
.summary__lines .summary__nudge {
  display: block; margin-top: 4px; padding: 10px 12px; border-radius: 10px;
  background: #FFF6E0; color: #7A5300; font-size: .8125rem; line-height: 1.4;
}
.summary__total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 14px; border-top: 1px dashed var(--mist);
}
.summary__total strong { font: 800 1.75rem/1 var(--f-display); color: var(--ink); }
.summary__fine { font-size: .8125rem; color: var(--slate); margin-top: -8px; }
.summary__legal { font-size: .8125rem; line-height: 1.45; color: var(--slate); }
.summary__legal a { color: var(--ink); }

.check { display: flex; gap: 10px; align-items: flex-start; font-size: .8125rem; line-height: 1.45; color: var(--slate); cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--ink); }

.form-status { font-size: .9375rem; font-weight: 500; color: var(--ink); }
.form-status:empty { display: none; }
.form-status.is-error { color: #B42F2F; }
.form-status.is-ok { padding: 12px 14px; border-radius: 10px; background: #E7F5EC; color: #1C5B34; }

@media (max-width: 960px) {
  .order { grid-template-columns: 1fr; }
  .summary { position: static; }
}
@media (max-width: 560px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .fs { padding: 20px 16px; }
  .qty-row { grid-template-columns: 28px 1fr; }
  .qty-row .stepper { grid-column: 2; justify-self: start; }
}

/* ---------- FAQ ---------- */

.faq { margin-top: 40px; border-top: 1px solid var(--mist); }
.faq details { border-bottom: 1px solid var(--mist); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  padding: 22px 0; cursor: pointer; list-style: none;
  font: 700 1.1875rem/1.3 var(--f-display); color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 22px; height: 22px;
  background:
    linear-gradient(var(--ink), var(--ink)) center / 14px 2px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 2px 14px no-repeat;
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 40px 24px 0; color: var(--slate); max-width: 62ch; }

/* ---------- Kontakt ---------- */

.contact { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.contact__text { margin-top: 20px; max-width: 36ch; font-size: 1.125rem; }
.contact__mail {
  display: inline-block; margin-top: 32px;
  font: 700 clamp(1.5rem, 3vw, 2.25rem)/1.1 var(--f-display); color: var(--gold);
  text-decoration: none; letter-spacing: -.02em;
  border-bottom: 2px solid rgba(244, 179, 36, .4);
  overflow-wrap: anywhere;
}
.contact__mail:hover { border-bottom-color: var(--gold); }
.contact__form { display: flex; flex-direction: column; gap: 18px; }
.contact__form .btn { align-self: flex-start; }

.field--dark label { color: #fff; }
.field--dark input, .field--dark textarea {
  background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18); color: #fff;
}
.field--dark input:focus, .field--dark textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(244, 179, 36, .2); }
.field--dark .field__error, .section--ink .field__error { color: #FF9C8F; }
.check--dark { color: #B7BEDD; }
.check--dark a { color: #fff; }
.check--dark input { accent-color: var(--gold); }
.form-status--dark { color: #fff; }
.form-status--dark.is-ok { background: rgba(255, 255, 255, .1); color: #fff; }

@media (max-width: 860px) {
  .contact { grid-template-columns: 1fr; }
}

/* ---------- Footer ---------- */

.footer { padding: 40px 0 48px; background: var(--paper); border-top: 1px solid var(--mist); }
.footer__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.footer__links { display: flex; gap: 24px; margin-left: auto; }
.footer__links a { font-size: .9375rem; color: var(--slate); text-decoration: none; }
.footer__links a:hover { color: var(--ink); text-decoration: underline; }
.footer__fine { flex-basis: 100%; font-size: .8125rem; color: var(--slate); }

/* ---------- 404 und Rechtstexte ---------- */

.notfound {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 24px; text-align: center;
}
.notfound__code { font: 900 clamp(5rem, 18vw, 9rem)/1 var(--f-display); color: var(--gold); letter-spacing: -.04em; }
.notfound__title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 800; }
.notfound__en { color: var(--slate); margin-bottom: 16px; }

.legal { padding: clamp(48px, 8vw, 96px) 0; }
.legal h1 { font-size: clamp(2.25rem, 5vw, 3.25rem); font-weight: 800; letter-spacing: -.03em; margin-bottom: 32px; }
.legal h2 { font-size: 1.375rem; font-weight: 700; margin: 40px 0 10px; letter-spacing: -.01em; }
.legal h3 { font-size: 1.0625rem; font-weight: 700; margin: 24px 0 6px; }
.legal p, .legal ul { margin: 0 0 12px; max-width: 70ch; }
.legal ul { padding-left: 20px; }
.legal a { color: var(--blue); }
.legal__note { padding: 14px 16px; border-radius: 12px; background: var(--tint); font-size: .9375rem; }
.legal__back { display: inline-block; margin-top: 40px; font-weight: 600; color: var(--ink); }

/* ---------- Bewegung reduzieren ---------- */

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