/* ============================================================
   dna.css · Die Farben und Schriften des Beraterbereichs

   Ab hier steht jede Farbe an genau EINER Stelle. Die Dateien
   style.css, dashboard.css, hub.css, analysen.css und
   potenziale.css schreiben keine Farbwerte mehr selbst, sie
   zeigen alle hierher.

   Wird als LETZTES Stylesheet geladen, nach style.css,
   dashboard.css und hub.css. Fehlt die Datei auf einer Seite,
   greifen dort weiter die alten Werte aus style.css. Die Seite
   ist dann creme, aber nie kaputt.

   Ein Dunkelmodus braucht später nur einen zweiten Block mit
   denselben Namen, keine Änderung an den anderen Dateien.

   Angelegt 16.08.2026 · Phase 268
   ============================================================ */

/* Outfit für Überschriften und Zahlen. Liegt lokal im Projekt,
   es wird nichts von Google nachgeladen (DSGVO). */
@font-face{
  font-family:'Outfit';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('/assets/fonts/outfit-latin.woff2') format('woff2');
}

/* Die Signaturschrift für den Namenszug in der Seitenleiste. Liegt
   ebenfalls lokal, aus demselben Grund. Lizenz: SIL Open Font License,
   siehe assets/fonts/LICENSE-petit-formal-script.txt */
@font-face{
  font-family:'Petit Formal Script';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/petit-formal-script-latin.woff2') format('woff2');
}

:root{
  /* ---- Die neun Werte ---- */
  --dna-ink:        #13191D;   /* Überschriften, Text, dunkle Flächen */
  --dna-text:       #39434A;   /* gelesener Fließtext */
  --dna-muted:      #6A747C;   /* Nebentext, Beschriftungen */
  --dna-faint:      #9AA3AB;   /* Zeitangaben, Randnotizen */
  --dna-paper:      #FBFCFC;   /* Grundfläche der Seite */
  --dna-paper-2:    #F1F4F5;   /* abgesetzte Bänder und Felder */
  --dna-card:       #FFFFFF;   /* Karten stehen heller als der Grund */
  --dna-line:       #E3E7E9;   /* Haarlinie */
  --dna-line-strong:#D5DBDE;   /* betonte Trennung */

  /* ---- Akzent und zweite Farbe ---- */
  --dna-gold:       #C8AA22;   /* Akzent, sparsam */
  --dna-gold-dark:  #8F7809;   /* Text auf hellem Gold, Hover */
  --dna-gold-tint:  #F9F6E9;   /* Goldfläche, sehr hell */
  --dna-gold-tint-2:#F4EED2;
  --dna-petrol:     #0B4650;   /* alles Positive, Fortschritt, Kunde */
  --dna-petrol-deep:#07333B;
  --dna-petrol-mid: #2E6E7A;   /* Zwischenstufe, z. B. Empfehlung unterwegs */
  --dna-petrol-light:#5E939E;  /* frühe Stufe, z. B. Link geklickt */
  --dna-petrol-tint:#E4EEF0;
  --dna-red:        #9D2235;   /* nur Fehler */
  --dna-red-tint:   #F5E9EB;

  /* ---- WhatsApp bleibt WhatsApp ---- */
  --dna-whatsapp:   #25D366;

  /* ============================================================
     Die alten Namen zeigen jetzt hierher. Alles, was schon
     var(--ink) oder var(--accent) benutzt, wechselt damit mit,
     ohne dass eine einzige Regel angefasst werden muss.
     ============================================================ */

  --bg:              var(--dna-paper);
  --surface:         var(--dna-card);
  --surface-2:       var(--dna-paper-2);
  --surface-soft:    var(--dna-paper-2);
  --ink:             var(--dna-ink);
  --ink-muted:       var(--dna-muted);
  --ink-soft:        var(--dna-faint);
  --hairline:        var(--dna-line);
  --hairline-strong: var(--dna-line-strong);

  --accent:       var(--dna-gold);
  --accent-hover: var(--dna-gold-dark);
  --accent-bg:    var(--dna-gold-tint);
  --accent-soft:  rgba(200,170,34,0.14);

  /* Aus vier Statusfarben werden zwei: Petrol trägt alles
     Positive, Gold die Aufmerksamkeit. */
  --sage:         var(--dna-petrol);
  --sage-dark:    var(--dna-petrol-deep);
  --sage-soft:    rgba(11,70,80,0.10);
  --terracotta:   var(--dna-gold-dark);
  --burnt-orange: var(--dna-gold-dark);
  --burnt-soft:   rgba(200,170,34,0.14);
  --marine:       var(--dna-petrol);

  --ok:     var(--dna-petrol);
  --warn:   var(--dna-gold-dark);
  --err:    var(--dna-red);
  --ok-bg:   rgba(11,70,80,0.10);
  --warn-bg: rgba(200,170,34,0.14);
  --err-bg:  rgba(157,34,53,0.10);

  /* ---- Schatten ----
     Der weiche Schlagschatten unter jeder Karte war der stärkste
     Baukasten-Eindruck. Ersetzt durch eine Haarlinie, gesetzt als
     innerer Schatten: so braucht sie keinen Platz und kein
     Layout verschiebt sich. */
  --shadow-card:       inset 0 0 0 1px var(--dna-line);
  --shadow-card-hover: inset 0 0 0 1px var(--dna-line-strong);

  /* ---- Schrift ---- */
  --font-head: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---- Radien ----
     Große runde Ecken sind ein Baukasten-Merkmal. Karten 12,
     kleine Elemente 10, Pillen bleiben nur auf Knöpfen. */
  --radius-lg:     12px;
  --radius-card:   12px;
  --radius-md:     10px;
  --radius-sm:      6px;
  --radius-button:  8px;
}

