/* * Block: Akkordeon * * Figma: Ueber uns (1052:443), Abschnitte Netzwerk, Mission, Pro bono. * Bei 1320 Inhaltsbreite steht die Ueberschrift auf 382, das Akkordeon * ab 452 auf 878 - also ein Drittel zu zwei Dritteln, nicht halbe/halbe. * * Das Auf- und Zuklappen kommt von Bootstrap. Hier werden nur seine * Variablen umgesetzt; eigene Regeln muessten sonst gegen Bootstraps * Spezifitaet ankaempfen. Gleiches Vorgehen wie im FAQ-Block. */ .dc-akkordeon { padding-block: var(--dc-abstand-section); } .dc-akkordeon__raster { display: grid; /* * Figma (Ueber_uns_Unser_netzwerk, 3005:601): Ueberschrift 427, die * Eintraege ab 447 mit 873 Breite. Mit "1fr 2fr" und der Blockluecke * war die Ueberschrift 421 und die Liste 843. */ grid-template-columns: 427fr 873fr; /* Figma */ column-gap: 20px; /* Figma */ row-gap: var(--dc-abstand-block); align-items: start; } /* * Rasterspalten duerfen schrumpfen. * * Ohne min-width:0 bekommt eine Grid-Spalte als Mindestbreite die Breite * ihres laengsten Wortes. Auf schmalen Schirmen sprengt das die Seite. */ .dc-akkordeon__raster > * { min-width: 0; } .dc-akkordeon__titel { font-size: var(--dc-fs-h2); line-height: var(--dc-lh-h2); font-weight: var(--dc-gewicht-bold); margin: 0; text-wrap: balance; hyphens: auto; } /* --------------------------------------------------------------------------- * Einleitung, Icon-Raster, Button * --------------------------------------------------------------------------- */ /* * DIE EINLEITUNG STEHT FETT (DC-39). * * Gemeldet als "Einstiegstext bold". Nachgesehen im Entwurf * (Fortbildungen_und_e_Learnings_aufbau, 3001:1891): Der Text ueber den * aufklappbaren Kaesten ist fett gesetzt, der Text IN den Kaesten nicht. * Dieselbe Rolle wie der Vorspann im Block text-zweispaltig, der es * ebenso haelt. */ .dc-akkordeon__einleitung { font-weight: var(--dc-gewicht-bold); } .dc-akkordeon__einleitung p { margin: 0 0 var(--dc-abstand-absatz); } .dc-akkordeon__einleitung p:last-child { margin-bottom: 0; } .dc-akkordeon__einleitung a { color: var(--dc-schwarz); text-decoration: underline; } /* * Icon-Raster: im Entwurf vier Kacheln pro Zeile (die SDG-Symbole). * auto-fill statt fester Spaltenzahl, damit auch drei oder fuenf Icons * ohne Extraregel sauber stehen. */ /* * Figma 1536:6467: Vier Kacheln je Zeile, 24 Abstand. Auf den 873 der * Spalte wird jede Kachel dadurch 200 breit - genau die Groesse im Entwurf. * * ACHTUNG, HIER STAND ETWAS ANDERES: repeat(auto-fill, minmax(140px, 1fr)) * ergab fuenf Kacheln zu 159 in der Zeile. Der Entwurf zeigt vier. */ .dc-akkordeon__icons { display: grid; grid-template-columns: repeat(4, 1fr); /* Figma */ gap: 24px; /* Figma */ list-style: none; margin: var(--dc-abstand-element) 0 0; padding: 0; } .dc-akkordeon__icon img { display: block; width: 100%; height: auto; } .dc-akkordeon__aktion { margin: var(--dc-abstand-element) 0 0; } /* --------------------------------------------------------------------------- * 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-akkordeon__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); /* Figma: zu = grau, offen = weiss */ /* * 29, nicht 24: Im Entwurf (3004:2350) steht der Kasten bei x=447, * und Titel (1575:833), Fliesstext (1575:837) und Symbol (1575:845) * beginnen alle bei x=477 - also 30 von der Aussenkante. Der Rahmen * ist 1 breit, bleiben 29 Polsterung. Die 24 waren geschaetzt. */ --bs-accordion-btn-padding-x: 29px; /* * 28, nicht 20: Der Entwurf zeigt die eingeklappte Zeile 82 hoch * (Agentur_und_Meldestelle_Agenturleistungen, Rechteck_eingeklappt). * Nachgemessen ergeben 28 oben und unten genau diese 82 - der Rahmen * zaehlt mit. */ --bs-accordion-btn-padding-y: 28px; /* Figma */ --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: 29px; /* wie oben, 1 Rahmen + 29 = 30 */ --bs-accordion-body-padding-y: 4px; display: flex; flex-direction: column; gap: 12px; /* Figma: die Kaesten stehen einzeln, nicht aneinander */ margin-block-start: var(--dc-abstand-element); } /* Jeder Eintrag ist ein eigener Kasten, kein durchgehender Stapel. */ /* * DER AUFGEKLAPPTE KASTEN IST WEISS - UND ZWAR GANZ, NICHT NUR SEIN KOPF. * * Zwei Regeln, weil --bs-accordion-active-bg bei Bootstrap ausschliesslich * den KNOPF faerbt. Der Koerper haengt an --bs-accordion-bg, und das steht * oben bewusst auf transparent, damit die Kaesten einzeln mit Abstand * stehen koennen. Wer nur die eine Regel setzt, bekommt einen weissen Kopf * auf grauem Koerper. * * Am 09.09.2026 war der offene Zustand kurz ebenfalls grau. Der Kunde hat * das noch am selben Tag zurueckgenommen (DC-65): Der Farbwechsel ist das * Erkennungszeichen fuer "offen". * * Derselbe Fall in blocks/faq/style.css - dort nachziehen. */ .dc-akkordeon__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-akkordeon__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-akkordeon__eintrag.accordion-item, .dc-akkordeon__liste .accordion-item:not(:first-of-type) { border: var(--dc-kontur); } .dc-akkordeon__kopf { margin: 0; } .dc-akkordeon__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-akkordeon__liste .accordion-button::after" und laedt * spaeter - im AUFGEKLAPPTEN Zustand standen deshalb zwei Zeichen * uebereinander, Bootstraps Pfeil und unser Kreuz. */ .dc-akkordeon__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-akkordeon__liste.accordion .accordion-button:not(.collapsed)::after { content: "\00D7"; background-image: none; /* Multiplikationszeichen, optisch ein Kreuz */ } .dc-akkordeon__liste .accordion-button:not(.collapsed) { box-shadow: none; } /* Das Logo steht im Entwurf ueber dem Text, linksbuendig, hoechstens 200 breit. */ .dc-akkordeon__logo { margin: 0 0 var(--dc-abstand-element); } .dc-akkordeon__logo img { display: block; width: auto; max-width: 200px; height: auto; } /* * WEISSRAUM UNTER DEM TEXT (DC-65). * * Im Entwurf (Ueber_uns_Unser_netzwerk, 3005:601) endet der Text des * aufgeklappten Kastens bei 454 und der Kasten selbst bei 484 - darunter * liegen 30. An der Stage waren es 5. * * HIER STANDEN SCHON 24, SIE KAMEN NUR NIE AN. Bootstrap setzt * ".accordion-body { padding: ... }" mit derselben Spezifitaet (0,1,0) und * laedt NACH dem Block-CSS - bei Gleichstand gewinnt die spaetere Regel. * Gemessen wurden deshalb die 4 aus --bs-accordion-body-padding-y. Die * zusaetzliche Klasse davor hebt die Spezifitaet auf 0,2,0; siehe * FALLSTRICKE.md, "Block-CSS laedt vor Bootstrap". * * Warum nicht einfach --bs-accordion-body-padding-y hochsetzen: Die * Variable gilt oben UND unten. Oben sind 4 richtig - der Kopf bringt * seinen eigenen Innenabstand von 28 mit. */ .dc-akkordeon__liste .dc-akkordeon__koerper { padding-block-end: 30px; /* Figma 3005:601 */ } .dc-akkordeon__koerper p { margin: 0 0 var(--dc-abstand-absatz); } .dc-akkordeon__koerper p:last-child { margin-bottom: 0; } .dc-akkordeon__koerper a { color: var(--dc-schwarz); text-decoration: underline; } /* --------------------------------------------------------------------------- * Kleine Bildschirme * --------------------------------------------------------------------------- */ @media (max-width: 991.98px) { .dc-akkordeon__raster { grid-template-columns: 1fr; gap: var(--dc-abstand-element); } .dc-akkordeon__liste.accordion { --bs-accordion-btn-padding-x: 16px; --bs-accordion-btn-padding-y: 16px; --bs-accordion-body-padding-x: 16px; } /* Auch hier die zusaetzliche Klasse, siehe oben. */ .dc-akkordeon__liste .dc-akkordeon__koerper { padding-block-end: 20px; } /* Auf schmalen Schirmen waeren vier Kacheln je 60 breit. */ .dc-akkordeon__icons { grid-template-columns: repeat(2, 1fr); } } /* --------------------------------------------------------------------------- * Der eigene Aufruf am Fuss eines Eintrags * * Entwurf: Agentur_und_Meldestelle_Agenturleistungen (3004:2350). Der * aufgeklappte Kasten ist 873 breit und beginnt bei x=447; die Zeile darin: * * Icon 1575:845 x=477 -> 30 innen, 75 x 57 * Frage 1575:844 x=572 -> 125 innen, 340 breit, y=806 * Knopf 3004:2341 x=964 -> 517 innen, 275 x 50, y=804 * * Der Kasten endet bei y=881, die Zeile bei 854 - also 27 Luft darunter. * Frage und Knopf stehen auf gleicher Hoehe, deshalb align-items: center. * ------------------------------------------------------------------------ */ .dc-akkordeon__aufruf { display: flex; align-items: center; /* * Zwei verschiedene Abstaende, deshalb reicht ein gap nicht: * Symbol endet 105, Frage ab 125 -> 20. Frage endet 465, Knopf ab * 517 -> 52. Der gap deckt die 20 ab, den Rest holt der Knopf sich * unten selbst. 20 ist zugleich der Zeilenabstand beim Umbruch. */ gap: 20px; margin-top: 50px; /* Figma: Text endet 747, Zeile ab 797 */ flex-wrap: wrap; } .dc-akkordeon__symbol { margin: 0; flex: 0 0 75px; /* Figma: 75 x 57 */ max-width: 75px; } .dc-akkordeon__symbol img { display: block; width: 100%; height: auto; } .dc-akkordeon__frage { margin: 0; flex: 1 1 340px; /* Figma: 340 breit */ max-width: 340px; font-weight: var(--dc-gewicht-bold); } .dc-akkordeon__knopf { margin-inline-start: 32px; /* Figma: 52 zum Frageblock, 20 kommen aus dem gap */ flex: 0 0 auto; min-width: 275px; /* Figma */ text-align: center; } @media (max-width: 575.98px) { /* * Nebeneinander bleibt bis 575 lesbar; darunter braucht die Frage die * ganze Breite, sonst bricht sie auf zwei Woerter je Zeile um. Der * gap ist schon 20 - hier bleibt nur der Einzug des Knopfes zu * loeschen. */ .dc-akkordeon__frage { max-width: none; } .dc-akkordeon__knopf { margin-inline-start: 0; /* untereinander gibt es keinen Einzug */ width: 100%; min-width: 0; } }