/*
Theme Name: Alph4Lution Shop Alpha-Theme Anpassung
Template: astra
Version: 1.10.1
*/


/* „Zurück zum Shop“-Link oberhalb des Produkts einbauen */
.back-to-shop {
    margin-bottom: 20px;
}

/* Entfernt die Seitenbeschreibung auf der Shop-Übersicht, weil der
   Einstiegstext dort aus dem Seiteninhalt kommt. Auf Kategorieseiten
   bleibt die Beschreibung sichtbar. */
.post-type-archive-product .ast-archive-description {
    display: none;
}

/* Einstiegstext auf Kategorieseiten wie auf der Shop-Übersicht setzen */
.tax-product_cat .ast-archive-description {
    max-width: 900px;
    margin: 0 auto 40px auto;
    text-align: center;
}

.tax-product_cat .ast-archive-description .shop-intro__headline {
    color: #1E3F7A;
    margin-bottom: 20px;
}

.tax-product_cat .ast-archive-description p {
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 20px;
}

.tax-product_cat .ast-archive-description .shop-intro__note {
    font-size: 14px;
    line-height: 1.6;
    color: #555;
}

/* Basis für Icon-Menüpunkte */
/* Basis für Icon-Menüpunkte */
.menu-icon-cart > a,
.menu-icon-user > a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    /* Text visuell ausblenden */
    font-size: 0;
}

/* Gemeinsame Icon-Definition */
.menu-icon-cart > a::before,
.menu-icon-user > a::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;

    background-color: #1E3F7A;

    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;

    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

/* Warenkorb */
.menu-icon-cart > a::before {
-webkit-mask-image: url("/wp-content/themes/astra-child/assets/svg/cart.svg");
    mask-image: url("/wp-content/themes/astra-child/assets/svg/cart.svg");
}


/* Benutzer */
.menu-icon-user > a::before {
-webkit-mask-image: url("/wp-content/themes/astra-child/assets/svg/user.svg");
    mask-image: url("/wp-content/themes/astra-child/assets/svg/user.svg");
}

/* Hover Effekt für Icons */
.menu-icon-cart > a:hover::before,
.menu-icon-user > a:hover::before {
    opacity: 0.75;
}

/* Anzahl der Artikel im Warenkorb.
   Der Menuepunkt blendet seinen Text ueber font-size: 0 aus. Die Zahl muss
   ihre Groesse deshalb ausdruecklich zurueckholen, sonst waere sie ebenfalls
   unsichtbar. */
.a4l-warenkorb-zahl {
    display: inline-block;
    box-sizing: border-box;

    min-width: 18px;
    padding: 0 5px;
    border-radius: 9px;

    background-color: #046BD2;
    color: #FFFFFF;

    font-size: 11px;
    font-weight: 600;
    line-height: 18px;
    text-align: center;
    white-space: nowrap;
}

/* Im Ausklappmenue traegt der Eintrag Text statt Symbol; dort steht die
   Zahl dahinter. */
.menu-item a .a4l-warenkorb-zahl {
    margin-left: 8px;
    vertical-align: middle;
}

/* Im Kopfbereich haengt sie unten rechts am Symbol. Der Menuepunkt ist so
   hoch wie die Kopfzeile, das Symbol sitzt mittig darin — die Sprechblase
   richtet sich deshalb an der Mitte aus und nicht an der Oberkante, sonst
   schwebt sie weit ueber dem Symbol. Der weisse Rand trennt beide dort, wo
   sie sich ueberlappen. */
.menu-icon-cart a .a4l-warenkorb-zahl {
    position: absolute;
    top: 50%;
    right: 1px;
    margin-top: -4px;

    min-width: 20px;
    margin-left: 0;
    border: 2px solid #FFFFFF;
    line-height: 16px;
}
/* Untermenü im Kopfbereich klar vom Seiteninhalt abheben */
.main-header-menu .sub-menu,
.ast-desktop .main-header-menu .sub-menu {
    background-color: #FFFFFF;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    box-shadow: 0 16px 36px rgba(30, 41, 59, 0.14);
    padding: 6px 0;
    min-width: 220px;
}

.main-header-menu .sub-menu .menu-link,
.ast-desktop .main-header-menu .sub-menu .menu-link {
    padding: 11px 22px;
    border-bottom: 0;
    transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1),
                color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

.main-header-menu .sub-menu .menu-item > .menu-link:hover,
.main-header-menu .sub-menu .menu-item > .menu-link:focus {
    background-color: #F0F5FA;
    color: #046BD2;
}

