/* ═══════════════════════════════════════════════════════════════
   DeineFenster — Global Design System
   Gilt für ALLE Seiten. Stand 14.05.2026.
   Additiv: überschreibt nur Inkonsistenzen, kein Layout-Eingriff.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Body-Basis ── */
body {
  background: #0a1225 !important;
  color: #e8eeff;
  -webkit-font-smoothing: antialiased;
}

/* ── 2. Grain Texture (subtile Körnung) ── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.028;
  background-size: 200px;
}

/* ── 3. Scrollbar ── */
::-webkit-scrollbar { width: 3px; }
::-webkit-scrollbar-track { background: #060d1a; }
::-webkit-scrollbar-thumb { background: rgba(34,94,170,0.5); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: rgba(118,169,250,0.6); }
::selection { background: rgba(34,94,170,0.4); color: #e8eeff; }

/* ── 4. Typografie ── */
h1, h2, h3, h4 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -0.025em;
}
h1 { letter-spacing: -0.03em; }

/* ── 5. Section-Trennlinie (subtile blaue Linie oben) ── */
section { position: relative; }
section::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 60%; max-width: 700px; height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(118,169,250,0.15) 50%, transparent 100%);
  pointer-events: none; z-index: 1;
}
section:first-of-type::before { display: none; }

/* ── 6. Answer-Box — KEIN Seitenstreifen ── */
/* Ersetzt border-left durch vollständige Border */
.answer-box {
  border-left: none !important;
  border: 1px solid rgba(118,169,250,0.22) !important;
  border-radius: 12px !important;
  background: rgba(34,94,170,0.09) !important;
  padding: 16px 20px !important;
}

/* ── 7. Badge / Pill-Tags ── */
/* Runde Badges → leicht abgerundet */
.badge:not(.step-badge):not(.konfig-badge) {
  border-radius: 6px !important;
}
.badge {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
}

/* ── 8. Card-Komponenten ── */
.card {
  background: rgba(15,28,48,0.7) !important;
  border: 1px solid rgba(118,169,250,0.12) !important;
  border-radius: 14px !important;
}
.card:hover {
  border-color: rgba(118,169,250,0.25) !important;
  background: rgba(15,28,48,0.9) !important;
}

/* ── 9. Section-Labels (webwerk-Stil) ── */
.section-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}
.section-label::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 1px;
  background: #76a9fa;
  flex-shrink: 0;
}

/* ── 10. Primär-Buttons ── */
.btn-primary {
  background: #225eaa !important;
  border-radius: 8px !important;
  color: #fff !important;
  font-weight: 700 !important;
  transition: background 0.2s, transform 0.2s !important;
}
.btn-primary:hover {
  background: #1e4f99 !important;
  transform: translateY(-1px) !important;
}

/* ── 11. Border-Farben harmonisieren ── */
.border-white\/10,
.border-white\/8,
[class*="border-white\/"] {
  border-color: rgba(118,169,250,0.12) !important;
}

/* ── 12. Link-Farben ── */
a.text-primary, a[class*="text-primary"] {
  color: #76a9fa !important;
}

/* ── 13. Hintergrund-Aliase ── */
.bg-slate-900 { background-color: #0a1225 !important; }
.hover\:bg-slate-800:hover { background-color: #0f1c30 !important; }

/* ── 14. Ticker (falls auf Seite vorhanden) ── */
.df-tick {
  color: #76a9fa !important;
  text-shadow: 0 0 14px rgba(118,169,250,0.55) !important;
}
.df-tick-sep {
  color: rgba(118,169,250,0.50) !important;
  text-shadow: 0 0 8px rgba(118,169,250,0.35) !important;
}

/* ── 15. Rounded-full Icon-Container → Square ── */
/* Nur Containers mit einem Icon drin, keine Buttons/Avatare */
.icon-container,
.icon-box {
  border-radius: 10px !important;
}

/* ── 16. Seiten-spezifische Hintergründe normieren ── */
section[style*="background:#0a1530"],
div[style*="background:#0a1530"],
section[style*="background: #0a1530"],
div[style*="background: #0a1530"] {
  background: #0a1225 !important;
}
section[style*="background:#0f1c30"],
div[style*="background:#0f1c30"] {
  background: #0f1c30;
}

/* ── 17. FAQ-Items ── */
.faq-item, details.faq-item {
  border-color: rgba(118,169,250,0.10) !important;
  border-radius: 10px !important;
}
.faq-item:hover {
  border-color: rgba(118,169,250,0.22) !important;
  background: rgba(118,169,250,0.03) !important;
}

/* ── 18. Ratgeber / Artikel — Typografie ── */
.prose h2, .article-body h2 {
  color: #e8eeff !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  border-bottom: 1px solid rgba(118,169,250,0.12) !important;
  padding-bottom: 8px !important;
}
.prose h3, .article-body h3 {
  color: rgba(232,238,255,0.9) !important;
  font-weight: 700 !important;
}
.prose a, .article-body a {
  color: #76a9fa !important;
  text-decoration-color: rgba(118,169,250,0.35) !important;
}
.prose a:hover, .article-body a:hover {
  color: #a8c8ff !important;
}

/* ── 19. Logo-Größe siteweite Normierung ── */
#navbar a[href="index.html"],
#navbar a[href="../../index.html"],
#navbar a[href="../index.html"] {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em !important;
  color: #e8eeff !important;
  text-decoration: none !important;
}
@media (min-width: 768px) {
  #navbar a[href="index.html"],
  #navbar a[href="../../index.html"],
  #navbar a[href="../index.html"] {
    font-size: 1.5rem !important;
  }
}
/* .de Akzent immer hellblau */
#navbar a[href="index.html"] span,
#navbar a[href="../../index.html"] span,
#navbar a[href="../index.html"] span {
  color: #76a9fa !important;
}