/* ============================================================
   kondeor.ai · method-guide.css
   Version : 1.2.1
   Datum   : 24.09.2026
   NEU (Chat-Diskussion 24.09.2026, "darüber wäre ich froh" -- statischer
   SEO-Fallback für den Leitfaden): .mthg-static-fallback und Kind-
   Elemente (h2/h3/p/article) ergänzt -- Basis-Styling für die neue
   statische HTML-Fassung (siehe method-guide-embed-de.html/-en.html),
   die method-guide.js beim Laden ganz normal überschreibt. Reine
   Anzeige-Styles, keine Interaktivität nötig.
   ────────────────────────────────────────────────────────────────
   Version : 1.2.0
   Datum   : 24.09.2026
   FIX (Chat-Diskussion 24.09.2026, "hier kann man den Text schlecht
   lesen"): .mthg-modal-card/.mthg-embed-card setzten nirgends eine
   explizite Textfarbe -- Erklärtext (.mthg-guide-text) und Frage-Text
   (.mthg-question) erbten dadurch die Textfarbe der TYPO3-Seite selbst
   (ein gedimmtes Grau, für einen hellen Hintergrund gedacht) statt einer
   für den dunklen Kartenhintergrund passenden Farbe -- schlechter
   Kontrast, schwer lesbar. Gleiche Fehlerklasse wie beim "Strich":
   stillschweigend auf die einbindende Seite verlassen statt explizit
   selbst zu setzen. color:var(--text) jetzt sowohl am Container
   (Sicherheitsnetz für jedes noch nicht einzeln abgesicherte Element) ALS
   AUCH direkt an .mthg-guide-text/.mthg-question selbst ergänzt.
   Systematisch nach weiteren Lücken derselben Art durchsucht (Text-Regeln
   ohne color) -- zwei gefunden (.mthg-admin-save-status, .mthg-chip-
   count), beide unproblematisch, da sie korrekt von jetzt reparierten
   Elternelementen erben.
   ────────────────────────────────────────────────────────────────
   Version : 1.1.9
   Datum   : 24.09.2026
   GEÄNDERT (Chat-Diskussion 24.09.2026, Gegenstück zu method-guide.js
   1.12): alle .active-Selektoren auf .mthg-active umbenannt --
   vermutliche Kollision mit einer generischen, TYPO3-eigenen "active"-
   Regel (typisch für Seitennavigation), die nicht in unseren Dateien
   steht und deshalb nie auffindbar war. "mthg-active" ist eindeutig
   genug, um mit nichts auf der Website zu kollidieren.
   ────────────────────────────────────────────────────────────────
   Version : 1.1.8
   Datum   : 24.09.2026
   GEÄNDERT (Chat-Diskussion 24.09.2026, Gegenstück zu method-guide.js
   1.11 -- "anstelle der Boxen ein anderes Symbol"): .mthg-mode-btn.active/
   .mthg-chip.active haben jetzt bewusst denselben Hintergrund/Rand wie
   ihr jeweiliger Grundzustand -- keine Box-Farbdifferenz mehr zwischen
   aktiv/inaktiv. Nur noch Textfarbe (teal) + Schriftgewicht (600)
   unterscheiden, zusammen mit dem neuen Häkchen-Präfix im Textinhalt
   (method-guide.js). Strengerer Test von Dietmars Vorschlag -- nicht nur
   ein Symbol ergänzt, sondern die Box-Differenzierung bewusst entfernt,
   um zu prüfen, ob genau DAS den Strich ausgelöst hat.
   ────────────────────────────────────────────────────────────────
   Version : 1.1.7
   Datum   : 24.09.2026
   GEÄNDERT (Chat-Diskussion 24.09.2026, Gegenstück zu method-guide.js
   1.10 -- "die Boxen anders definieren"): user-select:none (+ -webkit-
   Präfix) auf .mthg-mode-btn/.mthg-chip ergänzt, seit der Umstellung von
   <button> auf <div role="button"> nötig -- Divs sind von Haus aus
   textmarkierbar, Buttons nicht. text-align:center bei .mthg-mode-btn
   ergänzt, aus demselben Grund (Buttons zentrieren ihren Inhalt
   standardmäßig).
   ────────────────────────────────────────────────────────────────
   Version : 1.1.6
   Datum   : 24.09.2026
   FIX (Chat-Diskussion 24.09.2026, direkte Fortsetzung -- der "Strich"
   überlebte selbst die Bootstrap-box-shadow-Härtung 1.1.5, per Computed-
   Panel bestätigt sauber: kein Rand, kein Schatten am aktiven Element
   selbst. Dietmar bestätigte zusätzlich: kein Text -- lässt sich nicht
   markieren; gehört konsequent zu jedem gerade angeklickten Element,
   nicht nur einem bestimmten): box-sizing als letzte, bis dahin nicht
   geprüfte Lücke identifiziert. .mthg-chip/.mthg-mode-btn setzten
   box-sizing nie selbst, verließen sich stillschweigend auf index.htmls
   globalen Reset -- der in der TYPO3-Einbettung nicht existiert. Jetzt
   selbst gesetzt, scoped auf #method-guide-modal/#method-guide-embed und
   deren Nachfahren -- unabhängig von dem, was die Wirtsseite vorgibt.
   ────────────────────────────────────────────────────────────────
   Version : 1.1.5
   Datum   : 24.09.2026
   FIX (Chat-Diskussion 24.09.2026, endgültige Klärung -- Dietmar hat
   bestätigt: der Strich existiert NUR in der TYPO3-eingebetteten Version
   (method-guide-embed.html), NICHT in kondeor.ai/analyse.kondeor.at
   selbst -- die ganze bisherige Fehlersuche in index.html war damit
   korrekt ergebnislos, weil das schlicht die falsche Datei für dieses
   Symptom war). Computed-Panel eindeutig als Bootstrap identifiziert
   (font-family "M PLUS Rounded 1c", --bs-*-Variablen) -- TYPO3 nutzt
   Bootstrap, dessen globale Button-Grundstile (u.a. der bekannte Fokus-
   "Glow"-box-shadow) mit .mthg-chip/.mthg-mode-btn interferieren können,
   ohne dass wir die Kaskaden-Reihenfolge/Spezifität der einbindenden
   Seite kontrollieren. Defensive Härtung ergänzt (box-shadow/text-
   shadow/text-transform/letter-spacing mit !important zurückgesetzt, auf
   allen eigenen interaktiven Klassen inkl. hover/focus/active) -- in der
   App (kein Bootstrap) ein wirkungsloses No-op, betrifft nur unsere
   eigenen Klassen, keinen Einfluss auf die Wirtsseite selbst.
   ────────────────────────────────────────────────────────────────
   Version : 1.1.4
   Datum   : 24.09.2026
   FIX (Chat-Diskussion 24.09.2026, endlich gefunden -- Dietmar hat mit
   Browser-Zoom + Element-Auswahlwerkzeug präzise auf den Strich selbst
   geklickt, statt auf den Nachbar-Button: "der strich gehört zum
   kästchen"): der Strich war die ganze Zeit der EIGENE Rand des aktiven
   Buttons/Chips (border-color bei niedriger Deckkraft bzw. exakt
   gleicher Farbe wie die Füllung), der am Übergang der abgerundeten Ecke
   optisch wie ein separater, abgehängter Strich statt wie ein
   durchgehender Rahmen wirkte -- kein externes Element, kein ::before/
   ::after, kein Fokus-Ring, kein Cache-Problem (alles zuvor ausgeschlossen
   war tatsächlich nicht die Ursache, nur folgerichtig ausgeschlossen).
   border-color bei .active jetzt komplett transparent statt farblich
   angeglichen -- die Füllung allein signalisiert "aktiv" eindeutig, ein
   zusätzlicher Rand war nur eine Fehlerquelle, keine nötige Gestaltung.
   ────────────────────────────────────────────────────────────────
   Version : 1.1.3
   Datum   : 24.09.2026
   FIX (Chat-Diskussion 24.09.2026, direkte Fortsetzung -- Dietmars
   Rückmeldung "jetzt kann man es nicht mehr so gut lesen wie vorher"):
   1.1.2 hatte versehentlich nicht nur den teal-getönten Rand, sondern
   auch die TEXTFARBE gedimmt (var(--text-muted) statt var(--text)) --
   zu viel des Guten. Textfarbe zurück auf volle Helligkeit, nur Rand/
   Hintergrund bleiben neutral statt teal-getönt.
   ────────────────────────────────────────────────────────────────
   Version : 1.1.2
   Datum   : 24.09.2026
   GEÄNDERT (Chat-Diskussion 24.09.2026, direkte Fortsetzung -- Dietmars
   gemeldeter "Bug" per DevTools-Beleg aufgeklärt): kein echter Bug --
   .mthg-chip hatte im NICHT ausgewählten Zustand einen teal getönten
   Rand/Hintergrund (bewusst so, damit sichtbar bleibt, was noch wählbar
   ist), der aber dieselbe Farbfamilie wie der ausgewählte Zustand
   (.active, voll teal gefüllt) nutzte -- beide zusammen auf einen Blick
   kaum unterscheidbar, obwohl nur eine einzige Chip tatsächlich
   class="active" trug (per DevTools bestätigt). Default-Zustand jetzt
   neutral grau statt teal getönt; Hover bleibt teal (Bedienungs-
   feedback), .active bleibt die einzige voll teal gefüllte Chip --
   dadurch eindeutig als einzige "ausgewählt" erkennbar.
   ────────────────────────────────────────────────────────────────
   Version : 1.1.1
   Datum   : 24.09.2026
   FIX (Chat-Diskussion 24.09.2026, Dietmars Fund per Screenshot: "In der
   Web-Variante gibt es einen Strich vor den ausgewählten Kästchen"):
   kein CSS-Border war die Ursache (DevTools-Beleg zeigte genau die
   betroffenen .mthg-mode-btn.active/.mthg-chip.active-Elemente selbst,
   deren eigene Border-Definitionen aber keinen sichtbaren "Strich davor"
   erklären konnten) -- der browsereigene :focus-Umriss, der nach einem
   Mausklick sichtbar blieb, war nirgends zurückgesetzt. Auf :focus-visible
   umgestellt statt outline:none (siehe Kommentar bei der Regel selbst) --
   verschwindet nach einem Klick von selbst, bleibt für Tastaturbedienung
   als kontrollierter Teal-Ring erhalten. Auf alle klickbaren .mthg-*-
   Elemente angewandt, nicht nur die zwei gemeldeten.
   ────────────────────────────────────────────────────────────────
   Version : 1.1.0
   Datum   : 24.09.2026
   NEU (Chat-Diskussion 24.09.2026, "kann diese Seitenarchitektur das
   Methoden-Widget ersetzen?", Dietmars Entscheidung "Ad 3: Ja, das bitte
   bauen"): neue Klassen für die beiden method-guide.js-1.7-Ergänzungen --
   .mthg-embed-card/.mthg-embed-body (eingebetteter Darstellungsmodus,
   nutzt .mthg-modal-header/-footer/-title/-nav-btn von oben mit, aber
   ohne Overlay/Backdrop/max-height, wächst mit dem Seiteninhalt statt
   intern zu scrollen) und .mthg-facet-result-list/-card/-name/-desc
   (Inline-Beschreibungen in der Frei-filtern-Trefferliste, Ersatz für die
   bisher separat gepflegten Widget-Kacheln).
   ────────────────────────────────────────────────────────────────
   Version : 1.0.0
   Datum   : 24.09.2026
   NEU (Chat-Diskussion 24.09.2026, "method-guide.js von kondeor.ai
   übernehmen statt duplizieren" -- Wiederverwendung auf der künftigen
   öffentlichen Landingpage-Sektion): aus dem bisherigen inline <style>-
   Block in index.html ausgelagert (dort seit v1.10.4/1.10.7/1.10.8,
   siehe dortige Changelog-Historie für die Entstehung jeder einzelnen
   Regelgruppe -- hier nur zusammengeführt, inhaltlich unverändert bis
   auf die beiden Punkte unten). Beide Seiten (index.html UND die
   künftige Landingpage) binden diese eine Datei per <link> ein, statt
   den Block zweimal zu pflegen.
   ZWEI ECHTE FUNDE dabei behoben, nicht nur verschoben:
   (1) Alle var(--xxx)-Aufrufe haben jetzt einen expliziten Fallback-Wert
       (den echten, aus index.htmls :root abgeschriebenen Wert) -- die
       Datei funktioniert dadurch identisch, egal ob die einbindende
       Seite dieselben CSS-Variablennamen kennt oder nicht (die künftige
       Landingpage hat ein eigenes, helles Farbschema, keine der
       app-eigenen --teal/--text/--bg-Variablen).
   (2) var(--surface) und var(--bg) waren im gesamten Dokument NIRGENDS
       definiert (geprüft: keine :root-Zeile, keine andere Definition) --
       die Modal-Karte und die Template-Vorschau-Box liefen dadurch ohne
       jede Hintergrundfarbe, vermutlich unbemerkt, weil umgebende
       Elemente zufällig für Kontrast sorgten. Fallback-Werte jetzt
       passend zum bestehenden --dark/--dark2-Tonwertsystem ergänzt:
       --surface (Karte, soll sich vom Seitenhintergrund abheben) auf
       #24272d (= --dark2), --bg (Vorschau-Box, soll wirken wie
       eingelassen) auf #1c1e22 (= --dark) -- keine neuen Werte erfunden,
       nur die bereits im Dokument etablierten Töne wiederverwendet.
   ============================================================ */

