/*
Theme Name: PiAS Theme
Author: PiAS education GmbH
Description: Eigenes WordPress-Block-Theme für PiAS education.
Version: 1.0.3
Text Domain: pias-theme
*/

/* Geist – regulär */
@font-face {
    font-family: 'Geist';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/geist/geist-v4-latin-regular.woff2')
         format('woff2');
}

/* Sour Gummy – regulär */
@font-face {
    font-family: 'Sour Gummy';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/sour-gummy/sour-gummy-v3-latin-regular.woff2')
         format('woff2');
}

@font-face {
    font-family: 'Sour Gummy';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/sour-gummy/sour-gummy-v3-latin-600.woff2')
         format('woff2');
}

:root {
    --pias-content-width: 80%;
}

/* PiAS Navigation */

.pias-navigation {
    width: var(--pias-content-width);
    max-width: none;
    margin-inline: auto;

    font-family: 'Sour Gummy', sans-serif;
}

/* Menüpunkte */

.pias-nav-section .pias-navigation
.wp-block-navigation-item__content {
    color: #FFFFFF !important;
    font-family: 'Sour Gummy', sans-serif;
    font-size: 1.5rem;
    font-weight: 500;
    text-transform: uppercase;

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

/* Aktuelle Seite in der Navigation hervorheben */

.pias-nav-section .pias-navigation
.wp-block-navigation-item__content[aria-current="page"],
.pias-nav-section .pias-navigation
.current-menu-item > .wp-block-navigation-item__content {
    color: #D5A849 !important;
}

/* Falls WordPress die Farbe direkt am Text setzt */

.pias-nav-section .pias-navigation
.wp-block-navigation-item__label {
    color: inherit;
}

/* Hover und Tastaturfokus */

.pias-nav-section .pias-navigation
.wp-block-navigation-item__content:hover,
.pias-nav-section .pias-navigation
.wp-block-navigation-item__content:focus-visible {
    color: #D5A849 !important;
    transform: scale(1.1);
}

/* Abstand zwischen den Menüpunkten */

.pias-navigation .wp-block-navigation__container {
    gap: 3rem;
    justify-content: center;
}

/* Hintergrund der Navigation */

.pias-nav-section {
    background: #003333;
    border-top: 1.25rem solid #94B9B8;
    padding: 0.9375rem 1rem;
}

/* Gemeinsame Inhaltsbreite */

.pias-navigation,
.pias-footer {
    width: var(--pias-content-width);
    max-width: none;
    margin-inline: auto;
}

/* PiAS Navigation: geöffnetes mobiles Menü */

.pias-nav-section
.wp-block-navigation__responsive-container.is-menu-open {
    background-color: #003333 !important;
    color: #FFFFFF !important;
}

/* Menüpunkte und Schließen-Symbol */

.pias-nav-section
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item__content,

.pias-nav-section
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation__responsive-container-close {
    color: #FFFFFF !important;
}

/* Hover / Tastaturfokus */

.pias-nav-section
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item__content:hover,

.pias-nav-section
.wp-block-navigation__responsive-container.is-menu-open
.wp-block-navigation-item__content:focus-visible {
    color: #D5A849 !important;
}

/* hide navigation entry for start on desktop */
.pias-mobile-logo-link {
    display: none !important;
}

/* Navigation auf normalen Seiten: Logo + Menüpunkte */

.pias-page-nav-inner {
    box-sizing: border-box;
    width: var(--pias-content-width);
    max-width: none;
    margin-inline: auto;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
}

.pias-nav-logo {
    display: block;
    flex: 0 0 auto;
}

.pias-nav-logo img {
    display: block;
    width: 5rem;
    height: auto;
    /* transition "speed": */
    transition: transform 0.35s ease;
}

/* Animation PiAS-Logo bei onMouseOver */
.pias-nav-logo:hover img,
.pias-nav-logo:focus-visible img{
    transform: scale(1.05);
}

.pias-page-nav-inner .pias-navigation {
    width: auto;
    margin-inline: 0;
}

@media (max-width: 767px) {

    /* Mobiles Burgermenü */
    .pias-nav-section
    .wp-block-navigation__responsive-container-open {
        position: relative;
        width: 2rem;
        height: 1.5rem;
        padding: 0;
        border: 0;
        background: transparent;
    }

    .pias-nav-section
    .wp-block-navigation__responsive-container-open svg {
        display: none;
    }

    .pias-nav-section
    .wp-block-navigation__responsive-container-open::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;

        width: 100%;
        height: 3px;

        background: #94B9B8;
        border-radius: 999px;

        transform: translateY(-50%);

        box-shadow:
            0 -8px 0 #94B9B8,
            0  8px 0 #94B9B8;
    }

    /* PiAS-Logo nur im mobilen Menü */
    .pias-mobile-logo-link {
        display: block !important;
        margin-bottom: 1.5rem;
    }

    .pias-mobile-logo-link
    .wp-block-navigation-item__content {
        display: block;

        width: 7rem;
        height: 3rem;

        padding: 0 !important;

        background-image:
            url('/wp-content/themes/pias-theme/assets/images/PiAS_Logo_klein_gruen.webp');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;

        font-size: 0 !important;
    }
}


