:root {
  --ease:            cubic-bezier(.55,.2,.1,1);
  --grad-default:    linear-gradient(to bottom left, #ffffff, #ffffff);
  --grad-text:       linear-gradient(140deg, #ff8800 0%, #ff408d 25%, #d05aff 50%, #00c8ff 75%, #00ff62 100%);
  --grad-link-footer:       linear-gradient(140deg, #ff8800, #ff408d, #00c8ff, #00ff62 );
  --grad-text-link-nav: linear-gradient(to bottom left, #ff8800 0%, #ff408d 25%, #b277ff 50%, #00e1ff 75%, #00ff66 100%);
  --grad-foto:       linear-gradient(to bottom left,  #dcffd8, #ffffff);
  --grad-bowling:       linear-gradient(to bottom left,  #ffc7e1, #ffffff);
  --grad-grafik:       linear-gradient(to bottom left,  #c9e8ff, #ffffff);
    --grad-converter:       linear-gradient(to bottom left,  #fff0bc, #ffffff);
        --grad-video:       linear-gradient(to bottom left,  #fff0bc, #ffffff);
  --grad-visit:      linear-gradient(to bottom left, #dcffd8, #ffffff);
  --grad-explore:    linear-gradient(to bottom left, #ffc7e1, #ffffff);
  --grad-explore-1:  linear-gradient(to bottom left, #c9e8ff, #ffffff);

  --white:  #000000;
  --black:  #ffffff;
  --accent: #ffd8b6;
  --wrap:   clamp(1rem, 3vw, 3.5rem);
  --radius: .6rem;
  --wide-margin: 0px;

  --footer-grad-start: #10151b;
  --footer-grad-end:   #070a0c;


  


  /* Abstand von Panel-Top bis unteres Ende des Buttons */
  --explore-header-offset: calc(2rem + 1rem + 1em + 1rem);
  /* Wie „langsam“ ausgeblendet wird */
  --explore-fade-length: 50px;
}
/*─────────────────────────
  RESET & BASE
─────────────────────────*/
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* styles.css */
html {
  scroll-behavior: smooth;
  

}


  /* ─── Loader-Overlay ───────────────────────────────────────── */
  #page-loader {
    position: fixed;
    inset: 0;
    height: 100vh;
    background: var(--black);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity .5s ease, visibility .5s ease;
  }
  #page-loader.hidden {
    opacity: 0;
    visibility: hidden;
  }

  /* ─── Icon-Wrapper mit Rotation ──────────────────────────── */
  .loader-icon-wrapper {
    position: relative;
    width: 80px;
    height: 80px;
    animation: spin 1.6s linear infinite;
  }
  .loader-icon-wrapper img {
    width: 100%;
    height: 100%;
    display: block;
  }

 

  @keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }
  @keyframes shine {
    0%   { transform: translateX(-100%) rotate(25deg); }
    50%  { transform: translateX(100%)  rotate(25deg); }
    100% { transform: translateX(-100%) rotate(25deg); }
  }


body {
  font-family: 'Manrope', system-ui, sans-serif;
  color: var(--white);
  background-color: var(--grad-default);
  transition: background 1s ease;
  overflow-x: hidden; /* verhindert horizontales Scrollen */
}


.page-wrapper {
  max-width: 1620px;   /* maximale Breite */
  margin: 0 auto;      /* zentriert den Block */
  overflow-x: hidden; /* verhindert horizontales Scrollen */
  box-sizing: border-box;
}

img,
video { display: block; max-width: 100%; height: auto; }

a { text-decoration: none; color: inherit; }

.lock { overflow: hidden; }

.gradient-text {
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* background fader */
#bgFader {
  position: fixed;
  inset: 0;
  background: var(--grad-default);
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease-in-out;
  z-index: -1;
}

/*─────────────────────────
  STICKY TOP-BAR
─────────────────────────*/
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2500;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--wrap);
  padding-inline: calc(var(--wrap) + var(--wide-margin));
  pointer-events: none;
  background: transparent; /* wird durch ::before ersetzt */
  
}

.topbar::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--black);
  pointer-events: none;
  z-index: -1;

}

/* in deine style.css */
.topbar.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.topbar .logo {
  height: 1.6rem;
  pointer-events: auto;
  cursor: pointer;

}


/* Burger */
#burger {
  width: 2.4rem;
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  pointer-events: auto;
}
#burger span {
  display: block;
  width: 70%;
  height: 3px;
  margin-inline: auto;
  background: var(--white);
  border-radius: 2px;
  transition: .3s var(--ease);
}
#burger.open span:first-child { transform: translateY(5px)  rotate(45deg); }
#burger.open span:last-child  { transform: translateY(-5px) rotate(-45deg); }

/*─────────────────────────
  HERO
─────────────────────────*/
#hero { position: relative; height: 100vh; overflow: hidden; }
.hero-bg video { width: 100%; height: 100vh; object-fit: cover; }

.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 1.8rem;
  transform: translateX(-50%);
  font-size: 1.4rem;
  animation: bounce 2s infinite;
}
@keyframes bounce {
  0%,100% { transform: translate(-50%,0); }
  50%     { transform: translate(-50%,.6rem); }
}

/*─────────────────────────
  INTRO
─────────────────────────*/
#intro { text-align: center; padding: 22vh calc(var(--wrap) + var(--wide-margin)) 16vh; }
#intro h1 {
  font-size: clamp(3rem, 9vw, 9.5rem);
  line-height: 1.05;
  opacity: 0;
  transform: translateY(40px);
  animation: fadeUp .9s forwards .2s;
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
#intro p {
  margin: 1rem auto 0;
  max-width: 840px;
  font-size: clamp(1rem, 1.3vw, 1.45rem);
  opacity: 0;
  transform: translateY(40px);
  animation: fadeUp .9s forwards .4s;
  background: var(--grad-text);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

/*─────────────────────────
  CHARACTER
─────────────────────────*/
/*─────────────────────────
  CHARACTER
─────────────────────────*/
#character {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  padding: 14vh calc(var(--wrap) + var(--wide-margin));
  align-items: start;
  position: relative;
  z-index: 1;
}
#character::before {
  content: '';
  position: absolute;
  inset: 0 0 50% 0;

  opacity: .12;
  pointer-events: none;
  mix-blend-mode: screen;

   /* sanfter Fade oben und unten */
  /* 0% transparent, 10–90% voll sichtbar, 100% transparent */
  mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0)    0%,
    rgba(0,0,0,1)   10%,
    rgba(0,0,0,1)   90%,
    rgba(0,0,0,0)  100%
  );
  mask-mode: alpha;

  /* für WebKit (Safari, ältere iOS) */
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0)    0%,
    rgba(0,0,0,1)   10%,
    rgba(0,0,0,1)   90%,
    rgba(0,0,0,0)  100%
  );
  -webkit-mask-mode: alpha;
}

#character1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  padding: 14vh calc(var(--wrap) + var(--wide-margin));
  align-items: start;
  position: relative;
  z-index: 1;
}
#character1::before {
  content: '';
  position: absolute;
  inset: 0 0 50% 0;

  opacity: .12;
  pointer-events: none;
  mix-blend-mode: screen;
  mask-image: linear-gradient(180deg, #000 70%, transparent);

    /* sanfter Fade oben und unten */
  /* 0% transparent, 10–90% voll sichtbar, 100% transparent */
  mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0)    0%,
    rgba(0,0,0,1)   10%,
    rgba(0,0,0,1)   90%,
    rgba(0,0,0,0)  100%
  );
  mask-mode: alpha;

  /* für WebKit (Safari, ältere iOS) */
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0)    0%,
    rgba(0,0,0,1)   10%,
    rgba(0,0,0,1)   90%,
    rgba(0,0,0,0)  100%
  );
  -webkit-mask-mode: alpha;
}


