/* =========================================================================
   VARIANTE A — "Kanzlei-Klassik"
   Richtung: Refined Conservative. Die bestehende Anmutung bleibt erkennbar,
   wird aber diszipliniert: eine geschlossene Typoskala, feine Hairlines als
   Gliederung, einheitliche Karten, Buttons im Amtsformat.
   Nur CSS. Keine Inhalte, keine Reihenfolge, keine Sichtbarkeit veraendert.
   ========================================================================= */

/* ---- Tokens: Skala schliessen ---------------------------------------- */
:root {
  /* Sechs Schriftgrade statt 29 Einzelwerten */
  --t-xs:   0.8125rem;
  --t-sm:   0.9375rem;
  --t-base: 1rem;
  --t-md:   1.0625rem;
  --t-lg:   1.25rem;
  --t-xl:   1.5rem;

  /* Rahmen: dekorativ vs. bedienbar getrennt */
  --kante:     #C9D0DA;   /* Karten, Trennlinien */
  --feldrand:  #7C8794;   /* Eingabefelder und Bedienelemente, >= 3:1 */
  --line: 1px solid #C9D0DA;

  --elev: 0 1px 2px rgba(24, 45, 74, .06);
  --s4: 2.25rem;
  --s5: 3.75rem;
}

/* ---- Grundtext ------------------------------------------------------- */

/* ---- Echte Fettschnitte -------------------------------------------------
   main.css deklariert nur Regular 400, Italic 400 und SemiBold 600. Die 21
   Stellen mit font-weight: 700 wurden deshalb vom Browser kuenstlich fett
   gerechnet. Inter 4.001 (SIL OFL), gleicher Build git-9221beed3 wie die
   vorhandenen Schnitte, gleicher Zeichenumfang, gleiche Vertikalmetriken. */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/Inter-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: italic; font-weight: 700; font-display: swap;
  src: url('/assets/fonts/Inter-BoldItalic.woff2') format('woff2');
}

body { font-size: var(--t-md); line-height: 1.62; }
.lead { font-size: var(--t-lg); line-height: 1.55; max-width: 58ch; }

/* ---- Typografie: ruhiger, fluid, ohne Sprung bei 640px --------------- */
h1 {
  font-size: clamp(1.95rem, 1.35rem + 1.9vw, 2.7rem);
  line-height: 1.14;
  letter-spacing: -.018em;
  color: var(--blau-dark);
  margin-bottom: var(--s2);
}
h2 {
  font-size: clamp(1.35rem, 1.15rem + .75vw, 1.6rem);
  line-height: 1.25;
  letter-spacing: -.012em;
  color: var(--blau-dark);
}
h3 { font-size: var(--t-md); letter-spacing: -.006em; }

/* Signaturzeile ueber der Headline: gleiche Aussage, ruhigerer Auftritt */
.hero-signatur {
  font-style: normal;
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: .015em;
  color: var(--colorclaim);
  margin-bottom: .55rem;
}

.eyebrow, .footer-nav-titel, .werke-box-titel, .werke-gruppe,
.ressourcen-zeile-titel, .fr-werke-titel {
  font-size: var(--t-xs);
  letter-spacing: .085em;
  font-weight: 700;
}

/* ---- Gliederung: feine Hairline statt reinem Abstand ----------------- */
.main > .section + .section,
.main > .ratgeber > .section + .section,
.main > article > .section + .section {
  border-top: var(--line);
  padding-top: var(--s4);
  margin-top: var(--s4);
}
.section-head { margin-bottom: var(--s3); max-width: 58ch; }

/* Lesbare Zeilenlaenge im redaktionellen Fliesstext (Ratgeberartikel
   hatten bisher keine Begrenzung und liefen ueber 1200 px). */
.ratgeber > .section > p,
.ratgeber-kopf .lead,
.rechtstext p { max-width: 68ch; }

/* ---- Header ---------------------------------------------------------- */
.site-header { border-bottom: 1px solid var(--kante); }
.header-inner { gap: var(--s2) var(--s3); padding-block: .9rem; }
.brand-logo { width: 340px; }
.site-nav { gap: 1.6rem; }
.site-nav a { font-size: var(--t-base); font-weight: 600; }
.nav-untermenue { border: 1px solid var(--kante); box-shadow: 0 6px 18px rgba(24, 45, 74, .12); }
.nav-suche input, .nav-suche button { border-color: var(--feldrand); }

