/* =========================================================================
   Medikamenten-Vorratsplaner – Design
   Reines CSS, kein Framework.

   NEU: Das ganze Design folgt jetzt der Vorlage "design.md":
   Futuristischer Dunkel-Look (tiefes Weltraum-Schwarz), EIN violetter
   Leucht-Akzent ("Orb"), Glas-Flächen und Pillen-Formen.

   Wie das Umfärben funktioniert: Alle Farben/Größen stehen als Variablen
   oben. Das dunkle Design (.dark) ist die HAUPT-Vorlage; das helle Design
   (:root) ist eine ruhige Tag-Variante mit demselben Violett-Akzent. Beim
   Umschalten werden nur die Variablen getauscht – die ganze Seite färbt
   sich dadurch automatisch um.
   ========================================================================= */

/* ---------- Gemeinsame Variablen (in hell UND dunkel gleich) ---------- */
:root {
  /* Violett ist der EINZIGE Marken-Akzent (keine weiteren Akzentfarben). */
  --violet-500: #8B5CF6;   /* Haupt-Akzent */
  --violet-400: #A78BFA;   /* heller (Hover) */
  --violet-700: #6D28D9;   /* dunkler (Druck) */
  --iris-500:   #6366F1;   /* Verlaufs-Partner */

  /* Violetter Knopf-Verlauf und der radiale "Orb" (Leuchtkugel). */
  --gradient-violet: linear-gradient(135deg, #A78BFA, #8B5CF6, #6366F1);
  --glow-orb: radial-gradient(circle at center,
    #FFFFFF 0%, #EDE9FE 8%, #A78BFA 26%, #7C3AED 48%, transparent 72%);

  /* Eckenrundungen als Stufen – Knöpfe/Pillen sind IMMER ganz rund (pill). */
  --radius-xs: 6px;
  --radius-md: 14px;   /* Eingabefelder, Steuerelemente */
  --radius-lg: 20px;   /* Karten */
  --radius-xl: 28px;   /* große Flächen */
  --radius-pill: 999px;

  /* Bewegungs-Kurven & -Dauern (sanftes Setzen, kein Hüpfen). */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;

  --sidebar-breite: 264px;

  /* ----- Helle Tag-Variante (kühles Fast-Weiß, nie reines Weiß) ----- */
  --bg-page: #F4F2FB;
  --bg-void: #ECE9F7;            /* eingelassene Felder, Spuren */
  --surface-card: #FBFAFE;
  --surface-elevated: #FFFFFF;
  --surface-glass: rgba(251, 250, 254, 0.7);
  --border-hairline: rgba(99, 102, 241, 0.16);
  --border-strong: rgba(99, 102, 241, 0.30);

  --text-1: #18142A;            /* Haupttext (Fast-Schwarz mit Violett-Stich) */
  --text-2: #4A445E;            /* Fließtext */
  --text-3: #6E6884;            /* gedämpft / Bildunterschriften */
  --text-4: #A39CB6;            /* deaktiviert */

  /* Status-Farben – NUR auf kleinen Pillen, Punkten und dünnen Kanten. */
  --ok: #059669;     --ok-soft: rgba(5, 150, 105, 0.12);
  --warn: #B45309;   --warn-soft: rgba(180, 83, 9, 0.12);
  --danger: #E11D48; --danger-soft: rgba(225, 29, 72, 0.10);

  --track: rgba(24, 20, 42, 0.08);   /* leere Leiste hinter dem Fortschritt */

  /* Überschriften-Verlauf (auf Hell: Violett -> Iris, gut lesbar) */
  --gradient-text: linear-gradient(135deg, #6D28D9 0%, #4338CA 100%);

  /* Schatten (weich, kühl) und violettes Leuchten (die Marken-Aura). */
  --shadow-md: 0 1px 2px rgba(40, 30, 80, 0.05), 0 8px 24px rgba(40, 30, 80, 0.08);
  --shadow-lg: 0 2px 6px rgba(40, 30, 80, 0.07), 0 18px 40px rgba(40, 30, 80, 0.14);
  --glow-sm: 0 0 16px rgba(139, 92, 246, 0.18);
  --glow-md: 0 8px 30px rgba(139, 92, 246, 0.22);
  --glow-btn: 0 6px 22px rgba(139, 92, 246, 0.30);

  --focus-ring: 0 0 0 3px rgba(139, 92, 246, 0.40);

  --orb-opacity: 0.16;   /* der Orb ist im Hellmodus nur sehr dezent */
  --orb-mitte-opacity: 0.14;  /* der Ring in der Mitte ist noch dezenter (Hell) */
  --stern-opacity: 0;    /* Sterne nur im Dunkelmodus */
}

/* ---------- Dunkles Design = die HAUPT-Vorlage aus design.md ---------- */
.dark {
  --bg-page: #0A0810;
  --bg-void: #060509;            /* tiefster Hintergrund / eingelassene Felder */
  --surface-card: #141121;
  --surface-elevated: #1B1729;
  --surface-glass: rgba(20, 17, 33, 0.55);
  --border-hairline: rgba(167, 139, 250, 0.12);
  --border-strong: rgba(167, 139, 250, 0.24);

  --text-1: #F5F3FB;
  --text-2: #B6B1C9;
  --text-3: #837D97;
  --text-4: #565067;

  --ok: #34D399;     --ok-soft: rgba(52, 211, 153, 0.14);
  --warn: #FBBF24;   --warn-soft: rgba(251, 191, 36, 0.14);
  --danger: #FB7185; --danger-soft: rgba(251, 113, 133, 0.14);

  --track: rgba(255, 255, 255, 0.07);

  /* Hero-Text-Akzent: Weiß -> sanftes Violett (nur auf Dunkel sichtbar) */
  --gradient-text: linear-gradient(180deg, #FFFFFF 0%, #C4B5FD 130%);

  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.40), 0 1px 0 rgba(255, 255, 255, 0.03) inset;
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.50), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  --glow-sm: 0 0 18px rgba(139, 92, 246, 0.28);
  --glow-md: 0 10px 36px rgba(139, 92, 246, 0.34);
  --glow-btn: 0 8px 26px rgba(139, 92, 246, 0.45);

  --focus-ring: 0 0 0 3px rgba(167, 139, 250, 0.55);

  --orb-opacity: 0.55;   /* der Orb leuchtet im Dunkelmodus deutlich */
  --orb-mitte-opacity: 0.55;  /* der Ring in der Mitte leuchtet jetzt etwas heller (Dunkel) */
  --stern-opacity: 1;
}

/* ---------- Grundlagen ---------- */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-2);
  font-family: "Manrope", system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ===== Hintergrund-Sternenfeld (winzige Punkte, sehr dezent) =====
   Liegt fest hinter allem und fängt keine Klicks ab. Nur im Dunkelmodus
   sichtbar (--stern-opacity). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: var(--stern-opacity);
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(255, 255, 255, 0.7), transparent),
    radial-gradient(1px 1px at 28% 68%, rgba(199, 210, 254, 0.6), transparent),
    radial-gradient(1px 1px at 45% 35%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 62% 80%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 78% 18%, rgba(199, 210, 254, 0.6), transparent),
    radial-gradient(1px 1px at 88% 56%, rgba(255, 255, 255, 0.5), transparent),
    radial-gradient(1px 1px at 35% 90%, rgba(255, 255, 255, 0.4), transparent),
    radial-gradient(1px 1px at 70% 42%, rgba(255, 255, 255, 0.4), transparent);
}

