/* =========================================================
   SKY SODA SUPREME – custom.css (clean structured)
   Stand: ohne Clients/Brands-Parallax + ohne Sticky-Experiment
   ========================================================= */

/* =========================================================
   1) TYPOGRAPHY – BBH Sans Hegarty Headline System
   ========================================================= */

/* Größte, heroartige Headline */
.h-supreme-1{
  font-family:"BBH Sans Hegarty","Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-weight:400;
  font-size:clamp(3.2rem, 8.5vw + 1rem, 13.8rem);
  line-height:.95;
  letter-spacing:-.03em;
  white-space:normal;
  hyphens:none;
}

/* Sehr große Headline (Abschnittstitel) */
.h-supreme-2{
  font-family:"BBH Sans Hegarty","Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-weight:400;
  font-size:clamp(2.5rem, 6.5vw + .5rem, 7rem);
  line-height:1;
  letter-spacing:-.015em;
}

/* Große Headline (z. B. Module/Cards) */
.h-supreme-3{
  font-family:"BBH Sans Hegarty","Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-weight:400;
  font-size:clamp(1.62rem, 2.7vw + .9rem, 3.15rem);
  line-height:1.05;
  letter-spacing:-.009em;
}

/* Zwischenklasse: h-supreme-3.5 (Motiondesign) */
.h-supreme-3-5{
  font-family:"BBH Sans Hegarty","Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-weight:400;
  font-size:clamp(2.3rem, 3.8vw + 1.2rem, 4.4rem);
  line-height:1.1;
  letter-spacing:-.01em;
}

/* Mittelgroße Headline (Subheads) */
.h-supreme-4{
  font-family:"BBH Sans Hegarty","Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-weight:400;
  font-size:clamp(1.2rem, 2vw + .5rem, 2rem);
  line-height:1.2;
  letter-spacing:-.005em;
}

/* Dezente Unterzeile */
.h-supreme-sub{
  font-family:"BBH Sans Hegarty","Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-weight:400;
  font-size:clamp(1rem, 1.2vw + .6rem, 1.5rem);
  line-height:1.3;
  letter-spacing:.05em;
  opacity:.75;
}

.h-supreme-bold{ font-weight:700; }

/* Reset: keine Template-Margins */
.h-supreme-1,
.h-supreme-2,
.h-supreme-3,
.h-supreme-3-5,
.h-supreme-4{
  margin:0 !important;
}

/* Mobile Innenabstand für H1-Sektion */
@media (max-width:768px){
  .hero-typo-section .hero-typo-inner{
    padding-left:6px;
    padding-right:6px;
  }
}

.h-supreme-1-feature{
  font-size:clamp(3.61rem, 9.58vw + 1.13rem, 15.55rem);
}

@media (max-width:768px){
  .h-supreme-1-feature{
    font-size:clamp(3.31rem, 8.28vw + 0.92rem, 11.04rem);
  }
}

/* ---------- Typography Micro Refinement ---------- */

h1,h2,h3{
  letter-spacing:-0.02em;
}


/* =========================================================
   2) UNDERLINES (farbige Unterstreichungen)
   ========================================================= */
.h-supreme-1 .underline-blue,
.h-supreme-2 .underline-blue,
.h-supreme-3 .underline-blue,
.h-supreme-4 .underline-blue{
  text-decoration:underline;
  text-decoration-color:#5394ff;
  text-decoration-thickness:.18em;
  text-underline-offset:.08em;
}
.h-supreme-1 .underline-pink,
.h-supreme-2 .underline-pink,
.h-supreme-3 .underline-pink,
.h-supreme-4 .underline-pink{
  text-decoration:underline;
  text-decoration-color:#FF7EE0;
  text-decoration-thickness:.18em;
  text-underline-offset:.08em;
}
.h-supreme-1 .underline-flamingo,
.h-supreme-2 .underline-flamingo,
.h-supreme-3 .underline-flamingo,
.h-supreme-4 .underline-flamingo{
  text-decoration:underline;
  text-decoration-color:#FCBEAC;
  text-decoration-thickness:.18em;
  text-underline-offset:.08em;
}
.h-supreme-1 .underline-green,
.h-supreme-2 .underline-green,
.h-supreme-3 .underline-green,
.h-supreme-4 .underline-green{
  text-decoration:underline;
  text-decoration-color:#62EAAF;
  text-decoration-thickness:.18em;
  text-underline-offset:.08em;
}
.h-supreme-1 .underline-lila,
.h-supreme-2 .underline-lila,
.h-supreme-3 .underline-lila,
.h-supreme-4 .underline-lila{
  text-decoration:underline;
  text-decoration-color:#B862EA;
  text-decoration-thickness:.18em;
  text-underline-offset:.08em;
}
.h-supreme-1 .underline-cyan,
.h-supreme-2 .underline-cyan,
.h-supreme-3 .underline-cyan,
.h-supreme-4 .underline-cyan{
  text-decoration:underline;
  text-decoration-color:#00E5FF;
  text-decoration-thickness:.18em;
  text-underline-offset:.08em;
}

.h-supreme-1 .underline-black,
.h-supreme-2 .underline-black,
.h-supreme-3 .underline-black,
.h-supreme-4 .underline-black{
  text-decoration:underline;
  text-decoration-color:#363636;
  text-decoration-thickness:.18em;
  text-underline-offset:.08em;
}

/* =========================================================
   3) HIGHLIGHT LINKS (bunte Balken + diagonaler Shift)
   ========================================================= */