/* Zwischenbreiten: bisher gab es zwischen 720 px und Desktop keinen Schritt */
@media (min-width: 721px) and (max-width: 1080px) {
  .brand-logo { width: 260px; }
  .site-nav { gap: 1.1rem; }
  .site-nav a { font-size: var(--t-sm); }
  .nav-suche input { width: 7rem; }
}

/* ---- Buttons: Amtsformat, ausreichende Trefferflaeche ---------------- */
.btn {
  min-height: 2.75rem;
  line-height: 1.4;
  text-align: center;
  padding: .78rem 1.35rem;
  font-size: var(--t-sm);
  letter-spacing: .012em;
  border-radius: var(--radius);
}
.btn-primary { background: var(--blau-dark); border-color: var(--blau-dark); }
.btn-primary:hover { background: #12233A; }
.btn-ghost { border-color: var(--feldrand); color: var(--blau-dark); }
.btn-ghost:hover { border-color: var(--blau-dark); background: var(--blau-hell); }
.btn-gross { min-height: 3.1rem; padding: .85rem 1.9rem; font-size: var(--t-md); }
.btn-klein { min-height: 2.25rem; padding: .4rem .9rem; font-size: var(--t-sm); }
.header-cta { padding-inline: 1.15rem; }

/* ---- Karten: EIN Bauteil statt neun Varianten ------------------------ */
.kachel, .themen-karte, .thema-karte, .lexikon-karte, .verwandte-karte,
.produkt-karte, .ratgeber-karte, .suche-treffer, .beispiel-karte {
  border: 1px solid var(--kante);
  background: var(--weiss);
  padding: 1.05rem 1.15rem;
  gap: .35rem;
  box-shadow: none;
}
.kachel:hover, .themen-karte:hover, .thema-karte:hover, .lexikon-karte:hover,
.verwandte-karte:hover, .produkt-karte:hover, .ratgeber-karte:hover,
.suche-treffer:hover {
  border-color: var(--blau-dark);
  background: var(--blau-hell);
  box-shadow: var(--elev);
}
.kachel-grid, .themen-grid, .thema-ratgeber, .lexikon-liste,
.verwandte-grid, .produkt-liste, .ratgeber-liste, .suche-liste {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: .8rem;
}
.th-titel, .tk-titel, .lx-begriff, .vk-name, .pk-name, .st-titel,
.ratgeber-karte .rk-titel { color: var(--blau-dark); font-weight: 600; }
.th-kurz, .tk-kurz, .lx-kurz, .st-text, .ratgeber-karte .rk-teaser {
  font-size: var(--t-sm); line-height: 1.5;
}
.vk-badge, .pk-badge { font-size: var(--t-sm); color: var(--grau-60); font-variant-numeric: tabular-nums; }

/* ---- Ablauf ---------------------------------------------------------- */
.ablauf { gap: var(--s3) var(--s4); }
.ablauf li { padding-left: 2.9rem; }
.ablauf li::before {
  width: 2rem; height: 2rem;
  background: var(--weiss);
  color: var(--blau-dark);
  border: 1.5px solid var(--blau-dark);
  font-size: var(--t-sm);
}
.ablauf h3 { margin-bottom: .2rem; }
.schritt-text { font-size: var(--t-base); }

/* ---- USP-Karten und Streifen ----------------------------------------- */
.usps { gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.usps li { border: 1px solid var(--kante); padding: 1rem 1.1rem; }
.usps strong { color: var(--blau-dark); margin-bottom: .3rem; }
.usps span { font-size: var(--t-sm); }
.usp-strip { gap: .45rem 1.5rem; margin-top: var(--s3); }
.usp-strip li { font-size: var(--t-sm); font-weight: 600; color: var(--anthrazit); }

/* ---- Trust-Band: weniger Lautstaerke, mehr Ruhe ---------------------- */
.trust-band { padding-block: var(--s5); }
.trust-band-inner { gap: var(--s4); align-items: flex-start; }
.trust-band-text { flex: 1 1 60%; }
.trust-band-usp-spalte { flex: 0 0 32%; }
.trust-band-text h2 { color: var(--weiss); font-size: clamp(1.35rem, 1.15rem + .75vw, 1.6rem); }
.trust-band-lead { font-size: var(--t-base); line-height: 1.65; }
.trust-band-usp {
  font-size: var(--t-xs);
  letter-spacing: .09em;
  line-height: 1.75;
}

/* ---- FAQ ------------------------------------------------------------- */
.faq { max-width: 68ch; }
.faq summary { padding: .95rem 0; font-size: var(--t-md); }
.faq details { border-bottom: 1px solid var(--kante); }
.faq .faq-a { font-size: var(--t-base); max-width: 64ch; }
.faq-item summary { padding: .8rem 0; }

/* ---- Tabellen -------------------------------------------------------- */
.preis-tabelle, .fristen-tabelle, .admin-tabelle { border-color: var(--kante); }
.preis-tabelle th, .fristen-tabelle th {
  background: transparent;
  border-bottom: 2px solid var(--blau-dark);
  color: var(--blau-dark);
  font-size: var(--t-xs);
  letter-spacing: .08em;
}
.preis-tabelle td, .fristen-tabelle td { border-bottom: 1px solid var(--kante); }
.preis-tabelle .pb-name { font-weight: 600; }

/* ---- Preisangaben ---------------------------------------------------- */
.preisbadge, .produkt-kopf .preisbadge {
  background: var(--weiss);
  border: 1px solid var(--blau-dark);
  color: var(--blau-dark);
  font-size: var(--t-sm);
  padding: .3rem .75rem;
  font-variant-numeric: tabular-nums;
}
.preisbadge--offerte { border-color: var(--feldrand); color: var(--grau-60); }
.thema-ab { font-size: var(--t-sm); color: var(--grau-60); font-weight: 600; }

/* ---- Formulare: sichtbare Feldgrenzen (WCAG 1.4.11) ------------------ */
.funnel-feld input, .funnel-feld select, .funnel-feld textarea,
.rechner-feld select, .rechner-feld input[type="date"],
.suche-form input, .admin-form input, .admin-form select, .admin-form textarea,
.partner-form input, .partner-form textarea {
  border: 1px solid var(--feldrand);
  border-radius: var(--radius);
  min-height: 2.75rem;
  padding: .6rem .75rem;
}
/* Freitextfelder rund fuenf Zeilen hoch. Wer viel schreibt, soll nicht in einem
   Guckloch scrollen muessen — ausfuehrliche Schilderungen verbessern das Werk. */
.funnel-feld textarea { min-height: 9.5rem; line-height: 1.55; }
.partner-form textarea, .admin-form textarea { min-height: 7rem; }
.funnel-feld > span, .rechner-feld label { font-size: var(--t-sm); }

/* ---- Bestellstrecke -------------------------------------------------- */
.funnel-card { border: 1px solid var(--kante); padding: 1.5rem 1.6rem; max-width: 680px; }
.funnel-fortschritt { font-size: var(--t-lg); }
.funnel-werk { font-size: var(--t-lg); border-bottom: 1px solid var(--kante); }
.funnel-werk-kopf { font-size: var(--t-md); }
.funnel-frage { font-size: var(--t-md); }
.funnel-opt {
  border: 1px solid var(--feldrand);
  min-height: 3rem;
  padding: .8rem 1rem;
  font-weight: 400;
}
/* Hover ohne Schriftsprung: bisher wechselte hier font-size und font-weight,
   was den Text bei jeder Mausbewegung neu umbrach. */
.funnel-opt:hover {
  font-size: inherit;
  font-weight: 400;
  border-color: var(--blau-dark);
  background: var(--blau-hell);
  color: var(--anthrazit);
}
.funnel-opt--gewaehlt { border-color: var(--blau-dark); border-left-width: 4px; font-weight: 600; }
.preis-hinweis { border: 1px solid var(--blau-dark); background: var(--blau-hell); }
.hinweis-box, .verweis-box, .lexikon-merksatz { border: 1px solid var(--kante); }
.verweis-box, .lexikon-merksatz { border-left: 4px solid var(--blau-dark); }
.hub-teaser { border: 1px solid var(--kante); border-left: 4px solid var(--colorclaim); }

/* ---- Ressourcen-Zeile ------------------------------------------------ */
.ressourcen-links a {
  border-radius: var(--radius);
  border-color: var(--kante);
  font-size: var(--t-sm);
  padding: .4rem .9rem;
}

/* ---- Footer ---------------------------------------------------------- */
.site-footer { background: var(--blau-dark); }
.footer-inner { gap: var(--s3); padding-block: var(--s5) var(--s4); }
.footer-nav { gap: var(--s3) 2rem; }
.footer-nav a, .footer-links a { font-size: var(--t-sm); }
.footer-nav a:hover, .footer-links a:hover { text-decoration: underline; text-underline-offset: 3px; }
.footer-disclaimer, .footer-copy { font-size: var(--t-xs); }
.footer-disclaimer {
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding-top: var(--s2);
  margin-top: var(--s1);
}

/* ---- Fokus: auf hellem UND dunklem Grund sichtbar -------------------- */
a:focus-visible, .btn:focus-visible, summary:focus-visible,
button:focus-visible, .funnel-opt:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--weiss);
  outline-offset: 1px;
  box-shadow: 0 0 0 4px var(--blau-dark);
  border-radius: 2px;
}

