/* ==========================================================================
 * min-accordion.css — Accordion Design-System-Härtung (gem-lotte)
 * Brief 817 · 2026-06-08 · Sidequest lotte-typo3-hard-gate-20260608
 *
 * WARUM diese Datei existiert
 * ---------------------------
 * Der ContentBlock `mincore_accordion` (Paket made-in-nature/min-content-blocks)
 * rendert das Markup mit dem BEM-Namespace `min-accordion__*`
 * (__header / __title / __icon / __content). Die generierte Framework-CSS
 * (style.css, @layer components) stylt aber `ce-accordion__*` / `accordion__*`.
 * Dadurch trifft die Framework-CSS nur Teile des Markups:
 *   - KEIN aktiver Fill/State fuer das geoeffnete Element (details[open] = 0 Regeln)
 *   - KEINE Icon-Rotation (Framework rotiert nur das `--chevron`-Pseudo, nicht
 *     das vom Template ausgegebene Inline-SVG `.min-accordion__icon-svg`)
 *   - Content-Alias-Mismatch (`ce-accordion__body` statt `ce-accordion__content`)
 * Befund deckt den Codex-Visual-Smoke 2026-06-08 (Datenschutz-Accordion: weisser
 * Summary, kein eigener Fill/State, nur duenne Border) und das Monita-Ledger.
 *
 * Diese Datei ist UNLAYERED. Ungelayerte CSS schlaegt jede @layer aus style.css,
 * d.h. diese Haertung gewinnt zuverlaessig gegen die Framework-Defaults, ohne das
 * generierte Build-Artefakt style.css anzufassen.
 *
 * Alle Farben/Radien laufen ueber die Pipeline-Mandantentokens (--min-color-*,
 * --min-radius-*), die der MandantGenerator je Kunde aus design-tokens.json
 * fuellt. KEINE hartkodierten Markenfarben. Damit ist die Komponente uebertragbar:
 * gleiche Datei-Logik, andere Tokenwerte => Claudia/kuenftige Mandanten.
 *
 * Uebertragbarkeit: Lotte lokal (hier) -> Empfehlung an Codex, die korrigierte
 * Selektor-Brueckung in das zentrale Paket/style.css zu heben (siehe Report 817).
 * ========================================================================== */

