/* agora CRM: Seitenstil fuer /store-crm.
 *
 * Laedt NUR store-crm.html. Alles hier ist entweder an eine Klasse gebunden,
 * die es nur auf dieser Seite gibt, oder an .crm-ds. Nichts davon greift auf
 * andere Seiten der Website ueber.
 *
 * Zwei Systeme laufen nebeneinander (siehe .claude/skills/agora-design-system):
 *   - Marketing-Site: agora.css auf :root, Inter, --accent #FF6B00.
 *   - Produkt:        crm-tokens.css auf .crm-ds, Figtree, --accent #ee6b2f.
 * .crm-ds sitzt ausschliesslich auf Flaechen, die das Produkt zeigen. Knoepfe,
 * Ueberschriften, Nav und Fuss bleiben Marketing.
 */

/* --------------------------------------------------------------------------
   0  Marketing-Rollen unter eigenem Namen sichern
   -------------------------------------------------------------------------- */
/* Innerhalb von .crm-ds ueberschreibt das Design-System --accent und Co. Wo ein
   Element trotzdem die Seitenfarbe braucht (etwa ein Knopf, der zur Seite
   gehoert und nicht zur Produktoberflaeche), greift es auf diese Aliase zu.
   Sie werden auf :root aufgeloest und erben ihren Wert dann unveraendert nach
   unten, auch durch .crm-ds hindurch. */
:root {
  --site-accent: var(--accent);
  --site-accent-text: var(--accent-text);
  --site-hairline: var(--hairline);
  --site-text: var(--text);
  --site-text-dim: var(--text-dim);
  --site-surface: var(--surface);
}

/* Fokus und Auswahl: dieselbe Setzung wie bisher auf dieser Seite. #B34A00
   statt --accent, weil Weiss auf #FF6B00 nur 2,9:1 erreicht. */
:root { --accent-ink: #B04A15; }
.nav-links a.active { color: var(--accent-ink); }
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 3px; }
::selection { background: var(--accent-ink); color: #fff; }
.textlink:hover { color: var(--accent-ink); }

.skip-link {
  position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden;
  background: var(--surface); color: var(--text); padding: 12px 20px; border-radius: 8px;
  font-weight: 600; font-size: 14px; z-index: 1000;
}
.skip-link:focus {
  left: 16px; top: 16px; width: auto; height: auto;
  outline: 3px solid var(--accent-ink); outline-offset: 3px;
}

/* Editorial-Titelskala der Seite. */
.ed-title { font-size: clamp(38px, 6.4vw, 68px); font-weight: 800; letter-spacing: -.035em; line-height: 1.04; }
.ed-title + .section-sub { margin-top: 18px; max-width: 62ch; }

/* --------------------------------------------------------------------------
   1  Hero mit Hintergrundvideo
   -------------------------------------------------------------------------- */
/* Dunkel wie .tool-stage; die helle Nav-Pille liegt darueber, dasselbe
   Zusammenspiel wie auf /planaufmass.
   Das Video liegt hinter Ueberschrift UND Geraetebild. Vorher endete es am
   Fuss des Textblocks und darunter stand eine schwarze Flaeche; das Bild sah
   aus, als haette man es auf ein Loch gelegt. */
.crm-hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: #0b0e12; color: var(--on-dark);
  padding-bottom: clamp(48px, 7vw, 88px);
}
.crm-hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 42%; z-index: -2;
}
/* Der Verlauf muss drei Dinge gleichzeitig leisten: oben genug Deckung, damit
   Brotkrumen und Nav-Pille tragen; in der Mitte einen ruhigen Grund fuer die
   Ueberschrift; unten hinter dem Geraetebild aber NUR so viel Abdunklung, dass
   das helle Bild sich abhebt: der Raum soll dort noch zu sehen sein. Deshalb
   faellt er nach unten nicht mehr auf Volldeckung. */
