/* =========================================
   1. Theme Variables & Base
   ========================================= */
:root {
  --indigo: #6366f1;
  --blue:   #0b6bfb;
  --green:  #16b981;
  --violet: #6366f1;
  --amber:  #eab308;
  --slate:  #334155;
  --orange: #ea580c;
  --red:    #dc2626;

  /* Standard (Light Mode) */
  --bg-card: #fff;
  --bg-body: #fdf8fa; /* Fallback für Body wenn nötig */
  --shadow-sm: 0 .125rem .5rem rgba(0,0,0,.06);
  --shadow-lg: 0 .5rem 1rem rgba(0,0,0,.08);
  
  --brand: #e50059;
  --brand-dark: #b00042;
  --accent-bg: #ffe4ef;
  --radius: 1rem;
}

/* =========================================
   2. Frame & Layout
   ========================================= */
.frame-gradient {
  position: relative;
  border-radius: 1rem;
  background: var(--bg-card);
  box-shadow: var(--shadow-sm);
  padding: 1.25rem;
  transition: background-color 0.3s, box-shadow 0.3s;
}
@media (min-width: 768px) {
  .frame-gradient { padding: 2rem; }
}

/* =========================================
   3. Service Cards (Unified)
   ========================================= */
.card.service {
  display: flex;
  flex-direction: column;
  position: relative;
  height: 100%;
  
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: saturate(140%) blur(6px);
  border: 1px solid rgba(229, 0, 89, 0.1);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  
  transition: transform .15s ease, 
              box-shadow .15s ease, 
              background-color .15s ease, 
              border-color .15s ease;
  
  min-height: clamp(240px, 28vh, 300px);
}

@media (min-width: 768px) { .card.service { min-height: clamp(260px, 26vh, 320px); } }
@media (min-width: 992px) { .card.service { min-height: clamp(280px, 24vh, 340px); } }

/* Hover Effects */
.card-hover:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
  border-color: var(--brand);
}

/* Muted / Inactive State */
.card.muted { opacity: .75; }
.card.muted .btn { pointer-events: none; }

/* Topbar Status Line */
.card-topbar {
  height: 4px;
  border-top-left-radius: .75rem;
  border-top-right-radius: .75rem;
  background: transparent; /* Default unsichtbar */
}
.card-topbar.soon { background: var(--indigo); }
.card-topbar.inactive { background: #9ca3af; }

/* Text Content */
.service-desc {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
}

/* =========================================
   4. Card Color Variants (Light Mode)
   ========================================= */
.card.service.card-variant-0 { background: rgba(11,107,251,.04); border-color: rgba(11,107,251,.15); }
.card.service.card-variant-1 { background: rgba(16,185,129,.05); border-color: rgba(16,185,129,.18); }
.card.service.card-variant-2 { background: rgba(99,102,241,.05); border-color: rgba(99,102,241,.18); }
.card.service.card-variant-3 { background: rgba(234,179,8,.05);  border-color: rgba(234,179,8,.18); }

/* Hover Overrides for Variants */
.card-variant-0.card-hover:hover { background: rgba(11,107,251,.06); border-color: rgba(11,107,251,.28); }
.card-variant-1.card-hover:hover { background: rgba(16,185,129,.07); border-color: rgba(16,185,129,.30); }
.card-variant-2.card-hover:hover { background: rgba(99,102,241,.07); border-color: rgba(99,102,241,.30); }
.card-variant-3.card-hover:hover { background: rgba(234,179,8,.07);  border-color: rgba(234,179,8,.30); }

/* =========================================
   5. Components (Ribbons, Chips, Notices)
   ========================================= */

/* Ribbons */
.ribbon {
  --ribbon-bg: var(--indigo);
  --ribbon-fg: #fff;
  position: absolute;
  z-index: 2;
  top: .6rem;
  right: .6rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem .6rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ribbon-fg);
  background: var(--ribbon-bg);
  border-radius: .5rem;
  box-shadow: 0 6px 14px rgba(0,0,0,.15);
  pointer-events: none;
}
.ribbon .bi { font-size: 1rem; opacity: .95; }

