/*
Theme Name: Microgreen Child
Description: Child Theme für Microgreen-Matten.de
Author: Microgreen Matten
Template: accelerate-pro
Version: 1.0.0
*/
/* ==========================================================
   ALTE WORDPRESS / ACCELERATE BEREICHE AUSBLENDEN
   ========================================================== */


#accelerate_call_to_action_widget-6,
#accelerate_featured_posts_widget-3,
#accelerate_featured_posts_widget-2,
#accelerate_call_to_action_widget-7 {
    display: none !important;
}
/* Alte CTA-Widgets */
#accelerate_business_sidebar .widget_call_to_action,
#accelerate_business_sidebar [id^="accelerate_call_to_action_widget-"],

/* Alte Preis / Stärken Tabelle */
#accelerate_pricing_table_widget-2,

/* Alte Service / Video Karten */
#accelerate_image_service_widget-2,

/* Alte WordPress Blöcke */
#block-3,
#block-4,
#block-6,

/* Alte Microgreen-Blöcke */
.microgreen-summary-block,
.microgreen-faq {
    display: none !important;
}

/* ==========================================================
   HERO
   template-parts/home/hero.php
   ========================================================== */

.mg-hero {
    position: relative;

    min-height: 520px;
    margin: 10px auto 30px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background-image:
        linear-gradient(
            90deg,
            rgba(255,255,255,0.98) 0%,
            rgba(255,255,255,0.94) 30%,
            rgba(255,255,255,0.65) 50%,
            rgba(255,255,255,0.05) 72%
        ),
        url("https://microgreen-matten.de/wp-content/uploads/2026/09/Slider1.png");

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

    border: 1px solid #d5e1d5;
    border-radius: 10px;

    box-sizing: border-box;
}

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

    width: 52%;
    max-width: 610px;

    padding: 55px 45px;
    box-sizing: border-box;
}

.mg-hero__eyebrow {
    display: block;

    margin-bottom: 12px;

    color: #28783e;

    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.mg-hero h1 {
    margin: 0 0 18px;

    font-size: 42px;
    line-height: 1.12;
}

.mg-hero__content > p {
    margin: 0 0 26px;

    font-size: 18px;
    line-height: 1.6;
}

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

    gap: 12px;
}

.mg-hero__button {
    display: inline-block;

    padding: 12px 19px;

    border-radius: 6px;

    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
}

.mg-hero__button--primary {
    background: #28783e;
    color: #fff;
}

.mg-hero__button--primary:hover,
.mg-hero__button--primary:focus {
    color: #fff;
    text-decoration: none;
    opacity: 0.9;
}

.mg-hero__button--secondary {
    background: rgba(255,255,255,0.9);
    border: 1px solid #28783e;
    color: #28783e;
}

.mg-hero__button--secondary:hover,
.mg-hero__button--secondary:focus {
    background: #28783e;
    color: #fff;
    text-decoration: none;
}

.mg-hero__features {
    display: flex;
    flex-wrap: wrap;

    gap: 10px 20px;

    margin-top: 27px;

    font-size: 14px;
    font-weight: 600;
}

.mg-hero__features span::before {
    content: "✓";

    margin-right: 6px;

    color: #28783e;
    font-weight: 700;
}


/* ==========================================================
   BIO-MATTEN
   template-parts/home/bio-matten.php
   ========================================================== */

.mg-bio-matten {
    box-sizing: border-box;

    margin: 30px auto 20px;
    padding: 25px;

    background: #fff;
    border: 1px solid #d5e1d5;
    border-radius: 10px;
}

.mg-bio-matten *,
.mg-bio-matten *::before,
.mg-bio-matten *::after {
    box-sizing: border-box;
}

.mg-bio-matten h2 {
    margin: 0 0 24px;

    font-size: 30px;
    line-height: 1.25;
}

.mg-bio-matten p {
    margin: 0 0 12px;

    line-height: 1.6;
}

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

    gap: 16px;
    margin-top: 24px;
}

.mg-bio-matten__card {
    padding: 20px 16px;

    background: #fff;
    border: 1px solid #d5e1d5;
    border-radius: 7px;
}

.mg-bio-matten__card h3 {
    margin: 0 0 20px;

    font-size: 22px;
    line-height: 1.2;
}

.mg-bio-matten__card ul {
    margin: 0;
    padding-left: 22px;

    list-style-type: disc;
}

.mg-bio-matten__card ul li {
    margin: 0 0 6px;
    padding: 0;

    line-height: 1.4;
    list-style-type: disc;
}

.mg-bio-matten__card ul li:last-child {
    margin-bottom: 0;
}

.mg-bio-matten__footer {
    margin-top: 22px;
    padding-top: 18px;

    border-top: 1px solid #d5e1d5;
}

.mg-bio-matten__footer p {
    margin-bottom: 12px;
}

