/*
|--------------------------------------------------------------------------
| Blocks
|--------------------------------------------------------------------------
| Universelle Darstellung der Frontend-Bausteine.
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| Block Grundlage
|--------------------------------------------------------------------------
*/

.block {
    position: relative;
    width: 100%;
}


/*
|--------------------------------------------------------------------------
| Hero
|--------------------------------------------------------------------------
*/

.block-hero {
    overflow: hidden;

    background: var(--color-hero-background);
    color: var(--color-hero-text);
}

.block-hero__inner {
    display: grid;
    align-items: center;

    gap: clamp(32px, 6vw, 80px);

    min-height: clamp(480px, 70vh, 760px);

    padding-block: clamp(60px, 8vw, 120px);
}


/*
|--------------------------------------------------------------------------
| Inhalt
|--------------------------------------------------------------------------
*/

.block-hero__content {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    max-width: 760px;
}


/*
|--------------------------------------------------------------------------
| Toptitle
|--------------------------------------------------------------------------
*/

.block-hero__toptitle {
    display: inline-flex;
    width: fit-content;

    margin-bottom: clamp(12px, 2vw, 20px);
    padding: 7px 14px;

    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 999px;

    color: var(--color-primary);

    font-size: clamp(0.8rem, 1vw, 0.95rem);
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}


/*
|--------------------------------------------------------------------------
| Headline
|--------------------------------------------------------------------------
*/

.block-hero__headline {
    color: inherit;

    font-size: clamp(2.5rem, 6vw, 5rem);
    line-height: 1.05;
}


/*
|--------------------------------------------------------------------------
| Text
|--------------------------------------------------------------------------
*/

.block-hero__text {
    max-width: 680px;

    margin-top: clamp(18px, 2.5vw, 28px);

    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    line-height: 1.65;
}


/*
|--------------------------------------------------------------------------
| Buttons
|--------------------------------------------------------------------------
*/

.block-hero__actions {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: clamp(26px, 4vw, 40px);
}

.block-hero__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 48px;

    padding: 12px 24px;

    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;

    border: 2px solid transparent;
    border-radius: 8px;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.block-hero__button:hover {
    transform: translateY(-2px);
}


/*
|--------------------------------------------------------------------------
| Primary Button
|--------------------------------------------------------------------------
*/

.block-hero__button--primary {
    background: var(--color-button-background);
    color: var(--color-button-text);
}

.block-hero__button--primary:hover {
    background: var(--color-button-hover);
    color: var(--color-button-text);
}


/*
|--------------------------------------------------------------------------
| Secondary Button
|--------------------------------------------------------------------------
*/

.block-hero__button--secondary {
    color: var(--color-hero-text);

    border-color: currentColor;
    background: transparent;
}

.block-hero__button--secondary:hover {
    color: var(--color-primary);

    border-color: var(--color-primary);
}


/*
|--------------------------------------------------------------------------
| Bild
|--------------------------------------------------------------------------
*/

.block-hero__image {
    position: relative;
    z-index: 2;
}

.block-hero__image img {
    width: 100%;
    max-height: 600px;

    object-fit: cover;

    border-radius: 16px;
}


/*
|--------------------------------------------------------------------------
| Text links / Bild rechts
|--------------------------------------------------------------------------
*/

.block-hero--text_left .block-hero__inner {
    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(280px, 0.95fr);
}


/*
|--------------------------------------------------------------------------
| Bild links / Text rechts
|--------------------------------------------------------------------------
*/

.block-hero--text_right .block-hero__inner {
    grid-template-columns:
        minmax(280px, 0.95fr)
        minmax(0, 1.05fr);
}


/*
|--------------------------------------------------------------------------
| Standard
|--------------------------------------------------------------------------
*/

.block-hero--standard .block-hero__inner {
    grid-template-columns:
        minmax(0, 1fr)
        minmax(280px, 0.85fr);
}


/*
|--------------------------------------------------------------------------
| Zentriert
|--------------------------------------------------------------------------
*/

.block-hero--centered .block-hero__inner {
    display: flex;
    flex-direction: column;
    justify-content: center;

    text-align: center;
}

.block-hero--centered .block-hero__content {
    align-items: center;

    margin-inline: auto;
}

.block-hero--centered .block-hero__image {
    width: min(100%, 900px);
}


/*
|--------------------------------------------------------------------------
| Hero – Hintergrundbild
|--------------------------------------------------------------------------
*/

.block-hero--background {
    isolation: isolate;

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.block-hero--background .block-hero__inner {
    display: flex;
    align-items: center;

    min-height: clamp(520px, 72vh, 780px);
}

.block-hero--background .block-hero__content {
    width: min(100%, 780px);
}


/*
|--------------------------------------------------------------------------
| Overlay
|--------------------------------------------------------------------------
*/

.block-hero--background .block-hero__overlay {
    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.75) 0%,
            rgba(0, 0, 0, 0.58) 45%,
            rgba(0, 0, 0, 0.22) 75%,
            rgba(0, 0, 0, 0.15) 100%
        );
}


/*
|--------------------------------------------------------------------------
| Inhalt auf Hintergrundbild
|--------------------------------------------------------------------------
*/

.block-hero--background .block-hero__headline {
    max-width: 16ch;

    color: #fff;
}

.block-hero--background .block-hero__text {
    max-width: 600px;

    color: rgba(255, 255, 255, 0.9);
}

.block-hero--background .block-hero__toptitle {
    color: var(--color-primary);
}


/*
|--------------------------------------------------------------------------
| Secondary Button auf Hintergrund
|--------------------------------------------------------------------------
*/

.block-hero--background .block-hero__button--secondary {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.75);
}

.block-hero--background .block-hero__button--secondary:hover {
    color: #fff;
    border-color: #fff;

    background: rgba(255, 255, 255, 0.12);
}


/*
|--------------------------------------------------------------------------
| Ausrichtung
|--------------------------------------------------------------------------
*/

.block-hero--align-center .block-hero__content {
    align-items: center;

    margin-inline: auto;

    text-align: center;
}

.block-hero--align-right .block-hero__content {
    align-items: flex-end;

    margin-left: auto;

    text-align: right;
}


/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
|
| Hier brauchen wir einen echten Layoutwechsel:
| Zweispaltige Heroes werden auf kleinen Displays einspaltig.
|--------------------------------------------------------------------------
*/

@media (max-width: 760px) {

    .block-hero__inner {
        min-height: auto;
    }

    .block-hero--standard .block-hero__inner,
    .block-hero--text_left .block-hero__inner,
    .block-hero--text_right .block-hero__inner {
        grid-template-columns: 1fr;
    }

    /*
    | Bei "Text rechts" steht das Bild im HTML zuerst.
    | Mobil soll trotzdem der Text zuerst erscheinen.
    */

    .block-hero--text_right .block-hero__content {
        order: 1;
    }

    .block-hero--text_right .block-hero__image {
        order: 2;
    }

    .block-hero__image img {
        max-height: 420px;
    }
}







/*
|--------------------------------------------------------------------------
| Headline
|--------------------------------------------------------------------------
*/

.block-headline {
    padding-block: clamp(50px, 7vw, 90px);
}

.block-headline__inner {
    width: 100%;
}


/*
|--------------------------------------------------------------------------
| Breiten
|--------------------------------------------------------------------------
*/

.block-headline--width-standard .block-headline__inner {
    max-width: 900px;
}

.block-headline--width-narrow .block-headline__inner {
    max-width: 700px;
}

.block-headline--width-wide .block-headline__inner {
    max-width: 1200px;
}


/*
|--------------------------------------------------------------------------
| Topline
|--------------------------------------------------------------------------
*/

.block-headline__topline {
    margin-bottom: clamp(8px, 1vw, 12px);

    color: var(--color-primary);

    font-size: clamp(0.8rem, 1vw, 0.95rem);
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}


/*
|--------------------------------------------------------------------------
| Headline
|--------------------------------------------------------------------------
*/

.block-headline__title {
    color: var(--color-text);
}


/*
|--------------------------------------------------------------------------
| Subheadline
|--------------------------------------------------------------------------
*/

.block-headline__subtitle {
    max-width: 800px;

    margin-top: clamp(14px, 2vw, 20px);

    color: var(--color-text-muted);

    font-size: clamp(1rem, 1.4vw, 1.2rem);
    line-height: 1.6;
}


/*
|--------------------------------------------------------------------------
| Ausrichtung
|--------------------------------------------------------------------------
*/

.block-headline--align-center .block-headline__inner {
    margin-inline: auto;

    text-align: center;
}

.block-headline--align-center .block-headline__subtitle {
    margin-inline: auto;
    margin-top: clamp(14px, 2vw, 20px);
}


.block-headline--align-right .block-headline__inner {
    margin-left: auto;

    text-align: right;
}

.block-headline--align-right .block-headline__subtitle {
    margin-left: auto;
}






/*
|--------------------------------------------------------------------------
| Text
|--------------------------------------------------------------------------
*/

.block-text {
    padding-block: clamp(40px, 6vw, 80px);
}


/*
|--------------------------------------------------------------------------
| Inhaltsbreiten
|--------------------------------------------------------------------------
*/

.block-text--standard .container {
    max-width: 1000px;
}

.block-text--narrow .container {
    max-width: 760px;
}

.block-text--wide .container {
    max-width: 1400px;
}


/*
|--------------------------------------------------------------------------
| Fließtext
|--------------------------------------------------------------------------
*/

.block-text p {
    line-height: 1.75;
}

.block-text p + p {
    margin-top: 1.25em;
}


/*
|--------------------------------------------------------------------------
| Überschriften innerhalb des Textes
|--------------------------------------------------------------------------
*/

.block-text h2,
.block-text h3,
.block-text h4,
.block-text h5,
.block-text h6 {
    margin-top: 1.5em;
    margin-bottom: 0.6em;
}

.block-text > .container > :first-child {
    margin-top: 0;
}

.block-text > .container > :last-child {
    margin-bottom: 0;
}


/*
|--------------------------------------------------------------------------
| Listen
|--------------------------------------------------------------------------
*/

.block-text ul,
.block-text ol {
    margin-block: 1.25em;
    padding-left: 1.4em;
}

.block-text ul {
    list-style: disc;
}

.block-text ol {
    list-style: decimal;
}

.block-text li + li {
    margin-top: 0.45em;
}


/*
|--------------------------------------------------------------------------
| Links
|--------------------------------------------------------------------------
*/

