/* Bereich „Privat“ (bg/013, js/views/privat.js): drei Karten – Meine Post, Platz für die private App, Notfall-Zugang.
   Farben nur über die Variablen aus app.css (hell und dunkel, jede Marke). */
.privat-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; align-items: stretch; }
.privat-karte { display: flex; flex-direction: column; gap: 12px; }
.privat-karte .pk-kopf { display: flex; align-items: center; gap: 12px; }
.privat-karte .pk-kopf h2 { margin: 0; font-size: 17px; }
.privat-karte .pk-zeichen { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; flex: none;
  background: var(--akzent-hg); color: var(--akzent); border: 1px solid var(--linie-stark); }
.privat-karte .pk-text { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.5; flex: 1; }
.privat-karte > .knopf { align-self: flex-start; }
/* Platzhalter der privaten App: gestrichelt, damit er als „noch leer“ erkennbar ist */
.privat-karte.pk-app { border: 1px dashed var(--linie-stark); background: transparent; box-shadow: none; }
.privat-karte.pk-app .pk-zeichen { background: transparent; border-style: dashed; }
.privat-karte .pk-marke { align-self: flex-start; font-size: 12px; font-weight: 600; letter-spacing: .04em; padding: 4px 10px; border-radius: 999px;
  background: var(--grau-hg); color: var(--grau-text); }
.privat-karte.warnung { border-color: var(--orange); }
.privat-karte.warnung .pk-zeichen { background: var(--orange-hg); color: var(--orange-text); }