:root {
  --color-bg: #ffffff;
  --color-text: #141414;
  --color-primary: #004080;

  --knf-desktop-subnav-border-color: #555;
  --knf-dark-hero-desktop-subnav-border-color: #fff;
  --focus-outline-color: #ff9900;
  --focus-outline: 2px solid var(--focus-outline-color);

  --font-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  
  --font-family-base: var(--font-base);
  --font-weight-base: normal;

  --font-family-headline: var(--font-base);
  --font-weight-headline: bold;

  --font-size-base: 16px;
  --line-height-base: 1.5;

  --layout-max-width: 1200px;
  --layout-gutter: 1.5rem;

  --border-radius: 15px;

  --header-height: 4.5rem;
  --header-height-scrolled: 3.5rem;

  --header-transition-duration: 0.5s;
  --header-transition-easing: ease-in-out;
  --knf-header-vertical-padding-top: 0.75rem;
  --knf-header-vertical-padding-bottom: 0.75rem;
  --knf-header-vertical-padding-top-scrolled: 0.5rem;
  --knf-header-vertical-padding-bottom-scrolled: 1rem;

  /* Standard: Logo-Höhe aus normalem Header berechnen */
  --knf-header-logo-max-height: calc(
    var(--header-height) - var(--knf-header-vertical-padding-top) - var(--knf-header-vertical-padding-bottom)
  );

  --ast-global-color-0: #123274;
  --ast-global-color-7: #d2d2d2; /* default border-color */
  --ast-form-input-text: #000;
  --ast-form-input-focus-text: #000;



  --h-linie-color: #000;

  --wp-admin-bar-height: 0px;
  --topbar-height: 55px;

}



body.admin-bar
{
  --wp-admin-bar-height: 32px;  
}

@media (max-width: 782px) {
  body.admin-bar {
    --wp-admin-bar-height: 46px;
  }
}


::selection {
  background-color: var(--ast-global-color-0); /* --color-text); */
  color: #ffffff;
}

.text-weiss:not(.bg-rot) *:not(.bg-rot) ::selection,
.text-white:not(.bg-rot) *:not(.bg-rot) ::selection,
.white-text:not(.bg-rot) *:not(.bg-rot) ::selection,
.bg-blau ::selection,
.bg-blau-trans ::selection,
.bg-dunkelblau ::selection,
.bg-dunkelblau-trans ::selection 
{
  background-color: #fff;
  color: var(--ast-global-color-0);
}


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

body {
  margin: 0;
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  background: var(--color-bg);
  color: var(--color-text);
}

h1, h2, h3, h4, h5, h6, .entry-content :where(h1,h2,h3,h4,h5,h6), .site-title, .site-title a {
    font-family: var(--font-family-headline);
    font-weight: var(--font-weight-headline);
}

:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 3px;
}

.wpb_text_column ol, 
.wpb_text_column ul 
{
    margin: 0 0 1.5em 1.5em;
}

.wpb_text_column li
{
    margin-bottom: 0.8em;
}


.display-inline
{
  display: inline-block;
}


/* Wenn gescrollt: Logo-Höhe aus schmalem Header berechnen */
body.is-header-scrolled {
  --knf-header-logo-max-height: calc(
    var(--header-height-scrolled) - var(--knf-header-vertical-padding-top-scrolled) - var(--knf-header-vertical-padding-bottom-scrolled)
  );
}

