/* ═══════════════════════════════════════════════════════════════════════════ Taktwerk-Engine — Termine. Gestaltung für ZWEI Seiten aus einem System: Patient (Handy, oft mit Schmerzen, will schnell einen Termin) und Praxis (täglich, will auf einen Blick sehen was zu entscheiden ist). Farben: Tiefes Kiefern-Tinte + Jade als Identität, Bernstein AUSSCHLIESSLICH als Signal „wartet auf Entscheidung". Alle Paare gegen WCAG AA gerechnet (Skript, nicht geschätzt) — Werte siehe Protokoll 05.08.2026. Marke ist bewusst in EINEM Block gekapselt: sobald die Praxis eine echte Marke hat, wird nur :root ausgetauscht, nichts anderes. Hell/Dunkel (06.08.): --tinte/--jade/--signal bleiben über beide Themen KONSTANT — sie tragen auch die Rolle „farbige Fläche mit weißer Schrift" (Kopfzeile, Seitenleiste, Haupt-Knopf, Plaketten), und ein Umfärben würde genau dort die Lesbarkeit brechen. Für die GEGENTEILIGE Rolle — Text/Icon AUF einer hellen Fläche — gibt es eigene, je Thema unterschiedliche Varianten (--text, --jade-text, --signal-text); --rot/--nebel/--rand/ --linnen/--karte/--*-fl haben nur diese eine Rolle und werden direkt überschrieben. Jedes neue Textpaar erst gegen [[kontrastmessung-drei-eichproben]]-Art Skript rechnen (WCAG AA, 4.5:1), nicht schätzen — siehe scratchpad `kontrast.js` dieser Sitzung für die Werte unten. ═══════════════════════════════════════════════════════════════════════════ */ @font-face { font-family: 'Inter'; src: url('/schrift/Inter-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('/schrift/Inter-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Inter'; src: url('/schrift/Inter-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'InterDisplay'; src: url('/schrift/InterDisplay-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } :root { /* ── RÜCKFALLWERTE der Rollen ──────────────────────────────────────── 🔴 Seit dem 18.08.2026 setzt `lib/marke.js` diese Rollen JE MANDANT aus dem gewählten Schema; der eingesetzte Block steht in jeder Auslieferung hinter dieser Datei und gewinnt deshalb. Was hier steht, ist der Rückfall für den Fall, dass die Datei einmal ohne diesen Block betrachtet wird — es sind die Werte des Standardschemas `taktwerk`, helle Tönung, wie sie die erste Praxis benutzt hat. ⚠️ --marke ist HELL (2,17:1) = Logo-/Zierfarbe, NIE Bedeutungsträger. Alles Bedeutsame trägt --jade (5,89:1 gegen --karte). ── */ --marke: #58BFC7; --tinte: #22343A; --jade: #0C6F79; --jade-fl: #E3F4F6; --signal: #8A4F08; --signal-fl: #FAEEDA; --rot: #A4322A; --rot-fl: #FBE9E7; --linnen: #EFF5F6; --karte: #FFFFFF; --nebel: #4F656B; --rand: #D2E4E7; --rand-kraeftig: #6E97A0; /* Text-/Icon-Varianten der drei Flächenfarben (s. Kommentar oben) — im Hellen identisch zur Flächenfarbe, im Dunklen unten eigens gesetzt. */ --text: var(--tinte); --jade-text: var(--jade); --signal-text: var(--signal); /* ── Schriftfarbe AUF einer Akzentflaeche ──────────────────────────────── Bis zum 18.08.2026 stand an rund einem Dutzend Stellen schlicht #fff. Das trug, solange der Akzent immer dasselbe dunkle Tuerkis war. Seit die Engine sieben Erscheinungsbilder kennt (lib/marke.js), traegt es nicht mehr: Auf Butter Yellow (#FFF275) ist Weiss mit 1,15:1 unlesbar. Deshalb bringt jedes Schema seinen GEMESSENEN Partner mit; der Wert hier ist der Rueckfall fuer den Fall, dass diese Datei einmal ohne den eingesetzten Block betrachtet wird. */ --akz-schrift: #FFFFFF; /* Vom Layout gesetzt (lib/marke.js): Terminal schreibt Versalien mit Sperrung und Monospace, Standard und Milchglas nicht. */ --vers: none; --sp: .02em; --mono: 'Inter', system-ui, sans-serif; --anzeige: 'InterDisplay', 'Inter', system-ui, sans-serif; --text-schrift: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --r-klein: 8px; --r: 12px; --r-gross: 18px; --schatten: 0 1px 2px rgba(34, 52, 58, .06), 0 8px 24px -12px rgba(34, 52, 58, .18); color-scheme: light; } /* ── Dunkles Thema — per Umschalter (theme.js), NICHT automatisch nach Systemfarbe (Praxis/Patient sollen bewusst wählen, kein Flackern beim Systemwechsel mitten in der Terminvergabe). Werte gegen WCAG AA gerechnet (Skript, s. Kommentar oben), nicht geschätzt: --text/--linnen 16,1:1 · --text/--karte 14,3:1 · --nebel/--karte 6,4:1 · --jade-text/--karte 8,8:1 · --signal-text/--karte 7,9:1 · --rot/--karte 6,5:1. ── */ :root[data-theme="dark"] { color-scheme: dark; --linnen: #0E1619; --karte: #172226; --nebel: #93A6AB; --rand: #2B383C; --rand-kraeftig: #5F7378; --text: #EAF2F3; --jade-fl: #113238; --jade-text: #5FD1C6; --signal-fl: #3A2712; --signal-text: #E7A94C; --rot-fl: #3A1613; --rot: #E98A82; --schatten: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px -12px rgba(0,0,0,.7); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--linnen); color: var(--text); font-family: var(--text-schrift); font-size: 17px; line-height: 1.5; -webkit-font-smoothing: antialiased; } /* ── Kopfzeile ─────────────────────────────────────────────────────────── */ .kopf { /* 🩸 Hier stand ein Verlauf mit der festen Zweitfarbe #2E4750. Sie war fuer EIN Schema gerechnet; bei Butter Yellow oder Emerald Ink waere sie ein grauer Fleck im falschen Farbkreis gewesen. Eine achte Farbe zu erfinden verbietet sich (die sieben sind gemessen), also traegt die Kopfzeile jetzt die Akzentflaeche flach — die Tiefe kommt aus Schatten und Rand. */ background: var(--tinte); color: var(--akz-schrift); padding: 14px 20px; display: flex; align-items: center; gap: 12px; } /* Praxis-Admin (admin.html): schmalere Kopfzeile, nur noch Marke + wer eingeloggt ist — die eigentliche Navigation lebt jetzt in der Seitenleiste darunter. */ .kopf.schmal { padding: 10px 20px; } .kopf.schmal .marke { font-size: 16px; } .kopf.schmal .marke img { height: 22px; } .kopf .marke { font-family: var(--anzeige); font-weight: 600; font-size: 19px; letter-spacing: -.02em; display: flex; align-items: center; gap: 9px; } /* Logo aus der Visitenkarte — Bitmap, deshalb bewusst klein gehalten */ .kopf .marke img { height: 28px; width: auto; display: block; } /* Emoji-Rückfall, wenn die Praxis kein eigenes Logo hinterlegt hat (lib/marke.js:markeHtml). Bewusst gleich hoch wie das Bild — sonst springt die Kopfzeile je nachdem, ob eine Datei da ist. */ .kopf .marke .marke-zeichen { font-size: 24px; line-height: 28px; display: block; } .kopf.schmal .marke .marke-zeichen { font-size: 19px; line-height: 22px; } .kopf .marke .zusatz { font-family: var(--text-schrift); font-weight: 400; font-size: 14px; opacity: .72; letter-spacing: 0; } /* Wrapper statt .rechts selbst: der Umschalter steht VOR #kopfRechts, dessen innerHTML app.js/admin.js beim Start komplett ersetzt (auch mit '' im abgemeldeten Zustand) — ein Knopf DARIN würde dabei verschwinden. */ .kopf .kopf-aktionen { margin-left: auto; display: flex; align-items: center; gap: 10px; } .kopf .rechts { display: flex; align-items: center; gap: 10px; font-size: 14px; } .kopf .rechts .wer { opacity: .8; } /* Die zwei Knöpfe oben rechts: Hell/Dunkel und der Optik-Würfel. Gleiche Gestalt, damit sie als Paar lesen. 🩸 20.08.2026 GEMESSEN: Der Knopf war 34×46 px statt der hier stehenden 34×34. Ursache ist NICHT der Flex-Kopf (der zieht bei `align-items:center` nicht), sondern die allgemeine Knopfregel weiter unten (`button, .knopf`, `min-height: 46px`): Eine Mindesthöhe schlägt eine Höhe. Deshalb steht hier beides — `height` allein wäre wirkungslos, und zwar lautlos. 🩸 Farben aus `currentColor` statt aus festem Weiß: Die Kopfleiste des Teambereichs trägt die AKZENTFLÄCHE der Praxis. Im Schema „Lime Spark", Tönung dunkel, ist das rgb(182,255,46) — ein weißes Zeichen darauf wäre praktisch unlesbar. `currentColor` ist die Schriftfarbe der Kopfleiste und damit per Bauart die Farbe, die auf ihr trägt (`--akz-schrift`, im Farbwerk je Schema gemessen). Das gilt auf heller wie auf dunkler Leiste. Welches Zeichen der Hell/Dunkel-Knopf zeigt, steht bewusst NICHT hier, sondern in `lib/marke.js` — nur dort ist die Tönung der Praxis bekannt. Gezeigt wird die AKTION, nicht der Zustand: im Dunklen die Sonne (→ wechselt zu hell), im Hellen der Mond (→ wechselt zu dunkel). */ .theme-toggle, .optik-wuerfel { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; min-height: 34px; flex: none; border-radius: 999px; border: 1px solid color-mix(in srgb, currentColor 32%, transparent); background: color-mix(in srgb, currentColor 10%, transparent); color: inherit; cursor: pointer; padding: 0; transition: background .15s ease, border-color .15s ease; } .theme-toggle:hover, .optik-wuerfel:hover { background: color-mix(in srgb, currentColor 22%, transparent); border-color: color-mix(in srgb, currentColor 55%, transparent); } .theme-toggle svg, .optik-wuerfel svg { width: 17px; height: 17px; display: block; } /* 🩸 [hidden] verliert gegen ein CSS `display:` — zweimal passiert, deshalb steht die Regel hier und NACH der obigen. */ .optik-wuerfel[hidden], .optik-hinweis[hidden] { display: none; } /* Der ruhige Hinweis neben dem Würfel: Er sagt, dass der Wurf praxisweit gilt, und nennt den Weg zurück beim Namen. Kein Warnkasten — es ist kein Fehler, sondern eine Änderung, die andere sehen. */ .optik-hinweis { display: inline-flex; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; font-size: 12.5px; line-height: 1.25; } .optik-hinweis .optik-wort { opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .optik-hinweis .optik-zurueck { border: 1px solid color-mix(in srgb, currentColor 32%, transparent); background: color-mix(in srgb, currentColor 10%, transparent); color: inherit; font: inherit; font-weight: 600; font-size: 12.5px; min-height: 26px; padding: 3px 10px; border-radius: 999px; cursor: pointer; white-space: nowrap; } .optik-hinweis .optik-zurueck:hover { background: color-mix(in srgb, currentColor 22%, transparent); } .huelle { max-width: 680px; margin: 0 auto; padding: 22px 16px 72px; } .huelle.breit { max-width: 940px; } h1 { font-family: var(--anzeige); font-weight: 600; font-size: 26px; letter-spacing: -.025em; margin: 0 0 6px; } h2 { font-family: var(--anzeige); font-weight: 600; font-size: 18px; letter-spacing: -.015em; margin: 30px 0 12px; } h2:first-child { margin-top: 0; } h3 { font-family: var(--anzeige); font-weight: 600; font-size: 15px; letter-spacing: -.01em; margin: 22px 0 8px; } .blass { color: var(--nebel); } .klein { font-size: 14px; } .fuehrung { color: var(--nebel); font-size: 15px; margin: 0 0 20px; } /* Abschnittsmarke: kleine Versalzeile über einem Block */ .marke-zeile { font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--nebel); margin: 0 0 8px; } .karte { background: var(--karte); border: 1px solid var(--rand); border-radius: var(--r-gross); padding: 20px; margin-bottom: 14px; } .karte.eng { padding: 15px; } /* ── Bedienelemente ────────────────────────────────────────────────────── */ label { display: block; font-size: 14px; font-weight: 600; margin: 14px 0 5px; } label:first-child { margin-top: 0; } /* 🩸 13.08.2026: `input:not([type])` ergänzt. Ein OHNE type-Attribut ist zwar ein Textfeld, traf aber keinen dieser Selektoren — es blieb bei der Browser-Standardbreite (~180px) mitten zwischen 100%-breiten Feldern. Betraf auch den älteren Dialog „Kunde anlegen" (Vor-/Nachname) im Kalender, dort war es nur nie aufgefallen. Beim Bau des CRM im Screenshot gesehen. */ input:not([type]), input[type=text], input[type=email], input[type=password], input[type=tel], /* 🩸 14.08.2026 ergänzt: `search` fehlte in dieser Liste. Die drei Suchfelder (Kalender, CRM, Protokolle) trugen deshalb Browser-Standard statt Hausstil — in allen dreien war das mit einem eigenen Inline-`style` überklebt worden. Dreimal derselbe Behelf ist das Zeichen, dass die Regel fehlt, nicht dass der Behelf richtig ist. */ input[type=search], input[type=datetime-local], input[type=date], input[type=time], input[type=file], textarea, select { width: 100%; padding: 12px 13px; border-radius: var(--r); border: 1.5px solid var(--rand-kraeftig); background: var(--karte); color: var(--text); font: inherit; font-size: 16px; /* 16px: verhindert iOS-Zoom beim Fokus */ } textarea { resize: vertical; min-height: 84px; } /* Ankreuzfeld (Anamnesebogen, Einwilligung) — großes Touch-Ziel, Text links bündig */ label.checkbox { display: flex; align-items: flex-start; gap: 10px; font-weight: 500; font-size: 15px; line-height: 1.45; } label.checkbox input { margin-top: 2px; width: 20px; height: 20px; flex: none; accent-color: var(--jade-text); } input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible, .kal-tag:focus-visible, .zeit:focus-visible { outline: 3px solid var(--jade-text); outline-offset: 2px; } ::placeholder { color: var(--nebel); opacity: .8; } button, .knopf { display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: 1.5px solid var(--rand-kraeftig); background: var(--karte); color: var(--text); padding: 11px 18px; border-radius: var(--r); font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; min-height: 46px; text-decoration: none; transition: background .14s ease, border-color .14s ease, transform .14s cubic-bezier(.16,1,.3,1), box-shadow .14s ease; } button:hover, .knopf:hover { background: var(--linnen); } /* 🩸 #095A62 und #0d7d88 waren zwei weitere feste Tuerkistoene im Verlauf, dazu ein Schatten in Tuerkis-RGB. Alle drei gehoerten zu EINEM Schema. Der Knopf traegt jetzt die Akzentflaeche, der Hover mischt sie mit ihrer eigenen Schriftfarbe an — das bleibt in jedem der sieben Bilder in der Familie und ist eine Ableitung, keine neue Farbe. Der Schatten ist neutral. */ button.haupt, .knopf.haupt { background: var(--jade); color: var(--akz-schrift); border-color: var(--jade); box-shadow: 0 1px 2px rgba(0,0,0,.16), 0 8px 16px -10px rgba(0,0,0,.34); } button.haupt:hover, .knopf.haupt:hover { background: color-mix(in srgb, var(--jade) 88%, var(--akz-schrift)); transform: translateY(-1px); box-shadow: 0 2px 4px rgba(0,0,0,.18), 0 12px 22px -10px rgba(0,0,0,.38); } button.haupt:active, .knopf.haupt:active { transform: translateY(0); } button.gefahr { color: var(--rot); border-color: color-mix(in srgb, var(--rot) 45%, var(--karte)); } button.gefahr:hover { background: var(--rot-fl); } button.stiller { border-color: transparent; background: transparent; color: var(--nebel); padding: 8px 10px; min-height: 40px; } button.stiller:hover { background: var(--linnen); color: var(--text); } /* 🩸 18.08.2026 IM BILDSCHIRMFOTO gefunden, nicht per grep: Die Regel galt nur für `button`. Als die Widget-Vorschau vom Knopf zum Link wurde, sah sie plötzlich aus wie ein Textlink zwischen zwei Knöpfen — im Markup stand die Klasse richtig da. `.knopf` (Z. 225) ist die vorhandene Antwort für Links in Knopfgestalt; ihr fehlte nur die kleine Größe. */ button.klein-knopf, .knopf.klein-knopf { min-height: 38px; padding: 7px 13px; font-size: 14px; } button:disabled { opacity: .45; cursor: default; } .reihe { display: flex; gap: 10px; flex-wrap: wrap; } .reihe.eng { gap: 7px; } /* ── Meldungen & Plaketten ─────────────────────────────────────────────── */ .meldung { padding: 12px 15px; border-radius: var(--r); margin: 12px 0; font-size: 15px; border: 1px solid; } .meldung.ok { background: var(--jade-fl); color: var(--jade-text); border-color: color-mix(in srgb, var(--jade-text) 45%, var(--karte)); } .meldung.err { background: var(--rot-fl); color: var(--rot); border-color: color-mix(in srgb, var(--rot) 45%, var(--karte)); } /* 16.08.2026: Zwischen „alles gut" und „Fehler" fehlte der Ton für einen Vorbehalt — der Rechtshinweis über den Belehrungen ist kein Fehler, soll aber auch nicht wie eine Bestätigung aussehen. Nutzt die vorhandenen Signalfarben. */ .meldung.warnung { background: var(--signal-fl); color: var(--signal-text); border-color: color-mix(in srgb, var(--signal-text) 45%, var(--karte)); } .plakette { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap; } .plakette.wartet { background: var(--signal-fl); color: var(--signal-text); } .plakette.bestaetigt { background: var(--jade-fl); color: var(--jade-text); } .plakette.abgelehnt { background: var(--rot-fl); color: var(--rot); } .plakette.frei { background: var(--jade-fl); color: var(--jade-text); } .plakette.neutral { background: var(--linnen); color: var(--nebel); } .plakette::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; } .plakette.ohne-punkt::before { display: none; } /* ── Umschalter Kalender/Liste ─────────────────────────────────────────── */ .umschalter { display: inline-flex; gap: 2px; background: var(--linnen); border-radius: 999px; padding: 3px; } .umschalter button { border: none; background: transparent; color: var(--nebel); min-height: 34px; padding: 5px 15px; border-radius: 999px; font-size: 14px; font-weight: 600; } .umschalter button:hover { background: color-mix(in srgb, var(--karte) 65%, transparent); } .umschalter button.aktiv { background: var(--karte); color: var(--text); box-shadow: 0 1px 3px rgba(18,49,44,.14); } /* Listenansicht: Tage untereinander, jeder mit seinen Zeiten */ .listen-tag { margin-bottom: 22px; } .listen-tag:last-child { margin-bottom: 0; } .listen-kopf { display: flex; align-items: baseline; gap: 9px; margin-bottom: 9px; position: sticky; top: 0; background: var(--karte); padding: 5px 0; z-index: 1; } .listen-kopf .tag { font-family: var(--anzeige); font-weight: 600; font-size: 16px; letter-spacing: -.015em; } /* Bewusst KEIN eigener Scrollbereich: verschachteltes Scrollen ist am Handy unangenehm und schnitt Tagesüberschriften mittendurch. Stattdessen werden nur die nächsten Tage gezeigt, der Rest auf Knopfdruck. */ /* ── Monatskalender: das Herzstück beider Seiten ───────────────────────── */ .kal { margin-bottom: 6px; } .kal-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; } .kal-monat { font-family: var(--anzeige); font-weight: 600; font-size: 19px; letter-spacing: -.02em; } /* 🩸 19.08.2026, von Philip am echten Bild gemeldet: „die Rahmen beruehren sich". Ursache gemessen: 5 px Abstand bei 1,5 px Rahmen je Zelle — zwischen zwei Kaesten blieben effektiv 2 px Luft. Der Abstand ist jetzt groesser als die beiden Rahmen zusammen, dann liest sich das Gitter als Raster und nicht als Tabelle. */ .kal-wochentage, .kal-gitter { display: grid; grid-template-columns: repeat(7, 1fr); gap: 9px; } .kal-wochentage { margin-bottom: 5px; font-size: 12px; font-weight: 600; color: var(--nebel); text-align: center; letter-spacing: .04em; } /* Signatur-Bewegung dieser Oberfläche: Dinge „richten sich aus", wenn sie erscheinen — passend zum Praxis-Thema. EIN Ort, um Timing/Kurve zu ändern. */ @keyframes einrichten { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } } .kal-tag { /* Quadratisch auf dem Handy, aber gedeckelt: auf breitem Schirm würden 1/1 sonst ~130px hohe, fast leere Zellen ergeben. */ position: relative; aspect-ratio: 1 / 1; min-height: 46px; max-height: 72px; /* 🔴🩸 20.08.2026 GEMESSEN, von Philip gemeldet („Rahmen berühren und überlappen sich"): 30 überlappende Geschwisterpaare im Bereich Termine bei 1440×900, je 2,16 px breit über die volle Zellenhöhe von 66 px. Ursache gemessen, nicht vermutet: Die Spalte war 54,84 px breit (7 Spalten + 6×9 px Abstand in 438 px), die Zelle aber 66 px — `aspect-ratio: 1/1` rechnet die Mindesthöhe in eine Mindest-BREITE um und sprengt damit die Spalte. 54,84 + 9 = 63,84; 66 − 63,84 = 2,16. Genau die gemessene Zahl. `width: 100%` dreht die Rechnung um: Die Breite ist damit ausdrücklich die der Spalte, das Seitenverhältnis leitet daraus die HÖHE ab, und die Mindesthöhe hebt nur noch die Höhe an. Die Zelle kann ihre Spalte danach nicht mehr verlassen — das ist Bauart, keine Zahl, die beim nächsten Umbau wieder passen muss. 🔑 Dieselbe Falle stand schon einmal im Datumswähler (`.zw-tafel .kal-tag`, weiter unten): „eine Mindesthöhe von 46px hätte über die Seitenverhältnis- Rechnung auch 46px BREITE verlangt". Dort wurde sie mit `aspect-ratio:auto` umgangen — hier wird die Ursache selbst abgestellt, für beide Stellen. */ width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 1.5px solid transparent; border-radius: var(--r); background: transparent; font-family: var(--anzeige); font-weight: 600; font-size: 16px; color: var(--nebel); cursor: default; padding: 0; min-width: 0; transition: background .12s ease, border-color .12s ease; } .kal-tag.fuellung { visibility: hidden; } .kal-tag.zu { color: var(--nebel); opacity: .55; } /* Vergangenheit / kein Angebot */ .kal-tag.hat { /* Tag mit Angebot — anklickbar */ background: var(--karte); border-color: var(--rand); color: var(--text); cursor: pointer; animation: einrichten .35s cubic-bezier(.16,1,.3,1) backwards; animation-delay: calc(var(--zelle, 0) * 10ms); } .kal-tag.hat:hover { border-color: var(--jade-text); background: var(--jade-fl); } /* Praxis-Kalender: die Zelle selbst einfärben, nicht nur einen 7px-Punkt setzen — „dass Buchungen existieren" muss auch aus 1m Bildschirmabstand auffallen. Reihenfolge = Priorität: eine offene Anfrage übertönt eine reine Buchung. Ruhig gehalten (kein Puls/Hover-Lift) — Variante „Agenda-Seitenleiste" war die zurückhaltendste der 5 Entwürfe, das zieht sich hier durch. var(--text)-in-var(--karte) statt var(--tinte)-in-#fff: dieselbe Formel passt sich damit von selbst dem Thema an (hell: dunkle Beimischung in Weiß, dunkel: helle Beimischung in die Kartenfarbe) — kein eigener Dunkel-Override nötig. */ .kal-tag.hat.prio-gebucht { background: color-mix(in srgb, var(--text) 9%, var(--karte)); border-color: color-mix(in srgb, var(--text) 30%, var(--karte)); } .kal-tag.hat.prio-wartet { background: var(--signal-fl); border-color: var(--signal-text); } .kal-tag.gewaehlt { background: var(--jade); border-color: var(--jade); color: var(--akz-schrift); animation: none; } .kal-tag.gewaehlt .kal-zahl { color: var(--akz-schrift); } /* „Heute" als Ring um die Zelle statt als Strich darunter — der Strich sah in leeren Zellen wie ein verirrtes Zeichen aus. */ .kal-tag.heute { box-shadow: inset 0 0 0 1.5px var(--rand-kraeftig); } .kal-tag.heute.hat { box-shadow: inset 0 0 0 1.5px var(--jade-text); } .kal-tag.heute.gewaehlt { box-shadow: none; } .kal-zahl { line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; } /* Verfügbarkeitsmarke: Anzahl freier Zeiten, klein unter der Tageszahl */ .kal-marke { font-family: var(--text-schrift); font-weight: 600; font-size: 11px; line-height: 1; padding: 2px 5px; border-radius: 999px; background: var(--jade-fl); color: var(--jade-text); } /* 22 Prozent von dem, was auf DIESER Flaeche liest: festes Weiss verschwaende auf einem hellen Akzent (Butter Yellow, Lime) spurlos. */ .kal-tag.gewaehlt .kal-marke { background: color-mix(in srgb, var(--akz-schrift) 22%, transparent); color: var(--akz-schrift); } .kal-marke.wartet { background: var(--signal-fl); color: var(--signal-text); } .kal-marke.gebucht { background: color-mix(in srgb, var(--text) 14%, var(--karte)); color: var(--text); } .kal-tag.gewaehlt .kal-marke.wartet, .kal-tag.gewaehlt .kal-marke.gebucht { background: color-mix(in srgb, var(--akz-schrift) 22%, transparent); color: var(--akz-schrift); } /* Praxis: Zahlen statt reiner Punkte (siehe kalender.js) — nur „frei" bleibt ein schlichter Punkt, das ist die unwichtigste Information hier. */ .kal-punkte { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; justify-content: center; min-height: 15px; } .kal-punkt { width: 8px; height: 8px; border-radius: 50%; } .kal-punkt.frei { background: var(--jade-text); } .kal-tag.gewaehlt .kal-punkt { background: rgba(255,255,255,.85); } .kal-legende { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--nebel); margin-top: 12px; } .kal-legende span { display: inline-flex; align-items: center; gap: 6px; } .kal-legende i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } /* ── Zeitspalte: der Tag als gestapelte Segmente ───────────────────────── */ .tag-kopf { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--rand); } .tag-kopf .datum { font-family: var(--anzeige); font-weight: 600; font-size: 21px; letter-spacing: -.025em; } .saeule { position: relative; } .zeit { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; background: var(--karte); border: 1.5px solid var(--rand); border-radius: var(--r); padding: 12px 15px; margin-bottom: 7px; cursor: pointer; text-align: left; font: inherit; min-height: 54px; transition: border-color .12s ease, background .12s ease; animation: einrichten .3s cubic-bezier(.16,1,.3,1) backwards; animation-delay: calc(var(--reihe, 0) * 30ms); } .zeit:hover { border-color: var(--jade-text); background: var(--jade-fl); } .zeit.gewaehlt { border-color: var(--jade-text); background: var(--jade-fl); border-width: 2px; } .zeit.nicht-frei { cursor: default; background: var(--linnen); border-style: dashed; } /* markiert zum Zurückziehen (Praxis-Tagesansicht) */ .zeit.markiert { border-color: var(--rot); border-width: 2px; background: var(--rot-fl); } .zeit.markiert .uhr { color: var(--rot); } .zeit.nicht-frei:hover { border-color: var(--rand); background: var(--linnen); } .zeit .uhr { font-family: var(--anzeige); font-weight: 600; font-size: 19px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; min-width: 62px; } .zeit .dauer { color: var(--nebel); font-size: 14px; } .zeit .rechts { margin-left: auto; display: flex; align-items: center; gap: 10px; } /* Zeile mit Patient: eigene Zeile für Terminart/Telefon/E-Mail statt alles in den Namen zu quetschen (Philip 06.08.: „Liste zeigt zu wenig Informationen"). */ .zeit.hat-patient { padding-top: 10px; padding-bottom: 10px; } .patient-info { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; } .kontakt-klein { font-size: 12px; color: var(--nebel); } /* Termin restlos löschen (06.08., direkt aus Kalender/Liste) — klein und zurückhaltend neben der Statusplakette, erst bei Hover/Fokus als Warnung eingefärbt. Kein `.klein-knopf`: der ist für Text-Knöpfe gedacht, hier reicht ein kompaktes Icon-Quadrat. */ .loesch-knopf { padding: 5px 7px; min-height: 0; font-size: 14px; line-height: 1; color: var(--nebel); } .loesch-knopf:hover, .loesch-knopf:focus-visible { background: var(--rot-fl); color: var(--rot); } /* ── Sammelaktion für markierte Zeiten (Praxis) ───────────────────────────── „Klebend" im Wortsinn: bleibt am unteren Bildschirmrand sichtbar, solange die Liste, in der man markiert hat, noch auf dem Schirm ist — sonst müsste man bei einer langen Liste erst ganz ans Ende scrollen, um dort zu löschen, wo man markiert hat (Philip 06.08.). `position:sticky` statt `fixed`: bleibt dadurch innerhalb ihres eigenen Listen-Containers, überdeckt nicht die Seitenleiste oder andere Bereiche der App. */ .aktionsleiste { position: sticky; bottom: 14px; z-index: 3; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--karte); border: 1px solid var(--rand-kraeftig); border-radius: var(--r); padding: 10px 14px; margin-top: 14px; box-shadow: var(--schatten); } .aktionsleiste .anzahl { font-weight: 600; font-size: 14px; } /* ── Terminkarten (Patient: „Meine Termine", Praxis: Anfragen) ─────────── */ .termin { display: flex; gap: 14px; align-items: flex-start; border: 1px solid var(--rand); border-radius: var(--r); padding: 15px; margin-bottom: 10px; background: var(--karte); } .termin.hervor { border-color: var(--signal-text); border-width: 2px; background: var(--signal-fl); } .termin .wann { min-width: 92px; } .termin .wann .tag-zahl { font-family: var(--anzeige); font-weight: 600; font-size: 24px; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; } .termin .wann .rest { font-size: 13px; color: var(--nebel); margin-top: 3px; } .termin .inhalt { flex: 1; min-width: 0; } .termin .inhalt .titel { font-weight: 600; } .termin .aktionen { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 11px; } .zitat { margin: 9px 0 0; padding: 9px 12px; background: var(--linnen); border-radius: var(--r-klein); font-size: 15px; color: var(--text); } .termin.hervor .zitat { background: color-mix(in srgb, var(--karte) 65%, transparent); } /* ── Leerzustände ──────────────────────────────────────────────────────── */ .leer { text-align: center; padding: 30px 18px; color: var(--nebel); } .leer .zeichen { font-size: 26px; display: block; margin-bottom: 8px; opacity: .55; } .leer .haupt-satz { color: var(--text); font-weight: 600; margin-bottom: 4px; } /* ── Reiter ────────────────────────────────────────────────────────────── */ .reiter { display: flex; gap: 4px; background: var(--karte); border: 1px solid var(--rand); border-radius: var(--r); padding: 4px; margin-bottom: 20px; } .reiter button { flex: 1; border: none; background: transparent; min-height: 42px; color: var(--nebel); border-radius: var(--r-klein); } .reiter button:hover { background: var(--linnen); } .reiter button.aktiv { background: var(--tinte); color: var(--akz-schrift); } .reiter button.aktiv:hover { background: var(--tinte); } .reiter .zaehler { margin-left: 6px; background: var(--signal); color: #fff; border-radius: 999px; padding: 1px 7px; font-size: 12px; font-variant-numeric: tabular-nums; } .reiter button.aktiv .zaehler { background: var(--signal); } /* ── Praxis-Admin: Agenda-Seitenleiste + Kennzahlen-Leiste (06.08.) ─────── Aus 5 Entwürfen ausgewählt („Agenda-Seitenleiste"): links Kalender/Liste/ Anfragen fest erreichbar, oben eine kurze Wochen-Kennzahlen-Leiste. Ersetzt den vorigen obenliegenden Reiter „Terminplan/Anfragen" + den verschachtelten Kalender/Liste-Umschalter — beide sind jetzt gleichrangige Seitenpunkte. */ .admin-flaeche { display: flex; align-items: flex-start; min-height: calc(100vh - 53px); } .seitenleiste { width: 232px; flex: none; background: var(--tinte); color: var(--akz-schrift); padding: 22px 14px; display: flex; flex-direction: column; gap: 20px; position: sticky; top: 0; align-self: flex-start; height: 100vh; overflow-y: auto; } .sl-gruppe { display: flex; flex-direction: column; gap: 2px; } .sl-label { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: rgba(255,255,255,.42); padding: 6px 10px 6px; } .sl-item { display: flex; align-items: center; gap: 9px; justify-content: flex-start; border: none; background: transparent; color: rgba(255,255,255,.8); padding: 10px 11px; border-radius: 10px; font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; min-height: 0; text-align: left; } .sl-item:hover { background: rgba(255,255,255,.07); } .sl-item.aktiv { background: var(--jade); color: var(--akz-schrift); } .sl-item .sl-badge { margin-left: auto; background: var(--signal); color: #fff; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 8px; font-variant-numeric: tabular-nums; } .admin-inhalt { flex: 1; min-width: 0; padding: 24px 28px 60px; } .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; } .kpi { background: var(--karte); border: 1px solid var(--rand); border-radius: 12px; padding: 14px 16px; } .kpi .n { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .kpi .l { font-size: 12px; color: var(--nebel); margin-top: 2px; } .kpi.warn .n { color: var(--signal-text); } @media (max-width: 780px) { /* 🩸 19.08.2026 im echten Browser GEMESSEN (pruefung/cockpit.js): Die Kopfzeile lief bei 390 px seitlich aus dem Bild — `/crm.html` auf 394 px, das Cockpit mit dem längeren Titel „Tageslage" auf 431 px. Sie ist eine einzeilige Flex-Reihe ohne Umbruch, und `#kopfRechts` bekommt seit dem 18.08. zusätzlich den Abmelden-Knopf (public/team-rahmen.js). Damit war der Überlauf nicht neu, sondern nur nie gemessen — dieselbe Lehre wie am 13.08. bei der Seitenleiste. Jetzt bricht die Reihe um, statt zu wachsen. */ .kopf { flex-wrap: wrap; row-gap: 6px; } .kopf .marke { min-width: 0; } .admin-flaeche { flex-direction: column; min-height: 0; } /* 🩸 13.08.2026: Die Leiste war hier eine EINZEILIGE Reihe ohne Umbruch — auf dem Handy liefen die hinteren Punkte rechts aus dem Bild (im Kalender „Kunden"/„Sicherheit", im CRM sogar drei). Sichtbar wurde es erst im Ganzseiten-Screenshot bei 390px: die Seite war 560 bzw. 768px breit. Jetzt umbrechend — jeder Punkt ist erreichbar, ohne seitwärts zu wischen. */ .seitenleiste { width: 100%; position: static; height: auto; overflow: visible; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 9px 10px; gap: 6px; row-gap: 6px; } .sl-gruppe { flex-direction: row; flex-wrap: wrap; gap: 4px; } .sl-item { padding: 8px 11px; font-size: 13.5px; } .sl-label { display: none; } .sl-item { padding: 8px 12px; white-space: nowrap; } .admin-inhalt { padding: 16px 14px 50px; } .kpis { grid-template-columns: repeat(2, 1fr); } } /* ── Tabellen (Kundenkartei) ───────────────────────────────────────────── */ .tabelle-huelle { overflow-x: auto; margin: 0 -4px; padding: 0 4px; } table { width: 100%; border-collapse: collapse; font-size: 15px; } th, td { text-align: left; padding: 11px 9px; border-bottom: 1px solid var(--rand); vertical-align: middle; } th { font-size: 13px; font-weight: 600; color: var(--nebel); } tbody tr.klickbar { cursor: pointer; } tbody tr.klickbar:hover { background: var(--jade-fl); } tbody tr:last-child td { border-bottom: none; } /* ── Dialog ────────────────────────────────────────────────────────────── */ /* ══════════════ Dialoge — gemeinsamer Baustein (15.08.2026 überarbeitet) ═══ 🔴 Philip: „das Protokoll sieht vom Layout wirklich fürchterlich aus … soll clean aussehen, aber professionell, damit wir nicht für jeden Kunden ein eigenes Layout benötigen." Deshalb steht die Reparatur HIER, im geteilten Stylesheet, und nicht in der Protokoll-Ansicht: jeder Dialog dieses Dienstes (und jede Kopie für ein anderes Kundensystem) erbt sie. 🩸 Zwei gemessene Fehler, die das ausgelöst haben: 1. Der Dialog konnte HÖHER werden als das Fenster (Schreibdialog: 992 px bei 900 px Fensterhöhe). Gescrollt hat dann der Hintergrund-Container — die Knöpfe „Abbrechen"/„Endgültig speichern" standen unterhalb der Kante und waren auf dem Handy schlicht NICHT DA. Kein Schönheitsfehler: man konnte das Protokoll nicht speichern. 2. Zwei Dialoge übereinander (Akte + Schreiben) lagen auf derselben Ebene und blieben beide sichtbar. Die Lösung ist die übliche und langweilige: der Dialog ist eine Spalte mit fester Höhengrenze, der MITTELTEIL scrollt, Kopf und Knopfleiste bleiben stehen. Damit passt jeder Inhalt, auch ein langer. */ .dialog-grund { position: fixed; inset: 0; background: rgba(18, 49, 44, .45); z-index: 20; display: flex; align-items: center; justify-content: center; padding: 20px; overflow: hidden; } /* Ausgeblendet, solange ein Dialog darüber offen ist (siehe dialog() in crm.js und admin.js). `display:none` statt Transparenz: ein durchscheinender zweiter Dialog ist genau das, was vorher unruhig aussah. */ .dialog-grund.verdeckt { display: none; } .dialog { background: var(--karte); border-radius: var(--r-gross); width: 100%; max-width: 520px; box-shadow: var(--schatten); display: flex; flex-direction: column; /* dvh statt vh: auf dem Handy schrumpft die sichtbare Höhe, wenn die Adressleiste einfährt — mit vh stünden die Knöpfe wieder außerhalb. */ max-height: calc(100dvh - 40px); overflow: hidden; } .dialog-kopf { display: flex; align-items: flex-start; gap: 12px; padding: 20px 22px 12px; border-bottom: 1px solid var(--rand); flex: 0 0 auto; } .dialog-kopf h2 { margin: 0; flex: 1; font-size: 1.15rem; } /* Der einzige Teil, der scrollt. `min-height:0` ist in einer Flex-Spalte Pflicht — ohne sie wächst das Kind über den Container hinaus, statt zu scrollen (die eigentliche Ursache der fehlenden Knöpfe). */ .dialog-inhalt { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px 22px; } /* Knopfleiste: bleibt immer sichtbar, am unteren Rand, rechtsbündig. */ .dialog-aktionen { flex: 0 0 auto; display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; padding: 14px 22px; border-top: 1px solid var(--rand); background: var(--karte); border-radius: 0 0 var(--r-gross) var(--r-gross); } @media (max-width: 560px) { .dialog-grund { padding: 10px; } .dialog { max-height: calc(100dvh - 20px); } .dialog-kopf { padding: 16px 16px 10px; } .dialog-inhalt { padding: 14px 16px; } .dialog-aktionen { padding: 12px 16px; } /* Auf dem Handy tragen die beiden Knöpfe die volle Breite — nebeneinander werden sie zu schmal für einen sicheren Daumentreffer. */ .dialog-aktionen button { flex: 1 1 100%; min-height: 46px; } } .beschreibung { margin: 0 0 4px; } dl.antworten dt { font-weight: 600; font-size: 14px; color: var(--nebel); margin-top: 14px; } dl.antworten dd { margin: 3px 0 0; } a { color: var(--jade-text); } .fuss { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 14px; color: var(--nebel); font-size: 13px; padding: 26px 16px 18px; } .fuss a { color: var(--nebel); } /* ── Impressum · Datenschutz (20.08.2026) ────────────────────────────────── Pflichtangaben nach § 5 DDG und Art. 13 DSGVO, in der Fußzeile jeder Patientenseite. Sie stehen VOR der Marken-Pille, weil sie die Angaben der PRAXIS sind — der Hinweis auf uns ist der Zusatz, nicht umgekehrt. Auf schmalen Geräten bricht die Fußzeile ohnehin um (`flex-wrap` oben); die Rechtszeile bleibt dabei zusammen, damit „Impressum · Datenschutz" nicht über zwei Zeilen zerfällt und wie zwei unabhängige Fußnoten aussieht. Unterstrichen, weil ein Pflichthinweis als Link erkennbar sein muss und Farbe allein dafür nicht genügt (WCAG 1.4.1). */ .fuss-recht { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 12.5px; } .fuss-recht a { color: var(--nebel); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } .fuss-recht a:hover, .fuss-recht a:focus-visible { color: var(--tinte); } .fuss-trenner { opacity: .5; } @media (max-width: 520px) { .fuss { gap: 4px 10px; } .fuss-recht { font-size: 12px; } } /* ── „ein Produkt von flowmatik24" — animierte Zugehoerigkeits-Pille ─────── Vorbild: bolte-portal/bolte-kalender (CSS GELESEN, nicht nachgebaut, siehe [[marken-pille-aussage-nicht-name]]). Zwei bewusste Abweichungen: 1. Farbe haengt an ROLLEN statt an Bolte's fixen Hex-Werten, weil dieses Projekt zur Laufzeit zwischen hell/dunkel umschaltet (Bolte hat zwei getrennte Seiten) UND seit dem 18.08.2026 sieben Erscheinungsbilder kennt. Zwischenstand waren eigene Tokens --pb/--pb-hover mit festen Werten; warum auch die nicht reichten, steht direkt darunter. 2. Das Label nutzt var(--nebel) statt einer neuen Grau-Variable — die ist in diesem Projekt schon fuer beide Themen kalibriert (6,4:1 / 7,2:1). Das Label faellt nie zuerst weg (es IST die Aussage; der Name allein laese sich wie eine zweite, gleichrangige Marke) — die Fusszeile bricht stattdessen um (flex-wrap oben). Die GANZE Pille ist der Link, nicht nur das Wort. Der Wortlaut steht in lib/marke.js:PILLE_WORTLAUT, an genau einer Stelle; hier steht nur die Gestalt. */ /* 🩸 18.08.2026 GEMESSEN, nicht vermutet: Die festen Werte --pb #0e7490 / dunkel #22d3ee waren gegen EIN Schema gerechnet. Über alle sieben gerechnet fiel „Emerald Ink hell" (Grund #F8E7C9, Champagne) auf **4,40:1** — unter AA, und niemand hätte es gesehen, weil die Pille klein ist und niemand sie liest. Die Pille wandert deshalb mit dem Schema, wie die im Kalender-Baustein: Name in --text, Label in --leise, das Zeichen im Akzent. Damit ist ihr Kontrast derselbe wie der von Fließtext zu Seitengrund — über alle 14 Tönungen schlechtestenfalls 5,02:1, das Zeichen als Grafik 5,28:1. */ /* 🩸 20.08.2026: `flex-wrap: wrap` ist hier KEINE Kosmetik. Mit dem neuen Wortlaut („Taktwerk — ein Produkt von" statt „Taktwerk powered by") wuchs das Label um acht Zeichen. Ohne Umbruch hätte die Pille auf schmalen Geräten die Seite seitlich überlaufen lassen — und die alte Regel ist eindeutig: Wird es eng, fällt die GANZE Pille, NIE das Label. Also wird Platz geschaffen (die Zeile bricht zwischen Label und Marke um), nicht gekürzt und nicht weggeblendet. Beides waren die Fehler vom 17.07.2026. `justify-content: center` hält die zweite Zeile unter der ersten mittig, statt sie linksbündig unter ein zentriertes Label zu hängen. */ .fuss .pb { display: inline-flex; align-items: center; gap: 9px; font-size: 12px; flex-wrap: wrap; justify-content: center; row-gap: 4px; color: var(--text); text-decoration: none; transition: color .18s ease; } .fuss .pb:hover, .fuss .pb:focus-visible { color: var(--jade-text); } .fuss .pb .pb-label { font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--nebel); white-space: nowrap; } /* Nur das Zeichen trägt den Akzent — wie im Kalender-Baustein (embed.html). */ .fuss .pb .pb-mark { height: 16px; width: 16px; display: block; flex: none; color: var(--jade-text); } .fuss .pb .pb-name { font-weight: 700; font-size: 12.5px; letter-spacing: -.01em; color: inherit; } .pb-arc { transform-box: view-box; transform-origin: 70px 70px; animation: pbSpin 9s linear infinite; } @keyframes pbSpin { to { transform: rotate(360deg); } } /* Ein ewig drehender Kreis ist genau das, was Bewegungsempfindliche krank macht. Er haelt an — die Marke steht trotzdem da. */ @media (prefers-reduced-motion: reduce) { .pb-arc { animation: none; } } /* ── Die Symbole der Oberfläche (20.08.2026) ──────────────────────────────── Aus Philips Designsystem „Organic": Lucide, inline SVG, stroke-width 2.75, auf `currentColor`. Die Größe steht hier EINMAL; wer ein Symbol woanders braucht, erbt sie mit. 🔑 `currentColor` ist der eigentliche Gewinn gegenüber den Emoji, die hier bis heute standen: Das Zeichen trägt automatisch die Farbe seiner Umgebung — in allen sieben Erscheinungsbildern und beiden Tönungen, ohne eine einzige zusätzliche Regel. Ein Emoji konnte das nie; es blieb bunt. `flex: none` verhindert, dass es in einer engen Zeile gestaucht wird — ein gestauchtes Symbol sieht aus wie ein Fehler im Zeichensatz. */ .ik { width: 18px; height: 18px; display: block; flex: none; } /* Das Zeichen eines LEERZUSTANDS ist größer und leiser: Es füllt die Fläche, die sonst nichts hat, ohne sich wie ein Knopf anzubieten. `stroke-width` wird hier zurückgenommen — 2.75 wirkt bei 44 px plump, während dieselbe Stärke bei 18 px genau richtig ist. */ .ik-leer { width: 44px; height: 44px; stroke-width: 1.9; color: var(--nebel); margin: 0 auto 6px; } .ik-gross { width: 22px; height: 22px; } /* ── Aufklappbarer Block (Praxis: Termine freigeben) ───────────────────── */ details.block { background: var(--karte); border: 1px solid var(--rand); border-radius: var(--r-gross); margin-bottom: 14px; } details.block > summary { list-style: none; cursor: pointer; padding: 16px 20px; font-weight: 600; display: flex; align-items: center; gap: 9px; border-radius: var(--r-gross); } details.block > summary::-webkit-details-marker { display: none; } details.block > summary::after { content: '＋'; margin-left: auto; color: var(--nebel); font-size: 19px; } details.block[open] > summary::after { content: '−'; } details.block > summary:hover { background: var(--linnen); } details.block .block-inhalt { padding: 4px 20px 20px; } /* ── Praxis-Desktop (nur admin.html — Patientenseite bleibt bei .huelle ohne .breit unangetastet): Kalender + Tagesdetail nebeneinander statt untereinander, Zellen groß genug für eine Bildschirmarbeitsplatz-Distanz. Philip 06.08.: „Kalender in der Desktopvariante zu klein". ── */ @media (min-width: 900px) { .huelle.breit { max-width: 1200px; } /* 🩸 20.08.2026, zweiter Teil von Philips Meldung: „Kalender Ansicht immer noch zu sehr gedrückt". Die feste Spalte von 480px stammt aus der Zeit, als der Kalender auf `/admin.html` über die ganze Breite verfügte. In der Hülle nimmt die Menüleiste links 224px weg — gemessen blieben der Karte 480px und dem Gitter 438px, also 54,8px je Spalte bei 66px Zellenhöhe. Das IST das Gedrückte: hoch und schmal. `auto-fit` statt zweier fester Spalten: Solange beide Seiten mindestens 480px bekommen, stehen Kalender und Tagesdetail nebeneinander; darunter rücken sie untereinander, statt sich gegenseitig zu erdrücken. Ist kein Tag gewählt (`#tagBox:empty`), fällt die zweite Spalte weg und der Kalender bekommt die Breite — das ist der Zustand, in dem man ihn am häufigsten sieht. `max-width` deckelt ihn dabei, damit aus „Luft" keine Zellen von Postkartengröße werden. */ .termin-flaeche[data-ansicht="kal"] { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr)); gap: 22px; align-items: start; } .termin-flaeche[data-ansicht="kal"] > .karte { max-width: 640px; } .termin-flaeche[data-ansicht="kal"] #tagBox { position: sticky; top: 20px; } .termin-flaeche[data-ansicht="kal"] #tagBox:empty { display: none; } /* Der Boden greift nur noch, wenn die Spalte schmaler ist als er — durch `width:100%` oben kann er die Zelle nicht mehr in die Breite ziehen. 60 statt 66, damit eine enge Spalte nicht wieder hoch und schmal wird. */ .kal-tag { min-height: 60px; max-height: 112px; font-size: 17px; } .kal-monat { font-size: 21px; } .kal-marke { font-size: 12px; padding: 2px 6px; } } /* 🔴 20.08.2026 GEMESSEN auf 390×844: Die Tageslage war ohne die Fußzeile 842 px hoch — zwei Bildpunkte KÜRZER als das Fenster. Mit ihr wurden daraus 905, also musste man 61 px scrollen, um die Marke zu sehen. Genau Philips ursprünglicher Befund, nur in klein: Die Seite scrollte nicht wegen ihres Inhalts, sondern wegen der Fußzeile. Gespart wird deshalb dort, wo auf einem Telefon ohnehin nur Luft steht: Fußzeilenpolster (63 → 41), unteres Polster der Inhaltsfläche (50 → 16) und der Abstand über den Wegen (30 → 22). Zusammen 64 px — gerechnet, nicht geschätzt, und unten im Browser nachgemessen. */ @media (max-width: 560px) { .fuss { padding: 12px 12px 10px; } .hk-inhalt { padding-bottom: 16px; } .tl-wege { margin-top: 22px; } } @media (max-width: 560px) { body { font-size: 16px; } .huelle { padding: 18px 13px 60px; } .karte { padding: 16px; border-radius: var(--r); } h1 { font-size: 23px; } .kal-tag { min-height: 42px; font-size: 15px; } .kal-marke { font-size: 10px; padding: 1px 4px; } .termin { flex-direction: column; gap: 9px; } .termin .wann { display: flex; align-items: baseline; gap: 8px; min-width: 0; } .termin .wann .rest { margin-top: 0; } .kopf { padding: 12px 14px; } .kopf .marke { font-size: 17px; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ── CRM (13.08.2026) ────────────────────────────────────────────────────── Die CRM-Seite nutzt dieselben Bausteine wie die Praxis-Seite (Seitenleiste, Kennzahlen, Karten, Dialog). Nur drei Dinge fehlten dort: */ /* 1) Die Kontaktakte ist ein Formular MIT Verlauf und Terminliste — im 520px-Dialog wird das eine Schlucht aus Zeilenumbrüchen. */ .dialog.breit { max-width: 760px; } /* 2) Seitenleisten-Punkte, die zu einer anderen Seite führen (Kalender, Portal), sind Links statt Knöpfe — sie sollen trotzdem gleich aussehen. */ a.sl-item { text-decoration: none; } /* Ein Menüpunkt, der aus der Praxisoberfläche HERAUS führt (fremde Adresse aus `team.menue`), sagt das auch — sonst ist der neue Tab eine Überraschung. */ .sl-extern { margin-left: auto; opacity: .6; font-size: 11px; } /* Zwei Abzeichen nebeneinander am selben Punkt: offene Anfragen und ungelesene Nachrichten. Sie stehen am Bereichs-Eintrag „Termine" und sind damit in JEDEM Bereich sichtbar — das war der Auftrag. */ .sl-item .sl-badge + .sl-badge { margin-left: 4px; } a.sl-item:hover { color: var(--akz-schrift); } /* 3) Zeilen, die sich wie eine Tabellenzeile anklicken lassen, ohne eine zu sein (Übersicht/Wiedervorlagen). */ .klickbar-zeile:hover b { text-decoration: underline; } /* Der ＋CRM-Knopf in der Terminzeile: bewusst so leise wie der Löschknopf daneben — er soll erreichbar sein, aber die Zeile nicht dominieren. */ .crm-knopf { font-size: 12px; font-weight: 600; min-height: 32px; padding: 4px 9px; border-radius: 999px; white-space: nowrap; color: var(--nebel); } .crm-knopf:hover, .crm-knopf:focus-visible { background: var(--jade-fl); color: var(--jade-text); } /* ══════════════ Einstellungen → E-Mails (15.08.2026) ═══════════════════════ Liste ausklappbarer Einträge. Bewusst dieselben Bausteine wie überall (--karte/--rand/--nebel, .plakette, .klein-knopf) — der Reiter soll nicht aussehen wie ein Fremdkörper, nur weil er neu ist. */ .mail-liste { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; } .mail-eintrag { border: 1px solid var(--rand); border-radius: var(--r); padding: 12px 14px; background: var(--karte); } .mail-kopf { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; } .mail-titel { flex: 1 1 260px; min-width: 0; } .mail-titel b { font-family: var(--anzeige); } /* Der Schalter steht neben dem Namen und wirkt sofort — deshalb sieht er auch aus wie ein Schalter und nicht wie ein Formularfeld. */ .schalter { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--nebel); white-space: nowrap; cursor: pointer; } .schalter input { width: 16px; height: 16px; accent-color: var(--jade); cursor: pointer; } .mail-form { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rand); } .mail-form label { display: block; margin: 10px 0 4px; font-size: 13px; font-weight: 600; } .mail-form input[type="text"], .mail-form textarea { width: 100%; box-sizing: border-box; font: inherit; border: 1px solid var(--rand); border-radius: 8px; padding: 9px 11px; background: var(--linnen); color: var(--text); } /* Der Text ist eine Mail, keine Prosa — feste Breite hält Zeilenumbrüche dort, wo der Patient sie später auch sieht. */ .mail-form textarea { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; line-height: 1.5; resize: vertical; } .ph { display: inline-block; background: var(--linnen); border: 1px solid var(--rand); border-radius: 6px; padding: 1px 6px; font-size: 12px; cursor: help; } .mail-knoepfe { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; } .mail-vorschau { margin-top: 12px; border: 1px dashed var(--rand); border-radius: 8px; padding: 12px; } .mv-betreff { font-weight: 700; margin: 6px 0 8px; font-family: var(--anzeige); } /* `pre-wrap` + `overflow-x:auto`: lange Links dürfen die Karte nicht sprengen. */ .mv-text { white-space: pre-wrap; word-break: break-word; overflow-x: auto; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.55; margin: 0; color: var(--text); } @media (max-width: 640px) { .mail-kopf { gap: 8px; } .schalter { order: 3; } } /* ── Ruhiger Hinweis + Pflichthaken (15.08.2026) ──────────────────────────── Gemeinsame Bausteine, kein Sonderfall der Protokoll-Ansicht: „damit wir nicht für jeden Kunden ein eigenes Layout benötigen" (Philip). Beide Regeln arbeiten ausschließlich mit den Marken-Variablen — ein anderes Kundensystem tauscht die Farben, nicht das Layout. */ .hinweis-kasten { margin: 16px 0 0; padding: 12px 14px; background: var(--linnen); border: 1px solid var(--rand); border-left: 3px solid var(--nebel); border-radius: 8px; font-size: 14px; line-height: 1.55; color: var(--text); } /* Der Haken, ohne den nicht gespeichert wird. Große Klickfläche (die ganze Zeile), damit er auf dem Handy sicher trifft — und `align-items:flex-start`, damit ein zweizeiliger Text nicht am Kästchen klebt. */ .pflichthaken { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; margin-top: 12px; padding: 12px 14px; min-height: 46px; border: 1px solid var(--rand); border-radius: 8px; background: var(--karte); font-size: 14px; font-weight: 600; line-height: 1.45; } .pflichthaken:hover { border-color: var(--jade); } .pflichthaken input { width: 18px; height: 18px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--jade); cursor: pointer; } .pflichthaken span { flex: 1; min-width: 0; } /* ═══════════════════════════════════════════════════════════════════════════ Nachrichten Patient ↔ Praxis (17.08.2026) 🔑 Es kommt KEINE einzige neue Farbe dazu. Jede Regel hier arbeitet mit den Variablen aus :root — damit gelten alle bereits gerechneten Kontrastwerte unverändert weiter, und der Bereich zieht automatisch mit, wenn die Praxis später eine andere Marke bekommt (MARKENSYSTEM.md). Die vier neu entstehenden Paarungen (Text auf --jade-fl, --nebel auf --jade-fl, --nebel auf --linnen, --signal-text auf --signal-fl) sind mit `pruefung/kontrast-nachrichten.js` in BEIDEN Themen nachgerechnet, nicht geschätzt. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Hinweis auf den Kontovorteil am Anmeldeschalter ──────────────────────── */ .vorteil-hinweis { display: flex; gap: 12px; align-items: flex-start; margin: 16px 0 4px; padding: 13px 15px; background: var(--jade-fl); border-radius: var(--r); border: 1px solid color-mix(in srgb, var(--jade-text) 30%, var(--jade-fl)); } .vorteil-hinweis .zeichen { font-size: 20px; line-height: 1.2; flex: none; } .vorteil-hinweis b { display: block; font-size: 15px; margin-bottom: 3px; } .vorteil-hinweis .klein { display: block; color: var(--nebel); } /* ── Bereichswahl Termine / Nachrichten (Patientenseite) ──────────────────── */ .bereichswahl { display: flex; gap: 6px; margin: 0 0 18px; padding: 4px; background: var(--karte); border: 1px solid var(--rand); border-radius: 999px; } .bereichswahl button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; border: none; background: transparent; color: var(--nebel); padding: 9px 14px; border-radius: 999px; font-size: 15px; font-weight: 600; min-height: 42px; } .bereichswahl button:hover { background: var(--linnen); } .bereichswahl button.aktiv { background: var(--jade); color: var(--akz-schrift); } /* Das Abzeichen muss auch auf der EINGEFÄRBTEN Fläche des aktiven Punktes lesbar bleiben — deshalb Signalfarbe mit weißer Schrift und nicht die sonst übliche helle Signalfläche. */ .bw-badge { background: var(--signal); color: #fff; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 1px 8px; font-variant-numeric: tabular-nums; } /* ── Der Verlauf selbst — beide Seiten, aus chat.js ───────────────────────── */ .chat-verlauf { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .chat-blase { max-width: min(88%, 640px); align-self: flex-start; background: var(--linnen); border: 1px solid var(--rand); border-radius: var(--r-gross); border-bottom-left-radius: var(--r-klein); padding: 11px 14px; } .chat-blase.eigen { align-self: flex-end; background: var(--jade-fl); border-color: color-mix(in srgb, var(--jade-text) 26%, var(--jade-fl)); border-bottom-left-radius: var(--r-gross); border-bottom-right-radius: var(--r-klein); } /* Ungelesene Gegennachricht: ein kräftiger Balken an der Kante. Bewusst KEINE Flächenfarbe — die trüge Bedeutung („Warnung"), und eine neue Nachricht ist keine. */ .chat-blase.neu { border-left: 3px solid var(--signal-text); } .chat-kopf { display: flex; align-items: baseline; gap: 10px; justify-content: space-between; font-size: 12.5px; margin-bottom: 5px; } .chat-kopf .wer { font-weight: 700; color: var(--text); } .chat-kopf .wann { color: var(--nebel); white-space: nowrap; } /* `pre-wrap` hält die Absätze des Schreibers, ohne dass irgendwo HTML gebaut werden müsste — der Text bleibt Text, s. lib/nachrichten.js. `overflow-wrap` verhindert, dass eine sehr lange Zeichenkette ohne Leerzeichen die Blase aus der Karte schiebt. */ .chat-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 15.5px; line-height: 1.5; } .chat-status { display: block; margin-top: 6px; font-size: 11.5px; font-weight: 600; color: var(--nebel); text-align: right; } .chat-status.gelesen, .chat-status.beantwortet { color: var(--jade-text); } /* In einer EMPFANGENEN Blase steht der Status links — er gehört zur Blase, und die sitzt am linken Rand. Rechtsbündig sähe er dort aus, als hinge er in der Luft. */ .chat-blase:not(.eigen) .chat-status { text-align: left; } .chat-karte .chat-karten-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--rand); } /* Abgeschlossene Unterhaltungen stehen als Archiv weiter unten: lesbar, aber optisch zurückgenommen. Kein `opacity` — das würde auch den Kontrast des Textes senken und wäre damit ein Barrierefreiheitsproblem statt einer Gestaltung. Stattdessen nur die Kante. */ .chat-karte.abgeschlossen { border-left: 3px solid var(--rand-kraeftig); } /* ── Posteingang der Praxis ───────────────────────────────────────────────── */ .pn-flaeche { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 16px; align-items: start; } .pn-spalte { margin: 0; } /* Die Liste bekommt eine eigene Höhe mit eigenem Rollbereich, damit der Verlauf rechts nicht mitwandert, wenn links dreißig Personen stehen. */ #pnListe { max-height: calc(100vh - 210px); overflow-y: auto; padding: 8px; } .pn-zeile { display: block; width: 100%; text-align: left; border: 1px solid transparent; background: transparent; border-radius: var(--r); padding: 11px 12px; margin-bottom: 4px; min-height: 0; font: inherit; cursor: pointer; } .pn-zeile:hover { background: var(--linnen); } .pn-zeile.aktiv { background: var(--jade-fl); border-color: color-mix(in srgb, var(--jade-text) 32%, var(--jade-fl)); } .pn-zeile.ungelesen { border-left: 3px solid var(--signal-text); } .pn-zeile-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .pn-zeile-kopf .wer { font-weight: 700; font-size: 15px; color: var(--text); } .pn-betreff { font-size: 13px; font-weight: 600; color: var(--jade-text); margin-top: 2px; } /* Zwei Zeilen Vorschau, danach abgeschnitten: Die Liste soll orientieren, nicht die Nachricht ersetzen. Serverseitig ist die Vorschau ohnehin auf 140 Zeichen gekürzt — hier geht es nur um eine ruhige Zeilenhöhe. */ .pn-vorschau { font-size: 13.5px; color: var(--nebel); margin-top: 3px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pn-marken { display: flex; align-items: center; gap: 8px; margin-top: 7px; flex-wrap: wrap; } .pn-zahl { background: var(--signal); color: #fff; font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 2px 8px; font-variant-numeric: tabular-nums; } .pn-verlauf-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--rand); } .pn-kopf-aktionen { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; justify-content: flex-end; } .pn-verlauf-rolle { max-height: calc(100vh - 430px); min-height: 160px; overflow-y: auto; padding-right: 4px; } .pn-antwort { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rand); } @media (max-width: 900px) { /* Untereinander statt nebeneinander. Der Verlauf bekommt dann KEINEN eigenen Rollbereich mehr — verschachteltes Scrollen ist am Handy unangenehm, genau die Lehre aus der Listenansicht weiter oben. */ .pn-flaeche { grid-template-columns: minmax(0, 1fr); } #pnListe { max-height: 46vh; } .pn-verlauf-rolle { max-height: none; overflow-y: visible; } } @media (max-width: 560px) { .bereichswahl button { font-size: 14px; padding: 9px 8px; } .chat-blase { max-width: 96%; } .pn-verlauf-kopf { flex-direction: column; } .pn-kopf-aktionen { justify-content: flex-start; } } /* ══ Zeitwahl (18.08.2026) — public/zeitwahl.js ═════════════════════════════ Ersetzt . Das native Feld zeichnet das BETRIEBSSYSTEM: kein Token dieser Datei erreicht es, eine Praxis auf dunkler Tönung bekam beim Klick ein weißes Systemfenster. Deshalb hier ein eigenes Bauteil — und deshalb steht unten KEINE feste Farbe: alles über die Tokens, damit alle 7 Erscheinungsbilder × 2 Tönungen tragen. Der Zeitteil benutzt bewusst DASSELBE Gitter wie der Monatskalender, nur in Stunden × Minuten: ein Bedienmuster für beide Größen. */ .zw { position: relative; } .zw-paar { display: grid; gap: 10px; } /* Das Feld: sieht aus wie unsere Eingabefelder (--rand-kraeftig, var(--r)), trägt aber die Beschriftung IN sich — ein Wert braucht immer sein Etikett, und ein separates