.min-accordion {
  /* Lokale Komponententokens -> Mandantentokens (mit defensiven Fallbacks). */
  --lotte-acc-border: var(--min-color-border, #ccc);
  --lotte-acc-radius: var(--min-radius-md, 6px);
  --lotte-acc-surface: var(--min-color-surface, #f5f8fa);
  --lotte-acc-bg: var(--min-color-bg, #fff);
  --lotte-acc-text: var(--min-color-text, #1a1a1a);
  --lotte-acc-primary: var(--min-color-primary, #145675);
  --lotte-acc-accent: var(--min-color-accent, var(--lotte-acc-primary));
  --lotte-acc-gap: 0.5rem;
  --lotte-acc-pad-x: 1.25rem;
  --lotte-acc-pad-y: 1rem;
  --lotte-acc-transition: 200ms ease;
  /* Hover (geschlossen) vs. aktiver Fill (geoeffnet): zwei klar getrennte States */
  --lotte-acc-hover-fill: color-mix(in srgb, var(--lotte-acc-primary) 6%, var(--lotte-acc-bg));
  --lotte-acc-open-fill: color-mix(in srgb, var(--lotte-acc-primary) 12%, var(--lotte-acc-bg));

  display: flex;
  flex-direction: column;
  gap: var(--lotte-acc-gap);
  margin-block: 1.5rem 2rem;
}

/* Ueberschrift des Accordion-Blocks */
.min-accordion__headline {
  font-family: var(--min-font-heading, inherit);
  color: var(--lotte-acc-text);
  margin-block-end: 1rem;
}

/* Einzelnes Panel (das <details>-Element) — geschlossener Grundzustand */
.min-accordion__item {
  border: 1px solid var(--lotte-acc-border);
  border-radius: var(--lotte-acc-radius);
  background: var(--lotte-acc-bg);
  overflow: hidden;
}

/* Trigger (das <summary>-Element) */
.min-accordion__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: var(--lotte-acc-pad-y) var(--lotte-acc-pad-x);
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--lotte-acc-text);
  background: transparent;
  transition: background-color var(--lotte-acc-transition),
              color var(--lotte-acc-transition);
}

/* Native Disclosure-Marker entfernen (Chevron uebernimmt die Anzeige) */
.min-accordion__header::-webkit-details-marker { display: none; }
.min-accordion__header::marker { content: ""; }

.min-accordion__header:hover {
  background: var(--lotte-acc-hover-fill);
}

/* Tastatur-Fokus deutlich sichtbar (WAI: Fokus ist Pflicht) */
.min-accordion__item summary:focus-visible,
.min-accordion__header:focus-visible {
  outline: 3px solid var(--min-focus, color-mix(in srgb, var(--lotte-acc-primary) 50%, transparent));
  outline-offset: -3px;
}

.min-accordion__title {
  font-size: var(--min-font-lg, 1.0625rem);
  line-height: 1.35;
}

/* --------------------------------------------------------------------------
 * GEOEFFNETER ZUSTAND — eigener Fill/State (Kernforderung Monita/Brief 817)
 * -------------------------------------------------------------------------- */
.min-accordion__item[open] {
  border-color: color-mix(in srgb, var(--lotte-acc-primary) 35%, var(--lotte-acc-border));
}

.min-accordion__item[open] .min-accordion__header {
  background: var(--lotte-acc-open-fill);
  /* Akzentbalken links signalisiert den aktiven Zustand auch unabhaengig von Farbe */
  box-shadow: inset 4px 0 0 0 var(--lotte-acc-accent);
  color: var(--lotte-acc-primary);
}

.min-accordion__item[open] .min-accordion__title {
  font-weight: 700;
}

/* --------------------------------------------------------------------------
 * ICON — Inline-SVG-Chevron, das das Template ausgibt (kein --chevron-Pseudo)
 * -------------------------------------------------------------------------- */
.min-accordion__icon {
  flex-shrink: 0;
  display: inline-flex;
  color: var(--lotte-acc-primary);
}

.min-accordion__icon-svg,
.min-accordion__icon svg {
  width: 1.25rem;
  height: 1.25rem;
  transition: transform var(--lotte-acc-transition);
}

.min-accordion__item[open] .min-accordion__icon-svg,
.min-accordion__item[open] .min-accordion__icon svg {
  transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
 * PANEL-INHALT — Padding (Template nutzt ce-accordion__body, Framework stylt
 * ce-accordion__content -> ohne diese Regel kein Innenabstand)
 * -------------------------------------------------------------------------- */
.min-accordion__content,
.min-accordion__item > .ce-accordion__body {
  padding: 0 var(--lotte-acc-pad-x) var(--lotte-acc-pad-y);
  color: var(--lotte-acc-text);
}

.min-accordion__content-inner > *:last-child { margin-block-end: 0; }

/* --------------------------------------------------------------------------
 * VARIANTEN (Backend-Feld accordionStyle -> min-accordion--*)
 * -------------------------------------------------------------------------- */
.min-accordion--bordered .min-accordion__item {
  border-width: 1px;
}

.min-accordion--boxed .min-accordion__item {
  border-color: transparent;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--lotte-acc-text) 12%, transparent);
}
.min-accordion--boxed .min-accordion__item[open] {
  box-shadow: 0 2px 8px color-mix(in srgb, var(--lotte-acc-primary) 18%, transparent);
}

/* --------------------------------------------------------------------------
 * REDUCED MOTION & FORCED COLORS (Barrierefreiheit)
 * -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .min-accordion__header,
  .min-accordion__icon-svg,
  .min-accordion__icon svg { transition: none; }
}

@media (forced-colors: active) {
  /* In High-Contrast-Modi werden Hintergruende ignoriert: Border traegt den State */
  .min-accordion__item[open] {
    border-width: 2px;
    border-color: Highlight;
  }
  .min-accordion__item[open] .min-accordion__header { box-shadow: none; }
}