/* 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;
  background:#CDD1DC;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: clamp(32px, 6vw, 80px) clamp(18px, 5vw, 70px);
}

.nb-s1-inner{
  width: min(1300px, 100%);
  display: grid;
grid-template-columns: 0.95fr 1.05fr;
  gap: clamp(26px, 5vw, 70px);
  align-items: center;



}

/* HEADLINE BLOCK */
.nb-cut-headline{
  text-align: left;
  color:#121212;
    font-family: 'Poppins';
    margin-right: 120px;

}
.nb-cut-headline h2{
  font-size: clamp(22px, 2.2vw, 40px);
  font-weight: 800;
  margin: 0 0 12px 0;
    line-height: 0.8;

  letter-spacing: -0.02em;
}
.nb-cut-headline h3{
  font-size: clamp(12px, 1.2vw, 14px);
  font-weight: 400;
  opacity: .95;
  margin: 0;
  line-height: 1.;
}
.nb-cut-headline h3 span{ font-weight: 800; }

.nb-s1-right{
  background:#b01160;

  padding:
    40px   /* oben */
    226px   /* rechts */
    14px   /* UNTEN → jetzt minimal */
    96px;  /* links → Platz für Icon */

  min-height: 560px;   /* deutlich kompakter */
  overflow: hidden;

 box-shadow: inset 0 282px 402px rgba(0,0,0,0.2);

}


.nb-coverflow-text{
  position: relative;
  font-family: 'Poppins';
  margin-bottom: 22px;
}

.nb-cf-icon{
  position: absolute;
  left: -56px;        /* sitzt im linken Padding-Bereich */
  top: 0px;

  width: 40px;
  height: 40px;

  object-fit: contain;
  display: block;

  /* optionaler Inset-Look */
  border-radius: 12px;
  padding: 6px;


}

.nb-cf-copy strong{
  color:#fff;
  font-size: 18px;
  font-weight: 800;
}

.nb-cf-copy span{
  color: rgba(255,255,255,0.8);
  font-size: 14px;
}


/* CLOUD */
.nb-coverflow{
  position: relative;
  width: min(820px, 100%);
  height: clamp(320px, 38vh, 520px);
  pointer-events: none; /* nur die cards klicken lassen */
}

/* Jeder Pair absolut per CSS vars (statt nth-child chaos) */
.nb-cover-pair{
    height: clamp(330px, 16vh, 490px); /* ← GRÖSSER */

  position: absolute;
  left: var(--x);
  top: var(--y);
  display: flex;
  gap: clamp(14px, 2vw, 26px);
  cursor: pointer;
  pointer-events: auto;
  animation: nbFloat 10s ease-in-out infinite alternate;
  animation-delay: var(--d);
  transform-origin: center;
  will-change: transform;
}

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

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

/* Einzel-Covers */
.nb-cover{
    height: clamp(130px, 16vh, 160px); /* ← GRÖSSER */
  width: auto;
  object-fit: contain;
  border-radius: 14px;
  background: #f5f5f5;
  box-shadow: 0 10px 26px rgba(0,0,0,0.24);
  transition: transform .25s ease, filter .25s ease, box-shadow .25s ease;
}

.nb-cover-pair:hover .nb-cover{
  box-shadow: 0 22px 55px rgba(0,0,0,0.35);
  filter: brightness(1.05);
  transform: scale(1.04);
}

/* --- RESPONSIVE --- */
@media (max-width: 980px){
  .nb-s1-inner{
    grid-template-columns: 1fr;     /* stack */
    text-align: center;
  }
  .nb-s1-right{
    justify-items: center;
  }
  .nb-coverflow-text{
    text-align: center;
  }
}

