html {
  scroll-behavior: smooth;
}

/* ===== Seite fix links und rechts halten ===== */
html, body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}


/* Scroll to Top -Icon */
.scrollToTop-icon {
  background-image: url(/images/Template/go-to-top.svg);
  background-size: 25px 25px;
}


/* Neu */


.blog-item.tck-article::after {
  border-bottom: 1px solid #a6a6a6;
  padding-bottom: 20px;
  margin-bottom: 20px;
}

.article-info dd {
  font-size: 0.8em;
  line-height: 1.4em;
  color: #a6a6a6;
}

/* ===== Fixer Header ===== */
#wrapper-top-menu {
  position: fixed;
  top: 0;
  left: 0; right: 0;
  width: 100%;
  z-index: 9999;
  transition: none;                /* wird erst nach dem ersten Scroll aktiviert */
  will-change: top;
}
#wrapper-top-menu.scrolled {
  transition: top 0.45s ease-in-out;
}

/* Versteckt (runter scrollen) – komplett raus aus dem Viewport */
#wrapper-top-menu:not(.show-top) {
  top: -120px; /* etwas größer als Headerhöhe, damit sicher weg */
}
/* Sichtbar (hoch scrollen / initial) */
#wrapper-top-menu.show-top {
  top: 0;
}

/* Spacer (wird per JS direkt nach dem Header eingefügt) */
#header-spacer { height: 0; }

/* ===== Logo-Größenlogik =====
   Du kannst die Werte hier anpassen: */
:root{
  --logo-max: 120px; /* Höhe ganz oben (at-top) */
  --logo-min: 32px; /* Höhe im Scrollzustand */
}

/* Wir versuchen das Logo über mehrere sinnvolle Selektoren zu treffen:
   1) Modulposition 'Main-Logo' / 'main-logo' (Template Creator CK)
   2) Eine optionale Modul-Klassensuffix 'main-logo' (empfohlen)
   -> Du brauchst NICHT alle – einer reicht, aber alle sind aktiv. */

/* Default: kompakt (Scrollzustand) */
#wrapper-top-menu [data-position="Main-Logo"] img,
#wrapper-top-menu [data-position="main-logo"] img,
#wrapper-top-menu .main-logo img,
#wrapper-top-menu .module.main-logo img {
  height: var(--logo-min);
  width: auto;
  max-width: none;
  transition:  height .45s cubic-bezier(0.25, 0.1, 0.25, 1);
  display: block;     /* verhindert Baseline-Lücken */
}

/* Ganz oben (body.at-top): groß */
body.at-top #wrapper-top-menu [data-position="Main-Logo"] img,
body.at-top #wrapper-top-menu [data-position="main-logo"] img,
body.at-top #wrapper-top-menu .main-logo img,
body.at-top #wrapper-top-menu .module.main-logo img {
  height: var(--logo-max);
}

/* Falls das IMG feste HTML-Attribute hat (width="200px" height="NaN"):
   Das hier setzt sich durch. */
#wrapper-top-menu [data-position="Main-Logo"] img,
#wrapper-top-menu [data-position="main-logo"] img,
#wrapper-top-menu .main-logo img,
#wrapper-top-menu .module.main-logo img {
  max-height: none !important;
  height: auto; /* wird direkt danach wieder von den Regeln oben überschrieben */
}
body.at-top #wrapper-top-menu [data-position="Main-Logo"] img,
body.at-top #wrapper-top-menu [data-position="main-logo"] img,
body.at-top #wrapper-top-menu .main-logo img,
body.at-top #wrapper-top-menu .module.main-logo img {
  height: var(--logo-max) !important;
}
body:not(.at-top) #wrapper-top-menu [data-position="Main-Logo"] img,
body:not(.at-top) #wrapper-top-menu [data-position="main-logo"] img,
body:not(.at-top) #wrapper-top-menu .main-logo img,
body:not(.at-top) #wrapper-top-menu .module.main-logo img {
  height: var(--logo-min) !important;
}

/* ===== (Optional) Dein bestehendes Top-Menü-Layout – wie gehabt ===== */

/* Alle Module in der Position mainmeu-top nebeneinander darstellen */
[data-position="mainmeu-top"] {
  display: flex;
  justify-content: center; /* <-- Zentrierung horizontal */
  align-items: center;
  gap: 15px; /* Abstand zwischen den Modulen */
}

