/* ==========================================================================
   40_custom.css – Projektspezifische Stile: Custom Components
   
   NUR projektspezifische Sonderfälle – keine Tokens, keine generische Typo.
   Tokens   → 00_tokens.css
   Typo     → 10_typography.css
   Layout   → 20_book.css
   Kompon.  → 30_components.css
   
   Ladereihenfolge: 00 → 10 → 20 → 30 → 40
   ========================================================================== */


/* ─────────────────────────────────────────────────────────────
   COVER – fully frozen (no rem/vw/clamp)
   Teil 1/4: COVER-Container + Tokens (ohne Zone 1/2/3)
   Ziele:
   - Desktop: exakt 460×750, stabil
   - Mobile: Sprung auf 360×588, stabil (unter 560px)
   - Keine rem/vw/clamp
   - Keine "Global-Reset"-Regel, die H1 etc. kaputtmacht
   ───────────────────────────────────────────────────────────── */

/* 1) Tokens (Desktop + Mobile proportional) */
.md-typeset .admonition.cover {
  /* Dimensions */
  --cover-w: 460px;
  --cover-h: 750px;

  --cover-w-sm: 360px;
  --cover-h-sm: 590px; /* 750 * (360/460) ≈ 588 */

  /* Layout */
  --cover-radius: 18px;
  --cover-radius-sm: 14px;

  /* Spacing (Desktop) */
  --cover-gap-md: 10px;
  --cover-gap-sm: 6px;

  --cover-pad-top: 36px;
  --cover-pad-x: 48px;
  --cover-pad-bottom: 48px;

  /* Spacing (Mobile, proportional s≈0.7826) */
  --cover-gap-md-sm: 8px;
  --cover-gap-sm-sm: 5px;

  --cover-pad-top-sm: 22px;
  --cover-pad-x-sm: 38px;
  --cover-pad-bottom-sm: 20px;

  /* Typography base (frozen) */
  --cover-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --cover-base-size: 16px;
  --cover-base-size-sm: 13px;
  --cover-base-lh: 1.2;

  /* Colors */
  --cover-bg: #243041;
  --cover-fg: #EAF1F8;
  --cover-border: rgba(255, 255, 255, 0.08);
  --cover-shadow: 0 16px 50px rgba(0, 0, 0, 0.32);

  /* Typography scale */

  --cover-h1-size: 2.8em;
  --cover-h1-lh: 1.10;

  --cover-subtitle-size: 1.30em;
  --cover-subtitle-lh: 1.35;

  --cover-label-size: 0.75em;
  --cover-label-lh: 1.0;

  --cover-name-size: 1.0em;
  --cover-name-lh: 1.35;

  /* >>> HIER ergänzen <<< */
  --cover-footer-size: 0.85em;
  --cover-footer-lh: 1.05;

  --cover-meta-gap: 6px;
}

@media (max-width: 560px) {
  .md-typeset .admonition.cover {
    --cover-h1-size: 2.6em;
  }
}

/* 2) Desktop/default: eingefroren */
.md-typeset .admonition.cover {
  box-sizing: border-box;

  width: var(--cover-w);
  height: var(--cover-h);

  margin-inline: auto;
  margin-bottom: 4rem;

  background: var(--cover-bg);
  color: var(--cover-fg);

  border: 1px solid var(--cover-border);
  border-radius: var(--cover-radius);
  box-shadow: var(--cover-shadow);

  padding: var(--cover-pad-top) var(--cover-pad-x) var(--cover-pad-bottom) var(--cover-pad-x);

  display: flex;
  flex-direction: column;
  gap: var(--cover-gap-md);

  font-family: var(--cover-font-family);
  font-size: var(--cover-base-size);
  line-height: var(--cover-base-lh);
}

/* 3) Admonition chrome aus (Zensical/Material safe) */
.md-typeset .admonition.cover::before { display: none; }
.md-typeset .admonition.cover > .admonition-title { display: none; }
.md-typeset .admonition.cover > *:not(.admonition-title) { margin: 0; }

/* 4) Mobile: zweite stabile Definition (Sprung) */
@media (max-width: 560px) {
  .md-typeset .admonition.cover {
    width: min(100%, var(--cover-w-sm)); /* darf schrumpfen, um Overflow zu vermeiden */
    max-width: var(--cover-w-sm);
    height: var(--cover-h-sm);

    border-radius: var(--cover-radius-sm);

    padding: var(--cover-pad-top-sm) var(--cover-pad-x-sm) var(--cover-pad-bottom-sm) var(--cover-pad-x-sm);

    gap: var(--cover-gap-md-sm);

    font-size: var(--cover-base-size-sm);
  }
}

/* 5) WICHTIG: Kein globales "* { font-size: inherit; }" im Cover.
   Das hat dir H1/Subline usw. kaputtgemacht.
   Wenn du Theme-Einflüsse dämpfen willst, machen wir das gezielt pro Zone. */

/* ─────────────────────────────────────────────────────────────
   ZONE 1: Header (Titel + Subtitle) – fully frozen
   Voraussetzungen:
   - Cover-Container setzt font-size (16px / 13px mobile) + line-height
   - Keine globalen *-Resets im Cover
   ───────────────────────────────────────────────────────────── */

/* Title block */
.md-typeset .admonition.cover .cover-title-block {
  display: flex;
  flex-direction: column;
  gap: var(--cover-gap-sm);
}

/* H1 im Cover (explizit, damit Theme nichts überschreibt) */
.md-typeset .admonition.cover .cover-title-block h1 {
  font-family: var(--cover-font-family);
  font-size: var(--cover-h1-size);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: var(--cover-h1-lh);
  color: var(--cover-fg);

  margin: 0;
  padding: 0;

  max-width: 15ch;
}

/* Akzent im Titel */
.md-typeset .admonition.cover .cover-title-block h1 .cover-title-accent {
  color: var(--book-title-accent);
  font-weight: 700;
}

/* Subtitle (explizit) */
.md-typeset .admonition.cover .cover-subtitle {
  font-family: var(--cover-font-family);
  font-size: var(--cover-subtitle-size);
  font-weight: 500;
  letter-spacing: 0.005em;
  line-height: var(--cover-subtitle-lh);

  color: var(--cover-fg);
  opacity: 0.8;

  margin: 0;
}

/* Mobile: nur Layout-Feintuning (Typo skaliert über cover-base-size-sm automatisch) */
@media (max-width: 560px) {
  .md-typeset .admonition.cover .cover-title-block {
    gap: var(--cover-gap-sm-sm);
  }

  .md-typeset .admonition.cover .cover-title-block h1 {
    max-width: 16ch;
  }
}