/* Bereichskacheln auf der Shop-Übersicht zentriert ausrichten */
.shop-intro__bereich {
    text-align: center;
}

/* Einstiegstext, gemeinsam für Shop-Übersicht und Kategorieseiten */
.shop-intro--center {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 40px auto;
}

.shop-intro__headline {
    color: #1E3F7A;
    margin-bottom: 20px;
}

.shop-intro--center p {
    font-size: 18px;
    line-height: 1.8;
    margin-bottom: 20px;
}

.shop-intro__note {
    font-size: 14px;
    line-height: 1.6;
    color: #555;
    margin-top: 10px;
}

/* Trennlinie unter dem Einstiegstext der Kategorieseiten entfernen */
.tax-product_cat .ast-archive-description {
    border: 0;
    padding-bottom: 0;
}

/* Produktsuche im Kopfbereich */
.menu-icon-search > .a4l-suche__huelle > .a4l-suche__schalter {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    cursor: pointer;
    list-style: none;
}

.menu-icon-search > .a4l-suche__huelle > .a4l-suche__schalter::-webkit-details-marker {
    display: none;
}

.menu-icon-search > .a4l-suche__huelle > .a4l-suche__schalter::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #1E3F7A;
    -webkit-mask-image: url("/wp-content/themes/astra-child/assets/svg/search.svg");
    mask-image: url("/wp-content/themes/astra-child/assets/svg/search.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.menu-icon-search > .a4l-suche__huelle > .a4l-suche__schalter:hover::before {
    opacity: 0.75;
}

.a4l-suche {
    position: relative;
}

.a4l-suche__formular {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 30;
    display: flex;
    gap: 8px;
    padding: 12px;
    background-color: #FFFFFF;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    box-shadow: 0 16px 36px rgba(30, 41, 59, 0.14);
}

.a4l-suche__feld {
    width: 240px;
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid #7E8B9E;
    border-radius: 4px;
    font-size: 16px;
    color: #1E293B;
}

.a4l-suche__knopf {
    min-height: 40px;
    padding: 8px 18px;
    border: 0;
    border-radius: 4px;
    background-color: #1E3F7A;
    color: #FFFFFF;
    font-size: 15px;
    cursor: pointer;
}

.a4l-suche__knopf:hover,
.a4l-suche__knopf:focus {
    background-color: #046BD2;
}

/* Im ausgeklappten Mobilmenü steht das Feld im Fluss statt darüber */
.ast-mobile-popup-drawer .a4l-suche__formular,
.ast-off-canvas-active .a4l-suche__formular {
    position: static;
    box-shadow: none;
    margin-top: 8px;
}

/* Suchfeld gegen die Flex-Regeln des Menüs absichern */
.a4l-suche__huelle {
    position: static;
}

.a4l-suche__formular {
    flex-direction: row;
    align-items: center;
    width: max-content;
    max-width: 92vw;
}

.a4l-suche__formular .a4l-suche__feld {
    flex: 0 0 240px;
    width: 240px;
    max-width: 100%;
    box-sizing: border-box;
    line-height: 1.4;
}

.a4l-suche__formular .a4l-suche__knopf {
    flex: 0 0 auto;
    white-space: nowrap;
    width: auto;
    line-height: 1.4;
}

/* Lupe auf dieselbe Grundlinie wie Konto- und Warenkorb-Symbol */
.menu-icon-search,
.menu-icon-search > .a4l-suche__huelle {
    display: inline-flex;
    align-items: center;
}

.menu-icon-search > .a4l-suche__huelle > .a4l-suche__schalter {
    padding: 0;
    margin: 0;
    vertical-align: middle;
}

/* Trefferliste der Produktsuche */
.a4l-suche__treffer {
    position: absolute;
    left: 12px;
    right: 12px;
    top: calc(100% - 6px);
    z-index: 40;
    margin: 0;
    padding: 6px 0;
    list-style: none;
    background-color: #FFFFFF;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    box-shadow: 0 16px 36px rgba(30, 41, 59, 0.14);
    max-height: 60vh;
    overflow-y: auto;
}

.a4l-suche__treffer li {
    margin: 0;
}

.a4l-suche__treffer a {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px 14px;
    text-decoration: none;
    color: #1E293B;
    line-height: 1.35;
}

.a4l-suche__treffer a:hover,
.a4l-suche__treffer a:focus,
.a4l-suche__treffer a.ist-aktiv {
    background-color: #F0F5FA;
    color: #046BD2;
}

