/* ═══════════════════════════════════════════════════════════════════════════
   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 Kopfzeile ist IMMER dunkel (Chrome, s. Kommentar oben) — der Knopf
   selbst bleibt darum in beiden Themen gleich hell gestaltet, nur die zwei
   Icons tauschen. Gezeigt wird die AKTION, nicht der Zustand: im Dunklen
   die Sonne (→ wechselt zu hell), im Hellen der Mond (→ wechselt zu dunkel). */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.85); cursor: pointer; padding: 0;
  transition: background .15s ease, border-color .15s ease;
}
.theme-toggle:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.35); }
.theme-toggle svg { width: 17px; height: 17px; display: block; }
.theme-toggle .ic-sonne, .theme-toggle .ic-mond { display: none; }
:root[data-theme="dark"]  .theme-toggle .ic-sonne { display: block; }
:root[data-theme="light"] .theme-toggle .ic-mond  { display: block; }

.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 <input> 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); }
button.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; }
.kal-wochentage, .kal-gitter { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.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;
  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) {
  .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); }

/* ── „powered by 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).
   „powered by" faellt nie zuerst weg (das Label IST die Aussage) — die
   Fusszeile bricht stattdessen um (flex-wrap oben). Die GANZE Pille ist der
   Link, nicht nur das Wort. */
/* 🩸 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. */
.fuss .pb { display: inline-flex; align-items: center; gap: 9px; font-size: 12px;
  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; } }

/* ── 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; }
  .termin-flaeche[data-ansicht="kal"] {
    display: grid; grid-template-columns: 480px 1fr; gap: 20px; align-items: start;
  }
  .termin-flaeche[data-ansicht="kal"] #tagBox { position: sticky; top: 20px; }
  .termin-flaeche[data-ansicht="kal"] #tagBox:empty { display: none; }
  .kal-tag { min-height: 66px; max-height: 112px; font-size: 17px; }
  .kal-monat { font-size: 21px; }
  .kal-marke { font-size: 12px; padding: 2px 6px; }
}

@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; }
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; }
}