:root {
    --mobile-menu-width: calc(100% - 42px);
	--mobile-menu-height: 100%;
	--mobile-menu-toggler-width: 42px;
	--mobile-menu-toggler-height: 50px;
	--default-offcanvas-slide-menu-width: 350px;
	--default-offcanvas-drawer-height: 400px;
	--default-offcanvas-tab-width: 42px;
	--default-offcanvas-tab-height: 120px;
	--ahg-default-bg-color: #333;
	--ahg-footer-bg-color: #333;
  }


/* =========================
   CONTAINER-HEADER
========================= */
.container-header {
  height: 100%;
  background: #2B343B;
  display: flex;
  padding-left: 2em;
  padding-right: 2em;
}

.container-header .grid-child {
    flex-flow: row;
}


.container-header .container-nav {
	width: 100%;
	max-width: none;
}

/* =========================
   SchnellKontakt Telefon
========================= */
.moduletable.tel-kontakt {
	position: absolute;
    top: 0;
	padding-top: 0.5em;
	padding-right: 2em;
}

/* =========================
   DRAWER WRAPPER
========================= */
.drawer {
  position: fixed;
  right: 0;

  /* frei steuerbar */
  top: var(--drawer-top, 20%);
  height: var(--default-offcanvas-drawer-height);
  width: var(--mobile-menu-width);

  z-index: 9999;

  /* initial versteckt */
  transform: translateX(100%);
  transition: transform 0.35s ease;

  display: flex;
}

/* OPEN STATE */
.drawer.open {
  transform: translateX(0);
}

/* =========================
   PANEL
========================= */
.drawer-panel {
  width: 100%;
  height: 100%;

  background: #fff;
  box-shadow: -12px 0 30px rgba(0,0,0,0.15);

  position: relative;
  padding: 16px;

  overflow-y: auto;

  border-radius: 8px 0 0 8px;
}

/* =========================
   TAB (GRIFF)
========================= */
.drawer-tab {
  opacity: 0.9;
  position: absolute;

  top: 0;
  left: -42px; /* leicht rausgezogen */

  width: var(--default-offcanvas-tab-width);
  height: var(--default-offcanvas-tab-height); /* oder passend zur Box */
 
  color: #fff;

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

  cursor: pointer;

  user-select: none;

  box-shadow: -4px 0 10px rgba(0,0,0,0.2);

  /* WICHTIG: vertikale Schrift */
  writing-mode: vertical-rl;
  text-orientation: mixed;

  /* sorgt für saubere Lesbarkeit */
  transform: none;
  border-radius: 8px 0 0 8px;

  /* WICHTIG: dynamische Farbe */
  background: var(--tab-bg, #0d6efd);
  color: var(--tab-color, #fff);
}

.drawer-tab:hover {
  z-index: 9999;
  opacity: 1;
}

/* =========================
   MOD-MENÜ
========================= */
.container-header .mod-menu > li > a, .container-header .mod-menu > li > span {
    color: #ffffff;
}

.metismenu.mod-menu .mm-toggler {
    color: #ffffff;
}


/* =========================
   CONTAINER-NAV
========================= */
.container-header .container-nav {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  padding-bottom: 0;
}
.container-header nav {
  margin-top: 0;
  padding: 0;
}

.container-header .navbar-brand {
  max-width: 200px;
  min-width: 200px;
}

.container-header .navbar-collapse.show {
  background-color: #000000;
  opacity: 0.90;
}

/* =========================
   (GRIFF) NAVBAR-TOGGLER
========================= */
.container-header .navbar-toggler {
    color: #000000;
    cursor: pointer;
    border: 1px solid #fff;
}


@supports (display: grid) {
    .site-grid {
        grid-gap: 0 1em;
        grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, 16.875rem)) [main-end] minmax(0, 1fr) [full-end];
        grid-template-areas:         ". banner banner banner banner ."        ". top-a top-a top-a top-a ."        ". top-b top-b top-b top-b ."        ". comp comp comp comp ."        ". side-r side-r side-r side-r ."        ". side-l side-l side-l side-l ."        ". bot-a bot-a bot-a bot-a ."        ". bot-b bot-b bot-b bot-b .";
        display: grid;
    }
}

/* =========================
    LANGUAGE DropDownButton
========================= */
.mod-languages .dropdown-toggle {
    background: var(--tab-bg, none);
    color: #555555;
    border: 0;
	padding: 0;
}

.mod-languages .dropdown-toggle:hover,
.mod-languages .dropdown-toggle:focus {
    background: none;
    color: #999999;
}

.mod-languages .dropdown-toggle {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}


/* =========================
    CARDs
========================= */
.card-header {
    color: #2B343B;
}

.card-body {
    color: #2B343B;
}


.card{
    --card-spacer-y: 1em;
    --card-spacer-x: 0;

}



/* =========================
    iFRAME-Wrapper - NEXT
========================= */
.next-wrapper-page .site-grid {
    display: block;
}

.next-wrapper-page .grid-child.container-component {
    width: 100%;
    max-width: none;
    padding: 0;
}

