/* * Block: FAQ * * Figma: Trainings_und_Keynotes_FAQ (3001:1294), 1321 x 1197. * Ueberschrift links, Akkordeon rechts. Die Eintraege sind graue Kaesten mit * schwarzer Kontur; die geoeffnete Antwort steht auf weiss. * * Bootstrap bringt das Akkordeon mit. Hier werden nur seine Variablen * umgesetzt - das ist stabiler als eigene Regeln, die gegen Bootstraps * Spezifitaet ankaempfen muessten. */ .dc-faq { } .dc-faq__raster { display: grid; /* * Figma (Individuelles_Coaching_FAQ, 3003:2263): Ueberschrift links, * die Fragen ab 670 mit 650 Breite - also zwei gleiche Spalten mit 20 * Luecke. Mit der Blockluecke von 56 waren beide Spalten 18 zu schmal. */ grid-template-columns: 1fr 1fr; column-gap: 20px; /* Figma */ row-gap: var(--dc-abstand-block); align-items: start; } .dc-faq__titel { font-size: var(--dc-fs-h2); line-height: var(--dc-lh-h2); font-weight: var(--dc-gewicht-bold); margin: 0; text-wrap: balance; } /* --------------------------------------------------------------------------- * Akkordeon * --------------------------------------------------------------------------- */ /* * .accordion mitschreiben, damit die Variablen greifen. * * WordPress schreibt das Block-CSS in den , noch vor * bootstrap.min.css. Bei gleicher Spezifitaet gewinnt sonst * Bootstrap - die --bs-accordion-* Werte unten haetten keine * Wirkung und der offene Kopf bliebe blau. */ .dc-faq__liste.accordion { --bs-accordion-bg: transparent; --bs-accordion-border-color: var(--dc-schwarz); --bs-accordion-border-width: 1px; --bs-accordion-border-radius: 0; --bs-accordion-inner-border-radius: 0; --bs-accordion-btn-color: var(--dc-schwarz); --bs-accordion-btn-bg: var(--dc-grau); --bs-accordion-btn-padding-x: 24px; --bs-accordion-btn-padding-y: 24px; --bs-accordion-btn-focus-box-shadow: none; --bs-accordion-active-color: var(--dc-schwarz); --bs-accordion-active-bg: var(--dc-weiss); --bs-accordion-body-padding-x: 24px; --bs-accordion-body-padding-y: 24px; display: flex; flex-direction: column; gap: 12px; /* Figma: die Kaesten stehen einzeln, nicht aneinander */ } /* * DER GANZE AUFGEKLAPPTE KASTEN IST WEISS, NICHT NUR SEIN KOPF. * * --bs-accordion-active-bg faerbt bei Bootstrap ausschliesslich den Knopf. * Der Koerper darunter haengt an --bs-accordion-bg, und das steht oben * bewusst auf transparent - der aufgeklappte Teil unter der Ueberschrift * blieb deshalb ungefaerbt, waehrend der Kopf schon weiss war. * * Nachgesehen im Entwurf (FAQ zu unseren Trainings & Keynotes): der offene * Kasten ist durchgehend weiss, die geschlossenen bleiben grau. * * Gefaerbt wird der Klappbereich und nicht der ganze Eintrag: Der Eintrag * traegt auch die geschlossenen Zustaende, und die sollen grau bleiben. */ .dc-faq__liste .accordion-collapse.show { background-color: var(--dc-weiss); } /* * DER KASTEN WIRD WEISS, BEVOR DER INHALT ERSCHEINT (DC-27). * * Der Kunde am 11.09.2026: "Wenn das Element ausgeklappt wird, erscheint * erst das Logo und dann wird der Hintergrund weiss. Das sieht seltsam * aus, wenn das Logo einen weissen Hintergrund hat." * * Ursache ist die Reihenfolge, in der Bootstrap seine Klassen setzt: Beim * Aufklappen bekommt der Koerper zuerst ".collapsing" und faehrt seine * Hoehe hoch - ".show" kommt erst, wenn die Animation FERTIG ist. Eine * Regel an ".show" faerbt also erst zum Schluss, und die 350 Millisekunden * davor laeuft der Inhalt ueber den grauen Grund. * * Am Knopf geht Bootstrap umgekehrt vor: ".collapsed" faellt sofort beim * Klick weg und kommt sofort beim Schliessen zurueck. Diese Klasse taugt * deshalb als Schalter fuer den ganzen Kasten - in beide Richtungen ohne * Verzoegerung. */ .dc-faq__eintrag.accordion-item:has( .accordion-button:not(.collapsed) ) { background-color: var(--dc-weiss); } /* * ZUM NACHMESSEN: DIE FARBEN LAUFEN UEBER EINEN UEBERGANG. * * Bootstrap setzt beim Klick sofort die Klasse .collapsed, faerbt den * Hintergrund aber animiert (--bs-accordion-transition). Waehrend der * Animation stimmen Klasse und berechnete Farbe deshalb NICHT ueberein. * * Wer im Browser klickt und im selben Durchgang getComputedStyle liest, * misst einen Zwischenstand und haelt das leicht fuer einen Fehler - genau * das ist am 08.09.2026 passiert und hat eine halbe Stunde Fehlersuche * gekostet. Nach Ablauf der Animation stimmt alles. * * Also: klicken, Animation abwarten, dann messen. */ /* * DER OBERE STRICH. * * Bootstrap baut das Akkordeon als EINEN durchgehenden Stapel und nimmt * jedem Kasten ausser dem ersten den oberen Rand: * * .accordion-item:not(:first-of-type) { border-top: 0 } * * Diese Regel hat zwei Klassen Spezifitaet und laedt spaeter als das * Block-CSS - eine einzelne Klasse hier verliert dagegen. Ab dem zweiten * Eintrag fehlte deshalb oben der Strich, und die Kaesten sahen im * zugeklappten Zustand offen aus. * * Der Entwurf zeigt einzelne, ringsum umrandete Kaesten mit Abstand * dazwischen. Deshalb wird die Bootstrap-Regel hier ausdruecklich * ueberschrieben - mit derselben Spezifitaet und einmal mehr. */ .dc-faq__eintrag.accordion-item, .dc-faq__liste .accordion-item:not(:first-of-type) { border: var(--dc-kontur); } .dc-faq__frage { margin: 0; } .dc-faq__liste .accordion-button { font-family: inherit; font-size: var(--dc-fs-text); line-height: var(--dc-lh-text); font-weight: var(--dc-gewicht-bold); gap: var(--dc-abstand-element); } /* * Bootstrap nutzt ein Hintergrundbild als Pfeil. Der Entwurf zeigt ein Plus, * das im geoeffneten Zustand zum Kreuz wird. Deshalb das Bild abschalten und * das Zeichen per ::after setzen. */ /* * .accordion mitschreiben - sonst bleibt Bootstraps Pfeil stehen. * * Bootstrap setzt den Pfeil zweimal: einmal auf .accordion-button::after und * einmal auf .accordion-button:not(.collapsed)::after. Die zweite Regel hat * dieselbe Spezifitaet wie ".dc-faq__liste .accordion-button::after" und laedt * spaeter - im AUFGEKLAPPTEN Zustand standen deshalb zwei Zeichen * uebereinander, Bootstraps Pfeil und unser Kreuz. */ .dc-faq__liste.accordion .accordion-button::after { content: "+"; background-image: none; width: auto; height: auto; font-size: 24px; line-height: 1; transform: none; flex-shrink: 0; } .dc-faq__liste.accordion .accordion-button:not(.collapsed)::after { content: "\00D7"; background-image: none; /* Multiplikationszeichen, optisch ein Kreuz */ } .dc-faq__liste .accordion-button:not(.collapsed) { box-shadow: none; } .dc-faq__antwort p { margin: 0 0 var(--dc-abstand-absatz); } .dc-faq__antwort p:last-child { margin-bottom: 0; } .dc-faq__antwort a { color: var(--dc-schwarz); text-decoration: underline; } /* --------------------------------------------------------------------------- * Kleine Bildschirme * --------------------------------------------------------------------------- */ @media (max-width: 991.98px) { .dc-faq__raster { grid-template-columns: 1fr; gap: var(--dc-abstand-element); } .dc-faq__liste.accordion { --bs-accordion-btn-padding-x: 16px; --bs-accordion-btn-padding-y: 16px; --bs-accordion-body-padding-x: 16px; --bs-accordion-body-padding-y: 16px; } }