:root {
    /* Colors */
    --color-primary-75: #A90D5E;
    --color-primary-100: #FE0D90;

    --color-neutral-0: #FFFFFF;
    --color-neutral-10: #FBF2EE;
    --color-neutral-20: #ECDFD9;
    --color-neutral-30: #D0BFB7;
    --color-neutral-40: #BCA59A;
    --color-neutral-50: #AB978E;
    --color-neutral-60: #887167;
    --color-neutral-70: #6C5246;
    --color-neutral-80: #49362D;
    --color-neutral-90: #220B01;

    --color-info: #0E55FF;
    --color-info-soft: #CFDEFF;
    --color-success: #378200;
    --color-success-soft: #F7FFF1;
    --color-warning: #846C00;
    --color-warning-soft: #FFF8D8;
    --color-error: #D70000;
    --color-error-soft: #FFE9E9;

    /* Headlines */
    --headline-family: "Playfair";
    --headline-weight: 500;
    --headline-line-height: 1.1;
    --headline-letter-spacing: 0;

    --headline-large-family: var(--headline-family);
    --headline-large-size: 48px;
    --headline-large-style: ;
    --headline-large-weight: var(--headline-weight);
    --headline-large-line-height: var(--headline-line-height);
    --headline-large-letter-spacing: var(--headline-letter-spacing);

    --headline-medium-family: var(--headline-family);
    --headline-medium-size: 40px;
    --headline-medium-style: ;
    --headline-medium-weight: var(--headline-weight);
    --headline-medium-line-height: var(--headline-line-height);
    --headline-medium-letter-spacing: var(--headline-letter-spacing);

    --headline-small-family: var(--headline-family);
    --headline-small-size: 32px;
    --headline-small-style: ;
    --headline-small-weight: var(--headline-weight);
    --headline-small-line-height: var(--headline-line-height);
    --headline-small-letter-spacing: var(--headline-letter-spacing);


    /* Sublines */
    --subline-family: "Open Sans";
    --subline-weight: 400;
    --subline-line-height: 1.5;
    --subline-letter-spacing: 0;

    --subline-large-family: var(--subline-family);
    --subline-large-size: 24px;
    --subline-large-style: ;
    --subline-large-weight: var(--subline-weight);
    --subline-large-line-height: var(--subline-line-height);
    --subline-large-letter-spacing: var(--subline-letter-spacing);

    --subline-medium-family: var(--subline-family);
    --subline-medium-size: 20px;
    --subline-medium-style: ;
    --subline-medium-weight: var(--subline-weight);
    --subline-medium-line-height: var(--subline-line-height);
    --subline-medium-letter-spacing: var(--subline-letter-spacing);

    --subline-small-family: var(--subline-family);
    --subline-small-size: 20px;
    --subline-small-style: ;
    --subline-small-weight: var(--subline-weight);
    --subline-small-line-height: var(--subline-line-height);
    --subline-small-letter-spacing: var(--subline-letter-spacing);

    /* Titles */
    --title-family: "Open Sans";
    --title-weight: 700;
    --title-line-height: 1.1;
    --title-letter-spacing: 0;

    --title-large-family: var(--title-family);
    --title-large-size: 20px;
    --title-large-style: ;
    --title-large-weight: var(--title-weight);
    --title-large-line-height: var(--title-line-height);
    --title-large-letter-spacing: var(--title-letter-spacing);

    --title-medium-family: var(--title-family);
    --title-medium-size: 18px;
    --title-medium-style: ;
    --title-medium-weight: var(--title-weight);
    --title-medium-line-height: var(--title-line-height);
    --title-medium-letter-spacing: var(--title-letter-spacing);

    --title-small-family: var(--title-family);
    --title-small-size: 16px;
    --title-small-style: ;
    --title-small-weight: var(--title-weight);
    --title-small-line-height: var(--title-line-height);
    --title-small-letter-spacing: var(--title-letter-spacing);

    /* Labels */
    --label-family: "Open Sans";
    --label-weight: 500;
    --label-line-height: 1.1;

    --label-large-family: var(--label-family);
    --label-large-size: 18px;
    --label-large-style: ;
    --label-large-weight: var(--label-weight);
    --label-large-line-height: var(--label-line-height);
    --label-large-letter-spacing: 0.1;

    --label-medium-family: var(--label-family);
    --label-medium-size: 16px;
    --label-medium-style: ;
    --label-medium-weight: var(--label-weight);
    --label-medium-line-height: var(--label-line-height);
    --label-medium-letter-spacing: 0.2;

    --label-small-family: var(--label-family);
    --label-small-size: 12px;
    --label-small-style: ;
    --label-small-weight: var(--label-weight);
    --label-small-line-height: var(--label-line-height);
    --label-small-letter-spacing: 0.25;

    /* Body */
    --body-family: "Open Sans";
    --body-weight: 400;
    --body-line-height: 1.5;
    --body-letter-spacing: 0;

    --body-large-family: var(--body-family);
    --body-large-size: 20px;
    --body-large-style: ;
    --body-large-weight: var(--body-weight);
    --body-large-line-height: var(--body-line-height);
    --body-large-letter-spacing: var(--body-letter-spacing);

    --body-medium-family: var(--body-family);
    --body-medium-size: 18px;
    --body-medium-style: ;
    --body-medium-weight: var(--body-weight);
    --body-medium-line-height: var(--body-line-height);
    --body-medium-letter-spacing: var(--body-letter-spacing);

    --body-small-family: var(--body-family);
    --body-small-size: 16px;
    --body-small-style: ;
    --body-small-weight: var(--body-weight);
    --body-small-line-height: var(--body-line-height);
    --body-small-letter-spacing: 0.1;

    /* typography */
    --margin-top-paragraph: 1em;
    --margin-bottom-paragraph: 1em;
    --max-width-paragraph: 784px;

    /* corners */
    --corners-s: 8px;
    --corners-m: 16px;
    --corners-l: 24px;

    /* click-targets */
    --click-targets-default: 48px;

    /* spacings */
    --spacing-xs: 4px;
    --spacing-s: 8px;
    --spacing-m: 16px;
    --spacing-l: 24px;
    --spacing-xl: 64px;

    --padding-vertical-l: 40px;

    --inline-card-padding: 16px;

    --hero-content-padding-vertical: 40px;

    --spacing-frame: 56px;

    /* content */
    --header-height: 80px!important;

    --component-margin-vertical: 48px;
    --component-inside-padding-vertical: 56px;

    /* we handle colored and white background separately when on a content page with a sidebar */
    --component-neutral-padding-horizontal: 16px;
    --component-colored-padding-horizontal: 16px;

    --content-max-width: 1244px;

    /* miscellaneous */
    --effect-image-scale: scale(1.1);
}

