/* ==========================================================================
   ReZuKi Website — gemeinsames Stylesheet
   CI v2 (14.05.2026). Alle Farben, Schriften und Abstaende zentral.
   Self-hosted Fonts, keine externen Ressourcen (DSGVO).
   ========================================================================== */

/* ---------- Schriften (self-hosted, WOFF2) ---------- */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/poppins-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/poppins-500.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibmplexserif-italic.woff2') format('woff2');
}
/* Echter Kursivschnitt Poppins 400 (OFL, Latin-Subset), lokal gehostet.
   Seit 13.10.2026 fuer die Tagline (CI-Entscheidung, wie Variante 5). */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/poppins-400italic.woff2') format('woff2');
}

/* ---------- Design-Tokens ---------- */
:root {
  /* Markenfarben (direkt aus dem Logo, CI v2) */
  --gruen:      #6C8538;   /* Resilienz  */
  --blau:       #024B89;   /* Zukunft    */
  --blau-dark:  #013a6b;   /* Hover/Tiefe, aus Blau abgeleitet */
  --silber-a:   #A7A8AA;
  --silber-b:   #D6D6D8;
  --silber:     #C0C1C3;   /* Mitte, nur als Flaeche/Akzent, nie als Text auf hell */
  /* B4 (WCAG 2.2, SC 1.4.11, praeventiv): Silber traegt nie Bedienelemente,
     Fokusindikatoren, bedeutungstragende Icons oder Text. Kein Wert des
     Silberbandes erreicht gegen die hellen Flaechen der Seite 3:1.
     Silber ist Flaeche, Verlauf und Ruhe. */
  --offwhite:   #F6F4EE;
  --anthrazit:  #1B1F23;

  /* --flaeche-silber: am 09.09.2026 von Nils verworfen. Silber als Vollfläche
     einer Sektion setzt zu hart ein und macht die Seite unruhig, in beiden
     geprüften Werten (#C0C1C3 und #CBCCCE). Gliederung erfolgt stattdessen
     über `.panel--silber`, also um den Text herum.
     --silber, --silber-a und --silber-b bleiben unverändert für Linien,
     Kanten und Balken. */
  /* --flaeche-gruen: am 09.09.2026 von Nils verworfen. Ganzflächiges Grün wirkt
     zu dominant, Weiß darauf liest sich trotz 5,39:1 schlecht, und die Kante
     Grün auf Blau vor der CTA ist zu hart. Grün bleibt Akzentfarbe für
     Primärbutton und Ziffernkreise. Token bleibt unbelegt stehen, falls eine
     helle Tönung später geprüft wird. */

  /* abgeleitete Rollen */
  --text:       #1B1F23;
  --text-mute:  #3a4046;
  --line:       rgba(27, 31, 35, 0.10);
  --card-bg:    #ffffff;

  /* Schrift-Stacks */
  --sans:  'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --serif: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;

  /* C7, Schriftgroessen-Skala.
     Vorher standen 20 Groessen als Einzelwerte im Stylesheet, davon acht
     zwischen 12,5 und 15,2 px. Diese Haeufung ist zusammengefasst, die
     Abweichung liegt bei hoechstens 0,5 px und ist nicht sichtbar.
     Zusammengefasst wurden: 0,78 und 0,80 zu --fs-xs, 0,84 und 0,85 zu
     --fs-sm, 0,90 / 0,92 / 0,94 / 0,95 zu --fs-md, 1,15 und 1,18 zu --fs-xl.
     Die Kontaktzeile lag bei 1,30 und laeuft jetzt auf --fs-2xl (1,25).
     Ausserhalb der Skala bleiben bewusst drei dekorative Zeichen:
     das Plus im FAQ, die Initiale im Portraet-Platzhalter und der
     Button-Pfeil. Sie sind Grafik, keine Schrift. */
  --fs-xs:    0.8rem;     /* 12,8 px  Eyebrow, Meta-Mono, Footer-Spaltentitel */
  --fs-sm:    0.85rem;    /* 13,6 px  Meta-Leiste, Footer-Kleintext */
  --fs-md:    0.925rem;   /* 14,8 px  Navigation, Footer-Text, Quellen, Hinweise */
  --fs-base:  1rem;       /* 16 px    Fliesstext, Buttons */
  --fs-lg:    1.05rem;    /* 16,8 px  FAQ-Frage */
  --fs-xl:    1.18rem;    /* 18,9 px  Lead, Zwischentitel in Rechtstexten */
  --fs-2xl:   1.25rem;    /* 20 px    h3, Kontaktzeile */
  --fs-3xl:   1.4rem;     /* 22,4 px  Zitat (derzeit ungenutzt) */

  /* Mitlaufende Groessen. Vier Stueck, jede mit eigener Aufgabe:
     h1 und h2 tragen die Seitenhierarchie, die Tagline steht als Serif-Zeile
     im Hero, die Namensleiste faellt auf schmalen Geraeten weiter ab als die
     Tagline und behaelt deshalb ihren eigenen Startwert. */
  --fs-h1:    clamp(2.1rem, 5vw, 3.4rem);
  --fs-h2:    clamp(1.6rem, 3.2vw, 2.25rem);
  /* C6: h3 lag fest auf 20 px und stand damit auf schmalen Bildschirmen dicht
     an der h2 (dort 25,6 px). Jetzt läuft die Stufe mit: 20 px auf dem Handy,
     22 px ab rund 630 px Fensterbreite (Variante B, Sichtprüfung 09.09.2026).
     Fest auf 24 px wäre die Abstufung zur h2 auf Mobil auf Faktor 1,07
     gefallen und damit nicht mehr lesbar als Hierarchie; 24 px auf dem
     Desktop stand zu dicht an der Sektionsüberschrift. Die Kontaktzeile
     behält --fs-2xl, sie ist keine Überschrift und soll nicht mitwachsen. */
  --fs-h3:    clamp(1.25rem, 1.2vw + 0.9rem, 1.375rem);
  --fs-tagline:  clamp(1.15rem, 2.2vw, 1.5rem);
  --fs-namensleiste: clamp(1.05rem, 2.4vw, 1.5rem);

  /* Abstaende (8px-Basis) */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 48px;
  --sp-6: 64px;
  --sp-7: 96px;

  --wrap:  1120px;
  --wrap-narrow: 760px;
  --radius: 12px;
  --radius-sm: 8px;
}

