.mark {
    background-color: var(--gray-100);
}

.box--border, .box--border-theme {
    border: .125rem solid #ccc;
}

main.search h2.heading--accordion {
    margin-bottom: 0
}

.wrapper--icon-text .icon--large {
    position: relative;
    top: .25rem;
}

.wrapper--icon-text {
    align-items: baseline;
    -moz-column-gap: .875rem;
    column-gap: .875rem;
    display: flex;
}

#main[data-search] .col1, #main[data-search] .col3  {
    display: none;
}

#main[data-search] #content {
    width: 100%;
}

a.form__button, a.form__button:hover {
    text-decoration: none;
}
.form__button--icon.form__button--inline {
    display: inline-flex;
}
.form__button--icon {
    align-items: center;
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    width: auto;
}
.form__button--icon .button__icon {
    height: 1rem;
    width: 1.25rem;
    fill: #FFF;
}

.icon--mark {
    left: 0;
}

.transitionStop {
    transition: none !important;
}

.box--border-top-bottom {
    border: none;
    border-bottom: .125rem solid #ccc;
    border-top: .125rem solid #ccc;
}

button, select {
    text-transform: none;
}
button, input, optgroup, select, textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}

/* ====================
    START NEW LAYOUT STYLES
   ====================*/


/* VARIABLES */

:root {
    /* hydra\css\sass\global\_variables.scss */
    --font-size-h1-mobile: calc(1.5rem + (1.5rem * (var(--font-factor, 1) * 0.2)));
    --font-size-h2-mobile: calc(1.5rem * var(--font-factor, 1));
    --font-size-h3-mobile: calc(1.25rem * var(--font-factor, 1));
    --font-size-h4-mobile: calc(1rem * var(--font-factor, 1));
    --font-size-default-mobile: calc(1rem * var(--font-factor, 1));
    --font-size-label-mobile: calc(1rem * var(--font-factor, 1));

    --font-size-h1: calc(2.25rem + (2.25rem * (var(--font-factor, 1) * 0.2)));
    --font-size-h2: calc(1.75rem * var(--font-factor, 1));
    --font-size-h3: calc(1.5rem * var(--font-factor, 1));
    --font-size-h4: calc(1.25rem * var(--font-factor, 1));
    --font-size-default: calc(1.25rem * var(--font-factor, 1));
    --font-size-credits: calc(.875rem * var(--font-factor, 1));
    --font-size-input: calc(1rem * var(--font-factor, 1));
    --font-size-h3: calc(1.5rem * var(--font-factor, 1));

    --line-height-default: 1.75;

    --gap-h: 3rem;

    --h-1: 1rem;
    --h-3: calc(5/4*var(--h-1));
    --h-4: calc(3/2*var(--h-1));
    --h-5: calc(7/4*var(--h-1));
    --h-6: calc(2*var(--h-1));
    --h-8: calc(5/2*var(--h-1));

    --w-1: 1rem;
    --w-3: calc(5/4*var(--w-1));
    --w-4: calc(3/2*var(--w-1));
    --w-5: calc(7/4*var(--w-1));
    --w-6: calc(2*var(--w-1));
    --w-8: calc(5/2*var(--w-1));

    --icon-mark-width: 1.125rem;
    --icon-mark-height: 1.125rem;


    --border-width: .125rem;
    --border-radius: .5rem;

    --black: hsl(0, 0%, 0%);

    --white: hsl(0, 0%, 100%);

    --gray-50: hsl(0, 0%, 95%);
    --gray-100: hsl(0, 0%, 90%);
    --gray-200: hsl(0, 0%, 80%);
    --gray-500: hsl(0, 0%, 50%);
    --gray-600: hsl(0, 0%, 40%);
    --gray-750: hsl(0, 0%, 25%);
    --gray-800:  hsl(0, 0%, 20%);

    --focus: hsl(26, 100%, 38%);

    /* hydra\css\sass\global\_breakpoints.scss */
    --breakpoint-logo: 53em;
    --breakpoint-menu: 37.5em;
    --breakpoint-module-2col: 46em;
}



