/** * RKS Accordion Block – Stylesheet (style.css) * * Geladen im Editor (editorStyle) UND im Frontend (style) via block.json. * * Design-Sprache: konsistent mit dem RKS-Theme. * • Nur border-bottom pro Item, kein border-top am Container * • Überschrift: GTSectra / 25 px / lh 1.2 * • Inhalt: erbt body (MartianMono / 15 px / lh 1.6) * • Chevron-SVG dreht sich beim Öffnen * • Im Editor: Überschrift visuell auf --size-serif-lg skaliert */ /* --------------------------------------------------------------------------- * Äußerer Container (Ebene 1) * Kein border-top – nur die Items tragen ihre untere Trennlinie. * --------------------------------------------------------------------------- */ .rks-accordion { display: flex; flex-direction: column; width: 100%; margin-bottom: var(--space-xl); } /* --------------------------------------------------------------------------- * Einzelnes Accordion-Element * Trennlinie unten – wie .border--bottom--no_last_border im Theme. * --------------------------------------------------------------------------- */ .rks-accordion__item { border-bottom: 1px solid var( --neutral-900 ); } /* --------------------------------------------------------------------------- * Überschriften-Button (Ebene 2) * * GTSectra / 25 px / lh 1.2 – identisch zu .text_serif_lg und .header__nav_main. * --------------------------------------------------------------------------- */ .rks-accordion__header { /* Button-Reset */ appearance: none; -webkit-appearance: none; border: none; background: none; margin: 0; /* Layout */ display: flex; align-items: center; justify-content: space-between; gap: var( --space-md ); width: 100%; padding-block: var( --space-sm ); padding-inline: 0; cursor: pointer; /* Typografie */ font-family: var( --font-typeface-headline ); /* GTSectra */ font-size: var( --size-serif-xl ); /* 25 px */ line-height: var( --lineheight-text-serif ); /* 1.2 */ color: var( --neutral-900 ); text-align: left; transition: opacity 0.15s ease; } .rks-accordion__header:hover { opacity: 1; } .rks-accordion__header:focus-visible { outline: 2px solid var( --neutral-900 ); outline-offset: 2px; border-radius: 2px; } /* --------------------------------------------------------------------------- * Chevron-Icon * * Das SVG zeigt den Pfeil nach unten (geschlossen). * Beim Öffnen dreht es sich um 180° → Pfeil zeigt nach oben. * --------------------------------------------------------------------------- */ .rks-accordion__icon { flex-shrink: 0; display: flex; align-items: center; transition: transform 0.25s ease; } .rks-accordion__item--open .rks-accordion__icon { transform: rotate( 180deg ); } /* --------------------------------------------------------------------------- * Panel / Inhalt (Ebene 3) * * Kein font-size-Override → erbt body: * MartianMono / 15 px (--size-mono-sm) / lh 1.6 (--lineheight-text-mono) * --------------------------------------------------------------------------- */ /* Panel-Animation: max-height 0 → auto (JS berechnet exakte Höhe) */ .rks-accordion__panel { display: block; max-height: 0; opacity: 0; overflow: hidden; transition: max-height var( --accordion-duration, 0.3s ) ease, opacity var( --accordion-duration, 0.3s ) ease; } /* Wenn das Panel offen ist (Klasse --open vorhanden) → opacity 1 */ .rks-accordion__panel--open { opacity: 1; } .rks-accordion__body { padding-block-end: var( --space-md ); } .rks-accordion__body > :first-child { margin-top: 0; } .rks-accordion__body > :last-child { margin-bottom: 0; } .rks-accordion__body p { font-family: var( --font-typeface-copy ); font-size: var( --size-mono-sm ); line-height: var( --lineheight-text-mono ); margin-bottom: var( --space-md ); } .rks-accordion__body p:last-child { margin-bottom: 0; } /* --------------------------------------------------------------------------- * Titel-Heading (H2 / H3) im Accordion-Inhalt * * Max-Width auf 100% setzen, damit sie nicht von der globalen Regel * .standard_template_content_area h2/h3 überschrieben werden. * --------------------------------------------------------------------------- */ .rks-accordion__body h2, .rks-accordion__body h3 { max-width: 95% !important; } /* Falls der Inhalt direkt in .standard_template_content_area steht */ .standard_template_content_area .rks-accordion__panel .rks-accordion__body h2, .standard_template_content_area .rks-accordion__panel .rks-accordion__body h3 { max-width: 95% !important; } /* Zusätzliche Spezifität für verschachtelte InnerBlocks-Container */ .rks-accordion__body :where(h2, h3), .rks-accordion__body > div:has(> h2), .rks-accordion__body > div:has(> h3) { max-width: 95% !important; } /* --------------------------------------------------------------------------- * Titel-Heading (H2 / H3) im Accordion-Header * * Die Standard-Margins des Themes (h2: margin-top space-2xl, h3: margin-top * space-xl) UND die spezifischeren Regeln von .standard_template_content_area * h2 / h3 werden hier auf 0 gesetzt, damit beide Ebenen im Accordion * identisch dargestellt werden. Das umgebende .rks-accordion__header-Button * steuert den Innenabstand via padding-block. * --------------------------------------------------------------------------- */ .rks-accordion__title > h2, .rks-accordion__title > h3, .rks-accordion .rks-accordion__title > h2, .rks-accordion .rks-accordion__title > h3, .rks-accordion__header > h2, .rks-accordion__header > h3, .rks-accordion__header > span > h2, .rks-accordion__header > span > h3, .standard_template_content_area .rks-accordion__title > h2, .standard_template_content_area .rks-accordion__title > h3, .standard_template_content_area .rks-accordion__header > h2, .standard_template_content_area .rks-accordion__header > h3, .standard_template_content_area .rks-accordion__header > span > h2, .standard_template_content_area .rks-accordion__header > span > h3 { margin-top: 0 !important; margin-bottom: 0 !important; max-width: 95% !important; } /* Zusätzliche Regel für den Header-Kontext innerhalb von standard_template_content_area */ .standard_template_content_area .rks-accordion__title h2, .standard_template_content_area .rks-accordion__title h3 { max-width: 95% !important; } /* --------------------------------------------------------------------------- * Editor-spezifische Styles * * Im Gutenberg-Editor trägt der Wrapper die Klasse .block-editor-block-list__block. * Damit die Darstellung im Backend genauso aussieht wie im Frontend, * werden Button-Standardstile entfernt und die Schriftgröße explizit gesetzt. * --------------------------------------------------------------------------- */ /* Button-Reset für den Header – entfernt Browser-Standardstile für