:root {
    --gruen: #1f4e26;
    --hellblau: #e5f6ff;
    --hell: #fcfcfa;
    --braun: #3F200E;
    --rot: #d30017;
    --orange: #DB6500;
	--beige: #efe9e4;

    /* Keyboard focus indicator — see section "Fokus-Indikator" at end of file */
    --lga-focus-color: var(--rot);
    --lga-focus-width: 3px;
    --lga-focus-offset: 2px;
}

joomla-alert {
	max-width: 800px;
	margin: 1em auto;
	position: fixed;
	left: 40%;
	width: 600px;
	z-index: 10;
}
@media screen and (max-width:900px) { 
	joomla-alert {
		left: 5%;
		width: auto;
		margin: 1em;
	}
}

/* font size with clamp / FONT */
h1 {
    font-size: clamp(2.5rem, 4.24vw, 3.815rem);
}
h2, .uk-h2 {
    font-size: clamp(2.3rem, 3.61vw, 3.25rem);
}
h3, .uk-h3 {
    font-size: clamp(1.625rem, 2.22vw, 2rem);
}
h4, .uk-h4 {
    font-size: clamp(1.375rem, 1.66vw, 1.5rem);
}
blockquote {
	font-size: clamp(1.125rem,1.44vw,1.6rem);
}
.hero .uk-text-large {
	font-size: clamp(1.375rem,1.44vw,1.625rem);
}
/*END*/

.uk-nav-sub {
    font-family: 'DM Sans';
    font-weight: 500;
}
.uk-nav-sub li {
    border-bottom: 1px solid var(--braun);
}
#module-menu-dialog-mobile .uk-nav .uk-active.uk-parent {
    font-weight: 700;
}
.anfrage-btn {
    background: transparent;
    margin-top: -50px;
}

/* HEROs */
.hero .hero-text {
    margin-top: 30vh;
}
.hero-h-row {
    margin-top: 40vh;
}
.hero .hero-anfrage {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 100;
}
.hero .hero-anfrage-mobil {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 100;
    width: 100%;
}
/*END*/

.lga-panel-btn .el-item.uk-card-small,
.lga-panel-btn .el-item.uk-tile-default,
.lga-nationalparks .el-item.uk-tile-default {
    position: relative;
}
.lga-panel-btn .el-item .el-link,
.card-reiseziele .uk-button-secondary,
.lga-nationalparks .uk-button {
    position: absolute;
    right: 0;
    bottom: 0;
}
.card-reiseziele .uk-tile-muted {
    position: relative;
}
.card-reiseziele .card-reiseziele-highlights {
    position: absolute;
    top: 0;
}
.uk-dotnav>* {
    margin-bottom: 10px;
}

/* RSFORM PRO */
#rsform_10_page_0.formContainer .uk-grid, /* Unterkunft anfragen */
#rsform_7_page_0.formContainer .uk-grid, /* Merkliste */
#rsform_4_page_0.formContainer .uk-grid { /* Reise anfragen */
    border: 1px solid var(--gruen);
    border-radius: 2px;
    background: var(--beige);
    padding: 25px 20px 25px 0;
    margin-left: 0;
}
/* Reise planen */
#rsform_6_page_0.formContainer .uk-grid {
    border: 1px solid var(--gruen);
    border-radius: 2px;
    background: var(--beige);
    padding: 25px 20px 25px 0;
    margin-left: 0;
}
#rsform_6_page_0 #page1Next {
    margin-right: 0;
    margin-left: auto;
}
#rsform_10_page_0 #unterkunft[readonly] {
    background-color: transparent;
    border: none;
    box-shadow: none;
    padding-left: 0;
    pointer-events: none;
    color: inherit;
    font-weight: 500;
}
.formContainer .rsform-block-vorname,
.formContainer .rsform-block-dateankunft {
    width: 49%;
    float: left;
}
.formContainer .rsform-block-nachname,
.formContainer .rsform-block-dateabreise {
    width: 49%;
    float: right;
}
.formContainer .rsform-block-email,
.formContainer .rsform-block-dateankunft,
.formContainer .rsform-block-weitereinfo {
    clear: both;
}
.rsform-radio {
    margin-left: 10px;
}
#rsform_6_page_7.formContainer .rsform-block-vorname,
#rsform_6_page_7.formContainer .rsform-block-nachname {
    width: inherit;
}
.reiseanfrage .uk-container .uk-grid {
    margin-left: -15px;
}
.reiseanfrage .rsform-calendar-button {
    display: none;
}
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_default,
.xdsoft_datetimepicker .xdsoft_calendar td.xdsoft_current,
.xdsoft_datetimepicker .xdsoft_timepicker .xdsoft_time_box >div >div.xdsoft_current {
    background: var(--braun) !important;
    box-shadow: var(--braun) 0 1px 3px 0 inset !important;
}
.formContainer.uk-form-stacked .uk-grid .uk-width-1-1 {
    padding-left: 20px;
}
.radio-top {
    display: block;
    font-size: smaller;
    text-transform: uppercase;
}
.radio-info {
    display: block;
    font-size: smaller;
}
/* END */

/* Startseite Reiseziele Slider Start */
.card-reiseziele .highlight,
.slider-reiseziele .highlight {
    color: var(--hell);
    background: var(--orange);
    padding: 6px 12px;
    font-weight: 400;
    text-decoration: none;
    margin-right: 3px;
    margin-bottom: 3px;
    display: inline-block;
}
.slider-reiseziele .uk-card a.uk-button {
    float: right;
}
.slider-reiseziele h3,
.slider-reiseziele .el-content {
    margin-left: 20px;
    margin-right: 20px;
}
/* Startseite Reiseziele Slider Ende */

.uk-link-text {
    font-weight: 700;
}
.uk-drop.uk-navbar-dropdown {
    z-index: 1000;
}

.fields-container {list-style: none; padding-left: 0;}

/* STICKY GREEN BAR */
.lga-sticky {
    background: var(--gruen);
    z-index: 800;
}
.lga-sticky .uk-subnav a {
    color: #fff;
}
.lga-sticky.uk-grid {
    margin-right: -40px;
    padding-right: 40px;
}
.lga-sticky.uk-grid {
    margin-right: -40px !important;
    margin-left: -40px !important;
}
.hero-anfrage .uk-button-primary,
.lga-sticky .uk-button-danger {
	line-height: 68px;
	padding-right: 40px;
	padding-left: 40px;
}
/*END*/
.uk-breadcrumb a {
    text-decoration: underline;
}
.lga-nationalparks .el-title,
.lga-nationalparks .el-content {
    color: var(--braun) !important;
}
.lga-nationalparks .el-content {
    margin-bottom: 3rem;
}

/* FAQ Heading h3 wie h4 */
#faq h3 {
    font-size: clamp(1.375rem, 1.66vw, 1.5rem);
}
.uk-navbar-toggle-icon, .uk-modal-close-default {
    color: var(--braun);
}
.uk-search-icon {
    color: var(--braun);
}
.lga-hero-shadow h1,
.lga-hero-shadow h2,
.lga-hero-shadow p {
    text-shadow: #000 1px 0 10px;
}
.unterkunftdetails .uk-grid > div:nth-child(3) .el-item img {
    width: 80px;
    height: 50px;
}
.unterkunftdetails .el-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* sorgt dafür, dass oben/ unten alles ausgerichtet wird */
    height: 100%;
}
.unterkunftdetails .el-content {
    margin-top: auto; /* schiebt den Untertitel ganz nach unten */
}
.wa-btn {
    background-color: var(--gruen);
    padding: 15px 0;
}
.uk-logo {
    padding: 10px 0;
}
.zusatzinfo p {
    margin: 0;
}
.rezensionen .uk-card {
    margin: 10px 20px;
    height: 90%
}
.rezensionen .uk-card .uk-flex {
    flex-direction: column;
}
.rezensionen .uk-card .uk-flex .uk-width-auto {
    width: 100%;
}
.rezensionen .uk-card p {
    color: #3f200e !important;
}
.rezensionen .uk-card .uk-link-heading {
    font-size: 1rem;
    line-height: 1.4;
    font-weight: 600;
    font-family: Merriweather;
    text-decoration: none;
}
.rezensionen .uk-card .uk-text-small {
    font-size: 0.9rem;
    font-weight: 600;
    color: #3f200e !important;
}
.rezensionen .uk-slider-container .uk-position-center-right.uk-slidenav-next {
    left: 100%;
    width: max-content;
}
.rezensionen .uk-slider-container .uk-position-center-left.uk-slidenav-previous {
    right: 100%;
    width: max-content;
}
.rezensionen .uk-text-warning {
    color: #fbbc04 !important;
    font-size: 25px;
    letter-spacing: -1px;
}
.rezensionen .uk-flex.uk-flex-column.uk-grid-small {
    margin: 0 11px;
}