#character2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  padding: 14vh calc(var(--wrap) + var(--wide-margin));
  align-items: start;
  position: relative;
  z-index: 1;
}
#character2::before {
  content: '';
  position: absolute;
  inset: 0 0 50% 0;

  opacity: .12;
  pointer-events: none;
  mix-blend-mode: screen;
  mask-image: linear-gradient(180deg, #000 70%, transparent);

    /* sanfter Fade oben und unten */
  /* 0% transparent, 10–90% voll sichtbar, 100% transparent */
  mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0)    0%,
    rgba(0,0,0,1)   10%,
    rgba(0,0,0,1)   90%,
    rgba(0,0,0,0)  100%
  );
  mask-mode: alpha;

  /* für WebKit (Safari, ältere iOS) */
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0)    0%,
    rgba(0,0,0,1)   10%,
    rgba(0,0,0,1)   90%,
    rgba(0,0,0,0)  100%
  );
  -webkit-mask-mode: alpha;
}

#character3 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  padding: 14vh calc(var(--wrap) + var(--wide-margin));
  align-items: start;
  position: relative;
  z-index: 1;
}
#character3::before {
  content: '';
  position: absolute;
  inset: 0 0 50% 0;

  opacity: .12;
  pointer-events: none;
  mix-blend-mode: screen;
  mask-image: linear-gradient(180deg, #000 70%, transparent);

    /* sanfter Fade oben und unten */
  /* 0% transparent, 10–90% voll sichtbar, 100% transparent */
  mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0)    0%,
    rgba(0,0,0,1)   10%,
    rgba(0,0,0,1)   90%,
    rgba(0,0,0,0)  100%
  );
  mask-mode: alpha;

  /* für WebKit (Safari, ältere iOS) */
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0)    0%,
    rgba(0,0,0,1)   10%,
    rgba(0,0,0,1)   90%,
    rgba(0,0,0,0)  100%
  );
  -webkit-mask-mode: alpha;
}


.char-text h2,
.char-text .quote,
.char-text .desc {
  opacity: 0;
  transform: translateY(40px);
  animation: fadeUp .9s forwards;
}

.char-text h2 {
  animation-delay: .2s;
  font-size: clamp(2.6rem, 6vw, 6rem);
  font-weight: 800;
   text-align: left;
}

/* Zitat & Beschreibung auf max. 500px begrenzen */
.char-text .quote,
.char-text .desc {
  max-width: 800px;   
  text-align: left;     /* maximale Breite */

}

.char-text .quote {
  animation-delay: .35s;
  margin: .5rem 0;
  font-size: clamp(1rem, 1.2vw, 1.35rem);
  font-weight: 600;
  margin-bottom: 10px;
}

.char-text .desc {
  animation-delay: .5s;
  line-height: 1.65;
  margin-top: 5px;
}


.char-button {
  display: inline-block;              /* Damit Padding und Margin richtig wirken */
  font-weight: 600;
  padding: 0.5rem 1.2rem;               /* etwas mehr semantische Einheit */
  font-size: 14px;
  background-color: transparent;
  color: var(--white);
  border-radius: 50px;
  backdrop-filter: blur(10px);
  border: 2px solid var(--white);
  cursor: pointer;                    /* Zeigt, dass es klickbar ist */
  transition: 
    background-color 0.3s ease, 
    color 0.3s ease, 
    transform 0.2s ease;              /* sanfte Hover-Animation */
}

.char-button:hover {
  background-color: var(--white);
  color: var(--black);
  border: 2px solid var(--white);

}

.char-button:focus {
  outline: 2px solid var(--primary);  /* sichtbarer Fokus-Rand */
  outline-offset: 2px;
}



.char-image {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  max-height: 520px;
}
.char-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease-in-out;
}
.char-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 4px solid transparent;
  border-radius: var(--radius);
  transform: scale(1.2);
  transition:
    transform 0.4s ease-in-out,
    border-color 0.4s ease-in-out;
  pointer-events: none;
  z-index: 1;
}
.char-image:hover img {
  transform: scale(1.05);
}
.char-image:hover::after {
  transform: scale(1);
  border-color: #ffffff;
}
.char-image .zoom {
  position: absolute;
  bottom: .8rem;
  right: .8rem;
  width: 2.2rem;
  aspect-ratio: 1;
  background: rgba(0,0,0,.6);
  color: var(--black);

  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .3s;
  font-size: .85rem;
    border: 2px solid #ffffff7e;
}
.char-image .zoom:hover {
  background: rgba(106, 106, 106, 0.85);
    border: 3px solid var(--white);
}

/*─────────────────────────
  CHARACTER GALLERY (SWIPER)
─────────────────────────*/
.char-gallery {
  grid-column: 1/-1;
  border-radius: var(--radius);
  overflow: hidden;
  height: clamp(420px, 65vw, 600px);
  margin-top: 2.5rem;
  position: relative; /* für absolute Buttons */
  max-width: 1000px;
  margin-inline: auto;
}
.char-gallery .swiper {
  width: 100%;
  height: 100%;
}
.char-gallery .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ECHT RUNDE UND ZENTRIERTE NAVIGATIONSBUTTONS */
/* 1) Relativer Container für exakte Zentrierung */
.char-gallery .swiper {
  position: relative; /* hier hängen wir die Buttons dran */
}

/* 2) Absolut-positionierte, echte Kreise mit !important-Overrides */
.char-gallery .swiper-button-next,
.char-gallery .swiper-button-prev {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;         /* remove default margins */
  
  width: 3rem !important;       /* exakte Breite */
  height: 3rem !important;      /* exakte Höhe */
  aspect-ratio: 1 / 1 !important; 
  border-radius: 50% !important;/* perfekter Kreis */
  overflow: hidden !important;  /* nichts darf rausragen */
  
  background: rgba(0, 0, 0, 0.5) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background .2s ease !important;
  z-index: 10 !important;
}

/* 3) Abstand zu den Kanten beibehalten */
.char-gallery .swiper-button-prev {
  left: 1rem !important;
}
.char-gallery .swiper-button-next {
  right: 1rem !important;
}

/* Hover */
.char-gallery .swiper-button-next:hover,
.char-gallery .swiper-button-prev:hover {
  background: rgba(0, 0, 0, 0.75) !important;
}

/* Icons & Default-Pseudo-Elements abschalten */
.char-gallery .swiper-button-next::after,
.char-gallery .swiper-button-prev::after {
  display: none !important;
}
.char-gallery .swiper-button-prev::before,
.char-gallery .swiper-button-next::before {
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  font-size: 1.2rem !important;
  color: #fff !important;
  line-height: 1 !important;
}
.char-gallery .swiper-button-prev::before { content: "\f053" !important; }
.char-gallery .swiper-button-next::before { content: "\f054" !important; }
/*─────────────────────────
  PAGINATION
─────────────────────────*/
.char-pagination {
  display: flex;
  justify-content: center;
  gap: .55rem;
  padding: .55rem .8rem;
  margin-top: .8rem;
  overflow: hidden;
  background: rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(4px);
  border-radius: 999px;
  width: max-content;
  margin-inline: auto;
}
.char-pagination .swiper-pagination-bullet {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: #bbb;
  opacity: .6;
  transition: .35s var(--ease);
}
.char-pagination .swiper-pagination-bullet-active {
  transform: scale(1.35);
  opacity: 1;
  background: var(--white);
}

@media (max-width: 900px) {
  #character, #character1 ,#character2  ,#character3  { display: block; padding: 12vh var(--wrap); }
  .char-image              { margin-top: 2rem; max-height: 380px; }
  .char-gallery            { margin-top: 2rem; height: clamp(300px, 70vw, 450px); }


/* 2) Absolut-positionierte, echte Kreise mit !important-Overrides */
.char-gallery .swiper-button-next,
.char-gallery .swiper-button-prev {
    /* remove default margins */
  
  width: 2rem !important;       /* exakte Breite */
  height: 2rem !important;      /* exakte Höhe */

}

/* 3) Abstand zu den Kanten beibehalten */
.char-gallery .swiper-button-prev {
  left: 0.6rem !important;
}
.char-gallery .swiper-button-next {
  right: 0.6rem !important;
}

.char-text h2 {
margin-bottom: 20px;
  font-size: 50px;}
}


