/* ============================================================
   Design 5 – "Klartext, gerundet" (auf Grundlage von Design 4)
   Grundidee: Die Haltung von "Klartext" bleibt vollständig erhalten –
   viel Weißraum, große lesbare Schrift, institutionelles Blau, ein
   einziges kräftiges Warngelb, und vor allem die kräftige schwarze
   2px-Kontur als tragendes Gestaltungsmittel. Geändert ist nur die
   Geometrie: die Ecken sind gerundet und jeder umrandete Block trägt
   zusätzlich einen weichen, sehr zurückhaltenden Schatten. Dazu
   Source Sans Pro statt der Systemschrift.

   ABGRENZUNG ZU DESIGN 3: Design 3 hat die Konturen zusätzlich
   aufgehellt (--line #dfe3e7 statt Schwarz) und die Schriftgewichte
   zurückgenommen (600 statt 800) – es wirkt dadurch deutlich leiser.
   Design 5 behält die schwarze Umrandung und die fette Typografie und
   rundet nur ab. Wer die beiden nebeneinander stellt, sieht denselben
   Unterschied wie zwischen einer gerahmten Tafel und einer Karteikarte.

   Wird NACH style.css geladen und überschreibt gezielt.
   ============================================================ */

/* ---- Source Sans Pro (lokal gehostet – kein Google-CDN, DSGVO-konform,
   wie bereits bei Instrument Sans/Serif im Basis-Stylesheet) ----
   SIL Open Font License 1.1, Adobe – erlaubt Selbst-Hosten und
   Weitergabe ausdrücklich, Lizenztext in assets/fonts/OFL.txt.
   Dieselben drei Dateien, die Design 3 schon einbindet; doppelt
   deklariert schadet nicht, der Browser lädt sie nur einmal, und so
   bleibt jede Design-Datei für sich allein lauffähig. */
@font-face {
  font-family: "Source Sans Pro"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/source-sans-pro-latin-400-normal.woff2") format("woff2"),
       url("/assets/fonts/source-sans-pro-latin-400-normal.woff") format("woff");
}
@font-face {
  font-family: "Source Sans Pro"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/assets/fonts/source-sans-pro-latin-600-normal.woff2") format("woff2"),
       url("/assets/fonts/source-sans-pro-latin-600-normal.woff") format("woff");
}
@font-face {
  font-family: "Source Sans Pro"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/assets/fonts/source-sans-pro-latin-700-normal.woff2") format("woff2"),
       url("/assets/fonts/source-sans-pro-latin-700-normal.woff") format("woff");
}

:root {
  /* Farbwelt unverändert aus Design 4 übernommen */
  --green-900: #060606;
  --green-800: #111111;
  --green-700: #0a5ca8;   /* Institutionelles Blau statt Markengrün */
  --green-600: #0a5ca8;
  --green-100: #eaf2fa;
  --green-050: #f2f2f0;

  --accent:      #ffcc00;   /* Warngelb – sparsam als einziges Signal */
  --accent-dark: #d9ad00;

  --ink:      #111111;
  --ink-soft: #454545;
  --muted:    #6a6a6a;
  --line:     #cccccc;
  --bg:       #ffffff;
  --bg-soft:  #f2f2f0;

  /* HIER liegt der Unterschied zu Design 4 (dort durchgehend 0 / none) */
  --radius: 12px;
  --radius-sm: 8px;
  /* Bewusst schwach: Der Schatten soll die schwarze Kontur begleiten,
     nicht mit ihr konkurrieren. Neutral abgetönt (Schwarz statt des
     grünstichigen Schattens aus style.css), weil Design 4/5 keine
     Markengrün-Anteile mehr führt. */
  --shadow:    0 2px 6px rgba(17, 17, 17, .10);
  --shadow-lg: 0 6px 18px rgba(17, 17, 17, .14);

  --font-sans: "Source Sans Pro", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;

  /* Hover/Fokus klickbarer Karten – 6,8:1 auf weissem Grund */
  --brand: #0a5ca8;
}

body { background: var(--bg); color: var(--ink); font-family: var(--font-sans); }
a { color: var(--green-700); text-decoration: underline; }
/* Der allgemeine Hover-Farbwechsel darf Knopfbeschriftungen NICHT anfassen.
   Ein Knopf traegt seine Schriftfarbe passend zu seiner Flaeche; faerbt die
   allgemeine Regel sie um, steht die Beschriftung ploetzlich in der Hoverfarbe
   auf der Hoverflaeche - im Zweifel unsichtbar. Genau das war in der dunklen
   Fassung bei "Kontakt aufnehmen" der Fall (1,49:1) und in der hellen bei
   "Tarif berechnen" (1,00:1), nachdem dessen Flaeche in Paket 164 geaendert
   wurde. Ab Paket 164 nimmt die Regel Knoepfe ausdruecklich aus. */