/* ─────────────────────────────────────────────────────────────
   ZONE 2: Main (Koordination + Autor:innen) – fully frozen
   - Pair-Wrap: pro Zeile nur "Name · Name"
   - Keine rem/vw/clamp
   - Mobile skaliert über cover-base-size-sm + eigene Gap-Tokens
   ───────────────────────────────────────────────────────────── */

/* Section wrappers */
.md-typeset .admonition.cover .cover-coordination,
.md-typeset .admonition.cover .cover-authors {
  display: flex;
  flex-direction: column;
  gap: var(--cover-gap-sm);
}

/* Label */
.md-typeset .admonition.cover .cover-label {
  font-family: var(--cover-font-family);
  font-size: var(--cover-label-size);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: var(--cover-label-lh);

  color: var(--cover-fg);
  opacity: 0.60;

  margin: 0;
}

/* Single name line (Koordination) */
.md-typeset .admonition.cover .cover-name {
  font-family: var(--cover-font-family);
  font-size: var(--cover-name-size);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: var(--cover-name-lh);

  color: var(--cover-fg);
  opacity: 0.9;

  margin: var(--cover-meta-gap) 0 0 0;
}

/* Authors list layout */
.md-typeset .admonition.cover .cover-authors-list {
  display: flex;
  flex-wrap: wrap;

  /* Desktop gaps (px) */
  column-gap: 10px;
  row-gap: 6px;

  align-items: flex-start;

  margin: var(--cover-meta-gap) 0 0 0;
  padding: 0;

  max-width: 32ch;
}

/* Pair wrapper: keeps "Name · Name" together */
.md-typeset .admonition.cover .cover-authors-list .pair {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}

/* Name */
.md-typeset .admonition.cover .cover-authors-list .name {
  font-family: var(--cover-font-family);
  font-size: var(--cover-name-size);
  font-weight: 450;
  letter-spacing: 0.005em;
  line-height: var(--cover-name-lh);

  color: var(--cover-fg);
  opacity: 0.9;

  margin: 0;
  white-space: nowrap;
}

/* Separator in authors list */
.md-typeset .admonition.cover .cover-authors-list .separator {
  font-family: var(--cover-font-family);
  font-size: var(--cover-name-size);
  line-height: var(--cover-name-lh);

  color: var(--cover-fg);
  opacity: 0.60;

  margin: 0;
}

/* Mobile: scaled gaps (optional but recommended for proportion) */
@media (max-width: 560px) {
  .md-typeset .admonition.cover .cover-coordination,
  .md-typeset .admonition.cover .cover-authors {
    gap: var(--cover-gap-sm-sm);
  }

  .md-typeset .admonition.cover .cover-authors-list {
    column-gap: 8px;
    row-gap: 5px;
  }

  .md-typeset .admonition.cover .cover-authors-list .pair {
    gap: 5px;
  }
}

/* ─────────────────────────────────────────────────────────────
   ZONE 3: Footer – fully frozen
   - bleibt unten via margin-top:auto
   - Separator im Footer explizit
   - keine rem/vw/clamp
   ───────────────────────────────────────────────────────────── */

