/* ═══════════════════════════════════════════════════════════════════
   ÜberCal — Design-Themes (Farbwelten)

   WICHTIG: Ohne data-theme am <html> bleibt ALLES exakt wie bisher.
   Das Grunddesign ist die Voreinstellung und wird hier nicht angefasst.
   Jedes Theme ueberschreibt nur die Variablen aus :root in style.css.

   Getrennt vom vorhandenen "Hintergrund-Motiv" (body[data-bg]) — das
   bleibt unveraendert und laesst sich frei dazu kombinieren.
   ═══════════════════════════════════════════════════════════════════ */

/* ---------- Klar & Professionell ---------- */
html[data-theme="klar"]{
  --bg:#f1f5f9; --bg-soft:#f8fafc; --card:#fff;
  --border:#e2e8f0; --border-soft:#eef2f7;
  --text:#0f172a; --text-muted:#64748b;
  --primary:#2563eb; --primary-dark:#1d4ed8; --primary-soft:rgba(37,99,235,.10);
  --radius-sm:6px; --radius:10px; --radius-lg:14px;
}
/* ---------- Freundlich & Modern ---------- */
html[data-theme="modern"]{
  --bg:#f7f5f2; --bg-soft:#faf8f5; --card:#fff;
  --border:#eae6f0; --border-soft:#f3f0f7;
  --text:#2a2440; --text-muted:#7c7690;
  --primary:#6d5ae6; --primary-dark:#5a48cc; --primary-soft:rgba(109,90,230,.12);
  --radius-sm:10px; --radius:16px; --radius-lg:22px;
}
/* ---------- Für Kinder ---------- */
html[data-theme="kinder"]{
  --bg:#fffbe8; --bg-soft:#fff6d9; --card:#fff;
  --border:#ffd23f; --border-soft:#ffe9a3;
  --text:#39316b; --text-muted:#7a6fae;
  --primary:#ff4f81; --primary-dark:#e63c6c; --primary-soft:rgba(255,79,129,.14);
  --radius-sm:14px; --radius:20px; --radius-lg:26px;
}
/* ---------- Große Schrift (hoher Kontrast) ---------- */
html[data-theme="senioren"]{
  --bg:#fff; --bg-soft:#f2f2f2; --card:#fff;
  --border:#333; --border-soft:#666;
  --text:#000; --text-muted:#333;
  --primary:#0b4f9e; --primary-dark:#083b78; --primary-soft:rgba(11,79,158,.12);
  --radius-sm:4px; --radius:8px; --radius-lg:10px;
  --shadow-sm:none; --shadow:none; --shadow-lg:none;
  --event-font-size:0.95rem;
}
html[data-theme="senioren"] body{font-size:1.15rem}
/* ---------- Rosé & Elegant ---------- */
html[data-theme="rose"]{
  --bg:#fdf4f7; --bg-soft:#fbeaf1; --card:#fff;
  --border:#f3dbe4; --border-soft:#f9ecf1;
  --text:#4a2c3a; --text-muted:#96707f;
  --primary:#d6608f; --primary-dark:#bc4c78; --primary-soft:rgba(214,96,143,.12);
  --radius-sm:10px; --radius:18px; --radius-lg:24px;
}
/* ---------- Werkstatt (dunkel) ---------- */
html[data-theme="werkstatt"]{
  --app-bg:#15181c; --bg:#1c1f24; --bg-soft:#20252a; --card:#262b31;
  --border:#39414a; --border-soft:#2f363d;
  --text:#e8ecf1; --text-muted:#98a3ae;
  --primary:#ff7a1a; --primary-dark:#e06612; --primary-soft:rgba(255,122,26,.16);
  --radius-sm:3px; --radius:5px; --radius-lg:7px;
}
/* ---------- Comic ---------- */
html[data-theme="comic"]{
  --bg:#ffe66d; --bg-soft:#fff8d6; --card:#fff;
  --border:#000; --border-soft:#333;
  --text:#000; --text-muted:#333;
  --primary:#ff3b30; --primary-dark:#d92b21; --primary-soft:rgba(255,59,48,.14);
  --radius-sm:8px; --radius:14px; --radius-lg:18px;
}
/* ---------- Galaxis ---------- */
html[data-theme="galaxis"]{
  --app-bg:#03050a; --bg:#05070d; --bg-soft:#111a2e; --card:#0d1220;
  --border:#1e2a45; --border-soft:#17203a;
  --text:#d8e2ff; --text-muted:#7f8db3;
  --primary:#ffe81f; --primary-dark:#d9c419; --primary-soft:rgba(255,232,31,.14);
  --radius-sm:2px; --radius:4px; --radius-lg:6px;
}
/* ---------- Steinzeit ---------- */
html[data-theme="steinzeit"]{
  --bg:#efe3d0; --bg-soft:#e9dcc6; --card:#f7efe2;
  --border:#c9b28f; --border-soft:#dbc9ab;
  --text:#3d2b1f; --text-muted:#7a6249;
  --primary:#b5651d; --primary-dark:#955215; --primary-soft:rgba(181,101,29,.14);
  --radius-sm:7px; --radius:10px; --radius-lg:14px;
}
/* ---------- Nachtmodus ---------- */
html[data-theme="nacht"]{
  --app-bg:#0a1120; --bg:#0f172a; --bg-soft:#172033; --card:#1e293b;
  --border:#334155; --border-soft:#293548;
  --text:#e2e8f0; --text-muted:#94a3b8;
  --primary:#60a5fa; --primary-dark:#3b82f6; --primary-soft:rgba(96,165,250,.16);
}
/* ---------- Wald ---------- */
html[data-theme="wald"]{
  --bg:#eef5ee; --bg-soft:#e4efe6; --card:#fff;
  --border:#cfe3d3; --border-soft:#e0eee3;
  --text:#1f3a2b; --text-muted:#5c7a67;
  --primary:#2f7d4f; --primary-dark:#256640; --primary-soft:rgba(47,125,79,.12);
  --radius-sm:8px; --radius:14px; --radius-lg:20px;
}
/* ---------- Meer & Küste ---------- */
html[data-theme="meer"]{
  --bg:#eaf6f8; --bg-soft:#ddeff2; --card:#fff;
  --border:#cfe8ec; --border-soft:#e2f2f5;
  --text:#103a44; --text-muted:#4d7d87;
  --primary:#0e9aa7; --primary-dark:#0b7d88; --primary-soft:rgba(14,154,167,.12);
  --radius-sm:10px; --radius:16px; --radius-lg:22px;
}
/* ---------- Sonnenuntergang ---------- */
html[data-theme="sonne"]{
  --bg:#fff2ea; --bg-soft:#ffe6d8; --card:#fff;
  --border:#ffd8c7; --border-soft:#ffe8dd;
  --text:#4a2418; --text-muted:#8a5a45;
  --primary:#ff6b4a; --primary-dark:#e2543a; --primary-soft:rgba(255,107,74,.13);
  --radius-sm:10px; --radius:18px; --radius-lg:24px;
}
/* ---------- Synthwave ---------- */
html[data-theme="synthwave"]{
  --app-bg:#0d0220; --bg:#14042c; --bg-soft:#260c50; --card:#1e0940;
  --border:#3d1a6b; --border-soft:#2f1355;
  --text:#f0e6ff; --text-muted:#a98fd6;
  --primary:#ff2fb9; --primary-dark:#d9219b; --primary-soft:rgba(255,47,185,.16);
  --radius-sm:4px; --radius:8px; --radius-lg:12px;
}
/* ---------- Papier & Notizbuch ---------- */
html[data-theme="papier"]{
  --bg:#f7f3e8; --bg-soft:#f1ebdb; --card:#fffdf6;
  --border:#ded5c0; --border-soft:#ebe3d2;
  --text:#3a3630; --text-muted:#726c60;
  --primary:#5b6b8c; --primary-dark:#485674; --primary-soft:rgba(91,107,140,.12);
  --radius-sm:3px; --radius:6px; --radius-lg:8px;
}
/* ---------- Minimal Schwarzweiß ---------- */
html[data-theme="minimal"]{
  --bg:#fff; --bg-soft:#fafafa; --card:#fff;
  --border:#e0e0e0; --border-soft:#efefef;
  --text:#111; --text-muted:#777;
  --primary:#111; --primary-dark:#000; --primary-soft:rgba(0,0,0,.06);
  --radius-sm:2px; --radius:2px; --radius-lg:3px;
  --shadow-sm:none; --shadow:none; --shadow-lg:none;
}
/* ---------- Winter ---------- */
html[data-theme="winter"]{
  --bg:#f2f7fb; --bg-soft:#e8f1f8; --card:#fff;
  --border:#d8e6f0; --border-soft:#e7f0f7;
  --text:#1c3d5a; --text-muted:#5b7d97;
  --primary:#c0392b; --primary-dark:#a12f22; --primary-soft:rgba(192,57,43,.12);
  --radius-sm:8px; --radius:14px; --radius-lg:18px;
}
/* ---------- Frühling ---------- */
html[data-theme="fruehling"]{
  --bg:#fbfdf5; --bg-soft:#f2f9e8; --card:#fff;
  --border:#dcecc9; --border-soft:#eaf4de;
  --text:#33452a; --text-muted:#6b8256;
  --primary:#86c440; --primary-dark:#6da432; --primary-soft:rgba(134,196,64,.14);
  --radius-sm:10px; --radius:18px; --radius-lg:24px;
}
/* ---------- Herbst ---------- */
html[data-theme="herbst"]{
  --bg:#fbf3e8; --bg-soft:#f5e8d5; --card:#fff;
  --border:#e6cfae; --border-soft:#f0e0c9;
  --text:#4a2f1a; --text-muted:#8a6a4a;
  --primary:#c1651a; --primary-dark:#a25314; --primary-soft:rgba(193,101,26,.13);
  --radius-sm:8px; --radius:12px; --radius-lg:16px;
}
/* ---------- Business ---------- */
html[data-theme="business"]{
  --bg:#f5f6f8; --bg-soft:#edeff3; --card:#fff;
  --border:#dfe3ea; --border-soft:#ebeef3;
  --text:#16233a; --text-muted:#5d6b82;
  --primary:#16325c; --primary-dark:#0f2444; --primary-soft:rgba(22,50,92,.10);
  --radius-sm:3px; --radius:6px; --radius-lg:8px;
}
/* ---------- Neon ---------- */
html[data-theme="neon"]{
  --app-bg:#000; --bg:#0a0a0a; --bg-soft:#1a1a1a; --card:#141414;
  --border:#2a2a2a; --border-soft:#222;
  --text:#eaeaea; --text-muted:#8f8f8f;
  --primary:#39ff14; --primary-dark:#2ad10c; --primary-soft:rgba(57,255,20,.14);
  --radius-sm:6px; --radius:10px; --radius-lg:14px;
}
/* ---------- Kaffeehaus ---------- */
html[data-theme="kaffee"]{
  --bg:#f3ece2; --bg-soft:#eae0d2; --card:#fdf9f3;
  --border:#d9c7b2; --border-soft:#e7dbc9;
  --text:#3b2a1d; --text-muted:#7c6553;
  --primary:#8b5e3c; --primary-dark:#714a2e; --primary-soft:rgba(139,94,60,.13);
  --radius-sm:7px; --radius:12px; --radius-lg:16px;
}

