/* stadl.online — gemeinsame Grundlage: Farben, Typografie, Navbar, Footer.
   Seitenspezifisches steht jeweils im <style> der Seite.

   Farben laufen ausnahmslos über Tokens. Der helle Satz steht in :root, der
   dunkle zweimal daneben: einmal für "System steht auf dunkel, und niemand hat
   ausdrücklich hell gewählt", einmal für die bewusste Wahl per Umschalter.
   Ein winziges Skript im <head> jeder Seite setzt data-theme vor dem ersten
   Bildaufbau, damit beim Laden nichts kurz aufblitzt. */

:root{
  color-scheme:light;

  --canvas:#F7F6F3;
  --surface:#FFFFFF;
  --surface-2:#FBFBFA;
  --ink:#111111;
  --ink-hover:#333333;
  --muted:#787774;
  --faint:#A5A29B;
  --line:#EAEAEA;
  --line-strong:#DDDBD6;
  --slot:#EFEDE8;

  --accent-bg:#FBF3DB;
  --accent-ink:#956400;
  --accent-line:#F0E4C0;
  --good-bg:#EDF3EC;
  --good-ink:#346538;
  --good-line:#D8E5D9;
  --bad-bg:#FDEBEC;
  --bad-ink:#9F2F2D;
  --bad-line:#F3D6D7;
  --danger:#9F2F2D;

  --ok:#4F9A57;
  --warn:#C8A02E;

  --nav-bg:rgba(247,246,243,0.82);
  --glow-a:rgba(149,100,0,0.05);
  --glow-b:rgba(17,17,17,0.035);
  --tint:rgba(149,100,0,0.03);

  --shadow-soft:0 2px 8px rgba(0,0,0,0.04);
  --shadow-lift:0 12px 32px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.04);

  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI Variable Text","Segoe UI","Helvetica Neue",Arial,sans-serif;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono","Segoe UI Mono","Liberation Mono",monospace;

  --ease:cubic-bezier(0.16,1,0.3,1);
  --nav-h:57px;
  --gutter:clamp(18px,4vw,40px);
}

/* Fallback, falls das Kopf-Skript nicht laufen konnte (kein localStorage o. ä.) */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;

    --canvas:#141312;
    --surface:#1C1B19;
    --surface-2:#232120;
    --ink:#EDEAE4;
    --ink-hover:#FFFFFF;
    --muted:#9B958C;
    --faint:#6F6A63;
    --line:#2B2926;
    --line-strong:#3C3833;
    --slot:#26241F;

    --accent-bg:#3A2D10;
    --accent-ink:#E8C572;
    --accent-line:#4A3A18;
    --good-bg:#1D2A1E;
    --good-ink:#8FC393;
    --good-line:#2A3D2C;
    --bad-bg:#381D1D;
    --bad-ink:#EE9E9B;
    --bad-line:#4C2726;
    --danger:#EE9E9B;

    --ok:#6FB877;
    --warn:#D9B24A;

    --nav-bg:rgba(20,19,18,0.82);
    --glow-a:rgba(232,197,114,0.05);
    --glow-b:rgba(255,255,255,0.025);
    --tint:rgba(232,197,114,0.035);

    --shadow-soft:0 2px 8px rgba(0,0,0,0.35);
    --shadow-lift:0 12px 32px rgba(0,0,0,0.50), 0 2px 6px rgba(0,0,0,0.30);
  }
}

/* Die bewusste Wahl schlägt die Systemeinstellung */
:root[data-theme="dark"]{
  color-scheme:dark;

  --canvas:#141312;
  --surface:#1C1B19;
  --surface-2:#232120;
  --ink:#EDEAE4;
  --ink-hover:#FFFFFF;
  --muted:#9B958C;
  --faint:#6F6A63;
  --line:#2B2926;
  --line-strong:#3C3833;
  --slot:#26241F;

  --accent-bg:#3A2D10;
  --accent-ink:#E8C572;
  --accent-line:#4A3A18;
  --good-bg:#1D2A1E;
  --good-ink:#8FC393;
  --good-line:#2A3D2C;
  --bad-bg:#381D1D;
  --bad-ink:#EE9E9B;
  --bad-line:#4C2726;
  --danger:#EE9E9B;

  --ok:#6FB877;
  --warn:#D9B24A;

  --nav-bg:rgba(20,19,18,0.82);
  --glow-a:rgba(232,197,114,0.05);
  --glow-b:rgba(255,255,255,0.025);
  --tint:rgba(232,197,114,0.035);

  --shadow-soft:0 2px 8px rgba(0,0,0,0.35);
  --shadow-lift:0 12px 32px rgba(0,0,0,0.50), 0 2px 6px rgba(0,0,0,0.30);
}

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