/* Mobile: Cloud wird Grid (kein Overlap, super sauber) */
@media (max-width: 620px){
  .nb-coverflow{
    height: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .nb-cover-pair{
    position: relative;
    left: auto; top: auto;
    justify-content: center;
    animation: none;
  }
  .nb-cover{
    height: 100px;
  }
}













/* ====== 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(1080px, 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);
}



 /* 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-showcase{
  padding: 5rem 2rem 6rem;
}

/* sorgt dafür, dass alles ordentlich links startet und nicht “wegdriftet” */
.nb-showcase-container{
  max-width: 1180px;
  margin: 0 auto;
}

/* Titel sichtbar + klare Abstände */
.nb-showcase-header{
  margin-bottom: 2.2rem;
  text-align: left;
}

/* Wenn dein Hintergrund hell ist: zwingend dunkle Schrift setzen */
.nb-showcase-headline{
  font-family: 'Poppins', sans-serif;
  font-size: 2.8rem;
  font-weight: 700;
  margin: 0 0 .6rem 0;
  color: #0b0b0d;   /* <- wichtig */
  line-height: 1.05;
}

.nb-showcase-intro{
  font-family: 'Poppins', sans-serif;
  font-size: 1.05rem;
  margin: 0 0 1.4rem 0;
  color: rgba(11,11,13,.72);  /* <- wichtig */
}

/* Filter bleibt links */
.nb-filter{
  display: flex;
  gap: .8rem;
  flex-wrap: wrap;
  justify-content: flex-start; /* <- fix: nicht center/space-between */
  align-items: center;
}

/* falls irgendwo global button display:block; width:100% gesetzt ist */
.nb-filter-btn{
  width: auto;
  border-radius: 2px;
}


.nb-filter-btn.active,
.nb-filter-btn:hover {
  background: #c21e65; /* NULNEBLA Magenta */
  color: white;
}

.nb-showcase-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem;
}

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

.nb-showcase-item {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.nb-showcase-item.hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.97);
  display: none;
}

.nb-showcase-title {
  font-family: 'Poppins', sans-serif;
  font-size: 1.1rem;
  margin-bottom: 0.3rem;
  color: black;
}

.nb-showcase-sub {
  font-family: 'Poppins', sans-serif;
  font-size: 0.9rem;
  opacity: 0.7;
  margin-bottom: 0.8rem;
}

.nb-showcase-card img {
  width: 100%;
  border-radius: 14px;
  display: block;
}




















.nb-modal{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.nb-modal.is-open{ display:block; }

.nb-modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.62);
  backdrop-filter: blur(6px);
}

/* PANEL muss ein flex-container sein */
.nb-modal-panel{
  position: relative;
  width: min(980px, calc(100vw - 2.5rem));
  max-height: calc(100vh - 3rem);
  margin: 1.5rem auto;
  border-radius: 18px;
  overflow: hidden;
  background: #f8f8f8;
color: black;
  display: flex;            /* ✅ */
  flex-direction: column;   /* ✅ */

  box-shadow: 0 30px 80px rgba(0,0,0,.45);
}

/* Media darf nicht wachsen, bleibt fix */
.nb-modal-media{
  flex: 0 0 auto;                 /* ✅ */
  height: min(52vh, 520px);       /* wie vorher */
  background:#000;
  overflow:hidden;
}

/* Body bekommt den rest + wird scrollbar */
.nb-modal-body{
  flex: 1 1 auto;                 /* ✅ nimmt restlichen Platz */
  overflow: auto;                 /* ✅ scrollt */
  -webkit-overflow-scrolling: touch;

  padding: 1.6rem 1.6rem 2rem;
  color:#fff;
  font-family:'Poppins',sans-serif;
}

/* optional: schöner scroll */
.nb-modal-body::-webkit-scrollbar{ width: 10px; }
.nb-modal-body::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.16);
  border-radius: 999px;
}


