/* Frank Schlieker Privatkredit — Designsystem des dritten Bereichs

   DER BEREICH TRAEGT DIE HAUSMARKE, keine eigene Kennung (Entscheidung 11.08.2026).

   Photovoltaik hat eine eigene Farbe (Tannengruen + Bernstein), weil dort ein anderes
   Gewerbe steht — kein Finanzprodukt, keine Erlaubnis, andere Sprache. Privatkredit ist
   das Gegenteil: Es IST Finanzvermittlung, dieselbe Erlaubnisfamilie, dasselbe Geschaeft
   in klein. Genau das steht seit dem ersten Tag in tools/signet.mjs als Begruendung dafuer,
   dass hier das Hauszeichen weiterlebt und nicht ein neues erfunden wird. Die Farbe folgt
   jetzt derselben Ueberlegung: Wer von der Baufi-Seite herkommt, soll dieselbe Firma sehen.

   Vorher stand hier Petrol #12343C + Signalorange #D9561F. Der Bereich sah dadurch neben
   frank-schlieker.de aus wie eine fremde Seite.

   DIE FARBREGEL, unveraendert aus der Hauptmarke:

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

   Der Grund ist Physik, nicht Geschmack: Sonnengelb schafft auf Papier 1,3:1 — unsichtbar,
   egal wie gross, egal ob Strich, Ziffer oder Punkt. Auf Indigo sind es 8,3:1, dort traegt
   es sogar Text.

   ACHTUNG, das ist STRENGER als die alte Bereichsregel: Signalorange lag bei 3,66:1 und
   war auf Papier als Grafik zulaessig — Kicker-Punkt und Trenner durften orange sein.
   Gelb darf das NICHT. Es gibt kein Gelb, das noch Gelb ist und auf Hell 3:1 erreicht.
   Die Umschaltung unten erledigt das von selbst; wer sie umgeht, baut einen unsichtbaren
   Strich.

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

   DURCHGESETZT WIRD DIE REGEL VON DER KASKADE, NICHT VON DISZIPLIN:
   --akzent ist im Wurzelkontext Indigo und kippt NUR innerhalb von .band-navy und
   .band-navy-tief auf --gelb. Der Untergrund entscheidet, nicht die Fundstelle.

   TRACKING IST GROESSENABHAENGIG. Ein fester letter-spacing ist irgendwo immer falsch:
   grosse Schrift laeuft optisch auseinander und will negatives Tracking, kleine Schrift
   will leicht positives. Die Skala unten staffelt es deshalb mit der Groesse — das ist
   die eine Stelle, an der dieser Bereich feiner ist als die Hauptseite, und sie bleibt.

   Kein Verlauf, kein Schatten, keine dritte Buntfarbe. */

@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;
}

/* ---------- Indigo & Sonnengelb ----------
   Werte identisch mit /css/tokens.css der Hauptseite. Sie sind aus Franks altem Logo
   GEMESSEN (Pixel gezaehlt), nicht ausgedacht: das Haus war Indigo #312783, die
   Chartlinie Gelb. Wer sie hier aendert, ohne sie dort zu aendern, spaltet die Marke. */
:root {
  --papier: #F7F5F1;
  --flaeche2: #EFE7CE;    /* Butter: Franks Gelb als ruhige Flaeche. Karten, Bildgrund */
  --tinte: #312783;       /* Indigo — 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 oder als Flaeche 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;
}

:root {
  /* DER AKZENT. Im Wurzelkontext Indigo — Gelb ist auf hellem Grund als Strich wie als
     Schrift unbrauchbar (1,3:1). Die dunklen Baender schalten um. */
  --akzent: var(--tinte);

  /* Raster — identisch mit der Hauptseite, damit Kopf, Hero und alle Abschnitte
     zwischen den Bereichen exakt uebereinander fluchten. */
  --spalte: 1180px;
  --rand: 56px;
  --rand-mobil: 20px;
  --gutter: max(var(--rand), calc((100% - var(--spalte)) / 2));
  --kopf-hoehe: 72px;
  --band-hoehe: 40px;     /* Beleg-Band unter dem Kopf; unter 900 px aus */

  /* Typo-Skala. Fliesstext bleibt bei 19px: unter 16px zoomt iOS beim Fokus ungefragt.
     H1 ist bewusst kleiner als auf der Startseite (dort bis 62px) — diese Seite hat eine
     lange Ueberschrift und einen Split-Hero, in dem 62px auf vier Zeilen liefen. */
  --t-h1: clamp(32px, 4.4vw, 52px);
  --t-h2: clamp(26px, 3.2vw, 38px);
  --t-h3: 22px;
  --t-lead: 21px;
  --t-body: 19px;
  --t-klein: 16px;

  --radius: 4px;
}

@media (max-width: 1079px) {
  :root { --rand: var(--rand-mobil); --kopf-hoehe: 64px; }
}

* { box-sizing: border-box; }

