/* ============================================================
   Design 2 – "Netzleitstelle"
   Grundidee: Nicht Marketing-Freundlichkeit, sondern die eigentliche
   Arbeit eines Netzbetreibers – die Leitwarte, aus der heraus ein
   Verteilnetz überwacht wird. Dunkle Bedienoberfläche, Monospace-
   Beschriftungen wie an einem Messgerät, zwei Signalfarben (Bernstein
   = Aktion, Grün = Status "in Ordnung") statt einer einzelnen
   Neonfarbe. 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. Lizenztext in assets/fonts/OFL.txt.
   Ergänzt in Paket 152; dieselben drei Dateien, die Design 3 und 5 schon
   einbinden. Doppelt deklariert schadet nicht – der Browser lädt sie nur
   einmal, und jede Design-Datei bleibt für sich allein lauffähig.

   ZUR ABGRENZUNG: Ersetzt wird nur die Fließtextschrift (--font-sans).
   Die Monospace-Beschriftungen (--font-mono) an Überschriften, Knöpfen,
   Statuszeile und Datumsangaben bleiben bewusst erhalten – sie sind die
   eigentliche Idee dieses Entwurfs ("Beschriftung wie an einem
   Messgerät"). Würde man sie mit ersetzen, bliebe von "Netzleitstelle"
   nur noch eine dunkle Seite übrig. */
@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 {
  --green-900: #081513;
  --green-800: #0d1917;
  --green-700: #16302b;
  --green-600: #1d3d36;
  --green-100: #1a332e;
  --green-050: #16302b;

  --accent:      #ffb400;   /* Bernstein – Aktion/CTA */
  --accent-dark: #d99600;
  --nl-status:   #3ddc97;   /* Status-Grün – "läuft" */
  --nl-warn:     #ff6b5e;

  --ink:      #eaf3ef;
  --ink-soft: #a9c0ba;
  --muted:    #7f9791;
  --line:     #22423c;
  /* Fehlertexte: #c62828 aus der Basis erreicht auf diesem Grund nur 3,2:1.
     Dieser Ton misst 7,9:1. (Paket 183) */
  --fehler:   #ff8a80;
  /* Auf dem dunklen Grund (#0d1917) braucht das Gruen umgekehrt viel
     HELLIGKEIT - das --ok der hellen Fassung waere dort unlesbar. */
  --ok:       #6ee7a0;
  --bg:       #0d1917;
  --bg-soft:  #122421;

  --radius: 4px;
  --radius-sm: 3px;
  --shadow: 0 2px 18px rgba(0,0,0,.35);
  --shadow-lg: 0 12px 34px rgba(0,0,0,.5);
  --font-sans: "Source Sans Pro", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", Consolas, monospace;

  /* Hover/Fokus klickbarer Karten. Bewusst das Status-Gruen und nicht
     --green-700: Letzteres ist in dieser Fassung eine Flaechenfarbe und waere
     auf der Karte nicht zu sehen. */
  --brand: #3ddc97;
}

body { background: var(--bg); color: var(--ink); }
a { color: var(--nl-status); }
/* 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: #6ee8b3; }

h1, h2, h3, h4 {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink);
  font-weight: 700;
}
.module-tile h3, .card__body h3, .hero__card h2 { font-family: var(--font-mono); font-weight: 700; }

/* Zwei Stellen im Basis-Stylesheet setzen eine Serifenschrift mit hoeherer
   Spezifitaet als die h1-h4-Regel darueber und blieben davon unberuehrt:
   .page-hero h1 (Kopf jeder Unterseite) und .faq-cat > h2. In einer Leitwarte
   hat eine Serifenschrift nichts verloren - beide werden mitgezogen.
   (.topbar__slogan und .section__head h2 sind weiter unten bereits gesetzt.) */
.page-hero h1, .faq-cat > h2 { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }

/* Topbar wie eine Statuszeile */
.topbar { background: #081513; color: var(--ink-soft); border-bottom: 1px solid var(--line); }
.topbar__slogan { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; color: var(--nl-status); }
.topbar__slogan::before { content: "● "; }
.topbar__links a { color: var(--ink-soft); }
.topbar__links a:hover { color: var(--ink); }
.topbar__stoerung { background: var(--nl-warn); color: #2a0a05 !important; border-radius: var(--radius-sm); }
.topbar__stoerung:hover { background: #ff8a80; }

.site-header { background: var(--green-800); border-bottom: 1px solid var(--line); }
.mainnav__link { color: var(--ink); }
/* "Tarif berechnen" (ab Paket 164) im Bernstein dieses Entwurfs statt im
   Flaechengruen. Vorher: Flaeche 1,28:1 gegen die Kopfleiste, beim Ueberfahren
   1,00:1 - der Knopf war dann unsichtbar. Jetzt 10,1:1 bzw. 7,1:1, und die
   Rueckmeldung geht in die richtige Richtung. Bernstein ist zugleich die
   Logik, die dieser Entwurf ohnehin fuehrt ("Bernstein = Aktion"); .btn--accent
   macht es an anderer Stelle genau so. */
.mainnav__cta { background: var(--accent); color: #241802; }
.mainnav__cta:hover { background: var(--accent-dark); color: #241802; }
.mega { background: var(--green-700); border: 1px solid var(--line); }
/* Die Spaltenüberschriften im Aufklappmenü standen in var(--green-800) - im
   Basis-Stylesheet ein dunkles Blau auf weissem Grund, in dieser Fassung aber
   fast dasselbe Schwarzgrün wie die Panelfläche darunter. Gemessen 1,28:1;
   die Überschriften waren praktisch unsichtbar. Der Trennstrich darunter
   (--green-100) verschwand aus demselben Grund. Kein neuer Fehler, aber einer,
   der beim Umbau des Menüs in Paket 175 sichtbar wurde. */
.mega__title { color: var(--ink); border-bottom-color: var(--line); }
a.mega__title:hover { color: var(--nl-status); border-bottom-color: var(--nl-status); }
.logo__l1, .logo__l2 { color: var(--ink); }
/* Die Layoutklasse .logo__img steht seit Paket 154 im Basis-Stylesheet. */

/* Buttons: rechteckig, technische Anmutung */
.btn { border-radius: var(--radius-sm); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .03em; font-size: .84rem; }
.btn--accent { background: var(--accent); color: #241802; border-color: var(--accent); }
.btn--accent:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
/* Schriftfarbe ausdruecklich mitgesetzt: Ohne sie greift die allgemeine
   Hover-Regel und die Beschriftung verschwindet (gemessen 1,06:1). */
.btn--ghost:hover { background: var(--green-700); border-color: var(--nl-status); color: var(--ink); }
.btn--primary { background: var(--nl-status); color: #06231a; border-color: var(--nl-status); }
/* Das Basis-Stylesheet setzt hier weisse Schrift - passend zu SEINER dunklen
   Flaeche, nicht zu diesem hellen Gruen. Ohne diese Zeile stand "Kontakt
   aufnehmen" beim Ueberfahren auf 1,49:1. Jetzt 11,7:1. */
.btn--primary:hover { background: #6ee8b3; border-color: #6ee8b3; color: #06231a; }

/* Hero: Leitstand-Panel mit ziehendem Scan-Balken (Signaturelement) */
.hero {
  background: var(--bg);
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,180,0,.06) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, rgba(255,180,0,.06) 0 1px, transparent 1px 64px);
  pointer-events: none;
}
.hero::after {
  content: "";
  position: absolute; left: 0; right: 0; height: 2px; top: -2px;
  background: linear-gradient(90deg, transparent, var(--nl-status), transparent);
  animation: nl-scan 7s linear infinite;
  opacity: .8;
}
@media (prefers-reduced-motion: reduce) { .hero::after { animation: none; opacity: 0; } }
@keyframes nl-scan { 0% { top: -2px; } 100% { top: 100%; } }
/* Hero-Slider (Paket 156)
   Vorher stand hier die Kurzschreibweise `background: var(--bg) !important`.
   Sie setzt nicht nur die Farbe, sondern auch background-image auf none - und
   weil !important im Stylesheet die nicht-wichtige Inline-Angabe schlaegt, hat
   sie das im Markup gesetzte Hintergrundbild jeder Folie geloescht. Der Slider
   lief, war aber unsichtbar. Jetzt wird nur noch die Farbe gesetzt, und zwar
   ohne !important, damit das Bild stehen bleibt. */
.hero__bg { background-color: var(--bg); }
/* Deckung seit Paket 158 aus der Einstellung "Bild-Deckung dunkel".
   Der zweite Farbstopp lag vorher fest 0,1 unter dem ersten; das bleibt so,
   nur relativ zum eingestellten Wert. */
.hero__bg--image::after {
  background: linear-gradient(120deg,
              rgba(8, 21, 19, var(--hero-overlay-dunkel, .9)),
              rgba(13, 25, 23, calc(var(--hero-overlay-dunkel, .9) - .1))) !important;
}
.hero__bgs ~ .hero__grid .hero__dot { border-color: rgba(234,243,239,.7); }
.hero__bgs ~ .hero__grid .hero__dot.is-active { background: var(--nl-status); border-color: var(--nl-status); }
.hero h1 { color: var(--ink); font-size: clamp(1.9rem, 4vw, 3rem); }
.hero p.lead { color: var(--ink-soft); font-family: var(--font-sans); text-transform: none; letter-spacing: normal; }
.hero__card {
  background: var(--green-700) !important;
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
}
.hero__card h2 { color: var(--accent); font-size: 1rem; }
.hero__card .quick a { background: var(--green-800); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: .88rem; }
.hero__card .quick a:hover { border-color: var(--nl-status); color: var(--nl-status); }

/* Modul-Kacheln: Panel-Look mit Bernstein-Oberkante statt Farbverlauf */
.module-tile { background: var(--green-700) !important; border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: var(--radius); box-shadow: none; }
.module-tile p, .module-tile__text, .module-tile__text p { color: var(--ink-soft) !important; }

/* Aktuelles-Karten */
.section--soft { background: var(--bg-soft); }
.section__head .eyebrow { color: var(--nl-status); font-family: var(--font-mono); }
.section__head h2 { font-family: var(--font-mono); text-transform: uppercase; }
.card { background: var(--green-700); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; }

/* FAQ-Akkordeon: Flaeche folgt dem Thema (Paket 182).
   Zuvor stand hier die feste weisse Flaeche aus der Basis-CSS, waehrend die
   Schriftfarbe aus dem dunklen Thema kam - die Fragen massen 1,13:1. */
.accordion { background: var(--green-700); border-color: var(--line); }
/* --green-050 ist in dieser Fassung dieselbe Farbe wie --green-700; als
   Hoverflaeche waere sie nicht zu erkennen. Deshalb eine eigene Stufe. */
.accordion__trigger:hover { background: #1d3d37; }

/* Blockkopf zugeklappt (Paket 217). In der hellen Fassung ein Pastellgelb;
   hier waere dasselbe Pastell eine leuchtende Insel im dunklen Grund – genau
   der Fehler, den Paket 190 beim Umzugsservice eingesammelt hat. Genommen
   ist derselbe Farbton in dunkel: gedaempftes Oliv-Amber. Die Schrift bleibt
   die Markenfarbe der dunklen Fassung, 7,11:1 darauf. */
.accordion--block .accordion__trigger[aria-expanded="false"] {
  background: #3b3316;
  box-shadow: inset 4px 0 0 #8a7734;
}
.accordion--block .accordion__trigger[aria-expanded="false"]:hover {
  background: #473e1b;
}
.card:hover { box-shadow: 0 8px 24px rgba(0,0,0,.4); border-color: var(--nl-status); }
.card__media { background: var(--green-800); }
.card__date { color: var(--nl-status); font-family: var(--font-mono); }
.card__body p { color: var(--ink-soft); }

.infobox { background: var(--green-700); border: 1px solid var(--line); border-radius: var(--radius); }
.infobox h2 { font-size: 1.1rem; }
.opening th { color: var(--ink); }
.opening th, .opening td { border-bottom: 1px solid var(--line); color: var(--ink-soft); }

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