/* ============================================
   GLOBAL THEME STYLES - LIGHT & DARK MODE
   barista-dresden.de
   Einmal in header.php einbinden
   ============================================ */

/* ========== LIGHT MODE (Default) ========== */
:root,
[data-theme="light"],
[data-theme="light"] .bk-page,
[data-theme="light"] .tc-section,
[data-theme="light"] .tc-freunde,
[data-theme="light"] .bk-team {
  --bg-1: #ffffff;
  --bg-2: #faf8f5;
  --bg-3: #f3efe9;
  --bg-4: #ebe6de;
  --bg-card: #ffffff;
  --text-primary: #1a1a1a;
  --text-secondary: #4d4640;
  --text-muted: #918980;
  --border: rgba(0,0,0,0.07);
  --border-strong: rgba(0,0,0,0.12);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 24px rgba(0,0,0,0.06);
  --shadow-lg: 0 12px 48px rgba(0,0,0,0.08);
  --shadow-hover: 0 16px 56px rgba(0,0,0,0.12);
  --accent: #FF6B35;
  --accent-hover: #e85a25;
  --accent-soft: rgba(255,107,53,0.08);
  --accent-glow: rgba(255,107,53,0.25);
  --gold-light: #d4b65c;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ========== DARK MODE ========== */
[data-theme="dark"],
[data-theme="dark"] .bk-page,
[data-theme="dark"] .tc-section,
[data-theme="dark"] .tc-freunde,
[data-theme="dark"] .bk-team {
  --bg-1: #121212;
  --bg-2: #1a1a1a;
  --bg-3: #222222;
  --bg-4: #2a2a2a;
  --bg-card: #1e1e1e;
  --text-primary: #f5f5f5;
  --text-secondary: #b0b0b0;
  --text-muted: #888888;
  --border: rgba(255,255,255,0.08);
  --border-strong: rgba(255,255,255,0.15);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 24px rgba(0,0,0,0.3);
  --shadow-lg: 0 12px 48px rgba(0,0,0,0.4);
  --shadow-hover: 0 16px 56px rgba(0,0,0,0.5);
}

/* ========== SYSTEM PREFERENCE FALLBACK ========== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]),
  :root:not([data-theme="light"]) .bk-page,
  :root:not([data-theme="light"]) .tc-section,
  :root:not([data-theme="light"]) .tc-freunde,
  :root:not([data-theme="light"]) .bk-team {
    --bg-1: #121212;
    --bg-2: #1a1a1a;
    --bg-3: #222222;
    --bg-4: #2a2a2a;
    --bg-card: #1e1e1e;
    --text-primary: #f5f5f5;
    --text-secondary: #b0b0b0;
    --text-muted: #888888;
    --border: rgba(255,255,255,0.08);
    --border-strong: rgba(255,255,255,0.15);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.2);
    --shadow-md: 0 4px 24px rgba(0,0,0,0.3);
    --shadow-lg: 0 12px 48px rgba(0,0,0,0.4);
    --shadow-hover: 0 16px 56px rgba(0,0,0,0.5);
  }
}

/* ========== BODY & TRANSITIONS ========== */
body {
  background: var(--bg-1) !important;
  color: var(--text-primary) !important;
  font-family: var(--font-body);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ========== SECTION BACKGROUNDS ========== */
section,
.bk-section {
  background-color: var(--bg-1) !important;
}

.bk-intro,
.bk-timeline,
.bk-audience,
.bk-faq,
.tc-freunde {
  background-color: var(--bg-1) !important;
}

/* Light Mode Overrides */
[data-theme="light"] section,
[data-theme="light"] .bk-section {
  background-color: var(--bg-1);
}

[data-theme="light"] .bk-intro,
[data-theme="light"] .bk-timeline,
[data-theme="light"] .bk-audience,
[data-theme="light"] .bk-faq,
[data-theme="light"] .tc-freunde {
  background-color: var(--bg-2);
}

/* ========== CARDS ========== */
.bk-card,
.bk-timeline-card,
.bk-audience-card,
.bk-faq-item,
.tc-freunde-card,
.bk-team-card {
  background: var(--bg-card) !important;
  border-color: var(--border) !important;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* ========== TEXT ========== */
.bk-h2,
.bk-learn-item h3,
.bk-timeline-card h3,
.tc-freunde-name,
.bk-team-card-name,
.tc-freunde-title,
.bk-team-title {
  color: var(--text-primary) !important;
  transition: color 0.3s ease;
}

.bk-text,
.bk-learn-item p,
.bk-timeline-card p,
.tc-freunde-desc,
.bk-team-card-bio,
.tc-freunde-sub,
.bk-team-intro {
  color: var(--text-secondary) !important;
  transition: color 0.3s ease;
}

.bk-label,
.tc-freunde-tag,
.tc-freunde-badge,
.bk-team-label {
  color: var(--accent) !important;
}

/* ========== BUTTONS ========== */
.bk-btn-ghost {
  color: var(--text-primary);
  border-color: var(--border-strong);
  transition: all 0.3s ease;
}

.bk-btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ========== LEARN SECTION ========== */
.bk-learn {
  background: var(--bg-1);
}

.bk-learn-item {
  border-bottom-color: var(--border);
}

.bk-learn-item-number {
  background: linear-gradient(180deg, var(--bg-3), var(--bg-1));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bk-learn-item:hover .bk-learn-item-number {
  background: linear-gradient(180deg, var(--accent), rgba(255,107,53,0.2));
  -webkit-background-clip: text;
  background-clip: text;
}

/* ========== TIMELINE ========== */
.bk-timeline-dot {
  background: var(--bg-1);
  border-color: rgba(255,107,53,0.25);
  box-shadow: var(--shadow-sm);
  transition: all 0.3s ease;
}

.bk-timeline-item:hover .bk-timeline-dot {
  background: var(--accent);
  color: #fff;
}

.bk-timeline-card {
  box-shadow: var(--shadow-sm);
}

.bk-timeline-card:hover {
  box-shadow: var(--shadow-hover);
  border-color: rgba(255,107,53,0.2);
}

/* ========== FREUNDE SECTION ========== */
.tc-freunde-img {
  background: #ffffff !important; /* Logo-Box IMMER weiss */
}

.tc-freunde-card:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--accent);
}

/* ========== TEAM SECTION ========== */
.bk-team {
  background: var(--bg-1);
}

.bk-team-card {
  background: var(--bg-2);
}

.bk-team-expertise {
  background: var(--bg-1);
}

.bk-team-card-role {
  color: var(--text-primary);
}

.bk-team-expertise-title {
  color: var(--text-primary);
}

.bk-team-expertise li {
  color: var(--text-secondary);
  border-bottom-color: var(--border);
}

.bk-team-contact a {
  color: var(--text-secondary);
}

.bk-team-contact a:hover {
  color: var(--accent);
}

.bk-team-badges {
  border-top-color: var(--border);
}

/* ========== FAQ SECTION ========== */
.bk-faq-item {
  border-color: var(--border);
}

.bk-faq-q {
  color: var(--text-primary);
}

.bk-faq-a {
  color: var(--text-secondary);
}

/* ========== CTA SECTIONS ========== */
.tc-freunde-cta {
  background: linear-gradient(135deg, rgba(255,107,53,0.08), rgba(255,107,53,0.03));
  border-color: rgba(255,107,53,0.15);
}

[data-theme="dark"] .tc-freunde-cta {
  background: linear-gradient(135deg, rgba(255,107,53,0.12), rgba(255,107,53,0.05));
}

.tc-freunde-cta-title {
  color: var(--text-primary);
}

.tc-freunde-cta-text {
  color: var(--text-muted);
}

/* ========== INPUTS & FORMS ========== */
input,
textarea,
select {
  background: var(--bg-card);
  border-color: var(--border);
  color: var(--text-primary);
  transition: all 0.3s ease;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--accent);
}

input::placeholder,
textarea::placeholder {
  color: var(--text-muted);
}

/* ========== DIVIDERS & BORDERS ========== */
hr,
.divider {
  border-color: var(--border);
}

/* ========== SCROLLBAR (Dark Mode) ========== */
[data-theme="dark"] ::-webkit-scrollbar {
  width: 10px;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--bg-2);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--bg-4);
  border-radius: 5px;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--accent);
}

