/* ===========================================================================
   Imperia BETA · Design „Gold“ für Seiten ohne CRM-Rahmen (G4c, 22.10.2026)
   Anmeldung (login.html), Tippgeber-Portal mit Anmeldung (tippgeber/), Empfehlungsformular (empfehlung.html),
   Terminbuchung (buchen.html, buchung.html), Tippgeber-Formular (tg.html, /t/<token>), Einladungen nachholen.
   Vertrag: analyse/design-gold/VARIABLEN.md, Aussehen wie die Musterseite (analyse/design-gold/muster/).

   SCHICHT wie gold.css: alles hängt an <html class="gold"> (setzt gold-seiten.js, nur auf Seiten mit data-gold), hell ohne,
   dunkel mit data-theme="dark". Regeln als :where(html.gold) .x wiegen wie die Grundregeln der Seite und gewinnen, weil
   diese Datei zuletzt lädt; iOS und Klassisch bleiben unberührt. Farben nur über Variablen aus gold-farben.css, nie festes
   Gold (andere Firmen setzen --g-akzent). Gold als Schrift nur --g-akzent-text (= --gold-ink): Schrift mindestens 4,5 : 1,
   Ränder von Feldern und Knöpfen mindestens 3 : 1. Formen: Kacheln 22 px, Felder und Knöpfe 14 px, Chips und Abzeichen als
   Kapsel, Hauptknopf mit Goldverlauf und dunkler Schrift, Nebenknopf mit feinem Goldrahmen, Fokus mit Goldrand und 4 px Schein.
   Schrift Inter (Inter Gold aus gold-farben.css), Serifen nur für die Markenzeile neben dem Logo (Lucas Entscheidung 22.10.2026).
   =========================================================================== */

/* ============================================================ Grundlage (alle Seiten dieser Datei)
   Wie gold.css: Grund mit Timos warmem Schein und feinem Raster oben. Der Grund liegt am body und geht auf die ganze
   Fläche über, deshalb html ohne eigenen Grund (basis.css und buchen.css setzen ihn sonst auf html und body). */
html:where(.gold){background:transparent;}
:where(html.gold) body{background-color:var(--g-grund);background-image:var(--g-schein);background-repeat:no-repeat;color:var(--g-text);
  font-family:var(--g-schrift);letter-spacing:-.011em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
:where(html.gold[data-theme="dark"]) body{background-image:var(--g-schein), linear-gradient(180deg, color-mix(in srgb, var(--g-grund), #fff 1.2%) 0, var(--g-grund) 900px);}
:where(html.gold) body::before{content:"";position:absolute;left:0;right:0;top:0;height:900px;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--g-raster-linie) 1px, transparent 1px), linear-gradient(90deg, var(--g-raster-linie) 1px, transparent 1px);
  background-size:52px 52px;-webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.65), transparent 75%);mask-image:linear-gradient(to bottom, rgba(0,0,0,.65), transparent 75%);}
:where(html.gold) :is(button, input, select, textarea){font-family:inherit;}
:where(html.gold) a{color:var(--g-akzent-text);}
:where(html.gold) ::selection{background:var(--g-akzent-rand);}
:where(html.gold) :focus-visible{outline:2px solid var(--g-akzent-grafik);outline-offset:2px;}
:where(html.gold) input[type="checkbox"],:where(html.gold) input[type="radio"]{accent-color:var(--g-akzent-grafik);}

/* ============================================================ Kunden- und Tippgeberportal: Bausteine aus basis.css
   Gilt für das Tippgeber-Portal, seine Anmeldung und das Empfehlungsformular. basis.css arbeitet mit --kp-*, die hier auf
   Gold zeigen; feste Farben dort (Weiß auf Gold, Weiß als Feld) bekommen eigene Regeln. */
:root.gold{
  --kp-seite:var(--g-grund);--kp-karte:var(--g-kachel);--kp-text:var(--g-text);--kp-leise:var(--g-text-gedaempft);--kp-linie:var(--g-rand);
  --kp-gold:var(--g-akzent-grafik);--kp-gold-hell:var(--g-akzent-flaeche);--kp-gold-dunkel:var(--g-akzent-text);
  --kp-ok:var(--gs-gruen-text);--kp-warn:var(--gs-orange-text);--kp-fehler:var(--gs-rot-text);
  --kp-rund:var(--g-r-kachel);--kp-knopf:var(--g-r-knopf);--kp-schatten:var(--g-schatten-kachel);--kp-schrift:var(--g-schrift);
}
/* Wortmarke: im Dunkeln die helle Fassung (dunkle Schrift wäre auf Schwarz nicht zu lesen) */
:where(html.gold[data-theme="dark"]) img.kp-logo,:where(html.gold[data-theme="dark"]) img.kp-nav-logo,:where(html.gold[data-theme="dark"]) img.ef-logo{content:url("/api/marke/logo-dunkel");}