.nb-modal.is-open .nb-modal-panel{
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* CLOSE */
.nb-modal-close{
  position:absolute;
  top: 10px;
  right: 12px;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(247, 247, 247, 0.35);
  color:#fff;
  cursor:pointer;
  font-size: 26px;
  line-height: 1;
}

/* MEDIA */
.nb-modal-media{
  width: 100%;
  height: min(52vh, 520px);
  background:#000;
  overflow:hidden;
}

.nb-modal-img{
  width:100%;
  height:100%;
  object-fit: cover;
  transform: scale(1.02);
}

/* BODY */
.nb-modal-body{
  padding: 1.6rem 1.6rem 2rem;
  color:#2b2b2b;
  font-family:'Poppins',sans-serif;
}

.nb-modal-title{
  font-size: 1.6rem;
  margin: 0 0 .8rem;
}

.nb-modal-article{
  opacity: .88;
  line-height: 1.65;
  font-size: 1rem;
}

/* Optional: Cards clickable */
.nb-showcase-item{ cursor: pointer; }

/* ===========
   “FLY-IN” ANIMATION (Image clone)
   =========== */
.nb-flyimg{
  position: fixed;
  z-index: 10000;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 70px rgba(0,0,0,.45);
  transition: all .45s cubic-bezier(.2,.9,.2,1);
  transform-origin: top left;
  pointer-events:none;
}



















































/* Hintergrund */
.nb-panel-section {
  background: #CDD1DC;
  padding: clamp(40px, 6vw, 90px) clamp(20px, 4vw, 48px);
  font-family: 'Poppins', sans-serif;
}

/* Panel */
.nb-panels {
  background: #ac004a;
  border-radius: 22px;
  max-width: 1000px;
  padding: clamp(32px, 5vw, 60px);
  box-shadow: 0 14px 45px rgba(0,0,0,.25);
}



/* TITLE BLOCK */
.nb-title-block {
  padding-bottom: clamp(24px, 4vw, 40px);
  color: #000;
  font-family: 'Poppins', sans-serif;
}

/* Haupttitel */
.nb-title-1 {
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 6px;
  font-family: 'LEMONMILK', sans-serif;
  letter-spacing: -2px;

}


.bo{
font-family: 'LEMONMILKBOLD', sans-serif;
}


/* Untertitel */
.nb-title-2 {
  font-size: clamp(16px, 1.9vw, 22px);
  font-weight: 500;
  margin: 0 0 18px;
}


.nb-inline-link {
  position: relative;
  text-decoration: none;
  color: white;
  font-weight: 700;
  cursor: pointer;
}

/* dezente Unterstreichungsanimation beim Hover */
.nb-inline-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: #ffffff; /* dein dunkles Rose */
  transition: width .25s ease;
}

.nb-inline-link:hover::after {
  width: 100%;
}

.nb-inline-link:hover {
  color: #000000;
}




/* Fett-Markierung */
.nb-title-strong {
  font-weight: 700;
}

/* Fließtext */
.nb-title-text {
  max-width: 900px;
  font-size: clamp(14px, 1.2vw, 18px);
  line-height: 1.55;
  margin: 0;
}

.nb-text-bold {
  font-weight: 600;
}





/* Grid */
.nb-panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 60px);
}

/* Columns */
.nb-col {
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 2.5vw, 30px);
}

/* Einträge */
.nb-item {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: 'Poppins', sans-serif;
  font-size: clamp(15px, 1.2vw, 18px);
  color: #000;
  transition: transform .25s ease;
}

.nb-item img {
  width: clamp(22px, 2.2vw, 30px);
  height: auto;
}

/* Hover Effekt nur auf dieses Item */
.nb-item:hover {
  transform: translateY(-2px);
}

/* Hover Effekt NUR auf das einzelne span */
.nb-item:hover .nb-text {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}

/* Glocken-Animation */
@keyframes nb-bell {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(18deg); }
  40%  { transform: rotate(-14deg); }
  60%  { transform: rotate(10deg); }
  80%  { transform: rotate(-6deg); }
  100% { transform: rotate(0deg); }
}

/* Hover Effekt: nur das Icon wackelt */
.nb-item:hover img {
  animation: nb-bell 0.6s ease-in-out;
  transform-origin: top center; /* wie eine echte Glocke */
}



/* Text (alle erhalten eine Basis) */
.nb-text {
  font-family: 'Poppins', sans-serif;
  line-height: 1.45;
}

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