button{font:inherit;color:inherit}

.sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Sprungmarke fuer Tastatur und Screenreader */
.skip{
  position:absolute;
  left:var(--gutter);
  top:-100px;
  z-index:60;
  padding:9px 14px;
  background:var(--ink);
  color:var(--canvas);
  border-radius:6px;
  font-size:13px;
  text-decoration:none;
  transition:top 200ms var(--ease);
}
.skip:focus{top:10px}

/* ---------------------------------------------------------------- Navbar */

.nav{
  position:sticky;
  top:0;
  z-index:50;
  height:var(--nav-h);
  display:flex;
  align-items:center;
  gap:clamp(12px,3vw,28px);
  padding:0 var(--gutter);
  border-bottom:1px solid var(--line);
  background:var(--nav-bg);
  backdrop-filter:saturate(150%) blur(12px);
  -webkit-backdrop-filter:saturate(150%) blur(12px);
}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nav{background:var(--canvas)}
}

.nav-mark{
  display:inline-flex;
  align-items:baseline;
  gap:9px;
  margin-right:auto;
  min-width:0;
  text-decoration:none;
  color:var(--ink);
}

.nav-mark .glyph{
  flex:none;
  width:22px;height:22px;
  border-radius:5px;
  background:var(--ink);
  color:var(--canvas);
  font-family:var(--serif);
  font-size:14px;
  line-height:22px;
  text-align:center;
  align-self:center;
}

.nav-mark .word{
  font-family:var(--serif);
  font-size:17px;
  letter-spacing:-0.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:clamp(10px,2.4vw,22px);
}

.nav-links a{
  position:relative;
  padding:6px 2px;
  color:var(--muted);
  text-decoration:none;
  font-size:14px;
  white-space:nowrap;
  transition:color 180ms var(--ease);
}

.nav-links a::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:1px;
  height:1px;
  background:var(--ink);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 260ms var(--ease);
}

.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{transform:scaleX(1)}

.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-links a[aria-current="page"]::after{transform:scaleX(1);background:var(--line-strong)}

.nav-links a:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px;border-radius:3px}

/* Hervorgehobener letzter Eintrag */
.nav-cta{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 13px !important;
  border-radius:6px;
  background:var(--ink);
  color:var(--canvas) !important;
  font-size:13.5px !important;
  transition:background 180ms var(--ease), transform 120ms var(--ease);
}
.nav-cta::after{display:none}
.nav-cta:hover{background:var(--ink-hover)}
.nav-cta:active{transform:scale(0.98)}
.nav-cta .arrow{
  display:inline-block;
  transition:transform 260ms var(--ease);
}
.nav-cta:hover .arrow{transform:translateX(2px)}

/* -------------------------------------------------- Hell/Dunkel-Schalter */

.theme-toggle{
  flex:none;
  display:inline-grid;
  place-items:center;
  width:30px;height:30px;
  padding:0;
  border:1px solid transparent;
  border-radius:7px;
  background:none;
  color:var(--muted);
  cursor:pointer;
  transition:color 180ms var(--ease), background 180ms var(--ease),
             border-color 180ms var(--ease), transform 120ms var(--ease);
}
.theme-toggle:hover{color:var(--ink);background:var(--slot);border-color:var(--line)}
.theme-toggle:active{transform:scale(0.94)}
.theme-toggle:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px}

.theme-toggle svg{
  width:16px;height:16px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Gezeigt wird, wohin der Klick fuehrt - nicht, wo man gerade ist */
.theme-toggle .i-sun{display:none}
.theme-toggle .i-moon{display:block}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-toggle .i-sun{display:block}
  :root:not([data-theme="light"]) .theme-toggle .i-moon{display:none}
}

:root[data-theme="dark"] .theme-toggle .i-sun{display:block}
:root[data-theme="dark"] .theme-toggle .i-moon{display:none}
:root[data-theme="light"] .theme-toggle .i-sun{display:none}
:root[data-theme="light"] .theme-toggle .i-moon{display:block}

@media (max-width:479px){
  :root{--nav-h:53px}
  .nav-mark .word{font-size:15px}
  .nav-links a{font-size:13px}
  .nav-cta{padding:6px 10px !important;font-size:12.5px !important}
  .theme-toggle{width:27px;height:27px}
}

/* ---------------------------------------------------------------- Footer */

.site-footer{
  border-top:1px solid var(--line);
  padding:22px var(--gutter) calc(22px + env(safe-area-inset-bottom));
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px 22px;
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.03em;
  color:var(--faint);
}

.site-footer a{
  color:var(--muted);
  text-decoration:none;
  border-bottom:1px solid transparent;
}
.site-footer a:hover{color:var(--ink);border-bottom-color:var(--line-strong)}

