/* ============================================================
   LGCY – gemeinsame Stilebene aller Anwendungen der Gruppe
   ------------------------------------------------------------
   Wird von jeder App als LETZTES Stylesheet geladen und verfeinert,
   was schon da ist: Schrift, Abstände, Fokus, Formularfelder,
   Tabellen, Bedienung auf dem Handy. Die Farbwelt jeder App bleibt
   erhalten – vereinheitlicht werden Handschrift und Handhabung.

   Bearbeiten:  /opt/sites/shared/lgcy.css   (eine Datei für alle)
   ============================================================ */

/* Selbst gehostete Schriften (DSGVO: keine Google-Fonts-CDN, kein
   IP-Transfer an Google). Ersetzt den frueheren @import von
   fonts.googleapis.com. Subsets: latin + latin-ext. */
@font-face {
  font-family: 'Familjen Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/shared/fonts/familjen-grotesk-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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: 'Familjen Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/shared/fonts/familjen-grotesk-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: 'Familjen Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/shared/fonts/familjen-grotesk-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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: 'Familjen Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/shared/fonts/familjen-grotesk-600-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: 'Familjen Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/shared/fonts/familjen-grotesk-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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: 'Familjen Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/shared/fonts/familjen-grotesk-700-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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/shared/fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/shared/fonts/ibm-plex-mono-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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/shared/fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/shared/fonts/ibm-plex-mono-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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/shared/fonts/ibm-plex-sans-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/shared/fonts/ibm-plex-sans-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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/shared/fonts/ibm-plex-sans-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/shared/fonts/ibm-plex-sans-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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/shared/fonts/ibm-plex-sans-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, 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: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/shared/fonts/ibm-plex-sans-600-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;
}

:root {
  --lg-display: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --lg-ui: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --lg-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Radien und Tiefe – einheitlich über alle Anwendungen */
  --lg-r-sm: 7px;
  --lg-r: 10px;
  --lg-r-lg: 14px;
  --lg-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 6px 20px rgba(0, 0, 0, .07);

  /* Akzent der Gruppe */
  --lg-gold: #d4af37;
  --lg-gold-bright: #f0cf5e;
  --lg-focus: color-mix(in srgb, var(--lg-gold) 55%, transparent);
}

/* ---------- Schrift ---------------------------------------- */

body {
  font-family: var(--lg-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -.003em;
}

h1, h2, h3, h4, .h1, .h2, .h3 {
  font-family: var(--lg-display);
  letter-spacing: -.018em;
  text-wrap: balance;
}

code, pre, kbd, samp, .mono {
  font-family: var(--lg-mono);
  font-size: .92em;
}

/* Zahlen in Tabellen und Kennzahlen sauber untereinander */
td, th, .num, .kpi, .value, [class*="amount"], [class*="betrag"], [class*="count"] {
  font-variant-numeric: tabular-nums;
}

/* ---------- Fokus: überall sichtbar, überall gleich --------- */

:focus-visible {
  outline: 2px solid var(--lg-gold);
  outline-offset: 2px;
  border-radius: var(--lg-r-sm);
}
:focus:not(:focus-visible) { outline: none; }

/* ---------- Formularfelder --------------------------------- */

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], input[type="tel"],
input[type="url"], input[type="date"], input[type="datetime-local"],
input[type="time"], input[type="month"], select, textarea {
  font-family: inherit;
  font-size: 15px;
  border-radius: var(--lg-r-sm);
  padding: 9px 12px;
  max-width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
}

input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 3px var(--lg-focus);
}

textarea { line-height: 1.55; resize: vertical; }

input::placeholder, textarea::placeholder { opacity: .55; }

input[type="checkbox"], input[type="radio"] {
  accent-color: var(--lg-gold);
  width: 17px;
  height: 17px;
}

label { cursor: pointer; }

/* ---------- Schaltflächen ----------------------------------- */

