/* =========================================================================
   Feidt Consulting — Website Stylesheet
   Farben nach "Das Feidt-Farbset", Version 2.0 (Stand August 2026).
   Verbindlich sind die Hex-Werte; alle Rollen unten leiten sich daraus ab.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Schrift — lokal eingebunden, kein Aufruf an Google.
   Mulish ist eine Variable Font: eine Datei je Zeichensatz deckt den
   gesamten Strichstärkenbereich ab, deshalb der Bereich 400–700 statt
   zweier getrennter Schnitte. Lizenz: SIL Open Font License 1.1.
   Kyrillisch und Vietnamesisch sind bewusst nicht eingebunden.
   ------------------------------------------------------------------------- */

@font-face {
  font-family: "Mulish";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/mulish-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                 U+FFFD;
}

@font-face {
  font-family: "Mulish";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/mulish-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* --- Kernset ------------------------------------------------------ */
  --feidt-navy:     #1F3455;  /* Primärfarbe  — Flächen, Headlines      */
  --feidt-violett:  #522781;  /* Sekundärfarbe — Kategorien, Gegenpole  */
  --feidt-bordeaux: #8E3B5C;  /* Akzent — Hervorhebung, Risiko, CTA     */
  --feidt-tanne:    #1E4B3C;  /* Bestätigung — gelöst, bestanden        */
  --feidt-weiss:    #FFFFFF;  /* Raum                                   */

  /* --- Tonleitern 75 / 50 / 25 / 10 % ------------------------------- */
  --navy-75:     #576780;
  --navy-50:     #8F9AAA;
  --navy-25:     #C7CCD5;
  --navy-10:     #E9EBEE;

  --violett-75:  #7D5DA1;
  --violett-50:  #A993C0;
  --violett-25:  #D4C9E0;
  --violett-10:  #EEE9F2;

  --bordeaux-75: #AA6C85;
  --bordeaux-50: #C79DAE;
  --bordeaux-25: #E3CED6;
  --bordeaux-10: #F4EBEF;

  --tanne-75:    #56786D;
  --tanne-50:    #8FA59E;
  --tanne-25:    #C7D2CE;
  --tanne-10:    #E9EDEB;

  /* --- Neutrale & Sondertöne ---------------------------------------- */
  --nacht-navy:   #111B2C;  /* Dark Mode          */
  --indigo-blend: #382D6B;  /* Navy × Violett     */
  --text-grau:    #5A6472;  /* Fließtext          */
  --hellgrau:     #F4F6F9;  /* Kartenflächen      */
  --linien-grau:  #E1E6EC;  /* Rahmen, Linien     */

  /* --- Kategoriale Zusatztöne (Diagramme, Kategorien) --------------- */
  --periwinkle:  #6B7FD7;
  --salbei:      #6FA28B;
  --rose:        #C96D97;
  --silbergrau:  #8A93A6;

  /* --- Abgeleitete Rollen (Light Mode) ------------------------------ */
  --bg:          var(--feidt-weiss);
  --bg-soft:     var(--hellgrau);
  --surface:     var(--feidt-weiss);
  --headline:    var(--feidt-navy);
  --body:        var(--text-grau);
  --body-strong: var(--feidt-navy);
  --line:        var(--linien-grau);
  --kennzeile:   var(--feidt-violett);
  --cta-bg:      var(--feidt-bordeaux);
  --cta-fg:      var(--feidt-weiss);
  --link:        var(--feidt-navy);
  --link-hover:  var(--feidt-bordeaux);
  --stage:       var(--nacht-navy);   /* Hero, CTA-Band — tiefes Navy  */
  --stage-fg:    var(--feidt-weiss);
  --stage-soft:  var(--navy-50);

  /* --- Typografie ---------------------------------------------------- */
  /* Avenir Next LT Pro → Mulish/Montserrat (frei, sehr ähnlich) → Calibri.
     Nur zwei Schnitte: Regular (400) und Demi (600).                    */
  --font: "Avenir Next LT Pro", "Mulish", "Montserrat", Calibri, -apple-system,
          BlinkMacSystemFont, "Segoe UI", sans-serif;
  --demi: 600;
  --regular: 400;

  --max: 1080px;
  --radius: 8px;

  /* Einheitliche Höhe aller Seitenköpfe mit Foto. Nachgemessen bei 1280 px an
     der längsten Kopfzeile, das ist die Methodik mit 388 px Inhalt, plus
     44 px Abstand nach unten. Wird oben Text ergänzt, muss der Wert
     nachgemessen werden; wie, steht in der README unter „Seitenköpfe“.
     Er stieg von 358 auf 418, als Beratungsportfolio, Methodik und
     Fraud-Landkarte die breite Sprungkachel bekamen, und auf 432, als der
     Einstiegssatz der Methodik länger wurde. */
  --head-min: 432px;
}

/* =========================================================================
   Dark Mode — Nacht-Navy als Bühne, Farben eine Stufe aufgehellt
   Zum Entfernen: diesen gesamten Block löschen.
   ========================================================================= */

@media (prefers-color-scheme: dark) {
  :root {
    --bg:          var(--nacht-navy);
    --bg-soft:     #16233a;              /* Nacht-Navy, minimal angehoben */
    --surface:     var(--feidt-navy);
    --headline:    var(--feidt-weiss);
    --body:        var(--feidt-weiss);
    --body-strong: var(--feidt-weiss);
    --line:        var(--navy-75);
    --kennzeile:   var(--violett-50);
    --link:        var(--navy-25);
    --link-hover:  var(--bordeaux-50);
    --stage:       var(--nacht-navy);
    --stage-soft:  var(--navy-50);
  }
}

/* =========================================================================
   Grundlagen
   ========================================================================= */

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-weight: var(--regular);
  font-size: 17px;
  line-height: 1.65;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

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

strong { font-weight: var(--demi); color: var(--body-strong); }

a { color: var(--link); font-weight: var(--demi); }
a:hover { color: var(--link-hover); }

.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 24px;
}