/* SECTION-HINTERGRUND */
.nb-micro-guide {
  background: #CDD1DC;
  padding: clamp(50px, 6vw, 100px) clamp(16px, 4vw, 40px);
  font-family: 'Poppins', system-ui, sans-serif;
  color: #0d0d0d;
}

/* GRID-STRUCTURE */
.nb-micro-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.1fr 1.2fr;
  gap: clamp(40px, 4vw, 80px);
  align-items: center;
}

/* TEXT */
.nb-micro-title {
  font-size: clamp(26px, 2.6vw, 40px);
  font-weight: 800;
  margin-bottom: 6px;
  font-family: 'LEMONMILKBOLD', system-ui, sans-serif;

}

.nb-micro-sub {
  font-size: clamp(17px, 1.4vw, 22px);
  margin-bottom: 26px;
  font-weight: 800;
  color: #b5002d;
}

.nb-micro-copy {
  font-size: clamp(14px, 1.1vw, 18px);
  line-height: 1.55;
  margin-bottom: 18px;
}

.nb-strong {
  font-weight: 700;
}

/* LOCK-ZEILE */
.nb-micro-lock {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 26px 0 28px;
}

.nb-micro-lock img {
  width: 24px;
  height: 24px;
}

/* BUTTONS – ROT MIT SCHWARZEM TEXT */
.nb-micro-btn {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 12px;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  margin-right: 10px;
  margin-bottom: 10px;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  color: #0d0d0d;
  background: #b5002d;                  /* NULNEBLA-Rot */
}

.nb-micro-btn:hover {
  background: #e60039;
  border-color: #0d0d0d;
  box-shadow: 0 8px 18px rgba(0,0,0,0.22);
  transform: translateY(-2px);
}

/* 2. Button kann leicht anderen Ton haben, wenn du willst */
.nb-micro-btn2 {
  background: #b5002d;
}
.nb-micro-btn2:hover {
  background: #e60039;
}

/* DEVICES RECHTS – TABLET + HANDY STACK */
.nb-micro-devices {
  display: flex;
  justify-content: center;
  align-items: center;
}

.nb-device-stack {
  position: relative;
  width: 100%;
  max-width: 880px;
}

.nb-device-stack .nb-tablet {
  width: 100%;
  display: block;
}

.nb-device-stack .nb-phone {
  position: absolute;
  left: 4%;
  top: -12%;
  width: 42%;
  z-index: 2;
}

/* RESPONSIVE */
@media (max-width: 1020px) {
  .nb-micro-inner {
    grid-template-columns: 1fr;
  }
  .nb-micro-devices {
    margin-top: 32px;
  }
}

@media (max-width: 700px) {
  .nb-device-stack {
    max-width: 100%;
  }
  .nb-device-stack .nb-tablet,
  .nb-device-stack .nb-phone {
    position: static;
    width: 100%;
  }
  .nb-device-stack {
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
}












:root{
  --bg-ex:#CDD1DC;
  --ink-ex:#000;
  --red-ex:#c21e65;   /* dein Rot/Rose – bei Bedarf anpassen */
}

/* Section-Wrapper */
.nb-exklusiv{
  background: var(--bg-ex);
  padding: clamp(60px,8vw,90px) clamp(16px,4vw,40px);
}

/* Inhalt mit max-width */
.nb-ex-inner{
  max-width: 1380px;
  margin: 0 auto;
}

/* Headline */
.nb-ex-head h2{
  margin: 0 0 6px;
  font-family: 'LEMONMILK', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: 0.04em;
  font-size: clamp(26px,3.4vw,40px);
  color: var(--ink-ex);
}

.nb-ex-head p{
  margin: 0 0 28px;
  font-family: 'Avenir', system-ui, sans-serif;
  font-size: clamp(14px,1.4vw,18px);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-ex);
}

/* Panel – "nass", innen beschattet */
.nb-ex-panel{
  background: transparent;
  border-radius: 36px;
  padding: clamp(32px,4vw,56px);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(18px,3vw,40px);
  position: relative;
  overflow: hidden;

}