/* PiAS Footer */

.pias-footer {
    max-width: none;
    margin-inline: auto;
    overflow: hidden;
    border-radius: 5rem 5rem 0 0;
}

.pias-footer-top {
    gap: 0;
    margin: 0;
}

.pias-footer-brand {
    background: #970741;
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pias-footer-logo img {
    width: 100%;
    max-width: 165px;
    height: auto;
}

.pias-footer-sponsors {
    background: #FFFFFF;
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pias-footer-funding img {
    width: 100%;
    height: auto;
}

.pias-footer-bottom {
    background: #94B9B8;
    color: #FFFFFF;
    padding: 1rem 1.5rem;
    font-family: 'Geist', sans-serif;
    font-size: 0.875rem;
}

.pias-footer-navigation .wp-block-navigation-item__content {
    color: #FFFFFF;
}

/* Dunkelgrüner Hintergrund über die gesamte Breite des Footers */

footer.wp-block-template-part {
    width: 100%;
    max-width: none;
    background-color: #003333;

    margin-block-start: 0;
    padding-top: 3rem;
}


/* Footer gegen Gutenberg-Layoutbegrenzungen absichern */

footer.wp-block-template-part .pias-footer {
    box-sizing: border-box;

    width: 80vw !important;
    max-width: none !important;

    margin-inline: auto !important;

    border-radius: 5rem 5rem 0 0 !important;
    overflow: hidden !important;
}

/* Innere Footer-Bereiche sollen die ganze Footer-Breite nutzen */

.pias-footer > .pias-footer-top,
.pias-footer > .pias-footer-bottom {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
}

/* obere Rundung zusätzlich absichern */

.pias-footer-top {
    border-radius: 5rem 5rem 0 0;
    overflow: hidden;
}

@media (max-width: 767px) {

    footer.wp-block-template-part .pias-footer {
        width: calc(100% - 2rem) !important;
        border-radius: 2rem 2rem 0 0 !important;
    }

    .pias-footer-top {
        flex-direction: column;
        border-radius: 2rem 2rem 0 0;
    }
}


/* PiAS Startseiten-Banner */

.pias-hero {
    position: relative;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

/* Großes Hintergrundbild */

.pias-hero > .pias-hero__background {
    width: 100%;
    max-width: none;
    margin: 0;
}

.pias-hero__background img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
}

/* Darüberliegendes Logo */

/*.pias-hero .pias-hero__logo {
    position: absolute;
    z-index: 2;

    left: 50%;
    top: 25%;
    transform: translate(-50%, -50%);

    width: 35%;
    max-width: none;
    margin: 0;
}*/

.wp-block-group.pias-hero
    > figure.wp-block-image.pias-hero__logo {
    position: absolute;
    z-index: 2;

    left: 50%;
    top: 25%;

    transform: translate(-50%, -50%);

    width: 35%;
    max-width: none;
    margin: 0;
}

.pias-hero__logo a {
    display: block;
    width: 100%;
    cursor: pointer;
}

.pias-hero__logo img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;

    transition: transform 0.3s ease;
}

/* Hover-Animation */

.pias-hero__logo a:hover img,
.pias-hero__logo a:focus-visible img {
    transform: rotate(5deg);
}

/* Optional: wie im bisherigen HTML-Entwurf
   das große Banner auf kleineren Displays ausblenden. */

/*
@media (max-width: 1023px) {
    .pias-hero {
        display: none;
    }
}
*/

/* Abstände zwischen Footer-Bereichen entfernen */

.pias-footer > .pias-footer-top {
    margin-block-end: 0 !important;
    gap: 0;
}

.pias-footer > .pias-footer-bottom {
    margin-block-start: 0 !important;
}

.pias-footer .wp-block-image {
    margin: 0;
}



/* PiAS Videokarte */

.pias-video-section {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 4rem 0;
    background: #003333;
}

.pias-video-card {
    width: var(--pias-content-width);
    max-width: none;
    margin-inline: auto;

    display: flex;
    flex-direction: column;
    gap: 0;

    border-radius: 4.375rem;
    overflow: hidden;
}

/* Standardabstände zwischen den WordPress-Blöcken entfernen */

.pias-video-card > * {
    margin-block: 0 !important;
}

/* Video */

.pias-video-card__video {
    width: 100%;
    line-height: 0;
}

.pias-video-card__video video {
    display: block;
    width: 100%;
    height: auto;
}

/* Weißer Überschriftenbereich */

.pias-video-card__heading {
    background: #FFFFFF;
    color: #003333;
    text-align: left;
    padding: 1.5rem 2rem;
    font-family: 'Sour Gummy', sans-serif;
}

.pias-video-card__heading h2 {
    font-family: inherit;
    font-size: 2.25rem;
    font-weight: 600;
    margin: 0 0 0.75rem;
}

.pias-video-card__heading p {
    margin: 0;
    font-size: 1.75rem;
}

/* Mintfarbener Textbereich */

.pias-video-card__body {
    background: #8AAFB0;
    color: #003333;
    padding: 2rem;
    text-align: left;
    font-family: 'Geist', sans-serif;
}

.pias-video-card .pias-video-card__heading h2,
.pias-video-card .pias-video-card__heading p,
.pias-video-card .pias-video-card__body > p {
    text-align: left;
}

.pias-video-card .pias-video-card__buttons {
    display: flex;
    justify-content: center;
}

.pias-video-card__body p {
    font-size: 1.125rem;
    line-height: 1.5;
    margin: 0 0 2rem;
}

/* Button */

.pias-video-card__buttons {
    justify-content: center;
}

.pias-video-card__buttons .wp-block-button__link {
    background: #315354;
    color: #FFFFFF;
    border-radius: 3rem;
    padding: 0.9rem 2rem;
    font-family: 'Sour Gummy', sans-serif;
    font-size: 1.2rem;

    transition: transform 0.2s ease;
}

.pias-video-card__buttons .wp-block-button__link:hover {
    transform: scale(1.05);
}

/* Schmalere Bildschirme */

@media (max-width: 767px) {
    .pias-video-card {
        width: calc(100% - 2rem);
        border-radius: 2rem;
    }

    .pias-video-card__heading h2 {
        font-size: 1.7rem;
    }

    .pias-video-card__heading p {
        font-size: 1.25rem;
    }
}




/* PiAS Banderolenkarte */

.pias-intro-section {
    position: relative;
    z-index: 1;

    width: 100%;
    max-width: none;

    margin-top: 0 !important;
    padding: 0 0 4rem;

    /* Goldene Banderole, darunter Dunkelgrün */
    background: linear-gradient(
        to bottom,
        #C99A37 0 40%,
        #003333 40% 100%
    );
}

/* Die eigentliche graugrüne Karte */

.pias-intro-card {
    box-sizing: border-box;
    width: var(--pias-content-width);
    max-width: 100%;
    margin-inline: auto;
    padding: 2rem 3rem 0;

    background: #345254;
    color: #FFFFFF;
    text-align: center;

    border-radius: 4.375rem;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;

    /* Karte über das Banner ziehen */
    position: relative;
    top: -5rem;
    margin-bottom: -5rem;
    z-index: 2;
}

/* WordPress-Standardabstände entfernen */

.pias-intro-card > * {
    margin-block: 0 !important;
}

/* Einleitung und Fließtext: Geist */

.pias-intro-card p {
    color: #FFFFFF;
    font-family: 'Geist', sans-serif;
    font-size: 1.25rem;
    line-height: 1.5;
    text-align: center;
}

/* Hauptüberschrift: Sour Gummy */

.pias-intro-card .wp-block-heading {
    color: #FFFFFF;
    font-family: 'Sour Gummy', sans-serif;
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
}

/* Button mittig */

.pias-intro-card .wp-block-buttons {
    display: flex;
    justify-content: center;
    margin-top: 0.5rem !important;
    margin-bottom: 0.0rem !important;
}

/* Weinroter Button */

.pias-intro-card .wp-block-button__link {
    background: #970741;
    color: #FFFFFF;
    font-family: 'Sour Gummy', sans-serif;
    font-size: 1.2rem;

    border-radius: 3rem 3rem 0 0;
    padding: 0.9rem 2rem;

    transition: transform 0.2s ease;
}

.pias-intro-card .wp-block-button__link:hover {
    background: #970741;
    transform: scale(1.05);
}

/* Smartphone */

@media (max-width: 767px) {

    .pias-intro-section {
        margin-top: 0 !important;
    }

    .pias-intro-card {
        width: calc(100% - 2rem);
        padding: 2rem 1.25rem 0;
        border-radius: 2rem;

        top: -2rem;
        margin-bottom: -2rem;
    }
}

/* Kein WordPress-Blockabstand zwischen Banner und Intro */

.wp-block-post-content > .pias-hero {
    margin-block-end: 0 !important;
}

.wp-block-post-content > .pias-hero + .pias-intro-section {
    margin-block-start: -8rem !important;
}


/* Kein Gutenberg-Abstand nach der Einführungskarte */

.wp-block-post-content
    > .pias-intro-section {
    margin-block-end: 0 !important;
}

.wp-block-post-content
    > .pias-intro-section
    + * {
    margin-block-start: 0 !important;
}


/* Einführungskarte auf Smartphones */

@media (max-width: 767px) {

    /* Kein zusätzlicher negativer Abstand
       zwischen Banner und Intro-Sektion */

    .wp-block-post-content > .pias-hero
        + .pias-intro-section {
        margin-block-start: 0 !important;
    }

    .pias-intro-section {
        margin-top: 0 !important;

        background: linear-gradient(
            to bottom,
            #C99A37 0 50%,
            #003333 50% 100%
        );
    }

    /* Nur die Karte überlappt das Banner */

    .pias-intro-card {
        width: calc(100% - 2rem);
        padding: 2rem 1.25rem 0;
        border-radius: 2rem;

        top: -2rem;
        margin-bottom: -2rem;
    }
}



/* three-cards.php: Drei-Karten-Element */

.pias-three-cards {
    --cards-top-padding: 3rem;
    --cards-image-height: clamp(10rem, 19vw, 24rem);
    --cards-title-height: 5rem;

    --cards-color-split: calc(
        var(--cards-top-padding)
        + var(--cards-image-height)
        + var(--cards-title-height)
    );

    position: relative;
    width: 100%;
    max-width: none;
    margin: 0 !important;
    padding: var(--cards-top-padding) 0 6rem;

    background: linear-gradient(
        to bottom,
        #003333 0 var(--cards-color-split),
        #C99A37 var(--cards-color-split) 100%
    );
}

/* Drei gleich breite Spalten */

.pias-three-cards__grid {
    box-sizing: border-box;
    width: var(--pias-content-width);
    max-width: none !important;
    margin-inline: auto !important;

    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    gap: 1.875rem;
}

/* Einzelne Karte */

.pias-three-cards__card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;

    background: transparent;
    border-radius: 5rem 5rem 0 0;
    overflow: visible;
}