/* Module selbst ohne zusätzliche Block-Umbrüche */
[data-position="mainmeu-top"] .tck-module {
  margin: 0;
}

/* Dropdown-Optik wie Menüpunkt */
[data-position="mainmeu-top"] select {
  padding: 6px 12px;
  font-family: inherit;
  font-weight: 400;
  border: none;
  background: transparent;
  color: inherit;
  height: 40px; /* an Menüleiste anpassen */
  cursor: pointer;
}

/* Hover-/Fokus-Effekt passend zum Menü */
#mainmeu-top select:focus,
#mainmeu-top select:hover {
  outline: none;
  background-color: rgba(0, 0, 0, 0.06);
  border-radius: 4px;
}

[data-position="mainmeu-top"] label {
  text-transform: uppercase;  /* Großbuchstaben */
  color: #a6a6a6;              /* Schriftfarbe */
  margin-right: 5px;           /* Abstand zum Dropdown */
}





/* ==========================================================
   MOBILE HAEDER
   ========================================================== */


/* ==========================================================
   MOBILE HEADER + CTA
   ========================================================== */

/* Variablen */
:root{
  --m-offset: 0px;      /* wird per JS gesetzt: CTA-Höhe (TOP), sonst 0 */
  --m-logo-max: 100px;  /* Logo-Höhe ganz oben */
  --m-logo-min: 40px;   /* Logo-Höhe im Scrollzustand */
}

/* ========== CTA-Bar ganz oben ========== */
#wrapper-Super-Top-call-to-Action-Mobile{
  position: fixed;
  top: 0; left: 0; right: 0;
  /*z-index: 10020;  /* über dem Mobile-Header */
  transition: transform .25s ease, opacity .25s ease;
  will-change: transform, opacity;
}

/* CTA-Inhalt: keine Zufallsmargins */
#wrapper-Super-Top-call-to-Action-Mobile p{
  margin: 0;
}

/* Sobald NICHT ganz oben: CTA ausblenden */
body.m-topbar-hidden #wrapper-Super-Top-call-to-Action-Mobile{
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

/* ========== Mobiler Header (unter CTA “ankleben”) ========== */
#wrapper-Super-Top-Menu{
  position: fixed;
  top: var(--m-offset);  /* <- Abstand = CTA-Höhe im TOP-Zustand */
  left: 0; right: 0;
  width: 100%;
  z-index: 10010;        /* unter CTA */
  transition: none;      /* erst nach Scroll animieren */
  will-change: top;
}

/* Transition aktivieren, sobald gescrolled wurde */
#wrapper-Super-Top-Menu.m-scrolled{
  transition: top .28s ease-in-out;
}

/* Runterscrollen -> Header ausblenden (aus dem Viewport fahren) */
#wrapper-Super-Top-Menu:not(.m-show-top){
  top: calc(var(--m-offset) - 120px); /* sicher raus */
}

/* Sichtbar (hochscrollen / initial) */
#wrapper-Super-Top-Menu.m-show-top{
  top: var(--m-offset);
}

/* Optionaler Spacer (falls genutzt) */
#header-spacer-mobile{ height: 0; }

/* ========== MOBILES LOGO – skalieren (erzwingt Greifen) ========== */
/* Empfohlen: Modul-Klassensuffix im Logo-Modul: " mobile-logo" (mit Leerzeichen) */
#wrapper-Super-Top-Menu .mobile-logo img,
#wrapper-Super-Top-Menu [data-position="mobile-Logo"] img,
#wrapper-Super-Top-Menu [data-position="mobile-logo"] img{
  height: var(--m-logo-min) !important;   /* klein im Scrollzustand */
  width: auto !important;
  max-height: none !important;
  display: block;
  transition: height .45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ganz oben -> groß */
body.m-at-top #wrapper-Super-Top-Menu .mobile-logo img,
body.m-at-top #wrapper-Super-Top-Menu [data-position="mobile-Logo"] img,
body.m-at-top #wrapper-Super-Top-Menu [data-position="mobile-logo"] img{
  height: var(--m-logo-max) !important;
}

/* P-/Wrapper-Abstände im Logo-Modul neutralisieren (verhindert Restabstände) */
#wrapper-Super-Top-Menu .mobile-logo p,
#wrapper-Super-Top-Menu [data-position="mobile-Logo"] p,
#wrapper-Super-Top-Menu [data-position="mobile-logo"] p{
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}
















