/* ============================================================
   ZulassungsProfi — B2C-Website
   Tokens siehe design.md („Amtlich Premium“)
   ============================================================ */

:root {
  --paper: #F7F5F0;
  --paper-alt: #EDEAE2;
  --white: #FFFFFF;
  --ink: #1A1A2E;
  --ink-soft: #4A5361;
  --ink-line: #2C3550;
  --blau: #0B4EA2;
  --blau-dark: #083A78;
  --blau-hell: #8FBDF2;
  --gold: #B7862C;
  --gold-hell: #D4A84B;
  --gruen: #2E7D46;
  --rot: #B3261E;
  --line: #D9D4C8;
  --text-on-dark: #F5F3EC;
  --text-on-dark-soft: #B4BAC9;

  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-utility: 'JetBrains Mono', ui-monospace, monospace;

  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;
  --space-xl: 4rem;
  --space-xxl: 7rem;

  --radius-subtle: 3px;
  --radius-soft: 8px;
  --radius-plate: 10px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --max-w: 1200px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

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

*, *::before, *::after { box-sizing: border-box; }

/* Das `hidden`-Attribut hat nur die Staerke einer Browser-Standardregel und
   wird von JEDER eigenen `display`-Angabe geschlagen. Im Stylesheet fehlte
   die uebliche Normalisierung -- Folge: `.rechner label { display:block }`
   hat als `hidden` markierte Rechner-Optionen (Praegung, Expressversand)
   trotzdem angezeigt, und JavaScript, das Bloecke ueber `hidden` steuert,
   war an solchen Stellen wirkungslos. Befund 04.08.2026. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.12;
  margin: 0 0 var(--space-md);
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.1rem, 5.5vw, 3.6rem); font-weight: 700; }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); font-weight: 700; }
h3 { font-size: clamp(1.15rem, 2.2vw, 1.45rem); font-weight: 600; }

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
html { interpolate-size: allow-keywords; }

p { margin: 0 0 var(--space-md); }

a { color: var(--blau); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--blau-dark); }

img, svg { max-width: 100%; height: auto; }

ul, ol { padding-left: 1.3em; }

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

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--ink);
  color: var(--white);
  padding: var(--space-sm) var(--space-md);
  z-index: 200;
}
.skip-link:focus { left: 0; }

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

/* Kicker-Label über Headlines */
.kicker {
  font-family: var(--font-utility);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--blau);
  display: block;
  margin-bottom: var(--space-sm);
}
.section--dark .kicker { color: var(--gold-hell); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  padding: 0.8em 1.5em;
  border-radius: var(--radius-soft);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: transform 150ms var(--ease-out), box-shadow 150ms var(--ease-out), background-color 150ms ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(26, 26, 46, 0.16); }
.btn:active { transform: translateY(0); box-shadow: none; }

.btn-primary { background: var(--blau); color: var(--white); }
.btn-primary:hover { background: var(--blau-dark); color: var(--white); }

.btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: var(--paper); }

.section--dark .btn-outline { color: var(--text-on-dark); border-color: var(--text-on-dark); }
.section--dark .btn-outline:hover { background: var(--text-on-dark); color: var(--ink); }

.btn-lg { font-size: 1.1rem; padding: 0.9em 1.8em; }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 245, 240, 0.94);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: 0.65rem var(--space-lg);
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: var(--ink);
}
.logo-word {
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.logo-word strong { font-weight: 700; }

/* Kennzeichen-Logo (Signatur-Motiv) */
.logo-plate {
  display: inline-flex;
  align-items: stretch;
  height: 30px;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}
.logo-plate-band { width: 9px; background: var(--blau); }
.logo-plate-text {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  padding: 0 7px;
  display: flex;
  align-items: center;
  color: var(--ink);
}

.main-nav { margin-left: auto; }

.nav-list {
  list-style: none;
  display: flex;
  gap: clamp(0.4rem, 1.4vw, 1.4rem);
  margin: 0;
  padding: 0;
}

.nav-link {
  font-size: 0.96rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  position: relative;
  padding: 0.4rem 0.1rem;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 2px;
  background: var(--blau);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 220ms var(--ease-out);
}
.nav-link:hover::after,
.nav-link--active::after { transform: scaleX(1); transform-origin: left; }
.nav-link--active { color: var(--blau); }

.nav-link--login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--blau);
  border-radius: var(--radius-soft);
  background: var(--blau);
  color: var(--white);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  transition:
    background-color 150ms var(--ease-out),
    border-color 150ms var(--ease-out);
}
.nav-link--login::after { display: none; }
.nav-link--login:hover {
  border-color: var(--blau-dark);
  background: var(--blau-dark);
  color: var(--white);
}

.nav-toggle { display: none; }

/* 06.09.2026 (Owner): „Vorgang starten“ fuehrt das Mobil-Menue an. Auf Desktop aus --
   dort sitzt der CTA rechts in der Kopfzeile (.header-cta), doppelt waere er verwirrend. */
.nav-item-start { display: none; }

/* 05.09.2026: Unternehmensbereich in der Desktop-Nav (Partner werden + Firmen-Login) */
.nav-link--partner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  margin-left: 0.4rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--blau);
  border-radius: var(--radius-soft);
  background: transparent;
  color: var(--blau);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transition:
    background-color 150ms var(--ease-out),
    color 150ms var(--ease-out),
    border-color 150ms var(--ease-out);
}
.nav-link--partner::after { display: none; }
.nav-link--partner:hover,
.nav-link--partner:focus-visible {
  background: var(--blau);
  border-color: var(--blau);
  color: var(--white);
}
@media (min-width: 1360px) {
  /* Kopfzeile darf etwas breiter als der Inhalt (1280 statt 1200) -- sonst passen 8 Links + Login + CTA nicht */
  .header-inner { gap: var(--space-md); max-width: 1280px; }
  .nav-list { gap: 0.6rem; flex-wrap: nowrap; }
  .nav-link { font-size: 0.88rem; white-space: nowrap; }
  .nav-link--login { padding: 0.4rem 0.7rem; }
  .logo-word { font-size: 1.05rem; }
  .header-cta { padding: 0.55em 1em; font-size: 0.9rem; }
}

.header-cta { flex-shrink: 0; padding: 0.6em 1.2em; font-size: 0.95rem; }

/* 05.09.2026: Burger bis 1359 px. Vorher 980 px -- zwischen 981 und ~1300 px lief die Kopfzeile
   über (7 Links + Firmen-Login + CTA passten nicht; bei 1024 px war „Vorgang starten“ abgeschnitten).
   Ab 1360 px kompakte Desktop-Nav, siehe unten. */
@media (max-width: 1359px) {
  .header-inner { gap: var(--space-md); }
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: none;
    border: 1px solid var(--line);
    border-radius: var(--radius-soft);
    padding: 0.45rem 0.8rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--ink);
    cursor: pointer;
  }
  .nav-toggle-bar {
    width: 18px; height: 2px;
    background: var(--ink);
    position: relative;
    display: inline-block;
  }
  .nav-toggle-bar::before, .nav-toggle-bar::after {
    content: '';
    position: absolute;
    left: 0;
    width: 18px; height: 2px;
    background: var(--ink);
  }
  .nav-toggle-bar::before { top: -6px; }
  .nav-toggle-bar::after { top: 6px; }

  .main-nav { margin-left: auto; }
  .nav-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    gap: 0;
    padding: var(--space-sm) var(--space-lg) var(--space-md);
    box-shadow: 0 16px 32px rgba(26,26,46,0.12);
  }
  .nav-list.is-open { display: flex; }
  .nav-link { display: block; padding: 0.75rem 0.25rem; font-size: 1.05rem; }
  .nav-item-start { display: block; }
  .nav-link--start {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 44px;
    margin-bottom: 0.5rem;
    padding: 0.7rem 1rem;
    border-radius: var(--radius-soft);
    background: var(--blau);
    color: var(--white);
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1;
  }
  .nav-link--start::after { display: none; }
  .nav-link--start:hover,
  .nav-link--start:focus-visible { background: var(--blau-dark); color: var(--white); }
  .nav-link--login {
    width: 100%;
    min-height: 44px;
    margin-top: 0.35rem;
    padding-inline: 1rem;
  }
  .nav-link--partner {
    width: 100%;
    min-height: 44px;   /* Touch-Ziel wie .btn (WCAG 2.2 / iOS) */
    margin-top: 0.85rem;
    margin-left: 0;
    padding: 0.7rem 1rem;
    font-size: 1rem;
  }
  .header-cta { margin-left: auto; }
}

@media (max-width: 560px) {
  .logo-word { display: none; }
  .header-inner { padding-inline: var(--space-md); }
}

/* Sehr schmale Screens: Header darf die Seite nicht aufspreizen */
@media (max-width: 460px) {
  .header-inner { gap: var(--space-sm); padding-inline: var(--space-sm); }
  .logo, .main-nav { min-width: 0; }
  .nav-toggle { padding: 0.45rem 0.6rem; }
  .nav-toggle-label { display: none; }
  .header-cta { padding: 0.55em 0.8em; font-size: 0.84rem; }
}

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

section { padding: var(--space-xl) 0; }

.section--dark {
  background: var(--ink);
  color: var(--text-on-dark);
}
.section--dark h2, .section--dark h3 { color: var(--white); }
.section--dark p { color: var(--text-on-dark-soft); }
.section--dark a { color: var(--blau-hell); }

.section--alt { background: var(--paper-alt); }

.section-head { max-width: 720px; margin-bottom: var(--space-lg); }
.section-head p { color: var(--ink-soft); font-size: 1.1rem; }
.section--dark .section-head p { color: var(--text-on-dark-soft); }

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

.hero { padding: var(--space-xl) 0 var(--space-xl); }

.hero-grid {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--space-xl);
  align-items: center;
}

.hero h1 { margin-bottom: var(--space-md); }
.hero .hero-sub {
  font-size: 1.2rem;
  color: var(--ink-soft);
  max-width: 34em;
}

.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--space-md); margin: var(--space-lg) 0 var(--space-md); }

.hero-facts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  padding: 0;
  margin: var(--space-md) 0 0;
  font-size: 0.94rem;
  color: var(--ink-soft);
}
.hero-facts li { display: flex; align-items: baseline; gap: 0.45em; }
.hero-facts .check { color: var(--gruen); font-weight: 700; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--space-lg); }
}

/* ---------- Kennzeichen-Rechner (Signatur-Element) ---------- */

.rechner {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-plate);
  padding: var(--space-lg);
  box-shadow: 0 18px 44px rgba(26, 26, 46, 0.10);
}

.rechner h2, .rechner h3 { font-size: 1.15rem; margin-bottom: var(--space-md); }

/* Kennzeichen als Blechteil: DIN-Proportion 520:110, Stanzradius,
   Prägewulst per Inset-Shadows, ein statisches Reflexfolien-Highlight */
.plate {
  display: flex;
  align-items: stretch;
  background: #FDFDFB;
  border: 0;
  border-radius: 7px;
  aspect-ratio: 520 / 110;
  height: auto;
  overflow: hidden;
  position: relative;
  margin: 3px 3px var(--space-md);
  box-shadow:
    0 0 0 3px #0E0E14,
    inset 0 2px 1px rgba(255, 255, 255, 0.9),
    inset 0 -3px 5px rgba(26, 26, 46, 0.2);
}
.plate::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(112deg, transparent 42%, rgba(255, 255, 255, 0.28) 50%, transparent 58%);
}
.plate-band {
  width: 8.5%;
  min-width: 34px;
  background: var(--blau);
  color: var(--white);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding-bottom: 6px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}
/* EU-Sternenkranz: 12 Fünfzack-Sterne als Data-URI-SVG */
.plate-band::before {
  content: '';
  width: 24px;
  height: 24px;
  margin-bottom: auto;
  margin-top: 7px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cpath id='s' d='M12 2.2l.55 1.62h1.7l-1.37.99.52 1.62L12 5.45l-1.4 1 .52-1.62-1.37-.99h1.7z' fill='%23FFCE00'/%3E%3C/defs%3E%3Cuse href='%23s'/%3E%3Cuse href='%23s' transform='rotate(30 12 12)'/%3E%3Cuse href='%23s' transform='rotate(60 12 12)'/%3E%3Cuse href='%23s' transform='rotate(90 12 12)'/%3E%3Cuse href='%23s' transform='rotate(120 12 12)'/%3E%3Cuse href='%23s' transform='rotate(150 12 12)'/%3E%3Cuse href='%23s' transform='rotate(180 12 12)'/%3E%3Cuse href='%23s' transform='rotate(210 12 12)'/%3E%3Cuse href='%23s' transform='rotate(240 12 12)'/%3E%3Cuse href='%23s' transform='rotate(270 12 12)'/%3E%3Cuse href='%23s' transform='rotate(300 12 12)'/%3E%3Cuse href='%23s' transform='rotate(330 12 12)'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}