/* ---- Mobile ---------------------------------------------------------- */
@media (max-width: 720px) {
  .brand-logo { width: 230px; }
  .hero-cta { display: grid; gap: .6rem; }
  .hero-cta .btn { width: 100%; }
  .main > .section + .section,
  .main > .ratgeber > .section + .section,
  .main > article > .section + .section { padding-top: var(--s3); margin-top: var(--s3); }
  .kachel-grid, .themen-grid, .thema-ratgeber, .lexikon-liste,
  .verwandte-grid, .produkt-liste, .ratgeber-liste, .suche-liste {
    grid-template-columns: 1fr;
  }
  .trust-band { padding-block: var(--s4); }
  .site-nav a { padding: .75rem 0; }
  .footer-inner { padding-block: var(--s4) var(--s3); }
}
@media (max-width: 640px) {
  h1 { font-size: clamp(1.85rem, 1.35rem + 2.2vw, 2.2rem); }
  .lead { font-size: var(--t-md); }
}

/* ---- Ueberlaufschutz und Trefferflaechen (gemessen, nicht geschaetzt) ----
   Lange Werk- und Optionsnamen ("Mahnschreiben / Zahlungsaufforderung") sind
   Flex-Elemente neben einem nicht umbrechenden Preis. Ohne min-width:0 schrumpft
   der Name nicht unter seine laengste Wortbreite und die Karte laeuft auf
   schmalen Displays ueber den Rand. */
