/* ==========================================================================
   Pfyffer Partner · Design-Tokens
   Ausgelesen aus dem Live-CSS von pfyfferpartner.ch (Stand 20.10.2026).
   Die Variablennamen entsprechen denen der Website, damit Code-Beispiele
   und Komponenten 1:1 übertragbar sind.
   ========================================================================== */

:root {
  /* ---------- Kernfarben ---------- */
  --petrol:        #028C8C;   /* Signaturfarbe: Logo-Box, Fokusring, Akzente */
  --petrol-text:   #017878;   /* Petrol für Text, Links, Buttons (bessere Kontraste) */
  --petrol-tief:   #016A6A;   /* Hover auf Buttons */
  --petrol-aktiv:  #015A5A;   /* Gedrückter Button */

  --eis:           #E3FAFD;   /* Helle Fläche: Inseln, Footer, Hinweise, Chips */
  --eis-tief:      #D2F4F8;   /* Dunklere Fläche, Verlauf-Ende */
  --eis-hell:      #F3FCFD;   /* Ganz leichte Fläche, Verlauf-Mitte */
  --zitat-bg:      #F3FAFA;   /* Hintergrund der Zitat-Sektion */
  --karte-hell:    #FAFCFC;   /* Hintergrund von Infoboxen / Inhaltsverzeichnis */

  --tinte:         #001B17;   /* Haupttext, Titel */
  --text-2:        #33504C;   /* Fliesstext in Artikeln, Antworten, Beschreibungen */
  --grau:          #536360;   /* Lead-Texte, Nebentexte, Rollen, Fussnoten */
  --q-grau:        #A6B2B0;   /* Anführungszeichen in Zitaten */
  --platzhalter:   #7A8A88;   /* Placeholder in Eingabefeldern */
  --nacht:         #0B146E;   /* Dunkelblau (Auszeichnungs-Titel, Grafiken) */
  --dunkel:        #0B2522;   /* Dunkler Bühnen-Hintergrund (Start-Hero) */

  --linie:         rgba(0, 27, 23, .12);  /* Rahmen, Trennlinien */
  --linie-soft:    rgba(0, 27, 23, .07);  /* Feine Trennlinien in Listen */
  --ring:          rgba(2, 140, 140, .2); /* Dekor-Kreis */

  --fehler:        #B42318;
  --markierung:    #C8EFF1;   /* Hervorhebung (mark) auf Weiss */

  /* ---------- Bereichsfarben (je eine pro Anwendung) ---------- */
  --culture:        #634991;
  --culture-tint:   #F3EBFD;
  --culture-tint2:  #E5D9F7;
  --culture-auf:    #6F589A;  /* heller, für Verläufe */
  --culture-ab:     #553F7D;  /* dunkler, für Hover */
  --culture-ring:   #D8CBED;
  --culture-hauch:  #F9F5FE;

  --leadership:        #0D7491;
  --leadership-tint:   #E1F8FF;
  --leadership-tint2:  #AAF1FE;
  --leadership-auf:    #0E7C9A;
  --leadership-ab:     #0B647D;
  --leadership-ring:   #9AE5F3;
  --leadership-hauch:  #F0FCFF;

  --change:        #1F7A55;
  --change-tint:   #E6F6EE;
  --change-tint2:  #BFEEDB;
  --change-auf:    #2A9068;
  --change-ab:     #1A6A49;
  --change-ring:   #AFE2CE;
  --change-hauch:  #F3FAF6;

  /* KI verwendet auf der Website die Change-Farbe */
  --ki:        var(--change);
  --ki-tint:   var(--change-tint);
  --ki-tint2:  var(--change-tint2);
  --ki-hell:   var(--change-hauch);

  /* Aktive Bereichsfarbe. Wird pro Seite/Pfad gesetzt (siehe .bf-*). */
  --bf:        var(--petrol-text);
  --bf-tint:   var(--eis);
  --bf-tint2:  var(--eis-tief);
  --bf-hell:   var(--eis-hell);
  --bf-ab:     var(--petrol-tief);
  --bf-auf:    var(--petrol);

  /* ---------- Schriften ---------- */
  --font-titel: "Cabinet Grotesk", "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-text:  "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ---------- Schriftgrössen ---------- */
  --h1:        clamp(40px, 4.6vw, 64px);   /* Seitentitel */
  --h1-detail: clamp(36px, 3.9vw, 54px);   /* Detailseiten */
  --h2:        clamp(30px, 3.4vw, 44px);   /* Sektionstitel */
  --h2-m:      clamp(28px, 2.8vw, 36px);
  --h2-s:      clamp(24px, 2.3vw, 30px);
  --h3:        22px;                       /* Kartentitel (20 bis 24 px je nach Dichte) */
  --zahl:      clamp(46px, 5vw, 76px);     /* Kennzahlen */
  --lead:      18px;
  --text:      17px;
  --klein:     15px;
  --mini:      14px;

  /* ---------- Radien ---------- */
  --r-s:     10px;   /* kleine Flächen, Eingabefelder, Datumskachel */
  --r-m:     16px;   /* Karten, Bilder, Dropdowns */
  --r-l:     24px;   /* Inseln, grosse Bilder, Dialoge */
  --r-btn:   10px;   /* Buttons */
  --r-tab:    8px;   /* Tabs, Chips, Nav-Links */
  --r-label:  6px;   /* Labels */
  --r-nav:   18px;   /* Kopfzeile */
  --r-feld:  12px;   /* Newsletter-Felder */

  /* ---------- Schatten ---------- */
  --schatten-schwebend: 0 18px 44px rgba(0, 27, 23, .08);
  --schatten-hover:     0 16px 36px -20px rgba(0, 27, 23, .32);
  --schatten-glas:      0 10px 30px rgba(0, 27, 23, .08), inset 0 0 0 1px rgba(0, 27, 23, .04);
  --schatten-sub:       0 26px 60px rgba(0, 27, 23, .16);
  --schatten-dialog:    0 40px 90px -30px rgba(0, 27, 23, .5);
  --fokus-ring:         0 0 0 3px rgba(2, 140, 140, .15);

  /* ---------- Bewegung ---------- */
  --dauer:   .22s;
  --dauer-l: .5s;
  --ease:    cubic-bezier(.2, .7, .2, 1);

  /* ---------- Raster ---------- */
  --breite:       1200px;
  --gut:          28px;   /* Seitenrand; 18 px unter 640 px, 16 px unter 360 px */
  --sek:          72px;   /* Sektionsabstand oben/unten; 48 px unter 700 px */
  --sek-kopf:     44px;   /* Abstand Sektionstitel zu Inhalt; 28 px mobil */
  --karten-gap:   22px;
  --kopf-hoehe:   74px;
  --kopf-oben:    14px;

  color-scheme: light;
}