/* ---------- Reset / Basis ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; }

body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--fs-base);
  line-height: 1.65;
  color: var(--text);
  background: var(--offwhite);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--blau); text-decoration: none; }
a:hover { text-decoration: underline; }

/* B1 (WCAG 2.2, SC 1.4.1, Level A): Links im Fliesstext sind dauerhaft
   unterstrichen. Farbe allein traegt die Unterscheidung nicht, Blau gegen
   Anthrazit ergibt nur 1,87:1, verlangt sind 3:1.
   Bewusst NICHT unterstrichen: Navigation, Buttons, Footer und die
   Kachel-Verweise der Karten. Dort tragen Position und Form die
   Erkennbarkeit. Der Geltungsbereich ist deshalb auf Absaetze und
   Listen innerhalb von main begrenzt. */
main p a:not(.btn),
main li a:not(.btn),
main dd a:not(.btn) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}
.section--blau p a:not(.btn),
.section--blau li a:not(.btn),
.section--anthrazit p a:not(.btn),
.section--anthrazit li a:not(.btn) { color: #fff; }

/* B2 (WCAG 2.2, SC 2.4.7 und 1.4.11): zweifarbiger Fokusindikator nach
   W3C-Technik C40. Eine Einzelfarbe kann gegen fuenf Flaechenfarben nicht
   funktionieren, Blau auf Blau ergibt 1,00:1. Weisser Innenring und
   anthrazitfarbener Aussenring erreichen auf jedem Grund der Palette
   mindestens 4,16:1. Beide Farben stehen bereits in der Palette,
   es kommt keine neue hinzu. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
summary:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--anthrazit);
  border-radius: 3px;
}

/* Sprungziel unter der klebenden Kopfleiste freistellen (A6) */
#main { scroll-margin-top: 120px; }

/* Skip-Link */
.skip {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--blau);
  color: #fff;
  padding: 10px 16px;
  z-index: 100;
  border-radius: 0 0 6px 0;
}
.skip:focus { left: 0; }

/* ---------- Layout-Helfer ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}
.wrap-narrow { max-width: var(--wrap-narrow); }

.section { padding: var(--sp-7) 0; }
.section--tight { padding: var(--sp-6) 0; }

.section--blau {
  background: var(--blau);
  color: #fff;
}
.section--anthrazit {
  background: var(--anthrazit);
  color: rgba(246, 244, 238, 0.92);
}

/* C1: Die beiden hellen Flaechenfarben. Sie standen bisher als Inline-Style
   auf 24 Sektionen verteilt. Der Wechsel Weiss / Off-White traegt den
   Sektionsrhythmus der Seite und wird jetzt hier gesteuert, nicht in den
   Seiten. Weiss ist gegen Off-White nur 1,10:1, deshalb fassen Linien oben
   und unten die weisse Flaeche ein. Ohne sie waere der Wechsel unsichtbar. */
.section--weiss {
  background: #fff;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.section--offwhite { background: var(--offwhite); }

/* C3: Silberfläche als Vollfläche, am 09.09.2026 von Nils verworfen, auch in
   der helleren Fassung #CBCCCE. Sie setzt zu hart ein und macht die Seite
   unruhig. Ersetzt durch `.panel--silber`, die Gliederung liegt jetzt um den
   Text statt unter der ganzen Sektion. Regel und Token entfernt. */

/* Modifikator fuer die letzte helle Sektion vor einer dunklen Flaeche: Die
   untere Linie waere dort wirkungslos, weil die Farbkante schon trennt. */
.section--offen-unten { border-bottom: none; }

/* ---------- Typografie ---------- */
h1, h2, h3 {
  font-weight: 500;
  letter-spacing: -0.02em;
  /* Zeilenabstand rund 20 % größer, damit Unterlängen wie g nicht an die
     Folgezeile stoßen. h2/h3 1,26, h1 1,30 (Freigabe Nils, 30.10.2026). */
  line-height: 1.26;
  margin: 0 0 var(--sp-3);
}
h1 { font-size: var(--fs-h1); letter-spacing: -0.03em; line-height: 1.30; }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.01em; margin-bottom: var(--sp-2); }

/* C6: Zeilenlaenge auch fuer Ueberschriften. Fliesstext liegt seit jeher bei
   62ch, Ueberschriften liefen ueber die volle Spaltenbreite von 1072 px. Bei
   Headline-Groesse ergab das Zeilen von ueber 60 Zeichen, waehrend der Absatz
   darunter bei 62 Zeichen umbricht: die Ueberschrift zog optisch weiter nach
   rechts als ihr eigener Text.
   Die Werte sind gegen die laengsten tatsaechlich vorhandenen Ueberschriften
   gerechnet und so gewaehlt, dass keine davon eine zusaetzliche Zeile
   bekommt. h2 faellt von 1072 auf 680 px, h3 von bis zu 658 auf 480 px.
   Die h1 bleibt bewusst unbegrenzt: sie steht im Hero, und jede zusaetzliche
   Zeile dort kostet rund 69 px oberhalb der Faltlinie. Solange F3 nicht im
   Browser gemessen ist, wird der Hero nicht enger gestellt.
   text-wrap: balance verteilt die Zeilen gleichmaessig, statt eine lange und
   eine kurze zu erzeugen. Es aendert die Zeilenzahl nicht. Browser ohne
   Unterstuetzung ignorieren die Angabe, das Layout bleibt in beiden Faellen
   gueltig. */
h2 { max-width: 34ch; }
h3 { max-width: 36ch; }
h1, h2, h3 { text-wrap: balance; }

/* Ausnahme Rechtstexte: die Zwischentitel dort sind Gliederungsmarken, keine
   Aussagesaetze. "Verbraucherstreitbeilegung / Universalschlichtungsstelle"
   steht heute in einer Zeile und soll das bleiben. */
.legal h2, .legal h3 { max-width: none; }

/* In zentrierten Sektionen muss die begrenzte Box selbst mittig stehen,
   sonst zentriert text-align nur innerhalb einer links klebenden Box.
   Gilt gleichermassen fuer die Absaetze, die ueber die p-Regel auf 62ch
   laufen. */
.center h1, .center h2, .center h3,
.center p, .center .lead {
  margin-left: auto;
  margin-right: auto;
}

