/* ═══════════════════════════════════════════════════════════════════════════
   REGULIERER-PORTAL — Profil & Einstellungen 2.0 (27.09.2026, Builder AT) · gehört zu static/profil_fenster.js
   Alles unter .pf2 bzw. #profilOverlay.pf2-an — greift erst, wenn profil_fenster.js das Fenster umgebaut hat.
   Tokens --pf-* für dunkel (Vorlage) und hell; innerhalb des Fensters werden die Portal-Tokens (--bg, --card, --border,
   --text, --text-muted, --accent, --tint-… und --fg-…) auf diese Palette gelegt, damit die Karten der Einhänge-Skripte mitziehen.
   Kontrast (geprüft): grauer Text ≥ 4,5:1 auf allen Flächen, Hauptknopf dunkle Schrift auf hellem Blau (7,8:1).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Tokens ──────────────────────────────────────────────────────────────── */
.pf2 {
  --pf-flaeche: #0d141f; --pf-nav: #0a1019; --pf-feld: #0a1019; --pf-feld-aus: #0f1724; --pf-karte: #111a28; --pf-karte-rand: #1f2d44;
  --pf-rand: #22314a; --pf-linie: #1d2a3f; --pf-zeile: #1a2638; --pf-kopfzeile: #0f1724; --pf-fuss: #0b121c;
  --pf-text: #e6edf6; --pf-text-2: #c7d2e0; --pf-muted: #a7b5c7; --pf-muted-2: #93a3b8; --pf-faint: #6f819a; --pf-platzhalter: #7486a0; --pf-trenner: #4a5b73;
  --pf-akzent: #38bdf8; --pf-akzent-ink: #06202e; --pf-fokus: #7dd3fc; --pf-link: #7dd3fc;
  --pf-knopf: #152238; --pf-knopf-rand: #2b4063; --pf-aktiv: #16243a; --pf-aktiv-text: #f1f6fc; --pf-hover: #142033;
  --pf-schalter-aus: #2a3a52; --pf-knauf-aus: #c7d2e0;
  --pf-ok-bg: #0f2a22; --pf-ok-fg: #6ee7b7; --pf-ok-bd: #1d4a3c; --pf-ok-punkt: #34d399;
  --pf-warn-bg: #2a2110; --pf-warn-fg: #fbbf24; --pf-warn-bd: #4a3a12; --pf-warn-punkt: #fbbf24;
  --pf-off-bg: #151e2c; --pf-off-fg: #93a3b8; --pf-off-bd: #22314a; --pf-off-punkt: #6f819a;
  --pf-fehler-bg: #2a1418; --pf-fehler-fg: #fca5a5; --pf-fehler-bd: #3a2530; --pf-fehler-punkt: #f87171;
  --pf-info-bg: #0f1b2b; --pf-info-fg: #bae6fd; --pf-info-bd: #1f3552;
  --pf-hinweis-bg: #1d1708; --pf-hinweis-bd: #4a3a12; --pf-hinweis-fg: #fde68a;
  --pf-papier: #f7f8fa; --pf-papier-text: #1b2330; --pf-papier-grau: #5b6576; --pf-papier-rand: #d8dee8;
  --pf-schatten: 0 30px 80px rgba(0, 0, 0, .55);
  --pf-schrift: "IBM Plex Sans", Inter, "Segoe UI", system-ui, sans-serif;
  --pf-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
  /* Portal-Tokens im Fenster */
  --bg: var(--pf-feld); --card: var(--pf-karte); --card-hover: var(--pf-hover); --soft: var(--pf-karte);
  --border: var(--pf-rand); --border-strong: var(--pf-knopf-rand);
  --text: var(--pf-text); --text-2: var(--pf-text-2); --text-muted: var(--pf-muted-2); --text-faint: var(--pf-faint);
  --accent: var(--pf-akzent); --accent-ink: var(--pf-link); --accent-fg: var(--pf-akzent-ink); --accent-glow: rgba(56, 189, 248, .22);
  --tint-green: var(--pf-ok-bg); --fg-green: var(--pf-ok-fg); --tint-amber: var(--pf-warn-bg); --fg-amber: var(--pf-warn-fg);
  --tint-gray: var(--pf-off-bg); --fg-gray: var(--pf-off-fg); --tint-red: var(--pf-fehler-bg); --fg-red: var(--pf-fehler-fg);
  --tint-blue: var(--pf-info-bg); --fg-blue: var(--pf-info-fg); --tint-purple: #1e1a33; --fg-purple: #c4b5fd;
  color-scheme: dark;
}
html[data-theme="light"] .pf2, body.light-mode .pf2 {
  --pf-flaeche: #ffffff; --pf-nav: #f4f7fb; --pf-feld: #ffffff; --pf-feld-aus: #f1f5f9; --pf-karte: #f8fafc; --pf-karte-rand: #e2e8f0;
  --pf-rand: #c3cdd9; --pf-linie: #e2e8f0; --pf-zeile: #e9eef4; --pf-kopfzeile: #f1f5f9; --pf-fuss: #f8fafc;
  --pf-text: #0f172a; --pf-text-2: #1e293b; --pf-muted: #475569; --pf-muted-2: #526174; --pf-faint: #5b6b80; --pf-platzhalter: #5b6b80; --pf-trenner: #94a3b8;
  --pf-akzent: #38bdf8; --pf-akzent-ink: #06202e; --pf-fokus: #0284c7; --pf-link: #0369a1;
  --pf-knopf: #ffffff; --pf-knopf-rand: #c3cdd9; --pf-aktiv: #e0f2fe; --pf-aktiv-text: #0c4a6e; --pf-hover: #eef4fa;
  --pf-schalter-aus: #94a3b8; --pf-knauf-aus: #ffffff;
  --pf-ok-bg: #dcfce7; --pf-ok-fg: #166534; --pf-ok-bd: #bbf7d0; --pf-ok-punkt: #16a34a;
  --pf-warn-bg: #fef3c7; --pf-warn-fg: #92400e; --pf-warn-bd: #fde68a; --pf-warn-punkt: #d97706;
  --pf-off-bg: #f1f5f9; --pf-off-fg: #475569; --pf-off-bd: #e2e8f0; --pf-off-punkt: #94a3b8;
  --pf-fehler-bg: #fee2e2; --pf-fehler-fg: #b91c1c; --pf-fehler-bd: #fecaca; --pf-fehler-punkt: #dc2626;
  --pf-info-bg: #e0f2fe; --pf-info-fg: #075985; --pf-info-bd: #bae6fd;
  --pf-hinweis-bg: #fffbeb; --pf-hinweis-bd: #fde68a; --pf-hinweis-fg: #92400e;
  --pf-schatten: 0 30px 80px rgba(15, 23, 42, .22);
  --accent-glow: rgba(2, 132, 199, .16); --tint-purple: #ede9fe; --fg-purple: #5b21b6;
  color-scheme: light;
}
/* B&B-Gain behält seine Markenfarbe (weiße Schrift 4,9:1) */
body.bbgain .pf2 { --pf-akzent: #1b75bb; --pf-akzent-ink: #ffffff; }

/* ── Ebene ───────────────────────────────────────────────────────────────── */
#profilOverlay.pf2-an { background: rgba(3, 6, 11, .62) !important; }
html[data-theme="light"] #profilOverlay.pf2-an, body.light-mode #profilOverlay.pf2-an { background: rgba(15, 23, 42, .45) !important; }
#profilOverlay .pf2-alt { display: none !important; }
html.pf2-offen { overflow: hidden; }
html.pf2-offen #toast { z-index: 10080; }

#profilOverlay > .pf2 {
  position: relative; display: flex; flex-direction: column;
  width: min(1140px, 100%); height: min(736px, calc(100vh - 40px)); height: min(736px, calc(100dvh - 40px));
  background: var(--pf-flaeche); border: 1px solid var(--pf-rand); border-radius: 16px !important; box-shadow: var(--pf-schatten) !important;
  overflow: hidden; font-family: var(--pf-schrift); font-size: 14px; line-height: 1.45; color: var(--pf-text); text-align: left;
  -webkit-font-smoothing: antialiased;
}
.pf2, .pf2 *, .pf2 *::before, .pf2 *::after { box-sizing: border-box; }
.pf2 [hidden] { display: none !important; }
.pf2 :focus-visible { outline: 2px solid var(--pf-fokus); outline-offset: 2px; }
.pf2 a { color: var(--pf-link); }
.pf2 a:hover { text-decoration: underline; }
.pf2-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; margin: -1px; }

