/* ============================================================
   Barrierefreies Accordion (WAI-ARIA) – Optik, theme-freundlich
   – Erbt Schrift & Farben vom Theme
   – Fokus eckig (outline), Farbe vererbbar
   – Icons: chevron (Standard) oder plus→minus
   – Icon links vor dem Titel, saubere Ausrichtung
   ============================================================ */

.a11y-accordion {
  --acc-border: rgba(0,0,0,.12);
  --acc-radius: 12px;
  --acc-pad-x: 16px;
  --acc-pad-y: 12px;

  /* Icon-Variablen (über Quick CSS je Seite/Block steuerbar) */
  --acc-icon-size: 20px;      /* Gesamtgröße des Icons */
  --icon-color: currentColor; /* Icon-Farbe (erbt Textfarbe) */
  --icon-thickness: 2px;      /* Strichstärke */

  /* Fokus-Variablen */
  --focus-color: currentColor;
  --focus-offset: 2px;

  margin: 1rem 0;
}

/* Items & Grundlinie */
.a11y-acc-item + .a11y-acc-item { border-top: 1px solid var(--acc-border); }
.a11y-acc-header { margin: 0; }

/* Trigger – Flex für perfekte vertikale Ausrichtung */
.a11y-acc-trigger {
  width: 100%;
  display: flex;
  align-items: center;              /* Icon + Text zentriert auf einer Linie */
  gap: .75rem;
  padding: var(--acc-pad-y) var(--acc-pad-x);
  text-align: left;
  background: transparent;
  border: none;
  border-radius: var(--acc-radius);
  cursor: pointer;
  line-height: 1.35;
  min-height: 48px;
  color: inherit;
}

/* Reihenfolge: Icon links, Text rechts (DOM bleibt unverändert) */
.a11y-acc-icon  { order: 0; }
.a11y-acc-title { order: 1; }

/* Titel erbt Theme-Stile */
.a11y-acc-title {
  font: inherit;
  font-weight: inherit;
  font-size: inherit;
  color: inherit;
  text-transform: inherit;
  line-height: inherit;
}

/* Fokus eckig, Farbe vererbbar */
.a11y-acc-trigger:focus { outline: none; }
.a11y-acc-trigger:focus-visible {
  outline: 2px solid var(--focus-color);
  outline-offset: var(--focus-offset);
  box-shadow: none;
}

/* Icon-Grundlage */
.a11y-acc-icon {
  width: var(--acc-icon-size);
  height: var(--acc-icon-size);
  position: relative;
  flex: 0 0 var(--acc-icon-size);
  color: currentColor;
}

/* ----------------------------------------------
   Icon: Chevron (Standard)
   ---------------------------------------------- */
.a11y-accordion.icon-chevron .a11y-acc-icon::before,
.a11y-accordion.icon-chevron .a11y-acc-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 60%;
  height: var(--icon-thickness);
  background: var(--icon-color);
  transform-origin: center;
  transition: transform .2s ease;
}
.a11y-accordion.icon-chevron .a11y-acc-icon::before { transform: rotate(45deg) translateY(3px); }
.a11y-accordion.icon-chevron .a11y-acc-icon::after  { transform: rotate(-45deg) translateY(3px); }
.a11y-acc-trigger[aria-expanded="true"] .a11y-acc-icon::before { transform: rotate(-45deg); }
.a11y-acc-trigger[aria-expanded="true"] .a11y-acc-icon::after  { transform: rotate(45deg); }

/* ----------------------------------------------
   Icon: Plus → Minus (bei geöffnetem Toggle)
   ---------------------------------------------- */
.a11y-accordion.icon-plus .a11y-acc-icon::before,
.a11y-accordion.icon-plus .a11y-acc-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 70%;
  height: var(--icon-thickness);
  background: var(--icon-color);
  transition: opacity .2s ease, transform .2s ease;
}

/* Force: horizontal (—) & vertikal (|) definieren */
.a11y-accordion.icon-plus .a11y-acc-icon::before,
.a11y-accordion.icon-plus .a11y-acc-icon::after { transform: none; }
.a11y-accordion.icon-plus .a11y-acc-icon::after { transform: rotate(90deg); }

/* Geöffnet: vertikale Linie ausblenden → echtes Minus */
.a11y-acc-trigger[aria-expanded="true"] .a11y-acc-icon::after {
  opacity: 0;
  transform: rotate(90deg) scaleY(0);
}

/* ----------------------------------------------
   Panels
   ---------------------------------------------- */
.a11y-acc-panel { padding: 0 var(--acc-pad-x) .75rem var(--acc-pad-x); }
.a11y-acc-panel[hidden] { display: none; }
.a11y-acc-panel__inner { padding: .25rem 0 .5rem; }
.a11y-acc-panel p:last-child { margin-bottom: 0; }

/* Kompakter Look im Footer */
#socket .a11y-accordion .a11y-acc-trigger {
  min-height: 40px;
  padding: 10px 12px;
  font-size: .95rem;
}

/* ============================================================
   Hinweise:
   – Icon-Parameter per Quick CSS steuern: --icon-color, --icon-thickness, --acc-icon-size
   – Fokusfarbe per Quick CSS: --focus-color
   – Für Design-Presets / Wrapper-Klassen siehe Quick-CSS-Template
   ============================================================ */