/* ==========================================================================
   Skin „Normform" — Ingenieurs-Sachlichkeit
   Graphit-Petrol auf Papierweiß · 8px-Raster · IBM Plex Sans + Plex Mono (//-Kicker)
   + Atkinson-Ziffern · Signal-Grün nur für „geprüft"-Häkchen. Instrument-ruhig.
   (Kontrast-Fix: Ocker-CTA #9A5E12 → AA mit Weiß; --muted #50646A → AA.)
   ========================================================================== */

@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/atkinson-400.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/atkinson-700.woff2") format("woff2"); }

:root {
	--bg:          #F5F7F8;
	--bg-2:        #ECF1F2;
	--surface:     #FFFFFF;
	--surface-2:   #E6EDEE;
	--line:        #D5DEE0;
	--line-strong: #BFCCCF;
	--ink:         #0F2A30;
	--text:        #1C353B;
	--muted:       #50646A;
	--blue:        #0F5E6B;   /* Primär = Graphit-Petrol (Überschriften, Links, Keylines) */
	--blue-deep:   #0A444E;
	--blue-700:    #0A444E;   /* Footer-Akzentband */
	--blue-soft:   #E2EEF0;
	--amber:       #9A5E12;   /* Ocker = NUR Anruf-/Festpreis-CTA (AA mit Weiß) */
	--amber-deep:  #834E0E;
	--amber-soft:  rgba(154,94,18,.12);
	--success:     #2E7D5B;   /* nur Verifikations-Häkchen */
	--ondark:      #8FB9C2;   /* helles Petrol für Icons/Hover auf dunklen Flächen */
	--warn:        #B23B3B;
	--warn-soft:   rgba(178,59,59,.08);
	--shadow:      0 1px 2px rgba(15,42,48,.05);
	--shadow-lg:   0 6px 18px rgba(15,42,48,.10);
	--num:         "Atkinson Hyperlegible", var(--sans);
}

a[href^="tel:"], .stat__num, .factbar__val { font-family: var(--num); font-variant-numeric: tabular-nums lining-nums; }

/* Hero: feines 8px-Ingenieursraster (~4 %) statt Glow/Dotgrid. */
.hero::before {
	background-image:
		linear-gradient(rgba(15,94,107,.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(15,94,107,.045) 1px, transparent 1px);
	background-size: 8px 8px;
	opacity: 1;
}
/* Editoriale Petrol-Kante an der Start-/Leistungs-H1 (Werkstoff-Anleihe). */
.hero:not(.hero--split) .hero__title { border-left: 3px solid var(--blue); padding-left: 20px; }

/* //-Kicker bleiben Plex Mono (Instrument-Label) – aus der Basis übernommen. */

/* CTA = Ocker, klar, ohne Halo. */
.btn--accent { background: var(--amber); color: #fff; box-shadow: none; border-radius: 6px; }
.btn--accent:hover { background: var(--amber-deep); color: #fff; box-shadow: none; }
.actionbar__call { background: var(--amber); color: #fff; }

/* 112-Band: helle Sicherheitsfläche mit Ocker-Keyline, 112 in Petrol – kein Rot. */
.notice--warn { background: var(--blue-soft); border: 1px solid #CFE0E3; border-left: 4px solid var(--amber); color: var(--text); box-shadow: none; }
.notice--warn h3 { color: var(--ink); }
.notice--warn p { color: var(--text); }
.notice--warn strong { color: var(--blue-deep); }
.notice--warn a:not(.btn) { color: var(--blue-deep); }

/* Triage: Störungs-Schnellauswahl als helles Steuerpult. */
.triage { background: var(--bg-2); border: 1px solid var(--line); color: var(--ink); box-shadow: none; }
.triage::before { display: none; }
.triage__kicker { color: var(--blue); }
.triage__title { color: var(--ink); }
.triage__tile { background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.triage__tile:hover { border-color: var(--blue); border-bottom: 3px solid var(--blue); background: var(--surface); }
.triage__icon { background: #fff; color: var(--blue); border: 1px solid var(--line); border-radius: 8px; }
.triage__sym { color: var(--ink); }
.triage__desc { color: var(--muted); }

/* Kennzahlen-Band hell. */
.section--dark { background: var(--bg-2); color: var(--text); }
.section--dark::after { display: none; }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--ink); }
.section--dark a { color: var(--blue); }
.section--dark .section__kicker { color: var(--blue); }
.section--dark .stat__num { color: var(--blue); }
.section--dark .stat__label { color: var(--muted); }

/* Prefooter hell. */
.prefooter { background: var(--bg-2); }
.prefooter::before { display: none; }
.prefooter__kicker { color: var(--blue); }
.prefooter__title { color: var(--ink); }
.prefooter__text { color: var(--text); }
.prefooter .btn--ghost { color: var(--ink); border-color: var(--line-strong); }
.prefooter .btn--ghost:hover { background: var(--blue-soft); border-color: var(--blue); color: var(--blue-deep); }

/* Footer: dunkles Petrol mit dünner Ocker-Oberkante. */
.site-footer { border-top: 3px solid var(--amber); }

/* Karten als „Specimen-Sheet": Haarlinie, Petrol-Tab beim Hover, kein Schatten. */
.card { box-shadow: none; border-radius: 8px; }
.card:hover { box-shadow: var(--shadow-lg); border-top: 2px solid var(--blue); }
