/* filepath: themes/custom/x10_volunteers/css/style.css */
/* Custom styles for x10 Volunteers Theme */

:root {
    --max-width: 100rem;
}

@font-face {
	font-family: "KarlST_UltraBlack";
	font-weight: bold;
	src: url("../fonts/KarlST_UltraBlack.woff") format("woff");
}
@font-face {
  font-family: 'KarlST_UltraBlack';
  src: url('../fonts/KarlST_UltraBlack.woff2') format('woff2-variations');
	font-weight: 400 900;
	font-display: swap;
}

@font-face {
	font-family: "KarlST_Bold";
	font-weight: bold;
	src: url("../fonts/KarlST_Bold.woff") format("woff");
}
@font-face {
  font-family: 'KarlST_Bold';
  src: url('../fonts/KarlST_Bold.woff2') format('woff2-variations');
	font-weight: 400 900;
	font-display: swap;
}

@font-face {
	font-family: "KarlST";
	font-weight: 400;
	src: url("../fonts/KarlST_Regular.woff") format("woff");
}
@font-face {
  font-family: 'KarlST';
  src: url('../fonts/KarlST_Regular.woff2') format('woff2-variations');
	font-weight: 400;
}

@font-face {
	font-family: "KarlST";
	font-weight: bold;
	src: url("../fonts/KarlST_Bold.woff") format("woff");
}
@font-face {
  font-family: 'KarlST';
  src: url('../fonts/KarlST_Bold.woff2') format('woff2-variations');
	font-weight: bold;
}



:root {
    --font-heading: "KarlST_Bold";
    --font-sans: "KarlST_Bold";
    --font-primary: "KarlST", "Open Sans", Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;
    --font-serif: "KarlST", "Open Sans", Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;
    --color-primary: #000000;
}



body {
    background-image:none;
    font-family:  var(--font-primary);
    background-color: #e6e6e6;
}

p {
    line-height: 1.8rem;
    margin-block-start: 1.2rem !important;
    margin-block-end: 1.2rem!important;
}

.page-wrapper {
    max-width: 100%;
    background-color: #e6e6e6;
}

.layout-main-wrapper,
.main-content__container,
.layout-main,
.main-content,
main {
    background-color: transparent;
}

h1.title.page-title {
    display: flex;
    justify-content: center;
}

/* Olivero Sidebar-Grid deaktivieren */
.layout-main {
    display: block;
}

/*Logo*/
@media (min-width: 75rem) {
    .site-branding__logo img {
        width: 250px;
    }
}

@media (min-width: 43.75rem) {
    h1 {
        font-size: 2.5rem;
        line-height: var(--sp4);
    }
    h2 {
        font-size: 2rem;
        line-height: var(--sp4);
    }
}

/*Formulare*/
.progress-step.is-active .progress-marker::before, .fieldset__legend {
    background-color: var(--color-primary);
}

/*login*/
@media (min-width: 31.25rem) {
    [type="color"], [type="date"], [type="datetime-local"], [type="email"], [type="file"], [type="month"], [type="number"], [type="password"], [type="search"], [type="tel"], [type="text"], [type="time"], [type="url"], [type="week"], textarea {
        width: 100%;
    }
}

div#login-block {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 1fr;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
}

.login-block-button {
    text-align: center;
    background-color: #000000;
    margin: 1rem;
    border-radius:20px;
}

.login-block-button:hover {
    background-color: #ffffff;
    border: 1px solid #000000;
}

.login-block-button a {
    color:#ffffff;
    text-decoration:none;
    box-shadow: none;
}

.login-block-button:hover a, .login-block-button a:hover {
    color:#000000;
    text-decoration:none;
    box-shadow: none;
}

p#password-reset {
    font-size: .9rem;
    margin-top: 0;
    text-align: center;
}

div#block-x10-frontend-intro-block {
    margin-bottom: 0;
}

div#block-x10-frontend-page-title {
    margin-bottom: 1rem;
}

/* ===== Header Layout ===== */

.site-header__inner__container {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    max-width: 100% !important;
    width: 100% !important;
    padding-inline: 1.5rem;
    padding-block: 0;
}

div#site-header__inner {
    background-color: #000000;
    padding: 0;
    width: 100% !important;
    min-height: 45px;
}

/* --- Top Utility Bar (Backlink | Account + Language) --- */
#block-x10-frontend-cssblock {
    display: none; /* hide the script block from layout */
}

#block-x10-frontend-backlink,
#block-x10-frontend-account-menu,
#block-x10-frontend-sprachumschalter {
    order: -1; /* pull above header-nav */
}


/* Utility bar: all 3 blocks share a "row" via flex-wrap */
#block-x10-frontend-backlink {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    padding: 0.2rem 0;
    font-size: 0.8rem;
}

#block-x10-frontend-backlink .field__item p {
    margin: 0;
}

#block-x10-frontend-backlink a {
    color: #ffffff;
    text-decoration: none;
    opacity: 0.8;
}

#block-x10-frontend-backlink a:hover {
    opacity: 1;
}

#block-x10-frontend-account-menu {
    display: flex;
    align-items: center;
    padding: 0.1rem 0;
    margin-inline-start: auto;
    z-index:1000;
}

#block-x10-frontend-account-menu ul.menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.75rem;
}

#block-x10-frontend-account-menu .menu__link {
    /* color: #ffffff;
    text-decoration: none;
    font-size: 0.8rem;
    padding: 0.2rem 0.75rem;
    border: 1px solid #ffffff;
    border-radius: 20px; */
    display:none;
}

#block-x10-frontend-account-menu .menu__link:hover {
    background: #ffffff;
    color: #000000;
}

#block-x10-frontend-sprachumschalter {
    order: -1;
    display: flex;
    align-items: center;
    padding: 0.1rem 0;
    margin-inline-start: 0.5rem;
    z-index:1000;
}

