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


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









@font-face {
  font-family: 'LouisGeorgeCafe';
  src: url('../Fonts/LouisGeorgeCafe.ttf') format('truetype');
}

@font-face {
  font-family: 'hellony';
  src: url('../Fonts/Hello Newyork.otf') format('opentype');
}

@font-face {
  font-family: 'Avenirroman';
  src: url('../Fonts/AvenirLTStd-Roman.otf') format('opentype');
}

@font-face {
  font-family: 'Avenirmedium';
  src: url('../Fonts/AvenirLTStd-Medium.otf') format('opentype');
}

@font-face {
  font-family: 'Avenirlight';
  src: url('../Fonts/AvenirLTStd-Light.otf') format('opentype');
}

@font-face {
  font-family: 'Beauty';
  src: url('../Fonts/BeautyDemo.otf') format('opentype');
}

@font-face {
  font-family: 'Avenirheavy';
  src: url('../Fonts/AvenirLTStd-Heavy.otf') format('opentype');
}

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

@font-face {
  font-family: 'LEMONMILKBOLD';
  src: url('../Fonts/LEMONMILK-Bold.otf') format('opentype');
}

@font-face {
  font-family: 'LEMONMILKLIGHT';
  src: url('../Fonts/LEMONMILK-Light.otf') format('opentype');
}

@font-face {
  font-family: 'LEMONMILK';
  src: url('../Fonts/LEMONMILK-Regular.otf') format('opentype');
}

@font-face {
  font-family: 'LEMONMILKLight';
  src: url('../Fonts/LEMONMILK-Light.otf') format('opentype');
}

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

@font-face {
  font-family: 'SignatureDecember';
  src: url('../Fonts/SignatureDecember.otf') format('opentype');
}

@font-face {
  font-family: 'Autobiography';
  src: url('../Fonts/Autobiography.otf') format('opentype');
}

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

/* === Poppins Variationen === */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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






.section-1{
  position: relative;
  min-height: 100vh;
  overflow: hidden;              /* <— clip ersetzen! */
  background-image: url("Leistungsübersicht.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll; /* optional: fixed → kann Fehler verursachen */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-align: center;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
}

/* Optional: leichter Overlay für bessere Lesbarkeit */
.section-1::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
}

/* Inhalt bleibt über dem Overlay */
.section-1 > *{
  position: relative;
}

.section-1::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;                /* unten ansetzen */
  height:140px;                    /* Schattenhöhe */
  pointer-events:none;
  z-index:2;                       /* über Bild, unter Text */
}




/* ====== 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(1120px, 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: start; }

/* 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);
}



 /* kompakter ab 900px */
@media (max-width: 900px){
  .NULNEBLA2-wrapper{ width: 52px; height: 52px; }
  .NULNEBLA2-text{ font-size: clamp(18px, 2.2vw, 22px); }
}

/* === Handy-Version: vertikale Pille === */
@media (max-width: 680px){
  .notch-bar{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 18px 20px;
    width: min(88vw, 560px);
    border-radius: 40px;
  }

  /* Logo oben */
  .nav-logo{
    order: 1;
    margin-bottom: 4px;
  }

  /* Links danach vertikal untereinander */
  .nav-left, .nav-right{
    order: 2;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: center;
  }

  /* Booking ganz unten */
  .notch-booking{
    order: 3;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding-top: 6px;
  }

  /* Schriftgrößen & Button kleiner */
  .booking-label{ font-size: 12px; }
  .image-hover-link{ width: 82px; height: 32px; }
  .NULNEBLA2-wrapper{ width: 48px; height: 48px; }
  .NULNEBLA2-text{ font-size: 18px; }

  /* Untermenüs einkürzen */
  .nav-left li:nth-child(n+3),
  .nav-right li:nth-child(n+3){ display: none; }
}

