/* ============================================================================
   HeizHirsch — Akkordeons in einer Linie
   Drei Bauarten, ein Erscheinungsbild:
     /service/    #services-accordion  (h2.svc-h > button.svc-accordion-toggle)
     /faq/        #faq-accordion       (button.accordion-toggle)
     /ueber-uns/  .e-n-accordion       (details > summary, Elementor)
   Gleiche Sprache wie Kopf und Fuss: scharfe Kanten, Grün #3A4743,
   roter Akzent, Nunito Sans für die Titel.
   ========================================================================== */

:root{
  --ak-rot:#E30613;
  --ak-gruen:#3A4743;
  --ak-ink:#1A1A1A;
  --ak-mut:#5C6B66;
  --ak-flaeche:#F2F5F4;
  --ak-flaeche-2:#FFFFFF;
  --ak-linie:#D7DEDB;
}

/* ─────────────── gemeinsame Grundform ─────────────── */
#services-accordion .svc-item,
#faq-accordion .faq-section,
.e-n-accordion .e-n-accordion-item{
  margin:0 0 8px !important;
  border:1px solid var(--ak-linie) !important;
  border-radius:0 !important;
  background:var(--ak-flaeche-2) !important;
  box-shadow:none !important;
  overflow:hidden;
  transition:border-color .16s ease;
}
#services-accordion .svc-item:hover,
#faq-accordion .faq-section:hover,
.e-n-accordion .e-n-accordion-item:hover{ border-color:#A9B6B1 !important; }

/* ─────────────── Kopfzeile eines Eintrags ─────────────── */
#services-accordion .svc-accordion-toggle,
#faq-accordion .accordion-toggle,
.e-n-accordion .e-n-accordion-item-title{
  display:flex !important; align-items:center; gap:14px;
  width:100%; margin:0 !important;
  padding:16px 18px !important;
  background:var(--ak-flaeche) !important;
  color:var(--ak-ink) !important;
  border:0 !important; border-radius:0 !important;
  box-shadow:none !important;
  text-align:left !important;
  cursor:pointer;
  font-family:"Nunito Sans", sans-serif !important;
  font-size:15px !important; font-weight:800 !important;
  line-height:1.3 !important; letter-spacing:.01em !important;
  transition:background-color .16s ease, color .16s ease;
  position:relative;
}
/* Roter Strich links — er wächst beim Öffnen */
#services-accordion .svc-accordion-toggle::before,
#faq-accordion .accordion-toggle::before,
.e-n-accordion .e-n-accordion-item-title::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:4px;
  background:var(--ak-rot); transform:scaleY(0); transform-origin:center;
  transition:transform .2s ease;
}
#services-accordion .svc-accordion-toggle:hover,
#faq-accordion .accordion-toggle:hover,
.e-n-accordion .e-n-accordion-item-title:hover{
  background:#E7ECEA !important; color:var(--ak-ink) !important;
}
#services-accordion .svc-accordion-toggle:focus,
#services-accordion .svc-accordion-toggle:focus-visible,
#faq-accordion .accordion-toggle:focus,
.e-n-accordion .e-n-accordion-item-title:focus{
  outline:none !important;
  padding:16px 18px !important;
  border:0 !important; border-radius:0 !important; margin-bottom:0 !important;
}
#services-accordion .svc-accordion-toggle:focus-visible,
#faq-accordion .accordion-toggle:focus-visible,
.e-n-accordion .e-n-accordion-item-title:focus-visible{
  outline:2px solid var(--ak-rot) !important; outline-offset:-2px;
}

/* ─────────────── geöffneter Zustand ─────────────── */
#services-accordion .svc-item.is-open > .svc-h > .svc-accordion-toggle,
#services-accordion .svc-item.is-open > .svc-h > .svc-accordion-toggle:hover,
#services-accordion .svc-item.is-open > .svc-accordion-toggle,
#services-accordion .svc-item.is-open > .svc-accordion-toggle:hover,
.e-n-accordion .e-n-accordion-item[open] > .e-n-accordion-item-title,
.e-n-accordion .e-n-accordion-item[open] > .e-n-accordion-item-title:hover{
  background:var(--ak-gruen) !important; color:#FFF !important;
}
#services-accordion .svc-item.is-open > .svc-h > .svc-accordion-toggle::before,
#services-accordion .svc-item.is-open > .svc-accordion-toggle::before,
.e-n-accordion .e-n-accordion-item[open] > .e-n-accordion-item-title::before{
  transform:scaleY(1);
}
/* Beim FAQ steuert nur die Sichtbarkeit des Inhalts den Zustand */
#faq-accordion .faq-section.is-open .accordion-toggle,
#faq-accordion .faq-section.is-open .accordion-toggle:hover{
  background:var(--ak-gruen) !important; color:#FFF !important;
}
#faq-accordion .faq-section.is-open .accordion-toggle::before{
  transform:scaleY(1);
}

/* ─────────────── Titel und Zeichen ─────────────── */
#services-accordion .svc-title{
  flex:1; font-size:15px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
}
#faq-accordion .accordion-toggle{ font-size:14.5px !important; font-weight:700 !important; }
.e-n-accordion .e-n-accordion-item-title-text{
  flex:1; font-family:"Nunito Sans", sans-serif; font-size:15px; font-weight:800; letter-spacing:.06em;
}
.e-n-accordion .e-n-accordion-item-title-header{ flex:1; }