/*─────────────────────────
  VISIT CARD
─────────────────────────*/
#visit-card { text-align: center; padding: 14vh calc(var(--wrap) + var(--wide-margin)); padding-top: 0vh; }
#visit-card1 { text-align: center; padding: 14vh calc(var(--wrap) + var(--wide-margin)); padding-top: 0vh; }
#visit-card2 { text-align: center; padding: 14vh calc(var(--wrap) + var(--wide-margin)); padding-top: 0vh; }
#visit-card3 { text-align: center; padding: 14vh calc(var(--wrap) + var(--wide-margin)); padding-top: 0vh; }
.visit-logo{ width: 300px; margin-inline: auto; margin-bottom: 2rem; }
.visit-bg  { max-width: 650px; margin-inline: auto; border-radius: var(--radius); overflow: hidden;  transition: transform 0.3s ease-in-out;
  transform-origin: center center;  margin-top: 60px; }

.visit-bg img { 
  object-fit: cover;
  
 }

 /* 2) Auf Hover (Mouse) bzw. Touch (Mobile) leicht nach rechts rotieren */
.visit-bg:hover  {
  transform: rotate(1.2deg);
}

.visit-text{
  color: var(--white);
  text-align: center;

  font-size: large;
  width:50%;
  margin: auto;
  margin-bottom: -20px;
}

#visit-btn, 
#visit-btn1,
#visit-btn2,
#visit-btn3{
  margin-top: 1.8rem;
  padding: 1rem 2.6rem;
  background: var(--white);
  color: var(--black);
  border: none;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .3s, box-shadow .3s;
}
#visit-btn:hover,
#visit-btn1:hover,
#visit-btn2:hover,
#visit-btn3:hover { transform: scale(1.06); box-shadow: 0 15px 30px rgba(0,0,0,.35); }

/*─────────────────────────
  EXPLORE PANEL
─────────────────────────*/
#explore-panel,
#explore-panel {
  position: fixed;
  inset: 0;
  display: none;
  flex-direction: column;
  background: var(--grad-default);
  z-index: 2600;
  transition: background .7s var(--ease);
}
#explore-panel1 {
  position: fixed;
  inset: 0;
  display: none;
  flex-direction: column;
  background: var(--grad-visit);
  z-index: 2600;
  transition: background .7s var(--ease);
}
#explore-panel2 {
  position: fixed;
  inset: 0;
  display: none;
  flex-direction: column;
  background: var(--grad-explore);
  z-index: 2600;
  transition: background .7s var(--ease);
}
#explore-panel3 {
  position: fixed;
  inset: 0;
  display: none;
  flex-direction: column;
  background: var(--grad-explore-1);
  z-index: 2600;
  transition: background .7s var(--ease);
}
#explore-panel4 {
  position: fixed;
  inset: 0;
  display: none;
  flex-direction: column;
  background: var(--grad-explore-1);
  z-index: 2600;
  transition: background .7s var(--ease);
}

#explore-panel.active,
#explore-panel1.active,
#explore-panel2.active,
#explore-panel4.active,
#explore-panel3.active {
  display: flex;
}

/*─────────────────────────
  SCROLL-WRAPPER
─────────────────────────*/
#explore-content-wrapper {
  flex: 1;
  overflow-y: auto;
  position: relative;

  /* Die Maske ist ein Alpha-Gradient von transparent zu opaque,
     beginnt unter dem Button und blendet den Content aus.
     "black" hier steht nur für 100% Maske, färbt das Element aber nicht. */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent var(--explore-header-offset),
    black calc(var(--explore-header-offset) + var(--explore-fade-length))
  );
  mask-image: linear-gradient(
    to bottom,
    transparent var(--explore-header-offset),
    black calc(var(--explore-header-offset) + var(--explore-fade-length))
  );
  mask-mode: alpha;
  mask-repeat: no-repeat;
}

/*─────────────────────────
  BACK BUTTON
  – sticky innerhalb des Panels + Blur-Backdrop + breiter
─────────────────────────*/
#explore-back,
#explore-back1,
  #explore-back2,
    #explore-back4,
   #explore-back3{
  position: sticky;
  top: 3rem;
  align-self: flex-start;
  padding: 1rem 1.5rem;
  min-width: 140px;
  border: 2px solid var(--white);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0);
  color: var(--white);
  font-weight: 600;
  cursor: pointer;
  z-index: 2002; /* über Maske */
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  transition: background .3s;
  margin-left: 40px;
    transition: transform .3s, box-shadow .3s, margin-left .3s;
}

#explore-back:hover,
#explore-back1:hover,
#explore-back2:hover,
#explore-back4:hover,
#explore-back3:hover   {
  background: rgb(255, 255, 255);
  transform: scale(1.06); box-shadow: 0 5px 10px rgba(0, 0, 0, 0.118);
  margin-left: 30px;
  
}



/*─────────────────────────
  TOP SECTION
─────────────────────────*/
.explore-top {
  display: grid;
  grid-template-columns: 500px 1fr;
  gap: 2.5rem;
  width: 100%;
  padding: 8vh calc(40px + var(--wide-margin)) 4vh;
  max-width: none;
}

/*─────────────────────────
  THUMBNAIL
─────────────────────────*/
.explore-thumb {
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.3s ease-in-out;
  transform-origin: center center;
}

.explore-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*─────────────────────────
  COPY TEXT
─────────────────────────*/
.explore-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.3rem;
}

.explore-copy h3 {
  font-size: clamp(2.2rem, 5vw, 4.2rem);
}

.explore-copy ul {
  list-style: disc inside;
  line-height: 1.6;
}

.explore-copy p {
  line-height: 1.65;
}

/*─────────────────────────
  GALLERY
─────────────────────────*/
.explore-gallery {
  width: calc(100% - (80px + (var(--wide-margin) * 2)));
  margin: 0 auto 12vh;
  /* Masonry via multi‑column */
  column-count: 1;             /* mobile default */
  column-gap: 1rem;
  margin-bottom: 20%;
}

.explore-gallery img {
  width: 100%;
  height: auto;                 /* keep natural aspect ratio */
  object-fit: contain;          /* never crop */
  border-radius: var(--radius);
  display: block;
}

/*─────────────────────────
  GALLERY ITEM + ZOOM HOVER
─────────────────────────*/
.explore-gallery-item {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  /* Masonry item settings */
  display: inline-block;
  width: 100%;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  margin-bottom: 1rem;          /* matches column-gap on mobile */
}

.explore-gallery-item img {
  display: block;
  width: 100%;
  height: auto;                /* keep natural aspect ratio */
  object-fit: contain;         /* never crop */
  transition: transform 0.35s ease;
  transform-origin: center center;
  will-change: transform;
}

.explore-gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 4px solid transparent;
  border-radius: var(--radius);
  transform: scale(1.2);
  pointer-events: none;
  transition:
    transform 0.4s ease-in-out,
    border-color 0.4s ease-in-out;
}

.explore-gallery-item:hover img,
.explore-gallery-item:active img,
.explore-gallery-item:focus-within img {
  transform: scale(1.04);     /* subtle in-frame zoom */
}

@media (prefers-reduced-motion: reduce) {
  .explore-gallery-item img { transition: none; }
}

.explore-gallery-item:hover::after {
  transform: scale(1);
  border-color: #ffffff;
}

.explore-gallery-item .zoom {
  position: absolute;
  bottom: .8rem;
  right: .8rem;
  width: 2.2rem;
  aspect-ratio: 1;
  background: rgba(0, 0, 0, .6);
  color: var(--black);
  border: 2px solid #ffffff7e;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .3s, transform .2s;
  font-size: .85rem;
}

.explore-gallery-item .zoom:hover {
  background: rgba(106, 106, 106, 0.85);
  transform: scale(1.1);
  border: 3px solid #ffffff;
}

/* Optional: Zoom-State (per JS-Klasse .zoomed auf .explore-gallery-item) */
.explore-gallery-item.zoomed img {
  transform: scale(1.2);
  transition: transform .3s;
}




/*─────────────────────────
  DESKTOP LAYOUT (≥900px) – Masonry via columns */
