/* ============================================================================
   HAUSDESIGN — kanonische Basis-CSS für alle Anwendungen unter C:\Users\...\Claude
   ----------------------------------------------------------------------------
   Verbindliche Grundlage. Neue UIs importieren/kopieren diese Datei UNVERÄNDERT
   und ergänzen nur app-spezifische Layoutregeln darüber. Farben, Radien, Fonts
   und Komponenten NIE hart kodieren — immer die Tokens (var(--...)) verwenden,
   sonst bricht der Dark-Mode.

   Herkunft: Design-System des Claude-Appstore-Dashboards (Terracotta-Akzent).
   Änderungen am Design gehören HIERHER (eine Quelle der Wahrheit), nicht in
   einzelne Apps.
   ============================================================================ */

:root {
  /* Flächen */
  --bg: #f6f7f9;
  --panel: #ffffff;
  --panel-2: #fafbfc;
  /* Text */
  --text: #1c1e21;
  --muted: #6b7280;
  --border: #e4e7eb;
  /* Akzent (Claude-Terracotta) */
  --accent: #c15f3c;
  --accent-fg: #ffffff;
  --accent-bg: #f6e6df;
  /* Schriftfarbe fuer Fliesstext AUF Panel/Weiss (Links, Text-auf-Tint) —
     im Claude-Skin identisch zu --accent; andere Marken-Skins (z. B. Eikona)
     ueberschreiben nur diesen Token, wenn --accent als reine Flaeche zu
     kontrastarm fuer Text waere. */
  --accent-text: var(--accent);
  /* Chips / Tags */
  --chip: #eef1f4;
  --chip-text: #40474f;
  /* Schatten */
  --shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  /* Semantische Ampel (Kennzahlen, Status, Meldungen) */
  --good: #197a3d;  --good-bg: #e6f4ea;
  --warn: #8a6d00;  --warn-bg: #fbf3d9;
  --bad:  #b0342a;  --bad-bg:  #f6e0dd;
  --done: #5b636b;  --done-bg: #eceef1;
  /* Maße */
  --radius: 12px;
  --radius-sm: 8px;
  --radius-pill: 999px;
  /* Schriftfamilie: Systemschrift im Claude-Skin. Marken-Skins (z. B. Eikona)
     ueberschreiben NUR diesen Token unter ihrem data-marke-Attribut, statt
     font-family mit !important hart zu setzen. Theme-unabhaengig, deshalb
     nur hier und nicht in den Dark-Mode-Bloecken definiert. */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color-scheme: light;
}

/* Dark-Mode: standardmäßig dem System folgen (prefers-color-scheme). Zusätzlich kann eine App
   das Theme manuell erzwingen, indem sie data-theme="dark"|"light" auf <html> setzt — der
   manuelle Wert gewinnt. Beide Wege nutzen dieselben Token-Werte. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #17191c;
    --panel: #202327;
    --panel-2: #23272c;
    --text: #e7e9ec;
    --muted: #9aa1a9;
    --border: #31363c;
    --accent: #d97a52;
    --accent-fg: #1a1205;
    --accent-bg: #3a281f;
    --accent-text: var(--accent);
    --chip: #2b3037;
    --chip-text: #c3c9d0;
    --shadow: none;
    --good: #6fd68f;  --good-bg: #163422;
    --warn: #e6c65a;  --warn-bg: #3a3110;
    --bad:  #e6857a;  --bad-bg:  #3a1c18;
    --done: #aab1b9;  --done-bg: #2a2e33;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #17191c;
  --panel: #202327;
  --panel-2: #23272c;
  --text: #e7e9ec;
  --muted: #9aa1a9;
  --border: #31363c;
  --accent: #d97a52;
  --accent-fg: #1a1205;
  --accent-bg: #3a281f;
  --accent-text: var(--accent);
  --chip: #2b3037;
  --chip-text: #c3c9d0;
  --shadow: none;
  --good: #6fd68f;  --good-bg: #163422;
  --warn: #e6c65a;  --warn-bg: #3a3110;
  --bad:  #e6857a;  --bad-bg:  #3a1c18;
  --done: #aab1b9;  --done-bg: #2a2e33;
  color-scheme: dark;
}

/* ---- Reset & Basis ---- */
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.45 var(--font);
}
a { color: var(--accent-text); }
h1 { font-size: 19px; margin: 0; font-weight: 650; letter-spacing: -.2px; }
h2 { font-size: 16px; margin: 18px 0 10px; }

/* ---- Steuerelemente ---- */
input, select, textarea, button { font: inherit; }
input, select, textarea {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 11px;
  background: var(--panel-2);
  color: var(--text);
  width: 100%;
  outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); }
input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
/* Auswahl-Checkbox für Listen/Tabellen. Aktuell gleiche Größe wie Basis (einheitlich 16px). */
input[type=checkbox].check-lg { width: 16px; height: 16px; }
/* .field = Steuerelement in einer Toolbar (kein 100%-Block) */
.field { width: auto; }

/* Buttons: EINE einheitliche Größe im ganzen Tool — gleiche Höhe (min-height) und
   gleiche Schriftgröße wie Fließtext (14px). Bewusst KEINE kleineren Größenvarianten:
   Konsistenz vor Kompaktheit. Icon-only-Buttons über .icon-btn (quadratisch, gleiche Höhe). */
button {
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--panel-2);
  color: var(--text);
  border-radius: var(--radius-sm);
  font-size: 14px;
  line-height: 1.2;
  min-height: 36px;
  padding: 0 14px;
  transition: .12s;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
button:hover { border-color: var(--accent); }
button.primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); font-weight: 600; }
button.primary:hover { filter: brightness(1.05); }
button:disabled { opacity: .55; cursor: default; filter: none; }
button.danger { color: var(--bad); }
button.danger:hover { border-color: var(--bad); background: var(--bad-bg); }
/* Icon-only-Button: gleiche Höhe wie Textbuttons, quadratisch. */
.icon-btn { min-width: 36px; padding: 0 8px; }
/* Text-Button ohne Rahmen (Sekundäraktion). Schriftgröße = Fließtext. */
.linklike { border: none; background: none; color: var(--accent-text); padding: 0; font: inherit; font-size: 14px; cursor: pointer; text-decoration: underline; min-height: 0; }

/* Icons: NUR monochrome sw-Symbole als Inline-SVG (folgen currentColor). Keine Emoji,
   keine mehrfarbigen/gefüllten Symbole. Vorlage: ICONS-Map + ic() im appstore-Dashboard. */
.ic { width: 15px; height: 15px; flex-shrink: 0; display: block; }

/* ---- Marken-Header (sticky) ---- */
.app-header {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--panel); border-bottom: 1px solid var(--border);
  padding: 14px 24px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand .logo { width: 32px; height: 32px; flex-shrink: 0; object-fit: contain; }
.brand .sub { color: var(--muted); font-size: 13px; margin: 2px 0 0; }
.spacer { flex: 1; }

/* ---- Karten / Panels ---- */
.card, .panel {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 17px;
}
.panel-2 { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm); }

/* ---- Chips & Badges ---- */
.chip { background: var(--chip); color: var(--chip-text); border-radius: 6px; padding: 2px 8px; font-size: 13px; }
.badge { white-space: nowrap; font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: var(--radius-pill); background: var(--chip); color: var(--chip-text); }
.badge.good { background: var(--good-bg); color: var(--good); }
.badge.warn { background: var(--warn-bg); color: var(--warn); }
.badge.bad  { background: var(--bad-bg);  color: var(--bad); }
.badge.done { background: var(--done-bg); color: var(--done); }

/* ---- Tabs ---- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: 4px 0 14px; }
.tabs button, .tab { padding: 8px 14px; cursor: pointer; border: none; background: none; color: var(--muted); border-bottom: 2px solid transparent; border-radius: 0; }
.tabs button.active, .tab.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }

/* ---- Segment-Umschalter ---- */
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.seg button { border: none; border-radius: 0; background: var(--panel); padding: 5px 12px; font-size: 13px; color: var(--muted); }
.seg button.active { background: var(--accent); color: var(--accent-fg); font-weight: 600; }

/* ---- Dropdown-/Burger-Menü ----
   MUSS beim Öffnen IMMER vollständig sichtbar sein — besonders am Seitenrand/unteren Rand.
   Die Ausrichtung (nach oben klappen bei zu wenig Platz unten, Höhe auf den freien Raum
   begrenzen → intern scrollen, horizontal am Rand ausrichten statt abschneiden) MUSS per JS
   beim Öffnen gesetzt werden. Vorlage: positionMenu()/toggleMenu() im appstore-Dashboard. */
.menu-wrap { position: relative; }
.menu {
  position: absolute; right: 0; top: calc(100% + 5px); z-index: 45; display: none;
  flex-direction: column; min-width: 180px; padding: 5px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0,0,0,.22); max-height: 70vh; overflow-y: auto;
}
.menu.up { top: auto; bottom: calc(100% + 5px); }   /* nach oben geklappt, wenn unten kein Platz */
.menu.open { display: flex; }
.menu button { border: none; background: none; width: 100%; justify-content: flex-start; gap: 9px; }
.menu button:hover { background: var(--chip); }

/* ---- Tabellen ---- */
.table-wrap { overflow-x: auto; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th, table.data td { text-align: left; padding: 9px 12px; }
table.data thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); border-bottom: 1px solid var(--border); white-space: nowrap; }
table.data tbody tr { border-top: 1px solid var(--border); }
table.data tbody tr:hover { background: var(--panel-2); }
/* Markierte Zeile (Auswahl-Checkbox aktiv) — Akzent-Tönung, gewinnt auch über :hover. */
table.data tbody tr.selected, table.data tbody tr.selected:hover { background: var(--accent-bg); }
table.data .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---- Meldungen (inline flash / bottom toast) ---- */
.flash { margin: 14px 0; padding: 10px 14px; border-radius: var(--radius-sm); font-size: 14px; }
.flash.ok  { background: var(--good-bg); color: var(--good); }
.flash.err { background: var(--bad-bg);  color: var(--bad); }
.flash.warn { background: var(--warn-bg); color: var(--warn); }
.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%);
  background: var(--text); color: var(--bg); padding: 11px 18px; border-radius: 9px;
  font-size: 14px; opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 100; max-width: 90vw;
}
.toast.show { opacity: .95; }
.toast.err { background: var(--bad); color: #fff; }

/* ---- Modal / Overlay ---- */
.overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: none; align-items: center; justify-content: center; padding: 20px; z-index: 50; }
.overlay.open { display: flex; }
.modal { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; padding: 22px; width: 100%; max-width: 460px; box-shadow: 0 10px 40px rgba(0,0,0,.3); }
.modal.wide { max-width: 620px; }
/* EINHEITLICHER MODAL-AUFBAU (fuer alle Dialoge gleich): Kopfzeile (Titel/Infos) /
   Rumpf (scrollt bei Bedarf) / Fusszeile (Funktionsbuttons, rechtsbuendig). Die Groesse
   darf je Dialog variieren (max-width / .sheet) — der Aufbau bleibt identisch.
   Greift automatisch, sobald ein .modal-body vorhanden ist; flache Dialoge ohne .modal-body
   behalten das einfache Padding (Abwaertskompatibilitaet). */