/* FONTS
    hydra\css\sass\miniweb_base\_fonts.scss */


.main.search {
    font-family: "Atkinson Hyperlegible Next", sans-serif;
    color: var(--gray-800);
    font-size: var(--font-size-default-mobile);
    line-height: var(--line-height-default);
}

@media only all and (min-width: 53em) {
    main.search {
        font-size: var(--font-size-default);
    }
}


.dark {
    color: var(--white);
}

/* Schriftgrößen */

main.search {
    a:not(.rsbtn_play) {
        font-size: var(--font-size-default-mobile);
    }

    p {
        font-size: var(--font-size-default-mobile);
        margin-bottom: var(--h-5);
        margin-top: 0;
    }

    .h1,
    .h2,
    .h3,
    .h4 {
        font-weight: normal;
        margin-top: 0;
    }

    .h1 {
        font-size: var(--font-size-h1-mobile);
        line-height: 1.375;
        margin-bottom: calc(1/2*var(--gap-h));
    }

    .h2 {
        font-size: var(--font-size-h2-mobile);
        margin-bottom: calc(3/4*var(--h-1));
    }

    .h3 {
        font-size: var(--font-size-h3-mobile);
        margin-bottom: calc(1/2*var(--h-1));
        &.text--icon-l /* Text mit vorangestelltem Icon links */{
            margin-bottom: calc(3/4*var(--h-1));
        }
    }

    .h4 {
        font-size: var(--font-size-h4-mobile);
        margin-bottom: calc(1/4*var(--h-1));
    }

    b,
    strong {
        font-weight: 700;
    }

    .caption--img {
        font-size: var(--font-size-default-mobile);
    }

    .bg--highlight /* Akzentfarbe im Hintergrund erfordert weiße Schrift */ {
        color: var(--white);
    }

    .bg--highlight /* Akzentfarbe im Hintergrund erfordert weiße Linkfarbe */{
        a {
            color: var(--white);
        }
    }
}

@media only all and (min-width: 53em) {
    main.search {
        a:not(.rsbtn_play) {
            font-size: var(--font-size-default);
        }

        p {
            font-size: var(--font-size-default);
            margin-bottom: calc(1/2*var(--gap-h));
        }
        .h1 {
            font-size: var(--font-size-h1);
            margin-bottom: calc(2/3*var(--gap-h));
        }
        .h2 {
            font-size: var(--font-size-h2);
            margin-bottom: var(--h-1);
        }
        .h3 {
            font-size: var(--font-size-h3);
            margin-bottom: calc(1/2*var(--h-1));
            &.text--icon-l {
                margin-bottom: calc(3/4*var(--h-1));
            }
        }
        .h4 {
            font-size: var(--font-size-h4);
            margin-bottom: calc(1/4*var(--h-1));
        }
        .caption--img {
            font-size: var(--font-size-default);
        }
    }
}

/* SPACING
    hydra\css\sass\global\_spacings.scss*/

    .spacing--l-r /* horizonaler Abstand zum Fensterrand links und rechts bei Fensterbreite kleiner maximaler Contentbreite */ {
        padding-left: calc(1/2*var(--w-1));
        padding-right: calc(1/2*var(--w-1));
        .spacing--l-r {
            padding-left: 0;
            padding-right: 0;
        }
    }


/* LINKS + Button-Links
    hydra\css\sass\global\_links.scss */