/* ── Dunkle Themes: App-Hintergrund mitziehen, wenn kein Motiv gewaehlt ── */
html[data-theme="werkstatt"] body:not([data-bg]),
html[data-theme="galaxis"]   body:not([data-bg]),
html[data-theme="nacht"]     body:not([data-bg]),
html[data-theme="synthwave"] body:not([data-bg]),
html[data-theme="neon"]      body:not([data-bg]){background:var(--app-bg)}

/* ═══════════════════════════════════════════════════════════════════
   THEME BRINGT SEIN BILD MIT

   Wer "Steinzeit" waehlt, will die Hoehlenwand sehen - nicht nur
   braune Farben. Themes mit passendem Motiv setzen es daher selbst.

   Greift NUR, solange im Waehler "Hintergrund-Motiv" nichts eigenes
   gewaehlt ist (body ohne data-bg). Sobald dort etwas ausgesucht wird,
   gewinnt diese Wahl - der vorhandene Waehler bleibt also voll wirksam.
   ═══════════════════════════════════════════════════════════════════ */
html[data-theme="steinzeit"] body:not([data-bg]),
html[data-theme="kinder"]    body:not([data-bg]),
html[data-theme="papier"]    body:not([data-bg]),
html[data-theme="comic"]     body:not([data-bg]){
  background:
    linear-gradient(rgba(255,255,255,var(--th-fade)), rgba(255,255,255,var(--th-fade))) fixed,
    var(--th-bild) repeat fixed !important;
  background-size: auto, 340px 340px !important;
}
html[data-theme="steinzeit"] body:not([data-bg]){ --th-bild:url("../assets/themes/bg-steinzeit.jpg"); --th-fade:0.30 }
html[data-theme="kinder"]    body:not([data-bg]){ --th-bild:url("../assets/themes/bg-kinder.jpg");    --th-fade:0.30 }
html[data-theme="papier"]    body:not([data-bg]){ --th-bild:url("../assets/themes/bg-papier.jpg");    --th-fade:0.20 }
html[data-theme="comic"]     body:not([data-bg]){ --th-bild:url("../assets/themes/bg-comic.jpg");     --th-fade:0.45 }

