/* helpdesk – eigenständige Styles des öffentlichen Handbuchs.
 *
 * WARUM eigene .hd-*-Klassen: Das ausgelieferte Bootstrap-CSS von site_new ist
 * gepurged und enthält nur die dort tatsächlich verwendeten Klassen – neue
 * Bootstrap-Klassen wären hier also wirkungslos. Alle Helpdesk-Komponenten
 * definieren sich deshalb selbst und greifen ausschließlich auf die --ec-*-
 * Design-Tokens von site_new (assets/css/app.css) zurück. Dark Mode kippt damit
 * automatisch mit ([data-theme="dark"] überschreibt die Token-Werte); nur
 * Flächen ohne Token (Dropdown, Warnbox) brauchen eigene Dark-Overrides.
 * Fallback-Werte an jedem var(): identisch zu DESIGN_GUIDELINES.md, damit die
 * Seite auch rendert, falls app.css (noch) nicht geladen ist. */

/* ── Kopfbereich (Hero) ─────────────────────────────────────────────────────
 * Die site_new-Topbar ist fixed – der eigene Hero muss ihre Höhe einrechnen
 * (gleiches Muster wie .ec-page-hero in app.css). */
.hd-hero {
  padding: calc(var(--ec-topbar-height, 66px) + clamp(2.5rem, 6vw, 4rem)) 0 clamp(1.5rem, 4vw, 2.5rem);
}
.hd-hero h1 {
  font-size: clamp(2rem, 5vw, 2.9rem);
  font-weight: 700;
  letter-spacing: -0.02em; /* Apple-Look für große Überschriften (Guideline §4) */
  color: var(--ec-text, #2d3748);
  margin-bottom: 0.75rem;
}
.hd-lead {
  max-width: 46rem;
  font-size: 1.1rem;
  line-height: 1.65;
  color: var(--ec-text-muted, #6b7280);
  margin-bottom: 1.75rem;
}

/* Kompakter Hero (404-Seite): kein doppelter Topbar-Abstand, weil darüber
 * bereits das Hero-Band mit der Suchleiste (.hd-hero-suche) den Abstand hält. */
.hd-hero--kompakt { padding-top: clamp(0.5rem, 2vw, 1.25rem); }

/* ── Such-/Sprachleiste (auf JEDER Handbuch-Seite, inc/suchleiste.php) ──────
 * Bewusst NUR padding-bottom (keine Kurzschreibweise): Im Hero-Band trägt
 * DASSELBE Element zusätzlich die Klasse .container – eine Shorthand würde
 * dessen seitlichen Gutter auf 0 setzen und die Leiste breiter erscheinen
 * lassen als der Artikeltext darunter. */
.hd-suchleiste { padding-bottom: clamp(1.25rem, 3vw, 2rem); }
/* Hero-Band, das nur die Suchleiste trägt (Artikelseiten). Die Grundoptik
 * (Topbar-Abstand, Deko-Orb) kommt aus .ec-page-hero (app.css) – hier wird
 * nur der untere Innenabstand gedämpft, weil kein Titel/Lead darin steht. */
.hd-hero-suche { padding-bottom: clamp(1.25rem, 3vw, 2rem); }
.hd-hero-suche .hd-suchleiste {
  position: relative;
  z-index: 2;        /* über der Orb-Grafik */
  padding-bottom: 0; /* der Hero hält den Abstand nach unten */
}

/* Kopfzeile der Suchleiste: Handbuch-Titel links, Sprachumschalter rechts –
 * bewusst EINE Zeile, damit über der Suche keine Bauhöhe verloren geht.
 * margin-left:auto am Umschalter hält ihn auch dann rechts, wenn links kein
 * Titel steht (Übersichtsseite). */
.hd-suchleiste-kopf {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.6rem;
}
.hd-suchleiste-kopf .hd-langswitch { margin-left: auto; }

/* Handbuch-Marke im titellosen Hero der Artikelseiten (verlinkt auf die
 * Übersicht). Bewusst KEINE Überschrift: Die einzige H1 der Seite bleibt der
 * Artikeltitel weiter unten. */
.hd-marke {
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  text-decoration: none;
}

/* Sprachumschalter: bewusst reiner Text (DE/EN) – kein Icon, weil die
 * Bootstrap-Icons-Font von site_new subsettet ist und ein neues Glyph dort
 * fehlen würde. Sitzt in der Kopfzeile RECHTS über dem Suchfeld. */
.hd-langswitch {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid var(--ec-glass-border, rgba(200, 200, 200, 0.3));
  border-radius: var(--ec-radius-btn, 10px);
  background: var(--ec-glass-bg, rgba(255, 255, 255, 0.65));
}
.hd-langswitch a,
.hd-langswitch span {
  display: inline-block;
  padding: 0.3rem 0.85rem;
  border-radius: var(--ec-radius-sm, 6px);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--ec-text-muted, #6b7280);
  transition: var(--ec-transition, all 0.2s ease);
}
.hd-langswitch a:hover { color: var(--ec-link, #1c6f82); }
/* Gefuellte Pille: Weiss auf --ec-primary ergibt nur 3,09:1. Auf --ec-link
   sind es 5,76:1. Im Dark Mode ist --ec-link hell (#56b9cf) - dort traegt die
   Pille dunklen Text (7,8:1) statt weissem (2,3:1). */
.hd-langswitch .active {
  background: var(--ec-link, #1c6f82);
  color: var(--ec-on-accent, #fff);   /* Token statt Literal, AGENTS.md Regel 9 */
}
[data-theme="dark"] .hd-langswitch .active {
  background: var(--ec-primary, #56b9cf);
  color: var(--ec-bg-color, #0d0d0f);
}

/* ── Suche ──────────────────────────────────────────────────────────────────
 * Volle Containerbreite (Vorgabe Maintainer) – auf Übersicht UND Artikelseiten. */
.hd-search { position: relative; width: 100%; }
.hd-search-input {
  width: 100%;
  padding: 0.85rem 1.1rem;
  font: inherit;
  font-size: 1.05rem;
  color: var(--ec-text, #2d3748);
  background: var(--ec-glass-bg-strong, rgba(255, 255, 255, 0.85));
  border: 1px solid var(--ec-glass-border, rgba(200, 200, 200, 0.3));
  border-radius: var(--ec-radius-input, 8px);
  box-shadow: var(--ec-glass-shadow-sm, 0 2px 12px rgba(0, 0, 0, 0.05));
  transition: var(--ec-transition, all 0.2s ease);
}
.hd-search-input::placeholder { color: var(--ec-text-light, #9ca3af); }
.hd-search-input:focus {
  outline: none;
  border-color: var(--ec-primary, #399fb5);
  /* Sichtbarer Fokusring ist a11y-Pflicht (Guideline §10) – nie entfernen */
  box-shadow: 0 0 0 3px var(--ec-primary-glow, rgba(57, 159, 181, 0.25));
}

/* Ergebnis-Dropdown: fast opake Fläche statt Glas-Transparenz, damit es über
 * beliebigem Seiteninhalt lesbar bleibt (Guideline §1.2 „Dropdowns"). */
.hd-search-results {
  position: absolute;
  z-index: 1040; /* über der site_new-Topbar (1030) */
  top: calc(100% + 0.4rem);
  left: 0;
  right: 0;
  max-height: min(28rem, 60vh);
  overflow-y: auto;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  background: var(--ec-dropdown-bg, rgba(255, 255, 255, 0.98));
  border: 1px solid var(--ec-glass-border, rgba(200, 200, 200, 0.3));
  border-radius: var(--ec-radius-card, 16px);
  box-shadow: var(--ec-glass-shadow, 0 8px 32px rgba(0, 0, 0, 0.07));
  backdrop-filter: var(--ec-glass-blur, blur(20px) saturate(180%));
  -webkit-backdrop-filter: var(--ec-glass-blur, blur(20px) saturate(180%)); /* Safari/iOS */
}
[data-theme="dark"] .hd-search-results {
  background: var(--ec-dropdown-bg, rgba(26, 26, 30, 0.98));
}
.hd-search-results[hidden] { display: none; }
.hd-search-result a {
  display: block;
  padding: 0.6rem 0.75rem;
  border-radius: var(--ec-radius-input, 8px);
  text-decoration: none;
  color: var(--ec-text, #2d3748);
}
.hd-search-result a:hover,
.hd-search-result.active a {
  background: var(--ec-primary-glow, rgba(57, 159, 181, 0.25));
}
.hd-search-result-title { font-weight: 600; }
.hd-search-result-cat {
  font-size: 0.78rem;
  color: var(--ec-link, #1c6f82);   /* kleiner Text -> AA, s. .hd-article a */
  margin-top: 0.1rem;
}
.hd-search-result-snippet {
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--ec-text-muted, #6b7280);
  margin-top: 0.2rem;
}
.hd-search-empty {
  padding: 0.75rem;
  font-size: 0.9rem;
  color: var(--ec-text-muted, #6b7280);
}
.hd-search-results mark {
  background: var(--ec-primary-glow, rgba(57, 159, 181, 0.25));
  color: inherit;
  border-radius: 3px;
  padding: 0 0.08em;
}

/* ── Übersicht: Bereiche + Kategorie-Karten ────────────────────────────────*/
/* Die Suchleiste hält bereits Abstand nach unten – die Kategorie-Sektion
 * braucht daher keinen eigenen oberen Innenabstand mehr (sonst klafft eine
 * doppelte Lücke zwischen Suchfeld und erster Karte). */
.hd-kategorien-section { padding-top: 0; }
.hd-bereich { margin-bottom: 2.5rem; }

/* ── Wichtige und empfohlene Artikel (Favoriten, im adm3 per Stern gesetzt) ─
 * Kompakte Kacheln statt Listenkarten: Die Auswahl ist kurz und soll auf einen
 * Blick erfassbar sein. Jede Kachel ist als Ganzes klickbar. */
.hd-favoriten h2 { display: flex; align-items: center; gap: 0.5rem; }
.hd-stern { width: 1em; height: 1em; color: var(--ec-primary, #399fb5); flex: none; }
.hd-grid--favoriten {
  grid-template-columns: repeat(auto-fill, minmax(min(16rem, 100%), 1fr));
}
.hd-fav-card {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1rem 1.15rem;
  text-decoration: none;
  background: var(--ec-glass-bg, rgba(255, 255, 255, 0.65));
  backdrop-filter: var(--ec-glass-blur, blur(20px) saturate(180%));
  -webkit-backdrop-filter: var(--ec-glass-blur, blur(20px) saturate(180%)); /* Safari/iOS */
  border: 1px solid var(--ec-glass-border, rgba(200, 200, 200, 0.3));
  border-left: 3px solid var(--ec-primary, #399fb5);
  border-radius: var(--ec-radius-card, 16px);
  box-shadow: var(--ec-glass-shadow-sm, 0 2px 12px rgba(0, 0, 0, 0.05));
  transition: var(--ec-transition, all 0.2s ease);
}
.hd-fav-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ec-glass-shadow, 0 8px 32px rgba(0, 0, 0, 0.07));
}
.hd-fav-kat {
  font-size: 0.74rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ec-link, #1c6f82);   /* kleiner Text -> AA, s. .hd-article a */
}
.hd-fav-titel {
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ec-text, #2d3748);
}
@media (prefers-reduced-motion: reduce) {
  .hd-fav-card { transition: none; }
  .hd-fav-card:hover { transform: none; }
}
.hd-bereich h2 {
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ec-text, #2d3748);
  margin-bottom: 1.25rem;
}
.hd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
  gap: 1.25rem;
}
/* Glass-Card gem. DESIGN_GUIDELINES §2 – eigene Klasse, da .glass-card in der
 * site_new-app.css nicht existiert (nur in kundenbereich3). */
.hd-card {
  padding: 1.4rem 1.5rem;
  background: var(--ec-glass-bg, rgba(255, 255, 255, 0.65));
  backdrop-filter: var(--ec-glass-blur, blur(20px) saturate(180%));
  -webkit-backdrop-filter: var(--ec-glass-blur, blur(20px) saturate(180%)); /* Safari/iOS */
  border: 1px solid var(--ec-glass-border, rgba(200, 200, 200, 0.3));
  border-radius: var(--ec-radius-card, 16px);
  box-shadow: var(--ec-glass-shadow-sm, 0 2px 12px rgba(0, 0, 0, 0.05));
  transition: var(--ec-transition, all 0.2s ease);
  /* Anker-Ziel (#kategorie) nicht unter der fixen Topbar verschwinden lassen */
  scroll-margin-top: calc(var(--ec-topbar-height, 66px) + 1rem);
}
.hd-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ec-glass-shadow, 0 8px 32px rgba(0, 0, 0, 0.07));
}
/* h3 auf der Übersicht (H1→H2 Bereich→H3 Karte), h2 auf der 404-Seite
 * (dort gibt es keine Bereichs-Ebene) – gleiche Optik, korrekte Hierarchie. */
.hd-card h3,
.hd-card h2 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ec-text, #2d3748);
  margin-bottom: 0.75rem;
}
.hd-card ul { list-style: none; margin: 0; padding: 0; }
.hd-card li { margin: 0; }
.hd-card li a {
  display: block;
  padding: 0.35rem 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--ec-text-muted, #6b7280);
  text-decoration: none;
  border-bottom: 1px solid var(--ec-glass-border, rgba(200, 200, 200, 0.3));
  transition: var(--ec-transition, all 0.2s ease);
}
.hd-card li:last-child a { border-bottom: 0; }
.hd-card li a:hover { color: var(--ec-link, #1c6f82); }

/* ── Breadcrumb (Artikelseite) ─────────────────────────────────────────────*/
.hd-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
  color: var(--ec-text-muted, #6b7280);
}
.hd-breadcrumb li::after { content: "/"; margin-left: 0.4rem; opacity: 0.5; }
.hd-breadcrumb li:last-child::after { content: ""; }
.hd-breadcrumb a { color: var(--ec-text-muted, #6b7280); text-decoration: none; }
.hd-breadcrumb a:hover { color: var(--ec-link, #1c6f82); }

/* ── Artikelseite: Zweispalter (Bootstrap-Grid) ────────────────────────────
 * Die Lesebreite entsteht jetzt aus dem Grid (.col-lg-9 neben dem
 * Inhaltsverzeichnis) statt aus einem festen max-width am Artikel. */
.hd-artikel-section { padding-top: 0; }

/* Sprachhinweis („Read this article in English") über dem Zweispalter */
.hd-andere-sprache { margin: 0 0 1rem; font-size: 0.9rem; }

/* Inhaltsverzeichnis: klebt beim Scrollen unter der fixen Topbar. Unterhalb
 * lg wird es ausgeblendet – dort steht der Artikel über die volle Breite und
 * eine Sprungliste ohne Seitenspalte brächte keinen Mehrwert. */
.hd-toc-col { display: none; }
@media (min-width: 992px) {
  /* width MUSS hier stehen (CLS-Fix, PageSpeed 0,126):
     includes/header.php laedt Bootstrap NICHT render-blockierend
     (media="print" + onload). Beim ersten Paint gilt nur das Inline-Critical-
     CSS aus includes/critical.css - und das enthaelt zwar .row, .row>* und
     .col-lg-9, aber KEIN .col-lg-3 (der Generator crawlt nur Website-Seiten,
     s. tools/gen-critical-css.mjs). Diese Spalte erbte deshalb
     .row>*{width:100%}, stand als eigene Flex-Zeile UNTER dem Artikel und
     sprang beim Eintreffen von Bootstrap in die Seitenspalte.
     Werte identisch zu Bootstrap .col-lg-3 -> beim Nachladen aendert sich
     nichts mehr. Diese Datei ist render-blockierend eingebunden
     (helpdesk/artikel.php), die Regel gilt also ab dem ersten Paint. */
  .hd-toc-col { display: block; flex: 0 0 auto; width: 25%; }
}
.hd-toc {
  position: sticky;
  top: calc(var(--ec-topbar-height, 66px) + 1rem);
  max-height: calc(100vh - var(--ec-topbar-height, 66px) - 2rem);
  overflow-y: auto;
  padding: 1.1rem 1.2rem;
  background: var(--ec-glass-bg, rgba(255, 255, 255, 0.65));
  backdrop-filter: var(--ec-glass-blur, blur(20px) saturate(180%));
  -webkit-backdrop-filter: var(--ec-glass-blur, blur(20px) saturate(180%)); /* Safari/iOS */
  border: 1px solid var(--ec-glass-border, rgba(200, 200, 200, 0.3));
  border-radius: var(--ec-radius-card, 16px);
  box-shadow: var(--ec-glass-shadow-sm, 0 2px 12px rgba(0, 0, 0, 0.05));
}
.hd-toc-titel {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ec-text-muted, #6b7280);
  margin: 0 0 0.65rem;
}
.hd-toc ul { list-style: none; margin: 0; padding: 0; }
.hd-toc li { margin: 0; }
.hd-toc a {
  display: block;
  padding: 0.3rem 0.5rem;
  border-left: 2px solid transparent;
  border-radius: 0 var(--ec-radius-sm, 6px) var(--ec-radius-sm, 6px) 0;
  font-size: 0.87rem;
  line-height: 1.4;
  color: var(--ec-text-muted, #6b7280);
  text-decoration: none;
  transition: var(--ec-transition, all 0.2s ease);
}
.hd-toc a:hover { color: var(--ec-link, #1c6f82); }
/* Aktiver Abschnitt (assets/helpdesk.js, IntersectionObserver) */
.hd-toc a.active {
  border-left-color: var(--ec-primary, #399fb5);   /* Rahmen: Nicht-Text, 3:1 genuegt */
  /* Bewusst NICHT --ec-primary-glow (Alpha 0.25): Die Toenung hebt den Grund so
     weit an, dass --ec-link darauf nur noch 4,40:1 (hell) bzw. 4,21:1 (dunkel)
     erreicht - unter AA. --ec-primary-glow-soft (0.12) kommt auf 5,02:1 bzw.
     5,15:1, gemessen am kompositierten Hintergrund (die Glasflaechen darunter
     sind selbst halbtransparent). Der aktive Eintrag bleibt durch Rahmen und
     Fettung eindeutig markiert, die Farbe traegt die Markierung nicht allein.
     Das staerkere Token bleibt unangetastet - es dient anderswo als Fokusring
     und Trefferhervorhebung (Nicht-Text, dort genuegen 3:1). PR #229.
     BEWUSST OHNE rgba()-Fallback: Ein Fallback waere wieder ein hartkodierter
     Farbwert in der Komponente (AGENTS.md Regel 9) und griffe genau beim
     ersten Paint, wo das Token frueher noch fehlte. Es steht jetzt auch im
     synchron eingebundenen includes/critical.css. Faellt es wider Erwarten
     aus, entfaellt lediglich die Toenung - der Eintrag bleibt durch Rahmen
     und Fettung markiert, und der Kontrast wird dadurch besser, nicht
     schlechter. */
  background: var(--ec-primary-glow-soft);
  color: var(--ec-link, #1c6f82);                  /* Text: AA, s. .hd-article a */
  font-weight: 600;
}
.hd-toc-l3 a { padding-left: 1.25rem; font-size: 0.83rem; }

/* Anker-Sprünge dürfen nicht unter der fixen Topbar landen */
.hd-article h2,
.hd-article h3 { scroll-margin-top: calc(var(--ec-topbar-height, 66px) + 1rem); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ── Artikel-Typografie ────────────────────────────────────────────────────*/
.hd-article {
  margin-bottom: 2rem; /* Luft zum Footer – das CTA-Band ist ausgeblendet */
  color: var(--ec-text, #2d3748);
  font-size: 1.02rem;
  line-height: 1.7;
}
.hd-article h1 {
  font-size: clamp(1.7rem, 4vw, 2.35rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 1rem;
}
.hd-article h2 {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 2.25rem 0 0.9rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--ec-glass-border, rgba(200, 200, 200, 0.3));
}
.hd-article h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 1.75rem 0 0.6rem;
}
.hd-article p { margin: 0 0 1rem; }
.hd-article ul,
.hd-article ol { margin: 0 0 1rem; padding-left: 1.4rem; }
.hd-article li { margin-bottom: 0.35rem; }
/* Linkfarben: WCAG AA, PageSpeed „Kontrastverhaeltnis" (Bugfix PR #229).
 *
 * Gemessen wird gegen den TATSAECHLICHEN Seitengrund, nicht gegen reines
 * Weiss - der body ist getoent (gemessen rgb(238,245,251)), im Dark Mode
 * laeuft er von #0d0d0f nach #141417. Das verschiebt die Werte spuerbar.
 *
 *   Ruhezustand  --ec-primary      3,09:1  zu wenig  (war der Fehler)
 *                --ec-primary-dark 3,77:1  zu wenig
 *                --ec-link         5,24:1  ok        <- gewaehlt
 *   Hover        --ec-accent       4,26:1 hell / 3,92:1 dunkel  zu wenig
 *                --ec-link-hover   5,61:1 hell / 7,35:1 dunkel  ok  <- gewaehlt
 *
 * --ec-link-hover kam mit PR #229 neu dazu und ist je Theme gesetzt (app.css);
 * dieselbe Korrektur gilt seitdem global fuer alle Links der Website.
 * Die Regeln hier bleiben trotzdem explizit, damit das Handbuch nicht von der
 * Reihenfolge der nicht-render-blockierend geladenen Website-CSS abhaengt.
 *
 * --ec-primary bleibt Icons, Rahmen und grossen/fetten UI-Elementen
 * vorbehalten (Markenbild; dort genuegen laut WCAG 3:1). */
.hd-article a { color: var(--ec-link, #1c6f82); }
.hd-article a:hover { color: var(--ec-link-hover, #b81e63); }

/* Screenshots: nie über Spaltenbreite hinaus, dezenter Rahmen + Radius */
.hd-article img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--ec-glass-border, rgba(200, 200, 200, 0.3));
  border-radius: var(--ec-radius-input, 8px);
  box-shadow: var(--ec-glass-shadow-sm, 0 2px 12px rgba(0, 0, 0, 0.05));
  margin: 0.25rem 0;
}
/* Bildunterschrift: die Artikel-Vorlage setzt nach jedem Screenshot einen
 * Absatz, der NUR aus kursivem Text besteht („*Unterschrift*") – genau dieses
 * Muster wird gedämpft und verkleinert dargestellt. */
.hd-article p > em:only-child {
  display: block;
  font-size: 0.88em;
  color: var(--ec-text-muted, #6b7280);
  margin-top: 0.15rem;
}

/* Code: Inline + Blöcke */
.hd-article code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.88em;
  padding: 0.12em 0.4em;
  background: var(--ec-glass-bg-strong, rgba(255, 255, 255, 0.85));
  border: 1px solid var(--ec-glass-border, rgba(200, 200, 200, 0.3));
  border-radius: var(--ec-radius-sm, 6px);
  word-break: break-word; /* lange URLs/Pfade sprengen mobil sonst das Layout */
}
.hd-article pre {
  overflow-x: auto;
  padding: 1rem 1.15rem;
  margin: 0 0 1rem;
  background: var(--ec-glass-bg-strong, rgba(255, 255, 255, 0.85));
  border: 1px solid var(--ec-glass-border, rgba(200, 200, 200, 0.3));
  border-radius: var(--ec-radius-input, 8px);
}
.hd-article pre code { padding: 0; border: 0; background: none; word-break: normal; }

.hd-article blockquote {
  margin: 0 0 1rem;
  padding: 0.5rem 1.1rem;
  border-left: 3px solid var(--ec-primary, #399fb5);
  color: var(--ec-text-muted, #6b7280);
}
.hd-article blockquote p:last-child { margin-bottom: 0; }

/* Tabellen: hd_md_zu_html() wrappt jede Tabelle in .hd-table-wrap – auf
 * schmalen Screens scrollt der Wrapper, nie die ganze Seite. */
.hd-table-wrap { overflow-x: auto; margin: 0 0 1rem; }
.hd-table { width: 100%; border-collapse: collapse; font-size: 0.95em; }
.hd-table th,
.hd-table td {
  padding: 0.5rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--ec-glass-border, rgba(200, 200, 200, 0.3));
  vertical-align: top;
}
.hd-table th { color: var(--ec-text, #2d3748); font-weight: 700; }

/* ── Artikel-Fuß: Stand / Zurück-Link ──────────────────────────────────────*/
.hd-stand {
  margin-top: 2.5rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--ec-glass-border, rgba(200, 200, 200, 0.3));
  font-size: 0.85rem;
  color: var(--ec-text-light, #9ca3af);
}

/* ── Hinweisbox (404 / Artikel nicht gefunden) ─────────────────────────────
 * Warn-Tokens existieren in der site_new-app.css nicht (nur kundenbereich3),
 * daher Light-/Dark-Werte gemäß DESIGN_GUIDELINES §1.2 als Fallback. */
.hd-hinweis {
  max-width: 50rem;
  margin-bottom: 2rem;
  padding: 0.9rem 1.15rem;
  border: 1px solid var(--ec-warning-border, rgba(245, 158, 11, 0.35));
  border-radius: var(--ec-radius-input, 8px);
  background: var(--ec-warning-bg, rgba(245, 158, 11, 0.14));
  color: var(--ec-warning-text, #92400e);
}
[data-theme="dark"] .hd-hinweis {
  border-color: var(--ec-warning-border, rgba(245, 158, 11, 0.25));
  background: var(--ec-warning-bg, rgba(245, 158, 11, 0.12));
  color: var(--ec-warning-text, #fcd34d);
}

/* ── Reduzierte Bewegung (Pflicht, Guideline §7) ───────────────────────────*/
@media (prefers-reduced-motion: reduce) {
  .hd-card,
  .hd-card li a,
  .hd-langswitch a,
  .hd-search-input {
    transition: none;
  }
  .hd-card:hover { transform: none; }
}