@media (min-width: 900px) {
  .explore-gallery {
    column-count: 3;
    column-gap: 1.4rem;
    width: calc(100% - (80px + (var(--wide-margin) * 2)));
    margin: 0 auto 20%;
  }
  .explore-gallery-item {
    margin-bottom: 1.4rem;
  }
}

@media (min-width: 1400px) {
  .explore-gallery { column-count: 4; }
}

/* Mobile – one column, stacked */
@media (max-width: 899px) {
  .explore-gallery {
    column-count: 1;
    column-gap: 1rem;
    width: calc(100% - 40px);
    margin-bottom: 20%;
  }
  .explore-gallery-item {
    margin-bottom: 1rem;
  }
}

/*─────────────────────────
  MOBILE LAYOUT (<900px)
─────────────────────────*/
@media (max-width: 899px) {
  .explore-top {
    grid-template-columns: 1fr;
    padding: 8vh 20px 4vh;
  }



  #explore-back,
  #explore-back1,
    #explore-back2 {
    margin-left: 20px;
  }

  #explore-back:hover {
    background: rgba(255, 255, 255, 0.45);
  }
  .char-button {
             /* etwas mehr semantische Einheit */
    font-size: 13px;
              /* sanfte Hover-Animation */
  }
}
/*─────────────────────────
  SIDE NAV
─────────────────────────*/
#side-nav {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--grad-default);
  transform: translateX(100%);
  transition: transform .65s var(--ease);
  z-index: 3000;
}
#side-nav.open { transform: translateX(0); }

.nav-left { position: relative; overflow: hidden; }
.nav-left img {
  width: 130%;
  height: 130%;
  object-fit: cover;
  transform-origin: center center;
  transform: scale(1.2);
  transition: opacity .15s ease;
}

.nav-left::after {
  content: '';
  position: absolute;
  inset: 0;

  opacity: .35;
  pointer-events: none;
}
.nav-right {
  padding: var(--wrap);
  padding-right: calc(var(--wrap) + 5rem);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.nav-top {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: 2rem;
  align-items: center;
  padding-right: 15px;
}


/* tabs-liquid.css – Ultra-Smooth, zentrierter Text
   --------------------------------------------------------------- */
.tabs{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  flex:1;
  justify-content:flex-start;
  max-width:100%;
  position:relative;          /* ▼ wichtig für .tab-pill */
}

.tab{
  position:relative;          /* ▼ Text über der Pille */
  z-index:2;
  padding:.8rem 1.2rem;
  border:none;
  border-radius:999px;
  background:none;
  color:#808080;
  font-weight:600;
  cursor:pointer;
  transition:color .3s;
}
.tab:hover  { color:var(--white); }
.tab.active { color:var(--black); }

.tab-pill{
  position:absolute;
  top:0;
  height:100%;
  width:0;                    /* JS setzt Breite */
  border-radius:999px;
  background:var(--white);
  box-shadow:0 0 0 2px var(--white) inset; /* optional Rand */
  z-index:1;
  pointer-events:none;
  will-change:transform,width;
}

#nav-close {
  position: fixed;
  top: var(--wrap);
  right: var(--wrap);
  width: 3.2rem;
  aspect-ratio: 1;
  background: rgba(255,255,255,.15);
  border: 3px solid #000000;
  border-radius: 50%;
  cursor: pointer;
  z-index: 3500;
  margin-right: 10px;
  transition: background 0.3s ease, transform 0.6s ease;
}

#nav-close:hover {
  background: rgba(171, 171, 171, 0.35);
  transform: rotate(90deg);
}

#nav-close::before,
#nav-close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1rem;
  height: .16rem;
  background: var(--white);
  transform-origin: center;
}
#nav-close::before { transform: translate(-50%,-50%) rotate(45deg); }
#nav-close::after  { transform: translate(-50%,-50%) rotate(-45deg); }

#nav-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  font-size: clamp(1.8rem, 3vw, 3rem);
  font-weight: 800;
  margin-top: 1rem;
}
#nav-links li {
  cursor: pointer;
  transition: color .3s;
  color: var(--white);
  text-align: left;
}
#nav-links li:hover {
  color: #808080;
}

@media (max-width: 600px) {
  #side-nav {
    grid-template-rows: 50vh 50vh;
    grid-template-columns: 1fr;
  }
  .nav-right { order: 1; overflow: auto; }
  .nav-left  { order: 2; height: 50vh; }
  .tabs .tab { 
    flex: 0 0 calc(5% - .6rem); 
    padding: 0.8rem .8rem; 
  }
  .tabs { 
    margin-top: 5px;
    margin-left: 5px;
  }
  #nav-links { 
    padding-bottom: 3rem;
    margin-top: 10px;
    margin-left: 10px;
  }
}

/*─────────────────────────
  FOOTER
─────────────────────────*/
/* ---- Footer Wrapper ---- */
.site-footer {
  background: var(--grad-default);
  color: #4a4a4a;
  font-size: 0.95rem;
  padding: 4rem var(--wrap) 2.5rem;
  position: relative;
}

/* Decorative top bar (full‑width) */
.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--grad-text);
  border-radius: 2px;
  opacity: 0.9;
}

/* ---- Layout ---- */
.footer-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin-inline: auto;
}

.footer-brand img {
  width: 180px;
  margin-bottom: 1rem;
}

.footer-brand .tagline {
  font-size: 0.9rem;
  opacity: 0.8;
}

.footer-nav h4,
.footer-contact h4,
.footer-social h4 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
  color: #000000;
}

/* ---- Links ---- */
.footer-links,
.footer-contact ul,
.social-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer-links a,
.footer-contact a {
  color: inherit;
  opacity: 0.85;
  transition: opacity 0.25s var(--ease);
  word-break: break-all;
}

.footer-links a:hover,
.footer-contact a:hover {
  opacity: 1;
}

/* ---- Social Icons ---- */
.social-links {
  flex-direction: row;
  gap: 1rem;
}

.social-links a {
  font-size: 1.25rem;
  display: grid;
  width: 2.6rem;
  color: #ffffff;
  aspect-ratio: 1;
  place-items: center;
  border-radius: 50%;
  background: var( --grad-link-footer);
  box-shadow: 0 0 0 1.5px rgba(255,255,255,0.25);
  transition: transform 0.3s;
}

.social-links a:hover {
  transform: scale(1.08) rotate(5deg);
}

/* ---- Bottom ---- */
.footer-bottom {
  margin-top: 2.5rem;
  text-align: center;
  opacity: 0.6;
  font-size: 0.8rem;
}

/* ---- Responsive ---- */
@media (max-width: 800px) {
  .footer-container {
    text-align: center;
  }
  .social-links {
    justify-content: center;
  }
  .footer-brand img {
  margin: auto;
  }
  .tagline{
    margin-top: 10px;
  }
}

.footer-legal{
  margin-right:7px;
  margin-top: 20px;
color: #3e3e3e;
font-size: 14px;

}
.footer-legal:hover{
text-decoration: underline;
color: var(--white);

}
/*─────────────────────────
  LIGHTBOX
─────────────────────────*/


/* — Schließen-Button — */
.lightbox-close{
  position: absolute;
  top: 1.6rem;
  right: 1.6rem;
  width: 2.8rem;
  aspect-ratio: 1;
  background: rgba(255,255,255,.17);
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-size: 1.2rem;
  color: #fff;
  border: none;
  z-index: 3000;
  transition: background .3s;
}
.lightbox-close:hover{ background: rgba(255,255,255,.35); }

/* — Overlay — */
.lightbox-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.92);
  backdrop-filter: blur(6px);
  display: flex;
  justify-content: center;  /* immer exakt mittig  */
  align-items: center;
  cursor: zoom-out;
  z-index: 5000;
  opacity: 0;
  text-align: center;       /* Chips / Texte mittig */
}

/* — Wrapper (Bild + Text) — */
.lightbox-inner{
  position: relative;
  /* Neu: flex-Box statt inline-block → garantiert zentrierte Ausrichtung
     und verhindert Links­verschiebungen bei sehr kleinen Viewports       */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 92vw;
  max-height: 92vh;
}