/* ── Kopf ───────────────────────────────────────────────────────────────── */
.pf2-kopf { height: 64px; flex-shrink: 0; display: flex; align-items: center; gap: 16px; padding: 0 20px 0 24px; border-bottom: 1px solid var(--pf-linie); }
.pf2-kopf-titel { display: flex; flex-direction: column; gap: 2px; width: 236px; flex-shrink: 0; min-width: 0; }
.pf2-h { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; color: var(--pf-text); }
.pf2-h:focus, .pf2-h:focus-visible { outline: none; }
.pf2-wer { font-size: 12px; color: var(--pf-muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf2-suche { flex: 1 1 auto; max-width: 460px; min-width: 0; display: flex; align-items: center; gap: 10px; height: 38px; margin: 0; padding: 0 12px;
  background: var(--pf-nav); border: 1px solid var(--pf-rand); border-radius: 10px; color: var(--pf-muted-2); cursor: text; }
.pf2-suche:focus-within { outline: 2px solid var(--pf-fokus); outline-offset: 2px; }
.pf2 .pf2-suche input { flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; background: transparent !important; border: 0 !important;
  box-shadow: none !important; color: var(--pf-text) !important; font: inherit; font-size: 14px; outline: none; }
.pf2 .pf2-suche input:focus-visible { outline: none; }
.pf2 .pf2-suche input::placeholder { color: var(--pf-platzhalter); opacity: 1; }
.pf2-kbd { font-family: var(--pf-mono); font-size: 11px; line-height: 1.4; color: var(--pf-muted-2); border: 1px solid var(--pf-rand); border-radius: 6px; padding: 1px 6px; background: transparent; }
.pf2-platz { flex: 1; }
.pf2-zu { width: 38px; height: 38px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 0;
  background: transparent; border: 1px solid var(--pf-rand); border-radius: 10px; color: var(--pf-text-2); cursor: pointer; }
.pf2-zu:hover { background: var(--pf-hover); }
.pf2-banner { display: none; }

/* ── Navigation ─────────────────────────────────────────────────────────── */
.pf2-rumpf { flex: 1; display: flex; min-height: 0; }
.pf2-nav { width: 268px; flex-shrink: 0; display: flex; flex-direction: column; gap: 14px; padding: 14px 12px; overflow-y: auto; overscroll-behavior: contain;
  background: var(--pf-nav); border-right: 1px solid var(--pf-linie); }
.pf2-gruppe { display: flex; flex-direction: column; gap: 2px; }
.pf2-gruppe-titel { padding: 0 10px 4px; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--pf-faint); }
.pf2-gruppe-liste { display: flex; flex-direction: column; gap: 2px; }
.pf2-nav-knopf { width: 100%; min-height: 38px; display: flex; align-items: center; gap: 8px; margin: 0; padding: 9px 10px; text-align: left;
  border: 0; border-radius: 9px; background: transparent; color: var(--pf-text-2); font: inherit; font-size: 14px; line-height: 1.3; cursor: pointer; }
.pf2-nav-knopf:hover { background: var(--pf-hover); }
.pf2-nav-knopf[aria-current="page"] { background: var(--pf-aktiv); box-shadow: inset 0 0 0 1px var(--pf-knopf-rand); color: var(--pf-aktiv-text); font-weight: 600; }
.pf2-nav-text { flex: 1; min-width: 0; }
.pf2-geaendert { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: var(--pf-warn-punkt); }
.pf2-badge-platz { display: inline-flex; flex-shrink: 0; }
.pf2-badge-platz:empty { display: none; }
.pf2-chev { display: none; flex-shrink: 0; color: var(--pf-faint); }
.pf2-keine { margin: 0; padding: 10px; font-size: 13px; line-height: 1.5; color: var(--pf-muted-2); }

/* Marken (Nav, Titel, Chips) */
.pf2-badge, .pf2-chip { display: inline-flex; align-items: center; white-space: nowrap; font-weight: 600; border-radius: 999px; border: 1px solid var(--pf-off-bd);
  background: var(--pf-off-bg); color: var(--pf-off-fg); }
.pf2-badge { font-size: 11px; line-height: 1.35; padding: 2px 8px; }
.pf2-chip { font-size: 12px; line-height: 1.35; padding: 4px 10px; }
.pf2-badge.pf2-ton-ok, .pf2-chip.pf2-ton-ok { background: var(--pf-ok-bg); color: var(--pf-ok-fg); border-color: var(--pf-ok-bd); }
.pf2-badge.pf2-ton-warn, .pf2-chip.pf2-ton-warn { background: var(--pf-warn-bg); color: var(--pf-warn-fg); border-color: var(--pf-warn-bd); }
.pf2-badge.pf2-ton-fehler, .pf2-chip.pf2-ton-fehler { background: var(--pf-fehler-bg); color: var(--pf-fehler-fg); border-color: var(--pf-fehler-bd); }
.pf2-punkt, .pf2-kachel-punkt { border-radius: 50%; flex-shrink: 0; background: var(--pf-off-punkt); }
.pf2-punkt { width: 8px; height: 8px; }
.pf2-punkt.pf2-ton-ok, .pf2-kachel-punkt.pf2-ton-ok { background: var(--pf-ok-punkt); }
.pf2-punkt.pf2-ton-warn, .pf2-kachel-punkt.pf2-ton-warn { background: var(--pf-warn-punkt); }
.pf2-punkt.pf2-ton-fehler, .pf2-kachel-punkt.pf2-ton-fehler { background: var(--pf-fehler-punkt); }

/* ── Bereich ────────────────────────────────────────────────────────────── */
.pf2-haupt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pf2-bkopf { display: flex; flex-direction: column; gap: 6px; padding: 20px 32px 16px; border-bottom: 1px solid var(--pf-linie); }
.pf2-zurueck { display: none; }
.pf2-krumen { font-size: 12px; color: var(--pf-muted-2); }
.pf2-krumen-trenner { color: var(--pf-trenner); margin: 0 2px; }
.pf2-bzeile { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pf2-btitel { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; color: var(--pf-text); }
.pf2-btitel:focus { outline: none; }
.pf2-btitel:focus-visible { outline: none; }   /* Überschrift bekommt den Fokus nur für Screenreader */
.pf2-bbeschr { margin: 0; max-width: 640px; font-size: 14px; line-height: 1.5; color: var(--pf-muted); }
.pf2-inhalt { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 22px 32px 28px; }
.pf2-bereich { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.pf2-bereich > * { max-width: 860px; }
#pf2B-uebersicht > *, #pf2B-kataloge > *, #pf2B-signatur > * { max-width: none; }
.pf2-bereich-hinweis { margin: 0; padding: 12px 14px; font-size: 13px; line-height: 1.5; color: var(--pf-hinweis-fg); background: var(--pf-hinweis-bg);
  border: 1px solid var(--pf-hinweis-bd); border-radius: 12px; }
.pf2-leer { margin: 0; font-size: 13px; color: var(--pf-muted-2); }

/* ── Speicherleiste ─────────────────────────────────────────────────────── */
.pf2-fuss { height: 64px; flex-shrink: 0; display: flex; align-items: center; gap: 12px; padding: 0 32px; border-top: 1px solid var(--pf-linie); background: var(--pf-fuss); }
.pf2-fuss-text { flex: 1; min-width: 0; font-size: 13px; color: var(--pf-muted); }
.pf2-fuss-knoepfe { display: flex; gap: 12px; flex-shrink: 0; }
.pf2-k { height: 40px; padding: 0 14px; margin: 0; border-radius: 10px; font: inherit; font-size: 14px; line-height: 1; white-space: nowrap; cursor: pointer; }
.pf2-k--rand { background: transparent; border: 1px solid var(--pf-knopf-rand); color: var(--pf-text); }
.pf2-k--haupt { padding: 0 18px; background: var(--pf-akzent); border: 0; color: var(--pf-akzent-ink); font-weight: 700; }
.pf2-k:hover:not(:disabled) { filter: brightness(1.08); }
.pf2-k:disabled { opacity: .55; cursor: not-allowed; }

/* ── Eigene Inhalte ─────────────────────────────────────────────────────── */
.pf2-kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.pf2-kachel { width: 100%; display: flex; gap: 12px; align-items: flex-start; margin: 0; padding: 14px 16px; text-align: left;
  background: var(--pf-karte); border: 1px solid var(--pf-karte-rand); border-radius: 12px; color: inherit; font: inherit; cursor: pointer; }
.pf2-kachel:hover { background: var(--pf-hover); }
.pf2-kachel-punkt { width: 10px; height: 10px; margin-top: 5px; }
.pf2-kachel-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pf2-kachel-titel { font-size: 14px; font-weight: 600; color: var(--pf-text); }
.pf2-kachel-satz { font-size: 13px; line-height: 1.45; color: var(--pf-muted); overflow-wrap: anywhere; }
.pf2-kachel-cta { font-size: 12px; font-weight: 600; white-space: nowrap; color: var(--pf-link); }
.pf2-karte { min-width: 0; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 16px; background: var(--pf-karte);
  border: 1px solid var(--pf-karte-rand); border-radius: 12px; }
.pf2-karten-titel { margin: 0; font-size: 15px; font-weight: 600; color: var(--pf-text); }
.pf2-klein { font-size: 13px; color: var(--pf-muted); }
.pf2 .pf2-hinweis-text { margin: 0 !important; font-size: 13px !important; line-height: 1.5 !important; color: var(--pf-muted) !important;
  background: transparent !important; border: 0 !important; padding: 0 !important; }
.pf2-felder2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
#pf2ProfilFelder { max-width: 720px; }
.pf2 .pf2-feld { min-width: 0; display: flex; flex-direction: column; gap: 6px; margin: 0 !important; font-size: 13px; color: var(--pf-muted); }
.pf2 .pf2-feld > label { display: block !important; margin: 0 !important; font-size: 13px !important; color: var(--pf-muted) !important; }
.pf2-raster2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 820px; }
.pf2-knopfzeile { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pf2-karte > button, .pf2-bereich > button { align-self: flex-start; }
.pf2-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pf2 .pf2-block { margin: 0 !important; padding-top: 0 !important; border-top: 0 !important; }
.pf2 .pf2-block.pf2-karte { padding: 16px !important; border: 1px solid var(--pf-karte-rand) !important; }
.pf2 .pf2-alt-titel, .pf2 .pf2-alt-knopf, .pf2 .pf2-versteckt { display: none !important; }
/* Speicherknöpfe der Einhänge-Karten: die Speicherleiste unten löst sie aus (Statuszeilen daneben bleiben sichtbar) */
#profilOverlay .pf2 #rassESpeichern, #profilOverlay .pf2 #rcdSpeichern, #profilOverlay .pf2 #raktEinstSave { display: none !important; }

/* Darstellung */
.pf2-themen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 480px; }
.pf2-thema { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 12px; text-align: left; border-radius: 12px; cursor: pointer;
  font: inherit; color: var(--pf-text); background: var(--pf-karte); border: 2px solid var(--pf-karte-rand); }
.pf2-thema[aria-checked="true"] { background: var(--pf-aktiv); border-color: var(--pf-akzent); }
.pf2-thema-muster { height: 54px; border-radius: 8px; border: 1px solid var(--pf-knopf-rand); }
.pf2-thema-muster--hell { background: #f4f7fb; }
.pf2-thema-muster--dunkel { background: #0d141f; }
.pf2-thema-name { font-size: 14px; font-weight: 600; }
.pf2-thema-hinweis { font-size: 12px; line-height: 1.4; color: var(--pf-muted); }
.pf2-thema-status { min-height: 18px; font-size: 13px; }

/* Mein Profil */
#profilOverlay .pf2-inhalt .pf2-nurlesen { background: var(--pf-feld-aus) !important; border-color: var(--pf-linie) !important; color: var(--pf-muted-2) !important; cursor: default; }
#profilUnternehmenGrid { max-height: none !important; padding: 0 !important; gap: 8px !important; }
#profilOverlay #profilUnternehmenGrid label { min-height: 40px; padding: 8px 12px !important; font-size: 13px !important; color: var(--pf-text);
  background: var(--pf-feld) !important; border: 1px solid var(--pf-rand) !important; border-radius: 10px !important; }

/* KI */
.pf2-ki-aktiv { font-size: 16px; font-weight: 600; color: var(--pf-text); }
.pf2-zahlen { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.pf2-zahl { font-size: 28px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--pf-text); }
.pf2-einheit { margin-right: 18px; font-size: 13px; color: var(--pf-muted); }
#profilOverlay #openaiTokenSection { margin: 0 !important; padding: 0 !important; border: 0 !important; }
#profilOverlay #openaiOwnerNote { background: transparent !important; border: 0 !important; padding: 0 !important; font-size: 13px !important; color: var(--pf-muted) !important; line-height: 1.5; }
#profilOverlay #openaiTokenInputWrap > p, #profilOverlay #openaiTokenInputWrap > label { font-size: 13px !important; color: var(--pf-muted) !important; }
#profilOverlay #openaiTokenInputWrap > div { flex-wrap: wrap; }
#profilOverlay #timelineSettingSection.pf2-karte { margin: 0 !important; padding: 16px !important; border: 1px solid var(--pf-karte-rand) !important; }
#profilOverlay #timelineSettingSection label { gap: 14px !important; }
#profilOverlay #timelineSettingSection label > span { font-size: 13px !important; color: var(--pf-text-2); }

/* Schalter (Timeline, Aktenpflege) */
#profilOverlay .pf2 input[type=checkbox].pf2-schalter, #profilOverlay .pf2 #raktEinst input[type=checkbox] {
  -webkit-appearance: none; appearance: none; position: relative; flex-shrink: 0; width: 46px !important; height: 26px !important; margin: 0 !important;
  border: 0; border-radius: 999px; background: var(--pf-schalter-aus) !important; cursor: pointer; transition: background .15s; }
#profilOverlay .pf2 input[type=checkbox].pf2-schalter::before, #profilOverlay .pf2 #raktEinst input[type=checkbox]::before {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--pf-knauf-aus);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform .15s; }
#profilOverlay .pf2 input[type=checkbox].pf2-schalter:checked, #profilOverlay .pf2 #raktEinst input[type=checkbox]:checked { background: var(--pf-akzent) !important; }
#profilOverlay .pf2 input[type=checkbox].pf2-schalter:checked::before, #profilOverlay .pf2 #raktEinst input[type=checkbox]:checked::before {
  transform: translateX(20px); background: var(--pf-akzent-ink); }
#profilOverlay .pf2 input[type=checkbox].pf2-schalter:disabled, #profilOverlay .pf2 #raktEinst input[type=checkbox]:disabled { opacity: .5; cursor: not-allowed; }
#profilOverlay .pf2 #raktEinst label { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px 14px !important; margin: 0 0 10px !important;
  padding: 14px 16px; font-size: 14px !important; color: var(--pf-text); background: var(--pf-karte); border: 1px solid var(--pf-karte-rand); border-radius: 12px; }
