/* Seite „Postfach & Kalender“ (tabs/postfach.js). Eigene Hülle: tabs/aufnahme-assistent.js entfernt jede .aa-seite, sobald die
   Adresse nicht seine ist. Farben über die Variablen der Oberfläche; die Farben im Microsoft-Knopf sind Microsofts Vorgabe. */
.pf-seite{--pf-akzent:var(--crm-accent,#59710a);--pf-linie:var(--crm-line,#e1e4e8);--pf-leise:var(--crm-quiet,#616971);--pf-flaeche:var(--crm-surface,#fff);max-width:1040px;padding-bottom:96px;animation:vt-ein .22s ease}
.pf-inhalt{display:flex;flex-direction:column;gap:28px}
.pf-seite h2{font-size:1.0625rem;font-weight:600;letter-spacing:-.005em;margin:0 0 14px}
.pf-leer{color:var(--pf-leise);margin:0}

/* Bühne: der eine Schritt, um den es geht */
.pf-buehne{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:40px;align-items:center;padding:40px 44px;border:1px solid var(--pf-linie);border-radius:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--pf-akzent) 7%,var(--pf-flaeche)) 0%,var(--pf-flaeche) 62%)}
.pf-marke{display:inline-block;margin-bottom:14px;padding:4px 11px;border-radius:999px;background:color-mix(in srgb,var(--pf-akzent) 12%,transparent);color:var(--pf-akzent);font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.pf-buehne h2{font-size:1.75rem;line-height:1.2;font-weight:700;letter-spacing:-.02em;margin:0 0 12px}
.pf-buehne-text p{margin:0 0 26px;max-width:46ch;font-size:1.0625rem;line-height:1.55;color:var(--pf-leise)}

/* Anmeldeknopf nach Microsofts Vorgabe: weiß, grauer Rand, Zeichen links */
.pf-ms{display:inline-flex;align-items:center;gap:12px;height:46px;padding:0 18px 0 14px;border:1px solid #8c8c8c;border-radius:6px;background:#fff;color:#3b3b3b;font:600 .9375rem/1 "Segoe UI",system-ui,-apple-system,sans-serif;cursor:pointer;transition:background .15s ease,box-shadow .15s ease,transform .1s ease;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.pf-ms:hover{background:#f6f6f6;box-shadow:0 2px 8px rgba(0,0,0,.12)}
.pf-ms:active{transform:translateY(1px);box-shadow:none}
.pf-ms:focus-visible{outline:2px solid var(--pf-akzent);outline-offset:3px}
.pf-ms[disabled]{opacity:.7;cursor:progress}
.pf-ms-logo{flex:none}

.pf-recht{margin:14px 0 0;max-width:52ch;font-size:.8125rem;line-height:1.5;color:var(--pf-leise)}
.pf-buehne-text .pf-recht{margin-bottom:0;font-size:.8125rem}
.pf-recht a{font-weight:600}

/* Drei Schritte */
.pf-schritte{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0}
.pf-schritte li{position:relative;display:flex;gap:14px;padding-bottom:22px}
.pf-schritte li:last-child{padding-bottom:0}
.pf-schritte li:not(:last-child)::before{content:"";position:absolute;left:15px;top:34px;bottom:2px;width:2px;border-radius:2px;background:color-mix(in srgb,var(--pf-akzent) 22%,transparent)}
.pf-schritte b{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--pf-flaeche);border:2px solid var(--pf-akzent);color:var(--pf-akzent);font-size:.875rem;font-weight:700}
.pf-schritte span{display:flex;flex-direction:column;gap:2px;padding-top:4px;font-size:.875rem;line-height:1.45;color:var(--pf-leise)}
.pf-schritte strong{font-size:.9375rem;color:var(--bs-body-color,#212529)}

/* Nutzen */
.pf-nutzen{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pf-nutzen li{padding:20px;border:1px solid var(--pf-linie);border-radius:14px;background:var(--pf-flaeche)}
.pf-nutzen-icon{display:grid;place-items:center;width:42px;height:42px;margin-bottom:14px;border-radius:11px;background:color-mix(in srgb,var(--pf-akzent) 11%,transparent);color:var(--pf-akzent)}
.pf-nutzen strong{display:block;margin-bottom:4px;font-size:.9375rem}
.pf-nutzen p{margin:0;font-size:.875rem;line-height:1.5;color:var(--pf-leise)}

/* Gut zu wissen */
.pf-wissen{padding:22px 24px;border-radius:14px;background:color-mix(in srgb,var(--pf-leise) 7%,transparent)}
.pf-wissen h2{font-size:.8125rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--pf-leise);margin:0 0 14px}
.pf-wissen ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 32px}
.pf-wissen li{display:flex;gap:10px;font-size:.875rem;line-height:1.5;color:var(--pf-leise)}
.pf-wissen li svg{flex:none;margin-top:2px}
.pf-wissen li strong{color:var(--bs-body-color,#212529);font-weight:600}
.pf-wissen a{display:inline-block;margin-top:14px;font-size:.875rem;font-weight:600}

/* Verbundenes Postfach */
.pf-konten{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.pf-konto{border:1px solid var(--pf-linie);border-radius:14px;background:var(--pf-flaeche);overflow:hidden}
.pf-konto-kopf{display:flex;align-items:center;gap:14px;padding:18px 20px}
.pf-avatar{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:color-mix(in srgb,var(--pf-akzent) 13%,transparent);color:var(--pf-akzent);font-weight:700;font-size:1.0625rem}
.pf-konto-wer{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.pf-konto-wer strong{font-size:1rem;overflow-wrap:anywhere}
.pf-konto-wer span{font-size:.8125rem;color:var(--pf-leise)}
.pf-trennen{flex:none;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--pf-linie);border-radius:8px;background:transparent;color:var(--pf-leise);font-size:.8125rem;font-weight:600;cursor:pointer;transition:color .15s ease,border-color .15s ease,background .15s ease}
.pf-trennen:hover{color:#b42318;border-color:#f0b4ae;background:#fef3f2}
.pf-trennen:focus-visible{outline:2px solid var(--pf-akzent);outline-offset:2px}
.pf-zeilen{list-style:none;margin:0;padding:0;border-top:1px solid var(--pf-linie)}
.pf-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;padding:13px 20px;font-size:.875rem}
.pf-zeile+.pf-zeile{border-top:1px solid var(--pf-linie)}
.pf-zeile-icon{display:grid;color:var(--pf-leise)}
.pf-zeile-name{font-weight:600;min-width:84px}
.pf-zeile-stand{display:inline-flex;align-items:center;gap:8px}
.pf-zeile-stand i{width:9px;height:9px;border-radius:50%;background:#9ca3af}
.pf-zeile[data-art=ok] .pf-zeile-stand i{background:#16a34a;box-shadow:0 0 0 3px rgba(22,163,74,.16)}
.pf-zeile[data-art=wartet] .pf-zeile-stand i{background:#d97706;animation:pf-puls 1.4s ease-in-out infinite}
.pf-zeile[data-art=fehler] .pf-zeile-stand i{background:#dc2626}
.pf-zeile-zeit{margin-left:auto;font-size:.8125rem;color:var(--pf-leise)}
.pf-konto-stoerung{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding:16px 20px;border-top:1px solid var(--pf-linie);background:#fffaeb}
.pf-konto-stoerung p{margin:0;font-size:.875rem;color:#93370d}
@keyframes pf-puls{0%,100%{box-shadow:0 0 0 0 rgba(217,119,6,.45)}50%{box-shadow:0 0 0 6px rgba(217,119,6,0)}}

/* Meldungen */
.pf-meldung{display:flex;gap:14px;padding:16px 20px;border-radius:14px;border:1px solid #f0b4ae;background:#fef3f2;color:#7a271a}
.pf-meldung[data-art=erfolg]{border-color:#a6e3bd;background:#ecfdf3;color:#085d3a}
.pf-meldung-icon{flex:none;margin-top:1px}
.pf-meldung strong{display:block;font-size:.9375rem}
.pf-meldung p{margin:3px 0 0;max-width:78ch;font-size:.875rem;line-height:1.5}
.pf-meldung .btn{margin-top:10px}

/* Dunkel: die Akzentfarbe der Oberfläche ist für Text zu dunkel – heller Ton wie in den übrigen Erweiterungen. */
[data-bs-theme=dark] .pf-seite{--pf-akzent:#a4d013}
[data-bs-theme=dark] .pf-ms{background:#2f2f2f;border-color:#2f2f2f;color:#fff}
[data-bs-theme=dark] .pf-ms:hover{background:#3a3a3a}
[data-bs-theme=dark] .pf-meldung{background:#3b1d1d;border-color:#6b2a2a;color:#f6c1c1}
[data-bs-theme=dark] .pf-meldung[data-art=erfolg]{background:#16301f;border-color:#2c5a3c;color:#bfe8cd}
[data-bs-theme=dark] .pf-konto-stoerung{background:#33290f}
[data-bs-theme=dark] .pf-konto-stoerung p{color:#f5d38a}
[data-bs-theme=dark] .pf-trennen:hover{color:#f6c1c1;border-color:#6b2a2a;background:#3b1d1d}

@media (max-width:900px){
  .pf-buehne{grid-template-columns:1fr;gap:28px;padding:28px 22px}
  .pf-buehne h2{font-size:1.5rem}
  .pf-nutzen,.pf-wissen ul{grid-template-columns:1fr}
  .pf-ms{width:100%;justify-content:center}
  .pf-zeile-zeit{margin-left:0;flex-basis:100%;padding-left:30px}
  .pf-konto-kopf{flex-wrap:wrap}
}
@media (prefers-reduced-motion:reduce){.pf-seite,.pf-zeile[data-art=wartet] .pf-zeile-stand i{animation:none}.pf-ms,.pf-trennen{transition:none}}