.js_active .vc_row[data-vc-full-width="true"]{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.vc_row.vc_row-o-equal-height > .vc_column_container > .vc_column-inner > .wpb_wrapper
{
  height: 100%;
}


.vc_row.vc_row-o-equal-height.equal-height-buttons > .vc_column_container > .vc_column-inner > .wpb_wrapper
{
  display: flex;
}

.vc_row.vc_row-o-equal-height.equal-height-buttons > .vc_column_container > .vc_column-inner > .wpb_wrapper .vc_do_btn 
{
  display: flex;
}

.vc_row.vc_row-o-equal-height.equal-height-buttons > .vc_column_container > .vc_column-inner > .wpb_wrapper .vc_do_btn .vc_general.vc_btn3
{
  display: flex;
  align-items: center;
}



.vc_btn3-container.vc_btn3-inline + .vc_btn3-container.vc_btn3-inline,
p > a.vc_general.vc_btn3 + a.vc_general.vc_btn3
{
  margin-left: 15px;
}

p > a.vc_general.vc_btn3
{
  margin-bottom: 10px;
}





@media (max-width: 921px)
{
  .vc_row.vc_row-flex.reverse-on-mobile,
  .vc_row.vc_row-flex.reverse-cols-on-mobile 
  {
      flex-direction: row-reverse;
  }

}


@media (min-width: 922px)
{
  .vc_row.vc_row-flex.reverse-on-desktop,
  .vc_row.vc_row-flex.reverse-cols-on-desktop 
  {
      flex-direction: row-reverse;
  }

}

.wpb_single_image img
{
  width: 100%;
}


.white-text,
.white-text *,
.text-white,
.text-white *
{
    color: #fff;
}


.dark-text,
.dark-text *,
.text-dark,
.text-dark *
{
    color: var(--color-text);
}


html:lang(en-US) body *
{
    -webkit-hyphens: none;
    -moz-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
}


.no-padding-h h1, 
.no-padding-h h2,
.no-padding-h h3,
.no-padding-h h4,
.no-padding-h h5,
.no-padding-h h6
{
  margin-bottom: 0 !important;
}

.no-padding         {  padding: 0 !important; }
.no-padding-bottom  {  padding-bottom: 0 !important; }
.no-padding-top     {  padding-top: 0 !important; }
.no-padding-left    {  padding-left: 0 !important; }
.no-padding-right   {  padding-right: 0 !important; }

.no-border
{
  border: none !important;
}

.no-border-bottom
{
  border-bottom: none !important;
}

.no-border-top
{
  border-top: none !important;
}

.border-radius-box:not(.vc_column_container),
.border-radius-box.vc_column_container > .vc_column-inner
{
  border-radius:var(--border-radius);
  overflow:hidden;
}

.border-radius-top-box:not(.vc_column_container),
.border-radius-top-box.vc_column_container > .vc_column-inner
{
  border-top-left-radius:var(--border-radius);
  border-top-right-radius:var(--border-radius);
  overflow:hidden;
}

.border-radius-top-right-box:not(.vc_column_container),
.border-radius-top-right-box.vc_column_container > .vc_column-inner
{
  border-top-right-radius:var(--border-radius);
  overflow:hidden;
}

.border-radius-top-left-box:not(.vc_column_container),
.border-radius-top-left-box.vc_column_container > .vc_column-inner
{
  border-top-left-radius:var(--border-radius);
  overflow:hidden;
}

.border-radius-left-box:not(.vc_column_container),
.border-radius-left-box.vc_column_container > .vc_column-inner
{
  border-top-left-radius:var(--border-radius);
  border-bottom-left-radius:var(--border-radius);
  overflow:hidden;
}

.border-radius-bottom-box:not(.vc_column_container),
.border-radius-bottom-box.vc_column_container > .vc_column-inner
{
  border-bottom-left-radius:var(--border-radius);
  border-bottom-right-radius:var(--border-radius);
  overflow:hidden;
}

.border-radius-bottom-left-box:not(.vc_column_container),
.border-radius-bottom-left-box.vc_column_container > .vc_column-inner
{
  border-bottom-left-radius:var(--border-radius);
  overflow:hidden;
}


/* ################################################################# */

.block-padding:not(.vc_column_container),
.block-padding.vc_column_container > .vc_column-inner
{
  padding-top: var(--knf-block-padding-top, 60px);
  padding-bottom: var(--knf-block-padding-bottom, 60px);
}

.block-padding-top:not(.vc_column_container),
.block-padding-top.vc_column_container > .vc_column-inner
{
  padding-top: var(--knf-block-padding-top, 60px);
}

.block-padding-bottom:not(.vc_column_container),
.block-padding-bottom.vc_column_container > .vc_column-inner
{
  padding-bottom: var(--knf-block-padding-bottom, 60px);
}

.box-padding:not(.vc_column_container),
.box-padding.vc_column_container > .vc_column-inner > .wpb_wrapper
{
  padding: var(--knf-box-padding, 20px);
}

/* ################################ */

.vc_row *:not(.vc_grid-container) > .vc_row:not(.vc_gitem_row)
{
  margin-left: -15px;
  margin-right: -15px;
}

.vc_row[data-vc-full-width="true"].vc_column-gap-10>.vc_column_container
{
  padding: 20px;
} 


.vc_gitem-post-data-source-post_date
{
  font-style: italic;
  margin-right: 10px;
}

/*
.vc_grid-filter.vc_gitem-post-data-source-post_categories:before
{
  content: 'Kategorien: ';
  display: inline-block;
}
*/

.vc_grid-filter.vc_gitem-post-data-source-post_categories .vc_grid-filter-item a
{
  background-color: var(--knf-color-mittelsand) !important;
  border-radius: 100px !important;
  border: 2px solid #fff !important;
  box-shadow: 6px 6px 15px 0px rgba(0, 0, 0, 0.2);
  font-family: var(--font-family-bold);
  color: #fff !important;
  padding-top: 0.5em;
  padding-right: 1.2em;
  padding-bottom: 0.5em;
  padding-left: 1.2em;

}



/* ################################################################# */
body .wpb_single_image .vc_figure,
body .wpb_single_image .vc_single_image-wrapper
{
  width: 100%;
  max-width: none;
}

/* ################################################################# */

/*
.news-grid-item .vc_gitem-zone-a
{
    margin-bottom: 0px;
}
*/



/* news grid flex - nicht BG- pseudo 16:9 ohne echt height */

.vc_basic_grid > .vc_row.vc_grid > .vc_pageable-slide-wrapper
{
  display: flex;
  flex-wrap: wrap;
}

.vc_grid.vc_row .vc_grid-item .vc_btn3-container
{
  margin-bottom: 0;
}

.vc_grid.vc_row .vc_grid-item.news-grid-item > .vc_grid-item-mini
{
  height: 100%;
  display: flex;
  flex-direction: column;
}

.vc_grid.vc_row .vc_grid-item.news-grid-item > .vc_grid-item-mini >.vc_gitem-animated-block
{
  aspect-ratio: 2/1;
  width: 100%;
}

.vc_grid.vc_row .vc_grid-item.news-grid-item > .vc_grid-item-mini >.vc_gitem-zone-c
{
  display: flex;
  flex-grow: 1;
}

.vc_grid.vc_row .vc_grid-item.news-grid-item > .vc_grid-item-mini >.vc_gitem-zone-c .vc_gitem_row
{
  height: 100%;
}

.vc_grid.vc_row .vc_grid-item.news-grid-item > .vc_grid-item-mini >.vc_gitem-zone-c .vc_gitem-col
{
  height: 100%;
  display: flex;
  flex-direction: column;
}

.vc_grid.vc_row .vc_grid-item.news-grid-item .wpb_single_image 
{
  margin: 0;
}

.news-grid-item .vc-gitem-zone-height-mode-auto.vc-gitem-zone-height-mode-auto-16-9:before {
    padding-top: 53%;
}


.news-grid-item .vc_gitem-post-data.vc_gitem-post-data-source-post_title
{
    margin-bottom: 10px; /* max(0.6em, 16px); */
}

.news-grid-item .vc_gitem-post-data.vc_gitem-post-data-source-post_excerpt
{
    margin-bottom: 15px;
    flex-grow: 1;
}

/*
.vc_basic_grid > .vc_row.vc_grid > .vc_pageable-slide-wrapper > .news-grid-item
{
  display: flex;
  flex-wrap: wrap;
}
*/
/*
.vc_grid.vc_row .vc_grid-item.news-grid-item .wpb_single_image 
{
  margin: 0;
  width: 100%;
  aspect-ratio: 16/9;
}

.vc_grid-item.news-grid-item .vc_gitem-zone-a.vc-gitem-zone-height-mode-auto:before
{
  display: none;
}

.vc_grid-item.news-grid-item .vc_gitem-zone-a .vc_gitem-row-position-top
{
  position: relative;
}

*/

/* ############################################ */
/* ############  Layout (l-)       ############ */
/* ############################################ */

.l-site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.l-site__inner {
  flex: 1 0 auto;
}

.l-main {
  max-width: var(--layout-max-width);
  margin: 0 auto;
  padding: 1.5rem var(--layout-gutter) 5rem;
}

body.no-body-padding-bottom .l-main {
  padding-bottom:0;
}


.no-margin-top
{
  margin-top: 0 !important;
}

.no-margin-bottom
{
  margin-bottom: 0 !important;
}


/* ############################################ */
/* ############  Komponenten (c-)  ############ */
/* ############################################ */

/* Skiplink */
.c-skiplink {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 9999;
  background: #fafafa;
  color: #000;
  padding: 0.75rem 2rem;
  text-decoration: none;
  font-weight: bold;
  border: 1px solid #8b8b8b;
}

.c-skiplink:focus {
  left: 0.5rem;
  top: 0.5rem;
}

body.admin-bar .c-skiplink:focus {
  top: 50px;
}


/* logo */
/*
.c-header__logo
{
    max-width: 300px;  
}
*/

.c-header__logo .custom-logo-link {
  display: inline-flex;
  align-items: center;
}

.c-header__logo .custom-logo {

  max-height: var(--knf-header-logo-max-height);
  transition: 
    max-height var(--header-transition-duration) var(--header-transition-easing), 
    filter var(--header-transition-duration) var(--header-transition-easing);

  width: auto;
  height: auto;
  display: block;
}



/* c-nav übernimmt das Astra-Menü-Layout als Komponente */

@media (max-width: 921px)
{


}

body.ast-header-break-point:not(.is-nav-open) .c-nav {
  display: none;
}

.c-nav__inner {
  width: 100%;
}

/* Wir lassen Astra die Flex/Spacing-Regeln machen, aber können bei Bedarf ergänzen */


.c-nav .main-header-menu {
  align-items: center;
}

.c-nav .main-header-menu > .menu-item > .menu-link {
  padding: 0.5rem 0.5rem;
}

/* Fokus-Outline klarer machen */

.c-nav .menu-link:focus-visible {
  outline: var(--focus-outline);
  outline-offset: 3px;
}

/* subnav drowp-downs auch mit focus */
/* Desktop-Submenus: standardmäßig verstecken */
.main-header-menu .sub-menu {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
}

/* Auf Hover ODER wenn Fokus innerhalb des LI ist (Tab!) anzeigen */
.main-header-menu .menu-item-has-children:hover > .sub-menu,
.main-header-menu .menu-item-has-children:focus-within > .sub-menu,
.main-header-menu .menu-item-has-children.is-submenu-open > .sub-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}