.pias-three-cards__card > * {
    margin-block: 0 !important;
}

/* Bilder */

.pias-three-cards__image {
    width: 100%;
    height: 100%; /* var(--cards-image-height); */
    overflow: hidden;

    border-radius: 5rem 5rem 0 0;
}

.pias-three-cards__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Weißer Überschriftenbereich */

.pias-three-cards__title {
    box-sizing: border-box;
    width: 100%;
    height: var(--cards-title-height);
    margin: 0 !important;
    padding: 0.625rem;

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

    background: #FFFFFF;
    color: #003333;
    font-family: 'Sour Gummy', sans-serif;
    font-size: clamp(1rem, 1.4vw, 1.5rem);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
}

/* Mintfarbener Beschreibungstext */

.pias-three-cards__body { /* Das ist NUR das mintfarbene Textfeld, der Klassenname ist irreführend! */
    flex: 1;
    padding: 1.5rem 1rem 2rem;

    display: flex;
    flex-direction: column;
    gap: 1.25rem;

    border-radius: 0;

    background: #8AAFB0;
    color: #003333;
    font-family: 'Geist', sans-serif;
    text-align: center;
}

.pias-three-cards__body p {
    margin: 0 !important;
    font-size: 1.125rem;
    line-height: 1.5;
}


/* Weinrote Buttons am Kartenende */

