/* ============================================================
   Mitlernen: KI — Warme Werkstatt
   extra.css · Stand 2026-06-02
   ============================================================ */

/* ── 1. Google Fonts ─────────────────────────────────────── */
@import url('../assets/external/fonts.googleapis.com/css2.566626e1.css');

/* ── 2. Farb-Tokens Light Mode ───────────────────────────── */
[data-md-color-scheme="default"] {
  --md-primary-fg-color:          #B65D3C;
  --md-primary-fg-color--light:   #D4785A;
  --md-primary-fg-color--dark:    #9C4A2D;
  --md-accent-fg-color:           #C8843D;
  --md-accent-fg-color--transparent: rgba(200, 132, 61, 0.12);
  --md-default-bg-color:          #FAF6F0;
  --md-typeset-color:             #2B2622;

  /* eigene Tokens */
  --ki-surface:    #FFFFFF;
  --ki-border:     #E7DDD0;
  --ki-muted:      #6E635A;
  --ki-primary:    #B65D3C;
  --ki-accent:     #C8843D;
  --ki-hover-shadow: rgba(43, 38, 34, 0.12);
  --ki-card-shadow:  rgba(43, 38, 34, 0.06);

  /* Box-Farben Light
     Zu jeder Box gehört ein eigener --…-title-Ton: Die Rahmenfarbe auf dem
     eigenen (leicht getönten) Kastengrund erreicht 4.5:1 nicht — der Grund
     ist ja aus derselben Farbe gemischt. Balken und Icon behalten deshalb
     den kräftigen Ton, nur die Schrift wird so weit nachgedunkelt, dass sie
     die Schwelle nimmt. Alle Werte im Browser gemessen (siehe Abschnitt 17).
     Im Dark Mode bestehen alle Titel bereits (5.3–6.6:1) → Token = Rahmenton. */
  --ki-box-kern-border:  #B65D3C;
  --ki-box-kern-bg:      rgba(182, 93, 60, 0.08);
  --ki-box-kern-title:   #A35336;          /* 3.84 → 4.61:1 */
  --ki-box-praxis-border: #3F7A6E;
  --ki-box-praxis-bg:    rgba(63, 122, 110, 0.08);
  --ki-box-praxis-title: #3B7266;          /* 4.19 → 4.67:1 */
  --ki-box-probier-border: #C8843D;
  --ki-box-probier-bg:   rgba(200, 132, 61, 0.08);
  --ki-box-probier-title: #8F5C28;         /* 2.90 → 4.86:1 */
  --ki-box-nachdenken-border: #5B6B8C;
  --ki-box-nachdenken-bg:    rgba(91, 107, 140, 0.08);
  --ki-box-nachdenken-title: #596989;      /* 4.49 → 4.64:1 */
  --ki-box-empfehlung-border: #8A5A78;
  --ki-box-empfehlung-bg:    rgba(138, 90, 120, 0.08);
  --ki-box-empfehlung-title: #8A5A78;      /* bereits 4.62:1 */

  /* note = „Tiefer eintauchen" und Einordnungs-Kästen. Material bringt hier
     ein kaltes Blau (#448AFF) mit — der einzige kalte Ton der Seite. Ersetzt
     durch das warme Grau der Palette (4.88:1). */
  --ki-box-note-border:  #6E635A;
  --ki-box-note-bg:      rgba(110, 99, 90, 0.08);
  --ki-box-note-title:   #6E635A;
}