.footer__logo {
    display: none!important;
}

/* Language-Menü ausblenden */
.header__language-nav {
    display: none !important;
}


.theme-ocean-breeze {
    --color-primary-75: #78BCFF;
    --color-primary-100: #0068CE;

    --color-neutral-0: #FFFFFF;
    --color-neutral-10: #EBF0F5;
    --color-neutral-20: #D9E2EC;
    --color-neutral-30: #B7C2D0;
    --color-neutral-40: #9AA9BC;
    --color-neutral-50: #8E9BAB;
    --color-neutral-60: #677688;
    --color-neutral-70: #46576C;
    --color-neutral-80: #2D3A49;
    --color-neutral-90: #011022;
}

.theme-forest-mist {
    --color-primary-75: #86B6A6;
    --color-primary-100: #266D55;

    --color-neutral-0: #FFFFFF;
    --color-neutral-10: #EDEBE9;
    --color-neutral-20: #E3DEDA;
    --color-neutral-30: #CCCAC8;
    --color-neutral-40: #B3AEAA;
    --color-neutral-50: #9F9893;
    --color-neutral-60: #7B746F;
    --color-neutral-70: #51463F;
    --color-neutral-80: #443B35;
    --color-neutral-90: #220E01;
}

.theme-violet-velvet {
    --color-primary-75: #FE0D90!important;
    --color-primary-100:#A90D5E!important;
    --color-neutral-0: #FFFFFF;
    --color-neutral-10: #F0EFF2;
    --color-neutral-20: #D7D5DB;
    --color-neutral-30: #CAC8CC;
    --color-neutral-40: #AEAAB3;
    --color-neutral-50: #97939F;
    --color-neutral-60: #736F7B;
    --color-neutral-70: #463F51;
    --color-neutral-80: #3A3544;
    --color-neutral-90: #0D0122;
}