/* Dunkle Themes: abdunkeln statt aufhellen, sonst wird alles grau */
html[data-theme="galaxis"]   body:not([data-bg]),
html[data-theme="nacht"]     body:not([data-bg]),
html[data-theme="synthwave"] body:not([data-bg]),
html[data-theme="neon"]      body:not([data-bg]){
  background:
    linear-gradient(rgba(0,0,0,var(--th-dark)), rgba(0,0,0,var(--th-dark))) fixed,
    var(--th-bild) repeat fixed !important;
  background-size: auto, 420px 420px !important;
}
html[data-theme="galaxis"]   body:not([data-bg]){ --th-bild:url("../assets/themes/bg-galaxis.jpg");   --th-dark:0.30 }
html[data-theme="nacht"]     body:not([data-bg]){ --th-bild:url("../assets/themes/bg-nacht.jpg");     --th-dark:0.25 }
html[data-theme="synthwave"] body:not([data-bg]){ --th-bild:url("../assets/themes/bg-synthwave.jpg"); --th-dark:0.45 }
html[data-theme="neon"]      body:not([data-bg]){ --th-bild:url("../assets/themes/bg-neon.jpg");      --th-dark:0.45 }

/* Ohne das hier saehe man vom Bild fast nichts: #calendar-container
   liegt deckend darueber und verdeckt die ganze Flaeche. Deshalb bei
   Bild-Themes durchscheinend machen - der Kalender bleibt lesbar, das
   Motiv scheint aber ueberall durch, auch am Handy (dort nimmt der
   Container die volle Breite ein). */