#profilOverlay .pf2 #raktEinst > p { margin: 0 0 12px !important; font-size: 13px !important; color: var(--pf-muted) !important; line-height: 1.5; }
#profilOverlay .pf2 #raktEinst > div:first-child { display: none; }

/* E-Mail-Versand, Lexoffice */
#pf2SmtpFelder { margin: 14px 0; max-width: 760px; }
#profilOverlay .pf2 #lexofficeKeyStatus { font-size: 13px !important; }
#profilOverlay .pf2-knopfzeile, #profilOverlay .pf2 [id="smtpTestStatus"] { font-size: 13px; }

/* Zweitkarten der Einhänge-Skripte: erste Überschrift doppelt → aus (Bereichstitel steht oben) */
#profilOverlay .pf2 #zwhKarte > div:first-child, #profilOverlay .pf2 #rrkEinst > .rrk-h:first-child { display: none; }
#profilOverlay .pf2 #rpkProfil > .rpk-h:first-child > span { display: none; }
#profilOverlay .pf2 #rpkProfil > .rpk-h:first-child { justify-content: flex-end; margin: 0 0 10px; }
#profilOverlay .pf2 #raktEinst, #profilOverlay .pf2 #rrkEinst, #profilOverlay .pf2 #zwhKarte, #profilOverlay .pf2 #rpkProfil {
  margin: 0 !important; padding: 0 !important; border: 0 !important; }

