diff --git a/VAULT/hinunher/checkpoint-member-mockup.html b/VAULT/hinunher/checkpoint-member-mockup.html new file mode 100644 index 0000000..e50a52c --- /dev/null +++ b/VAULT/hinunher/checkpoint-member-mockup.html @@ -0,0 +1,1288 @@ + + + + + +Checkpoint Köln — Mitglieder-App (Mockup) + + + + + + + +
+

Checkpoint Köln · Brand Profile „Vor-Ort-Arbeit"

+

Mitglieder-App — Mockup

+

Klickbare Screens zur Abstimmung, bevor es an den Aufbau geht. Nicht alle Funktionen sind aktiv.

+
+ +
+ + + + + + + + + + + + +
+ + + + + + + + + + + + + + +
+
+ + +
+
+
+
CHECKPOINTEhrenamt
+
+
+
+
+

Anmelden

+

Melde dich mit deiner E-Mail-Adresse an — ganz ohne Passwort.

+
+ + +

Wir schicken dir einen sicheren Anmeldelink. Er ist 15 Minuten gültig.

+
+ +
+ +
+ check_circle +
Link gesendet. Prüfe dein Postfach unter name@beispiel.de und öffne den Link auf diesem Gerät.
+
+
+
+ + +
+
+ +

Profil einrichten

Schritt 1 von 2

+
+
+
+
+
+
+
+

Wie sollen wir dich nennen?

+

Dieser Name ist für dein Team sichtbar.

+ +

+
+ + + +
+ +
+ + +
+ +
+
+
+ + +
+
+ +

Team auswählen

Schritt 2 von 2

+
+
+

Du bist bei mehreren Teams eingetragen. Wähle dein Team für diese Sitzung — du kannst später jederzeit wechseln.

+ +
+
+
SN
+
+
Streetwork Nord
+
17 Mitglieder
+
+ check_circle +
+
+
CB
+
+
Café Bach Ehrenamt
+
9 Mitglieder
+
+
+
+ + +
+
+ + +
+
+
+
CHECKPOINTEhrenamt
+ +
+
+

Guten Morgen, Alex

+

Streetwork Nord

+
+
+ +
+
+
warningDringend
+

Für den Einsatz heute Abend (18–22 Uhr, Ebertplatz) wird noch ein Springer gesucht.

+
+ +
+
+ +
+
eventNächste Einsätze
+
+
event
+
+
Streetwork Abend
+
Mi, 20. Aug · 18:00–22:00 · Ebertplatz
+
+ Zugeteilt +
+
+
event
+
+
Infostand Wochenmarkt
+
Sa, 23. Aug · 09:00–13:00 · Rudolfplatz
+
+ Springer +
+
+ +
+
scheduleVerfügbarkeit
+

4 Termine noch offen — bitte melde dich zurück.

+
+ +
+
+ +
+
chatTeamchat
+

3 neue Nachrichten in #ankündigungen

+
+ +
+
+
+ + +
+ + +
+
+
+

Streetwork Nord

+

/team/streetwork-nord/

+
+ +
+ +
+
+

Aufsuchende Sozialarbeit im Kölner Norden. Schwerpunkte: Streetwork, Infostände, niedrigschwellige Beratung.

+
+ groups17 Mitglieder + Team-Verwaltung: Jana K., Sam R. +
+
+ +
+ + + + +
+ + +
+ + +
+ + +
+
+ +

Mitglieder

+ 17 +
+
+
+ lock +
Anmelde-E-Mail und Geräte sind nur für dich selbst sichtbar.
+
+ +
+
+ JK + Jana K. + Team-Verwaltung +
+
+ SR + Sam R. + Team-Verwaltung +
+
+ A +
+
Alex (du)
+
+
+
+ MB +
+
Mira B.
+
Erreichbar: Signal · Tel.
+
+
+
+ TW + Timo W. +
+
+ LP + Lina P. +
+
+
+
+ + +
+
+
+ +

Verfügbarkeit

+
+
+ KW 34–37 + Verfügbarkeit offen +
+
+ +
+
+
+
+
Streetwork Abend
+
Fr, 18. Aug · 18:00–22:00 · Ebertplatz
+
+ priority_high<24 Std. +
+

Haupt: 2/2 besetzt · Springer: 0/1

+
+ +
+
+ +
+
Infostand Wochenmarkt
+
Sa, 23. Aug · 09:00–13:00 · Rudolfplatz
+

Haupt: 1/1 besetzt · Springer: 0/1

+

Deine Rückmeldung:

+
+ + +
+
+ +
+
Beratungsabend
+
Di, 26. Aug · 17:00–20:00 · Beratungsstelle
+

Noch nicht beantwortet

+
+ + +
+
+
+
+ + +
+
+ +

Dokumente

+
+
+
AktuellArchiv
+ +
+
+
+
picture_as_pdf
+
+
Einsatzplan August
+
einsatzplan_august.pdf · 420 KB
+
+ Freigegeben +
+
+ +
+
+
image
+
+
Foto Infostand
+
infostand.jpg · 2,1 MB
+
+ Wartet auf Freigabe +
+
+ check + close +
+
+ +
+
+
description
+
+
Spesenformular (Entwurf)
+
spesen.docx · 88 KB
+
+ Abgelehnt +
+

Grund: Formular ist unvollständig ausgefüllt.

+
+
+ + +

Erlaubt: PDF, Word, JPG, PNG, HEIC. Lade nur Fotos mit geklärten Rechten hoch.

+
+
+ + +
+
+
+ +

Teamchat

+
+
+ Ankündigungen + Team +
+
+ +
+
+
Jana K. · Team-Verwaltung · 09:12
+
+ Bitte denkt an die aktualisierte Einsatzplanung für KW 34. Rückmeldungen bis Mittwoch wären super. +
+
done_allGelesen von 14/17
+
+ +
Team
+ +
+
Timo W. · 10:40
+
+ Wer kann Freitag beim Infostand am Rudolfplatz aushelfen? Details ↗ (externer Link) +
+
done_allAbgerufen
+
+ +
+
Antwort auf: „Wer kann Freitag beim Infostand …“
+
Mira B. · 10:52
+
+ Ich kann ab 10 Uhr. (bearbeitet) +
+
doneGespeichert
+
+ +
+
11:05
+
Nachricht wurde gelöscht
+
+
+ +
+ + +
+
+ + +
+
+

Profil

+
+
+
+ A +
+
Alex
+
Streetwork Nord
+
+ edit +
+ +

Team-Kontakt (freiwillig)

+
+
+
+
Kontaktdaten mit Team teilen
+
Standardmäßig ausgeschaltet.
+
+
+
+
+ + +
+
+ + +
+
+ +

Sicherheit

+
+
+ lock +
Deine Anmelde-E-Mail ist für andere Mitglieder nicht sichtbar.
+
+
+ smartphone +
+
iPhone — Köln
+
Zuletzt aktiv: heute
+
+ +
+
+ laptop_mac +
+
MacBook — Köln
+
Zuletzt aktiv: vor 3 Tagen
+
+ +
+
+ + +
+ + +
+ + +
+
+ +

Benachrichtigungen

+
+
+
+ +
+
priority_high
+
+
Offener Dienst in 18 Std. — Streetwork Abend
+
Dringend · vor 20 Min.
+
+ Dringend +
+ +
+
event_available
+
+
Plan für KW 34 veröffentlicht
+
Wichtig · heute, 08:03
+
+ Wichtig +
+ +
+
sync_alt
+
+
Deine Einteilung wurde geändert
+
Wichtig · gestern, 17:20
+
+ Wichtig +
+ +
+
schedule
+
+
Verfügbarkeit für KW 38 jetzt offen
+
gestern, 09:00
+
+
+ +
+
mark_email_unread
+
+
Rückmeldung unvollständig — 2 Einsätze offen
+
Mo, 11. Aug
+
+
+ +
+
+
+ + +
+
+ +

Team-Verwaltung

/team/streetwork-nord/manage/

+
+
+
+
+ warning +
2
+
Unterbesetzte Einsätze
+
+
+ schedule +
5
+
Fehlende Verfügbarkeiten
+
+
+ description +
3
+
Dokumentfreigaben wartend
+
+
+ mail +
1
+
Offene Einladung
+
+
+ person_off +
4
+
Unbesetzte Positionen
+
+
+ +

Nächste Schritte

+
+ + + +
+
+
+ +
+
+ + + diff --git a/VAULT/hinunher/index.html b/VAULT/hinunher/index.html new file mode 100644 index 0000000..ba6c5a7 --- /dev/null +++ b/VAULT/hinunher/index.html @@ -0,0 +1,503 @@ + + + + + + AHK Ehrenamtsmanagement – HTML Mockup + + + + + + +
+ + +
+
+ +
EHRENAMTVor-Ort-Arbeit
+
+
+ + +
+
+ +
+
+
/team/vor-ort-arbeit/
+
+ + +
+
+ + + + + + + + + + + + + + +
+
+

Montag, 17. August

+

Guten Morgen, Patsy

+

Hier ist, was heute für dich und dein Team wichtig ist.

+
+ +
+
priority_high
+
+ Dringend · heute +

Springer:in für heute gesucht

+

18:00–21:30 · Café Bach · Noch 1 Position offen

+
+ arrow_forward +
+ +
+
Nächste Einsätze

Dein Plan

+ +
+ +
+
+
21AUG
+
+

Freitagabend

check_circleEingeteilt
+

18:30–21:30 · Café Bach

+ Theke +
+
+
+
28AUG
+
+

Checkpoint-Abend

scheduleVerfügbar
+

17:30–21:00 · Pipinstraße