/* Kennzeile: gesperrte Versalien — ausschließlich für kurze Label. */
.eyebrow, .num, .label, .show, .kind, .site-footer strong, .brand {
  font-weight: var(--demi);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* =========================================================================
   Header
   ========================================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.brand {
  font-size: 0.95rem;
  letter-spacing: 0.16em;
  color: var(--headline);
  text-decoration: none;
  line-height: 1.35;
}

.brand span {
  display: block;
  font-weight: var(--regular);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  color: var(--body);
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  align-items: center;
}

.site-nav a {
  color: var(--body);
  font-weight: var(--regular);
  text-decoration: none;
  font-size: 0.92rem;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover { color: var(--headline); }

.site-nav a[aria-current="page"] {
  color: var(--headline);
  border-bottom-color: var(--feidt-bordeaux);
  font-weight: var(--demi);
}

/* Sprachumschalter. Bewusst nur ein Wort statt „DE | EN“: Im Kopf waren bei
   1050 px nur 26 px frei, jede breitere Lösung hätte die Navigation in eine
   zweite Zeile gedrückt. Angezeigt wird immer die andere Sprache, also das,
   wohin der Klick führt. Er sitzt als letztes Element in der Navigation und
   wandert deshalb auf schmalen Geräten mit ihr um. */
.site-nav .lang {
  font-weight: var(--demi);
  letter-spacing: 0.1em;
  font-size: 0.8rem;
  color: var(--kennzeile);
  border-bottom-color: transparent;
}

.site-nav .lang:hover { color: var(--headline); }

/* =========================================================================
   Hero und Seitenkopf
   ========================================================================= */

/* Die Startseite behält das runde Porträt. Es ist der Auftakt und soll sich
   von den freigestellten Figuren der Unterseiten unterscheiden. */
.hero {
  background: var(--stage);
  color: var(--stage-fg);
  padding: 84px 0 80px;
}

/* Text links, Porträt rechts, ab 900 px zweispaltig. */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 56px;
  align-items: center;
}

.hero-portrait { margin: 0; }

.hero-portrait img {
  width: 100%;
  max-width: 300px;
  height: auto;
  margin-left: auto;
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-portrait img { max-width: 220px; margin: 0; }
  /* Das Bild rutscht hier nach links, die Bildunterschrift muss mit.
     Zentriert stünde sie sonst mitten unter der vollen Spaltenbreite und
     damit neben dem Bild statt darunter. */
  .hero-portrait figcaption { text-align: left; }
}

/* =========================================================================
   Freigestellte Fotos

   Die Aufnahmen lagen vor türkisfarbenem Studiohintergrund. Statt eines PNG
   mit Alphakanal liegt jedes Bild als JPEG plus getrennter Maske vor: Ein PNG
   mit Alphakanal wog hier 1,0 bis 1,4 MB, JPEG und Maske zusammen nur 117 bis
   165 KB, bei gleicher Auflösung und ohne sichtbaren Unterschied. Fünf Fotos
   wären sonst 6 MB statt 717 KB.

   Die Maske trägt die Silhouette im Alphakanal, nicht in der Helligkeit, weil
   CSS-Masken ohne `mask-mode: luminance` den Alphakanal auswerten und
   `mask-mode` von älteren WebKit-Fassungen nicht zuverlässig unterstützt wird.
   Der weiche Auslauf nach unten steckt bereits in der Maske; als zweite
   Maskenebene mit `mask-composite` wäre er von der Browserunterstützung
   abhängig gewesen.

   Beherrscht ein Browser gar keine Masken, zeigt er das JPEG als Rechteck auf
   hellem Grund. Das ist nicht kaputt, nur weniger elegant.
   ========================================================================= */

.cutout {
  display: block;
  width: 100%;
  height: auto;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}

.cutout.c-arme       { -webkit-mask-image: url(jpf-arme-verschraenkt-mask.png); mask-image: url(jpf-arme-verschraenkt-mask.png); }
.cutout.c-taschen    { -webkit-mask-image: url(jpf-haende-taschen-mask.png);    mask-image: url(jpf-haende-taschen-mask.png); }
.cutout.c-telefon    { -webkit-mask-image: url(jpf-telefon-mask.png);           mask-image: url(jpf-telefon-mask.png); }
.cutout.c-nachdenk   { -webkit-mask-image: url(jpf-nachdenklich-mask.png);      mask-image: url(jpf-nachdenklich-mask.png); }
.cutout.c-abwaegend  { -webkit-mask-image: url(jpf-abwaegend-mask.png);         mask-image: url(jpf-abwaegend-mask.png); }

/* Auf Expertise und Bühne steht statt der Figur ein Rundporträt. Enge
   Brustbilder wirkten dort angeschnitten; ein Kreis dagegen ist eine gewollte
   Form, bei der nichts abgeschnitten aussieht. Die Kreisform macht das CSS,
   deshalb braucht die Datei keine Maske und keine Transparenz und bleibt als
   quadratisches JPEG auf weißem Grund klein. */
.page-head-photo .portrait {
  box-sizing: border-box;
  width: calc(var(--head-min) - 44px);
  height: calc(var(--head-min) - 44px);
  max-width: 100%;
  max-height: none;
  margin-bottom: 44px;
  border-radius: 50%;
  border: 9px solid var(--feidt-navy);
  /* Grundton der Rundbilder ist Navy 10 %, nicht Weiß. Derselbe Wert ist in
     die JPEGs eingerechnet; wird er hier geändert, müssen die Bilder neu
     erzeugt werden, sonst entsteht am Kreisrand eine Kante. */
  background: var(--navy-10);
  object-fit: cover;
}

/* Seitenkopf mit Foto: Text links, Figur rechts.

   Alle Seitenköpfe sind gleich hoch. `--head-min` ist an der längsten
   Kopfzeile aller Seiten ausgerichtet, damit beim Wechsel zwischen den Seiten
   nichts springt. Die Figur wird auf dieselbe Höhe gedeckelt: Sie ist
   Beiwerk und darf den Textblock nicht überragen. Wird oben Text ergänzt,
   muss der Wert nachgemessen werden; die Prüfung dafür steht in der README. */
.page-head.with-photo { padding-bottom: 0; overflow: hidden; }

.page-head.with-photo .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px;
  align-items: end;
}

/* Die Mindesthöhe gilt für die sieben Inhaltsseiten. Impressum und
   Datenschutz tragen kein Foto und behalten ihre natürliche Höhe; mit über
   200 px Leerraum unter drei Zeilen Text sähe der Kopf dort leer aus. */
.page-head.with-photo .head-text {
  min-height: var(--head-min);
  padding-bottom: 44px;
}

.page-head-photo {
  margin: 0 0 -1px;
  align-self: end;
}

.page-head-photo img {
  max-height: var(--head-min);
  width: auto;
  max-width: 100%;
}

/* Auf dem Handy rutscht die Figur unter den Text. Die feste Mindesthöhe fällt
   weg, sie ergäbe dort nur Leerraum. */
@media (max-width: 900px) {
  .page-head.with-photo .wrap { grid-template-columns: 1fr; gap: 0; }
  .page-head.with-photo .head-text { min-height: 0; padding-bottom: 12px; }
  .page-head-photo { margin-left: auto; margin-right: auto; }
  .page-head-photo img { max-height: 260px; }
  .page-head-photo .portrait { width: 220px; height: 220px; margin-bottom: 36px; border-width: 7px; }
}

