/* Black & Gold Plattform (Janik 26.10.2026: „webseite BG-GA.com Fraben übernehmen Layaut Plattform wie GMS Giganetz“) – Aufbau und
   Layout wie die GMS Plattform (app.css), nur Farben und Schriften der Webseite bg-ga.com (Webseiten/black-gold-alliance/styles.css):
   hell Creme, Tinte und Gold wie die hellen Abschnitte, dunkel Schwarz und Gold wie die dunklen. Gold ist Akzent (Primärknöpfe, Linien,
   Hervorhebungen), nie große Fläche. Titel und große Zahlen in Cormorant Garamond, Text in Geist (beide OFL, wie auf der Webseite selbst
   gehostet; die Dateien sind variabel: Cormorant 300–700, Geist 100–900). Gilt nur mit data-marke="bg".
   :where(…) hält jede Regel so spezifisch wie die Regel in app.css, die sie ersetzt – Dateien danach (dreieck.css) gewinnen wie gewohnt. */

@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("/marke/bg/cormorant-garamond-normal-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("/marke/bg/cormorant-garamond-normal-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap;
  src: url("/marke/bg/cormorant-garamond-italic-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap;
  src: url("/marke/bg/cormorant-garamond-italic-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/marke/bg/geist-normal-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/marke/bg/geist-normal-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* Hell: Creme, Tinte, Gold ------------------------------------------------------------------------------------------------- */
:root:where([data-marke="bg"]) {
  --schrift: "Geist", -apple-system, "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --schrift-titel: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --gold: #b19045;                         /* Marke (Webseite --gold) */
  --gold-2: #d6b770;                       /* helles Gold: Hover, Zahlen auf Schwarz */
  --auf-gold: #0b0a08;                     /* Schrift auf Gold wie .btn-primary der Webseite */
  --hg: #f4eedf;                           /* Creme */
  --hg-2: #fbf8f0;                         /* Karten: helleres Papier */
  --hg-3: rgba(110, 96, 70, 0.12);
  --hg-4: rgba(110, 96, 70, 0.08);
  --hg-hover: rgba(26, 23, 20, 0.045);
  --seitenleiste: rgba(239, 232, 214, 0.86);
  --glas: rgba(251, 248, 240, 0.74);
  --text: #1a1714;                         /* Tinte */
  --text-2: #55504a;
  --text-3: #736d64;
  --linie: rgba(26, 23, 20, 0.13);
  --linie-stark: rgba(26, 23, 20, 0.28);
  --akzent: #9c7b34;                       /* Gold für Symbole, Linien, Balken (auf Creme kräftiger als das Markengold) */
  --akzent-text: #76591f;                  /* Verweise und Gold-Schrift (Webseite #7d6224, etwas dunkler für Kontrast auf Goldhauch) */
  --akzent-hg: rgba(177, 144, 69, 0.14);
  --akzent-hg-stark: rgba(177, 144, 69, 0.22);
  --wahl: #1a1714;                         /* gewählte Zeile (Mail): Tinte mit heller Schrift */
  --gruen-text: #19722f;                   /* dunkler als in GMS: Kontrast auf Creme */
  --orange-text: #985000;
  --grau-text: #686258;
  --grau-hg: rgba(142, 134, 120, 0.16);
  --wc-hg: rgba(177, 144, 69, 0.08);
  --schatten: 0 0.5px 1px rgba(40, 30, 10, 0.06), 0 2px 8px rgba(40, 30, 10, 0.05);
  --schatten-hoch: 0 1px 3px rgba(40, 30, 10, 0.07), 0 10px 30px rgba(40, 30, 10, 0.1);
  --schatten-blatt: 0 20px 60px rgba(40, 30, 10, 0.22), 0 0 0 0.5px rgba(26, 23, 20, 0.12);
  --fokus: 0 0 0 3.5px rgba(177, 144, 69, 0.42);
  --lg-glas: rgba(252, 249, 241, 0.4);
  --lg-glas-dicht: rgba(248, 244, 233, 0.72);
  --lg-blatt: rgba(250, 247, 239, 0.88);
  --lg-linse: rgba(255, 253, 247, 0.9);
  --lg-knopf: rgba(255, 252, 245, 0.55);
  --lg-hover: rgba(255, 252, 245, 0.82);
  --lg-hover-auf-weiss: rgba(110, 96, 70, 0.1);
  --lg-filter: blur(10px) saturate(140%) brightness(1.03);       /* weniger Sättigung als GMS: der Goldschein soll nicht gelb werden */
  --lg-filter-leicht: blur(5px) saturate(130%) brightness(1.04);
  --lg-kante: 0 0 0 0.5px rgba(26, 23, 20, 0.1);
  --lg-schatten: var(--lg-kante), 0 2px 6px rgba(40, 30, 10, 0.05), 0 12px 32px rgba(40, 30, 10, 0.09);
  --lg-schatten-hoch: var(--lg-kante), 0 6px 16px rgba(40, 30, 10, 0.08), 0 26px 64px rgba(40, 30, 10, 0.16);
  --lg-schatten-knopf: var(--lg-kante), 0 1px 3px rgba(40, 30, 10, 0.08), 0 4px 10px rgba(40, 30, 10, 0.05);
  --lg-kante-oben: rgba(244, 238, 223, 0.92);
  --lg-verlauf:
    radial-gradient(62vw 58vh at 0% 0%, rgba(214, 183, 112, 0.24), transparent 70%),
    radial-gradient(52vw 52vh at 100% 4%, rgba(177, 144, 69, 0.12), transparent 70%),
    radial-gradient(58vw 56vh at 86% 100%, rgba(26, 23, 20, 0.05), transparent 70%);
}

/* Dunkel: Schwarz und Gold wie die dunklen Abschnitte der Webseite --------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:where([data-marke="bg"]):not([data-theme="light"]) {
    --hg: #0b0a08;
    --hg-2: #171511;
    --hg-3: rgba(237, 230, 214, 0.1);
    --hg-4: rgba(237, 230, 214, 0.06);
    --hg-hover: rgba(237, 230, 214, 0.05);
    --seitenleiste: rgba(19, 17, 14, 0.86);
    --glas: rgba(19, 17, 14, 0.74);
    --text: #ede6d6;
    --text-2: rgba(237, 230, 214, 0.72);
    --text-3: rgba(237, 230, 214, 0.54);
    --linie: rgba(237, 230, 214, 0.13);
    --linie-stark: rgba(237, 230, 214, 0.26);
    --akzent: #c6a45a;
    --akzent-text: #d6b770;
    --akzent-hg: rgba(214, 183, 112, 0.14);
    --akzent-hg-stark: rgba(214, 183, 112, 0.22);
    --wahl: rgba(214, 183, 112, 0.24);
    --gruen-text: #4ade80;
    --orange-text: #ffb340;
    --grau-text: #a8a196;
    --grau-hg: rgba(142, 134, 120, 0.24);
    --wc-hg: rgba(214, 183, 112, 0.1);
    --schatten: 0 0 0 0.5px rgba(237, 230, 214, 0.08), 0 2px 8px rgba(0, 0, 0, 0.4);
    --schatten-hoch: 0 0 0 0.5px rgba(237, 230, 214, 0.1), 0 10px 30px rgba(0, 0, 0, 0.5);
    --schatten-blatt: 0 20px 60px rgba(0, 0, 0, 0.65), 0 0 0 0.5px rgba(237, 230, 214, 0.14);
    --fokus: 0 0 0 3.5px rgba(214, 183, 112, 0.45);
    --lg-glas: rgba(26, 23, 20, 0.42);
    --lg-glas-dicht: rgba(19, 17, 14, 0.74);
    --lg-blatt: rgba(22, 20, 17, 0.9);
    --lg-linse: rgba(237, 230, 214, 0.14);
    --lg-knopf: rgba(237, 230, 214, 0.07);
    --lg-hover: rgba(237, 230, 214, 0.13);
    --lg-hover-auf-weiss: rgba(237, 230, 214, 0.1);
    --lg-kante: 0 0 0 0.5px rgba(0, 0, 0, 0.55);
    --lg-schatten: var(--lg-kante), 0 2px 8px rgba(0, 0, 0, 0.32), 0 14px 36px rgba(0, 0, 0, 0.42);
    --lg-schatten-hoch: var(--lg-kante), 0 8px 20px rgba(0, 0, 0, 0.44), 0 30px 72px rgba(0, 0, 0, 0.58);
    --lg-schatten-knopf: var(--lg-kante), 0 1px 3px rgba(0, 0, 0, 0.34);
    --lg-kante-oben: rgba(11, 10, 8, 0.9);
    --lg-verlauf:
      radial-gradient(62vw 58vh at 0% 0%, rgba(177, 144, 69, 0.16), transparent 70%),
      radial-gradient(52vw 52vh at 100% 4%, rgba(214, 183, 112, 0.07), transparent 70%);
  }
}
:root:where([data-marke="bg"])[data-theme="dark"] {
  --hg: #0b0a08;
  --hg-2: #171511;
  --hg-3: rgba(237, 230, 214, 0.1);
  --hg-4: rgba(237, 230, 214, 0.06);
  --hg-hover: rgba(237, 230, 214, 0.05);
  --seitenleiste: rgba(19, 17, 14, 0.86);
  --glas: rgba(19, 17, 14, 0.74);
  --text: #ede6d6;
  --text-2: rgba(237, 230, 214, 0.72);
  --text-3: rgba(237, 230, 214, 0.54);
  --linie: rgba(237, 230, 214, 0.13);
  --linie-stark: rgba(237, 230, 214, 0.26);
  --akzent: #c6a45a;
  --akzent-text: #d6b770;
  --akzent-hg: rgba(214, 183, 112, 0.14);
  --akzent-hg-stark: rgba(214, 183, 112, 0.22);
  --wahl: rgba(214, 183, 112, 0.24);
  --gruen-text: #4ade80;
  --orange-text: #ffb340;
  --grau-text: #a8a196;
  --grau-hg: rgba(142, 134, 120, 0.24);
  --wc-hg: rgba(214, 183, 112, 0.1);
  --schatten: 0 0 0 0.5px rgba(237, 230, 214, 0.08), 0 2px 8px rgba(0, 0, 0, 0.4);
  --schatten-hoch: 0 0 0 0.5px rgba(237, 230, 214, 0.1), 0 10px 30px rgba(0, 0, 0, 0.5);
  --schatten-blatt: 0 20px 60px rgba(0, 0, 0, 0.65), 0 0 0 0.5px rgba(237, 230, 214, 0.14);
  --fokus: 0 0 0 3.5px rgba(214, 183, 112, 0.45);
  --lg-glas: rgba(26, 23, 20, 0.42);
  --lg-glas-dicht: rgba(19, 17, 14, 0.74);
  --lg-blatt: rgba(22, 20, 17, 0.9);
  --lg-linse: rgba(237, 230, 214, 0.14);
  --lg-knopf: rgba(237, 230, 214, 0.07);
  --lg-hover: rgba(237, 230, 214, 0.13);
  --lg-hover-auf-weiss: rgba(237, 230, 214, 0.1);
  --lg-kante: 0 0 0 0.5px rgba(0, 0, 0, 0.55);
  --lg-schatten: var(--lg-kante), 0 2px 8px rgba(0, 0, 0, 0.32), 0 14px 36px rgba(0, 0, 0, 0.42);
  --lg-schatten-hoch: var(--lg-kante), 0 8px 20px rgba(0, 0, 0, 0.44), 0 30px 72px rgba(0, 0, 0, 0.58);
  --lg-schatten-knopf: var(--lg-kante), 0 1px 3px rgba(0, 0, 0, 0.34);
  --lg-kante-oben: rgba(11, 10, 8, 0.9);
  --lg-verlauf:
    radial-gradient(62vw 58vh at 0% 0%, rgba(177, 144, 69, 0.16), transparent 70%),
    radial-gradient(52vw 52vh at 100% 4%, rgba(214, 183, 112, 0.07), transparent 70%);
}
/* „Transparenz reduzieren“, „Mehr Kontrast“ und ohne Unschärfe: undurchsichtig wie in app.css (die Werte oben wären sonst stärker) */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root:where([data-marke="bg"]):not([data-glas="aus"]) { --lg-glas: var(--hg-2); --lg-glas-dicht: var(--hg-2); --lg-blatt: var(--hg-2);
    --lg-knopf: var(--hg-3); --lg-kante-oben: var(--hg); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root:where([data-marke="bg"]):not([data-glas="aus"]) { --lg-glas: var(--hg-2); --lg-glas-dicht: var(--hg-2); --lg-blatt: var(--hg-2); }
}
:where(:root[data-marke="bg"]) ::selection { background: rgba(177, 144, 69, 0.3); }

/* Schrift: Titel und große Zahlen in Cormorant Garamond (kleines x: etwas größer als in GMS), Ziffern in Versalhöhe -------------- */
:where(:root[data-marke="bg"]) .seitenkopf h1 { font-size: 36px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.08; }
:where(:root[data-marke="bg"]) .listen-kopf h2 { font-size: 26px; font-weight: 500; letter-spacing: -0.008em; line-height: 1.12; }
:where(:root[data-marke="bg"]) .detail-kopf h2 { font-size: 28px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.12; }
:where(:root[data-marke="bg"]) .blatt-kopf h2 { font-family: var(--schrift-titel); font-size: 23px; font-weight: 600; letter-spacing: -0.005em; line-height: 1.15; }
:where(:root[data-marke="bg"]) .anmelde-karte h1 { font-size: 32px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.1; }
:where(:root[data-marke="bg"]) .kachel .kz { font-size: 34px; font-weight: 500; letter-spacing: -0.01em; font-variant-numeric: lining-nums tabular-nums; }
:where(:root[data-marke="bg"]) .stunden-zahlen .kz { font-size: 26px; }
:where(:root[data-marke="bg"]) .stempel .uhr { font-size: 54px; font-weight: 500; font-variant-numeric: lining-nums tabular-nums; }
:where(:root[data-marke="bg"]) .heute-karte .uhr { font-size: 60px; font-weight: 500; font-variant-numeric: lining-nums tabular-nums; }
@media (max-width: 760px) { :where(:root[data-marke="bg"]) .seitenkopf h1 { font-size: 32px; } }

/* Seitenleiste: Schild, Name in Cormorant, Gruppen als Kapitälchen in Gold (wie die Beschriftungen der Webseite) ------------- */
:where(:root[data-marke="bg"]) .marke-logo { width: 32px; height: 40px; color: var(--gold); }
:where(:root[data-marke="bg"]) .marke-logo img { display: block; width: 32px; height: 40px; filter: drop-shadow(0 1px 2px rgba(40, 30, 10, 0.24)); }
:where(:root[data-marke="bg"]) .marke-text b { font-family: var(--schrift-titel); font-size: 17px; font-weight: 600; letter-spacing: 0; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:where(:root[data-marke="bg"]) .nav-titel { font-size: 10.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--akzent-text); }
:where(:root[data-marke="bg"]) .nav-punkt .zaehler.wichtig { background: var(--gold); color: var(--auf-gold); }
:where(:root[data-marke="bg"]) .seiten-assistent .ic, :where(:root[data-marke="bg"]) .ki-knopf .ic { color: var(--akzent); }

/* Eigene Person unten links: Schwarz mit Gold wie das Schild (hell), Gold mit Schwarz (dunkel) – nicht das Blau der GMS Plattform */
:where(:root[data-marke="bg"]) .avatar { background: linear-gradient(145deg, #a39b8d, #6e6960); }
:where(:root[data-marke="bg"]) .avatar.akzent { background: linear-gradient(145deg, #2c2721, #0b0a08); color: var(--gold-2); box-shadow: inset 0 0 0 1px rgba(214, 183, 112, 0.55); }

/* Knöpfe: Primärknopf in Gold mit schwarzer Schrift wie .btn-primary der Webseite (Hover helles Gold) ------------------------ */
:where(:root[data-marke="bg"]) .knopf.primaer { background: var(--gold); color: var(--auf-gold); }
:where(:root[data-marke="bg"]) .knopf.primaer:hover { background: var(--gold-2); filter: none; }
:root:where([data-marke="bg"]):not([data-glas="aus"]) .knopf.primaer {
  background: linear-gradient(180deg, #e8cc8a 0%, #b8964a 52%, #967732 100%); color: #130f07;
  box-shadow: inset 0 1px 0 rgba(255, 248, 226, 0.85), inset 0 -1px 0 rgba(58, 42, 8, 0.45), 0 3px 12px rgba(125, 98, 36, 0.28);
}
:root:where([data-marke="bg"]):not([data-glas="aus"]) .knopf.primaer:hover { background: linear-gradient(180deg, #f0d696 0%, #c4a254 52%, #a08038 100%); }
:where(:root[data-marke="bg"]) .chip.aktiv { background: var(--gold); color: var(--auf-gold); }
:root:where([data-marke="bg"]):not([data-glas="aus"]) .chip.aktiv { background: var(--gold); color: var(--auf-gold); }
:where(:root[data-marke="bg"]) .schalter input:checked + .bahn { background: var(--gold); }
:where(:root[data-marke="bg"]) .kontrollkaestchen input, :where(:root[data-marke="bg"]) .auswahl-karte input { accent-color: var(--gold); }
:root:where([data-marke="bg"]):not([data-glas="aus"]) .segmente button.aktiv {
  box-shadow: var(--lg-rand-klein), 0 1px 2px rgba(40, 30, 10, 0.1), 0 4px 14px rgba(40, 30, 10, 0.12);
}

/* Gewählte Mail: Tinte (hell) bzw. Goldhauch (dunkel) mit heller Schrift und goldener Kante statt Blau */
:where(:root[data-marke="bg"]) .mail-zeile.gewaehlt { background: var(--wahl); box-shadow: inset 2px 0 0 var(--gold); }

/* Restliche feste Farben aus app.css: Mitteilungen, Net-D-Zellen, Grautöne der Diagramme */
:where(:root[data-marke="bg"]) .mitteilung { background: rgba(19, 17, 14, 0.94); color: #ede6d6; }
:root:where([data-marke="bg"]):not([data-glas="aus"]) .mitteilung { background: rgba(19, 17, 14, 0.8); }
:where(:root[data-marke="bg"]) .mitteilung:not(.fehler):not(.ok) .ic { color: var(--gold-2); }
:where(:root[data-marke="bg"]) .zelle.angenommen { background: #efe3c4; color: #6b5420; }
:where(:root[data-marke="bg"]) .balken.grau, :where(:root[data-marke="bg"]) .diagramm-legende span.grau::before { background: #d3ccbc; }
:where(:root[data-marke="bg"]) .ue-punkt .farbe.grau { background: #a39b8d; }

@media (max-width: 980px) {
  :where(:root[data-marke="bg"]) .arbeitsflaeche .uebersichten .ue-punkt.aktiv { background: var(--gold); color: var(--auf-gold); }
  :where(:root[data-marke="bg"]) .arbeitsflaeche .uebersichten .ue-punkt.aktiv .zahl { color: var(--auf-gold); }
}
@media (max-width: 760px) {
  :where(:root[data-marke="bg"]) .tableiste a.aktiv { color: var(--akzent-text); }
  :root:where([data-marke="bg"]):not([data-glas="aus"]) .tableiste a.aktiv {
    color: var(--akzent-text); box-shadow: var(--lg-rand-klein), 0 2px 8px rgba(40, 30, 10, 0.12);
  }
}

/* Dunkel: Schild mit feinem Goldschein, Person in Gold, Zellen und Grautöne passend ------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:where([data-marke="bg"]):not([data-theme="light"]) .marke-logo img,
  :root:where([data-marke="bg"]):not([data-theme="light"]) .anmelde-logo img {
    filter: drop-shadow(0 0 1px rgba(214, 183, 112, 0.55)) drop-shadow(0 2px 8px rgba(177, 144, 69, 0.22));
  }
  :root:where([data-marke="bg"]):not([data-theme="light"]) .avatar.akzent { background: linear-gradient(145deg, #d6b770, #b19045); color: #0b0a08; box-shadow: none; }
  :root:where([data-marke="bg"]):not([data-theme="light"]) .zelle.angenommen { background: rgba(214, 183, 112, 0.22); color: #e2c88a; }
  :root:where([data-marke="bg"]):not([data-theme="light"]) .balken.grau,
  :root:where([data-marke="bg"]):not([data-theme="light"]) .diagramm-legende span.grau::before { background: rgba(237, 230, 214, 0.3); }
}
:root:where([data-marke="bg"])[data-theme="dark"] .marke-logo img,
:root:where([data-marke="bg"])[data-theme="dark"] .anmelde-logo img {
  filter: drop-shadow(0 0 1px rgba(214, 183, 112, 0.55)) drop-shadow(0 2px 8px rgba(177, 144, 69, 0.22));
}
:root:where([data-marke="bg"])[data-theme="dark"] .avatar.akzent { background: linear-gradient(145deg, #d6b770, #b19045); color: #0b0a08; box-shadow: none; }
:root:where([data-marke="bg"])[data-theme="dark"] .zelle.angenommen { background: rgba(214, 183, 112, 0.22); color: #e2c88a; }
:root:where([data-marke="bg"])[data-theme="dark"] .balken.grau,
:root:where([data-marke="bg"])[data-theme="dark"] .diagramm-legende span.grau::before { background: rgba(237, 230, 214, 0.3); }

/* Anmeldung: Schild, oben „Mit GMS-Konto anmelden“, darunter einklappbar das Verwaltungskonto (views/anmeldung.js) ----------- */
:where(:root[data-marke="bg"]) .anmelde-logo img { width: 72px; height: auto; margin: 0 auto 16px; filter: drop-shadow(0 2px 6px rgba(40, 30, 10, 0.2)); }
/* .anmelde-fuer und .anmelde-oder kommen aus app.css (wie GMS) und werden über --akzent-hg/--akzent-text golden.
   Die Teile darunter gibt es nur hier: Meldung oben, GMS-Knopf mit Erklärung, aufklappbares Verwaltungskonto, Hinweis ohne GMS. */
:where(:root[data-marke="bg"]) .anmelde-meldung { margin: -8px 0 12px; }
:where(:root[data-marke="bg"]) .anmelde-gms { display: flex; flex-direction: column; gap: 10px; }
:where(:root[data-marke="bg"]) .anmelde-gms .knopf.primaer { min-height: 48px; font-size: 15.5px; font-weight: 600; gap: 8px; }
:where(:root[data-marke="bg"]) .anmelde-erklaerung,
:where(:root[data-marke="bg"]) .anmelde-hinweis { margin: 0; text-align: center; font-size: 12.5px; line-height: 1.45; color: var(--text-2); }
:where(:root[data-marke="bg"]) .anmelde-hinweis { margin: -6px 0 16px; }
:where(:root[data-marke="bg"]) .anmelde-hinweis .ic { color: var(--akzent); vertical-align: -3px; margin-right: 5px; }
/* Trenner „oder mit Verwaltungskonto“: Goldlinien links und rechts, aufklappbar */
:where(:root[data-marke="bg"]) .anmelde-trenner {
  display: flex; align-items: center; gap: 10px; margin: 20px 0 2px; padding: 4px 0; cursor: pointer; list-style: none;
  color: var(--text-3); font-size: 12.5px; letter-spacing: 0.01em; -webkit-user-select: none; user-select: none;
}
:where(:root[data-marke="bg"]) .anmelde-trenner::-webkit-details-marker { display: none; }
:where(:root[data-marke="bg"]) .anmelde-trenner::before,
:where(:root[data-marke="bg"]) .anmelde-trenner::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(177, 144, 69, 0.55)); }
:where(:root[data-marke="bg"]) .anmelde-trenner::after { background: linear-gradient(90deg, rgba(177, 144, 69, 0.55), transparent); }
:where(:root[data-marke="bg"]) .anmelde-trenner:hover { color: var(--text-2); }
:where(:root[data-marke="bg"]) .anmelde-trenner .ic { transition: transform 0.2s; }
:where(:root[data-marke="bg"]) .anmelde-verwaltung[open] > .anmelde-trenner .ic { transform: rotate(180deg); }
:where(:root[data-marke="bg"]) .anmelde-verwaltung > form { margin-top: 12px; }

/* Antwortseite des Karten-Empfangs (POST /api/anmeldung/holding, ohne Skript): wie die Anmeldekarte */
:where(:root[data-marke="bg"]) .karten-empfang .anmelde-logo img { width: 64px; }
:where(:root[data-marke="bg"]) .empfang-weiter { margin: 0 0 10px; }
:where(:root[data-marke="bg"]) .empfang-weiter:last-child { margin-bottom: 0; }
:where(:root[data-marke="bg"]) .empfang-weiter .knopf { width: 100%; min-height: 44px; font-size: 15px; }