/* #################################################### */

/* =========================================================
   Accessible Desktop Sub-Sub-Navigation
   ========================================================= */

@media (min-width: 922px) {

  /* Jede Menü-Ebene bekommt einen Positionierungskontext */
  .c-nav .main-header-menu > .menu-item,
  .c-nav .main-header-menu .sub-menu .menu-item {
    position: relative;
  }

  /* Erstes Dropdown unter dem Hauptpunkt */
  .c-nav .main-header-menu > .menu-item > .sub-menu {
    top: 100%;
    left: 0;
    right: auto;
  }

  /* Allgemeine Desktop-Dropdowns */
  .c-nav .main-header-menu .sub-menu {
    position: absolute;
    min-width: 18rem;
    z-index: 1000;
  }

  /* Sub-Sub-Menü standardmäßig nach rechts */
  .c-nav .main-header-menu .sub-menu .sub-menu {
    top: -1px;
    left: 100%;
    right: auto;
    margin-left: 0;
    transform: none;
  }

  /* Falls per JS gesetzt: nach links aufklappen */
  .c-nav .main-header-menu .sub-menu .menu-item.opens-left > .sub-menu {
    left: auto;
    right: 100%;
  }

  /* Links in Untermenüs sauber ausrichten */
  .c-nav .main-header-menu .sub-menu .menu-link {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    position: relative;
    padding-right: 2.25rem;
    white-space: normal;
  }

  .c-nav .main-header-menu .sub-menu .menu-link > .ast-icon.icon-arrow
  {
    display: none;
  }

  /* Vorne keinen Pfeil anzeigen */
  .c-nav .main-header-menu .sub-menu .menu-item-has-children > .menu-link::before {
    content: none !important;
    display: none !important;
  }

  /* Astra-/Theme-Toggle in Ebene 2/3 auf Desktop ausblenden */
  .c-nav .main-header-menu .sub-menu .menu-item-has-children > .menu-link > .dropdown-menu-toggle,
  .c-nav .main-header-menu .sub-menu .menu-item-has-children > .menu-link > .submenu-with-border,
  .c-nav .main-header-menu .sub-menu .menu-item-has-children > .menu-link > .ast-menu-toggle {
    display: none !important;
  }

  /* Nur hinten ein Pfeil */
  .c-nav .main-header-menu .sub-menu .menu-item-has-children > .menu-link::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1rem;
    width: 0;
    height: 0;
    transform: translateY(-50%);
    border-top: 0.35rem solid transparent;
    border-bottom: 0.35rem solid transparent;
    border-left: 0.45rem solid currentColor;
  }

  /* Bei nach-links öffnendem Menü Pfeil drehen */
  .c-nav .main-header-menu .sub-menu .menu-item-has-children.opens-left > .menu-link::after {
    border-left: 0;
    border-right: 0.45rem solid currentColor;
  }

  /* Verhindert "vertikales Dropdown-Verhalten" bei Ebene 3 */
  .c-nav .main-header-menu .sub-menu .sub-menu {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  .c-nav .main-header-menu .sub-menu .menu-item-has-children:hover > .sub-menu,
  .c-nav .main-header-menu .sub-menu .menu-item-has-children:focus-within > .sub-menu,
  .c-nav .main-header-menu .sub-menu .menu-item-has-children.is-submenu-open > .sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
}