.mg-bio-matten__button {
    display: inline-block;

    margin-top: 14px;
    padding: 10px 17px;

    background: #28783e;
    border-radius: 6px;

    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

.mg-bio-matten__button:hover,
.mg-bio-matten__button:focus {
    color: #fff;
    text-decoration: none;
    opacity: 0.9;
}


/* ==========================================================
   FAQ
   template-parts/home/bio-matten-faq.php
   ========================================================== */

.mg-faq {
    box-sizing: border-box;

    margin: 0 auto 40px;
}

.mg-faq *,
.mg-faq *::before,
.mg-faq *::after {
    box-sizing: border-box;
}

.mg-faq__inner {
    padding: 24px;

    background: #fff;
    border: 1px solid #e3ece2;
    border-radius: 10px;
}

.mg-faq__inner > h3 {
    margin: 0 0 22px;

    font-size: 22px;
    line-height: 1.3;
}

.mg-faq__item {
    margin-bottom: 20px;
}

.mg-faq__item:last-child {
    margin-bottom: 0;
}

.mg-faq__item h4 {
    margin: 0 0 5px;

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

.mg-faq__item p {
    margin: 0;

    line-height: 1.6;
}


/* ==========================================================
   PRODUKTE
   template-parts/home/products.php
   ========================================================== */

.mg-products {
    box-sizing: border-box;

    margin: 30px auto;
    padding: 30px;

    background: #fff;
    border: 1px solid #d5e1d5;
    border-radius: 10px;

    scroll-margin-top: 30px;
}

.mg-products *,
.mg-products *::before,
.mg-products *::after {
    box-sizing: border-box;
}


/* Produkt Intro */

.mg-products__intro {
    margin-bottom: 25px;
}

.mg-products__eyebrow {
    display: block;

    margin-bottom: 8px;

    color: #28783e;

    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.mg-products__intro h2 {
    margin: 0 0 12px;

    font-size: 30px;
    line-height: 1.25;
}

.mg-products__intro p {
    max-width: 800px;

    margin: 0;

    line-height: 1.6;
}


/* ==========================================================
   GRAMMATUR LEITFADEN
   ========================================================== */

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

    gap: 16px;
}

.mg-products__guide-card {
    display: flex;
    flex-direction: column;

    gap: 8px;

    padding: 22px;

    background: #f8faf8;
    border: 1px solid #d5e1d5;
    border-radius: 8px;
}

.mg-products__gsm {
    color: #28783e;

    font-size: 22px;
    font-weight: 700;
}

.mg-products__guide-card strong {
    font-size: 18px;
}

.mg-products__guide-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;

    gap: 20px;

    margin-top: 20px;
    padding-top: 18px;

    border-top: 1px solid #d5e1d5;
}

.mg-products__guide-footer p {
    margin: 0;

    font-size: 14px;
}

.mg-products__guide-footer a {
    color: #28783e;

    font-weight: 700;
    white-space: nowrap;
}


/* ==========================================================
   PRODUKT-SEKTIONEN
   Rollen / Zuschnitte / Stanzteile / Trays
   ========================================================== */

.mg-products__section {
    margin-top: 45px;
    padding-top: 35px;

    border-top: 1px solid #d5e1d5;
}

.mg-products__section-header {
    display: flex;
    align-items: flex-start;

    gap: 18px;

    margin-bottom: 22px;
}

.mg-products__section-number {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 42px;

    width: 42px;
    height: 42px;

    background: #f1f7f1;
    border-radius: 50%;

    color: #28783e;

    font-size: 14px;
    font-weight: 700;
}

.mg-products__section-header h2 {
    margin: 0 0 5px;

    font-size: 26px;
    line-height: 1.3;
}

.mg-products__section-header p {
    margin: 0;

    line-height: 1.5;
}


/* Produktgruppen */

.mg-products__group {
    margin-top: 25px;
}

.mg-products__group:first-of-type {
    margin-top: 0;
}

.mg-products__group h3 {
    margin: 0 0 10px;

    color: #28783e;

    font-size: 19px;
    line-height: 1.3;
}


/* ==========================================================
   TABELLEN
   ========================================================== */

.mg-products__table-wrap {
    width: 100%;

    overflow-x: auto;

    border: 1px solid #d5e1d5;
    border-radius: 8px;
}

.mg-products__table {
    width: 100%;

    margin: 0;

    border: 0;
    border-collapse: collapse;

    background: #fff;
}

.mg-products__table th,
.mg-products__table td {
    padding: 14px 16px;

    border: 0;
    border-bottom: 1px solid #e5ece5;

    text-align: left;
    vertical-align: middle;
}

.mg-products__table th {
    background: #f7faf7;

    color: #333;

    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.mg-products__table tbody tr:last-child td {
    border-bottom: 0;
}

.mg-products__table tbody tr:hover {
    background: #fafcfa;
}


/* Bestellen / Beraten */

.mg-products__request {
    display: inline-block;

    padding: 8px 12px;

    background: #28783e;
    border-radius: 5px;

    color: #fff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;

    white-space: nowrap;
}

.mg-products__request:hover,
.mg-products__request:focus {
    color: #fff;
    text-decoration: none;
    opacity: 0.9;
}


/* ==========================================================
   KOKOS
   ========================================================== */

.mg-products__feature {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);

    overflow: hidden;

    background: #f8faf8;
    border: 1px solid #d5e1d5;
    border-radius: 8px;
}

.mg-products__feature-image {
    min-height: 340px;

    overflow: hidden;
}

.mg-products__feature-image img {
    display: block;

    width: 100%;
    height: 100%;
    min-height: 340px;

    object-fit: cover;
    object-position: center;
}

.mg-products__feature-content {
    padding: 30px;
}

.mg-products__label {
    display: inline-block;

    margin-bottom: 10px;
    padding: 5px 9px;

    background: #eef5ee;
    border-radius: 4px;

    color: #28783e;

    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mg-products__feature-content h3 {
    margin: 0 0 12px;

    font-size: 24px;
    line-height: 1.3;
}

.mg-products__feature-content > p {
    margin: 0 0 20px;

    line-height: 1.6;
}

.mg-products__spec {
    display: flex;
    justify-content: space-between;

    margin-bottom: 20px;
    padding: 12px 0;

    border-top: 1px solid #d5e1d5;
    border-bottom: 1px solid #d5e1d5;
}

.mg-products__sizes {
    margin-bottom: 22px;
}

.mg-products__sizes > strong {
    display: block;

    margin-bottom: 10px;
}

.mg-products__size-list {
    display: flex;
    flex-wrap: wrap;

    gap: 7px;
}

.mg-products__size-list span {
    display: inline-block;

    padding: 6px 9px;

    background: #fff;
    border: 1px solid #d5e1d5;
    border-radius: 4px;

    font-size: 13px;
}


/* ==========================================================
   1010 / 1020 TRAY-KARTEN
   ========================================================== */

.mg-products__tray-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.mg-products__tray-card {
    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: #f8faf8;
    border: 1px solid #d5e1d5;
    border-radius: 8px;
}

.mg-products__tray-image {
    height: 280px;

    overflow: hidden;

    background: #fff;
}

.mg-products__tray-image img {
    display: block;

    width: 100%;
    height: 100%;

    padding: 15px;

    object-fit: contain;
    object-position: center;

    box-sizing: border-box;
}

.mg-products__tray-content {
    display: flex;
    flex-direction: column;

    flex: 1;

    padding: 24px;
}

.mg-products__tray-content h3 {
    margin: 0 0 10px;

    font-size: 24px;
    line-height: 1.3;
}

.mg-products__tray-content > p {
    margin: 0 0 18px;

    line-height: 1.6;
}

.mg-products__tray-content ul {
    margin: 0 0 22px;
    padding-left: 22px;

    list-style-type: disc;
}

.mg-products__tray-content ul li {
    margin-bottom: 8px;

    line-height: 1.45;
    list-style-type: disc;
}

.mg-products__tray-content ul li:last-child {
    margin-bottom: 0;
}

.mg-products__tray-content .mg-products__request {
    align-self: flex-start;

    margin-top: auto;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 900px) {

    /* Hero */

    .mg-hero {
        min-height: 500px;

        background-position: 60% center;
    }

    .mg-hero__content {
        width: 65%;

        padding: 40px 30px;
    }

    .mg-hero h1 {
        font-size: 35px;
    }


    /* Bio */

    .mg-bio-matten__grid {
        grid-template-columns: 1fr;
    }


    /* Grammatur */

    .mg-products__guide {
        grid-template-columns: 1fr;
    }

}


/* ==========================================================
   KLEINER TABLET
   ========================================================== */

@media (max-width: 800px) {

    .mg-products__feature {
        grid-template-columns: 1fr;
    }

    .mg-products__feature-image,
    .mg-products__feature-image img {
        min-height: 280px;
    }

    .mg-products__tray-grid {
        grid-template-columns: 1fr;
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 600px) {

    /* HERO */

    .mg-hero {
        min-height: 620px;

        align-items: flex-start;

        background-image:
            linear-gradient(
                180deg,
                rgba(255,255,255,0.98) 0%,
                rgba(255,255,255,0.95) 48%,
                rgba(255,255,255,0.25) 70%,
                rgba(255,255,255,0.05) 100%
            ),
            url("https://microgreen-matten.de/wp-content/uploads/2026/09/Slider1.png");

        background-position: 65% center;
    }

    .mg-hero__content {
        width: 100%;

        padding: 28px 20px;
    }

    .mg-hero h1 {
        font-size: 29px;
        line-height: 1.2;
    }

    .mg-hero__content > p {
        font-size: 16px;
    }

    .mg-hero__actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .mg-hero__features {
        flex-direction: column;

        gap: 7px;
    }


    /* BIO */

    .mg-bio-matten {
        margin-top: 20px;
        padding: 18px;
    }

    .mg-bio-matten h2 {
        margin-bottom: 18px;

        font-size: 24px;
        line-height: 1.3;
    }

    .mg-bio-matten__grid {
        gap: 14px;
        margin-top: 20px;
    }

    .mg-bio-matten__card {
        padding: 18px;
    }

    .mg-bio-matten__card h3 {
        margin-bottom: 15px;

        font-size: 20px;
    }

    .mg-bio-matten__footer {
        margin-top: 18px;
        padding-top: 16px;
    }


    /* FAQ */

    .mg-faq {
        margin-bottom: 30px;
    }

    .mg-faq__inner {
        padding: 18px;
    }

    .mg-faq__inner > h3 {
        font-size: 20px;
    }


    /* PRODUKTE */

    .mg-products {
        padding: 18px;
    }

    .mg-products__intro h2 {
        font-size: 25px;
    }

    .mg-products__guide-card {
        padding: 18px;
    }

    .mg-products__guide-footer {
        flex-direction: column;
        align-items: flex-start;

        gap: 10px;
    }


    /* PRODUKT SEKTION */

    .mg-products__section {
        margin-top: 35px;
        padding-top: 28px;
    }

    .mg-products__section-header {
        gap: 12px;
    }

    .mg-products__section-number {
        flex-basis: 36px;

        width: 36px;
        height: 36px;
    }

    .mg-products__section-header h2 {
        font-size: 22px;
    }


    /* Tabellen horizontal scrollbar */

    .mg-products__table {
        min-width: 650px;
    }


    /* Kokos */

    .mg-products__feature-content {
        padding: 20px;
    }

    .mg-products__feature-image,
    .mg-products__feature-image img {
        min-height: 220px;
    }


    /* Trays */

    .mg-products__tray-image {
        height: 220px;
    }

    .mg-products__tray-content {
        padding: 20px;
    }

    .mg-products__tray-content h3 {
        font-size: 21px;
    }

}


/* ==========================================================
   KONTAKTSEITE
   page-templates/kontakt.php
   ========================================================== */

.mg-contact {
    box-sizing: border-box;
    margin: 30px auto 50px;
}

.mg-contact *,
.mg-contact *::before,
.mg-contact *::after {
    box-sizing: border-box;
}


/* ==========================================================
   EINLEITUNG
   ========================================================== */

.mg-contact__intro {
    margin-bottom: 25px;
    padding: 32px;

    background: #f8faf8;
    border: 1px solid #d5e1d5;
    border-radius: 10px;
}

.mg-contact__eyebrow {
    display: block;

    margin-bottom: 8px;

    color: #28783e;

    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.mg-contact__intro h1 {
    margin: 0 0 14px;

    font-size: 34px;
    line-height: 1.2;
}

.mg-contact__intro p {
    max-width: 760px;

    margin: 0;

    font-size: 17px;
    line-height: 1.6;
}


/* ==========================================================
   INFO-KARTEN
   ========================================================== */

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

    gap: 16px;
    margin-bottom: 25px;
}

.mg-contact__card {
    padding: 22px;

    background: #fff;
    border: 1px solid #d5e1d5;
    border-radius: 8px;
}

.mg-contact__card h3 {
    margin: 0 0 10px;

    color: #28783e;

    font-size: 20px;
    line-height: 1.3;
}

.mg-contact__card p {
    margin: 0;

    line-height: 1.6;
}


/* ==========================================================
   KONTAKTDATEN + FORMULAR
   ========================================================== */

.mg-contact__grid {
    display: grid;
    grid-template-columns: minmax(260px, 0.7fr) minmax(0, 1.3fr);

    gap: 20px;
    align-items: start;
}


/* Linke Kontaktkarte */

.mg-contact__info {
    padding: 26px;

    background: #f8faf8;
    border: 1px solid #d5e1d5;
    border-radius: 10px;
}

.mg-contact__info h2 {
    margin: 0 0 20px;

    font-size: 24px;
    line-height: 1.3;
}

.mg-contact__info p {
    margin: 0 0 18px;

    line-height: 1.65;
}


/* ==========================================================
   WHATSAPP / KONTAKT BUTTON
   ========================================================== */

.mg-contact__button {
    display: inline-block;

    margin-top: 4px;
    padding: 11px 18px;

    background: #28783e;
    border-radius: 6px;

    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

.mg-contact__button:hover,
.mg-contact__button:focus {
    color: #fff;
    text-decoration: none;
    opacity: 0.9;
}


/* ==========================================================
   FORMULAR-KARTE
   ========================================================== */

.mg-contact__form {
    padding: 26px;

    background: #fff;
    border: 1px solid #d5e1d5;
    border-radius: 10px;
}

.mg-contact__form > h2 {
    margin: 0 0 22px;
    font-size: 24px;
    line-height: 1.3;
    font-weight: 700;
    text-transform: uppercase;
}


/* ==========================================================
   NINJA FORMS
   ========================================================== */

.mg-contact__form .nf-form-cont {
    margin: 0;
}

.mg-contact__form .nf-form-fields-required {
    margin-bottom: 20px;

    color: #666;

    font-size: 13px;
}


/* Labels */

.mg-contact__form .nf-field-label {
    margin-bottom: 6px;
}

.mg-contact__form .nf-field-label label {
    font-weight: 700;
}


/* Eingabefelder */

.mg-contact__form input[type="text"],
.mg-contact__form input[type="email"],
.mg-contact__form input[type="tel"],
.mg-contact__form input[type="number"],
.mg-contact__form input[type="url"],
.mg-contact__form select,
.mg-contact__form textarea {
    width: 100%;

    padding: 11px 12px;

    background: #fff;
    border: 1px solid #cfd8cf;
    border-radius: 5px;

    font-family: inherit;
    font-size: 15px;

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


/* Fokus */

.mg-contact__form input[type="text"]:focus,
.mg-contact__form input[type="email"]:focus,
.mg-contact__form input[type="tel"]:focus,
.mg-contact__form input[type="number"]:focus,
.mg-contact__form input[type="url"]:focus,
.mg-contact__form select:focus,
.mg-contact__form textarea:focus {
    outline: none;

    border-color: #28783e;
    box-shadow: 0 0 0 2px rgba(40, 120, 62, 0.10);
}


/* Textarea */

.mg-contact__form textarea {
    min-height: 140px;

    resize: vertical;
}


/* Abstand zwischen Feldern */

.mg-contact__form .nf-field-container {
    margin-bottom: 18px;
}


/* Ninja Forms Submit */

.mg-contact__form input[type="button"],
.mg-contact__form input[type="submit"],
.mg-contact__form button {
    display: inline-block;

    padding: 11px 20px;

    background: #28783e;
    border: 0;
    border-radius: 6px;

    color: #fff;

    font-family: inherit;
    font-size: 15px;
    font-weight: 700;

    cursor: pointer;
}

.mg-contact__form input[type="button"]:hover,
.mg-contact__form input[type="submit"]:hover,
.mg-contact__form button:hover {
    opacity: 0.9;
}


/* Ninja Forms Fehlermeldungen */

.mg-contact__form .nf-error-msg {
    font-size: 13px;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 900px) {

    .mg-contact__cards {
        grid-template-columns: 1fr;
    }

    .mg-contact__grid {
        grid-template-columns: 1fr;
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 600px) {

    .mg-contact {
        margin-top: 20px;
        margin-bottom: 35px;
    }

    .mg-contact__intro {
        padding: 22px 18px;
    }

    .mg-contact__intro h1 {
        font-size: 27px;
    }

    .mg-contact__intro p {
        font-size: 16px;
    }

    .mg-contact__card {
        padding: 18px;
    }

    .mg-contact__info,
    .mg-contact__form {
        padding: 20px 18px;
    }

    .mg-contact__info h2,
    .mg-contact__form > h2 {
        font-size: 22px;
    }

}

/* ==========================================================
   KONTAKT – STANDORT / MAP
   ========================================================== */

.mg-contact__map {
    display: grid;
    grid-template-columns: minmax(260px, 0.7fr) minmax(0, 1.3fr);

    gap: 25px;
    align-items: center;

    margin-top: 25px;
    padding: 26px;

    background: #f8faf8;
    border: 1px solid #d5e1d5;
    border-radius: 10px;
}

.mg-contact__map-content h2 {
    margin: 0 0 12px;

    font-size: 24px;
    line-height: 1.3;
}

.mg-contact__map-content p {
    margin: 0;

    line-height: 1.6;
}

.mg-contact__map-image {
    overflow: hidden;

    background: #fff;
    border: 1px solid #d5e1d5;
    border-radius: 8px;
}

.mg-contact__map-image img {
    display: block;

    width: 100%;
    height: auto;
}


/* Tablet / Mobile */

@media (max-width: 800px) {

    .mg-contact__map {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 600px) {

    .mg-contact__map {
        padding: 18px;
    }

    .mg-contact__map-content h2 {
        font-size: 21px;
    }

}





/* ==========================================================
   ADVANTAGES – FINAL OVERRIDE
   ========================================================== */

.mg-advantages {
    box-sizing: border-box !important;
    display: block !important;
    margin: 30px auto !important;
    padding: 30px !important;
    background: #fff !important;
    border: 1px solid #d5e1d5 !important;
    border-radius: 10px !important;
}

.mg-advantages *,
.mg-advantages *::before,
.mg-advantages *::after {
    box-sizing: border-box;
}


/* INTRO */

.mg-advantages__intro {
    display: block !important;
    margin-bottom: 28px !important;
}

.mg-advantages__eyebrow {
    display: block !important;
    margin-bottom: 8px !important;

    color: #28783e !important;

    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.mg-advantages__intro h2 {
    margin: 0 0 12px !important;
    font-size: 30px !important;
    line-height: 1.25 !important;
}

.mg-advantages__intro p {
    max-width: 800px !important;
    margin: 0 !important;
    line-height: 1.6 !important;
}


/* ==========================================================
   VIDEO
   ========================================================== */

.mg-advantages__video-section {
    display: grid !important;
    grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr) !important;

    margin-bottom: 30px !important;
    overflow: hidden !important;

    background: #f8faf8 !important;
    border: 1px solid #d5e1d5 !important;
    border-radius: 9px !important;
}

.mg-advantages__video-wrap {
    display: block !important;
    background: #111 !important;
}

.mg-advantages__video {
    display: block !important;

    width: 100% !important;
    height: 100% !important;
    min-height: 360px !important;

    object-fit: cover !important;
}

.mg-advantages__video-content {
    display: block !important;
    padding: 30px !important;
}

.mg-advantages__video-content h3 {
    margin: 0 0 12px !important;

    font-size: 25px !important;
    line-height: 1.3 !important;
}

.mg-advantages__video-content p {
    margin: 0 0 20px !important;
    line-height: 1.6 !important;
}

.mg-advantages__video-content ul {
    margin: 0 !important;
    padding-left: 22px !important;
    list-style: disc !important;
}

.mg-advantages__video-content li {
    margin-bottom: 7px !important;
    line-height: 1.45 !important;
    list-style: disc !important;
}


/* LABEL */

.mg-advantages__label {
    display: inline-block !important;

    margin-bottom: 10px !important;
    padding: 5px 9px !important;

    background: #eef5ee !important;
    border-radius: 4px !important;

    color: #28783e !important;

    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
}


/* ==========================================================
   KARTEN
   ========================================================== */

.mg-advantages__grid {
    display: grid !important;

    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

    gap: 18px !important;
}

.mg-advantages__card {
    display: flex !important;
    flex-direction: column !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background: #f8faf8 !important;
    border: 1px solid #d5e1d5 !important;
    border-radius: 8px !important;
}

.mg-advantages__image {
    display: block !important;

    width: 100% !important;
    height: 190px !important;

    overflow: hidden !important;

    background: #fff !important;
}

.mg-advantages__image img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover !important;
    object-position: center !important;
}

.mg-advantages__card-content {
    display: flex !important;
    flex: 1 !important;
    flex-direction: column !important;

    padding: 20px !important;
}

.mg-advantages__card-content h3 {
    margin: 0 0 10px !important;

    font-size: 20px !important;
    line-height: 1.3 !important;
}

.mg-advantages__card-content p {
    margin: 0 0 18px !important;
    line-height: 1.55 !important;
}

.mg-advantages__link {
    display: inline-block !important;

    margin-top: auto !important;

    color: #28783e !important;

    font-weight: 700 !important;
    text-decoration: none !important;
}

.mg-advantages__link:hover {
    text-decoration: underline !important;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 900px) {

    .mg-advantages__video-section {
        grid-template-columns: 1fr !important;
    }

    .mg-advantages__video {
        min-height: 320px !important;
    }

    .mg-advantages__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 600px) {

    .mg-advantages {
        padding: 18px !important;
    }

    .mg-advantages__intro h2 {
        font-size: 25px !important;
    }

    .mg-advantages__video {
        min-height: 240px !important;
    }

    .mg-advantages__video-content {
        padding: 20px !important;
    }

    .mg-advantages__video-content h3 {
        font-size: 22px !important;
    }

    .mg-advantages__grid {
        grid-template-columns: 1fr !important;
    }

    .mg-advantages__image {
        height: 210px !important;
    }

}


/* ==========================================================
   CTA
   template-parts/home/cta.php
   ========================================================== */

.mg-cta {
    box-sizing: border-box;

    margin: 30px auto 50px;
    padding: 42px 30px;

    background: #f8faf8;
    border: 1px solid #d5e1d5;
    border-radius: 10px;

    text-align: center;
}

.mg-cta *,
.mg-cta *::before,
.mg-cta *::after {
    box-sizing: border-box;
}

.mg-cta__content {
    max-width: 760px;
    margin: 0 auto;
}

.mg-cta__eyebrow {
    display: block;

    margin-bottom: 8px;

    color: #28783e;

    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.mg-cta h2 {
    margin: 0 0 14px;

    font-size: 30px;
    line-height: 1.25;
}

.mg-cta p {
    margin: 0 auto 24px;

    max-width: 650px;

    font-size: 17px;
    line-height: 1.6;
}

.mg-cta__actions {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;

    gap: 12px;
}

.mg-cta__button {
    display: inline-block;

    padding: 12px 20px;

    border-radius: 6px;

    font-weight: 700;
    text-decoration: none;
}

.mg-cta__button--primary {
    background: #28783e;
    color: #fff;
}

.mg-cta__button--primary:hover,
.mg-cta__button--primary:focus {
    color: #fff;
    opacity: 0.9;
}

.mg-cta__button--secondary {
    background: #fff;
    border: 1px solid #28783e;
    color: #28783e;
}

.mg-cta__button--secondary:hover,
.mg-cta__button--secondary:focus {
    background: #28783e;
    color: #fff;
}


/* Mobile */

@media (max-width: 600px) {

    .mg-cta {
        padding: 28px 18px;
    }

    .mg-cta h2 {
        font-size: 25px;
    }

    .mg-cta p {
        font-size: 16px;
    }

    .mg-cta__actions {
        flex-direction: column;
    }

    .mg-cta__button {
        width: 100%;
        text-align: center;
    }

}


/* ==========================================================
   WHY US
   template-parts/home/why-us.php
   ========================================================== */

.mg-why-us {
    box-sizing: border-box !important;

    margin: 30px auto !important;
    padding: 35px 30px !important;

    background: #f8faf8 !important;
    border: 1px solid #d5e1d5 !important;
    border-radius: 10px !important;
}

.mg-why-us *,
.mg-why-us *::before,
.mg-why-us *::after {
    box-sizing: border-box;
}


/* ==========================================================
   HEADER
   ========================================================== */

.mg-why-us__header {
    max-width: 760px !important;

    margin: 0 auto 30px !important;

    text-align: center !important;
}

.mg-why-us__eyebrow {
    display: block !important;

    margin-bottom: 8px !important;

    color: #28783e !important;

    font-size: 13px !important;
    font-weight: 700 !important;

    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.mg-why-us__header h2 {
    margin: 0 0 12px !important;

    font-size: 30px !important;
    line-height: 1.25 !important;
}

.mg-why-us__header p {
    margin: 0 auto !important;

    max-width: 680px !important;

    font-size: 16px !important;
    line-height: 1.6 !important;
}


/* ==========================================================
   GRID
   ========================================================== */

.mg-why-us__grid {
    display: grid !important;

    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

    gap: 18px !important;
}


/* ==========================================================
   CARD
   ========================================================== */

.mg-why-us__card {
    position: relative !important;

    display: flex !important;
    flex-direction: column !important;

    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background: #fff !important;

    border: 1px solid #d5e1d5 !important;
    border-radius: 8px !important;
}


/* Nummer oben rechts */

.mg-why-us__number {
    position: absolute !important;

    top: 18px !important;
    right: 18px !important;

    color: #dce9dc !important;

    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}


/* Karteninhalt */

.mg-why-us__card-content {
    display: flex !important;
    flex: 1 !important;
    flex-direction: column !important;

    padding: 24px 22px 20px !important;
}


/* Kleines Label */

.mg-why-us__label {
    display: inline-block !important;

    align-self: flex-start !important;

    margin: 0 0 14px !important;
    padding: 5px 9px !important;

    background: #eef5ee !important;

    border-radius: 4px !important;

    color: #28783e !important;

    font-size: 11px !important;
    font-weight: 700 !important;

    text-transform: uppercase !important;
    letter-spacing: .7px !important;
}


/* Kartenüberschrift */

.mg-why-us__card h3 {
    margin: 0 0 12px !important;

    padding-right: 35px !important;

    font-size: 21px !important;
    line-height: 1.3 !important;
}


/* Beschreibung */

.mg-why-us__card p {
    margin: 0 0 18px !important;

    line-height: 1.55 !important;
}


/* ==========================================================
   LISTE
   ========================================================== */

.mg-why-us__card ul {
    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
}

.mg-why-us__card li {
    position: relative !important;

    margin: 0 0 9px !important;
    padding: 0 0 0 22px !important;

    line-height: 1.45 !important;

    list-style: none !important;
}

.mg-why-us__card li::before {
    content: "✓";

    position: absolute;

    left: 0;
    top: 0;

    color: #28783e;

    font-weight: 700;
}

.mg-why-us__card li:last-child {
    margin-bottom: 0 !important;
}


/* ==========================================================
   LINK UNTEN
   ========================================================== */

.mg-why-us__link {
    display: flex !important;

    justify-content: space-between !important;
    align-items: center !important;

    gap: 15px !important;

    margin-top: auto !important;
    padding: 16px 22px !important;

    background: #f3f7f3 !important;

    border-top: 1px solid #d5e1d5 !important;

    color: #28783e !important;

    font-weight: 700 !important;
    text-decoration: none !important;
}

.mg-why-us__link span {
    font-size: 19px !important;
}

.mg-why-us__link:hover,
.mg-why-us__link:focus {
    background: #28783e !important;
    color: #fff !important;

    text-decoration: none !important;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 900px) {

    .mg-why-us__grid {
        grid-template-columns: 1fr !important;
    }

    .mg-why-us__card {
        max-width: 650px !important;
        width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 600px) {

    .mg-why-us {
        padding: 25px 18px !important;
    }

    .mg-why-us__header {
        margin-bottom: 22px !important;
    }

    .mg-why-us__header h2 {
        font-size: 25px !important;
    }

    .mg-why-us__card-content {
        padding: 20px 18px 18px !important;
    }

    .mg-why-us__card h3 {
        font-size: 20px !important;
    }

    .mg-why-us__number {
        top: 16px !important;
        right: 16px !important;

        font-size: 28px !important;
    }

    .mg-why-us__link {
        padding: 15px 18px !important;
    }

}

/* ==========================================================
   POSTS / WISSEN & PRAXIS
   template-parts/home/posts.php
   ========================================================== */

.mg-posts {
    box-sizing: border-box !important;

    margin: 30px auto !important;
    padding: 35px 30px !important;

    background: #fff !important;

    border: 1px solid #d5e1d5 !important;
    border-radius: 10px !important;
}

.mg-posts *,
.mg-posts *::before,
.mg-posts *::after {
    box-sizing: border-box;
}


/* ==========================================================
   HEADER
   ========================================================== */

.mg-posts__header {
    max-width: 760px !important;

    margin: 0 auto 30px !important;

    text-align: center !important;
}

.mg-posts__eyebrow {
    display: block !important;

    margin-bottom: 8px !important;

    color: #28783e !important;

    font-size: 13px !important;
    font-weight: 700 !important;

    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.mg-posts__header h2 {
    margin: 0 0 12px !important;

    font-size: 30px !important;
    line-height: 1.25 !important;
}

.mg-posts__header p {
    max-width: 680px !important;

    margin: 0 auto !important;

    font-size: 16px !important;
    line-height: 1.6 !important;
}


/* ==========================================================
   GRID
   ========================================================== */

.mg-posts__grid {
    display: grid !important;

    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;

    gap: 20px !important;
}


/* ==========================================================
   CARD
   ========================================================== */

.mg-posts__card {
    display: flex !important;
    flex-direction: column !important;

    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    overflow: hidden !important;

    background: #f8faf8 !important;

    border: 1px solid #d5e1d5 !important;
    border-radius: 8px !important;
}


/* ==========================================================
   IMAGE
   ========================================================== */

.mg-posts__image {
    display: block !important;

    width: 100% !important;
    height: 210px !important;

    overflow: hidden !important;

    background: #eef2ee !important;
}

.mg-posts__image img {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: cover !important;
    object-position: center !important;

    transition: transform .3s ease;
}

.mg-posts__card:hover .mg-posts__image img {
    transform: scale(1.025);
}


/* ==========================================================
   CONTENT
   ========================================================== */

.mg-posts__content {
    display: flex !important;
    flex: 1 !important;
    flex-direction: column !important;

    padding: 20px !important;
}


/* Kleines Label */

.mg-posts__label {
    display: inline-block !important;

    align-self: flex-start !important;

    margin-bottom: 11px !important;
    padding: 5px 9px !important;

    background: #eef5ee !important;

    border-radius: 4px !important;

    color: #28783e !important;

    font-size: 11px !important;
    font-weight: 700 !important;

    text-transform: uppercase !important;
    letter-spacing: .6px !important;
}


/* Titel */

.mg-posts__content h3 {
    margin: 0 0 12px !important;

    font-size: 20px !important;
    line-height: 1.3 !important;
}

.mg-posts__content h3 a {
    color: inherit !important;
    text-decoration: none !important;
}

.mg-posts__content h3 a:hover {
    color: #28783e !important;
}


/* Beschreibung */

.mg-posts__excerpt {
    margin: 0 0 20px !important;

    line-height: 1.55 !important;
}


/* ==========================================================
   ARTIKEL LINK
   ========================================================== */

.mg-posts__link {
    display: flex !important;

    justify-content: space-between !important;
    align-items: center !important;

    gap: 15px !important;

    margin-top: auto !important;
    padding-top: 15px !important;

    border-top: 1px solid #d5e1d5 !important;

    color: #28783e !important;

    font-weight: 700 !important;
    text-decoration: none !important;
}

.mg-posts__link span {
    font-size: 18px !important;
}

.mg-posts__link:hover,
.mg-posts__link:focus {
    color: #1f6031 !important;
    text-decoration: none !important;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 900px) {

    .mg-posts__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 600px) {

    .mg-posts {
        padding: 25px 18px !important;
    }

    .mg-posts__header {
        margin-bottom: 22px !important;
    }

    .mg-posts__header h2 {
        font-size: 25px !important;
    }

    .mg-posts__grid {
        grid-template-columns: 1fr !important;
    }

    .mg-posts__image {
        height: 220px !important;
    }

    .mg-posts__content {
        padding: 18px !important;
    }

}



/* ==========================================================
   HEADER / NAVIGATION – MODERNISIERUNG
   Accelerate-Menü bleibt funktional inkl. Submenus
   ========================================================== */


/* Header insgesamt kompakter */

#header-text-nav-container {
    background: #fff;
}

#header-text-nav-wrap {
    padding-top: 20px;
    padding-bottom: 20px;
}


/* Seitentitel */

#header-text {
    padding: 0;
}

#site-title {
    margin: 0 0 4px;
}

#site-title a {
    color: #333;
    font-size: 32px;
    line-height: 1.15;
    font-weight: 600;
    text-decoration: none;
}

#site-description {
    margin: 0;

    color: #777;

    font-size: 14px;
    line-height: 1.5;
}


/* ==========================================================
   HAUPTNAVIGATION
   ========================================================== */

#site-navigation {
    margin-top: 0;

    background: #fff;

    border-top: 1px solid #edf1ed;
    border-bottom: 1px solid #edf1ed;
}

#site-navigation ul {
    margin: 0;
    padding: 0;
}

#site-navigation ul li {
    position: relative;
}

#site-navigation ul li > a {
    padding: 14px 16px;

    color: #333;

    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;

    text-decoration: none;

    transition:
        background .2s ease,
        color .2s ease;
}