/*---- KI-FREI -----*/
/* ==========================================================
   KI-FREI-BADGE  –  rechts ausgerichtet, verschwindet komplett
   ========================================================== */

/* Container des Moduls (Klassensuffix:  ki-badge) */
#wrapper-top-menu .ki-badge {
  position: absolute;
right: -3em;
  top: -1em;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  overflow: hidden;                      /* verhindert Restabstände */
  height: 0;                             /* Start: keine sichtbare Höhe */
  opacity: 0;
  transform: scale(0.85);
  transform-origin: top right;
  transition:
    height 0.45s ease,
    opacity 0.45s ease,
    transform 0.55s cubic-bezier(0.4, 0.0, 0.2, 1);
  pointer-events: none;                  /* keine Klicks im unsichtbaren Zustand */
  z-index: 10000;                        /* über Menühintergrund, unter Menü-Buttons */
}

/* Bild innerhalb des Moduls */
#wrapper-top-menu .ki-badge img {
  height: 130px !important;              /* volle Höhe im sichtbaren Zustand */
  width: auto !important;
  display: block;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* GANZ OBEN: sichtbarer Zustand (body.at-top kommt aus deinem JS) */
body.at-top #wrapper-top-menu .ki-badge {
  height: 130px;                         /* gleiche Höhe wie das Bild */
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* Optional: beim Ausblenden leicht schrumpfen */
body:not(.at-top) #wrapper-top-menu .ki-badge {
  transform: scale(0.85);
}








/*--- SCHRIFTEN ---*/