/* Bereichsfarbe pro Seite oder Lernpfad: Klasse auf <main> oder <body> */
.bf-culture    { --bf: var(--culture);    --bf-tint: var(--culture-tint);    --bf-tint2: var(--culture-tint2);    --bf-hell: var(--culture-hauch);    --bf-ab: var(--culture-ab);    --bf-auf: var(--culture-auf); }
.bf-leadership { --bf: var(--leadership); --bf-tint: var(--leadership-tint); --bf-tint2: var(--leadership-tint2); --bf-hell: var(--leadership-hauch); --bf-ab: var(--leadership-ab); --bf-auf: var(--leadership-auf); }
.bf-change,
.bf-ki         { --bf: var(--change);     --bf-tint: var(--change-tint);     --bf-tint2: var(--change-tint2);     --bf-hell: var(--change-hauch);     --bf-ab: var(--change-ab);     --bf-auf: var(--change-auf); }
.bf-petrol     { --bf: var(--petrol-text); --bf-tint: var(--eis);            --bf-tint2: var(--eis-tief);         --bf-hell: var(--eis-hell);         --bf-ab: var(--petrol-tief);   --bf-auf: var(--petrol); }

/* ==========================================================================
   Basis
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #fff;
  color: var(--tinte);
  font-family: var(--font-text);
  font-size: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: rgba(2, 140, 140, .12);
}

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

h1, h2, h3, h4 {
  font-family: var(--font-titel);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.015em;
  margin: 0;
  text-wrap: balance;
  overflow-wrap: break-word;
  hyphens: auto;
}
@media (min-width: 768px) { h1, h2, h3, h4 { hyphens: manual; } }

h1 { font-size: var(--h1); line-height: 1.04; letter-spacing: -.025em; }
h2 { font-size: var(--h2); }
h3 { font-size: var(--h3); line-height: 1.2; }
h4 { font-size: 20px; line-height: 1.25; }

p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
a { color: var(--petrol-text); }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: 2.5px solid var(--petrol); outline-offset: 3px; border-radius: 6px; }

/* Lead-Text unter Titeln */
.lead { font-size: var(--lead); color: var(--grau); margin-top: 16px; max-width: 40em; }

/* Fliesstext (Artikel, Lerninhalte) */
.prosa { max-width: 52em; font-size: 17px; line-height: 1.65; color: var(--text-2); }
.prosa p + p { margin-top: 16px; }
.prosa h2 { font-size: var(--h2-s); line-height: 1.2; color: var(--tinte); margin-top: 48px; }
.prosa h3 { font-size: 20px; line-height: 1.3; color: var(--tinte); margin-top: 28px; }
.prosa h2 + p, .prosa h3 + p { margin-top: 12px; }
.prosa ul, .prosa ol { margin-top: 16px; padding-left: 22px; display: grid; gap: 10px; }
.prosa ul li { list-style: disc; }
.prosa ol li { list-style: decimal; }
.prosa ol li::marker { font-weight: 600; color: var(--bf); }
.prosa a { color: var(--petrol-text); }
.prosa.gross p { font-size: 18px; line-height: 1.7; }

/* Hervorhebung im Text */
mark {
  background: var(--markierung);
  color: inherit;
  border-radius: .2em;
  padding: 0 .12em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Farbiger Punkt hinter Bereichsnamen («Culture.») */
.punkt {
  display: inline-block;
  width: .16em; height: .16em;
  margin-left: .05em;
  background: var(--bf);
  vertical-align: baseline;
}

/* Raster */
.wrap {
  max-width: var(--breite);
  margin-inline: auto;
  padding-left: max(var(--gut), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gut), env(safe-area-inset-right, 0px));
}
.sek { padding-block: var(--sek); }
.sek-kopf {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 24px 40px; flex-wrap: wrap;
  margin-bottom: var(--sek-kopf);
}
.sek-kopf .titel { max-width: 860px; min-width: 0; }
[id] { scroll-margin-top: 112px; }

@media (max-width: 700px) {
  :root { --sek: 48px; --sek-kopf: 28px; }
}
@media (max-width: 640px) {
  :root { --gut: 18px; }
}
@media (max-width: 360px) {
  :root { --gut: 16px; }
}

/* Nur für Screenreader */
.vh {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}