p { margin: 0 0 var(--sp-2); max-width: 62ch; }
.lead { font-size: var(--fs-xl); max-width: 46ch; color: var(--text); }
.section--blau .lead, .section--anthrazit .lead { color: rgba(255,255,255,0.92); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-xs);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blau);
  margin: 0 0 var(--sp-2);
  font-weight: 500;
}
.section--blau .eyebrow { color: #bcd0e6; }
.eyebrow::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--gruen);
  flex: none;
}
.section--blau .eyebrow::before { background: #9fbf5e; }

/* Namensleiste im Hero: die drei Woerter gleichwertig nebeneinander,
   darueber je ein Strich in der Farbe der zugehoerigen Saeule.
   Loest die frueher hier stehende grosse Eyebrow-Zeile ab, die als
   Versalzeile auf Headline-Groesse mit der H1 konkurriert hat.
   Die Farbwerte sind Aufhellungen fuer dunklen Grund, die CI-Basiswerte
   #6C8538 und #024B89 sind auf dem Hero-Blau nicht lesbar. */
.hero-namensleiste {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 40px);
  max-width: 640px;
  margin: 0 0 var(--sp-6);
}
.hero-namensleiste div {
  border-top: 3px solid;
  padding-top: 12px;
  font-size: var(--fs-namensleiste);
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #ffffff;
}
.hero-namensleiste .b-re { border-color: #9fbf5e; }
.hero-namensleiste .b-zu { border-color: #5BA4E8; }
.hero-namensleiste .b-ki { border-color: var(--silber-a); }

/* Serif kursiv ausschliesslich fuer die Tagline im Hero und fuer belegte
   Zitate mit genannter Quelle (.quote). Keine Leistungs- oder Werbeaussagen
   kursiv setzen: Poppins hat keinen echten Kursivschnitt, der Browser
   errechnet ihn (Faux Italic). .quote ist derzeit ungenutzt und reserviert. */
.tagline, .quote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}
/* 13.10.2026, CI-Entscheidung: Tagline in Poppins kursiv (echter Schnitt,
   siehe @font-face oben) statt IBM Plex Serif. .quote bleibt Serif. */
.tagline { font-family: var(--sans); letter-spacing: -0.01em; }
.tagline { font-size: var(--fs-tagline); line-height: 1.35; max-width: 40ch; }
.quote  { font-size: var(--fs-3xl); line-height: 1.4; }

.meta {
  font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
}

/* Gedaempfter Fliesstext, z. B. Erlaeuterungen unter einer Kontaktangabe. */
.text-mute { color: var(--text-mute); }

/* Quellenangabe unter einem Zitat oder einer Zahl. Klein und gedaempft,
   damit sie den Absatz belegt, ohne ihn zu ueberlagern. */
.quelle {
  font-size: var(--fs-md);
  color: var(--text-mute);
  max-width: 64ch;
  margin-top: var(--sp-2);
}

/* ---------- Buttons / CTA ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: var(--fs-base);
  line-height: 1;
  padding: 15px 26px;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  text-decoration: none;
}
.btn:hover { text-decoration: none; }

/* B3 (WCAG 2.2, SC 1.4.3): Weiss auf Resi-Gruen #6C8538 ergibt 4,16:1 und
   verfehlt die 4,5:1 fuer Fliesstextgroesse. Der Buttontext ist 16 px in
   Gewicht 500, die Grosstext-Ausnahme greift nicht. Grundfarbe ist deshalb
   der bereits vorhandene Wert #5B722F (5,39:1). Der Hover-Zustand dunkelt
   ueber eine Anthrazit-Auflage ab, damit keine neue Farbe entsteht. */
.btn--primary { background: #5B722F; color: #fff; }
.btn--primary:hover {
  background-image: linear-gradient(rgba(27, 31, 35, 0.14), rgba(27, 31, 35, 0.14));
}

/* Kontakt-Button im Header: CI-Blau statt Gruen, Kontrast 8,9:1 */
.nav .btn--primary { background: var(--blau); color: #fff; }
.nav .btn--primary:hover { background: var(--blau-dark); }

.btn--on-blau { background: #fff; color: var(--blau); }
.btn--on-blau:hover { background: var(--offwhite); }

.btn--ghost { background: transparent; color: var(--blau); border-color: var(--blau); }
.btn--ghost:hover { background: var(--blau); color: #fff; }
.section--blau .btn--ghost { color: #fff; border-color: rgba(255,255,255,0.6); }
.section--blau .btn--ghost:hover { background: #fff; color: var(--blau); }

.btn--arrow::after { content: "\2192"; font-size: 1.05em; }

/* ---------- Header / Navigation ---------- */
.site-header {
  background: #fff;   /* 13.10.2026: Kopf weiss, darunter Flaechen im Wechsel */
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 50;
}
/* A1: Kopfleiste auf die Inhaltsbreite 1120 ziehen. Vorher 1280, dadurch
   standen Logo und H1 auf jedem Bildschirm ab 1280 px um 80 px versetzt. */
.site-header .wrap {
  max-width: var(--wrap);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding-top: 16px;
  padding-bottom: 16px;
}
/* 13.10.2026, CI-Entscheidung (Variante 6): Kopf einzeilig, Logo 59 px hoch.
   Logo (143 px) und Menue (rund 1005 px) passen nicht in die Inhaltsbreite
   1120, die Kopfzeile laeuft deshalb bis 1240 px. Logo steht damit nicht
   buendig ueber der Inhaltskante. Unter 1240 px Menue-Button. */
.site-header .wrap { max-width: 1240px; padding-top: 22px; padding-bottom: 22px; }
.brand { display: inline-flex; align-items: center; flex: none; }
.brand img { width: auto; height: 59px; }

/* Navigation bleibt einzeilig: kein Umbruch innerhalb eines Eintrags, kein
   Umbruch der Leiste. Reicht der Platz nicht, klappt sie unter 1200px
   vollstaendig in den Menue-Button. Die Schriftgroesse bleibt dabei fest,
   eine mitlaufende Groesse hat den Kopf unruhig wirken lassen. */
.nav { display: flex; align-items: center; flex-wrap: nowrap; gap: 16px; }
.nav a {
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: 400;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
/* Die gruene Unterkante kennzeichnet Textlinks, nicht den Kontakt-Button.
   Auf dem gefuellten Button lag sie als 2 px hohe Linie unter der gerundeten
   Ecke und las sich als gruener Schatten. Buttons sind deshalb ausgenommen,
   ihren Zustand tragen Flaeche und Fokusring. */
.nav a:not(.btn):hover { text-decoration: none; border-bottom-color: var(--gruen); }
.nav a:not(.btn)[aria-current="page"] { border-bottom-color: var(--gruen); font-weight: 500; }
.nav .btn { padding: 11px 20px; border-bottom-color: transparent; }
/* Aktive Seite beim Kontakt-Button: dunklere Flaeche statt Unterkante. */
.nav .btn--primary[aria-current="page"] { background: var(--blau-dark); }

/* Mobile-Navigation via Checkbox-Hack (kein JS, tastaturbedienbar) */
.nav-toggle { display: none; }
.nav-check {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.nav-check:focus-visible + .nav-toggle {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--anthrazit);
  border-radius: 3px;
}

/* ---------- Hero ---------- */
.hero { padding: var(--sp-7) 0; }
.hero .lead { margin-bottom: var(--sp-4); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.hero .tagline { margin: 0 0 var(--sp-4); color: #dfe8f2; }

/* 13.10.2026: Hero der Startseite auf Off-White (Flaechenwechsel unter dem
   weissen Kopf). Namensleiste mit den CI-Basiswerten. */
.hero--hell { background: var(--offwhite); color: var(--text); }
.hero--hell .tagline { color: var(--text-mute); }
.hero--hell .hero-namensleiste div { color: var(--text); }
.hero--hell .hero-namensleiste .b-re { border-color: var(--gruen); }
.hero--hell .hero-namensleiste .b-zu { border-color: var(--blau); }
.hero--hell .hero-namensleiste .b-ki { border-color: var(--silber-a); }
.hero--hell .hero-hinweis { color: var(--text-mute); }
/* Hauptbutton auf hellem Grund: Weiss auf #024B89, 8,9:1. */
.btn--blau { background: var(--blau); color: #fff; }
.btn--blau:hover { background: var(--blau-dark); }

/* Nachsatz unter den Hero-Buttons, z. B. der geplante Marktstart. Steht
   leiser als der Lead, bleibt auf dem Hero-Blau aber ueber 4,5:1. */
.hero-hinweis {
  margin-top: var(--sp-4);
  font-size: var(--fs-md);
  color: #bcd0e6;
}

/* ---------- Karten / Grids ---------- */
.grid { display: grid; gap: var(--sp-3); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

.card {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-4);
}
/* Balken links, Farbregel siehe .note weiter unten. Karten im Raster tragen
   ausnahmslos Gruen, sie sind Zusage oder Erlaeuterung, nie Abgrenzung. */
.card--accent { border-left: 3px solid var(--gruen); }
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }
.card ul { margin: 0; padding-left: 1.15em; }
.card li { margin-bottom: 10px; }
.card li:last-child { margin-bottom: 0; }

/* Team-Portraits: kreisrunder Zuschnitt blendet den Eckrahmen aus */
.team-photo {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
  display: block;
  margin: 0 0 var(--sp-3);
  background: var(--silber-b);
  filter: grayscale(100%);
}
/* A3, erledigt am 09.09.2026: Die drei Porträts stammen aus verschiedenen
   Shootings. Katrin stand ursprünglich vor hellem Grund, Nils und Simona vor
   dunklem, der Unterschied war im Team-Block sichtbar.
   Getestet und am 08.09.2026 von Nils verworfen: ein weicher Auslauf des
   Kreisrandes per radial-gradient-Maske (Kern 58, 65 und 72 Prozent). Der
   Übergang von dunklem Studiogrund nach heller Karte las sich in jeder
   Stufe als Ring um den Kopf.
   Umgesetzte Lösung: Nils lieferte eine Fassung vor schwarzem Grund
   (katrin-portrait-schwarz.png). Daraus entstand katrin-264-dunkel.jpg,
   eingebunden auf ueber-rezuki, kundenbereich und beraterinnen. Keine Maske,
   keine Retusche im CSS. */
/* A2: Der Platzhalter erbt filter: grayscale(100%) von .team-photo und
   erschien dadurch grau statt Royal-Blau. Gewicht 500 statt 600, weil
   Poppins 600 nicht geladen ist und der Browser sonst einen synthetischen
   Fettschnitt erzeugt. */
.team-photo--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blau);
  color: #fff;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 2.1rem;  /* Initiale, dekoratives Zeichen, ausserhalb der Skala */
  letter-spacing: 0.02em;
  filter: none;
}

.section--blau .card,
.section--anthrazit .card {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.92);
}

/* nummerierte Schritte */
.steps { counter-reset: step; list-style: none; padding: 0; margin: 0; }
.steps > li {
  position: relative;
  padding-left: 62px;
  margin: 0 0 var(--sp-4);
  min-height: 44px;
}
.steps > li::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  left: 0; top: 0;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  /* B3: Ziffer ist 16 px, weiss auf #6C8538 ergibt nur 4,16:1.
     #5B722F erreicht 5,39:1. Das Motiv bleibt gruen. */
  background: #5B722F;
  color: #fff;
  font-weight: 500;
  border-radius: 50%;
}
.steps h3 { margin: 6px 0 6px; }

/* Zwei-Wege-Verteiler */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.split .card { display: flex; flex-direction: column; }
.split .card .btn { margin-top: auto; align-self: flex-start; }

/* Info-/Hinweisbox.
   Farbregel fuer alle Balken links (Karten, Notizen, Panels):
   GRUEN  = Zusage an den Leser und Erlaeuterung, der Grundton.
   BLAU   = Abgrenzung, also die Aussage, was ReZuKi nicht ist. Nur dafuer.
   SILBER = neutrale Randnotiz ohne Signalwert.
   Die .note trug bis v20 einen blauen Balken und stand damit im Widerspruch
   zum .panel--blau: dieselbe Farbe hiess an zwei Bauteilen Verschiedenes,
   hier Statushinweis, dort Abgrenzung. Balken jetzt neutral in Silber,
   damit Blau eindeutig bleibt. */
.note {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--silber-a);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  color: var(--text-mute);
}
/* Wie bei .card und .panel: der letzte Absatz laesst keinen Rest am Boden. */
.note p:last-child { margin-bottom: 0; }

/* ---------- FAQ (details/summary, kein JS) ---------- */
.faq { max-width: 74ch; margin-top: var(--sp-4); }
.faq details {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  margin: 0 0 var(--sp-2);
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 22px;
  font-weight: 500;
  font-size: var(--fs-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-2);
}
.faq summary::-webkit-details-marker { display: none; }
/* Dekoratives Zeichen, bewusst ausserhalb der Schriftskala. */
.faq summary::after {
  content: "+";
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--gruen);
  flex: none;
}
.faq details[open] summary::after { content: "\2013"; }
.faq details > div { padding: 0 22px 20px; color: var(--text-mute); }
.faq details > div p:last-child { margin-bottom: 0; }

/* ---------- Definitionsliste / Ablauf-Stationen ---------- */
.stations { list-style: none; padding: 0; margin: var(--sp-5) 0 0; max-width: 74ch; }
.stations > li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: var(--sp-3);
  padding: 0 0 var(--sp-4);
  position: relative;
}
.stations > li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 21px; top: 44px; bottom: 0;
  width: 2px;
  background: var(--line);
}
.station-num {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--blau);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 500;
  z-index: 1;
}
.stations h3 { margin: 6px 0 6px; }

/* Hinweis-Panel, staerker als .note (fuer Vertraulichkeit/Freiwilligkeit).
   Farbregel siehe .note: Gruen ist Zusage und Erlaeuterung und damit der
   Standardwert, .panel--blau ist ausschliesslich Abgrenzung. */
.panel {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--gruen);
  border-radius: var(--radius);
  padding: var(--sp-4);
  margin-top: var(--sp-4);
}
.panel--blau { border-left-color: var(--blau); }
/* C3, Stand 09.09.2026: Silber ist neutral, ohne Signalwert. Die Box gliedert
   dort nur, sie sagt nichts zu und grenzt nichts ab. Balkenfarbe --silber-a
   wie bei .note. Das hellere --silber erreicht gegen Weiß nur 1,76:1 und
   verschwindet als 4-px-Balken nahezu. */