/* Devices */
.nb-ex-device{
  height: auto;
  border-radius: 18px;
  box-shadow:
    0 16px 26px rgba(0,0,0,0.35),
    0 8px 14px rgba(0,0,0,0.25);
  transition: transform .35s ease;
}

/* Größen/Proportionen wie im Screenshot */
.nb-ex-device--left{
  width: 34%;
}
.nb-ex-device--center{
  width: 24%;
  transform: translateY(-18px); /* leicht nach oben gezogen */
}
.nb-ex-device--right{
  width: 36%;
}

.nb-ex-device:hover{
  transform: translateY(-8px);
}

/* Buttons unter dem Panel */
.nb-ex-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
  margin-top: clamp(18px,2.4vw,26px);
}

.nb-ex-pill{
  border: none;
  outline: none;
  cursor: pointer;
  padding: 10px 26px;
  border-radius: 999px;
  font-family: 'Avenir', system-ui, sans-serif;
  font-size: clamp(13px,1.3vw,16px);
  font-weight: 600;
  background: var(--red-ex);
  color: #fff;
  box-shadow: 0 10px 22px rgba(0,0,0,0.35);
  white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.nb-ex-pill:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 26px rgba(0,0,0,0.45);
  background: #8e0f46; /* etwas dunklerer Hover-Ton */
}

/* Responsive */
@media (max-width: 900px){
  .nb-ex-panel{
    flex-direction: column;
    align-items: center;
  }

  .nb-ex-device--left,
  .nb-ex-device--center,
  .nb-ex-device--right{
    width: 90%;
    transform: none;
  }

  .nb-ex-device:hover{
    transform:none;
  }
}







.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:470px;   /* << 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;
}







/* 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: #ffffff;
width: 42px;
height: 42px;
border-radius: 50%;
background: #176a83;
box-shadow: 0 6px 18px -10px rgba(0,0,0,.5);
}



.swiper-button-next:hover,
.swiper-button-prev:hover {
color: #f0f0f0;
background: #42aac9;
transform: scale(1.1);
transition: 0.4s all;
}




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

/* 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: #176a83;        /* Button-Farbe */
--cta-bg-hover:#3096b5;   /* Hover */
--cta-corner:#083e4f;        /* 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;
}
}




/* Tablet & kleine Laptops */
@media (max-width: 860px) {

  .section-41 {
    padding: 60px 16px;          /* weniger Luft, mehr Platz für Inhalt */
  }

  .nulnebla-slider {
    width: 100%;
  }

  .single img,
  .pair img {
    max-height: 360px;           /* etwas kleiner als Desktop */
  }

  .slide-cta {
    margin-top: 28px;            /* näher am Bild */
    max-width: 90%;
    text-align: center;
    font-size: 13px;
  }

  .swiper-button-next,
  .swiper-button-prev {
    width: 36px;
    height: 36px;
  }
}

/* Handy */
@media (max-width: 640px) {

  .section-41 {
    padding: 44px 12px;          /* kompakter auf Phone */
  }

  .single img,
  .pair img {
    max-height: 260px;           /* Bildhöhe begrenzen, damit nichts gequetscht wirkt */
  }

  .slide-cta {
    margin-top: 22px;
    font-size: 12px;
    padding: 10px 20px;
  }

  .swiper-button-next,
  .swiper-button-prev {
    width: 32px;
    height: 32px;
  }
}



/* Header über dem Blog-Slider */
.nb-blog-slider-head{
  max-width: 1120px;
  margin: 0 auto clamp(32px, 4vw, 46px);
  text-align: left;
  font-family: "Poppins", system-ui, sans-serif;
}

.nb-blog-headline{
  color: #002b45;
  margin: 0 0 6px;
  font-weight: 800;
  font-size: clamp(18px, 2.6vw, 26px);
  letter-spacing: .04em;
  font-family:"LEMONMILK";
}

.nb-blog-headline span{
  color:#176a83;
  font-family:"LEMONMILKBOLD";
  font-weight:1800;

}