/* ── Angleichen der Bausteine (Knöpfe, Felder, Marken, Tabellen) im Inhaltsbereich ── */
#profilOverlay .pf2-inhalt :where(.pf2-knopf, .rass-btn, .rrk-btn, .rpk-btn, .zwh-btn, #raktEinstSave) {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; height: auto !important; margin: 0;
  padding: 6px 13px !important; border-radius: 9px !important; background: var(--pf-knopf) !important; border: 1px solid var(--pf-knopf-rand) !important;
  color: var(--pf-text) !important; font-family: inherit !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.25 !important;
  text-align: center; text-decoration: none; white-space: normal; cursor: pointer; }
#profilOverlay .pf2-inhalt :where(.pf2-knopf, .rass-btn, .rrk-btn, .rpk-btn, .zwh-btn):hover:not(:disabled) { filter: brightness(1.08); }
#profilOverlay .pf2-inhalt :where(.pf2-knopf, .rass-btn, .rrk-btn, .rpk-btn, .zwh-btn):is(.primary, .prim, .pf2-knopf--haupt) {
  background: var(--pf-akzent) !important; border-color: transparent !important; color: var(--pf-akzent-ink) !important; font-weight: 700 !important; }
#profilOverlay .pf2-inhalt :where(.pf2-knopf, .rass-btn, .rrk-btn, .rpk-btn, .zwh-btn):is(.danger, .rot, .pf2-knopf--gefahr) {
  background: transparent !important; border-color: var(--pf-fehler-bd) !important; color: var(--pf-fehler-fg) !important; }