/* Das Zeichen kommt aus einem Pseudoelement: geschlossen ein Plus,
   geoeffnet ein echtes Minus (U+2212). Kein gedrehtes Plus mehr. */
#services-accordion .svc-icon{
  flex:none; width:26px; height:26px; display:grid; place-items:center;
  border:1.5px solid currentColor; color:var(--ak-rot);
  font-size:0; line-height:1; font-weight:700;
}
#services-accordion .svc-icon::after{
  content:"+"; font-size:18px; line-height:1; font-weight:700; color:currentColor;
}
#services-accordion .svc-item.is-open .svc-icon{
  background:#FFF; border-color:#FFF; color:var(--ak-gruen);
}
#services-accordion .svc-item.is-open .svc-icon::after{ content:"−"; }

/* FAQ hat kein eigenes Zeichen im Markup — eines nachrüsten */
#faq-accordion .accordion-toggle::after{
  content:"+"; flex:none; width:26px; height:26px; display:grid; place-items:center;
  border:1.5px solid var(--ak-rot); color:var(--ak-rot);
  font-size:18px; line-height:1; font-weight:700;
}
#faq-accordion .faq-section.is-open .accordion-toggle::after{
  content:"−"; background:#FFF; border-color:#FFF; color:var(--ak-gruen);
}

/* Elementor liefert eigene Plus- und Minus-Zeichen als SVG. Deren Fuellung
   kam mit #1F2124 aus dem Baukasten und lag im geoeffneten Zustand fast
   unsichtbar auf dem gruenen Grund — darum hier mit Nachdruck gesetzt. */
.e-n-accordion .e-n-accordion-item-title-icon{
  flex:none; width:26px; height:26px; display:grid; place-items:center;
  border:1.5px solid var(--ak-rot);
}
.e-n-accordion .e-n-accordion-item-title-icon span{ display:flex; }
.e-n-accordion .e-n-accordion-item-title-icon svg,
.e-n-accordion .e-n-accordion-item-title-icon .e-opened svg,
.e-n-accordion .e-n-accordion-item-title-icon .e-closed svg{
  width:13px !important; height:13px !important; fill:var(--ak-rot) !important;
}
.e-n-accordion .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-icon{
  background:#FFF !important; border-color:#FFF !important;
}
.e-n-accordion .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-icon svg,
.e-n-accordion .e-n-accordion-item[open] > .e-n-accordion-item-title .e-n-accordion-item-title-icon .e-opened svg{
  fill:var(--ak-gruen) !important;
}

/* ─────────────── Inhalt ─────────────── */
#services-accordion .svc-accordion-content,
#faq-accordion .accordion-content,
.e-n-accordion .e-n-accordion-item > :not(summary){
  background:var(--ak-flaeche-2) !important;
  border:0 !important; border-top:1px solid var(--ak-linie) !important;
  margin:0 !important;
  padding:18px !important;
  color:#33403C;
}
#services-accordion .svc-accordion-content p,
#faq-accordion .accordion-content p{ font-size:14.5px; line-height:1.65; }
#services-accordion .svc-titel-bk{
  font-family:"Nunito Sans", sans-serif; font-size:14px; font-weight:800;
  letter-spacing:.05em; text-transform:uppercase; color:var(--ak-gruen);
  padding:0 0 12px !important; margin:0;
}
#services-accordion .svc-desc strong,
#faq-accordion .accordion-content strong{ color:var(--ak-ink); }

/* Die Bildfläche im Akkordeon bekommt dieselbe scharfe Kante */
#services-accordion .svc-mobile-image{ border-radius:0 !important; box-shadow:none !important;
  border:1px solid var(--ak-linie); }
#service-image.svc-image-pane, #service-image{ border-radius:0 !important; }

@media (max-width:767px){
  #services-accordion .svc-accordion-toggle,
  #faq-accordion .accordion-toggle,
  .e-n-accordion .e-n-accordion-item-title{ padding:14px 15px !important; font-size:14px !important; }
  #services-accordion .svc-title,
  .e-n-accordion .e-n-accordion-item-title-text{ font-size:13.5px; }
  #services-accordion .svc-accordion-content,
  #faq-accordion .accordion-content,
  .e-n-accordion .e-n-accordion-item > :not(summary){ padding:15px !important; }
  /* Der geöffnete Eintrag blendet auf Mobile bisher seinen Kopf aus —
     mit dem neuen Zustand ist das nicht mehr nötig. */
  #services-accordion .svc-item.is-open > .svc-h > .svc-accordion-toggle{ display:flex !important; }
}

/* ═══════════════════ Zeichen nach vorn ═══════════════════
   In allen drei Bauarten steht das Plus/Minus im Markup hinter dem Titel.
   Mit der Reihenfolge im Flexlayout rutscht es an den Anfang — links, alle
   auf derselben Kante, danach erst der Text. Am Markup aendert sich nichts. */
#services-accordion .svc-icon,
.e-n-accordion .e-n-accordion-item-title-icon,
#faq-accordion .accordion-toggle::after{
  order:-1;
}
/* Der Titel nimmt den Rest der Zeile ein, damit nichts nachrutscht. */
#services-accordion .svc-title,
.e-n-accordion .e-n-accordion-item-title-header,
.e-n-accordion .e-n-accordion-item-title-text{
  flex:1 1 auto; min-width:0;
}