/* ============================================================
   Oberflaechen-Darstellungen des Portals und der App.
   Naturgetreu nachgebaut, mit erfundenen Beispieldaten — in einer
   oeffentlichen Website duerfen keine echten Patientendaten stehen.
   Reines HTML/CSS: bleibt bei jeder Bildschirmgroesse scharf und
   funktioniert in hellem wie dunklem Farbschema.
   ============================================================ */

:root{
  --pt-green:#2D5636;      /* Portal-Dunkelgruen, wie im Zugangsbrief */
  --pt-leaf:#BEE08C;       /* helle Kleeblatt-Blase */
  --pt-mint:#F0FDF4;
  --pt-line:#D6E4D2;
  --pt-ink:#1D2B20;
  --pt-soft:#54664F;
  --pt-paper:#FFFFFF;
  --pt-chrome:#E8E3DA;
}
:root[data-theme="dark"], :root:not([data-theme="light"]){
  --pt-shadow:0 20px 50px -22px rgba(0,0,0,.7);
}

.ui-figur{margin:0}
.ui-figur figcaption{
  font-size:.86rem;color:var(--ink-faint);margin-top:14px;text-align:center;
  max-width:46ch;margin-left:auto;margin-right:auto;line-height:1.5;
}

/* ---------- Rahmen: Laptop ---------- */
.ui-laptop{
  background:var(--pt-chrome);border:1px solid var(--line);border-radius:14px;
  padding:10px 10px 0;box-shadow:var(--shadow);overflow:hidden;
}
:root[data-theme="dark"] .ui-laptop{background:#2A251C}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ui-laptop{background:#2A251C}}
.ui-bar{display:flex;align-items:center;gap:7px;padding:0 4px 9px}
.ui-bar i{width:9px;height:9px;border-radius:50%;background:#C9C1B4;flex:none}
.ui-bar .url{
  flex:1;background:var(--pt-paper);border-radius:7px;font-size:.68rem;
  color:var(--pt-soft);padding:4px 10px;margin-left:6px;
  font-family:var(--font-body);letter-spacing:.01em;overflow:hidden;white-space:nowrap;
}
.ui-schirm{background:var(--pt-paper);border-radius:9px 9px 0 0;overflow:hidden;color:var(--pt-ink)}

/* ---------- Rahmen: Handy ---------- */
.ui-handy{
  width:272px;margin:0 auto;background:#1A1A1A;border-radius:34px;padding:9px;
  box-shadow:var(--shadow);
}
.ui-handy .ui-schirm{border-radius:26px;position:relative;padding-top:20px}
.ui-handy .notch{
  position:absolute;top:7px;left:50%;transform:translateX(-50%);
  width:58px;height:5px;border-radius:9px;background:#DDD6CA;
}

/* ---------- Portal-Innenleben ---------- */
.pt-kopf{
  background:var(--pt-green);color:#fff;padding:13px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.pt-marke{display:flex;align-items:center;gap:9px;font-weight:700;font-size:.95rem}
.pt-blase{
  width:26px;height:26px;border-radius:50% 50% 50% 6px;background:var(--pt-leaf);
  display:grid;place-items:center;flex:none;
}
.pt-blase svg{width:15px;height:15px;fill:var(--pt-green)}
.pt-aa{display:flex;gap:5px}
.pt-aa span{
  background:rgba(255,255,255,.18);border-radius:6px;padding:3px 8px;
  font-size:.7rem;font-weight:700;line-height:1.2;
}
.pt-aa span.an{background:#fff;color:var(--pt-green)}

.pt-koerper{padding:16px}
.pt-gruss{font-size:1.02rem;font-weight:700;margin:0 0 3px}
.pt-gruss + .pt-klein{font-size:.78rem;color:var(--pt-soft);margin:0 0 15px}

.pt-karte{
  border:1px solid var(--pt-line);border-radius:12px;padding:13px 14px;
  background:var(--pt-mint);margin-bottom:11px;
}
.pt-karte .lbl{
  font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--pt-soft);font-weight:700;margin-bottom:6px;
}
.pt-person{display:flex;align-items:center;gap:11px}
.pt-avatar{
  width:38px;height:38px;border-radius:50%;background:var(--pt-leaf);
  color:var(--pt-green);display:grid;place-items:center;font-weight:700;
  font-size:.9rem;flex:none;
}
.pt-person b{display:block;font-size:.92rem}
.pt-person span{font-size:.76rem;color:var(--pt-soft)}
.pt-naechst{
  margin-top:10px;padding-top:9px;border-top:1px solid var(--pt-line);
  font-size:.8rem;color:var(--pt-green);font-weight:700;
}

.pt-kacheln{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.pt-kachel{
  border:1px solid var(--pt-line);border-radius:12px;padding:13px 12px;
  background:var(--pt-paper);
}
.pt-kachel .ic{font-size:1.25rem;line-height:1;margin-bottom:7px;display:block}
.pt-kachel b{font-size:.85rem;display:block;line-height:1.25}
.pt-kachel span{font-size:.72rem;color:var(--pt-soft)}

.pt-budget{display:flex;gap:14px;align-items:flex-end;margin-top:3px}
.pt-budget div{flex:1}
.pt-budget b{font-family:var(--font-display);font-size:1.3rem;display:block;line-height:1;color:var(--pt-green)}
.pt-budget span{font-size:.7rem;color:var(--pt-soft)}
.pt-balken{height:6px;border-radius:4px;background:var(--pt-line);overflow:hidden;margin-top:9px}
.pt-balken i{display:block;height:100%;background:var(--pt-green);border-radius:4px}

/* Besuchsliste */
.pt-liste{list-style:none;padding:0;margin:0}
.pt-liste li{
  display:flex;gap:11px;align-items:flex-start;padding:11px 0;
  border-bottom:1px solid var(--pt-line);
}
.pt-liste li:last-child{border-bottom:0}
.pt-tag{
  width:38px;flex:none;text-align:center;background:var(--pt-mint);
  border:1px solid var(--pt-line);border-radius:8px;padding:3px 0;
}
.pt-tag b{display:block;font-size:.95rem;line-height:1.1;color:var(--pt-green)}
.pt-tag span{font-size:.6rem;text-transform:uppercase;letter-spacing:.06em;color:var(--pt-soft)}
.pt-liste .txt b{font-size:.86rem;display:block}
.pt-liste .txt span{font-size:.74rem;color:var(--pt-soft)}
.pt-marke-chip{
  display:inline-block;font-size:.62rem;font-weight:700;padding:2px 6px;
  border-radius:5px;background:#FFEFD6;color:#8A5A09;margin-top:3px;
}

/* Abrechnung: Monat mit zwei Dokumenten */
.pt-monat{border:1px solid var(--pt-line);border-radius:12px;margin-bottom:10px;overflow:hidden}
.pt-monat h4{
  margin:0;padding:9px 13px;background:var(--pt-mint);font-size:.82rem;
  font-family:var(--font-body);font-weight:700;border-bottom:1px solid var(--pt-line);
}
.pt-dok{display:grid;grid-template-columns:1fr 1fr}
.pt-dok a{
  padding:12px 13px;display:flex;gap:9px;align-items:center;font-size:.8rem;
  font-weight:600;color:var(--pt-ink);
}
.pt-dok a + a{border-left:1px solid var(--pt-line)}
.pt-dok .ic{
  width:28px;height:28px;border-radius:7px;background:var(--pt-mint);
  border:1px solid var(--pt-line);display:grid;place-items:center;flex:none;font-size:.9rem;
}
.pt-dok span.s{display:block;font-size:.68rem;color:var(--pt-soft);font-weight:400}

/* Unterschrift */
.pt-sig{
  border:2px dashed var(--pt-line);border-radius:12px;background:var(--pt-mint);
  padding:16px;text-align:center;
}
.pt-sig svg{width:100%;height:52px;overflow:visible}
.pt-sig path{fill:none;stroke:var(--pt-green);stroke-width:2.4;stroke-linecap:round}
.pt-sig p{font-size:.72rem;color:var(--pt-soft);margin:9px 0 0}
.pt-knopf{
  display:block;background:var(--pt-green);color:#fff;text-align:center;
  border-radius:9px;padding:11px;font-weight:700;font-size:.86rem;margin-top:11px;
}

/* Nachrichten-Verlauf */
.pt-chat{display:flex;flex-direction:column;gap:9px}
.pt-blubb{max-width:84%;padding:10px 13px;border-radius:13px;font-size:.81rem;line-height:1.45}
.pt-blubb.ich{align-self:flex-end;background:var(--pt-green);color:#fff;border-bottom-right-radius:4px}
.pt-blubb.buero{align-self:flex-start;background:var(--pt-mint);border:1px solid var(--pt-line);border-bottom-left-radius:4px}
.pt-blubb .wann{display:block;font-size:.65rem;opacity:.75;margin-top:4px}
.pt-erledigt{
  align-self:center;font-size:.68rem;color:var(--pt-soft);background:var(--pt-mint);
  border:1px solid var(--pt-line);border-radius:99px;padding:3px 11px;
}

/* Anordnung der Darstellungen auf der Seite */
.ui-reihe{display:grid;grid-template-columns:1.45fr 1fr;gap:clamp(24px,4vw,46px);align-items:center}
.ui-reihe.gedreht .ui-text{order:2}
@media(max-width:900px){.ui-reihe{grid-template-columns:1fr}.ui-reihe.gedreht .ui-text{order:0}}
.ui-text h3{font-size:clamp(1.3rem,2.6vw,1.75rem);margin-bottom:12px}
.ui-text p{color:var(--ink-soft)}
.ui-galerie{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,34px);align-items:start}
@media(max-width:820px){.ui-galerie{grid-template-columns:1fr;max-width:420px;margin:0 auto}}

/* ---------- Versorgungsportal (Partner-Ansicht) ----------
   Eigene Farbwelt wie in der echten App: ein ruhiges Petrol für die
   Zusammenarbeit zweier Dienste, nicht das FrohZeit-Grün. */
.vp-schirm{--pt-green:#1f6f6b;--pt-leaf:#b0dfdb;--pt-mint:#eff9f8;--pt-line:#d7efed;
  --pt-ink:#113230;--pt-soft:#4a6462}
.vp-kopf{background:#1f6f6b;color:#fff;padding:13px 16px;display:flex;
  align-items:center;justify-content:space-between;gap:10px}
.vp-marke{display:flex;align-items:center;gap:9px;font-weight:700;font-size:.95rem}
.vp-ring{width:26px;height:26px;flex:none;position:relative}
.vp-ring i{position:absolute;top:3px;width:17px;height:17px;border-radius:50%}
.vp-ring i:first-child{left:0;background:#b0dfdb}
.vp-ring i:last-child{right:0;border:2.5px solid rgba(255,255,255,.6)}
.vp-kopf .wer{font-size:.72rem;opacity:.85}

.vp-zeile{display:flex;gap:10px;align-items:flex-start;padding:12px 0;
  border-bottom:1px solid var(--pt-line)}
.vp-zeile:last-child{border-bottom:0}
.vp-zeile .pt-avatar{background:#b0dfdb;color:#1f6f6b}
.vp-chip{display:inline-block;font-size:.62rem;font-weight:700;padding:2px 7px;
  border-radius:99px;background:#1f6f6b;color:#fff}
.vp-chip.warn{background:#fef3c7;color:#92400e}
.vp-chip.alarm{background:#fee2e2;color:#b91c1c}
.vp-meta{display:flex;justify-content:space-between;gap:10px;font-size:.74rem;
  color:var(--pt-soft);margin-top:4px}
.vp-meta b{color:var(--pt-ink);font-weight:600}