html[data-theme="steinzeit"] body:not([data-bg]) #calendar-container,
html[data-theme="kinder"]    body:not([data-bg]) #calendar-container,
html[data-theme="papier"]    body:not([data-bg]) #calendar-container,
html[data-theme="comic"]     body:not([data-bg]) #calendar-container,
html[data-theme="galaxis"]   body:not([data-bg]) #calendar-container,
html[data-theme="nacht"]     body:not([data-bg]) #calendar-container,
html[data-theme="synthwave"] body:not([data-bg]) #calendar-container,
html[data-theme="neon"]      body:not([data-bg]) #calendar-container{
  background: transparent !important;
  box-shadow: none !important;
}
/* Tageskacheln durchsichtig, damit das Motiv im ganzen Kalender
   sichtbar ist. Die Tageszahl sitzt weiterhin auf ihrer deckenden
   Kopfleiste, bleibt also lesbar.

   ACHTUNG - hier stand vorher "opacity: 0.88". Das war ein Fehler:
   opacity erzeugt einen eigenen Stapelkontext, dadurch wurden die
   Kacheln UEBER die durchgehenden Balken mehrtaegiger Termine
   ("Barbara Urlaub", "Tansania") gezeichnet und haben sie verdeckt.
   Der Termin war korrekt und volle Breite - nur unsichtbar.
   Also niemals opacity auf .fc-daygrid-day-frame setzen. */
html[data-theme="steinzeit"] body:not([data-bg]) .fc .fc-daygrid-day-frame,
html[data-theme="kinder"]    body:not([data-bg]) .fc .fc-daygrid-day-frame,
html[data-theme="papier"]    body:not([data-bg]) .fc .fc-daygrid-day-frame,
html[data-theme="comic"]     body:not([data-bg]) .fc .fc-daygrid-day-frame,
html[data-theme="galaxis"]   body:not([data-bg]) .fc .fc-daygrid-day-frame,
html[data-theme="nacht"]     body:not([data-bg]) .fc .fc-daygrid-day-frame,
html[data-theme="synthwave"] body:not([data-bg]) .fc .fc-daygrid-day-frame,
html[data-theme="neon"]      body:not([data-bg]) .fc .fc-daygrid-day-frame{
  background-color: transparent !important;
  background-image: none !important;
}

/* ═══ Gezeichnete Hintergrund-Motive (gekachelte Bilder) ═══
   Nutzt denselben Mechanismus wie die vorhandenen Farbverlaeufe in
   style.css: eine weisse Aufhell-Ebene ueber dem Bild, Staerke je
   Motiv ueber --bg-fade. Dunkle Motive hellen NICHT auf, sondern
   dunkeln ab, sonst wuerden sie grau. */
body[data-bg="hoehle"]      { --bg-fade:0.62; }
body[data-bg="kinderkritzel"]{ --bg-fade:0.58; }
body[data-bg="notizblock"]  { --bg-fade:0.45; }
body[data-bg="comicdruck"]  { --bg-fade:0.68; }
body[data-bg="hoehle"],
body[data-bg="kinderkritzel"],
body[data-bg="notizblock"],
body[data-bg="comicdruck"]{
  background:
    linear-gradient(rgba(255,255,255,var(--bg-fade)), rgba(255,255,255,var(--bg-fade))) fixed,
    var(--bg-bild) repeat fixed !important;
  background-size: auto, 340px 340px !important;
}
body[data-bg="hoehle"]       { --bg-bild:url("../assets/themes/bg-steinzeit.jpg"); }
body[data-bg="kinderkritzel"]{ --bg-bild:url("../assets/themes/bg-kinder.jpg"); }
body[data-bg="notizblock"]   { --bg-bild:url("../assets/themes/bg-papier.jpg"); }
body[data-bg="comicdruck"]   { --bg-bild:url("../assets/themes/bg-comic.jpg"); }

