/*

Short HTML Template

http://www.templatemo.com/tm-502-short

*/

/*
===============================================
--------------- 0. Custom CSS -----------------
===============================================
*/

span.email b {
	display: none;
}

/*
===============================================
--------------- 1. CSS Inits ------------------
===============================================
*/

body {
	font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	letter-spacing: -0.011em;
}

.page_wrapper {
    width: 100%;
    position: relative;
}

/*
===============================================
--------------- 2. PRELOADER ------------------
===============================================
*/


.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #bcd6f0;
    z-index: 9999999999;
}
.preloader .spinner {
    position: absolute;
    width: 40px;
    height: 40px;
    top: 50%;
    left: 50%;
    margin-left: -40px;
    margin-top: -40px;
    -webkit-animation: rotatee 2.0s infinite linear;
    animation: rotatee 2.0s infinite linear;
}
.preloader .spinner .dot1,
.preloader .spinner .dot2 {
    width: 60%;
    height: 60%;
    display: inline-block;
    position: absolute;
    top: 0;
    border-radius: 100%;
    -webkit-animation: bouncee 2s infinite ease-in-out;
    animation: bouncee 2s infinite ease-in-out;
}
.preloader .spinner .dot2 {
    top: auto;
    bottom: 0px;
    -webkit-animation-delay: -1s;
    animation-delay: -1s;
}
@-webkit-keyframes rotatee {
    100% {
    -webkit-transform: rotate(360deg);
}
}
@keyframes rotatee {
    100% {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
}
}
@-webkit-keyframes bouncee {
    0%,
    100% {
    -webkit-transform: scale(0);
}
50% {
    -webkit-transform: scale(1);
}
}
@keyframes bouncee {
    0%,
    100% {
    transform: scale(0);
    -webkit-transform: scale(0);
}
50% {
    transform: scale(1);
    -webkit-transform: scale(1);
}
}

/*
===============================================
--------------- CSS Demo ------------------
===============================================
*/
.image-bg {
	background-image: url(../img/background-image.png);
    background-repeat: no-repeat;
    background-size: cover;
    max-width: 100%;
    height: 100%;
}



/*
========================================
----------- HOME STYLE -----------------
========================================
*/

 .resp-tab-content {
    padding: 0;
    overflow: hidden;
 }
 .home-container {
  margin-top: 24%;
  background-color: #fff;
 }

 .home-container .left-content {
    padding-top: 18%;
    padding-left: 35px;
 }

 .home-container .left-content .left-line {
    width: 3px;
    height: 100px;
    background-color: #121212;
    float: left;
    margin-right: 15px;
 }

 .home-container .left-content h2 {
    font-size: 32px;
    letter-spacing: 0.5px;
    color: #121212;
    text-transform: uppercase;
    margin: 0px;
    font-weight: 900;
 }

  .home-container .left-content h2 em {
    font-style: normal;
    color: #f78b26;
  }

  .home-container .left-content p {
    margin-top: 30px;
    font-size: 14px;
    font-style: italic;
    color: #343434;
  }

  .home-container .left-content p em {
    font-weight: 500;
  }

  .home-container .left-content .primary-button {
    margin-top: 30px;
  }

  .home-container .left-content .primary-button a {
    font-size: 11px;
    text-transform: uppercase;
    font-weight: 700;
    color: #121212;
    border: 1px solid #343434;
    padding: 11px 14px;
  }

  .home-container .left-content .primary-button a:hover {
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    -webkit-transition: all 0.2s linear;
    transition: all 0.2s linear;
    border-color: #f78b26;
    color: #f78b26;
    text-decoration: none;
  }

   .home-container .right-content {
      margin-bottom: -1px;
   }

  .home-container .right-content img {
    overflow: hidden;
    width: 100%;
    height: auto; /* keep the logo square (1:1); width/height attrs must not force a fixed height */
  }



/*
========================================
----------- ABOUT STYLE -----------------
========================================
*/

.about-container {
  text-align: center;
  background-color: #fff;
  margin-top: 24%;
}

.about-container h2 {
  font-size: 24px;
  letter-spacing: 0.5px;
  color: #121212;
  text-transform: uppercase;
  margin: 40px;
  margin-bottom: 0px;
  font-weight: 900;
}

.about-container h2 em {
  font-style: normal;
  color: #f78b26;
}

.about-container .under-line {
  width: 60px;
  height: 3px;
  background-color: #121212;
  margin: 15px auto 20px auto;
}

.about-container p {
  font-size: 14px;
  color: #343434;
  margin: 15px 35px 30px 35px;
}

.about-container p em {
  font-weight: 500;
  font-style: normal;
}

.about-container img {
  width: 100%;
}

/*
========================================
----------- PROJECTS STYLE -----------------
========================================
*/

.projects-container {
  background-color: #fff;
  margin-top: 30%;
  padding: 40px 30px 0px  40px;
}

.project-item {
  position: relative;
  text-align: center;
}

.project-item img {
  display: block;
  max-width: 100%;
  height: auto;
}

.project-item .thumb-holder .hover-effect {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: opacity .5s ease;
  background-color: rgba(249, 139, 38, 0.9);
}

.project-item .thumb-holder .hover-effect .hover-content {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}

.project-item .thumb-holder .hover-effect .hover-content img {
  max-width: 100%;
  text-align: center;
  margin: 0 auto;
  width: 40px;
}

.project-item .thumb-holder .hover-effect .hover-content h4 {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #fff;
}

.project-item:hover .hover-effect {
  opacity: 1;
}



/*
========================================
----------- CONTACT STYLE ------------
========================================
*/

.contact-container {
  background-color: #fff;
  margin-top: 29.5%;
}

.contact-form {
  padding: 0px 0px 0px 30px;
  text-align: center;
}

.contact-form h2 {
  margin-top: -50px;
  margin-bottom: 30px;
  font-size: 24px;
  font-weight: 900;
  text-transform: uppercase;
  display: inline-block;
  padding: 15px 30px;
  color: #fff;
  background-color: #f78b26;
}

