.section-1 {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-align: center;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
}



/* Overlay */
.section-1::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25); /* optionaler Overlay-Ton */
  z-index: 1;
}

/* Text-Content */
.section-1 > * {
  position: relative;
  z-index: 2;
}

/* Unterer Schattenverlauf */
.section-1::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 140px;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.6));
  z-index: 3;
}






























/* =========================
   BASE
========================= */
.nb-cut{
  background:#CDD1DC;
  padding: clamp(44px, 6vw, 90px) clamp(16px, 4vw, 56px);
  color:#111;
}

#nbf{ scroll-margin-top: 120px; } /* falls Sticky Header */

.nb-cut__container{
  max-width: 1320px;
  margin: 0 auto;
}

/* =========================
   SECTION A: HEAD + CARDS
========================= */
.nb-cut__head{
  max-width: 880px;
  margin-bottom: clamp(22px, 3vw, 38px);
}

/* kein Strich mehr */
.nb-cut__head{ border-bottom: none; padding: 0; }

.nb-cut__h2{
  margin: 0 0 10px;
  font-family:"Poppins", system-ui, sans-serif;
  font-weight:700;
  font-size: clamp(30px, 2.6vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color:#1a1a1a;
}

.nb-cut__lead{
  margin: 0;
  font-family:"PoppinsRegular","Poppins",system-ui,sans-serif;
  font-weight:400;
  font-size: clamp(16px, 1.25vw, 20px);
  line-height:1.55;
  color: rgba(0,0,0,0.78);
}

.nb-cut__lead span{
  font-weight:700;
  text-decoration: underline;
  text-decoration-color:#3f001c;
  text-decoration-thickness:6px;
  text-underline-offset: 2px;
}

/* Script Sub */
.nb-cut__sub{
  margin: 0 0 clamp(16px, 2.2vw, 26px);
  font-family:"SignatureDecember","Louis George Café",sans-serif;
  font-size: clamp(26px, 3.6vw, 46px);
  text-align:center;
  color:#278e48;
}

/* Cards Grid */
.nb-cut__grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: clamp(16px, 2.2vw, 28px); /* FIX: clamp richtig herum */
  justify-items:center;
}

@media (min-width: 860px){
  .nb-cut__grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.nb-cut__card{
  width: 100%;
  max-width: 320px;
  border-radius: 18px;
  overflow:hidden;
  display:block;
  text-decoration:none;
  background: rgba(255,255,255,0.35);
  box-shadow: 0 18px 50px rgba(0,0,0,0.16);
  transition: transform .35s ease, box-shadow .35s ease;
}

.nb-cut__card:hover{
  transform: translateY(-6px);
  box-shadow: 0 28px 90px rgba(0,0,0,0.22);
}

.nb-cut__card img{
  width:100%;
  height:auto;
  display:block;
}

/* =========================
   SECTION B: 2-COL LAYOUT
========================= */
.nb-cut--cloud{
  padding-top: clamp(22px, 3.2vw, 48px); /* enger an Section A */
}

.nb-cut__layout{
  display:grid;
  grid-template-columns: 1fr;
  gap: clamp(22px, 4vw, 60px);
  align-items: start;
}

@media (min-width: 980px){
  .nb-cut__layout{
    grid-template-columns: 1.05fr 0.95fr; /* wirkt wie dein Screenshot */
  }
}

/* Text */
.nb-cut__text{
  max-width: 720px;
  font-family:"Poppins", system-ui, sans-serif;
  font-size: clamp(14px, 1.05vw, 18px);
  line-height: 1.65;
  color:#1a1a1a;
}

.nb-cut__text p{ margin: 0 0 14px; }

.nb-cut__strong{
  font-weight: 800;
  margin-top: 10px;
}

/* =========================
   COVERFLOW (dein System, nur sauberer)
========================= */
.nb-coverflow{
  position: relative;
  width: min(520px, 100%);
  height: 520px;
  margin-left: auto;
}

/* Label */
.nb-coverflow-label{
  position:absolute;
  left: 0;
  top: 0;
  transform:none;
  width: 260px;
  color:#111;
  padding: 14px 16px;
  border-radius: 16px;
  font-family:'Poppins', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.35;
  z-index: 60;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 34px rgba(0,0,0,0.16);
}

.nb-coverflow-label span{ font-weight: 900; }

/* PAIRS */
.nb-cover-pair{
  position:absolute;
  display:flex;
  gap: 12px;
  cursor:pointer;
  animation: nbFloat 10s ease-in-out infinite alternate;
  z-index: 1;
  will-change: transform;
}

.nb-cover-pair:nth-child(2){ top: 70px;  left: 200px; animation-delay: 0s; }
.nb-cover-pair:nth-child(3){ top: 165px; left: 260px; animation-delay: .7s; }
.nb-cover-pair:nth-child(4){ top: 280px; left: 160px; animation-delay: 1.4s; }
.nb-cover-pair:nth-child(5){ top: 220px; left: 10px;  animation-delay: 2.1s; }

.nb-cover-pair.nb-pair-fruct{
  top: 245px !important;
  left: 40px !important;
}

@keyframes nbFloat{
  0%   { transform: translate(-10px, -12px) rotate(-1.6deg); }
  50%  { transform: translate(8px, 4px) rotate(1deg); }
  100% { transform: translate(-6px, 10px) rotate(-0.8deg); }
}

.nb-cover-pair:hover{
  animation-play-state: paused;
  transform: scale(1.22);
  z-index: 10;
}

/* Einzelcover */
.nb-cover{
  height: 210px;
  width: auto;
  object-fit: contain;
  border-radius: 14px;
  background: #f5f5f5;
  display:block;
  box-shadow: 0 12px 32px rgba(0,0,0,0.22);
  transition: box-shadow .25s ease, filter .25s ease, transform .25s ease;
}

.nb-cover-pair:hover .nb-cover{
  box-shadow: 0 22px 60px rgba(0,0,0,0.34);
  filter: brightness(1.04);
  transform: translateY(-2px);
}

/* Mobile: Cloud etwas kompakter */
@media (max-width: 520px){
  .nb-coverflow{ height: 460px; }
  .nb-cover{ height: 180px; }
  .nb-coverflow-label{ width: 100%; position: relative; margin-bottom: 10px; }
}



/* Titel/Untertitel auf grauem BG */
.nb-showcase-title{
  font-family:'LEMONMILKBOLD', system-ui, sans-serif;
  font-size:clamp(18px, 2.4vw, 26px);
  color:#000;
  margin:0;
}

.nb-showcase-sub{
  font-family:'Avenir Next', system-ui, sans-serif;
  font-size:clamp(14px, 2vw, 17px);
  color:#000;
  opacity:.75;
  margin:0 0 6px 0;
  line-height:1.35;
}

/* Bildkarte */
.nb-showcase-card{
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  cursor:pointer;
  transition:transform .35s ease, box-shadow .35s ease;
}

/* Bild selbst – skaliert sauber mit */
.nb-showcase-card img{
  width:100%;
  height:auto;
  display:block;
}

/* Hover-Effekt */
.nb-showcase-card:hover{
  transform:scale(1.02);
  box-shadow:0 26px 70px rgba(0,0,0,.3);
}

/* Mobile: etwas softer */
@media (max-width: 700px){
  .nb-showcase{
    padding: clamp(24px, 7vw, 40px) clamp(14px,6vw,24px);
  }
  .nb-showcase-card{
    border-radius:14px;
    box-shadow:0 14px 36px rgba(0,0,0,.22);
  }
}



/* =========================
   COMING SOON – GLASS EFFECT
   ========================= */

/* Karte muss relative sein */
.nb-showcase-card--soon{
  position: relative;
  overflow: hidden;
}

/* Glass Overlay */
.nb-soon-glass{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);

  border-radius: 18px;

  opacity: 0;
  transform: scale(0.92);
  transition:
    opacity .35s cubic-bezier(.2,.9,.2,1),
    transform .35s cubic-bezier(.2,.9,.2,1);
}

/* Text im Glas */
.nb-soon-glass span{
  font-family: 'LEMONMILKBOLD', system-ui, sans-serif;
  font-size: clamp(22px, 3vw, 36px);
  letter-spacing: .18em;
  color: #ffffff;
  text-shadow: 0 8px 30px rgba(0,0,0,.35);
}

/* Hover: Glas ploppt rein */
.nb-showcase-card--soon:hover .nb-soon-glass{
  opacity: 1;
  transform: scale(1);
}

/* Optional: Hover leicht „entschärfen“ */
.nb-showcase-card--soon:hover{
  transform: scale(1.01);
}

/* Mobile: etwas weniger Blur */
@media (max-width: 700px){
  .nb-soon-glass{
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}






/* Titel/Untertitel auf grauem BG */
.nb-showcase-title{
  font-family:'LEMONMILKBOLD', system-ui, sans-serif;
  font-size:clamp(18px, 2.4vw, 26px);
  color:#000;
  margin:0;
}

.nb-showcase-sub{
  font-family:'Avenir Next', system-ui, sans-serif;
  font-size:clamp(14px, 2vw, 17px);
  color:#000;
  opacity:.75;
  margin:0 0 6px 0;
  line-height:1.35;
}

/* Bildkarte */
.nb-showcase-card{
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  cursor:pointer;
  transition:transform .35s ease, box-shadow .35s ease;
}

/* Bild selbst – skaliert sauber mit */
.nb-showcase-card img{
  width:100%;
  height:auto;
  display:block;
}

/* Hover-Effekt */
.nb-showcase-card:hover{
  transform:scale(1.02);
  box-shadow:0 26px 70px rgba(0,0,0,.3);
}

/* Mobile: etwas softer */
@media (max-width: 700px){
  .nb-showcase{
    padding: clamp(24px, 7vw, 40px) clamp(14px,6vw,24px);
  }
  .nb-showcase-card{
    border-radius:14px;
    box-shadow:0 14px 36px rgba(0,0,0,.22);
  }
}
















/* Section Hintergrund */
.nb-showcase{
  background:#CDD1DC;
  padding: clamp(40px,6vw,90px) clamp(14px,4vw,32px);
}

/* 2-Spalten-Grid */
.nb-showcase-grid{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap: clamp(18px, 3vw, 38px);
}

/* einzelne Bildkarten */
.nb-showcase-card{
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,0.25);
  cursor: pointer;
}

.nb-showcase-card img{
  width:100%;
  height:auto;
  display:block;
}

/* Mobile: Bilder untereinander */
@media(max-width:900px){
  .nb-showcase-grid{
    grid-template-columns:1fr;
  }
}





.nb-showcase-card:hover{
   transform: scale(1.02);
   transition: all 0.4s;
  }

  


  /* Wrapper pro Element */
.nb-showcase-item{
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
}

/* Titel über dem Bild */
.nb-showcase-title{
  font-family:'LEMONMILKBOLD', system-ui, sans-serif;
  font-size: clamp(18px, 2.4vw, 26px);
  color:#000;
  margin:0;
}

/* Untertitel über dem Bild */
.nb-showcase-sub{
  font-weight: 500;
  font-family:'Poppins', system-ui, sans-serif;
  font-size: clamp(14px, 2vw, 17px);
  color:#000;
  opacity:0.75;
  margin:0 0 6px 0;
  line-height:1.35;
}












/* Section */
.nb-podcast{
  background:#CDD1DC;
  padding: clamp(40px,6vw,90px) clamp(14px,4vw,32px);
}

/* Container */
.nb-podcast-inner{
  max-width:1200px;
  margin:0 auto;
  text-align:center;
}

/* Titel */
.nb-podcast-title{
  font-family:'LEMONMILKBOLD',system-ui,sans-serif;
  font-size:clamp(26px,4vw,42px);
  margin:0 0 6px;
  color:#000;
}

/* Untertitel */
.nb-podcast-sub{
  font-family:'Avenir Next',system-ui,sans-serif;
  font-size:clamp(16px,2vw,22px);
  margin:0 0 32px;
  color:#000;
  opacity:.85;
}

.nb-podcast-card{
  position:relative;
  background:transparent;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
}

/* Media */
.nb-podcast-media img{
  width:100%;
  display:block;
  height:auto;
}


.nb-podcast-soon{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(6px);
}

.nb-podcast-soon span{
  font-family:'LEMONMILKBOLD',system-ui,sans-serif;
  font-size:clamp(22px,4vw,36px);
  letter-spacing:.18em;
  color:#fff;
  opacity:.9;
}



/* BUTTON */
.nb-podcast-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top:20px;
  padding:14px 34px;
  border-radius:14px;
  background:#000;
  color:#fff;
  font-family:'Avenir Next',system-ui,sans-serif;
  font-size:clamp(15px,1.8vw,18px);
  text-decoration:none;
  transition:transform .25s ease, box-shadow .25s ease;
}

/* Icon im Button */
.nb-podcast-btn img.nb-podcast-icon{
  height:22px;
  width:auto;
  display:block;
}

/* HOVER */
.nb-podcast-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 20px rgba(0,0,0,.28);
}













/* =========================
   COMING SOON – GLASS EFFECT
   ========================= */

/* Karte muss relative sein */
.nb-showcase-card--soon{
  position: relative;
  overflow: hidden;
}

/* Glass Overlay */
.nb-soon-glass{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);

  border-radius: 18px;

  opacity: 0;
  transform: scale(0.92);
  transition:
    opacity .35s cubic-bezier(.2,.9,.2,1),
    transform .35s cubic-bezier(.2,.9,.2,1);
}

/* Text im Glas */
.nb-soon-glass span{
  font-family: 'LEMONMILKBOLD', system-ui, sans-serif;
  font-size: clamp(22px, 3vw, 36px);
  letter-spacing: .18em;
  color: #ffffff;
  text-shadow: 0 8px 30px rgba(0,0,0,.35);
}

/* Hover: Glas ploppt rein */
.nb-showcase-card--soon:hover .nb-soon-glass{
  opacity: 1;
  transform: scale(1);
}

/* Optional: Hover leicht „entschärfen“ */
.nb-showcase-card--soon:hover{
  transform: scale(1.01);
}

/* Mobile: etwas weniger Blur */
@media (max-width: 700px){
  .nb-soon-glass{
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
  }
}
















/* 🎥 Video als Vollbild-Hintergrund */
.background-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 0;
  }
  
  











/* ===== Grundlayout ===== */
.section-vts3{
  background:#CDD1DC;
  color:#fff;
  padding:clamp(24px,6vw,72px) clamp(16px,4vw,40px);
}

.vts3-sub{
  max-width: min(900px, 92vw);   /* wichtig für Mobile */
  margin: clamp(10px, 1.6vw, 6px) auto 0; /* zentriert */
  padding: 0 clamp(8px, 2vw, 16px); /* Luft auf kleinen Screens */
  margin-bottom: 20px;
  text-align: center;
  color: rgba(0,0,0,.75);

  font-family: "Poppins", system-ui, sans-serif;
  font-weight: 400;
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.55;
}


.vts3-outro{
  max-width:880px;
  margin:clamp(40px,6vw,72px) auto 0;
  text-align:center;
  color:#111;
}

.vts3-outro p{
  margin-bottom:14px;
  font:400 clamp(15px,1.4vw,18px)/1.55 "Poppins",system-ui,sans-serif;
}

.vts3-cta{
  display:inline-block;
  margin-top:18px;
  padding:.9em 1.8em;
  border-radius:999px;
  background:#111;
  color:#fff;
  font-weight:700;
  text-decoration:none;
  transition:.25s;
}

.vts3-cta:hover{
  transform:translateY(-2px);
  background:#000;
}



.vts3-head{
  display:grid;
  place-items:center;
  margin-bottom:clamp(20px,4vw,40px);
}
.vts3t{
  font:800 clamp(28px,5vw,56px)/1.05 "PoppinsLight",system-ui,sans-serif;
  text-align:center;
  margin:0;
}
.vts3t-g{ color:#b2268d; font-family: 'Poppins';}

.vts3t-s{ font-family: 'LEMONMILKBOLD'; letter-spacing: -2px;}



.nb-hoverbtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  position: relative;
  text-decoration: none;
  border-radius: 14px;
  overflow: hidden;
    box-shadow: 0 24px 45px rgba(0,0,0,.25);

}

/* Bild */
.nb-hoverbtn img{
  display: block;
  width: 100%;
  height: auto;
}


.nb-hoverbtn:hover{
  transform: translateY(-2px);
  transition: 0.2s all ease;

}




/* ===== Grid für Spalten ===== */
.nb-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(16px,2.2vw,26px);
  max-width:1400px;
  margin-inline:auto;
  /* ===== Grid enger ===== */


  

}

