/* ==========================================================
   UnternehmerCOPILOT – zentrales Website-Designsystem
   ========================================================== */

:root {
  /* Markenfarben */
  --uc-black: #111111;
  --uc-white: #ffffff;
  --uc-light: #f3f4f6;
  --uc-yellow: #FFD700;

  /* Textfarben */
  --uc-text-dark: #111111;
  --uc-text-light: #ffffff;
  --uc-text-muted-dark: #5f6368;
  --uc-text-muted-light: #cbd5e1;

  /* Flächen / Karten */
  --uc-card-light: #ffffff;
  --uc-card-dark: #1f2937;
  --uc-border-light: #e5e7eb;
  --uc-border-dark: rgba(255,255,255,.15);
}



/* ==========================================================
   UNTERNEHMERCOPILOT DESIGN SYSTEM
   Schwarz → Grau → Gelb
   ========================================================== */

/* ---------- SECTIONS ---------- */

.uc-section-dark {
  background: var(--uc-black) !important;
  color: #cbd5e1 !important;
}

.uc-section-dark h1,
.uc-section-dark h2,
.uc-section-dark h3,
.uc-section-dark h4,
.uc-section-dark h5,
.uc-section-dark h6,
.uc-section-dark strong {
  color: #ffffff !important;
}

.uc-section-dark p,
.uc-section-dark li,
.uc-section-dark blockquote {
  color: #94a3b8 !important;
}

.uc-section-dark .text-primary,
.uc-section-dark .text-primary-container,
.uc-section-dark .uc-accent {
  color: var(--uc-yellow) !important;
}


/* GRAU */

.uc-section-light {
  background: var(--uc-light) !important;
  color: #4b5563 !important;
}

.uc-section-light h1,
.uc-section-light h2,
.uc-section-light h3,
.uc-section-light h4,
.uc-section-light h5,
.uc-section-light h6,
.uc-section-light strong {
  color: #111111 !important;
}

.uc-section-light p,
.uc-section-light li,
.uc-section-light blockquote {
  color: #4b5563 !important;
}

.uc-section-light .text-primary,
.uc-section-light .text-primary-container,
.uc-section-light .uc-accent {
  color: #8a7200 !important;
}


/* GELB */

.uc-section-gold {
  background: var(--uc-yellow) !important;
  color: #111111 !important;
}

.uc-section-gold h1,
.uc-section-gold h2,
.uc-section-gold h3,
.uc-section-gold h4,
.uc-section-gold h5,
.uc-section-gold h6,
.uc-section-gold p,
.uc-section-gold li,
.uc-section-gold blockquote,
.uc-section-gold strong {
  color: #111111 !important;
}


/* ---------- KARTEN ---------- */
/* Karte überschreibt immer die Section */

.uc-card-light {
  background: #ffffff !important;
  color: #4b5563 !important;
}

.uc-card-light h1,
.uc-card-light h2,
.uc-card-light h3,
.uc-card-light h4,
.uc-card-light h5,
.uc-card-light h6,
.uc-card-light strong,
.uc-card-light .font-bold {
  color: #111111 !important;
}

.uc-card-light p,
.uc-card-light li,
.uc-card-light span,
.uc-card-light blockquote {
  color: #4b5563 !important;
}


/* DUNKLE KARTE */

.uc-card-dark {
  background: #111827 !important;
  color: #cbd5e1 !important;
}

.uc-card-dark h1,
.uc-card-dark h2,
.uc-card-dark h3,
.uc-card-dark h4,
.uc-card-dark h5,
.uc-card-dark h6,
.uc-card-dark strong,
.uc-card-dark b,
.uc-card-dark .font-bold {
  color: #ffffff !important;
}

.uc-card-dark p,
.uc-card-dark li,
.uc-card-dark span,
.uc-card-dark blockquote {
  color: #cbd5e1 !important;
}

.uc-card-dark .text-primary,
.uc-card-dark .text-primary-container,
.uc-card-dark .uc-accent {
  color: var(--uc-yellow) !important;
}


/* GELBE KARTE */

.uc-card-gold {
  background: var(--uc-yellow) !important;
  color: #111111 !important;
}

.uc-card-gold h1,
.uc-card-gold h2,
.uc-card-gold h3,
.uc-card-gold h4,
.uc-card-gold h5,
.uc-card-gold h6,
.uc-card-gold p,
.uc-card-gold li,
.uc-card-gold span,
.uc-card-gold blockquote,
.uc-card-gold strong,
.uc-card-gold b,
.uc-card-gold .font-bold {
  color: #111111 !important;
}


/* ---------- KOMPATIBILITÄT ----------
   Bestehende HTML-Karten, bis alle semantische uc-card-Klassen haben
   ------------------------------------ */

.uc-section-light .bg-gray-950,
.uc-section-light .bg-slate-950,
.uc-section-gold .bg-gray-950,
.uc-section-gold .bg-slate-950 {
  background: #111827 !important;
  color: #cbd5e1 !important;
}

.uc-section-light .bg-gray-950 *,
.uc-section-light .bg-slate-950 *,
.uc-section-gold .bg-gray-950 *,
.uc-section-gold .bg-slate-950 * {
  color: #cbd5e1 !important;
}

.uc-section-light .bg-gray-950 .font-bold,
.uc-section-light .bg-slate-950 .font-bold,
.uc-section-gold .bg-gray-950 .font-bold,
.uc-section-gold .bg-slate-950 .font-bold {
  color: #ffffff !important;
}


/* ==========================================================
   UnternehmerCOPILOT – lokale Material Symbols
   ========================================================== */

@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 100 700;
  src: url('/fonts/material-symbols/MaterialSymbolsOutlined.woff2') format('woff2');
}

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'liga';
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
}


/* ==========================================================
   Schwarze Kacheln – Text konsequent weiß
   ========================================================== */

.bg-slate-950,
.bg-slate-950 h1,
.bg-slate-950 h2,
.bg-slate-950 h3,
.bg-slate-950 h4,
.bg-slate-950 h5,
.bg-slate-950 h6,
.bg-slate-950 p,
.bg-slate-950 li,
.bg-slate-950 span {
  color: #ffffff !important;
}

/* Markenakzente in schwarzen Kacheln bleiben gelb */
.bg-slate-950 .text-primary,
.bg-slate-950 .text-primary-container,
.bg-slate-950 .uc-accent {
  color: var(--uc-yellow) !important;
}

/* Karten-Hauptaussagen */
.uc-card-dark .uc-card-title {
  color: #ffffff !important;
}

/* Material Symbols – Größenklassen */
.material-symbols-outlined.text-2xl { font-size: 1.5rem !important; }
.material-symbols-outlined.text-3xl { font-size: 1.875rem !important; }
.material-symbols-outlined.text-4xl { font-size: 2.25rem !important; }
.material-symbols-outlined.text-5xl { font-size: 3rem !important; }
.material-symbols-outlined.text-6xl { font-size: 3.75rem !important; }