.contact-form input {
  margin-bottom: 20px;
  padding-left: 15px;
  width: 100%;
  height: 40px;
  display: inline-block;
  line-height: 40px;
  font-size: 13px;
  color: #aaa;
  background-color: #f4f4f4;
  border: none;
  outline: none;
  border-radius: 0;
  box-shadow: none;
}

.contact-form textarea {
  margin-bottom: 20px;
  padding-left: 15px;
  width: 100%;
  max-width: 100%;
  max-height: 180px;
  height: 140px;
  display: inline-block;
  line-height: 40px;
  font-size: 13px;
  color: #aaa;
  background-color: #f4f4f4;
  border: none;
  outline: none!important;
  border-radius: 0;
  box-shadow: none;
}

.contact-form button {
  font-size: 11px;
  text-transform: uppercase;
  font-weight: 700;
  color: #121212;
  border: 1px solid #343434;
  background-color: transparent;
  padding: 11px 14px;
  outline: none;
  margin-bottom: 0;
  border-radius: 0;
}

.contact-form button:hover {
  -moz-transition: all 0.2s linear;
  -o-transition: all 0.2s linear;
  -webkit-transition: all 0.2s linear;
  transition: all 0.2s linear;
  border-color: #f78b26;
  color: #f78b26;
  text-decoration: none;
}

.more-info {
  padding: 60px 30px 0px 0px;
}

.more-info p em {
  font-weight: 600;
  font-style: normal;
}


/*
========================================
----------- FOOTER STYLE -----------------
========================================
*/

footer {
  background-color: #f4f4f4;
  text-align: center;
}

footer p {
  font-size: 13px;
  color: #7a7a7a;
  padding: 20px 0px 15px 0px;
  margin: 0px;
}

footer p em {
  font-style: normal;
  color: #f78b26;
}



/*
========================================
---------- RESPONSIVE STYLE ------------
========================================
*/

@media (max-width: 768px){

  .VerticalTab {
    padding-bottom: 30px;
  }

  .responsive-logo {
    width: 100%;
    text-align: center;
    margin: 45px 0px 30px 0px;
  }

  .responsive-logo img {
    max-width: 100%;
  }

  .home-container {
    margin-top: 0%;
    text-align: center;
  }

  .home-container .left-content {
    padding: 40px 35px;
  }

  .home-container .left-line {
    display: none;
  }

  .home-container .right-content {
    margin-left: 0;
  }

  .home-container .right-content img {
    width: 100%;
  }

  .about-container {
    margin-top: 0%;
  }

  .projects-container {
    margin-top: 0%;
  }

  .project-item {
    margin: 45px;
  }

  .project-item img {
    width: 100%;
  }

  .hover-content img {
    width: 40px;
  }

  .contact-container {
    margin-top: 0%;
  }

  .contact-form h2 {
    margin-top: 30px;
  }
  .more-info {
    padding: 0px 30px 30px 30px;
    /* trim the card's own bottom margin so contact's trailing gap sits closer to
       the other accordion panels (the rest of the spacing is .contact-container's
       12px below) */
    margin-bottom: 0;
  }

  /* Accordion (mobile): give each expanded panel a bottom gap equal to the 12px
     spacing between the collapsed headers, so all items are evenly spaced. The
     .resp-tabs-container prefix raises specificity above the max-width:991px
     rules further down that set .home-container / .contact-container to
     margin-bottom:60px (desktop/tablet spacing) — otherwise that 60px leaks into
     the accordion and the gap after those panels looks too wide. .about-container
     has no such competitor (that's why chaser/imprint were already fine).
     .home-container is inert on chaser but fixes relaunch's startpage panel. */
  .resp-tabs-container .home-container,
  .resp-tabs-container .about-container,
  .resp-tabs-container .contact-container {
    margin-bottom: 12px;
  }
}

@media (max-width: 991px){
  .home-container {
    margin-bottom: 60px;
  }
  .home-container .left-content {
    padding: 30px;
    text-align: center;
  }

  .home-container .left-content .left-line {
    display: none;
  }

  .project-item {
    margin: 45px;
  }

  .project-item img {
    width: 100%;
  }

  .hover-content img {
    width: 40px;
  }

  .projects-container {
    margin-bottom: 60px;
  }

  .contact-container  {
    margin-bottom: 60px;
  }

  .contact-form {
    padding: 0px 30px;
  }

  .more-info {
    padding: 0px 30px 30px 30px;
  }
}



/*
========================================
----------- LIGHT BOX STYLE ------------
========================================
*/

/* Preload images */
body:after {
  content: url(../img/close.png) url(../img/loading.gif) url(../img/prev.png) url(../img/next.png);
  display: none;
}

body.lb-disable-scrolling {
  overflow: hidden;
}

.lightboxOverlay {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: black;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
  display: none;
}

.lightbox {
  position: absolute;
  margin-top: 5%;
  left: 0;
  width: 100%;
  z-index: 10000;
  text-align: center;
  line-height: 0;
  font-weight: normal;
}

.lightbox .lb-image {
  display: block;
  height: auto;
  max-width: inherit;
  max-height: none;
  border-radius: 14px;

  /* Image border */
  border: 4px solid white;
}

.lightbox a img {
  border: none;
}

.lb-outerContainer {
  position: relative;
  *zoom: 1;
  width: 250px;
  height: 250px;
  margin: 0 auto;
  border-radius: 14px;

  /* Background color behind image.
     This is visible during transitions. */
  background-color: white;
}

.lb-outerContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-loader {
  position: absolute;
  top: 43%;
  left: 0;
  height: 25%;
  width: 100%;
  text-align: center;
  line-height: 0;
}

.lb-cancel {
  display: block;
  width: 32px;
  height: 32px;
  margin: 0 auto;
  background: url(../img/loading.gif) no-repeat;
}

.lb-nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 10;
}

.lb-container > .nav {
  left: 0;
}

.lb-nav a {
  outline: none;
  background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
}

.lb-prev, .lb-next {
  height: 100%;
  cursor: pointer;
  display: block;
}