/* ── 3. Farb-Tokens Dark Mode ────────────────────────────── */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color:          #E08A63;
  --md-primary-fg-color--light:   #F0A882;
  --md-primary-fg-color--dark:    #C8683D;
  --md-accent-fg-color:           #E0A45C;
  --md-accent-fg-color--transparent: rgba(224, 164, 92, 0.15);
  --md-default-bg-color:          #1F1B18;
  --md-typeset-color:             #ECE4DA;

  /* eigene Tokens */
  --ki-surface:    #2A2521;
  --ki-border:     #3A332D;
  --ki-muted:      #A89B8C;
  --ki-primary:    #E08A63;
  --ki-accent:     #E0A45C;
  --ki-hover-shadow: rgba(0, 0, 0, 0.35);
  --ki-card-shadow:  rgba(0, 0, 0, 0.20);

  /* Box-Farben Dark */
  --ki-box-kern-border:  #E08A63;
  --ki-box-kern-bg:      rgba(224, 138, 99, 0.10);
  --ki-box-kern-title:   #E08A63;
  --ki-box-praxis-border: #6FB3A3;
  --ki-box-praxis-bg:    rgba(111, 179, 163, 0.10);
  --ki-box-praxis-title: #6FB3A3;
  --ki-box-probier-border: #E0A45C;
  --ki-box-probier-bg:   rgba(224, 164, 92, 0.10);
  --ki-box-probier-title: #E0A45C;
  --ki-box-nachdenken-border: #8E9DBE;
  --ki-box-nachdenken-bg:    rgba(142, 157, 190, 0.10);
  --ki-box-nachdenken-title: #8E9DBE;
  --ki-box-empfehlung-border: #C08BAF;
  --ki-box-empfehlung-bg:    rgba(192, 139, 175, 0.10);
  --ki-box-empfehlung-title: #C08BAF;

  --ki-box-note-border:  #A89B8C;
  --ki-box-note-bg:      rgba(168, 155, 140, 0.10);
  --ki-box-note-title:   #A89B8C;
}

/* ── 4. Hintergrundfarbe anwenden ────────────────────────── */
/* Kein Scheme-Scope: Token --md-default-bg-color ist je Scheme definiert,
   daher greifen diese Regeln automatisch für Light (#FAF6F0) und Dark (#1F1B18). */
.md-main {
  background-color: var(--md-default-bg-color);
}
body {
  background-color: var(--md-default-bg-color);
}

/* ── 4b. Dark-Mode Header — WCAG AA (Befund 4) ───────────── */
/* Light-Mode Header: #B65D3C (Terrakotta) mit weißem Text ≈ 4.6:1 — ok.
   Dark-Mode: #E08A63 mit weißem Text = 2.63:1 — WCAG AA verfehlt.
   Fix: dunkle Surface-Farbe (#1F1B18) mit Terrakotta-Akzentrand statt
   hellem Terrakotta als Header-Hintergrund. Text wird dadurch dunkel
   (var(--md-typeset-color) #ECE4DA auf #1F1B18 = > 12:1 — sehr gut). */
[data-md-color-scheme="slate"] .md-header {
  background-color: #1F1B18;
  border-bottom: 2px solid #C8683D;
}

/* ── 5. Display-Schrift für Überschriften ────────────────── */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-weight: 600;
  line-height: 1.25;
}
.md-typeset h1 { font-size: 2.25rem; font-weight: 700; line-height: 1.2; }
.md-typeset h2 { font-size: 1.6rem; line-height: 1.3; }
.md-typeset h3 { font-size: 1.25rem; line-height: 1.35; }

/* Akzentlinie unter H2 */
.md-typeset h2::after {
  content: "";
  display: block;
  width: 40px;
  height: 2px;
  background-color: var(--ki-accent);
  margin-top: 0.4em;
}

/* Fließtext-Komfort */
.md-typeset {
  font-family: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.7;
  color: var(--md-typeset-color);
}

/* ── 6. Die 4 Inhaltsboxen — neues Farbsystem ────────────── */

/* Themenspezifische Icons pro Box-Typ (Befund 2)
   Eingebettet als SVG data-URIs (Material Design Outline-Icons):
   - kernbotschaft: lightbulb-outline  (Idee / Kernbotschaft)
   - praxis:        chat-outline        (Zitat / Aus der Praxis)
   - probier:       flask-outline       (Experiment / Probier es selbst)
   - nachdenken:    help-circle-outline (Frage / Zum Nachdenken)
   - empfehlung:    thumb-up-outline    (Daumen hoch / Unsere Empfehlung)   */