/* ============================================================
   Schrift: Outfit trägt Überschriften und Zahlen, Inter bleibt
   für alles Gelesene. Die großen Grade stehen leichter (500/600
   statt 800), das ist der größte Teil des ruhigeren Eindrucks.
   ============================================================ */
h1, h2, h3,
.h-greet,
.h-hero,
.h-kpi-value,
.h-stair-num,
.changelog-h1,
.team-hero,
.team-podium-person,
.team-podium-place,
.page-title,
.card-title{
  font-family: var(--font-head);
  letter-spacing: -0.025em;
}

.h-greet,
.h-hero,
.team-hero,
.changelog-h1{ font-weight: 600; }

.h-kpi-value,
.h-stair-num{
  font-weight: 500;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}

/* Zahlen, die untereinander stehen, sollen auch untereinander
   fluchten. */
.h-kpi-value,
.h-stair-num,
.h-mom-score,
td[data-zahl],
.zahl{ font-variant-numeric: tabular-nums; }

/* ============================================================
   Die Schreibschrift in der Seitenleiste. Erst stand hier "Segoe
   Script": die gibt es nur auf Windows, auf Mac und iPhone fiel sie
   auf eine beliebige Ersatzschrift zurück und sah dort völlig anders
   aus. Deshalb lief der Namenszug eine Zeit lang in der normalen
   Schrift. Seit Phase 282 liegt die Schrift als Datei im Projekt und
   sieht überall gleich aus: die Rolle klein in Versalien, der Name
   darunter wie mit dem Füller geschrieben.
   ============================================================ */
.nav-brand-signature{
  font-family: var(--font-sans);
  color: var(--dna-muted);
  letter-spacing: 0.01em;
}
.nav-brand-signature > span:first-child{
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dna-faint);
}
/* Die Unterschrift ergänzt, sie führt nicht: seit Phase 283 zwölf
   Prozent kleiner (15 → 13,2 und 13,5 → 11,9), damit
   „Empfehlungsportal" die Rangfolge behält. Schrift, Goldton und die
   linke Kante bleiben unverändert. */
.nav-brand-signature > span:last-child{
  font-family: 'Petit Formal Script', 'Segoe Script', cursive;
  font-size: 13.2px;
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--dna-gold-dark);
}
/* Zwischen 1024 und 1280 ist die Leiste nur 200 Pixel breit, dort
   fällt der Namenszug eine Spur kleiner aus. */
@media (min-width: 1024px){
  .nav-brand-signature > span:first-child{ font-size: 8px; }
  .nav-brand-signature > span:last-child{ font-size: 11.9px; }
}
@media (min-width: 1280px){
  .nav-brand-signature > span:first-child{ font-size: 8.5px; }
  .nav-brand-signature > span:last-child{ font-size: 13.2px; }
}

/* Die runde Blase am Markenpunkt der Leiste: der Leuchtring war
   der letzte Rest Champagner-Glanz. */
.nav-brand-mark{ box-shadow: none; }

/* ============================================================
   Gold als Fläche ist wieder Creme. Das ist der Punkt, an dem der
   reine Farbtausch nicht reicht: Wo vorher Champagner lag, liegt
   sonst Gold, und eine hellgelbe Fläche liest sich genauso warm
   wie vorher. Gold bleibt deshalb Linie, Schrift und Punkt, aber
   nie Untergrund.
   ============================================================ */

/* Der aktive Punkt in der Seitenleiste: neutrale Fläche, der
   goldene Strich links markiert weiter, wo man steht. */
.nav-item.active{
  background: var(--surface-2);
  color: var(--ink);
}
.nav-item.active .nav-item-icon{ color: var(--dna-petrol); }

/* Die Symbolkacheln an den Kennzahlen. Petrol statt Gold, sonst
   sitzen vier warme Flächen nebeneinander im wichtigsten Block
   der Seite. Gilt nur, wo die Seite nicht selbst einen Ton setzt. */
.h-kpi{ --kpi-color: var(--dna-petrol); }

