/* OrderOnline Marketingseite — Design-System
   Szene: frisch gedruckter Bon an der Theke eines guten Imbisses.
   Farbstrategie: Committed — ein tiefes Rote-Bete-Rot auf reinem Weiß.
   Schrift: Bricolage Grotesque (variabel), Spline Sans Mono nur für Bons/Zahlen.

   Bewegung: sparsam und begründet. Jede Animation hat eine Aufgabe —
   Orientierung (Navigationsmarke), Rückmeldung (Knöpfe, Rechner) oder
   Blicklenkung auf Veränderung (Zahlen, wartende Anfrage). Alles läuft über
   transform/opacity und schaltet sich bei `prefers-reduced-motion` ab. */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("../fonts/bricolage-grotesque-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Spline Sans Mono";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/spline-sans-mono-latin.woff2") format("woff2");
}

:root {
  --brand: oklch(0.445 0.168 352);
  --brand-deep: oklch(0.355 0.14 352);
  --brand-bright: oklch(0.72 0.155 352);
  --brand-tint: oklch(0.955 0.02 352);
  --bg: #ffffff;
  --ink: oklch(0.235 0.02 348);
  --ink-soft: oklch(0.42 0.018 348);
  --line: oklch(0.9 0.008 348);
  --line-strong: oklch(0.78 0.012 348);
  /* Grenzen von Bedienelementen brauchen 3:1 gegen Weiß (WCAG 1.4.11).
     --line-strong schafft nur 2,0:1 und bleibt deshalb den Zierlinien
     (Bon-Abriss, gestrichelte Kästen) vorbehalten. */
  --line-control: oklch(0.665 0.012 348);
  /* Fehlerton für Formularmeldungen. Deutlich orangeroter als die Marke
     (Farbton 27 statt 352): ein Fehler, der aussieht wie die Markenfarbe,
     liest sich als Verzierung. Farbe trägt die Meldung nie allein — es gibt
     Text, geänderte Feldgrenze und `aria-invalid` dazu. */
  --fehler: oklch(0.45 0.19 27);
  --dark: oklch(0.215 0.014 348);
  --dark-2: oklch(0.265 0.016 348);
  --on-dark: oklch(0.945 0.006 348);
  --on-dark-soft: oklch(0.78 0.01 348);
  /* Statusfarben — nur innerhalb von Produktdarstellungen */
  --status-new: oklch(0.78 0.14 80);
  --status-ready: oklch(0.62 0.14 150);

  --font-sans: "Bricolage Grotesque", system-ui, sans-serif;
  --font-mono: "Spline Sans Mono", ui-monospace, monospace;

  --container: 72rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --space-section: clamp(4rem, 2.8rem + 5.5vw, 9.5rem);
  --radius: 0.75rem;
  --radius-lg: 1.25rem;

  --shadow-soft: 0 1px 2px oklch(0.235 0.02 348 / 0.06), 0 8px 28px oklch(0.235 0.02 348 / 0.09);
  --shadow-lift: 0 2px 4px oklch(0.235 0.02 348 / 0.08), 0 18px 50px oklch(0.235 0.02 348 / 0.16);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 320ms;
  --dur-fast: 160ms;
  --stagger: 70ms;

  /* z-Skala */
  --z-header: 40;
  --z-skip: 100;
}

/* ---------- Basis ---------- */

* { box-sizing: border-box; margin: 0; padding: 0; }

fieldset { border: 0; min-width: 0; }
legend { padding: 0; }

[id] { scroll-margin-top: 5.5rem; }

html { scroll-behavior: smooth; color-scheme: light; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 420;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--brand); text-underline-offset: 3px; }
a:hover { color: var(--brand-deep); }

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

::selection { background: var(--brand); color: #fff; }

h1, h2, h3 { text-wrap: balance; line-height: 1.06; letter-spacing: -0.022em; }
p { text-wrap: pretty; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Einfahrt über `translate` statt `top`: keine Layoutberechnung im Übergang. */
.skip-link {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: var(--z-skip);
  background: var(--ink);
  color: #fff;
  padding: 0.7rem 1.1rem;
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  translate: 0 -6rem;
  transition: translate 160ms var(--ease-out);
}
.skip-link:focus-visible { translate: 0 0; color: #fff; }

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Kopfzeile ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out),
    background-color 220ms var(--ease-out);
}
/* Beim Scrollen bekommt die Leiste Kante und Schatten — das Layout bleibt
   unberührt. Bewusst deckend: Eine durchscheinende Leiste nimmt über der
   dunklen Funktionen-Sektion die Farbe des Speisefotos an und wirkt schmutzig. */
.site-header.is-stuck {
  border-bottom-color: var(--line);
  box-shadow: 0 1px 0 oklch(0.235 0.02 348 / 0.02), 0 6px 24px oklch(0.235 0.02 348 / 0.06);
}
.site-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.25rem;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--ink);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.02em;
  /* Trefferfläche auf Fingergröße; die Leistenhöhe bleibt unverändert. */
  padding-block: 0.45rem;
}
.wordmark svg { display: block; }

.site-nav { display: flex; align-items: center; gap: clamp(0.9rem, 2.5vw, 1.9rem); }
.site-nav__links {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2.5vw, 1.9rem);
}
.site-nav__link {
  color: var(--ink);
  text-decoration: none;
  font-weight: 550;
  font-size: 0.98rem;
  /* Trefferfläche auf Fingergröße, ohne die Zeilenhöhe der Leiste zu ändern. */
  padding-block: 0.62rem;
  transition: color var(--dur-fast) var(--ease-out);
}
.site-nav__link:hover { color: var(--brand); }
.site-nav__link[aria-current="location"] { color: var(--brand); }

/* Laufende Marke: zeigt, in welchem Abschnitt man gerade liest.
   Breite über scaleX, damit nur der Compositor arbeitet. */
.site-nav__marker {
  position: absolute;
  left: 0;
  bottom: -0.45rem;
  width: 1px;
  height: 2px;
  border-radius: 2px;
  background: var(--brand);
  transform-origin: left center;
  transform: translateX(var(--marker-x, 0px)) scaleX(var(--marker-w, 0));
  opacity: var(--marker-o, 0);
  pointer-events: none;
  transition: transform 380ms var(--ease-out), opacity 220ms var(--ease-out);
}

@media (max-width: 44em) {
  .site-nav__links { display: none; }
}

