/* Stelvia – dunkles Design
   Wird nach styles.css geladen und überschreibt nur Farben.
   Zurück zum hellen Design: <link … theme-dark.css> aus den HTML-Seiten entfernen
   und das Logo wieder auf assets/logo.png stellen. */

:root {
  --bg: #111312;        /* Seitenhintergrund, fast Schwarz */
  --bg-2: #191C1A;      /* abgesetzte Abschnitte */
  --surface: #1D201E;   /* Karten, dunkles Grau */
  --ink: #F2F2F0;       /* Text hell */
  --on-accent: #111312; /* Text auf Limettengrün */
  --muted: #AEB0AA;     /* Nebentext, Kontrast ca. 8:1 auf --bg */
  --muted-dark: #AEB0AA;
  --line: #333834;      /* feine Ränder */
  --line-dark: #333834;
  --field: #161917;
  --field-border: #5E635F;
}

/* Grundflächen */
.header { border-bottom-color: var(--line); }
.section--dark { background: var(--bg-2); color: var(--ink); }
.section--dark .lead, .section--dark p { color: var(--muted); }
.service h3, .steps h3 { color: var(--ink); }
.section--examples + #preise { border-top-color: var(--line); }
.footer { background: #0B0C0B; color: var(--muted); border-top: 1px solid var(--line); }
.footer nav a { color: var(--ink); }
.legal p, .legal li { color: #D3D5CF; }

/* Text auf Limettengrün immer dunkel */
::selection { color: var(--on-accent); }
.mark { color: var(--on-accent); }
.tag { color: var(--on-accent); }
.skip-link:focus { background: var(--accent); color: var(--on-accent); }

/* Knöpfe */
.btn--dark { background: var(--ink); color: var(--on-accent); border-color: var(--ink); }
.btn--dark:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--ink); border-color: var(--ink); color: var(--on-accent); }
.btn--light { color: var(--ink); border-color: var(--ink); }
.btn--light:hover { background: var(--ink); color: var(--on-accent); }
.btn--accent { color: var(--on-accent); }
.btn--accent:hover { background: var(--ink); border-color: var(--ink); color: var(--on-accent); }
.btn:hover { box-shadow: 0 12px 24px -14px rgba(0, 0, 0, 0.7); }
.nav-toggle { background: var(--ink); color: var(--on-accent); }
.nav .btn--dark { background: var(--accent); border-color: var(--accent); }
.nav .btn--dark:hover { background: var(--ink); border-color: var(--ink); }

/* Karten in dunklem Grau mit feinem Rand */
.card { background: var(--surface); border-color: var(--line); }
.card:hover { border-color: #4A504B; }

/* Preise */
.price-card ul { border-top-color: var(--line); }
.price-card li::before {
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-5' fill='none' stroke='%23111312' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.price-card li.no::before { background: none; }
/* Empfohlene Karte: dunkel mit grünem Rand, damit der grüne Knopf sichtbar bleibt */
.price-card--featured {
  background: var(--surface);
  border: 2px solid var(--accent);
  color: var(--ink);
}
.price-card--featured .price__note { color: var(--muted); }
.price-card--featured .btn--primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.price-card--featured .btn--primary:hover { background: var(--ink); border-color: var(--ink); color: var(--on-accent); }
.badge { background: var(--accent); color: var(--on-accent); }
.free-call { background: var(--surface); }
.price-card--care { background: var(--bg-2); border-color: var(--line); color: var(--ink); }

/* Fragen */
.faq { border-top-color: var(--line); }
.faq details { border-bottom-color: var(--line); }
.faq summary::after {
  background:
    linear-gradient(var(--on-accent), var(--on-accent)) center / 16px 2px no-repeat,
    linear-gradient(var(--on-accent), var(--on-accent)) center / 2px 16px no-repeat,
    var(--accent);
}

/* Kontakt: Limettengrün bleibt, darin dunkle Schrift */
.section--accent { --ink: #111312; --muted: #2F332F; color: var(--ink); }
.contact-form, .contact-box {
  --ink: #F2F2F0;
  --muted: #AEB0AA;
  background: var(--surface);
  border-color: #111312;
  color: var(--ink);
}
.contact-box h3 { color: var(--ink); }
.contact-box p { color: var(--muted); }
.btn--outline-light { color: var(--ink); border-color: var(--ink); }
.btn--outline-light:hover { background: var(--ink); color: var(--on-accent); }
.contact-form .btn { border-color: var(--ink); }

/* Formular */
.field input[type="text"], .field textarea {
  background: var(--field);
  border-color: var(--field-border);
  color: var(--ink);
}
.field input[type="text"]:hover, .field textarea:hover { background: #1B1E1C; border-color: #7A807B; }
.field input[type="text"]:focus-visible, .field textarea:focus-visible { background: #1B1E1C; }
.field input:user-invalid, .field textarea:user-invalid { border-color: #FF8A80; }
.choice span { border-color: var(--field-border); }
.choice input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* Hervorhebung: Limettengrün als Schriftfarbe, gut lesbar auf Dunkel */
.hl { color: var(--accent); background: none; }

/* Mobiles Menü und Kontaktleiste */
@media (max-width: 760px) {
  .nav a:not(.btn) { border-bottom-color: var(--line); }
  .action-bar { border-top-color: var(--line); }
}