/* Heilsan – Patientenportal, Symptom-Check, Sprachassistent, Videosprechstunde */

/* ---------- Symptom-Check ---------- */
.sc { display: flex; flex-direction: column; gap: 14px; max-width: 720px; margin: 0 auto; }
.sc h2 { font-size: 21px; }
.sc-hero { text-align: center; padding: 18px 8px 4px; }
.sc-hero-ic { width: 58px; height: 58px; margin: 0 auto 10px; border-radius: 18px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, var(--accent), var(--violet)); box-shadow: 0 10px 30px rgba(56, 189, 248, .3); }
.sc-hero-ic svg { width: 30px; height: 30px; }
.sc-hero p { color: var(--muted); max-width: 560px; margin: 8px auto 0; }
.sc-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px; }
.sc-step { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.sc-wide { width: 100%; }
.sc-emerg { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--err); background: var(--err-soft); border-radius: 10px; padding: 8px 12px; }
.sc-emerg svg { width: 16px; height: 16px; flex: 0 0 16px; }
.sc-emerg a { color: inherit; text-decoration: underline; }
.sc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sc-chip { font: inherit; font-size: 13.5px; padding: 8px 13px; border-radius: 999px; border: 1px solid var(--line2); background: var(--panel2); color: var(--text); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: all var(--t); }
.sc-chip svg { width: 13px; height: 13px; }
.sc-chip:hover { border-color: var(--accent); }
.sc-chip.on { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.sc-chip.slot { font-family: var(--mono); font-size: 13px; }
.sc-quote { font-style: italic; color: var(--text2); padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 10px 10px 0; }
.sc-progress { height: 6px; border-radius: 6px; background: var(--panel3); overflow: hidden; }
.sc-progress i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--accent), var(--violet)); transition: width .4s ease; }
.sc-qcard { background: var(--panel); border: 1px solid var(--line2); border-radius: 18px; padding: 24px 20px; text-align: center; box-shadow: var(--shadow-sm); animation: pop-in .2s ease; }
.sc-qcard.red { border-color: rgba(239, 68, 68, .45); box-shadow: 0 0 0 1px rgba(239, 68, 68, .15); }
.sc-qgroup { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 650; }
.sc-qcard.red .sc-qgroup { color: var(--err); }
.sc-q { font-size: 20px; font-weight: 650; line-height: 1.35; margin: 10px 0 20px; }
.sc-ans { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.sc-ans .btn.lg { min-width: 120px; }
.sc-yes:hover { border-color: var(--ok); }
.sc-no:hover { border-color: var(--err); }
.sc-level { display: flex; gap: 14px; align-items: center; padding: 18px; border-radius: 18px; color: #fff; background: var(--lc); box-shadow: 0 12px 34px rgba(0, 0, 0, .18); }
.sc-level-ic { width: 52px; height: 52px; flex: 0 0 52px; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 255, 255, .2); }
.sc-level-ic svg { width: 28px; height: 28px; }
.sc-level-t { font-size: 21px; font-weight: 750; line-height: 1.2; }
.sc-scale { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.sc-scale i { height: 7px; border-radius: 4px; background: var(--panel3); }
.sc-scale i.on { background: var(--lc); }
.sc-cond { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 13px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 7px; transition: border-color var(--t); }
.sc-cond:hover { border-color: var(--line2); }
.sc-bar { height: 8px; border-radius: 6px; background: var(--panel3); overflow: hidden; }
.sc-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--accent), var(--violet)); }
.sc-det { border-top: 1px dashed var(--line2); padding-top: 8px; margin-top: 2px; }
.sc ul { margin: 6px 0 0; padding-left: 20px; }
.sc ul li { margin: 3px 0; }