/* ===== Der Glow-Orb: die EINE Leuchtkugel der Seite =====
   Eine radiale Lichtquelle (weißer Kern -> Violett -> transparent), die
   immer über eine Bildschirm-Ecke "hinausläuft" und langsam atmet. */
body::after {
  content: "";
  position: fixed;
  top: -360px;
  right: -300px;
  width: 780px;
  height: 780px;
  border-radius: 50%;
  background: var(--glow-orb);
  opacity: var(--orb-opacity);
  filter: blur(8px);
  z-index: -1;
  pointer-events: none;
  animation: orbPuls 5s var(--ease-out) infinite;
}
@keyframes orbPuls {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

/* Zweite Leuchtkugel: exakt dieselbe wie oben (body::after), nur in der
   UNTEREN LINKEN Ecke (bottom/left statt top/right). */
.orb-bl {
  position: fixed;
  bottom: -360px;
  /* Nach rechts versetzt um die Breite der Seitenleiste: sonst verdeckt die
     Seitenleiste die halbe Leuchtkugel und sie wirkt kleiner als die obere
     rechte. So ist der sichtbare Teil NEBEN der Seitenleiste gleich groß. */
  left: calc(var(--sidebar-breite) - 300px);
  width: 780px;
  height: 780px;
  border-radius: 50%;
  background: var(--glow-orb);
  opacity: var(--orb-opacity);
  filter: blur(8px);
  z-index: -1;
  pointer-events: none;
  animation: orbPuls 5s var(--ease-out) infinite;
}

/* ===== Leucht-RING in der Mitte (Hintergrund) =====
   Ein dezenter, leuchtender Kreis-Ring genau in der Bildschirm-Mitte – wie
   die Vorlage, aber komplett aus CSS-Verläufen gebaut. Dadurch bleibt er bei
   JEDER Auflösung gestochen scharf (nie pixelig). Er liegt ganz hinten
   (z-index: -1), ist nur schwach sichtbar und stört die Bedienung nicht.
   Die Größe wächst mit dem Fenster, bleibt aber gedeckelt, damit der Ring die
   Leuchtkugeln in den Ecken nicht berührt. */
.orb-mitte {
  position: fixed;
  top: 50%;
  left: 50%;
  width: min(420px, 34vw);
  aspect-ratio: 1 / 1;     /* immer kreisrund, egal wie breit */
  transform: translate(-50%, -50%);
  border-radius: 50%;
  /* Zwei radiale Verläufe übereinander: ein heller dünner Ring + weicher Schein. */
  background:
    radial-gradient(circle,
      transparent 36%,
      rgba(233, 228, 255, 0.85) 43%,
      rgba(139, 92, 246, 0.75) 47%,
      rgba(124, 58, 237, 0) 56%),
    radial-gradient(circle,
      transparent 24%,
      rgba(139, 92, 246, 0.34) 47%,
      transparent 72%);
  opacity: var(--orb-mitte-opacity);
  filter: blur(3px);
  z-index: -1;
  pointer-events: none;
}
/* Ein heller Licht-Bogen, der sehr langsam um den Ring wandert (der "Wirbel"
   aus der Vorlage). Die Maske blendet ihn nur als schmalen Ring ein. */
.orb-mitte::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0deg,
    rgba(237, 233, 254, 0) 70deg,
    rgba(237, 233, 254, 0.75) 120deg,
    rgba(255, 255, 255, 0.9) 138deg,
    rgba(237, 233, 254, 0) 200deg,
    transparent 360deg);
  -webkit-mask: radial-gradient(circle, transparent 40%, #000 44%, #000 50%, transparent 55%);
          mask: radial-gradient(circle, transparent 40%, #000 44%, #000 50%, transparent 55%);
  filter: blur(2px);
  opacity: 0.58;
  animation: orbDreh 22s linear infinite;
}
@keyframes orbDreh {
  to { transform: rotate(360deg); }
}

/* Grund-Einstellung für alle Material-Symbols-Icons (Strich-Look) */
.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 22px;
  line-height: 1;
  display: inline-block;
  white-space: nowrap;
  direction: ltr;
  /* dünnerer Strich (175er-Look) passend zur Vorlage */
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
}