@media (max-width: 520px) {
  .page-head-photo img { max-height: 210px; }
  .page-head-photo .portrait { width: 180px; height: 180px; margin-bottom: 30px; border-width: 6px; }
}

.hero .eyebrow {
  font-size: 0.76rem;
  letter-spacing: 0.2em;
  color: var(--stage-soft);
  margin: 0 0 20px;
}

.hero h1 {
  font-size: clamp(2.1rem, 5vw, 3.1rem);
  font-weight: var(--demi);
  line-height: 1.14;
  margin: 0 0 22px;
  letter-spacing: -0.015em;
  color: var(--stage-fg);
}

.hero p {
  font-size: 1.1rem;
  max-width: 62ch;
  color: var(--navy-25);
  margin: 0 0 16px;
}

/* Die drei Versprechen direkt unter der Überschrift. Sie stehen heller und
   größer als die Erklärung darunter. Vorher war oben ein einziger langer
   Absatz, der als Textblock erschlug; jetzt kommt zuerst die Aussage in
   sechs Wörtern und erst danach, wie sie eingelöst wird. */
.hero .hero-claim {
  font-size: 1.3rem;
  font-weight: var(--demi);
  color: var(--stage-fg);
  margin-bottom: 20px;
  max-width: 40ch;
}

/* Auf den dunklen Bühnenflächen darf <strong> nicht die Navy-Textfarbe
   erben — sonst steht Navy auf Navy. */
.hero strong, .cta strong { color: var(--stage-fg); }