/*############################*/
/* ------ mobile nav ------- */

.c-nav__hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  border: 0;
  background: transparent;
  font-size: 1.25rem;
}

/* Mobile Layout */
@media (max-width: 921px) {
  .c-nav__hamburger { 
    display: inline-flex;

  }

  body.hero-dark .c-nav__hamburger { 
    color: #fff;

  }

  /* Desktop-Menü im Header ausblenden */
  .ast-header-break-point .main-navigation.c-nav__inner { display: none; }

  /* Offcanvas öffnen */
  body.is-nav-open.ast-header-break-point .main-navigation.c-nav__inner {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    height: 100dvh;
    width: min(90vw, 360px);
    background: #fff;
    z-index: 9999;
    overflow-y: auto;
    padding: 1rem;
    box-shadow: -12px 0 40px rgba(0,0,0,.18);
  }

  /* Hintergrund sperren */
  body.is-nav-open {
    overflow: hidden;
  }

  /* Mobile: Submenus standardmäßig zu */
  body.is-nav-open .main-header-menu .sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    display: none;
    position: static;
  }

  body.is-nav-open .main-header-menu .menu-item-has-children.is-submenu-open > .sub-menu {
    display: block;
  }
}

.c-nav__submenu-toggle {
  border: 0;
  background: transparent;
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
}

@media (min-width: 922px) {

  /* Desktop: Toggle-Button ausblenden   */
  .c-nav__submenu-toggle {
    display: none;
  }



  /* DESKTOP: Astra-Flex für menu-items neutralisieren */
  .c-header .main-header-menu .menu-item {
    display: block !important;
    flex-direction: initial !important;
    justify-content: initial !important;
  }

  .c-header .main-header-menu {
    display: flex;
    gap: 0 1.25rem;
    align-items: center;
  }

  .c-header .main-header-menu > .menu-item > .menu-link {
    display: inline-flex !important;
    align-items: center;
    height: auto !important;
  }

}



/* TopBar */

body .l-site.has-topbar .l-site__inner
{
    transition: margin-top var(--header-transition-duration) var(--header-transition-easing);
    margin-top: var(--topbar-height, 55px);
}
body.is-header-scrolled .l-site.has-topbar .l-site__inner
{
    margin-top: 0;
}

.nzwknf-topbar {
    /*transition: opacity var(--header-transition-duration) var(--header-transition-easing), top var(--header-transition-duration) var(--header-transition-easing), visibility var(--header-transition-duration) var(--header-transition-easing), max-height var(--header-transition-duration) var(--header-transition-easing);
    */

    transition: top var(--header-transition-duration) var(--header-transition-easing), max-height var(--header-transition-duration) var(--header-transition-easing);
    
    height: var(--topbar-height, 55px);
    max-height: var(--topbar-height, 55px);
    opacity: 1;

    overflow: hidden;

    position: absolute;
    top: 0px;
    z-index: 999;
    width: 100%;

}

body.admin-bar .nzwknf-topbar {
    top: var(--wp-admin-bar-height);
}

body.is-header-scrolled .nzwknf-topbar {
  /* 
  display: none; 
  visibility: hidden;

  opacity: 0;
  max-height: 0;
  */
  top: calc(0px - var(--topbar-height, 55px));
  pointer-events: none;

}


/*
body.nzwknf-is-scrolled .nzwknf-topbar {
  display: none;
}
*/
.nzwknf-topbar__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 25px;
  padding: 5px 25px;
}

.nzwknf-topbar__search
{
    border: 1px solid var(--knf-color-mittelsand);
}