/* ---------- Seitenleiste links (Desktop) ---------- */
.sidebar {
  position: fixed;
  left: 0; top: 0;
  width: var(--sidebar-breite);
  height: 100vh;
  background: var(--surface-card);
  border-right: 1px solid var(--border-hairline);
  padding: 28px 20px;
  z-index: 40;
  display: flex; flex-direction: column;   /* damit der Hilfe-Knopf nach ganz unten rutschen kann */
}
.sidebar-marke { display: flex; align-items: center; gap: 12px; margin-bottom: 40px; }
.marke-icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  background: var(--gradient-violet);   /* violetter Verlauf */
  color: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--glow-btn);          /* violettes Leuchten unter dem Logo */
}
.marke-icon .material-symbols-outlined { font-variation-settings: "FILL" 1, "wght" 400; }
/* Überschriften nutzen jetzt die Display-Schrift "Space Grotesk". */
.marke-titel {
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-size: 20px; font-weight: 700; letter-spacing: -0.02em;
  color: var(--text-1); margin: 0;
}
/* Untertitel der Marke in der normalen Schrift (Manrope) – wie die Menüpunkte. */
.marke-untertitel {
  font-family: "Manrope", system-ui, -apple-system, sans-serif;
  font-size: 13px; font-weight: 500;
  color: var(--text-3); margin: 2px 0 0;
}