/* Hover / aktiver Punkt */

#site-navigation ul li:hover > a,
#site-navigation ul li.current-menu-item > a,
#site-navigation ul li.current-menu-ancestor > a {
    background: #28783e;

    color: #fff;
}


/* ==========================================================
   SUBMENU – ERSTE EBENE
   ========================================================== */

#site-navigation ul li ul.sub-menu {
    position: absolute;

    z-index: 9999;

    top: 100%;
    left: 0;

    display: none;

    min-width: 245px;

    margin: 0;
    padding: 7px 0;

    background: #fff;

    border: 1px solid #d5e1d5;
    border-radius: 0 0 7px 7px;

    box-shadow: 0 8px 22px rgba(0,0,0,.10);
}


/* Dropdown anzeigen */

#site-navigation ul li:hover > ul.sub-menu,
#site-navigation ul li:focus-within > ul.sub-menu {
    display: block;
}


/* Dropdown Links */

#site-navigation ul li ul.sub-menu li {
    display: block;

    width: 100%;

    margin: 0;
}

#site-navigation ul li ul.sub-menu li > a {
    display: block;

    width: 100%;

    padding: 10px 16px;

    background: #fff;

    color: #333;

    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;

    white-space: normal;
}

#site-navigation ul li ul.sub-menu li:hover > a,
#site-navigation ul li ul.sub-menu li:focus-within > a {
    background: #f1f7f1;

    color: #28783e;
}