/* mega-menü */
.lga-mega-grid {
	border-bottom-right-radius: 20px;
}

/* Safari Slider Start */
.safari-slider .uk-card-hover:not(.uk-card-default):not(.uk-card-primary):not(.uk-card-secondary) {
    background-color: var(--hell);
    box-shadow: 0 10px 15px rgba(0,0,0,.16);
}
.safari-slider .uk-card-body {
    padding: 0 !important;
}
.safari-slider .box-wishlist {
    display: inline-block;
    background: #fff;
    color: var(--rot);
    padding: 0.5em;
}
.safari-slider .box-neu,
.safari-slider .box-zubuchung {
    display: inline-block;
    background: #fff;
    color: var(--gruen);
    text-transform: uppercase;
    padding: 0.5em;
    margin-right: -5px;
    font-weight: 700;
}
.safari-slider .box-neu {
	background: var(--orange);
    color: #fff;
}
.safari-slider .box-fotograf {
	display: block;
	position: absolute;
	top: 60px;
	right: 10px;
	max-width: 150px;
	max-height: 150px;
}
.safari-slider .box-fotograf img {
	border: 3px solid #fff;
	box-shadow: 0 0 20px -2px #000
}
.safari-slider h3 {
    font-size: 1.25rem;
    font-weight: 700;
	margin-bottom: 10px;
}
.safari-slider .safari-card-content {
    margin: 15px 25px 0;
}
.safari-slider .uk-card-body .uk-label {
    margin-right: -5px;
}
.safari-slider .safari-card-content p {
	margin: 0;
}
.safari-slider .safari-card-content hr {
	margin: 5px 0;
}
/* Button unten rechts ausrichten */
.safari-slider .uk-slider-items > * .uk-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.safari-slider .uk-slider-items > * .uk-card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.safari-slider .uk-slider-items > * .box-button-details {
    margin-top: auto;
    align-self: flex-end;
}
/* Safari Slider Ende */

/* Unterkunft Slider Start */
.unterkunft-slider .uk-card-hover:not(.uk-card-default):not(.uk-card-primary):not(.uk-card-secondary) {
    background-color: var(--hell);
    box-shadow: 0 10px 15px rgba(0,0,0,.16);
}
.unterkunft-slider .uk-card-body {
    padding: 0 !important;
}
.unterkunft-slider .box-wishlist {
    display: inline-block;
    background: #fff;
    color: var(--rot);
    padding: 0.75em 1em;
}
.unterkunft-slider .box-neu {
    display: inline-block;
    background: var(--hellblau);
    color: var(--gruen);
    text-transform: uppercase;
    padding: 0.75em 1em;
    margin-right: -5px;
    font-weight: 700;
}
.unterkunft-slider .box-neu {
	background: var(--orange);
	display: inline-block;
    color: #fff;
}
.unterkunft-slider .box-bewertungen {
	background: #fff;
	display: inline-block;
	padding: 4px;
	float: right;
	img {
		max-height: 20px;
		display: inline-block; 
	}
}
.unterkunft-slider h3 {
    font-size: 1.25rem;
    font-weight: 700;
	margin-bottom: 6px;
}
.unterkunft-slider .unterkunft-card-content {
    margin: 0 25px 10px;
}
.unterkunft-slider .uk-card-body .uk-label {
    margin-right: -5px;
}
.unterkunft-slider .unterkunft-card-content p {
	margin: 0;
}
.unterkunft-slider .unterkunft-card-content hr {
	margin: 5px 0;
}
.unterkunft-slider .unterkunft-card-tags {
    margin-right: 5px;
    min-height: 40px;
}
.unterkunft-slider img.unterkunft-art-icon {
    height: 17px;
    margin-top: -4px;
}
.artikel-slider .uk-dotnav > * > *,
.safari-slider .uk-dotnav > * > *,
.unterkunft-slider .uk-dotnav > * > * {
	background: #fff;
}
.artikel-slider .uk-dotnav > .uk-active > *,
.lga-saf-slider.safari-slider .uk-dotnav > .uk-active > *,
.safari-slider .uk-dotnav > .uk-active > *,
.unterkunft-slider .uk-dotnav > .uk-active > * {
	background: var(--braun);
}
.lga-saf-slider.safari-slider .uk-dotnav > * > * {
    background: #efe9e4;
}
/* Button unten rechts ausrichten */
.unterkunft-slider .uk-slider-items > * .uk-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.unterkunft-slider .uk-slider-items > * .uk-card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.unterkunft-slider .uk-slider-items > * .box-button-details {
    margin-top: auto;
    align-self: flex-end;
}
/* unterkunft Slider Ende */

.footer-menu a {
    text-decoration: none;
}
.lga-leistungen li::before {
    content: "✔";
    display: inline-block;
    margin-left: -1.5em;
    width: 1.3em;
}
.lga-leistungen-nicht li::before {
    content: "✖";
    display: inline-block;
    margin-left: -1em;
    width: 1.3em;
}
.lga-leistungen ul,
.lga-leistungen-nicht ul,
ul.lga-leistungen,
ul.lga-leistungen-nicht {
    list-style: none;
}
.lga-leistungen li ul li::before {
    content: none;
}
.lga-leistungen ul li ul {
    list-style: disc;
}
.acym_module_form input {
    padding: 13px;
}
.uk-totop {
    color: var(--hell);
    background: var(--braun);
    border: solid 1px var(--braun);
    border-radius: 50%;
    padding: 14px 10px;
}
.uk-totop:hover {
    color: var(--braun);
    background: var(--hell);
}
#module-tm-6 li:last-child svg path,
#module-tm-7 li:last-child svg path,
.social .uk-child-width-auto .uk-icon[uk-icon*="heart"] svg path {
  stroke: #E60005;
}

.module-breacrumb .uk-margin-medium-bottom {
    margin-bottom: 0 !important;
}
.module-breacrumb ul {
    margin-bottom: 0;
}

/* to top dynamisch */
.wg-totop {
    position: fixed;
    bottom: 80px;
    right: 30px;
    z-index: 980;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--braun);
    border: 1px solid #efefef;
    color: #fff;
    border-radius: 50%;
    /* zunächst versteckt */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
}

.wg-totop:hover {
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
}

.wg-totop:focus-visible {
    outline: var(--lga-focus-width) dashed var(--lga-focus-color);
    outline-offset: var(--lga-focus-offset);
    /* White backing ring: red alone reaches only 2.7:1 on the brown button. */
    box-shadow: 0 0 0 calc(var(--lga-focus-width) + var(--lga-focus-offset)) #fff;
}

/* Sichtbar-Zustand, wird per JS gesetzt */
.wg-totop.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
    .wg-totop {
        transition: opacity 0.25s ease, visibility 0.25s ease;
        transform: none;
    }
    .wg-totop.is-visible {
        transform: none;
    }
}
@media (max-width: 768px) {
    .wg-totop {
        bottom: 63px;
        right: 21px;
        width: 36px;
        height: 36px;
    }
}

/* Merkliste */
a.kick-faved.faved * {
    fill: var(--rot);
}
a.kick-faved * {
    stroke: var(--rot) !important;
}
a.kick-faved * {
    stroke: #3f200e !important;
}
/* Angebote filtern */
.rsform-angebote,
.modul-angebote-filter {
    text-align: center;
    .uk-grid {
        margin-left: -20px;
    }
	h2 {
		text-align: center;
		font-size: 2em;
	}
	.btn-primary {
		background-color: var(--orange);
		max-width: 300px;
		margin: 0 auto;
		display: block;
	}
}
.jfilters-item-link--button.jfilters-item-link--selected .jfilters-item__text {
    background: var(--gruen);
    color: #fff;
    border-width: 1px;
    border-color: var(--gruen);
    font-weight: 400;
}
.card-liste-content h3.uk-h6 {
    font-size: 1.125em;
}
.card-liste-content .unterkunft-card-content,
.card-liste-content .safari-card-content {
    padding: 0 1em 1em;
}
.card-liste-content .unterkunft-card-content {
    margin-top: 0 !important;
}
.safari-symbole a {
    text-decoration: none;
}
/* Fotogalerie Showtime Spalten */
@media (min-width: 992px) {
    .showtime-default .showtime-image {
        width: 20% !important;
    }
}