.modal:has(.modal-body) { padding: 0; display: flex; flex-direction: column; overflow: hidden; max-height: calc(100vh - 80px); }
.modal-header { padding: 18px 22px 0; }
.modal-header h2 { margin: 0; }
.modal-body { padding: 16px 22px; overflow-y: auto; min-height: 0; }
.modal-footer { padding: 12px 22px; border-top: 1px solid var(--border); }
.modal-actions, .modal-footer { display: flex; justify-content: flex-end; gap: 10px; }
.modal-actions { margin-top: 20px; }
/* Sheet-Groesse: nimmt die volle Fensterhoehe ein (~40px Rand oben/unten). Ohne .sheet passt
   sich die Hoehe dem Inhalt an (bis Fensterhoehe, dann scrollt der Rumpf). */
.modal.sheet { height: calc(100vh - 80px); max-width: 780px; }
.modal.sheet .modal-body { flex: 1; }
.modal.sheet .tabs { margin: 12px 0 0; }

/* ---- Leerzustand ---- */
.empty-state { text-align: center; color: var(--muted); padding: 48px 20px; }

/* ============================================================================
   APP-BLOCK — Klickdummy Ist-Navigation hupfer.com
   Alles oberhalb ist die unveraenderte Kopie der hausdesign.css.
   ----------------------------------------------------------------------------
   BEWUSSTE ABWEICHUNG vom Styleguide-Grundsatz "nur Tokens":
   Der simulierte Shop-Bereich muss die echten Hupfer-Farben zeigen, sonst
   testet man nicht die Ist-Navigation, sondern unser Hausdesign. Die
   Fremdmarken-Farben stehen deshalb als eigene, klar benannte --hup-*-Tokens
   in EINEM Block und werden nirgends sonst hart kodiert. Sie sind absichtlich
   theme-unabhaengig (wie eine Terminal-/Log-Ansicht, siehe Styleguide 1.).
   Die Werkzeug-Oberflaeche rundherum nutzt ausschliesslich die Haus-Tokens
   und funktioniert hell und dunkel.
   ============================================================================ */

:root {
  /* Aus Bjoerns Header-Screenshot (Wunsch_Navi.pptx, Slide 7) gemessen: #0094d8 */
  --hup-blue: #0094d8;
  --hup-blue-fg: #ffffff;
  --hup-navy: #021f32;
  --hup-page: #ffffff;
  --hup-page-fg: #021f32;
  --hup-line: #dfe4e8;
  --hup-tile: #eef2f5;
}

/* ---- Seitenlayout ---- */
.wrap { max-width: 1640px; margin: 0 auto; padding: 20px 24px 56px; }

/* ZWEISPALTIG: Klickauswertung | simulierter Shop. Alle drei Klickdummys sind
   so aufgebaut — was fruehere Fassungen rechts in eine dritte Spalte legten,
   steht heute unterhalb des Rahmens (Auswertung im Filter-Dummy) oder ist
   entfallen (Navigationspunkte im Ist-Dummy). Damit gehoert die Breite dem
   Shop, und die Auswertungskarten haben unten Platz fuer Tabellen und Balken.
   Platzierung ueber grid-template-areas, damit die Spalten auf schmalen
   Fenstern umbrechen koennen (dort zuerst der Shop), ohne die DOM-Reihenfolge
   zu aendern — auf breiten Fenstern entspricht sie der Leserichtung. */
.layout {
  display: grid; gap: 20px; align-items: start;
  grid-template-columns: 300px minmax(0, 1fr);
  grid-template-areas: "eval shop";
}
/* Eigene Flex-Spalte statt .stack: sonst wuerde die spaeter in der Datei
   definierte .stack-Regel das display:grid der Media-Query unten wieder kippen. */
.col-eval { grid-area: eval; display: flex; flex-direction: column; gap: 12px; }
.col-shop { grid-area: shop; }

/* Schmaler: gestapelt, Shop zuerst — die Auswertung darunter dann in die Breite. */
@media (max-width: 1340px) {
  .layout { grid-template-columns: minmax(0, 1fr); grid-template-areas: "shop" "eval"; }
  .col-eval { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
}
@media (max-width: 900px) {
  .col-eval { grid-template-columns: 1fr; }
}
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hint { color: var(--muted); font-size: 13px; margin: 0; }

/* ---- Geraeterahmen um den simulierten Shop ---- */
.device {
  background: var(--hup-page); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  margin: 0 auto; width: 100%; position: relative;
  transition: max-width .18s ease;
}
.device.is-mobile { max-width: 390px; }
.device-bar {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px;
  background: var(--panel-2); border-bottom: 1px solid var(--border);
  color: var(--muted); font-size: 12px;
}
.device-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border); flex-shrink: 0; }
/* Hoehe der Vorschau: folgt der Fensterhoehe wie ein echtes Browserfenster,
   statt ein festes Mass vorzugeben — 100vh abzueglich Kopfzeile, Werkzeugzeile
   und Geraeteleiste darueber (grob geschaetzt, siehe .modal.sheet oben fuer
   dasselbe Muster). Bleibt trotzdem vom Anwender ziehbar: Der Ziehgriff unten
   rechts kommt vom Browser; `resize` verlangt ein `overflow` ungleich
   `visible` — das ist hier ohnehin `hidden`, damit Flyouts am Rahmen
   abgeschnitten werden wie im echten Fenster. Untergrenze, damit sich die
   Vorschau nicht auf einen Streifen zusammenziehen laesst. */
.device-view {
  position: relative; height: calc(100vh - 230px); min-height: 320px;
  overflow: hidden; resize: vertical;
}

/* ---- Meta-Zeile ueber der Hauptnavigation (Zonentrennung, Befund B13) ----
   Eigene Flaeche in Navy statt im Blau der Hauptnavigation: die Trennung der
   beiden Zonen muss auf einen Blick erkennbar sein, sonst zeigt der Klickdummy
   die Massnahme nicht. Kleinere Schrift und gedeckte Farbe ordnen sie der
   Hauptnavigation unter — Sortiment bleibt die Hauptsache.
   Im Live-Shop ist diese Zeile vorhanden (Shopware `top-bar`) und traegt nur
   den Sprachwechsel; im Ist-Dummy steht deshalb eine Befund-Marke darin. */
.hup-meta {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--hup-navy); color: rgba(255, 255, 255, .72);
  padding: 6px 16px; min-height: 30px; font-size: 12px;
}
.hup-meta.is-hidden { display: none; }
.hup-meta-lab {
  text-transform: uppercase; letter-spacing: .6px; font-size: 10px; font-weight: 700;
  color: rgba(255, 255, 255, .45); flex-shrink: 0;
}
.hup-meta a {
  color: rgba(255, 255, 255, .82); text-decoration: none; cursor: pointer;
  white-space: nowrap; border-bottom: 1px solid transparent;
}
.hup-meta a:hover { color: #ffffff; border-bottom-color: rgba(255, 255, 255, .6); }
/* Sprachwechsel rechts abgesetzt — im Live-Shop der einzige Inhalt der Zeile. */
.hup-meta-lang { margin-left: auto; flex-shrink: 0; opacity: .7; }
/* Die Befund-Marke im Ist-Modus steht hinter dem Sprachwechsel und darf
   umbrechen, statt die Zeile zu sprengen. */
.hup-meta .flag { margin-left: 0; white-space: normal; }
.hup-meta code { font-size: 11px; }

/* ---- Simulierter Hupfer-Header ---- */
.hup-header {
  display: flex; align-items: center; gap: 18px;
  background: var(--hup-blue); color: var(--hup-blue-fg);
  padding: 12px 16px; min-height: 62px;
}
.hup-burger {
  background: none; border: none; color: var(--hup-blue-fg);
  min-height: 32px; padding: 0 4px; flex-shrink: 0;
}
.hup-burger:hover { border-color: transparent; opacity: .8; }
.hup-logo { font-weight: 800; font-size: 22px; letter-spacing: .5px; flex-shrink: 0; }
.hup-nav { display: flex; gap: 22px; flex-wrap: wrap; }
.hup-nav.is-hidden { display: none; }
.hup-nav a {
  color: var(--hup-blue-fg); text-decoration: none; font-weight: 700; font-size: 14px;
  padding: 3px 0; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap;
}
.hup-nav a:hover { border-bottom-color: var(--hup-blue-fg); }
.hup-actions { margin-left: auto; display: flex; gap: 12px; color: var(--hup-blue-fg); }

/* ---- Simulierte Seite ---- */
.hup-body { padding: 16px; color: var(--hup-page-fg); background: var(--hup-page); height: calc(100% - 62px); overflow-y: auto; }
.hup-crumb { font-size: 12px; color: #5a6b78; margin-bottom: 12px; }
.hup-crumb span { white-space: nowrap; }
/* Anklickbare Stufe der Pfadleiste. Muss die Button-Grundregel zuruecksetzen
   (Rahmen, Flaeche, 36px Mindesthoehe) — im simulierten Shop soll das wie ein
   Textlink aussehen, nicht wie ein Knopf unseres Werkzeugs. Farben bewusst aus
   den --hup-*-Tokens, damit der Shop-Bereich themenunabhaengig bleibt. */
.hup-crumb-a {
  border: none; background: none; padding: 0; min-height: 0; border-radius: 0;
  font: inherit; color: inherit; white-space: nowrap;
  cursor: pointer; text-decoration: underline;
}
.hup-crumb-a:hover { color: var(--hup-blue); border-color: transparent; }
.hup-h1 { font-size: 20px; font-weight: 700; margin: 0 0 4px; color: var(--hup-navy); }
.hup-sub { font-size: 13px; color: #5a6b78; margin: 0 0 16px; }
.hup-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.hup-tile {
  border: 1px solid var(--hup-line); border-radius: 8px; overflow: hidden;
  background: var(--hup-page); cursor: pointer; text-align: left; padding: 0;
  display: flex; flex-direction: column; min-height: 0; color: var(--hup-page-fg);
}
.hup-tile:hover { border-color: var(--hup-blue); }
.hup-tile-img { height: 74px; background: var(--hup-tile); flex-shrink: 0; }
.hup-tile-cap { padding: 9px 10px; font-size: 13px; font-weight: 600; line-height: 1.3; }
.hup-tile-btn { margin: 0 10px 10px; font-size: 12px; color: var(--hup-blue); font-weight: 700; }
.hup-note {
  margin-top: 14px; padding: 10px 12px; border-radius: 8px; font-size: 13px;
  background: var(--hup-tile); color: #3d4d59; border: 1px solid var(--hup-line);
}
/* Fliesstext einer Inhaltsseite (Unternehmen und Service). Dort gibt es keine
   Produkte, also auch keine Kacheln — nur Text. Eigene hup-Klasse statt der
   gleich aussehenden .fd-art aus dem Filter-Dummy: die Praefixe halten die
   Klickdummys auseinander, und diese Seiten gibt es in allen drei. */
.hup-text { max-width: 76ch; }
.hup-text p {
  font-size: 12.5px; line-height: 1.6; margin: 0 0 9px; color: var(--hup-page-fg);
}
.hup-product-detail { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; }
.hup-product-detail-img {
  width: 200px; height: 200px; flex-shrink: 0; border-radius: 8px;
  background: var(--hup-tile); border: 1px solid var(--hup-line);
}
.hup-back-btn {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  background: none; border: 1px solid var(--hup-line); color: var(--hup-blue);
  font-weight: 700; font-size: 13px; padding: 0 12px; min-height: 32px; border-radius: 6px; cursor: pointer;
}
.hup-back-btn:hover { border-color: var(--hup-blue); }

/* ---- Offcanvas-Menue (Shopware-Verhalten) ---- */
.hup-oc {
  position: absolute; inset: 0 auto 0 0; width: min(330px, 86%);
  background: var(--hup-blue); color: var(--hup-blue-fg);
  transform: translateX(-102%); transition: transform .2s ease;
  display: flex; flex-direction: column; z-index: 6;
}
.hup-oc.open { transform: translateX(0); }
.hup-oc-top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,.28);
}
.hup-oc-close { background: none; border: none; color: var(--hup-blue-fg); min-height: 30px; padding: 0 4px; }
.hup-oc-close:hover { border-color: transparent; opacity: .8; }
.hup-oc-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.hup-oc-item {
  display: flex; align-items: center; gap: 10px; width: 100%; position: relative;
  background: none; border: none; border-bottom: 1px solid rgba(255,255,255,.22);
  color: var(--hup-blue-fg); text-align: left; padding: 11px 14px; min-height: 44px;
  justify-content: flex-start; border-radius: 0; font-size: 14px;
}
.hup-oc-item:hover { background: rgba(0,0,0,.12); border-color: rgba(255,255,255,.22); }
.hup-oc-item .ic { margin-left: auto; }
.hup-oc-item.is-back { font-weight: 700; background: rgba(0,0,0,.16); }
.hup-oc-item.is-current { font-style: italic; opacity: .92; }

/* ---- Gruppentitel im Menue (nur in den beiden Vorschlaegen) ----
   „PRODUKTE UND PRODUKTBEREICHE" und „UNTERNEHMEN UND SERVICE". Bewusst eine
   UEBERSCHRIFT und keine Menueebene: sie kostet keinen zusaetzlichen Klick,
   die Punkte darunter bleiben dieselben und stehen genauso in der Navigation
   der Seite. Sie ersetzt den frueheren Panel-Titel „Kategorien" — der war
   erfunden (im Live-Shop kommt das Wort nicht vor) und sachlich falsch, weil in
   derselben Liste News, Karriere und Ansprechpartner stehen.

   Der Ist-Dummy hat die Titel nicht — dass dort elf Punkte ungegliedert in
   einer Liste stehen, ist der Befund (B10) und wird nicht nachtraeglich
   geschoent. Auf dem Telefon sind diese Titel ausserdem der Ersatz fuer die
   Meta-Zeile, die dort ausgeblendet ist: ohne sie waere die Zonentrennung
   mobil nicht vorhanden.

   KEIN eigener Rahmen oben: der Menuepunkt darueber traegt schon eine
   `border-bottom`. Ein zusaetzliches `border-top` am Titel ergab zwei Linien
   mit einem Spalt dazwischen — die Trennung leisten hier der Abstand und die
   Grossschreibung, nicht ein zweiter Strich.

   Farben als rgba auf dem Menuegrund — das Offcanvas ist in beiden Themes
   dunkelblau (--hup-blue), deshalb ist Weiss mit Deckkraft hier richtig und
   kein loser Hex-Wert im Sinne des Styleguides. */
.hup-oc-grp {
  display: flex; align-items: center; gap: 8px;
  padding: 15px 14px 5px; font-size: 11px; font-weight: 800;
  letter-spacing: .9px; text-transform: uppercase;
  color: rgba(255,255,255,.66);
}
/* Luft nur zwischen den Gruppen, nicht ueber dem ersten Titel — der steht
   direkt unter der Kopfzeile des Menues. */
.hup-oc-grp:not(:first-child) { margin-top: 6px; }
.hup-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.4); z-index: 5; display: none; }
.hup-scrim.open { display: block; }

