.site-frame{
  max-width: 1500px;
  margin-inline: auto;
  width: 100%;
}

@media (min-width: 768px) and (max-width: 1920px){
  .site-frame{
    padding-left: 30px;
    padding-right: 30px;
  }
}


/*Standard Navigation temporary closed*/


.k-frame {display: none!important;}


/* ================================
   GLOBAL STYLES – spargel-baecker
   ================================ */

/* 1. Root-Farben */
:root {
  --color-yellow: #FFD00A;
  --yellow: var(--color-yellow);
  --color-black: #000;
  --color-white: #fff;
  --color-gray: #f5f5f5;
  --color-dark-gray: #7E8082;
  --color-red: #C7002B;
  --color-highlight: var(--color-yellow);
  
     /* Fonts */
   
  --font-roboto: 'Roboto', sans-serif;
  --font-light: 'Helvetica Now Display Light', sans-serif;
  --font-sans: 'Helvetica Now Text Regular', sans-serif;
  --font-medium: 'Helvetica Now Text Medium', sans-serif;
  --font-bold: 'Helvetica Now Display Bold', sans-serif;
  --font-headline: 'PP Monument Extended Black', sans-serif;
}



/* Erzwingt die richtige Familie für Thin */

.fa-sharp.fa-light.fa-arrow-right,

i.fa-sharp.fa-thin,
span.fa-sharp.fa-thin {
  font-family: "Font Awesome 7 Sharp" !important;
  font-weight: 300 !important;
  font-style: normal;
}



*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


html {
	
  font-size: 100%;
  scroll-behavior: smooth;
   -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}



body {
  color: var(--color-black);
  background-color: var(--color-yellow)!important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}


/*Hairline Glitch
section {
  margin-top: -1px!important;
  margin-bottom: -1px!important;
}*



/* 5. Links & Buttons */
a {
  color: var(--color-black);
  text-decoration: none;
  transition: all 0.3s ease;
}

a:hover {
  text-decoration: underline;
}

button,
.button {
 font-family: var(--font-sans);
  font-weight: 700;
  font-size: 1rem;
  padding: 10px 25px;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  background-color: var(--color-yellow);
  color: var(--color-black);
  transition: all 0.3s ease;
}

.button:hover {
  background-color: var(--color-black);
  color: var(--color-white);
  text-decoration: underline;
}

/* 6. Utility Classes */
.text-center { text-align: center; }
.text-white  { color: var(--color-white); }
.bg-yellow   { background-color: var(--color-yellow); }
.bg-black    { background-color: var(--color-black); }
.bg-gray     { background-color: var(--color-gray); }

/* 7. Responsive Basics */
@media (max-width: 768px) {
  h1 { font-size: 2rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.5rem; }
}

/* ================================
   Site Header + Navigation
    ================================ */
    
 
/* ===== Header / Headroom ===== */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2000!important;
  background: var(--nav-bg) !important; /* kein Fallback mehr, Variable ist Pflicht */
  box-shadow: var(--nav-shadow, none);
  border-bottom: var(--nav-border, none);
  isolation: isolate;
}


body.has-fixed-nav .site-header {
  position: fixed;
  top: 0;
  left: 0;
}

/* ===== Mini-Navi ===== */
.mini-nav {
  position: absolute;
  top: var(--mini-top, 3px);
  right: var(--mini-right, 32px);
  z-index: 10;
  padding: 0.5rem 0; /* nur vertikal, horizontal via right */
  font-family: 'Roboto', sans-serif;
  font-size: 15px;
  color: #777;
}

.mini-nav ul {
  display: flex;
  gap: var(--mini-gap, 20px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.mini-nav li a {
  color: #777;
  text-decoration: none;
  position: relative;
  padding: 2px 0;
  font-family: 'Roboto', sans-serif;
  transition: all 0.2s ease;
}

/* Letzter Link: gelber Button */
.mini-nav li:last-child a {
  background-color: var(--color-yellow);
  color: var(--color-black);
  border-radius: 5px;
  padding: 5px 10px;
  font-weight: 700;
}
.mini-nav li:last-child a:hover {
  background-color: var(--color-black);
  color: var(--color-white);
}

/* Hover-Effekt: */
.mini-nav li a:hover {
  color: var(--color-black);
}

/* ===== Content-Offset für fixed Header ===== */
main,
.content-wrapper {
  padding-top: var(--nav-height, 110px);
}

body.has-fixed-nav main,
body.has-fixed-nav .content-wrapper {
  padding-top: var(--nav-height, 110px);
}

/* ===== Main-Nav ===== */

/* Desktop-Default */
.site-header .main-nav .menu{ display:flex; }
.site-header .main-nav .nav-toggle{ display:none; }

/* Mobile-Override (via .bp-mobile) – hart durchsetzen */
.bp-mobile .site-header .main-nav .menu{ display:none !important; }
.bp-mobile .site-header .main-nav .nav-toggle{ display:inline-flex !important; }
.bp-mobile .site-header .main-nav .nav-lang{ display:none !important; }

/* Optional explizit für Desktop */
.bp-desktop .site-header .main-nav .nav-toggle{ display:none !important; }
.bp-desktop .site-header .main-nav .menu{ display:flex !important; }


.main-nav {
  display: flex;
  justify-content: space-between; /* Logo links, Menü rechts */
  align-items: center;
  /*background: #f5f5f5;*/
  gap: var(--nav-gap, 32px); /* Abstand Logo <> Menü */
  padding: var(--nav-py, 0) var(--nav-px, 32px) 0 var(--nav-px-left, 0);
}

/* Panel-Overrides */
.main-nav.logo-pos-center { justify-content: center; }
.main-nav.logo-pos-right  { justify-content: flex-end; }

/* ===== Logo ===== */
.main-nav .logo {
  display: flex;
  align-items: center;
  padding: var(--logo-py, 8px) 0;
  transform: translateX(var(--logo-offset-x, 0px));
  margin: 0;
}

.main-nav .logo a {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}

.main-nav .logo .logo-img {
  display: block;
  height: auto;
  max-height: var(--logo-h, 48px);
  width: auto;
  max-width: var(--logo-w, none);
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
}

/* Logo auf Mobile ausblenden (Panel-Toggle) */
.main-nav .logo[data-hide-mobile="true"] { display: flex; }
@media (max-width: 768px) {
  .main-nav .logo[data-hide-mobile="true"] { display: none; }
}

/* ===== Menü ===== */
.menu ul {
  display: flex;
  gap: var(--menu-gap, 24px);
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: flex-end;
}

.menu a {
  font-weight: 500;
  color: var(--color-black);
  text-decoration: none;
  position: relative;
}

.menu a[aria-current="page"] {
  text-decoration: underline;
  font-weight: 700;
}

/* ===== Headroom States ===== */
.headroom {
  transition: transform 0.3s ease-in-out;
  will-change: transform;
}
.headroom--unpinned { transform: translateY(-100%); }
.headroom--pinned   { transform: translateY(0); }
/*.headroom--not-top  { box-shadow: 0 4px 10px rgba(0,0,0,0.05); }*/

/* ===== Responsive Feinschliff ===== */
@media (max-width: 1024px) {
  :root { --nav-height: 96px; }
}

@media (max-width: 768px) {
  :root { --nav-height: 84px; }

  .main-nav {
    gap: 1rem;
    padding-right: 1rem;
  }

  .menu ul {
    gap: 1rem;
  }
}




/* ================================
   SIMPLE NAVIGATION (rfcp)
   ================================ */

.glass-list {
  display: flex;
  gap: var(--menu-gap, 24px);
  list-style: none;
  margin: 0;
  padding: 0;
}

.glass-link {
  font-family: "Roboto Mono", monospace;
  font-weight: 400;
  font-size: clamp(11px, 0.9vw, 15px);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  text-decoration: none;

  letter-spacing: .06em;

  color: #000;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  transition: color .2s ease;
}

/* Hover + Active */
.glass-link:hover,
.glass-link:focus {
  color: #555;
}

.menu a[aria-current="page"].glass-link {
  color: #d00; /* Aktiver Link in Rot, kannst du anpassen */
}

/* Falls globales Menülink-Styling reinfunkt: neutralisieren */
.menu a.glass-link {
  text-decoration: none;
}

/*Buchen BTN Fix*/

.nav-lang {
	padding-left: 0!important;
	padding-right: 0!important;
}

.nav-book-btn--external{
  display:inline-flex;
  align-items:center;
  gap:0;
}

.nav-book-btn--external .book-ext-ico{
  margin-left:3px;
  font-size:.78em;
  transform:none !important;
  transition:none !important;
}

/* Falls global irgendwas auf i:hover greift */
.nav-book-btn--external:hover .book-ext-ico{
  transform:none !important;
  transition:none !important;
}

/* ================================
   SUBMENU
   ================================ */
 
  

/* Dynamischer Breakpoint aus dem Panel für Toggle/Desk-Menu */
@media (max-width: <?= $breakpoint ?>px) {
  .site-header .main-nav .menu { display: none; }
  .site-header .main-nav .nav-toggle { display: inline-flex; }
  .site-header .main-nav .nav-lang { display: none; }
}
@media (min-width: <?= $breakpoint + 1 ?>px) {
  .site-header .main-nav .nav-toggle { display: none; }

  .site-header .main-nav {
    display: flex;
    align-items: center;
    gap: var(--nav-gap);
  }
  .site-header .main-nav .menu {
    flex: 1 1 auto;
    display: flex;
    justify-content: var(--menu-jc);
  }
  .site-header .main-nav .menu .glass-list {
    display: flex;
    gap: var(--menu-gap);
    align-items: center;
    justify-content: var(--menu-jc);
    margin: 0;
    padding: 0;
  }
  .site-header .main-nav .nav-lang {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
  }
}



/* Optionaler Fade unten (Glass) */
.site-header[data-glass-fade="1"]::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: var(--nav-glass-fade-h);
  pointer-events: none;
  background: linear-gradient(to bottom, var(--nav-bg) 0%, rgba(0,0,0,0) 100%);
}

/* Inhalt paddings */
.site-header .main-nav {
  min-height: var(--nav-height);
  padding: var(--nav-py) var(--nav-px);
  padding-left: calc(var(--nav-px-left));
}

/* ===== Menü-Link-Base-Stile ===== */
.site-header .main-nav .menu .glass-list > li { position: relative; }

.site-header .main-nav .menu .glass-list .glass-link,
.site-header .main-nav .menu .glass-list .glass-toggle {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  padding: var(--menu-py) var(--menu-px);
  cursor: pointer;
  background: transparent;
  border: 0;
}

.site-header .main-nav .menu .glass-list .label {
  font-size: var(--menu-fs-m);
  line-height: 1.2;
  font-weight: var(--menu-fw);
  letter-spacing: var(--menu-ls);
  text-transform: var(--menu-tt);
  color: var(--menu-col);
  transition: color .2s ease, text-decoration-color .2s ease, opacity .2s ease;
}

.site-header .main-nav .menu .glass-list .glass-link:hover .label,
.site-header .main-nav .menu .glass-list .glass-toggle:hover .label {
  color: var(--menu-col-hover);
}
.site-header .main-nav .menu .glass-list .glass-link[aria-current="page"] .label {
  color: var(--menu-col-active);
}

/* Unterstreich-Logik per Data-Attribut */
.site-header[data-underline="hover"] .main-nav .menu .glass-list .glass-link:hover .label,
.site-header[data-underline="hover"] .main-nav .menu .glass-list .glass-toggle:hover .label { 
  text-decoration: underline; text-underline-offset: 0.18em; 
}
.site-header[data-underline="active"] .main-nav .menu .glass-list .glass-link[aria-current="page"] .label { 
  text-decoration: underline; text-underline-offset: 0.18em;
}
.site-header[data-underline="both"] .main-nav .menu .glass-list .glass-link:hover .label,
.site-header[data-underline="both"] .main-nav .menu .glass-list .glass-link[aria-current="page"] .label,
.site-header[data-underline="both"] .main-nav .menu .glass-list .glass-toggle:hover .label {
  text-decoration: underline; text-underline-offset: 0.18em;
}

/* Tablet-Größe bis Breakpoint */
@media (min-width: 768px) and (max-width: <?= $breakpoint ?>px) {
  .site-header .main-nav .menu .glass-list .label { font-size: var(--menu-fs-t); }
}

/* Desktop-Größe */
@media (min-width: <?= $breakpoint + 1 ?>px) {
  .site-header .main-nav .menu .glass-list .label { font-size: var(--menu-fs-d); }
}

/* Language-Pills im Overlay (Burger) */
#mobile-overlay .overlay-lang { margin-top: 1rem; }
#mobile-overlay .overlay-lang .lang-switcher ul {
  display: flex; gap: .5rem; flex-wrap: wrap; margin: 0; padding: 0; list-style: none;
  font-family: var(--font-mono, 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
}
#mobile-overlay .overlay-lang .lang-switcher li a,
#mobile-overlay .overlay-lang .lang-switcher li span {
  padding: .35rem .6rem; font-size: 13px; border: 1px solid rgba(0,0,0,.15); border-radius: 999px; line-height: 1; text-decoration: none;
}
#mobile-overlay .overlay-lang .lang-switcher li.is-active span { background: #111; color: #fff; border-color: #111; }

/* Language Switcher Sichtbarkeit im Header (per Panel steuerbar) */
@media (min-width: <?= $breakpoint + 1 ?>px) {
  .site-header .main-nav .nav-lang { display: <?= $showLangD ? 'inline-flex' : 'none' ?>; }
}
@media (max-width: <?= $breakpoint ?>px) {
  .site-header .main-nav .nav-lang { display: <?= $showLangM ? 'inline-flex' : 'none' ?>; }
}



/* ============================
   SUBMENÜ — FIX: nicht fixed (Headroom-transform!), sondern absolute
   ============================ */

/* Wichtig: Anchor für absolute Position */
.site-header .main-nav .menu .glass-list > li {
  position: relative;
}

/* Panel sitzt unter dem Toggle – zentriert wie vorher */
.submenu-panel{
  position: absolute;              /* <-- FIX */
  top: calc(100% + 14px);          /* Abstand unter dem Button */
  left: 50%!important;
  transform: translateX(-50%)!important;

  z-index: 2100;
  background:#fff;
  border:1px solid #dbdbdb;
  box-shadow:0 24px 80px rgba(0,0,0,.25),0 2px 6px rgba(0,0,0,.08);
  border-radius:0;
  overflow:hidden;
  box-sizing:border-box;

  width:clamp(820px,56vw,1040px)!important;
  min-width:820px!important;
  max-width:1040px!important;

  --g:24px;
  --pad-x:22px;
  --pad-y:20px;
  --icon-size:20px;
  --card-bg:#fff;
  --card-bg-hover:#020202;
  --card-color:#0b1225;
  --card-color-hover:#f5f5f5;
}

/* falls irgendwo overflow hidden greift: */
.site-header,
.site-header .nav-wrap,
.site-header .main-nav,
.site-header .menu {
  overflow: visible;
}

.submenu-panel,
.submenu-panel *{text-align:left!important;}
.submenu-panel[hidden]{display:none;}

.submenu-list{
  display:grid!important;
  grid-template-columns:1fr 1fr;
  grid-auto-rows:1fr;
  gap:var(--g);
  margin:0!important;
  padding:var(--g)!important;
  list-style:none;
  box-sizing:border-box;
}
.submenu-list li{margin:0!important;}

.submenu-link{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:14px;
  width:100%!important;
  height:100%;
  margin:0!important;
  padding:var(--pad-y) var(--pad-x)!important;
  background:var(--card-bg);
  box-shadow:inset 0 0 0 1px #dbdbdb!important;
  border-radius:0;
  text-decoration:none;
  color:var(--card-color);
  font-family:var(--font-sans)!important;
  font-size:16px!important;
  line-height:1.35;
  white-space:nowrap;
  overflow:visible;
  text-overflow:ellipsis;
  transition:background-color .18s ease,color .18s ease,box-shadow .18s ease;
}
.submenu-link i,
.submenu-link .icon,
.submenu-link svg{
  width:var(--icon-size);
  height:var(--icon-size);
  flex:0 0 var(--icon-size);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:currentColor!important;
  fill:currentColor!important;
  opacity:.9;
}
.submenu-link:not(:hover) i,
.submenu-link:not(:hover) .icon,
.submenu-link:not(:hover) svg{opacity:.85;}
.submenu-link .label{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.submenu-link:hover,
.submenu-link:focus-visible{
  background:var(--card-bg-hover)!important;
  color:var(--card-color-hover)!important;
  box-shadow:inset 0 0 0 1px #dbdbdb!important;
  outline:none;
}
.submenu-list li+li .submenu-link,
.submenu-list li+li .submenu-link::before{
  border-top:none!important;
  content:none!important;
}


/* =========================================================
   ACTIVE für Parent-Menüpunkte mit Sub-Navigation (RFCP)
   Voraussetzung: navigation.php setzt li.is-active-parent
   ========================================================= */

/* Parent-Toggle rot (Label) */
.site-header .main-nav .menu .glass-list > li.is-active-parent > .glass-toggle .label{
  color: var(--menu-col-active);
}

/* optional: underline passend zum underline-mode */
.site-header[data-underline="active"] .main-nav .menu .glass-list > li.is-active-parent > .glass-toggle .label,
.site-header[data-underline="both"]   .main-nav .menu .glass-list > li.is-active-parent > .glass-toggle .label{
  text-decoration: underline;
  text-underline-offset: 0.18em;
}


/* ============================
   FUNKTIONIERENDER CHEVRON — alter, sicherer Stand
   ============================ */

/* Parent-Toggle layouten */
.glass-toggle{
  display:inline-flex!important;
  align-items:center;
  justify-content:center;
  gap:6px;
  position:relative;
  padding-right:18px;
  overflow:visible;
}

/* Chevron sichtbar & farblich steuerbar */
.glass-toggle .chev{
  display:inline-block!important;
  width:18px;
  height:18px;
  margin-left:6px;
  opacity:.85;
  transform-origin:center;
  transition:transform .2s ease;
  pointer-events:none;
  color:currentColor;
  fill:currentColor;
}

/* Rotation bei offenem Zustand */
.has-open>.glass-toggle .chev,
.is-open>.glass-toggle .chev{
  transform:rotate(180deg);
}

/* ============================
   Backdrop & Header Defaults
   ============================ */
.submenu-backdrop{
  position:fixed;inset:0;
  backdrop-filter:blur(16px)saturate(1.1);
  -webkit-backdrop-filter:blur(16px)saturate(1.1);
  background:rgba(10,16,30,.35);
  z-index:1100;
  opacity:0;pointer-events:none;
  transition:opacity .18s ease;
}
body.has-submenu-open .submenu-backdrop{opacity:1;pointer-events:all;}

.site-header+main,
.site-header+.site-main,
.site-header+#content{margin-top:0;padding-top:0;}
.site-header .main-nav .menu{display:flex;}
.site-header .main-nav .nav-toggle{display:none;}
.bp-mobile .site-header .main-nav .menu{display:none;}
.bp-mobile .site-header .main-nav .nav-toggle{display:inline-flex;}
.bp-mobile .site-header .main-nav .nav-lang{display:none;}
.bp-desktop .site-header .main-nav .nav-toggle{display:none;}
.bp-desktop .site-header .main-nav .menu{display:flex;}

/* ============================
   Responsive
   ============================ */
@media(max-width:960px){
  .submenu-panel{
    left:8px!important;
    right:8px!important;
    transform:none!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
  }
  .submenu-list{grid-template-columns:1fr;}
}

/* ============================
   Motion-Reduce
   ============================ */
@media(prefers-reduced-motion:reduce){
  .submenu-backdrop,
  .glass-toggle .chev,
  .submenu-link{transition:none;}
}


/* =========================================================
   Overlay Toggle + Overlay UI — sauber / ohne Springen
   ========================================================= */

:root{
  --kzt-toggle-top: 24px;
  --kzt-toggle-size: 44px;
  --kzt-toggle-color: #0a0a0a;
  --kzt-toggle-bar-width: 28px;
  --kzt-toggle-bar-height: 2px;
  --kzt-toggle-bar-offset: 6px;

  /* rechts exakt auf Grid ausrichten */
  --kzt-toggle-right-grid: max(
    var(--grid-padding, 32px),
    calc((100vw - var(--grid-max-width, 1760px)) / 2 + var(--grid-padding, 32px))
  );
}

/* ===============================
   BF Customs
   =============================== */

#mobile-overlay .overlay-contact-title{
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #0a0a0a !important;
}

#mobile-overlay .overlay-lang{
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.overlay-link{
  font-family: var(--font-bold);
  letter-spacing: -0.015em;
}

/* ===============================
   Open-Button im Header
   =============================== */

.site-header .nav-toggle{
  position: fixed !important;
  top: var(--kzt-toggle-top) !important;
  right: var(--kzt-toggle-right-grid) !important;
  width: var(--kzt-toggle-size) !important;
  height: var(--kzt-toggle-size) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent;
  z-index: 10050 !important;
}

.site-header .nav-toggle,
.site-header .nav-toggle *{
  color: var(--kzt-toggle-color) !important;
}

.site-header .nav-toggle .nav-toggle-bar{
  position: absolute;
  width: var(--kzt-toggle-bar-width);
  height: var(--kzt-toggle-bar-height);
  background: currentColor;
  transition: transform .25s ease, opacity .2s ease;
}

.site-header .nav-toggle .nav-toggle-bar:nth-child(1){
  transform: translateY(calc(var(--kzt-toggle-bar-offset) * -1));
}
.site-header .nav-toggle .nav-toggle-bar:nth-child(2){
  transform: translateY(0);
}
.site-header .nav-toggle .nav-toggle-bar:nth-child(3){
  transform: translateY(var(--kzt-toggle-bar-offset));
}

/* Open-Button verschwindet wenn Overlay offen */
.nav-open .site-header .nav-toggle{
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ===============================
   Close-Button im Overlay
   - exakt gleiche Position
   =============================== */

#mobile-overlay .overlay-close{
  position: fixed !important;
  top: var(--kzt-toggle-top) !important;
  right: var(--kzt-toggle-right-grid) !important;
  width: var(--kzt-toggle-size) !important;
  height: var(--kzt-toggle-size) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: transparent;
  z-index: 10051 !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#mobile-overlay .overlay-close,
#mobile-overlay .overlay-close *{
  color: var(--kzt-toggle-color) !important;
}

