/* ========================================================================== woogency FAQ — accordion Fassung für nonprofitwelt.de, 2026-09-20 (TCK-0187) Ziel: die Shortcode-Ausgabe sieht aus wie der Elementor nested-accordion, den sie ersetzt (Element 07e7c97 auf Seite 1226). Die Vorgabe las sich bisher: --accordion-color: var(--fs-color-primary); --text-color: #fff; `--fs-color-primary` ist eine FLATSOME-Variable. Flatsome läuft auf kratom.digital, von wo dieses Plugin stammt; hier gibt es sie nicht. Damit zerfiel jede davon abgeleitete Farbe, auch das `hsl(from var(--accordion-color) h s calc(l * 0.7))` für Hover und Offen — das war die Ursache des blassen Grüns. Beide Variablen fallen jetzt über die Elementor-Globals auf einen Hex zurück. `--fs-color-primary` bleibt die erste Wahl, damit die Datei auf einer Flatsome-Seite unverändert aussieht. Gemessene Zielwerte (Element 07e7c97 und post-34.css, 20.09.2026): Kartenfläche --e-global-color-faed90c #F8FAF8 Rand --e-global-color-fc4fd33 #D4EDE5, 1px, Radius 12px Polsterung 12px; Inhalt 0 12 12; Abstand zwischen Karten 12px Frage-Farbe --e-global-color-50d4376 #213233 Frage-Schrift Source Serif 4, 500, 1.4em Zeichen --e-global-color-fb40664 #6AAF9B Hover/offen --e-global-color-674e600 #2D8670, 1.2rem SCHRIFTGRÖSSE DER FRAGE — bitte lesen, hier steckt ein Defekt: Die Kette am Elementor-Aufklapper, gemessen 2026-09-20: 1. `widget-nested-accordion.min.css` setzt den Standard `--n-accordion-title-font-size: 20px` auf `.elementor-widget-n-accordion`. 2. `post-1226.css` überschreibt ihn am Element 07e7c97 mit `--n-accordion-title-font-size: 1,75rem` — mit DEZIMALKOMMA. 3. `.e-n-accordion-item-title-text { font-size: var(…) }` setzt das ein. `font-size: 1,75rem` ist beim Berechnen ungültig, die Eigenschaft wird `unset`, und weil font-size vererbt wird, ERBT die Frage die Größe des Elternelements — Fließtextgröße. Die Frage rendert dort also weder in 20px (Standard) noch in 28px (offensichtliche Absicht), sondern in Fließtextgröße. Der Wert `1,75rem` steht in KEINER Widget-Einstellung, nicht im Kit und in keinem `_elementor_data`; er entsteht erst bei der CSS-Erzeugung. Am Bildschirm gemessen (Font-Inspektor, 2026-09-20), Elementor-Aufklapper: Source Serif 4 · 500 · 16px · Zeilenhöhe 22px · rgb(33,50,51) Diese Datei übernimmt genau diese Werte. Das ist bewusst die Angleichung an den IST-Zustand — 16px ist die geerbte Fließtextgröße, nicht die Absicht. SOBALD der Elementor-Wert repariert ist, gehören beide auf dieselbe Zahl — 20px (Widget-Standard) oder 28px (Absicht). Dann hier `--title-size` und `--title-line-height` mitziehen. Zwei Stellen, beide hier oben. ZUM AUF/ZU-ZEICHEN: Die Vorfassung dieser Datei hat den Kreis selbst gezeichnet, weil das Markup nur ein leeres `` ausgab — eine Flatsome-Icon-Klasse ohne Schriftart auf dieser Seite. Seit dem 20.09. liefert `shortcode.php` zwei echte SVG mit (`e-fas-plus-circle` und `e-fas-minus-circle`, dieselben Pfade, die Elementor für das nested-accordion verwendet). Der gezeichnete Ring ist deshalb ENTFERNT — sonst stünden zwei Zeichen nebeneinander. Gestylt werden jetzt die SVG. Drei bewusste Abweichungen vom Original, auf Vorgabe MediaVista 20.09.2026: 1. Die Karte behält in JEDEM Zustand dieselbe Fläche. 2. Der Rand kommt aus der Palette, nicht aus der Hintergrundfarbe. 3. Ein Auf/Zu-Zeichen ist vorhanden und wechselt beim Öffnen. ========================================================================== */ .woogency-accordion { --accordion-color: var(--fs-color-primary, var(--e-global-color-faed90c, #F8FAF8)); --text-color: inherit; --title-color: var(--e-global-color-50d4376, #213233); --title-size: 16px; --title-line-height: 22px; --transition: 0.3s; --spacer: 12px; --radius: 12px; --border-width: 1px; --border-type: solid; --border-color: var(--e-global-color-fc4fd33, #D4EDE5); --icon-color: var(--e-global-color-fb40664, #6AAF9B); --icon-color-active: var(--e-global-color-674e600, #2D8670); --icon-size: 1.2rem; interpolate-size: allow-keywords; display: grid; gap: var(--spacer); details { overflow: hidden; border: var(--border-width) var(--border-type) var(--border-color); border-radius: var(--radius); background-color: var(--accordion-color); transition: border-color var(--transition); /* Eine Fläche in jedem Zustand — die Karte darf bei Hover, Fokus und im geöffneten Zustand die Farbe nicht wechseln. */ &:hover, &:focus, &:focus-within, &:open { background-color: var(--accordion-color); border-color: var(--border-color); } * { color: var(--text-color, currentColor); margin: 0; } } summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--spacer); padding: var(--spacer); /* Die Ersatzfamilie ist absichtlich `sans-serif` und nicht `serif`: das Kit gibt für den Elementor-Aufklapper ebenfalls `"Source Serif 4", sans-serif` aus. Solange der Webfont lädt, ist das ohne Wirkung — fällt er aus, sollen beide gleich aussehen. */ font-family: var(--e-global-typography-fc00610-font-family, "Source Serif 4"), sans-serif; font-size: var(--title-size); font-weight: var(--e-global-typography-fc00610-font-weight, 500); line-height: var(--title-line-height); color: var(--title-color); &::marker { content: ""; } &::-webkit-details-marker { display: none; } /* Falls irgendwo noch das alte, leere Flatsome-Icon steht. */ i { display: none; } /* Beide Zeichen liegen im Markup; sichtbar ist immer genau eines. `flex: 0 0 auto` verhindert, dass eine lange Frage das Zeichen zusammenquetscht. */ svg.e-font-icon-svg { flex: 0 0 auto; inline-size: var(--icon-size); block-size: var(--icon-size); fill: var(--icon-color); transition: fill var(--transition); } .e-fas-minus-circle { display: none; } } details[open] summary { .e-fas-plus-circle { display: none; } .e-fas-minus-circle { display: block; } } details:hover summary svg.e-font-icon-svg, details[open] summary svg.e-font-icon-svg { fill: var(--icon-color-active); } .woogency-accordion-content { > * { padding-block-end: var(--spacer); padding-inline: var(--spacer); } /* `* { margin: 0 }` weiter oben würde sonst eine mehrabsätzige Antwort zu einem Block zusammenlaufen lassen. */ p + p, ul, ol { margin-block-start: 0.75em; } ul:not([class]) li::before { background-color: currentColor; } } } /* Experimentelle Features nur wo unterstützt */ @supports (transition-behavior: allow-discrete) { .woogency-accordion details::details-content { block-size: 0; transition: block-size 0.3s, content-visibility 0.3s; transition-behavior: allow-discrete; } .woogency-accordion details[open]::details-content { block-size: auto; } /* Optional: Accordion-content-inner bei moderner Unterstützung nicht animieren */ .woogency-accordion .accordion-content-inner { max-height: none; overflow: visible; opacity: 1; transition: none; } }