.block-text a {
    color: var(--color-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.block-text a:hover {
    color: var(--color-link-hover);
}







/*
|--------------------------------------------------------------------------
| Image
|--------------------------------------------------------------------------
*/

.block-image {
    padding-block: clamp(30px, 5vw, 60px);
}

.block-image__figure {
    width: 100%;
}

.block-image__figure img {
    display: block;

    width: auto;
    max-width: 100%;
    height: auto;

    border-radius: 12px;
}


/*
|--------------------------------------------------------------------------
| Verlinktes Bild / Lightbox
|--------------------------------------------------------------------------
*/

.block-image__figure > a {
    display: inline-block;

    max-width: 100%;
}


/*
|--------------------------------------------------------------------------
| Bildgrößen
|--------------------------------------------------------------------------
*/

.block-image--size-small .block-image__figure {
    max-width: 500px;
}

.block-image--size-medium .block-image__figure {
    max-width: 800px;
}

.block-image--size-large .block-image__figure {
    max-width: 1100px;
}

.block-image--size-original .block-image__figure {
    max-width: 100%;
}


/*
|--------------------------------------------------------------------------
| Ausrichtung
|--------------------------------------------------------------------------
*/

.block-image--align-left .block-image__figure {
    margin-right: auto;
}

.block-image--align-center .block-image__figure {
    margin-inline: auto;
}

.block-image--align-right .block-image__figure {
    margin-left: auto;
}


/*
|--------------------------------------------------------------------------
| Bildunterschrift
|--------------------------------------------------------------------------
*/

.block-image__caption {
    margin-top: 10px;

    color: var(--color-text-muted);

    font-size: 0.9rem;
    line-height: 1.5;
}


/*
|--------------------------------------------------------------------------
| Caption Ausrichtung
|--------------------------------------------------------------------------
*/

.block-image--align-center .block-image__caption {
    text-align: center;
}

.block-image--align-right .block-image__caption {
    text-align: right;
}







/*
|--------------------------------------------------------------------------
| ImageBox
|--------------------------------------------------------------------------
*/

.block-image-box {
    padding-block: clamp(40px, 6vw, 80px);
}

.block-image-box__inner {
    display: grid;
    grid-template-columns:
        minmax(280px, 1fr)
        minmax(0, 1fr);

    align-items: center;

    gap: clamp(30px, 6vw, 80px);
}


/* ==========================================================================
   Image Box – Image Position
   ========================================================================== */

.block-image-box--image-right .block-image-box__image {
    order: 2;
}

.block-image-box--image-right .block-image-box__content {
    order: 1;
}

/*
|--------------------------------------------------------------------------
| Bild
|--------------------------------------------------------------------------
*/

.block-image-box__image {
    min-width: 0;
}

.block-image-box__image img {
    display: block;

    width: 100%;
    height: auto;

    border-radius: 14px;
}


/*
|--------------------------------------------------------------------------
| Inhalt
|--------------------------------------------------------------------------
*/

.block-image-box__content {
    min-width: 0;
}

.block-image-box__headline {
    margin-bottom: clamp(14px, 2vw, 22px);
}

.block-image-box__text {
    color: var(--color-text);

    line-height: 1.7;
}


/*
|--------------------------------------------------------------------------
| Link
|--------------------------------------------------------------------------
*/

.block-image-box__link {
    display: inline-flex;
    align-items: center;

    margin-top: clamp(20px, 3vw, 30px);

    color: var(--color-link);

    font-weight: 700;

    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.block-image-box__link:hover {
    color: var(--color-link-hover);
}


/*
|--------------------------------------------------------------------------
| Textausrichtung
|--------------------------------------------------------------------------
*/

.block-image-box--align-center .block-image-box__content {
    text-align: center;
}

.block-image-box--align-right .block-image-box__content {
    text-align: right;
}


.block-image-box__link--button {
    padding: 12px 22px;

    background: var(--color-accent);
    color: #fff;

    border-radius: 8px;

    text-decoration: none;
}

.block-image-box__link--button:hover {
    color: #fff;
    opacity: 0.9;
}


/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media (max-width: 760px) {

    .block-image-box__inner {
        grid-template-columns: 1fr;

        gap: clamp(24px, 6vw, 36px);
    }
}







/*
|--------------------------------------------------------------------------
| Button
|--------------------------------------------------------------------------
*/

.block-button {
    padding-block: clamp(25px, 4vw, 50px);
}

.block-button__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 14px;
}


/*
|--------------------------------------------------------------------------
| Button
|--------------------------------------------------------------------------
*/

.block-button__button {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 50px;

    padding: 12px 26px;

    background: var(--color-button-background);
    color: var(--color-button-text);

    border-radius: 8px;

    font-weight: 700;
    line-height: 1.2;

    text-align: center;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.block-button__button:hover {
    background: var(--color-button-hover);
    color: var(--color-button-text);

    transform: translateY(-2px);
}

/*
|--------------------------------------------------------------------------
| Button Farben
|--------------------------------------------------------------------------
*/

.block-button--color-orange {
    --color-button-background: #f97316;
    --color-button-hover: #ea580c;
    --color-button-text: #ffffff;
}

.block-button--color-green {
    --color-button-background: #16a34a;
    --color-button-hover: #15803d;
    --color-button-text: #ffffff;
}

.block-button--color-dark {
    --color-button-background: #25242a;
    --color-button-hover: #18181b;
    --color-button-text: #ffffff;
}


/*
|--------------------------------------------------------------------------
| Button Text
|--------------------------------------------------------------------------
*/

.block-button__text {
    font-size: 1rem;
}


/*
|--------------------------------------------------------------------------
| Unterzeile
|--------------------------------------------------------------------------
*/

.block-button__subtitle {
    margin-top: 4px;

    font-size: 0.8rem;
    font-weight: 400;

    opacity: 0.85;
}


/*
|--------------------------------------------------------------------------
| Ausrichtung
|--------------------------------------------------------------------------
*/

.block-button--align-center .block-button__inner,
.block-button--align-center .block-button__conversion {
    align-items: center;
}

.block-button--align-right .block-button__inner {
    align-items: flex-end;
}


/*
|--------------------------------------------------------------------------
| Conversion
|--------------------------------------------------------------------------
*/

.block-button__conversion {
    display: flex;
    flex-direction: column;

    gap: 8px;
}


/*
|--------------------------------------------------------------------------
| Conversion Link
|--------------------------------------------------------------------------
*/

.block-button__conversion-link {
    color: var(--color-link);

    font-size: 0.95rem;
    font-weight: 700;

    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
}

.block-button__conversion-link:hover {
    color: var(--color-link-hover);
}



/*
|--------------------------------------------------------------------------
| Trust Text
|--------------------------------------------------------------------------
*/

.block-button__trust {
    color: var(--color-text-muted);

    font-size: 0.85rem;
    line-height: 1.4;
}


/*
|--------------------------------------------------------------------------
| Zahlungsarten
|--------------------------------------------------------------------------
*/

.block-button__payment-methods {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;
}

.block-button__payment-method {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 28px;

    padding: 4px 8px;

    background: var(--color-surface-soft);
    color: var(--color-text-muted);

    border: 1px solid var(--color-border);
    border-radius: 5px;

    font-size: 0.75rem;
    font-weight: 600;
}







/*
|--------------------------------------------------------------------------
| CTA
|--------------------------------------------------------------------------
*/

.block-cta {
    padding-block: clamp(40px, 6vw, 80px);
}

.block-cta__inner {
    position: relative;

    display: grid;
    align-items: center;

    gap: clamp(30px, 5vw, 70px);

    padding: clamp(32px, 5vw, 70px);

    background: var(--color-surface-soft);

    border-radius: 16px;
}


/*
|--------------------------------------------------------------------------
| Inhalt
|--------------------------------------------------------------------------
*/

.block-cta__content {
    position: relative;
    z-index: 2;

    max-width: 760px;
}

.block-cta__toptitle {
    margin-bottom: 10px;

    color: var(--color-primary);

    font-size: clamp(0.8rem, 1vw, 0.95rem);
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.block-cta__headline {
    color: inherit;
}

.block-cta__text {
    max-width: 680px;

    margin-top: clamp(14px, 2vw, 20px);

    line-height: 1.7;
}


/*
|--------------------------------------------------------------------------
| Button
|--------------------------------------------------------------------------
*/

.block-cta__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 48px;

    margin-top: clamp(22px, 3vw, 32px);
    padding: 12px 24px;

    background: var(--color-button-background);
    color: var(--color-button-text);

    border-radius: 8px;

    font-weight: 700;
    line-height: 1.2;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.block-cta__button:hover {
    background: var(--color-button-hover);
    color: var(--color-button-text);

    transform: translateY(-2px);
}


/*
|--------------------------------------------------------------------------
| Bild
|--------------------------------------------------------------------------
*/

.block-cta__image {
    position: relative;
    z-index: 2;

    min-width: 0;
}

.block-cta__image img {
    display: block;

    width: 100%;
    height: auto;

    border-radius: 12px;
}


/*
|--------------------------------------------------------------------------
| Split Layouts
|--------------------------------------------------------------------------
*/

.block-cta--split_left .block-cta__inner,
.block-cta--split_right .block-cta__inner {
    grid-template-columns:
        minmax(280px, 0.9fr)
        minmax(0, 1.1fr);
}


/*
|--------------------------------------------------------------------------
| Standard
|--------------------------------------------------------------------------
*/

.block-cta--standard .block-cta__inner {
    grid-template-columns: 1fr;
}


/*
|--------------------------------------------------------------------------
| Zentriert
|--------------------------------------------------------------------------
*/

.block-cta--centered .block-cta__inner {
    display: flex;
    flex-direction: column;

    text-align: center;
}

.block-cta--centered .block-cta__content {
    margin-inline: auto;
}

.block-cta--centered .block-cta__text {
    margin-inline: auto;
    margin-top: clamp(14px, 2vw, 20px);
}


/*
|--------------------------------------------------------------------------
| Ausrichtung
|--------------------------------------------------------------------------
*/

.block-cta--align-center .block-cta__content {
    margin-inline: auto;

    text-align: center;
}

.block-cta--align-center .block-cta__text {
    margin-inline: auto;
    margin-top: clamp(14px, 2vw, 20px);
}

.block-cta--align-right .block-cta__content {
    margin-left: auto;

    text-align: right;
}

.block-cta--align-right .block-cta__text {
    margin-left: auto;
}


/*
|--------------------------------------------------------------------------
| Background Layout
|--------------------------------------------------------------------------
*/

.block-cta--background {
    position: relative;

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.block-cta--background::before {
    content: "";

    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, 0.55);
}

.block-cta--background .block-cta__inner {
    background: transparent;

    color: #fff;
}

.block-cta--background .block-cta__headline,
.block-cta--background .block-cta__text {
    color: inherit;
}


/*
|--------------------------------------------------------------------------
| CTA Button Farben
|--------------------------------------------------------------------------
*/

.block-cta--button-orange .block-cta__button {
    background: #f97316;
    color: #ffffff;
}

.block-cta--button-orange .block-cta__button:hover {
    background: #ea580c;
    color: #ffffff;
}


.block-cta--button-green .block-cta__button {
    background: #16a34a;
    color: #ffffff;
}

.block-cta--button-green .block-cta__button:hover {
    background: #15803d;
    color: #ffffff;
}


.block-cta--button-dark .block-cta__button {
    background: #25242a;
    color: #ffffff;
}

.block-cta--button-dark .block-cta__button:hover {
    background: #18181b;
    color: #ffffff;
}

/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media (max-width: 760px) {

    .block-cta--split_left .block-cta__inner,
    .block-cta--split_right .block-cta__inner {
        grid-template-columns: 1fr;
    }

    /*
    | split_left:
    | Bild steht bereits vor dem Inhalt.
    |
    | split_right:
    | Mobil zuerst Inhalt, danach Bild.
    */

    .block-cta--split_right .block-cta__content {
        order: 1;
    }

    .block-cta--split_right .block-cta__image {
        order: 2;
    }
}







/*
|--------------------------------------------------------------------------
| Benefits
|--------------------------------------------------------------------------
*/

.block-benefit {
    padding-block: clamp(40px, 6vw, 80px);
}


/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/

.block-benefit__header {
    max-width: 850px;

    margin-bottom: clamp(30px, 5vw, 55px);
}

.block-benefit__toptitle {
    margin-bottom: 10px;

    color: var(--color-primary);

    font-size: clamp(0.8rem, 1vw, 0.95rem);
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.block-benefit__intro {
    max-width: 720px;

    margin-top: clamp(14px, 2vw, 20px);

    color: var(--color-text-muted);

    font-size: clamp(1rem, 1.3vw, 1.15rem);
    line-height: 1.65;
}


/*
|--------------------------------------------------------------------------
| Grid
|--------------------------------------------------------------------------
*/

.block-benefit__items {
    display: grid;

    gap: clamp(20px, 3vw, 36px);
}


/*
|--------------------------------------------------------------------------
| Automatische Spalten
|--------------------------------------------------------------------------
*/

.block-benefit--columns-auto .block-benefit__items {
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(min(250px, 100%), 1fr)
        );
}


/*
|--------------------------------------------------------------------------
| Feste Spaltenzahl
|--------------------------------------------------------------------------
*/

.block-benefit--columns-2 .block-benefit__items {
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(min(420px, 100%), 1fr)
        );
}

.block-benefit--columns-3 .block-benefit__items {
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(min(300px, 100%), 1fr)
        );
}

.block-benefit--columns-4 .block-benefit__items {
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(min(240px, 100%), 1fr)
        );
}


/*
|--------------------------------------------------------------------------
| Benefit Item
|--------------------------------------------------------------------------
*/

.block-benefit__item {
    padding: clamp(22px, 3vw, 32px);

    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: 12px;
}


/*
|--------------------------------------------------------------------------
| Icon
|--------------------------------------------------------------------------
*/

.block-benefit__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    margin-bottom: 18px;

    background: var(--color-surface-soft);
    color: var(--color-primary);

    border-radius: 10px;

    font-size: 1.2rem;
    font-weight: 700;
}