.crm-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(11,14,18,.86) 0%,
      rgba(11,14,18,.60) 22%,
      rgba(11,14,18,.55) 46%,
      rgba(11,14,18,.66) 72%,
      rgba(11,14,18,.74) 100%),
    radial-gradient(110% 62% at 18% 26%, rgba(11,14,18,.34), transparent 62%);
}
/* Kopfbereich: eigener Bezugsrahmen, damit die Bewegungssteuerung unten rechts
   am Textblock sitzt und nicht am Fuss des ganzen Hero; dort laege sie sonst
   auf dem Geraetebild. */
.crm-hero-kopf { position: relative; padding: clamp(128px, 16vw, 176px) 0 clamp(28px, 4vw, 44px); }
.crm-hero .crumbs a { color: var(--on-dark-dim); }
.crm-hero .crumbs a:hover { color: var(--on-dark); }
.crm-hero .crumbs [aria-current="page"] { color: var(--on-dark); }
.crm-hero .crumbs li + li::before { border-color: rgba(255,255,255,.4); }

.crm-hero-inner { max-width: 800px; }
.crm-eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 26px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  /* Auf dunklem Grund erreicht das Signal-Orange 6,93:1, dieselbe Setzung,
     die .tool-stage .eyebrow dokumentiert. */
  color: var(--site-accent);
}
.crm-eyebrow::before { content: ""; width: 26px; height: 2px; background: currentColor; border-radius: 2px; }
.crm-hero h1 {
  font-size: clamp(42px, 7.6vw, 82px); font-weight: 800;
  letter-spacing: -.042em; line-height: .98; margin-top: 20px;
}
.crm-hero h1 .zeile2 { display: block; color: var(--on-dark-dim); }
.crm-hero-standfirst {
  margin-top: 24px; max-width: 54ch;
  font-size: clamp(17px, 1.5vw, 20px); font-weight: 300; line-height: 1.58;
  color: var(--on-dark-dim);
}
.crm-hero-cta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 32px; }
.crm-hero-cta .textlink { color: var(--on-dark); }
.crm-hero-cta .textlink:hover { color: var(--site-accent); }

/* --------------------------------------------------------------------------
   2  Buehne: Geraetebild direkt unter dem Hero
   -------------------------------------------------------------------------- */
/* Liegt im Hero, auf dem Video. Kein eigener Grund: der Raum dahinter bleibt
   sichtbar. Der Schlagschatten setzt das Bild als Gegenstand in den Raum,
   statt es flach aufzukleben. */
.crm-buehne { max-width: 1180px; }
.crm-buehne img {
  display: block; width: 100%; height: auto; border-radius: 18px;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .72), 0 2px 0 rgba(255, 255, 255, .06) inset;
}
.crm-buehne figcaption {
  margin-top: 14px; text-align: center;
  font-size: 13px; font-style: italic; color: var(--on-dark-faint);
}

/* --------------------------------------------------------------------------
   3  Der Gegner
   -------------------------------------------------------------------------- */