/* Utility bar / main bar separator removed for compact header */
.site-header__inner__container::before {
    content: '';
    display: block;
    width: 100%;
    order: 0;
    height: 0;
}

/* --- Main Header Bar (Dateblock | Logo | Menu) --- */
.primary-nav__menu-link {
    color: #ffffff;
    font-size: clamp(1.1rem, 0.5rem + 1.2vw, 1.5rem) !important;
    font-weight: 700;
}

.primary-nav__menu-link:hover {
    color: #ffffff;
}

body:not(.is-always-mobile-nav) .primary-nav__menu-link-inner {
    padding-block: 0.5rem;
}

body:not(.is-always-mobile-nav) .primary-nav {
    margin-inline-start: 0;
    padding-inline-start: 0;
}

#block-x10-frontend-site-branding {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1 1 0;
    margin: 0;
    padding: 0;
    transition: padding 0.5s ease-in-out;
}

.site-branding__inner {
    height: auto !important;
    padding-block: 0 !important;
}

#block-x10-frontend-site-branding img {
    max-height: 130px;
    margin: 0;
    transition: max-height 0.5s ease-in-out;
}

/* --- Utility bar items: transition for compact mode --- */
#block-x10-frontend-account-menu,
#block-x10-frontend-sprachumschalter {
    transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

div#header-nav {
    background-color: #000000;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.1rem 0;
    min-width: 100%;
    margin-block-start: -1.9rem;
    transition: padding 0.5s ease-in-out, margin 0.5s ease-in-out;
}

/* Dateblock transition */
#block-x10-frontend-dateblock {
    transition: opacity 0.5s ease-in-out, max-width 0.5s ease-in-out, padding 0.5s ease-in-out;
    overflow: hidden;
}

/* Logo transition */
#block-x10-frontend-site-branding img {
    transition: max-height 0.5s ease-in-out;
}

/* === Compact header on scroll down === */
.header--compact #block-x10-frontend-account-menu,
.header--compact #block-x10-frontend-sprachumschalter {
    transform: translateY(-100%);
    opacity: 0;
    height: 0;
    padding: 0;
    overflow: hidden;
    pointer-events: none;
}

.header--compact .site-header__inner__container::before {
    height: 0;
    margin: 0;
}

.header--compact #block-x10-frontend-site-branding img {
    max-height: 128px;
}

.header--compact div#header-nav {
    margin-block-start: 0;
    padding: 0.15rem 0;
}

.header--compact div#site-header__inner {
    padding: 0;
}

.header--compact .site-header__inner__container {
    padding-block: 0;
}

body:not(.is-always-mobile-nav) .header-nav {
    grid-column: unset;
    justify-content: unset;
    height: auto;
    max-width: none;
}

#block-x10-frontend-dateblock {
    flex: 0 0 auto;
    white-space: nowrap;
}

#block-x10-frontend-dateblock .field__item p {
    margin: 0;
    color: #ffffff;
    font-size: 0.95rem;
    line-height: 1.35;
    font-weight: 700;
}

#block-x10-frontend-dateblock .field__item p span {
    font-size: 1.35rem;
    font-weight: 900;
    font-family: 'KarlST_Bold', sans-serif;
}

#block-x10-frontend-main-menu {
    margin-inline-start: auto;
}
.header-nav.is-active #block-x10-frontend-main-menu {
    margin-inline-start: unset;
}

#block-x10-frontend-main-menu .primary-nav__menu--level-1 {
    display: flex;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}


@media (min-width: 75rem) {
    body:not(.is-always-mobile-nav) .site-header__fixable.is-fixed {
        inset-block-start: unset;
        max-width: 100%;
    }
}


/* main */

.main-content__container.container {
    margin: auto;
    padding-block-start: 3rem !important;
}

@media (min-width: 75rem) {
    .site-branding {
        min-height: 0;
    }
}





.path-admin-structure-webform-manage-re-publica__volunteers-submission- .region.region--highlighted.grid-full.layout--pass--content-medium, 
.path-admin-structure-webform-manage-re-publica__volunteers-submission- #block-x10-frontend-breadcrumbs,
.path-admin-structure-webform-manage-re-publica__volunteers-submission- div#block-x10-frontend-help,
.path-admin-structure-webform-manage-re-publica__volunteers-submission- .webform-submission-information,
.path-admin-structure-webform-manage-re-publica__volunteers-submission--edit .region.region--highlighted.grid-full.layout--pass--content-medium, 
.path-admin-structure-webform-manage-re-publica__volunteers-submission--edit #block-x10-frontend-breadcrumbs,
.path-admin-structure-webform-manage-re-publica__volunteers-submission--edit div#block-x10-frontend-help,
.path-admin-structure-webform-manage-re-publica__volunteers-submission--edit .webform-submission-information,
.path-admin-structure-webform-manage-re-publica__volunteers-submission--edit-all .region.region--highlighted.grid-full.layout--pass--content-medium, 
.path-admin-structure-webform-manage-re-publica__volunteers-submission--edit-all #block-x10-frontend-breadcrumbs,
.path-admin-structure-webform-manage-re-publica__volunteers-submission--edit-all div#block-x10-frontend-help,
.path-admin-structure-webform-manage-re-publica__volunteers-submission--edit-all .webform-submission-information {
    display: none;
}

.breadcrumb, .region--breadcrumb  {
    display:none;
}

.path-admin-structure-webform-manage-re-publica__volunteers-submission- h1.title.page-title,
.path-admin-structure-webform-manage-re-publica__volunteers-submission--edit h1.title.page-title,
.path-admin-structure-webform-manage-re-publica__volunteers-submission--edit-all h1.title.page-title {
    font-size: 1.5rem;
}