/* ==========================================================================
   EXT:news – Listenansicht + Detailansicht + Lightbox
   Frauen Union Oberberg | Primary: #A90D5E
   ========================================================================== */


/* ==========================================================================
   LISTENANSICHT
   ========================================================================== */

/* ---- Grundreset für Bootstrap-Klassen ---- */
.news-list-view .list-group {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2rem !important;
}

.news-list-view .list-group-item {
    background: #fff !important;
    border: none !important;
    border-radius: 12px !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-shadow: 0 2px 12px rgba(169, 13, 94, 0.08) !important;
    transition: box-shadow 0.3s ease, transform 0.3s ease !important;
}

.news-list-view .list-group-item:hover {
    box-shadow: 0 8px 28px rgba(169, 13, 94, 0.16) !important;
    transform: translateY(-3px) !important;
}

/* ---- Layout: Bild + Text nebeneinander ---- */
.news-list-view .news-list-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    margin: 0 !important;
}

/* ---- Bildspalte ---- */
.news-list-view .news-list-item > .col-md-3 {
    flex: 0 0 280px !important;
    max-width: 280px !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.news-list-view .news-list-item > .col-md-3 a {
    display: block !important;
    height: 100% !important;
}

.news-list-view .news-list-item > .col-md-3 img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    transition: transform 0.45s ease !important;
}

.news-list-view .list-group-item:hover .col-md-3 img {
    transform: scale(1.05) !important;
}