.plate-input {
  border: 0;
  width: 100%;
  min-width: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0 0.5em;
  color: var(--ink);
  background: transparent;
  text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.85), 0 1.5px 1px rgba(0, 0, 0, 0.3);
}
.plate-input::placeholder { color: #A9A9B5; text-shadow: none; }
.plate-input:focus { outline: none; }
.plate:focus-within { box-shadow: 0 0 0 3px var(--blau), inset 0 2px 1px rgba(255,255,255,0.9), inset 0 -3px 5px rgba(26,26,46,0.2); }

/* Prägeschlag beim Tippen (einmalig, zweckgebunden) */
@keyframes praegen { from { transform: scale(1.05); } to { transform: scale(1); } }
.plate.is-praegen .plate-input { animation: praegen 120ms var(--ease-out); }

/* Schaukennzeichen: kein Input mehr (Festpreis!), sondern durchlaufende
   Bezirks-Kuerzel — die Botschaft ist "egal welcher Bezirk, ein Preis".
   Nur das Kuerzel wird animiert (weicher Praegewechsel), der Rest des
   Schilds steht absolut still: feste Kuerzel-Breite, kein Gesamt-Scale. */
/* Schriftgroesse haengt an der Schildbreite, nicht am Viewport: das
   Schild hat eine feste aspect-ratio, also fuellt der Satz bei jeder
   Spaltenbreite gleich viel Flaeche — wie auf einem echten Kennzeichen. */
.plate--schau { container-type: inline-size; }
.plate-schau {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.2em;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 10.4cqw;
  letter-spacing: 0.1em;
  /* Letter-spacing haengt auch hinter dem letzten Zeichen -- ohne
     Ausgleich sitzt der Satz optisch zu weit rechts. */
  padding-left: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.85), 0 1.5px 1px rgba(0, 0, 0, 0.3);
}
.plate-schau [data-plate-kuerzel] {
  flex: none;
  width: 2.2em;
  text-align: center;
}
@keyframes kuerzelwechsel {
  0%   { opacity: 0; transform: translateY(-0.12em) scale(1.06); }
  55%  { opacity: 1; transform: translateY(0) scale(0.985); }
  100% { opacity: 1; transform: none; }
}
[data-plate-kuerzel].is-wechsel {
  animation: kuerzelwechsel 340ms var(--ease-out);
  display: inline-block;
}
.plate-siegelpunkt {
  width: 0.42em;
  height: 0.42em;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #6FA8E8, var(--blau) 65%, #083A78);
  box-shadow: inset 0 -1px 1px rgba(0, 0, 0, 0.35), 0 0 0 1.5px rgba(26, 26, 46, 0.18);
  flex-shrink: 0;
}

.rechner label { font-weight: 600; font-size: 0.92rem; display: block; margin-bottom: var(--space-xs); }

.rechner select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.65em 0.8em;
  border: 1px solid var(--line);
  border-radius: var(--radius-soft);
  background: var(--white);
  color: var(--ink);
  margin-bottom: var(--space-md);
}

.rechner-row { display: grid; grid-template-columns: 1fr; gap: 0; }

/* Kassenbon-Optik: Mono-Positionen, gepunktete Zeilen, Abrisskante */
.rechner-out {
  border-top: 2px solid var(--ink);
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  font-family: var(--font-utility);
  font-size: 0.88rem;
}
.rechner-out .row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-md);
  padding: 0.35rem 0;
  color: var(--ink-soft);
  border-bottom: 1px dotted var(--line);
}
.rechner-out .row strong { color: var(--ink); }
.rechner-out .row .betrag { white-space: nowrap; font-variant-numeric: tabular-nums; }
.rechner-out .row--total {
  color: var(--ink);
  font-weight: 700;
  border-top: 1px solid var(--ink);
  border-bottom: 0;
  margin-top: 0.4rem;
  padding-top: 0.6rem;
}
/* Der Gesamtbetrag ist das Bild — Display-Zahl statt Fußnote */
.rechner-out .row--total .betrag {
  color: var(--blau);
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 3.2vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.rechner-out::after {
  content: '';
  display: block;
  height: 8px;
  margin-top: 12px;
  background:
    linear-gradient(-45deg, var(--paper-alt) 5px, transparent 0),
    linear-gradient(45deg, var(--paper-alt) 5px, transparent 0);
  background-size: 10px 10px;
}
.rechner-cta { width: 100%; justify-content: center; margin-top: var(--space-md); text-align: center; }
.rechner-note { font-family: var(--font-body); font-size: 0.82rem; color: var(--ink-soft); margin: var(--space-sm) 0 0; }
/* Ausweg fuer Unentschlossene direkt unter der Auswahl -- die Amtsbegriffe
   sagen dem normalen Autohalter nichts, deshalb hier der Weg zum
   Situations-Finder (04.08.2026). */
.rechner-hilfe { font-family: var(--font-body); font-size: 0.85rem; color: var(--ink-soft); margin: 0.45rem 0 0.9rem; }

.cta-trust {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  font-size: 0.84rem;
  color: var(--ink-soft);
  margin: 0.7rem 0 0;
}

/* Kleine Kennzeichen-Chips (Motiv-Wiederholung) */
.plate-chip {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--ink);
  border-radius: 5px;
  overflow: hidden;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  background: var(--white);
  color: var(--ink);
  line-height: 1;
}
.plate-chip::before {
  content: '';
  align-self: stretch;
  width: 6px;
  background: var(--blau);
}
.plate-chip span { padding: 0.3em 0.5em; }

/* ---------- Fakten-Band (dunkel, full-bleed) ---------- */

.fakten-band { padding: var(--space-xl) 0; }
/* Zeitungssatz: Kolumnenlinien statt Grid-Luft, Zahlen auf Schlagzeilengröße */
.fakten-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0;
}
.fakt { padding: 0 var(--space-lg); border-left: 1px solid var(--ink-line); }
.fakt:first-child { border-left: 0; padding-left: 0; }
.fakt .fakt-wert {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--white);
  display: block;
  line-height: 1.05;
}
@media (max-width: 700px) {
  .fakt { border-left: 0; padding: var(--space-md) 0; border-top: 1px solid var(--ink-line); }
  .fakt:first-child { border-top: 0; padding-top: 0; }
}
.fakt .fakt-wert .einheit { font-size: 0.55em; font-weight: 500; color: var(--gold-hell); }
.fakt .fakt-label { color: var(--text-on-dark-soft); font-size: 0.95rem; }

/* ---------- Editorial-Rows ---------- */

.editorial-row {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--space-xl);
  align-items: center;
  padding: var(--space-xl) 0;
}
/* Leitlinien-Trenner im Markierungs-Rhythmus (Zeichen 340) statt 1px-Strich */
.editorial-row + .editorial-row::before {
  content: '';
  display: block;
  grid-column: 1 / -1;
  height: 3px;
  background: repeating-linear-gradient(90deg, var(--ink) 0 18px, transparent 18px 54px);
  opacity: 0.16;
}
.editorial-row--reverse { grid-template-columns: 2fr 3fr; }
.editorial-row--reverse .editorial-text { order: 2; }
.editorial-row--reverse .editorial-visual { order: 1; }

.editorial-text h3 { font-size: clamp(1.4rem, 2.8vw, 1.9rem); }
.editorial-text p { color: var(--ink-soft); }

.editorial-visual {
  background: var(--paper-alt);
  border-radius: var(--radius-plate);
  padding: var(--space-lg);
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.editorial-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid var(--blau);
  padding-bottom: 2px;
  transition: gap 150ms var(--ease-out);
}
.editorial-link:hover { gap: 0.6em; }

@media (max-width: 820px) {
  .editorial-row, .editorial-row--reverse { grid-template-columns: 1fr; gap: var(--space-lg); }
  .editorial-row--reverse .editorial-text { order: 1; }
  .editorial-row--reverse .editorial-visual { order: 2; }
}

/* ---------- Bento (nur Startseite) ---------- */

.bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
.bento-cell {
  border-radius: var(--radius-plate);
  padding: var(--space-lg);
  background: var(--white);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.bento-cell h3 { margin-bottom: 0; }
.bento-cell p { color: var(--ink-soft); margin-bottom: 0; font-size: 0.98rem; }
.bento-a { grid-column: span 7; }
.bento-b { grid-column: span 5; }
.bento-c { grid-column: span 5; }
.bento-d { grid-column: span 4; }
.bento-e { grid-column: span 3; }
.bento-cell--dark { background: var(--ink); border-color: var(--ink); }
.bento-cell--dark h3 { color: var(--white); }
.bento-cell--dark p { color: var(--text-on-dark-soft); }
.bento-cell--gold h3 .siegel { color: var(--gold); }

@media (max-width: 900px) {
  .bento-a, .bento-b { grid-column: span 12; }
  .bento-c, .bento-d, .bento-e { grid-column: span 6; }
}
@media (max-width: 620px) {
  .bento-c, .bento-d, .bento-e { grid-column: span 12; }
}

/* ---------- Prozess-Schritte (echte Reihenfolge → nummeriert) ---------- */

.steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-md);
}
.steps li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--space-md);
  align-items: start;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-plate);
  padding: var(--space-md) var(--space-lg);
}
.steps li::before {
  content: counter(step);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--white);
  background: var(--blau);
  width: 46px; height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
}
.steps h3 { margin-bottom: 0.3rem; }
.steps p { margin-bottom: 0; color: var(--ink-soft); }
.steps .dauer {
  font-family: var(--font-utility);
  font-size: 0.78rem;
  color: var(--blau);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ---------- Preistabellen ---------- */

.table-wrap { overflow-x: auto; }

table.preise {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-plate);
  overflow: hidden;
  font-size: 0.98rem;
}
table.preise caption {
  text-align: left;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  padding: var(--space-md) 0;
}
table.preise th, table.preise td {
  padding: 0.8rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
table.preise thead th {
  background: var(--ink);
  color: var(--text-on-dark);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.92rem;
}
table.preise tbody tr:last-child td { border-bottom: 0; }
/* Tabellensatz: Beträge rechtsbündig im Ziffernregister, Gesamt dominant */
table.preise .betrag { font-family: var(--font-utility); white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
table.preise th.th-num { text-align: right; }
table.preise .betrag--total { font-weight: 700; color: var(--blau); font-size: 1.08em; }
table.preise .gebost {
  font-family: var(--font-utility);
  font-size: 0.78rem;
  color: var(--ink-soft);
  display: block;
  text-align: right;
}

.preis-hinweis { font-size: 0.88rem; color: var(--ink-soft); margin-top: var(--space-sm); }

/* Vergleichstabelle */
table.preise .wir { background: rgba(11, 78, 162, 0.06); }
table.preise .check-ja { color: var(--gruen); font-weight: 700; }
table.preise .check-nein { color: var(--rot); }

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

.faq-list { display: grid; gap: var(--space-sm); max-width: 820px; }

details.faq {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-soft);
  padding: 0;
}
details.faq summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.02rem;
  padding: var(--space-md) var(--space-lg);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: '+';
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--blau);
  transition: transform 200ms var(--ease-out);
  flex-shrink: 0;
}
details.faq[open] summary::after { transform: rotate(45deg); }
details.faq .faq-body { padding: 0 var(--space-lg) var(--space-md); color: var(--ink-soft); }
details.faq .faq-body p:last-child { margin-bottom: 0; }

/* ---------- Ratgeber / Prosa ---------- */

.prose {
  max-width: 720px;
  margin-inline: auto;
}
.prose h2 { margin-top: var(--space-xl); }
.prose h3 { margin-top: var(--space-lg); }
.prose .lead {
  font-size: 1.22rem;
  line-height: 1.55;
  color: var(--ink-soft);
  border-top: 3px solid var(--blau);
  padding-top: var(--space-md);
}
.prose-meta {
  display: flex;
  gap: var(--space-md);
  font-family: var(--font-utility);
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin-bottom: var(--space-md);
}
.prose table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.prose table th, .prose table td { border: 1px solid var(--line); padding: 0.6rem 0.8rem; text-align: left; }
.prose table th { background: var(--paper-alt); font-family: var(--font-display); }
.prose blockquote {
  margin: var(--space-lg) 0;
  padding: var(--space-md) var(--space-lg);
  border-left: 4px solid var(--gold);
  background: var(--white);
  font-style: italic;
}
/* ---------- Situations-Finder ---------- */
.finder { max-width: 62rem; }
.finder-pfad {
  font-family: var(--font-utility);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--blau);
  margin-bottom: var(--space-md);
}
.finder-frage { margin: 0 0 var(--space-sm); }
.finder-kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--space-sm);
  margin-top: var(--space-md);
}
.finder-kachel {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-align: left;
  padding: var(--space-md);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-soft);
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  transition: border-color 140ms var(--ease-out), box-shadow 140ms var(--ease-out);
}
.finder-kachel strong { font-size: 1rem; line-height: 1.3; }
.finder-kachel span { font-size: 0.86rem; color: var(--ink-soft); }
.finder-kachel:hover { border-color: var(--blau); box-shadow: 0 2px 10px rgba(11, 78, 162, 0.1); }
.finder-kachel:focus-visible { outline: 3px solid var(--blau); outline-offset: 2px; }