.lb-nav a.lb-prev {
  width: 34%;
  left: 0;
  float: left;
  background: url(../img/prev.png) left 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

.lb-nav a.lb-prev:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.lb-nav a.lb-next {
  width: 64%;
  right: 0;
  float: right;
  background: url(../img/next.png) right 48% no-repeat;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -webkit-transition: opacity 0.6s;
  -moz-transition: opacity 0.6s;
  -o-transition: opacity 0.6s;
  transition: opacity 0.6s;
}

.lb-nav a.lb-next:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

.lb-dataContainer {
  margin: 0 auto;
  padding-top: 5px;
  *zoom: 1;
  width: 100%;
  -moz-border-radius-bottomleft: 14px;
  -webkit-border-bottom-left-radius: 14px;
  border-bottom-left-radius: 14px;
  -moz-border-radius-bottomright: 14px;
  -webkit-border-bottom-right-radius: 14px;
  border-bottom-right-radius: 14px;
}

.lb-dataContainer:after {
  content: "";
  display: table;
  clear: both;
}

.lb-data {
  padding: 0 4px;
  color: #ccc;
}

.lb-data .lb-details {
  width: 85%;
  float: left;
  text-align: left;
  line-height: 1.1em;
}

.lb-data .lb-caption {
  font-size: 13px;
  font-weight: bold;
  line-height: 1em;
}

.lb-data .lb-caption a {
  color: #4ae;
}

.lb-data .lb-number {
  display: block;
  clear: left;
  padding-bottom: 1em;
  font-size: 12px;
  color: #999999;
}

.lb-data .lb-close {
  display: block;
  float: right;
  width: 30px;
  height: 30px;
  background: url(../img/close.png) top right no-repeat;
  text-align: right;
  outline: none;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
  -webkit-transition: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  transition: opacity 0.2s;
}

.lb-data .lb-close:hover {
  cursor: pointer;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

/* Dark mode: Lightbox2 defaults to white — the container background flashes
   during the open transition before the (lazy-loaded) image paints, and the
   image itself has a 4px solid-white photo-frame border. Both are jarring in
   dark mode, so match them to the dark content cards. */
[data-theme="dark"] .lb-outerContainer {
  background-color: #161a22;
}
[data-theme="dark"] .lightbox .lb-image {
  border-color: #161a22;
}


/**
 * Owl Carousel v2.2.1
 * Copyright 2013-2017 David Deutsch
 * Licensed under  ()
 */
/*
 *  Owl Carousel - Core
 */
.owl-carousel {
  display: none;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  /* position relative and z-index fix webkit rendering fonts issue */
  position: relative;
  z-index: 1; }
  .owl-carousel .owl-stage {
    position: relative;
    -ms-touch-action: pan-Y;
    -moz-backface-visibility: hidden;
    /* fix firefox animation glitch */ }
  .owl-carousel .owl-stage:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0; }
  .owl-carousel .owl-stage-outer {
    position: relative;
    overflow: hidden;
    /* fix for flashing background */
    -webkit-transform: translate3d(0px, 0px, 0px); }
  .owl-carousel .owl-wrapper,
  .owl-carousel .owl-item {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0); }
  .owl-carousel .owl-item {
    position: relative;
    min-height: 1px;
    float: left;
    -webkit-backface-visibility: hidden;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none; }
  .owl-carousel .owl-item img {
    display: block;
    width: 100%; }
  .owl-carousel .owl-nav.disabled,
  .owl-carousel .owl-dots.disabled {
    display: none; }
  .owl-carousel .owl-nav .owl-prev,
  .owl-carousel .owl-nav .owl-next,
  .owl-carousel .owl-dot {
    display: inline-block;
    cursor: pointer;
    cursor: hand;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }
  .owl-carousel.owl-loaded {
    display: block; }
  .owl-carousel.owl-loading {
    opacity: 0;
    display: block; }
  .owl-carousel.owl-hidden {
    opacity: 0; }
  .owl-carousel.owl-refresh .owl-item {
    visibility: hidden; }
  .owl-carousel.owl-drag .owl-item {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }
  .owl-carousel.owl-grab {
    cursor: move;
    cursor: grab; }
  .owl-carousel.owl-rtl {
    direction: rtl; }
  .owl-carousel.owl-rtl .owl-item {
    float: right; }

/* No Js */
.no-js .owl-carousel {
  display: block; }

/*
 *  Owl Carousel - Animate Plugin
 */
.owl-carousel .animated {
  animation-duration: 1000ms;
  animation-fill-mode: both; }

.owl-carousel .owl-animated-in {
  z-index: 0; }

.owl-carousel .owl-animated-out {
  z-index: 1; }

.owl-carousel .fadeOut {
  animation-name: fadeOut; }

@keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

/*
 *  Owl Carousel - Auto Height Plugin
 */
.owl-height {
  transition: height 400ms ease-in-out; }

/*
 *  Owl Carousel - Lazy Load Plugin
 */
.owl-carousel .owl-item .owl-lazy {
  opacity: 0;
  transition: opacity 400ms ease; }

.owl-carousel .owl-item img.owl-lazy {
  transform-style: preserve-3d; }

/*
 *  Owl Carousel - Video Plugin
 */