@media screen and (max-width:2000px) {
    .lga-footer-recht.uk-section-primary {
        padding-bottom: 6rem;
    }
}
@media screen and (max-height:960px) {
    .lga-megamenu .uk-tile-small {
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .lga-mega-grid .uk-tile-muted .uk-grid-margin {
        margin-top: 20px;
    }
    .lga-mega-grid .uk-tile-muted .uk-grid-small>* {
        padding-left: 2px;
    }
    .lga-mega-grid .uk-h5 {
        font-size: 1rem;
    }
    .lga-mega-grid .el-content {
        margin-top: 4px !important;
        font-size: 13px;

        display: -webkit-box;
        -webkit-line-clamp: 3;       /* 3 Zeilen, bei Bedarf auf 4 ändern */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .lga-mega-grid img {
        max-width: 100px;   /* vorher vermutlich ~110-130px, anpassen */
        height: auto;
    }
    .lga-mega-grid .uk-width-small\@m {
        width: 120px;
    }
}
@media screen and (max-width:1200px) {
    .lga-sticky .uk-subnav {
        padding-left: 20px;
    }
    .anfrage-btn .uk-container {
        padding-left: 0;
        padding-right: 0;
    }
    .anfrage-btn .uk-card-secondary.uk-card-small.uk-card-body {
        padding: 13px 15px 12px 12px;
        max-height: 60px;
    }
    .social ul.uk-grid {
        max-width: 130px;
        justify-content: flex-end;
        row-gap: 2px;
    }
    .social .uk-icon-button {
        width: 30px;
        height: 30px;
    }
    .social .uk-icon-button svg {
        width: 16px;
        height: 16px;
    }
}

@media screen and (max-width:900px) {
    .hero-anfrage .uk-button,
    .anfrage-btn .uk-button {
        padding: 0 8px;
        line-height: 58px;
        font-size: 0.9rem;
    }
    /* Slider Safari Modul nicht volle Breite */
    /* .slider-overlay-reiseziele .uk-slider-container .uk-slider-items, */
    .artikel-slider .uk-slider-container .uk-slider-items,
    .unterkunft-slider .uk-slider-container .uk-slider-items,
    .safari-slider .uk-slider-container .uk-slider-items {
        width: 95%;
    }

  /* Kleines Fotostreifen-Icon oben rechts */
  .fun .el-item::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 50px 50px 0;
    border-color: transparent white transparent transparent;
    z-index: 20;
  }

  .fun .el-item::before {
    content: '📷';
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 1.2rem;
    z-index: 21;
    line-height: 1;
    animation: wiggle 2s ease-in-out infinite;
  }

@keyframes wiggle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  20%       { transform: rotate(-15deg) scale(1.2); }
  40%       { transform: rotate(10deg) scale(1.1); }
  60%       { transform: rotate(-5deg) scale(1.05); }
  80%       { transform: rotate(3deg) scale(1); }
}
    
  table.acym_form,
  table.acym_form tbody,
  table.acym_form tr {
    display: block !important;
    width: 100% !important;
  }

  table.acym_form td {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 4px 0 !important;
  }

  table.acym_form td input[type="text"],
  table.acym_form td input[type="email"] {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  table.acym_form td.acysubbuttons button {
    width: 100% !important;
  }
}

@media (max-width: 768px) {
    .showtime-default .showtime-image {
        width: 50% !important;
    }
}

@media screen and (max-width:640px) {
    .hero-h-row {
        margin-top: 30vh;
    }
    .hero .hero-text {
        margin-top: 25vh;
    }
    .uk-button {
        padding: 0 30px;
    }
    .uk-button span.uk-icon {
        margin-left: 5px !important;
    }
    .card-reiseziele .uk-h3 {
        padding-top: 25px;
    }
	.uk-dotnav > * > * {
		width: 20px;
		height: 10px;
	}
    .formContainer .rsform-block-dateankunft {
        width: 100%;
        float: none;
    }
    .formContainer .rsform-block-dateabreise {
        width: 100%;
        float: none;
    }
}
@media screen and (max-width:480px) {
	.uk-navbar-item {
		min-height: 60px;
	}
	.anfrage-btn .uk-card-secondary.uk-card-small.uk-card-body {
        padding: 8px 15px 10px 12px;
        max-height: 50px;
    }
	.hero-anfrage .uk-button,
    .anfrage-btn .uk-button {
        padding: 0 8px;
        line-height: 48px;
        font-size: 0.9rem;
    }
}

/* ─────────────────────────────────────────────────────────
 * LGA Card-System
 * Geteiltes Styling für Safari- und Unterkunfts-Karten.
 * Markup wird gerendert von:
 *   templates/yootheme/html/layouts/lga/safari-{card,slider}.php
 *   templates/yootheme/html/layouts/lga/unterkunft-{card,slider}.php
 * Gespeist vom Plugin plg_system_lga (Helper-Namespace
 *   Webgras\Plugin\System\Lga\Helper\*).
 * ───────────────────────────────────────────────────────── */

/* Wishlist-Heart (gemeinsam für Safari + Unterkunft) */
.lga-uk-card a.kick-faved.faved *,
.lga-saf-card a.kick-faved.faved * {
    fill: var(--rot);
    stroke: var(--rot) !important;
}
.lga-uk-card a.kick-faved *,
.lga-saf-card a.kick-faved * {
    stroke: #fff !important;
}
.lga-uk-glass.kick-faved.faved,
.lga-saf-glass.kick-faved.faved {
    background: #fff;
}

/* ── Safari-Karte ─────────────────────────────────────── */
.lga-saf-slider .lga-saf-card {
    background: #fff;
    display: flex; flex-direction: column;
    height: 100%;
    color: #2b2218;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    box-shadow: 0 10px 15px rgba(0,0,0,.16);
}
.lga-saf-card .lga-saf-image {
    position: relative;
    aspect-ratio: 320 / 220;
    overflow: hidden;
}
.lga-saf-card .lga-saf-image > .lga-saf-img,
.lga-saf-card .lga-saf-image > .lga-saf-img > img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 1;
}
.lga-saf-image .lga-saf-top-left {
    position: absolute; top: 12px; left: 14px; z-index: 5;
}
.lga-saf-image .lga-saf-top-right {
    position: absolute; top: 12px; right: 12px; z-index: 5;
    display: inline-flex; gap: 8px;
}
.lga-saf-eyebrow {
    font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase;
    font-weight: 600; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.55);
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 8px;
    background: rgba(0,0,0,0.32);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.5);
}
a.lga-saf-eyebrow:hover { color: #fff; text-decoration: underline; }
/* Eyebrow-Wrapper bleibt neutral; einzelne Land-Links sind klickbar */
span.lga-saf-eyebrow { cursor: default; }
span.lga-saf-eyebrow:hover { text-decoration: none; }
.lga-saf-eyebrow-link {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}
.lga-saf-eyebrow-link:hover {
    color: #fff;
    text-decoration: underline;
}
.lga-saf-glass,
.lga-saf-badge {
    width: 32px; height: 32px; border-radius: 999px;
    border: 1.5px solid #fff;
    background: rgba(0,0,0,0.32);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #fff;
    display: grid; place-items: center;
    padding: 0;
}
.lga-saf-glass { cursor: pointer; }
.lga-saf-glass:hover { background: rgba(0,0,0,0.5); }
.lga-saf-glass svg, .lga-saf-badge svg { display: block; }
.lga-saf-fotograf {
    position: absolute; right: 14px; bottom: 14px; z-index: 3;
    width: 120px; height: 120px; border-radius: 999px;
    border: 3px solid #fff;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.22);
    background: #d4be8a;
    /* Visuelle Dekoration — Klicks gehen zum Bild-Link */
    pointer-events: none;
}
/* Location-Eyebrow Wrapper ist nur Deko, einzelne Länder-Links sind klickbar */
.lga-saf-image .lga-saf-top-left {
    pointer-events: none;
}
.lga-saf-image .lga-saf-top-left .lga-saf-eyebrow-link {
    pointer-events: auto;
}
.lga-saf-fotograf img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.lga-saf-body {
    padding: 16px 18px 16px;
    flex: 1; display: flex; flex-direction: column;
}
.lga-saf-meta-top {
    display: flex; align-items: center; gap: 10px;
    color: #5a3a1f; margin-bottom: 10px;
}
.lga-saf-reisearten {
    display: inline-flex; gap: 6px; align-items: center;
}
.lga-saf-reisearten img {
    height: 22px; width: auto; display: block;
}
.lga-saf-dauer {
    font-size: 13px; color: #7a6e60; font-weight: 500;
}
.lga-saf-title {
    margin: 0 0 12px;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.2px; line-height: 1.25;
    color: #2b2218;

}
.lga-saf-title a { color: inherit; text-decoration: none; }
/* Hovering anywhere on the card underlines the title, signalling one shared target. */
.lga-saf-title a:hover,
.lga-saf-card:hover .lga-saf-title a { text-decoration: underline; }
/* Outline itself comes from the global :focus-visible rule at end of file. */
.lga-saf-title a:focus-visible { text-decoration: underline; }
.lga-saf-kurztext {
    font-size: 14px; color: #3a3027; margin: 0 0 12px; line-height: 1.55;
}
.lga-saf-kurztext {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;             /* zukunftssichere Schreibweise */
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* p-/div-Margins der Editor-HTML im Clamp-Container killen,
   damit die Zeilenrechnung sauber bleibt */
.lga-saf-kurztext > * {
    margin: 0;
}
.lga-saf-status {
    display: flex; flex-direction: column; gap: 5px;
    font-size: 13px; color: #2b2218;
    padding-bottom: 12px; margin-bottom: 12px;
    border-bottom: 1px solid #ece4d4;
}
.lga-saf-termin { color: #2b2218; }
.lga-saf-termin-empty { color: #7a6e60; font-style: italic; }
.lga-saf-status-row {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
/* Ein Termin pro Zeile: Datum + Pillen inline */
.lga-saf-termin-line {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.lga-saf-termin-date {
    color: #2b2218; font-weight: 500;
}
/* Dezenter Trenner zwischen aufeinanderfolgenden Fix-Terminen
   (hilft besonders auf Mobile, wenn Pillen umbrechen). */
.lga-saf-status .lga-saf-termin-line + .lga-saf-termin-line {
    border-top: 1px solid #ece4d4;
    padding-top: 8px;
    margin-top: 2px;
}
.lga-saf-plaetze {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; color: #2b2218; font-weight: 500;
}
.lga-saf-plaetze .lga-saf-dot {
    width: 8px; height: 8px; border-radius: 999px;
    flex-shrink: 0;
}
.lga-saf-garantiert {
    display: inline-flex; align-items: center; gap: 5px;
    color: #2f5d3a; font-size: 12.5px; font-weight: 600;
}
.lga-saf-zubuchung {
    font-size: 12.5px; color: #5a3a1f; font-weight: 600;
}
.lga-saf-waitlist {
    display: inline-flex; align-items: center;
    padding: 3px 10px; border-radius: 999px;
    background: var(--orange); color: #fff;
    font-size: 11.5px; font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1.4;
}
.lga-saf-foot {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 10px; margin-top: auto;
}
.lga-saf-preis-label {
    font-size: 11px; color: #7a6e60; letter-spacing: 0.3px;
}
.lga-saf-preis-value {
    font-size: 17px; color: #2b2218; font-weight: 700;
    letter-spacing: -0.2px; margin-top: 2px;
}
.lga-saf-cta {
    padding: 10px 16px;
    background: #2f5d3a; color: #fff;
    border: none; border-radius: 2px;
    font-size: 11px; font-weight: 700; letter-spacing: 1.4px;
    text-transform: uppercase; cursor: pointer;
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 6px;
}
.lga-saf-cta:hover { background: #244a2d; color: #fff; }

/* ── Unterkunft-Karte ─────────────────────────────────── */
/* .lga-cat-grid: Kategorie-Cards (mod_articles_categories: afrika)
   nutzen dieselbe Card-Basis außerhalb des Sliders. */
.lga-uk-slider .lga-uk-card,
.lga-cat-grid .lga-uk-card {
    background: #fff;
    display: flex; flex-direction: column;
    height: 100%;
    color: #2b2218;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    box-shadow: 0 10px 15px rgba(0,0,0,.16);
}
.lga-uk-card .lga-uk-image {
    position: relative;
    aspect-ratio: 320 / 220;
    overflow: hidden;
}
.lga-uk-card .lga-uk-image > .lga-uk-img,
.lga-uk-card .lga-uk-image > .lga-uk-img > img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}
.lga-uk-image .lga-uk-top-left {
    position: absolute; top: 12px; left: 14px; z-index: 2;
}
.lga-uk-image .lga-uk-top-right {
    position: absolute; top: 12px; right: 12px; z-index: 2;
    display: inline-flex; gap: 8px;
}
.lga-uk-eyebrow {
    font-size: 11px; letter-spacing: 1.4px; text-transform: uppercase;
    font-weight: 600; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.55);
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 8px;
    background: rgba(0,0,0,0.32);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.5);
}
.lga-uk-eyebrow:hover { color: #fff; text-decoration: underline; }
.lga-uk-glass,
.lga-uk-badge {
    width: 32px; height: 32px; border-radius: 999px;
    border: 1.5px solid #fff;
    background: rgba(0,0,0,0.32);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    color: #fff;
    display: grid; place-items: center;
    padding: 0;
}
.lga-uk-glass { cursor: pointer; }
.lga-uk-glass:hover { background: rgba(0,0,0,0.5); }
.lga-uk-glass svg, .lga-uk-badge svg { display: block; }
.lga-uk-body {
    padding: 16px 18px 16px;
    flex: 1; display: flex; flex-direction: column;
}
.lga-uk-meta-top {
    display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
    color: #5a3a1f; margin-bottom: 10px;
    font-size: 13px;
}
.lga-uk-meta-top .lga-uk-rating {
    display: inline-flex; align-items: center;
}
.lga-uk-meta-top .lga-uk-rating img { display: block; height: 18px; width: auto; }
.lga-uk-meta-top .lga-uk-zimmer,
.lga-uk-meta-top .lga-uk-art {
    color: #7a6e60; font-weight: 500;
}
.lga-uk-meta-top .lga-uk-sep { color: #7a705d; }
.lga-uk-title {
    margin: 0 0 12px; font-size: 16px; font-weight: 700;
    letter-spacing: -0.2px; line-height: 1.25;
    color: #2b2218; min-height: 40px;
}
.lga-uk-title a { color: inherit; text-decoration: none; }
/* Hovering anywhere on the card underlines the title, signalling one shared target. */
.lga-uk-title a:hover,
.lga-uk-card:hover .lga-uk-title a { text-decoration: underline; }
/* Outline itself comes from the global :focus-visible rule at end of file. */
.lga-uk-title a:focus-visible { text-decoration: underline; }
.lga-uk-foot {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 10px; margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid #ece4d4;
}
.lga-uk-cta {
    padding: 10px 16px;
    background: #2f5d3a; color: #fff;
    border: none; border-radius: 2px;
    font-size: 11px; font-weight: 700; letter-spacing: 1.4px;
    text-transform: uppercase; cursor: pointer;
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 6px;
}
.lga-uk-cta:hover { background: #244a2d; color: #fff; }

/* ── Kategorie-Karten (mod_articles_categories: afrika) ── */
.lga-cat-desc {
    font-size: 14px; color: #3a3027; margin: 0 0 12px; line-height: 1.55;
}
.lga-cat-desc > * { margin: 0; }
.lga-cat-card .lga-uk-title { min-height: 0; }

/* ── Afrika-entdecken-Karte (nutzt die lga-uk-* Basisklassen) ── */
.lga-art-card .lga-art-lesezeit {
    display: inline-flex; align-items: center; gap: 5px;
    color: #7a6e60; font-weight: 500;
}
.lga-art-card .lga-art-lesezeit svg { flex: none; }

/* ─────────────────────────────────────────────────────────
 * LGA Preise-Tabelle (mod_custom: safaripreise)
 * Markup rendered von:
 *   templates/yootheme/html/mod_custom/safaripreise.php
 * ───────────────────────────────────────────────────────── */

.lga-prices {
    color: #1f1a14;
}
.lga-prices-scroll {
    position: relative;
}
.lga-prices-card {
    background: #fff;
    border: 1px solid #e6dec9;
    overflow-x: auto;
}

/* Hint text below the table — visible only on mobile */
.lga-prices-hint {
    display: none;
    align-items: center;
    gap: 6px;
    margin: 8px 0 0;
    font-size: 12px;
    color: #82745e;
    font-style: italic;
}
.lga-prices-hint svg { flex-shrink: 0; }

@media (max-width: 768px) {
    /* Right-edge fade-out shadow → signals horizontal scrollability */
    .lga-prices-scroll::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 28px;
        pointer-events: none;
        background: linear-gradient(to right,
            rgba(255,255,255,0) 0%,
            rgba(0,0,0,0.15) 100%);
    }
    /* Always show horizontal scrollbar on mobile */
    .lga-prices-card {
        overflow-x: scroll;
        scrollbar-color: #c8b89a #f0e9d8;
        scrollbar-width: thin;
    }
    .lga-prices-card::-webkit-scrollbar {
        height: 8px;
        -webkit-appearance: none;
    }
    .lga-prices-card::-webkit-scrollbar-track {
        background: #f0e9d8;
    }
    .lga-prices-card::-webkit-scrollbar-thumb {
        background: #c8b89a;
        border-radius: 4px;
    }
    .lga-prices-hint {
        display: inline-flex;
    }
    /* Leere Preistabelle (nur Sprachstring + Button): mobil untereinander
       stapeln, damit der Text die volle Breite bekommt statt Wort für Wort
       umzubrechen. */
    .lga-prices-table--empty,
    .lga-prices-table--empty tbody,
    .lga-prices-table--empty tr,
    .lga-prices-table--empty td {
        display: block;
        width: auto;
    }
    .lga-prices-table--empty thead {
        display: none;
    }
    .lga-prices-table--empty .lga-col-termine {
        padding-bottom: 4px;
    }
    .lga-prices-table--empty .lga-col-anfrage {
        text-align: left;
        white-space: normal;
    }
}

.lga-prices-table {
    width: 100%;
    min-width: 720px;
    border-collapse: separate;
    border-spacing: 0;
}
.lga-prices-table thead tr {
    background: #f7f1e3;
}
.lga-prices-table thead th {
    padding: 14px 18px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #3a3027;
    white-space: nowrap;
    border-bottom: 1px solid #e6dec9;
    text-align: left;
}
.lga-prices-table thead th.is-center { text-align: center; }
.lga-prices-table thead th.is-right  { text-align: right; }

.lga-prices-table tbody td {
    padding: 14px 18px;
    color: #3a3027;
    vertical-align: middle;
    border-bottom: 1px solid #efe8d6;
    text-align: left;
}
.lga-prices-table tbody td.is-center { text-align: center; }
.lga-prices-table tbody td.is-right  { text-align: right; }
.lga-prices-table tbody tr:last-child td { border-bottom: none; }

.lga-prices-table .lga-col-termine  { white-space: nowrap; }
.lga-prices-table .lga-col-pill     { width: 140px; }
.lga-prices-table .lga-col-garantie { width: 130px; }
.lga-prices-table .lga-col-tn       { width: 110px; }
.lga-prices-table .lga-col-anfrage  { width: 1%; white-space: nowrap; }

/* Status-Pille */
.lga-prices-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.lga-prices-pill::before {
    content: "";
    width: 9px; height: 9px;
    border-radius: 999px;
    background: currentColor;
    flex-shrink: 0;
    opacity: 1;
}
.lga-prices-pill--sold { background: #f4e3df; color: #a83a2a; text-transform: lowercase; }
.lga-prices-pill--few  { background: #fbf1da; color: #c8901c; }
.lga-prices-pill--many { background: #eaf1ec; color: #2f5d3a; }
.lga-prices-pill--wait { background: #fbe5cf; color: var(--orange); }
/* „mehrere Termine" — reines Label, ohne Status-Dot */
.lga-prices-pill--multi { background: var(--beige); color: var(--braun); align-self: flex-start; }
.lga-prices-pill--multi::before { display: none; }

/* Garantiert */
.lga-prices-garantie {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #2f5d3a;
    font-size: 14px;
    font-weight: 600;
}

.lga-prices-tn {
    font-size: 14.5px;
    color: #3a3027;
    font-variant-numeric: tabular-nums;
}

/* Preis */
.lga-prices-preis {
    font-size: 15.5px;
    font-weight: 700;
    color: #1f1a14;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.lga-prices-ab {
    color: #82745e;
    font-weight: 500;
    margin-right: 4px;
}

/* Anfragen-/Warteliste-Button — gleiche Breite */
.lga-prices-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 130px;
    padding: 9px 16px;
    background: var(--gruen);
    color: #fff !important;
    border: none;
    border-radius: 0;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    white-space: nowrap;
    text-align: center;
    cursor: pointer;
}
.lga-prices-btn:hover {
    background: #214528;
    color: #fff !important;
    text-decoration: none;
}
.lga-prices-btn--waitlist,
.lga-prices-btn--inquire {
    background: var(--orange);
}
.lga-prices-btn--waitlist:hover,
.lga-prices-btn--inquire:hover {
    background: #a64d00;
}

/* Leere Preistabelle — gleiche Tabellen-Struktur, nur 2 Spalten */
.lga-prices-table--empty {
    min-width: 0;
}
.lga-prices-table--empty .lga-col-termine {
    white-space: normal;
}

/* Header-Abkürzung „TN-Anzahl" — kein dotted-underline, aber Hover-Cursor */
.lga-prices-table thead th abbr[title] {
    text-decoration: none;
    cursor: help;
    border-bottom: 0;
}

/* Footer „Weitere Informationen" */
.lga-prices-footer {
    margin-top: 32px;
}
.lga-prices-footer-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
    font-size: 22px;
    font-weight: 500;
    line-height: 1;
    color: #2f5d3a;
    letter-spacing: -0.2px;
}
.lga-prices-rule {
    flex: 1;
    height: 1px;
    background: #e6dec9;
}
.lga-prices-info {
    font-size: 14.5px;
    color: #3a3027;
    line-height: 1.7;
}
.lga-prices-info p { margin: 0; }

/* =====================================================================
   Querformat-Popup für die Reisekarte (Leaflet + YOOtheme/UIkit)
   Foto links als bündige Spalte, Text rechts, deutlich kleiner.
   Nur CSS – das HTML aus dem YOOtheme-Pagebuilder bleibt unverändert.
   In YOOtheme unter: Customizer ▸ Custom CSS (oder eigenes Stylesheet).
   ===================================================================== */

/* Breite des Popups festlegen – überschreibt die von Leaflet
   gesetzte Inline-Breite (style="width: 301px"). */
.leaflet-popup-content {
    width: 400px !important;
    margin: 0 !important;
}
.leaflet-popup-content p {
    margin: 0 !important;
}

/* Weiße Box randlos machen, damit das Foto bündig anliegen kann. */
.leaflet-popup-content-wrapper {
    padding: 0 !important;
    overflow: hidden;
    border-radius: 12px;
}

/* Grundlayout: Foto links, Text rechts daneben. */
.leaflet-popup-content .el-item {
    position: relative;
    padding: 0 !important;
    min-height: 150px;
    box-sizing: border-box;
}

/* --- Foto-Spalte: funktioniert für <picture> UND direktes <img> ---
   YOOtheme erzeugt <picture> wenn die Quelle JPEG/PNG ist,
   aber ein direktes <img> wenn die Quelle bereits WebP ist. */
.leaflet-popup-content .el-item > picture,
.leaflet-popup-content .el-item > img.el-image {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 150px;
    margin: 0;
    display: block;
    background: #ece5d8; /* dezenter Platzhalter, falls Bild lädt */
}

/* Bild-Styles für beide Varianten:
   picture img.el-image  → Bild innerhalb des <picture>-Wrappers
   > img.el-image        → direktes Bild-Kind (WebP-Quellen) */
.leaflet-popup-content .el-item > picture img.el-image,
.leaflet-popup-content .el-item > img.el-image {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 150px !important;
    height: 100% !important;
    max-width: none !important; /* verhindert, dass eine allgemeine Regel height: 100% überschreibt */
    object-fit: cover;          /* Foto füllt die Spalte ohne Verzerrung */
    margin: 0 !important;
    display: block;
    border-radius: 0;
}

/* --- Textspalte rechts neben dem Foto --- */
.leaflet-popup-content .el-item > .el-title,
.leaflet-popup-content .el-item > .el-content,
.leaflet-popup-content .el-item > div:last-child {
    margin-left: 166px !important;
    margin-right: 14px !important;
}

/* Titel – kleiner, ohne den großen UIkit-Abstand oben. */
.leaflet-popup-content .el-item > .el-title {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-right: 26px !important; /* Platz für den Schließen-Button */
    font-size: 15px;
    line-height: 1.25;
    padding-top: 14px;
}

/* Beschreibung – kleiner und nach 4 Zeilen mit „…" abschneiden. */
.leaflet-popup-content .el-item > .el-content {
    margin-top: 5px !important;
    font-size: 12.5px;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
#unterkunft .leaflet-popup-content .el-item > .el-content {
    -webkit-line-clamp: 3;
}

/* Link „zur Unterkunft" / „zum Tagesablauf". */
.leaflet-popup-content .el-item > div:last-child {
    margin-bottom: 14px !important;
}
.leaflet-popup-content .el-item .el-link {
    font-size: 12.5px;
}

/* Sonstige Bilder im Popup (nicht .el-image) dürfen weiterhin
   responsiv sein – nur .el-image hat eigene Positionierungsregeln. */
.leaflet-popup img:not(.el-image) {
    max-width: 100%;
    height: auto;
    display: block;
}

/* =====================================================================
   Mobil / sehr schmale Screens: zurück auf gestapelt
   (Foto oben, Text darunter), damit nichts aus dem Bild läuft.
   ===================================================================== */
@media (max-width: 460px) {
    .leaflet-popup-content {
        width: 250px !important;
    }
    .leaflet-popup-content .el-item {
        min-height: 0;
    }

    /* picture und direktes img: wieder normal im Flow */
    .leaflet-popup-content .el-item > picture,
    .leaflet-popup-content .el-item > img.el-image {
        position: static;
        width: 100%;
        height: 140px;
    }
    .leaflet-popup-content .el-item > picture img.el-image,
    .leaflet-popup-content .el-item > img.el-image {
        position: static;
        width: 100% !important;
        height: 140px !important;
        max-width: 100% !important;
        object-fit: cover;
    }

    .leaflet-popup-content .el-item > .el-title,
    .leaflet-popup-content .el-item > .el-content,
    .leaflet-popup-content .el-item > div:last-child {
        margin-left: 14px !important;
    }
    .leaflet-popup-content .el-item > .el-title {
        margin-top: 12px !important;
        padding-top: 0;
    }
    #karte .leaflet-container a.leaflet-popup-close-button {
        top: -10px;
        right: -10px;
        color: #000;
        background: #fff;
        font-weight: 700;
        border-radius: 15px;
    }
}

/* =======================================================================
LGA — JFilters Button-Filter (Safari-Liste, allgemein wiederverwendbar)
Funktioniert für alle Ansichten mit .jfilters-filter-list--buttons_multi.
Nicht für .modul-angebote-filter (Dropdown-Variante, eigene Regeln).
======================================================================= */

.tm-top.uk-section {
    padding-top: 4rem;
    padding-bottom: 0;
}
@media (max-width: 768px) {
    .tm-top.uk-section {
        padding-top: 1rem;
        padding-bottom: 0;
        margin-bottom: 0;
    }
}
/* Wrapper */
.top-filter .mod-jfilters_filters {
    background: var(--beige);
}

/* Dreispalten-Layout (Desktop)  */
.top-filter .mod-jfilters_filters .jfilters-filters-container {
    display: flex;
    align-items: stretch;
    gap: 0;
    max-width: 1600px;
    margin: 0 auto;
}
.top-filter .mod-jfilters_filters .jfilters-filter-container {
    flex: 5;
    padding: 1.5em 1.25em;
    border-right: 1px solid #ddd5c4;
    min-width: 0;
}
.top-filter .mod-jfilters_filters #jfilters-filter-container-117-89 {
    flex: 3;
}
.top-filter .mod-jfilters_filters .jfilters-filter-container:last-child {
    border-right: none;
    flex: 0 0 300px;
}


/* Heading / Toggle  */
.top-filter .mod-jfilters_filters .jfilters-filter-header {
    margin: 0 0 12px;
}
.top-filter .mod-jfilters_filters .jfilters-filter-header__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--braun);
    gap: 6px;
}
.top-filter .mod-jfilters_filters .jfilters-filter-header__toggle:hover {
    color: #133319;
}
.top-filter .mod-jfilters_filters .jfilters-chevron {
    transition: transform .2s ease;
    flex-shrink: 0;
}
.top-filter .mod-jfilters_filters .jfilters-filter-header__toggle[aria-expanded="false"] .jfilters-chevron {
    transform: rotate(-90deg);
}
.top-filter .mod-jfilters_filters .jfilters-filter-container__inner[aria-hidden="true"] {
    display: none;
}

/*  Chip-Buttons  */
/* Zähler (z. B. „(10)") */
.top-filter .jfilters-item__counter {
    font-size: 0.75rem;
    opacity: .8;
    margin-left: 0.5rem;
}

/* „Filter löschen"-Link */
.top-filter .jfilters-item-link--clear {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--braun);
    text-decoration: underline;
    margin-bottom: 8px;
}
.top-filter .jfilters-item-link--clear:hover {
    color: var(--braun);
    opacity: .75;
}
/*  Range-Eingaben */
.top-filter .jfilters-filter-range_inputs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.top-filter .jfilters-filter-range_inputs__input {
    flex: 1;
    padding: 7px 10px;
    border: 1.5px solid #c8c0aa;
    border-radius: 3px;
    background: #fff;
    font-family: inherit;
    font-size: 13px;
    color: #2b2218;
    min-width: 0;
    text-align: center;
    -moz-appearance: textfield;
}
.top-filter .jfilters-filter-range_inputs__input::-webkit-inner-spin-button,
.top-filter .jfilters-filter-range_inputs__input::-webkit-outer-spin-button {
    -webkit-appearance: none;
}
.top-filter .jfilters-filter-range_inputs__input:focus {
    outline: none;
    border-color: var(--gruen);
}
/* Go Button */
.top-filter .btn-primary,
.top-filter .jfilters-filter__submit-btn {
    padding: 0.5rem 1rem;
    background: var(--gruen);
    color: #fff;
    border: none;
    border-radius: 3px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: .05em;
    cursor: pointer;
    white-space: nowrap;
    display: inline-block;
    max-width: none;
    margin: 0;
    line-height: 1;
    text-transform: none;
}
.top-filter .btn-primary:hover,
.jfilters-filter__submit-btn:hover {
    background: var(--gruen);
}
.top-filter .jfilters-filter__submit-btn:disabled {
    opacity: .4;
    cursor: default;
}

/* Dual-Range-Slider  */
/* für alle Slider, nicht nur .top-filter   */
.jfilters-filter-range-sliders__container {
    position: relative;
}
.jfilters-filter-range-sliders__gutter {
    position: relative;
    height: 28px;
    display: flex;
    align-items: center;
    background: none;
}
/* Hintergrund-Track */
.jfilters-filter-range-sliders__gutter::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 4px;
    background: #d8cebc;
    border-radius: 2px;
}
/* Farbige Füllung (div, per JS mit margin-left + width gesetzt) */
.jfilters-filter-range-sliders__slider_bckgr {
    position: absolute;
    height: 4px;
    background: var(--gruen);
    border-radius: 2px;
    pointer-events: none;
}
/* Slider-Knöpfe */
.jfilters-filter-range-sliders__knob {
    position: absolute;
    width: 100%;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    outline: none;
    pointer-events: none;
}
.jfilters-filter-range-sliders__knob::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--gruen);
    border: 3px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
    cursor: grab;
    pointer-events: all;
}
.jfilters-filter-range-sliders__knob::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--gruen);
    box-shadow: 0 1px 4px rgba(0,0,0,.25);
    cursor: grab;
    pointer-events: all;
    border: none;
}