/* ---------- Sprachassistent ---------- */
.va { display: flex; flex-direction: column; gap: 10px; }
.va-head { display: flex; align-items: center; gap: 14px; padding: 6px 0; }
.va-state { font-weight: 650; color: var(--text2); }
.va-orb { width: 54px; height: 54px; border-radius: 50%; position: relative; flex: 0 0 54px; background: radial-gradient(circle at 35% 30%, #bae6fd, var(--accent) 45%, var(--violet)); box-shadow: 0 0 24px rgba(56, 189, 248, .35); }
.va-orb i { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; }
.va-orb.idle, .va-orb.ended { filter: grayscale(.7); opacity: .7; }
.va-orb.listening i { animation: va-ring 1.6s infinite; }
.va-orb.listening i:nth-child(2) { animation-delay: .5s; }
.va-orb.listening i:nth-child(3) { animation-delay: 1s; }
.va-orb.speaking { animation: va-pulse .7s infinite alternate; }
.va-orb.thinking, .va-orb.connecting { animation: spin 2.4s linear infinite; background: conic-gradient(var(--accent), var(--violet), var(--pink), var(--accent)); }
@keyframes va-ring { from { transform: scale(.85); opacity: .8; } to { transform: scale(1.5); opacity: 0; } }
@keyframes va-pulse { from { transform: scale(.94); } to { transform: scale(1.06); } }
.va-log { min-height: 220px; max-height: 420px; overflow: auto; display: flex; flex-direction: column; gap: 8px; padding: 10px; border-radius: 12px; background: var(--bg2); border: 1px solid var(--line); }
.va-log.static { max-height: 60vh; }
.va-msg { max-width: 84%; padding: 9px 12px; border-radius: 14px; font-size: 14px; line-height: 1.45; white-space: pre-wrap; animation: fade-in .2s ease; }
.va-msg.agent { align-self: flex-start; background: var(--panel3); border-bottom-left-radius: 4px; }
.va-msg.caller, .va-msg.patient { align-self: flex-end; background: var(--accent); color: var(--accent-ink); border-bottom-right-radius: 4px; }
.va-msg.praxis { align-self: flex-start; background: var(--violet-soft); border-bottom-left-radius: 4px; }
.va-msg.partial { opacity: .65; }
.va-msg.sys { align-self: center; background: var(--warn-soft); color: var(--warn); font-size: 12.5px; max-width: 100%; }
.va-quick { display: flex; flex-wrap: wrap; gap: 6px; }
.va-input { display: flex; gap: 8px; }
.va-tools { display: flex; flex-direction: column; gap: 4px; max-height: 160px; overflow: auto; font-size: 12px; padding-top: 6px; }
.va-tool { padding: 4px 8px; border-radius: 7px; background: var(--panel2); }
.va-list { margin: 0; padding-left: 18px; color: var(--text2); }
.va-list li { margin: 5px 0; }

/* ---------- Videosprechstunde ---------- */
.tele { display: flex; flex-direction: column; gap: 10px; }
.tele-stage { position: relative; border-radius: 16px; overflow: hidden; background: #02060d; aspect-ratio: 16 / 9; min-height: 220px; }
.tele-remote { width: 100%; height: 100%; object-fit: cover; display: block; background: #02060d; }
.tele-local { position: absolute; right: 12px; bottom: 12px; width: 26%; max-width: 220px; min-width: 96px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; border: 2px solid rgba(255, 255, 255, .25); background: #111; transform: scaleX(-1); }
.tele-status { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 20px; color: #e6edf7; font-weight: 600; background: rgba(2, 6, 13, .55); }
.tele-badge { position: absolute; left: 12px; top: 12px; padding: 5px 10px; border-radius: 999px; background: rgba(2, 6, 13, .6); color: #fff; font-size: 12.5px; display: flex; align-items: center; gap: 4px; }
.tele-ctrl { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.tele.ended .tele-ctrl { display: none; }

/* ---------- Portal ---------- */
body.portal { overflow: auto; background-attachment: scroll; }
.pt-app { min-height: 100vh; display: grid; grid-template-columns: 250px 1fr; }
.pt-side { position: sticky; top: 0; height: 100vh; border-right: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; padding: 14px 10px; gap: 2px; overflow: auto; }
.pt-brand { display: flex; gap: 10px; align-items: center; padding: 4px 8px 14px; }
.pt-brand .brand-mark { width: 34px; height: 34px; }
.pt-brand b { display: block; font-size: 13.5px; line-height: 1.25; }
.pt-brand span { font-size: 11.5px; color: var(--muted); }
.pt-nav { display: flex; align-items: center; gap: 11px; padding: 10px 11px; border-radius: 11px; color: var(--text2); cursor: pointer; font-weight: 560; user-select: none; }
.pt-nav svg { width: 19px; height: 19px; flex: 0 0 19px; }
.pt-nav:hover { background: rgba(148, 163, 184, .1); }
.pt-nav.active { background: var(--accent-soft); color: var(--accent); }
.pt-nav .nav-badge { margin-left: auto; }
.pt-main { min-width: 0; }
.pt-top { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 10px; padding: 12px 20px; background: var(--panel); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.pt-top h1 { font-size: 17px; }
.pt-content { padding: 20px; max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; padding-bottom: 96px; }
.pt-bottom { display: none; }
.pt-greet { font-size: 24px; font-weight: 750; letter-spacing: -.01em; }
.pt-depart { border-radius: 20px; padding: 20px; color: #fff; background: linear-gradient(135deg, #0369a1, #6d28d9); box-shadow: 0 16px 40px rgba(3, 105, 161, .3); }
.pt-depart.go { background: linear-gradient(135deg, #c2410c, #b91c1c); animation: pulse-red 1.6s infinite; }
.pt-depart.calm { background: linear-gradient(135deg, #047857, #0369a1); }
.pt-depart .big { font-size: 40px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1.1; }
.pt-depart .lbl { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; font-weight: 650; }
.pt-depart .btn { background: rgba(0, 0, 0, .18); border-color: rgba(255, 255, 255, .55); color: #fff; }
.pt-depart .btn:hover { background: rgba(0, 0, 0, .3); }
.pt-quick { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pt-q { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; transition: all var(--t); font-weight: 620; }
.pt-q:hover { border-color: var(--accent); transform: translateY(-1px); }
.pt-q span.ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.pt-q span.ic svg { width: 19px; height: 19px; }
.pt-q small { color: var(--muted); font-weight: 450; }
.pt-doc { display: flex; gap: 12px; align-items: center; padding: 12px; border-radius: 13px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; transition: border-color var(--t); }
.pt-doc:hover { border-color: var(--line2); }
.pt-doc .ic { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 11px; display: grid; place-items: center; background: var(--panel3); color: var(--accent); }
.pt-doc .ic svg { width: 20px; height: 20px; }
.pt-medtbl td, .pt-medtbl th { text-align: center; }
.pt-medtbl td:first-child, .pt-medtbl th:first-child { text-align: left; }
.pt-qr { display: grid; place-items: center; background: #fff; border-radius: 16px; padding: 14px; width: min(300px, 100%); margin: 0 auto; }
.pt-qr svg { width: 100%; height: auto; display: block; }
.pt-login { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.pt-login .card { width: min(460px, 100%); }
.pt-frame { width: 100%; height: 70vh; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.pt-slotday { margin-top: 8px; }
.pt-slotday h4 { margin-bottom: 6px; }
@media (max-width: 900px) {
  .pt-app { grid-template-columns: 1fr; }
  .pt-side { display: none; }
  .pt-content { padding: 14px 14px 104px; }
  .pt-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pt-bottom { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--panel-solid); border-top: 1px solid var(--line2); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
  .pt-bottom div { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10.5px; color: var(--muted); padding: 5px 0; cursor: pointer; font-weight: 600; position: relative; }
  .pt-bottom div svg { width: 22px; height: 22px; }
  .pt-bottom div.active { color: var(--accent); }
  .pt-bottom .nav-badge { position: absolute; top: 0; right: 18%; height: 16px; min-width: 16px; font-size: 9.5px; }
  .pt-depart .big { font-size: 34px; }
  .sc-q { font-size: 18px; }
}

/* ---------- Gesundheitsportal 2.0 ---------- */
.pt-content { zoom: var(--pt-scale, 1); }
.pt-skip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.pt-skip:focus { width: auto; height: auto; clip: auto; clip-path: none; inset-inline-start: 8px; top: 8px; z-index: 200; background: var(--accent); color: var(--accent-ink); padding: 8px 12px; border-radius: 8px; }
.pt-app { overflow-x: clip; }
.pt-meds { display: flex; flex-direction: column; gap: 10px; }
.pt-med { padding: 12px; border-radius: 13px; border: 1px solid var(--line); background: var(--panel2); display: flex; flex-direction: column; gap: 6px; }
.pt-med-sched { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.pt-med-sched div { text-align: center; padding: 6px 2px; border-radius: 9px; background: var(--panel3); font-size: 11.5px; color: var(--muted); }
.pt-med-sched div b { display: block; font-size: 16px; color: var(--text); font-variant-numeric: tabular-nums; }
.pt-med-sched div.on { background: var(--accent-soft); color: var(--accent); }
.pt-med details summary { cursor: pointer; font-size: 12.5px; color: var(--accent); }
.pt-notices { display: flex; flex-direction: column; gap: 8px; padding: 0 20px; max-width: 980px; margin: 10px auto 0; }
.pt-notices:empty { display: none; }
.pt-langsel, .pt-famsel { width: auto; padding: 6px 8px; font-size: 12.5px; }
.pt-ell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
.pt-tabs { margin-bottom: 4px; }
.pt-langnote { display: flex; gap: 6px; align-items: flex-start; }
.pt-langnote svg { width: 13px; height: 13px; flex: 0 0 13px; margin-top: 2px; }
.pt-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.pt-tile { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); cursor: pointer; transition: border-color var(--t), transform var(--t); border-inline-start: 4px solid var(--ok); }
.pt-tile:hover { border-color: var(--line2); transform: translateY(-1px); }
.pt-tile.lvl-warn { border-inline-start-color: var(--warn); }
.pt-tile.lvl-alert { border-inline-start-color: var(--crit); background: var(--err-soft); }
.pt-tile svg { width: 14px; height: 14px; vertical-align: -2px; }
.pt-tile-v { font-size: 19px; font-weight: 750; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.pt-lvl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ok); }
.lvl-warn .pt-lvl { color: var(--warn); } .lvl-alert .pt-lvl { color: var(--err); }
.pt-rem { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel2); margin-top: 6px; flex-wrap: wrap; }
.pt-rem.due { border-color: rgba(239, 68, 68, .45); background: var(--err-soft); }
.pt-rem-t { display: flex; flex-direction: column; min-width: 80px; }
.pt-chart { padding: 6px; border-radius: 12px; background: var(--panel2); border: 1px solid var(--line); }
.pt-stat { padding: 10px 12px; border-radius: 12px; background: var(--panel2); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.pt-stat b { font-size: 16px; font-variant-numeric: tabular-nums; }
.pt-moods { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.pt-mood { font: inherit; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-radius: 12px; border: 1px solid var(--line2); background: var(--panel2); color: var(--text); cursor: pointer; }
.pt-mood span { font-size: 26px; line-height: 1; }
.pt-mood small { font-size: 11px; color: var(--muted); text-align: center; }
.pt-mood.on { border-color: var(--accent); background: var(--accent-soft); }
.pt-vs { padding: 12px 0; border-top: 1px dashed var(--line2); }
.pt-vs:first-of-type { border-top: 0; }
.pt-famrow { display: grid; grid-template-columns: 1fr 1.4fr 120px auto; gap: 8px; align-items: center; }
.pt-reply { margin-top: 6px; padding: 8px 10px; border-radius: 10px; background: var(--violet-soft); white-space: normal; font-size: 13px; }
@media (max-width: 900px) {
  .pt-notices { padding: 0 14px; }
  .pt-hide-sm { display: none; }
  .pt-famrow { grid-template-columns: 1fr 1fr; }
  .pt-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pt-top { gap: 6px; padding: 10px 12px; }
  .pt-top .btn.icon { width: 30px; }
}
@media (max-width: 420px) { .pt-tiles { grid-template-columns: minmax(0, 1fr); } .pt-moods small { display: none; } }

/* Hoher Kontrast */
body.pt-contrast { --text: #000; --text2: #111; --muted: #2b2b2b; --faint: #3a3a3a; --line: rgba(0, 0, 0, .45); --line2: rgba(0, 0, 0, .7); --panel: #fff; --panel2: #fff; --panel3: #f1f1f1; --accent: #0050a0; --accent-soft: rgba(0, 80, 160, .12); --bg: #fff; --bg2: #fff; }
:root[data-theme="dark"] body.pt-contrast { --text: #fff; --text2: #f5f5f5; --muted: #e0e0e0; --faint: #cfcfcf; --line: rgba(255, 255, 255, .5); --line2: rgba(255, 255, 255, .8); --panel: #000; --panel2: #0a0a0a; --panel3: #1a1a1a; --panel-solid: #000; --accent: #7cc7ff; --bg: #000; --bg2: #000; }
/* Hochkontrast: Signalfarben so abdunkeln (hell) bzw. aufhellen (dunkel), dass farbiger Text mindestens 7:1 erreicht (WCAG AAA) */
body.pt-contrast { --err: #8a0000; --warn: #5c2a00; --ok: #0a4d1c; --violet: #4a1a8c; --info: #003c78; --accent: #003c78; }
:root[data-theme="dark"] body.pt-contrast { --err: #ffb4b4; --warn: #ffd28c; --ok: #8ff0b0; --violet: #d6c6ff; --info: #a8dcff; --accent: #a8dcff; }
body.pt-contrast .pt-depart { background: #00305c; box-shadow: none; }
body.pt-contrast .pt-depart.go { background: #6b0000; }
body.pt-contrast .pt-depart.calm { background: #0a3d1c; }
:root[data-theme="dark"] body.pt-contrast .pt-depart { background: #000; border: 2px solid #fff; }
body.pt-contrast .pt-depart .small { opacity: 1 !important; }
body.pt-contrast .btn, body.pt-contrast .sc-chip, body.pt-contrast input, body.pt-contrast select, body.pt-contrast textarea { border-width: 2px; }
body.pt-contrast a { text-decoration: underline; }
body.pt-contrast :focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
body.pt-reduce *, body.pt-reduce *::before, body.pt-reduce *::after { animation: none !important; transition: none !important; }
.portal :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Rechts-nach-links (Arabisch) */
[dir="rtl"] .pt-side { border-right: 0; border-left: 1px solid var(--line); }
[dir="rtl"] .pt-nav .nav-badge { margin-left: 0; margin-right: auto; }
[dir="rtl"] .va-msg.agent, [dir="rtl"] .va-msg.praxis { align-self: flex-end; }
[dir="rtl"] .va-msg.patient, [dir="rtl"] .va-msg.caller { align-self: flex-start; }
[dir="rtl"] .sc-quote { border-left: 0; border-right: 3px solid var(--accent); border-radius: 10px 0 0 10px; }
[dir="rtl"] .pt-medtbl td:first-child, [dir="rtl"] .pt-medtbl th:first-child, [dir="rtl"] .tbl th { text-align: right; }
[dir="rtl"] .mono, [dir="rtl"] .sc-chip.slot, [dir="rtl"] input[type="time"], [dir="rtl"] input[type="date"], [dir="rtl"] input[type="datetime-local"], [dir="rtl"] input[type="number"], [dir="rtl"] input[type="tel"], [dir="rtl"] input[type="email"] { direction: ltr; unicode-bidi: plaintext; }
[dir="rtl"] .pt-depart .big { direction: ltr; unicode-bidi: plaintext; text-align: right; }
.pt-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 900px) { .pt-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
[dir="rtl"] .pt-tile-v { text-align: right; }
[dir="rtl"] .pt-chart, [dir="rtl"] .pt-stat b { direction: ltr; }
[dir="rtl"] .pt-stat b { text-align: right; unicode-bidi: plaintext; }
.portal .card-head h3 { white-space: normal; }
/* Hinweis Absagefrist / Ausfallpauschale bei der Online-Buchung */
.pt-ns { background: var(--accent-soft); border-radius: var(--r-xs); padding: 12px 14px; }
.pt-ns h4 { margin: 0 0 6px; }
.pt-ns p { margin: 6px 0 0; }