/* ---------- Schaltflächen ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 3.1rem;
  padding: 0.75rem 1.5rem;
  border-radius: calc(var(--radius) + 2px);
  border: 1px solid transparent;
  font: inherit;
  font-weight: 650;
  font-size: 1.02rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
    translate var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.btn--sm {
  min-height: 2.75rem;
  padding: 0.55rem 1.1rem;
  font-size: 0.95rem;
}

.btn--primary {
  background: var(--brand);
  color: #fff;
  /* Gedeckter Schatten statt farbigem Schein: Ein rosa Leuchten unter einem
     rosa Knopf ist Baukasten-Anmutung. */
  box-shadow: 0 1px 2px oklch(0.235 0.02 348 / 0.22), 0 6px 16px oklch(0.235 0.02 348 / 0.14);
}
.btn--primary:hover { background: var(--brand-deep); color: #fff; }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-control);
}
.btn--ghost:hover { border-color: var(--ink); color: var(--ink); }

.btn--on-dark {
  background: #fff;
  color: var(--brand-deep);
}
.btn--on-dark:hover { background: var(--brand-tint); color: var(--brand-deep); }

/* Anfassen und Loslassen: minimaler Hub beim Zeigen, Druck beim Klick. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn--primary:hover {
    translate: 0 -1px;
    box-shadow: 0 2px 4px oklch(0.235 0.02 348 / 0.24), 0 12px 26px oklch(0.235 0.02 348 / 0.2);
  }
  .btn--on-dark:hover { translate: 0 -1px; }
}
.btn:active { translate: 0 1px; }

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

.hero { padding-block: clamp(2.5rem, 2rem + 4vw, 6rem) clamp(3.5rem, 2.5rem + 5vw, 7rem); overflow: clip; }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.14fr) minmax(0, 0.86fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 56em) {
  .hero__grid { grid-template-columns: 1fr; }
}

.hero h1 {
  font-size: clamp(2.15rem, 1.5rem + 2.9vw, 3.4rem);
  font-weight: 790;
  line-height: 1.05;
  max-width: 13em;
}
.hero h1 .h1-accent { color: var(--brand); display: block; }

.hero__lead {
  margin-top: 1.4rem;
  font-size: clamp(1.12rem, 1.02rem + 0.5vw, 1.3rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 34em;
}
.hero__lead strong { color: var(--ink); font-weight: 600; }

.hero__cta {
  margin-top: 2.1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: center;
}

.hero__facts {
  margin-top: 2.2rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  font-size: 0.94rem;
  font-weight: 550;
  color: var(--ink-soft);
}
.hero__facts li { display: inline-flex; align-items: center; gap: 0.45rem; }
.hero__facts .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand);
  flex: none;
}

/* Telefonrahmen mit echtem Screenshot */
.hero__visual { position: relative; display: grid; justify-items: center; }
.phone {
  width: min(19.5rem, 78vw);
  border-radius: 2.4rem;
  background: var(--dark);
  padding: 0.55rem;
  box-shadow: var(--shadow-lift);
  position: relative;
}
.phone--sm { width: min(16.5rem, 72vw); }
.phone__screen {
  border-radius: 1.9rem;
  overflow: hidden;
  background: #f6f3ee;
}
.phone__screen--crop { aspect-ratio: 390 / 720; }
.phone__screen--crop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.hero__visual .bon-mini {
  position: absolute;
  right: max(-0.5rem, -3vw);
  bottom: -1.6rem;
  rotate: 2.5deg;
}
@media (max-width: 56em) {
  .hero__visual { margin-top: 0.5rem; }
  .hero__visual .bon-mini { right: 4vw; }
}

/* ---------- Sektionen ---------- */

.section { padding-block: var(--space-section); }
.section--tight { padding-block: calc(var(--space-section) * 0.72); }
/* Papierton statt Weiß — bricht die lange helle Strecke der unteren Seitenhälfte,
   ohne eine zweite Farbe einzuführen. */
.section--getoent {
  background: oklch(0.985 0.007 352);
  border-block: 1px solid oklch(0.945 0.012 352);
}

.section-head { max-width: 46em; }
.section-head h2 {
  font-size: clamp(1.95rem, 1.4rem + 2.4vw, 3.1rem);
  font-weight: 760;
}
.section-head .section-intro {
  margin-top: 1.1rem;
  font-size: clamp(1.05rem, 1rem + 0.35vw, 1.2rem);
  color: var(--ink-soft);
  line-height: 1.6;
}
.section-head .section-intro strong { color: var(--ink); font-weight: 600; }

/* ---------- Bon (Signatur-Motiv) ---------- */

.bon {
  --bon-paper: #fff;
  font-family: var(--font-mono);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bon-paper);
  width: min(26rem, 100%);
  padding: 1.6rem 1.5rem 2rem;
  position: relative;
  box-shadow: var(--shadow-lift);
  border-radius: 3px 3px 0 0;
}
.bon::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -8px;
  height: 8px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8'%3E%3Cpath d='M0 0h14L7 8Z' fill='%23fff'/%3E%3C/svg%3E") repeat-x;
  background-size: 14px 8px;
}
.bon--schmal { width: min(19rem, 100%); }
/* Neigung über `rotate`, damit die Druck-Animation `translate` frei nutzen kann. */
.bon--tilt { rotate: -0.6deg; }
@media (max-width: 40em) {
  .bon--tilt { rotate: none; }
}

.bon__head {
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.bon__title {
  text-align: center;
  font-weight: 700;
  font-size: 1.05rem;
  margin-top: 0.2rem;
}
.bon hr {
  border: 0;
  border-top: 1.5px dashed var(--line-strong);
  margin: 0.9rem 0;
}
.bon__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-variant-numeric: tabular-nums;
}
.bon__row dt { color: var(--ink-soft); flex: 1 1 auto; min-width: 0; }
.bon__row dd { font-weight: 600; text-align: right; flex: 0 0 auto; max-width: 55%; }
.bon__row--big {
  font-size: 1.28rem;
  font-weight: 700;
  align-items: baseline;
}
.bon__row--big dd { color: var(--brand); font-weight: 700; }
.bon__note {
  margin-top: 0.9rem;
  font-size: 0.8rem;
  color: var(--ink-soft);
  line-height: 1.55;
}
.bon__stamp {
  margin-top: 1rem;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand);
  border: 2px solid currentColor;
  border-radius: 4px;
  padding: 0.35rem 0.6rem;
  rotate: -1.2deg;
  display: inline-block;
}
/* `display: inline-block` würde das UA-`[hidden] { display: none }` schlagen —
   der Stempel verschwindet sonst nicht, wenn der Wechsel sich nicht lohnt. */
.bon__stamp[hidden] { display: none; }
.bon__stamp-wrap { text-align: center; }

.bon-mini {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.45;
  background: #fff;
  color: var(--ink);
  width: 11.5rem;
  padding: 0.85rem 0.9rem 1rem;
  box-shadow: var(--shadow-soft);
  border-radius: 2px 2px 0 0;
  position: relative;
}
.bon-mini::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -6px;
  height: 6px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='6'%3E%3Cpath d='M0 0h11L5.5 6Z' fill='%23fff'/%3E%3C/svg%3E") repeat-x;
  background-size: 11px 6px;
}
.bon-mini__line { display: flex; justify-content: space-between; gap: 0.5rem; }
.bon-mini__line strong { font-weight: 700; }
.bon-mini__accent { color: var(--brand); font-weight: 700; }