.finder-ergebnis {
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 4px solid var(--blau);
  border-radius: var(--radius-soft);
  padding: var(--space-lg);
}
.finder-ergebnis h2 { margin: 0.2rem 0 var(--space-sm); }
.finder-preis { font-size: 1.05rem; margin-bottom: var(--space-sm); }
.finder-preis strong { font-family: var(--font-display); font-size: 1.6rem; color: var(--blau); }
.finder-preis span { color: var(--ink-soft); font-size: 0.9rem; }
.finder-unterlagen { margin: var(--space-md) 0; }
.finder-unterlagen h3 { font-size: 0.95rem; margin-bottom: var(--space-xs); }
.finder-unterlagen ul { margin: 0; padding-left: 1.1rem; }
.finder-unterlagen li { font-size: 0.9rem; color: var(--ink-soft); }
/* 20.08.2026: Ergaenzungen fuer die gefuehrte Vorgangsauswahl. Die Basis
   (.finder, .finder-kacheln, .finder-kachel, .finder-pfad, .finder-ergebnis)
   stand hier schon -- sie wird jetzt endlich benutzt. */
.finder-schritt {
  font-family: var(--font-utility);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin: 0 0 var(--space-xs);
}
.finder-hilfe { font-size: 0.86rem; color: var(--ink-soft); margin: 0 0 var(--space-sm); }
.finder-zurueck {
  background: none;
  border: 0;
  color: var(--blau);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 0.4rem 0;
  min-height: 44px;
}
.finder-zurueck:focus-visible { outline: 3px solid var(--blau); outline-offset: 2px; border-radius: var(--radius-subtle); }
.finder-ergebnis-klartext { font-family: var(--font-display); font-weight: 700; margin: 0; }
.finder-ergebnis-amtlich { color: var(--ink-soft); font-size: 0.86rem; margin: 0.2rem 0 0; }
/* Im schmalen Rechner-Kasten braucht die Ergebniskarte weniger Luft. */
.rechner .finder-ergebnis { padding: var(--space-md); }
.rechner .finder-kacheln { grid-template-columns: 1fr; margin-top: var(--space-sm); }
.finder-kachel { min-height: 48px; }

.finder-aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  margin-top: var(--space-md);
}

/* Hinweiskasten — bis 03.08.2026 nur innerhalb .prose gestylt; die
   Landingpages nutzen ihn jetzt ebenfalls, deshalb ohne Kontextbindung. */
.infobox {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-soft);
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-lg) 0;
}
.infobox h3 { margin-top: 0; font-size: 1.05rem; }

.artikel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-lg);
}
.artikel-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-plate);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  transition: box-shadow 200ms var(--ease-out);
}
.artikel-card:hover { box-shadow: 0 10px 28px rgba(26,26,46,0.10); }
.artikel-card h3 { margin: 0; }
.artikel-card h3 a { color: var(--ink); text-decoration: none; }
.artikel-card h3 a:hover { color: var(--blau); }
.artikel-card p { color: var(--ink-soft); font-size: 0.96rem; margin: 0; }
.artikel-card .lesedauer { font-family: var(--font-utility); font-size: 0.78rem; color: var(--ink-soft); }

/* ---------- CTA-Sektion ---------- */

.cta-final { text-align: left; }
.cta-final .cta-box {
  background: var(--blau);
  color: var(--white);
  border-radius: var(--radius-plate);
  padding: var(--space-xl) var(--space-lg);
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-lg);
  align-items: center;
}
.cta-final h2 { color: var(--white); }
.cta-final p { color: rgba(255,255,255,0.85); margin-bottom: 0; }
.cta-final .btn { background: var(--white); color: var(--blau); justify-self: start; }
.cta-final .btn:hover { background: var(--paper); }
@media (max-width: 720px) {
  .cta-final .cta-box { grid-template-columns: 1fr; }
}

/* ---------- Kontakt / Formulare ---------- */

.kontakt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
}
@media (max-width: 820px) { .kontakt-grid { grid-template-columns: 1fr; } }

.kontakt-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-plate);
  padding: var(--space-lg);
}
.kontakt-card h3 { margin-bottom: var(--space-sm); }
.kontakt-card .gross {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
}

/* ---------- Siegel-/Trust-Leiste ---------- */

.trust-leiste {
  list-style: none;
  margin: 0;
  padding: var(--space-md) var(--space-lg);
  max-width: var(--max-w);
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  justify-content: center;
}
.trust-wrap {
  border-top: 1px solid var(--line);
  background: var(--paper);
}
.trust-leiste li {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink-soft);
}

/* Prüfplakette (HU-Systematik): Kerbenkranz + gestempeltes Mono-Kürzel.
   Eigene Bildsprache — bewusst kein Icon-Set. */
.plakette {
  --ring: var(--ink-soft);
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-utility);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--ring);
}
.plakette::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: repeating-conic-gradient(var(--ring) 0deg 9deg, transparent 9deg 30deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
}
.plakette--gold { --ring: var(--gold); }
.plakette--blau { --ring: var(--blau); }
.plakette--gruen { --ring: var(--gruen); }
.trust-leiste .plakette { margin: 5px; }

/* Kleine Plakette (Hero-Kompaktleiste) */
.plakette--s { width: 28px; height: 28px; }
.plakette--s::after { inset: -4px; }
.plakette--s svg { width: 15px; height: 15px; display: block; }

/* Kompakte Siegel-Reihe im Hero — Kurzform der grossen Badge-Leiste
   ueber dem Footer, gleiche Piktogramme, nur Label ohne Subline. */
.trust-kompakt {
  list-style: none;
  margin: var(--space-md) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm) var(--space-lg);
}
.trust-kompakt li {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink-soft);
}
/* Siegelleiste ueber dem Antragsformular: identische Bauform wie die
   Leiste ueber dem Footer, nur ohne deren Rahmen/Flaeche. */
.antrag-siegel {
  padding-inline: 0;
  margin-bottom: var(--space-lg);
}

/* Badge-Lockups: Piktogramm im Plaketten-Kranz + zweizeiliger Text.
   Gleiche Kranz-Systematik wie .plakette, nur mit gezeichnetem Icon
   statt Buchstaben-Kuerzel. */
.trust-leiste--badges {
  gap: var(--space-md) var(--space-xl);
  padding-block: var(--space-lg);
}
.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.8em;
}
.trust-badge .plakette svg {
  width: 21px;
  height: 21px;
  display: block;
}
.trust-badge .tb-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  text-align: left;
}
.trust-badge .tb-text strong {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.25;
}
.trust-badge .tb-text span {
  font-size: 0.76rem;
  font-weight: 400;
  color: var(--ink-soft);
  line-height: 1.3;
}
@media (max-width: 640px) {
  /* Untereinander, aber jedes Lockup als Block mittig — linksbuendig
     wirkte gegenueber der sonst zentrierten Leiste wie ein Fehler. */
  .trust-leiste--badges {
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    padding-inline: var(--space-lg);
  }
  .trust-kompakt { justify-content: center; }
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--ink);
  color: var(--text-on-dark-soft);
  margin-top: var(--space-xl);
}
.footer-inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-xl);
}
.footer-brand p { font-size: 0.94rem; }
.footer-brand .logo-word { color: var(--white); }
.footer-brand .logo-plate { border-color: var(--white); }
.footer-contact a { color: var(--blau-hell); text-decoration: none; }
.footer-contact a:hover { text-decoration: underline; }

.footer-social { display: flex; gap: 0.55rem; margin-top: var(--space-md); }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.3rem; height: 2.3rem; border-radius: 9px;
  color: var(--text-on-dark-soft);
  border: 1px solid var(--ink-line);
  transition: color .18s ease, border-color .18s ease, background .18s ease;
}
.footer-social a:hover, .footer-social a:focus-visible {
  color: var(--white); border-color: var(--white); background: rgba(255,255,255,.06);
}
.footer-social svg { width: 1.2rem; height: 1.2rem; display: block; }

.footer-col h2 {
  font-size: 0.85rem;
  font-family: var(--font-utility);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold-hell);
  margin-bottom: var(--space-md);
  font-weight: 600;
}
.footer-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.45rem; }
.footer-col a { color: var(--text-on-dark-soft); text-decoration: none; font-size: 0.95rem; }
.footer-col a:hover { color: var(--white); }

.footer-legal {
  border-top: 1px solid var(--ink-line);
  padding: var(--space-md) var(--space-lg);
  text-align: center;
  font-size: 0.84rem;
}
.footer-legal p { margin: 0; }

/* Urheberzeile "Konzept und Realisierung: Code Expert".
   Bewusster Schriftwechsel: der Vorspann bleibt im Body-Face, der Name
   steht in der Display-Schrift (Space Grotesk) — dieselbe, die Code Expert
   selbst führt. Farbe ist das Siegel-Gold aus dem Logo, nicht das Blau der
   Funktionslinks: ein Credit soll nicht wie Navigation aussehen.
   Kontrast #D4A84B auf #1A1A2E = 7,7:1 (WCAG AAA).
   Signatur: der Unterstrich wächst beim Hover von links — kein
   text-decoration, das über die Unterlängen schneidet. */
.footer-legal .credit {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--gold-hell);
  text-decoration: none;
  position: relative;
  padding-bottom: 2px;
  white-space: nowrap;
}
.footer-legal .credit::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 160ms var(--ease-out);
}
.footer-legal .credit:hover,
.footer-legal .credit:focus-visible { color: var(--white); }
.footer-legal .credit:hover::after,
.footer-legal .credit:focus-visible::after { transform: scaleX(1); }
/* Tastaturfokus muss ohne Hover erkennbar bleiben. */
.footer-legal .credit:focus-visible {
  outline: 2px solid var(--gold-hell);
  outline-offset: 3px;
  border-radius: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .footer-legal .credit::after { transition: none; }
}
/* Auf schmalen Viewports liegt der fixierte Chat-Knopf (54px, 20px vom Rand)
   ueber dem Ende der Urheberzeile — im Screenshot-Test bei 380px sichtbar
   abgeschnitten. Die Zeile bekommt deshalb Luft nach unten, statt den Chat
   zu verschieben: der Knopf ist die wichtigere Funktion. */
@media (max-width: 560px) {
  .footer-legal { padding-bottom: calc(var(--space-md) + 74px); }
}

@media (max-width: 900px) {
  .footer-inner { grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
  .footer-brand { grid-column: span 2; }
}
@media (max-width: 560px) {
  .footer-inner { grid-template-columns: 1fr; }
  .footer-brand { grid-column: span 1; }
}

/* ---------- Chat-Widget ---------- */

.chat-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 150;
  background: var(--ink);
  color: var(--white);
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 0.75em 1.3em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  box-shadow: 0 10px 30px rgba(26,26,46,0.28);
  transition: transform 150ms var(--ease-out);
}
.chat-fab:hover { transform: translateY(-2px); }
.chat-fab .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gruen); }
/* Plate-Band-Motiv am FAB: Markenwiedererkennung statt anonymer Pille */
.chat-fab { overflow: hidden; padding-left: 1.6em; }
.chat-fab::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 9px;
  background: var(--blau);
}
.chat-fab { position: fixed; }

