/* =========================================================================
   Mundwerk — Farbthema aus der Programmbroschuere
   Wird NACH styles.css geladen und ueberschreibt nur Farbtokens.
   Ein einziges <link> entfernen = zurueck zum urspruenglichen Design.

   GRUNDGEDANKE
   Ein Header, eine Typografie, eine Kartenform, ein Raster — aber jeder
   Geschaeftsbereich bekommt eine eigene Akzentfarbe. Der Nutzer sieht
   am Farbklang, wo er ist, ohne dass die Seite bunt wird.

   VERTEILUNG (bewusst so gebaut, nicht nach Augenmass)
     ~60 %  Weiss, Creme, helles Grau
     ~25 %  Mundwerk-Blau
     ~10 %  Bereichsfarbe
      ~5 %  Koralle, Pflaume, Dekoakzente

   ─────────────────────────────────────────────────────────────────────────
   FLAECHENKANON — die Regel, an der die erste Fassung gescheitert ist
   ─────────────────────────────────────────────────────────────────────────
   Die erste Fassung hat --accent-surface auf .section-alt UND auf .hero
   gelegt. Auf der MyChance-Seite sind das fuenf von neun Baendern. Damit
   war Gold nicht mehr der Akzent, sondern der Untergrund: statt 10 %
   waren es rund 55 %. Zusammen mit der cremefarbenen Grundflaeche verlor
   die Seite jeden Wechsel — alles lag im selben warmen Gelbbereich, die
   Abschnittsgrenzen verschwanden, und der goldene CTA konnte sich vom
   goldenen Hintergrund nicht mehr abheben.

   Deshalb gilt ab hier verbindlich:

     1. Die Bereichsfarbe ist NIE eine Abschnittsflaeche.
        .section-alt bleibt neutrales Kaltgrau — auf jeder Seite gleich.
     2. Der Flaechenwechsel ist neutral: Warmweiss <-> Kaltgrau.
        Der Temperaturwechsel traegt den Rhythmus, nicht die Farbe.
     3. --accent-surface ist nur fuer KLEINE Elemente erlaubt:
        Avatar, Tabellenkopf, Hover- und Auswahlzustaende. Nie fuer <section>.
     4. Auch der Hero traegt KEINE Bereichsfarbe. Ein Goldschimmer ueber die
        volle Breite ist definitionsgemaess ein gelber Hintergrund, egal wie
        stark er verduennt ist. Der Hero-Verlauf ist auf allen Seiten kuehl
        und gleich; den Bereich sagt die Kante unter dem Header.
     5. Die Bereichsfarbe erscheint als FLAECHE nur an vier festen Stellen:
        Header-Unterkante, Haupt-CTA, Kartenoberkante, Nummernkreis.
        Alles zusammen unter 3 % der Seitenflaeche.
     6. Pro Seite genau eine kraeftige dunkle Bahn (Kontaktband) und der
        Footer. Das ist der Anker, nicht die Bereichsfarbe.
     7. Nie mehr als zwei Akzentfarben gleichzeitig im Blickfeld —
        AUSSER in der einen Piktogramm-Reihe pro Seite (siehe .card-icon).
        Dort ist die volle Palette erlaubt, weil eine Kachel als Bild
        gelesen wird und nicht als Kategorie.
   ========================================================================= */