.a4l-suche__treffer img {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 4px;
}

.a4l-suche__name {
    font-size: 15px;
}

.a4l-suche__leer {
    padding: 12px 14px;
    font-size: 15px;
    color: #5B6B7F;
}

/* Auf schmalen Bildschirmen füllt das Suchfeld die Breite */
@media (max-width: 767px) {
    .a4l-suche__formular {
        width: 100%;
        flex-wrap: wrap;
    }

    .a4l-suche__formular .a4l-suche__feld {
        flex: 1 1 100%;
        width: 100%;
    }

    .a4l-suche__formular .a4l-suche__knopf {
        flex: 1 1 100%;
    }

    .a4l-suche__treffer {
        position: static;
        margin-top: 8px;
        box-shadow: none;
    }
}

/* Suchpanel: feste Breite, Trefferliste im Fluss darunter */
.a4l-suche .a4l-suche__formular {
    flex-wrap: wrap;
    width: 340px;
    max-width: calc(100vw - 32px);
}

.a4l-suche .a4l-suche__formular .a4l-suche__feld {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
}

.a4l-suche .a4l-suche__treffer {
    position: static;
    flex: 1 1 100%;
    width: 100%;
    margin: 4px 0 0;
    padding: 6px 0 0;
    border: 0;
    border-top: 1px solid #D1D5DB;
    border-radius: 0;
    box-shadow: none;
    max-height: 50vh;
}

.a4l-suche .a4l-suche__treffer a {
    padding: 9px 6px;
    border-radius: 6px;
}

/* „Bald erhältlich“ vom endgültigen „Nicht verfügbar“ unterscheiden */
.product-stock-badge--onbackorder {
    background-color: #8F5600;
}

/* ==========================================================================
   Startseite: Abschnitte der ehemaligen Homepage
   ========================================================================== */

.a4-abschnitt {
    padding: 72px 0;
}

.a4-abschnitt--hell {
    background-color: #F0F5FA;
}

.a4-innen {
    /* Breite wie auf dem bisherigen Auftritt */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.a4-kicker {
    display: block;
    font-size: 14px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #7E8B9E;
    margin-bottom: 12px;
}

.a4-abschnitt h1,
.a4-abschnitt h2 {
    color: #1E3F7A;
    margin-bottom: 16px;
}

.a4-abschnitt p {
    color: #334155;
    line-height: 1.7;
    margin-bottom: 16px;
}

/* Kopfbereich der Startseite */
.a4-hero {
    padding: 88px 0 72px;
    background: linear-gradient(180deg, #FFFFFF 0%, #F0F5FA 100%);
    text-align: center;
}

.a4-hero h1 {
    color: #1E3F7A;
    margin-bottom: 18px;
}

.a4-hero p {
    max-width: 640px;
    margin: 0 auto 28px;
    font-size: 19px;
    line-height: 1.7;
    color: #334155;
}

.a4-knopfreihe {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.a4-knopf {
    display: inline-block;
    min-height: 44px;
    padding: 12px 26px;
    border-radius: 4px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1),
                color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.a4-knopf--voll {
    background-color: #1E3F7A;
    color: #FFFFFF;
}

.a4-knopf--voll:hover,
.a4-knopf--voll:focus {
    background-color: #046BD2;
    color: #FFFFFF;
}

.a4-knopf--rand {
    border: 1px solid #1E3F7A;
    color: #1E3F7A;
}

.a4-knopf--rand:hover,
.a4-knopf--rand:focus {
    background-color: #1E3F7A;
    color: #FFFFFF;
}

/* Zweispaltige Blöcke */
.a4-paar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    align-items: center;
}

.a4-paar img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 16px 36px rgba(30, 41, 59, 0.10);
}

/* Karten */
.a4-karten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    margin-top: 28px;
}

.a4-karte {
    display: flex;
    flex-direction: column;
    background-color: #FFFFFF;
    border: 1px solid #D1D5DB;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    transition: border-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.a4-karte:hover,
.a4-karte:focus {
    border-color: #046BD2;
}

.a4-karte img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    background-color: #F0F5FA;
}

.a4-karte__text {
    padding: 18px 20px 22px;
}

.a4-karte__titel {
    display: block;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #1E3F7A;
    margin-bottom: 6px;
}

.a4-karte__text p {
    font-size: 15px;
    line-height: 1.55;
    margin: 0;
}

/* Kontaktangaben */
.a4-kontakt {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 40px;
    align-items: start;
}

.a4-kontakt__daten p {
    margin-bottom: 10px;
}

