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