.md-typeset .admonition.cover .cover-footer {
  font-family: var(--cover-font-family);
  font-size: var(--cover-footer-size);
  line-height: var(--cover-footer-lh);

  color: var(--cover-fg);

  margin-top: auto;

  padding-top: 14px;
  border-top: 0.5px solid #7ab0e8;

  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* direkter Footer-Content */
.md-typeset .admonition.cover .cover-footer > div {
  margin: 0;
  padding: 0;
}

/* obere Zeile: Uni · Jahr */
.md-typeset .admonition.cover .cover-footer-top {
  display: flex;
  align-items: baseline;
  margin: 0;
  padding: 0;
}

/* Footer-Separator */
.md-typeset .admonition.cover .cover-footer-top .separator {
  display: inline-block;
  margin: 0 6px;
  opacity: 0.60;
  line-height: 1;
  color: var(--cover-fg);
}

/* Jahr-Block */
.md-typeset .admonition.cover .cover-footer-year {
  margin: 0;
  padding: 0;
}

/* Link-Zeile */
.md-typeset .admonition.cover .cover-footer a {
  color: #7ab0e8;
  font-weight: 600;

  text-decoration: underline;
  text-decoration-color: #7ab0e8;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* Mobile proportional tweaks */
@media (max-width: 560px) {
  .md-typeset .admonition.cover .cover-footer {
    padding-top: 11px;
    gap: 3px;
  }

  .md-typeset .admonition.cover .cover-footer-top .separator {
    margin: 0 5px;
  }

  .md-typeset .admonition.cover .cover-footer a {
    text-underline-offset: 2px;
  }
}

/* Dark Mode: Ensure contrast is maintained */
body[data-md-color-scheme="slate"] .md-typeset .admonition.cover {
  background: #243041;
  border-color: rgba(255, 255, 255, 0.08);
  color: #EAF1F8;
}

body[data-md-color-scheme="slate"] .md-typeset .admonition.cover .cover-title-block h1,
body[data-md-color-scheme="slate"] .md-typeset .admonition.cover .cover-subtitle {
  color: #EAF1F8;
}

body[data-md-color-scheme="slate"] .md-typeset .admonition.cover .cover-title-accent {
  color: #7ab0e8;
}

body[data-md-color-scheme="slate"] .md-typeset .admonition.cover .cover-label {
  color: #EAF1F8;
  opacity: 0.55;
}

body[data-md-color-scheme="slate"] .md-typeset .admonition.cover .cover-name {
  color: #EAF1F8;
  opacity: 0.9;
}

body[data-md-color-scheme="slate"] .md-typeset .admonition.cover .cover-authors-list .name {
  color: #EAF1F8;
  opacity: 0.8;
}

body[data-md-color-scheme="slate"] .md-typeset .admonition.cover .cover-authors-list .separator {
  color: #EAF1F8;
  opacity: 0.55;
}

body[data-md-color-scheme="slate"] .md-typeset .admonition.cover .cover-footer {
  color: #EAF1F8;
  opacity: 0.65;
  border-top-color: rgba(255, 255, 255, 0.06);
}

body[data-md-color-scheme="slate"] .md-typeset .admonition.cover .cover-footer a {
  color:                 inherit;
  opacity:               inherit;
  text-decoration:       underline;
  text-decoration-color: #7ab0e8;
}




/* ──────────────────────────────────────────────────────────────────────────
   HEADING PERMALINKS: Kein Umbruch/„Leerzeile" unter langen H2/H3
   Desktop: Icon links als Marginalie (hover), Mobile: rechts überlagert
   H1: Permalink ausgeblendet (unnötig)
   ────────────────────────────────────────────────────────────────────────── */

/* H1: Permalink verstecken */
.md-typeset h1 .headerlink,
.md-typeset h1 a.headerlink {
  display: none;
}

.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  position: relative;
}

/* Desktop/Tablet (>= 768px): Icon links in den Rand */
@media (min-width: 768px) {
  .md-typeset h2 .headerlink,
  .md-typeset h2 a.headerlink,
  .md-typeset h3 .headerlink,
  .md-typeset h3 a.headerlink,
  .md-typeset h4 .headerlink,
  .md-typeset h4 a.headerlink {
    position: absolute;
    font-size: 0.75em;
    left: -1.45rem;
    top: 0.40rem;
    line-height: 1;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 120ms ease;
  }

  .md-typeset h2:hover .headerlink,
  .md-typeset h2:hover a.headerlink,
  .md-typeset h3:hover .headerlink,
  .md-typeset h3:hover a.headerlink,
  .md-typeset h4:hover .headerlink,
  .md-typeset h4:hover a.headerlink {
    opacity: 0.55;
  }
}

/* Mobile (< 768px): Icon rechts, tappbar, kein Umbruch */
@media (max-width: 767px) {
  .md-typeset h2,
  .md-typeset h3,
  .md-typeset h4 {
    padding-right: 1.6em;
  }

  .md-typeset h2 .headerlink,
  .md-typeset h2 a.headerlink,
  .md-typeset h3 .headerlink,
  .md-typeset h3 a.headerlink,
  .md-typeset h4 .headerlink,
  .md-typeset h4 a.headerlink {
    position: absolute;
    right: 0;
    top: 0.2em;
    line-height: 1;
    white-space: nowrap;
    opacity: 0.45;
  }
}


/* ──────────────────────────────────────────────────────────────────────────
   BLOCKQUOTES – buchtypografisch, reduziert
   Gilt nur für .md-typeset blockquote (normale Markdown->-Blöcke)
   ────────────────────────────────────────────────────────────────────────── */

/* [dir] hebt Spezifität auf (0,2,1) – gleich wie das Theme-Override
   [dir="ltr"] .md-typeset blockquote, damit unsere Datei (später geladen) gewinnt */
[dir] .md-typeset blockquote {
  margin: 1.2em 0;
  padding-left: 1.1em;

  border-left: 3px solid color-mix(in srgb, var(--book-accent) 30%, transparent);
  background: none;

  font-size: 0.95em;
  line-height: 1.7;

  color: color-mix(in srgb, var(--book-fg) 85%, transparent);
}

[dir] .md-typeset blockquote p {
  margin: 0 0 0.6em 0;
}

[dir] .md-typeset blockquote p:last-child {
  margin-bottom: 0;
  font-size: 0.9em;
  opacity: 0.7;
}


/* ─────────────────────────────────────────────────────────────
   Fließtext-Highlight: IMPULS (leise, kein Zitat, keine Box)
   Markup: <div class="impuls" markdown>…</div>
   ───────────────────────────────────────────────────────────── */

.md-typeset .impuls {
  margin: 1rem 0 1rem 1.4rem;
  padding: 0;
  background: transparent;
  font-size: 0.95em;
  line-height: 1.7;
  color: color-mix(in srgb, var(--book-fg) 88%, var(--book-bg));
  position: relative;
}

body[data-md-color-scheme="slate"] .md-typeset .impuls {
  color: color-mix(in srgb, var(--book-fg) 88%, var(--book-surface-1));
}

/* Marker (leiser Pfeil) */
.md-typeset .impuls::before {
  content: "›";
  position: absolute;
  left: -1.1rem;
  top: -0.05em;
  color: color-mix(in srgb, var(--book-fg) 55%, var(--book-bg));
  font-weight: 600;
}

body[data-md-color-scheme="slate"] .md-typeset .impuls::before {
  color: color-mix(in srgb, var(--book-fg) 55%, var(--book-surface-1));
}

.md-typeset .impuls > p:first-child { font-weight: 500; }
.md-typeset .impuls > p { margin: 0 0 0.5em 0; }
.md-typeset .impuls > p:last-child { margin-bottom: 0; }

@media (max-width: 600px) {
  .md-typeset .impuls { margin-left: 0.8rem; }
  .md-typeset .impuls::before { left: -0.9rem; }
}


/* ══════════════════════════════════════════════════════════════════════════
   CUSTOM ADMONITIONS – Icon-Variablen + Admonition-Container
   Alle Admonition-spezifischen Farben, Icons und Layout-Regeln zentral hier.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Icon-Variablen (alle Admonition-Typen + UI-Icons) ────────────────────── */
:root {
  --md-typeset-hoermal-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M11 5 6 9H3v6h3l5 4V5z"/><path d="M15 9a3 3 0 0 1 0 6"/><path d="M17.5 6.5a6 6 0 0 1 0 11"/></svg>');
  --md-typeset-expand-icon:  url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"/></svg>');
  --md-typeset-context-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>');
  --md-typeset-tip-icon:     url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"/><path d="M9 18h6"/><path d="M10 22h4"/></svg>');
  --md-typeset-praxis-icon:  url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><rect width="8" height="4" x="8" y="2" rx="1" ry="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/><path d="m9 14 2 2 4-4"/></svg>');
  --md-typeset-oton-icon:    url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22Z"/></svg>');
  --md-typeset-regel-icon:   url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>');
  --md-typeset-cite-icon:    url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z"/><path d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z"/></svg>');
  --md-typeset-copy-icon:    url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><rect width="8" height="4" x="8" y="2" rx="1" ry="1"/><path d="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"/></svg>');
  --md-typeset-check-icon:       url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"/></svg>');
  --md-typeset-weiterlesen-icon: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>');
}

/* ── HOERMAL: Admonition-Container ───────────────────────────────────────── */

.md-typeset .admonition.hoermal,
.md-typeset details.hoermal {
  background: color-mix(in srgb, var(--book-bg) var(--book-adm-tint-light), var(--book-adm-hoermal));
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-left: 4px solid var(--book-adm-hoermal);
  border-radius: 0.4rem;
  box-shadow: none;
}

body[data-md-color-scheme="slate"] .md-typeset .admonition.hoermal,
body[data-md-color-scheme="slate"] .md-typeset details.hoermal {
  background: color-mix(in srgb, var(--book-surface-1) var(--book-adm-tint-dark), var(--book-adm-hoermal));
  border-color: rgba(255, 255, 255, 0.08);
  border-left-color: var(--book-adm-hoermal);
}

.md-typeset .admonition.hoermal {
  --md-admonition-icon: var(--md-typeset-hoermal-icon);
}

.md-typeset .admonition.hoermal > .admonition-title,
.md-typeset details.hoermal > summary {
  color: var(--book-fg);
  font-weight: 500;
}

.md-typeset .hoermal > .admonition-title:before,
.md-typeset .hoermal > summary:before {
  background-color: var(--book-adm-hoermal);
  -webkit-mask-image: var(--md-typeset-hoermal-icon);
  mask-image: var(--md-typeset-hoermal-icon);
}

/* ── EXPAND: Ausklappbare Vertiefungsbox ───────────────────────────────────── */

.md-typeset .admonition.expand,
.md-typeset details.expand {
  background: color-mix(in srgb, var(--book-bg) var(--book-adm-tint-light), var(--book-adm-expand));
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-left: 4px solid var(--book-adm-expand);
  border-radius: 0.4rem;
  box-shadow: none;
}

body[data-md-color-scheme="slate"] .md-typeset .admonition.expand,
body[data-md-color-scheme="slate"] .md-typeset details.expand {
  background: color-mix(in srgb, var(--book-surface-1) var(--book-adm-tint-dark), var(--book-adm-expand));
  border-color: rgba(255, 255, 255, 0.08);
  border-left-color: var(--book-adm-expand);
}

.md-typeset .admonition.expand {
  --md-admonition-icon: var(--md-typeset-expand-icon);
}

.md-typeset .admonition.expand > .admonition-title,
.md-typeset details.expand > summary {
  color: var(--book-fg);
  font-weight: 500;
}

.md-typeset .expand > .admonition-title:before,
.md-typeset .expand > summary:before {
  background-color: var(--book-adm-expand);
  -webkit-mask-image: var(--md-typeset-expand-icon);
  mask-image: var(--md-typeset-expand-icon);
}

.md-typeset .hoermal > .admonition-title::before,
.md-typeset .hoermal > summary::before {
  transform: translateY(0.06em);
}

.md-typeset .expand > .admonition-title::before,
.md-typeset .expand > summary::before {
  transform: translateY(0.06em);
}


/* --------------------------------------------------------------------------
   hoermal – Audio layouts
   Zwei Muster:
   1) .audio-comparison + .audio-pair  → paarige Gegenüberstellungen
   2) .audio-grid                      → gleichrangige Beispielsammlungen
   -------------------------------------------------------------------------- */

/* ==========================================================================
   1) Pair wrapper: mehrere Vergleiche untereinander
   ========================================================================== */

.md-typeset .admonition.hoermal .audio-comparison,
.md-typeset details.hoermal .audio-comparison {
  display: grid;
  gap: 1.1rem;
  margin-top: 0.9rem;
}

/* Each pair becomes its own responsive 2-col unit */
.md-typeset .admonition.hoermal .audio-pair,
.md-typeset details.hoermal .audio-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem 1.4rem;
  align-items: stretch;
}

