/* km_konfigurator2 - Frontend-Styles (self-contained).
   Optik seit 3.12.0 nach dem Design-Handoff "Konfigurator-Design fuer Just-Sound"
   (.jsk-Entwurf): zweispaltige Shell, warme Papiertoene, Akzent #ec6707.
   Die Schrift kommt vom Shop-Theme (MyRemake laedt IBM Plex Sans selbst) —
   hier steht sie nur als font-family-Wunsch, es wird NICHTS extern geladen. */
.km-app { --km-accent:#ec6707; --km-accent-dark:#cf5905; --km-accent-ink:#fff;
  /* accent-text: fuer KLEINE Textelemente in Markenfarbe (Eyebrows, "Zum Produkt")
     etwas abgedunkelt, damit der Kontrast auf Weiss 4,5:1 erreicht (WCAG AA).
     muted: warmes Grau, ebenfalls AA-fest (das Design-Original #8d867c lag bei 3,6:1). */
  --km-accent-text:#c25404;
  --km-error:#c0271a; --km-bg:#fff; --km-warm:#faf8f5;
  --km-fg:#16130f; --km-soft:#5c554c; --km-muted:#7a7367;
  --km-line:#eeebe6; --km-border:#e5e2dd; --km-border-strong:#ddd8d1;
  font-family:'IBM Plex Sans',system-ui,sans-serif; -webkit-font-smoothing:antialiased;
  max-width:1400px; margin:0 auto; padding:1rem 0 3rem; color:var(--km-fg); }

/* hidden-Attribut muss das flex/grid-Display schlagen (sonst bleibt Welcome sichtbar) */
.km-app [hidden] { display:none !important; }

/* Grundstil fuer Fliesstext-Links. :where() drueckt die Spezifitaet auf (0,0,1):
   JEDE klassenbasierte Komponentenregel (.km-btn--cta, .km-hilfe__link, …) gewinnt.
   Mit ".km-app a" (0,1,1) uebersteuerte diese Regel einklassige Komponenten — die
   Kontakt-Buttons der Testmodus-Sperrseite wurden orange auf orange (unlesbar). */
:where(.km-app) a { color:var(--km-accent-text); text-decoration:underline; text-underline-offset:2px; }
:where(.km-app) a:hover { color:var(--km-accent); }

/* Dachzeile — kleiner Versal-Schriftzug in der Akzentfarbe (mehrfach genutzt) */
.km-eyebrow { font-size:.66rem; font-weight:600; line-height:1; letter-spacing:.18em;
  text-transform:uppercase; color:var(--km-accent-text); }

.km-btn { display:inline-flex; align-items:center; gap:.4rem; border:1px solid var(--km-border-strong);
  background:var(--km-bg); color:var(--km-fg); border-radius:.55rem; padding:.6rem 1.1rem; font:inherit;
  font-weight:600; font-size:.88rem; cursor:pointer; transition:background .15s,border-color .15s,color .15s; }
.km-btn:hover { border-color:var(--km-accent); color:var(--km-accent-dark); }
.km-btn--cta { background:var(--km-accent); color:var(--km-accent-ink); border-color:var(--km-accent);
  padding:.8rem 1.4rem; }
.km-btn--cta:hover { background:var(--km-accent-dark); color:var(--km-accent-ink); }
.km-btn--ghost { background:transparent; }

/* Sichtbarer Tastaturfokus */
.km-btn:focus-visible,
.km-card:focus-visible,
.km-product:focus-visible,
.km-pfad__item:focus-visible,
.km-zurueck:focus-visible { outline:2px solid var(--km-accent); outline-offset:2px; }

/* Testmodus-Banner (nur fuer eingeloggte Admins sichtbar) */
.km-testbanner { max-width:1400px; margin:1rem auto 0; padding:.7rem 1rem; border-radius:.5rem;
  background:#fff4e5; border:1px solid #ec6707; color:#16130f; font-size:.95rem; }

/* Gesperrte Ansicht im Testmodus (das sehen normale Kunden) */
.km-locked__contact { display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin:1.2rem 0 .6rem; }
.km-locked__contact .km-btn { text-decoration:none; }
.km-locked__hours { color:var(--km-muted); font-size:.9rem; margin:0; }

/* Welcome */
.km-welcome { display:flex; justify-content:center; padding:2rem 0; }
.km-welcome__card { text-align:center; max-width:640px; }
.km-welcome__title { font-size:1.7rem; margin:0 0 .5rem; }
.km-welcome__lead { color:var(--km-muted); margin:0 0 1.4rem; }

/* ============================================================================
   Shell: Seitenleiste links (320px), Hauptbereich rechts — Design .jsk__shell.
   ============================================================================ */
/* minmax statt fixer 320px: in schmalen Shop-Containern (der Breakpoint unten misst
   das FENSTER, nicht den Container) darf die Seitenleiste bis 250px einfedern. */
.km-shell { display:grid; grid-template-columns:minmax(250px,320px) minmax(0,1fr); background:var(--km-bg);
  border:1px solid var(--km-border); border-radius:14px; overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.04); }

.km-aside { background:var(--km-bg); border-right:1px solid var(--km-border);
  padding:1.9rem 1.6rem; display:flex; flex-direction:column; gap:1.5rem; min-width:0; }