.pias-three-cards__buttons {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 !important;

    background: #970741;

    border-radius: 0 0 5rem 5rem;

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

.pias-three-cards__buttons:hover,
.pias-three-cards__buttons:focus-within {
    transform: translateY(1mm);

    box-shadow: 0 -1mm 0 #8AAFB0;
}


.pias-three-cards__buttons .wp-block-button,
.pias-three-cards__buttons .wp-block-button__link {
    width: 100%;
}

.pias-three-cards__buttons .wp-block-button__link {
    box-sizing: border-box;
    display: block;
    padding: 0.9rem 0.5rem;

    border-radius: 0;
    background: transparent;
    color: #FFFFFF;

    font-family: 'Sour Gummy', sans-serif;
    font-size: 1.2rem;
    text-align: center;
}

/* Der komplette rote Balken rutscht nach unten */

.pias-three-cards__buttons:hover,
.pias-three-cards__buttons:focus-within {
    transform: translateY(1mm);
}

/* PiAS Zwei Karten */

/* Links 2/3, rechts 1/3 */

.pias-two-cards__grid {
    grid-template-columns:
        minmax(0, 2fr)
        minmax(0, 1fr);
}

/* Start der neuen PiAS Zwei Karten reverse bis Zeile */

/* PiAS Zwei Karten Reverse*/
/* Links 1/3, rechts 2/3 */

.pias-two-cards-reverse__grid {
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 2fr);
}
/* Ende der neuen PiAS Zwei Karten reverse ab Zeile 988 */

/* Tablet und Smartphone */

