/* Fahrtenwerk – Kundenseite (1.92), Richtung „Werkhalle“.
   Heller Betongrund, Stahlblau als Text, Bernstein als einzige Leuchtfarbe.
   Schriften liegen in schrift/ (selbst gehostet). */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; src: url(schrift/archivo.woff2) format("woff2-variations"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url(schrift/plex-sans-400.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url(schrift/plex-sans-500.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url(schrift/plex-sans-600.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url(schrift/plex-mono-500.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url(schrift/plex-mono-600.woff2) format("woff2"); }

:root {
  --grund: #e9ecf0;
  --grund-2: #dfe4ea;
  --flaeche: #ffffff;
  --flaeche-2: #f3f5f8;
  --linie: #cdd5df;
  --linie-2: #b7c2d0;
  --text: #0f1a2b;
  --text-2: #33425a;
  --leise: #61708a;
  --amber: #d9822b;
  --amber-2: #c5721f;
  --amber-glow: rgba(217, 130, 43, .28);
  --blau: #1f3a5f;
  --karte-grund: #f6f7f9;
  --karte-linie: #d6dce5;
  --karte-linie-2: #bcc6d4;
  --karte-text: #7a889c;
  --ok: #1d8a58;
  --warn: #b42318;
  --schatten: 0 24px 60px rgba(15, 26, 43, .14);
  --radius: 14px;
  --radius-klein: 8px;
  --schrift-display: "Archivo", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --schrift-text: "IBM Plex Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --schrift-zahl: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  color-scheme: light;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--grund); color: var(--text); font-family: var(--schrift-text); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--amber-2); outline-offset: 3px; }
.klein { font-size: 13px; color: var(--leise); }
.eyebrow { font: 600 12px/1 var(--schrift-zahl); letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }
h1, h2, h3 { font-family: var(--schrift-display); font-variation-settings: "wdth" 112; font-weight: 800; letter-spacing: -.01em; line-height: 1.02; text-wrap: balance; margin: 0; }
h1 { font-size: clamp(38px, 5.8vw, 84px); hyphens: auto; overflow-wrap: break-word; }
h2 { font-size: clamp(28px, 3.4vw, 44px); }
h3 { font-size: 22px; font-variation-settings: "wdth" 105; }
h1.mittel { font-size: clamp(34px, 5vw, 60px); }
.zahl { font-family: var(--schrift-zahl); font-variant-numeric: tabular-nums; }
.entwurf { background: #fff6df; border-bottom: 1px solid #eeda9f; color: #6b5200; padding: 8px 16px; font-size: 13.5px; text-align: center; }

.seite { max-width: 1320px; margin: 0 auto; padding: 0 28px; }
@media (max-width: 600px) { .seite { padding: 0 16px; } }

/* Kopfzeile */
.kopf { display: flex; align-items: center; gap: 22px; padding: 22px 0; }
.marke { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--blau); }
.marke .zeichen { flex: none; }
.marke b { font-family: var(--schrift-display); font-variation-settings: "wdth" 108; font-weight: 800; font-size: 24px; letter-spacing: -.01em; color: var(--text); }
.kopf nav { display: flex; gap: 26px; margin-left: 30px; }
.kopf nav a { text-decoration: none; color: var(--text-2); font-weight: 500; }
.kopf nav a:hover, .kopf nav a.aktiv { color: var(--text); }
.kopf .rechts { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.tel { text-decoration: none; font-family: var(--schrift-zahl); font-weight: 600; color: var(--text); white-space: nowrap; }
.kontolink { text-decoration: none; color: var(--text-2); font-weight: 500; white-space: nowrap; }
.kontolink:hover { color: var(--text); }
@media (max-width: 900px) { .kopf .kontolink { display: none; } }
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 22px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--amber); color: var(--knopf-text, #14100a); font-weight: 600; text-decoration: none; transition: transform .15s, background .15s; }
.knopf:hover { background: var(--amber-2); transform: translateY(-1px); }
.knopf.leise { background: transparent; color: var(--text); border: 1px solid var(--linie-2); }
.knopf.leise:hover { border-color: var(--text-2); background: transparent; }
.knopf.gross { padding: 17px 28px; font-size: 17px; }
.knopf.breit { width: 100%; }
.kopf .knopf { white-space: nowrap; }
.knopf:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.menue-knopf { display: none; width: 44px; height: 44px; padding: 10px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; flex-direction: column; justify-content: center; gap: 5px; }
.menue-knopf span { display: block; height: 2px; width: 22px; background: var(--text); border-radius: 2px; transition: transform .2s, opacity .2s; }
.menue-knopf:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
.kopf.offen .menue-knopf span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.kopf.offen .menue-knopf span:nth-child(2) { opacity: 0; }
.kopf.offen .menue-knopf span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* 2.156 (WT-8): am Handy ein aufklappbares Menü statt gar keinem; Telefon bleibt sichtbar */
@media (max-width: 900px) {
  .kopf { flex-wrap: wrap; }
  .kopf nav { display: none; order: 9; width: 100%; flex-direction: column; gap: 0; margin-left: 0; border-top: 1px solid var(--linie, #e3e6ea); padding: 6px 0 2px; }
  .kopf.offen nav { display: flex; }
  .kopf nav a { padding: 12px 4px; font-size: 16px; border-bottom: 1px solid var(--linie, #e3e6ea); }
  .kopf nav a.aktiv { color: var(--blau); }
  .menue-knopf { display: flex; order: 8; }
  .kopf .rechts { margin-left: auto; }
  .kopf .knopf { padding: 11px 16px; font-size: 14px; }
}
/* 2.107 (A6 Ä2): Auf schmalen Telefonen (360 px) war der Kopf 386 px breit - die
   ganze Seite ließ sich seitwärts schieben, auf JEDER Fahrtenwerk-Seite. Ursache
   war die rechte Gruppe (Kundenkonto + Telefon + „Auftrag erteilen") neben einer
   Wortmarke in 24 px. Unter 480 px darf der Kopf deshalb umbrechen, die Wortmarke
   wird kleiner, und der Knopf bekommt seine eigene Zeile über die volle Breite -
   damit ist er auf dem Telefon sogar besser zu treffen als vorher. */
@media (max-width: 480px) {
  .kopf { flex-wrap: wrap; gap: 10px; padding: 16px 0 14px; }
  .kopf .marke b { font-size: 19px; }
  .kopf .marke .zeichen { width: 32px; height: 32px; }
  .kopf .rechts { margin-left: auto; gap: 10px; flex: 0 0 auto; }
  .kopf .rechts .knopf { padding: 10px 14px; font-size: 13.5px; }
}
@media (max-width: 380px) {
  .kopf .rechts { flex: 1 0 100%; margin-left: 0; }
  .kopf .rechts .knopf { flex: 1; }
}

/* Held: das Instrument */
.held { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: stretch; padding: 30px 0 60px; min-height: calc(100vh - 100px); }
@media (max-width: 1000px) { .held { grid-template-columns: 1fr; min-height: 0; } }
.held-text { display: flex; flex-direction: column; justify-content: center; gap: 26px; }
.held-text p.lead { font-size: 19px; color: var(--text-2); max-width: 46ch; margin: 0; }
.formular { display: grid; gap: 12px; }
.feld { position: relative; display: grid; grid-template-columns: 52px 1fr; align-items: center; background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); transition: border-color .15s, box-shadow .15s; }
.feld:focus-within { border-color: var(--amber); box-shadow: 0 0 0 4px var(--amber-glow); }
.feld.fehlt { border-color: var(--warn); }
.feld .punkt { width: 14px; height: 14px; border-radius: 50%; margin: 0 auto; background: var(--amber); box-shadow: 0 0 0 4px var(--amber-glow); }
.feld .punkt.ziel { background: var(--blau); box-shadow: 0 0 0 4px rgba(31, 58, 95, .15); }
.feld label { position: absolute; left: 52px; top: 9px; font: 600 11px/1 var(--schrift-zahl); letter-spacing: .12em; text-transform: uppercase; color: var(--leise); pointer-events: none; }
.feld input { width: 100%; background: transparent; border: 0; padding: 26px 16px 11px 0; font-size: 19px; font-weight: 500; outline: none; }
.feld input::placeholder { color: var(--leise); font-weight: 400; }
.feld .verbinder { position: absolute; left: 25px; top: -13px; width: 2px; height: 14px; background: var(--linie-2); }
/* 1.98: PLZ und Ort nebeneinander - die PLZ ist Pflicht, der Ort füllt sich */
.feld.zweiteilig { grid-template-columns: 52px 128px 1fr; }
.feld.zweiteilig .plz { font-family: var(--schrift-zahl); letter-spacing: .04em; padding-right: 10px; }
.feld.zweiteilig .ort { border-left: 1px solid var(--linie); padding-left: 14px; }
.feld.zweiteilig .plz.unbekannt { color: var(--warn); }
.feld input[list]::-webkit-calendar-picker-indicator { display: none !important; }
@media (max-width: 600px) { .feld.zweiteilig { grid-template-columns: 44px 104px 1fr; } .feld.zweiteilig .plz { padding-right: 6px; } .feld.zweiteilig .ort { padding-left: 10px; } }
.arten { display: flex; gap: 8px; flex-wrap: wrap; }
.art { padding: 9px 14px; border-radius: 999px; border: 1px solid var(--linie-2); background: transparent; cursor: pointer; font-weight: 500; font-size: 14px; color: var(--text-2); transition: all .15s; }
.art[aria-pressed="true"] { background: var(--text); color: var(--grund); border-color: var(--text); }
.art:hover:not([aria-pressed="true"]) { border-color: var(--text-2); color: var(--text); }
.nebenwahl { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; font-size: 14px; color: var(--text-2); }
.nebenwahl select, .nebenwahl input { padding: 8px 10px; border: 1px solid var(--linie-2); border-radius: var(--radius-klein); background: var(--flaeche); font-size: 14px; }
.nebenwahl input[type=number] { width: 72px; }
.anzeigen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.anzeige { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 14px 16px 12px; min-height: 96px; }
.anzeige .name { font: 600 11px/1 var(--schrift-zahl); letter-spacing: .12em; text-transform: uppercase; color: var(--leise); margin-bottom: 10px; }
.anzeige .wert { font-family: var(--schrift-display); font-variation-settings: "wdth" 100; font-weight: 800; font-size: 32px; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.anzeige .wert small { font-size: 16px; font-weight: 600; color: var(--text-2); margin-left: 3px; }
.anzeige .wert.lang { font-size: 23px; line-height: 1.15; }
.anzeige .neben { font-size: 12.5px; color: var(--leise); margin-top: 6px; min-height: 18px; }
.anzeige.leer .wert { color: var(--leise); }
.anzeige.preis .wert { color: var(--amber-2); }
.knopfzeile { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.knopfzeile .hinweis { font-size: 13px; color: var(--leise); margin-left: 6px; }
@media (max-width: 560px) { .anzeigen { grid-template-columns: 1fr; } .anzeige { min-height: 0; } }

.held-karte { position: relative; border-radius: 22px; overflow: hidden; background: var(--karte-grund); border: 1px solid var(--linie); box-shadow: var(--schatten); min-height: 460px; }
.held-karte canvas, .verfolgung-karte canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.karte-schild { position: absolute; left: 18px; top: 18px; display: flex; gap: 8px; align-items: center; padding: 8px 12px; background: rgba(233, 236, 240, .82); border: 1px solid var(--linie); border-radius: 999px; font: 600 12px/1 var(--schrift-zahl); letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); backdrop-filter: blur(6px); }
.puls { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(29, 138, 88, .6); animation: puls 2.2s infinite; display: inline-block; }
@keyframes puls { 0% { box-shadow: 0 0 0 0 rgba(29, 138, 88, .55); } 70% { box-shadow: 0 0 0 10px rgba(29, 138, 88, 0); } 100% { box-shadow: 0 0 0 0 rgba(29, 138, 88, 0); } }
.karte-fuss { position: absolute; left: 18px; right: 18px; bottom: 18px; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; pointer-events: none; }
.karte-fuss .strecke { font-family: var(--schrift-zahl); font-weight: 600; font-size: 14px; color: var(--text-2); background: rgba(233, 236, 240, .82); border: 1px solid var(--linie); padding: 8px 12px; border-radius: 10px; }
.karte-fuss .quelle { font-size: 11px; color: var(--karte-text); }

/* Freitext */
.freitext { margin: -20px 0 70px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 22px; padding: 28px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; }
.freitext[hidden] { display: none; }
@media (max-width: 900px) { .freitext { grid-template-columns: 1fr; } }
.freitext textarea { width: 100%; min-height: 128px; resize: vertical; background: var(--grund-2); border: 1px solid var(--linie-2); border-radius: var(--radius); padding: 16px; font-size: 18px; line-height: 1.5; }
.freitext .beispiele { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.freitext .beispiele button { background: transparent; border: 1px dashed var(--linie-2); color: var(--text-2); border-radius: 999px; padding: 6px 12px; font-size: 13px; cursor: pointer; }
.verstanden { background: var(--grund-2); border: 1px solid var(--linie); border-radius: var(--radius); padding: 18px 20px; }
.verstanden dl { display: grid; grid-template-columns: 110px 1fr; gap: 8px 14px; margin: 12px 0 0; }
.verstanden dt { font: 600 11px/1.6 var(--schrift-zahl); letter-spacing: .12em; text-transform: uppercase; color: var(--leise); }
.verstanden dd { margin: 0; font-weight: 500; }
.verstanden dd.offen { color: var(--leise); font-weight: 400; }

/* Abschnitte */
.abschnitt { padding: 70px 0; border-top: 1px solid var(--linie); }
.abschnitt-kopf { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: end; margin-bottom: 36px; }
.abschnitt-kopf p { margin: 0; color: var(--text-2); max-width: 52ch; font-size: 17px; }
@media (max-width: 900px) { .abschnitt-kopf { grid-template-columns: 1fr; } }

/* Leistungen: drei Spuren */
.spuren { display: grid; gap: 1px; background: var(--linie); border: 1px solid var(--linie); border-radius: 20px; overflow: hidden; }
.spur { display: grid; grid-template-columns: 1.1fr 1.6fr 220px; gap: 30px; align-items: center; padding: 28px 30px; background: var(--flaeche); transition: background .15s; text-decoration: none; color: inherit; }
.spur:hover { background: var(--flaeche-2); }
.spur .titel { display: flex; align-items: center; gap: 14px; }
.spur .titel .icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--grund-2); border: 1px solid var(--linie-2); flex: none; }
.spur .titel .icon svg { width: 22px; height: 22px; fill: none; stroke: var(--amber-2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.spur p { margin: 0; color: var(--text-2); }
.spur .preis { text-align: right; }
.spur .preis .ab { font: 600 11px/1 var(--schrift-zahl); letter-spacing: .12em; text-transform: uppercase; color: var(--leise); }
.spur .preis .wert { font-family: var(--schrift-display); font-variation-settings: "wdth" 100; font-weight: 800; font-size: 30px; letter-spacing: -.02em; }
.spur .preis .wert small { font-size: 14px; color: var(--text-2); font-weight: 600; }
@media (max-width: 900px) { .spur { grid-template-columns: 1fr; gap: 12px; } .spur .preis { text-align: left; } }

/* Reichweite: vier Ringe wie im Zeichen */
.reichweite { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 50px; align-items: center; }
@media (max-width: 900px) { .reichweite { grid-template-columns: 1fr; } }
.ringe { max-width: 520px; margin: 0 auto; width: 100%; }
.ringe svg { width: 100%; height: auto; display: block; }
.ringe .r { fill: none; stroke: var(--linie-2); stroke-width: 10; }
.ringe .r.nah { stroke: var(--text-2); opacity: .55; }
.ringe .name { font: 600 11px var(--schrift-zahl); letter-spacing: .12em; text-transform: uppercase; fill: var(--leise); }
.ringe .name.hell { fill: var(--text-2); }
.ringe .linie { stroke: var(--amber); stroke-width: 12; }
.ringe .punkt { fill: var(--amber); }
.ringe .punkt-mitte { fill: var(--grund); }
.stufen { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--linie); border: 1px solid var(--linie); border-radius: 18px; overflow: hidden; }
.stufen li { display: grid; grid-template-columns: 40px 1fr auto; gap: 16px; align-items: center; padding: 16px 20px; background: var(--flaeche); }
.stufen .nr { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--amber); color: var(--amber-2); font: 700 13px var(--schrift-zahl); }
.stufen b { display: block; font-weight: 600; }
.stufen div span { font-size: 13.5px; color: var(--leise); }
.stufen .zeit { font-weight: 600; font-size: 14px; color: var(--text-2); white-space: nowrap; }
@media (max-width: 560px) { .stufen li { grid-template-columns: 40px 1fr; } .stufen .zeit { grid-column: 2; } }

/* Das Werk */
.werk { display: grid; grid-template-columns: 340px 1fr; gap: 50px; align-items: center; }
@media (max-width: 900px) { .werk { grid-template-columns: 1fr; } }
.ring { position: relative; width: 340px; max-width: 100%; aspect-ratio: 1; margin: 0 auto; }
.ring svg { width: 100%; height: 100%; display: block; transform: rotate(-90deg); }
.ring .seg { fill: var(--linie-2); transition: fill .6s; }
.ring .seg.an { fill: var(--amber); }
.ring .mitte { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring .mitte .zahl { font-family: var(--schrift-display); font-variation-settings: "wdth" 100; font-weight: 800; font-size: 72px; line-height: 1; letter-spacing: -.03em; }
.ring .mitte .name { font: 600 11px/1.5 var(--schrift-zahl); letter-spacing: .12em; text-transform: uppercase; color: var(--leise); }
.werk-zahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 26px; }
.werk-zahl { border-left: 2px solid var(--amber); padding-left: 14px; }
.werk-zahl .wert { font-family: var(--schrift-display); font-variation-settings: "wdth" 100; font-weight: 800; font-size: 30px; letter-spacing: -.02em; line-height: 1.1; }
.werk-zahl .wert small { font-size: 16px; color: var(--text-2); }
.werk-zahl .name { font-size: 13px; color: var(--leise); }
@media (max-width: 560px) { .werk-zahlen { grid-template-columns: 1fr; } }

/* Verfolgung */
.verfolgung { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: stretch; }
@media (max-width: 900px) { .verfolgung { grid-template-columns: 1fr; } }
.verlauf { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 20px; padding: 26px 28px; }
.verlauf .kopfzeile { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 18px; flex-wrap: wrap; }
.verlauf .kopfzeile b { font-family: var(--schrift-zahl); font-weight: 600; font-size: 15px; }
.plakette { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(29, 138, 88, .12); color: var(--ok); font: 600 12px/1 var(--schrift-zahl); letter-spacing: .06em; text-transform: uppercase; }
.plakette.still { background: var(--grund-2); color: var(--leise); }
.plakette.warn { background: rgba(180, 35, 24, .1); color: var(--warn); }
.schritte { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.schritt { display: grid; grid-template-columns: 78px 22px 1fr; gap: 12px; align-items: start; padding: 9px 0; position: relative; }
.schritt .zeit { font-family: var(--schrift-zahl); font-weight: 600; font-size: 14px; color: var(--text-2); padding-top: 2px; }
.schritt .punkt { width: 12px; height: 12px; border-radius: 50%; background: var(--linie-2); margin-top: 6px; position: relative; z-index: 1; }
.schritt.fertig .punkt { background: var(--ok); }
.schritt.jetzt .punkt { background: var(--amber); box-shadow: 0 0 0 5px var(--amber-glow); }
.schritt:not(:last-child)::after { content: ""; position: absolute; left: 95px; top: 26px; bottom: -8px; width: 2px; background: var(--linie); }
.schritt.fertig:not(:last-child)::after { background: var(--ok); opacity: .6; }
.schritt .was { font-weight: 600; }
.schritt .wo { font-size: 13.5px; color: var(--leise); }
.schritt.offen .was { color: var(--leise); font-weight: 500; }
.verfolgung-karte { position: relative; border-radius: 20px; overflow: hidden; border: 1px solid var(--linie); background: var(--karte-grund); min-height: 320px; }
.fotos { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.foto { width: 64px; height: 48px; border-radius: 8px; background: linear-gradient(135deg, var(--flaeche-2), var(--linie-2)); border: 1px solid var(--linie-2); display: grid; place-items: center; font-size: 10px; color: var(--leise); }
.nachweis { border-top: 1px solid var(--linie); padding: 12px 0; }
.nachweis b { font-weight: 600; }

/* Versprechen */
.versprechen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--linie); border: 1px solid var(--linie); border-radius: 20px; overflow: hidden; }
.versprechen div { background: var(--flaeche); padding: 26px 28px; }
.versprechen h3 { margin-bottom: 8px; }
.versprechen p { margin: 0; color: var(--text-2); }
@media (max-width: 900px) { .versprechen { grid-template-columns: 1fr; } }

/* Fuss */
.fuss { border-top: 1px solid var(--linie); padding: 40px 0 50px; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 30px; color: var(--text-2); font-size: 14px; }
.fuss .marke { margin-bottom: 12px; }
.fuss .marke b { font-size: 20px; }
.fuss p { margin: 0 0 6px; max-width: 52ch; }
.fuss a { color: var(--text-2); text-decoration: none; }
.fuss a:hover { color: var(--text); }
.fuss .spalte b { display: block; color: var(--text); margin-bottom: 8px; font-weight: 600; }
@media (max-width: 1000px) { .fuss { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .fuss { grid-template-columns: 1fr; } }

/* Unterseiten: Bestellen, Danke, Verfolgen, Recht */
.unterseite { padding: 20px 0 60px; }
.unterseite > .eyebrow + h1, .unterseite > .eyebrow + h2 { margin-top: 12px; }
.unterseite p.lead { font-size: 18px; color: var(--text-2); max-width: 60ch; margin: 14px 0 0; }
.bestellung { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: 30px; align-items: start; margin-top: 30px; }
@media (max-width: 900px) { .bestellung { grid-template-columns: 1fr; } }
.kasten { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 20px; padding: 26px 28px; margin-bottom: 18px; }
.kasten h2 { font-size: 24px; margin-bottom: 6px; }
.kasten h3 { margin-bottom: 8px; }
.kasten p { margin: 0 0 12px; color: var(--text-2); }
.kasten.fest { position: sticky; top: 16px; }
.reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .reihe { grid-template-columns: 1fr; } }
.eingabe { display: block; margin-top: 12px; }
.eingabe > span { display: block; font: 600 11px/1.6 var(--schrift-zahl); letter-spacing: .12em; text-transform: uppercase; color: var(--leise); margin-bottom: 4px; }
.eingabe input, .eingabe select, .eingabe textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--linie-2); border-radius: var(--radius-klein); background: var(--flaeche); font-size: 16px; }
.eingabe input:focus, .eingabe select:focus, .eingabe textarea:focus { border-color: var(--amber); box-shadow: 0 0 0 4px var(--amber-glow); outline: none; }
.eingabe textarea { min-height: 84px; resize: vertical; }
.haken { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: 14.5px; color: var(--text-2); }
.haken input { width: 18px; height: 18px; margin-top: 3px; flex: none; }
.preisblock { background: var(--text); color: #fff; border-radius: 16px; padding: 20px 22px; }
.preisblock .name { font: 600 11px/1 var(--schrift-zahl); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.preisblock .gross { font-family: var(--schrift-display); font-variation-settings: "wdth" 100; font-weight: 800; font-size: 40px; letter-spacing: -.02em; line-height: 1.05; color: #f0a852; margin: 8px 0 4px; }
.preisblock .zeilen { font-size: 13.5px; margin-top: 12px; border-top: 1px solid rgba(255, 255, 255, .18); padding-top: 10px; }
.preisblock .zeilen div { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; color: rgba(255, 255, 255, .85); }
.preisblock .zeilen div.summe { border-top: 1px solid rgba(255, 255, 255, .18); margin-top: 6px; padding-top: 6px; color: #fff; font-weight: 600; }
.preisblock .neben { font-size: 13px; color: rgba(255, 255, 255, .7); }
.meldung { padding: 14px 16px; border-radius: var(--radius-klein); margin: 16px 0; font-size: 15px; }
.meldung.ok { background: rgba(29, 138, 88, .1); border: 1px solid rgba(29, 138, 88, .35); color: #135c3a; }
.meldung.warn { background: rgba(180, 35, 24, .08); border: 1px solid rgba(180, 35, 24, .3); color: #7d1a12; }
.tabelle { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabelle th, .tabelle td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.tabelle th { font: 600 11px/1.6 var(--schrift-zahl); letter-spacing: .12em; text-transform: uppercase; color: var(--leise); width: 160px; }
.rechtstext { max-width: 72ch; font-size: 16px; }
.rechtstext p { margin: 0 0 14px; }
.leiste { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0 22px; }
.leiste a { background: transparent; border: 1px solid var(--linie-2); border-radius: 999px; padding: 8px 15px; text-decoration: none; color: var(--text-2); font-size: 14.5px; font-weight: 500; }
.leiste a.aktiv { background: var(--text); border-color: var(--text); color: var(--grund); }

/* Kundenportal (1.97): dieselbe Werkhalle, Marke aus der Adresse (Farbe, Logo, Telefon) */
.kopf.konto { gap: 18px; flex-wrap: wrap; }
.kopf.konto .marke .konto-wort { font: 600 11px/1 var(--schrift-zahl); letter-spacing: .14em; text-transform: uppercase; color: var(--leise); margin-left: 4px; padding-left: 12px; border-left: 1px solid var(--linie-2); }
.kopf.konto .markenlogo { height: 46px; width: auto; display: block; }
.kopf.konto nav { margin-left: 10px; }
.kopf.konto .rechts .wer { font-size: 13.5px; color: var(--text-2); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kopf.konto .rechts .knopf { padding: 9px 16px; font-size: 14px; }
.konto-nav-klein { display: none; gap: 6px; overflow-x: auto; padding: 0 0 12px; margin: -6px 0 6px; scrollbar-width: none; }
.konto-nav-klein a { flex: none; text-decoration: none; color: var(--text-2); font-size: 14px; font-weight: 500; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--linie-2); background: var(--flaeche); }
.konto-nav-klein a.aktiv { background: var(--text); border-color: var(--text); color: var(--grund); }
@media (max-width: 900px) { .konto-nav-klein { display: flex; } .kopf.konto .rechts .wer { display: none; } .kopf.konto .marke .konto-wort { display: none; } }
@media (max-width: 600px) { .kopf.konto .rechts .knopf { padding: 8px 12px; font-size: 13px; } }
.konto-seite main.unterseite { padding-top: 14px; min-height: 60vh; }
.konto-seite h1.mittel { font-size: clamp(28px, 4vw, 44px); }
.kopfzeile-konto { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.kopfzeile-konto .knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.anmeldebox { max-width: 460px; margin: 30px auto 50px; }
.anmeldebox .kasten { padding: 30px 32px; }
.anmeldebox h1 { font-size: 30px; margin-bottom: 4px; }
.anmeldebox p.lead { font-size: 15.5px; margin: 0 0 6px; }
.anmeldebox .neben { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; margin-top: 16px; }
.anmeldebox .neben a { color: var(--text-2); }
.zweispaltig { display: grid; grid-template-columns: 1.1fr .9fr; gap: 30px; align-items: start; }
@media (max-width: 900px) { .zweispaltig { grid-template-columns: 1fr; } }
/* Kennzahlen (offene Posten) */
.kennzahlen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--linie); border: 1px solid var(--linie); border-radius: 20px; overflow: hidden; margin-bottom: 22px; }
.kennzahlen > div { background: var(--flaeche); padding: 18px 20px; }
.kennzahlen .name { font: 600 11px/1.5 var(--schrift-zahl); letter-spacing: .12em; text-transform: uppercase; color: var(--leise); }
.kennzahlen .wert { font-family: var(--schrift-display); font-variation-settings: "wdth" 100; font-weight: 800; font-size: 28px; letter-spacing: -.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.kennzahlen .wert.warn { color: var(--warn); }
.kennzahlen .wert.ok { color: var(--ok); }
.kennzahlen .neben { font-size: 13px; color: var(--leise); margin-top: 2px; }
@media (max-width: 800px) { .kennzahlen { grid-template-columns: 1fr 1fr; } }
/* Listen */
.liste { width: 100%; border-collapse: collapse; font-size: 15px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 16px; overflow: hidden; }
.liste th, .liste td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.liste th { font: 600 11px/1.6 var(--schrift-zahl); letter-spacing: .12em; text-transform: uppercase; color: var(--leise); background: var(--flaeche-2); white-space: nowrap; }
.liste tr:last-child td { border-bottom: 0; }
.liste td.rechts, .liste th.rechts { text-align: right; }
.liste tr.klick { cursor: pointer; }
.liste tr.klick:hover td { background: var(--flaeche-2); }
.liste a.still { color: var(--text); text-decoration: none; }
.liste .nummer { font-family: var(--schrift-zahl); font-weight: 600; white-space: nowrap; }
.liste .zeile2 { display: block; font-size: 13px; color: var(--leise); }
.rollen { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 18px; }
.plakette.fertig { background: rgba(29, 138, 88, .12); color: var(--ok); }
.filter { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 18px; }
.filter input, .filter select { padding: 9px 12px; border: 1px solid var(--linie-2); border-radius: 999px; background: var(--flaeche); font-size: 14.5px; }
.filter input[type=search] { min-width: 220px; }
.filter .knopf { padding: 9px 16px; font-size: 14px; }
/* Auftragsformular */
.station { border-top: 1px solid var(--linie); padding-top: 14px; margin-top: 16px; }
.station:first-of-type { border-top: 0; padding-top: 0; }
.station .titel { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.station .titel h3 { margin: 0; }
.station .stamm { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.station .stamm select { max-width: 320px; padding: 8px 10px; border: 1px solid var(--linie-2); border-radius: var(--radius-klein); background: var(--flaeche); font-size: 14px; }
.station .weg { background: transparent; border: 1px solid var(--linie-2); border-radius: 999px; padding: 6px 12px; font-size: 13px; cursor: pointer; color: var(--text-2); }
.station .weg:hover { border-color: var(--warn); color: var(--warn); }
.reihe3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.reihe3 .eingabe.breit { grid-column: span 2; }
@media (max-width: 640px) { .reihe3 { grid-template-columns: 1fr; } .reihe3 .eingabe.breit { grid-column: auto; } }
.hinweiskasten { background: var(--flaeche-2); border: 1px dashed var(--linie-2); border-radius: 14px; padding: 14px 16px; font-size: 14.5px; color: var(--text-2); }
.hinweiskasten b { color: var(--text); }
/* Auftragsdetail */
.detail-kopf { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 10px 0 0; }
.detail-kopf .nummer { font-family: var(--schrift-zahl); font-weight: 600; font-size: 18px; }
dl.fakten { display: grid; grid-template-columns: 150px 1fr; gap: 6px 14px; margin: 0; font-size: 15px; }
dl.fakten dt { font: 600 11px/1.8 var(--schrift-zahl); letter-spacing: .12em; text-transform: uppercase; color: var(--leise); }
dl.fakten dd { margin: 0; }
@media (max-width: 500px) { dl.fakten { grid-template-columns: 1fr; gap: 2px; } dl.fakten dd { margin-bottom: 8px; } }
.adresskarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.adresskarte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.adresskarte b { font-weight: 600; }
.adresskarte .klein { margin-top: auto; }
.adresskarte .knoepfe { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.adresskarte .knoepfe a { font-size: 13px; padding: 7px 12px; }
.leer { padding: 40px 20px; text-align: center; color: var(--leise); background: var(--flaeche); border: 1px dashed var(--linie-2); border-radius: 20px; }

/* Listen auf dem Handy: jede Zeile eine Karte (1.97) */
@media (max-width: 720px) {
  .rollen { overflow: visible; }
  .liste, .liste tbody, .liste tr, .liste td { display: block; }
  .liste { background: transparent; border: 0; border-radius: 0; }
  .liste tr.kopf { display: none; }
  .liste tr { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 16px; padding: 12px 14px; margin-bottom: 10px; }
  .liste td { border: 0; padding: 4px 0; }
  .liste td.rechts { text-align: left; }
  .liste td[data-l]::before { content: attr(data-l); display: inline-block; min-width: 92px; font: 600 11px/1.6 var(--schrift-zahl); letter-spacing: .12em; text-transform: uppercase; color: var(--leise); margin-right: 8px; vertical-align: top; }
  .liste td[data-l] .zeile2 { display: inline; margin-left: 6px; }
  .liste td.oben { padding-bottom: 8px; border-bottom: 1px solid var(--linie); margin-bottom: 4px; }
}

/* ===== 1.99: Die drei Tore (Startseite) ===== */
.tor-kopf { padding: 26px 0 26px; max-width: 760px; }
.tor-kopf h1 { font-size: clamp(38px, 5.6vw, 72px); }
.tor-kopf .lead { font-size: 18px; color: var(--text-2); max-width: 62ch; margin: 16px 0 0; }
.tor-kopf .lead a { color: var(--text); font-weight: 500; }
.tore { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 40px; }
@media (max-width: 960px) { .tore { grid-template-columns: 1fr; } }
.tor { display: flex; flex-direction: column; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 22px; overflow: hidden; text-decoration: none; color: inherit;
  transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s, border-color .22s; box-shadow: 0 8px 24px rgba(15, 26, 43, .06); }
.tor:hover, .tor:focus-visible { transform: translateY(-4px); box-shadow: var(--schatten); border-color: var(--linie-2); }
.tor:focus-visible { outline: 2px solid var(--amber-2); outline-offset: 4px; }
.tor.geht { transform: scale(.985); opacity: .85; }
.tor-szene { position: relative; aspect-ratio: 4 / 3; background: var(--karte-grund); border-bottom: 1px solid var(--linie); overflow: hidden; }
.tor-szene canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* Das Werkhallentor: Lamellen, fährt nach oben */
.tor-tuer { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center;
  background: repeating-linear-gradient(180deg, var(--grund-2) 0 34px, var(--linie) 34px 36px, var(--flaeche-2) 36px 40px);
  border-bottom: 6px solid var(--text-2); transform: translateY(0); transition: transform 2.1s cubic-bezier(.6, 0, .18, 1); }
.tor-tuer::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.25), rgba(15,26,43,.08)); pointer-events: none; }
.tor-tuer::after { content: ""; position: absolute; left: 50%; bottom: 10px; width: 46px; height: 8px; margin-left: -23px; border-radius: 4px; background: var(--amber); box-shadow: 0 0 0 3px var(--amber-glow); }
.tor-schild { position: relative; z-index: 1; font: 600 12px/1 var(--schrift-zahl); letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); background: var(--flaeche); border: 1px solid var(--linie-2); padding: 10px 16px; border-radius: 999px; }
.tor.offen .tor-tuer { transform: translateY(-104%); }
.tore-sofort .tor-tuer { transition: none; }
.tor-text { padding: 20px 22px 22px; display: grid; gap: 10px; }
.tor-kopf-zeile, .tor-text .tor-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0; max-width: none; }
.tor-text h2 { font-size: 22px; margin: 0; }
.tor-preis { font-family: var(--schrift-display); font-variation-settings: "wdth" 100; font-weight: 800; font-size: 22px; letter-spacing: -.02em; white-space: nowrap; color: var(--amber-2); display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1; }
.tor-preis small { font: 600 10px/1.4 var(--schrift-zahl); letter-spacing: .12em; text-transform: uppercase; color: var(--leise); }
.tor-text p { margin: 0; color: var(--text-2); font-size: 15px; min-height: 3.2em; }
.tor-knopf { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 10px 16px; border-radius: 999px; background: var(--text); color: var(--grund); font-weight: 600; font-size: 14px; transition: gap .2s, background .2s; }
.tor:hover .tor-knopf { gap: 14px; background: var(--amber-2); color: #fff; }
.tor[data-tor="zustellung"] .tor-knopf { background: var(--amber); color: #14100a; }
.tor[data-tor="zustellung"]:hover .tor-knopf { background: var(--amber-2); color: #fff; }

/* ===== 1.99: Sparten-Seiten ===== */
.sparte-zeile { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sparte-name { font: 600 12px/1 var(--schrift-zahl); letter-spacing: .14em; text-transform: uppercase; color: var(--text); background: var(--flaeche); border: 1px solid var(--linie-2); padding: 9px 14px; border-radius: 999px; }
.sparte-wechsel { font-size: 13.5px; color: var(--text-2); }
.faelle { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--linie); border: 1px solid var(--linie); border-radius: 20px; overflow: hidden; }
.fall { background: var(--flaeche); padding: 24px 26px; }
.fall h3 { font-size: 19px; margin-bottom: 8px; }
.fall p { margin: 0; color: var(--text-2); font-size: 15px; }
@media (max-width: 900px) { .faelle { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .faelle { grid-template-columns: 1fr; } }
.schritte-sparte { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--linie); border: 1px solid var(--linie); border-radius: 18px; overflow: hidden; }
.schritte-sparte li { display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: start; padding: 18px 22px; background: var(--flaeche); }
.schritte-sparte .nr { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--linie-2); color: var(--text-2); font-weight: 700; font-size: 14px; }
.schritte-sparte li.ihrer .nr { border-color: var(--amber); color: var(--amber-2); background: var(--amber-glow); }
.schritte-sparte li.ihrer { background: var(--flaeche-2); }
.schritte-sparte b { display: block; font-weight: 600; font-size: 16.5px; }
.schritte-sparte li div span { display: block; color: var(--text-2); font-size: 14.5px; margin-top: 3px; }
.urteil { display: grid; grid-template-columns: 260px 1fr; gap: 28px; align-items: start; background: var(--flaeche); border: 1px solid var(--linie); border-left: 4px solid var(--amber); border-radius: 20px; padding: 26px 30px; }
.urteil-marke b { display: block; font-size: 14px; margin-top: 8px; color: var(--text); }
.urteil p { margin: 0 0 10px; color: var(--text-2); font-size: 16px; }
.urteil p strong { color: var(--text); }
@media (max-width: 800px) { .urteil { grid-template-columns: 1fr; } }
/* Beweiskette */
.beweiskette { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; position: relative; }
.glied { display: grid; grid-template-columns: 56px 64px 1fr; gap: 18px; align-items: start; padding: 22px 0; position: relative; }
.glied::before { content: ""; position: absolute; left: 27px; top: 0; bottom: 0; width: 2px; background: var(--linie); }
.glied::after { content: ""; position: absolute; left: 27px; top: 0; width: 2px; height: 0; background: var(--amber); transition: height .55s cubic-bezier(.2,.7,.2,1); }
.glied.zu::after { height: 100%; }
.glied:first-child::before, .glied:first-child::after { top: 30px; }
.glied-nr { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--grund); border: 2px solid var(--linie-2); color: var(--leise); font-weight: 700; font-size: 16px; position: relative; z-index: 1; transition: border-color .35s, color .35s, background .35s, transform .35s; }
.glied.zu .glied-nr { border-color: var(--amber); color: var(--amber-2); background: var(--flaeche); transform: scale(1.06); box-shadow: 0 0 0 6px var(--amber-glow); }
.glied-zeichen { width: 64px; height: 64px; border-radius: 16px; background: var(--flaeche); border: 1px solid var(--linie); display: grid; place-items: center; transition: transform .45s cubic-bezier(.2,.7,.2,1), opacity .45s; opacity: .55; transform: translateX(-8px); }
.glied-zeichen svg { width: 36px; height: 36px; fill: none; stroke: var(--text); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.glied-zeichen svg .a { stroke: var(--amber-2); stroke-width: 2; }
.glied.zu .glied-zeichen { opacity: 1; transform: translateX(0); }
.glied h3 { font-size: 20px; margin-bottom: 6px; transition: color .35s; }
.glied p { margin: 0; color: var(--text-2); max-width: 60ch; }
.glied:not(.zu) h3 { color: var(--leise); }
.kette-ende { display: grid; grid-template-columns: 240px 1fr; gap: 30px; align-items: center; margin-top: 20px; padding: 26px 30px; background: var(--flaeche); border: 1px solid var(--linie); border-radius: 20px; }
.stempel { justify-self: center; display: inline-flex; flex-direction: column; align-items: center; padding: 14px 22px; border: 3px solid var(--amber-2); border-radius: 10px; color: var(--amber-2); transform: rotate(-6deg) scale(2.2); opacity: 0; transition: transform .3s cubic-bezier(.2, 1.4, .3, 1), opacity .2s; }
.stempel::before { content: ""; position: absolute; inset: 5px; border: 1px solid var(--amber-2); border-radius: 6px; }
.stempel span { font-family: var(--schrift-display); font-variation-settings: "wdth" 110; font-weight: 800; font-size: 26px; letter-spacing: .04em; text-transform: uppercase; line-height: 1; }
.stempel small { font-size: 12px; font-weight: 600; margin-top: 4px; }
.kette-ende.zu .stempel { transform: rotate(-6deg) scale(1); opacity: 1; }
.kette-zeuge { color: var(--text-2); font-size: 16px; }
.kette-zeuge b { color: var(--text); }
@media (max-width: 700px) { .glied { grid-template-columns: 44px 1fr; } .glied-zeichen { display: none; } .glied-nr { width: 44px; height: 44px; font-size: 14px; } .glied::before, .glied::after { left: 21px; } .kette-ende { grid-template-columns: 1fr; } }
/* Einschreiben gegen Bote */
.vergleich { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 20px; overflow: hidden; }
.vergleich-schalter { position: relative; display: grid; grid-template-columns: 1fr 1fr; background: var(--grund-2); border-bottom: 1px solid var(--linie); }
.vergleich-schalter button { position: relative; z-index: 1; padding: 16px 12px; background: transparent; border: 0; cursor: pointer; font-weight: 600; font-size: 15.5px; color: var(--text-2); transition: color .25s; }
.vergleich-schalter button[aria-selected="true"] { color: var(--text); }
.schalter-marke { position: absolute; top: 6px; bottom: 6px; left: 6px; width: calc(50% - 12px); border-radius: 12px; background: var(--flaeche); border: 1px solid var(--linie-2); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.vergleich[data-seite="bote"] .schalter-marke { transform: translateX(calc(100% + 12px)); }
.vergleich[data-seite="bote"] .vergleich-schalter button[aria-selected="true"] { color: var(--amber-2); }
.vergleich-zeilen { margin: 0; }
.vergleich-zeile { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 16px 24px; border-bottom: 1px solid var(--linie); }
.vergleich-zeile:last-child { border-bottom: 0; }
.vergleich-zeile dt { font: 600 11px/1.8 var(--schrift-zahl); letter-spacing: .12em; text-transform: uppercase; color: var(--leise); }
.vergleich-zeile dd { margin: 0; font-size: 15.5px; color: var(--text-2); transition: opacity .3s, transform .3s; }
.vergleich-zeile dd[data-seite="bote"] { color: var(--text); }
.vergleich[data-seite="einschreiben"] dd[data-seite="bote"], .vergleich[data-seite="bote"] dd[data-seite="einschreiben"] { display: none; }
.vergleich[data-seite="bote"] dd[data-seite="bote"] { animation: einblenden .35s both; }
@keyframes einblenden { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) { .vergleich-zeile { grid-template-columns: 1fr; gap: 4px; } }
/* Praxis und Fragen */
.praxis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.praxis-fall { background: var(--flaeche); border: 1px solid var(--linie); border-radius: 18px; padding: 24px 26px; }
.praxis-fall h3 { font-size: 20px; margin: 8px 0 8px; }
.praxis-fall p { margin: 0; color: var(--text-2); font-size: 15px; }
@media (max-width: 800px) { .praxis { grid-template-columns: 1fr; } }
.faq { display: grid; gap: 1px; background: var(--linie); border: 1px solid var(--linie); border-radius: 18px; overflow: hidden; }
.frage { background: var(--flaeche); }
.frage summary { cursor: pointer; padding: 16px 22px; font-weight: 600; font-size: 16px; list-style: none; display: flex; justify-content: space-between; gap: 14px; align-items: center; }
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after { content: "+"; font: 600 20px/1 var(--schrift-zahl); color: var(--amber-2); flex: none; transition: transform .25s; }
.frage[open] summary::after { transform: rotate(45deg); }
.frage p { margin: 0; padding: 0 22px 18px; color: var(--text-2); max-width: 70ch; }
/* Beiladung */
.beiladung-szene { position: relative; border-radius: 20px; overflow: hidden; border: 1px solid var(--linie); background: var(--karte-grund); aspect-ratio: 21 / 9; min-height: 240px; }
.beiladung-szene canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.beiladung-schild { position: absolute; left: 18px; top: 18px; background: rgba(233, 236, 240, .86); border: 1px solid var(--linie); border-radius: 12px; padding: 10px 14px; backdrop-filter: blur(6px); max-width: 60%; }
.beiladung-schild b { display: block; font-size: 15px; margin-top: 4px; }

/* Preis als Angebot per E-Mail (2.03) */
.angebot-kasten { margin-top: 4px; background: var(--flaeche); border: 1px dashed var(--linie-2); border-radius: 14px; padding: 16px 18px; }
.angebot-zeile { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.angebot-zeile input { flex: 1; min-width: 200px; padding: 13px 14px; font: inherit; color: var(--text); background: var(--grund); border: 1px solid var(--linie); border-radius: 12px; }
.angebot-zeile input:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-glow); }

/* ---------- Rechtssichere Zustellung als Zusatz (2.43) ----------
   Der Kunde bestellt hier keinen schnelleren Kurier, sondern einen Boten, der
   bezeugen kann, was im Umschlag war. Deshalb steht die Erklärung gleich dabei
   und nicht hinter einem Fragezeichen. */
.zustell-option { margin: 14px 0 4px; background: var(--flaeche-2); border: 1px solid var(--linie);
  border-left: 4px solid var(--amber); border-radius: 14px; padding: 14px 16px; }
.zo-kopf { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 16px; }
.zo-kopf input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--amber); }
.zo-preis { display: block; color: var(--amber-2); font-weight: 600; font-size: 14px; margin-top: 2px; }
.zo-text { margin: 8px 0 0 30px; color: var(--text-2); font-size: 14.5px; line-height: 1.55; }
.zo-fern { color: var(--warn); }
/* Was diese Marke nicht anbietet - ein Satz, kein Werbeblock */
.quer-verweis { margin: 12px 0 0; padding: 10px 14px; background: var(--karte-grund);
  border: 1px dashed var(--karte-linie-2); border-radius: 12px; color: var(--text-2); font-size: 14.5px; }
.quer-verweis a { color: var(--blau); font-weight: 600; white-space: nowrap; }

/* 2.227 – Fahrtenwerk neu: Fahrzeuge mit ab-Preis, Verweis Kündigungskurier, Fragen, Anfrageformulare */
[hidden] { display: none !important; }
.faelle-vier { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .faelle-vier { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .faelle { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .faelle, .faelle-vier { grid-template-columns: 1fr; } }
.fall-link { text-decoration: none; color: inherit; display: block; }
.fall-link:hover { background: var(--flaeche-2); }
.fall h3 .fall-preis, .fall-preis { display: block; margin-top: 6px; font: 600 13px/1.3 var(--schrift-zahl); letter-spacing: .04em; color: var(--amber-2); }
.verweis-kk { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 40px; background: var(--flaeche);
  border: 1px solid var(--linie); border-left: 4px solid var(--amber); border-radius: 20px; padding: 28px 30px; }
.verweis-kk > div { flex: 1 1 420px; min-width: 0; }
.verweis-kk p { margin: 0; color: var(--text-2); max-width: 60ch; }
.fragen-liste { margin: 0; border-top: 1px solid var(--linie); max-width: 900px; }
.fragen-liste div { padding: 18px 0; border-bottom: 1px solid var(--linie); }
.fragen-liste dt { font-weight: 600; font-size: 17px; margin-bottom: 6px; }
.fragen-liste dd { margin: 0; color: var(--text-2); }
.seiten-held { padding-top: 30px; }
.seiten-held h1 { font-size: clamp(36px, 5vw, 66px); }
.anfrage-formular { max-width: 1040px; }
.anfrage-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.anfrage-zwei .kasten { margin-bottom: 18px; }
@media (max-width: 900px) { .anfrage-zwei { grid-template-columns: 1fr; } }
.reihe.reihe-drei { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) { .reihe, .reihe.reihe-drei { grid-template-columns: 1fr; } }
.wahl-liste { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; font-size: 15.5px; }
.wahl-liste label { display: flex; gap: 10px; align-items: center; }
.wahl-liste.wahl-zeile { flex-direction: row; flex-wrap: wrap; gap: 8px 22px; }
.wahl-liste input, .jn input { width: 18px; height: 18px; accent-color: var(--amber-2); }
.klein-haken { margin-top: 10px; font-size: 14px; }
.fragen-jn { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 16px; }
.fragen-jn > div { border: 1px solid var(--linie); border-radius: var(--radius-klein); padding: 10px 12px; }
.fragen-jn > div > span { display: block; font: 600 11px/1.6 var(--schrift-zahl); letter-spacing: .12em; text-transform: uppercase; color: var(--leise); margin-bottom: 4px; }
.jn { display: flex; gap: 16px; }
.jn label { display: flex; gap: 6px; align-items: center; font-size: 15px; }
@media (max-width: 800px) { .fragen-jn { grid-template-columns: 1fr 1fr; } }
.meldung-gut { border-left: 4px solid #1d8a58; }
.rechtstext h2 { font-size: 22px; margin: 30px 0 10px; }
.rechtstext h3 { font-size: 17px; margin: 22px 0 6px; font-family: var(--schrift-text); font-weight: 600; }
.rechtstext ul { margin: 0 0 14px; padding-left: 22px; }
.rechtstext .stand { font-size: 14px; color: var(--leise); }

/* 2.227: schmale Telefone – Menüknopf neben die Wortmarke statt allein in eine dritte Zeile;
   Kartenfuß untereinander (Strecke und Quellenangabe überlagerten sich); lange „Preise" der Tore
   („beim Kündigungskurier") dürfen unter den Namen rutschen */
@media (max-width: 380px) {
  .kopf .menue-knopf { order: 1; margin-left: auto; }
  .kopf .rechts { order: 2; }
}
@media (max-width: 480px) {
  .karte-fuss { flex-direction: column; align-items: flex-start; gap: 6px; }
  .tor-text .tor-kopf { flex-wrap: wrap; }
  .tor-preis { font-size: 19px; }
}