.nb-blog-sub{
  color:#176a83;
  font-family:"Poppins";

  margin: 0;
  max-width: 640px;
  font-size: clamp(13px, 1.6vw, 15px);
  line-height: 1.5;
  opacity: .9;
}

/* auf Handy zentrieren */
@media (max-width: 640px){
  .nb-blog-slider-head{
    text-align: center;
  }
  .nb-blog-sub{
    margin-inline: auto;
  }
}














/* SECTION allgemein */
.nb-cut-section{
  background:#CDD1DC;
  padding: clamp(32px,4vw,60px) clamp(16px,4vw,40px);
}
.nb-slider{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  width: 100%;
}

.nb-track{
  display: flex;
  align-items: center;
  gap: 28px;
}

.nb-slide{
  width: 220px;
  height: 280px;
  object-fit: cover;
  border-radius: 26px;
  transition: 
    filter .25s ease,
    transform .25s ease,
    opacity .25s ease;
}

/* Zentrum */
.nb-slide.active{
  width: 300px;
  height: 380px;
  filter: grayscale(0);
  transform: scale(1);
  opacity: 1;
}

/* Seitenbilder */
.nb-slide.side{
  filter: grayscale(1);
  opacity: .45;
  transform: scale(.92);
}

/* Pfeile */
.nb-arrow{
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,.45);
  color: #fff;
  font-size: 28px;
  cursor: pointer;
}





  






















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

.nb-showcase { padding: 6rem 2rem; }

.nb-showcase-header {
  max-width: 900px;
  margin-bottom: 3rem;
}

.nb-showcase-headline{
  font-family:'Poppins',sans-serif;
  font-size:2.6rem;
  font-weight:650;
  margin:0 0 0.6rem;
}

.nb-showcase-intro{
  font-family:'Poppins',sans-serif;
  font-size:1.1rem;
  opacity:.8;
  margin:0 0 1.8rem;
}

/* WRAPPER */
.nb-filter{
  display:flex;
  gap:.75rem;
  flex-wrap:wrap;
  align-items:center;
}

/* BASIS BUTTON */
.nb-filter-btn{
  font-family:'Poppins',sans-serif;
  font-size:.92rem;
  padding:.55rem 1.15rem;
  border-radius:12px;

  border:1px solid transparent;
  cursor:pointer;

  transition:
    transform .2s ease,
    background .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    opacity .2s ease;
}

/* =========================
   STARTZUSTAND: ALLE FARBE
   ========================= */

/* Instagram */
.nb-filter:not(.has-active) .nb-filter-btn.is-instagram{
  background:#c21e65;
  color:#fff;
}

/* Content */
.nb-filter:not(.has-active) .nb-filter-btn.is-content{
  background:#3f9b70;
  color:#fff;
}

/* Rezepte */
.nb-filter:not(.has-active) .nb-filter-btn.is-rezepte{
  background:#c9a44b;
  color:#fff;
}

/* Community */
.nb-filter:not(.has-active) .nb-filter-btn.is-community{
  background:#3a5bdc;
  color:#fff;
}