:root {
  --ki-icon-kernbotschaft: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2a7 7 0 0 1 7 7c0 2.38-1.19 4.47-3 5.74V17a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-2.26C6.19 13.47 5 11.38 5 9a7 7 0 0 1 7-7m0 2a5 5 0 0 0-5 5c0 2.05 1.23 3.81 3 4.58V16h4v-2.42c1.77-.77 3-2.53 3-4.58a5 5 0 0 0-5-5m-1 13h2v1h-2z"/></svg>');
  --ki-icon-praxis:        url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 22c-.55 0-1-.45-1-1v-3H4c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2h-6.1l-3.7 3.71c-.2.18-.44.29-.7.29H9m1-6v3.08L13.08 16H20V4H4v12h6z"/></svg>');
  --ki-icon-probier:       url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 19a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1c0-.21-.07-.41-.18-.57L13 8.35V4h-2v4.35L5.18 18.43A.99.99 0 0 0 5 19m-2 0c0-1.1.45-2.05 1.18-2.76l4.39-7.52C8.21 8.27 8 7.65 8 7V4H7V2h10v2h-1v3c0 .65-.21 1.27-.56 1.72l4.38 7.52A3.994 3.994 0 0 1 21 19c0 1.65-1.35 3-3 3H6a3 3 0 0 1-3-3m9-3a1 1 0 1 1 0 2 1 1 0 0 1 0-2m-2-3a1 1 0 1 1 0 2 1 1 0 0 1 0-2m4 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/></svg>');
  --ki-icon-nachdenken:    url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M11 18h2v-2h-2v2m1-16A10 10 0 0 0 2 12a10 10 0 0 0 10 10 10 10 0 0 0 10-10A10 10 0 0 0 12 2m0 18a8 8 0 0 1-8-8 8 8 0 0 1 8-8 8 8 0 0 1 8 8 8 8 0 0 1-8 8m0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"/></svg>');
  --ki-icon-empfehlung:    url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5,9V21H1V9H5M9,21A2,2 0 0,1 7,19V9C7,8.45 7.22,7.95 7.59,7.59L14.17,1L15.23,2.06C15.5,2.33 15.67,2.7 15.67,3.11L15.64,3.43L14.69,8H21A2,2 0 0,1 23,10V12C23,12.26 22.95,12.5 22.86,12.73L19.84,19.78C19.54,20.5 18.83,21 18,21H9M9,19H18.03L21,12V10H12.21L13.34,4.68L9,9.03V19Z"/></svg>');
}

/* Gemeinsame Basis: linker Akzentbalken statt Vollrahmen */
.md-typeset .admonition.kernbotschaft,
.md-typeset details.kernbotschaft,
.md-typeset .admonition.praxis,
.md-typeset details.praxis,
.md-typeset .admonition.probier,
.md-typeset details.probier,
.md-typeset .admonition.nachdenken,
.md-typeset details.nachdenken,
.md-typeset .admonition.empfehlung,
.md-typeset details.empfehlung {
  border: none;
  border-left: 4px solid;
  border-radius: 10px;
  padding: 0;
  margin: 2rem 0;
  box-shadow: 0 1px 3px var(--ki-card-shadow);
}

/* Titel-Bereich der Boxen
   Befund 1: Icon liegt bei left:12px, Titel-padding-left muss Icon (1.2rem ≈ 19px)
   + Abstand aufnehmen. Lösung: padding-left 44px (Icon 16px + gap 12px + rand 16px). */
.md-typeset .kernbotschaft > .admonition-title,
.md-typeset .kernbotschaft > summary,
.md-typeset .praxis > .admonition-title,
.md-typeset .praxis > summary,
.md-typeset .probier > .admonition-title,
.md-typeset .probier > summary,
.md-typeset .nachdenken > .admonition-title,
.md-typeset .nachdenken > summary,
.md-typeset .empfehlung > .admonition-title,
.md-typeset .empfehlung > summary {
  font-family: "Inter", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 8px 8px 0 0;
  padding: 12px 20px 12px 44px;
  margin: 0;
  position: relative;
}

/* Icon-Pseudo-Element: position & size konsistent ausrichten (Befund 1+2)
   content: "" explizit setzen damit das Pseudo-Element sicher rendert. */
.md-typeset .kernbotschaft > .admonition-title::before,
.md-typeset .kernbotschaft > summary::before,
.md-typeset .praxis > .admonition-title::before,
.md-typeset .praxis > summary::before,
.md-typeset .probier > .admonition-title::before,
.md-typeset .probier > summary::before,
.md-typeset .nachdenken > .admonition-title::before,
.md-typeset .nachdenken > summary::before,
.md-typeset .empfehlung > .admonition-title::before,
.md-typeset .empfehlung > summary::before {
  content: "";
  display: block;
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 1.1rem;
  height: 1.1rem;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
}