@media (min-width: 720px) {
  .md-typeset .admonition.hoermal .audio-pair,
  .md-typeset details.hoermal .audio-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
   2) Flat grid: gleichrangige Einzelbeispiele (z. B. Länderbeispiele)
   ========================================================================== */

.md-typeset .admonition.hoermal .audio-grid,
.md-typeset details.hoermal .audio-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem 1.4rem;
  margin-top: 0.9rem;
  align-items: stretch;
}

@media (min-width: 720px) {
  .md-typeset .admonition.hoermal .audio-grid,
  .md-typeset details.hoermal .audio-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ==========================================================================
   Shared block styling
   ========================================================================== */

.md-typeset .admonition.hoermal .audio-block,
.md-typeset details.hoermal .audio-block {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  text-align: left;
}

/* Preferred label element for audio blocks */
.md-typeset .admonition.hoermal .audio-label,
.md-typeset details.hoermal .audio-label {
  font-family: var(--book-font-ui);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 0.95em;
  line-height: 1.35;
  margin: 0 0 0.35rem 0;
}

/* Backward compatibility for legacy h4 markup */
.md-typeset .admonition.hoermal .audio-block h4,
.md-typeset details.hoermal .audio-block h4 {
  font-family: var(--book-font-ui);
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 0.95em;
  line-height: 1.35;
  margin: 0 0 0.35rem 0;
}

/* Example box base */
.md-typeset .admonition.hoermal .example,
.md-typeset .admonition.hoermal .example-ipa,
.md-typeset details.hoermal .example,
.md-typeset details.hoermal .example-ipa {
  display: block;
  font-size: 0.92em;
  font-weight: 500;
  line-height: 1.5;
  opacity: 0.9;
  margin: 0 0 0.55rem 0;
  padding: 0.45rem 0.6rem;
  flex: 1 1 auto;
  background: color-mix(in srgb, var(--book-bg) 92%, var(--book-border));
  border: 1px solid color-mix(in srgb, var(--book-border) 70%, transparent);
  border-radius: 0.35rem;
}

.md-typeset .admonition.hoermal .ipa,
.md-typeset details.hoermal .ipa {
  font-family: "Noto Sans", "Inter", var(--book-font-body), sans-serif;
  margin-left: 0.08em;
}

/* Default examples: normal book type */
.md-typeset .admonition.hoermal .example,
.md-typeset details.hoermal .example {
  font-family: var(--book-font-body);
}

/* IPA examples: dedicated fallback stack */
.md-typeset .admonition.hoermal .example-ipa,
.md-typeset details.hoermal .example-ipa {
  font-family: "Noto Sans", "Inter", var(--book-font-body), sans-serif;
}

body[data-md-color-scheme="slate"] .md-typeset .admonition.hoermal .example,
body[data-md-color-scheme="slate"] .md-typeset .admonition.hoermal .example-ipa,
body[data-md-color-scheme="slate"] .md-typeset details.hoermal .example,
body[data-md-color-scheme="slate"] .md-typeset details.hoermal .example-ipa {
  background: color-mix(in srgb, var(--book-surface-1) 88%, var(--book-border));
  border-color: color-mix(in srgb, rgba(255,255,255,0.14) 70%, transparent);
}

/* Audio controls stay aligned at the bottom */
.md-typeset .admonition.hoermal .audio-block audio,
.md-typeset details.hoermal .audio-block audio {
  display: block;
  width: 100%;
  margin: 0;
  margin-top: auto;
}

/* Source line */
.md-typeset .admonition.hoermal .audio-source,
.md-typeset details.hoermal .audio-source {
  margin-top: 0.9rem;
  font-size: 0.85em;
  opacity: 0.7;
  text-align: right;
  font-style: normal;
}

/* WebKit timeline fill fix – scoped */
.md-typeset .admonition.hoermal audio::-webkit-media-controls-timeline,
.md-typeset details.hoermal audio::-webkit-media-controls-timeline {
  flex: 1;
}


/* ──────────────────────────────────────────────────────────────────────────
   LITERATUR: Literaturabschnitte etwas kleiner
   ────────────────────────────────────────────────────────────────────────── */

div.literatur {
  font-size: .85em;
  line-height: 1.35;
}


/* ──────────────────────────────────────────────────────────────────────────
   MAP: Karten-Container + Fullscreen + Popups
   ────────────────────────────────────────────────────────────────────────── */

/* ------------------------------------
   Z-INDEX HIERARCHIE (Material UI + Leaflet)
   Material Header:  3000
   Navigation:       2900
   Map Container:    1000
   Leaflet-Layer:    <1000
   ------------------------------------ */

/* Leaflet-Zonen – bleiben immer unterhalb des Map-Containers */
.leaflet-tile-pane    { z-index: 200 !important; }
.leaflet-control-container { z-index: 400 !important; }
.leaflet-marker-pane  { z-index: 600 !important; }
.leaflet-popup-pane   { z-index: 800 !important; }
.leaflet-popup        { z-index: 850 !important; }

/* Verhindere Stacking-Context-Fallen auf Map-Containern */
#map-container,
[data-map="herkunft"],
[data-map="variation"],
[data-map="variation_tempora"] {
  transform: none !important;
  filter: none !important;
  perspective: none !important;
  z-index: 1000 !important;
  overflow: visible !important;
}

/* Standardgröße: Herkunftssprachen- & Sprachenkarte */
#map-container {
  position: relative;
  width: 100%;
  height: 350px;
  margin: 0;
  border: 2px solid #eee;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: all 0.25s;
  background: #f9f9f9;
}