/* Kopfleiste: Glas wie Timos Kopf, Portalname als Etikett in Gold */
:where(html.gold) .kp-kopf{background:var(--g-glas);border-bottom:1px solid var(--g-rand);}
:where(html.gold) .kp-kopf .kp-kopf-titel{font-size:11.5px;font-weight:650;letter-spacing:.16em;text-transform:uppercase;color:var(--g-akzent-text);}

/* Leiste unten (Handy) wie die Handy-Leiste der Musterseite, ab 900 px Seitenleiste wie im CRM */
:where(html.gold) .kp-nav{border-top:1px solid var(--g-rand);background:color-mix(in srgb, var(--g-flaeche) 90%, transparent);
  -webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3);}
:where(html.gold) .kp-nav a,:where(html.gold) .kp-nav button{border-radius:14px;color:var(--g-text-gedaempft);}
:where(html.gold) .kp-nav a:hover,:where(html.gold) .kp-nav button:hover{color:var(--g-text);}
:where(html.gold) .kp-nav a[aria-current="page"],:where(html.gold) .kp-nav button[aria-current="page"]{color:var(--g-akzent-text);
  background:linear-gradient(180deg, var(--g-akzent-flaeche-stark), var(--g-akzent-hauch));}
:where(html.gold) .kp-nav a[aria-current="page"]::before,:where(html.gold) .kp-nav button[aria-current="page"]::before{content:"";position:absolute;top:-7px;left:26%;right:26%;
  height:2px;border-radius:2px;background:var(--g-verlauf-linie);box-shadow:0 0 12px var(--g-akzent-schein);}
:where(html.gold) .kp-nav .kp-zaehler{background:var(--g-akzent);color:var(--g-auf-akzent);font-weight:700;}
@media (min-width:900px){
  :where(html.gold) .kp-nav{border-top:0;border-right:1px solid var(--g-rand);background:color-mix(in srgb, var(--g-flaeche) 94%, transparent);}
  :where(html.gold) .kp-nav a[aria-current="page"],:where(html.gold) .kp-nav button[aria-current="page"]{background:var(--g-akzent-flaeche);box-shadow:inset 0 0 0 1px var(--g-akzent-rand);}
  :where(html.gold) .kp-nav a[aria-current="page"]::before,:where(html.gold) .kp-nav button[aria-current="page"]::before{top:9px;bottom:9px;left:-12px;right:auto;width:2px;height:auto;
    background:linear-gradient(180deg, transparent, var(--g-akzent), var(--g-akzent-hell), transparent);}
}

/* Überschriften und Etiketten */
:where(html.gold) .kp-inhalt h1,:where(html.gold) .kp-login h1,:where(html.gold) .ef h1{font-weight:740;letter-spacing:-.03em;}
:where(html.gold) .kp-karte h2,:where(html.gold) .kp-karte h3{font-weight:700;letter-spacing:-.02em;}
:where(html.gold) .kp-abschnitt{font-size:11.5px;font-weight:650;letter-spacing:.14em;color:var(--g-text-leise);}

/* Kacheln: Ecken 22 px, feiner Rand, Glanz oben */
:where(html.gold) .kp-karte{background:var(--g-kachel-glanz), var(--g-kachel);border:1px solid var(--g-rand);box-shadow:var(--g-schatten-kachel);}
:where(html.gold) .kp-zeile{border-bottom-color:var(--g-rand-fein);}
:where(html.gold) .kp-schluss-seite{border:1px solid var(--g-rand);border-radius:var(--g-r-kachel);background:var(--g-kachel-glanz), var(--g-kachel);box-shadow:var(--g-schatten-hoch);}

/* Knöpfe: Hauptknopf Goldverlauf mit dunkler Schrift, „zweit“ mit feinem Goldrahmen, „leise“ als Goldschrift */
:where(html.gold) .kp-knopf,:where(html.gold) .kp-schluss-knopf{border:1px solid transparent;background:var(--g-verlauf-knopf);color:var(--g-auf-akzent);font-weight:700;
  box-shadow:var(--g-knopf-schatten);transition:filter .2s var(--g-ease), transform .1s, border-color .2s var(--g-ease), color .2s var(--g-ease);}
