/*
  FAQ-Accordion: natives <details>/<summary>, kein JS noetig. Faerbung/Radien
  ausschliesslich ueber System-Rollen (--farbe-*, --radius-*, --shadow-*), kein
  markenspezifischer Wert -- guardlane-tauglich.

  Aufbau (Container-Muster wie szene-textplatte/bildbuehne): die AEUSSERE Section
  traegt nur die Flaechenfarbe (.vollbreite-flaeche), das Kind
  .faq-accordion__inhalt (.vollbreite-flaeche__inhalt) liefert max-width und
  Seiten-Gutter. Fehlte dieses Kind, lief der Block vorher randlos bis an den
  Viewport-Rand.

  Gewicht nach Rolle: geschlossene Fragen sind leise Listenzeilen (nur Haarlinie),
  die GEOEFFNETE Frage wird zur gehobenen Karte (Flaeche, Rand, Schatten,
  Akzent-Kante). Breit: Titel steht als sticky Spalte links, die Liste rechts
  (asymmetrisch); schmal: Titel ueber der Liste.

  'hintergrund' schaltet die Section zwischen --farbe-grund (white) und
  --farbe-flaeche (gray); die geoeffnete Karte nimmt jeweils die Gegenfarbe.
*/@layer komponenten{.faq-accordion{--faq-karte:var(--farbe-flaeche);padding-block:clamp(3rem, 2rem + 5vw, 6rem);background:var(--farbe-grund);color:var(--farbe-text)}.faq-accordion[data-hintergrund="gray"]{--faq-karte:var(--farbe-grund);background:var(--farbe-flaeche)}.faq-accordion__inhalt{container:faq/inline-size}.faq-accordion__rahmen{display:grid;gap:var(--space-8) var(--space-12);align-items:start}/* Kopf: Titel plus grosses, stilles Fragezeichen als Markenmotiv. */.faq-accordion__kopf{position:relative}.faq-accordion__kopf::after{content:'?';display:none;margin-block-start:var(--space-4);font-family:var(--font-display);font-style:italic;font-weight:var(--weight-normal);font-size:clamp(6rem, 10cqi, 11rem);line-height:0.8;color:color-mix(in oklch, var(--farbe-akzent) 16%, transparent);pointer-events:none;user-select:none}.faq-accordion__titel{max-width:16ch;font-family:var(--font-display);font-optical-sizing:auto;font-size:var(--text-3xl);font-weight:var(--weight-normal);line-height:var(--leading-tight);text-wrap:balance;color:var(--farbe-text)}.faq-accordion__koerper{min-width:0;max-width:52rem}.faq-accordion__liste{display:flex;flex-direction:column;gap:var(--space-1);border-block-start:1px solid var(--farbe-linie-stark);padding-block-start:var(--space-1)}/* Themen-Gruppierung -- optional (Feld 'gruppen'). */.faq-accordion__gruppe + .faq-accordion__gruppe{margin-block-start:var(--space-12)}.faq-accordion__gruppen-titel{display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-sans);font-size:var(--text-xs);font-weight:var(--weight-semibold);text-transform:uppercase;letter-spacing:var(--tracking-widest);color:var(--farbe-akzent, var(--farbe-text-gedaempft));margin-block-end:var(--space-3)}.faq-accordion__gruppen-icon{display:inline-flex;width:1.15rem;height:1.15rem;flex-shrink:0}.faq-accordion__gruppen-icon svg{width:100%;height:100%;display:block}/* Geschlossen: leise Zeile. Der transparente Rand reserviert den Platz, den die
     geoeffnete Karte braucht -- kein Springen beim Aufklappen. */.faq-accordion__item{interpolate-size:allow-keywords;border:1px solid transparent;border-block-end-color:var(--farbe-linie);border-radius:var(--radius-xl);background:transparent;overflow:clip;transition:background-color var(--transition-base),border-color var(--transition-base),box-shadow var(--transition-base)}/* Geoeffnet: gehobene Karte mit Akzent-Kante und Schatten. */.faq-accordion__item[open]{background:radial-gradient(120% 90% at 100% 0%, color-mix(in oklch, var(--farbe-akzent) 8%, transparent), transparent 60%),var(--faq-karte);border-color:var(--farbe-linie);border-block-start:3px solid var(--farbe-akzent);border-radius:var(--radius-xl) var(--radius-xl) var(--radius-sm) var(--radius-xl);box-shadow:var(--shadow-lg)}.faq-accordion__frage{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);min-height:3.5rem;padding:var(--space-4) var(--space-3) var(--space-4) var(--space-4);font-size:var(--text-lg);font-weight:var(--weight-medium);line-height:var(--leading-snug);color:var(--farbe-text);cursor:pointer;list-style:none;user-select:none;transition:color var(--transition-fast),background-color var(--transition-fast),padding var(--transition-base)}/* Chrome/Safari zeichnen bei list-style:none trotzdem einen eigenen Marker. */.faq-accordion__frage::-webkit-details-marker{display:none}.faq-accordion__frage::marker{content:''}.faq-accordion__item:not([open]) .faq-accordion__frage:hover{background:color-mix(in oklch, var(--farbe-akzent) 6%, transparent);color:var(--farbe-akzent)}.faq-accordion__item[open] .faq-accordion__frage{font-weight:var(--weight-semibold);padding-block-end:var(--space-3)}.faq-accordion__frage:focus-visible{outline:2px solid var(--farbe-fokus);outline-offset:-2px;border-radius:var(--radius-lg)}.faq-accordion__frage-text{flex:1;text-wrap:pretty}/* Pfeil: Kreis, der sich beim Oeffnen in Akzentfarbe fuellt und dreht. */.faq-accordion__pfeil{flex-shrink:0;display:grid;place-items:center;width:2.25rem;height:2.25rem;border:1px solid var(--farbe-linie-stark);border-radius:var(--radius-full);color:var(--farbe-text-gedaempft);transition:transform var(--transition-base),background-color var(--transition-base),border-color var(--transition-base),color var(--transition-base)}.faq-accordion__pfeil svg{width:1rem;height:1rem;display:block}.faq-accordion__frage:hover .faq-accordion__pfeil{border-color:var(--farbe-akzent);color:var(--farbe-akzent)}.faq-accordion__item[open] .faq-accordion__pfeil{transform:rotate(180deg);background:var(--farbe-akzent);border-color:var(--farbe-akzent);color:var(--farbe-auf-akzent, var(--farbe-grund))}.faq-accordion__antwort{padding:var(--space-1) var(--space-4) var(--space-6)}.faq-accordion__antwort p{max-width:65ch;font-size:var(--text-base);line-height:var(--leading-relaxed);color:var(--farbe-text-gedaempft);text-wrap:pretty}/* Aufklappen: Hoehe gleitet (wo ::details-content unterstuetzt wird), die
     Antwort blendet zusaetzlich ein -- zwei Bewegungsarten, beide abschaltbar. */@media (prefers-reduced-motion: no-preference){@supports selector(::details-content){.faq-accordion__item::details-content{block-size:0;overflow-y:clip;transition:block-size var(--transition-base),content-visibility var(--transition-base) allow-discrete}.faq-accordion__item[open]::details-content{block-size:auto}}.faq-accordion__item[open] .faq-accordion__antwort{animation:faq-einblenden 380ms cubic-bezier(0.22, 0.8, 0.3, 1) both}.faq-accordion__item:not([open]) .faq-accordion__frage:hover .faq-accordion__pfeil{transform:translateY(2px)}}@keyframes faq-einblenden{from{opacity:0;transform:translateY(-0.4rem)}to{opacity:1;transform:none}}@media (prefers-reduced-motion: reduce){.faq-accordion__item,.faq-accordion__frage,.faq-accordion__pfeil{transition:none}}/* Breit: Titel als sticky Spalte links, Fragen rechts. */@container faq (min-width: 56rem){.faq-accordion__rahmen{grid-template-columns:minmax(14rem, 5fr) minmax(0, 8fr)}.faq-accordion[data-ohne-titel] .faq-accordion__rahmen{grid-template-columns:minmax(0, 1fr)}.faq-accordion__kopf{position:sticky;top:calc(var(--space-16) + var(--space-8))}.faq-accordion__kopf::after{display:block}.faq-accordion__titel{font-size:var(--text-4xl)}.faq-accordion:not([data-ohne-titel]) .faq-accordion__koerper{max-width:none}}}