/* ═══════════════════════════════════════════════════════════════ SaraIT Consulting GmbH — Kundenportal Ergänzungen zu style.css für login.html und portal/index.html. Wird NACH style.css geladen; Farben kommen aus den Variablen dort (beide Schemata über data-theme am ). ═══════════════════════════════════════════════════════════════ */ /* [hidden] muss jede display-Regel dieser Datei schlagen */ .login-page [hidden], .portal [hidden] { display: none !important; } /* ─────────────────────────────────────────────────────────────── LOGIN (login.html) ─────────────────────────────────────────────────────────────── */ .login-page { display: flex; flex-direction: column; min-height: 100vh; } .login-page .lp-footer { margin-top: auto; } .login-main { position: relative; flex: 1; padding: 64px 0 90px; display: flex; align-items: center; overflow: hidden; } .login-aurora { position: absolute; inset: 0; z-index: 0; filter: blur(90px); pointer-events: none; } .lg-blob { position: absolute; border-radius: 50%; opacity: var(--blob-op); mix-blend-mode: var(--blob-blend); } .lg-b1 { width: 38vw; height: 38vw; background: var(--blob-1); top: -18%; left: -10%; } .lg-b2 { width: 30vw; height: 30vw; background: var(--blob-3); bottom: -20%; right: -6%; } .login-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 420px); justify-content: center; align-items: center; gap: 56px; } .login-card { background: var(--panel-solid); border: 1px solid var(--panel-line); border-radius: 24px; padding: 40px 42px 34px; box-shadow: var(--shadow-3); } .login-label { font-family: var(--font-head); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.22em; text-transform: uppercase; background: var(--g-cyan-blue); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 10px; } .login-card h1 { font-size: clamp(1.9rem, 3.4vw, 2.4rem); } .login-sub { color: var(--muted); font-size: 0.97rem; margin: 12px 0 24px; } .login-form { gap: 14px; } .login-form > label { font-weight: 500; } .login-form label + .pw-wrap { margin-top: -7px; } .login-form .btn-block { margin-top: 6px; } .pw-wrap { position: relative; } .pw-wrap input { padding-right: 56px; } .pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: transparent; border: 0; color: var(--muted); cursor: pointer; transition: background 0.2s, color 0.2s; } .pw-toggle:hover { background: var(--tint); color: var(--text); } .pw-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .pw-toggle .pw-eye-off { display: none; } .pw-toggle[aria-pressed="true"] .pw-eye { display: none; } .pw-toggle[aria-pressed="true"] .pw-eye-off { display: block; } .login-msg { margin-bottom: 18px; padding: 12px 16px; border-radius: 12px; font-size: 0.9rem; font-weight: 500; line-height: 1.45; border: 1px solid; display: flex; gap: 10px; align-items: flex-start; } .login-msg::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; background: currentColor; } .login-msg.is-error { color: var(--fg-magenta); background: rgba(216, 39, 122, 0.08); border-color: rgba(216, 39, 122, 0.4); } .login-msg.is-info { color: var(--fg-cyan); background: rgba(20, 168, 200, 0.08); border-color: rgba(20, 168, 200, 0.4); } .login-help { margin-top: 24px; padding-top: 20px; border-top: 1px dashed var(--dash); display: grid; gap: 8px; } .login-help p { color: var(--muted); font-size: 0.86rem; line-height: 1.5; } .login-help a { color: var(--fg-cyan); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; } .login-help a:hover { color: var(--text); } .login-trust ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 14px; } .login-trust li { display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; border-radius: 16px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-card); } .login-trust li b { display: block; font-family: var(--font-head); font-size: 1rem; margin-bottom: 4px; } .login-trust li span { color: var(--muted); font-size: 0.88rem; line-height: 1.5; } .lt-icon { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; border: 1px solid; } .lt-icon svg { width: 22px; height: 22px; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .lt-1 { background: linear-gradient(135deg, rgba(20, 168, 200, 0.2), rgba(42, 104, 164, 0.18)); border-color: rgba(20, 168, 200, 0.4); } .lt-1 svg { stroke: var(--ic-cb); } .lt-2 { background: linear-gradient(135deg, rgba(36, 168, 116, 0.22), rgba(166, 200, 62, 0.16)); border-color: rgba(36, 168, 116, 0.42); } .lt-2 svg { stroke: var(--ic-gl); } .lt-3 { background: linear-gradient(135deg, rgba(216, 39, 122, 0.2), rgba(245, 166, 35, 0.16)); border-color: rgba(216, 39, 122, 0.4); } .lt-3 svg { stroke: var(--ic-mo); } .login-trust-note { margin-top: 16px; color: var(--muted-2); font-size: 0.8rem; } /* ─────────────────────────────────────────────────────────────── PORTAL (portal/index.html) ─────────────────────────────────────────────────────────────── */ :root { --pt-top-h: 66px; --pt-side-w: 236px; } .portal { font-size: 15.5px; line-height: 1.55; background: var(--bg2); min-height: 100vh; display: flex; flex-direction: column; } .portal h1, .portal h2, .portal h3, .portal h4 { letter-spacing: -0.015em; } .portal h4 { font-family: var(--font-head); line-height: 1.12; font-weight: 600; } .portal .skip-link:focus { z-index: 500; } /* Hinweise ganz oben */ .pt-noscript { padding: 16px 22px; background: var(--todo-bg); border-bottom: 1px dashed var(--todo-line); font-size: 0.92rem; color: var(--text); text-align: center; line-height: 1.5; } .pt-noscript b { display: block; font-family: var(--font-head); margin-bottom: 4px; } .pt-noscript a { color: var(--fg-cyan); text-decoration: underline; margin-left: 6px; } .pt-demo { padding: 8px 18px; text-align: center; font-size: 0.82rem; line-height: 1.4; background: var(--todo-bg); border-bottom: 1px dashed var(--todo-line); color: var(--text); } .pt-demo b { font-weight: 700; } /* Kopfzeile */ .pt-top { position: sticky; top: 0; z-index: 60; background: var(--nav-bg); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-nav); } .pt-top-inner { display: flex; align-items: center; gap: 18px; height: var(--pt-top-h); padding: 0 22px; } .pt-logo { flex: none; display: block; } .pt-logo img { height: 38px; width: auto; max-width: none; filter: var(--logo-filter); } .pt-who { display: flex; flex-direction: column; justify-content: center; min-width: 0; flex: 0 1 auto; padding-left: 18px; border-left: 1px solid var(--line); line-height: 1.25; } .pt-who b { font-family: var(--font-head); font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pt-who span { color: var(--muted); font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pt-care { margin-left: auto; display: grid; grid-template-columns: auto auto; column-gap: 8px; align-items: center; padding: 6px 14px; border-radius: 14px; background: var(--tint); border: 1px solid var(--line); font-size: 0.8rem; line-height: 1.25; } .pt-care small { grid-column: 1 / -1; color: var(--muted-2); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; } .pt-care b { font-family: var(--font-head); font-size: 0.86rem; } .pt-care > span:not(.pt-care-links) { color: var(--muted); } .pt-care-links { grid-column: 1 / -1; display: flex; gap: 12px; flex-wrap: wrap; margin-top: 2px; } .pt-care-links a { display: inline-flex; align-items: center; gap: 5px; color: var(--fg-cyan); font-weight: 500; } .pt-care-links a:hover { color: var(--text); } .pt-care-links svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .pt-tools { flex: none; display: flex; align-items: center; gap: 10px; margin-left: auto; } .pt-care + .pt-tools { margin-left: 0; } .pt-logout { margin: 0; } .pt-logout .btn-small { padding: 9px 16px; } /* Rumpf: Seitenleiste + Inhalt */ .pt-shell { flex: 1; display: grid; grid-template-columns: var(--pt-side-w) minmax(0, 1fr); } .pt-side { position: sticky; top: var(--pt-top-h); align-self: start; height: calc(100vh - var(--pt-top-h)); padding: 22px 14px; display: flex; flex-direction: column; gap: 4px; background: var(--bg); border-right: 1px solid var(--line); overflow-y: auto; } .pt-nav { position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; color: var(--muted); font-weight: 500; font-size: 0.92rem; line-height: 1.2; transition: background 0.2s, color 0.2s; } .pt-nav svg { flex: none; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .pt-nav:hover { background: var(--tint); color: var(--text); } .pt-nav[aria-current="page"] { color: var(--text); font-weight: 600; background: linear-gradient(120deg, rgba(216, 39, 122, 0.12), rgba(42, 104, 164, 0.14)); } .pt-nav[aria-current="page"]::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--grad-cta); } .pt-count { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; display: inline-grid; place-items: center; background: var(--c-magenta); color: #fff; font-style: normal; font-size: 0.72rem; font-weight: 700; line-height: 1; } .pt-nav-cta { margin-top: auto; color: var(--text); border: 1px solid var(--line-strong); background: var(--tint); justify-content: center; } .pt-nav-cta:hover { border-color: var(--c-blue); } .pt-nav-cta[aria-current="page"] { background: var(--grad-cta); color: var(--on-cta); border-color: transparent; } .pt-nav-cta[aria-current="page"]::before { display: none; } .pt-main { padding: 30px 34px 70px; min-width: 0; } .pt-main:focus { outline: none; } /* Laden und Fehler */ .pt-loading { display: flex; align-items: center; gap: 12px; color: var(--muted); padding: 40px 0; font-size: 0.95rem; } .pt-spinner { width: 22px; height: 22px; border-radius: 50%; flex: none; border: 3px solid var(--track-bg); border-top-color: var(--c-blue); animation: ptSpin 0.9s linear infinite; } @keyframes ptSpin { to { transform: rotate(360deg); } } .is-static .pt-spinner { animation: none; } .pt-error { max-width: 560px; padding: 24px 26px; border-radius: 16px; background: rgba(216, 39, 122, 0.06); border: 1px solid rgba(216, 39, 122, 0.4); } .pt-error b { display: block; font-family: var(--font-head); font-size: 1.05rem; margin-bottom: 6px; } .pt-error p { color: var(--muted); font-size: 0.92rem; margin-bottom: 14px; } /* Ansichten */ .pt-view { scroll-margin-top: calc(var(--pt-top-h) + 24px); } .pt-view-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 24px; } .pt-view-head h2 { font-size: clamp(1.45rem, 2.4vw, 1.8rem); font-weight: 700; } .pt-view-head p { color: var(--muted); font-size: 0.95rem; margin-top: 6px; max-width: 64ch; } .pt-view-head .btn { flex: none; } .pt-card { background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-card); padding: 22px 24px; } .pt-card + .pt-card { margin-top: 18px; } .pt-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-bottom: 14px; } .pt-card-head h3, .pt-card-title { font-size: 1.05rem; font-weight: 600; } .pt-card-title { margin-bottom: 14px; } .pt-card-head a { color: var(--fg-cyan); font-size: 0.85rem; font-weight: 500; white-space: nowrap; } .pt-card-head a:hover { text-decoration: underline; } .pt-empty { padding: 30px 24px; text-align: center; color: var(--muted); font-size: 0.93rem; line-height: 1.55; border: 1px dashed var(--dash); border-radius: 14px; display: grid; gap: 14px; justify-items: center; } .pt-empty p { max-width: 48ch; } /* Badges: Logo-Farben, in beiden Schemata AA-tauglich */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; border: 1px solid; font-size: 0.74rem; font-weight: 600; line-height: 1.4; white-space: nowrap; } .badge-erfasst, .badge-m3 { color: var(--t-blue); background: rgba(42, 104, 164, 0.12); border-color: rgba(42, 104, 164, 0.45); } .badge-shortlist, .badge-neu, .badge-m2 { color: var(--fg-cyan); background: rgba(20, 168, 200, 0.12); border-color: rgba(20, 168, 200, 0.45); } .badge-interview { color: var(--fg-orange); background: rgba(245, 166, 35, 0.14); border-color: rgba(245, 166, 35, 0.5); } .badge-start, .badge-zusage, .badge-m1 { color: var(--fg-green); background: rgba(36, 168, 116, 0.14); border-color: rgba(36, 168, 116, 0.45); } .badge-abgeschlossen, .badge-absage { color: var(--muted); background: var(--tint); border-color: var(--line-strong); } .kat-vertrag { color: var(--t-blue); background: rgba(42, 104, 164, 0.12); border-color: rgba(42, 104, 164, 0.45); } .kat-angebot { color: var(--fg-magenta); background: rgba(216, 39, 122, 0.1); border-color: rgba(216, 39, 122, 0.4); } .kat-profil { color: var(--fg-cyan); background: rgba(20, 168, 200, 0.12); border-color: rgba(20, 168, 200, 0.45); } .kat-bericht { color: var(--fg-green); background: rgba(36, 168, 116, 0.14); border-color: rgba(36, 168, 116, 0.45); } .kat-nachweis { color: var(--fg-orange); background: rgba(245, 166, 35, 0.14); border-color: rgba(245, 166, 35, 0.5); } /* Übersicht: Kacheln */ .kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 22px; } .kpi { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 20px 22px 18px; border-radius: 16px; overflow: hidden; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-card); transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s; } .kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--g-cyan-blue); } .kpi-2::before { background: var(--g-blue-magenta); } .kpi-3::before { background: var(--g-green-lime); } .kpi-4::before { background: var(--g-magenta-orange); } .kpi:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); border-color: var(--line-strong); } .kpi small { color: var(--muted); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .kpi b { font-family: var(--font-head); font-size: 2rem; line-height: 1.1; letter-spacing: -0.02em; } .kpi span { color: var(--muted); font-size: 0.82rem; line-height: 1.35; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .ov-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: start; } .ov-col { display: grid; gap: 18px; } .ov-col .pt-card + .pt-card { margin-top: 0; } /* Statusliste */ .st-list { display: grid; gap: 6px; } .st-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 11px 12px; border-radius: 12px; border: 1px solid transparent; transition: background 0.2s, border-color 0.2s; } .st-row:hover { background: var(--tint); border-color: var(--line); } .st-id { font-family: var(--font-head); font-size: 0.76rem; color: var(--muted); letter-spacing: 0.04em; } .st-title { font-weight: 500; font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .st-mini { display: flex; gap: 4px; } .st-mini i { width: 14px; height: 5px; border-radius: 3px; background: var(--track-bg); } .st-mini i.done { background: var(--c-cyan); } .st-mini i.now { background: var(--c-magenta); } /* Betreuer-Karte */ .care-card { display: flex; gap: 16px; align-items: flex-start; } .care-avatar { flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: var(--grad-cta); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; } .care-card > div { display: grid; gap: 2px; min-width: 0; } .care-card b { font-family: var(--font-head); font-size: 1rem; } .care-card > div > span { color: var(--muted); font-size: 0.86rem; } .care-links { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; font-size: 0.86rem; } .care-links a { color: var(--fg-cyan); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; } .care-links a:hover { color: var(--text); } /* Anfragen */ .anf-list { display: grid; gap: 18px; } .anf-list .pt-card + .pt-card { margin-top: 0; } .anf.is-done { opacity: 0.82; } .anf-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; } .anf-id { display: block; font-family: var(--font-head); font-size: 0.76rem; color: var(--muted); letter-spacing: 0.06em; margin-bottom: 4px; } .anf-title { font-size: 1.15rem; } .anf-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 20px; margin: 16px 0 20px; } .anf-meta dt, .pf-meta dt { color: var(--muted-2); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 2px; } .anf-meta dd, .pf-meta dd { font-size: 0.92rem; font-weight: 500; } .stepper { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .step { position: relative; padding-top: 14px; color: var(--muted); font-size: 0.78rem; font-weight: 500; } .step::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; border-radius: 3px; background: var(--track-bg); } .step span { display: inline-flex; align-items: center; gap: 6px; } .step span::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--track-bg); border: 1px solid var(--line-strong); } .step.done::before { background: var(--g-cyan-blue); } .step.done span::before { background: var(--c-cyan); border-color: transparent; } .step.done { color: var(--text); } .step.now::before { background: var(--grad-cta); } .step.now { color: var(--text); font-weight: 700; } .step.now span::before { background: var(--c-magenta); border-color: transparent; box-shadow: 0 0 0 3px rgba(216, 39, 122, 0.25); } .anf.is-done .step.done::before { background: var(--g-green-lime); } .anf.is-done .step.done span::before { background: var(--c-green); } .anf-note { margin-top: 18px; padding: 12px 16px; border-radius: 12px; background: var(--tint); border-left: 3px solid var(--c-cyan); font-size: 0.9rem; color: var(--muted); line-height: 1.5; } .anf-note b { color: var(--text); font-weight: 600; } .anf-desc { font-size: 0.9rem; color: var(--muted); margin-top: 12px; white-space: pre-line; } .anf-desc b { color: var(--text); font-weight: 600; } .pf-status:focus { outline: none; } .pf-status:focus-visible .badge { outline: 2px solid var(--focus); outline-offset: 2px; } .anf-foot { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; } .anf-dates { color: var(--muted-2); font-size: 0.78rem; } .anf-profiles { color: var(--fg-cyan); font-weight: 600; font-size: 0.86rem; text-decoration: underline; text-underline-offset: 3px; } .anf-profiles:hover { color: var(--text); } /* Profile / Shortlist */ .pf-group + .pf-group { margin-top: 32px; } .pf-group-title { font-size: 1.05rem; margin-bottom: 14px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .pf-group-title small { font-family: var(--font-head); font-size: 0.76rem; color: var(--muted); letter-spacing: 0.06em; } .pf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; } .pf-grid .pt-card + .pt-card { margin-top: 0; } .pf { display: flex; flex-direction: column; gap: 14px; } .pf.is-absage { opacity: 0.72; } .pf.is-zusage { border-color: rgba(36, 168, 116, 0.5); } .pf-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 14px; align-items: center; } .pf-kuerzel { width: 58px; height: 58px; flex: none; display: grid; place-items: center; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--g-cyan-blue); color: #fff; font-family: var(--font-head); font-weight: 700; font-size: 0.86rem; letter-spacing: 0.02em; } [data-theme="dark"] .pf-kuerzel { color: #070a12; } .pf-headtext { min-width: 0; } .pf-headtext h4 { font-size: 1.02rem; line-height: 1.25; } .pf-erf { display: block; color: var(--muted); font-size: 0.84rem; margin-top: 2px; } .pf-match { grid-column: 1 / -1; } .pf-skills { margin-top: 0; gap: 6px; } .pf-skills .chip { padding: 4px 11px; font-size: 0.76rem; } .pf-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; } .pf-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; } .pf-doc { display: inline-flex; align-items: center; gap: 6px; color: var(--fg-cyan); font-size: 0.84rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .pf-doc:hover { color: var(--text); } .pf-doc svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .pf-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; } .pf-actions .btn { flex: 1 1 auto; } .pf-confirm { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px; background: rgba(245, 166, 35, 0.1); border: 1px solid rgba(245, 166, 35, 0.45); font-size: 0.86rem; } .pf-confirm span { flex: 1 1 100%; font-weight: 500; } .pf[aria-busy="true"] { opacity: 0.7; } /* Dokumente */ .dk-filter { margin: 0 0 16px; gap: 8px; } .dk-chip { cursor: pointer; font-family: var(--font-body); } .dk-chip[aria-pressed="true"] { background: var(--grad-cta); color: var(--on-cta); border-color: transparent; } .pt-table-wrap { padding: 6px 8px; overflow-x: auto; } .pt-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; } .pt-table th { text-align: left; padding: 12px 14px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--line-strong); white-space: nowrap; } .pt-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; } .pt-table tr:last-child td { border-bottom: 0; } .pt-table tbody tr:hover td { background: var(--tint); } .dk-title { display: flex; align-items: center; gap: 12px; min-width: 240px; } .dk-title b { font-weight: 500; } .dk-ico { flex: none; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-family: var(--font-head); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; background: var(--tint); border: 1px solid var(--line-strong); color: var(--muted); } .dk-ico.dk-pdf { color: var(--fg-magenta); border-color: rgba(216, 39, 122, 0.4); background: rgba(216, 39, 122, 0.08); } .dk-ico.dk-png, .dk-ico.dk-jpg { color: var(--fg-cyan); border-color: rgba(20, 168, 200, 0.4); background: rgba(20, 168, 200, 0.08); } .dk-date, .dk-size { color: var(--muted); white-space: nowrap; } .dk-dl { text-align: right; } .dk-dl .btn { padding: 8px 14px; font-size: 0.82rem; } .pt-table-wrap .pt-empty { margin: 8px; } /* Termine */ .termin-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .termin { display: flex; gap: 16px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--tint); } .termin-list.compact .termin { padding: 10px 12px; } .termin-date { flex: none; width: 54px; padding: 6px 0 7px; border-radius: 12px; text-align: center; line-height: 1; background: linear-gradient(135deg, rgba(20, 168, 200, 0.2), rgba(42, 104, 164, 0.2)); border: 1px solid rgba(20, 168, 200, 0.4); } .termin-date b { display: block; font-family: var(--font-head); font-size: 1.35rem; } .termin-date span { display: block; margin-top: 3px; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-cyan); } .termin-body { display: grid; gap: 2px; min-width: 0; } .termin-body b { font-family: var(--font-head); font-size: 0.97rem; } .termin-when { font-size: 0.86rem; font-weight: 500; } .termin-ort { color: var(--muted); font-size: 0.84rem; } .termin-list.past .termin { opacity: 0.7; } .termin-list.past .termin-date { background: var(--tint); border-color: var(--line-strong); } .termin-list.past .termin-date span { color: var(--muted); } /* Nachrichten */ .msg-card { display: grid; gap: 18px; } .msg-thread { display: flex; flex-direction: column; gap: 12px; max-height: 52vh; min-height: 160px; overflow-y: auto; padding: 4px 6px 4px 2px; } .msg { max-width: min(78%, 620px); padding: 12px 16px; border-radius: 16px 16px 16px 4px; background: var(--tint); border: 1px solid var(--line); } .msg.me { align-self: flex-end; border-radius: 16px 16px 4px 16px; background: linear-gradient(120deg, rgba(216, 39, 122, 0.12), rgba(42, 104, 164, 0.14)); } .msg small { display: block; color: var(--muted); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; margin-bottom: 4px; } .msg p { font-size: 0.93rem; line-height: 1.5; white-space: pre-line; } .msg-form { gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); } .msg-form > label { font-size: 0.85rem; font-weight: 500; color: var(--muted); } .msg-actions { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; } /* Neue Anforderung */ .neu-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; align-items: start; } .neu-aside { display: grid; gap: 18px; } .neu-aside .pt-card + .pt-card { margin-top: 0; } .neu-form .form-row { gap: 14px; } .neu-steps { list-style: none; margin: 0; padding: 0; counter-reset: neu; display: grid; gap: 12px; } .neu-steps li { position: relative; padding-left: 42px; counter-increment: neu; } .neu-steps li::before { content: counter(neu, decimal-leading-zero); position: absolute; left: 0; top: 1px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-head); font-size: 0.72rem; font-weight: 700; background: rgba(36, 168, 116, 0.16); border: 1px solid rgba(36, 168, 116, 0.45); color: var(--fg-green); } .neu-steps b { display: block; font-family: var(--font-head); font-size: 0.95rem; } .neu-steps span { color: var(--muted); font-size: 0.86rem; line-height: 1.45; } .neu-hint { border-left: 3px solid var(--c-orange); } .neu-hint b { display: block; font-family: var(--font-head); margin-bottom: 4px; } .neu-hint span { color: var(--muted); font-size: 0.88rem; line-height: 1.5; } .pt-success { text-align: center; padding: 20px 10px 8px; } .pt-success h3 { font-family: var(--font-head); font-size: 1.35rem; margin: 14px 0 10px; } .pt-success { scroll-margin-top: calc(var(--pt-top-h) + 24px); } .pt-success p { color: var(--muted); font-size: 0.95rem; max-width: 50ch; margin: 0 auto 20px; } .pt-success p b { color: var(--text); } .pt-success .hero-actions { justify-content: center; } .pt-success .fs-icon { margin: 0 auto; } .pt-success:focus { outline: none; } /* Fußzeile */ .pt-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 16px 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.82rem; background: var(--bg); } .pt-foot a { color: var(--muted); } .pt-foot a:hover { color: var(--text); text-decoration: underline; } /* Hinweis (Toast): bleibt dauerhaft im DOM (Live-Region), wird nur ein- und ausgeblendet; oben rechts unter der Kopfzeile, damit er keine Formularzeile verdeckt */ .pt-toast { position: fixed; right: 20px; top: calc(var(--pt-top-h) + 16px); z-index: 200; max-width: min(92vw, 480px); padding: 12px 18px; border-radius: 14px; background: var(--panel-solid); border: 1px solid var(--panel-line); box-shadow: var(--shadow-2); font-size: 0.9rem; font-weight: 500; line-height: 1.45; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 0.2s, transform 0.2s, visibility 0s linear 0.2s; } .pt-toast.is-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .is-static .pt-toast { transition: none; } .pt-toast.is-ok { border-color: rgba(36, 168, 116, 0.55); } .pt-toast.is-error { border-color: rgba(216, 39, 122, 0.55); color: var(--fg-magenta); } /* Fokus sichtbar auf getönten Flächen */ .portal .pt-nav:focus-visible, .portal .kpi:focus-visible, .portal .st-row:focus-visible { outline-offset: 0; } /* ─────────────────────────────────────────────────────────────── Responsive ─────────────────────────────────────────────────────────────── */ @media (max-width: 1240px) { .pt-care { display: none; } .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1080px) { .login-grid { grid-template-columns: minmax(0, 480px); gap: 32px; } .login-trust { max-width: 480px; } .ov-grid { grid-template-columns: 1fr; } .neu-grid { grid-template-columns: 1fr; } .anf-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { :root { --pt-top-h: 60px; } .pt-shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-content: start; } .pt-view { scroll-margin-top: calc(var(--pt-top-h) + 90px); } .pt-side { position: sticky; top: var(--pt-top-h); height: auto; z-index: 55; flex-direction: row; gap: 4px; padding: 8px 10px; border-right: 0; border-bottom: 1px solid var(--line); box-shadow: var(--shadow-1); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; /* Rechte Kante ausblenden: zeigt, dass die Leiste weiterscrollt */ -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent); } .pt-long { display: none; } .pt-side::-webkit-scrollbar { display: none; } .pt-nav { flex: none; flex-direction: column; gap: 5px; padding: 8px 12px; min-width: 76px; font-size: 0.7rem; text-align: center; border-radius: 12px; } .pt-nav svg { width: 22px; height: 22px; } .pt-nav[aria-current="page"]::before { left: 12px; right: 12px; top: auto; bottom: 0; width: auto; height: 3px; } .pt-count { position: absolute; top: 4px; right: 8px; margin: 0; min-width: 18px; height: 18px; font-size: 0.64rem; padding: 0 5px; } .pt-nav-cta { margin-top: 0; } .pt-nav-cta span { white-space: nowrap; } .pt-logo img { height: 32px; } .pt-top-inner { padding: 0 14px; gap: 12px; } .pt-main { padding: 20px 16px 60px; } .pt-view-head { flex-direction: column; gap: 12px; } .pt-toast { left: 12px; right: 12px; top: calc(var(--pt-top-h) + 84px); max-width: none; } .pt-card { padding: 18px 18px; } .pf-grid { grid-template-columns: 1fr; } .msg { max-width: 92%; } .stepper { gap: 4px; } .step { font-size: 0.7rem; } } @media (max-width: 760px) { .login-main { padding: 40px 0 60px; } .login-card { padding: 30px 22px 26px; border-radius: 20px; } .login-trust li { padding: 16px; } } @media (max-width: 560px) { .pt-who span { display: none; } /* Beschriftung nur visuell verbergen, der zugaengliche Name "Abmelden" bleibt */ .pt-logout .btn-small span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .pt-logout .btn-small { padding: 9px 12px; } /* Alle sieben Bereiche passen ohne Scrollen in die Leiste (7 x 52 px < 390 px) */ .pt-side { padding: 6px 6px; gap: 2px; -webkit-mask-image: none; mask-image: none; } .pt-nav { min-width: 52px; padding: 7px 4px; font-size: 0.6rem; gap: 4px; border-radius: 10px; } .pt-nav svg { width: 19px; height: 19px; } .pt-count { top: 2px; right: 2px; min-width: 16px; height: 16px; font-size: 0.6rem; padding: 0 4px; } .kpi { padding: 16px 16px 14px; } .kpi b { font-size: 1.6rem; } .st-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title badge" "id mini"; gap: 6px 12px; } .st-id { grid-area: id; } .st-title { grid-area: title; white-space: normal; } .st-badge { grid-area: badge; } .st-mini { grid-area: mini; justify-self: end; } .anf-meta { grid-template-columns: 1fr 1fr; gap: 10px 14px; } .stepper { grid-template-columns: 1fr 1fr; gap: 8px; } .step::before { height: 4px; } .pf-meta { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } /* Dokumente: Tabelle wird zur Liste */ .pt-table thead { display: none; } .pt-table, .pt-table tbody, .pt-table td { display: block; } .pt-table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 12px 4px; border-bottom: 1px solid var(--line); } .pt-table tr:last-child { border-bottom: 0; } .pt-table td { padding: 0; border: 0; } .pt-table tbody tr:hover td { background: none; } .pt-table td.dk-title { display: flex; min-width: 0; grid-column: 1; grid-row: 1; } .pt-table td:nth-child(2) { grid-column: 1; grid-row: 2; padding-left: 50px; } .pt-table td.dk-date { grid-column: 1; grid-row: 3; padding-left: 50px; font-size: 0.8rem; } .pt-table td.dk-size { display: none; } .pt-table td.dk-dl { grid-column: 2; grid-row: 1 / 4; } .dk-dl .btn span { display: none; } .dk-dl .btn { padding: 9px 11px; } .login-page .nb-long { display: none; } .login-page .lp-nav .nav-inner { width: min(1200px, 94vw); gap: 10px; } .login-page .lp-nav .btn-small { padding: 9px 14px; font-size: 0.82rem; white-space: nowrap; } .login-page .lp-nav .btn-small span { white-space: nowrap; } .pt-foot { justify-content: center; text-align: center; } .pf-actions .btn { width: 100%; } } @media (max-width: 400px) { /* Sieben Tabs passen nicht lesbar in 390 px: Leiste scrollt horizontal (mit Schnappen), die Labels bleiben mindestens 0.68rem gross; die ausgeblendete rechte Kante zeigt an, dass es weitergeht */ .pt-side { padding: 6px 6px; gap: 3px; scroll-snap-type: x mandatory; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent); } .pt-nav { min-width: 64px; padding: 7px 6px; font-size: 0.68rem; letter-spacing: 0; scroll-snap-align: start; } .pt-top-inner { gap: 10px; } .pt-who { padding-left: 10px; } } /* ── Ohne JavaScript ─────────────────────────────────────────── Das Portal laedt seine Inhalte per fetch. Ohne JavaScript bleibt die Oberflaeche leer: Seitenleiste, Knoepfe und Abmelden waeren sichtbar, wuerden aber nichts tun. Deshalb wird alles ausser dem Hinweis ausgeblendet; die Klasse "js" setzt das Inline-Skript im Kopf der Seite. */ html:not(.js) .pt-top, html:not(.js) .pt-shell, html:not(.js) .pt-demo, html:not(.js) .pt-foot { display: none !important; } html:not(.js) .pt-noscript { margin: 40px auto; max-width: 640px; }