a:not(.btn):not(.mainnav__cta):hover { color: #073f73; }

/* Überschriften: Design 4 setzt 800. Source Sans Pro liegt lokal nur in
   400/600/700 vor – bei 800 würde der Browser aus dem 700er-Schnitt eine
   künstliche Fettung rechnen, die ausgefranst wirkt. Deshalb bewusst 700,
   der schwerste tatsächlich vorhandene Schnitt. Der optische Unterschied
   ist minimal, die Kantenschärfe deutlich besser. */
h1, h2, h3, h4 { font-family: var(--font-sans); font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 4.6vw, 3.2rem); }
.module-tile h3, .hero__card h2, .card__body h3, .infobox h2 { font-family: var(--font-sans); font-weight: 700; }

/* Vier Stellen im Basis-Stylesheet setzen eine Serifenschrift (Instrument
   Serif) mit hoeherer Spezifitaet als die h1–h4-Regel eine Zeile darueber und
   bleiben deshalb davon unberuehrt. In Design 4 faellt das bis heute auf:
   Die Abschnittsueberschrift "Alles aus einer Hand" und der Topbar-Slogan
   stehen dort in einer Serifenschrift, waehrend der Rest der Seite serifenlos
   ist – zwei Schriftfamilien ohne erkennbare Absicht. Da "Klartext" gerade
   die eine klare Schrift zum Programm hat, wird das hier mitgezogen.
   Falls Design 4 dauerhaft uebernommen wird, gehoert derselbe Block auch
   dorthin. */
.topbar__slogan,
.section__head h2,
.page-hero h1,
.faq-cat > h2 { font-family: var(--font-sans); font-weight: 700; }