@media (max-width: 1023px) {
    .pias-three-cards {
        --cards-top-padding: 2rem;

        padding-bottom: 4rem;

        background: linear-gradient(
            to bottom,
            #003333 0 12rem,
            #C99A37 12rem 100%
        );
    }

    .pias-three-cards__grid {
        width: calc(100% - 2rem);
        max-width: 36rem !important;
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .pias-two-cards__grid {
        grid-template-columns: 1fr;
    }

    /* Start @media pias-two-cards-reverse Anpassungen */
     .pias-two-cards-reverse__grid {
        grid-template-columns: 1fr;
    }
    /* Ende der @media pias-two-cards-reverse Anpassungen */

    .pias-three-cards__card {
        border-radius: 2rem 2rem 0 0;
    }

    .pias-three-cards__image {
        height: auto;
        aspect-ratio: 1024 / 760;

         border-radius: 2rem 2rem 0 0;
    }

    .pias-three-cards__title {
        font-size: 1.4rem;
    }


    .pias-three-cards__buttons {
        border-radius: 0 0 2rem 2rem;
    }
}

/* hier startet die neue Vorlage pias four cards von Zeile 1013 bis Zeile 1148, @media fehlt noch */
/* four-cards.php: Vier-Karten-Element */
.pias-four-cards {
    --cards-top-padding: 3rem;
    --cards-image-height: clamp(10rem, 19vw, 24rem);
    --cards-title-height: 5rem;
    
    position: relative;
    width: 100%;
    max-width: none;
    margin: 0 !important;
    padding: var(--cards-top-padding) 0 6rem;
    background: #003333;
    
}
/* Vier gleich breite Spalten */
.pias-four-cards__grid {
    box-sizing: border-box;
    width: var(--pias-content-width);
    max-width: none !important;
    margin-inline: auto !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
    column-gap: 1.25rem;
}
/* Einzelne Karte */
.pias-four-cards__card {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: transparent;
    border-radius: 5rem 5rem 0 0;
    overflow: visible;
}
.pias-four-cards__card > * {
    margin-block: 0 !important;
}
/* Bilder */
.pias-four-cards__image {
    width: 100%;
    height: auto;
    overflow: hidden;
    border-radius: 5rem 5rem 0 0;
}
.pias-four-cards__image img {
    display: block;
    width: 100%;
    height: auto;
}
/* Weißer Überschriftenbereich */
.pias-four-cards__title {
    box-sizing: border-box;
    width: 100%;
    height: var(--cards-title-height);
    margin: 0 !important;
    padding: 0.625rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    color: #003333;
    font-family: 'Sour Gummy', sans-serif;
    font-size: clamp(1rem, 1.4vw, 1.5rem);
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
}
/* Mintfarbener Beschreibungstext */
.pias-four-cards__body { /* Das ist NUR das mintfarbene Textfeld, der Klassenname ist irreführend! */
    flex: 1;
    padding: 1.5rem 1rem 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    border-radius: 0;
    background: #8AAFB0;
    color: #003333;
    font-family: 'Geist', sans-serif;
    text-align: center;
}
.pias-four-cards__body p {
    margin: 0 !important;
    font-size: 1.125rem;
    line-height: 1.5;
}

/* Weinrote Buttons am Kartenende */
.pias-four-cards__buttons {
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 !important;
    background: #970741;
    border-radius: 0 0 5rem 5rem;
    transition: transform 0.2s ease,
                box-shadow 0.2s ease;
}
.pias-four-cards__buttons:hover,
.pias-four-cards__buttons:focus-within {
    transform: translateY(1mm);
    box-shadow: 0 -1mm 0 #8AAFB0;
}

.pias-four-cards__buttons .wp-block-button,
.pias-four-cards__buttons .wp-block-button__link {
    width: 100%;
}
.pias-four-cards__buttons .wp-block-button__link {
    box-sizing: border-box;
    display: block;
    padding: 0.9rem 0.5rem;
    border-radius: 0;
    background: transparent;
    color: #FFFFFF;
    font-family: 'Sour Gummy', sans-serif;
    font-weight: 600;
    font-size: 1.2rem;
    text-align: center;
}
/* Der komplette rote Balken rutscht nach unten */
.pias-four-cards__buttons:hover,
.pias-four-cards__buttons:focus-within {
    transform: translateY(1mm);
}
/* hier endet die neue Vorlage für pias four cards */


/* Videokarte: kein Innenabstand unter dem Button */

.pias-video-card__body {
    padding-bottom: 0;
}

/* Abstand zwischen Text und Button */

.pias-video-card__body > p:last-of-type {
    margin-bottom: 0;
}

.pias-video-card .pias-video-card__buttons {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem !important;
    margin-bottom: 0 !important;
}

/* Button-Container */

.pias-video-card .pias-video-card__buttons {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem !important;
    margin-bottom: 0 !important;
}

/* Dunkelgrüner Hintergrund hinter dem Button */

.pias-video-card__buttons .wp-block-button {
    background: #345254;
    border-radius: 3rem 3rem 0 0;
}

/* Eigentlicher Button */

.pias-video-card__buttons .wp-block-button__link {
    background: #345254;
    color: #FFFFFF;

    font-family: 'Sour Gummy', sans-serif;
    font-size: 1.2rem;

    border-radius: 3rem 3rem 0 0;
    padding: 0.9rem 2rem;

    transform-origin: center bottom;
    transition: transform 0.2s ease;
}

/* Hover-Effekt */

.pias-video-card__buttons .wp-block-button__link:hover {
    background: #345254;
    color: #FFFFFF;
    transform: scale(1.05);
}



/* PiAS Wissenschaftliche Grundlagen */

.pias-single-section {
    box-sizing: border-box;
    width: 100%;
    max-width: none;
    margin: 0 !important;
    padding: 5rem 0 6rem;

    background: #C99A37;
}

/* Die vorherigen drei Karten haben bereits
   einen unteren Abstand. Nicht verdoppeln. */

.wp-block-post-content
    > .pias-three-cards + .pias-single-section {
    margin-block-start: 0 !important;
    padding-top: 0;
}

/* Große Karte */

.pias-single-card-yellow {
    box-sizing: border-box;
    width: var(--pias-content-width);
    max-width: none !important;
    margin-inline: auto !important;

    display: flex;
    flex-direction: column;
    gap: 0;

    border-radius: 4.375rem;
    overflow: hidden;

    background: #FFFFFF;
}

.pias-single-card-yellow > * {
    margin-block: 0 !important;
}

/* Großes Bild in seiner natürlichen Höhe */

.pias-single-card-yellow__image {
    width: 100%;
    line-height: 0;
}

.pias-single-card-yellow__image img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
}

