/* ==================================================================================
   Eigenes CSS der App — bis v74 ein <style>-Block in `index.html`.

   ⚠️ WARUM ES SEIT v75 EINE DATEI IST (CSP Stufe 2, Teil C):
   `style-src` kennt kein 'unsafe-inline' mehr. Ein <style>-Block im Markup waere
   damit gesperrt. Der andere Weg — ein sha256-Hash in beiden `_headers` — waere
   eine stille Kopplung: jede CSS-Aenderung muesste dort nachgezogen werden, und
   wer es vergisst, verliert das komplette Aussehen der App ohne Fehlermeldung.
   Eine eigene Datei braucht keinen Hash.

   ⚠️ DIE REIHENFOLGE IM <head> IST KEINE FORMALIE.
   Diese Datei wird VOR `vendor/tailwind.css` eingehaengt und NACH `marke.css`.
   Tailwind muss hinten stehen (harte Regel aus v74: die Play-Fassung haengte ihr
   <style> ans Ende von <head> und gewann damit bei gleicher Spezifitaet gegen
   `.fld`, `.subtab`, `.badge`). `marke.css` muss davor stehen, damit `.logo-plan`
   und `.logo-schatten` hier die Grundregeln dort ergaenzen koennen.

   Diese Datei gehoert NICHT nach `vendor/` — dort liegt ausschliesslich fremder
   Code, den wir selbst ausliefern (Tailwind, jsPDF, Poppins).

   Farben stehen hier NIE als Hex-Wert einer Marke, sondern als `var(--marke-…)`.
   Sie entstehen je Studio zur Laufzeit aus `konfig.js` (`markenFarbenAnwenden()`).
   Die `-rgb`-Tripel sind LEERZEICHEN-getrennt: `rgb(var(--marke-x-rgb) / 0.4)`,
   nicht `rgba(var(--marke-x-rgb), 0.4)`. Nicht mischen (Begruendung: CLAUDE.md).
   ================================================================================== */

/* Gezeichnete Bedien-Symbole (v65). Eine Klasse statt 100 Inline-Styles.
   Sie steht hier und nicht in Tailwind, weil sie zum eigenen CSS der App gehoert —
   seit v74 waere beides moeglich (der Build scannt den Quelltext), aber eine
   Verhaltensklasse im <style> neben ihren Geschwistern zu haben ist richtiger. */
.sym { display: inline-block; vertical-align: -0.15em; }
* { font-family: 'Poppins', sans-serif; -webkit-tap-highlight-color: transparent; }
body { background-color: var(--marke-primaer-hell); }
.view { display: none; }
.view.active { display: block; }
/* Die Stichwort-Vorschau in einem zugeklappten Kasten sagt, WORUM es geht. Ist er
   offen, steht der Inhalt darunter — dann ist sie doppelt und stört nur. */