#mapid {
  width: 100%;
  height: 100%;
}

/* Fullscreen-Button */
#fullscreen-btn {
  position: absolute;
  right: 12px;
  top: 24px;
  z-index: 1000;
  padding: 0;
  border-radius: 5px;
  border: 0;
  background: transparent;
  font-size: 1em;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* Fullscreen: normaler Map-Container */
#map-container.fullscreen {
  position: fixed !important;
  top: 100px !important;
  left: 0;
  width: 100vw !important;
  height: calc(100vh - 100px) !important;
  max-width: none !important;
  max-height: none !important;
  border-radius: 0 !important;
  z-index: 1000 !important;
  margin: 0 !important;
  background: white;
  border: none !important;
  box-shadow: none !important;
}

@media (max-width: 600px) {
  #map-container.fullscreen {
    top: 48px !important;
    height: calc(100vh - 48px) !important;
  }
}

/* Variation-Map spezifische Höhe */
#map-container[data-map="variation"] {
  height: 650px;
}

/* Variation_tempora-Map spezifische Höhe */
#map-container[data-map="variation_tempora"] {
  height: 500px;
  margin: 1.5rem 0;
}

/* Fullscreen für variation und variation_tempora */
#map-container[data-map="variation"].fullscreen,
#map-container[data-map="variation_tempora"].fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1000;
  margin: 0;
}

#map-container[data-map="variation"].fullscreen #mapid,
#map-container[data-map="variation_tempora"].fullscreen #mapid {
  height: 100vh;
}


/* ──────────────────────────────────────────────────────────────────────────
   MAP POPUPS: CO.RA.PAN-Style responsive Popup-Design
   ────────────────────────────────────────────────────────────────────────── */

/* Popup-Wrapper */
.corapan-popup .leaflet-popup-content-wrapper {
  max-width: 340px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.corapan-popup .leaflet-popup-content {
  margin: 12px 14px;
  line-height: 1.5;
  max-height: 50vh;
  overflow: auto;
}

.corapan-popup .leaflet-popup-close-button {
  color: #666;
  font-size: 20px;
  padding: 4px 8px;
}

.corapan-popup .leaflet-popup-close-button:hover {
  color: #000;
}

/* Popup-Inhalts-Klassen */
.popup-sprachenkarte {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.9em;
  color: #222;
}

.popup-title {
  font-weight: 700;
  font-size: 1.1em;
  color: #1976d2;
  margin-bottom: 6px;
  display: block;
}

.popup-familie,
.popup-hauptstadt {
  font-size: 0.95em;
  color: #666;
  font-style: italic;
  margin-bottom: 4px;
}

.popup-herkunft {
  font-size: 0.95em;
  color: #444;
  margin-top: 6px;
}

.popup-line {
  margin-top: 5px;
  line-height: 1.3;
}

.popup-label {
  font-size: 0.85em;
  color: #555;
}

.popup-value {
  font-weight: 700;
  font-size: 0.85em;
  color: #222;
  margin-left: 4px;
}

/* Variante für scoped popup-title/label/value innerhalb variation-Maps */
#map-container[data-map="variation"] .popup-sprachenkarte .popup-title,
#map-container[data-map="variation_tempora"] .popup-sprachenkarte .popup-title {
  font-size: 0.90em;
  line-height: 0.9;
  display: block;
  margin-bottom: 4px;
}

#map-container[data-map="variation"] .popup-sprachenkarte .popup-line,
#map-container[data-map="variation_tempora"] .popup-sprachenkarte .popup-line {
  margin-top: 4px;
  line-height: 1.2;
}

#map-container[data-map="variation"] .popup-sprachenkarte .popup-label,
#map-container[data-map="variation_tempora"] .popup-sprachenkarte .popup-label {
  font-size: 0.80em;
  color: #333;
}

#map-container[data-map="variation"] .popup-sprachenkarte .popup-value,
#map-container[data-map="variation_tempora"] .popup-sprachenkarte .popup-value {
  font-weight: 700;
  font-size: 0.80em;
  margin-left: 4px;
}

/* Herkunftssprachen-spezifische Popup-Klassen */
.popup-gdn,
.popup-anteil {
  margin-top: 5px;
}

/* Responsive: Mobile Popup-Einschränkungen */
@media (max-width: 599px) {
  .corapan-popup .leaflet-popup-content-wrapper {
    max-width: calc(100vw - 48px);
  }

  .corapan-popup .leaflet-popup-content {
    max-width: 90vw;
    overflow-wrap: anywhere;
    max-height: 55vh;
  }
}

/* Fullscreen: etwas breitere Popups */
.fullscreen .corapan-popup .leaflet-popup-content-wrapper {
  max-width: 400px;
}

@media (max-width: 599px) {
  .fullscreen .corapan-popup .leaflet-popup-content-wrapper {
    max-width: calc(100vw - 60px);
  }
}