h2.block__title {
    font-size: 1.5rem;
    padding: 1rem;
    background-color: #000000;
    color: #ffffff;
    text-align: center;
}

/* footer */

.site-footer__inner.container {
    margin: auto;
}

.site-footer .text-content * {
    color: #ffffff;
}
.site-footer {
    background:none;
    background-color: #000000;
} 


.footer_imprint {
    font-size: .9rem;
}

@media (min-width: 75rem) {
    .site-footer__inner {
        padding-block: var(--sp2);
    }
    
    body:not(.is-always-mobile-nav) .site-footer {
        border-inline-start: 0;
    }
}

/* Footer: Olivero-Grid überschreiben, Breite an Content anpassen */
.site-footer .grid-full {
    display: block !important;
    max-width: 100%;
    padding-inline: 0;
    margin: 0;
}

/* Footer-Top: Logo + Adressen */
.region--footer_top__inner {
    display: flex;
    gap: 3rem;
    align-items: flex-start;
    padding-block: 2.5rem;
}

#block-x10-frontend-logofooter {
    flex: 0 0 auto;
}

#block-x10-frontend-location {
    margin-inline-start: auto;
}

#block-x10-frontend-location,
#block-x10-frontend-businessadress {
    flex: 0 0 auto;
}

.site-footer .text-content h3 {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-block-start: 0;
    margin-block-end: 0.5rem;
    color: rgba(255, 255, 255, 0.6);
}

.site-footer .text-content p {
    font-size: 0.9rem;
    line-height: 1.6;
    margin: 0;
}

@media (min-width: 62.5rem) {
    .region > *:where(:not([data-big-pipe-placeholder-id])) {
        margin-block-end: 0;
    }
}

/* Footer-Bottom: Menü + Social Icons */
.region--footer-bottom.grid-full {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding-block: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    max-width: 100%;
}

/* Footer-Menü (links) */
#block-x10-frontend-fusszeile .menu--level-1 {
    display: flex;
    gap: 1.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

#block-x10-frontend-fusszeile .menu__link {
    color: #fff;
    text-decoration: none;
    font-size: 0.9rem;
}

#block-x10-frontend-fusszeile .menu__link:hover {
    text-decoration: underline;
}

/* Social Media Menü (rechts) */
[id*="socialmedia"] .menu--level-1,
[id*="social-media"] .menu--level-1,
[class*="social"] .menu--level-1 {
    display: flex;
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
    align-items: center;
    justify-content: flex-end;
}

[id*="socialmedia"] .menu__link,
[id*="social-media"] .menu__link,
[class*="social"] .menu__link {
    display: block;
    width: 1.1rem;
    height: 1.1rem;
    overflow: hidden;
    text-indent: -9999px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

[id*="socialmedia"] .menu__link:hover,
[id*="social-media"] .menu__link:hover,
[class*="social"] .menu__link:hover {
    text-decoration: none;
}

.site-footer a[href*="youtube"]    { background-image: url("../images/social/youtube.svg"); }
.site-footer a[href*="instagram"]  { background-image: url("../images/social/instagram.svg"); }
.site-footer a[href*="bsky"]       { background-image: url("../images/social/bluesky.svg"); }
.site-footer a[href*="mastodon"],
.site-footer a[href*=".social"]    { background-image: url("../images/social/mastodon.svg"); }
.site-footer a[href*="linkedin"]   { background-image: url("../images/social/linkedin.svg"); }
.site-footer a[href*="flickr"]     { background-image: url("../images/social/flickr.svg"); }
.site-footer a[href*="threads"]    { background-image: url("../images/social/threads.svg"); }
.site-footer a[href*="facebook"]   { background-image: url("../images/social/facebook.svg"); }

@media (max-width: 43.75rem) {
    .region--footer_top__inner {
        flex-direction: column;
        gap: 1.5rem;
    }

    .region--footer-bottom.grid-full {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    #block-x10-frontend-fusszeile .menu--level-1,
    #block-x10-frontend-socialmedia .menu--level-1 {
        flex-wrap: wrap;
        gap: 0.75rem 1.5rem;
    }
}



/* ===== Mobile Navigation ===== */

/* Hamburger label always white */
.site-header span.mobile-nav-button__label {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.9rem !important;
}

/* Hide branding by default (shown in mobile via order trick) */
div#block-x10-frontend-brandingderwebsite {
    display: none;
}

/* Hamburger icon lines always white */
.site-header .mobile-nav-button__icon {
    border-top-color: #ffffff !important;
}

.site-header .mobile-nav-button__icon::before,
.site-header .mobile-nav-button__icon::after {
    border-top-color: #ffffff !important;
}

/* X icon when expanded - also white */
.site-header .mobile-nav-button[aria-expanded="true"] .mobile-nav-button__icon {
    border-top-color: transparent !important;
}

.site-header .mobile-nav-button[aria-expanded="true"] .mobile-nav-button__icon::before,
.site-header .mobile-nav-button[aria-expanded="true"] .mobile-nav-button__icon::after {
    border-top-color: #ffffff !important;
}

.site-header .mobile-nav-button[aria-expanded="true"] .mobile-nav-button__label {
    color: #ffffff !important;
}

