/* RUDI Tagesplan – Mein Tag (mobil) – Apple Glasmorphism, Grundlayer-Kopie aus postfach.css */
@import url('/shared/fonts/inter.css');
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: linear-gradient(145deg, #eef2f7 0%, #e4ecf4 25%, #dfe8f0 50%, #e8eef5 75%, #f0f4f8 100%);
  --nav-bg: rgba(255,255,255,0.55);
  --nav-border: rgba(255,255,255,0.5);
  --card-bg: rgba(255,255,255,0.45);
  --card-border: rgba(255,255,255,0.6);
  --card-hover-bg: rgba(255,255,255,0.65);
  --card-shadow: 0 2px 16px rgba(0,0,0,0.04);
  --card-hover-shadow: 0 12px 44px rgba(0,0,0,0.08);
  --text-primary: #1c1c1e;
  --text-secondary: #636366;
  --text-tertiary: #8e8e93;
  --badge-bg: rgba(4,179,214,0.1);
  --badge-color: #04b3d6;
  --toggle-bg: rgba(0,0,0,0.06);
  --toggle-knob: #fff;
  --input-bg: rgba(255,255,255,0.7);
  --input-border: rgba(0,0,0,0.08);
  --border-color: rgba(0,0,0,0.08);
  --accent: #04b3d6;
}

[data-theme="dark"] {
  --bg: linear-gradient(145deg, #0a0d13 0%, #0e1420 20%, #101826 40%, #0d141d 60%, #0b0f16 80%, #0d1318 100%);
  --nav-bg: rgba(255,255,255,0.05);
  --nav-border: rgba(255,255,255,0.09);
  --card-bg: rgba(255,255,255,0.06);
  --card-border: rgba(255,255,255,0.1);
  --card-hover-bg: rgba(255,255,255,0.1);
  --card-shadow: 0 2px 16px rgba(0,0,0,0.2);
  --card-hover-shadow: 0 12px 44px rgba(0,0,0,0.3);
  --text-primary: #f5f5f7;
  --text-secondary: #a1a1a6;
  --text-tertiary: #636366;
  --badge-bg: rgba(4,179,214,0.15);
  --badge-color: #2cc5e4;
  --toggle-bg: rgba(255,255,255,0.1);
  --toggle-knob: #1c1c1e;
  --input-bg: rgba(255,255,255,0.04);
  --input-border: rgba(255,255,255,0.1);
  --border-color: rgba(255,255,255,0.1);
  --accent: #2cc5e4;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif;
  min-height: 100vh;
  background: var(--bg);
  background-size: 400% 400%;
  animation: gradientShift 20s ease infinite;
  -webkit-font-smoothing: antialiased;
  color: var(--text-primary);
  transition: background 0.4s;
}
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ===== CONTAINER ===== */
.hidden { display: none !important; }
.meine-container { width: min(680px, calc(100% - 24px)); margin: 16px auto 44px; }
.aufgaben-block { margin-bottom: 18px; }
.aufgaben-block h1, .aufgaben-block h2, .aufgaben-block summary { font-size: 1rem; font-weight: 750; margin-bottom: 9px; }
.gruppe-ueberfaellig h1 { color: #cf222e; }
[data-theme="dark"] .gruppe-ueberfaellig h1 { color: #ff6b60; }
.gruppe-jetzt h1 { color: #a35c00; }
[data-theme="dark"] .gruppe-jetzt h1 { color: #f0b458; }
.erledigt-block summary { cursor: pointer; }
.mobile-liste { display: flex; flex-direction: column; gap: 9px; }
.mobile-karte { background: rgba(127,127,135,.11); border: 1px solid rgba(127,127,135,.45); border-radius: 12px; padding: 13px; }
.karten-kopf { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.karten-titel { font-weight: 750; }
.karten-meta { color: var(--text-secondary); font-size: .82rem; margin-top: 4px; }
.zeit-badge-gross { display: inline-block; font-size: 1.15rem; font-weight: 800; color: #a35c00; background: rgba(232,161,61,.18); border-radius: 8px; padding: 2px 9px; margin-bottom: 6px; }
[data-theme="dark"] .zeit-badge-gross { color: #f0b458; }
.status { border-radius: 999px; padding: 3px 8px; background: rgba(127,127,135,.16); font-size: .7rem; font-weight: 750; white-space: nowrap; }
.status.angenommen { background: rgba(4,179,214,.16); color: #0086a0; }
.status.wartet_abnahme { background: rgba(225,139,20,.18); color: #a35c00; }
.status.erledigt { background: rgba(45,164,78,.16); color: #218739; }
.status.abgelehnt, .status.verpasst { background: rgba(207,34,46,.16); color: #cf222e; }
.karten-aktionen { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 11px; }
.karten-aktionen button { min-height: 44px; border: 1px solid rgba(127,127,135,.45); border-radius: 9px; padding: 9px 12px; background: var(--input-bg); color: var(--text-primary); font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; }
.karten-aktionen .primaer { background: #04b3d6; border-color: #04b3d6; color: #fff; }
.karten-aktionen .foto-ok { background: rgba(45,164,78,.16); border-color: rgba(45,164,78,.4); color: #218739; }
button:disabled { opacity: .5; cursor: wait; }
.antwort { display: flex; gap: 7px; margin-top: 10px; }
.antwort input { flex: 1; min-width: 0; padding: 9px; border-radius: 9px; border: 1px solid var(--input-border); background: var(--input-bg); color: var(--text-primary); font: inherit; }
.antwort button { min-height: 44px; border: 0; border-radius: 9px; background: #04b3d6; color: #fff; padding: 9px 12px; font-weight: 700; }
.detail-toggle { margin-top: 9px; }
.detail-toggle summary { color: var(--text-secondary); font-size: .82rem; margin: 0; }
.beschreibung { white-space: pre-wrap; margin-top: 8px; font-size: .9rem; }
.hinweis { font-size: .84rem; margin: 8px 0; }
.fehler { color: #cf222e; }
.leer { color: var(--text-tertiary); padding: 8px 2px; font-size: .86rem; }

/* ===== DE/RO-Sprachumschalter im Header (data-header-extra) ===== */
.tp-lang { display: inline-flex; gap: 3px; }
.tp-lang-btn {
  min-width: 38px; min-height: 38px; padding: 5px 9px; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 600; line-height: 1;
  color: var(--text-secondary, #636366);
  background: rgba(127,127,135,.12);
  border: 1px solid rgba(127,127,135,.34);
  border-radius: 9px; transition: background .15s, color .15s, border-color .15s;
}
.tp-lang-btn:hover { border-color: var(--accent, #04b3d6); color: var(--accent, #04b3d6); }
.tp-lang-btn.aktiv {
  color: #fff; background: var(--accent, #04b3d6); border-color: var(--accent, #04b3d6);
}