/*
  drill-nav.css — MND (19.09.2026): JTL-Style Drill-Down-Panels.
  Bewusst UNLAYERED (Pendant zu unified_nav.css): reine .drill-*-Klassen,
  keine Bootstrap-Kollisionen; Gewinner gegen Utilities nur durch
  Quelle-Later-Position in assets.tpl (nach unified_nav.css).

  Zwei Modi:
  - Ohne JS: verschachtelte, vollständig verlinkte Liste (statisch,
    eingerückt) — das Markup selbst trägt kein hidden.
  - Mit JS (html.drill-js): Panels werden absolute Overlays im
    [data-drill-root], sliden per translateX herein, Root-Liste und
    Panel-Body scrollen unabhängig (overscroll-behavior: contain).
*/

/* ---------- MTH (21.09.2026): Theme-Tokens — Dark-Basis, Light flippt ----------
   Referenzmuster: --navx-* (navbar_extras.css). Vorher war die gesamte Datei
   Dark-only: im Light blieben Level-2+-Panels schwarze Inseln mit dunkel
   geerbtem Text (dunkel-auf-dunkel), Counts weiß-auf-weiß. Cyan-Flächen
   laufen über --drill-accent-rgb (Komma-Longhand-Technik wie
   --color-fastpass-rgb; IACVT-frei), damit rgba-Ableitungen mit dem Akzent
   flippen (#22d3ee-Welt ↔ #0891b2-Welt). DK2-Regel: Erstquelle :root,
   Light-Werte in kanonischen Block UND Media-Spiegel pflegen. */

:root {
  --drill-panel-bg: rgba(13, 17, 23, 0.985);
  --drill-panel-shadow: -18px 0 40px rgba(0, 0, 0, 0.45);
  --drill-item-bg: rgba(255, 255, 255, 0.04);
  --drill-item-border: rgba(255, 255, 255, 0.08);
  --drill-count-bg: rgba(255, 255, 255, 0.07);
  --drill-count-text: rgba(255, 255, 255, 0.62);
  --drill-header-border: rgba(255, 255, 255, 0.09);
  --drill-back-bg: rgba(255, 255, 255, 0.06);
  --drill-back-bg-hover: rgba(255, 255, 255, 0.12);
  --drill-crumb-text: rgba(255, 255, 255, 0.5);
  --drill-crumb-btn-text: rgba(255, 255, 255, 0.55);
  --drill-crumb-btn-text-hover: rgba(255, 255, 255, 0.9);
  --drill-crumb-btn-hover-bg: rgba(255, 255, 255, 0.09);
  --drill-crumb-sep: rgba(255, 255, 255, 0.3);
  --drill-crumb-cur: rgba(255, 255, 255, 0.8);
  --drill-accent-rgb: 34, 211, 238;
  --drill-accent-ic: rgba(34, 211, 238, 0.85);
  --drill-feed-ic: rgba(34, 211, 238, 0.55);
  --drill-feed-hover-bg: rgba(34, 211, 238, 0.12);
  --drill-target-border: rgba(250, 204, 21, 0.6);
  --drill-target-shadow: 0 0 0 1px rgba(250, 204, 21, 0.35) inset;
  --drill-target-text: #facc15;
  --drill-danger-rgb: 248, 113, 113;
  --drill-danger-text: rgba(248, 113, 113, 0.9);
  --drill-danger-strong: #fca5a5;
  --drill-search-chrome-bg: rgba(255, 255, 255, 0.09);
  --drill-search-chrome-bg-hover: rgba(255, 255, 255, 0.18);
  --drill-search-chrome-text: rgba(255, 255, 255, 0.75);
  --drill-search-chrome-text-strong: #fff;
  --drill-search-meta-text: rgba(255, 255, 255, 0.55);
  --drill-recents-chip-bg: rgba(13, 17, 23, 0.85);
  --drill-recents-caption-text: rgba(255, 255, 255, 0.55);
  --drill-recents-clear-text: rgba(255, 255, 255, 0.45);
  --drill-recents-clear-text-hover: rgba(255, 255, 255, 0.8);
  --drill-recents-x-bg: rgba(255, 255, 255, 0.07);
  --drill-recents-x-text: rgba(255, 255, 255, 0.55);
  /* Drawer-Tab-Hover (theme_3.css .glass-offcanvas .nav-link) */
  --drill-tab-hover-bg: rgba(255, 255, 255, 0.1);
}

