/* =========================================================
   ABUS / MyNewsdesk Overrides (clean)
   ========================================================= */

/* ---------- variables ---------- */
:root{
    --search-field-height: 48px;
    --stack-gap: .75rem;
}

/* =========================================================
   Media cards
   ========================================================= */
.cm-media__card.column{
    padding: 0 !important;
}

.cm-media__card{
    height: 100%;
}

.cm-media__card-link{
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.cm-media__card-link:hover,
.cm-media__card-link:focus{
    text-decoration: none;
    color: inherit;
    background-color: rgba(0,0,0,0.03);
}

.cm-media-card__image{
    flex: 0 0 auto;
}

.card__content.media-card__content{
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.card__meta{
    font-size: .9rem;
    color: #666;
    margin-top: .25rem;
}

.card__cta{
    margin-top: auto !important;
    position: relative;
}

/* optional: square image variants */
.press-detail .cm-section .cm-media-card__image{
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.press-detail .cm-section .card__photo-picture{
    display: block;
    width: 100%;
    height: 100%;
}

.press-detail .cm-section .card__photo-picture img{
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

.cm-media-card__image.square{
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.cm-media-card__image.square img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* =========================================================
   Misc
   ========================================================= */
.form-select--open .form-select__options{
    width: fit-content;
}

.copy-feedback[hidden]{ display:none; }

.copy-feedback{
    padding: .6rem .8rem;
    border: 1px solid rgba(0,0,0,.15);
    border-radius: .25rem;
    font-size: .9rem;
    color: #fff;
    background: #D40828;
    margin: 0 0 1em 0;
}

/* =========================================================
   Filters header base
   ========================================================= */
header.filters__header{
    height: auto;
    min-height: 64px;
    padding-right: 0;
}

.filters__status{
    border-bottom: 0 solid transparent;
}
div#filters-header-title {
    /*padding-right: 0;*/
}
div#filters-inline-selects {
    padding-right: 0;
}
label.form-select__label {
    white-space: nowrap;
}
div#filters-header-title {
    width: auto;
    white-space: nowrap;
    padding-right: 3%;
}




/* =========================================================
   Desktop-only behavior (optional)
   Keep your old "open" margin-top effect only on desktop
   ========================================================= */
@media (min-width: 1024px){
    label.search-field__label{ height: 48px; }

    .search-field.search-field--open input[id^="header_search-"]{
        margin-top: -1em;
    }
}

/* If you don't want transparent background for search-field, remove these */
.search-field,
.search-field.search-field--open{
    background-color: transparent !important;
    background: transparent !important;
}

/* =========================================================
   Tablet + Mobile (<=1023px)
   ========================================================= */
@media (max-width: 1023px){

    .form-select{
        top: -1.5em;
    }
    /* ---------------- Filters: stack via IDs ---------------- */
    header.filters__header{
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: var(--stack-gap);
    }

    #filters-header-title{
        margin-top: 1em;
    }

    #filters-header-title,
    #filters-inline-selects,
    #filter-button{
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        clear: both !important;
    }

    #filters-inline-selects{
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        gap: var(--stack-gap);
    }

    #filters-inline-selects > *{
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    #filter-button .button,
    #filter-button button{
        width: 100% !important;
        display: block !important;
    }

    /* ---------------- Search: STACK + OVERLAY (no jump) ---------------- */

    /* Make open/closed identical so nothing can shift */
    .cm-header--plain-search .search-field,
    .cm-header--plain-search .search-field.search-field--open{
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        transform: none !important;
        transition: none !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    /* Form stacks: (input+label overlay block) + button */
    .cm-header--plain-search .search-field__form{
        width: 100% !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: var(--stack-gap) !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box;
        position: relative; /* anchor for absolute label */
    }

    .cm-header--plain-search .search-field__form > *{
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* Input fixed height */
    .cm-header--plain-search .search-field__input{
        width: 100% !important;
        height: var(--search-field-height) !important;
        line-height: var(--search-field-height) !important;
        padding: 0 .75rem !important;
        margin: 0 !important;
        box-sizing: border-box;
        position: relative !important;
        z-index: 1;
        transform: none !important;
        transition: none !important;
    }

    /* Label overlay: sits on top of the input */
    .cm-header--plain-search .search-field__label{
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        height: var(--search-field-height) !important;

        display: flex !important;
        align-items: center !important;
        padding: 0 .75rem !important;
        margin: 0 !important;
        box-sizing: border-box;

        z-index: 2;
        pointer-events: none; /* click goes into input */
        white-space: nowrap;

        transform: none !important;
        transition: none !important;
    }

    .cm-header--plain-search .search-field__icon{
        flex: 0 0 auto;
        margin-right: .5rem;
    }

    .cm-header--plain-search .search-field__label__text{
        white-space: nowrap;
    }

    /* Text ausblenden, Icon bleibt sichtbar */
    .cm-header--plain-search .search-field__input:focus + .search-field__label .search-field__label__text,
    .cm-header--plain-search .search-field__input:not(:placeholder-shown) + .search-field__label .search-field__label__text{
        opacity: 0 !important;
    }
    .cm-header--plain-search .search-field__input{
        padding-left: 2.25rem !important; /* Platz für Icon */
    }

    /* Optional: Clickfläche bleibt stabil */
    .cm-header--plain-search .search-field__label .search-field__label__text{
        transition: none !important;
    }


    /* Button full width, no inline margin-left issues (gap handles spacing) */
    .cm-header--plain-search .search-field__form button,
    .cm-header--plain-search .search-field__form .button{
        width: 100% !important;
        display: block !important;
        margin: 0 !important;
    }

    /* hard kill: if any open-state rule still tries to move the input */
    .search-field.search-field--open input[id^="header_search-"]{
        margin-top: 0 !important;
    }
}

@media (max-width: 1023px){

    /* Label-Icon ganz links positionieren */
    .cm-header--plain-search .search-field__label{
        padding-left: .75rem !important;   /* Abstand zum Rand */
    }

    .cm-header--plain-search .search-field__icon{
        margin-right: .5rem;
    }

    /* Input bekommt Platz für Icon + Abstand */
    .cm-header--plain-search .search-field__input{
        padding-left: 5rem !important;  /* <<< WICHTIG */
    }
}

@media (max-width: 1023px){

    /* Search icon: gleiche Größe wie Desktop */
    .cm-header--plain-search .search-field__icon svg{
        width: 48px !important;
        height: 48px !important;
    }

    /* Sicherstellen, dass keine Skalierung greift */
    .cm-header--plain-search .search-field__icon{
        font-size: 1rem !important;
        line-height: 1 !important;
        transform: none !important;
    }
}
.card__content.media-card__content h2:before {
    display: contents;
}
#main-menu { display: none; }
#main-menu.is-open { display: block; }

#sub-lang-select { display: none; }
#sub-lang-select.is-open { display: block; }

section#cm_header_image_plus {
    padding-bottom: 0;
}

section#teaser-block {
    padding-bottom: 0;
    padding-top: 0;
}