/* Dunkle Motive: abdunkeln statt aufhellen */
body[data-bg="weltall"]     { --bg-dark:0.30; --bg-bild:url("../assets/themes/bg-galaxis.jpg"); }
body[data-bg="nachthimmel"] { --bg-dark:0.25; --bg-bild:url("../assets/themes/bg-nacht.jpg"); }
body[data-bg="retrogitter"] { --bg-dark:0.45; --bg-bild:url("../assets/themes/bg-synthwave.jpg"); }
body[data-bg="neongitter"]  { --bg-dark:0.45; --bg-bild:url("../assets/themes/bg-neon.jpg"); }
body[data-bg="weltall"],
body[data-bg="nachthimmel"],
body[data-bg="retrogitter"],
body[data-bg="neongitter"]{
  background:
    linear-gradient(rgba(0,0,0,var(--bg-dark)), rgba(0,0,0,var(--bg-dark))) fixed,
    var(--bg-bild) repeat fixed !important;
  background-size: auto, 420px 420px !important;
}

/* Vorschau-Kacheln im Wähler duerfen nicht gekachelt aussehen */
.bg-theme-option{background-repeat:no-repeat}

/* ═══════════════════════════════════════════════════════════════════
   KALENDERFLAECHE THEMEN-FAEHIG MACHEN

   In style.css sind viele Kalenderfarben fest verdrahtet (weisse
   Tageskacheln, oranger Wochentagskopf, blaue Wochenend-Toenung ...),
   teils mit !important. Ohne die folgenden Regeln bliebe der Kalender
   bei jedem Theme weiss-orange - besonders bei dunklen Themes ergibt
   das ein unlesbares Zwitterbild.

   ALLES hier haengt an html[data-theme] und greift daher NUR, wenn ein
   Theme gewaehlt ist. Das Grunddesign bleibt exakt wie es war.
   ═══════════════════════════════════════════════════════════════════ */

/* --- Tageskachel: Grundfarbe und Rahmen aus dem Theme --- */
html[data-theme] .fc .fc-daygrid-day-frame{
  background: var(--card) !important;
  border-color: var(--border) !important;
}

/* --- Wochenzeilen werden nach unten dezent dunkler (wie im Grunddesign),
       nur eben aus den Theme-Farben gemischt statt fest grau-blau --- */
html[data-theme] .fc .fc-daygrid-body tr:nth-child(1) .fc-daygrid-day:not(.fc-day-other):not(.manual-today):not(.has-pending-must-todos) .fc-daygrid-day-frame{
  background-color: var(--card) !important; background-image: none !important; }
html[data-theme] .fc .fc-daygrid-body tr:nth-child(2) .fc-daygrid-day:not(.fc-day-other):not(.manual-today):not(.has-pending-must-todos) .fc-daygrid-day-frame{
  background-color: var(--card) !important;
  background-image: linear-gradient(rgba(128,128,128,.05), rgba(128,128,128,.05)) !important; }
html[data-theme] .fc .fc-daygrid-body tr:nth-child(3) .fc-daygrid-day:not(.fc-day-other):not(.manual-today):not(.has-pending-must-todos) .fc-daygrid-day-frame{
  background-color: var(--card) !important;
  background-image: linear-gradient(rgba(128,128,128,.09), rgba(128,128,128,.09)) !important; }
html[data-theme] .fc .fc-daygrid-body tr:nth-child(4) .fc-daygrid-day:not(.fc-day-other):not(.manual-today):not(.has-pending-must-todos) .fc-daygrid-day-frame{
  background-color: var(--card) !important;
  background-image: linear-gradient(rgba(128,128,128,.13), rgba(128,128,128,.13)) !important; }
html[data-theme] .fc .fc-daygrid-body tr:nth-child(5) .fc-daygrid-day:not(.fc-day-other):not(.manual-today):not(.has-pending-must-todos) .fc-daygrid-day-frame{
  background-color: var(--card) !important;
  background-image: linear-gradient(rgba(128,128,128,.17), rgba(128,128,128,.17)) !important; }
html[data-theme] .fc .fc-daygrid-body tr:nth-child(6) .fc-daygrid-day:not(.fc-day-other):not(.manual-today):not(.has-pending-must-todos) .fc-daygrid-day-frame{
  background-color: var(--card) !important;
  background-image: linear-gradient(rgba(128,128,128,.21), rgba(128,128,128,.21)) !important; }

