:root {
  --color-bg: #faf7f4;
  --color-text: #2b2622;
  --color-primary: #6b4f8f;
  --color-primary-dark: #4d3768;
  --color-accent: #d9a441;
  --color-surface: #ffffff;
  --color-surface-tint: #f8f5fc;
  --color-border: #eeeeee;
  --color-cta-bg: #4d3768;
  --color-cta-text: #ffffff;
  --color-muted: #888888;
  --color-form-hint: #dddddd;
  --max-width: 880px;
}

[data-theme="dark"] {
  --color-bg: #17131e;
  --color-text: #e9e4f0;
  --color-primary: #b79ee0;
  --color-primary-dark: #d8c6f2;
  --color-accent: #eec276;
  --color-surface: #241f2e;
  --color-surface-tint: #2b2438;
  --color-border: #3a3346;
  --color-cta-bg: #5a4180;
  --color-cta-text: #ffffff;
  --color-muted: #a89bb8;
  --color-form-hint: #cfc0e6;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 1.25rem; }

/* ---------- Header / Navigation ---------- */
.site-header { background: var(--color-surface); border-bottom: 1px solid var(--color-border); position: relative; }
.header-inner { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 1.5rem; gap: 1.25rem; }
.logo { font-weight: 700; color: var(--color-primary-dark); text-decoration: none; font-size: 1.1rem; white-space: nowrap; flex: 0 0 auto; }

/* Desktop-Navigation: nimmt den mittleren Platz ein und zentriert die
   Themen als luftige "Pills". Bei vielen Themen bricht sie sauber (mit
   gleichmäßigem gap) um, statt gedrängt zu wirken. Mobile wird weiter
   unten in der Media Query komplett überschrieben (Hamburger). */
.site-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.3rem 0.35rem; flex: 1 1 auto; }
.site-nav a {
  margin: 0; padding: 0.4rem 0.85rem; border-radius: 999px;
  color: var(--color-text); text-decoration: none; white-space: nowrap;
  font-size: 0.95rem; line-height: 1.2;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.site-nav a:hover { background: var(--color-surface-tint); color: var(--color-primary); }
.site-nav a.active { background: var(--color-surface-tint); color: var(--color-primary-dark); font-weight: 600; }

.header-actions { display: flex; align-items: center; gap: 0.75rem; flex: 0 0 auto; }

.cta-button { background: var(--color-primary); color: white !important; padding: 0.5rem 1rem; border-radius: 6px; text-decoration: none; white-space: nowrap; }

.theme-toggle {
  border: 1px solid var(--color-border); background: transparent; color: var(--color-text);
  width: 2.25rem; height: 2.25rem; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center; font-size: 1rem; padding: 0; flex: 0 0 auto;
}
.theme-toggle:hover { border-color: var(--color-primary); }

/* Hamburger-Button - per Default (Desktop) unsichtbar, siehe Media Query.
   Reihenfolge (order) wird bewusst NUR in der Media Query gesetzt, sonst
   würde sie das Desktop-Layout (logo | nav | actions) durcheinanderbringen. */
.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 4px;
  width: 2.25rem; height: 2.25rem; border: none; background: transparent; cursor: pointer;
  padding: 0; flex: 0 0 auto;
}
.nav-toggle span { display: block; width: 100%; height: 2px; background: var(--color-text); border-radius: 2px; }

/* ---------- Hero / Startseite ---------- */
.hero { text-align: center; padding: 3rem 1.25rem; }
.hero h1 { color: var(--color-primary-dark); }

.theme-overview { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; padding: 1rem 1.25rem 3rem; }
.theme-card {
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px;
  padding: 1rem 1.5rem; text-decoration: none; color: var(--color-primary-dark);
  font-weight: 600;
}

.page, .section-list { background: var(--color-surface); border-radius: 10px; padding: 2rem; margin: 2rem auto; max-width: var(--max-width); }

/* KI-Titelbild oben im Artikel (siehe layouts/_default/single.html). Feste
   width/height im <img> verhindern Layout-Sprünge beim Laden. */
.article-hero { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; margin: 0 0 1.5rem; }

/* "Passende Themen"-Kartenraster am Artikelende (siehe scripts/
   internal_links.py + layouts/shortcodes/related-card.html) - Karten statt
   reiner Textlinks, damit Besucher eher zu einem weiteren Artikel wechseln,
   statt die Seite zu verlassen. */
.related-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; margin: 1.5rem 0; }
.related-card {
  display: flex; flex-direction: column; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: 10px; overflow: hidden;
  text-decoration: none; color: var(--color-primary-dark); font-weight: 600;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.related-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1); }
.related-card img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.related-card-title { display: block; padding: 0.75rem 0.9rem; font-size: 0.92rem; line-height: 1.35; }

.lead-cta-box {
  background: var(--color-cta-bg); color: var(--color-cta-text); text-align: center;
  border-radius: 10px; padding: 2rem 1.5rem; margin-top: 2.5rem;
}
.lead-cta-box h3 { color: var(--color-cta-text); margin-top: 0; }
.lead-cta-box .cta-eyebrow { font-size: 0.95rem; opacity: 0.85; margin-bottom: 0.25rem; }
.lead-cta-box .cta-price { font-size: 0.95rem; opacity: 0.9; margin: 0.25rem 0 1.25rem; }
.lead-cta-box .cta-price s { opacity: 0.7; }
.lead-cta-link {
  display: inline-block; background: var(--color-accent); color: white !important;
  text-decoration: none; padding: 0.9rem 2rem; border-radius: 8px; font-weight: 700;
  font-size: 1.05rem;
}
.form-hint { font-size: 0.75rem; color: var(--color-form-hint); margin-top: 1rem; }
.form-hint a { color: white; }