@media (max-width: 74.99rem) {

    /* --- Mobile Header Bar --- */
    .container.site-header__inner__container {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
    }

    /* Hide utility bar on mobile */
    #block-x10-frontend-backlink {
        display: none !important;
    }

    #block-x10-frontend-account-menu {
        order: -1;
    }

    #block-x10-frontend-sprachumschalter {
        order: 0;
    }

    div#block-x10-frontend-brandingderwebsite {
        display: flex !important;
        justify-content: center !important;
        flex: 1 !important;
        position: relative;
        z-index: 502;
    }

    .mobile-buttons {
        margin-block-start: 0 !important;
        margin-inline-start: auto !important;
    }

    /* --- Hamburger Icon --- */
    .site-header .mobile-nav-button {
        display: flex !important;
        align-items: center !important;
        gap: 0.4rem !important;
        background: none !important;
        border: none !important;
        padding: 0.5rem !important;
        cursor: pointer !important;
    }

    /* --- Full-screen overlay when menu is open --- */
    .header-nav-overlay {
        background: #000000 !important;
        opacity: 0 !important;
        transition: opacity 0.4s ease-in-out !important;
        width: 100% !important;
        height: 100vh !important;
    }

    .is-overlay-active .header-nav-overlay {
        display: block !important;
        opacity: 1 !important;
    }

    /* --- Slide-out Menu Panel --- */
    /* Override Olivero's white panel completely */
    html.js .header-nav,
    .header-nav {
        background-color: #000000 !important;
        background: #000000 !important;
        border-block-start-color: #000000 !important;
        box-shadow: none !important;
        max-width: 100% !important;
        width: 100% !important;
        padding-block-start: 0 !important;
        padding-block-end: var(--sp2) !important;
        padding-inline-start: var(--sp2) !important;
        padding-inline-end: var(--sp2) !important;
        transition: visibility 0.3s, transform 0.3s ease-in-out !important;
    }

    div#header-nav {
        background-color: #000000 !important;
        background: #000000 !important;
        flex-direction: column !important;
        min-width: unset !important;
    }

.header-nav.is-active #block-x10-frontend-site-branding img {
    min-width: 200px;
    margin-bottom:2rem;
}
.header-nav.is-active #block-x10-frontend-site-branding{
    margin: 2rem 0 2rem 0;
}

.header-nav.is-active .primary-nav__menu-link--level-1 {
    justify-content: center;
}
    /* Hide dateblock inside mobile menu */
    .header-nav #block-x10-frontend-dateblock {
        display: none !important;
    }

    /* --- Menu Links --- */
    body:not(.is-always-mobile-nav) .primary-nav {
        margin-inline-start: unset !important;
        padding-inline-start: unset !important;
    }

    .primary-nav__menu--level-1 {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .primary-nav__menu-item {
        margin-block-end: 0 !important;
    }

    .primary-nav__menu-item--level-1 {
        border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
        width: 100% !important;
        max-width: none !important;
    }

    .primary-nav__menu-item--level-1:last-child {
        border-bottom: none !important;
    }

    /* Level-1 links: large, white, KarlST_Bold */
    .primary-nav__menu-link,
    .primary-nav__menu-link--level-1 {
        color: #ffffff !important;
        font-size: 1.5rem !important;
        font-weight: 700 !important;
        font-family: 'KarlST_Bold', sans-serif !important;
        line-height: 1.3 !important;
        text-decoration: none !important;
        letter-spacing: 0 !important;
    }

    .primary-nav__menu-link:hover,
    .primary-nav__menu-link--level-1:hover {
        color: rgba(255, 255, 255, 0.7) !important;
    }

    .primary-nav__menu-link:focus {
        outline-color: #ffffff !important;
    }

    .primary-nav__menu-link-inner,
    .primary-nav__menu-link-inner--level-1 {
        padding-block: 1rem !important;
        padding-inline: 0 !important;
    }

    /* Hide underline hover effect */
    .primary-nav__menu-link-inner::after {
        display: none !important;
    }

    /* Level-2 submenu links */
    .primary-nav__menu--level-2 {
        border-inline-start-color: rgba(255, 255, 255, 0.3) !important;
    }

    .primary-nav__menu-link--level-2 {
        color: rgba(255, 255, 255, 0.8) !important;
        font-size: 1.1rem !important;
        font-family: 'KarlST_Bold', sans-serif !important;
    }

    .primary-nav__menu-link--level-2:hover {
        color: #ffffff !important;
    }

    /* Submenu expand button: plus/minus icon white */
    .primary-nav__menu-link--button.primary-nav__menu-link--has-children::before,
    .primary-nav__menu-link--button.primary-nav__menu-link--has-children::after {
        border-top-color: #ffffff !important;
    }

    /* --- Close Button --- */
    .site-header .mobile-nav-button[aria-expanded="true"] .mobile-nav-button__icon {
        border-top-color: transparent !important;
    }

    .site-header .mobile-nav-button[aria-expanded="true"] .mobile-nav-button__icon::before,
    .site-header .mobile-nav-button[aria-expanded="true"] .mobile-nav-button__icon::after {
        border-top-color: #ffffff !important;
    }

    .site-header .mobile-nav-button[aria-expanded="true"] .mobile-nav-button__label {
        color: #ffffff !important;
    }
}

@media (max-width: 43.75rem) {
    .align-left {
        margin-block-start: 0;
        margin-block-end: var(--sp1);
        width: 100%;
    }
    div#login-block {
        grid-template-columns: repeat(1, 1fr);
    }


}

.views-table {
	width: 100%;
}

.views-table th {
	background: #000;
	color: #FFF;
	font-family: var(--font-heading);
	padding: 1rem !important;
	border: 1px solid #FFF !important;
	font-size: 1.25rem;
}

.views-table td {
	border: 1px solid #000 !important;
	padding: 1rem !important;
	vertical-align: initial !important;
}

.views-table td a {
	color: #000;
}

.views-table td a:hover {
	color: var(--accent-color) !important;
}

.views-table .views-field-field-public-status {
	font-weight: bold;
}

.views-table .views-field-edit-node a {
	padding: 0.5rem 1rem;
	border: 3px solid #000;
	box-shadow: 0 0 0;
	display: inline-block;
	line-height: 1;
	color: #000 !important;
	border-radius: .5rem;
	font-size: 1.25rem;
	font-weight: 600;
	position: relative;
	text-decoration: none !important;
	font-family: var(--font-heading);
	box-shadow: none !important;
}

