/* Event Tesserae – gemeinsames Stylesheet für Verwaltung, Anmeldung und Gästeseiten.
   Hier stehen Farben (Design-Tokens), Schrift und die Grundform von Feldern, Knöpfen und Karten.
   Die Seiten ergänzen nur ihr eigenes Layout. Basisregeln stehen in :where(), haben also die
   Spezifität 0: Jede Seitenregel (auch nur ein Elementname) gewinnt ohne !important. */

/* 1 · Tokens: Farben aus Logo und Eintrittskarte: Nacht #1e2230, Gold #FAC775, Grau #8A8FA3, Pink #D4537E, Türkis #5DCAA5.
   Hell «Nachtleiste»: Inhalt hellblau, Kopf- und Seitenleiste in Nacht, Knöpfe gold mit Nacht-Schrift.
   --acc ist die Flächenfarbe (Knöpfe, aktive Einträge), --link die Schrift- und Randfarbe für Akzente:
   auf Hellblau ist Gold als Schrift zu schwach, deshalb dort Blau (#2b5a8c, 6.6:1).
   --bar* färben die Leisten; --ok/--err sind Türkis und Pink, für Schrift auf Hell abgedunkelt. */
:root{
  --bg:#e6eef7;--card:#f4f8fc;--fg:#1e2230;--muted:#56607a;--line:#d0dcea;--ph:#dce6f1;
  --acc:#FAC775;--acc2:#d8e5f3;--on:#1e2230;--link:#2b5a8c;
  --bar:#1e2230;--bar-fg:#eef0f5;--bar-mut:#8A8FA3;--bar-line:#343a4f;--bar-hov:#2c3245;
  --pink:#D4537E;--teal:#5DCAA5;
  --err:#b0305c;--warn:#a15c00;--ok:#0f7559;
  --font:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;--fs:15px;
  --r:8px;--r-card:12px;--field-pad:8px 10px;
  color-scheme:light}
/* 1 · Tokens: Dunkel = Nacht + Gold wie die Eintrittskarte – nach System, ausser die Seite hat data-theme=light; data-theme=dark erzwingt Dunkel */
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --bg:#141722;--card:#1e2230;--fg:#eef0f5;--muted:#8A8FA3;--line:#343a4f;--ph:#262b3b;
  --acc:#FAC775;--acc2:#3f3b3a;--on:#1e2230;--link:#FAC775;--bar:#1e2230;--bar-fg:#eef0f5;--bar-mut:#8A8FA3;--bar-line:#343a4f;--bar-hov:#3f3b3a;--err:#f08cae;--warn:#EF9F27;--ok:#5DCAA5;color-scheme:dark}}
:root[data-theme=dark]{
  --bg:#141722;--card:#1e2230;--fg:#eef0f5;--muted:#8A8FA3;--line:#343a4f;--ph:#262b3b;
  --acc:#FAC775;--acc2:#3f3b3a;--on:#1e2230;--link:#FAC775;--bar:#1e2230;--bar-fg:#eef0f5;--bar-mut:#8A8FA3;--bar-line:#343a4f;--bar-hov:#3f3b3a;--err:#f08cae;--warn:#EF9F27;--ok:#5DCAA5;color-scheme:dark}

/* 2 · Grundlage */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
:where(body){margin:0;font:var(--fs)/1.45 var(--font);background:var(--bg);color:var(--fg)}

/* 3 · Formulare: alle Textfelder, Auswahlen und Textbereiche sehen gleich aus */
:where(label){display:block;font-weight:600;margin:14px 0 6px}
:where(input:not([type=checkbox],[type=radio],[type=color],[type=hidden],[type=range],[type=file]),select,textarea){
  width:100%;font:inherit;color:var(--fg);background:var(--bg);
  padding:var(--field-pad);border:1px solid var(--line);border-radius:var(--r)}
:where(input,select,textarea,button):focus-visible{outline:2px solid var(--link);outline-offset:1px}
:where(input,select,textarea):disabled{opacity:.6}
:where(input,textarea)::placeholder{color:var(--muted);opacity:1}
/* Kurze Felder (Zahlen, Codes): Breite über Klasse statt style="" */
.w-xs{width:70px}.w-s{width:80px}.w-m{width:100px}.w-auto{width:auto}.w-full{width:100%}

/* 4 · Knöpfe */
:where(button){font:inherit;color:var(--fg);background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:7px 12px;cursor:pointer}
:where(button.pri){background:var(--acc);border-color:var(--acc);color:var(--on)}
:where(button.danger){color:var(--err)}
:where(button):disabled{opacity:.55;cursor:default}

/* 5 · Karten und Texte */
:where(.card){background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:14px;margin:10px 0}
:where(.muted){color:var(--muted);font-size:13px}
:where(.err){color:var(--err);font-size:13px}
:where(.warn){color:var(--warn);font-size:13px}
.mt0{margin-top:0}
.mb0{margin-bottom:0}

/* 6 · Sprachumschalter «EN | DE»: sitzt auf Nacht (Leiste oder eigene Pille), die angezeigte Sprache in Gold, die anderen grau */
.langSw{display:inline-flex;align-items:center;font-size:14px;font-weight:600;letter-spacing:.04em;white-space:nowrap}
.langSw button{border:0;background:none;padding:4px 5px;color:var(--bar-mut);font-weight:inherit;cursor:pointer}
.langSw button:hover{color:var(--bar-fg)}
.langSw button[aria-current=true]{color:var(--acc);cursor:default}
.langSw i{font-style:normal;color:var(--bar-mut);opacity:.6}

/* 7 · Marke links oben auf den Gästeseiten: Logo und «Event Tesserae» wie in der Seitenleiste der Verwaltung.
   Auf sehr schmalen Handys bleibt nur das Logo, damit die Knöpfe rechts Platz haben. */
.gBrand{position:absolute;top:10px;left:12px;height:38px;display:flex;align-items:center;gap:8px;font-weight:700;font-size:16px;color:var(--fg);text-decoration:none;z-index:2}
.gBrand img{width:28px;height:28px;display:block}
@media (max-width:360px){.gBrand span{display:none}}