/* ---------- CSS Custom Properties ---------- */
    :root {
      --sidebar-width: 270px;
      --sidebar-bg: #fff;
      --sidebar-color: #222;
      --sidebar-transition: 0.3s ease;
      --toggle-btn-bg: #7386d5;
      --content-bg: #fafafa;
      --tp-theme-primary: #555;
      --color1: #CC0000;
      --color2: #647f8c;
    }

body {
  font-family: 'Inconsolata', 'Courier', sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 14px;
}


.vortext { width:80%; margin:0 auto; }
.vortext p, .vortext a, .vortext li, .vortext table { font-size:1.3em;line-height:1.5; }

h1, h2, h3, h4, h5, h6, a, button {
  color: var(--color2);
  }
p, li { color: var(--tp-theme-primary); }
.back-to-top-btn { background: var(--color2); }

    /* ---------- Wrapper ----------
       Kein Flexbox, kein CSS-Grid auf dem Wrapper.
       Sidebar ist absolut/relativ positioniert,
       main bekommt einen margin-left. So bleibt
       Isotopes float-Layout ungestört.
    ------------------------------------------ */
    .wrapper {
      position: relative;
      min-height: 100vh;
    }

    /* ---------- Sidebar ---------- */
    #sidebar {
      position: fixed;        /* fixiert am linken Rand */
      top: 0;
      left: 0;
      width: var(--sidebar-width);
      height: 100vh;
      background: var(--sidebar-bg);
      color: var(--sidebar-color);
      overflow-y: auto;
      overflow-x: hidden;
      transition: transform var(--sidebar-transition);
      z-index: 99999;
      padding: 30px 30px;
      box-shadow: 2px 0 8px rgba(0,0,0,0.08);
    }

    /* Eingeklappt: nach links rausschieben */
    #sidebar.collapsed {
      transform: translateX(calc(-1 * var(--sidebar-width)));
    }

    /* ---------- Main ---------- */
    main {
      margin-left: var(--sidebar-width);  /* Platz für Sidebar */
      transition: margin-left var(--sidebar-transition);
      min-height: 100vh;
      padding: 1rem;
    }

    /* Wenn Sidebar eingeklappt: main wieder volle Breite */
    #sidebar.collapsed ~ main {
      margin-left: 0;
    }


    /* Button wandert mit, wenn Sidebar offen */
    #sidebar:not(.collapsed) ~ .nav-toggle,
    body.sidebar-open .nav-toggle {
      left: calc(var(--sidebar-width) + 20px);
    }
    
.view-icon .icon-focus {
font-size:3em;
color:#CC0000;
}

/* =============================================
   BURGER-BUTTON besser
   ============================================= */
   
.tp-offcanvas-close { display:none; } /* nicht gebraucht */
body.sidebar-open .nav-toggle span   { opacity: 0; }
body.sidebar-open .nav-toggle::before { transform: rotate3d(0,0,1,45deg); }
body.sidebar-open .nav-toggle::after  { transform: rotate3d(0,0,1,-45deg); }
   
.nav-toggle {
position: fixed;
      top: 32px;
      left: 20px;           /* immer sichtbar, linke Seite */
      z-index: 1040;
      transition: left var(--sidebar-transition);
  width: 30px;
  height: 24px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  pointer-events: all;
}
.nav-toggle::before,
.nav-toggle::after {
  content: '';
  position: absolute;
  height: 2px;
  width: 100%;
  left: 0;
  top: 50%;
  background: var(--color1);
  transform-origin: 50% 50%;
  transition: transform 0.25s;
}
.nav-toggle::before { transform: translate3d(0,-10px,0); }
.nav-toggle::after  { transform: translate3d(0,10px,0); }
.nav-toggle span {
  position: absolute;
  width: 100%;
  height: 2px;
  background: var(--color1);
  left: 0;
  overflow: hidden;
  text-indent: 200%;
  transition: opacity 0.25s;
}