/* Alle (weiß) */
.nb-filter:not(.has-active) .nb-filter-btn[data-filter="all"]{
  background:#ffffff;
  color:#000;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}

/* =========================
   WENN EIN FILTER AKTIV IST
   ========================= */

/* alle erstmal leer */
.nb-filter.has-active .nb-filter-btn{
  background:transparent;
  border:1px solid rgba(0,0,0,.18);
  color:#0b0b0d;
  box-shadow:none;
}

/* aktiver Button */
.nb-filter-btn.active{
  color:#fff;
  border-color:transparent;
  box-shadow:0 10px 26px rgba(0,0,0,.12);
}

/* aktive Farben */
.nb-filter-btn.is-instagram.active{ background:#c21e65; }
.nb-filter-btn.is-content.active{ background:#3f9b70; }
.nb-filter-btn.is-rezepte.active{ background:#c9a44b; }
.nb-filter-btn.is-community.active{ background:#3a5bdc; }

/* Hover nur bei inaktiven */
.nb-filter-btn:not(.active):hover{
  transform:translateY(-1px);
  opacity:.95;
}


/* wenn NICHT aktiv: dezente farbige outline */
.nb-filter-btn.is-instagram{ background:#c21e65;  }
.nb-filter-btn.is-content{ border-color: rgba(63,155,112,.35); }
.nb-filter-btn.is-rezepte{ border-color: rgba(201,164,75,.45); }
.nb-filter-btn.is-community{ border-color: rgba(58,91,220,.35); }

.nb-filter-btn.active:hover{ opacity:.95; }



/* ALLE Buttons leer, sobald irgendein Filter aktiv ist */
.nb-filter.has-active .nb-filter-btn{
  background: transparent;
  box-shadow: none;
}


/* aktiver Button */
.nb-filter-btn.active{
  color:#fff;
  border-color: transparent;
}



/* GRID */
.nb-showcase-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2.5rem;
}

.nb-showcase-item.hidden{
  display:none;
}

/* TITLES */
.nb-showcase-title{
  font-family:'Poppins',sans-serif;
  font-size:1.08rem;
  margin:0 0 .25rem;
}
.nb-showcase-sub{
  font-family:'Poppins',sans-serif;
  font-size:.92rem;
  opacity:.72;
  margin:0 0 .75rem;
}

/* TAGS unter dem Text (damit man sofort erkennt, welcher Filter passt) */
.nb-tags{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  margin-bottom:.85rem;
}

.nb-tag{
  font-family:'Poppins',sans-serif;
  font-size:.78rem;
  padding:.3rem .7rem;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.12);
  user-select:none;
  opacity:.95;
}

/* Tag-Farben passend zu Filtern */
.nb-tag.is-instagram{ background:#c21e65; border-radius: 12px; }
.nb-tag.is-content{ background:#3f9b70; font-family: 'Poppins'; color: white; border-radius: 12px;}
.nb-tag.is-rezepte{ background:#c9a44b; font-family: 'Poppins'; color: white; border-radius: 12px; }
.nb-tag.is-community{ background: rgba(58,91,220,.10); border-color: rgba(58,91,220,.25); }

.nb-showcase-card img{
  width:100%;
  display:block;
  border-radius:14px;
}



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
















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

/* Heading */
.nb-firm__eyebrow{
  margin:0 0 4px;
  font: 600 14px/1.3 "Avenirheavy", Poppins, sans-serif;
  letter-spacing: 0.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;
}

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

/* Top line with dot */
.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;
}

/* Column title */
.nb-firm__col-title{
  margin:0 0 12px;
  font:700 15px/1.3 "LEMONMILK", Poppins, sans-serif;
  text-transform:uppercase;
  letter-spacing:0.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 over disabled 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 */
.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:0.08em;
}

.nb-firm__quin-title{
  margin:0 0 8px;
  font:800 16px/1.2 "LEMONMILK", Poppins, sans-serif;
}

/* Traffic light */
.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; }

/* Color pills */
.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; }

/* Image placeholder */
.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;
}

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

/* ===============================
   NULNEBLA – COMPANY SERVICES
   =============================== */

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

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

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

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

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

.nb-tile img{
  display:block;
  width:100%;
  height:auto;
  vertical-align:middle;
  transition:opacity .35s, transform .35s;
}

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

@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-1-12 {
    background-color: #CDD1DC;
    padding: 140px 0; /* Oben und unten Abstand */
    position: relative;
    z-index: 0; /* Damit der Schatten über dem oberen Bereich liegt */
  }


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



  .twotwelvetitletwo-text {
    font-family: 'Poppins';
    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-2-12 {
    background-color: #CDD1DC;
    padding: 300px 0; /* Oben und unten Abstand */
    position: relative;
    z-index: 0; /* Damit der Schatten über dem oberen Bereich liegt */
  }



















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

/* PANEL */
.nb-podcast-card{
  background:transparent;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  padding-bottom:26px;
}

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

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















/* =========================================
   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: 0%;
  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;
      }