/* ---- Textspalte ---- */
.news-list-view .news-list-item > .col-md-9 {
    flex: 1 !important;
    padding: 1.75rem 2rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

/* ---- Überschrift ---- */
.news-list-view .news-list-item h3 {
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    margin: 0 0 0.6rem !important;
}

.news-list-view .news-list-item h3 a {
    color: #7a0a44 !important;
    text-decoration: none !important;
    transition: color 0.25s ease !important;
}

.news-list-view .news-list-item h3 a:hover {
    color: #A90D5E !important;
}

/* ---- Datum / Meta (Liste + Detail gemeinsam) ---- */
.news-list-view .extra,
.news-single .extra {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    font-size: 0.82rem !important;
    font-weight: 500 !important;
    color: #A90D5E !important;
    background: rgba(169, 13, 94, 0.08) !important;
    padding: 0.25rem 0.75rem !important;
    border-radius: 20px !important;
    margin-bottom: 0.85rem !important;
    width: fit-content !important;
    border: none !important;
}

.news-list-view .extra i,
.news-single .extra i {
    font-size: 0.78rem !important;
}

.news-list-view .extra time,
.news-single .extra time {
    letter-spacing: 0.02em !important;
}

/* ---- Teaser-Text (Liste + Detail gemeinsam) ---- */
.news-list-view .lead,
.news-single .lead {
    font-size: 0.95rem !important;
    line-height: 1.65 !important;
    color: #444 !important;
    margin-bottom: 1.25rem !important;
}

.news-list-view .lead p,
.news-single .lead p {
    margin: 0 !important;
}

/* ---- Read-More-Button (Liste) ---- */
.news-list-view .btn-read-more {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    align-self: flex-start !important;
    background: linear-gradient(135deg, #A90D5E, #c72277) !important;
    color: #fff !important;
    border: none !important;
    padding: 0.55rem 1.5rem !important;
    border-radius: 8px !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    text-decoration: none !important;
    transition: background 0.3s ease, box-shadow 0.3s ease !important;
    cursor: pointer !important;
}

.news-list-view .btn-read-more::after {
    content: "\2192" !important;
    font-size: 1rem !important;
    transition: transform 0.25s ease !important;
}

.news-list-view .btn-read-more:hover {
    background: linear-gradient(135deg, #8a0a4d, #A90D5E) !important;
    box-shadow: 0 4px 14px rgba(169, 13, 94, 0.35) !important;
    color: #fff !important;
    text-decoration: none !important;
}

.news-list-view .btn-read-more:hover::after {
    transform: translateX(4px) !important;
}

/* ---- Responsive Liste ---- */
@media (max-width: 767px) {
    .news-list-view .news-list-item {
        flex-direction: column !important;
    }

    .news-list-view .news-list-item > .col-md-3 {
        flex: none !important;
        max-width: 100% !important;
        height: 200px !important;
    }

    .news-list-view .news-list-item > .col-md-9 {
        padding: 1.25rem 1.25rem 1.5rem !important;
    }

    .news-list-view .news-list-item h3 {
        font-size: 1.15rem !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .news-list-view .news-list-item > .col-md-3 {
        flex: 0 0 220px !important;
        max-width: 220px !important;
    }

    .news-list-view .news-list-item > .col-md-9 {
        padding: 1.25rem 1.5rem !important;
    }
}


/* ==========================================================================
   DETAILANSICHT (volle Breite, kein äußerer Container)
   ========================================================================== */

/* ---- Wrapper – kein Container-Styling ---- */
.news-single .article {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* ---- Überschrift ---- */
.news-single h1 {
    font-size: 2rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: #7a0a44 !important;
    padding-bottom: 1rem !important;
    margin-bottom: 1rem !important;
    border-bottom: 2px solid rgba(169, 13, 94, 0.12) !important;
}

/* ---- Teaser / Lead ---- */
.news-single .lead {
    font-size: 1.05rem !important;
    font-weight: 500 !important;
    color: #555 !important;
    line-height: 1.7 !important;
    margin-bottom: 1.5rem !important;
    padding-bottom: 0 !important;
}

.news-single .lead p {
    margin: 0 !important;
}

/* ---- Fließtext ---- */
.news-single .news-text-wrap {
    font-size: 0.98rem !important;
    line-height: 1.75 !important;
    color: #333 !important;
    margin-bottom: 2rem !important;
}

.news-single .news-text-wrap p {
    margin-bottom: 1rem !important;
}

.news-single .news-text-wrap p:last-child {
    margin-bottom: 0 !important;
}

.news-single .news-text-wrap a {
    color: #A90D5E !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
    transition: color 0.25s ease !important;
}

.news-single .news-text-wrap a:hover {
    color: #7a0a44 !important;
}

/* ---- Bild / Thumbnail – klickbar ---- */
.news-single .thumbnail {
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 16px rgba(169, 13, 94, 0.1) !important;
    margin-bottom: 1.5rem !important;
    cursor: zoom-in !important;
    position: relative !important;
}

.news-single .thumbnail::after {
    content: "\1F50D" !important;
    position: absolute !important;
    bottom: 10px !important;
    right: 10px !important;
    background: rgba(169, 13, 94, 0.7) !important;
    color: #fff !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    pointer-events: none !important;
}

.news-single .thumbnail:hover::after {
    opacity: 1 !important;
}

.news-single .thumbnail img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 10px !important;
    transition: transform 0.35s ease !important;
}

.news-single .thumbnail:hover img {
    transform: scale(1.03) !important;
}

.news-single .thumbnail .caption {
    font-size: 0.8rem !important;
    color: #888 !important;
    padding: 0.5rem 0.25rem 0 !important;
    font-style: italic !important;
}

/* ---- Layout: Text + Bild Spalten ---- */
.news-single .row {
    display: flex !important;
    gap: 2rem !important;
}

.news-single .row > .col-md-8 {
    flex: 1 !important;
}

.news-single .row > .col-md-4 {
    flex: 0 0 320px !important;
    max-width: 320px !important;
}

/* ---- Zurück-Button ---- */
.news-single .btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    background: linear-gradient(135deg, #A90D5E, #c72277) !important;
    color: #fff !important;
    border: none !important;
    padding: 0.55rem 1.5rem !important;
    border-radius: 8px !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.02em !important;
    text-decoration: none !important;
    transition: background 0.3s ease, box-shadow 0.3s ease !important;
    cursor: pointer !important;
    margin-top: 0.5rem !important;
}

.news-single .btn-primary::before {
    content: "\2190" !important;
    font-size: 1rem !important;
    transition: transform 0.25s ease !important;
}

.news-single .btn-primary:hover {
    background: linear-gradient(135deg, #8a0a4d, #A90D5E) !important;
    box-shadow: 0 4px 14px rgba(169, 13, 94, 0.35) !important;
    color: #fff !important;
    text-decoration: none !important;
}

.news-single .btn-primary:hover::before {
    transform: translateX(-4px) !important;
}

/* ---- Responsive Detail ---- */
@media (max-width: 767px) {
    .news-single h1 {
        font-size: 1.45rem !important;
    }

    .news-single .row {
        flex-direction: column-reverse !important;
        gap: 1.25rem !important;
    }

    .news-single .row > .col-md-4 {
        flex: none !important;
        max-width: 100% !important;
    }

    .news-single .thumbnail {
        max-height: 260px !important;
        overflow: hidden !important;
    }

    .news-single .thumbnail img {
        object-fit: cover !important;
        max-height: 260px !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .news-single .row > .col-md-4 {
        flex: 0 0 260px !important;
        max-width: 260px !important;
    }
}


/* ==========================================================================
   LIGHTBOX
   ========================================================================== */

/* ---- Overlay ---- */
.news-lightbox {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    background: rgba(0, 0, 0, 0.85) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 2rem !important;
    cursor: zoom-out !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

.news-lightbox.is-active {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ---- Bild in der Lightbox ---- */
.news-lightbox img {
    max-width: 90vw !important;
    max-height: 85vh !important;
    border-radius: 6px !important;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5) !important;
    transform: scale(0.92) !important;
    transition: transform 0.3s ease !important;
    object-fit: contain !important;
}

.news-lightbox.is-active img {
    transform: scale(1) !important;
}

/* ---- Bildunterschrift ---- */
.news-lightbox__caption {
    position: absolute !important;
    bottom: 1.5rem !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 0.85rem !important;
    text-align: center !important;
    max-width: 80vw !important;
    pointer-events: none !important;
}

/* ---- Schließen-Button ---- */
.news-lightbox__close {
    position: absolute !important;
    top: 1.25rem !important;
    right: 1.5rem !important;
    width: 44px !important;
    height: 44px !important;
    background: rgba(169, 13, 94, 0.8) !important;
    border: none !important;
    border-radius: 50% !important;
    color: #fff !important;
    font-size: 1.5rem !important;
    line-height: 1 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.25s ease, transform 0.25s ease !important;
}

.news-lightbox__close:hover {
    background: rgba(169, 13, 94, 1) !important;
    transform: scale(1.1) !important;
}


/* ---- Responsive Detail ---- */
@media (max-width: 767px) {
    .news-single h1 {
        font-size: 1.45rem !important;
    }

    .news-single .row {
        flex-direction: column-reverse !important;
        gap: 1.25rem !important;
    }

    .news-single .row > .col-md-4 {
        flex: none !important;
        max-width: 100% !important;
    }

    .news-single .thumbnail {
        max-height: 260px !important;
        overflow: hidden !important;
    }

    .news-single .thumbnail img {
        object-fit: cover !important;
        max-height: 260px !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .news-single .row > .col-md-4 {
        flex: 0 0 260px !important;
        max-width: 260px !important;
    }
}





/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 767px) {
    .news-list-view .news-list-item {
        flex-direction: column !important;
    }

    .news-list-view .news-list-item > .col-md-3 {
        flex: none !important;
        max-width: 100% !important;
        height: 200px !important;
    }

    .news-list-view .news-list-item > .col-md-9 {
        padding: 1.25rem 1.25rem 1.5rem !important;
    }

    .news-list-view .news-list-item h3 {
        font-size: 1.15rem !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .news-list-view .news-list-item > .col-md-3 {
        flex: 0 0 220px !important;
        max-width: 220px !important;
    }

    .news-list-view .news-list-item > .col-md-9 {
        padding: 1.25rem 1.5rem !important;
    }
}



/* ============================================================
   TYPO3 EXT:form – Kontaktformular Styling
   Frauen Union Oberberg · fu-oberberg.de
   
   Selektoren basierend auf dem tatsächlichen Quelltext:
   - form[id^="kontaktformular"]
   - .form-element / .form-element-text / .form-element-email / .form-element-textarea
   - .form-label
   - .form-control
   - .btn.btn-primary
   - .form-navigation / .actions
   
   Einbinden in: /fileadmin/Theme/CSS/custom.css
   oder als eigene Datei via TypoScript.
   ============================================================ */

/* ── Variablen ─────────────────────────────────────────────── */
:root {
  --form-primary: #A90D5E;          /* Magenta/Pink – passend zur Frauen Union */
  --form-primary-dark: #860a4a;
  --form-primary-light: #fce8f1;
  --form-accent: #c42a7a;
  --form-bg: #ffffff;
  --form-card-bg: #fafafa;
  --form-text: #2d2d2d;
  --form-text-muted: #6b7280;
  --form-border: #d1d5db;
  --form-border-focus: var(--form-primary);
  --form-error: #dc2626;
  --form-success: #16a34a;
  --form-radius: 12px;
  --form-radius-sm: 8px;
  --form-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --form-shadow-lg: 0 4px 24px rgba(169, 13, 94, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
  --form-shadow-focus: 0 0 0 3px rgba(169, 13, 94, 0.18);
  --form-transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --form-font: "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* ── Formular-Container ────────────────────────────────────── */
form[id^="kontaktformular"] {
  max-width: 620px;
  margin: 2rem auto;
  background: var(--form-bg);
  border: 1px solid #e5e7eb;
  border-radius: var(--form-radius);
  padding: 2.5rem 2.5rem 2rem;
  box-shadow: var(--form-shadow-lg);
  font-family: var(--form-font);
  position: relative;
  overflow: hidden;
}

/* Dezenter Akzentstreifen oben */
form[id^="kontaktformular"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--form-primary), var(--form-accent));
  border-radius: var(--form-radius) var(--form-radius) 0 0;
}

/* ── Überschrift (h2 direkt im form) ──────────────────────── */
form[id^="kontaktformular"] > h2 {
  font-family: var(--form-font);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--form-text);
  margin: 0 0 1.75rem 0;
  text-align: center;
  letter-spacing: -0.02em;
  position: relative;
  padding-bottom: 1rem;
}

/* Dezente Linie unter der Überschrift */
form[id^="kontaktformular"] > h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--form-primary), var(--form-accent));
}

/* ── Formular-Elemente (.form-element) ─────────────────────── */
form[id^="kontaktformular"] .form-element {
  margin-bottom: 1.35rem;
  position: relative;
}

form[id^="kontaktformular"] .form-element:last-of-type {
  margin-bottom: 1.5rem;
}

/* ── Labels (.form-label) ──────────────────────────────────── */
form[id^="kontaktformular"] .form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--form-text);
  margin-bottom: 0.4rem;
  letter-spacing: 0.01em;
  transition: color var(--form-transition);
}

/* Pflichtfeld-Stern (.required) */
form[id^="kontaktformular"] .form-label .required {
  color: var(--form-accent);
  font-weight: 700;
  margin-left: 2px;
}

/* Label-Farbe wechselt bei Fokus */
form[id^="kontaktformular"] .form-element:focus-within .form-label {
  color: var(--form-primary);
}

/* ── Eingabefelder (.form-control) ─────────────────────────── */
form[id^="kontaktformular"] .form-control {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--form-font);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--form-text);
  background-color: var(--form-card-bg);
  border: 1.5px solid var(--form-border);
  border-radius: var(--form-radius-sm);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
  transition:
    border-color var(--form-transition),
    box-shadow var(--form-transition),
    background-color var(--form-transition);
  outline: none;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Hover */
form[id^="kontaktformular"] .form-control:hover {
  border-color: #9ca3af;
  background-color: #fff;
}

/* Focus */
form[id^="kontaktformular"] .form-control:focus {
  border-color: var(--form-border-focus);
  box-shadow: var(--form-shadow-focus);
  background-color: #fff;
}

/* Textarea */
form[id^="kontaktformular"] .form-element-textarea .form-control,
form[id^="kontaktformular"] textarea.form-control {
  min-height: 150px;
  resize: vertical;
}

/* Placeholder */
form[id^="kontaktformular"] .form-control::placeholder {
  color: #9ca3af;
  font-style: italic;
  opacity: 1;
}

/* ── Validierungsfehler ────────────────────────────────────── */
form[id^="kontaktformular"] .form-control.error,
form[id^="kontaktformular"] .form-control:invalid:not(:placeholder-shown):not(:focus) {
  border-color: var(--form-error);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

form[id^="kontaktformular"] .form-errors,
form[id^="kontaktformular"] .form-element-error {
  color: var(--form-error);
  font-size: 0.8rem;
  font-weight: 500;
  margin-top: 0.35rem;
}

/* ── Erfolgsmeldung ────────────────────────────────────────── */
form[id^="kontaktformular"] .alert-success {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-left: 4px solid var(--form-success);
  color: #166534;
  padding: 1rem 1.25rem;
  border-radius: var(--form-radius-sm);
  font-size: 0.925rem;
  margin-bottom: 1.5rem;
}

/* ── Absenden-Button (.btn.btn-primary) ────────────────────── */
form[id^="kontaktformular"] .actions {
  margin-top: 0.5rem;
}

form[id^="kontaktformular"] .form-navigation {
  display: flex;
  justify-content: stretch;
}

form[id^="kontaktformular"] .btn.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.85rem 2rem;
  font-family: var(--form-font);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.025em;
  color: #ffffff;
  background: linear-gradient(135deg, var(--form-primary) 0%, var(--form-accent) 100%);
  border: none;
  border-radius: var(--form-radius-sm);
  cursor: pointer;
  transition:
    transform var(--form-transition),
    box-shadow var(--form-transition),
    filter var(--form-transition);
  box-shadow: 0 2px 10px rgba(169, 13, 94, 0.3);
  position: relative;
  overflow: hidden;
  text-decoration: none;
}

/* Schimmernder Hover-Effekt */
form[id^="kontaktformular"] .btn.btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.15),
    transparent
  );
  transition: left 0.5s ease;
}