a {
        color: var(--theme-link);
        text-decoration: none;
        &:hover {
            color: var(--theme-link-hover);
            text-decoration: underline;
        }
        &.wrapper--icon-text /* Text mit Icon */ {
            /*line-height: 2.25;*/
            width: -webkit-fit-content;
            width: -moz-fit-content;
            width: fit-content;
        }
        &:hover.button--primary,
        &.button--primary {
            color: var(--white);
            text-decoration: none;
            .icon--feedback {
                fill: var(--white);
            }
        }
    }


    a.col--img:focus-visible,
    .img--large a:focus-visible {
        outline-offset: .125rem;
    }

    .link--download-filesize /* Download Dateigroessenangabe im Link, ohne Umbruch */ {
        /*padding-left: 1/4*var(--w-1);*/
        white-space: nowrap;
    }



    @media only all and (min-width: 53em) {
        a.wrapper--icon-text {
            line-height: 2;
        }
        .main.search a.wrapper--icon-text {
            line-height: 2.25;
        }
    }

    @media print {
        a.print\:show-link:after{
            content: " (" attr(href) ") ";
          }
    }


    /* Links als Buttons */


/* ICONS
    hydra\css\sass\global\_icons.scss*/

    /*
 * Icon sizes
 */

.icon--xxlarge {
    height: var(--h-8);
    width: var(--w-8);
}

.icon--xlarge {
    height: var(--h-6);
    width: var(--w-6);
}

.icon--large {
    height: var(--h-5);
    width: var(--w-5);
}

.icon--medium {
    height: var(--h-4);
    width: var(--w-4);
}

.icon--small {
    height: var(--h-3);
    width: var(--w-3);
}

.icon--xsmall {
    height: var(--h-1);
    width: var(--w-1);
}

/*
 * Icon Positionierung
 */

.icon--absolute /* Absolut positioniertes Icon */ {
    position: absolute;
}

/*
 * Text mit Icon-Kennzeichnung
 */

.wrapper--icon-text /* Rahmen um Icon und Text */ {
    align-items: baseline;
    column-gap: calc(7/8*var(--w-1));
    display: flex;
    position: relative;
    svg {
        flex-shrink: 0;
   }
}

.icon--mark /* Vorangestelltes Icon in Texthöhe zur Kennzeichnung von Textinhalten mit und ohne Link */ {
    fill: var(--gray-750);
    height: var(--icon-mark-height);
    position: relative;
    top: calc(1/16*var(--h-1));
    width: var(--icon-mark-width);
    a & {
        fill: var(--theme-bg-highlight);
    }
    a:hover & {
        fill: var(--theme-bg-highlight-hover);
    }
}

.icon--feedback {
    height: 1.75rem;
    position: relative;
    top: .625rem;
    width: 1.75rem;
}

/*
 * Navigation Pfeil - Breadcrumb, Hauptnavigation, Paginierung, Bildergalerie
 */

.icon--nav /* Pagination Pfeil links und rechts */ {
    background: var(--white);
    fill: var(--gray-600);
    height: var(--h-5);
    top: calc(50% - 1/2*var(--w-5));
    width: var(--w-5);
}

.icon--breadcrumb /* Breadcrumb Pfeil rechts */ {
    fill: var(--gray-600);
    height: var(--h-1);
    right: 0;
    top: calc(50% - 1/2*var(--w-1));
    width: var(--w-1);
}

.dark .breadcrumb .icon--breadcrumb{
    fill: var(--gray-100);
}


/*
 * Toggle Icon bei Navigation, Footer Bildnachweise und Gruppenmodul
 */

.icon--toggle {
    background: var(--white);
    fill: var(--theme-bg-highlight);
    height: var(--h-5);
    position: relative;
    top: calc(1/2*var(--h-1));
    transition: all .5s;
    width: var(--w-5);
    .button--accordion:hover & {
        fill: var(--theme-bg-highlight-hover);
    }
}

.box--aside .icon--toggle {
    background:  var(--gray-50);
}

.dark .box--aside .icon--toggle {
    background:  var(--gray-850);
}


/* Gruppenmmodul Toggle */
.button--accordion[aria-expanded="false"] .icon--toggle,
.button--accordion[aria-expanded="true"] .button--accordion[aria-expanded="false"] .icon--toggle {
    transform: rotate(-0);
}

.button--accordion[aria-expanded="true"] .icon--toggle,
.button--accordion[aria-expanded="true"] .button--accordion[aria-expanded="true"] .icon--toggle {
    transform: rotate(-180deg);
}