.ss-highlight-link{
  --hl:#FFDD00;
  position:relative;
  display:inline-block;
  text-decoration:none;
  color:#000 !important;
  padding:.05em .25em;
  line-height:1.1;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
  z-index:0;
  isolation:isolate;
}
.ss-highlight-link::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--hl);
  z-index:0;
}
.ss-text{
  position:relative;
  z-index:1;
  display:inline-block;
  transition:transform .25s ease;
}
.ss-highlight-link:hover .ss-text,
.ss-highlight-link:focus-visible .ss-text{
  transform:translate(.08em, -.08em);
}
@media (hover:none){
  .ss-highlight-link:active .ss-text{
    transform:translate(.1em, -.1em);
  }
}
.highlight-pink{ --hl:#FF7EE0; }
.highlight-flamingo{ --hl:#FCBEAC; }
.highlight-green{ --hl:#62EAAF; }
.highlight-cyan{ --hl:#00E5FF; }
.highlight-lila{ --hl:#B862EA; }
.highlight-blue{ --hl:#5394ff; }
.highlight-black{ --hl:#363636; }

/* Standalone-Highlights (falls du sie ohne ss-highlight-link nutzt) */
.highlight-pink:not(.ss-highlight-link),
.highlight-flamingo:not(.ss-highlight-link),
.highlight-green:not(.ss-highlight-link),
.highlight-cyan:not(.ss-highlight-link),
.highlight-lila:not(.ss-highlight-link),
.highlight-blue:not(.ss-highlight-link)
.highlight-black:not(.ss-highlight-link)
{
  display:inline;
  padding:.1em .25em;
  box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
  line-height:1.1;
}
.highlight-pink:not(.ss-highlight-link){ background:#FF7EE0; }
.highlight-flamingo:not(.ss-highlight-link){ background:#FCBEAC; }
.highlight-green:not(.ss-highlight-link){ background:#62EAAF; }
.highlight-cyan:not(.ss-highlight-link){ background:#00E5FF; }
.highlight-lila:not(.ss-highlight-link){ background:#B862EA; }
.highlight-blue:not(.ss-highlight-link){ background:#5394ff; }
.highlight-black:not(.ss-highlight-link){ background:#363636; }

/* =========================================================
   4) GLOBAL SPACERS
   ========================================================= */
.spacer-sm{ height:clamp(1rem, 3vw, 3rem); }
.spacer-md{ height:clamp(2rem, 5vw, 5rem); }
.spacer-lg{ height:clamp(3rem, 8vw, 8rem); }

/* =========================================================
   4.1) GLOBAL LAYOUT STABILITY
   ========================================================= */
html{
  scrollbar-gutter: stable;
}

body{
  overflow-y: scroll;
}

/* =========================================================
   5) HEADER / HAMBURGER (robust)
   ========================================================= */
#nav-stick2{ transition:background-color .5s ease, box-shadow .5s ease; }
#nav-stick2.has-bg{ transition:background-color .5s ease, box-shadow .5s ease; }
.logo-color-change{ transition:opacity .4s ease-in-out, filter .4s ease-in-out; }
.header .logo-row,
.header .logo-container-2{
  display:flex;
  align-items:center;
}

.logo-container-2{
  margin-left:0px; /* ← HIER justierst du den Abstand */
  transform:translateY(9px); /* hier feinjustieren */
}

.ss-logo-switch{
  position:relative;
  display:inline-block;
  line-height:0;
}

.ss-site-logo{
  display:block;
  width:clamp(124px, 11vw, 193px);
  height:auto;
  transition:opacity .25s ease;
}

.ss-site-logo--white{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  opacity:0;
  pointer-events:none;
}

#nav.menu-open .ss-site-logo--black{
  opacity:0;
}

#nav.menu-open .ss-site-logo--white{
  opacity:1;
}

/* Default: Schwarz */
#nav .fs-primary-nav-trigger .fs-menu-icon,
#nav .fs-primary-nav-trigger .fs-menu-icon::before,
#nav .fs-primary-nav-trigger .fs-menu-icon::after{
  background-color:#000 !important;
  transition:background-color .4s ease;
}

/* Optional: oben weiß via .header--hamburger-white */
#nav.header--hamburger-white .fs-primary-nav-trigger .fs-menu-icon,
#nav.header--hamburger-white .fs-primary-nav-trigger .fs-menu-icon::before,
#nav.header--hamburger-white .fs-primary-nav-trigger .fs-menu-icon::after{
  background-color:#fff !important;
}

/* Beim Scroll: Farbe wird per JS (index.html) gesteuert */

/* Hamburger leicht größer */
#nav .fs-primary-nav-trigger .fs-menu-icon{
  transform:scale(1.2);
  transform-origin:center;
  display:inline-block;
}

/* Abstand rechts */
.menu-btn-respons-container2{ padding-right:20px; }
.fs-primary-nav-trigger{ margin-right:20px; }

/* =========================================================
   6) FULLSCREEN MENU (Typo + White Highlight Hover)
   ========================================================= */

.fs-primary-nav a,
.fs-primary-nav ul li a,
.fs-primary-nav.fs-sub-nav a{
  font-family:"BBH Sans Hegarty","Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif !important;
  font-weight:800 !important;
  text-transform:none !important;
  font-size:clamp(2.1rem, 5vw, 9rem) !important;
  line-height:1.02 !important;
  letter-spacing:.06em !important;
  color:#FFFFFF !important;
  opacity:.95 !important;
  display:inline-block;
  position:relative;
  padding:.04em .22em;
  text-decoration:none !important;
  transition:opacity 180ms ease;
  isolation:isolate;
  z-index:0;
}

.fs-primary-nav a::after,
.fs-primary-nav ul li a::after,
.fs-primary-nav.fs-sub-nav a::after{
  content:none !important;
  display:none !important;
}

.menu-link-highlight::before{
  content:"";
  position:absolute;
  inset:0;
  background:#ffffff;
  opacity:0;
  transform:scaleX(.92);
  transform-origin:left center;
  transition:opacity .18s ease, transform .18s ease;
  z-index:0;
}

.menu-link-highlight__text{
  position:relative;
  z-index:1;
  display:inline-block;
  color:#ffffff;
  transition:transform .25s ease, color .18s ease;
}

.menu-link-highlight:hover::before,
.menu-link-highlight:focus-visible::before{
  opacity:1;
  transform:scaleX(1);
}

.menu-link-highlight:hover .menu-link-highlight__text,
.menu-link-highlight:focus-visible .menu-link-highlight__text{
  color:#000000;
  transform:translate(.08em, -.08em);
}

@media (hover:none){
  .menu-link-highlight:active::before{
    opacity:1;
    transform:scaleX(1);
  }

  .menu-link-highlight:active .menu-link-highlight__text{
    color:#000000;
    transform:translate(.08em, -.08em);
  }
}

.fs-primary-nav ul li{
  margin:.35em 0 !important;
}

@media (max-width:768px){
  .fs-primary-nav a,
  .fs-primary-nav ul li a,
  .fs-primary-nav.fs-sub-nav a{
    font-size:clamp(1.7rem, 7vw, 3.2rem) !important;
    letter-spacing:.05em !important;
  }

  .fs-primary-nav ul li{
    margin:.28em 0 !important;
  }
}

/* =========================================================
   7) VERTICAL LABELS (links/rechts)
   ========================================================= */
.vertical-label{
  position:fixed;
  top:50%;
  transform:translateY(-50%);
  writing-mode:vertical-rl;
  text-orientation:mixed;
  font-family:"Poppins",system-ui,sans-serif;
  font-size:14px;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:rgba(0,0,0,.5);
  pointer-events:none;
  z-index:20;
}
.vertical-label.left{ left:20px; }
.vertical-label.right{ right:20px; transform:translateY(-50%) rotate(180deg); }

@media (max-width:768px){
  .vertical-label{ font-size:10px; opacity:.8; font-weight: 800;}
  .vertical-label.left{ left:8px; }
  .vertical-label.right{ right:8px; }
}

/* =========================================================
   8) HERO SYSTEM
   ========================================================= */
.hero-169{
  position:relative;
  width:100vw;
  min-height:100vh;
  overflow:hidden;
}

.hero-169-img,
.hero-169-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center center;
}

.hero-169-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:6vw 4vw;
  text-align:center;
  z-index:2;
}

.hero-169-shade{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.3);
  pointer-events:none;
  z-index:1;
}

.hero-169-title{
  color:#fff;
  text-shadow:0 2px 18px rgba(0,0,0,.35);
}

/* Linksbündige Variante */
.hero-169.hero-left .hero-169-overlay{
  justify-content:flex-start;
  text-align:left;
  padding:4vw 8vw;
}
.hero-169-title-left{
  color:#fff;
  text-shadow:0 2px 12px rgba(0,0,0,.35);
  max-width:90vw;
  line-height:.95;
  letter-spacing:-.02em;
}

/* Hero ohne Bild */
.hero-169.hero-color{
  background-color:#111;
  color:#fff;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  min-height:100vh;
  overflow:hidden;
  transition:background-color .4s ease, color .4s ease;
}
.hero-169.hero-color.hero-light{ background-color:#f7f7f7; color:#111; }
.hero-169.hero-color .hero-169-img{ display:none !important; }
.hero-169.hero-color .hero-169-overlay{
  position:relative;
  justify-content:flex-start;
  padding:10vh 8vw;
}
.hero-169.hero-color .h-supreme-1{
  font-size:clamp(4.6rem, 11.5vw + 1.15rem, 13.8rem);
  line-height:.9;
  margin:0;
  color:inherit;
  transition:color .4s ease;
}

/* super-clean Typo */
.hero-169.hero-color .h-supreme-1,
.hero-169.hero-color .h-supreme-1 span,
.hero-169.hero-color .hero-169-title-left{
  text-shadow:none !important;
  filter:none !important;
  opacity:1 !important;
  -webkit-font-smoothing:antialiased !important;
  -moz-osx-font-smoothing:grayscale !important;
  text-rendering:geometricPrecision !important;
  backface-visibility:hidden;
  transform:translateZ(0);
}
.hero-169.hero-color.hero-light .h-supreme-1{
  -webkit-font-smoothing:subpixel-antialiased !important;
}

/* Outline Hero */
.hero-outline{
  position:relative;
  overflow:hidden;
}
.hero-169.hero-outline{
  width:100vw;
  max-width:100vw;
  margin-left:calc(-50vw + 50%);
}
.outline-box{
  display:inline-block;
  padding:1.2em 1.4em;
  border:4px solid #00E5FF;
  border-radius:0;
  color:#fff;
  text-transform:uppercase;
  letter-spacing:-.02em;
  line-height:1;
  transition:transform .3s ease;
}
.outline-box:hover{ transform:translateY(-3px); }

/* Parallax-Medien */
.hero-parallax-img,
.hero-parallax-video{
  will-change:transform;
  transform:translate3d(0,0,0);
}

/* About Hero */
.about-hero{
  background:#fff;
}
.about-hero .outline-box{
  max-width:min(86vw, 900px);
}

/* Responsive */
@media (max-width:768px){
  .hero-169{
    height:57vh;
    min-height:420px;
  }

  .hero-169.hero-left .hero-169-overlay{
    align-items:flex-start;
    padding:20vh 8vw 8vw;
  }

  .hero-169-title-left{
    font-size:clamp(2rem, 8vw + .5rem, 5rem);
  }

  .hero-169.hero-outline .hero-169-overlay{
    padding:8vw 6vw;
  }

  .outline-box{
    border-width:2px;
    padding:.9em 1em;
  }

  .ss-no-parallax-mobile{
    height:auto;
    min-height:0;
    aspect-ratio:16/9;
    background:#000;
  }

  .ss-no-parallax-mobile .hero-169-video{
    object-fit:contain;
    object-position:center center;
    background:#000;
  }

  .ss-no-parallax-mobile .hero-parallax-video{
    transform:none;
    will-change:auto;
  }

  .about-hero{
    height:62vh;
    min-height:360px;
  }

  .about-hero .hero-169-overlay{
    padding:7vw 8vw;
  }

  .about-hero .hero-169-img{
    object-position:center center;
  }

  .about-hero .outline-box{
    max-width:84vw;
    padding:.75em .9em;
    font-size:clamp(1.7rem, 5vw, 2.4rem);
  }
}

@media (max-width:768px){
  .hero-typo-section{
    padding-top:clamp(30px, 6vh, 50px);
  }
}

/* =========================================================
   9) MARQUEE / BANDEROLE (seamless, ohne Reset)
   ========================================================= */
.ss-marquee{
  --marquee-duration:28s;
  width:100%;
  overflow:hidden;
  background:transparent;
}

.ss-marquee__track{
  display:flex;
  width:max-content;
  white-space:nowrap;
  will-change:transform;
  animation:ss-marquee-move var(--marquee-duration) linear infinite;
}

.ss-marquee__item{
  display:inline-block;
  padding:0 2.2rem;
  font-weight:800;
  letter-spacing:.06em;
  font-size:14px;
  text-transform:uppercase;
}

@keyframes ss-marquee-move{
  0%{ transform:translate3d(0,0,0); }
  100%{ transform:translate3d(-50%,0,0); }
}

.ss-marquee--rtl .ss-marquee__track{
  animation-direction:reverse;
}

/* =========================================================
   10) GRID – Doppel-Bleed Galerie (zentrierte Caption + Snappy Zoom)
   ========================================================= */
.ss-double-bleed{
  width:100vw;
  max-width:100vw;
  margin-left:calc(-50vw + 50%);
  margin-right:calc(-50vw + 50%);
}
.ss-double-bleed__grid{
  display:grid;
  grid-template-columns:50% 50%;
  gap:0;
}
@media (max-width:991px){
  .ss-double-bleed__grid{ grid-template-columns:1fr; }
}

.ss-db-tile{
  position:relative;
  display:block;
  text-decoration:none;
  color:inherit;
  overflow:hidden;
  margin:0;
  padding:0;
}

.ss-db-media{
  display:block;
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  object-position:center;
  transform:translateZ(0) scale(1);
  transition:transform 800ms cubic-bezier(.2,.9,.2,1);
  will-change:transform;
}

.ss-db-caption{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  text-align:center;
  z-index:2;
  pointer-events:none;
}
.ss-db-caption .h-supreme-3,
.ss-db-caption .h-supreme-2{ margin:0; }

.ss-db-tile:hover .ss-db-caption .ss-highlight-link .ss-text{
  transform:translate(.08em, -.08em);
}

/* =========================================================
   11) IMAGE TILES (16:10) – falls du sie nutzt
   ========================================================= */
.ss-image-tiles{ margin:0 0 clamp(24px, 5vw, 60px) 0; }
.ss-image-tiles .grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(12px, 2vw, 28px);
}
@media (max-width:991px){
  .ss-image-tiles .grid{ grid-template-columns:1fr; }
}

.ss-tile{
  position:relative;
  display:block;
  width:100%;
  overflow:hidden;
  border:none;
  text-decoration:none;
}
.ss-tile__media{
  aspect-ratio:16/10;
  width:100%;
  height:auto;
  display:block;
  object-fit:cover;
  object-position:center;
  transition:transform .4s ease;
}
.ss-tile__caption{
  position:absolute;
  left:clamp(14px, 2vw, 28px);
  bottom:clamp(14px, 2vw, 28px);
}
.ss-tile__caption .h-supreme-3{ margin:0; }
.ss-tile:hover .ss-tile__media{ transform:scale(1.02); }

/* =========================================================
   12) FULL-BLEED Zweispalter Bilder
   ========================================================= */
.ss-bleed{
  width:100vw;
  max-width:100vw;
  margin-left:calc(-50vw + 50%);
}
.ss-grid-2{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
}
.ss-grid-2 img{
  display:block;
  width:100%;
  height:auto;
}
@media (min-width:992px){
  .ss-grid-2{ grid-template-columns:1fr 1fr; }
}

/* =========================================================
   13) INSTA BLOCK (3 Hochkantbilder)
   ========================================================= */
.insta-block{ margin:0; padding:0; }
.insta-row,
.insta-grid{
  margin:0;
  display:flex;
  flex-wrap:wrap;
}
.insta-block .row > [class*="col-"],
.insta-row > [class*="col-"],
.insta-grid > [class*="col-"]{
  padding-left:0 !important;
  padding-right:0 !important;
  margin:0 !important;
}
.insta-img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:9/16;
  object-fit:cover;
  transition:none !important;
  transform:none !important;
  filter:none !important;
}
.insta-img:hover{
  transform:none !important;
  filter:none !important;
  opacity:1 !important;
}
@media (min-width:992px){
  .insta-block .container{ padding:0 15px; }
}
@media (max-width:991px){
  .insta-block .container{
    width:100vw;
    max-width:100vw;
    margin-left:calc(-50vw + 50%);
    padding:0;
  }
  .insta-row,
  .insta-grid{ flex-direction:column; }
  .insta-img{ width:100%; height:auto; }
}
.insta-57-tight{
  position:relative;
  width:100%;
  aspect-ratio:5/7;
  overflow:hidden;
  background:#000;
}
.insta-57-tight img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  margin:0;
  padding:0;
  border:0;
}
.insta-block .row,
.insta-row,
.insta-grid{
  margin-left:0 !important;
  margin-right:0 !important;
}
.insta-block .insta-img,
.insta-block img{
  display:block;
  width:100%;
  height:auto;
  border:0 !important;
  box-shadow:none !important;
  outline:0;
}
@media (max-width:768px){
  hr.mt-0.mb-40{ display:none !important; }
}

/* =========================================================
   14) NFT GRID + GALLERY
   ========================================================= */
.nft-grid-section{ padding:40px 0; }
.nft-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:24px;
}
@media (max-width:768px){
  .nft-grid{ grid-template-columns:1fr; gap:16px; }
}
.nft-card{
  display:block;
  background:#fff;
  border:1px solid #eaeaea;
  border-radius:10px;
  padding:16px;
  text-decoration:none;
  color:inherit;
  transition:transform .2s ease, box-shadow .2s ease;
}
.nft-card:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 24px rgba(0,0,0,.06);
}
.nft-media{
  aspect-ratio:1/1;
  width:100%;
  overflow:hidden;
  border-radius:8px;
  background:#f6f6f6;
}
.nft-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}
.nft-meta{ margin-top:12px; }
.nft-title{ margin:0; }
.nft-collection{ margin:4px 0 0; font-size:.95rem; opacity:.7; }
.section-dark .nft-card{ background:#111; border-color:#222; }
.section-dark .nft-meta,
.section-dark .nft-title{ color:#fff; }

.nft-gallery{ margin:0; padding:0; }
.nft-gallery-row{ display:flex; flex-wrap:wrap; margin:0; }
.nft-gallery-item{ flex:1 1 33.333%; padding:0; margin:0; }
.nft-gallery-img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1/1;
  object-fit:cover;
  object-position:center;
  border:none;
  margin:0;
  padding:0;
  background:none;
  transition:transform .3s ease;
}
.nft-gallery-img:hover{ transform:scale(1.02); }
@media (max-width:768px){
  .nft-gallery-row{ flex-direction:column; }
  .nft-gallery-item{ width:100%; }
  .nft-gallery-img{
    width:100vw;
    max-width:100vw;
    margin-left:calc(-50vw + 50%);
  }
}

/* =========================================================
   15) PRICING – nur innerhalb #price-link
   ========================================================= */
#price-link,
#price-link .pricing-table-4,
#price-link .pricing-table-4 *{
  font-family:"BBH Sans Hegarty","Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif !important;
  letter-spacing:-.01em;
}

#price-link .pricing-table-4 .pt4-ul{
  font-size:clamp(1.68rem, 1.26vw + 1.4rem, 2.1rem) !important;
  line-height:1.6 !important;
}
#price-link .pricing-table-4 .pt4-ul li{ margin-bottom:.55em !important; }