/* Inhalts-Bereich der Boxen */
.md-typeset .admonition.kernbotschaft .admonition-title ~ *,
.md-typeset .admonition.kernbotschaft > :not(.admonition-title),
.md-typeset details.kernbotschaft > :not(summary),
.md-typeset .admonition.praxis .admonition-title ~ *,
.md-typeset .admonition.praxis > :not(.admonition-title),
.md-typeset details.praxis > :not(summary),
.md-typeset .admonition.probier .admonition-title ~ *,
.md-typeset .admonition.probier > :not(.admonition-title),
.md-typeset details.probier > :not(summary),
.md-typeset .admonition.nachdenken .admonition-title ~ *,
.md-typeset .admonition.nachdenken > :not(.admonition-title),
.md-typeset details.nachdenken > :not(summary),
.md-typeset .admonition.empfehlung .admonition-title ~ *,
.md-typeset .admonition.empfehlung > :not(.admonition-title),
.md-typeset details.empfehlung > :not(summary) {
  padding: 16px 20px 20px 20px;
  line-height: 1.6;
}

/* Kernbotschaft – Terrakotta · Icon: Glühbirne */
.md-typeset .admonition.kernbotschaft,
.md-typeset details.kernbotschaft {
  border-left-color: var(--ki-box-kern-border);
}
.md-typeset .kernbotschaft > .admonition-title,
.md-typeset .kernbotschaft > summary {
  background-color: var(--ki-box-kern-bg);
  color: var(--ki-box-kern-title);
}
.md-typeset .kernbotschaft > .admonition-title::before,
.md-typeset .kernbotschaft > summary::before {
  background-color: var(--ki-box-kern-border);
  -webkit-mask-image: var(--ki-icon-kernbotschaft);
          mask-image: var(--ki-icon-kernbotschaft);
}

/* Praxis – gedämpftes Petrol-Grün · Icon: Sprechblase */
.md-typeset .admonition.praxis,
.md-typeset details.praxis {
  border-left-color: var(--ki-box-praxis-border);
}
.md-typeset .praxis > .admonition-title,
.md-typeset .praxis > summary {
  background-color: var(--ki-box-praxis-bg);
  color: var(--ki-box-praxis-title);
}
.md-typeset .praxis > .admonition-title::before,
.md-typeset .praxis > summary::before {
  background-color: var(--ki-box-praxis-border);
  -webkit-mask-image: var(--ki-icon-praxis);
          mask-image: var(--ki-icon-praxis);
}

/* Probier – Bernstein · Icon: Kolben/Reagenzglas */
.md-typeset .admonition.probier,
.md-typeset details.probier {
  border-left-color: var(--ki-box-probier-border);
}
.md-typeset .probier > .admonition-title,
.md-typeset .probier > summary {
  background-color: var(--ki-box-probier-bg);
  color: var(--ki-box-probier-title);
}
/* Icon nimmt den Titelton: als Bernstein käme es auf 2.66:1 und verfehlte die
   3:1-Schwelle für grafische Elemente. Bei den übrigen Boxen liegt der
   Rahmenton über 3:1, dort bleibt das Icon kräftig. Der Balken ist rein
   dekorativ und behält überall seine Farbe. */
.md-typeset .probier > .admonition-title::before,
.md-typeset .probier > summary::before {
  background-color: var(--ki-box-probier-title);
  -webkit-mask-image: var(--ki-icon-probier);
          mask-image: var(--ki-icon-probier);
}

/* Nachdenken – Schiefer-Blau · Icon: Fragezeichen/Hilfe */
.md-typeset .admonition.nachdenken,
.md-typeset details.nachdenken {
  border-left-color: var(--ki-box-nachdenken-border);
}
.md-typeset .nachdenken > .admonition-title,
.md-typeset .nachdenken > summary {
  background-color: var(--ki-box-nachdenken-bg);
  color: var(--ki-box-nachdenken-title);
}
.md-typeset .nachdenken > .admonition-title::before,
.md-typeset .nachdenken > summary::before {
  background-color: var(--ki-box-nachdenken-border);
  -webkit-mask-image: var(--ki-icon-nachdenken);
          mask-image: var(--ki-icon-nachdenken);
}

