/* Münchenkurier - Marke der Centro Car (2.26)
   Die Seite ist dramaturgisch geteilt: Der Aufmacher liegt auf Nachtblau, weil
   dieser Dienst rund um die Uhr fährt und der Rechner dort leuchten soll. Alles
   darunter ist hell und ruhig - das lesen Kanzleien, Praxen und Werkstätten.
   Schriften liegen lokal (schrift/), es geht kein Aufruf zu Google hinaus. */

@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("schrift/archivo-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("schrift/archivo-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("schrift/archivo-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 800; font-display: swap;
  src: url("schrift/archivo-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("schrift/source-serif-4-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("schrift/source-serif-4-latin-600-normal.woff2") format("woff2"); }

:root {
  --nacht: #0A1628;
  --nacht-hoch: #132540;
  --papier: #FFFFFF;
  --flaeche: #F2F6FA;
  --tinte: #0F2036;
  --tinte-leise: #5A6B7F;
  --kante: #DCE4EC;
  --kante-nacht: #23375A;
  --signal: #1668B0;
  --signal-tief: #0F4E88;
  --signal-hell: #63B2EE;
  --puls: #FFB43D;
  --puls-tief: #E08F14;
  --gut: #1E8A5F;

  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --lauf: "Source Serif 4", Georgia, "Times New Roman", serif;
  --breit: 1180px;
}

* { box-sizing: border-box; }
/* hidden muss stärker sein als jedes display: flex weiter unten -
   sonst steht der leere Ergebniskasten des Rechners schon vor dem Rechnen da. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--lauf);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, .display { font-family: var(--display); text-wrap: balance; }
a { color: var(--signal); }
img { max-width: 100%; height: auto; }

.bahn { max-width: var(--breit); margin: 0 auto; padding: 0 28px; }
.marke-label { font-family: var(--display); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tinte-leise); }
.klein { font-size: 14px; color: var(--tinte-leise); }
.zahl { font-variant-numeric: tabular-nums; text-align: right; }

.ueberspringen { position: absolute; left: -9999px; }
.ueberspringen:focus { left: 12px; top: 12px; z-index: 99; background: var(--puls); color: var(--nacht); padding: 10px 16px; font-family: var(--display); font-weight: 700; }

/* ---------- Kopf ---------- */
.kopf { background: var(--nacht); color: #fff; position: sticky; top: 0; z-index: 30; }
.kopf-innen { display: flex; align-items: center; gap: 26px; padding: 13px 0; }
.wortmarke { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: -.015em; color: inherit; text-decoration: none; white-space: nowrap; }
.wortmarke b { font-weight: 800; }
.wortmarke .zeichen { flex: none; }
.kopf nav { margin-left: auto; display: flex; gap: 22px; flex-wrap: wrap; }
.kopf nav a { font-family: var(--display); font-size: 14.5px; font-weight: 500; color: #C9D6E6; text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; }
.kopf nav a:hover, .kopf nav a.an { color: #fff; border-bottom-color: var(--puls); }
.kopf .ruf { font-family: var(--display); font-weight: 700; font-size: 14.5px; color: var(--puls); text-decoration: none; white-space: nowrap; }
.kopf .ruf .ruf-wort { color: #8FA3BC; font-weight: 500; }
@media (max-width: 980px) { .kopf nav { display: none; } }

/* ---------- Aufmacher auf Nacht ---------- */
.nacht { background: var(--nacht); color: #fff; padding: 60px 0 76px; }
.nacht h1 { font-size: clamp(34px, 5.4vw, 58px); line-height: 1.06; letter-spacing: -.03em; font-weight: 800; margin: 0 0 18px; max-width: 17ch; }
.nacht h1 em { font-style: normal; color: var(--puls); }
.nacht .vorspann { font-size: 19px; line-height: 1.55; margin: 0; max-width: 56ch; color: #C9D6E6; }
.nacht .marke-label { color: #8FA3BC; }
.nacht a { color: var(--signal-hell); }

.zusagen { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 34px; margin: 26px 0 0; padding: 0; }
.zusagen li { display: flex; flex-direction: column; gap: 1px; padding-left: 16px; position: relative; }
.zusagen li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; background: var(--puls); transform: rotate(45deg); }
.zusagen strong { font-family: var(--display); font-size: 15px; font-weight: 700; }
.zusagen span { font-size: 13.5px; color: #8FA3BC; font-family: var(--display); }
.nacht .zusagen strong { color: #fff; }

/* ---------- Der Rechner ---------- */
.rechner { background: var(--nacht-hoch); border: 1px solid var(--kante-nacht); padding: 30px 30px 26px; margin-top: 40px; color: #fff; }
.rechner h2 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 6px; }
.rechner-vor { margin: 0 0 22px; color: #A9BCD3; font-size: 16px; max-width: 62ch; }
.rechner .marke-label { color: #8FA3BC; }

.felder { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.feld { display: flex; flex-direction: column; gap: 5px; flex: 1 1 210px; }
.feld > span { font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8FA3BC; }
.feld input {
  font-family: var(--display); font-size: 17px; font-weight: 600;
  padding: 13px 14px; border: 1px solid var(--kante-nacht); background: var(--nacht);
  color: #fff; width: 100%;
}
.feld input::placeholder { color: #63768E; font-weight: 400; }
.feld input:focus { outline: 2px solid var(--puls); outline-offset: -1px; border-color: var(--puls); }
.felder .pfeil { color: var(--puls); font-size: 22px; padding-bottom: 12px; font-family: var(--display); }
@media (max-width: 620px) { .felder .pfeil { display: none; } }

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--display); font-weight: 700; font-size: 15.5px;
  padding: 14px 22px; border: 0; cursor: pointer; text-decoration: none;
  background: var(--signal); color: #fff; white-space: nowrap;
}
.knopf:hover { background: var(--signal-tief); }
.knopf.puls { background: var(--puls); color: var(--nacht); }
.knopf.puls:hover { background: var(--puls-tief); }
.knopf.leise { background: transparent; color: #C9D6E6; border: 1px solid var(--kante-nacht); }
.knopf.leise:hover { border-color: var(--puls); color: #fff; background: transparent; }
.knopf[disabled] { opacity: .6; cursor: default; }

.fahrzeuge { border: 0; padding: 26px 0 0; margin: 0; display: flex; gap: 10px; flex-wrap: wrap; }
.fahrzeuge legend { font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8FA3BC; padding: 0 0 11px; float: left; width: 100%; }
.fahrzeug { position: relative; display: flex; flex-direction: column; gap: 1px; padding: 10px 15px; border: 1px solid var(--kante-nacht); cursor: pointer; flex: 1 1 150px; }
.fahrzeug input { position: absolute; opacity: 0; pointer-events: none; }
.fahrzeug .fz-name { font-family: var(--display); font-weight: 700; font-size: 15px; }
.fahrzeug .fz-was { font-family: var(--display); font-size: 12.5px; color: #8FA3BC; }
.fahrzeug:hover { border-color: #3B5680; }
.fahrzeug:has(input:checked) { border-color: var(--puls); background: rgba(255, 180, 61, .08); }
.fahrzeug:has(input:focus-visible) { outline: 2px solid var(--puls); outline-offset: 2px; }

.ergebnis { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--kante-nacht); display: flex; flex-direction: column; gap: 20px; }
.preis-block { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.preis-block .marke-label { flex-basis: 100%; }
.preis { font-family: var(--display); font-size: clamp(38px, 6vw, 54px); font-weight: 800; letter-spacing: -.03em; color: var(--puls); font-variant-numeric: tabular-nums; line-height: 1; }
.preis-neben { font-family: var(--display); font-size: 14.5px; color: #A9BCD3; }
.zeit-block { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 620px) { .zeit-block { grid-template-columns: 1fr; gap: 12px; } }
.zeit-block > div { display: flex; flex-direction: column; gap: 2px; border-left: 2px solid var(--kante-nacht); padding-left: 14px; }
.zeit-block strong { font-family: var(--display); font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ergebnis-fuss { display: flex; gap: 12px; flex-wrap: wrap; }
.aufschluss { border-top: 1px solid var(--kante-nacht); padding-top: 14px; }
.aufschluss summary { font-family: var(--display); font-size: 14px; color: #A9BCD3; cursor: pointer; }
.aufschluss table { width: 100%; border-collapse: collapse; margin: 12px 0 4px; font-family: var(--display); font-size: 14.5px; }
.aufschluss td { padding: 5px 0; border-bottom: 1px solid var(--kante-nacht); }
.aufschluss tr.brutto td { font-weight: 700; border-bottom: 0; }
.aufschluss .klein { color: #8FA3BC; }
.rechner-fehler { margin: 18px 0 0; padding: 12px 15px; background: rgba(255, 180, 61, .12); border-left: 3px solid var(--puls); font-family: var(--display); font-size: 15px; }

/* Rechner als heller Kasten auf Unterseiten */
.hell .rechner { background: var(--flaeche); border-color: var(--kante); color: var(--tinte); margin-top: 0; }
.hell .rechner .marke-label, .hell .rechner .feld > span, .hell .rechner .fahrzeuge legend { color: var(--tinte-leise); }
.hell .rechner-vor, .hell .preis-neben, .hell .aufschluss summary, .hell .aufschluss .klein, .hell .fahrzeug .fz-was { color: var(--tinte-leise); }
.hell .feld input { background: #fff; border-color: var(--kante); color: var(--tinte); }
.hell .feld input::placeholder { color: #93A3B5; }
.hell .fahrzeug { border-color: var(--kante); background: #fff; }
.hell .fahrzeug:has(input:checked) { border-color: var(--puls-tief); background: #FFF6E6; }
.hell .ergebnis, .hell .aufschluss, .hell .zeit-block > div, .hell .aufschluss td { border-color: var(--kante); }
.hell .preis { color: var(--signal); }
.hell .knopf.leise { color: var(--tinte); border-color: var(--kante); }
.hell .knopf.leise:hover { border-color: var(--signal); }

/* ---------- Abschnitte im Hellen ---------- */
section.block { padding: 74px 0; }
section.block.grau { background: var(--flaeche); }
h2.abschnitt { font-size: clamp(26px, 3.4vw, 36px); letter-spacing: -.025em; font-weight: 800; margin: 0 0 10px; }
.abschnitt-vor { margin: 0 0 38px; color: var(--tinte-leise); max-width: 60ch; }

.raster3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.raster2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
@media (max-width: 900px) { .raster3, .raster2 { grid-template-columns: 1fr; gap: 24px; } }

.satz-block h3 { font-size: 19px; font-weight: 700; margin: 0 0 8px; padding-top: 15px; border-top: 2px solid var(--tinte); letter-spacing: -.01em; }
.satz-block p { margin: 0; font-size: 16.5px; }

/* Leistungskarten */
.leistung { background: #fff; border: 1px solid var(--kante); padding: 26px 24px; display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--tinte); }
.leistung:hover { border-color: var(--signal); }
.leistung h3 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.015em; }
.leistung p { margin: 0; font-size: 16px; color: var(--tinte-leise); }
.leistung .weiter { margin-top: auto; padding-top: 12px; font-family: var(--display); font-size: 14.5px; font-weight: 600; color: var(--signal); }
.grau .leistung { background: #fff; }

/* Ablauf mit echten Schritten (die Reihenfolge trägt hier Information) */
.ablauf { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; counter-reset: schritt; }
@media (max-width: 900px) { .ablauf { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ablauf { grid-template-columns: 1fr; } }
.ablauf > div { counter-increment: schritt; display: flex; flex-direction: column; gap: 7px; }
.ablauf > div::before { content: counter(schritt); font-family: var(--display); font-weight: 800; font-size: 15px; color: var(--puls-tief); border-top: 2px solid var(--puls); padding-top: 12px; font-variant-numeric: tabular-nums; }
.ablauf h3 { margin: 0; font-size: 17.5px; font-weight: 700; }
.ablauf p { margin: 0; font-size: 15.5px; color: var(--tinte-leise); }

/* Einsatzliste */
.einsaetze { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 40px; }
@media (max-width: 820px) { .einsaetze { grid-template-columns: 1fr; } }
.einsaetze > div { padding: 20px 0; border-top: 1px solid var(--kante); }
.einsaetze h3 { margin: 0 0 5px; font-size: 17.5px; font-weight: 700; }
.einsaetze p { margin: 0; font-size: 16px; color: var(--tinte-leise); }

/* Zeitleiste und Datenliste (2.29: Bestätigung und Sendungsverfolgung) */
.schrittliste { list-style: none; margin: 0; padding: 0; }
.schrittliste li { position: relative; padding: 0 0 18px 24px; border-left: 2px solid var(--kante); }
.schrittliste li:last-child { padding-bottom: 0; border-left-color: transparent; }
.schrittliste li::before { content: ""; position: absolute; left: -7px; top: 4px; width: 12px; height: 12px;
  border-radius: 50%; background: #fff; border: 2px solid var(--kante); }
.schrittliste li.fertig::before { background: var(--gut); border-color: var(--gut); }
.schrittliste li.jetzt::before { background: var(--puls); border-color: var(--puls-tief); }
.schrittliste li.jetzt { border-left-color: var(--puls); }
.schrittliste strong { display: block; font-family: var(--display); font-size: 16px; font-weight: 700; }
.schrittliste span { display: block; font-family: var(--display); font-size: 14px; color: var(--tinte-leise); }
.schrittliste.gross li { padding-bottom: 26px; }
.schrittliste.gross strong { font-size: 18px; }
.nachweisliste { list-style: none; margin: 0; padding: 0; }
.nachweisliste li { border-top: 1px solid var(--kante); padding: 12px 0; }
.daten { margin: 0; }
.daten > div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 16px;
  border-top: 1px solid var(--kante); padding: 14px 0; }
.daten > div:last-child { border-bottom: 1px solid var(--kante); }
.daten dt { font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tinte-leise); }
.daten dd { margin: 0; font-size: 16.5px; }
@media (max-width: 620px) { .daten > div { grid-template-columns: 1fr; gap: 4px; } }

/* Kontaktseite (2.29): Formular links, Anschrift rechts */
.kontakt-raster { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 48px; align-items: start; }
@media (max-width: 900px) { .kontakt-raster { grid-template-columns: 1fr; gap: 32px; } }
.kontakt-karte { background: var(--flaeche); border: 1px solid var(--kante); padding: 26px 28px; }
.kontakt-karte h2 { font-family: var(--display); font-size: 20px; font-weight: 800; margin: 0 0 14px; }
.kontakt-karte h3 { font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tinte-leise); margin: 22px 0 4px; }
.kontakt-karte p { margin: 0 0 4px; font-size: 16px; }
.kontakt-gross { font-family: var(--display); font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.kontakt-gross a { text-decoration: none; }
.eingabe textarea { font-family: var(--lauf); font-size: 16.5px; padding: 11px 12px; border: 1px solid var(--kante);
  background: #fff; color: var(--tinte); width: 100%; resize: vertical; }
.eingabe textarea:focus { outline: 2px solid var(--puls-tief); outline-offset: -1px; }
.knopf.gross { font-size: 17px; padding: 15px 30px; }

/* Problem und Antwort nebeneinander (2.29, Branchenseiten).
   Links steht, was den Betrieb nervt, rechts, was wir dagegen tun. Die beiden
   Zeilen gehoeren zusammen, deshalb eine gemeinsame Linie oben statt zwei Kaesten. */
.loesungen { display: grid; gap: 0; }
.loesung { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 8px 40px;
  padding: 22px 0; border-top: 1px solid var(--kante); align-items: start; }
.loesung:last-child { border-bottom: 1px solid var(--kante); }
.loesung .problem { margin: 0; font-family: var(--display); font-size: 17px; font-weight: 600; color: var(--tinte); }
.loesung .antwort { margin: 0; font-size: 16.5px; color: var(--tinte-leise); }
.loesung .antwort::before { content: "→ "; color: var(--puls-tief); font-weight: 700; }
@media (max-width: 820px) { .loesung { grid-template-columns: 1fr; gap: 6px; } }

/* Fragen */
.fragen details { border-top: 1px solid var(--kante); padding: 16px 0; }
.fragen details:last-of-type { border-bottom: 1px solid var(--kante); }
.fragen summary { font-family: var(--display); font-size: 17.5px; font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: baseline; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: "+"; color: var(--puls-tief); font-weight: 700; font-size: 22px; line-height: 1; }
.fragen details[open] summary::after { content: "–"; }
.fragen details p { margin: 12px 0 0; max-width: 68ch; }

/* Stadtteil-Gitter */
.stadtteile { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1px; background: var(--kante); border: 1px solid var(--kante); }
.stadtteile a { background: #fff; padding: 15px 18px; text-decoration: none; color: var(--tinte); display: flex; flex-direction: column; gap: 2px; }
.stadtteile a:hover { background: var(--flaeche); }
.stadtteile .name { font-family: var(--display); font-weight: 700; font-size: 16px; }
.stadtteile .plz { font-family: var(--display); font-size: 13px; color: var(--tinte-leise); font-variant-numeric: tabular-nums; }

/* Schlussruf */
.schluss { background: var(--nacht); color: #fff; padding: 62px 0; }
.schluss h2 { font-size: clamp(26px, 3.6vw, 38px); font-weight: 800; letter-spacing: -.025em; margin: 0 0 12px; max-width: 20ch; }
.schluss p { margin: 0 0 26px; color: #C9D6E6; max-width: 56ch; }
.schluss .knopfzeile { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Rechtstexte und Fließtextseiten ---------- */
.textseite { max-width: 70ch; padding: 56px 0 40px; }
.textseite h1 { font-size: clamp(30px, 4.4vw, 44px); letter-spacing: -.03em; margin: 0 0 10px; font-weight: 800; }
.textseite .stand { color: var(--tinte-leise); font-family: var(--display); font-size: 14px; margin: 0 0 34px; }
.textseite h2 { font-size: 21px; font-weight: 700; margin: 38px 0 10px; padding-top: 16px; border-top: 1px solid var(--kante); }
.textseite h3 { font-size: 17px; font-weight: 700; margin: 24px 0 6px; font-family: var(--display); }
.textseite ul { padding-left: 20px; }
.textseite li { margin-bottom: 6px; }
.textseite dl { display: flex; flex-direction: column; gap: 12px; margin: 18px 0; }
.textseite dt { font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tinte-leise); }
.textseite dd { margin: 2px 0 0; }

/* ---------- Fußzeile ---------- */
footer { background: var(--nacht); color: #C9D6E6; padding: 52px 0 36px; }
.fuss-raster { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 34px; }
@media (max-width: 900px) { .fuss-raster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .fuss-raster { grid-template-columns: 1fr; } }
.fuss-marke .wortmarke { color: #fff; margin-bottom: 14px; }
.fuss-marke p { font-size: 15px; margin: 0 0 14px; max-width: 42ch; }
.fuss-ruf a { color: var(--puls); text-decoration: none; font-family: var(--display); font-weight: 600; }
.fuss-zeit { font-size: 14px !important; color: #8FA3BC; }
footer h4 { font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8FA3BC; margin: 0 0 14px; }
footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
footer ul a { color: #C9D6E6; text-decoration: none; font-size: 15px; }
footer ul a:hover { color: var(--puls); }
.rechtszeile { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--kante-nacht); display: flex; gap: 12px 28px; flex-wrap: wrap; justify-content: space-between; font-family: var(--display); font-size: 13px; color: #8FA3BC; }
.rechtszeile a { color: #8FA3BC; text-decoration: none; margin-right: 16px; }
.rechtszeile a:hover { color: var(--puls); }

a:focus-visible, .knopf:focus-visible, summary:focus-visible { outline: 2px solid var(--puls); outline-offset: 3px; }

/* ---------- Bestellung ---------- */
.bestell-preis { display: flex; gap: 34px; flex-wrap: wrap; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--kante-nacht); }
.bestell-preis > div { display: flex; flex-direction: column; gap: 2px; }
.bestell-preis .marke-label { color: #8FA3BC; }
.bestell-preis strong { font-family: var(--display); font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--puls); }
.bestell-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 860px) { .bestell-raster { grid-template-columns: 1fr; } }
.kasten { background: #fff; border: 1px solid var(--kante); padding: 24px 22px; }
.kasten h2 { font-size: 19px; font-weight: 800; margin: 0 0 16px; letter-spacing: -.015em; }
.eingabe { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.eingabe > span { font-family: var(--display); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--tinte-leise); }
.eingabe input { font-family: var(--display); font-size: 16px; padding: 11px 12px; border: 1px solid var(--kante); background: #fff; color: var(--tinte); width: 100%; }
.eingabe input:focus { outline: 2px solid var(--puls-tief); outline-offset: -1px; }
.eingabe .hinweis-klein { font-family: var(--display); font-size: 13px; color: var(--tinte-leise); text-transform: none; letter-spacing: 0; font-weight: 400; }
.reihe { display: grid; grid-template-columns: 110px 1fr; gap: 12px; }
.reihe.gleich { grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .reihe, .reihe.gleich { grid-template-columns: 1fr; } }
.bestell-fuss { margin-top: 24px; display: flex; flex-direction: column; gap: 16px; }
.haken { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; }
.haken input { margin-top: 5px; flex: none; }
.bestell-fuss .knopfzeile { display: flex; gap: 12px; flex-wrap: wrap; }
.bestell-fuss .knopf.leise { color: var(--tinte); border-color: var(--kante); }