#price-link .price-button-cont-4 .button{
  font-size:clamp(1.2rem, .9vw + 1rem, 1.5rem) !important;
  line-height:1.2 !important;
  padding:.9em 1.6em !important;
  border-radius:0 !important;
  color:#000 !important;
  text-transform:none !important;
  font-weight:400 !important;
  box-shadow:none !important;
  display:inline-block;
  background:transparent;
  border:2px solid transparent;
}
#price-link .outline-box-pink  .price-button-cont-4 .button{ background:#FF7EE0 !important; border-color:#FF7EE0 !important; }
#price-link .outline-box-blue  .price-button-cont-4 .button{ background:#5394ff !important; border-color:#5394ff !important; }
#price-link .outline-box-green .price-button-cont-4 .button{ background:#62EAAF !important; border-color:#62EAAF !important; }

#price-link .price-button-cont-4 .button.gray,
#price-link .price-button-cont-4 .button.thin,
#price-link .price-button-cont-4 .button.rounded{
  border-radius:0 !important;
}

@media (max-width:480px){
  #price-link .price-button-cont-4 .button{
    font-size:clamp(1.05rem, 1.8vw + .9rem, 1.25rem) !important;
    padding:.8em 1.4em !important;
  }
}

#price-link .price-cont-4{ line-height:1; }
#price-link .price-5{
  font-size:clamp(3.6rem, 4.2vw + 1.6rem, 4rem) !important;
  font-weight:700;
  letter-spacing:-.01em;
}
@media (max-width:480px){
  #price-link .price-5{ font-size:5rem !important; }
}
#price-link .currency-4{
  font-size:.8em !important;
  font-weight:600;
  position:relative;
  top:-.15em;
  margin-right:.1em;
  opacity:.9;
}
#price-link .pricing-table-4 .pt4-ul,
#price-link .pricing-table-4 .pt4-ul li{
  color:#000 !important;
}