.site-footer .spacer{margin-left:auto}

/* ------------------------------------------------------- Gemeinsame Teile */

.eyebrow{
  display:inline-block;
  padding:5px 11px;
  border-radius:9999px;
  background:var(--accent-bg);
  color:var(--accent-ink);
  font-size:11px;
  font-weight:600;
  letter-spacing:0.09em;
  text-transform:uppercase;
  line-height:1;
}

kbd{
  font-family:var(--mono);
  font-size:10px;
  border:1px solid var(--line);
  border-bottom-width:2px;
  border-radius:4px;
  background:var(--canvas);
  padding:1px 4px;
}

/* Ruhiger Auftritt beim Laden */
.reveal{opacity:0;transform:translateY(12px);animation:rise .7s var(--ease) forwards}
@keyframes rise{to{opacity:1;transform:none}}

@media (prefers-reduced-motion: reduce){
  .reveal{animation:none;opacity:1;transform:none}
  *{animation-duration:0.01ms !important;transition-duration:0.01ms !important}
}

/* ------------------------------------------------------- Anmeldezustand */
/* Solange die Rolle nicht feststeht, bleibt alles Rollenabhaengige weg.
   Danach entscheidet nav.js per hidden-Attribut - so bleibt das eigene
   display der Elemente erhalten (revert wuerde auf den Browserwert fallen). */

[data-auth="unknown"] [data-only]{display:none !important}
[hidden]{display:none !important}

/* Zaehler ungelesener Tickets in der Navbar */
.badge{
  display:inline-block;
  min-width:17px;
  margin-left:7px;
  padding:1px 5px;
  border-radius:9999px;
  background:var(--accent-ink);
  color:var(--canvas);
  font-family:var(--mono);
  font-size:10px;
  line-height:15px;
  text-align:center;
  vertical-align:1px;
}

.nav-user{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding-left:clamp(8px,2vw,16px);
  margin-left:clamp(2px,1vw,6px);
  border-left:1px solid var(--line);
}

.nav-user .who{
  font-family:var(--mono);
  font-size:12px;
  color:var(--ink);
  max-width:14ch;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

@media (max-width:479px){
  .nav-user{padding-left:8px}
  .nav-user .who{max-width:8ch;font-size:11px}
}

/* ------------------------------------------------------------ Formulare */

.form-field{margin:0 0 16px}

.form-field label{
  display:block;
  margin:0 0 6px;
  font-size:12px;
  font-weight:600;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--muted);
}

.form-field input{
  display:block;
  width:100%;
  padding:11px 13px;
  border:1px solid var(--line-strong);
  border-radius:8px;
  background:var(--surface);
  color:var(--ink);
  font:inherit;
  outline:none;
  transition:border-color 160ms var(--ease);
}

.form-field input:focus{border-color:var(--ink)}
.form-field input:disabled{background:var(--slot);color:var(--muted)}

.form-field .help{
  margin:6px 2px 0;
  font-size:12px;
  color:var(--faint);
}

.notice{
  margin:0 0 18px;
  padding:11px 14px;
  border-radius:8px;
  font-size:14px;
  border:1px solid var(--line);
  background:var(--surface);
  color:var(--muted);
}

.notice.bad{background:var(--bad-bg);border-color:var(--bad-line);color:var(--bad-ink)}
.notice.good{background:var(--good-bg);border-color:var(--good-line);color:var(--good-ink)}
.notice.hint{background:var(--accent-bg);border-color:var(--accent-line);color:var(--accent-ink)}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:12px 20px;
  border-radius:6px;
  border:1px solid transparent;
  text-decoration:none;
  font-size:15px;
  cursor:pointer;
  transition:background 180ms var(--ease), border-color 180ms var(--ease),
             color 180ms var(--ease), transform 120ms var(--ease);
}
.btn:active{transform:scale(0.985)}
.btn:disabled{opacity:0.55;cursor:default}
.btn:disabled:active{transform:none}

.btn-primary{background:var(--ink);color:var(--canvas)}
.btn-primary:hover:not(:disabled){background:var(--ink-hover)}

.btn-quiet{border-color:var(--line-strong);color:var(--ink);background:var(--surface)}
.btn-quiet:hover:not(:disabled){border-color:var(--ink)}

.btn-danger{border-color:var(--bad-line);color:var(--danger);background:var(--surface)}
.btn-danger:hover:not(:disabled){background:var(--bad-bg);border-color:var(--danger)}

.btn-small{padding:7px 12px;font-size:13px;border-radius:5px}

.btn .arrow{transition:transform 260ms var(--ease)}
.btn:hover:not(:disabled) .arrow{transform:translateX(3px)}