/* sehr kleine Phones */
@media (max-width: 400px){
  .notch-bar{ padding: 16px 14px; width: 92vw; gap: 10px; }
  .booking-label{ font-size: 11px; }
  .image-hover-link{ width: 74px; height: 30px; }
  .NULNEBLA2-text{ font-size: 16px; letter-spacing: 0; }
}








/* ====== MOBILE (VERTIKALE PILL + SICHTBARER HAMBURGER) ====== */
@media (max-width: 680px){
  .notch-bar{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 18px 20px;
    width: min(92vw, 540px);
    border-radius: 42px;
    background: rgba(0,0,0,0.9);
    backdrop-filter: blur(10px);
  }

  /* Logo */
  .nav-logo{
    order: 1;
  }
  .NULNEBLA2-wrapper{ width: 52px; height: 52px; }
  .NULNEBLA2-text{ font-size: 18px; }

  /* Hamburger sichtbar */
  .notch-hamburger{
    order: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px; height: 36px;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 10px;
    cursor: pointer;
    z-index: 10;
  }
  .notch-hamburger span{
    display: block;
    width: 22px;
    height: 2.5px;
    background: #fff;
    border-radius: 1px;
    transition: all .25s ease;
  }
  .notch-bar.drawer-open .notch-hamburger span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
  .notch-bar.drawer-open .notch-hamburger span:nth-child(2){ opacity: 0; }
  .notch-bar.drawer-open .notch-hamburger span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

  /* Booking */
  .notch-booking{
    order: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  .booking-label{ font-size: 12px; }
  .image-hover-link{ width: 82px; height: 32px; }

  /* Drawer (Menü) */
  .notch-drawer{
    order: 4;
    width: 100%;
    text-align: center;
    border-top: 1px solid rgba(255,255,255,.12);
    padding-top: 10px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height .3s ease, opacity .25s ease;
  }
  .notch-bar.drawer-open .notch-drawer{
    max-height: 300px;
    opacity: 1;
  }
  .notch-drawer .nav-left,
  .notch-drawer .nav-right{
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .notch-drawer a{
    font-size: 15px;
    color: #fff;
    text-decoration: none;
    opacity: .9;
  }
  .notch-drawer a:hover{ opacity: 1; color: #55bb81; }

  /* Desktop-Navigation verstecken */
  .nav-left, .nav-right{ display: none; }
}
















      



.nb-firm{
  background:#CDD1DC;
  padding: clamp(32px,5vw,56px) clamp(16px,5vw,48px);
  color:#111;
  font-family:Poppins, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.nb-firm__container{
  max-width:1200px;
  margin:0 auto;
}

/* Headline */
.nb-firm__eyebrow{
  margin:0 0 4px;
  font:600 14px/1.3 'Avenirheavy', Poppins, sans-serif;
  letter-spacing:.08em;
}
.nb-firm__title{
  margin:0 0 16px;
  font:800 clamp(26px,4.4vw,40px)/1 'LEMONMILK', Poppins, sans-serif;
  text-transform:uppercase;
}
.nb-firm__lead{
  margin:0 0 24px;
  max-width:720px;
  font-size:15px;
}

/* Grid layout */
.nb-firm__grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr)) minmax(220px, 260px);
  gap: clamp(16px,3vw,32px);
  align-items:flex-start;
  margin-bottom:24px;
}

/* Columns */
.nb-firm__col{
  background: rgba(0,0,0,.02);
  border-radius:16px;
  padding:18px 16px 16px;
}

/* farben */
.nb-firm__col--nutri{ --col:#7b1534; }
.nb-firm__col--move{ --col:#007339; }
.nb-firm__col--skill{ --col:#8b4b14; }

/* Linie oben mit Punkt */
.nb-firm__line{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.nb-firm__dot{
  width:14px; height:14px; border-radius:999px;
  background:var(--col);
}
.nb-firm__line-bar{
  flex:1;
  height:3px;
  border-radius:999px;
  background:#222;
}

/* Spaltentitel */
.nb-firm__col-title{
  margin:0 0 12px;
  font:700 15px/1.3 'LEMONMILK', Poppins, sans-serif;
  text-transform:uppercase;
  letter-spacing:.05em;
}

/* Slots */
.nb-firm__slots{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.nb-firm__slot{
  display:flex;
  align-items:center;
  gap:16px;
  position:relative;
}

.nb-firm__slot-box{
  flex:1;
  height:40px;
  border-radius:12px;
  border:3px solid var(--col);
  background:transparent;
}

.nb-firm__slot-circle{
  width:26px; height:26px;
  border-radius:999px;
  border:3px solid var(--col);
}

/* X über Slot */
.nb-firm__slot--off::before,
.nb-firm__slot--off::after{
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  width:85%;
  height:3px;
  background:#111;
  transform-origin:center;
  pointer-events:none;
  opacity:.9;
}
.nb-firm__slot--off::before{ transform:rotate(42deg); }
.nb-firm__slot--off::after{ transform:rotate(-42deg); }

/* QUINfinity-Block rechts */
.nb-firm__quin{
  background:#111;
  color:#fff;
  border-radius:18px;
  padding:18px 16px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.nb-firm__quin-label{
  margin:0;
  font:600 13px/1.3 'Avenirheavy', Poppins, sans-serif;
  letter-spacing:.08em;
}
.nb-firm__quin-title{
  margin:0 0 8px;
  font:800 16px/1.2 'LEMONMILK', Poppins, sans-serif;
}

/* kleine Ampel */
.nb-firm__traffic{
  display:inline-flex;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background:#333;
  align-self:flex-start;
}
.nb-firm__traffic-light{
  width:12px; height:12px; border-radius:999px;
}
.nb-firm__traffic-light--red{ background:#c21e65; }
.nb-firm__traffic-light--yellow{ background:#f4c048; }
.nb-firm__traffic-light--green{ background:#1f9e55; }

/* Farbpillen */
.nb-firm__quin-pills{
  display:flex;
  gap:8px;
  margin-bottom:4px;
}
.nb-firm__pill{
  width:26px; height:26px;
  border-radius:999px;
  border:3px solid currentColor;
}
.nb-firm__pill--orange{ color:#c46a27; }
.nb-firm__pill--wine{ color:#7b1534; }
.nb-firm__pill--berry{ color:#a01d5a; }
.nb-firm__pill--green{ color:#1f9e55; }

/* Bild-Platzhalter */
.nb-firm__quin-image{
  margin-top:6px;
  border-radius:12px;
  overflow:hidden;
  background:#222;
  min-height:70px;
  display:grid;
  place-items:center;
}
.nb-firm__quin-image img{
  max-width:100%;
  height:auto;
  display:block;
}

/* optional Hover-Swap für 2 Bilder
.nb-firm__img-hover{ display:none; }
.nb-firm__quin-image:hover .nb-firm__img-default{ display:none; }
.nb-firm__quin-image:hover .nb-firm__img-hover{ display:block; }
*/

.nb-firm__bottom-copy{
  font-weight: 600;
  margin:0;
  font-size:14px;
  max-width:3480px;
}

/* RESPONSIVE */
@media (max-width: 960px){
  .nb-firm__grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 720px){
  .nb-firm__grid{
    grid-template-columns: 1fr;
  }
  .nb-firm__quin{
    order:-1;            /* QUINfinity-Block oben auf Mobile, falls du willst */
  }
}


/* =========================================
   NULNEBLA – FIRMENLEISTUNGEN (NB-GRID)
   ========================================= */

/* ===== Grid für Spalten ===== */
.nb-grid{
  margin-top:70px;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(20px,3vw,32px);
  max-width:1400px;
  margin-inline:auto;
}

/* ===== Spalten ===== */
.nb-col{
  border-radius:26px;
  box-shadow:0 20px 48px rgba(0,0,0,.4);
  padding:clamp(14px,2.6vw,22px);
  display:flex;
  flex-direction:column;
  gap:clamp(10px,2vw,16px);
  overflow:hidden;
}

/* Farben pro Bereich */
.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,
.nb-col-btn--span{
  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,
.nb-col-btn--span:hover{
  background:#fff;
  color:#111;
}

/* ===== Tiles (Bilder + Hover-Swap) ===== */
.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);
}

/* Die Bilder bestimmen die Höhe */
.nb-tile img{
  display:block;
  width:100%;
  height:auto;
  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;
}

/* ===== Responsiveness ===== */
@media(max-width:900px){
  .nb-grid{
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  }
}

@media(max-width:600px){
  .nb-col-title{
    font-size:20px;
  }
  .nb-col-btn{
    font-size:16px;
  }
}











/* 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.01);
   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;
}











.nb-showcase-link {
  display: block;
  color: inherit;         /* gleiche Farbe wie normaler Text */
  text-decoration: none;  /* kein Unterstrich */
}

.nb-showcase-link:hover,
.nb-showcase-link:focus,
.nb-showcase-link:active {
  color: inherit;         /* verhindert Farbwechsel */
  text-decoration: none;  /* verhindert Unterstrich auf Hover */
}





/* =========================================
   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:#000;
    border-radius:22px;
    padding: clamp(40px,6vw,80px);
    max-width:1040px;
    margin:0 auto;
    box-shadow:0 30px 80px rgba(0,0,0,.45);
    overflow:hidden;
    margin-bottom: clamp(160px, 8vw, 190px);
    }
    

  
  /* Gemeinsamer Container */
  .q-container{
    max-width:900px;
    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: white;

  }
  .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:#fff;
    font-family:'PoppinsSemiBold';
  }
  .q-brand{
    color:#ff2d8a;
    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;
    box-shadow:0 18px 40px rgba(0,0,0,.45);
    display:block;
  }
  
  /* Untertext */
  .q-line{
    font-size:clamp(15px,1.8vw,22px);
    font-weight:700;
    margin:0;
    color:#fff;
    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:900px;
    margin:0 auto;
    color:#fff;
    text-align:left;
  }
  
  /* Bewegung – Überschrift */
  .bewegung-inner h2{
    color:#fff;
    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:#ff2d8a;
    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:#f5f5f5;
    font-family:'PoppinsRegular';
    max-width:82%;
  }
  
  /* Button */
  .bewegung-btn{
    display:inline-block;
    margin-top:1em;
    padding:14px 28px;
    border:2px solid #fff;
    border-radius:12px;
    color:#fff;
    text-decoration:none;
    font-weight:700;
    font-size:clamp(16px,1.8vw,20px);
    font-family:'PoppinsRegular';
    transition:all .28s ease;
  }
  .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%;}
  }
  






















  /* SECTION-HINTERGRUND */
.nb-depth{
  background:#CDD1DC;
  padding:clamp(40px,8vw,90px) clamp(16px,5vw,40px);
}

/* INNEN-CONTAINER */
.nb-depth__inner{
  max-width: min(960px, 100%);
  margin:0 auto;
  text-align:center;
  font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color:#111;
}

/* EYEBROW */
.nb-depth__eyebrow{
  font-size:clamp(12px,1.3vw,14px);
  letter-spacing:0.12em;
  text-transform:uppercase;
  margin-bottom:6px;
}

/* TITLE */
.nb-depth__title{
  font-family:"LEMONMILKBOLD", "Avenir Next", system-ui, sans-serif;
  font-weight:800;
  font-size:clamp(26px,3.4vw,40px);
  line-height:1.1;
  margin:0 0 clamp(26px,3vw,34px);
}
.nb-depth__title span{
  display:inline-block;
}

/* LEAD */
.nb-depth__lead{
  font-weight:600;
  font-size:clamp(14px,1.6vw,18px);
  margin-bottom:clamp(16px,2vw,22px);
}

/* TEXT */
.nb-depth__text{
  font-weight:400;
  font-size:clamp(13px,1.4vw,16px);
  line-height:1.5;
  margin-bottom:clamp(18px,2.4vw,26px);
}
.nb-depth__text--small{
  font-size:clamp(13px,1.3vw,15px);
}

/* SUBHEAD */
.nb-depth__sub{
  font-weight:700;
  font-size:clamp(15px,1.7vw,18px);
  margin:clamp(18px,2.5vw,26px) 0 8px;
}







.uber-panel{
  margin-top: 22px;
  display: flex;                 /* ← zentrieren aktiviert */
  justify-content: center;       /* ← exakt mittig */
}

.uber-panel a{
  display: inline-block;
}

.uber-panel img{
  width: clamp(220px, 40vw, 400px);
  display: block;
  max-width: 100%;
  transition: all 1.4s ease;
}

.uber-panel img.hover{
  display: none;
}

.uber-panel:hover img.default{
  display: none;
}

.uber-panel:hover img.hover{
  display: block;
}
















.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; }
}





















/* Sektion */
.section-contact{
  background:#CDD1DC;            /* wie auf deiner Seite */
  color:#fff;
  padding: clamp(40px,6vw,80px)  clamp(20px,6vw,72px);
  position: relative;
  overflow: hidden;
}

/* Innerer Grid-Container: 3 Spalten wie im Bild */
.contact-inner{
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr clamp(280px,28vw,420px) 1fr;
  gap: clamp(16px,3vw,48px);
  align-items: center;
}

/* Linke Spalte: Headline */
.contact-title{
  font-family: 'PoppinsSemiBold', system-ui, sans-serif;
  font-size: clamp(42px,10vw,120px);
  line-height: .95;
  margin: 0;
  color:#0b0b0b;                  /* dein Magenta */
  letter-spacing: .01em;
  font-family: 'LEMONMILKBOLD';
}


.h2s{
 
  color:#df2b75;                  /* dein Magenta */

}


/* Mittig: Portrait als runder Frame */
.contact-figure{ 
  margin:0; position: relative; display:grid; place-items:center;overflow: visible;
}
.contact-photo{
  width: 70%;
  aspect-ratio: 1/1;
  object-fit: cover;
}

/* Optionales Badge unten-links am Foto */
.contact-badge{
  position:absolute; left: 6%; bottom: 6%;
  width: clamp(56px,8vw,92px);
  aspect-ratio:1/1; border-radius:50%;
  background:#222; padding:8px;
  box-shadow: 0 10px 24px rgba(0,0,0,.4);
}

/* Rechte Spalte: Info */
.contact-right{ text-align: left; }
.contact-label{
  margin: 0 0 .35em;
  color: #ececec;
  font-size: clamp(14px,1.6vw,18px);
    font-family: 'PoppinsRegular';

}
.contact-name{
  margin: 0 0 .35em;
  line-height: 0.9;
  font-size: clamp(18px,2.2vw,28px);
  font-weight: 800;
  letter-spacing:.02em;
  font-family: 'LEMONMILK';

}
.contact-mail{
  font-size: clamp(16px,1.9vw,22px);
  font-family: 'PoppinsSemiBold';
  color:#df2b75; 
  text-decoration:none;
  border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.contact-mail:hover{
  color:#fff;
  ;
}

/* Responsiv: auf Tablet Stack, Reihenfolge wie im Screenshot */
@media (max-width: 1024px){
  .contact-inner{
    grid-template-columns: 1fr;
    text-align: center;
  }
  .contact-left, .contact-right{ text-align:center; }
  .contact-title{ margin-bottom: .4em; }
}

/* Mobile: etwas enger */
@media (max-width: 560px){
  .section-contact{ padding: clamp(28px,7vw,48px) clamp(16px,6vw,32px); }
  .contact-mail{ display:inline-block; margin-top:.2em; }
}












      .back-to-top {
        position: fixed;
        bottom: 30px;
        left: 50%;
        text-decoration: none;
        background-color: #e73098;
        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: #4b2313;
        color: #ffffff;
      }