/* Outline Frames für Pricing Boxes */
.outline-box-pink,
.outline-box-blue,
.outline-box-green{
  border:12px solid;
  padding:2em 1.5em;
  border-radius:0;
  margin:20px 0;
  transition:transform .3s ease;
  background:transparent;
  box-shadow:none !important;
}
.outline-box-pink{ border-color:#FF7EE0; }
.outline-box-blue{ border-color:#5394ff; }
.outline-box-green{ border-color:#62EAAF; }

.outline-box-pink:hover,
.outline-box-blue:hover,
.outline-box-green:hover{
  transform:translateY(-4px);
}
@media (max-width:768px){
  .outline-box-pink,
  .outline-box-blue,
  .outline-box-green{
    border-width:2px;
    padding:1.5em 1.2em;
    margin:12px 0;
  }
}

/* =========================================================
   16) BOOKING MODAL (Basis)
   ========================================================= */
.booking-modal{
  position:fixed;
  inset:0;
  display:none;
  z-index:10000;
  font-family:"BBH Sans Hegarty","Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
.booking-modal.is-open{ display:block; }

.booking-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(2px);
}
.booking-modal__dialog{
  position:relative;
  max-width:720px;
  margin:6vh auto;
  background:#fff;
  color:#111;
  border:4px solid #0ED5D7;
  border-radius:0;
  padding:clamp(18px, 4vw, 40px);
  z-index:1;
}
.booking-modal__close{
  position:absolute;
  top:8px;
  right:10px;
  background:transparent;
  border:0;
  font-size:2rem;
  line-height:1;
  cursor:pointer;
}

.booking-sub{ opacity:.8; }

.booking-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px 18px;
}
.form-group--full{ grid-column:1 / -1; }
.form-group label{
  display:block;
  font-size:.95rem;
  margin-bottom:6px;
  opacity:.85;
}
.booking-form input,
.booking-form select,
.booking-form textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid #ddd;
  outline:none;
  font-size:1rem;
  background:#fff;
  color:#111;
  transition:border-color .2s ease, box-shadow .2s ease;
  border-radius:6px;
}
.booking-form input:focus,
.booking-form select:focus,
.booking-form textarea:focus{
  border-color:#0ED5D7;
  box-shadow:0 0 0 3px rgba(14,213,215,.15);
}
.booking-form .hp{
  position:absolute;
  left:-5000px;
  width:1px;
  height:1px;
}
.error{ color:#d33; font-size:.9rem; margin-top:6px; }
.global-error{ margin-top:12px; }
.booking-success h2{ margin-bottom:10px; }

.mt-10{ margin-top:10px; }
.mt-20{ margin-top:20px; }
.mb-20{ margin-bottom:20px; }
.mb-30{ margin-bottom:30px; }

.form-footnote{ font-size:.85rem; opacity:.6; margin-top:10px; }

/* =========================================================
   17) CTA OUTLINE (Say Hello)
   ========================================================= */
.cta-outline-wrap{
  padding:clamp(48px, 10vh, 120px) 0;
  text-align:center;
  background:transparent;
}
.outline-cta{
  display:inline-block;
  position:relative;
  text-decoration:none;
  border:4px solid #363636;
  padding:clamp(18px, 3vw, 34px) clamp(28px, 6vw, 70px);
  background:transparent;
  color:#000;
  border-radius:0;
}
.outline-cta__text{
  display:inline-block;
  transition:transform .25s ease;
  margin:0;
}
.outline-cta:hover .outline-cta__text,
.outline-cta:focus-visible .outline-cta__text{
  transform:translate(.08em, -.08em);
}
.outline-cta:focus-visible{
  outline:none;
  box-shadow:0 0 0 0px rgba(14,213,215,.18);
}
@media (max-width:768px){
  .outline-cta{ border-width:3px; }
}

/* =========================================================
   18) STYLEFRAMES HERO (kompakt, wie zuletzt)
   ========================================================= */
.hero-style-frames{
  background:#fff;
  min-height:clamp(110px, 18vh, 220px);
  padding:clamp(14px, 3vh, 32px) 0;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.hero-style-frames .hero-h3{
  margin:0;
  text-transform:uppercase;
  line-height:.95;
  letter-spacing:.02em;
  font-size:clamp(3.5rem, 12vw, 15rem);
}

/* =========================================================
   19) PROJECT INFO BLOCK (Standard, ohne Sticky/Parallax)
   ========================================================= */
.project-info-block{
  width:100%;
  padding:4vh 6vw;
  box-sizing:border-box;
}
.project-info-grid{
  display:grid;
  grid-template-columns:1.8fr auto 1fr;
  column-gap:4vw;
  align-items:center;
}
.project-info-left{
  display:flex;
  justify-content:flex-end;
}
.project-title-wrap{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  text-align:right;
  gap:.2em;
}

/* Gemeinsamer Projekttitel für Detailseiten */
.h-project-title{
  font-size:clamp(5.22rem, 6.48vw + 0.9rem, 7.47rem);
}
.project-title-lines{
  font-size:clamp(3rem, 9vw, 9rem);
  font-weight:800;
  line-height:.95;
  text-transform:uppercase;
  text-align:right;
}
.project-info-label{
  display:flex;
  justify-content:center;
  align-items:center;
}
.project-info-label span{
  writing-mode:vertical-rl;
  text-orientation:mixed;
  font-size:1.9rem;
  letter-spacing:.15em;
  opacity:.7;
  text-transform:uppercase;
}
.project-info-right h4{
  margin:0;
  font-weight:400;
  line-height:1.5;
  max-width:60ch;
}

@media (max-width:900px){
  .project-info-grid{
    grid-template-columns:1fr;
    row-gap:3rem;
  }
  .project-info-label{ display:none; }
  .project-info-left{ justify-content:flex-start; }
  .project-title-wrap{
    align-items:flex-start;
    text-align:left;
  }
  /* Titel 10% kleiner auf Tablets/Mobile */
  .h-project-title{
    font-size:clamp(4.7rem, 5.83vw + 0.81rem, 6.72rem);
  }
}

@media (max-width:768px){
  .project-info-block{
    padding-left:clamp(28px, 9vw, 56px);
    padding-right:clamp(28px, 9vw, 56px);
  }
  /* Titel auf kleinen Phones nochmals kleiner */
  .h-project-title{
    font-size:clamp(3.2rem, 9vw, 5rem);
  }
  .project-info-right h4{
    font-size:clamp(1.365rem, 1.82vw + 1.04rem, 1.56rem);
    line-height:1.4;
    opacity: 0.9;
    /* Verhindert Überlauf nach rechts */
    max-width: 100%;
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
  }
}

/* =========================================================
   video-grid Projektvorschau // webM mp4 Poster
   ========================================================= */
.ss-db-media{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* =========================================================
   hello swap
   ========================================================= */
.hello-group{
  display:inline-block;
  white-space:nowrap;
}

.hello-swap{
  font-family:inherit;
  font-size:0.92em;
  letter-spacing:-0.02em;
  white-space:nowrap;
  display:inline;
  -webkit-font-smoothing:antialiased;
  text-rendering:geometricPrecision;
}

.hello-swap.is-secondary{
  font-family:"Inter", system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Helvetica, Arial, sans-serif;
  font-weight:900;
  letter-spacing:-0.03em;
}

.hello-swap.is-rattling{
  display:inline-block;
  opacity:0.92;
  filter:blur(0.15px);
  transform:translate3d(var(--jx, 0px), var(--jy, 0px), 0);
}

/* Scroll-reactive underline layer (safe default) */
.underline-scroll{
  position:relative;
  display:inline-block;
  --u:0.85;
  --u-thickness:0.14em;
  --u-offset:0.12em;
}

.underline-scroll::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:calc(-1 * var(--u-offset));
  height:var(--u-thickness);
  border-radius:999px;
  transform-origin:left center;
  transform:scaleX(var(--u));
  opacity:1;
  background:currentColor;
  pointer-events:none;
}

.underline-cyan.underline-scroll{ color:#00ffff; }
.underline-pink.underline-scroll{ color:#ff00b4; }
.underline-lila.underline-scroll{ color:#9650ff; }
.underline-green.underline-scroll{ color:#28ff8c; }

@media (prefers-reduced-motion: reduce){
  .underline-scroll{ --u:1; }
}

.reveal-in{
  opacity:0;
  transform:translate3d(0, 10px, 0);
  transition:opacity 1420ms ease, transform 520ms cubic-bezier(.16,.8,.2,1);
  will-change:opacity, transform;
}
.reveal-in.is-in{
  opacity:1;
  transform:translate3d(0, 0, 0);
}
@media (prefers-reduced-motion: reduce){
  .reveal-in{ opacity:1; transform:none; transition:none; }
}

/* Back to Motiondesign – pink highlight: collapse → expand on hover */
.ss-highlight-link.highlight-reveal{
  position:relative;
  display:inline-block;
}

.ss-highlight-link.highlight-reveal::before,
.ss-highlight-link.highlight-reveal::after{
  transform-origin:50% 50%;
  transform:scaleX(1);
  will-change:transform;
}

.ss-highlight-link.highlight-reveal:hover::before,
.ss-highlight-link.highlight-reveal:focus-visible::before,
.ss-highlight-link.highlight-reveal:hover::after,
.ss-highlight-link.highlight-reveal:focus-visible::after{
  animation:ssHighlightCollapseExpand 420ms cubic-bezier(.16,1,.3,1) 1 both;
}

@keyframes ssHighlightCollapseExpand{
  0%   { transform:scaleX(1); }
  25%  { transform:scaleX(0); }
  100% { transform:scaleX(1); }
}

@media (hover: hover) and (pointer: fine){
  .ss-highlight-link.highlight-reveal:hover::before,
  .ss-highlight-link.highlight-reveal:focus-visible::before,
  .ss-highlight-link.highlight-reveal:hover::after,
  .ss-highlight-link.highlight-reveal:focus-visible::after{
    animation:ssHighlightCollapseExpand 420ms cubic-bezier(.16,1,.3,1) 1 both;
  }
}

/* Centered block like reference image */
.ss-about-block{
  width:100%;
  padding:clamp(3rem, 7vw, 6rem) 0;
}

.ss-about-inner{
  width:min(1100px, calc(100% - 3rem));
  margin:0 auto;
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:clamp(2rem, 5vw, 4rem);
  align-items:start;
}

.ss-about-kicker{
  text-align:right;
  max-width:16ch;
}

.ss-about-copy{
  max-width:72ch;
}

@media (max-width: 768px){
  .ss-about-inner{
    grid-template-columns:1fr;
    row-gap:1.25rem;
  }
  .ss-about-kicker{
    text-align:left;
    max-width:none;
  }
  .ss-about-copy{
    max-width:none;
  }
}

/* 3-column variation */
.ss-about-3col{
  display:grid;
  grid-template-columns:auto 1fr 1fr;
  column-gap:clamp(2rem, 5vw, 4rem);
  align-items:start;
}

/* =========================================================
   ABOUT – 2 SIDE-BY-SIDE PAIRS
   ========================================================= */
.ss-about-2blocks{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:clamp(3rem, 7vw, 6rem);
  align-items:start;
}

.ss-about-pair{
  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:clamp(1.5rem, 3vw, 2.5rem);
  align-items:start;
  --about-nudge:0px;
}

.ss-about-copy h4{
  margin:0;
  line-height:1.45;
}

.ss-about-kicker{
  margin:0;
  transform:translateY(calc(((1.45em - 1em) / 2) + var(--about-nudge)));
}

@media (max-width: 900px){
  .ss-about-2blocks{
    grid-template-columns:1fr;
    row-gap:3rem;
  }

  .ss-about-pair{
    grid-template-columns:1fr;
    row-gap:0.75rem;
  }

  .ss-about-kicker{
    text-align:left;
    max-width:none;
    transform:none;
  }

  .ss-about-copy{
    max-width:none;
  }
}

/* Remove middle bar when menu is open (X only) */
.fs-menu-icon.is-clicked{
  background-color:transparent !important;
}

/* FS Menu Icon: X ohne Mittelstrich + kein Fade/Blend */
#nav .fs-primary-nav-trigger .fs-menu-icon{
  background-color:#000 !important;
  transition:none !important;
}

#nav .fs-primary-nav-trigger .fs-menu-icon::before,
#nav .fs-primary-nav-trigger .fs-menu-icon::after{
  background-color:#000 !important;
  opacity:1 !important;
  transition:none !important;
}

#nav .fs-primary-nav-trigger .fs-menu-icon.is-clicked{
  background-color:transparent !important;
  transition:none !important;
}

#nav .fs-primary-nav-trigger .fs-menu-icon.is-clicked::before,
#nav .fs-primary-nav-trigger .fs-menu-icon.is-clicked::after{
  background-color:#fff !important;
  opacity:1 !important;
  transition:none !important;
}

/* ABOUT HERO: halb so hoch, ohne Text/Box zu beschneiden */
.hero-169.hero-half{
  height:50vh;
  min-height:270px;
  max-height:540px;
  overflow:hidden;
}

.hero-169.hero-half .hero-169-overlay{
  padding:clamp(12px, 2.5vw, 28px);
}

.hero-169.hero-half .outline-box{
  padding:.75em 1em;
}

.hero-169.hero-half .hero-169-overlay h1{
  margin:0 !important;
}

/* =========================================================
   LOGO MARQUEE – FULL WIDTH, +50% HÖHE, +30% ABSTAND
   ========================================================= */
.ss-marquee.ss-marquee--logos{
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  overflow:hidden;
}

.ss-marquee--logos .ss-marquee__track{
  gap:0;
}

.ss-marquee--logos .ss-marquee__item{
  padding-left:2.6rem;
  padding-right:2.6rem;
  display:inline-flex;
  align-items:center;
}

.ss-marquee--logos img{
  height:180px;
  width:auto;
  display:block;
  object-fit:contain;
}

@media (max-width: 768px){
  .ss-marquee--logos img{
    height:162px;
  }
  .ss-marquee--logos .ss-marquee__item{
    padding-left:1.6rem;
    padding-right:1.6rem;
  }
}

/* LOGO MARQUEE – LANGSAMER */
.ss-marquee.ss-marquee--logos{
  --marquee-duration:60s;
}

.reveal-soft{
  opacity:0;
  transform:translate3d(0, 18px, 0);
  transition:opacity 1400ms ease, transform 1400ms cubic-bezier(.2,.6,.2,1);
  will-change:opacity, transform;
}
.reveal-soft.is-in{
  opacity:1;
  transform:translate3d(0, 0, 0);
}
@media (prefers-reduced-motion: reduce){
  .reveal-soft{ opacity:1; transform:none; transition:none; }
}

/* Reveal Soft – Variante: X-Achse */
.reveal-soft.reveal-x{
  transform:translate3d(-42px, 0, 0);
}
.reveal-soft.reveal-x.is-in{
  transform:translate3d(0, 0, 0);
}

/* Reveal Soft – HERO X */
.reveal-soft.reveal-x-hero{
  transform:translate3d(-88px, 0, 0);
}
.reveal-soft.reveal-x-hero.is-in{
  transform:translate3d(0, 0, 0);
}

/* Reveal IN – X Bewegung */
.reveal-in.reveal-x{
  transform:translate3d(-44px, 0, 0);
}
.reveal-in.reveal-x.is-in{
  transform:translate3d(0, 0, 0);
}

/* Extra langer Weg nur für bestimmte Headlines */
.reveal-in.reveal-x-long{
  transform:translate3d(-88px, 0, 0);
}
.reveal-in.reveal-x-long.is-in{
  transform:translate3d(0, 0, 0);
}

/* Extra langer + langsamer Reveal */
.reveal-in.reveal-x-long{
  transition-duration:1.1s;
  transition-timing-function:cubic-bezier(.22,.61,.36,1);
}

.reveal-x-xlong{
  transform:translateX(-180px);
  opacity:0;
}
.reveal-x-xlong.is-in{
  transform:translateX(0);
  opacity:1;
  transition:transform 1.4s cubic-bezier(.22,.61,.36,1), opacity 1.4s ease;
}

/* SHOWREEL BANDEROLE */
.ss-marquee--showreel {
  overflow:hidden;
}

.ss-marquee--showreel .ss-marquee__item {
  flex:0 0 auto;
}

.ss-marquee--showreel img {
  display:block;
  height:auto;
  width:auto;
  max-height:40vh;
}

.ss-marquee--showreel{
  height:180px;
}

.ss-marquee--showreel .ss-marquee__track{
  height:100%;
}

.ss-marquee--showreel .ss-marquee__item{
  height:100%;
}

.ss-marquee--showreel img{
  height:100%;
  width:auto;
  object-fit:contain;
}

.ss-marquee--showreel .ss-marquee__track{
  animation-duration:80s;
  gap:0;
}

.ss-marquee--showreel .ss-marquee__item{
  margin:0;
  padding:0;
}

@media (max-width: 768px){
  .ss-marquee--showreel{
    height:160px;
  }
}

/* ===================================================
   COMPONENTS
   =================================================== */

.h-supreme-1--hero {
  white-space:nowrap;
  line-height:0.9;
  margin:0;
}

.cursor-underline{
  display:inline-block;
  margin-left:0.08em;
  animation:cursorBlink 1.05s steps(1,end) infinite;
}

@keyframes cursorBlink{
  0%,49%{opacity:1;}
  50%,100%{opacity:0;}
}

@media (prefers-reduced-motion: reduce){
  .cursor-underline{
    animation:none;
    opacity:1;
  }
}

/* ---------- Button: "More Info" ---------- */
.sss-moreinfo-btn{
  appearance:none;
  background:transparent;
  border:1px solid #000;
  color:#000;
  border-radius:999px;
  padding:10px 16px;
  font:inherit;
  letter-spacing:.02em;
  line-height:1;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}

.sss-moreinfo-btn:hover,
.sss-moreinfo-btn:focus-visible{
  background:rgba(0,0,0,0.9);
  color:#ffffff;
  border-color:rgba(0,0,0,.3);
}

.sss-moreinfo-btn:focus-visible{
  outline:none;
}

/* ---------- Modal: Layout ---------- */
body.is-modal-open{
  overflow:hidden;
}

/* =========================================================
   MODAL CONTENT LAYOUT
   ========================================================= */
.sss-modal{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
}

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

.sss-modal__backdrop{
  position:absolute;
  inset:0;
  background: rgba(204,204,204,0.35);
  backdrop-filter:blur(6px);
}

.sss-modal__panel{
  background:#ffffff;
}
.sss-modal__panel{
  position:absolute;
  left:50%;
  top:50%;
  width:min(920px, calc(100vw - 48px));
  max-height:min(80vh, calc(100vh - 96px));
  transform:translate(-50%, -50%);
  border-radius:0;
  box-shadow:none;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  background:var(--popup-bg, #2a2b2f);
  color:var(--popup-fg, #f2f2f2);
  transform-origin:var(--origin-x, 50%) var(--origin-y, 50%);
}

/* MODAL – LIGHT VERSION */
.sss-modal-light{
  --popup-bg:#ffffff;
  --popup-fg:#111111;
}

.sss-modal-light .sss-modal__close{
  color:#111111;
}

/* Close Button */
.sss-modal__close{
  position:absolute;
  top:18px;
  left:24px;
  background:none;
  border:none;
  color:#ffffff;
  font-size:55px;
  line-height:1;
  font-weight:300;
  cursor:pointer;
  padding:0;
  z-index:20;
}

.sss-modal__close:hover{
  opacity:.6;
}

.sss-modal__close:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(255,255,255,.22), 0 0 0 6px rgba(0,0,0,.35);
}

.sss-modal__header{
  padding:60px 80px 10px 70px;
}

.sss-modal__title{
  margin:0;
}

/* korrigiert: stabile Scrollarea ohne Flash */
.sss-modal__scroll{
  flex:1 1 auto;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable;
}

.sss-modal__divider{
  height:2px;
  background:rgba(0,0,0,.55);
  margin:14px 70px 18px 70px;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform 520ms cubic-bezier(.16,1,.3,1);
}

.sss-modal.is-opening .sss-modal__divider,
.sss-modal.is-open .sss-modal__divider{
  transform:scaleX(1);
}

.sss-modal__content{
  padding:20px 80px 80px 70px;
  overflow:visible;
}

/* Mobile Feintuning – modal */
@media (max-width: 640px){
  .sss-modal__panel{
    width:calc(100vw - 28px);
    max-height:calc(100vh - 28px);
    border-radius:0;
  }
  .sss-modal__header{ padding:58px 18px 14px 18px; }
  .sss-modal__divider{ margin:14px 18px 18px 18px; }
  .sss-modal__content{ padding:0 18px 44px 18px; }
  .sss-modal__close{
    top:14px;
    left:18px;
  }
  .sss-modal__edge-label{
    left:30px;
    font-size:0.75rem;
    letter-spacing:.22em;
  }
}

/* ---------- Animation (open/close) ---------- */
@keyframes sssModalIn {
  0%   { opacity:0; transform:translate(-50%,-50%) scale(.86); filter:blur(6px); }
  100% { opacity:1; transform:translate(-50%,-50%) scale(1); filter:blur(0); }
}

@keyframes sssModalOut {
  0%   { opacity:1; transform:translate(-50%,-50%) scale(1); filter:blur(0); }
  100% { opacity:0; transform:translate(-50%,-50%) scale(.92); filter:blur(6px); }
}

.sss-modal.is-opening .sss-modal__panel{
  animation:sssModalIn .34s cubic-bezier(.2,.9,.1,1) both;
}
.sss-modal.is-closing .sss-modal__panel{
  animation:sssModalOut .22s ease both;
}

/* Theme-Hooks */
.sss-modal.theme-underline-cyan,
.sss-modal.underline-cyan{ --popup-bg:#35d0ff; --popup-fg:#0b0b0b; }

.sss-modal.theme-underline-blue,
.sss-modal.underline-blue{ --popup-bg:#56a4ff; --popup-fg:#0b0b0b; }

.sss-modal.theme-underline-flamingo,
.sss-modal.underline-flamingo{ --popup-bg:#fd8dc3; --popup-fg:#0b0b0b; }

.sss-modal.theme-underline-green,
.sss-modal.underline-green{ --popup-bg:#58ce80; --popup-fg:#0b0b0b; }

.sss-modal.theme-underline-lila,
.sss-modal.underline-lila{ --popup-bg:#a95cff; --popup-fg:#0b0b0b; }

.sss-modal.theme-underline-grey,
.sss-modal.underline-grey{ --popup-bg:#e6e6e6; --popup-fg:#0b0b0b; }

/* Button "More Info" */
.project-info-right .sss-moreinfo-btn{
  margin-top:1.8rem;
}

/* =========================================================
   SSS MODAL – Body font-size
   ========================================================= */
#project-info{
  --sss-modal-body-size:1.8rem;
}

.sss-modal .sss-modal__content.modal-body-h4{
  font-size:var(--sss-modal-body-size, 1.8rem);
  line-height:1.5;
  font-weight:400;
}

.sss-modal .sss-modal__content.modal-body-h4 p{
  margin:0 0 1em 0;
}
.sss-modal .sss-modal__content.modal-body-h4 p:last-child{
  margin-bottom:0;
}

/* =========================================================
   23) MODAL EDGE LABEL
   ========================================================= */
.sss-modal__edge-label{
  position:absolute;
  left:42px;
  top:55%;
  transform:translate(-50%, -50%) rotate(-90deg);
  transform-origin:center;
  font-family:"Poppins", system-ui, sans-serif;
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#00000;
  opacity:.85;
  white-space:nowrap;
  pointer-events:none;
  z-index:25;
}

/* Popup subtitle */
.sss-modal__subtitle{
  font-family:"BBH Sans Hegarty","Poppins",system-ui,sans-serif;
  font-weight:400;
  font-size:clamp(1.9rem, 3.2vw + .8rem, 3.8rem);
  line-height:1.05;
  letter-spacing:-.01em;
  margin:0;
}

@media (max-width:768px){
  .sss-modal__edge-label{
    left:10px;
    font-size:11px;
    letter-spacing:.22em;
  }
}

/* =========================================================
   24) TEAM GRID
   ========================================================= */
.team-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:3rem;
  align-items:start;
}

.team-card{
  text-align:center;
}

.team-photo{
  width:170px;
  height:170px;
  margin:0 auto 1.5rem auto;
  border-radius:50%;
  overflow:hidden;
}

.team-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.team-copy{
  margin:0 auto;
  max-width:32ch;
  line-height:1.6;
}

.team-role{
  font-family:"Poppins", system-ui, sans-serif;
  font-size:clamp(1.35rem, 0.4vw + 1.2rem, 1.6rem);
  line-height:1.45;
  letter-spacing:.04em;
  opacity:.9;
  margin:.45rem 0 0 0;
}

@media (max-width: 900px){
  .team-grid{
    grid-template-columns:1fr;
    gap:2.5rem;
  }
}

@media (max-width: 640px){
  .team-photo{
    width:160px;
    height:160px;
  }
}

/* =========================================================
   PARTNER GRID – STUDIO VERSION
   ========================================================= */
.partner-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:4rem;
  align-items:start;
}

.partner-card{
  text-align:center;
}

.partner-photo{
  width:200px;
  height:200px;
  margin:0 auto 2rem auto;
  border-radius:50%;
  overflow:hidden;
}

.partner-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.partner-role{
  font-family:"Poppins", system-ui, sans-serif;
  font-size:clamp(1.35rem, 0.4vw + 1.2rem, 1.6rem);
  line-height:1.45;
  letter-spacing:.04em;
  opacity:.9;
  margin:.5rem 0 0 0;
}

@media (max-width:900px){
  .partner-grid{
    grid-template-columns:1fr;
    gap:3rem;
  }

  .partner-photo{
    width:200px;
    height:200px;
  }
}

/* =========================================================
   CINEMATIC MODAL VARIANT (keeps standard popup untouched)
   Only active on .sss-modal--cinematic
   ========================================================= */
.sss-modal--cinematic{
  overflow:hidden;
}

.sss-modal--cinematic .sss-modal__backdrop{
  background: rgba(229, 229, 229, 0.9);
  backdrop-filter: blur(1px);
}

.sss-modal--cinematic .sss-modal__panel{
  z-index:3;
  background:#ffffff;
  color:#111111;
  transform:translate(calc(-50% - 130vw), -50%);
  opacity:1;
  filter:none;
}

.sss-modal--cinematic .sss-modal__close{
  color:#111111;
}

.sss-modal--cinematic.is-opening .sss-modal__backdrop{
  animation:sssOverlaySweepIn 820ms cubic-bezier(.22,.61,.36,1) both;
}

.sss-modal--cinematic.is-opening .sss-modal__panel{
  animation:sssPanelSweepIn 620ms cubic-bezier(.22,.61,.36,1) both;
  animation-delay:.5s;
}

/* während Einfluganimation keine Scrollbarkeit */
.sss-modal--cinematic.is-opening .sss-modal__scroll{
  overflow-y:hidden;
}

/* danach wieder normal */
.sss-modal--cinematic.is-open:not(.is-opening) .sss-modal__scroll{
  overflow-y:auto;
}

.sss-modal--cinematic.is-open .sss-modal__backdrop{
  transform:translate3d(0, 0, 0);
}

.sss-modal--cinematic.is-open .sss-modal__panel{
  transform:translate(-50%, -50%);
  opacity:1;
}

.sss-modal--cinematic.is-closing .sss-modal__panel{
  animation:sssPanelSweepOutLeft 360ms cubic-bezier(.55,.06,.68,.19) both;
}

.sss-modal--cinematic.is-closing .sss-modal__backdrop{
  animation:sssOverlaySweepOutLeft 420ms cubic-bezier(.55,.06,.68,.19) both;
  animation-delay:.18s;
}

@keyframes sssOverlaySweepIn{
  from{ transform:translate3d(-102%, 0, 0); }
  to{ transform:translate3d(0, 0, 0); }
}

@keyframes sssPanelSweepIn{
  from{ transform:translate(calc(-50% - 130vw), -50%); }
  to{ transform:translate(-50%, -50%); }
}

@keyframes sssPanelSweepOutLeft{
  from{ transform:translate(-50%, -50%); opacity:1; }
  to{ transform:translate(calc(-50% - 130vw), -50%); opacity:1; }
}

@keyframes sssOverlaySweepOutLeft{
  from{ transform:translate3d(0, 0, 0); opacity:1; }
  to{ transform:translate3d(-102%, 0, 0); opacity:1; }
}

@media (prefers-reduced-motion: reduce){
  .sss-modal--cinematic .sss-modal__backdrop,
  .sss-modal--cinematic .sss-modal__panel{
    animation:none !important;
  }

  .sss-modal--cinematic .sss-modal__backdrop{
    transform:translate3d(0, 0, 0) !important;
  }

  .sss-modal--cinematic .sss-modal__panel{
    transform:translate(-50%, -50%) !important;
  }
}

/* =========================================================
   REVEAL FLOW – zusätzlicher Reveal für Fließtext
   ========================================================= */
.reveal-flow{
  opacity:0;
  transform:translate3d(0, 22px, 0);
  transition:
    opacity 700ms ease,
    transform 700ms cubic-bezier(.2,.6,.2,1);
  will-change:opacity, transform;
}

.reveal-flow.is-in{
  opacity:1;
  transform:translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce){
  .reveal-flow{
    opacity:1;
    transform:none;
    transition:none;
  }
}

/* verhindert Horizontal-Flash */
html,
body{
  overflow-x:hidden;
}

/* =========================================================
   CLIENTS & BRANDS – clean responsive grid
   ========================================================= */
/* =========================================================
   CLIENTS & BRANDS – Logo Grid Reveal
   ========================================================= */
.ss-clients{
  width:100%;
  margin-top:clamp(2rem, 6vw, 5rem);
  padding:clamp(1.6rem, 4vw, 3rem) 0 clamp(2.4rem, 6vw, 4rem);
}

.ss-clients__inner.ss-clients__grid{
  width:min(920px, calc(100% - 6vw));
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:0.3rem;
  align-items:center;
}

.ss-clients__logo{
  aspect-ratio:1 / 0.72;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0.2rem;
  opacity:0;
  transform:translate3d(-26px, 0, 0);
  transition:
    opacity 900ms ease,
    transform 900ms cubic-bezier(.2,.6,.2,1);
  will-change:opacity, transform;
}

.ss-clients__grid.is-in .ss-clients__logo{
  opacity:1;
  transform:translate3d(0, 0, 0);
}

.ss-clients__logo img{
  max-width:110%;
  max-height:110%;
  width:auto;
  height:auto;
  display:block;
  object-fit:contain;
  filter:grayscale(100%);
}

/* Staffelung links -> rechts */
.ss-clients__grid.is-in .ss-clients__logo:nth-child(1){ transition-delay:0ms; }
.ss-clients__grid.is-in .ss-clients__logo:nth-child(2){ transition-delay:120ms; }
.ss-clients__grid.is-in .ss-clients__logo:nth-child(3){ transition-delay:240ms; }
.ss-clients__grid.is-in .ss-clients__logo:nth-child(4){ transition-delay:360ms; }
.ss-clients__grid.is-in .ss-clients__logo:nth-child(5){ transition-delay:480ms; }
.ss-clients__grid.is-in .ss-clients__logo:nth-child(6){ transition-delay:0ms; }
.ss-clients__grid.is-in .ss-clients__logo:nth-child(7){ transition-delay:120ms; }
.ss-clients__grid.is-in .ss-clients__logo:nth-child(8){ transition-delay:240ms; }
.ss-clients__grid.is-in .ss-clients__logo:nth-child(9){ transition-delay:360ms; }
.ss-clients__grid.is-in .ss-clients__logo:nth-child(10){ transition-delay:480ms; }
.ss-clients__grid.is-in .ss-clients__logo:nth-child(11){ transition-delay:0ms; }
.ss-clients__grid.is-in .ss-clients__logo:nth-child(12){ transition-delay:120ms; }
.ss-clients__grid.is-in .ss-clients__logo:nth-child(13){ transition-delay:240ms; }
.ss-clients__grid.is-in .ss-clients__logo:nth-child(14){ transition-delay:360ms; }
.ss-clients__grid.is-in .ss-clients__logo:nth-child(15){ transition-delay:480ms; }
.ss-clients__grid.is-in .ss-clients__logo:nth-child(16){ transition-delay:0ms; }
.ss-clients__grid.is-in .ss-clients__logo:nth-child(17){ transition-delay:120ms; }
.ss-clients__grid.is-in .ss-clients__logo:nth-child(18){ transition-delay:240ms; }
.ss-clients__grid.is-in .ss-clients__logo:nth-child(19){ transition-delay:360ms; }
.ss-clients__grid.is-in .ss-clients__logo:nth-child(20){ transition-delay:480ms; }
.ss-clients__grid.is-in .ss-clients__logo:nth-child(21){ transition-delay:0ms; }
.ss-clients__grid.is-in .ss-clients__logo:nth-child(22){ transition-delay:120ms; }
.ss-clients__grid.is-in .ss-clients__logo:nth-child(23){ transition-delay:240ms; }
.ss-clients__grid.is-in .ss-clients__logo:nth-child(24){ transition-delay:360ms; }
.ss-clients__grid.is-in .ss-clients__logo:nth-child(25){ transition-delay:480ms; }

@media (max-width:640px){
  .ss-clients__inner.ss-clients__grid{
    width:min(700px, calc(100% - 3rem));
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:1rem;
  }

  .ss-clients__logo{
    padding:0.7rem;
  }

  .ss-clients__logo:last-child:nth-child(odd){
    grid-column:1 / -1;
    justify-self:center;
    width:min(100%, 220px);
  }
}

@media (prefers-reduced-motion: reduce){
  .ss-clients__logo{
    opacity:1;
    transform:none;
    transition:none;
  }
}

/* =========================================================
   DUO SQUARE BLEED – isoliert / reversibel
   Zwei quadratische Full-Bleed-Bilder nebeneinander
   ========================================================= */

.ss-duo-square-bleed{
  width:100vw;
  max-width:100vw;
  margin-left:calc(-50vw + 50%);
  margin-right:calc(-50vw + 50%);
}

.ss-duo-square-bleed__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
}

.ss-duo-square-bleed__item{
  position:relative;
  display:block;
  overflow:hidden;
  margin:0;
  padding:0;
  line-height:0;
}

.ss-duo-square-bleed__media{
  display:block;
  width:100%;
  aspect-ratio:1 / 1;
  object-fit:cover;
  object-position:center;
}

/* Mobile: untereinander */
@media (max-width:991px){
  .ss-duo-square-bleed__grid{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   DUO SQUARE COPY – isoliert / reversibel
   Links quadratisches Bild, rechts Typo/Text
   ========================================================= */

.ss-duo-square-copy{
  width:100vw;
  max-width:100vw;
  margin-left:calc(-50vw + 50%);
  margin-right:calc(-50vw + 50%);
}

.ss-duo-square-copy__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  align-items:stretch;
}

.ss-duo-square-copy__media-wrap{
  position:relative;
  overflow:hidden;
  line-height:0;
}

.ss-duo-square-copy__media{
  display:block;
  width:100%;
  aspect-ratio:1 / 1;
  object-fit:cover;
  object-position:center;
}

.ss-duo-square-copy__content{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  padding:clamp(28px, 5vw, 88px);
  box-sizing:border-box;
}

.ss-duo-square-copy__inner{
  width:min(100%, 760px);
  margin-left:clamp(8px, 2.2vw, 36px);
}

.ss-duo-square-copy__title{
  margin:0 0 clamp(18px, 2vw, 28px) 0 !important;
  line-height:.95;
}

.ss-duo-square-copy__text{
  margin:0;
}

/* optional: etwas kompaktere Zeilenbreite im Textblock */
.ss-duo-square-copy__content .project-info-right h4{
  margin:0;
  max-width:34ch;
}

/* Mobile: untereinander */
@media (max-width:991px){
  .ss-duo-square-copy__grid{
    grid-template-columns:1fr;
  }

  .ss-duo-square-copy__inner{
    margin-left:0;
    width:100%;
  }

  .ss-duo-square-copy__content .project-info-right h4{
    max-width:52ch;
  }
}

/* =========================================================
   FS MENU ITEM REVEAL – links nach rechts / additiv
   ========================================================= */

.fs-primary-nav.fs-sub-nav ul li{
  opacity:0;
  transform:translateX(-82px);
  transition:
    opacity 520ms ease,
    transform 700ms cubic-bezier(.2,.6,.2,1);
  will-change:opacity, transform;
}

.fs-primary-nav.is-visible.fs-sub-nav ul li{
  opacity:1;
  transform:translateX(0);
}

/* Stagger / Reihenfolge */
.fs-primary-nav.fs-sub-nav ul li:nth-child(1){ transition-delay:140ms; }
.fs-primary-nav.fs-sub-nav ul li:nth-child(2){ transition-delay:220ms; }
.fs-primary-nav.fs-sub-nav ul li:nth-child(3){ transition-delay:300ms; }
.fs-primary-nav.fs-sub-nav ul li:nth-child(4){ transition-delay:380ms; }
.fs-primary-nav.fs-sub-nav ul li:nth-child(5){ transition-delay:460ms; }
.fs-primary-nav.fs-sub-nav ul li:nth-child(6){ transition-delay:540ms; }

/* Beim Schließen ohne lange Verzögerung zurück */
.fs-primary-nav.fs-sub-nav ul li{
  transition-delay:0s;
}

.fs-primary-nav.is-visible.fs-sub-nav ul li:nth-child(1){ transition-delay:140ms; }
.fs-primary-nav.is-visible.fs-sub-nav ul li:nth-child(2){ transition-delay:220ms; }
.fs-primary-nav.is-visible.fs-sub-nav ul li:nth-child(3){ transition-delay:300ms; }
.fs-primary-nav.is-visible.fs-sub-nav ul li:nth-child(4){ transition-delay:380ms; }
.fs-primary-nav.is-visible.fs-sub-nav ul li:nth-child(5){ transition-delay:460ms; }
.fs-primary-nav.is-visible.fs-sub-nav ul li:nth-child(6){ transition-delay:540ms; }

@media (prefers-reduced-motion: reduce){
  .fs-primary-nav.fs-sub-nav ul li{
    opacity:1;
    transform:none;
    transition:none;
  }
}

#back-top{
  right:32px;
  bottom:32px;
}

#back-top a{
  display:block;
  width:auto !important;
  height:auto !important;
  padding:0 !important;
  background:none !important;
  border:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
  font-family:"BBH Sans Hegarty","Poppins",Arial,sans-serif;
  font-size:30px;
  line-height:1;
  font-weight:300;
  color:#111;
  text-decoration:none;
}

/* LOGO MOBIL // BÜNDIG MIT SEITENLAYOUT */
@media (max-width:768px){
  .header .logo-2,
  .header .logo-2 a,
  .header .logo-img{
    margin-left:0 !important;
    left:auto !important;
  }
}

/* CREDITS MOBIL // BÜNDIG MIT "about" */
@media (max-width:768px){
  .ss-about-inner{
    padding-left:clamp(24px, 8vw, 40px);
    padding-right:clamp(24px, 8vw, 40px);
  }
}

@media (max-width:768px){
  .ss-about-copy h4{
    font-size:clamp(1.365rem, 1.82vw + 1.04rem, 1.56rem);
    line-height:1.5;
  }
}

/* =========================================================
   SKY SODA SUPREME – Media Frame Patch (Motiondesign)
   ========================================================= */

:root{
  --ss-frame-radius: 40px;
  --ss-frame-padding: 20px;
  --ss-frame-bg: #ffffff;
}

/* Frame Wrapper */
.ss-frame{
  position: relative;
  display: block;
  width: 100%;
  background: var(--ss-frame-bg);
  border-radius: var(--ss-frame-radius);
  overflow: hidden;
  padding: var(--ss-frame-padding);
  box-sizing: border-box;
}

/* Inhalt (img + video) */
.ss-frame > img,
.ss-frame > video,
.ss-frame > .ss-db-media{
  width: 94%;
  height: 94%;
  display: block;
  margin: 3%;
  object-fit: cover;
  border-radius: calc(var(--ss-frame-radius) - var(--ss-frame-padding));
  transition: transform 700ms cubic-bezier(.2,.9,.2,1);
}

/* Aspect Ratios */
.ss-frame--square{ aspect-ratio: 1 / 1; }
.ss-frame--32{ aspect-ratio: 3 / 2; }
.ss-frame--169{ aspect-ratio: 16 / 9; }

/* Wichtig: bestehendes Ratio neutralisieren */
.ss-frame > .ss-db-media{
  aspect-ratio: auto !important;
}

/* Hover weiterhin smooth */
.ss-db-tile:hover .ss-frame > img,
.ss-db-tile:hover .ss-frame > video,
.ss-db-tile:hover .ss-frame > .ss-db-media{
  transform: scale(1.03);
  transition: transform 700ms cubic-bezier(.2,.9,.2,1);
}

/* Mobile Feinschliff */
@media (max-width:768px){
  :root{
    --ss-frame-radius: 38px;
    --ss-frame-padding: 20px;
  }
}

/* =========================================================
   REVEAL X2 – standalone
   ========================================================= */

.reveal-x2{
  opacity:0;
  transform:translate3d(-120px,0,0);
  transition:
    transform 900ms cubic-bezier(.2,.9,.2,1),
    opacity 600ms ease;
  will-change:transform, opacity;
}

.reveal-x2.is-in{
  opacity:1;
  transform:translate3d(0,0,0);
}

/* =========================================================
   SKY SODA SUPREME – BIG BANDEROLE
   isoliert, reversibel, copy & paste fähig
   ========================================================= */
.sss-banderole{
  --sss-banderole-speed: 224s;
  --sss-banderole-gap: 0.22em;
  --sss-banderole-overlap: -0.18em;
  --sss-banderole-stroke: #B1B1B1;

  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  overflow: hidden;
  padding-left: 0;
  padding-right: 0;
  background: transparent;
  isolation: isolate;
}

.sss-banderole__row{
  position: relative;
  width: 100%;
  overflow: visible;
  line-height: 0.52;
}

.sss-banderole__row + .sss-banderole__row{
  margin-top: var(--sss-banderole-overlap);
}

.sss-banderole__track{
  display: flex;
  align-items: baseline;
  width: max-content;
  white-space: nowrap;
  will-change: transform;
  animation: sss-banderole-move var(--sss-banderole-speed) linear infinite;
}

.sss-banderole__row--rtl .sss-banderole__track{
  animation-direction: reverse;
}

.sss-banderole__word{
  flex: 0 0 auto;
  display: inline-block;
  padding-top: 0.06em;
  padding-right: var(--sss-banderole-gap);
  transform: translateY(0.03em);

  font-family: "BBH Sans Hegarty","Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-weight: 400;
  font-size: clamp(14rem, 36vw + 1rem, 52rem);
  line-height: 0.72;
  letter-spacing: -0.045em;
  text-transform: uppercase;

  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2.2px var(--sss-banderole-stroke);
  text-stroke: 2.2px var(--sss-banderole-stroke);
  paint-order: stroke fill;
}

@keyframes sss-banderole-move{
  0%{ transform: translate3d(0,0,0); }
  100%{ transform: translate3d(-50%,0,0); }
}

@media (max-width: 768px){
  .sss-banderole{
    --sss-banderole-speed: 124s;
    --sss-banderole-overlap: -0.08em;
    --sss-banderole-gap: 0.1em;
  }

  .sss-banderole__word{
    padding-top: 0.05em;
    transform: translateY(0.025em);
    font-size: clamp(7rem, 22vw + 0.5rem, 18rem);
    line-height: 0.73;
    -webkit-text-stroke: 1.5px var(--sss-banderole-stroke);
    text-stroke: 1.5px var(--sss-banderole-stroke);
  }
}

@media (prefers-reduced-motion: reduce){
  .sss-banderole__track{
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
  }
}

/* =========================================================
   EDITORIAL TILE CAPTION – isolierte Alternative
   ========================================================= */
.ss-db-caption--editorial{
  position:relative;
  inset:auto;

  display:block;
  text-align:left;

  padding-top:0;
  margin-top:-18px;
  padding-bottom:0;
  padding-left:clamp(18px, 2.4vw, 40px);
  padding-right:clamp(18px, 2.4vw, 40px);
}
}

.ss-db-editorial{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:clamp(6px, .8vw, 12px);
  max-width:min(92%, 26ch);
}

.ss-db-editorial__headline{
  font-family:"BBH Sans Hegarty","Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-weight:400;
  font-size: clamp(1.445rem, 2.168vw + 0.434rem, 3.035rem);
  line-height:.95;
  letter-spacing:.01em;
  margin:0;
  color:transparent;
  -webkit-text-stroke:0.8px #111;
  text-transform:uppercase;
}

.ss-db-editorial__subline{
  font-family:"BBH Sans Hegarty","Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-weight:400;
  font-size:clamp(1rem, 1.15vw + .55rem, 1.7rem);
  line-height:1.05;
  letter-spacing:-.01em;
  margin:0;
  color:#1B1B1B;
  text-transform:uppercase;
}

@media (max-width:768px){
  .ss-db-caption--editorial{
    padding-top:-20px;
    padding-right:18px;
    padding-bottom:30px;
    padding-left:42px;
  }

  .ss-db-editorial{
    max-width:92%;
    gap:2px;
  }

  .ss-db-editorial__headline{
	font-size:clamp(1.785rem, 7.14vw, 2.805rem);
    -webkit-text-stroke:0.9px #111;
  }

  .ss-db-editorial__subline{
   font-size:clamp(1.32rem, 5.1vw, 1.78rem);
  }
}

/* =========================================================
   FRESSNAPF – Duo Image Fix (L’Oréal Look)
   ========================================================= */

.ss-double-bleed__grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:clamp(12px, 2vw, 28px);
  max-width:1400px;
  margin:0 auto;
}

.ss-double-bleed__grid img{
  width:100%;
  height:auto;
  display:block;

  /* gleiche Bildwirkung wie L’Oréal */
  border-radius:32px;
  overflow:hidden;
}

/* Mobile: untereinander */
@media (max-width:768px){
  .ss-double-bleed__grid{
    grid-template-columns:1fr;
    gap:16px;
  }
}

/* =========================================================
   FRESSNAPF – Duo Grid im L’Oréal-Bildsystem
   ========================================================= */
/* =========================================================
   FRESSNAPF – FINAL FIX (einheitliche Bildbreite)
   ========================================================= */

.ss-motion-media-wrap{
  width:min(1400px, calc(100vw - 192px));
  margin:0 auto;
  box-sizing:border-box;
}

/* Desktop: Duo-Reihe etwas schmaler als die Einzelbilder */
.ss-motion-media-wrap--duo{
  width:min(1336px, calc(100vw - 192px));
  margin:0 auto;
  box-sizing:border-box;
}

.ss-motion-duo-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:28px;
  width:100%;
  align-items:start;
}

.ss-motion-duo-grid .ss-frame{
  display:block;
  width:100%;
  margin:0;
}

/* Tablet */
@media (max-width:1024px){
  .ss-motion-media-wrap{
    width:min(1400px, calc(100vw - 96px));
  }

  .ss-motion-media-wrap--duo{
    width:min(1280px, calc(100vw - 96px));
  }

  .ss-motion-duo-grid{
    gap:20px;
  }
}

/* Mobile */
@media (max-width:768px){
  .ss-motion-media-wrap{
    width:calc(100vw - 64px);
  }

  .ss-motion-media-wrap--duo{
    width:calc(100vw - 64px);
  }

  .ss-motion-duo-grid{
    grid-template-columns:1fr;
    gap:0;
  }
}




/* =========================================================
   SSS MOTION WORK GRID – sss-mdwork-grid System
   Einsetzbar auf motiondesign.html und allen Projektseiten.
   
   HTML-Struktur:
   div.container > div.row > div.container > div.row > div.col-xs-12
     div.sss-mdwork-grid
       div.sss-mdwork-section  +  --solo / --duo / --trio / --reverse
         a.ss-db-tile > span.ss-frame > video/img.ss-db-media
         div.ss-db-caption--editorial > div.ss-db-editorial
   
   Gap-Werte anpassen:
     --motion-grid-col-gap   Abstand zwischen Spalten
     --motion-grid-row-gap   Abstand zwischen Zeilen
   ========================================================= */

/* =========================================================
   MOTION DESIGN – page-specific grid reset
   gleiche Außenkanten wie About / Contact
   ========================================================= */
:root{
  --motion-grid-col-gap: clamp(22px, 2.1vw, 34px);
  --motion-grid-row-gap: clamp(34px, 4vw, 56px);
  --motion-caption-gap: 12px;
  --motion-card-radius: 12px;
}

.sss-mdwork-grid{
  display:grid !important;
  grid-template-columns:repeat(12, minmax(0, 1fr)) !important;
  column-gap:var(--motion-grid-col-gap) !important;
  row-gap:var(--motion-grid-row-gap) !important;
  width:100% !important;
  padding-top:clamp(16px, 3vw, 32px) !important;
  padding-bottom:clamp(48px, 8vw, 100px) !important;
}

.sss-mdwork-section{
  display:contents !important;
}

.sss-mdwork-section--solo > *{ grid-column:1 / -1; }
.sss-mdwork-section--duo > *{ grid-column:span 6; }
.sss-mdwork-section--trio > *{ grid-column:span 4; }

.sss-mdwork-section--reverse.sss-mdwork-section--duo > :first-child{
  grid-column:7 / span 6;
}
.sss-mdwork-section--reverse.sss-mdwork-section--duo > :last-child{
  grid-column:1 / span 6;
}

.sss-mdwork-grid .ss-db-tile{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  overflow:visible !important;
  color:inherit;
  text-decoration:none;
}

.sss-mdwork-grid .ss-frame{
  display:block !important;
  width:100% !important;
  padding:0 !important;
  margin:0 !important;
  background:transparent !important;
  border-radius:var(--motion-card-radius) !important;
  overflow:hidden !important;
}

.sss-mdwork-grid .ss-frame > img,
.sss-mdwork-grid .ss-frame > video,
.sss-mdwork-grid .ss-frame > .ss-db-media{
  display:block !important;
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  border-radius:0 !important;
  object-fit:cover !important;
}

.sss-mdwork-grid .ss-db-media{
  transform:none !important;
  will-change:auto !important;
}

.sss-mdwork-grid .ss-db-caption--editorial{
  position:static !important;
  inset:auto !important;
  display:block !important;
  margin-top:var(--motion-caption-gap) !important;
  padding:0 !important;
  text-align:left !important;
  pointer-events:auto !important;
}

.sss-mdwork-grid .ss-db-editorial{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  gap:2px !important;
  width:100% !important;
  max-width:100% !important;
}

.sss-mdwork-grid .ss-db-editorial__headline{
  width:100%;
  margin:0 !important;
  font-family:"BBH Sans Hegarty","Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif !important;
  font-weight:400 !important;
  font-size:clamp(2.05rem, 2.15vw + .3rem, 3.2rem) !important;
  line-height:.92 !important;
  letter-spacing:0.03em !important;
  color:transparent !important;
  -webkit-text-stroke:0.7px #111 !important;
  text-transform:uppercase !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
  text-wrap:balance;
}

.sss-mdwork-grid .ss-db-editorial__subline{
  width:100%;
  margin:0 !important;
  font-family:"BBH Sans Hegarty","Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif !important;
  font-weight:700 !important;
  font-size:clamp(1.05rem, .75vw + .55rem, 1.55rem) !important;
  line-height:1 !important;
  letter-spacing:-.02em !important;
  color:#111 !important;
  text-transform:uppercase !important;
  white-space:normal !important;
  overflow-wrap:anywhere !important;
  text-wrap:balance;
}

.sss-mdwork-section--solo .ss-db-editorial__headline{
  font-size:clamp(2.35rem, 2.6vw + .5rem, 4.6rem) !important;
}

.sss-mdwork-section--trio .ss-db-editorial__headline{
  font-size:clamp(1.45rem, 1.15vw + .75rem, 2.55rem) !important;
  -webkit-text-stroke:.95px #111 !important;
}

.sss-mdwork-section--trio .ss-db-editorial__subline{
  font-size:clamp(.88rem, .45vw + .62rem, 1.1rem) !important;
}

@media (max-width: 768px){
  .sss-mdwork-grid{
    grid-template-columns:1fr !important;
    row-gap:28px !important;
  }

  .sss-mdwork-section--solo > *,
  .sss-mdwork-section--duo > *,
  .sss-mdwork-section--trio > *,
  .sss-mdwork-section--reverse.sss-mdwork-section--duo > :first-child,
  .sss-mdwork-section--reverse.sss-mdwork-section--duo > :last-child{
    grid-column:1 / -1 !important;
  }

  .sss-mdwork-grid .ss-db-caption--editorial{
    margin-top:8px !important;
  }

  .sss-mdwork-grid .ss-db-editorial__headline{
    font-size:clamp(2rem, 7vw, 3.2rem) !important;
    -webkit-text-stroke:.95px #111 !important;
  }

  .sss-mdwork-grid .ss-db-editorial__subline{
    font-size:clamp(1rem, 3.6vw, 1.35rem) !important;
  }
}

/* =========================================================
   VIMEO VIDEO WRAP 
   ========================================================= */
.sss-vimeo-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  border-radius: inherit;
  overflow: hidden;
}

.sss-vimeo-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: inherit;
}