.nzwknf-topbar__searchform {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nzwknf-topbar__searchinput {
  width: min(420px, 42vw);
  border: 0;
  background: transparent;
  outline: none;
  padding: 7px 16px;
}

.nzwknf-topbar__searchbtn {
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 10px;
  font-size: 1rem;
  color: var(--knf-color-mittelsand);
}

.nzwknf-topbar__right {
  display: flex;
  align-items: center;
  gap: 25px;
}

.nzwknf-topbar__menuitems {
  display: flex;
  gap: 15px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nzwknf-topbar__menuitems a
{
    font-family: var(--font-family-bold);
    color: var(--knf-color-mittelsand);
    font-size: 1rem;
}

.nzwknf-topbar__socials {
  display: flex;
  gap: 10px;
}

.nzwknf-topbar__sociallink
{
    background-color: var(--knf-color-mittelsand);
    color: #fff !important;
    display: flex;
    font-size: 1rem;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    align-content: center;
    justify-content: center;
    align-items: center;


}

.nzwknf-topbar__langitems {
  display: flex;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nzwknf-topbar__langitem.is-active a {
  text-decoration: underline;
}

/* Mobile: Finder oben, Rest darunter (oder zentriert) */
@media (max-width: 768px) {
  .nzwknf-topbar__inner {
    flex-direction: column;
    align-items: stretch;
  }
  .nzwknf-topbar__searchinput {
    width: 100%;
  }
  .nzwknf-topbar__right {
    justify-content: center;
    flex-wrap: wrap;
  }
}





/* Header */



/* Header sticky am oberen Rand */
.c-header {
  /*
  background: #ffffff;
  border-bottom: 1px solid #dddddd;
  */

  position: sticky;
  top: var(--wp-admin-bar-height); /* abhängig von responsive var an body */
  z-index: 1000;

  min-height: var(--header-height);
  padding-block: var(--knf-header-vertical-padding-top) var(--knf-header-vertical-padding-bottom);
}


body .c-header, body .c-header a, body .main-header-menu > .menu-item > .menu-link
{
  transition:
    color var(--header-transition-duration) var(--header-transition-easing),
    background var(--header-transition-duration) var(--header-transition-easing),
    background-color var(--header-transition-duration) var(--header-transition-easing),
    /* box-shadow var(--header-transition-duration) var(--header-transition-easing), */
    min-height var(--header-transition-duration) var(--header-transition-easing),
    padding-block var(--header-transition-duration) var(--header-transition-easing);

}


/* WP-Adminbar berücksichtigen
body.admin-bar .c-header {
  top: 32px;
}

@media (max-width: 782px) {
  body.admin-bar .c-header {
    top: 46px;
  }
}
*/

body.is-header-scrolled .c-header {
  min-height: var(--header-height-scrolled);
  padding-block: var(--knf-header-vertical-padding-top-scrolled) var(--knf-header-vertical-padding-bottom-scrolled);
}


.c-header__inner {
  max-width: var(--layout-max-width);
  margin: 0 auto;
  padding: 0 var(--layout-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  /*min-height: 4rem;*/
}

.c-header__branding {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-left: 1rem;
  padding-right: 2rem;
}

.c-header__title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
}


/* Normale Header-Höhe */
.c-header__inner {
  transition: background 0.2s ease, box-shadow 0.2s ease, padding 0.2s ease;
  /*padding-block: 0.75rem;*/
}



/* Wenn gescrollt wurde: kompakter + Schatten */
/*
body.is-header-scrolled .c-header__inner {
  padding-block: 0.4rem;
}
*/

/* Header im Hero-Bereich transparent */
body:not(.is-header-scrolled) .c-header {
  background: rgba(255, 255, 255, 0);
  box-shadow: none;
  height: var(--header-height);
}

/* Sobald gescrollt wurde: klassischer Header */
body.is-header-scrolled .c-header {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(4px); /* etwas „glassy“ im BG */
  height: var(--header-height-scrolled);
}


/*
.c-header {
    position: relative;
}
*/


/* HERO */

/* Hero „zieht“ unter den Header hoch */
.c-hero {
    position: relative;
    z-index: 1;
    margin-top: calc(-1 * var(--header-height));
}

body.is-header-scrolled .c-hero {
  margin-top: calc(-1 * var(--header-height-scrolled));
}


/* damit der Content nicht unter den Header rutscht 
.l-main {
  padding-top: var(--header-height);
  transition: padding-top var(--header-transition-duration) var(--header-transition-easing);
}

body.is-header-scrolled .l-main {
  padding-top: var(--header-height-scrolled);
}
*/

.c-hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #000;

}

body .c-hero:after {
  content: "";
  position: absolute !important;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-repeat: no-repeat;
  pointer-events: none;

}

body .c-hero:after {
  background-image: linear-gradient(to bottom, rgba(255,255,255,0.3) 10%,rgba(255,255,255,0) 25%);
}
body.hero-dark .c-hero:after {
  background-image: linear-gradient(to bottom, rgba(0,0,0,0.3) 10%,rgba(0,0,0,0) 25%);
}


/* Höhe über CSS-Var */
.c-hero--full {
  height: calc( var(--knf-hero-height, var(--knf-hero-height-home, 60vh)) - var(--wp-admin-bar-height) - var(--topbar-height));
}

.c-hero--standard {
  height: calc( var(--knf-hero-height, var(--knf-hero-height-sub, 40vh)) - var(--wp-admin-bar-height) - var(--topbar-height));
}



.c-hero__inner {
  position: relative;
  width: 100%;
  height: 100%;
}



.text-small
{
    font-size: 90%;
}

/*
.text-h2-size,
.h2-size
{
    font-size: var(--the7-h2-font-size);
    line-height: var(--the7-h2-line-height);
}

.text-h3-size,
.h3-size
{
    font-size: var(--the7-h3-font-size);
    line-height: var(--the7-h3-line-height);
}
.text-h4-size,
.h4-size
{
    font-size: var(--the7-h4-font-size);
    line-height: var(--the7-h4-line-height);
}
*/

/* Standard: dunkle Navi auf hellem Hintergrund */
.c-header,
.c-header a,
.c-header .main-header-menu > .menu-item > .menu-link {
  color: #111;
}

.submenu-with-border .sub-menu {
    border-top-width: 1px;
    border-right-width: 0px;
    border-bottom-width: 2px;
    border-left-width: 0px;
    border-style: solid;
    border-color: var(--knf-desktop-subnav-border-color);
}

.submenu-with-border .sub-menu .menu-link
{
    border-color: var(--knf-desktop-subnav-border-color);
}

/* aktive Hauptpunkte */
.main-header-menu > .menu-item.current-menu-item > .menu-link,
.main-header-menu > .menu-item.current_page_item > .menu-link,
.main-header-menu > .menu-item.current-page-ancestor > .menu-link,
.main-header-menu > .menu-item.current-menu-ancestor > .menu-link,
.main-header-menu > .menu-item.current-menu-parent > .menu-link,
.main-header-menu > .menu-item.current-page-parent > .menu-link,
.main-header-menu > .menu-item.current_page_parent > .menu-link,
.main-header-menu > .menu-item.current_page_ancestor > .menu-link
{
  font-weight: 600;  
}
/* aktive Unterpunkte */
.main-header-menu .sub-menu .menu-item.current-menu-item > .menu-link,
.main-header-menu .sub-menu .menu-item.current_page_item > .menu-link,
.main-header-menu .sub-menu .menu-item.current-page-ancestor > .menu-link,
.main-header-menu .sub-menu .menu-item.current-menu-ancestor > .menu-link,
.main-header-menu .sub-menu .menu-item.current-menu-parent > .menu-link,
.main-header-menu .sub-menu .menu-item.current-page-parent > .menu-link,
.main-header-menu .sub-menu .menu-item.current_page_parent > .menu-link,
.main-header-menu .sub-menu .menu-item.current_page_ancestor > .menu-link
{
  font-weight: 600;
}

.main-header-menu > .menu-item:last-child.focus>.sub-menu, 
.main-header-menu > .menu-item:last-child:hover>.sub-menu, 
.main-header-menu > .menu-item:last-child>.sub-menu.toggled-on 
{
    right: 0;
    left: auto;
    visibility: visible;
}


body.hero-dark .c-hero__content:not(.text-dark) .c-hero__title,
body.hero-dark .c-hero__content:not(.text-dark) .c-hero__title2
{
  color: #ffffff;
  text-shadow: 0px 0px 5px rgba(0,0,0,0.8);
}

@media (min-width: 922px)
{

  body .is-header-scrolled .submenu-with-border .sub-menu .menu-link
  {

  }

  /* Dunkler Hero: helle Navi */
  body.hero-dark:not(.is-header-scrolled)
  {
      --knf-desktop-subnav-border-color: var(--knf-dark-hero-desktop-subnav-border-color);
  }

  body.hero-dark .c-header,
  body.hero-dark .c-header a,
  body.hero-dark .main-header-menu > .menu-item > .menu-link
  {
    color: #ffffff;
  }

  body.hero-dark:not(.is-header-scrolled) .c-header,
  body.hero-dark:not(.is-header-scrolled) .c-header a,
  body.hero-dark:not(.is-header-scrolled) .main-header-menu > .menu-item > .menu-link
  {
    text-shadow: 0px 0px 10px rgba(0,0,0,0.8);
  }


  body.hero-dark:not(.is-header-scrolled) .main-header-menu .sub-menu {
      background: rgba(255, 255, 255, 0.2);
  }

  body.hero-dark:not(.is-header-scrolled) .main-header-menu .sub-menu .menu-link:hover,
  body.hero-dark:not(.is-header-scrolled) .main-header-menu .sub-menu .menu-link:active,
  body.hero-dark:not(.is-header-scrolled) .main-header-menu .sub-menu .menu-link:focus
  {
      background: rgba(255, 255, 255, 0.2);

  }

  /* Astra-Hover-Zustände auch auf hell setzen */
  body.hero-dark:not(.is-header-scrolled) .main-header-menu > .menu-item > .menu-link:hover,
  body.hero-dark:not(.is-header-scrolled) .main-header-menu > .menu-item.current-menu-item > .menu-link {
    color: #ffffff;
  }


  /* Beim Scrollen (Header wird weiß) wieder Standard-Farben erzwingen */
  body.is-header-scrolled .c-header,
  body.is-header-scrolled .c-header a,
  body.is-header-scrolled .main-header-menu > .menu-item > .menu-link {
    color: #111;
  }

}

/* Logo invertieren */
body.hero-dark .custom-logo {
  filter: brightness(0) invert(1);
}

body.is-header-scrolled .custom-logo {
  filter: none;
}


/* Slides */

.c-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
  display: flex;
  align-items: stretch;
}

.c-hero__slide.is-active {
  opacity: 1;
/*  position: absolute; */
}


/* erste Slide ohne Faden beim Laden 
.no-transitions .c-hero__slide {
  transition: none;
}
*/

/* Bild + Overlay */
/*
.c-hero__media,
.c-hero__image {
  width: 100%;
  height: 100%;
}

.c-hero__image {
  object-fit: cover;
  display: block;
}

.c-hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;

  pointer-events: none;
}
*/

/* Bild + Video + Overlay */

.c-hero__media {
  width: 100%;
  height: 100%;
  position: relative; /* wichtig für absolut positioniertes Video */
}

.c-hero__image,
.c-hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Video wirklich „covern“ (verhindert, dass es wie ein Inline-Element „klebt“) */
.c-hero__video {
  position: absolute;
  inset: 0;
}



/* Inhalt über dem Bild */

.c-hero__content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 4rem var(--layout-gutter);
  max-width: var(--layout-max-width);
  margin: 0 auto;
  color: #fff;
  pointer-events: none;
}