/*
|--------------------------------------------------------------------------
| Item Inhalt
|--------------------------------------------------------------------------
*/

.block-benefit__item-headline {
    margin-bottom: 10px;

    font-size: clamp(1.15rem, 1.5vw, 1.4rem);
}

.block-benefit__item-text {
    color: var(--color-text-muted);

    line-height: 1.65;
}


/*
|--------------------------------------------------------------------------
| Ausrichtung
|--------------------------------------------------------------------------
*/

.block-benefit--align-center .block-benefit__header {
    margin-inline: auto;

    text-align: center;
}

.block-benefit--align-center .block-benefit__intro {
    margin-inline: auto;
    margin-top: clamp(14px, 2vw, 20px);
}

.block-benefit--align-center .block-benefit__item {
    text-align: center;
}

.block-benefit--align-center .block-benefit__icon {
    margin-inline: auto;
    margin-bottom: 18px;
}


.block-benefit--align-right .block-benefit__header {
    margin-left: auto;

    text-align: right;
}

.block-benefit--align-right .block-benefit__intro {
    margin-left: auto;
}

.block-benefit--align-right .block-benefit__item {
    text-align: right;
}

.block-benefit--align-right .block-benefit__icon {
    margin-left: auto;
}





/*
|--------------------------------------------------------------------------
| Audio
|--------------------------------------------------------------------------
*/

.block-audio {
    padding-block: clamp(40px, 6vw, 80px);
}

.block-audio__inner {
    display: grid;
    grid-template-columns:
        minmax(180px, 320px)
        minmax(0, 1fr);

    align-items: center;

    gap: clamp(28px, 5vw, 60px);

    padding: clamp(24px, 4vw, 48px);

    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: 16px;
}


/*
|--------------------------------------------------------------------------
| Cover
|--------------------------------------------------------------------------
*/

.block-audio__cover {
    min-width: 0;
}

.block-audio__cover img {
    display: block;

    width: 100%;
    aspect-ratio: 1 / 1;

    object-fit: cover;

    border-radius: 12px;
}


/*
|--------------------------------------------------------------------------
| Inhalt
|--------------------------------------------------------------------------
*/

.block-audio__content {
    min-width: 0;
}

.block-audio__toptitle {
    margin-bottom: 10px;

    color: var(--color-primary);

    font-size: clamp(0.8rem, 1vw, 0.95rem);
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.block-audio__headline {
    margin: 0;
}

.block-audio__text {
    max-width: 700px;

    margin-top: clamp(12px, 2vw, 18px);

    color: var(--color-text-muted);

    line-height: 1.7;
}


/*
|--------------------------------------------------------------------------
| Custom Audio Player
|--------------------------------------------------------------------------
*/

.block-audio__player {
    width: 100%;
    max-width: 680px;

    margin-top: 28px;
}


/*
|--------------------------------------------------------------------------
| Native Audio Element
|--------------------------------------------------------------------------
*/

.block-audio__element {
    display: none;
}


/*
|--------------------------------------------------------------------------
| Controls
|--------------------------------------------------------------------------
*/

.block-audio__controls {
    display: flex;
    align-items: center;
    gap: 18px;

    width: 100%;

    padding: 14px 18px;

    background: var(--color-surface-soft);

    border: 1px solid var(--color-border);
    border-radius: 14px;
}


/*
|--------------------------------------------------------------------------
| Play Button
|--------------------------------------------------------------------------
*/

.block-audio__play {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 46px;
    height: 46px;

    padding: 0;

    background: var(--color-accent);
    color: #fff;

    border: 0;
    border-radius: 50%;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}

.block-audio__play:hover {
    transform: scale(1.05);
}

.block-audio__play-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 16px;
    line-height: 1;
}


/*
|--------------------------------------------------------------------------
| Progress
|--------------------------------------------------------------------------
*/

.block-audio__progress-wrap {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 7px;

    min-width: 0;
}

.block-audio__progress {
    width: 100%;
    height: 5px;

    margin: 0;

    accent-color: var(--color-accent);

    cursor: pointer;
}


/*
|--------------------------------------------------------------------------
| Time
|--------------------------------------------------------------------------
*/

.block-audio__time {
    display: flex;
    align-items: center;
    gap: 5px;

    color: var(--color-text-muted);

    font-size: 0.78rem;
    line-height: 1;
}


/*
|--------------------------------------------------------------------------
| Volume
|--------------------------------------------------------------------------
*/

.block-audio__mute {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 38px;
    height: 38px;

    padding: 0;

    background: transparent;
    color: var(--color-text);

    border: 0;
    border-radius: 50%;

    cursor: pointer;

    font-size: 17px;
}

.block-audio__mute:hover {
    background: var(--color-surface);
}


.block-audio__icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.block-audio__icon svg {
    width: 20px;
    height: 20px;
}

.block-audio__play .block-audio__icon svg {
    width: 19px;
    height: 19px;
}

.block-audio__icon[hidden] {
    display: none;
}


.block-audio__volume {
    flex: 0 0 90px;

    width: 90px;
    height: 5px;

    margin: 0;

    accent-color: var(--color-accent);

    cursor: pointer;
}

/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {

    .block-audio__controls {
        gap: 12px;

        padding: 12px 14px;
    }

    .block-audio__play {
        width: 42px;
        height: 42px;
    }

    .block-audio__volume {
        flex-basis: 60px;
        width: 60px;
    }    

}


/*
|--------------------------------------------------------------------------
| Download
|--------------------------------------------------------------------------
*/

.block-audio__download {
    margin-top: 10px;
}

.block-audio__download a {
    color: var(--color-link);

    font-size: 0.9rem;
    font-weight: 600;

    text-decoration: underline;
    text-underline-offset: 3px;
}

.block-audio__download a:hover {
    color: var(--color-link-hover);
}


/*
|--------------------------------------------------------------------------
| Conversion
|--------------------------------------------------------------------------
*/

.block-audio__conversion {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 8px;

    margin-top: clamp(20px, 3vw, 30px);
}