/* Afrika-entdecken-Seiten (Seitenklassen "lga-cards lga-afrika"): beide
   Filterspalten gleich breit — überschreibt flex:5 und die 300px-Spalte. */
.lga-cards.lga-afrika .top-filter .mod-jfilters_filters .jfilters-filter-container {
    flex: 1 1 33.333%;
}
.lga-cards.lga-afrika .top-filter .mod-jfilters_filters .jfilters-filter-container:last-child {
    flex: 2 2 66.667%;
}

/* FAQ-Filtermodule (Modulklassen top-filter-faq-safari/-allgemein/-laender):
   erste Spalte fix 1/3, die übrigen teilen sich den Rest (flex-basis 0) —
   bei 2 Spalten also 1/3 + 2/3, bei 3 Spalten 3 × 1/3. Überschreibt
   flex:5 und die 300px-Spalte (:last-child). */
.top-filter-faq-allgemein .mod-jfilters_filters .jfilters-filter-container,
.top-filter-faq-laender .mod-jfilters_filters .jfilters-filter-container,
.top-filter-faq-reiseart .mod-jfilters_filters .jfilters-filter-container:last-child,
.top-filter-faq-safari .mod-jfilters_filters .jfilters-filter-container:last-child,
.top-filter-faq-allgemein .mod-jfilters_filters .jfilters-filter-container:last-child,
.top-filter-faq-laender .mod-jfilters_filters .jfilters-filter-container:last-child {
    flex: 1 1 0;
}
.top-filter-faq-laender .mod-jfilters_filters .jfilters-filter-container:first-child {
    flex: 0 0 33.333%;
}
.top-filter-faq-reiseart .mod-jfilters_filters .jfilters-filter-container,
.top-filter-faq-safari .mod-jfilters_filters .jfilters-filter-container {
    flex: 1 1 0;
}