#mobile-overlay .overlay-close .nav-toggle-bar{
  position: absolute;
  width: var(--kzt-toggle-bar-width);
  height: var(--kzt-toggle-bar-height);
  background: currentColor;
  transition: transform .25s ease, opacity .2s ease;
}

/* nur sichtbar wenn offen */
.nav-open #mobile-overlay .overlay-close{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* immer als X */
.nav-open #mobile-overlay .overlay-close .nav-toggle-bar:nth-child(1){
  transform: rotate(45deg);
}
.nav-open #mobile-overlay .overlay-close .nav-toggle-bar:nth-child(2){
  opacity: 0;
}
.nav-open #mobile-overlay .overlay-close .nav-toggle-bar:nth-child(3){
  transform: rotate(-45deg);
}

/* ===============================
   Overlay Content Grid
   =============================== */

#mobile-overlay .overlay-menu{
  width: 100%;
  max-width: var(--grid-max-width, 1760px);
  margin-inline: auto;
  padding-inline: var(--grid-padding, 32px);
  box-sizing: border-box;
}
/* ================================
   HERO-SLIDER (Swiper)
   ================================ */

.hero-slider {
  position: relative;
  width: 100%;
  overflow: hidden;

  --hero-max: 1760px;
  --hero-pad: 20px;
  --hero-bottom: clamp(48px, 6vw, 110px);

  --hero-edge: max(var(--hero-pad, 20px), calc((100vw - var(--hero-max, 1760px)) / 2));
}

/* Höhe wenn NICHT Fullscreen (per Variablen aus hero.php) */
.hero-slider:not(.is-fullscreen) { height: var(--hero-height-desktop, 480px) !important; }
.hero-slider:not(.is-fullscreen) .swiper { height: 100% !important; }
.hero-slider:not(.is-fullscreen) .swiper-wrapper { height: 100% !important; }
.hero-slider:not(.is-fullscreen) .swiper-slide { height: var(--hero-height-desktop, 480px) !important; }

/* Tablet */
@media (max-width: 1024px) {
  .hero-slider:not(.is-fullscreen) { height: var(--hero-height-tablet, 400px) !important; }
  .hero-slider:not(.is-fullscreen) .swiper { height: 100% !important; }
  .hero-slider:not(.is-fullscreen) .swiper-wrapper { height: 100% !important; }
  .hero-slider:not(.is-fullscreen) .swiper-slide { height: var(--hero-height-tablet, 400px) !important; }
}

/* Mobile */
@media (max-width: 767px) {
  .hero-slider:not(.is-fullscreen) { height: var(--hero-height-mobile, 320px) !important; }
  .hero-slider:not(.is-fullscreen) .swiper { height: 100% !important; }
  .hero-slider:not(.is-fullscreen) .swiper-wrapper { height: 100% !important; }
  .hero-slider:not(.is-fullscreen) .swiper-slide { height: var(--hero-height-mobile, 320px) !important; }

  .hero-slider { --hero-pad: 20px; }
}

/* Fullscreen-Mode */
.hero-slider.is-fullscreen { height: 100dvh !important; min-height: 100svh !important; }
.hero-slider.is-fullscreen .swiper,
.hero-slider.is-fullscreen .swiper-wrapper,
.hero-slider.is-fullscreen .swiper-slide,
.hero-slider.is-fullscreen .hero-media-wrapper { height: 100% !important; }

.hero-slider .swiper { height: 100%; }

/* =========================================================
   Full-bleed Wrapper nur wenn Grid-Background = BLEED
   ========================================================= */