button, .btn, [role="button"], input[type="submit"], input[type="button"] {
  font-family: inherit;
  font-weight: 600;
  border-radius: var(--lg-r-sm);
  cursor: pointer;
  transition: transform .06s ease, filter .15s ease, box-shadow .15s ease;
}

button:hover, .btn:hover, input[type="submit"]:hover { filter: brightness(1.07); }
button:active, .btn:active, input[type="submit"]:active { transform: translateY(1px); }
button:disabled, .btn:disabled, input:disabled {
  opacity: .5;
  cursor: not-allowed;
  filter: none;
  transform: none;
}

/* ---------- Tabellen ---------------------------------------- */

table { border-collapse: collapse; }

th {
  font-family: var(--lg-ui);
  font-weight: 600;
  letter-spacing: .02em;
}

/* Zeile unter dem Zeiger hervorheben – hilft beim Lesen breiter Tabellen */
tbody tr { transition: background-color .12s ease; }
tbody tr:hover { background-color: color-mix(in srgb, var(--lg-gold) 7%, transparent); }

/* ---------- Karten und Flächen ------------------------------ */

.card, .panel, .box, .subjcard, .tile {
  border-radius: var(--lg-r);
}

/* ---------- Verlaufsleisten und Marker ---------------------- */

.pill, .badge, .chip, .tag {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: .01em;
}

progress { accent-color: var(--lg-gold); }

/* ---------- Bildlaufleisten --------------------------------- */

* { scrollbar-width: thin; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, currentColor 22%, transparent);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, currentColor 38%, transparent);
  background-clip: content-box;
}

::selection {
  background: color-mix(in srgb, var(--lg-gold) 32%, transparent);
}

/* ---------- Bedienung auf dem Handy ------------------------- */

@media (max-width: 720px) {
  /* Fingerfreundliche Trefferflächen */
  button, .btn, [role="button"], input[type="submit"], select {
    min-height: 42px;
  }
  input, select, textarea { font-size: 16px; }  /* verhindert Zoom in iOS */

  /* Breite Tabellen dürfen für sich scrollen, statt die Seite zu sprengen */
  table { display: block; overflow-x: auto; white-space: nowrap; }
  th, td { white-space: nowrap; }
}

/* ---------- Rücksicht auf Systemeinstellungen --------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Drucken ----------------------------------------- */

@media print {
  nav, aside, .sidebar, button, .btn { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
}

/* ============================================================
   Gemeinsamer Akzent über alle Anwendungen
   ------------------------------------------------------------
   Gold ist die Handschrift der Gruppe. Auf dunklem Grund das helle
   Gold, auf hellem Grund ein dunkleres Bronzegold – sonst wäre der
   Kontrast zu schwach zum Lesen (geprüft: 4,9:1 auf Weiß).
   Jede App benutzt ihre eigenen Variablennamen, deshalb werden hier
   genau die überschrieben.
   ============================================================ */

:root {
  --lg-gold-ink: #8a6d1f;   /* Akzent auf hellem Grund */
  --lg-gold-wash: #f6efdc;  /* zarte Fläche dazu */
}

/* --- Legacy Sports Management CRM (heller Grund) --- */
:root {
  --sf-blue: var(--lg-gold-ink);
  --sf-blue-dark: #6d5515;
  --sf-blue-light: var(--lg-gold-wash);
  --text-link: var(--lg-gold-ink);
}

/* --- HR-Plattform (heller Grund) --- */
:root {
  --brand: var(--lg-gold-ink);
  --brand-2: #a8862c;
}

/* Die Seitenleiste der HR-Plattform bleibt dunkel – dort das helle Gold */
.sidebar nav a.active { background: var(--lg-gold-ink); }
.brand span { color: var(--lg-gold-bright); }
.rolechip { background: var(--lg-gold-ink); }

/* --- Gym-Suite (dunkler Grund) – Gold schärfen --- */
:root {
  --gold: #d9b64a;
  --gold2: #f2d572;
  --goldsoft: rgba(217, 182, 74, .13);
}