/* Empfehlung – Pflaume/Beere · Icon: Daumen hoch */
.md-typeset .admonition.empfehlung,
.md-typeset details.empfehlung {
  border-left-color: var(--ki-box-empfehlung-border);
}
.md-typeset .empfehlung > .admonition-title,
.md-typeset .empfehlung > summary {
  background-color: var(--ki-box-empfehlung-bg);
  color: var(--ki-box-empfehlung-title);
}
.md-typeset .empfehlung > .admonition-title::before,
.md-typeset .empfehlung > summary::before {
  background-color: var(--ki-box-empfehlung-border);
  -webkit-mask-image: var(--ki-icon-empfehlung);
          mask-image: var(--ki-icon-empfehlung);
}

/* ── 7. Hero-Bereich ─────────────────────────────────────── */
.ki-hero {
  padding: 3rem 0 2.5rem;
  text-align: left;
}

.ki-hero h1 {
  font-family: "Fraunces", Georgia, serif;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--md-typeset-color);
  margin-bottom: 0.5rem;
}

.ki-hero .ki-hero-sub {
  font-family: "Inter", sans-serif;
  font-size: 1.15rem;
  line-height: 1.7;
  color: var(--ki-muted);
  margin-bottom: 1.75rem;
  max-width: 38rem;
}

.ki-hero .ki-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

/* Zitat-Banner */
.ki-quote-banner {
  border-left: 4px solid var(--ki-accent);
  background-color: var(--ki-box-probier-bg);
  border-radius: 0 10px 10px 0;
  padding: 1rem 1.25rem;
  margin: 0 0 2.5rem 0;
  font-style: italic;
  color: var(--ki-muted);
  font-size: 0.975rem;
  line-height: 1.6;
}

.ki-quote-banner strong {
  font-style: normal;
  color: var(--md-typeset-color);
}

/* ── 8. Stufen-Karten ────────────────────────────────────── */

/* Grid-Cards: allgemeine Polierung
   Befund 9: padding 30px → 32px (8er-Raster)
   Befund 7: Dark-Mode Karten-BG aufgehellt (in Scheme-Scope unten) */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid.cards > ol > li {
  border-radius: 12px;
  border: 1px solid var(--ki-border);
  background-color: var(--ki-surface);
  box-shadow: 0 1px 3px var(--ki-card-shadow);
  padding: 2rem;            /* 32px = 8er-Raster (Befund 9) */
  transition: box-shadow 180ms ease-out, transform 180ms ease-out, border-color 180ms ease-out;
}

.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid.cards > ol > li:hover {
  box-shadow: 0 6px 20px var(--ki-hover-shadow);
  transform: translateY(-3px);
  border-color: var(--ki-primary);
}

@media (prefers-reduced-motion: reduce) {
  .md-typeset .grid.cards > ul > li,
  .md-typeset .grid.cards > ol > li {
    transition: box-shadow 180ms ease-out, border-color 180ms ease-out;
  }
  .md-typeset .grid.cards > ul > li:hover,
  .md-typeset .grid.cards > ol > li:hover {
    transform: none;
  }
}

/* Befund 7: Dark-Mode Karten aufhellen (#2A2521 → #332E28 ≈ 1.5:1 besser) */
[data-md-color-scheme="slate"] .md-typeset .grid.cards > ul > li,
[data-md-color-scheme="slate"] .md-typeset .grid.cards > ol > li {
  background-color: #302A25;
  border-color: #4A4038;
}

/* Stufennummer (groß, Akzent-Farbe) */
.ki-stufe-num {
  font-family: "Fraunces", Georgia, serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--ki-accent);
  line-height: 1;
  display: block;
  margin-bottom: 0.25rem;
}

/* Status-Chip (Befund 5: Verfügbar/Bald farblich unterscheidbar) */
.ki-chip {
  display: inline-block;
  padding: 0.2em 0.65em;
  border-radius: 999px;
  font-family: "Inter", sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  margin-top: 0.75rem;
  letter-spacing: 0.02em;
}

/* Verfügbar: einladend Petrol-Grün — gut erkennbar */
.ki-chip--available {
  background-color: rgba(63, 122, 110, 0.15);
  color: #3F7A6E;
  border: 1px solid rgba(63, 122, 110, 0.4);
}

[data-md-color-scheme="slate"] .ki-chip--available {
  background-color: rgba(111, 179, 163, 0.18);
  color: #6FB3A3;
  border-color: rgba(111, 179, 163, 0.4);
}