.views-table .views-field-edit-node a:hover {
	background: #000;
	color: #FFF !important;
}

.views-table .question {
	color: #F90;
}

.views-table .accepted {
	color: #090;
}

.messages {
    min-height: 4.25rem;
		outline: solid 5px var(--color-keyvisual-bg);
    background-color: #0d1214;
    font-size: 1.5rem;
    line-height: 2.3rem;
}

.messages__icon, button.messages__close {
    margin-top: 0.9rem;
}

body.path-frontpage .views-table th {
    color:#ffffff;
}

@media (max-width: 1024px) {
	.views-table th {
		display: none;
	}

	.views-table tr {
		display: block;
		margin-bottom: calc(var(--hMargin-title) / 2);
	}

	.views-table td {
		display: block;
		padding-left: 50% !important;
		position: relative;
		background: linear-gradient(to right, #000, #000 45%, #FFF 45%);
		border-color: #666 !important;
	}

	.views-table td:not(.views-field-title) {
		border-top: none !important;
	}

	.views-table td:before {
		position: absolute;
		top: 50%;
		left: 0;
		padding: 1rem;
		width: 45%;
		height: 100%;
		transform: translate3D(0, -50%, 0);
		content: "";
		font-weight: bold;
		color: #FFF;
	}

	html .views-table td.views-field-serial:before {
		content: "ID  ";
	}
	html .views-table td.views-field-name:before {
		content: "Name	";
	}
	html .views-table td.views-field-webform-submission-value:before {
		content: "Status	";
	}
	html .views-table td.views-field-webform-submission-value-1:before {
		content: "Shirt";
	}

	html[lang="de"] .views-table td.views-field-view-webform-submission:before {
		content: "Ansehen";
	}
    html[lang="en"] .views-table td.views-field-view-webform-submission:before {
		content: "View";
	}

    html[lang="de"] .views-table td.views-field-edit-webform-submission:before {
		content: "Bearbeiten";
	}
    html[lang="en"] .views-table td.views-field-edit-webform-submission:before {
		content: "edit";
	}

    html[lang="de"] .views-table td.views-field-field-vorname:before {
		content: "Vorname";
	}
    html[lang="en"] .views-table td.views-field-field-vorname:before {
		content: "First name";
	}

    html[lang="de"] .views-table td.views-field-field-nachname:before {
		content: "Nachname";
	}
    html[lang="en"] .views-table td.views-field-field-nachname:before {
		content: "Last name";
	}

    html[lang="de"] .views-table td.views-field-field-geburtsdatum:before {
		content: "Geburtsdatum";
	}
    html[lang="en"] .views-table td.views-field-field-geburtsdatum:before {
		content: "Date of Birth";
	}

    html[lang="de"] .views-table td.views-field-field-telefon:before {
		content: "Telefon";
	}
    html[lang="en"] .views-table td.views-field-field-telefon:before {
		content: "Phone";
	}

    html[lang="de"] .views-table td.views-field-edit-user:before {
		content: "Bearbeiten";
	}
    html[lang="en"] .views-table td.views-field-edit-user:before {
		content: "edit";
	}

}



div#block-x10-frontend-sprachumschalter a {
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.8rem;
    padding: 0.2rem 0.4rem;
}

#block-x10-frontend-sprachumschalter ul.links {
    list-style: none;
    display: flex;
    gap: 0.25rem;
    margin: 0;
    padding: 0;
}

#block-x10-frontend-sprachumschalter .links .is-active {
    display: none;
}

.social-bar, .site-header__initial {
    display:none;
}
.site-branding__text {
    display: none;
}

.path-frontpage div#block-x10-frontend-page-title {
    display: none;
}

/* Prevent header from collapsing on scroll */
.site-header {
  position: sticky !important;
  top: 0 !important;
  min-height: 45px !important;
  padding-block: 0 !important;
}

.site-header.is-hidden {
  transform: none !important;
}

.site-header__fixable {
  position: static !important;
}

/* Article Teaser Card Styles */
.article-teaser-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.article-teaser-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.article-teaser-card__image {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #f5f5f5;
}

.article-teaser-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.article-teaser-card__content {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.article-teaser-card__title {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0 0 1rem 0;
  font-family: 'KarlST_Bold', sans-serif;
}

.article-teaser-card__title a {
  color: #000;
  text-decoration: none;
  transition: color 0.2s ease;
}

.article-teaser-card__title a:hover {
  color: #e84119;
}

.article-teaser-card__body {
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
}

.article-teaser-card__body p {
  margin: 0;
}

@media (max-width: 768px) {
  .article-teaser-card__title {
    font-size: 1.25rem;
  }
  
  .article-teaser-card__content {
    padding: 1rem;
  }
}

.main-content {
    margin-inline-end: 0 !important;
    width: 100% !important;
}

.page-wrapper {
        margin-block-start: 0!important;
}

article .field--name-field-image {
    margin: auto;
}

@media (min-width: 62.5rem) {
    .layout--content-narrow .layout--content-narrow, .layout--pass--content-narrow > * .layout--content-narrow, .layout--content-medium .layout--content-narrow, .layout--pass--content-medium > * .layout--content-narrow, .layout--content-narrow .layout--pass--content-narrow > *, .layout--pass--content-narrow > * .layout--pass--content-narrow > *, .layout--content-medium .layout--pass--content-narrow > *, .layout--pass--content-medium > * .layout--pass--content-narrow > * {
        grid-column: 1 / 12;
    }
}

/* Layout-Wrapper: horizontalen Overflow verhindern */
.layout-main-wrapper {
    overflow-x: clip;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Hero-Bereich */
.region--hero {
    display: flex;
    flex-direction: column;
    gap: 0;
    background-color: #ffff1b;
    overflow: hidden;
    margin-top:-1px;
}

.region--hero > * {
    margin-block-end: 0 !important;
}

#block-x10-frontend-keyvisualblock {
    line-height: 0;
    font-size: 0;
}

#block-x10-frontend-keyvisualblock .block__content,
#block-x10-frontend-keyvisualblock .field--name-body,
#block-x10-frontend-keyvisualblock .field__item {
    line-height: 0;
    font-size: 0;
}