.block-audio__button {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 50px;

    padding: 12px 26px;

    background: var(--color-button-background);
    color: var(--color-button-text);

    border-radius: 8px;

    font-weight: 700;
    line-height: 1.2;

    text-align: center;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.block-audio__button:hover {
    background: var(--color-button-hover);
    color: var(--color-button-text);

    transform: translateY(-2px);
}

.block-audio__button-subtitle {
    margin-top: 4px;

    font-size: 0.8rem;
    font-weight: 400;

    opacity: 0.85;
}


/*
|--------------------------------------------------------------------------
| Conversion Zusatzinformationen
|--------------------------------------------------------------------------
*/

.block-audio__conversion-link {
    color: var(--color-link);

    font-size: 0.9rem;
    font-weight: 600;

    text-decoration: underline;
    text-underline-offset: 3px;
}

.block-audio__trust {
    color: var(--color-text-muted);

    font-size: 0.85rem;
    line-height: 1.4;
}


/*
|--------------------------------------------------------------------------
| Zahlungsarten
|--------------------------------------------------------------------------
*/

.block-audio__payment-methods {
    display: flex;
    flex-wrap: wrap;

    gap: 6px;
}

.block-audio__payment-method {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 28px;

    padding: 4px 8px;

    background: var(--color-surface-soft);
    color: var(--color-text-muted);

    border: 1px solid var(--color-border);
    border-radius: 5px;

    font-size: 0.75rem;
    font-weight: 600;
}


/*
|--------------------------------------------------------------------------
| Ausrichtung
|--------------------------------------------------------------------------
*/

.block-audio--align-center .block-audio__content {
    text-align: center;
}

.block-audio--align-center .block-audio__text {
    margin-inline: auto;
    margin-top: clamp(12px, 2vw, 18px);
}

.block-audio--align-center .block-audio__conversion {
    align-items: center;
}


.block-audio--align-right .block-audio__content {
    text-align: right;
}

.block-audio--align-right .block-audio__text {
    margin-left: auto;
}

.block-audio--align-right .block-audio__conversion {
    align-items: flex-end;
}


/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media (max-width: 700px) {

    .block-audio__inner {
        grid-template-columns: 1fr;
    }

    .block-audio__cover {
        width: min(100%, 320px);

        margin-inline: auto;
    }

    .block-image-box--image-right .block-image-box__image {
        order: 1;
    }

    .block-image-box--image-right .block-image-box__content {
        order: 2;
    }

}






/*
|--------------------------------------------------------------------------
| Testimonials
|--------------------------------------------------------------------------
*/

.block-testimonial {
    padding-block: clamp(40px, 6vw, 80px);
}


/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/

.block-testimonial__header {
    max-width: 850px;

    margin-bottom: clamp(30px, 5vw, 55px);
}

.block-testimonial__toptitle {
    margin-bottom: 10px;

    color: var(--color-primary);

    font-size: clamp(0.8rem, 1vw, 0.95rem);
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.block-testimonial__intro {
    max-width: 720px;

    margin-top: clamp(14px, 2vw, 20px);

    color: var(--color-text-muted);

    font-size: clamp(1rem, 1.3vw, 1.15rem);
    line-height: 1.65;
}


/*
|--------------------------------------------------------------------------
| Testimonials Grid
|--------------------------------------------------------------------------
*/

.block-testimonial__items {
    display: grid;

    gap: clamp(20px, 3vw, 36px);
}

.block-testimonial--columns-2 .block-testimonial__items {
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(min(420px, 100%), 1fr)
        );
}

.block-testimonial--columns-3 .block-testimonial__items {
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(min(300px, 100%), 1fr)
        );
}

.block-testimonial--columns-4 .block-testimonial__items {
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(min(240px, 100%), 1fr)
        );
}


/*
|--------------------------------------------------------------------------
| Testimonial Card
|--------------------------------------------------------------------------
*/

.block-testimonial__item {
    display: flex;
    flex-direction: column;

    padding: clamp(24px, 3vw, 34px);

    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: 14px;
}


/*
|--------------------------------------------------------------------------
| Bild
|--------------------------------------------------------------------------
*/

.block-testimonial__image {
    width: 64px;
    height: 64px;

    margin-bottom: 18px;
}

.block-testimonial__image img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    border-radius: 50%;
}


/*
|--------------------------------------------------------------------------
| Bewertung
|--------------------------------------------------------------------------
*/

.block-testimonial__rating {
    display: flex;

    gap: 3px;

    margin-bottom: 16px;
}

.block-testimonial__star {
    color: var(--color-border);

    font-size: 1.1rem;
    line-height: 1;
}

.block-testimonial__star.is-active {
    color: var(--color-primary);
}


/*
|--------------------------------------------------------------------------
| Zitat
|--------------------------------------------------------------------------
*/

.block-testimonial__quote {
    margin: 0;

    color: var(--color-text);

    font-size: clamp(1rem, 1.2vw, 1.1rem);
    line-height: 1.7;
}


/*
|--------------------------------------------------------------------------
| Autor
|--------------------------------------------------------------------------
*/

.block-testimonial__author {
    margin-top: auto;
    padding-top: 22px;
}

.block-testimonial__name {
    color: var(--color-text);

    font-weight: 700;
}

.block-testimonial__meta {
    margin-top: 3px;

    color: var(--color-text-muted);

    font-size: 0.9rem;
    line-height: 1.4;
}





/*
|--------------------------------------------------------------------------
| Testimonial Slider
|--------------------------------------------------------------------------
*/


.block-testimonial--slider .block-testimonial__items {
    width: 100%;
    max-width: 850px;

    margin-inline: auto;

    overflow: hidden;
}

.block-testimonial--slider .block-testimonial__track {
    display: flex;

    transition: transform 0.5s ease;
}

.block-testimonial--slider .block-testimonial__item {
    flex: 0 0 100%;

    width: 100%;
}


/*
|--------------------------------------------------------------------------
| Slider Navigation
|--------------------------------------------------------------------------
*/

.block-testimonial__navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;

    margin-top: 24px;
}

.block-testimonial__prev,
.block-testimonial__next {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    padding: 0;

    background: var(--color-surface);
    color: var(--color-text);

    border: 1px solid var(--color-border);
    border-radius: 50%;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease;
}

.block-testimonial__prev:hover,
.block-testimonial__next:hover {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}

.block-testimonial__prev svg,
.block-testimonial__next svg {
    width: 20px;
    height: 20px;
}


/*
|--------------------------------------------------------------------------
| Slider Dots
|--------------------------------------------------------------------------
*/

.block-testimonial__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.block-testimonial__dot {
    width: 8px;
    height: 8px;
    padding: 0;

    border: 0;
    border-radius: 50%;

    background: var(--color-border);

    cursor: pointer;

    transition:
        width 0.2s ease,
        background 0.2s ease;
}

.block-testimonial__dot.is-active {
    border-radius: 999px;
    background: var(--color-primary);
}





/*
|--------------------------------------------------------------------------
| Icon List
|--------------------------------------------------------------------------
*/

.block-icon-list {
    padding-block: clamp(40px, 6vw, 80px);
}


/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/

.block-icon-list__header {
    max-width: 850px;

    margin-bottom: clamp(28px, 4vw, 48px);
}

.block-icon-list__toptitle {
    margin-bottom: 10px;

    color: var(--color-primary);

    font-size: clamp(0.8rem, 1vw, 0.95rem);
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.block-icon-list__intro {
    max-width: 720px;

    margin-top: clamp(14px, 2vw, 20px);

    color: var(--color-text-muted);

    font-size: clamp(1rem, 1.3vw, 1.15rem);
    line-height: 1.65;
}


/*
|--------------------------------------------------------------------------
| Liste / Grid
|--------------------------------------------------------------------------
*/

.block-icon-list__items {
    display: grid;

    gap: clamp(20px, 3vw, 32px);
}


/*
|--------------------------------------------------------------------------
| Automatische Spalten
|--------------------------------------------------------------------------
*/

.block-icon-list--columns-auto .block-icon-list__items {
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(min(300px, 100%), 1fr)
        );
}


/*
|--------------------------------------------------------------------------
| Feste Spalten
|--------------------------------------------------------------------------
*/

.block-icon-list--columns-1 .block-icon-list__items {
    grid-template-columns: 1fr;
}

.block-icon-list--columns-2 .block-icon-list__items {
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(min(400px, 100%), 1fr)
        );
}

.block-icon-list--columns-3 .block-icon-list__items {
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(min(280px, 100%), 1fr)
        );
}


/*
|--------------------------------------------------------------------------
| Eintrag
|--------------------------------------------------------------------------
*/

.block-icon-list__item {
    display: flex;
    align-items: flex-start;

    gap: 16px;

    min-width: 0;
}


/*
|--------------------------------------------------------------------------
| Icon
|--------------------------------------------------------------------------
*/

.block-icon-list__icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    background: var(--color-surface-soft);
    color: var(--color-primary);

    border-radius: 10px;

    font-size: 1rem;
    font-weight: 700;
}

.block-icon-list__icon svg {
    width: 20px;
    height: 20px;

    stroke: currentColor;
}


/*
|--------------------------------------------------------------------------
| Inhalt
|--------------------------------------------------------------------------
*/

.block-icon-list__content {
    min-width: 0;
}

.block-icon-list__item-headline {
    margin: 0 0 6px;

    font-size: clamp(1.05rem, 1.3vw, 1.25rem);
}

.block-icon-list__item-text {
    color: var(--color-text-muted);

    line-height: 1.6;
}


/*
|--------------------------------------------------------------------------
| Ausrichtung
|--------------------------------------------------------------------------
*/

.block-icon-list--align-center .block-icon-list__header {
    margin-inline: auto;

    text-align: center;
}

.block-icon-list--align-center .block-icon-list__intro {
    margin-inline: auto;
    margin-top: clamp(14px, 2vw, 20px);
}

.block-icon-list--align-center .block-icon-list__item {
    flex-direction: column;
    align-items: center;

    text-align: center;
}


.block-icon-list--align-right .block-icon-list__header {
    margin-left: auto;

    text-align: right;
}

.block-icon-list--align-right .block-icon-list__intro {
    margin-left: auto;
}

.block-icon-list--align-right .block-icon-list__item {
    flex-direction: row-reverse;

    text-align: right;
}







/*
|--------------------------------------------------------------------------
| FAQ
|--------------------------------------------------------------------------
*/

.block-faq {
    padding-block: clamp(40px, 6vw, 80px);
}


/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/

.block-faq__header {
    max-width: 850px;

    margin-bottom: clamp(28px, 4vw, 48px);
}

.block-faq__toptitle {
    margin-bottom: 10px;

    color: var(--color-primary);

    font-size: clamp(0.8rem, 1vw, 0.95rem);
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.block-faq__text {
    max-width: 720px;

    margin-top: clamp(14px, 2vw, 20px);

    color: var(--color-text-muted);

    font-size: clamp(1rem, 1.3vw, 1.15rem);
    line-height: 1.65;
}


/*
|--------------------------------------------------------------------------
| FAQ Liste
|--------------------------------------------------------------------------
*/

.block-faq__items {
    display: flex;
    flex-direction: column;

    max-width: 1000px;

    gap: 12px;
}


/*
|--------------------------------------------------------------------------
| FAQ Eintrag
|--------------------------------------------------------------------------
*/

.block-faq__item {
    overflow: hidden;

    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: 10px;
}


/*
|--------------------------------------------------------------------------
| Frage
|--------------------------------------------------------------------------
*/

.block-faq__question {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 18px 22px;

    color: var(--color-text);

    font-size: clamp(1rem, 1.2vw, 1.1rem);
    font-weight: 700;
    line-height: 1.4;

    text-align: left;
}


/*
|--------------------------------------------------------------------------
| Accordion Button
|--------------------------------------------------------------------------
*/

button.block-faq__question {
    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease;
}

button.block-faq__question:hover {
    background: var(--color-surface-soft);
}


/*
|--------------------------------------------------------------------------
| Plus / Minus
|--------------------------------------------------------------------------
*/

.block-faq__icon {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    color: var(--color-primary);
    transition: transform 0.2s ease;
}

.block-faq__icon svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
}