.a4-hinweis {
    margin-top: 32px;
    padding-top: 18px;
    border-top: 1px solid #D1D5DB;
    font-size: 14px;
    line-height: 1.6;
    color: #5B6B7F;
}

@media (max-width: 767px) {
    .a4-abschnitt,
    .a4-hero {
        padding: 48px 0;
    }

    .a4-knopf {
        flex: 1 1 100%;
        text-align: center;
    }
}

/* Astra setzt Verweise im Inhalt unterstrichen; Schaltflächen nicht */
.entry-content a.a4-knopf,
.entry-content a.a4-karte {
    text-decoration: none;
}

/* Abschnitte über die volle Breite, unabhängig vom Astra-Container */
.a4-abschnitt,
.a4-hero {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* ==========================================================================
   Kopfbereich der Startseite, übernommen vom bisherigen Auftritt
   ========================================================================== */

.a4-hero-gross {
    position: relative;
    min-height: 82vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    color: #FFFFFF;
    padding: 0;
    background: #1E3F7A;
}

.a4-hero-gross__bild {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.9;
    z-index: 1;
}

.a4-hero-gross__bild::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(30, 63, 122, 0.7);
    z-index: 2;
}

.a4-hero-gross__innen {
    position: relative;
    z-index: 3;
    max-width: 1200px;
    margin: 0 auto;
    padding: 72px 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    width: 100%;
}

.a4-hero-gross h1 {
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    font-weight: 700;
    line-height: 1.2;
    color: #FFFFFF;
    margin-bottom: 1.5rem;
}

.a4-hero-gross__unterzeile {
    font-size: 1.25rem;
    line-height: 1.6;
    color: #FFFFFF;
    opacity: 0.9;
    margin-bottom: 2rem;
}

.a4-hero-gross .a4-knopfreihe {
    justify-content: flex-start;
}

/* Auf farbigem Grund führt Weiß */
.a4-hero-gross .a4-knopf--voll {
    background-color: #FFFFFF;
    color: #1E3F7A;
    border: 2px solid #FFFFFF;
}

.a4-hero-gross .a4-knopf--voll:hover,
.a4-hero-gross .a4-knopf--voll:focus {
    background-color: transparent;
    color: #FFFFFF;
}

.a4-hero-gross .a4-knopf--rand {
    background-color: transparent;
    color: #FFFFFF;
    border: 2px solid #FFFFFF;
}

.a4-hero-gross .a4-knopf--rand:hover,
.a4-hero-gross .a4-knopf--rand:focus {
    background-color: #FFFFFF;
    color: #1E3F7A;
}

/* Logo-Kreis mit schwebenden Kapseln */
.a4-hero-gross__visual {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

.a4-hero-gross__scheibe {
    position: relative;
    z-index: 4;
    background: rgba(255, 255, 255, 0.4);
    border: 4px solid rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    padding: 2rem;
    backdrop-filter: blur(25px);
    box-shadow: 0 20px 50px rgba(30, 41, 59, 0.4);
}

.a4-hero-gross__scheibe img {
    display: block;
    width: 120px;
    height: 120px;
    object-fit: contain;
}

.a4-kapsel {
    position: absolute;
    width: 20px;
    height: 40px;
    border-radius: 20px;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5));
    box-shadow: 0 8px 20px rgba(30, 41, 59, 0.3);
    animation: a4-schweben 3s ease-in-out infinite;
    z-index: 3;
}

.a4-kapsel--1 { top: 20%; left: 10%; animation-delay: 0s; }
.a4-kapsel--2 { top: 60%; right: 15%; animation-delay: 1s; }
.a4-kapsel--3 { bottom: 20%; left: 20%; animation-delay: 2s; }

@keyframes a4-schweben {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-20px) rotate(5deg); }
}

@media (prefers-reduced-motion: reduce) {
    .a4-kapsel { animation: none; }
}

@media (max-width: 900px) {
    .a4-hero-gross__innen {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        text-align: center;
    }

    .a4-hero-gross .a4-knopfreihe {
        justify-content: center;
    }

    .a4-hero-gross__visual {
        width: 220px;
        height: 220px;
    }

    .a4-hero-gross__scheibe img {
        width: 90px;
        height: 90px;
    }
}

/* Astra setzt im Page-Builder-Layout `max-width: none` auf alle Kinder des
   Inhaltsbereichs, mit höherer Spezifität als eine einfache Klasse. Die
   doppelte Klasse hebt die Regel gezielt darüber, ohne !important. */