/* --- Tage aus dem Vor-/Folgemonat: schraffiert, aber in Theme-Farben --- */
html[data-theme] body .fc .fc-daygrid-day.fc-day-other .fc-daygrid-day-frame,
html[data-theme] body[data-bg] .fc .fc-daygrid-day.fc-day-other .fc-daygrid-day-frame,
html[data-theme] body[data-bg="kein"] .fc .fc-daygrid-day.fc-day-other .fc-daygrid-day-frame,
html[data-theme] .fc .fc-daygrid-day.fc-day-other .fc-daygrid-day-frame{
  background-color: var(--bg-soft) !important;
  background-image: repeating-linear-gradient(135deg,
    transparent 0, transparent 8px,
    rgba(128,128,128,.28) 8px, rgba(128,128,128,.28) 10px) !important;
}
html[data-theme] .fc .fc-daygrid-day.fc-day-other .fc-daygrid-day-number{
  color: var(--text-muted) !important;
}

/* --- Wochentags-Kopfzeile: statt festem Orange die Theme-Akzentfarbe.

   WICHTIG - warum hier ueberall background-color + background-image
   steht und NICHT color-mix():
   app.js (applyCalendarReadableText, ~Z.9466) liest den Hintergrund per
   getComputedStyle aus und rechnet daraus Schwarz oder Weiss fuer die
   Schrift. Ihr Farb-Parser versteht nur rgb()/#hex. color-mix() liefert
   aber "color(srgb ...)" - das kann sie nicht lesen und faellt auf Weiss
   zurueck: weisse Schrift auf hellem Grund, unlesbar.
   Deshalb: echte Volltonfarbe als background-COLOR (die liest sie
   korrekt), die Toenung als transparente Ebene im background-IMAGE
   darueber. Optisch dasselbe, aber app.js entscheidet richtig. --- */
html[data-theme] .fc .fc-col-header-cell,
html[data-theme] body[data-bg] .fc .fc-col-header-cell,
html[data-theme] .fc .fc-col-header-cell.fc-day-sat,
html[data-theme] .fc .fc-col-header-cell.fc-day-sun{
  background-color: var(--card) !important;
  background-image: linear-gradient(var(--primary-soft), var(--primary-soft)) !important;
}
html[data-theme] .fc th{ color: var(--text) !important; }
/* Sicherheitsnetz: falls app.js seine Inline-Farbe nicht setzt oder sie
   nicht durchkommt, ist die Schrift trotzdem lesbar. */
html[data-theme] .fc .fc-col-header-cell-cushion,
html[data-theme] body[data-bg] .fc .fc-col-header-cell-cushion,
html[data-theme] .fc .fc-col-header-cell.fc-day-sat .fc-col-header-cell-cushion,
html[data-theme] .fc .fc-col-header-cell.fc-day-sun .fc-col-header-cell-cushion{
  color: var(--text) !important;
}
html[data-theme] .fc .fc-daygrid-day-number{ color: var(--text) !important; }
html[data-theme] .fc .fc-daygrid-day.fc-day-other .fc-daygrid-day-number{
  color: var(--text-muted) !important;
}

/* --- Kopfleiste jeder Tageskachel (traegt die Tageszahl).
       Im Grunddesign gelb / blau / rosa je nach Tagesart - das muss
       ebenfalls aus dem Theme kommen, sonst wird Gelb ueber dunklem
       Untergrund olivgruen. --- */
html[data-theme] .fc .fc-daygrid-day-top,
html[data-theme] body[data-bg]:not([data-bg="kein"]) .fc .fc-daygrid-day-top{
  background-color: var(--card) !important;
  background-image: linear-gradient(var(--primary-soft), var(--primary-soft)) !important;
  border-bottom-color: var(--border) !important;
}
html[data-theme] .fc .fc-day-sat .fc-daygrid-day-top,
html[data-theme] .fc .fc-day-sun .fc-daygrid-day-top{
  background-color: var(--card) !important;
  background-image: linear-gradient(var(--primary-soft), var(--primary-soft)),
                    linear-gradient(var(--primary-soft), var(--primary-soft)) !important;
}
html[data-theme] .fc .fc-daygrid-day.fc-day-other .fc-daygrid-day-top{
  background-color: var(--bg-soft) !important;
  background-image: none !important;
}
html[data-theme] body .fc .fc-daygrid-day.manual-today .fc-daygrid-day-top,
html[data-theme] .fc-day-today .fc-daygrid-day-top{
  background: var(--primary) !important;
}
html[data-theme] .fc-day-today .fc-daygrid-day-top .fc-daygrid-day-number{
  color: var(--card) !important;
}