/* =========================================================
   SSS MENU LABELS – vertikale Typo auf der Menü-Fläche
   Sitzen innerhalb .fs-primary-nav → fliegen mit dem Menü rein.
   Neue Klassen, kein Overwrite der bestehenden .vertical-label.
   ========================================================= */
.sss-menu-label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: "Poppins", system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: rgba(255,255,255,.35);
  pointer-events: none;
  z-index: 2;
  white-space: nowrap;
}

.sss-menu-label--left {
  left: 50px;
}

.sss-menu-label--right {
  right: 50px;
  transform: translateY(-50%) rotate(180deg);
}

@media (max-width: 768px) {
  .sss-menu-label {
    font-size: 11px;
    letter-spacing: .37em;
  }
  .sss-menu-label--left  { left: 10px; }
  .sss-menu-label--right { right: 10px; }
  /* Labels im Vimeo-Overlay auf Mobile ausblenden */
  .sss-showreel-overlay .sss-menu-label { display: none; }
}
/* =========================================================
   HIGHLIGHT STILL – nur Animation deaktiviert.
   Kein Overwrite von Padding, Transform-Origin oder Größe.
   Typo und Box bleiben 100% identisch mit highlight-reveal.
   ========================================================= */
.ss-highlight-link.highlight-still:hover::before,
.ss-highlight-link.highlight-still:focus-visible::before,
.ss-highlight-link.highlight-still:hover::after,
.ss-highlight-link.highlight-still:focus-visible::after {
  animation: none;
}

