/* Variante C, 19.10.2026: seriöseres Gesamtdesign mit Preussischblau.
   Wird auf jeder Seite als letztes Stylesheet geladen und legt sich über system.css, home.css, artikel.css und tool.css.
   --gelb bleibt als Variablenname bestehen (alle Seiten nutzen ihn), trägt jetzt den hellen Preussischblau-Ton für Markierungen.
   --akzent ist das kräftige Preussischblau für Daten (Lücken-Balken) und Linien. */
:root { --gelb: #DFE6EE !important; --akzent: #1D4E89; --akzent-hell: #8EA6C4; }
body { font-size: 17.5px; }
::selection { background: #DFE6EE; color: var(--ink); }

/* Typografie: halbfett statt extrafett, etwas kleiner, mehr Luft */
.h1 { font-weight: 650 !important; letter-spacing: -.032em !important; line-height: 1.05 !important; font-size: clamp(2.2rem, 1.1rem + 3.6vw, 4.2rem) !important; }
.hero .h1 { max-width: 12.5em; }
.h2 { font-weight: 650 !important; letter-spacing: -.025em !important; font-size: clamp(1.75rem, 1.1rem + 2vw, 2.8rem) !important; line-height: 1.1 !important; }
.h3, .crew b, .checks b, .register b, .karte h3, .karte b.titel, .a-titel, .a-these, .schritte h3, .qa summary, .zahlen .num, .prosa h2, .prosa h3 { font-weight: 650 !important; }
.a-titel { letter-spacing: -.03em !important; }
.lead { color: #3a3a3a; }
.seite-kopf.dunkel .lead, .band.dunkel .lead, .aufruf p, .abschluss .lead { color: rgba(255,255,255,.8); }

/* Formen: leicht gerundet statt Pillen */
.btn { border-radius: 10px !important; font-weight: 600 !important; }
.btn-s { border-radius: 8px !important; }
.chat, .mview, .karte, .checks a, .sheet, .answers li, .chips a, .hinweis, .tool-eingabe, .scan-form, .gate-card, .profile-card, .score-hero, .formular input, .formular select, .formular textarea, .feld-in { border-radius: 12px !important; }
.chat .u, .mstate .u { border-radius: 12px !important; }
.crew img, .pages img, .a-cover img { border-radius: 6px !important; }
.hbars .t, .hbars i { border-radius: 2px !important; }

/* Struktur: feine Linie über jedem Abschnittstitel */
.kopf, .sicht > div:first-child { border-top: 1px solid var(--ink); padding-top: 22px; }
.band.dunkel .kopf, .aufruf .kopf, .dunkel .kopf, .abschluss .kopf { border-top-color: rgba(255,255,255,.35); }

/* Akzent: sauberer Balken im unteren Wortdrittel statt Leuchtstift */
.mk, .js .mk.zieh, .js .mk.zieh.in {
  background: linear-gradient(transparent 62%, #DFE6EE 62%, #DFE6EE 94%, transparent 94%) no-repeat 0 0 / 100% 100% !important;
  padding: 0 .03em !important; margin: 0 !important; border-radius: 0 !important; color: inherit;
}
/* Auf dunklem Grund: feine Unterstreichung in hellem Preussischblau, Text bleibt weiss */
:is(.abschluss, .aufruf, .band.dunkel, .seite-kopf.dunkel, [data-kopf="dunkel"], .tool-dunkel, .foot) .mk,
.js :is(.abschluss, .aufruf, .band.dunkel, .seite-kopf.dunkel, [data-kopf="dunkel"], .tool-dunkel, .foot) .mk.zieh,
.js :is(.abschluss, .aufruf, .band.dunkel, .seite-kopf.dunkel, [data-kopf="dunkel"], .tool-dunkel, .foot) .mk.zieh.in {
  background: linear-gradient(transparent 88%, var(--akzent-hell) 88%, var(--akzent-hell) 96%, transparent 96%) no-repeat 0 0 / 100% 100% !important; color: inherit !important;
}
.foot .wortmarke .mk, .foot .wortmarke span { background: none !important; }
.licht .mk { color: var(--ink) !important; }

/* Randnotizen im Chat: nüchtern statt Handschrift */
.notizen .notiz { font-family: var(--sans) !important; font-style: normal !important; font-size: .82rem !important; font-weight: 600 !important; color: #474747 !important; }
.notizen .notiz span { transform: none !important; }
.notizen .notiz em { font-style: normal !important; font-weight: 700 !important; color: var(--ink) !important; background: linear-gradient(transparent 62%, #DFE6EE 62%, #DFE6EE 94%, transparent 94%) !important; }
.zug { stroke-width: 1.3 !important; stroke: #8a8a8a !important; }

/* Daten: die Lücke in kräftigem Preussischblau */
.hbars li.du i { background: var(--akzent) !important; box-shadow: none !important; }
.hbars li.du b, .answers .nein, .msteps li.on h3 { background: linear-gradient(transparent 62%, #DFE6EE 62%, #DFE6EE 94%, transparent 94%) !important; }
.xls td.n { background: #DFE6EE !important; }

/* Film: weisser Play-Knopf */
.filmframe .film-start span.lbl svg { background: #fff !important; fill: var(--ink) !important; }

/* Fuss: kleinerer Schriftzug */
.foot .wortmarke { font-size: clamp(34px, 5.4vw, 72px) !important; letter-spacing: -.04em !important; font-weight: 650 !important; margin: 44px 0 6px !important; }
.foot nav a:hover { color: var(--akzent-hell) !important; }

/* Links und Fokus */
.tl:hover, .prosa a:hover { background: linear-gradient(transparent 62%, #DFE6EE 62%, #DFE6EE 94%, transparent 94%) !important; }
:focus-visible { outline-color: var(--akzent) !important; }
/* Knöpfe beim Darüberfahren: ruhig in Tinte und Grau, kein Blau */
.btn:hover { background: #333 !important; color: #fff !important; box-shadow: none !important; }
.btn.ghost:hover { background: var(--ink) !important; color: #fff !important; box-shadow: inset 0 0 0 2px var(--ink) !important; }
.btn.hell:hover { background: #E8E8E8 !important; color: var(--ink) !important; }
.btn.hell-ghost:hover { background: #fff !important; color: var(--ink) !important; }
@media (hover: none) { .btn:hover { background: var(--ink) !important; color: #fff !important; } .btn.hell:hover { background: #fff !important; color: var(--ink) !important; } .btn.ghost:hover { background: transparent !important; color: var(--ink) !important; } }
.sticky-cta .btn, .sticky-cta .btn:hover { background: var(--ink) !important; color: #fff !important; }

@media (max-width: 640px) {
  .h1 { font-size: clamp(2rem, 8.4vw, 2.4rem) !important; }
  .h2 { font-size: clamp(1.6rem, 6.6vw, 2rem) !important; }
}

/* Zustände: Fehlermeldungen. Die Befund-Zustände der Tools (fehlt, bestanden, Note) regelt tool.css */
:root { --gelb-2: #1D4E89 !important; }
.scan-error, .gate-error, .en-tool .form-error { background: #EFF3F7 !important; box-shadow: inset 0 0 0 1.5px var(--akzent) !important; color: var(--ink) !important; }
.hinweis.gelb, .s-agb .ziffer:target { background: #EFF3F7 !important; }
.band.gelb { background: #EFF3F7 !important; }

/* Fokus in Feldern: Preussischblau statt gelber Schein */
.formular input:focus, .formular select:focus, .formular textarea:focus, .feld-in:focus, .gate-email:focus, .s-blog .nl-input:focus, .en-tool .field input:focus { box-shadow: 0 0 0 3px rgba(29,78,137,.28) !important; border-color: var(--akzent) !important; }

/* Datenbalken und Datenpunkte der Unterseiten: kräftiges Preussischblau, ohne schwarze Kontur */
.s-demo .bars.luecke .bf.lo, .s-demo .stack .x, .s-gas .quote li.ja i, .s-aeo .klammer, .s-aeo .gruppe::after { background: var(--akzent) !important; box-shadow: none !important; }
.s-treu .station.still .achse i { background: var(--akzent) !important; box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--akzent) !important; }
.s-enshop .cmp-line::after { background: var(--akzent) !important; box-shadow: inset 0 0 0 3px #fff, 0 0 0 1.5px var(--akzent) !important; }
.s-demo .lg .d[style*="--gelb"] { background: var(--akzent) !important; box-shadow: none !important; }
.s-llms .fehler li::before { background: var(--akzent) !important; color: #fff !important; box-shadow: none !important; }

/* Alle Titel im Inhalt halbfett, auch seitenspezifische (Unterseiten setzten bisher 700 bis 800) */
main :is(h1, h2, h3, h4) { font-weight: 650 !important; }
.schritte > li::before, .a-fakten dt, .a-autor .a-autor-name, .score-num, .grade-pill, .pl-score, .checks-h, .check-group-name, .check-group-score, .gate-h { font-weight: 650 !important; }

/* Gemeinsame Feinheiten aus dem Seitenpass 20.10. */
.checks a { border-width: 1px !important; }
.checks a:hover { background: #EFF3F7 !important; border-color: var(--akzent) !important; transform: none !important; }
.register { border-top-width: 1px !important; }
.brand { white-space: nowrap; }
.foot .wortmarke { padding-bottom: .12em; }
/* Berichtsblätter sind seit 25.10.2026 in Variante-C-Farben gesetzt (_bericht/bericht.html, eigener Seitenrand im Bild):
   kein Graustufenfilter mehr, auch nicht aus Seiten-CSS (thanks, methodik), und auf der Service-Seite unverzerrt */
img[src*="/assets26/bilder/report-s"] { filter: none !important; }
@media (min-width: 761px) { .weiter figure img[src*="/assets26/bilder/report-s"] { height: auto; } }
[hidden] { display: none !important; }
.s-kontakt .bogen, .s-team .foto { border-radius: 12px !important; }