/* ---------- CSS Custom Properties ---------- */
    :root {
      --sidebar-width: 270px;
      --sidebar-bg: #fff;
      --sidebar-color: #222;
      --sidebar-transition: 0.3s ease;
      --fancybox-progress-color: #CC0000;
      --toggle-btn-bg: #7386d5;
      --content-bg: #fafafa;
      --tp-theme-primary: #000000;
      --color1: #6667a6;
      --color2: #6f42c1;
    }

.vortext { width:80%; margin:0 auto; }
.vortext p, .vortext a, .vortext li, .vortext table { font-size:1.3em;line-height:1.5; }
.fancybox__backdrop {
  background: rgba(17, 6, 25, 0.85);
}

    /* ---------- 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: 1100;
      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;
}
.tp-offcanvas-menu ul li:not(:last-child) > a {
  border-bottom: 1px solid rgba(1, 15, 28, 0.1);
}
.tp-offcanvas-menu ul li .tp-megamenu-list ul li a {
  border-bottom: 1px solid rgba(1, 15, 28, 0.1);
}
.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;
  padding-left: 20px;
}
.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(--color2);
}
.tp-offcanvas-style-2 .tp-offcanvas-menu ul li.active > a {
  color: var(--color2);
}
.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;
  right: 0;
  top: 4px;
  height: 30px;
  width: 30px;
  font-size: 18px;
  line-height: 15px;
  text-align: center;
  border: 1px solid rgba(1, 15, 28, 0.12);
  background: no-repeat;
}
.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: #000000;
}
.tp-offcanvas-title.sm {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 15px;
  color: #000000;
}
.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: #000000;
  border: 1px solid rgba(2, 11, 24, 0.1);
  background-color: #fff;
}
.tp-offcanvas-social ul li a:hover {
  background-color: #000000;
  border-color: #000000;
  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: #000000;
  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(--color2); }
.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; }