/* Der aktive Zeitraum-Knopf war goldgefüllt mit weißer Schrift.
   Das liest sich schlecht (heller Text auf hellem Gold) und macht
   Gold wieder zur Fläche. Ink füllt, wie überall sonst. */
.h-chip.active{
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* Im Beraterbereich läuft keine Serifenschrift. Die Überschrift
   über dem Verlaufsdiagramm war als einzige in Fraunces stehen
   geblieben, ein Rest aus der Zeit vor dem Dashboard. */
.h-chart-title{
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: -0.02em;
}

/* ============================================================
   Verlaufslinie in den Kennzahlen (Phase 269). Sie steht hinten
   in der Kachel und tritt zurück: die Zahl bleibt die Hauptsache,
   die Linie sagt nur, wohin es geht. Der Punkt am Ende markiert
   den heutigen Stand.
   ============================================================ */
.h-spark{
  display: block;
  width: 100%;
  height: 24px;
  margin-top: 10px;
  overflow: visible;
  /* Die Kachel ist eine Flex-Spalte, in der Zahl, Beschriftung und
     Trendtext ihre Reihenfolge selbst setzen. Ohne diese Angabe
     rutscht die Linie an den Anfang und trennt den Trendtext von
     der Zahl. */
  order: 4;
}
.h-spark polyline{
  fill: none;
  stroke: var(--kpi-color, var(--dna-petrol));
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.42;
  vector-effect: non-scaling-stroke;
}
.h-spark circle{ fill: var(--kpi-color, var(--dna-petrol)); }

/* Auf dem Handy ist die Kachel zu flach für eine zusätzliche Zeile. */
@media (max-width: 560px){
  .h-spark{ display: none; }
}

/* ============================================================
   Der Funnel-Block. Vier Balken in einer Farbe von hell nach
   dunkel: es ist dieselbe Menge Menschen, die auf dem Weg
   weniger wird, und keine vier Kategorien. Den Ton setzt
   js/hub.js je Zeile mit, damit die Zuordnung nicht an der
   Position im Baum hängt.

   Hinweis: Der Block direkt darüber ("Vom Klick zum Kunden")
   zeigt dieselben vier Zahlen noch einmal als Text. Einer von
   beiden könnte weg, das ist eine inhaltliche Entscheidung.
   ============================================================ */
.h-funnel-bar{ background: var(--stufe-ton, var(--dna-petrol)); }

/* ============================================================
   Herkunft eines Kontakts (Phase 271). Empfehlungen und Leads
   aus den Funnel-Seiten stehen in derselben Liste, weil es
   dieselbe Arbeit ist. Man muss aber auf einen Blick sehen,
   was man vor sich hat.
   ============================================================ */
/* Den Ton bringt jede Marke selbst mit (--marke-ton). Er steht in der
   Tabelle funnel_quellen, damit ein neuer Funnel keine Änderung am
   Stylesheet braucht (Phase 273). Die Fläche wird aus demselben Ton
   gemischt, so bleibt die Liste ruhig, egal wie viele Funnels dazu
   kommen. */
.ep-herkunft{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 6px;
  color: var(--marke-ton, var(--dna-petrol));
  background: color-mix(in srgb, var(--marke-ton, var(--dna-petrol)) 10%, transparent);
  font-weight: 600;
  white-space: nowrap;
}
.ep-herkunft i{
  width: 6px;
  height: 6px;
  border-radius: 2px;
  flex: 0 0 auto;
  background: currentColor;
  font-style: normal;
}

/* Woher die Leads kommen, als Aufstellung auf dem Überblick. */
.h-herkunft{
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: 16px 18px;
}
.h-herkunft-row{
  display: grid;
  grid-template-columns: 158px minmax(0, 1fr) 44px;
  gap: 14px;
  align-items: center;
  padding: 7px 0;
}
.h-herkunft-name{ font-size: 13.5px; color: var(--ink-muted); }
.h-herkunft-bar{
  height: 8px;
  border-radius: 3px;
  background: var(--surface-2);
  overflow: hidden;
}
.h-herkunft-bar i{ display: block; height: 100%; }
.h-herkunft-wert{
  text-align: right;
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 560px){
  .h-herkunft-row{ grid-template-columns: 116px minmax(0, 1fr) 38px; gap: 10px; }
  .h-herkunft-name{ font-size: 12.5px; }
}

/* Die Auswahl des einzelnen Funnels. Sitzt eine Ebene unter den
   Reitern und tritt entsprechend zurück. */
.ep-quellen{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.ep-quelle{
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: var(--radius-button);
  border: 1px solid var(--hairline);
  background: var(--surface-2);
  color: var(--ink-muted);
  cursor: pointer;
}
.ep-quelle:hover{ color: var(--ink); }
.ep-quelle.active{
  background: var(--surface);
  border-color: var(--dna-petrol);
  color: var(--dna-petrol);
}
.ep-quelle:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }