/* Fairfinanz · Frank Schlieker — Designsystem "Indigo & Sonnengelb"
   Die Farben sind aus Franks altem Logo GEMESSEN, nicht ausgedacht (Pixel gezählt):
   das Haus war Indigo-Violett #312783, die Chartlinie Gelb #FED642 — kein Navy, kein Gold.

   FARBREGEL — ein Satz, und er stand schon in seinem alten Logo:

       GELB LEBT AUF INDIGO. Auf hellem Grund zeichnet Indigo selbst.

   Der Grund ist Physik, nicht Geschmack: Gelb schafft auf Papier 1,3:1 — unsichtbar,
   egal wie groß, egal ob Strich, Ziffer oder Stern. Auf Indigo sind es 8,3:1, damit
   trägt es dort sogar Text. Genau deshalb lag Franks Zickzack auf dem blauen Haus
   und nie auf Weiß. Es gibt kein Gelb, das noch Gelb ist und auf Hell 3:1 erreicht —
   die erste Stufe, die das schafft, ist bereits Ocker. Also: das alte Gold.

   DURCHGESETZT WIRD DIE REGEL VON DER KASKADE, NICHT VON DISZIPLIN:
   --akzent ist im Wurzelkontext Indigo und wird NUR innerhalb der dunklen Flächen
   (.band-navy, .band-navy-tief, .beleg-band) auf Gelb umgeschaltet. Damit entscheidet
   der UNTERGRUND über die Farbe — nicht die Fundstelle. Vorher wanderte dieselbe
   Akzentfarbe an 15 Stellen mit, egal worauf sie lag.

   Ausnahme, die keine ist: Gelb darf eine FLÄCHE sein (der Aufruf-Knopf). Dann trägt es
   Indigo-Text (8,3:1) und bekommt eine Indigo-Kante — es grenzt sich selbst ab.

   Kein Verlauf, kein Schatten, kein drittes Rot. */

@font-face {
  font-family: "Archivo";
  src: url("../assets/fonts/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../assets/fonts/source-sans-3.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  /* Farben — Kontraste nachgerechnet (runde5/palette.mjs), alle Textpaare ≥ 7:1 */
  --papier: #F7F5F1;      /* Grundfläche — warm-neutral, nicht die Creme von Reiss & Rief */
  --flaeche2: #EFE7CE;    /* Butter: Franks Gelb als ruhige Fläche. Karten, Bildgrund */
  --tinte: #312783;       /* Indigo — Franks Farbe. 11,0:1 auf Papier · 9,7:1 auf Butter */
  --sekundaer: #41404C;   /* Graphit — 9,4:1 auf Papier · 8,2:1 auf Butter */
  --gelb: #FFD23F;        /* Sonnengelb — NUR auf Indigo (8,3:1) oder als Fläche mit Indigo-Text */
  --linie: #DFD9C9;

  --tinte-tief: #241C63;  /* Indigo dunkler — Knopf-Hover, Kacheln auf Indigo */
  --auf-tinte: #F7F5F1;   /* Schrift auf Indigo — 11,0:1 */
  --auf-tinte-leise: #C8C3E6; /* Nebentext auf Indigo — 7,1:1 */
  --fehler: #8A1D1D;      /* Formularfehler — 8,5:1 auf Papier. Gelb ist keine Fehlerfarbe. */

  /* DER AKZENT. Im Wurzelkontext ist er Indigo — auf hellem Grund ist Gelb unsichtbar.
     Die dunklen Flächen schalten ihn weiter unten auf Gelb um. Nichts anderes darf das. */
  --akzent: var(--tinte);

  /* Raster */
  --spalte: 1180px;       /* Inhaltsbreite */
  --rand: 56px;           /* Seitenrand Desktop */
  --rand-mobil: 20px;

  /* Typo-Skala */
  --t-h1: clamp(38px, 5.2vw, 62px);
  --t-h2: clamp(30px, 3.2vw, 42px);
  --t-h3: 24px;
  --t-lead: 22px;
  --t-body: 19px;
  --t-klein: 16px;

  --radius: 4px;
}

* { box-sizing: border-box; }

html { font-size: 100%; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: var(--t-body);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3 {
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); line-height: 1.06; }
h2 { font-size: var(--t-h2); line-height: 1.15; }
h3 { font-size: var(--t-h3); line-height: 1.3; }

p { margin: 0; }

a { color: var(--tinte); }

/* DIE EINE UMSCHALTUNG. Innerhalb der dunklen Flächen kippt der Akzent auf Gelb — und
   damit alles, was --akzent benutzt: Striche, Trenner, Ziffern, Fokusringe, Balken.
   Diese drei Selektoren sind die gesamte Durchsetzung der Farbregel. */
.band-navy,
.band-navy-tief,
.beleg-band {
  --akzent: var(--gelb);
}

/* Fokusring folgt dem Akzent: auf Papier Indigo (11,0:1), auf Indigo Gelb (8,3:1).
   Ein gelber Ring auf hellem Grund wäre 1,3:1 — als Fokusanzeige unbrauchbar
   (WCAG verlangt 3:1 gegen die Nachbarfarbe). */
:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
  border-radius: 2px;
}