.panel--silber { border-left-color: var(--silber-a); }
.panel h3 { margin-top: 0; }
.panel p:last-child { margin-bottom: 0; }

/* C6, Stand 09.09.2026: Standardbreite fuer einspaltige Panels.
   Ein kurzer Absatz bleibt durch p { max-width: 62ch } bei rund 560 px stehen,
   die Box lief aber ueber die volle Breite und blieb rechts halb leer. Die
   Breite folgt deshalb dem Textkoerper: 62ch plus Polsterung und Raender.
   Verbindlich ueberall dort, wo bewusst kein .panel-body verwendet wird.
   Nils, 09.09.2026: 62ch gilt fuer alle einspaltigen Boxen, auch fuer gesetzte
   Kernaussagen. Die engere Zusatzklasse mit 52ch ist deshalb entfallen. */
.panel--schmal { max-width: calc(62ch + 2 * var(--sp-4) + 6px); }

/* Panel-Fliesstext zweispaltig, Anmutung aufgeschlagene Seite (Variante 3) */
.panel .panel-body {
  columns: 2;
  column-gap: var(--sp-5);
  column-rule: 1px solid var(--line);
}
.panel .panel-body p { max-width: none; }
.panel .panel-body p:last-child { margin-bottom: 0; }
/* Spaltenumbruch von Hand. Ohne ihn setzt der Browser die Spalten auf gleiche
   Höhe und trennt dabei einen Absatz mitten im Satz. Der Absatz mit dieser
   Klasse schließt die linke Spalte ab, der nächste beginnt oben rechts.
   Wirkt nur im zweispaltigen Satz, unterhalb von 900 px ohne Folge. */