/* ---------- Rechner ---------- */

.rechner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  margin-top: clamp(2.2rem, 2rem + 2vw, 3.6rem);
}
@media (max-width: 56em) {
  .rechner { grid-template-columns: 1fr; }
}

.rechner__form { display: grid; gap: 1.9rem; }

.field label,
.field .field__label {
  display: block;
  font-weight: 650;
  margin-bottom: 0.55rem;
}
.field__hint { font-size: 0.9rem; color: var(--ink-soft); font-weight: 420; }

.money-input {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border: 1.5px solid var(--line-control);
  border-radius: var(--radius);
  padding: 0.15rem 1rem;
  background: #fff;
  max-width: 15rem;
  transition: border-color 140ms var(--ease-out), box-shadow 140ms var(--ease-out);
}
/* Das innere Feld unterdrückt seinen eigenen Umriss, damit der Rahmen sauber
   bleibt — der Fokus muss deshalb hier sichtbar werden, und zwar genauso
   deutlich wie überall sonst auf der Seite. */
.money-input:focus-within {
  border-color: var(--brand);
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}
.money-input input {
  border: 0;
  outline: none;
  font: inherit;
  font-family: var(--font-mono);
  font-size: 1.35rem;
  font-weight: 600;
  width: 100%;
  min-height: 2.9rem;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  background: transparent;
}
.money-input .unit { font-weight: 600; color: var(--ink-soft); }

input[type="range"] {
  width: 100%;
  max-width: 26rem;
  accent-color: var(--brand);
  margin-top: 0.55rem;
  /* 44 px Greiffläche — die Spur bleibt optisch schmal. */
  height: 2.75rem;
}