form[id^="kontaktformular"] .btn.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(169, 13, 94, 0.35);
  filter: brightness(1.06);
}

form[id^="kontaktformular"] .btn.btn-primary:hover::after {
  left: 100%;
}

form[id^="kontaktformular"] .btn.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(169, 13, 94, 0.2);
}

form[id^="kontaktformular"] .btn.btn-primary:focus-visible {
  outline: 3px solid var(--form-primary-light);
  outline-offset: 2px;
}

/* ── Honeypot-Feld versteckt lassen ────────────────────────── */
form[id^="kontaktformular"] input[aria-hidden="true"] {
  position: absolute !important;
  margin: 0 0 0 -9999em !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 640px) {
  form[id^="kontaktformular"] {
    padding: 1.75rem 1.25rem 1.5rem;
    margin: 1rem 0.75rem;
    border-radius: var(--form-radius-sm);
  }

  form[id^="kontaktformular"] > h2 {
    font-size: 1.35rem;
  }

  /* Verhindert iOS-Zoom bei Input-Fokus */
  form[id^="kontaktformular"] .form-control {
    font-size: 16px;
  }
}

/* ── Animationen ───────────────────────────────────────────── */
@keyframes formSlideUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

form[id^="kontaktformular"] {
  animation: formSlideUp 0.45s ease-out;
}