.pain-points { list-style: none; padding: 0; margin: 1.5rem 0; }
.pain-points li {
  padding: 0.75rem 0 0.75rem 1.75rem; border-bottom: 1px solid var(--color-border);
  position: relative;
}
.pain-points li::before {
  content: "•"; position: absolute; left: 0; color: var(--color-accent); font-weight: 700;
  font-size: 1.3rem; line-height: 1.2;
}

.benefit-steps { display: flex; flex-direction: column; gap: 1rem; margin: 1.5rem 0; }
.benefit-step { display: flex; gap: 1rem; align-items: flex-start; }
.benefit-step .step-number {
  flex: 0 0 auto; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--color-primary); color: white; display: flex; align-items: center;
  justify-content: center; font-weight: 700;
}
.benefit-step h4 { margin: 0 0 0.25rem; color: var(--color-primary-dark); }
.benefit-step p { margin: 0; }

/* Inhaltsverzeichnis/Sprung-Links (siehe layouts/_default/single.html und
   list.html) - eigene, dezente Box statt Hugos Standard-.TableOfContents-
   Aufmachung, damit sie ins Kartendesign der Seite passt. */
.toc { background: var(--color-surface-tint); border: 1px solid var(--color-border); border-radius: 12px; padding: 1rem 1.25rem; margin: 0 0 1.5rem; }
.toc-title { margin: 0 0 .5rem; font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; color: var(--color-muted); }
.toc ul { margin: 0; padding-left: 1.2rem; }
.toc li { margin-bottom: .3rem; }
.toc a { color: var(--color-primary-dark); text-decoration: none; }
.toc a:hover { text-decoration: underline; }

/* FAQ-Akkordeon pro Thema (siehe layouts/partials/faq.html + data/faq.yaml).
   Natives <details>/<summary> - kein JS nötig. */
.faq-section { margin-top: 2rem; }
.faq-accordion { display: flex; flex-direction: column; gap: .6rem; }
.faq-item { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; padding: .9rem 1.1rem; }
.faq-item summary {
  cursor: pointer; font-weight: 700; color: var(--color-primary-dark); list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.3rem; line-height: 1; color: var(--color-primary); flex: 0 0 auto; transition: transform .2s ease; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { margin: .75rem 0 0; color: var(--color-text); }

.trust-note { background: var(--color-surface-tint); border-radius: 10px; padding: 1.25rem 1.5rem; margin: 1.5rem 0; }
.trust-note p { margin: 0; }
.trust-note a { color: var(--color-primary-dark); font-weight: 600; }

/* Direkt-Antwort-Absatz am Artikelanfang (siehe scripts/
   generate_hugo_content.py ANSWER_BLOCK_INSTRUCTION/render_answer_block) -
   optisch abgesetzt, damit er sowohl für Leser:innen als auch für
   KI-Systeme (Google AI Overviews/ChatGPT/Perplexity etc.) als
   eigenständiger, zitierbarer Block erkennbar ist. */
.ai-answer-block {
  font-size: 1.05rem; font-weight: 600; color: var(--color-text);
  background: var(--color-surface-tint); border-left: 3px solid var(--color-primary);
  border-radius: 0 10px 10px 0; padding: 1rem 1.25rem; margin: 1.25rem 0;
}

.about-me { display: flex; gap: 1.25rem; align-items: center; background: var(--color-surface-tint); border-radius: 10px; padding: 1.5rem; margin: 1.5rem 0; }
.about-me p { margin: 0.25rem 0; }
.about-me h3 { margin: 0 0 0.5rem; color: var(--color-primary-dark); }

.cluster-list { list-style: none; padding: 0; }
.cluster-list li { padding: 0.75rem 0; border-bottom: 1px solid var(--color-border); }

.site-footer { text-align: center; padding: 2rem 1.25rem; color: var(--color-muted); font-size: 0.85rem; }
.site-footer a { color: var(--color-muted); }

.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
  background: var(--color-cta-bg); color: var(--color-cta-text);
  padding: 1rem 1.25rem; box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.3);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner-inner {
  max-width: var(--max-width); margin: 0 auto; display: flex; gap: 1.5rem;
  align-items: center; flex-wrap: wrap; justify-content: space-between;
}
.cookie-banner p { margin: 0; flex: 1 1 320px; font-size: 0.9rem; }
.cookie-banner a { color: white; }
.cookie-banner-actions { display: flex; gap: 0.75rem; flex: 0 0 auto; }
.cookie-btn {
  border: none; border-radius: 6px; padding: 0.6rem 1.25rem; font-weight: 600;
  cursor: pointer; font-size: 0.9rem;
}
.cookie-btn-primary { background: var(--color-accent); color: white; }
.cookie-btn-secondary { background: transparent; color: white; border: 1px solid rgba(255, 255, 255, 0.5); }

/* ---------- Mobile Navigation ---------- */
@media (max-width: 720px) {
  .nav-toggle { display: flex; }

  .header-inner { flex-wrap: wrap; }

  /* Reihenfolge auf Mobile: Logo -- Theme-Toggle/Anruf-Button -- Hamburger,
     Menü klappt darunter als eigene volle Zeile auf. */
  .logo { order: 1; }
  .header-actions { order: 2; }
  .nav-toggle { order: 3; }

  .site-nav {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    order: 4;
    border-top: 1px solid var(--color-border);
    margin-top: 1rem;
    padding-top: 0.75rem;
  }
  .site-nav.is-open { display: flex; }
  .site-nav a { margin: 0; padding: 0.6rem 0.5rem; width: 100%; border-radius: 8px; }
}