.gegner { padding: clamp(64px, 9vw, 112px) 0 clamp(40px, 5vw, 64px); }
.gegner-liste {
  display: grid; gap: clamp(18px, 2.4vw, 28px); margin-top: clamp(32px, 4vw, 48px);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.gegner-karte {
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid var(--hairline); border-radius: var(--radius-lg);
  background: var(--bg-softer);
}
.gegner-karte h3 { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.gegner-karte .gk-kicker {
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-ink); margin-bottom: 12px;
}
.gegner-karte p { margin-top: 12px; font-size: 15px; line-height: 1.62; color: var(--text-dim); }

/* --------------------------------------------------------------------------
   4  Die Kette
   -------------------------------------------------------------------------- */
/* Unten knapper als oben: darunter folgt sofort die Kapitel-Ueberschrift, und
   zwei volle Abschnittspolster hintereinander reissen ein Loch in die Seite. */
.kette { padding: clamp(40px, 6vw, 72px) 0 clamp(32px, 4vw, 48px); }
.kette-bahn {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px;
  margin-top: clamp(28px, 3.5vw, 44px);
}
.kette-glied {
  flex: 1 1 150px; min-width: 0; position: relative;
  padding: 18px 16px 20px;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  background: var(--surface-1);
}
.kette-glied .kg-nr {
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  color: var(--text-muted); display: block; margin-bottom: 8px;
}
.kette-glied b { display: block; font-size: 15px; font-weight: 700; color: var(--text-primary); line-height: 1.25; }
.kette-glied span { display: block; margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
/* Pfeil zwischen den Gliedern. Rein dekorativ, deshalb aria-hidden im Markup
   und hier ohne eigene Trefferflaeche. */
.kette-glied + .kette-glied::before {
  content: ""; position: absolute; left: -10px; top: 50%; width: 10px; height: 1px;
  background: var(--border-strong);
}
@media (max-width: 720px) { .kette-glied + .kette-glied::before { display: none; } }
.kette-fazit {
  margin-top: clamp(24px, 3vw, 36px); font-size: clamp(18px, 2vw, 24px);
  font-weight: 700; letter-spacing: -.02em; max-width: 40ch;
}
.kette-fazit span { color: var(--accent-ink); }

/* --------------------------------------------------------------------------
   5  Kapitel
   -------------------------------------------------------------------------- */
#funktionen { padding-top: clamp(48px, 7vw, 88px); }
/* Nur die Kapitelbahn darf breiter sein als der Rest der Seite: die
   Einleitung muss auf derselben linken Kante stehen wie jede andere
   Abschnittsueberschrift, sonst wandert der Textanfang von Abschnitt zu
   Abschnitt. */
#funktionen > .chapterlist { max-width: 1440px; }
.chapterlist { display: grid; gap: 0; margin-top: clamp(28px, 4vw, 52px); }
.chapter { position: relative; padding: clamp(48px, 7vw, 88px) 0; border-top: 1px solid var(--hairline); }
.chapter-num {
  position: absolute; top: clamp(30px, 6vw, 44px); right: 0;
  font-size: clamp(56px, 9vw, 120px); font-weight: 800; line-height: 1;
  color: rgba(10,10,10,.06); pointer-events: none; user-select: none;
}
.chapter-rubric {
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-ink); margin-bottom: 16px;
}
.chapter-grid {
  display: grid; grid-template-columns: 1fr 2fr; gap: clamp(30px, 5vw, 64px);
  align-items: center; position: relative; margin-top: 8px;
}
.chapter.flip .chapter-text { order: 2; }
.chapter h2 { font-size: clamp(26px, 3vw, 38px); font-weight: 800; letter-spacing: -.025em; line-height: 1.14; max-width: 18ch; }
@media (min-width: 901px) {
  .chapter.wide-text .chapter-grid { grid-template-columns: 2fr 1fr; }
}
@media (max-width: 900px) {
  .chapter-grid { grid-template-columns: 1fr; }
  .chapter-text { order: -1; }
}
@media (max-width: 480px) { .chapter-num { display: none; } }

.plainlist { list-style: none; display: grid; gap: 12px; margin-top: 18px; max-width: 46ch; font-size: 15px; }
.plainlist li { padding-left: 20px; position: relative; line-height: 1.55; color: var(--text-dim); }
.plainlist li::before { content: "+" / ""; position: absolute; left: 0; top: 0; color: var(--accent-ink); font-weight: 800; }
.plainlist li strong { color: var(--text); font-weight: 700; }

/* Bildrahmen. Traegt .crm-ds: Radius, Rand und Elevation kommen aus dem
   Produktsystem, damit der Rahmen zum Inhalt passt statt ihn zu zitieren. */
.kb-frame {
  overflow: hidden; border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle); background: var(--surface-2);
  box-shadow: var(--e-3);
}
.kb-img {
  width: 100%; height: auto; display: block;
  transform: scale(1.06); transition: transform 1.2s var(--easing-out);
}
.kb-frame.in-view .kb-img { transform: scale(1); }
.kb-frame:hover .kb-img { transform: scale(1.03); transition: transform .6s var(--easing-out); }
figcaption { font-size: 13px; font-style: italic; color: var(--site-text-dim); margin-top: 10px; }
.hero-disclaimer { font-size: 13px; color: var(--text-dim); margin-top: 10px; }