.block-faq__question[aria-expanded="true"] .block-faq__icon {
    transform: rotate(180deg);
}


.block-faq__question[aria-expanded="true"] {
    border-bottom: 1px solid var(--color-border);
}

/*
|--------------------------------------------------------------------------
| Antwort
|--------------------------------------------------------------------------
*/

.block-faq__answer {
    padding: 20px 22px 20px;

    color: var(--color-text-muted);

    line-height: 1.7;
}

.block-faq__answer p + p {
    margin-top: 1em;
}


/*
|--------------------------------------------------------------------------
| Accordion geschlossen
|--------------------------------------------------------------------------
*/

.block-faq--accordion .block-faq__answer {
    display: none;
}

.block-faq--accordion
.block-faq__question[aria-expanded="true"]
+ .block-faq__answer {
    display: block;
}


/*
|--------------------------------------------------------------------------
| Ausrichtung
|--------------------------------------------------------------------------
*/

.block-faq--align-center .block-faq__header {
    margin-inline: auto;

    text-align: center;
}

.block-faq--align-center .block-faq__text {
    margin-inline: auto;
    margin-top: clamp(14px, 2vw, 20px);
}

.block-faq--align-center .block-faq__items {
    margin-inline: auto;
}


.block-faq--align-right .block-faq__header {
    margin-left: auto;

    text-align: right;
}

.block-faq--align-right .block-faq__text,
.block-faq--align-right .block-faq__items {
    margin-left: auto;
}









/*
|--------------------------------------------------------------------------
| Contact Form
|--------------------------------------------------------------------------
*/

.block-contact-form {
    padding-block: clamp(40px, 6vw, 80px);
}


/*
|--------------------------------------------------------------------------
| Breiten
|--------------------------------------------------------------------------
*/

.block-contact-form--width-small .container {
    max-width: 700px;
}

.block-contact-form--width-medium .container {
    max-width: 900px;
}

.block-contact-form--width-large .container {
    max-width: 1200px;
}


/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/

.block-contact-form__header {
    max-width: 800px;

    margin-bottom: clamp(28px, 4vw, 44px);
}

.block-contact-form__toptitle {
    margin-bottom: 10px;

    color: var(--color-primary);

    font-size: clamp(0.8rem, 1vw, 0.95rem);
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.block-contact-form__text {
    max-width: 700px;

    margin-top: clamp(14px, 2vw, 20px);

    color: var(--color-text-muted);

    line-height: 1.7;
}


/*
|--------------------------------------------------------------------------
| Formular
|--------------------------------------------------------------------------
*/

.block-contact-form__form {
    width: 100%;
}


/*
|--------------------------------------------------------------------------
| Ausrichtung
|--------------------------------------------------------------------------
*/

.block-contact-form--align-center .block-contact-form__header {
    margin-inline: auto;

    text-align: center;
}

.block-contact-form--align-center .block-contact-form__text {
    margin-inline: auto;
    margin-top: clamp(14px, 2vw, 20px);
}


.block-contact-form--align-right .block-contact-form__header {
    margin-left: auto;

    text-align: right;
}

.block-contact-form--align-right .block-contact-form__text {
    margin-left: auto;
}





/*
|--------------------------------------------------------------------------
| Portal Form
|--------------------------------------------------------------------------
*/

.portal-form {
    display: flex;
    flex-direction: column;

    gap: 22px;

    width: 100%;
}


/*
|--------------------------------------------------------------------------
| Felder
|--------------------------------------------------------------------------
*/

.portal-form__field {
    display: flex;
    flex-direction: column;

    gap: 8px;

    min-width: 0;
}

.portal-form__field > label,
.portal-form__field > legend {
    color: var(--color-text);

    font-size: 0.95rem;
    font-weight: 600;
    line-height: 1.4;
}


/*
|--------------------------------------------------------------------------
| Eingabefelder
|--------------------------------------------------------------------------
*/

.portal-form input[type="text"],
.portal-form input[type="email"],
.portal-form input[type="tel"],
.portal-form input[type="number"],
.portal-form input[type="date"],
.portal-form input[type="time"],
.portal-form input[type="file"],
.portal-form select,
.portal-form textarea {
    width: 100%;

    padding: 12px 14px;

    background: var(--color-surface);
    color: var(--color-text);

    border: 1px solid var(--color-border);
    border-radius: 8px;

    line-height: 1.4;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.portal-form textarea {
    min-height: 150px;
}


/*
|--------------------------------------------------------------------------
| Placeholder
|--------------------------------------------------------------------------
*/

.portal-form input::placeholder,
.portal-form textarea::placeholder {
    color: var(--color-text-muted);

    opacity: 0.7;
}


/*
|--------------------------------------------------------------------------
| Fokus
|--------------------------------------------------------------------------
*/

.portal-form input:focus,
.portal-form select:focus,
.portal-form textarea:focus {
    border-color: var(--color-primary);

    outline: none;

    box-shadow: 0 0 0 3px color-mix(
        in srgb,
        var(--color-primary) 15%,
        transparent
    );
}


/*
|--------------------------------------------------------------------------
| Pflichtfeld
|--------------------------------------------------------------------------
*/

.portal-form__required {
    color: var(--color-primary);
}


/*
|--------------------------------------------------------------------------
| Radio / Checkbox
|--------------------------------------------------------------------------
*/

.portal-form fieldset {
    min-width: 0;

    margin: 0;
    padding: 0;

    border: 0;
}

.portal-form__option {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    cursor: pointer;

    line-height: 1.5;
}

.portal-form__option + .portal-form__option {
    margin-top: 10px;
}

.portal-form__option input[type="checkbox"],
.portal-form__option input[type="radio"] {
    flex: 0 0 auto;

    width: 18px;
    height: 18px;

    margin-top: 3px;

    accent-color: var(--color-primary);
}


/*
|--------------------------------------------------------------------------
| Consent
|--------------------------------------------------------------------------
*/

.portal-form__field--consent {
    font-size: 0.9rem;
}

.portal-form__field--consent .portal-form__option {
    color: var(--color-text-muted);
}


/*
|--------------------------------------------------------------------------
| Datei Upload
|--------------------------------------------------------------------------
*/

.portal-form input[type="file"] {
    padding: 8px;
}

.portal-form input[type="file"]::file-selector-button {
    margin-right: 12px;

    padding: 8px 12px;

    background: var(--color-surface-soft);
    color: var(--color-text);

    border: 1px solid var(--color-border);
    border-radius: 6px;

    cursor: pointer;
}


/*
|--------------------------------------------------------------------------
| Formular Überschrift
|--------------------------------------------------------------------------
*/

.portal-form__heading {
    margin-top: 8px;
}

.portal-form__heading h2,
.portal-form__heading h3,
.portal-form__heading h4 {
    margin: 0;
}


/*
|--------------------------------------------------------------------------
| Hinweistext
|--------------------------------------------------------------------------
*/

.portal-form__text {
    color: var(--color-text-muted);

    line-height: 1.7;
}


/*
|--------------------------------------------------------------------------
| Fehler
|--------------------------------------------------------------------------
*/

.portal-form__error {
    color: #b42318;

    font-size: 0.85rem;
    line-height: 1.4;
}


/*
|--------------------------------------------------------------------------
| Formular Meldungen
|--------------------------------------------------------------------------
*/

.form-message {
    margin-bottom: 24px;

    padding: 14px 18px;

    border: 1px solid var(--color-border);
    border-radius: 8px;

    line-height: 1.5;
}

.form-message--success {
    background: var(--color-surface-soft);
}

.form-message--error {
    color: #b42318;

    background: var(--color-surface);
}


/*
|--------------------------------------------------------------------------
| Submit
|--------------------------------------------------------------------------
*/

.portal-form__actions {
    margin-top: 4px;
}

.portal-form__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 48px;

    padding: 12px 26px;

    background: var(--color-button-background);
    color: var(--color-button-text);

    border-radius: 8px;

    font-weight: 700;
    line-height: 1.2;

    cursor: pointer;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.portal-form__submit:hover {
    background: var(--color-button-hover);
    color: var(--color-button-text);

    transform: translateY(-2px);
}











/*
|--------------------------------------------------------------------------
| Social Media
|--------------------------------------------------------------------------
*/

.block-social-media {
    padding-block: clamp(40px, 6vw, 80px);
}


/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/

.block-social-media__header {
    max-width: 850px;

    margin-bottom: clamp(24px, 4vw, 40px);
}

.block-social-media__toptitle {
    margin-bottom: 10px;

    color: var(--color-primary);

    font-size: clamp(0.8rem, 1vw, 0.95rem);
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.block-social-media__text {
    max-width: 720px;

    margin-top: clamp(14px, 2vw, 20px);

    color: var(--color-text-muted);

    line-height: 1.7;
}


/*
|--------------------------------------------------------------------------
| Items
|--------------------------------------------------------------------------
*/

.block-social-media__items {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;
}


/*
|--------------------------------------------------------------------------
| Social Media Item
|--------------------------------------------------------------------------
*/

.block-social-media__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    color: var(--color-text);

    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.block-social-media__item:hover {
    color: var(--color-primary);

    transform: translateY(-2px);
}


/*
|--------------------------------------------------------------------------
| Icon
|--------------------------------------------------------------------------
*/

.block-social-media__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    line-height: 1;
}


/*
|--------------------------------------------------------------------------
| Icon Größen
|--------------------------------------------------------------------------
*/

.block-social-media--icon-small .block-social-media__icon {
    font-size: 1rem;
}

.block-social-media--icon-medium .block-social-media__icon {
    font-size: 1.25rem;
}

.block-social-media--icon-large .block-social-media__icon {
    font-size: 1.6rem;
}


/*
|--------------------------------------------------------------------------
| Layout: Icons
|--------------------------------------------------------------------------
*/

.block-social-media--icons .block-social-media__item {
    width: 44px;
    height: 44px;

    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: 50%;
}

.block-social-media--icons.block-social-media--icon-small
.block-social-media__item {
    width: 38px;
    height: 38px;
}

.block-social-media--icons.block-social-media--icon-large
.block-social-media__item {
    width: 52px;
    height: 52px;
}


/*
|--------------------------------------------------------------------------
| Layout: Buttons / Labels
|--------------------------------------------------------------------------
*/

.block-social-media--buttons .block-social-media__item,
.block-social-media--labels .block-social-media__item {
    min-height: 42px;

    padding: 9px 14px;

    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: 8px;
}

.block-social-media__label {
    font-size: 0.9rem;
    font-weight: 600;
}


/*
|--------------------------------------------------------------------------
| Layout: Cards
|--------------------------------------------------------------------------
*/

.block-social-media--cards .block-social-media__items {
    display: grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(min(180px, 100%), 1fr)
        );
}

.block-social-media--cards .block-social-media__item {
    justify-content: flex-start;

    min-height: 60px;

    padding: 14px 18px;

    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: 10px;
}


/*
|--------------------------------------------------------------------------
| Ausrichtung
|--------------------------------------------------------------------------
*/

.block-social-media--align-center .block-social-media__header {
    margin-inline: auto;

    text-align: center;
}

.block-social-media--align-center .block-social-media__text {
    margin-inline: auto;
    margin-top: clamp(14px, 2vw, 20px);
}

.block-social-media--align-center .block-social-media__items {
    justify-content: center;
}


.block-social-media--align-right .block-social-media__header {
    margin-left: auto;

    text-align: right;
}

.block-social-media--align-right .block-social-media__text {
    margin-left: auto;
}

.block-social-media--align-right .block-social-media__items {
    justify-content: flex-end;
}



/*
|--------------------------------------------------------------------------
| Social Media Icons
|--------------------------------------------------------------------------
*/

.block-social-media__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 42px;
    height: 42px;
}