.hero .actions {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Der Verweis auf die Expertise steht unter dem Porträt, nicht bei den
   Schaltflächen. Zwei Gründe: Als dritte Taste brach die Reihe je nach
   Fensterbreite in zwei Zeilen um und sah zerfallen aus. Und inhaltlich
   gehört er zur Person, nicht zum Angebot. */
.hero-portrait figcaption {
  margin-top: 16px;
  text-align: center;
  font-size: 0.95rem;
}

.hero-portrait figcaption a {
  color: var(--stage-fg);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hero-portrait figcaption a:hover { text-decoration: none; }

.page-head {
  border-bottom: 1px solid var(--line);
  padding: 64px 0 48px;
  background: var(--bg-soft);
}

.page-head .eyebrow {
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  color: var(--kennzeile);
  margin: 0 0 14px;
}

.page-head h1 {
  font-size: clamp(1.9rem, 4vw, 2.5rem);
  font-weight: var(--demi);
  margin: 0 0 16px;
  letter-spacing: -0.015em;
  line-height: 1.18;
  color: var(--headline);
}

.page-head p {
  margin: 0;
  max-width: 68ch;
  font-size: 1.02rem;
}

/* =========================================================================
   Abschnitte
   ========================================================================= */

section { padding: 64px 0; }
section + section { border-top: 1px solid var(--line); }
section.soft { background: var(--bg-soft); }

/* Getönte Abschnitte auf den 10-%-Stufen. Regel des Farbsets: auf den
   10-%-Stufen trägt Navy den Text — Text-Grau bleibt Weiß und Hellgrau
   vorbehalten. Karten darin bleiben weiß, Linien gehen auf Navy-25. */
section.tint-navy,
section.tint-violett,
section.tint-tanne,
section.tint-bordeaux {
  --body: var(--feidt-navy);
  --line: var(--navy-25);
  --surface: var(--feidt-weiss);
}

section.tint-navy     { background: var(--navy-10); }
section.tint-violett  { background: var(--violett-10); --line: var(--violett-25); }
section.tint-tanne    { background: var(--tanne-10);   --line: var(--tanne-25); }
section.tint-bordeaux { background: var(--bordeaux-10); --line: var(--bordeaux-25); }

/* Auf Nacht-Navy tragen die Aufhellungen nicht — sie werden zur Tönung. */
@media (prefers-color-scheme: dark) {
  section.tint-navy,
  section.tint-violett,
  section.tint-tanne,
  section.tint-bordeaux {
    --body: var(--feidt-weiss);
    --line: var(--navy-75);
    --surface: var(--feidt-navy);
  }
  section.tint-navy     { background: rgba(143, 154, 170, 0.07); }
  section.tint-violett  { background: rgba(169, 147, 192, 0.09); }
  section.tint-tanne    { background: rgba(143, 165, 158, 0.09); }
  section.tint-bordeaux { background: rgba(199, 157, 174, 0.09); }
}

/* Sprungziele nicht unter den klebenden Kopf rutschen lassen. */
section[id], .card[id] { scroll-margin-top: 84px; }

/* Abschlusszeile unter einem Abschnitt */
.closing { margin: 32px 0 0; font-size: 0.95rem; }

/* Zwischenüberschrift im Werdegang. Der Abschnitt war vorher eine Wand aus
   drei langen Absätzen; die Überschriften geben ihm Griffe, an denen man
   sich entlanghangeln kann, ohne alles zu lesen. */
.wd-h {
  font-size: 1.12rem;
  margin: 34px 0 10px;
  color: var(--headline);
}

.wd-h + .lead { margin-top: 0; }

/* Zwischenüberschrift über einer Begriffsliste — Kennzeile, kein <h3> */
.sub-h {
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: var(--demi);
  margin: 34px 0 14px;
}

.sub-h:first-of-type { margin-top: 0; }

/* Abschnittskopf mit Icon */
.block-head {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 8px;
}

.block-head .icon-box { margin-bottom: 0; }
.block-head h2 { margin-bottom: 6px; }
.block-head .sub-h { margin: 0 0 4px; }
.block-head .section-intro { margin-bottom: 0; }
.block-head + .grid, .block-head + ul, .block-head + .lead { margin-top: 32px; }

/* Sprungnavigation im Seitenkopf */
/* Sprungkacheln im Seitenkopf. Sie ersetzen die früheren grauen Pillen: Die
   Farbe trägt hier Bedeutung, sie entspricht dem Thema des Abschnitts, auf den
   die Kachel zeigt. Aufbau und Verhalten sind bewusst dieselben wie bei den
   Einstiegskästen der Startseite, nur kompakter. */
.jump {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.jump a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px 9px 10px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: var(--demi);
  background: var(--navy-10);
  color: var(--feidt-navy);
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.jump a:hover {
  transform: translateY(-2px);
  border-color: currentColor;
  color: var(--feidt-navy);
}

/* Das Icon sitzt in einem kleinen hellen Feld, wie in den Kästen sonst auch. */
.jump .icon-box {
  width: 30px;
  height: 30px;
  margin-bottom: 0;
  flex: none;
  background: var(--feidt-weiss);
  color: inherit;
}

.jump .icon { width: 17px; height: 17px; }

.jump a::after {
  content: "↓";
  font-weight: var(--regular);
  opacity: 0.65;
}

/* Mit `.jump a` davor müssen auch die Farbklassen zwei Stufen tragen, sonst
   gewinnt die allgemeine Regel und alle Kacheln bleiben navy. */
.jump a.j-violett  { background: var(--violett-10);  color: var(--feidt-violett); }
.jump a.j-bordeaux { background: var(--bordeaux-10); color: var(--feidt-bordeaux); }
.jump a.j-tanne    { background: var(--tanne-10);    color: var(--feidt-tanne); }
.jump a.j-navy     { background: var(--navy-10);     color: var(--feidt-navy); }

.jump a.j-violett:hover  { color: var(--feidt-violett); }
.jump a.j-bordeaux:hover { color: var(--feidt-bordeaux); }
.jump a.j-tanne:hover    { color: var(--feidt-tanne); }

@media (prefers-color-scheme: dark) {
  .jump a.j-violett  { background: rgba(169, 147, 192, 0.14); color: var(--violett-50); }
  .jump a.j-bordeaux { background: rgba(199, 157, 174, 0.14); color: var(--bordeaux-50); }
  .jump a.j-tanne    { background: rgba(143, 165, 158, 0.14); color: var(--tanne-50); }
  /* Die 50-%-Stufe des Navy erreicht auf der getönten Fläche nur 4,42 und
     verfehlt AA damit knapp. Eine Stufe heller reicht. */
  .jump a.j-navy     { background: rgba(143, 154, 170, 0.14); color: var(--navy-25); }
  .jump a.j-navy:hover     { color: var(--navy-25); }
  .jump a:hover            { color: var(--navy-25); }
  .jump a.j-violett:hover  { color: var(--violett-50); }
  .jump a.j-bordeaux:hover { color: var(--bordeaux-50); }
  .jump a.j-tanne:hover    { color: var(--tanne-50); }
  .jump .icon-box { background: rgba(255, 255, 255, 0.07); }
}

@media (max-width: 520px) {
  .jump { gap: 8px; }
  .jump a { font-size: 0.86rem; padding: 7px 13px 7px 8px; }
  .jump .icon-box { width: 26px; height: 26px; }
  .jump .icon { width: 15px; height: 15px; }
}

/* =========================================================================
   Argumente — zwei Textblöcke mit farbiger Kante
   ========================================================================= */

/* Überall dort, wo Spalten sich automatisch umbrechen, steht die Mindestbreite
   in `min(… , 100%)`. Ohne das bleibt eine Spalte auch dann bei ihrer
   Mindestbreite, wenn der Bildschirm schmaler ist, und die Seite scrollt
   waagerecht. Auf einem 320 px breiten Gerät stehen nach den Seitenrändern nur
   272 px zur Verfügung, weniger als die Mindestbreite der meisten Raster. */
.reasons {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  margin-top: 36px;
}

.reason {
  border-left: 3px solid var(--feidt-violett);
  padding-left: 22px;
}

.reason:nth-child(2) { border-left-color: var(--feidt-tanne); }
.reason:nth-child(3) { border-left-color: var(--feidt-navy); }

.reason h3 { margin-bottom: 8px; }
.reason p { margin: 0; }

@media (prefers-color-scheme: dark) {
  .reason { border-left-color: var(--violett-50); }
  .reason:nth-child(2) { border-left-color: var(--tanne-50); }
  .reason:nth-child(3) { border-left-color: var(--navy-50); }
}

/* Deutsche Komposita werden lang: „Datenschutzerklärung“ und
   „Datenschutzmanagementsystems“ sind auf einem 320 px breiten Gerät breiter
   als die Spalte und schoben die ganze Seite zur Seite. Überschriften dürfen
   deshalb immer trennen. Die Silbentrennung arbeitet über lang="de" im
   <html>-Tag und greift nur, wenn das Wort sonst nicht passt; `overflow-wrap`
   ist die Rückfalllösung für Browser ohne deutsche Trennmuster.
   Im Fließtext wird nur getrennt, wo es nötig ist, siehe den 560-px-Block
   weiter unten. Am Desktop bleibt der Satz unverändert. */
h1, h2, h3 {
  hyphens: auto;
  overflow-wrap: break-word;
}

/* Notbremse für alle Breiten: Ein Wort, das nirgends hinpasst, bricht um,
   statt aus seiner Karte herauszuragen. Greift nur im Notfall und verändert
   den normalen Satz nicht. */
body { overflow-wrap: break-word; }

h2 {
  font-size: 1.5rem;
  font-weight: var(--demi);
  color: var(--headline);
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}

h3 {
  font-size: 1.08rem;
  font-weight: var(--demi);
  color: var(--headline);
  margin: 0 0 10px;
}

/* Zitatzeile: Demi, Navy — ruhig und ohne Anführungszeichen. */
.lead {
  font-size: 1.05rem;
  max-width: 70ch;
}

.section-intro {
  max-width: 68ch;
  margin: 0 0 36px;
}

/* =========================================================================
   Karten
   ========================================================================= */

.grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

/* Zwei Spalten, z. B. für die vier Leistungsbausteine */
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }

/* Drei Spalten — z. B. für die Unternehmensgrößen */
.grid-3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 900px) { .grid-3 { grid-template-columns: 1fr; } }

/* =========================================================================
   Die drei Einstiege ganz oben — je Disziplin ein großer Kasten, der in
   den zugehörigen Abschnitt weiter unten führt. Fläche auf der 10-%-Stufe,
   Text und Icon in der Vollfarbe der Familie.
   ========================================================================= */

.trio {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, 1fr);
}