/*  Mobil: Akkordeon-Stapel  */
@media (max-width: 768px) {
    .top-filter .mod-jfilters_filters .jfilters-filters-container {
        flex-direction: column;
    }
    .top-filter .mod-jfilters_filters .jfilters-filter-container {
        border-right: none;
        border-bottom: 1px solid #ddd5c4;
        padding: 14px 16px;
        flex: none;
    }
    .top-filter .mod-jfilters_filters .jfilters-filter-container:last-child {
        border-bottom: none;
        flex: none;
    }
    /* Gleich-breit-Regel der Afrika-Seiten ist spezifischer — hier neutralisieren */
    .lga-cards.lga-afrika .top-filter .mod-jfilters_filters .jfilters-filter-container,
    .lga-cards.lga-afrika .top-filter .mod-jfilters_filters .jfilters-filter-container:last-child {
        flex: none;
    }
    /* :first-child-Regel der FAQ-Module ist spezifischer — hier neutralisieren
       (flex-basis 33% würde im Spalten-Stapel als Höhe wirken) */
    .top-filter-faq-reiseart .mod-jfilters_filters .jfilters-filter-container:first-child,
    .top-filter-faq-safari .mod-jfilters_filters .jfilters-filter-container:first-child,
    .top-filter-faq-allgemein .mod-jfilters_filters .jfilters-filter-container:first-child,
    .top-filter-faq-laender .mod-jfilters_filters .jfilters-filter-container:first-child {
        flex: none;
    }
    .top-filter .mod-jfilters_filters .jfilters-filter-header {
        margin-bottom: 0;
    }
    /* Wenn eingeklappt: kein Abstand unten beim Header */
    .top-filter .mod-jfilters_filters .jfilters-filter-container__inner[aria-hidden="false"] {
        padding-top: 12px;
    }
}
/* === Sortier-Button in Filteregebnissen als Auswahlfeld erkennbar machen === */
/* Selektor ggf. eingrenzen, damit nicht alle uk-buttons betroffen sind.
       Am robustesten über das aria-Attribut des Sortier-Buttons: */