.block-social-media__icon svg {
    width: 32px;
    height: 32px;

    fill: currentColor;
}


/*
|--------------------------------------------------------------------------
| Markenfarben
|--------------------------------------------------------------------------
*/

.block-social-media__item--facebook {
    color: #1877F2;
}

.block-social-media__item--instagram {
    color: #E4405F;
}

.block-social-media__item--youtube {
    color: #FF0000;
}

.block-social-media__item--tiktok {
    color: #000000;
}

.block-social-media__item--linkedin {
    color: #0A66C2;
}

.block-social-media__item--pinterest {
    color: #E60023;
}

.block-social-media__item--x {
    color: #000000;
}

.block-social-media__item--threads {
    color: #000000;
}

.block-social-media__item--whatsapp {
    color: #25D366;
}

.block-social-media__item--telegram {
    color: #26A5E4;
}

.block-social-media__item--xing {
    color: #006567;
}



/*
|--------------------------------------------------------------------------
| Divider
|--------------------------------------------------------------------------
*/

.block-divider {
    width: 100%;
}


/*
|--------------------------------------------------------------------------
| Abstände oben
|--------------------------------------------------------------------------
*/

.block-divider--mt-0 {
    margin-top: 0;
}

.block-divider--mt-20 {
    margin-top: 20px;
}

.block-divider--mt-40 {
    margin-top: 40px;
}

.block-divider--mt-60 {
    margin-top: 60px;
}

.block-divider--mt-80 {
    margin-top: 80px;
}


/*
|--------------------------------------------------------------------------
| Abstände unten
|--------------------------------------------------------------------------
*/

.block-divider--mb-0 {
    margin-bottom: 0;
}

.block-divider--mb-20 {
    margin-bottom: 20px;
}

.block-divider--mb-40 {
    margin-bottom: 40px;
}

.block-divider--mb-60 {
    margin-bottom: 60px;
}

.block-divider--mb-80 {
    margin-bottom: 80px;
}


/*
|--------------------------------------------------------------------------
| Linie
|--------------------------------------------------------------------------
*/

.block-divider__line {
    display: block;
    width: 100%;
    height: 0;

    border-top: 1px solid var(--color-border);
}


/*
|--------------------------------------------------------------------------
| Stil
|--------------------------------------------------------------------------
*/

.block-divider--solid .block-divider__line {
    border-top-style: solid;
}

.block-divider--dashed .block-divider__line {
    border-top-style: dashed;
}

.block-divider--dotted .block-divider__line {
    border-top-style: dotted;
}


/*
|--------------------------------------------------------------------------
| Stärke
|--------------------------------------------------------------------------
*/

.block-divider--thickness-1 .block-divider__line {
    border-top-width: 1px;
}

.block-divider--thickness-2 .block-divider__line {
    border-top-width: 2px;
}

.block-divider--thickness-3 .block-divider__line {
    border-top-width: 3px;
}


/*
|--------------------------------------------------------------------------
| Breite
|--------------------------------------------------------------------------
*/

.block-divider--width-25 .block-divider__line {
    width: 25%;
}

.block-divider--width-50 .block-divider__line {
    width: 50%;
}

.block-divider--width-75 .block-divider__line {
    width: 75%;
}

.block-divider--width-100 .block-divider__line {
    width: 100%;
}


/*
|--------------------------------------------------------------------------
| Ausrichtung
|--------------------------------------------------------------------------
*/

.block-divider--align-left .block-divider__line {
    margin-right: auto;
}

.block-divider--align-center .block-divider__line {
    margin-inline: auto;
}

.block-divider--align-right .block-divider__line {
    margin-left: auto;
}






/*
|--------------------------------------------------------------------------
| HTML
|--------------------------------------------------------------------------
*/

.block-html {
    padding-block: clamp(30px, 5vw, 60px);
}


/*
|--------------------------------------------------------------------------
| Breiten
|--------------------------------------------------------------------------
*/

.block-html--width-narrow .block-html__content {
    max-width: 800px;
}

.block-html--width-standard .block-html__content {
    max-width: 1100px;
}

.block-html--width-full .block-html__content {
    max-width: none;
}


/*
|--------------------------------------------------------------------------
| Ausrichtung
|--------------------------------------------------------------------------
*/

.block-html--align-left .block-html__content {
    margin-right: auto;
}

.block-html--align-center .block-html__content {
    margin-inline: auto;

    text-align: center;
}

.block-html--align-right .block-html__content {
    margin-left: auto;

    text-align: right;
}


/*
|--------------------------------------------------------------------------
| Inhalt
|--------------------------------------------------------------------------
*/

.block-html__content {
    width: 100%;
}

.block-html__content > * + * {
    margin-top: 1em;
}

.block-html__content img {
    max-width: 100%;
    height: auto;
}






/*
|--------------------------------------------------------------------------
| Download
|--------------------------------------------------------------------------
*/

.block-download {
    padding-block: clamp(40px, 6vw, 80px);
}


/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/

.block-download__header {
    max-width: 900px;
    margin-bottom: clamp(24px, 4vw, 40px);
}

.block-download__toptitle {
    margin-bottom: 8px;

    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    color: var(--color-primary);
}

.block-download__headline {
    margin: 0;
}

.block-download__text {
    margin-top: 12px;

    color: var(--color-text-muted);
}


/*
|--------------------------------------------------------------------------
| Downloads
|--------------------------------------------------------------------------
*/

.block-download__items {
    display: grid;
    gap: 16px;
}


/*
|--------------------------------------------------------------------------
| Download Item
|--------------------------------------------------------------------------
*/

.block-download__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    padding: clamp(18px, 2.5vw, 26px);

    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
}

.block-download__content {
    min-width: 0;
}

.block-download__title {
    margin: 0;

    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
}

.block-download__description {
    margin-top: 6px;

    color: var(--color-text-muted);
}


/*
|--------------------------------------------------------------------------
| Button
|--------------------------------------------------------------------------
*/

.block-download__action {
    flex: 0 0 auto;
}

.block-download__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;
    padding: 10px 20px;

    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;

    color: var(--color-button-text);
    background: var(--color-button-background);

    border-radius: 8px;

    transition:
        background-color 0.2s ease,
        transform 0.2s ease;
}

.block-download__button:hover {
    color: var(--color-button-text);
    background: var(--color-button-hover);
}

.block-download__button:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}


/*
|--------------------------------------------------------------------------
| Ausrichtung
|--------------------------------------------------------------------------
*/

.block-download--align-center .block-download__header {
    margin-inline: auto;
    text-align: center;
}

.block-download--align-right .block-download__header {
    margin-left: auto;
    text-align: right;
}


/*
|--------------------------------------------------------------------------
| Grid Layout
|--------------------------------------------------------------------------
*/

.block-download--grid .block-download__items {
    grid-template-columns: repeat(
        auto-fit,
        minmax(min(100%, 280px), 1fr)
    );
}

.block-download--grid .block-download__item {
    flex-direction: column;
    align-items: flex-start;
}

.block-download--grid .block-download__action {
    margin-top: auto;
}


/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media (max-width: 600px) {

    .block-download__item {
        flex-direction: column;
        align-items: flex-start;
    }

    .block-download__action,
    .block-download__button {
        width: 100%;
    }
}












/*
|--------------------------------------------------------------------------
| Produkte
|--------------------------------------------------------------------------
*/

.product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: clamp(24px, 3vw, 40px);
}