.seg {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.seg > input { position: absolute; opacity: 0; pointer-events: none; }
.seg label {
  display: inline-flex;
  flex-direction: column;
  gap: 0.1rem;
  border: 1.5px solid var(--line-control);
  border-radius: var(--radius);
  padding: 0.6rem 1rem;
  cursor: pointer;
  font-weight: 650;
  margin: 0;
  min-height: 3rem;
  justify-content: center;
  transition: border-color 140ms var(--ease-out), background-color 140ms var(--ease-out),
    translate 140ms var(--ease-out);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .seg > input:not(:checked) + label:hover { border-color: var(--ink-soft); translate: 0 -1px; }
}
.seg label small { font-weight: 480; font-size: 0.82rem; color: var(--ink-soft); }
.seg label small input {
  font: inherit;
  font-family: var(--font-mono);
  font-weight: 600;
  color: var(--ink);
  width: 3ch;
  min-height: 1.75rem;
  border: 0;
  border-bottom: 2px solid var(--line-control);
  border-radius: 0;
  background: transparent;
  text-align: center;
  outline: none;
}
.seg label small input:focus-visible {
  border-bottom-color: var(--brand);
  outline: 3px solid var(--brand);
  outline-offset: 3px;
}
.seg > input:checked + label {
  border-color: var(--brand);
  background: var(--brand-tint);
}
.seg > input:focus-visible + label {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}

.rechner__quelle {
  font-size: 0.85rem;
  color: var(--ink-soft);
  max-width: 30em;
  line-height: 1.55;
}
.rechner__quelle a { color: inherit; }

.rechner__ausgabe { display: grid; justify-items: center; gap: 1.6rem; }
@media (min-width: 56em) {
  .rechner__ausgabe { position: sticky; top: 6rem; }
}
.rechner__cta { text-align: center; }

/* ---------- Pakete ----------
   Kein Karten-Raster: zwei Spalten unter je einer Linie, parallel aufgebaut
   (Name, Preis, gleich lange Liste, Entscheidungssatz). Die durchgezogene
   Akzentlinie markiert das größere Paket, ohne es in einen Kasten zu sperren.
   Der gleiche Aufbau links wie rechts ist der Punkt: Nur so lässt sich
   zeilenweise vergleichen, statt Fließtext gegen Aufzählung zu lesen. */

.pakete-block { margin-top: clamp(3rem, 2.4rem + 3vw, 5rem); }
.pakete__titel {
  font-size: clamp(1.35rem, 1.15rem + 0.9vw, 1.75rem);
  font-weight: 720;
}
.pakete {
  margin-top: clamp(1.6rem, 1.3rem + 1.5vw, 2.4rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.8rem, 3vw, 3.5rem);
  /* Bewusst kein `align-items: start`: Beide Spalten müssen gleich hoch sein,
     damit die Entscheidungssätze unten auf einer Linie stehen. */
  padding-bottom: clamp(1.6rem, 1.4rem + 1vw, 2.2rem);
  border-bottom: 1px solid var(--line);
}
@media (min-width: 46em) {
  .pakete { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.paket {
  padding-top: 1.2rem;
  border-top: 1.5px dashed var(--line-strong);
  display: flex;
  flex-direction: column;
}
.paket--pro {
  border-top-style: solid;
  border-top-color: var(--brand);
}
.paket__name {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--brand);
  line-height: 1.4;
}
.paket__preis {
  font-family: var(--font-mono);
  margin-top: 0.35rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.paket__preis strong {
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-right: 0.3rem;
}
.paket__einrichtung {
  font-family: var(--font-mono);
  margin-top: 0.3rem;
  font-size: 0.86rem;
  color: var(--ink-soft);
}

/* ---------- Info-Hinweis ----------
   Erscheint bei Zeigen, Tastaturfokus und Antippen. Der Text hängt zusätzlich
   über `aria-describedby` am Knopf, wird also auch vorgelesen, wenn die Blase
   gar nicht sichtbar wird. Ohne JavaScript bleiben Hover und Fokus. */

.info {
  position: relative;
  display: inline-flex;
  /* Optisch auf die Textmitte der Mono-Zeile gemessen (-0.35em saß 2,3 px zu tief). */
  vertical-align: -0.18em;
  margin-left: 0.15rem;
}
.info__knopf {
  position: relative;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--brand);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
/* Unsichtbare Trefferfläche auf 44 px — die Optik bleibt bei 24 px. */
.info__knopf::after {
  content: "";
  position: absolute;
  inset: -10px;
}
.info__knopf:hover { background: var(--brand-tint); color: var(--brand-deep); }
.info__blase {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  z-index: 5;
  width: max-content;
  max-width: min(16rem, 62vw);
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius);
  background: var(--ink);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 450;
  line-height: 1.45;
  letter-spacing: normal;
  text-transform: none;
  box-shadow: var(--shadow-soft);
  opacity: 0;
  visibility: hidden;
  translate: -50% 4px;
  transition: opacity 160ms var(--ease-out), translate 160ms var(--ease-out),
    visibility 160ms var(--ease-out);
}
.info__blase::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border: 5px solid transparent;
  border-bottom-color: var(--ink);
}
/* `:focus-within` deckt die Tastatur ab, `:hover` auf dem Wrapper hält die
   Blase offen, während der Zeiger auf sie wandert (WCAG 1.4.13). */
.info:hover .info__blase,
.info:focus-within .info__blase,
.info.is-offen .info__blase {
  opacity: 1;
  visibility: visible;
  translate: -50% 0;
}

/* Auf schmalen Schirmen endet die zentrierte Blase sonst haarscharf an der
   Bildschirmkante — dort rechtsbündig am Knopf ausrichten, Pfeil wandert mit. */
@media (max-width: 30em) {
  .info__blase {
    left: auto;
    right: -0.5rem;
    translate: 0 4px;
  }
  .info__blase::before {
    left: auto;
    right: 0.85rem;
    margin-left: 0;
  }
  .info:hover .info__blase,
  .info:focus-within .info__blase,
  .info.is-offen .info__blase {
    translate: 0 0;
  }
}
.paket__was {
  margin-top: 1.05rem;
  font-size: 0.86rem;
  font-weight: 650;
  color: var(--ink);
}
/* Einschränkung direkt am Listenpunkt, den sie betrifft — der Drucker ist
   Hardware und wird nicht mitgeliefert. */
.paket__zusatz {
  display: block;
  font-size: 0.86rem;
  color: var(--ink-soft);
}
.paket__liste {
  margin-top: 0.5rem;
  /* Mindestabstand zum Entscheidungssatz; `margin-top: auto` dort legt bei
     ungleich langen Listen nur noch den Rest oben drauf. */
  margin-bottom: 1.3rem;
  padding-left: 1.15rem;
  display: grid;
  gap: 0.3rem;
  color: var(--ink-soft);
  font-size: 0.99rem;
}
.paket__liste li::marker { color: var(--brand); }
/* Der Entscheidungssatz sitzt unten bündig, auch wenn die Listen einmal
   unterschiedlich lang werden. */
.paket__fuer {
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
  font-size: 0.94rem;
  font-weight: 550;
  color: var(--ink);
}
/* Das Zusatzmodul ist kein drittes Paket: ein Block über beide Spalten,
   innen zweispaltig, damit der Preis links und der Umfang rechts stehen
   und die Trennlinie des Rasters unter ihm weiterläuft. Liste und
   Entscheidungssatz behalten die Abstände der Paketkarten. */
.paket--modul {
  grid-column: 1 / -1;
  border-top-style: solid;
  border-top-color: var(--line-strong);
  display: grid;
  gap: 0.6rem clamp(1.8rem, 3vw, 3.5rem);
}
@media (min-width: 46em) {
  .paket--modul { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.pakete__fussnote {
  /* Die trennende Linie sitzt am Raster (`.pakete`), damit sie über die volle
     Spaltenbreite läuft und nicht an der Textbreite dieser Fußnote endet. */
  margin-top: 1.1rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 50em;
}
.pakete__fussnote strong { color: var(--ink); font-weight: 600; }

/* Markiert eine Funktion, die nur im größeren Paket steckt. */
.pro-marke {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dark);
  background: var(--brand-bright);
  border-radius: 3px;
  padding: 0.05rem 0.36rem;
  white-space: nowrap;
}

/* Druck-Animation: läuft nur bei einem echten Modellwechsel, nicht bei jedem
   Reglerschritt. Beim Ziehen übernimmt das Zählwerk der Zahlen die Rückmeldung. */
@keyframes bon-print {
  from { translate: 0 -7px; opacity: 0.55; }
  to { translate: 0 0; opacity: 1; }
}
.bon.is-printing { animation: bon-print 340ms var(--ease-out); }

/* ---------- Produkt (dunkle Sektion) ---------- */

.section--dark {
  background: var(--dark);
  color: var(--on-dark);
}
.section--dark .section-head h2 { color: #fff; }
.section--dark .section-head .section-intro { color: var(--on-dark-soft); }
.section--dark .section-head .section-intro strong { color: var(--on-dark); }

.surface {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.8rem, 4vw, 4rem);
  align-items: center;
  padding-block: clamp(1.8rem, 1.5rem + 2.5vw, 4rem);
}
.surface + .surface { border-top: 1px solid var(--dark-2); }
@media (max-width: 56em) {
  .surface { grid-template-columns: 1fr; }
  .surface__visual { order: -1; }
}
@media (min-width: 56em) {
  .surface:nth-of-type(odd) .surface__visual { order: -1; }
}

/* Muss `.surface p` (0,1,1) schlagen, sonst gewinnt dort `--on-dark-soft`
   und das Kanal-Label rendert grau — der Akzent, der die vier Blöcke
   gliedert, wäre tot. */
.surface p.surface__kanal {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-bright);
  font-weight: 600;
  margin-top: 0;
}
.surface h3 {
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem);
  font-weight: 720;
  color: #fff;
  margin-top: 0.5rem;
}
/* Nur der Einleitungsabsatz der Textspalte, nicht jedes `p` im Block:
   Sonst greift diese Regel (0,1,1) auch in den Bon der Telefon-Sektion und
   setzt dort hellgraue Schrift auf weißes Papier — gemessen 2,01:1. */
.surface > div > p { color: var(--on-dark-soft); margin-top: 0.8rem; max-width: 32em; }
.surface > div > p strong { color: var(--on-dark); font-weight: 600; }
/* Die Preiszeile des Zusatzmoduls trägt den einzigen Link in der dunklen
   Sektion; `--brand` (Seitenstandard für Links) käme auf `--dark` nicht
   über 3:1. Beim Rollout messen: --brand-bright auf --dark ≥ 4,5:1. */