/* — Bild — */
.lightbox-inner img{
  max-width: 100%;
  /* Neu: standard­mäßig nie höher als 90 % Viewport­höhe   */
  max-height: 90vh;
  border-radius: var(--radius);
}

/* — Bildtitel — */
.lightbox-title{
  position: absolute;
  top: -48px;
  left: 0;                 /* volle Breite nutzen */
  width: 100%;             /* Titel so breit wie Bild  */
  display: flex;
  justify-content: center; /* Text zentriert         */
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 6px rgba(0,0,0,.6);
  pointer-events: none;
  /* Neu: einzeilig, keine frühen Umbrüche  */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ─ Metadaten-Zeile / Chips ─ */
.lightbox-meta{
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
}
.meta-chip{
  padding: .25rem .65rem;
  background: #4d4d4d;
  border: 1px solid rgb(255, 255, 255);
  border-radius: 20px;
  font-size: .8rem;
  color: var(--black);
  backdrop-filter: blur(4px);
  white-space: nowrap;
}

/*─────────────────────────
  MOBILE LOGO ADJUSTMENT
─────────────────────────*/
@media (max-width: 600px){
  .topbar .logo{ height: 1.2rem; }
}

/*─────────────────────────
  RESPONSIVE BILDER & TITEL
─────────────────────────*/

/* Smartphones / kleine Tablets */
@media (max-width: 800px){
  /* Höher darf das Bild hier nicht sein → 80 %   */
  .lightbox-inner img{ max-height: 75vh; }

  /* Titel weiter oben, damit er nicht ins Bild ragt */
  .lightbox-title{ top: -60px; }

  /* Portrait-Bilder dürfen etwas größer sein als vorher */
  .lightbox-inner.portrait img{
    max-width: 80vw;
    max-height: 80vh;
  }
}

/* Größere Viewports: Portrait-Bilder limitieren,
   normale Bilder bleiben (max-height wird oben schon geregelt) */
@media (min-width: 800.01px){
  .lightbox-inner.portrait img{
    max-width: 60vw;
    max-height: 80vh;  /* identische Obergrenze wie Landscape */
  }
    .lightbox-inner img{ max-height: 80vh; max-width: 80vh; }

}






@media (max-width: 899px) {


h2{
    line-height: 3.4rem;
}
}

@media (min-width: 901px) {

h2{
    line-height: 4rem;
}
}

@media (min-width: 1080px) {

h2{
    line-height: 5rem;
}
.topbar .logo{ height: 1.2rem; }
}

@media (min-width: 1280px) {

h2{
    line-height: 5.5rem;
}
.topbar .logo{ height: 1.2rem; }
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2500;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--wrap);
  padding-inline: calc(var(--wrap) + var(--wide-margin));
  pointer-events: none;
  background: transparent; /* wird durch ::before ersetzt */
}

:root{
    --wrap:   clamp(1rem, 2vw, 3.5rem);
}
}

@media (min-width: 1980px) {

h2{
    line-height: 6.2rem;
}
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2500;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--wrap);
  padding-inline: calc(var(--wrap) + var(--wide-margin));
  pointer-events: none;
  background: transparent; /* wird durch ::before ersetzt */
}
:root{
    --wrap:   clamp(1rem, 2vw, 3.5rem);
}
}










/* In deine existing CSS-Datei (style.css): */
#secret-trigger {



  cursor: default;
}





/*──────────────────────────────────────────────
  WIDE GUTTERS (only affect main content, not topbar)
──────────────────────────────────────────────*/
@media (min-width: 1600px) { :root { --wide-margin: 50px; } }
@media (min-width: 1920px) { :root { --wide-margin: 80px; } }










































/* ───────────────────────────────────────────────
   VISORA CONSENT (vc-*)
   – Modal mit Blur/Dim Backdrop, Apple-Switches (subtil)
   – Scroll im Modal-Body bei kleinen Displays
   – Scroll-Hinweis & Pfeil im Summary
   – Logo rechts, größer
   – „Mehr Infos“ unter den Buttons (klein, transparent)
   ───────────────────────────────────────────── */

#vc-consent-root{
  position: fixed;
  inset: 0;
  z-index: 6000;
  display: block;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, visibility .25s ease;
}
#vc-consent-root.is-open{
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

/* Backdrop: blur + dim */
.vc-backdrop{
  position: absolute;
  inset: 0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(0,0,0,.35);
}

/* Modal Card */
.vc-modal{
  --vc-on:     #454545;   /* dezentes Grün (schwach) */
  --vc-off:    #ececf0;   /* zartes Grau */
  --vc-border: #e5e5ea;   /* iOS Border Grey */

  position: relative;
  max-width: min(680px, calc(100vw - 32px));
  margin: 8vh auto;
  background: var(--black);
  color: var(--white);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  overflow: hidden;

  /* Layout: Header / Body (scroll) / Actions */
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  /* Größe & Motion */
  transform: translateY(10px) scale(.98);
  opacity: 0;
  transition: transform .25s var(--ease), opacity .25s var(--ease);
  max-height: min(88vh, 720px); /* → Body kann scrollen */
}
#vc-consent-root.is-open .vc-modal{
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Header: Logo nach rechts, größer */
.vc-head{
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 1.4rem .2rem 1.4rem;
  justify-content: space-between;
}
.vc-head h2{
  font-size: 1.2rem;
  font-weight: 800;
  order: 1;
}
.vc-logo{
  width: 60px; height: 60px; object-fit: contain;
  order: 2;
}

/* Body – scrollt bei Bedarf */
.vc-body{
  padding: .6rem 1.4rem 0 1.4rem;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.vc-lead{
  line-height: 1.6;
  opacity: .9;
}
.vc-body a{
  text-decoration: underline;
}



/* Details / Summary (Einstellungen) mit Pfeil rechts */
.vc-details{
  margin-top: 1rem;
  border-top: 1px solid var(--vc-border);
  padding-top: .8rem;
}
.vc-summary{
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: .6rem;
  font-weight: 700;
}
.vc-summary::-webkit-details-marker{ display: none; }
.vc-summary-text{ display: inline-block; }
.vc-summary-hint{ opacity: .6; font-weight: 600; }

/* Pfeil rechts im Summary */
.vc-summary::after{
  content: "";
  margin-left: auto;
  width: 22px; height: 22px; border-radius: 999px;
  background: rgba(0,0,0,.06);
  box-shadow: 0 0 0 1px var(--vc-border) inset;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") center/60% no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") center/60% no-repeat;
  background-color: rgba(0,0,0,.25);
}

/* Switch-Liste */
.vc-switch-list{
  list-style: none;
  margin-top: .8rem;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: .8rem;
}
.vc-row{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  padding: .8rem;
  border: 1px solid var(--vc-border);
  border-radius: 12px;
  background: rgba(0,0,0,0);
}
.vc-row strong{ font-weight: 800; }
.vc-row p{ margin-top: .25rem; line-height: 1.5; opacity: .8; }

/* Apple-Switch – bewusst „schwach“/subtil */
.vc-switch{
  position: relative;
  width: 52px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid var(--vc-border);
  background: var(--vc-off);
  display: inline-block;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.vc-switch .vc-knob{
  position: absolute;
  top: 50%;
  left: 2px;
  transform: translateY(-50%);
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--black); /* weiß in deinem Theme */
  box-shadow: 0 1px 1px rgba(0,0,0,.12), 0 0 0 1px rgba(0,0,0,.04) inset;
  transition: left .2s ease;
}
.vc-switch.is-on{
  background: var(--vc-on);
  border-color: var(--vc-on);
}
.vc-switch.is-on .vc-knob{
  left: calc(100% - 2px - 26px);
}
.vc-switch.is-locked{
  opacity: .6;
  cursor: not-allowed;
}

/* Actions */
.vc-actions{
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: .6rem;
  padding: 1.2rem 1.4rem 1.9rem 1.4rem; /* extra bottom für „Mehr Infos“ */
  position: relative;
}