#jf_results .uk-button[aria-haspopup="true"] {
    display: inline-flex;
    align-items: center;
    text-transform: none;          /* UIkit-UPPERCASE entfernen */
    font-weight: 500;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    padding: 0 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

#jf_results .uk-button[aria-haspopup="true"]:hover {
    border-color: #9ca3af;
    background: #fff;
    color: inherit;
}

/* Chevron per Pseudo-Element (kein HTML nötig) */
#jf_results .uk-button[aria-haspopup="true"]::after {
    content: "";
    width: 8px;
    height: 8px;
    margin-left: 10px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .2s ease;
    flex: 0 0 auto;
    position: relative;
    top: -2px;
}

/* Chevron dreht sich beim Öffnen */
#jf_results .uk-button[aria-haspopup="true"][aria-expanded="true"] {
    border-color: var(--gruen);         /* an Markenfarbe anpassen */
    box-shadow: 0 0 0 3px rgba(75, 107, 58, .15);
}
#jf_results .uk-button[aria-haspopup="true"][aria-expanded="true"]::after {
    transform: rotate(-135deg);
    top: 1px;
}

/* === Dropdown-Optik === */
#jf_results .uk-dropdown-nav {
    min-width: 200px;
}

#jf_results .uk-dropdown-nav > li > a {
    display: block;
    padding: 8px 12px;
    border-radius: 6px;
    text-transform: none;
    transition: background .15s ease;
}

