/* Akkordeon-Tabs — 1:1 aus ERP (assets/css/mage-components.css) portiert.
   Fullwidth/flush, offen = beige, Header-Icon wird orange, Body mit 20px Außen-Spacing.
   Marken-Orange über var(--o); neutrale Grautöne wie im Original.

   WICHTIG (Lehre 2026-08-12): Diese Regeln hingen früher am Wrapper `.acctab`. Ein Modul, das
   Design::section() nutzte, aber den Wrapper vergass, bekam eine NACKTE Sektion (Projekte-Sidebar).
   Ein Kern-Baustein darf nicht davon abhängen, dass der Autor eine Magic-Klasse mitschreibt —
   „selbe Elemente = selbes Design". Deshalb greift das Design jetzt direkt an .accordion-section;
   `.acctab` ist nur noch die FLUSH-Variante (randlos in der Sidebar, Trennlinie oben). */
.accordion-section{background:var(--surface);border-bottom:1px solid var(--grey-300)}
.accordion-header{padding:var(--sp-7) var(--sp-8);background:var(--surface);cursor:pointer;user-select:none;
  display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);transition:background var(--dur-fast) ease}
.accordion-header:hover{background:var(--grey-50)}
/* Offener Abschnitt: blaue Kante links + blaue Tönung, der Auf-/Zu-Knopf wird orange gefüllt
   (Florian 2026-09-11, Vorschlag „Best-of"). */
.accordion-section.open > .accordion-header,
.accordion-section.open > .accordion-header:hover{background:color-mix(in srgb,var(--info) 7%,var(--surface));box-shadow:inset 4px 0 0 var(--info)}
.accordion-header h3{margin:0;font-size:var(--fs-lg);font-weight:var(--fw-bold);color:var(--text);display:flex;align-items:center;min-width:0}
.acc-h-icon{margin-right:var(--sp-4);font-size:var(--fs-lg);color:var(--grey-500);line-height:1;transition:color var(--dur-fast) ease}
.accordion-header:hover .acc-h-icon,
.accordion-section.open > .accordion-header .acc-h-icon{color:var(--o)}
.accordion-icon{transition:transform var(--dur) ease;color:var(--grey-700);font-size:var(--fs-md);width:var(--sz-32);height:var(--sz-32);
  border:1px solid var(--grey-400);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;line-height:1}
.accordion-header:hover .accordion-icon{border-color:var(--grey-500);color:var(--text)}
.accordion-section.open > .accordion-header .accordion-icon{transform:rotate(180deg);background:var(--o);border-color:var(--o);color:var(--surface)}
.accordion-content{max-height:0;overflow:hidden;transition:max-height var(--dur-slow) ease-out}
.accordion-section.open > .accordion-content{max-height:10000px;transition:max-height var(--dur-slow) ease-in}
.accordion-body{padding:var(--sp-8);background:var(--surface);border-top:1px solid var(--grey-200)}

/* FLUSH-Variante (Sidebar): Trennlinie oben, damit die erste Sektion nicht am Kopf klebt. */
.acctab{border-top:1px solid var(--grey-300)}