:where(html.gold) .kp-knopf:hover,:where(html.gold) .kp-schluss-knopf:hover{background:var(--g-verlauf-knopf);filter:brightness(1.05) saturate(1.05);}
:where(html.gold) .kp-knopf:disabled{opacity:.42;filter:grayscale(.35);box-shadow:none;}
:where(html.gold) .kp-knopf.zweit,:where(html.gold) .kp-schluss-knopf.zweit{border-color:var(--g-akzent-rand);background:var(--g-kachel);color:var(--g-text);font-weight:600;box-shadow:var(--g-glanz-oben);}
:where(html.gold[data-theme="dark"]) .kp-knopf.zweit,:where(html.gold[data-theme="dark"]) .kp-schluss-knopf.zweit{background:rgba(255,255,255,.03);}
:where(html.gold) .kp-knopf.zweit:hover,:where(html.gold) .kp-schluss-knopf.zweit:hover{border-color:var(--g-akzent-rand-stark);background:var(--g-kachel);color:var(--g-akzent-text);filter:none;}
:where(html.gold[data-theme="dark"]) .kp-knopf.zweit:hover,:where(html.gold[data-theme="dark"]) .kp-schluss-knopf.zweit:hover{background:rgba(255,255,255,.03);}
:where(html.gold) .kp-knopf.leise{border-color:transparent;background:transparent;box-shadow:none;color:var(--g-akzent-text);font-weight:600;}
:where(html.gold) .kp-knopf.leise:hover{background:var(--g-akzent-hauch);text-decoration:none;filter:none;}

/* Felder: Rand 3 : 1, im Fokus Goldrand und 4 px Goldschein */
:where(html.gold) .kp-feld > label,:where(html.gold) .kp-label,:where(html.gold) .ef legend{color:var(--g-text-weich);}
:where(html.gold) .kp-eingabe{border:1px solid var(--g-rand-feld);border-radius:var(--g-r-feld);background:var(--g-feld);color:var(--g-text);box-shadow:var(--g-glanz-oben);
  transition:border-color .2s var(--g-ease), box-shadow .2s var(--g-ease);}
:where(html.gold) .kp-eingabe::placeholder{color:var(--g-text-leise);}
:where(html.gold) .kp-eingabe:hover{border-color:var(--g-akzent-rand-stark);}
:where(html.gold) .kp-eingabe:focus{border-color:var(--g-akzent-grafik);box-shadow:0 0 0 4px var(--g-akzent-flaeche);}
/* Code-Eingabe: große, gleich breite Ziffern auf einem Hauch Gold */
:where(html.gold) .kp-eingabe.kp-code{font-weight:600;font-variant-numeric:tabular-nums;caret-color:var(--g-akzent-grafik);
  background:linear-gradient(180deg, var(--g-akzent-hauch), transparent 70%), var(--g-feld);}
:where(html.gold) .kp-oder{color:var(--g-text-leise);}

/* Zustandsschrift auf Tönung: im Hellen 15 % dunkler als in der Kern-Schicht (wie gold-portal.css --gp-*-text), sonst fällt sie auf
   getönten Kacheln knapp unter 4,5 : 1 (gemessen: „Freigeschaltet“ 4,41). Im Dunkeln gelten die Kern-Werte. */