.c-hero__content > * {
  pointer-events: auto;
}


.c-hero__titles {
  margin-top: 2.5rem;
  margin-bottom: 0.5rem;

  box-sizing: border-box;
  padding-left: 15px;
  padding-right: 15px;
  width: 100%;
 
}

.c-hero__title {
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  font-weight: 300;
  margin: 0 0 0.25rem;
}

.c-hero__title2 {
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  font-weight: 700;
  margin: 0;
}


.c-hero__text {
  max-width: 32rem;
}

.c-hero__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.25rem;
  margin-top: 0.75rem;
  background: var(--color-primary);
  color: #fff;
  text-decoration: none;
  border-radius: 999px;
  font-weight: 600;
}

/* Pagination Dots */

.c-hero__pagination {
  position: absolute;
  left: 50%;
  bottom: 0.75rem;
  transform: translateX(-50%);
  display: flex;
  gap: 0.5rem;
}

.c-hero__pagination-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.8);
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.c-hero__pagination-dot.is-active {
  background: #fff;
}


/* Footer */
.c-footer {
  border-top: 1px solid #dddddd;
  background: #fafafa;
  margin-top: 2rem;
}

.c-footer__inner, 
.site-primary-footer-inner-wrap
{
  max-width: var(--layout-max-width);
  margin: 0 auto;

  padding: 0 calc(var(--layout-gutter) + 15px);

}