/* Dark mode Popups */
body[data-md-color-scheme="slate"] .corapan-popup .leaflet-popup-content-wrapper {
  background-color: #2a2a2a;
  color: #e0e0e0;
}

body[data-md-color-scheme="slate"] .popup-sprachenkarte {
  color: #e0e0e0;
}

body[data-md-color-scheme="slate"] .popup-title {
  color: #64b5f6;
}

body[data-md-color-scheme="slate"] .popup-familie,
body[data-md-color-scheme="slate"] .popup-hauptstadt {
  color: #aaa;
}

body[data-md-color-scheme="slate"] .popup-herkunft {
  color: #ccc;
}

body[data-md-color-scheme="slate"] .popup-label {
  color: #aaa;
}

body[data-md-color-scheme="slate"] .popup-value {
  color: #e0e0e0;
}

body[data-md-color-scheme="slate"] .corapan-popup .leaflet-popup-close-button {
  color: #aaa;
}

body[data-md-color-scheme="slate"] .corapan-popup .leaflet-popup-close-button:hover {
  color: #fff;
}


/* ──────────────────────────────────────────────────────────────────────────
   MAP BUTTON: Kleiner Navigations-Button zu Karten-Seiten
   ────────────────────────────────────────────────────────────────────────── */

.md-typeset a.map-button,
.md-content a.map-button {
  display: inline-block;
  padding: 0.35rem 0.65rem;
  background: #1976d2;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  border: 1px solid rgba(0,0,0,0.08);
  font-weight: 700;
  vertical-align: middle;
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}

.md-typeset a.map-button:hover,
.md-content a.map-button:hover {
  background: #145ea6;
  color: #fff;
}

.md-typeset a.map-button:active,
.md-content a.map-button:active {
  transform: translateY(1px);
}

body[data-md-color-scheme="slate"] .md-typeset a.map-button,
body[data-md-color-scheme="slate"] .md-content a.map-button {
  background: #1e88e5;
}


/* ──────────────────────────────────────────────────────────────────────────
   MAP ADMONITION: Bild + Button-Layout innerhalb einer tip-Admonition
   ────────────────────────────────────────────────────────────────────────── */

.md-typeset .admonition.tip .map-admonition,
.md-content .admonition.tip .map-admonition {
  position: relative;
  padding-bottom: 2.2rem;
}

.md-typeset .admonition.tip .map-admonition a.map-button,
.md-content .admonition.tip .map-admonition a.map-button {
  position: absolute;
  right: 0.9rem;
  bottom: 0.6rem;
  z-index: 10;
}

