/* ===================== Kunden-Portal E1: Ansicht des Kunden nach dem freigegebenen Muster (konzept-portale/bilder/1 und 2) =====================
   Grundlage: aussen-basis.css (Leitstand 2, Inter, Token hell und dunkel, Knöpfe, Felder, Kästen). Hier nur der Aufbau des Musters:
   Kopf mit Reitern, Titelzeile mit Umschalter, Filterleiste, Raster Karte | Fachkräfte | Ansprechperson und Anfrage, Karten der Fachkräfte,
   Berater-Karte, Anfrage (Korb), Kästen Projekt, Rahmenvertrag und Google, Leiste unten am Handy.
   Keine style-Attribute im Markup (strenge CSP der Portalseiten). iPersonal: Rot sparsam (Hauptaktion, Betrieb auf der Karte),
   MediPersonal: Blau und Grün, nie Rot. Handy zuerst (390 px): nie seitwärts schieben, Tippflächen ab 44 px. */

body.portal { --p-dunkel: #1D1D1F; --p-dunkel-tx: #FFFFFF; --p-glas: var(--glas); }
html:not([data-theme="light"]) body.portal { --p-dunkel: #E9ECF1; --p-dunkel-tx: #0A0B0E; }
@media (prefers-color-scheme: light) { html:not([data-theme]) body.portal { --p-dunkel: #1D1D1F; --p-dunkel-tx: #FFFFFF; } }

.p-lbl { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); }
.p-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.p-eyebrow svg.i { width: 15px; height: 15px; }
.p-glas { border: 1px solid transparent; border-radius: var(--radius); box-shadow: var(--sch-1);
  background: linear-gradient(180deg, var(--flaeche), var(--flaeche-b)) padding-box, linear-gradient(180deg, var(--rand-o), var(--rand-u) 42%) border-box; }
.p-knr { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; background: var(--flaeche-3); border: 1px solid var(--line); font-family: var(--mono); font-size: 11.5px; font-weight: 700; color: var(--text); white-space: nowrap; }
.p-badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--ak-btn); color: #fff; font-size: 11.5px; font-weight: 700; }

/* ---------- Kopf ---------- */
.p-kopf { position: sticky; top: 0; z-index: 30; background: var(--glas); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line); }
.p-kopf-innen { max-width: 1480px; margin: 0 auto; display: flex; align-items: center; gap: 18px; padding: 10px 16px; min-height: 64px; }
.p-kopf-titel { display: none; flex-direction: column; line-height: 1.15; padding-left: 14px; border-left: 1px solid var(--line); min-width: 0; }
.p-kopf-titel b { font-size: 15px; }
.p-kopf-titel span { font-size: 12.5px; color: var(--muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.p-nav { display: none; align-items: center; gap: 4px; }
.p-nav button { font: inherit; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 10px; border: 0; background: transparent; color: var(--muted); font-weight: 700; font-size: 14px; cursor: pointer; }
.p-nav button svg.i { width: 17px; height: 17px; }
.p-nav button:hover { background: var(--hover); color: var(--text); }
.p-nav button[aria-current="page"] { background: var(--flaeche-3); color: var(--text); box-shadow: inset 0 -2px 0 var(--ak); }
.p-kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.p-korb-knopf { font: inherit; display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 14px 0 12px; border-radius: 11px; border: 0; background: var(--p-dunkel); color: var(--p-dunkel-tx); font-weight: 700; cursor: pointer; }
.p-korb-knopf .p-badge { background: var(--p-dunkel-tx); color: var(--p-dunkel); }
.p-korb-knopf .text { display: none; }
.p-wer { display: none; align-items: center; gap: 10px; padding-left: 14px; border-left: 1px solid var(--line); }
.p-wer > div { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.p-wer b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.p-wer span { font-size: 12px; color: var(--muted-2); }
.p-initialen { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--flaeche-3); border: 1px solid var(--line); font-size: 13px; font-weight: 700; color: var(--muted); flex: none; }
.p-menue { position: absolute; right: 12px; top: 62px; z-index: 40; width: min(320px, calc(100vw - 24px)); padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.p-menue button, .p-menue a { justify-content: flex-start; }

@media (min-width: 1024px) {
  .p-kopf-innen { padding: 12px 28px; }
  .p-kopf-titel, .p-nav, .p-wer { display: flex; }
  .p-korb-knopf .text { display: inline; }
  .p-menue-knopf { display: none !important; }
}

/* ---------- Seite ---------- */
.p-seite { max-width: 1480px; margin: 0 auto; padding: 18px 16px 120px; display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 1024px) { .p-seite { padding: 24px 28px 48px; gap: 16px; } }
.p-titelzeile { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; }
.p-titelzeile h1 { font-size: 24px; letter-spacing: -.025em; margin-top: 8px; }
.p-titelzeile p { margin-top: 6px; color: var(--muted); font-size: 14.5px; }
@media (min-width: 1024px) { .p-titelzeile h1 { font-size: 28px; } }

/* Segmente (Umschalter und Filter) */
.p-seg { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: var(--flaeche-2); border: 1px solid var(--line); }
.p-seg button { font: inherit; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 13px; border-radius: 999px; border: 0; background: transparent; color: var(--muted); font-weight: 700; font-size: 13.5px; cursor: pointer; white-space: nowrap; }
.p-seg button svg.i { width: 15px; height: 15px; }
.p-seg button[aria-pressed="true"] { background: var(--p-dunkel); color: var(--p-dunkel-tx); }
.p-seg.hell button[aria-pressed="true"] { background: var(--flaeche); color: var(--text); box-shadow: 0 1px 2px rgba(17, 17, 26, .08), 0 0 0 1px var(--line); }
.p-seg .plus { color: var(--ink); }

/* ---------- Filterleiste ---------- */
.p-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 12px; }
.p-filter .gruppe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.p-filter .trenn { display: none; width: 1px; align-self: stretch; background: var(--line); }
.p-datum { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 10px 0 12px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--feld); font-weight: 700; font-size: 13.5px; }
.p-datum svg.i { width: 16px; height: 16px; color: var(--muted); }
.p-datum input { font: inherit; border: 0; background: transparent; color: var(--text); min-height: 40px; width: 9.6em; }
.p-schalter { font: inherit; display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 4px; border: 0; background: transparent; color: var(--text); font-weight: 700; font-size: 13.5px; cursor: pointer; }
.p-schalter i { position: relative; width: 38px; height: 22px; border-radius: 999px; background: var(--line-strong); flex: none; }
.p-schalter i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: left .15s; }
.p-schalter[aria-pressed="true"] i { background: var(--p-dunkel); }
.p-schalter[aria-pressed="true"] i::after { left: 19px; background: var(--p-dunkel-tx); }
.p-filter .zahl { margin-left: auto; font-size: 13px; color: var(--muted); white-space: nowrap; }
.p-filter .zahl b { color: var(--text); font-size: 14px; }
@media (min-width: 1024px) { .p-filter .trenn { display: block; } .p-filter { padding: 10px 14px; } }

/* ---------- Raster ---------- */
.p-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-items: start; }
.p-raster > * { min-width: 0; }
.p-karten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.p-mehr { display: flex; justify-content: center; }
.p-spalte { display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 1024px) {
  .p-raster { grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; }
  .p-raster.mit-karte { grid-template-columns: 380px minmax(0, 1fr) 330px; }
  .p-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .p-karten > .breit { grid-column: 1 / -1; }
}
@media (min-width: 1600px) { .p-raster.mit-karte { grid-template-columns: 430px minmax(0, 1fr) 340px; } }
/* Update 51: am Handy zeigt «Karte» das Radar und darunter die Karten der Fachkräfte (vorher nur das Radar), «Liste» nur die Karten */
@media (max-width: 1023.98px) { .p-raster.mit-karte .p-kartebox { order: -1; } .p-raster.nur-liste-handy .p-kartebox { display: none; } }

