/* =========================================================================
   main.css — Design-System lexwerk.ch (Etappe E2, Masterplan Teil 3)
   Prinzip: viel Weissraum, EINE Akzentfarbe (Blau), null Deko-Rauschen,
   keine Fotos. Vertrauen entsteht durch Klarheit, Preise und Prozess.
   ========================================================================= */

/* ---- Webfonts (selbst gehostet, SIL OFL 1.1 — kein externes CDN) ------ */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/Inter-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: italic; font-weight: 400; font-display: swap;
  src: url('/assets/fonts/Inter-Italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/assets/fonts/Inter-SemiBold.woff2') format('woff2');
}

/* ---- Tokens ---------------------------------------------------------- */
:root {
  /* Farben (Teil 3) — alle Text/Grund-Paare sind WCAG-AA-geprüft */
  --blau:      #1F3A5F;
  --blau-dark: #182D4A;   /* Hover für Primär-Button (aus Blau abgeleitet) */
  --blau-hell: #EAF0F7;
  --colorclaim:#7F0000;
  --anthrazit: #1A1A1A;
  --grau-60:   #5C6470;
  --grau-20:   #E4E6EA;
  --papier:    #FAFAF7;
  --gruen:     #2E7D4F;
  --rot:       #A33A3A;
  --weiss:     #FFFFFF;

  /* Abstände (konsistente Vertikalrhythmik) */
  --s0: 0.0rem;  --s1: .5rem;  --s2: 1rem;  --s3: 1.5rem;  --s4: 2.5rem;  --s5: 4rem;

  --radius: 0;         /* scharfkantig (3A) — war 8px */
  --maxw:   1200px;    /* grosszuegigere Buehne (11A) — war 1080px */
  --line:   1px solid var(--grau-20);
  --elev:   0 2px 10px rgba(31, 58, 95, .08);  /* einzige, dezente Elevation */

  /* Kachel-/Karten-Hover: Skyblue-Fuellung, an EINER Stelle austauschbar */
  --boxhover: #EAF0F7;

  /* Hamburger-Menue (nur Mobile) — hier zentral anpassbar */
  --burger-farbe:    #1F3A5F;   /* Linienfarbe */
  --burger-dicke:    2px;       /* Linienstaerke */
  --burger-breite:   30px;      /* Linienlaenge */
  --burger-abstand:  6px;       /* Abstand zwischen den Linien */

  /* Schrift-Stacks: Inter (Grotesk), selbst gehostet */
  --font-body: 'Inter', Helvetica, Arial, sans-serif;
  --font-head: 'Inter', Helvetica, Arial, sans-serif;
}

/* ---- Reset / Basis --------------------------------------------------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.03rem;
  line-height: 1.65;
  color: var(--anthrazit);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
.tabular { font-variant-numeric: tabular-nums; }

/* ---- Typografie-Skala (Teil 3) --------------------------------------- */
h1 { font-family: var(--font-head); font-size: clamp(2.4rem, 5vw, 3.5rem); line-height: 1.08; font-weight: 600; margin: 0 0 var(--s3); letter-spacing: -.022em; }
h2 { font-family: var(--font-head); font-size: clamp(1.55rem, 3vw, 1.9rem); line-height: 1.2; font-weight: 600; margin: 0 0 var(--s2); letter-spacing: -.015em; }
h3 { font-family: var(--font-head); font-size: 1.15rem; line-height: 1.3;  font-weight: 600; margin: 0 0 var(--s1); letter-spacing: -.01em; }
p  { margin: 0 0 var(--s2); }
.lead { font-size: 1.15rem; color: var(--grau-60); max-width: 60ch; }
a { color: var(--blau); text-underline-offset: 2px; }

.eyebrow {
  font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--blau); margin: 0 0 var(--s1);
}

/* ---- Layout ---------------------------------------------------------- */
.wrap { max-width: var(--maxw); margin-left: auto; margin-right: auto; padding-left: 1.35rem; padding-right: 1.35rem; }
.main { padding-block: var(--s4) var(--s5); }
.section { margin-top: clamp(2.5rem, 6vw, var(--s5)); }
.section:first-child { margin-top: 0; }
.section-head { margin-bottom: var(--s3); max-width: 62ch; }

/* ---- Header (sticky, 9A) --------------------------------------------- */
.site-header { border-bottom: var(--line); background: var(--weiss); }
/* Sticky nur, wenn settings.design.header_sticky = true */
.site-header--sticky { position: sticky; top: 0; z-index: 50; }

/* Ressourcen-Untermenü: hält den Header auf einer Zeile */
.nav-gruppe { position: relative; display: inline-flex; align-items: center; }
.nav-gruppe-titel { display: inline-flex; align-items: center; gap: .3rem; }
.nav-pfeil { font-size: .7em; line-height: 1; }
.nav-untermenue {
  position: absolute; top: 100%; left: 0; min-width: 13rem; z-index: 60;
  background: var(--weiss); border: var(--line); border-radius: var(--radius);
  box-shadow: var(--elev); padding: .35rem 0;
  display: none;
}
.nav-gruppe:hover .nav-untermenue,
.nav-gruppe:focus-within .nav-untermenue { display: block; }
.nav-untermenue a {
  display: block; padding: .55rem 1rem; font-size: .97rem; white-space: nowrap;
  font-weight: 500;
}
.nav-untermenue a:hover { background: var(--boxhover); color: var(--blau); }
.header-inner { display: flex; align-items: center; gap: var(--s3); padding-block: 1rem; flex-wrap: wrap; }
.brand { display: flex; align-items: center; text-decoration: none; }
.brand-logo { display: block; width: 424px; height: auto; max-width: 100%; }
.header-cta { padding-block: .5rem; }
.site-nav { display: flex; gap: 2.1rem; margin-left: var(--s1); margin-right: auto; flex-wrap: wrap; align-items: center; }
.site-nav a { text-decoration: none; color: var(--blau); font-weight: 600; font-size: 1.1rem; }
.site-nav a:hover { color: var(--colorclaim); }