/* Buttons */
.vc-btn{
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: .8rem 1.2rem;
  font-weight: 800;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.vc-btn:active{ transform: translateY(1px); }
.vc-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,0,0,.08), 0 0 0 6px rgba(0,0,0,.05);
}

/* „Alle akzeptieren“ – schwarz (dein Theme: var(--white)=#000) */
.vc-btn-accept{
  background: var(--white);
  color: var(--black);
  border-color: var(--white);
}
.vc-btn-accept:hover{ filter: brightness(0.9); }

/* „Ablehnen“ – Outline */
.vc-btn-outline{
  background: transparent;
  color: var(--white);
  border-color: var(--white);
}
.vc-btn-outline:hover{
  background: var(--white);
  color: var(--black);
}

/* „Einstellungen“ – Ghost */
.vc-btn-ghost{
  background: transparent;
  color: var(--white);
  border-color: var(--vc-border);
}
.vc-btn-ghost:hover{ background: rgba(0,0,0,.06); }

/* „Mehr Infos“ (unter Buttons, klein & transparent) */
.vc-legal{
  position: absolute;
  left: 1.4rem; right: 1.4rem; bottom: .6rem;
  text-align: center;
  font-size: .82rem;
  opacity: .65;              /* leicht transparent, nicht zu dunkel */
}
.vc-legal a{ text-decoration: underline; }

/* Footer-Trigger („Cookie-Einstellungen“) im Footer der Seite */
.vc-reopen{
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  padding: 0;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* Responsive: kleine Devices & kleine Höhen */
@media (max-width: 640px){
  .vc-actions{ grid-template-columns: 1fr; }
  .vc-btn{ width: 100%; }
  .vc-head{ padding: 1rem 1rem .2rem 1rem; }
  .vc-body{ padding: .4rem 1rem 0 1rem; }
  .vc-actions{ padding: 1rem 1rem 1.9rem 1rem; }
  .vc-logo{ width: 45px; height: 45px; }
}
@media (max-height: 700px){
  .vc-modal{
    margin: 4vh auto;
    max-height: 92vh; /* noch mehr Platz, Body scrollt */
  }
}

/* Motion-Reduce */
@media (prefers-reduced-motion: reduce){
  #vc-consent-root, .vc-modal, .vc-switch, .vc-knob, .vc-btn{
    transition: none !important;
  }
  .vc-body::after{ animation: none !important; }
}















  /* Kontakt */
    #kontakt .section-text{color:#222}
    #kontakt-form{max-width:680px;margin:2rem auto 0;display:flex;flex-direction:column;gap:1rem}
    .form-group{display:flex;flex-direction:column}
    .form-group label{font-size:.95rem;margin-bottom:.35rem;color:#333;font-weight:800}
    .form-group input,.form-group textarea{
      width:100%;padding:.8rem 1rem;border:2px solid rgba(0,0,0,.15);border-radius:var(--radius);
      background:#fff;color:#000;font-size:1rem;transition:border-color .3s ease, box-shadow .3s ease;
      font-family:'Manrope',system-ui,sans-serif
    }
    .form-group input::placeholder,
    .form-group textarea::placeholder{font-family:'Manrope',system-ui,sans-serif;opacity:.9;color:#666}
    .form-group input:focus,.form-group textarea:focus{outline:none;border-color:#000;box-shadow:0 0 0 3px rgba(0,0,0,.08)}
    .btn-submit{width:auto;background:#000;color:#fff;font-weight:800;font-size:1rem;padding:.7rem 1.4rem;border:2px solid #000;border-radius:999px;cursor:pointer;transition:transform .25s}
    .btn-submit:hover{transform:translateY(-2px)}

    /* Form action buttons (consent + submit) */
    .form-actions{display:flex;gap:.6rem;align-items:stretch;margin-top:.25rem}
    .form-actions .btn{display:inline-flex;justify-content:center;align-items:center;gap:.5rem;padding:.7rem 1.2rem;border-radius:999px;border:2px solid transparent;font-weight:800;cursor:pointer;transition:transform .25s}
    .form-actions .btn:hover{transform:translateY(-2px)}
    .btn-consent{background:#e5e7eb;color:#0f0f10;border-color:#d1d5db}
    .btn-consent.active{background:#1f2937;color:#fff;border-color:#111}
    .btn-consent i{font-size:1rem}
    .form-actions .btn{flex:1}

      /* Contact form */
    .consent{display:flex;align-items:flex-start;gap:.6rem;font-size:.9rem;color:#333}
    .consent input{margin-top:.2rem}
    .status{margin-top:.5rem;font-size:.95rem}
    .status.ok{color:#107c10}
    .status.err{color:#c62828}

      /* Sections */
    section{padding:6vh 0;}

    .section-inner{ 
  padding: 14vh calc(var(--wrap) + var(--wide-margin));
  align-items: start;
  position: relative;
  z-index: 1;}
    .section-title{font-size:clamp(2rem,4.5vw,3.2rem);margin:0 0 .6rem 0;opacity:0;transform:translateY(20px)}
    .section-text{font-size:clamp(1rem,1.15vw,1.15rem);line-height:1.65;color:#222;opacity:0;transform:translateY(20px)}














/* ───────────────────────────────────────────────
   VISORA · Overview Cards inside #character
   Scoped classes to avoid overrides elsewhere
   ───────────────────────────────────────────── */

/* Ensure the heading block spans full width in #character so cards sit BELOW, not beside */
#character .char-text{
  grid-column: 1 / -1;
  margin-bottom: 1.4rem;
}

/* Grid wrapper for the three service boxes (scoped) */
#character .vm-svc-grid{
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin-top: clamp(12px, 1.2vw, 18px);
  overflow: visible; /* prevent shadow clipping */
}

/* Card base (scoped) */
#character .vm-svc-card{
  position: relative;
  border-radius: 16px;
  padding: clamp(18px, 2.2vw, 26px);
  border: 1px solid #ffffff;
  background: var(--grad-default);
  box-shadow:
    0 10px 24px rgba(0,0,0,.07),
    0 2px 6px rgba(0,0,0,.05);
  transition: transform .25s var(--ease),
              box-shadow .25s var(--ease),
              border-color .25s var(--ease);
  display: flex;
  flex-direction: column;
  gap: .8rem;
  min-height: 220px;
  background-clip: padding-box; /* prevents gradient bleed into the border */
}
#character .vm-svc-card:hover{
  /* keep the card in place – no vertical jump */
  transform: none;
  /* clean white frame on hover */
  border-color: #ffffff;
  /* subtle ring + softer depth */
  box-shadow:
    0 12px 28px rgba(0,0,0,.12),
    0 0 0 2px #ffffff inset;
}

/* Per-area backgrounds using your existing gradients */
#character .vm-svc-card.vm-kind-foto{    background: var(--grad-foto); }
#character .vm-svc-card.vm-kind-bowling{ background: var(--grad-bowling); }
#character .vm-svc-card.vm-kind-grafik{  background: var(--grad-grafik); }
#character .vm-svc-card.vm-kind-converter{  background: var(--grad-converter); }

/* Subtle glare in the top-right corner (not clipped) */
#character .vm-svc-card::before{
  content: "";
  position: absolute;
  top: -30px; right: -30px;
  height: 140px; width: 260px;
  border-radius: 999px;
  filter: blur(24px);
  opacity: .18;
  pointer-events: none;
}
#character .vm-svc-card.vm-kind-foto::before{    background: radial-gradient(80% 60% at 50% 50%, #6fe29a, transparent 60%); }
#character .vm-svc-card.vm-kind-bowling::before{ background: radial-gradient(80% 60% at 50% 50%, #ff86c2, transparent 60%); }
#character .vm-svc-card.vm-kind-grafik::before{  background: radial-gradient(80% 60% at 50% 50%, #86c6ff, transparent 60%); }

/* Icon chip (scoped) */
#character .vm-svc-icon{
  width: 48px; height: 48px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(255,255,255,.7);
  border: 2px solid rgba(0,0,0,.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--white);
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}
#character .vm-svc-card.vm-kind-foto .vm-svc-icon{
  color: #2eb872;                      /* green tint */
  background: rgba(46,184,114,.12);
  border-color: rgba(46,184,114,.25);
}
#character .vm-svc-card.vm-kind-bowling .vm-svc-icon{
  color: #ff5aa5;                      /* pink tint */
  background: rgba(255,90,165,.12);
  border-color: rgba(255,90,165,.25);
}
#character .vm-svc-card.vm-kind-grafik .vm-svc-icon{
  color: #4aa7ff;                      /* blue tint */
  background: rgba(74,167,255,.12);
  border-color: rgba(74,167,255,.25);
}
#character .vm-svc-card.vm-kind-converter .vm-svc-icon{
  color: #ffb22c;                      /* blue tint */
  background: rgba(255, 207, 74, 0.12);
  border-color: rgba(255, 173, 50, 0.25);
}
#character .vm-svc-icon i{ font-size: 1.2rem; }