/* ========== SELECTION ========== */
::selection {
  background: rgba(255,107,53,0.2);
  color: inherit;
}

[data-theme="dark"] ::selection {
  background: rgba(255,107,53,0.3);
}

/* ========== FORCE OVERRIDES (für inline styles) ========== */
/* Diese Regeln überschreiben hardcoded Farben in den Content-Dateien */

.tc-freunde-title,
.tc-freunde h2 {
  color: var(--text-primary) !important;
}

.tc-freunde-intro,
.tc-freunde-subtitle {
  color: var(--text-secondary) !important;
}

/* Partner Cards - alle Texte */
.tc-freunde-card h3,
.tc-freunde-card p,
.tc-freunde-card span {
  transition: color 0.3s ease;
}

.tc-freunde-card h3 {
  color: var(--text-primary) !important;
}

.tc-freunde-card p {
  color: var(--text-secondary) !important;
}

/* CTA Box */
.tc-freunde-cta h3,
.tc-freunde-cta-title {
  color: var(--text-primary) !important;
}

.tc-freunde-cta p {
  color: var(--text-muted) !important;
}

/* Generische Overrides für alle Seiten */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
  transition: color 0.3s ease;
}

p, span, li {
  transition: color 0.3s ease;
}

/* ========== FAQ GLASSMORPHISM - DARK MODE FIX ========== */
/* Überschreibt hardcoded rgba(255,255,255,0.7) in allen HTML-Dateien */
/* MAXIMALE Spezifität um Inline-Styles zu überschreiben */