/* ---- Hamburger (nur Mobile sichtbar) --------------------------------- */
/* Checkbox visuell versteckt, aber per Tastatur erreichbar */
.nav-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.nav-toggle:focus-visible ~ .nav-burger { outline: 2px solid var(--blau); outline-offset: 3px; }
.nav-burger { display: none; }   /* auf Desktop ausgeblendet */
.nav-burger-linie {
  display: block;
  width: var(--burger-breite);
  height: var(--burger-dicke);
  background: var(--burger-farbe);
  transition: transform .2s ease, opacity .2s ease;
}
.nav-burger-linie + .nav-burger-linie { margin-top: var(--burger-abstand); }
@media (max-width: 720px) {
  .site-header--sticky { position: static; }   /* auf Mobile nie sticky */
  .header-inner { flex-wrap: wrap; align-items: center; gap: 1.2rem; padding-block: 0.95rem; }
  .brand-logo { width: 250px; height: auto; }

  /* Untermenü im Hamburger: aufgeklappt statt Dropdown */
  .nav-gruppe { display: block; width: 100%; }
  .nav-gruppe-titel { display: none; }
  .nav-untermenue {
    display: block; position: static; min-width: 0; border: 0;
    box-shadow: none; padding: 0; background: transparent;
  }
  .nav-untermenue a { padding: .62rem 0; font-size: 1.02rem; font-weight: 600; }
  .nav-untermenue a:hover { background: transparent; }

  /* Suchfeld im Hamburger: volle Breite */
  .nav-suche { width: 100%; margin: .5rem 0 0; }
  .nav-suche input { width: auto; flex: 1 1 auto; padding: .55rem .7rem; }

  /* Hamburger rechts neben dem Logo */
  .nav-burger {
    display: block; margin-left: auto; padding: 1.5rem .55rem;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
  }

  /* Navigation eingeklappt; per Hamburger aufklappbar (ohne JavaScript) */
  .site-nav {
    display: none; order: 3; width: 100%; margin: 0;
    flex-direction: column; row-gap: 0; column-gap: 0;
    border-top: var(--line); padding-top: .35rem;
  }
  .nav-toggle:checked ~ .site-nav { display: flex; }
  .site-nav a { font-size: 1.02rem; color: var(--blau); padding: .62rem 0; }

  /* Hamburger wird beim Öffnen zum X */
  .nav-toggle:checked ~ .nav-burger .nav-burger-linie:nth-child(1) {
    transform: translateY(calc(var(--burger-dicke) + var(--burger-abstand))) rotate(45deg);
  }
  .nav-toggle:checked ~ .nav-burger .nav-burger-linie:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .nav-burger .nav-burger-linie:nth-child(3) {
    transform: translateY(calc(-1 * (var(--burger-dicke) + var(--burger-abstand)))) rotate(-45deg);
  }

  .header-cta { order: 4; width: 100%; text-align: center; }

  /* Abstand Header -> Inhalt deutlich reduzieren (Punkt 3) */
  .main { padding-top: var(--s2); }
  .hero { padding-top: 0; padding-bottom: var(--s3); }
}

/* ---- Buttons --------------------------------------------------------- */
.btn {
  display: inline-block; padding: .7rem 1.15rem; border-radius: var(--radius);
  text-decoration: none; font-weight: 600; font-size: .98rem;
  border: 1px solid transparent; cursor: pointer; transition: background .15s ease, border-color .15s ease;
}
.btn-primary { background: var(--blau); color: var(--weiss); }
.btn-primary:hover { background: var(--blau-dark); }
.btn-ghost { background: var(--weiss); color: var(--blau); border-color: var(--grau-20); }
.btn-ghost:hover { border-color: var(--blau); }
.btn-ghost.btn-alle { color: var(--colorclaim); }   /* rote Sekundaerlinks (4C), sauber statt inline-!important */
.btn-ghost.btn-alle:hover { border-color: var(--colorclaim); }

/* ---- Banner ---------------------------------------------------------- */
.banner { background: var(--blau-hell); color: var(--blau); text-align: center; padding: .6rem 1rem; font-size: .95rem; }

/* ---- Hero + USP-Streifen (V0: ohne Illustration, reiner Weissraum) ---- */
.hero { padding-block: var(--s1) var(--s3); }
.hero-text { max-width: 66ch; }              /* lesbare Zeilenlänge, Rest bleibt Weissraum */
.hero h1 { max-width: 15ch; }                /* grosse Headline bricht bewusst früh um */
.hero-signatur { color: var(--colorclaim); font-style: italic; font-size: 1.2rem; margin: 0 0 var(--s2); }
.hero .lead { margin-bottom: var(--s3); max-width: 56ch; }
.hero-cta { display: flex; gap: .75rem; flex-wrap: wrap; }
@media (max-width: 860px) {
  .hero-text, .hero h1, .hero .lead { max-width: none; }
}
.usp-strip { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem .9rem; padding: 0; margin: var(--s3) 0 0; }
.usp-strip li { display: inline-flex; align-items: center; gap: .4rem; color: var(--grau-60); font-size: .92rem; }
.usp-strip li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gruen); display: inline-block; }

/* ---- Kachel-Grid ----------------------------------------------------- */
.kachel-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s2);
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.kachel {
  display: flex; gap: .8rem; align-items: flex-start;
  border: var(--line); border-radius: var(--radius); background: var(--weiss);
  padding: 1rem 1.05rem; text-decoration: none; color: var(--anthrazit);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.kachel:hover { border-color: var(--blau); background: var(--boxhover); }
.kachel .ico { flex: 0 0 auto; width: 26px; height: 26px; color: var(--blau); margin-top: 1px; }
.kachel-titel { font-weight: 600; line-height: 1.3; }
.kachel-pfeil { margin-left: auto; color: var(--grau-60); align-self: center; }

/* ---- Preisbadge ------------------------------------------------------ */
.preisbadge {
  display: inline-block; background: var(--blau-hell); color: var(--blau);
  font-weight: 700; font-size: .9rem; padding: .35rem .7rem; border-radius: var(--radius);
}
.preisbadge--offerte { background: var(--grau-20); color: var(--anthrazit); font-weight: 600; }

/* ---- Ablauf (3 nummerierte Schritte) --------------------------------- */
.ablauf { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s3);
  grid-template-columns: repeat(3, 1fr); counter-reset: schritt; }