.owl-carousel .owl-video-wrapper {
  position: relative;
  height: 100%;
  background: #000; }

.owl-carousel .owl-video-play-icon {
  position: absolute;
  height: 80px;
  width: 80px;
  left: 50%;
  top: 50%;
  margin-left: -40px;
  margin-top: -40px;
  background: url("owl.video.play.png") no-repeat;
  cursor: pointer;
  z-index: 1;
  -webkit-backface-visibility: hidden;
  transition: transform 100ms ease; }

.owl-carousel .owl-video-play-icon:hover {
  -ms-transform: scale(1.3, 1.3);
      transform: scale(1.3, 1.3); }

.owl-carousel .owl-video-playing .owl-video-tn,
.owl-carousel .owl-video-playing .owl-video-play-icon {
  display: none; }

.owl-carousel .owl-video-tn {
  opacity: 0;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: opacity 400ms ease; }

.owl-carousel .owl-video-frame {
  position: relative;
  z-index: 1;
  height: 100%;
  width: 100%; }

  .owl-theme .owl-dots {
    text-align: center;
  }

.owl-theme .owl-dots .owl-dot span {
  width: 10px;
  height: 10px;
  margin: 30px 5px;
  background: #D6D6D6;
  display: block;
  -webkit-backface-visibility: visible;
  transition: opacity .2s ease;
  border-radius: 30px;
}

.owl-theme .owl-dots .active span {
  width: 10px;
  height: 10px;
  background: #f78b26;
  display: block;
  -webkit-backface-visibility: visible;
  transition: opacity .2s ease;
  border-radius: 30px;
}

.owl-carousel .owl-nav {
  display: none;
}

.metmaps-list {
	margin-right: 10px;
}

.d-none { display: none; }

/* honeypot trap: kept in the layout (so bots fill it) but moved off-screen and
   hidden from humans / assistive tech */
.hp-field {
	position: absolute !important;
	left: -9999px !important;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}


/*
========================================================
---- Modern refresh: larger type, rounded corners,
---- frosted-glass menu, contact form (2026) ----
========================================================
*/

/* --- Readability: larger body copy inside the tabs --- */
.resp-tab-content {
  font-size: 16px;
  line-height: 1.65;
}
.home-container .left-content,
.home-container .left-content p,
.about-container p,
.metmaps-list li,
.chaser li,
.chaser p {
  font-size: 16px;
}

/* breathing room for the lists that were lifted out of <p> tags */
.metmaps-list { padding-left: 20px; }
.metmaps-list li { margin-bottom: 14px; }
.chaser ul { padding-left: 22px; }
.chaser ul li { margin-bottom: 8px; }

/* --- Rounded corners on the white content boxes --- */
.home-container,
.about-container {
  border-radius: 24px;
  overflow: hidden;
}

/* contact tab is transparent so the glass cards float over the sky */
.contact-container {
  background: transparent;
}

/* rounded video frame, consistent with the cards. Solid black backing so the
   Vimeo player's letterbox (where the clip doesn't perfectly fill 16:9) reads as
   clean cinematic bars instead of a jarring white strip — in both light & dark. */
.video-wrapper {
  border-radius: 18px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 8px 30px rgba(60, 90, 130, 0.18);
}
.video-wrapper iframe {
  background: #000;
  /* The page sets color-scheme:dark on <html> in dark mode, which leaks into
     the cross-origin Vimeo iframe and makes the player render a white letterbox.
     Pin the iframe to a light scheme so the player's letterbox stays black in
     BOTH themes (consistent + stable — no reaching into the player's DOM). */
  color-scheme: light;
}

/* rounded screenshots (clips the image + its hover overlay). .project-item is a
   stable class, so this survives the startpage -> Chaser merge */
.project-item {
  border-radius: 14px;
  overflow: hidden;
}

/* chaser: same comfortable inset as imprint on all sides + room to breathe
   at the bottom (direct child so the nested image-grid columns are untouched) */
.about-container .chaser > .row > .col-md-12 {
  padding-left: 35px;
  padding-right: 35px;
  padding-bottom: 45px;
}

/* --- Right-hand menu: frosted glass tabs + rounded logo box --- */
/* logo box: clean white card with the wordmark enlarged & centered so it
   fills the box (the logo PNG is opaque white, so glass can't show through) */
.VerticalTab.tabs_ver_6 .resp-tabs-list .logo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  padding: 16px;
  margin-bottom: 14px !important;
  box-shadow: 0 8px 26px rgba(60, 90, 130, 0.18);
  /* transition box-shadow ONLY (for the hover cue). Do NOT transition background:
     animating it on a theme switch promotes the card to a compositing layer,
     which momentarily isolates the dark-mode mix-blend-mode and flashes a black
     square around the logo. box-shadow is unchanged across themes, so nothing
     animates on toggle. */
  transition: box-shadow 0.2s linear;
}

/* Hover cue on the .logo card — box-shadow ONLY. Never transform/filter/opacity/
   isolation: any of those creates a stacking context that isolates the dark-mode
   mix-blend-mode:screen and collapses the translucent card into an opaque black
   square. box-shadow doesn't touch the card background, so transparency stays
   byte-identical between rest and hover. (Relies on the li.menu-extra:hover
   neutraliser further below so the tab hover bg can't bleed a square behind the
   rounded card.) */
.VerticalTab.tabs_ver_6 .resp-tabs-list li.menu-extra:hover .logo {
  box-shadow: 0 12px 30px rgba(60, 90, 130, 0.42);
}
/* dark mode: a blue drop-shadow is invisible on the dark page, so the cue is a
   faint white ring around the card plus a deeper shadow. */
[data-theme="dark"] .VerticalTab.tabs_ver_6 .resp-tabs-list li.menu-extra:hover .logo {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.20), 0 12px 30px rgba(0, 0, 0, 0.5);
}

.VerticalTab.tabs_ver_6 .resp-tabs-list .logo img {
  /* square mark scales with its box (no distortion at narrow breakpoints) */
  width: 100%;
  max-width: 132px;
  height: auto;
  margin-bottom: 0 !important;
  display: block;
}

.VerticalTab.tabs_ver_6 .resp-tabs-list li {
  background: rgba(255, 255, 255, 0.55) !important;
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  border-radius: 18px;
  box-shadow: 0 6px 24px rgba(60, 90, 130, 0.16);
  transition: background 0.2s linear, box-shadow 0.2s linear, transform 0.2s linear;
}

/* identical box metrics for active & inactive so nothing shifts on click */
.VerticalTab.tabs_ver_6 .resp-tabs-list li,
.VerticalTab.tabs_ver_6 .resp-tabs-list li.resp-tab-active {
  padding: 17px 18px !important;
  margin: 0 0 12px !important;
  border-width: 1px !important;
  border-style: solid !important;
}