.km-aside__brand { display:flex; flex-direction:column; gap:.4rem; }
.km-aside__titel { font-size:1.3rem; font-weight:700; line-height:1.25; }

/* Pfad in der Seitenleiste (Design .jsk__path) */
.km-pfad { display:flex; flex-direction:column; }
.km-pfad__item { display:flex; gap:.75rem; width:100%; padding:.75rem;
  border:0; border-top:1px solid var(--km-line); border-left:3px solid transparent;
  background:none; text-align:left; font:inherit; color:inherit; cursor:default;
  transition:background .15s; }
.km-pfad__item--aktuell { border-left-color:var(--km-accent); background:rgba(236,103,7,.12); }
.km-pfad__item--fertig:not(:disabled) { cursor:pointer; }
.km-pfad__item--fertig:not(:disabled):hover { background:var(--km-warm); }
.km-pfad__marke { display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; margin-top:1px; flex:none; border-radius:50%;
  background:var(--km-accent); border:1.5px solid var(--km-accent); color:#fff;
  font-size:.63rem; font-weight:700; line-height:1; }
.km-pfad__spalte { display:flex; flex-direction:column; gap:.2rem; min-width:0; }
.km-pfad__label { font-size:.66rem; font-weight:600; line-height:1; letter-spacing:.15em;
  text-transform:uppercase; color:var(--km-muted); }
.km-pfad__item--aktuell .km-pfad__label { color:var(--km-accent-text); }
.km-pfad__wert { font-size:.88rem; font-weight:600; line-height:1.35; overflow-wrap:anywhere; }
.km-pfad__hinweis { margin:0; padding:0 .75rem; font-size:.78rem; line-height:1.5; color:var(--km-muted); }

/* Banner-Platz "sidebar" (Design .jsk__asideMedia): schmale Spalte, Figur volle Breite */
.km-sidebanner { display:flex; flex-direction:column; gap:.55rem; padding:1.1rem 0 0;
  border-top:1px solid var(--km-line); }
.km-sidebanner .km-nodebanner__figur { width:100%; }
.km-sidebanner .km-nodebanner__titel { font-size:.9rem; }
.km-sidebanner .km-nodebanner__text { font-size:.8rem; color:var(--km-soft); }

/* Hilfe-Block unten in der Seitenleiste */
.km-hilfe { display:flex; flex-direction:column; gap:.6rem; padding:1.1rem 0 0;
  border-top:1px solid var(--km-line); margin-top:auto; }
.km-hilfe__label { font-size:.66rem; font-weight:600; line-height:1; letter-spacing:.18em;
  text-transform:uppercase; color:var(--km-muted); }
.km-hilfe__text { margin:0; font-size:.84rem; line-height:1.55; color:var(--km-soft); }
.km-hilfe__link { font-size:.95rem; font-weight:600; text-decoration:none; color:var(--km-fg);
  border-bottom:2px solid var(--km-accent); align-self:flex-start; }
.km-hilfe__link:hover { color:var(--km-accent); }

/* Hauptbereich: Kopfzeile, Trennlinie, Inhalt */
.km-main { display:flex; flex-direction:column; min-width:0; }
.km-kopf { display:flex; align-items:center; justify-content:space-between; gap:2rem;
  padding:1.5rem 2rem 1.25rem; min-height:38px; }
.km-kopf__links { display:flex; align-items:center; gap:.9rem; min-width:0; }
.km-kopf__titel { font-size:1.38rem; font-weight:700; line-height:1.2; overflow-wrap:anywhere; }
.km-zurueck { display:inline-flex; flex:none; white-space:nowrap; align-items:center; gap:.4rem;
  border:1px solid var(--km-border-strong); background:var(--km-bg); border-radius:8px;
  padding:.55rem .95rem; font-family:inherit; font-weight:600; font-size:.85rem; line-height:1;
  color:#2b2620; cursor:pointer; transition:border-color .15s,color .15s; }
.km-zurueck:hover { border-color:var(--km-accent); color:var(--km-accent-dark); }
.km-schritt { display:flex; align-items:center; gap:.6rem; white-space:nowrap; flex:none; }
.km-schritt__wort { font-size:.75rem; font-weight:600; line-height:1; letter-spacing:.14em;
  text-transform:uppercase; color:var(--km-muted); }
.km-schritt__nr { display:inline-flex; align-items:center; justify-content:center;
  min-width:26px; height:26px; padding:0 .5rem; border-radius:999px;
  background:var(--km-accent); color:#fff; font-size:.82rem; font-weight:700; line-height:1; }
.km-linie { height:1px; background:var(--km-line); }
.km-inhalt { padding:1.75rem 2rem 2.4rem; }

/* Frage + Zaehlzeile (Design .jsk__questionBlock) */
.km-frageblock { display:flex; flex-direction:column; gap:.25rem; margin:0 0 1.25rem; }
.km-hero { font-size:1.19rem; font-weight:700; line-height:1.3; margin:0; }
.km-hero:empty { display:none; }
.km-anzahl { font-size:.84rem; line-height:1.3; color:var(--km-muted); }
.km-anzahl:empty { display:none; }
.km-frageblock:has(.km-hero:empty):has(.km-anzahl:empty) { margin:0; }

/* Hero ist per JS fokussierbar (tabindex=-1, Fokus wandert bei jedem Schritt dorthin —
   NUR fuer Screenreader, nie per Tab erreichbar). Deshalb den Ring komplett unterdruecken,
   auch fuer :focus-visible: ohne vorherige Maus-/Tastaturaktion wertet der Browser den
   programmatischen Fokus beim Laden eines Deep-Links als "wie Tastatur" und zeigt sonst
   einen Rahmen, der beim ersten Klick irgendwo wieder verschwindet (verwirrend, kein
   sehender Nutzen — man kann den Rahmen ja nie per Tab selbst ausloesen). */
.km-hero:focus, .km-hero:focus-visible { outline:none; }

/* Grid + Karten
   --km-tile-w kommt aus der Plugin-Einstellung "Kachelbreite" (Template setzt sie inline). */
.km-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(var(--km-tile-w,150px),1fr)); gap:1.1rem; }
/* Produktansicht braucht mehr Breite als die Auswahlkacheln (Bild + Name + Preis) */
.km-grid--products { grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); }