.ablauf li { position: relative; padding-left: 3rem; counter-increment: schritt; }
.ablauf li::before {
  content: counter(schritt); position: absolute; left: 0; top: 0;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--blau); color: var(--weiss); font-weight: 700;
  display: grid; place-items: center;
}
.ablauf .schritt-text { color: var(--grau-60); margin: 0; }

/* ---- Trust-Band (dunkel, Full-Bleed auf Startseite, 7B) -------------- */
.trust-band {
  background: var(--blau-dark);
  margin-top: var(--s5);
  /* aus dem zentrierten .wrap-Container auf volle Breite ausbrechen */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-block: var(--s5);
}
.trust-band-inner { display: flex; align-items: center; gap: var(--s5); }
.trust-band-text { flex: 1 1 64%; min-width: 0; }
.trust-band-text h2 { color: var(--weiss); }
.trust-band-lead { color: #C3CEDC; margin: 0; max-width: 62ch; }
.trust-band-quali { color: #AEBDCF; font-weight: 600; margin: var(--s2) 0 0; }
.trust-band-usp-spalte { flex: 0 0 40%; text-align: right; }
.trust-band-usp {
  color: #D9A62E; font-weight: 600; font-size: 0.82rem; letter-spacing: .05em;
  text-transform: uppercase; margin: 0; line-height: 1.9;
}
.eyebrow-gold { color: #D9A62E; }
@media (max-width: 860px) {
  .trust-band-inner { display: block; }
  .trust-band-usp-spalte { text-align: left; margin-top: var(--s4); }
}

/* ---- Themen-Block Startseite + Footer (S6.5, Befund 2.1) ------------- */
.themen-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: .7rem; }
.themen-karte {
  display: flex; flex-direction: column; gap: .3rem; border: var(--line);
  border-radius: var(--radius); padding: 1rem 1.15rem; text-decoration: none; color: var(--anthrazit);
}
.themen-karte:hover { border-color: var(--blau); background: var(--boxhover); }
.th-titel { font-weight: 600; color: var(--blau); line-height: 1.35; }
.th-kurz { font-size: .88rem; color: var(--grau-60); line-height: 1.55; }
/* P5: Der Footer spiegelt die Kopfnavigation in Spalten (Angebot / Ressourcen /
   Rechtliches). Ersetzt die frueher hier ausgeschuettete Liste aller Themen-Hubs. */
.footer-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--s2) 1.5rem; }
.footer-nav-spalte { display: flex; flex-direction: column; gap: .3rem; }
.footer-nav-titel { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: #8FA0B5; margin-bottom: .15rem; }
.footer-nav a { color: #C7D0DA; text-decoration: none; font-size: .92rem; }
.footer-nav a:hover { color: var(--weiss); }

/* ---- Ratgeber-Index nach Cluster gruppiert (S6.5, Befund 2.2) -------- */
.rg-gruppe-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: var(--s2); }
.rg-gruppe-kopf h2 { margin: 0; }
.rg-hub-link { font-size: .92rem; font-weight: 600; text-decoration: none; color: var(--blau); white-space: nowrap; }
.rg-hub-link:hover { color: var(--colorclaim); }

/* ---- Vertiefung: Übersicht -> Detailartikel (S6.5, Befund 2.3) ------- */
.vertiefung-lead { color: var(--grau-60); max-width: 68ch; }
.vertiefung-liste { display: flex; flex-wrap: wrap; gap: .5rem; }
.vertiefung-karte {
  display: inline-block; border: var(--line); border-radius: var(--radius);
  padding: .55rem .9rem; text-decoration: none; color: var(--blau); font-weight: 600; font-size: .94rem;
}
.vertiefung-karte:hover { border-color: var(--blau); background: var(--boxhover); }

/* ---- Fristen-Rechner (S5) -------------------------------------------- */
.rechner { border: var(--line); border-radius: var(--radius); padding: 1.4rem 1.5rem; max-width: 640px; }
.rechner-feld { margin-bottom: 1rem; }
.rechner-feld label { display: block; font-weight: 600; margin-bottom: .35rem; font-size: .95rem; }
.rechner-feld select,
.rechner-feld input[type="date"] {
  width: 100%; padding: .6rem .7rem; border: 1px solid var(--grau-20);
  border-radius: var(--radius); font: inherit; background: var(--weiss); color: var(--anthrazit);
}
.rechner-feld select:focus,
.rechner-feld input[type="date"]:focus { outline: 2px solid var(--blau); outline-offset: 1px; }
.rechner-ergebnis { border-top: var(--line); margin-top: 1.2rem; padding-top: 1.1rem; }
.fr-frage { margin: 0; font-size: .9rem; color: var(--grau-60); }
.fr-datum { margin: .15rem 0 .3rem; font-size: 1.6rem; font-weight: 600; color: var(--blau); line-height: 1.2; }
.fr-rest { margin: 0 0 .6rem; font-weight: 600; }
.fr-rest-eilig { color: var(--colorclaim); }
.fr-grundlage { margin: 0 0 .4rem; font-size: .88rem; color: var(--grau-60); }
.fr-hinweis { margin: 0 0 .6rem; font-size: .92rem; }
.fr-pruefen { margin: 0; font-size: .88rem; color: var(--grau-60); border-left: 3px solid var(--blau); padding-left: .8rem; }
.fr-haftung { font-size: .85rem; color: var(--grau-60); max-width: 72ch; margin-top: 1rem; }
.fr-noscript { font-size: .92rem; color: var(--grau-60); }
.fristen-tabelle { width: 100%; border-collapse: collapse; font-size: .95rem; }
.fristen-tabelle th, .fristen-tabelle td { text-align: left; padding: .6rem .5rem; border-bottom: var(--line); vertical-align: top; }
.fristen-tabelle th { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--grau-60); }
.ft-tage { white-space: nowrap; font-weight: 600; color: var(--blau); }
.ft-grundlage { color: var(--grau-60); font-size: .88rem; }
@media (max-width: 640px) {
  .fristen-tabelle, .fristen-tabelle tbody, .fristen-tabelle tr, .fristen-tabelle td { display: block; width: 100%; }
  .fristen-tabelle thead { display: none; }
  .fristen-tabelle tr { border-bottom: var(--line); padding: .5rem 0; }
  .fristen-tabelle td { border: 0; padding: .15rem 0; }
}