.topbar { background: var(--green-800); color: #fff; border-bottom: 3px solid var(--accent); }
.topbar__slogan { font-weight: 700; color: #fff; }
.topbar__links a { color: #fff; text-decoration: none; }
/* Die globale Hover-Regel weiter oben faerbt auch hier - auf dunklem Grund
   waere das unlesbar (gemessen 1,77:1). Deshalb ausdruecklich hell halten;
   die doppelte Klasse hebt die Spezifitaet ueber die globale Regel. */
.topbar .topbar__links a:hover { color: #fff; text-decoration: underline; }
.topbar .topbar__links a.topbar__stoerung:hover { color: #2a1c05; }
/* Dasselbe im Fussband (Impressum, Datenschutz, Barrierefreiheit): dort
   gemessene 1,90:1. */
.footer .footer__legal-nav a:hover,
.footer__legal .footer__legal-nav a:hover { color: #fff; }
.topbar__stoerung { background: var(--accent); color: #111 !important; border-radius: 999px; font-weight: 700; }

.site-header { background: var(--bg); border-bottom: 2px solid var(--ink); }
/* Die Layoutklasse .logo__img steht seit Paket 154 im Basis-Stylesheet, weil
   beide Farbfassungen dasselbe Logo zeigen. Bewusst ohne border-radius: Die
   Rundungen dieses Entwurfs gelten für Flächen und Rahmen, nicht für
   Bildmarken – ein angeschnittenes Logo wäre ein Eingriff ins Zeichen selbst,
   keine Layoutentscheidung. */
.mainnav__link { color: var(--ink); font-weight: 600; }
/* In der hellen Fassung war der Knopf sichtbar, wechselte beim Ueberfahren
   aber vom Blau ins Schwarz (--green-800 ist hier #111111) - ein Farbwechsel,
   kein Zustandswechsel. Jetzt ein dunkleres Blau derselben Familie, 10,7:1
   gegen die weisse Kopfleiste. */
.mainnav__cta:hover { background: #073f73; color: #fff; }
.mega { background: #fff; border: 2px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow-lg); }

/* Buttons: gerundet, hoher Kontrast, weiterhin keine Verläufe */
.btn { border-radius: var(--radius-sm); border-width: 2px; font-weight: 700; text-transform: none; padding: 13px 26px; }
.btn--accent { background: var(--accent); color: #111; border-color: #111; box-shadow: var(--shadow); }
.btn--accent:hover { background: var(--accent-dark); border-color: #111; }
.btn--ghost { background: #fff; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--bg-soft); }
.btn--primary { background: var(--green-700); border-color: var(--green-700); box-shadow: var(--shadow); }
.btn--primary:hover { background: #073f73; border-color: #073f73; }

/* Hero: flächig, ein dicker gelber Balken als einzige Geste */
.hero {
  background: var(--bg);
  color: var(--ink);
  padding: 64px 0 56px;
  border-bottom: 2px solid var(--ink);
}
/* Hero-Slider (Paket 156)
   Design 4 hatte den bildflaechigen Hero bewusst abgeschaltet, Design 5 hatte
   das geerbt - der auf der Startseite gepflegte Slider war dadurch unsichtbar.
   Die Bildflaechen kommen zurueck; der Schleier darueber traegt jetzt das
   institutionelle Blau statt des frueheren Markengruens.

   Deckung des Schleiers: Selbst bei einem sehr hellen Foto und der niedrigsten
   ueblichen Deckung (--hero-overlay: .85) kommt weisse Schrift auf 4,9:1 und
   liegt damit ueber der Vorgabe. Wer die Deckung im Backoffice deutlich
   herabsetzt, unterschreitet sie - das ist der Preis dafuer, dass der Wert
   pflegbar ist. */
.hero__bg {
  /* Rueckfall fuer Folien ohne Bild – vorher Markengruen */
  background: linear-gradient(135deg, var(--green-700), #073f73);
}
.hero__bg--image::after {
  /* Deckung seit Paket 158 aus der Einstellung "Bild-Deckung hell" */
  background: linear-gradient(120deg,
              rgba(10, 92, 168, var(--hero-overlay-hell, .85)),
              rgba(7, 63, 115, var(--hero-overlay-hell, .85)));
}

/* Helle Schrift NUR, wenn tatsaechlich Bildflaechen im Hero stehen.
   Ohne gepflegte Folien fehlt .hero__bgs im Markup - dann bleibt der weisse
   Hero mit dunkler Schrift. Eine pauschale Regel wuerde dort weisse Schrift
   auf weissen Grund setzen. Deshalb der Geschwisterselektor. */
.hero__bgs ~ .hero__grid h1,
.hero__bgs ~ .hero__grid .lead,
.hero__bgs ~ .hero__grid p.lead { color: #fff; }
.hero__bgs ~ .hero__grid .hero__dot { border-color: rgba(255,255,255,.7); }
.hero__bgs ~ .hero__grid .hero__dot.is-active { background: #fff; border-color: #fff; }
.hero__bgs ~ .hero__grid .btn--ghost { background: transparent; color: #fff; border-color: #fff; }
.hero__bgs ~ .hero__grid .btn--ghost:hover { background: rgba(255,255,255,.16); }
.hero h1 { color: var(--ink); padding-bottom: 20px; position: relative; }
/* Auch der Signalbalken bekommt weiche Enden – sonst wäre er die einzige
   scharfe 90°-Kante auf der ganzen Seite und würde als Fehler gelesen. */
.hero h1::after { content: ""; position: absolute; left: 0; bottom: 0; width: 120px; height: 6px; background: var(--accent); border-radius: 3px; }
.hero p.lead { color: var(--ink-soft); font-size: 1.15rem; max-width: 60ch; }
.hero__card {
  background: var(--bg-soft) !important;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.hero__card h2 { color: var(--ink); font-size: 1.05rem; text-transform: uppercase; letter-spacing: .03em; }
.hero__card .quick a { background: #fff; color: var(--ink); border: 2px solid var(--line); border-radius: var(--radius-sm); font-weight: 700; }
.hero__card .quick a:hover { border-color: var(--ink); box-shadow: var(--shadow); }

/* Modul-Kacheln: umrandete Blöcke wie in Design 4, nur mit runden Ecken */
.module-tile { background: var(--bg-soft) !important; color: var(--ink); border: 2px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); }
.module-tile h3 { color: var(--ink); font-size: 1.5rem; }
.module-tile p, .module-tile__text, .module-tile__text p { color: var(--ink-soft) !important; }
.module-tile .btn--accent { background: var(--accent); color: #111; border-color: #111; }

.section--soft { background: var(--bg-soft); }
.section__head .eyebrow { color: var(--green-700); font-weight: 700; }
.section__head h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); }

/* Karten: Design 4 fährt beim Überfahren einen harten 4px-Versatzschatten
   aus. Zu einer gerundeten Form passt das nicht – hier stattdessen ein
   leichtes Anheben mit etwas mehr Schatten. Die Bewegung ist klein genug,
   um bei "prefers-reduced-motion" nicht zu stören; abgeschaltet wird sie
   weiter unten trotzdem. */
.card {
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
/* Bildkante innen mitrunden, sonst schaut das Motiv über die Ecke hinaus */
.card__media { background: var(--bg-soft); border-top-left-radius: calc(var(--radius) - 2px); border-top-right-radius: calc(var(--radius) - 2px); overflow: hidden; }
.card__date { color: var(--muted); font-weight: 700; }

.infobox { background: #fff; border: 2px solid var(--ink); border-radius: var(--radius); box-shadow: var(--shadow); }
.infobox h2 { font-size: 1.3rem; }
.opening th { color: var(--ink); font-weight: 700; }
.opening th, .opening td { border-bottom: 1px solid var(--line); }

footer, .site-footer { background: var(--green-800) !important; border-top: 3px solid var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .card:hover { transform: none; }
}