.no-js .icon--toggle {
    display: none;
}

.icon--close /* Close-Button Icon*/ {
    height: 1.5rem;
    left: calc(1/4*var(--w-1));
    top: calc(1/4*var(--h-1));
    width: 1.5rem;
}

.icon--actionbutton /* Icon als Button für Aktionen */ {
    fill: var(--theme-bg-highlight);
    height: calc(var(--h-4) + var(--h-1));
    padding: calc(1/2*var(--h-1)) calc(1/2*var(--w-1));
    transition: all 0.5s;
    width: calc(var(--w-4) + var(--w-1));
}

.icon--actionbutton:hover {
    fill: var(--theme-bg-highlight-hover);
}


@media only all and (min-width: 37.5em) {

    .icon--toggle {
        height: var(--h-6);
        width: var(--w-6);
    }

}


@media only all and (min-width: 53em) {
    .header .icon--search /* Icon Lupe */ {
        height: var(--h-6);
        left: calc(2/7*var(--w-5));
        top: calc(50% - 1rem);
        transition: all 0.5s;
        width: var(--w-6);
    }
}



/* BUTTON
   hydra\css\sass\global\_buttons.scss */



    button,.button {
     border-color: var(--theme-bg-highlight);
     border-radius: var(--border-radius);
     border-style: solid;
     border-width: var(--border-width);
     cursor: pointer;
     &:hover,
     &:active {
         border-color: var(--theme-bg-highlight-hover);
     }
 }

 button:-moz-focusring /* Überschreibt den Fokusstyle aus normalize.scss */,
 [type="button"]:-moz-focusring,
 [type="reset"]:-moz-focusring,
 [type="submit"]:-moz-focusring {
     outline: .125rem solid var(--focus);
 }

 button[unselect]{
     display: flex;
     align-items: center;
     justify-items: center;
     border: 2px solid var(--theme-bg);
     border-radius: 0.3rem;
     background-color: transparent;
     color: var(--theme-bg);
     font-size: var(--font-size-credits);
     padding: 0.1rem 0.3rem;

     &:after{
         content: "";
         mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' id='fa-times-regular' viewBox='0 0 320 512'%3E%3Cpath d='M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z'%3E%3C/path%3E%3C/svg%3E");
         width: 1rem;
         height: 1rem;
         display: inline-block;
         mask-repeat: no-repeat;
         background-color: var(--theme-bg);
         margin-left: 0.5rem;
     }
 }

 .button--text /* Button mit Text */ {
     line-height: 1.75;
     padding: calc(1/8*var(--h-1)) var(--w-1) calc(1/2*var(--h-1)) var(--w-1);
 }

  /* Button  mit Icon */

 .button--icon {
     background: inherit;
     border: none;
     display: inline-block;
     flex-shrink: 0;
     height: calc(9/7*var(--h-5));
     padding: calc(1/7*var(--h-5)) calc(1/7*var(--w-5)) calc(1/7*var(--h-5)) calc(2/7*var(--w-5));
     width: calc(9/7*var(--w-5));
 }

 .wrapper--main-search .button--icon /* Button nur mit Icon innerhalb Suche in Header und Navigation */ {
     position: absolute;
     right: 0.75rem;
     top: calc(50% - 1.125rem);
 }

 /* Toggle-Button: Icon und Überschrift */

 .button--accordion {
     background: none;
     border: none;
     color: var(--theme-link);
     line-height: 1.75;
     padding: calc(1/2*var(--h-1)) 0 calc(3/4*var(--h-1)) 0;
     text-align: left;
     width: 100%;
     &:hover {
         color: var(--theme-link-hover);
     }
 }

 /* Toggle-Button ohne JS: Icon wird ausgeblendet und Überschrift bekommt Standard-Textfarbe */

 .no-js {
     .button--accordion {
         color: var(--gray-800);
         cursor: default;
         &:hover {
             color: var(--gray-800);
             cursor: default;
         }
     }
 }

 /* Primary und Secondary Buttons */
    main.search {
        .button--primary {
            background: var(--theme-bg-highlight) /* Hintergrund in Themefarbe, farbig auch bei anthrazit und grau */;
            color: var(--white);
            &:hover /* Reihenfolge wichtig: active kommt nach hover sonst greift die Regel nicht */ {
                background-color: var(--theme-bg-highlight-hover);
            }
            &:active {
                background: var(--theme-bg-highlight);
            }
        }

        .button--primary:disabled ,
        .button--primary:hover:disabled {
            background: var(--gray-600);
            border-color: var(--gray-600);
        }


    .button--secondary {
        background: var(--white);
        color: var(--theme-link);
        &:hover {
            background-color: var(--gray-100);
            color: var(--theme-link-hover);
        }
        &:active {
            background: var(--white);
        }
    }

    .footer .button--primary {
        background: var(--gray-50);
        border-color: var(--gray-50);
        color: var(--gray-800);
        margin-top: var(--h-1);
        &:hover {
            background-color: var(--white);
            border-color: var(--white);
            color: var(--black);
        }
    }

    .dark .footer .button--primary {
        background: var(--gray-50);
        border-color: var(--gray-50);
        color: var(--black);
        &:hover {
            background-color: var(--white);
            box-shadow: inset 0 0 .125rem var(--gray-600);
            color: var(--black);
        }
    }

    }