.km-card { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.75rem;
  min-width:0; min-height:64px; padding:1.1rem .9rem; text-align:center; background:var(--km-bg);
  border:1px solid var(--km-border); border-radius:12px; cursor:pointer; font:inherit; color:inherit;
  transition:border-color .15s,box-shadow .15s,transform .15s; }
.km-card:hover { border-color:var(--km-accent); box-shadow:0 6px 18px rgba(0,0,0,.07); transform:translateY(-2px); }
.km-card--media { min-height:150px; }
.km-card__img { max-width:100%; max-height:100px; object-fit:contain; mix-blend-mode:multiply; }
.km-card__label { font-weight:600; font-size:.9rem; line-height:1.35; overflow-wrap:anywhere; hyphens:auto; }

/* Gewählte Karte (Restore/Deep-Link zeigt die getroffene Auswahl) */
.km-card--selected { border-color:var(--km-accent); box-shadow:0 0 0 1px var(--km-accent) inset; }

/* Blaetterung der Auswahl-Kacheln */
.km-pager { display:flex; align-items:center; justify-content:center; gap:.8rem; margin-top:1.1rem; flex-wrap:wrap; }
.km-pager__info { color:var(--km-muted); font-size:.88rem; }

/* Banner (Grafik + optionaler Link) ueber/unter dem Konfigurator (Template) */
.km-banner { max-width:1400px; margin:1rem auto 0; }
.km-banner--bottom { margin:1.5rem auto; }
.km-banner img { display:block; width:100%; height:auto; border-radius:.6rem; }

/* Produkte */
.km-product { display:flex; flex-direction:column; gap:.25rem; padding:1.1rem; text-decoration:none;
  color:inherit; background:var(--km-bg); border:1px solid var(--km-border); border-radius:12px;
  transition:border-color .15s,box-shadow .15s,transform .15s; }
.km-app a.km-product { color:inherit; text-decoration:none; }
.km-product:hover { border-color:var(--km-accent); box-shadow:0 6px 18px rgba(0,0,0,.07); transform:translateY(-2px); }
.km-product__img { max-width:100%; max-height:130px; object-fit:contain; align-self:center;
  margin-bottom:.4rem; mix-blend-mode:multiply; }