/* Typography inside card (scoped) */
#character .vm-svc-card h3{
  font-size: clamp(1.15rem, 1.35vw, 1.4rem);
  font-weight: 900;
  line-height: 1.2;
  margin-top: .2rem;
}
#character .vm-svc-card p{
  line-height: 1.6;
  opacity: .9;
}

/* Button sizing only inside these cards (does not touch global .char-button) */
#character .vm-svc-card .char-button{
  margin-top: auto;
  padding: .55rem 1.15rem;
  font-size: inherit;
  align-self: flex-start;   /* stops flex stretch on column cards */
  display: inline-flex;
  width: auto;
  max-width: max-content;
}

/* Responsive: 2 columns on tablet, 1 on mobile */
@media (max-width: 1100px){
  #character .vm-svc-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 700px){
  #character .vm-svc-grid{ grid-template-columns: 1fr; }
  #character .vm-svc-card{ padding: 16px; }
  #character .vm-svc-card .char-button{
    padding: .45rem .9rem;
    font-size: inherit;
    border-width: 1.5px;
  }
}


/*──────────────────────────────────────────────
  HOME: Explore-Buttons unter den Bildern
  – robust via .explore-figure Wrapper
──────────────────────────────────────────────*/
#character1 .explore-figure .char-button,
#character2 .explore-figure .char-button,
#character3 .explore-figure .char-button{
  margin-top: .9rem;
  align-self: start;            /* bleibt in der rechten Spalte */
  display: inline-flex;
}
@media (max-width: 900px){
  #character1 .explore-figure .char-button,
  #character2 .explore-figure .char-button,
  #character3 .explore-figure .char-button{
    margin-top: .8rem;
  }
}















/* SECTION */
#cases { padding: 12vh 0; }
#cases .section-inner { overflow: visible; }
#cases .char-text h2 { margin-bottom: .4rem; }
#cases .char-text .desc { max-width: 760px; }

/* SWIPER */
.cases-swiper{
  position: relative;
  margin-top: 2.5rem;
  overflow: visible !important;
  padding: 0;

  --case-min: 220px;
  --case-max: 420px;                         /* Desktop */
  --case-size: clamp(var(--case-min), 30vw, var(--case-max));
}
.cases-swiper .swiper-wrapper{ align-items: stretch; }
.cases-swiper .swiper-slide{ width: var(--case-size) !important; padding: 0; }

/* Pagination aus (optional) */
.cases-pagination{ display: none !important; }

/* CARD – weiß + schwarzer Border, 2 Sektionen */
.case-card{
  background: #fff;
  border: 3px solid #f1f1f1;
  border-radius: 16px;
  overflow: hidden;
  transition: box-shadow .25s ease, transform .25s ease;
}
.case-card:hover{ box-shadow: 0 12px 26px rgba(0,0,0,.12); }

/* Bild: 1:1, cover, randlos */
.case-media{ position: relative; width: 100%; aspect-ratio: 1/1; overflow: hidden; }
.case-media img{
  position: absolute; inset: -0.5px;         /* Overscan gegen Hairlines */
  width: calc(100% + 1px); height: calc(100% + 1px);
  object-fit: cover; object-position: center;
  transform: translateZ(0);
  transition: transform .35s ease;
}
.case-card:hover .case-media img{ transform: scale(1.02); }

/* CTA im Bild */
.case-cta{
  position: absolute; right: .8rem; bottom: .8rem;
  width: 2.6rem; aspect-ratio: 1; border-radius: 50%;
  background: rgba(0,0,0,.6); color: #fff;
  border: 2px solid rgba(255,255,255,.95);
  display: grid; place-items: center; z-index: 2;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.case-cta::before{ content: none !important; }
.case-cta .chev{ width: 1.15rem; height: 1.15rem; display: block; }
.case-cta:hover{ background: rgba(0,0,0,.78); transform: scale(1.06); }

/* Caption */
.case-info{ background: #fff; color: #000; padding: 1.05rem 1rem 1.2rem; }
.case-title{
  margin: 0; font-size: 1.12rem; font-weight: 900; line-height: 1.2;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden;
}
.case-sub{
  margin: .38rem 0 0 0; font-size: .98rem; opacity: .9;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}

/* Karte klickbar */
.case-link{ display: block; color: inherit; text-decoration: none; }

/* PILLEN-NAVIGATION – immer sichtbar */
.cases-controls{
  display: flex !important; justify-content: center; align-items: center; gap: .9rem;
  margin-top: 2.2rem; padding: 0 8px;
  visibility: visible !important;
}
.cases-controls .cases-prev,
.cases-controls .cases-next{
  display: inline-flex !important; align-items: center; gap: .55rem;
  padding: .74rem 1.2rem;

  background: #fff; color: #000;
  border: 2px solid #000; border-radius: 999px;
  box-shadow: 0 6px 14px rgba(0,0,0,.08);

  font-weight: 800; font-size: .95rem; line-height: 1;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
  visibility: visible !important;
}
/* Falls irgendwo global jemand .swiper-button-lock {display:none} hat:  wir neutralisieren die Klasse pauschal */
.cases-controls .swiper-button-lock{ display: inline-flex !important; visibility: visible !important; }

.cases-controls .cases-prev:hover,
.cases-controls .cases-next:hover{ transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0,0,0,.12); }
.cases-controls .chev{ width: 1rem; height: 1rem; display: block; }

/* große Screens → nur Kartengröße anpassen; Buttons bleiben! */
@media (min-width: 1400px){ .cases-swiper{ --case-max: 400px;  } }
@media (min-width: 2000px){ .cases-swiper{ --case-max: 420px; } }

/* Mobile fast Full-Width */
@media (max-width: 640px){
  .cases-swiper{ --case-min: 94vw; --case-max: 94vw; }
}


@media (max-width: 940px){
.cases-swiper{

  margin-top: 2rem;

}}

@media (max-width: 1000px){
.quote{

  margin-top: 40px;

}}

@media (max-width: 1200px){
.quote{

  margin-top: 60px;

}}
@media (max-width: 1400px){
.quote{

  margin-top: 80px;

}}





/*──────────────────────────────────────────────
  CHARACTER – In-image overlay + Explore-Button v2
  – Button unten mittig zentriert
  – Normaler Cursor (kein Sonder-Cursor)
  – Tooltip-/Hint-Logik via JS-Klasse .show-hint
  – Mobile: Overlay sichtbar, Hint nur kurz per JS
──────────────────────────────────────────────*/

/* Hide the round zoom button specifically inside the three hero images */
#character1 .char-image .zoom,
#character2 .char-image .zoom,
#character3 .char-image .zoom{
  display: none !important;
}

/* Overlay container INSIDE .char-image */
.char-image .explore-overlay,
.char-image .char-overlay{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;   /* unten andocken */
  align-items: center;          /* mittig zentrieren (horizontal) */
  padding: 0;                   /* Padding wandert in .overlay-inner */

  /* Weicher Weiß-Verlauf von unten für Lesbarkeit */
  background: linear-gradient(
    to top,
    rgba(255,255,255,.88) 0%,
    rgba(255,255,255,.70) 22%,
    rgba(255,255,255,.35) 48%,
    rgba(255,255,255,0)   65%
  );

  border-radius: var(--radius);
  z-index: 2;                   /* über ::after-Rahmen */
  opacity: 0;                   /* fade-in on hover */
  transform: translateY(6px);   /* tiny slide */
  transition: opacity .28s var(--ease), transform .28s var(--ease);
  pointer-events: none;         /* Kinder re‑aktivieren */
}