.block-image-box__toptitle {
    margin-bottom: clamp(8px, 1vw, 12px);
    color: var(--color-primary);
    font-size: clamp(0.8rem, 1vw, 0.95rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


/*
|--------------------------------------------------------------------------
| Tablet
|--------------------------------------------------------------------------
*/

@media (max-width: 980px) {

    .product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/*
|--------------------------------------------------------------------------
| Mobile
|--------------------------------------------------------------------------
*/

@media (max-width: 640px) {

    .product-grid {
        grid-template-columns: 1fr;
    }

}





/*
|--------------------------------------------------------------------------
| Produktkarte
|--------------------------------------------------------------------------
*/

.product-card {
    display: flex;
    flex-direction: column;

    min-width: 0;
    overflow: hidden;

    background: var(--color-surface);

    border: 1px solid var(--color-border);
    border-radius: 16px;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.product-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 16px 40px rgba(0, 0, 0, 0.08);
}


/*
|--------------------------------------------------------------------------
| Produktbild
|--------------------------------------------------------------------------
*/

.product-image {
    overflow: hidden;

    aspect-ratio: 1 / 1;

    background: var(--color-surface-soft);
}

.product-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.35s ease;
}

.product-card:hover .product-image img {
    transform: scale(1.025);
}


/*
|--------------------------------------------------------------------------
| Produktkarten Inhalt
|--------------------------------------------------------------------------
*/

.product-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;

    padding: clamp(20px, 2.5vw, 28px);
}

.product-content h3 {
    margin: 0;

    color: var(--color-text);

    font-size: clamp(1.2rem, 1.6vw, 1.5rem);
    line-height: 1.25;
}

.product-content p {
    margin-top: 12px;

    color: var(--color-text-muted);

    line-height: 1.65;
}


/*
|--------------------------------------------------------------------------
| Produktkarten Button
|--------------------------------------------------------------------------
*/

.product-content .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;

    margin-top: auto;
    padding: 11px 20px;

    background: var(--color-button-background);
    color: var(--color-button-text);

    border-radius: 8px;

    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;

    transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.product-content p + .btn {
    margin-top: 22px;
}

.product-content .btn:hover {
    background: var(--color-button-hover);
    color: var(--color-button-text);

    transform: translateY(-2px);
}


/*
|--------------------------------------------------------------------------
| Produktdetail
|--------------------------------------------------------------------------
*/

.product-detail {
    width: 100%;
}


/*
|--------------------------------------------------------------------------
| Produktdetail Hero
|--------------------------------------------------------------------------
*/

.product-detail-hero {
    padding-block: clamp(50px, 7vw, 100px);

    background: var(--color-surface-soft);
}

.product-detail-grid {
    display: grid;
    grid-template-columns:
        minmax(280px, 520px)
        minmax(0, 1fr);

    align-items: center;

    gap: clamp(40px, 7vw, 100px);
}


/*
|--------------------------------------------------------------------------
| Produktdetail Bild
|--------------------------------------------------------------------------
*/

.product-detail-image {
    overflow: hidden;

    aspect-ratio: 1 / 1;

    background: var(--color-surface);

    border-radius: 18px;

    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.1);
}

.product-detail-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/*
|--------------------------------------------------------------------------
| Produktdetail Inhalt
|--------------------------------------------------------------------------
*/

.product-detail-content {
    min-width: 0;
}

.product-detail-category {
    margin-bottom: 14px;

    color: var(--color-primary);

    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.3;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.product-detail-content h1 {
    max-width: 18ch;

    margin: 0;

    color: var(--color-text);

    font-size: clamp(2.3rem, 5vw, 4.5rem);
    line-height: 1.05;
}

.product-detail-intro {
    max-width: 720px;

    margin-top: clamp(20px, 3vw, 30px);

    color: var(--color-text-muted);

    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    line-height: 1.7;
}


/*
|--------------------------------------------------------------------------
| Produktdetail Beschreibung
|--------------------------------------------------------------------------
*/

.product-detail-description {
    padding-block: clamp(55px, 8vw, 110px);
}

.product-detail-description-inner {
    width: min(100%, 900px);

    margin-inline: auto;
}

.product-detail-description-inner h2 {
    margin-bottom: clamp(20px, 3vw, 30px);

    color: var(--color-text);

    font-size: clamp(1.8rem, 3vw, 2.6rem);
}

.product-detail-text {
    color: var(--color-text);

    font-size: clamp(1rem, 1.2vw, 1.1rem);
    line-height: 1.8;
}

.product-detail-text p + p {
    margin-top: 1.25em;
}

.product-image.is-placeholder img {
    filter: grayscale(1);
    opacity: 0.5;

    transform: scale(1.03);
}


.product-detail-image.is-placeholder img {
    filter: grayscale(1);
    opacity: 0.5;
}

/*
|--------------------------------------------------------------------------
| Produktdetail Responsive
|--------------------------------------------------------------------------
*/

@media (max-width: 800px) {

    .product-detail-grid {
        grid-template-columns: 1fr;

        gap: clamp(28px, 6vw, 44px);
    }

    .product-detail-image {
        width: min(100%, 520px);

        margin-inline: auto;
    }

    .product-detail-content h1 {
        max-width: none;
    }

}







/* ==========================================================================
   Blog Overview
   ========================================================================== */

.blog-overview-content {
    padding:
        clamp(56px, 7vw, 96px)
        0;
}


/* Header
   ========================================================================== */

.blog-section-header {
    max-width: 760px;
    margin-bottom: clamp(36px, 5vw, 56px);
}

.blog-eyebrow {
    display: inline-block;
    margin-bottom: 10px;

    color: var(--color-primary);

    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.2;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.blog-section-header h2 {
    margin: 0;

    color: var(--color-text);

    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.08;
}

.blog-section-header p {
    max-width: 650px;
    margin:
        clamp(14px, 2vw, 20px)
        0
        0;

    color: var(--color-text-muted);

    font-size: clamp(1rem, 1.3vw, 1.15rem);
    line-height: 1.7;
}


/* Grid
   ========================================================================== */

.blog-grid {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: clamp(24px, 3vw, 40px);
}


/* Card
   ========================================================================== */

.blog-card {
    display: flex;
    flex-direction: column;

    min-width: 0;
    overflow: hidden;

    background: var(--color-surface);

    border:
        1px solid
        var(--color-border);

    border-radius: 16px;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.blog-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 16px 40px
        rgba(0, 0, 0, 0.08);
}


/* Card Image
   ========================================================================== */

.blog-card-image {
    display: block;

    overflow: hidden;

    aspect-ratio: 16 / 10;

    background:
        var(--color-surface-soft);
}

.blog-card-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.35s ease;
}

.blog-card:hover .blog-card-image img {
    transform: scale(1.025);
}


/* Card Content
   ========================================================================== */

.blog-card-content {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;

    padding:
        clamp(20px, 2.5vw, 28px);
}

.blog-card-date {
    margin-bottom: 12px;

    color: var(--color-text-muted);

    font-size: 0.82rem;
    line-height: 1.4;
}

.blog-card-content h2 {
    margin: 0;

    font-size:
        clamp(1.2rem, 1.6vw, 1.5rem);

    line-height: 1.25;
}

.blog-card-content h2 a {
    color: var(--color-text);
    text-decoration: none;
}

.blog-card-content h2 a:hover {
    color: var(--color-primary);
}

.blog-card-content p {
    margin:
        14px
        0
        0;

    color: var(--color-text-muted);

    line-height: 1.65;
}


/* Weiterlesen
   ========================================================================== */

.blog-card-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-top: auto;
    padding-top: 22px;

    color: var(--color-primary);

    font-weight: 700;

    text-decoration: none;
}

.blog-card-more span {
    transition:
        transform 0.2s ease;
}

.blog-card-more:hover span {
    transform: translateX(4px);
}


/* Empty
   ========================================================================== */

.blog-empty {
    grid-column: 1 / -1;

    padding: 32px;

    background:
        var(--color-surface-soft);

    border-radius: 16px;

    color:
        var(--color-text-muted);
}


/* Pagination
   ========================================================================== */

.blog-pagination {
    margin-top:
        clamp(36px, 5vw, 56px);
}


/* Responsive
   ========================================================================== */

@media (max-width: 980px) {

    .blog-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {

    .blog-grid {
        grid-template-columns: 1fr;
    }
}






/* ==========================================================================
   Blog Post
   ========================================================================== */

.blog-post {
    background: var(--color-surface);
}


/* Hero
   ========================================================================== */

.blog-post-hero {
    padding:
        clamp(48px, 7vw, 96px)
        0;

    background:
        var(--color-surface-soft);
}

.blog-post-hero-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(320px, 0.85fr);

    align-items: center;

    gap:
        clamp(40px, 6vw, 90px);
}


/* Hero Content
   ========================================================================== */

.blog-post-hero-content {
    min-width: 0;
}

.blog-post-hero-content .blog-eyebrow {
    margin-bottom: 16px;
}

.blog-post-hero-content h1 {
    max-width: 16ch;

    margin: 0;

    color: var(--color-text);

    font-size:
        clamp(2.3rem, 5vw, 4.8rem);

    line-height: 1.03;

    letter-spacing: -0.035em;
}

.blog-post-excerpt {
    max-width: 680px;

    margin:
        clamp(20px, 3vw, 30px)
        0
        0;

    color:
        var(--color-text-muted);

    font-size:
        clamp(1.05rem, 1.5vw, 1.25rem);

    line-height: 1.7;
}

.blog-post-date {
    display: inline-block;

    margin-top:
        clamp(20px, 3vw, 28px);

    color:
        var(--color-text-muted);

    font-size: 0.88rem;

    line-height: 1.4;
}


/* Hero Image
   ========================================================================== */

.blog-post-hero-image {
    overflow: hidden;

    aspect-ratio: 4 / 3;

    background:
        var(--color-surface);

    border-radius: 18px;

    box-shadow:
        0 18px 50px
        rgba(0, 0, 0, 0.09);
}

.blog-post-hero-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* Article Body
   ========================================================================== */

.blog-post-body {
    padding:
        clamp(56px, 8vw, 110px)
        0;
}

.blog-post-content {
    width: 100%;
    max-width: 860px;

    margin:
        0
        auto;

    color:
        var(--color-text);

    font-size:
        clamp(1rem, 1.2vw, 1.1rem);

    line-height: 1.8;
}


/* Headlines
   ========================================================================== */

.blog-post-content h2 {
    margin:
        clamp(42px, 6vw, 64px)
        0
        18px;

    color:
        var(--color-text);

    font-size:
        clamp(1.7rem, 3vw, 2.5rem);

    line-height: 1.15;
}

.blog-post-content h3 {
    margin:
        clamp(32px, 5vw, 46px)
        0
        14px;

    color:
        var(--color-text);

    font-size:
        clamp(1.35rem, 2.2vw, 1.8rem);

    line-height: 1.25;
}

.blog-post-content h4 {
    margin:
        30px
        0
        12px;

    color:
        var(--color-text);

    font-size: 1.15rem;

    line-height: 1.3;
}


/* Text
   ========================================================================== */

.blog-post-content p {
    margin:
        0
        0
        1.5em;
}

.blog-post-content a {
    color:
        var(--color-primary);

    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}


/* Lists
   ========================================================================== */

.blog-post-content ul,
.blog-post-content ol {
    margin:
        0
        0
        1.7em;

    padding-left: 1.4em;
}

.blog-post-content li {
    margin-bottom: 0.55em;
}


/* Article Images
   ========================================================================== */

.blog-post-content img {
    display: block;

    max-width: 100%;
    height: auto;

    margin:
        clamp(30px, 5vw, 50px)
        auto;

    border-radius: 14px;
}