:root {
  /* --- Mundwerk-Blau bleibt aus der LOGODATEI, nicht aus der Broschuere ---
     #003366 wurde pixelgenau aus dem Logo gemessen, #173B67 nur aus einem
     Foto der gedruckten Broschuere geschaetzt. Der Abstand betraegt 32 von
     765 RGB-Stufen — optisch nicht unterscheidbar. Bei zwei fast gleichen
     Werten gewinnt der belegte. */
  --navy:            #003366;   /* Logo, unveraendert */
  --navy-deep:       #002244;   /* Logo, unveraendert */
  --navy-light:      #2D6FA3;   /* Broschuere: Action Blue, heller und lebendiger */

  /* --- Text --- */
  --charcoal:        #26313D;   /* Broschuere: etwas kuehler als vorher */
  --charcoal-soft:   #596675;

  /* --- Flaechen ---
     Die warme Grundflaeche aus der Broschuere ist aufgegeben. Sie war fuer
     sich genommen unauffaellig, aber jede Spur Creme addiert sich mit Gold
     zu einem Gelbstich, und der war auf der MyChance-Seite nicht mehr
     wegzubekommen. Papiergefuehl ist es nicht wert, dass die Seite muede
     aussieht. Der Wechsel laeuft jetzt zwischen Weiss und kuehlem Hellgrau. */
  --bg:              #FFFFFF;   /* Reines Weiss. Kein Warmton mehr — auch kein
                                   schwacher. Jede Spur Creme addierte sich mit
                                   Gold zu einem Gelbstich, den man nicht mehr
                                   wegbekommt. Weiss ist ausserdem heller und
                                   nimmt der Seite das Duestere. */
  --surface:         #FFFFFF;
  --surface-sunken:  #EFF3F8;   /* Kuehles Hellgrau — der Gegenpol, auf allen Seiten gleich */
  --border:          #D3DBE5;
  --border-strong:   #A9B8CA;

  /* --- Bereichsfarben aus der Broschuere --- */
  --blue:            #2D6FA3;
  --blue-surface:    #EAF2F8;

  --gold:            #F4B247;   /* MyChance */
  --gold-surface:    #FFF4DC;
  --coral:           #F2765B;

  --teal:            #1E7374;   /* Uebersetzungen */
  --teal-bright:     #4DB9B2;
  --mint:            #DFF3EF;

  --plum:            #8F4A78;   /* nur kleine Akzente */
  --magenta:         #B94F7D;
  --plum-light:      #F4E7EF;

  /* --- Status ---
     Statusfarben duerfen NICHT mit der Bereichsfarbe wandern, sonst
     bedeutet Gelb auf der einen Seite "Bereich" und auf der anderen
     "Achtung". Deshalb sind sie hier fest und auf allen Seiten gleich.
     Der Warnton ist bewusst nach Rot verschoben (#FCEBE4 statt #FDF3E4):
     ein bernsteinfarbener Warnkasten auf der goldenen Seite waere vom
     Bereichsakzent nicht zu unterscheiden gewesen. */
  --success:         #16724D;
  --success-bg:      #E3F1EA;
  --warning:         #A8442A;
  --warning-bg:      #FCEBE4;
  --danger:          #B42318;
  --danger-bg:       #FDECEA;
  --info:            #1E5B8A;
  --info-bg:         #E9EFF6;

  --focus-ring:      #2D6FA3;

  /* --- Bereichsakzent: Standard = Mundwerk-Blau ---
     Fuenf Rollen, weil eine Farbe nicht alles kann:
       --accent          Flaeche (Button, Kreis, Kante)
       --accent-on       Text AUF dieser Flaeche
       --accent-surface  helle Bereichsflaeche — NUR fuer kleine Bauteile
       --accent-line     Text und Kontur auf HELLEM Grund
     --accent-line ist zwingend getrennt: Gold als Schriftfarbe erreicht auf
     Creme nur 1,70:1. Als Flaeche mit dunklem Text dagegen 6,09:1. */
  --accent:          #003366;
  --accent-on:       #FFFFFF;
  --accent-surface:  #E9EEF4;
  --accent-line:     #003366;
  --accent-ink:      #002244;

  /* --accent-title — Farbe der Abschnittsueberschriften.
     Getrennt von --accent-ink, weil die Ueberschrift heller sein darf als
     ein Avatar-Kuerzel: sie steht immer auf Weiss und ist immer gross.
     Vorher waren H2 in #002244 — praktisch schwarz. Zusammen mit der
     grauen Unterzeile ergab das zwei duestere Toene ohne Kontrast. */
  --accent-title:    #1E5B8A;
}

/* =========================================================================
   Bereichsthemen — ein Attribut am <body> faerbt die ganze Seite um.
   Gemessene Kontraste stehen jeweils dabei.
   ========================================================================= */

body[data-section="kurse"] {
  --accent:         #2D6FA3;   /* weiss darauf: 5,37:1  AA */
  --accent-on:      #FFFFFF;
  --accent-surface: #EAF2F8;   /* Text #26313D: 11,68:1  AAA */
  --accent-line:    #2D6FA3;   /* auf Flaeche 4,74 · weiss 5,37 · Grund 5,02 */
  --accent-ink:     #003366;
  --accent-title:   #2D6FA3;   /* Action Blue, auf Weiss 5,37:1  AA */
}

