/* farben.css - gemeinsame Farbpalette des Portals (17.09.2026)
   Vorher hatte jede Seite ihre eigenen Farben: 390 verschiedene Werte an 1344 Stellen.
   Jetzt gibt es 40 benannte Farben. Wer etwas umfaerben will, aendert es HIER
   - und nur hier. Der Dunkelmodus ist genau dieselbe Liste mit anderen Werten. */
:root {
  --karte: #ffffff;                /* Kartenflaeche, Eingabefelder */
  --flaeche: #f6f8fa;              /* Seitenhintergrund */
  --flaeche-2: #eef1f5;            /* abgesetzte Zeilen, graue Chips */
  --linie: #e3e9ef;                /* Trennlinien, Rahmen */
  --linie-kraeftig: #c4ccd6;       /* betonte Rahmen */
  --text: #1f2a44;                 /* normale Schrift */
  --text-stark: #12211e;           /* Titel, betonte Schrift */
  --text-mittel: #5a6b80;          /* zweite Ebene */
  --text-leise: #8a97a8;           /* Hinweise, Platzhalter */
  --grau-dunkel: #333333;          /* dunkles Grau, aeltere Seiten */
  --grau: #8a8a8a;                 /* mittleres Grau */
  --stein: #4e5a58;                /* Termin-Plakette, graugruen */
  --stein-hell: #7a8a86;           /* graugruen, heller */
  --akzent: #1fbfa0;               /* Bopp-Tuerkis */
  --akzent-dunkel: #178f78;        /* Knopf gedrueckt, Hover */
  --akzent-tief: #0e6f5c;          /* Schrift auf hellem Tuerkis */
  --akzent-hell: #f2fbf9;          /* zarte Tuerkis-Flaeche */
  --akzent-flaeche: #d9f2ec;       /* Tuerkis-Chip */
  --akzent-zart: #9fd6c6;          /* tuerkiser Rahmen, zart */
  --gut: #2e9e5b;                  /* erledigt, in Ordnung */
  --gut-hell: #e8f7ee;             /* gruene Flaeche */
  --gut-zart: #8fce9f;             /* gruener Rahmen, zart */
  --warnung: #f5a623;              /* Achtung, wartend */
  --warnung-dunkel: #b26a00;       /* Schrift auf gelber Flaeche */
  --warnung-hell: #fff6e0;         /* gelbe Flaeche */
  --warnung-zart: #f0c869;         /* gelber Rahmen, zart */
  --gelb: #e8c200;                 /* Markierungen, Stift */
  --gelb-dunkel: #8a6d00;          /* Schrift auf Gelb */
  --sand: #f0dfa0;                 /* Notizzettel, Markierung */
  --sand-hell: #fff7d6;            /* Notizflaeche, sehr hell */
  --fehler: #dc4030;               /* Fehler, ueberfaellig */
  --fehler-dunkel: #a5291c;        /* Schrift auf rotem Grund */
  --fehler-hell: #fdecea;          /* rote Flaeche */
  --fehler-zart: #f0b6a8;          /* roter Rahmen, zart */
  --info: #3a6fd0;                 /* Verweise, blaue Knoepfe */
  --info-dunkel: #2f5fb0;          /* blauer Knopf gedrueckt */
  --info-hell: #eef4ff;            /* blaue Flaeche */
  --info-zart: #b9cdf0;            /* blauer Rahmen, zart */
  --violett: #7c5cc4;              /* Sonderfaelle, Muster */
  --schwarz: #000000;              /* Schatten, bleibt schwarz */
  color-scheme: light;
}

/* Dunkelmodus. Gesetzt wird das Merkmal data-thema am <html> durch thema.js. */
html[data-thema="dunkel"] {
  --karte: #1b2129;
  --flaeche: #141920;
  --flaeche-2: #232b35;
  --linie: #2f3945;
  --linie-kraeftig: #44505f;
  --text: #e6ecf3;
  --text-stark: #f4f8fb;
  --text-mittel: #b3bece;
  --text-leise: #8d9aab;
  --grau-dunkel: #d4dae1;
  --grau: #9aa3ad;
  --stein: #c2cdc9;
  --stein-hell: #94a39e;
  --akzent: #2fd3b3;
  --akzent-dunkel: #1fae92;
  --akzent-tief: #17806b;
  --akzent-hell: #16302b;
  --akzent-flaeche: #1d4038;
  --akzent-zart: #2a5f52;
  --gut: #3fbe74;
  --gut-hell: #16301f;
  --gut-zart: #2f6b40;
  --warnung: #f7b23f;
  --warnung-dunkel: #d98c1f;
  --warnung-hell: #33270d;
  --warnung-zart: #8a6a22;
  --gelb: #efd033;
  --gelb-dunkel: #c2a01f;
  --sand: #6b5a28;
  --sand-hell: #3a3116;
  --fehler: #f0604f;
  --fehler-dunkel: #c94a3a;
  --fehler-hell: #3a1c18;
  --fehler-zart: #7a3a2e;
  --info: #5b8ee8;
  --info-dunkel: #4a7ad2;
  --info-hell: #17243a;
  --info-zart: #3a4e70;
  --violett: #9b7fe0;
  --schwarz: #000000;
  color-scheme: dark;
}