/* Telefon neben dem Breitbild: die Stempeluhr ist eine eigene Oberflaeche und
   gehoert nicht in einen 16:10-Rahmen gequetscht. */
.chapter-duo { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 720px) { .chapter-duo { grid-template-columns: 2.2fr 1fr; align-items: end; } }
.chapter-duo .kb-frame.telefon { border-radius: 26px; }

/* --------------------------------------------------------------------------
   6  Trennfilme
   -------------------------------------------------------------------------- */
/* Abgerundet wie das Geraetebild im Hero (.shot in agora.css fuehrt denselben
   Wert): grosse Medienflaechen stehen auf dieser Site nicht mit scharfer Kante.
   overflow versteckt die Videoecken, isolation haelt den Verlauf der Bildunter-
   schrift innerhalb der Rundung. */
.trenner {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 18px; background: #0b0e12;
}
.trenner video { display: block; width: 100%; height: clamp(180px, 26vw, 320px); object-fit: cover; }
.trenner figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
  padding: clamp(20px, 4vw, 32px) clamp(18px, 5vw, 56px);
  background: linear-gradient(transparent, rgba(11,14,18,.86));
  color: var(--on-dark); font-style: normal; font-size: clamp(15px, 1.8vw, 19px);
  font-weight: 600; letter-spacing: -.01em;
}

/* --------------------------------------------------------------------------
   7  Ausserdem drin
   -------------------------------------------------------------------------- */
.merkmale { padding: clamp(64px, 9vw, 104px) 0; background: var(--bg-soft); }
.merkmal-raster {
  display: grid; gap: 1px; margin-top: clamp(32px, 4vw, 48px);
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden;
}
.merkmal { background: var(--surface-1); padding: clamp(20px, 2.4vw, 26px); }
.merkmal b { display: block; font-size: 15px; font-weight: 700; color: var(--text-primary); }
.merkmal span { display: block; margin-top: 7px; font-size: 13.5px; line-height: 1.55; color: var(--text-muted); }

/* --------------------------------------------------------------------------
   8  Vertrauen
   -------------------------------------------------------------------------- */