.km-product__name { font-weight:600; overflow-wrap:anywhere; }
.km-product__price { font-size:1.15rem; font-weight:700; }
.km-product__sku { color:var(--km-muted); font-size:.85rem; }
.km-product__stock { color:#127a38; font-size:.85rem; }
.km-product__cta { color:var(--km-accent-text); font-size:.85rem; font-weight:600; margin-top:.25rem; }

/* Weiter-Button im wiederhergestellten Endzustand */
.km-continue { margin-top:.2rem; }

/* Status / Ladeanzeige / Fehler */
.km-status { min-height:1.5rem; margin-top:1rem; color:var(--km-muted); display:flex; align-items:center; gap:.6rem; }
.km-status--busy::before { content:""; width:1rem; height:1rem; border:2px solid var(--km-line);
  border-top-color:var(--km-accent); border-radius:50%; animation:km-spin .7s linear infinite; }
.km-status--error { color:var(--km-error); }
.km-status--notice { color:var(--km-fg); background:#fff4e5; border:1px solid var(--km-accent);
  border-radius:.5rem; padding:.6rem .9rem; }
.km-empty { color:var(--km-muted); grid-column:1/-1; padding:1rem 0; }

@keyframes km-spin { to { transform:rotate(360deg); } }

/* CTA-Kasten "Mein Modell ist nicht dabei" unter den Kacheln (Design .jsk__banner) */
.km-cta { display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  margin-top:2rem; padding:1.4rem 1.6rem; background:var(--km-bg);
  border:1px solid var(--km-border); border-radius:12px; box-shadow:0 1px 2px rgba(0,0,0,.02); }
.km-cta__text { display:flex; flex-direction:column; gap:.3rem; }
.km-cta__titel { font-size:1rem; font-weight:600; line-height:1.3; }

/* "So funktioniert's" unter der obersten Auswahl (Design .jsk__intro) */
.km-intro { margin-top:2.25rem; padding-top:1.9rem; border-top:1px solid var(--km-line); }
.km-intro__kopf { display:flex; flex-direction:column; gap:.3rem; margin-bottom:1.75rem; }
.km-intro__titel { font-size:1.13rem; font-weight:600; line-height:1.3; }
.km-intro__schritte { display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin:0; padding:0; list-style:none; }
.km-intro__schritt { display:flex; flex-direction:column; gap:.9rem; padding-right:2.1rem; }
.km-intro__reihe { display:flex; align-items:center; }
.km-intro__punkt { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px;
  flex:none; border-radius:50%; background:var(--km-accent); color:#fff; font-size:.88rem; font-weight:700;
  line-height:1; box-shadow:0 0 0 6px var(--km-bg); }
.km-intro__strich { height:1px; flex:1; margin-left:.4rem; margin-right:-2.1rem; background:var(--km-line); }
.km-intro__schritt:last-child .km-intro__strich { display:none; }
.km-intro__korpus { display:flex; flex-direction:column; gap:.45rem; margin-left:2.5rem; margin-right:-2.1rem; }
.km-intro__st { font-size:.94rem; font-weight:600; line-height:1.35; }
.km-intro__sx { font-size:.88rem; line-height:1.6; color:var(--km-soft); }

/* ============================================================================
   Kennzahlen "Konfigurator in Zahlen" (3.22.0) — nur auf der obersten Auswahl.
   Seit 3.22.1 eine ruhige, helle Leiste in den Papiertoenen der uebrigen Hinweiskaesten
   (.km-nodebanner, .km-info) statt der dunklen Werbeflaeche: kleinere Zahlen, getoente
   Symbole, KEINE Animation — die erste Frage soll vorne stehen (Vorgabe Betreiber 29.09.2026).
   Kontraste auf #faf8f5: #16130f, #5c554c und #c25404 (Dachzeile, Symbole) liegen ueber WCAG AA.
   ============================================================================ */
.km-werbung { margin:0 0 1.5rem; padding:1rem 1.35rem 1.05rem; border-radius:12px;
  background:var(--km-warm); border:1px solid var(--km-line); }
.km-werbung__dach { display:block; margin-bottom:.8rem; font-size:.66rem; font-weight:600; line-height:1;
  letter-spacing:.18em; text-transform:uppercase; color:var(--km-accent-text); }
.km-werbung__reihe { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.km-werbung__zahl { display:flex; align-items:flex-start; gap:.8rem; min-width:0; padding-right:1.35rem; }
.km-werbung__zahl + .km-werbung__zahl { padding:0 0 0 1.35rem; border-left:1px solid var(--km-border); }
.km-werbung__symbolrahmen { flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:10px; background:rgba(236,103,7,.10); color:var(--km-accent-text); }
.km-werbung__symbol { width:20px; height:20px; }
.km-werbung__korpus { display:flex; flex-direction:column; gap:.15rem; min-width:0; }
/* Zahl + Beschriftung: bricht um, sobald die Spalte schmal wird (Beschriftung unter die Zahl) */
.km-werbung__zeile { display:flex; flex-wrap:wrap; align-items:baseline; column-gap:.45rem; }
.km-werbung__wert { font-size:1.47rem; font-weight:700; line-height:1.1; letter-spacing:-.01em;
  font-variant-numeric:tabular-nums; white-space:nowrap; }
.km-werbung__label { min-width:0; font-size:.9rem; font-weight:600; line-height:1.3; overflow-wrap:break-word; }
.km-werbung__text { font-size:.8rem; line-height:1.45; color:var(--km-soft); overflow-wrap:break-word; }

/* ============================================================================
   "Modell nicht dabei" — Anfrage statt Sackgasse.
   Dieselbe Farbwelt wie der uebrige Konfigurator, damit der Baustein wie ein
   Teil der Seite wirkt und nicht wie eine Fehlermeldung.
   ============================================================================ */
.km-anfrage { border:1px solid var(--km-border); border-top:3px solid var(--km-accent);
  border-radius:0 0 12px 12px; padding:1.5rem 1.4rem; margin:.5rem 0 1rem; }
.km-anfrage__titel { font-size:1.35rem; font-weight:600; margin:0 0 .7rem; line-height:1.25; }
/* Wie .km-hero: per JS fokussiert (Screenreader), nie per Tab erreichbar — Ring unterdrueckt. */
.km-anfrage__titel:focus, .km-anfrage__titel:focus-visible { outline:none; }
.km-anfrage__text p { margin:0 0 .8rem; max-width:62ch; color:var(--km-fg); }

.km-anfrage__auswahl { display:inline-flex; flex-wrap:wrap; gap:.4rem; align-items:center;
  background:var(--km-warm); border:1px solid var(--km-line); border-radius:.5rem;
  padding:.45rem .7rem; font-size:.9rem; margin:.2rem 0 1.2rem; }
.km-anfrage__auswahl-label { color:var(--km-muted); }

.km-anfrage__form { margin:0; }
.km-feld { display:flex; flex-direction:column; gap:.25rem; margin:0 0 .9rem; }
.km-feld label { font-size:.88rem; font-weight:600; }
.km-feld__hilfe { font-weight:400; color:var(--km-muted); }
.km-feld__pflicht { font-weight:400; color:#b4541b; }
.km-feld input, .km-feld textarea { font:inherit; font-size:.95rem; padding:.5rem .6rem;
  border:1px solid var(--km-border-strong); border-radius:.4rem; background:#fff; color:var(--km-fg); width:100%; }
.km-feld input:focus, .km-feld textarea:focus { outline:2px solid var(--km-accent); outline-offset:-1px;
  border-color:var(--km-accent); }
.km-anfrage__zeile { display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }

/* ---- Ja/Nein-Fragen (3.19.0) ----
   EIGENER Block, bewusst NICHT .km-feld: die Regel `.km-feld input` oben setzt
   width:100% samt Rahmen und Innenabstand und wuerde native Radio-Knoepfe zu
   bildschirmbreiten Kaesten verformen.
   Das <fieldset> bleibt display:block — ein <legend> in einem Flex-/Grid-Fieldset
   rendert je nach Browser unterschiedlich; die Knopfreihe ist deshalb ein eigenes Kind. */
.km-jnfeld { border:0; padding:0; margin:0 0 .9rem; min-width:0; display:block; }
.km-jnfeld__legende { font-size:.88rem; font-weight:600; padding:0; margin:0 0 .4rem; }
.km-jn { display:flex; flex-wrap:wrap; gap:.5rem; }
.km-jn__opt { display:inline-flex; align-items:center; gap:.45rem; cursor:pointer;
  min-height:44px; padding:.4rem .85rem; font-size:.92rem; font-weight:400;
  border:1px solid var(--km-border-strong); border-radius:.55rem; background:#fff;
  accent-color:var(--km-accent); }
/* Ausgewaehlt: Geschwister-Selektor statt :has() — :has() fehlt in aelteren Browsern,
   und die Markierung ist hier kein Schmuck, sondern die Rueckmeldung der Auswahl. */
.km-jn__opt:has(input:checked) { border-color:var(--km-accent); background:var(--km-warm); }
.km-jn__opt input:checked + .km-jn__text { color:var(--km-accent-text); font-weight:600; }
/* Fokus sichtbar am ganzen Knopf, zusaetzlich zur nativen Markierung des Radios. */
.km-jn__opt:focus-within { outline:2px solid var(--km-accent); outline-offset:1px; }

/* ---- Foto des Originalradios (3.19.0) ---- */
.km-bild input[type="file"] { font:inherit; font-size:.9rem; }
.km-bild__status { display:block; margin-top:.35rem; font-size:.85rem; color:var(--km-muted); }
.km-bild__status--ok { color:#2f7d4f; }
.km-bild__status--fehler { color:var(--km-error); }

/* Baumabhaengige Frageblöcke — reine Gruppierung, kein eigenes Aussehen. */
.km-anfrage__baum { margin:0; }

/* Seit 3.19.0 ein normaler Abschnitt statt eines <details> — nichts ist mehr zugeklappt. */
.km-anfrage__mehr { border-top:1px solid var(--km-line); margin:.3rem 0 1rem; padding-top:.7rem; }
.km-anfrage__mehr-titel { font-size:.9rem; font-weight:600; color:var(--km-muted);
  margin:0 0 .7rem; }

.km-anfrage__aktionen { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin-top:1.1rem; }
.km-anfrage__datenschutz { font-size:.8rem; color:var(--km-muted); margin:1rem 0 0; max-width:68ch; line-height:1.5; }
.km-anfrage__fehler { border:1px solid var(--km-error); background:#fdecea; color:#7a1a12;
  border-radius:.4rem; padding:.7rem .9rem; margin:.8rem 0 0; font-size:.92rem; }

/* Telefon steht GLEICHRANGIG neben dem Formular — wer anrufen will, soll nicht scrollen muessen. */
.km-anfrage__telefon { margin-top:1.3rem; padding-top:1.2rem; border-top:1px solid var(--km-line);
  display:flex; flex-wrap:wrap; gap:.6rem 2rem; align-items:baseline; }
.km-anfrage__tel-nr { font-size:1.2rem; font-weight:600; color:var(--km-fg); text-decoration:none;
  border-bottom:2px solid var(--km-accent); }
.km-anfrage__tel-nr:hover { color:var(--km-accent); }
.km-anfrage__zeiten { color:var(--km-muted); font-size:.85rem; margin-left:.6rem; }
.km-anfrage__tel-text { font-size:.9rem; color:var(--km-fg); max-width:44ch; margin:0; }

.km-anfrage__ok { border:1px solid #cfe3d4; background:#f3faf5; border-radius:.6rem;
  padding:1.1rem 1.2rem; margin-bottom:1.2rem; }
.km-anfrage__ok-titel { margin:0 0 .4rem; font-size:1.05rem; font-weight:600; }
.km-anfrage__ok-text { margin:0; font-size:.92rem; }

/* Honigtopf: fuer Menschen unsichtbar, aber NICHT display:none — manche Bots ueberspringen das. */
.km-hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* --- Bereichs-Hinweis auf der Anfrage-Seite -------------------------------
   Ruhig und in der Hausfarbe: Das ist kein Warnhinweis, sondern ein Angebot -
   der Kunde hat gerade nichts gefunden und soll hier erfahren, dass es
   trotzdem einen Weg gibt. Deshalb steht der Block VOR dem Formular. */
.km-info { border:1px solid var(--km-line); border-left:4px solid var(--km-accent);
  background:var(--km-warm); border-radius:.6rem; padding:.95rem 1.1rem; margin:0 0 1.2rem; }
.km-info__titel { font-weight:600; font-size:1.02rem; margin-bottom:.35rem; }
.km-info__text p { margin:0 0 .55rem; max-width:62ch; line-height:1.55; }
.km-info__text p:last-child { margin-bottom:0; }
.km-info__link { display:inline-block; margin-top:.6rem; color:var(--km-accent);
  font-weight:600; text-decoration:underline; }
.km-info__link:focus-visible { outline:2px solid var(--km-accent); outline-offset:2px; }

/* --- Adaptions-Hinweis ------------------------------------------------------
   Bewusst in Sand/Bernstein statt in Warnrot: Der Kunde hat nichts falsch
   gemacht, und die meisten Faelle sind Einschraenkungen, mit denen der Einbau
   sehr wohl gelingt. Rot wuerde als Fehlermeldung gelesen und abschrecken. */
.km-adapt { display:flex; gap:.9rem; align-items:flex-start;
  border:1px solid #f0d9a8; border-left:4px solid #e0a63a; background:#fffaf0;
  border-radius:.6rem; padding:.95rem 1.1rem; margin:0 0 1.2rem; }
.km-adapt__marke { flex:0 0 1.6rem; width:1.6rem; height:1.6rem; border-radius:50%;
  background:#e0a63a; color:#fff; font-weight:700; font-style:italic; font-size:1rem;
  line-height:1.6rem; text-align:center; }
.km-adapt__inhalt { min-width:0; }
.km-adapt__label { font-size:.78rem; font-weight:600; letter-spacing:.03em;
  text-transform:uppercase; color:#8a6417; margin-bottom:.3rem; }
.km-adapt__text p { margin:0 0 .55rem; max-width:62ch; line-height:1.55;
  color:var(--km-fg); font-size:1rem; }
.km-adapt__text p:last-child { margin-bottom:0; }

/* ---- Plug'n'Play-Block auf der Ergebnisseite (3.10.0) ---- */
.km-pnp-kopf { grid-column:1 / -1; margin:1.1rem 0 .1rem; font-size:1.05rem;
  color:var(--km-fg); }
.km-product--pnp { position:relative; }
.km-product__pnpbadge { position:absolute; top:.5rem; left:.5rem; z-index:1;
  background:#1a7f37; color:#fff; font-size:.68rem; font-weight:600;
  padding:.15rem .55rem; border-radius:999px; letter-spacing:.02em; }

/* ---- Node-Banner: Bild-/Video-Block je Auswahlschritt (3.11.0) ----
   Design .jsk__mediaBanner (Variante "banner"): Figur links 330px, Text rechts,
   warmer Kartenhintergrund. Videos laden erst nach Klick (Consent-Knopf). */
.km-nodebanner { display:flex; align-items:center; gap:1.5rem; margin:0 0 1.4rem;
  padding:1.1rem; background:var(--km-warm); border:1px solid var(--km-line); border-radius:12px; }
.km-nodebanner__figur { width:330px; max-width:100%; flex:none; line-height:0; }
.km-nodebanner__figur img { width:100%; display:block; border-radius:9px; }
.km-nodebanner__bildlink { display:block; line-height:0; }
.km-nodebanner__korpus { display:flex; flex-direction:column; gap:.45rem; min-width:0; }
.km-nodebanner__eyebrow { font-size:.66rem; font-weight:600; line-height:1;
  letter-spacing:.18em; text-transform:uppercase; color:var(--km-accent-text); }
.km-nodebanner__titel { font-size:1.06rem; font-weight:700; line-height:1.3;
  color:var(--km-fg); }
.km-nodebanner__text { margin:0; font-size:.88rem; line-height:1.6;
  color:var(--km-fg); max-width:62ch; }
.km-nodebanner__video { position:relative; aspect-ratio:16/9; border-radius:9px;
  overflow:hidden; background:var(--km-fg); }
.km-nodebanner__video iframe { position:absolute; inset:0; width:100%; height:100%;
  border:0; }
.km-nodebanner__consent { position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:.6rem; background:var(--km-fg); color:#fff;
  border:0; cursor:pointer; font-family:inherit; font-size:.82rem; padding:1rem;
  text-align:center; }
.km-nodebanner__consent strong { font-size:.92rem; }
.km-nodebanner__consent:hover strong { color:var(--km-accent); }
/* In der Seitenleiste braucht die Video-Figur keine Mindestbreite */
.km-sidebanner .km-nodebanner__video { width:100%; }

/* Banner OHNE Textkoerper (nur Bild/Video): Medium in voller Breite, ohne Kastenrahmen —
   wirkt dann wie die klassischen Banner oben/unten statt wie ein leerer Design-Kasten. */
.km-nodebanner--vollbild { padding:0; background:none; border:0; }
.km-nodebanner--vollbild .km-nodebanner__figur { width:100%; }
.km-nodebanner--vollbild .km-nodebanner__figur img { border-radius:12px; }
.km-nodebanner--vollbild .km-nodebanner__video { border-radius:12px; }

/* ============================================================================
   Mobil (Design-Bruchpunkt 900px): Seitenleiste rutscht UNTER den Inhalt,
   Kopfzeile kompakt, Zurueck nur als Pfeil.
   ============================================================================ */
@media (max-width:900px) {
  .km-app { padding:0 0 2.5rem; }
  .km-shell { grid-template-columns:1fr; border:0; border-radius:0; box-shadow:none; }
  .km-aside { order:2; border-right:0; border-top:1px solid var(--km-border); padding:1.4rem 1rem; }
  .km-aside__brand, .km-pfad__hinweis { display:none; }
  .km-main { order:1; }
  .km-kopf { padding:.9rem 1rem; gap:.75rem; }
  .km-kopf__titel { font-size:1.06rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .km-zurueck { width:38px; height:38px; padding:0; justify-content:center; font-size:1rem; line-height:0; }
  .km-zurueck span { display:none; }
  .km-inhalt { padding:1.25rem 1rem 2.5rem; }
  .km-grid { grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:.75rem; }
  .km-card { padding:.9rem .7rem; gap:.6rem; }
  .km-cta { flex-direction:column; align-items:stretch; gap:.9rem; }
  .km-cta .km-btn { justify-content:center; }
  .km-intro__schritte { grid-template-columns:1fr; gap:1.25rem; }
  .km-intro__schritt { padding-right:0; }
  .km-intro__strich { display:none; }
  .km-intro__korpus { margin:0 0 0 2.5rem; }
  .km-welcome__title { font-size:1.4rem; }
}

/* Handy: beide Zahlen bleiben nebeneinander. Symbol klein und ohne Rahmen VOR der Zahl, die
   Beschriftung darunter ueber die volle Spaltenbreite — so passt "Fahrzeugkombinationen"
   (12 px, gemessen 135 px) ab 360 px Fensterbreite in die halbe Leiste. Korpus und Zeile loesen
   sich dafuer auf (display:contents), ihre Kinder ordnen sich direkt im Raster der Kachel an.
   Erklaertexte entfallen. */
@media (max-width:640px) {
  .km-werbung { padding:.85rem 1rem .95rem; margin-bottom:1.1rem; }
  .km-werbung__dach { margin-bottom:.7rem; }
  .km-werbung__zahl { display:grid; grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:"symbol wert" "label label"; align-items:center; column-gap:.4rem; row-gap:.1rem;
    padding-right:.85rem; }
  .km-werbung__zahl + .km-werbung__zahl { padding:0 0 0 .85rem; }
  .km-werbung__korpus, .km-werbung__zeile { display:contents; }
  .km-werbung__symbolrahmen { grid-area:symbol; width:auto; height:auto; border-radius:0; background:none; }
  .km-werbung__symbol { width:16px; height:16px; }
  .km-werbung__wert { grid-area:wert; font-size:1.35rem; }
  .km-werbung__label { grid-area:label; font-size:.86rem; }
  .km-werbung__text { display:none; }
}
/* Sehr schmale Geraete (unter 360 px): die Zahlen untereinander statt nebeneinander. */
@media (max-width:359px) {
  .km-werbung__reihe { grid-template-columns:minmax(0,1fr); }
  .km-werbung__zahl { padding-right:0; }
  .km-werbung__zahl + .km-werbung__zahl { margin-top:.6rem; padding:.6rem 0 0; border-left:0;
    border-top:1px solid var(--km-border); }
}

@media (max-width:640px) {
  .km-adapt { padding:.85rem .9rem; gap:.7rem; }
  .km-info { padding:.85rem .9rem; }
  .km-anfrage { padding:1.1rem .9rem; }
  .km-anfrage__zeile { grid-template-columns:1fr; gap:0; }
  .km-anfrage__aktionen .km-btn { width:100%; justify-content:center; }
  .km-nodebanner { flex-direction:column; align-items:stretch; gap:.9rem; padding:.85rem; }
  .km-nodebanner__figur { width:100%; }
  /* nur-Bild-Banner bleibt auch mobil randlos (die Regel oben wuerde sonst per
     Quelltext-Reihenfolge das padding:0 der Vollbild-Variante schlagen) */
  .km-nodebanner--vollbild { padding:0; }
}

/* ---- Einbauort-Chips auf der Ergebnis-Kategorieseite (3.14.0) ----
   Umschalter zwischen den Positions-Untervarianten einer Endnode. Laeuft AUSSERHALB
   der .km-app (NOVA-Kategorieseite), darum eigenstaendige Farben statt Variablen. */
.km-chips { display:flex; align-items:center; flex-wrap:wrap; gap:.5rem;
  margin:0 0 1.1rem; padding:.8rem 1rem; background:#faf8f5;
  border:1px solid #eeebe6; border-radius:12px; }
.km-chips__label { font-size:.72rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:#7a7367; margin-right:.25rem; }
a.km-chip { display:inline-flex; align-items:center; padding:.45rem .95rem;
  border:1px solid #ddd8d1; border-radius:999px; background:#fff; color:#16130f;
  font-size:.88rem; font-weight:600; line-height:1; text-decoration:none;
  transition:border-color .15s, color .15s; }
a.km-chip:hover { border-color:#EC6707; color:#c25404; text-decoration:none; }
a.km-chip--aktiv, a.km-chip--aktiv:hover { background:#EC6707; border-color:#EC6707;
  color:#fff; cursor:default; }
@media (max-width:640px) {
  .km-chips { padding:.65rem .75rem; }
  a.km-chip { padding:.4rem .8rem; font-size:.84rem; }
}

/* ---- Fahrzeug-Karte auf der Ergebnis-Kategorieseite (3.24.0, Masse neu 3.24.1) ----
   Nach der Betreiber-Vorlage 23-10-2026_Screenshot-Mobile-10-3-2.png, Werte aus deren
   Pixeln gemessen (Karte 2022x325 px = 6,2:1). Alles haengt an EINER Groesse, der
   Kartenhoehe --km-fz-h: Symbol 42 % hoch (1,8:1 breit), Titel 0,28, Jahr 0,23, Link 0,25,
   Innenabstand links 0,24, Abstand Symbol-Text 0,33. Farben der Vorlage: Flaeche #f8f8f8,
   Rahmen #dcdcde, Titel schwarz, Jahr #656565, Orange #f25900.
   ALLE Selektoren mit #km-ergebnis-fahrzeug: das NIUplus-Theme faerbt Links mit
   "body.niu-theme2 a:not(.btn):not(...)..." in seinem dunklen Akzent — live gemessen
   27.10.2026, "Wechseln" stand dort dunkelgrau statt orange. Klassenregeln verlieren gegen
   diese Kette, eine ID gewinnt.
   Kontrast #f25900 auf #f8f8f8 = 3,19:1 — genuegt nur fuer GROSSEN Text (ab 18,66px fett),
   deshalb faellt der Link auf keiner Breite unter 19px. Das Symbol ist Schmuck. */
#km-ergebnis-fahrzeug { --km-fz-h:104px; box-sizing:border-box; display:flex; flex-wrap:wrap;
  align-items:center; gap:.5rem calc(var(--km-fz-h) * .3); min-height:var(--km-fz-h);
  margin:0 0 1.25rem; padding:calc(var(--km-fz-h) * .12) calc(var(--km-fz-h) * .23)
  calc(var(--km-fz-h) * .12) calc(var(--km-fz-h) * .24); background:#f8f8f8;
  border:1px solid #dcdcde; border-radius:calc(var(--km-fz-h) * .12); }
#km-ergebnis-fahrzeug .km-fz__fahrzeug { display:flex; align-items:center;
  gap:calc(var(--km-fz-h) * .33); flex:1 1 auto; min-width:0; }
#km-ergebnis-fahrzeug .km-fz__symbol { flex:0 0 auto; display:block; height:calc(var(--km-fz-h) * .42);
  width:auto; aspect-ratio:54 / 31; fill:none; stroke:#f25900; stroke-width:2.4;
  stroke-linecap:round; stroke-linejoin:round; }
#km-ergebnis-fahrzeug .km-fz__text { display:flex; flex-direction:column; min-width:0; flex:1 1 auto; }
/* Seit 3.24.2 die h1 der Seite (der Titelblock des Themes entfaellt): Abstaende und
   Schrift der Theme-Ueberschriften zuruecksetzen, damit sie wie die Vorlage aussieht. */
#km-ergebnis-fahrzeug .km-fz__titel { display:block; margin:0; padding:0; font-family:inherit;
  font-size:calc(var(--km-fz-h) * .28); font-weight:700; line-height:1.15; letter-spacing:normal;
  text-transform:none; color:#000; overflow-wrap:anywhere; }
#km-ergebnis-fahrzeug .km-fz__jahr { display:block; margin-top:calc(var(--km-fz-h) * .06);
  font-size:calc(var(--km-fz-h) * .23); font-weight:400; line-height:1.15; color:#656565; }
#km-ergebnis-fahrzeug a.km-fz__wechseln { flex:0 0 auto; margin-left:auto; display:inline-flex;
  align-items:center; gap:.4em; min-height:44px; padding:0 .15em;
  font-size:max(19px, calc(var(--km-fz-h) * .25)); font-weight:700; line-height:1;
  color:#f25900; text-decoration:none; border:0; border-radius:6px; background:none; }
#km-ergebnis-fahrzeug a.km-fz__wechseln svg { display:block; width:.5em; height:.85em; fill:none;
  stroke:currentColor; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
#km-ergebnis-fahrzeug a.km-fz__wechseln:hover,
#km-ergebnis-fahrzeug a.km-fz__wechseln:focus { color:#f25900; text-decoration:underline;
  text-underline-offset:.18em; }
#km-ergebnis-fahrzeug a.km-fz__wechseln:focus-visible { outline:2px solid #f25900; outline-offset:2px; }
@media (max-width:991.98px) { #km-ergebnis-fahrzeug { --km-fz-h:88px; } }
@media (max-width:575.98px) { #km-ergebnis-fahrzeug { --km-fz-h:64px; gap:.5rem calc(var(--km-fz-h) * .25); } }