/* =====================================================================
   Baltic Ember — Theme-Override
   Lädt NACH custom.css und überschreibt nur die Markenfarben (Nordic
   premium: Charcoal/Graphite + warmes Holz + Amber). Das Original-
   Template bleibt unangetastet -> Updates bleiben nachvollziehbar.
   ===================================================================== */

:root {
   /* Akzent / Amber (ersetzt das Orange des Templates) */
   --main-color: #C0883C;
   --dark-main-color: #E0B36A;   /* helleres Amber für dunkle Flächen */
   --accent-color: #C0883C;

   /* Basis dunkel: Charcoal / Graphite (ersetzt das Navy) */
   --primary-color: #1C2024;

   /* Sekundär: dezentes Deep-Forest-Green statt Lime */
   --secondary-color: #36443B;

   /* Text */
   --text-color: #2C3137;
}

/* ---------------------------------------------------------------------
   Hero: bildschirmfüllend (volle Viewport-Höhe, randlos)
   --------------------------------------------------------------------- */
.hero.hero-slider,
.hero.hero-slider .hero-slider-layout,
.hero.hero-slider .hero-swiper,
.hero.hero-slider .hero-slide,
.hero.hero-slider .hero-slider-image,
.hero.hero-slider .hero-slider-image img {
   border-radius: 0 !important;
   margin: 0 !important;
}

.hero.hero-slider .hero-slider-layout .hero-slide {
   min-height: 100vh;
   align-items: center;        /* Inhalt vertikal mittig statt unten */
   padding-bottom: 0;
}

/* leichter Abdunkler über dem Hero-Bild für bessere Textlesbarkeit */
.hero.hero-slider .hero-slider-layout .hero-slide .hero-slider-image::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(20,24,26,.45) 0%, rgba(20,24,26,.15) 40%, rgba(20,24,26,.55) 100%);
   z-index: 1;
}

/* Hero-Eyebrow gut lesbar: dunkler Chip + helleres Amber */
.hero.hero-slider .hero-content .sisf-subtitle {
   display: inline-block;
   background: rgba(20, 24, 26, .55);
   -webkit-backdrop-filter: blur(4px);
   backdrop-filter: blur(4px);
   padding: 7px 18px;
   border-radius: 100px;
   color: var(--dark-main-color);
   text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
}

/* Headline & Buttons-Bereich mit dezentem Schatten für Tiefe/Kontrast */
.hero.hero-slider .hero-content h1 {
   text-shadow: 0 2px 18px rgba(0, 0, 0, .45);
}

/* ---------------------------------------------------------------------
   Designphilosophie-Sektion: echtes Foto statt Platzhalter + Text weiß
   --------------------------------------------------------------------- */
.design-philosophy-section {
   background-image:
      linear-gradient(rgba(20, 24, 26, .60), rgba(20, 24, 26, .60)),
      url("../images/premium-sauna-aufguss-loeyly.jpg") !important;
   background-position: center center !important;
   background-size: cover !important;
}

.design-philosophy-section .sisf-m-title {
   color: #fff;
}

.design-philosophy-section .btn-default {
   color: #fff;
   border: 1px solid rgba(255, 255, 255, .6) !important;
}

.design-philosophy-section .btn-default:hover {
   color: var(--primary-color);
   background-color: #fff;
   border-color: #fff !important;
}

/* ---------------------------------------------------------------------
   Weitere Sektions-Hintergründe: echte Fotos statt Platzhalter
   --------------------------------------------------------------------- */
/* Einsatzbereiche (#b2b) – dunkler Overlay, weiße Karten/Texte darüber */
.adventure-spots-section {
   background-image:
      linear-gradient(rgba(20, 24, 26, .72), rgba(20, 24, 26, .72)),
      url("../images/outdoor-hot-tub-sonnenuntergang-natur.jpg") !important;
   background-position: center center !important;
   background-size: cover !important;
}

/* "Warum Baltic Ember" – dunkler Overlay, weißer Text */
.instant-escape-section {
   background-image:
      linear-gradient(rgba(20, 24, 26, .72), rgba(20, 24, 26, .72)),
      url("../images/outdoor-sauna-innenraum-dunkles-holz.jpg") !important;
   background-position: center center !important;
   background-size: cover !important;
}

/* Anfrage-Sektion (#anfrage) – Foto füllt die ganze Sektion (kein amber Leerblock) */
.get-in-touch-bg {
   background-image:
      linear-gradient(rgba(20, 24, 26, .35), rgba(20, 24, 26, .35)),
      url("../images/premium-sauna-innenraum-thermoholz-naturstein.jpg") !important;
   background-size: cover !important;
   background-position: center center !important;
   background-repeat: no-repeat !important;
}

/* Form-Panel: Platzhalter-Pattern raus, dunkle Fläche für lesbaren weißen Text */
.get-in-touch-section .sisf-sis-getin-touch {
   background-image: none !important;
   background-color: rgba(20, 24, 26, .82);
}

/* ---------------------------------------------------------------------
   Feature-Kacheln auf gleiche Höhe (Inhalt vertikal zentriert)
   --------------------------------------------------------------------- */
.features-section .sisf-sis-icon-with-text--hover {
   height: 100%;
}

.features-section .sisf-sis-icon-with-text--hover .sisf-e-inner {
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
}

/* ---------------------------------------------------------------------
   Produktkarten (Slider) auf gleiche Höhe, Meta-Zeile unten bündig
   --------------------------------------------------------------------- */
.property-list-section .swiper-wrapper {
   align-items: stretch !important;
}

.property-list-section .swiper-slide {
   height: auto;
}

.property-list-section .swiper-slide .sisf-e-inner {
   height: 100%;
   display: flex;
   flex-direction: column;
}