/* Kanonischer Light-Block — Autorität: data-bs-theme (CD-E4), Klasse als
   Rückenradar. Flächen analog navx-Light (#ffffff-Surface, Slate-Texte,
   #0891b2/#0e7490-Cyan-Welt, Amber statt Gelb für Deep-Link-Ziel). */
html[data-bs-theme="light"],
html.light {
  --drill-panel-bg: #ffffff;
  --drill-panel-shadow: -18px 0 40px rgba(15, 23, 42, 0.18);
  --drill-item-bg: rgba(15, 23, 42, 0.04);
  --drill-item-border: rgba(15, 23, 42, 0.1);
  --drill-count-bg: rgba(15, 23, 42, 0.06);
  --drill-count-text: #334155;
  --drill-header-border: rgba(15, 23, 42, 0.12);
  --drill-back-bg: rgba(15, 23, 42, 0.05);
  --drill-back-bg-hover: rgba(15, 23, 42, 0.1);
  --drill-crumb-text: #475569;
  --drill-crumb-btn-text: #475569;
  --drill-crumb-btn-text-hover: #1e293b;
  --drill-crumb-btn-hover-bg: rgba(15, 23, 42, 0.08);
  --drill-crumb-sep: rgba(15, 23, 42, 0.35);
  --drill-crumb-cur: #334155;
  --drill-accent-rgb: 8, 145, 178;
  --drill-accent-ic: #0e7490;
  --drill-feed-ic: #0891b2;
  --drill-feed-hover-bg: rgba(8, 145, 178, 0.1);
  --drill-target-border: rgba(180, 83, 9, 0.6);
  --drill-target-shadow: 0 0 0 1px rgba(180, 83, 9, 0.35) inset;
  --drill-target-text: #b45309;
  --drill-danger-rgb: 185, 28, 28;
  --drill-danger-text: #b91c1c;
  --drill-danger-strong: #b91c1c;
  --drill-search-chrome-bg: rgba(15, 23, 42, 0.08);
  --drill-search-chrome-bg-hover: rgba(15, 23, 42, 0.16);
  --drill-search-chrome-text: #475569;
  --drill-search-chrome-text-strong: #090d16;
  --drill-search-meta-text: #475569;
  --drill-recents-chip-bg: #ffffff;
  --drill-recents-caption-text: #475569;
  --drill-recents-clear-text: #64748b;
  --drill-recents-clear-text-hover: #334155;
  --drill-recents-x-bg: rgba(15, 23, 42, 0.08);
  --drill-recents-x-text: #475569;
  --drill-tab-hover-bg: rgba(15, 23, 42, 0.06);
}

/* Media-Spiegel (DK2): nur wenn weder data-theme NOCH data-bs-theme dark
   gesetzt ist (CD-E4-Flip-Sicherheit, Muster default.css:392) */
@media (prefers-color-scheme: light) {
  html:not([data-theme="dark"]):not([data-bs-theme="dark"]) {
    --drill-panel-bg: #ffffff;
    --drill-panel-shadow: -18px 0 40px rgba(15, 23, 42, 0.18);
    --drill-item-bg: rgba(15, 23, 42, 0.04);
    --drill-item-border: rgba(15, 23, 42, 0.1);
    --drill-count-bg: rgba(15, 23, 42, 0.06);
    --drill-count-text: #334155;
    --drill-header-border: rgba(15, 23, 42, 0.12);
    --drill-back-bg: rgba(15, 23, 42, 0.05);
    --drill-back-bg-hover: rgba(15, 23, 42, 0.1);
    --drill-crumb-text: #475569;
    --drill-crumb-btn-text: #475569;
    --drill-crumb-btn-text-hover: #1e293b;
    --drill-crumb-btn-hover-bg: rgba(15, 23, 42, 0.08);
    --drill-crumb-sep: rgba(15, 23, 42, 0.35);
    --drill-crumb-cur: #334155;
    --drill-accent-rgb: 8, 145, 178;
    --drill-accent-ic: #0e7490;
    --drill-feed-ic: #0891b2;
    --drill-feed-hover-bg: rgba(8, 145, 178, 0.1);
    --drill-target-border: rgba(180, 83, 9, 0.6);
    --drill-target-shadow: 0 0 0 1px rgba(180, 83, 9, 0.35) inset;
    --drill-target-text: #b45309;
    --drill-danger-rgb: 185, 28, 28;
    --drill-danger-text: #b91c1c;
    --drill-danger-strong: #b91c1c;
    --drill-search-chrome-bg: rgba(15, 23, 42, 0.08);
    --drill-search-chrome-bg-hover: rgba(15, 23, 42, 0.16);
    --drill-search-chrome-text: #475569;
    --drill-search-chrome-text-strong: #090d16;
    --drill-search-meta-text: #475569;
    --drill-recents-chip-bg: #ffffff;
    --drill-recents-caption-text: #475569;
    --drill-recents-clear-text: #64748b;
    --drill-recents-clear-text-hover: #334155;
    --drill-recents-x-bg: rgba(15, 23, 42, 0.08);
    --drill-recents-x-text: #475569;
    --drill-tab-hover-bg: rgba(15, 23, 42, 0.06);
  }
}