/* ==========================================================
   SUBMENU – ZWEITE EBENE
   z.B. Produkte > Materialien > Hanf
   ========================================================== */

#site-navigation ul li ul.sub-menu li ul.sub-menu {
    top: -7px;
    left: 100%;

    border-radius: 7px;
}


/* kleiner Pfeil für Menü mit Untermenü */

#site-navigation .menu-item-has-children > a::after {
    content: "▾";

    display: inline-block;

    margin-left: 6px;

    font-size: 10px;
}

#site-navigation ul.sub-menu .menu-item-has-children > a::after {
    content: "›";

    float: right;

    margin-left: 10px;

    font-size: 15px;
}


/* ==========================================================
   MOBILE
   Hier möglichst Accelerate-Mechanik beibehalten
   ========================================================== */

@media (max-width: 768px) {

    #header-text-nav-wrap {
        padding-top: 15px;
        padding-bottom: 15px;
    }

    #site-title a {
        font-size: 25px;
    }

    #site-description {
        font-size: 13px;
    }


    /*
     * Auf Mobile keine absoluten Flyout-Menüs.
     * Accelerate darf die Navigation vertikal ausgeben.
     */

    #site-navigation ul li ul.sub-menu,
    #site-navigation ul li ul.sub-menu li ul.sub-menu {
        position: static;

        width: 100%;
        min-width: 0;

        margin: 0;

        border: 0;
        border-radius: 0;

        box-shadow: none;
    }

    #site-navigation ul li ul.sub-menu li > a {
        padding-left: 28px;
    }

    #site-navigation ul li ul.sub-menu li ul.sub-menu li > a {
        padding-left: 42px;
    }

}