:root.gold{--gs-gruen-text:color-mix(in srgb, var(--g-gruen-text) 85%, #000);--gs-rot-text:color-mix(in srgb, var(--g-rot-text) 85%, #000);
  --gs-orange-text:color-mix(in srgb, var(--g-orange-text) 85%, #000);}
:root.gold[data-theme="dark"]{--gs-gruen-text:var(--g-gruen-text);--gs-rot-text:var(--g-rot-text);--gs-orange-text:var(--g-orange-text);}

/* Meldungen, Hinweis-Kachel, Abzeichen */
:where(html.gold) .kp-hinweis{border:1px solid var(--g-akzent-rand);border-radius:var(--g-r-kachel-klein);color:var(--g-text);
  background:linear-gradient(180deg, var(--g-akzent-flaeche), var(--g-akzent-hauch));}
:where(html.gold) .kp-marke{border:1px solid var(--g-akzent-rand);background:var(--g-akzent-flaeche);color:var(--g-akzent-text);font-weight:700;}
:where(html.gold) .kp-marke.ok{color:var(--gs-gruen-text);background:color-mix(in srgb, var(--g-gruen) var(--g-zustand-flaeche), transparent);border-color:color-mix(in srgb, var(--g-gruen) var(--g-zustand-rand), transparent);}
:where(html.gold) .kp-marke.warn{color:var(--gs-orange-text);background:color-mix(in srgb, var(--g-orange) var(--g-zustand-flaeche), transparent);border-color:color-mix(in srgb, var(--g-orange) var(--g-zustand-rand), transparent);}
:where(html.gold) .kp-marke.fehler{color:var(--gs-rot-text);background:color-mix(in srgb, var(--g-rot) var(--g-zustand-flaeche), transparent);border-color:color-mix(in srgb, var(--g-rot) var(--g-zustand-rand), transparent);}

/* Balken der Admin-Vorschau („Vorschau als …“): deutlich, aber in Gold statt Gelb */
:where(html.gold) .kp-vorschau-balken,:where(html.gold) .kp-vorschau-balken.muster{background:color-mix(in srgb, var(--g-akzent) 22%, var(--g-flaeche));color:var(--g-text);
  border-bottom:1px solid var(--g-akzent-rand);}
:where(html.gold) .kp-balken-leise,:where(html.gold) .kp-balken-zeit{color:var(--g-text-weich);}
:where(html.gold) .kp-balken-knopf{border:1px solid var(--g-akzent-rand);background:var(--g-kachel);color:var(--g-text);}

/* ============================================================ Tippgeber-Portal (tippgeber.css, vertrag.css, zusage.css, tg-text.css) */
:where(html.gold) .tg-link-feld{border:1px dashed var(--g-akzent-rand);border-radius:var(--g-r-feld);background:var(--g-akzent-hauch);color:var(--g-akzent-text);}
:where(html.gold) .tg-foto{box-shadow:0 0 0 1px var(--g-akzent-rand), 0 0 16px var(--g-akzent-glut);}
:where(html.gold) .tgz-kachel:hover{border-color:var(--g-akzent-rand);box-shadow:var(--g-schatten-hoch);}
:where(html.gold) .tgz-kachel.offen{border-color:var(--g-akzent-rand-stark);box-shadow:var(--g-schatten-kachel), 0 0 0 1px var(--g-akzent-rand);}
:where(html.gold) .tgz-tabelle th{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--g-text-leise);}
:where(html.gold) .tgz-tabelle th,:where(html.gold) .tgz-tabelle td,:where(html.gold) .tgz-zeile{border-bottom-color:var(--g-rand-fein);}
:where(html.gold) .tgv-hinweis,:where(html.gold) .tgv-frage{border:1px solid var(--g-akzent-rand);border-radius:var(--g-r-kachel-klein);
  background:linear-gradient(180deg, var(--g-akzent-flaeche), var(--g-akzent-hauch));}
:where(html.gold) .tgv-janein-wahl label{border-color:var(--g-rand-feld);border-radius:var(--g-r-feld);background:var(--g-feld);}
:where(html.gold) .tgv-janein-wahl label:has(input:checked){border-color:var(--g-akzent-grafik);background:var(--g-akzent-flaeche);}
:where(html.gold) .tgv-zusammenfassung dt,:where(html.gold) .tgv-zusammenfassung dd,:where(html.gold) .tgv-haken-zeile{border-bottom-color:var(--g-rand-fein);}
/* Unterschrift bleibt auf hellem Papier: der Stift zeichnet dunkel (vertrag.js) */
:where(html.gold) .tgv-pad-flaeche{border-color:var(--g-rand-feld);border-radius:var(--g-r-feld);background:var(--g-feld);}
:where(html.gold[data-theme="dark"]) .tgv-pad-flaeche{background:var(--g-text);}
/* Text der Vereinbarung und der Zusage */
:where(html.gold) .tg-kurz{color:var(--g-akzent-text);}
:where(html.gold) .tg-kasten-rahmen{border:1px solid var(--g-akzent-rand);border-radius:var(--g-r-kachel-klein);background:var(--g-akzent-hauch);}
:where(html.gold) .tg-offen,:where(html.gold) .ef-entwurf{background:color-mix(in srgb, var(--g-orange) 22%, transparent);color:inherit;}
:where(html.gold) .tg-umbruch,:where(html.gold) .tg-abschnitt,:where(html.gold) .tg-abschnitt:last-child{border-color:var(--g-rand-fein);}

/* ============================================================ Empfehlungsformular (tippgeber.css .ef) */
:where(html.gold) .ef-wahl{border-color:var(--g-rand-feld);border-radius:var(--g-r-feld);background:var(--g-feld);color:var(--g-text);
  transition:border-color .2s var(--g-ease), background .2s var(--g-ease);}
:where(html.gold) .ef-wahl:hover{border-color:var(--g-akzent-rand-stark);}
:where(html.gold) .ef-wahl:has(input:checked){border-color:var(--g-akzent-grafik);background:var(--g-akzent-flaeche);color:var(--g-akzent-text);font-weight:600;}
:where(html.gold) .ef-haken,:where(html.gold) .ef-haken:last-of-type{border-color:var(--g-rand-fein);}
:where(html.gold) .ef-danke .ef-zeichen{border:1px solid color-mix(in srgb, var(--g-gruen) var(--g-zustand-rand), transparent);color:var(--gs-gruen-text);
  background:color-mix(in srgb, var(--g-gruen) 14%, transparent);box-shadow:0 0 22px color-mix(in srgb, var(--g-gruen) 22%, transparent);}

/* ============================================================ Anmeldung des Teams (login.html, <body class="anmeldung">)
   Farben stellt login.html selbst auf die gemeinsamen Variablen um; hier die Formen und der Hauptknopf. */
:where(html.gold) .anmeldung .karte{border-color:var(--g-rand);border-radius:var(--g-r-kachel);background:var(--g-kachel-glanz), var(--g-kachel);box-shadow:var(--g-schatten-hoch);}
:where(html.gold) .anmeldung .logo img{border-radius:50%;box-shadow:0 0 18px var(--g-akzent-glut);}
:where(html.gold) .anmeldung .logo span{font-family:var(--g-schrift-zier);font-size:12.5px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:var(--g-text);}
:where(html.gold) .anmeldung h1{font-family:var(--g-schrift);font-size:22px;font-weight:740;letter-spacing:-.03em;}
:where(html.gold) .anmeldung label{color:var(--g-text-weich);}
:where(html.gold) .anmeldung input{border-color:var(--g-rand-feld);border-radius:var(--g-r-feld);background:var(--g-feld);box-shadow:var(--g-glanz-oben);
  transition:border-color .2s var(--g-ease), box-shadow .2s var(--g-ease);}
:where(html.gold) .anmeldung input:hover{border-color:var(--g-akzent-rand-stark);}
:where(html.gold) .anmeldung input:focus{border-color:var(--g-akzent-grafik);box-shadow:0 0 0 4px var(--g-akzent-flaeche);}
:where(html.gold) .anmeldung input.code{font-weight:600;font-variant-numeric:tabular-nums;caret-color:var(--g-akzent-grafik);
  background:linear-gradient(180deg, var(--g-akzent-hauch), transparent 70%), var(--g-feld);}
:where(html.gold) .anmeldung button:not(.leise):not(.zweit){border:1px solid transparent;border-radius:var(--g-r-knopf);background:var(--g-verlauf-knopf);
  color:var(--g-auf-akzent);font-weight:700;box-shadow:var(--g-knopf-schatten);transition:filter .2s var(--g-ease), transform .1s;}
:where(html.gold) .anmeldung button:not(.leise):not(.zweit):hover{background:var(--g-verlauf-knopf);filter:brightness(1.05) saturate(1.05);}
:where(html.gold) .anmeldung button:not(.leise):not(.zweit):disabled{opacity:.42;filter:grayscale(.35);box-shadow:none;}
:where(html.gold) .anmeldung button.zweit{border-color:var(--g-akzent-rand);border-radius:var(--g-r-knopf);background:var(--g-kachel);color:var(--g-text);box-shadow:var(--g-glanz-oben);}
:where(html.gold[data-theme="dark"]) .anmeldung button.zweit{background:rgba(255,255,255,.03);}
:where(html.gold) .anmeldung button.zweit:hover{border-color:var(--g-akzent-rand-stark);background:var(--g-kachel);color:var(--g-akzent-text);}
:where(html.gold[data-theme="dark"]) .anmeldung button.zweit:hover{background:rgba(255,255,255,.03);}
:where(html.gold) .anmeldung button.leise{border-radius:var(--g-r-knopf-klein);color:var(--g-akzent-text);}
:where(html.gold) .anmeldung button.leise:hover{background:var(--g-akzent-hauch);text-decoration:none;}
:where(html.gold) .anmeldung .meldung.fehler{color:var(--gs-rot-text);}
:where(html.gold) .anmeldung .oder{color:var(--g-text-leise);}

/* ============================================================ Terminbuchung (buchen.css, Aufbau wie Calendly)
   Im Gold-Design gelten die Farben des Designs (Akzent der Firma), die eigenen Farben des Buchungsprofils nur in iOS und
   Klassisch (buchen.js farben). --b-akzent ist hier Gold als Schrift, Flächen in Gold haben eigene Regeln. */
:root.gold{
  --b-hg:var(--g-kachel);--b-text:var(--g-text);--b-akzent:var(--g-akzent-text);--b-leise:var(--g-text-gedaempft);--b-linie:var(--g-rand);
  --b-dunkel:var(--g-akzent-text);--b-tag:var(--g-akzent-flaeche);--b-tag-hover:var(--g-akzent-flaeche-stark);--b-seite:var(--g-grund);
  --b-schatten:var(--g-schatten-hoch);--b-rund:var(--g-r-kachel);--b-font:var(--g-schrift);
}
:where(html.gold) body.einbetten::before,:where(html.gold) body.vorschau::before{display:none;}
:where(html.gold) .b-karte{background:var(--g-kachel-glanz), var(--g-kachel);}
:where(html.gold) .b-titel{font-weight:740;letter-spacing:-.03em;}
:where(html.gold) .b-haupt h2,:where(html.gold) .b-mitte h1,:where(html.gold) .b-land-kopf h1{font-weight:720;letter-spacing:-.02em;}
:where(html.gold) .b-gastgeber{color:var(--g-text-gedaempft);}
:where(html.gold) .b-logo-text span{font-family:var(--g-schrift-zier);font-size:12.5px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:var(--g-text-weich);}
:where(html.gold) .b-fakt svg{color:var(--g-akzent-text);}
/* Bild des Gastgebers ohne Foto: Goldkreis mit dunklen Initialen (wie .ui-avatar) */
:where(html.gold) .b-av{background:linear-gradient(135deg, var(--g-akzent-hell), var(--g-akzent-tief));color:var(--g-auf-akzent);box-shadow:0 0 22px var(--g-akzent-glut);}
:where(html.gold) .b-zurueck{border-color:var(--g-akzent-rand);background:var(--g-kachel);box-shadow:var(--g-glanz-oben);}
:where(html.gold) .b-zurueck:hover{border-color:var(--g-akzent-rand-stark);}
/* Kalender: freie Tage als Goldtönung, gewählter Tag im Goldverlauf mit Schein */
:where(html.gold) .b-pfeil{box-shadow:inset 0 0 0 1px var(--g-akzent-rand);}
:where(html.gold) .b-pfeil:disabled{box-shadow:none;}
:where(html.gold) .b-wt{font-size:11px;font-weight:650;letter-spacing:.12em;color:var(--g-text-leise);}
:where(html.gold) .b-tag.frei{box-shadow:inset 0 0 0 1px var(--g-akzent-rand);transition:background .2s var(--g-ease), box-shadow .2s var(--g-ease);}
:where(html.gold) .b-tag.frei:hover{box-shadow:inset 0 0 0 1px var(--g-akzent-rand-stark);}
:where(html.gold) .b-tag.an,:where(html.gold) .b-tag.frei.an{background:var(--g-verlauf-knopf);color:var(--g-auf-akzent);box-shadow:var(--g-knopf-schatten), 0 0 18px var(--g-akzent-glut);}
/* Freie Zeiten: Goldrand (3 : 1), gewählte Zeit getönt, „Weiter“ als Hauptknopf */
:where(html.gold) .b-zeit button{border-radius:var(--g-r-knopf);}
:where(html.gold) .b-zeit .z{border:1px solid var(--g-akzent-grafik);background:var(--g-kachel);color:var(--g-akzent-text);font-variant-numeric:tabular-nums;}
:where(html.gold[data-theme="dark"]) .b-zeit .z{background:rgba(255,255,255,.02);}
:where(html.gold) .b-zeit .z:hover{border:1px solid var(--g-akzent-grafik);box-shadow:0 0 0 3px var(--g-akzent-flaeche);}
:where(html.gold) .b-zeit.an .z{border-color:var(--g-akzent-rand);background:var(--g-akzent-flaeche-stark);color:var(--g-akzent-text);}
:where(html.gold) .b-zeit .w{background:var(--g-verlauf-knopf);color:var(--g-auf-akzent);box-shadow:var(--g-knopf-schatten);}
:where(html.gold) .b-zeit .w:hover{background:var(--g-verlauf-knopf);filter:brightness(1.05) saturate(1.05);}
/* Formular */
:where(html.gold) .b-feld{color:var(--g-text-weich);}
:where(html.gold) .b-feld input,:where(html.gold) .b-feld textarea,:where(html.gold) .b-feld select{border:1px solid var(--g-rand-feld);border-radius:var(--g-r-feld);
  background-color:var(--g-feld);color:var(--g-text);box-shadow:var(--g-glanz-oben);transition:border-color .2s var(--g-ease), box-shadow .2s var(--g-ease);}
:where(html.gold) .b-feld input::placeholder,:where(html.gold) .b-feld textarea::placeholder{color:var(--g-text-leise);}
:where(html.gold) .b-feld input:hover,:where(html.gold) .b-feld textarea:hover,:where(html.gold) .b-feld select:hover{border-color:var(--g-akzent-rand-stark);}
:where(html.gold) .b-feld input:focus,:where(html.gold) .b-feld textarea:focus,:where(html.gold) .b-feld select:focus{border-color:var(--g-akzent-grafik);box-shadow:0 0 0 4px var(--g-akzent-flaeche);}
:where(html.gold) .b-feld.fehlt input,:where(html.gold) .b-feld.fehlt textarea,:where(html.gold) .b-feld.fehlt select{border-color:var(--g-rot);box-shadow:0 0 0 4px color-mix(in srgb, var(--g-rot) 14%, transparent);}
:where(html.gold) .b-feld-fehlt{color:var(--gs-rot-text);}
:where(html.gold) .b-optionen{color:var(--g-text);}
:where(html.gold) .b-pille{border-color:var(--g-akzent-rand);border-radius:var(--g-r-kapsel);background:var(--g-kachel);color:var(--g-akzent-text);}
:where(html.gold) .b-pille:hover{border-color:var(--g-akzent-rand-stark);background:var(--g-akzent-hauch);}
:where(html.gold) .b-knopf{border:1px solid transparent;border-radius:var(--g-r-knopf);background:var(--g-verlauf-knopf);color:var(--g-auf-akzent);box-shadow:var(--g-knopf-schatten);}
:where(html.gold) .b-knopf:hover{filter:brightness(1.05) saturate(1.05);}
:where(html.gold) .b-knopf:disabled{opacity:.42;filter:grayscale(.35);box-shadow:none;}
:where(html.gold) .b-fehler{border:1px solid color-mix(in srgb, var(--g-rot) var(--g-zustand-rand), transparent);border-radius:var(--g-r-kachel-klein);
  background:color-mix(in srgb, var(--g-rot) var(--g-zustand-flaeche), transparent);color:var(--gs-rot-text);}
/* Bestätigung, Landingpage, Fuß */
:where(html.gold) .b-box{background:var(--g-kachel-weich);box-shadow:var(--g-glanz-oben);}
:where(html.gold) .b-typ:hover{background:var(--g-akzent-hauch);}
:where(html.gold) .b-typ svg{color:var(--g-akzent-text);}
:where(html.gold) .b-fuss{color:var(--g-text-leise);}

/* ============================================================ Tippgeber-Formular (tg.html, /t/<token>, <div class="wrap tg">)
   Die Seite baut auf portal.css: deren Variablen zeigen innerhalb von .wrap.tg auf Gold, dazu die Formen. */
:where(html.gold) .wrap.tg{
  --imp-gold:var(--g-akzent-grafik);--imp-gold-dark:var(--g-akzent-text);--imp-gold-light:var(--g-akzent-hell);
  --c-card:var(--g-kachel);--c-border:var(--g-rand);--c-border-strong:var(--g-rand-feld);
  --c-text:var(--g-text);--c-text-soft:var(--g-text-weich);--c-text-muted:var(--g-text-gedaempft);
  --c-neg:var(--gs-rot-text);--c-neg-bg:color-mix(in srgb, var(--g-rot) var(--g-zustand-flaeche), transparent);
  --c-pos:var(--gs-gruen-text);--c-pos-bg:color-mix(in srgb, var(--g-gruen) 14%, transparent);
  --radius-sm:var(--g-r-feld);--radius:var(--g-r-kachel);--shadow-card:var(--g-schatten-kachel);
  --font-display:var(--g-schrift);--font-body:var(--g-schrift);
  color:var(--g-text);
}
/* Kopf: Zeichen mit leichtem Schein, Markenzeile in Serifen und gesperrten Großbuchstaben (wie im CRM), Linie wie Timos aktiver Reiter */
:where(html.gold) .wrap.tg .tg-kopf{border-bottom:2px solid transparent;border-image:var(--g-verlauf-linie) 1;}
:where(html.gold) .wrap.tg .tg-kopf img{border-radius:50%;box-shadow:0 0 18px var(--g-akzent-glut);}
:where(html.gold) .wrap.tg .tg-kopf .t{font-family:var(--g-schrift-zier);font-size:12.5px;font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:var(--g-akzent-text);}
:where(html.gold) .wrap.tg .tg-intro h1{font-weight:740;letter-spacing:-.03em;}
:where(html.gold) .wrap.tg .card{background:var(--g-kachel-glanz), var(--g-kachel);}
:where(html.gold) .wrap.tg .card h2{font-weight:700;letter-spacing:-.02em;}
:where(html.gold) .wrap.tg .field input{border-color:var(--g-rand-feld);background:var(--g-feld);color:var(--g-text);box-shadow:var(--g-glanz-oben);
  transition:border-color .2s var(--g-ease), box-shadow .2s var(--g-ease);}
:where(html.gold) .wrap.tg .field input:hover{border-color:var(--g-akzent-rand-stark);}
:where(html.gold) .wrap.tg .field input:focus{border-color:var(--g-akzent-grafik);box-shadow:0 0 0 4px var(--g-akzent-flaeche);}
:where(html.gold) .wrap.tg .field.fehlt input{border-color:var(--g-rot);box-shadow:0 0 0 4px color-mix(in srgb, var(--g-rot) 14%, transparent);}
/* Anrede als Chips (Kapsel), gewählt in Gold */
:where(html.gold) .wrap.tg .tg-wahl button{border-color:var(--g-rand-stark);border-radius:var(--g-r-kapsel);background:var(--g-kachel);color:var(--g-text-weich);font-weight:600;}
:where(html.gold[data-theme="dark"]) .wrap.tg .tg-wahl button{background:rgba(255,255,255,.025);}
:where(html.gold) .wrap.tg .tg-wahl button:hover{border-color:var(--g-akzent-rand);color:var(--g-text);}
:where(html.gold) .wrap.tg .tg-wahl button.an{border-color:var(--g-akzent-rand);background:var(--g-akzent-flaeche);color:var(--g-akzent-text);}
/* Knöpfe: Hauptknopf Goldverlauf, „ghost“ mit feinem Goldrahmen */
:where(html.gold) .wrap.tg .btn{border:1px solid transparent;border-radius:var(--g-r-knopf);background:var(--g-verlauf-knopf);color:var(--g-auf-akzent);font-weight:700;
  box-shadow:var(--g-knopf-schatten);transition:filter .2s var(--g-ease), transform .1s;}
:where(html.gold) .wrap.tg .btn:hover{background:var(--g-verlauf-knopf);filter:brightness(1.05) saturate(1.05);}
:where(html.gold) .wrap.tg .btn:disabled{opacity:.42;filter:grayscale(.35);box-shadow:none;}
:where(html.gold) .wrap.tg .btn.ghost{border-color:var(--g-akzent-rand);background:var(--g-kachel);color:var(--g-text);font-weight:600;box-shadow:var(--g-glanz-oben);}
:where(html.gold[data-theme="dark"]) .wrap.tg .btn.ghost{background:rgba(255,255,255,.03);}
:where(html.gold) .wrap.tg .btn.ghost:hover{border-color:var(--g-akzent-rand-stark);background:var(--g-kachel);color:var(--g-akzent-text);filter:none;}
:where(html.gold[data-theme="dark"]) .wrap.tg .btn.ghost:hover{background:rgba(255,255,255,.03);}
:where(html.gold) .wrap.tg .tg-meldung.fehler{border:1px solid color-mix(in srgb, var(--g-rot) var(--g-zustand-rand), transparent);}
:where(html.gold) .wrap.tg .tg-fertig .haken{border:1px solid color-mix(in srgb, var(--g-gruen) var(--g-zustand-rand), transparent);
  box-shadow:0 0 22px color-mix(in srgb, var(--g-gruen) 22%, transparent);}
:where(html.gold) .wrap.tg .tg-link input{border-color:var(--g-rand-feld);background:var(--g-kachel-weich);color:var(--g-text);}
:where(html.gold) .wrap.tg .tg-oder{color:var(--g-text-leise);letter-spacing:.14em;font-size:11.5px;}

/* ============================================================ Einladungen nachholen (crm/einladungen-nachholen.html, <body class="einladungen">) */
:where(html.gold) .einladungen h1{font-weight:740;letter-spacing:-.03em;}
:where(html.gold) .einladungen .karte{border-color:var(--g-rand);border-radius:var(--g-r-kachel);background:var(--g-kachel-glanz), var(--g-kachel);box-shadow:var(--g-schatten-kachel);padding:18px 20px;}
:where(html.gold) .einladungen .zahl b{font-size:26px;font-weight:760;letter-spacing:-.03em;font-variant-numeric:tabular-nums;}
:where(html.gold) .einladungen th{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--g-text-leise);}
:where(html.gold) .einladungen td{border-bottom-color:var(--g-rand-fein);}
:where(html.gold) .einladungen .knopf{border:1px solid transparent;border-radius:var(--g-r-knopf);background:var(--g-verlauf-knopf);color:var(--g-auf-akzent);font-weight:700;
  box-shadow:var(--g-knopf-schatten);}
:where(html.gold) .einladungen .knopf:hover{filter:brightness(1.05) saturate(1.05);}
:where(html.gold) .einladungen .knopf[disabled]{opacity:.42;filter:grayscale(.35);box-shadow:none;}
:where(html.gold) .einladungen .fehler{color:var(--gs-rot-text);}