/* Karten-Vorschaubild links ausgerichtet */
.md-typeset .admonition.tip .admonition-map-image,
.md-content .admonition.tip .admonition-map-image {
  float: left;
  width: 300px;
  max-width: 100%;
  height: auto;
  margin: 1rem;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

.md-typeset .admonition.tip .admonition-map-image--right,
.md-content .admonition.tip .admonition-map-image--right {
  float: right;
  margin: 1rem;
}

/* Zwei-Bilder-Reihe */
.map-image-row {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.map-image-item {
  flex: 0 0 300px;
  box-sizing: border-box;
}

.map-image-item .admonition-map-image {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

/* Mobile: Bilder gestapelt, volle Breite */
@media (max-width: 640px) {
  .md-typeset .admonition.tip .admonition-map-image,
  .md-content .admonition.tip .admonition-map-image,
  .md-typeset .admonition.tip .admonition-map-image--right,
  .md-content .admonition.tip .admonition-map-image--right {
    float: none;
    display: block;
    width: 100%;
    margin: 0 0 0.8rem 0;
  }

  .map-image-row {
    display: block;
  }

  .map-image-item {
    width: 100%;
    flex: 0 0 auto;
    margin-bottom: 0.8rem;
  }

  .map-image-item .admonition-map-image {
    width: 100%;
  }

  .md-typeset .admonition.tip .map-admonition,
  .md-content .admonition.tip .map-admonition {
    padding-bottom: 3.4rem;
  }
}


/* ──────────────────────────────────────────────────────────────────────────
   LEAFLET CONTROLS
   ────────────────────────────────────────────────────────────────────────── */

/* Leaflet Capture-Control: Skalierung ohne Stacking-Context-Fallen */
.leaflet-control-capture {
  transform: scale(0.7);
  transform-origin: bottom right;
}


/* ──────────────────────────────────────────────────────────────────────────
   CITE: Zitationskasten (Kapitel / Buch)
   Variante: !!! cite "Dieses Kapitel zitieren" / !!! cite "Dieses Buch zitieren"
   Klassen: .admonition.cite  (details.cite für künftige ??? cite-Variante)
   Design: buchig, papierfarben, kein Akzentstreifen links
   ────────────────────────────────────────────────────────────────────────── */

/* Basis-Container: kein border-left-Akzent, einheitlicher Rahmen */
.md-typeset .admonition.cite,
.md-typeset details.cite {
  background: color-mix(in srgb, white 94%, var(--book-adm-cite));
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 0.4rem;
  box-shadow: none;
  margin-top: 3rem;
}

body[data-md-color-scheme="slate"] .md-typeset .admonition.cite,
body[data-md-color-scheme="slate"] .md-typeset details.cite {
  background: color-mix(in srgb, var(--book-surface-1) 86%, var(--book-adm-cite));
  border-color: rgba(255, 255, 255, 0.08);
}

/* Icon: Anführungszeichen via mask-image */
.md-typeset .admonition.cite {
  --md-admonition-icon: var(--md-typeset-cite-icon);
}

.md-typeset .admonition.cite > .admonition-title,
.md-typeset details.cite > summary {
  color: var(--book-fg);
  font-weight: 500;
  position: relative;
  padding-right: 2.4rem;
}

.md-typeset .admonition-title code,
.md-typeset summary code {
  font-size: 1em;
  font-weight: 600;
}

.md-typeset .cite > .admonition-title:before,
.md-typeset .cite > summary:before {
  -webkit-mask-image: var(--md-typeset-cite-icon);
  mask-image: var(--md-typeset-cite-icon);
  background-color: color-mix(in srgb, var(--book-fg) 60%, var(--book-adm-cite));
}

/* Copy-Button: oben rechts im Title */
.cite-copy-btn {
  position: absolute;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  opacity: 0.65;
  transition: opacity 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cite-copy-btn:hover {
  opacity: 1;
}

.cite-copy-btn::before {
  content: '';
  display: block;
  width: 1rem;
  height: 1rem;
  background-color: var(--book-fg);
  -webkit-mask-image: var(--md-typeset-copy-icon);
  mask-image: var(--md-typeset-copy-icon);
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* Visuelles Feedback: Icon-Wechsel auf Check beim Kopieren */
.cite-copy-btn.is-copied::before {
  -webkit-mask-image: var(--md-typeset-check-icon);
  mask-image: var(--md-typeset-check-icon);
  opacity: 1;
}


/* ──────────────────────────────────────────────────────────────────────────
   SUMMARY: Zusammenfassungsabschnitt (section-like, kein Kasten-Look)
   Variante: !!! summary "Zusammenfassung"
   Kein Icon, transparenter Hintergrund, nur feiner Rahmen
   ────────────────────────────────────────────────────────────────────────── */

.md-typeset .admonition.summary,
.md-typeset details.summary {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 0.4rem;
  padding: 1.1rem 1.2rem 1rem;
  margin: 2.4rem 0 2.4rem;
  box-shadow: none;
}

.md-typeset .admonition.summary > .admonition-title + *,
.md-typeset details.summary > summary + * {
  margin-top: 0;
}

body[data-md-color-scheme="slate"] .md-typeset .admonition.summary,
body[data-md-color-scheme="slate"] .md-typeset details.summary {
  border-color: rgba(255, 255, 255, 0.08);
}

.md-typeset .admonition.summary > .admonition-title,
.md-typeset details.summary > summary {
  background: transparent;
  padding: 0;
  margin: 0 0 0.5rem 0;
  font-weight: 600;
  border: 0;
}

/* Kein Icon */
.md-typeset .summary > .admonition-title:before,
.md-typeset .summary > summary:before {
  display: none;
}

.md-typeset .admonition.summary > :not(.admonition-title) {
  margin-left: 0;
}


/* ── TIP: Hinweis / didaktischer Tipp ─────────────────────────────────────── */

.md-typeset .admonition.tip,
.md-typeset details.tip {
  background: color-mix(in srgb, var(--book-bg) var(--book-adm-tint-light), var(--book-adm-tip));
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 0.4rem;
  box-shadow: none;
}

body[data-md-color-scheme="slate"] .md-typeset .admonition.tip,
body[data-md-color-scheme="slate"] .md-typeset details.tip {
  background: color-mix(in srgb, var(--book-surface-1) var(--book-adm-tint-dark), var(--book-adm-tip));
  border-color: rgba(255, 255, 255, 0.08);
}

.md-typeset .admonition.tip {
  --md-admonition-icon: var(--md-typeset-tip-icon);
}

.md-typeset .admonition.tip > .admonition-title,
.md-typeset details.tip > summary {
  color: var(--book-fg);
  font-weight: 500;
}

.md-typeset .tip > .admonition-title:before,
.md-typeset .tip > summary:before {
  background-color: var(--book-adm-tip);
  -webkit-mask-image: var(--md-typeset-tip-icon);
  mask-image: var(--md-typeset-tip-icon);
}


/* ── CONTEXT: Hintergrundinformation / theoretischer Kontext ───────────── */

.md-typeset .admonition.context,
.md-typeset details.context {
  background: color-mix(in srgb, var(--book-bg) var(--book-adm-tint-light), var(--book-adm-context));
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 0.4rem;
  box-shadow: none;
}

body[data-md-color-scheme="slate"] .md-typeset .admonition.context,
body[data-md-color-scheme="slate"] .md-typeset details.context {
  background: color-mix(in srgb, var(--book-surface-1) var(--book-adm-tint-dark), var(--book-adm-context));
  border-color: rgba(255, 255, 255, 0.08);
}

.md-typeset .admonition.context {
  --md-admonition-icon: var(--md-typeset-context-icon);
}

.md-typeset .admonition.context > .admonition-title,
.md-typeset details.context > summary {
  color: var(--book-fg);
  font-weight: 500;
}

.md-typeset .context > .admonition-title:before,
.md-typeset .context > summary:before {
  background-color: var(--book-adm-context);
  -webkit-mask-image: var(--md-typeset-context-icon);
  mask-image: var(--md-typeset-context-icon);
}


/* ── PRAXIS: Unterrichtspraktische Hinweise und Aufgaben ──────────────── */

.md-typeset .admonition.praxis,
.md-typeset details.praxis {
  background: color-mix(in srgb, var(--book-bg) var(--book-adm-tint-light), var(--book-adm-praxis));
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 0.4rem;
  box-shadow: none;
}

body[data-md-color-scheme="slate"] .md-typeset .admonition.praxis,
body[data-md-color-scheme="slate"] .md-typeset details.praxis {
  background: color-mix(in srgb, var(--book-surface-1) var(--book-adm-tint-dark), var(--book-adm-praxis));
  border-color: rgba(255, 255, 255, 0.08);
}

.md-typeset .admonition.praxis {
  --md-admonition-icon: var(--md-typeset-praxis-icon);
}

.md-typeset .admonition.praxis > .admonition-title,
.md-typeset details.praxis > summary {
  color: var(--book-fg);
  font-weight: 500;
}

.md-typeset .praxis > .admonition-title:before,
.md-typeset .praxis > summary:before {
  background-color: var(--book-adm-praxis);
  -webkit-mask-image: var(--md-typeset-praxis-icon);
  mask-image: var(--md-typeset-praxis-icon);
}


/* ── REGEL: Regeln, Hinweise, Merkboxen ────────────────────────────────── */

.md-typeset .admonition.regel,
.md-typeset details.regel {
  background: color-mix(in srgb, var(--book-bg) var(--book-adm-tint-light), var(--book-adm-regel));
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 0.4rem;
  box-shadow: none;
}

body[data-md-color-scheme="slate"] .md-typeset .admonition.regel,
body[data-md-color-scheme="slate"] .md-typeset details.regel {
  background: color-mix(in srgb, var(--book-surface-1) var(--book-adm-tint-dark), var(--book-adm-regel));
  border-color: rgba(255, 255, 255, 0.08);
}

.md-typeset .admonition.regel {
  --md-admonition-icon: var(--md-typeset-regel-icon);
}

.md-typeset .admonition.regel > .admonition-title,
.md-typeset details.regel > summary {
  color: var(--book-fg);
  font-weight: 500;
}

.md-typeset .regel > .admonition-title:before,
.md-typeset .regel > summary:before {
  background-color: var(--book-adm-regel);
  -webkit-mask-image: var(--md-typeset-regel-icon);
  mask-image: var(--md-typeset-regel-icon);
}


/* ── OTON: Stimmen, Erfahrungsberichte, Zitate aus der Praxis ────────── */

.md-typeset .admonition.oton,
.md-typeset details.oton {
  background: color-mix(in srgb, var(--book-bg) var(--book-adm-tint-light), var(--book-adm-oton));
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 0.4rem;
  box-shadow: none;
}

body[data-md-color-scheme="slate"] .md-typeset .admonition.oton,
body[data-md-color-scheme="slate"] .md-typeset details.oton {
  background: color-mix(in srgb, var(--book-surface-1) var(--book-adm-tint-dark), var(--book-adm-oton));
  border-color: rgba(255, 255, 255, 0.08);
}

.md-typeset .admonition.oton {
  --md-admonition-icon: var(--md-typeset-oton-icon);
}

.md-typeset .admonition.oton > .admonition-title,
.md-typeset details.oton > summary {
  color: var(--book-fg);
  font-weight: 500;
}

.md-typeset .oton > .admonition-title:before,
.md-typeset .oton > summary:before {
  background-color: var(--book-adm-oton);
  -webkit-mask-image: var(--md-typeset-oton-icon);
  mask-image: var(--md-typeset-oton-icon);
}

/* ── WEITERLESEN: Vertiefende Lektüre / Literaturhinweise am Kapitelende ───── */

.md-typeset .admonition.weiterlesen,
.md-typeset details.weiterlesen {
  background: color-mix(in srgb, var(--book-bg) var(--book-weiterlesen-tint-light), var(--book-paper));
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-left: 3px solid var(--book-adm-weiterlesen);
  border-radius: 0.4rem;
  box-shadow: none;
}

body[data-md-color-scheme="slate"] .md-typeset .admonition.weiterlesen,
body[data-md-color-scheme="slate"] .md-typeset details.weiterlesen {
  background: color-mix(in srgb, var(--book-surface-1) var(--book-weiterlesen-tint-dark), #ffffff);
  border-color: rgba(255, 255, 255, 0.08);
  border-left-color: var(--book-adm-weiterlesen);
}

.md-typeset .admonition.weiterlesen {
  --md-admonition-icon: var(--md-typeset-weiterlesen-icon);
}

.md-typeset .admonition.weiterlesen > .admonition-title,
.md-typeset details.weiterlesen > summary {
  color: var(--book-fg);
  font-weight: 500;
}

.md-typeset .weiterlesen > .admonition-title:before,
.md-typeset .weiterlesen > summary:before {
  background-color: var(--book-adm-weiterlesen);
  -webkit-mask-image: var(--md-typeset-weiterlesen-icon);
  mask-image: var(--md-typeset-weiterlesen-icon);
}

/* ── Standard-Admonitions (minimal / unverändert – Basis-Styles in 20_book.css) ─ */


/* ─────────────────────────────────────────────────────────
   Literaturverzeichnis – buchtypografisch (ohne Bullets)
   Struktur: <div class="literatur"><ul><li>…</li></ul></div>
   ───────────────────────────────────────────────────────── */

.md-typeset .literatur {
  font-size: 0.9em;
  line-height: 1.6;
}

.md-typeset .literatur ul,
.md-typeset .literatur ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.md-typeset .literatur li {
  margin: 0 0 0.25rem 0;
  text-indent: -1.0rem;
}

.md-typeset .literatur li:last-child {
  margin-bottom: 0;
}
/* ──────────────────────────────────────────────────────────────────────────
   COVER Stage (index): Sticky läuft in begrenztem Abschnitt, ohne Content-Gap
   Die Stage wird dynamisch per JS eingesetzt (kein Wrapper in index.md nötig)
   ────────────────────────────────────────────────────────────────────────── */



body.has-cover-scroll .md-typeset .cover-stage {
  --cover-stage-scroll: 22vh;
  /* wird per JS gesetzt; Fallback, falls JS noch nicht gelaufen ist */
  --cover-stage-coverh: 620px;

  position: relative;

  /*
    Trick:
    - height gibt der Stage extra Platz, damit sticky “Zeit” hat.
    - margin-bottom zieht den Extra-Platz wieder ab → kein Gap im Layout.
    - ABER: nicht 100vh verwenden, sonst ist Vorwort immer weit weg.
    - Daher: Cover-Höhe + Scroll-Strecke.
  */
  height: calc(var(--cover-stage-coverh) + var(--cover-stage-scroll));
  margin-bottom: calc(-1 * var(--cover-stage-scroll));
}

body.has-cover-scroll .md-typeset .cover-stage .admonition.cover {
  position: sticky;
  top: 88px;
  z-index: 0;

  opacity: var(--cover-opacity, 1);
  transform: none;
  transition: none;
  will-change: opacity;
}

/* Content nach der Stage liegt über dem Cover */
body.has-cover-scroll .md-typeset .cover-stage ~ * {
  position: relative;
  z-index: 1;
}

/* Overlap: erstes Element nach der Stage zieht hoch */
body.has-cover-scroll .md-typeset .cover-stage + * {
  margin-top: -240px;
  padding-top: 240px;
}

/* Mobile */
@media (max-width: 768px) {
  body.has-cover-scroll .md-typeset .cover-stage {
    --cover-stage-scroll: 22vh;
    --cover-stage-coverh: 520px;
    height: calc(var(--cover-stage-coverh) + var(--cover-stage-scroll));
    margin-bottom: calc(-1 * var(--cover-stage-scroll));
  }

  body.has-cover-scroll .md-typeset .cover-stage .admonition.cover {
    top: 72px;
  }

  body.has-cover-scroll .md-typeset .cover-stage + * {
    margin-top: -160px;
    padding-top: 160px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.has-cover-scroll .md-typeset .cover-stage .admonition.cover {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
}


/* ──────────────────────────────────────────────────────────────────────── */
/*  doc-chapter-meta: Responsive Dates Alignment + Unified Brightness       */
/* ──────────────────────────────────────────────────────────────────────── */

/* Mobile default: Dates linksbündig (wirkt ruhiger/lesbarer) */
.md-typeset .doc-chapter-meta__dates {
  display: flex;
  flex-direction: column;
  white-space: nowrap;

  align-items: flex-start;
  text-align: left;

  /* Einheitliche Helligkeit für Erstellt + Geändert */
  opacity: 0.45;
}

/* Desktop: Dates rechtsbündig */
@media (min-width: 640px) {
  .md-typeset .doc-chapter-meta__dates {
    align-items: flex-end;
    text-align: right;
  }
}

/* Beide Zeilen nicht umbrechen */
.md-typeset .doc-chapter-meta__created,
.md-typeset .doc-chapter-meta__modified {
  white-space: nowrap;
}

/* Falls irgendwo noch eine Sonder-Opacity auf __modified existiert: neutralisieren,
   damit "Erstellt" und "Geändert" exakt gleich hell sind. */
.md-typeset .doc-chapter-meta__modified {
  opacity: 1;
}