.nav-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.nav-link {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px;
  border-radius: var(--radius-pill);    /* Pillen-Form */
  color: var(--text-3);
  text-decoration: none;
  font-size: 14px; font-weight: 600;
  transition: background var(--dur-base), color var(--dur-base), transform var(--dur-fast);
}
.nav-link:hover { background: var(--surface-elevated); color: var(--text-1); transform: translateX(2px); }
.nav-link .material-symbols-outlined { font-size: 21px; }
/* Aktiver Punkt = voller violetter Verlauf + Leuchten. */
.nav-aktiv {
  background: var(--gradient-violet);
  color: #FFFFFF;
  box-shadow: var(--glow-sm);
}
.nav-aktiv:hover { color: #FFFFFF; transform: none; }
.nav-aktiv .material-symbols-outlined { font-variation-settings: "FILL" 1, "wght" 400; }

/* Hilfe-Knopf: gleicher Look wie ein Menüpunkt (.nav-link), aber als <button> und
   ganz unten in der Seitenleiste (margin-top: auto schiebt ihn an den unteren Rand). */
.nav-hilfe {
  margin-top: auto;
  width: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

/* ---------- Kopfzeile (Handy) ---------- */
.topbar { display: none; }
.topbar-marke { display: flex; align-items: center; gap: 10px; color: var(--text-1); }
.topbar-marke h1 {
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-size: 18px; font-weight: 700; letter-spacing: -0.02em; margin: 0;
}
.topbar-marke .material-symbols-outlined { color: var(--violet-400); font-variation-settings: "FILL" 1, "wght" 400; }

/* ---------- Untere Navigation (Handy) ---------- */
.bottombar { display: none; }

/* ---------- Hauptbereich ---------- */
.inhalt {
  margin-left: var(--sidebar-breite);
  max-width: 1120px;
  padding: 56px 64px;
}

/* Seiten-Überschrift: großer Titel im Verlauf, Untertitel als Editorial-Kursiv. */
.seiten-kopf { margin-bottom: 36px; }
.seiten-titel {
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-size: clamp(2.25rem, 4vw, 3rem);
  line-height: 1.05; font-weight: 700; letter-spacing: -0.03em;
  margin: 0 0 10px;
  /* Verlaufs-Text: der Verlauf wird in die Schrift "hineingeschnitten". */
  background: var(--gradient-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* Untertitel in der normalen Schrift (Manrope) – wie die Menüpunkte links. */
.seiten-text {
  font-family: "Manrope", system-ui, -apple-system, sans-serif;
  font-style: normal;
  font-size: 1.1rem; line-height: 1.5;
  color: var(--text-2); margin: 0;
}

/* ---------- Warnbox oben (wie ein Toast: leuchtende Akzentkante) ---------- */
#warnung { margin-bottom: 24px; }
#warnung:empty { margin-bottom: 0; }
.warnbox {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  background: var(--surface-card);
  color: var(--text-1);
  border: 1px solid var(--border-hairline);
  border-left: 3px solid var(--violet-500);   /* leuchtende Kante im Violett der Seite (kein Rot mehr) */
  border-radius: var(--radius-md);
  padding: 15px 18px;
  font-family: inherit; font-weight: 600; font-size: 15px;
  box-shadow: var(--shadow-md);   /* kein farbiger "Glare" mehr – nur der dezente Schatten */
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base);
}
.warnbox:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg), var(--glow-sm); }
.warnbox:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.warnbox .material-symbols-outlined { color: var(--violet-400); font-variation-settings: "FILL" 1, "wght" 400; }
.warnbox-text { flex: 1; }
.warnbox-pfeil { opacity: 0.7; }

/* ---------- Zahlen-Übersicht (Stat-Kacheln) ---------- */
.stats-raster {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
  margin-bottom: 32px;
}
.stats-raster:empty { display: none; }
.stat-kachel {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 20px;
  display: flex; flex-direction: column; gap: 14px;
}
.stat-kopf { display: flex; align-items: center; gap: 10px; }
.stat-icon {
  width: 36px; height: 36px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.stat-icon .material-symbols-outlined { font-size: 20px; font-variation-settings: "FILL" 1, "wght" 400; }
/* Kleine getönte Icon-Felder: Standard violett, Status nur dezent getönt. */
.stat-icon-blau  { background: rgba(139, 92, 246, 0.14); color: var(--violet-400); }
.stat-icon-gruen { background: var(--ok-soft);   color: var(--ok); }
.stat-icon-gelb  { background: var(--warn-soft); color: var(--warn); }
.stat-icon-rot   { background: var(--danger-soft); color: var(--danger); }
.stat-label {
  font-family: "Space Mono", monospace;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--text-3);
}
.stat-zahl {
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-size: 32px; line-height: 1; font-weight: 700; letter-spacing: -0.02em;
  color: var(--text-1);
}
.stat-zahl-warnung { color: var(--warn); }

/* ---------- Karte (allgemein) & Formular ---------- */
.karte {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}
.formular-karte { padding: 32px; margin-bottom: 40px; }

.feld-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.feld label {
  display: block; margin-bottom: 8px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.01em;
  color: var(--text-2);
}
/* Eingaben sind dunkel "eingelassen" (--bg-void), mit 14px-Rundung. */
.feld input, .feld select {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  background: var(--bg-void);
  color: var(--text-1);
  font-family: inherit; font-size: 16px;
  transition: border-color var(--dur-base), box-shadow var(--dur-base), background var(--dur-base);
}
.feld input:hover, .feld select:hover { border-color: var(--border-strong); }
.feld input:focus, .feld select:focus {
  outline: none;
  border-color: var(--violet-500);
  box-shadow: var(--focus-ring);   /* 3px violetter Fokus-Ring */
}
.feld input::placeholder { color: var(--text-4); }
.einnahme-zeile { display: flex; gap: 8px; }
.einnahme-zeile input { flex: 2; }
.einnahme-zeile select { flex: 1; }

/* ---------- Verpackung scannen (Foto -> KI) ---------- */
.scan-block {
  margin-bottom: 26px; padding: 20px;
  background: var(--surface-elevated);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
}
/* Der Scan-Knopf ist ein violetter Pillen-Knopf mit Leuchten (wie der Haupt-Knopf). */
.knopf-scan {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--gradient-violet); color: #FFFFFF;
  border: none; border-radius: var(--radius-pill);
  padding: 0 22px; height: 46px;
  font-family: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer;
  box-shadow: var(--glow-btn);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base), filter var(--dur-base);
}
.knopf-scan:hover { filter: brightness(1.06); transform: translateY(-2px); box-shadow: var(--glow-md); }
.knopf-scan:active { transform: scale(0.97); }
.knopf-scan .material-symbols-outlined { font-size: 20px; }
.scan-hinweis { margin: 12px 0 0; font-size: 13px; color: var(--text-3); }
.scan-status { margin: 8px 0 0; font-size: 14px; font-weight: 600; min-height: 1.2em; }
.scan-status.laedt  { color: var(--text-3); }
.scan-status.fehler { color: var(--danger); }
.scan-status.ok     { color: var(--ok); }