/* CHECKBOX
    hydra\css\sass\global\_checkbox.scss*/

    input[type="checkbox"] {
        appearance: none;
        -webkit-appearance: none;
        background-color: transparent;
        margin: 0;
        font: inherit;
        color: currentColor;
        width: 1.25rem;
        height: 1.25rem;
        border: 0.15rem solid var(--gray-500);
        border-radius: var(--border-radius);
        display: grid;
        place-content: center;
    }
    input[type="checkbox"]:focus-visible {
        box-shadow: none;
        outline: 2px solid var(--focus);
        outline-offset: 1px;
    }

    input[type="checkbox"]::before {
        content: "";
        background: var(--theme-bg-highlight);
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3E%3C/svg%3E");
        width: 0.8rem;
        height: 0.8rem;
        transform: scale(0);
        transition: 120ms transform ease-in-out;
    }

    input[type="checkbox"]:checked {
        border: 0.15rem solid var(--theme-bg-highlight);
    }

    input[type="checkbox"]:checked::before {
        transform: scale(1);
    }

/* PAGINATION
    hydra\css\sass\global\_pagination.scss */

    nav[aria-label="pagination"] {
        display: flex;

        a {
            display: grid;
            align-self: center;
            padding: 1rem;
            use {
                fill: var(--theme-bg);
            }
            &:focus-visible {
                outline: 2px solid var(--focus);
                outline-offset: 2px;
            }
        }
        & ul {
            --height: calc(3rem * var(--font-factor, 1));
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            margin: 0;
            gap: 0.3rem;
            li {
                height: var(--height);
                min-width: var(--height);
                font-weight: 600;
                border-radius: calc(var(--height) / 2);
                display: flex;
                justify-content: center;
                align-content: center;
                cursor: pointer;
                &.ellipsis {
                    a {
                        cursor: default;
                        text-decoration: none;
                    }
                }
                &[active] {
                    background-color: var(--theme-bg);
                    cursor: default;
                    & a {
                        color: var(--white);
                        text-decoration: none;
                    }
                }
            }
        }
    }
    @media only all and (max-width: 53em) {
        nav[aria-label="pagination"] {
            ul {
                & li {
                    &:not([active], .forw-backw, .ellipsis, .start-end) {
                        display: none;
                    }
                    &[active] {
                        background-color: transparent;
                        & a {
                            color: inherit;
                        }
                    }
                }
            }
        }
    }

    @media only all and (max-width: 37.5em) {
        nav[aria-label="pagination"] {
            ul {
                & li {
                    &:not([active], .forw-backw) {
                        display: none;
                    }
                }
            }
        }
    }