.lead { font-size: var(--t-lead); line-height: 1.55; color: var(--sekundaer); }
.klein { font-size: var(--t-klein); line-height: 1.5; color: var(--sekundaer); }

/* Kicker mit dem Punkt — er zitiert die beiden Kreise des Prozentzeichens. Vorher stand
   hier ein Schrägstrich; der zitierte den Kanal des alten Signets, das es nicht mehr gibt.
   Reine Grafik, kein Text. Auf Papier ist er Indigo, auf den dunklen Bändern Gelb — das
   erledigt --akzent von allein. */
.kicker {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sekundaer);
  display: flex;
  align-items: center;
  gap: 12px;
}
.kicker::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 auto;
  background: var(--akzent);
}

/* Wortmarke */
.lockup { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.lockup .signet { display: block; flex: 0 0 auto; }
.wortmarke {
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--tinte);
  line-height: 1;
  display: block;
}
.zusatz {
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--sekundaer);
  line-height: 1.3;
  display: block;
}

/* Buttons — GELB IST HANDLUNG.
   Das ist die eine Umkehr gegenüber dem alten System, und sie ist rechnerisch gedeckt:
   Indigo auf Gelb sind 8,3:1 — der gelbe Knopf trägt seinen Text mühelos. (Das alte Gold
   konnte das nicht: Navy darauf war 4,7:1, Papier darauf 2,3:1 — deshalb war der Knopf
   damals Navy.) Die Indigo-Kante ist Pflicht, nicht Zierrat: Gelb gegen Papier ist 1,3:1,
   ohne Kante franst die Fläche aus.
   Weiterhin gilt: genau EIN gefüllter Knopf pro Bildschirm. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Source Sans 3", sans-serif;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
  white-space: nowrap;
  cursor: pointer;
  min-height: 52px;
  padding: 0 26px;
  font-size: 19px;
  border: 1.5px solid transparent;
}
.btn-primaer { background: var(--gelb); color: var(--tinte); border-color: var(--tinte-tief); }
.btn-primaer:hover { background: #F5C21B; border-color: var(--tinte-tief); }
.btn-sekundaer { background: transparent; color: var(--tinte); border-color: var(--tinte); }
.btn-sekundaer:hover { background: var(--flaeche2); }
/* Auf den dunklen Bändern steht bewusst KEIN Knopf: ein gefüllter Knopf auf einer gefüllten
   Indigo-Fläche wären zwei Flächen auf einem Bildschirm. Der Aufruf lebt im Hero und
   im Kontakt. Deshalb gibt es hier auch keine Umkehr-Regeln — sie wären Vorrat. */

/* Porträt-Gradation. mix-blend-mode: multiply ist RAUS (2026-07-16): Es stammte vom
   freigestellten Stockfoto, dessen weißer Grund per multiply verschwand. Das echte
   Frank-Foto (Fototermin 2026-07-15) füllt den Rahmen komplett — multiply verrechnete
   es nur noch unnötig mit dem Butter-Grund und dunkelte es ab. Die Tonwerte kommen
   seit Runde 7 aus tools/fotos.py; hier bleibt bewusst kein Filter zurück. */
.portraet { }

.visuell-versteckt {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Auf schmalen Geräten darf die Beschriftung umbrechen — sonst zwingt der längste
   Button ("Erstgespräch vereinbaren — kostenfrei") die ganze Seite über die
   Bildschirmbreite hinaus und alles läuft rechts aus dem Bild. */
@media (max-width: 560px) {
  .btn {
    white-space: normal;
    text-align: center;
    line-height: 1.3;
    padding: 12px 18px;
    text-wrap: balance;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}