#profilOverlay .pf2-inhalt :where(.pf2-knopf, .rass-btn, .rrk-btn, .rpk-btn, .zwh-btn):is(.warn, .amber) {
  background: transparent !important; border-color: var(--pf-warn-bd) !important; color: var(--pf-warn-fg) !important; }
#profilOverlay .pf2-inhalt :where(.pf2-knopf, .rass-btn, .rrk-btn, .rpk-btn, .zwh-btn):is(.gruen) {
  background: transparent !important; border-color: var(--pf-ok-bd) !important; color: var(--pf-ok-fg) !important; }
#profilOverlay .pf2-inhalt :where(.pf2-knopf, .rass-btn, .rrk-btn, .rpk-btn, .zwh-btn):is(.ghost) { background: transparent !important; }
#profilOverlay .pf2-inhalt :where(.rass-btn, .rrk-btn):is(.sm, .xs) { min-height: 32px; padding: 4px 10px !important; font-size: 12px !important; }
#profilOverlay .pf2-inhalt :where(.pf2-knopf, .rass-btn, .rrk-btn, .rpk-btn, .zwh-btn):disabled { opacity: .55; cursor: not-allowed; }

#profilOverlay .pf2-inhalt :where(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):not([type=range]):not([type=button]):not([type=submit]), select, textarea) {
  min-height: 40px; padding: 8px 12px !important; background: var(--pf-feld) !important; border: 1px solid var(--pf-rand) !important; border-radius: 10px !important;
  color: var(--pf-text) !important; font-family: inherit !important; font-size: 14px !important; line-height: 1.4; box-shadow: none; }