@media (hover: hover) and (pointer: fine) {
  .ss-highlight-link.highlight-still:hover::before,
  .ss-highlight-link.highlight-still:focus-visible::before,
  .ss-highlight-link.highlight-still:hover::after,
  .ss-highlight-link.highlight-still:focus-visible::after {
    animation: none;
  }
}
/* =========================================================
   SSS LOADER – Logo Fill von unten nach oben
   #loader-overflow bleibt dem Template überlassen.
   Kein display-Override — jQuery fadeOut() funktioniert.
   ========================================================= */
.sss-loader__logo {
  width: clamp(80px, 14vw, 140px);
  height: clamp(80px, 14vw, 140px);
  position: relative;
}

.sss-loader__outline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.12;
}

.sss-loader__fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  clip-path: inset(100% 0% 0% 0%);
  animation: sssLoaderFill 1.1s cubic-bezier(.4,0,.2,1) 0.2s both;
}

@keyframes sssLoaderFill {
  0%   { clip-path: inset(100% 0% 0% 0%); }
  100% { clip-path: inset(0%   0% 0% 0%); }
}
/* =========================================================
   SSS MORE WORK – horizontaler Scroll-Slider
   Selektoren matchen exakt die HTML-Klassen in index.html.
   ========================================================= */

.sss-morework {
  background: #f7f7f7;
  padding: clamp(40px, 6vw, 80px) 0 0;
  /* CSS-Variablen überschreiben damit ss-frame kein Padding/BG bekommt */
  --ss-frame-padding: 0px;
  --ss-frame-bg: transparent;
  --ss-frame-radius: 12px;
  --motion-card-radius: 12px;
}

