/* ===================== Portale 1 (G1): Kunden-Portal, Kunden-Login und Link-Seite =====================
   Baut auf aussen-basis.css (Token, Knöpfe, Felder, Berater-Karte, Karte .kk, Blatt) und css/marke.css (Logo-Fläche).
   Handy zuerst: eine Spalte, Karten untereinander, Anfrage senden fest unten. Ab 1024 px: Karten in der Mitte, Berater-Karte rechts.
   Bausteine: .kp-* Portal, .ka-* Anmelden und Link, .kq-* Anfrage und Meine Anfragen. */

/* ---------- Kopf ---------- */
.kp-produkt { display: flex; flex-direction: column; min-width: 0; padding-left: 14px; border-left: 1px solid var(--line); line-height: 1.25; }
.kp-produkt b { font-size: 15px; }
.kp-produkt span { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.a-kopf .reiter { margin-left: 14px; }
.kp-abmelden .knopf-text { display: inline; }
.kp-firma-knopf { max-width: 280px; }
.kp-firma-knopf span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 1024px) { .a-kopf-innen { min-height: 76px; } }

/* ---------- Raster ---------- */
.kp-raster { display: grid; gap: 18px; align-items: start; }
.kp-haupt { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.kp-seite { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (min-width: 1024px) {
  .kp-raster { grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; }
  .kp-seite { position: sticky; top: 100px; }
}

/* Firmenwahl (mehrere Firmen) */
.kp-firma { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 8px 14px; border-radius: 14px; border: 1px solid var(--line-strong);
  background: var(--flaeche); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.kp-firma > svg.i:first-child { color: var(--muted); }
.kp-firma-text { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.kp-firma-text b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-firma-text span { font-size: 13px; color: var(--muted); }
/* Abnahme: neutral wie «Andere E-Mail-Adresse», Rot bleibt der einen Hauptaktion vorbehalten */
.kp-firma-wechsel { font-size: 13px; font-weight: 700; color: var(--text); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* ---------- Filter ---------- */
.kp-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kp-filter .chip { flex: 1 1 auto; justify-content: space-between; }
.kp-filter .chip svg.i:last-child { width: 15px; height: 15px; }
.kp-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.kp-anzahl { font-size: 14px; color: var(--muted); }
.kp-anzahl b { color: var(--text); }
.kp-frist { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--muted); }
.kp-frist svg.i { width: 18px; height: 18px; color: var(--muted); margin-top: 1px; }
/* Grosser Bildschirm: Filterleiste mit Beruf, Umkreis und verfügbar bis */
.kp-leiste { padding: 12px 14px; display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; }
.kp-leiste-gruppe { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.kp-leiste-lbl { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.kp-leiste .chips { gap: 6px; }
.kp-leiste .chip { min-height: 40px; padding: 0 12px; font-size: 13.5px; }
.kp-leiste .segment button { min-height: 36px; font-size: 13.5px; }
.kp-leiste .eingabe { min-height: 40px; padding: 6px 12px; font-size: 14px; width: auto; }
.kp-leiste-trenner { width: 1px; align-self: stretch; background: var(--line); }

/* ---------- Karten ---------- */
.kp-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 14px; }
.kk-beruf { display: flex; flex-direction: column; gap: 2px; }
.kk .knr { flex: none; }
.kk-fakten li > span { min-width: 0; }
.kk-fakten .gruen { color: var(--ok-tx); font-weight: 700; }
.kk-plaketten { display: flex; flex-wrap: wrap; gap: 8px; }
.kk-knoepfe .knopf { min-height: 50px; }
.kk-knoepfe .knopf svg.i { width: 18px; height: 18px; }
.kk-frist { padding: 9px 12px; border-radius: 10px; background: var(--warn-bg); border: 1px solid var(--warn-ln); }
.kk.gewaehlt .kk-beruf, .kk.angefragt .kk-beruf { padding-right: 0; }
.kk-hinweis { font-size: 13.5px; color: var(--muted); }
.kp-mehr { align-self: stretch; }

/* ---------- Auswahl (grosser Bildschirm rechts) ---------- */
.kp-box { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.kp-box-kopf { display: flex; align-items: center; gap: 10px; }
.kp-box-kopf h2 { font-size: 18px; }
.kp-box-kopf .zahl-rund { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 99px; background: var(--invers-bg); color: var(--invers-tx); font-size: 13px; font-weight: 700; }
.kp-box .kk-mini .knopf { flex: none; }
.kp-box-unter { font-size: 13px; color: var(--muted); }

/* ---------- Anfrage-Fenster, Bestätigung, Meine Anfragen ---------- */
.kq-liste { display: flex; flex-direction: column; gap: 8px; }
.kq-felder { display: grid; gap: 14px; }
.kq-felder .zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 359.98px) { .kq-felder .zwei { grid-template-columns: 1fr; } }
.kq-danke { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; padding: 30px 20px; }
.kq-danke h2 { font-size: 22px; max-width: 460px; }
.kq-danke .bk-kompakt { width: 100%; max-width: 420px; text-align: left; border-radius: 16px; border: 1px solid var(--line); background: var(--flaeche-2); }
.kq-anfrage { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.kq-anfrage-kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.kq-anfrage-kopf b { font-size: 16px; }
.kq-anfrage-kopf > div > span { font-size: 13px; color: var(--muted); display: block; } /* Abnahme: nur die Unterzeile, nicht die Plakette (Abstand Symbol und Text) */
.kq-werte { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 0; }
.kq-werte div { padding: 10px 12px; border-radius: 12px; background: var(--flaeche-2); border: 1px solid var(--line); min-width: 0; }
@media (max-width: 559.98px) { .kq-werte div:last-child:nth-child(odd) { grid-column: 1 / -1; } } /* Abnahme: Einsatzort am Handy über die ganze Breite statt dreizeilig */
.kq-werte dt { font-family: var(--mono); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.kq-werte dd { margin: 3px 0 0; font-size: 14.5px; font-weight: 700; overflow-wrap: break-word; }
.kq-kand { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.kq-kand li { display: flex; gap: 10px; align-items: center; font-size: 14.5px; min-width: 0; }
.kq-kand li span:last-child { min-width: 0; overflow-wrap: anywhere; }

/* ---------- Leere Zustände im Portal ---------- */
.kp-leer { padding: 8px 4px; }
.kp-leer .leer { padding: 34px 18px; }
.kp-erklaerung { font-size: 14.5px; color: var(--muted); }

/* ---------- Anmelden und Link (mittige Karte) ---------- */
.ka-buehne { flex: 1; display: grid; place-items: start center; padding: 22px var(--rand) 28px; }
.ka-karte { width: 100%; max-width: 460px; padding: 24px 20px; display: flex; flex-direction: column; gap: 18px; }
.ka-karte h1 { font-size: 26px; letter-spacing: -.025em; }
.ka-karte .ka-unter { color: var(--muted); font-size: 15px; margin-top: -8px; }
.ka-firma { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: var(--flaeche-2); border: 1px solid var(--line); font-weight: 700; }
.ka-firma svg.i { color: var(--muted); }
.ka-klein { font-size: 13.5px; color: var(--muted); text-align: center; }
.ka-fang { position: absolute !important; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; }
.ka-unten { font-size: 14px; color: var(--muted); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.ka-tel { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 6px; font-weight: 700; color: var(--text); text-decoration: none; }
.ka-tel svg.i { width: 18px; height: 18px; color: var(--muted); }
/* Update 13 (Entscheid 8): «So sieht das Kunden-Portal aus» neben dem Login (ab 1024 px) bzw. darüber (Handy und Tablett nur auf der ersten Ansicht,
   .ka-start). Drei Vorteile und ein nachgebauter, nicht klickbarer Ausschnitt der Kundenansicht mit erfundenen Daten (kunde.js vorschauKarten).
   Nur Token (hell/dunkel, MediPersonal Blau/Grün über body[data-mandant]), keine Bilddatei, keine style-Attribute. Vorher: zwei schräge Musterkarten,
   nur ab 1024 px. */
.ka-vorschau { display: none; }
.ka-buehne.ka-start { row-gap: 20px; }
.ka-buehne.ka-start .ka-vorschau { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 460px; min-width: 0; }
.ka-vorteile { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ka-vorschau-titel { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.25; }
.ka-vorteile-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; line-height: 1.35; }
.ka-vorteile-liste li { display: flex; align-items: flex-start; gap: 10px; min-width: 0; }
.ka-vorteile-liste li > span:last-child { min-width: 0; padding-top: 2px; }
.ka-vorteil-haken { flex: none; display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--ok-bg); border: 1px solid var(--ok-ln); color: var(--ok-tx); }
.ka-vorteil-haken svg.i { width: 14px; height: 14px; stroke-width: 2.6; }
.ka-bild { margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ka-bild-innen { border-radius: 18px; border: 1px solid var(--line-strong); background: var(--app); box-shadow: var(--sch-2); overflow: hidden; pointer-events: none; user-select: none; }
.ka-bild-leiste { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid var(--line); background: var(--flaeche); }
.ka-bild-punkte { display: inline-flex; gap: 5px; }
.ka-bild-punkte i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-3); }
.ka-bild-titel { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: var(--muted); }
/* Korrektur 1: Reiter brechen um statt abgeschnitten zu werden (vorher overflow hidden ohne Umbruch: «Laufende Einsätze» bei MediPersonal schon bei 1440 px
   halb weg, zwischen 1024 und 1279 px bei beiden Marken). Etwas enger, damit die drei Reiter ab 1100 px bei beiden Marken in eine Zeile passen. */
.ka-bild-reiter { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px 12px 0; }
.ka-bild-reiter span { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 999px; border: 1px solid transparent; font-size: 12px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.ka-bild-reiter span.an { background: var(--flaeche); border-color: var(--line-strong); color: var(--text); }
.ka-bild-reiter svg.i { width: 14px; height: 14px; flex: none; }
.ka-bild-reiter em { font-style: normal; min-width: 20px; padding: 0 6px; border-radius: 99px; background: var(--flaeche-3); font-size: 11.5px; line-height: 18px; text-align: center; color: var(--text); }
.ka-bild-karten { display: grid; gap: 10px; padding: 10px 12px; }
.ka-bild .ka-muster { padding: 12px; gap: 10px; }
.ka-bild .p-kd-fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ka-bild .ka-muster-knopf { min-height: 40px; font-size: 14px; }
.ka-bild-stand { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 12px 12px; }
.ka-bild-stand > div { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--flaeche); min-width: 0; }
.ka-bild-stand .p-lbl { display: flex; align-items: center; gap: 5px; }
.ka-bild-stand .p-lbl svg.i { width: 13px; height: 13px; flex: none; }
.ka-bild-stand b { font-size: 13.5px; line-height: 1.3; overflow-wrap: anywhere; }
.ka-bild-stand small { font-size: 12px; font-weight: 700; color: var(--muted); }
.ka-bild-stand > div + div small { color: var(--ok-tx); }
/* Handy und Tablett: kompakt (eine Beispielkarte, Reiter mit Zahlen statt Stand-Kacheln, Kennzeichnung «Beispiel» nur oben), die Anmeldung bleibt nah */
@media (max-width: 1023.98px) {
  .ka-vorschau-titel { font-size: 18px; }
  .ka-vorteile-liste { font-size: 14px; gap: 6px; }
  .ka-vorteil-haken { width: 22px; height: 22px; }
  .ka-bild-karten .ka-muster + .ka-muster, .ka-bild-stand, .ka-bild .ka-muster .p-knr, .ka-bild .ka-muster .unter { display: none; }
  .ka-bild-reiter { padding: 8px 10px 0; }
  .ka-bild-reiter span { padding: 4px 8px; }
  .ka-bild-reiter svg.i { display: none; }
  .ka-bild-karten { padding: 8px 10px 10px; }
  .ka-bild .ka-muster { padding: 10px; gap: 8px; }
  .ka-bild .p-kd-fakten > div { padding: 7px 9px; }
  .ka-bild .ka-muster-knopf { min-height: 36px; }
  .ka-vorschau-satz { font-size: 12.5px; }
  /* Unterzeile und Zeichen der Anmeldekarte sagen dasselbe wie die drei Vorteile darüber: am Handy weg, das Feld rückt nach oben */
  .ka-buehne.ka-start .ka-karte > .a-zeichen, .ka-buehne.ka-start .ka-karte > .ka-unter { display: none; }
}
/* Korrektur 1: Handys unter 830 px Höhe (z.B. 360x640, 375x667, 320x568 und die meisten Handys mit eingeblendeter Browserleiste): Titel und drei Vorteile
   bleiben über dem Feld, der Ausschnitt rückt direkt unter die Anmeldekarte, damit das E-Mail-Feld ohne Scrollen sichtbar ist (vorher lag es dort unter
   dem Falz). .ka-vorschau gibt ihre beiden Teile ans Raster der Bühne ab (display: contents), die Reihenfolge kommt über order. */
@media (max-width: 1023.98px) and (max-height: 829.98px) {
  .ka-buehne.ka-start .ka-vorschau { display: contents; }
  .ka-buehne.ka-start .ka-vorteile, .ka-buehne.ka-start .ka-bild { width: 100%; max-width: 460px; }
  .ka-buehne.ka-start .ka-bild { order: 2; }
}
/* Sehr niedrig (Handy quer): zuerst die Anmeldekarte, Vorteile und Ausschnitt darunter */
@media (max-width: 1023.98px) and (max-height: 559.98px) {
  .ka-buehne.ka-start .ka-vorteile { order: 1; }
}
@media (min-width: 768px) {
  .ka-buehne { place-items: center; padding: 48px var(--rand); }
  .ka-karte { padding: 32px 32px; }
}
@media (min-width: 1024px) {
  .ka-buehne { grid-template-columns: minmax(0, 520px) 460px; gap: 56px; justify-content: center; align-items: center; }
  .ka-vorschau, .ka-buehne.ka-start .ka-vorschau { display: flex; flex-direction: column; gap: 18px; max-width: 520px; min-width: 0; }
  .ka-vorschau-titel { font-size: 26px; line-height: 1.2; }
  .ka-vorteile-liste { font-size: 16px; }
}

/* ---------- Fuss der Portalseiten ---------- */
.a-fuss .a-fuss-zeile a { display: inline-flex; align-items: center; min-height: 44px; }
.a-fuss .a-fuss-tel { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--text); font-weight: 700; text-decoration: none; }

/* ---------- Ergänzungen ---------- */
.ka-teil { display: flex; flex-direction: column; gap: 18px; }
.ka-teil .knopf.leise { align-self: center; min-height: 44px; }
.ka-vorschau-satz { font-size: 13px; line-height: 1.4; color: var(--muted); margin: 0; } /* Update 13: Bildunterschrift des Ausschnitts (vorher 15 px, mittig) */
.bk-block { display: flex; flex-direction: column; gap: 12px; }
.bk-block + .bk-block { padding-top: 16px; border-top: 1px solid var(--line); }
.bk-block .bk-zeilen { gap: 8px; padding-left: 2px; }
.bk-block .bk-zeile b { font-size: 14px; font-weight: 600; }
.kp-unten { margin-top: 6px; }
.kp-firma.an { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.kp-firma > svg.i:last-child:not(:first-child) { color: var(--ok-tx); }
.blatt .felder { gap: 8px; }
.blatt .segment { display: grid; grid-auto-flow: column; width: 100%; }
.ka-intern { font-size: 19px; font-weight: 700; line-height: 1.4; letter-spacing: -.01em; }