/* Weißer Überschriftenbereich */

.pias-single-card-yellow__heading {
    padding: 0.75rem 2.8125rem;

    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    background: #FFFFFF;
}

.pias-single-card-yellow__heading
.wp-block-heading {
    margin: 0 !important;
    color: #003333;
    font-family: 'Sour Gummy', sans-serif;
    line-height: 1.2;
    text-align: left;
}

.pias-single-card-yellow__heading h2 {
    font-size: clamp(2rem, 3vw, 2.5rem);
    font-weight: 600;
}

.pias-single-card-yellow__heading h3 {
    font-size: clamp(1.6rem, 2.4vw, 2rem);
    font-weight: 400;
}

/* Heller Textbereich */

.pias-single-card-yellow__body {
    padding: 2.1875rem 2.8125rem 0;

    display: flex;
    flex-direction: column;
    gap: 0;

    background: hsl(40.47deg 63.24% 73.33%);
    color: #003333;
}

.pias-single-card-yellow__body > * {
    margin-block: 0 !important;
}

/* Zwei gleich breite Textspalten */

.pias-single-card-yellow__columns {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem;
    margin: 0 !important;
}

.pias-single-card-yellow__columns
.wp-block-column {
    min-width: 0;
    margin: 0;
}

.pias-single-card-yellow__columns p {
    margin: 0 !important;
    font-family: 'Geist', sans-serif;
    font-size: 1.125rem;
    line-height: 1.5;
    text-align: left;
}

/* Button unten an der Karte */

.pias-single-card-yellow__buttons {
    display: flex;
    justify-content: center;
    margin: 2.1875rem 0 0 !important;
}

.pias-single-card-yellow__buttons
.wp-block-button {
    background: #970741;
    border-radius: 3rem 3rem 0 0;
}

.pias-single-card-yellow__buttons
.wp-block-button__link {
    background: #970741;
    color: #FFFFFF;

    padding: 0.9rem 2rem;
    border-radius: 3rem 3rem 0 0;

    font-family: 'Sour Gummy', sans-serif;
    font-size: 1.2rem;

    transform-origin: center bottom;
    transition: transform 0.2s ease;
}

.pias-single-card-yellow__buttons
.wp-block-button__link:hover {
    background: #970741;
    color: #FFFFFF;
    transform: scale(1.05);
}

/* Tablet und Smartphone */