.trio-box {
  display: block;
  padding: 30px 26px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  text-decoration: none;
  font-weight: var(--regular);
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.trio-box:hover { transform: translateY(-3px); border-color: currentColor; }

.trio-box .icon-box { background: var(--feidt-weiss); margin-bottom: 18px; }

.trio-box h3 {
  color: inherit;
  font-size: 1.22rem;
  margin: 0 0 10px;
}

.trio-box p {
  margin: 0;
  color: inherit;
  font-size: 0.95rem;
}

.trio-box .more {
  display: inline-block;
  margin-top: 16px;
  font-weight: var(--demi);
  font-size: 0.9rem;
  color: inherit;
}

.t-violett  { background: var(--violett-10);  color: var(--feidt-violett); }
.t-bordeaux { background: var(--bordeaux-10); color: var(--feidt-bordeaux); }
.t-tanne    { background: var(--tanne-10);    color: var(--feidt-tanne); }

@media (prefers-color-scheme: dark) {
  .t-violett  { background: rgba(169, 147, 192, 0.14); color: var(--violett-50); }
  .t-bordeaux { background: rgba(199, 157, 174, 0.14); color: var(--bordeaux-50); }
  .t-tanne    { background: rgba(143, 165, 158, 0.14); color: var(--tanne-50); }
  .trio-box .icon-box { background: rgba(255, 255, 255, 0.07); }
}

@media (max-width: 900px) { .trio { grid-template-columns: 1fr; } }

/* Breiter Kasten quer unter den drei Einstiegen — die vierte, andersartige
   Leistung, deshalb volle Breite statt vierter Spalte. */
.wide-box {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-top: 20px;
  padding: 26px 30px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: var(--navy-10);
  color: var(--feidt-navy);
  text-decoration: none;
  font-weight: var(--regular);
  transition: transform 0.15s ease, border-color 0.15s ease;
}

.wide-box:hover {
  transform: translateY(-2px);
  border-color: currentColor;
  color: var(--feidt-navy);
}

/* Bordeaux-Variante für den KI-Hinweis. Bordeaux steht im Farbset für Risiko
   und ist die Farbe, in der auch der KI-Abschnitt der Fraud-Landkarte
   gehalten ist; der Kasten zeigt also dorthin, wo er farblich hingehört. */
.wide-box.w-bordeaux,
.wide-box.w-bordeaux:hover {
  background: var(--bordeaux-10);
  color: var(--feidt-bordeaux);
}

@media (prefers-color-scheme: dark) {
  .wide-box.w-bordeaux,
  .wide-box.w-bordeaux:hover {
    background: rgba(199, 157, 174, 0.14);
    color: var(--bordeaux-50);
  }
  .wide-box .icon-box { background: rgba(255, 255, 255, 0.07); }
}

.wide-box .icon-box {
  background: var(--feidt-weiss);
  margin-bottom: 0;
  flex: none;
}

.wide-box .wide-text { flex: 1; }

.wide-box h3 {
  color: inherit;
  margin: 0 0 6px;
  font-size: 1.15rem;
}

.wide-box p {
  margin: 0;
  color: inherit;
  font-size: 0.95rem;
}

.wide-box .more {
  flex: none;
  font-weight: var(--demi);
  font-size: 0.92rem;
  color: inherit;
  white-space: nowrap;
}

@media (prefers-color-scheme: dark) {
  .wide-box,
  .wide-box:hover { background: rgba(143, 154, 170, 0.12); color: var(--navy-25); }
  .wide-box .icon-box { background: rgba(255, 255, 255, 0.07); }
}

@media (max-width: 760px) {
  .wide-box { flex-direction: column; align-items: flex-start; gap: 16px; }
  .wide-box .more { white-space: normal; }
}

/* Eine Sprungkachel über die volle Breite, auf Beratungsportfolio, Methodik
   und Fraud-Landkarte. Sie zeigt auf den Abschnitt, in dem es konkret um den
   Leser geht, und steht deshalb als eigene Zeile unter den anderen Kacheln.
   Eine Zeile Text, mehr nicht: Alles Weitere steht in dem Abschnitt, auf den
   sie zeigt. Der Pfeil rutscht dabei ans rechte Ende.

   Sie trägt ein sehr helles Grau statt einer Farbe, weil sie kein Thema
   meint, sondern den Weg zum Leser. Genommen ist Hellgrau, derselbe Ton wie
   der Seitenkopf, auf dem sie liegt. Die Fläche allein wäre damit unsichtbar,
   deshalb zeichnet eine feine Kontur in Linien-Grau die Kachel nach. Das ist
   Absicht und nicht der Notbehelf: So ist sie da, ohne Gewicht zu haben.
   Dunklere Varianten waren im Einsatz und wirkten zu schwer. */
.jump a.j-wide {
  width: 100%;
  background: var(--hellgrau);
  border-color: var(--linien-grau);
  color: var(--feidt-navy);
}

.jump a.j-wide:hover { color: var(--feidt-navy); }

.jump a.j-wide::after { margin-left: auto; }

@media (prefers-color-scheme: dark) {
  .jump a.j-wide,
  .jump a.j-wide:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--navy-75);
    color: var(--navy-25);
  }
}

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px;
  background: var(--surface);
}

.card .num {
  display: inline-block;
  font-size: 0.7rem;
  color: var(--kennzeile);
  margin-bottom: 12px;
}

/* Erledigte Punkte tragen Tanne — das Positiv-Signal des Farbsets. */
.card ul { margin: 0; padding: 0; list-style: none; }

.card li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
}

.card li:last-child { margin-bottom: 0; }

.card > p { margin: 0; }

.card li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--feidt-tanne);
  font-weight: var(--demi);
}

@media (prefers-color-scheme: dark) {
  .card li::before { color: var(--tanne-50); }
}

/* =========================================================================
   Icons — Kontur in der jeweiligen Rollenfarbe, Fläche in der 10-%-Stufe.
   Die Farbe kommt über .c-* von außen; das Icon selbst erbt currentColor.
   ========================================================================= */

.icon {
  width: 24px;
  height: 24px;
  flex: none;
  color: inherit;
}

.icon-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  margin-bottom: 18px;
}

.c-navy     { color: var(--feidt-navy);     background: var(--navy-10); }
.c-violett  { color: var(--feidt-violett);  background: var(--violett-10); }
.c-tanne    { color: var(--feidt-tanne);    background: var(--tanne-10); }
.c-bordeaux { color: var(--feidt-bordeaux); background: var(--bordeaux-10); }

/* Auf Nacht-Navy tragen die 10-%-Stufen nicht — Fläche wird zur Tönung,
   die Kontur wechselt auf die 50-%-Stufe. */
@media (prefers-color-scheme: dark) {
  .c-navy     { color: var(--navy-50);     background: rgba(143, 154, 170, 0.14); }
  .c-violett  { color: var(--violett-50);  background: rgba(169, 147, 192, 0.14); }
  .c-tanne    { color: var(--tanne-50);    background: rgba(143, 165, 158, 0.14); }
  .c-bordeaux { color: var(--bordeaux-50); background: rgba(199, 157, 174, 0.14); }
}

/* =========================================================================
   Kompaktkästen — je Disziplin ein Kasten pro Leistung, verlinkt auf sein
   Pendant im Beratungsportfolio. Kennzeile und Titel sind dort identisch.
   ========================================================================= */

.mini-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 36px;
}

.mini {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--body);
  font-weight: var(--regular);
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.mini:hover {
  transform: translateY(-2px);
  border-color: var(--feidt-bordeaux);
  color: var(--body);
}

.mini .icon-box { width: 40px; height: 40px; margin-bottom: 0; }
.mini .icon { width: 20px; height: 20px; }