#block-x10-frontend-keyvisualblock div[style] {
    margin: 0;
    padding: 0;
}

/* Primäre Tabs als Pill-Buttons */
.tabs--primary {
    display: flex;
    gap: 0.75rem;
    padding: 0;
    margin: 0;
    list-style: none;
    border-bottom: none;
}

.tabs--primary .tabs__link {
    display: inline-block;
    border: 2px solid #000;
    border-radius: 2rem;
    padding: 0.5rem 1.5rem;
    color: #000;
    background: transparent;
    text-decoration: none;
    font-family: var(--font-sans);
    font-weight: bold;
    font-size: 0.95rem;
    transition: background-color 0.2s, color 0.2s;
}

.tabs--primary .tabs__link.is-active {
    background-color: #000;
    color: #fff;
    border-color: #000;
}

.tabs--primary .tabs__link:hover {
    background-color: #000;
    color: #fff;
}

@media (min-width: 90rem) {
    .region--hero {
        flex-direction: row;
        align-items: center;
    }

    #block-x10-frontend-keyvisualblock {
        flex: 3;
        min-width: 0;
    }

    #block-x10-frontend-mottoblock {
        flex: 2;
        min-width: 0;
    }
}

#block-x10-frontend-keyvisualblock video,
#block-x10-frontend-keyvisualblock img {
    width: 100%;
    height: auto;
    display: block;
}

#block-x10-frontend-mottoblock .block__content {
    padding: 1rem 0;
}

@media (min-width: 75rem) {
    #block-x10-frontend-mottoblock .block__content {
        padding: 1rem 2rem;
    }
}

#block-x10-frontend-mottoblock h2 {
    margin:0;
}

/* Mottoblock Buttons */
.button-big-round, #block-x10-frontend-mottoblock .field--name-body a {
    display: inline-block;
    border: 2px solid #000;
    border-radius: 2rem;
    padding: 0.6rem 2rem;
    color: #000;
    text-decoration: none;
    font-family: var(--font-sans);
    font-weight: bold;
    font-size: 1.35rem;
    background-color: #ffffff;
    transition: background-color 0.2s, color 0.2s;
    margin-top: 0;
}

#block-x10-frontend-mottoblock .field--name-body a:hover {
    background-color: #000;
    color: #fff;
    box-shadow: none;
    text-decoration: none;
}

/* Kachel-Block: aus Olivero-Container ausbrechen */
/* Kachel-Block: aus Olivero-Container ausbrechen */
.block--custom-bg {
    background-color: var(--block-bg, transparent);
    padding: 3rem 2rem;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    grid-column: 1 / -1;
    box-sizing: border-box;
}

.block--custom-bg > .block__title {
    color: var(--block-title-color, var(--block-text, inherit));
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    max-width: var(--max-width);
    margin-inline: auto;
    background: transparent;
    padding: 0;
}

.path-frontpage div#block-x10-frontend-content {
    display: none;
}

/* Kachel-Grid Layout */
.field--name-field-kachel.field__items {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: var(--max-width);
    margin-inline: auto;
}

@media (min-width: 43.75rem) {
    .field--name-field-kachel.field__items {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 62.5rem) {
    .block--kachel-grid .field--name-field-kachel.field__items {
        grid-template-columns: repeat(var(--kachel-cols, 3), 1fr);
    }
}
.block--kachel-grid {
    margin-block-end: 3rem;
}
/* Kachel-Karten */
.field--name-field-kachel .field__item {
    width: 100%;
}

.field--name-field-kachel .node--view-mode-highlight-box {
    background-color: #fff;
    border-radius: 1.25rem;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.field--name-field-kachel .node--view-mode-highlight-box .node__content {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 1.5rem;
}

/* Bild: oben, volle Breite */
.field--name-field-kachel .node--view-mode-highlight-box .field--name-field-image {
    margin: -1.5rem -1.5rem 1rem -1.5rem;
    width: calc(100% + 3rem);
    order: -1;
    overflow: hidden;
}

.field--name-field-kachel .node--view-mode-highlight-box .field--name-field-image .field__label {
    display: none;
}

.field--name-field-kachel .node--view-mode-highlight-box .field--name-field-image a {
    display: block;
    line-height: 0;
}

.field--name-field-kachel .node--view-mode-highlight-box .field--name-field-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

/* Titel einblenden */
.field--name-field-kachel .node--view-mode-highlight-box .node__title {
    font-size: 1.75rem;
    font-weight: 700;
    font-family: 'KarlST_Bold', sans-serif;
    margin: 0 0 0.15rem 0;
    text-align: center;
}

.field--name-field-kachel .node--view-mode-highlight-box .node__title a {
    color: #000;
    text-decoration: none;
}

.field--name-field-kachel .node--view-mode-highlight-box .node__title a:hover {
    text-decoration: underline;
}

/* Body-Text */
.field--name-field-kachel .node--view-mode-highlight-box .field--name-body {
    padding-top: 0;
}

.field--name-field-kachel .field__item {
    width: 100%;
}

/* News-Block */
#block-x10-frontend-views-block-news-block-1 {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    grid-column: 1 / -1;
    box-sizing: border-box;
    padding: 0rem 2rem;
}

#block-x10-frontend-views-block-news-block-1 > .block__title {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 3rem;
    max-width: var(--max-width);
    margin-inline: auto;
    color: #000;
    background: transparent;
    padding: 0;
}