/* Auffangnetz fuer alles, was seine Farbe sonst vom Browser bekommt: leere Formularfelder,
   Seiten ohne eigene Hintergrundangabe.
   ALLES hier steht in :where() und hat damit Spezifitaet null - jede Regel der Seite selbst
   gewinnt. Ohne das faerbte diese Regel den tuerkisen Anmelden-Knopf grau, weil
   "html[data-thema] button" staerker ist als ".btn-primary" (gesehen am 17.09.2026). */
html[data-thema="dunkel"] :where(body) { background: var(--flaeche); color: var(--text); }
html[data-thema="dunkel"] :where(input, textarea, select) {
  background-color: var(--karte); color: var(--text); border-color: var(--linie);
}
html[data-thema="dunkel"] :where(input, textarea)::placeholder { color: var(--text-leise); }
/* Fotos, Skizzen und Unterschriften bleiben, wie sie sind - nur ihr Rahmen wird ruhiger. */
html[data-thema="dunkel"] :where(img, canvas) { border-color: var(--linie); }

/* Der Schalter selbst (thema.js baut ihn ein). */
.thema-schalter {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; margin-left: 8px;
  border: 1px solid var(--linie-kraeftig); border-radius: 50%;
  background: var(--karte); color: var(--text); cursor: pointer;
  line-height: 1; flex: none; box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.thema-schalter:hover { border-color: var(--akzent); color: var(--akzent); }
.thema-schalter svg { width: 18px; height: 18px; display: block; }
/* Seiten ohne Kopfzeile (Anmeldung, Passwort): der Knopf schwebt in der Ecke.
   Etwas tiefer als ganz oben, damit er im Testsystem nicht unter dem roten Band klemmt. */
.thema-schalter.schwebend { position: fixed; top: 44px; right: 16px; z-index: 9999; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
@media print { .thema-schalter { display: none !important; } }

/* Opel-Logo (Adam, Astra): Datei ist dunkel, im Dunkelmodus weiss wie Simons Vorlage (22.09.2026) */
html[data-thema="dunkel"] img[src*="fahrzeuge/opel.png"] { filter: invert(1); }

/* Glocke subtiler (patch-450, Simon 01.11.2026: "mach die notification glocke subtiler"). Gilt fuer die Glocke aller
   Seiten (glocke.js, .gg-*) und die eigene der Startseite (.glocke-*). "html" davor, damit es die Stile der Skripte schlaegt.
   Kein Kreis mit Rand mehr, nur das Symbol; statt der roten Zahlenblase ein kleiner Punkt (Zahlen beim Aufklappen). */
html .gg-btn,html .glocke-btn{width:32px;height:32px;border:none;background:transparent;color:var(--text-mittel);transition:background .15s,color .15s;}
html .gg-btn:hover,html .gg-btn[aria-expanded="true"],html .glocke-btn:hover,html .glocke-btn[aria-expanded="true"]{background:var(--flaeche-2);color:var(--text-stark);}
html .gg-btn svg,html .glocke-btn svg{width:17px;height:17px;}
html .gg-zahl,html .glocke-zahl{top:5px;right:6px;min-width:0;width:8px;height:8px;padding:0;border-radius:50%;font-size:0;line-height:0;color:transparent;
  background:var(--fehler);box-shadow:0 0 0 2px var(--karte);}

/* Uebersicht-Knopf als Haus (patch-453, 01.11.2026) - rund, nur das Symbol */
html .bar-btn.haus-knopf{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border-radius:50%;flex:none;}
html .bar-btn.haus-knopf svg{width:18px;height:18px;display:block;}

/* Glocken-Liste als Liquid Glass (patch-456, Simon 01.11.2026: "wenn man notifications oeffnet sind diese nicht liquidglas").
   Gilt fuer die Liste aller Seiten (.gg-liste) und die der Startseite (.glocke-liste). */
html .gg-liste,html .glocke-liste{background:rgba(255,255,255,.6);-webkit-backdrop-filter:blur(24px) saturate(190%);backdrop-filter:blur(24px) saturate(190%);
  border:1px solid rgba(255,255,255,.7);border-radius:18px;padding:6px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 0 0 .5px rgba(0,0,0,.06),0 16px 50px rgba(0,0,0,.16);}
html[data-thema="dunkel"] .gg-liste,html[data-thema="dunkel"] .glocke-liste{background:rgba(44,44,48,.58);border-color:rgba(255,255,255,.1);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 16px 50px rgba(0,0,0,.5);}
html .gg-liste a,html .glocke-liste a{border-radius:12px;}
html .gg-liste a:hover,html .glocke-liste a:hover{background:rgba(118,118,128,.14);}
html .gg-kopf,html .glocke-liste .gl-kopf{text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:600;}