.formular-aktion { display: flex; justify-content: flex-end; margin-top: 26px; }

/* ---------- Knöpfe (immer Pillen-Form) ---------- */
.knopf-primaer {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--gradient-violet); color: #FFFFFF;
  border: none; border-radius: var(--radius-pill);
  padding: 0 26px; height: 48px;
  font-family: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer;
  box-shadow: var(--glow-btn);
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-base), filter var(--dur-base);
}
.knopf-primaer:hover { filter: brightness(1.06); transform: translateY(-2px); box-shadow: var(--glow-md); }
.knopf-primaer:active { transform: scale(0.97); }
.knopf-primaer .material-symbols-outlined { font-size: 20px; }

/* Kleiner Knopf = Glas-Pille mit feiner Kante. */
.knopf-klein {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-elevated); color: var(--text-2);
  border: 1px solid var(--border-hairline); border-radius: var(--radius-pill);
  padding: 9px 15px;
  font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-base), color var(--dur-base), transform var(--dur-fast), border-color var(--dur-base), box-shadow var(--dur-base);
}
.knopf-klein:hover { color: var(--text-1); border-color: var(--border-strong); transform: translateY(-1px); box-shadow: var(--glow-sm); }
.knopf-klein:active { transform: scale(0.97); }
.knopf-klein .material-symbols-outlined { font-size: 18px; }
.knopf-loeschen { color: var(--danger); }
.knopf-loeschen:hover { color: var(--danger); background: var(--danger-soft); border-color: var(--danger); box-shadow: none; }