#block-x10-frontend-views-block-news-block-1 .block__content {
    max-width: var(--max-width);
    margin-inline: auto;
}

/* News Grid: gleiche Höhe, 3 Spalten */
.views-view-responsive-grid {
    align-items: stretch;
    gap: 1.5rem !important;
    column-gap: 1.5rem !important;
    row-gap: 1.5rem !important;
}

@media (min-width: 62.5rem) {
    .views-view-responsive-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

.views-view-responsive-grid__item {
    display: flex;
}

.views-view-responsive-grid__item-inner {
    display: flex;
    flex: 1;
}

/* News-Karten */
.article-teaser-card {
    background-color: #fff;
    border-radius: 1.25rem;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.article-teaser-card__image {
    order: -1;
}

.article-teaser-card__image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0;
}

.article-teaser-card__content {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.article-teaser-card__title {
    font-size: 1.75rem;
    font-weight: 700;
    font-family: 'KarlST_Bold', sans-serif;
    margin-bottom: 0.75rem;
}

/* ===== FAQ Page ===== */

/* Page title */
.view-faq-list {
    max-width: 50rem;
    margin-inline: auto;
}

/* Search form */
.view-faq-list .views-exposed-form {
    display: flex !important;
    gap: 0.75rem !important;
    align-items: flex-end !important;
    margin-bottom: 2.5rem !important;
}

.view-faq-list .views-exposed-form .form-item {
    flex: 1 !important;
    margin: 0 !important;
}

.view-faq-list .views-exposed-form .form-item__label {
    display: none !important;
}

.view-faq-list .views-exposed-form .form-item__description {
    display: none !important;
}

.view-faq-list .views-exposed-form .form-text,
.view-faq-list .view-filters input[type="text"],
.view-faq-list .view-filters input[type="search"] {
    width: 100% !important;
    padding: 0.65rem 1rem !important;
    border: 2px solid #000 !important;
    border-radius: 20px !important;
    font-size: 1rem !important;
    background-color: #fff !important;
    transition: border-color 0.2s ease !important;
    height: auto !important;
}

.view-faq-list .views-exposed-form .form-text:focus,
.view-faq-list .view-filters input[type="text"]:focus,
.view-faq-list .view-filters input[type="search"]:focus {
    border-color: #555 !important;
    outline: none !important;
}

.view-faq-list .views-exposed-form .form-submit,
.view-faq-list .view-filters input[type="submit"] {
    padding: 0.65rem 1.5rem !important;
    border-radius: 20px !important;
    background-color: #000 !important;
    color: #fff !important;
    border: 2px solid #000 !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
    white-space: nowrap !important;
}

.view-faq-list .views-exposed-form .form-submit:hover,
.view-faq-list .view-filters input[type="submit"]:hover {
    background-color: #fff !important;
    color: #000 !important;
}

.view-faq-list .view-filters {
    margin-bottom:0;
}

/* Category headings */
.view-faq-list .view-content > h3 {
    font-family: 'KarlST_Bold', sans-serif !important;
    font-size: 1.5rem !important;
    font-weight: 900 !important;
    margin-top: 2rem !important;
    margin-bottom: 1rem !important;
    padding-bottom: 0.5rem !important;
    border-bottom: 2px solid #000 !important;
    background-image: none !important;
}

/* FAQ items */
.view-faq-list .view-content .faq-item {
    background: #fff !important;
    border-radius: 1rem !important;
    margin-bottom: 0.75rem !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
    transition: box-shadow 0.2s ease !important;
}

.view-faq-list .view-content .faq-item:hover {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1) !important;
}

/* Question (accordion trigger) */
.view-faq-list .view-content .faq-question,
.view-faq-list .view-content h3.faq-question {
    font-family: 'KarlST_Bold', sans-serif !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    padding: 1rem 3rem 1rem 4rem !important;
    cursor: pointer !important;
    position: relative !important;
    line-height: 1.4 !important;
    transition: background-color 0.2s ease !important;
    background: #fff !important;
    border: none !important;
    border-bottom: none !important;
}

.view-faq-list .view-content .faq-question a.heading-permalink {
    display: none !important;
}

.view-faq-list .view-content .faq-question:hover,
.view-faq-list .view-content h3.faq-question:hover {
    background-color: #f5f5f5 !important;
}

/* Plus/Minus icon */
.view-faq-list .view-content .faq-question::after,
.view-faq-list .view-content h3.faq-question::after {
    content: '+' !important;
    position: absolute !important;
    right: 1.25rem !important;
    top: 20% !important;
    transform: translateY(-50%) !important;
    font-size: 1.5rem !important;
    font-weight: 400 !important;
    font-family: sans-serif !important;
    color: #666 !important;
    z-index: 1 !important;
}

.view-faq-list .view-content .faq-question[aria-expanded="true"]::after,
.view-faq-list .view-content h3.faq-question[aria-expanded="true"]::after {
    content: '−' !important;
}

.view-faq-list {
    gap:0;
}

.view-faq-list .view-content {
    gap: 10px;
}


/* Answer */
.view-faq-list .view-content .faq-answer {
    padding: 0 1.25rem 1.25rem !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    color: #333 !important;
}

.view-faq-list .view-content .faq-answer p {
    margin-top: 0 !important;
    margin-bottom: 0.75rem !important;
}

.view-faq-list .view-content .faq-answer p:last-child {
    margin-bottom: 0 !important;
}

.view-faq-list .view-content .faq-answer a {
    color: #000 !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}

.view-faq-list .view-content .faq-answer a:hover {
    text-decoration: none !important;
}

/* Contact box */
.view-faq-list .view-footer .faq-contact-box {
    background: #000 !important;
    color: #fff !important;
    border-radius: 1.25rem !important;
    padding: 2rem 2.5rem !important;
    margin-top: 2.5rem !important;
    text-align: center !important;
}

.view-faq-list .view-footer .faq-contact-box h3 {
    font-family: 'KarlST_Bold', sans-serif !important;
    font-size: 1.5rem !important;
    margin-top: 0 !important;
    margin-bottom: 0.5rem !important;
    color: #fff !important;
    background-image: none !important;
    border: none !important;
}

.view-faq-list .view-footer .faq-contact-box p {
    margin-bottom: 1.25rem !important;
    font-size: 1rem !important;
    opacity: 0.9 !important;
}

.view-faq-list .view-footer .faq-contact-button {
    display: inline-block !important;
    padding: 0.6rem 2rem !important;
    background: #fff !important;
    color: #000 !important;
    text-decoration: none !important;
    border-radius: 20px !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    transition: background-color 0.2s ease, transform 0.2s ease !important;
}

.view-faq-list .view-footer .faq-contact-button:hover {
    background: #e6e6e6 !important;
    transform: translateY(-1px) !important;
}

/* FAQ mobile */
@media (max-width: 43.75rem) {
    .view-faq-list .views-exposed-form {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .view-faq-list .view-content .faq-question,
    .view-faq-list .view-content h3.faq-question {
        font-size: 1rem !important;
        padding: 0.85rem 2.5rem 0.85rem 3rem !important;
    }

    .view-faq-list .view-footer .faq-contact-box {
        padding: 1.5rem !important;
    }
}


/* ============================================================
   MOBILE / RESPONSIVE – Restliche Seite
   ============================================================ */

/* --- Small screens (up to 43.75rem / 700px) --- */
@media (max-width: 43.75rem) {

    /* General: reduce body text leading */
    p {
        line-height: 1.6rem;
        margin-block-start: 0.8rem !important;
        margin-block-end: 0.8rem !important;
    }

    /* Page title */
    h1.title.page-title {
        font-size: 1.5rem;
        line-height: 1.3;
        text-align: center;
    }

    /* Main content: less top padding */
    .main-content__container.container {
        padding-block-start: 1.5rem !important;
        padding-inline: 1rem;
    }

    /* Hero: stack vertically, full width */
    .region--hero {
        flex-direction: column;
    }

    #block-x10-frontend-keyvisualblock {
        width: 100%;
    }

    #block-x10-frontend-keyvisualblock img {
        width: 100%;
        height: auto;
    }

    /* Mottoblock: comfortable padding, smaller text */
    #block-x10-frontend-mottoblock .block__content {
        padding: 1.5rem 1.25rem;
    }

    #block-x10-frontend-mottoblock h2 {
        font-size: 1.5rem;
        line-height: 1.3;
    }

    #block-x10-frontend-mottoblock p {
        font-size: 0.95rem;
        line-height: 1.6;
    }

    #block-x10-frontend-mottoblock .field--name-body a {
        font-size: 0.9rem;
        padding: 0.35rem 1.2rem;
    }

    /* Breakout blocks: reduce padding on mobile */
    .block--custom-bg {
        padding: 2rem 1rem;
    }

    /* Block titles: smaller on mobile */
    .block--custom-bg > .block__title {
        font-size: 1.75rem;
        margin-bottom: 1.5rem;
    }

    #block-x10-frontend-views-block-news-block-1 > .block__title {
        font-size: 1.75rem;
        margin-bottom: 1.5rem;
    }

    #block-x10-frontend-views-block-news-block-1 {
        padding: 0 1rem;
    }

    /* Kachel grid: 1 column on small screens */
    .field--name-field-kachel.field__items {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }

    /* Kachel card: smaller title, tighter padding */
    .field--name-field-kachel .node--view-mode-highlight-box .node__content {
        padding: 1rem;
    }

    .field--name-field-kachel .node--view-mode-highlight-box .field--name-field-image {
        margin: -1rem -1rem 0.75rem -1rem;
        width: calc(100% + 2rem);
    }

    .field--name-field-kachel .node--view-mode-highlight-box .node__title {
        font-size: 1.35rem;
    }

    .field--name-field-kachel .node--view-mode-highlight-box .field--name-body {
        font-size: 0.9rem;
    }

    /* News grid: 1 column on small screens */
    .views-view-responsive-grid {
        grid-template-columns: 1fr !important;
        --views-responsive-grid--column-count: 1 !important;
    }

    /* News card adjustments */
    .article-teaser-card__content {
        padding: 1rem;
    }

    .article-teaser-card__title {
        font-size: 1.25rem;
        margin-bottom: 0.5rem;
    }

    .article-teaser-card__body {
        font-size: 0.9rem;
    }

    /* Footer: Location loses auto-margin */
    #block-x10-frontend-location {
        margin-inline-start: 0;
    }

    /* Footer: social icons slightly smaller gap */
    [id*="socialmedia"] .menu--level-1 {
        justify-content: flex-start;
    }
}

/* --- Medium screens (up to 62.5rem / 1000px) --- */
@media (max-width: 62.5rem) {

    /* Hero: still column layout */
    .region--hero {
        flex-direction: column;
    }

    /* Mottoblock padding */
    #block-x10-frontend-mottoblock .block__content {
        padding: 1.5rem 1.5rem;
    }

    /* Block titles: slightly reduced */
    .block--custom-bg > .block__title {
        font-size: 2rem;
        margin-bottom: 2rem;
    }

    #block-x10-frontend-views-block-news-block-1 > .block__title {
        font-size: 2rem;
        margin-bottom: 2rem;
    }

    /* Footer top: wrap addresses below logo */
    .region--footer_top__inner {
        flex-wrap: wrap;
        gap: 1.5rem;
    }

    #block-x10-frontend-location {
        margin-inline-start: 0;
    }
}