/* ==========================================================
   HEADER – BRANDING
   ========================================================== */

#header-text-nav-container {
    background: #fff;
}

#header-text-nav-wrap {
    padding-top: 18px;
    padding-bottom: 16px;
}


/* Titel */

#site-title {
    margin: 0 0 3px;
}

#site-title a {
    color: #303638;

    font-size: 30px;
    line-height: 1.15;
    font-weight: 700;

    text-decoration: none;
}

#site-title a:hover {
    color: #28783e;
}


/* Untertitel */

#site-description {
    margin: 0;

    color: #737b76;

    font-size: 14px;
    line-height: 1.45;
}


/* ==========================================================
   HAUPTMENÜ
   ========================================================== */

#site-navigation {
    margin-top: 4px;

    background: #fff;

    border-top: 1px solid #e4ebe4;
    border-bottom: 1px solid #e4ebe4;
}

#site-navigation ul li > a {
    position: relative;

    padding: 14px 15px;

    background: transparent;

    color: #303638;

    font-size: 14px;
    font-weight: 600;

    text-decoration: none;
}


/* ==========================================================
   HOVER
   ========================================================== */

#site-navigation ul li:hover > a,
#site-navigation ul li:focus-within > a {
    background: #f2f7f2;

    color: #28783e;
}