/* Frame: weissen Rand + Padding entfernen */
.sss-morework .ss-frame {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border-radius: var(--motion-card-radius) !important;
  overflow: hidden !important;
}

/* Media: volle Größe, quadratisch durch Frame-Ratio */
.sss-morework .ss-frame > img,
.sss-morework .ss-frame > video,
.sss-morework .ss-frame > .ss-db-media {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
  object-fit: cover !important;
  transform: none !important;
}

/* Kein hover-scale */
.sss-morework__card:hover .ss-frame > img,
.sss-morework__card:hover .ss-frame > video,
.sss-morework__card:hover .ss-frame > .ss-db-media {
  transform: none !important;
}

/* Caption — matcht sss-morework__caption */
.sss-morework__caption {
  margin-top: var(--motion-caption-gap) !important;
  padding: 0 !important;
}

/* ---- Titel ---- */
.sss-morework__header {
  margin-bottom: clamp(20px, 3vw, 32px);
}

.sss-morework__title-text {
  font-family: "BBH Sans Hegarty","Poppins",system-ui,sans-serif;
  font-size: clamp(3rem, 6vw, 8rem);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -.03em;
  text-transform: uppercase;
  color: #1B1B1B;
  margin: 0;
}

/* ---- Track ---- */
.sss-morework__track-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.sss-morework__track-wrap::-webkit-scrollbar { display: none; }