/* ---------- Liste der Medikamente ---------- */
.bereich-titel {
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-size: 1.6rem; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em;
  color: var(--text-1); margin: 0 0 22px;
}
/* Leerer Zustand: gestrichelter Rahmen wirkt wie ein "Platz zum Füllen". */
.leer {
  color: var(--text-3); font-size: 16px;
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
  padding: 36px;
  text-align: center;
  background: var(--surface-card);
}

/* ---------- Willkommens-Bildschirm (zeigt sich, solange es noch keine Medikamente gibt) ---------- */
.willkommen {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 40px;
  max-width: 760px;
}
/* Titel im "Übersicht"-Stil (Space Grotesk, groß) – aber in Lila wie der Nav-Glow. */
.willkommen-titel {
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-size: clamp(1.9rem, 3.5vw, 2.6rem);
  line-height: 1.08; font-weight: 700; letter-spacing: -0.03em;
  margin: 0 0 20px;
  background: var(--gradient-violet);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* Fließtext in der "Meine Medikamente"-Schrift (Space Grotesk), normal & gut lesbar. */
.willkommen-text {
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-weight: 400;
  font-size: 1.05rem; line-height: 1.65;
  color: var(--text-2);
  margin: 0 0 16px;
}
.willkommen-knopf { margin-top: 12px; }
@media (max-width: 600px) {
  .willkommen { padding: 26px; }
}

/* Eine einzelne Medikamenten-Karte */
.med-karte {
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 22px;
  margin-bottom: 16px;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base);
  animation: kartenEinblenden var(--dur-slow) var(--ease-out) backwards;
}
/* Karten sind Funktions-Kacheln: beim Überfahren leicht anheben + violettes Leuchten. */
.med-karte:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg), var(--glow-sm); }
.med-karte:nth-child(1) { animation-delay: 0.00s; }
.med-karte:nth-child(2) { animation-delay: 0.05s; }
.med-karte:nth-child(3) { animation-delay: 0.10s; }
.med-karte:nth-child(4) { animation-delay: 0.15s; }
.med-karte:nth-child(5) { animation-delay: 0.20s; }
.med-karte:nth-child(6) { animation-delay: 0.25s; }
.karte-warnung { border-left: 3px solid var(--danger); }  /* rote Kante: jetzt einkaufen */
.karte-bald    { border-left: 3px solid var(--warn); }    /* gelbe Kante: bald nachkaufen */

@keyframes kartenEinblenden {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.med-oben {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.med-oben:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-md); }
.med-info { display: flex; align-items: center; gap: 16px; }
.med-avatar {
  width: 48px; height: 48px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  background: var(--surface-elevated);
  border: 1px solid var(--border-hairline);
  color: var(--violet-400);
}
.med-avatar .material-symbols-outlined { font-variation-settings: "FILL" 1, "wght" 400; }
/* Status nur als dezente Tönung + farbiges Icon (keine großen Farbflächen). */
.avatar-gruen { background: var(--ok-soft);     color: var(--ok); }
.avatar-gelb  { background: var(--warn-soft);   color: var(--warn); }
.avatar-rot   { background: var(--danger-soft); color: var(--danger); }
.med-name {
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-size: 19px; line-height: 1.3; font-weight: 700; letter-spacing: -0.01em;
  color: var(--text-1); margin: 0;
}
.med-dosis { font-size: 14px; color: var(--text-3); margin: 3px 0 0; }

