/* ═══════════════════════════════════════════════════════════════════════
   NotenFix — Nusser-Theme (Stil nach Entwurf A, Projekt Nusser)
   Gemeinsames Designsystem fuer alle Seiten: Schriften (self-hosted),
   Typografie, Buttons, Karten, Farbdramaturgie, Footer + Bausteine.
   EINBINDEN als letztes Element im <head> (nach dem Seiten-<style>):
     <link rel="stylesheet" href="nusser-theme.css">
   Stand: 29.08.2026 — extrahiert aus index_TESTENTWURF_hero_banner.html
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Schriften: Barlow (Kopf) + Source Sans 3 (Text), lokal gehostet ── */
@font-face {
  font-family: "Barlow"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("fonts/barlow-500.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("fonts/barlow-600.woff2") format("woff2");
}
@font-face {
  font-family: "Barlow"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("fonts/barlow-700.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("fonts/sourcesans3-400.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("fonts/sourcesans3-600.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("fonts/sourcesans3-700.woff2") format("woff2");
}

/* ── Design-Tokens (ueberschreibt die Seiten-Defaults) ── */
:root {
  --font: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-head: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --r-lg: 12px;
  --r-xl: 16px;
  --gruen-nacht: #062A22;
  --gruen-hell: #8ED9B4;
}

/* ── Typografie ── */
h1, h2, h3, h4, .fo-title, .obj-q, .nf-zg h3, .nf-ablauf h3, .hs-title, .follow-title {
  font-family: var(--font-head);
  letter-spacing: -.02em;
}
::selection { background: rgba(0,128,98,.18); }

/* Eyebrows/Kicker: Barlow-Versalien mit weitem Tracking */
.eyebrow, .hero-eyebrow, .about-eyebrow {
  font-family: var(--font-head) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: .15em !important;
  text-transform: uppercase;
}

/* ── Buttons: ein System — 8px-Ecken, Barlow ── */
.btn-dl, .btn-ghost, .follow-btn {
  border-radius: 8px;
  font-family: var(--font-head);
  font-weight: 600;
}
.btn-dl { box-shadow: 0 2px 12px rgba(0,128,98,.28); }
.btn-dl:hover { box-shadow: 0 6px 20px rgba(0,128,98,.35); }
#nf-hdr a.nf-cta { border-radius: 8px; font-family: var(--font-head); }
#nf-hdr .nf-link, #nf-hdr .nf-btn { font-family: var(--font-head); font-weight: 600; }
#nf-hdr .nf-drop { border-radius: 10px; }
#nf-hdr .nf-drop a { font-family: var(--font-head); border-radius: 6px; }

/* ── Sektions-Rhythmus ── */
.section-head { margin-bottom: 52px; }
.section-head p { font-size: 16.5px; }

/* ── Karten: einheitlicher Hover ── */
.fo-card, .obj-card {
  transition: border-color 190ms ease, box-shadow 190ms ease, transform 190ms ease;
}
.fo-card:hover, .obj-card:hover {
  border-color: #c6d3cc;
  box-shadow: 0 10px 30px rgba(0,101,78,.10);
  transform: translateY(-2px);
}

/* ── Fokus & Zahlen ── */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Farbdramaturgie: dunkle Flaechen im tiefen Gruen ── */
.story, .beta-band, .final-cta, .follow { background: var(--gruen-nacht); }
.story { background: radial-gradient(ellipse 90% 70% at 50% 0%, #0A3A2E 0%, #062A22 70%); }
.final-cta { background: linear-gradient(180deg, #083127 0%, #062A22 100%); }
/* Kopfbereich der Unterseiten: tiefes Gruen mit weichem Lichteinfall
   (.hero gilt nur auf Seiten MIT Theme-Link — die Startseite hat ihr eigenes CSS) */
.page-hero, .hero { background: radial-gradient(ellipse 90% 80% at 50% 0%, #0B3D30 0%, #062A22 75%); }
.page-hero::before, .hero::before { display: none; }
/* Textfarben im Kopf IMMER hell erzwingen — Seiten mit urspruenglich hellem
   Kopf (Blog, Danke, Konto, 404 …) definieren sonst dunklen Text auf Gruen */
.page-hero h1, .hero h1, .page-hero h2, .hero h2 { color: #fff; }
.page-hero h1 em, .hero h1 em { color: var(--accent-l, #00b58a); }
.page-hero p, .hero p, .page-hero .lede, .hero .lede { color: #D8E6DF; }
.page-hero .eyebrow, .hero .eyebrow, .page-hero .hero-eyebrow, .hero .hero-eyebrow { color: var(--gruen-hell) !important; }
.page-hero a:not(.btn-dl):not(.btn-ghost), .hero a:not(.btn-dl):not(.btn-ghost) { color: var(--gruen-hell); }
/* weitere dunkle Sektionen der Unterseiten ins Gruen-System
   (section.steps gezielt — die kleine helle .steps-Infobox auf danke.html
   darf NICHT dunkel werden) */
.schulformen, section.steps, .overview, .co-top { background: var(--gruen-nacht); }

/* ── Footer: eine Stufe dunkler als die Schluss-Sektion, mit feiner
   hellgruener Trennkante — klare Abgrenzung zum Inhalt darueber ── */
footer {
  background: #041F19;
  border-top: 1px solid rgba(142,217,180,.22);
  padding: 72px 0 32px;
}
footer .footer-brand img { filter: brightness(0) invert(1); opacity: .95; }
/* zweifarbige helle Wortmarke (weisses "Noten", gruenes "Fix"): kein Filter */
footer .footer-brand img.nf-logo-hell { filter: none; opacity: 1; }
footer .footer-brand p { color: #A9C7BA; }
footer .footer-col h3 {
  font-family: var(--font-head);
  font-size: 12px;
  color: #fff;
  letter-spacing: .13em;
  margin-bottom: 18px;
}
footer .footer-col a { color: #9FBBAF; padding: 5px 0; }
footer .footer-col a:hover { color: var(--gruen-hell); }
footer .footer-bottom { border-top-color: rgba(255,255,255,.14); color: #7FA294; padding-top: 26px; }

/* ═══ BAUSTEINE (auf jeder Seite verwendbar) ═══ */

/* Bild-Karte (Nusser-Stil): .nf-zg in .nf-zg-grid (3er) oder .nf-zg-grid-4 */
.nf-zg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 24px; }
.nf-zg {
  background: var(--white, #fff);
  border: 1px solid var(--border-s, #e5e5ea);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--t-primary, #1d1d1f);
  transition: border-color 190ms ease, box-shadow 190ms ease, transform 190ms ease;
}
.nf-zg:hover {
  color: var(--t-primary, #1d1d1f);
  border-color: #c6d3cc;
  box-shadow: 0 10px 30px rgba(0,101,78,.10);
  transform: translateY(-2px);
}
.nf-zg .nf-zg-bild { aspect-ratio: 16/10; overflow: hidden; background: var(--gray, #f5f5f7); border-bottom: 1px solid var(--border-s, #e5e5ea); }
.nf-zg .nf-zg-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.nf-zg:hover .nf-zg-bild img { transform: scale(1.04); }
.nf-zg .nf-zg-inhalt { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; text-align: left; }
.nf-zg h3 { font-size: 19px; font-weight: 700; margin: 0 0 10px; }
.nf-zg .nf-zg-text { color: var(--t-secondary, #6e6e73); font-size: 14.5px; line-height: 1.5; margin: 0 0 18px; }
.nf-zg ul { list-style: none; margin: 0 0 22px; padding: 0; font-size: 14px; color: var(--t-secondary, #6e6e73); }
.nf-zg li { position: relative; padding-left: 24px; margin-bottom: 8px; }
.nf-zg li::before {
  content: "";
  position: absolute; left: 0; top: 8px;
  width: 11px; height: 7px;
  border-left: 2px solid var(--accent, #008062);
  border-bottom: 2px solid var(--accent, #008062);
  transform: rotate(-45deg);
}
.nf-zg .nf-zg-mehr {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--accent-h, #00654e);
  font-size: 14.5px; font-weight: 600;
  transition: gap .2s ease;
}
.nf-zg:hover .nf-zg-mehr { gap: 13px; }
.nf-zg-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
.nf-zg-grid-4 .nf-zg .nf-zg-bild { aspect-ratio: 16/8; }
.nf-zg-grid-4 .nf-zg .nf-zg-inhalt { padding: 14px 16px 16px; }
.nf-zg-grid-4 .nf-zg h3 { font-size: 15px; margin-bottom: 6px; }
.nf-zg-grid-4 .nf-zg .nf-zg-text { font-size: 12.5px; line-height: 1.45; margin-bottom: 12px; }
.nf-zg-grid-4 .nf-zg .nf-zg-mehr { font-size: 12.5px; }
.nf-zg-grid-4 .nf-zg ul { font-size: 12.5px; margin-bottom: 14px; }
.nf-zg-grid-4 .nf-zg li { padding-left: 20px; margin-bottom: 6px; }
.nf-zg-grid-4 .nf-zg li::before { top: 7px; width: 10px; height: 6px; }
@media (max-width: 900px) { .nf-zg-grid { grid-template-columns: 1fr; } }
@media (max-width: 1023px) { .nf-zg-grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .nf-zg-grid-4 { grid-template-columns: 1fr; } }

/* Flaches Kartenbild oben in einer Text-Karte */
.nf-fo-bild {
  border-radius: var(--r-md, 12px);
  overflow: hidden;
  aspect-ratio: 16/7;
  margin-bottom: 14px;
  background: var(--gray-2, #e8e8ed);
}
.nf-fo-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Icon-Feld (Linien-Icon in hellgruenem Quadrat) */
.nf-obj-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  background: rgba(0,128,98,.1);
  color: var(--accent-h, #00654e);
  margin-bottom: 14px;
}
.nf-obj-icon svg { display: block; }

/* Ablauf-Schritte (gruene Oberkante, Kicker, Dauerzeile) */
.nf-ablauf { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; text-align: left; }
.nf-ablauf li { padding-top: 22px; border-top: 3px solid var(--accent, #008062); }
.nf-ablauf .nf-ablauf-bild { border-radius: var(--r-md, 12px); overflow: hidden; aspect-ratio: 16/9; margin-bottom: 16px; background: var(--gray, #f5f5f7); }
.nf-ablauf .nf-ablauf-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nf-ablauf .nf-ablauf-nr {
  display: block;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-h, #00654e);
  margin-bottom: 10px;
}
.nf-ablauf h3 { font-size: 17.5px; font-weight: 700; margin: 0 0 9px; }
.nf-ablauf p { font-size: 14.5px; color: var(--t-secondary, #6e6e73); line-height: 1.55; margin: 0 0 16px; }
.nf-ablauf .nf-ablauf-dauer {
  display: block;
  font-size: 13px; font-weight: 600;
  color: var(--accent-h, #00654e);
  border-top: 1px solid var(--border-s, #e5e5ea);
  padding-top: 10px;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 800px) { .nf-ablauf { grid-template-columns: 1fr; gap: 24px; } }

/* Kennzahlenband (dunkelgruen, 4 Spalten, zentriert) */
.nf-kennzahlen { background: var(--accent-h, #00654e); color: #fff; }
.nf-kennzahlen .container {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 44px; padding-top: 54px; padding-bottom: 54px;
  text-align: center;
}
.nf-kennzahlen b {
  display: block;
  font-family: var(--font-head);
  font-size: 42px; font-weight: 700; line-height: 1;
  letter-spacing: -.04em; margin-bottom: 9px;
  font-variant-numeric: tabular-nums;
}
.nf-kennzahlen b em { font-style: normal; font-size: 20px; color: var(--gruen-hell); margin-left: 3px; }
.nf-kennzahlen span { font-size: 13.5px; color: #A9C7BA; }
@media (max-width: 860px) { .nf-kennzahlen .container { grid-template-columns: 1fr 1fr; gap: 32px; } }

/* Generische Sektion fuer Theme-Bausteine */
.nf-sektion { padding: 96px 0; background: var(--white, #fff); }
.nf-sektion--getoent { background: var(--gray, #f5f5f7); }
@media (max-width: 600px) { .nf-sektion { padding: 64px 0; } }

/* KI-Kennzeichnungszeile unter Bild-Sektionen */
.nf-ki-hinweis { font-size: 12px; color: var(--t-tertiary, #707075); text-align: center; margin: 14px 0 0; }

/* Reduzierte Bewegung: Hover-Bewegungen abschalten */
@media (prefers-reduced-motion: reduce) {
  .fo-card:hover, .obj-card:hover, .nf-zg:hover { transform: none; }
  .nf-zg:hover .nf-zg-bild img { transform: none; }
}