.a4-innen.a4-innen,
.a4-hero-gross__innen.a4-hero-gross__innen {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Abschnitte über die volle Fensterbreite, Inhalt darin auf 1200px begrenzt.
   Die doppelte Klasse hebt beide Regeln über Astras Page-Builder-Vorgaben. */
.a4-abschnitt.a4-abschnitt,
.a4-hero-gross.a4-hero-gross {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* Astras Page-Builder-Regel setzt `max-width: none` mit fünf Klassen und
   schlägt damit eine doppelte Klasse. Diese Auswahl verankert sich an
   denselben Vorfahren und liegt eine Stufe darüber. */
.ast-page-builder-template .entry-content[data-ast-blocks-layout] > .a4-abschnitt > .a4-innen,
.ast-page-builder-template .entry-content[data-ast-blocks-layout] > .a4-hero-gross > .a4-hero-gross__innen {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* ==========================================================================
   Abschnitte der Startseite, Maße vom bisherigen Auftritt übernommen
   ========================================================================== */

.a4-abschnitt {
    padding: 100px 0;
}

/* Vorzeile mit Akzentstrich, wie .section-kicker im alten Stylesheet */
.a4-kicker {
    display: inline-block;
    font-family: "Inter", sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1E3F7A;
    margin-bottom: 0.75rem;
}

.a4-kicker::after {
    content: "";
    display: block;
    width: 46px;
    height: 3px;
    margin-top: 0.55rem;
    background-color: #046BD2;
    border-radius: 999px;
}

.a4-abschnitt h1,
.a4-abschnitt h2 {
    font-size: 2rem;
    line-height: 1.25;
    margin-bottom: 1rem;
}

.a4-abschnitt h3 {
    font-size: 1.5rem;
    color: #1E3F7A;
    margin: 2rem 0 1rem;
}

.a4-abschnitt p {
    line-height: 1.75;
    margin-bottom: 1.5rem;
}

/* Mittiger Abschnittskopf, wie .product-section-heading */
.a4-kopf-mitte {
    max-width: 840px;
    margin: 0 auto 2.5rem;
    text-align: center;
}

.a4-kopf-mitte .a4-kicker::after {
    margin-left: auto;
    margin-right: auto;
}

/* Zweispaltiger Block mit Bild */
.a4-paar {
    gap: 4rem;
}

.a4-paar img {
    height: 400px;
    object-fit: cover;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(30, 41, 59, 0.1);
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.a4-paar img:hover {
    transform: scale(1.02);
}

/* Produktraster dreispaltig wie im Original */
.a4-karten {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.a4-karte {
    border-color: #E4EAF2;
    box-shadow: 0 4px 12px rgba(30, 41, 59, 0.08);
    transform: translateY(0);
    transition: border-color 280ms ease, box-shadow 280ms ease, transform 280ms ease;
}

.a4-karte:hover,
.a4-karte:focus {
    border-color: #046BD2;
    box-shadow: 0 16px 36px rgba(30, 41, 59, 0.10);
    transform: translateY(-4px);
}

/* Newsletter auf Primärblau, weiße Schrift */
.a4-abschnitt--blau {
    background-color: #1E3F7A;
    color: #FFFFFF;
}

.a4-abschnitt--blau h2,
.a4-abschnitt--blau h3 {
    color: #FFFFFF;
}

.a4-abschnitt--blau p {
    color: rgba(255, 255, 255, 0.9);
}

.a4-abschnitt--blau .a4-kicker {
    color: rgba(255, 255, 255, 0.75);
}

.a4-abschnitt--blau .a4-kicker::after {
    background-color: #FFFFFF;
}

/* MailPoet-Formular auf blauem Grund lesbar halten */
.a4-abschnitt--blau .mailpoet_form {
    background: transparent;
    padding: 0;
}

.a4-abschnitt--blau .mailpoet_form label,
.a4-abschnitt--blau .mailpoet_paragraph {
    color: #FFFFFF;
}

.a4-abschnitt--blau .mailpoet_text,
.a4-abschnitt--blau .mailpoet_select {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid #7E8B9E;
    border-radius: 4px;
    background-color: #FFFFFF;
    color: #1E293B;
}

.a4-abschnitt--blau .mailpoet_submit {
    min-height: 44px;
    padding: 12px 26px;
    border: 2px solid #FFFFFF;
    border-radius: 4px;
    background-color: #FFFFFF;
    color: #1E3F7A;
    font-weight: 600;
    cursor: pointer;
}

.a4-abschnitt--blau .mailpoet_submit:hover,
.a4-abschnitt--blau .mailpoet_submit:focus {
    background-color: transparent;
    color: #FFFFFF;
}

@media (max-width: 900px) {
    .a4-karten {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }

    .a4-paar img {
        height: auto;
    }
}

/* Die Listenauswahl von MailPoet bleibt angehakt, aber unsichtbar: Es gibt
   genau eine Liste, die Auswahl wäre für den Besucher ohne Bedeutung. */
.a4-abschnitt--blau .mailpoet_paragraph:has(.mailpoet_checkbox) {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ==========================================================================
   Implantat Booster, Gestaltung vom bisherigen Auftritt übernommen
   ========================================================================== */

.a4-booster {
    position: relative;
    background-color: #FFFFFF;
    border: 1px solid #E4EAF2;
    border-radius: 12px;
    box-shadow: 0 16px 36px rgba(30, 41, 59, 0.10);
    padding: 3rem;
    overflow: hidden;
}

.a4-booster::before {
    content: "";
    position: absolute;
    top: 0;
    left: 3rem;
    right: 3rem;
    height: 4px;
    background-color: #046BD2;
    border-radius: 0 0 999px 999px;
}

.a4-booster > * {
    position: relative;
    z-index: 1;
}

.a4-booster__intro {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
    gap: 2.5rem;
    align-items: center;
    margin-bottom: 2.5rem;
}

/* Ohne Produktbild nimmt der Text die volle Breite des Kastens ein. */
.a4-booster__intro--einspaltig {
    grid-template-columns: minmax(0, 1fr);
}

.a4-booster__intro h3 {
    margin-top: 0;
    font-size: 2rem;
    line-height: 1.25;
}

.a4-booster__bild {
    position: relative;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.15rem;
    border: 1px solid rgba(4, 107, 210, 0.32);
    border-radius: 14px;
    overflow: hidden;
    background:
        linear-gradient(145deg, rgba(30, 41, 59, 0.96), rgba(4, 92, 180, 0.82)),
        radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.26), rgba(4, 107, 210, 0.14) 48%, rgba(30, 41, 59, 0.08) 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.12),
        0 18px 44px rgba(30, 41, 59, 0.14);
}

.a4-booster__bild::before {
    content: "";
    position: absolute;
    inset: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 10px;
    pointer-events: none;
}

.a4-booster__bild img {
    position: relative;
    z-index: 2;
    width: 100%;
    max-height: 340px;
    height: auto;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: none;
    filter: drop-shadow(0 16px 24px rgba(30, 41, 59, 0.22));
}

.a4-prinzipien,
.a4-phasen {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.a4-prinzipien > div {
    background-color: #F0F5FA;
    border: 1px solid #E4EAF2;
    border-radius: 10px;
    padding: 1.25rem;
    transition: border-color 250ms ease, box-shadow 250ms ease, transform 250ms ease;
}

.a4-prinzipien > div:hover {
    border-color: rgba(4, 107, 210, 0.25);
    box-shadow: 0 14px 34px rgba(30, 41, 59, 0.09);
    transform: translateY(-5px);
}

.a4-prinzipien h4,
.a4-phase h4,
.a4-zielgruppe h4 {
    font-family: "Montserrat", sans-serif;
    font-size: 1.15rem;
    color: #1E3F7A;
    margin: 0 0 0.6rem;
}

.a4-prinzipien p,
.a4-phase p,
.a4-zielgruppe p {
    font-size: 15.5px;
    line-height: 1.75;
    margin-bottom: 0;
}

.a4-phase {
    position: relative;
    background-color: #FFFFFF;
    border: 1px solid #E4EAF2;
    border-radius: 12px;
    padding: 1.5rem;
    transition: border-color 250ms ease, box-shadow 250ms ease, transform 250ms ease;
}

.a4-phase::before {
    content: "";
    position: absolute;
    top: 1.74rem;
    right: 1.5rem;
    width: 14px;
    height: 14px;
    background-color: #FFFFFF;
    border: 4px solid #046BD2;
    border-radius: 50%;
    box-shadow: 0 0 0 6px rgba(4, 107, 210, 0.12);
}

.a4-phase:hover,
.a4-phase:focus-within {
    border-color: #046BD2;
    box-shadow: 0 16px 36px rgba(30, 41, 59, 0.10);
    transform: translateY(-6px);
}

.a4-phase__label {
    display: inline-block;
    color: #046BD2;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.a4-liste {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
}

.a4-liste li {
    position: relative;
    padding-left: 1.6rem;
    margin-bottom: 0.5rem;
    font-size: 15px;
    line-height: 1.6;
    color: #334155;
}

.a4-liste li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #046BD2;
}

.a4-zielgruppe {
    background-color: #1E3F7A;
    border-radius: 12px;
    padding: 1.75rem;
    box-shadow: 0 16px 36px rgba(30, 41, 59, 0.10);
}

.a4-zielgruppe h4,
.a4-zielgruppe p {
    color: #FFFFFF;
}

.a4-zielgruppe p {
    opacity: 0.9;
}

@media (max-width: 900px) {
    .a4-booster { padding: 1.75rem; }
    .a4-booster::before { left: 1.75rem; right: 1.75rem; }
    .a4-booster__intro,
    .a4-prinzipien,
    .a4-phasen {
        grid-template-columns: 1fr;
    }
}

/* Kontaktangaben neben dem Formular */
.a4-kontaktkarten {
    display: grid;
    gap: 14px;
}

.a4-kontaktkarte {
    background-color: #F0F5FA;
    border: 1px solid #E4EAF2;
    border-radius: 12px;
    padding: 18px 20px;
}

.a4-kontaktkarte h4 {
    font-family: "Montserrat", sans-serif;
    font-size: 1rem;
    color: #1E3F7A;
    margin: 0 0 4px;
}

.a4-kontaktkarte p {
    margin: 0;
    font-size: 15.5px;
    line-height: 1.6;
    color: #334155;
}

.a4-kontaktkarte a {
    color: #046BD2;
}

/* Forschungsabschnitt */
.a4-forschung h3 {
    margin-top: 1.75rem;
}

/* Abschnitte deutlicher voneinander absetzen: weiße und hellblaue Flächen
   wechseln sich ab, dazwischen eine feine Trennlinie. */
.a4-abschnitt + .a4-abschnitt {
    border-top: 1px solid #E4EAF2;
}

.a4-abschnitt--hell + .a4-abschnitt,
.a4-abschnitt + .a4-abschnitt--hell,
.a4-abschnitt--blau + .a4-abschnitt,
.a4-abschnitt + .a4-abschnitt--blau {
    border-top: 0;
}

/* Kontakt schließt die Seite mit einer eigenen Fläche ab */
.a4-abschnitt--rand {
    background-color: #FFFFFF;
    border-top: 0;
}

/* Zweispalter innerhalb hellblauer Flächen bekommen weiße Karten,
   damit Text und Bild sich abheben */
.a4-abschnitt--hell .a4-forschung {
    background-color: #FFFFFF;
    border: 1px solid #E4EAF2;
    border-radius: 12px;
    padding: 2rem;
}

/* ==========================================================================
   Noni-Seite, Gestaltung vom bisherigen Auftritt übernommen
   ========================================================================== */

/* Kennzahlenband */
.a4-zahlen {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
    text-align: center;
}

.a4-zahl strong {
    display: block;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 2.25rem;
    line-height: 1.1;
    color: #1E3F7A;
}

.a4-zahl span {
    display: block;
    margin-top: 0.4rem;
    font-size: 15px;
    line-height: 1.5;
    color: #334155;
}

/* Inhaltsstoffkarten */
.a4-stoffe {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

.a4-stoff {
    background-color: #FFFFFF;
    border: 1px solid #E4EAF2;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 4px 12px rgba(30, 41, 59, 0.08);
}

.a4-stoff h3 {
    margin: 0 0 0.75rem;
    font-size: 1.15rem;
}

.a4-stoff .a4-liste {
    margin-top: 0;
}

/* Zeitstrahl der Geschichte */
.a4-schritte {
    display: grid;
    gap: 1.25rem;
}

.a4-schritt {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 1.25rem;
    align-items: start;
}

.a4-schritt__nr {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background-color: #1E3F7A;
    color: #FFFFFF;
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
    font-size: 1.35rem;
}

.a4-schritt h3 {
    margin: 0 0 0.4rem;
    font-size: 1.2rem;
}

.a4-schritt p {
    margin: 0;
    font-size: 15.5px;
}

/* Häufige Fragen */
.a4-fragen {
    display: grid;
    gap: 12px;
}

.a4-frage {
    background-color: #FFFFFF;
    border: 1px solid #E4EAF2;
    border-radius: 12px;
    overflow: hidden;
}

.a4-frage > summary {
    cursor: pointer;
    list-style: none;
    padding: 16px 20px;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 1.05rem;
    color: #1E3F7A;
}

.a4-frage > summary::-webkit-details-marker {
    display: none;
}

.a4-frage > summary::after {
    content: "+";
    float: right;
    font-weight: 700;
    color: #046BD2;
}

.a4-frage[open] > summary::after {
    content: "–";
}

.a4-frage > summary:hover,
.a4-frage > summary:focus {
    background-color: #F0F5FA;
}

.a4-frage p {
    margin: 0;
    padding: 0 20px 18px;
    font-size: 15.5px;
    line-height: 1.7;
}

/* Bildunterschrift */
.a4-bildtext {
    margin-top: 0.75rem;
    font-size: 14px;
    line-height: 1.5;
    color: #5B6B7F;
}

@media (max-width: 900px) {
    .a4-zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .a4-stoffe { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Kopfbereich bleibt beim Scrollen sichtbar
   ========================================================================== */

#masthead {
    position: sticky;
    top: 0;
    z-index: 100;
    background-color: #FFFFFF;
    box-shadow: 0 1px 2px rgba(30, 41, 59, 0.06);
}

/* Beim Scrollen deutlicher abheben */
#masthead.ist-gescrollt {
    box-shadow: 0 8px 24px rgba(30, 41, 59, 0.12);
}

/* Die Werkzeugleiste von WordPress verschiebt den Anfang */
.admin-bar #masthead {
    top: 32px;
}

@media (max-width: 782px) {
    .admin-bar #masthead {
        top: 46px;
    }
}

/* Sprungmarken nicht unter dem Kopfbereich verstecken */
section[id] {
    scroll-margin-top: 96px;
}

@media (max-width: 767px) {
    section[id] {
        scroll-margin-top: 72px;
    }
}

/* `100vw` rechnet die senkrechte Scrollleiste mit. Die über die volle Breite
   gezogenen Abschnitte stehen dadurch je zur Hälfte der Leistenbreite über und
   erzeugen eine waagerechte Bildlaufleiste. `clip` schneidet den Überstand ab,
   ohne einen eigenen Scrollbereich zu öffnen - der mitlaufende Kopfbereich
   bleibt dadurch am Fensterrand haften. */
#page {
    overflow-x: clip;
}

/* Astra faerbt im Kopfmenue nur den Eintrag der aktuellen Seite ein. Auf der
   Startseite gelten deren Sprungmarken als aktuell, wodurch "Über uns",
   "Forschung" und "Kontakt" blau erscheinen, "Produkte", "Mundraum",
   "Sportschützen" und "Noni" dagegen dunkelgrau. Alle Punkte erhalten hier
   dieselbe Farbe. Die doppelte Klasse hebt die Regel ueber Astras
   eingebettete Vorgabe, ohne sich an einen Behaelter zu binden - das
   Ausklappmenue schmaler Bildschirme haengt ausserhalb des Kopfbereichs. */
.ast-builder-menu-1 .menu-item > .menu-link.menu-link {
    color: var(--ast-global-color-1);
}

/* Pflichthinweis zu Nahrungsergaenzungsmitteln im Fussbereich. Er gilt fuer
   die gesamte Seite und steht deshalb ruhig gesetzt unter den Verweisen.
   Der Hinweis haengt hinter der Footer-Zeile, deren unterer Innenabstand
   sonst eine Luecke zwischen Verweisen und Hinweis aufreisst. Der Abstand
   nach unten wandert deshalb an den Hinweis selbst. */
.site-footer .site-below-footer-wrap {
    padding-top: 0;
    padding-bottom: 0;
}

/* Die Verweise ruecken naeher an die Trennlinie darueber. */
.site-footer #astra-footer-menu {
    margin-top: 0;
    margin-bottom: 0;
}

.site-footer .footer-bar-navigation,
.site-footer .footer-nav-wrap {
    margin-top: 0;
    padding-top: 8px;
}

.a4l-pflichthinweis {
    margin: 4px auto 20px;
    max-width: 760px;
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
    color: #5B6B7F;
}

/* Der Grundpreis wird von Germanized mit derselben Groesse und Staerke wie der
   Hauptpreis ausgegeben; die mitgelieferte Klasse `smaller` bleibt wirkungslos,
   weil die Preisregel des Themes sie ueberschreibt. Er tritt damit optisch
   gleichrangig neben den Verkaufspreis, obwohl er eine Pflichtangabe im
   Hintergrund ist. Die doppelte Klasse hebt die Regel darueber. */
.price-unit.price-unit,
.woocommerce div.product .summary .price.price-unit {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: #5B6B7F;
    margin-top: 2px;
}