.med-rechts { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.med-balken-block { width: 200px; max-width: 100%; }
.balken-zeile {
  display: flex; justify-content: space-between;
  font-size: 12px; font-weight: 600; color: var(--text-3); margin-bottom: 6px;
}
.balken { width: 100%; height: 8px; background: var(--track); border-radius: var(--radius-pill); overflow: hidden; }
.balken-fuellung {
  height: 8px; border-radius: var(--radius-pill);
  transition: width 0.6s var(--ease-out);
}
/* Dünne Status-Balken: grün/gelb/rot je nach Lage. */
.balken-gruen { background: linear-gradient(90deg, var(--ok), #6EE7B7); }
.balken-gelb  { background: linear-gradient(90deg, var(--warn), #FCD34D); }
.balken-rot   { background: linear-gradient(90deg, var(--danger), #FDA4AF); }

.status-pille {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 13px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 600; white-space: nowrap;
  border: 1px solid transparent;
}
/* Kleiner leuchtender Punkt vorne in der Pille als Status-Anzeige. */
.pille-punkt { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; box-shadow: 0 0 8px currentColor; }
.pille-gruen { color: var(--ok);     background: var(--ok-soft);     border-color: var(--ok-soft); }
.pille-gelb  { color: var(--warn);   background: var(--warn-soft);   border-color: var(--warn-soft); }
.pille-rot   { color: var(--danger); background: var(--danger-soft); border-color: var(--danger-soft); }

/* Unterer Teil der Karte: standardmäßig versteckt, klappt beim Klick auf. */
.med-fuss { display: none; }
.med-karte.offen .med-fuss {
  display: block;
  margin-top: 18px;
  border-top: 1px solid var(--border-hairline);
  padding-top: 16px;
  animation: fussEinblenden var(--dur-base) var(--ease-out);
}
@keyframes fussEinblenden {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.med-pfeil { color: var(--text-3); transition: transform var(--dur-slow) var(--ease-out); flex-shrink: 0; }
.med-karte.offen .med-pfeil { transform: rotate(180deg); }
.med-detail { font-size: 14px; color: var(--text-3); margin: 0 0 10px; }
.med-detail strong { color: var(--text-2); }
.status { font-size: 14px; font-weight: 600; margin: 0 0 12px; }
.status.rot   { color: var(--danger); }
.status.gelb  { color: var(--warn); }
.status.gruen { color: var(--ok); }
.knopf-reihe { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- "Nachkaufen": Links zur Apotheken-Suche ---------- */
/* Eigener, mit einer dünnen Linie abgesetzter Bereich unter den Aktions-Knöpfen. */
.nachkauf {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-hairline);
}
.nachkauf-titel {
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 8px;
  font-size: 13px; font-weight: 700; color: var(--text-2);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.nachkauf-titel .material-symbols-outlined { font-size: 18px; color: var(--violet-500); }
.nachkauf-hinweis { font-size: 13px; color: var(--text-3); margin: 0 0 10px; line-height: 1.5; }

/* Die beiden Links: je eine anklickbare Karten-Zeile. */
.nachkauf-links { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.nachkauf-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: var(--surface-elevated);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
  color: var(--text-1); text-decoration: none;
  transition: border-color var(--dur-base), transform var(--dur-fast), box-shadow var(--dur-base), background var(--dur-base);
}
.nachkauf-link:hover { border-color: var(--violet-500); transform: translateY(-1px); box-shadow: var(--glow-sm); }
.nachkauf-icon { font-size: 20px; color: var(--violet-500); flex-shrink: 0; }
.nachkauf-text { display: flex; flex-direction: column; line-height: 1.3; flex: 1; min-width: 0; }
.nachkauf-text strong { font-size: 14px; font-weight: 600; }
.nachkauf-typ { font-size: 12px; color: var(--text-3); }
.nachkauf-pfeil { font-size: 18px; color: var(--text-3); flex-shrink: 0; }

/* ---------- Anpassung für Handy / kleine Bildschirme ---------- */
@media (max-width: 1023px) {
  .sidebar { display: none; }

  /* Ohne Seitenleiste sitzt die untere Leuchtkugel wieder ganz in der Ecke. */
  .orb-bl { left: -300px; }

  .topbar {
    display: flex; align-items: center;
    position: sticky; top: 0; z-index: 40;
    background: var(--surface-glass);
    backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
    border-bottom: 1px solid var(--border-hairline);
    padding: 16px;
  }

  /* Untere Leiste = schwebende Glas-Pille mit Rand zur Kante (PillNav). */
  .bottombar {
    display: flex; justify-content: space-around; align-items: center;
    position: fixed; bottom: 16px; left: 16px; right: 16px; z-index: 50;
    background: var(--surface-glass);
    backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-pill);
    padding: 8px;
    box-shadow: var(--shadow-lg);
  }
  .bottombar a {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    color: var(--text-3); text-decoration: none;
    font-size: 11px; font-weight: 600;
    padding: 6px 10px; border-radius: var(--radius-pill);
    transition: color var(--dur-base), background var(--dur-base);
  }
  .bottom-aktiv { background: var(--gradient-violet); color: #FFFFFF; box-shadow: var(--glow-sm); }
  .bottom-aktiv .material-symbols-outlined { font-variation-settings: "FILL" 1, "wght" 400; }

  .inhalt { margin-left: 0; padding: 24px 20px; padding-bottom: 104px; }
  .seiten-kopf { text-align: center; }
}

@media (max-width: 600px) {
  .feld-raster { grid-template-columns: 1fr; }
  .formular-karte { padding: 22px; }
  .knopf-primaer, .knopf-scan { width: 100%; justify-content: center; }
  .stats-raster { gap: 10px; }
  .stat-kachel { padding: 15px; gap: 10px; }
  .stat-label { font-size: 9px; }
  .stat-zahl { font-size: 26px; }
  .med-rechts { width: 100%; }
  .med-balken-block { width: 100%; }
}

/* ---------- Umschalten der Ansichten ---------- */
.versteckt { display: none; }
.leer-knopf { margin-top: 16px; }

/* ---------- Hilfe-Fenster (Pop-up) ---------- */
/* Dunkler, leicht verschwommener Hintergrund über der ganzen Seite. */
.overlay {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(8, 8, 16, 0.62);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
/* Versteckt schlägt das display:flex von oben (zwei Klassen = höhere Priorität). */
.overlay.versteckt { display: none; }
/* Das eigentliche Fenster (Karte) in der Mitte. */
.hilfe-fenster {
  position: relative;
  width: 100%; max-width: 560px;
  max-height: 85vh; overflow-y: auto;
  background: var(--surface-card);
  border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 32px;
}
/* Schließen-Knopf (kleine runde Pille oben rechts). */
.hilfe-schliessen {
  position: absolute; top: 16px; right: 16px;
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-hairline);
  background: var(--surface-elevated);
  color: var(--text-2);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: color var(--dur-base), background var(--dur-base), transform var(--dur-fast);
}
.hilfe-schliessen:hover { color: var(--text-1); transform: scale(1.06); }
.hilfe-schliessen .material-symbols-outlined { font-size: 20px; }
/* Titel im Display-Font (wie die anderen Überschriften). */
.hilfe-titel {
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em;
  color: var(--text-1);
  margin: 0 44px 20px 0;   /* rechts Platz für den Schließen-Knopf */
}
.hilfe-abschnitt { margin-bottom: 18px; }
.hilfe-abschnitt:last-child { margin-bottom: 0; }
.hilfe-untertitel {
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-size: 1rem; font-weight: 700;
  color: var(--violet-400);
  margin: 0 0 6px;
}
.hilfe-text { font-size: 14px; line-height: 1.6; color: var(--text-2); margin: 0; }
/* Farb-Legende: kleine runde Punkte in den echten Status-Farben der App. */
.hilfe-farben { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.hilfe-farben li { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.farb-punkt { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.farb-gruen { background: var(--ok); }
.farb-gelb  { background: var(--warn); }
.farb-rot   { background: var(--danger); }
@media (max-width: 600px) {
  .hilfe-fenster { padding: 24px; }
}

/* ---------- Schalter oben rechts (hell/dunkel) ---------- */
.theme-knopf {
  position: fixed;
  top: 20px; right: 24px; z-index: 60;
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-glass);
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
  color: var(--text-2);
  border: 1px solid var(--border-hairline);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: color var(--dur-base), transform var(--dur-base), box-shadow var(--dur-base);
}
.theme-knopf:hover { color: var(--violet-400); transform: rotate(-15deg); box-shadow: var(--glow-sm); }
.theme-knopf .material-symbols-outlined { font-size: 22px; }

/* Sanfter Farbübergang beim Umschalten zwischen hell und dunkel */
body, .sidebar, .topbar, .bottombar, .karte, .med-karte, .stat-kachel,
.theme-knopf, .status-pille, .balken, .feld input, .feld select {
  transition: background-color var(--dur-base) ease, color var(--dur-base) ease, border-color var(--dur-base) ease;
}

/* ---------- Barrierefreiheit: Bewegungen reduzieren ----------
   Wer im System "weniger Bewegung" eingestellt hat, bekommt keine Animationen. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}