.next-wrapper-page main {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.next-wrapper-page iframe {
    display: block;
    width: 100%;
    height: calc(100dvh - 37px);
    min-height: 100%;
    border: 0;
}

.contentpane {
    padding: 0px;
}

.next-wrapper-page .navbar-brand {
	display: none;
}

.next-wrapper-page .container-header {
	box-shadow: 0 2px 12px rgba(0,0,0,.18);
}
.next-wrapper-page .container-header .container-nav {
    justify-content: center;
}

.next-wrapper-page .container-header .mod-menu > li > a, .container-header .mod-menu > li > span {
    color: #ffffff;
}

.next-wrapper-page .metismenu.mod-menu .metismenu-item {
    padding: 0.3em 0.9em;
}



/* =========================
    FOOTER
========================= */
.container-footer {
    color: #fff;
    background-color: #2B343B;
    /*background-image: linear-gradient(135deg, var(--cassiopeia-color-primary) 0%, var(--cassiopeia-color-hover) 100%);*/
	background-image: none;
    margin-top: 0;
	margin-bottom: 0;
}

.footer .grid-child {
    justify-content: space-between;
    align-items: baseline;
    padding: 2.5rem 6em;
	font-size: 13px;
}



/*############################### Bei HORIZ-Auflösung >= 992px #########################################*/
@media (min-width: 992px) {
/* =========================
   DRAWER WRAPPER
========================= */
	.drawer {
		width: var(--default-offcanvas-slide-menu-width);
	}
	
	@supports (display: grid) {
        .site-grid {
            grid-template-areas:         ". banner banner banner banner ."        ". top-a top-a top-a top-a ."        ". top-b top-b top-b top-b ."        ". side-l comp comp side-r ."        ". bot-a bot-a bot-a bot-a ."        ". bot-b bot-b bot-b bot-b .";
        }
	}


	 /* =========================
	   SMART-SLIDER
	========================= */

	div#n2-ss-3 .n2-style-ea8f3c06b1511608e0620ad3a339e400-heading {
		font-size: 1.2em;
	}
	
	div#n2-ss-3 .n2-font-4fbcee02389e007a2accee4dc420e362-paragraph {
		font-size: 1.2em;
	}
}






@media (min-height: 800px) {
/* =========================
   TAB (GRIFF)
========================= */
  .drawer {
	height: 600px; /* oder passend zur Box */
	}
}


@media (max-height: 600px) {
/* =========================
   TAB (GRIFF)
========================= */
  .drawer {
	height: 350px; /* oder passend zur Box */
	}
}


/*############################### Bei HORIZ-Auflösung <= 991.98px #########################################*/
@media (max-width: 991.98px) {

	@supports (display: grid) {
		.site-grid {
			grid-gap: 0 1em;
			grid-template-columns: [full-start] minmax(0, 1fr) [main-start] repeat(4, minmax(0, 15.875rem)) [main-end] minmax(0, 1fr) [full-end];
			grid-template-areas:         ". banner banner banner banner ."        ". top-a top-a top-a top-a ."        ". top-b top-b top-b top-b ."        ". comp comp comp comp ."        ". side-r side-r side-r side-r ."        ". side-l side-l side-l side-l ."        ". bot-a bot-a bot-a bot-a ."        ". bot-b bot-b bot-b bot-b .";
			display: grid;
		}
		
	}

/* =========================
   HEADER
========================= */
  .container-header {
    padding-left: 1em;
    padding-right: 1em;
	padding-top: 50px;
  }
  
/* =========================
   NAVBAR-COLLAPSED
========================= */
  .container-header .navbar-collapse {
    position: fixed;
    right: 0;
    top: 0;/*var(--drawer-top, 20%);*/
    width: var(--mobile-menu-width);
    height: var(--mobile-menu-height);

    transform: translateX(100%);
    transition: transform 0.35s ease;

    background: #fff;
    box-shadow: -12px 0 30px rgba(0,0,0,0.15);
    border-radius: 8px 0 0 8px;

    padding: 0px;
    overflow-y: auto;
    z-index: 999998;
    display: block;
  }

  .container-header .navbar-collapse.show {
    transform: translateX(0);
  }

/* =========================
   (GRIFF) NAVBAR-TOGGLER
========================= */
  .container-header .navbar-toggler {
	opacity: 0.9;
    position: fixed;
    top: 0;
    right: 0;

    width: var(--mobile-menu-toggler-width);
    height: var(--mobile-menu-toggler-height);

    z-index: 999999;

    /*transform: translateX(0);*/
	transform: none;
    /*transition: transform 0.35s ease;*/
	transition: right 0.35s ease;

    border-radius: 8px 0 0 8px;
    background: var(--tab-bg, #0d6efd);
    color: #fff;
    border: 0;
  }

  body:has(.container-header .navbar-collapse.show)
  .container-header .navbar-toggler {
    /*transform: translateX(calc(-1 * var(--mobile-menu-width)));*/
	right: var(--mobile-menu-width);
  }
 
  /* =========================
   SMART-SLIDER
  ========================= */
  div#n2-ss-3 .n2-style-ea8f3c06b1511608e0620ad3a339e400-heading {
	font-size: 2em;
  }
	
  div#n2-ss-3 .n2-font-4fbcee02389e007a2accee4dc420e362-paragraph {
	font-size: 2em;
  } 
 
 

/* =========================
   FOOTER
========================= */
  .footer .grid-child {
    padding: 2.5rem 1em;
    font-size: 13px;
  }  
}




.container-component > nav.mod-breadcrumbs__wrapper {
    margin-top: 0;
}

.container-header .container-nav {
	padding: 0;
}

.container-header .grid-child {
    padding: 0;
}

.container-component > :first-child, .container-sidebar-left > :first-child, .container-sidebar-right > :first-child, .container-component > * + *, .container-sidebar-left > * + *, .container-sidebar-right > * + * {
    margin-top: 2em;
}