/* === A – Seite A (nur das Nötigste) ========================= */

/* 1) A-Theme (falls du A anders einfärben willst) */
:root{
  --brand: #f15025; /* optional: A-Primärfarbe */
}

/* 2) Hero A – Bild & Lesbarkeit */
.hero--a{
  --hero-a-img: url("../img/s2a/code.jpg"); /* Datei in assets/img/a */
  min-height: clamp(320px, 60vh, 680px);
  display: grid;
  align-items: center;
  color:#fff;
  background-image:
    linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,.35)),
    var(--hero-a-img);
  background-size: cover;
  background-position: center;
}
@media (min-width: 992px){
  .hero--a{ min-height: 70vh; }
}

/* 3) Feature-Zeilen (nur semantische Haken; Grid macht Bootstrap) */
/* Hooks dokumentieren wir nur als Kommentar, keine leeren Rulesets. */
/* .feature (Block), .feature__media (Bildspalte), .feature__body (Textspalte) */


/* 4) Kontaktformular (optional, Bootstrap reicht eigentlich) */
/* .contact-form .form-control:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--brand) 25%, transparent);
} */


/* === FAQ ===================================== */
/* ✏️ Farben hier anpassen */
#faq-a{
  --faq-closed-bg:   #f8fafc;   /* Kopfzeile zu (Button) */
  --faq-closed-ink:  #0f172a;
  --faq-open-bg:     #f15025;   /* Kopfzeile offen */
  --faq-open-ink:    #ffffff;
  --faq-hover-bg:    #ffe7de;   /* Hover wenn zu */
  --faq-hover-ink:   #0f172a;

  --faq-border:      #e5e7eb;   /* Rahmen der Items */
  --faq-body-bg:     #ffffff;   /* Inhaltspanel */
  --faq-body-ink:    #0f172a;
  --faq-focus:       #f1502540; /* Focus-Ring */
}

/* Grundzustand (geschlossen) */
#faq-a .accordion-item{ border:1px solid var(--faq-border); border-radius: 12px; overflow:hidden; }
#faq-a .accordion-item + .accordion-item{ margin-top:.75rem; }
#faq-a .accordion-button{
  background: var(--faq-closed-bg);
  color: var(--faq-closed-ink);
  padding: .9rem 1rem;
  transition: background-color .2s ease, color .2s ease;
}

/* Hover (nur wenn zu) */
#faq-a .accordion-button.collapsed:hover{
  background: var(--faq-hover-bg);
  color: var(--faq-hover-ink);
}

/* Offen */
#faq-a .accordion-button:not(.collapsed){
  background: var(--faq-open-bg);
  color: var(--faq-open-ink);
  box-shadow: none; /* Bootstrap-Schatten entfernen */
}

/* Panel */
#faq-a .accordion-body{
  background: var(--faq-body-bg);
  color: var(--faq-body-ink);
}

/* Fokus / Tastaturbedienung */
#faq-a .accordion-button:focus{
  box-shadow: 0 0 0 .2rem var(--faq-focus);
}

/* Optional: Pfeil-Kontrast bei dunklem Open-BG verbessern */
#faq-a .accordion-button:not(.collapsed)::after{
  filter: invert(1) brightness(2); /* macht den Chevron hell */
}