body[data-section="arbeit"] {
  --accent:         #F4B247;   /* WEISS VERBOTEN (1,86:1) — Navy darauf: 6,09:1 */
  --accent-on:      #002244;
  --accent-surface: #FFF4DC;   /* Text #26313D: 12,10:1  AAA */
  --accent-line:    #7A4A00;   /* dunkles Bernstein: Flaeche 6,85 · weiss 7,48 · Grund 7,16
                                  Gold selbst waere hier 1,70:1 und damit unlesbar */
  --accent-ink:     #7A4A00;
  --accent-title:   #A85F00;   /* helleres Bernstein, auf Weiss 4,88:1  AA
                                  Waermer und lebendiger als #7A4A00 (7,48:1),
                                  ohne unter die Normgrenze zu rutschen. */
}

body[data-section="uebersetzung"] {
  --accent:         #1E7374;   /* weiss darauf: 5,59:1  AA */
  --accent-on:      #FFFFFF;
  --accent-surface: #DFF3EF;   /* Text #26313D: 11,46:1  AAA */
  --accent-line:    #1E7374;   /* auf Flaeche 4,84 · weiss 5,59 · Grund 5,23 */
  --accent-ink:     #14514F;
  --accent-title:   #1E7374;   /* auf Weiss 5,59:1  AA */
}

body[data-section="start"] {
  --accent:         #003366;   /* weiss darauf: 12,61:1  AAA */
  --accent-on:      #FFFFFF;
  --accent-surface: #E9EEF4;
  --accent-line:    #003366;   /* auf Flaeche 10,81 · weiss 12,61 · Grund 11,80 */
  --accent-ink:     #002244;
  --accent-title:   #1E5B8A;   /* auf Weiss 7,20:1  AAA */
}

/* =========================================================================
   Anwendung der Bereichsfarbe auf vorhandene Bausteine
   ========================================================================= */

/* --- Flaechenwechsel zwischen den Abschnitten ---
   REGEL 1 und 2 des Flaechenkanons.
   .section-alt wird hier bewusst NICHT mehr angefasst: es bleibt bei dem
   neutralen --surface-sunken aus styles.css. Der Wechsel Warmweiss <->
   Kaltgrau traegt den Rhythmus. Faerbte man diese Baender ein, waere die
   Bereichsfarbe wieder die Haelfte der Seite. */

/* Der Hero ist auf jeder Seite gleich kuehl. Ein bereichsgefaerbter Hero
   waere auf der MyChance-Seite wieder ein gelber Hintergrund — nur eben
   ein hoeflicher. Den Bereich sagt die Kante unter dem Header. */
