/* Design-System: eine Quelle fuer Farb-Token. Auf allen eingeloggten Seiten eingebunden.
   Weniger Varianz: Gruen nur fuer die eine Primaeraktion und aktive Zustaende. */
:root {
  --gruen-primaer: #00C2A8;   /* Marken-Gruen, gefuellte Primaeraktion + aktive Zustaende */
  --gruen-still: #6E9E93;     /* gedaempftes Graugruen (~45% entsaettigt) fuer Kicker/Nebenakzente */
  --text-hell: #F5F7FA;       /* Haupttext auf dunkel */
  --text-sekundaer: #C8D0DA;  /* Sekundaer-/Metatext */
  --text-meta: #ACB6C2;       /* Meta/Kicker, unterste Textstufe, nichts dunkler */
  --text-gedimmt: var(--text-meta); /* Alt-Alias, Inventur stellt Referenzen auf --text-meta um */
  --flaeche-karte: #14141B;   /* Kartenflaeche */
  --linie: #23232E;           /* Trennlinien/Rahmen */

  /* Verbindliche Masse fuer die eine Button-Familie (Ghost-Pill) */
  --btn-radius: 999px;
  --btn-hoehe: 40px;
  --btn-text-dunkel: #04110E; /* Rest-Kompat, falls noch gefuellt referenziert */
}

/* Admin-Balken: Seiteninhalt beginnt unter dem festen Balken (auch auf Seiten mit eigenem Inline-CSS). */
body.has-admin-bar { padding-top: calc(48px + env(safe-area-inset-top, 0px)); }

/* Eine Button-Familie fuer den ganzen eingeloggten Bereich: Ghost-Pills, Breite nach Inhalt.
   Vollbreite nur mit .ds-btn-block (bewusst gesetzt). */
.ds-btn-primary {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--btn-hoehe); padding: 0 22px;
  border: 1.5px solid var(--gruen-primaer); border-radius: var(--btn-radius);
  background: transparent; color: var(--gruen-primaer);
  font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.2;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background 200ms ease, opacity 200ms ease;
}
.ds-btn-primary:hover { background: rgba(0,194,168,0.10); }
.ds-btn-primary:active { transform: scale(0.98); }
.ds-btn-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--btn-hoehe); padding: 0 22px;
  border: 1.5px solid var(--linie); border-radius: var(--btn-radius);
  background: transparent; color: var(--text-sekundaer);
  font-family: inherit; font-size: 15px; font-weight: 600; line-height: 1.2;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color 200ms ease, color 200ms ease;
}
.ds-btn-secondary:hover { border-color: #33333f; }
.ds-btn-block { width: 100%; }
.ds-btn-tertiary {
  background: none; border: none; padding: 6px 4px;
  color: var(--gruen-still); font-family: inherit; font-size: 14px; font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Standard-Warteanzeige (EINE Quelle): duenner dunkler Ring, gruener Lauf. Groessen je Einsatz
   (32/40px) via width/height am Element; Optik immer identisch. Der Gespraechs-Orb (js/orb.js)
   ist Bedien-Element und ausdruecklich KEIN Spinner. */
.circle-spinner {
  width: 32px; height: 32px;
  border: 2.5px solid #2a2a35;
  border-top-color: var(--gruen-primaer);
  border-radius: 50%;
  animation: circle-spin 700ms linear infinite;
}
@keyframes circle-spin { to { transform: rotate(360deg); } }