/* Landingpage in der Fassung „Förderung mit PEP“ (Daniel Pfefferkorn).

   Ausgeliefert wird diese Datei NUR auf den Hosts dieses Mandanten
   (statisch.ts). Sie ändert ausschließlich die Farbwerte und blendet den
   Schriftzug des Absenders ein — Aufbau, Text und Verhalten bleiben dieselben.

   Die Fassung ist bewusst neutral und weiß gehalten (Entscheidung Norma,
   24.09.2026): Weiß als Grund, Graphit statt einer Buntfarbe — auch die
   Bühne oben ist im hellen Erscheinungsbild weiß, nicht dunkel. Dafür trägt
   landingpage.css die festen Weißtöne der Bühne als Variablen mit dem
   bisherigen Wert als Rückfall (--buehne-hover, --buehne-karte …); SH und
   IVD setzen sie nicht und bleiben unverändert. Die Werte sind
   dieselben wie im Pass (apps/web/src/marke/marken.ts, Eintrag `pep`).
   Nachgerechnet, weil Kopfleiste und Knöpfe darauf angewiesen sind:
     Weiß auf #3A4048 9,8:1 · #1E2126 auf Weiß 16,1:1 · #545B64 auf Weiß 6,6:1

   Wird nach landingpage.css geladen und gewinnt deshalb bei gleicher
   Spezifität. Redefiniert werden nur Tokens, keine Regeln. Anders als die
   IVD-Fassung trägt sie auch den `:root[data-theme="dark"]`-Block, damit die
   ausdrückliche Dunkel-Wahl auf hellem System nicht in die SH-Farben fällt. */

:root {
  --navy:       #23272D;
  --navy-tief:  #16181C;
  --navy-hauch: #F1F2F4;

  --blau:       #3A4048;
  --blau-schrift: #3A4048;
  --blau-tief:  #23272D;
  --blau-hell:  #8A919B;
  --blau-hauch: #F1F2F4;

  --papier:  #FAFAFB;
  --flaeche: #FFFFFF;
  --sockel:  #F3F4F6;
  --tinte:   #1E2126;
  --tinte-weich: #545B64;
  --tinte-fein:  #6E767F;
  --linie:      #E3E5E8;
  --linie-fein: #EFF0F2;

  --buehne:       #FFFFFF;
  --buehne-tief:  #F6F7F8;
  --buehne-tinte: #1E2126;
  --buehne-leise: #545B64;
  --buehne-linie: #E3E5E8;
  --buehne-linie-fein: #EDEEF0;
  --buehne-hover:  rgba(30,33,38,0.05);
  --buehne-aktiv:  rgba(30,33,38,0.07);
  --buehne-rand:   rgba(30,33,38,0.32);
  --buehne-karte:  #FFFFFF;
  --buehne-schatten: 0 14px 36px rgba(30,33,38,0.08);
  --buehne-feld:   #F6F7F8;
  --buehne-eingabe: #FFFFFF;
  --buehne-fehler: #A6432F;
  /* Kein farbiger Schimmer — nur ein Hauch Grau, damit die Fläche nicht tot wirkt. */
  --buehne-glanz:       rgba(58,64,72,0.05);
  --buehne-glanz-leise: rgba(58,64,72,0.03);
  /* Akzent auf der Bühne (Großzahl, „diesem“): #5B626B auf Weiß 6,3:1. */
  --blau-hell:  #5B626B;
  --pep-dach:   #23272D;
  --pep-haken:  #8A919B;

  --knopf-grund: #3A4048;
  --knopf-schrift: #FFFFFF;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --navy:       #C6CBD1;
    --navy-tief:  #E0E3E7;
    --navy-hauch: #23262B;

    --blau:       #AEB6BF;
    --blau-schrift: #C6CBD1;
    --blau-tief:  #C6CBD1;
    --blau-hell:  #AEB6BF;
    --blau-hauch: #23262B;

    --papier:  #121417;
    --flaeche: #1B1E22;
    --sockel:  #16181C;
    --tinte:   #ECEEF0;
    --tinte-weich: #B4BAC1;
    --tinte-fein:  #8A919B;
    --linie:      #31353B;
    --linie-fein: #282C31;

    --buehne:       #1B1E22;
    --buehne-tief:  #101215;
    --buehne-tinte: #FFFFFF;
    --buehne-leise: #C6CBD1;
    --buehne-linie: rgba(255,255,255,0.16);
    --buehne-linie-fein: rgba(255,255,255,0.10);
    --buehne-hover:  rgba(255,255,255,0.08);
    --buehne-aktiv:  rgba(255,255,255,0.10);
    --buehne-rand:   rgba(255,255,255,0.38);
    --buehne-karte:  rgba(255,255,255,0.04);
    --buehne-schatten: 0 18px 44px rgba(0,0,0,0.34);
    --buehne-feld:   rgba(0,0,0,0.22);
    --buehne-eingabe: rgba(255,255,255,0.06);
    --buehne-fehler: #FFB4A2;
    --buehne-glanz:       rgba(174,182,191,0.10);
    --buehne-glanz-leise: rgba(174,182,191,0.05);
    --pep-dach:   #FFFFFF;
    --pep-haken:  #AEB6BF;

    --knopf-grund: #AEB6BF;
    --knopf-schrift: #121417;
  }
}