.panel .panel-body .spaltenende { break-after: column; }
/* C6: Der zweispaltige Satz brach bisher erst bei 720 px um. Zwischen 720 und
   900 px war jede Spalte nur noch rund 300 px breit, der Absatz darin lief
   auf etwa zwei Zeilen je Spalte. Zwei Zeilen sind keine Spalte, sondern ein
   Bruchstueck. Der Umbruch liegt deshalb jetzt bei 900 px, derselben Stelle,
   an der auch die Karten einspaltig werden. */
@media (max-width: 900px) {
  .panel .panel-body { columns: 1; column-rule: none; }
  /* 13.10.2026: Der Spaltenumbruch wirkte auch im einspaltigen Satz und
     schob den Rest des Kastens als zweite Spalte rechts aus dem Bild
     (ueber-rezuki, 390 px: 264 px Ueberlauf). */
  .panel .panel-body .spaltenende { break-after: auto; }
}

/* Seiten-Intro (schmaler Hero fuer Unterseiten) */
.page-hero { padding: var(--sp-6) 0 var(--sp-5); }
.page-hero .lead { max-width: 58ch; }

/* Kontaktzeile */
.contact-line {
  font-size: var(--fs-2xl);
  font-weight: 500;
  margin: var(--sp-3) 0;
}