/* ===== Spalten ===== */
.nb-col{

  box-shadow:0 20px 48px rgba(0,0,0,.4);
   border-radius:22px;
  padding:clamp(12px,2vw,18px);
  gap:clamp(8px,1.6vw,12px)clamp(14px, 2.6vw,22px);
  display:flex;
  flex-direction:column;
  gap:clamp(10px,2vw,16px);

}
.nb-col--pink   { background:#c21e65; }
.nb-col--green  { background:#29a86b; }
.nb-col--orange { background:#d07a12; }

/* ===== Titel ===== */
.nb-col-title{
  font:700 clamp(18px,2.6vw,24px)/1.2 "PoppinsLight",system-ui,sans-serif;
  text-align:center;
  color:#fff;
  margin-bottom:4px;
}
.nb-col-btn{
  background:transparent;
  border:2px solid rgba(255,255,255,.9);
  color:#fff;
  font:700 clamp(14px,2.2vw,18px)/1 "LEMONMILKBOLD",system-ui,sans-serif;
  border-radius:999px;
  padding:.5em 1.2em;
  cursor:pointer;
  transition:.25s;
}
.nb-col-btn:hover{
  background:#fff;
  color:#111;
}

/* ===== Bilder = eigentliche Tiles ===== */
.nb-tile{
  display:block;
  position:relative;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  transition:transform .25s ease, box-shadow .25s ease;
}
.nb-tile:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 36px rgba(0,0,0,.5);
}

/* ===== Bilder selbst bestimmen die Höhe ===== */
.nb-tile img{
  display:block;
  width:100%;
  height:auto;           /* => Höhe ergibt sich aus dem Bild */
  vertical-align:middle;
  transition:opacity .35s ease, transform .35s ease;
}

/* Hover-Swap */
.nb-tile img.hover{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
}
.nb-tile:hover img.hover{ opacity:1; }
.nb-tile:hover img.front{ opacity:0; }





























/* NAV */
.nb-sidenav{
  position: fixed;
  left: clamp(10px, 1.4vw, 18px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 9999;

  display:flex;
  flex-direction:column;
  gap:10px;

  padding:10px;
  border-radius:17px;

  background: rgba(255,255,255,.35);
  border: 1px solid rgba(0,0,0,.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.nb-sidenav__item{
  --dot:#b5005d; /* fallback pro item */

  display:grid;
  grid-template-columns: 12px auto;
  align-items:center;
  gap:10px;

  text-decoration:none;
  color: rgba(0,0,0,.55);
  padding:6px 10px;
  border-radius:999px;
  transition: transform .18s ease, background .18s ease, color .18s ease;
}

.nb-sidenav__item .dot{
  width:10px;height:10px;border-radius:999px;
  background: rgba(0,0,0,.10);
  border: 1px solid rgba(0,0,0,.18);
  transition: all .18s ease;
}

.nb-sidenav__item .label{
  font-family:Poppins, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size:12px;
  letter-spacing:.2px;
  white-space:nowrap;

  opacity:0;
  max-width:0;
  overflow:hidden;
  transition: opacity .18s ease, max-width .18s ease;
}

.nb-sidenav:hover .label{
  opacity:.75;
  max-width:200px;
}

.nb-sidenav__item:hover{
  transform: translateX(2px);
  background: rgba(255,255,255,.45);
  color: rgba(0,0,0,.72);
}

/* ACTIVE */
.nb-sidenav__item.is-active{
  background: rgba(0,0,0,.06);
  color: var(--dot);
}

.nb-sidenav__item.is-active .dot{
  background: var(--dot);
  border-color: var(--dot);
  box-shadow: 0 0 0 6px rgba(0,0,0,.10); /* fallback */
  transform: scale(1.08);
}

/* Optional: wenn color-mix unterstützt, hübscher */
@supports (color: color-mix(in srgb, red 50%, white)) {
  .nb-sidenav__item.is-active .dot{
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--dot) 25%, transparent);
  }
}

@media (max-width: 900px){
  .nb-sidenav{ display:none; }
}

html{ scroll-behavior:smooth; }
section[id]{ scroll-margin-top: 90px; }















/* FORCE 2-COLUMN LAYOUT (falls andere CSS-Regeln es kaputt machen) */
.nb-foodhub-cta__layout{
  display:grid !important;
  grid-template-columns: minmax(520px, 740px) 1fr !important;
  align-items:start !important;
}

.nb-foodhub-cta__left{ grid-column: 1 !important; }
.nb-foodhub-cta__right{ grid-column: 2 !important; }


/* =========================
   GLOBALS (nur für diese Sektionen)
========================= */
.nb-recipes-cta,
.nb-foodhub-cta{
  background:#CDD1DC;
  padding: clamp(44px, 6vw, 96px) clamp(14px, 4vw, 36px);
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.nb-kicker{
  margin:0 0 10px;
  font-weight:800;
  letter-spacing:.18em;
  font-size: 12px;
  color: rgba(0,0,0,.62);
}

.nb-h2{
  margin:0 0 14px;
  font-weight:900;
  line-height:1.05;
  font-size: clamp(26px, 3.6vw, 54px);
  color:#0b0b0b;
}

.nb-accent{ color:#b2268d; }

.nb-lead{
  margin:0;
  max-width: 62ch;
  font-size: clamp(14px, 1.55vw, 18px);
  line-height:1.55;
  color: rgba(0,0,0,.72);
}

.nb-note{
  margin:0;
  font-size: 12px;
  color: rgba(0,0,0,.58);
}

/* =========================
   REZEPTE SECTION
========================= */
.nb-recipes-cta__wrap{
  width:min(1400px, 94vw);
  margin:0 auto;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(18px, 3vw, 44px);
  align-items:center;
}

.nb-recipes-cta__panel{
  border-radius: 18px;
  overflow:hidden;
  min-height: clamp(280px, 34vw, 520px);
  display:flex;
}

.nb-panelImg{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
  transform: scale(1.02);
}

.nb-ctaRow{
  margin-top: 20px;
  display:flex;
  align-items:center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Button */
.nb-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  text-decoration:none;
  font-weight:900;
  color:#0b0b0b;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.14);
  box-shadow: 0 18px 44px rgba(0,0,0,.12);
  transition: transform .22s ease, filter .22s ease, background .22s ease;
}
.nb-btn:hover{ transform: translateY(-2px); filter: brightness(1.03); }

.nb-btn__arrow{
  color:#e73092;
  transition: transform .22s ease;
}
.nb-btn:hover .nb-btn__arrow{ transform: translateX(3px); }

.nb-btn--dark{
  background: rgba(0,0,0,.86);
  border-color: rgba(255,255,255,.12);
  color:#fff;
}
.nb-btn--dark .nb-btn__arrow{ color:#e73092; }










/* =========================
   FOOD HUB SECTION (BEREINIGT)
========================= */

/* Outer (optional) */
.nb-foodhub-cta{
  background:#CDD1DC;
}

/* Layout: links Content, rechts Visuals */
.nb-foodhub-cta__layout{
  width:min(1400px, 94vw);
  margin:0 auto;
  display:grid;
  grid-template-columns: minmax(520px, 740px) 1fr;
  gap: clamp(18px, 3vw, 46px);
  align-items:start;
  padding: clamp(34px, 5vw, 70px) 0;
}

.nb-foodhub-cta__left{
  text-align:left;
}

.nb-foodhub-cta__head{
  margin-bottom: 10px;
}

/* Actions: linksbündig, kompakt */
.nb-foodhub-cta__actions{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap: 12px;
  margin-top: 14px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

/* =========================
   RIGHT VISUALS
========================= */
.nb-foodhub-cta__right{
  position: relative;
}

@media (min-width: 1100px){
  .nb-foodhub-cta__right{
    position: sticky;
    top: 24px;
    align-self: start;
  }
}







:root{
  --mac-shift-y: 160px;   /* + = runter */
  --phone-shift-y: -20px; /* - = hoch */
    --phone-shift-x: 240px; /* + = nach rechts */

}


.nb-mock{
  position: relative;
  width: min(1200px, 100%);
  margin: 0 auto;
  margin-left: 100px;
}

/* MacBook PNG */
.nb-mock__frame{
  width: 100%;
  display: block;
  position: relative;
  pointer-events: none;
}
.nb-mock__video{
  position: absolute;
  top: 15.2%;          /* minimal nach unten */
  left: 11.0%;         /* minimal nach rechts */
  width: 68.8%;        /* kleiner */
  height: 63.8%;       /* kleiner */
  object-fit: cover;
  border-radius: 8px;
  z-index: 0;
}

/* PC + Phone mock grid */
.nb-mockGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 14px;
}

.nb-mock{
  border-radius: 18px;
  overflow: hidden;
}

.nb-mock--macbook  {      min-width: clamp(520px, 40vw, 620px);
  transform: translateY(var(--mac-shift-y));
  position: relative;
  z-index: 1;
}




.nb-mock--phone{
  display:flex;
  justify-content:flex-start;
  align-items:flex-start;
  transform: 
    translateY(var(--phone-shift-y))
    translateX(var(--phone-shift-x));

  position: relative;
  z-index: 5;

}


.nb-mock__img{
  width:100%;
  height:100%;
  object-fit: cover;
  display:block;
}












.nb-phone16{
  /* Größe steuerst du hier */
  width: min(260px, 86vw);
  aspect-ratio: 9 / 19.5;

  /* iPhone-Frame */
  border-radius: 46px;
  background: black;
  box-shadow:
    0 30px 80px rgba(0,0,0,.45),
    inset 0 0 0 2px rgba(255,255,255,.06);

  position: relative;
  padding: 8px; /* Frame-Dicke */

   display:flex;
  justify-content:flex-start;
  align-items:flex-start;
  transform: 
    translateY(var(--phone-shift-y))
    translateX(var(--phone-shift-x));

  position: relative;
  z-index: 5;

}

/* Bildschirmfläche */
.nb-phone16__screen{
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 42px;
  overflow: hidden;
  background: #000000;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08);
}

/* Video füllt Screen */
.nb-phone16__video{
  width: 100%;
  height: 100%;
  object-fit: cover; /* cover = iPhone Look, contain = komplett sichtbar */
  display: block;
}










/* =========================
   FEATURES GRID — kompakt, weniger Space
========================= */
.nb-features__grid{
  width: 100%;
  margin: 8px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

/* Cards */
.protein-container,
.veg-container,
.vegan-container,
.mealprep3-container,
.fiber-container,
.fish-container,
.blitz-container{
  position: relative !important;
  top: auto !important;
  left: auto !important;

  display:flex;
  align-items:flex-start;
  gap: 14px;

  padding: 12px;
  border-radius: 16px;

  cursor:pointer;
  transition: transform .22s ease, filter .22s ease, background .22s ease;
}

.protein-container:hover,
.veg-container:hover,
.vegan-container:hover,
.mealprep3-container:hover,
.fiber-container:hover,
.fish-container:hover,
.blitz-container:hover{
  transform: translateY(-4px);
  filter: brightness(1.02);
  background: rgba(255,255,255,.56);
}

/* Icon wrappers (vereinheitlicht) */
.protein-wrapper,
.veg-wrapper,
.vegan-wrapper,
.mealprep3-wrapper,
.fiber-wrapper,
.fish-wrapper,
.blitz-wrapper{
  width: 54px !important;
  height: 54px !important;
  flex: 0 0 54px !important;
  position: relative !important;
}

/* Falls bei dir (wie im HTML) veg fälschlich protein-wrapper nutzt */
.veg-container .protein-wrapper{
  width: 54px !important;
  height: 54px !important;
  flex: 0 0 54px !important;
  position: relative !important;
}

/* Icons */
.icon{
  width: 100%;
  height: 100%;
  object-fit: contain;
  position:absolute;
  inset:0;
  transition: opacity .18s ease, transform .18s ease;
}

.icon.hover{ opacity:0; }

.protein-container:hover .icon.default,
.veg-container:hover .icon.default,
.vegan-container:hover .icon.default,
.mealprep3-container:hover .icon.default,
.fiber-container:hover .icon.default,
.fish-container:hover .icon.default,
.blitz-container:hover .icon.default{ opacity:0; }

.protein-container:hover .icon.hover,
.veg-container:hover .icon.hover,
.vegan-container:hover .icon.hover,
.mealprep3-container:hover .icon.hover,
.fiber-container:hover .icon.hover,
.fish-container:hover .icon.hover,
.blitz-container:hover .icon.hover{ opacity:1; }

/* Text */
.protein-text,
.veg-text,
.vegan-text,
.mealprep3-text,
.fiber-text,
.fish-text,
.blitz-text{
  margin:0 !important;
  font-size: clamp(12px, 1.05vw, 14px);
  line-height: 1.38;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  max-width: 52ch;
}

/* Farben */
.protein-text{ color:#DD4070; }
.veg-text{ color:#26A560; }
.vegan-text{ color:#26A560; }
.fiber-text{ color:#ac9c4d; }
.fish-text{ color:#14b0bd; }
.blitz-text{ color:#ea6a29; }
.mealprep3-text{ color:#753179; }

/* Headline spans */
.highlightproteinone-text{ font-family:'LEMONMILKBOLD', sans-serif; color:#DD4070; }
.highlightvegone-text{ font-family:'LEMONMILKBOLD', sans-serif; color:#26A560; }
.highlightveganone-text{ font-family:'LEMONMILKBOLD', sans-serif; color:#26A560; }
.highlightfiberone-text{ font-family:'LEMONMILKBOLD', sans-serif; color:#ac9c4d; }
.highlightfishone-text{ font-family:'LEMONMILKBOLD', sans-serif; color:#14b0bd; }
.highlightblitzone-text{ font-family:'LEMONMILKBOLD', sans-serif; color:#ea6a29; }
.highlightmealprep3one-text{ font-family:'LEMONMILKBOLD', sans-serif; color:#753179; }

/* Hover text colors */
.protein-container:hover .protein-text,
.protein-container:hover .highlightproteinone-text{ color:#350010; }
.veg-container:hover .veg-text,
.veg-container:hover .highlightvegone-text{ color:#003e1c; }
.vegan-container:hover .vegan-text,
.vegan-container:hover .highlightveganone-text{ color:#003e1c; }
.fiber-container:hover .fiber-text,
.fiber-container:hover .highlightfiberone-text{ color:#736000; }
.fish-container:hover .fish-text,
.fish-container:hover .highlightfishone-text{ color:#00656d; }
.blitz-container:hover .blitz-text,
.blitz-container:hover .highlightblitzone-text{ color:#af3b00; }
.mealprep3-container:hover .mealprep3-text,
.mealprep3-container:hover .highlightmealprep3one-text{ color:#400044; }

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 980px){
  .nb-foodhub-cta__layout{
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .nb-features__grid{
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .nb-foodhub-cta__right{
    position: static;
  }
}

/* Feature-Card: mehr Ruhe, nicht so "links klebend" */
.protein-container,
.veg-container,
.vegan-container,
.mealprep3-container,
.fiber-container,
.fish-container,
.blitz-container{
  padding: 14px 16px !important;
}

/* Icon minimal nach oben/zentrieren */
.protein-wrapper,
.veg-wrapper,
.vegan-wrapper,
.mealprep3-wrapper,
.fiber-wrapper,
.fish-wrapper,
.blitz-wrapper{
  margin-top: 2px !important;
}

/* Text: kein "krasser Block links", etwas weicher */
.protein-text,
.veg-text,
.vegan-text,
.mealprep3-text,
.fiber-text,
.fish-text,
.blitz-text{
  text-align: left !important;
  padding-right: 6px;
}


/* =========================
   HOVER BG = jeweilige Textfarbe
   Text = weiß
   (Override ans ENDE)
========================= */

/* Protein (pink) */
.protein-container:hover{
  background: #DD4070 !important;
}
.protein-container:hover .protein-text,
.protein-container:hover .highlightproteinone-text{
  color: #fff !important;
}

/* Veg (grün) */
.veg-container:hover{
  background: #26A560 !important;
}
.veg-container:hover .veg-text,
.veg-container:hover .highlightvegone-text{
  color: #fff !important;
}

/* Vegan (grün) */
.vegan-container:hover{
  background: #26A560 !important;
}
.vegan-container:hover .vegan-text,
.vegan-container:hover .highlightveganone-text{
  color: #fff !important;
}

/* Fiber (gold) */
.fiber-container:hover{
  background: #ac9c4d !important;
}
.fiber-container:hover .fiber-text,
.fiber-container:hover .highlightfiberone-text{
  color: #fff !important;
}

/* Fish (türkis) */
.fish-container:hover{
  background: #14b0bd !important;
}
.fish-container:hover .fish-text,
.fish-container:hover .highlightfishone-text{
  color: #fff !important;
}

/* Blitz (orange) */
.blitz-container:hover{
  background: #ea6a29 !important;
}
.blitz-container:hover .blitz-text,
.blitz-container:hover .highlightblitzone-text{
  color: #fff !important;
}

/* Mealprep3 (lila) */
.mealprep3-container:hover{
  background: #753179 !important;
}
.mealprep3-container:hover .mealprep3-text,
.mealprep3-container:hover .highlightmealprep3one-text{
  color: #fff !important;
}

/* optional: Hover etwas “sauberer” */
.protein-container:hover,
.veg-container:hover,
.vegan-container:hover,
.mealprep3-container:hover,
.fiber-container:hover,
.fish-container:hover,
.blitz-container:hover{
  filter: none !important; /* falls du das nicht willst: löschen */
}






















.last-section{
  background:#CDD1DC;
  color:#0b0b0b;
  padding: clamp(48px,6vw,80px) 0 clamp(36px,5vw,64px);
}

.footer-container{
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(16px,5vw,32px);
  display: grid;
  gap: clamp(24px,3vw,36px);
}

/* TOP-GRID: Logo – 4 Spalten – Socials */
.footer-top{
  display: grid;
  grid-template-columns: minmax(180px,220px) repeat(4, 1fr) minmax(120px,160px);
  align-items: start;
  gap: clamp(16px,3vw,40px);
}

/* Brand */
.brand-link{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  margin-top: 50px;
}





.brand-link:hover .brand-text{
letter-spacing: 4px;  transition: 0.4s all;
}


.brand-text{
  font-family:'LEMONMILKBOLD',sans-serif;
  font-size: clamp(18px,2.2vw,22px);
  color:#0b0b0b;
}




/* Hover-Bildwechsel (Logo & Socials) */
.swap{ position: relative; display:inline-flex; }
.swap img{ display:block; height:auto; }
.swap img.hover{ position:absolute; inset:0; opacity:0; transition:.25s ease; }
.swap:hover img.default{ opacity:0; }
.swap:hover img.hover{ opacity:1; transform: rotate(-360deg) scale(1.3);
  transition: 0.7s all; }

/* Logo-Bildgröße */
.brand-link img{ width:48px; height:auto }

.brand-link:hover .brand-text{
 color: #0b0b0b;
 transition: all 0.4s;
}

/* Spalten */





/* Headline */
.col h4{
  font-family:'LEMONMILKBOLD',sans-serif;
  font-size: clamp(13px,1.4vw,14px);
  letter-spacing:.02em;
  margin: 0;                 /* margin unten raus */
  padding-bottom: 12px;      /* Platz für die Unterstreichung */
  color:#0b0b0b;
  position: relative;
  display:inline-block;
  cursor: pointer;
}

/* dynamische Unterstreichung – bleibt unter den Links */
.col h4::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;                  /* liegt innerhalb des padding-bottom */
  height:6px;
  width:100%;
  color: #0b0b0b;
  background: linear-gradient(90deg,#0b0b0b,#0b0b0b);
  transform: scaleX(0);
  transform-origin:left center;
  transition: transform .35s ease;
  border-radius:3px;
  pointer-events:none;
  z-index:0;                 /* sicher unter allem */
}
.col h4:hover::after{ transform: scaleX(1);   color: #0b0b0b;
}

/* Links */
.col nav{
  margin-top: 10px;          /* Abstand zur Headline */
}
.col nav a{
  display:block;
  font-family:'Poppins',sans-serif;
  font-weight: 400;
  font-size: clamp(10px,1vw,12px);  /* ↓ kleinere Schrift */
  color:#0b0b0b;
  text-decoration:none;
  margin:.04rem 0;                  /* ↓ engerer Zeilenabstand */
  transition:color .2s;
  opacity:0.88;                     /* etwas dezenter im Look */
}

.col nav a:hover{
  color:#0b0b0b;
  opacity:1;
  font-family:'PoppinsSemiBold',sans-serif;
}


.nbf-ctax,
.nbf-ctay,
.nbf-ctaz {
  display: inline-block;
  color: #0b0b0b;
  font-weight: 700;
  font-size: 0.6rem;
  padding: 0.25rem 1.1rem;
  border-radius: 4px;
  border: 2px solid #0b0b0b;
  text-decoration: none;
  margin: 0.15rem 0;       /* engerer vertikaler Abstand */
  transition: all 0.3s ease;
}

/* einzeln abweichende Farben */
.nbf-ctax:hover {
  background: #df006f;
  transform: translateY(-2px);
  color: #0b0b0b;
}

.nbf-ctay:hover {
  background: #139143;
  transform: translateY(-2px);
  color: #0b0b0b;
}

.nbf-ctaz:hover {
  background: #af5612;
  transform: translateY(-2px);
  color: #0b0b0b;
}









/* CTA + Mail in erster Spalte */
.downlink-button{
  display:inline-block;
  text-align: center;
  margin-top:.8rem;
  padding: 4px 18px;
  font-size: clamp(9px,1.2vw,12px);
  font-family:'Poppins',sans-serif;
  font-weight: 400;
  color:#fff; background:#b7167f;
  border-radius:6px; text-decoration:none;
  transition:.25s ease;
}
.downlink-button:hover{ background:#d9299b; transform: translateY(-1px); }

.footer-mail{
  display:inline-block;
  margin-top:.8rem;
  font-family:'Avenirheavy',sans-serif;
  font-size: clamp(12px,1.2vw,14px);
  color:#d9299b; text-decoration:none;
  transition:color .2s;
}
.footer-mail:hover{ color:#fff; }

/* Socials rechts */
.socials{
  display:flex; gap:14px; justify-content:flex-end; align-items:flex-start;
}
.socials .social img{ width:28px; }

/* BOTTOM: Legal + Copyright */
.footer-bottom{
  display:flex; gap:16px; justify-content:space-between; align-items:center;
  padding-top: clamp(12px,1.8vw,18px);
}
.legal{
  display:flex; gap: clamp(12px,2vw,28px); flex-wrap:wrap;transition: all 0.8s; text-align: right;
}
.legal a{
  font-family:'LEMONMILKLIGHT',sans-serif;


  font-size: clamp(12px,1.2vw,14px);
  color:#efefefae; text-decoration:none; transition: all 0.8s;
}
.legal a:hover{ 
  color:#fff; font-family:'LEMONMILKBOLD',sans-serif;  transition: all 0.8s; text-align: right;}
.copy{
  font-family:'PoppinsRegular',sans-serif;
  font-size: clamp(12px,1.2vw,14px); color:#5d5d5d; margin:0;   transition: color 0.8s;
}

/* ── Responsive Breakpoints ───────────────────────── */
@media (max-width: 1100px){
  .footer-top{
    grid-template-columns: minmax(160px,200px) repeat(2,1fr);
    grid-auto-rows: auto;
  }
  .socials{ justify-content:flex-start; }
}

@media (max-width: 700px){
  .footer-top{
    grid-template-columns: 1fr;
  }
  .brand-link{ margin-bottom:.5rem; }
  .socials{ justify-content:flex-start; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; gap:.75rem; }
}



























.fly-in-stage{
  position:relative;
  width:100%;
  height:100%;
  perspective:1200px;
}

/* BASIS FÜR ALLE BILDER */
.fly-img{
  position:absolute;
  max-width:460px;
  border-radius: 12px;
  opacity:0;
  transform:
    translateY(60px)
    scale(.9)
    rotateX(8deg);
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.45));
  animation:
    flyIn .9s cubic-bezier(.22,.61,.36,1) forwards,
    float 6s ease-in-out infinite;
}

/* POSITIONEN (nur optisch) */
.fly-img:nth-child(1){
  top:0;
  right:0;
  animation-delay:.1s;
}
.fly-img:nth-child(2){
  top:80px;
  right:120px;
  animation-delay:.25s;
}
.fly-img:nth-child(3){
  top:160px;
  right:40px;
  animation-delay:.4s;
}

/* FLY-IN */
@keyframes flyIn{
  to{
    opacity:1;
    transform:
      translateY(0)
      scale(1)
      rotateX(0);
  }
}

/* FLOATING */
@keyframes float{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-14px); }
}



/* SECTION = weiß */
.nb-coaching-wrap{
  background:#CDD1DC;
  padding: clamp(40px, 6vw, 90px) clamp(16px, 5vw, 48px);
  overflow: visible;
}

/* SCHWARZES PANEL */
.nb-coaching-panel{
  max-width: 1400px;
  margin: 0 auto;
  background: radial-gradient(120% 120% at 20% 10%, #1a1a1a, #000);
  border-radius: 28px;
  padding: clamp(32px, 5vw, 72px);
  box-shadow: 0 40px 80px rgba(0,0,0,.35);
}

/* GRID */
.nb-coaching-grid{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 5vw, 80px);
  align-items:center;
}

/* TEXT */
.nb-eyebrow{
  color:#e73092;
  font-weight:600;
  letter-spacing:.08em;
  font-size:13px;
  margin-bottom:12px;
}

.nb-title{
  color:#fff;
  font-size:clamp(28px,4vw,44px);
  line-height:1.1;
  margin-bottom:20px;
  font-family: 'LEMONMILKBOLD';
}

.nb-claim{
  color:#ffffff;
  font-size:20px;
  font-weight:500;
  margin-bottom:24px;
    font-family: 'Poppins';

}

.nb-text{
  color:rgba(255, 255, 255, 0.75);
  max-width:520px;
  margin-bottom:14px;
      font-family: 'Poppins';

}

.nb-sub{
  color:#b3257a;
  margin-bottom:28px;
      font-family: 'Poppins';
      font-weight: 600;

}

/* BUTTON */
.nb-btn-outline{
  display:inline-block;
  padding:14px 22px;
  border:2px solid #fff;
  border-radius:12px;
  color:#fff;
  font-weight:600;
  text-decoration:none;
  transition:all .25s ease;
}

.nb-btn-outline:hover{
  background:#b3257a;
  color:#000;
}

/* VISUAL */
.nb-coaching-visual img{
  width:100%;
  max-width:520px;
  display:block;
  margin-left:auto;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.45));
}

/* RESPONSIVE */
@media (max-width: 900px){
  .nb-coaching-grid{
    grid-template-columns:1fr;
  }

  .fly-in-stage{
    margin:40px auto 0;
    opacity: 0;
  }
}














/* Global Styles */
body, html {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  background-color: #000;
  color: white;
  overflow-x: hidden; /* Verhindert horizontales Scrollen */
  margin: 0;
}


/* Section-Styles */
main {
  margin: 0;
}

@font-face {
  font-family: 'LouisGeorgeCafe';
  src: url(LouisGeorgeCafe.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
} 

@font-face {
  font-family: 'Avenirroman';
  src: url(AvenirLTStd-Roman.otf) format('truetype');
  font-weight: normal;
  font-style: normal;
} 

@font-face {
  font-family: 'Pencil';
  src: url(Pencil-Regular.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
} 

@font-face {
  font-family: 'Avenirmedium';
  src: url(AvenirLTStd-Medium.otf) format('truetype');
  font-weight: normal;
  font-style: normal;
} 

@font-face {
  font-family: 'Avenirlight';
  src: url(AvenirLTStd-Light.otf) format('truetype');
  font-weight: normal;
  font-style: normal;
} 

@font-face {
  font-family: 'Beauty';
  src: url(BeautyDemo.otf) format('truetype');
  font-weight: normal;
  font-style: normal;
} 


@font-face {
  font-family: 'Avenirheavy';
  src: url(AvenirLTStd-Heavy.otf) format('truetype');
  font-weight: normal;
  font-style: normal;
} 


@font-face {
  font-family: 'Louisgeorgecafebold';
  src: url(LouisGeorgeCafeBold.ttf) format('truetype');
  font-weight: normal;
  font-style: normal;
} 

@font-face {
  font-family: 'LEMONMILKBOLD';
  src: url(LEMONMILK-Bold.otf) format('truetype');
  font-weight: normal;
  font-style: normal;
} 

@font-face {
  font-family: 'LEMONMILKLIGHT';
  src: url(LEMONMILK-Light.otf) format('truetype');
  font-weight: normal;
  font-style: normal;
} 

@font-face {
  font-family: 'LEMONMILKLight';
  src: url(LEMONMILK-Light.otf) format('truetype');
  font-weight: normal;
  font-style: normal;
} 

@font-face {
  font-family: 'LexendBold';
  src: url(  Lexend-Bold.ttf    ) format('truetype');
  font-weight: normal;
  font-style: normal;
} 

@font-face {
  font-family: 'SignatureDecember';
  src: url(  SignatureDecember.otf    ) format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Autobiography';
  src: url(Autobiography.otf) format('truetype');
  font-weight: normal;
  font-style: normal;
}


@font-face {
  font-family: 'Lexendlight';
  src: url(  LexendLight.ttf   ) format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
font-family: 'Poppins';
src: url('Poppins-Thin.ttf') format('truetype');
font-weight: 100;
font-style: normal;
}

@font-face {
font-family: 'Poppins';
src: url('Poppins-ThinItalic.ttf') format('truetype');
font-weight: 100;
font-style: italic;
}

@font-face {
font-family: 'Poppins';
src: url('Poppins-ExtraLight.ttf') format('truetype');
font-weight: 200;
font-style: normal;
}

@font-face {
font-family: 'Poppins';
src: url('Poppins-ExtraLightItalic.ttf') format('truetype');
font-weight: 200;
font-style: italic;
}

@font-face {
font-family: 'Poppins';
src: url('Poppins-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}

@font-face {
font-family: 'Poppins';
src: url('Poppins-LightItalic.ttf') format('truetype');
font-weight: 300;
font-style: italic;
}

@font-face {
font-family: 'PoppinsRegular';
src: url('Poppins-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}

@font-face {
font-family: 'Poppins';
src: url('Poppins-Italic.ttf') format('truetype');
font-weight: 400;
font-style: italic;
}

@font-face {
font-family: 'Poppins';
src: url('Poppins-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
}

@font-face {
font-family: 'Poppins';
src: url('Poppins-MediumItalic.ttf') format('truetype');
font-weight: 500;
font-style: italic;
}

@font-face {
font-family: 'PoppinsSemiBold';
src: url('Poppins-SemiBold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}

@font-face {
font-family: 'Poppins';
src: url('Poppins-SemiBoldItalic.ttf') format('truetype');
font-weight: 600;
font-style: italic;
}

@font-face {
font-family: 'Poppins';
src: url('Poppins-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}

@font-face {
font-family: 'Poppins';
src: url('Poppins-BoldItalic.ttf') format('truetype');
font-weight: 700;
font-style: italic;
}

@font-face {
font-family: 'PoppinsExtraBold';
src: url('Poppins-ExtraBold.ttf') format('truetype');
font-weight: 800;
font-style: normal;
}

@font-face {
font-family: 'Poppins';
src: url('Poppins-ExtraBoldItalic.ttf') format('truetype');
font-weight: 800;
font-style: italic;
}

@font-face {
font-family: 'Poppins';
src: url('Poppins-Black.ttf') format('truetype');
font-weight: 900;
font-style: normal;
}

@font-face {
font-family: 'Poppins';
src: url('Poppins-BlackItalic.ttf') format('truetype');
font-weight: 900;
font-style: italic;
}















/* ====== NOTCH NAVBAR (funktioniert direkt mit deinem HTML) ====== */

/* Wrapper fixiert oben */
.site-header{
  position: fixed;
  inset: 0 0 auto 0;           /* top:0, volle Breite */
  height: 88px;                 /* Platz für die Notch */
  z-index: 1000;
  width: 100%;
  pointer-events: none;         /* nur die Notch selbst klickbar */
}

/* Die „Notch-Pill“ */
.notch-bar{
  pointer-events: auto;
  position: absolute;
  left: 50%;
  top: max(10px, env(safe-area-inset-top));  /* iOS safe-area */
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: 1fr auto 1fr;       /* links | logo | rechts */
  align-items: center;
  gap: clamp(12px, 2vw, 28px);

  background: rgba(0,0,0,.90);
  border-radius: 9999px;
  padding: 12px clamp(14px, 3vw, 28px);
  width: min(1280px, 92vw);
  box-shadow: 0 17px 34px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08) inset;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: hidden;
  isolation: isolate; /* saubere Layering */
}

/* dezente Glanzfläche */
.notch-bar::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(120% 100% at 50% -40%, rgba(255,255,255,.10), transparent 60%);
  pointer-events:none;
}

/* Linke & rechte UL */
.nav-left, .nav-right{
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 22px);
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-left{  justify-self: start; }
.nav-right{ justify-self: end; }

/* Textlinks */
.notch-bar a{
  cursor: pointer;

  color: #fff;
  text-decoration: none;
  font-family: "Poppins" , "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  opacity: .95;
  transition: opacity .25s ease, transform .25s ease, color .25s ease;
  white-space: nowrap;
}
.notch-bar a:hover{
  opacity: 1;
color: #c50062; /* dein Grün */
  font-family: "PoppinsSemiBold", "Poppins", system-ui, sans-serif; letter-spacing: 0.5px; transition: all 0.4s ease;
}

/* ZENTRIERTES LOGO inkl. Swap */
.nav-logo .NULNEBLA2-container{
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 8px;
}
.NULNEBLA2-wrapper{
  position: relative;
  width: 60px; height: 60px;
}
.NULNEBLA2-wrapper .icon{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  transition: opacity .25s ease;
}
.NULNEBLA2-wrapper .hover{ opacity: 0; }
.NULNEBLA2-container:hover .hover{ opacity: 1; }
.NULNEBLA2-container:hover .default{ opacity: 0; }

.NULNEBLA2-text{
  margin: 0;
  color: #fff;
  font-family: "LEMONMILKBOLD", system-ui, sans-serif;
  font-size: clamp(20px, 2vw, 28px);
  letter-spacing: -0.02em;
}

.NULNEBLA2-container:hover .icon {
  transform: rotate(-360deg);
  transition: transform 0.5s ease;
}



.NULNEBLA2-container:hover .NULNEBLA2-text{
  letter-spacing: 2px; transition: 0.4s all;
  font-family: "LEMONMILKBOLD", system-ui, sans-serif;
}


/* Booking-Block rechts */
.notch-booking{
  display: flex;
  flex-direction: column;     /* untereinander */
  align-items: center;        /* horizontal zentriert */
  justify-content: center;
  text-align: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 12px;
}

.booking-label{
  margin: 0;
  color: #fff;
  font: 600 13px/1.3 "PoppinsLight", system-ui, sans-serif;
  letter-spacing: 0.02em;
}

.image-hover-link{
  position: relative;
  display: inline-block;
  width: 96px; height: 36px;
}
.image-hover-link img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  transition: opacity .25s ease;
}
.image-hover-link .img-hover{ opacity: 0; }
.image-hover-link:hover .img-hover{ opacity: 1; }
.image-hover-link:hover .img-default{ opacity: 0; }

/* optional: etwas kleiner auf Mobile */
@media (max-width:720px){
  .booking-label{ font-size: 12px; }
  .image-hover-link{ width: 82px; height: 32px; }
}

/* ====== RESPONSIVE ====== */
@media (max-width: 900px){
  /* Etwas kompakter */
  .NULNEBLA2-wrapper{ width: 52px; height: 52px; }
  .NULNEBLA2-text{ font-size: clamp(18px, 2.2vw, 22px); }
}
@media (max-width: 720px){
  .site-header{ height: 76px; }
  .notch-bar{
    width: min(640px, 94vw);
    padding: 10px 14px;
    gap: 14px;
  }
  /* Menüs kürzen: je Seite nur 2 Items sichtbar */
  .nav-left li:nth-child(n+3){ display: none; }
  .nav-right li:nth-child(n+3){ display: none; } /* lässt Leistungen + Kontakt stehen */
  .NULNEBLA2-wrapper{ width: 48px; height: 48px; }
  .NULNEBLA2-text{ font-size: 18px; }
}

/* Option: leichte Einblend-Animation beim Laden (ohne JS) */
.site-header{
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity .4s ease, transform .4s ease;
}
.site-header .notch-bar{ will-change: transform, opacity; }
body:not(.no-fade) .site-header{
  opacity: 1;
  transform: translateY(0);
}




/* =========================================================
   MOBILE NAV (LOGO + MENU ICON) + DRAWER
   -> ans ENDE deiner CSS
========================================================= */

.notch-toggle, .notch-drawer{ display:none; }

/* MOBILE */
@media (max-width: 720px){

  /* Desktop-ULs auf Mobile aus */
  .nav-left, .nav-right{ display:none !important; }

  /* Header kompakter */
  .site-header{ height: 76px; }

  /* Notch als 2-Spalten-Leiste: Logo links, Toggle rechts */
  .notch-bar{
    grid-template-columns: 1fr auto;   /* logo | toggle */
    gap: 12px;
    width: min(640px, 94vw);
    padding: 10px 12px;
  }}

  /* Logo links */
  .nav-logo{
    justify-self: start;
  }
  .NULNEBLA2-wrapper{ width: 44px; height: 44px; }
  .NULNEBLA2-text{ font-size: 16px; letter-spacing: 0; }

  /* Toggle rechts */
  @media (max-width: 720px){

@media (max-width: 720px){

  .notch-toggle{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;

    width: 32px;
    height: 36px;

    background: none;
    border: none;
    cursor: pointer;
    opacity: .85;
  }

  .notch-toggle span{
    width: 4px;
    height: 4px;
    background: #fff;
    border-radius: 50%;
    transition: transform .25s ease, opacity .25s ease;
  }

  /* leichtes Feedback beim Öffnen */
  .notch-bar.is-open .notch-toggle span{
    opacity: .6;
  }

  .notch-bar.is-open .notch-toggle span:nth-child(1){
    transform: translateY(1px);
  }
  .notch-bar.is-open .notch-toggle span:nth-child(3){
    transform: translateY(-1px);
  }
}

  /* Drawer */
  .notch-drawer{
    display:block;
    grid-column: 1 / -1;
    margin-top: 10px;
    padding: 12px 6px 6px;
    border-radius: 52px;

    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: max-height .35s ease, opacity .25s ease, transform .25s ease;
  }

  .notch-bar.is-open .notch-drawer{
    max-height: 520px;
    opacity: 1;
    transform: translateY(0);

  border-radius: 12px;


  }

  .notch-drawer a{
    display:block;
    text-align:center;
    padding: 10px 10px;
    margin: 0 6px 8px;
    border-radius: 2px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);

    color:#fff;
    text-decoration:none;
    font-family:"Poppins", system-ui, sans-serif;
    font-size: 15px;
    opacity: .95;
    transition: transform .2s ease, opacity .2s ease, color .2s ease, background .2s ease;
  }

  .notch-drawer a:hover{
    opacity: 1;
    color: #c50062;
    background: rgba(255,255,255,.09);
    transform: translateY(-1px);
  }

  .notch-drawer__sep{
    height: 1px;
    margin: 10px 16px;
    background: rgba(255,255,255,.12);
  }

  .notch-drawer__booking{
    background: rgba(197,0,98,.18);
    border: 1px solid rgba(197,0,98,.35);
    font-weight: 700;
    letter-spacing: .3px;
  }
}

/* sehr kleine Phones */
@media (max-width: 400px){
  .NULNEBLA2-text{ font-size: 15px; }
  .notch-toggle{ width: 44px; }
  .notch-drawer a{ font-size: 14px; }
}


/* =====================================
   MOBILE: WENIGER KANTEN (rechteckiger)
   Desktop bleibt unberührt
===================================== */
@media (max-width: 720px){

  /* Hauptleiste */
  .notch-bar{
    border-radius: 10px;   /* vorher pill / groß */
    width: 300px;
  }

  /* Menü-Button */
  .notch-toggle{
    border-radius: 6px;
  }

  /* Drawer-Links */
  .notch-drawer a{
    border-radius: 6px;
  }

  /* Booking-Block */
  .notch-booking{
    border-radius: 6px;
  }
}



@media (max-width: 720px){

  .notch-toggle{
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;

    width: 36px;
    height: 36px;

    background: none;
    border: none;
    cursor: pointer;
    opacity: .9;
  }

  .notch-toggle span{
    width: 22px;
    height: 2px;          /* fein */
    background: #fff;
    border-radius: 1px;
    transition: transform .25s ease, opacity .25s ease;
  }

  /* dezentes Feedback beim Öffnen */
  .notch-bar.is-open .notch-toggle span{
    opacity: .6;
  }
}



.section-2 {
  box-shadow: 20px 20px 20px 70px rgba(0, 0, 0, 0.6); /* Schatten nach unten */
  z-index: 5;
  background-color: #CDD1DC;
  padding: 70px 0; /* Oben und unten Abstand */
  position: relative;
  box-shadow: 0 20px 50px 30px rgba(0, 0, 0, 0.6); /* Schatten nach unten */
  /* -------------------------------
   Box-Shadow erklärt:
   0     → Kein horizontaler Versatz (bleibt zentriert)
   20px  → Vertikaler Versatz nach unten (Schatten fällt nach unten)
   40px  → Weichzeichner-Radius (wie verschwommen der Schatten wirkt)
   -10px → Ausbreitung (negativ = kompakter)
   rgba(0, 0, 0, 0.6) → Farbe: halbtransparenter Schwarzton
-------------------------------- */
  z-index: 4; /* Damit der Schatten über dem oberen Bereich liegt */
}




.section-3 {
  background-color: #c9c9b7;
  padding: 200px 0; /* Oben und unten Abstand */
  position: relative;

}


.family-overlay {
  width: 35%;
  bottom: 5%;
  left: -2%;
  position: absolute;
  display: block;
  border-radius: 8px;
  z-index: 2; /* Damit der Schatten über dem oberen Bereich liegt */

}

.colleagues-overlay {
  width: 24%;
  bottom:-5%;
  left: 34%;
  position: absolute;
  display: block;
  border-radius: 8px;
  z-index: 2; /* Damit der Schatten über dem oberen Bereich liegt */

}

.fresherdudej-overlay {
  width: 42%;
  top:-1%;
  right: -2%;
  position: absolute;
  display: block;
  border-radius: 8px;
  z-index: 2; /* Damit der Schatten über dem oberen Bereich liegt */

}


.section-4 {
  background-color: #CDD1DC;
  padding: 200px 0; /* Oben und unten Abstand */
  position: relative;
  box-shadow: 0 -40px 30px -6px rgba(0, 0, 0, 0.6); /* Schatten nach oben */
  /* -------------------------------
   Box-Shadow erklärt:
   0     → Kein horizontaler Versatz (bleibt zentriert)
   20px  → Vertikaler Versatz nach unten (Schatten fällt nach unten)
   40px  → Weichzeichner-Radius (wie verschwommen der Schatten wirkt)
   -10px → Ausbreitung (negativ = kompakter)
   rgba(0, 0, 0, 0.6) → Farbe: halbtransparenter Schwarzton
-------------------------------- */
  z-index: 4; /* Damit der Schatten über dem oberen Bereich liegt */
  overflow: visible;

padding-bottom: 340px;
    }










.section-41 {
  background-color: #CDD1DC;
  padding: 15vh; /* Oben und unten Abstand */
  position: relative;
  /* -------------------------------
   Box-Shadow erklärt:
   0     → Kein horizontaler Versatz (bleibt zentriert)
   20px  → Vertikaler Versatz nach unten (Schatten fällt nach unten)
   40px  → Weichzeichner-Radius (wie verschwommen der Schatten wirkt)
   -10px → Ausbreitung (negativ = kompakter)
   rgba(0, 0, 0, 0.6) → Farbe: halbtransparenter Schwarzton
-------------------------------- */
  z-index: 4; /* Damit der Schatten über dem oberen Bereich liegt */
    
}















/* Swiper Container */
.nulnebla-slider {
width: min(1120px, 92vw);
margin: 0 auto;
position: relative;
height: auto;                /* WICHTIG: keine feste Höhe */
overflow: visible;           /* WICHTIG: Pfeile/Bilder dürfen „überstehen“ */
display: flex;
align-items: center;         /* vertikal zentriert */
}

/* Swiper intern: zentrieren & Auto-Höhe ermöglichen */
.nulnebla-slider .swiper-wrapper {
align-items: center;         /* vertikal ausrichten */
}
.swiper-slide {
height: auto;                /* WICHTIG: Slide passt sich Inhalt an */
display: flex;
justify-content: center;
align-items: center;
}

/* Bilder: NICHT beschneiden, Größe von dir steuerbar */
.pair img,
.single img {
max-height: 320px;   /* << HIER justierst du die Bildhöhe (z.B. 320px, 480px, 600px ...) */
width: auto;
height: auto;
object-fit: contain; /* nie abgeschnitten */
border-radius: 12px;
transition: filter .4s ease, transform .4s ease, opacity .4s ease, box-shadow .4s ease;
}



/* optional: etwas kleiner auf Mobile */
@media (max-width:920px){
.nulnebla-slider{ opacity: 0; }
  
}



/* Inaktive Slides: grau, kleiner, transparent */
.swiper-slide {
filter: grayscale(100%) saturate(0%);
opacity: .55;
transform: scale(.92);
transition: all .4s ease;
}
.swiper-slide {
display: flex;
justify-content: center;
align-items: center;  /* Inhalt steht immer mittig im Slide */
}


.swiper-slide .pair img,
.swiper-slide .single img {
filter: grayscale(100%) saturate(0%);
}

/* Aktiver Slide: farbig, größer */
.swiper-slide-active {
filter: none;
opacity: 1;
transform: scale(1);
}
.swiper-slide-active .pair img,
.swiper-slide-active .single img {
filter: none;
}

/* Nachbarn leicht betont */
.swiper-slide-prev,
.swiper-slide-next {
opacity: .75;
transform: scale(.96);
}



/* Pfeile */
.swiper-button-next,
.swiper-button-prev {
color: #b2268d;
width: 42px;
height: 42px;
border-radius: 50%;
background: #030303;
box-shadow: 0 6px 18px -10px rgba(0,0,0,.5);
}



.swiper-button-next:hover,
.swiper-button-prev:hover {
color: #0f0f0f;
background: #b2268d;
}




.swiper-button-next:after,
.swiper-button-prev:after {
font-size: 16px;
}

/* Pagination */
.swiper-pagination-bullet {
display: none
}
.swiper-pagination-bullet-active {
display: none
}

/* Responsive: Paare untereinander auf kleinen Screens */
@media (max-width: 860px) {
.pair {
  grid-template-columns: 1fr;
}
}


:root{
--cta-bg: #b2268d;        /* Button-Farbe */
--cta-bg-hover:#bd3298;   /* Hover */
--cta-corner:#111;        /* Rahmen-Ecken */
--cta-text:#fff;          /* Textfarbe */
--cta-pad-y: 12px;        /* vertikales Padding */
--cta-pad-x: 31px;        /* horizontales Padding */
--cta-radius: 4px;        /* Button-Radius */
--cta-corner-thick: 4px;  /* Liniendicke der Ecken */
--cta-corner-size: 26px;  /* Startgröße der Ecke */
--cta-gap-top: 48px;      /* Abstand zum Slide-Inhalt */
}

/* Wrapper: zentrieren */
.swiper-slide{ display:flex; flex-direction:column; align-items:center; }

/* CTA-Button */
.slide-cta{
position: relative;
margin-top: var(--cta-gap-top);
display: inline-block;
padding: var(--cta-pad-y) var(--cta-pad-x);
background: var(--cta-bg);
color: var(--cta-text);
text-decoration: none;
font-weight: 600;
font-size: clamp(12px, 1.5vw, 14px);
letter-spacing: .06em;
border-radius: var(--cta-radius);
transition: transform .2s ease, background-color .2s ease, opacity .2s ease, filter .2s ease;
z-index: 5;
will-change: transform;
font-family: 'PoppinsRegular'; 
}

/* Ecken → zu Rahmen animieren */
.slide-cta::before,
.slide-cta::after{
content:"";
position:absolute;
width: var(--cta-corner-size);
height: var(--cta-corner-size);
pointer-events:none;
border-color: var(--cta-corner);
border-width: var(--cta-corner-thick);
transition: width .35s ease, height .35s ease, top .35s ease, right .35s ease, bottom .35s ease, left .35s ease;
}

/* Start: nur Ecke oben rechts */
.slide-cta::before{
top: calc(-1 * var(--cta-corner-size) + 6px);
right: calc(-1 * var(--cta-corner-size) + 6px);
border-style: solid;
border-bottom: none;
border-left: none;
}

/* Start: nur Ecke unten links */
.slide-cta::after{
bottom: calc(-1 * var(--cta-corner-size) + 3px);
left: calc(-1 * var(--cta-corner-size) + 3px);
border-style: solid;
border-top: none;
border-right: none;
}

/* Hover: Linien fahren zu vollem Rahmen aus */
.slide-cta:hover{
background: var(--cta-bg-hover);
transform: translateY(-1px);
}
.slide-cta:hover::before{
/* oben rechts → kompletter Top/Right-Rand */
top: -6px;
right: -6px;
width: calc(100% + 3px);
height: calc(100% + 3px);
}
.slide-cta:hover::after{
/* unten links → kompletter Bottom/Left-Rand */
bottom: -6px;
left: -6px;
width: calc(100% + 3px);
height: calc(100% + 3px);
}

/* Inaktive Slides: CTA dezent */
.swiper-slide:not(.swiper-slide-active) .slide-cta{
filter: grayscale(100%) saturate(0%);
opacity: .55;
pointer-events: none;   /* nur aktiver Slide klickbar */
}

/* Mobile kompakter */
@media (max-width: 640px){
:root{
  --cta-pad-y: 14px;
  --cta-pad-x: 22px;
  --cta-corner-size: 22px;
}
}







.privat-container {
display: flex;
align-items: flex-start;
cursor: pointer;
position: relative;
margin: 2rem 0;
max-width: 40%;
top: -4%;
left: 52%;
}


/* Icon oben links */
.privat-wrapper {
position: relative;
width: 48px;   /* Größe des Icons, anpassbar */
height: 48px;
margin-right: 16px;
flex-shrink: 0;
}
.privat-wrapper .icon {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
transition: opacity .25s ease;
}
.privat-wrapper .icon.hover { opacity: 0; }
.privat-container:hover .icon.default { opacity: 0; }
.privat-container:hover .icon.hover { opacity: 1; }

/* Textblock */
.privat-content {
margin-top: -8px;
max-width: 440px;
font-family: 'Avenirlight', sans-serif;
color: #d0d0d0bc;
}

.privat-content:hover{
color: #ffffff;
}




.privat-content h3 {
font-family: 'LEMONMILKBOLD', sans-serif;
margin-bottom: 0.5rem;
}
.privat-content p { margin-bottom: 1rem; }




























.team-container {
display: flex;
align-items: flex-start;
cursor: pointer;
position: relative;
margin: 2rem 0;
max-width: 40%;
top: 27%;
left: 30%;
}

/* Icon oben links */
.team-wrapper {
position: relative;
width: 48px;   /* Größe des Icons, anpassbar */
height: 48px;
margin-right: 16px;
flex-shrink: 0;
}
.team-wrapper .icon {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
transition: opacity .25s ease;
}
.team-wrapper .icon.hover { opacity: 0; }
.team-container:hover .icon.default { opacity: 0; }
.team-container:hover .icon.hover { opacity: 1; }

/* Textblock */
.team-content {
margin-top: -8px;
max-width: 440px;
font-family: 'Avenirlight', sans-serif;
color: #d0d0d0bc;
}

.team-content:hover{
color: #ffffff;
}




.team-content h3 {
font-family: 'LEMONMILKBOLD', sans-serif;
margin-bottom: 0.5rem;
}
.team-content p { margin-bottom: 1rem; }

/* Checkliste */
.checklist {
list-style: none;
margin: 0;
padding: 0;
}
.checklist li {
position: relative;
padding-left: 28px; /* Platz fürs Icon */
margin: 10px 0;
}
.checklist li::before {
content: "";
position: absolute;
left: 0;
top: 0.2em;
width: 18px;
height: 18px;
background-image: url("home/checkedt.png");
background-size: contain;
background-repeat: no-repeat;
transition: background-image .25s ease;
}
/* Hover: alle Bullets rot */
.team-container:hover .checklist li::before {
background-image: url("home/checked-2.png");
}








.threeone-text{
  font-family:'PoppinsRegular', sans-serif;
  font-size: clamp(18px, 2.4vw, 18px);
  max-width: 700px;
  color:#0e0e0e;

  position:absolute;
  top:15%;
  left:50%;
  transform: translateX(-50%);

  line-height:1.4;
  text-align:center;
}

/* NEU: Headline-Zeile bündig */
.threeone-headline{
  display:inline-flex;
  align-items:baseline;   /* <- bündig! */
  gap: 14px;
  flex-wrap:wrap;         /* falls mobil zu eng */
  justify-content:center; /* bleibt zentriert */
}

/* optional: "bei" leicht kleiner */
.threeone-bei{
  font-family:'PoppinsRegular', sans-serif;
  font-weight:400;
  font-size: clamp(18px, 2.4vw, 22px);
  color:#0e0e0e;
  line-height:1;

  position: relative;
  top: -10px;   /* ← DAS fixiert es */
}


/* deine Styles */
.highlightthreeoneone{
  color:#4d0035;
  font-size: clamp(56px, 6vw, 100px); /* responsive statt fix 100px */
  font-family:'Beauty', sans-serif;
  font-weight:800;
  line-height:1;
}

.highlightthreeonetwo{
  color:#0f0f0f;
  font-weight:800;
  font-family:'LEMONMILKBOLD', sans-serif;
  font-size: clamp(22px, 2.6vw, 42px); /* responsive */
  line-height:1;
}

/* Feinschliff falls optisch nötig */
@media (min-width: 900px){
  .highlightthreeonetwo{
    transform: translateY(-6px);
  }
}

.highlightthreeonethree{
  color:#0e0e0e;
  font-size: clamp(18px, 2.4vw, 18px);
  font-weight:700;
  font-family:'Poppins', sans-serif;
  line-height:1.1;
}




.bfdynamicfilm1-section {
position: relative;
height: 150px; /* Start-Höhe */
width: 100%;
overflow: hidden;
transition: height 0.8s ease;
background-color: #e2e2dd;
z-index: 13;
box-shadow: 0 30px 50px -30px rgba(0, 0, 0, 0.6); /* Schatten nach unten */
}








.dynamicfilm1-section {
position: relative;
height: 100px; /* Start-Höhe */
width: 100%;
overflow: hidden;
transition: height 0.8s ease;
background-color: #5b5345;
}

.dynamicfilm1-section.grow {
height: 700px; /* Zielhöhe beim Scroll */
}

























/* =========================
   PANEL TEXT • TYPOGRAPHY
========================= */

.nbx-panelText{
  margin-top: 14px;
  max-width: 520px;
}

/* Titel */
.nbx-panelTitle{
  margin: 0 0 6px;
  font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.1;
  color: #ffffff;
}

/* Untertitel */
.nbx-panelSub1{
  margin: 0 0 12px;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.4;
  opacity: 1;
  color: #e6b2c7;
}

/* Untertitel */
.nbx-panelSub2{
  margin: 0 0 12px;
  font-family: 'Poppins', sans-serif;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.4;
  opacity: 1;
  color: #abcecf;
}



/* Fließtext */
.nbx-panelBody{
  margin: 0 0 10px;
  font-family: 'Poppins', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: #ffffff;
  opacity: 0.9;
}

/* letzter Absatz etwas ruhiger */
.nbx-panelBody:last-child{
  margin-bottom: 0;
  opacity: 0.8;
}

/* =========================
   RESPONSIVE FEINSCHLIFF
========================= */

@media (max-width: 768px){
  .nbx-panelText{
    max-width: 100%;
  }

  .nbx-panelTitle{
    font-size: 18px;
  }

  .nbx-panelSub,
  .nbx-panelBody{
    font-size: 14px;
  }
}




/* SECTION BG */
.nb-two-panels{
  background:#CDD1DC;
  padding: clamp(40px,6vw,90px) 0;
}

/* GRID: beide Karten sauber nebeneinander */
.nb-two-panels .nb-panels{
  width: min(1100px, 92vw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 32px);
  align-items: start;
}

/* 🔥 RESET deiner alten Container-Positionierung */
.nb-two-panels .team-container,
.nb-two-panels .privat-container{
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  max-width: none !important;
  margin: 0 !important;
  transform: none !important;
}

/* CARD LOOK */
.nb-two-panels .nb-panel{
  background: rgba(255,255,255,0.55);
  border-radius: 12px;
  padding: clamp(20px, 3vw, 28px);
  display: flex;
  gap: 18px;
  align-items: flex-start;
  box-shadow: 0 20px 40px rgba(0,0,0,0.12);
  transition: transform .35s ease, box-shadow .35s ease, background .35s ease;
}

.nb-two-panels .nb-panel:hover{
  transform: translateY(-6px);
  background: rgba(255,255,255,0.75);
  box-shadow: 0 28px 60px rgba(0,0,0,0.18);
}

/* ICONS (dein default/hover bleibt) */
.nb-two-panels .team-wrapper,
.nb-two-panels .privat-wrapper{
  position: relative;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
}

.nb-two-panels .icon{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity .25s ease;
}
.nb-two-panels .icon.hover{ opacity:0; }
.nb-two-panels .nb-panel:hover .icon.default{ opacity:0; }
.nb-two-panels .nb-panel:hover .icon.hover{ opacity:1; }

/* TEXT */
.nb-two-panels .team-content,
.nb-two-panels .privat-content{
  font-family: 'Avenirlight', sans-serif;
  color:#1a1a1a;
}

.nb-two-panels h3{
  font-family: 'LEMONMILKBOLD', sans-serif;
  margin: 2px 0 6px;
  line-height: 1.05;
}

.nb-two-panels p{
  margin: 0 0 12px;
  opacity: .7;
}

.nb-two-panels .checklist{
  list-style: none;
  padding: 0;
  margin: 0;
}
.nb-two-panels .checklist li{
  margin-bottom: 10px;
  line-height: 1.4;
}

/* RESPONSIVE */
@media (max-width: 820px){
  .nb-two-panels .nb-panels{
    grid-template-columns: 1fr;
  }
}













.section-5-2 {
background-color: #5b5345;
padding: 470px 0;
position: relative;
transition: background-color 0.4s ease;
z-index: 2;
box-shadow: 20px 40px 60px 60px rgba(0, 0, 0, 0.6);
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}








.hover-block {
position: absolute;
left: 4%;
top: 4%;
width: 27%;
cursor: pointer;
transition: transform 0.3s ease;

}

.media-container {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: 8px;
}

.default-media, .hover-media {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity 0.4s ease;
border-radius: 8px;
}

.hover-media {
opacity: 0;
z-index: 2;
}

.hover-block:hover .default-media {
opacity: 0;
}

.hover-block:hover .hover-media {
opacity: 1;
}

.hover-block:hover video {
fallback: true;
}

.hover-text {
margin-top: 9%;
font-family: 'LEMONMILKBOLD', sans-serif;
font-size: clamp(26px, 7vw, 32px);
color: #ffffff;
text-align: center;
transition: color 0.4s ease;
line-height: 1.2;
opacity: 0;
}

.highlight521

{
font-family: 'Avenirmedium', sans-serif;
font-size: clamp(11px, 7vw, 12px);
color: #ffffff;
opacity: 0;
}


.hover-block:hover .hover-text   {
color: #e0e0e0;
opacity: 1;

}










/* =========================================================
   SECTION: Background CDD1DC, left orange panel, right images
   ========================================================= */

.section-orange{
  background:#CDD1DC;           /* <- dein gewünschter Hintergrund */
  position:relative;
  z-index:2;
  padding: clamp(18px, 2.8vw, 34px);
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* 2-column layout */
.so-wrap{
  width:min(2000px, 94vw);
  margin:0 auto;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(18px, 2.5vw, 34px);
  align-items: stretch;
  min-height: clamp(520px, 80vh, 860px);
}

/* LEFT ORANGE PANEL */
.so-panel{
  background:#dc4806;
  border-radius:12px;
  padding: clamp(18px, 3vw, 26px);
  position:relative;
  overflow:hidden;
  box-shadow: 0 18px 60px rgba(0,0,0,.18);



}

/* Typography inside panel */
.o1txt{
  margin:0 0 6px;
  font-family:'LEMONMILKBOLD', "Poppins", sans-serif;
  font-size: clamp(26px, 3.2vw, 46px);
  color:#151515;
  line-height:1.05;
}
.o2txt{
  margin:0 0 18px;
  font-family:'LEMONMILKLIGHT', "Poppins", sans-serif;
  font-size: clamp(26px, 3.2vw, 46px);
  color:#151515;
  line-height: .95;
}

.link-o3txt{
  margin:0 0 14px;
  font-family:"Poppins";
  font-size: clamp(14px, 1.2vw, 18px);
  color: rgba(255,255,255,.85);
}
.link-o3txt-span{
  font-weight:700;
  cursor:pointer;
}
.link-o3txt-span:hover{ color:#090909; }

.o3txt{
  margin:0;
  font-family:"Poppins";   /* statt Avenir -> Poppins */
  font-size: clamp(14px, 1.15vw, 18px);
  color:#151515;
  line-height:1.35;
  max-width: 62ch;
}

.hgo3txt{
  font-family:"Poppins", sans-serif;
  font-weight:800;
}

/* CTA button (bleibt wie bei dir, nur ohne absolute Layout-Abhängigkeit) */
.seminar-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top: clamp(16px, 2.2vw, 24px);
  padding: 14px clamp(26px, 4.8vw, 56px);
  font-size: clamp(14px, 1.1vw, 18px);
  font-family: "Poppins", sans-serif;
  font-weight:700;
  color:#fff;
  background:#0f0f0f;
  border-radius:10px;
  text-decoration:none;
  overflow:hidden;
  position:relative;
  box-shadow: 0 14px 44px rgba(0,0,0,.25);
}
.seminar-button:hover{
    background:#f5f5f5;
  transform: translateY(-2px);
  transition: all 0.4s ease;
    color:#dc4806;

}


/* RIGHT: image stack (no panel background) */
.so-images{
  position:relative;
  border-radius:12px; /* nur fürs Layout-Feeling, ohne BG */
  min-height: clamp(520px, 80vh, 860px);
}

/* =========================================================
   KEEP YOUR ANIMATIONS:
   - We keep your class names + transitions.
   - Only adjust sizing/positions to be responsive.
   ========================================================= */

.g2-overlay, .g3-overlay, .g4-overlay, .g11-overlay{
  width: min(440px, 78%);
  right: clamp(6px, 2.2vw, 18px);
  position:absolute;
  display:block;
  border-radius:10px;
  opacity:0;
  transform: translateY(200px);
  transition: opacity .8s ease, transform 1.8s ease;
  box-shadow: 0px 12px 64px rgba(0,0,0,0.30);
  will-change: transform, opacity;
}

/* vertical offsets (responsive via clamp) */
.g2-overlay{ top: clamp(40px, 10vh, 120px);  z-index:2; }
.g3-overlay{ top: clamp(140px, 20vh, 250px); z-index:3; }
.g4-overlay{ top: clamp(240px, 30vh, 380px); z-index:3; }
.g11-overlay{top: clamp(340px, 40vh, 520px); z-index:3; }

/* your active triggers + delays unchanged */
.section-orange.active .g2-overlay{ opacity:1; transform: translateY(0); transition-delay: .4s; }
.section-orange.active .g3-overlay{ opacity:1; transform: translateY(0); transition-delay: .6s; }
.section-orange.active .g4-overlay{ opacity:1; transform: translateY(0); transition-delay: .8s; }
.section-orange.active .g11-overlay{opacity:1; transform: translateY(0); transition-delay: 1s; }

/* =========================================================
   RESPONSIVE: stack on mobile
   ========================================================= */
@media (max-width: 980px){
  .so-wrap{
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .so-images{
    opacity: 0;
  }
  .g2-overlay, .g3-overlay, .g4-overlay, .g11-overlay{
    width: min(520px, 92%);
    left: 50%;
    right: auto;
    transform: translate(-50%, 200px);
  }
  .section-orange.active .g2-overlay,
  .section-orange.active .g3-overlay,
  .section-orange.active .g4-overlay,
  .section-orange.active .g11-overlay{
    transform: translate(-50%, 0);
  }
}




/* === TUNING: Panel weiter nach links + breiter, Bilder größer === */

.section-orange{
  /* weniger Rand -> Panel sitzt näher links */
  padding: clamp(10px, 1.4vw, 18px);
  margin: 0;
}

.so-wrap{
  width: 100%;
  max-width: none;           /* Container nicht mehr zentrieren */
  display: grid;
  grid-template-columns: 1.35fr 0.65fr; /* ORANGE DOMINIERT */
  gap: 0;
  min-height: 100vh;
}

/* Panel wirkt “massiver” */
.so-panel{
  padding: clamp(20px, 2.6vw, 40px);


}

/* Bilder deutlich größer */
.g2-overlay, .g3-overlay, .g4-overlay, .g11-overlay{
  width: min(560px, 92%);
  right: clamp(0px, 1.2vw, 10px);
}

/* optional: noch näher an den linken Rand, wenn du wirklich “edge” willst */
@media (min-width: 981px){
  .section-orange{ padding-left: 8px; padding-right: 14px; }
}











/* =========================================================
   FIX: alte absolute Positionen killen (nur in section-orange)
   ========================================================= */

#section-orange .o1txt,
#section-orange .o2txt,
#section-orange .o3txt,
#section-orange .link-o3txt,
#section-orange .seminar-button{
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  max-width: none;
}

/* =========================================================
   LAYOUT: Orange links als Panel, Bilder rechts
   ========================================================= */

#section-orange.section-orange{
  background:#CDD1DC !important;
  padding: clamp(10px, 1.6vw, 18px) !important;
}

#section-orange .so-wrap{
  width: min(1600px, 98vw) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 1.25fr .75fr !important;
  gap: clamp(12px, 1.6vw, 20px) !important;
  min-height: clamp(560px, 88vh, 920px) !important;
  align-items: stretch !important;
}

/* Panel näher nach links + breiter */
#section-orange .so-panel{
  background:#dc4806 !important;
  border-radius: 12px !important;
  padding: clamp(22px, 2.8vw, 54px) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,.18) !important;
}

/* Typo */
#section-orange .o1txt{
  font-family:'LEMONMILKBOLD', "Poppins", sans-serif;
  font-size: clamp(30px, 3.4vw, 52px);
  line-height: 1.02;
  margin: 0 0 6px;
  color:#151515;
}
#section-orange .o2txt{
  font-family: "Poppins";
  font-size: clamp(30px, 3.4vw, 52px);
  line-height: .95;
  margin: 0 0 18px;
  color:#151515;
}
#section-orange .o3txt{
  font-family:"Poppins", sans-serif;
  font-size: clamp(14px, 1.1vw, 18px);
  line-height:1.35;
  max-width: 68ch;
  color:#151515;
}
#section-orange .link-o3txt{
  margin: 0 0 14px;
  font-size: clamp(13px, 1vw, 18px);
  color: rgba(255,255,255,.85);
}

/* Button unter Text */
#section-orange .seminar-button{
  margin-top: clamp(16px, 2.2vw, 26px) !important;
  align-self: start;
}

/* =========================================================
   BILDER: größer + weiter rechts
   ========================================================= */

#section-orange .so-images{
  position: relative !important;
  min-height: clamp(560px, 88vh, 920px) !important;
}

#section-orange .g2-overlay,
#section-orange .g3-overlay,
#section-orange .g4-overlay,
#section-orange .g11-overlay{
  width: min(640px, 92%) !important;         /* größer */
  right: clamp(0px, 1.2vw, 10px) !important; /* näher an Rand */
}

/* Mobile */
@media (max-width: 980px){
  #section-orange .so-wrap{
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  #section-orange .so-images{
    min-height: clamp(420px, 60vh, 680px) !important;
  }
}



















/* =========================================
   GLOBAL PANEL LAYOUT
   ========================================= */

   .nb-masterpanel{
    background:#CDD1DC; /* Seitenhintergrund */
    padding: clamp(40px,6vw,90px) clamp(14px,4vw,32px);
    overflow: visible;
  }
  
  /* Das große, einheitliche Premium-Panel */
  .nb-panel{
    background:#CDD1DC;
    border-radius:22px;
    padding: clamp(40px,6vw,80px);
    max-width:1240px;
    margin:0 auto;
    overflow:hidden;
    margin-bottom: clamp(160px, 8vw, 190px);
    }
    

  
  /* Gemeinsamer Container */
  .q-container{
    max-width:1300px;
    margin:0 auto clamp(48px,6vw,80px) auto;
    text-align:left;

  }
  
  /* =========================================
     HERO – QUINFINITY BEREICH
     ========================================= */
  
  .q-ho{
    font-size:clamp(28px,5vw,56px);
    line-height:0.9;
    text-transform:uppercase;
    margin:0 0 .3em;
    font-family:'LEMONMILKLIGHT';
    letter-spacing:3px;
color: #000000;

  }
  .q-strong{
    font-weight:800;
    font-family:'LEMONMILKBOLD';
  }
  
  .q-sub{
    font-size:clamp(12px,2.5vw,22px);
    font-weight:500;
    margin:0 0 2em;
    color:#000000;
    font-family:'PoppinsSemiBold';
  }
  .q-brand{
    color:#b00067;
    font-weight:800;
    font-family:'PoppinsExtraBold';
  }
  
  /* Bild */
  .q-img{
    margin-top:-0.8em;
    margin-bottom:2.4em;
  }
  .q-img img{
    width:100%;
    max-width:720px;
    height:auto;
    border-radius:16px;
    display:block;
  }
  
  /* Untertext */
  .q-line{
    font-size:clamp(15px,1.8vw,22px);
    font-weight:700;
    margin:0;
    color:#000000;
    font-family:'PoppinsSemiBold';
  }
  
  /* QUINfinity Button unten rechts */
  .quin-overlay{
    margin-top:22px;
    }
  .quin-overlay img{
    width:260px;
    max-width:50vw;
    display:block;
    transition: all 0.4s;
    
  }
  .quin-overlay img.hover{ display:none; }
  .quin-overlay:hover img.default{ display:none; }
  .quin-overlay:hover img.hover{ display:block; }
  
  /* =========================================
     BEWEGUNG – TEXTBLOCK
     ========================================= */
  
  .bewegung-inner{
    margin-top: 150px;

    max-width:1400px;
    margin:0 auto;
    color:#000000;
    text-align:left;
  }
  
  /* Bewegung – Überschrift */
  .bewegung-inner h2{
    color:#000000;
    font-family:'PoppinsSemiBold';
    font-size:clamp(31px,3.6vw,38px);
    line-height:1.15;
    margin:0 0 0.6em;
    letter-spacing:0.01em;
  }
  
  .hh2{
    text-decoration:underline;
    text-decoration-thickness:4px;
    text-decoration-color:#b00067;
;
    text-underline-offset:4px;
  }
  
  /* Paragraphen */
  .bewegung-inner p{
    font-size:clamp(16px,1.7vw,19px);
    line-height:1.55;
    margin:0 0 1.1em;
    color:#000000;
    font-family:'Poppins';
    max-width:82%;
  }
  
  /* Button */
  .bewegung-btn{
    display:inline-block;
    margin-top:1em;
    padding:14px 28px;
    border:2px solid #000000;
    border-radius:12px;
    color:#000000;
    text-decoration:none;
    font-weight:700;
    font-size:clamp(16px,1.8vw,20px);
    font-family:'PoppinsRegular';
    transition:all .28s ease;
    margin-bottom: 20px;
  }
  .bewegung-btn:hover{
    background:#ff1981;
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(255,255,255,0.18);
  }
  
  /* =========================================
     RESPONSIVE
     ========================================= */
  
  @media(max-width:900px){
    .q-container{text-align:center;}
    .q-img img{margin:0 auto;}
    .bewegung-inner p{max-width:95%;}
  }
  












.privat-block {
position: absolute;
left: 36%;
top: 4%;
width: 27%;
cursor: pointer;
transition: transform 0.3s ease;
}

.privatmedia-container {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: 8px;
}

.privatdefault-media,
.privat-media {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity 0.4s ease;
border-radius: 8px;
}

.privat-media {
opacity: 0;
z-index: 2;
}

.privat-block:hover .privatdefault-media {
opacity: 0;
}

.privat-block:hover .privat-media {
opacity: 1;
}

.privat-text {
margin-top: 9%;
font-family: 'LEMONMILKBOLD', sans-serif;
font-size: clamp(26px, 7vw, 32px);
color: #ffffff;
text-align: center;
transition: color 0.4s ease;
line-height: 1.2;
opacity: 0;
}

.highlight522

{
font-family: 'Beauty', sans-serif;
font-size: clamp(26px, 7vw, 32px);
color: #ffffff;

}


.privat-block:hover .privat-text {
color: #e0e0e0;
opacity: 1;
}



















.social-block {
position: absolute;
right: 4%;
top: 4%;
width: 27%;
cursor: pointer;
transition: transform 0.3s ease;
}

/* Container für Bild & Video */
.socialmedia-container {
position: relative;
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: 8px;
}

/* Bild- & Video-Stil */
.socialdefault-media,
.social-media {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity 0.4s ease;
border-radius: 8px;
}

/* Startzustände */
.social-media {
opacity: 0;
z-index: 2;
}
.social-block:hover .socialdefault-media {
opacity: 0;
}
.social-block:hover .social-media {
opacity: 1;
}

/* Text unterhalb */
.social-text {
margin-top: 9%;
 font-family: 'LEMONMILKBOLD', sans-serif;
font-size: clamp(26px, 7vw, 32px);
color: #ffffff;
text-align: center;
transition: color 0.4s ease;
line-height: 1.2;
opacity: 0;
}

/* Beim Hover sichtbar & orange */
.social-block:hover .social-text {
color: #e0e0e0;
opacity: 1;
}



.highlight523

{
font-family: 'Beauty', sans-serif;
font-size: clamp(26px, 7vw, 32px);
color: #ffffff;

}





/* Standard-Filter für ALLE Medien: keine */
.media-container img,
.media-container video,
.socialmedia-container img,
.socialmedia-container video,
.privatmedia-container img,
.privatmedia-container video {
filter: grayscale(0);
transition: filter 0.3s ease;
}

/* ALLE werden grau – außer dem gerade aktiven */
.section-5-2.hover-effect .media-container:not(:hover) img,
.section-5-2.hover-effect .media-container:not(:hover) video,
.section-5-2.hover-effect .socialmedia-container:not(:hover) img,
.section-5-2.hover-effect .socialmedia-container:not(:hover) video,
.section-5-2.hover-effect .privatmedia-container:not(:hover) img,
.section-5-2.hover-effect .privatmedia-container:not(:hover) video {
filter: grayscale(100%);
}






.section-7 {
  background-color: #000000;
  padding: 300px 0; /* Oben und unten Abstand */
  position: relative;
  z-index: 2; /* Damit der Schatten über dem oberen Bereich liegt */
  box-shadow: 20px 20px 20px 50px rgba(0, 0, 0, 0.6); /* Schatten nach unten */

  
}




.section-bfq {
  background-color: #221515;
  padding: 400px; /* Oben und unten Abstand */
  position: relative;
  z-index: 0; /* Damit der Schatten über dem oberen Bereich liegt */
  
}







.bfq-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 0;
}

.bfq-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 1;
}







.maßone { 

font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(47px, 3.4vw, 51px);
  max-width: 60%;
  color: transparent;
  position: absolute;
  top: 4%;
  left: 4%;
  line-height: 1;
  transition: opacity 0.8s ease, transform 0.8s ease;
transform: translateX(230px);
  opacity: 0;
        transition-delay: 0.2s; /* z. B. 1 Sekunde später */}



.section-maß.active .maßone{
  transform: translateY(0);
  color: #1b1b1b;
opacity: 1;
}




.section-maß {
position: relative;
height: 800px; /* Start-Höhe */
width: 100%;
overflow: hidden;
background: #CDD1DC;
}









.maßtwo { 

font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(27px, 3.4vw, 31px);
  max-width: 60%;
  color: transparent;
  position: absolute;
  top: 13%;
  left: 4%;
  line-height: 1;
  transition: opacity 0.8s ease, transform 0.8s ease;
transform: translateX(-430px);
  opacity: 0;
        transition-delay: 1.1s; /* z. B. 1 Sekunde später */}



.section-maß.active .maßtwo{
  transform: translateY(0);
  color: #e73092;
opacity: 1;
}




.maßtext { 

font-family: 'LexendBold', sans-serif;
  font-size: clamp(14, 3.4vw, 17px);
  max-width: 60%;
  color: transparent;
  position: absolute;
  top: 24%;
  left: 4%;
  line-height: 1;
  transition: opacity 0.8s ease, transform 0.8s ease;
transform: translateY(230px);
  opacity: 0;
        transition-delay: 1.1s; /* z. B. 1 Sekunde später */}



.section-maß.active .maßtext{
  transform: translateY(0);
  color: #e73092;
opacity: 1;
}





.maßzerotext { 

font-family: 'LexendBold', sans-serif;
  font-size: clamp(14, 3.4vw, 17px);
  max-width: 60%;
  color: transparent;
  position: absolute;
  top: 27%;
  left: 4%;
  line-height: 1;
  transition: opacity 1.8s ease, transform 0.8s ease;
transform: translateY(230px);
  opacity: 0;
        transition-delay: 1.1s; /* z. B. 1 Sekunde später */}



.section-maß.active .maßzerotext{
  transform: translateY(0);
  color: #1f1f1f;
opacity: 1;
}





.kompetenz { 

font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(22px, 3.4vw, 27px);
  max-width: 60%;
  text-align: center;
  position: absolute;
  bottom: 2%;
  cursor: pointer;
  right: 20%;
  line-height: 1;
  opacity: 1;
      color: #db7500;}


.kompetenzhg{ 

color: #141414cf;}


.kompetenz:hover{

  color: #ff8800;

}










.ernährung { 

font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(22px, 3.4vw, 27px);
  max-width: 60%;
  text-align: center;
  position: absolute;
  bottom: 2%;
  cursor: pointer;
  left: 20%;
  line-height: 1;
  opacity: 1;
      color: #ca0065;}


.ernährunghg{ 

color: #141414cf;}


.section-maß.active .ernährung:hover{

  color: #fd0083;

}





.bewegung { 

font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(22px, 3.4vw, 27px);
  max-width: 60%;
  text-align: center;
  position: absolute;
  bottom: 2%;
  cursor: pointer;
  left: 50%;
  line-height: 1;
    transform: translateX(-50%);
  opacity: 1;
      color: #00a745;

 }


.bewegunghg{ 

color: #141414cf;}



.bewegung:hover{
  color: #40c37f;

}





.section-inbetween {
  background-color: #dfdfdf;
  padding: 340px 0; /* Oben und unten Abstand */
  position: relative;
  z-index: 6; /* Damit der Schatten über dem oberen Bereich liegt */
}






.nb-about-cta{
  margin-top: 22px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.nb-about-cta__eyebrow{
  font-family:"Poppins",system-ui,sans-serif;
  font-size:11px;
  font-weight:800;
  letter-spacing:.9px;
  color:#bd3298;
}

.nb-about-cta__btn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  width: fit-content;
  padding:14px 22px;
  border-radius:999px;
  font-family:"Poppins",system-ui,sans-serif;
  font-weight:800;
  font-size:14px;
  text-decoration:none;
  color:#fff;
  background: linear-gradient(180deg,#bd3298,#9e237e);
  box-shadow: 0 18px 44px rgba(189,50,152,.35);
  transition: transform .25s ease, box-shadow .25s ease;
}

.nb-about-cta__btn span{
  transition: transform .25s ease;
}

.nb-about-cta__btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 26px 70px rgba(189,50,152,.45);
}

.nb-about-cta__btn:hover span{
  transform: translateX(4px);
}


/* =========================
   PRIME ITEM (NULNEBLA DIFFERENCE)
========================= */
.nb-expect__item--prime{
  background:#bd3298;
  border: 1px solid rgba(255,255,255,.22);
  padding: 18px 18px;
  border-radius: 18px;
  box-shadow:
    0 26px 70px rgba(189,50,152,.26),
    0 10px 30px rgba(0,0,0,.10);
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
}

/* subtiler “premium” sheen */
.nb-expect__item--prime::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(900px 240px at 18% 0%,
    rgba(255,255,255,.22),
    rgba(255,255,255,0) 55%);
  opacity: .75;
  pointer-events:none;
}

/* Hover: pink hell + klarer Kontrast */
.nb-expect__item--prime:hover{
  background:#ffffff;
 
  transform: translateY(-5px);
  box-shadow:
    0 30px 90px rgba(0,0,0,.16),
    0 18px 60px rgba(189,50,152,.18);
}

/* PRIME Typo: auf dunklem Pink weiß, auf Hover wieder dunkel */
.nb-expect__item--prime .nb-expect__text h3{
  color:#fff;
  font-size: 17px;
  letter-spacing: .2px;
}

.nb-expect__item--prime .nb-expect__text p{
  color: #fff;
}

.nb-expect__item--prime:hover .nb-expect__text h3{
  color:#bd3298;
}

.nb-expect__item--prime:hover .nb-expect__text p{
  color:#bd3298;
}

/* Icon swap bleibt, aber PRIME sorgt für smooth + klar */
.nb-expect__item--prime .nb-ico{
  border-radius: 14px;
}

.nb-expect__item--prime:hover .nb-ico{
}


.nb-expect{
  background:#CDD1DC;
  padding: clamp(46px, 6vw, 90px) clamp(14px, 4vw, 38px);
  overflow:hidden;
}

.nb-expect__wrap{ width:min(1200px, 94vw); margin:0 auto; }

.nb-expect__head{ margin-bottom: clamp(18px, 3vw, 30px); }
.nb-expect__kicker{
  font-family:"Poppins";
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:12px;
  opacity:.75;
  margin:0 0 10px;
}
.nb-expect__title{
  font-family:"LEMONMILKBOLD";
  font-size: clamp(34px, 5.2vw, 86px);
  margin:0;
  line-height:.9;
  color:#1f1f1f;
}
.nb-expect__title span{ color:#b2268d; }
.nb-expect__brand{
  font-family:"LEMONMILKBOLD";
  font-size: clamp(18px, 2.6vw, 34px);
  margin: 10px 0 0;
  color:#1f1f1f;
}

.nb-expect__grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(16px, 3vw, 34px);
  align-items:start;
}

.nb-expect__content{
  display:grid;
  gap: 14px;
}

.nb-expect__item{
  display:grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  border-radius: 16px;
  padding: 14px 14px;
  transition: transform .25s ease, border-color .25s ease;
  cursor: pointer;
}
.nb-expect__item:hover{ transform: translateY(-3px); border-color: rgba(202,0,101,.35); }

.nb-ico{ position:relative; width:56px; height:56px; }
.nb-ico img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.nb-ico .h{ opacity:0; }
.nb-expect__item:hover .nb-ico .d{ opacity:0; }
.nb-expect__item:hover .nb-ico .h{ opacity:1; }

.nb-expect__text h3{
  font-family:"LEMONMILKBOLD";
  margin:2px 0 6px;
  color:#1f1f1f;
  font-size:16px;
}
.nb-expect__text p{
  margin:0;
  font-family:"PoppinsRegular", sans-serif;
  font-size: clamp(12px, 1.35vw, 15px);
  line-height:1.45;
  color:#161616;
}

.nb-btn{
  display:inline-flex;
  margin-top:10px;
  padding:10px 16px;
  border-radius:999px;
  font-family:"Poppins",system-ui,sans-serif;
  font-weight:700;
  font-size:12px;
  text-decoration:none;
  color:#fff;
  background:#000;
  transition: transform .2s ease, background .2s ease;
}
.nb-btn:hover{ transform: translateY(-2px); background:#ca0065; }

.nb-expect__stage{
  position:relative;
  min-height: clamp(360px, 50vw, 560px);
  margin-left: 100px;
}
.nb-stage{
  position:sticky;
  top: 90px;
  height: clamp(360px, 50vw, 560px);
  border-radius: 22px;
  overflow:visible;
}

.nb-stage img{
  position:absolute;
  border-radius: 14px;
  box-shadow: 0 22px 60px rgba(0,0,0,.22);
  object-fit:cover;
}

/* Collage-Positions (safe, aber relativ) */
.nb-stage .m1{ width:78%; left:10%; top:10%; }
.nb-stage .m2{ width:56%; left:6%; top:58%; }
.nb-stage .m3{ width:36%; right:8%; top:18%; }
.nb-stage .m4{ width:28%; right:10%; top:66%; }
.nb-stage .m5{ width:86%; right:46%; top:44%; opacity:.95; }

@media (max-width: 920px){
  .nb-expect__grid{ grid-template-columns: 1fr; }
  .nb-expect__stage{ opacity: 0; }
  .nb-stage{ opacity: 0 }
}









.nb-expectSlider{
  width: 140%;
  margin: 14px 0 24px;
  background: none;
  padding: 0;
  position: relative;
    transform: translateX(-1%);
    margin-bottom: 44px;

}


.nb-expectSlider__track{
  display:grid;
  grid-template-columns: 0.6fr 1.45fr 1.45fr 1fr;
  column-gap: 1px;   /* statt 10 */
  row-gap: 0;
  align-items:start;
}



.nb-expectSlide:hover{
  transform: translateY(-6px);
}

.nb-expectSlide{
  display: flex;
  align-items: center;
  justify-content: center; /* Standard */
  height: 240px;
    transition: transform .25s ease;
  overflow: visible;

}

/* NUR das blaue */
.nb-expectSlide--left{
  justify-content: flex-start;
}

/* Bühne füllt IMMER die Zelle -> keine optische „Gap-Luft“ */
.nb-expectStage{
  display:flex;
  width:100%;
  height:100%;
  align-items:center;
  justify-content:center;

}

/* Bild bleibt unbeschnitten + manuell skalierbar */
.nb-expectStage img{
  width: auto;            /* <- raus mit 100% */
  height: auto;           /* <- raus mit 100% */
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display:block;
 
  transform: scale(var(--s,1));
  transform-origin: center center;
}

/* =========================
   MOBILE: immer nebeneinander (scroll)
========================= */
/* =========================
   RESPONSIVE: Mobile untereinander
========================= */
@media (max-width: 980px){
  .nb-expectSlider{
    width: 100%;
    transform: none;          /* kein left shift auf mobile */
  }

  .nb-expectSlider__track{
    display: grid;
    grid-template-columns: 1fr;  /* <- untereinander */
    gap: 14px;                    /* Abstand zwischen den Bildern */
  }

  .nb-expectSlide{
    height: 220px;                /* optional etwas kompakter */
  }

  /* auf mobile braucht "blue left" nicht zwingend,
     aber kannst du lassen – schadet nicht */
  .nb-expectSlide--left{
    justify-content: center;
  }
}

@media (max-width: 520px){
  .nb-expectSlide{
    height: 200px;
  }
}






/* =========================
   CTA BOOKING — NULNEBLA
========================= */
.nb-cta-booking{
  background:#CDD1DC;
  padding: clamp(40px, 6vw, 92px) clamp(14px, 4vw, 34px);
  position:relative;
  overflow:hidden;
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.nb-cta-booking__wrap{
  width:min(1400px, 94vw);
  margin:0 auto;
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(18px, 3.2vw, 46px);
  align-items:center;
}

/* LEFT */
.nb-cta-booking__eyebrow{
  margin:0 0 10px;
  font-weight:700;
  letter-spacing:.18em;
  font-size: clamp(11px, 1.2vw, 12px);
  color: rgba(0,0,0,.62);
}

.nb-cta-booking__title{
  margin:0 0 14px;
  line-height:1.06;
  font-weight:800;
  font-size: clamp(26px, 3.4vw, 46px);
  color:#0b0b0b;
}

.nb-cta-booking__accent{
  color:#b2268d; /* NULNEBLA pink */
}

.nb-cta-booking__text{
  margin:0 0 18px;
  max-width: 54ch;
  font-size: clamp(14px, 1.55vw, 18px);
  line-height:1.55;
  color: rgba(0,0,0,.72);
}

/* Button with 2 images */
.nb-cta-booking__btn{
  display:inline-flex;
  align-items:center;
  gap: 14px;
  text-decoration:none;
  border-radius: 999px;
  padding: 10px 16px 10px 10px;
  background: rgba(0,0,0,.08);
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 18px 44px rgba(0,0,0,.10);
  transition: transform .22s ease, filter .22s ease, background .22s ease;
  will-change: transform;
}

.nb-cta-booking__btn:hover{
  transform: translateY(-2px);
  filter: brightness(1.02);
  background: rgba(0,0,0,.10);
}

.nb-cta-booking__btnMedia{
  width: 52px;
  height: 52px;
  border-radius: 999px;
  overflow:hidden;
  position:relative;
  flex: 0 0 52px;
}

.nb-cta-booking__btnImg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transform: scale(1.02);
  transition: opacity .22s ease, transform .22s ease;
  opacity:1;
}

.nb-cta-booking__btnImg.is-hover{
  opacity:0;
}

.nb-cta-booking__btn:hover .nb-cta-booking__btnImg.is-default{
  opacity:0;
  transform: scale(1.06);
}
.nb-cta-booking__btn:hover .nb-cta-booking__btnImg.is-hover{
  opacity:1;
  transform: scale(1.06);
}

.nb-cta-booking__btnText{
  font-weight:800;
  color:#0b0b0b;
  letter-spacing:.2px;
  font-size: clamp(14px, 1.2vw, 16px);
  display:flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
}

.nb-cta-booking__btnArrow{
  color:#e73092;
  transition: transform .22s ease;
}
.nb-cta-booking__btn:hover .nb-cta-booking__btnArrow{
  transform: translateX(3px);
}

.nb-cta-booking__note{
  margin: 14px 0 0;
  font-size: 12px;
  color: rgba(0,0,0,.55);
  max-width: 56ch;
}

/* RIGHT: stage sticky feel */
.nb-cta-booking__right{
  position:relative;
  min-height: clamp(360px, 46vw, 620px);
  display:flex;
  align-items:center;
  justify-content:center;
}

.nb-cta-booking__stage{
  position:relative;
  width: min(520px, 100%);
  height: clamp(320px, 42vw, 560px);
  border-radius: 18px;
  /* subtiler „glow“ wie UI */
  overflow: visible;
}

/* Shots layout */
.nb-cta-booking__shot{
  position:absolute;
  width: min(520px, 100%);
  height:auto;
  display:block;

  /* Start state = fliegt rein */
  opacity:0;
  transform: translateX(80px) translateY(28px) scale(.92);
  filter: blur(4px);
  transition: opacity .75s ease, transform .85s cubic-bezier(.2,.9,.2,1), filter .85s ease;
  will-change: transform;
  pointer-events:none;
  user-select:none;
  gap: 30px;
}


.nb-shot--1 {
  width: min(420px, 100%);
 
}


/* In-view = reinfliegen */
.nb-cta-booking.is-inview .nb-shot--1{
  opacity:1; filter: blur(0);
  transform: translateX(0) translateY(0) scale(1);
  transition-delay: .05s;
}
.nb-cta-booking.is-inview .nb-shot--2{
  opacity:1; filter: blur(0);
  transform: translateX(0) translateY(0) scale(1);
  transition-delay: .16s;
}
.nb-cta-booking.is-inview .nb-shot--3{
  opacity:1; filter: blur(0);
  transform: translateX(0) translateY(0) scale(1);
  transition-delay: .27s;
}

/* Float after enter */
@keyframes nbFloatA{
  0%{ transform: translate3d(var(--x,0px), calc(var(--y,0px) + 0px), 0) }
  50%{ transform: translate3d(var(--x,0px), calc(var(--y,0px) - 10px), 0) }
  100%{ transform: translate3d(var(--x,0px), calc(var(--y,0px) + 0px), 0) }
}
@keyframes nbFloatB{
  0%{ transform: translate3d(var(--x,0px), calc(var(--y,0px) + 0px), 0) }
  50%{ transform: translate3d(var(--x,0px), calc(var(--y,0px) - 14px), 0) }
  100%{ transform: translate3d(var(--x,0px), calc(var(--y,0px) + 0px), 0) }
}

.nb-cta-booking.is-float .nb-shot--1{ animation: nbFloatB 4.8s ease-in-out infinite; }
.nb-cta-booking.is-float .nb-shot--2{ animation: nbFloatA 5.4s ease-in-out infinite; }
.nb-cta-booking.is-float .nb-shot--3{ animation: nbFloatB 6.2s ease-in-out infinite; }

/* Responsive */
@media (max-width: 980px){
  .nb-cta-booking__wrap{
    grid-template-columns: 1fr;
  }
  .nb-cta-booking__right{
    order: 2;
    min-height: clamp(300px, 70vw, 560px);
  }
  .nb-cta-booking__left{
    order: 1;
  }
  .nb-cta-booking__text{
    max-width: 62ch;
  }
  .nb-shot--2{ left: 18px; }
  .nb-shot--3{ left: 38px; }
}

@media (max-width: 520px){
  .nb-cta-booking__btnText{ white-space: normal; }
  .nb-cta-booking__btn{ width: 100%; justify-content:center; }
  .nb-cta-booking__stage{ height: 430px; }
  .nb-shot--2{ top: 112px; }
  .nb-shot--3{ top: 214px; }
}



/* =========================
   DEVICE FRAME (Video)
========================= */
.nb-cta-booking__device{
  position:absolute;
  z-index: 2;           /* zwischen shot-1 und shot-3 – kannst du ändern */
  width: min(520px, 100%);
  top: 24px;            /* Position in Stage */
  left: 22px;
  pointer-events:none;
  opacity:0;
  transform: translateX(86px) translateY(36px) scale(.92);
  filter: blur(4px);
  transition: opacity .75s ease, transform .85s cubic-bezier(.2,.9,.2,1), filter .85s ease;
}

.nb-cta-booking.is-inview .nb-cta-booking__device{
  opacity:1;
  filter: blur(0);
  transform: translateX(0) translateY(0) scale(1);
  transition-delay: .10s;
}

.nb-device__bezel{
  position:relative;
  border-radius: 12px;
  padding: 14px;
  background: black;
  box-shadow: 0 30px 90px rgba(0,0,0,.35);
  backdrop-filter: blur(10px);
}

.nb-device__camera{
  position:absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 84px;
  height: 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.45);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

.nb-device__screen{
  border-radius: 12px;
  overflow:hidden;
  background:#0b0b0b;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

.nb-device__video{
  display:block;
  width:100%;
  height:auto;
}

/* Optional: Float fürs Device */
.nb-cta-booking.is-float .nb-cta-booking__device{
  animation: nbFloatA 5.8s ease-in-out infinite;
}

/* =========================
   Größere Abstände (Shots)
   -> hier nur Positionswerte erhöhen
========================= */

/* Vorher waren die Werte enger. Jetzt deutlich mehr Offset. */
.nb-shot--1{ top: -24px; left: 0px;  z-index: 3; }
.nb-shot--2{ top: 240px; left: 70px; z-index: 1; width: min(460px, 92%); }
.nb-shot--3{ top: 410px; left: 120px; z-index: 2; width: min(420px, 86%); }

/* Wenn du NOCH mehr Abstand willst:
   - top: +40..+80 je layer
   - left: +20..+60 je layer
*/



.nb-cta-booking__stage{
  height: clamp(360px, 52vw, 680px); /* vorher 560 max */
}








.Vorteile-overlay {
  width: 70%;
  top:28%;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
  display: block;
}




.g1-overlay {
  position: absolute;
  top: 2%;    
  left: 50%;
  transform: translate(-50%);    
  width: 20%;
  max-width: 420px;
  height: auto;
  overflow: hidden;

}

/* Standardbild (sichtbar bei Start) */
.g1-overlay img.default {
  width: 100%; /* Passt sich dem Container an */
  height: auto;
  transition: opacity 0.3s ease-in-out; /* Sanfter Übergang für Opazität */
}

/* Hover-Effekt: Das Bild wird zum weißen Icon */
.g1-overlay:hover img.default {
  opacity: 0; /* Standardbild wird unsichtbar */
}

/* Weißes Icon (ersetzt das Standardbild) */
.g1-overlay img.hover {
  width: 100%; /* Passt sich dem Container an */
  height: auto; /* Behält das Seitenverhältnis bei */
  position: absolute; /* Position innerhalb des Containers */
  top: 0; /* Position oben im Container */
  left: 0; /* Position links im Container */
  opacity: 0; /* Startet unsichtbar */
  transition: opacity 0.3s ease-in-out; /* Sanfter Übergang für Opazität */
}

/* Hover-Effekt: Das weiße Bild wird sichtbar */
.g1-overlay:hover img.hover {
  opacity: 1; /* Weißes Bild wird sichtbar */
}









.g1-1-overlay {
  position: absolute;
  top: 31%;
  transform: translate(-50%);   
  left: 50%;
  width: 20%;
  max-width: 420px;
  height: auto;
  overflow: hidden;

}

/* Standardbild (sichtbar bei Start) */
.g1-1-overlay img.default {
  width: 100%; /* Passt sich dem Container an */
  height: auto;
  transition: opacity 0.3s ease-in-out; /* Sanfter Übergang für Opazität */
}

/* Hover-Effekt: Das Bild wird zum weißen Icon */
.g1-1-overlay:hover img.default {
  opacity: 0; /* Standardbild wird unsichtbar */
}

/* Weißes Icon (ersetzt das Standardbild) */
.g1-1-overlay img.hover {
  width: 100%; /* Passt sich dem Container an */
  height: auto; /* Behält das Seitenverhältnis bei */
  position: absolute; /* Position innerhalb des Containers */
  top: 0; /* Position oben im Container */
  left: 0; /* Position links im Container */
  opacity: 0; /* Startet unsichtbar */
  transition: opacity 0.3s ease-in-out; /* Sanfter Übergang für Opazität */
}

/* Hover-Effekt: Das weiße Bild wird sichtbar */
.g1-1-overlay:hover img.hover {
  opacity: 1; /* Weißes Bild wird sichtbar */
}






.g3-1-overlay {
  position: absolute;
  top: 49%;
  left: 50%;
  transform: translate(-50%);   
  width: 20%;
  max-width: 420px;
  height: auto;
  overflow: hidden;

}

/* Standardbild (sichtbar bei Start) */
.g3-1-overlay img.default {
  width: 100%; /* Passt sich dem Container an */
  height: auto;
  transition: opacity 0.3s ease-in-out; /* Sanfter Übergang für Opazität */
}

/* Hover-Effekt: Das Bild wird zum weißen Icon */
.g3-1-overlay:hover img.default {
  opacity: 0; /* Standardbild wird unsichtbar */
}

/* Weißes Icon (ersetzt das Standardbild) */
.g3-1-overlay img.hover {
  width: 100%; /* Passt sich dem Container an */
  height: auto; /* Behält das Seitenverhältnis bei */
  position: absolute; /* Position innerhalb des Containers */
  top: 0; /* Position oben im Container */
  left: 0; /* Position links im Container */
  opacity: 0; /* Startet unsichtbar */
  transition: opacity 0.3s ease-in-out; /* Sanfter Übergang für Opazität */
}

/* Hover-Effekt: Das weiße Bild wird sichtbar */
.g3-1-overlay:hover img.hover {
  opacity: 1; /* Weißes Bild wird sichtbar */
}



.r1-1-overlay {
  position: absolute;
  top: 2%;    
  left: 18.5%;
  width: 20%;
  max-width: 420px;
  height: auto;
  overflow: hidden;

}

/* Standardbild (sichtbar bei Start) */
.r1-1-overlay img.default {
  width: 100%; /* Passt sich dem Container an */
  height: auto;
  transition: opacity 0.3s ease-in-out; /* Sanfter Übergang für Opazität */
}

/* Hover-Effekt: Das Bild wird zum weißen Icon */
.r1-1-overlay:hover img.default {
  opacity: 0; /* Standardbild wird unsichtbar */
}

/* Weißes Icon (ersetzt das Standardbild) */
.r1-1-overlay img.hover {
  width: 100%; /* Passt sich dem Container an */
  height: auto; /* Behält das Seitenverhältnis bei */
  position: absolute; /* Position innerhalb des Containers */
  top: 0; /* Position oben im Container */
  left: 0; /* Position links im Container */
  opacity: 0; /* Startet unsichtbar */
  transition: opacity 0.3s ease-in-out; /* Sanfter Übergang für Opazität */
}

/* Hover-Effekt: Das weiße Bild wird sichtbar */
.r1-1-overlay:hover img.hover {
  opacity: 1; /* Weißes Bild wird sichtbar */
}






.r2-1-overlay {
  position: absolute;
  top: 31%;
  left: 18.5%;
  width: 20%;
  max-width: 420px;
  height: auto;
  overflow: hidden;

}

/* Standardbild (sichtbar bei Start) */
.r2-1-overlay img.default {
  width: 100%; /* Passt sich dem Container an */
  height: auto;
  transition: opacity 0.3s ease-in-out; /* Sanfter Übergang für Opazität */
}

/* Hover-Effekt: Das Bild wird zum weißen Icon */
.r2-1-overlay:hover img.default {
  opacity: 0; /* Standardbild wird unsichtbar */
}

/* Weißes Icon (ersetzt das Standardbild) */
.r2-1-overlay img.hover {
  width: 100%; /* Passt sich dem Container an */
  height: auto; /* Behält das Seitenverhältnis bei */
  position: absolute; /* Position innerhalb des Containers */
  top: 0; /* Position oben im Container */
  left: 0; /* Position links im Container */
  opacity: 0; /* Startet unsichtbar */
  transition: opacity 0.3s ease-in-out; /* Sanfter Übergang für Opazität */
}

/* Hover-Effekt: Das weiße Bild wird sichtbar */
.r2-1-overlay:hover img.hover {
  opacity: 1; /* Weißes Bild wird sichtbar */
}




.r3-1-overlay {
  position: absolute;
  top: 31%;
  left: 18.5%;
  width: 20%;
  max-width: 420px;
  height: auto;
  overflow: hidden;

}

/* Standardbild (sichtbar bei Start) */
.r3-1-overlay img.default {
  width: 100%; /* Passt sich dem Container an */
  height: auto;
  transition: opacity 0.3s ease-in-out; /* Sanfter Übergang für Opazität */
}

/* Hover-Effekt: Das Bild wird zum weißen Icon */
.r3-1-overlay:hover img.default {
  opacity: 0; /* Standardbild wird unsichtbar */
}

/* Weißes Icon (ersetzt das Standardbild) */
.r3-1-overlay img.hover {
  width: 100%; /* Passt sich dem Container an */
  height: auto; /* Behält das Seitenverhältnis bei */
  position: absolute; /* Position innerhalb des Containers */
  top: 0; /* Position oben im Container */
  left: 0; /* Position links im Container */
  opacity: 0; /* Startet unsichtbar */
  transition: opacity 0.3s ease-in-out; /* Sanfter Übergang für Opazität */
}

/* Hover-Effekt: Das weiße Bild wird sichtbar */
.r3-1-overlay:hover img.hover {
  opacity: 1; /* Weißes Bild wird sichtbar */
}






.r4-1-overlay {
  position: absolute;
  top: 44%;
  left: 18.5%;
  width: 20%;
  max-width: 420px;
  height: auto;
  overflow: hidden;

}

/* Standardbild (sichtbar bei Start) */
.r4-1-overlay img.default {
  width: 100%; /* Passt sich dem Container an */
  height: auto;
  transition: opacity 0.3s ease-in-out; /* Sanfter Übergang für Opazität */
}

/* Hover-Effekt: Das Bild wird zum weißen Icon */
.r4-1-overlay:hover img.default {
  opacity: 0; /* Standardbild wird unsichtbar */
}

/* Weißes Icon (ersetzt das Standardbild) */
.r4-1-overlay img.hover {
  width: 100%; /* Passt sich dem Container an */
  height: auto; /* Behält das Seitenverhältnis bei */
  position: absolute; /* Position innerhalb des Containers */
  top: 0; /* Position oben im Container */
  left: 0; /* Position links im Container */
  opacity: 0; /* Startet unsichtbar */
  transition: opacity 0.3s ease-in-out; /* Sanfter Übergang für Opazität */
}

/* Hover-Effekt: Das weiße Bild wird sichtbar */
.r4-1-overlay:hover img.hover {
  opacity: 1; /* Weißes Bild wird sichtbar */
}







.o1-1-overlay {
  position: absolute;
  top: 2%;    
  right: 18.5%;
  width: 20%;
  max-width: 420px;
  height: auto;
  overflow: hidden;

}

/* Standardbild (sichtbar bei Start) */
.o1-1-overlay img.default {
  width: 100%; /* Passt sich dem Container an */
  height: auto;
  transition: opacity 0.3s ease-in-out; /* Sanfter Übergang für Opazität */
}

/* Hover-Effekt: Das Bild wird zum weißen Icon */
.o1-1-overlay:hover img.default {
  opacity: 0; /* Standardbild wird unsichtbar */
}

/* Weißes Icon (ersetzt das Standardbild) */
.o1-1-overlay img.hover {
  width: 100%; /* Passt sich dem Container an */
  height: auto; /* Behält das Seitenverhältnis bei */
  position: absolute; /* Position innerhalb des Containers */
  top: 0; /* Position oben im Container */
  left: 0; /* Position links im Container */
  opacity: 0; /* Startet unsichtbar */
  transition: opacity 0.3s ease-in-out; /* Sanfter Übergang für Opazität */
}

/* Hover-Effekt: Das weiße Bild wird sichtbar */
.o1-1-overlay:hover img.hover {
  opacity: 1; /* Weißes Bild wird sichtbar */
}






.o2-1-overlay {
  position: absolute;
  top: 24%;
  right: 18.5%;
  width: 20%;
  max-width: 420px;
  height: auto;
  overflow: hidden;

}

/* Standardbild (sichtbar bei Start) */
.o2-1-overlay img.default {
  width: 100%; /* Passt sich dem Container an */
  height: auto;
  transition: opacity 0.3s ease-in-out; /* Sanfter Übergang für Opazität */
}

/* Hover-Effekt: Das Bild wird zum weißen Icon */
.o2-1-overlay:hover img.default {
  opacity: 0; /* Standardbild wird unsichtbar */
}

/* Weißes Icon (ersetzt das Standardbild) */
.o2-1-overlay img.hover {
  width: 100%; /* Passt sich dem Container an */
  height: auto; /* Behält das Seitenverhältnis bei */
  position: absolute; /* Position innerhalb des Containers */
  top: 0; /* Position oben im Container */
  left: 0; /* Position links im Container */
  opacity: 0; /* Startet unsichtbar */
  transition: opacity 0.3s ease-in-out; /* Sanfter Übergang für Opazität */
}

/* Hover-Effekt: Das weiße Bild wird sichtbar */
.o2-1-overlay:hover img.hover {
  opacity: 1; /* Weißes Bild wird sichtbar */
}






.o3-1-overlay {
  position: absolute;
  top: 34%;
  right: 18.5%;
  width: 20%;
  max-width: 420px;
  height: auto;
  overflow: hidden;

}

/* Standardbild (sichtbar bei Start) */
.o3-1-overlay img.default {
  width: 100%; /* Passt sich dem Container an */
  height: auto;
  transition: opacity 0.3s ease-in-out; /* Sanfter Übergang für Opazität */
}

/* Hover-Effekt: Das Bild wird zum weißen Icon */
.o3-1-overlay:hover img.default {
  opacity: 0; /* Standardbild wird unsichtbar */
}

/* Weißes Icon (ersetzt das Standardbild) */
.o3-1-overlay img.hover {
  width: 100%; /* Passt sich dem Container an */
  height: auto; /* Behält das Seitenverhältnis bei */
  position: absolute; /* Position innerhalb des Containers */
  top: 0; /* Position oben im Container */
  left: 0; /* Position links im Container */
  opacity: 0; /* Startet unsichtbar */
  transition: opacity 0.3s ease-in-out; /* Sanfter Übergang für Opazität */
}

/* Hover-Effekt: Das weiße Bild wird sichtbar */
.o3-1-overlay:hover img.hover {
  opacity: 1; /* Weißes Bild wird sichtbar */
}







.o4-1-overlay {
  position: absolute;
    top: 45%;
  right: 18.5%;
  width: 20%;
  max-width: 420px;
  height: auto;
  overflow: hidden;

}

/* Standardbild (sichtbar bei Start) */
.o4-1-overlay img.default {
  width: 100%; /* Passt sich dem Container an */
  height: auto;
  transition: opacity 0.3s ease-in-out; /* Sanfter Übergang für Opazität */
}

/* Hover-Effekt: Das Bild wird zum weißen Icon */
.o4-1-overlay:hover img.default {
  opacity: 0; /* Standardbild wird unsichtbar */
}

/* Weißes Icon (ersetzt das Standardbild) */
.o4-1-overlay img.hover {
  width: 100%; /* Passt sich dem Container an */
  height: auto; /* Behält das Seitenverhältnis bei */
  position: absolute; /* Position innerhalb des Containers */
  top: 0; /* Position oben im Container */
  left: 0; /* Position links im Container */
  opacity: 0; /* Startet unsichtbar */
  transition: opacity 0.3s ease-in-out; /* Sanfter Übergang für Opazität */
}

/* Hover-Effekt: Das weiße Bild wird sichtbar */
.o4-1-overlay:hover img.hover {
  opacity: 1; /* Weißes Bild wird sichtbar */
}


.o5-1-overlay {
  position: absolute;
   top: 56%;
  right: 18.5%;
  width: 20%;
  max-width: 420px;
  height: auto;
  overflow: hidden;

}

/* Standardbild (sichtbar bei Start) */
.o5-1-overlay img.default {
  width: 100%; /* Passt sich dem Container an */
  height: auto;
  transition: opacity 0.3s ease-in-out; /* Sanfter Übergang für Opazität */
}

/* Hover-Effekt: Das Bild wird zum weißen Icon */
.o5-1-overlay:hover img.default {
  opacity: 0; /* Standardbild wird unsichtbar */
}

/* Weißes Icon (ersetzt das Standardbild) */
.o5-1-overlay img.hover {
  width: 100%; /* Passt sich dem Container an */
  height: auto; /* Behält das Seitenverhältnis bei */
  position: absolute; /* Position innerhalb des Containers */
  top: 0; /* Position oben im Container */
  left: 0; /* Position links im Container */
  opacity: 0; /* Startet unsichtbar */
  transition: opacity 0.3s ease-in-out; /* Sanfter Übergang für Opazität */
}

/* Hover-Effekt: Das weiße Bild wird sichtbar */
.o5-1-overlay:hover img.hover {
  opacity: 1; /* Weißes Bild wird sichtbar */
}









.rectangle0 {
position: absolute;
top: 68%;
left: 18.5%;
width: 1153px;
height: 64px;
background-color: #cbcbcb;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 0 20px;
}

.rectangle0:hover { 
background-color: #474747;
}

.rect-text0 {
font-family: 'LouisGeorgeCafe', sans-serif;
font-size: clamp(12px, 1.7vw, 13px);
color: #474747;
margin: 0;
text-align: left;
}

.hgrect-text0 {
font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(17px, 2.7vw, 18px);

color: #474747;
}

.rectangle0:hover .rect-text0 { 
color: #ffffff;
}


.rectangle0:hover .hgrect-text0 { 
color: #ffffff;
}








.section-inbetween3 {
  background-color: #CDD1DC;
  padding: 20vh; /* Oben und unten Abstand */
  position: relative;
  z-index: 6; /* Damit der Schatten über dem oberen Bereich liegt */
overflow: hidden;  }












.hover55-card {
text-decoration: none;
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
transition: transform 0.3s ease;
position: absolute;
left: 40%;
object-position: center;

}

.default-img, .hover-img,
.default-imgx, .hover-imgx {
width: 110px;
height: auto;
border-radius: 8px;
transition: opacity 0.3s ease;
}

/* Hover-Verhalten */
.hover-img, .hover-imgx {
position: absolute;
opacity: 0;
z-index: 2;
}

/* Neue Container für Paarweise Gruppierung */
.mailto-container {
display: flex;
align-items: center;   /* vertikal mittig mit dem Text */
gap: 20px;             /* Abstand zwischen Icons */
justify-content: flex-start; /* Alles nach links */
}

.mailto-container > div {
position: relative;
width: 110px;
height: auto;
}

/* Gruppiere jeweils Bildpaare */
.mailto-container > div img {
position: absolute;
top: 0;
left: 0;
}

.hover55-card:hover .default-img,
.hover55-card:hover .default-imgx {
opacity: 0;
}

.hover55-card:hover .hover-img,
.hover55-card:hover .hover-imgx {
opacity: 1;
}



.mailto-container img {
width: 100%;
height: auto;
position: absolute;
top: 0;
left: 0;
transition: opacity 0.3s ease;
border-radius: 8px;
}

.hover-img {
opacity: 0;
z-index: 2;
}

.hover55-card:hover .default-img {
opacity: 0;
}
.hover55-card:hover .hover-img {
opacity: 1;
}

.mailtext {
font-family: 'PoppinsRegular', sans-serif;
font-size: clamp(11px, 2vw, 13px);
color: #070707;
margin-top: 140px;
text-align: center;
transition: color 0.3s ease;
}

.hover55-card:hover .mailtext {
color: #090909;
}

.hgmailtext {
font-family: 'PoppinsSemiBold', sans-serif;
font-size: clamp(17px, 2vw, 19px);
color: #080808;
transition: color 0.3s ease;
}

.hgmailtext2 {
font-family: 'PoppinsExtraBold';

}

.hover55-card:hover .hgmailtext {
color: #c8158c;
}

.hover55-card:hover .hgmailtext2 {
font-size: clamp(11px, 2vw, 13px);
color: #070707;
margin-top: 140px;
text-align: center;
transition: color 0.3s ease;
}

.hover55-card:hover .hgmailtext2:hover {
font-size: clamp(11px, 2vw, 13px);
color: #ff27b7;
margin-top: 140px;
text-align: center;
transition: color 0.3s ease;
}




.hgmailtextb {
font-family: 'LexendBold', sans-serif;
text-decoration: underline;
transition: color 0.3s ease;
}

.hover55-card:hover .hgmailtextb {
color: #c8158c;

}


.link1-span {
color: #f0f0f0;
cursor: pointer;
transition: color 0.3s ease, background-color 0.3s ease;
background-color: transparent;
padding: 2px 4px;
border-radius: 4px;
}

.link1-span:hover {
  color: #6a0049;


}













.inbetweentitle-text {
  font-family: 'SignatureDecember', sans-serif;
  font-size: clamp(40px, 5vw, 48px);
  color: #f8f8f8;
  position: absolute;
  top: 5%;
  left: 50%;
  line-height: 0.9;
  transform: translateX(-50%);
}

.inbetweentitlescnd-text {
  font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(18px, 1.8vw, 23px);
  max-width: 700px;
  color: #f8f8f8;
  position: absolute;
  top: 11%;
  left: 50%;
  line-height: 0.9;
  transform: translateX(-50%);
}

.inbetweenone-text {
  font-family: 'Avenirlight', sans-serif;
  font-size: clamp(18px, 2.4vw, 18px);
  max-width: 1000px;
  color: #f8f8f8;
  position: absolute;
  top: 17%;
  left: 4%;
  line-height: 1.4;
  z-index: 0;

}

.highlightinbetweenone {
  color: #1a1a1a;
  font-weight: bold;
  font-family: 'Avenirmedium', sans-serif;
  line-height: 1.0;
  z-index: 0;
}



.inbetweenquin-text {
position: absolute;
top: 34%;
left: 4%;
font-family: 'Avenirlight', sans-serif;
font-size: clamp(18px, 2.4vw, 18px);
max-width: 1000px;
color: #1a1a1a;
line-height: 1.4;
max-width: 60%;
transform: translateY(430px);
  opacity: 0;
      transition: opacity 1.8s ease, transform 0.8s ease;

        transition-delay: 1.1s; /* z. B. 1 Sekunde später */}



.section-maß.active .inbetweenquin-text{
  transform: translateY(0);
  color: #1a1a1a;
opacity: 1;
}


.gradient-word {
color: #e73092;
}

.gradient-word .part1 {
font-family: 'LEMONMILKBOLD', sans-serif;
font-weight: bold;
}

.gradient-word .part2 {
font-family: 'LexendBold', sans-serif;
font-weight: bold;
}

.highlightinbetweenquib {
color: #f8f8f8;
font-weight: bold;
font-family: 'Avenirhheavy', sans-serif;
line-height: 1.0;
z-index: 0;
}




.sixonesubtext-text {
position: absolute;
top: 44%;
left: 22%;
font-size: clamp(16px, 1.4vw, 18px);
font-family: 'Avenirlight', sans-serif;
color: #030303;
line-height: 1.0;
max-width: 200px;
transform: translateY(430px);
  opacity: 0;
      transition: opacity 1.8s ease, transform 0.8s ease;

        transition-delay: 1.1s; /* z. B. 1 Sekunde später */}



.section-maß.active .sixonesubtext-text{
  transform: translateY(0);
opacity: 1;
}

/* Stil für „Quinfinity“ */
.highlight2 {
color: #e73092;
font-weight: bold;
font-family: 'Avenirhheavy', sans-serif;
}




.sixtwosubtext-text {
position: absolute;
top: 44%;
left: 4%;
font-size: clamp(16px, 1.4vw, 18px);
font-family: 'Avenirlight', sans-serif;
color: #030303;
line-height: 1.0;
max-width: 200px;
opacity: 0;
      transition: opacity 1.8s ease, transform 0.8s ease;
transform: translateY(430px);

        transition-delay: 1.1s; /* z. B. 1 Sekunde später */}



.section-maß.active .sixtwosubtext-text{
  transform: translateY(0);
opacity: 1;
}

/* Stil für „Quinfinity“ */
.highlight3 {
color: #e73092;
font-weight: bold;
font-family: 'Avenirhheavy', sans-serif;
}




.sixthreesubtext-text {
position: absolute;
top: 44%;
left: 40%;
font-size: clamp(16px, 1.4vw, 18px);
font-family: 'Avenirlight', sans-serif;
color: #030303;
line-height: 1.0;
max-width: 200px;
opacity: 0;
      transition: opacity 1.8s ease, transform 0.8s ease;
transform: translateY(430px);

        transition-delay: 1.1s; /* z. B. 1 Sekunde später */}



.section-maß.active .sixthreesubtext-text{
  transform: translateY(0);
opacity: 1;
}











.gradient-word2 {
display: inline-block;
font-size: clamp(16px, 1.4vw, 18px);
font-family: 'Avenirheavy', sans-serif;
background: linear-gradient(90deg, #280914, #771836, #dc4806, #f8cc47, #387307);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}

.left-overlay {
width: 7%;         /* oder z. B. 300px für feste Breite */
max-width: 420px;    /* Bild wird nie größer als 600px */
left: 4%;
top: 57%;
position: absolute;
display: block;      /* Verhindert Lücken unter dem Bild */
opacity: 0;
      transition: opacity 1.8s ease, transform 0.8s ease;
transform: translateX(-230px);

        transition-delay: 1.1s; /* z. B. 1 Sekunde später */}



.section-maß.active .left-overlay{
  transform: translateY(0);
  color: #f4f4f4;
opacity: 1;
}


.middle-overlay {
width: 7%;         /* oder z. B. 300px für feste Breite */
max-width: 420px;    /* Bild wird nie größer als 600px */
top: 57%;
left: 22%;
position: absolute;
display: block;      /* Verhindert Lücken unter dem Bild */
opacity: 0;
      transition: opacity 1.8s ease, transform 0.8s ease;
transform: translateX(-630px);

        transition-delay: 1.1s; /* z. B. 1 Sekunde später */}



.section-maß.active .middle-overlay{
  transform: translateY(0);
  color: #f4f4f4;
opacity: 1;
}

.right-overlay {
width: 9%;         /* oder z. B. 300px für feste Breite */
max-width: 420px;    /* Bild wird nie größer als 600px */
top: 57%;
left: 40%;
position: absolute;
display: block;      /* Verhindert Lücken unter dem Bild */
opacity: 0;
      transition: opacity 1.8s ease, transform 0.8s ease;
transform: translateX(-1030px);

        transition-delay: 1.1s; /* z. B. 1 Sekunde später */}



.section-maß.active .right-overlay{
  transform: translateY(0);
  color: #f4f4f4;
opacity: 1;
}













.gradient-word2 {
  display: inline-block;
  font-size: clamp(16px, 1.4vw, 18px);
  font-family: 'Avenirheavy', sans-serif;
  background: linear-gradient(90deg, #280914, #771836, #dc4806, #f8cc47, #387307);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}



.quino-

.section-between {
  background-color: #000000;
  padding: 280px 0; /* Oben und unten Abstand */
  position: relative;
  z-index: 0; /* Damit der Schatten über dem oberen Bereich liegt */

}

.walk-overlay {
  width: 26%;
  top:-20%;
  right: 2%;
  position: absolute;
  display: block;
  border-radius: 8px;
  z-index: 0; /* Damit der Schatten über dem oberen Bereich liegt */
}

.fish-overlay {
  width: 26%;
  bottom:-5%;
  right: 30%;
  position: absolute;
  display: block;
  border-radius: 8px;
  z-index: 0; /* Damit der Schatten über dem oberen Bereich liegt */
}

.stdn-overlay {
  width: 40%;
  bottom:-15%;
  left: 2%;
  position: absolute;
  display: block;
  border-radius: 8px;
  z-index: 0; /* Damit der Schatten über dem oberen Bereich liegt */
}

.endgame-overlay {
  width: 40%;
  top:-8%;
  left: 2%;
  position: absolute;
  display: block;
  border-radius: 8px;
  z-index: 0; /* Damit der Schatten über dem oberen Bereich liegt */
}







.vorteile-button {
  display: inline-block;
  position: absolute;
  bottom: 8%;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 58px; /* ↑↓ ←→ Abstand */
  font-size: clamp(14px, 1.4vw, 18px); /* Skalierbare Größe */
  font-family: 'Louisgeorgecafebold', sans-serif;
  color: #fff;
  background-color: #e73092;
  border: none;
  border-radius: 22px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 6;
}

.vorteile-button:hover {
  background-color: rgb(170, 0, 71);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  font-family: 'Louisgeorgecafebold', sans-serif;
  color: #fff;

}


















.section-6 {
  background-color: #4d0035;
  padding: 500px 0; /* Oben und unten Abstand */
  position: relative;
  box-shadow: 20px 20px 20px 70px rgba(0, 0, 0, 0.6); /* Schatten nach unten */
z-index: 5;
}


.sixtitle-text {
  font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(34px, 3.4vw, 38px);
  max-width: 700px;
  color: #f8f8f8;
  position: absolute;
  top: 2%;
  left: 4%;
  line-height: 0.9;
}


.sixone-text {
  font-family: 'Avenirlight', sans-serif;
  font-size: clamp(18px, 2.4vw, 18px);
  max-width: 920px;
  color: #f8f8f8;
  position: absolute;
  top: 13%;
  left: 4%;
  line-height: 1.4;
  z-index: 0;

}

.highlightsixone {
  color: #f8f8f8;
  font-weight: bold;
  font-family: 'Avenirmedium', sans-serif;
  line-height: 1.0;
  z-index: 0;

}








.section-7 {
  background-color: #000000;
  padding: 300px 0; /* Oben und unten Abstand */
  position: relative;
  z-index: 2; /* Damit der Schatten über dem oberen Bereich liegt */
  box-shadow: 20px 20px 20px 50px rgba(0, 0, 0, 0.6); /* Schatten nach unten */

  
}


.sevenlargetitle-text {
  font-family: 'SignatureDecember', sans-serif;
  font-size: clamp(32px, 3.6vw, 38px);
  color: #d21c6b;
  position: absolute;
  top: 7%;
  left: 4%;
  line-height: 1.4;
  z-index: 2;
}

.seventitle-text {
  font-family: 'LEMONMILKLIGHT', sans-serif;
  font-size: clamp(18px, 2.2vw, 23px);

  color: #f8f8f8;
  position: absolute;
  top: 20%;
  left: 4%;
  line-height: 0.9;
}



.sevenone-text {
  font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(34px, 3.4vw, 38px);
  color: #f8f8f8;
  position: absolute;
  top: 21%;
  left: 4%;
  line-height: 0.9;
}




.sevenonecontent-text {
  font-family: 'Avenirlight', sans-serif;
  font-size: clamp(18px, 2.4vw, 18px);
  max-width: 920px;
  color: #f8f8f8;
  position: absolute;
  top: 35%;
  left: 4%;
  line-height: 1.4;
  z-index: 0;

}

.highlightsvevenonecontentone {
  color: #f8f8f8;
  font-weight: bold;
  font-family: 'Avenirmedium', sans-serif;
  line-height: 1.0;
  z-index: 0;
}

.highlightsvevenonecontentonetwo {
  color: #d21c6b;
  font-weight: bold;
  font-family: 'Avenirmedium', sans-serif;
  line-height: 1.0;
  z-index: 0;

}


.section-8 {
  background-color: #363636;
  padding: 300px 0; /* Oben und unten Abstand */
  position: relative;
  overflow: hidden; /* Alles außerhalb wird abgeschnitten */

}

.termin-overlay {
  width: 100%;
  top:-8%;
  left: 2%;
  position: absolute;
  display: block;
  z-index: 1; /* Damit der Schatten über dem oberen Bereich liegt */

}


.est-button {
  display: inline-block;
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 58px; /* ↑↓ ←→ Abstand */
  font-size: clamp(14px, 1.4vw, 18px); /* Skalierbare Größe */
  font-family: 'Louisgeorgecafebold', sans-serif;
  color: #fff;
  background-color: #d21c6b;
  border: none;
  border-radius: 22px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  z-index: 6;
}

.est-button:hover {
  background-color: #363636;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  font-family: 'Louisgeorgecafebold', sans-serif;
  color: #d21c6b;

}



.section-9 {
  background-color: #9a033f;
  padding: 750px 0; /* Oben und unten Abstand */
  position: relative;
  z-index: 3; /* Damit der Schatten über dem oberen Bereich liegt */
  box-shadow: 20px 20px 20px 50px rgba(0, 0, 0, 0.6); /* Schatten nach unten */ 
}

.pad2-overlay {
  width: 67%;
  bottom:0%;
  left: 2%;
  position: absolute;
  display: block;
  border-radius: 8px;
  z-index: 0; /* Damit der Schatten über dem oberen Bereich liegt */
}

.ipad2-overlay {
  width: 57%;
  top:37%;
  right: -4%;
  position: absolute;
  display: block;
  border-radius: 8px;
  z-index: 2; /* Damit der Schatten über dem oberen Bereich liegt */
}

.phonet-overlay {
  width: 37%;
  top:7%;
  right: 17%;
  position: absolute;
  display: block;
  border-radius: 8px;
  z-index: 1; /* Damit der Schatten über dem oberen Bereich liegt */
}
.nineonetitle-text {
  font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(34px, 3.4vw, 38px);
  color: #f8f8f8;
  position: absolute;
  top: 8%;
  left: 4%;
  line-height: 0.9;
}


.ninethreetitle-text {
  font-family: 'LEMONMILKLIGHT', sans-serif;
  font-size: clamp(22px, 2.2vw, 26px);
  color: #f8f8f8;
  position: absolute;
  top: 7%;
  left: 4%;
  line-height: 0.9;
}



.ninetwotitle-text {
  font-family: 'SignatureDecember', sans-serif;
  font-size: clamp(34px, 3.2vw, 42px);
  color: #f8f8f8;
  position: absolute;
  top: 2%;
  left: 4%;
  line-height: 0.9;
}








.restaurant-container {
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  position: absolute;
  top: 17%;
  left: 4%;

}

/* Bild-Wrapper */
.restaurant-wrapper {
  position: relative;
  width: 11%; /* frei skalierbar */
  height: auto;
}

.icon {
  width: 100%;
  height: auto;
  position: absolute;
  top: 20%;
  top: 0;
  left: 0;
}

.icon.hover {
  opacity: 0;
}

.restaurant-container:hover .icon.default {
  opacity: 0;
}
.restaurant-container:hover .icon.hover {
  opacity: 1;
}

/* Text */
.restaurant-text {
  text-align: left;
 margin-top: 0%;
 margin-left: 13%;
 font-size: clamp(14px, 2vw, 18px);
 font-family: 'Avenirlight', sans-serif;
  color:  #f4f4f4;
  max-width: 520px;
}


.restaurant-container .highlightrestaurantone-text {
  display: inline-block;
  font-family: 'LEMONMILKBOLD', sans-serif;
  color: #f4f4f4;     }



.restaurant-container:hover .restaurant-text {
  display: inline-block;
  color: #121212;      }

 .restaurant-container:hover .highlightrestaurantone-text {
            display: inline-block;
            color: #121212;    
          }














          .exercise-container {
            flex-direction: column;
            align-items: center;
            cursor: pointer;
            position: absolute;
            top: 26%;
            left: 4%;
        
          }
          
          /* Bild-Wrapper */
          .exercise-wrapper {
            position: relative;
            width: 11%; /* frei skalierbar */
            height: auto;
          }
          
          .icon {
            width: 100%;
            height: auto;
            position: absolute;
            top: 20%;
            top: 0;
            left: 0;
          }
          
          .icon.hover {
            opacity: 0;
          }
          
          .exercise-container:hover .icon.default {
            opacity: 0;
          }
          .exercise-container:hover .icon.hover {
            opacity: 1;
          }
          
          /* Text */
          .exercise-text {
            text-align: left;
            margin-top: 0%;
            margin-left: 13%;
            font-size: clamp(14px, 2vw, 18px);
            font-family: 'Avenirlight', sans-serif;
            color:  #f4f4f4;
            max-width: 520px;
          }
        
        
          .exercise-container .highlightexerciseone-text {
            display: inline-block;
            font-family: 'LEMONMILKBOLD', sans-serif;
            color: #f4f4f4;  
            line-height: 1;
          }
        
        
          
          .exercise-container:hover .exercise-text {
            display: inline-block;
            color: #121212;      }
        
           .exercise-container:hover .highlightexerciseone-text {
                      display: inline-block;
                      color: #121212;    
                    }



















                    .videocall-container {
                      flex-direction: column;
                      align-items: center;
                      cursor: pointer;
                      position: absolute;
                      top: 36%;
                      left: 4%;
                  
                    }
                    
                    /* Bild-Wrapper */
                    .videocall-wrapper {
                      position: relative;
                      width: 11%; /* frei skalierbar */
                      height: auto;
                    }
                    
                    .icon {
                      width: 100%;
                      height: auto;
                      position: absolute;
                      top: 20%;
                      top: 0;
                      left: 0;
                    }
                    
                    .icon.hover {
                      opacity: 0;
                    }
                    
                    .videocall-container:hover .icon.default {
                      opacity: 0;
                    }
                    .videocall-container:hover .icon.hover {
                      opacity: 1;
                    }
                    
                    /* Text */
                    .videocall-text {
                      text-align: left;
                      margin-top: 0%;
                      margin-left: 13%;
                      font-size: clamp(14px, 2vw, 18px);
                      font-family: 'Avenirlight', sans-serif;
                      color:  #f4f4f4;
                      max-width: 520px;
                    }
                  
                  
                    .videocall-container .highlightvideocallone-text {
                      display: inline-block;
                      font-family: 'LEMONMILKBOLD', sans-serif;
                      color: #f4f4f4;  
                      line-height: 1;
                    }
                  
                  
                    
                    .videocall-container:hover .videocall-text {
                      display: inline-block;
                      color: #121212;      }
                  
                     .videocall-container:hover .highlightvideocallone-text {
                                display: inline-block;
                                color: #121212;    
                              }





 .section-10 {
    background-color: #101010;
    padding: 340px 0; /* Oben und unten Abstand */
    position: relative;
z-index: 4;
overflow: hidden;
        box-shadow: 10px -10px 40px 10px rgba(0, 0, 0, 0.6); /* Schatten nach unten */
        box-shadow: 10px 10px 40px 10px rgba(0, 0, 0, 0.6); /* Schatten nach unten */

  }



   .t3{
  font-family: 'LEMONMILKLIGHT', sans-serif;
  font-size: clamp(17px, 2.4vw, 22px);
  color: #eeeeee;
  position: absolute;
  text-align: left;
top: 4%;    left: 4%;
  line-height: 1;
  transition: color 1s ease;
}

.hgt3 {
  font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(34px, 4vw, 36px);
      color: #eeeeee;
  transition: color 1s ease;
}







  .section-10.active .t3{
  color: #e73092;
  }


  .section-10.active .hgt3{
    color: #e73092;
    }





    .section-10 .text3 {
color: #f0f0f0;
   font-family: 'Avenirlight', sans-serif;
  font-size: clamp(14px, 3vw, 17px);
  position: absolute;
  text-align: left;
top: 19%;    left: 4%;
  line-height: 1.2;
  opacity: 1;
max-width: 40%;
transition: color 1s ease;
  transition-delay: 0.4s;

}

/* Hover-Zustand */
.section-10.active .text3{
opacity: 1;
    color: #e73092;


}



.hgtext31 {

   font-family: 'LexendBold', sans-serif;
  color: #e73092;
  opacity: 1;
  transition: color 1s ease;
  transition-delay: 0.4s;
}

/* Hover-Zustand */
.section-10.active .hgtext31{
opacity: 1;
color: #e8e8e8;

}


.hgtext3 {

   font-family: 'LexendBold', sans-serif;
  color: #f0f0f0;
  opacity: 1;
  transition: color 1s ease;
  transition-delay: 0.4s;
}

/* Hover-Zustand */
.section-10.active .hgtext3{
opacity: 1;
color: #e73092;

}


   .section-10 .hgtextb {

   font-family: 'Pencil', sans-serif;
  color: #e73092;
      font-size: clamp(34px, 4vw, 47px);
line-height: 0.6;
  opacity: 1;
transition: color 1s ease;
  transition-delay: 0.4s;
}

/* Hover-Zustand */
.section-10.active .hgtextb{
opacity: 1;
color: #f0f0f0;

}










.section-10 .fly-in-image {
position: absolute;
right: 5%;
width: 30%;
bottom: 15%;
opacity: 0;
transform: translateY(80px);
transition: opacity 0.8s ease, transform 0.8s ease;
border-radius: 8px;
  z-index: 1;

}

/* Hover-Zustand */
.section-10.active .fly-in-image {
opacity: 1;
transform: translateY(0);
}




.section-10 .fly-in-image2 {
position: absolute;
right: 3%;
width: 30%;
bottom: 25%;
opacity: 0;
transform: translateY(80px);
transition: opacity 0.8s ease, transform 0.8s ease;
border-radius: 8px;
z-index: 2;
}

/* Hover-Zustand */
.section-10.active .fly-in-image2 {
opacity: 1;
transform: translateY(0);
}

    





.einszueins-button {
display: inline-block;
padding: 14px 160px;
position: absolute;
bottom: 21%;
left: 4%;
font-size: clamp(12px, 1.7vw, 17px);
font-family: 'LexendBold', sans-serif;
font-weight: bold;
color: #efefef; /* Schriftfarbe = Rahmenfarbe */
background-color: transparent;
border: 6px solid #efefef;
border-radius: 12px;
text-decoration: none;
transition: all 0.3s ease;
}

.section-10:hover   .einszueins-button:hover {
background-color: #e73092;
color: white;
}







.section-10 .fly-in-image3 {
position: absolute;
right: 13%;
width: 37%;
top: 5%;
opacity: 0;
transform: translateY(80px);
transition: opacity 0.8s ease, transform 0.8s ease;
border-radius: 8px;
z-index: 0;
}

/* Hover-Zustand */
.section-10:hover .fly-in-image3 {
opacity: 1;
transform: translateY(0);
}








.tenonetitle-text {
  font-family: 'SignatureDecember', sans-serif;
  font-size: clamp(34px, 3.2vw, 42px);
  color: #d21c6b;
  position: absolute;
  top: 6.1%;
  left: 4%;
  line-height: 0.9;
  z-index: 1;

}


.highlighttenoneone-text {
  font-family: 'SignatureDecember', sans-serif;
  text-decoration: underline;
text-underline-offset: 10px;
  font-size: clamp(34px, 3.2vw, 42px);
  backdrop-filter:#d21c6b ;
  color: #ffffff;

  line-height: 0.9;
}


.tentwotitle-text {
  color: #0d0d0d;
  position: absolute;
  top: 12%;
  left: 4%;
  max-width: 720px;
  font-family: 'LEMONMILKLIGHT', sans-serif;
  font-size: clamp(18px, 2vw, 21px);
  line-height: 0.8;
  z-index: 0;

}


.highlightirgendwas-text {
  color: #0d0d0d;
  font-family: 'LEMONMILKBOLD', sans-serif;
}




.tenoneone-text {
  color: #d21c6b;
  position: absolute;
  top: 17%;
  left: 4%;
  max-width: 720px;
  font-family: 'Avenirlight', sans-serif;
  font-size: clamp(18px, 2.4vw, 18px);
  z-index: 0;
  line-height: 1.1;
}


.highlighttentwoone-text {
  color: #d21c6b;
  font-weight: bold;
  font-family: 'Avenirmedium', sans-serif;
  font-size: clamp(18px, 2.4vw, 18px);
  z-index: 0;
}

.highlighttentwothree-text {
  color: #0d0d0d;
  font-weight: bold;
  font-family: 'Avenirmedium', sans-serif;
  font-size: clamp(18px, 2.4vw, 18px);
  z-index: 0;
}
.highlighttentwofour-text {
  color: #0d0d0d;
  font-weight: bold;
text-decoration-line: underline;    
text-decoration-color: #d21c6b ;
font-family: 'Avenirmedium', sans-serif;
  font-size: clamp(18px, 2.4vw, 18px);
  z-index: 0;
}

.highlighttentwofive-text {
  color: #0d0d0d;
  font-weight: bold;    
  font-family: 'Beauty', sans-serif;
  font-size: clamp(47px, 5.1vw, 51px);
  z-index: 0;
}









.moderat-container {
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  position: absolute;
  top: 31%;
  left: 42%;

}

/* Bild-Wrapper */
.moderat-wrapper {
  position: relative;
  width: 320px; /* frei skalierbar */
  height: auto;
}

.icon {
  width: 100%;
  height: auto;
  position: absolute;
  top: 20%;
  top: 0;
  left: 0;
  transition: opacity 0.3s ease-in-out;
}

.icon.hover {
  opacity: 0;
}

.moderat-container:hover .icon.default {
  opacity: 0;
}
.moderat-container:hover .icon.hover {
  opacity: 1;
}

/* Text */
.moderat-text {
  text-align: left;
  margin-top: 440px;
   font-size: clamp(10px, 1.5vw, 18px);
   font-family: 'Avenirlight', sans-serif;
   color: #ffffff;
   transition: color 0.3s ease-in-out;
   max-width: 300px;
}





.moderat-container .highlightmoderatone-text{
  text-align: left;
  font-family: 'Avenirheavy', sans-serif;
  color: #ffffff;
  transition: color 0.3s ease-in-out;
}



.moderat-container .highlightmoderattwo-text{
  text-align: left;
  font-family: 'Avenirheavy', sans-serif;
  color: #ffffff;
  transition: color 0.3s ease-in-out;
}


.moderat-container .highlightioderatfour-text{
  text-align: left;
  font-family: 'LEMONMILKBOLD', sans-serif;
  color: #ffffff;
  transition: color 0.3s ease-in-out;
}


.moderat-container:hover .moderat-text {
  display: inline-block;
  background: linear-gradient(90deg, #21040d, #771836, #C4BCAD);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;      }















  .leicht-container {
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    position: absolute;
    top: 32%;
    left: 10%;

  }
  
  /* Bild-Wrapper */
  .leicht-wrapper {
    position: relative;
    width: 320px; /* frei skalierbar */
    height: auto;
  }
  
  .icon {
    width: 100%;
    height: auto;
    position: absolute;
    top: 20%;
    top: 0;
    left: 0;
    transition: opacity 0.3s ease-in-out;
  }
  
  .icon.hover {
    opacity: 0;
  }
  
  .leicht-container:hover .icon.default {
    opacity: 0;
  }
  .leicht-container:hover .icon.hover {
    opacity: 1;
  }
  
  /* Text */
  .leicht-text {
    text-align: left;
   margin-top: 440px;
    font-size: clamp(10px, 1.5vw, 18px);
    font-family: 'Avenirlight', sans-serif;
    color: #ffffff;
    transition: color 0.3s ease-in-out;
    max-width: 300px;
  }

  .leicht-container .highlightileichhtone-text{
    text-align: left;
    font-family: 'Avenirheavy', sans-serif;
    color: #ffffff;
    transition: color 0.3s ease-in-out;
  }


  .highlightileichhttwo-text{
    text-align: left;
    font-family: 'Avenirheavy', sans-serif;
    color: #ffffff;
    transition: color 0.3s ease-in-out;
  }


  .highlightileichtfour-text{
    text-align: left;
    font-family: 'Beauty', sans-serif;
    font-size: clamp(32px, 4vw, 38px);
    color: #ffffff;
    transition: color 0.3s ease-in-out;
  }


  .highlightileichhthree-text{
    text-align: left;
    font-family: 'Avenirheavy', sans-serif;
    color: #ffffff;
    transition: color 0.3s ease-in-out;
  }


  
  .leicht-container:hover .leicht-text {
    display: inline-block;
    background: linear-gradient(90deg, #5E4E37, #A99670, #9DB1B4);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;      }


    .leicht-container:hover .highlightileichtfour-text {
      text-align: left;
      font-family: 'Beauty', sans-serif;
      font-size: clamp(42px, 5vw, 48px);
      color: #ffffff;
      transition: color 0.3s ease-in-out;
background: linear-gradient(90deg, #5E4E37, #A99670, #9DB1B4);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      color: transparent;      }


      .leicht-container:hover .highlightileichhttwo-text {
        font-family: 'Avenirheavy', sans-serif;
        color: #ececec;
             }

   .leicht-container:hover .highlightileichhthree-text {
              display: inline-block;
              font-family: 'Avenirheavy', sans-serif;
              background: linear-gradient(90deg, #5E4E37, #A99670, #9DB1B4);
              -webkit-background-clip: text;
              background-clip: text;
              -webkit-text-fill-color: transparent;
              color: transparent;      }


      .leicht-container:hover .highlightileichhtone-text {
        display: inline-block;
        font-family: 'Avenirheavy', sans-serif;
        background: linear-gradient(90deg, #5E4E37, #A99670, #9DB1B4);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;      }
    













        .intense-container {
          flex-direction: column;
          align-items: center;
          cursor: pointer;
          position: absolute;
          top: 32%;
          right: 10%;
    
        }
        
        /* Bild-Wrapper */
        .intense-wrapper {
          position: relative;
          width: 320px; /* frei skalierbar */
          height: auto;
        }
        
        .icon {
          width: 100%;
          height: auto;
          position: absolute;
          top: 20%;
          top: 0;
          left: 0;
          transition: opacity 0.3s ease-in-out;
        }
        
        .icon.hover {
          opacity: 0;
        }
        
        .intense-container:hover .icon.default {
          opacity: 0;
        }
        .intense-container:hover .icon.hover {
          opacity: 1;
        }
        
        /* Text */
        .intense-text {
          text-align: left;
         margin-top: 440px;
          font-size: clamp(10px, 1.5vw, 18px);
          font-family: 'Avenirlight', sans-serif;
          color: #ffffff;
          transition: color 0.3s ease-in-out;
          max-width: 300px;
        }
    
        .intense-container .highlightileichhtone-text{
          text-align: left;
          font-family: 'Avenirheavy', sans-serif;
          color: #ffffff;
          transition: color 0.3s ease-in-out;
        }
    
    
        .highlightileichhttwo-text{
          text-align: left;
          font-family: 'Avenirheavy', sans-serif;
          color: #ffffff;
          transition: color 0.3s ease-in-out;
        }
    
    
        .highlightileichtfour-text{
          text-align: left;
          font-family: 'Beauty', sans-serif;
          font-size: clamp(32px, 4vw, 38px);
          color: #ffffff;
          transition: color 0.3s ease-in-out;
        }
    
    
        .highlightileichhthree-text{
          text-align: left;
          font-family: 'Avenirheavy', sans-serif;
          color: #ffffff;
          transition: color 0.3s ease-in-out;
        }
    
    
        
        .intense-container:hover .intense-text {
          display: inline-block;
          background: linear-gradient(90deg, #5E4E37, #A99670, #9DB1B4);
          -webkit-background-clip: text;
          background-clip: text;
          -webkit-text-fill-color: transparent;
          color: transparent;      }
    
    
          .intense-container:hover .highlightileichtfour-text {
            text-align: left;
            font-family: 'Beauty', sans-serif;
            font-size: clamp(42px, 5vw, 48px);
            color: #ffffff;
            transition: color 0.3s ease-in-out;
    background: linear-gradient(90deg, #5E4E37, #A99670, #9DB1B4);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            color: transparent;      }
    
    
            .intense-container:hover .highlightileichhttwo-text {
              font-family: 'Avenirheavy', sans-serif;
              color: #ececec;
                   }
    
         .intense-container:hover .highlightileichhthree-text {
                    display: inline-block;
                    font-family: 'Avenirheavy', sans-serif;
                    background: linear-gradient(90deg, #5E4E37, #A99670, #9DB1B4);
                    -webkit-background-clip: text;
                    background-clip: text;
                    -webkit-text-fill-color: transparent;
                    color: transparent;      }
    
    
            .intense-container:hover .highlightileichhtone-text {
              display: inline-block;
              font-family: 'Avenirheavy', sans-serif;
              background: linear-gradient(90deg, #5E4E37, #A99670, #9DB1B4);
              -webkit-background-clip: text;
              background-clip: text;
              -webkit-text-fill-color: transparent;
              color: transparent;      }
          

              

              .section-11 {
                background-color: #CDD1DC;
                padding: 780px 0; /* Oben und unten Abstand */
                position: relative;
                z-index: 1; /* Damit der Schatten über dem oberen Bereich liegt */

              }








              .elevenone-text {
                color: #d21c6b;
                font-family: 'Louisgeorgecafe', sans-serif;
                position: absolute;
                top: 4%;
                left: 12%;
                font-size: clamp(18px, 2.4vw, 18px);
                z-index: 0;
                line-height: 1.2;
              }
            
              .highlightelevenone-text {
                color: #f6f6f6;
                font-family: 'Avenirheavy', sans-serif;
                text-decoration-line: underline;    
                text-underline-offset: 5px;
                text-decoration-color: #d21c6b ;
                font-size: clamp(18px, 2.4vw, 18px);
                z-index: 0;
              }
              .highlighteleventwo-text {
                color: #d21c6b;
                font-family: 'Avenirheavy', sans-serif;
              font-size: clamp(18px, 2.4vw, 18px);
                z-index: 0;
              }


              .highlighteleventhree-text {
                font-family: 'Avenirheavy', sans-serif;
                color: #0a0a0a;
                font-weight: bold;
  
            font-size: clamp(18px, 2.4vw, 18px);
                z-index: 0;
              }


.button-overlay {
  position: absolute; /* Absolute Positionierung */
  top: 43%; /* Position 5% von unten */
  left: 15.5%; /* Position 5% von links */
  width: 34%; /* Passt sich dem Container an */
  height: auto;
  overflow: hidden; /* Alles außerhalb des Containers wird verborgen */
}

/* Standardbild (sichtbar bei Start) */
.button-overlay img.default {
  width: 100%; /* Passt sich dem Container an */
  height: auto;
  transition: opacity 0.3s ease-in-out; /* Sanfter Übergang für Opazität */
}

/* Hover-Effekt: Das Bild wird zum weißen Icon */
.button-overlay:hover img.default {
  opacity: 0; /* Standardbild wird unsichtbar */
}

/* Weißes Icon (ersetzt das Standardbild) */
.button-overlay img.hover {
  width: 100%; /* Passt sich dem Container an */
  height: auto; /* Behält das Seitenverhältnis bei */
  position: absolute; /* Position innerhalb des Containers */
  top: 0; /* Position oben im Container */
  left: 0; /* Position links im Container */
  opacity: 0; /* Startet unsichtbar */
  transition: opacity 0.3s ease-in-out; /* Sanfter Übergang für Opazität */
}

/* Hover-Effekt: Das weiße Bild wird sichtbar */
.button-overlay:hover img.hover {
  opacity: 1; /* Weißes Bild wird sichtbar */
}













.mehrwert-container, 
.ebook-container,
.mealprep-container{
  left:31%;
}






/* Container bleibt an Ort & Stelle */
.mealprep-container{
position:absolute;
top:47%;
display:flex;
flex-direction:column;
align-items:flex-start; /* oder center */
cursor:pointer;
}

/* ICON: feste Bühne mit Aspect-Ratio → kein Springen mehr */
.mealprep-wrapper{
position:relative;
width: 6%; /* skalierbar */
aspect-ratio: 1 / 1;           /* gleiche Fläche für beide Icons */
}

/* Beide Bilder exakt gleich groß, nur Opacity wechselt */
.icon{
position:absolute;
inset:0;              /* top/right/bottom/left: 0 */
width:100%;
height: 100%;
object-fit: contain;  /* nie beschneiden */
transition: opacity .25s ease;
}
.icon.hover{ opacity:0; }
.mealprep-container:hover .icon.default{ opacity:0; }
.mealprep-container:hover .icon.hover{ opacity:1; }

/* Text: keine La
yout-Shifts (fixe line-height, keine Gewichtsänderung) */




.section-between {
  background-color: #000000;
  padding: 280px 0; /* Oben und unten Abstand */
  position: relative;
  z-index: 0; /* Damit der Schatten über dem oberen Bereich liegt */
}


.section-1-12 {
  background-color: #B3B5B7;
  padding: 140px 0; /* Oben und unten Abstand */
  position: relative;
  z-index: 0; /* Damit der Schatten über dem oberen Bereich liegt */
}


.section-2-12 {
  background-color: #B3B5B7;
  padding: 300px 0; /* Oben und unten Abstand */
  position: relative;
  z-index: 0; /* Damit der Schatten über dem oberen Bereich liegt */
}



.twotwelvetitleone-text {
  font-family: 'Beauty', sans-serif;
  font-size: clamp(94px, 6.2vw, 92px);
  color: #101010;
  position: absolute;
  top: 1%;
  left: 4%;
  line-height: 0.9;
  z-index: 1;
}


.twotwelvetitletwo-text {
  font-family: 'LEMONMILKLIGHT', sans-serif;
  font-size: clamp(24px, 2.6vw, 32px);
  color: #101010;
  position: absolute;
  top: 48%;
  left: 4%;
  line-height: 0.9;
  z-index: 1;
}



.highlighttwotwelvetitletwo-text {
  font-family: 'LEMONMILKBOLD', sans-serif;
 
  line-height: 0.9;
}




.Allerezepte-overlay {
  width: 100%;
  top:-8%;
  left: 2%;
  position: absolute;
  display: block;
  z-index: 1; /* Damit der Schatten über dem oberen Bereich liegt */
}



.section-12 {
  background-color: #e2e2dd;
  padding: 580px 0; /* Oben und unten Abstand */
  position: relative;
  z-index: 2; /* Damit der Schatten über dem oberen Bereich liegt */
  box-shadow: 10px 10px 10px 10px rgba(0, 0, 0, 0.6); /* Schatten nach unten */
  box-shadow: 10px -10px 10px 10px rgba(0, 0, 0, 0.6); /* Schatten nach unten */
}


.twelvetitletwo-text {
  font-family: 'SignatureDecember', sans-serif;
  font-size: clamp(24px, 2.6vw, 32px);
  color: #101010;
  position: absolute;
  top: 6%;
  left: 4%;
  line-height: 0.9;
  z-index: 1;
}


.twelvetitleone-text {
  font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(20px, 2.6vw, 28px);
  color: #101010;
  position: absolute;
  top: 11%;
  left: 4%;
  line-height: 0.9;
  z-index: 1;
}





.twelvettextone-text {
  font-family: 'Avenirlight', sans-serif;
  font-size: clamp(18px, 2.4vw, 18px);
  max-width: 920px;
  color: #101010;
  position: absolute;
  top: 17%;
  left: 4%;
  line-height: 1.4;
  z-index: 0;

}

.highlightftwelvettextone-text {
  font-family: 'LEMONMILKLIGHT', sans-serif;
  line-height: 0.9;
}

.highlightftwelvettexttwo-text {
  font-family: 'LEMONMILKBOLD', sans-serif;
  line-height: 0.9;
}

.highlightftwelvettextthree-text {
  font-family: 'Avenirheavy', sans-serif;
  line-height: 0.9;
}

.highlightftwelvettextfour-text {
  font-family: 'Avenirheavy', sans-serif;
  line-height: 0.9;
}


.highlightftwelvettextfive-text {
  font-family: 'Avenirlight', sans-serif;
  color: #4d0035;
  line-height: 0.9;
}

.highlightftwelvettextsix-text {
  font-family: 'Avenirheavy', sans-serif;
  color: #4d0035;
  line-height: 0.9;
}

.highlightftwelvettextseven-text {
  font-family: 'Avenirheavy', sans-serif;
background-color: #4d0035;
color: whitesmoke;
  line-height: 0.9;
}




.twelvesubtitleone-text {
  font-family: 'Beauty', sans-serif;
  font-size: clamp(57px, 5.4vw, 68px);
  max-width: 920px;
  color: #101010;
  position: absolute;
  top: 40%;
  left: 4%;
  line-height: 1.4;
  z-index: 0;

}





    .section-13 {
      background-color: #232323;
      padding: 520px 0; /* Oben und unten Abstand */
      position: relative;
     box-shadow: 10px -10px 40px 10px rgba(0, 0, 0, 0.6); /* Schatten nach unten */
        box-shadow: 10px 10px 40px 10px rgba(0, 0, 0, 0.6); /* Schatten nach unten */
      z-index: 17; /* Damit der Schatten über dem oberen Bereich liegt */
        display: none;

    }





    .thirteentitleone-text {
      font-family: 'Beauty', sans-serif;
      font-size: clamp(72px, 7.8vw, 87px);
      max-width: 900px;
      color: #ffffff;
      position: absolute;
      top: 1%;
      left: 4%;
      line-height: 0.9;
    }


    .thirteentitleonetwo-text {
      font-family: 'LEMONMILKBOLD', sans-serif;
      font-size: clamp(23px, 3.4vw, 32px);
      max-width: 900px;
      color: #ffffff;
      position: absolute;
      top: 10%;
      left: 4%;
      line-height: 0.9;
    }


  .highlightthirteentitleonetwo {
      color: #ffffff;
      font-family: 'Lexendlight', sans-serif;
    }




    .fourtextone-text {
      font-family: 'LouisGeorgeCafe', sans-serif;
      font-size: clamp(10px, 1.5vw, 18px);
      max-width: 400px;
      color: #ffffff;
      position: absolute;
      left: 4%;
      top:22%
    }






.bowl-overlay {
width: 31%;         /* oder z. B. 300px für feste Breite */
top: 0%;
right: 7%;
position: absolute;
display: block;      /* Verhindert Lücken unter dem Bild */
                                                            }




.padebook-overlay {
width: 31%;         /* oder z. B. 300px für feste Breite */
bottom: 7%;
left: 7%;
position: absolute;
display: block;      /* Verhindert Lücken unter dem Bild */
z-index: 2; /* Damit der Schatten über dem oberen Bereich liegt */

}


    .bookpadf-overlay {
                                                              width:53%;         /* oder z. B. 300px für feste Breite */
                                                              bottom: 0%;
                                                              right: 3%;
                                                              position: absolute;
                                                              display: block;      /* Verhindert Lücken unter dem Bild */
                                                              z-index: 1; /* Damit der Schatten über dem oberen Bereich liegt */

                                                                                                                            }



                                                                                                                            .bopokphone-overlay {
                                                                                                                              width: 20%;         /* oder z. B. 300px für feste Breite */
                                                                                                                              bottom: 3%;
                                                                                                                              right: 44%;
                                                                                                                              position: absolute;
                                                                                                                              display: block;      /* Verhindert Lücken unter dem Bild */
                                                                                                                              z-index: 3; /* Damit der Schatten über dem oberen Bereich liegt */

                                                                                                                                                                                            }






    .lock-overlay {
      width: 4%;
      top: 26.5%;
      right: 37%;
      position: absolute;
      display: block;
    }


    .thirteentitleonefour-text {
      font-family: 'LouisGeorgeCafe', sans-serif;
      font-size: clamp(10px, 1.5vw, 18px);
      max-width: 280px;
      color: #ffffff;
      position: absolute;
      right: 16%;
      top: 25.5%
    }







    .section-film2 {
      background-color: #0f0f0f;
      padding: 400px 0; /* Oben und unten Abstand */
      position: relative;
      box-shadow: 0 -20px 40px 
    }

    .filmcafe2-video {
      position: absolute;
      top: 50%;
      left: 50%;
      min-width: 100%;
      min-height: 100%;
      transform: translate(-50%, -50%);
      object-fit: cover;
      z-index: 0;
    }

    .filmcafe2-overlay {
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(77, 77, 77, 0.4); /* Transparente schwarze Schicht */
      z-index: 1;
    }
    


    .nachfilm-section {
      background-color: #1b1b1b;
      padding: 120px 0; /* Oben und unten Abstand */
      position: relative;
      z-index: 1; /* Damit der Schatten über dem oberen Bereich liegt */
      box-shadow: 10px -10px 40px 10px rgba(0, 0, 0, 0.6); /* Schatten nach unten */
      overflow: hidden;

    }




    .nachfilmtitleone-text {
      font-family: 'LEMONMILKLIGHT', sans-serif;
      font-size: clamp(23px, 2.7vw, 27px);
      color: #000000;
      position: absolute;
      left: 4%;
      top: 4%;
      z-index: 3;
      line-height: 1;
    }

    .highlightnachfilm1 {
      font-family: 'LEMONMILKBOLD', sans-serif;
      color: #b2268d;
      z-index: 3;
      line-height: 1;
    }

    .highlightnachfilm2 {
      font-family: 'LEMONMILKBOLD', sans-serif;
      
      color: #0db3bc;
      z-index: 3;
      line-height: 1;
    }

    

    .highlightnachfilm3 {
      font-family: 'LEMONMILKBOLD', sans-serif;
      color: #000000;
      z-index: 3;
      line-height: 1;
    }























.women-overlay {
width: 10%;
top:-10%;
right: 88%;
position: absolute;
border-radius: 11px;
z-index: 2; /* Damit der Schatten über dem oberen Bereich liegt */
}









.mediawalkd-container {
width: 20.7%;
top:10%;
right: 38%;
position: absolute;
border-radius: 11px;
z-index: 2;
aspect-ratio: 3 / 4; /* Optional für gleiches Seitenverhältnis */
overflow: hidden;}

.defaultwalkd-media,
.hoverwalkd-media {
width: 100%;
height: 84%;
position: absolute;
top: 0;
left: 0;
object-fit: cover; /* oder 'contain', je nachdem was du brauchst */
transition: opacity 0.6s ease-in-out;
border-radius: 8px;
pointer-events: none;
}

.hoverwalkd-media {
opacity: 0;
z-index: 2;
}

.section-16:hover .hoverwalkd-media {
opacity: 1;
}

.section-16:hover .defaultwalkd-media {
opacity: 0;
}














.mediatabs-container {
width: 15.5%;
top:10%;
right: 6%;
position: absolute;
border-radius: 11px;
z-index: 2;
aspect-ratio: 9 / 16; /* Optional für gleiches Seitenverhältnis */
overflow: hidden;}

.defaulttabs-media,
.hovertabs-media {
width: 100%;
height: 84%;
position: absolute;
top: 0;
left: 0;
object-fit: cover; /* oder 'contain', je nachdem was du brauchst */
transition: opacity 0.6s ease-in-out;
border-radius: 8px;
pointer-events: none;
}

.hovertabs-media {
opacity: 0;
z-index: 2;
}

.section-16:hover .hovertabs-media {
opacity: 1;
}

.section-16:hover .defaulttabs-media {
opacity: 0;
}
















.mediax-container {
width: 15.5%;
position: absolute;
top: 10%;
right: 22%;
z-index: 2;
aspect-ratio: 9 / 16; /* Optional für gleiches Seitenverhältnis */
overflow: hidden;
}

.defaultx-media,
.hoverx-media {
width: 100%;
height: 84%;
position: absolute;
top: 0;
left: 0;
object-fit: cover; /* oder 'contain', je nachdem was du brauchst */
transition: opacity 0.6s ease-in-out;
border-radius: 8px;
pointer-events: none;
}

.hoverx-media {
opacity: 0;
z-index: 2;
}

.section-16:hover .hoverx-media {
opacity: 1;
}

.section-16:hover .defaultx-media {
opacity: 0;
}














.nbx-offers{
  background:#CDD1DC;
  padding: clamp(46px, 6vw, 96px) 0;
  color:#101010;
  position: relative;
  overflow: hidden;
}

/* soft glow */
.nbx-offers::before{
  content:"";
  position:absolute;
  inset:-40px;
  background:
    radial-gradient(900px 420px at 18% 18%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(900px 420px at 82% 22%, rgba(255,255,255,.35), transparent 62%),
    radial-gradient(1200px 900px at 50% 85%, rgba(0,0,0,.09), transparent 60%);
  pointer-events:none;
  opacity:.95;
}

.nbx-wrap{
  width: min(1200px, 92vw);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* Head */
.nbx-head{
  text-align:center;
  max-width: 980px;
  margin: 0 auto clamp(10px, 1.6vw, 16px);
}

.nbx-eyebrow{
  margin:0 0 10px;
  font-family:"Poppins", system-ui, sans-serif;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  opacity:.75;
  font-size:12px;
}

.nbx-title{
  margin:0 0 12px;
  font-family:'LEMONMILKBOLD', sans-serif;
  font-size: clamp(30px, 4vw, 54px);
  line-height: .95;
}

.nbx-mark{ color:#b2268d; }

.nbx-sub{
  margin: 0 auto;
  max-width: 920px;
  font-family:'Avenirlight', sans-serif;
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.65;
  opacity: .92;
}

/* Grid */
.nbx-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2.8vw, 26px);
  align-items: start;
  margin-top: clamp(6px, 1.2vw, 10px);
}

/* Panels: bigger + color */
.nbx-panel{
  border-radius: 22px;
  padding: clamp(22px, 2.8vw, 32px);
  min-height: 420px;

  border: 1px solid rgba(0,0,0,.10);
  box-shadow: 0 30px 90px rgba(0,0,0,.18);
  position: relative;
  overflow: hidden;

  transform: translateY(18px);
  opacity: 0;
  transition:
    transform .6s cubic-bezier(.2,.9,.2,1),
    opacity .6s ease,
    box-shadow .35s ease,
    filter .35s ease;
}

.nbx-panel::before{
  content:"";
  position:absolute;
  inset:0;
  opacity: .9;
  pointer-events:none;
}

/* left panel: magenta vibe */
.nbx-panel--biz{
  background: #a6117e;
  --cta-accent: #ffffff;     /* Text / Border normal */
  --cta-fill:   #ffffff;     /* Fill-Farbe */
  --cta-texts:   #a6117e;     /* Text auf Fill */
}

/* right panel: teal/green vibe */
.nbx-panel--priv{
  background: #0db3bc;
  --cta-accent: #ffffff;
  --cta-fill:   #ffffff;
  --cta-texts:   #0db3bc;
}



/* Animate in (optional JS adds .is-in on section) */
.nbx-offers.is-in .nbx-panel{
  transform: translateY(0);
  opacity: 1;
}
.nbx-offers.is-in .nbx-panel:nth-child(2){ transition-delay: .08s; }

.nbx-panel:hover{
  transform: translateY(-8px);
  box-shadow: 0 40px 120px rgba(0,0,0,.22);
  filter: saturate(1.05);
}

/* Top row */
.nbx-panelTop{
  display:flex;
  gap: 14px;
  align-items:flex-start;
  position: relative;
  z-index: 1;
}

.nbx-badge{
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  border-radius: 16px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 16px 40px rgba(0,0,0,.14);
  position: relative;
  overflow:hidden;
}

.nbx-ico{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  transition: opacity .22s ease;
  padding: 10px;
}
.nbx-ico--hover{ opacity:0; }

.nbx-panel:hover .nbx-ico--default{ opacity:0; }
.nbx-panel:hover .nbx-ico--hover{ opacity:1; }

.nbx-panelTitle{
  margin: 2px 0 6px;
  font-family:'LEMONMILKBOLD', sans-serif;
  font-size: clamp(18px, 1.6vw, 22px);
  color: white;
  line-height: 1.05;
}


/* Actions */
.nbx-actions{
  margin-top: 16px;
  display:grid;
  gap: 14px;
  position: relative;
  z-index: 1;
}



@media (max-width: 1024px){
  .nbx-actionMedia{
    height: 96px;
  }
}

@media (max-width: 768px){
  .nbx-actionMedia{
    height: 120px;
  }
}
.nbx-panel--biz .nbx-actionMedia{
  height: 120px;
}

@media (max-width: 768px){
  .nbx-panel--biz .nbx-actionMedia{
    height: 140px;
  }
}






.nbx-action{
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:center;
  gap: 14px;

  text-decoration:none;
  color: inherit;

  padding: 10px;
  border-radius: 18px;
  transition: transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.nbx-action:hover{
  transform: translateY(-3px);
}

.nbx-actionMedia{
  position: relative;
  height: 120px;
  width: 100%;
  aspect-ratio: 16 / 4;  /* Banner-Look */
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0,0,0,.08);
}

.nbx-actionImg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  transition: opacity .22s ease, transform .35s ease;
}

.nbx-actionImg.is-hover{ opacity:0; }

.nbx-action:hover .nbx-actionImg.is-default{ opacity:0; }
.nbx-action:hover .nbx-actionImg.is-hover{
  opacity:1;
  transform: scale(1.01);   box-shadow: 0 22px 60px rgba(0,0,0,.18);

}



.nbx-actionCta{
  position: relative;
  display:inline-flex;
  align-items:center;
  gap: 10px;

  font-family:"Poppins", system-ui, sans-serif;
  font-weight: 900;

  color: var(--cta-accent);
  border-radius: 12px;
  border: 2px solid var(--cta-accent);

  padding: 8px 16px;
  margin-left: 12px;

  background: transparent;
  overflow: hidden;

  opacity: 0;
  transform: translateX(-8px);
  transition: 
    opacity .2s ease,
    transform .2s ease,
    color .25s ease;

  white-space: nowrap;
  z-index: 1;
}

/* CTA sichtbar bei Hover der Action */
.nbx-action:hover .nbx-actionCta{
  opacity:1;
  transform: translateX(0);
}

/* Weißer (oder Panel-definierter) Fill */
.nbx-actionCta::before{
  content:"";
  position:absolute;
  inset:0;
  background: var(--cta-fill);
  transform: translateX(-100%);
  transition: transform .35s cubic-bezier(.2,.9,.2,1);
  z-index:-1;
}

/* 🔥 Fill + Textfarbe nur beim Hover auf dem CTA selbst */
.nbx-actionCta:hover{
  color: var(--cta-texts);
}

.nbx-actionCta:hover::before{
  transform: translateX(0);
}







/* Panel mini line */
.nbx-mini{
  margin-top: 14px;
  font-family:'Poppins', sans-serif;
  color: white;
  line-height:1.55;
  position: relative;
  z-index: 1;
}

/* Bottom CTA */
.nbx-bottom{
  margin-top: clamp(18px, 3vw, 28px);
  text-align:center;
}

.nbx-all{
  position: relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 12px 186px;
  border-radius: 17px;
  text-decoration:none;

  color:white;
  font-weight:900;
  font-family:"Poppins", system-ui, sans-serif;

  background: #363636;
  overflow: hidden;

  transition: color .25s ease, transform .25s ease;
}

/* FILL-LAYER */
.nbx-all::before{
  content:"";
  position:absolute;
  inset:0;
background: linear-gradient(
  90deg,
  #b2268d 0%,
  #b5005d 45%,
  #26adb2 100%
);  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s cubic-bezier(.4,0,.2,1);
  z-index:-1;
}

/* HOVER */
.nbx-all:hover{
  color:white;
  transform: translateY(-2px);
  border: none;
}

.nbx-all:hover::before{
  transform: scaleX(1);
}

/* Responsive */
@media (max-width: 980px){
  .nbx-grid{ grid-template-columns: 1fr; }
  .nbx-panel{ min-height: auto; }
}

@media (max-width: 560px){
  .nbx-action{ grid-template-columns: 1fr; }
  .nbx-actionCta{
    opacity:1;
    transform:none;
    justify-content:flex-end;
  }
  .nbx-actionMedia{ aspect-ratio: 16 / 5; }
}

/* Touch devices: show CTA by default + tap feedback */
@media (hover:none){
  .nbx-actionCta{ opacity:1; transform:none; }
  .nbx-action:active{ transform: translateY(-2px); }
}

/* Accessibility */
.nbx-action:focus-visible,
.nbx-all:focus-visible{
  outline: 3px solid rgba(190,0,95,.55);
  outline-offset: 3px;
}
















/* =========================
   COMPACT MODE
========================= */
.nb-merged--compact{
  padding: clamp(18px, 3.5vw, 46px) clamp(12px, 3vw, 28px);
}

.nb-merged--compact .nb-merged__panel{
  padding: clamp(14px, 2.6vw, 22px);
  gap: clamp(40px, 1.6vw, 34px);
}

/* Cards weniger “luftig” */
.nb-merged--compact .nb-card{
  padding: clamp(14px, 2vw, 18px);
}

/* Offer-Card: 2 Spalten bleiben, aber kompakter */
.nb-merged--compact .nb-card--offer{
  gap: clamp(12px, 2vw, 16px);
  margin-top: 20px;
  align-items: start;
}

/* MEDIA: aspect-ratio killt dich -> fixe, kleinere Höhen */
.nb-merged--compact .nb-media{
  aspect-ratio: auto !important;
  height: clamp(120px, 14vw, 200px);
}

/* 4er Grid im Privatbereich: noch kompakter */
.nb-merged--compact .nb-card__media--4 .nb-media{
  height: clamp(105px, 12vw, 170px);
}

/* Optional: Text block etwas enger (ohne dass es gequetscht wirkt) */
.nb-merged--compact .sixteentextone-text,
.nb-merged--compact .fifteentextone-text,
.nb-merged--compact .nachfilmtextone-text{
  line-height: 1.25;
  margin-top: 8px;
}

/* Optional: wenn du die Offer-Cards noch kürzer willst:
   Text nach X Zeilen hart kappen */
@supports (-webkit-line-clamp: 1){
  .nb-merged--compact .sixteentextone-text,
  .nb-merged--compact .fifteentextone-text{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .nb-merged--compact .sixteentextone-text{ -webkit-line-clamp: 6; }
  .nb-merged--compact .fifteentextone-text{ -webkit-line-clamp: 7; }
}



/* =========================
   MERGED LAYOUT (RESPONSIVE)
========================= */
.nb-merged{
  background:#CDD1DC;
  padding: clamp(36px,6vw,90px) clamp(14px,4vw,36px);
   display: flex;
  justify-content: center;
}

.nb-merged__panel{
  background:#CDD1DC;              /* das alte schwarze “BG” wird jetzt ein Master-Panel */
  border-radius: 12px;
  padding: clamp(18px,3.2vw,34px);
  display: grid;
  gap: clamp(14px,2.2vw,20px);
  align-items: center;
max-width: 1400px;
}

/* Cards (deine ehem. Sections) */
.nb-card{



  border-radius: 18px;
  position: relative;
  overflow: hidden;
  padding: clamp(26px,2.4vw,46px);
background: black;
  /* 🔽 DAS ist der Abstand nach außen */
  margin: clamp(12px, 2vw, 24px);

  transition: background-color .35s ease, transform .25s ease, box-shadow .35s ease;
}



/* “hover wird panel” */
.nb-card:hover,
.nb-card:focus-within{
  background: var(--hover, #99cdcf);
  transform: translateY(-4px);
  box-shadow:
    0 18px 44px rgba(0,0,0,.30),
    inset 0 0 0 1px rgba(255,255,255,.18);
}

/* Intro Card: simpler, full width */
/* =========================
   INTRO CARD – CLEAN MODE
========================= */

/* kein Hover, kein Lift, kein Panel */
.nb-card--intro,
.nb-card--intro:hover,
.nb-card--intro:focus-within{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transform: none !important;
}

/* mehr Raum */
.nb-card--intro{
  padding: clamp(28px, 5vw, 56px) !important;
  margin-bottom: clamp(22px, 4vw, 40px);
}

/* Typo darf atmen */
.nb-card--intro .nachfilmtitleone-text{
  margin-bottom: 14px !important;
}

.nb-card--intro .nachfilmtextone-text{
  margin-top: 10px !important;
  max-width: 860px; /* gibt dem Text Ruhe */
}

/* Optional: dezente Abtrennung nach unten */
.nb-card--intro::after{
  content:"";
  display:block;
  margin-top: clamp(22px, 4vw, 36px);
  height:1px;

  
}

/* Offer Card Layout: text + media */
.nb-card--offer{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: clamp(14px,2.2vw,22px);
  align-items: start;
  border: 7px solid #b2268d;
  background: none;
    box-shadow: 0 17px 34px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08) inset;
    cursor: pointer;

}

.nb-card--offer:hover{
  border: none;

}


/* Offer Card Layout: text + media */
.nb-card--priv{

  border: 7px solid #26adb2;


}

.nb-card--offer:hover{
  border: none;

}



/* responsive */
@media (max-width: 980px){
  .nb-card--offer{ grid-template-columns: 1fr; }
}

/* Textblock */
.nb-card__content{
  min-width: 0;
}

/* Media grid */
.nb-card__media{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.nb-card__media--4{
  grid-template-columns: 1fr 1fr;
}

@media (max-width: 980px){
  .nb-card__media--4{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px){
  .nb-card__media--4{ grid-template-columns: 1fr; }
}

/* Media tile: img -> vid on hover */
.nb-media{
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 16/9;
  box-shadow: 0 14px 30px rgba(0,0,0,.35);
}

.nb-card__media--4 .nb-media:nth-child(3),
.nb-card__media--4 .nb-media:nth-child(4){
  aspect-ratio: 1/1; /* wie deine kleinen squares */
}

.nb-media__img,
.nb-media__vid{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  transition: opacity .55s ease;
}

.nb-media__vid{ opacity: 0; }

/* wenn die ganze Card gehovert wird: videos rein */
.nb-card:hover .nb-media__vid,
.nb-card:focus-within .nb-media__vid{ opacity: 1; }

.nb-card:hover .nb-media__img,
.nb-card:focus-within .nb-media__img{ opacity: 0; }

/* =========================
   BUTTONS
========================= */
.nb-btnbz{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top: 14px;
  padding: 12px 48px;
  border-radius: 7px;
  text-decoration:none;
  font-family: 'Poppins';
  font-weight: 600;
  color:#b2268d;
  background:none;
  transition: transform .22s ease, filter .22s ease, background-color .22s ease, color .22s ease;
  border: 5px solid #b2268d ;
}

.nb-card--offer:hover .nb-btnbz{
    border: 5px solid white ;

  color: white;
  background:none;
}


.nb-card--offer:hover .nb-btnbz:hover{
  background:#b2268d87;
}




.nb-btnpriv{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top: 14px;
  padding: 12px 48px;
  border-radius: 7px;
  text-decoration:none;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  color:#26adb2;
  background:none;
  transition: transform .22s ease, filter .22s ease, background-color .22s ease, color .22s ease;
  border: 5px solid #26adb2 ;
}

.nb-card--priv:hover .nb-btnpriv{
    border: 5px solid white ;

  color: white;
  background:none;
}


.nb-card--priv:hover .nb-btnpriv:hover{

  background:#26adb28a;
}







.nb-btn:hover{ transform: translateY(-2px); filter: brightness(1.06); }

.nb-btn--alt{ padding: 12px 22px; }

/* =========================
   HOVER TEXT COLOR (wie bei dir)
   -> jetzt automatisch für alle Cards
========================= */
.nb-card:hover .fifteentitleone-text,
.nb-card:hover .fifteentitletwo-text,
.nb-card:hover .fifteentextone-text,
.nb-card:hover .sixteentitleone-text,
.nb-card:hover .sixteentitletwo-text,
.nb-card:hover .sixteentextone-text,
.nb-card:hover .nachfilmtitleone-text,
.nb-card:hover .nachfilmtextone-text{
  color:#f4f4f4 !important;
}

.nb-card:hover .sixteentitletwo-text{
  text-decoration-color:#b2268d !important;
}

.nb-card:hover .sixteentitletwo-text{
  text-decoration-color:white !important;
}


/* underline-color beim hover (dein pattern) */
.nb-card:hover .fifteentitletwo-text{
  text-decoration-color: white;
}




/* =========================
   RIGHT MEDIA: PORTRAITS KEEP + SIDE BY SIDE
========================= */

/* Rechtes Medienfeld: 2 Spalten */
.nb-merged--compact .nb-card__media{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-content: start;
}

/* =========================
   PORTRAIT FIX (always works)
========================= */

/* Baseline: Tiles lassen wir über aspect-ratio wachsen, nicht über height */
.nb-merged--compact .nb-media{
  height: auto !important;
}

/* Landscape Standard */
.nb-merged--compact .nb-media:not(.is-portrait):not(.is-square){
  aspect-ratio: 16 / 9 !important;
}

/* Square */
.nb-merged--compact .nb-media.is-square{
  aspect-ratio: 1 / 1 !important;
}

/* Portrait (9:16) – das ist Hochformat */
.nb-merged--compact .nb-media.is-portrait{
  aspect-ratio: 9 / 16 !important;
  min-height: 220px;              /* falls Grid mal zu klein wird */
}

/* damit die Inhalte sicher füllen */
.nb-merged--compact .nb-media__img,
.nb-merged--compact .nb-media__vid{
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* Wenn du 3 Tiles hast: erstes full width, darunter 2 nebeneinander */
.nb-merged--compact .nb-card__media.is-3{
  grid-template-columns: 1fr 1fr;
}
.nb-merged--compact .nb-card__media.is-3 .nb-media:nth-child(1){
  grid-column: 1 / -1;
}

/* Mobile: 1 Spalte */
@media (max-width: 720px){
  .nb-merged--compact .nb-card__media{
    grid-template-columns: 1fr;
  }
}


/* =========================
   INTRO LINE FIX (FÜR DEN BETRIEB…)
========================= */
.nb-card--intro .nachfilmtitleone-text{
  position: static !important;
  margin: 0 0 10px !important;
  max-width: 900px;
  line-height: 1;
  letter-spacing: .02em;
  font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(18px, 2.2vw, 26px);
  color: #00000038;
  text-transform: uppercase;
}

.nb-card--intro .highlightnachfilm1,
.nb-card--intro .highlightnachfilm2,
.nb-card--intro .highlightnachfilm3{
  display: inline;
  white-space: nowrap; /* verhindert komische Zeilenbrüche pro Wort */
}

.nb-card--intro .nachfilmtextone-text{
  position: static !important;
  margin: 0 !important;
  max-width: 900px;
  font-family: 'LouisGeorgeCafe', sans-serif;
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.45;
  color: rgba(0, 0, 0, 0.82);
}

/* Optional: Farb-Akzente wieder sauber */
.nb-card--intro .highlightnachfilm1{ color:#b2268d; }
.nb-card--intro .highlightnachfilm2{ color:#0db3bc; }
.nb-card--intro .highlightnachfilm3{ color:#000000; }



/* =========================
   INTRO LINE FIX (FÜR DEN BETRIEB…)
========================= */
.nb-card--intro .nachfilmtitleone-text{
  position: static !important;
  margin: 0 0 10px !important;
  max-width: 1400px;
  line-height: 1.05;
  letter-spacing: .02em;
  font-family: 'LEMONMILKBOLD', sans-serif;
  font-size: clamp(58px, 2.2vw, 66px);
  color: #00000038;
  text-transform: uppercase;
}

.nb-card--intro .highlightnachfilm1,
.nb-card--intro .highlightnachfilm2,
.nb-card--intro .highlightnachfilm3{
  display: inline;
  white-space: nowrap; /* verhindert komische Zeilenbrüche pro Wort */
}

.nb-card--intro .nachfilmtextone-text{
  position: static !important;
  margin: 0 !important;
  max-width: 900px;
  font-family: 'Poppins';
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.45;
  color: black;
}

/* Optional: Farb-Akzente wieder sauber */
.nb-card--intro .highlightnachfilm1{ color:#b2268d; }
.nb-card--intro .highlightnachfilm2{ color:#0db3bc; }
.nb-card--intro .highlightnachfilm3{ color:black; }







/* =========================
   HARD RESET for old absolute text styles
   (only inside the merged panel)
========================= */
.nb-merged .sixteentitleone-text,
.nb-merged .sixteentitletwo-text,
.nb-merged .sixteentextone-text,
.nb-merged .fifteentitleone-text,
.nb-merged .fifteentitletwo-text,
.nb-merged .fifteentextone-text,
.nb-merged .nachfilmtitleone-text,
.nb-merged .nachfilmtextone-text,
.nb-merged .einszueinsdown-button,
.nb-merged .firmendown-button{
  position: static !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  z-index: auto !important;
  max-width: 720px; /* kannst du erhöhen */
}

/* Spacing + Typo sauber */
.nb-merged .sixteentitleone-text,
.nb-merged .fifteentitleone-text{
  margin: 0 0 8px !important;
}

.nb-merged .sixteentitletwo-text,
.nb-merged .fifteentitletwo-text{
  margin: 0 0 12px !important;
  line-height: 1.05;
}

.nb-merged .sixteentextone-text,
.nb-merged .fifteentextone-text{
  margin: 0 0 14px !important;
  line-height: 1.2;
}

/* Buttons: nicht mehr "floating/absolute" */
.nb-merged .einszueinsdown-button,
.nb-merged .firmendown-button{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin-top: 12px !important;
  width: fit-content;
}




/* FORCE: text + media columns exist */
.nb-merged .nb-card--offer{
  display: grid !important;
  grid-template-columns: minmax(320px, 1.15fr) minmax(260px, .85fr) !important;
  align-items: start;
  gap: clamp(14px, 2.2vw, 22px);
}

@media (max-width: 980px){
  .nb-merged .nb-card--offer{
    grid-template-columns: 1fr !important;
  }
}



/* MEDIA column must be visible */
.nb-merged .nb-card__media{
  display: grid !important;
  gap: 12px;
  min-width: 0;
  opacity: 1 !important;
  visibility: visible !important;
}

/* tiles show up */
.nb-merged .nb-media{
  display: block !important;
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255,255,255,.06);
}

/* give them actual height (otherwise they can collapse) */
.nb-merged--compact .nb-media{
  height: clamp(120px, 14vw, 210px) !important;
  aspect-ratio: auto !important;
}

.nb-merged .nb-media__img,
.nb-merged .nb-media__vid{
  display:block !important;
  width:100%;
  height:100%;
  object-fit: cover;
}















    .section-16 {
      background-color: #1b1b1b;
      padding: 300px 0;
      position: relative;
      z-index: 2;
      transition: background-color 0.4s ease;
    }
    
    .section-16:hover {
      background-color: #b2268d; /* gewünschte Hover-Farbe */
    }

    .section-16:hover .sixteentitleone-text,
.section-16:hover .sixteentitletwo-text,
.section-16:hover .sixteentextone-text {
color: #f3f3f3; /* Neue Farbe beim Hover – hier: Weiß */
}


    .sixteentitleone-text {
      font-family: 'Poppins', sans-serif;
      font-size: clamp(17px, 3vw, 21px);
      color: #010101;
      position: absolute;
      left: 4%;
      top: 5%;
      z-index: 3;
    }
    
    
    .sixteentitletwo-text {
      font-family: 'LEMONMILKBOLD', sans-serif;
      font-size: clamp(21px, 2.3vw, 22px);
      text-decoration-line: underline;    
    text-decoration-color: #b2268d ;
    text-decoration-thickness: 8px;
      max-width: 500px;
      color: #b2268d;
      position: absolute;
      left: 4%;
      top: 12%;
      z-index: 3;
      line-height: 1;
    }
    
    .sixteentextone-text {
      font-family: 'Poppins';
      font-size: clamp(18px, 2vw, 20px);
      max-width: 500px;
      color: #000000;
      position: absolute;
      left: 4%;
      top: 24%;
      z-index: 4;
    line-height: 1.2;
    }

    .section-16:hover .sixteentitletwo-text {
      text-decoration-color: #b2268d;
    }






















.firmendown-button {
display: inline-block;
position: absolute;
bottom: 17%;
left: 4%;
padding: 10px 158px; /* ↑↓ ←→ Abstand */
font-size: clamp(14px, 1.4vw, 18px); /* Skalierbare Größe */
font-family: 'Louisgeorgecafebold', sans-serif;
color: #fff;
background-color: #ad0062;
border: none;
border-radius: 8px;
text-decoration: none;
z-index: 6;
}

.section-16:hover .firmendown-button {
background-color: #2d0016;  

transition: background-color 0.4s ease;
}


.section-16:hover .firmendown-button:hover {
background-color: #957785;  

transition: background-color 0.4s ease;
}










.section-15 {
background-color: #1b1b1b;  
padding: 300px 0;
position: relative;
z-index: 2;
transition: background-color 0.4s ease;
}

.section-15:hover {
background-color: #99cdcf; /* gewünschte Hover-Farbe */
}

.section-15:hover .fifteentitleone-text,
.section-15:hover .fifteentitletwo-text,
.section-15:hover .fifteentextone-text {
color: #ffffff; /* Neue Farbe beim Hover – hier: Weiß */
}



.section-15:hover .fifteentitletwo-text {
text-decoration-color: #0db3bc;
}




.section-15:hover .einszueinsdown-button:hover {
display: inline-block;
position: absolute;

color: #5c5f60;
background-color: #e7e7e7;
border: none;
text-decoration: none;
z-index: 6;
}



.fifteentitleone-text {
font-family: 'Poppins';
font-size: clamp(17px, 3vw, 21px);
max-width: 500px;
color: black;
position: absolute;
left: 4%;
top: 5%;
z-index: 3;
}



    
  
    .fifteentitletwo-text {
      font-family: 'LEMONMILKBOLD';
      font-size: clamp(21px, 2.3vw, 22px);
      text-decoration-line: underline;    
    text-decoration-color: #26adb2 ;
    text-decoration-thickness: 8px;
      max-width: 500px;
      color: #26adb2;
      position: absolute;
      left: 4%;
      top: 12%;
      z-index: 3;
      line-height: 1;
    }

.fifteentextone-text {
font-family: 'Poppins';
font-size: clamp(18px, 2vw, 20px);
max-width: 500px;
color: black;
position: absolute;
left: 4%;
top: 24%;
z-index: 4;
line-height: 1.2;
}


.einszueinsdown-button {
display: inline-block;
position: absolute;
bottom: 12%;
left: 4%;
padding: 10px 58px; /* ↑↓ ←→ Abstand */
font-size: clamp(14px, 1.4vw, 18px); /* Skalierbare Größe */
font-family: 'Poppins', sans-serif;
color: #fff;
background-color: #5c5f60;
border: none;
border-radius: 4px;
text-decoration: none;
z-index: 6;
}









.mediamen-container {
width: 23%;
top:5%;
right: 8%;
position: absolute;
border-radius: 11px;
z-index: 2; /* Damit der Schatten über dem oberen Bereich liegt */
aspect-ratio: 3 / 4; /* Optional für gleiches Seitenverhältnis */
overflow: hidden;}

.defaultmen-media,
.hovermen-media {
width: 100%;
height: 84%;
position: absolute;
top: 0;
left: 0;
object-fit: cover; /* oder 'contain', je nachdem was du brauchst */
transition: opacity 0.6s ease-in-out;
border-radius: 8px;
pointer-events: none;
}

.hovermen-media {
opacity: 0;
z-index: 2;
}

.section-15:hover .hovermen-media {
opacity: 1;
}

.section-15:hover .defaultmen-media {
opacity: 0;
}




















.mediaboth-container {
width: 27%;
top:5%;
right: 34%;
position: absolute;
border-radius: 11px;
z-index: 2; /* Damit der Schatten über dem oberen Bereich liegt */
aspect-ratio: 16 / 9; /* Optional für gleiches Seitenverhältnis */
overflow: hidden;}

.defaultboth-media,
.hoverboth-media {
width: 100%;
height: 84%;
position: absolute;
top: 0;
left: 0;
object-fit: cover; /* oder 'contain', je nachdem was du brauchst */
transition: opacity 0.6s ease-in-out;
border-radius: 8px;
pointer-events: none;
}

.hoverboth-media {
opacity: 0;
z-index: 2;
}

.section-15:hover .hoverboth-media {
opacity: 1;
}

.section-15:hover .defaultboth-media {
opacity: 0;
}










.mediaprivatcort-container {
 width: 13%;
bottom:7%;
right: 34%;
position: absolute;
border-radius: 11px;
z-index: 2; /* Damit der Schatten über dem oberen Bereich liegt */
aspect-ratio: 1 / 1; /* Optional für gleiches Seitenverhältnis */
overflow: hidden;}

.defaultprivatcort-media,
.hoverprivatcort-media {
width: 100%;
height: 84%;
position: absolute;
top: 0;
left: 0;
object-fit: cover; /* oder 'contain', je nachdem was du brauchst */
transition: opacity 0.6s ease-in-out;
border-radius: 8px;
pointer-events: none;
}

.hoverprivatcort-media {
opacity: 0;
z-index: 2;
}

.section-15:hover .hoverprivatcort-media {
opacity: 1;
}

.section-15:hover .defaultprivatcort-media {
opacity: 0;
}









.mediabeach-container {
width: 13%;
bottom:7%;
right: 48%;
position: absolute;
border-radius: 11px;
z-index: 2; /* Damit der Schatten über dem oberen Bereich liegt */
aspect-ratio: 1 / 1; /* Optional für gleiches Seitenverhältnis */
overflow: hidden;}

.defaultbeach-media,
.hoverbeach-media {
width: 100%;
height: 84%;
position: absolute;
top: 0;
left: 0;
object-fit: cover; /* oder 'contain', je nachdem was du brauchst */
transition: opacity 0.6s ease-in-out;
border-radius: 8px;
pointer-events: none;
}

.hoverbeach-media {
opacity: 0;
z-index: 2;
}

.section-15:hover .hoverbeach-media {
opacity: 1;
}

.section-15:hover .defaultbeach-media {
opacity: 0;
}










   .dynamicfilm2-section {
position: relative;
height: 200px; /* Start-Höhe */
width: 100%;
overflow: hidden;
transition: height 0.8s ease;
background-color: #000;
display: none;
}

.dynamicfilm2-section.grow {
height: 700px; /* Zielhöhe beim Scroll */
}




/* Mobilfreundlich */
@media (max-width: 768px) {
  .bg-section h2 {
    font-size: 28px;
  }

  .bg-section p {
    font-size: 16px;
  }

  .btn {
    font-size: 16px;
  }
}



/* =========================================================
   TIGHTEN: Intro + Offer-Panels enger (horizontal + generell)
   -> am ENDE der CSS einfügen
========================================================= */

/* 1) Außenluft: Section + Panel minimal enger */
.nb-merged{
  padding: clamp(26px, 4.2vw, 60px) clamp(10px, 2.2vw, 18px);
}

.nb-merged__panel{
  max-width: 1320px;                /* war 1400 -> wirkt kompakter */
  padding: clamp(14px, 2.2vw, 18px); /* weniger Innenrand */
  gap: clamp(10px, 1.4vw, 16px);     /* weniger Abstand zwischen Cards */
}

/* 2) Cards weniger “Rand nach außen” (dein margin macht’s breit) */
.nb-merged .nb-card{
  margin: clamp(8px, 1.2vw, 14px);   /* war bis 24px -> macht alles breiter */
  padding: clamp(18px, 2vw, 26px);   /* war sehr groß */
}

/* 3) Intro: Headline soll nicht “ziehen” -> wrap erlauben + etwas kleiner */
.nb-card--intro{
  padding: clamp(18px, 3.4vw, 34px) !important;
  margin-bottom: clamp(8px, 1.8vw, 14px) !important;
}

.nb-card--intro .nachfilmtitleone-text{
  max-width: 1100px !important;
  font-size: clamp(34px, 4.2vw, 58px) !important; /* deine clamp(58..66) ist zu fett */
  line-height: 1.02 !important;
  letter-spacing: .01em !important;
  color: rgba(0,0,0,.72) !important; /* statt #00000038 -> wird “echter” */
}

/* WICHTIG: deine nowraps machen’s unnötig breit -> raus damit */
.nb-card--intro .highlightnachfilm1,
.nb-card--intro .highlightnachfilm2,
.nb-card--intro .highlightnachfilm3{
  white-space: normal !important;
}

/* Intro-Text etwas enger */
.nb-card--intro .nachfilmtextone-text{
  max-width: 860px !important;
  margin-top: 6px !important;
  line-height: 1.35 !important;
}

/* 4) Offer-Panels: horizontal enger (Text/Media näher zusammen) */
.nb-merged .nb-card--offer{
  grid-template-columns: 1.2fr .8fr !important; /* Media etwas größer, wirkt “näher” */
  gap: clamp(10px, 1.4vw, 14px) !important;     /* war bis 22px */
}

/* Optional: Border wirkt dicker als es sein muss -> minimal schlanker */
.nb-merged .nb-card--offer{
  border-width: 6px;
}

/* 5) Media-Grids: enger + weniger “Luft” */
.nb-merged .nb-card__media{
  gap: 10px; /* war 12 */
}

/* 6) Compact: deine Media-Höhen nicht zu groß, sonst wirkt’s wieder breit */
.nb-merged--compact .nb-media{
  height: clamp(112px, 13vw, 190px) !important; /* leicht runter */
}

/* Mobile: alles bleibt clean */
@media (max-width: 980px){
  .nb-merged__panel{ max-width: 100%; }
  .nb-merged .nb-card{ margin: 10px 0; }
}















.color-swipe {
position: absolute;
left: 49%;
bottom: 8%;
display: inline-block;
font-family: 'PoppinsRegular';
padding: 8px 122px;
border: none;
border-radius: 8px;
font-size: 12px;
font-weight: 600;
color: #fff;
background: #000;      
cursor: pointer;
overflow: hidden;
transition: background-color 0.6s ease;
}

/* Overlay für den Slide */
.color-swipe::after {
content: "";
position: absolute;
top: 0;
left: -75%;
width: 10%;
height: 100%;
background:#e2e2dd;  /* unsichtbarer diagonaler „Glanz“ */
transform: skewX(-20deg);
opacity: 0;
}

/* Hover: erst Slide, dann Hintergrund wird rot */
.color-swipe:hover::after {
opacity: 1;
animation: swipe 1.2s forwards;
}
.color-swipe:hover {
background: #ca0065;   /* Endfarbe Rot */
}

@keyframes swipe {
0%   { left: -75%; }
100% { left: 125%; }
}














    .back-to-top {
      position: fixed;
      bottom: 30px;
      left: 50%;
      text-decoration: none;
      background-color: #b60046;
      color: white;
      font-size: 30px;
      padding: 10px 18px;
      border-radius: 50%;
      transition: background-color 0.3s ease;
      z-index: 999;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    }
    
    .back-to-top:hover {
      background-color: #500024;
      color: #ffffff;
    }