.vertrauen { padding: clamp(64px, 9vw, 104px) 0; }
.vertrauen-spalten {
  display: grid; gap: clamp(28px, 4vw, 52px); margin-top: clamp(32px, 4vw, 48px);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.vertrauen-spalte h3 {
  font-size: 18px; font-weight: 800; letter-spacing: -.02em;
  padding-bottom: 14px; border-bottom: 2px solid var(--accent-ink);
}
.vertrauen-spalte ul { list-style: none; display: grid; gap: 14px; margin-top: 18px; }
.vertrauen-spalte li { font-size: 14.5px; line-height: 1.6; color: var(--text-dim); }
.vertrauen-spalte li b { color: var(--text); font-weight: 700; }

/* Kennzahlen. Produktflaeche, deshalb .crm-ds. */
.kennzahlen {
  display: grid; gap: 1px; margin-top: clamp(36px, 5vw, 56px);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  background: var(--border-subtle);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden;
}
.kennzahl { background: var(--surface-1); padding: clamp(22px, 3vw, 30px); }
.kennzahl .kz-wert { font-size: clamp(28px, 3.6vw, 40px); font-weight: 800; letter-spacing: -.03em; color: var(--text-primary); }
.kennzahl .kz-text { margin-top: 8px; font-size: 13.5px; line-height: 1.5; color: var(--text-muted); }
/* Jede Zahl nennt ihre Herkunft, Regel aus dem Design-System. */
.kennzahl .kz-quelle { margin-top: 10px; font-size: 11.5px; color: var(--text-disabled); }

/* --------------------------------------------------------------------------
   9  Ausblick
   -------------------------------------------------------------------------- */
/* Derselbe Grund wie Hero und Trennfilme. Ab Kapitel 3 ist die Seite
   durchgehend hell; der Ausblick holt das Dunkel zurueck und gibt dem Block
   vor dem Preis eigenes Gewicht.
   Kein .crm-ds: hier steht keine Produktoberflaeche, sondern Marketing. Die
   Karten holen ihre Flaeche daher aus den on-dark-Rollen von agora.css. */
.ausblick {
  background: #0b0e12; color: var(--on-dark);
  padding: clamp(64px, 9vw, 112px) 0;
}
.ausblick .ed-title { color: var(--on-dark); }
.ausblick .crm-eyebrow { margin-top: 0; }
.ausblick a:focus-visible { outline: 3px solid var(--focus-ring-on-dark); outline-offset: 3px; }
.ausblick-sub {
  margin-top: 18px; max-width: 62ch;
  font-size: clamp(16px, 1.4vw, 18px); font-weight: 300; line-height: 1.6;
  color: var(--on-dark-dim);
}

/* Anders als die uebrigen Raster dieser Seite laeuft der Ausblick nicht ueber
   auto-fit, sondern ueber feste Stufen. Grund ist das Subgrid weiter unten: es
   greift erst ab drei Spalten, und mit auto-fit weiss die Media Query nicht,
   wo der Umbruch tatsaechlich liegt. Sie lagen 20px auseinander, und in dem
   Fenster standen drei Spalten ohne buendige Unterkante. Feste Stufen koennen
   nicht auseinanderlaufen. Die Werte sind die, die die Seite ohnehin fuehrt
   (720px bei .chapter-duo, 960px im Abschluss). */
.ausblick-gruppen {
  display: grid; margin-top: clamp(40px, 5vw, 64px);
  grid-template-columns: 1fr;
  column-gap: clamp(22px, 2.6vw, 34px); row-gap: clamp(28px, 3vw, 40px);
  align-items: start;
}
@media (min-width: 720px) { .ausblick-gruppen { grid-template-columns: repeat(2, 1fr); } }
/* Drei Spalten: die Karten sollen ueber die Spalten hinweg auf einer Linie
   liegen, sonst endet jede Spalte woanders. Subgrid legt allen Gruppen
   dieselben Zeilen unter. Die 4 sind Ueberschrift + drei Karten; kommt eine
   Karte dazu, muss die Zahl mit. Darunter wird gestapelt, dort trennt die
   groessere Zeilenluecke die Gruppen. */
@media (min-width: 960px) {
  .ausblick-gruppen { grid-template-columns: repeat(3, 1fr); }
  @supports (grid-template-rows: subgrid) {
    .ausblick-gruppen { grid-template-rows: repeat(4, auto); row-gap: 14px; }
    .ausblick-gruppe { display: grid; grid-row: span 4; grid-template-rows: subgrid; }
    .ab-karte { margin-top: 0; }
  }
}
/* Dieselbe Setzung wie .vertrauen-spalte h3, nur mit der Seitenfarbe: auf
   #0b0e12 traegt --site-accent (6,93:1), --accent-ink waere dort zu dunkel. */
.ausblick-gruppe h3 {
  font-size: 18px; font-weight: 800; letter-spacing: -.02em;
  padding-bottom: 14px; border-bottom: 2px solid var(--site-accent);
}
.ab-karte {
  margin-top: 14px; padding: clamp(18px, 2.2vw, 22px);
  background: var(--surface-on-dark);
  border: 1px solid var(--hairline-on-dark);
  border-radius: var(--radius-lg);
}
.ab-karte b { display: block; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.ab-karte p { margin-top: 8px; font-size: 13.5px; line-height: 1.6; color: var(--on-dark-dim); }

/* --------------------------------------------------------------------------
   10  Preis und Konfigurator
   -------------------------------------------------------------------------- */
.preis { padding: clamp(64px, 9vw, 104px) 0; background: var(--bg-soft); }
.konfig {
  max-width: 720px; margin: clamp(32px, 4vw, 48px) auto 0;
  border: 1px solid var(--hairline); border-radius: var(--radius-xl);
  background: var(--surface); overflow: hidden;
  box-shadow: 0 30px 70px -34px rgba(10,10,10,.24);
}
.konfig-kopf { padding: clamp(24px, 3vw, 32px); border-bottom: 1px solid var(--hairline); }
.konfig-kopf h3 { font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.konfig-kopf p { margin-top: 8px; font-size: 14px; line-height: 1.6; color: var(--text-dim); }
.konfig-feld {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: clamp(18px, 2.4vw, 24px) clamp(24px, 3vw, 32px);
  border-bottom: 1px solid var(--hairline);
}
.konfig-feld .kf-text { min-width: 0; }
.konfig-feld .kf-text b { display: block; font-size: 15.5px; font-weight: 700; }
.konfig-feld .kf-text span { display: block; margin-top: 5px; font-size: 13px; line-height: 1.5; color: var(--text-dim); }

/* Mengensteller. 44px Trefferflaeche, damit er am Telefon bedienbar bleibt. */
.steller { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }
.steller button {
  width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--control-border);
  background: var(--surface); color: var(--text); font-size: 20px; font-weight: 600;
  cursor: pointer; display: grid; place-items: center; line-height: 1;
  transition: background .15s var(--easing), border-color .15s var(--easing);
}
.steller button:hover:not(:disabled) { background: var(--bg-soft); }
.steller button:disabled { opacity: .38; cursor: not-allowed; }
.steller input {
  width: 68px; height: 44px; text-align: center; font-size: 17px; font-weight: 700;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--control-border); border-radius: 12px;
  background: var(--surface); color: var(--text);
  -moz-appearance: textfield; appearance: textfield;
}
.steller input::-webkit-outer-spin-button,
.steller input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Schalter fuer die App. Kein natives Kontrollkaestchen-Layout, aber ein
   echtes <input type=checkbox> darunter; Tastatur und Screenreader bekommen
   das Original, nicht einen Nachbau. */
.schalter { position: relative; flex: 0 0 auto; display: inline-flex; }
.schalter input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.schalter .spur {
  width: 58px; height: 34px; border-radius: 999px; background: rgba(10,10,10,.16);
  transition: background .18s var(--easing); display: block; pointer-events: none;
}
.schalter .spur::after {
  content: ""; position: absolute; top: 4px; left: 4px; width: 26px; height: 26px;
  border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(10,10,10,.28);
  transition: transform .18s var(--easing);
}
.schalter input:checked + .spur { background: var(--accent-ink); }
.schalter input:checked + .spur::after { transform: translateX(24px); }
.schalter input:focus-visible + .spur { outline: 3px solid var(--accent-ink); outline-offset: 3px; }

.konfig-summe { padding: clamp(24px, 3vw, 32px); }
.konfig-zeile {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  font-size: 14.5px; color: var(--text-dim); padding: 7px 0;
}
.konfig-zeile b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.konfig-gesamt {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--hairline-strong);
}
.konfig-gesamt span { font-size: 15px; font-weight: 600; }
.konfig-gesamt strong { font-size: clamp(26px, 3.4vw, 34px); font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.konfig-gesamt small { display: block; font-size: 12.5px; font-weight: 400; color: var(--text-dim); text-align: right; margin-top: 4px; }
.konfig-aktion { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 22px; }
.konfig-hinweis { margin-top: 16px; font-size: 12.5px; line-height: 1.6; color: var(--text-dim); }

/* --------------------------------------------------------------------------
   11  Abschluss
   -------------------------------------------------------------------------- */
.faq { padding: clamp(64px, 9vw, 104px) 0; }
.faq .specs { margin-top: 28px; max-width: 860px; margin-inline: auto; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .kb-img { transition: none; transform: none; }
  .kb-frame:hover .kb-img { transform: none; }
}

/* --------------------------------------------------------------------------
   12  Abspielknopf aus agora.js
   -------------------------------------------------------------------------- */
/* Der Knopf sitzt mittig im positionierten Elternelement. Im Hero waere das
   quer ueber der Ueberschrift; blockiert der Browser das Autoplay, steht dort
   das Standbild, und das traegt die Flaeche auch allein. In den Trennfilmen
   bleibt er, dort sitzt er richtig ueber dem Video. */
.crm-hero > .vid-play { display: none; }