/*  SEARCHPAGE
    hydra\css\sass\miniweb_content\_searchpage.scss */

main.search {
    form {
        display: flex;
        flex-direction: column;

        label {
            font-size: var(--font-size-credits);
        }
    }
    form > button {
        margin: 1rem 0;
        padding: 0.4rem;
        align-self: flex-end;
    }
    & p {
        margin: 0;
    }
    & ul {
        list-style: none;
            padding: 0;
        &[aria-label="Suchergebnisse"] {
            article {
                border: none;
                border-bottom: var(--border-width) solid var(--gray-200);
                padding-block: 2rem;

                & a{
                    padding: 0;
                }
            }
        }
    }
    & > article > p {
        font-size: var(--font-size-input);
        border: none;
        border-bottom: var(--border-width) solid var(--gray-200);
    }
    section[aria-label="details"] {
        font-style: italic;
        font-size: var(--font-size-credits);
        & ul {
            margin: 0;
        }
        .tag--external {
            border: .125rem solid #666;
            border-radius: .25rem;
            font-style: normal;
            padding: 0 .5rem;
            display: inline-block;
            margin: .25rem 0;
        }
    }
    nbg-querytag > section{
        margin-top: 1rem;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0.3rem;
        margin-bottom: 1rem;

        & button[aria-label="unselect"] {
            height: auto;
            font-size: var(--font-size-default);
        }
    }

    /* Overlay with direct link to backend controller NOTE: productive only visible with active cms login  */

    .wrapper--overlay-actions {
        display: none;
        position: absolute;
        right: 0;
        top: 0.5rem;
        padding: 0.3rem 0.4rem 0.2rem;
        gap: 0.2rem;
    }

    .wrapper--overlay-actions .button--icon {
        display: unset;
    }

    [data-search-id], [data-adword-id] {
        position: relative;
    }
    

    [data-search-id]:hover .wrapper--overlay-actions , [data-adword-id]:hover .wrapper--overlay-actions  {
        display: flex;
    }
}

@media only all and (min-width: 37.5em) {
    main.search {
        form {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(2, auto);
            gap: 1rem;
            & fieldset {
                grid-row: 1 / span 2;
                grid-column: 3;
            }
            & bottom {
                grid-column: 3;
            }
        }
        form > button {
            margin-top: 0;
        }
    }
}


/*  ACCORDION
    hydra\css\sass\global\_accordion.scss */


/* Accordion-Überschrift - Rahmen um Toggle-Button */
.heading--accordion {
    margin: 0;
    padding: 0;
}

@media only all and (min-width: 46em) {

    .wrapper--accordion-teaser {
        margin-bottom: var(--gap-h);
        .wrapper--img-text {
            margin-bottom: calc(1/2*var(--gap-h));
        }
    }
}

@media only all and (min-width: 53em) {
    .heading--accordion {
        font-size: var(--font-size-h3);
    }
}

/* SELECT
    hydra\css\sass\global\_select.scss*/

main.search {

/*  QUICKSEARCH
    current layout: htdocs\global\content_snippets\search_old.ssi
                    site\sass\miniweb_navigation\_search.scss           */

.icon--search {
    fill: #666;
    height: 1.15rem;
    left: .25rem;
    top: calc(50% - .125rem);
    transition: all .5s;
    width: 1.75rem;
}


/* MAP */

.wrapper--map {
    display: flex;
    margin: 1rem 0 0 0;
    gap: 1rem;
    flex-direction: column;
}

.map {
    position: relative;
    width: 100%;
    height: 150px;
    border: 1px solid #ccc;
}

main.search p.wrapper--address {
    margin-bottom: 1.75rem;
}

@media only all and (min-width: 46em) {
    .wrapper--map {
        flex-direction: row;
        gap: 1.75rem;
    }

    .map {
        position: relative;
        width: 400px;
        height: 256.41px;
        border: 1px solid #ccc;
    }
}