.mini-key {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: var(--demi);
  color: var(--body);
}

.mini-title {
  font-weight: var(--demi);
  font-size: 0.98rem;
  line-height: 1.35;
  color: var(--headline);
}

@media (prefers-color-scheme: dark) {
  .mini:hover { border-color: var(--bordeaux-50); }
}

@media (max-width: 900px) { .mini-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .mini-grid { grid-template-columns: 1fr; } }

/* Dreispaltige Variante. Sie steht auf den drei Disziplinen der Startseite
   (neun und zweimal sechs Kästen) und bei den Formaten der Schulungsseite
   (sechs). Zu dritt ergibt das volle Zeilen, während zu viert unten jeweils
   einer allein stünde. Die Kompaktkästen auf Methodik und Fraud-Landkarte
   bleiben vierspaltig, dort gehen die acht Felder glatt auf.

   Die beiden Medienabfragen müssen wiederholt werden: `.mini-grid.drei`
   trägt eine Klasse mehr und gewinnt sonst auch auf dem Handy. */
.mini-grid.drei { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .mini-grid.drei { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .mini-grid.drei { grid-template-columns: 1fr; } }

/* =========================================================================
   Fraud-Arten — Gruppen aus kurzen Begriffen
   ========================================================================= */

/* =========================================================================
   Betrugskategorien

   Jede Kategorie ist eine eigene Karte, die Unterarten darin sind flache
   Schildchen in der Farbe der Kategorie. Vorher waren es weiße Ovale mit
   grauer Kontur: Bei über hundert Einträgen ergab das ein Meer gleich
   aussehender Lutschtabletten, in dem man die Gruppen nicht mehr auseinander
   halten konnte. Jetzt trägt die Farbe die Gruppierung, und die Karte fasst
   sie sichtbar zusammen.
   ========================================================================= */

.fraud-groups {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
}

.fraud-group {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 22px 24px;
  background: var(--surface);
}

.fraud-group h3 {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 0.98rem;
  margin: 0 0 18px;
}

.fraud-group h3 .icon-box { width: 34px; height: 34px; margin: 0; flex: none; }
.fraud-group h3 .icon { width: 18px; height: 18px; }

.fraud-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.fraud-group li {
  font-size: 0.86rem;
  line-height: 1.3;
  padding: 6px 11px;
  border-radius: 6px;
  background: var(--navy-10);
  color: var(--feidt-navy);
}

/* Farbe je Kategorie, passend zum Icon in der Überschrift. */
.fraud-group.g-violett  li { background: var(--violett-10);  color: var(--feidt-violett); }
.fraud-group.g-bordeaux li { background: var(--bordeaux-10); color: var(--feidt-bordeaux); }
.fraud-group.g-tanne    li { background: var(--tanne-10);    color: var(--feidt-tanne); }

/* Im Dark Mode liegen die Schildchen auf der Navy-Kartenfläche, nicht auf
   Weiß. Die 50-%-Stufen erreichen dort nur 3,5 und verfehlen AA; deshalb hier
   durchgehend die 25-%-Stufen. */
@media (prefers-color-scheme: dark) {
  .fraud-group li             { background: rgba(143, 154, 170, 0.16); color: var(--navy-25); }
  .fraud-group.g-violett  li  { background: rgba(169, 147, 192, 0.16); color: var(--violett-25); }
  .fraud-group.g-bordeaux li  { background: rgba(199, 157, 174, 0.16); color: var(--bordeaux-25); }
  .fraud-group.g-tanne    li  { background: rgba(143, 165, 158, 0.16); color: var(--tanne-25); }
}

/* „und vieles mehr“ am Ende jeder Kategorie. Bewusst ohne Schildchen: Als
   Schildchen sähe es aus wie eine weitere Betrugsart, und die Liste wirkte
   dann erst recht vollständig. So ist es ein leiser Zusatz und sagt genau
   das, was es sagen soll, nämlich dass hier längst nicht alles steht. */
.fraud-group li.mehr {
  background: none;
  padding-left: 2px;
  padding-right: 2px;
  color: var(--body);
  opacity: 0.7;
  font-style: italic;
  align-self: center;
}

/* Breite Variante für Kategorien mit vielen Unterarten */
.fraud-groups.wide { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }

@media (max-width: 520px) {
  .fraud-groups.wide { grid-template-columns: 1fr; }
}

/* Kennbuchstabe vor dem Kategorienamen, als eigenes kleines Feld. */
.cat-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-right: 9px;
  border-radius: 5px;
  background: var(--navy-10);
  color: var(--feidt-navy);
  font-size: 0.74rem;
  font-weight: var(--demi);
  letter-spacing: 0;
}

.g-violett  .cat-key { background: var(--violett-10);  color: var(--feidt-violett); }
.g-bordeaux .cat-key { background: var(--bordeaux-10); color: var(--feidt-bordeaux); }
.g-tanne    .cat-key { background: var(--tanne-10);    color: var(--feidt-tanne); }

@media (prefers-color-scheme: dark) {
  .cat-key             { background: rgba(143, 154, 170, 0.16); color: var(--navy-25); }
  .g-violett  .cat-key { background: rgba(169, 147, 192, 0.16); color: var(--violett-25); }
  .g-bordeaux .cat-key { background: rgba(199, 157, 174, 0.16); color: var(--bordeaux-25); }
  .g-tanne    .cat-key { background: rgba(143, 165, 158, 0.16); color: var(--tanne-25); }
}

/* =========================================================================
   Erstgespräch — drei Schritte
   ========================================================================= */

.steps {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, 1fr);
  counter-reset: step;
  margin-top: 36px;
}

.step {
  position: relative;
  padding-top: 52px;
}

.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: var(--demi);
  font-size: 0.95rem;
  color: var(--feidt-weiss);
  background: var(--feidt-navy);
}

.step:nth-child(2)::before { background: var(--feidt-violett); }
.step:nth-child(3)::before { background: var(--feidt-tanne); }

.step h3 { margin-bottom: 8px; }
.step p { margin: 0; }

@media (prefers-color-scheme: dark) {
  .step::before { color: var(--nacht-navy); background: var(--navy-50); }
  .step:nth-child(2)::before { background: var(--violett-50); }
  .step:nth-child(3)::before { background: var(--tanne-50); }
}

@media (max-width: 760px) {
  .steps { grid-template-columns: 1fr; gap: 28px; }
}

/* Vierschrittige Kette. Der vierte Kreis bekommt Bordeaux, sonst müsste die
   Reihe eine Farbe wiederholen. Die beiden Medienabfragen sind für `.vier`
   wiederholt, weil die Klasse sonst auch auf dem Handy vier Spalten
   erzwingt. */