[data-theme="dark"] .bk-faq,
[data-theme="dark"] .bk-page .bk-faq,
[data-theme="dark"] section.bk-faq,
[data-theme="dark"] #bk-reparatur .bk-faq {
  background: #121212 !important;
}

[data-theme="dark"] .bk-faq::before,
[data-theme="dark"] .bk-page .bk-faq::before {
  background: radial-gradient(ellipse, rgba(255,107,53,0.06) 0%, transparent 60%) !important;
}

[data-theme="dark"] .bk-faq-list,
[data-theme="dark"] .bk-page .bk-faq-list,
[data-theme="dark"] .bk-faq .bk-faq-list,
[data-theme="dark"] section .bk-faq-list,
[data-theme="dark"] div.bk-faq-list,
[data-theme="dark"] .bk-faq-inner,
[data-theme="dark"] .bk-page .bk-faq-inner,
[data-theme="dark"] .bk-faq .bk-faq-inner {
  background: #1e1e1e !important;
  background-color: #1e1e1e !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.3) !important;
  border-radius: 24px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  position: relative !important;
  z-index: 2 !important;
}

[data-theme="dark"] .bk-faq-item,
[data-theme="dark"] .bk-faq-list .bk-faq-item {
  border-bottom-color: rgba(255,255,255,0.08) !important;
}

[data-theme="dark"] .bk-faq-q,
[data-theme="dark"] .bk-faq-item .bk-faq-q,
[data-theme="dark"] button.bk-faq-q {
  color: #fff !important;
}

[data-theme="dark"] .bk-faq-a p,
[data-theme="dark"] .bk-faq-item .bk-faq-a p {
  color: rgba(255,255,255,0.7) !important;
}

/* FAQ Toggle Button - Orange when active */
[data-theme="dark"] .bk-faq-toggle,
[data-theme="dark"] .bk-faq-item .bk-faq-toggle,
[data-theme="dark"] .bk-faq-icon,
[data-theme="dark"] .bk-faq-item .bk-faq-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  transition: all 0.3s ease !important;
}

[data-theme="dark"] .bk-faq-q:hover .bk-faq-toggle,
[data-theme="dark"] .bk-faq-q[aria-expanded="true"] .bk-faq-toggle,
[data-theme="dark"] .bk-faq-q:hover .bk-faq-icon,
[data-theme="dark"] .bk-faq-q.active .bk-faq-icon {
  background: #FF6B35 !important;
  border-color: #FF6B35 !important;
}

/* System preference fallback - MAXIMALE Spezifität */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .bk-faq,
  :root:not([data-theme="light"]) .bk-page .bk-faq,
  :root:not([data-theme="light"]) section.bk-faq {
    background: #121212 !important;
  }

  :root:not([data-theme="light"]) .bk-faq-list,
  :root:not([data-theme="light"]) .bk-page .bk-faq-list,
  :root:not([data-theme="light"]) .bk-faq .bk-faq-list,
  :root:not([data-theme="light"]) section .bk-faq-list,
  :root:not([data-theme="light"]) div.bk-faq-list,
  :root:not([data-theme="light"]) .bk-faq-inner,
  :root:not([data-theme="light"]) .bk-page .bk-faq-inner,
  :root:not([data-theme="light"]) .bk-faq .bk-faq-inner {
    background: #1e1e1e !important;
    background-color: #1e1e1e !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.3) !important;
    border-radius: 24px !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    position: relative !important;
    z-index: 2 !important;
  }

  :root:not([data-theme="light"]) .bk-faq-item,
  :root:not([data-theme="light"]) .bk-faq-list .bk-faq-item {
    border-bottom-color: rgba(255,255,255,0.08) !important;
  }

  :root:not([data-theme="light"]) .bk-faq-q,
  :root:not([data-theme="light"]) .bk-faq-item .bk-faq-q,
  :root:not([data-theme="light"]) button.bk-faq-q {
    color: #fff !important;
  }

  :root:not([data-theme="light"]) .bk-faq-a p,
  :root:not([data-theme="light"]) .bk-faq-item .bk-faq-a p {
    color: rgba(255,255,255,0.7) !important;
  }

  /* FAQ Toggle Button - Orange when active */
  :root:not([data-theme="light"]) .bk-faq-toggle,
  :root:not([data-theme="light"]) .bk-faq-item .bk-faq-toggle,
  :root:not([data-theme="light"]) .bk-faq-icon,
  :root:not([data-theme="light"]) .bk-faq-item .bk-faq-icon {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    transition: all 0.3s ease !important;
  }

  :root:not([data-theme="light"]) .bk-faq-q:hover .bk-faq-toggle,
  :root:not([data-theme="light"]) .bk-faq-q[aria-expanded="true"] .bk-faq-toggle,
  :root:not([data-theme="light"]) .bk-faq-q:hover .bk-faq-icon,
  :root:not([data-theme="light"]) .bk-faq-q.active .bk-faq-icon {
    background: #FF6B35 !important;
    border-color: #FF6B35 !important;
  }
}