.VerticalTab.tabs_ver_6 .resp-tabs-list li:hover {
  background: rgba(255, 255, 255, 0.72) !important;
  transform: translateY(-1px);
}

.VerticalTab.tabs_ver_6 .resp-tabs-list li.resp-tab-active {
  background: rgba(255, 255, 255, 0.82) !important;
  border-color: rgba(247, 139, 38, 0.6) !important;
  box-shadow: 0 8px 26px rgba(247, 139, 38, 0.22);
}

/*
========================================================
----------- CONTACT FORM (glassmorphism) ---------------
========================================================
*/

.contact-container .heading h2,
.contact-form h2 {
  margin-top: 0;
}

/* frosted-glass card wrapping the form */
.contact-form,
.more-info {
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 24px;
  box-shadow: 0 8px 30px rgba(60, 90, 130, 0.14);
  padding: 35px !important;
  margin: 10px;
}

/* Symmetry inside the contact-form card: the SUBMIT button had a 30px
   margin-bottom (neutralised at .contact-form button below); also zero the
   Bootstrap .form-group margin on the submit row (its .mb-0 utility isn't defined
   in this build) so the space under the button equals the space above the heading. */
.contact-form form .form-group:last-child {
  margin-bottom: 0;
}

.contact-form input,
.contact-form textarea {
  background-color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  color: #343434;
  transition: border-color 0.2s linear, box-shadow 0.2s linear;
}

/* message box: auto-grows as you type (driven by the inline JS), from a sensible
   floor up to a cap; past the cap it scrolls. No manual resize handle needed. */
.contact-form textarea {
  resize: none;
  min-height: 140px;
  max-height: 400px;
  overflow-y: auto;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #f78b26;
  box-shadow: 0 0 0 3px rgba(247, 139, 38, 0.15);
}

.contact-form h2 {
  border-radius: 14px;
}

.contact-form button,
.contact-form .btn {
  display: block;
  width: 100%;
  border-radius: 14px;
  background-color: #f78b26 !important;
  background-image: none !important;
  border: 1px solid #f78b26 !important;
  color: #fff !important;
  padding: 14px 28px;
  margin-top: 6px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 8px 22px rgba(247, 139, 38, 0.28);
  transition: all 0.2s linear;
}

.contact-form button:hover,
.contact-form .btn:hover,
.contact-form button:focus,
.contact-form .btn:focus {
  background-color: #fff !important;
  background-image: none !important;
  color: #f78b26 !important;
  border-color: #f78b26 !important;
}

/*
========================================================
------- SKY BACKGROUND (soft, abstract clouds) ---------
========================================================
*/

/* friendly, blurred sky: a vertical gradient with a few
   soft radial "clouds" — abstract, never literal */
body {
  background:
    radial-gradient(34% 24% at 12% 16%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 60%),
    radial-gradient(28% 20% at 27% 27%, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 58%),
    radial-gradient(40% 26% at 80% 13%, rgba(255, 255, 255, 0.80), rgba(255, 255, 255, 0) 60%),
    radial-gradient(30% 22% at 64% 22%, rgba(255, 255, 255, 0.50), rgba(255, 255, 255, 0) 58%),
    radial-gradient(46% 30% at 73% 64%, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0) 62%),
    radial-gradient(30% 22% at 41% 80%, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0) 60%),
    radial-gradient(34% 24% at 16% 68%, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0) 60%),
    linear-gradient(180deg, #5b9bd9 0%, #7eb4e6 32%, #a6cdf0 64%, #cce2f6 100%);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100vh;
}

/* base page colour behind everything (prevents white flash on load /
   navigation and white below content on mobile where fixed bg can't reach) */
html {
  background-color: #bcd6f0;
  color-scheme: light;
}

/* let the sky show through instead of the old dark image */
.image-bg {
  background-image: none;
  background-color: transparent;
}

/*
========================================================
----------------- FOOTER (blended) ---------------------
========================================================
*/

footer {
  background: transparent;
  /* clear separation from the content box, so the pill floats on its own.
     NB: no bottom margin here — a margin would collapse out through <body> and
     expose the solid html background-color as a dark strip at the very bottom of
     the page. The bottom gap is provided by body's padding instead (below), so
     the sky gradient paints it and the glass pill floats cleanly to the edge. */
  margin: 70px 30px 0 30px;
}

/* hold the footer's spacing inside <body> so the fixed sky gradient covers it
   (prevents the dark html-coloured bar at the very bottom of the page) */
body {
  padding-bottom: 40px;
}

footer p {
  display: inline-block;
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  padding: 14px 30px;
  color: #4a5663;
  font-size: 14px;
  /* soft, diffuse cloud-like shadow */
  box-shadow: 0 18px 45px rgba(70, 100, 140, 0.20);
}