#jf_results .uk-dropdown-nav > li > a:hover {
    background: #f3f4f6;
}

/* Aktive Auswahl markieren (mit Häkchen) */
#jf_results .uk-dropdown-nav > li.uk-active > a {
    font-weight: 600;
    color: var(--gruen);
}
#jf_results .uk-dropdown-nav > li.uk-active > a::before {
    content: "✓";
    margin-right: 8px;
    font-weight: 700;
}

/* ==========================================================================
   JFilters – Dropdown filter styling ("Unterkunft – Region")
   Mobile-first, matches the existing button style of the country filter
   (dark green active state, white bordered buttons, rounded corners).

   Scope: applies to ALL JFilters dropdown-type filters for consistency.
   To limit it to the region filter only, prefix every selector with
   #jfilters-filter-container-126-86 instead.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens – adjust here to match the site's exact colors
   -------------------------------------------------------------------------- */
.jfilters-filter-container {
    --lga-green: var(--gruen);        /* active/selected – same green as "Kenia" button */
    --lga-green-dark: #143d24;   /* hover on green elements */
    --lga-green-tint: #e9f1eb;   /* light green for hover/focus in the list */
    --lga-border: #c9c1b2;       /* neutral border, like the country buttons */
    --lga-text: #2b2b2b;
    --lga-muted: #6f6a60;
    --lga-radius: 3px;
}

/* --------------------------------------------------------------------------
   2. Toggle (closed dropdown, no selection)
      Looks like a proper select field: white, bordered, clear chevron.
   -------------------------------------------------------------------------- */
.jfilters-filter-dropdown-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    min-height: 2rem;                 /* comfortable touch target */
    padding: 0.25rem 0.9rem;
    background: #fff;
    border: 1px solid var(--lga-border);
    border-radius: var(--lga-radius);
    color: var(--lga-text);
    font-size: 1rem;                  /* >= 16px prevents iOS zoom-in on tap */
    line-height: 1.3;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.jfilters-filter-dropdown-toggle:hover {
    border-color: var(--lga-green);
}

/* Visible keyboard focus (the toggle is a div[tabindex], not a button) */
.jfilters-filter-dropdown-toggle:focus-visible {
    outline: 2px solid var(--lga-green);
    outline-offset: 2px;
}

.jfilters-filter-dropdown-toggle__text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.jfilters-filter-dropdown-toggle__label {
    min-height: auto;
}

