/* ==================================================
   Schreibweisen
   ================================================== */
   
/* --- Ligaturen --- */
body { font-variant-ligatures: none; }


/* ==================================================
   Boxen
   ================================================== */

/* --- Blaue Box geteilt --- */
.justblue-box-top {
    background-color: #187EAE;
    padding: 1.5rem;
    border-radius: var(--base-radius) var(--base-radius) 0 0;
}

.justblue-box-bottom {
    background-color: #187EAE;
    padding: 1.5rem;
    border-radius: 0 0 var(--base-radius) var(--base-radius);
}

.justblue-box-top *:not(.w-btn *),
.justblue-box-bottom *:not(.w-btn *) {
  color: #ffffff;
}


/* --- Boxen mit Sprechblasen-Icon --- */
.hinweis-box {
    position: relative;
    background-color: #ffffff;
    border: 2px solid #D5D900;
    border-radius: var(--base-radius);
    padding: 2rem 1.5rem 1.5rem;
}

.hinweis-box-justblue {
    position: relative;
    background-color: #ffffff;
    border: 2px solid #187EAE;
    border-radius: var(--base-radius);
    padding: 2rem 1.5rem 1.5rem;
}

.hinweis-icon {
    position: absolute;
    top: -2rem;
    left: -1rem;
    z-index: 2;
}

/* ==================================================
   Title Headline
   ================================================== */

/* --- Header Headline --- */

.hero-title {
    text-transform: uppercase;
}

.hero-indent {
    display: inline-block;
    margin-left: 6rem;
}

/* ==================================================
   Sticky Menue
   ================================================== */

/* --- Sticky Menue Hilfe --- */
.seitenmenue-sticky {
    position: sticky;
    top: 100px;
    z-index: 2;
}

/* Versatz Stick-Menue */
.anker-offset {
    display: block;
    height: 0;
    position: relative;
    top: -80px;
    visibility: hidden;
}

/* Zeilenabstand Stick-Menue */
.hilfe-menue > ul.menu {
    row-gap: 0.75rem !important;
}

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

.frage-blase,
.antwort-blase {
    position: relative;
    background-color: #ffffff;
    border-radius: var(--base-radius);
    padding: 1.5rem;
    overflow: visible;
}

.frage-blase {
    border: 2px solid #187EAE;
}

.antwort-blase {
    border: 2px solid #D5D900;
}

/* Grundform des Schnubbels */
.frage-blase::after,
.antwort-blase::after {
    content: "";
    position: absolute;
    bottom: -0.65rem;
    width: 1.2rem;
    height: 1.2rem;
    background-color: #ffffff;
    transform: rotate(45deg);
}

/* Frage: Schnubbel unten links */
.frage-blase::after {
    left: 2rem;
    border-right: 2px solid #187EAE;
    border-bottom: 2px solid #187EAE;
}

/* Antwort: Schnubbel unten rechts */
.antwort-blase::after {
    right: 2rem;
    border-right: 2px solid #D5D900;
    border-bottom: 2px solid #D5D900;
}

/* ==================================================
   Galerie
   ================================================== */

/* Galerie Eckenradius */
.galerie-rund img {
    border-radius: var(--base-radius);
}


/* ==================================================
   Dropdown-Filter
   ================================================== */
   

/* Dropdown auf die Größe des runden Buttons begrenzen */
.hilfe-filter-kompakt {
    position: absolute !important;
    width: 3.25rem !important;
    height: 3.25rem !important;
    margin: 0 !important;
    z-index: 2;
}

/* Titel "Hilfe für" visuell verstecken */
.hilfe-filter-kompakt .w-filter-item-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Filterelement ebenfalls auf Kreisgröße begrenzen */
.hilfe-filter-kompakt .w-filter-item {
    width: 3.25rem !important;
    height: 3.25rem !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Das echte Select ist unsichtbar, bleibt aber anklickbar */
.hilfe-filter-kompakt select {
    width: 3.25rem !important;
    height: 3.25rem !important;
    min-width: 3.25rem !important;

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

    opacity: 0;
    cursor: pointer;

    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;

    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

/* Auch beim Fokus darf das Select selbst keine Form zeichnen */
.hilfe-filter-kompakt select:focus,
.hilfe-filter-kompakt select:focus-visible {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

/* Impreza-Pfeil ausblenden */
.hilfe-filter-kompakt .w-filter-item-value::after,
.hilfe-filter-kompakt .w-filter-item-values::after,
.hilfe-filter-kompakt .w-form-row-field::after {
    display: none !important;
    content: none !important;
}

.hilfe-filter-kompakt:focus-within {
    outline: 2px dashed #13405C;
    outline-offset: 3px;
    border-radius: 50%;
}

.hilfe-filter-kompakt .w-filter-item {
    position: relative;
}

.hilfe-filter-kompakt .w-filter-item-reset {
    position: absolute !important;
    top: calc(100% + 0.4rem);
    left: 50%;
    transform: translateX(-50%);

    white-space: nowrap;
    font-size: 0.75rem;
    color: #13405C;

    z-index: 3;
}

.filter-button-rund {
    width: 3.3rem;
    height: 3.3rem;
    min-width: 3.3rem;
    min-height: 3.3rem;

    flex: 0 0 3.3rem;
    aspect-ratio: 1 / 1;
}