/* ── Eigener box-sizing-Reset (NEU 24.09.2026, Dietmars hartnäckiger
   "Strich"-Fund -- letzte noch nicht geprüfte Ursache): .mthg-chip/
   .mthg-mode-btn setzten box-sizing nirgends selbst, sondern verließen
   sich stillschweigend auf index.htmls globale Reset-Regel (*, *::before,
   *::after { box-sizing: border-box; }). Die existiert nur in der App --
   in der TYPO3-Einbettung gibt es sie nicht, dort gilt, was immer
   Bootstrap (oder der Browser-Standard) vorgibt. Weicht das ab, würden
   Rand und Innenabstand ZUR angegebenen Breite dazugerechnet statt darin
   enthalten zu sein -- in einer Flex-Reihe mit gap ein plausibler
   Auslöser für einen kleinen, unerwarteten Versatz genau dort, wo ein
   Element seinen Zustand wechselt. Jetzt selbst explizit gesetzt, scoped
   auf die eigenen Container -- unabhängig davon, was die Wirtsseite
   vorgibt oder nicht vorgibt. */
#method-guide-modal, #method-guide-modal *, #method-guide-modal *::before, #method-guide-modal *::after,
#method-guide-embed, #method-guide-embed *, #method-guide-embed *::before, #method-guide-embed *::after {
  box-sizing: border-box;
}