/* Ribbon Diagonal Modifier */
.ribbon--diag {
  top: 12px; right: -42px;
  transform: rotate(45deg);
  padding: .35rem 2.1rem;
  font-size: .75rem;
  letter-spacing: .3px;
  text-transform: uppercase;
  border-radius: 0;
}
@media (min-width: 576px) { .ribbon { top:.75rem; right:.75rem; } .ribbon--diag { top:14px; right:-46px; } }
@media (min-width: 768px) { .ribbon { top:.9rem; right:.9rem; }   .ribbon--diag { top:16px; right:-50px; } }

/* Ribbon Colors */
.ribbon--indigo { --ribbon-bg: var(--indigo); }
.ribbon--slate  { --ribbon-bg: var(--slate); }
.ribbon--green  { --ribbon-bg: var(--green); }
.ribbon--orange { --ribbon-bg: var(--orange); }
.ribbon--red    { --ribbon-bg: var(--red); }

/* Chips */
.chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .85rem;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  padding: .25rem .6rem;
  color: #374151;
}

/* Spezifische Chip-Styles (Preis/Zeit) */
.chip.price-chip, 
.chip.time-chip {
  background: var(--accent-bg);
  border: 1px solid rgba(229, 0, 89, 0.3);
  color: var(--brand-dark);
  font-weight: 500;
}

/* Wish Technician Notice */
.wish-tech-notice {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  border-radius: 8px;
  background: #f8fafc; 
  border: 1px solid #d1d5db;
  margin-bottom: 1.5rem;
}
.wish-tech-icon { color: var(--brand); font-size: 1.4rem; flex-shrink: 0; }
.wish-tech-content { line-height: 1.4; color: #374151; }
.wish-tech-name { color: var(--brand); font-weight: 700; }

/* =========================================
   6. Dark Mode (Consolidated)
   ========================================= */

/* =========================================
   6. Dark Mode (Consolidated & Fixed)
   ========================================= */

/* System Dark Mode */
@media (prefers-color-scheme: dark) {
  .frame-gradient,
  .card.service {
    color: #e5e7eb;
  }

  .text-muted,
  .text-muted.small,
  .text-dark-50 {
    color: #9ca3af !important;
  }

  .frame-gradient {
    background-color: #020617;
    border: 1px solid rgba(148, 163, 184, 0.40);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.70);
  }

  .card.service {
    background: rgba(15, 23, 42, 0.98) !important;
    border-color: rgba(148, 163, 184, 0.55) !important;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.70);
  }

  .alert-info, .alert-warning {
    background-color: #020617;
    border-color: rgba(148, 163, 184, 0.7);
    color: #e5e7eb;
  }
  .alert-info a, .alert-warning a { color: inherit; text-decoration: underline; }
}

/* Manual Dark Mode via html[data-theme="dark"] */
html[data-theme="dark"] .frame-gradient,
html[data-theme="dark"] .card.service {
  color: #e5e7eb;
}

html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-muted.small,
html[data-theme="dark"] .text-dark-50 {
  color: #9ca3af !important;
}

html[data-theme="dark"] .frame-gradient {
  background-color: #020617;
  border: 1px solid rgba(148, 163, 184, 0.40);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.70);
}

html[data-theme="dark"] .card.service {
  background: rgba(15, 23, 42, 0.98) !important;
  border-color: rgba(148, 163, 184, 0.55) !important;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.70);
}

html[data-theme="dark"] .alert-info,
html[data-theme="dark"] .alert-warning {
  background-color: #020617;
  border-color: rgba(148, 163, 184, 0.7);
  color: #e5e7eb;
}
html[data-theme="dark"] .alert-info a,
html[data-theme="dark"] .alert-warning a { color: inherit; text-decoration: underline; }


/* =========================================
   7. Accessibility (High Contrast)
   ========================================= */
@media (prefers-contrast: more) {
  .card.service, .chip { border: 2px solid currentColor; }
}