#profilOverlay .pf2-inhalt :where(textarea) { min-height: 96px; line-height: 1.55; }
#profilOverlay .pf2-inhalt :where(input, select, textarea)::placeholder { color: var(--pf-platzhalter) !important; opacity: 1; }
#profilOverlay .pf2-inhalt :where(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]), select, textarea):focus {
  outline: none; border-color: var(--pf-akzent) !important; box-shadow: 0 0 0 3px var(--accent-glow) !important; }
#profilOverlay .pf2-inhalt :where(input[type=checkbox], input[type=radio]) { accent-color: var(--pf-akzent); width: 18px; height: 18px; }
#profilOverlay .pf2-inhalt :where(input[type=file]) { font-size: 13px; color: var(--pf-muted); max-width: 100%; }
#profilOverlay .pf2-inhalt input[type=file]::file-selector-button { margin-right: 10px; padding: 7px 12px; border-radius: 9px; border: 1px solid var(--pf-knopf-rand);
  background: var(--pf-knopf); color: var(--pf-text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }

#profilOverlay .pf2-inhalt :where(.rass-chip, .rrk-chip, .zwh-chip, .rpk-chip) {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px !important; border-radius: 999px !important; border: 1px solid var(--pf-off-bd) !important;
  background: var(--pf-off-bg) !important; color: var(--pf-off-fg) !important; font-size: 11.5px !important; font-weight: 600 !important; line-height: 1.4;
  white-space: nowrap; vertical-align: middle; }
#profilOverlay .pf2-inhalt :where(.rass-chip, .rrk-chip, .rpk-chip):is(.green, .gruen) { background: var(--pf-ok-bg) !important; color: var(--pf-ok-fg) !important; border-color: var(--pf-ok-bd) !important; }
#profilOverlay .pf2-inhalt :where(.rass-chip, .rrk-chip, .rpk-chip):is(.amber, .gelb) { background: var(--pf-warn-bg) !important; color: var(--pf-warn-fg) !important; border-color: var(--pf-warn-bd) !important; }
#profilOverlay .pf2-inhalt :where(.rass-chip, .rrk-chip, .rpk-chip):is(.red, .rot) { background: var(--pf-fehler-bg) !important; color: var(--pf-fehler-fg) !important; border-color: var(--pf-fehler-bd) !important; }
#profilOverlay .pf2-inhalt :where(.rass-chip, .rrk-chip, .rpk-chip):is(.blue, .blau, .lila, .purple) { background: var(--pf-info-bg) !important; color: var(--pf-info-fg) !important; border-color: var(--pf-info-bd) !important; }
#profilOverlay .pf2-inhalt .zwh-chip[style*="f59e0b"] { background: var(--pf-warn-bg) !important; color: var(--pf-warn-fg) !important; border-color: var(--pf-warn-bd) !important; }

#profilOverlay .pf2-inhalt :where(.rass-hint, .rrk-hinweis, .zwh-hinweis, .rpk-klein, .rakt-hinweis, .rmc-muted, .rrk-leer) {
  font-size: 13px !important; line-height: 1.5; color: var(--pf-muted) !important; }
#profilOverlay .pf2-inhalt :where(.rmc-warn, .rass-warn) { color: var(--pf-warn-fg) !important; }
#profilOverlay .pf2-inhalt :where(.rass-err) { color: var(--pf-fehler-fg) !important; }
#profilOverlay .pf2-inhalt :where(.rass-ok) { color: var(--pf-ok-fg) !important; }
#profilOverlay .pf2-inhalt :where(.rass-lbl) { margin: 12px 0 6px !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0 !important;
  text-transform: none !important; color: var(--pf-muted) !important; }
#profilOverlay .pf2-inhalt :where(.rrk-h) { font-size: 11px !important; font-weight: 600 !important; letter-spacing: .08em !important; color: var(--pf-muted-2) !important; }
#profilOverlay .pf2-inhalt :where(.rass-card, .rmc-karte, .rcd-card) { background: var(--pf-karte) !important; border: 1px solid var(--pf-karte-rand) !important;
  border-radius: 12px !important; padding: 16px !important; color: var(--pf-text); }
#profilOverlay .pf2-inhalt :where(.rmc-firma) { border-color: var(--pf-ok-bd) !important; }
#profilOverlay .pf2-inhalt :where(.rmc-box) { border-top: 0 !important; padding-top: 0 !important; }
#profilOverlay .pf2-inhalt :where(.rcd-kopf h3) { font-size: 15px; font-weight: 600; }
#profilOverlay .pf2-inhalt :where(code, .zwh-code) { font-family: var(--pf-mono) !important; }
#profilOverlay .pf2-inhalt :where(.zwh-code) { padding: 9px 10px !important; font-size: 12px !important; color: var(--pf-text); background: var(--pf-feld) !important;
  border: 1px solid var(--pf-rand) !important; border-radius: 8px !important; overflow-wrap: anywhere; }