@media (max-width: 1023px) {

    .pias-single-card-yellow {
        width: calc(100% - 2rem);
        border-radius: 2rem;
    }

    .pias-single-card-yellow__heading {
        padding: 1.25rem;
    }

    .pias-single-card-yellow__body {
        padding: 1.5rem 1.25rem 0;
    }

    .pias-single-card-yellow__columns {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .pias-single-card-yellow__buttons
    .wp-block-button__link {
        padding: 0.9rem 1.25rem;
        font-size: 1rem;
    }
}

/* PiAS Slider */

.pias-slider-section {
    width: 100%;
    max-width: none;
    margin: 0 !important;
    padding: 4rem 0 5rem;

    background: linear-gradient(
        to bottom,
        #C99A37 0 25%,
        #003333 25% 100%
    );
}

.pias-slider {
    position: relative;

    width: var(--pias-content-width);
    max-width: none !important;
    margin: 0 auto !important;
}


/* Slider-Cards */

.pias-slider__swiper {
    width: 100%;
    height: auto !important;
    padding: 0;
    box-sizing: border-box;
}

.pias-slider__swiper .swiper-wrapper {
    height: auto !important;
}

.pias-slider__swiper .swiper-slide {
    height: auto !important;
}

.pias-slider__card {
    position: relative;
    display: block;

    border-radius: 4rem;
    overflow: hidden;

    aspect-ratio: 1 / 1;
}

.pias-slider__card img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* Hover-Overlay */

.pias-slider__overlay {
    position: absolute;
    inset: 0;

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

    padding: 2rem;

    background: rgba(255, 255, 255, 0.92);
    color: #003333;

    font-family: 'Geist', sans-serif;
    font-size: 1.125rem;
    line-height: 1.4;
    text-align: center;

    opacity: 0;
    transition: opacity 0.25s ease;
}

.pias-slider__card:hover .pias-slider__overlay,
.pias-slider__card:focus-visible .pias-slider__overlay {
    opacity: 1;
}


/* Navigationspfeile */

.pias-slider > .swiper-button-prev,
.pias-slider > .swiper-button-next {
    top: 45%;
    margin-top: 0;

    transform: translateY(-50%);
    color: #FFFFFF;
}

.pias-slider > .swiper-button-prev {
    left: -3.5rem;
}

.pias-slider > .swiper-button-next {
    right: -3.5rem;
}


/* Navigationspunkte */

.pias-slider__swiper .swiper-pagination {
    position: relative !important;

    bottom: auto !important;
    top: auto !important;
    left: auto !important;

    margin-top: 1.5rem;
}

.pias-slider .swiper-pagination-bullet {
    background: #FFFFFF;
    opacity: 1;
}

.pias-slider .swiper-pagination-bullet-active {
    background: #D5A849;
}


/* Smartphone */

@media (max-width: 767px) {

    .pias-slider {
        width: calc(100% - 2rem);
    }

    .pias-slider > .swiper-button-prev {
        left: 0.5rem;
    }

    .pias-slider > .swiper-button-next {
        right: 0.5rem;
    }
}


/* PiAS Seitenüberschrift */

.pias-page-header-section {
    width: 100%;
    max-width: none;
    margin: 0 !important;
    padding: 4rem 0;

    /* Hintergrund der Seite scheint durch */
    background: transparent;
}

/* Seitenüberschrift über das direkt davorliegende Banner ziehen */

.pias-page-banner + .pias-page-header-section {
    position: relative;
    z-index: 2;

    margin-top: -4rem !important;
    padding-top: 0;
}

.pias-page-header {
    box-sizing: border-box;
    width: var(--pias-content-width);
    max-width: 100%;
    margin-inline: auto;
    padding: 2rem 3rem 0;

    background: #345254;
    color: #FFFFFF;

    border-radius: 4.375rem;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;

    text-align: center;
}

/* WordPress-Standardabstände entfernen */

.pias-page-header > * {
    margin-block: 0 !important;
}

/* Seitenüberschrift */

.pias-page-header .wp-block-heading {
    color: #FFFFFF;
    font-family: 'Sour Gummy', sans-serif;
    font-size: clamp(2.5rem, 4vw, 4rem);
    font-weight: 400;
    line-height: 1.1;
    text-align: center;
}

/* Begleittext */

.pias-page-header p {
    color: #FFFFFF;
    font-family: 'Geist', sans-serif;
    font-size: 1.25rem;
    line-height: 1.5;
    text-align: center;
}

/* Button unten */

.pias-page-header__buttons {
    display: flex;
    justify-content: center;

    margin-top: 0.5rem !important;
    margin-bottom: 0 !important;
}

/* Weinroter Button */

.pias-page-header__buttons .wp-block-button {
    background: #970741;
    border-radius: 3rem 3rem 0 0;
}

.pias-page-header__buttons .wp-block-button__link {
    background: #970741;
    color: #FFFFFF;

    font-family: 'Sour Gummy', sans-serif;
    font-size: 1.2rem;

    border-radius: 3rem 3rem 0 0;
    padding: 0.9rem 2rem;

    transform-origin: center bottom;
    transition: transform 0.2s ease;
}

.pias-page-header__buttons .wp-block-button__link:hover {
    background: #970741;
    color: #FFFFFF;
    transform: scale(1.05);
}


/* Smartphone */

@media (max-width: 767px) {

    .pias-page-header-section {
        padding: 2.5rem 0;
    }

    .pias-page-header {
        width: calc(100% - 2rem);
        padding: 2rem 1.25rem 0;
        border-radius: 2rem;
    }

    .pias-page-header .wp-block-heading {
        font-size: 2.25rem;
    }
}

/* Normale PiAS-Seiten */

.pias-page-main {
    width: 100%;
    max-width: none;
    margin: 0 !important;
    min-height: 60vh;

    background: #C99A37;
}


/* PiAS Kontaktformular */

.pias-contact-section {
    width: 100%;
    max-width: none;
    margin: 0 !important;
    padding: 2rem 0 5rem;

    background: transparent;
}

.pias-contact-form {
    box-sizing: border-box;
    width: var(--pias-content-width);
    max-width: none;
    margin-inline: auto;

    color: #003333;
    font-family: 'Geist', sans-serif;
}

.pias-contact-form__intro {
    margin-bottom: 2rem;
}

.pias-contact-form__intro p {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
    line-height: 1.5;
}

.pias-contact-form__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
}