/* Bald: gedämpft, opacity auf Karte */
.ki-chip--soon {
  background-color: rgba(110, 99, 90, 0.1);
  color: var(--ki-muted);
  border: 1px solid rgba(110, 99, 90, 0.2);
  opacity: 0.75;
}

/* Gedämpfte "Bald"-Karten (Befund 5+6): nicht klickbar, reduzierte Sichtbarkeit */
.ki-card--soon {
  opacity: 0.7;
  cursor: default;
  pointer-events: none;
}

/* Befund 6: "Verfügbar"-Karte (= 1. Karte, :first-child) —
   ganze Karte klickbar via Stretched-Link-Technik.
   Der .md-button--primary-Link erhält ein ::after-Pseudo-Element
   das die gesamte Karte (position:relative) überdeckt. */
.md-typeset .grid.cards > ul > li {
  position: relative;
}

/* Stretched-Link: ::after des primären Buttons in der ersten Karte
   überdeckt die gesamte Karte */
.md-typeset .grid.cards > ul > li:first-child .md-button--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 12px;
}

/* Sonstige klickbare Elemente in der ersten Karte über dem Stretched-Link */
.md-typeset .grid.cards > ul > li:first-child .md-button,
.md-typeset .grid.cards > ul > li:first-child .ki-chip {
  position: relative;
  z-index: 2;
}

/* ── 9. Box-Methoden-Badges (Startseite) ─────────────────── */
.ki-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.ki-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  padding: 0.3em 0.75em;
  border-radius: 8px;
  font-family: "Inter", sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  border: 1px solid;
}

.ki-badge--kern {
  background-color: var(--ki-box-kern-bg);
  color: var(--ki-box-kern-border);
  border-color: rgba(182, 93, 60, 0.25);
}
.ki-badge--praxis {
  background-color: var(--ki-box-praxis-bg);
  color: var(--ki-box-praxis-border);
  border-color: rgba(63, 122, 110, 0.25);
}
.ki-badge--probier {
  background-color: var(--ki-box-probier-bg);
  color: var(--ki-box-probier-border);
  border-color: rgba(200, 132, 61, 0.25);
}
.ki-badge--nachdenken {
  background-color: var(--ki-box-nachdenken-bg);
  color: var(--ki-box-nachdenken-border);
  border-color: rgba(91, 107, 140, 0.25);
}

/* ── 10. Mobile ──────────────────────────────────────────── */
@media screen and (max-width: 640px) {
  .ki-hero h1 {
    font-size: 1.75rem;
  }
  .ki-hero .ki-hero-actions {
    flex-direction: column;
  }
  .ki-hero .ki-hero-actions .md-button {
    width: 100%;
    text-align: center;
  }
}

/* ── 11. Code-Schrift ────────────────────────────────────── */
.md-typeset code,
.md-typeset pre {
  font-family: "JetBrains Mono", "SF Mono", Consolas, monospace;
}

/* ── 12. Footer ──────────────────────────────────────────── */
.md-footer-meta {
  color: var(--ki-muted);
  font-size: 0.85rem;
}

/* ── 13. CTA-Button-Radius (Befund 8) ────────────────────── */
/* Karten: 12px, Boxen: 10px, Buttons bisher: 2px → angleichen auf 7px */
.md-typeset .md-button {
  border-radius: 7px;
}

/* ── 14. Kompass-Emoji Abstand im Quote-Banner (Befund 10) ── */
/* 🧭 klebt am Text — Abstand via &thinsp; direkt im HTML (index.md).
   Kein zusätzliches CSS nötig; bestehende Banner-Styles bleiben. */

/* ── 15. Codeblöcke: Prompts umbrechen statt querlaufen ──── */
/* Unsere Codeblöcke enthalten Prompts, keinen Programmcode. Auf 375px lief
   der lange Beispiel-Prompt 628px breit und war rechts abgeschnitten — man
   musste im Block seitwärts wischen. Prompt-Text darf umbrechen.
   Ausgenommen sind Blöcke MIT Sprachangabe (```python o.ä.): dort ist die
   Einrückung bedeutungstragend und harte Zeilen bleiben erhalten. */