form[id^="kontaktformular"] .form-element {
  animation: formSlideUp 0.4s ease-out both;
}

form[id^="kontaktformular"] .form-element:nth-child(1) { animation-delay: 0.05s; }
form[id^="kontaktformular"] .form-element:nth-child(2) { animation-delay: 0.10s; }
form[id^="kontaktformular"] .form-element:nth-child(3) { animation-delay: 0.15s; }
form[id^="kontaktformular"] .form-element:nth-child(4) { animation-delay: 0.20s; }
form[id^="kontaktformular"] .form-element:nth-child(5) { animation-delay: 0.25s; }

form[id^="kontaktformular"] .actions {
  animation: formSlideUp 0.4s ease-out both;
  animation-delay: 0.30s;
}

/* ── Print ─────────────────────────────────────────────────── */
@media print {
  form[id^="kontaktformular"] {
    box-shadow: none;
    border: 1px solid #ccc;
    animation: none;
  }

  form[id^="kontaktformular"] .form-element {
    animation: none;
  }

  form[id^="kontaktformular"] .btn.btn-primary {
    display: none;
  }
}


/**
 * Viewports
 */

/* Small */
@media (min-width: 768px) {
    :root {
        --component-margin-vertical: 56px;
        --component-neutral-padding-horizontal: 32px;
        --component-colored-padding-horizontal: 32px;
        --hero-content-padding-vertical: 48px;
        --inline-card-padding: 24px;
    }
}

/* Medium */
@media (min-width: 1024px) {
    :root {
        --headline-small-size: 40px;
        --headline-large-size: 64px;
        --headline-medium-size: 48px;
        --subline-large-size: 32px;
        --subline-medium-size: 24px;
        --component-margin-vertical: 80px;
        --hero-content-padding-vertical: 52px;
    }
}

/* Large */
@media (min-width: 1280px) {
    :root {
        /* 8-col */
        --max-width-paragraph: 808px;
        --header-height: 100px!important;
    }

}