@font-face {
    font-family: 'Montserrat';
    src: url('../myfonts/Montserrat-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../myfonts/Montserrat-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../myfonts/Montserrat-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('../myfonts/Montserrat-Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Lora';
    src: url('../myfonts/Lora-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Amalfi Coast';
    src: url('../myfonts/Amalfi Coast.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'AlexBrush-Regular';
    src: url('../myfonts/AlexBrush-Regular.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
}


/* Anwendung der Schriftarten */

/*h1 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900; /* Black */
/*}*/


/*h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900; /* Black */
/*}*/

/*h3 {
    font-family: 'Lora', serif;
    font-weight: 400;
}*/


h4 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 200; /* Regular */
}

h5 {
    font-family: 'Times New Roman', sans-serif;
    font-weight: 200; 
}

/*h5 {
    font-family: 'AlexBrush-Regular', sans-serif;
    font-weight: 300; 
}*/



h6 {
    font-family: 'Amalfi Coast', sans-serif;
    font-weight: 100; /* Regular */
}

body {
    font-family: 'Montserrat', sans-serif;
    font-weight: 200; /* ExtraLight */
}




/* ==========================================================
   GLEICHE HÖHE IN EINER ROW
   ========================================================== */

/* ==========================================================
   SP Page Builder – CTA-Row (3 Spalten)
   - Spalten gleich hoch
   - Bilder oben bündig (via JS gleicht Überschriftshöhe an)
   - Buttons immer ganz unten
   - Einheitliche Abstände mit row-gap
   ========================================================== */

/* ==========================================================
   SP Page Builder – CTA-Row (3 Spalten nebeneinander)
   Aktiv nur auf größeren Bildschirmen!
   ========================================================== */

/* Ab 992 px (= Bootstrap Large / Desktop) greifen die Flex-Regeln */
@media (min-width: 992px) {

  /* --- 1. Grundstruktur: Row/Columns als Flex-Stacks --- */
  .cta-row {
    display: flex !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
  }

  .cta-row > .sppb-row-column {
    display: flex !important;
  }

  .cta-row > .sppb-row-column > .sppb-column {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  .cta-row .sppb-column-addons {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 100% !important;
    row-gap: 16px;                 /* einheitliche vertikale Abstände */
  }

  /* --- 2. Addons neutralisieren (keine zufälligen Margins) --- */
  .cta-row .sppb-column-addons > .sppb-addon-wrapper {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* --- 3. Bild: bündig unter dem (per JS angeglichenen) Headline-Block --- */
  .cta-row .sppb-column-addons > .sppb-addon-wrapper.addon-root-image {
    margin-top: 0 !important;
    align-self: stretch !important;
  }

  .cta-row .sppb-addon-single-image-container {
    display: flex !important;
    justify-content: center !important;
    align-items: flex-end !important;
  }

  .cta-row .sppb-addon-single-image-container img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
  }

  /* --- 4. Buttons immer am Spaltenboden --- */
  .cta-row .sppb-column-addons > .sppb-addon-wrapper.addon-root-button {
    margin-top: auto !important;
  }

  /* Fallback, falls der Button kein addon-root-button ist */
  .cta-row .sppb-column-addons > .sppb-addon-wrapper:has(.sppb-button-wrapper) {
    margin-top: auto !important;
  }

  /* --- 5. Optionale Aufräumregel für Abstände --- */
  .cta-row .sppb-addon-text-block p:last-child,
  .cta-row .sppb-addon-text-block h1:last-child,
  .cta-row .sppb-addon-text-block h2:last-child,
  .cta-row .sppb-addon-text-block h3:last-child {
    margin-bottom: 0 !important;
  }
}

/* Unter 992 px (Tablet Portrait & Mobile):
   kein Equal-Height-/Button-unten-Layout → natürliche Stapelung */
@media (max-width: 991.98px) {
  .cta-row,
  .cta-row .sppb-row-column,
  .cta-row .sppb-column,
  .cta-row .sppb-column-addons {
    display: block !important;
  }
}

/*Abstand OBEN / UNTEN mit und ohne Pagebiulder*/
#sp-page-builder {
 margin-top: -200px;
  margin-bottom: -200px;
}

/*Bootstrap ausstellen*/
html {
  font-size: 100% !important; /* oder z. B. 16px !important; */
}

/* Links – Bootstrap-Farben ausknipsen, Template-Farben nutzen */
.nav > li > a:focus, .nav > li > a:hover {
  background-color: transparent !important;
}

a:active, a:hover {
  outline: none !important;
}

.nav > li > a {
margin-right: 10px !important;
  padding-right: 10px !important;
  padding-left: 10px !important;
  padding-bottom: 0px !important;
  padding-top: 0px !important;
}


/* 
-------------------------------------------
-------------------------------------------
bsdimmo ANPASSUNGEN
-------------------------------------------
-------------------------------------------
*/

/*GRIT IMMOANSICHT*/

/* PREIS RECHTS OBEN */

.cat-price {
  float: left;
  padding: 10px;
  color: #FFF;
  background: #16421f none repeat scroll 0 0;
}


.cs-style-3 figure:hover .property-price {
  transform: translateY(-200px);
}

/* INFO KAUFEN MIETER ----- */

/*IMMOBILIENGRID*/
.property-mask h4, .feat-thumb h4 {
      background: rgba(22, 66, 31, 0.9)!important;
  color: #fff !important;
  font-size: 1em !important;
  font-family: Times New Roman, Serif !important;
  padding: 10px 20px !important;
  bottom: 0 !important;
  margin-bottom: 0px !important;
}


figure {
  margin: 0 0 0;
}


.cs-style-3 figure:hover h4 {
  transform: translateX(-440px);
}

/* BSDimmo Grid: Bilder ohne Verzerrung */
.grid figure {
  position: relative;         /* sicherstellen */
  overflow: hidden;           /* Beschnitt sauber */
}

.grid figure img {
  position: absolute !important;
  inset: 0 !important;        /* top/right/bottom/left = 0 */
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  left: 0 !important;
  top: 0 !important;
  object-fit: cover;          /* KEY: kein Verziehen */
  object-position: center;    /* zentriert */
}

.grid figure {
  height: 300px;
}

/* TEXT UNTER BILD */
.property-desc h4 {
  font-family: Times New Roman !important;
  font-size: 1.2em !important;
  line-height: 1.3em !important;
}




/*
---------------------------------------
---------------------------------------
Immobilienmodul
---------------------------------------
---------------------------------------
*/


.bsdfeatured_image h4 {
      background: rgba(22, 66, 31, 0.9)!important;
  color: #fff !important;
  font-size: 1em !important;
  font-family: Times New Roman, Serif !important;
  padding: 10px 20px !important;
  bottom: 0 !important;
  margin-bottom: 0px !important;
}



.bsdfeatured_container:hover .bsdfeatured_image h4 {
  transform: translateX(-440px)!important;
  transition: transform 0.4s ease 0s !important;
}



/*Block unter BILD*/
.bsdfeatured_data {
  height: auto;
  padding: 20px;
  padding-bottom: 20px;
  background: #F4F1EA;
  margin-top: 15px;
}

.slick-prev::before, .slick-next::before {
  color: rgb(22, 66, 31);
}


/* Eckdaten: kein Tabellen-Look, natürlicher Textfluss */
.bsdfeatured_data .row {
  display: flex;
  align-items: baseline;
  gap: .9rem;                 /* DAS ist dein „Leerzeichen“ */
}

.bsdfeatured_data .row > .name {
  flex: 0 0 auto;             /* Label nur so breit wie nötig */
  white-space: nowrap;
  font-weight: 300;           /* optional */
    opacity: .75;

}

.bsdfeatured_data .row > .value {
  flex: 1 1 auto;             /* Wert darf „fließen“ */
  text-align: left;           /* KEIN Tabellen-Look */
  white-space: nowrap;        /* optional */
    font-weight: 500;
}



/*Bildhöhe*/
.bsdfeatured_image {
  height: 300px !important;
}


/*Immobilienansicht EINZELN*/

.value {
  font-weight: 500;
}

input, optgroup, select, textarea {
  width: 100%;
}

label {
  font-weight: normal;
}


/* BSDimmo Detailansicht: H1 wie SP Page Builder Titel behandeln */
/* BSDimmo Detail: Objekt-Titel (H1) wie dein H2 / sppb-addon-title aussehen lassen */
body.com_bsdimmo.view-immo h1 {
  font-size: 1.8rem !important;      /* entspricht optisch eher H2 */
  font-weight: 500 !important;
  line-height: 1.2 !important;
  text-align: center !important;       /* oder center, wie du willst */
  margin: 0 0 1.2rem 0 !important;
  border-bottom: 1px solid #c1a866!important;
}

.fotorama__arr, .fotorama__fullscreen-icon, .fotorama__video-close, .fotorama__video-play {

  padding: 10px!important;
}



.fotorama {
  background: #F4F1EA;
  padding: 20px;
}

/* ==========================================================
  Referenzen
   ========================================================== */




/* ========================================= BSDImmo – Referenzen Labels (nur Referenzseite) Menüklasse: is-referenzen ========================================= */ /* Original "Kaufen / Mieten" wirklich ausblenden */

body.is-referenzen figure.pimage > h4 {
  color: transparent !important; /* Text unsichtbar */ text-shadow: none !important;
} /* Falls irgendwo ein ::before gesetzt ist: weg damit */ body.is-referenzen figure.pimage > h4::before {
  content: none !important;
}
body.is-referenzen figure.pimage > h4::after {
  position: absolute;
  left: 20px;
  top: 10px;
  color: #fff;
} /* Kauf-Referenz → verkauft (Kaufpreis vorhanden) */ body.is-referenzen figure.pimage:has(.property-price .name) > h4::after {
  content: "Referenz · verkauft";
} /* Miet-Referenz → vermietet (kein Kaufpreis-Label) */ body.is-referenzen figure.pimage:not(:has(.property-price .name)) > h4::after {
  content: "Referenz · vermietet";
} /* Preise auf Referenzseite ausblenden */ .is-referenzen .property-price {
  display: none !important;
}


/* ==========================================================
   BSDImmo: Filterleiste ANPASSEN
   ========================================================== */

/* BSDImmo / Joomla Searchtools: Sortierung + Limit nebeneinander, rechts */
#bsdimmo-overview-filter .btn-toolbar,
#bsdimmo-overview-filter .ordering-select{
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: .6rem !important;
}

/* diese Dinger dürfen NICHT 100% breit sein */
#bsdimmo-overview-filter .js-stools-field-list{
  display: inline-flex !important;
  width: auto !important;
  margin: 0 !important;
}

/* Selects: nicht auf volle Breite ziehen */
#bsdimmo-overview-filter select.form-select{
  width: auto !important;
  max-width: 100% !important;
}

/* optional: ein bisschen kompakter */
#bsdimmo-overview-filter #list_limit{
  min-width: 90px;
}
#bsdimmo-overview-filter #list_fullordering{
  min-width: 240px;
}

/* ==========================================================
   Search-Modul
   ========================================================== */



.bsdsearchmod-main {
  text-align: right;
}



/* ==========================================================
   ERROR PAGE – NUR innerhalb .tck-errorpage
   ========================================================== */

.tck-errorpage {
  margin-top: 120px;
  padding: 0 16px;               /* mobile Luft */
  margin-bottom: 120px;
}

.tck-errorpage .page-header,
.tck-errorpage .page-content {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}