/* ---------- Karte mit Umkreis-Ringen ---------- */
.p-kartebox { position: relative; overflow: hidden; padding: 0; display: flex; flex-direction: column; }
.p-karte { position: relative; height: 340px; background: radial-gradient(120% 90% at 60% 40%, var(--flaeche-2), var(--flaeche-3)); }
@media (min-width: 1024px) { .p-karte { height: 620px; } .p-kartebox { position: sticky; top: 84px; } }
.p-karte svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.p-karte-pillen { position: absolute; top: 10px; left: 10px; right: 10px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; pointer-events: none; }
.p-kpille { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px; border-radius: 999px; background: var(--glas); border: 1px solid var(--line); font-size: 12px; font-weight: 700; color: var(--text); }
.p-kpille i { width: 8px; height: 8px; border-radius: 50%; background: var(--ak); }
.p-kpille i.ring { background: var(--flaeche); border: 2px solid var(--line-3); width: 10px; height: 10px; }
.p-kpille i.dunkel { background: var(--p-dunkel); }
.p-karte-fuss { display: flex; align-items: flex-start; gap: 9px; padding: 11px 14px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.p-karte-fuss svg.i { width: 16px; height: 16px; color: var(--ink); margin-top: 1px; }
.p-karte-fuss b { color: var(--text); }
/* SVG der Karte: Farben über Klassen (kein style-Attribut) */
.pk-land { fill: var(--flaeche); stroke: var(--line-strong); stroke-width: 1; }
.pk-see { fill: color-mix(in srgb, var(--ak) 10%, var(--flaeche-3)); stroke: none; }
body[data-mandant="bau"] .pk-see { fill: color-mix(in srgb, #6E7580 14%, var(--flaeche-3)); }
.pk-bahn { fill: none; stroke: var(--line-3); stroke-width: 1; stroke-dasharray: 3 3; opacity: .7; }
.pk-ort { font-family: var(--mono); font-size: 9.5px; fill: var(--muted-2); letter-spacing: .06em; }
.pk-ortpunkt { fill: var(--muted-2); }
.pk-ring { fill: none; stroke: var(--line-3); stroke-width: 1; stroke-dasharray: 4 4; }
.pk-umkreis { fill: color-mix(in srgb, var(--ak) 7%, transparent); stroke: var(--ak); stroke-width: 1.4; }
.pk-ringtext { font-family: var(--mono); font-size: 9.5px; font-weight: 700; fill: var(--muted); }
.pk-pille rect { fill: var(--flaeche); stroke: var(--line-strong); }
.pk-pille text { font-family: var(--mono); font-size: 10px; font-weight: 700; fill: var(--text); }
.pk-pille.umkreis rect { stroke: var(--ak); }
.pk-pille.umkreis text { fill: var(--ink); }
.pk-pille.dunkel rect { fill: var(--p-dunkel); stroke: var(--p-dunkel); }
.pk-pille.dunkel text { fill: var(--p-dunkel-tx); }
.pk-punkt { fill: var(--flaeche); stroke: var(--line-3); stroke-width: 2; }
.pk-punkt-kern { fill: var(--muted); }
.pk-punkt.gewaehlt { fill: var(--p-dunkel); stroke: var(--p-dunkel); }
.pk-punkt.gewaehlt + .pk-punkt-kern { fill: var(--p-dunkel-tx); }
.pk-betrieb { fill: var(--ak); stroke: var(--flaeche); stroke-width: 3; }
.pk-betrieb-glut { fill: var(--ak); opacity: .16; }
.pk-betrieb-text { font-family: var(--mono); font-size: 10px; font-weight: 700; fill: var(--ink); letter-spacing: .06em; }
.pk-betrieb-unter { font-family: var(--mono); font-size: 9px; fill: var(--muted-2); letter-spacing: .06em; }
.pk-massstab { stroke: var(--muted-2); stroke-width: 1.4; }
.pk-massstab-text { font-family: var(--mono); font-size: 9.5px; fill: var(--muted-2); }

/* ---------- Karte einer Fachkraft (anonym) ---------- */
.p-kd { display: flex; flex-direction: column; gap: 12px; padding: 14px; }
.p-kd.gewaehlt { box-shadow: var(--sch-1), 0 0 0 2px var(--p-dunkel); }
.p-kd-kopf { display: flex; align-items: flex-start; gap: 12px; }
.p-kd-bild { width: 46px; height: 46px; border-radius: 12px; flex: none; overflow: hidden; background: linear-gradient(160deg, var(--foto-a), var(--foto-b)); border: 1px solid var(--line); }
.p-kd-bild svg, .p-kd-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.p-kd-titel { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.p-kd-titel .zeile1 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.p-kd-titel b { font-size: 15.5px; letter-spacing: -.01em; overflow-wrap: anywhere; }
.p-kd-titel span.unter { font-size: 12.5px; color: var(--muted); }
.p-kd-ort { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; }
.p-kd-ort svg.i { width: 15px; height: 15px; color: var(--muted); }
.p-kd-fakten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 11px; background: var(--flaeche-2); overflow: hidden; }
.p-kd-fakten > div { display: flex; flex-direction: column; gap: 3px; padding: 9px 9px; min-width: 0; }
.p-kd-fakten > div + div { border-left: 1px solid var(--line); }
.p-kd-fakten .p-lbl { display: flex; align-items: center; gap: 5px; font-size: 9.5px; }
.p-kd-fakten .p-lbl svg.i { width: 13px; height: 13px; }
.p-kd-fakten b { font-size: 14px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-kd-fakten small { font-size: 11.5px; color: var(--muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-kd-fakten .ja b { color: var(--ok-tx); }
.p-kd-frist { font-size: 12.5px; color: var(--warn-tx); background: var(--warn-bg); border: 1px solid var(--warn-ln); border-radius: 9px; padding: 6px 10px; }
.p-kd-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.p-kd-fuss .knopf { min-height: 44px; font-size: 14px; }
.p-kd-fuss .anfragen { flex: 1 1 140px; }
.p-kd-fuss .knopf.dunkel { background: var(--p-dunkel); color: var(--p-dunkel-tx); border-color: transparent; }
.p-kd-kurz { border-top: 1px dashed var(--line-strong); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.p-kd-kurz dl { margin: 0; display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 4px 10px; }
.p-kd-kurz dt { color: var(--muted-2); }
.p-kd-kurz dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }

/* ---------- Ansprechperson ---------- */
.p-bk { padding: 18px; display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden; isolation: isolate; }
.p-bk::before { content: ""; position: absolute; z-index: -1; width: 360px; height: 360px; right: -170px; top: -200px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--ak-rgb), .10), transparent 66%); }
body[data-mandant="med"] .p-bk::after { content: ""; position: absolute; z-index: -1; width: 300px; height: 300px; left: -170px; bottom: -190px; border-radius: 50%; background: radial-gradient(circle, rgba(46, 170, 96, .10), transparent 66%); }
.p-bk-person { display: flex; align-items: center; gap: 14px; }
.p-bk-foto { width: 76px; height: 76px; border-radius: 50%; flex: none; overflow: hidden; box-shadow: 0 0 0 4px var(--flaeche), 0 0 0 5px var(--line); background: linear-gradient(160deg, var(--foto-a), var(--foto-b)); display: grid; place-items: center; font-weight: 700; font-size: 22px; color: var(--muted); }
.p-bk-foto img, .p-bk-foto svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.p-bk-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.p-bk-name b { font-size: 18px; letter-spacing: -.015em; }
.p-bk-name span { font-size: 13px; color: var(--muted); }
.p-bk-zitat { position: relative; padding: 11px 13px; border-radius: 12px; background: var(--flaeche-2); border: 1px solid var(--line); font-size: 13.5px; color: var(--muted); line-height: 1.45; }
.p-bk-zeilen { display: flex; flex-direction: column; gap: 9px; }
.p-bk-zeile { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; }
.p-bk-zeile > svg.i { width: 17px; height: 17px; color: var(--muted); margin-top: 1px; }
.p-bk-zeile > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.p-bk-zeile b { font-size: 14px; overflow-wrap: anywhere; }
.p-bk-zeile small { font-size: 12px; color: var(--muted-2); }
.p-bk-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.p-bk-zweit { border-top: 1px solid var(--line); padding-top: 12px; display: flex; align-items: center; gap: 12px; }
.p-bk-zweit .p-bk-foto { width: 44px; height: 44px; font-size: 14px; box-shadow: 0 0 0 2px var(--flaeche), 0 0 0 3px var(--line); }

/* ---------- Anfrage (Korb) ---------- */
.p-korb { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.p-korb-kopf { display: flex; align-items: center; gap: 8px; }
.p-korb-kopf h2 { font-size: 16px; }
.p-korb-pos { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; border-radius: 11px; background: var(--flaeche-2); border: 1px solid var(--line); }
.p-korb-pos > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.p-korb-pos b { font-size: 13.5px; overflow-wrap: anywhere; }
.p-korb-pos span { font-size: 12px; color: var(--muted-2); }
.p-korb-pos .knopf { min-height: 44px; width: 44px; padding: 0; border: 0; background: transparent; }
.p-eingaben2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.p-eingaben2 .eingabe, .p-korb .eingabe { min-height: 44px; padding: 9px 11px; font-size: 15px; border-radius: 10px; }
.p-klein { font-size: 12.5px; color: var(--muted-2); line-height: 1.45; }

/* Kästen: Google, Projekt, Rahmenvertrag, Neuigkeiten, Prüfung */
.p-kasten { padding: 14px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.p-kasten-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--flaeche-2); border: 1px solid var(--line); color: var(--ink); }
.p-kasten-ic.stern { background: var(--warn-bg); color: var(--warn-tx); border-color: var(--warn-ln); }
.p-kasten > div { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.p-kasten b { font-size: 13.5px; }
.p-kasten span { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.p-kasten > .knopf { flex: 1 1 100%; }
@media (min-width: 1024px) { .p-kasten.breit > .knopf { flex: none; } }
.p-neu { padding: 12px 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; border-left: 4px solid var(--ak); }
.p-neu .p-bk-foto { width: 44px; height: 44px; font-size: 14px; box-shadow: none; }
.p-neu > div { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.p-neu b { font-size: 14px; }
.p-neu span { font-size: 13px; color: var(--muted); }

/* Meine Anfragen und Laufende Einsätze */
.p-liste { display: flex; flex-direction: column; gap: 12px; }
.p-eintrag { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.p-eintrag-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.p-eintrag-kopf h3 { font-size: 15px; }
.p-stand { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--neu-bg); color: var(--neu-tx); border: 1px solid var(--neu-ln); }
.p-stand.ok { background: var(--ok-bg); color: var(--ok-tx); border-color: var(--ok-ln); }
.p-eintrag ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.p-eintrag li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 13.5px; }
.p-eintrag .meta { font-size: 12.5px; color: var(--muted-2); }

/* Leiste unten (Handy) */
.p-unten { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: flex; flex-direction: column; gap: 10px; padding: 10px 16px calc(14px + env(safe-area-inset-bottom)); background: var(--glas); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--line); box-shadow: 0 -10px 30px -18px rgba(17, 17, 26, .3); }
.p-unten .zeile { display: flex; align-items: center; gap: 10px; }
.p-unten .p-bk-foto { width: 40px; height: 40px; font-size: 13px; box-shadow: none; }
.p-unten .wer { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; flex: 1; }
.p-unten .wer b { font-size: 13.5px; }
.p-unten .wer span { font-size: 12px; color: var(--muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 1024px) { .p-unten { display: none; } }

/* Fenster (Bedarf melden, Berufe dazu, Warnung Abmeldung) */
.p-schleier { position: fixed; inset: 0; z-index: 60; background: var(--schleier); display: flex; align-items: flex-end; justify-content: center; }
.p-fenster { width: 100%; max-height: 92vh; overflow: auto; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); border-radius: 18px 18px 0 0; display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 768px) { .p-schleier { align-items: center; } .p-fenster { width: min(560px, calc(100vw - 32px)); border-radius: 18px; padding: 22px; } }
.p-fenster h2 { font-size: 19px; }
.p-fenster .zeilen { display: flex; flex-direction: column; gap: 8px; }
.p-bedarf-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 76px 44px; gap: 8px; align-items: center; }
.p-bedarf-zeile .eingabe { min-height: 44px; padding: 8px 10px; font-size: 15px; }
.p-treffer { display: flex; flex-direction: column; gap: 6px; }
.p-treffer button { justify-content: flex-start; text-align: left; }
.p-countdown { font-family: var(--mono); font-size: 28px; font-weight: 700; }

/* Abteilung: nur die passende Marke zeigen (ersetzt den früheren Stil im Kopf der Seite, CSP ohne Inline-Stil) */
body:not([data-mandant="med"]) .nur-med, body[data-mandant="med"] .nur-bau { display: none !important; }

/* ---------- Kunden-Portal E1: Ergänzungen für kunde.js (Ansichten, Fenster, Karte) ---------- */
.p-sil { fill: var(--line-3); }
.p-wer-knopf { font: inherit; color: inherit; text-align: left; background: transparent; border: 0; border-left: 1px solid var(--line); cursor: pointer; min-height: 44px; border-radius: 0; }
.p-wer-knopf:hover b { text-decoration: underline; text-underline-offset: 3px; }
.p-select { width: auto; flex: 1 1 160px; min-height: 44px; padding: 8px 12px; font-size: 15px; }
.p-filter .p-datum span { white-space: nowrap; }
@media (min-width: 1024px) { .p-raster:not(.mit-karte) > .p-kartebox { display: none; } }
@media (max-width: 1023.98px) { .p-raster > .p-kartebox { order: -1; } body.portal .a-fuss { padding-bottom: 160px; } .p-seite { padding-bottom: 28px; } }
.p-karte .leer { position: absolute; inset: 0; justify-content: center; }
.p-karte-legende { display: flex; flex-wrap: wrap; gap: 6px 16px; padding: 10px 14px 0; border-top: 1px solid var(--line); font-size: 12.5px; font-weight: 600; color: var(--muted); }
.p-karte-legende span { display: inline-flex; align-items: center; gap: 6px; }
.p-karte-legende svg { width: 12px; height: 12px; overflow: visible; }
.p-karte-legende .pk-betrieb { stroke-width: 0; }
.p-karte-legende .pk-punkt { stroke-width: 1.6; }
.p-karte-legende + .p-karte-fuss { border-top: 0; }
.pk-p { cursor: pointer; outline: none; }
.pk-p:focus-visible .pk-punkt { stroke: var(--fokus); stroke-width: 3; }
.pk-p:hover .pk-pille rect, .pk-p:focus-visible .pk-pille rect { stroke: var(--text); }
.p-kd { transition: box-shadow .2s; }
.p-kd.blink { box-shadow: var(--sch-1), 0 0 0 3px var(--fokus); }
.p-kd-fuss .knopf.leise { min-height: 44px; padding: 0 10px; text-decoration: none; color: var(--muted); }
.p-kd-fuss .knopf.leise:hover { color: var(--text); }
.p-kd-fuss .knopf.leise svg.i { width: 17px; height: 17px; }
.p-kd-ort { color: var(--muted); font-weight: 600; font-size: 12.5px; }
.p-fenster-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.p-fenster.klein { gap: 14px; }
@media (min-width: 768px) { .p-fenster.klein { width: min(440px, calc(100vw - 32px)); } }
.p-korb.im-fenster { padding: 0; border: 0; box-shadow: none; background: transparent; }
.p-korb.im-fenster .p-korb-kopf { display: none; }
.p-korb-form { display: flex; flex-direction: column; gap: 10px; }
.p-korb-meldung:empty { display: none; }
.p-liste > .p-lbl { margin-top: 6px; }
.p-eintrag li b { font-size: 14px; }
.p-neu .knopf.rund, .p-neu .knopf.klein { flex: none; }
.p-fenster .kp-firma { min-height: 56px; }
/* Muster neben dem Login: Update 13 zeigt dort einen geraden Ausschnitt der Kundenansicht (kunde.css, .ka-bild), die schrägen Karten entfallen */
/* Selbstregistrierung (registrieren.js) */
.rg-karte { max-width: 560px; }
@media (min-width: 1024px) { .ka-buehne.rg-buehne { grid-template-columns: minmax(0, 560px); } }
.rg-schritte { display: flex; flex-wrap: wrap; gap: 6px 14px; list-style: none; margin: 0; padding: 0; font-size: 12.5px; font-weight: 700; color: var(--muted-2); }
.rg-schritte li.jetzt { color: var(--text); }
.rg-schritte li.fertig { color: var(--ok-tx); }
.rg-plz { grid-template-columns: 110px minmax(0, 1fr); }
.rg-code-eingabe { font-family: var(--mono); font-size: 22px; letter-spacing: .3em; text-align: center; }
.ka-karte .chips .chip { min-height: 40px; font-size: 14px; }
/* Abnahme Bilder 1. Durchgang: Werte in den Fakten umbrechen statt abschneiden, Symbol im Feld Einsatzort, Filter am Handy in einer Zeile */
.p-kd-fakten b, .p-kd-fakten small { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.p-korb .eingabe-mit > .eingabe, .p-fenster .eingabe-mit > .eingabe { padding-left: 46px; }
@media (max-width: 1023.98px) {
  .p-filter .gruppe { flex: 1 1 100%; }
  .p-filter .gruppe:first-child { flex-wrap: nowrap; }
  .p-filter .zahl { margin-left: auto; }
}
.p-select { min-width: 0; }
@media (max-width: 1023.98px) { .p-filter .gruppe:first-child .p-select { flex: 1 1 0; width: 0; } .p-filter .gruppe { min-width: 0; } .p-datum { max-width: 100%; } .p-datum input { width: auto; min-width: 0; flex: 1 1 auto; } }
/* ---------- Kunden-Portal E1 (Korrektur 2): Karten der Fachkräfte als breite Zeilen wie im Muster 1 und 2 (eine Spalte: Foto, Titel mit K-Nummer,
   Zeile Erfahrung · Deutsch · Kanton, drei Kacheln, Knöpfe rechts), Spalten 380 | Liste | 300 wie im Muster, Erreichbarkeit heute in Grün ohne Punkt ---------- */
.p-kd-titel span.unter { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
.p-kd-titel span.unter .p-kd-ort { display: inline-flex; }
.p-heute { display: block; margin-top: 2px; font-size: 12px; font-weight: 700; color: var(--ok-tx); }
body[data-mandant="med"] .p-heute { color: var(--ak2, var(--ok-tx)); }
/* Kunden-Portal E1 (Korrektur 3): «Heute erreichbar bis …» war bei iPersonal grau, weil «.p-bk-zeile small» (0,1,1) stärker war als «.p-heute» (0,1,0).
   Jetzt mit dem Ort der Zeile in der Berater-Karte, Grün bei beiden Abteilungen wie im Muster. */
.p-bk-zeile small.p-heute { color: var(--ok-tx); }
body[data-mandant="med"] .p-bk-zeile small.p-heute { color: var(--ak2, var(--ok-tx)); }
/* Kunden-Portal E1 (Korrektur 3): die Zeilenkarten gelten nur für die Liste der Fachkräfte (.p-karten). Vorher trafen sie auch die Beispielkarten neben dem
   Login (.ka-vorschau ohne Knöpfe), dort lagen ab 1024 px die Beschriftungen übereinander. */
@media (min-width: 1024px) {
  .p-raster { grid-template-columns: minmax(0, 1fr) 300px; }
  .p-karten { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .p-karten .p-kd { display: grid; grid-template-columns: 42px minmax(0, 1fr) 150px; grid-template-areas: "kopf kopf fuss" ". fakten fuss";
    column-gap: 16px; row-gap: 10px; padding: 16px 18px; align-items: start; }
  .p-karten .p-kd-kopf { grid-area: kopf; }
  .p-karten .p-kd-fakten { grid-area: fakten; max-width: 470px; }
  .p-karten .p-kd-frist { grid-column: 2 / 4; justify-self: start; } /* nur mit Hinweis eine Zeile mehr */
  .p-karten .p-kd-fuss { grid-area: fuss; align-self: center; display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 4px; }
  .p-karten .p-kd-fuss .anfragen { flex: none; width: 100%; }
  .p-karten .p-kd-fuss [data-kurz] { order: 1; justify-content: center; }
  .p-karten .p-kd-fuss [data-nein] { order: 2; justify-content: center; }
  .p-karten .p-kd-fuss .knopf.leise { min-height: 36px; }
  .p-karten .p-kd-kurz { grid-column: 1 / -1; }
  .p-karten .p-kd-fakten > div { padding: 9px 11px; }
  .p-karten .p-kd-fakten b, .p-karten .p-kd-fakten small { overflow-wrap: normal; }
}
/* Kunden-Portal E1 (Korrektur 3): drei Spalten Karte | Liste | Ansprechperson erst ab 1366 px. Von 1024 bis 1365 px (iPad quer, kleine Laptops) blieben der
   Liste nur 250 bis 450 px und die Zeilen brachen. Dort steht die Karte über der Liste, rechts die Spalte der Ansprechperson (wie im Muster, nur gestapelt). */
@media (min-width: 1024px) and (max-width: 1365.98px) {
  .p-raster.mit-karte { grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: auto 1fr; grid-template-areas: "karte spalte" "liste spalte"; }
  .p-raster.mit-karte > .p-kartebox { grid-area: karte; position: relative; top: auto; }
  .p-raster.mit-karte > .p-karten { grid-area: liste; }
  .p-raster.mit-karte > .p-spalte { grid-area: spalte; }
  .p-raster.mit-karte .p-karte { height: 400px; }
}
@media (min-width: 1366px) { .p-raster.mit-karte { grid-template-columns: 380px minmax(0, 1fr) 300px; } }
@media (min-width: 1600px) { .p-raster.mit-karte { grid-template-columns: 400px minmax(0, 1fr) 320px; } .p-raster { grid-template-columns: minmax(0, 1fr) 320px; } }
/* Kunden-Portal E1 (Korrektur 3): Registrierung bei 390 px nie breiter als der Bildschirm. Die Spalte der Bühne war «auto» (so breit wie der längste Inhalt),
   lange Berufe in den Chips und lange Firmennamen aus dem Handelsregister zogen sie über den Rand. Jetzt höchstens 100 %, Chips und Treffer brechen um. */
@media (max-width: 1023.98px) { .ka-buehne { grid-template-columns: minmax(0, 1fr); } }
.ka-karte .chips .chip { white-space: normal; max-width: 100%; text-align: left; overflow-wrap: anywhere; line-height: 1.3; padding-top: 8px; padding-bottom: 8px; }
.ka-karte .chips .chip svg.i { flex: none; }
.rg-karte .kp-firma-text b { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.rg-karte .kp-firma-text span { overflow-wrap: anywhere; }
/* Kunden-Portal E1 (Korrektur 3): Kopf ab 1024 px. Bei MediPersonal ragte er bei 1024 bis 1069 px über den Rand (seitliches Schieben, Abmelden ausserhalb
   des Bildes), die Reiter brachen in zwei Zeilen. Reiter jetzt immer einzeilig. Bis 1365 px ohne den Titel «Kunden-Portal» (die Firma steht rechts und in der
   Überschrift), bis 1279 px rechts nur die Initialen der Firma (Name und Ort bleiben für Vorleseprogramme lesbar). */
@media (min-width: 1024px) { .p-nav { flex: none; } .p-nav button { white-space: nowrap; } }
@media (min-width: 1024px) and (max-width: 1365.98px) { .p-kopf-titel { display: none; } }
@media (min-width: 1024px) and (max-width: 1279.98px) {
  .p-wer { padding-left: 10px; }
  .p-wer > div { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Update 7 (KP25): Altersfilter «Alter von – bis» in der Filterleiste und Hinweis «knapp daneben» (nur Tokens, MediPersonal ohne Rot) */
.p-filter .p-alter { flex-wrap: nowrap; }
.p-alter .p-alter-wahl { flex: 0 0 auto; width: 5.6em; min-width: 0; padding-right: 28px; font-weight: 700; font-size: 14px; }
.p-alter .p-alter-bis { color: var(--muted); font-weight: 700; }
.p-alter-hinweis { padding: 10px 14px; font-size: 14px; }
.p-alter-hinweis > div { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.p-alter-hinweis p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.p-alter-hinweis p > span { flex: 1 1 260px; min-width: 0; }
.p-alter-hinweis .knopf { flex: none; }
@media (max-width: 1023.98px) {
  .p-filter .p-alter { flex: 1 1 100%; }
  .p-alter .p-alter-wahl { flex: 1 1 0; width: 0; }
}
/* Update 20: Berufssuche nur in den Berufen der Marke, Knopf «Anderer Beruf» (ganze Liste) unter den Treffern */
.p-alle { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 8px 0 0; }
.p-alle .knopf.leise { padding: 0 6px; }