#profilOverlay .pf2-inhalt :where(#zwhKarte .zwh-zeile) { gap: 8px !important; margin: 8px 0 !important; }
#profilOverlay .pf2-inhalt :where(details) { margin: 8px 0; padding: 0 14px; background: var(--pf-karte); border: 1px solid var(--pf-karte-rand); border-radius: 12px; }
#profilOverlay .pf2-inhalt :where(summary) { padding: 12px 0; font-size: 13px; font-weight: 600; color: var(--pf-text); cursor: pointer; }
#profilOverlay .pf2-inhalt :where(details[open] > summary) { border-bottom: 1px solid var(--pf-zeile); margin-bottom: 10px; }

#profilOverlay .pf2-inhalt :where(.rrk-tab, .rpk-tab, #zwhKarte table) { width: 100%; margin: 6px 0; border-collapse: separate !important; border-spacing: 0;
  font-size: 13px !important; border: 1px solid var(--pf-karte-rand); border-radius: 12px; overflow: hidden; }
#profilOverlay .pf2-inhalt :where(.rrk-tab, .rpk-tab, #zwhKarte table) :where(th) { padding: 10px 12px !important; text-align: left; font-size: 12px !important;
  font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--pf-muted-2) !important; background: var(--pf-kopfzeile);
  border-bottom: 1px solid var(--pf-zeile) !important; }
#profilOverlay .pf2-inhalt :where(.rrk-tab, .rpk-tab, #zwhKarte table) :where(td) { padding: 10px 12px !important; vertical-align: middle;
  border-bottom: 1px solid var(--pf-zeile) !important; color: var(--pf-text); }
#profilOverlay .pf2-inhalt :where(.rrk-tab, .rpk-tab, #zwhKarte table) :where(tr:last-child > td) { border-bottom: 0 !important; }
#profilOverlay .pf2-inhalt :where(.rpk-tab) :where(th.r, td.r) { text-align: right; }