/* ==========================================================
   AKTIVER MENÜPUNKT
   Nicht mehr großer grüner Block
   ========================================================== */

#site-navigation ul li.current-menu-item > a,
#site-navigation ul li.current-menu-ancestor > a,
#site-navigation ul li.current_page_item > a {
    background: transparent;

    color: #28783e;
}


/* grüne Linie unter aktivem Hauptpunkt */

#site-navigation > .menu > ul > li.current-menu-item > a::before,
#site-navigation > .menu > ul > li.current-menu-ancestor > a::before,
#site-navigation > div > ul > li.current-menu-item > a::before,
#site-navigation > div > ul > li.current-menu-ancestor > a::before {
    content: "";

    position: absolute;

    left: 15px;
    right: 15px;
    bottom: 7px;

    height: 2px;

    background: #28783e;
}


/* ==========================================================
   DROPDOWNS
   ========================================================== */

#site-navigation ul li ul.sub-menu {
    z-index: 9999;

    min-width: 245px;

    padding: 7px 0;

    background: #fff;

    border: 1px solid #d5e1d5;
    border-radius: 0 0 7px 7px;

    box-shadow: 0 8px 22px rgba(0, 0, 0, .10);
}

#site-navigation ul li ul.sub-menu li > a {
    padding: 10px 16px;

    background: #fff;

    color: #303638;

    font-size: 13px;
    font-weight: 500;

    line-height: 1.4;
}