.hero-slider.hero-bg-bleed > .grid {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* Sicherheit: Swiper full width (nur bei BLEED nötig) */
.hero-slider.hero-bg-bleed .hero-swiper,
.hero-slider.hero-bg-bleed .swiper,
.hero-slider.hero-bg-bleed .swiper-wrapper,
.hero-slider.hero-bg-bleed .swiper-slide {
  width: 100% !important;
}

/* Slide = Positionierungs-Context */
.hero-slider .swiper-slide {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* =========================================================
   Overlay-Gradient: kein ::before, nur DOM-Layer
   ========================================================= */
.hero-slider .swiper-slide::before {
  content: none !important;
  display: none !important;
}

/* =========================================================
   Media-Layer (Bild & Video)
   ========================================================= */
.hero-media-wrapper {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;

  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
}

.hero-img,
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Blur-Up (nur Bild) */
.hero-img.blurred {
  filter: blur(20px);
  transform: translateZ(0) scale(1.05);
  z-index: 0;
  opacity: 1;
  transition: opacity 0.35s ease;
  will-change: opacity, transform, filter;
}

.hero-img.full,
.hero-video {
  opacity: 0;
  z-index: 0;
  transition: opacity 0.35s ease;
  will-change: opacity;
}

.hero-img.full.loaded,
.hero-video.loaded { opacity: 1; }

/* Robust: Sobald Slide geladen ist, Blur weg */
.hero-slider .swiper-slide.is-loaded .hero-img.blurred {
  opacity: 0 !important;
}

/* Globaler S/W-Filter */
.hero-slider.is-bw .hero-img.full,
.hero-slider.is-bw .hero-img.blurred,
.hero-slider.is-bw .hero-video { filter: grayscale(100%); }

/* =========================================================
   Fade-Layer als echtes Element
   ========================================================= */
.hero-slider .hero-fade-layer{
  position:absolute;
  inset:0;
  z-index: 1;
  pointer-events:none;

  background: linear-gradient(
    to top,
    var(--hero-fade-from, rgba(0,0,0,.5)) 0%,
    rgba(0,0,0,0) var(--hero-fade-end, 60%)
  );

  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform;
}

/* ================================
   Bottom Edge SVG (Overlay)
   ================================ */
.hero-edge {
  position: absolute;
  bottom: var(--edge-offset, 0px);
  left: var(--edge-padding-left, 0px);
  right: var(--edge-padding-right, 0px);
  height: var(--edge-height, 120px);

  background-image: var(--edge-image);
  background-position: center bottom;
  background-repeat: var(--edge-repeat, no-repeat);
  background-size: 100% auto;

  z-index: 2;
  pointer-events: none;

  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Mobile edge vars */
@media (max-width: 767px) {
  .hero-edge {
    height: var(--edge-height-mobile, var(--edge-height, 120px));
    left: var(--edge-padding-left-mobile, var(--edge-padding-left, 0px));
    right: var(--edge-padding-right-mobile, var(--edge-padding-right, 0px));
  }
}

/* Edge auf Grid-Breite deckeln (Background bleibt full) */
.hero-slider.hero-edge--grid .hero-edge {
  background-image: none !important;
}

.hero-slider.hero-edge--grid .hero-edge::before {
  content: "";
  position: absolute;
  inset: 0;

  width: min(calc(100vw - (2 * var(--hero-pad, 20px))), var(--hero-max, 1760px));
  margin-left: auto;
  margin-right: auto;

  background-image: var(--edge-image);
  background-position: center bottom;
  background-repeat: var(--edge-repeat, no-repeat);
  background-size: 100% auto;
}

.hero-slider.hero-edge--grid .hero-edge[style*="--edge-repeat: repeat-x"]::before {
  background-size: auto 100%;
}

/* ================================
   Content (Base)
   ================================ */
.hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  color: var(--color-white, #fff);
  padding: 0 40px;
  max-width: 800px;
  margin: 0 auto;
}

/* Bottom-left Content (bündig wie Navi) */
.hero-slider .hero-content.hero-bottom-left {
  position: absolute;
  left: var(--hero-edge) !important;
  right: auto !important;
  bottom: calc(var(--hero-bottom) + var(--edge-height, 0px));
  z-index: 3;

  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
  text-align: left;

  display: block;
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;

  transform: translateZ(0);
  backface-visibility: hidden;
}

.hero-slider .hero-content.hero-bottom-left .hero-inner {
  width: min(calc(100vw - (2 * var(--hero-pad, 20px))), var(--hero-max, 1760px)) !important;
  max-width: var(--hero-max, 1760px) !important;
  margin: 0 !important;
  padding: 0;
  box-sizing: border-box !important;
}

/* Typo für 2-zeilige Headline */
.hero-slider .hero-title-block {
  font-family: var(--font-mono, "Roboto Mono", monospace);
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing: 0;
  text-align: left;
}
.hero-slider .hero-title-block .hero-line {
  display: block;
  white-space: nowrap;
  text-align: left;
}
.hero-slider .hero-title-block .hero-name,
.hero-slider .hero-title-block .hero-model {
  font-weight: 100 !important;
  margin: 0;
}
.hero-slider .hero-title-block .hero-name {
  font-size: clamp(14px, 1.2vw, 20px);
  opacity: .98;
  margin-bottom: .35em;
}
.hero-slider .hero-title-block .hero-model {
  font-size: clamp(28px, 5vw, 72px);
}

/* Optischer Shift */
.hero-slider .hero-line.hero-model{
  --hero-model-optical-shift: -0.06em;
  position: relative;
  left: var(--hero-model-optical-shift);
}
@media (max-width: 768px){
  .hero-slider .hero-line.hero-model{
    --hero-model-optical-shift: -0.045em;
  }
}

/* Fließtext */
.hero-slider .hero-desc {
  margin-top: .9rem;
  max-width: 60ch;
  font-size: clamp(14px, 1.1vw, 18px);
  line-height: 1.35;
  opacity: .95;
}

/* ================================
   Hero Button (Panel-Variablen)
   ================================ */
.hero-slider .hero-content.hero-bottom-left a.hero-button {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  white-space: nowrap;

  text-decoration: none !important;

  background: var(--hero-btn-bg, #C3002F) !important;
  color: var(--hero-btn-color, #fff) !important;

  border-style: solid !important;
  border-width: var(--hero-btn-border-width, 0px) !important;
  border-color: var(--hero-btn-border-color, transparent) !important;
  border-radius: var(--hero-btn-radius, 0px) !important;

  font-size: var(--hero-btn-fs-d, 15px) !important;
  padding: var(--hero-btn-py-d, 12px) var(--hero-btn-px-d, 30px) !important;

  margin-top: 1rem !important;
}

.hero-slider .hero-content.hero-bottom-left a.hero-button .label,
.hero-slider .hero-content.hero-bottom-left a.hero-button i{
  text-decoration: none !important;
  color: inherit !important;
}

.hero-slider .hero-content.hero-bottom-left a.hero-button i {
  font-size: 0.75em;
  line-height: 1;
  opacity: .9;
  transition: transform .25s ease, opacity .25s ease;
}

/* Hover/Focus: EIN Unterstrich (über Label + Gap + Icon) */
.hero-slider .hero-content.hero-bottom-left a.hero-button:hover,
.hero-slider .hero-content.hero-bottom-left a.hero-button:focus-visible{
  background: var(--hero-btn-bg-hover, #000) !important;
  color: var(--hero-btn-color-hover, #fff) !important;
  border-color: var(--hero-btn-border-color-hover, var(--hero-btn-border-color, transparent)) !important;

  text-decoration: none !important;
}

/* Der Unterstrich sitzt auf einem inneren Flex-Container, der alles umfasst */
.hero-slider .hero-content.hero-bottom-left a.hero-button{
  position: relative;
}

.hero-slider .hero-content.hero-bottom-left a.hero-button::after{
  content: "";
  position: absolute;
  left: var(--hero-btn-px-d, 30px);
  right: var(--hero-btn-px-d, 30px);

  bottom: calc(var(--hero-btn-py-d, 12px) - 0px);
  height: 1px;
  background: currentColor;

  opacity: 0;
  transform: scaleX(0.98);
  transform-origin: left;
  transition: opacity .18s ease, transform .18s ease;
}

.hero-slider .hero-content.hero-bottom-left a.hero-button:hover::after,
.hero-slider .hero-content.hero-bottom-left a.hero-button:focus-visible::after{
  opacity: 1;
  transform: scaleX(1);
}

.hero-slider .hero-content.hero-bottom-left a.hero-button:hover i,
.hero-slider .hero-content.hero-bottom-left a.hero-button:focus-visible i{
  transform: translateX(6px);
  opacity: 1;
}

/* Tablet Button */
@media (max-width: 1024px) {
  .hero-slider .hero-content.hero-bottom-left a.hero-button {
    font-size: var(--hero-btn-fs-t, var(--hero-btn-fs-d, 15px)) !important;
    padding: var(--hero-btn-py-t, var(--hero-btn-py-d, 12px)) var(--hero-btn-px-t, var(--hero-btn-px-d, 30px)) !important;
  }

  .hero-slider .hero-content.hero-bottom-left a.hero-button::after{
    left: var(--hero-btn-px-t, var(--hero-btn-px-d, 30px));
    right: var(--hero-btn-px-t, var(--hero-btn-px-d, 30px));
    bottom: calc(var(--hero-btn-py-t, var(--hero-btn-py-d, 12px)) - 2px);
  }
}

/* Mobile Button + Position */
@media (max-width: 767px) {
  .hero-slider .hero-content.hero-bottom-left {
    bottom: calc(
      16px
      + var(--edge-height-mobile, 0px)
      + var(--hero-mobile-bottom-extra, 22px)
    );
  }

  .hero-slider .hero-content.hero-bottom-left a.hero-button {
    font-size: var(--hero-btn-fs-m, var(--hero-btn-fs-d, 15px)) !important;
    padding: var(--hero-btn-py-m, var(--hero-btn-py-d, 12px)) var(--hero-btn-px-m, var(--hero-btn-px-d, 30px)) !important;
  }

  .hero-slider .hero-content.hero-bottom-left a.hero-button::after{
    left: var(--hero-btn-px-m, var(--hero-btn-px-d, 30px));
    right: var(--hero-btn-px-m, var(--hero-btn-px-d, 30px));
    bottom: calc(var(--hero-btn-py-m, var(--hero-btn-py-d, 12px)) - 2px);
  }
}

/* ================================
   Pagination / Bullets (Panel-Variablen)
   ================================ */
.hero-slider .hero-swiper--scoped .hero-pagination--scoped{
  position:absolute;
  left:0;
  right:0;

  display:flex;
  justify-content:center;
  align-items:center;

  gap: var(--hero-bullet-gap, 8px);
  bottom: var(--hero-pagination-bottom, 40px);

  z-index: 50;

  pointer-events: none;
  transform: translateZ(0);
}

.hero-slider .hero-swiper--scoped .hero-pagination--scoped .swiper-pagination-bullet{
  width: var(--hero-bullet-size, 10px);
  height: var(--hero-bullet-size, 10px);
  border-radius: var(--hero-bullet-radius, 999px);

  background: var(--hero-bullet-color, rgba(255,255,255,.4));
  opacity: 1;

  transition: transform .2s ease, background-color .2s ease, opacity .2s ease;

  pointer-events: auto;
  position: relative;
}

.hero-slider .hero-swiper--scoped .hero-pagination--scoped .swiper-pagination-bullet-active{
  background: var(--hero-bullet-color-active, #fff);
  transform: scale(var(--hero-bullet-active-scale, 1.2));
}

@media (max-width: 768px){
  .hero-slider .hero-content.hero-bottom-left{
    padding-bottom: calc(var(--hero-gutter, 20px) + var(--hero-mobile-bottom-extra, 22px));
  }

  .hero-slider .hero-swiper--scoped .hero-pagination--scoped{
    bottom: var(--hero-pagination-bottom-mobile, var(--hero-pagination-bottom, 40px));
    gap: var(--hero-bullet-gap-mobile, var(--hero-bullet-gap, 8px));
  }

  .hero-slider .hero-swiper--scoped .hero-pagination--scoped .swiper-pagination-bullet{
    width: var(--hero-bullet-size-mobile, var(--hero-bullet-size, 10px));
    height: var(--hero-bullet-size-mobile, var(--hero-bullet-size, 10px));
  }

  .hero-slider .hero-swiper--scoped .hero-pagination--scoped .swiper-pagination-bullet::after{
    content:"";
    position:absolute;
    inset:-8px;
  }
}

/* ================================
   Parallax
   ================================ */
.hero-slider [data-parallax-layer] {
  will-change: transform;
  transform: translate3d(0,0,0);
  transition: transform 0.08s linear;
}

@media (prefers-reduced-motion: reduce) {
  .hero-slider [data-parallax-layer] { transform: none !important; transition: none !important; }
}




/* ================================
   INTRO / INFO BLOCK + ICON SLIDER
================================ */



/* Section */
/* Intro: Radius oben/unten via CSS-Variablen */
.intro-block{
  border-top-left-radius: var(--intro-radius-top, 0px);
  border-top-right-radius: var(--intro-radius-top, 0px);
  border-bottom-left-radius: var(--intro-radius-bottom, 0px);
  border-bottom-right-radius: var(--intro-radius-bottom, 0px);
  overflow: var(--intro-section-clip, visible);
}


/* Inner-Wrapper steuert Breite & Ausrichtung */
.intro-block .intro-inner {
  width: var(--intro-width, 100%);
}

/* Modul-Ausrichtung über Margins */
.intro-block .intro-inner.align-left   { margin-right: auto; margin-left: 0; }
.intro-block .intro-inner.align-center { margin-left: auto; margin-right: auto; }
.intro-block .intro-inner.align-right  { margin-left: auto; margin-right: 0; }

/* Textausrichtung – höhere Spezifität, damit es sicher greift */
.intro-block .intro-inner.ta-left   { text-align: left; }
.intro-block .intro-inner.ta-center { text-align: center; }
.intro-block .intro-inner.ta-right  { text-align: right; }

/* Farbe & Typo via Custom-Props (falls im Panel gesetzt) */
.intro-block .subheadline {
  font-size: 15px;
  font-family: var(--font-mono);
  color: var(--color-red);
  margin-bottom: 30px;
}

.intro-block .headline {
  font-family: var(--font-headline);
  font-size: var(--intro-headline-size, var(--h2-size));
  color: var(--intro-headline-color, var(--color-black));
  margin-bottom: 1rem;
}

/* .text: zentrierende Margins nur bei center; bei left/right kein auto-centern */
.intro-block .intro-inner.ta-center .text,
.intro-block .intro-inner.ta-left .text,
.intro-block .intro-inner.ta-right .text {
  margin: 0;
}


.intro-block .text{
  max-width: 700px;
  font-family: var(--intro-font, 'Roboto', sans-serif);
  font-size: var(--intro-body-size, var(--body-size));
  color: var(--intro-text-color, var(--color-text));
}


/* Wenn kein Text vorhanden: etwas mehr vertikaler Raum */
.intro-block.no-text {
  padding: 6rem 0;
}

/* Icon-Slider */
.icon-swiper {
  margin-top: 4rem;
  padding: 0 !important;
}

.icon-swiper .swiper-slide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem !important;
  text-align: center;
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  color: var(--color-black);
}

.icon-swiper i {
  font-size: var(--h3-size);
  color: var(--color-yellow);
}

.icon-title {
  color: var(--color-black);
  text-decoration: none;
  position: relative;
  display: inline-block;
  padding-bottom: 3px;
}

/* Mobile: optional 100% Breite erzwingen */
@media (max-width: 768px) {
  .intro-block .intro-inner.mobile-full {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .intro-block .text {
    max-width: 100%;
  }
}




/* ================================
   Modul 4 – Highlight Section + Column-Slider
   ================================ */
   
/*Controll Fix*/

.kzt-module .highlight-controls i,
.kzt-module .highlight-controls i::before{
  font-family: "Font Awesome 7 Sharp";
  font-weight: var(--ctrl-icon-fw);
  font-size: var(--ctrl-i-size);
  line-height: 1;
}

.highlight-header-btn {
  font-family: var(--font-headline, 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
  /*text-transform: uppercase;*/
}

.highlight-section {
  position: relative;
  overflow: hidden;
  z-index: 0;
}

/* Topline (Line-Height jetzt unitless via --lh-topline inline) */
.highlight-topline {
  font-family: var(--font-mono);
  font-weight: 500;
  line-height: var(--lh-topline, 1.2);
  display: block;
  opacity: .95;
}

/* Überschrift (Line-Height unitless via --lh-section inline) */
.highlight-headline {
  font-family: var(--font-headline);
  text-align: left;
  margin-left: 0;
  margin-bottom: 3rem;
}

/* Grunge */
.highlight-section .grunge-top,
.highlight-section .grunge-bottom {
  background-color: var(--color-white);
  position: absolute;
  left: 0;
  width: 100%;
  display: block;
  z-index: 1;
  pointer-events: none;
}
.highlight-section .grunge-top { top: 0; }
.highlight-section .grunge-bottom { bottom: 0; }

/* Rahmen-Wrapper */
.column-slider-frame {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: 0 auto;
  background: transparent;
}
.column-slider-frame::before,
.column-slider-frame::after { content: none; }

/* Swiper */
.column-slider {
  position: relative;
  width: 100%;
  background: transparent;
  z-index: 2;
}

/* Card */
.column-slider .swiper-slide.column-slide {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card-bg, #fff);
  border: 1px solid var(--card-bc, var(--divider, #ccc));
  border-radius: var(--highlight-card-radius, 8px);
  overflow: hidden;
  padding: 0;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  height: 400px; /* runtime via inline überschrieben */
  transition: border-color .2s ease, box-shadow .2s ease;
}

/* Bild-Wrapper */
.column-slider .column-slide-media {
  position: relative;
  display: block;
  overflow: hidden;
  border-top-left-radius: var(--highlight-card-radius, 8px);
  border-top-right-radius: var(--highlight-card-radius, 8px);
  line-height: 0;
}

/* Bild */
.column-slider .column-slide-image {
  display: block;
  width: 100%;
  height: var(--img-h);
  object-fit: cover;
  transform: scale(1);
  transition: transform .35s ease;
  will-change: transform;
}

/* Zoom-Effekt */
.column-slider .column-slide:hover .column-slide-image,
.column-slider .column-slide-media:focus-visible .column-slide-image {
  transform: scale(1.04);
}

/* Textbereich – line-height unitless via --lh-body inline */
.highlight-section .column-slide-text { line-height: var(--lh-body, 1.5); }
.highlight-section .column-slide-text p {
  font-size: inherit;
  line-height: inherit;
  margin: var(--space-ht, 10px) 0 var(--space-tb, 15px);
}
@media (max-width: 1023px){
  .highlight-section .column-slide-text { padding: var(--card-pad-t, 18px); }
}
@media (max-width: 767px) {
  .highlight-section .column-slide-text {
    --space-ht-effective: var(--space-ht-mobile, 8px);
    --space-tb-effective: var(--space-tb-mobile, 12px);
    padding: var(--card-pad-m, 16px);
  }
  .highlight-section .column-slide-text p {
    margin: var(--space-ht-mobile, 8px) 0 var(--space-tb-mobile, 12px);
  }
}

/* Button */
.column-slide-button {
  display: inline-block;
  padding: 8px 20px;
  text-decoration: none;
  font-family: var(--font-bold, 'Roboto Sans');
  text-transform: uppercase;
}
.column-slide-button:focus-visible {
  outline: 2px solid rgba(0,0,0,.3);
  outline-offset: 2px;
}

/* Controls */
.highlight-controls {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-top: 22px;
  gap: 12px;
  z-index: 7;
}

/* Bullets rechteckig */
.highlight-controls .swiper-pagination { position: relative; justify-self: center; text-align: center; }
.highlight-controls .swiper-pagination-bullet {
  width: 6px; height: 6px; background-color: rgba(0,0,0,0.5);
  opacity: .5; border-radius: 15; margin: 0 4px !important;
}
.highlight-controls .swiper-pagination-bullet-active { background-color: var(--color-black); opacity: 1; }

/* Pfeile */
.highlight-prev, .highlight-next {
  appearance: none; border: none; background: transparent; font: inherit; line-height: 1; cursor: pointer;
  padding: 0; height: 44px; width: 44px; display: grid; place-items: center; color: var(--color-black); opacity: .85;
  transition: transform .2s ease, opacity .2s ease;
}
.highlight-prev { justify-self: start; }
.highlight-next { justify-self: end; }
.highlight-prev:hover, .highlight-next:hover { opacity: 1; }
.highlight-prev i, .highlight-next i { font-size: 40px; }
@media (max-width: 767px){
  .highlight-prev i, .highlight-next i { font-size: 30px; }
}

/* Kleine Pfeile am Card-Button – optional */
.column-slider [data-card-arrows="on"] .column-slide-button i.fa-arrow-right {
  display: inline-block; font-size: 0.95em; line-height: 1; margin-left: .45em;
  transform: translateX(0); transition: transform .2s ease, opacity .2s ease; opacity: .9;
}
.column-slider [data-card-arrows="on"] .column-slide-button:hover i.fa-arrow-right {
  transform: translateX(3px); opacity: 1;
}

/* Panel-Top-Right Info im Content-Tab */
.k-field-name-overview .k-field-info { display: flex; justify-content: flex-end; margin-top: -2px; }
.kzt-overview-button {
  display: inline-block; padding: 7px 12px; border-radius: 8px; text-decoration: none;
  border: 1px solid var(--color-border, #ddd); background: var(--color-background, #fff); font-weight: 600; line-height: 1;
}
.kzt-overview-button:hover { border-color: var(--color-primary-500, #000); color: var(--color-primary-500, #000); }




/* ================================
   Modul 5 – Events Modul + Column-Slider
   ================================ */

/* Section (Padding per module-spacing Variablen) */
.events-slider {
	/*Custom BF border-radius: 25px;*/
	
  position: relative;
  overflow: hidden;
  z-index: 0;
  padding-top: var(--mod-pt-desktop, 60px);
  padding-bottom: var(--mod-pb-desktop, 60px);
}
@media (max-width: 1023px) {
  .events-slider {
    padding-top: var(--mod-pt-tablet, 40px);
    padding-bottom: var(--mod-pb-tablet, 40px);
  }
}
@media (max-width: 767px) {
  .events-slider {
    padding-top: var(--mod-pt-mobile, 24px);
    padding-bottom: var(--mod-pb-mobile, 24px);
  }
}

/* Grunge-Grafiken */
.events-slider .grunge-top,
.events-slider .grunge-bottom {
  background-color: var(--color-white);
  position: absolute;
  left: 0;
  width: 100%;
  display: block;
  z-index: 1;
  pointer-events: none;
}
.events-slider .grunge-top { top: 0; }
.events-slider .grunge-bottom { bottom: 0; }

/* Swiper-Wrapper */
.events-swiper {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* Slides (Fallbacks – Details kommen scoped aus PHP) */
.event-slide {
  position: relative;
  height: 600px; /* Fallback */
  background-size: cover;
  background-position: center;
  border-radius: 0px; /* Fallback */
  overflow: hidden;
  color: var(--color-white);
  display: flex;
  align-items: flex-end;
}
.event-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(30,30,30,0.75), transparent);
  z-index: 1;
}
.event-content {
  position: relative;
  z-index: 2;
  font-family: var(--font-sans);
}
.event-content h3 {
  margin: 0 0 10px;
  text-transform: uppercase;
  color: var(--color-white);
 
}
.event-content p {
  margin: 0;
  color: var(--color-white);
}

/* Header: Topline + Headline + Button */
.events-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin: 0 auto var(--events-header-gap, 24px);
  flex-wrap: wrap;
}
@media (max-width: 767px) {
  .events-header {
    gap: 16px;
    margin: 0 auto var(--events-header-gap, 16px);
  }
}
.events-header-left { min-width: 0; max-width: 100%; }
.events-header.align-left .events-header-left   { text-align: left;  margin-right: auto; margin-left: 0; }
.events-header.align-center .events-header-left { text-align: center;margin-left: auto; margin-right: auto; }
.events-header.align-right .events-header-left  { text-align: right; margin-left: auto; margin-right: 0; }

.events-topline-wrap { display: block; margin-bottom: 0; }
.events-topline,
.events-topline-prefix {
  font-family: var(--font-mono, 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
  line-height: 1.2; display: inline-block; vertical-align: baseline;
}
.events-topline-prefix { opacity: .75; }

.events-title {
  font-family: var(--font-bold, 'Panton Rust Black');
  color: var(--color-black);
  /* feste line-height hier optional entfernen – wird scoped gesetzt */
  /* line-height: 1.1; */
  margin: 0;
}

/* Header-Button */
.events-button {
  padding: 0px 0px!important;
  /*border: 1px solid #303030;*/
  color: var(--color-black);
  text-decoration: none;
  transition: all .25s ease;
  font-size: 18px!important;
  margin-left: auto;
  white-space: nowrap;
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-family: var(--font-headline, 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
  /*text-transform: uppercase;*/
  /*letter-spacing: 0.1em;*/
}
.events-button:hover { background: none; color: var(--color-black); }

/* Buttons in Karten – Basis (Details via scoped CSS) */
.kzt-module.events-slider .event-card-btn {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  border: 1px solid transparent;
  border-radius: 9999px;
  line-height: 1;
  text-decoration: none;
  font-size: 12px; /* Fallback */
  font-family: var(--font-sans, 'Roboto', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
  /*text-transform: uppercase;*/
}

/* Varianten */
.kzt-module.events-slider .event-card-btn[data-variant="secondary"] { background:#fff; color:#000; }
.kzt-module.events-slider .event-card-btn[data-variant="outline"]    { background:transparent; border-color: currentColor; }
.kzt-module.events-slider .event-card-btn[data-variant="ghost"]      { background:transparent; }

/* Controls */
.events-controls {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  margin-top: 30px;
  gap: 12px;
}
.events-controls .swiper-pagination {
  position: relative;
  justify-self: center;
  text-align: center;
}
.events-controls .swiper-pagination-bullet {
  width: 6px;
  height: 6px;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0.5;
  border-radius: 15;
  margin: 0 4px !important;
}
.events-controls .swiper-pagination-bullet-active {
  background-color: var(--color-black);
  opacity: 1;
}
.events-prev,
.events-next {
  appearance: none;
  border: none;
  background: transparent;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  height: 44px;
  width: 44px;
  display: grid;
  place-items: center;
  color: var(--color-black);
  opacity: 0.85;
  transition: transform .2s ease, opacity .2s ease;
}
.events-prev { justify-self: start; }
.events-next { justify-self: end; }
.events-prev:hover,
.events-next:hover { opacity: 1; transform: scale(1.04); }
.events-prev i,
.events-next i { font-size: 36px; display: block; }

@media (max-width: 767px) {
  .events-prev i, .events-next i { font-size: 30px; }
  .events-button { margin-top: 8px; }
}




/* ===================================
   Accordion (KZT) — global.css
   - summary ist Flex => Titel + Chevron IMMER inline
   - Chevron fest: /assets/img/chevron-up.svg (über CSS var)
   - D/T/M Spacing + Typo via Vars
   - keine Content-Animation
   =================================== */

.accordion-section{
  background: var(--acc-bg, var(--color-yellow, #FFD00A));
  padding-top: var(--acc-pt-d, 120px);
  padding-bottom: var(--acc-pb-d, 120px);
  text-align: left;
  position: relative;
  overflow: hidden;
}

@media (max-width:1024px){
  .accordion-section{
    padding-top: var(--acc-pt-t, 90px);
    padding-bottom: var(--acc-pb-t, 90px);
  }
}
@media (max-width:640px){
  .accordion-section{
    padding-top: var(--acc-pt-m, 60px);
    padding-bottom: var(--acc-pb-m, 60px);
  }
}

/* Grunge */
.accordion-section .grunge-top,
.accordion-section .grunge-bottom{
  background: var(--acc-gr-bg, var(--color-white, #fff));
  position: absolute;
  left: 0;
  width: 100%;
  height: auto;
  display: block;
  z-index: 0;
  pointer-events: none;
}
.accordion-section .grunge-top{ top: 0; }
.accordion-section .grunge-bottom{ bottom: 0; }

.accordion-wrapper{ position: relative; z-index: 2; }

/* Typo (Headline) */
.accordion-headline{
  font-size: var(--acc-head-d, var(--h3-size, 40px));
  line-height: var(--acc-head-lh-d, 1.1);
  font-family: var(--font-headline, inherit);
  color: var(--color-black, #000);
  margin: 0 0 2rem;
}
@media (max-width:1024px){
  .accordion-headline{
    font-size: var(--acc-head-t, var(--h3-size, 36px));
    line-height: var(--acc-head-lh-t, 1.1);
  }
}
@media (max-width:640px){
  .accordion-headline{
    font-size: var(--acc-head-m, var(--h3-size, 30px));
    line-height: var(--acc-head-lh-m, 1.15);
  }
}

/* Box */
.accordion-box{
  background: var(--acc-box-bg, #fff);
  border-radius: var(--acc-box-radius, 20px);
  padding: var(--acc-box-pad, 30px);
  width: var(--acc-box-w, 100%);
  max-width: var(--acc-box-maxw, 1080px);
  margin: 0 auto;
}

/* Details border */
.accordion-box details{
  border-top: var(--acc-border-w, 1px) solid var(--acc-border-color, #ddd);
}
.accordion-box details:first-of-type{ border-top: 0; }

/* Marker kill */
.accordion-box summary::-webkit-details-marker{ display:none; }
.accordion-box summary::marker{ content:""; }

/* ========= INLINE GARANTIE =========
   summary IST der Flex-Container.
*/
.accordion-box summary.accordion-header{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  padding: 15px 0;


  font-size: var(--acc-title-d, var(--h4-size, 18px));
  line-height: var(--acc-title-lh-d, 1.2);
  font-weight: 700;
  color: var(--color-black, #000);
}

/* Typo D/T/M für Titel */
@media (max-width:1024px){
  .accordion-box summary.accordion-header{
    font-size: var(--acc-title-t, var(--h4-size, 18px));
    line-height: var(--acc-title-lh-t, 1.2);
  }
}
@media (max-width:640px){
  .accordion-box summary.accordion-header{
    font-size: var(--acc-title-m, var(--h4-size, 17px));
    line-height: var(--acc-title-lh-m, 1.25);
  }
}

/* Title */
.accordion-title{
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  font-family: var(--font-bold);

}

/* Falls trotzdem irgendwo Markup reinkommt: keine Block-Margins */
.accordion-title p,
.accordion-title *{
  margin: 0 !important;
}

/* Chevron (fest, via CSS var) */
.accordion-chevron{
  width: var(--acc-chev-size, 34px);
  height: var(--acc-chev-size, 34px);
  flex: 0 0 var(--acc-chev-size, 34px);
  margin-left: auto;

  background-image: var(--acc-chev, url('/assets/img/chevron-up.svg'));
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  transition: transform .2s ease;
}

details[open] > summary.accordion-header .accordion-chevron{
  transform: rotate(180deg);
}

/* Content */
.accordion-content{
  padding: 0 0 15px;
  margin-top: 5px;

  font-size: var(--acc-body-d, 16px);
  line-height: var(--acc-body-lh-d, 1.55);
  color: var(--color-black, #000);

  /* keine Animation */
  animation: none !important;
  transition: none !important;
}
@media (max-width:1024px){
  .accordion-content{
    font-size: var(--acc-body-t, 16px);
    line-height: var(--acc-body-lh-t, 1.55);
  }
}
@media (max-width:640px){
  .accordion-content{
    font-size: var(--acc-body-m, 15px);
    line-height: var(--acc-body-lh-m, 1.6);
  }
}



/* ===================================
   Gallery Slider — #kzt-card-slider-reset
   =================================== */

.gallery-section{
  width:100%;

  /* Individuell (wenn gesetzt) schlägt Global */
  padding-top: var(
    --kzt-gallery-pt-d,
    var(--kzt-space-module-top-d,
      var(--kzt-space-section-top-d,
        var(--kzt-space-y-d, 96px)
      )
    )
  );

  padding-bottom: var(
    --kzt-gallery-pb-d,
    var(--kzt-space-module-bottom-d,
      var(--kzt-space-section-bottom-d,
        var(--kzt-space-y-d, 96px)
      )
    )
  );

  background: var(--color-white);
}

@media (max-width:1023px){
  .gallery-section{
    padding-top: var(
      --kzt-gallery-pt-t,
      var(--kzt-space-module-top-t,
        var(--kzt-space-section-top-t,
          var(--kzt-space-y-t, 72px)
        )
      )
    );

    padding-bottom: var(
      --kzt-gallery-pb-t,
      var(--kzt-space-module-bottom-t,
        var(--kzt-space-section-bottom-t,
          var(--kzt-space-y-t, 72px)
        )
      )
    );
  }
}

@media (max-width:767px){
  .gallery-section{
    padding-top: var(
      --kzt-gallery-pt-m,
      var(--kzt-space-module-top-m,
        var(--kzt-space-section-top-m,
          var(--kzt-space-y-m, 56px)
        )
      )
    );

    padding-bottom: var(
      --kzt-gallery-pb-m,
      var(--kzt-space-module-bottom-m,
        var(--kzt-space-section-bottom-m,
          var(--kzt-space-y-m, 56px)
        )
      )
    );
  }
}

.gallery-swiper{
  width:100%;
}

.gallery-swiper .swiper-slide{
  height: var(--kzt-gallery-h-d, 354px);
}

@media (max-width:1023px){
  .gallery-swiper .swiper-slide{
    height: var(--kzt-gallery-h-t, 300px);
  }
}

@media (max-width:767px){
  .gallery-swiper .swiper-slide{
    height: var(--kzt-gallery-h-m, 240px);
  }
}

.gallery-swiper .swiper-slide img{
  height:100%;
  width:100%;
  object-fit:cover;
  border-radius: var(--kzt-gallery-radius, 5px);
  display:block;
}

/* Pagination (wenn aktiv) */
.gallery-pagination{
  margin-top:20px;
  text-align:center;
  position:relative;
}

.gallery-pagination .swiper-pagination-bullet{
  background:#000;
  opacity:.3;
  width:10px;
  height:10px;
  margin:0 4px;
  border-radius:50%;
  transition:opacity .3s ease;
}

.gallery-pagination .swiper-pagination-bullet-active{
  opacity:1;
}

/* ===================================
   Gallery Slider — #kzt-card-slider-reset (Premium Final + Active Enhance)
   =================================== */

.gallery-section{
  width:100%;
  padding-top: var(
    --kzt-gallery-pt-d,
    var(--kzt-space-module-top-d,
      var(--kzt-space-section-top-d,
        var(--kzt-space-y-d, 96px)
      )
    )
  );
  padding-bottom: var(
    --kzt-gallery-pb-d,
    var(--kzt-space-module-bottom-d,
      var(--kzt-space-section-bottom-d,
        var(--kzt-space-y-d, 96px)
      )
    )
  );
  background: var(--color-white);
}

@media (max-width:1023px){
  .gallery-section{
    padding-top: var(
      --kzt-gallery-pt-t,
      var(--kzt-space-module-top-t,
        var(--kzt-space-section-top-t,
          var(--kzt-space-y-t, 72px)
        )
      )
    );
    padding-bottom: var(
      --kzt-gallery-pb-t,
      var(--kzt-space-module-bottom-t,
        var(--kzt-space-section-bottom-t,
          var(--kzt-space-y-t, 72px)
        )
      )
    );
  }
}

@media (max-width:767px){
  .gallery-section{
    padding-top: var(
      --kzt-gallery-pt-m,
      var(--kzt-space-module-top-m,
        var(--kzt-space-section-top-m,
          var(--kzt-space-y-m, 56px)
        )
      )
    );
    padding-bottom: var(
      --kzt-gallery-pb-m,
      var(--kzt-space-module-bottom-m,
        var(--kzt-space-section-bottom-m,
          var(--kzt-space-y-m, 56px)
        )
      )
    );
  }
}

.gallery-swiper{ width:100%; }

.gallery-swiper .swiper-slide{
  height: var(--kzt-gallery-h-d, 354px);
  transition: transform .35s ease;
  transform: scale(1);
  opacity: 1;
}

@media (max-width:1023px){
  .gallery-swiper .swiper-slide{ height: var(--kzt-gallery-h-t, 300px); }
}
@media (max-width:767px){
  .gallery-swiper .swiper-slide{ height: var(--kzt-gallery-h-m, 240px); }
}

/* Fixed Width Mode */
.gallery-swiper.is-fixed-width .swiper-slide{ width: var(--kzt-gallery-w-d, 640px); }
@media (max-width:1023px){
  .gallery-swiper.is-fixed-width .swiper-slide{ width: var(--kzt-gallery-w-t, 520px); }
}
@media (max-width:767px){
  .gallery-swiper.is-fixed-width .swiper-slide{ width: var(--kzt-gallery-w-m, 360px); }
}

/* Optional Active Scale */
.gallery-swiper.has-active-scale .swiper-slide{
  transform: scale(var(--kzt-gallery-scale-inactive-d, 0.96));
}
.gallery-swiper.has-active-scale .swiper-slide.swiper-slide-active{
  transform: scale(var(--kzt-gallery-scale-active-d, 1));
}
@media (max-width:1023px){
  .gallery-swiper.has-active-scale .swiper-slide{
    transform: scale(var(--kzt-gallery-scale-inactive-t, 0.96));
  }
  .gallery-swiper.has-active-scale .swiper-slide.swiper-slide-active{
    transform: scale(var(--kzt-gallery-scale-active-t, 1));
  }
}
@media (max-width:767px){
  .gallery-swiper.has-active-scale .swiper-slide{
    transform: scale(var(--kzt-gallery-scale-inactive-m, 0.96));
  }
  .gallery-swiper.has-active-scale .swiper-slide.swiper-slide-active{
    transform: scale(var(--kzt-gallery-scale-active-m, 1));
  }
}

/* Figure / media */
.gallery-figure{
  margin:0;
  height:100%;
  display:flex;
  flex-direction:column;
}

.gallery-media{
  position:relative;
  height:100%;
}

.gallery-media img{
  height:100%;
  width:100%;
  object-fit:cover;
  border-radius: var(--kzt-gallery-radius, 5px);
  display:block;
  transition: filter .35s ease;
  filter: none;
}

/* Active Enhance: only active slide gets filter */
.gallery-swiper.has-active-enhance .swiper-slide.swiper-slide-active .gallery-media img{
  filter:
    contrast(var(--kzt-gallery-enh-contrast-d, 1.05))
    saturate(var(--kzt-gallery-enh-saturate-d, 1.08))
    brightness(var(--kzt-gallery-enh-brightness-d, 1.02));
}

@media (max-width:1023px){
  .gallery-swiper.has-active-enhance .swiper-slide.swiper-slide-active .gallery-media img{
    filter:
      contrast(var(--kzt-gallery-enh-contrast-t, 1.05))
      saturate(var(--kzt-gallery-enh-saturate-t, 1.08))
      brightness(var(--kzt-gallery-enh-brightness-t, 1.02));
  }
}

@media (max-width:767px){
  .gallery-swiper.has-active-enhance .swiper-slide.swiper-slide-active .gallery-media img{
    filter:
      contrast(var(--kzt-gallery-enh-contrast-m, 1.03))
      saturate(var(--kzt-gallery-enh-saturate-m, 1.06))
      brightness(var(--kzt-gallery-enh-brightness-m, 1.01));
  }
}

/* Inactive overlay */
.gallery-swiper.has-inactive-overlay .swiper-slide .gallery-media::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: var(--kzt-gallery-radius, 5px);
  background: var(--kzt-gallery-inactive-overlay-color, #000);
  opacity: var(--kzt-gallery-inactive-overlay-opacity, .45);
  transition: opacity .35s ease;
  pointer-events:none;
}
.gallery-swiper.has-inactive-overlay .swiper-slide.swiper-slide-active .gallery-media::after{
  opacity: 0;
}

/* Caption */
.gallery-caption{
  margin-top: 10px;
  line-height: 1.4;
  opacity: .85;
  font-weight: var(--kzt-gallery-caption-weight, 400);
}

/* Pagination Abstand D/T/M */
.gallery-pagination{
  margin-top: var(--kzt-gallery-pg-mt-d, 20px);
  text-align:center;
  position:relative;
}
@media (max-width:1023px){
  .gallery-pagination{ margin-top: var(--kzt-gallery-pg-mt-t, 20px); }
}
@media (max-width:767px){
  .gallery-pagination{ margin-top: var(--kzt-gallery-pg-mt-m, 20px); }
}

/* Pagination Bullets */
.gallery-pagination .swiper-pagination-bullet{
  background: var(--kzt-gallery-pg-color, #000);
  opacity: var(--kzt-gallery-pg-opacity, .3);
  width: var(--kzt-gallery-pg-size, 10px);
  height: var(--kzt-gallery-pg-size, 10px);
  margin: 0 var(--kzt-gallery-pg-gap, 4px) !important;
  border-radius: var(--kzt-gallery-pg-radius, 999px);
  transition: opacity .3s ease;
}
.gallery-pagination .swiper-pagination-bullet-active{
  opacity: var(--kzt-gallery-pg-active-opacity, 1);
}

/* ===================================
   INTRO MODULE (KZT) — extracted CSS
   =================================== */



.kzt-module.intro-block{
  display: flow-root;
  margin: 0 !important;
  border: 0;

  border-top-left-radius: var(--intro-radius-top, 0px);
  border-top-right-radius: var(--intro-radius-top, 0px);
  border-bottom-left-radius: var(--intro-radius-bottom, 0px);
  border-bottom-right-radius: var(--intro-radius-bottom, 0px);

  overflow: var(--intro-section-clip, visible);
}

.kzt-module.intro-block .intro-wrap,
.kzt-module.intro-block .intro-inner{
  margin: 0;
}

.kzt-module.intro-block .intro-wrap.grid{
  max-width: var(--kzt-grid-max, 1760px);
  margin-inline: auto;
  padding-inline: 0px;
  box-sizing: border-box;
  width: 100%;
}
@media (max-width:1023px){
  .kzt-module.intro-block .intro-wrap.grid{
    padding-inline: var(--kzt-grid-pad, 20px);
  }
}

.kzt-module.intro-block .intro-wrap.fluid{
  max-width: none;
  margin: 0;
  padding-inline: var(--kzt-grid-pad, 20px);
  box-sizing: border-box;
  width: 100%;
}

.kzt-module.intro-block .intro-wrap.fluid-no-padding{
  max-width: none;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  width: 100%;
}

.kzt-module.intro-block .intro-inner{
  width: var(--intro-width, 100%);
  color: var(--intro-color, inherit);
  max-width: none !important;
}

.kzt-module.intro-block .intro-inner.align-center{ margin-inline:auto; }
.kzt-module.intro-block .intro-inner.align-left{ margin-right:auto; }
.kzt-module.intro-block .intro-inner.align-right{ margin-left:auto; }

.kzt-module.intro-block .intro-inner.ta-left{ text-align:left; }
.kzt-module.intro-block .intro-inner.ta-center{ text-align:center; }
.kzt-module.intro-block .intro-inner.ta-right{ text-align:right; }

@media (max-width:767px){
  .kzt-module.intro-block .intro-inner.mobile-full{ width: 100%; }
}

.kzt-module.intro-block .intro-inner .text{
  max-width: none !important;
  width: 100%;
}

/* Type: sub/head/body */
.kzt-module.intro-block .subheadline{
  line-height: var(--sub-lh-d);
  font-size: var(--sub-fs-d);
  letter-spacing: var(--sub-ls, 0em);
  margin: 0;
  color: var(--intro-color, inherit) !important;
}

.kzt-module.intro-block .headline{
  line-height: var(--head-lh-d);
  font-size: var(--head-fs-d);
  letter-spacing: var(--head-ls, 0em);
  margin: 0;
  color: var(--intro-color, inherit) !important;
  text-transform: var(--intro-head-transform, none);
}

.kzt-module.intro-block .text{
  max-width: 700px;
  width: 100%;
  font-family: var(--intro-font, 'Roboto', sans-serif);
  line-height: var(--body-lh-d);
  font-size: var(--body-fs-d);
  letter-spacing: var(--body-ls, 0em);
}

@media (max-width:1023px){
  .kzt-module.intro-block .subheadline{ line-height: var(--sub-lh-t); font-size: var(--sub-fs-t); }
  .kzt-module.intro-block .headline{ line-height: var(--head-lh-t); font-size: var(--head-fs-t); }
  .kzt-module.intro-block .text{ line-height: var(--body-lh-t); font-size: var(--body-fs-t); }
}
@media (max-width:767px){
  .kzt-module.intro-block .subheadline{ line-height: var(--sub-lh-m); font-size: var(--sub-fs-m); }
  .kzt-module.intro-block .headline{ line-height: var(--head-lh-m); font-size: var(--head-fs-m); }
  .kzt-module.intro-block .text{ line-height: var(--body-lh-m); font-size: var(--body-fs-m); }
}

/* =========================================================
   GAP: Subheadline → Headline (NEU)
   - greift nur wenn beide existieren
   - Headline bekommt margin-top über Vars
   ========================================================= */
.kzt-module.intro-block[data-has-sub="1"][data-has-head="1"] .headline{
  margin-top: var(--intro-gap-subhead-d, 10px);
}
@media (max-width:767px){
  .kzt-module.intro-block[data-has-sub="1"][data-has-head="1"] .headline{
    margin-top: var(--intro-gap-subhead-m, 8px);
  }
}

/* #ftype scaling */
.kzt-module.intro-block[data-ft-sub="1"] .subheadline{
  font-size: clamp(
    var(--sub-fs-m),
    calc(var(--sub-fs-m) + (var(--sub-fs-d) - var(--sub-fs-m)) * ((100vw - var(--ft-vw-min)) / (var(--ft-vw-max) - var(--ft-vw-min)))),
    var(--sub-fs-d)
  );
}
.kzt-module.intro-block[data-ft-head="1"] .headline{
  font-size: var(--head-override, clamp(
    var(--head-fs-m),
    calc(var(--head-fs-m) + (var(--head-fs-d) - var(--head-fs-m)) * ((100vw - var(--ft-vw-min)) / (var(--ft-vw-max) - var(--ft-vw-min)))),
    var(--head-fs-d)
  ));
}
.kzt-module.intro-block[data-ft-body="1"] .text{
  font-size: var(--body-override, clamp(
    var(--body-fs-m),
    calc(var(--body-fs-m) + (var(--body-fs-d) - var(--body-fs-m)) * ((100vw - var(--ft-vw-min)) / (var(--ft-vw-max) - var(--ft-vw-min)))),
    var(--body-fs-d)
  ));
}

/* KirbyText defaults */
.kzt-module.intro-block .text > *:first-child{ margin-top: 0; }
.kzt-module.intro-block .text > *:last-child{ margin-bottom: 0; }
.kzt-module.intro-block .text p{ margin: 0 0 0.9em 0; }
.kzt-module.intro-block .text strong{ font-weight: 700; }
.kzt-module.intro-block .text em{ font-style: italic; }

.kzt-module.intro-block .text h2,
.kzt-module.intro-block .text h3{
  margin: 1.1em 0 0.5em 0;
  line-height: 1.15;
}
.kzt-module.intro-block .text h2{ font-size: 1.15em; }
.kzt-module.intro-block .text h3{ font-size: 1.05em; }

.kzt-module.intro-block .text a{
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.kzt-module.intro-block .text a:hover{ text-decoration-thickness: 2px; }

.kzt-module.intro-block .text ul,
.kzt-module.intro-block .text ol{ margin: 0 0 1em 1.2em; }
.kzt-module.intro-block .text li{ margin: 0.25em 0; }

/* Gap Text ↔ Head/Sub:
   nur wenn Text da ist UND (Sub oder Head existieren) */
.kzt-module.intro-block[data-has-text="1"][data-has-head-or-sub="1"] .intro-inner .text{
  margin-top: var(--intro-gap-d, 16px);
}
@media (max-width:767px){
  .kzt-module.intro-block[data-has-text="1"][data-has-head-or-sub="1"] .intro-inner .text{
    margin-top: var(--intro-gap-m, 12px);
  }
}
.kzt-module.intro-block[data-has-text="1"][data-has-head-or-sub="0"] .intro-inner .text{
  margin-top: 0;
}
/* ===================================
   MODUL 8 – INFO SECTION
   =================================== */
.info-section {
  background-color: var(--color-yellow);
  position: relative;
  padding: 8rem 0rem 8rem;
  overflow: hidden;
  text-align: center;
}

.info-section .grunge-top {
  background-color: var(--color-white);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1;
  pointer-events: none;
}

.info-box {
  background: var(--color-white);
  border-radius: 5px;
  padding: 40px;
  max-width: 850px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.info-headline {
  font-size: var(--h4-size);
  font-family: var(--font-headline);
  color: var(--color-black);
  margin-bottom: 1.5rem;
}

.info-text {
  /*font-size: var(--body-size);
  line-height: 1;*/
  color: var(--color-black);
  margin-bottom: 2rem;
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.social-icons img {
  width: 32px;
  height: 32px;
  transition: transform 0.3s ease;
}

.social-icons a:hover img {
  transform: scale(1.1);
}

/* Berni Grafik */
.berni {
  position: absolute;
  top: 150px;
  bottom: 0;
  left: 0;
  width: 180px;
  z-index: 3;
}

/* ===================================
   FOOTER 
   =================================== */
   
   

/* Footer-Root darf niemals selbst Grid-Container-Regeln bekommen */
.site-footer.grid,
.site-footer.fluid,
.site-footer.fluid-no-padding{
  max-width: none !important;
  margin: 0 !important;
  padding-inline: 0 !important;
  width: 100% !important;
}

.site-footer{
  color: var(--color-white);
  padding-top: 5rem;
  padding-bottom: 2.5rem;
  padding-left: 0;
  padding-right: 0;

  /* Defaults – werden von PHP überschrieben */
  --footer-phone-d: 72px;
  --footer-phone-t: 56px;
  --footer-phone-m: 40px;

  --footer-email-d: 72px;
  --footer-email-t: 56px;
  --footer-email-m: 40px;

  --footer-small-d: 16px;
  --footer-small-t: 15px;
  --footer-small-m: 14px;

  /* Footer-Background */
  --footer-bg: #0a0a0a;

  /* ===========================
     NEU: Footer Padding D/T/M
     (Panel -> PHP setzt --footer-pad-d/t/m)
     =========================== */
  --footer-pad-w: var(--kzt-grid-pad, 20px);
  --footer-pad-d: var(--kzt-grid-pad, 20px);
  --footer-pad-t: var(--kzt-grid-pad, 20px);
  --footer-pad-m: var(--kzt-grid-pad, 20px);

  /* EIN Token, das die Layouts nutzen */
  --footer-pad: var(--footer-pad-d);

  /* Footer Grid Max (optional via PHP inline var) */
  /* Fallback: globales Grid -> 1760px */
  --footer-grid-max: var(--kzt-grid-max, 1760px);

  /* ===========================
     NEU: Legal Typo separat
     =========================== */
  --footer-legal-d: var(--footer-text-d, 14px);
  --footer-legal-t: var(--footer-text-t, 14px);
  --footer-legal-m: var(--footer-text-m, 14px);
  --footer-legal-transform: none;

  position: relative;
  isolation: isolate;
  overflow: visible;
}

/* Tablet/Mobile switch für --footer-pad */
@media (max-width:1023px){
  .site-footer{ --footer-pad: var(--footer-pad-t); }
}
@media (max-width:767px){
  .site-footer{ --footer-pad: var(--footer-pad-m); }
}

@media (min-width:1761px){
  .site-footer{
    --footer-pad: var(--footer-pad-w);
  }
}

/* ===== Background-Mode ===== */
.site-footer.bg-inner{
  background: transparent;
}
.site-footer.bg-inner .footer-inner{
  background: var(--footer-bg);
}

/* Full-bleed Background über pseudo layer */
.site-footer.bg-full{
  background: var(--footer-bg);
  border-bottom-left-radius: 35px;
  border-bottom-right-radius: 35px;
}

/*.site-footer.bg-full::before{
  content:"";
  position:absolute;
  z-index:-1;
  top:0;
  bottom:0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50vw);
  background: var(--footer-bg);
  pointer-events:none;
}*/

/* Root overflow-x safety */
html, body{
  max-width: 100%;
  overflow-x: clip;
}

/* ===== Footer Inner = eigener Container (keine globalen .inner Side-Effects) ===== */
.site-footer .footer-inner{
  box-sizing: border-box;
  margin: 0;
  width: 100%;
}

/* GRID: nutzt globales Grid – und optional Footer-Override */
.site-footer .footer-inner.grid{
  max-width: var(--footer-grid-max, var(--kzt-grid-max, 1760px));
  margin: 0 auto;
  /*padding-inline: var(--footer-pad) !important;*/
}

/* FLUID: volle Breite mit Padding (BÜNDIG!) */
.site-footer .footer-inner.fluid{
  max-width: none;
  margin: 0;
  padding-inline: var(--footer-pad) !important;
}

/* FULL: volle Breite ohne Padding */
.site-footer .footer-inner.fluid-no-padding{
  max-width: none;
  margin: 0;
  padding-inline: 0 !important;
}

/* ===== TOP ===== */
.footer-top{
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 4rem;
  align-items: start;
  margin-bottom: 10rem !important;
}
@media (max-width:1023px){
  .footer-top{ grid-template-columns: 1fr; gap: 2rem; }
}

/* Topline */
.footer-topline{
  letter-spacing: 0.06rem;
  font-size: 15px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: baseline;
  color: var(--color-white);
  font-family: 'Roboto', sans-serif;
  margin-bottom: 30px;
  opacity: .9;
}

/* Big lines */
.footer-big p{
  margin: 0 0 .2em 0;
  line-height: 1;
  letter-spacing: .2px;
  color: var(--color-white);
  font-family: var(--font-headline);
}
.footer-big a{ color: inherit; text-decoration: underline; }
.footer-big a:hover{ text-decoration: none; }

.footer-big .phone{ font-size: var(--footer-phone-d); }
.footer-big .email{ font-size: var(--footer-email-d); }
@media (max-width:1023px){
  .footer-big .phone{ font-size: var(--footer-phone-t); }
  .footer-big .email{ font-size: var(--footer-email-t); }
}
@media (max-width:767px){
  .footer-big .phone{ font-size: var(--footer-phone-m); }
  .footer-big .email{ font-size: var(--footer-email-m); }
}

/* Right column */
.footer-right{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 3rem;
}
@media (max-width:767px){
  .footer-right{ grid-template-columns: 1fr;margin-top: 30px; }
}

/* Separator */
.footer-separator{
  border: none;
  border-top: 1px solid #ddd;
  margin-top: 4rem !important;
  margin-bottom: 0.5rem !important;
}

/* ===== BOTTOM ===== */
.footer-bottom{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 1.25rem 2rem;
  padding-top: .25rem;
}

.footer-left{
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  min-width: 0;
}

.footer-left .copyright,
.site-footer .footer-claim{
  margin: 0;
  padding: .3rem 0 1rem;
  line-height: 1.2;
}

/* Links */
.site-footer .footer-links{
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.1rem;
}
.site-footer .footer-links a{
  color: var(--color-yellow) !important;
  font-weight: 500;
  text-decoration: none;
}
.site-footer .footer-links a:hover{
  color: var(--color-black) !important;
  text-decoration: underline;
}

/* Right bottom */
.site-footer .footer-right-bottom{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  /*gap: .75rem;*/
  min-width: 0;
  text-align:right;
}

.site-footer .footer-claim{
  font-family: var(--font-headline, 'Soehne Kraeftig', sans-serif);
  font-size: clamp(14px, 1.4vw, 20px);
  letter-spacing: .02em;
  white-space: nowrap;
  min-width: 0;
}

/* Social */
.site-footer .footer-social{
  display:flex;
  align-items:center;
  gap:.6rem;
}
.site-footer .footer-social img{
  display:block;
  width:20px;
  height:20px;
}

/* Mobile bottom: stacked */
@media (max-width:640px){
  .footer-bottom{
    grid-template-columns: 1fr;
    align-items: start;
    gap: .9rem;
  }

  .site-footer .footer-right-bottom{
    justify-content: flex-start;
    text-align: left;
    flex-wrap: wrap;
    row-gap: .5rem;
  }

  .site-footer .footer-claim{
    font-size: 17px; 
    white-space: normal;
    line-height: 1.15;
  }
}

/* ================================
   FOOTER TYPO (RFCP)
   Text & Links D/T/M via CSS Vars
   ================================ */

/* Defaults – werden von PHP überschrieben */
.site-footer{
  --footer-text-d: 14px;
  --footer-text-t: 14px;
  --footer-text-m: 14px;
}

/* Rechts: Adresse/Kontakt + Links */
.footer-right p,
.footer-right a,
.footer-right li{
  color: var(--color-white);
  font-family: 'Roboto', sans-serif;
  line-height: 1.2;
  margin: 0 0 .4rem 0;
  font-size: var(--footer-text-d);
}

/* Tablet */
@media (max-width:1023px){
  .footer-right p,
  .footer-right a,
  .footer-right li{
    font-size: var(--footer-text-t);
  }
}

/* Mobile */
@media (max-width:767px){
  .footer-right p,
  .footer-right a,
  .footer-right li{
    font-size: var(--footer-text-m);
  }
}

/* ===================================
   Legal Links (unten links)
   NEU: Größe separat + Uppercase steuerbar
   =================================== */

.site-footer .footer-legal{
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .75rem;
}

.site-footer .footer-legal a{
  color: var(--color-white);
  font-family: var(--font-bold);
  font-size: var(--footer-legal-d);
  text-decoration: none;
  text-transform: var(--footer-legal-transform, none);
}

.site-footer .footer-legal a:hover{
  text-decoration: underline;
}

.site-footer .footer-legal-sep{
  color: rgba(255,255,255,.6);
  line-height: 1;
  user-select: none;
}

/* Tablet */
@media (max-width:1023px){
  .site-footer .footer-legal a{
    color: var(--color-white);
    font-size: var(--footer-legal-t);
  }
}

/* Mobile – HARTE Farbe, überschreibt globale a{} Regeln */
@media (max-width:767px){
  .site-footer .footer-legal a{
    color: var(--color-white) !important;
    font-size: var(--footer-legal-m);
  }
}



/* ===================================
   MODDUL 10 – BREADCRUMP
   =================================== */

.breadcrumb {
  font-size: var(--body-size);
  margin-bottom: 1em;
  color: var(--breadcrumb-color);
}

.breadcrumb ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
}

.breadcrumb li + li::before {
  content: "›";
  margin: 0 0.5em;
  color: var(--breadcrumb-separator);
}

.breadcrumb a {
  text-decoration: none;
  color: var(--breadcrumb-color);
}

.breadcrumb li:last-child {
  opacity: 0.6;
}


/* ============================
   MODUL — BILD/TEXT + ACCORDION PRO (FINAL)
   Updates:
   - ✅ Mobile Abstand Bild ↔ Text via Panel: --bt-img-text-gap-m
   - ✅ Chevron INLINE wirklich direkt hinter Titel (nicht "rechts")
   - ✅ Accordion Abstand Headline → Text (nur vertikal) via --bt-acc-content-gap-*
   - ✅ Background stabil über details::before + CSS-Var --bt-acc-item-bg
   - ✅ Keine doppelten Definitionen
============================ */

/* ============================
   BILD / TEXT (BESTEHEND)
============================ */

.bild-text-block {
  position: relative;
  overflow: visible;
  padding-top: var(--bt-space-top-d, 60px);
  padding-bottom: var(--bt-space-bot-d, 60px);
}

.bild-text-block .inner {
  display: flex;
  gap: 40px;
  align-items: flex-start;
}

.bild-text-block.left .bild  { order: 1; }
.bild-text-block.left .text  { order: 2; }
.bild-text-block.right .bild { order: 2; }
.bild-text-block.right .text { order: 1; }

.bild-text-block .bild,
.bild-text-block .text { box-sizing: border-box; }

.bild-text-block .bild { width: var(--img-width); }

.bild-text-block .text {
  width: var(--text-width);
  padding: 0;
  text-align: left;
}

.bild-text-block.left .text  { padding-left: 30px; }
.bild-text-block.right .text { padding-right: 30px; }

.bild-text-block .text.align-top    { align-self: flex-start; }
.bild-text-block .text.align-center { align-self: center; }
.bild-text-block .text.align-bottom { align-self: flex-end; }

.bild-text-block .bild img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  border-radius: var(--bt-img-radius, 5px);
}

.bild-text-block .bild.has-border img {
  border: var(--bt-img-border-w, 1px) solid var(--bt-img-border-c, #000);
}

.bild-text-block .text .headline {
  margin-bottom: var(--bt-head-gap-d, 16px);
  font-size: var(--bt-head-d, 28px);
}

.bild-text-block .text-content {
  font-size: var(--bt-text-d, 17px);
  line-height: 1.6;
}

.bild-text-block .text-content > *:first-child { margin-top: 0; }
.bild-text-block .text-content > *:last-child  { margin-bottom: 0; }

/* PDF Download Link */
.bild-text-pdf-wrap { margin-top: 14px; }

.bild-text-pdf {
  display: inline-block;
  color: #C7032E;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgba(199, 3, 46, 0.85);
  transition: opacity 0.2s ease, text-decoration-color 0.2s ease;
}
.bild-text-pdf:hover {
  opacity: 0.85;
  text-decoration-color: transparent;
}

/* Grunge-Grafiken */
.grunge-wrapper.top,
.grunge-wrapper.bottom {
  width: 100%;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
.grunge-wrapper.top { margin-bottom: -20px; }
.grunge-wrapper.bottom { margin-top: -20px; }
.grunge-wrapper img {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================
   ACCORDION PRO
============================ */

.bild-text-accordion-box {
  max-width: 1080px;
  margin: 20px auto 0;
  background: var(--bt-acc-box-bg, transparent);
  border-radius: var(--bt-acc-radius, 12px);
}

/* Details */
.bild-text-accordion-box details {
  position: relative;
  overflow: hidden;
  border-radius: var(--bt-acc-radius, 12px);
}

.bild-text-accordion-box details + details {
  margin-top: var(--bt-acc-gap, 10px);
}

/* Background-Layer */
.bild-text-accordion-box details::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bt-acc-item-bg, var(--bt-acc-item-bg-default, #fff));
  z-index: 0;
  pointer-events: none;
}

.bild-text-accordion-box summary,
.bild-text-accordion-box .accordion-content {
  position: relative;
  z-index: 1;
}

/* Header */
.bild-text-accordion-box summary.accordion-header {
  list-style: none;
  cursor: pointer;

  display: flex;
  align-items: center;
  gap: 8px;

  padding: var(--bt-acc-pad-head-d, 10px);

  font-size: var(--bt-acc-head-size-d, 17px);
  line-height: var(--bt-acc-head-lh-d, 1.2);
  font-weight: 700;
  color: var(--color-black, #000);

  justify-content: flex-start; /* wichtig für inline */
}

.bild-text-accordion-box summary::-webkit-details-marker { display: none; }

/* Titel */
.bild-text-accordion-box .acc-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* INLINE Titel: zwingend inline layout */
.bild-text-accordion-box .acc-title-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Chevron */
.bild-text-accordion-box .chevron {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  transition: transform 0.25s ease;
}

/* Rotate */
.bild-text-accordion-box details[open] .chevron {
  transform: rotate(180deg);
}

/* Chevron Position — RIGHT */
.bild-text-accordion-box.chev-right summary.accordion-header {
  justify-content: space-between;
}

.bild-text-accordion-box.chev-right .chevron {
  margin-left: auto;
}

/* Chevron Position — INLINE (direkt hinter Titel) */
.bild-text-accordion-box.chev-inline summary.accordion-header {
  justify-content: flex-start;
}

.bild-text-accordion-box.chev-inline .chevron {
  margin-left: 0 !important;
}

/* Content */
.bild-text-accordion-box .accordion-content {
  /* ✅ Abstand Header → Content (nur nach oben!) */
  padding-top: var(--bt-acc-content-gap-d, 10px);

  /* ✅ Body Padding LR + Bottom */
  padding-right: var(--bt-acc-pad-body-d, 10px);
  padding-bottom: var(--bt-acc-pad-body-d, 10px);
  padding-left: var(--bt-acc-pad-body-d, 10px);

  font-size: var(--bt-acc-text-size-d, 17px);
  line-height: var(--bt-acc-text-lh-d, 1.6);
}

.bild-text-accordion-box .accordion-content > *:first-child { margin-top: 0; }
.bild-text-accordion-box .accordion-content > *:last-child  { margin-bottom: 0; }

/* ============================
   TABLET
============================ */

@media (max-width: 1024px) {
  .bild-text-block .text .headline {
    margin-bottom: var(--bt-head-gap-t, 16px);
    font-size: var(--bt-head-t, 24px);
  }

  .bild-text-accordion-box summary.accordion-header {
    padding: var(--bt-acc-pad-head-t, 10px);
    font-size: var(--bt-acc-head-size-t, 17px);
    line-height: var(--bt-acc-head-lh-t, 1.2);
  }

  .bild-text-accordion-box .accordion-content {
    padding-top: var(--bt-acc-content-gap-t, 10px);

    padding-right: var(--bt-acc-pad-body-t, 10px);
    padding-bottom: var(--bt-acc-pad-body-t, 10px);
    padding-left: var(--bt-acc-pad-body-t, 10px);

    font-size: var(--bt-acc-text-size-t, 17px);
    line-height: var(--bt-acc-text-lh-t, 1.6);
  }
}

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

@media (max-width: 768px) {
  .bild-text-block .inner {
    flex-direction: column;
  }

  .bild-text-block .bild,
  .bild-text-block .text {
    width: 100% !important;
    padding: 0 !important;
  }

  /* ✅ NEU: Abstand Bild ↔ Text (Panel gesteuert) */
  .bild-text-block .bild {
    margin-bottom: var(--bt-img-text-gap-m, 30px);
  }
  .bild-text-block.mobile-reverse .bild {
    margin-bottom: 0;
    margin-top: var(--bt-img-text-gap-m, 30px);
  }

  .bild-text-block .text .headline {
    margin-bottom: var(--bt-head-gap-m, 14px);
    font-size: var(--bt-head-m, 22px);
  }

  .bild-text-accordion-box summary.accordion-header {
    padding: var(--bt-acc-pad-head-m, 10px);
    font-size: var(--bt-acc-head-size-m, 17px);
    line-height: var(--bt-acc-head-lh-m, 1.2);
  }

  .bild-text-accordion-box .accordion-content {
    padding-top: var(--bt-acc-content-gap-m, 10px);

    padding-right: var(--bt-acc-pad-body-m, 10px);
    padding-bottom: var(--bt-acc-pad-body-m, 10px);
    padding-left: var(--bt-acc-pad-body-m, 10px);

    font-size: var(--bt-acc-text-size-m, 17px);
    line-height: var(--bt-acc-text-lh-m, 1.6);
  }
}


/* ================================
   MODUL 12 Fullscreen Cover
   ================================ */

.fullscreen-cover {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.fullscreen-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-size: cover;
  background-position: center;
  z-index: 0;
}

.fullscreen-content {
  position: relative;
  z-index: 1;
  max-width: 90vw;
  text-align: center;
  padding: 2rem;
}

/* Text-Ausrichtung */
.align-left   { text-align: left; }
.align-center { text-align: center; }
.align-right  { text-align: right; }

/* Vertikale Ausrichtung */
.valign-top    { align-self: flex-start; margin-top: 10vh; }
.valign-center { align-self: center; }
.valign-bottom { align-self: flex-end; margin-bottom: 10vh; }

.scroll-arrow {
  position: absolute;
  bottom: 2rem;
  z-index: 2;
  animation: bounce 2s infinite;
}

.scroll-left {
  left: 2rem;
  transform: none;
}
.scroll-center {
  left: 50%;
  transform: translateX(-50%);
}
.scroll-right {
  right: 2rem;
  transform: none;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

pre {
  background: rgba(0,0,0,0.6);
  padding: 1rem;
  overflow: auto;
  margin-top: 2rem;
  border-radius: 4px;
  text-align: left;
}


/* ============================
   MODUL 13 — DIVIDER
============================ */

.divider-section {
  text-align: left;
}

.divider-above,
.divider-below {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: var(--body-size);
  color: var(--color-text);
}


.divider-line-wrap {
  display: flex;
  align-items: center;
  /*margin: 1rem 0;*/
}

.divider-line {
  margin: 0 auto;
  display: block;
}


.divider-text {
  font-size: var(--body-size);
  color: var(--color-text);
}

.divider-link {
  font-size: var(--body-size);
  color: var(--color-link, var(--color-text));
  text-decoration: underline;
  transition: color 0.3s;
}

.divider-link:hover {
  color: var(--color-link-hover, var(--color-black));
}


.divider-link:hover {
  color: var(--color-link-hover, var(--color-black));
}




/* ============================
   BLOCK — COUNTERS
============================ */
.counters-module {
  background: var(--cm-bg, #111);
  color: var(--cm-txt, #fff);
}
.counters-module .inner {}
.counters-module.align-center { text-align: center; }
.counters-module.align-right  { text-align: right; }

.counters-grid {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
@media (max-width: 1100px) {
  .counters-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .counters-grid { grid-template-columns: 1fr; }
}

.counter-card {
  position: relative;
  border-bottom-right-radius: 0px;
  padding:22px 0px;
  background: color-mix(in srgb, var(--cm-bg) 90%, #0000);
  box-shadow: inset 0 -1px rgba(0,0,0,0.2);
}

.counter-number {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  line-height: .9;
  letter-spacing: -0.02em;
}

.counter-value {
  font-family: var(--font-bold);
  font-weight: 800;
  font-size: var(--cm-num, clamp(32px, 7vw, 112px));
}

/* Affix (Suffix/Prefix) gleich groß wie Zahl */
.counter-affix {
  font-weight: 800;
  font-size: var(--cm-num, clamp(32px, 7vw, 112px));
  line-height: .9;
}

.counter-label {
  margin-top: 12px;
  font-size: var(--cm-lbl, clamp(13px, 2.6vw, 18px));
  opacity: .85;
}

@media (prefers-reduced-motion: reduce) {
  .counter-card,
  .counter-number,
  .counter-value { transition: none !important; }
}


/* ============================
   BACKGROUND IMAGE (KZT)
============================ */

:root {
  --content-max: 1200px;
  --page-padding: clamp(16px, 4vw, 48px);
}

/* Block-Breite/Container + Hintergrundfarbe */
.bgimage-block {
  width: 100%;
  margin-inline: auto;
  background-color: var(--bg-color, transparent);
  border-radius: var(--rad-tl) var(--rad-tr) var(--rad-br) var(--rad-bl);
  overflow: hidden;
}
.bgimage-block.grid { max-width: var(--content-max); }
.bgimage-block.fluid,
.bgimage-block.fluid-no-padding { max-width: none; }

/* Surface: Bild + Gaps seitlich (inset) & oben/unten (neu) */
.bgimage-surface {
  position: relative;
  min-height: var(--min-h);
  background-image: var(--bg-url, none);
  background-size: cover;
  background-position: var(--bg-pos, center center);

  /* pad für Body-Positionierungen */
  --pad: clamp(16px, 3vw, 40px);

  /* seitlicher Inset über margin-inline, vertikale Gaps NEU */
  --block-inset-base: 0px;
  margin-inline: calc(var(--block-inset-base) + var(--block-inset-extra, 0px));
  margin-top: var(--surface-gap-top, 0px);
  margin-bottom: var(--surface-gap-bottom, 0px);
}

/* Layout steuert Einrückung des Backgrounds */
.bgimage-block.grid .bgimage-surface { --block-inset-base: 0px; }
.bgimage-block.fluid .bgimage-surface { --block-inset-base: var(--page-padding); }
.bgimage-block.fluid-no-padding .bgimage-surface { --block-inset-base: 0px; }

/* Overlay */
.bgimage-block.has-overlay .bgimage-surface::after {
  content:""; position:absolute; inset:0;
  background: var(--overlay-color); opacity: var(--overlay-opacity);
  pointer-events:none; z-index:1;
}

/* Innenbereich füllt die Surface */
.bgimage-inner { position: absolute; inset: 0; padding: var(--pad); z-index: 2; }

/* Titel */
.bgimage-title {
  position: absolute; top: var(--pad);
  margin: 0; color: var(--title-color, #fff); line-height: 1.1; z-index: 2;
}
.bgimage-block.title-left  .bgimage-title  { left: var(--pad); text-align: left; }
.bgimage-block.title-center .bgimage-title { left: 50%; transform: translateX(-50%); text-align: center; }
.bgimage-block.title-right .bgimage-title  { right: var(--pad); text-align: right; }
.bgimage-block.title-sm .bgimage-title { font-size: clamp(22px, 3vw, 34px); }
.bgimage-block.title-md .bgimage-title { font-size: clamp(28px, 5vw, 48px); }
.bgimage-block.title-lg .bgimage-title { font-size: clamp(34px, 7vw, 64px); }
.bgimage-block.title-xl .bgimage-title { font-size: clamp(38px, 9vw, 84px); }
.bgimage-block.title-shadow .bgimage-title { text-shadow: 0 1px 12px rgba(0,0,0,.35); }

/* Body – Grundstil */
.bgimage-body{
  position: absolute;
  inset: var(--body-top, auto) var(--body-right, var(--pad)) var(--body-bottom, var(--pad)) var(--body-left, auto);
  transform: translate(var(--body-tx, 0), var(--body-ty, 0));
  text-align: left;
  color: var(--body-color, #fff);
  line-height: 1.5;
  padding: clamp(10px, 2vw, 18px);
  border-radius: 12px;
  z-index: 2;
  box-sizing: border-box;

  /* Max. Breite erzwingen + Fontsize-Override */
  width: min(100%, var(--body-max, 560px)) !important;
  max-width: var(--body-max, 560px) !important;
  font-size: var(--body-fs, clamp(16px, 2.2vw, 18px)) !important;
}
.bgimage-body * { font-size: inherit !important; line-height: inherit; text-align: inherit; }
.bgimage-block.body-shadow .bgimage-body { box-shadow: 0 10px 30px rgba(0,0,0,.18); }

/* Harte Ankerung der Text-Position (klassenbasiert) */
.bgimage-block.body-tl .bgimage-body{ top:var(--pad)!important; left:var(--pad)!important; right:auto!important; bottom:auto!important; transform:translate(0,0)!important; }
.bgimage-block.body-tc .bgimage-body{ top:var(--pad)!important; left:50%!important; right:auto!important; bottom:auto!important; transform:translate(-50%,0)!important; }
.bgimage-block.body-tr .bgimage-body{ top:var(--pad)!important; right:var(--pad)!important; left:auto!important; bottom:auto!important; transform:translate(0,0)!important; }
.bgimage-block.body-bl .bgimage-body{ bottom:var(--pad)!important; left:var(--pad)!important; top:auto!important; right:auto!important; transform:translate(0,0)!important; }
.bgimage-block.body-bc .bgimage-body{ bottom:var(--pad)!important; left:50%!important; top:auto!important; right:auto!important; transform:translate(-50%,0)!important; }
.bgimage-block.body-br .bgimage-body{ bottom:var(--pad)!important; right:var(--pad)!important; top:auto!important; left:auto!important; transform:translate(0,0)!important; }

/* Modul-Außenabstände (wie gehabt) */
.kzt-module { padding-top: var(--mod-mt-desktop,0px); padding-bottom: var(--mod-mb-desktop,0px); }
@media (max-width:1023px){
  .kzt-module{
    padding-top: var(--mod-mt-tablet, var(--mod-mt-desktop,0px));
    padding-bottom: var(--mod-mb-tablet, var(--mod-mb-desktop,0px));
  }
}
@media (max-width:767px){
  .kzt-module{
    padding-top: var(--mod-mt-mobile, var(--mod-mt-tablet, var(--mod-mt-desktop,0px)));
    padding-bottom: var(--mod-mb-mobile, var(--mod-mb-tablet, var(--mod-mb-desktop,0px)));
  }
}

/* ============================
   Mobile-Gutter für Body-Text
   (gleicher seitlicher Abstand wie Titel)
============================ */
@media (max-width: 767px) {
  /* Seitliche "Gasse": 2× var(--pad) insgesamt */
  .bgimage-block .bgimage-body {
    width: min(calc(100% - 2 * var(--pad)), var(--body-max, 560px)) !important;
  }

  /* Zentrierte Varianten behalten Centering bei */
  .bgimage-block.body-tc .bgimage-body,
  .bgimage-block.body-bc .bgimage-body {
    left: 50% !important;
    transform: translate(-50%, 0) !important;
  }

  /* Linke/rechte Varianten bleiben am jeweiligen Rand mit Pad verankert */
  .bgimage-block.body-tl .bgimage-body,
  .bgimage-block.body-bl .bgimage-body {
    left: var(--pad) !important;
    right: auto !important;
  }
  .bgimage-block.body-tr .bgimage-body,
  .bgimage-block.body-br .bgimage-body {
    right: var(--pad) !important;
    left: auto !important;
  }
}


/* ============================
   ICONBOXES (KZT) — CLEAN BLOCK + FA7 FIX (Safari/Brave)
   Strategie: Sharp immer auf vorhandene "Font Awesome 7 Sharp Thin" mappen
   ============================ */

/* Section */
.iconboxes-section {
  width: 100%;
  padding-top: 0rem;
  padding-bottom: 0rem;
  background: #ffd009;
}

/* Section-Header */
.iconboxes-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}
.iconboxes-header .left  { padding-left:  var(--ib-header-pl, 0px); }
.iconboxes-header .right { padding-right: var(--ib-header-pr, 0px); }

.iconboxes-header .topline {
  font-size: var(--ib-topline-size, clamp(12px, 1.2vw, 14px));
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 6px;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.iconboxes-header .topline .topline-prefix { font-weight: 600; opacity: .85; }
.iconboxes-header .headline {
  font-size: var(--ib-headline-size, clamp(22px, 3.2vw, 34px));
  line-height: 1.1;
  margin: 0;
}

/* Button */
.iconboxes-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border: 1px solid #000;
  text-decoration: none;
  font-weight: 500;
  border-radius: 0;
  transition: transform .12s ease, background-color .12s ease, color .12s ease;
}
.iconboxes-button:hover { transform: translateY(-1px); }

/* Grid */
.iconboxes-grid {
  display: grid;
  grid-template-columns: repeat(var(--ib-cols, 2), minmax(0, 1fr));
  border-top: 0px solid var(--divider, #ffd009);
  border-left: 0px solid var(--divider, #ffd009);
}
.iconbox {


  border-right: 0px solid var(--divider, #ffd009);
  border-bottom: 0px solid var(--divider, #ffd009);
  background: var(--ib-item-bg, inherit);
}

.iconbox-inner {padding: var(--ib-pad, 28px); }




/* Box-Layout */
.iconbox-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  column-gap: clamp(14px, 4vw, 36px);
  row-gap: 10px;
  align-items: start;
  min-width: 0;
}

/* Icon oben links */
.iconbox-icon {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
  font-size: var(--ib-icon, 36px);
  line-height: 1;
}
.iconbox-icon i { display: inline-block; }

/* Headline unten links */
.iconbox-title {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.15;
  margin: 0;
  white-space: nowrap;
}

/* Text unten rechts */
.iconbox-right {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
  text-align: right;
  justify-self: end;
  align-self: start;
  min-width: 0;
  width: 100%;
}
.iconbox-text {
  font-size: clamp(14px, 1.2vw, 16px);
  line-height: 1.6;
  opacity: .9;
  max-width: 60ch;
  margin-left: auto;
  text-align: left;
}

/* ============================
   Icon Style Vars (size/color)
   ============================ */
.iconboxes-section .iconbox i,
.iconboxes-section .iconbox .fa,
.iconboxes-section .iconbox [class^="fa-"],
.iconboxes-section .iconbox [class*=" fa-"] {
  color: var(--icon-color, currentColor);
  font-size: var(--icon-size, 36px);
  line-height: 1;
}

/* ============================
   FONT AWESOME 7 — WEIGHT MAPPING + SAFE FALLBACK
   Ziel: wieder "wie vorher", aber ohne Kästchen (Safari/Brave safe)
   ============================ */

/* Grund-Hardening */
.iconboxes-section .iconbox-icon i[class*="fa-"] {
  font-style: normal;
  line-height: 1;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.iconboxes-section .iconbox-icon i[class*="fa-"]::before {
  display: inline-block;
}

/* ---------- SHARP: Default-Fallback (Thin) ---------- */
.iconboxes-section .iconbox-icon i.fa-sharp,
.iconboxes-section .iconbox-icon i[class*="fa-sharp"] {
  font-family: "Font Awesome 7 Sharp Thin" !important;
  font-weight: 100 !important;
}

/* ---------- SHARP: Gewicht sauber mappen (wenn Fonts existieren) ---------- */
/* THIN */
.iconboxes-section .iconbox-icon i.fa-sharp.fa-thin,
.iconboxes-section .iconbox-icon i[class*="fa-sharp"][class*="fa-thin"] {
  font-family: "Font Awesome 7 Sharp Thin" !important;
  font-weight: 100 !important;
}

/* LIGHT */
.iconboxes-section .iconbox-icon i.fa-sharp.fa-light,
.iconboxes-section .iconbox-icon i[class*="fa-sharp"][class*="fa-light"] {
  font-family: "Font Awesome 7 Sharp Light" !important;
  font-weight: 300 !important;
}

/* REGULAR */
.iconboxes-section .iconbox-icon i.fa-sharp.fa-regular,
.iconboxes-section .iconbox-icon i[class*="fa-sharp"][class*="fa-regular"] {
  font-family: "Font Awesome 7 Sharp Regular" !important;
  font-weight: 400 !important;
}

/* SOLID */
.iconboxes-section .iconbox-icon i.fa-sharp.fa-solid,
.iconboxes-section .iconbox-icon i[class*="fa-sharp"][class*="fa-solid"] {
  font-family: "Font Awesome 7 Sharp Solid" !important;
  font-weight: 900 !important;
}

/* ---------- BRANDS (nur wenn geladen) ---------- */
.iconboxes-section .iconbox-icon i.fa-brands,
.iconboxes-section .iconbox-icon i[class*="fa-brands"] {
  font-family: "Font Awesome 7 Brands" !important;
  font-weight: 400 !important;
}


/* ============================
   Responsive
   ============================ */
@media (max-width: 1024px) {
  .iconboxes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 800px) {
  .iconbox-row {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    row-gap: 8px;
  }
  .iconbox-icon  { grid-column: 1; grid-row: 1; }
  .iconbox-title { grid-column: 1; grid-row: 2; }
  .iconbox-right { grid-column: 1; grid-row: 3; text-align: left; justify-self: start; }
}

@media (max-width: 640px) {
  .iconboxes-header { flex-direction: column; align-items: flex-start; }
  .iconboxes-grid { grid-template-columns: 1fr; }
}




/* ==========================================
   KZT — Modul-Abstände global (nur Top/Bottom)
   ========================================== */
.kzt-module {
  padding-top: var(--mod-pt-desktop, 0px);
  padding-bottom: var(--mod-pb-desktop, 0px);
}
@media (max-width: 1023px){
  .kzt-module {
    padding-top: var(--mod-pt-tablet, var(--mod-pt-desktop, 0px));
    padding-bottom: var(--mod-pb-tablet, var(--mod-pb-desktop, 0px));
  }
}
@media (max-width: 767px){
  .kzt-module {
    padding-top: var(--mod-pt-mobile, var(--mod-pt-tablet, var(--mod-pt-desktop, 0px)));
    padding-bottom: var(--mod-pb-mobile, var(--mod-pb-tablet, var(--mod-pb-desktop, 0px)));
  }
}

/* ==========================================
   Vollbreite (ohne Padding)
   - L/R = 0
   - T/B = bleiben aus Variablen erhalten (HARTE Absicherung gegen padding:0)
   ========================================== */
.kzt-module.fluid-no-padding {
  padding-left: 0 !important;
  padding-right: 0 !important;
  /* Hard-override: falls irgendwo padding:0 gesetzt wurde */
  padding-top: var(--mod-pt-desktop, 0px) !important;
  padding-bottom: var(--mod-pb-desktop, 0px) !important;
}
@media (max-width: 1023px){
  .kzt-module.fluid-no-padding {
    padding-top: var(--mod-pt-tablet, var(--mod-pt-desktop, 0px)) !important;
    padding-bottom: var(--mod-pb-tablet, var(--mod-pb-desktop, 0px)) !important;
  }
}
@media (max-width: 767px){
  .kzt-module.fluid-no-padding {
    padding-top: var(--mod-pt-mobile, var(--mod-pt-tablet, var(--mod-pt-desktop, 0px))) !important;
    padding-bottom: var(--mod-pb-mobile, var(--mod-pb-tablet, var(--mod-pb-desktop, 0px))) !important;
  }
}

/* ==========================================
   KZT — Jobs Modul
   ========================================== */
.kzt-module.jobs-section { width: 100%; }
.kzt-module.jobs-section .jobs-inner { width: 100%; }

/* Fluid mit Seitenabstand (aus Block) */
.kzt-module.jobs-section.fluid .jobs-inner{
  padding-left: var(--fluid-pad-x, 32px);
  padding-right: var(--fluid-pad-x, 32px);
}

/* Topline */
.kzt-module.jobs-section .jobs-topline{
  font-size: 14px;
  text-transform: uppercase;
  padding-left: var(--jobs-top-pad-d, var(--jobs-col-pad-d, 30px));
  padding-right: var(--jobs-top-pad-d, var(--jobs-col-pad-d, 30px));
}
@media (max-width: 1023px){
  .kzt-module.jobs-section .jobs-topline{
    padding-left: var(--jobs-top-pad-t, var(--jobs-top-pad-d, 30px));
    padding-right: var(--jobs-top-pad-t, var(--jobs-top-pad-d, 30px));
  }
}
@media (max-width: 767px){
  .kzt-module.jobs-section .jobs-topline{
    padding-left: var(--jobs-top-pad-m, var(--jobs-top-pad-t, 24px));
    padding-right: var(--jobs-top-pad-m, var(--jobs-top-pad-t, 24px));
  }
}

/* Headline */
.kzt-module.jobs-section .jobs-headline{ 
  font-family: var(--font-headline);
  padding-left: var(--jobs-head-pad-d, var(--jobs-col-pad-d, 30px));
  padding-right: var(--jobs-head-pad-d, var(--jobs-col-pad-d, 30px));
}
@media (max-width: 1023px){
  .kzt-module.jobs-section .jobs-headline{ 
    font-size: var(--hsize-tab, 32px) !important;
    line-height: var(--jobs-hline-t, var(--jobs-hline-d)) !important;
    padding-left: var(--jobs-head-pad-t, var(--jobs-head-pad-d, 30px));
    padding-right: var(--jobs-head-pad-t, var(--jobs-head-pad-d, 30px));
  }
}
@media (max-width: 767px){
  .kzt-module.jobs-section .jobs-headline{ 
    font-size: var(--hsize-mob, 26px) !important;
    line-height: var(--jobs-hline-m, var(--jobs-hline-t)) !important;
    padding-left: var(--jobs-head-pad-m, var(--jobs-head-pad-t, 24px));
    padding-right: var(--jobs-head-pad-m, var(--jobs-head-pad-t, 24px));
  }
}

/* Header/Rows: links & rechts Padding (CTA bündig zur Innenkante) */
.kzt-module.jobs-section .jobs-header,
.kzt-module.jobs-section .job-row{
  padding-left: var(--jobs-col-pad-d, 30px);
  padding-right: var(--jobs-col-pad-d, 30px);
}
@media (max-width: 1023px){
  .kzt-module.jobs-section .jobs-header,
  .kzt-module.jobs-section .job-row{
    padding-left: var(--jobs-col-pad-t, var(--jobs-col-pad-d, 30px));
    padding-right: var(--jobs-col-pad-t, var(--jobs-col-pad-d, 30px));
  }
}
@media (max-width: 767px){
  .kzt-module.jobs-section .jobs-header,
  .kzt-module.jobs-section .job-row{
    padding-left: var(--jobs-col-pad-m, var(--jobs-col-pad-t, 24px));
    padding-right: var(--jobs-col-pad-m, var(--jobs-col-pad-t, 24px));
  }
}

/* Tabellen-Header */
.kzt-module.jobs-section .jobs-header{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr minmax(var(--jobs-cta-min, 140px), max-content);
  align-items: end;
  gap: 20px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted, #888);
  margin-bottom: 8px;
}
.kzt-module.jobs-section .jobs-header > div{ text-align:left }
.kzt-module.jobs-section .jobs-header > div:last-child{ text-align:right }

/* Rows */
.kzt-module.jobs-section .jobs-rows{ border-top: 1px solid var(--divider, #e5e5e5); }

.kzt-module.jobs-section .job-row{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr minmax(var(--jobs-cta-min, 140px), max-content);
  align-items: center;
  gap: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--divider, #e5e5e5);
  color: inherit;
  text-decoration: none;
  transition: background-color .2s ease;
  border-radius: 0;
}
.kzt-module.jobs-section .job-row:hover{
  background: var(--jobs-hover, rgba(0,0,0,.05));
}

.kzt-module.jobs-section .job-row .title{ font-family: var(--font-headline, inherit); font-size: 18px; }
.kzt-module.jobs-section .job-row .location,
.kzt-module.jobs-section .job-row .type{ font-size: 16px; }

/* CTA Zelle */
.kzt-module.jobs-section .job-row .jobs-cta { justify-self: end; }

/* CTA Button (Variablen + Fallbacks) */
.jobs-cta .job-apply {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  /* Desktop Padding */
  padding: var(--cta-pad-y, 14px) var(--cta-pad-x, 20px);

  border: var(--cta-border-w, 1px) solid var(--cta-border-color, currentColor);
  border-radius: var(--cta-radius, 0);

  font-family: var(--font-sans, 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
  /*text-transform: uppercase;*/
  white-space: nowrap;

  font-size: var(--cta-text-d, 14px);
  letter-spacing: var(--cta-letter, 0);
  color: var(--cta-color, currentColor);

  transition: all .25s ease;
}

.jobs-cta .job-apply .ext{ width:16px; height:16px }

/* Hover aus Panel (Fallbacks) */
.jobs-cta .job-apply:hover {
  color: var(--cta-hover-text, inherit);
  background: var(--cta-hover-bg, transparent);
  border-color: var(--cta-hover-border, currentColor);
  text-decoration: underline;
}

/* Responsive Button-Textgröße */
@media (max-width: 1023px){
  .jobs-cta .job-apply{ font-size: var(--cta-text-t, var(--cta-text-d, 14px)); }
}
@media (max-width: 767px){
  .jobs-cta .job-apply{ font-size: var(--cta-text-m, var(--cta-text-t, var(--cta-text-d, 14px))); }
}

/* Responsive Button-Paddings */
@media (max-width: 1023px){
  .jobs-cta .job-apply{
    padding: var(--cta-pad-y-t, var(--cta-pad-y, 14px))
             var(--cta-pad-x-t, var(--cta-pad-x, 20px));
  }
}
@media (max-width: 767px){
  .jobs-cta .job-apply{
    padding: var(--cta-pad-y-m, var(--cta-pad-y-t, var(--cta-pad-y, 14px)))
             var(--cta-pad-x-m, var(--cta-pad-x-t, var(--cta-pad-x, 20px)));
  }
}

/* Mobile Layout: CTA links unter dem Text */
@media (max-width: 767px){
  .kzt-module.jobs-section .jobs-header{ display:none }

  .kzt-module.jobs-section .job-row{
    grid-template-columns: 1fr;      /* einspaltig */
    row-gap: 10px;
    padding-top: 16px; 
    padding-bottom: 16px;
  }
  .kzt-module.jobs-section .job-row .title{ grid-column: 1/-1 }
  .kzt-module.jobs-section .job-row .location,
  .kzt-module.jobs-section .job-row .type{
    grid-column: 1/-1; font-size: 14px; opacity: .85;
  }
  .kzt-module.jobs-section .job-row .jobs-cta{
    grid-column: 1/-1; 
    justify-self: start;             /* linksbündig */
    margin-top: 4px;
  }
}

/* Dark-Theme Feinheiten */
.bg-dark .kzt-module.jobs-section .jobs-header{ color: rgba(255,255,255,.7); }
.bg-dark .kzt-module.jobs-section .jobs-rows,
.bg-dark .kzt-module.jobs-section .job-row{ border-color: rgba(255,255,255,.12); }
.bg-dark .kzt-module.jobs-section .job-row:hover{ background: var(--jobs-hover, rgba(255,255,255,.08)); }


/* ================================
   Modul 18 – 3 Column Grid
   ================================ */

/* Wrapper (Layout) */
.three-col-grid .tcg-wrap.grid{
  max-width: var(--kzt-grid-max, 1760px);
  margin: 0 auto;
  padding-left: 0;  /* ✅ FIX: kein seitlicher Gap im Grid */
  padding-right: 0; /* ✅ FIX: kein seitlicher Gap im Grid */
  box-sizing: border-box;
}
.three-col-grid .tcg-wrap.fluid{
  max-width: none;
  margin: 0;
  padding-left: var(--kzt-grid-pad, 20px);
  padding-right: var(--kzt-grid-pad, 20px);
  box-sizing: border-box;
}
.three-col-grid .tcg-wrap.fluid-no-padding{
  max-width: none;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

/* Header */
.three-col-grid .tcg-header { display: grid; gap: .6rem; }
.three-col-grid .tcg-header.align-left   { text-align: left;   justify-items: start; }
.three-col-grid .tcg-header.align-center { text-align: center; justify-items: center; }
.three-col-grid .tcg-header.align-right  { text-align: right;  justify-items: end; }

.three-col-grid .tcg-topline { margin: 0; }

/* Section-Headline responsive: Größe + Line-Height via Vars */
.three-col-grid .tcg-headline {
  margin: 0;
  font-size: var(--tcg-sec-title-d, 32px);
  line-height: var(--tcg-sec-lh-d, 1.1);
}
@media (max-width: 1024px){
  .three-col-grid .tcg-headline {
    font-size: var(--tcg-sec-title-t, 28px);
    line-height: var(--tcg-sec-lh-t, 1.1);
  }
}
@media (max-width: 720px){
  .three-col-grid .tcg-headline {
    font-size: var(--tcg-sec-title-m, 24px);
    line-height: var(--tcg-sec-lh-m, 1.1);
  }
}

/* Grid */
.three-col-grid .tcg-grid {
  display: grid;
  gap: var(--tcg-gap, 24px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1024px){
  .three-col-grid .tcg-grid.tcg-tablet-1 { grid-template-columns: 1fr; }
  .three-col-grid .tcg-grid.tcg-tablet-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .three-col-grid .tcg-grid.tcg-tablet-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px){
  .three-col-grid .tcg-grid.tcg-mobile-1 { grid-template-columns: 1fr; }
  .three-col-grid .tcg-grid.tcg-mobile-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Cards */
.three-col-grid .tcg-card{
  border: var(--tcg-card-bw, 1px) solid var(--tcg-card-bc, #e5e5e5);
  border-radius: var(--tcg-radius, 8px);
  overflow: hidden;
  background: var(--tcg-card-bg, #fff);
  color: var(--tcg-card-col, #000);
  display: flex; flex-direction: column;
  box-shadow: var(--tcg-card-shadow, none);
}
.three-col-grid .tcg-card.tcg-equal .tcg-content { flex: 1 1 auto; }
.three-col-grid .tcg-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Card content & text (responsive padding & sizes) */
.three-col-grid .tcg-content {
  padding: var(--tcg-card-py-d,16px) var(--tcg-card-px-d,16px);
  font-size: var(--tcg-c-size-d,16px);
}
.three-col-grid .tcg-title {
  margin: 0 0 var(--tcg-ht-d,10px);
  font-size: var(--tcg-title-d, 18px);
  line-height: 1.15;
}
.three-col-grid .tcg-text  {
  margin: 0 0 var(--tcg-tb-d,15px);
  font-size: inherit;
  line-height: 1.5;
}

@media (max-width: 1024px){
  .three-col-grid .tcg-content { padding: var(--tcg-card-py-t,14px) var(--tcg-card-px-t,14px); font-size: var(--tcg-c-size-t,15px); }
  .three-col-grid .tcg-title   { margin-bottom: var(--tcg-ht-t,9px); font-size: var(--tcg-title-t, 17px); }
  .three-col-grid .tcg-text    { margin-bottom: var(--tcg-tb-t,13px); }
}
@media (max-width: 720px){
  .three-col-grid .tcg-content { padding: var(--tcg-card-py-m,12px) var(--tcg-card-px-m,12px); font-size: var(--tcg-c-size-m,14px); }
  .three-col-grid .tcg-title   { margin-bottom: var(--tcg-ht-m,8px); font-size: var(--tcg-title-m, 16px); }
  .three-col-grid .tcg-text    { margin-bottom: var(--tcg-tb-m,12px); }
}

/* Buttons (inkl. responsive Font-Size) */
.three-col-grid .tcg-btn{
  display:inline-block;
  text-decoration:none;
  background: var(--cb-bg, transparent);
  color: var(--cb-col, #000);
  border: var(--cb-bw,1px) solid var(--cb-bc,currentColor);
  border-radius: var(--cb-r, 9999px);
  padding: var(--cb-py,10px) var(--cb-px,16px);
  letter-spacing: var(--cb-ls, 0);
  line-height: 1;
  font-size: var(--cb-size-d, 14px);
}

@media (max-width: 1024px){
  .three-col-grid .tcg-btn{ font-size: var(--cb-size-t, 13px); }
}
@media (max-width: 720px){
  .three-col-grid .tcg-btn{ font-size: var(--cb-size-m, 12px); }
}

.three-col-grid .tcg-title.underline-on-hover a:hover,
.three-col-grid .tcg-btn.underline-on-hover:hover {
  text-decoration: underline;
  text-underline-offset: .15em;
}

/* Font Awesome Arrow an Card-Buttons */
.three-col-grid .tcg-btn::after{
  content: "\f061";                /* fa-arrow-right */
  display: inline-block;
  margin-left: .5em;
  vertical-align: 0.1em;
  transition: transform .2s ease;
  font-family: "Font Awesome 7 Pro","Font Awesome 6 Pro","Font Awesome 6 Free","Font Awesome 5 Pro", sans-serif;
  font-weight: 400;
  font-size: .65em;
  line-height: 1;
}
.three-col-grid .tcg-btn:hover::after{
  transform: translateX(3px);
}

/* === Patch: Nur Bild zoomen, keinen Kartenschatten === */

/* 1) Karte nicht mehr liften & keinen Schatten */
.three-col-grid .tcg-card{
  box-shadow: none !important;
  transition: none !important;
}
.three-col-grid .tcg-card:hover{
  transform: none !important;
  box-shadow: none !important;
}

/* 2) Bild-Container (Overflow für Zoom) */
.three-col-grid .tcg-media{
  position: relative;
  overflow: hidden;
}

/* 3) Nur das Bild zoomen */
.three-col-grid .tcg-media img{
  transform: scale(1);
  transition: transform .45s ease, filter .45s ease;
  will-change: transform;
}

/* Hover/Fokus: Zoom NUR auf dem Bild */
.three-col-grid .tcg-card:hover .tcg-media img,
.three-col-grid .tcg-media-link:focus img{
  transform: scale(1.06);
}

/* Optional: dezenter Glow-Overlay (ohne Schatten der Karte) */
.three-col-grid .tcg-media::after{
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 20%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 40%),
    linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,.12) 100%);
  opacity: 0;
  transition: opacity .35s ease;
}
.three-col-grid .tcg-card:hover .tcg-media::after,
.three-col-grid .tcg-media-link:focus::after{
  opacity: 1;
}

/* Tastaturfokus sichtbar belassen */
.three-col-grid .tcg-media-link:focus{
  outline: 2px solid currentColor;
  outline-offset: -2px;
}




/* ================================
   Modul – Two Column Text
   ================================ */

.two-col-text {
  background: rgb(var(--bg-rgba));

  /* responsive Modul-Abstände:
     wir mappen die breakpoint-spezifischen Variablen
     (--mt-*, --mb-*) auf --mst / --msb und nutzen die dann. */
  --mst: var(--mt-m);
  --msb: var(--mb-m);
  padding-top: var(--mst, 0);
  padding-bottom: var(--msb, 0);
}

/* Breakpoint-Mapping für Modul-Abstände */
@media (min-width: 768px) {
  .two-col-text { --mst: var(--mt-t); --msb: var(--mb-t); }
}
@media (min-width: 1024px) {
  .two-col-text { --mst: var(--mt-d); --msb: var(--mb-d); }
}

/* Innerer Wrapper */
.two-col-text .tct-inner {
  display: grid;
  gap: var(--gap, 24px);
}

/* Layout-Modi */
.two-col-text.grid .tct-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
}
.two-col-text.fluid .tct-inner {
  max-width: 1600px;
  margin: 0 auto;
  padding-left: var(--container-pad-x, 24px);
  padding-right: var(--container-pad-x, 24px);
}
.two-col-text.full .tct-inner {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

/* Spalten & Inhalte */
.two-col-text .tct-col .tct-headline { margin: 0 0 .6rem 0; }
.two-col-text .tct-col .tct-content > *:first-child { margin-top: 0; }
.two-col-text .tct-col .tct-content > *:last-child { margin-bottom: 0; }

/* Mobile: untereinander */
@media (max-width: 767px) {
  .two-col-text .tct-inner { grid-template-columns: 1fr; }
}

/* Tablet + Desktop: 2 Spalten */
@media (min-width: 768px) {
  .two-col-text .tct-inner { grid-template-columns: 1fr 1fr; }
}

/* D/T/M – typografische Variablen via data-type */
@media (max-width: 767px) {
  .two-col-text[data-type="dtm"] .tct-col.col-1 .tct-content,
  .two-col-text[data-type="dtm"] .tct-col.col-1 .tct-headline {
    font-size: var(--l-fs-m); line-height: var(--l-lh-m);
  }
  .two-col-text[data-type="dtm"] .tct-col.col-2 .tct-content,
  .two-col-text[data-type="dtm"] .tct-col.col-2 .tct-headline {
    font-size: var(--r-fs-m); line-height: var(--r-lh-m);
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .two-col-text[data-type="dtm"] .tct-col.col-1 .tct-content,
  .two-col-text[data-type="dtm"] .tct-col.col-1 .tct-headline {
    font-size: var(--l-fs-t); line-height: var(--l-lh-t);
  }
  .two-col-text[data-type="dtm"] .tct-col.col-2 .tct-content,
  .two-col-text[data-type="dtm"] .tct-col.col-2 .tct-headline {
    font-size: var(--r-fs-t); line-height: var(--r-lh-t);
  }
}
@media (min-width: 1024px) {
  .two-col-text[data-type="dtm"] .tct-col.col-1 .tct-content,
  .two-col-text[data-type="dtm"] .tct-col.col-1 .tct-headline {
    font-size: var(--l-fs-d); line-height: var(--l-lh-d);
  }
  .two-col-text[data-type="dtm"] .tct-col.col-2 .tct-content,
  .two-col-text[data-type="dtm"] .tct-col.col-2 .tct-headline {
    font-size: var(--r-fs-d); line-height: var(--r-lh-d);
  }
}

/* Clamp-Modus */
.two-col-text[data-type="clamp"] .tct-col.col-1 .tct-content,
.two-col-text[data-type="clamp"] .tct-col.col-1 .tct-headline {
  font-size: var(--l-fs); line-height: var(--l-lh);
}
.two-col-text[data-type="clamp"] .tct-col.col-2 .tct-content,
.two-col-text[data-type="clamp"] .tct-col.col-2 .tct-headline {
  font-size: var(--r-fs); line-height: var(--r-lh);
}

/* PDF-Link */
.two-col-text .tct-pdf-wrap { margin-top: 1rem; }
.two-col-text .tct-pdf {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  text-decoration: none;
  border-bottom: 2px solid currentColor;
  padding-bottom: 2px;
}
.two-col-text .tct-pdf.underline-hover { border-bottom-color: transparent; }
.two-col-text .tct-pdf.underline-hover:hover { border-bottom-color: currentColor; }
.two-col-text .tct-pdf-ic { flex: 0 0 auto; }


/* ===================================
   Modul – Bild/Tabelle
   =================================== */
.image-table-block.itb {
  --it-sidepad: 24px;
  --it-max: 1200px;
  --it-fluid-max: 1600px;
  --it-gap: 2rem;
  --it-border: 2px solid #000;
  --it-radius: 6px;
  --it-box-bg: #fff;
  --it-box-bg-dark: #f7f7f7;

  /* Tabellen-Typo Vars (per PHP gesetzt) */
  --it-table-fs-d: 16px;
  --it-table-fs-t: 15px;
  --it-table-fs-m: 14px;
}

/* Außenabstände via Variablen */
.image-table-block.itb{
  margin-top: var(--msp-top-d);
  margin-bottom: var(--msp-bottom-d);
}
@media (max-width: 1024px){
  .image-table-block.itb{
    margin-top: var(--msp-top-t);
    margin-bottom: var(--msp-bottom-t);
  }
}
@media (max-width: 860px){
  .image-table-block.itb{
    margin-top: var(--msp-top-m);
    margin-bottom: var(--msp-bottom-m);
  }
}

/* Container-Modi */
.image-table-block.itb.grid {
  max-width: var(--it-max);
  margin-left: auto; margin-right: auto;
  padding-left: 20px; padding-right: 20px;
}
.image-table-block.itb.fluid {
  max-width: var(--it-fluid-max);
  margin-left: auto; margin-right: auto;
}
.image-table-block.itb.fluid.has-sidepad {
  padding-left: var(--it-sidepad);
  padding-right: var(--it-sidepad);
}

/* Inneres Layout – Flex, damit Split-Classes sauber greifen */
.image-table-block.itb .itb-inner {
  display: flex;
  gap: var(--it-gap);
  align-items: flex-start;
}
.image-table-block.itb.img-left .itb-media { order: 1; }
.image-table-block.itb.img-left .itb-table { order: 2; }
.image-table-block.itb.img-right .itb-media { order: 2; }
.image-table-block.itb.img-right .itb-table { order: 1; }

/* Spaltenbreiten per Split-Klassen */
.image-table-block.itb .itb-col { min-width: 0; flex: 1 1 0; }
.image-table-block.itb.1-1   .itb-media.col-6 { flex-basis: 50%; }
.image-table-block.itb.1-1   .itb-table.col-6 { flex-basis: 50%; }
.image-table-block.itb.3-2   .itb-media.col-7 { flex-basis: 58.333%; }
.image-table-block.itb.3-2   .itb-table.col-5 { flex-basis: 41.667%; }
.image-table-block.itb.2-3   .itb-media.col-5 { flex-basis: 41.667%; }
.image-table-block.itb.2-3   .itb-table.col-7 { flex-basis: 58.333%; }
.image-table-block.itb.2-1   .itb-media.col-8 { flex-basis: 66.666%; }
.image-table-block.itb.2-1   .itb-table.col-4 { flex-basis: 33.333%; }
.image-table-block.itb.1-2   .itb-media.col-4 { flex-basis: 33.333%; }
.image-table-block.itb.1-2   .itb-table.col-8 { flex-basis: 66.666%; }

/* Bild */
.itb-figure { margin: 0; }
.itb-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--it-radius);
}

/* -----------------------------
   Tabelle: Schriftgrößen
   ----------------------------- */

/* clamp()-Variante: skaliert zwischen Mobile und Desktop */
.image-table-block.itb.clamp-on .itb-table {
  font-size: clamp(
    var(--it-table-fs-m),
    calc( var(--it-table-fs-m) + (var(--it-table-fs-d) - var(--it-table-fs-m)) * ((100vw - 375px) / (1200 - 375)) ),
    var(--it-table-fs-d)
  );
}

/* Breakpoint-Variante (wenn clamp aus) */
.image-table-block.itb.clamp-off .itb-table { font-size: var(--it-table-fs-d); }
@media (max-width: 1024px){
  .image-table-block.itb.clamp-off .itb-table { font-size: var(--it-table-fs-t); }
}
@media (max-width: 860px){
  .image-table-block.itb.clamp-off .itb-table { font-size: var(--it-table-fs-m); }
}

/* Tabelle mit Außenrahmen + Spalten-Trennern */
.itb-table-title { margin: .25rem 0 .75rem; }
.itb-table-wrap { overflow-x: auto; }
.itb-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
}
.itb-table th,
.itb-table td {
  border: var(--it-border);
  padding: .65rem .9rem;
  vertical-align: top;
}
.itb-table th {
  width: 40%;
  text-align: left;
  font-weight: 100!important;
  white-space: nowrap;
}
/* optional runde Ecken:
.itb-table { border-radius: var(--it-radius); overflow: hidden; }
*/

/* Info-Box */
.itb-infobox {
  margin-top: 1.25rem;
  padding: 1.25rem 1.25rem;
  border: var(--it-border);
  border-radius: var(--it-radius);
  background: var(--it-box-bg);
  font-family: var(--font-sans);
}
.itb-box-title { font-weight: 600; margin-bottom: .35rem; }
.itb-box-text p { margin: .25rem 0 .5rem; }

.itb-price-line {
  margin-top: .5rem;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  display: flex;
  gap: .5rem;
  align-items: baseline;
}
.itb-price-label { opacity: .8; }
.itb-price-value { font-weight: 700; }

.itb-contact {
  margin-top: .75rem;
  font-size: .95rem;
}
.itb-contact a { text-decoration: underline; }
.itb-contact .itb-sep { opacity: .6; margin: 0 .25rem; }

/* Mobile Layout */
@media (max-width: 860px) {
  .image-table-block.itb .itb-inner { display: grid; grid-template-columns: 1fr; }
  .image-table-block.itb .itb-col { flex-basis: auto !important; }

  .image-table-block.itb.m-img-first .itb-media { order: 1; }
  .image-table-block.itb.m-img-first .itb-table { order: 2; }
  .image-table-block.itb.m-tbl-first .itb-table { order: 1; }
  .image-table-block.itb.m-tbl-first .itb-media { order: 2; }

  .itb-table th { width: 45%; }
}

/* Dark-ish Background Support */
:root.dark-mode .itb-infobox { background: var(--it-box-bg-dark); }


/* =======================
   Submenue Adds 	       
   ======================= */

/* Scroll sperren, wenn Submenü offen ist */
body.has-submenu-open {
  overflow: hidden;
}

/* iOS: verhindert „Gummiband“-Scrollen auf dem Backdrop */
.submenu-backdrop {
  touch-action: none;
}



/* ================================
   Modul — Headline + Text (2-Column)
   ================================ */

/* Struktur/BG/Spacing – FIX: Global-Spacings immer über --module-mt/mb (D/T/M) */
.headline-text-section {
  --ht-col-gap: 40px;
  --ht-breakpoint: 1024px;
  --ht-maxw: 1200px;
}

.headline-text-section.bg-white { background:#fff; color: var(--color-text,#1a1a1a); }
.headline-text-section.bg-gray  { background:#f5f5f5; color: var(--color-text,#1a1a1a); }
.headline-text-section.bg-dark  { background:#1a1a1a; color:#fff; }
.headline-text-section.bg-transparent { background:transparent; }

.headline-text-section.grid .ht-inner { margin:0 auto; max-width:var(--ht-maxw); }
.headline-text-section.fluid .ht-inner { margin:0 auto; max-width:100%; padding-left: clamp(16px,3vw,40px); padding-right: clamp(16px,3vw,40px); }
.headline-text-section.fluid-no-padding .ht-inner { margin:0; max-width:100%; padding-left:0; padding-right:0; }

/* WICHTIG: Container-Queries/Units aktivieren */
.headline-text-section .ht-inner { container-type: inline-size; }

/* Außenabstände — FIX
   -> egal ob global/custom: PHP setzt immer --module-mt/mb-* korrekt */
.headline-text-section { padding-top: var(--module-mt-d,0); padding-bottom: var(--module-mb-d,0); }
@media (max-width:1024px){
  .headline-text-section { padding-top: var(--module-mt-t, var(--module-mt-d,0)); padding-bottom: var(--module-mb-t, var(--module-mb-d,0)); }
}
@media (max-width:640px){
  .headline-text-section { padding-top: var(--module-mt-m, var(--module-mt-t,0)); padding-bottom: var(--module-mb-m, var(--module-mb-t,0)); }
}

/* Grid */
.ht-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--ht-col-gap); align-items:start; }
@media (max-width:1024px){ .ht-grid { grid-template-columns:1fr; gap: clamp(16px,4vw,var(--ht-col-gap)); } }

/* Mobile order */
.headline-text-section.mobile-text-first .ht-left { order:2; }
.headline-text-section.mobile-text-first .ht-right { order:1; }

/* Resets */
.ht-headline { margin:0; }
.ht-headline__inner { display:block; }
.ht-text p { margin:0 0 1em 0; }
.ht-text p:last-child { margin-bottom:0; }

/*HT Text Link Style*/

.ht-text a {color: #c7002b!important;}


/* =========================================================
   IMAGE CAPTION GRID — #kzt (END2END BG + GRID CONTAINER)
   ========================================================= */

.kzt-icg {
  position: relative;
  background: transparent;

  /* Outer spacing as padding so BG fills it */
  padding-top: var(--kzt-icg-space-top-d, 0px);
  padding-bottom: var(--kzt-icg-space-bot-d, 0px);
}

/* Backgrounds */
.kzt-icg.bg-white { background: #ffffff; }
.kzt-icg.bg-gray { background: #f5f5f5; }
.kzt-icg.bg-dark { background: #000000; color: #ffffff; }
.kzt-icg.bg-transparent { background: transparent; }
.kzt-icg.bg-custom { background: var(--kzt-icg-bg, transparent); }

@media (max-width: 1023px) {
  .kzt-icg {
    padding-top: var(--kzt-icg-space-top-t, 0px);
    padding-bottom: var(--kzt-icg-space-bot-t, 0px);
  }
}

@media (max-width: 767px) {
  .kzt-icg {
    padding-top: var(--kzt-icg-space-top-m, 0px);
    padding-bottom: var(--kzt-icg-space-bot-m, 0px);
  }
}

/* NEW: container carries the layout width rules (grid/fluid/full) */
.kzt-icg__container {
  width: 100%;
}

/* Inner padding (module content padding) */
.kzt-icg__inner {
  padding: var(--kzt-icg-pad-d, 0px);
}

@media (max-width: 1023px) {
  .kzt-icg__inner { padding: var(--kzt-icg-pad-t, 0px); }
}

@media (max-width: 767px) {
  .kzt-icg__inner { padding: var(--kzt-icg-pad-m, 0px); }
}

/* Grid */
.kzt-icg__grid {
  display: grid;
  grid-template-columns: repeat(var(--kzt-icg-cols-d, 3), minmax(0, 1fr));
  gap: var(--kzt-icg-gap-d, 24px);
}

@media (max-width: 1023px) {
  .kzt-icg__grid {
    grid-template-columns: repeat(var(--kzt-icg-cols-t, 2), minmax(0, 1fr));
    gap: var(--kzt-icg-gap-t, 18px);
  }
}

@media (max-width: 767px) {
  .kzt-icg__grid {
    grid-template-columns: repeat(var(--kzt-icg-cols-m, 1), minmax(0, 1fr));
    gap: var(--kzt-icg-gap-m, 14px);
  }
}

.kzt-icg__item { margin: 0; min-width: 0; }

.kzt-icg__media {
  display: block;
  width: 100%;
  overflow: hidden;
}

/* Aspect ratios */
.kzt-icg.is-auto .kzt-icg__media { aspect-ratio: auto; }
.kzt-icg.is-square .kzt-icg__media { aspect-ratio: 1 / 1; }
.kzt-icg.is-4-3 .kzt-icg__media { aspect-ratio: 4 / 3; }
.kzt-icg.is-16-9 .kzt-icg__media { aspect-ratio: 16 / 9; }

.kzt-icg__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--kzt-icg-fit, cover);
}

/* Caption */
.kzt-icg__cap {
  margin-top: 10px;
  font-size: var(--kzt-icg-cap-size-d, 16px);
  line-height: var(--kzt-icg-cap-lh-d, 1.3);
  font-weight: var(--kzt-icg-cap-weight, 600);
  letter-spacing: var(--kzt-icg-cap-ls-d, 0em);
  text-align: var(--kzt-icg-align, left);
  color: var(--kzt-icg-cap-color, inherit);
}

@media (max-width: 1023px) {
  .kzt-icg__cap {
    font-size: var(--kzt-icg-cap-size-t, 15px);
    line-height: var(--kzt-icg-cap-lh-t, 1.3);
    letter-spacing: var(--kzt-icg-cap-ls-t, 0em);
  }
}

@media (max-width: 767px) {
  .kzt-icg__cap {
    font-size: var(--kzt-icg-cap-size-m, 14px);
    line-height: var(--kzt-icg-cap-lh-m, 1.3);
    letter-spacing: var(--kzt-icg-cap-ls-m, 0em);
  }
}

/* Optional Text */
.kzt-icg__text {
  margin-top: 6px;
  font-size: var(--kzt-icg-text-size-d, 14px);
  line-height: var(--kzt-icg-text-lh-d, 1.5);
  font-weight: var(--kzt-icg-text-weight, 400);
  letter-spacing: var(--kzt-icg-text-ls-d, 0em);
  text-align: var(--kzt-icg-align, left);
  color: var(--kzt-icg-text-color, inherit);
}

.kzt-icg__text p { margin: 0; }
.kzt-icg__text p + p { margin-top: 8px; }

@media (max-width: 1023px) {
  .kzt-icg__text {
    font-size: var(--kzt-icg-text-size-t, 14px);
    line-height: var(--kzt-icg-text-lh-t, 1.5);
    letter-spacing: var(--kzt-icg-text-ls-t, 0em);
  }
}

@media (max-width: 767px) {
  .kzt-icg__text {
    font-size: var(--kzt-icg-text-size-m, 13px);
    line-height: var(--kzt-icg-text-lh-m, 1.5);
    letter-spacing: var(--kzt-icg-text-ls-m, 0em);
  }
}

.kzt-icg__media:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* NEW: Abstand Bild -> Text (D/T/M via CSS var) */
.kzt-icg__text {
  margin-top: var(--kzt-icg-text-gap-d, 6px);
  font-size: var(--kzt-icg-text-size-d, 14px);
  line-height: var(--kzt-icg-text-lh-d, 1.5);
  font-weight: var(--kzt-icg-text-weight, 400);
  letter-spacing: var(--kzt-icg-text-ls-d, 0em);
  text-align: var(--kzt-icg-align, left);
  color: var(--kzt-icg-text-color, inherit);
}

@media (max-width: 1023px) {
  .kzt-icg__text {
    margin-top: var(--kzt-icg-text-gap-t, 6px);
    font-size: var(--kzt-icg-text-size-t, 14px);
    line-height: var(--kzt-icg-text-lh-t, 1.5);
    letter-spacing: var(--kzt-icg-text-ls-t, 0em);
  }
}

@media (max-width: 767px) {
  .kzt-icg__text {
    margin-top: var(--kzt-icg-text-gap-m, 6px);
    font-size: var(--kzt-icg-text-size-m, 13px);
    line-height: var(--kzt-icg-text-lh-m, 1.5);
    letter-spacing: var(--kzt-icg-text-ls-m, 0em);
  }
}

/* NEW: PDF Link unterhalb des Textes */
.kzt-icg__pdf {
  margin-top: 10px;
  text-align: var(--kzt-icg-align, left);
}

.kzt-icg__pdf-link {
  color: #C7002B;      
  font-weight: 700; 
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: underline;
}

.kzt-icg__pdf-link:hover {
  text-decoration: none;
  
}

.kzt-icg__pdf-link:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* leichte Einrückung für Listen im Text */
.kzt-icg__text ul {
  list-style: none;
  padding-left: 1.2em;
}

.kzt-icg__text li {
  position: relative;
}

.kzt-icg__text li::before {
  content: "–";
  position: absolute;
  left: -1.2em;
}



/* ============================
   MODUL — TEXT/TEXT (RFCP) — KZT-safe
   + Column BG/Padding/Radius
   + Block-Divider (wie Screenshot)
   + Mobile Width Fix
   + Titel/Text Gap steuerbar
   ============================ */

.text-text-block {
  position: relative;
  width: 1540px;
  /*width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  padding-top: var(--tt-space-top-d, 60px);
  padding-bottom: var(--tt-space-bot-d, 60px);*/

  overflow: clip;
}

/* Wrapper bekommt nur Grid/Fluid Klassen (dein KZT Layout-System) */
.text-text-block .text-text-wrap {
  width: 100%;
}

/* Row — hier MUSS gap greifen */
.text-text-block .tt-inner {
  display: flex;
  gap: var(--tt-gap-d, 40px);
  align-items: center;
  width: 100%;
}

/* Vertikale Ausrichtung (Row) */
.text-text-block.align-top .tt-inner { align-items: flex-start; }
.text-text-block.align-center .tt-inner { align-items: center; }
.text-text-block.align-bottom .tt-inner { align-items: flex-end; }

/* Text Align */
.text-text-block.text-left .tt-col { text-align: left; }
.text-text-block.text-center .tt-col { text-align: center; }
.text-text-block.text-right .tt-col { text-align: right; }

/* Columns */
.text-text-block .tt-col {
  box-sizing: border-box;
  min-width: 0;

  background: transparent;
  border-radius: 0;
}

.text-text-block .tt-col-left  {
  width: var(--tt-left-w, 50%);

  background: var(--tt-col-left-bg, transparent);
  border-radius: var(--tt-col-left-rad, 0px);
  padding: var(--tt-col-left-py-d, 0px) var(--tt-col-left-px-d, 0px);
}

.text-text-block .tt-col-right {
  width: var(--tt-right-w, 50%);

  background: var(--tt-col-right-bg, transparent);
  border-radius: var(--tt-col-right-rad, 0px);
  padding: var(--tt-col-right-py-d, 0px) var(--tt-col-right-px-d, 0px);
}

/* Divider zwischen Columns */
.text-text-block .tt-divider {
  flex: 0 0 auto;
  align-self: stretch;
  width: var(--tt-div-w, 1px);
  background: var(--tt-div-c, #dddddd);
}
.text-text-block:not(.has-divider) .tt-divider { display: none; }

/* Typo (Legacy Headline/Text) */
.text-text-block .headline {
	font-family: var(--font-bold);
  margin: 0 0 var(--tt-ht-gap-d, 18px) 0;
  font-size: var(--tt-head-d, 44px);
  line-height: var(--tt-head-lh-d, 1.1);
}
.text-text-block .text-content { font-size: var(--tt-text-d, 17px); }
.text-text-block .tt-btn-wrap { margin-top: 18px; }

/* Items (Textblöcke) */
.text-text-block .tt-items {
  display: flex;
  flex-direction: column;
}

.text-text-block .tt-item { padding: 0; }

.text-text-block .tt-item-title {
	 font-family: var(--font-bold);
	 
  letter-spacing: -0.01em;
  margin: 0 0 var(--tt-ttgap, 10px) 0; /* <- Panel Option */
  font-size: 20px;
  line-height: 1.2;
}

.text-text-block .tt-item-text {
  font-size: var(--tt-text-d, 17px);
}

/* Block-Divider zwischen Items (wie Screenshot) */
.text-text-block.has-block-divider .tt-item + .tt-item {
  margin-top: var(--tt-bdiv-gap, 22px);
  padding-top: var(--tt-bdiv-gap, 22px);
  border-top: var(--tt-bdiv-w, 1px) solid var(--tt-bdiv-c, #dddddd);
}

/* LISTEN: eingerückt + robust */
.text-text-block .text-content ul,
.text-text-block .text-content ol,
.text-text-block .tt-item-text ul,
.text-text-block .tt-item-text ol {
  margin: 0;
  padding-left: 1.25em;
  list-style-position: outside;
}

.text-text-block .text-content ul,
.text-text-block .text-content ol,
.text-text-block .tt-item-text ul,
.text-text-block .tt-item-text ol {
  margin-top: 0.6em;
}

.text-text-block .text-content li,
.text-text-block .tt-item-text li { margin: 0.25em 0; }

/* iOS-Safari Fix: Marker stabil */
.text-text-block .text-content li > p,
.text-text-block .tt-item-text li > p {
  margin: 0;
  display: block;
}
.text-text-block .text-content li > p + p,
.text-text-block .tt-item-text li > p + p {
  margin-top: 0.35em;
}

/* Tablet */
@media (max-width: 1024px) {
  .text-text-block {
    padding-top: var(--tt-space-top-t, 50px);
    padding-bottom: var(--tt-space-bot-t, 50px);
  }

  .text-text-block .tt-inner { gap: var(--tt-gap-t, 30px); }

  .text-text-block .headline {
	 
    margin-bottom: var(--tt-ht-gap-t, 16px);
    font-size: var(--tt-head-t, 36px);
    line-height: var(--tt-head-lh-t, 1.1);
  }

  .text-text-block .text-content,
  .text-text-block .tt-item-text { font-size: var(--tt-text-t, 17px); }

  /* Column Padding Tablet */
  .text-text-block .tt-col-left  { padding: var(--tt-col-left-py-t, 0px) var(--tt-col-left-px-t, 0px); }
  .text-text-block .tt-col-right { padding: var(--tt-col-right-py-t, 0px) var(--tt-col-right-px-t, 0px); }
}

/* Mobile */
@media (max-width: 768px) {

  /* FIX iOS Safari: bullets werden bei overflow:clip gerne weggeclippt */
  .text-text-block { overflow: visible; }

  .text-text-block {
    padding-top: var(--tt-space-top-m, 40px);
    padding-bottom: var(--tt-space-bot-m, 40px);
  }

  .text-text-block .tt-inner {
    flex-direction: column;
    gap: 0;
    align-items: stretch;
    width: 100%;
    max-width: none;
  }

  /* Abstand zwischen Columns (Mobile) */
  .text-text-block .tt-col-left { margin-bottom: var(--tt-block-gap-m, 28px); }

  /* Mobile Reverse */
  .text-text-block.mobile-reverse .tt-inner { flex-direction: column-reverse; }
  .text-text-block.mobile-reverse .tt-col-left { margin-bottom: 0; }
  .text-text-block.mobile-reverse .tt-col-right { margin-bottom: var(--tt-block-gap-m, 28px); }

  .text-text-block .tt-divider { display: none; }

  .text-text-block .headline {
    margin-bottom: var(--tt-ht-gap-m, 14px);
    font-size: var(--tt-head-m, 30px);
    line-height: var(--tt-head-lh-m, 1.1);
  }

  .text-text-block .text-content,
  .text-text-block .tt-item-text { font-size: var(--tt-text-m, 17px); }

  /* Column Padding Mobile */
  .text-text-block .tt-col-left  { padding: var(--tt-col-left-py-m, 0px) var(--tt-col-left-px-m, 0px); }
  .text-text-block .tt-col-right { padding: var(--tt-col-right-py-m, 0px) var(--tt-col-right-px-m, 0px); }

  /* Mobile Width Fix (Overrides aus Grid/Globals abfangen) */
  .text-text-block .text-text-wrap {
    width: 100%;
    max-width: none;
  }

  .text-text-block .tt-col-left,
  .text-text-block .tt-col-right {
    width: 100% !important;
    max-width: none !important;
    grid-column: auto !important;
    justify-self: stretch !important;
  }
}



/* =========================================
   KZT Card Divider (stabil, ohne Overlap/Clipping)
   ========================================= */

.kzt-card-divider{

  position: relative;
  width: 100%;
  height: var(--kzt-cd-height, 140px);
  display: block;
  z-index: 1;
}

/* ---------- Bottom: Card-Kante kommt von unten hoch (rundet OBEN) ---------- */
/* Oben ist "top-bg", unten ist "bottom-bg", die Kante sitzt im unteren Bereich */
.kzt-card-divider--bottom{
  background: var(--kzt-cd-top-bg, #FFD00A);
}
.kzt-card-divider--bottom::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: calc(var(--kzt-cd-radius, 64px) * 2);
  background: var(--kzt-cd-bottom-bg, #fff);
  border-top-left-radius: var(--kzt-cd-radius, 64px);
  border-top-right-radius: var(--kzt-cd-radius, 64px);
}

/* ---------- Top: Card-Kante hängt oben (rundet UNTEN) ---------- */
/* Oben ist "top-bg", unten ist "bottom-bg", die Kante sitzt im oberen Bereich */
.kzt-card-divider--top{
  background: var(--kzt-cd-bottom-bg, #fff);
}
.kzt-card-divider--top::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: calc(var(--kzt-cd-radius, 64px) * 2);
  background: var(--kzt-cd-top-bg, #FFD00A);
  border-bottom-left-radius: var(--kzt-cd-radius, 64px);
  border-bottom-right-radius: var(--kzt-cd-radius, 64px);
}

/* ---------- Both: Card-Band (oben+unten rund) ---------- */
/* Ein eigenständiges Card-Plateau zwischen zwei Hintergründen */
.kzt-card-divider--both{
  background: linear-gradient(
    to bottom,
    var(--kzt-cd-top-bg, #FFD00A) 0%,
    var(--kzt-cd-top-bg, #FFD00A) 50.5%,
    var(--kzt-cd-bottom-bg, #fff) 50.5%,
    var(--kzt-cd-bottom-bg, #fff) 100%
  );
}
.kzt-card-divider--both::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: calc(var(--kzt-cd-radius, 64px) * 2);
  background: var(--kzt-cd-top-bg, #FFD00A);
  border-bottom-left-radius: var(--kzt-cd-radius, 64px);
  border-bottom-right-radius: var(--kzt-cd-radius, 64px);
}
.kzt-card-divider--both::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: calc(var(--kzt-cd-radius, 64px) * 2);
  background: var(--kzt-cd-bottom-bg, #fff);
  border-top-left-radius: var(--kzt-cd-radius, 64px);
  border-top-right-radius: var(--kzt-cd-radius, 64px);
}


/* ==========================
  Hours (Öffnungszeiten / Rules Cards)
========================== */

/* Fullwidth Background gehört auf die Section */
.kzt-hours{
  background: var(--hours-section-bg, transparent);
  padding-top: var(--kzt-space-top, 0px) !important;
  padding-bottom: var(--kzt-space-bot, 0px) !important;
}

/* Wrap hat keinen Background mehr (sonst begrenzt es aufs Grid) */
.kzt-hours__wrap{
  border-radius: var(--hours-section-radius, 0px);
  padding: var(--hours-section-pad, 0px);
  background: transparent;
}

/* Inner-Breite: optional begrenzt */
.kzt-hours__inner{
  max-width: var(--hours-maxw, 100%);
  margin: 0 auto;
}

/* Title */
.kzt-hours__title{
  margin: 0 0 14px 0;
  font-size: var(--hours-title-d, 34px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: var(--hours-title-ls, -0.02em);
  font-family: var(--hours-font, inherit);
}

.kzt-hours__intro{
  margin: 0 0 18px 0;
  font-size: var(--hours-body-d, 18px);
  line-height: 1.45;
  max-width: 60ch;
  font-family: var(--hours-font, inherit);
}

/* Grid */
.kzt-hours__grid{
  display: grid;
  grid-template-columns: repeat(var(--hours-cols-d, 3), minmax(0, 1fr));
  gap: var(--hours-gap, 26px);
  align-items: stretch; /*  alle Cards gleiche Höhe */
}

/* Card: kein globales Padding mehr -> Padding wandert in card-body */
.kzt-hours__card{
  background: var(--hours-card-bg, #fff);
  border: 1px solid var(--hours-card-border, rgba(0,0,0,.12));
  border-radius: var(--hours-radius, 14px);
  overflow: hidden;              /*  Media sauber im Radius */
  display: flex;                 /*  Bild + Body */
  flex-direction: column;
  min-height: 0;
}

/* Media: default "auto" -> passt sich an Card-Höhe an (kein Aufblasen) */
.kzt-hours__media{
  width: 100%;
  overflow: hidden;
  aspect-ratio: var(--hours-img-aspect, auto); /* auto = kein erzwungenes Verhältnis */
  flex: 1 1 auto; /*  nimmt verfügbaren Platz, aber bläst nicht über Ratio */
  min-height: 0;
}

.kzt-hours__media img{
  display: block;     /*  kein Inline-Gap */
  width: 100%;
  height: 100%;
  object-fit: var(--hours-img-fit, cover);
  object-position: center;
}

/* Body Padding hier (statt auf der ganzen Card) */
.kzt-hours__card-body{
  padding: var(--hours-pad-d, 22px);
}

/* Subtitle (Card Title) */
.kzt-hours__subtitle{
  margin: var(--hours-sub-mt, 0px) 0 var(--hours-sub-mb, 12px) 0;
  font-size: var(--hours-sub-d, 18px);
  line-height: 1.2;
  font-weight: 800;
  font-family: var(--hours-sub-font, var(--font-bold, inherit));
  display: flex;
  align-items: center;
  gap: 10px;
}

.kzt-hours__dl{
  margin: 0;
  padding: 0;
}

.kzt-hours__row{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--hours-col-gap, 18px);
  padding: var(--hours-row-py, 12px) 0;
}


.kzt-hours__row a {
	text-decoration: underline;
}

.kzt-hours__row a:hover {
	text-decoration: none;
}




.kzt-hours__row dt{
  margin: 0;
  font-size: var(--hours-body-d, 18px);
  line-height: 1.35;
  font-weight: 400;
  font-family: var(--hours-font, inherit);
}

.kzt-hours__row dd{
  margin: 0;
  font-size: var(--hours-body-d, 18px);
  line-height: 1.35;
  text-align: right;
  font-weight: 400;
  white-space: nowrap;
  letter-spacing: -0.01em;
  font-family: var(--hours-font, inherit);
}

.kzt-hours__dl.has-dividers .kzt-hours__row + .kzt-hours__row{
  border-top: 1px solid var(--hours-divider, rgba(0,0,0,.06));
}

.kzt-hours__note{
  margin: 14px 0 0 0;
  font-size: 15px;
  color: #0a0a0a;
  line-height: 1.45;
  font-family: var(--hours-font, inherit);
  background: #f5f5f5;
  border-radius: 9px;
  padding: 10px;
}

/* ==========================
  Rules Variant (scoped, no collision)
========================== */
.kzt-hours.kzt-hours--rules .kzt-hours__row dt{
  /* In Rules: dt enthält Icon + Text (optional) */
}

.kzt-hours.kzt-hours--rules .kzt-hours__dt-inner{
  display: inline-flex;
  align-items: flex-start;
  gap: 12px;
}

.kzt-hours.kzt-hours--rules .kzt-hours__dt-ico{
  width: 22px;               /* feste Icon-Spalte */
  flex: 0 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  margin-top: 1px;
}

.kzt-hours.kzt-hours--rules .kzt-hours__dt-text{
  display: inline-block;
}

/* Icon base */
.kzt-hours.kzt-hours--rules .kzt-hours__icon{
  font-family: "Font Awesome 7 Sharp";
  font-style: normal;
  font-size: 18px;
  line-height: 1;
  color: #0a0a0a;
}

/* Card-title icon slightly aligned */
.kzt-hours.kzt-hours--rules .kzt-hours__icon--card{
  font-size: 18px;
}

/* Row icon */
.kzt-hours.kzt-hours--rules .kzt-hours__icon--row{
  font-size: 18px;
}

/* If you want icons a touch smaller on mobile */
@media (max-width: 820px){
  .kzt-hours.kzt-hours--rules .kzt-hours__icon{
    font-size: 17px;
  }
}

/* Tablet */
@media (max-width: 1024px){
  .kzt-hours__title{ font-size: var(--hours-title-t, 30px); }
  .kzt-hours__intro{ font-size: var(--hours-body-t, 17px); }
  .kzt-hours__subtitle{ font-size: var(--hours-sub-t, 17px); }
  .kzt-hours__row dt,
  .kzt-hours__row dd,
  .kzt-hours__note{ font-size: var(--hours-body-t, 17px); }

  .kzt-hours__grid{
    grid-template-columns: repeat(var(--hours-cols-t, 2), minmax(0, 1fr));
  }

  .kzt-hours__card-body{
    padding: var(--hours-pad-t, var(--hours-pad-d, 22px));
  }
}

/* Mobile */
@media (max-width: 820px){
  .kzt-hours__title{ font-size: var(--hours-title-m, 26px); }
  .kzt-hours__intro{ font-size: var(--hours-body-m, 16px); }
  .kzt-hours__subtitle{ font-size: var(--hours-sub-m, 16px); }
  .kzt-hours__row dt,
  .kzt-hours__row dd,
  .kzt-hours__note{ font-size: var(--hours-body-m, 16px); }

  .kzt-hours__grid{ grid-template-columns: 1fr; }

  .kzt-hours__card-body{
    padding: var(--hours-pad-m, var(--hours-pad-t, 22px));
  }
}



/* ==========================
   KZT — Premium Info
========================== */

.kzt-premium-info{
  padding-top: var(--kzt-space-top, 0px) !important;
  padding-bottom: var(--kzt-space-bot, 0px) !important;
}

.kzt-premium-info__wrap{
  background: var(--pi-section-bg, transparent);
  border-radius: var(--pi-section-radius, 0px);
  padding: var(--pi-section-pad, 0px);
}

.kzt-premium-info__inner{
  max-width: var(--pi-maxw, 1180px);
  margin: 0 auto;
}

.kzt-premium-info[style*="--pi-mode: full"] .kzt-premium-info__inner{
  max-width: 100%;
}

.kzt-premium-info__headline{
  margin: 0 0 14px 0;
  font-size: var(--pi-h-d, 34px);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: var(--pi-ls-h, -0.02em);
  font-family: var(--pi-font, inherit);
}

.kzt-premium-info__intro{
  margin: 0 0 18px 0;
  font-size: var(--pi-body-d, 18px);
  line-height: 1.45;
  max-width: 70ch;
  font-family: var(--pi-font, inherit);
}

.kzt-premium-info__grid{
  display: grid;
  grid-template-columns: repeat(var(--pi-cols-d, 3), minmax(0, 1fr));
  gap: var(--pi-gap, 26px);
  align-items: start;
}

.kzt-premium-info__card{
  background: var(--pi-card-bg, #fff);
  border: 1px solid var(--pi-card-border, rgba(0,0,0,.10));
  border-radius: var(--pi-card-radius, 14px);
  padding: var(--pi-card-pad, 22px);
}

.kzt-premium-info__cardhead{
  margin-bottom: 12px;
}

.kzt-premium-info__cardtitle{
  margin: 0;
  font-size: var(--pi-sub-d, 18px);
  line-height: 1.2;
  font-weight: 800;
  font-family: var(--pi-font, inherit);
}

.kzt-premium-info__cardhint{
  margin: 6px 0 0 0;
  font-size: calc(var(--pi-body-d, 18px) - 2px);
  line-height: 1.35;
  opacity: .75;
  font-family: var(--pi-font, inherit);
}

.kzt-premium-info__group + .kzt-premium-info__group{
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--pi-divider, rgba(0,0,0,.06));
}

.kzt-premium-info__ghead{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}

.kzt-premium-info__gtitle{
  font-weight: 800;
  font-size: calc(var(--pi-body-d, 18px) - 1px);
  line-height: 1.2;
  font-family: var(--pi-font, inherit);
}

.kzt-premium-info__gnote{
  font-size: calc(var(--pi-body-d, 18px) - 2px);
  opacity: .75;
  font-family: var(--pi-font, inherit);
}

.kzt-premium-info__list{
  display: block;
}

.kzt-premium-info__row{
  display: grid;
  gap: 16px;
  padding: 12px 0;
}

.kzt-premium-info__row.is-2{
  grid-template-columns: 1fr auto;
}

.kzt-premium-info__row.is-3{
  grid-template-columns: 1.2fr 1fr auto;
}

.kzt-premium-info__row .col{
  font-size: var(--pi-body-d, 18px);
  line-height: 1.35;
  font-family: var(--pi-font, inherit);
}

.kzt-premium-info__row .col-a{
  font-weight: 650;
}

.kzt-premium-info__row .col-b{
  opacity: .9;
}

.kzt-premium-info__list.right-align .col-c{
  text-align: right;
  white-space: nowrap;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.kzt-premium-info__list.has-dividers .kzt-premium-info__row + .kzt-premium-info__row{
  border-top: 1px solid var(--pi-divider, rgba(0,0,0,.06));
}

.kzt-premium-info__row.is-emph .col{
  font-weight: 800;
}

.kzt-premium-info__text{
  margin-top: 12px;
  font-size: calc(var(--pi-body-d, 18px) - 1px);
  line-height: 1.45;
  opacity: .95;
  font-family: var(--pi-font, inherit);
}

.kzt-premium-info__footer{
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--pi-divider, rgba(0,0,0,.06));
  font-size: calc(var(--pi-body-d, 18px) - 1px);
  line-height: 1.45;
  opacity: .95;
  font-family: var(--pi-font, inherit);
}

.kzt-premium-info__footnotes{
  margin-top: 16px;
  font-size: calc(var(--pi-body-d, 18px) - 3px);
  line-height: 1.45;
  opacity: .75;
  max-width: 90ch;
  font-family: var(--pi-font, inherit);
}

/* Tablet */
@media (max-width: 1024px){
  .kzt-premium-info__headline{ font-size: var(--pi-h-t, 30px); }
  .kzt-premium-info__intro{ font-size: var(--pi-body-t, 17px); }
  .kzt-premium-info__cardtitle{ font-size: var(--pi-sub-t, 17px); }

  .kzt-premium-info__row .col{ font-size: var(--pi-body-t, 17px); }

  .kzt-premium-info__grid{
    grid-template-columns: repeat(var(--pi-cols-t, 2), minmax(0, 1fr));
  }
  .kzt-premium-info__row.is-3{
    grid-template-columns: 1.1fr 1fr auto;
  }
}

/* Mobile */
@media (max-width: 820px){
  .kzt-premium-info__headline{ font-size: var(--pi-h-m, 26px); }
  .kzt-premium-info__intro{ font-size: var(--pi-body-m, 16px); }
  .kzt-premium-info__cardtitle{ font-size: var(--pi-sub-m, 16px); }
  .kzt-premium-info__row .col{ font-size: var(--pi-body-m, 16px); }

  .kzt-premium-info__grid{ grid-template-columns: 1fr; }
  .kzt-premium-info__row.is-3{
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .kzt-premium-info__list.right-align .col-c{
    text-align: left;
  }
}



/* Bäcker Custom*/

/* =========================
   NAV: Booking Button
   ========================= */

.nav-book-btn{
  display: inline-flex;
  opacity: 1!important;
  border: 1px solid #0A0A0A;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 22px;
  border-radius: 50px;
  background: #0a0a0a;
  color: #ffffff!important;
  text-decoration: none;
  font-weight: 500;
  transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease;
}

.nav-book-btn:hover{
  background: transparent;
  color: #0A0A0A!important;
  transform: translateY(-1px);
}



/* =========================================
   INTRO STATUS LINE (Punkt + Text)
   nutzt Subheadline-Typo aus dem Panel
   ========================================= */

.kzt-module.intro-block .intro-status{
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 16px 0; /* Abstand zur Headline */
  color: inherit;
  max-width: 100%;

  /* WICHTIG: gleiche Typo-Vars wie Subheadline */
  font-size: var(--sub-fs-d, 16px) !important;
  line-height: var(--sub-lh-d, 1.4) !important;
  letter-spacing: var(--sub-ls, 0.06em) !important;
}

.kzt-module.intro-block .intro-status__dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;

  /* optisch zentriert zur ersten Textzeile */
  margin-top: calc((1em * var(--sub-lh-d, 1.4) - 8px) / 2);

  flex: 0 0 auto;
  background: #2ecc71;
}

.kzt-module.intro-block .intro-status--open .intro-status__dot{ background: #2ecc71; }
.kzt-module.intro-block .intro-status--closed .intro-status__dot{ background: #e74c3c; }
.kzt-module.intro-block .intro-status--info .intro-status__dot{ background: #f1c40f; }

.kzt-module.intro-block .intro-status__text{
  display: inline;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;

  /* falls irgendwo span-styles greifen: */
  font-size: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
}

/* Tablet */
@media (max-width: 1023px){
  .kzt-module.intro-block .intro-status{
    font-size: var(--sub-fs-t, 15px) !important;
    line-height: var(--sub-lh-t, 1.4) !important;
    margin-bottom: 14px;
  }
  .kzt-module.intro-block .intro-status__dot{
    margin-top: calc((1em * var(--sub-lh-t, 1.4) - 8px) / 2);
  }
}

/* Mobile */
@media (max-width: 767px){
  .kzt-module.intro-block .intro-status{
    font-size: var(--sub-fs-m, 14px) !important;
    line-height: var(--sub-lh-m, 1.4) !important;
    margin-bottom: 14px;
  }
  .kzt-module.intro-block .intro-status__dot{
    margin-top: calc((1em * var(--sub-lh-m, 1.4) - 8px) / 2);
  }
}

/* =========================
   ALERTBAR — BG fullbleed, Content grid/fluid/full
   ========================= */

.kzt-alertbar__bg{
  background: var(--ab-bg, #0a0a0a);
  color: var(--ab-color, #fff);
}

/* Container-Layouts (du nutzt grid|fluid|fluid-no-padding bereits global) */
.kzt-alertbar__container{
  padding-block: 14px;
}

/* Inhalt */
.kzt-alertbar__content{
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 👇 Fontsize/Lineheight auf den gemeinsamen Container */
.kzt-alertbar__content{
  font-family: var(--ab-font, var(--font-sans));
  letter-spacing: var(--ab-ls, 0em);
  font-size: var(--ab-fs-d, 16px);
  line-height: var(--ab-lh-d, 1.35);
}

/* Text soll einfach erben */
.kzt-alertbar__text{
  font: inherit;
  letter-spacing: inherit;
  color: inherit;
}

/* Icon MUSS erben (FA überschreibt sonst gerne) */
.kzt-alertbar__icons,
.kzt-alertbar__icons i{
  font-size: inherit !important;
  line-height: 1;
  color: inherit;
}

/* Typo D/T/M */
@media (max-width: 1023px){
  .kzt-alertbar__content{
    font-size: var(--ab-fs-t, 15px);
    line-height: var(--ab-lh-t, 1.35);
  }
}
@media (max-width: 767px){
  .kzt-alertbar__content{
    font-size: var(--ab-fs-m, 14px);
    line-height: var(--ab-lh-m, 1.35);
  }
}



/* =========================================
   Overlay only — Standard-Navigation hart aus
   ========================================= */

.site-header .main-nav .menu,
.site-header .main-nav nav.menu,
.site-header .main-nav .glass-list,
.site-header .main-nav .nav-lang{
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  max-width: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  flex: 0 0 0 !important;
}

/* Toggle immer sichtbar */
.site-header .main-nav .nav-toggle{
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  flex: 0 0 auto !important;
}

/* =========================================
   Overlay Animation 
   ========================================= */

#mobile-overlay[aria-hidden="false"] .overlay-menu{
  animation: kztOverlayFadeIn .22s ease both;
}

@keyframes kztOverlayFadeIn{
  from{
    opacity: 0;
    transform: translateY(10px);
  }
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce){
  #mobile-overlay[aria-hidden="false"] .overlay-menu{
    animation: none !important;
  }
}


/* =========================================
   Overlay Active Link Arrow (FA7)
   ========================================= */

#mobile-overlay .overlay-item.is-active .overlay-link{
  display: flex;
  align-items: center;
}

#mobile-overlay .overlay-item.is-active .overlay-link::before{
  content: "\f061";
  font-family: "Font Awesome 7 Sharp";
  font-weight: 400;

  font-size: .5em;
  margin-right: 8px;
  opacity: 1;

  display: inline-flex;
  align-items: center;
}


/* =========================================
   Overlay: Icons nicht mit unterstreichen
   ========================================= */

/* Externe Icons */
#mobile-overlay .overlay-link--external .ext-ico{
  text-decoration: none !important;
  text-decoration-line: none !important;
  display: inline-block;
}

/* Active Arrow */
#mobile-overlay .overlay-item.is-active .overlay-link::before,
#mobile-overlay .overlay-subitem.is-active .overlay-sublink::before{
  text-decoration: none !important;
  display: inline-flex;
}

/* sicherstellen: nur Text wird dekoriert, nicht das Icon */
#mobile-overlay .overlay-link,
#mobile-overlay .overlay-sublink{
  text-decoration-skip-ink: auto;
}


/* =========================================
   Overlay: Underline nur auf Text, nie auf Icons
   ========================================= */

/* Basis: Overlay-Links selbst nicht unterstreichen */
#mobile-overlay .overlay-link,
#mobile-overlay .overlay-sublink{
  text-decoration: none !important;
}

/* Externe Links: Label + Icon sauber trennen */
#mobile-overlay .overlay-link--external{
  display: inline-flex;
  align-items: center;
  gap: 0;
}

/* Hover / Focus: nur Text-Label unterstreichen */
#mobile-overlay .overlay-link:hover .label,
#mobile-overlay .overlay-link:focus .label,
#mobile-overlay .overlay-sublink:hover .label,
#mobile-overlay .overlay-sublink:focus .label{
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

/* Aktiver Link: nur Text-Label unterstreichen */
#mobile-overlay .overlay-item.is-active > .overlay-item-row .overlay-link .label,
#mobile-overlay .overlay-subitem.is-active .overlay-sublink .label{
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

/* Icons immer ohne Underline */
#mobile-overlay .overlay-link--external .ext-ico,
#mobile-overlay .overlay-item.is-active > .overlay-item-row .overlay-link::before,
#mobile-overlay .overlay-subitem.is-active .overlay-sublink::before{
  text-decoration: none !important;
}