.surface__preis a { color: var(--brand-bright); }
.surface__preis a:hover { color: #fff; }

.fakten {
  list-style: none;
  padding: 0;
  margin-top: 1.2rem;
  display: grid;
  gap: 0.6rem;
}
.fakten li {
  display: flex;
  gap: 0.65rem;
  align-items: baseline;
  color: var(--on-dark);
  font-size: 0.99rem;
}
.fakten .check {
  flex: none;
  transform: translateY(2px);
  color: var(--brand-bright);
}

.surface__visual { display: grid; justify-items: center; }

/* Typografische Darstellung ohne Screenshot (ehrlich statt Fake-UI) */
.op-panel {
  width: min(26rem, 100%);
  background: var(--dark-2);
  border: 1px solid oklch(0.34 0.02 348);
  border-radius: var(--radius-lg);
  padding: 1.4rem;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  color: var(--on-dark);
  display: grid;
  gap: 0.8rem;
}
.op-panel__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  padding: 0.75rem 0.9rem;
  background: var(--dark);
  border-radius: calc(var(--radius) - 2px);
}
.op-panel__row .t { font-weight: 600; }
.op-panel__row .z {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.op-panel__row .status-dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  position: relative;
}
.op-panel__row--new .status-dot { background: var(--status-new); }
.op-panel__row--new .z { color: var(--status-new); }
.op-panel__row--ready .status-dot { background: var(--status-ready); }
.op-panel__row--ready .z { color: var(--status-ready); }
.op-panel__row .lead-group {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}
.op-panel__caption {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  color: var(--on-dark-soft);
  text-align: center;
}

/* Der wartende Auftrag pulst — dasselbe Signal wie in der echten Betriebsansicht.
   Bewusst nur dort: In der Fahreransicht trägt dieselbe Zeile „Kein Empfang",
   und ein Puls hieße dort fälschlich „hier wartet etwas auf dich". */
@media (prefers-reduced-motion: no-preference) {
  .op-panel--betrieb .op-panel__row--new .status-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--status-new);
    animation: dot-puls 2.6s var(--ease-out) infinite;
  }
  @keyframes dot-puls {
    0% { transform: scale(1); opacity: 0.55; }
    70%, 100% { transform: scale(2.8); opacity: 0; }
  }
}

/* ---------- Technische Grundlagen ---------- */

/* Die Erklärung setzt den Rahmen, die rechte Spalte liefert die Belege.
   Keine vier gleichförmigen Karten: Der echte Produktausschnitt darf sichtbar
   wichtiger sein als die drei kurzen Aussagen darüber. */
.recht {
  display: grid;
  gap: clamp(2rem, 5vw, 5rem);
}
.recht__kopf h2 {
  max-width: 11em;
  font-size: clamp(1.95rem, 1.4rem + 2.4vw, 3.1rem);
  font-weight: 760;
}
.recht__kopf p {
  margin-top: 1.1rem;
  max-width: 31em;
  color: var(--ink-soft);
  font-size: clamp(1.02rem, 0.98rem + 0.25vw, 1.14rem);
}
@media (min-width: 58em) {
  .recht { grid-template-columns: minmax(15rem, 0.72fr) minmax(0, 1.28fr); }
}

.recht-liste { border-top: 1px solid var(--line-strong); }
.recht-punkt {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0 0.85rem;
  padding-block: clamp(1.25rem, 1rem + 1vw, 1.8rem);
  border-bottom: 1px solid var(--line);
}
.recht-punkt__marke {
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--brand);
  font-size: 0.9rem;
  font-weight: 760;
  line-height: 1;
  transform: translateY(-0.1rem);
}
.recht-punkt h3 { font-size: 1.18rem; font-weight: 720; }
.recht-punkt p {
  margin-top: 0.45rem;
  max-width: 41em;
  color: var(--ink-soft);
  font-size: 1rem;
}

.beweis {
  grid-column: 2;
  margin-top: 1.1rem;
  max-width: 24rem;
}
.beweis img {
  border-radius: var(--radius);
  box-shadow: 0 6px 14px oklch(0.235 0.02 348 / 0.12);
}
.beweis figcaption {
  margin-top: 0.65rem;
  color: var(--ink-soft);
  font-size: 0.86rem;
  line-height: 1.45;
}
@media (min-width: 42em) {
  .recht-punkt--beleg {
    grid-template-columns: 2rem minmax(12rem, 0.85fr) minmax(14rem, 1.15fr);
    column-gap: clamp(0.85rem, 2.5vw, 1.8rem);
  }
  .recht-punkt--beleg .beweis {
    grid-column: 3;
    grid-row: 1;
    margin-top: 0;
  }
}

/* ---------- Start (3 Schritte) ---------- */

.schritte {
  margin-top: clamp(2.2rem, 1.8rem + 2vw, 3.4rem);
  display: grid;
  gap: 0;
}
.schritt {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.4rem 1.6rem;
  padding-block: 1.7rem;
  border-top: 1px solid var(--line);
}
.schritt:last-child { border-bottom: 1px solid var(--line); }
.schritt__nr {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--brand);
  border: 2px solid var(--brand);
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-variant-numeric: tabular-nums;
}
.schritt h3 { font-size: 1.3rem; font-weight: 700; }
.schritt p { color: var(--ink-soft); margin-top: 0.4rem; max-width: 40em; }
.schritt p strong { color: var(--ink); font-weight: 600; }

/* ---------- Ehrlichkeit ---------- */

.ehrlich {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
  gap: clamp(1.8rem, 4vw, 3rem);
  margin-top: clamp(2rem, 1.6rem + 2vw, 3.2rem);
}
.ehrlich h3 {
  font-size: 1.2rem;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--brand);
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}
.ehrlich p { margin-top: 0.8rem; color: var(--ink-soft); }
.ehrlich p strong { color: var(--ink); font-weight: 600; }

/* ---------- Vergleich ----------
   Eine echte Tabelle, keine nachgebauten Spalten aus <div>s: Der Screenreader
   soll „Zeile Was jede Bestellung kostet, Spalte Mit OrderOnline“ ansagen
   können. Unter der Umbruchbreite bleibt sie deshalb eine Tabelle und wird
   nur horizontal scrollbar — Zeilen zu Karten umzubauen kostet genau diese
   Zuordnung. */

.vergleich { margin-top: clamp(2rem, 1.6rem + 2vw, 3.2rem); }