/* ---- Befund-Markierungen (unsere Ebene, nicht Teil des Shops) ---- */
.flag {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 6px;
  font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: var(--radius-pill);
  background: #ffffff; color: #b0342a; flex-shrink: 0;
}
.flag.warn { color: #8a6d00; }
.flag.info { color: #1f5c8b; }
.flags-off .flag { display: none; }

/* ============================================================================
   VORSCHLAGSMODUS — Navigationssuche und Header-Flyout
   Nur sichtbar, wenn am .device die Klasse .is-soll haengt.
   ============================================================================ */
.device:not(.is-soll) .soll-only { display: none !important; }
.device.is-soll .ist-only { display: none !important; }

/* Suchfeld im simulierten Header */
.hup-search-wrap { position: relative; margin-left: auto; width: min(330px, 44%); flex-shrink: 0; }
.hup-search {
  width: 100%; border: none; border-radius: var(--radius-pill);
  padding: 7px 13px; font-size: 13px; background: #ffffff; color: var(--hup-navy);
}
.hup-search::placeholder { color: #7b8a96; }
.hup-results {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px);
  background: var(--hup-page); color: var(--hup-page-fg);
  border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.3);
  max-height: 330px; overflow-y: auto; z-index: 8; display: none; text-align: left;
}
.hup-results.open { display: block; }
.hup-res-group {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: #5a6b78; padding: 9px 12px 3px; font-weight: 700;
}
.hup-res-item {
  display: block; width: 100%; border: none; background: none; text-align: left;
  padding: 6px 12px; border-radius: 0; min-height: 0; color: var(--hup-page-fg);
}
.hup-res-item:hover, .hup-res-item.sel { background: var(--hup-tile); border-color: transparent; }
.hup-res-name { font-weight: 600; font-size: 13px; display: block; }
.hup-res-path { font-size: 11px; color: #5a6b78; display: block; }
.hup-res-why { font-size: 11px; color: var(--hup-blue); display: block; }
.hup-res-empty { padding: 14px 12px; font-size: 13px; color: #5a6b78; }

/* --- Trefferliste mit zwei Ergebnisgruppen (nur Vorschlags-Dummy) ---
   Massnahme 1.3 verspricht EIN Suchfeld mit zwei Gruppen. Damit das auch
   stimmt, muessen beide Gruppen SICHTBAR sein, ohne dass man scrollt — sonst
   sieht der Nutzer nur die Kategorien und haelt das fuer das ganze Ergebnis.
   Zwei Mittel zusammen:
   1. Eine Gruppenleiste ganz oben, die beim Blaettern stehen bleibt. Sie nennt
      jede Gruppe mit ihrer Trefferzahl — die Uebersicht ist damit unabhaengig
      von der Listenlaenge garantiert.
   2. Je Gruppe nur die ersten Treffer plus einen Weiterlink. Kein langer Block
      schiebt die zweite Gruppe mehr aus dem Bild.
   Dazu zwei statt drei Zeilen je Treffer, beide einzeilig abgeschnitten. */
/* ACHTUNG: An dieser Hoehe haengt die Konstante SICHTBAR im Klickdummy. Dort
   ist ausgerechnet, wie viele Treffer je Gruppe hineinpassen, ohne dass die
   zweite Gruppe aus dem Bild rutscht (2 + 2 = 362px). Wer hier aendert, zieht
   die Rechnung dort nach. */
.hup-results.is-zweigruppig { max-height: 380px; }

.hup-res-tabs {
  position: sticky; top: 0; z-index: 2;
  display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 10px;
  background: var(--hup-page); border-bottom: 1px solid var(--hup-line);
}
.hup-res-tabs button {
  border: 1px solid var(--hup-line); background: none; color: #3d4d59;
  border-radius: var(--radius-pill); font-size: 11.5px; padding: 3px 9px;
  min-height: 0; cursor: pointer; white-space: nowrap;
}
.hup-res-tabs button:hover { border-color: var(--hup-blue); color: var(--hup-blue); }
.hup-res-tabs button.on {
  background: var(--hup-blue); border-color: var(--hup-blue);
  color: var(--hup-blue-fg); font-weight: 700;
}
.hup-res-tabs button.leer { opacity: .45; cursor: default; }
.hup-res-tabs button.leer:hover { border-color: var(--hup-line); color: #3d4d59; }
.hup-res-tabs button .n { margin-left: 5px; font-variant-numeric: tabular-nums; opacity: .8; }

/* Zwei Zeilen statt drei: Titel mit Kennzahl rechts, darunter Herkunft und
   Fundstelle in EINER abgeschnittenen Zeile. Ein langer Kategoriepfad darf die
   Liste nicht in die Hoehe treiben. */
.is-zweigruppig .hup-res-item { padding: 7px 12px; }
.is-zweigruppig .hup-res-name {
  display: flex; align-items: baseline; gap: 10px;
  white-space: nowrap; overflow: hidden;
}
.is-zweigruppig .hup-res-name span:first-child {
  overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.is-zweigruppig .hup-res-menge {
  margin-left: auto; flex-shrink: 0; font-weight: 400; font-size: 11px; color: #5a6b78;
  font-variant-numeric: tabular-nums;
}
.is-zweigruppig .hup-res-path,
.is-zweigruppig .hup-res-why {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.is-zweigruppig .hup-res-group { padding-top: 7px; }

/* Weiterlink am Fuss einer gekappten Gruppe */
.hup-res-mehr {
  display: block; width: 100%; text-align: left; border: none; background: none;
  padding: 4px 12px 9px; min-height: 0; cursor: pointer;
  font-size: 11.5px; font-weight: 600; color: var(--hup-blue);
}
.hup-res-mehr:hover { text-decoration: underline; border-color: transparent; }

/* Header-Flyout (zwei Ebenen, Textspalten wie in der armedangels-Referenz) */
.hup-flyout {
  position: absolute; left: 0; right: 0; top: 62px;
  background: var(--hup-page); color: var(--hup-page-fg);
  box-shadow: 0 12px 30px rgba(0,0,0,.26); padding: 16px 18px;
  display: none; z-index: 7; max-height: 330px; overflow-y: auto;
}
.hup-flyout.open { display: block; }
.hup-fly-cols { columns: 3; column-gap: 22px; }
@media (max-width: 700px) { .hup-fly-cols { columns: 1; } }
.hup-fly-grp { break-inside: avoid; margin: 0 0 13px; }
.hup-fly-h {
  font-weight: 700; font-size: 13px; margin-bottom: 3px; cursor: pointer;
  color: var(--hup-navy); background: none; border: none; padding: 0; min-height: 0; text-align: left;
}
.hup-fly-h:hover { color: var(--hup-blue); border-color: transparent; }
.hup-fly-l {
  display: block; font-size: 12.5px; color: #3d4d59; padding: 1px 0; cursor: pointer;
  background: none; border: none; text-align: left; min-height: 0; width: 100%;
}
.hup-fly-l:hover { color: var(--hup-blue); border-color: transparent; }

/* ---- Auswertungspanel ---- */
.metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.metric { background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; }
.metric .k { font-size: 12px; color: var(--muted); }
.metric .v { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.metric .v.good { color: var(--good); }
.metric .v.warn { color: var(--warn); }
.metric .v.bad { color: var(--bad); }
.path { font-size: 13px; line-height: 1.6; word-break: break-word; }
.path .sep { color: var(--muted); }
.log { list-style: none; margin: 0; padding: 0; max-height: 230px; overflow-y: auto; font-size: 13px; }
.log li { padding: 6px 0; border-top: 1px solid var(--border); display: flex; gap: 8px; }
.log li:first-child { border-top: none; }
.log .n { color: var(--muted); font-variant-numeric: tabular-nums; flex-shrink: 0; min-width: 18px; }
.task { background: var(--accent-bg); border: 1px solid var(--accent); border-radius: var(--radius-sm); padding: 11px 13px; }
.task .q { font-weight: 650; margin: 0 0 4px; }
.task .a { font-size: 13px; color: var(--muted); margin: 0; }
.result { margin-top: 10px; }

/* ============================================================================
   Seite "Fehlerhafte Links" (link-auswertung-aktuell.html) — app-spezifisches Layout.
   Nur Tokens verwenden, damit der Dark-Mode traegt.
   ============================================================================ */
.lb-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 10px; }

.lb-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lb-filters .field { min-width: 260px; flex: 1 1 260px; }

.lb-kind {
  border: 1px solid var(--border); background: var(--panel); border-radius: var(--radius-pill);
  padding: 3px 10px 3px 4px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; min-height: 0;
}
.lb-kind:hover { background: var(--panel-2); }
.lb-kind.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.lb-kind-n { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* URLs duerfen umbrechen, sonst schiebt eine lange Adresse die Tabelle auf */
.lb-url { font-size: 12.5px; word-break: break-all; color: var(--text); }

.lb-row { cursor: pointer; }
.lb-detrow > td { background: var(--panel-2); padding: 0 12px 14px; }
.lb-detail { font-size: 13px; }
.lb-det-h { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin: 12px 0 6px; }
.lb-chain { margin: 0; padding-left: 20px; }
.lb-chain li { padding: 3px 0; }
.lb-src { list-style: none; margin: 0; padding: 0; }
.lb-src li { padding: 3px 0; border-top: 1px solid var(--border); }
.lb-src li:first-child { border-top: none; }

.lb-legend { display: grid; gap: 8px; }
.lb-leg { display: flex; align-items: baseline; gap: 10px; font-size: 13px; }
.lb-leg .badge { flex-shrink: 0; min-width: 168px; text-align: center; }

@media (max-width: 720px) {
  .lb-leg { flex-direction: column; gap: 4px; }
  .lb-leg .badge { min-width: 0; }
}

/* Anklickbare URLs in der Linkliste: oeffnen im neuen Tab, daher mit Pfeil markiert. */
a.lb-ext { color: var(--accent-text); text-decoration: none; border-bottom: 1px solid transparent; }
a.lb-ext:hover, a.lb-ext:focus-visible { border-bottom-color: currentColor; }
a.lb-ext::after { content: " \2197"; font-size: .9em; opacity: .6; }

/* Spalte "Quelle & Ziel": oben die Fundstelle plus, wo erhoben, ein kleiner Screenshot des
   Links/Buttons, darunter — abgesetzt durch eine Trennlinie — das Linkziel. Beide Zeilen mit
   vorangestelltem Label, damit auch ohne die Spaltenueberschrift klar ist, was was ist. */
.lb-qz-zeile { display: flex; align-items: flex-start; gap: 8px; }
.lb-qz-zeile.lb-qz-ziel { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border); }
.lb-qz-label {
  flex: 0 0 44px; font-size: 11px; text-transform: uppercase; letter-spacing: .03em;
  color: var(--muted); padding-top: 2px;
}
.lb-qz-zeile > a { flex: 1 1 auto; min-width: 0; }
a.lb-quelle {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--accent-text);
  text-decoration: none; border-bottom: 1px solid transparent; max-width: 100%;
}
a.lb-quelle:hover, a.lb-quelle:focus-visible { border-bottom-color: currentColor; }
/* Breite gedeckelt, sonst drueckt ein sehr breiter Button-Screenshot (z. B. eine
   ganze Textzeile) den Pfad daneben auf Zeichenbreite zusammen. */
.lb-quelle-shot {
  height: 22px; max-width: 90px; width: auto; object-fit: contain;
  border: 1px solid var(--border); border-radius: 4px; background: #fff; flex-shrink: 0;
}
.lb-quelle-pfad { font-size: 12.5px; word-break: break-word; min-width: 60px; }
.lb-quelle-shot-gross {
  display: block; max-width: 320px; height: auto; border: 1px solid var(--border);
  border-radius: var(--radius-sm); background: #fff; margin-bottom: 8px;
}

/* ============================================================================
   ARBEITSSEITE „Björns Punkte" (punkte.html) — Klassen .pk-*
   ----------------------------------------------------------------------------
   Aufbau: links die Übersichtstabelle aller 39 Punkte (sortier- und
   filterbar), rechts der Editor zum ausgewaehlten Punkt. Bewusst
   Meister-Detail statt Textfelder in Tabellenzellen — 39 Zeilen mit
   eingebetteten Eingabefeldern waeren nicht mehr uebersichtlich.
   ============================================================================ */

.pk-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .pk-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pk-metric { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px; }
.pk-metric .k { font-size: 12px; color: var(--muted); }
.pk-metric .v { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pk-metric .v.good { color: var(--good); }
.pk-metric .v.warn { color: var(--warn); }
.pk-metric .v.bad { color: var(--bad); }
.pk-metric .v.done { color: var(--done); }

/* Meister-Detail-Layout */
.pk-layout { display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 20px; align-items: start; margin-top: 18px; }
@media (max-width: 1200px) { .pk-layout { grid-template-columns: minmax(0, 1fr); } }

.pk-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }

/* Übersichtstabelle */
table.pk-table { width: 100%; border-collapse: collapse; font-size: 14px; }
table.pk-table th, table.pk-table td { text-align: left; padding: 7px 10px; vertical-align: top; }
table.pk-table thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); border-bottom: 1px solid var(--border); white-space: nowrap; cursor: pointer; user-select: none; }
table.pk-table tbody tr { border-top: 1px solid var(--border); cursor: pointer; }
table.pk-table tbody tr:hover { background: var(--panel-2); }
table.pk-table tbody tr.sel, table.pk-table tbody tr.sel:hover { background: var(--accent-bg); }
.pk-id { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pk-punkt { max-width: 520px; }
.pk-blocktag { display: inline-block; min-width: 18px; text-align: center; font-weight: 700; color: var(--muted); }
.pk-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--border); flex-shrink: 0; }
.pk-dot.filled { background: var(--good); }

/* Zwischenzeile je Block */
tr.pk-group td { background: var(--panel-2); font-weight: 700; font-size: 13px; color: var(--muted); padding: 8px 10px; }

/* Detailspalte */
.pk-detail { position: sticky; top: 78px; display: flex; flex-direction: column; gap: 12px; max-height: calc(100vh - 104px); overflow-y: auto; }
.pk-detail h2 { margin: 0; }
.pk-quote { background: var(--panel-2); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); padding: 11px 13px; font-size: 14px; }
.pk-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pk-befund { font-size: 13px; color: var(--muted); }
.pk-label { font-size: 12px; color: var(--muted); margin: 0 0 4px; }
.pk-detail textarea { min-height: 210px; resize: vertical; font-size: 14px; line-height: 1.5; }
.pk-nav { display: flex; gap: 8px; align-items: center; }
.pk-saved { font-size: 12px; color: var(--good); }

/* Vorgehen / Fragen / Spannungen */
.pk-step { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); }
.pk-step:first-child { border-top: none; }
.pk-step-nr { flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-bg); color: var(--accent-text); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.pk-step-h { font-weight: 650; margin: 0 0 3px; }
.pk-step-t { font-size: 13px; color: var(--muted); margin: 0; }
.pk-frage { display: flex; gap: 10px; padding: 11px 0; border-top: 1px solid var(--border); align-items: flex-start; }
.pk-frage:first-child { border-top: none; }
.pk-frage-body { flex: 1; min-width: 0; }
.pk-frage-b { font-size: 12px; color: var(--muted); }
.pk-checks { display: flex; gap: 14px; flex-shrink: 0; padding-top: 2px; }
.pk-check { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); cursor: pointer; white-space: nowrap; }
.pk-check input { width: 15px; height: 15px; }