.mthg-question { font-size:15px; font-weight:500; margin-bottom:16px; line-height:1.5; color:var(--text, #e8eaed); }
.mthg-options { display:flex; flex-direction:column; gap:8px; }
.mthg-opt {
  background:rgba(0,180,180,0.08); border:1px solid rgba(0,180,180,0.25); border-radius:8px;
  color:var(--text, #e8eaed); font-size:13px; padding:10px 16px; text-align:left; cursor:pointer;
  transition:background 0.15s, border-color 0.15s;
}
.mthg-opt:hover { background:rgba(0,180,180,0.18); border-color:rgba(0,180,180,0.45); }
.mthg-result-title { font-size:13px; letter-spacing:0.08em; text-transform:uppercase; color:rgba(0,180,180,0.8); font-weight:600; margin-bottom:4px; }
.mthg-method-name { font-size:19px; font-weight:700; color:var(--text, #e8eaed); margin-bottom:16px; }
.mthg-audience-toggle { display:flex; gap:6px; margin-bottom:14px; }
.mthg-aud-btn {
  flex:1; background:none; border:1px solid rgba(255,255,255,0.15); border-radius:6px;
  color:var(--text-muted, #8a909a); font-size:12px; padding:6px 10px; cursor:pointer;
}
.mthg-aud-btn.mthg-active { background:rgba(0,180,180,0.15); border-color:rgba(0,180,180,0.4); color:var(--teal, #00b4b4); font-weight:600; }
.mthg-guide-text { font-size:14px; line-height:1.6; margin-bottom:16px; color:var(--text, #e8eaed); }
.mthg-template-label { font-size:11px; color:var(--text-muted, #8a909a); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:6px; }
.mthg-template-box {
  background:var(--bg, #1c1e22); border:1px solid rgba(255,255,255,0.1); border-radius:8px;
  padding:10px 14px; font-family:var(--mono, ui-monospace, Consolas, "Cascadia Code", "SF Mono", monospace); font-size:12px; color:var(--teal, #00b4b4); margin-bottom:12px;
  white-space:pre-wrap; word-break:break-word;
}
.mthg-use-btn {
  background:var(--teal, #00b4b4); border:none; border-radius:8px; color:#fff; font-size:13px;
  font-weight:600; padding:9px 18px; cursor:pointer; width:100%;
}
.mthg-admin-edit { margin-top:20px; padding-top:16px; border-top:1px dashed rgba(255,180,0,0.3); }
.mthg-admin-label { font-size:11px; color:#ffb400; margin-bottom:10px; }
.mthg-admin-field { margin-bottom:14px; }
.mthg-admin-field label { display:block; font-size:12px; color:var(--text-muted, #8a909a); margin-bottom:4px; }
.mthg-admin-edit textarea {
  width:100%; background:var(--bg, #1c1e22); border:1px solid rgba(255,255,255,0.15); border-radius:6px;
  color:var(--text, #e8eaed); font-size:12px; padding:8px; resize:vertical; font-family:var(--sans, system-ui, "Segoe UI", Helvetica, Arial, sans-serif);
}
.mthg-admin-save-btn {
  background:rgba(255,180,0,0.15); border:1px solid rgba(255,180,0,0.4); border-radius:6px;
  color:#ffb400; font-size:12px; padding:6px 14px; cursor:pointer; margin-top:8px;
}
.mthg-admin-save-status { margin-left:8px; font-size:12px; opacity:0.7; }

/* NEU (23.09.2026, Facetten-Filter, Chat-Diskussion "Facetten-Filter-
   UI") -- gleiche Design-Sprache wie der bestehende .mthg-*-Block oben
   (Teal-Akzent, --text/--text-muted/--bg/--surface). Gegenstück:
   method-guide.js 1.2. */
.mthg-mode-toggle { display:flex; gap:6px; margin-bottom:18px; }
.mthg-mode-btn {
  flex:1; background:none; border:1px solid rgba(255,255,255,0.15); border-radius:8px;
  color:var(--text-muted, #8a909a); font-size:13px; font-weight:500; padding:8px 12px; cursor:pointer;
  transition:background 0.15s, border-color 0.15s, color 0.15s;
  text-align:center; user-select:none; -webkit-user-select:none;
}
.mthg-mode-btn.mthg-active { background:none; border-color:rgba(255,255,255,0.15); color:var(--teal, #00b4b4); font-weight:600; }
/* GEÄNDERT (23.09.2026, Dietmars Wunsch "Entscheidungsebenen optisch
   stärker trennen"): Containment statt Farbcodierung -- jede primäre
   Facette bekommt eine eigene, dezent abgesetzte Karte (Hintergrund-
   Tönung + dünner Rahmen + Radius) plus einen Teal-Akzentrand links, statt
   jede Facette in eine andere Farbe zu tauchen (würde "unzusammenhängende
   Dinge" statt "Schritte im selben Filter-Fluss" suggerieren und mit der
   Ein-Akzentfarben-Sprache brechen). Sekundär-Facetten ("Weitere
   Einschränkungen") bewusst GEDÄMPFT + gestrichelt -- dieselbe Konvention
   wie .mthg-admin-edit oben, signalisiert "optional/nachrangig" statt
   gleichrangig zu den vier primären Facetten. Ergebnisliste bekommt eine
   eigene, wärmer teal-getönte Karte -- der "Ziel"-Block, sichtbar vom
   Rest der Eingabe-Karten abgesetzt. */
.mthg-facet-group {
  background:rgba(255,255,255,0.025); border:1px solid rgba(255,255,255,0.07);
  border-left:3px solid rgba(0,180,180,0.4); border-radius:10px;
  padding:14px 16px 16px; margin-bottom:12px;
}
.mthg-facet-label { font-size:12px; color:var(--text-muted, #8a909a); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:8px; }
.mthg-facet-chips { display:flex; flex-wrap:wrap; gap:6px; }
.mthg-chip {
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.14); border-radius:16px;
  color:var(--text, #e8eaed); font-size:12px; padding:6px 12px; cursor:pointer;
  transition:background 0.15s, border-color 0.15s, color 0.15s;
  user-select:none; -webkit-user-select:none;
}
.mthg-chip:hover { background:rgba(0,180,180,0.1); border-color:rgba(0,180,180,0.3); }
.mthg-chip.mthg-active { background:rgba(255,255,255,0.04); border-color:rgba(255,255,255,0.14); color:var(--teal, #00b4b4); font-weight:600; }
.mthg-chip-count { opacity:0.65; font-size:11px; }
.mthg-chip.mthg-active .mthg-chip-count { opacity:0.85; }
.mthg-chip-zero { opacity:0.45; }
.mthg-facet-more {
  background:rgba(255,255,255,0.015); border:1px dashed rgba(255,255,255,0.14);
  border-left:3px solid rgba(255,255,255,0.18); border-radius:10px;
  padding:10px 16px 12px; margin-bottom:16px;
}
.mthg-facet-more-toggle {
  background:none; border:none; color:var(--text-muted, #8a909a); font-size:12px; cursor:pointer;
  padding:4px 0; text-align:left;
}
.mthg-facet-more-toggle:hover { color:var(--text, #e8eaed); }
.mthg-facet-results {
  margin-top:16px; padding:16px; background:rgba(0,180,180,0.05);
  border:1px solid rgba(0,180,180,0.2); border-radius:10px;
}
.mthg-facet-results-header {
  display:flex; align-items:center; margin-bottom:12px;
  font-size:12px; color:var(--text-muted, #8a909a); text-transform:uppercase; letter-spacing:0.06em;
}
.mthg-facet-empty { font-size:13px; color:var(--text-muted, #8a909a); padding:20px 0; text-align:center; }

/* ── Modal-Hülle (NEU 24.09.2026) ────────────────────────────────────
   Bisher als handgeschriebenes, inline-gestyltes HTML in index.html --
   method-guide.js erzeugt die Hülle jetzt selbst per JS, wenn sie noch
   nicht im DOM steht (_mthgEnsureModalShell()). Diese Klassen ersetzen
   die vorherigen Inline-Styles 1:1 (gleiches Aussehen), damit weder
   index.html noch die künftige Landingpage dieses Markup von Hand
   mitbringen müssen. */
.mthg-modal-overlay {
  display:none; position:fixed; inset:0; z-index:8500;
  background:rgba(0,0,0,0.7); backdrop-filter:blur(4px);
  align-items:center; justify-content:center;
}
.mthg-modal-card {
  background:var(--surface, #24272d); border:1px solid rgba(0,180,180,0.25); border-radius:14px;
  width:min(560px,96vw); max-height:90vh; display:flex; flex-direction:column;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);
  color:var(--text, #e8eaed);
}
.mthg-modal-header {
  padding:18px 24px 14px; border-bottom:1px solid rgba(255,255,255,0.07);
  display:flex; align-items:center; justify-content:space-between; flex-shrink:0;
}
.mthg-modal-title { font-size:13px; letter-spacing:0.12em; text-transform:uppercase; color:rgba(0,180,180,0.8); font-weight:600; }
.mthg-modal-close { background:none; border:none; color:var(--text-muted, #8a909a); font-size:20px; cursor:pointer; padding:4px 8px; line-height:1; }
.mthg-modal-body { padding:20px 24px; overflow-y:auto; flex:1; min-height:0; }
.mthg-modal-footer {
  padding:12px 24px 18px; border-top:1px solid rgba(255,255,255,0.07);
  display:flex; justify-content:space-between; flex-shrink:0;
}
.mthg-modal-nav-btn {
  background:none; border:1px solid rgba(255,255,255,0.15); border-radius:6px;
  color:var(--text-muted, #8a909a); font-size:12px; padding:6px 14px; cursor:pointer;
}
#mthg-back-btn { display:none; } /* JS (_mthgUpdateNav) schaltet dies per style.display um */
.mthg-modal-restart-btn { margin-left:auto; }

/* ── Eingebetteter Darstellungsmodus (NEU 24.09.2026) ─────────────────
   Gleiche Kopf-/Fußzeile wie die Modal-Karte (.mthg-modal-header/-footer/
   -title/-nav-btn oben werden 1:1 mitgenutzt), aber ohne Overlay/Backdrop/
   Schließen-Button -- steht ganz normal im Seitenfluss, wächst mit dem
   Inhalt statt intern zu scrollen (kein max-height/overflow wie beim
   Modal, das wäre für eine immer sichtbare Seitensektion unpassend). */
.mthg-embed-card {
  background:var(--surface, #24272d); border:1px solid rgba(0,180,180,0.25); border-radius:14px;
  max-width:720px; width:100%; margin:0 auto; display:flex; flex-direction:column;
  box-shadow:0 8px 30px rgba(0,0,0,0.25);
  color:var(--text, #e8eaed);
}
.mthg-embed-body { padding:20px 24px; }

/* ── Inline-Beschreibungen in der Trefferliste (NEU 24.09.2026, Ersatz
   für das separate Methoden-Widget -- "Kurzbeschreibung direkt in der
   Trefferliste zeigen") ─────────────────────────────────────────────── */
.mthg-facet-result-list { display:flex; flex-direction:column; gap:10px; }
.mthg-facet-result-card {
  background:rgba(0,180,180,0.05); border:1px solid rgba(0,180,180,0.18); border-radius:10px;
  padding:12px 16px; cursor:pointer; transition:background 0.15s, border-color 0.15s;
}
.mthg-facet-result-card:hover { background:rgba(0,180,180,0.1); border-color:rgba(0,180,180,0.35); }
.mthg-facet-result-name { font-size:14px; font-weight:600; color:var(--text, #e8eaed); margin-bottom:4px; }
.mthg-facet-result-desc { font-size:13px; line-height:1.5; color:var(--text-muted, #8a909a); }

/* ── Fokus-Ring (NEU 24.09.2026, Dietmars Fund "Strich vor den ausgewählten
   Kästchen"): kein CSS-Border war die Ursache -- der browsereigene
   :focus-Umriss, der nach einem Klick auf .mthg-mode-btn/.mthg-chip
   sichtbar blieb, war nirgends zurückgesetzt. Statt outline:none (schlecht
   für Tastaturnutzung) gezielt auf :focus-visible umgestellt: Browser
   setzen das praktisch nie bei einem Mausklick, nur bei Tab-Navigation --
   der Ring verschwindet dadurch nach einem Klick von selbst, bleibt aber
   für Tastaturbedienung als bewusster, eigener Teal-Ring erhalten (sogar
   kontrollierter als der browsereigene Default). Auf alle klickbaren
   .mthg-*-Elemente angewandt, nicht nur die zwei gemeldeten, damit
   dasselbe Artefakt nicht anderswo im Leitfaden wieder auftaucht. */
.mthg-mode-btn, .mthg-chip, .mthg-opt, .mthg-modal-close, .mthg-modal-nav-btn,
.mthg-facet-result-card, .mthg-use-btn, .mthg-admin-save-btn {
  outline: none;
}
.mthg-mode-btn:focus-visible, .mthg-chip:focus-visible, .mthg-opt:focus-visible,
.mthg-modal-close:focus-visible, .mthg-modal-nav-btn:focus-visible,
.mthg-facet-result-card:focus-visible, .mthg-use-btn:focus-visible, .mthg-admin-save-btn:focus-visible {
  outline: 2px solid rgba(0,180,180,0.6); outline-offset: 2px;
}

/* ── Härtung gegen die einbindende Wirtsseite (NEU 24.09.2026, Dietmars
   finaler Fund: der Strich existiert NUR in der TYPO3-eingebetteten
   Version, nicht in kondeor.ai selbst -- bestätigt per Computed-Panel:
   font-family "M PLUS Rounded 1c" und --bs-*-Variablen sind eindeutig
   Bootstrap, nicht unser eigenes Theme). Wir kontrollieren bei einer
   Einbettung weder die Kaskaden-Reihenfolge noch die Spezifität der
   Wirtsseite -- Bootstraps globale Button-Grundstile (u.a. der bekannte
   Fokus-"Glow", ein farbiger box-shadow-Ring) können dadurch mit .mthg-
   chip/.mthg-mode-btn interferieren, ohne dass wir das von hier aus
   verhindern könnten, wenn wir uns nur auf Abwesenheit statt auf einen
   expliziten Reset verlassen. Deshalb defensiv mit !important abgesichert
   -- betrifft ausschließlich unsere eigenen Klassen, hat auf die
   Wirtsseite selbst keinen Einfluss, und ist in der App (kein Bootstrap
   vorhanden) ein wirkungsloses No-op. */
.mthg-mode-btn, .mthg-chip, .mthg-opt, .mthg-modal-close, .mthg-modal-nav-btn,
.mthg-facet-result-card, .mthg-use-btn, .mthg-admin-save-btn,
.mthg-mode-btn:hover, .mthg-chip:hover, .mthg-opt:hover, .mthg-modal-close:hover,
.mthg-modal-nav-btn:hover, .mthg-facet-result-card:hover, .mthg-use-btn:hover, .mthg-admin-save-btn:hover,
.mthg-mode-btn:focus, .mthg-chip:focus, .mthg-opt:focus, .mthg-modal-close:focus,
.mthg-modal-nav-btn:focus, .mthg-facet-result-card:focus, .mthg-use-btn:focus, .mthg-admin-save-btn:focus,
.mthg-mode-btn.mthg-active, .mthg-chip.mthg-active {
  box-shadow: none !important;
  text-shadow: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* ── Statischer SEO-Fallback (NEU 24.09.2026, "darüber wäre ich froh" --
   statisch lesbare Fassung für Suchmaschinen/Crawler ohne JavaScript).
   Wird von method-guide.js beim Laden ganz normal überschrieben
   (bestehendes Verhalten von _mthgEnsureEmbedShell(), keine Änderung
   dort nötig) -- reine Anzeige-Styles, keine Interaktivität. */
.mthg-static-fallback { padding: 20px 24px; color: var(--text, #e8eaed); }
.mthg-static-fallback h2 {
  font-size: 16px; color: var(--teal, #00b4b4); margin: 24px 0 12px;
  text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
}
.mthg-static-fallback h2:first-of-type { margin-top: 0; }
.mthg-static-fallback h3 { font-size: 15px; font-weight: 600; margin: 16px 0 6px; color: var(--text, #e8eaed); }
.mthg-static-fallback p { font-size: 14px; line-height: 1.6; margin-bottom: 8px; color: var(--text, #e8eaed); }
.mthg-static-fallback article { margin-bottom: 16px; }