.pias-contact-form__field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.pias-contact-form__field label {
    font-size: 1rem;
}

.pias-contact-form__field input,
.pias-contact-form__field textarea {
    box-sizing: border-box;
    width: 100%;

    padding: 0.8rem 1rem;

    border: 2px solid #345254;
    border-radius: 0.75rem;

    background: rgba(255, 255, 255, 0.75);
    color: #003333;

    font: inherit;
}

.pias-contact-form__field textarea {
    resize: vertical;
}

.pias-contact-form__field input:focus,
.pias-contact-form__field textarea:focus {
    outline: 3px solid #D5A849;
    outline-offset: 2px;
}

.pias-contact-form__hint {
    margin: 2.5rem 0 2rem;
    font-size: 1.125rem;
    line-height: 1.5;
}

.pias-contact-form__submit {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

.pias-contact-form__submit button {
    border: 0;
    border-radius: 3rem;
    padding: 0.9rem 2rem;

    background: #970741;
    color: #FFFFFF;

    font-family: 'Sour Gummy', sans-serif;
    font-size: 1.2rem;

    cursor: pointer;

    transition: transform 0.2s ease;
}

.pias-contact-form__submit button:hover,
.pias-contact-form__submit button:focus-visible {
    transform: scale(1.05);
}

.pias-contact-form__honeypot {
    position: absolute;
    left: -9999px;
}

.pias-contact-form__message {
    margin-bottom: 2rem;
    padding: 1rem 1.5rem;

    border-radius: 1rem;

    background: #345254;
    color: #FFFFFF;
}


/* Smartphone */

@media (max-width: 767px) {

    .pias-contact-form {
        width: calc(100% - 2rem);
    }

    .pias-contact-form__grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }
}


/* PiAS page banner */

.pias-page-banner {
    width: 100%;
    max-width: none;
    margin: 0 !important;
    padding: 0;

    background: transparent;
}

.pias-page-banner__image {
    width: 100%;
    max-width: none;
    margin: 0 !important;
}

.pias-page-banner__image img {
    display: block;
    width: 100%;
    max-width: none;
    height: auto;
}

/* Große Bild-Text-Karte vertikal geteilt*/

.pias-large-split {
    width: 100%;
    max-width: none;
    margin: 0 !important;
    padding: 4rem 0;

    background: #C99A37;
}

.pias-large-split__card {
    box-sizing: border-box;
    width: var(--pias-content-width);
    max-width: none !important;
    margin: 0 auto !important;

    display: grid;
    grid-template-columns: 42% 58%;

    border-radius: 4rem;
    overflow: hidden;
}

/* Linkes Bild */

.pias-large-split__image {
    width: 100%;
    height: 100%;
    margin: 0 !important;
}

.pias-large-split__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Rechte Hälfte */

.pias-large-split__content {
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 0;

    margin: 0 !important;
}

.pias-large-split__content > * {
    margin-block: 0 !important;
}

/* Weißer Überschriftsbereich */

.pias-large-split__heading {
    padding: 2rem 3rem;

    background: #FFFFFF;
    color: #003333;
}

.pias-large-split__heading > * {
    margin-block: 0 !important;
}

.pias-large-split__heading h2,
.pias-large-split__heading h3 {
    font-family: 'Sour Gummy', sans-serif;
    line-height: 1.2;
}

.pias-large-split__heading h2 {
    font-size: clamp(2rem, 3vw, 2.8rem);
    font-weight: 600;
}

.pias-large-split__heading h3 {
    margin-top: 1rem !important;
    font-size: clamp(1.5rem, 2vw, 2rem);
    font-weight: 400;
}

/* Ockerfarbener Textbereich */

.pias-large-split__body {
    flex: 1;

    padding: 2rem 3rem;

    background: #E8CE8F;
    color: #003333;

    font-family: 'Geist', sans-serif;
}

.pias-large-split__body p {
    margin: 0 0 1.5rem !important;
    font-size: 1.125rem;
    line-height: 1.5;
}

.pias-large-split__body p:last-child {
    margin-bottom: 0 !important;
}

@media (max-width: 767px) {

    .pias-large-split__card {
        grid-template-columns: 1fr;
        width: calc(100% - 2rem);
        border-radius: 2rem;
    }

    .pias-large-split__image {
        width: 100%;
        height: auto;
    }

    .pias-large-split__image img {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
        object-fit: cover;
    }

    .pias-large-split__content {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .pias-large-split__heading {
        width: 100%;
        box-sizing: border-box;
        padding: 1.5rem;
    }

    .pias-large-split__body {
        width: 100%;
        box-sizing: border-box;
        padding: 1.5rem;
    }
}
/* Hier steht ein Kommentar */