/* ── Logo & Signatur (Aufteilung aus regulierung_assistent.js, nur mit profilBereiche) ── */
.rass-pf2-sig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.rass-pf2-links { min-width: 0; }
.rass-pf2-rechts { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pf2 .rass-pf2-papier { display: flex; flex-direction: column; gap: 14px; min-height: 240px; padding: 22px 24px; border-radius: 12px;
  background: var(--pf-papier); color: var(--pf-papier-text); box-shadow: inset 0 0 0 1px var(--pf-papier-rand); }
.pf2 .rass-pf2-papier-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pf2 .rass-pf2-absender { font-size: 11px; line-height: 1.5; color: var(--pf-papier-grau); }
.pf2 .rass-pf2-papier img { max-width: 120px; max-height: 56px; object-fit: contain; }
.pf2 .rass-pf2-linien { display: flex; flex-direction: column; gap: 8px; }
.pf2 .rass-pf2-linien i { display: block; height: 8px; border-radius: 4px; background: #e3e7ee; }
#profilOverlay .pf2 .rass-pf2-papier .rass-sig { margin: 0; padding: 0 !important; background: transparent !important; border: 0 !important;
  color: var(--pf-papier-text) !important; font-size: 12.5px !important; line-height: 1.6; white-space: pre-line; }
.pf2 .rass-pf2-hinweis { margin: 0; }
#profilOverlay .pf2 #regPostEinstSection { margin: 0 !important; padding: 0 !important; border: 0 !important; display: flex; flex-direction: column; gap: 14px; }

/* ── Schmale Fenster (720–959 px) ───────────────────────────────────────── */
@media (min-width: 720px) and (max-width: 959.98px) {
  .pf2-kopf-titel { width: auto; }
  .pf2-nav { width: 220px; }
  .pf2-bkopf, .pf2-inhalt { padding-left: 24px; padding-right: 24px; }
  .pf2-fuss { padding: 0 24px; }
  .pf2-kacheln, .rass-pf2-sig { grid-template-columns: 1fr; }
}

/* ── Handy (< 720 px): Liste mit Gruppen → Unterseite mit Zurück ─────────── */
@media (max-width: 719.98px) {
  #profilOverlay.pf2-an { padding: 0 !important; align-items: stretch !important; justify-content: stretch !important; }
  #profilOverlay > .pf2 { width: 100%; height: 100%; max-height: none; border: 0; border-radius: 0 !important; box-shadow: none !important; }
  .pf2-kopf { height: auto; flex-wrap: wrap; gap: 12px 10px; padding: calc(18px + env(safe-area-inset-top, 0px)) 16px 12px; }
  .pf2-kopf-titel { width: auto; flex: 1; }
  .pf2-h { font-size: 22px; }
  .pf2-wer, .pf2-platz, .pf2-kbd { display: none; }
  .pf2-zu { width: 44px; height: 44px; border-radius: 12px; }
  .pf2-suche { order: 3; flex: 1 1 100%; max-width: none; height: 44px; border-radius: 12px; }
  .pf2 .pf2-suche input { font-size: 16px; }
  .pf2-banner { display: flex; align-items: center; gap: 10px; min-height: 44px; margin: 12px 12px 0; padding: 12px; text-align: left; cursor: pointer;
    font: inherit; font-size: 14px; color: var(--pf-text); background: var(--pf-karte); border: 1px solid var(--pf-karte-rand); border-radius: 12px; }
  .pf2-banner .pf2-punkt { width: 10px; height: 10px; background: var(--pf-ok-punkt); }
  .pf2-banner--warn { color: var(--pf-hinweis-fg); background: var(--pf-hinweis-bg); border-color: var(--pf-hinweis-bd); }
  .pf2-banner--warn .pf2-punkt { background: var(--pf-warn-punkt); }
  .pf2-banner-text { flex: 1; }
  .pf2-banner-cta { font-size: 13px; font-weight: 600; }
  .pf2-rumpf { flex-direction: column; overflow: hidden; }
  .pf2-nav { flex: 1; width: auto; padding: 8px 12px calc(20px + env(safe-area-inset-bottom, 0px)); background: var(--pf-flaeche); border-right: 0; }
  .pf2-gruppe[data-allgemein] { display: none; }
  .pf2-gruppe-titel { padding: 8px 6px 6px; }
  .pf2-gruppe-liste { gap: 0; overflow: hidden; background: var(--pf-karte); border: 1px solid var(--pf-karte-rand); border-radius: 14px; }
  .pf2-nav-knopf { min-height: 52px; gap: 10px; padding: 0 14px; border-radius: 0; font-size: 15px; color: var(--pf-text); border-bottom: 1px solid var(--pf-zeile); }
  .pf2-gruppe-liste .pf2-nav-knopf:last-child { border-bottom: 0; }
  .pf2-nav-knopf[aria-current="page"] { background: transparent; box-shadow: none; color: var(--pf-text); font-weight: 400; }
  .pf2-nav-knopf:focus-visible { outline-offset: -2px; }
  .pf2-badge { font-size: 12px; padding: 3px 9px; }
  .pf2-chev { display: block; }
  .pf2-haupt { display: none; }
  .pf2--detail .pf2-kopf, .pf2--detail .pf2-banner, .pf2--detail .pf2-nav { display: none !important; }
  .pf2--detail .pf2-haupt { display: flex; flex: 1; min-height: 0; }
  .pf2-bkopf { gap: 8px; padding: calc(12px + env(safe-area-inset-top, 0px)) 12px 14px; }
  .pf2-zurueck { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; height: 44px; margin: 0; padding: 0 8px 0 0;
    background: transparent; border: 0; color: var(--pf-link); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
  .pf2-krumen, .pf2-bzeile, .pf2-bbeschr { padding: 0 4px; }
  .pf2-krumen-start { display: none; }
  .pf2-inhalt { padding: 14px 12px 20px; }
  .pf2-bereich > * { max-width: none; }
  .pf2-fuss { height: auto; flex-wrap: wrap; gap: 8px 12px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); }
  .pf2-fuss-text { flex: 1 1 calc(100% - 24px); }
  .pf2-fuss-knoepfe { flex: 1 1 100%; }
  .pf2-fuss-knoepfe .pf2-k { flex: 1; height: 44px; white-space: normal; line-height: 1.2; }
  .pf2-fuss--ohne .pf2-fuss-knoepfe { display: none; }
  .pf2-kacheln, .pf2-felder2, .pf2-raster2, .pf2-themen, .rass-pf2-sig { grid-template-columns: 1fr; }
  /* Tippflächen ≥ 44 px, Schrift ≥ 16 px in Feldern (kein Zoom auf dem iPhone) */
  #profilOverlay .pf2-inhalt :where(.pf2-knopf, .rass-btn, .rrk-btn, .rpk-btn, .zwh-btn, .pf2-kachel, .pf2-thema, select,
    input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file])) { min-height: 44px !important; }
  #profilOverlay .pf2-inhalt :where(input, select, textarea) { font-size: 16px !important; }
  #profilOverlay .pf2-inhalt :where(summary) { min-height: 44px; }
  #profilOverlay .pf2-inhalt :where(label:has(> input[type=checkbox])) { min-height: 44px; }
  /* Tabellen als gestapelte Zeilen, kein seitliches Scrollen */
  #profilOverlay .pf2-inhalt :where(.rrk-tab, .rpk-tab, #zwhKarte table),
  #profilOverlay .pf2-inhalt :where(.rrk-tab, .rpk-tab, #zwhKarte table) :where(tbody, tr, td) { display: block; width: 100%; }
  #profilOverlay .pf2-inhalt :where(.rrk-tab, .rpk-tab, #zwhKarte table) :where(tr:has(> th)) { display: none; }
  #profilOverlay .pf2-inhalt :where(.rrk-tab, .rpk-tab, #zwhKarte table) :where(tr) { padding: 8px 0; border-bottom: 1px solid var(--pf-zeile); }
  #profilOverlay .pf2-inhalt :where(.rrk-tab, .rpk-tab, #zwhKarte table) :where(tr:last-child) { border-bottom: 0; }
  #profilOverlay .pf2-inhalt :where(.rrk-tab, .rpk-tab, #zwhKarte table) :where(td) { padding: 3px 12px !important; border: 0 !important; text-align: left !important; }
  #profilOverlay .pf2-inhalt :where(.rrk-tab, .rpk-tab, #zwhKarte table) td[data-pf2-label]::before { content: attr(data-pf2-label) ": "; font-size: 12px;
    color: var(--pf-muted-2); text-transform: none; }
  #profilOverlay .pf2-inhalt :where(code, .zwh-code, .rcd-vw, .rmc-zeilen, td) { overflow-wrap: anywhere; word-break: break-word; }
  #profilOverlay .pf2-inhalt :where(#zwhKarte .zwh-zeile > span[style*="width:110px"]) { width: 100% !important; }
  #profilOverlay .pf2-inhalt :where(.zwh-code) { min-width: 0 !important; flex: 1 1 100% !important; }
}

@media (prefers-reduced-motion: reduce) {
  #profilOverlay .pf2 input[type=checkbox].pf2-schalter, #profilOverlay .pf2 input[type=checkbox].pf2-schalter::before,
  #profilOverlay .pf2 #raktEinst input[type=checkbox], #profilOverlay .pf2 #raktEinst input[type=checkbox]::before { transition: none; }
}