/* Reveal overlay on hover */
#character1 .char-image:hover .explore-overlay,
#character1 .char-image:hover .char-overlay,
#character2 .char-image:hover .explore-overlay,
#character2 .char-image:hover .char-overlay,
#character3 .char-image:hover .explore-overlay,
#character3 .char-image:hover .char-overlay{
  opacity: 1;
  transform: translateY(0);
}

/* Innerer Wrapper: zentriert und klickbare Elemente erlauben */
.char-image .overlay-inner{
  position: relative;
  width: 100%;
  display: grid;
  place-items: center;           /* Button + Hints exakt mittig */
  padding: 1rem 1rem 1.2rem;     /* Abstand am unteren Rand */
  pointer-events: none;          /* nur Buttons/Hits re‑aktivieren */
}

/* Vollflächiger Klickbereich unter dem zentrierten Inhalt */
.char-image .explore-hit{
  position: absolute;
  inset: 0;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  z-index: 1;                    /* unter overlay-inner */
}
.char-image .explore-hit:focus-visible{
  outline: 2px solid #000;
  outline-offset: -2px;
}

/* Button-Styling innerhalb der Overlay-Zone */
.char-overlay .char-explore{
  pointer-events: auto;          /* klickbar */
  margin: 0;
  background: #fff;
  color: #000;
  border-color: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  transform: translate(var(--magnet-x,0), var(--magnet-y,0));
  transition: transform .18s ease;
}
.char-overlay .char-explore:hover{
  filter: brightness(.96);
  transform: translate(var(--magnet-x,0), var(--magnet-y,0)) scale(1.02);
}

/* Hint-Chip (wird per Hover/JS gezeigt) */
.explore-hint{
  pointer-events: none;
  margin-top: .55rem;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .65rem;
  font-size: .9rem;
  color: #000;                     /* gut lesbar auf Weiß */
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
/* zeigen, wenn Sektion gehovert wird oder via JS‑Klasse */
#character1:hover .explore-hint,
#character2:hover .explore-hint,
#character3:hover .explore-hint,
.overlay-inner.show-hint .explore-hint{
  opacity: 1;
  transform: translateY(0);
}

/* Subtiler Leucht‑Impuls hinter dem Button (einmalig) */
.explore-pulse{
  position: absolute;
  bottom: .9rem;                  /* an Button‑Baseline ausgerichtet */
  width: 160px; height: 160px;
  border-radius: 50%;
  background: radial-gradient(60% 60% at 50% 50%, rgba(255,255,255,.55), rgba(255,255,255,0));
  filter: blur(14px);
  opacity: 0;                     /* nur bei JS‑Trigger */
  pointer-events: none;
  transform: translateY(14px);
}
.overlay-inner.pulse-once .explore-pulse{ animation: pulseOnce 1.6s ease-out both; }
@keyframes pulseOnce{
  0%{   opacity:.0; transform: translateY(18px) scale(.9); }
  25%{  opacity:.55; }
  100%{ opacity:0;  transform: translateY(0) scale(1.2); }
}





/*──────────────────────────────────────────────
  ALWAYS-VISIBLE HINT unter dem Bild
  HTML-Struktur: .explore-figure > (.char-image, .figure-hint)
──────────────────────────────────────────────*/
.explore-figure{
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Desktop: bündig zur Bildspalte */
  gap: .65rem;
}
.figure-hint{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .42rem .75rem;
  font-weight: 500;
  font-size: .95rem;
  line-height: 1;
  color: #000000a7;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  white-space: nowrap;
}
.figure-hint .icon{ font-size: 1rem; line-height: 1; }

/* Mobile: mittig anordnen */
@media (max-width: 900px){
  .explore-figure{ align-items: center; text-align: center; }
  .figure-hint{ justify-content: center; }
}


/* Optional: leicht sanfteres Basis-Zoom der Bilder unter dem Overlay */
#character1 .char-image:hover img,
#character2 .char-image:hover img,
#character3 .char-image:hover img{
  transform: scale(1.03);
}











/* Immer 1:1, zentriert auf Mobile, mit Größenlimit und Top-Abstand */
.char-square{
  /* Oberer „Mantel“/Abstand steuerbar: */
  margin-block-start: var(--sq-top, 0);
  margin-block-end: 0;

  /* Zentrierung optional über Modifier-Klasse (s.u.) */
  border-radius: var(--radius);
}

/* Zentriert die Figure horizontal */
.char-square--center{ margin-inline: auto; }

/* Mobile-Standard:
   - nie kleiner als 240px
   - füllt bis 92vw
   - wird aber maximal 520px breit (damit nicht „zu groß“) */
@media (max-width: 900px){
  .char-square{
    width: clamp(240px, 92vw, 520px);
      margin-top: 30px;
  }
}

/* Ab Tablet/Desktop:
   - etwas großzügiger, aber weiterhin begrenzt (max 680px) */
@media (min-width: 901px){
  .char-square{
    width: clamp(320px, 60vw, 550px);
  
  }
}

.char-square__frame{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;   /* fix 1:1 */
  overflow: hidden;
  border-radius: inherit;

}

/* Bild bleibt zentriert, füllt den Rahmen, rutscht nie nach unten */
.char-square__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;              /* vollflächig, ohne Verzerrung */
  object-position: center center; /* immer mittig – kein „nach unten“ */
  transform: none !important;     /* verhindert globale Hover-Scales */
  transition: none !important;
}














 

/* Hintergrund NUR für die Section mit Attribut (optional) */
section[data-abc-order]{
  background: var(--section-bg, transparent);
}

/* Nur am Desktop Reihenfolge tauschen – streng auf das Attribut scopen */
@media (min-width: 901px){
  /* Bild links, Text rechts aktivieren, ohne andere Stellen zu berühren */
  section[data-abc-order="reverse"] .char-text   { order: 2 !important; }
  section[data-abc-order="reverse"] .char-square { order: 1 !important; }
}


.char-button-rev {
  display: inline-block;              /* Damit Padding und Margin richtig wirken */
  font-weight: 600;
  padding: 0.5rem 1.2rem;               /* etwas mehr semantische Einheit */
  font-size: 14px;
  background-color: var(--white);
  color: var(--black);
  border-radius: 50px;
  backdrop-filter: blur(10px);
  border: 2px solid var(--white);
  cursor: pointer;                    /* Zeigt, dass es klickbar ist */
  transition: 
    background-color 0.3s ease, 
    color 0.3s ease, 
    transform 0.2s ease;              /* sanfte Hover-Animation */
}

.char-button-rev:hover {
  background-color: var(--black);
  color: var(--white);
  border: 2px solid var(--black);

}

.char-button-rev:focus {
  outline: 2px solid var(--primary);  /* sichtbarer Fokus-Rand */
  outline-offset: 2px;
}





















/* Explore-Button: immer schwarz mit weißem Text */
.explore-actions .char-explore,
.char-text .explore-actions .char-explore,
.char-explore {
  background: #000 !important;
  color: #fff !important;
  border: 3px solid #000 !important;
}
.char-explore:hover,
.char-explore:focus-visible { filter: brightness(.92); outline: none; }
.char-explore:active { transform: translateY(1px); }
.char-explore i { color: inherit; }

/* Button-Reihe sauber halten – auch auf Mobile */
.char-actions-row{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin-top: 30px;
}
.explore-actions{ display: inline-flex; align-items: center; }

/* Falls irgendwo noch ein alter Unter-Bild-Button vorhanden ist: ausblenden */
.char-media > .explore-actions { display: none !important; }

/* Falls .only-mobile / .only-desktop noch im Markup stehen: neutralisieren */
.only-mobile, .only-desktop { display: contents !important; }