/* Stil des Portals.
 *
 * GRUNDSATZ
 *
 * Farben, Schriften und Symbole stammen aus den Original-Stilvorlagen; die
 * werden unverändert eingebunden (siehe index.html). Hier steht nur, was
 * dort fehlt: der Aufbau unserer eigenen Bauteile.
 *
 * Die Masse sind am laufenden Original gemessen:
 *   Seitenleiste 288 px, Kopfzeile 64 px, Inhaltsrand 40 px.
 */

:root {
  --p-seitenleiste: 288px;
  --p-kopfzeile: 64px;
  --p-rand: 40px;

  /* Aus dem Original übernommen -- gleiche Namen wie dort, damit ein Blick
     in die Originalvorlage weiterhin trägt. */
  --p-grund: var(--blue-sky, #F4F6FD);
  --p-flaeche: #ffffff;
  --p-linie: var(--grey-mouse, #E0E0E0);
  --p-linie-leicht: var(--grey-rabbit, #F1F1F1);
  --p-schrift: var(--grey-orca, #333333);
  --p-gedaempft: var(--grey-elephant, #666666);
  --p-blass: var(--grey-shark, #9F9F9F);
  --p-akzent: var(--blue-500, #0098ff);
  --p-akzent-leicht: var(--blue-50, #e0f3ff);
  --p-gut: var(--green-500, #3ebf4d);
  --p-warnung: var(--orange-500, #ff8500);
  --p-gefahr: var(--red-500, #fb472e);
  --p-schatten: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .1);
  --p-schatten-hoch: 0 8px 24px rgba(16, 24, 40, .12);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Suisse Intl', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: var(--p-schrift);
  background: var(--p-grund);
  -webkit-font-smoothing: antialiased;
}

/* ------------------------------------------------------------- Rahmen -- */

.p-rahmen { display: flex; min-height: 100vh; }
.p-spalte  { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* Die Seitenleiste trägt die Farben der Verwaltungskonsole, die dieses
   Portal ablöst -- am Bildschirmabzug gemessen, nicht geschätzt:
     Grund rgb(41,46,61), aktiver Punkt rgb(62,67,91),
     Schrift rgb(242,244,247), Gruppentitel #85A2B6 in 12 px. */
.p-seitenleiste {
  width: var(--p-seitenleiste);
  flex: 0 0 var(--p-seitenleiste);
  background: rgb(41, 46, 61);
  border-right: none;
  padding: 0 12px 24px;
  overflow-y: auto;
  /* Bleibt beim Blättern stehen und reicht immer bis unten -- «height:100vh»
     allein liess bei langen Seiten einen weissen Streifen entstehen, weil
     die Leiste kürzer war als der Inhalt daneben. */
  position: sticky;
  top: 0;
  height: 100vh;
  align-self: flex-start;
}

.p-marke {
  display: flex; align-items: center; gap: 10px;
  height: var(--p-kopfzeile);
  padding: 0 8px;
  text-decoration: none; color: inherit;
}
.p-marke-zeichen {
  width: 32px; height: 32px; flex: 0 0 32px;
  background: #11302A;
  position: relative;
}
/* Zwei Balken und ein Riegel -- dasselbe Motiv wie im Wortzeichen. */
.p-marke-zeichen::before,
.p-marke-zeichen::after {
  content: ''; position: absolute; top: 7px; width: 4px; height: 18px; background: #fff;
}
.p-marke-zeichen::before { left: 8px; }
.p-marke-zeichen::after  { right: 8px; }
.p-marke-text { display: flex; gap: 5px; font-size: 15px; }
.p-marke-text { color: #fff; }
.p-marke-text strong { font-weight: 700; }
.p-marke-text span   { color: #85A2B6; }

.p-gruppe {
  font-size: 12px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase;
  color: #85A2B6;
  padding: 20px 12px 8px;
}

.p-eintrag {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: 0; background: none; cursor: pointer;
  font: inherit; text-align: left; text-decoration: none;
  color: var(--p-schrift);
  border-radius: 6px;
}
.p-eintrag { color: rgb(242, 244, 247); font-size: 14px; }
.p-eintrag:hover { background: rgba(255, 255, 255, .07); }
.p-eintrag.aktiv { background: rgb(62, 67, 91); color: #fff; font-weight: 400; }
.p-eintrag-symbol { color: rgba(242, 244, 247, .78); flex: 0 0 auto; }
.p-eintrag.aktiv .p-eintrag-symbol { color: #fff; }
.p-eintrag-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.p-zahl {
  background: var(--p-akzent); color: #fff;
  font-size: 11px; font-weight: 600;
  padding: 1px 7px; border-radius: 10px;
}

.p-kopfzeile {
  height: var(--p-kopfzeile);
  flex: 0 0 var(--p-kopfzeile);
  background: var(--p-flaeche);
  border-bottom: 1px solid var(--p-linie);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--p-rand);
  position: sticky; top: 0; z-index: 20;
}
.p-kopf-titel  { margin: 0; font-size: 18px; font-weight: 600; }
.p-kopf-rechts { display: flex; align-items: center; gap: 8px; }

/* Der Inhaltsbereich der Konsole liegt auf --blue-sky, nicht auf Weiss. */
.p-inhalt { flex: 1; padding: 24px var(--p-rand) 48px; min-width: 0; background: #F4F6FD; }
.p-spalte { background: #F4F6FD; }

/* -------------------------------------------------------- Brotkrumen -- */

.p-brotkrumen { display: flex; align-items: center; gap: 6px; margin-bottom: 16px; font-size: 13px; }
.p-krume { color: var(--p-gedaempft); text-decoration: none; }
.p-krume:hover { color: var(--p-akzent); text-decoration: underline; }
.p-krume.aktuell { color: var(--p-schrift); font-weight: 600; }
.p-krume-pfeil { color: var(--p-blass); }

/* ------------------------------------------------------------ Blöcke -- */

.p-block {
  background: var(--p-flaeche);
  border: 1px solid var(--p-linie);
  box-shadow: var(--p-schatten);
  margin-bottom: 20px;
}
.p-block-kopf {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--p-linie-leicht);
}
.p-block-titel   { margin: 0; font-size: 16px; font-weight: 600; }
.p-block-hinweis { margin: 4px 0 0; font-size: 13px; color: var(--p-gedaempft); }
.p-block-handlungen { display: flex; gap: 8px; flex: 0 0 auto; }
.p-block-inhalt { padding: 20px; }
.p-block-inhalt:empty { display: none; }

.p-kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin-bottom: 20px; }
.p-kennzahl {
  background: var(--p-flaeche); border: 1px solid var(--p-linie);
  padding: 16px 18px; box-shadow: var(--p-schatten);
  text-decoration: none; color: inherit; display: block;
}
.p-kennzahl.anklickbar:hover { border-color: var(--p-akzent); }
.p-kennzahl-symbol { color: var(--p-akzent); margin-bottom: 8px; display: block; }
.p-kennzahl-wert   { font-size: 26px; font-weight: 600; letter-spacing: -.01em; }
.p-kennzahl-name   { font-size: 13px; color: var(--p-gedaempft); margin-top: 2px; }

/* ----------------------------------------------------------- Tabelle -- */

.p-tabelle-rahmen  { display: flex; flex-direction: column; }
.p-tabelle-leiste  { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.p-tabelle-handlungen { display: flex; gap: 8px; }
.p-tabelle-flaeche { overflow-x: auto; border: 1px solid var(--p-linie); background: var(--p-flaeche); }
.p-tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }

.p-th {
  text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; color: var(--p-gedaempft);
  padding: 12px 16px; border-bottom: 1px solid var(--p-linie);
  white-space: nowrap; user-select: none;
}
.p-th.sortierbar { cursor: pointer; }
.p-th.sortierbar:hover { color: var(--p-schrift); }
.p-th.aktiv { color: var(--p-akzent); }
.p-th.rechts, .p-td.rechts { text-align: right; }
.p-th.mitte,  .p-td.mitte  { text-align: center; }
.p-th-auswahl, .p-td-auswahl { width: 44px; padding-left: 16px; }
.p-th-menue,   .p-td-menue   { width: 52px; text-align: right; }

.p-td { padding: 12px 16px; border-bottom: 1px solid var(--p-linie-leicht); vertical-align: middle; }
.p-tr:last-child .p-td { border-bottom: 0; }
.p-tr.anklickbar { cursor: pointer; }
.p-tr.anklickbar:hover { background: var(--p-grund); }

.p-auswahl-leiste {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; margin-bottom: -1px;
  background: var(--p-akzent-leicht); border: 1px solid var(--p-akzent);
  font-size: 13px;
}

.p-seitenwahl { display: flex; align-items: center; justify-content: space-between; padding: 14px 4px 0; }
.p-seitenwahl-summe { font-size: 13px; color: var(--p-gedaempft); }
.p-seitenwahl-knoepfe { display: flex; gap: 4px; align-items: center; }
.p-seitenzahl {
  min-width: 32px; height: 32px; padding: 0 8px;
  border: 1px solid var(--p-linie); background: var(--p-flaeche);
  cursor: pointer; font: inherit; font-size: 13px;
  display: inline-grid; place-content: center;
}
.p-seitenzahl:hover:not(:disabled) { border-color: var(--p-akzent); color: var(--p-akzent); }
.p-seitenzahl.aktiv { background: var(--p-akzent); border-color: var(--p-akzent); color: #fff; font-weight: 600; }
.p-seitenzahl:disabled { opacity: .4; cursor: default; }
.p-auslassung { padding: 0 4px; color: var(--p-blass); }

/* ------------------------------------------------------------ Knöpfe -- */

.p-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 16px; min-height: 38px;
  border: 1px solid transparent; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 500;
  text-decoration: none; white-space: nowrap;
}
.p-knopf.haupt  { background: var(--p-akzent); color: #fff; }
.p-knopf.haupt:hover  { background: var(--blue-700, #0085ff); }
.p-knopf.leise  { background: var(--p-flaeche); color: var(--p-schrift); border-color: var(--p-linie); }
.p-knopf.leise:hover  { border-color: var(--p-blass); }
.p-knopf.gefahr { background: var(--p-gefahr); color: #fff; }
.p-knopf.flach  { background: none; color: var(--p-akzent); padding: 6px 8px; min-height: 0; }
.p-knopf.flach:hover { background: var(--p-akzent-leicht); }
.p-knopf:disabled { opacity: .5; cursor: default; }

.p-menue-knopf {
  width: 32px; height: 32px; border: 0; background: none; cursor: pointer;
  display: inline-grid; place-content: center; color: var(--p-gedaempft);
}
.p-menue-knopf:hover { background: var(--p-linie-leicht); color: var(--p-schrift); }

/* ------------------------------------------------------------- Menüs -- */

.p-menue {
  position: fixed; z-index: 60; min-width: 220px;
  background: var(--p-flaeche); border: 1px solid var(--p-linie);
  box-shadow: var(--p-schatten-hoch); padding: 4px 0;
}
.p-menue-eintrag {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 14px; border: 0; background: none; cursor: pointer;
  font: inherit; text-align: left; color: var(--p-schrift);
}
.p-menue-eintrag:hover { background: var(--p-grund); }
.p-menue-eintrag.gefahr { color: var(--p-gefahr); }
.p-menue-eintrag:disabled { opacity: .45; cursor: default; }
.p-menue-trenner { height: 1px; background: var(--p-linie-leicht); margin: 4px 0; }

/* ------------------------------------------------------------ Felder -- */

.p-feld-rahmen { display: block; margin-bottom: 16px; }
.p-feld-beschriftung { display: block; font-size: 13px; font-weight: 500; margin-bottom: 5px; }
.p-pflicht { color: var(--p-gefahr); }
.p-feld {
  width: 100%; padding: 9px 12px; min-height: 38px;
  border: 1px solid var(--p-linie); background: var(--p-flaeche);
  font: inherit; font-size: 14px; color: var(--p-schrift);
}
.p-feld:focus { outline: 2px solid var(--p-akzent); outline-offset: -1px; border-color: var(--p-akzent); }
.p-feld.fehlerhaft { border-color: var(--p-gefahr); }
.p-feld-mehrzeilig { min-height: 90px; resize: vertical; }
.p-feld-hinweis { display: block; font-size: 12px; color: var(--p-gedaempft); margin-top: 4px; }
.p-feld-fehler  { display: block; font-size: 12px; color: var(--p-gefahr); margin-top: 4px; }

.p-suchfeld { position: relative; flex: 0 1 340px; }
.p-suchfeld-symbol { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--p-blass); }
.p-suchfeld-eingabe { padding-left: 34px; }

.p-schalter-rahmen { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; cursor: pointer; }
.p-schalter { position: absolute; opacity: 0; width: 0; height: 0; }
.p-schalter-bahn {
  width: 38px; height: 22px; flex: 0 0 38px; background: var(--p-linie);
  border-radius: 11px; position: relative; transition: background .15s;
}
.p-schalter-bahn::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: transform .15s;
}
.p-schalter:checked + .p-schalter-bahn { background: var(--p-akzent); }
.p-schalter:checked + .p-schalter-bahn::after { transform: translateX(16px); }
.p-schalter-text { display: flex; flex-direction: column; }

.p-ankreuz-rahmen { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.p-ankreuz { width: 16px; height: 16px; accent-color: var(--p-akzent); cursor: pointer; }

.p-kachelwahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.p-kachel {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 16px 12px; text-align: center; cursor: pointer;
  border: 1px solid var(--p-linie); background: var(--p-flaeche);
}
.p-kachel:hover { border-color: var(--p-blass); }
.p-kachel.gewaehlt { border-color: var(--p-akzent); background: var(--p-akzent-leicht); }
.p-kachel input { position: absolute; opacity: 0; }
.p-kachel-name { font-weight: 500; }
.p-kachel-hinweis { color: var(--p-gedaempft); }

/* ----------------------------------------------------------- Dialoge -- */

.p-auflage {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(16, 24, 40, .38);
  display: grid; place-items: center;
}
.p-auflage.schublade { place-items: stretch; justify-content: flex-end; }
.p-auflage-kasten {
  background: var(--p-flaeche);
  width: min(540px, 94vw); max-height: 90vh; overflow: auto;
  box-shadow: var(--p-schatten-hoch);
}
.p-auflage-kasten.breit { width: min(820px, 94vw); }
.p-auflage.schublade .p-auflage-kasten { width: min(520px, 96vw); max-height: none; height: 100vh; }

.p-dialog-kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 18px 22px; border-bottom: 1px solid var(--p-linie-leicht);
}
.p-dialog-titel { margin: 0; font-size: 17px; font-weight: 600; }
.p-dialog-zu { border: 0; background: none; cursor: pointer; color: var(--p-gedaempft); padding: 4px; }
.p-dialog-zu:hover { color: var(--p-schrift); }
.p-dialog-hinweis { margin: 0; padding: 14px 22px 0; color: var(--p-gedaempft); }
.p-dialog-koerper { padding: 20px 22px; }
.p-dialog-text { margin: 0 0 12px; }
.p-dialog-liste { margin: 0; padding-left: 20px; color: var(--p-gedaempft); }
.p-dialog-fuss {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 16px 22px; border-top: 1px solid var(--p-linie-leicht);
}
.p-schublade-koerper { padding: 20px 22px; overflow: auto; flex: 1; }

/* -------------------------------------------------------- Rückmeldung -- */

.p-meldung {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px);
  display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; z-index: 70;
  background: var(--grey-orca, #333); color: #fff;
  box-shadow: var(--p-schatten-hoch);
  opacity: 0; transition: opacity .2s, transform .2s;
}
.p-meldung.sichtbar { opacity: 1; transform: translate(-50%, 0); }
.p-meldung.gut     { background: var(--green-900, #2C8736); }
.p-meldung.fehler  { background: var(--p-gefahr); }
.p-meldung.warnung { background: var(--p-warnung); }

.p-anmerkung {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; margin-bottom: 16px;
  border-left: 3px solid var(--p-akzent); background: var(--p-akzent-leicht);
}
.p-anmerkung.fehler  { border-color: var(--p-gefahr); background: #fdeceb; }
.p-anmerkung.warnung { border-color: var(--p-warnung); background: #fff6e5; }
.p-anmerkung.gut     { border-color: var(--p-gut); background: #e8f7ea; }

/* ---------------------------------------------------------- Zustände -- */

.p-laedt { display: flex; align-items: center; gap: 10px; padding: 40px; color: var(--p-gedaempft); justify-content: center; }
.p-spinner {
  width: 18px; height: 18px; border: 2px solid var(--p-linie);
  border-top-color: var(--p-akzent); border-radius: 50%;
  animation: p-dreht .7s linear infinite;
}
@keyframes p-dreht { to { transform: rotate(360deg); } }

.p-leer { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 44px 20px; text-align: center; }
.p-leer-symbol { color: var(--p-blass); }
.p-leer-text   { margin: 0; color: var(--p-gedaempft); max-width: 460px; }

.p-fehlerseite { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 60px 20px; text-align: center; color: var(--p-gefahr); }
.p-fehlerseite h2 { margin: 0; font-size: 18px; color: var(--p-schrift); }
.p-fehlerseite p  { margin: 0; color: var(--p-gedaempft); max-width: 520px; }

.p-marke-zustand {
  display: inline-block; padding: 2px 9px; font-size: 12px; font-weight: 600;
}
.p-marke-zustand.neutral { background: var(--p-linie-leicht); color: var(--p-gedaempft); }
.p-marke-zustand.gut     { background: #e8f7ea; color: var(--green-900, #2C8736); }
.p-marke-zustand.warnung { background: #fff6e5; color: #8a5a00; }
.p-marke-zustand.gefahr  { background: #fdeceb; color: #b4321e; }
.p-marke-zustand.aktiv   { background: var(--p-akzent-leicht); color: var(--blue-900, #006AB2); }

/* --------------------------------------------------------- Kleinkram -- */

.p-reihe   { display: flex; align-items: center; gap: 10px; }
.p-spalten { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.p-gedaempft { color: var(--p-gedaempft); }
.p-klein     { font-size: 13px; }

/* ------------------------------------------------- Bereiche der Konsole -- */

.p-balken { height: 8px; background: var(--p-linie-leicht); overflow: hidden; }
.p-balken-fuellung { height: 100%; background: var(--p-akzent); transition: width .3s; }
.p-balken-fuellung.eng { background: var(--p-warnung); }

.p-kurzwege { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.p-kurzweg {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; text-decoration: none; color: inherit;
  border: 1px solid var(--p-linie); background: var(--p-flaeche);
}
.p-kurzweg:hover { border-color: var(--p-akzent); background: var(--p-akzent-leicht); }
.p-kurzweg-symbol { color: var(--p-akzent); flex: 0 0 auto; }
.p-kurzweg-titel  { font-weight: 500; }
.p-kurzweg-pfeil  { margin-left: auto; color: var(--p-blass); flex: 0 0 auto; }

.p-angaben { display: grid; grid-template-columns: auto 1fr; gap: 10px 20px; margin: 0; }
.p-angaben dt { font-size: 13px; color: var(--p-gedaempft); }
.p-angaben dd { margin: 0; }

.p-zugaenge { display: flex; flex-direction: column; gap: 8px; }
.p-zugang {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border: 1px solid var(--p-linie-leicht); background: var(--p-grund);
}
.p-zugang span:not(.icon) { flex: 1; }

.p-konto-knopf { border: 0; background: none; cursor: pointer; padding: 0; display: grid; place-content: center; }

.p-formular { max-width: 640px; }
.p-formular-fuss { display: flex; gap: 8px; margin-top: 8px; }

.p-einstellzeile {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 14px 0; border-bottom: 1px solid var(--p-linie-leicht);
}
.p-einstellzeile:last-child { border-bottom: 0; }

.p-qr { display: block; margin: 0 auto 14px; width: 180px; height: 180px; }
.p-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.p-codes code {
  padding: 8px 12px; background: var(--p-grund); border: 1px solid var(--p-linie);
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 13px; text-align: center;
}

.p-ueberfaellig { color: var(--p-gefahr); font-weight: 500; }

/* ---- Aufklappbare Menüpunkte, wie in der Verwaltungskonsole ---- */

.p-navgruppe { margin-bottom: 1px; }
.p-eintrag-klapp .p-klapppfeil {
  margin-left: auto; color: rgba(242,244,247,.55);
  transition: transform .16s ease-out;
}
.p-eintrag-klapp.offen .p-klapppfeil { transform: rotate(90deg); }
.p-unterliste { display: flex; flex-direction: column; padding: 2px 0 6px 40px; }
.p-unterliste.zu { display: none; }
.p-untereintrag {
  padding: 7px 12px; border-radius: 6px; font-size: 13px;
  color: rgba(242,244,247,.82); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.p-untereintrag:hover { background: rgba(255,255,255,.07); color: #fff; }
.p-untereintrag.aktiv { background: rgb(62,67,91); color: #fff; }
.p-marke-neu {
  background: #F0285A; color: #fff; font-size: 10px; font-weight: 600;
  padding: 2px 7px; border-radius: 9px; letter-spacing: .02em;
}
.p-punkt { width: 7px; height: 7px; border-radius: 50%; background: #F0285A; }

/* ---- Suchzeile der Kopfzeile ---- */
.p-suche {
  display: flex; align-items: center; gap: 8px; flex: 1; max-width: 720px;
  background: #F1F1F1; border-radius: 4px; padding: 0 12px; height: 40px;
}
.p-suche input {
  flex: 1; border: none; background: transparent; outline: none;
  font: inherit; font-size: 15px; color: var(--p-schrift);
}
.p-suche-alle {
  border-left: 1px solid #DDD; padding-left: 12px; font-size: 14px;
  color: var(--p-gedaempft); display: flex; align-items: center; gap: 6px;
}
.p-kopfzeile { background: #fff; }

.p-suche { position: relative; }
.p-treffer {
  position: absolute; left: 0; right: 0; top: 46px; background: #fff;
  border-radius: 6px; box-shadow: 0 6px 26px rgba(0,0,0,.16); padding: 6px;
  z-index: 40; max-height: 380px; overflow: auto;
}
.p-treffer-zeile {
  display: flex; flex-direction: column; padding: 9px 12px; border-radius: 5px;
  text-decoration: none; color: var(--p-schrift); font-size: 14px;
}
.p-treffer-zeile:hover { background: #F4F6FD; }
.p-treffer-zeile small { color: var(--p-gedaempft); font-size: 12px; }
.p-treffer-leer { padding: 12px; color: var(--p-gedaempft); font-size: 14px; }
.p-kopf-symbol { width: 40px; height: 40px; justify-content: center; padding: 0; }

/* ---- Anrede der Startseite, wie in der Verwaltungskonsole ---- */
.p-anrede { display: flex; align-items: center; gap: 20px; margin: 8px 0 30px; }
.p-anrede-titel { margin: 0; font-size: 30px; font-weight: 300; color: var(--p-schrift); }
.p-anrede-titel strong { font-weight: 500; }
.p-anrede-unter { margin-top: 4px; display: flex; gap: 10px; font-size: 14px; color: var(--p-gedaempft); }
.p-anrede-trenner { color: #C9CDD6; }
.p-abschnitt { font-size: 17px; font-weight: 600; margin: 0 0 16px; }


/* Fliesstext in einem Block. War an sechs Stellen benutzt, aber nie
   gestaltet -- ein <p> ist von sich aus lesbar, deshalb fiel es nicht auf. */
.p-text {
  margin: 0 0 14px; font-size: 14px; line-height: 1.65; color: var(--p-schrift);
}
.p-text:last-child { margin-bottom: 0; }

/* Ein Kennwort, das nur EINMAL erscheint. Gross, in Schreibmaschinenschrift
   und auswählbar -- man muss es abschreiben können, ohne sich zu vertippen. */
.p-kennwort-anzeige {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 18px; letter-spacing: .03em;
  background: #F4F6FD; border: 1px solid #DDE3F7; border-radius: 6px;
  padding: 14px 16px; margin: 0 0 14px; user-select: all; word-break: break-all;
}

/* Produktzugänge: Name links, Schalter rechts */
.p-zugaenge { display: flex; flex-direction: column; gap: 2px; }
.p-zugang {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 2px; border-bottom: 1px solid #F2F2F2; font-size: 14px;
}
.p-zugang:last-child { border-bottom: none; }
.p-zugang-name { flex: 1; }

/* Rechte-Matrix: Personen in Zeilen, Dienste in Spalten */
.p-matrix .p-th.mitte, .p-matrix .p-td.mitte { text-align: center; }
.p-matrix .p-th.mitte { font-size: 12px; }
.p-matrix .p-ankreuz { width: 18px; height: 18px; accent-color: var(--p-akzent); cursor: pointer; }
.p-fest { color: var(--p-gut); }

/* ------------------------------------------------- schmale Schirme ---- */
/* Auf breiten Schirmen steht die Seitenleiste fest; der Menüknopf ist
   unnötig und deshalb weg. Erst unterhalb von 900 px wird die Leiste zur
   Schublade: sie liegt dann neben dem Fenster und fährt auf Knopfdruck
   herein, statt dem Inhalt 288 px wegzunehmen. */
.p-leiste-knopf {
  display: none; width: 36px; height: 36px; margin-right: 10px;
  align-items: center; justify-content: center;
  border: 1px solid var(--p-linie); background: #fff; color: var(--p-text);
  cursor: pointer; flex: 0 0 auto;
}
.p-leiste-knopf:hover { border-color: var(--p-akzent); color: var(--p-akzent); }
.p-leiste-schleier { display: none; }

@media (max-width: 900px) {
  .p-leiste-knopf { display: inline-flex; }
  .p-seitenleiste {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 70;
    transform: translateX(-100%); transition: transform .18s ease-out;
    overflow-y: auto;
  }
  .p-rahmen.leiste-offen .p-seitenleiste { transform: translateX(0); }
  .p-rahmen.leiste-offen .p-leiste-schleier {
    display: block; position: fixed; inset: 0; z-index: 65; background: rgba(0,0,0,.35);
  }
  .p-inhalt { padding-left: 16px; padding-right: 16px; }
  /* Die Kopfzeile darf umbrechen, statt sich breit zu machen. */
  .p-kopfzeile { flex-wrap: wrap; row-gap: 8px; }
  .p-kopf-titel { font-size: 18px; }
  /* Knopfleisten über Tabellen brechen um, statt herauszustehen. */
  .p-tabelle-leiste { flex-wrap: wrap; row-gap: 8px; }
  .p-tabelle-handlungen { flex-wrap: wrap; }
  .p-brotkrumen { flex-wrap: wrap; }
}
.p-schubladefuss { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--p-linie); }