footer p a { color: #2e3a47; }
footer p em { color: #f78b26; }

/*
========================================================
------- MOBILE: glass accordion + logo card ------------
========================================================
*/

@media (max-width: 768px) {
  /* top logo -> same white rounded card as the desktop logo box */
  .responsive-logo {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 8px 26px rgba(60, 90, 130, 0.18);
    padding: 18px;
    margin: 34px auto 26px auto !important;
    width: 150px !important;
  }
  .responsive-logo img {
    width: 100%;
    max-width: 116px;
    height: auto;
    margin: 0 auto;
    display: block;
  }

  /* accordion headers -> frosted glass, consistent with the desktop tabs */
  h2.resp-accordion {
    background: rgba(255, 255, 255, 0.55) !important;
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
    border: 1px solid rgba(255, 255, 255, 0.65) !important;
    border-radius: 18px !important;
    box-shadow: 0 6px 20px rgba(60, 90, 130, 0.16);
    margin: 0 16px 12px 16px !important;
  }
  h2.resp-accordion:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.65) !important;
  }
  h2.resp-tab-active {
    background: rgba(255, 255, 255, 0.82) !important;
    border-color: rgba(247, 139, 38, 0.6) !important;
    color: #f78b26;
  }

  /* the bootstrap .row negative margins make inner columns 30px wider than the
     rounded container, which overflow:hidden then clips — neutralise them so
     text and images stay inside the box on mobile */
  .home-container .row,
  .about-container .row,
  .contact-container .row {
    margin-left: 0;
    margin-right: 0;
  }
  .home-container .left-content {
    padding: 30px 22px;
  }
  .home-container .left-content h2,
  .about-container h2 {
    font-size: 26px;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  .about-container h2 {
    margin: 30px 20px 0 20px;
  }
}

/* sm breakpoint (tablet, just above mobile): keep comfortable padding inside
   the rounded content boxes so text never crowds the rounded edges */
@media (min-width: 768px) and (max-width: 991px) {
  .home-container .left-content,
  .about-container p,
  .about-container .impressum .row .col-md-12,
  .about-container .imprint .row .col-md-12 {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }
  .contact-form,
  .more-info {
    padding: 28px !important;
  }
}

/*
========================================================
--------------- DARK MODE TOGGLE -----------------------
========================================================
*/

/* desktop toggle: a glass box matching the menu tabs, below language */
.theme-switch {
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 18px;
  box-shadow: 0 6px 24px rgba(60, 90, 130, 0.16);
  margin: 0 0 12px 0;
  overflow: hidden;
}
.theme-switch .theme-btn {
  width: 100%;
  padding: 14px 18px;
}

/* mobile toggle: a centered glass pill below the logo card */
.theme-switch-mobile {
  text-align: center;
  margin: 0 auto 26px auto;
}
.theme-switch-mobile .theme-btn {
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(60, 90, 130, 0.16);
  width: 52px;
  height: 52px;
  padding: 0;
}

.theme-btn {
  display: inline-block;
  background: transparent;
  border: 0;
  outline: none;
  cursor: pointer;
  color: #121212;
  font-size: 22px;
  line-height: 1;
  transition: color 0.2s linear, transform 0.2s linear;
}
.theme-btn:hover { transform: translateY(-1px); }

/* icon swap: moon in light mode (click -> dark), sun in dark mode */
.theme-btn .ti-sun { display: none; }
[data-theme="dark"] .theme-btn .ti-moon { display: none; }
[data-theme="dark"] .theme-btn .ti-sun { display: inline; }


/*
========================================================
--------------- DARK MODE (night sky) ------------------
========================================================
*/

/* navy night sky with the SAME patchy cloud structure as light mode,
   rendered as soft moonlit puffs instead of bright white ones */
[data-theme="dark"] body {
  background:
    radial-gradient(34% 24% at 12% 16%, rgba(173, 198, 235, 0.16), rgba(173, 198, 235, 0) 60%),
    radial-gradient(28% 20% at 27% 27%, rgba(173, 198, 235, 0.11), rgba(173, 198, 235, 0) 58%),
    radial-gradient(40% 26% at 80% 13%, rgba(173, 198, 235, 0.15), rgba(173, 198, 235, 0) 60%),
    radial-gradient(30% 22% at 64% 22%, rgba(173, 198, 235, 0.10), rgba(173, 198, 235, 0) 58%),
    radial-gradient(46% 30% at 73% 64%, rgba(173, 198, 235, 0.12), rgba(173, 198, 235, 0) 62%),
    radial-gradient(30% 22% at 41% 80%, rgba(173, 198, 235, 0.10), rgba(173, 198, 235, 0) 60%),
    radial-gradient(34% 24% at 16% 68%, rgba(173, 198, 235, 0.09), rgba(173, 198, 235, 0) 60%),
    linear-gradient(180deg, #0c1f3c 0%, #102744 36%, #163058 70%, #1c3a68 100%);
}

html[data-theme="dark"] { background-color: #0c1f3c; color-scheme: dark; }
[data-theme="dark"] .preloader { background: #0c1f3c; }

/* content boxes: very dark, near-black gray with a slight blue tone — reads as
   a calm dark panel against the navy sky and maximises text contrast */
[data-theme="dark"] .home-container,
[data-theme="dark"] .about-container {
  background: #161a22;
}

/* text -> light, accent stays orange */
[data-theme="dark"] .resp-tab-content,
[data-theme="dark"] .home-container,
[data-theme="dark"] .about-container,
[data-theme="dark"] .home-container .left-content,
[data-theme="dark"] .home-container .left-content p,
[data-theme="dark"] .about-container p,
[data-theme="dark"] .about-container h2,
[data-theme="dark"] .home-container .left-content h2,
[data-theme="dark"] .about-container h3,
[data-theme="dark"] .about-container h4,
[data-theme="dark"] .metmaps-list,
[data-theme="dark"] .metmaps-list li,
[data-theme="dark"] .chaser,
[data-theme="dark"] .chaser li,
[data-theme="dark"] .chaser p {
  color: #e7eef7;
}
[data-theme="dark"] .home-container .left-content h2 em,
[data-theme="dark"] .about-container h2 em {
  color: #f78b26;
}
[data-theme="dark"] .home-container .left-content .left-line,
[data-theme="dark"] .about-container .under-line {
  background-color: #e7eef7;
}
[data-theme="dark"] a {
  color: #7fb4ec;
}

/* menu tabs -> dark grey frosted glass, light text */
[data-theme="dark"] .VerticalTab.tabs_ver_6 .resp-tabs-list li {
  background: rgba(32, 38, 48, 0.70) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  color: #e7eef7;
}
[data-theme="dark"] .VerticalTab.tabs_ver_6 .resp-tabs-list li:hover {
  background: rgba(44, 51, 63, 0.78) !important;
}
[data-theme="dark"] .VerticalTab.tabs_ver_6 .resp-tabs-list li.resp-tab-active {
  background: rgba(52, 60, 74, 0.82) !important;
  border-color: rgba(247, 139, 38, 0.7) !important;
  color: #f78b26;
}

/* mobile accordion headers -> same dark grey glass */
[data-theme="dark"] h2.resp-accordion {
  background: rgba(32, 38, 48, 0.70) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  color: #e7eef7 !important;
}
[data-theme="dark"] h2.resp-accordion:first-child {
  border-top-color: rgba(255, 255, 255, 0.10) !important;
}
[data-theme="dark"] h2.resp-accordion .tabs-text {
  color: #e7eef7;
}
[data-theme="dark"] h2.resp-tab-active,
[data-theme="dark"] h2.resp-tab-active .tabs-text {
  background: rgba(52, 60, 74, 0.85) !important;
  border-color: rgba(247, 139, 38, 0.7) !important;
  color: #f78b26 !important;
}

/* logo / toggle / language cards -> dark grey glass; invert the black line-art
   to white & drop its white background via screen blend so the card shows through */
[data-theme="dark"] .VerticalTab.tabs_ver_6 .resp-tabs-list .logo,
[data-theme="dark"] .theme-switch,
[data-theme="dark"] .theme-switch-mobile .theme-btn,
[data-theme="dark"] .responsive-logo {
  background: rgba(32, 38, 48, 0.70) !important;
  border-color: rgba(255, 255, 255, 0.10);
}
[data-theme="dark"] .theme-btn { color: #e7eef7; }
[data-theme="dark"] .VerticalTab.tabs_ver_6 .resp-tabs-list .logo img,
[data-theme="dark"] .responsive-logo img,
[data-theme="dark"] .home-container .right-content img {
  filter: invert(1) brightness(1.1);
  mix-blend-mode: screen;
}

/* footer pill -> same dark grey glass as the nav for consistency */
[data-theme="dark"] footer p {
  background: rgba(32, 38, 48, 0.70);
  border-color: rgba(255, 255, 255, 0.10);
  color: #cdd8e6;
}
[data-theme="dark"] footer p a { color: #dfe8f3; }

/* contact form cards + inputs */
[data-theme="dark"] .contact-form,
[data-theme="dark"] .more-info,
[data-theme="dark"] .more-info p {
  color: #e7eef7;
}
[data-theme="dark"] .contact-form,
[data-theme="dark"] .more-info {
  background: rgba(32, 38, 48, 0.62);
  border-color: rgba(255, 255, 255, 0.10);
}
[data-theme="dark"] .contact-form input,
[data-theme="dark"] .contact-form textarea {
  background-color: rgba(15, 18, 24, 0.55);
  border-color: rgba(255, 255, 255, 0.12);
  color: #e7eef7;
}
[data-theme="dark"] .contact-form input::placeholder,
[data-theme="dark"] .contact-form textarea::placeholder {
  color: #9fb0c4;
}

/*
========================================================
--- CHASER B2C LANDING: hero, CTA buttons, audience ---
========================================================
   Startpage was merged into Chaser (2026): one single-product
   landing page. These styles drive the page to its two CTAs —
   buy (PayPal) or request a demo (contact tab). */

/* tagline line under the heading: "No games. Just weather." */
.chaser-tagline {
  font-size: 18px;
  font-weight: 700;
  color: #f78b26;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 6px 0 18px;
}

/* emotional hook headline under the tagline */
.chaser-headline {
  font-size: 26px;
  font-weight: 600;
  margin: 6px 0 18px !important;
}

/* big, readable value proposition — the one line that must land */
.chaser-lede {
  font-size: 21px !important;
  line-height: 1.5;
  font-weight: 500;
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* CTA row: a couple of buttons, centered, wrapping on mobile */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin: 28px 0 10px;
}

.cta-button {
  display: inline-block;
  border-radius: 14px;
  padding: 14px 30px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 14px;
  text-decoration: none;
  transition: background-color 0.2s linear, color 0.2s linear, box-shadow 0.2s linear, border-color 0.2s linear;
  background-color: #f78b26;
  color: #1a1a1a; /* dark text on the orange fill — WCAG-contrast safe in both themes */
  border: 1px solid #f78b26;
  box-shadow: 0 8px 22px rgba(247, 139, 38, 0.28);
}

.cta-button:hover,
.cta-button:focus {
  background-color: #fff;
  color: #c2410c; /* deeper orange so it stays legible on the white hover bg */
  text-decoration: none;
}

/* secondary CTA: outline, lower commitment ("request a demo") */
.cta-button.secondary {
  background-color: transparent;
  color: #f78b26;
  box-shadow: none;
}

.cta-button.secondary:hover,
.cta-button.secondary:focus {
  background-color: #f78b26;
  color: #fff;
}

/* "who it's for" rendered as pill chips, not a bullet list */
.audience-list {
  list-style: none;
  padding-left: 0 !important;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 10px 0 18px;
}

.audience-list li {
  background: rgba(247, 139, 38, 0.10);
  border: 1px solid rgba(247, 139, 38, 0.35);
  color: #b85e00;
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 0 !important;
}

/* a little air above each in-tab section heading */
.chaser h3 { margin-top: 36px; }

/* the plain content lists (facts, packages) are centered like the surrounding
   copy. Default disc markers + left padding sit off to the side and throw the
   centering off. Drop the marker/padding and prepend an inline orange bullet
   in front of the first word, so the marker stays with the centered line.
   (.audience-list is excluded — it's already styled as pills.) */
/* same treatment for the imprint / legal lists, so they match the landing page */
.chaser ul:not(.audience-list),
.impressum ul,
.imprint ul {
  list-style: none;
  padding-left: 0 !important;
}
.chaser ul:not(.audience-list) li::before,
.impressum ul li::before,
.imprint ul li::before {
  content: "•";
  color: #f78b26;
  margin-right: 8px;
}

/* round PayPal's funding buttons. The gold PayPal button renders inside a
   cross-origin zoid iframe with square corners baked in, so we clip its wrapper
   (.paypal-buttons) to round the visible corners. The "credit card" button is a
   real <button id="checkout-button"> we can round directly. Both -> 14px, to
   match the CTA buttons / cards. */
[id^="paypal-container-"] .paypal-buttons,
[id^="paypal-container-"] .paypal-button,
[id^="paypal-container-"] #checkout-button {
  border-radius: 14px !important;
  overflow: hidden !important;
}

/* dark mode: white-on-orange CTA text is hard to read; use near-black instead
   (only the filled primary button — the outline .secondary keeps its accent) */
[data-theme="dark"] .cta-button:not(.secondary) {
  color: #1a1a1a;
}

/* screenshot gallery: even vertical rhythm between the cards */
.chaser .feature-grid .project-item { margin-bottom: 24px; }

/* lay the gallery out as a flex grid so the mixed-aspect-ratio cards wrap into
   clean rows of three (bootstrap floats would snag on the taller cards and
   leave gaps). Only at md+, where col-md-4 is 33.33% wide; below that the
   columns stack full-width as usual. */
@media (min-width: 992px) {
  .chaser .feature-grid .col-md-12 {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  }
}

/* dark-mode variants */
[data-theme="dark"] .chaser-lede { color: #e7eef7; }
[data-theme="dark"] .cta-button.secondary { color: #f9a85a; }
[data-theme="dark"] .cta-button.secondary:hover,
[data-theme="dark"] .cta-button.secondary:focus { color: #fff; }
[data-theme="dark"] .audience-list li {
  background: rgba(247, 139, 38, 0.14);
  border-color: rgba(247, 139, 38, 0.45);
  color: #f9b878;
}

/* WCAG contrast (light mode): the bright brand orange #f78b26 fails as TEXT on
   the white cards. Use a deeper orange for orange-text on light backgrounds; the
   bright orange stays for fills and for text on the dark cards (where it passes). */
[data-theme="light"] .about-container h2 em,
[data-theme="light"] .home-container .left-content h2 em,
[data-theme="light"] .chaser-tagline,
[data-theme="light"] .cta-button.secondary {
  color: #c2410c;
}
[data-theme="light"] .audience-list li {
  color: #9a3412;
}

/*
========================================================
----------- FOCUS / KEYBOARD NAVIGATION ----------------
========================================================
   :focus-visible lets us drop the stray outline rectangle on mouse/touch
   clicks (e.g. the gallery magnifier links) while keeping a clear, on-brand
   focus ring for keyboard users — the accessible way to do it. */
:focus:not(:focus-visible) {
  outline: none;
}
:focus-visible {
  outline: 2px solid #f78b26;
  outline-offset: 2px;
  border-radius: 4px;
}

/* skip-to-content link: off-screen until a keyboard user focuses it, then it
   slides in at the top-left. */
.skip-link {
  position: absolute;
  left: 8px;
  top: -48px;
  z-index: 100001;
  background: #f78b26;
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 12px 12px;
  font-weight: 700;
  text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: 0;
}

/* The logo and the theme toggle sit inside the tab <ul> (for layout) wrapped in
   <li class="menu-extra"> so the list contains only <li> elements (accessibility:
   valid list structure + the logo link gets a proper name). These wrappers must
   NOT get the frosted-glass tab styling — neutralise it so only the inner .logo /
   .theme-switch show their own look. Higher specificity than the tab-li rules, so
   it wins in both light and dark. */
.VerticalTab.tabs_ver_6 .resp-tabs-list li.menu-extra,
[data-theme="dark"] .VerticalTab.tabs_ver_6 .resp-tabs-list li.menu-extra {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  cursor: default;
}

/* ...and never fire the tab hover styling on these wrappers either: in dark mode
   the hover background bled through the semi-transparent logo card and drew an
   ugly black square around the (rounded) logo on hover. */
.VerticalTab.tabs_ver_6 .resp-tabs-list li.menu-extra:hover,
[data-theme="dark"] .VerticalTab.tabs_ver_6 .resp-tabs-list li.menu-extra:hover {
  background: none !important;
  box-shadow: none !important;
  transform: none !important;
}

/* ---- First-paint stability (CLS) ----
   easyResponsiveTabs adds .resp-vtabs (float layout) and .resp-tab-content
   (hides inactive panels) via JS on load. Before that runs, the menu would
   render full-width and ALL tab panels would stack — then JS reflows it,
   causing a large layout shift. .resp-vtabs is now in the HTML so the menu
   floats from the first paint; here we also hide the non-first panels by
   default so only the landing (Chaser) tab shows pre-JS, matching what the
   plugin produces. The plugin sets an inline display:block on whichever tab
   becomes active, which overrides this. */
.resp-tabs-container > .fc-tab-2,
.resp-tabs-container > .fc-tab-3,
.resp-tabs-container > .fc-tab-4,
.resp-tabs-container > .fc-tab-5 {
  display: none;
}
/* The landing panel must keep ZERO padding: the plugin's .resp-tab-content is
   padding:0, and the other tabs (.fc-tab-2/3/4) render at 0 too — so any inset
   here would make the first tab (the startpage) narrower than every other tab.
   0 also matches the pre-JS state, so there is no layout shift. */
.resp-tabs-container > .fc-tab-1 {
  padding: 0;
}

/* ---- Startpage (home-container) polish ----
   Make the left intro read as one tidy block — justified + hyphenated with a
   smaller top inset so it sits nearer the logo with fewer ragged line breaks —
   and give the video / gallery / list proper side padding so nothing runs
   edge-to-edge inside the card. */
.home-container .left-content {
  padding-top: 8%;
  padding-right: 24px;
}
.home-container .left-content p {
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
  margin-top: 18px;
}
.home-container .owl-carousel {
  padding: 0 30px;
}
.home-container .metmaps-list {
  padding: 0 35px 0 55px;
  /* let the bullet list breathe below the 4-picture gallery above it */
  margin-top: 44px;
}
/* chaser: the .owl-theme wrapper is unclosed in the markup, so it actually
   spans down to the SECOND picture grid — this bottom margin is therefore the
   gap just before the "Dein Paket / Your package" block. Keep it modest.
   Gap 1 (before "Für Stormchaser") is set by that row's own top margin inline. */
.about-container .chaser .owl-theme {
  margin-bottom: 18px;
}
.home-container {
  padding-bottom: 34px;
}