/* ============================================================================
   WM-App Base Layer
   ----------------------------------------------------------------------------
   - Body-Defaults (Schrift, Farbe, Hintergrund) — übernimmt was heute in
     index.html inline definiert ist, mit Tokens.
   - Focus-Indikatoren (von RKV adaptiert)
   - Custom Scrollbar
   - Selection-Color
   - Native Form-Controls dunkel
   ----------------------------------------------------------------------------
   ACHTUNG: Diese Regeln sind so geschrieben, dass sie nichts überschreiben,
   was heute inline gesetzt ist. Sie definieren nur die Defaults (low specificity).
   Erst Commit 2 räumt die Inline-Styles auf.
   ============================================================================ */

/* ── Smooth-Scroll bei Anchor-Sprüngen ──────────────────────────────────── */
html {
  scroll-behavior: smooth;
  /* Scrollbar komplett verstecken (Wheel/Tastatur/Touch scrollen weiterhin).
     Damit gibt es auch keinen Layout-Sprung beim Wechsel zwischen kurzen
     und langen Tabs. */
  scrollbar-width: none;  /* Firefox */
}
html::-webkit-scrollbar {  /* Chromium/Edge/Safari */
  width: 0;
  height: 0;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* ── Globaler Hintergrund: gleicher Schichtaufbau wie Login ──────────────── */
/* Auf html, damit das Canvas-Painting den Look bei jeder Scrollposition zeigt.
   background-attachment:fixed haelt die Radial-Ellipsen ruhig in den Ecken.
   background-color NACH dem background-Shorthand, sonst zieht der Shorthand
   die Farbe auf transparent zurück und iOS-Safari zeigt im Overscroll
   (Rubber-Band) das Browser-Default-Weiß. */
html {
  background:
    /* Schwarzer Vignetten-Glow unten-links — als oberste Layer, damit die
       Gold-Dot-Textur in diesem Bereich nicht durchschlägt. */
    radial-gradient(ellipse 95% 70% at 5% 95%,
      rgba(0,0,0,1) 0%,
      rgba(0,0,0,.85) 22%,
      rgba(0,0,0,.40) 50%,
      transparent 78%
    ),
    radial-gradient(circle at 1px 1px, rgba(227,165,5,.18) 1px, transparent 0) 0 0/28px 28px,
    radial-gradient(ellipse 55% 45% at 88% 12%, rgba(227,165,5,.22), transparent 65%),
    linear-gradient(180deg, #000 0%, #0a0700 100%);
  background-color: #000;
  background-attachment: fixed;
}

/* ── Body bekommt die richtige Body-Schrift (Inter) ─────────────────────── */
body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--c-text);
  background: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Form-Controls: dark color-scheme, damit native Picker dark sind ────── */
input,
select,
textarea,
button {
  color-scheme: dark;
  font-family: inherit;
}

/* ── Buttons: aktive-state-feedback bleibt erhalten ─────────────────────── */
button {
  cursor: pointer;
}

/* ============================================================================
   FOCUS — sichtbarer goldener Glow auf allen interaktiven Elementen
   Bislang gab es nur einen Border-Color-Flip auf Inputs. Jetzt für alle.
   ============================================================================ */
:focus-visible {
  outline: 2px solid var(--c-gold);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;  /* Inputs bekommen Glow statt Outline, sieht ruhiger aus */
  border-color: var(--c-gold);
  box-shadow: var(--focus-glow);
}

button:focus-visible {
  outline-offset: 3px;
}

/* Tastatur-Nutzung sichtbar machen, Mausnutzer nicht stören:
   :focus-visible ist bereits "smart", aber wir entfernen das alte tap-highlight */
:focus:not(:focus-visible) {
  outline: none;
}

/* ============================================================================
   SCROLLBAR — schmal, gold, dezent
   ============================================================================ */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--c-gold-soft);
  border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--c-gold-border);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--c-gold-soft) transparent;
}

/* ============================================================================
   SELECTION — gold getönt
   ============================================================================ */
::selection {
  background: var(--c-gold-glow);
  color: var(--c-text);
}

/* ============================================================================
   Native Date/Time Picker Icons — in Bälz-Gold färben
   (Nur bei input[type=date|time|month] sichtbar; harmlos sonst)
   ============================================================================ */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: brightness(0) saturate(100%) invert(75%) sepia(60%)
          saturate(2000%) hue-rotate(3deg) brightness(95%);
  cursor: pointer;
  opacity: 0.85;
}

/* ============================================================================
   Native <select> Options dunkel (sonst weiß-auf-weiß auf manchen Browsern)
   ============================================================================ */
option {
  background-color: var(--c-bg);
  color: var(--c-text);
}

/* ============================================================================
   Links — gold, dezent unterstrichen on hover
   ============================================================================ */
a {
  color: var(--c-gold);
  text-decoration: none;
  transition: opacity 0.15s ease;
}
a:hover {
  opacity: 0.85;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================================================================
   Reduced Motion — schaltet Animationen aus
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================================
   Screenreader-only Helper-Klasse (für später)
   ============================================================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}