.c-footer__widgets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
}

.c-footer__bottom {
  margin-top: 1.5rem;
  font-size: 0.875rem;
  text-align: center;
}


/* Content-Komponente */

.c-content {
/*  margin-bottom: 2rem; */
}

.c-content__header {
  margin-bottom: 1rem;
}

.c-content__title {
  margin: 0 0 0.75rem;
  font-size: 1.75rem;
}

.c-content__body {
  font-size: 1rem;
}

.vc_row.content-margin-bottom-columns > .vc_column_container,
.content-margin-bottom
{
  margin-bottom: 3rem;
}




/* ############################################ */
/* ############  Utilities (u-)    ############ */
/* ############################################ */

.center-text,
.text-center,
.u-text-center {
  text-align: center;
}


.zitate blockquote
{
    margin: 0;
    color: var(--color-text);
    border: none;
    font-size: 1.2em;
    text-align: center;
}

.wpb_text_column.zitate > .wpb_wrapper > blockquote
{
  padding: 0;
}

.zitate blockquote cite,
.zitate blockquote em,
.zitate blockquote i
{
    color: var(--ast-global-color-3);
    font-style: italic;
}


/* ###################################### */
/* ############ Anfrageforms ############ */

.wpcf7 form>div
{
    margin-bottom: 0;
}

.wpcf7 form .vc_row
{
    margin-bottom: 1em;
}

.wpcf7 p:last-child
{
  margin-bottom: 0px;
}

.wpcf7 label
{
    margin-top: 10px;
    display: inline-block;

}

label, legend {
    color: inherit;
    font-size: inherit;
    font-style: normal;
    font-weight: 500;
    line-height: inherit;
}    


/*
.wpcf7 .vc_column_container>.vc_column-inner {
    padding-left: 5px;
    padding-right: 5px;
}
*/

.wpcf7 hr {
    background-color: #ccc;
    margin-bottom: 1.5em;
    margin-top: 1.5em;
}


.wpcf7 input.wpcf7-form-control:not([type=submit]),
.wpcf7 select.wpcf7-form-control,
.wpcf7 textarea.wpcf7-form-control
{
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    width: 100%;
    padding: 6px 10px;
    border-radius: 0px;
    box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.05);
}

.wpcf7 input.wpcf7-form-control.wpcf7-not-valid:not([type=submit]),
.wpcf7 select.wpcf7-form-control.wpcf7-not-valid,
.wpcf7 textarea.wpcf7-form-control.wpcf7-not-valid
{
  background-color: #fff5f5;
  border: 1px solid #ff0000;
}

.wpcf7 input.wpcf7-form-control:not([type=submit]):focus, 
.wpcf7 select.wpcf7-form-control:focus, 
.wpcf7 textarea.wpcf7-form-control:focus 
{
    border: 2px dotted var(--color-primary);
    box-shadow: none;
    color: var(--ast-form-input-focus-text, #475569);
}

.wpcf7 input[type=checkbox]:focus, 
.wpcf7 input[type=radio]:focus
{
  outline: 2px dotted var(--color-primary);
}

/*
button:focus, .menu-toggle:hover, button:hover, .ast-button:hover, .ast-custom-button:hover .button:hover, .ast-custom-button:hover, input[type=reset]:hover, input[type=reset]:focus, input#submit:hover, input#submit:focus, input[type="button"]:hover, input[type="button"]:focus, input[type="submit"]:hover, input[type="submit"]:focus, form[CLASS*="wp-block-search__"].wp-block-search .wp-block-search__inside-wrapper .wp-block-search__button:hover, form[CLASS*="wp-block-search__"].wp-block-search .wp-block-search__inside-wrapper .wp-block-search__button:focus, body .wp-block-file .wp-block-file__button:hover, body .wp-block-file .wp-block-file__button:focus
*/

.wpcf7 .wpcf7-submit
{
  margin-top: 15px;
}

.wpcf7 .vc_row.vc_row-flex>.vc_column_container
{
  display: block;
}

/* ################### CF7 Autosuggest ################### */

.knf-cf7-autosuggest {
  position: relative;
  z-index: 9999;
  overflow: visible;
  display: block;
}


/* WPBakery-Wrapper dürfen die Liste nicht abschneiden 
.wpb_wrapper,
.vc_column-inner,
.vc_column_container,
.vc_row {
  overflow: visible !important;
}*/


.knf-cf7-autosuggest__results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 10000;
  background: #fff;
  border: 1px solid rgba(0,0,0,.15);
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
  max-height: 18rem;
  overflow-y: auto;
  display: none;
}

.knf-cf7-autosuggest.is-open .knf-cf7-autosuggest__results {
  display: block;
}

.knf-cf7-autosuggest__item {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(0,0,0,.06);
  padding: .75rem .9rem;
  cursor: pointer;
}

.knf-cf7-autosuggest__item:hover,
.knf-cf7-autosuggest__item:focus {
  background: rgba(0,0,0,.05);
  outline: 0;
}

.knf-cf7-autosuggest__item-title {
  display: block;
  font-weight: 600;
}

.knf-cf7-autosuggest__item-subtitle {
  display: block;
  font-size: .9em;
  opacity: .75;
  margin-top: .15rem;
}