.property-list-section .swiper-slide .sisf-e-content {
   display: flex;
   flex-direction: column;
   flex: 1 1 auto;
}

.property-list-section .swiper-slide .sisf-content-detail {
   margin-top: auto;
}

/* Produkt-Slider: manuelle Navigation (Pfeile + Pagination) */
.property-list-section .swiper {
   padding-bottom: 52px;
}

.property-list-section .swiper-button-prev,
.property-list-section .swiper-button-next {
   color: var(--main-color);
   top: 150px;
   margin-top: 0;
   transform: translateY(-50%);
}

.property-list-section .swiper-pagination {
   bottom: 0;
}

.property-list-section .swiper-pagination-bullet-active {
   background: var(--main-color);
}

/* Alle Produktbilder einheitlich zuschneiden (gleiches Format) */
.property-list-section .sisf-property-image .sisf-e-image figure {
   margin: 0;
   overflow: hidden;
}

.property-list-section .sisf-property-image .sisf-e-image figure img {
   width: 100%;
   height: 300px;
   object-fit: cover;
   display: block;
}

/* ---------------------------------------------------------------------
   "Qualität aus Estland": zwei Service-Bilder einheitlich + Kacheln gleich hoch
   --------------------------------------------------------------------- */
.why-choose-us-section .sisf-service-image figure,
.why-choose-us-section .sisf-service--image figure {
   margin: 0;
   overflow: hidden;
   box-shadow: 0 18px 40px rgba(20, 24, 26, .22);
}

/* leichte Schräglage wie im Original (dynamische, überlappende Anordnung) */
.why-choose-us-section .sisf-service-image figure {
   transform: rotate(-5deg);
}

.why-choose-us-section .sisf-service--image figure {
   transform: rotate(4deg);
}

.why-choose-us-section .sisf-service-image figure img,
.why-choose-us-section .sisf-service--image figure img {
   width: 100%;
   aspect-ratio: 3 / 4;
   height: auto;
   object-fit: cover;
   display: block;
}

/* Feature-Icons (Font Awesome) in der Qualität-Sektion */
.why-choose-us-section .be-feature-icon {
   font-size: 42px;
   line-height: 1;
   color: var(--main-color);
}

.why-choose-us-section .sisf-sis-icon-image--on-hover .be-feature-icon {
   color: #fff;
}

.why-choose-us-section .sisf-sis-icon-with-text--hover {
   height: 100%;
}

.why-choose-us-section .sisf-sis-icon-with-text--hover .sisf-e-inner {
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
}

/* ---------------------------------------------------------------------
   Galerie: alle Bilder einheitlich (gleiches Format, sauber zugeschnitten)
   --------------------------------------------------------------------- */
.gallery-slider-section .gallery-item figure {
   margin: 0;
   overflow: hidden;
}

.gallery-slider-section .gallery-item figure img,
.gallery-slider-section .swiper-slide img,
.gallery-slider-section .page-gallery-item img {
   width: 100% !important;
   height: 360px !important;
   object-fit: cover !important;
   display: block;
}

@media (max-width: 767px) {
   .gallery-slider-section .gallery-item figure img,
   .gallery-slider-section .swiper-slide img,
   .gallery-slider-section .page-gallery-item img {
      height: 280px !important;
   }
}

/* Footer-Claim: kleiner, damit "Nordic Wellness." / "Mit Substanz gebaut."
   je auf EINER Zeile stehen (2 Zeilen statt 4) */
@media (min-width: 992px) {
   .footer-copyright .footer-bottom-text h1 {
      font-size: 44px;
   }
}

/* Sehr dunkle Flächen (Footer/Texture) noch eine Spur wärmer-neutral */
.bg-texture-dark,
.sisf-page-footer-middle-area.bg-texture-dark {
   background-color: #14181A;
}

/* "colored" Akzentwörter in Headlines -> Amber */
.sisf-e-colored {
   color: var(--main-color);
}

/* Einheitlich eckig + randlos: Rundung UND seitliche Margins der Boxen entfernen
   (Sektionen gehen full-bleed bis zum Bildschirmrand wie der Hero) */
.br-radius {
   border-radius: 0 !important;
   margin-left: 0 !important;
   margin-right: 0 !important;
}

/* ---------------------------------------------------------------------
   Sprachumschalter (DE / EN / SV)
   --------------------------------------------------------------------- */
.be-lang-switch {
   display: flex;
   align-items: center;
   gap: 6px;
   font-weight: 600;
   font-size: 14px;
   letter-spacing: .04em;
}

.be-lang {
   color: inherit;
   text-decoration: none;
   opacity: .6;
   transition: opacity .25s ease, color .25s ease;
}

.be-lang:hover,
.be-lang.active {
   opacity: 1;
   color: var(--main-color);
}

.be-lang-sep {
   opacity: .35;
}

/* ---------------------------------------------------------------------
   Datenschutz-Zustimmung im Anfrageformular
   --------------------------------------------------------------------- */
.be-consent {
   display: flex;
   align-items: flex-start;
   gap: 10px;
}

.be-consent input[type="checkbox"] {
   margin-top: 4px;
   flex: 0 0 auto;
   width: 18px;
   height: 18px;
   accent-color: var(--main-color);
}

.be-consent label {
   font-size: 13px;
   line-height: 1.5;
   color: var(--white-color);
   margin: 0;
}

.be-consent label a {
   color: var(--main-color);
   text-decoration: underline;
}

/* Hero mobil: Kennzahlen ausblenden (entrümpelt den Hero) */
@media (max-width: 767px) {
   .hero.hero-slider .hero-slide .col-md-5 {
      display: none;
   }
}