.funnel-opt .opt-label, .vk-name, .pk-name, .kachel-titel, .th-titel,
.tk-titel, .lx-begriff, .st-titel, .ratgeber-karte .rk-titel, .datei-name {
  min-width: 0;
  overflow-wrap: break-word;
}
/* Der Preis bleibt in seiner Spalte: der Text weicht ihm aus, statt ihn auf eine
   eigene Zeile zu verdraengen. flex-wrap waere hier die falsche Loesung. */
.funnel-opt, .verwandte-karte, .produkt-karte { flex-wrap: nowrap; }
.funnel-opt .opt-band, .vk-badge, .pk-badge { flex: 0 0 auto; }
/* Mindestabstand zwischen Text- und Preisspalte: der Text soll nie bis an den
   Betrag heranlaufen. Der Wert ist eine Untergrenze, bei viel Platz wird er groesser. */
.funnel-opt, .verwandte-karte, .produkt-karte { column-gap: 1.75rem; }
@media (max-width: 480px) {
  .funnel-opt, .verwandte-karte, .produkt-karte { column-gap: 1.1rem; }
}
/* Der Untermenue-Pfeil ist mit .7em unter 12 px gerutscht. */
.nav-pfeil { font-size: .85em; }
/* Zeilenlaenge auch auf Themen-Hubs und im Abschlusshinweis begrenzen. */
.thema-hub > .section > p, .ratgeber-disclaimer p { max-width: 74ch; }

@media (max-width: 720px) {
  /* Ressourcen-Links waren mit 35 px zu flache Tippziele. */
  .ressourcen-links a { padding-block: .6rem; }
}

/* ---- Bewegung reduzieren --------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .kachel, .themen-karte, .thema-karte, .lexikon-karte, .verwandte-karte,
  .produkt-karte, .ratgeber-karte, .suche-treffer, .btn, .funnel-opt {
    transition: none;
  }
}