/* --- Wochenende und Schulferien: Toenung aus dem Theme --- */
html[data-theme] .fc .fc-day-sat .fc-daygrid-day-frame,
html[data-theme] .fc .fc-day-sun .fc-daygrid-day-frame,
html[data-theme] body[data-bg]:not([data-bg="kein"]) .fc .fc-day-sat .fc-daygrid-day-frame,
html[data-theme] body[data-bg]:not([data-bg="kein"]) .fc .fc-day-sun .fc-daygrid-day-frame{
  background-color: var(--card) !important;
  background-image: linear-gradient(var(--primary-soft), var(--primary-soft)) !important;
  border-color: var(--border) !important;
}
/* Bei gewaehltem Hintergrundbild bleiben die Kacheln sonst weiss */
html[data-theme] body[data-bg]:not([data-bg="kein"]) .fc .fc-daygrid-day-frame{
  background-color: var(--card) !important;
  border-color: var(--border) !important;
}
html[data-theme] .fc .fc-daygrid-day.is-school-holiday .fc-daygrid-day-frame{
  background-color: var(--bg-soft) !important;
}

/* --- Heute --- */
html[data-theme] .fc-day-today .fc-daygrid-day-frame{
  background-color: var(--card) !important;
  background-image: linear-gradient(var(--primary-soft), var(--primary-soft)),
                    linear-gradient(var(--primary-soft), var(--primary-soft)) !important;
  border-color: var(--primary) !important;
}

/* --- Vergangene, ausgegraute Termine --- */
html[data-theme] .fc-event.event-past-faded{
  background-color: var(--bg-soft) !important;
  background-image: linear-gradient(rgba(128,128,128,.22), rgba(128,128,128,.22)) !important;
  border-color: var(--border) !important;
  color: var(--text-muted) !important;
}

/* --- Kalender-Grundflaeche und Listenansicht --- */
html[data-theme] .fc-scrollgrid,
html[data-theme] .fc .fc-list,
html[data-theme] .fc .fc-list-day-cushion{ background: var(--card) !important; }
html[data-theme] .fc .fc-list-event:hover td{ background: var(--bg-soft) !important; }

/* --- Abmelden-Knopf: festes Dunkelrot auf dunklem Grund ist unlesbar --- */
html[data-theme="werkstatt"] .btn-logout, html[data-theme="galaxis"] .btn-logout,
html[data-theme="nacht"] .btn-logout,     html[data-theme="synthwave"] .btn-logout,
html[data-theme="neon"] .btn-logout{
  color: #ff8a8a !important;
  border-color: #ff8a8a !important;
  background: rgba(255,138,138,0.12) !important;
}

/* --- Dunkle Themes: helle Flaechen im Rest der App nachziehen --- */
html[data-theme="werkstatt"] .modal-box, html[data-theme="galaxis"] .modal-box,
html[data-theme="nacht"] .modal-box,     html[data-theme="synthwave"] .modal-box,
html[data-theme="neon"] .modal-box{ background: var(--card); color: var(--text); }
html[data-theme="werkstatt"] input, html[data-theme="galaxis"] input,
html[data-theme="nacht"] input,     html[data-theme="synthwave"] input,
html[data-theme="neon"] input,
html[data-theme="werkstatt"] select, html[data-theme="galaxis"] select,
html[data-theme="nacht"] select,     html[data-theme="synthwave"] select,
html[data-theme="neon"] select,
html[data-theme="werkstatt"] textarea, html[data-theme="galaxis"] textarea,
html[data-theme="nacht"] textarea,     html[data-theme="synthwave"] textarea,
html[data-theme="neon"] textarea{
  background: var(--bg-soft); color: var(--text); border-color: var(--border);
}

/* ── Auswahlraster im Einstellungen-Tab "Darstellung" ── */
.design-theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:0.5rem}
.design-theme-option{position:relative;padding:0.5rem 0.4rem 0.4rem;border:2px solid var(--border);
  border-radius:var(--radius);background:var(--card);cursor:pointer;font:inherit;font-size:0.72rem;
  color:var(--text);text-align:center;transition:var(--transition)}
.design-theme-option:hover{border-color:var(--primary)}
.design-theme-option.is-active{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-soft)}
.design-theme-swatches{display:flex;gap:3px;justify-content:center;margin-bottom:0.35rem}
.design-theme-swatches span{width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.12)}