#site-navigation ul li ul.sub-menu li:hover > a,
#site-navigation ul li ul.sub-menu li:focus-within > a,
#site-navigation ul li ul.sub-menu li.current-menu-item > a {
    background: #f1f7f1;

    color: #28783e;
}


/* Zweite Dropdown-Ebene */

#site-navigation ul li ul.sub-menu li ul.sub-menu {
    top: -7px;
    left: 100%;

    border-radius: 7px;
}


/* Pfeile */

#site-navigation .menu-item-has-children > a::after {
    content: "▾";

    display: inline-block;

    margin-left: 6px;

    font-size: 9px;
}

#site-navigation ul.sub-menu .menu-item-has-children > a::after {
    content: "›";

    float: right;

    margin-left: 10px;

    font-size: 15px;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 768px) {

    #header-text-nav-wrap {
        padding-top: 14px;
        padding-bottom: 14px;
    }

    #site-title a {
        font-size: 24px;
    }

    #site-description {
        font-size: 13px;
    }

    #site-navigation ul li ul.sub-menu,
    #site-navigation ul li ul.sub-menu li ul.sub-menu {
        position: static;

        width: 100%;
        min-width: 0;

        margin: 0;

        border: 0;
        border-radius: 0;

        box-shadow: none;
    }

    #site-navigation ul li ul.sub-menu li > a {
        padding-left: 28px;
    }

    #site-navigation ul li ul.sub-menu li ul.sub-menu li > a {
        padding-left: 42px;
    }

}