.steps.vier { grid-template-columns: repeat(4, 1fr); }
.steps.vier .step:nth-child(4)::before { background: var(--feidt-bordeaux); }

@media (prefers-color-scheme: dark) {
  .steps.vier .step:nth-child(4)::before { background: var(--bordeaux-50); }
}

@media (max-width: 1000px) { .steps.vier { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .steps.vier { grid-template-columns: 1fr; gap: 28px; } }

/* =========================================================================
   Listen
   ========================================================================= */

ul.clean { list-style: none; margin: 0; padding: 0; }

ul.clean li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 11px;
}

ul.clean li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 10px;
  height: 2px;
  background: var(--feidt-violett);
}

@media (prefers-color-scheme: dark) {
  ul.clean li::before { background: var(--violett-50); }
}

/* Dreiklang in den Werdegang-Karten: woher es kommt, warum es in diesem Feld
   zählt, was es bewirkt. Die Kennzeile läuft im Text mit, statt als eigene
   Zeile darüber zu stehen; das hält die Karten kurz und nimmt den Absätzen
   das Protokollhafte. */
/* Die Karten setzen den Absatzabstand auf null. Für den Dreiklang braucht es
   ihn, sonst laufen die drei Aussagen zu einem Block zusammen. Bewusst über
   eine eigene Klasse und nicht über `:has()`: Das gibt es erst seit 2023, und
   ohne Unterstützung stünden die drei Zeilen wieder aneinandergeklebt. */
.beat-line + .beat-line { margin-top: 10px; }

.beat {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.7rem;
  font-weight: var(--demi);
  color: var(--kennzeile);
  margin-right: 9px;
  white-space: nowrap;
}

@media (prefers-color-scheme: dark) {
  .beat { color: var(--violett-50); }
}

/* Liste mit Icons statt Strichen. Auf der Kontaktseite trägt jeder Punkt eine
   eigene Art von Hilfe, das Icon macht den Unterschied auf einen Blick
   sichtbar. In den Rechtstexten bleibt es beim schlichten Strich; dort wären
   Icons fehl am Platz. */
ul.iconlist { list-style: none; margin: 0; padding: 0; }

ul.iconlist li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}

ul.iconlist .icon-box {
  width: 34px;
  height: 34px;
  margin-bottom: 0;
  flex: none;
}

ul.iconlist .icon { width: 18px; height: 18px; }

/* Branchenliste als Verzeichnis in Spalten. Zwanzig gleich lange Ovale
   nebeneinander ergaben nur eine unruhige Fläche; untereinander mit feiner
   Trennlinie liest sich dieselbe Liste wie ein Register und lässt sich
   tatsächlich überfliegen. */
.tags {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  column-gap: 32px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.tags li {
  display: flex;
  align-items: baseline;
  gap: 11px;
  padding: 11px 2px;
  font-size: 0.95rem;
  color: var(--body-strong);
  border-bottom: 1px solid var(--line);
}

/* Der Punkt vor dem Eintrag ersetzt die frühere Kontur und hält die
   Verbindung zur Farbfamilie des Abschnitts. */
.tags li::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--feidt-tanne);
  transform: translateY(-2px);
}

@media (prefers-color-scheme: dark) {
  .tags li::before { background: var(--tanne-50); }
}

/* =========================================================================
   Definitionsblöcke (Tools, Sprachen)
   ========================================================================= */

.deflist {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

.deflist > div {
  border-left: 2px solid var(--feidt-violett);
  padding-left: 18px;
}

@media (prefers-color-scheme: dark) {
  .deflist > div { border-left-color: var(--violett-50); }
}

/* Sektionstitel-Logik: Hierarchie über Schnitt, nicht über Farbe. */
.deflist h3 {
  font-size: 1rem;
  margin: 0 0 6px;
}

.deflist p { margin: 0; }

/* =========================================================================
   Vorträge — Jahresblöcke
   ========================================================================= */

.year-block {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 24px;
  padding: 28px 0;
  border-top: 1px solid var(--line);
}

.year-block:first-of-type { border-top: none; padding-top: 0; }

.year-block .year {
  font-size: 1.5rem;
  font-weight: var(--demi);
  color: var(--headline);
  line-height: 1.2;
}

.year-block ul { margin: 0; padding: 0; list-style: none; }

.year-block li {
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--line);
  color: var(--body-strong);
}

.year-block li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

/* Formatmarker: die Farbe verstärkt, der Text trägt die Information
   (doppelte Codierung). Kategoriale Reihenfolge des Farbsets ohne
   Bordeaux — Bordeaux bleibt dem Risiko-Signal vorbehalten. */
.kind {
  display: inline-block;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  color: var(--feidt-weiss);
  background: var(--feidt-navy);
  border: 1px solid transparent;
  border-radius: 4px;
  padding: 2px 9px;
  margin-right: 10px;
  vertical-align: 2px;
}

.kind.panel   { background: var(--feidt-violett); }
.kind.chat    { background: var(--feidt-tanne); }
.kind.webinar { background: var(--silbergrau); color: var(--nacht-navy); }

/* Auf Nacht-Navy verlieren die Volltöne ihre Tiefe: Marker werden zu
   Konturen in der 50-%-Stufe — dort kontrastreich genug für Kleintext. */
@media (prefers-color-scheme: dark) {
  .kind,
  .kind.panel,
  .kind.chat,
  .kind.webinar {
    background: transparent;
    color: var(--navy-50);
    border-color: var(--navy-50);
  }
  .kind.panel   { color: var(--violett-50); border-color: var(--violett-50); }
  .kind.chat    { color: var(--tanne-50);   border-color: var(--tanne-50); }
  .kind.webinar { color: var(--silbergrau); border-color: var(--silbergrau); }
}

.host {
  display: block;
  color: var(--body);
  font-weight: var(--regular);
  font-size: 0.9rem;
}

@media (prefers-color-scheme: dark) {
  .host { color: var(--navy-50); }
}

/* =========================================================================
   Podcasts
   ========================================================================= */

.podcast {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  margin-bottom: 16px;
  background: var(--surface);
}

.podcast .show {
  font-size: 0.72rem;
  color: var(--kennzeile);
  margin: 0 0 8px;
}

.podcast h3 { margin: 0 0 6px; font-size: 1.1rem; }
.podcast p  { margin: 0; }

.podcast .meta {
  margin-top: 10px;
  font-size: 0.85rem;
  color: var(--body);
}

.podcast .listen {
  display: inline-block;
  margin-top: 16px;
  text-decoration: none;
  font-size: 0.93rem;
}

.podcast .listen:hover { text-decoration: underline; }

/* =========================================================================
   Buttons — Bordeaux ist die Call-to-Action-Farbe, sparsam und nie flächig.
   ========================================================================= */