.chat-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chat-chip {
  border: 1.5px solid var(--blau);
  border-radius: 999px;
  background: var(--white);
  color: var(--blau);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.4em 0.9em;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.chat-chip:hover { background: var(--blau); color: var(--white); }
.chat-chip:disabled { opacity: 0.45; cursor: default; }
.chat-chip:disabled:hover { background: var(--white); color: var(--blau); }

.chat-consent { max-width: 100%; }
.chat-consent p { margin: 0 0 0.6rem; }
.chat-consent-label {
  display: flex;
  gap: 0.5em;
  align-items: flex-start;
  font-size: 0.88rem;
  margin-bottom: 0.7rem;
  cursor: pointer;
}
.chat-consent-label input { margin-top: 0.2em; }

.chat-panel {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 160;
  width: min(400px, calc(100vw - 24px));
  height: min(560px, calc(100dvh - 40px));
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-plate);
  box-shadow: 0 24px 60px rgba(26,26,46,0.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.chat-panel[hidden] { display: none; }

.chat-head {
  background: var(--ink);
  color: var(--white);
  padding: var(--space-md) var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.chat-head h2 { font-size: 1rem; margin: 0; color: var(--white); }
.chat-head p { font-size: 0.78rem; margin: 0; color: var(--text-on-dark-soft); }
.chat-close {
  background: none;
  border: 0;
  color: var(--white);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
}

.chat-log {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  background: var(--paper);
}
.chat-msg {
  max-width: 85%;
  padding: 0.6rem 0.9rem;
  border-radius: 12px;
  font-size: 0.95rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.chat-msg--user {
  align-self: flex-end;
  background: var(--blau);
  color: var(--white);
  border-bottom-right-radius: 4px;
}
.chat-msg--bot {
  align-self: flex-start;
  background: var(--white);
  border: 1px solid var(--line);
  border-bottom-left-radius: 4px;
}
.chat-msg--warte { color: var(--ink-soft); font-style: italic; }

.chat-form {
  display: flex;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border-top: 1px solid var(--line);
  background: var(--white);
}
.chat-form textarea {
  flex: 1;
  resize: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-soft);
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.55rem 0.7rem;
  height: 44px;
}
.chat-form button {
  background: var(--blau);
  color: var(--white);
  border: 0;
  border-radius: var(--radius-soft);
  font-family: var(--font-display);
  font-weight: 600;
  padding: 0 1.1em;
  cursor: pointer;
}
.chat-form button:disabled { opacity: 0.5; cursor: default; }
.chat-note {
  font-size: 0.7rem;
  color: var(--ink-soft);
  text-align: center;
  padding: 0 var(--space-md) var(--space-sm);
  background: var(--white);
  margin: 0;
}

/* ============================================================
   Motion-System — variierte, einmalige Reveals (kein Einheits-Fade).
   Aktiv nur mit JS (html.motion) und ohne prefers-reduced-motion.
   ============================================================ */

@keyframes mAuf    { from { opacity: 0; translate: 0 26px; }  to { opacity: 1; translate: 0 0; } }
@keyframes mLinks  { from { opacity: 0; translate: -28px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes mRechts { from { opacity: 0; translate: 28px 0; }  to { opacity: 1; translate: 0 0; } }
@keyframes mZoom   { from { opacity: 0; scale: 0.955; }       to { opacity: 1; scale: 1; } }

html.motion .m { opacity: 0; }
html.motion .m.in-view {
  animation: mAuf 0.6s var(--ease-out) forwards;
  animation-delay: calc(var(--m-i, 0) * 70ms);
}
html.motion .m--links.in-view  { animation-name: mLinks; }
html.motion .m--rechts.in-view { animation-name: mRechts; }
html.motion .m--zoom.in-view   { animation-name: mZoom; animation-duration: 0.55s; }

/* Hero-Einstieg beim Laden: gestaffelte Sequenz statt statischem Aufschlag */
html.motion .hero h1              { animation: mAuf 0.65s var(--ease-out) backwards; }
html.motion .hero .badge-kba      { animation: mAuf 0.5s var(--ease-out) backwards; }
html.motion .hero .hero-sub       { animation: mAuf 0.65s var(--ease-out) 0.1s backwards; }
html.motion .hero .hero-ctas      { animation: mAuf 0.65s var(--ease-out) 0.18s backwards; }
html.motion .hero .hero-facts     { animation: mAuf 0.65s var(--ease-out) 0.26s backwards; }
html.motion .hero .breadcrumb     { animation: mAuf 0.5s var(--ease-out) backwards; }
html.motion .hero .rechner,
html.motion .hero .tafel          { animation: mZoom 0.7s var(--ease-out) 0.2s backwards; }

/* Fakten-Band: Scroll-Driven wo unterstützt */
@keyframes revealUp {
  from { opacity: 0; translate: 0 28px; }
  to   { opacity: 1; translate: 0 0; }
}
@supports (animation-timeline: view()) {
  .fakten-band .fakt {
    animation: revealUp linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 35%;
  }
}

/* Header verdichtet sich beim Scrollen */
.site-header { transition: box-shadow 250ms ease, background-color 250ms ease; }
.site-header.ist-gescrollt {
  background: var(--paper);
  box-shadow: 0 6px 24px rgba(26, 26, 46, 0.10);
}

/* FAQ-Accordions öffnen weich (Chrome 131+, sonst instant) */
details.faq::details-content {
  block-size: 0;
  overflow: clip;
  transition: block-size 0.32s var(--ease-out), content-visibility 0.32s allow-discrete;
}
details.faq[open]::details-content { block-size: auto; }

/* Kennzeichen: Reflexfolie schimmert einmal bei Hover */
@keyframes reflex { from { background-position: -140% 0; } to { background-position: 240% 0; } }
.plate::after { background-size: 200% 100%; background-position: -140% 0; }
html.motion .plate:hover::after,
html.motion .plate:focus-within::after { animation: reflex 0.9s var(--ease-in-out) 1; }

/* ---------- Formular-Elemente: custom statt Browser-Default ---------- */

select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%231A1A2E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75em center;
  background-size: 1em;
  padding-right: 2.4em;
}
select:hover { border-color: var(--ink); }

input[type="checkbox"] {
  accent-color: var(--blau);
  width: 1.05em;
  height: 1.05em;
}

input, select, textarea { transition: border-color 140ms ease, box-shadow 140ms ease; }
input:focus, select:focus, textarea:focus {
  border-color: var(--blau);
  box-shadow: 0 0 0 3px rgba(11, 78, 162, 0.14);
  outline: none;
}

/* ---------- Dunkle Flächen: feiner Sicherheitsdruck (Guilloche-Anmutung) ---------- */

.section--dark,
.cta-final .cta-box,
.site-footer {
  background-image:
    radial-gradient(circle at 18% -20%, rgba(255, 255, 255, 0.05), transparent 42%),
    repeating-radial-gradient(circle at 115% 140%, transparent 0 17px, rgba(255, 255, 255, 0.022) 17px 18px);
}

/* ---------- Chat-FAB weicht Sticky-CTA aus ---------- */

@media (max-width: 719px) {
}

/* ---------- Mobile-Feinschliff ---------- */

@media (max-width: 640px) {
  .hero-ctas .btn-lg { width: 100%; justify-content: center; }
  .rechner { padding: var(--space-md); }
  table.preise { font-size: 0.88rem; }
  table.preise th, table.preise td { padding: 0.6rem 0.6rem; }
  .cta-final .cta-box { padding: var(--space-lg) var(--space-md); }
  .hero { padding-top: var(--space-lg); }
}

/* ---------- Utilities ---------- */

.mt-lg { margin-top: var(--space-lg); }
.mb-0 { margin-bottom: 0; }
.text-soft { color: var(--ink-soft); }

.badge-kba {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  background: var(--white);
  border: 1.5px solid var(--gold);
  color: var(--ink);
  border-radius: 999px;
  padding: 0.35em 0.9em;
  font-family: var(--font-utility);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}
.badge-kba::before {
  content: '';
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--gold);
}

.breadcrumb {
  font-size: 0.85rem;
  color: var(--ink-soft);
  padding-top: var(--space-md);
}
.breadcrumb a { color: var(--ink-soft); }
.breadcrumb .sep { margin: 0 0.4em; }

@media (max-width: 400px) {
  .container { padding-inline: var(--space-md); }
  section { padding: var(--space-lg) 0; }
}

/* ---------- On-Site-Checkout ---------- */

.checkout {
  max-width: 640px;
  /* 03.08.2026: stand ohne dies auf Desktop linksbuendig am Containerrand,
     mit ueber 500 px Leerraum rechts daneben. */
  margin-inline: auto;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-plate);
  padding: var(--space-lg);
  box-shadow: 0 18px 44px rgba(26, 26, 46, 0.10);
}
.co-punkte {
  list-style: none;
  display: flex;
  gap: var(--space-sm);
  padding: 0;
  margin: 0 0 var(--space-lg);
  font-family: var(--font-utility);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.co-punkte li {
  flex: 1;
  text-align: center;
  padding: 0.5em 0.2em;
  border-top: 3px solid var(--line);
  color: var(--ink-soft);
}
.co-punkte li.aktiv { border-top-color: var(--blau); color: var(--blau); font-weight: 600; }
.co-punkte li.fertig { border-top-color: var(--gruen); color: var(--gruen); }
.checkout h2 { font-size: 1.25rem; }
.checkout label { display: block; font-weight: 600; font-size: 0.92rem; margin: var(--space-md) 0 var(--space-xs); }
.checkout input, .checkout select {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.65em 0.8em;
  border: 1px solid var(--line);
  border-radius: var(--radius-subtle);
  background: var(--white);
  color: var(--ink);
}
.co-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-md); }
@media (max-width: 560px) { .co-zeile { grid-template-columns: 1fr; } }
.checkout .btn { margin-top: var(--space-lg); width: 100%; justify-content: center; }
.checkout .btn:disabled { opacity: 0.5; cursor: default; transform: none; box-shadow: none; }
.checkout .btn.laedt { opacity: 0.7; cursor: progress; }
.co-hinweis { font-size: 0.82rem; color: var(--ink-soft); margin: var(--space-sm) 0 0; }
.co-fehler {
  background: #FBEAE8;
  color: var(--rot);
  border-radius: var(--radius-subtle);
  padding: 0.6em 0.9em;
  font-size: 0.9rem;
  margin: var(--space-md) 0 0;
}
.co-recht {
  display: flex !important;
  gap: 0.6em;
  align-items: flex-start;
  font-weight: 400 !important;
  font-size: 0.9rem !important;
  line-height: 1.5;
  margin: var(--space-md) 0 0 !important;
  cursor: pointer;
}
/* Kennzeichen-Eingabe als echtes Schild (03.08.2026).
   Kompakter als das Hero-Schild: dort traegt es die Seite, hier steht es
   in einer Feldreihe und darf die anderen Felder nicht erschlagen. */
.plate--eingabe {
  aspect-ratio: auto;
  height: 62px;
  max-width: 22rem;
  margin: 0 3px var(--space-xs);
}
.plate--eingabe .plate-band {
  width: 30px;
  min-width: 30px;
  font-size: 0.7rem;
  padding-bottom: 4px;
}
.plate--eingabe .plate-band::before { width: 17px; height: 17px; margin-top: 5px; }

/* Anrede-Auswahl (KBA-Pflicht m/w/d) */
.co-anrede {
  border: 0;
  padding: 0;
  margin: 0 0 var(--space-sm);
  display: flex;
  flex-wrap: wrap;
  /* Enger Abstand: Die Karten tragen ihre Trennung jetzt selbst ueber
     Rahmen, der frueher noetige 1.4em-Zwischenraum wuerde sie zerreissen. */
  gap: 0.5rem;
  align-items: stretch;
}
.co-anrede legend {
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0;
  margin-bottom: 0.3em;
  flex-basis: 100%;
}
/* Anrede als Auswahlkarten (05.08.2026).
   Vorher drei nackte 13-px-Radiokreise in einer 24 px hohen Zeile: als
   Tippziel auf dem Handy zu klein (Richtwert 44 px) und optisch ein
   Fremdkoerper neben den vollbreiten Feldern darunter. Jetzt gleichwertige
   Flaechen im selben Formensystem wie die uebrigen Auswahlkarten des
   Formulars -- kein zweites Muster, nur konsequent angewandt. */
.co-anrede-wahl {
  display: inline-flex !important;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 48px;
  padding: 0.5em 0.75em;
  background: var(--white, #fff);
  border: 1px solid var(--line, #D9D4C8);
  border-radius: var(--radius-soft, 8px);
  font-weight: 500 !important;
  font-size: 0.95rem;
  margin: 0 !important;
  cursor: pointer;
  transition: border-color 140ms var(--ease-out), background 140ms var(--ease-out);
}
.co-anrede-wahl:hover { border-color: var(--blau, #0B4EA2); }
.co-anrede-wahl:has(input:checked) {
  border-color: var(--blau, #0B4EA2);
  border-width: 2px;
  padding: calc(0.5em - 1px) calc(0.75em - 1px);
  background: #F2F6FC;
  font-weight: 600 !important;
}
.co-anrede-wahl:has(input:focus-visible) {
  outline: 2px solid var(--blau, #0B4EA2);
  outline-offset: 2px;
}
.co-anrede-wahl input {
  width: 1.15em !important;
  height: 1.15em;
  min-width: 0;
  margin: 0;
  flex: none;
  accent-color: var(--blau, #0B4EA2);
}

/* Frühe eVB-Frage in Schritt 4 */
.co-evb-frage {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--blau);
  border-radius: var(--radius-soft);
  padding: var(--space-md);
  margin: var(--space-md) 0;
}
.co-evb-frage p { margin: 0; }
.co-evb-frage p + p { margin-top: var(--space-sm); }
.co-anzeige {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0.05em 0.35em;
  white-space: nowrap;
}

/* Drei antippbare Stellen statt eines Feldes: der Kunde tippt genau dort,
   wo die Angabe auf dem echten Schild steht. Die Plakette sitzt wie beim
   Logo zwischen Ortskuerzel und Erkennungsbuchstaben. */
.plate--eingabe { position: relative; }
.plate-felder {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 0;
}
.plate-teil {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.55rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink);
  text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.85), 0 1.5px 1px rgba(0, 0, 0, 0.3);
  /* Die Formular-Grundregeln wuerden hier ein Feld im Feld erzeugen. */
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0.06em 0.12em !important;
  min-width: 0;
  border-radius: 4px;
}
.plate-teil--kreis { width: 2.5em; }
.plate-teil--buchstaben { width: 1.8em; }
.plate-teil--zahl { width: 3.1em; }
/* Als Eingabefeld erkennbar: dezente Ausfülllinie unter jedem Segment
   plus leicht getoenter Grund — klar „hier tippen", ohne den
   Schild-Look zu zerstoeren. */
.plate-teil {
  border-bottom: 2px solid rgba(11, 78, 162, 0.45) !important;
  border-radius: 3px 3px 0 0 !important;
  background: rgba(11, 78, 162, 0.06) !important;
}
.plate-teil::placeholder { color: rgba(26, 26, 46, 0.3); font-weight: 400; }
.plate-teil:focus {
  outline: none;
  border-bottom-color: var(--blau) !important;
  background: rgba(11, 78, 162, 0.13) !important;
}
.plate--eingabe .plate-siegelpunkt {
  width: 0.36em;
  height: 0.36em;
  margin: 0 0.34em;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: inset 0 0 0 1.5px rgba(26, 26, 46, 0.4);
  flex-shrink: 0;
  opacity: 0.55;
}

@media (max-width: 480px) {
  .plate--eingabe { height: 54px; }
  .plate--eingabe .plate-teil { font-size: 1.3rem; }
}

/* Foto-Erkennung des Fahrzeugscheins im Checkout (03.08.2026) */
.co-ocr {
  background: var(--paper);
  border: 1px dashed var(--blau);
  border-radius: var(--radius-soft);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
}
.co-ocr-text { font-size: 0.88rem; margin: 0 0 var(--space-sm); color: var(--ink-soft); }
.co-ocr-text strong { color: var(--ink); }
.co-ocr-btn { display: inline-flex; margin: 0; cursor: pointer; }
.co-ocr-status {
  font-size: 0.85rem;
  margin: var(--space-sm) 0 0;
  color: var(--ink-soft);
}
.co-ocr-status--ok { color: var(--gruen); font-weight: 600; }
.co-ocr-status--fehler { color: var(--rot); }

/* 05.08.2026: Kaestchen von 13 px (Browser-Standard) auf 1.25em. Diese
   Haken sind rechtlich die wichtigsten Klicks im ganzen Formular -- AGB,
   Widerruf, Datenschutz. Sie duerfen nicht die kleinsten Bedienelemente
   der Seite sein. Der Kasten drumherum macht zusaetzlich sichtbar, was
   noch offen ist. */
.co-recht input {
  width: 1.25em !important;
  height: 1.25em;
  min-width: 0;
  margin-top: 0.15em;
  flex-shrink: 0;
  accent-color: var(--blau, #0B4EA2);
  cursor: pointer;
}
.checkout .co-recht {
  padding: 0.7rem 0.85rem;
  background: var(--paper, #F7F5F0);
  border: 1px solid var(--line, #D9D4C8);
  border-radius: var(--radius-soft, 8px);
  margin: 0.6rem 0 0 !important;
  transition: border-color 140ms var(--ease-out), background 140ms var(--ease-out);
}
.checkout .co-recht:hover { border-color: var(--blau, #0B4EA2); }
/* Angehakt tritt zurueck: Erledigtes soll ruhig wirken, offen soll auffallen. */
.checkout .co-recht:has(input:checked) {
  background: var(--white, #fff);
  border-color: #BFD2EA;
}
.checkout .co-recht:has(input:focus-visible) {
  outline: 2px solid var(--blau, #0B4EA2);
  outline-offset: 2px;
}
/* 03.08.2026: Der Labeltext steckt in einem <span>. Ohne diese Klammer
   wird bei display:flex jeder Textknoten UND jeder Link ein eigenes
   Flex-Element — die Zeilen brechen dann rund um „AGB" und
   „Datenschutzerklärung" auseinander. */
.co-recht > span { flex: 1; min-width: 0; }
.checkout .rechner-out { font-size: 0.92rem; }

/* ---------- Rechtsseiten-Schutz (nicht markier-/kopierbar) ---------- */

.recht-geschuetzt main {
  -webkit-user-select: none;
  user-select: none;
}
.recht-geschuetzt main input,
.recht-geschuetzt main textarea,
.recht-geschuetzt main select {
  -webkit-user-select: text;
  user-select: text;
}

/* ---------- Widerrufsfunktion (EU-Widerrufsbutton) ---------- */

.widerruf-funktion {
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: var(--radius-soft);
  padding: var(--space-lg);
  margin: var(--space-lg) 0;
}
.widerruf-funktion h2 { margin-top: 0; }
.widerruf-funktion label { display: block; font-weight: 600; font-size: 0.92rem; margin: var(--space-md) 0 var(--space-xs); }
.widerruf-funktion input,
.widerruf-funktion textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.6em 0.8em;
  border: 1px solid var(--line);
  border-radius: var(--radius-subtle);
  background: var(--white);
  color: var(--ink);
}
.widerruf-funktion .btn { margin-top: var(--space-md); }
.footer-widerruf {
  display: inline-block;
  margin-top: var(--space-sm);
  border: 1.5px solid var(--text-on-dark-soft);
  border-radius: var(--radius-subtle);
  padding: 0.35em 0.8em;
  font-size: 0.88rem;
}

/* ---------- Consent-Banner (erscheint nur, wenn Analyse konfiguriert) ---------- */

.consent-banner {
  position: fixed;
  inset: auto 12px 12px 12px;
  z-index: 200;
  max-width: 560px;
  margin-inline: auto;
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: var(--radius-soft);
  padding: var(--space-md) var(--space-lg);
  box-shadow: 0 18px 48px rgba(26, 26, 46, 0.25);
}
.consent-banner p { font-size: 0.9rem; color: var(--ink-soft); margin: 0 0 var(--space-md); }
.consent-banner .consent-knoepfe { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.consent-banner .btn { padding: 0.55em 1.1em; font-size: 0.92rem; }

/* ---------- Partner-/Anzeigen-Kennzeichnung ---------- */

.anzeige-tag {
  font-family: var(--font-utility);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-subtle);
  padding: 0.1em 0.4em;
  vertical-align: middle;
}
.partner-banner {
  margin: var(--space-lg) 0;
  padding: var(--space-md);
  background: var(--paper-alt);
  border-radius: var(--radius-soft);
}
.partner-banner p { font-size: 0.9rem; margin: var(--space-sm) 0 0; }

/* --- Mobile/A11y-Patches 27.07.2026 (Audit A1/A2/A3/A4/A6) — additiv, bund-kompatibel --- */
html { scroll-padding-top: 84px; }
.chat-form textarea { font-size: 1rem; }
.nav-toggle, .chat-close { min-width: 44px; min-height: 44px; }
.chat-chip { min-height: 44px; }
.kontakt-card .gross, .footer-contact { overflow-wrap: anywhere; }

/* --- Tarifcheck-Partnerbanner (Anzeige) 27.07.2026 — additiv, bund-kompatibel --- */
.tc-banner { position: relative; display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
  background: var(--paper-alt, #EDEAE2); border: 1px solid var(--line, #D9D4C8);
  border-left: 4px solid var(--gold, #B7862C); border-radius: 8px;
  padding: 1.1rem 1.3rem; margin: 1.6rem 0; }
.tc-anzeige { position: absolute; top: 0.55rem; right: 0.8rem; font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 0.65rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-soft, #4A5361); }
.tc-icon { position: relative; color: var(--gold, #B7862C); flex: 0 0 auto; line-height: 0; }
.tc-ping { position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%;
  background: var(--gruen, #2E7D46); }
.tc-text { flex: 1 1 240px; min-width: 0; }
.tc-text p { margin: 0; font-size: 0.95rem; }
.tc-text .tc-head { font-weight: 700; font-size: 1.06rem; margin-bottom: 0.15rem; }
.tc-cta { position: relative; overflow: hidden; flex: 0 0 auto; display: inline-flex; align-items: center;
  background: var(--gold, #B7862C); color: #fff; font-weight: 600; text-decoration: none;
  padding: 0.65rem 1.15rem; border-radius: 6px; min-height: 44px;
  transition: transform 0.18s ease-out, box-shadow 0.18s ease-out; }
.tc-cta:hover, .tc-cta:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(183,134,44,0.35); color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .tc-icon svg { animation: tc-bob 3s ease-in-out infinite; }
  .tc-ping { animation: tc-ping 3s ease-out infinite; }
  .tc-cta::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,0.35), transparent);
    animation: tc-shine 4.5s ease-in-out infinite; }
}
@keyframes tc-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes tc-ping { 0% { box-shadow: 0 0 0 0 rgba(46,125,70,0.55); } 70% { box-shadow: 0 0 0 9px rgba(46,125,70,0); } 100% { box-shadow: 0 0 0 0 rgba(46,125,70,0); } }
@keyframes tc-shine { 0%, 55% { left: -60%; } 85%, 100% { left: 130%; } }
@media (max-width: 560px) { .tc-cta { width: 100%; justify-content: center; } }

/* --- A9: Scroll-Hinweis für horizontale Tabellen (mobil) + Komposita-Umbruch --- */
.bento-cell p { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .table-wrap {
    background:
      linear-gradient(90deg, var(--paper, #F7F5F0) 30%, rgba(255,255,255,0)) left/40px 100% no-repeat local,
      linear-gradient(270deg, var(--paper, #F7F5F0) 30%, rgba(255,255,255,0)) right/40px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(26,26,46,0.16), transparent) left/14px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(26,26,46,0.16), transparent) right/14px 100% no-repeat scroll;
  }
}

/* --- Logo-Kennzeichen "ZU (Siegel) ON 24" + Chat-FAB-Kollaps 28.07.2026 --- */
.logo-plate-text { white-space: nowrap; letter-spacing: 0.06em; }
.logo-plate-siegel { display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold, #B7862C); box-shadow: inset 0 0 0 1.5px rgba(26,26,46,0.55); margin: 0 4px; flex-shrink: 0; }
.chat-fab--mini { font-size: 0; gap: 0; width: 54px; height: 54px; padding: 0 0 0 1.05em; border-radius: 12px; justify-content: center; }
.chat-fab--mini .dot { width: 10px; height: 10px; }
.chat-fab--mini:hover, .chat-fab--mini:focus-visible { font-size: 0.95rem; gap: 0.5em; width: auto; height: auto; padding: 0.75em 1.3em 0.75em 1.6em; border-radius: 10px; }

/* --- Werbe-Widerspruch-Box (Kontakt) — auffällig, § 7 UWG --- */
.widerspruch-box { border: 3px solid var(--ink, #1A1A2E); border-left-width: 10px;
  background: var(--paper-alt, #EDEAE2); border-radius: 8px; padding: 1.5rem 1.75rem; }
.widerspruch-box .kicker--warn { color: var(--rot, #B3261E); font-weight: 700; }
.widerspruch-box h2 { margin: 0.35rem 0 0.25rem; font-size: 1.35rem; }
.widerspruch-box p { margin: 0.6rem 0 0; max-width: none; }

/* --- Mini-FAB: Fragezeichen als Erkennungszeichen --- */
.chat-fab--mini::after { content: "?"; font-size: 1.35rem; font-weight: 700; line-height: 1; color: var(--white, #fff); }
.chat-fab--mini .dot { position: absolute; top: 7px; right: 7px; }
.chat-fab--mini:hover::after, .chat-fab--mini:focus-visible::after { content: none; }
.chat-fab--mini:hover .dot, .chat-fab--mini:focus-visible .dot { position: static; }
.chat-fab--mini { position: fixed; }

/* --- Checkout: Express-Option + Zahlartenwahl (Backend-Paket 28.07.2026) --- */
/* `.checkout label` (0,1,1) und `.checkout input` schlagen ein blosses
   `.co-extra` (0,1,0) -- das Kaestchen landete dadurch in voller Breite ueber
   dem Text statt daneben. Mit `.checkout` davor gewinnt die Zeilendarstellung.
   Befund 04.08.2026, gleiche Ursache wie bei den Kacheln. */
.checkout .co-extra {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  margin: 0.7rem 0 0;
  font-size: 0.95rem;
  font-weight: 400;
  cursor: pointer;
}
/* Gleiche Kaestchengroesse wie bei den Rechts-Haken -- innerhalb eines
   Formulars sollen gleichartige Bedienelemente auch gleich gross sein. */
.checkout .co-extra input {
  width: 1.25em;
  height: 1.25em;
  min-width: 0;
  flex: none;
  margin-top: 0.15em;
  accent-color: var(--blau, #0B4EA2);
  cursor: pointer;
}

/* --- Schilder-Block (04.08.2026) ------------------------------------------
   Vorher drei gleichrangige Kaestchen, darunter zwei mit fast gleichem Namen
   ("Expressversand" / "Express-Prioritaet"). Jetzt: ein umrandeter Block mit
   genau EINER Entscheidung, der Versand haengt sichtbar darunter und
   erscheint erst, wenn die Praegung gebucht ist. Nutzt bewusst die
   bestehende .co-kachel-Optik der Vorgangsauswahl -- kein zweites
   Formensystem im selben Formular. */
.co-schilder {
  border: 1px solid var(--line, #D9D4C8);
  border-radius: var(--radius-soft, 8px);
  padding: 1rem 1.1rem 1.1rem;
  margin: 1.1rem 0 0;
  background: var(--paper-alt, #F7F5F0);
}
.co-schilder[hidden] { display: none; }
.co-schilder-titel {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}
.co-kachel--option { background: var(--white, #fff); margin: 0; }
/* Der Versand gehoert erkennbar UNTER die Praegung -- eingerueckt mit
   Anschlusslinie, damit die Abhaengigkeit ohne Erklaertext sichtbar ist. */
.checkout .co-extra--unter {
  margin: 0.65rem 0 0 1.15rem;
  padding-left: 0.85rem;
  border-left: 2px solid var(--line, #D9D4C8);
}
.co-extra--unter[hidden] { display: none; }
/* Zahlartenwahl als Karten (05.08.2026) -- gleiche Begruendung wie bei der
   Anrede: Die Zahlart ist die letzte Entscheidung vor der Zahlung und sass
   als Reihe kleiner Radiokreise da. Karten machen die getroffene Wahl auf
   einen Blick sichtbar und vergroessern die Trefferflaeche. */
.co-zahlart {
  border: 1px solid var(--line, #D9D4C8);
  border-radius: 8px;
  padding: 0.8rem 1.1rem 1rem;
  margin: 1.1rem 0;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.co-zahlart legend { font-weight: 600; padding: 0 0.4rem; font-size: 0.95rem; }
.co-zahlart label {
  display: inline-flex;
  /* Feste Zwei-pro-Reihe statt freiem Umbruch: Bei ``flex-basis: 8.5rem``
     passten auf dem Desktop drei Karten in die erste Reihe und die vierte
     dehnte sich allein ueber die volle Breite -- optisch ein Ausreisser.
     Mit halber Basis entsteht auf jeder Breite ein sauberes Raster. */
  flex: 1 1 calc(50% - 0.25rem);
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  min-height: 48px;
  padding: 0.5em 0.75em;
  background: var(--white, #fff);
  border: 1px solid var(--line, #D9D4C8);
  border-radius: var(--radius-soft, 8px);
  font-size: 0.95rem;
  transition: border-color 140ms var(--ease-out), background 140ms var(--ease-out);
}
.co-zahlart label:hover { border-color: var(--blau, #0B4EA2); }
.co-zahlart label:has(input:checked) {
  border-color: var(--blau, #0B4EA2);
  border-width: 2px;
  padding: calc(0.5em - 1px) calc(0.75em - 1px);
  background: #F2F6FC;
  font-weight: 600;
}
.co-zahlart label:has(input:focus-visible) {
  outline: 2px solid var(--blau, #0B4EA2);
  outline-offset: 2px;
}
.co-zahlart label input {
  width: 1.15em !important;
  height: 1.15em;
  min-width: 0;
  margin: 0;
  flex: none;
  accent-color: var(--blau, #0B4EA2);
}

/* --- Rechner: Ortskürzel-Hilfetext --- */
.plate-hilfe { margin: 0.5rem 0 0.9rem; font-size: 0.85rem; line-height: 1.5; color: var(--ink-soft, #4A5361); }
.plate-hilfe strong { color: var(--ink, #1A1A2E); }

/* --- Mobile-UX-Runde 28.07.2026 — additiv, bund-kompatibel (nur Geometrie/A11y) --- */

/* Tap-Targets: alle Buttons mindestens 44px hoch (Header-CTA war mobil ~41px) */
.btn { min-height: 44px; }
.footer-widerruf { display: inline-flex; align-items: center; min-height: 44px; }

/* Fokus-Ringe auf dunklen Flächen: Blau auf Ink nur 2,1:1 → Hellblau 8,6:1 */
.section--dark :focus-visible,
.site-footer :focus-visible,
.chat-head :focus-visible,
.cta-final .cta-box :focus-visible { outline-color: var(--blau-hell); }

/* Deutsche Komposita („Geschäftsbedingungen“, „Universalschlichtungsstelle“)
   sprengen schmale Viewports: Headlines dürfen mobil trennen (lang="de" gesetzt) */
@media (max-width: 700px) {
  h1, h2, h3 { hyphens: auto; overflow-wrap: break-word; }
}

/* Kassenbon: lange Positions-Labels brechen um, statt die Karte zu überlaufen */
.rechner-out .row > :first-child { min-width: 0; overflow-wrap: anywhere; }

/* Prozess-Karten: Grid-Kind mit min-width:auto sprengte 320px-Viewports um 2px
   (browser-verifiziert, alle 4 Steps 306,7px statt 288px) */
.steps li > * { min-width: 0; }

/* Ratgeber-Metazeile (Datum · Lesezeit · Autor): Flex ohne Wrap sprengte
   320px-Viewports um 12px (browser-verifiziert) */
.prose-meta { flex-wrap: wrap; row-gap: 0.25rem; }

/* Rechner: Hilfetext bekommt klaren Abstand zum folgenden Vorgang-Feld */
.plate-hilfe { margin-bottom: 1.15rem; }

/* Ratgeber-Tabellen stehen ohne .table-wrap in .prose → mobil selbst scrollen,
   mit denselben Scroll-Schatten wie .table-wrap (A9-Systematik) */
@media (max-width: 640px) {
  .prose table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background:
      linear-gradient(90deg, var(--paper, #F7F5F0) 30%, rgba(255,255,255,0)) left/40px 100% no-repeat local,
      linear-gradient(270deg, var(--paper, #F7F5F0) 30%, rgba(255,255,255,0)) right/40px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(26,26,46,0.16), transparent) left/14px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(26,26,46,0.16), transparent) right/14px 100% no-repeat scroll;
  }
  .prose table th, .prose table td { hyphens: auto; }
}

/* Preistabellen: erste Spalte (Leistungsnamen) nicht unter Wortbreite quetschen,
   Komposita dürfen trennen (hält Sticky-Spalten der --fix1-Tabellen schmal) */
@media (max-width: 640px) {
  table.preise th:first-child, table.preise td:first-child { min-width: 9em; hyphens: auto; }
}

/* Checkout-Stepper: 4 Mono-Labels („Bestätigung“) passen nicht in eine
   320er-Zeile → 2×2-Raster; Karte mobil mit engerem Innenabstand */
@media (max-width: 560px) {
  .co-punkte { flex-wrap: wrap; gap: var(--space-sm) var(--space-xs); }
  .co-punkte li { flex: 1 1 40%; overflow-wrap: anywhere; }
  .checkout { padding: var(--space-md); }
}

/* Tarifcheck-Banner mobil: „Anzeige“-Tag freistellen, Icon bleibt neben dem Titel */
@media (max-width: 560px) {
  .tc-banner { padding-top: 2rem; align-items: flex-start; }
  .tc-text { flex-basis: 9rem; }
}

/* FAQ + Karten mobil: 32px-Innenabstände auf lesefreundliche 16–20px */
@media (max-width: 560px) {
  details.faq summary { padding: 0.85rem 1rem; }
  details.faq .faq-body { padding: 0 1rem 0.85rem; }
  .artikel-card, .kontakt-card, .bento-cell { padding: 1.25rem; }
  .widerspruch-box { padding: 1.25rem 1.1rem; }
  .widerruf-funktion { padding: var(--space-md); }
}

/* --- KI-Assistent-FAB: Redesign Sprechblase + KI-Funken, lebendige Micro-Motion 28.07.2026 --- */
.chat-fab .fab-icon { position: relative; display: inline-flex; align-items: center; line-height: 0; }
.chat-fab .fab-icon svg { display: block; }
.chat-fab .fab-funke { fill: var(--gold-hell, #D4A84B); transform-origin: center; transform-box: fill-box; }
.chat-fab .fab-icon .dot { position: absolute; right: -3px; bottom: -2px; width: 8px; height: 8px; }
.chat-fab .fab-label { line-height: 1.2; }
.chat-fab--mini::after { content: none; }
.chat-fab--mini { padding: 0 0 0 0.85em; }
.chat-fab--mini .fab-label { display: none; }
.chat-fab--mini .fab-icon svg { width: 26px; height: 26px; }
.chat-fab--mini .fab-icon .dot { right: -4px; top: -3px; bottom: auto; }
.chat-fab--mini:hover .fab-label, .chat-fab--mini:focus-visible .fab-label { display: inline; }
@media (prefers-reduced-motion: no-preference) {
  .chat-fab { animation: fab-puls 4.5s ease-in-out infinite; }
  .chat-fab .fab-icon { animation: fab-nudge 9s ease-in-out 3s infinite; }
  .chat-fab .fab-funke { animation: fab-funkeln 2.8s ease-in-out infinite; }
  .chat-fab .fab-funke--klein { animation-delay: 1.4s; }
}
@keyframes fab-puls {
  0%, 100% { box-shadow: 0 10px 30px rgba(26,26,46,0.28); }
  50% { box-shadow: 0 10px 30px rgba(26,26,46,0.28), 0 0 0 6px rgba(11,78,162,0.14), 0 0 22px rgba(143,189,242,0.35); }
}
@keyframes fab-nudge {
  0%, 90%, 100% { transform: rotate(0); }
  92% { transform: rotate(-4deg) scale(1.05); }
  95% { transform: rotate(3deg) scale(1.05); }
  98% { transform: rotate(-1.5deg); }
}
@keyframes fab-funkeln {
  0%, 100% { opacity: 0.5; transform: scale(0.72) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.18) rotate(18deg); }
}

/* --- Checkout-Inline-Hilfen (?-Buttons + Panels + SVG-Schemata) 28.07.2026 --- */
.co-hilfe-btn { position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; margin-left: 0.35rem; padding: 0; vertical-align: middle;
  border: 1.5px solid var(--blau, #0B4EA2); border-radius: 50%; background: transparent;
  color: var(--blau, #0B4EA2); font-family: var(--font-display, inherit); font-size: 0.8rem;
  font-weight: 700; line-height: 1; cursor: pointer; transition: background 0.15s ease-out, color 0.15s ease-out; }
.co-hilfe-btn::after { content: ""; position: absolute; inset: -11px; }
.co-hilfe-btn:hover, .co-hilfe-btn[aria-expanded="true"] { background: var(--blau, #0B4EA2); color: #fff; }
.co-hilfe-btn:focus-visible { outline: 2px solid var(--blau, #0B4EA2); outline-offset: 2px; }
.co-hilfe { margin: 0.6rem 0 0.9rem; padding: 0.85rem 1rem; background: var(--paper, #F7F5F0);
  border-left: 3px solid var(--blau, #0B4EA2); border-radius: 0 6px 6px 0;
  font-size: 0.9rem; line-height: 1.55; color: var(--ink, #1A1A2E); }
.co-hilfe p { margin: 0 0 0.55rem; }
.co-hilfe p:last-child { margin-bottom: 0; }
.co-hilfe a { color: var(--blau, #0B4EA2); }
.hilfe-svg { display: block; width: 100%; max-width: 300px; height: auto; margin: 0.5rem 0 0.8rem;
  color: var(--ink, #1A1A2E); }

/* --- B2C Unterlagen-Upload (KI-Ampel, Dokument-Karten) 28.07.2026 --- */
.ul-dokumente { display: grid; gap: 0.9rem; margin: 1rem 0; }
.ul-karte { background: var(--paper, #F7F5F0); border: 1px solid var(--line, #D9D4C8); border-radius: 8px; padding: 1rem 1.1rem; }
.ul-karte-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.ul-ampel { font-family: var(--font-utility, ui-monospace, monospace); font-size: 0.72rem; letter-spacing: 0.06em; padding: 0.25rem 0.55rem; border-radius: 4px; white-space: nowrap; }
.ul-ampel--gruen { color: var(--gruen, #2E7D46); border: 1px solid var(--gruen, #2E7D46); }
.ul-ampel--gelb { color: var(--gold, #B7862C); border: 1px solid var(--gold, #B7862C); }
.ul-ampel--rot { color: var(--rot, #B3261E); border: 1.5px solid var(--rot, #B3261E); font-weight: 700; }
.ul-ampel--offen { color: var(--ink-soft, #4A5361); border: 1px dashed var(--line, #D9D4C8); }
.ul-upload-btn { cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; }
.ul-hinweis { margin: 0.3rem 0 0.7rem; font-size: 0.87rem; color: var(--rot, #B3261E); }
.ul-status { margin: 0.6rem 0 0; font-size: 0.87rem; color: var(--ink-soft, #4A5361); }
/* Ausweis: zwei Upload-Felder in einer Karte (Vorder-/Rückseite, 06.08.2026).
   Die Trennlinie macht sichtbar, dass es zwei getrennte Aufnahmen sind. */
.ul-slot--zweite { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--line, #D9D4C8); }
.ul-slot-titel { margin: 0 0 0.5rem; font-size: 0.87rem; font-weight: 700; letter-spacing: 0.01em; }
.ul-slot-titel .ul-ampel { font-weight: 400; margin-left: 0.4rem; }
.ul-slot--zweite .ul-hinweis { color: var(--ink-soft, #4A5361); }
.ul-einseitig { display: inline-block; margin-top: 0.7rem; padding: 0.35rem 0; background: none;
  border: 0; border-bottom: 1px solid currentColor; color: var(--ink-soft, #4A5361);
  font: inherit; font-size: 0.87rem; cursor: pointer; }
.ul-einseitig:hover { color: var(--ink, #1B1F27); }
.ul-einseitig:disabled { opacity: 0.5; cursor: default; }
.ul-wartet { margin-top: 0.8rem; }
.ul-codes { display: grid; gap: 0.9rem; margin: 0.8rem 0 1rem; }
.ul-codes input { text-transform: none; }

/* --- Scan-Übernahme (11.08.2026) ---------------------------------------
   Nach dem Foto-Upload liest die KI die Sicherheitscodes/Nummern aus und
   füllt die Felder. Diese Karte zeigt animiert, was übernommen wurde; die
   befüllten Felder bekommen zusätzlich einen grünen Ring, damit der Kunde
   auf einen Blick sieht, was aus dem Scan stammt und prüfen kann. */
.ul-scan-uebernahme {
  border: 1.5px solid var(--gruen, #2E7D46);
  background: #F1FAF3;
  border-radius: var(--radius-soft, 8px);
  padding: 0.9rem 1rem;
  margin: 0 0 1rem;
  animation: ul-su-auf 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes ul-su-auf { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
.ul-su-kopf { display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; color: #14532B; }
.ul-su-icon { font-size: 1.1rem; line-height: 1; }
.ul-su-list { list-style: none; margin: 0.7rem 0 0; padding: 0; display: grid; gap: 0.45rem; }
.ul-su-row {
  display: flex; align-items: center; gap: 0.55rem;
  background: #fff; border: 1px solid #CDE9D5; border-radius: 6px;
  padding: 0.45rem 0.6rem;
  animation: ul-su-zeile 0.4s ease both;
}
@keyframes ul-su-zeile { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: translateX(0); } }
.ul-su-check {
  flex: 0 0 auto; width: 1.4rem; height: 1.4rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.85rem; font-weight: 700; color: #fff; background: var(--gruen, #2E7D46);
}
.ul-su-check.warn { background: var(--gold, #B7862C); }
.ul-su-kuerzel {
  flex: 0 0 auto; font-family: var(--font-utility, ui-monospace, monospace);
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--gruen, #2E7D46); background: #E3F3E8; border-radius: 4px; padding: 0.15rem 0.4rem;
}
.ul-su-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.ul-su-label { font-size: 0.7rem; color: var(--ink-soft, #4A5361); }
.ul-su-wert { font-family: var(--font-utility, ui-monospace, monospace); font-size: 0.9rem; font-weight: 600;
  color: var(--ink, #1B1F27); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ul-su-pfeil { flex: 0 0 auto; font-size: 0.72rem; font-weight: 600; color: var(--gruen, #2E7D46); }
.ul-su-fuss { margin: 0.65rem 0 0; font-size: 0.78rem; color: var(--ink-soft, #4A5361); }
/* Feld, das gerade aus dem Scan gefüllt wurde: grüner Ring + kurzer Puls. */
.ul-feld-gescannt {
  border-color: var(--gruen, #2E7D46) !important;
  box-shadow: 0 0 0 3px rgba(46, 125, 70, 0.18);
  animation: ul-feld-puls 0.9s ease 1;
}
@keyframes ul-feld-puls { 0% { box-shadow: 0 0 0 0 rgba(46, 125, 70, 0.35); } 100% { box-shadow: 0 0 0 3px rgba(46, 125, 70, 0.18); } }

/* --- Anleitung zum Freilegen der Sicherheitscodes (05.08.2026) ------------
   Steht bewusst DIREKT über den Eingabefeldern: Genau dort sitzt der Kunde
   vor dem verdeckten Feld und entscheidet, ob er es aufkratzt. Ein einmal
   freigelegter Code entwertet das Dokument für weitere Online-Vorgänge --
   deshalb der Warnhinweis offen und die Anleitung nur einen Klick entfernt,
   nicht auf einer anderen Seite.
   Die Grafiken sind eigene, schematische SVGs; Fotos aus Behörden-PDFs sind
   urheberrechtlich geschützt und werden NICHT übernommen. */
.freilege-hinweis {
  background: #FFF8E6;
  border: 1px solid #E4CE8F;
  border-left: 4px solid var(--gold, #B7862C);
  border-radius: var(--radius-soft, 8px);
  padding: 0.85rem 1rem;
  margin: 0.9rem 0 0.8rem;
  font-size: 0.92rem;
  line-height: 1.6;
}
.freilege-hinweis p { margin: 0; }

.freilege-anleitung { margin: 0 0 1.2rem; }
.freilege-schritte {
  list-style: none;
  margin: 0.6rem 0 1rem;
  padding: 0;
  display: grid;
  gap: 1.1rem;
}
.freilege-schritte > li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 0.9rem 1rem;
  background: var(--white, #fff);
  border: 1px solid var(--line, #D9D4C8);
  border-radius: var(--radius-soft, 8px);
}
.freilege-grafik { flex: 0 0 84px; }
.freilege-grafik svg { width: 84px; height: 84px; display: block; }
.freilege-text { flex: 1; min-width: 0; }
.freilege-text h3 {
  margin: 0 0 0.3rem;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--ink, #1A1A2E);
}
.freilege-text p { margin: 0; font-size: 0.9rem; line-height: 1.6; }
.freilege-quelle { font-size: 0.83rem; color: var(--ink-soft, #4A5361); margin: 0; }

/* Auf schmalen Geräten unter die Grafik statt daneben — sonst bleiben
   für den Text keine 40 % der Breite. */
@media (max-width: 480px) {
  .freilege-schritte > li { flex-direction: column; gap: 0.7rem; }
  .freilege-grafik { flex: none; }
}

/* --- Antrag-Wizard: eine Frage pro Schritt (28.07.2026) --- */
.co-fortschritt { margin-bottom: var(--space-lg); }
.co-balken {
  height: 6px;
  background: var(--paper-alt);
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
}
.co-balken span {
  display: block;
  height: 100%;
  background: var(--blau);
  transition: width 380ms var(--ease-out);
}
.co-fortschritt-text {
  margin: 0.5rem 0 0;
  font-family: var(--font-utility);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}

.co-kacheln { display: grid; gap: 0.6rem; margin: 1rem 0 1.4rem; }
/* Die Kacheln liegen alle innerhalb von .checkout, und dort gilt
   `.checkout label { display:block }` sowie `.checkout input { width:100% }`.
   Beide Selektoren sind spezifischer (0,1,1) als ein blosses `.co-kachel`
   (0,1,0) und haben die Kacheln flachgelegt: Auswahlfeld in voller Breite
   ueber dem Text statt daneben. Betraf auch die Vorgangsauswahl in Schritt 1.
   Deshalb hier bewusst mit `.checkout` davor (0,2,0 bzw. 0,2,1) --
   Befund 04.08.2026. */
.checkout .co-kachel {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  padding: 1rem 1.1rem;
  margin: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-soft);
  cursor: pointer;
  font-weight: 400;
  font-size: 1rem;
  transition: border-color 140ms var(--ease-out), background 140ms var(--ease-out);
}
.co-kachel:hover { border-color: var(--blau); }
.checkout .co-kachel input {
  /* 05.08.2026: Gleiche Groesse wie bei Anrede und Zahlart (1.15em statt
     Browser-Standard 13 px). Innerhalb eines Formulars sollen gleichartige
     Bedienelemente auch gleich gross sein -- die Vorgangswahl ist zudem die
     erste Entscheidung, die der Kunde trifft. */
  width: 1.15em;
  height: 1.15em;
  min-width: 0;
  margin: 0.15rem 0 0;
  accent-color: var(--blau);
  flex: none;
  cursor: pointer;
}
.checkout .co-kachel:has(input:checked) { border-color: var(--blau); border-width: 2px; padding: calc(1rem - 1px) calc(1.1rem - 1px); background: #F2F6FC; }
.co-kachel:has(input:focus-visible) { outline: 2px solid var(--blau); outline-offset: 2px; }
.checkout .co-kachel-inhalt { flex: 1; display: flex; flex-direction: column; gap: 0.2rem; }
.co-kachel-inhalt strong { font-family: var(--font-display); font-size: 1rem; }
.co-kachel-text { font-size: 0.86rem; color: var(--ink-soft); line-height: 1.45; }
.co-kachel-preis {
  font-family: var(--font-utility);
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
  align-self: center;
}
/* Auf schmalen Geraeten nimmt die Preisspalte dem Text zu viel Breite --
   Ueberschriften brachen dreizeilig um. Dort rutscht der Preis unter den
   Text statt daneben. Gilt fuer Vorgangs- und Schilderkacheln gleichermassen. */
@media (max-width: 480px) {
  .checkout .co-kachel { flex-wrap: wrap; }
  .checkout .co-kachel .co-kachel-preis {
    width: 100%;
    align-self: flex-start;
    margin-top: 0.35rem;
    padding-left: calc(13px + 0.9rem);
  }
}

.co-unterlagen { list-style: none; padding: 0; margin: 1rem 0 1.2rem; display: grid; gap: 0.55rem; }
.co-unterlagen li {
  position: relative;
  padding-left: 1.9rem;
  line-height: 1.5;
}
.co-unterlagen li::before {
  content: '';
  position: absolute;
  left: 0.25rem;
  top: 0.42em;
  width: 0.5rem;
  height: 0.85rem;
  border: solid var(--gruen);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(42deg);
}
.co-warnung {
  display: grid;
  gap: 0.3rem;
  padding: 0.9rem 1rem;
  margin-bottom: 1.2rem;
  background: rgba(183, 134, 44, 0.08);
  border: 1px solid var(--gold);
  border-radius: var(--radius-soft);
  font-size: 0.9rem;
}

.co-zusammenfassung { list-style: none; padding: 0; margin: 1.2rem 0; display: grid; gap: 0.4rem; }
.co-zusammenfassung li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
}
.co-zusammenfassung li span:last-child { font-family: var(--font-utility); text-align: right; }
.co-zf-key { color: var(--ink-soft); flex: none; }

.co-zurueck {
  display: block;
  margin: 0.8rem auto 0;
  padding: 0.6em 1.2em;
  min-height: 44px;
  background: none;
  border: none;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 0.92rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.co-zurueck:hover { color: var(--ink); }
.co-zurueck:disabled { opacity: 0.4; cursor: default; text-decoration: none; }

/* --- KBA-Siegel: Prägeplakette + Aussage (Lockup) --- */
.siegel-lockup { display: flex; align-items: center; gap: 0.9rem; }
.siegel-lockup img { flex: none; height: auto; }
.siegel-lockup-text strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.06rem;
  line-height: 1.15;
}
.siegel-lockup-text > span {
  display: block;
  font-size: 0.85rem;
  color: var(--ink-soft);
  line-height: 1.35;
  margin-top: 0.15rem;
}
.hero-copy .siegel-lockup { margin-bottom: var(--space-md); }

.antrag-vertrauen {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-lg);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-soft);
}
.antrag-vertrauen .siegel-lockup { flex: none; max-width: 15rem; }
.antrag-vertrauen ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.antrag-vertrauen li { font-size: 0.88rem; line-height: 1.45; color: var(--ink-soft); }
.antrag-vertrauen li strong { color: var(--ink); }
@media (max-width: 720px) {
  .antrag-vertrauen { flex-direction: column; align-items: flex-start; gap: var(--space-md); }
  .antrag-vertrauen .siegel-lockup { max-width: none; }
}

/* --- Siegel im Footer (dunkler Grund) --- */
.footer-siegel { margin: var(--space-md) 0 var(--space-lg); }
.footer-siegel .siegel-lockup-text strong { color: var(--text-on-dark); font-size: 1rem; }
.footer-siegel .siegel-lockup-text > span { color: var(--text-on-dark-soft); }
.footer-siegel-text {
  margin: 0.7rem 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-on-dark-soft);
  max-width: 34rem;
}

/* --- Hilfe-Musterabbildungen (Dokument-Schemata) --- */
.hilfe-bild {
  display: block;
  width: 100%;
  max-width: 22rem;
  height: auto;
  margin: 0.7rem 0 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-subtle);
  background: var(--white);
}

/* --- Gebührenvergleich online/Schalter --- */
.gebost-ref {
  display: block;
  font-family: var(--font-utility);
  font-size: 0.7rem;
  color: var(--ink-soft);
  margin-top: 0.15rem;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- B2B-Staffeltabelle: Segment-Zwischenüberschriften --- */
.staffel-kopf {
  text-align: left;
  font-family: var(--font-display);
  font-size: 0.95rem;
  padding-top: 1.1rem;
  color: var(--blau);
  border-bottom: 2px solid var(--blau);
}

/* --- B2B: Kernaussage über der Staffel + Unterspalten --- */
.b2b-kernaussage {
  font-family: var(--font-display);
  font-size: 1.35rem;
  line-height: 1.35;
  margin-bottom: 0.8rem;
}
.preise .th-sub { font-size: 0.78rem; font-weight: 500; color: var(--ink-soft); }
.preise .vorteil { color: var(--gruen); font-weight: 700; }

/* --- Freilege-Anleitung Sicherheitscodes (05.08.2026) ---------------------
   Sitzt direkt über der Code-Eingabe im Unterlagen-Upload und im Ratgeber.
   Aufklappbar, weil die Mehrheit den Ablauf kennt — wer ihn braucht, findet
   ihn aber an der Stelle, an der er vor dem verdeckten Feld steht, statt
   auf einer anderen Seite. Palette und Schrift wie die übrige Seite. */
.frei-anleitung {
  border: 1px solid var(--line, #D9D4C8);
  border-radius: var(--radius-soft, 8px);
  background: var(--paper, #F7F5F0);
  padding: 0.9rem 1.1rem;
  margin: 0 0 1.4rem;
}
.frei-anleitung > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.frei-anleitung > summary::-webkit-details-marker { display: none; }
.frei-anleitung > summary::after {
  content: "▸";
  position: absolute;
  right: 1.1rem;
  color: var(--blau, #0B4EA2);
  transition: transform 140ms var(--ease-out);
}
.frei-anleitung { position: relative; }
.frei-anleitung[open] > summary::after { transform: rotate(90deg); }
.frei-anleitung > summary:focus-visible {
  outline: 2px solid var(--blau, #0B4EA2);
  outline-offset: 3px;
}
.frei-summary-titel {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink, #1A1A2E);
}
.frei-summary-sub { font-size: 0.85rem; color: var(--ink-soft, #4A5361); }

.frei-warnung {
  margin: 1rem 0 0;
  padding: 0.85rem 1rem;
  background: #FFF8E6;
  border-left: 4px solid var(--gold, #B7862C);
  border-radius: 4px;
  font-size: 0.9rem;
  line-height: 1.6;
}
.frei-warnung strong { display: block; margin-bottom: 0.2rem; }

.frei-schritte {
  list-style: none;
  counter-reset: frei;
  margin: 1.1rem 0 0;
  padding: 0;
  display: grid;
  gap: 1.1rem;
}
.frei-schritt {
  counter-increment: frei;
  display: grid;
  grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  background: var(--white, #fff);
  border: 1px solid var(--line, #D9D4C8);
  border-radius: var(--radius-soft, 8px);
  padding: 0.9rem;
}
.frei-bild svg { width: 100%; height: auto; display: block; }
.frei-text h3 {
  margin: 0 0 0.35rem;
  font-size: 1rem;
}
.frei-text h3::before {
  content: counter(frei) ". ";
  color: var(--blau, #0B4EA2);
  font-family: var(--font-utility, monospace);
}
.frei-text p { margin: 0 0 0.5rem; font-size: 0.92rem; line-height: 1.6; }
.frei-hinweis { color: var(--ink-soft, #4A5361); font-size: 0.85rem !important; }
.frei-quelle {
  margin: 1rem 0 0;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--ink-soft, #4A5361);
}

/* Schmale Geräte: Bild über den Text, sonst wird beides unlesbar. */
@media (max-width: 560px) {
  .frei-schritt { grid-template-columns: 1fr; }
  .frei-bild { max-width: 280px; }
}

/* --- Systemstatus-Seite (05.08.2026) --------------------------------------
   Ampel über die Kette, die für eine Einreichung nötig ist. Farben aus den
   vorhandenen Signaltokens; die Stufe wird zusätzlich als Text ausgegeben
   (sr-only), weil Farbe allein die Information nicht tragen darf. */
.status-karte {
  border: 1px solid var(--line, #D9D4C8);
  border-radius: var(--radius-soft, 8px);
  background: var(--white, #fff);
  padding: 1.3rem 1.4rem;
  margin: 1.5rem 0 2rem;
}
.status-kopf { display: flex; align-items: center; gap: 0.9rem; }
.status-lampe {
  width: 18px; height: 18px; border-radius: 50%;
  flex: none; box-shadow: 0 0 0 4px rgba(0,0,0,0.05);
}
.status-lampe--gruen { background: var(--gruen, #2E7D46); }
.status-lampe--ocker { background: var(--gold, #B7862C); }
.status-lampe--rot   { background: var(--rot, #B3261E); }
.status-lampe--laedt { background: var(--line, #D9D4C8); }
.status-gesamt {
  margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
}
.status-stand { margin: 0.1rem 0 0; font-size: 0.85rem; color: var(--ink-soft, #4A5361); }

.status-liste { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 0.7rem; }
.status-zeile {
  display: flex; align-items: flex-start; gap: 0.7rem;
  padding: 0.7rem 0.85rem;
  background: var(--paper, #F7F5F0);
  border-radius: var(--radius-soft, 8px);
}
.status-punkt { width: 11px; height: 11px; border-radius: 50%; flex: none; margin-top: 0.32em; }
.status-punkt--gruen { background: var(--gruen, #2E7D46); }
.status-punkt--ocker { background: var(--gold, #B7862C); }
.status-punkt--rot   { background: var(--rot, #B3261E); }
.status-zeile strong { display: block; font-size: 0.95rem; }
.status-beschreibung {
  display: block; font-size: 0.88rem; line-height: 1.55; color: var(--ink-soft, #4A5361);
}
.status-erklaerung { max-width: 62ch; }
.status-erklaerung h2 { font-size: 1.2rem; margin-bottom: 0.5rem; }
.status-erklaerung p { font-size: 0.95rem; line-height: 1.65; }

/* Links in Fehlermeldungen müssen sich vom Fehlerrot absetzen und als Link
   erkennbar bleiben — sonst sieht der Besucher die Adresse, hält sie aber
   für Text (Befund 06.08.2026). */
.co-fehler a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}

/* --- Ampel-Impuls (06.08.2026) --------------------------------------------
   Ein ruhiger Puls signalisiert, dass die Anzeige lebt und nicht eingefroren
   ist — bei einer Statusseite die entscheidende Zusatzinformation. Bewusst
   dezent: Der Ring wächst und verblasst, die Lampe selbst bleibt ruhig.
   Der Takt richtet sich nach der Lage — grün langsam und beiläufig, rot
   schneller und damit spürbar dringlicher. Reduzierte Bewegung wird
   respektiert; dort bleibt die Lampe einfach stehen. */
.status-lampe { position: relative; }
.status-lampe::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  opacity: 0.55;
  animation: status-puls 2.8s ease-out infinite;
}
.status-lampe--rot::after   { animation-duration: 1.4s; }
.status-lampe--ocker::after { animation-duration: 2s; }
/* Ladezustand: kein Impuls — es gibt noch nichts zu melden. */
.status-lampe--laedt::after { animation: none; opacity: 0; }

@keyframes status-puls {
  0%   { transform: scale(1);   opacity: 0.5; }
  70%  { transform: scale(2.1); opacity: 0; }
  100% { transform: scale(2.1); opacity: 0; }
}

/* Die kleinen Punkte je Komponente pulsen nur, wenn dort etwas nicht
   stimmt — sonst flimmert die ganze Liste. */
.status-punkt { position: relative; }
.status-punkt--ocker::after,
.status-punkt--rot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  opacity: 0.5;
  animation: status-puls 1.8s ease-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .status-lampe::after,
  .status-punkt--ocker::after,
  .status-punkt--rot::after { animation: none; opacity: 0; }
}

/* ---------------------------------------------------------------------------
   Sicherheitscode-Erfassung: Scan-Knopf je Feld + Kamera-Overlay (06.08.2026)
   Der Scan ist immer nur die Abkürzung — das Eingabefeld behält die volle
   Breite und bleibt der Hauptweg; der Knopf ordnet sich unter.
   --------------------------------------------------------------------------- */
.ul-codezeile { display: flex; gap: 0.5rem; align-items: stretch; }
.ul-codezeile input { flex: 1 1 auto; min-width: 0; text-transform: none; }
.ul-scan {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 0.9rem;
  background: transparent;
  color: var(--blau);
  border: 1px solid var(--blau);
  font-size: 0.85rem;
  white-space: nowrap;
  cursor: pointer;
}
.ul-scan:hover:not(:disabled) { background: var(--blau); color: #fff; }
.ul-scan:disabled { opacity: 0.5; cursor: default; }
.ul-scan-status { margin: 0.35rem 0 0; font-size: 0.85rem; color: var(--gruen); }
.ul-scan-status--warn { color: var(--rot); }

body.scan-aktiv { overflow: hidden; }
.scan-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--ink);
  color: #F5F3EC;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem;
}
.scan-kopf {
  width: 100%;
  max-width: 32rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.scan-titel { margin: 0; font-weight: 700; font-size: 0.95rem; }
.scan-schliessen {
  min-height: 44px;
  padding: 0 0.9rem;
  background: transparent;
  color: #F5F3EC;
  border: 1px solid var(--ink-line, #2C3550);
  cursor: pointer;
}
.scan-buehne {
  position: relative;
  width: 100%;
  max-width: 32rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: #000;
}
.scan-buehne video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Rahmen markiert exakt den Bereich, der ausgewertet wird (FENSTER in scan.js) */
.scan-rahmen {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 62%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  border: 2px solid var(--gold-hell, #D4A84B);
  box-shadow: 0 0 0 100vmax rgba(26, 26, 46, 0.55);
}
@supports not (aspect-ratio: 1 / 1) {
  .scan-rahmen { width: 62%; padding-top: 62%; height: 0; }
}
.scan-hinweis {
  margin: 0;
  max-width: 32rem;
  font-size: 0.88rem;
  color: #B4BAC9;
  text-align: center;
}
.scan-manuell {
  background: transparent;
  color: #F5F3EC;
  border: 1px solid var(--ink-line, #2C3550);
  min-height: 44px;
}

/* Sammelscan-Block über den Code-Feldern */
.ul-sammel {
  border: 1px solid var(--line);
  border-radius: var(--radius-soft, 6px);
  background: var(--paper-alt, #EDEAE2);
  padding: 0.9rem 1rem;
  margin-bottom: 0.4rem;
}
.ul-sammel .btn { width: 100%; }
.ul-sammel-hinweis { margin: 0.55rem 0 0; font-size: 0.83rem; color: var(--ink-soft); }

/* Ausweis: zwei Upload-Slots (Vorder-/Rückseite) in einer Karte */
.ul-seiten { display: grid; gap: 0.7rem; margin: 0.6rem 0 0.2rem; }
@media (min-width: 560px) { .ul-seiten { grid-template-columns: 1fr 1fr; } }
.ul-seite { display: grid; gap: 0.35rem; align-content: start; }
.ul-seite-label { font-size: 0.85rem; color: var(--ink-soft); }
.ul-seiten-hinweis { margin: 0.55rem 0 0; font-size: 0.85rem; color: var(--ink-soft); }
.ul-einseitig-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: inherit;
  color: var(--blau);
  text-decoration: underline;
  cursor: pointer;
}

/* --- Ratgeber-Abbildungen (Bild-SEO: sichtbare, indexierbare Figuren) --- */
.rg-figur {
  margin: var(--space-lg) 0;
}
.rg-figur img {
  display: block;
  width: 100%;
  max-width: 34rem;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-subtle);
  background: var(--white);
}
.rg-figur--hoch img {
  max-width: 17rem;
}
.rg-figur figcaption {
  font-family: var(--font-utility);
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 34rem;
  margin-top: var(--space-sm);
  padding-left: 0.7rem;
  border-left: 2px solid var(--gold);
}
.rg-figur figcaption b {
  color: var(--ink);
  font-weight: 600;
}

/* ---------- Footer: App-Store-Badges ---------- */
.footer-apps { margin-top: var(--space-lg); }
.footer-apps .fb-h {
  font-size: 0.78rem;
  font-family: var(--font-utility);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-on-dark-soft);
  font-weight: 600;
  margin: 0 0 0.55rem;
}
.app-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.35rem; }
.app-badge {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.42rem 0.85rem; border-radius: 10px;
  background: #000; color: #fff;
  border: 1px solid var(--ink-line);
  text-decoration: none; line-height: 1.05;
  transition: border-color .18s ease, transform .18s ease, background .18s ease;
}
.app-badge:hover, .app-badge:focus-visible {
  /* color explizit halten: die globale Regel a:hover{color:var(--blau-dark)} wuerde
     sonst Text UND Apple-Glyph (fill:currentColor) dunkelblau auf #111 faerben */
  color: #fff;
  border-color: var(--white); background: #111; transform: translateY(-1px);
}
.app-badge:hover svg, .app-badge:focus-visible svg { fill: currentColor; }
.app-badge svg { width: 1.5rem; height: 1.5rem; flex: none; fill: currentColor; }
.app-badge-text { display: flex; flex-direction: column; }
.app-badge-klein {
  font-family: var(--font-utility); font-size: 0.6rem;
  letter-spacing: 0.07em; text-transform: uppercase; opacity: .82;
}
.app-badge-gross { font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; }
.app-badge--soon { opacity: .55; cursor: default; }
@media (max-width: 600px) { .app-badges { gap: 0.4rem; } }