/* KEIN scroll-behavior: smooth auf <html> — die Regel gilt auch fuer das Scrollen, das der
   Browser beim Tabben ausloest, und setzt den Fokus dann auf noch unsichtbaren Inhalt. */
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;
  margin: 0;
  text-wrap: balance;
}
/* Tracking staffelt mit der Groesse — nicht ein Wert fuer alle. */
h1 { font-size: var(--t-h1); line-height: 1.06; letter-spacing: -0.022em; }
h2 { font-size: var(--t-h2); line-height: 1.15; letter-spacing: -0.015em; }
h3 { font-size: var(--t-h3); line-height: 1.3;  letter-spacing: -0.008em; }

p { margin: 0; }

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

/* DIE EINE UMSCHALTUNG. Innerhalb der dunklen Flaechen kippt der Akzent auf Gelb —
   und damit alles, was --akzent benutzt: Striche, Trenner, Kicker-Punkte, Fokusringe.
   Diese zwei Selektoren sind die gesamte Durchsetzung der Farbregel.
   Die Klassen heissen wie im Haus (.band-navy), nicht mehr .band-dunkel: ein Name
   fuer eine Sache, sonst driften die Bereiche im Stylesheet auseinander. */
.band-navy,
.band-navy-tief {
  --akzent: var(--gelb);
}
.band-navy {
  background: var(--tinte);
  color: var(--auf-tinte);
}
.band-navy-tief {
  background: var(--tinte-tief);
  color: var(--auf-tinte);
}
.band-navy a,
.band-navy-tief a { color: var(--auf-tinte); }
.band-navy .lead,
.band-navy .klein,
.band-navy .kicker,
.band-navy-tief .lead,
.band-navy-tief .klein,
.band-navy-tief .kicker { color: var(--auf-tinte-leise); }

/* Fokusring folgt dem Akzent: auf Papier Indigo (11,0:1), auf dem Band Gelb (8,3:1).
   Ein gelber Ring auf hellem Grund waere 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); letter-spacing: 0; }
.klein { font-size: var(--t-klein); line-height: 1.5; color: var(--sekundaer); letter-spacing: 0.004em; }

.kicker {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  /* Versalien brauchen mehr Laufweite als Gemischtsatz, sonst kleben sie. */
  letter-spacing: 0.09em;
  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;
  font-size: 14px;
  letter-spacing: 0.07em;
  color: var(--sekundaer);
  line-height: 1.3;
  display: block;
}

/* Knoepfe — GELB IST HANDLUNG (Zahlen in tools/kontrast.mjs).
   Das ist die Umkehr gegenueber der alten Bereichsfassung, in der der gefuellte Knopf
   Petrol trug. Rechnerisch gedeckt: Indigo auf Gelb sind 8,3:1 — der gelbe Knopf traegt
   seinen Text muehelos. Die Indigo-Kante ist Pflicht, nicht Zierrat: Gelb gegen Papier
   ist 1,3:1, ohne Kante franst die Flaeche aus.
   GENAU EIN gefuellter Knopf pro Bildschirm. Auf dieser Seite ist das der Knopf zum
   Kreditvergleich; das Telefon steht als Umriss daneben. Der Grund ist nicht Geschmack:
   der Telefonweg traegt heute keine Provision. */
.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;
  /* Press-Feedback: 120 ms, damit der Finger eine Antwort bekommt, bevor die Seite
     reagiert. Bewusst kurz — laenger fuehlt sich nach Verzoegerung an. */
  transition: background-color 0.12s ease-out, transform 0.12s ease-out;
}
.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); }

/* :active ist auf dem Handy das EINZIGE Feedback — hover gibt es dort nicht, und 73 % der
   bezahlten Klicks kommen vom Handy. Im Haupt-CSS fehlt es bis heute komplett; hier bleibt
   es, auch nachdem der Bereich die Hausfarben uebernommen hat. */
.btn:active { transform: translateY(1px); }
.btn-primaer:active { background: #F5C21B; }
.btn-sekundaer:active { background: var(--flaeche2); }

/* Auf dem dunklen Band steht bewusst KEIN gefuellter Knopf — eine gelbe Flaeche auf einer
   gefuellten Indigo-Flaeche waeren zwei Flaechen auf einem Bildschirm. Der Umriss-Knopf
   dreht dort auf helle Kante. */
.band-navy .btn-sekundaer,
.band-navy-tief .btn-sekundaer {
  color: var(--auf-tinte);
  border-color: var(--auf-tinte-leise);
}

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

/* Sprungmarke — sichtbar erst bei Tastaturfokus. */
.sprung {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--tinte);
  color: var(--papier);
  padding: 10px 16px;
  z-index: 60;
}
.sprung:focus { left: 8px; top: 8px; }

/* Auf schmalen Geraeten darf die Beschriftung umbrechen — sonst zwingt der laengste
   Knopf die ganze Seite ueber die Bildschirmbreite hinaus. */
@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;
  }
}