+ Hauptposition +
+
+
+ +
+ + + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + +
+ + + + diff --git a/VAULT/hinunher/mockup.css b/VAULT/hinunher/mockup.css new file mode 100644 index 0000000..e2db6ee --- /dev/null +++ b/VAULT/hinunher/mockup.css @@ -0,0 +1,400 @@ +/* + * AHK Ehrenamtsmanagement — Präsentations-Mockup + * Ergänzt die unveränderte style.css um die mobile Mitglieder-App. + */ + +:root { + --brand-ink: #07182E; + --brand-deep: #061126; + --brand-teal: #00858A; + --brand-teal-strong: #005F61; + --brand-aqua: #52E0CF; + --brand-blue: #2596BE; + --brand-coral: #F04A67; + --brand-yellow: #F6E74A; + --brand-mist: #F4FAFC; + --brand-paper: #FFFFFF; +} + +body.mockup-app { + display: block; + min-height: 100vh; + color: var(--brand-ink); + background: var(--brand-deep); + overflow-x: hidden; +} + +button { min-height: 44px; } +button, a { -webkit-tap-highlight-color: transparent; } + +.app-shell { min-height: 100vh; background: var(--brand-mist); } + +.mock-sidebar { + position: fixed; + inset: 0 auto 0 0; + z-index: 40; + width: 260px; + display: none; + flex-direction: column; + color: #fff; + background: + radial-gradient(circle at 14% 8%, rgba(82,224,207,.25), transparent 20rem), + linear-gradient(165deg, var(--brand-teal-strong), var(--brand-deep) 78%); + border-right: 1px solid rgba(255,255,255,.1); +} + +.brand-lockup { display: flex; align-items: center; gap: .75rem; padding: 1.1rem 1.1rem .9rem; } +.brand-lockup strong { display: block; font-family: var(--font-display); font-size: 1.35rem; letter-spacing: .04em; line-height: .85; } +.brand-lockup span { display: block; margin-top: .18rem; color: rgba(255,255,255,.7); font-size: .7rem; } +.brand-mark { display: grid; width: 42px; height: 42px; place-items: center; border: 2px solid var(--brand-aqua); border-radius: 12px 4px 12px 4px; color: var(--brand-yellow); font-family: var(--font-display); font-size: 1.05rem; font-weight: 900; letter-spacing: .03em; transform: rotate(-2deg); } +.brand-mark--large { width: 62px; height: 62px; margin: 0 auto 1.2rem; font-size: 1.4rem; } + +.team-switcher { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .65rem; width: calc(100% - 1.4rem); margin: .35rem .7rem .7rem; padding: .72rem .8rem; border: 1px solid rgba(255,255,255,.13); border-radius: .75rem; color: #fff; background: rgba(255,255,255,.06); text-align: left; cursor: pointer; } +.team-switcher small, .team-switcher strong { display: block; } +.team-switcher small { color: rgba(255,255,255,.52); font-size: .63rem; text-transform: uppercase; letter-spacing: .07em; } +.team-switcher strong { font-size: .82rem; } + +.desktop-nav { display: flex; flex: 1; flex-direction: column; gap: 2px; overflow-y: auto; padding: .2rem .65rem 1rem; } +.nav-label { padding: 1rem .7rem .35rem; color: rgba(255,255,255,.36); font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } +.nav-item { display: flex; align-items: center; gap: .68rem; width: 100%; min-height: 46px; padding: .62rem .7rem; border: 0; border-radius: .65rem; color: rgba(255,255,255,.76); background: transparent; text-align: left; cursor: pointer; font-weight: 650; } +.nav-item .material-icons { color: rgba(255,255,255,.44); font-size: 1.15rem; } +.nav-item:hover { color: #fff; background: rgba(255,255,255,.07); } +.nav-item.is-active { color: #fff; background: rgba(82,224,207,.16); box-shadow: inset 3px 0 0 var(--brand-aqua); } +.nav-item.is-active .material-icons { color: var(--brand-yellow); } +.nav-count { display: inline-grid; min-width: 1.3rem; height: 1.3rem; margin-left: auto; padding: 0 .3rem; place-items: center; border-radius: 999px; color: #fff; background: var(--brand-coral); font-size: .65rem; font-style: normal; font-weight: 800; } +.nav-item--subtle { margin-bottom: .6rem; color: rgba(255,255,255,.55); font-size: .78rem; } +.mock-sidebar-footer { padding: .7rem; border-top: 1px solid rgba(255,255,255,.1); } +.mini-account { display: flex; align-items: center; gap: .65rem; padding: .7rem .55rem; } +.mini-account strong, .mini-account span { display: block; } +.mini-account strong { font-size: .8rem; } +.mini-account span { color: var(--brand-aqua); font-size: .65rem; } + +.mobile-header { position: sticky; top: 0; z-index: 30; display: flex; min-height: 66px; align-items: center; justify-content: space-between; padding: 0 .8rem; color: #fff; background: linear-gradient(135deg, var(--brand-teal-strong), var(--brand-deep)); box-shadow: 0 3px 18px rgba(6,17,38,.2); } +.brand-lockup--mobile { padding: 0; } +.brand-lockup--mobile .brand-mark { width: 35px; height: 35px; border-radius: 10px 3px 10px 3px; font-size: .84rem; } +.brand-lockup--mobile strong { font-size: 1.1rem; } +.brand-lockup--mobile span { font-size: .62rem; } +.header-actions { display: flex; align-items: center; gap: .35rem; } +.icon-button { position: relative; display: inline-grid; width: 44px; height: 44px; place-items: center; padding: 0; border: 0; border-radius: 50%; color: #fff; background: transparent; cursor: pointer; } +.icon-button:hover { background: rgba(255,255,255,.08); } +.icon-button--light { color: var(--brand-ink); background: #fff; border: 1px solid rgba(7,24,46,.12); } +.icon-button--light:hover { color: var(--brand-teal-strong); background: #eef8f9; } +.notification-dot { position: absolute; top: 7px; right: 6px; display: grid; min-width: 17px; height: 17px; padding: 0 4px; place-items: center; border: 2px solid var(--brand-deep); border-radius: 999px; color: #fff; background: var(--brand-coral); font-size: .58rem; font-weight: 800; } +.notification-dot::after { content: '2'; } + +.avatar { display: grid; width: 42px; height: 42px; flex: 0 0 42px; place-items: center; border: 2px solid #fff; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--brand-teal), var(--brand-blue)); font-weight: 800; box-shadow: 0 2px 7px rgba(7,24,46,.15); } +.avatar--button { width: 38px; height: 38px; min-height: 38px; border: 2px solid rgba(255,255,255,.65); cursor: pointer; } +.avatar--small { width: 34px; height: 34px; flex-basis: 34px; } +.avatar--mini { width: 26px; height: 26px; flex-basis: 26px; border-width: 1px; font-size: .7rem; } +.avatar--large { width: 72px; height: 72px; flex-basis: 72px; font-size: 1.35rem; } +.avatar--a { background: linear-gradient(135deg, #00858A, #005F61); } +.avatar--b { background: linear-gradient(135deg, #2596BE, #5264d9); } +.avatar--c { background: linear-gradient(135deg, #F04A67, #b744c4); } +.avatar--muted { color: var(--brand-ink); background: #dceff2; border-color: #fff; } + +main.app-main { + margin: 0; + min-height: calc(100vh - 66px); + padding: 1.2rem .9rem 6.4rem; + color: var(--brand-ink); + background: var(--brand-mist); +} +.desktop-topbar { display: none; } +.screen { width: min(100%, 1040px); margin: 0 auto; animation: page-in .18s ease-out; } +@keyframes page-in { from { opacity: .5; transform: translateY(4px); } to { opacity: 1; transform: none; } } + +.page-header { margin-bottom: 1.35rem; } +.page-header h1, .member-hero h1 { margin: 0 0 .4rem; color: var(--brand-ink); font-family: var(--font-display); font-size: clamp(2.25rem, 9vw, 3.6rem); font-weight: 700; line-height: .88; letter-spacing: -.015em; text-transform: uppercase; } +.page-subtitle { max-width: 48rem; color: #425e70 !important; font-size: .9rem; } +.eyebrow { margin-bottom: .42rem; color: var(--brand-teal-strong); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } +.kicker { color: var(--brand-teal) !important; } +.with-team-switch, .page-header--actions { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; } + +.card { border-color: rgba(7,24,46,.12); background: #fff; box-shadow: 0 5px 18px rgba(7,24,46,.06); } +.card-header { background: #edf7f8; border-color: rgba(7,24,46,.1); } +.card-header h2, .card-header h3 { color: var(--brand-ink); } +.card-body { color: #30495c; } +.btn-primary { color: #fff !important; background: #087b7c !important; border-color: #087b7c !important; } +.btn-primary:hover { background: #05696a !important; } +.btn-ghost { color: var(--brand-ink); border-color: rgba(7,24,46,.18); background: #fff; } +.btn-ghost:hover { color: var(--brand-ink); border-color: var(--brand-teal); background: #edf7f8; } + +.card-label { display: block; margin-bottom: .35rem; color: #607786; font-size: .64rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; } +.card-label--urgent { color: #b62542; } +.card-label--action { color: #8b5a00; } +.card-label--upcoming, .card-label--info { color: #087b7c; } + +.urgent-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .85rem; margin-bottom: 1.8rem; padding: 1rem; border: 1px solid rgba(240,74,103,.3); border-left: 5px solid var(--brand-coral); border-radius: 1rem; background: linear-gradient(110deg, #fff3f5, #fff); box-shadow: 0 6px 18px rgba(240,74,103,.09); cursor: pointer; } +.urgent-card__icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: .75rem; color: #fff; background: var(--brand-coral); } +.urgent-card h2 { margin: 0 0 .15rem; font-size: 1rem; } +.urgent-card p { color: #4a6474; font-size: .78rem; } +.urgent-card__arrow { color: var(--brand-coral); } + +.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin: 1.7rem 0 .8rem; } +.section-heading h2 { margin: 0; color: var(--brand-ink); font-size: 1.1rem; } +.text-action, .text-back { display: inline-flex; align-items: center; gap: .3rem; min-height: 44px; padding: 0; border: 0; color: #087b7c; background: transparent; cursor: pointer; font-size: .78rem; font-weight: 800; } + +.shift-stack { display: grid; gap: .7rem; } +.shift-card { display: grid; grid-template-columns: auto 1fr; gap: .85rem; padding: .85rem; border: 1px solid rgba(7,24,46,.11); border-radius: .9rem; background: #fff; box-shadow: 0 3px 12px rgba(7,24,46,.05); } +.date-tile { display: grid; width: 52px; height: 58px; place-items: center; align-content: center; border-radius: .7rem; color: #fff; background: var(--brand-teal-strong); } +.date-tile strong { font-family: var(--font-display); font-size: 1.55rem; line-height: .9; } +.date-tile span { margin-top: .2rem; color: var(--brand-aqua); font-size: .57rem; font-weight: 900; letter-spacing: .1em; } +.shift-card__content { min-width: 0; } +.shift-card__title-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .35rem; } +.shift-card h3 { color: var(--brand-ink); font-size: .92rem; } +.shift-card p { margin: .1rem 0 .4rem; color: #5c7280; font-size: .76rem; } +.position-pill { display: inline-flex; padding: .18rem .5rem; border-radius: 999px; color: #075f60; background: #e2f5f3; font-size: .67rem; font-weight: 800; } +.status-badge-ui { display: inline-flex; align-items: center; gap: .25rem; border: 1px solid transparent; } +.status-badge-ui .material-icons { font-size: .9rem; } +.status-ok { color: #0a654f; background: #e5f6ef; border-color: #b9e8d4; } +.status-info { color: #075c70; background: #e4f4f8; border-color: #b7dfe8; } +.status-action { color: #6b5100; background: #fff5c9; border-color: #ead66b; } + +.dashboard-grid { display: grid; gap: .7rem; margin-top: 1.3rem; } +.dashboard-tile { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem; width: 100%; padding: .9rem; border: 1px solid rgba(7,24,46,.1); border-radius: .85rem; color: var(--brand-ink); background: #fff; text-align: left; cursor: pointer; box-shadow: 0 3px 10px rgba(7,24,46,.04); } +.dashboard-tile > span:nth-child(2) { display: grid; } +.dashboard-tile small { color: #6b7e89; font-size: .6rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; } +.dashboard-tile strong { margin-top: .1rem; font-size: .88rem; } +.dashboard-tile em { color: #667c89; font-size: .72rem; font-style: normal; } +.tile-icon { display: grid; width: 42px; height: 42px; place-items: center; border-radius: .72rem; color: #075f60; background: #e1f3f2; } +.tile-icon--blue { color: #176b8a; background: #e1f0f5; } +.tile-icon--yellow { color: #725600; background: #fff8c9; } + +.team-highlight h2 { margin: .15rem 0 .35rem; color: var(--brand-ink); font-size: 1.1rem; } +.team-highlight p { color: #425e70; } +.meta-line { display: inline-flex; align-items: center; gap: .35rem; margin-top: .7rem; color: #637b89; font-size: .72rem; } +.meta-line .material-icons { font-size: 1rem; } +.member-preview-row { display: flex; padding-left: .3rem; } +.member-preview-row .avatar { margin-left: -8px; } +.member-preview-row .avatar:first-child { margin-left: 0; } +.card-list { overflow: hidden; border: 1px solid rgba(7,24,46,.11); border-radius: 1rem; background: #fff; } +.list-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem; width: 100%; padding: .9rem 1rem; border: 0; border-bottom: 1px solid rgba(7,24,46,.09); color: var(--brand-ink); background: #fff; text-align: left; cursor: pointer; } +.list-row:last-child { border-bottom: 0; } +.list-row span:nth-child(2) { display: grid; } +.list-row strong { font-size: .84rem; } +.list-row small { color: #687f8c; font-size: .7rem; } +.list-row__icon { color: #087b7c; } + +.search-row { display: flex; align-items: center; justify-content: space-between; gap: .7rem; margin-bottom: 1rem; } +.search-box { display: flex; flex: 1; align-items: center; gap: .55rem; min-height: 44px; padding: 0 .75rem; border: 1px solid rgba(7,24,46,.15); border-radius: .7rem; background: #fff; } +.search-box .material-icons { color: #6b7f8c; font-size: 1.1rem; } +.search-box input { width: 100%; border: 0; outline: 0; color: var(--brand-ink); background: transparent; } +.member-list { display: grid; gap: .65rem; } +.member-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem; padding: .9rem; border: 1px solid rgba(7,24,46,.11); border-radius: .85rem; background: #fff; } +.member-card__main { min-width: 0; } +.member-card__main > div { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; } +.member-card h3 { color: var(--brand-ink); font-size: .92rem; } +.member-card p { margin-top: .12rem; color: #536d7d; font-size: .73rem; } +.member-card a { display: inline-block; margin-top: .2rem; color: #087b7c; font-size: .74rem; font-weight: 800; } +.member-card small { color: #6a7d88; font-size: .67rem; } +.muted-copy, .muted-icon { color: #81909a !important; } +.member-card--admin-extra { border-style: dashed; background: #f9fcfd; } +.context-note { display: flex; align-items: flex-start; gap: .6rem; margin-top: 1rem; padding: .8rem .9rem; border-left: 4px solid var(--brand-blue); border-radius: .55rem; color: #3a596b; background: #eaf4f7; font-size: .75rem; line-height: 1.5; } +.context-note .material-icons { color: #176b8a; font-size: 1.05rem; } +.context-note--strong { margin: 0 0 1.2rem; border-left-color: var(--brand-teal); background: #e7f5f4; } + +.period-progress { margin-bottom: 1rem; } +.period-progress__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; } +.period-progress__top strong { color: var(--brand-ink); font-size: .8rem; } +.progress-track { height: 8px; margin: .8rem 0 .45rem; overflow: hidden; border-radius: 999px; background: #dcebed; } +.progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand-teal), var(--brand-blue)); } +.period-progress p { color: #687e8b; font-size: .72rem; } +.availability-list { display: grid; gap: .7rem; } +.availability-card { display: grid; grid-template-columns: auto 1fr; gap: .8rem; padding: .85rem; border: 1px solid rgba(7,24,46,.11); border-radius: .9rem; background: #fff; } +.availability-card--urgent { border-left: 4px solid var(--brand-coral); } +.availability-card__main h3 { color: var(--brand-ink); font-size: .9rem; } +.availability-card__main p { color: #607886; font-size: .72rem; } +.need-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; } +.need-row span { padding: .18rem .45rem; border-radius: .4rem; color: #496777; background: #edf5f6; font-size: .65rem; font-weight: 700; } +.availability-actions { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; } +.answer-btn { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; min-height: 44px; border: 1px solid rgba(7,24,46,.15); border-radius: .6rem; color: #526b7b; background: #fff; cursor: pointer; font-weight: 800; } +.answer-btn .material-icons { font-size: 1rem; } +.answer-btn--yes.is-selected { color: #075f60; border-color: #62bdb0; background: #ddf5f1; } +.answer-btn--no.is-selected { color: #a82440; border-color: #ef9bad; background: #fff0f3; } +.title-with-badge { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; } + +.segmented { display: inline-grid; grid-template-columns: 1fr 1fr; width: 100%; margin-bottom: 1rem; padding: 4px; border-radius: .75rem; background: #dcebed; } +.segmented button { min-height: 40px; border: 0; border-radius: .55rem; color: #5b7482; background: transparent; font-weight: 800; cursor: pointer; } +.segmented button.is-active { color: var(--brand-ink); background: #fff; box-shadow: 0 2px 8px rgba(7,24,46,.08); } +.segmented span { display: inline-grid; min-width: 20px; height: 20px; margin-left: .25rem; place-items: center; border-radius: 999px; background: #e7f1f3; font-size: .64rem; } +.document-list { display: grid; gap: .7rem; } +.document-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem; padding: .9rem; border: 1px solid rgba(7,24,46,.11); border-radius: .9rem; background: #fff; } +.document-card h3 { color: var(--brand-ink); font-size: .88rem; } +.document-card p { margin: .12rem 0 .3rem; color: #506b7b; font-size: .72rem; } +.document-card > div:nth-child(2) > span:last-child { color: #74858f; font-size: .65rem; } +.file-icon, .file-thumb { display: grid; width: 48px; height: 56px; place-items: center; border-radius: .55rem; color: #176b8a; background: #e2f0f5; font-size: .62rem; font-weight: 900; } +.file-icon--pdf { color: #ad2946; background: #fbe8ec; } +.file-thumb { color: #075f60; background: linear-gradient(145deg, #dff5f1, #c6e9e8); } +.document-card--pending { border-style: dashed; background: #fffdf2; } + +.channel-layout { display: grid; gap: .7rem; } +.channel-list { display: flex; gap: .45rem; overflow-x: auto; padding-bottom: .2rem; } +.channel-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .5rem; min-width: 180px; min-height: 58px; padding: .6rem .7rem; border: 1px solid rgba(7,24,46,.11); border-radius: .7rem; color: var(--brand-ink); background: #fff; text-align: left; cursor: pointer; } +.channel-item.is-active { border-color: #61bcb7; background: #e6f5f3; } +.channel-item .material-icons { color: #087b7c; font-size: 1.1rem; } +.channel-item span:nth-child(2) { display: grid; } +.channel-item strong { font-size: .78rem; } +.channel-item small { color: #667c89; font-size: .62rem; } +.chat-pane { display: flex; min-height: 560px; flex-direction: column; overflow: hidden; border: 1px solid rgba(7,24,46,.11); border-radius: 1rem; background: #fff; box-shadow: 0 5px 18px rgba(7,24,46,.05); } +.chat-pane__header { display: flex; min-height: 62px; align-items: center; justify-content: space-between; padding: .7rem .9rem; border-bottom: 1px solid rgba(7,24,46,.1); background: #edf7f8; } +.chat-pane__header strong, .chat-pane__header span { display: block; } +.chat-pane__header strong { color: var(--brand-ink); } +.chat-pane__header span { color: #6c818c; font-size: .66rem; } +.message-stream { display: flex; flex: 1; flex-direction: column; gap: .85rem; padding: .9rem; overflow-y: auto; background: linear-gradient(#f8fcfd, #fff); } +.chat-day { display: flex; align-items: center; gap: .5rem; color: #87959e; font-size: .62rem; font-weight: 800; text-transform: uppercase; } +.chat-day::before, .chat-day::after { content: ''; flex: 1; height: 1px; background: #dce9ec; } +.message-bubble { max-width: 88%; align-self: flex-start; padding: .7rem .8rem; border: 1px solid #dce7ea; border-radius: .9rem .9rem .9rem .2rem; background: #fff; box-shadow: 0 2px 6px rgba(7,24,46,.04); } +.message-bubble--own { align-self: flex-end; border-color: #9ddbd4; border-radius: .9rem .9rem .2rem .9rem; background: #def3f0; } +.message-bubble--reply { border-left: 4px solid var(--brand-blue); } +.message-author { display: flex; align-items: center; gap: .4rem; margin-bottom: .25rem; } +.message-author strong { color: var(--brand-ink); font-size: .72rem; } +.message-author time { margin-left: auto; color: #7e9099; font-size: .6rem; } +.message-bubble p { color: #304d5e; font-size: .78rem; line-height: 1.48; } +.message-state { margin-top: .32rem; color: #86949b; font-size: .58rem; text-align: right; } +.message-state--read { color: #087b7c; font-weight: 800; } +.reply-reference { margin: -.15rem 0 .45rem; padding: .3rem .45rem; border-left: 3px solid var(--brand-blue); color: #48687a; background: #edf5f8; font-size: .62rem; } +.chat-composer { padding: .7rem; border-top: 1px solid rgba(7,24,46,.1); background: #edf7f8; } +.chat-composer textarea { width: 100%; min-height: 76px; padding: .65rem; border: 1px solid rgba(7,24,46,.15); border-radius: .65rem; color: var(--brand-ink); background: #fff; resize: none; } +.chat-composer > div { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .4rem; } +.composer-hint { color: #73858f; font-size: .58rem; } +.send-button { display: grid; width: 44px; height: 44px; place-items: center; border: 0; border-radius: .65rem; color: #fff; background: #087b7c; cursor: pointer; } + +.profile-grid { display: grid; gap: .9rem; } +.profile-identity { display: flex; align-items: center; gap: .9rem; margin-bottom: 1rem; } +.profile-identity h2 { color: var(--brand-ink); font-size: 1.15rem; } +.profile-identity span { color: #6f828d; font-size: .72rem; } +.avatar-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; margin: 1rem 0; } +.avatar-choice { display: grid; justify-items: center; gap: .3rem; min-height: 84px; padding: .55rem; border: 1px solid rgba(7,24,46,.14); border-radius: .65rem; color: #526b7b; background: #fff; cursor: pointer; } +.avatar-choice.is-selected { border-color: #087b7c; box-shadow: inset 0 0 0 1px #087b7c; background: #eef9f8; } +.avatar-choice span:last-child { font-size: .65rem; font-weight: 800; } +.avatar-picker--compact { grid-template-columns: repeat(3, minmax(70px, 110px)); } +.toggle-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .8rem; margin-bottom: 1rem; cursor: pointer; } +.toggle-row strong, .toggle-row small { display: block; } +.toggle-row strong { color: var(--brand-ink); font-size: .84rem; } +.toggle-row small { color: #6d818d; font-size: .68rem; } +.toggle-row input { position: absolute; opacity: 0; } +.toggle-ui { position: relative; width: 46px; height: 26px; border-radius: 999px; background: #c8d6db; transition: .18s ease; } +.toggle-ui::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 5px rgba(7,24,46,.2); transition: .18s ease; } +.toggle-row input:checked + .toggle-ui { background: #087b7c; } +.toggle-row input:checked + .toggle-ui::after { transform: translateX(20px); } +.choice-pills { display: flex; flex-wrap: wrap; gap: .4rem; } +.choice-pills button { min-height: 38px; padding: .35rem .65rem; border: 1px solid rgba(7,24,46,.14); border-radius: 999px; color: #566f7e; background: #fff; cursor: pointer; } +.choice-pills button.is-selected { color: #075f60; border-color: #6dbfb8; background: #def3ef; } +.device-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .7rem; padding: .85rem 1rem; border-top: 1px solid rgba(7,24,46,.09); } +.device-row:first-of-type { border-top: 0; } +.device-row > .material-icons { color: #087b7c; } +.device-row strong, .device-row small { display: block; } +.device-row strong { color: var(--brand-ink); font-size: .78rem; } +.device-row small { color: #71858f; font-size: .65rem; } + +.notification-list { display: grid; gap: .7rem; } +.notification-card { display: grid; grid-template-columns: auto 1fr; gap: .75rem; padding: .9rem; border: 1px solid rgba(7,24,46,.1); border-radius: .85rem; background: #fff; } +.notification-card > .material-icons { display: grid; width: 40px; height: 40px; place-items: center; border-radius: .65rem; color: #176b8a; background: #e3f1f5; } +.notification-card--urgent { border-left: 4px solid var(--brand-coral); } +.notification-card--urgent > .material-icons { color: #b62542; background: #ffe7ec; } +.notification-card--important { border-left: 4px solid #d7ad32; } +.notification-card--important > .material-icons { color: #805d00; background: #fff5cc; } +.notification-card h3 { color: var(--brand-ink); font-size: .84rem; } +.notification-card p { margin: .12rem 0 .3rem; color: #536d7d; font-size: .72rem; } +.notification-card time { color: #86959d; font-size: .62rem; } + +.admin-kpi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; margin-bottom: 1.2rem; } +.admin-kpi { display: grid; min-height: 122px; align-content: center; justify-items: center; gap: .15rem; padding: .8rem; border: 1px solid rgba(7,24,46,.11); border-top: 4px solid #087b7c; border-radius: .85rem; color: var(--brand-ink); background: #fff; cursor: pointer; } +.admin-kpi .material-icons { color: #087b7c; } +.admin-kpi strong { font-family: var(--font-display); font-size: 2.2rem; line-height: 1; } +.admin-kpi small { color: #667d8a; text-align: center; } +.admin-kpi--urgent { border-top-color: var(--brand-coral); } +.admin-kpi--urgent .material-icons, .admin-kpi--urgent strong { color: #b62542; } +.management-section { margin-bottom: 1rem; } +.management-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; padding: .9rem 1rem; border-top: 1px solid rgba(7,24,46,.09); } +.management-row:first-of-type { border-top: 0; } +.management-row strong, .management-row span { display: block; } +.management-row strong { color: var(--brand-ink); font-size: .8rem; } +.management-row span { color: #617987; font-size: .68rem; } +.fairness-table { display: grid; } +.fairness-table > div { display: grid; grid-template-columns: 1fr 70px 110px; gap: .6rem; padding: .75rem 1rem; border-top: 1px solid rgba(7,24,46,.08); color: #526d7d; font-size: .72rem; } +.fairness-table .fairness-head { color: #71848e; background: #f6fafb; font-size: .62rem; font-weight: 900; text-transform: uppercase; } +.fairness-table strong { color: var(--brand-ink); } + +.org-grid { display: grid; gap: .75rem; } +.org-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem; padding: 1rem; border: 1px solid rgba(7,24,46,.11); border-radius: .9rem; color: var(--brand-ink); background: #fff; text-align: left; cursor: pointer; } +.org-card > .material-icons:first-child { display: grid; width: 44px; height: 44px; place-items: center; border-radius: .7rem; color: #075f60; background: #e3f4f2; } +.org-card strong, .org-card small { display: block; } +.org-card strong { font-size: .86rem; } +.org-card small { color: #687f8c; font-size: .68rem; } +.org-card > .material-icons:last-child { color: #80919a; } + +.filter-bar { display: grid; gap: .7rem; margin-bottom: 1rem; padding: .8rem; } +.audit-list { overflow: hidden; } +.audit-row { display: grid; grid-template-columns: auto 1fr; gap: .75rem; padding: .95rem 1rem; border-top: 1px solid rgba(7,24,46,.09); } +.audit-row:first-child { border-top: 0; } +.audit-icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: .65rem; color: #075f60; background: #e2f3f1; } +.audit-icon--danger { color: #ad2946; background: #fde8ed; } +.audit-row strong { color: var(--brand-ink); font-size: .8rem; } +.audit-row p { margin: .15rem 0 .3rem; color: #4b6777; font-size: .72rem; } +.audit-row div > span { color: #84949c; font-size: .62rem; } + +.screen--auth { min-height: calc(100vh - 9rem); display: grid; place-items: center; } +.auth-panel { width: min(100%, 430px); margin: 0 auto; } +.auth-panel--wide { width: min(100%, 700px); } +.auth-brand { margin-bottom: 1rem; text-align: center; } +.auth-brand h1 { margin: 0 0 .6rem; color: var(--brand-ink); font-family: var(--font-display); font-size: clamp(2.5rem, 10vw, 4rem); line-height: .88; text-transform: uppercase; } +.auth-brand p { color: #526e7e; } +.auth-card { width: 100%; } +.auth-footnote { margin-top: .8rem; color: #71848f; font-size: .68rem; text-align: center; } +.code-inputs { display: grid; grid-template-columns: repeat(6, 1fr); gap: .35rem; margin-bottom: 1rem; } +.code-inputs input { width: 100%; min-width: 0; height: 52px; border: 1px solid rgba(7,24,46,.16); border-radius: .55rem; color: var(--brand-ink); background: #f8fcfd; text-align: center; font-size: 1.2rem; font-weight: 800; } +.auth-card .btn + .btn { margin-top: .55rem; } +.team-choice-grid { display: grid; gap: .7rem; } +.team-choice { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem; padding: 1rem; border: 1px solid rgba(7,24,46,.12); border-radius: .9rem; color: var(--brand-ink); background: #fff; text-align: left; cursor: pointer; } +.team-choice.is-selected { border-color: #6cbfb8; box-shadow: inset 4px 0 0 #087b7c; } +.team-choice__icon { display: grid; width: 46px; height: 46px; place-items: center; border-radius: .7rem; color: #075f60; background: #e0f3f1; } +.team-choice strong, .team-choice small { display: block; } +.team-choice small { color: #6b808b; font-size: .68rem; } + +.bottom-nav { position: fixed; inset: auto 0 0 0; z-index: 35; display: grid; grid-template-columns: repeat(6, 1fr); min-height: 66px; padding: 4px max(2px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(2px, env(safe-area-inset-left)); border-top: 1px solid rgba(255,255,255,.12); background: rgba(6,17,38,.97); box-shadow: 0 -5px 20px rgba(6,17,38,.18); backdrop-filter: blur(14px); } +.bottom-nav__item { position: relative; display: grid; min-width: 0; min-height: 56px; place-items: center; align-content: center; gap: 1px; padding: 4px 1px; border: 0; border-radius: .55rem; color: rgba(255,255,255,.58); background: transparent; cursor: pointer; font-size: .56rem; font-weight: 750; } +.bottom-nav__item .material-icons { font-size: 1.25rem; } +.bottom-nav__item.is-active { color: var(--brand-aqua); background: rgba(82,224,207,.1); } +.bottom-nav__item i { position: absolute; top: 2px; right: calc(50% - 18px); display: grid; min-width: 16px; height: 16px; place-items: center; border-radius: 999px; color: #fff; background: var(--brand-coral); font-size: .55rem; font-style: normal; font-weight: 900; } + +@media (min-width: 680px) { + main.app-main { padding: 1.7rem 1.4rem 7rem; } + .dashboard-grid { grid-template-columns: repeat(2, 1fr); } + .availability-card { grid-template-columns: auto 1fr auto; align-items: center; } + .availability-actions { grid-column: auto; display: flex; } + .answer-btn { min-width: 68px; } + .profile-grid { grid-template-columns: 1fr 1fr; } + .profile-card--wide { grid-column: 1 / -1; } + .admin-kpi-grid { grid-template-columns: repeat(4, 1fr); } + .org-grid { grid-template-columns: repeat(2, 1fr); } + .filter-bar { grid-template-columns: 1fr 220px; align-items: center; } +} + +@media (min-width: 900px) { + .mock-sidebar { display: flex; } + .mobile-header, .bottom-nav { display: none; } + main.app-main { margin-left: 260px; min-height: 100vh; padding: 5.7rem 2rem 4rem; } + .desktop-topbar { position: fixed; top: 0; right: 0; left: 260px; z-index: 25; display: flex; min-height: 64px; align-items: center; justify-content: space-between; padding: 0 2rem; border-bottom: 1px solid rgba(7,24,46,.08); background: rgba(244,250,252,.92); backdrop-filter: blur(12px); } + .route-chip { padding: .35rem .6rem; border: 1px solid rgba(7,24,46,.08); border-radius: .45rem; color: #657c88; background: #fff; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .72rem; } + .desktop-actions { display: flex; align-items: center; gap: .5rem; } + .screen { margin: 0; } + .member-hero { padding-top: .4rem; } + .shift-stack { grid-template-columns: repeat(2, 1fr); } + .channel-layout { grid-template-columns: 250px minmax(0, 1fr); align-items: start; } + .channel-list { display: grid; overflow: visible; } + .channel-item { min-width: 0; } + .org-grid { grid-template-columns: repeat(3, 1fr); } +} + +@media (min-width: 1200px) { + main.app-main { padding-right: 3rem; padding-left: 3rem; } + .dashboard-grid { grid-template-columns: repeat(4, 1fr); } + .dashboard-tile { grid-template-columns: auto 1fr; } + .dashboard-tile > .material-icons:last-child { display: none; } +} + +@media (prefers-reduced-motion: reduce) { + .screen { animation: none; } + * { scroll-behavior: auto !important; } +} diff --git a/VAULT/hinunher/style.css b/VAULT/hinunher/style.css new file mode 100644 index 0000000..e1773ed --- /dev/null +++ b/VAULT/hinunher/style.css @@ -0,0 +1,4313 @@ +/* + * Checkpoint Köln — Staff Backend + * style.css · v1.0 + * + * Einheitliches CSS für alle Staff-Templates (Admin, Beratung, Medizin, Empfang). + * Keine Inline-Styles in den Templates — alles hier. + * + * Struktur: + * 1. Design Tokens & Reset + * 2. Layout (Sidebar + Main) + * 3. Sidebar: Header, Account, Nav, Nav-Gruppen, Footer + * 4. Mobile-Toggle + * 5. Main-Content-Bereich + * 6. Komponenten: Karten, Tabellen, Buttons, Formulare, Badges, Toasts + * 7. Chat-Widget (KI-Assistent) + * 8. Team-Chat-Widget + * 9. Responsive + */ + +/* ============================================================ + 1. DESIGN TOKENS & RESET + ============================================================ */ + +@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@400;600;700;900&family=Noto+Sans:wght@400;500;600;700;800&display=swap'); + +:root { + /* Palette */ + --cp-bg: #07182e; + --cp-surface: #0d2235; + --cp-surface-2: #112840; + --cp-surface-3: #16304d; + --cp-border: rgba(255, 255, 255, .09); + --cp-border-2: rgba(255, 255, 255, .15); + + /* Text */ + --cp-ink: #e8f2f8; + --cp-ink-2: rgba(232, 242, 248, .72); + --cp-muted: rgba(232, 242, 248, .42); + + /* Markenfarben (aus User-Frontend übernommen) */ + --cp-teal: #52e0cf; + --cp-blue: #2596be; + --cp-coral: #f04a67; + --cp-yellow: #FBEF1F; + --cp-aqua-dim: rgba(82, 224, 207, .18); + + /* Sidebar */ + --sidebar-width: 248px; + --sidebar-bg: + radial-gradient(circle at 8% 7%, rgba(82, 224, 207, .32), transparent 25rem), + radial-gradient(circle at 72% 74%, rgba(82, 224, 207, .22), transparent 25rem), + linear-gradient(140deg, #005f61 0%, #006468 62%, #014547 100%); + + /* Typografie */ + --font-body: 'Noto Sans', system-ui, sans-serif; + --font-display: 'Big Shoulders Display', system-ui, sans-serif; + + /* Radii */ + --r-sm: .45rem; + --r-md: .75rem; + --r-lg: 1rem; + + /* Schatten */ + --shadow-sm: 0 2px 8px rgba(0, 0, 0, .28); + --shadow-md: 0 6px 20px rgba(0, 0, 0, .38); + --shadow-lg: 0 14px 40px rgba(0, 0, 0, .48); + + /* Transitions */ + --ease: .18s cubic-bezier(.22, 1, .36, 1); +} + +*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } + +html { + font-size: 15px; + scroll-behavior: smooth; +} + +body { + display: flex; + min-height: 100vh; + font-family: var(--font-body); + color: var(--cp-ink); + background: var(--cp-bg); + line-height: 1.5; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +a { color: inherit; text-decoration: none; } +img { max-width: 100%; display: block; } +button, input, select, textarea { font: inherit; border-radius: var(--r-sm); } +:focus-visible { outline: 2px solid var(--cp-teal); outline-offset: 3px; } +[hidden] { display: none !important; } + +/* ============================================================ + 2. LAYOUT — SIDEBAR + MAIN + ============================================================ */ + +.sidebar { + position: fixed; + inset: 0 auto 0 0; + z-index: 200; + width: var(--sidebar-width); + display: flex; + flex-direction: column; + min-height: 0; + overflow: hidden; + background: var(--sidebar-bg); + border-right: 1px solid var(--cp-border); + box-shadow: 4px 0 24px rgba(0, 0, 0, .35); + /* Transition fuer Mobile-Drawer */ + transition: transform var(--ease); +} + +/* Enthält Logo, Account und den tatsaechlich scrollbaren Nav-Bereich. + min-height: 0 ist bei verschachtelten Flexboxen entscheidend: Ohne diese + Regel waechst die Navigation ueber die verfuegbare Sidebar-Hoehe hinaus. */ +.sidebar-main { + display: flex; + flex: 1 1 auto; + flex-direction: column; + min-height: 0; + overflow: hidden; +} + +main { + /* Helle Arbeitsfläche: Die Sidebar bleibt dunkel, Inhalte werden ruhiger. */ + --cp-bg: #f3fafb; + --cp-surface: #ffffff; + --cp-surface-2: #e8f4f6; + --cp-surface-3: #dceff2; + --cp-border: rgba(7, 24, 46, .13); + --cp-border-2: rgba(7, 24, 46, .22); + /* Kontraststarke Arbeitsfarben: mindestens gut lesbar auf hellem Grund. */ + --cp-ink: #07182e; + --cp-ink-2: #30495c; + --cp-muted: #526b7b; + --cp-teal: #087b7c; + --cp-blue: #176b8a; + --cp-coral: #c93552; + --cp-aqua-dim: rgba(8, 123, 124, .12); + + margin-left: var(--sidebar-width); + flex: 1; + min-height: 100vh; + padding: 2rem 2.2rem 3.5rem; + color: var(--cp-ink); + background: var(--cp-bg); +} + +/* ============================================================ + 3. SIDEBAR — INHALTE + ============================================================ */ + +/* --- Sidebar-Top: Logo --- */ +.sidebar-top { + padding: 1.5rem 1.4rem 1.1rem; + border-bottom: 1px solid var(--cp-border); + flex-shrink: 0; +} + +.sidebar-top img { + width: 148px; + height: auto; +} + +/* --- Account-Info --- */ +.account-info { + display: flex; + align-items: center; + gap: .75rem; + min-height: 66px; + padding: .8rem 1.25rem; + border-bottom: 1px solid var(--cp-border); + color: var(--cp-ink); + flex-shrink: 0; +} + +/* Rollen-Icon als ruhiger, klarer Avatar */ +.account-avatar { + display: grid; + width: 35px; + height: 35px; + flex: 0 0 35px; + place-items: center; + border: 1px solid rgba(251, 239, 31, .24); + border-radius: 50%; + color: var(--cp-yellow); + background: rgba(251, 239, 31, .08); +} + +.account-avatar .material-icons { + color: currentColor !important; + font-size: 1.15rem; +} + +.account-details { + display: grid; + min-width: 0; + gap: .06rem; +} + +.account-name { + overflow: hidden; + color: var(--cp-ink); + font-size: .84rem; + font-weight: 700; + line-height: 1.25; + text-overflow: ellipsis; + white-space: nowrap; +} + +.account-role { + color: var(--cp-teal); + font-size: .68rem; + font-weight: 700; + letter-spacing: .07em; + line-height: 1.25; + text-transform: uppercase; +} + +/* --- Navigation: Scroll-Container --- */ +.sidebar-nav { + flex: 1 1 auto; + min-height: 0; + overflow-y: auto; + overflow-x: hidden; + padding: .65rem 0 1rem; + overscroll-behavior: contain; + /* Dezente Custom-Scrollbar */ + scrollbar-width: thin; + scrollbar-color: rgba(255, 255, 255, .12) transparent; +} + +.sidebar-nav::-webkit-scrollbar { width: 4px; } +.sidebar-nav::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, .12); + border-radius: 999px; +} +.sidebar-nav::-webkit-scrollbar-track { background: transparent; } + +.sidebar-nav ul { + list-style: none; + display: flex; + flex-direction: column; + gap: 1px; + padding: 0 .65rem; +} + +/* --- Einzelner Nav-Link --- */ +.sidebar-nav li a, +.sidebar-nav li > button.nav-link { + display: flex; + align-items: center; + gap: .65rem; + padding: .62rem .82rem; + border-radius: var(--r-sm); + border: none; + background: transparent; + color: var(--cp-ink-2); + font-size: .875rem; + font-weight: 500; + width: 100%; + text-align: left; + cursor: pointer; + transition: background var(--ease), color var(--ease); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.sidebar-nav li a .material-icons, +.sidebar-nav li > button.nav-link .material-icons { + font-size: 1.1rem; + flex-shrink: 0; + color: var(--cp-muted); + transition: color var(--ease); +} + +.sidebar-nav li a:hover, +.sidebar-nav li > button.nav-link:hover { + background: var(--cp-surface-2); + color: var(--cp-ink); +} + +.sidebar-nav li a:hover .material-icons, +.sidebar-nav li > button.nav-link:hover .material-icons { + color: var(--cp-teal); +} + +/* Aktiver Link */ +.sidebar-nav li a.active, +.sidebar-nav li a[aria-current="page"] { + background: var(--cp-aqua-dim); + color: var(--cp-ink); + font-weight: 700; +} + +.sidebar-nav li a.active .material-icons, +.sidebar-nav li a[aria-current="page"] .material-icons { + color: var(--cp-yellow); +} + +/* --- Nav-Trennlinie / Abschnittsüberschrift --- */ +.nav-section-label { + padding: 1.1rem .82rem .3rem; + color: var(--cp-muted); + font-size: .67rem; + font-weight: 700; + letter-spacing: .09em; + text-transform: uppercase; +} + +/* --- Nav-Gruppe (aufklappbar) --- */ +.nav-group > .nav-group-toggle { + display: flex; + align-items: center; + gap: .65rem; + padding: .62rem .82rem; + border-radius: var(--r-sm); + background: transparent; + border: none; + color: var(--cp-ink-2); + font-size: .875rem; + font-weight: 500; + width: 100%; + text-align: left; + cursor: pointer; + transition: background var(--ease), color var(--ease); +} + +.nav-group > .nav-group-toggle .material-icons:first-child { + font-size: 1.1rem; + color: var(--cp-muted); + transition: color var(--ease); +} + +.nav-group > .nav-group-toggle:hover { + background: var(--cp-surface-2); + color: var(--cp-ink); +} + +.nav-group > .nav-group-toggle:hover .material-icons:first-child { + color: var(--cp-teal); +} + +/* Pfeil-Icon rechts */ +.nav-group-arrow { + margin-left: auto; + font-size: .95rem !important; + transition: transform var(--ease), color var(--ease) !important; +} + +.nav-group.open > .nav-group-toggle .nav-group-arrow { + transform: rotate(90deg); + color: var(--cp-teal) !important; +} + +/* Untermenü */ +/* Diese Regeln brauchen die gleiche Spezifitaet wie .sidebar-nav ul. + Sonst ueberschreibt das allgemeine Flex-Layout das display:none des Untermenues. */ +.sidebar-nav .nav-group-children { + display: none; + list-style: none; + flex-direction: column; + gap: 1px; + min-width: 0; + margin: 2px 0 3px; + padding: 2px 0 2px .55rem; + border-left: 1px solid rgba(82, 224, 207, .22); +} + +.sidebar-nav .nav-group.open > .nav-group-children { + display: flex; +} + +.nav-group-children li { + min-width: 0; +} + +.nav-group-children li a { + min-width: 0; + font-size: .84rem; + padding-left: .85rem; + color: var(--cp-muted); +} + +.nav-group-children li a:hover { + color: var(--cp-ink); +} + +/* --- Sidebar-Bottom: Abmelden --- */ +.sidebar-bottom { + flex-shrink: 0; + padding: .85rem .65rem; + border-top: 1px solid var(--cp-border); +} + +.logout-link { + display: flex; + align-items: center; + gap: .65rem; + padding: .62rem .82rem; + border-radius: var(--r-sm); + color: var(--cp-ink); + font-size: .875rem; + font-weight: 600; + transition: background var(--ease), color var(--ease); +} + +.logout-link:hover { + background: rgba(240, 74, 103, .12); + color: var(--cp-coral); +} + +.logout-link .material-icons { + font-size: 1.1rem; + color: var(--cp-yellow) !important; +} + +/* ============================================================ + 4. MOBILE TOGGLE + ============================================================ */ + +.menu-toggle { + display: none; + position: fixed; + top: 1rem; + left: 1rem; + z-index: 300; + width: 42px; + height: 42px; + align-items: center; + justify-content: center; + border: 1px solid var(--cp-border-2); + border-radius: var(--r-sm); + background: var(--sidebar-bg); + color: var(--cp-ink); + cursor: pointer; + box-shadow: var(--shadow-sm); + transition: background var(--ease); +} + +.menu-toggle:hover { background: var(--cp-surface-2); } + +/* Overlay hinter Mobile-Sidebar */ +.sidebar-overlay { + display: none; + position: fixed; + inset: 0; + z-index: 190; + background: rgba(0, 0, 0, .55); + backdrop-filter: blur(3px); +} + +/* ============================================================ + 5. MAIN — CONTENT-BEREICH + ============================================================ */ + +/* Seitenüberschriften */ +.page-header { + margin-bottom: 1.8rem; +} + +.page-header h1, +.page-title { + font-family: var(--font-display); + font-size: clamp(2rem, 4vw, 3rem); + font-weight: 700; + line-height: .9; + letter-spacing: -.01em; + text-transform: uppercase; + color: var(--cp-ink); + margin-bottom: .4rem; +} + +.page-header .page-subtitle, +.page-subtitle { + color: var(--cp-ink-2); + font-size: .9rem; +} + +/* Kicker-Label (kleines Eyebrow-Element) */ +.kicker { + display: inline-flex; + align-items: center; + gap: .45rem; + margin-bottom: .75rem; + color: var(--cp-teal); + font-size: .7rem; + font-weight: 700; + letter-spacing: .08em; + text-transform: uppercase; +} + +.kicker::before { + content: ''; + width: 22px; + height: 1px; + background: currentColor; +} + +/* ============================================================ + 5a. ADMIN-DASHBOARD — BUCHUNGSÜBERSICHT + ============================================================ */ + +/* Buchungsübersicht: volle Arbeitsbreite und bündig zur linken Content-Kante, + entsprechend der Slotverwaltung. */ +.admin-dashboard { + width: 100%; + max-width: none; + margin: 0; +} + +.admin-dashboard__header { + display: block; + margin-bottom: 1.35rem; +} + +.admin-dashboard__header .kicker { margin-bottom: .55rem; } +.admin-dashboard__title-row { display: block; } +.admin-dashboard .page-subtitle { margin: .45rem 0 0; } + +.admin-filter { margin-bottom: 1.25rem; } + +.admin-filter__header { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 1rem; + padding: 1rem 1.35rem; + border-bottom: 1px solid var(--cp-border); + background: var(--cp-surface-2); +} + +.admin-filter__header h2 { + color: var(--cp-ink); + font-size: .95rem; + font-weight: 700; +} + +.admin-filter__header p { + margin-top: .18rem; + color: var(--cp-muted); + font-size: .78rem; +} + +.admin-filter__icon { + color: var(--cp-teal); + font-size: 1.25rem; +} + +.admin-filter__body { + display: flex; + flex-wrap: wrap; + align-items: flex-end; + gap: 1rem 1.25rem; + padding: 1.2rem 1.35rem; +} + +.admin-filter__field { width: min(100%, 220px); margin: 0; } +.admin-filter__field .form-control { min-height: 42px; } + +.admin-filter__actions { + display: grid; + grid-template-rows: auto 42px; + align-content: start; + gap: .45rem; + /* Entspricht dem unteren Standardabstand von .form-group. + So wird die komplette Aktionsspalte nicht durch align-items:flex-end + nach unten verschoben. */ + margin: 0 0 1.1rem; +} + +/* Die Aktionen folgen derselben Label-/Feld-Rhythmik wie die beiden Filter. + Dadurch beginnen die Buttons exakt auf Höhe der Eingabefelder. */ +.admin-filter__action-label { + display: block; + min-height: 18px; + color: var(--cp-ink-2); + font-size: .875rem; + font-weight: 600; + line-height: 18px; +} + +.admin-filter__action-buttons { + display: flex; + flex-wrap: wrap; + align-items: stretch; + gap: .55rem; +} + +.admin-filter__actions .btn-primary { + /* Dunkles Blau auf diesem Türkiston verfehlt den erforderlichen Kontrast. */ + color: #ffffff; + background: #087b7c; + border-color: #087b7c; + box-shadow: 0 4px 12px rgba(8, 123, 124, .22); +} + +.admin-filter__actions .btn-primary:hover { + color: #ffffff; + background: #05696a; + border-color: #05696a; +} + +.admin-filter__actions .btn-ghost { + color: var(--cp-ink); + background: var(--cp-surface); + border-color: var(--cp-border-2); +} + +.admin-filter__actions .btn-ghost:hover { + color: var(--cp-ink); + border-color: #087b7c; + background: var(--cp-surface-2); +} + +.admin-icon-button { min-height: 42px; } +.admin-icon-button .material-icons { font-size: 1.1rem; } + +.admin-appointments__toolbar { + display: flex; + align-items: center; + min-height: 42px; + margin: 0 0 .7rem; +} + +.admin-appointments__table { position: relative; } + +.admin-table { + min-width: 980px; + font-size: .82rem; +} + +.admin-table thead th { + position: sticky; + top: 0; + z-index: 1; + padding: .8rem .9rem; + background: var(--cp-surface-2); +} + +.admin-table tbody td { padding: .72rem .9rem; } +.admin-table__center { text-align: center; } +.admin-table :is(input, select, button) { max-width: 100%; } + +/* Terminzeilen: ruhig, hell akzentuiert und mit klaren Statusfarben */ +.appointment-row td { + color: var(--cp-ink-2); + white-space: nowrap; +} + +.appointment-row:hover td { color: var(--cp-ink); } +.appointment-code { color: var(--cp-teal) !important; font-weight: 800; letter-spacing: .04em; } +.appointment-time { color: var(--cp-ink) !important; font-weight: 700; } +.password-cell { display: flex; align-items: center; gap: .42rem; } +.password-mask { color: var(--cp-muted); font-size: .74rem; letter-spacing: .13em; } +.inline-action-form, .payment-form { display: inline-flex; margin: 0; } +.status-cell { text-align: center; } +.questionnaire-cell { min-width: 112px; } +.status-actions { display: inline-flex; align-items: center; justify-content: center; gap: .3rem; } + +.icon-action-btn { + display: inline-grid; + width: 32px; + height: 32px; + place-items: center; + padding: 0; + border: 1px solid transparent; + border-radius: .55rem; + color: var(--cp-ink-2); + background: transparent; + cursor: pointer; + text-decoration: none; + transition: transform var(--ease), background var(--ease), border-color var(--ease), color var(--ease), box-shadow var(--ease); +} + +.icon-action-btn:hover:not(:disabled) { transform: translateY(-1px); } +.icon-action-btn:active:not(:disabled) { transform: translateY(0); } +.icon-action-btn .material-icons { font-size: 1.08rem; } +.icon-action-btn:disabled, .icon-action-btn.is-disabled { cursor: not-allowed; opacity: .38; } + +.icon-action-btn--copy, +.icon-action-btn--view { + border-color: rgba(37, 150, 190, .24); + color: #72c7df; + background: rgba(37, 150, 190, .1); +} +.icon-action-btn--copy:hover:not(:disabled), +.icon-action-btn--view:hover:not(:disabled) { + border-color: rgba(82, 224, 207, .46); + color: var(--cp-teal); + background: rgba(82, 224, 207, .15); +} + +.icon-action-btn--ok { + border-color: rgba(82, 224, 207, .28); + color: var(--cp-teal); + background: rgba(82, 224, 207, .12); +} +.icon-action-btn--ok:hover:not(:disabled) { background: rgba(82, 224, 207, .22); } + +.icon-action-btn--complete, +.icon-action-btn--tests { + border-color: rgba(37, 150, 190, .28); + color: #72c7df; + background: rgba(37, 150, 190, .12); +} +.icon-action-btn--complete:hover:not(:disabled), +.icon-action-btn--tests:hover:not(:disabled) { background: rgba(37, 150, 190, .22); } + +.icon-action-btn--locked { + border-color: rgba(255, 255, 255, .13); + color: var(--cp-muted); + background: rgba(255, 255, 255, .055); +} +.icon-action-btn--locked:hover:not(:disabled) { color: var(--cp-ink-2); background: rgba(255,255,255,.1); } + +.icon-action-btn--delete { + border-color: rgba(240, 74, 103, .28); + color: #ff7890; + background: rgba(240, 74, 103, .1); +} +.icon-action-btn--delete:hover:not(:disabled) { color: #fff; background: var(--cp-coral); } + +.payment-form { width: 100%; } +.payment-select { + width: 100%; + min-width: 128px; + min-height: 34px; + padding: .38rem 2rem .38rem .65rem; + border: 1px solid rgba(82, 224, 207, .25); + border-radius: .5rem; + color: var(--cp-ink); + background-color: var(--cp-surface-2); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' fill='none'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2352e0cf' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right .65rem center; + appearance: none; + cursor: pointer; + font-size: .78rem; + font-weight: 600; +} +.payment-select:hover { border-color: var(--cp-teal); background-color: var(--cp-surface-3); } +.payment-select:focus { outline: 2px solid rgba(82,224,207,.24); outline-offset: 2px; border-color: var(--cp-teal); } +.payment-select option { color: #07182e; background: #fff; } + +.amount-cell { text-align: right; } +.amount-main { display: block; color: var(--cp-ink); font-weight: 700; } +.amount-free { display: block; margin-top: .15rem; color: var(--cp-coral); font-size: .72rem; } + +.copy-btn .copied-icon { color: var(--cp-teal); } + +.admin-table tbody.is-loading { + opacity: .42; + pointer-events: none; + transition: opacity var(--ease); +} + +.admin-table-empty td { + padding: 2.8rem 1rem !important; + color: var(--cp-muted); + text-align: center; +} + +.admin-table-loader { + position: absolute; + inset: 0; + z-index: 3; + display: grid; + place-content: center; + gap: .45rem; + min-height: 180px; + color: var(--cp-teal); + text-align: center; + font-size: .84rem; + font-weight: 700; + background: rgba(7, 24, 46, .5); + backdrop-filter: blur(2px); +} + +.admin-table-loader[hidden] { display: none; } + +.admin-table-loader .material-icons { + margin: 0 auto; + font-size: 1.6rem; + animation: admin-spin 1s linear infinite; +} + +@keyframes admin-spin { to { transform: rotate(360deg); } } + +/* ============================================================ + 5b. FRAGEBOGENANSICHT + ============================================================ */ + +.questionnaire-view { + width: min(100%, 980px); + margin: 0 auto; +} + +.questionnaire-header { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + margin-bottom: 1.5rem; +} + +.questionnaire-header .headline { + font-family: var(--font-display); + color: var(--cp-ink); + font-size: clamp(2rem, 4vw, 3rem); + font-weight: 700; + line-height: .9; + letter-spacing: -.01em; + text-transform: uppercase; +} + +.questionnaire-back { + flex: 0 0 auto; +} + +.questionnaire-card { + max-width: 900px; + padding: 1.5rem; + margin-bottom: 2rem; +} + +.questionnaire-list { + display: grid; + gap: 0; + margin: 0; +} + +.questionnaire-field { + display: grid; + grid-template-columns: minmax(220px, 42%) 1fr; + gap: 1rem; + padding: .9rem 0; + border-bottom: 1px solid var(--cp-border); + color: var(--cp-ink-2); + line-height: 1.55; +} + +.questionnaire-field:first-child { padding-top: 0; } +.questionnaire-field:last-child { padding-bottom: 0; border-bottom: 0; } + +.questionnaire-label { + color: var(--cp-ink); + font-weight: 700; +} + +.questionnaire-label--nested { padding-left: 1.5rem; } + +.questionnaire-section-label { + display: block; + grid-column: 1 / -1; + padding: 1.1rem 0 .45rem; + color: var(--cp-teal); + font-size: .75rem; + font-weight: 800; + letter-spacing: .08em; + text-transform: uppercase; +} + +@media (max-width: 600px) { + .questionnaire-header { align-items: flex-start; } + .questionnaire-card { padding: 1.15rem; } + .questionnaire-field { grid-template-columns: 1fr; gap: .2rem; padding: .8rem 0; } + .questionnaire-label--nested { padding-left: 0; } +} + +/* ============================================================ + 6. KOMPONENTEN + ============================================================ */ + +/* --- Karten --- */ +.card { + background: var(--cp-surface); + border: 1px solid var(--cp-border); + border-radius: var(--r-lg); + box-shadow: var(--shadow-sm); + overflow: hidden; +} + +.card-header { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + padding: 1.15rem 1.4rem; + border-bottom: 1px solid var(--cp-border); + background: var(--cp-surface-2); +} + +.card-header h2, +.card-header h3 { + font-family: var(--font-body); + font-size: 1rem; + font-weight: 800; + letter-spacing: .01em; + text-transform: none; + color: var(--cp-ink); + margin: 0; +} + +.card-body { + padding: 1.4rem; +} + +.card-footer { + padding: .85rem 1.4rem; + border-top: 1px solid var(--cp-border); + background: var(--cp-surface-2); + display: flex; + align-items: center; + justify-content: flex-end; + gap: .7rem; +} + +/* Karten-Raster */ +.card-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); + gap: 1.1rem; +} + +/* Stat-Karte (Kennzahlen) */ +.stat-card { + background: var(--cp-surface); + border: 1px solid var(--cp-border); + border-radius: var(--r-lg); + padding: 1.2rem 1.35rem; + display: flex; + flex-direction: column; + gap: .3rem; +} + +.stat-card__label { + color: var(--cp-muted); + font-size: .72rem; + font-weight: 700; + letter-spacing: .07em; + text-transform: uppercase; +} + +.stat-card__value { + font-family: var(--font-display); + font-size: 2.4rem; + font-weight: 700; + color: var(--cp-ink); + line-height: 1; +} + +.stat-card__value--teal { color: var(--cp-teal); } +.stat-card__value--coral { color: var(--cp-coral); } +.stat-card__value--yellow { color: var(--cp-yellow); } + +.stat-card__note { + color: var(--cp-muted); + font-size: .8rem; + margin-top: .1rem; +} + +/* --- Tabellen --- */ +.table-wrap { + overflow-x: auto; + border-radius: var(--r-md); + border: 1px solid var(--cp-border); +} + +table { + width: 100%; + border-collapse: collapse; + font-size: .875rem; +} + +thead { + background: var(--cp-surface-2); +} + +thead th { + padding: .75rem 1rem; + text-align: left; + color: var(--cp-muted); + font-size: .7rem; + font-weight: 700; + letter-spacing: .07em; + text-transform: uppercase; + border-bottom: 1px solid var(--cp-border); + white-space: nowrap; +} + +tbody tr { + border-bottom: 1px solid var(--cp-border); + transition: background var(--ease); +} + +tbody tr:last-child { border-bottom: none; } + +tbody tr:hover { background: var(--cp-surface-2); } + +tbody td { + padding: .8rem 1rem; + color: var(--cp-ink-2); + vertical-align: middle; +} + +tbody td strong { color: var(--cp-ink); } + +/* --- Formulare --- */ +.form-group { + display: grid; + gap: .45rem; + margin-bottom: 1.1rem; +} + +.form-group label { + color: var(--cp-ink-2); + font-size: .875rem; + font-weight: 600; +} + +.form-control { + width: 100%; + min-height: 44px; + padding: .65rem .85rem; + border: 1px solid var(--cp-border-2); + border-radius: var(--r-sm); + background: var(--cp-surface-2); + color: var(--cp-ink); + font: inherit; + font-size: .9rem; + transition: border-color var(--ease), background var(--ease), box-shadow var(--ease); +} + +.form-control:focus { + outline: none; + border-color: var(--cp-teal); + background: var(--cp-surface-3); + box-shadow: 0 0 0 3px rgba(82, 224, 207, .14); +} + +.form-control::placeholder { color: var(--cp-muted); } + +textarea.form-control { + min-height: 110px; + resize: vertical; +} + +select.form-control { + appearance: none; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2352e0cf' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); + background-repeat: no-repeat; + background-position: right .85rem center; + padding-right: 2.4rem; +} + +.form-hint { + color: var(--cp-muted); + font-size: .78rem; +} + +.form-error { + color: var(--cp-coral); + font-size: .78rem; +} + +/* Inline-Label-Reihe */ +.form-row { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + gap: 1rem; +} + +/* Checkbox / Radio */ +.form-check { + display: flex; + align-items: flex-start; + gap: .55rem; + cursor: pointer; +} + +.form-check input[type="checkbox"], +.form-check input[type="radio"] { + width: 1rem; + height: 1rem; + margin-top: .18rem; + flex-shrink: 0; + accent-color: var(--cp-teal); +} + +/* --- Buttons --- */ +.btn { + display: inline-flex; + align-items: center; + justify-content: center; + gap: .5rem; + min-height: 40px; + padding: .55rem 1.1rem; + border: 1px solid transparent; + border-radius: var(--r-sm); + cursor: pointer; + font: inherit; + font-size: .875rem; + font-weight: 700; + line-height: 1.2; + text-decoration: none; + transition: transform var(--ease), background var(--ease), border-color var(--ease), box-shadow var(--ease), color var(--ease); + white-space: nowrap; +} + +.btn:hover { transform: translateY(-1px); } +.btn:active { transform: translateY(0); } +.btn:disabled, .btn[aria-disabled="true"] { + opacity: .45; + cursor: not-allowed; + transform: none; +} + +.btn .material-icons { font-size: 1.05rem; } + +/* Varianten */ +.btn-primary { + background: var(--cp-teal); + color: #07182e; + box-shadow: 0 5px 16px rgba(82, 224, 207, .22); +} +.btn-primary:hover { + background: #6af0de; + box-shadow: 0 8px 22px rgba(82, 224, 207, .32); +} + +.btn-coral { + background: var(--cp-coral); + color: #fff; + box-shadow: 0 5px 16px rgba(240, 74, 103, .22); +} +.btn-coral:hover { + background: #d93d58; + box-shadow: 0 8px 22px rgba(240, 74, 103, .32); +} + +.btn-ghost { + border-color: var(--cp-border-2); + color: var(--cp-ink-2); + background: transparent; +} +.btn-ghost:hover { + background: var(--cp-surface-2); + border-color: rgba(255, 255, 255, .22); + color: var(--cp-ink); +} + +.btn-danger { + border-color: rgba(240, 74, 103, .4); + color: var(--cp-coral); + background: rgba(240, 74, 103, .1); +} +.btn-danger:hover { + background: var(--cp-coral); + color: #fff; + border-color: var(--cp-coral); +} + +.btn-sm { + min-height: 32px; + padding: .38rem .7rem; + font-size: .8rem; +} + +.btn-lg { + min-height: 50px; + padding: .8rem 1.45rem; + font-size: .95rem; +} + +.btn-full { width: 100%; } + +/* Button-Reihe */ +.btn-row { + display: flex; + flex-wrap: wrap; + gap: .65rem; + align-items: center; +} + +/* --- Badges & Status --- */ +.badge { + display: inline-flex; + align-items: center; + padding: .22rem .58rem; + border-radius: 999px; + font-size: .72rem; + font-weight: 700; + letter-spacing: .03em; + white-space: nowrap; +} + +.badge-teal { background: rgba(82, 224, 207, .14); color: var(--cp-teal); } +.badge-coral { background: rgba(240, 74, 103, .14); color: var(--cp-coral); } +.badge-yellow { background: rgba(251, 239, 31, .14); color: var(--cp-yellow); } +.badge-muted { background: var(--cp-surface-2); color: var(--cp-muted); } +.badge-blue { background: rgba(37, 150, 190, .18); color: var(--cp-blue); } + +/* Notification-Badge (runde Zahl) */ +.n-badge { + display: inline-grid; + place-items: center; + min-width: 1.25rem; + height: 1.25rem; + padding: 0 .3rem; + border-radius: 999px; + background: var(--cp-coral); + color: #fff; + font-size: .68rem; + font-weight: 800; + line-height: 1; +} + +/* Pulse-Animation für neue Nachrichten */ +@keyframes pulse-badge { + 0% { box-shadow: 0 0 0 0 rgba(240, 74, 103, .55); } + 70% { box-shadow: 0 0 0 6px rgba(240, 74, 103, 0); } + 100% { box-shadow: 0 0 0 0 rgba(240, 74, 103, 0); } +} + +.n-badge.pulse { animation: pulse-badge .9s ease-out; } + +/* Badge im Nav (messages) */ +#nachrichtenBadge { + display: none; + min-width: 1.18rem; + height: 1.18rem; + padding: 0 .28rem; + border-radius: 999px; + background: var(--cp-coral); + color: #fff; + font-size: .65rem; + font-weight: 800; + line-height: 1.18rem; + text-align: center; + margin-left: auto; +} + +/* --- Alerts / Notices --- */ +.alert { + display: flex; + gap: .75rem; + align-items: flex-start; + padding: 1rem 1.15rem; + border-radius: var(--r-md); + border: 1px solid transparent; + font-size: .9rem; + line-height: 1.5; +} + +.alert .material-icons { font-size: 1.15rem; flex-shrink: 0; margin-top: .05rem; } + +.alert-info { background: rgba(37, 150, 190, .1); border-color: rgba(37, 150, 190, .3); color: #a3d8f0; } +.alert-success { background: rgba(82, 224, 207, .1); border-color: rgba(82, 224, 207, .28); color: var(--cp-teal); } +.alert-warning { background: rgba(251, 239, 31, .1); border-color: rgba(251, 239, 31, .3); color: var(--cp-yellow); } +.alert-danger { background: rgba(240, 74, 103, .1); border-color: rgba(240, 74, 103, .3); color: var(--cp-coral); } + +/* --- Flash-Meldungen (Jinja flash()) --- */ +.flash-list { + display: grid; + gap: .55rem; + margin-bottom: 1.4rem; +} + +/* --- Toast --- */ +.save-toast { + position: fixed; + bottom: 1.6rem; + left: 50%; + transform: translateX(-50%) translateY(12px); + z-index: 9000; + padding: .7rem 1.25rem; + border-radius: var(--r-md); + background: var(--cp-surface-3); + border: 1px solid var(--cp-border-2); + color: var(--cp-ink); + font-size: .875rem; + font-weight: 600; + box-shadow: var(--shadow-md); + opacity: 0; + transition: opacity .25s ease, transform .25s ease; + white-space: nowrap; + pointer-events: none; +} + +.save-toast.toast-visible { + opacity: 1; + transform: translateX(-50%) translateY(0); +} + +/* --- Copy-Button --- */ +.copy-icon { font-size: 1rem; transition: color var(--ease); } +.copy-icon.copied-icon { color: var(--cp-teal); } + +/* --- Divider --- */ +.divider { + height: 1px; + background: var(--cp-border); + margin: 1.5rem 0; +} + +/* --- Leerer Zustand --- */ +.empty-state { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: .75rem; + padding: 3rem 1.5rem; + text-align: center; + color: var(--cp-muted); +} + +.empty-state .material-icons { font-size: 2.4rem; } + +.empty-state h3 { + font-family: var(--font-display); + font-size: 1.5rem; + font-weight: 600; + text-transform: uppercase; + color: var(--cp-ink-2); +} + +/* --- Paginierung --- */ +.pagination { + display: flex; + align-items: center; + gap: .4rem; + flex-wrap: wrap; +} + +.pagination a, +.pagination span { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 36px; + height: 36px; + padding: 0 .55rem; + border-radius: var(--r-sm); + border: 1px solid var(--cp-border); + background: var(--cp-surface); + color: var(--cp-ink-2); + font-size: .82rem; + font-weight: 600; + transition: background var(--ease), color var(--ease), border-color var(--ease); +} + +.pagination a:hover { background: var(--cp-surface-2); color: var(--cp-ink); } +.pagination .active { background: var(--cp-aqua-dim); color: var(--cp-teal); border-color: rgba(82, 224, 207, .3); } + +/* --- Modal / Dialog --- */ +.modal-backdrop { + position: fixed; + inset: 0; + z-index: 500; + background: rgba(0, 0, 0, .65); + backdrop-filter: blur(5px); + display: grid; + place-items: center; + padding: 1rem; + opacity: 0; + visibility: hidden; + transition: opacity .2s ease, visibility .2s ease; +} + +.modal-backdrop.is-open { + opacity: 1; + visibility: visible; +} + +.modal-dialog { + width: min(560px, 100%); + max-height: 88vh; + display: flex; + flex-direction: column; + background: var(--cp-surface); + border: 1px solid var(--cp-border-2); + border-radius: var(--r-lg); + box-shadow: var(--shadow-lg); + overflow: hidden; + transform: translateY(14px) scale(.97); + transition: transform .2s ease; +} + +.modal-backdrop.is-open .modal-dialog { + transform: translateY(0) scale(1); +} + +.modal-header { + padding: 1.2rem 1.4rem; + border-bottom: 1px solid var(--cp-border); + background: var(--cp-surface-2); + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + flex-shrink: 0; +} + +.modal-header h2 { + font-family: var(--font-display); + font-size: 1.5rem; + font-weight: 700; + text-transform: uppercase; + color: var(--cp-ink); + margin: 0; +} + +.modal-body { + padding: 1.4rem; + overflow-y: auto; + flex: 1; + color: var(--cp-ink-2); +} + +.modal-footer { + padding: .85rem 1.4rem; + border-top: 1px solid var(--cp-border); + display: flex; + justify-content: flex-end; + gap: .65rem; + flex-shrink: 0; + background: var(--cp-surface-2); +} + +/* ============================================================ + 7. KI-ASSISTENT CHAT WIDGET + ============================================================ */ + +#chatFab { + position: fixed; + bottom: 1.6rem; + right: 1.6rem; + z-index: 400; + width: 52px; + height: 52px; + display: flex; + align-items: center; + justify-content: center; + border: 1px solid rgba(82, 224, 207, .35); + border-radius: 50%; + background: linear-gradient(135deg, #0d2235, #112840); + color: var(--cp-teal); + box-shadow: 0 6px 22px rgba(0, 0, 0, .45), 0 0 0 0 rgba(82, 224, 207, .3); + cursor: pointer; + transition: transform var(--ease), box-shadow var(--ease); +} + +#chatFab:hover { + transform: translateY(-2px); + box-shadow: 0 10px 28px rgba(0, 0, 0, .5), 0 0 0 4px rgba(82, 224, 207, .18); +} + +#chatFab .material-icons { font-size: 1.4rem; } + +#chatPanel { + position: fixed; + bottom: 5.2rem; + right: 1.6rem; + z-index: 400; + width: 340px; + max-height: 520px; + display: flex; + flex-direction: column; + background: var(--cp-surface); + border: 1px solid var(--cp-border-2); + border-radius: var(--r-lg); + box-shadow: var(--shadow-lg); + overflow: hidden; + opacity: 0; + visibility: hidden; + transform: translateY(10px) scale(.97); + transition: opacity .2s ease, visibility .2s ease, transform .2s ease; +} + +#chatPanel.open { + opacity: 1; + visibility: visible; + transform: translateY(0) scale(1); +} + +.chat-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: .85rem 1rem; + border-bottom: 1px solid var(--cp-border); + background: var(--cp-surface-2); + flex-shrink: 0; +} + +.chat-header-title { + display: flex; + align-items: center; + gap: .5rem; + font-weight: 700; + font-size: .88rem; + color: var(--cp-teal); +} + +.chat-header-title .material-icons { font-size: 1.15rem; } + +.chat-header-actions { + display: flex; + gap: .25rem; +} + +.chat-header-actions button { + display: grid; + place-items: center; + width: 30px; + height: 30px; + border: none; + border-radius: var(--r-sm); + background: transparent; + color: var(--cp-muted); + cursor: pointer; + transition: background var(--ease), color var(--ease); +} + +.chat-header-actions button:hover { + background: var(--cp-surface-3); + color: var(--cp-ink); +} + +.chat-messages { + flex: 1; + overflow-y: auto; + padding: .85rem; + display: flex; + flex-direction: column; + gap: .55rem; + scrollbar-width: thin; + scrollbar-color: rgba(255,255,255,.1) transparent; +} + +.chat-welcome { + margin: auto; + text-align: center; + color: var(--cp-muted); + font-size: .82rem; + line-height: 1.6; +} + +.chat-welcome .material-icons { + display: block; + font-size: 1.8rem; + color: var(--cp-teal); + margin: 0 auto .5rem; +} + +.chat-msg { + max-width: 88%; + padding: .6rem .85rem; + border-radius: var(--r-md); + font-size: .85rem; + line-height: 1.5; + word-break: break-word; +} + +.chat-msg.user { + align-self: flex-end; + background: var(--cp-aqua-dim); + color: var(--cp-teal); + border: 1px solid rgba(82, 224, 207, .22); +} + +.chat-msg.assistant { + align-self: flex-start; + background: var(--cp-surface-2); + color: var(--cp-ink-2); + border: 1px solid var(--cp-border); +} + +.chat-msg.assistant p { margin: 0 0 .5rem; } +.chat-msg.assistant p:last-child { margin: 0; } +.chat-msg.assistant ul, .chat-msg.assistant ol { padding-left: 1.2rem; margin: .35rem 0; } +.chat-msg.assistant code { background: var(--cp-surface-3); padding: .1em .3em; border-radius: 3px; font-size: .8em; } + +.chat-msg.error { + align-self: flex-start; + background: rgba(240, 74, 103, .1); + color: var(--cp-coral); + border: 1px solid rgba(240, 74, 103, .22); +} + +/* Typing-Indikator */ +.chat-typing { + align-self: flex-start; + display: flex; + align-items: center; + gap: 4px; + padding: .6rem .85rem; + border-radius: var(--r-md); + background: var(--cp-surface-2); + border: 1px solid var(--cp-border); +} + +.chat-typing span { + width: 6px; + height: 6px; + border-radius: 50%; + background: var(--cp-muted); + animation: typing-dot 1.2s infinite; +} + +.chat-typing span:nth-child(2) { animation-delay: .2s; } +.chat-typing span:nth-child(3) { animation-delay: .4s; } + +@keyframes typing-dot { + 0%, 80%, 100% { transform: scale(.7); opacity: .4; } + 40% { transform: scale(1); opacity: 1; } +} + +.chat-input-area { + display: flex; + align-items: flex-end; + gap: .5rem; + padding: .75rem; + border-top: 1px solid var(--cp-border); + background: var(--cp-surface-2); + flex-shrink: 0; +} + +#chatInput { + flex: 1; + min-height: 36px; + max-height: 100px; + padding: .5rem .75rem; + border: 1px solid var(--cp-border-2); + border-radius: var(--r-sm); + background: var(--cp-surface-3); + color: var(--cp-ink); + font-size: .85rem; + resize: none; + overflow-y: auto; + transition: border-color var(--ease); +} + +#chatInput:focus { + outline: none; + border-color: var(--cp-teal); +} + +#chatInput::placeholder { color: var(--cp-muted); } + +#chatSendBtn { + width: 36px; + height: 36px; + display: grid; + place-items: center; + border: none; + border-radius: var(--r-sm); + background: var(--cp-teal); + color: #07182e; + cursor: pointer; + flex-shrink: 0; + transition: background var(--ease), transform var(--ease); +} + +#chatSendBtn:hover { background: #6af0de; transform: translateY(-1px); } +#chatSendBtn:disabled { opacity: .45; cursor: not-allowed; transform: none; } +#chatSendBtn .material-icons { font-size: 1.1rem; } + +/* ============================================================ + 8. TEAM-CHAT WIDGET + ============================================================ */ + +#teamChatFab { + position: fixed; + bottom: 1.6rem; + right: 5.3rem; + z-index: 400; + width: 52px; + height: 52px; + display: flex; + align-items: center; + justify-content: center; + border: 1px solid var(--cp-border-2); + border-radius: 50%; + background: var(--cp-surface-2); + color: var(--cp-ink-2); + box-shadow: 0 6px 22px rgba(0, 0, 0, .4); + cursor: pointer; + transition: transform var(--ease), background var(--ease), color var(--ease); + position: fixed; +} + +#teamChatFab:hover { + transform: translateY(-2px); + background: var(--cp-surface-3); + color: var(--cp-ink); +} + +#teamChatFab .material-icons { font-size: 1.3rem; } + +/* Badge auf Team-Chat-FAB */ +.team-chat-badge { + position: absolute; + top: -3px; + right: -3px; + min-width: 1.1rem; + height: 1.1rem; + padding: 0 .25rem; + border-radius: 999px; + background: var(--cp-coral); + color: #fff; + font-size: .62rem; + font-weight: 800; + line-height: 1.1rem; + text-align: center; +} + +#teamChatPanel { + position: fixed; + bottom: 5.2rem; + right: 5.3rem; + z-index: 400; + width: 340px; + max-height: 520px; + display: flex; + flex-direction: column; + background: var(--cp-surface); + border: 1px solid var(--cp-border-2); + border-radius: var(--r-lg); + box-shadow: var(--shadow-lg); + overflow: hidden; + opacity: 0; + visibility: hidden; + transform: translateY(10px) scale(.97); + transition: opacity .2s ease, visibility .2s ease, transform .2s ease; +} + +#teamChatPanel.open { + opacity: 1; + visibility: visible; + transform: translateY(0) scale(1); +} + +.team-chat-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: .85rem 1rem; + border-bottom: 1px solid var(--cp-border); + background: var(--cp-surface-2); + flex-shrink: 0; +} + +.team-chat-header-title { + display: flex; + align-items: center; + gap: .5rem; + font-weight: 700; + font-size: .88rem; + color: var(--cp-ink); +} + +.team-chat-header-title .material-icons { font-size: 1.15rem; color: var(--cp-muted); } + +.team-chat-header-actions button { + display: grid; + place-items: center; + width: 30px; + height: 30px; + border: none; + border-radius: var(--r-sm); + background: transparent; + color: var(--cp-muted); + cursor: pointer; + transition: background var(--ease), color var(--ease); +} + +.team-chat-header-actions button:hover { + background: var(--cp-surface-3); + color: var(--cp-ink); +} + +/* Kanal-Auswahl */ +.team-chat-channels { + display: flex; + flex-wrap: wrap; + gap: .4rem .75rem; + padding: .65rem 1rem; + border-bottom: 1px solid var(--cp-border); + background: var(--cp-surface-2); + flex-shrink: 0; +} + +.team-chat-channels label { + display: flex; + align-items: center; + gap: .3rem; + font-size: .76rem; + font-weight: 600; + color: var(--cp-muted); + cursor: pointer; + transition: color var(--ease); +} + +.team-chat-channels label:hover { color: var(--cp-ink); } + +.team-chat-channels input[type="checkbox"] { + accent-color: var(--cp-teal); + width: .85rem; + height: .85rem; +} + +/* Nachrichten */ +.team-chat-messages { + flex: 1; + overflow-y: auto; + padding: .85rem; + display: flex; + flex-direction: column; + gap: .2rem; + scrollbar-width: thin; + scrollbar-color: rgba(255,255,255,.1) transparent; + font-size: .82rem; +} + +.team-chat-welcome { + margin: auto; + text-align: center; + color: var(--cp-muted); + line-height: 1.65; +} + +.team-chat-welcome .material-icons { + display: block; + font-size: 1.6rem; + color: var(--cp-muted); + margin: 0 auto .5rem; +} + +.team-chat-msg { + max-width: 86%; + padding: .48rem .75rem; + border-radius: var(--r-md); + line-height: 1.45; + word-break: break-word; + white-space: pre-wrap; +} + +.team-chat-msg.own { + align-self: flex-end; + background: var(--cp-aqua-dim); + color: var(--cp-teal); + border: 1px solid rgba(82, 224, 207, .18); +} + +.team-chat-msg.other { + align-self: flex-start; + background: var(--cp-surface-2); + color: var(--cp-ink-2); + border: 1px solid var(--cp-border); +} + +.team-chat-msg-meta { + font-size: .68rem; + color: var(--cp-muted); + margin-bottom: .18rem; +} + +.team-chat-msg-meta.own { text-align: right; } + +.team-chat-msg-recipients { + font-size: .65rem; + color: var(--cp-muted); + margin-top: .12rem; + margin-bottom: .45rem; +} + +/* Eingabe */ +.team-chat-input-area { + display: flex; + align-items: flex-end; + gap: .5rem; + padding: .75rem; + border-top: 1px solid var(--cp-border); + background: var(--cp-surface-2); + flex-shrink: 0; +} + +#teamChatInput { + flex: 1; + min-height: 36px; + max-height: 100px; + padding: .5rem .75rem; + border: 1px solid var(--cp-border-2); + border-radius: var(--r-sm); + background: var(--cp-surface-3); + color: var(--cp-ink); + font-size: .85rem; + resize: none; + overflow-y: auto; + transition: border-color var(--ease); +} + +#teamChatInput:focus { + outline: none; + border-color: rgba(255,255,255,.28); +} + +#teamChatInput::placeholder { color: var(--cp-muted); } + +#teamChatSendBtn { + width: 36px; + height: 36px; + display: grid; + place-items: center; + border: none; + border-radius: var(--r-sm); + background: var(--cp-surface-3); + color: var(--cp-ink-2); + cursor: pointer; + flex-shrink: 0; + transition: background var(--ease), color var(--ease), transform var(--ease); +} + +#teamChatSendBtn:hover { + background: var(--cp-surface-3); + color: var(--cp-ink); + transform: translateY(-1px); +} + +#teamChatSendBtn .material-icons { font-size: 1.1rem; } + +/* ============================================================ + 9. RESPONSIVE + ============================================================ */ + +@media (max-width: 900px) { + + /* Sidebar als Drawer */ + .sidebar { + transform: translateX(calc(-1 * var(--sidebar-width))); + } + + .sidebar.active { + transform: translateX(0); + box-shadow: var(--shadow-lg); + } + + .sidebar-overlay.active { display: block; } + + .menu-toggle { display: flex; } + + main { + margin-left: 0; + padding: 4.5rem 1.15rem 3rem; + } + + /* Widgets auf Mobile etwas einrücken */ + #chatFab { right: 1rem; bottom: 1rem; } + #teamChatFab { right: 4.5rem; bottom: 1rem; } + #chatPanel { right: 1rem; width: min(320px, calc(100vw - 2rem)); } + #teamChatPanel { right: 1rem; width: min(320px, calc(100vw - 2rem)); bottom: 4.5rem; } + + .card-grid { grid-template-columns: 1fr; } +} + +@media (max-width: 600px) { + .admin-dashboard__header { display: block; } + .admin-filter__header, + .admin-filter__body { padding-left: 1rem; padding-right: 1rem; } + .admin-filter__field { width: 100%; } + .admin-filter__actions { width: 100%; } + .admin-filter__action-buttons { width: 100%; } + .admin-filter__actions .btn { flex: 1 1 auto; } + .admin-icon-button__label { display: none; } + .admin-icon-button { width: auto; min-width: 42px; padding: 0 .8rem; } + + .form-row { grid-template-columns: 1fr; } + + .modal-dialog { max-height: 92vh; } + + .btn-row { flex-direction: column; align-items: stretch; } + .btn-row .btn { width: 100%; justify-content: center; } + + table { font-size: .8rem; } + thead th, tbody td { padding: .65rem .75rem; } +} + +/* Reduced Motion */ +@media (prefers-reduced-motion: reduce) { + *, *::before, *::after { + transition: none !important; + animation: none !important; + } +} + +/* Testzuweisung */ +.test-assignment { + width: min(100%, 1440px); + margin: 0; +} + +.test-assignment__header { + display:flex; + align-items:center; + justify-content:space-between; + gap:1rem; + max-width:900px; + margin:0 0 1.5rem; +} + +.test-assignment__title { + margin:0; + font-family:var(--font-display); + color:var(--cp-ink); + font-size:clamp(2rem,4vw,3rem); + font-weight:700; + line-height:.9; + text-transform:uppercase; +} + +.test-assignment__title span { color:var(--cp-teal); } + +.test-assignment__card { + width:min(100%, 900px); + max-width:none; + padding:1.5rem; + margin:0 0 2rem; +} + +/* Der normale Primärbutton verwendet im hellen Arbeitsbereich Türkis. + Hier ist weiße Schrift bewusst festgelegt, damit die Beschriftung auch + beim starken Herauszoomen klar lesbar bleibt. */ +.test-assignment__actions .btn-primary { + color:#fff; + background:#087b7c; + border-color:#087b7c; + box-shadow:0 4px 12px rgba(8,123,124,.22); +} +.test-assignment__actions .btn-primary:hover { + color:#fff; + background:#05696a; + border-color:#05696a; +} +.test-assignment__actions .btn-primary .material-icons { color:currentColor; } +.test-assignment__section + .test-assignment__section { margin-top:2rem; padding-top:2rem; border-top:1px solid var(--cp-border); } +.test-assignment__section-title,.test-results__title { display:flex; align-items:center; gap:.5rem; margin:0 0 1rem; color:var(--cp-ink); font-family:var(--font-display); font-size:1.55rem; font-weight:700; text-transform:uppercase; } +.test-assignment__section-title .material-icons { color:var(--cp-teal); } +.test-assignment__meta { margin:0 0 1rem; color:var(--cp-ink-2); } +.test-picker { padding:1rem; margin-bottom:1rem; border:1px solid var(--cp-border); border-radius:var(--r-md); background:var(--cp-surface-2); } +.test-picker__grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:.65rem; } +.test-picker__option { display:flex; align-items:center; gap:.7rem; min-width:0; padding:.75rem; border:1px solid var(--cp-border); border-radius:var(--r-sm); color:var(--cp-ink); background:var(--cp-surface); cursor:pointer; } +.test-picker__option:hover { border-color:var(--cp-teal); background:#f7fcfc; } +.test-picker__checkbox,.test-summary__checkbox { width:1.1rem; height:1.1rem; margin:0; flex:0 0 auto; accent-color:var(--cp-teal); } +.test-picker__name { min-width:0; font-weight:700; } +.test-picker__price { margin-left:auto; color:var(--cp-ink-2); font-size:.85rem; white-space:nowrap; } +.test-assignment__actions { display:flex; flex-wrap:wrap; gap:.65rem; } +.test-summary { padding:1rem; border:1px solid var(--cp-border); border-radius:var(--r-md); background:var(--cp-surface-2); } +.test-summary__title { margin:0 0 .8rem; color:var(--cp-ink); font-size:.95rem; } +.test-summary__list { display:grid; gap:.6rem; } +.test-summary__item { display:flex; align-items:center; gap:1rem; padding:.85rem; border:1px solid var(--cp-border); border-radius:var(--r-sm); background:var(--cp-surface); transition:background var(--ease), border-color var(--ease), opacity var(--ease); } +.test-summary__item.is-free { border-color:rgba(8,123,124,.34); background:#f3fbfa; } +.test-summary__item.is-saving { opacity:.62; pointer-events:none; } +.test-summary__content { flex:1; min-width:0; }.test-summary__name { color:var(--cp-ink); font-weight:700; }.test-summary__price { margin-top:.15rem; color:var(--cp-ink-2); font-size:.85rem; }.test-summary__free { margin-left:.5rem; color:#087b7c; font-weight:800; }.test-summary__free-form { margin:0; }.test-summary__free-label { display:flex; align-items:center; gap:.45rem; white-space:nowrap; cursor:pointer; color:var(--cp-ink); font-weight:700; }.test-summary__total { margin-top:1rem; padding-top:1rem; border-top:1px solid var(--cp-border); }.test-summary__total-value { color:var(--cp-ink); text-align:right; font-size:1.1rem; font-weight:800; }.test-summary__total-value span { color:var(--cp-teal); }.test-assignment__notice { padding:.9rem 1rem; border:1px solid #c79b00; border-radius:var(--r-sm); color:#594400; background:#fff6c9; }.test-assignment__empty { padding:2rem 1rem; border:2px dashed var(--cp-border-2); border-radius:var(--r-md); color:var(--cp-ink-2); text-align:center; }.test-assignment__empty-title { display:block; color:var(--cp-ink); font-weight:800; }.test-assignment__empty-copy { margin-top:.4rem; font-size:.9rem; }.test-results-section { width:100%; max-width:none; margin-top:2.5rem; } +.test-results-section__header { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin:0 0 1rem; } +.test-results-section__header .kicker { margin-bottom:.45rem; } +.test-results__title { margin:0; } +.test-results-section__hint { margin:0; color:var(--cp-muted); font-size:.85rem; } +.test-results__table { min-width:1000px; }.test-results__test { min-width:180px; }.test-results__result { min-width:440px; }.test-results__pdf { min-width:170px; }.test-result-form { display:flex; align-items:flex-start; gap:.7rem; margin:0; }.test-result-form__select { flex:0 0 130px; min-height:40px; }.test-result-form__texts { display:grid; flex:1; gap:.45rem; }.test-result-form__textarea { min-height:4.5rem; font-size:.9rem; line-height:1.35; }.test-pdf-actions { display:flex; align-items:center; gap:.45rem; }.test-pdf-form { display:inline-flex; margin:0; }.test-pdf-form__input { display:none; }.test-pdf-form__trigger { cursor:pointer; } +@media (max-width:600px) { .test-assignment__card{padding:1.15rem}.test-summary__item{align-items:flex-start;flex-direction:column}.test-result-form{min-width:650px}.test-picker__grid{grid-template-columns:1fr} } + +/* ============================================================ + 5e. TERMIN-SLOTS + ============================================================ */ +/* Slotverwaltung nutzt bewusst die volle verfügbare Inhaltsbreite und + beginnt an der linken Content-Kante statt als zentrierte Lesespalte. */ +.slots-page { width: 100%; max-width: none; margin: 0; } +/* Bei einem Seitenwechsel bleibt die neue Tabelle bis zur Wiederherstellung + der Scrollposition unsichtbar. Dadurch ist kein Zwischen-Sprung sichtbar. */ +html.slots-pagination-restoring { + scroll-behavior: auto !important; +} +html.slots-pagination-restoring .slots-page { visibility: hidden; } +html.slots-pagination-restoring main { overflow: hidden; } +/* Einheitliche Kontrastregel für dunkle, primäre Aktionen im Backend. */ +.btn-primary, +.btn-primary .material-icons, +.slots-form__action .btn-primary, +.slots-form__action .btn-primary .material-icons { color: #fff !important; } +.btn-primary { background: #087b7c; border-color: #087b7c; } +.btn-primary:hover { background: #05696a; border-color: #05696a; } +.slots-page__header { margin-bottom: 1.35rem; } +.slots-page__title { margin: 0; color: var(--cp-ink); font-family: var(--font-display); font-size: clamp(2.15rem, 4vw, 3.25rem); font-weight: 700; line-height: .9; letter-spacing: -.012em; text-transform: uppercase; } +.slots-page__intro { max-width: 48rem; margin: .6rem 0 0; color: var(--cp-ink-2); } +.slots-panel { margin-bottom: 1rem; overflow: hidden; } +.slots-panel__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem 1.3rem; border-bottom: 1px solid var(--cp-border); background: var(--cp-surface-2); } +.slots-panel__header h2, .slots-list__header h2 { margin: 0; color: var(--cp-ink); font-size: 1rem; font-weight: 800; } +.slots-panel__header p { margin: .2rem 0 0; color: var(--cp-muted); font-size: .8rem; } +.slots-panel__icon { color: var(--cp-teal); } +.slots-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 1.15rem; padding: 1.25rem 1.3rem; } +.slots-form .form-group { min-width: 135px; margin: 0; } +.slots-form__field--times { flex: 1 1 250px; } +.slots-form__field--visible-from { min-width: 220px !important; } +.slots-form .form-control { width: 100%; min-height: 42px; } +.form-hint { display: block; margin-top: .12rem; color: var(--cp-muted); font-size: .72rem; font-weight: 500; } +.slots-days { min-width: 240px; margin: 0; padding: 0; border: 0; } +.slots-days legend { margin: 0 0 .48rem; color: var(--cp-ink-2); font-size: .875rem; font-weight: 600; } +.slots-days__options { display: flex; flex-wrap: wrap; gap: .38rem; } +.slots-days__options label { position: relative; display: grid; place-items: center; min-width: 33px; min-height: 42px; border: 1px solid var(--cp-border-2); border-radius: .45rem; color: var(--cp-ink-2); background: var(--cp-surface-2); cursor: pointer; font-size: .76rem; font-weight: 800; } +.slots-days__options input { position: absolute; opacity: 0; } +.slots-days__options label:has(input:checked) { border-color: var(--cp-teal); color: #ffffff; background: var(--cp-teal); } +.slots-days__options label:has(input:checked) span { color: #ffffff; } +.slots-days__options label:has(input:focus-visible) { outline: 2px solid var(--cp-yellow); outline-offset: 2px; } +.slots-form__action { display: flex; align-items: flex-end; min-height: 42px; } +.slots-form__action .btn { min-height: 42px; white-space: nowrap; } +.slots-filter { margin: 1rem 0; padding: 0; overflow: hidden; } +.slots-filter__toggle { display: flex; align-items: center; gap: .8rem; padding: .9rem 1.15rem; color: var(--cp-ink); cursor: pointer; } +.slots-filter__toggle > input { position: absolute; opacity: 0; } +.slots-filter__toggle strong, .slots-filter__toggle small { display: block; } +.slots-filter__toggle strong { font-size: .9rem; } +.slots-filter__toggle small { margin-top: .1rem; color: var(--cp-muted); font-size: .76rem; } +.slots-filter__check { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid var(--cp-border-2); border-radius: .55rem; color: var(--cp-muted); background: var(--cp-surface-2); } +.slots-filter__toggle input:checked + .slots-filter__check { + border-color: #087b7c; + color: #ffffff; + background: #087b7c; + box-shadow: 0 3px 8px rgba(8, 123, 124, .22); +} +.slots-filter__toggle input:checked + .slots-filter__check .material-icons { color: currentColor; } +.slots-filter__toggle input:focus-visible + .slots-filter__check { outline: 2px solid var(--cp-yellow); outline-offset: 3px; } +.slots-pagination { margin: 1rem 0; } +.slots-list { overflow: hidden; border: 1px solid var(--cp-border); border-radius: var(--r-lg); background: var(--cp-surface); box-shadow: var(--shadow-sm); } +.slots-list__header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--cp-border); background: var(--cp-surface-2); } +.slots-list__header .kicker { margin-bottom: .2rem; } +.slots-list__delete { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 38px; padding: .55rem .85rem; border-color: #cf3651; color: #fff; background: #b82442; white-space: nowrap; } +.slots-list__delete .material-icons { flex: 0 0 auto; color: currentColor; font-size: 1.05rem; } +.slots-list__delete-label { display: inline; } +.slots-list__delete:hover { border-color: #991b34; color: #fff; background: #991b34; } +.slots-list__delete[hidden] { display: none; } +.slots-table { min-width: 720px; } +.slots-table__select { width: 42px; text-align: center; } +.slots-table__select input { width: 17px; height: 17px; accent-color: var(--cp-teal); cursor: pointer; } +.slots-table__date, .slots-table__time { color: var(--cp-ink) !important; font-weight: 700; white-space: nowrap; } +.slots-table__action { width: 72px; text-align: center; } +.slot-status, .slot-visibility { display: inline-flex; align-items: center; gap: .38rem; min-height: 28px; font-size: .8rem; font-weight: 650; } +.slot-status .material-icons, .slot-visibility .material-icons { font-size: 1rem; } +.slot-status--free, .slot-visibility--available { color: var(--cp-teal); } +.slot-status--booked { color: #ff8b9e; } +.slot-visibility--scheduled { color: #ffd067; } +.slot-visibility--scheduled .inline-action-form, .slot-status--booked .inline-action-form { margin-left: .15rem; } +@media (max-width: 720px) { + .slots-panel__header, .slots-list__header { padding: .9rem 1rem; } + .slots-form { padding: 1rem; } + .slots-form__field, .slots-form__field--visible-from, .slots-days { width: 100%; min-width: 0 !important; } + .slots-form__action, .slots-form__action .btn { width: 100%; } + .slots-list__header { align-items: flex-start; flex-direction: column; } + .slots-list__delete { width: 100%; } +} + +/* ============================================================ + 5f. ERGEBNISEINTRAGUNG + ============================================================ */ +.batch-results { width: 100%; max-width: none; margin: 0; } +.batch-results__header { margin-bottom: 1.35rem; } +.batch-results__header .kicker { margin-bottom: .55rem; } +.batch-results__title { + margin: 0; + color: var(--cp-ink); + font-family: var(--font-display); + font-size: clamp(2.15rem, 4vw, 3.25rem); + font-weight: 700; + line-height: .9; + letter-spacing: -.012em; + text-transform: uppercase; +} +.batch-results__intro { max-width: 48rem; margin: .6rem 0 0; color: var(--cp-ink-2); } +.batch-results__filter, +.batch-results__actions { margin-bottom: 1rem; overflow: hidden; } +.batch-results__panel-head { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 1rem; + padding: 1rem 1.3rem; + border-bottom: 1px solid var(--cp-border); + background: var(--cp-surface-2); +} +.batch-results__panel-head h2 { margin: 0; color: var(--cp-ink); font-size: 1rem; font-weight: 800; } +.batch-results__panel-head p { margin: .2rem 0 0; color: var(--cp-muted); font-size: .8rem; } +.batch-results__panel-head > .material-icons { color: var(--cp-teal); } +.batch-results__filter-form { + display: flex; + flex-wrap: wrap; + align-items: flex-end; + gap: 1rem 1.15rem; + padding: 1.25rem 1.3rem; +} +.batch-results__filter-form .form-group { width: min(100%, 220px); margin: 0; } +.batch-results__filter-form .form-control { min-height: 42px; } +.batch-results__action-body { padding: 1.15rem 1.3rem; } +.batch-results__buttons { display: flex; flex-wrap: wrap; gap: .65rem; } +.batch-results__save { color: #fff !important; background: #087b7c; border-color: #087b7c; box-shadow: 0 4px 12px rgba(8,123,124,.22); } +.batch-results__save:hover { color: #fff !important; background: #05696a; border-color: #05696a; } +#unsaved-counter { display: block; margin-top: .75rem; font-size: .84rem; font-weight: 700; } +#unsaved-counter.active { color: var(--cp-coral); } +#unsaved-counter.inactive { color: var(--cp-muted); } +.batch-results__pagination { margin: 1rem 0; } +.batch-results__table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--cp-border); border-radius: var(--r-lg); background: var(--cp-surface); box-shadow: var(--shadow-sm); } +.batch-results__table { min-width: 1080px; } +.batch-results__table th { background: var(--cp-surface-2); } +.batch-results__table td { vertical-align: middle; } +.batch-results__center { text-align: center; } +.batch-result-row { cursor: pointer; } +.batch-result-row:hover { background: var(--cp-surface-2); } +.batch-result-code { color: var(--cp-teal) !important; font-weight: 800; letter-spacing: .04em; } +.result-wrapper { display: flex; align-items: center; justify-content: center; gap: .55rem; position: relative; } +.result-select { min-width: 150px; min-height: 38px; padding: .42rem 2rem .42rem .65rem; border: 1px solid var(--cp-border-2); border-radius: var(--r-sm); color: var(--cp-ink); background-color: var(--cp-surface-2); font: inherit; font-size: .82rem; font-weight: 600; } +.result-select:focus { outline: 2px solid rgba(8,123,124,.25); outline-offset: 2px; border-color: var(--cp-teal); } +.result-select option { color: #07182e; background: #fff; } +.result-dot { width: .72rem; height: .72rem; border: 1px solid transparent; border-radius: 50%; flex: 0 0 .72rem; transition: background-color .25s ease, border-color .25s ease; } +.result-negativ { background: #147a3f; border-color: #147a3f; } +.result-positiv { background: #c93552; border-color: #c93552; } +.result-unbestimmt { background: #273d4c; border-color: #273d4c; } +.result-none { background: #b8c9d1; border-color: #8ba4b1; } +.result-pending { opacity: 0; color: var(--cp-coral); transition: opacity .2s ease; user-select: none; } +.result-pending.active { opacity: 1; } +.pdf-cell { display: flex; justify-content: center; align-items: center; gap: .45rem; } +.status-container { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; text-align: center; } +.status-badge { min-width: 88px; padding: .23rem .55rem; border: 1px solid transparent; border-radius: 999px; font-size: .68rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; } +.status-not-entered { color: var(--cp-muted); background: var(--cp-surface-2); border-color: var(--cp-border); } +.status-unread { color: #745500; background: #fff3c9; border-color: #e3c75c; } +.status-read { color: #075c70; background: #d7f0f5; border-color: #91d4e1; } +.status-date { color: var(--cp-muted); font-size: .68rem; } +.batch-results__details-cell { + padding: 0 !important; + background: linear-gradient(135deg, #d9f0f3 0%, #edf8f9 100%); +} +.batch-results__details-grid { + display: grid; + grid-template-columns: 1fr; + gap: .55rem; + padding: 1.35rem; + border-top: 3px solid #087b7c; + box-shadow: inset 5px 0 0 rgba(8,123,124,.18); +} +.batch-results__field-label { + margin-top: .35rem; + color: #075c70; + font-size: .85rem; + font-weight: 800; +} +.batch-results__standard-copy { + max-height: 130px; + padding: .8rem 1rem; + overflow: auto; + border: 1px solid #94c8d0; + border-left: 4px solid #087b7c; + border-radius: var(--r-sm); + color: var(--cp-ink-2); + background: #ffffff; + box-shadow: 0 2px 5px rgba(7,24,46,.06); + font-size: .88rem; + line-height: 1.5; + cursor: default; +} +.batch-results__standard-copy * { cursor: default; } +.result-text-field { + min-height: 5.5rem; + border-color: #94c8d0; + background: #ffffff; + box-shadow: 0 2px 5px rgba(7,24,46,.05); + resize: vertical; +} +.result-text-field:focus { + border-color: #087b7c; + background: #ffffff; + box-shadow: 0 0 0 3px rgba(8,123,124,.16); +} +.batch-results__copy { + justify-self: start; + border-color: #087b7c; + color: #075c70; + background: #ffffff; +} +.batch-results__copy:hover { color: #ffffff; background: #087b7c; border-color: #087b7c; } +.batch-results__divider { width: 100%; margin: 1rem 0 .8rem; border: 0; border-top: 2px solid #a8d4da; } +@media (max-width: 720px) { + .batch-results__panel-head { padding: .9rem 1rem; } + .batch-results__filter-form, .batch-results__action-body { padding: 1rem; } + .batch-results__filter-form .form-group { width: 100%; } + .batch-results__buttons, .batch-results__buttons .btn { width: 100%; } +} + +/* ============================================================ + 5g. TESTANGEBOTE + ============================================================ */ +.tests-admin { width: 100%; max-width: none; margin: 0; } +.tests-admin__header { margin-bottom: 1.35rem; } +.tests-admin__header .kicker { margin-bottom: .55rem; } +.tests-admin__title { margin: 0; color: var(--cp-ink); font-family: var(--font-display); font-size: clamp(2.15rem, 4vw, 3.25rem); font-weight: 700; line-height: .9; letter-spacing: -.012em; text-transform: uppercase; } +.tests-admin__intro { max-width: 48rem; margin: .6rem 0 0; color: var(--cp-ink-2); } +.tests-admin__create { margin-bottom: 1rem; overflow: hidden; } +.tests-admin__panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem 1.3rem; border-bottom: 1px solid var(--cp-border); background: var(--cp-surface-2); } +.tests-admin__panel-head h2, .tests-admin__list-head h2 { margin: 0; color: var(--cp-ink); font-size: 1rem; font-weight: 800; } +.tests-admin__panel-head p { margin: .2rem 0 0; color: var(--cp-muted); font-size: .8rem; } +.tests-admin__panel-head > .material-icons { color: var(--cp-teal); } +.tests-admin__create-body { padding: 1.15rem 1.3rem; } +.tests-admin__add { color: #fff !important; background: #087b7c; border-color: #087b7c; box-shadow: 0 4px 12px rgba(8,123,124,.22); } +.tests-admin__add:hover { color: #fff !important; background: #05696a; border-color: #05696a; } +.tests-admin__list { overflow: hidden; border: 1px solid var(--cp-border); border-radius: var(--r-lg); background: var(--cp-surface); box-shadow: var(--shadow-sm); } +.tests-admin__list-head { padding: 1rem 1.25rem; border-bottom: 1px solid var(--cp-border); background: var(--cp-surface-2); } +.tests-admin__list-head .kicker { margin-bottom: .2rem; } +.tests-admin__table-wrap { overflow-x: auto; } +.tests-admin__table { min-width: 720px; } +.tests-admin__center { text-align: center; } +.tests-admin__name { display: block; color: var(--cp-ink); font-weight: 800; } +.tests-admin__name-en { display: block; margin-top: .15rem; color: var(--cp-muted); font-size: .82rem; } +.tests-admin__price { color: var(--cp-ink) !important; font-weight: 800; white-space: nowrap; } +.tests-admin__visibility { display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .62rem; border: 1px solid transparent; border-radius: 999px; font-size: .72rem; font-weight: 800; white-space: nowrap; } +.tests-admin__visibility .material-icons { font-size: .95rem; } +.tests-admin__visibility--public { color: #075c70; background: #d7f0f5; border-color: #91d4e1; } +.tests-admin__visibility--private { color: #8b2640; background: #ffe3e8; border-color: #f2a5b5; } +.tests-admin__actions { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; } +.icon-action-btn--unlock { border-color: rgba(8,123,124,.28); color: #087b7c; background: rgba(8,123,124,.1); } +.icon-action-btn--unlock:hover:not(:disabled) { color: #fff; background: #087b7c; } +.icon-action-btn--lock { border-color: rgba(139,38,64,.28); color: #9c2e48; background: rgba(201,53,82,.1); } +.icon-action-btn--lock:hover:not(:disabled) { color: #fff; background: #9c2e48; } +@media (max-width: 720px) { .tests-admin__panel-head, .tests-admin__list-head { padding: .9rem 1rem; } .tests-admin__create-body { padding: 1rem; } .tests-admin__add { width: 100%; } } + +/* ============================================================ + 5h. TESTFORMULARE — ANLEGEN & BEARBEITEN + ============================================================ */ +.test-form-page { width: 100%; max-width: none; margin: 0; } +.test-form-page__header { margin-bottom: 1.35rem; } +.test-form-page__header .kicker { margin-bottom: .55rem; } +.test-form-page__title { + margin: 0; + color: var(--cp-ink); + font-family: var(--font-display); + font-size: clamp(2.15rem, 4vw, 3.25rem); + font-weight: 700; + line-height: .9; + letter-spacing: -.012em; + text-transform: uppercase; +} +.test-form-page__intro { max-width: 49rem; margin: .6rem 0 0; color: var(--cp-ink-2); } +.test-form { display: grid; gap: 1rem; } +.test-form__section { overflow: hidden; } +.test-form__section-head { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 1rem; + padding: 1rem 1.3rem; + border-bottom: 1px solid var(--cp-border); + background: var(--cp-surface-2); +} +.test-form__section-head h2 { margin: 0; color: var(--cp-ink); font-size: 1rem; font-weight: 800; } +.test-form__section-head p { margin: .2rem 0 0; color: var(--cp-muted); font-size: .8rem; } +.test-form__section-head > .material-icons { color: var(--cp-teal); } +.test-form__body { padding: 1.25rem 1.3rem; } +.test-form__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(150px, .36fr); gap: 1rem 1.15rem; align-items: end; } +.test-form .form-group { margin: 0; } +.test-form .form-control { min-height: 42px; } +.test-form textarea.form-control { min-height: 8.25rem; resize: vertical; } +.test-form__result-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } +.test-form__result { + min-width: 0; + margin: 0; + padding: 1rem; + border: 1px solid var(--cp-border); + border-top: 3px solid var(--cp-teal); + border-radius: var(--r-md); + background: rgba(255,255,255,.025); +} +.test-form__result legend { display: flex; align-items: center; gap: .38rem; padding: 0 .35rem; color: var(--cp-ink); font-size: .88rem; font-weight: 800; } +.test-form__result legend .material-icons { color: var(--cp-teal); font-size: 1.05rem; } +.test-form__result .form-group + .form-group { margin-top: .75rem; } +.test-form__result label { color: var(--cp-ink-2); font-size: .78rem; } +.test-form__result--positive { border-top-color: #c93552; } +.test-form__result--positive legend .material-icons { color: #f26a80; } +.test-form__result--negative { border-top-color: #48c888; } +.test-form__result--negative legend .material-icons { color: #69da9e; } +.test-form__result--unclear { border-top-color: #e1bd42; } +.test-form__result--unclear legend .material-icons { color: #f3d36c; } +.test-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; margin-top: .25rem; } +.test-form__actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; } +.test-form__actions .material-icons { font-size: 1.1rem; } +.test-form__save { color: #fff !important; background: #087b7c; border-color: #087b7c; box-shadow: 0 4px 12px rgba(8,123,124,.22); } +.test-form__save:hover { color: #fff !important; background: #05696a; border-color: #05696a; } +.test-form__back { border-color: var(--cp-border-2); } +@media (max-width: 980px) { .test-form__grid { grid-template-columns: 1fr 1fr; } .test-form__price { grid-column: 1 / -1; max-width: 220px; } .test-form__result-grid { grid-template-columns: 1fr; } } +@media (max-width: 620px) { .test-form__section-head, .test-form__body { padding: 1rem; } .test-form__grid { grid-template-columns: 1fr; } .test-form__price { grid-column: auto; max-width: none; } .test-form__actions, .test-form__actions .btn { width: 100%; } } + +/* ============================================================ + 5i. TESTDOKUMENTATION — EXPORT & KONFIGURATION + ============================================================ */ +.testdoku-export, .testdoku-editor { width: 100%; max-width: none; margin: 0; } +.testdoku-export__header, .testdoku-editor__header { margin-bottom: 1.35rem; } +.testdoku-export__header .kicker, .testdoku-editor__header .kicker { margin-bottom: .55rem; } +.testdoku-export__title, .testdoku-editor__title { margin: 0; color: var(--cp-ink); font-family: var(--font-display); font-size: clamp(2.15rem, 4vw, 3.25rem); font-weight: 700; line-height: .9; letter-spacing: -.012em; text-transform: uppercase; } +.testdoku-export__intro, .testdoku-editor__intro { max-width: 52rem; margin: .6rem 0 0; color: var(--cp-ink-2); } +.testdoku-export__date, .testdoku-export__options { margin-bottom: 1rem; overflow: hidden; } +.testdoku-export__panel-head, .testdoku-editor__panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem 1.3rem; border-bottom: 1px solid var(--cp-border); background: var(--cp-surface-2); } +.testdoku-export__panel-head h2, .testdoku-editor__panel-head h2 { margin: 0; color: var(--cp-ink); font-size: 1rem; font-weight: 800; } +.testdoku-export__panel-head p, .testdoku-editor__panel-head p { margin: .2rem 0 0; color: var(--cp-muted); font-size: .8rem; } +.testdoku-export__panel-head > .material-icons, .testdoku-editor__panel-head > .material-icons { color: var(--cp-teal); } +.testdoku-export__date-body { padding: 1.2rem 1.3rem; } +.testdoku-export__date-body .form-group { width: min(100%, 230px); margin: 0; } +.testdoku-export__option-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding: 1.2rem 1.3rem; } +.testdoku-export__option { display: grid; grid-template-columns: auto 1fr; gap: .85rem; min-width: 0; padding: 1rem; border: 1px solid var(--cp-border); border-top: 3px solid #087b7c; border-radius: var(--r-md); background: var(--cp-surface); } +.testdoku-export__option--snapshot { border-top-color: #d7ad32; } +.testdoku-export__option-icon { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; border-radius: .6rem; color: #087b7c; background: rgba(8,123,124,.12); } +.testdoku-export__option--snapshot .testdoku-export__option-icon { color: #795b00; background: #fff3c9; } +.testdoku-export__option h3 { margin: .1rem 0 .28rem; color: var(--cp-ink); font-size: .95rem; } +.testdoku-export__option p { margin: 0; color: var(--cp-ink-2); font-size: .84rem; line-height: 1.5; } +.testdoku-export__snapshot-info { display: flex; align-items: center; gap: .3rem; margin-top: .65rem !important; color: #526b7b !important; font-size: .77rem !important; font-weight: 700; } +.testdoku-export__snapshot-info .material-icons { color: #087b7c; font-size: 1rem; } +.testdoku-export__option .testdoku-export__download { grid-column: 1 / -1; justify-self: start; margin-top: .2rem; } +.testdoku-export__option.is-unavailable { opacity: .7; } +.testdoku-export__option.is-unavailable .testdoku-export__download { pointer-events: none; opacity: .5; } +.testdoku-export__legend { padding: 1rem 1.3rem; } +.testdoku-export__legend-head { display: flex; align-items: center; gap: .5rem; color: var(--cp-ink); } +.testdoku-export__legend-head .material-icons { color: var(--cp-teal); } +.testdoku-export__legend-head h2 { font-size: .95rem; } +.testdoku-export__legend-items { display: flex; flex-wrap: wrap; gap: .6rem 1.25rem; margin-top: .75rem; color: var(--cp-ink-2); font-size: .82rem; } +.testdoku-export__symbol { display: inline-block; min-width: 1em; color: var(--cp-ink); font-size: 1rem; text-align: center; } +.testdoku-export__symbol--negative { color: #147a3f; }.testdoku-export__symbol--positive { color: #b82442; }.testdoku-export__symbol--muted { color: var(--cp-muted); } + +.testdoku-editor__workspace { overflow: hidden; } +.testdoku-editor__workspace-body { padding: 1.25rem 1.3rem; } +.testdoku-editor .doku-section-title { margin: 0 0 .7rem; color: var(--cp-ink); font-size: 1rem; } +.testdoku-editor .doku-section-title + .kachel-grid { margin-bottom: .45rem; } +.testdoku-editor .doku-section-title:not(:first-of-type) { margin-top: 1.5rem; } +.testdoku-editor .doku-section-title .material-icons { color: var(--cp-teal) !important; } +.testdoku-editor .doku-section-title small { color: var(--cp-muted); font-size: .76rem; font-weight: 600; } +.testdoku-editor .kachel-grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(210px, 260px)); + align-content: start; + gap: .75rem; + min-height: 118px; + padding: 1rem; + border: 2px dashed #a7cbd1; + border-radius: var(--r-md); + background: #f5fbfc; +} +/* SortableJS arbeitet auch innerhalb eines CSS-Grids zuverlässig: Die Kacheln + bleiben bei Drag & Drop sortierbar, nutzen aber die verfügbare Breite besser. */ +.testdoku-editor .kachel-grid > .kachel { width: 100%; } +.testdoku-editor .kachel-grid.active-zone { min-height: 145px; border-color: #087b7c; background: #e9f7f6; } +.testdoku-editor .kachel-grid.empty-hint::after { color: #526b7b; } +.testdoku-editor .kachel { min-width: 210px; max-width: 260px; padding: .85rem; border: 1px solid #b8d7dc; border-radius: var(--r-sm); background: #fff; box-shadow: 0 2px 7px rgba(7,24,46,.08); } +.testdoku-editor .kachel.sortable-chosen { border-color: #087b7c; box-shadow: 0 8px 18px rgba(8,123,124,.22); } +.testdoku-editor .kachel-title { padding-right: 0; color: var(--cp-ink); font-size: .86rem; } +.testdoku-editor .kachel-field-label { color: #526b7b; font-size: .74rem; font-weight: 700; } +.testdoku-editor .kachel input[type="text"], .testdoku-editor .kachel input[type="number"] { min-height: 34px; margin-bottom: .55rem; border-color: #b8d7dc; color: var(--cp-ink); background: #fff; } +.testdoku-editor .kachel input[type="text"]:focus, .testdoku-editor .kachel input[type="number"]:focus { border-color: #087b7c; box-shadow: 0 0 0 3px rgba(8,123,124,.14); } +.testdoku-editor .kachel-type { gap: .75rem; }.testdoku-editor .kachel-type label, .testdoku-editor .kachel-auftragszettel { color: var(--cp-ink-2); font-size: .78rem; }.testdoku-editor input[type="radio"] { accent-color: #087b7c; } +.testdoku-editor .kachel-auftragszettel { padding-top: .55rem; border-top: 1px solid #d8e8eb; }.testdoku-editor .kachel-auftragszettel .material-icons { color: #a66e00 !important; } +.testdoku-editor .doku-hint { display: flex; align-items: center; gap: .35rem; margin: .65rem 0 0; color: var(--cp-muted); }.testdoku-editor .doku-hint .material-icons { color: #087b7c; } +.testdoku-editor__actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.25rem; }.testdoku-editor .btn-save-doku { margin: 0; } +@media (max-width: 720px) { .testdoku-export__panel-head, .testdoku-editor__panel-head, .testdoku-export__date-body, .testdoku-editor__workspace-body { padding: 1rem; } .testdoku-export__option-grid { grid-template-columns: 1fr; padding: 1rem; } } +@media (max-width: 560px) { .testdoku-export__date-body .form-group { width: 100%; } .testdoku-export__option .testdoku-export__download, .testdoku-editor__actions, .testdoku-editor__actions .btn { width: 100%; } .testdoku-editor .kachel { min-width: 100%; max-width: none; } } + +/* ============================================================ + 5m. FRAGEBOGEN-EXPORT + ============================================================ */ + +.questionnaire-export { width: 100%; max-width: none; } + +/* Der Zeitraumfilter bleibt bewusst kompakt. */ +.questionnaire-export__filter { + width: min(100%, 680px); + margin: 0; +} + +.questionnaire-export__panel-hint { + margin: .18rem 0 0; + color: var(--cp-muted); + font-size: .78rem; +} + +.questionnaire-export__panel-icon { + flex: 0 0 auto; + color: var(--cp-teal); + font-size: 1.25rem; +} + +.questionnaire-export__filter-row { + display: flex; + flex-wrap: wrap; + align-items: flex-end; + gap: .7rem; +} + +.questionnaire-export__filter-form { + display: flex; + flex: 1 1 430px; + flex-wrap: wrap; + align-items: flex-end; + gap: 1rem; +} + +.questionnaire-export__field { + flex: 1 1 165px; + margin: 0; +} + +.questionnaire-export__filter-form .btn { + min-height: 44px; +} + +.questionnaire-export__filter-row > form:not(.questionnaire-export__filter-form) .btn { + min-height: 44px; +} + +.questionnaire-export__results { + width: min(100%, 980px); + margin-top: 2.5rem; +} + +.questionnaire-export__results-header { margin-bottom: 1rem; } +.questionnaire-export__results-header .kicker { margin-bottom: .45rem; } + +.questionnaire-export__results-title { + margin: 0; + color: var(--cp-ink); + font-family: var(--font-body); + font-size: 1.1rem; + font-weight: 800; +} + +.questionnaire-export__summary { overflow: hidden; } + +.questionnaire-export__summary-status { + display: flex; + align-items: center; + gap: .75rem; + padding: 1.1rem 1.35rem; + border-bottom: 1px solid var(--cp-border); + color: #0b6b58; + background: #edf9f5; +} + +.questionnaire-export__summary-status .material-icons { + font-size: 1.35rem; + color: #087b7c; +} + +.questionnaire-export__summary-status div { display: grid; gap: .08rem; } +.questionnaire-export__summary-status strong { font-size: .95rem; } +.questionnaire-export__summary-status span { color: var(--cp-ink-2); font-size: .8rem; } + +.questionnaire-export__section { + padding: 1.35rem; + border-bottom: 1px solid var(--cp-border); +} + +.questionnaire-export__section:last-child { border-bottom: 0; } + +.questionnaire-export__section-title { + display: flex; + align-items: center; + gap: .5rem; + margin: 0 0 .9rem; + color: var(--cp-ink); + font-family: var(--font-body); + font-size: .95rem; + font-weight: 800; +} + +.questionnaire-export__section-title .material-icons { + color: var(--cp-teal); + font-size: 1.1rem; +} + +.questionnaire-export__stats-grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: .8rem; +} + +.questionnaire-export__stat { + display: grid; + gap: .18rem; + min-height: 112px; + padding: 1rem; + border: 1px solid var(--cp-border); + border-left: 4px solid var(--stat-color); + border-radius: var(--r-md); + background: var(--cp-surface-2); +} + +.questionnaire-export__stat--male { --stat-color: #176b8a; } +.questionnaire-export__stat--female { --stat-color: #c93552; } +.questionnaire-export__stat--diverse { --stat-color: #7b4a9c; } + +.questionnaire-export__stat-value { + color: var(--stat-color); + font-family: var(--font-display); + font-size: 2.25rem; + font-weight: 700; + line-height: .9; +} + +.questionnaire-export__stat-label { color: var(--cp-ink); font-size: .86rem; font-weight: 700; } +.questionnaire-export__stat-note { margin-top: .25rem; color: var(--cp-muted); font-size: .72rem; line-height: 1.35; } + +.questionnaire-export__tests-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); + gap: .65rem; +} + +.questionnaire-export__test { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + min-width: 0; + padding: .72rem .85rem; + border: 1px solid var(--cp-border); + border-radius: var(--r-sm); + color: var(--cp-ink-2); + background: var(--cp-surface-2); +} + +.questionnaire-export__test span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } +.questionnaire-export__test strong { + display: inline-grid; + min-width: 1.6rem; + height: 1.6rem; + padding: 0 .4rem; + place-items: center; + border-radius: 999px; + color: #fff; + background: #087b7c; + font-size: .75rem; +} + +.questionnaire-export__message { + width: min(100%, 680px); + margin-top: 1.25rem; +} + +@media (max-width: 600px) { + .questionnaire-export__filter { width: 100%; } + .questionnaire-export__filter-form { flex-basis: 100%; } + .questionnaire-export__filter-form .btn, + .questionnaire-export__filter-row > form:not(.questionnaire-export__filter-form), + .questionnaire-export__filter-row > form:not(.questionnaire-export__filter-form) .btn { width: 100%; } + .questionnaire-export__stats-grid { grid-template-columns: 1fr; } +} + +/* ============================================================ + 5l. TAGESABSCHLUSS + ============================================================ */ + +.tagesabschluss { + width: 100%; + max-width: none; +} + +/* Die Datumsauswahl ist eine gezielte Aktion und keine Vollbreiten-Karte. */ +.tagesabschluss__panel { + width: min(100%, 580px); + margin: 0; +} + +.tagesabschluss__panel-hint { + margin: .18rem 0 0; + color: var(--cp-muted); + font-size: .78rem; +} + +.tagesabschluss__panel-icon { + flex: 0 0 auto; + color: var(--cp-teal); + font-size: 1.25rem; +} + +.tagesabschluss__filter-form { + display: flex; + flex-wrap: wrap; + align-items: flex-end; + gap: 1rem; +} + +.tagesabschluss__filter-field { + flex: 1 1 210px; + margin: 0; +} + +.tagesabschluss__filter-actions { + display: flex; + flex-wrap: wrap; + gap: .55rem; +} + +.tagesabschluss__results { + width: min(100%, 980px); + margin-top: 2.5rem; +} + +.tagesabschluss__results-header { + margin-bottom: 1rem; +} + +.tagesabschluss__results-header .kicker { + margin-bottom: .45rem; +} + +.tagesabschluss__results-title { + margin: 0; + color: var(--cp-ink); + font-family: var(--font-body); + font-size: 1.1rem; + font-weight: 800; +} + +.tagesabschluss__table { + min-width: 680px; +} + +.tagesabschluss__code, +.tagesabschluss__time { + color: var(--cp-ink) !important; + font-weight: 700; + white-space: nowrap; +} + +.tagesabschluss__tests { + min-width: 210px; +} + +.tagesabschluss__col-amount { + text-align: right; + white-space: nowrap; +} + +.tagesabschluss__amount-paid { + color: var(--cp-ink); + font-weight: 700; +} + +.tagesabschluss__amount-sep { + margin: 0 .25rem; + color: var(--cp-muted); +} + +.tagesabschluss__amount-free { + color: var(--cp-teal); + font-size: .8rem; + font-weight: 700; +} + +.tagesabschluss__empty-cell { + color: var(--cp-muted); +} + +.tagesabschluss__summary { + padding: 1.15rem 1.35rem 1.3rem; + border-top: 1px solid var(--cp-border); + background: var(--cp-surface-2); +} + +.tagesabschluss__summary-title { + margin: 0 0 .65rem; + color: var(--cp-ink); + font-family: var(--font-body); + font-size: .86rem; + font-weight: 800; +} + +.tagesabschluss__summary-list { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: .35rem 1.5rem; + margin: 0; +} + +.tagesabschluss__summary-row { + display: flex; + align-items: baseline; + justify-content: space-between; + gap: .75rem; + color: var(--cp-ink-2); + font-size: .84rem; +} + +.tagesabschluss__summary-row dt, +.tagesabschluss__summary-row dd { + margin: 0; +} + +.tagesabschluss__summary-row dd { + color: var(--cp-ink); + font-weight: 700; + white-space: nowrap; +} + +.tagesabschluss__summary-row--total { + grid-column: 1 / -1; + margin-top: .35rem; + padding-top: .65rem; + border-top: 1px solid var(--cp-border); + color: var(--cp-ink); + font-size: .92rem; + font-weight: 800; +} + +.tagesabschluss__summary-row--total dd { + color: var(--cp-teal); + font-size: 1rem; +} + +@media (max-width: 600px) { + .tagesabschluss__panel { width: 100%; } + .tagesabschluss__filter-field, + .tagesabschluss__filter-actions, + .tagesabschluss__filter-actions .btn { width: 100%; } + .tagesabschluss__summary-list { grid-template-columns: 1fr; } + .tagesabschluss__summary-row--total { grid-column: auto; } +} + +/* ============================================================ + 5k. ACCOUNTVERWALTUNG (admin_users) + ============================================================ */ + +/* Beide Sections haben eine sinnvolle Maximalbreite statt Vollbild. + Kein Container-im-Container: Sections sind eigenständige Blöcke mit + Kanten-Styling statt eingebetteter card-header/card-body-Struktur. */ + +.users-page { + display: flex; + flex-direction: column; +} + +/* Gemeinsame Sektion-Basis */ +.users-section { + background: var(--cp-surface); + border: 1px solid var(--cp-border); + border-radius: var(--r-lg); + box-shadow: var(--shadow-sm); + overflow: hidden; +} + +/* Account anlegen: schmalere Spalte — Formular braucht keine volle Breite */ +.users-section--create { + max-width: 560px; +} + +/* Nutzer:innen-Liste: etwas breiter, aber immer noch begrenzt */ +.users-section--list { + max-width: 820px; + margin-top: 2.5rem; /* Abstand nur zwischen den beiden Containern */ +} + +/* Abschnitts-Titel als leichter Panel-Header (Noto Sans, kein Big Shoulders) */ +.users-section__title { + display: flex; + align-items: center; + gap: .6rem; + padding: .9rem 1.35rem; + border-bottom: 1px solid var(--cp-border); + background: var(--cp-surface-2); + font-family: var(--font-body); + font-size: .95rem; + font-weight: 800; + color: var(--cp-ink); + margin: 0; + letter-spacing: 0; + text-transform: none; +} + +.users-section__title .material-icons { + font-size: 1.1rem; + color: var(--cp-teal); +} + +/* Formular-Wrapper im Create-Bereich */ +.users-section--create form { + padding: 1.35rem 1.35rem 1.25rem; +} + +/* Hinweistext über der Tabelle */ +.users-list-hint { + display: flex; + align-items: center; + gap: .45rem; + padding: .75rem 1.25rem; + border-bottom: 1px solid var(--cp-border); + color: var(--cp-muted); + font-size: .82rem; + background: var(--cp-surface-2); +} + +.users-list-hint .material-icons { + font-size: 1rem; + flex-shrink: 0; + color: var(--cp-blue); +} + +/* Tabelle bündig ohne weitere Abstände in der Section */ +.users-section--list .table-wrap { + border: none; + border-radius: 0; +} + +/* Zeilen anklickbar → Cursor-Hinweis */ +.users-table__row { cursor: pointer; } + +/* Löschen-Spalte: minimal breit, zentriert */ +.users-table__delete-col { + width: 56px; + text-align: center; +} + +/* Modal-Account-Zeile */ +.users-modal-account { + margin-bottom: 1.1rem; + color: var(--cp-ink-2); + font-size: .9rem; +} + +.users-modal-account strong { + color: var(--cp-ink); +} + +@media (max-width: 600px) { + .users-section--create, + .users-section--list { + max-width: 100%; + } +} + +/* ============================================================ + 5j. KOMPATIBILITÄT — ÖFFENTLICHER USER-BEREICH + ============================================================ + Die Staff-Stylesheet wird auch auf öffentlichen Seiten geladen. Die + folgenden Regeln verhindern, dass deren globales Flex-/Sidebar-Layout + den öffentlichen Seitenrahmen verschiebt. +*/ +body.cp-user-host { + display: block; + min-height: 100%; + color: inherit; + background: transparent; +} + +body.cp-user-host > .cp-user { + width: 100%; + min-width: 0; +} + +body.cp-user-host main.cp-user-main { + margin-left: 0; + flex: none; + min-height: 0; + padding: 0; + color: inherit; + background: transparent; +} + + +/* ============================================================ + 5n. EVALUATION — DATENVERWALTUNG & AUSWERTUNG + ============================================================ + Die Evaluation verwendet bewusst dieselben Card-, Formular- und + Tabellenprinzipien wie Buchungsübersicht, Slotverwaltung und Testangebote. +*/ +.evaluation__header { + display: flex; + align-items: flex-end; + justify-content: space-between; + gap: 1rem; + width: 100%; + margin: 0 0 1.35rem; +} +.evaluation__header .kicker { margin-bottom: .55rem; } +.evaluation__header .kicker .material-icons { font-size: .95rem; } +.evaluation__header .page-title { margin: 0; } +.evaluation__header .btn { + display:inline-flex; + align-items:center; + justify-content:center; + gap:.45rem; + min-height:2.35rem; + padding:.55rem .9rem; + border:1px solid rgba(37,150,190,.32); + border-radius:var(--r-sm); + color:#176b8a; + background:rgba(37,150,190,.08); + font-size:.8rem; + font-weight:800; + white-space:nowrap; + transition:transform var(--ease), background var(--ease), border-color var(--ease), color var(--ease); +} + +.evaluation__info { + display: flex; + align-items: flex-start; + gap: .55rem; + width: min(100%, 980px); + margin: 0 0 1.25rem; + padding: .9rem 1.05rem; + border: 1px solid rgba(8, 123, 124, .22); + border-left: 4px solid var(--cp-teal); + border-radius: var(--r-sm); + color: var(--cp-ink-2); + background: #e6f4f4; + font-size: .86rem; + line-height: 1.55; +} +.evaluation__info .material-icons { flex: 0 0 auto; margin-top: .05rem; color: var(--cp-teal); font-size: 1.1rem; } +.evaluation__info strong { color: var(--cp-ink); } + +.evaluation__upload, +.evaluation__files, +.evaluation__filter, +.evaluation__export, +.evaluation__card { overflow: hidden; margin-bottom: 1.15rem; } +.evaluation__upload, +.evaluation__files { width: min(100%, 1080px); } + +.evaluation__section-title { + display: flex; + align-items: center; + gap: .5rem; + margin: 0; + color: var(--cp-ink); + font-size: 1rem; + font-weight: 800; +} +.evaluation__section-title .material-icons { color: var(--cp-teal); font-size: 1.15rem; } +.evaluation__upload > .evaluation__section-title { padding: 1rem 1.3rem; border-bottom: 1px solid var(--cp-border); background: var(--cp-surface-2); } +.evaluation__upload-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; padding: 1.2rem 1.3rem; } +.evaluation__upload-field { width: min(100%, 410px); margin: 0; } +.evaluation__file-input { display: block; width: 100%; min-height: 42px; padding: .45rem .6rem; border: 1px solid var(--cp-border-2); border-radius: var(--r-sm); color: var(--cp-ink-2); background: var(--cp-surface-2); } + +.evaluation__files-head { + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + padding: 1rem 1.3rem; + border-bottom: 1px solid var(--cp-border); + background: var(--cp-surface-2); +} +.evaluation__record-count { display: inline-flex; align-items: center; min-height: 1.85rem; padding: .15rem .7rem; border-radius: 999px; color: #fff; background: #087b7c; font-size: .78rem; font-weight: 800; white-space: nowrap; } +.evaluation__files .table-container { overflow-x: auto; } +.evaluation__files .admin-table { min-width: 820px; } +.evaluation__sort-link { display: inline-flex; align-items: center; gap: .2rem; color: inherit; }.evaluation__sort-link:hover { color: var(--cp-teal); } +.evaluation__sort-arrow { font-size: .95rem; opacity: .45; }.evaluation__sort-arrow.is-active { opacity: 1; color: var(--cp-teal); } +.evaluation__action-col, .evaluation__center { width: 64px; text-align: center; }.evaluation__file-icon { margin-right: .3rem; color: var(--cp-teal); font-size: 1.05rem; vertical-align: middle; }.evaluation__muted { color: var(--cp-muted); font-size: .82rem; } +.evaluation__icon-button { display: inline-grid; width: 32px; min-height: 32px; padding: 0; place-items: center; }.evaluation__icon-button .material-icons { margin: 0; font-size: 1rem; } + +.evaluation__filter { width: min(100%, 760px); } +.evaluation__filter-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem; padding: 1.2rem 1.3rem; } +.evaluation__filter-field { width: min(100%, 220px); margin: 0; }.evaluation__filter-field .filter-input { width: 100%; min-height: 42px; } +.evaluation__export { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem; padding: .9rem 1.1rem; } +.evaluation__export-label { display: inline-flex; align-items: center; gap: .4rem; margin-right: .15rem; color: var(--cp-ink); font-size: .88rem; font-weight: 800; }.evaluation__export-label .material-icons { color: var(--cp-teal); font-size: 1.1rem; }.evaluation__period { margin-left: auto; color: var(--cp-muted); font-size: .78rem; } + +.evaluation__kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(138px, 1fr)); gap: .8rem; margin: 0 0 1.2rem; } +.evaluation__kpi { min-height: 110px; padding: 1rem; border: 1px solid var(--cp-border); border-top: 3px solid var(--cp-teal); border-radius: var(--r-md); text-align: center; background: var(--cp-surface); box-shadow: var(--shadow-sm); } +.evaluation__kpi-value { color: var(--cp-ink); font-family: var(--font-display); font-size: 2.45rem; font-weight: 700; line-height: .9; }.evaluation__kpi-label { margin-top: .45rem; color: var(--cp-ink-2); font-size: .74rem; font-weight: 700; }.evaluation__kpi-note { margin-top: .2rem; color: var(--cp-muted); font-size: .68rem; line-height: 1.3; } +.evaluation__kpi:last-child { border-top-color: var(--cp-coral); }.evaluation__kpi:last-child .evaluation__kpi-value { color: var(--cp-coral); } + +.evaluation__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; margin-bottom: 1.1rem; } +.evaluation__card { padding: 1.1rem 1.2rem; } +.evaluation__card h3 { display: flex; align-items: center; gap: .45rem; margin: 0 0 .95rem; padding-bottom: .65rem; border-bottom: 1px solid var(--cp-border); color: var(--cp-ink); font-size: .93rem; font-weight: 800; }.evaluation__card h3 .material-icons { color: var(--cp-teal); font-size: 1.1rem; }.evaluation__card-title--plain { margin: 0 !important; padding: 0 !important; border: 0 !important; }.evaluation__icon--danger { color: var(--cp-coral) !important; }.evaluation__icon--warning { color: #b87300 !important; } +.evaluation__bar-row { display: flex; align-items: center; gap: .65rem; min-height: 22px; margin: 0 0 .48rem; font-size: .82rem; }.evaluation__bar-label { flex: 0 0 145px; min-width: 0; overflow: hidden; color: var(--cp-ink-2); text-overflow: ellipsis; white-space: nowrap; }.evaluation__bar-label--wide { flex-basis: 190px; font-size: .77rem; }.evaluation__bar-track { flex: 1 1 auto; min-width: 60px; height: 13px; overflow: hidden; border-radius: 999px; background: #dceff2; box-shadow: inset 0 1px 1px rgba(7,24,46,.05); }.evaluation__bar-fill { display: block; height: 100%; min-width: 2px; border-radius: inherit; background: linear-gradient(90deg, #087b7c, #2596be); transition: width .35s ease; }.evaluation__bar-fill--red { background: linear-gradient(90deg, #c93552, #8d1f35); }.evaluation__bar-fill--orange { background: linear-gradient(90deg, #d88a00, #a86000); }.evaluation__bar-count { flex: 0 0 2.15rem; color: var(--cp-ink); font-size: .8rem; font-weight: 800; text-align: right; }.evaluation__bar-count--danger { color: var(--cp-coral); }.evaluation__no-data { color: var(--cp-muted); font-size: .84rem; font-style: italic; }.evaluation__summary-text { margin: 0 0 .85rem; color: var(--cp-ink-2); font-size: .85rem; }.evaluation__section-note { color: var(--cp-muted); font-size: .72rem; font-weight: 600; }.evaluation__age-range { margin: .6rem 0 0; color: var(--cp-muted); font-size: .76rem; }.evaluation__pills { display: flex; flex-wrap: wrap; gap: .42rem; }.evaluation__pill { display: inline-block; padding: .18rem .52rem; border-radius: 999px; color: #07666b; background: #dff3f3; font-size: .72rem; font-weight: 700; }.evaluation__pill--positive { color: #8d1f35; background: #f8e0e5; } +.evaluation__raw-data { margin-top: 1.45rem; }.evaluation__card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }.evaluation__table-scroll { max-height: 400px; overflow: auto; border: 1px solid var(--cp-border); border-radius: var(--r-sm); }.evaluation__table { min-width: 1000px; font-size: .81rem; }.evaluation__table-cell { font-size: .79rem; } +.evaluation__empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .65rem; min-height: 230px; padding: 2.5rem 1.25rem; color: var(--cp-muted); text-align: center; }.evaluation__empty-state--compact { min-height: 200px; }.evaluation__empty-icon { color: var(--cp-teal); font-size: 2.6rem !important; }.evaluation__empty-state:not(.card) { width: min(100%, 760px); border: 2px dashed var(--cp-border-2); border-radius: var(--r-md); }.evaluation__empty-icon--teal { color: var(--cp-teal); } +@media (max-width: 900px) { .evaluation__grid { grid-template-columns: 1fr; } } +@media (max-width: 640px) { .evaluation__header, .evaluation__files-head, .evaluation__card-head { align-items: flex-start; flex-direction: column; }.evaluation__header .btn, .evaluation__upload-form .btn, .evaluation__filter-form .btn { width: 100%; }.evaluation__upload-form, .evaluation__filter-form, .evaluation__files-head, .evaluation__upload > .evaluation__section-title { padding-left: 1rem; padding-right: 1rem; }.evaluation__upload-field, .evaluation__filter-field { width: 100%; }.evaluation__export { align-items: stretch; }.evaluation__export .btn { width: 100%; }.evaluation__period { width: 100%; margin-left: 0; }.evaluation__kpis { grid-template-columns: repeat(2, minmax(0,1fr)); }.evaluation__card { padding: 1rem; }.evaluation__bar-label { flex-basis: 100px; }.evaluation__bar-label--wide { flex-basis: 115px; } } +@media (prefers-reduced-motion: reduce) { .evaluation__bar-fill { transition: none; } } + +/* ============================================================ + 5o. INFOTEXTE — REDAKTION + ============================================================ */ +.infotexts-page { width: 100%; max-width: none; margin: 0; } +.infotexts-page__header { margin-bottom: 1.35rem; } +.infotexts-page__header .kicker { margin-bottom: .55rem; } +.infotexts-page__title { margin: 0; color: var(--cp-ink); font-family: var(--font-display); font-size: clamp(2.15rem, 4vw, 3.25rem); font-weight: 700; line-height: .9; letter-spacing: -.012em; text-transform: uppercase; } +.infotexts-page__intro { max-width: 52rem; margin: .6rem 0 0; color: var(--cp-ink-2); } +.infotexts-panel { width: 100%; max-width: 1440px; overflow: hidden; } +.infotexts-panel__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem 1.3rem; border-bottom: 1px solid var(--cp-border); background: var(--cp-surface-2); } +.infotexts-panel__header h2 { margin: 0; color: var(--cp-ink); font-size: 1rem; font-weight: 800; } +.infotexts-panel__header p { margin: .2rem 0 0; color: var(--cp-muted); font-size: .8rem; } +.infotexts-panel__icon { flex: 0 0 auto; color: var(--cp-teal); font-size: 1.3rem; } +.infotexts-panel__body { padding: 1.15rem 1.3rem; } +.infotexts-legend, .infotexts-item { display: grid; grid-template-columns: minmax(175px, .45fr) minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; } +.infotexts-legend { padding: 0 .9rem .55rem; color: var(--cp-muted); font-size: .68rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; } +.infotexts-list { border: 1px solid var(--cp-border); border-radius: var(--r-md); overflow: hidden; } +.infotexts-item { padding: 1rem .9rem; border-bottom: 1px solid var(--cp-border); background: var(--cp-surface); } +.infotexts-item:last-child { border-bottom: 0; } +.infotexts-item:hover { background: #fbfefe; } +.infotexts-item__header { min-width: 0; padding: .1rem .2rem; } +.infotexts-item__header h3 { margin: 0; color: var(--cp-ink); font-size: .9rem; line-height: 1.35; } +.infotexts-item__warning { display: inline-flex; align-items: center; gap: .28rem; margin-top: .55rem; color: #a12a3d; font-size: .72rem; font-weight: 800; }.infotexts-item__warning .material-icons { font-size: 1rem; } +.infotexts-editor { display: flex; min-width: 0; flex-direction: column; align-self: start; }.infotexts-editor__label { display: none; } +/* Quill setzt standardmäßig .ql-editor { height: 100% }. Das würde in + einer Grid-Zeile die Editoren bis über die folgende Zeile strecken. + Hier erhält jede Sprachspalte daher eine klar begrenzte, eigene Höhe. */ +.infotexts-page .ql-toolbar.ql-snow { flex: 0 0 auto; padding: .45rem .55rem; border: 1px solid var(--cp-border-2); border-bottom: 0; border-radius: var(--r-sm) var(--r-sm) 0 0; background: var(--cp-surface-2); } +.infotexts-page .ql-container.ql-snow { display: flex; height: 158px; min-height: 0; flex: 0 0 158px; overflow: hidden; border: 1px solid var(--cp-border-2); border-radius: 0 0 var(--r-sm) var(--r-sm); color: var(--cp-ink); background: #fff; font-family: var(--font-body); font-size: .85rem; } +.infotexts-page .ql-editor { width: 100%; height: auto !important; min-height: 0; padding: .8rem .85rem; overflow-y: auto; line-height: 1.55; }.infotexts-page .ql-editor.ql-blank::before { color: var(--cp-muted); font-style: normal; }.infotexts-page .ql-snow .ql-stroke { stroke: var(--cp-ink-2); }.infotexts-page .ql-snow .ql-fill { fill: var(--cp-ink-2); }.infotexts-page .ql-snow .ql-picker { color: var(--cp-ink-2); }.infotexts-page .ql-toolbar button:hover .ql-stroke, .infotexts-page .ql-toolbar button.ql-active .ql-stroke { stroke: var(--cp-teal); }.infotexts-page .ql-toolbar button:hover .ql-fill, .infotexts-page .ql-toolbar button.ql-active .ql-fill { fill: var(--cp-teal); }.infotexts-page .ql-snow .ql-picker.ql-background .ql-picker-label::before, .infotexts-page .ql-snow .ql-picker.ql-background .ql-picker-item::before { content: 'A'; } +.infotexts-panel__footer { display: flex; justify-content: flex-end; gap: .65rem; padding: .9rem 1.3rem; border-top: 1px solid var(--cp-border); background: var(--cp-surface-2); } +@media (max-width: 900px) { .infotexts-legend { display: none; }.infotexts-item { grid-template-columns: 1fr; gap: .8rem; }.infotexts-item__header { padding: 0; }.infotexts-editor { display: grid; gap: .35rem; }.infotexts-editor__label { display: block; color: var(--cp-ink-2); font-size: .78rem; font-weight: 800; } } +@media (max-width: 600px) { .infotexts-panel__header, .infotexts-panel__footer { padding-left: 1rem; padding-right: 1rem; }.infotexts-panel__body { padding: 1rem; }.infotexts-item { padding: 1rem; }.infotexts-panel__footer .btn { width: 100%; }.infotexts-page .ql-toolbar.ql-snow { overflow-x: auto; white-space: nowrap; } } + +/* ============================================================ + 5p. NACHRICHTEN — TEAM-POSTEINGANG + ============================================================ */ +.messages-page { width:100%; max-width:1120px; margin:0; } +.messages-page__header { margin-bottom:1.35rem; }.messages-page__header .kicker { margin-bottom:.55rem; }.messages-page__title { margin:0; color:var(--cp-ink); font-family:var(--font-display); font-size:clamp(2.15rem,4vw,3.25rem); font-weight:700; line-height:.9; letter-spacing:-.012em; text-transform:uppercase; }.messages-page__intro { max-width:48rem; margin:.6rem 0 0; color:var(--cp-ink-2); } +.messages-cleanup { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; padding:1rem 1.25rem; }.messages-cleanup__copy { display:flex; align-items:center; gap:.75rem; }.messages-cleanup__icon { display:grid; width:2.35rem; height:2.35rem; place-items:center; border-radius:50%; color:var(--cp-coral); background:rgba(201,53,82,.1); }.messages-cleanup h2 { margin:0; color:var(--cp-ink); font-size:.95rem; }.messages-cleanup p { margin:.15rem 0 0; color:var(--cp-muted); font-size:.8rem; }.messages-cleanup form { margin:0; } +.messages-compose, .messages-inbox { margin-bottom:1.25rem; overflow:hidden; }.messages-panel__header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; padding:1rem 1.3rem; border-bottom:1px solid var(--cp-border); background:var(--cp-surface-2); }.messages-panel__header h2 { margin:0; color:var(--cp-ink); font-size:1rem; font-weight:800; }.messages-panel__header p { margin:.2rem 0 0; color:var(--cp-muted); font-size:.8rem; }.messages-panel__icon { flex:0 0 auto; color:var(--cp-teal); font-size:1.25rem; } +.messages-compose__form { display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,.38fr); gap:1.15rem 1.25rem; padding:1.25rem 1.3rem; }.messages-recipients { grid-column:1 / -1; margin:0; padding:0; border:0; }.messages-recipients legend { margin:0 0 .55rem; color:var(--cp-ink-2); font-size:.875rem; font-weight:700; }.messages-recipient-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.55rem; }.messages-recipient { display:flex; align-items:center; gap:.55rem; min-height:42px; padding:.55rem .7rem; border:1px solid var(--cp-border); border-radius:var(--r-sm); color:var(--cp-ink-2); background:var(--cp-surface); cursor:pointer; font-size:.86rem; font-weight:700; }.messages-recipient:hover { border-color:var(--cp-teal); background:#f7fcfc; }.messages-recipient--all { color:var(--cp-ink); }.messages-recipient input { width:1rem; height:1rem; margin:0; accent-color:var(--cp-teal); }.messages-recipient small { color:var(--cp-muted); font-size:.72rem; font-weight:600; }.messages-compose__subject, .messages-compose__body { margin:0; }.messages-compose__body { grid-column:1 / -1; }.messages-compose textarea { min-height:140px; resize:vertical; }.messages-compose__actions { display:flex; justify-content:flex-end; grid-column:1 / -1; } +.messages-list { display:grid; }.message-card { border-bottom:1px solid var(--cp-border); background:var(--cp-surface); }.message-card:last-child { border-bottom:0; }.message-card.unread { box-shadow:inset 4px 0 0 #d7ad32; background:linear-gradient(90deg,#fff9d8 0%,var(--cp-surface) 24%); }.message-header { display:flex; width:100%; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem 1.3rem; border:0; color:var(--cp-ink); background:transparent; cursor:pointer; font:inherit; text-align:left; transition:background var(--ease); }.message-header:hover { background:var(--cp-surface-2); }.message-subject { display:flex; flex:1; align-items:center; gap:.55rem; min-width:0; font-weight:700; }.subject-text { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.unread-dot { display:block; width:.55rem; height:.55rem; flex:0 0 auto; border-radius:50%; background:#d7ad32; box-shadow:0 0 0 3px rgba(215,173,50,.18); }.reply-count { display:inline-flex; align-items:center; gap:.25rem; padding:.14rem .45rem; border-radius:999px; color:#176b8a; background:#deeff5; font-size:.72rem; font-weight:800; }.reply-count .material-icons { font-size:.9rem; }.message-meta { display:flex; align-items:center; justify-content:flex-end; gap:.65rem; flex:0 0 auto; color:var(--cp-muted); font-size:.77rem; }.sender { padding:.16rem .5rem; border-radius:999px; color:#07666b; background:#dff3f3; font-size:.75rem; font-weight:800; }.expand-icon { color:var(--cp-muted); transition:transform var(--ease); }.expand-icon.rotated { transform:rotate(180deg); } +.message-body { padding:0 1.3rem 1.3rem; border-top:1px solid var(--cp-border); }.message-content { margin-top:1rem; padding:1rem; border:1px solid var(--cp-border); border-radius:var(--r-sm); color:var(--cp-ink-2); background:var(--cp-surface-2); line-height:1.6; }.message-info { margin: .8rem 0 0; color:var(--cp-muted); font-size:.78rem; }.message-info strong { color:var(--cp-ink-2); }.message-thread-actions { margin-top:.85rem; }.replies-section { margin-top:1rem; padding:1rem; border:1px solid var(--cp-border); border-radius:var(--r-md); background:var(--cp-surface); }.replies-header { display:flex; align-items:center; gap:.4rem; margin:0 0 .7rem; color:var(--cp-ink); font-size:.88rem; }.replies-header .material-icons { color:var(--cp-teal); font-size:1rem; }.reply-item { padding:.75rem .85rem; border-left:3px solid var(--cp-teal); border-radius:0 var(--r-sm) var(--r-sm) 0; background:var(--cp-surface-2); }.reply-item + .reply-item { margin-top:.55rem; }.reply-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.3rem; color:var(--cp-ink); font-size:.8rem; }.reply-time { color:var(--cp-muted); font-size:.74rem; }.reply-body { color:var(--cp-ink-2); font-size:.85rem; line-height:1.5; }.reply-form-section { margin-top:1rem; padding-top:1rem; border-top:1px solid var(--cp-border); }.reply-form { display:grid; gap:.65rem; }.reply-form__label { color:var(--cp-ink-2); font-size:.82rem; font-weight:800; }.reply-textarea { min-height:84px !important; resize:vertical; }.reply-buttons { display:flex; flex-wrap:wrap; gap:.55rem; }.reply-hint { display:flex; align-items:flex-start; gap:.4rem; margin:0; padding:.65rem .75rem; border-left:3px solid var(--cp-teal); border-radius:0 var(--r-sm) var(--r-sm) 0; color:var(--cp-muted); background:rgba(8,123,124,.07); font-size:.75rem; line-height:1.45; }.reply-hint .material-icons { flex:0 0 auto; color:var(--cp-teal); font-size:1rem; }.messages-empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.55rem; min-height:230px; padding:2rem; color:var(--cp-muted); text-align:center; }.messages-empty-state .material-icons { color:var(--cp-teal); font-size:2.6rem; }.messages-empty-state p { margin:0; } +@media (max-width:700px) { .messages-cleanup, .messages-panel__header { align-items:flex-start; flex-direction:column; }.messages-cleanup form, .messages-cleanup .btn { width:100%; }.messages-compose__form { grid-template-columns:1fr; padding:1rem; }.messages-compose__subject, .messages-compose__body, .messages-compose__actions { grid-column:auto; }.messages-compose__actions .btn { width:100%; }.message-header { align-items:flex-start; flex-direction:column; }.message-meta { width:100%; justify-content:flex-start; flex-wrap:wrap; }.message-body { padding:0 1rem 1rem; }.reply-buttons .btn { flex:1 1 180px; } } + +/* ============================================================ + USER-NACHRICHTEN — ADMIN + An den zentralen style.css-Bereich anhängen. + ============================================================ */ +.patient-messages { + width: 100%; + max-width: 1280px; + margin: 0; +} + +.patient-messages__header { + margin-bottom: 1.35rem; +} + +.patient-messages__header .kicker { + margin-bottom: .55rem; +} + +.patient-messages__header .page-subtitle { + max-width: 48rem; + margin: .6rem 0 0; +} + +.patient-messages__conversations, +.patient-messages__compose { + margin-bottom: 1.25rem; + overflow: hidden; +} + +.patient-messages__panel-header { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 1rem; + padding: 1rem 1.3rem; + border-bottom: 1px solid var(--cp-border); + background: var(--cp-surface-2); +} + +.patient-messages__panel-header h2 { + margin: 0; + color: var(--cp-ink); + font-size: 1rem; + font-weight: 800; +} + +.patient-messages__panel-header p { + margin: .2rem 0 0; + color: var(--cp-muted); + font-size: .8rem; +} + +.patient-messages__panel-icon { + flex: 0 0 auto; + color: var(--cp-teal); + font-size: 1.25rem; +} + +.patient-messages__table-wrap { + overflow-x: auto; + border: 0; + border-radius: 0; +} + +.patient-messages__table { + min-width: 940px; +} + +.patient-messages__table th, +.patient-messages__table td { + vertical-align: middle; +} + +.patient-messages__center { + width: 120px; + text-align: center; +} + +.patient-messages__code { + width: 100px; + color: var(--cp-teal); + letter-spacing: .04em; +} + +.patient-messages__preview-cell { + min-width: 360px; + max-width: 520px; +} + +.patient-messages__preview h3 { + margin: 0 0 .25rem; + overflow: hidden; + color: var(--cp-ink); + font-size: .86rem; + font-weight: 800; + text-overflow: ellipsis; + white-space: nowrap; +} + +.patient-messages__preview p { + max-width: 490px; + margin: 0 0 .28rem; + overflow: hidden; + color: var(--cp-ink-2); + font-size: .8rem; + line-height: 1.4; + text-overflow: ellipsis; + white-space: nowrap; +} + +.patient-messages__preview time { + color: var(--cp-muted); + font-size: .72rem; +} + +.patient-messages__sender-badge { + gap: .28rem; +} + +.patient-messages__sender-badge .material-icons { + font-size: .95rem; +} + +.patient-messages__open-button { + min-width: 96px; +} + +.patient-messages__empty { + min-height: 250px; +} + +.patient-messages__empty h3 { + margin: 0; + color: var(--cp-ink-2); + font-family: var(--font-display); + font-size: 1.55rem; + font-weight: 600; + text-transform: uppercase; +} + +.patient-messages__empty p { + margin: 0; + color: var(--cp-muted); + font-size: .86rem; +} + +.patient-messages__form { + display: grid; + grid-template-columns: minmax(150px, 180px) minmax(240px, 1fr); + gap: 1rem 1.15rem; + padding: 1.25rem 1.3rem; +} + +.patient-messages__form .form-group { + margin: 0; +} + +.patient-messages__body-field, +.patient-messages__form-actions { + grid-column: 1 / -1; +} + +.patient-messages__body-field textarea { + min-height: 170px; + resize: vertical; +} + +.patient-messages__form-actions { + display: flex; + justify-content: flex-start; +} + +@media (max-width: 640px) { + .patient-messages__panel-header { + padding-right: 1rem; + padding-left: 1rem; + } + + .patient-messages__form { + grid-template-columns: 1fr; + padding-right: 1rem; + padding-left: 1rem; + } + + .patient-messages__body-field, + .patient-messages__form-actions { + grid-column: auto; + } + + .patient-messages__form-actions, + .patient-messages__form-actions .btn { + width: 100%; + } +} + +/* ============================================================ + USER-NACHRICHTEN — KONVERSATION + An den zentralen style.css-Bereich anhängen. + ============================================================ */ +.patient-conversation { width:100%; max-width:1280px; margin:0; } + +.patient-conversation__header { + display:flex; + align-items:flex-end; + justify-content:space-between; + gap:1.25rem; + margin-bottom:1.35rem; +} +.patient-conversation__header .kicker { margin-bottom:.55rem; } +.patient-conversation__header .page-title { margin:0; } + +.patient-conversation__back { + display:inline-flex; + align-items:center; + justify-content:center; + gap:.45rem; + min-height:2.35rem; + padding:.55rem .9rem; + border:1px solid rgba(37,150,190,.32); + border-radius:var(--r-sm); + color:#176b8a; + background:rgba(37,150,190,.08); + font-size:.8rem; + font-weight:800; + white-space:nowrap; + transition:transform var(--ease), background var(--ease), border-color var(--ease), color var(--ease); +} +.patient-conversation__back:hover { + color:#0b536d; + background:rgba(37,150,190,.16); + border-color:rgba(37,150,190,.55); + transform:translateX(-2px); +} +.patient-conversation__back:focus-visible { + outline:3px solid rgba(82,224,207,.45); + outline-offset:3px; +} +.patient-conversation__back .material-icons { font-size:1.05rem; } + +.patient-conversation__deleted-alert { + display:flex; + align-items:flex-start; + gap:.6rem; + width:min(100%,1000px); + margin:0 0 1.15rem; + padding:.9rem 1rem; + border:1px solid #e8c96a; + border-left:4px solid #b98200; + border-radius:var(--r-sm); + color:#6c5000; + background:#fff8dc; + font-size:.85rem; + line-height:1.5; +} +.patient-conversation__deleted-alert .material-icons { flex:0 0 auto; color:#a66e00; font-size:1.15rem; } +.patient-conversation__deleted-alert a { margin-left:.35rem; color:#805d00; font-weight:800; text-decoration:underline; } + +.patient-conversation__info { width:100%; margin-bottom:1.35rem; overflow:hidden; } +.patient-conversation__panel-header { + display:flex; + align-items:flex-start; + justify-content:space-between; + gap:1rem; + padding:1rem 1.3rem; + border-bottom:1px solid var(--cp-border); + background:var(--cp-surface-2); +} +.patient-conversation__panel-header h2 { margin:0; color:var(--cp-ink); font-size:1rem; font-weight:800; } +.patient-conversation__panel-header p { margin:.2rem 0 0; color:var(--cp-muted); font-size:.8rem; } +.patient-conversation__panel-header > .material-icons { flex:0 0 auto; color:var(--cp-teal); font-size:1.25rem; } +.patient-conversation__info-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; padding:1rem 1.3rem; } +.patient-conversation__info-grid div { display:grid; gap:.18rem; } +.patient-conversation__info-grid span { color:var(--cp-muted); font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; } +.patient-conversation__info-grid strong { color:var(--cp-ink); font-size:.9rem; } + +.patient-conversation__layout { + display:grid; + grid-template-columns:minmax(0,1.55fr) minmax(300px,.85fr); + align-items:start; + gap:1.5rem; +} +.patient-conversation__thread { min-width:0; } +.patient-conversation__section-heading { + display:flex; + align-items:flex-end; + justify-content:space-between; + gap:1rem; + margin:0 0 .85rem; + padding:0 .15rem; +} +.patient-conversation__section-heading .kicker { margin-bottom:.35rem; } +.patient-conversation__section-heading h2 { margin:0; color:var(--cp-ink); font-size:1.1rem; font-weight:800; } +.conversation-messages { display:grid; gap:.85rem; } + +.patient-message { + overflow:hidden; + border:1px solid rgba(7,24,46,.14); + border-left:3px solid var(--cp-teal); + border-radius:var(--r-md); + background:#fff; + box-shadow:0 3px 12px rgba(7,24,46,.14); +} +.patient-message--admin { border-left-color:var(--cp-blue); } +.patient-message__header { + display:flex; + align-items:center; + justify-content:space-between; + gap:.8rem; + min-height:2.8rem; + padding:.55rem .8rem; + border-bottom:1px solid rgba(7,24,46,.1); + background:#e7f4f6; +} +.patient-message__sender { display:flex; align-items:center; flex-wrap:wrap; gap:.4rem; min-width:0; color:#07182e; font-size:.78rem; } +.patient-message__sender time { color:#527080; font-size:.7rem; } +.patient-message__sender-icon { display:grid; width:1.5rem; height:1.5rem; place-items:center; border-radius:50%; } +.patient-message__sender-icon .material-icons { font-size:.92rem; } +.patient-message__sender-icon--patient { color:#087b7c; background:#dff3f3; } +.patient-message__sender-icon--admin { color:#176b8a; background:#deeff5; } +.patient-message__actions { display:flex; align-items:center; gap:.4rem; flex:0 0 auto; } +.patient-message__actions form { margin:0; } +.patient-message__delete { min-height:1.9rem; padding:.25rem .65rem; border:1px solid rgba(240,74,103,.45); border-radius:var(--r-sm); color:#c73654; background:#fff; font-size:.72rem; font-weight:800; } +.patient-message__delete:hover { color:#a82c46; border-color:rgba(240,74,103,.7); background:#fff5f7; } +.patient-message__delete .material-icons { font-size:.95rem; } +.patient-message__body { padding:.85rem 1rem 1rem; color:#07182e; background:#fff; } +.patient-message__subject { margin:0 0 .45rem; color:#07182e; font-size:.92rem; font-weight:800; } +.patient-message__text { margin:0; color:#24465a; white-space:pre-wrap; line-height:1.55; } +.patient-message__reply { margin-top:1rem; padding-top:.9rem; border-top:1px solid rgba(7,24,46,.1); } +.patient-message__reply-toggle { min-width:120px; } +.patient-message__reply-form { margin-top:1rem; padding:1rem; border:1px solid var(--cp-border); border-radius:var(--r-sm); background:var(--cp-surface-2); } +.patient-message__reply-form[hidden] { display:none; } +.patient-message__reply-form .form-group { margin-bottom:.8rem; } +.patient-message__reply-actions { display:flex; flex-wrap:wrap; gap:.55rem; } + +.patient-conversation__sidebar { position:sticky; top:1.25rem; display:grid; gap:1rem; } +.patient-conversation__compose,.patient-conversation__actions { overflow:hidden; } +.patient-conversation__compose-form { display:grid; gap:.9rem; padding:1.1rem 1.3rem 1.3rem; } +.patient-conversation__compose-form .form-group { margin:0; } +.patient-conversation__compose-form textarea { min-height:150px; resize:vertical; } +.patient-conversation__send { width:100%; } +.patient-conversation__actions-body { display:grid; gap:.75rem; padding:1.1rem 1.3rem 1.2rem; } +.patient-conversation__deleted-link { width:100%; } +.patient-conversation__stats { margin:0; color:var(--cp-muted); font-size:.78rem; line-height:1.6; } +.patient-conversation__stats strong { color:var(--cp-ink); } + +.patient-conversation__empty { min-height:230px; border:1px dashed var(--cp-border-2); border-radius:var(--r-md); background:var(--cp-surface); } +.patient-conversation__empty h3 { margin:0; color:var(--cp-ink-2); font-family:var(--font-display); font-size:1.5rem; text-transform:uppercase; } +.patient-conversation__empty p { margin:0; color:var(--cp-muted); font-size:.85rem; } + +@media (max-width:900px) { + .patient-conversation__layout { grid-template-columns:1fr; } + .patient-conversation__sidebar { position:static; } +} +@media (max-width:640px) { + .patient-conversation__header { align-items:flex-start; flex-direction:column; } + .patient-conversation__back { align-self:flex-start; width:auto; } + .patient-conversation__info-grid { grid-template-columns:1fr; padding:1rem; } + .patient-conversation__panel-header { padding-right:1rem; padding-left:1rem; } + .patient-message__header { align-items:flex-start; flex-direction:column; } + .patient-message__actions { width:100%; justify-content:space-between; } + .patient-message__body { padding:.9rem; } + .patient-conversation__compose-form,.patient-conversation__actions-body { padding-right:1rem; padding-left:1rem; } + .patient-conversation__reply-actions .btn { flex:1 1 140px; } +} + +/* ============================================================ + ADMIN — SYSTEM-LOGS + An den zentralen style.css-Bereich anhangen. + ============================================================ */ +.admin-logs { + width: 100%; + max-width: none; + margin: 0; +} + +.admin-logs__header { + margin: 0 0 1.35rem; +} + +.admin-logs__header .kicker { + margin-bottom: .55rem; +} + +.admin-logs__header .page-title { + margin-bottom: .45rem; +} + +.admin-logs__header .page-subtitle { + margin: 0; +} + +.admin-logs__panel { + width: 100%; + overflow: hidden; +} + +.admin-logs__panel-header { + display: flex; + align-items: flex-start; + justify-content: space-between; + gap: 1rem; + padding: 1rem 1.35rem; + border-bottom: 1px solid var(--cp-border); + background: var(--cp-surface-2); +} + +.admin-logs__panel-header h2 { + margin: 0; + color: var(--cp-ink); + font-size: 1rem; + font-weight: 800; +} + +.admin-logs__panel-header p { + margin: .2rem 0 0; + color: var(--cp-muted); + font-size: .8rem; +} + +.admin-logs__panel-header > .material-icons { + flex: 0 0 auto; + color: var(--cp-teal); + font-size: 1.3rem; +} + +.admin-logs__filters { + display: grid; + grid-template-columns: minmax(150px, .34fr) minmax(240px, 1fr) auto; + align-items: end; + gap: 1rem; + padding: 1.2rem 1.35rem; + border-bottom: 1px solid var(--cp-border); + background: var(--cp-surface); +} + +.admin-logs__filters .form-group { + min-width: 0; + margin: 0; +} + +.admin-logs__filter-actions { + display: flex; + align-items: flex-end; + gap: .55rem; +} + +.admin-logs__filter-actions .btn { + min-width: 110px; +} + +.admin-logs__table-wrap { + overflow-x: auto; + border: 0; + border-radius: 0; +} + +.admin-logs__table { + min-width: 680px; + table-layout: fixed; +} + +.admin-logs__table thead th { + padding: .8rem 1rem; + color: var(--cp-muted); + font-size: .7rem; + letter-spacing: .07em; + text-transform: uppercase; + white-space: nowrap; +} + +.admin-logs__table thead th:nth-child(1) { width: 225px; } +.admin-logs__table thead th:nth-child(2) { width: 125px; } + +.admin-logs__table tbody tr { + border-bottom: 1px solid var(--cp-border); + transition: background var(--ease); +} + +.admin-logs__table tbody tr:last-child { + border-bottom: 0; +} + +.admin-logs__table tbody tr:hover { + background: var(--cp-surface-2); +} + +.admin-logs__table tbody td { + padding: .78rem 1rem; + vertical-align: top; +} + +.admin-logs__row--info { background: #f6faf7; } +.admin-logs__row--warning { background: #fff8e6; } +.admin-logs__row--error { background: #fff4f3; } +.admin-logs__row--critical { background: #ffe8ef; } + +.admin-logs__time { + color: var(--cp-muted); + font-size: .78rem; + white-space: nowrap; +} + +.admin-logs__level { + white-space: nowrap; +} + +.admin-logs__level-badge { + display: inline-flex; + align-items: center; + min-height: 1.65rem; + padding: .2rem .55rem; + border: 1px solid transparent; + border-radius: 999px; + font-size: .72rem; + font-weight: 800; + line-height: 1; +} + +.admin-logs__level-badge--info { + color: #087b7c; + border-color: rgba(8, 123, 124, .22); + background: #e5f5f3; +} + +.admin-logs__level-badge--warning { + color: #956300; + border-color: rgba(149, 99, 0, .25); + background: #fff1c7; +} + +.admin-logs__level-badge--error { + color: #b52e48; + border-color: rgba(197, 53, 82, .25); + background: #fde6e9; +} + +.admin-logs__level-badge--critical { + color: #8e2443; + border-color: rgba(142, 36, 67, .28); + background: #f8d8e2; +} + +.admin-logs__level-badge--unknown { + color: var(--cp-muted); + border-color: var(--cp-border); + background: var(--cp-surface-2); +} + +.admin-logs__message { + color: var(--cp-ink-2); + line-height: 1.5; + overflow-wrap: anywhere; + white-space: pre-wrap; +} + +.admin-logs__empty { + display: grid; + justify-items: center; + gap: .35rem; + padding: 2.5rem 1.25rem; + color: var(--cp-muted); + text-align: center; +} + +.admin-logs__empty .material-icons { + margin-bottom: .2rem; + color: var(--cp-teal); + font-size: 2rem; +} + +.admin-logs__empty strong { + color: var(--cp-ink); + font-size: .9rem; +} + +.admin-logs__empty span:last-child { + font-size: .8rem; +} + +.admin-logs__footer { + display: flex; + align-items: flex-start; + gap: .45rem; + padding: .85rem 1.35rem 1rem; + border-top: 1px solid var(--cp-border); + color: var(--cp-muted); + font-size: .78rem; + line-height: 1.45; +} + +.admin-logs__footer .material-icons { + flex: 0 0 auto; + margin-top: .05rem; + color: var(--cp-blue); + font-size: 1rem; +} + +@media (max-width: 720px) { + .admin-logs__filters { + grid-template-columns: 1fr; + align-items: stretch; + } + + .admin-logs__filter-actions, + .admin-logs__filter-actions .btn { + width: 100%; + } + + .admin-logs__table { + min-width: 620px; + } + + .admin-logs__table thead th:nth-child(1) { + width: 190px; + } + + .admin-logs__panel-header, + .admin-logs__filters, + .admin-logs__footer { + padding-right: 1rem; + padding-left: 1rem; + } +} + +/* ============================================================ + BERATUNG — DASHBOARD + An den zentralen style.css-Bereich anhangen. + ============================================================ */ +.beratung-dashboard { width:100%; max-width:none; margin:0; } +.beratung-dashboard__header { margin:0 0 1.35rem; } +.beratung-dashboard__header .kicker { margin-bottom:.55rem; } +.beratung-dashboard__header .page-title { margin-bottom:.45rem; } +.beratung-dashboard__header .page-subtitle { margin:0; } + +.beratung-filter { margin-bottom:1.25rem; overflow:hidden; } +.beratung-filter__header { + display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; + padding:1rem 1.35rem; border-bottom:1px solid var(--cp-border); background:var(--cp-surface-2); +} +.beratung-filter__header h2 { margin:0; color:var(--cp-ink); font-size:1rem; font-weight:800; } +.beratung-filter__header p { margin:.2rem 0 0; color:var(--cp-muted); font-size:.8rem; } +.beratung-filter__header > .material-icons { color:var(--cp-teal); font-size:1.3rem; } +.beratung-filter__body { + display:grid; + grid-template-columns:180px 220px auto minmax(320px,1fr); + align-items:end; + gap:1rem; + padding:1.15rem 1.35rem 1.25rem; +} +.beratung-filter__body .form-group { min-width:0; margin:0; } +.beratung-filter__field--date { max-width:220px; } +.beratung-filter__field--code { max-width:270px; } +.beratung-filter__actions { display:grid; gap:.45rem; margin:0; } +.beratung-filter__action-label { display:block; min-height:18px; color:var(--cp-ink-2); font-size:.875rem; font-weight:600; line-height:18px; } +.beratung-filter__action-buttons { display:flex; flex-wrap:nowrap; gap:.5rem; } +.beratung-filter__action-buttons .btn { min-height:42px; } +.beratung-filter__checks { + display:flex; + align-items:stretch; + justify-content:flex-end; + gap:.55rem; + min-height:42px; +} +.beratung-check { + display:grid; + grid-template-columns:auto 1fr; + align-items:center; + gap:.5rem; + min-width:160px; + padding:.45rem .65rem; + border:1px solid var(--cp-border); + border-radius:var(--r-sm); + color:var(--cp-ink-2); + background:var(--cp-surface-2); + font-size:.75rem; + line-height:1.3; + cursor:pointer; + transition:border-color var(--ease), background var(--ease), box-shadow var(--ease); +} +.beratung-check:hover { border-color:rgba(8,123,124,.35); background:#e1f1f3; } +.beratung-check:has(input:checked) { border-color:rgba(8,123,124,.38); background:#e1f4f1; box-shadow:inset 3px 0 0 var(--cp-teal); } +.beratung-check input { width:1rem; height:1rem; accent-color:var(--cp-teal); } +.beratung-check strong { display:block; color:var(--cp-ink); font-weight:800; } + +.beratung-appointments { width:100%; } +.beratung-appointments__toolbar { display:flex; align-items:center; min-height:42px; margin:0 0 .7rem; } +.beratung-appointments__table { position:relative; overflow:hidden; } +.beratung-table { min-width:980px; table-layout:fixed; } +.beratung-table thead th { padding:.8rem .9rem; } +.beratung-table thead th:nth-child(1) { width:10%; } +.beratung-table thead th:nth-child(2) { width:12%; } +.beratung-table thead th:nth-child(3) { width:11%; } +.beratung-table thead th:nth-child(4) { width:42%; } +.beratung-table thead th:nth-child(5) { width:13%; } +.beratung-table thead th:nth-child(6) { width:12%; } +.beratung-table tbody td { padding:.78rem .9rem; vertical-align:middle; } +.beratung-table__code { color:var(--cp-teal) !important; font-weight:800; letter-spacing:.04em; } +.beratung-table__time { color:var(--cp-ink) !important; font-weight:700; white-space:nowrap; } +.beratung-table__consultant { color:var(--cp-muted); font-size:.78rem; } + +.status-navigation-cell { min-width:430px; } +.status-nav-container { + display:grid; + grid-template-columns:minmax(88px,1fr) minmax(205px,1.55fr) minmax(88px,1fr); + align-items:center; + gap:.55rem; + width:100%; + max-width:510px; + margin:0 auto; +} +.status-nav__current { + display:grid; + justify-items:center; + gap:.22rem; + min-width:0; +} +.status-nav__eyebrow { + color:var(--cp-muted); + font-size:.61rem; + font-weight:800; + letter-spacing:.08em; + line-height:1; + text-transform:uppercase; +} +.status-arrow { + display:inline-flex; + align-items:center; + justify-content:center; + gap:.25rem; + min-height:30px; + padding:.3rem .48rem; + border:1px solid rgba(8,123,124,.3); + border-radius:var(--r-sm); + color:var(--cp-teal); + background:rgba(8,123,124,.08); + cursor:pointer; + font-size:.68rem; + font-weight:800; + line-height:1; + white-space:nowrap; + transition:background var(--ease), border-color var(--ease), color var(--ease), transform var(--ease), opacity var(--ease); +} +.status-arrow:hover:not(:disabled) { color:#fff; background:var(--cp-teal); border-color:var(--cp-teal); transform:translateY(-1px); } +.status-arrow:disabled, .status-arrow.disabled { opacity:.3; cursor:not-allowed; } +.status-arrow.saving { opacity:.55; pointer-events:none; animation:beratung-pulse .8s ease-in-out infinite alternate; } +.status-arrow .material-icons { font-size:1.05rem; } +.status-arrow__label { font-size:.67rem; } +.status-text { + display:inline-flex; + align-items:center; + justify-content:center; + gap:.3rem; + width:100%; + min-width:0; + min-height:30px; + padding:.34rem .55rem; + border:1px solid transparent; + border-radius:999px; + font-size:.75rem; + font-weight:800; + line-height:1.25; + text-align:center; + white-space:nowrap; +} +.status-text__icon { font-size:.8rem; line-height:1; } +.status-noch_nicht_erschienen { color:#7a4300; border-color:#e4a62a; background:#ffd36a; box-shadow:0 2px 7px rgba(214,145,0,.18); } +.status-fuellt_fragebogen_aus { color:#075879; border-color:#55b9dc; background:#9cdef3; box-shadow:0 2px 7px rgba(37,150,190,.18); } +.status-bereit_fuer_beratung { color:#075f60; border-color:#39b9a8; background:#8de1d4; box-shadow:0 2px 7px rgba(8,123,124,.18); } +.status-in_beratung { color:#4b3588; border-color:#a995e8; background:#c9baf7; box-shadow:0 2px 7px rgba(95,74,155,.18); } +.status-beratung_beendet { color:#3f535e; border-color:#9eafb8; background:#cbd8dd; box-shadow:0 2px 7px rgba(82,107,123,.16); } +.status-is-changing { animation:beratung-status-change .25s ease-out; } +@keyframes beratung-status-change { 50% { transform:scale(1.04); } } +@keyframes beratung-pulse { from { opacity:.45; } to { opacity:.9; } } + +.overview-btn, +.beratung-overview-btn { + display:inline-flex; align-items:center; justify-content:center; gap:.4rem; min-height:34px; + padding:.42rem .78rem; border:1px solid #087b7c; border-radius:var(--r-sm); + color:#075f60; background:#b9eee7; box-shadow:0 2px 7px rgba(8,123,124,.14); + font-size:.76rem; font-weight:800; line-height:1.2; text-decoration:none; white-space:nowrap; + transition:background var(--ease), border-color var(--ease), color var(--ease), transform var(--ease), box-shadow var(--ease); +} +.overview-btn:hover, +.beratung-overview-btn:hover { color:#fff; background:#087b7c; border-color:#087b7c; box-shadow:0 5px 12px rgba(8,123,124,.24); transform:translateY(-1px); } +.overview-btn:focus-visible, +.beratung-overview-btn:focus-visible { outline:3px solid rgba(82,224,207,.5); outline-offset:2px; } +.overview-btn .material-icons, +.beratung-overview-btn .material-icons { font-size:1rem; } +.overview-btn.disabled, +.overview-btn.is-disabled, +.overview-btn[aria-disabled="true"], +.beratung-overview-btn.disabled, +.beratung-overview-btn.is-disabled, +.beratung-overview-btn[aria-disabled="true"] { + color:var(--cp-muted); border-color:var(--cp-border); background:var(--cp-surface-2); + box-shadow:none; cursor:not-allowed; opacity:.65; +} +.overview-btn.disabled:hover, +.overview-btn.is-disabled:hover, +.overview-btn[aria-disabled="true"]:hover, +.beratung-overview-btn.disabled:hover, +.beratung-overview-btn.is-disabled:hover, +.beratung-overview-btn[aria-disabled="true"]:hover { + color:var(--cp-muted); background:var(--cp-surface-2); border-color:var(--cp-border); transform:none; +} + +.beratung-table-loader { display:flex; align-items:center; justify-content:center; gap:.55rem; padding:1rem; border-top:1px solid var(--cp-border); color:var(--cp-muted); font-size:.82rem; background:var(--cp-surface-2); } +.beratung-table-loader .material-icons { color:var(--cp-teal); animation:beratung-spin 1s linear infinite; } +@keyframes beratung-spin { to { transform:rotate(360deg); } } +.beratung-table-empty td, .beratung-table-error td { padding:2rem 1rem !important; color:var(--cp-muted); text-align:center; } +.beratung-table-error td { color:var(--cp-coral); } +#dashboard-tbody.is-loading { opacity:.55; transition:opacity var(--ease); } + +/* Pagination: aktive Seite im Beratungsbereich deutlich markieren. */ +.beratung-appointments__toolbar .pagination .active, +.beratung-appointments__toolbar .pagination .is-current, +.beratung-appointments__toolbar .pagination [aria-current="page"] { + color:#fff; + border-color:#087b7c; + background:#087b7c; + box-shadow:0 3px 9px rgba(8,123,124,.22); + font-weight:800; +} +.beratung-appointments__toolbar .pagination a.is-current:hover, +.beratung-appointments__toolbar .pagination [aria-current="page"]:hover { + color:#fff; + background:#05696a; + border-color:#05696a; +} + +@media (max-width:1100px) { + .beratung-filter__body { grid-template-columns:180px 220px 1fr; align-items:end; } + .beratung-filter__field--date, .beratung-filter__field--code { max-width:none; } + .beratung-filter__checks { grid-column:1 / -1; justify-content:flex-start; } +} +@media (max-width:720px) { + .beratung-filter__body { grid-template-columns:1fr; padding-right:1rem; padding-left:1rem; } + .beratung-filter__actions, .beratung-filter__checks { grid-column:auto; } + .beratung-filter__action-buttons, .beratung-filter__action-buttons .btn { width:100%; } + .beratung-filter__action-buttons { flex-wrap:wrap; } + .beratung-filter__action-buttons .btn { flex:1 1 160px; } + .beratung-filter__checks { align-items:stretch; flex-direction:column; } + .beratung-check { min-width:0; } + .beratung-filter__header { padding-right:1rem; padding-left:1rem; } + .beratung-table { min-width:900px; } +} + +/* ============================================================ + BERATUNG — PATIENT:INNENÜBERSICHT + Seitenbezogene Ergänzungen für beratung_patient.html + ============================================================ */ + +.bp-patient-layout { + display:grid; + grid-template-columns:minmax(0, 1fr) minmax(360px, .78fr); + align-items:start; + gap:1.15rem; + width:100%; + max-width:1500px; +} + +.bp-patient-layout__main, +.bp-patient-layout__questionnaire { + min-width:0; +} + +.bp-patient-layout__main { + display:flex; + flex-direction:column; + gap:1.15rem; +} + +.bp-patient-layout__questionnaire { + position:sticky; + top:1rem; + max-height:calc(100vh - 2rem); + overflow:auto; + scrollbar-width:thin; +} + +.bp-headline-row { + display:flex; + align-items:center; + justify-content:space-between; + gap:1rem; + margin-bottom:1.2rem; +} + +.bp-headline { + display:flex; + align-items:center; + gap:.55rem; + color:var(--cp-ink); + font-size:1.25rem; + font-weight:600; +} + +.bp-headline strong { color:var(--cp-teal); } +.bp-headline-icon { color:var(--cp-teal); font-size:1.45rem; } + +.bp-back-link { + display:inline-flex; + align-items:center; + justify-content:center; + gap:.4rem; + min-height:2.35rem; + padding:.5rem .85rem; + border:1px solid rgba(82,224,207,.28); + border-radius:var(--r-sm); + color:var(--cp-teal); + background:rgba(82,224,207,.08); + font-size:.8rem; + font-weight:800; + white-space:nowrap; + transition:background var(--ease), border-color var(--ease), transform var(--ease); +} +.bp-back-link:hover { + background:rgba(82,224,207,.16); + border-color:rgba(82,224,207,.55); + transform:translateX(-2px); +} +.bp-back-link .material-icons { font-size:1.05rem; } + +.bp-top-grid { + display:flex; + flex-direction:column; + gap:1.15rem; + margin:0; +} + +.bp-card { + min-width:0; + overflow:hidden; + border:1px solid var(--cp-border); + border-radius:var(--r-lg); + background:var(--cp-surface); + box-shadow:var(--shadow-sm); +} + +.bp-card-header { + display:flex; + align-items:center; + gap:.6rem; + min-height:3.1rem; + padding:.8rem 1rem; + border-bottom:1px solid var(--cp-border); + background:var(--cp-surface-2); +} +.bp-card-header h3 { color:var(--cp-ink); font-size:1rem; font-weight:800; } +.bp-card-icon { flex:0 0 auto; color:var(--cp-teal); font-size:1.2rem; } +.bp-card-body { padding:1rem; } +.bp-card-header--amber { background:rgba(251,191,36,.1); } +.bp-card-header--amber .bp-card-icon { color:#fbbf24; } +.bp-card-header--teal { background:rgba(82,224,207,.1); } +.bp-card-header--clickable { cursor:pointer; } + +.bp-card--summary .bp-card-header { + align-items:center; + flex-wrap:wrap; +} +.bp-card--summary .bp-card-header > div:first-of-type { + display:flex; + align-items:center; + gap:.5rem; +} +.bp-fontsize-controls { margin-left:auto; } +.bp-fontsize-btn { + min-width:1.8rem; + min-height:1.8rem; + padding:.15rem .35rem; + border:1px solid var(--cp-border-2); + border-radius:var(--r-sm); + color:var(--cp-ink-2); + background:var(--cp-surface); + cursor:pointer; + font-size:.75rem; + font-weight:800; +} +.bp-fontsize-btn:hover, +.bp-fontsize-btn.active { color:#07182e; background:var(--cp-teal); border-color:var(--cp-teal); } + +.bp-view-toggle { + display:inline-flex !important; + margin-left:auto !important; + border-color:var(--cp-border-2) !important; +} +.bp-toggle-btn { + padding:.35rem .6rem !important; + color:var(--cp-ink-2) !important; + background:var(--cp-surface) !important; + font-size:.72rem; +} +.bp-toggle-btn.active, +.bp-toggle-btn:hover { color:#07182e !important; background:var(--cp-teal) !important; } +.bp-toggle-btn .material-icons { font-size:1rem !important; vertical-align:middle; } + +.bp-summary-grid { + display:grid; + gap:.2rem; +} +.bp-sum-row { + display:grid; + grid-template-columns:1.2rem minmax(115px, .34fr) minmax(0, 1fr); + align-items:start; + gap:.6rem; + padding:.58rem .35rem; + border-bottom:1px solid rgba(255,255,255,.06); +} +.bp-sum-row:last-child { border-bottom:0; } +.bp-sum-icon { color:var(--cp-teal); font-size:1rem; } +.bp-sum-label { color:var(--cp-muted); font-size:.75rem; font-weight:800; } +.bp-sum-value { min-width:0; color:var(--cp-ink-2); font-size:.82rem; line-height:1.45; } +.bp-sum-value--quote { font-style:italic; } +.bp-tag { + display:inline-flex; + margin:0 .25rem .2rem 0; + padding:.18rem .45rem; + border:1px solid rgba(255,255,255,.12); + border-radius:999px; + color:var(--cp-ink); + background:var(--cp-surface-2); + font-size:.72rem; +} +.bp-tag--teal { color:#07182e; border-color:var(--cp-teal); background:var(--cp-teal); } +.bp-tag--blue { color:#e8f7ff; border-color:#2596be; background:rgba(37,150,190,.42); } +.bp-tag--amber { color:#fff5d2; border-color:#d69a21; background:rgba(214,154,33,.35); } +.bp-tag--purple { color:#f0eaff; border-color:#917de0; background:rgba(145,125,224,.32); } +.bp-risk-badge, +.bp-symptom-badge { + display:inline-flex; + align-items:center; + padding:.2rem .48rem; + border-radius:999px; + font-size:.7rem; + font-weight:800; +} +.bp-risk--red, +.bp-symptom-badge--yes { color:#ffe9ed; background:rgba(240,74,103,.28); } +.bp-risk--green, +.bp-symptom-badge--no { color:#d8fff8; background:rgba(82,224,207,.22); } +.bp-risk--amber { color:#fff1c7; background:rgba(251,191,36,.25); } +.bp-sum-detail { display:block; margin-top:.25rem; color:var(--cp-muted); font-size:.7rem; } +.bp-empty-state { display:flex; align-items:center; gap:.55rem; color:var(--cp-muted); font-size:.82rem; } + +.bp-card--hints { border-color:rgba(251,191,36,.28); } +.bp-hints-list { display:grid; gap:.55rem; list-style:none; } +.bp-hints-list li { display:flex; align-items:flex-start; gap:.4rem; color:#fce9b4; font-size:.8rem; line-height:1.45; } +.bp-hint-bullet { flex:0 0 auto; color:#fbbf24; font-size:1rem; } + +.bp-test-grid { + display:grid; + grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); + gap:.55rem; +} +.bp-test-item { + display:grid; + grid-template-columns:auto 1fr auto; + align-items:center; + gap:.45rem; + min-width:0; + padding:.65rem .7rem; + border:1px solid var(--cp-border); + border-radius:var(--r-sm); + color:var(--cp-ink-2); + background:var(--cp-surface-2); + cursor:grab; + transition:border-color var(--ease), background var(--ease), transform var(--ease); +} +.bp-test-item:hover { border-color:rgba(82,224,207,.42); background:rgba(82,224,207,.09); transform:translateY(-1px); } +.bp-test-item.dragging { opacity:.55; } +.bp-test-item input { position:absolute; opacity:0; pointer-events:none; } +.bp-test-check { + display:grid; + place-items:center; + width:1rem; + height:1rem; + border:1px solid var(--cp-border-2); + border-radius:.25rem; + background:var(--cp-surface); +} +.bp-test-item input:checked + .bp-test-check { border-color:var(--cp-teal); background:var(--cp-teal); box-shadow:inset 0 0 0 3px var(--cp-surface-2); } +.bp-test-name { min-width:0; color:var(--cp-ink); font-size:.76rem; line-height:1.3; } +.bp-test-price { color:var(--cp-teal); font-size:.72rem; font-weight:800; white-space:nowrap; } +.bp-assigned-container { margin-top:1rem; } + +.bp-actions-bar { margin:0; } +.bp-actions-form { display:flex; flex-wrap:wrap; gap:.65rem; } +.bp-actions-form .icon-action-btn { display:inline-flex; align-items:center; gap:.4rem; } + +.bp-card--questionnaire { overflow:hidden; } +.bp-collapsible-toggle { + display:block; + width:100%; + padding:0; + border:0; + color:inherit; + background:transparent; + text-align:left; +} +.bp-collapsible-toggle:focus-visible { outline-offset:-3px; } +.bp-collapsible-toggle .bp-card-header { justify-content:flex-start; } +.bp-collapsible-toggle h3 { flex:1; } +.bp-collapse-arrow { margin-left:auto; color:var(--cp-teal); transition:transform var(--ease); } +.bp-collapsible-toggle[aria-expanded="true"] .bp-collapse-arrow { transform:rotate(180deg); } +.bp-collapsible-body { + max-height:0; + overflow:hidden; + transition:max-height .28s ease; +} +.bp-collapsible-body.open { max-height:none; } +.bp-q-group { padding:1rem; border-bottom:1px solid var(--cp-border); } +.bp-q-group:last-child { border-bottom:0; } +.bp-q-group-title { + display:flex; + align-items:center; + gap:.45rem; + margin-bottom:.7rem; + color:var(--cp-teal); + font-size:.83rem; + font-weight:800; +} +.bp-q-group-title > .material-icons { font-size:1.05rem; } +.bp-q-group-title .bp-symptom-badge { margin-left:auto; } +.bp-q-grid { + display:grid; + grid-template-columns:repeat(2, minmax(0, 1fr)); + gap:.55rem; +} +.bp-q-field { + display:grid; + align-content:start; + gap:.2rem; + min-width:0; + padding:.55rem .65rem; + border:1px solid rgba(255,255,255,.06); + border-radius:var(--r-sm); + background:rgba(255,255,255,.025); +} +.bp-q-field--wide { grid-column:1 / -1; } +.bp-q-label { color:var(--cp-muted); font-size:.68rem; font-weight:800; } +.bp-q-value { color:var(--cp-ink-2); font-size:.76rem; overflow-wrap:anywhere; } +.bp-q-value--alert { color:#ffb4c1; font-weight:800; } +.bp-q-value--hoch, +.bp-q-value--hoch_risiko { color:#ffb4c1; font-weight:800; } + +@media (max-width:1120px) { + .bp-patient-layout { grid-template-columns:minmax(0, 1fr) minmax(320px, .68fr); } + .bp-q-grid { grid-template-columns:1fr; } + .bp-q-field--wide { grid-column:auto; } +} + +@media (max-width:820px) { + .bp-patient-layout { display:flex; flex-direction:column; gap:1.15rem; } + .bp-patient-layout__main { display:contents; } + .bp-patient-layout__questionnaire { order:2; position:static; max-height:none; overflow:visible; } + .bp-top-grid { order:0; } + .bp-card--tests { order:1; } + .bp-actions-bar { order:3; } + .bp-headline-row { align-items:flex-start; } +} + +@media (max-width:560px) { + .bp-headline-row { flex-direction:column; gap:.7rem; } + .bp-back-link { align-self:flex-start; } + .bp-card-header { padding:.75rem .8rem; } + .bp-card-body { padding:.8rem; } + .bp-sum-row { grid-template-columns:1.1rem 1fr; } + .bp-sum-value { grid-column:2; } + .bp-card--summary .bp-card-header > div:first-of-type, + .bp-fontsize-controls, + .bp-view-toggle { margin-left:0 !important; } + .bp-view-toggle { width:100%; } + .bp-toggle-btn { flex:1; } + .bp-actions-form .icon-action-btn { width:100%; justify-content:center; } +} + +@media (prefers-reduced-motion: reduce) { + .bp-collapsible-body, + .bp-collapse-arrow, + .bp-back-link, + .bp-test-item { transition:none; } +} diff --git a/VAULT/hinunher/vor-ort-arbeit-mockup.html b/VAULT/hinunher/vor-ort-arbeit-mockup.html new file mode 100644 index 0000000..8e89554 --- /dev/null +++ b/VAULT/hinunher/vor-ort-arbeit-mockup.html @@ -0,0 +1,138 @@ + + + + + + Vor-Ort-Arbeit – App-Mockup + + + + +
+

Interaktiver Look-&-Feel-Mockup: Die Beispielansicht zeigt die Mitglieder-Startseite im mobilen Format sowie darunter die Team-Verwaltung. Links und Buttons sind bewusst als semantische HTML-Elemente angelegt; produktive Daten und Funktionen sind noch nicht implementiert.

+ +
+
11:17●●● 5G ▰
+
+ +
Vor-Ort-ArbeitTeam Café Bach
+ +
+
+

Start · Montag, 17. August

+

Guten Morgen,
Chrystal!

+

Hier ist, was heute für dich und dein Team wichtig ist.

+ + +
DRINGEND
+

Heute wird noch ein Springer gesucht

+

Abenddienst · 18:00–22:00 · Café Bach

+ Offene Position ansehen + + + +
NÄCHSTER EINSATZ
+

Beratung & Empfang

+

Mittwoch, 19. August · 16:00–20:00

+ Einteilung öffnen + + + +
AKTION
+

4 Termine sind noch offen

+

Bitte teile deine Verfügbarkeit für September mit.

+ Verfügbarkeit angeben + + + +
INFO3
+

Neue Nachrichten im Teamchat

+

Team · 3 ungelesene Nachrichten

+ Chat öffnen + +
+ +
+ +
+

Team-Verwaltung

+
+
Vor-Ort-ArbeitOrganisation · AIDS Hilfe Köln
+
+ +
+

/team/cafe-bach/manage/

+

Übersicht

+

Was deine Team-Verwaltung heute braucht.

+
+
1Unterbesetzter Einsatz heute
+
6Fehlende Verfügbarkeiten
+
2Dokumente warten auf Freigabe
+
3Offene Einladungen
+
2Unbesetzte Positionen
+
12Aktive Teammitglieder
+
+
+
+
+
+ + +
+ + \ No newline at end of file