/* ---- Herkunftsnachweis je Link (aufgeklappte Zeile) ---- */
.lb-src > li { padding: 10px 0; }
.lb-herk-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.lb-herk-z { display: flex; gap: 8px; align-items: baseline; padding: 2px 0; flex-wrap: wrap; }
.lb-herk-k {
  flex: 0 0 128px; font-size: 11px; text-transform: uppercase; letter-spacing: .03em;
  color: var(--muted); padding-top: 2px;
}
.lb-beleg { border-left: 2px solid var(--accent); padding: 6px 0 6px 12px; margin-bottom: 10px; }

.lb-pre {
  display: inline-block; background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 6px 9px; font-size: 12px; line-height: 1.5;
  white-space: pre-wrap; word-break: break-all; max-width: 100%;
}
.lb-tag { color: var(--muted); }

.lb-steps { margin: 0; padding-left: 20px; }
.lb-steps li { padding: 5px 0; }
.lb-steps kbd {
  font-size: 11px; border: 1px solid var(--border); border-bottom-width: 2px;
  border-radius: 4px; padding: 0 4px; background: var(--panel);
}
.lb-copy {
  border: 1px solid var(--border); background: var(--panel); border-radius: var(--radius-sm);
  padding: 3px 9px; font-size: 12px; color: var(--muted); cursor: pointer; min-height: 0;
  vertical-align: top; margin-top: 2px;
}
.lb-copy:hover { background: var(--panel-2); color: var(--text); }
.lb-copy.ok { border-color: var(--good); color: var(--good); }

@media (max-width: 720px) {
  .lb-herk-k { flex-basis: 100%; }
}

/* ==========================================================================
   Filter-Klickdummy (klickdummy-navigation-vorschlag.html) — Praefix .fd-
   Bereinigte Navigation: Warengruppe = gespeicherte Filtersicht,
   Produkte werden ueber Eigenschaften eingegrenzt statt ueber Kategoriezweige.
   ========================================================================== */