details[open] > summary .vorschau { display: none; }
.nav-tab { transition: all 0.2s ease; }
.nav-tab.active { background-color: var(--marke-primaer-dunkel); color: #fff; }
.nav-tab:not(.active) { background-color: #fff; color: var(--marke-text-leise); }
select, input, textarea {
  font-family: 'Poppins', sans-serif;
  -webkit-appearance: none; appearance: none;
}
input[type="checkbox"] { -webkit-appearance: auto; appearance: auto; width: 20px; height: 20px; min-width: 20px; flex-shrink: 0; accent-color: var(--marke-primaer-dunkel); }
.badge { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 9999px; font-size: 0.72rem; font-weight: 600; }
.badge-aktiv { background: var(--marke-primaer-zart); color: var(--marke-primaer-dunkel); }
.badge-bald  { background: #fef3cd; color: #8a6400; }
.badge-normal{ background: #e8f4e8; color: #3a7a3a; }
.modal-overlay { position: fixed; inset: 0; background: rgb(var(--marke-text-rgb) / 0.45); z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.modal-box { background: white; border-radius: 1.5rem; padding: 1.75rem; max-width: 480px; width: 100%; box-shadow: 0 20px 60px rgb(var(--marke-text-rgb) / 0.25); max-height: 92vh; overflow-y: auto; }
input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.7; cursor: pointer; }
.fld { width: 100%; border: 2px solid rgb(var(--marke-primaer-rgb) / 0.4); border-radius: 0.75rem; padding: 0.75rem 1rem; color: var(--marke-text); font-size: 1rem; background: rgb(var(--marke-primaer-hell-rgb) / 0.3); }
.fld:focus { outline: none; border-color: var(--marke-primaer-dunkel); }
.lbl { display: block; font-size: 0.875rem; font-weight: 600; color: var(--marke-text); margin-bottom: 0.35rem; }
.sig-canvas { touch-action: none; background: #fff; border: 2px dashed var(--marke-primaer-dunkel); border-radius: 0.75rem; width: 100%; height: 180px; display: block; }
.plan-day { border-left: 3px solid var(--marke-primaer-dunkel); padding-left: 1rem; margin-bottom: 1rem; }
.plan-day-header { font-weight: 700; color: var(--marke-primaer-dunkel); margin-bottom: 0.4rem; }
.plan-item { color: var(--marke-text); font-size: 0.92rem; margin-bottom: 0.25rem; padding-left: 1rem; position: relative; }
.plan-item::before { content: '•'; position: absolute; left: 0; color: var(--marke-primaer); }
.subtab { padding: 0.5rem 0.9rem; border-radius: 9999px; font-size: 0.85rem; font-weight: 600; white-space: nowrap; cursor: pointer; }
.subtab.active { background: var(--marke-primaer-dunkel); color: #fff; }
.subtab:not(.active) { background: #fff; color: var(--marke-text-leise); border: 1px solid rgb(var(--marke-primaer-rgb) / 0.5); }
.sub-view { display: none; }
.sub-view.active { display: block; }
/* „Zurück zur Liste": deutlich sichtbarer Button. Hover färbt ihn ein, der Pfeil wandert nach links.
   Auf dem iPad gibt es kein Hover — dort sorgt active:scale-95 (Tailwind) für das Tipp-Feedback. */
.btn-zurueck { transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease; }
.btn-zurueck-pfeil { transition: transform 0.18s ease; }
@media (hover: hover) {
  .btn-zurueck:hover { background: var(--marke-primaer-dunkel); border-color: var(--marke-primaer-dunkel); color: #fff; box-shadow: 0 6px 18px rgb(var(--marke-primaer-dunkel-rgb) / 0.35); }
  .btn-zurueck:hover .btn-zurueck-pfeil { transform: translateX(-4px); }
}
/* Kundenliste: Auswahl-Modus zum Löschen mehrerer Kund:innen — durchgehend ROT,
   damit unmissverständlich ist, dass hier gelöscht wird (İrfans Wunsch 30.07.2026).
   EIGENES CSS statt Tailwind-Farbklassen. ⚠️ Der urspruengliche Grund ist seit v74
   WEG: er lautete „per innerHTML nachgeladenes Markup bekommt vom Play-JIT die neuen
   Farbklassen erst verzoegert, die Kaesten blieben kurz transparent" — das gebaute CSS
   scannt den Quelltext und kennt alle Klassen von Anfang an. Die Regeln bleiben
   trotzdem: sie funktionieren, und Rot ist hier keine Markenfarbe. Ein Umbau waere
   Arbeit ohne Gegenwert. NEUER Code braucht diesen Umweg nicht mehr.
   !important bzw. Attribut-Selektor, weil bg-white und die globale
   input[type=checkbox]-Regel sonst gewinnen. */
.kunde-karte-gewaehlt { border-color: #dc2626 !important; background: #fef2f2 !important; }
input[type="checkbox"].loesch-check { accent-color: #dc2626; width: 26px; height: 26px; min-width: 26px; }
.loesch-box { border-color: #fca5a5 !important; }
.loesch-titel { color: #b91c1c; }
.btn-loeschen { background: #dc2626; color: #fff; box-shadow: 0 4px 12px rgba(220,38,38,0.3); }
.btn-loeschen-aus { background: #fecaca; color: #b91c1c; cursor: not-allowed; }
.btn-alle-keine { background: #fef2f2; border: 1px solid #fca5a5; color: #b91c1c; }
.loesch-warnbox { background: #fef2f2; border-color: #fca5a5 !important; }
.loesch-link { color: #dc2626; }
/* Treuekarte: 10 Stempelfelder — festes 10er-Raster, damit sie auf jeder Breite in EINE Reihe passen.
   Jedes Feld ist ein <button>: antippbar per Finger (Handy/iPad) und per Maus (Mac), gleiches click-Event. */
.treue-reihe { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; max-width: 340px; }
.treue-punkt { aspect-ratio: 1; border-radius: 9999px; border: 2px dashed rgb(var(--marke-primaer-rgb) / 0.8); display: flex; align-items: center; justify-content: center; font-size: 14px; line-height: 1; background: #fff; padding: 0; cursor: pointer; touch-action: manipulation; transition: transform 0.12s ease; }
.treue-punkt:active { transform: scale(0.88); }
.treue-punkt-voll { border: 2px solid var(--marke-primaer-dunkel); background: var(--marke-primaer-hell); border-style: solid; }
.treue-punkt-manuell { border-color: var(--marke-akzent); background: var(--marke-akzent-hell); }
/* Mini-Punkte im Erklärtext (nur Legende, nicht klickbar) */
.treue-legende { display: inline-block; width: 11px; height: 11px; border-radius: 9999px; vertical-align: -1px; }
/* Sprachschalter DE|EN im Laser-Anamnesebogen. Eigene Klassen statt Tailwind-Farbtoenen.
   ⚠️ Der Grund („innerHTML-Markup bekommt vom Play-JIT keine neuen Farbtoene") ist seit
   v74 gegenstandslos — das gebaute CSS kennt alle Klassen. Die Regeln bleiben, weil sie
   laufen; neuer Code braucht den Umweg nicht. */
/* Hinweis bei Bögen ohne gespeicherten Einverständnis-Wortlaut (v42) — eigene Klasse.
   Grund entfallen mit v74 (siehe oben), Regel bleibt. */
.einv-hinweis { color: #b45309; }
.sprach-btn { background: #fff; touch-action: manipulation; min-width: 52px; }
.sprach-btn-an { background: var(--marke-primaer-dunkel); color: #fff; }
.sprach-btn-aus { color: var(--marke-text-leise); }
/* ---- Speicher-Füllstand + Speicher-Warnung ----
   Balken und Zahlen werden per innerHTML gerendert -> eigene Klassen statt
   Tailwind-Farbklassen. ⚠️ Der v39-Fallstrick, der das erzwang, ist mit v74 weg;
   die Klassen bleiben, neuer Code braucht sie nicht.
   Die kritische Variante der Warnbox hängt am ID-Selektor, damit sie sicher gegen die
   Tailwind-Utilities am selben Element gewinnt. */
.speicher-balken { height: 10px; border-radius: 9999px; background: rgb(var(--marke-primaer-rgb) / 0.35); overflow: hidden; margin: 7px 0; }
/* Die BREITE ist der Messwert und kommt aus dem Code. Bis v74 stand sie als
   style-Attribut am Element; seit v75 traegt das Markup `data-fuell` und
   `fuellstaendeAnwenden()` setzt daraus `--fuell` per CSSOM (siehe marke.css,
   dort steht die Begruendung ausfuehrlich).
   ⚠️ Der Rueckfallwert ist 0%, nicht 2%: bliebe die Funktion einmal aus, soll der
   Balken LEER aussehen und nicht einen erfundenen Fuellstand zeigen. */
.speicher-fuell { height: 100%; width: var(--fuell, 0%); border-radius: 9999px; background: var(--marke-primaer-dunkel); transition: width 0.3s ease; }
.speicher-fuell-warn { background: #b45309; }
.speicher-fuell-voll { background: #b91c1c; }
.speicher-wert { font-weight: 700; color: var(--marke-text); }
.speicher-wert-warn { font-weight: 700; color: #b45309; }
.speicher-wert-voll { font-weight: 700; color: #b91c1c; }
.speicher-zeile { font-size: 0.75rem; color: var(--marke-text); }
.speicher-zeile-leise { font-size: 0.7rem; color: var(--marke-text-leise); margin-top: 5px; line-height: 1.5; }
#speicher-warnung.speicher-warnbox-kritisch { background: #fef2f2; border-color: #fca5a5; }
/* Ersatz für eine Fotokachel, deren Bild sich nicht lesen lässt — eigene Klasse.
   (v39-Fallstrick, seit v74 gegenstandslos; Regel bleibt.) */
.foto-fehlt { height: 10rem; display: flex; align-items: center; justify-content: center; background: var(--marke-primaer-hell); }
.foto-fehlt span { font-size: 0.75rem; color: var(--marke-text-leise); }
/* ---- Termine-Kalender ----
   Das komplette Kalender-Markup wird per innerHTML nachgeladen. Durchgehend EIGENE
   CSS-Klassen — urspruenglich wegen des v39-Fallstricks (Play-JIT erzeugte Farbklassen fuer
   nachgeladenes Markup verzoegert, Kaesten blieben kurz transparent). ⚠️ Seit v74 ist dieser
   Grund weg; die Klassen bleiben, weil der Kalender viele eigene Zustaende hat, die in
   Tailwind ohnehin unleserlich waeren. */
.kal-kopf-reihe, .kal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.kal-kopf { text-align: center; font-size: 0.7rem; font-weight: 700; color: var(--marke-text-leise); padding-bottom: 4px; }
.kal-tag {
  aspect-ratio: 1; border-radius: 0.75rem; border: 1px solid rgb(var(--marke-primaer-rgb) / 0.45); background: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  font-size: 0.85rem; font-weight: 600; color: var(--marke-text); padding: 0; cursor: pointer;
  touch-action: manipulation; transition: transform 0.12s ease;
}
.kal-tag:active { transform: scale(0.92); }
.kal-tag-fremd { color: var(--marke-neutral); background: rgba(255,255,255,0.45); }
.kal-tag-heute { border: 2px solid var(--marke-akzent); }
/* Auswahl als RING um die Zelle, nicht als Füllung (v56, İrfans Rückmeldung).
   Bis v55 färbte die Auswahl die Zelle komplett dunkel — damit verschwand die
   Feiertagsfarbe genau in dem Moment, in dem man auf den Feiertag tippt, um ihn
   anzusehen. Der Ring liegt AUSSERHALB des Rahmens: die Füllung bleibt erhalten
   (weiß, blaugrau oder violett), der goldene „heute"-Rahmen bleibt sichtbar, und
   die Auswahl ist trotzdem eindeutig. Die 4px Rasterabstand nehmen den 3px-Ring auf;
   z-index, damit ihn die Nachbarzelle nicht anschneidet. */
.kal-tag-gewaehlt { position: relative; z-index: 1;
  box-shadow: 0 0 0 3px var(--marke-primaer-dunkel); }
.kal-punkt { width: 6px; height: 6px; border-radius: 9999px; background: var(--marke-primaer-dunkel); }
.kal-punkt-vergangen { background: var(--marke-neutral); }
.kal-punkte { display: flex; gap: 2px; align-items: center; height: 6px; }
.kal-mehr { font-size: 0.6rem; font-weight: 700; color: var(--marke-primaer-dunkel); line-height: 1; }
/* Wochenansicht: 7 Tageszeilen untereinander — auf 375px lesbarer als 7 schmale Spalten */
.kal-wochentag { border-left: 3px solid rgb(var(--marke-primaer-rgb) / 0.7); padding-left: 0.75rem; margin-bottom: 0.85rem; }
.kal-wochentag-heute { border-left-color: var(--marke-akzent); }
.kal-wochentag-titel { font-size: 0.8rem; font-weight: 700; color: var(--marke-text-leise); margin-bottom: 0.35rem; }
.kal-wochentag-heute .kal-wochentag-titel { color: var(--marke-akzent); }
.kal-leer { font-size: 0.78rem; color: var(--marke-neutral-leise); }
/* Termin-Karte (in Tagesliste und Wochenansicht) */
.kal-termin { display: flex; align-items: center; gap: 0.75rem; width: 100%; text-align: left;
  background: #fff; border: 1px solid rgb(var(--marke-primaer-rgb) / 0.45); border-radius: 1rem; padding: 0.75rem;
  margin-bottom: 0.5rem; cursor: pointer; touch-action: manipulation; transition: transform 0.12s ease; }
.kal-termin:active { transform: scale(0.99); }
.kal-termin-vergangen { background: rgba(255,255,255,0.6); border-style: dashed; }
.kal-zeit { min-width: 58px; flex-shrink: 0; font-size: 0.8rem; font-weight: 700; color: var(--marke-primaer-dunkel); }
.kal-termin-vergangen .kal-zeit { color: var(--marke-neutral-leise); }
.kal-termin-text { min-width: 0; }
.kal-name { display: block; font-size: 0.92rem; font-weight: 700; color: var(--marke-text); }
.kal-notiz { display: block; font-size: 0.78rem; color: var(--marke-text-leise); margin-top: 1px; }
.kal-pfeil { margin-left: auto; color: var(--marke-primaer-dunkel); font-size: 1.1rem; }
.kal-nav-btn { background: #fff; border: 1px solid rgb(var(--marke-primaer-rgb) / 0.6); color: var(--marke-primaer-dunkel);
  border-radius: 0.75rem; font-weight: 700; padding: 0.5rem 0.9rem; touch-action: manipulation; }
.kal-umschalt-btn { background: #fff; color: var(--marke-text-leise); border: 1px solid rgb(var(--marke-primaer-rgb) / 0.6);
  border-radius: 9999px; font-size: 0.8rem; font-weight: 600; padding: 0.35rem 0.9rem; touch-action: manipulation; }
.kal-umschalt-an { background: var(--marke-primaer-dunkel); color: #fff; border-color: var(--marke-primaer-dunkel); }
/* Werkzeugleiste unter dem Kalender: „Neuer Termin" + „Auszug". Zwei gleich breite Knöpfe,
   damit die Reihe auf 375px nicht umbricht. */
.kal-werkzeuge { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.75rem; }
.kal-werkzeug-btn { border-radius: 0.75rem; font-size: 0.82rem; font-weight: 700; padding: 0.6rem 0.5rem;
  touch-action: manipulation; transition: transform 0.12s ease; }
.kal-werkzeug-btn:active { transform: scale(0.96); }
.kal-werkzeug-haupt { background: var(--marke-primaer-dunkel); color: #fff; }
.kal-werkzeug-zweit { background: #fff; color: var(--marke-text-leise); border: 2px solid rgb(var(--marke-primaer-rgb) / 0.4); }
/* „Neuer Termin" über die volle Breite, darunter Auszug + Einlesen nebeneinander — drei
   gleich breite Knöpfe passen auf 375px nicht ohne Umbruch. */
.kal-werkzeug-voll { grid-column: 1 / -1; }
/* Herkunftszeichen an der Terminkarte: unterscheidet Terminbuch-Eintrag von „nächster Termin"
   aus dem Folgetermin-Reiter. Ohne das sähen beide gleich aus, verhalten sich beim Antippen
   aber unterschiedlich (Bearbeiten vs. Sprung zur Kundin). */
.kal-quelle { display: inline-block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.02em;
  border-radius: 9999px; padding: 0.1rem 0.45rem; margin-top: 3px;
  background: var(--marke-akzent-hell); color: var(--marke-akzent-dunkel); }
/* ---- Gesetzliche Feiertage (v54) ----
   Zwei Farben, bewusst getrennt (İrfans Vorgabe): Landes-Feiertage sind für das Studio die
   wichtigeren — an Fronleichnam ist zu, an einem Reformationstag nicht. Sie bekommen
   deshalb die kräftigere Farbe (Violett) und einen durchgehenden Rand, die bundesweiten
   die ruhigere (Blaugrau). Bewusst NICHT rosa oder gold: das sind Marken- und
   Auswahlfarben („heute" trägt den goldenen Ring) und würden sich vermischen. */
/* Sattigkeit bewusst kräftig (İrfan, 07.08.2026): die erste Fassung war so hell, dass ein
   Feiertag im Raster kaum auffiel. Ein Feiertag muss auf einen Blick erkennbar sein, ohne
   dass man die Zelle sucht. Der Kontrast der Tageszahl bleibt dabei über 7:1. */
/* ⚠️ ES SIND SEIT v77 GENAU ZWEI WERTE — EIN TON JE FEIERTAGSART, UND ZWAR ÜBERALL:
   Monatszelle, Legendenwürfel UND die Namensplakette in Wochen-/Tagesansicht. Vorher
   waren es vier Töne für zwei Sachverhalte (hell in der Zelle, satt in der Plakette),
   und beim Antippen kam ein dritter dazu. Wer die Farbe ändert, ändert jetzt alle drei
   Stellen in einem Zug.
   Bis v74 standen die Werte sogar ein zweites Mal als Inline-Stil in der Legende, mit der
   Bitte, sie von Hand gleichzuhalten — genau die Sorte Doppelspur, die hier weg soll.
   Es sind KEINE `--marke-…`-Variablen: Feiertagsfarben sind bewusst studioweit
   gleich und bewusst NICHT rosa oder gold (Begruendung im Kommentar oben).

   ⚠️ WARUM MITTELTIEF UND NICHT MEHR HELL (İrfan, 12.08.2026): Die Schrift im
   Feiertagswürfel soll WEISS sein — „kalender schrift von feiertag immernoch schwarz".
   Weiss auf den alten hellen Tönen hätte **1,85:1** ergeben und wäre unlesbar gewesen;
   auf diesen Tönen sind es **4,6:1** (blau) und **6,4:1** (violett). Die Farbe musste also
   mitwandern, das war keine freie Wahl. Die noch satteren Töne (#2F5488 / #5B34A8, bis v76
   in der Plakette und in der Auswahl) hat İrfan am Bild als zu dunkel verworfen.
   ⚠️ Wer hier aufhellt, macht die weisse Schrift unlesbar. Beides gehört zusammen. */
:root {
  --feiertag-bund: #4E77B0;
  --feiertag-land: #7048B8;
}
.kal-tag-feiertag-bund { background: var(--feiertag-bund); border-color: var(--feiertag-bund); }
.kal-tag-feiertag-land { background: var(--feiertag-land); border-color: var(--feiertag-land); }
.kal-tag-feiertag-bund > span:first-child,
.kal-tag-feiertag-land > span:first-child { color: #fff; font-weight: 800; }
/* Punkte für Termine müssen auf der Fläche noch zu sehen sein. */
.kal-tag-feiertag-bund .kal-punkt,
.kal-tag-feiertag-land .kal-punkt { background: #fff; }
/* Der goldene „heute"-Rahmen muss über der Feiertagsfläche sichtbar bleiben.
   Die AUSWAHL überschreibt seit v56 nichts mehr — sie liegt als Ring außen herum
   (siehe .kal-tag-gewaehlt). Ein angetippter Feiertag bleibt damit farbig. */
.kal-tag-heute.kal-tag-feiertag-bund, .kal-tag-heute.kal-tag-feiertag-land { border-color: var(--marke-akzent); }
/* Feiertagsname IM MONATSRASTER (v64). Der `title` half auf dem iPad nie — dort gibt es
   kein Mouseover. Eine Zeile, hart abgeschnitten: „Fronleichn…" beantwortet die Frage
   „warum ist der Tag farbig?", ein unsichtbarer Tooltip nicht. Farbe erbt von der Zelle,
   damit sie bei beiden Feiertagsarten stimmt. */
/* ⚠️ `min-width: 0` auf der ZELLE ist Pflicht, nicht Kosmetik: Rasterzellen haben
   `min-width: auto` und können deshalb NICHT unter ihre Inhaltsbreite schrumpfen. Ohne
   diese Zeile macht ein langer Name wie „Fronleichnam" die Zelle breiter als ihre Spalte,
   und das ganze Raster schiebt die Seite quer aus dem Bild — bei 375px nachgemessen:
   470px statt 375px. Nicht entfernen, auch nicht „aufräumen". */
.kal-grid > .kal-tag { min-width: 0; }
.kal-tag-ft-name { display: block; width: 100%; max-width: 100%; font-size: 0.5rem;
  line-height: 1.05; font-weight: 700; text-align: center; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; padding: 0 1px; margin-top: 1px; }
.kal-tag-feiertag-bund .kal-tag-ft-name,
.kal-tag-feiertag-land .kal-tag-ft-name { color: #fff; }
/* Zusatzzeile „Feiertag in …" unter dem Namen (Wochen-/Tagesansicht) — die Angabe, die
   Googles Feiertagskalender in der Beschreibung führt. */
.kal-feiertag-wo { display: block; font-size: 0.65rem; color: var(--marke-text-leise);
  margin: -0.25rem 0 0.4rem; }
/* Name des Feiertags in Wochen-, Tages- und Tagesliste */
.kal-feiertag-zeile { display: inline-block; font-size: 0.7rem; font-weight: 700;
  border-radius: 9999px; padding: 0.12rem 0.55rem; margin-bottom: 0.4rem; }
/* ⚠️ SEIT v77 DERSELBE TON WIE DIE MONATSZELLE. Bis v76 war die Plakette satter als die
   Zelle (#2F5488 / #5B34A8) — derselbe Feiertag erschien also in zwei Blautönen, je
   nachdem, wo man hinsah. Jetzt eine Farbe je Feiertagsart, über alle drei Stellen. */
.kal-feiertag-bund { background: var(--feiertag-bund); color: #fff; }
.kal-feiertag-land { background: var(--feiertag-land); color: #fff; }
/* ---- Der AUSGEWAEHLTE Tag (v76, angepasst in v77 — İrfans Vorgabe 12.08.2026) ----
   Ein GEWOEHNLICHER Tag wird beim Antippen gefuellt und bekommt weisse Schrift. Das kippt
   v56, wo die Fuellung abgeschafft worden war; der Grund von damals — „die Feiertagsfarbe
   verschwand genau in dem Moment, in dem man auf den Feiertag tippt" — ist hier aber gar
   nicht mehr beruehrt, siehe naechster Absatz.

   ⚠️ EIN FEIERTAG BEHAELT BEIM ANTIPPEN SEINE FARBE UNVERAENDERT. Er ist ohnehin schon
   gefuellt und hat weisse Schrift; die Auswahl zeigt allein der Ring aussen herum (so war
   es v56 bis v75 durchgehend, das traegt). In v76 wurde er beim Antippen zusaetzlich in
   den satten Ton geschoben — İrfan hat das am Bild als zu dunkel verworfen
   („die farben sind sehr dunkel, ist das so gewollt???"). Deshalb hier ein `:not()`:
   die rosé-dunkle Fuellung gilt NUR fuer Tage ohne Feiertagsfarbe.
   ⚠️ Wer das `:not()` entfernt, faerbt jeden angetippten Feiertag rosé — dann ist die
   Feiertagsfarbe weg, und man ist wieder bei genau dem Problem, das v56 geloest hat.

   ⚠️ DIESER BLOCK MUSS HINTER DEN FEIERTAGS-REGELN STEHEN. `.kal-tag-gewaehlt >
   span:first-child` und `.kal-tag-feiertag-bund > span:first-child` haben DIESELBE
   Spezifitaet; es entscheidet allein die Reihenfolge. Weiter oben stehend waere dieser
   Block wirkungslos — ohne Fehlermeldung. */
.kal-tag-gewaehlt:not(.kal-tag-feiertag-bund):not(.kal-tag-feiertag-land) {
  background: var(--marke-primaer-dunkel); color: #fff; }
/* Tageszahl, Feiertagsname, Terminpunkte und das „+2" — alle vier stehen sonst in einer
   dunklen Farbe und waeren auf der gefuellten Zelle unsichtbar. Bei einem Feiertag sind
   sie ohnehin schon weiss; die Regel schadet dort nicht. */
.kal-tag-gewaehlt > span:first-child,
.kal-tag-gewaehlt .kal-tag-ft-name,
.kal-tag-gewaehlt .kal-mehr { color: #fff; }
.kal-tag-gewaehlt .kal-punkt { background: #fff; }

/* Legende unter dem Kalender */
.kal-legende { display: flex; flex-wrap: wrap; gap: 0.5rem 0.9rem; margin-top: 0.6rem; align-items: center; }
.kal-legende span { display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.68rem; color: var(--marke-text-leise); }
.kal-legende i { width: 0.7rem; height: 0.7rem; border-radius: 0.2rem; display: inline-block; }
/* Die beiden Farbwuerfel — dieselben Variablen wie die Zellen oben, siehe dort. */
.kal-legende i.ft-bund { background: var(--feiertag-bund); border: 1px solid var(--feiertag-bund); }
.kal-legende i.ft-land { background: var(--feiertag-land); border: 1px solid var(--feiertag-land); }
/* Zeitraum-Auswahl im Auszug-Fenster */
.kal-zeitraum-wahl { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.kal-zeitraum-btn { background: #fff; color: var(--marke-text-leise); border: 1px solid rgb(var(--marke-primaer-rgb) / 0.6);
  border-radius: 9999px; font-size: 0.8rem; font-weight: 600; padding: 0.35rem 0.85rem; touch-action: manipulation; }
.kal-zeitraum-an { background: var(--marke-primaer-dunkel); color: #fff; border-color: var(--marke-primaer-dunkel); }
/* Import-Vorschau: schmale Tabelle mit eigener Scrollfläche, damit das Fenster bei 200
   Terminen nicht ins Endlose wächst. Eigene Klassen (per innerHTML eingesetzt). */
.imp-tabelle-rahmen { max-height: 42vh; overflow: auto; border: 1px solid rgb(var(--marke-primaer-rgb) / 0.45); border-radius: 0.75rem; }
.imp-tab { width: 100%; border-collapse: collapse; font-size: 0.78rem; }
.imp-tab th { position: sticky; top: 0; background: var(--marke-primaer-dunkel); color: #fff;
  text-align: left; font-weight: 700; padding: 0.45rem 0.55rem; white-space: nowrap; }
.imp-tab td { padding: 0.4rem 0.55rem; border-top: 1px solid rgb(var(--marke-primaer-rgb) / 0.3); color: var(--marke-text); vertical-align: top; }
.imp-tab tr:nth-child(even) td { background: rgb(var(--marke-primaer-hell-rgb) / 0.45); }
.imp-frei { display: inline-block; font-size: 0.6rem; font-weight: 700; border-radius: 9999px;
  padding: 0.05rem 0.35rem; background: var(--marke-akzent-hell); color: var(--marke-akzent-dunkel); }
.imp-mehr { font-size: 0.72rem; color: var(--marke-text-leise); padding: 0.4rem 0.55rem; }
.imp-zahl { font-weight: 700; color: var(--marke-primaer-dunkel); }
.imp-detail { display: block; font-size: 0.75rem; color: var(--marke-text-leise); margin-top: 2px; line-height: 1.5; }
/* Auffällige Zeile in der Vorschau (mehrdeutiger Name, Serientermin, möglicherweise doppelt).
   Bewusst mit WORT, nicht nur mit Farbe — eine Farbe allein ist keine Information. */
.imp-warn { display: inline-block; font-size: 0.6rem; font-weight: 700; border-radius: 9999px;
  padding: 0.05rem 0.35rem; margin-left: 0.2rem; background: #FDE8D2; color: #8A4B08; }
.imp-zeile-warn td { background: #FEF6EC !important; }
.imp-hinweiskasten { font-size: 0.72rem; line-height: 1.5; color: #7A4A12; background: #FEF6EC;
  border: 1px solid #F2CFA4; border-radius: 0.6rem; padding: 0.5rem 0.65rem; margin-top: 0.6rem; }
/* ---- Terminstatus (v53) ---- */
.t-status-wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
.t-status-btn { background: #fff; color: var(--marke-text-leise); border: 1px solid rgb(var(--marke-primaer-rgb) / 0.6);
  border-radius: 0.7rem; font-size: 0.78rem; font-weight: 600; padding: 0.5rem 0.4rem; touch-action: manipulation; }
.t-status-an { background: var(--marke-primaer-dunkel); color: #fff; border-color: var(--marke-primaer-dunkel); }
.t-status-an.t-status-aus-btn { background: #8A4B08; border-color: #8A4B08; }
/* Abgesagt / nicht erschienen im Kalender: sichtbar bleiben, aber klar abgesetzt.
   Durchgestrichen UND gedämpft UND mit Wort — Farbe allein reicht nicht. */
.kal-termin-abgesagt { background: rgba(255,255,255,0.55); border-style: dashed; opacity: 0.75; }
.kal-termin-abgesagt .kal-name { text-decoration: line-through; }
.kal-termin-abgesagt .kal-zeit { text-decoration: line-through; color: var(--marke-neutral-leise); }
.kal-status { display: inline-block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.02em;
  border-radius: 9999px; padding: 0.1rem 0.45rem; margin-top: 3px; margin-right: 0.25rem;
  background: #FDE8D2; color: #8A4B08; }
.kal-status-ok { background: #DFF0DC; color: #2F6B26; }
/* Ruhiger Nachtrag-Hinweis in der Tagesliste für vergangene, noch offene Termine.
   Kein Modal, keine Zwangsabfrage — Gizem entscheidet, ob und wann. */
.kal-nachtrag { background: rgb(var(--marke-primaer-hell-rgb) / 0.55); border: 1px dashed rgb(var(--marke-primaer-rgb) / 0.5);
  border-radius: 0.75rem; padding: 0.6rem 0.7rem; margin-bottom: 0.5rem; }
.kal-nachtrag-text { font-size: 0.75rem; color: var(--marke-text-leise); line-height: 1.45; }
.kal-nachtrag-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; margin-top: 0.45rem; }
.kal-nachtrag-btn { background: #fff; border: 1px solid rgb(var(--marke-primaer-rgb) / 0.6); color: var(--marke-primaer-dunkel);
  border-radius: 0.6rem; font-size: 0.75rem; font-weight: 700; padding: 0.4rem 0.3rem; touch-action: manipulation; }
@media print { .no-print { display: none !important; } body { background: #fff; } }

/* ==================================================================================
   Aus den frueheren style-Attributen (v75, CSP Stufe 2 Teil C)

   16 Attribute standen bis v74 in `index.html`, zwei erzeugte in `konfig.js`.
   Unter `style-src 'self'` sind sie alle gesperrt — und zwar als ATTRIBUT, nicht
   wegen ihres Inhalts. Ein CSS-Variablen-Attribut waere genauso gesperrt gewesen.

   Vier der achtzehn Werte sind DYNAMISCH und stehen deshalb nicht hier, sondern
   kommen weiter aus dem Code — ueber CSSOM statt ueber ein Attribut:
     · zwei Logo-Groessen  -> `--logo-px`, siehe `marke.css`
     · zwei Balkenbreiten  -> `--fuell`,   siehe `.speicher-fuell` oben

   Zwei weitere brauchten gar keine eigene Regel: `text-wrap: balance` ist in
   Tailwind 3.4 `text-balance`, und die beiden Grautoene der LiynaMedia-Zeile sind
   auf das Zeichen genau `text-gray-400` (#9ca3af) und `text-gray-500` (#6b7280).
   ================================================================================== */
.login-verlauf { background: linear-gradient(135deg, var(--marke-primaer-hell) 0%, var(--marke-primaer) 50%, var(--marke-primaer-hell) 100%); }
/* Eingabefeld fuer den Termin-Import: bewusst 0.85rem und nicht Tailwinds `text-sm`
   (0.875rem) — der Wert stand so seit der ersten Fassung, und eine Vorschau, in der
   die Spalten anders umbrechen als vorher, waere eine Aenderung ohne Auftrag. */
.imp-eingabe { font-size: 0.85rem; }
/* Logo-Zusaetze. Die Grundregeln (Groesse, object-fit) stehen in `marke.css`. */
.logo-schatten { filter: drop-shadow(0 4px 3px rgba(0,0,0,.07)); }
.logo-plan { margin: 0 auto 4px; }
/* Nachsorge-Plan: Kopf, Studiozeile und die beiden Kaesten. Der Plan wird per
   innerHTML gebaut und auch gedruckt — die Klassen gelten in beidem. */
.plan-kopf { background: linear-gradient(135deg, var(--marke-primaer-dunkel) 0%, var(--marke-primaer) 100%); }
.plan-studio { color: var(--marke-text); }
.plan-studio-leise { color: var(--marke-text-leise); }
.plan-warnung { background: #fef3cd; border: 1.5px solid var(--marke-akzent); border-radius: .75rem; padding: .9rem 1.1rem; margin-top: 1rem; }
.plan-notiz { background: rgb(var(--marke-akzent-rgb) / .1); border: 1px solid rgb(var(--marke-akzent-rgb) / .4); border-radius: .75rem; padding: 1rem; margin-top: 1rem; }
/* Beide Kastentitel tragen dieselbe Farbe — bis v74 zweimal derselbe Inline-Stil. */
.plan-kasten-titel { color: var(--marke-akzent); }
  
