/* K&M Cockpit: Rahmen, Navigation, Kacheln und gemeinsame Bausteine (VetDream-Stil aus dem Gesamtentwurf) */

.pf-unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* FocusOnNavigate (Routes.razor) setzt nach jedem Seitenwechsel den Fokus auf die h1 (für Screenreader); den Fokusrahmen dafür nicht zeichnen. */
h1[tabindex="-1"]:focus { outline: none; }

/* ---------- Kopfzeile ---------- */
/* Kopfzeile bleibt einzeilig: Suche schrumpft, bei schmalen Fenstern zeigen Quellen-Knopf und Stempeluhr nur den Punkt. */
.km-header { position: relative; flex-wrap: nowrap; min-width: 0; }
.km-brand { flex: none; }
.pf-suche { position: relative; flex: 1 1 320px; min-width: 200px; max-width: 560px; }
.km-header-rechts { flex: 0 1 auto; min-width: 0; }
.km-header-rechts > * { flex: none; }
@media (max-width: 1400px) { .pf-stempeluhr-text { display: none; } .pf-stempeluhr .pf-punkt { margin-right: 0; } }
@media (max-width: 1200px) { .km-brand { width: auto; } .pf-suche { min-width: 160px; } .pf-benutzer > span:nth-child(2) { display: none; } }
.pf-suche input { width: 100%; box-sizing: border-box; height: 38px; padding: 6px 12px 6px 36px; border: 1px solid #d3d3d2; border-radius: 4px; font: inherit; background: #fff; }
.pf-suche input:focus { outline: none; border-color: var(--km-fokus); box-shadow: 0 0 0 .2rem rgba(31,127,207,.25); }
.pf-suche-icon { position: absolute; left: 10px; top: 10px; width: 18px; height: 18px; color: #585a5f; }
.pf-treffer { position: absolute; z-index: 50; top: 42px; left: 0; right: 0; background: #fff; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.18); padding: 6px; max-height: 420px; overflow: auto; }
.pf-treffer-zeile { display: flex; flex-direction: column; width: 100%; padding: 6px 8px; border: 0; border-radius: 4px; background: transparent; font: inherit; text-align: left; cursor: pointer; color: #161616; }
.pf-treffer-zeile:hover, .pf-treffer-zeile:focus-visible, .pf-treffer-zeile.markiert { background: var(--km-blau-hell); outline: none; }
.pf-leer { padding: 8px; }

.pf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; box-sizing: border-box; padding: 5px 12px; border-radius: 4px;
          border: 1px solid #d3d3d2; background: #fff; color: #3f3f3e; font: inherit; cursor: pointer; text-decoration: none; white-space: nowrap; }
.pf-btn:hover { background: var(--km-blau); border-color: var(--km-blau); color: #000; }
.pf-btn-primaer { background: var(--km-gruen); border-color: var(--km-gruen); color: #000; }
.pf-btn:focus-visible { outline: none; box-shadow: 0 0 0 1px var(--km-fokus), 0 0 0 .25rem rgba(31,127,207,.25); }
.pf-benutzer { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent; font: inherit; cursor: pointer; padding: 4px 6px; border-radius: 4px; }
.pf-benutzer:hover { background: var(--km-gruen-hell); }

.pf-menue, .pf-fragen { position: absolute; z-index: 60; right: 20px; top: 76px; background: #fff; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.18); padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.pf-menue { width: 340px; }
.pf-menue-teil { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--km-rand); padding-top: 10px; }
.pf-menue select, .pf-fragen input { font: inherit; padding: 6px 8px; border: 1px solid #d3d3d2; border-radius: 4px; }
.pf-menue a { color: #3f3f3e; text-decoration: none; padding: 4px 0; }
.pf-fragen { width: 460px; }
.pf-stempelpopover > a { color: var(--km-fokus); text-decoration: none; padding: 4px 0; }
.pf-stempeluhr { gap: 0; }
.pf-stempeluhr .pf-punkt { margin-right: 6px; }
.pf-stempelpopover { position: absolute; z-index: 60; right: 20px; top: 76px; width: 300px; background: #fff; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.18); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.pf-stempelpopover select { font: inherit; padding: 6px 8px; border: 1px solid #d3d3d2; border-radius: 4px; }

/* Glocke im Kopf (Components/Layout/Glocke.razor) */
.pf-glocke { position: relative; padding: 6px 8px; }
.pf-glocke-zahl { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--km-fokus); color: #fff; font-size: 11px; font-weight: 600; line-height: 18px; text-align: center; }
.pf-glocke.wichtig { border-color: #c0392b; color: #c0392b; }
.pf-glocke.wichtig .pf-glocke-zahl { background: #c0392b; }
.pf-glockenpopover { position: absolute; z-index: 60; right: 20px; top: 76px; width: 380px; max-height: 70vh; overflow-y: auto; background: #fff; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.18); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.pf-glocke-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.pf-glocke-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.pf-glocke-eintrag { display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left; font: inherit; color: inherit; background: #fff; border: 1px solid #e5e5e4; border-radius: 6px; padding: 8px 10px; cursor: pointer; }
.pf-glocke-eintrag:hover { background: #f7f7f6; }
.pf-glocke-eintrag.neu { border-left: 3px solid var(--km-fokus); background: #f4f8fd; }
.pf-glocke-eintrag.wichtig { border-left: 3px solid #c0392b; background: #fdf1ef; }
.pf-glocke-titel { font-weight: 600; }
.pf-glocke-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pf-glocke-hinweis { position: absolute; z-index: 55; right: 20px; top: 76px; max-width: 460px; display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #fdf1ef; border: 1px solid #c0392b; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.18); }
.pf-glocke-hinweis-text { flex: 1 1 auto; min-width: 0; }

/* ---------- Navigation ---------- */
.pf-nav { width: 232px; flex: none; display: flex; flex-direction: column; gap: 2px; padding: 4px 8px 16px 8px; }
.pf-nav-btn { display: flex; align-items: center; gap: 10px; min-height: 48px; box-sizing: border-box; padding: 6px 8px; border-radius: 4px; color: #3f3f3e; text-decoration: none; }
.pf-nav-btn svg { width: 22px; height: 22px; flex: none; fill: none; stroke: #585a5f; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pf-nav-btn:hover { background: var(--km-gruen-hell); color: #000; }
.pf-nav-btn.aktiv { background: var(--km-gruen); color: #000; font-weight: 600; }
.pf-nav-btn.aktiv svg { stroke: #2c3332; }
.pf-zahl { margin-left: auto; background: #e1e8eb; border-radius: 10px; padding: 0 8px; font-size: 12px; font-weight: 600; }
.pf-nav-btn.aktiv .pf-zahl { background: #fff; }
.pf-sub-btn { display: block; padding: 5px 8px 5px 40px; border-radius: 4px; color: #3f3f3e; text-decoration: none; }
.pf-sub-btn:hover { background: var(--km-gruen-hell); color: #000; }
.pf-sub-btn.aktiv { background: var(--km-blau-hell); color: #000; font-weight: 600; }
.pf-quellen { margin-top: 20px; padding: 10px 8px; border-top: 1px solid var(--km-rand); display: flex; flex-direction: column; gap: 4px; }
.pf-quelle { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: #3f3f3e; }
.pf-punkt { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: #adb5bd; }
.pf-punkt.ok { background: #2e9e52; }
.pf-punkt.warn { background: #e0a100; }
.pf-punkt.fehler { background: #c62828; }
.pf-punkt.info { background: #1e88e5; }
.pf-punkt.aus { background: #fff; border: 1px solid #adb5bd; box-sizing: border-box; }
.pf-quelle.aus { color: var(--km-text-gedimmt); }

/* ---------- Seitenkopf ---------- */
.pf-seitenkopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.pf-seitenkopf-links { display: flex; align-items: center; gap: 14px; }
.pf-seiten-icon { width: 40px; height: 40px; padding: 8px; box-sizing: border-box; border-radius: 8px; background: var(--km-gruen-hell); fill: none; stroke: #2c3332; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.pf-seitenkopf .km-label a { color: var(--km-text-gedimmt); text-decoration: none; }
.pf-seitenkopf .km-label a:hover { color: var(--km-fokus); }
.pf-einleitung { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 8px; }
/* Titelzeile mit (i)-Knopf und Zugriffs-Chip (Components/Kern/BereichSeite.razor); das Popover hängt unter der Titelzeile. */
.pf-titelzeile { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pf-info-knopf { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 1px solid #adb5bd; background: #fff; color: #585a5f;
                 font: italic 600 13px Georgia, serif; cursor: pointer; }
.pf-info-knopf:hover, .pf-info-knopf[aria-expanded="true"] { background: var(--km-blau-hell); border-color: var(--km-fokus); color: #000; }
.pf-info-knopf:focus-visible { outline: none; box-shadow: 0 0 0 1px var(--km-fokus), 0 0 0 .25rem rgba(31,127,207,.25); }
.pf-zugriff-chip { font-weight: 400; }
.pf-info-popover { position: absolute; z-index: 40; top: 100%; left: 0; margin-top: 6px; width: min(460px, 90vw); background: #fff; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.18);
                   padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
/* Durchsichtige Fläche unter dem Popover: Klick daneben schließt es (Popover liegt darüber) */
.pf-info-hintergrund { position: fixed; z-index: 39; inset: 0; background: transparent; }
.pf-info-popover a { color: var(--km-fokus); text-decoration: none; }

/* ---------- Aktionsmenü (Components/Layout/AktionsMenue.razor): runder Knopf unten rechts, Flyout nach oben ---------- */
.km-main { padding-bottom: 96px; }
.pf-aktionen-knopf { position: fixed; z-index: 72; right: 24px; bottom: 24px; display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 18px 0 14px; border: 0; border-radius: 24px;
                     background: var(--km-gruen); color: #000; font: inherit; font-weight: 600; cursor: pointer; box-shadow: 0 3px 10px rgba(0,0,0,.28); }
.pf-aktionen-knopf:hover { background: var(--km-gruen-hell); }
.pf-aktionen-knopf:focus-visible { outline: none; box-shadow: 0 3px 10px rgba(0,0,0,.28), 0 0 0 2px #fff, 0 0 0 4px var(--km-fokus); }
.pf-aktionen-hintergrund { position: fixed; z-index: 70; inset: 0; background: transparent; }
.pf-aktionen-menue { position: fixed; z-index: 72; right: 24px; bottom: 84px; width: 300px; max-width: calc(100vw - 32px); max-height: calc(100vh - 120px); overflow-y: auto; box-sizing: border-box;
                     background: #fff; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.28); padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.pf-aktionen-menue:focus { outline: none; }
.pf-aktionen-gruppe { display: flex; flex-direction: column; gap: 2px; }
.pf-aktionen-gruppe > .km-label { padding: 4px 8px 2px; }
.pf-aktionen-hilfe { border-top: 1px solid var(--km-rand); padding-top: 6px; }
.pf-aktionen-eintrag { display: block; width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: #3f3f3e; font: inherit;
                       text-align: left; text-decoration: none; cursor: pointer; }
.pf-aktionen-eintrag:hover:not(:disabled), .pf-aktionen-eintrag:focus-visible { background: var(--km-blau-hell); color: #000; outline: none; }
.pf-aktionen-eintrag.pf-btn-primaer { background: var(--km-gruen); border-color: var(--km-gruen); font-weight: 600; }
.pf-aktionen-eintrag.pf-btn-primaer:hover:not(:disabled), .pf-aktionen-eintrag.pf-btn-primaer:focus-visible { background: var(--km-gruen-hell); border-color: var(--km-gruen-hell); }
.pf-aktionen-eintrag:disabled, .pf-aktionen-eintrag[aria-disabled="true"] { opacity: .5; cursor: default; pointer-events: none; }

/* ---------- Kacheln (Startseite und Bereiche) ---------- */
.pf-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.pf-kachel { background: #fff; border-radius: 8px; box-shadow: var(--km-kachel-schatten); overflow: hidden; display: flex; flex-direction: column; }
.pf-kachel-kopf { min-height: 52px; box-sizing: border-box; padding: 8px 16px; background: var(--km-gruen); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; color: #2c3332; }
.pf-kachel-kopf h2 { color: #2c3332; }
.pf-kachel-inhalt { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.pf-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; }
.pf-stat { padding: 10px 12px; border-radius: 8px; background: #f8f9fa; border: 1px solid #e9ecef; }
.pf-stat strong { display: block; font-size: 22px; font-weight: 700; line-height: 1.4; color: #146c43; }
/* Auge im Kopfbereich (.pf-verdeckt am Rahmen): Zahlen und sensible Daten unkenntlich machen.
   Bereiche markieren eigene sensible Werte mit .pf-sensibel; der Bereich Kennzahlen wird unterhalb des Seitenkopfs ganz verdeckt. */
.pf-stat strong, .pf-sensibel { transition: filter .15s; }
.pf-verdeckt .pf-stat strong, .pf-verdeckt .pf-sensibel,
.pf-verdeckt .pf-sensibel-bereich > :not(.pf-seitenkopf) { filter: blur(7px); user-select: none; }
.pf-auge { padding: 5px 8px; }
.pf-auge[aria-pressed="true"] { background: var(--km-blau-hell); }
.pf-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pf-liste li { display: flex; flex-direction: column; }

/* ---------- Badges (Töne) ---------- */
.km-badge.ok { background: #e7f7ec; color: #1c7a3a; border: 1px solid #bce7c6; }
.km-badge.warn { background: #fdf1da; color: #9a6206; border: 1px solid #f5d9a8; }
.km-badge.danger { background: #fbe9e6; color: #a01b1b; border: 1px solid #f3c4bd; }
.km-badge.neutral { background: #f8f9fa; color: #5c636a; border: 1px solid #e9ecef; }
.km-badge.demo { background: #f3e8ff; color: #6b2fa3; border: 1px solid #e0c8f7; }

/* ---------- Reiter ---------- */
.pf-reiter { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--km-rand); }
.pf-reiter button, .pf-reiter a { border: 0; background: transparent; font: inherit; padding: 8px 14px; cursor: pointer; color: #3f3f3e; border-bottom: 3px solid transparent; text-decoration: none; }
.pf-reiter button:hover, .pf-reiter a:hover { color: #000; background: var(--km-gruen-hell); }
.pf-reiter .aktiv { border-bottom-color: var(--km-gruen); color: #000; font-weight: 600; }

/* ---------- Einfache Diagramme ohne Bibliothek ---------- */
.pf-balken { display: flex; flex-direction: column; gap: 6px; }
.pf-balken-zeile { display: grid; grid-template-columns: minmax(120px, 30%) 1fr auto; align-items: center; gap: 8px; }
.pf-balken-spur { height: 14px; background: #f1f3f5; border-radius: 3px; overflow: hidden; }
.pf-balken-wert { height: 100%; background: var(--km-blau); }

@media (max-width: 900px) {
    .pf-menue, .pf-fragen, .pf-stempelpopover, .pf-glockenpopover, .pf-glocke-hinweis { left: 16px; right: 16px; width: auto; }
}

/* Leerzustand ohne angebundene Quelle (Components/Kern/KeineQuelle.razor) */
.pf-keine-quelle { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 14px; border: 1px dashed #f5d9a8; border-radius: 8px; background: #fffaf0; color: #3f3f3e; }
.pf-keine-quelle a { margin-left: auto; color: var(--km-fokus); }

/* Mails aus gemeinsamen Postfächern (Components/Kern/PostfachMailListe) */
.pf-postfach { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pf-postfach > li { padding: 8px 10px; border: 1px solid #e1e8eb; border-left: 3px solid #1f7fcf; border-radius: 6px; background: #fff; }
.pf-postfach > li.aus { border-left-color: #acde79; }
.pf-postfach-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.pf-postfach-kopf strong { flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.pf-postfach-richtung { font-weight: 700; color: #6b7a80; }
.pf-postfach-zeit { margin-left: auto; font-size: 12px; color: #6b7a80; white-space: nowrap; }
.pf-postfach-vorschau { margin-top: 4px; font-size: 13px; color: #3f3f3e; overflow-wrap: anywhere; }
.pf-postfach-einzeln { list-style: none; margin: 8px 0 0; padding: 0 0 0 10px; border-left: 2px solid #e1e8eb; display: flex; flex-direction: column; gap: 8px; }
.pf-postfach-leer, .pf-postfach-fuss { font-size: 12px; color: #6b7a80; margin: 8px 0 0; }

/* Sortierbarer Tabellenkopf (Components/Kern/SortKopf) */
.pf-sortkopf { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; font: inherit; font-weight: inherit; color: inherit; cursor: pointer; white-space: nowrap; }
.pf-sortkopf:hover, .pf-sortkopf:focus-visible { text-decoration: underline; }
.pf-sortpfeil { font-size: 10px; color: #8a9599; }
.pf-sortkopf.aktiv .pf-sortpfeil { color: inherit; }

/* Ausblenden von Interessenten und Onboardings (Components/Kern/AusblendenDialog, AusblendenHinweis) */
.km-ausgeblendet-band { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-radius: 8px; border: 1px solid #e9ecef; background: #f1f3f4; color: #4a5256; }
.km-ausgeblendet-zeile { opacity: .8; background: #f8f9fa; }
.km-auswahl { width: 32px; text-align: center; }
.km-ausblenden-leiste { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border: 1px solid #e1e8eb; border-radius: 8px; background: #f8f9fa; }

/* Kundensuche (Komponente KundenSuche): Trefferliste wie die Kopfsuche, unter dem Feld */
.km-ks { position: relative; min-width: 220px; }
.km-ks input { width: 100%; box-sizing: border-box; min-height: 32px; padding: 5px 8px; border: 1px solid #d3d3d2; border-radius: 4px; font: inherit; font-size: 14px; color: #161616; background: #fff; }
.km-ks input:focus { outline: none; border-color: var(--km-fokus); box-shadow: 0 0 0 .2rem rgba(31,127,207,.25); }
.km-ks-liste { position: absolute; z-index: 60; top: 36px; left: 0; min-width: 100%; width: max-content; max-width: 420px; background: #fff; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.18); padding: 6px; max-height: 320px; overflow: auto; }

/* Hilfe › Handbuch: Link „öffnen ›“ neben dem Hilfe-Link, Kachelüberschrift als Link */
.pf-kachel-link { color: inherit; text-decoration: none; }
.pf-kachel-link:hover, .pf-kachel-link:focus-visible { text-decoration: underline; }
.pf-liste .pf-liste-zeile { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; }
.pf-liste-zeile .pf-oeffnen { white-space: nowrap; }

/* Hilfe › Handbuch: Kapitelseite und Hilfe-Seiten (lesbare Textbreite, Aufzählungen, nummerierte Schritte) */
.pf-hilfe { display: flex; flex-direction: column; gap: 18px; max-width: 80ch; }
.pf-hilfe-text { margin: 0; max-width: 80ch; line-height: 1.55; }
.pf-hilfe-abschnitt, .pf-hilfe-seiten { display: flex; flex-direction: column; gap: 8px; max-width: 80ch; }
.pf-hilfe-abschnitt p { margin: 0; line-height: 1.55; }
.pf-hilfe-abschnitt .pf-liste, .pf-hilfe-abschnitt .pf-schritte { display: block; margin: 0; padding-left: 22px; line-height: 1.55; }
.pf-hilfe-abschnitt .pf-liste { list-style: disc; }
.pf-hilfe-abschnitt .pf-schritte { list-style: decimal; }
.pf-hilfe-abschnitt .pf-liste li, .pf-hilfe-abschnitt .pf-schritte li { display: list-item; margin: 0 0 6px; padding-left: 2px; }
.pf-hilfe-navigation { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; padding-top: 12px; border-top: 1px solid #e9ecef; }

/* Nicht mehr aktive Mitarbeiter in Historien (Komponente MitarbeiterName): grau, aber lesbar */
.km-inaktiv { color: #8a96a0; }

/* ---------- Linke Leiste: Gruppen, schmale Symbolleiste, Overlay ---------- */
.pf-nav { position: relative; }
.pf-nav-modul { position: relative; }
.pf-nav-btn { position: relative; }
.pf-nav-umschalter { display: flex; align-items: center; gap: 10px; min-height: 36px; box-sizing: border-box; padding: 4px 8px; border: 0; border-radius: 4px; background: transparent; color: #585a5f; font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
.pf-nav-umschalter svg { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pf-nav-umschalter:hover { background: var(--km-gruen-hell); color: #000; }
.pf-nav-umschalter:focus-visible, .pf-nav-btn:focus-visible, .pf-sub-btn:focus-visible, .pf-menueknopf:focus-visible { outline: none; box-shadow: 0 0 0 1px var(--km-fokus), 0 0 0 .25rem rgba(31,127,207,.25); }
.pf-sub-gruppe { padding: 8px 8px 2px 40px; font-size: 11px; letter-spacing: .5px; text-transform: uppercase; color: var(--km-text-gedimmt); }
.pf-menueknopf, .pf-nav-hintergrund { display: none; }
.pf-flyout { display: none; }

/* Schmale Symbolleiste (nur ab 1000 px; darunter gilt das Overlay) */
@media (min-width: 1000px) {
    html.pf-leiste-schmal .pf-nav { width: 64px; padding-left: 6px; padding-right: 6px; }
    /* Kopfbereich folgt der schmalen Leiste: nur das Logo, ohne feste Breite von 320 px */
    html.pf-leiste-schmal .km-brand { width: auto; padding: 0 12px; gap: 0; }
    html.pf-leiste-schmal .km-brand img { height: 44px; }
    html.pf-leiste-schmal .km-brand-trenner, html.pf-leiste-schmal .km-brand-titel { display: none; }
    html.pf-leiste-schmal .pf-nav-text, html.pf-leiste-schmal .pf-sub-liste, html.pf-leiste-schmal .pf-quellen { display: none; }
    html.pf-leiste-schmal .pf-nav-btn, html.pf-leiste-schmal .pf-nav-umschalter { justify-content: center; padding-left: 0; padding-right: 0; }
    html.pf-leiste-schmal .pf-nav-btn { width: 100%; }
    html.pf-leiste-schmal .pf-nav-umschalter { width: 100%; }
    /* Mit .pf-nav-btn spezifischer als „.pf-nav-btn.aktiv .pf-zahl“ (weißer Hintergrund), sonst steht im aktiven Modul weiße Schrift auf Weiß. */
    html.pf-leiste-schmal .pf-nav-btn .pf-zahl { position: absolute; top: 2px; right: 2px; margin: 0; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; font-size: 10px; line-height: 16px; text-align: center; background: var(--km-fokus); color: #fff; }
    html.pf-leiste-schmal .pf-nav-modul:hover > .pf-flyout, html.pf-leiste-schmal .pf-nav-modul:focus-within > .pf-flyout { display: block; }
    html.pf-leiste-schmal .pf-flyout { position: absolute; z-index: 65; left: calc(100% - 2px); top: 0; width: 240px; max-height: calc(100vh - 100px); overflow-y: auto; padding: 8px; background: #fff; border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.18); }
    html.pf-leiste-schmal .pf-flyout-titel { padding: 4px 8px 6px; font-weight: 600; }
    html.pf-leiste-schmal .pf-flyout .pf-sub-btn { padding-left: 8px; }
    html.pf-leiste-schmal .pf-flyout .pf-sub-gruppe { padding-left: 8px; }
}
.pf-flyout-titel { display: none; }
@media (min-width: 1000px) { html.pf-leiste-schmal .pf-flyout-titel { display: block; } }

/* Schmale Bildschirme: Leiste ausgeblendet, per Menüknopf als Overlay */
@media (max-width: 999.98px) {
    .pf-menueknopf { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 44px; height: 44px; margin-left: 8px; border: 0; border-radius: 4px; background: transparent; color: #3f3f3e; cursor: pointer; }
    .pf-menueknopf:hover { background: var(--km-gruen-hell); }
    .pf-nav { position: fixed; z-index: 90; top: 0; left: 0; bottom: 0; width: 280px; max-width: 85vw; box-sizing: border-box; overflow-y: auto; padding: 12px 8px 24px; background: #fff; box-shadow: 4px 0 16px rgba(0,0,0,.2); transform: translateX(-105%); visibility: hidden; transition: transform .18s ease, visibility 0s linear .18s; }
    .pf-nav.pf-nav-offen { transform: none; visibility: visible; transition: transform .18s ease; }
    .pf-nav-hintergrund { display: block; position: fixed; z-index: 85; inset: 0; background: rgba(0,0,0,.4); }
    .pf-nav-umschalter { display: none; }
    .pf-nav-btn, .pf-sub-btn { min-height: 44px; display: flex; align-items: center; }
    .km-main { padding: 12px; }
    .km-header { gap: 8px; }
    .km-brand { width: auto; padding: 0 8px; }
    .km-brand img { height: 40px; }
    .pf-suche { flex: 1 1 120px; min-width: 100px; }
    .pf-benutzer > span:nth-child(2) { display: none; }
    .km-header-rechts { gap: 6px; }
}
@media (max-width: 700px) {
    .km-header { flex-wrap: wrap; height: auto; padding: 6px 8px 10px 0; }
    .km-header-rechts { margin-left: auto; }
    .pf-suche { order: 5; flex: 1 1 100%; max-width: none; }
    .km-brand-trenner, .km-brand-titel, .pf-btn-text { display: none; }
}

/* Reiter in Detailseiten: umbrechen statt scrollen, als Knöpfe tippbar */
.pf-reiter { overflow-x: visible; }
@media (max-width: 999.98px) {
    .pf-reiter { flex-wrap: wrap; overflow-x: visible; }
    .pf-reiter button, .pf-reiter a { min-height: 40px; display: inline-flex; align-items: center; padding: 8px 14px; }
}