/* ---------- Grundstruktur (beide Modi) ---------- */

.drill-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.drill-node { margin: 0; padding: 0; position: static; }

.drill-item {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px; /* Touch-Vertrag (FRONTEND_TASKLIST P1.3) */
  padding: 4px 6px 4px 10px;
  border-radius: 12px;
  background: var(--drill-item-bg);
  border: 1px solid var(--drill-item-border);
}

.drill-link {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: inherit;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.25;
}
a.drill-link:hover, a.drill-link:focus-visible { color: var(--color-accent-cyan, #22d3ee); }

.drill-ic { flex-shrink: 0; font-size: 1rem; line-height: 1; }
.drill-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.drill-count {
  flex-shrink: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.7rem;
  line-height: 1;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--drill-count-bg);
  color: var(--drill-count-text);
}

.drill-next {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(var(--drill-accent-rgb), 0.35);
  border-radius: 10px;
  background: rgba(var(--drill-accent-rgb), 0.08);
  color: var(--color-accent-cyan, #22d3ee);
  font-size: 1.35rem;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}
.drill-next:hover, .drill-next:focus-visible { background: rgba(var(--drill-accent-rgb), 0.18); }
.drill-next[aria-expanded="true"] { background: rgba(var(--drill-accent-rgb), 0.18); }

/* MND-F1: Feed-Abo-Icon (nur Bäume mit feed_url — rss/radar) */
.drill-feed {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  color: var(--drill-feed-ic);
  text-decoration: none;
  transition: color 0.15s ease, background 0.15s ease;
}
.drill-feed:hover, .drill-feed:focus-visible { color: var(--color-accent-cyan, #22d3ee); background: var(--drill-feed-hover-bg); }

/* ---------- Sub-Panel: Kopfzeile + Alle-aus-Eintrag + Body ---------- */

.drill-sub-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--drill-header-border);
}

.drill-back {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 0 12px 0 6px;
  border: 0;
  border-radius: 10px;
  background: var(--drill-back-bg);
  color: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}
.drill-back:hover, .drill-back:focus-visible { background: var(--drill-back-bg-hover); }
.drill-back-caret { font-size: 1.25rem; line-height: 1; }

.drill-crumb {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  color: var(--drill-crumb-text);
}

.drill-all {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 6px 10px;
  border-radius: 12px;
  border: 1px solid rgba(var(--drill-accent-rgb), 0.4);
  background: rgba(var(--drill-accent-rgb), 0.1);
  color: inherit;
  text-decoration: none;
  font-size: 0.9rem;
}
a.drill-all:hover, a.drill-all:focus-visible {
  background: rgba(var(--drill-accent-rgb), 0.2);
  color: var(--color-accent-cyan, #22d3ee);
}
.drill-all-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Ohne JS: statisch eingerückte Verschachtelung ---------- */

.drill-sub {
  margin: 6px 0 2px 12px;
  padding-left: 10px;
  border-left: 2px solid rgba(var(--drill-accent-rgb), 0.3);
}

/* ---------- Mit JS: Overlay-Geometrie im [data-drill-root] ---------- */

html.drill-js [data-drill-root] { position: relative; }

/* Scroll-Container-Außenstelle: im JS-Modus scrollt JEDE Root-Liste selbst
   (die tab-content-Scrollfläche wird dicht). Klasse .drill-tabcontent wird
   vom Template zusätzlich zur Bootstrap-Struktur getragen. */
/* Der Drawer-Body (justify-content-between, Suchfeld + Tabs + Sektionen +
   Footer) hat keine positive Resthöhe für den Baum — flex würde ihn als
   einzigem schrumpfbaren Kind auf 0 quetschen. Daher: Baum bekommt eine
   eigene dvh-Fläche (60 Prozent der dynamischen Viewport-Höhe) und lebt im
   Body-Scroll; Panels füllen diese Fläche absolute. vh-Fallback für alte
   Browser vor dvh. */

/* Der Drawer-Body ist d-flex + justify-content-between (kurzer Legacy-Baum).
   Mit dem 60dvh-Baum übersteigt der Inhalt die Body-Höhe — space-between
   verteilt dann NEGATIV und stapelt Sektionen ÜBER den Baum (beide bei
   gleicher Y-Position, Klick-Interception). Im Drill-Modus daher schlichter
   Stapel-Flow: Body scrollt (offcanvas-body hat overflow:auto), Footer
   bleibt via mt-auto unten verankert, Sektionen stehen unter dem Baum. */

html.drill-js .glass-offcanvas .offcanvas-body { justify-content: flex-start; }

html.drill-js .drill-tabcontent { overflow: visible; flex-shrink: 0; }
html.drill-js .drill-tabcontent > [data-drill-root] {
  height: 60vh;
  height: 60dvh;
  min-height: 340px;
}

/* Root-Ebene scrollt selbst — entweder ist die Root-Liste direktes Kind
   (RSS-/CMS-Tab) oder ein .drill-scroll-Wrapper (Blog-Tab mit Kopfkopf-
   Button) übernimmt den Scroll über beide. */
html.drill-js [data-drill-root] > .drill-list,
html.drill-js [data-drill-root] > .drill-scroll {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 4px 24px 0;
}
html.drill-js [data-drill-root] > .drill-scroll { display: flex; flex-direction: column; }

html.drill-js .drill-layer {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}
html.drill-js .drill-layer > .drill-sub { pointer-events: auto; }

html.drill-js .drill-sub {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: var(--drill-panel-bg);
  box-shadow: var(--drill-panel-shadow);
  overflow: hidden;
  transform: translateX(100%);
  transition: transform 0.26s ease-out;
  will-change: transform;
}
html.drill-js .drill-sub.is-open { transform: translateX(0); }

html.drill-js .drill-sub .drill-sub-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px;
}

/* Enkel-Panels im Layer liegen im selben Koordinatensystem wie ihr Parent-
   Panel (absolute inset: 0 je Layer) — z-Index setzt drill-nav.js nach
   Ebene. Ohne JS-Geometrie gilt oben die statische Einrückung weiter. */

/* ---------- Themen-Radar-Drawer: Body wird Flex-Spalte, Matrix scrollt ---------- */
/* .md-radar-drawer hat 80vh (community_chat.css) — der Body kann im JS-Modus
   sicher auf Flex-Spalte kippen: Hero + Filter oben fix, Matrix-Bereich
   füllt den Rest und scrollt eigenständig; Panels überlagern absolute. */

html.drill-js .md-radar-drillbody { overflow: hidden; display: flex; flex-direction: column; }
html.drill-js .md-radar-matrix-wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin-top: 12px;
}
html.drill-js .md-radar-matrix-wrap > .drill-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
html.drill-js .md-radar-matrix-wrap .drill-next { width: 34px; height: 34px; font-size: 1.15rem; }

/* ---------- MND2-3: „Zuletzt besuchte Kategorien" (Root-Listen-Kopf) ---------- */

.drill-recents {
  display: block;
  margin: 0 0 4px 0;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px dashed rgba(var(--drill-accent-rgb), 0.35);
  background: rgba(var(--drill-accent-rgb), 0.05);
}
.drill-recents-caption {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--drill-recents-caption-text);
  margin-bottom: 6px;
}
.drill-recents-track {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.drill-recents-track::-webkit-scrollbar { display: none; }
.drill-recents-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(var(--drill-accent-rgb), 0.3);
  background: var(--drill-recents-chip-bg);
  color: inherit;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}