/* Rechtstexte: viele kurze Abschnitte, daher kleinere Zwischentitel als h2
   global. Ersetzt die frueher noetigen Inline-Styles auf jedem Titel. */
.legal h2 {
  font-size: var(--fs-xl);
  color: var(--blau);
  margin: var(--sp-5) 0 var(--sp-2);
}
.legal h2:first-of-type { margin-top: var(--sp-4); }
.legal ul { max-width: 62ch; margin: 0 0 var(--sp-2); padding-left: 1.15em; }
.legal li { margin: 0 0 6px; }
.legal .card p { margin: 0 0 4px; }
.legal .card p:last-child { margin-bottom: 0; }

/* ---------- Footer ---------- */
.site-footer {
  flex: none;
  background: var(--anthrazit);
  color: rgba(246, 244, 238, 0.80);
  font-size: var(--fs-md);
  padding: var(--sp-6) 0 var(--sp-4);
  margin-top: auto;
}
.site-footer a { color: rgba(246, 244, 238, 0.92); }
.site-footer a:hover { color: #fff; }
.footer-top {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
/* C1: Das Symbol liegt als einfarbige SVG in Anthrazit vor. Auf dem dunklen
   Footer wird es ueber den Filter in Weiss umgekehrt. Die Regel stand vorher
   als Inline-Style auf jeder der zehn Seiten mit vollem Footer. */
.footer-brand img {
  width: 38px;
  height: auto;
  margin-bottom: var(--sp-2);
  filter: brightness(0) invert(1);
}
.footer-brand p { color: rgba(246,244,238,0.66); max-width: 32ch; }
.footer-col h4 {
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(246,244,238,0.55);
  font-weight: 500;
  margin: 0 0 var(--sp-2);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin: 0 0 8px; }

.footer-crisis {
  padding: var(--sp-3) 0 0;
  color: rgba(246,244,238,0.62);
  font-size: var(--fs-sm);
  max-width: 78ch;
}
.footer-crisis strong { color: rgba(246,244,238,0.85); font-weight: 500; }

/* A6: Rechtszeile lag bei 22,4 px Klickhoehe, Soll 24 px (SC 2.5.8) */
.footer-bottom a { display: inline-block; padding: 3px 0; }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--sp-3);
  margin-top: var(--sp-3);
  border-top: 1px solid rgba(255,255,255,0.12);
  color: rgba(246,244,238,0.62);
  font-size: var(--fs-sm);
}
/* C1: Der Rechtstraeger DenkSinn GmbH steht in der Rechtszeile heller als der
   umgebende Link, damit die handelnde Person erkennbar bleibt. Stand vorher
   als Inline-Style auf allen elf Seiten. */