/* =============================================
   BURGER-BUTTON Ende
   ============================================= */

    /* ---------- Responsive ---------- */
    @media (max-width: 768px) {
      /* Sidebar standardmäßig versteckt auf Mobile */
      #sidebar {
        transform: translateX(calc(-1 * var(--sidebar-width)));
      }

      #sidebar.collapsed {
        transform: translateX(calc(-1 * var(--sidebar-width)));
      }

      /* Offen auf Mobile */
      #sidebar.mobile-open {
        transform: translateX(0);
      }

      main {
        margin-left: 0 !important;
      }

    body.sidebar-open .nav-toggle.right {
      left: calc(var(--sidebar-width) - 10px);
    }

    }
    
    @media (max-width: 360px) {
    body.sidebar-open .nav-toggle.right {
      left: calc(var(--sidebar-width) + 10px);
    }
    }
    
    
    
.submenu {
    display: none;
}
.submenu.open {
    display: block;
}

/* Optionale Pfeil-Transition */
.tp-right i {
    transition: transform 0.25s ease;
}

/*----------------------------------------*/
/* 6.2 Mobile css
/*----------------------------------------*/
.tp-offcanvas-menu {
  margin-bottom: 40px;
}

.tp-offcanvas-menu ul {
  list-style: none;
}
.tp-offcanvas-menu ul li {
  position: relative !important;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .tp-offcanvas-menu ul li a i {
    display: inline-block;
  }
}
.tp-offcanvas-menu ul li > a {
  padding: 8px 0;
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: var(--tp-theme-primary);
}

.tp-offcanvas-menu ul li:hover > a {
  color: var(--tp-theme-primary);
}
.tp-offcanvas-menu ul li.active > a {
  color: var(--tp-theme-primary);
}
.tp-offcanvas-menu ul li.active > .tp-right {
  color: #fff;
  background: var(--tp-theme-primary);
  border-color: var(--tp-theme-primary);
}

.tp-offcanvas-menu ul li .submenu {
  display: none;
}
.tp-offcanvas-menu ul li .tp-mega-menu {
  display: none;
  padding-left: 0;
  margin-top: -1px;
}
.tp-offcanvas-menu .homemenu-title {
  margin-bottom: 25px;
}
.tp-offcanvas-style-2 .tp-offcanvas-menu ul li:hover > a {
  color: var(--color1);
}
.tp-offcanvas-style-2 .tp-offcanvas-menu ul li.active > a {
  color: var(--color1);
}
.tp-offcanvas-style-2 .tp-offcanvas-menu ul li.active > .tp-right {
  color: #444;
  border: 1px solid rgba(1, 15, 28, 0.12);
  background: no-repeat;
}
.tp-right {
  position: absolute;
  top:0;
  font-size: 18px;
  line-height: 15px;
  text-align: center;
  border: 1px solid rgba(1, 15, 28, 0.12);
  background: no-repeat;
  margin-left:14px;
}
.tp-right i {
  transition: all 0.3s;
}
/*----------------------------------------*/
/* 6.3 offcanvas css
/*----------------------------------------*/
.body-overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  visibility: hidden;
  opacity: 0;
  transition: 0.45s ease-in-out;
  background: rgba(24, 24, 24, 0.4);
}
.body-overlay.opened {
  opacity: 1;
  visibility: visible;
}
.tp-offcanvas-logo {
  width: 150px;
}
.tp-offcanvas-logo img {
  width: 100%;
}
.tp-offcanvas-top .logo{
  padding: 0;
}
.tp-offcanvas-top {
  margin-bottom: 60px;
}
.tp-offcanvas-close-btn {
  background: none;
  box-shadow: none;
  outline: 0;
  border: none;
}
.tp-offcanvas-close-btn:hover svg{
  opacity: 1;
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}
.tp-offcanvas-content {
  margin-bottom: 45px;
}
.tp-offcanvas-content p {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #414144;
}
.tp-offcanvas-title {
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.8px;
  font-weight: 700;
  margin-bottom: 15px;
  color: var(--color2);
}
.tp-offcanvas-title.sm {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 15px;
  color: var(--color2);
}
.tp-offcanvas-gallery {
  margin-bottom: 65px;
}
.tp-offcanvas-contact {
  margin-bottom: 55px;
}
.tp-offcanvas-contact ul li {
  list-style: none;
}
.tp-offcanvas-contact ul li:not(:last-child) {
  margin-bottom: 2px;
}
.tp-offcanvas-contact ul li a {
  display: inline-block;
  color: #414144;
  font-size: 18px;
  position: relative;
}
.tp-offcanvas-contact ul li a::after {
  position: absolute;
  bottom: 2px;
  right: 0;
  width: 0;
  height: 1px;
  content: "";
  transition: 0.4s;
  background-color: #1e1e1e;
}
.tp-offcanvas-contact ul li a:hover {
  color: var(--tp-common-black);
}
.tp-offcanvas-contact ul li a:hover::after {
  width: 100%;
  right: auto;
  left: 0;
}
.tp-offcanvas-social ul {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
}
.tp-offcanvas-social ul li {
  list-style: none;
}
.tp-offcanvas-social ul li:not(:last-child) {
  margin-right: 8px;
}
.tp-offcanvas-social ul li a {
  display: inline-block;
  text-align: center;
  width: 40px;
  height: 40px;
  line-height: 38px;
  border-radius: 40px;
  color: var(--color2);
  border: 1px solid rgba(2, 11, 24, 0.1);
  background-color: #fff;
}
.tp-offcanvas-social ul li a:hover {
  background-color: var(--color2);
  border-color: var(--color2);
  color: #fff;
}
.tp-offcanvas-social ul li a svg {
  -webkit-transform: translateY(-1px);
  -moz-transform: translateY(-1px);
  -ms-transform: translateY(-1px);
  -o-transform: translateY(-1px);
  transform: translateY(-1px);
}
.tp-header-menu-bar {
  display: flex;
  justify-content: end;
  margin-top: -52px;
}
.tp-header-menu-bar-2 {
  margin-top: 0;
  height: 100%;
}
.tp-header-menu-bar button{
  background: transparent;
  border: none;
  outline: 0;
}
.tp-header-menu-bar button span {
  height: 2px;
  width: 30px;
  background-color: color: var(--color2);
  display: block;
  margin: 6px auto;
  
}
.tp-header-menu-bar button:hover span {
  animation: bar_anim 0.8s cubic-bezier(0.44, 1.1, 0.53, 0.99) 1 forwards;
}
.tp-header-menu-bar button:hover span:nth-child(2) {
  animation-delay: 0.1s;
}