/* ═══════════════════════════════════════════════════════════════════
   NACHTRAG (20.07.2026): Theme-Hintergrund erschien nie.

   Ursache: Die Regeln oben greifen ueber "body:not([data-bg])" - also
   nur, wenn im Waehler "Hintergrund-Motiv" NICHTS gewaehlt ist. app.js
   setzt in diesem Fall aber data-bg="kein" statt das Attribut wegzulassen.
   Formal ist damit "etwas gewaehlt", die Regeln fielen aus - das Bild
   blieb unsichtbar, obwohl Theme und Bilddateien in Ordnung waren.

   Hier deshalb dieselben Regeln noch einmal fuer den Fall "kein".
   Bewusst als Nachtrag am Dateiende: der Block oben bleibt unangetastet,
   damit parallele Arbeit an den Themes nicht kollidiert.
   ═══════════════════════════════════════════════════════════════════ */
html[data-theme="steinzeit"] body[data-bg="kein"]{ --th-bild:url("../assets/themes/bg-steinzeit.jpg"); --th-fade:0.30 }
html[data-theme="kinder"]    body[data-bg="kein"]{ --th-bild:url("../assets/themes/bg-kinder.jpg");    --th-fade:0.30 }
html[data-theme="papier"]    body[data-bg="kein"]{ --th-bild:url("../assets/themes/bg-papier.jpg");    --th-fade:0.20 }
html[data-theme="comic"]     body[data-bg="kein"]{ --th-bild:url("../assets/themes/bg-comic.jpg");     --th-fade:0.45 }
html[data-theme="galaxis"]   body[data-bg="kein"]{ --th-bild:url("../assets/themes/bg-galaxis.jpg");   --th-dark:0.30 }
html[data-theme="nacht"]     body[data-bg="kein"]{ --th-bild:url("../assets/themes/bg-nacht.jpg");     --th-dark:0.25 }
html[data-theme="synthwave"] body[data-bg="kein"]{ --th-bild:url("../assets/themes/bg-synthwave.jpg"); --th-dark:0.45 }
html[data-theme="neon"]      body[data-bg="kein"]{ --th-bild:url("../assets/themes/bg-neon.jpg");      --th-dark:0.45 }

html[data-theme="steinzeit"] body[data-bg="kein"],
html[data-theme="kinder"]    body[data-bg="kein"],
html[data-theme="papier"]    body[data-bg="kein"],
html[data-theme="comic"]     body[data-bg="kein"]{
  background:
    linear-gradient(rgba(255,255,255,var(--th-fade)), rgba(255,255,255,var(--th-fade))) fixed,
    var(--th-bild) repeat fixed !important;
  background-size: auto, 340px 340px !important;
}
html[data-theme="galaxis"]   body[data-bg="kein"],
html[data-theme="nacht"]     body[data-bg="kein"],
html[data-theme="synthwave"] body[data-bg="kein"],
html[data-theme="neon"]      body[data-bg="kein"]{
  background:
    linear-gradient(rgba(0,0,0,var(--th-dark)), rgba(0,0,0,var(--th-dark))) fixed,
    var(--th-bild) repeat fixed !important;
  background-size: auto, 340px 340px !important;
}

/* Container und Tageskacheln durchscheinend, sonst verdecken sie das Motiv */
html[data-theme="steinzeit"] body[data-bg="kein"] #calendar-container,
html[data-theme="kinder"]    body[data-bg="kein"] #calendar-container,
html[data-theme="papier"]    body[data-bg="kein"] #calendar-container,
html[data-theme="comic"]     body[data-bg="kein"] #calendar-container,
html[data-theme="galaxis"]   body[data-bg="kein"] #calendar-container,
html[data-theme="nacht"]     body[data-bg="kein"] #calendar-container,
html[data-theme="synthwave"] body[data-bg="kein"] #calendar-container,
html[data-theme="neon"]      body[data-bg="kein"] #calendar-container{
  background: transparent !important;
  box-shadow: none !important;
}
/* NIEMALS opacity hier setzen - siehe Warnung weiter oben (verdeckt
   sonst die Balken mehrtaegiger Termine). */
html[data-theme="steinzeit"] body[data-bg="kein"] .fc .fc-daygrid-day-frame,
html[data-theme="kinder"]    body[data-bg="kein"] .fc .fc-daygrid-day-frame,
html[data-theme="papier"]    body[data-bg="kein"] .fc .fc-daygrid-day-frame,
html[data-theme="comic"]     body[data-bg="kein"] .fc .fc-daygrid-day-frame,
html[data-theme="galaxis"]   body[data-bg="kein"] .fc .fc-daygrid-day-frame,
html[data-theme="nacht"]     body[data-bg="kein"] .fc .fc-daygrid-day-frame,
html[data-theme="synthwave"] body[data-bg="kein"] .fc .fc-daygrid-day-frame,
html[data-theme="neon"]      body[data-bg="kein"] .fc .fc-daygrid-day-frame{
  background-color: transparent !important;
  background-image: none !important;
}