<div id="accordion-breaker-72712-45474" class="accordion-breaker">
<div class="accordion-breaker__inner">
<div class="accordion-breaker__content">
<div class="accordion-breaker__headline">
<h2 class="headline headline--2"><span class="headline__text">Häufige Fragen und Antworten</span></h2>
</div>
<div class="accordion-breaker__accordions">
<div class="accordion-breaker__accordion">
<details class="accordion" id="accordion-breaker-72712-45474-accordion-1">
<summary class="accordion__summary has-underline">
<div class="accordion__summary-inner">
<span class="accordion__summary-text u-underline">Mehr anzeigen</span>
<svg class="icon icon--caret-down-alt accordion__summary-icon" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#caret-down-alt"></use>
</svg>
</div>
</summary>
<div class="accordion__content">
<div class="accordion__block">
<p class="paragraph">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>
</div>
<div class="accordion__block">
<picture class="image">
<img class="image__img" src="https://bildermangel.de/470x264/fe7c09/130f26.webp?text=+++S:+470x264@1x+++" width="470" height="264" alt="Das ist ein Platzhalter-Bild" loading="lazy" />
</picture>
</div>
<div class="accordion__block">
<p class="paragraph">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>
<p class="paragraph">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>
</div>
<div class="accordion__block">
<a class="button u-underline" href="#">Das ist ein Button</a>
</div>
</div>
</details>
</div>
<div class="accordion-breaker__accordion">
<details class="accordion" id="accordion-breaker-72712-45474-accordion-2">
<summary class="accordion__summary has-underline">
<div class="accordion__summary-inner">
<span class="accordion__summary-text u-underline">Mehr anzeigen</span>
<svg class="icon icon--caret-down-alt accordion__summary-icon" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#caret-down-alt"></use>
</svg>
</div>
</summary>
<div class="accordion__content">
<div class="accordion__block">
<p class="paragraph">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>
</div>
<div class="accordion__block">
<picture class="image">
<img class="image__img" src="https://bildermangel.de/470x264/fe7c09/130f26.webp?text=+++S:+470x264@1x+++" width="470" height="264" alt="Das ist ein Platzhalter-Bild" loading="lazy" />
</picture>
</div>
<div class="accordion__block">
<p class="paragraph">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>
<p class="paragraph">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>
</div>
<div class="accordion__block">
<a class="button u-underline" href="#">Das ist ein Button</a>
</div>
</div>
</details>
</div>
<div class="accordion-breaker__accordion">
<details class="accordion" id="accordion-breaker-72712-45474-accordion-3">
<summary class="accordion__summary has-underline">
<div class="accordion__summary-inner">
<span class="accordion__summary-text u-underline">Mehr anzeigen</span>
<svg class="icon icon--caret-down-alt accordion__summary-icon" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#caret-down-alt"></use>
</svg>
</div>
</summary>
<div class="accordion__content">
<div class="accordion__block">
<p class="paragraph">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>
</div>
<div class="accordion__block">
<picture class="image">
<img class="image__img" src="https://bildermangel.de/470x264/fe7c09/130f26.webp?text=+++S:+470x264@1x+++" width="470" height="264" alt="Das ist ein Platzhalter-Bild" loading="lazy" />
</picture>
</div>
<div class="accordion__block">
<p class="paragraph">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>
<p class="paragraph">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>
</div>
<div class="accordion__block">
<a class="button u-underline" href="#">Das ist ein Button</a>
</div>
</div>
</details>
</div>
<div class="accordion-breaker__accordion">
<details class="accordion" id="accordion-breaker-72712-45474-accordion-4">
<summary class="accordion__summary has-underline">
<div class="accordion__summary-inner">
<span class="accordion__summary-text u-underline">Mehr anzeigen</span>
<svg class="icon icon--caret-down-alt accordion__summary-icon" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#caret-down-alt"></use>
</svg>
</div>
</summary>
<div class="accordion__content">
<div class="accordion__block">
<p class="paragraph">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>
</div>
<div class="accordion__block">
<picture class="image">
<img class="image__img" src="https://bildermangel.de/470x264/fe7c09/130f26.webp?text=+++S:+470x264@1x+++" width="470" height="264" alt="Das ist ein Platzhalter-Bild" loading="lazy" />
</picture>
</div>
<div class="accordion__block">
<p class="paragraph">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>
<p class="paragraph">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>
</div>
<div class="accordion__block">
<a class="button u-underline" href="#">Das ist ein Button</a>
</div>
</div>
</details>
</div>
<div class="accordion-breaker__accordion">
<details class="accordion" id="accordion-breaker-72712-45474-accordion-5">
<summary class="accordion__summary has-underline">
<div class="accordion__summary-inner">
<span class="accordion__summary-text u-underline">Mehr anzeigen</span>
<svg class="icon icon--caret-down-alt accordion__summary-icon" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#caret-down-alt"></use>
</svg>
</div>
</summary>
<div class="accordion__content">
<div class="accordion__block">
<p class="paragraph">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>
</div>
<div class="accordion__block">
<picture class="image">
<img class="image__img" src="https://bildermangel.de/470x264/fe7c09/130f26.webp?text=+++S:+470x264@1x+++" width="470" height="264" alt="Das ist ein Platzhalter-Bild" loading="lazy" />
</picture>
</div>
<div class="accordion__block">
<p class="paragraph">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>
<p class="paragraph">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>
</div>
<div class="accordion__block">
<a class="button u-underline" href="#">Das ist ein Button</a>
</div>
</div>
</details>
</div>
<div class="accordion-breaker__accordion">
<details class="accordion" id="accordion-breaker-72712-45474-accordion-6">
<summary class="accordion__summary has-underline">
<div class="accordion__summary-inner">
<span class="accordion__summary-text u-underline">Mehr anzeigen</span>
<svg class="icon icon--caret-down-alt accordion__summary-icon" viewBox="0 0 200 200" aria-hidden="true">
<use xlink:href="/assets/icons/icons.3bafb6df0d.svg#caret-down-alt"></use>
</svg>
</div>
</summary>
<div class="accordion__content">
<div class="accordion__block">
<p class="paragraph">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>
</div>
<div class="accordion__block">
<picture class="image">
<img class="image__img" src="https://bildermangel.de/470x264/fe7c09/130f26.webp?text=+++S:+470x264@1x+++" width="470" height="264" alt="Das ist ein Platzhalter-Bild" loading="lazy" />
</picture>
</div>
<div class="accordion__block">
<p class="paragraph">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>
<p class="paragraph">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>
</div>
<div class="accordion__block">
<a class="button u-underline" href="#">Das ist ein Button</a>
</div>
</div>
</details>
</div>
</div>
<div class="accordion-breaker__button">
<a class="button u-underline" href="#">Mehr wissen</a>
</div>
</div>
<div class="accordion-breaker__image">
<picture class="image">
<img class="image__img" src="https://bildermangel.de/650x520/130f26/ffffff.webp" width="650" height="520" loading="lazy" role="presentation" />
</picture>
</div>
</div>
</div>
{% set id = id ??? html_id('accordion-breaker') -%}
<div {{ html_attributes({
id: id,
class: 'accordion-breaker',
}, attrs ?? {}) }}>
<div class="accordion-breaker__inner">
<div class="accordion-breaker__content">
{% if headline|default %}
<div class="accordion-breaker__headline">
{% include '@headline' with headline | merge({
level: 2,
size: 2,
}) only %}
</div>
{% endif %}
<div class="accordion-breaker__accordions">
{% for accordion in accordions %}
<div class="accordion-breaker__accordion">
{% include '@accordion' with {
id: "accordion-#{loop.index}" | namespaceInputId(id),
} | merge(accordion) only %}
</div>
{% endfor %}
</div>
{% if button|default %}
<div class="accordion-breaker__button">
{% include '@button' with button only %}
</div>
{% endif %}
</div>
{% if image|default %}
<div class="accordion-breaker__image">
{% include '@image' with image only %}
</div>
{% endif %}
</div>
</div>
{
"headline": {
"text": "Häufige Fragen und Antworten"
},
"accordions": [
{
"blocks": [
{
"content": "!twig\n\n{% apply componentize %}\n <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>\n{% endapply %}\n"
},
{
"content": "!twig\n\n{% include '@image' with {\n src: 'https://bildermangel.de/470x264/fe7c09/130f26.webp?text=+++S:+470x264@1x+++',\n width: 470,\n height: 264,\n alt: 'Das ist ein Platzhalter-Bild',\n} only %}\n"
},
{
"content": "!twig\n\n{% apply componentize %}\n <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>\n <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>\n{% endapply %}\n"
},
{
"content": "!twig\n\n{% include '@button' with {\n text: 'Das ist ein Button',\n link: '#',\n} only %}\n"
}
]
},
{
"blocks": [
{
"content": "!twig\n\n{% apply componentize %}\n <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>\n{% endapply %}\n"
},
{
"content": "!twig\n\n{% include '@image' with {\n src: 'https://bildermangel.de/470x264/fe7c09/130f26.webp?text=+++S:+470x264@1x+++',\n width: 470,\n height: 264,\n alt: 'Das ist ein Platzhalter-Bild',\n} only %}\n"
},
{
"content": "!twig\n\n{% apply componentize %}\n <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>\n <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>\n{% endapply %}\n"
},
{
"content": "!twig\n\n{% include '@button' with {\n text: 'Das ist ein Button',\n link: '#',\n} only %}\n"
}
]
},
{
"blocks": [
{
"content": "!twig\n\n{% apply componentize %}\n <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>\n{% endapply %}\n"
},
{
"content": "!twig\n\n{% include '@image' with {\n src: 'https://bildermangel.de/470x264/fe7c09/130f26.webp?text=+++S:+470x264@1x+++',\n width: 470,\n height: 264,\n alt: 'Das ist ein Platzhalter-Bild',\n} only %}\n"
},
{
"content": "!twig\n\n{% apply componentize %}\n <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>\n <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>\n{% endapply %}\n"
},
{
"content": "!twig\n\n{% include '@button' with {\n text: 'Das ist ein Button',\n link: '#',\n} only %}\n"
}
]
},
{
"blocks": [
{
"content": "!twig\n\n{% apply componentize %}\n <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>\n{% endapply %}\n"
},
{
"content": "!twig\n\n{% include '@image' with {\n src: 'https://bildermangel.de/470x264/fe7c09/130f26.webp?text=+++S:+470x264@1x+++',\n width: 470,\n height: 264,\n alt: 'Das ist ein Platzhalter-Bild',\n} only %}\n"
},
{
"content": "!twig\n\n{% apply componentize %}\n <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>\n <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>\n{% endapply %}\n"
},
{
"content": "!twig\n\n{% include '@button' with {\n text: 'Das ist ein Button',\n link: '#',\n} only %}\n"
}
]
},
{
"blocks": [
{
"content": "!twig\n\n{% apply componentize %}\n <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>\n{% endapply %}\n"
},
{
"content": "!twig\n\n{% include '@image' with {\n src: 'https://bildermangel.de/470x264/fe7c09/130f26.webp?text=+++S:+470x264@1x+++',\n width: 470,\n height: 264,\n alt: 'Das ist ein Platzhalter-Bild',\n} only %}\n"
},
{
"content": "!twig\n\n{% apply componentize %}\n <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>\n <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>\n{% endapply %}\n"
},
{
"content": "!twig\n\n{% include '@button' with {\n text: 'Das ist ein Button',\n link: '#',\n} only %}\n"
}
]
},
{
"blocks": [
{
"content": "!twig\n\n{% apply componentize %}\n <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>\n{% endapply %}\n"
},
{
"content": "!twig\n\n{% include '@image' with {\n src: 'https://bildermangel.de/470x264/fe7c09/130f26.webp?text=+++S:+470x264@1x+++',\n width: 470,\n height: 264,\n alt: 'Das ist ein Platzhalter-Bild',\n} only %}\n"
},
{
"content": "!twig\n\n{% apply componentize %}\n <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>\n <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>\n{% endapply %}\n"
},
{
"content": "!twig\n\n{% include '@button' with {\n text: 'Das ist ein Button',\n link: '#',\n} only %}\n"
}
]
}
],
"image": {
"src": "https://bildermangel.de/650x520/130f26/ffffff.webp",
"width": 650,
"height": 520
},
"button": {
"text": "Mehr wissen",
"link": "#"
}
}
:root {
--accordion-breaker-background-color: var(--color-cyan-light);
@include use-responsive-sizing(--accordion-breaker-columns, (xs: 1, l: 2));
}
.accordion-breaker {
background-color: var(--accordion-breaker-background-color);
@include use-responsive-sizing(padding-block, responsive-map(xs 2rem, xl 6rem));
}
.accordion-breaker__inner {
display: grid;
grid-auto-rows: auto;
grid-template-columns: repeat(var(--accordion-breaker-columns), minmax(0, 1fr));
@include use-container();
@include use-responsive-sizing(gap, $gaps);
}
.accordion-breaker__content {
display: flex;
flex-direction: column;
@include use-responsive-sizing(gap, responsive-map(xs 2rem, xl 4.2rem));
@include mq($until: l) {
text-align: center;
}
}
.accordion-breaker__accordions {
display: flex;
flex-direction: column;
gap: 2rem;
text-align: start;
}
.accordion-breaker__accordion {
--accordion-background-color: var(--color-white);
}
.accordion-breaker__image {
@include mq($until: l) {
display: none;
}
}
No notes defined.