/* ---- Themen-Hubs + Querverlinkung (S3/T6+T7) ------------------------- */
.thema-kopf .lead { max-width: 66ch; }
.thema-ratgeber { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .7rem; }
.thema-karte {
  display: flex; flex-direction: column; gap: .3rem; border: var(--line);
  border-radius: var(--radius); padding: 1rem 1.15rem; text-decoration: none; color: var(--anthrazit);
}
.thema-karte:hover { border-color: var(--blau); background: var(--boxhover); }
.tk-titel { font-weight: 600; color: var(--blau); line-height: 1.35; }
.tk-kurz { font-size: .88rem; color: var(--grau-60); line-height: 1.55; }
.querlinks { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.querlinks li { margin: 0; }
.querlinks a {
  display: inline-block; border: var(--line); border-radius: var(--radius);
  padding: .35rem .75rem; text-decoration: none; color: var(--blau); font-size: .92rem;
}
.querlinks a:hover { border-color: var(--blau); background: var(--boxhover); }
.thema-verweis { color: var(--grau-60); max-width: 68ch; }

/* ---- Lexikon (S2/T5) -------------------------------------------------- */
.lexikon-alphabet { display: flex; flex-wrap: wrap; gap: .35rem; }
.lexikon-alphabet a {
  display: inline-block; min-width: 2rem; text-align: center; padding: .3rem .5rem;
  border: var(--line); border-radius: var(--radius); text-decoration: none;
  color: var(--blau); font-weight: 600; font-size: .95rem;
}
.lexikon-alphabet a:hover { border-color: var(--blau); background: var(--boxhover); }
.lexikon-gruppe h2 { border-bottom: var(--line); padding-bottom: .3rem; }
.lexikon-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .7rem; }
.lexikon-karte {
  display: flex; flex-direction: column; gap: .25rem; border: var(--line);
  border-radius: var(--radius); padding: .85rem 1rem; text-decoration: none; color: var(--anthrazit);
}
.lexikon-karte:hover { border-color: var(--blau); background: var(--boxhover); }
.lx-begriff { font-weight: 600; color: var(--blau); }
.lx-kurz { font-size: .88rem; color: var(--grau-60); line-height: 1.5; }
.lexikon-kopf .kurzantwort { max-width: 62ch; }
.lexikon-text p { max-width: 68ch; }
.lexikon-grundlage { font-size: .9rem; color: var(--grau-60); }
.lexikon-grundlage-label { font-weight: 600; color: var(--anthrazit); }
.lexikon-merksatz { background: var(--blau-hell); border-left: 3px solid var(--blau); padding: 1rem 1.2rem; max-width: 68ch; }
.lexikon-merksatz p { margin: 0; }
.lexikon-siehe-auch, .lexikon-ratgeber { margin: 0; padding-left: 1.1rem; }
.lexikon-siehe-auch li, .lexikon-ratgeber li { margin-bottom: .3rem; }

/* ---- Herkunft/Stand unter Ratgeberartikeln (T4, markenorientiert) ---- */
.herkunft { border-top: var(--line); padding-top: var(--s2); }
.herkunft-zeile { margin: 0; font-size: .88rem; color: var(--grau-60); }
.herkunft-zeile strong { color: var(--anthrazit); font-weight: 600; }
.herkunft-quali::before,
.herkunft-stand::before { content: " · "; color: var(--grau-20); }

/* ---- Trust-Block hell (Styleguide / Restseiten) ---------------------- */
.trust { background: var(--blau-hell); border-radius: var(--radius); padding: var(--s4); }
.trust .qualifikation { font-weight: 600; margin: var(--s2) 0 var(--s1); }
.trust .abgrenzung { color: var(--grau-60); font-size: .95rem; margin: 0; }

/* ---- USP-Karten (fünf) ----------------------------------------------- */
.usps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s2);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.usps li { border: var(--line); border-radius: var(--radius); background: var(--weiss); padding: 1rem 1.1rem; }
.usps strong { display: block; margin-bottom: .25rem; }
.usps span { color: var(--grau-60); font-size: .95rem; }

/* ---- FAQ (natives details-Accordion) --------------------------------- */
.faq { max-width: 70ch; }
.faq details { border-bottom: var(--line); }
.faq summary {
  cursor: pointer; padding: 1rem 0; font-weight: 600; list-style: none;
  display: flex; justify-content: space-between; gap: 1rem; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--blau); font-weight: 700; font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "\2013"; }
.faq .faq-a { color: var(--grau-60); padding: 0 0 1rem; margin: 0; }

