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;
}






/* ===== 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: 52px; /* 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: 60px;  /* Logo-Höhe ganz oben */
  --m-logo-min: 35px;   /* 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;
}











/* quicksand-regular - latin */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400;
  src: url('../myfonts/quicksand-v30-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../myfonts/quicksand-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../myfonts/quicksand-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../myfonts/quicksand-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../myfonts/quicksand-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../myfonts/quicksand-v30-latin-regular.svg#Quicksand') format('svg'); /* Legacy iOS */
}




/* Anwendung der Schriftarten */


h3 {
  font-family: 'Quicksand';
  color: #0B2C55;
}

h4 {
  font-family: Tahoma, sans-serif;
  text-transform: uppercase;
  font-weight: bold;
  color: #F27C2A;
    border-bottom: #999999 1px solid;
}

h5 {
  font-family: 'Quicksand';
}

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



h6 {
  font-family: Tahoma, sans-serif;
  text-transform: uppercase;
  border-bottom: #999999 1px solid;
  text-align: center;
  font-weight: bold;
  color: #044A81;
}

body {
  font-family: 'Quicksand';
}


#jux_easy_instagram_feed .ff-loadmore-wrapper .ff-btn {
  border-radius: 1em;
}


/* ==========================================================
   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;
  }
}






/* ==========================================================
   HPT – Equal Height Cards + Bottom-Block unten
   - Equal Height: ja
   - Erster Textblock bleibt oben: ja
   - Button/Text unten klebt: ja
   - Mobile: aus
   ========================================================== */

@media (min-width: 768px) {

  /* Row/Columns strecken */
  #Row-Text-01-Ambulante-Pflege-PT-HDL .sppb-row {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
  }

  #Row-Text-01-Ambulante-Pflege-PT-HDL .sppb-row-column {
    display: flex !important;
  }

  #Row-Text-01-Ambulante-Pflege-PT-HDL .sppb-column,
  #Row-Text-01-Ambulante-Pflege-PT-HDL .sppb-column-addons {
    display: flex !important;
    width: 100% !important;
  }

  /* Die sichtbare Karte (Shadow/Background-Container) */
  #Row-Text-01-Ambulante-Pflege-PT-HDL .sppb-div-addon.hpt-eq-col {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important; /* sorgt für Equal Height innerhalb der gestreckten Spalte */
  }

  /* WICHTIG: Inhalte NICHT künstlich verteilen */
  #Row-Text-01-Ambulante-Pflege-PT-HDL
  .sppb-div-addon.hpt-eq-col > .sppb-addon-wrapper {
    flex: 0 0 auto !important;
  }

  /* NUR der Bottom-Block bekommt auto-Margin -> klebt unten */
  #Row-Text-01-Ambulante-Pflege-PT-HDL
  .sppb-div-addon.hpt-eq-col > .sppb-addon-wrapper .addon-bottom-text {
    margin-top: auto !important;
  }

  /* Falls der Wrapper selbst (addon-root-text-block) der Bottom-Block ist: */
  #Row-Text-01-Ambulante-Pflege-PT-HDL
  .sppb-div-addon.hpt-eq-col > .sppb-addon-wrapper.addon-root-text-block:has(.addon-bottom-text) {
    margin-top: auto !important;
  }

  /* Kosmetik: keine extra Abstände am Ende */
  #Row-Text-01-Ambulante-Pflege-PT-HDL .addon-bottom-text p {
    margin-bottom: 0 !important;
  }
}

/* Mobile: natürliche Stapelung */
@media (max-width: 767.98px) {
  #Row-Text-01-Ambulante-Pflege-PT-HDL .sppb-row,
  #Row-Text-01-Ambulante-Pflege-PT-HDL .sppb-row-column,
  #Row-Text-01-Ambulante-Pflege-PT-HDL .sppb-column,
  #Row-Text-01-Ambulante-Pflege-PT-HDL .sppb-column-addons,
  #Row-Text-01-Ambulante-Pflege-PT-HDL .sppb-div-addon.hpt-eq-col {
    display: block !important;
    height: auto !important;
  }
}
















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

/*Kontaktformular-Anzeige nach Versand*/
.convertforms.cf-success .cf-response {
    background-color:#F27C2A;
    display: block;
}






/* Service-Wohnen Logo sauber skalieren & zentrieren (Klasse auf COLUMN) */
.sppb-column.scale-logo {
  /* Flex auf Column ist ok, aber wir zentrieren lieber das Image-Container-Element */
/*  margin: 3rem 0 !important;*/
}

/* Container vom Image-Addon zentrieren */
.sppb-column.scale-logo .sppb-addon-single-image-container {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
}

/* IMG selbst skalieren */
.sppb-column.scale-logo .sppb-addon-single-image-container img {
  width: 70% !important;
  max-width: 520px !important;
  height: auto !important;
  display: block !important;
}


/*ERROR-PAGE*/


/* ==========================================================
   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;
}