/* ═══════════════════════════════════════════════
   ImageSign — Base
   Imagemedia Design System
   Schwarz/Weiss · Poppins · Typografie als Designelement
   ═══════════════════════════════════════════════ */



*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Farben — keine Buntfarben, nur Schwarz/Weiss + funktionale Grautöne */
  --black:      #0A0A0A;
  --white:      #FFFFFF;
  --g-text:     #333333;  /* Fliesstext sekundär */
  --g-mid:      #555555;  /* Beschreibungen */
  --g-label:    #888888;  /* Labels, Spaltentitel */
  --g-line:     #E6E6E6;  /* Trennlinien */
  --g-line-lt:  #ECECEC;  /* Tabellen-Zeilentrenner */
  --g-bg:       #F9F9F9;  /* Flächenhintergrund */

  /* Status — rein funktional, kein Designelement */
  --status-on:  #16A34A;
  --status-off: #DC2626;

  /* Vertikaler Rhythmus — Vielfache von 4 */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px;

  --nav-h: 56px;
}

html {
  font-family: 'Poppins', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--g-bg);
  color: var(--black);
  font-weight: 300;        /* Light als Standard-Fliesstext */
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
}

/* ─── Typografie-Skala ─── */

/* Headline-Mix: ein Wort ExtraLight, Rest Bold — spiegelt das Logo */
.headline {
  font-size: 35px;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1.05;
}
.headline em { font-weight: 200; font-style: normal; }

.title {
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -.5px;
  line-height: 1.1;
}
.title em { font-weight: 200; font-style: normal; }

.subtitle {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -.3px;
}

/* Kicker-Label — UPPERCASE mit weiter Laufweite */
.kicker {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--g-label);
}

.label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--g-label);
  margin-bottom: var(--s2);
}

.text      { font-size: 15px; font-weight: 300; color: var(--g-mid); line-height: 1.6; }
.text-sm   { font-size: 14px; font-weight: 300; color: var(--g-mid); }
.meta      { font-size: 13px; font-weight: 300; color: var(--g-label); }

/* Kennzahl — gross, Bold/ExtraLight */
.figure {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -1px;
  line-height: 1;
}
.figure em { font-weight: 200; font-style: normal; }

/* ─── Trennlinie — 1px schwarz ─── */
.rule { border: none; border-top: 1px solid var(--black); }
.rule-light { border: none; border-top: 1px solid var(--g-line); }

/* ─── Akzentfläche — invertiert ─── */
.accent {
  background: var(--black);
  color: var(--white);
  padding: var(--s6);
}
.accent .label { color: rgba(255,255,255,.55); }
.accent .text  { color: rgba(255,255,255,.8); }

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 3px; height: 3px; }
::-webkit-scrollbar-track { background: var(--g-line-lt); }
::-webkit-scrollbar-thumb { background: var(--g-label); }
::-webkit-scrollbar-thumb:hover { background: var(--black); }

/* ─── Utilities ─── */
.hidden { display: none !important; }
.flex   { display: flex; }
.center { display: flex; align-items: center; justify-content: center; }
.row    { display: flex; align-items: center; }
.gap-1  { gap: var(--s1); } .gap-2 { gap: var(--s2); }
.gap-3  { gap: var(--s3); } .gap-4 { gap: var(--s4); }
.grow   { flex: 1; min-width: 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes slideUp { from { transform: translateY(8px); opacity: 0 } to { transform: none; opacity: 1 } }