.hero {
  background: linear-gradient(180deg, #E7F0F9 0%, var(--bg) 100%);
  border-bottom: 1px solid var(--border);
}

/* Eine kraeftige dunkle Bahn pro Seite setzt den Rhythmus.
   Mehr als eine wuerde die Seite schwer machen. */
.contact-panel { background: var(--navy-deep); }

/* Der Bereich wird oben einmal klar angesagt: 3 px unter dem Header.
   Das ersetzt die eingefaerbten Baender — gleiche Erkennbarkeit,
   ein Bruchteil der Flaeche. */
.site-header { border-bottom: 3px solid var(--accent); }

/* --- Buttons --- */
.btn-primary   { background: var(--accent);    color: var(--accent-on); border-color: var(--accent); }
.btn-primary:hover { background: var(--navy-deep); border-color: var(--navy-deep); color: #fff; }
body[data-section="arbeit"] .btn-primary:hover { background: #DE9722; border-color: #DE9722; color: var(--navy-deep); }

/* Der Sekundaerbutton bleibt auf allen Seiten Mundwerk-Blau und wandert
   NICHT mit dem Bereich mit. Vorher trug er --accent-line: auf der
   MyChance-Seite standen damit zwei bernsteinfarbene Buttons nebeneinander,
   und der Unterschied zwischen "das ist die Aktion" und "das geht auch"
   hing nur noch an gefuellt/umrandet. Der Bereich faerbt genau einen
   Button pro Gruppe — den, den wir wirklich meinen. */
.btn-secondary { color: var(--navy); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--navy); color: #fff; border-color: var(--navy); }

.btn-work      { background: var(--gold); color: var(--navy-deep); border-color: var(--gold); }
.btn-work:hover{ background: #DE9722; border-color: #DE9722; color: var(--navy-deep); }

.btn-translate { background: var(--teal); color: #fff; border-color: var(--teal); }
.btn-translate:hover { background: #14514F; border-color: #14514F; color: #fff; }

.btn-ghost { color: var(--blue); }

/* --- Routenkarten auf der Startseite: je Bereich eine Farbe --- */
.route            { border-top: 5px solid var(--blue); }
.route .route-icon, .route .fake-btn { color: var(--blue); }
.route:hover      { border-color: var(--border); border-top-color: var(--blue); }

.route--work      { border-top-color: var(--gold); background: var(--gold-surface); }
.route--work .route-icon, .route--work .fake-btn { color: #7A4A00; }
.route--work:hover { border-color: var(--gold); border-top-color: var(--gold); }

.route--translate { border-top-color: var(--teal); background: var(--mint); }
.route--translate .route-icon, .route--translate .fake-btn { color: var(--teal); }
.route--translate:hover { border-color: var(--teal); border-top-color: var(--teal); }

/* --- Karten bekommen eine feine Akzentkante --- */
.card { border-top: 3px solid var(--accent); }
.section-alt .card { background: var(--surface); }

/* --- Situations- und Auswahlkarten --- */
.situation:hover { border-color: var(--accent); background: var(--accent-surface); }
.choice:has(input:checked) { border-color: var(--accent); background: var(--accent-surface); }

/* --- Modulleiter: Verlauf in der Bereichsfarbe --- */
.ladder::before { background: linear-gradient(90deg, var(--teal-bright), var(--blue), var(--navy)); }
@media (max-width: 899px) { .ladder::before { background: linear-gradient(180deg, var(--teal-bright), var(--blue), var(--navy)); } }
.rung-dot { background: var(--blue); }
.rung--final .rung-dot { background: var(--teal); }
.rung-level { background: var(--blue-surface); color: var(--navy-deep); }

/* --- Zeitstrahl und Schrittlisten --- */
.timeline li::before { background: var(--accent); color: var(--accent-on); }
.steps li::before    { background: var(--accent); color: var(--accent-on); }

/* --- Szenarienkarten: Farbe markiert die Reihenfolge, nicht die Wichtigkeit --- */
.scenario:nth-child(1) { border-top-color: var(--navy); }
.scenario:nth-child(2) { border-top-color: var(--teal); }
.scenario:nth-child(3) { border-top-color: var(--blue); }
.scenario:nth-child(4) { border-top-color: var(--plum); }

/* --- Hinweisboxen ---
   Auf allen Seiten identisch. Vorher war der Standardhinweis mintgruen:
   auf der goldenen MyChance-Seite stand damit eine bereichsfremde Farbe
   in jedem zweiten Abschnitt — die dritte Farbe im Blickfeld. */
.note          { background: var(--info-bg);        border-left-color: var(--info); }
.note--warn    { background: var(--warning-bg);     border-left-color: var(--warning); }
.note--legal   { background: var(--surface-sunken); border-left-color: var(--charcoal-soft); }
.level-note    { background: var(--blue-surface);   border-left-color: var(--blue); }

/* =========================================================================
   Ueberschriften tragen Farbe, Fliesstext nicht
   -------------------------------------------------------------------------
   Vorher: H2 in #002244 (praktisch schwarz), darunter die Unterzeile in
   Grau. Zwei duestere Toene, kein Kontrast, viel Text — die Seite wirkte
   muede. Jetzt traegt die Ueberschrift die Bereichsfarbe und die Unterzeile
   bleibt neutral. Das ist der Kontrast, der der Seite gefehlt hat.
   Der Fliesstext bleibt ausdruecklich #26313D: Farbe im Absatz macht
   lange Texte schwerer lesbar, nicht leichter.

   Die Farbe markiert die ABSCHNITTSEBENE, nicht jede Ueberschrift.
   H2 traegt die Bereichsfarbe, H3 bleibt Navy. Als auch die H3 farbig
   waren, stand in jeder Karte zweimal dieselbe Farbe — neben einer
   bunten Kachel wurde das unruhig, und die Hierarchie ging verloren.
   ========================================================================= */
h2                 { color: var(--accent-title); }
.section-head p    { color: var(--charcoal-soft); }
.card h3           { color: var(--navy-deep); }

/* Auf dunklem Grund gilt das nicht — dort bleibt Weiss. */
.contact-panel h2  { color: #FFFFFF; }

/* =========================================================================
   Piktogramm-Kacheln — die eine Farbstelle der Seite
   -------------------------------------------------------------------------
   Hier ist die volle Broschuerenpalette erlaubt. Sechs kraeftige Kacheln
   lesen sich als Bild, nicht als Kategorie, und geben dem textlastigsten
   Block der Seite endlich etwas zu sehen.
   Reserviert bleiben Gruen, Rot und Koralle — das sind Statusfarben.
   Alle Kombinationen sind gemessen und mindestens AA.
   ========================================================================= */
.tiles .card:nth-child(1) .card-icon { background: #003366; color: #FFFFFF; } /* 12,61:1 */
.tiles .card:nth-child(2) .card-icon { background: #2D6FA3; color: #FFFFFF; } /*  5,37:1 */
.tiles .card:nth-child(3) .card-icon { background: #F4B247; color: #002244; } /*  6,09:1 — Bereichsfarbe auf der Kernaussage */
.tiles .card:nth-child(4) .card-icon { background: #1E7374; color: #FFFFFF; } /*  5,59:1 */
.tiles .card:nth-child(5) .card-icon { background: #8F4A78; color: #FFFFFF; } /*  6,14:1 */
.tiles .card:nth-child(6) .card-icon { background: #4DB9B2; color: #002244; } /*  4,79:1 */

/* --- Kleine Akzente: Pflaume nur hier --- */
.eyebrow      { color: var(--accent-ink); }
.funding-tag  { background: var(--blue-surface); color: var(--navy-deep); }
/* Die Ergebnis-Chips hatten Pfeile in Gold, Tuerkis und Pflaume im Wechsel.
   Das ist genau der Fall, den die Systemseite unter "So nicht" fuehrt:
   vier Akzentfarben auf einem Bildschirm, und die Farbe suggeriert eine
   Ordnung, die es nicht gibt — Praktikum ist nicht "goldener" als
   Ausbildung. Ein Ton fuer alle. */
.outcome      { border-color: var(--border); }
.outcome svg  { color: var(--accent-line); }

/* --- Piktogramme und Vertrauenselemente --- */
.picto svg       { color: var(--accent); }
.trust-item svg  { color: var(--teal); }
.factor svg      { color: var(--teal); }
.person-avatar   { background: var(--accent-surface); color: var(--accent-ink); }

/* --- Tabellen --- */
table.data th { background: var(--accent-surface); color: var(--navy-deep); }

/* --- Kopf- und Fusszeile bleiben ueberall gleich: das haelt die Marke zusammen ---
   (Die Bereichskante steht weiter oben und darf hier nicht ueberschrieben werden.) */
.site-header { background: var(--surface); }
.site-footer { background: var(--navy-deep); color: #D6DFEA; }
.site-footer h3 { color: #FFFFFF; }
.footer-list a  { color: #D6DFEA; }
.footer-list a:hover { color: #FFFFFF; }
.footer-bottom  { color: #A9BACD; border-top-color: rgba(255,255,255,.18); }

/* F1: die Farbe der Richtung traegt die Kante unter dem aktuellen Punkt. */
.nav-list > li > a:not(.btn):is([aria-current="page"], [aria-current="true"]) {
  color: var(--accent-ink); border-bottom-color: var(--accent); box-shadow: none;
}

/* --- Demoleiste --- */
.demo-bar { background: var(--navy-deep); }

/* --- Badges bleiben semantisch, nicht dekorativ --- */
.badge-info { background: var(--mint); color: var(--teal); border-color: #B4DED8; }