.vergleich__tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.98rem;
  text-align: left;
}
.vergleich__tabelle th,
.vergleich__tabelle td {
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.vergleich__tabelle thead th {
  font-size: 0.82rem;
  font-weight: 640;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}
.vergleich__tabelle tbody th {
  font-weight: 640;
  color: var(--ink);
  width: 22%;
  min-width: 11rem;
}
.vergleich__tabelle td { color: var(--ink-soft); }
.vergleich__tabelle strong { color: var(--ink); font-weight: 640; }

/* Die eigene Spalte trägt den Markenton als durchgehendes Band, damit beim
   Querlesen klar ist, welche Seite welche ist — ohne Häkchen und Kreuze,
   die zwei Zeilen weiter unten schlicht falsch wären. */
.vergleich__tabelle :is(th, td).vergleich__uns {
  background: var(--brand-tint);
  color: var(--ink);
}
.vergleich__tabelle thead th.vergleich__uns { color: var(--brand-deep); }
.vergleich__tabelle .vergleich__uns strong { color: var(--brand-deep); }

/* Die zwei Zeilen, die gegen uns ausgehen. Kein Warnrot: Sie sind Teil der
   Aussage, nicht ihre Störung. */
.vergleich__gegen th[scope="row"] { color: var(--ink-soft); }
.vergleich__gegen td:not(.vergleich__uns) strong { color: var(--ink); }

/* Auf breiten Schirmen trägt der Tabellenkopf die Zuordnung, die Marke in der
   Zelle wäre dort doppelt. `display: none` nimmt sie auch aus dem Vorlesebaum. */
.vergleich__marke { display: none; }

/* Unter 46em löst sich die Tabelle in Karten auf — eine Karte je Zeile, beide
   Antworten untereinander. Zuerst stand hier eine quer scrollende Tabelle:
   Bei 390 px lag ausgerechnet die Spalte „Mit OrderOnline“ komplett außerhalb
   des Bildes, ohne dass irgendetwas auf das Scrollen hinwies. Die Zuordnung,
   die dabei der Tabellenkopf verliert, übernimmt die Marke in der Zelle. */
@media (max-width: 46em) {
  .vergleich__tabelle,
  .vergleich__tabelle tbody,
  .vergleich__tabelle tr,
  .vergleich__tabelle th,
  .vergleich__tabelle td { display: block; width: auto; }

  .vergleich__tabelle thead { display: none; }

  .vergleich__tabelle tr {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    margin-bottom: 1rem;
  }

  .vergleich__tabelle tbody th {
    width: auto;
    min-width: 0;
    padding: 0.9rem 1rem 0.6rem;
    border-bottom: 0;
    font-size: 1.02rem;
  }

  .vergleich__tabelle td {
    padding: 0.65rem 1rem 0.9rem;
    border-bottom: 0;
  }

  .vergleich__marke {
    display: block;
    margin-bottom: 0.2rem;
    font-size: 0.74rem;
    font-weight: 640;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-soft);
  }
  .vergleich__tabelle .vergleich__uns .vergleich__marke { color: var(--brand-deep); }
}

.vergleich__quelle {
  margin-top: 1.1rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
  max-width: 44em;
}
.vergleich__quelle a { color: var(--brand); }

/* ---------- Für wen ---------- */

/* Feste Spaltenzahlen statt auto-fit: Es sind genau vier Einträge, und
   `auto-fit` ließ den vierten bei 1280 px allein in einer zweiten Reihe
   stehen. 1 / 2×2 / 4 nebeneinander geht immer glatt auf. */
.branchen {
  list-style: none;
  padding: 0;
  margin-top: clamp(2rem, 1.6rem + 2vw, 3.2rem);
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.6rem, 3.5vw, 2.6rem);
}
@media (min-width: 34em) {
  .branchen { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 62em) {
  .branchen { grid-template-columns: repeat(4, 1fr); }
}
.branchen h3 {
  font-size: 1.12rem;
  font-weight: 720;
  padding-top: 0.9rem;
  border-top: 2px solid var(--brand);
}
.branchen p { margin-top: 0.55rem; color: var(--ink-soft); }

.region {
  margin-top: clamp(2.6rem, 2rem + 3vw, 4rem);
  padding: clamp(1.6rem, 1.3rem + 1.5vw, 2.4rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--brand-tint);
}
.region h3 { font-size: 1.22rem; font-weight: 720; }
.region p { margin-top: 0.7rem; color: var(--ink-soft); max-width: 46em; }
.region p strong { color: var(--ink); font-weight: 620; }

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

.faq { max-width: 50em; margin-top: clamp(1.8rem, 1.4rem + 2vw, 2.8rem); }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 0.2rem;
  font-weight: 650;
  font-size: 1.08rem;
  transition: color var(--dur-fast) var(--ease-out);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--brand); }

/* Plus wird zu Minus: der senkrechte Balken dreht sich weg. */
.faq__zeichen {
  flex: none;
  position: relative;
  width: 0.95rem;
  height: 0.95rem;
}
.faq__zeichen::before,
.faq__zeichen::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: var(--brand);
}
.faq__zeichen::after {
  rotate: 90deg;
  transition: rotate 280ms var(--ease-out);
}
.faq details[open] .faq__zeichen::after { rotate: 0deg; }

.faq .faq__antwort { padding: 0 0.2rem 1.3rem; color: var(--ink-soft); max-width: 44em; }
.faq .faq__antwort strong { color: var(--ink); font-weight: 600; }
.faq .faq__antwort a { color: var(--brand); }

/* Aufklappen mit Höhenübergang, wo die Plattform ihn anbietet.
   Ohne Unterstützung klappt das Panel wie gewohnt sofort auf. */
@media (prefers-reduced-motion: no-preference) {
  @supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
    .faq details::details-content {
      block-size: 0;
      overflow: clip;
      transition: block-size 300ms var(--ease-out), content-visibility 300ms allow-discrete;
    }
    .faq details[open]::details-content { block-size: auto; }
  }
}

/* ---------- Finale (Demo) ---------- */

/* Der Abschluss ist der letzte Bon: oben Kante, unten Abriss. Kein Farbverlauf —
   die Seite ist sonst durchgehend flaches Papier, und ein Verlauf hier wäre das
   einzige Stück Baukasten darauf. */