/* Chevron: bigger, green, rotates when open */
.jfilters-filter-dropdown-toggle__icon {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.jfilters-filter-dropdown-toggle__icon .jfilters-chevron {
    width: 1.5em;
    height: 1.5em;
    color: var(--lga-green);
    transition: transform 0.2s ease;
}

.jfilters-filter-dropdown-toggle[aria-expanded="true"] {
    border-color: var(--lga-green);
    box-shadow: 0 0 0 1px var(--lga-green);
}

.jfilters-filter-dropdown-toggle[aria-expanded="true"]
.jfilters-filter-dropdown-toggle__icon .jfilters-chevron {
    transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   3. Active selection ("--withClear" modifier)
      The toggle becomes a green button/chip like the selected country,
      the clear "×" becomes a separate, clearly tappable button.
   -------------------------------------------------------------------------- */
.jfilters-filter-dropdown--withClear {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
}

/* Clear button (× is first in the DOM = left side, matching the country filter) */
.jfilters-filter-dropdown--withClear .jfilters-filter-dropdown__clear {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: 48px;                  /* touch target */
    background: #fff;
    border: 1px solid var(--lga-border);
    border-radius: var(--lga-radius);
    color: var(--lga-muted);
    font-size: 1.35rem;
    line-height: 1;
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease;
}

.jfilters-filter-dropdown--withClear .jfilters-filter-dropdown__clear:hover,
.jfilters-filter-dropdown--withClear .jfilters-filter-dropdown__clear:focus-visible {
    border-color: #a33;
    color: #a33;
    outline: none;
}

.jfilters-filter-dropdown--withClear .jfilters-filter-dropdown__clear:focus-visible {
    outline: 2px solid #a33;
    outline-offset: 2px;
}

/* Toggle in selected state: green button look */
.jfilters-filter-dropdown--withClear .jfilters-filter-dropdown-toggle {
    flex: 1 1 auto;
    background: var(--lga-green);
    border-color: var(--lga-green);
    color: #fff;
    font-weight: 400;
}

.jfilters-filter-dropdown--withClear .jfilters-filter-dropdown-toggle:hover {
    background: var(--lga-green-dark);
    border-color: var(--lga-green-dark);
}

.jfilters-filter-dropdown--withClear
.jfilters-filter-dropdown-toggle__icon .jfilters-chevron {
    color: #fff;
}

.jfilters-filter-dropdown--withClear .jfilters-filter-dropdown-toggle:focus-visible {
    outline: 2px solid var(--lga-green);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   4. Dropdown list (open state)
      Full width, scrollable, generous touch targets, selected item marked.
   -------------------------------------------------------------------------- */
.jfilters-filter-dropdown-container.dropdown-menu {
    width: 100%;
    max-height: 60vh;                 /* long region lists stay scrollable */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.25rem;
    border: 1px solid var(--lga-border);
    border-radius: var(--lga-radius);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

.jfilters-filter-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.jfilters-filter-dropdown__item .dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 44px;                 /* WCAG 2.2 target size */
    padding: 0.55rem 0.9rem;
    border-radius: 4px;
    color: var(--lga-text);
    white-space: normal;              /* allow wrapping of long region names */
    transition: background-color 0.12s ease;
}

.jfilters-filter-dropdown__item .dropdown-item:hover,
.jfilters-filter-dropdown__item .dropdown-item:focus-visible {
    background: var(--lga-green-tint);
    color: var(--lga-text);
    outline: none;
}

.jfilters-filter-dropdown__item .dropdown-item:focus-visible {
    box-shadow: inset 0 0 0 2px var(--lga-green);
}

/* Counter "(7)" – visually secondary */
.jfilters-item__counter {
    flex-shrink: 0;
    font-size: 0.875rem;
    color: var(--lga-muted);
}

/* Currently selected option: green, with checkmark */
.jfilters-filter-dropdown__item .dropdown-item[aria-selected="true"] {
    background: var(--lga-green);
    color: #fff;
    font-weight: 600;
}

.jfilters-filter-dropdown__item .dropdown-item[aria-selected="true"] .jfilters-item__counter {
    color: rgba(255, 255, 255, 0.8);
}

.jfilters-filter-dropdown__item .dropdown-item[aria-selected="true"]
.jfilters-item__label-text::before {
    content: "\2713\00a0";            /* checkmark + non-breaking space */
}
#search-sorting .uk-margin-medium-bottom {
    margin-bottom: 0 !important;
}
.uk-light #idee a {
    color: var(--braun) !important;
}
/* --------------------------------------------------------------------------
   5. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .jfilters-filter-dropdown-toggle,
    .jfilters-filter-dropdown-toggle__icon .jfilters-chevron,
    .jfilters-filter-dropdown__item .dropdown-item,
    .jfilters-filter-dropdown--withClear .jfilters-filter-dropdown__clear {
        transition: none;
    }
}

/* ==========================================================================
   JFilters-Suche: FAQ-Gruppen & Accordion (lga.faq-group / lga.faq-item)
   ========================================================================== */
.lga-results-group {
    margin: 40px 0 8px;
}
.lga-results-group:first-child {
    margin-top: 0;
}

/* Nur für Screenreader (Überschriften-Hierarchie der Länder-FAQ-Gruppe) */
.lga-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Gruppen-Heading: Icon + Kategorietitel */
.lga-faq-group-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
    font-size: 20px;
    font-weight: 700;
    color: var(--braun);
}

/* Icon — geteilt zwischen Gruppen-Heading und Länder-FAQ-Zeilen. Die
   Bilddateien bringen ihre eigene Gestaltung mit und werden nur in der
   Größe begrenzt (kein Rahmen, kein Innenabstand). */
.lga-faq-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: none;
}
.lga-faq-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.lga-faq-group-heading .lga-faq-icon {
    width: 56px;
    height: 56px;
}

.lga-faq-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
/* Flex mit Umbruch: Titel + Merklisten-Herz in einer Zeile, die
   Accordion-Antwort (width: 100%) bricht darunter um. Titel und Antwort
   bleiben direkte Kinder des <li> (UIkit-Toggle-Selektor). */
.lga-faq-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 12px;
    background: #fff;
    border: 1px solid #e5ddcc;
    border-radius: 6px;
}
.lga-faq-item .uk-accordion-title.lga-faq-q {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    padding: 14px 18px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    color: #2b2218;
}
/* Merklisten-Herz: Glass-Button-Optik an weißen Zeilen angepasst */
.lga-faq-fav.lga-uk-glass {
    flex: none;
    margin-right: 18px;
    background: #fff;
    border-color: #c8901c;
    color: #3f200e;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.lga-faq-fav.lga-uk-glass:hover {
    background: #f7efe0;
}
.lga-faq-item .uk-accordion-content {
    width: 100%;
}
.lga-faq-q-text {
    min-width: 0;
}
.lga-faq-eyebrow {
    display: block;
    margin-bottom: 2px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #c8901c;
}
.lga-faq-chevron {
    margin-left: auto;
    color: #7a6e60;
}
.lga-faq-chevron svg {
    display: block;
    transition: transform 0.2s ease;
}
.lga-faq-item.uk-open .lga-faq-chevron svg {
    transform: rotate(180deg);
}
.lga-faq-answer {
    padding: 0 18px 16px;
}
/* Länder FAQ: Antwort unter dem Fragetext beginnen lassen (Icon-Spalte) */
.lga-faq-item--meta .lga-faq-answer {
    padding-left: calc(18px + 44px + 14px);
}
.lga-faq-answer > div > :last-child {
    margin-bottom: 0;
}
@media (max-width: 639px) {
    .lga-faq-item--meta .lga-faq-answer {
        padding-left: 18px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .lga-faq-chevron svg {
        transition: none;
    }
}

/* ==========================================================================
   Fokus-Indikator (WCAG 2.4.7 Focus Visible, 1.4.11 Non-text Contrast)
   --------------------------------------------------------------------------
   Deliberately the LAST block in this file: several component rules above
   suppress the outline, and only source order lets a same-specificity rule
   win them back.

   Colour is --lga-focus-color (#d30017): 5.5:1 against white and 3.8:1
   against black, so it clears the required 3:1 on light and dark surfaces
   alike. Mid-tone photos are the exception — those elements get a white
   backing ring below.

   :focus-visible (not :focus) keeps the ring off pointer clicks.
   ========================================================================== */
:focus-visible {
    outline: var(--lga-focus-width) dashed var(--lga-focus-color);
    outline-offset: var(--lga-focus-offset);
}

/* Interactive elements layered on photos: no single colour reaches 3:1 against
   an arbitrary image, so put white behind the dashes. The shadow spread equals
   width + offset, filling exactly the band the outline occupies. */
.lga-uk-eyebrow:focus-visible,
.lga-uk-glass:focus-visible,
.lga-saf-eyebrow-link:focus-visible,
.lga-saf-glass:focus-visible {
    box-shadow: 0 0 0 calc(var(--lga-focus-width) + var(--lga-focus-offset)) #fff;
}

/* Restore the indicator where it was switched off without a replacement.
   Same specificity as the suppressing rules — wins by source order. */
.top-filter .jfilters-filter-range_inputs__input:focus-visible {
    outline: var(--lga-focus-width) dashed var(--lga-focus-color);
    outline-offset: var(--lga-focus-offset);
}
.jfilters-filter-range-sliders__knob:focus-visible {
    outline: var(--lga-focus-width) dashed var(--lga-focus-color);
    outline-offset: var(--lga-focus-offset);
}