.footer-bottom a strong { color: #fff; font-weight: 500; }

/* Auf der 404-Seite traegt der Footer nur die Rechtszeile. Ohne den Block
   darueber braucht sie keine Trennlinie und keinen Abstand nach oben. */
.footer-bottom--solo {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

/* ---------- Utilities ---------- */
.center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.lead + .hero-actions { margin-top: var(--sp-4); }

/* C1, Zeilenlaenge. Fliesstext liegt ueber die Regel fuer p bereits bei 62ch,
   dafuer braucht es keine Klasse. Diese Stufen decken die Abweichungen:
   .mw-60 und .mw-64 fuer Lead-Absaetze und laengere Erklaertexte, .mw-70 fuer
   Schrittlisten, die ueber die Ziffernspalte nach rechts wandern.
   Die Werte sind unveraendert aus den bisherigen Inline-Styles uebernommen.
   .mw-52 am 09.09.2026 entfernt: Die Breite einspaltiger Panels regelt seither
   .panel--schmal, damit Box und Text dieselbe Zeilenlaenge halten. */
.mw-60 { max-width: 60ch; }
.mw-62 { max-width: 62ch; }   /* nur noetig, wo .lead die 46ch zurueckdreht */
.mw-64 { max-width: 64ch; }
/* Blocksatz-Test (Seite fuer Unternehmen, Abschnitt Gefaehrdungsbeurteilung) */
.blocksatz { text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.mw-70 { max-width: 70ch; }

/* C1, Abstand nach oben und unten in Schritten der 8px-Basis. Ersetzt 25
   einzelne margin-Angaben in den Seiten. */
.mt-3 { margin-top: var(--sp-3); }
.mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); }
.mt-6 { margin-top: var(--sp-6); }
.mb-4 { margin-bottom: var(--sp-4); }
/* A6: .mt-0 und .stack entfernt, beide wurden auf keiner Seite verwendet.
   .section--anthrazit bleibt bewusst stehen: es ist die vierte in der CI
   vorgesehene Flaechenfarbe und wird fuer den Sektionsrhythmus gebraucht. */

/* ---------- Responsive ---------- */
/* C6: Zwischenstufe im Kartenraster.
   Bisher sprang .grid-3 bei 900 px von drei Spalten auf eine. Beide Seiten
   des Sprungs waren ungeeignet: knapp oberhalb blieben je Karte rund 204 px
   Textbreite, also etwa 33 Zeichen je Zeile und dreizeilige Ueberschriften.
   Knapp unterhalb lief eine Karte ueber die volle Breite von 852 px, der
   Absatz darin blieb aber durch p { max-width: 62ch } bei rund 560 px und
   liess die Karte rechts halb leer.
   Zwei Spalten zwischen 641 und 1000 px halten die Textbreite in beiden
   Faellen im Komfortband. Das ist der Bereich von Tablets und geteilten
   Browserfenstern. .grid-2 und .split bleiben unveraendert bei 900 px,
   sie tragen zwei gleichrangige Wege und haetten von einer Zwischenstufe
   nichts. */
@media (max-width: 1000px) {
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .grid-3 { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .grid-2 { grid-template-columns: 1fr; }
  .split  { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; gap: var(--sp-3); }
  .section { padding: var(--sp-6) 0; }
  .hero { padding: var(--sp-6) 0; }
}

/* C5: Die Namensleiste brauchte auf dem Handy rund 224 Pixel Hoehe und schob
   H1, Tagline und Lead entsprechend weit nach unten. Ursache war der Stapel:
   drei Zeilen untereinander, jede mit Strich, Polsterung und 16,8 px Schrift,
   dazu 64 px Abstand nach unten.
   Der Stapel war noetig, weil "Resilienz" bei 16,8 px in einer Drittelspalte
   umbrach. Statt zu stapeln faellt jetzt die Schrift ab: bei 14,8 px braucht
   das laengste Wort rund 73 px, eine Drittelspalte misst auf einem 320 px
   breiten Geraet noch 82 px. Damit bleiben die drei Woerter nebeneinander,
   was der eigentliche Sinn der Leiste ist, und sie kommt mit rund 70 statt
   224 Pixeln aus. Der Hero selbst bleibt unangetastet, F3 ist davon
   unberuehrt. */
@media (max-width: 560px) {
  .hero-namensleiste {
    gap: 12px;
    max-width: 100%;
    margin-bottom: var(--sp-4);
  }
  .hero-namensleiste div {
    font-size: var(--fs-md);
    border-top-width: 2px;
    padding-top: 8px;
    line-height: 1.3;
  }
}

@media (max-width: 1239px) {
  .site-header .wrap { max-width: var(--wrap); }
  /* Navigation einklappen. Der Breakpoint liegt bewusst oberhalb der Stelle,
     an der es rechnerisch noch passt: lieber ein sauberer Menue-Button als
     eine gedraengte Leiste. */
  .nav {
    display: none;
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding: 8px 24px 20px;
  }
  .nav a { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-base); }
  .nav a:hover { border-bottom-color: var(--line); }
  .nav .btn { margin-top: 12px; justify-content: center; }
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 9px 14px;
    font: inherit;
    color: var(--text);
    cursor: pointer;
  }
  .site-header .wrap { position: relative; flex-wrap: wrap; }
  #nav-check:checked ~ .nav { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* 13.10.2026, CI-Entscheidung: Flaechen im Wechsel. Kopf Weiss, erster
   Abschnitt Off-White, danach abwechselnd Weiss und Off-White bis zum blauen
   Abschluss. Karten und Panels liegen auf weissem Grund in Off-White, sonst
   verschwinden sie bis auf die Haarlinie. */
.section--weiss .card,
.section--weiss .panel { background: var(--offwhite); }

@media (max-width: 640px) {
  .site-header .wrap { padding-top: 14px; padding-bottom: 14px; }
  #main { scroll-margin-top: 96px; }
}