:root[data-theme="dark"] {
  --navy:       #C6CBD1;
  --navy-tief:  #E0E3E7;
  --navy-hauch: #23262B;

  --blau:       #AEB6BF;
  --blau-schrift: #C6CBD1;
  --blau-tief:  #C6CBD1;
  --blau-hell:  #AEB6BF;
  --blau-hauch: #23262B;

  --papier:  #121417;
  --flaeche: #1B1E22;
  --sockel:  #16181C;
  --tinte:   #ECEEF0;
  --tinte-weich: #B4BAC1;
  --tinte-fein:  #8A919B;
  --linie:      #31353B;
  --linie-fein: #282C31;

  --buehne:       #1B1E22;
  --buehne-tief:  #101215;
  --buehne-tinte: #FFFFFF;
  --buehne-leise: #C6CBD1;
  --buehne-linie: rgba(255,255,255,0.16);
  --buehne-linie-fein: rgba(255,255,255,0.10);
  --buehne-hover:  rgba(255,255,255,0.08);
  --buehne-aktiv:  rgba(255,255,255,0.10);
  --buehne-rand:   rgba(255,255,255,0.38);
  --buehne-karte:  rgba(255,255,255,0.04);
  --buehne-schatten: 0 18px 44px rgba(0,0,0,0.34);
  --buehne-feld:   rgba(0,0,0,0.22);
  --buehne-eingabe: rgba(255,255,255,0.06);
  --buehne-fehler: #FFB4A2;
  --buehne-glanz:       rgba(174,182,191,0.10);
  --buehne-glanz-leise: rgba(174,182,191,0.05);
  --pep-dach:   #FFFFFF;
  --pep-haken:  #AEB6BF;

  --knopf-grund: #AEB6BF;
  --knopf-schrift: #121417;
}

/* Der Absender neben der Produktmarke — wie die Verbandsmarke in der
   IVD-Fassung, durch eine feine Linie getrennt. Hier kein Logo, sondern der
   Schriftzug: Das IVD-Bild im Markup bleibt versteckt, der Zusatz kommt als
   ::after aus dieser Datei und existiert damit nur in dieser Fassung. */
.verbandmarke {
  display: flex; flex-direction: column; justify-content: center; flex: none; line-height: 1.2;
  margin-left: 0.2rem; padding-left: 0.9rem; border-left: 1px solid var(--buehne-linie);
}
.verbandmarke img { display: none; }
/* Der Absender dieser Fassung: oben die Marke, darunter der Ansprechpartner
   der Makler (Wunsch Norma, 24.09.2026). Der Name steht auch in marken.ts
   (`partner`) — ein Test hält beide gleich (tests/web/marke.test.tsx). */
.verbandmarke::before {
  content: "Förderung mit PEP";
  color: var(--buehne-tinte);
  font-weight: 600; font-size: 0.95rem; letter-spacing: 0.02em; white-space: nowrap;
}
.verbandmarke::after {
  content: "Daniel Pfefferkorn";
  color: var(--buehne-leise);
  font-size: 0.72rem; white-space: nowrap;
}
@media (max-width: 58rem) { .verbandmarke { display: none; } }

/* In der Zeile über der Überschrift steht statt der SH der Ansprechpartner
   dieser Fassung (Wunsch Norma, 24.09.2026) — auf jeder Breite, auch auf dem
   Telefon, wo die Kopfzeile ihn nicht zeigt. Datum und Rest der Zeile
   bleiben aus der Seite selbst; die Seite trägt dafür ein leeres Element
   `.absender-fassung`, das nur eine Fassung füllt. */
.auftaktwort > .marke .absender { display: none; }
.auftaktwort > .marke .absender-fassung::after { content: "Daniel Pfefferkorn"; }

/* Das Zeichen des Passes im Kopf trägt feste Strichfarben im Markup und
   bekommt hier die neutralen Töne dieser Fassung. */
.navmarke .zeichen svg path:first-child { stroke: var(--pep-dach); }
.navmarke .zeichen svg path:last-child  { stroke: var(--pep-haken); }

/* Die Kopfzeile trägt den Absender zusätzlich — wie in der IVD-Fassung
   braucht sie deshalb die Breite der Pass-Kopfleiste, sonst rutscht der
   letzte Menüpunkt hinter den Rand. */
.navinnen { max-width: 76rem; }