/* --- Meta-Zeile ueber dem Shop-Header: Unternehmen und Service ---
   Sie traegt zwei Dinge: die Querschnittsdienste ("Fuer wen") und die
   Unternehmensthemen. Beides gehoert NICHT ins Sortiment, und genau das soll
   man sehen — deshalb liegt sie seit Massnahme 4 im Navy des Shops und nicht
   mehr in der Flaeche des Werkzeugs (`--panel-2`). Vorher las sie sich wie
   unsere Bedienleiste; jetzt ist sie erkennbar Teil der nachgebauten Seite,
   und die Zonentrennung ist das, was der Dummy zeigt.
   Im Live-Shop existiert diese Zeile bereits (Shopware `top-bar`) und traegt
   nur den Sprachwechsel — Befund B13. Dieselbe Gestaltung wie `.hup-meta` in
   den beiden anderen Klickdummys, damit die drei Seiten dasselbe zeigen. */
.fd-meta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 6px 14px; min-height: 30px;
  background: var(--hup-navy); font-size: 11px; color: rgba(255, 255, 255, .72);
}
.fd-meta button,
.fd-meta a {
  border: 0; background: none; color: rgba(255, 255, 255, .82); font-size: 11px;
  padding: 0; min-height: 0; cursor: pointer; text-decoration: none;
  border-bottom: 1px solid transparent; white-space: nowrap;
}
.fd-meta button:hover,
.fd-meta a:hover { color: #ffffff; border-bottom-color: rgba(255, 255, 255, .6); }
/* Zonenbeschriftung: ordnet die Zeile der Hauptnavigation unter — Sortiment
   bleibt die Hauptsache, hier steht das Umfeld. */
.fd-meta-lab {
  text-transform: uppercase; letter-spacing: .6px; font-size: 10px; font-weight: 700;
  color: rgba(255, 255, 255, .45); flex-shrink: 0;
}
/* Trennstrich zwischen den beiden Haelften der Zeile (Dienste | Unternehmen). */
.fd-meta-sep { color: rgba(255, 255, 255, .28); flex-shrink: 0; }

/* --- Pfadnavigation: dauerhaft sichtbar, jede Stufe anklickbar ---
   Vorschlag aus Massnahme 5.3. Zwei Punkte werden hier vorgefuehrt:
   1. Der Pfad liegt AUSSERHALB von .hup-body, steht also auf jeder Seite —
      auch auf der Startseite und im Mobil-Rahmen — und scrollt nicht weg.
   2. Er traegt den Rueckweg: eine Stufe anklicken springt dorthin zurueck,
      eine Filterstufe anklicken nimmt genau diesen Filter weg. Deshalb gibt
      es keinen eigenen Zurueck-Knopf.
   Nur der Vorschlags-Dummy nutzt das; der Ist-Dummy behaelt .hup-crumb. */
.fd-path {
  display: flex; align-items: center; flex-wrap: wrap; gap: 1px;
  padding: 6px 12px; flex-shrink: 0;
  background: var(--hup-tile); border-bottom: 1px solid var(--hup-line);
  font-size: 11.5px; color: #3d4d59;
}
.fd-path-step {
  background: none; border: 1px solid transparent; border-radius: 5px;
  color: #3d4d59; font-size: 11.5px; padding: 2px 5px; min-height: 0;
  cursor: pointer; max-width: 22ch; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.fd-path-step:hover { color: var(--hup-blue); border-color: var(--hup-blue); background: var(--hup-page); }
.fd-path-step.is-current { font-weight: 700; color: var(--hup-navy); cursor: default; }
.fd-path-step.is-current:hover { border-color: transparent; background: none; color: var(--hup-navy); }
.fd-path-step.is-filter { color: var(--hup-navy); background: var(--hup-page); border-color: var(--hup-line); }
.fd-path-step.is-filter:hover { border-color: var(--hup-blue); color: var(--hup-blue); }
.fd-path-step.is-filter .fd-path-x { font-weight: 700; margin-left: 4px; }
.fd-path-sep { color: #8b9aa5; padding: 0 1px; flex-shrink: 0; }

/* Derselbe Gedanke im Offcanvas: statt eines Zurueck-Knopfs steht der Pfad der
   Menueebenen oben und jede Stufe ist anklickbar. Auf dem Handy ist das der
   sichtbarste Teil der Massnahme, weil dort der Browser-Zurueck sonst das
   ganze Menue schliesst. */
.fd-oc-path {
  display: flex; align-items: center; flex-wrap: wrap; gap: 1px;
  padding: 8px 12px; background: rgba(0,0,0,.16);
  border-bottom: 1px solid rgba(255,255,255,.22); font-size: 11.5px;
}
/* Auf der obersten Menueebene gibt es keinen Rueckweg, deshalb keinen Pfad —
   ocPathHtml() liefert dort einen leeren String. Ohne diese Regel bliebe die
   Flaeche samt Rahmen als leere Zeile stehen. */
.fd-oc-path:empty { display: none; }
.fd-oc-path button {
  background: none; border: 1px solid transparent; border-radius: 5px;
  color: var(--hup-blue-fg); font-size: 11.5px; padding: 3px 6px;
  min-height: 0; cursor: pointer; opacity: .85;
}
.fd-oc-path button:hover { opacity: 1; border-color: rgba(255,255,255,.5); background: rgba(0,0,0,.18); }
.fd-oc-path button.is-current { font-weight: 700; opacity: 1; cursor: default; }
.fd-oc-path button.is-current:hover { border-color: transparent; background: none; }
.fd-oc-path .fd-path-sep { color: rgba(255,255,255,.6); }

/* Der Pfad braucht eigene Hoehe im Geraeterahmen: statt der festen
   Hoehenrechnung von .hup-body wird die Ansicht zur Flex-Spalte. Nur fuer
   Rahmen mit .has-path, damit der Ist-Dummy unveraendert bleibt. */
.device.has-path .device-view { display: flex; flex-direction: column; }
.device.has-path .hup-body { height: auto; flex: 1; min-height: 0; }
.device.has-path .hup-header,
.device.has-path .hup-meta { flex-shrink: 0; }

/* --- Zweispaltige Listenseite: Filterleiste + Ergebnisse --- */
.fd-listing { display: grid; grid-template-columns: 216px 1fr; gap: 0; align-items: start; }
.fd-side {
  border-right: 1px solid var(--border); padding: 12px 12px 16px;
  position: sticky; top: 0; max-height: 560px; overflow: auto;
}
.fd-main { padding: 12px 14px 16px; min-width: 0; }

/* --- Filtergruppe --- */
.fd-grp { margin-bottom: 14px; }
.fd-grp-h {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); margin: 0 0 5px;
}
.fd-val {
  display: flex; align-items: center; gap: 7px; width: 100%; text-align: left;
  border: 0; background: none; padding: 3px 4px; border-radius: var(--radius-sm);
  font-size: 12px; color: var(--text); cursor: pointer; min-height: 0; line-height: 1.35;
}
.fd-val:hover { background: var(--chip); }
.fd-val .fd-box {
  flex: 0 0 13px; width: 13px; height: 13px; border: 1px solid var(--border);
  border-radius: 3px; background: var(--panel); position: relative;
}
.fd-val.on .fd-box { border-color: var(--accent); background: var(--accent); }
.fd-val.on .fd-box::after {
  content: ''; position: absolute; left: 3px; top: 0; width: 5px; height: 8px;
  border: solid var(--accent-fg); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.fd-val.on { font-weight: 600; }
.fd-val .fd-n { margin-left: auto; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.fd-val.zero { opacity: .4; cursor: default; }
.fd-val.zero:hover { background: none; }

/* --- Aktive Filter als Chips --- */
.fd-active { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.fd-fchip {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 6px 2px 8px;
  border: 1px solid var(--accent); background: var(--accent-bg); color: var(--text);
  border-radius: var(--radius-pill); font-size: 11px; min-height: 0;
}
.fd-fchip b { font-weight: 600; }
.fd-fchip span.x { color: var(--accent-text); font-weight: 700; cursor: pointer; padding: 0 2px; }

/* --- Kopfzeile der Ergebnisliste --- */
.fd-res-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.fd-res-h h3 { margin: 0; font-size: 15px; }
.fd-res-n { color: var(--muted); font-size: 12px; }
/* --- Produktliste --- */
.fd-list { list-style: none; margin: 0; padding: 0; }
/* Zeile mit Bildplatzhalter links: Flex, damit der Text neben dem Quadrat
   umbricht und nicht darunter rutscht. min-width:0 an der Textspalte, sonst
   sprengen lange Produktnamen die Zeile (Flex-Grundbreite ist der Inhalt). */
.fd-item { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--border); }
.fd-item:first-child { border-top: 0; }
.fd-item-txt { flex: 1; min-width: 0; }
/* Der Inhaltsblock zwischen den Treffern ist keine Produktzeile: kein Bild, und
   er nimmt die ganze Breite. */
.fd-item.fd-item-block { display: block; }

/* Bildplatzhalter im Shop-Bereich: leerer Rahmen mit Symbol, KEIN echtes Bild —
   der Dummy laeuft ohne Netz und liefert kein fremdes Bildmaterial mit. Farben
   aus den --hup-*-Tokens, damit der Shop themenunabhaengig bleibt. */
.fd-bild {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 44px; height: 44px; border-radius: 4px;
  background: var(--hup-tile); color: #9aa8b3;
}
.fd-bild .ic { width: 18px; height: 18px; }

/* Bildstrecke der Produktseite: eine grosse Flaeche, zwei kleinere daneben. */
.fd-bilder { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 8px; margin: 12px 0 6px; }
.fd-bild-gross { width: auto; height: auto; aspect-ratio: 4 / 3; border-radius: 6px; }
.fd-bild-gross .ic { width: 26px; height: 26px; }
.fd-bild-gross.ist-haupt .ic { width: 34px; height: 34px; }
.fd-bild-note { margin: 0 0 12px; font-size: 11px; color: #7b8894; }
/* Im Mobil-Rahmen sind 2fr/1fr/1fr zu schmal — dort drei gleiche Flaechen. */
.device.is-mobile .fd-bilder { grid-template-columns: repeat(3, 1fr); }
.fd-name { font-size: 12.5px; font-weight: 600; line-height: 1.4; word-break: break-word; }
.fd-var {
  display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: var(--radius-pill);
  background: var(--warn-bg); color: var(--warn); font-size: 10px; font-weight: 600;
  vertical-align: 1px; white-space: nowrap;
}
.fd-attrs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.fd-attr {
  font-size: 10.5px; padding: 1px 6px; border-radius: var(--radius-pill);
  background: var(--chip); color: var(--chip-text); white-space: nowrap;
}
.fd-attr b { font-weight: 600; color: var(--text); }
.fd-attr.none { background: var(--bad-bg); color: var(--bad); }
.fd-why { font-size: 10.5px; color: var(--muted); margin-top: 3px; font-style: italic; }
/* Eintraege mit erhobener Produktseite sind anklickbar. Ohne Rueckmeldung merkt
   das niemand — und ohne Fokusrahmen ist es nur mit der Maus bedienbar. */
.fd-item[data-po] { border-radius: var(--radius-sm); padding-left: 6px; margin-left: -6px; }
.fd-item[data-po]:hover { background: var(--panel-2); }
.fd-item[data-po]:hover .fd-name { color: var(--accent-text); }
.fd-item[data-po]:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.fd-more { font-size: 11.5px; color: var(--muted); padding: 10px 0 0; border-top: 1px solid var(--border); }

/* --- Abdeckungsbalken --- */
/* Hier standen die Regeln des Tabs „Zahlen und Belege" des Filter-Dummys:
   .fd-tabs (Tableiste), .fd-unten (Raster der Auswertungskarten), .fd-cover /
   .fd-bar / .fd-leg (Balken der Attribut-Abdeckung) und .fd-cmp
   (Gegenueberstellung Ist gegen Vorschlag). Der Tab ist am 07.08.2026
   entfallen; die Regeln waren danach von keiner Seite mehr benutzt und sind
   deshalb ebenfalls weg — ungenutztes CSS im geteilten Stylesheet wird sonst
   irgendwann mitgepflegt oder falsch wiederverwendet. */

/* --- Startseite: Achsen als Einstiegskacheln --- */
.fd-axes { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.fd-axis {
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel);
  padding: 11px 12px; cursor: pointer; text-align: left; min-height: 0; display: block;
}
.fd-axis:hover { border-color: var(--accent); background: var(--panel-2); }
.fd-axis b { display: block; font-size: 13px; margin-bottom: 3px; }
.fd-axis span { font-size: 11px; color: var(--muted); line-height: 1.45; display: block; }

/* --- Redaktioneller Inhalt und seine Deeplinks ins Sortiment (Massnahme 4) ---
   Zwei Dinge werden damit vorgefuehrt:
   1. Von einer erzaehlenden Seite fuehren Deeplinks direkt in vorgefilterte
      Produktuebersichten und auf einzelne Produkte. Der Text ist Einstieg,
      keine Sackgasse.
   2. Auf der Kategorieseite bleibt der redaktionelle Inhalt, aber er draengt
      die Produkte nicht nach unten: kurzer Einstiegstext ueber der Liste, der
      ausfuehrliche Text darunter. Der Schalter „Redaktionstext lang und vor
      der Liste" zeigt zum Vergleich die heutige Anordnung (Befund B7). */

/* Redaktionsseite im simulierten Shop */
.fd-art { max-width: 76ch; }
/* Rueckweg auf der Produktseite: dorthin, wo der Besucher herkam — Liste,
   Suchtreffer oder Redaktionsseite. Als KNOPF gestaltet, nicht als Textlink:
   als kleiner blauer Link stand er auf einer Zeile mit der Zeile „Produkt ·
   Art.-Nr." und ging darin unter. Farbe aus den --hup-*-Tokens: der
   Shop-Bereich bleibt themenunabhaengig.
   `display: flex` plus `width: fit-content` gibt ihm eine eigene Zeile, ohne
   ihn auf die volle Breite zu ziehen — die nachfolgende Kennzeichnung ist
   inline-block und wuerde sich sonst danebensetzen. */
.fd-zurueck {
  display: flex; width: fit-content; align-items: center; gap: 6px;
  margin: 0 0 12px; padding: 0 13px; min-height: 34px; border-radius: 6px;
  background: var(--hup-tile); border: 1px solid var(--hup-line);
  font: inherit; font-size: 12.5px; font-weight: 700; color: var(--hup-blue);
  cursor: pointer;
}
.fd-zurueck::before { content: '‹'; font-size: 16px; line-height: 1; margin-top: -2px; }
.fd-zurueck:hover {
  background: var(--hup-blue); border-color: var(--hup-blue); color: var(--hup-blue-fg);
}
.fd-art-kind {
  display: inline-block; font-size: 10.5px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--hup-blue); margin-bottom: 4px;
}
.fd-art p { font-size: 12.5px; line-height: 1.6; margin: 0 0 9px; }
.fd-art-h {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); margin: 14px 0 6px;
}

/* Deeplink-Knoepfe: gleich gross, Fliesstextgroesse, monochrom */
.fd-dls { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
/* Suchbeispiele in der linken Spalte: einspaltig, flach, innen scrollend. Acht
   Zeilen uebereinander waeren rund 400px hoch — die Karte schob damit Messung
   und Klickprotokoll aus dem Blick. Die Liste ist zum Anklicken einzelner
   Beispiele da, nicht zum Ueberblicken.
   210px sind rund DREIEINHALB Zeilen (eine Zeile misst mit Abstand etwa 61px):
   die halb angeschnittene vierte Zeile zeigt von selbst, dass es weitergeht —
   ein glatter Schnitt auf drei Zeilen sieht wie ein Ende aus. Rechts etwas Luft,
   damit die Bildlaufleiste die Trefferzahlen nicht ueberdeckt. */
.fd-dls.fd-dls-flach {
  grid-template-columns: 1fr;
  max-height: 210px; overflow-y: auto; padding-right: 4px;
}
.fd-dl {
  display: block; width: 100%; text-align: left; cursor: pointer; min-height: 0;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--panel); padding: 8px 10px;
}
.fd-dl:hover { border-color: var(--accent); background: var(--panel-2); }
.fd-dl b { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.fd-dl span { display: block; font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.fd-dl.is-prod { border-style: dashed; }
/* Deeplink mitten im Fliesstext — sieht wie ein Link aus, nicht wie eine Kachel */
.fd-dl.is-inline {
  display: inline-block; width: auto; padding: 1px 6px; border-radius: var(--radius-pill);
  background: var(--accent-bg); border-color: var(--accent); margin: 0 4px 4px 0;
}
.fd-dl.is-inline b { display: inline; font-size: 11.5px; }
.fd-dl.is-inline span { display: inline; margin-left: 5px; }

/* Kurzer Einstiegstext ueber der Produktliste — bewusst schmal gehalten */
.fd-intro {
  border-left: 2px solid var(--hup-blue); padding: 2px 0 2px 9px; margin: 0 0 10px;
  font-size: 12px; line-height: 1.55; color: var(--text);
}
/* Meta-Hinweis hinter einem Info-Icon statt als Dauertext unter dem Einstieg.
   Auf und zu macht CSS (:hover, :focus-within) und nicht JS — der Klickdummy
   baut sein HTML staendig neu auf, ein dort gemerkter Offen-Zustand waere nach
   dem naechsten Rendern verloren. Die doppelte Klasse im Selektor ist Absicht:
   sie schlaegt `.fd-intro button` darunter. */
.fd-info { position: relative; display: inline-block; vertical-align: -2px; margin-left: 3px; }
.fd-info .fd-info-b {
  border: 0; background: none; padding: 0; min-height: 0; line-height: 0;
  color: var(--muted); cursor: pointer; text-decoration: none;
}
.fd-info .fd-info-b:hover,
.fd-info .fd-info-b:focus-visible { color: var(--accent-text); }
.fd-info .fd-info-b .ic { width: 13px; height: 13px; }
.fd-info-t {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 40;
  width: max-content; max-width: 260px;
  padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--panel-2); color: var(--muted); box-shadow: var(--shadow);
  font-size: 10.5px; font-style: italic; line-height: 1.5; text-align: left;
  opacity: 0; visibility: hidden; transition: opacity .12s ease;
}
.fd-info:hover .fd-info-t,
.fd-info:focus-within .fd-info-t { opacity: 1; visibility: visible; }
@media (prefers-reduced-motion: reduce) { .fd-info-t { transition: none; } }
.fd-intro button {
  border: 0; background: none; padding: 0; min-height: 0; font-size: 12px;
  color: var(--accent-text); font-weight: 600; cursor: pointer; text-decoration: underline;
}

/* Ausfuehrlicher Text UNTER der Liste */
.fd-ed { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }

/* Zum Vergleich: die heutige Anordnung — Textwand und Bildteaser vor allem anderen */
.fd-heute { border: 1px solid var(--warn); border-radius: var(--radius-sm); padding: 10px 11px; margin: 0 0 12px; }
.fd-heute p { font-size: 12.5px; line-height: 1.6; margin: 0 0 9px; }
.fd-heute-teaser { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.fd-heute-t { border: 1px solid var(--hup-line); border-radius: var(--radius-sm); overflow: hidden; background: var(--hup-page); }
.fd-heute-t i { display: block; height: 58px; background: var(--hup-tile); }
.fd-heute-t b { display: block; padding: 7px 9px 0; font-size: 12px; }
.fd-heute-t em { display: block; padding: 2px 9px 8px; font-size: 11px; color: var(--hup-blue); font-style: normal; font-weight: 700; }

/* --- Inhaltsbloecke: Inhalt haengt an einer Regel, nicht am Baumknoten ---
   Der Block zeigt nur noch, was auf der Seite auch stuende: Art des Bausteins,
   Bild, Text, Verweis. Zuordnungsregel, Position, Herkunft und Fundstelle
   standen frueher als Chips und Fusszeile am Block selbst — mitten im
   nachgebauten Shop lasen sie sich wie Teil der Seite. Sie stehen jetzt
   ausschliesslich in der Regelwerk-Tabelle unten (#cbTbl), wo der Nachweis
   hingehoert, dass beim Verschlanken kein Inhalt verloren geht. */
.fd-cb {
  border: 1px solid var(--hup-line); border-radius: 8px;
  background: var(--hup-page); color: var(--hup-page-fg);
  padding: 9px 11px 11px; margin: 0 0 10px;
}
.fd-cb-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.fd-cb-kind {
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--hup-blue);
}
.fd-cb-in { display: flex; gap: 11px; align-items: flex-start; }
.fd-cb-img {
  flex: 0 0 88px; height: 60px; border-radius: 6px; background: var(--hup-tile);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: #5a6b78;
}
.fd-cb-txt { min-width: 0; }
.fd-cb-txt b { display: block; font-size: 12.5px; line-height: 1.35; }
.fd-cb-txt p { font-size: 12px; line-height: 1.55; margin: 3px 0 0; color: #3d4d59; }
/* Uebersprungene Bloecke werden benannt, nicht verschwiegen */
.fd-cb-more { font-size: 10.5px; color: #5a6b78; font-style: italic; margin: -4px 0 10px; }
/* Hier standen .fd-cb-on und #cbTbl tr.is-on — die Marke „dieser Block greift
   gerade" in der Zuordnungstabelle der Inhaltsbloecke. Die Tabelle lag im Tab
   „Zahlen und Belege" und ist am 07.08.2026 entfallen. Die Bloecke selbst
   (.fd-cb…) bleiben: sie stehen im nachgebauten Shop. */

.device.is-mobile .fd-cb-in { flex-direction: column; }
.device.is-mobile .fd-cb-img { flex: 0 0 auto; width: 100%; }

@media (max-width: 900px) {
  .fd-listing { grid-template-columns: 1fr; }
  .fd-side { border-right: 0; border-bottom: 1px solid var(--border); position: static; max-height: none; }
}
.device.is-mobile .fd-listing { grid-template-columns: 1fr; }
.device.is-mobile .fd-side { border-right: 0; border-bottom: 1px solid var(--border); position: static; max-height: none; }

/* Suchfeld im Mobilrahmen: „auf dem Desktop wie auf dem Handy an derselben
   Stelle" (Massnahme 1.1) — es rutscht auf eine eigene Zeile unter Logo und
   Burger, statt zu schrumpfen oder zu verschwinden. Die Menuepunkte bleiben
   sichtbar und ruecken darunter. */
.device.is-mobile .hup-header { flex-wrap: wrap; gap: 10px 14px; }
.device.is-mobile .hup-search-wrap { order: 3; width: 100%; margin-left: 0; }
.device.is-mobile .hup-nav { order: 4; gap: 14px; }
.device.is-mobile .hup-nav a { font-size: 13px; }

/* ==========================================================================
   Navigationsbaum Ist-Zustand (navigationsbaum-aktuell.html) — Praefix .bm-
   --------------------------------------------------------------------------
   EIN durchgehender Baum: eine Wurzel (die Startseite), darunter die elf
   Ebene-1-Punkte und alles Weitere als eine gemeinsame, eingerueckte Liste.
   Die Schriftgroesse staffelt sich nach Ebene (data-d), damit die Struktur auch
   ohne Kartenraender lesbar bleibt.
   Zusaetzlich ein Druck-Stylesheet: gedruckt ist alles aufgeklappt, damit die
   Seite als Anhang zum Konzeptdokument taugt.
   ========================================================================== */

.bm-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; }
/* Die Kacheln sind durch das Grid ohnehin gleich hoch (align-items: stretch).
   Damit auch die ZAHLEN auf einer Linie liegen, wenn ein Titel zweizeilig
   umbricht („Menueeintraege im Zielbild"), ist die Kachel eine Spalte und die
   Zahl wird per margin-top:auto an den Kastenboden geschoben — der Titel bleibt
   oben. Ohne das haengt die Zahl an der Titelhoehe und die Reihe wirkt
   verrutscht. Gilt je Grid-Reihe; bei Umbruch richtet sich jede Reihe fuer
   sich aus. */
.bm-metric {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 11px 13px;
  display: flex; flex-direction: column;
}
.bm-metric .k { font-size: 12px; color: var(--muted); }
.bm-metric .v { margin-top: auto; font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bm-metric .v.warn { color: var(--warn); }
.bm-metric .v.bad { color: var(--bad); }

/* --- Ansichtsumschalter (aktueller / zukuenftiger Stand) ---
   Erstes Element im Inhalt, die Kennzahlen liegen als Tab-Inhalt DARUNTER und
   scrollen weg — die Tabzeile bleibt stehen, direkt unter dem Seitenkopf.
   Darunter klebt die Steuerleiste, also zwei Leisten uebereinander. Die beiden
   Versaetze setzt stickyLeisten() im Frontend als --bm-tabs-top/--bm-bar-top;
   sie werden GEMESSEN, nicht geraten: der Seitenkopf ist flex-wrap und auf
   schmalen Fenstern hoeher als die 62px, die hier vorher fest standen. Die
   Werte unten sind nur der Startwert, bis das Skript einmal gelaufen ist.
   Eigener Hintergrund, weil .tabs sonst durchsichtig ist und der Baum beim
   Blaettern durch die Zeile scheinen wuerde.
   z-index BEWUSST unter der Steuerleiste (20): klappt das Einstufungs-Menue aus
   der Leiste nach oben, muss es ueber die Tabzeile reichen duerfen — .menu liegt
   im Stapelkontext der Leiste und kaeme sonst dahinter zu liegen. */
.bm-tabs {
  position: sticky; top: var(--bm-tabs-top, 62px); z-index: 19;
  background: var(--bg);
}

/* --- Steuerleiste: bleibt beim Blaettern unter der Tabzeile stehen --- */
.bm-bar {
  position: sticky; top: var(--bm-bar-top, 102px); z-index: 20;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--bg); border-bottom: 1px solid var(--border);
  padding: 12px 0; margin: 18px 0 14px;
}
.bm-bar .field { min-width: 240px; flex: 0 1 300px; }

/* --- Der eine Baum, in einer Karte --- */
.bm-baum { padding: 12px 18px 16px; }

ul.bm-tree, ul.bm-tree ul { list-style: none; margin: 0; padding: 0; }
ul.bm-tree ul { margin-left: 11px; padding-left: 10px; border-left: 1px solid var(--border); }
.bm-node.is-hidden { display: none; }
.bm-node:not(.open) > ul { display: none; }

/* Die Zeile ist inhaltsbreit (inline-flex), nicht fensterbreit: Zahl, Marken und
   Ziel-Link folgen direkt dem Namen. Bei fensterbreiten Zeilen klaffte zwischen
   Name und Marken eine Luecke von mehreren hundert Pixeln. */
.bm-row {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 5px;
  border-radius: var(--radius-sm); font-size: 13px; line-height: 1.35;
  max-width: 100%;
}
.bm-row.has-kids { cursor: pointer; }
.bm-row.has-kids:hover { background: var(--chip); }
.bm-row.is-sel, .bm-row.is-sel:hover { background: var(--accent-bg); }

/* Staffelung nach Ebene: Wurzel und die elf Hauptpunkte tragen den Baum, die
   Tiefe tritt zurueck. Ohne Kartenraender ist das die einzige Gliederung. */
.bm-node[data-d="0"] > .bm-row { font-size: 15px; font-weight: 700; }
.bm-node[data-d="1"] > .bm-row { font-size: 14.5px; font-weight: 650; margin-top: 7px; }
.bm-node[data-d="2"] > .bm-row { font-size: 13.5px; font-weight: 600; }
.bm-node[data-d="0"] > ul { margin-left: 4px; padding-left: 14px; border-left-width: 2px; }
/* Der Ast eines Hauptpunkts bleibt beim Blaettern als Linie erkennbar. */
.bm-node[data-d="1"] > ul { border-left-color: var(--muted); }

/* Aufklapp-Knopf: bewusst kleiner als die Standard-Buttongroesse — er sitzt in
   einer 13px-Baumzeile, ein 36px-Knopf wuerde die Zeile aufreissen. */
.bm-tw {
  min-height: 0; min-width: 0; padding: 0; border: 0; background: none;
  color: var(--muted); width: 16px; height: 16px; flex-shrink: 0;
}
.bm-tw:hover { border-color: transparent; color: var(--accent-text); }
.bm-tw.is-leaf { visibility: hidden; }
.bm-tw .ic { width: 13px; height: 13px; transition: transform .12s; }
.bm-node.open > .bm-row .bm-tw .ic { transform: rotate(90deg); }

.bm-name { flex: 0 1 auto; min-width: 0; word-break: break-word; }
.bm-name mark { background: var(--accent-bg); color: var(--text); border-radius: 3px; padding: 0 1px; }
.bm-n { color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.bm-row .badge { font-size: 10.5px; padding: 1px 7px; }

/* Zielangabe: nur der Pfad hinter /de/, sonst ueberdeckt die URL den Namen. */
.bm-url { font-size: 11px; color: var(--muted); word-break: break-all; }
a.bm-ext { color: var(--accent-text); text-decoration: none; flex-shrink: 0; font-size: 12px; padding: 0 2px; }
a.bm-ext:hover, a.bm-ext:focus-visible { text-decoration: underline; }

.bm-empty { color: var(--muted); padding: 20px 4px; }
/* Ebenfalls volle Breite (war 78ch) — gleiche Entscheidung wie bei .bm-summe. */
.bm-note { color: var(--muted); font-size: 13px; margin: 18px 0 0; }

/* Umschalter der Steuerleiste (Standard: Pfade aus, Befunde an) */
.bm-urls-off .bm-url { display: none; }
.bm-flags-off .bm-row .badge { display: none; }

/* --- Umbau-Modus: was bleibt, was aus dem Menue faellt -------------------
   Zwei Ansichten auf denselben Baum. Statt neu zu zeichnen wird umgeschaltet
   (gleiches Muster wie ist-only/soll-only im Klickdummy): die Befund-Marken
   des Ist-Zustands und die Umbau-Marken liegen beide im DOM.
   Farblogik: gruen = bleibt Eintrag, Terracotta = wird durch Filter oder Achse
   ersetzt, grau = geht in einem Sammelpunkt auf, rot = entfaellt ohne Ersatz,
   gelb = offene Stelle. Nur Tokens, damit der Dark-Mode traegt. */
body:not(.bm-umbau) .bm-um-only { display: none !important; }
body.bm-umbau .bm-ist-only { display: none !important; }

.bm-metric .v.good { color: var(--good); }
.bm-metric .v.accent { color: var(--accent-text); }

/* Zusammenfassung der Umbau-Ansicht — einziger Inhalt der Karte, seit die
   Legende als Dropdown in der Steuerleiste sitzt.
   Volle Kastenbreite, keine Zeilenlaengenbegrenzung (war 96ch): der Text soll
   die Box ausfuellen, nicht auf halber Strecke umbrechen. Kein Abstand nach
   unten, sonst laeuft er als schiefe Innenkante der Karte mit. */
.bm-summe { margin: 0; font-size: 14px; }
.bm-summe b { font-size: 15px; }
/* --- Einstufung als Filter in der Steuerleiste ------------------------------
   War die Legende in der Umbau-Karte, ist jetzt ein Dropdown. Die Zeilen sind
   unveraendert .bm-leg — im Menue macht .menu button sie randlos und
   leistenbreit, die Zahl rutscht dabei nach rechts.
   Waagerecht ist das Menue LINKS am Knopf ausgerichtet (anders als .menu von
   Haus aus): der Knopf steht am linken Rand der Leiste und ist schmaler als das
   Menue, rechts ausgerichtet wuerde es aus dem Fenster laufen. Nur wenn es
   links keinen Platz hat, schwenkt positionKlMenu() es per .rechts um. */
.bm-klbtn { display: inline-flex; align-items: center; gap: 6px; }
.bm-klbtn.active { border-color: var(--accent); color: var(--accent-text); }
.bm-klbtn .um, .bm-klbtn .bm-leg-n { pointer-events: none; }
.bm-kl-caret { display: inline-flex; color: var(--muted); }

.bm-klmenu { left: 0; right: auto; min-width: 380px; max-width: min(560px, 92vw); gap: 1px; }
.bm-klmenu.rechts { left: auto; right: 0; }
.bm-klmenu .bm-leg { border-radius: var(--radius-sm); padding: 5px 9px; }
.bm-klmenu .bm-leg-n { margin-left: auto; }
.um-alle { background: var(--chip); color: var(--chip-text); }

.bm-leg {
  display: inline-flex; align-items: center; gap: 7px; min-height: 0;
  border: 1px solid var(--border); background: var(--panel-2);
  border-radius: var(--radius-pill); padding: 3px 11px 3px 4px; font-size: 13px;
}
.bm-leg:hover { background: var(--chip); }
.bm-leg.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.bm-leg-n { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 12px; }

/* Marke je Einstufung — dieselben Farbpaare fuer Badge und Legendenpunkt */
.um { white-space: nowrap; font-size: 10.5px; font-weight: 600; padding: 1px 7px; border-radius: var(--radius-pill); }
.um-bleibt, .um-dienst        { background: var(--good-bg); color: var(--good); }
.um-filter, .um-umfeld        { background: var(--accent-bg); color: var(--accent-text); }
.um-linie                     { background: var(--chip); color: var(--chip-text); }
.um-unternehmen, .um-dienstunter { background: var(--done-bg); color: var(--done); }
.um-weg                       { background: var(--bad-bg); color: var(--bad); }
.um-offen                     { background: var(--warn-bg); color: var(--warn); }

/* Was aus dem Menue faellt, tritt zurueck; was bleibt, wird betont. Die Wurzel
   ist kein Menuepunkt und bleibt von der Bewertung unberuehrt. */
body.bm-umbau .bm-node:not([data-k="bleibt"]):not([data-k="dienst"]):not([data-k="wurzel"]) > .bm-row > .bm-name { color: var(--muted); }
body.bm-umbau .bm-node[data-k="bleibt"] > .bm-row > .bm-name,
body.bm-umbau .bm-node[data-k="dienst"] > .bm-row > .bm-name { font-weight: 650; }
body.bm-umbau .bm-row { border-left: 3px solid transparent; padding-left: 5px; }
body.bm-umbau .bm-node[data-k="bleibt"] > .bm-row,
body.bm-umbau .bm-node[data-k="dienst"] > .bm-row { border-left-color: var(--good); }
body.bm-umbau .bm-node[data-k="filter"] > .bm-row,
body.bm-umbau .bm-node[data-k="umfeld"] > .bm-row { border-left-color: var(--accent); }
body.bm-umbau .bm-node[data-k="weg"] > .bm-row { border-left-color: var(--bad); }
body.bm-umbau .bm-node[data-k="offen"] > .bm-row { border-left-color: var(--warn); }

/* Zielzeile: wodurch der Knoten ersetzt wird, plus Fundstelle auf Wunsch */
.bm-ziel { font-size: 11.5px; color: var(--muted); padding-left: 27px; line-height: 1.4; }
.bm-ziel b { color: var(--text); font-weight: 600; }
.bm-quelle { display: block; font-size: 10.5px; opacity: .8; }
.bm-belege-off .bm-quelle { display: none; }

/* --- Druck: alles aufgeklappt, Bedienelemente weg --- */
.bm-print-h { display: none; }
@media print {
  .app-header, .bm-bar, .bm-tabs, a.bm-ext, #empty { display: none !important; }
  .wrap { max-width: none; padding: 0; }
  h1.bm-print-h { display: block; margin: 0 0 4px; }
  p.bm-print-h { display: block; color: #555; font-size: 11px; margin: 0 0 14px; }
  .bm-metrics { grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 16px; }
  .bm-metric { box-shadow: none; border: 1px solid #999; border-radius: 0; padding: 5px 7px; }
  .bm-metric .v { font-size: 15px; }
  .card.bm-baum { box-shadow: none; border: 0; padding: 0; }
  .bm-node > ul { display: block !important; }
  /* Ein Hauptzweig soll moeglichst nicht ueber den Seitenumbruch laufen. */
  .bm-node[data-d="1"] { break-inside: avoid; page-break-inside: avoid; }
  .bm-row { padding: 1px 0; }
  .bm-tw { display: none; }
  ul.bm-tree ul { border-left-color: #ccc; }
  .bm-node[data-d="1"] > ul { border-left-color: #999; }
}

/* ============================================================================
   RUNDGANG — Fuehrung durch die Funktionen beider Klickdummys
   ----------------------------------------------------------------------------
   Klassenpraefix .rg-, DOM wird von public/gemeinsam/rundgang.js erzeugt.
   Nur Tokens (var(--...)) — Dark-Mode ergibt sich dadurch von selbst.
   ============================================================================ */
.rg-overlay { position: fixed; inset: 0; z-index: 900; display: none; }
/* Schritt ohne Ziel (Begruessung, Schluss): kein Loch, deshalb dunkelt die
   Flaeche selbst ab — derselbe Wert wie beim Loch unten. */
.rg-overlay.rg-dim { background: rgba(0, 0, 0, .55); }

/* Scheinwerfer: ein "Loch" ueber dem Zielelement, der Rest wird per riesigem
   box-shadow abgedunkelt. Blockt keine Klicks selbst — das macht die
   Overlay-Flaeche, damit Rad-Scrollen unterhalb weiter funktioniert. */
.rg-hole {
  position: fixed; top: 0; left: 0; width: 0; height: 0; opacity: 0;
  border-radius: var(--radius-sm); border: 2px solid var(--accent);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, .55);
  pointer-events: none; z-index: 901;
  transition: top .22s ease, left .22s ease, width .22s ease, height .22s ease, opacity .18s ease;
}
.rg-hole.rg-no-anim { transition: none; }

.rg-card {
  position: fixed; top: 0; left: 0; z-index: 902;
  width: 340px; max-width: calc(100vw - 32px);
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 16px 18px;
  /* Auf niedrigen Fenstern darf die Karte nicht aus dem Bild wachsen. */
  max-height: calc(100vh - 24px); overflow-y: auto;
}
.rg-card.rg-mitte { width: 380px; text-align: center; }
.rg-card.rg-dock {
  left: 0; right: 0; bottom: 0; top: auto; width: auto; max-width: none;
  border-radius: var(--radius) var(--radius) 0 0;
  max-height: 55vh;
}
.rg-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.rg-count { font-size: 12px; color: var(--muted); }
.rg-x { min-width: 30px; min-height: 30px; padding: 0; margin-left: auto; border: none; background: none; color: var(--muted); }
.rg-x:hover { color: var(--accent-text); border-color: transparent; }
.rg-bar { height: 4px; border-radius: var(--radius-pill); background: var(--chip); overflow: hidden; margin-bottom: 12px; }
.rg-bar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: var(--radius-pill); transition: width .2s ease; }
.rg-titel { margin: 0 0 6px; font-size: 16px; font-weight: 650; }
.rg-text { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: var(--text); }
.rg-text b { color: var(--text); }
.rg-foot { display: flex; align-items: center; gap: 8px; }
.rg-spacer { flex: 1; }

@media print {
  .rg-overlay { display: none !important; }
}

/* ============================================================================
   STARTSEITE — Uebersicht ueber die Arbeitsseiten (public/index.html)
   ----------------------------------------------------------------------------
   Klassenpraefix .st-. Nur Tokens, damit Hell/Dunkel von selbst mitkommt.
   Die Seite ist ein Lesedokument mit Kartenraster; sie enthaelt bewusst keine
   Tabelle (die Styleguide-Pflicht "sortierbar plus Filter" waere fuer vier
   Karten Ballast) und keine Kennzahlen, die sonst zweimal gepflegt werden
   muessten.
   ============================================================================ */

/* Schmaler als die Werkzeugseiten: hier steht Prosa, und ueber 1600px hinweg
   liest sich kein Satz mehr. */
.wrap.st-wrap { max-width: 1180px; }

/* Zwischenueberschrift zwischen den Bloecken. */
.st-h { margin: 28px 0 12px; }

.st-intro p, .st-vgl p, .st-card p { margin: 0; }
.st-intro h2 { margin: 0 0 10px; }
.st-card .st-was { margin-top: 10px; }

/* --- Kartenraster: drei Spalten ---
   auto-fit statt fester Spaltenzahl, damit auf schmalen Fenstern weniger
   Spalten entstehen, ohne Media-Query. Bei der Breite von .st-wrap (1180px)
   ergibt minmax(340px, 1fr) drei Spalten. */
.st-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }

/* Die Karte ist eine Spalte, damit der Knopf per margin-top:auto unten
   andockt — nebeneinander stehende Karten haben sonst Knoepfe auf drei
   verschiedenen Hoehen (gleiche Loesung wie bei den Kennzahlen-Kacheln). */
.st-card { display: flex; flex-direction: column; }
.st-card h2 { margin: 0; }
.st-card .st-sub { color: var(--muted); font-size: 13px; margin: 2px 0 0; }
.st-card .st-was { color: var(--muted); font-size: 13px; }

/* Kopf der Karte: Symbol neben Titel und Unterzeile. */
.st-kopf { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 10px; }
.st-ic { display: flex; color: var(--accent-text); padding-top: 2px; }
.st-ic .ic { width: 20px; height: 20px; }

.st-liste { margin: 6px 0 0; padding-left: 20px; line-height: 1.5; }
.st-liste li { margin-bottom: 4px; }
.st-liste li:last-child { margin-bottom: 0; }

/* Fusszeile der Karte: Knopf plus Merkmal, immer am Kartenboden. */
.st-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; padding-top: 4px; }
.st-card .st-foot { margin-top: auto; padding-top: 16px; }

/* Knopf-Optik fuer einen ECHTEN Link: die Basis bindet die Button-Regeln an das
   button-Element, ein <a> bekommt davon nichts ab. Bewusst ein Link und kein
   Button mit onclick — nur so funktionieren Mittelklick, Kontextmenue und
   "Adresse kopieren". Werte absichtlich identisch zur Button-Regel oben. */
.st-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 36px; padding: 0 14px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--panel-2); color: var(--text);
  font-size: 14px; line-height: 1.2; text-decoration: none; transition: .12s;
}
.st-btn:hover { border-color: var(--accent); }
.st-btn.primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); font-weight: 600; }
.st-btn.primary:hover { filter: brightness(1.05); }

/* --- Das Anschreiben an Hupfer: zentraler, prominenter Einstieg zwischen
   der Einordnung und den fünf Arbeitsseiten. Akzentrahmen, damit die Karte
   sich von den übrigen (neutral gerahmten) Karten abhebt. --- */
.st-anschreiben {
  display: flex; align-items: center; justify-content: center;
  border-color: var(--accent); background: var(--accent-bg);
  margin-top: 20px;
}
.st-btn-lg { min-height: 44px; padding: 0 20px; font-size: 15px; flex-shrink: 0; }

/* --- Vorher/Nachher nebeneinander --- */
.st-vgl-paar { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin: 14px 0; }
.st-vgl-box { padding: 12px 14px; }
.st-vgl-box p { margin: 0; }
.st-vgl .st-vgl-t { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 6px; }
/* Zwischenüberschrift innerhalb der Vergleichskarte („Worin sich die beiden
   Vorschläge unterscheiden") — kein h3, weil die Gliederung der Seite auf einer
   Ebene bleiben soll. */
.st-vgl .st-vgl-t2 { font-weight: 600; font-size: 15px; margin: 22px 0 8px; }
.st-vgl-box .st-liste { margin: 8px 0 0; font-size: 13px; }
.st-vgl-hinweis { margin-top: 14px; }

/* Die interne Karte hebt sich ab, damit sie beim Vorfuehren nicht versehentlich
   mit den Kundenseiten in einen Topf faellt. */
.st-intern { border-color: var(--warn); }