/* Blockquotes
   ========================================================================== */

.blog-post-content blockquote {
    margin:
        clamp(32px, 5vw, 50px)
        0;

    padding:
        8px
        0
        8px
        clamp(20px, 3vw, 30px);

    border-left:
        4px solid
        var(--color-primary);

    color:
        var(--color-text-muted);

    font-size:
        clamp(1.05rem, 1.5vw, 1.2rem);

    line-height: 1.7;
}

.blog-post-content blockquote p:last-child {
    margin-bottom: 0;
}


/* Navigation Wrapper
   ========================================================================== */

.blog-post-navigation-wrapper {
    max-width: 1100px;

    margin:
        clamp(56px, 8vw, 100px)
        auto
        0;

    padding-top:
        clamp(32px, 5vw, 48px);

    border-top:
        1px solid
        var(--color-border);
}


/* Responsive
   ========================================================================== */

@media (max-width: 900px) {

    .blog-post-hero-grid {
        grid-template-columns: 1fr;
    }

    .blog-post-hero-content h1 {
        max-width: 20ch;
    }

    .blog-post-hero-image {
        max-width: 720px;
    }
}


@media (max-width: 640px) {

    .blog-post-hero {
        padding:
            40px
            0;
    }

    .blog-post-hero-grid {
        gap: 32px;
    }

    .blog-post-hero-content h1 {
        max-width: none;

        font-size:
            clamp(2rem, 10vw, 3rem);
    }

    .blog-post-hero-image {
        border-radius: 14px;
    }

    .blog-post-body {
        padding:
            48px
            0;
    }
}





/* ==========================================================================
   Blog Post Navigation
   ========================================================================== */

.blog-post-navigation {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        clamp(24px, 4vw, 60px);
}


/* Navigation Side
   ========================================================================== */

.blog-post-navigation-side {
    min-width: 0;
}

.blog-post-navigation-next {
    text-align: right;
}


/* Link
   ========================================================================== */

.blog-post-navigation-link {
    display: flex;
    align-items: center;

    min-width: 0;

    gap:
        clamp(16px, 2vw, 24px);

    color:
        var(--color-text);

    text-decoration: none;
}

.blog-post-navigation-next
.blog-post-navigation-link {
    justify-content: flex-end;
}


/* Image
   ========================================================================== */

.blog-post-navigation-image {
    flex:
        0
        0
        clamp(80px, 9vw, 120px);

    overflow: hidden;

    aspect-ratio: 1 / 1;

    background:
        var(--color-surface-soft);

    border-radius: 12px;
}

.blog-post-navigation-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 0.3s ease;
}

.blog-post-navigation-link:hover
.blog-post-navigation-image img {
    transform: scale(1.05);
}


/* Content
   ========================================================================== */

.blog-post-navigation-content {
    display: flex;
    flex-direction: column;

    min-width: 0;

    gap: 8px;
}

.blog-post-navigation-next
.blog-post-navigation-content {
    align-items: flex-end;
}


/* Direction
   ========================================================================== */

.blog-post-navigation-direction {
    display: flex;
    align-items: center;

    gap: 8px;

    color:
        var(--color-primary);

    font-size: 0.78rem;
    font-weight: 700;

    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.blog-post-navigation-next
.blog-post-navigation-direction {
    justify-content: flex-end;
}


/* Title
   ========================================================================== */

.blog-post-navigation-title {
    max-width: 320px;

    font-size:
        clamp(1rem, 1.4vw, 1.2rem);

    font-weight: 700;
    line-height: 1.35;

    transition:
        color 0.2s ease;
}

.blog-post-navigation-link:hover
.blog-post-navigation-title {
    color:
        var(--color-primary);
}






/* ==========================================================================
   Lightbox
   ========================================================================== */

.portal-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: clamp(20px, 4vw, 60px);

    background: rgba(0, 0, 0, 0.88);

    cursor: zoom-out;
}

.portal-lightbox__inner {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    max-width: 100%;
    max-height: 100%;
}

.portal-lightbox__image {
    display: block;

    max-width: 100%;
    max-height: calc(100vh - 80px);

    width: auto;
    height: auto;

    object-fit: contain;

    border-radius: 8px;

    cursor: default;
}

.portal-lightbox__close {
    position: absolute;
    top: -18px;
    right: -18px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    padding: 0;

    background: #fff;
    color: #222;

    border: 0;
    border-radius: 50%;

    font-size: 28px;
    line-height: 1;

    cursor: pointer;
}

.portal-lightbox-open {
    overflow: hidden;
}




/* ==========================================================================
   Kategorie
   ========================================================================== */

.block-category{
    padding:clamp(40px, 6vw, 80px);
}

.block-category__header {
    max-width: 760px;
    margin-bottom: 32px;
}


.block-category__toptitle {
    margin-bottom: clamp(8px, 1vw, 12px);
    color: var(--color-primary);
    font-size: clamp(0.8rem, 1vw, 0.95rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.block-category__headline {
    margin: 0;
}

.block-category__text {
    margin-top: 12px;
    line-height: 1.7;
}


/* Slider
   ========================================================================== */

.block-category__slider {
    width: 100%;
}

.block-category__viewport {
    width: 100%;
    overflow: hidden;
}

.block-category__track {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(min(280px, 100%), 1fr)
    );
    gap: 24px;
}


/* Aktiver Slider
   ========================================================================== */

.block-category__slider--active .block-category__track {
    display: flex;
    gap: 24px;

    transition: transform 0.5s ease;
}

.block-category__slider--active .block-category__item {
    flex: 0 0 calc((100% - 48px) / 3);
    min-width: 0;
}


/* Navigation
   ========================================================================== */

.block-category__navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;

    margin-top: 24px;
}

.block-category__arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;
    padding: 0;

    border: 1px solid var(--color-border);
    border-radius: 50%;

    background: transparent;
    color: var(--color-text);

    font: inherit;
    font-size: 1.5rem;
    line-height: 1;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}

.block-category__arrow:hover {
    background: var(--color-surface-soft);
}

.block-category__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}


.block-category__dot {
    width: 8px;
    height: 8px;
    padding: 0;

    border: 0;
    border-radius: 50%;

    background: var(--color-border);

    cursor: pointer;

    transition:
        width 0.2s ease,
        background 0.2s ease;
}

.block-category__dot.is-active {
    border-radius: 999px;
    background: var(--color-primary);
}


/* Karte
   ========================================================================== */

.block-category__item {
    display: flex;
    flex-direction: column;
    min-width: 0;

    overflow: hidden;

    color: inherit;
    text-decoration: none;

    background: var(--color-surface-soft);
    border: 1px solid var(--color-border);
    border-radius: 16px;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.block-category__item:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}


/* Bild
   ========================================================================== */

.block-category__image {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--color-surface-soft);
}

.block-category__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;

    transition: transform 0.35s ease;
}

.block-category__item:hover .block-category__image img {
    transform: scale(1.035);
}


/* Inhalt
   ========================================================================== */

.block-category__content {
    padding: 22px;
}

.block-category__title {
    margin: 0;

    font-family: var(--font-heading);
    font-size: clamp(1.15rem, 2vw, 1.35rem);
    line-height: 1.25;
}

.block-category__description {
    margin-top: 10px;

    color: var(--color-text-muted);
    line-height: 1.6;
}











/* =========================================================
   PRODUCT
   ========================================================= */

.block-product__header {
    max-width: 760px;
    margin-bottom: clamp(28px, 4vw, 44px);
}

.block-product__toptitle {
    margin-bottom: clamp(8px, 1vw, 12px);
    color: var(--color-primary);
    font-size: clamp(0.8rem, 1vw, 0.95rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.block-product__headline {
    margin: 0;
}

.block-product__text {
    margin-top: 14px;
    line-height: 1.7;
}

.block-product__items {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(min(280px, 100%), 1fr)
    );
    gap: 24px;
}

.block-product__item {
    min-width: 0;
    overflow: hidden;
    background: var(--color-surface-soft);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.block-product__item:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}

.block-product__image {
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.block-product__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.block-product__item:hover .block-product__image img {
    transform: scale(1.025);
}

.block-product__content {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 15px;
}

.block-product__category {
    margin-bottom: 7px;
    color: var(--color-primary);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.block-product__title {
    margin: 0;
    font-size: clamp(1.1rem, 1.4vw, 1.3rem);
    line-height: 1.35;
}

.block-product__description {
    margin-top: 10px;
    line-height: 1.6;
}

.block-product__duration {
    margin-top: 12px;
    font-size: 0.9rem;
    opacity: 0.75;
}

.block-product__duration-label {
    font-weight: 600;
    color: var(--color-text);
    margin-right: 4px;
}

.block-product__demo {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-primary);
    margin-top: auto;
    padding-top: 20px;
}



/* =========================================================
   PRODUCT SLIDER
   ========================================================= */

.block-product__slider {
    width: 100%;
}

.block-product__viewport {
    width: 100%;
    overflow: hidden;
}

.block-product__track {
    display: grid;
    grid-template-columns: repeat(
        auto-fit,
        minmax(min(280px, 100%), 1fr)
    );
    gap: 24px;
}

.block-product__slider--active .block-product__track {
    display: flex;
    gap: 24px;
    transition: transform 0.5s ease;
}

.block-product__slider--active .block-product__item {
    flex: 0 0 calc((100% - 48px) / 3);
    min-width: 0;
}

.block-product__item {
    display: flex;
    flex-direction: column;
}

.block-product__navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 24px;
}

.block-product__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: transparent;
    color: var(--color-text);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

.block-product__arrow:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.block-product__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.block-product__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--color-border);
    cursor: pointer;
    transition:
        width 0.2s ease,
        background 0.2s ease;
}

.block-product__dot.is-active {
    border-radius: 999px;
    background: var(--color-primary);
}


/* Responsive
   ========================================================================== */

@media (max-width: 700px) {

    .blog-post-navigation {
        grid-template-columns: 1fr;

        gap: 24px;
    }


    .blog-post-navigation-side {
        padding:
            18px
            0;
    }


    .blog-post-navigation-next {
        text-align: left;
    }


    .blog-post-navigation-next
    .blog-post-navigation-link {
        flex-direction: row-reverse;

        justify-content: flex-end;
    }


    .blog-post-navigation-next
    .blog-post-navigation-content {
        align-items: flex-start;
    }


    .blog-post-navigation-next
    .blog-post-navigation-direction {
        justify-content: flex-start;
    }


    .blog-post-navigation-title {
        max-width: none;
    }
}