a.drill-recents-chip:hover, a.drill-recents-chip:focus-visible {
  background: rgba(var(--drill-accent-rgb), 0.14);
  color: var(--color-accent-cyan, #22d3ee);
}
.drill-recents-chip-label { max-width: 160px; overflow: hidden; text-overflow: ellipsis; }

/* ---------- MND-G1: Aktive Kategorie (URL-Match, aria-current) ---------- */

.drill-item:has(> a.drill-link.is-active) {
  border-color: rgba(var(--drill-accent-rgb), 0.55);
  background: rgba(var(--drill-accent-rgb), 0.1);
}
a.drill-link.is-active { color: var(--color-accent-cyan, #22d3ee); }
a.drill-link.is-active::after {
  content: "•";
  margin-left: 4px;
  color: var(--color-accent-cyan, #22d3ee);
}
a.drill-all.is-active {
  border-color: rgba(var(--drill-accent-rgb), 0.65);
  background: rgba(var(--drill-accent-rgb), 0.16);
  color: var(--color-accent-cyan, #22d3ee);
}

/* MND-G8: Deep-Link-Ziel (Leaf ohne eigenes Panel) — Sprungmarke */
.drill-node.is-target > .drill-item {
  border-color: var(--drill-target-border);
  box-shadow: var(--drill-target-shadow);
}
.drill-node.is-target > .drill-item a.drill-link { color: var(--drill-target-text); }

/* ---------- MND-G2: Klickbare Breadcrumb-Kette ---------- */

.drill-crumb { display: flex; align-items: center; gap: 2px; }
.drill-crumb-btn {
  border: 0;
  padding: 6px 7px;
  border-radius: 8px;
  background: transparent;
  color: var(--drill-crumb-btn-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  line-height: 1.2;
  min-height: 32px;
  cursor: pointer;
  max-width: 34vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.drill-crumb-btn:hover, .drill-crumb-btn:focus-visible {
  background: var(--drill-crumb-btn-hover-bg);
  color: var(--drill-crumb-btn-text-hover);
}
.drill-crumb-sep { color: var(--drill-crumb-sep); flex-shrink: 0; }
.drill-crumb-cur {
  color: var(--drill-crumb-cur);
  font-size: 0.68rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- MND-G3: Such-Meta (Trefferzahl / Keine Treffer / Clear) ---------- */

.drill-search-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  border-radius: 999px;
  min-width: 28px;
  min-height: 28px;
  background: var(--drill-search-chrome-bg);
  color: var(--drill-search-chrome-text);
  font-size: 0.72rem;
  line-height: 1;
  cursor: pointer;
}
.drill-search-clear:hover, .drill-search-clear:focus-visible {
  background: var(--drill-search-chrome-bg-hover);
  color: var(--drill-search-chrome-text-strong);
}
.drill-search-meta {
  margin-top: 6px;
  padding: 0 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--drill-search-meta-text);
  min-height: 1em;
}
.drill-search-meta.is-empty { color: var(--drill-danger-text); }
.drill-search-reset {
  border: 0;
  padding: 2px 6px;
  border-radius: 8px;
  background: rgba(var(--drill-danger-rgb), 0.12);
  color: var(--drill-danger-strong);
  font-size: inherit;
  font-family: inherit;
  cursor: pointer;
  text-decoration: underline;
}
.drill-search-reset:hover, .drill-search-reset:focus-visible { background: rgba(var(--drill-danger-rgb), 0.22); }

/* ---------- MND-G5: Recents — Tree-Badge, Einzel-/Gesamtlöschen ---------- */

.drill-recents-caption { justify-content: space-between; width: 100%; }
.drill-recents-clear {
  border: 0;
  padding: 2px 8px;
  border-radius: 8px;
  background: transparent;
  color: var(--drill-recents-clear-text);
  font-size: 0.66rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.drill-recents-clear:hover, .drill-recents-clear:focus-visible { color: var(--drill-recents-clear-text-hover); }
.drill-recents-chipwrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.drill-recents-chip { padding-right: 30px; }
.drill-recents-chip-tree {
  flex-shrink: 0;
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--drill-accent-ic);
  border: 1px solid rgba(var(--drill-accent-rgb), 0.35);
  border-radius: 6px;
  padding: 2px 5px;
  line-height: 1;
}
.drill-recents-x {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: var(--drill-recents-x-bg);
  color: var(--drill-recents-x-text);
  font-size: 0.62rem;
  line-height: 1;
  cursor: pointer;
}
.drill-recents-x:hover, .drill-recents-x:focus-visible {
  background: rgba(var(--drill-danger-rgb), 0.25);
  color: var(--drill-danger-strong);
}

/* ---------- Reduced Motion: Slides aus, Zustandswechsel instant ---------- */

@media (prefers-reduced-motion: reduce) {
  html.drill-js .drill-sub { transition: none; }
}

/* ---------- Schmale Sichtflächen: Badges/Icons atmen lassen ---------- */

@media (max-width: 379px) {
  .drill-count { padding: 4px 6px; font-size: 0.65rem; }
  .drill-next { width: 36px; height: 36px; }
  .drill-item { min-height: 44px; }
}