.btn {
  display: inline-block;
  padding: 13px 27px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: var(--demi);
  font-size: 0.96rem;
  border: 1px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-primary {
  background: var(--cta-bg);
  color: var(--cta-fg);
}

.btn-primary:hover {
  background: var(--feidt-weiss);
  color: var(--feidt-bordeaux);
  border-color: var(--feidt-bordeaux);
}

.btn-ghost {
  border-color: var(--navy-50);
  color: var(--feidt-weiss);
}

.btn-ghost:hover {
  background: var(--feidt-weiss);
  color: var(--feidt-navy);
  border-color: var(--feidt-weiss);
}

.btn-dark {
  background: var(--feidt-navy);
  color: var(--feidt-weiss);
}

.btn-dark:hover {
  background: var(--feidt-bordeaux);
  color: var(--feidt-weiss);
}

@media (prefers-color-scheme: dark) {
  .btn-dark { background: var(--navy-75); }
  .btn-primary:hover {
    background: transparent;
    color: var(--bordeaux-50);
    border-color: var(--bordeaux-50);
  }
}

/* =========================================================================
   Kontakt
   ========================================================================= */

.contact-grid {
  display: grid;
  gap: 36px;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  align-items: start;
}

.contact-item { margin-bottom: 26px; }

.contact-item .label {
  font-size: 0.72rem;
  color: var(--body);
  margin: 0 0 4px;
}

.contact-item .value {
  font-size: 1.12rem;
  margin: 0;
  color: var(--body-strong);
}

.contact-item .value a { text-decoration: none; }
.contact-item .value a:hover { text-decoration: underline; }

/* =========================================================================
   CTA-Band
   ========================================================================= */

.cta {
  background: var(--stage);
  color: var(--stage-fg);
  padding: 60px 0;
  text-align: center;
}

.cta h2 { color: var(--stage-fg); }

.cta p {
  color: var(--navy-25);
  max-width: 60ch;
  margin: 8px auto 28px;
}

@media (prefers-color-scheme: dark) {
  .cta { border-top: 1px solid var(--line); }
}

/* =========================================================================
   Rechtstexte
   ========================================================================= */

.legal h2 { font-size: 1.12rem; margin-top: 40px; }
.legal h2:first-of-type { margin-top: 0; }
.legal p { max-width: 72ch; }

.legal code {
  font-family: Consolas, "SF Mono", Menlo, monospace;
  font-size: 0.9em;
  background: var(--bordeaux-10);
  color: var(--feidt-bordeaux);
  padding: 1px 6px;
  border-radius: 3px;
}

/* Callout-Fläche auf der 10-%-Stufe, Text in Vollfarbe — nie umgekehrt. */
.legal .note {
  background: var(--bordeaux-10);
  border-left: 3px solid var(--feidt-bordeaux);
  padding: 16px 20px;
  color: var(--feidt-bordeaux);
  font-size: 0.93rem;
  border-radius: 0 var(--radius) var(--radius) 0;
}

.legal .note strong { color: var(--feidt-bordeaux); }

@media (prefers-color-scheme: dark) {
  .legal .note {
    background: rgba(142, 59, 92, 0.16);
    border-left-color: var(--bordeaux-50);
    color: var(--bordeaux-50);
  }
  .legal .note strong { color: var(--bordeaux-50); }
  .legal code {
    background: rgba(142, 59, 92, 0.16);
    color: var(--bordeaux-50);
  }
}

/* =========================================================================
   Footer
   ========================================================================= */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
  padding: 46px 0 36px;
  font-size: 0.92rem;
}

.site-footer .cols {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  margin-bottom: 28px;
}

.site-footer strong {
  display: block;
  color: var(--headline);
  margin-bottom: 8px;
  font-size: 0.72rem;
}

.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 6px; }

.site-footer a {
  color: var(--body);
  font-weight: var(--regular);
  text-decoration: none;
}

.site-footer a:hover { color: var(--link-hover); text-decoration: underline; }

.site-footer .bottom {
  border-top: 1px solid var(--line);
  padding-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
}

/* =========================================================================
   Mobil
   ========================================================================= */

/* Ein klebender Kopf lohnt sich erst, wenn Marke und Navigation in eine Zeile
   passen. Das ist ab 1050 px der Fall, dort ist der Kopf 68 px hoch. Darunter
   rutscht die Navigation unter die Marke und wird 114 px hoch, auf dem Handy
   durch den Umbruch sogar 175 px. Klebend würde sie damit dauerhaft zwischen
   einem Siebtel und einem Fünftel des Bildschirms belegen. Deshalb scrollt der
   Kopf unterhalb von 1050 px mit, und die Sprungziele brauchen dann weniger
   Abstand. Die acht Menüpunkte sind die Ursache: Wer den Kopf früher klebend
   haben will, muss einen davon streichen. */
@media (max-width: 1050px) {
  .site-header { position: static; }
  section[id], .card[id] { scroll-margin-top: 16px; }
}

/* Gesperrte Versalien brauchen auf Geräten, die man in der Hand hält, etwas
   mehr Grundgröße: 0,68 rem sind dort 10,9 px und damit grenzwertig klein.
   Einheitlich 0,75 rem, also 12 px, für Handy und Tablet im Hochformat. Am
   Desktop bleiben die feineren Abstufungen erhalten. */
@media (max-width: 900px) {
  .brand span,
  .mini-key,
  .kind,
  .card .num,
  .page-head .eyebrow,
  .contact-item .label,
  .podcast .show,
  .site-footer strong { font-size: 0.75rem; }
}

/* Auf schmalen Spalten darf auch der Fließtext trennen. Sonst sprengt ein
   einzelnes langes Wort die Karte, in der es steht. Die Silbentrennung selbst
   nur hier, damit der Satz am Desktop unverändert bleibt; `overflow-wrap` als
   reine Notbremse steht weiter oben für alle Breiten. */
@media (max-width: 560px) {
  p, li, dd, dt, .mini-title, .mini-key { hyphens: auto; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .hero { padding: 62px 0 56px; }
  section { padding: 48px 0; }
  .page-head { padding: 44px 0 36px; }
  .year-block { grid-template-columns: 1fr; gap: 10px; }
  .year-block .year { font-size: 1.2rem; }
  .site-header .wrap { padding-top: 12px; padding-bottom: 10px; }
  .site-nav { gap: 2px 16px; }
  .site-nav a { font-size: 0.88rem; }
  .kind {
    display: block;
    width: fit-content;
    margin: 0 0 6px;
    vertical-align: baseline;
  }
}

@media print {
  .site-header, .cta, .hero .actions { display: none; }
  body { font-size: 11pt; }
}