.finale {
  background: var(--brand);
  color: #fff;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: clamp(1.25rem, 5vw, 4.5rem);
  position: relative;
}
.finale::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -13px;
  height: 13px;
  background: var(--brand);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='13'%3E%3Cpath d='M0 0h22L11 13Z' fill='%23000'/%3E%3C/svg%3E") repeat-x;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='13'%3E%3Cpath d='M0 0h22L11 13Z' fill='%23000'/%3E%3C/svg%3E") repeat-x;
  -webkit-mask-size: 22px 13px;
  mask-size: 22px 13px;
}
.finale h2 {
  font-size: clamp(1.9rem, 1.35rem + 2.5vw, 3.1rem);
  font-weight: 770;
  max-width: 15em;
  color: #fff;
}
.finale p {
  margin-top: 1.1rem;
  max-width: 36em;
  color: oklch(0.93 0.03 348);
  font-size: 1.08rem;
}
.finale p strong { color: #fff; }
.finale__details { margin-top: 2.4rem; }
.finale__punkte {
  list-style: none;
  display: grid;
  gap: 0.65rem;
}
.finale__punkte li {
  display: flex;
  gap: 0.7rem;
  align-items: baseline;
  color: #fff;
  font-weight: 560;
}
.finale__punkte li::before {
  content: "✓";
  flex: none;
  color: var(--brand-tint);
  font-weight: 760;
}
.finale__cta {
  margin-top: 1.8rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.4rem;
}
.finale__mail {
  font-family: var(--font-mono);
  font-size: 1.02rem;
  color: #fff;
  text-decoration-thickness: 2px;
  padding-block: 0.55rem;
}
.finale__mail:hover { color: var(--brand-tint); }

.finale__kopie {
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  min-height: 2.75rem;
  padding: 0.5rem 0.95rem;
  color: #fff;
  background: transparent;
  border: 1.5px solid oklch(1 0 0 / 0.55);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}
.finale__kopie:hover { background: oklch(1 0 0 / 0.14); border-color: #fff; }
.finale__kopie:focus-visible { outline-color: #fff; }
.finale__kopie.is-kopiert { background: #fff; color: var(--brand-deep); border-color: #fff; }

/* Muss `.finale p` (0,1,1) schlagen — sonst gewinnt dort Schriftgröße und Farbe
   des Hauptabsatzes. Dieselbe Falle wie bei `.surface__kanal` und `.bon__head`. */
.finale p.finale__hinweis {
  margin-top: 1.1rem;
  font-size: 0.88rem;
  line-height: 1.5;
  max-width: 34em;
  color: oklch(0.9 0.035 348);
}
.finale .btn--on-dark:focus-visible { outline-color: #fff; }

/* ---------- Anfrageformular ----------
   Ein weißer Zettel auf dem roten Tresen. Die Alternative wäre gewesen, die
   Felder direkt auf den Markenblock zu setzen; dann müsste jede Grenze, jeder
   Fokusring und jeder Fehlerton für gesättigtes Rot neu belegt werden — neun
   Bedienelemente lang, mit 3:1 nach WCAG 1.4.11 an jedem einzelnen. Auf
   weißem Papier gelten dieselben Kontrastwerte wie im Rest der Seite, und die
   Überlagerung erklärt nebenbei, was der Block ist: das Formular an der Theke. */

@media (min-width: 62em) {
  .finale {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(31rem, 1.1fr);
    grid-template-areas:
      "intro form"
      "details form";
    gap: clamp(2rem, 4vw, 4rem);
    align-items: start;
  }
  /* Der Fließtext bleibt lesbar breit; ohne die Grenze zieht ihn das Raster
     bis an die Formularkante. */
  .finale__text h2, .finale__text p { max-width: 18em; }
  .finale__text { grid-area: intro; }
  .finale__details { grid-area: details; margin-top: 0; }
  .anfrage { grid-area: form; }
}

.anfrage {
  margin-top: 2rem;
  background: #fff;
  color: var(--ink);
  border-radius: var(--radius);
  padding: clamp(1.35rem, 1rem + 1.6vw, 2.1rem);
  box-shadow: var(--shadow-lift);
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 62em) {
  .anfrage { margin-top: 0; }
}

.anfrage__titel {
  font-size: 1.3rem;
  font-weight: 740;
  color: var(--ink);
}
.anfrage__kopf p {
  margin: 0.3rem 0 0;
  color: var(--ink-soft);
  font-size: 0.94rem;
  line-height: 1.5;
}

.anfrage__block { display: grid; gap: 1.1rem; }

.anfrage__reihe { display: grid; gap: 1.1rem; }
@media (min-width: 34em) {
  .anfrage__reihe { grid-template-columns: 1fr 1fr; }
}

.anfrage .field label,
.anfrage .field .field__label {
  font-size: 0.94rem;
  font-weight: 650;
  color: var(--ink);
  margin-bottom: 0.4rem;
}

/* E-Mail und Telefon sind ein Feld mit zwei Eingaben: entweder-oder, nicht
   zwei unabhängige Pflichten. Die Gruppe trägt deshalb die Beschriftung und
   den Hinweis, die beiden Eingaben nur noch ihren Namen. */
.anfrage .anfrage__rueckweg > .field__label { margin-bottom: 0.25rem; }
.anfrage .anfrage__rueckweg > .field__hint { margin: 0 0 0.8rem; }
.anfrage__rueckweg .field label { font-weight: 560; }

.anfrage input[type="text"],
.anfrage input[type="email"],
.anfrage input[type="tel"],
.anfrage select,
.anfrage textarea {
  font: inherit;
  width: 100%;
  min-height: 2.9rem;
  padding: 0.6rem 0.85rem;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--line-control);
  border-radius: var(--radius);
  transition: border-color 140ms var(--ease-out);
}
.anfrage textarea { min-height: 5.5rem; resize: vertical; line-height: 1.5; }
.anfrage select { cursor: pointer; }

.anfrage :is(input, select, textarea)::placeholder {
  color: var(--ink-soft);
  opacity: 1;
}
.anfrage :is(input, select, textarea):focus-visible {
  border-color: var(--brand);
  outline: 3px solid var(--brand);
  outline-offset: 2px;
}
.anfrage :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--fehler); }

/* Zweiklassig, weil `.finale p` (0,1,1) sonst Größe und Farbe dieser Absätze
   übernimmt — dieselbe Falle wie bei `.finale__hinweis` weiter oben. */
.anfrage .field__hint {
  margin-top: 0.45rem;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--ink-soft);
  font-weight: 420;
}
.anfrage .field__fehler {
  margin-top: 0.4rem;
  font-size: 0.86rem;
  line-height: 1.45;
  font-weight: 600;
  color: var(--fehler);
}

/* Zusatzfragen bleiben erreichbar, konkurrieren aber nicht mit dem kurzen
   Pflichtweg. Native Details funktionieren ohne zusätzliches Skript. */
.anfrage__optional {
  border-block: 1px solid var(--line);
}
.anfrage__optional summary {
  min-height: 3.4rem;
  padding-block: 0.85rem;
  cursor: pointer;
  color: var(--ink);
  font-size: 0.96rem;
  font-weight: 650;
}
.anfrage__optional summary::marker { color: var(--brand); }
.anfrage__optional summary span {
  margin-left: 0.35rem;
  color: var(--ink-soft);
  font-size: 0.86rem;
  font-weight: 450;
}
.anfrage__optional-inhalt {
  padding-block: 0.35rem 1.35rem;
  display: grid;
  gap: 1.1rem;
}

/* Der Honigtopf muss für Menschen unerreichbar sein, ohne `display: none` —
   manche Formularroboter überspringen ausgeblendete Felder gezielt. */
.anfrage__falle {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.anfrage__zustimmung {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.2rem 0.7rem;
  align-items: start;
}
.anfrage__zustimmung input {
  /* 1,25 rem Kästchen in einer 2,75-rem-Greiffläche: das Ziel bleibt
     touchtauglich, ohne dass das Kästchen den Satz überragt. */
  inline-size: 1.25rem;
  block-size: 1.25rem;
  margin: 0.75rem 0.75rem 0.75rem 0.5rem;
  accent-color: var(--brand);
  flex: none;
}
.anfrage__zustimmung label {
  font-size: 0.9rem;
  line-height: 1.55;
  font-weight: 450;
  color: var(--ink-soft);
  padding-block: 0.7rem;
  cursor: pointer;
}
.anfrage__zustimmung label a { color: var(--brand); text-underline-offset: 3px; }
.anfrage__zustimmung .field__fehler { grid-column: 2; margin-top: 0; }

.anfrage__abschluss {
  display: grid;
  gap: 0.65rem;
}
.anfrage__abschluss .btn { width: 100%; }
.anfrage .anfrage__zusage {
  margin: 0;
  font-size: 0.86rem;
  color: var(--ink-soft);
  text-align: center;
}
.anfrage__abschluss .btn[aria-disabled="true"] { opacity: 0.65; cursor: progress; }
/* Vor dem Skriptstart und ohne JavaScript: sichtbar nicht drückbar. */
.anfrage__abschluss .btn:disabled:not([aria-disabled]) { opacity: 0.55; cursor: not-allowed; }

.anfrage .anfrage__melde {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.55;
  font-weight: 550;
  color: var(--ink);
  border-inline-start: 3px solid var(--brand);
  padding: 0.15rem 0 0.15rem 0.85rem;
}
.anfrage .anfrage__melde--fehler { border-inline-start-color: var(--fehler); }
.anfrage .anfrage__melde a { color: var(--brand); }

/* Erfolgsfall: Das Formular verschwindet, die Bestätigung nimmt seinen Platz
   ein. Ein „gesendet"-Hinweis über einem noch ausgefüllten Formular lädt zur
   zweiten Abgabe ein. */
.anfrage__danke { display: grid; gap: 0.9rem; justify-items: start; }
.anfrage__danke h3 { font-size: 1.3rem; font-weight: 740; color: var(--ink); }
.anfrage .anfrage__danke p {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 34em;
}
.anfrage .anfrage__danke p strong { color: var(--ink); font-weight: 680; }

/* ---------- Fußzeile ---------- */

.site-footer {
  padding-block: 2.6rem 3.2rem;
  border-top: 1px solid var(--line);
  font-size: 0.94rem;
  color: var(--ink-soft);
}
.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.4rem;
  justify-content: space-between;
  align-items: baseline;
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: 0.2rem 1.4rem; }
.site-footer nav a { padding-block: 0.6rem; }
.site-footer a { color: var(--ink-soft); transition: color var(--dur-fast) var(--ease-out); }
.site-footer a:hover { color: var(--ink); }

/* ---------- Auftritt beim Scrollen ----------
   Nur mit JS und ohne Reduced Motion. Ohne beides steht der Inhalt sofort da.
   `seite.js` besitzt zusätzlich ein Sicherheitsnetz, das alles aufdeckt. */

.js-motion [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
.js-motion [data-reveal].reveal-in {
  opacity: 1;
  transform: none;
}

/* Bildseiten kommen eine Spur aus der Tiefe. */
.js-motion [data-reveal] .surface__visual {
  transform: scale(0.985);
  transition: transform 600ms var(--ease-out);
}
.js-motion [data-reveal].reveal-in .surface__visual { transform: none; }

/* Gestaffelte Listen: Behälter bleibt ruhig, die Einträge zählen sich ein.
   Das führt den Blick von oben nach unten statt alles gleichzeitig zu zeigen. */
.js-motion [data-reveal]:is(.recht-liste, .schritte, .ehrlich, .branchen, .faq) {
  opacity: 1;
  transform: none;
  transition: none;
}
.js-motion [data-reveal] .fakten > li,
.js-motion [data-reveal].recht-liste > .recht-punkt,
.js-motion [data-reveal].ehrlich > div,
.js-motion [data-reveal].branchen > li,
.js-motion [data-reveal].schritte > .schritt,
.js-motion [data-reveal].faq > details {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.js-motion [data-reveal].reveal-in .fakten > li,
.js-motion [data-reveal].reveal-in.recht-liste > .recht-punkt,
.js-motion [data-reveal].reveal-in.ehrlich > div,
.js-motion [data-reveal].reveal-in.branchen > li,
.js-motion [data-reveal].reveal-in.schritte > .schritt,
.js-motion [data-reveal].reveal-in.faq > details {
  opacity: 1;
  transform: none;
}

.js-motion :is(.fakten, .recht-liste, .ehrlich, .schritte, .branchen, .faq) > *:nth-child(1) { --i: 0; }
.js-motion :is(.fakten, .recht-liste, .ehrlich, .schritte, .branchen, .faq) > *:nth-child(2) { --i: 1; }
.js-motion :is(.fakten, .recht-liste, .ehrlich, .schritte, .branchen, .faq) > *:nth-child(3) { --i: 2; }
.js-motion :is(.fakten, .recht-liste, .ehrlich, .schritte, .branchen, .faq) > *:nth-child(4) { --i: 3; }
.js-motion :is(.fakten, .recht-liste, .ehrlich, .schritte, .branchen, .faq) > *:nth-child(n + 5) { --i: 4; }

/* Hero-Einstieg: läuft ohne Scroll-Gate, Inhalt ist ohne JS sofort sichtbar */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rise-in {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: none; }
  }
  /* Nur die Textspalte läuft ein — eine gestaffelte Bewegung, nicht fünf.
     Das Hero-Bild bleibt bewusst unangetastet: Es trägt `fetchpriority="high"`,
     und eine Einblendung aus `opacity: 0` würde genau den Moment verzögern,
     den dieser Ladehinweis vorziehen soll (LCP). */
  .hero h1 { animation: rise-in 640ms var(--ease-out) both; }
  .hero__lead { animation: rise-in 640ms var(--ease-out) 90ms both; }
  .hero__cta { animation: rise-in 640ms var(--ease-out) 170ms both; }
  .hero__facts { animation: rise-in 640ms var(--ease-out) 240ms both; }
}

/* Reduced Motion: harter Aus-Schalter für alles Bewegte. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Rechtsseiten ---------- */

.prose { max-width: 44em; padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.prose h1 { font-size: clamp(2rem, 1.6rem + 2vw, 3rem); font-weight: 760; margin-bottom: 1.2rem; }
.prose h2 { font-size: 1.35rem; font-weight: 700; margin: 2.2rem 0 0.6rem; }
.prose p, .prose li { color: var(--ink-soft); }
.prose li { margin-left: 1.2rem; }
.prose strong { color: var(--ink); }
.prose .hinweis {
  border: 1.5px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  margin: 1.4rem 0;
  font-size: 0.95rem;
}

/* ---------- Druck ---------- */

@media print {
  .site-header, .site-nav, .skip-link, .hero__visual { display: none; }
  .section--dark, .finale { background: #fff !important; color: #000 !important; }
  .section--dark :is(h2, h3, p, li), .finale :is(h2, p) { color: #000 !important; }
  .js-motion [data-reveal] { opacity: 1 !important; transform: none !important; }
}