/* ---- Footer (dunkel, 7B) --------------------------------------------- */
.site-footer { background: var(--blau-dark); color: #AEBDCF; margin-top: var(--s5); }
.footer-inner { display: grid; gap: var(--s2); padding-block: var(--s4); }
.footer-firma { font-size: .92rem; color: #AEBDCF; }
.footer-firma strong { color: var(--weiss); }
.footer-links { display: flex; gap: 1.1rem; flex-wrap: wrap; }
.footer-links a { text-decoration: none; color: #C7D0DA; font-size: .92rem; }   /* gleiche Grösse wie Adresse (Punkt 4) */
.footer-links a:hover { color: var(--weiss); }
.footer-disclaimer { font-size: .82rem; color: #8FA0B5; max-width: 72ch; margin: 0; }
.footer-copy { font-size: .82rem; color: #8FA0B5; margin: 0; }
.footer-logo { display: block; height: 34px; width: auto; margin-bottom: .55rem; }

/* ---- Dezente Ressourcen-Zeile am Seitenende (P6) --------------------- */
/* Themen, Ratgeber, Lexikon & Co. sollen erreichbar sein, ohne den Bestellfluss
   auf Start-, Firmen- und Privatseite zu ueberladen. Deshalb: eine schlanke
   Zeile kleiner Ghost-Buttons ganz unten statt ganzer Inhaltsbloecke. */
.ressourcen-zeile { border-top: var(--line); padding-top: var(--s3); }
.ressourcen-zeile-titel { font-size: .85rem; color: var(--grau-60); margin: 0 0 .6rem; }
.ressourcen-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.ressourcen-links a {
  display: inline-block; text-decoration: none; font-size: .88rem; color: var(--grau-60);
  border: 1px solid var(--grau-20); border-radius: 999px; padding: .32rem .85rem;
  background: var(--weiss); transition: color .15s ease, border-color .15s ease;
}
.ressourcen-links a:hover { color: var(--colorclaim); border-color: var(--colorclaim); }

/* ---- Stage-Notiz (Bau-Etappen-Hinweis) ------------------------------- */
.stage-note { color: var(--grau-60); font-size: .85rem; border-top: var(--line); padding-top: var(--s2); }

/* ---- Styleguide-Helfer (nur /styleguide) ----------------------------- */
.sg-label { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--grau-60); border-bottom: var(--line); padding-bottom: .4rem; margin: var(--s5) 0 var(--s3); }
.sg-swatches { display: flex; gap: var(--s2); flex-wrap: wrap; padding: 0; margin: 0; list-style: none; }
.sg-swatch { width: 130px; }
.sg-chip { height: 56px; border-radius: var(--radius); border: var(--line); }
.sg-swatch code { font-size: .78rem; color: var(--grau-60); display: block; margin-top: .35rem; }
.sg-swatch b { font-size: .85rem; display: block; }
.sg-type > * { margin: 0 0 .4rem; }
.sg-note { color: var(--grau-60); font-size: .85rem; }

/* ---- A11y ------------------------------------------------------------ */
a:focus-visible, .btn:focus-visible, summary:focus-visible {
  outline: 3px solid var(--blau); outline-offset: 2px; border-radius: 3px;
}

/* ---- Bestellstrecke (Funnel, E3) ------------------------------------ */
.funnel-card { border: var(--line); border-radius: var(--radius); background: var(--weiss); padding: 1.4rem 1.5rem; max-width: 640px; }
/* P3: Schrittanzeige in Claim-Rot und deutlich groesser — sie ist die
   Orientierungsmarke im Bestellablauf, nicht eine Randnotiz.
   Schriftgroesse hier anpassen: font-size (aktuell 1.05rem). */
.funnel-fortschritt {
  font-size: 1.05rem; font-weight: 700; color: var(--colorclaim);
  letter-spacing: .01em; margin-bottom: .45rem;
}
/* Zeigt im Bestellablauf, welches Werk gerade bestellt wird (P2: colorclaim,
   fett, mittelgross — gleiche Anmutung wie .funnel-frage).
   Schriftgrösse hier anpassen: font-size (aktuell 1.15rem). */
.funnel-werk {
  font-size: 1.15rem; font-weight: 700; color: var(--colorclaim); line-height: 1.3;
  margin-bottom: .8rem; padding-bottom: .5rem; border-bottom: var(--line);
}
/* P2: dieselbe Werk-Zeile im Seitenkopf, zwischen H1 und Lead-Text. */
.funnel-werk-kopf {
  font-size: 1.15rem; font-weight: 700; color: var(--colorclaim); line-height: 1.3;
  margin: .2rem 0 .5rem;
}
.funnel-werk-kopf[hidden] { display: none; }
.funnel-frage { font-weight: 700; font-size: 1.15rem; line-height: 1.3; margin: 0 0 .3rem; }
.funnel-hint { font-size: .9rem; color: var(--grau-60); margin: .4rem 0; }
.funnel-optionen { display: flex; flex-direction: column; gap: .5rem; margin-top: 1rem; }
.funnel-opt { display: flex; justify-content: space-between; align-items: center; gap: 1rem; text-align: left;
  border: 1px solid var(--grau-20); background: var(--weiss); border-radius: var(--radius); padding: .85rem 1rem;
  font: inherit; color: var(--anthrazit); cursor: pointer; transition: border-color .15s ease; }
.funnel-opt:hover { border-color: var(--blau); background: var(--boxhover); }
.funnel-opt .opt-band { font-size: .78rem; color: var(--blau); font-weight: 700; white-space: nowrap; }
.funnel-feld { display: block; margin: .8rem 0; }
.funnel-feld > span { display: block; font-weight: 600; font-size: .95rem; margin-bottom: .25rem; }
.funnel-feld input, .funnel-feld select, .funnel-feld textarea {
  width: 100%; padding: .55rem .65rem; border: 1px solid var(--grau-20); border-radius: 6px; font: inherit; background: var(--weiss); }
.funnel-feld textarea { min-height: 96px; resize: vertical; }
.funnel-feld input:focus, .funnel-feld select:focus, .funnel-feld textarea:focus {
  outline: 2px solid var(--blau); outline-offset: 1px; border-color: var(--blau); }
.pflicht-stern { color: var(--rot); }
.preis-hinweis { background: var(--blau-hell); color: var(--blau); border-radius: var(--radius); padding: .6rem .9rem; font-weight: 700; margin: 1rem 0; }
.funnel-nav { display: flex; gap: .6rem; margin-top: 1.2rem; flex-wrap: wrap; }
.funnel-fehler { color: var(--rot); font-size: .9rem; margin: .6rem 0 0; }
.funnel-check { display: flex; gap: .55rem; align-items: flex-start; margin: .9rem 0 .2rem; }
.funnel-check input { margin-top: .25rem; flex: 0 0 auto; }
.funnel-check label { font-size: .95rem; }
.hp-feld { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hinweis-box { background: var(--blau-hell); border-radius: var(--radius); padding: 1rem 1.2rem; color: var(--blau); max-width: 640px; }
.status-karte { border: var(--line); border-radius: var(--radius); background: var(--weiss); padding: 1.2rem 1.4rem; max-width: 560px; }
.status-karte p { margin: .35rem 0; }

/* ---- Statusseite (E4) ------------------------------------------------ */
.mt { margin-top: var(--s4); }
.flash { border-radius: var(--radius); padding: .8rem 1rem; margin: 0 0 var(--s3); }
.flash p { margin: .2rem 0; }
.flash-ok { background: #E7F1EC; color: var(--gruen); border: 1px solid #BFE0CE; }
.flash-fehler { background: #F6E7E7; color: var(--rot); border: 1px solid #E4C2C2; }
.timeline { list-style: none; padding: 0; margin: 0; max-width: 560px; }
.timeline li { display: flex; gap: 1rem; padding: .5rem 0; border-bottom: var(--line); }
.timeline li:last-child { border-bottom: 0; }
.tl-datum { color: var(--grau-60); font-size: .85rem; white-space: nowrap; min-width: 8.5rem; }
.tl-text { font-size: .95rem; }
.rf-block { border: var(--line); border-radius: var(--radius); background: var(--weiss); padding: 1rem 1.2rem; margin: 0 0 var(--s2); max-width: 640px; }
.rf-frage { font-weight: 600; margin: 0 0 .5rem; }
.rf-antwort { margin: 0; }
.rf-meta { color: var(--grau-60); font-size: .82rem; margin: .3rem 0 0; }
.datei-liste { list-style: none; padding: 0; margin: 0; max-width: 640px; }
.datei-liste li { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  border: var(--line); border-radius: var(--radius); background: var(--weiss); padding: .7rem 1rem; margin-bottom: .5rem; }
.datei-name { font-size: .95rem; word-break: break-word; }
.datei-groesse { color: var(--grau-60); font-size: .85rem; white-space: nowrap; }
.datei-abgelaufen { color: var(--grau-60); font-size: .85rem; }
.btn-klein { padding: .4rem .8rem; font-size: .9rem; }
.rerun-box { background: var(--blau-hell); border-radius: var(--radius); padding: var(--s3); margin-top: var(--s4); max-width: 640px; }
.rerun-box h2 { margin-top: 0; }

/* ---- Admin-Panel (E5) ------------------------------------------------ */
.admin-bar { background: var(--anthrazit); color: var(--weiss); }
.admin-bar-inner { display: flex; align-items: center; justify-content: space-between; padding-block: .7rem; }
.admin-brand { color: var(--weiss); text-decoration: none; font-weight: 700; }
.admin-brand span { color: #9AA6B2; font-weight: 400; }
.admin-meta { color: #9AA6B2; font-size: .85rem; }
.admin-nav a { color: #C7D0DA; text-decoration: none; margin-right: .9rem; font-size: .9rem; }
.admin-nav a:hover { color: var(--weiss); }
.admin-main { padding-block: var(--s3) var(--s5); }
.admin-zurueck { margin: 0 0 .5rem; }
.admin-zurueck a { text-decoration: none; color: var(--grau-60); }
.grau { color: var(--grau-60); }
.admin-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 var(--s3); }
.filter-chip { display: inline-flex; align-items: center; gap: .4rem; border: var(--line); border-radius: 999px;
  padding: .35rem .8rem; text-decoration: none; color: var(--anthrazit); font-size: .9rem; background: var(--weiss); }
.filter-chip.aktiv { background: var(--blau); color: var(--weiss); border-color: var(--blau); }
.filter-chip .chip-n { font-variant-numeric: tabular-nums; opacity: .7; font-size: .82rem; }
.admin-tabelle { width: 100%; border-collapse: collapse; background: var(--weiss); border: var(--line); border-radius: var(--radius); overflow: hidden; }
.admin-tabelle th, .admin-tabelle td { text-align: left; padding: .6rem .8rem; border-bottom: var(--line); font-size: .92rem; }
.admin-tabelle th { background: var(--papier); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--grau-60); }
.admin-tabelle tbody tr { cursor: pointer; }
.admin-tabelle tbody tr:hover { background: var(--blau-hell); }
.admin-tabelle a { text-decoration: none; font-weight: 600; }
.badge { display: inline-block; padding: .2rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.badge-neu { background: #E6EDF5; color: var(--blau); }
.badge-freigabe_noetig { background: #FBEED0; color: #8A6300; }
.badge-in_arbeit { background: #E3EEF9; color: #1F5C99; }
.badge-rueckfrage { background: #F6E7E7; color: var(--rot); }
.badge-geliefert { background: #E7F1EC; color: var(--gruen); }
.badge-storniert { background: var(--grau-20); color: var(--grau-60); }
.admin-grid { display: grid; grid-template-columns: 1fr 300px; gap: var(--s4); align-items: start; }
.admin-aktionen { border: var(--line); border-radius: var(--radius); background: var(--weiss); padding: 1.1rem 1.2rem; position: sticky; top: 1rem; }
.admin-aktionen h2 { margin-top: 0; font-size: 1.1rem; }
.admin-formblock { border-top: var(--line); padding-top: .9rem; margin-top: .9rem; }
.admin-dl { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 var(--s3); }
.admin-json summary { cursor: pointer; color: var(--blau); font-weight: 600; margin: .5rem 0; }
.admin-json pre { background: var(--papier); border: var(--line); border-radius: var(--radius); padding: .8rem; overflow: auto; font-size: .82rem; }

/* ---- Landingpages & Übersichten (E7) --------------------------------- */
.breadcrumb { font-size: .85rem; color: var(--grau-60); margin: var(--s3) 0 0; }
.breadcrumb a { color: var(--grau-60); text-decoration: none; }
.breadcrumb a:hover { color: var(--blau); }
.produkt-kopf .preisbadge { display: inline-block; background: var(--blau-hell); color: var(--blau); font-weight: 700;
  font-size: .85rem; padding: .3rem .8rem; border-radius: var(--radius); margin-bottom: .6rem; }
/* Produkt-Kopf (V0: ohne Illustration, reiner Weissraum) */
.produkt-kopf-text { max-width: 62ch; }
.produkt-kopf-text h1 { max-width: 22ch; }
.cta-sub { color: var(--grau-60); font-size: .85rem; margin-left: .6rem; }
.haken-liste { list-style: none; padding: 0; margin: 0; max-width: 680px; }
.haken-liste li { position: relative; padding-left: 1.6rem; margin: .5rem 0; }
.haken-liste li::before { content: "✓"; position: absolute; left: 0; color: var(--gruen); font-weight: 700; }
.ablauf-liste { max-width: 680px; padding-left: 1.2rem; }
.ablauf-liste li { margin: .6rem 0; }
.ablauf-liste.gross li { margin: 1rem 0; font-size: 1.05rem; }
.faq-item { border-bottom: var(--line); padding: .3rem 0; max-width: 720px; }
.faq-item summary { cursor: pointer; font-weight: 600; padding: .6rem 0; }
.faq-item p { margin: 0 0 .8rem; color: var(--grau-60); }
.verwandte-grid, .produkt-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .7rem; }
.verwandte-karte, .produkt-karte { display: flex; flex-direction: column; gap: .3rem; border: var(--line); border-radius: var(--radius);
  background: var(--weiss); padding: .9rem 1rem; text-decoration: none; color: var(--anthrazit); transition: border-color .15s ease; }
.verwandte-karte:hover, .produkt-karte:hover { border-color: var(--blau); background: var(--boxhover); }
.vk-name, .pk-name { font-weight: 600; }
.vk-badge, .pk-badge { font-size: .8rem; color: var(--blau); }
.thema-block h2 { border-bottom: 2px solid var(--blau-hell); padding-bottom: .3rem; }
.preis-tabelle { width: 100%; border-collapse: collapse; max-width: 780px; background: var(--weiss); border: var(--line); border-radius: var(--radius); overflow: hidden; }
.preis-tabelle th, .preis-tabelle td { text-align: left; padding: .7rem .9rem; border-bottom: var(--line); }
.preis-tabelle th { background: var(--papier); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; color: var(--grau-60); }
.preis-tabelle .pb-name { font-weight: 700; }
.kein-kontakt { background: var(--blau-hell); border-radius: var(--radius); padding: var(--s4); max-width: 720px; }
.kein-kontakt h2 { margin-top: 0; }
.cta-abschluss { text-align: center; }
.btn-gross { padding: .9rem 2rem; font-size: 1.05rem; }

/* ---- Responsiv ------------------------------------------------------- */
@media (max-width: 760px) {
  .ablauf { grid-template-columns: 1fr; }
  .admin-grid { grid-template-columns: 1fr; }
  .admin-aktionen { position: static; }
}
@media (max-width: 640px) {
  h1 { font-size: 1.8rem; }
  .header-cta { order: 3; }
  .trust { padding: var(--s3); }
}

/* ---- Reduzierte Bewegung respektieren -------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ---- Admin-Formulare & Coupons/Partner (E8) -------------------------- */
.admin-form { background: var(--weiss); border: var(--line); border-radius: var(--radius); padding: var(--s4); margin-bottom: var(--s4); }
.admin-form .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .8rem 1rem; margin-bottom: 1rem; }
.admin-form .funnel-feld span { display: block; font-size: .8rem; color: var(--grau-60); margin-bottom: .2rem; }
.admin-form input, .admin-form select, .admin-form textarea { width: 100%; padding: .5rem; border: var(--line); border-radius: 6px; font: inherit; }
.funnel-check { display: flex; align-items: center; gap: .4rem; align-self: end; }
.funnel-check input { width: auto; }
.admin-row-actions { white-space: nowrap; display: flex; gap: .3rem; flex-wrap: wrap; }
.admin-row-actions form { margin: 0; }
.admin-form-inline { display: flex; align-items: end; gap: 1rem; flex-wrap: wrap; margin-bottom: var(--s4); }
.admin-tabelle tfoot td { border-top: 2px solid var(--blau-hell); }
.partner-form { max-width: 560px; }
.partner-form .funnel-feld { display: block; margin-bottom: .9rem; }
.partner-form .funnel-feld span { display: block; font-size: .85rem; color: var(--grau-60); margin-bottom: .25rem; }
.partner-form input, .partner-form textarea { width: 100%; padding: .6rem; border: var(--line); border-radius: 6px; font: inherit; }

/* ---- Rechtstexte & Beispiele (E9) ------------------------------------ */
.rechtstext { max-width: 760px; }
.rechtstext h2 { margin-top: 1.8rem; font-size: 1.15rem; }
.rechtstext p { color: var(--anthrazit); }
.beispiel-karte { gap: .5rem; }
.beispiel-karte .btn { margin-top: .3rem; }

/* ---- Beilage-Box in der Bestellstrecke (P2) --------------------------- */
.upload-box { margin-top: 1rem; background: var(--weiss); border: 1px dashed var(--blau); border-radius: var(--radius); padding: 1rem 1.2rem; }
.upload-box-titel { font-weight: 600; color: var(--blau); margin-bottom: .4rem; }
.upload-box-liste { margin: .2rem 0 .6rem; padding-left: 1.1rem; color: var(--anthrazit); }
.upload-box-liste li { margin: .15rem 0; }
.upload-box-input { display: block; margin: .3rem 0; max-width: 100%; }
.upload-box-status { color: var(--blau); font-size: .9rem; min-height: 1.2em; }
.upload-box-hinweis { color: var(--grau-60); font-size: .8rem; margin-top: .3rem; }

/* ---- Verweis/Schutzhinweis-Box im Fragebogen (P6) --------------------- */
.verweis-box { background: var(--blau-hell); border-left: 4px solid var(--blau); border-radius: var(--radius); padding: 1rem 1.2rem; color: var(--anthrazit); line-height: 1.6; }
.thema-ab { font-size: .8rem; font-weight: 700; color: var(--blau); margin-left: .5rem; white-space: nowrap; }


/* ---- Preistabelle: Preisspalte (E7/SEO-Patch G) ------------------------- */
/* Preis auf einer Zeile, blau und fett, eine Stufe kleiner als das Thema. */
.preis-tabelle td.tabular { white-space: nowrap; color: var(--blau); font-weight: 700; font-size: .95rem; }
.preis-tabelle td.tabular, .preis-tabelle th:last-child { width: 1%; }

/* ---- Ratgeber: Uebersicht und Hub-Block --------------------------------- */
/* ---- Schutz-Hinweis und Hilfeseite (Gewalt, Opferhilfe, Kindesschutz) -- */
.schutz-box {
  border: 2px solid var(--blau); border-radius: var(--radius);
  background: var(--blau-hell); padding: 1.3rem 1.5rem; max-width: 72ch;
}
.schutz-box h2 { margin-top: 0; }
.schutz-box p { margin-bottom: .6rem; }
.schutz-mehr { margin-bottom: 0; font-weight: 600; }
.hilfe-notfall {
  border-left: 4px solid var(--colorclaim); background: var(--blau-hell);
  padding: 1.1rem 1.4rem; max-width: 56ch;
}
.hilfe-notfall-titel { margin: 0; font-size: .85rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--grau-60); font-weight: 600; }
.hilfe-notfall-nr { margin: .2rem 0 .4rem; font-size: 1.7rem; font-weight: 600; }
.hilfe-notfall-nr a { color: var(--colorclaim); text-decoration: none; }
.hilfe-notfall-text { margin: 0; font-size: .92rem; }
.hilfe-liste { margin: 0; padding-left: 1.2rem; max-width: 68ch; }
.hilfe-liste li { margin-bottom: .45rem; }

/* ---- Suche (S6.6) ---------------------------------------------------- */
.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; }
.nav-suche { display: flex; align-items: stretch; margin-left: .6rem; }
.nav-suche input {
  width: 8.5rem; padding: .38rem .6rem; font: inherit; font-size: .93rem;
  border: 1px solid var(--grau-20); border-right: 0;
  border-radius: var(--radius); border-top-right-radius: 0; border-bottom-right-radius: 0;
  background: var(--weiss); color: var(--anthrazit);
}
.nav-suche input:focus { outline: 2px solid var(--blau); outline-offset: -1px; }
.nav-suche button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 .6rem; border: 1px solid var(--grau-20); background: var(--weiss);
  color: var(--blau); cursor: pointer;
  border-radius: var(--radius); border-top-left-radius: 0; border-bottom-left-radius: 0;
}
.nav-suche button:hover { background: var(--boxhover); border-color: var(--blau); }

.suche-form { display: flex; gap: .5rem; max-width: 560px; flex-wrap: wrap; }
.suche-form input {
  flex: 1 1 16rem; padding: .65rem .8rem; font: inherit;
  border: 1px solid var(--grau-20); border-radius: var(--radius);
  background: var(--weiss); color: var(--anthrazit);
}
.suche-form input:focus { outline: 2px solid var(--blau); outline-offset: 1px; }
.suche-anzahl { color: var(--grau-60); }
.suche-zahl { color: var(--grau-60); font-weight: 400; font-size: .8em; }
.suche-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: .7rem; }
.suche-treffer {
  display: flex; flex-direction: column; gap: .25rem; border: var(--line);
  border-radius: var(--radius); padding: .9rem 1.05rem; text-decoration: none; color: var(--anthrazit);
}
.suche-treffer:hover { border-color: var(--blau); background: var(--boxhover); }
.st-titel { font-weight: 600; color: var(--blau); line-height: 1.35; }
.st-text { font-size: .88rem; color: var(--grau-60); line-height: 1.55; }
.st-badge { font-size: .8rem; color: var(--grau-60); margin-top: .15rem; }

/* Abstand für Folgelinks unter Listen und Rastern (Startseite, Hubs, Übersichten) */
.ghlink { margin-top: var(--s3); }

.ratgeber-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--s2); }
.ratgeber-karte {
  display: flex; flex-direction: column; gap: .35rem; text-decoration: none;
  background: var(--weiss); border: var(--line); border-radius: var(--radius);
  padding: .9rem 1rem; color: inherit; transition: border-color .15s ease;
}
.ratgeber-karte:hover { border-color: var(--blau); background: var(--boxhover); }
.ratgeber-karte .rk-titel { font-weight: 700; color: var(--blau); }
.ratgeber-karte .rk-teaser { font-size: .92rem; color: var(--grau-60); line-height: 1.4; }
.ratgeber-block { margin-top: var(--s4); }
.ratgeber-hinweis a { font-weight: 600; }

/* ---- Preistabelle: Zeilen verlinken auf den Themenblock (Patch H) ------- */
/* Beide Zellen sind Links auf /de/private#thema-... bzw. /de/firmen#thema-...
   Grundfarbe bleibt erhalten (Thema dunkel, Preis blau); Hover faerbt claim-rot. */
.preis-tabelle td a { display: block; text-decoration: none; color: inherit; }
.preis-tabelle td a:hover,
.preis-tabelle td a:focus-visible { color: var(--colorclaim); }
/* Abstand zwischen den beiden Tabellen (Privat / Firmen) */
.preis-tabelle + h2 { margin-top: var(--s5); }
/* Ankersprung nicht bündig an den Viewportrand setzen */
.thema-block { scroll-margin-top: var(--s3); }