/*------------- Menu ergänzend ----------------------*/

.tp-offcanvas-menu ul li.selected > a { color:var(--color1); }
.tp-offcanvas-menu ul li.subm.selected > .submenu,
.tp-offcanvas-menu ul li ul li.subm.selected > .submenu,
.tp-offcanvas-menu ul li ul li ul li.subm.selected > .submenu > .submenu { display: block; border-left:1px solid #BBB; }

.tp-offcanvas-menu{
	display:block;
	float:left;
	width:100%;
	height:auto;
	padding:0px 60px 0px 40px;
	
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}

.tp-offcanvas-menu span.menu_closer{
	float:right;
	position:relative;
}
.tp-offcanvas-menu span.menu_closer a{
	position:absolute;
	width:27px;
	height:27px;
	display:block;
	right:4px;
	top:1px;
	z-index:99;
}
.tp-offcanvas-menu span.menu_closer span:nth-child(2){
	width:36.2px;
	height:2px;
	background:#000;
	transform:rotate(45deg);
	display:block;
	position:absolute;
	top:13.5px;
	right:0px;
}
.tp-offcanvas-menu span.menu_closer span:nth-child(3){
	width:36.2px;
	height:2px;
	background:#000;
	transform:rotate(135deg);
	display:block;
	position:absolute;
	top:13.5px;
	right:0px;
}

.navlist ul, .navlist .submenu {
	width:100%;
	height:auto;
	text-align:right !important;
	list-style-type:none;
	margin:0px;
}
.navlist ul li{
	margin:0px;
	letter-spacing:2px;
	text-transform:uppercase;
	position:relative;
}
.navlist ul li a{
	color:#333333;
	text-decoration:none;
	font-size:14px;
	line-height:1.8;
}
.navlist ul li a span.line:after{
	width:0px;
	height:1px;
	background-color:#000;
	position:absolute;
	left:100%;
	content: '';
	top:50%;
	margin-left:10px;
	
	transition: all .5s ease;
	-o-transition: all .5s ease;
	-ms-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-webkit-transition: all .5s ease;
}
.navlist ul li:hover a span.line:after{
	width: 20px;

}


@media (min-width: 992px) { 

.tp-offcanvas-menu ul li > a {
  padding: 0px 0;
}

}