/* ==========================================================
   MUSTERSEITE
   page-templates/muster.php
   ========================================================== */

.mg-sample {
    box-sizing: border-box;
    margin: 30px auto 50px;
}

.mg-sample *,
.mg-sample *::before,
.mg-sample *::after {
    box-sizing: border-box;
}


/* Intro */

.mg-sample__intro {
    margin-bottom: 25px;
    padding: 32px;

    background: #f8faf8;
    border: 1px solid #d5e1d5;
    border-radius: 10px;
}

.mg-sample__eyebrow {
    display: block;
    margin-bottom: 8px;

    color: #28783e;

    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.mg-sample__intro h1 {
    margin: 0 0 14px;

    font-size: 34px;
    line-height: 1.2;
}

.mg-sample__intro p {
    max-width: 780px;
    margin: 0;

    font-size: 17px;
    line-height: 1.6;
}


/* Vorteile */

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

    gap: 16px;
    margin-bottom: 25px;
}

.mg-sample__benefit {
    padding: 22px;

    background: #fff;
    border: 1px solid #d5e1d5;
    border-radius: 8px;
}

.mg-sample__benefit h3 {
    margin: 0 0 10px;

    color: #28783e;

    font-size: 20px;
    line-height: 1.3;
}

.mg-sample__benefit p {
    margin: 0;
    line-height: 1.6;
}


/* Inhalt + Formular */

.mg-sample__grid {
    display: grid;
    grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1.2fr);

    gap: 20px;
    align-items: start;
}

.mg-sample__contents {
    padding: 26px;

    background: #f8faf8;
    border: 1px solid #d5e1d5;
    border-radius: 10px;
}

.mg-sample__contents h2 {
    margin: 0 0 20px;

    font-size: 24px;
    line-height: 1.3;
}

.mg-sample__group {
    margin-bottom: 22px;
}

.mg-sample__group:last-of-type {
    margin-bottom: 18px;
}

.mg-sample__group h3 {
    margin: 0 0 8px;

    color: #28783e;

    font-size: 18px;
    line-height: 1.3;
}

.mg-sample__group ul {
    margin: 0;
    padding-left: 22px;

    list-style-type: disc;
}

.mg-sample__group li {
    margin-bottom: 6px;

    line-height: 1.5;
    list-style-type: disc;
}

.mg-sample__note {
    margin: 18px 0 0;

    padding-top: 16px;

    border-top: 1px solid #d5e1d5;

    font-size: 14px;
    line-height: 1.6;
}


/* Formular */

.mg-sample__form {
    padding: 26px;

    background: #fff;
    border: 1px solid #d5e1d5;
    border-radius: 10px;
}

.mg-sample__form > h2 {
    margin: 0 0 22px;

    font-size: 24px;
    line-height: 1.3;

    font-weight: 700;
    text-transform: uppercase;
}


/* Ninja Forms */

.mg-sample__form .nf-form-cont {
    margin: 0;
}

.mg-sample__form .nf-form-fields-required {
    margin-bottom: 20px;

    color: #666;

    font-size: 13px;
}

.mg-sample__form .nf-field-label {
    margin-bottom: 6px;
}

.mg-sample__form .nf-field-label label {
    font-weight: 700;
}

.mg-sample__form input[type="text"],
.mg-sample__form input[type="email"],
.mg-sample__form input[type="tel"],
.mg-sample__form input[type="number"],
.mg-sample__form input[type="url"],
.mg-sample__form select,
.mg-sample__form textarea {
    width: 100%;

    padding: 11px 12px;

    background: #fff;
    border: 1px solid #cfd8cf;
    border-radius: 5px;

    font-family: inherit;
    font-size: 15px;
}

.mg-sample__form textarea {
    min-height: 140px;
    resize: vertical;
}

.mg-sample__form .nf-field-container {
    margin-bottom: 18px;
}

.mg-sample__form input[type="button"],
.mg-sample__form input[type="submit"],
.mg-sample__form button {
    display: inline-block;

    padding: 11px 20px;

    background: #28783e;
    border: 0;
    border-radius: 6px;

    color: #fff;

    font-family: inherit;
    font-size: 15px;
    font-weight: 700;

    cursor: pointer;
}

.mg-sample__form input[type="button"]:hover,
.mg-sample__form input[type="submit"]:hover,
.mg-sample__form button:hover {
    opacity: 0.9;
}


/* Tablet */

@media (max-width: 900px) {

    .mg-sample__benefits {
        grid-template-columns: 1fr;
    }

    .mg-sample__grid {
        grid-template-columns: 1fr;
    }

}


/* Mobile */

@media (max-width: 600px) {

    .mg-sample {
        margin-top: 20px;
        margin-bottom: 35px;
    }

    .mg-sample__intro {
        padding: 22px 18px;
    }

    .mg-sample__intro h1 {
        font-size: 27px;
    }

    .mg-sample__intro p {
        font-size: 16px;
    }

    .mg-sample__benefit,
    .mg-sample__contents,
    .mg-sample__form {
        padding: 18px;
    }

    .mg-sample__contents h2,
    .mg-sample__form > h2 {
        font-size: 22px;
    }

}

.mg-sample__image {
    margin-bottom: 24px;
    overflow: hidden;

    background: #fff;
    border: 1px solid #d5e1d5;
    border-radius: 8px;
}

.mg-sample__image img {
    display: block;

    width: 100%;
    height: auto;
}