.md-typeset div.highlight:not([class*="language-"]) pre > code {
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* ── 15b. note-Box in den Baukasten holen ────────────────── */
/* `!!! note` und `??? note` („Tiefer eintauchen") kamen im Material-Standard:
   Titel 12.8px/700 statt 19px/600, Akzent kaltes Blau #448AFF (Icon-Kontrast
   2.78:1) — der einzige kalte Ton der Seite. Gleiche Geometrie und warmer
   Grauton wie bei den Custom-Boxen, das Material-Icon bleibt. */
.md-typeset .admonition.note,
.md-typeset details.note {
  border: none;
  border-left: 4px solid var(--ki-box-note-border);
  border-radius: 10px;
  padding: 0;
  margin: 2rem 0;
  box-shadow: 0 1px 3px var(--ki-card-shadow);
}
.md-typeset .note > .admonition-title,
.md-typeset .note > summary {
  font-family: "Inter", sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 8px 8px 0 0;
  padding: 12px 20px 12px 44px;
  margin: 0;
  position: relative;
  background-color: var(--ki-box-note-bg);
  color: var(--ki-box-note-title);
}
.md-typeset .note > .admonition-title::before,
.md-typeset .note > summary::before {
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 1.1rem;
  height: 1.1rem;
  background-color: var(--ki-box-note-border);
}
/* Aufklapp-Pfeil der details-Variante mitziehen */
.md-typeset details.note > summary::after {
  color: var(--ki-box-note-title);
  top: 50%;
  transform: translateY(-50%);
}
/* 90°, nicht 180°: Der Chevron zeigt zugeklappt nach rechts und soll
   aufgeklappt nach unten zeigen. Weil das Icon hier über top:50% zentriert
   ist, muss die Drehung mit dem translateY kombiniert werden. */
.md-typeset details.note[open] > summary::after {
  transform: translateY(-50%) rotate(90deg);
}
.md-typeset .admonition.note > :not(.admonition-title),
.md-typeset details.note > :not(summary) {
  padding: 16px 20px 20px 20px;
  line-height: 1.6;
}

/* ── 15c. Bildunterschriften ─────────────────────────────── */
/* Standen mit 16px über dem Fließtext (12.8px) — die Unterschrift wirkte
   wichtiger als der Text, den sie erläutert. */
.md-typeset figcaption {
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--ki-muted);
  max-width: 100%;
}

/* ── 15d. Trefffläche der Fortschritts-Checkboxen ────────── */
/* Der sichtbare Kasten misst 16px, das umschließende Label hat Breite 0 —
   auf dem Handy ein 16px-Ziel. WCAG 2.2 (Target Size, Minimum) verlangt 24px.
   Material parkt die echte Checkbox unsichtbar hinter dem Inhalt
   (opacity 0, z-index -1). Sie wird hier zur 24px-Trefffläche vergrößert und
   deckungsgleich über den sichtbaren Kasten gelegt (dessen ::before sitzt bei
   left -1.5em, top 0.15em, 1.25em groß → Mitte -0.875em / 0.775em).
   Alle Maße in em, damit die Fläche mit der Schriftgröße mitwächst. */
.md-typeset .task-list-control [type="checkbox"] {
  top: 0;
  left: -1.8125em;
  width: 1.875em;
  height: 1.875em;
  margin: 0;
  z-index: 1;
  cursor: pointer;
}

/* Tastaturbedienung: Die Checkbox ist unsichtbar, ihr Fokusring wäre es auch.
   Der Ring wandert deshalb auf den sichtbaren Kasten. */
.md-typeset .task-list-control [type="checkbox"]:focus-visible ~ .task-list-indicator::before {
  outline: 2px solid var(--ki-primary);
  outline-offset: 2px;
}

/* ── 16. Kopier-Knopf sichtbar machen ────────────────────── */
/* Material zeigt ihn im Ruhezustand mit 1.2:1 — praktisch unsichtbar, und
   auf Touch-Geräten gibt es kein Hover, das ihn hervorholt. Da unsere
   Seiten zum Ausprobieren der Prompts einladen, ist genau das der Knopf,
   der gefunden werden muss. --ki-muted ergibt 5.5:1 hell / 5.3:1 dunkel. */
.md-typeset .md-clipboard,
.md-typeset .md-code__nav button {
  color: var(--ki-muted);
}
.md-typeset .md-clipboard:hover,
.md-typeset .md-clipboard:focus,
.md-typeset .md-code__nav button:hover,
.md-typeset .md-code__nav button:focus {
  color: var(--ki-primary);
}