.knf-cf7-autosuggest__empty {
  display: block;
  padding: .75rem .9rem;
  opacity: .75;
}

.knf-cf7-autosuggest,
.knf-cf7-autosuggest__results {
  isolation: auto;
}

/* --------------------------------------- */

@media (max-width: 768px) {

  .knf-fact-padding-left .knf-persons__field,
  .small-knf-fact-padding-left .knf-persons__field
  {
        justify-content: center;
  }

}


/* aus knf-downloads hier die Link-Liste, wenn Downloads nicht eingebunden werden: */
.link-liste ul,
ul.link-liste
/*.knf-downloads__list*/ {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1rem;
}

.link-liste li
{
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.875rem;
  align-items: start;
}

.link-liste li > a
/*.knf-downloads__link*/ {
  text-decoration: none;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  padding: 1rem 1.125rem;
  background: #fff;
  max-width: 100%;
}

.link-liste li > a:after
{
  content: '';
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  vertical-align: baseline;
  background: url(../images/knf/link-arrow-black.svg) no-repeat center;
  background-size: contain;
  margin-left: 0.4em;
}

/* ################### Headline h-linie ################### */


/* Grundcontainer: dünne Linie */
.linie,
.h-linie h1,
.h-linie h2,
.h-linie h3,
.h-linie h4,
.h-linie h5,
.h1-linie h1,
.h2-linie h2,
.h3-linie h3,
.h4-linie h4,
.h5-linie h5 {
    position: relative;
}

/* dünne Linie über Blockbreite */
.linie::after,
.h-linie h1::after,
.h-linie h2::after,
.h-linie h3::after,
.h-linie h4::after,
.h-linie h5::after,
.h1-linie h1::after,
.h2-linie h2::after,
.h3-linie h3::after,
.h4-linie h4::after,
.h5-linie h5::after {
    content: "";
    position: absolute;
    bottom: 0;              /* beide Linien am selben „Nullpunkt“ */
    height: 2px;            /* dünne Linie */
    background: var(--h-linie-color);

    width: 100%;
    left: 0;

}

/* SPAN nur für Breitensteuerung */
.linie > span,
.h-linie h1 > span,
.h-linie h2 > span,
.h-linie h3 > span,
.h-linie h4 > span,
.h-linie h5 > span,
.h1-linie h1 > span,
.h2-linie h2 > span,
.h3-linie h3 > span,
.h4-linie h4 > span,
.h5-linie h5 > span {
    position: relative;
    display: inline-block;
    padding-bottom: 0.1em;
    max-width: 90%;
}



/* dicke Linie — sitzt jetzt *unterhalb* der dünnen Linie */
.linie > span::after,
.h-linie h1 > span::after,
.h-linie h2 > span::after,
.h-linie h3 > span::after,
.h-linie h4 > span::after,
.h-linie h5 > span::after,
.h1-linie h1 > span::after,
.h2-linie h2 > span::after,
.h3-linie h3 > span::after,
.h4-linie h4 > span::after,
.h5-linie h5 > span::after {
    content: "";
    position: absolute;
    height: 6px;            /* dicke Linie */
    background: var(--h-linie-color);
    bottom: -4px;           /* <-- höhe minus dünne line */

    width: 100%;
    left: 0;
    right: auto;

}

.text-weiss,
.text-white,
.white-text
{
    --h-linie-color: #fff;
}





/*
.linie[style*="text-align: left"] > span::after,
.linie:not([style*="text-align: right"]):not([style*="text-align: center"]) > span::after {
    margin-right: auto; 
}

.linie[style*="text-align: center"] > span::after {
    margin-left: auto;
    margin-right: auto;
}

.linie[style*="text-align: right"] > span::after {
    margin-left: auto;
}
*/


/* ################## OVERVIEW Teaser ##################### */

/* =========================================================
   KNF Overview Kirchen-Teaser Cards
   ========================================================= */

.knf-overview-teasers--kirche {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}

@media (max-width: 1024px) {
  .knf-overview-teasers--kirche {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .knf-overview-teasers--kirche {
    grid-template-columns: 1fr;
  }
}

.knf-teaser-card {
  background: var(--knf-color-hellsand, #f4f1ee);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.knf-teaser-card__image {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.knf-teaser-card__image a,
.knf-teaser-card__image img {
  display: block;
  width: 100%;
  height: 100%;
}

.knf-teaser-card__content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1rem 1rem 1.25rem;
}

p.knf-teaser-card__ort {
  margin: 0 0 5px;
}

.knf-teaser-card__ort a {
  text-decoration: none !important;
  color: inherit;
  font-style: italic;
  font-size: 90%;
}

.knf-teaser-card__ort a:hover {
  text-decoration: underline !important;
}

.knf-teaser-card__title {
  margin-top: 0;
  margin-bottom: 12px !important;
}

.knf-teaser-card__title a {
  color: inherit;
  text-decoration: none !important;
  font-size: max(75%, 1.4rem);
  line-height: 120%;
  display: block;
}

.knf-teaser-card__fact {
  margin-bottom: 0.5rem;
}

.knf-teaser-card__fact:last-of-type {
  margin-bottom: 0;
}

.knf-teaser-card__fact-label {
  font-weight: 700;
  margin-bottom: 0rem;
}

.knf-teaser-card__fact-value p {
  margin: 0 0 0.5rem;
}

.knf-teaser-card__fact-value p:last-child {
  margin-bottom: 0;
}

.knf-teaser-card__fact-value a {
  word-break: break-word;
}

.knf-teaser-card__actions {
  margin-top: auto;
  padding-top: 1.5rem;
  text-align: right;
}

.knf-teaser-card__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 11rem;
  text-decoration: none;
}