.sss-morework__track {
  display: flex;
  align-items: flex-start;
  width: max-content;
}

.sss-morework__card {
  flex-shrink: 0;
  scroll-snap-align: start;
  text-decoration: none;
  color: inherit;
  display: block;
}

/* Desktop */
@media (min-width: 769px) {
  .sss-morework__card {
    width: clamp(220px, 22vw, 320px);
  }
  .sss-morework__track {
    gap: clamp(12px, 1.8vw, 40px);
  }
}

/* Mobile: doppelte Verschachtelung ergibt Spalte = vw - 90px */
@media (max-width: 768px) {
  .sss-morework__card {
    width: calc(100vw - 90px);
    flex-shrink: 0;
  }
  .sss-morework__track {
    gap: 16px;
  }
}

/* ---- Nav-Bar ---- */
.sss-morework__nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(20px, 4vw, 36px) 0 clamp(28px, 5vw, 56px);
}

.sss-morework__arrow {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  transition: opacity .2s ease;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
}
.sss-morework__arrow svg { width: 48px; height: 48px; }
.sss-morework__arrow:hover { opacity: 0.4; }

.sss-morework__nav-dots {
  display: flex;
  gap: 12px;
  align-items: center;
  flex: 1;
  justify-content: center;
}

.sss-morework__nav-dot {
  display: block;
  width: 38px;
  height: 5px;
  background: rgba(1,1,1,.05);
  border-radius: 6px;
  transition: background .25s ease, width .25s ease;
  cursor: pointer;
}

.sss-morework__nav-dot--active {
  background: #1B1B1B;
  width: 36px;
}

/* Desktop: nur 3 Dots sichtbar (3 Scroll-Positionen reichen) */
@media (min-width: 769px) {
  .sss-morework__nav-dots .sss-morework__nav-dot:nth-child(n+4) {
    display: none;
  }
}
/* Wenn echte .sss-bar Spans vorhanden: Pseudo-Elemente ausblenden */
.fs-menu-icon:has(.sss-bar)::before,
.fs-menu-icon:has(.sss-bar)::after {
  display: none !important;
}
.fs-menu-icon:has(.sss-bar) {
  background: transparent !important;
}

/* =========================================================
   OVERLAY ACTIVE STATE (sss-overlay-open)
   ========================================================= */

/* Nav über dem Overlay */
#nav.sss-overlay-open {
  z-index: 10001 !important;
}

/* Weißes Logo */
#nav.sss-overlay-open .ss-site-logo--black { opacity: 0 !important; visibility: hidden !important; }
#nav.sss-overlay-open .ss-site-logo--white { opacity: 1 !important; visibility: visible !important; }

/* Wenn menu-open AUCH da ist (via Menü-Flow):
   nur Farbe sicherstellen – menu-open aus style.css liefert das X */
#nav.sss-overlay-open.menu-open .fs-primary-nav-trigger .fs-menu-icon,
#nav.sss-overlay-open.menu-open .fs-primary-nav-trigger .fs-menu-icon::before,
#nav.sss-overlay-open.menu-open .fs-primary-nav-trigger .fs-menu-icon::after {
  background-color: #fff !important;
}

/* Wenn KEIN menu-open da ist (direkter Klick z.B. "Get in Touch"):
   X-Form selbst bauen + weiß einfärben */
#nav.sss-overlay-open:not(.menu-open) .fs-primary-nav-trigger .fs-menu-icon {
  background: transparent !important;
}
#nav.sss-overlay-open:not(.menu-open) .fs-primary-nav-trigger .fs-menu-icon::before {
  transform: translateY(7px) rotate(45deg) !important;
  background: #fff !important;
}
#nav.sss-overlay-open:not(.menu-open) .fs-primary-nav-trigger .fs-menu-icon::after {
  transform: translateY(-7px) rotate(-45deg) !important;
  background: #fff !important;
}

/* =========================================================
   CONTACT FORM OVERLAY
   ========================================================= */

/* ---- Email Icon im Menü ---- */
.sss-contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2.5rem 0;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity .25s ease;
}
.sss-contact-icon:hover { opacity: 1; }
.sss-contact-icon svg { width: 28px; height: 28px; }

/* ---- X-Button – gleiche Position wie Showreel-Close ---- */
.sss-contact-overlay__close {
  position: absolute;
  top: 28px;
  right: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease .5s;
}
.sss-contact-overlay.is-open .sss-contact-overlay__close {
  opacity: 1;
  pointer-events: all;
}
.sss-contact-overlay__close:hover { opacity: 1 !important; }
.sss-contact-overlay__close svg { width: 36px; height: 36px; }

/* ---- Overlay ---- */
.sss-contact-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  visibility: hidden;
}
.sss-contact-overlay__curtain {
  position: absolute;
  inset: 0;
  background: #1b1b1b;
  transform: translateX(-100%);
  transition: transform .65s cubic-bezier(.77,0,.18,1);
}
.sss-contact-overlay.is-open {
  pointer-events: all;
  visibility: visible;
}
.sss-contact-overlay.is-open .sss-contact-overlay__curtain {
  transform: translateX(0);
}

/* ---- Inner Content ---- */
.sss-contact-overlay__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(40px, 8vw, 120px);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .4s ease .45s, transform .4s ease .45s;
  overflow-y: auto;
}
.sss-contact-overlay.is-open .sss-contact-overlay__inner {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Heading ---- */
.sss-contact-overlay__headline {
  font-family: "BBH Sans Hegarty","Poppins",system-ui,sans-serif;
  font-weight: 400;
  font-size: clamp(2.5rem, 6vw, 7rem);
  line-height: .95;
  letter-spacing: -.03em;
  color: #fff;
  margin: 0 0 clamp(24px, 4vw, 56px) 0;
}
.sss-contact-overlay__headline em {
  font-style: normal;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.35);
}

/* ---- Form ---- */
.sss-contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 860px;
}
@media (max-width: 768px) {
  .sss-contact-form { grid-template-columns: 1fr; }
}
.sss-contact-form__field--full { grid-column: 1 / -1; }

.sss-contact-form input,
.sss-contact-form select,
.sss-contact-form textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(255,255,255,.25);
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  letter-spacing: .05em;
  padding: 12px 0;
  outline: none;
  transition: border-color .2s ease;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}
.sss-contact-form select {
  cursor: pointer;
  background-color: #1b1b1b;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='rgba(255,255,255,.5)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 4px center;
  padding-right: 24px;
}
.sss-contact-form select option {
  background: #1b1b1b;
  color: #fff;
}
.sss-contact-form textarea { resize: none; height: 100px; }
.sss-contact-form input:focus,
.sss-contact-form select:focus,
.sss-contact-form textarea:focus { border-bottom-color: #fff; }
.sss-contact-form input::placeholder,
.sss-contact-form textarea::placeholder {
  color: rgba(255,255,255,.3);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.sss-contact-form select.sss-placeholder {
  color: rgba(255,255,255,.3);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.sss-contact-form select:not(.sss-placeholder) {
  color: #fff;
  font-size: 14px;
}

/* ---- Submit ---- */
.sss-contact-form__submit {
  grid-column: 1 / -1;
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.sss-contact-form__btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: "BBH Sans Hegarty","Poppins",sans-serif;
  font-size: clamp(1.6rem, 3vw, 3rem);
  color: #fff;
  letter-spacing: -.02em;
  text-transform: uppercase;
  position: relative;
}
.sss-contact-form__btn::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1px;
  background: #fff;
  transition: width .3s ease;
}
.sss-contact-form__btn:hover::after { width: 100%; }

/* ---- Status ---- */
.sss-contact-form__status {
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  min-height: 20px;
}
.sss-contact-form__status.is-success { color: rgba(255,255,255,.8); }
.sss-contact-form__status.is-error   { color: #e05; }


/* ---- Unsichtbares Aria-Label ---- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
}

/* =============================================
   LEGAL FOOTER LINKS – Weiß → Hellgrau on Hover
   ============================================= */
.footer2-text-cont nav {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 28px;
}

/* Normalzustand */
.sss-legal-link {
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 100;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #C7C7C7;
    text-decoration: none;
    padding: 10px 22px;
    white-space: nowrap;
    transition: color 0.28s ease;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Hover */
.sss-legal-link:hover,
.sss-legal-link:focus-visible {
    color: #696969;
}

/* Trenner */
.footer2-text-cont nav span {
    color: #aaaaaa;
    padding: 0 8px;
    user-select: none;
    pointer-events: none;
}

/* Responsive */
@media (max-width: 480px) {
    .sss-legal-link {
        font-size: 0.93rem;
        padding: 9px 18px;
        letter-spacing: 0.10em;
    }
    .footer2-text-cont nav {
        gap: 24px;
    }
}


/* =============================================
   LEGAL FOOTER WEISS
   ============================================= */
.footer2-white-text-cont nav {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 28px;
}

/* Normalzustand */
.sss-legal-link-white {
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 100;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #303030;
    text-decoration: none;
    padding: 10px 22px;
    white-space: nowrap;
    transition: color 0.28s ease;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Hover */
.sss-legal-link-white:hover,
.sss-legal-link-white:focus-visible {
    color: #696969;
}

/* Trenner */
.footer2-text-cont nav span {
    color: #111111;
    padding: 0 8px;
    user-select: none;
    pointer-events: none;
}

/* Responsive */
@media (max-width: 480px) {
    .sss-legal-link-white {
        font-size: 0.93rem;
        padding: 9px 18px;
        letter-spacing: 0.10em;
    }
    .footer2-white-text-cont nav {
        gap: 24px;
    }
}