/* =========================================================
   MAREN DESSEL – custom.css
   ========================================================= */

/* =========================================================
   1) TYPOGRAPHY – Quicksand Headline System
   ========================================================= */

/* Größte, heroartige Headline */
.h-MarenDessel-1{
  font-family:"Quicksand","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:-.02em;
  white-space:normal;
  hyphens:none;
}

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

/* Große Headline (z. B. Module/Cards) */
.h-MarenDessel-3{
  font-family:"Quicksand","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-MarenDessel-3.5 (Motiondesign) */
.h-MarenDessel-3-5{
  font-family:"Quicksand","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-MarenDessel-4{
  font-family:"Quicksand","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-MarenDessel-sub{
  font-family:"Quicksand","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-MarenDessel-bold{ font-weight:700; }

/* Reset: keine Template-Margins */
.h-MarenDessel-1,
.h-MarenDessel-2,
.h-MarenDessel-3,
.h-MarenDessel-3-5,
.h-MarenDessel-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;
  }
}

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

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

.project-info-right h4{
  line-height:1.55;
  max-width:52ch;
}

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

/* =========================================================
   3) HIGHLIGHT LINKS (bunte Balken + diagonaler Shift)
   ========================================================= */
.md-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;
}
.md-highlight-link::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--hl);
  z-index:0;
}
.md-text{
  position:relative;
  z-index:1;
  display:inline-block;
  transition:transform .25s ease;
}
.md-highlight-link:hover .md-text,
.md-highlight-link:focus-visible .md-text{
  transform:translate(.08em, -.08em);
}
@media (hover:none){
  .md-highlight-link:active .md-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; }

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

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

/* 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 wieder schwarz */
#nav.header--hamburger-white.scrolled .fs-primary-nav-trigger .fs-menu-icon,
#nav.header--hamburger-white.scrolled .fs-primary-nav-trigger .fs-menu-icon::before,
#nav.header--hamburger-white.scrolled .fs-primary-nav-trigger .fs-menu-icon::after,
#nav.header--hamburger-white.header-scroll .fs-primary-nav-trigger .fs-menu-icon,
#nav.header--hamburger-white.header-scroll .fs-primary-nav-trigger .fs-menu-icon::before,
#nav.header--hamburger-white.header-scroll .fs-primary-nav-trigger .fs-menu-icon::after{
  background-color:#000 !important;
}

/* 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:0; }
.fs-primary-nav-trigger{ margin-right:0; }


#nav .header-wrapper{
  position:relative;
  min-height:88px;
}

/* Hamburger immer sichtbar und sauber links verankert */
.menu-btn-respons-container2{
  position: absolute;
  top: 50%;
  left: 20px;
  right: auto;
  transform: translateY(-50%);
  margin: 0;
  padding: 0;
  float: none;
  width: auto;
  z-index: 1000;
}

/* Trigger selbst neutralisieren */
.menu-btn-respons-container2 .fs-primary-nav-trigger{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  left: 0;
  right: auto;
  margin: 0;
  transform: none;
  transition: none;
}

/* Nur falls der Header die linke Seite abschneidet */
#nav,
.header-wrapper{
  overflow: visible;
}

/* =========================================================
   6) FULLSCREEN MENU (Typo + Underline-Hover)
   ========================================================= */
:root{
  --menu-underline-blue:#5394ff;
  --menu-underline-pink:#FF7EE0;
  --menu-underline-lila:#B862EA;
  --menu-underline-flamingo:#F9A7B0;
  --menu-underline-cyan:#00E5FF;
}

.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, 5rem) !important;
  line-height:1.02 !important;
  letter-spacing:.06em !important;
  color:#000 !important;
  opacity:.82 !important;
  display:inline-block;
  position:relative;
  padding:.08em 0;
  transition:opacity 180ms ease;
}
.fs-primary-nav a::after,
.fs-primary-nav ul li a::after,
.fs-primary-nav.fs-sub-nav a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-.12em;
  height:6px;
  background:var(--menu-underline-blue);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 180ms ease;
}
.fs-primary-nav a:hover,
.fs-primary-nav ul li a:hover,
.fs-primary-nav.fs-sub-nav a:hover{ opacity:.92 !important; }
.fs-primary-nav a:hover::after,
.fs-primary-nav ul li a:hover::after,
.fs-primary-nav.fs-sub-nav a:hover::after{ transform:scaleX(1); }

.fs-primary-nav ul li:nth-child(4n+1) > a::after{ background:var(--menu-underline-blue); }
.fs-primary-nav ul li:nth-child(4n+2) > a::after{ background:var(--menu-underline-pink); }
.fs-primary-nav ul li:nth-child(4n+3) > a::after{ background:var(--menu-underline-lila); }
.fs-primary-nav ul li:nth-child(4n+2) > a::after{ background:var(--menu-underline-flamingo); }
.fs-primary-nav ul li:nth-child(4n+4) > a::after{ background:var(--menu-underline-cyan); }

.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; }
  .fs-primary-nav a::after,
  .fs-primary-nav ul li a::after,
  .fs-primary-nav.fs-sub-nav a::after{ height:5px; }
}

/* =========================================================
   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; }
  .vertical-label.left{ left:8px; }
  .vertical-label.right{ right:8px; }
}

/* =========================================================
   8) HERO 16:9 + OUTLINE + PARALLAX IMG (nur Hero)
   ========================================================= */
.hero-169{
  position:relative;
  width:100vw;
  height:100vh;
  overflow:hidden;
}
.hero-169-img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  aspect-ratio:16/9;
}

.hero-169-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.hero-169-overlay{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:6vw 4vw;
  text-align:center;
  z-index:2;
}
.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{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  text-align:left;
  padding:4vw 8vw;
  z-index:2;
}
.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;
}
@media (max-width:768px){
  .hero-169.hero-left .hero-169-overlay{ align-items:flex-start; padding-top:20vh; }
  .hero-169-title-left{ font-size:clamp(2rem, 8vw + .5rem, 5rem); }
}

/* 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; padding:10vh 8vw; z-index:2; }
.hero-169.hero-color .h-MarenDessel-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-MarenDessel-1,
.hero-169.hero-color .h-MarenDessel-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-MarenDessel-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); }

@media (max-width:768px){
  .hero-169.hero-outline .hero-169-overlay{ padding:12vw 10vw; }
  .outline-box{ border-width:2px; padding:1.1em 1.2em; }
}

/* Parallax-Bild (Hero): GPU freundlich */
.hero-parallax-img{
  will-change:transform;
  transform:translate3d(0,0,0);
}

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

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

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

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

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

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

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

.md-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;
}
.md-db-tile:hover .md-db-media{
  transform:translateZ(0) scale(1.20);
}

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

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

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

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

/* =========================================================
   12) FULL-BLEED Zweispalter Bilder
   ========================================================= */
.md-bleed{
  width:100vw;
  max-width:100vw;
  margin-left:calc(-50vw + 50%);
}
.md-grid-2{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
}
.md-grid-2 img{
  display:block;
  width:100%;
  height:auto;
}
@media (min-width:992px){
  .md-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:"Quicksand","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 #0ED5D7;
  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 3px rgba(14,213,215,.18);
}
@media (max-width:768px){
  .outline-cta{ border-width:2px; }
}

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

/* =========================================================
   video-grid Projektvorschau // webM mp4 Poster
   ========================================================= */
.md-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; }
}

/* hero-feature-video */
.hero-169-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.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 */
.md-highlight-link.highlight-reveal{
  position:relative;
  display:inline-block;
}

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

.md-highlight-link.highlight-reveal:hover::before,
.md-highlight-link.highlight-reveal:focus-visible::before,
.md-highlight-link.highlight-reveal:hover::after,
.md-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){
  .md-highlight-link.highlight-reveal:hover::before,
  .md-highlight-link.highlight-reveal:focus-visible::before,
  .md-highlight-link.highlight-reveal:hover::after,
  .md-highlight-link.highlight-reveal:focus-visible::after{
    animation:ssHighlightCollapseExpand 420ms cubic-bezier(.16,1,.3,1) 1 both;
  }
}

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

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

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

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

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

/* 3-column variation */
.md-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
   ========================================================= */
.md-about-2blocks{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:clamp(3rem, 7vw, 6rem);
  align-items:start;
}

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

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

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

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

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

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

  .md-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:#000 !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
   ========================================================= */
.md-marquee.md-marquee--logos{
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  overflow:hidden;
}

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

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

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

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

/* LOGO MARQUEE – LANGSAMER */
.md-marquee.md-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 */
.md-marquee--showreel {
  overflow:hidden;
}

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

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

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

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

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

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

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

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

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

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

.h-MarenDessel-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" ---------- */
.md-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;
}

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

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

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

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

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

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

.md-modal__panel{
  background:#ffffff;
}
.md-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 */
.md-modal-light{
  --popup-bg:#ffffff;
  --popup-fg:#111111;
}

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

/* Close Button */
.md-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;
}

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

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

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

.md-modal__title{
  margin:0;
}

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

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

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

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

/* Mobile Feintuning – modal */
@media (max-width: 640px){
  .md-modal__panel{
    width:calc(100vw - 28px);
    max-height:calc(100vh - 28px);
    border-radius:0;
  }
  .md-modal__header{ padding:58px 18px 14px 18px; }
  .md-modal__divider{ margin:14px 18px 18px 18px; }
  .md-modal__content{ padding:0 18px 44px 18px; }
  .md-modal__close{
    top:14px;
    left:18px;
  }
  .md-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); }
}

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

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

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

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

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

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

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

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

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

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

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

/* =========================================================
   23) MODAL EDGE LABEL
   ========================================================= */
.md-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 */
.md-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){
  .md-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 .md-modal--cinematic
   ========================================================= */
.md-modal--cinematic{
  overflow:hidden;
}

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

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

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

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

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

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

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

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

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

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

.md-modal--cinematic.is-closing .md-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){
  .md-modal--cinematic .md-modal__backdrop,
  .md-modal--cinematic .md-modal__panel{
    animation:none !important;
  }

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

  .md-modal--cinematic .md-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 – Logo Grid Reveal
   ========================================================= */
.md-clients{
  width:100%;
  margin-top:clamp(2rem, 6vw, 5rem);
  padding:clamp(1.6rem, 4vw, 3rem) 0 clamp(2.4rem, 6vw, 4rem);
}

.md-clients__inner{
  width:min(920px, calc(100% - 6vw));
  margin:0 auto;
  display:grid;
  gap:0.2rem;
}

.md-clients__row{
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  gap:0.3rem;
  align-items:center;
}

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

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

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

/* Staffelung links -> rechts */
.md-clients__row.is-in .md-clients__logo:nth-child(1){ transition-delay:0ms; }
.md-clients__row.is-in .md-clients__logo:nth-child(2){ transition-delay:120ms; }
.md-clients__row.is-in .md-clients__logo:nth-child(3){ transition-delay:240ms; }
.md-clients__row.is-in .md-clients__logo:nth-child(4){ transition-delay:360ms; }
.md-clients__row.is-in .md-clients__logo:nth-child(5){ transition-delay:480ms; }

@media (max-width: 991px){
  .md-clients__row{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  .md-clients__inner{
    width:min(700px, calc(100% - 2rem));
  }

  .md-clients__row{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:1rem;
  }

  .md-clients__logo{
    padding:0.7rem;
  }
}

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

/* FULLSCREEN HERO // img  mit Logo und Branding // zentriert */
.hero-darken-20{
  filter: brightness(0.8);
}

.fullscreen-hero-logo{
  max-width: 520px;
  width: 60%;
  height: auto;
  display: block;
}

.hero-169-overlay{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.hero-darken-10{ filter: brightness(0.9); }
.hero-darken-20{ filter: brightness(0.8); }
.hero-darken-30{ filter: brightness(0.7); }
.hero-darken-40{ filter: brightness(0.6); }

@media (max-width: 767px){
  .fullscreen-hero-logo{
    width: 78%;
  }
}

/* =========================================================
   MD MENU FLY-IN (isolated menu text only)
   ========================================================= */
:root{
  --md-menu-font-family: "Quicksand", sans-serif;
  --md-menu-text-color: #000;
  --md-menu-item-delay-step: 160ms;
  --md-menu-panel-pause: 450ms;
  --md-menu-fly-duration: 900ms;
  --md-menu-fly-distance: 22vh;
}

.fs-primary-nav .md-menu-link,
.fs-primary-nav ul li .md-menu-link,
.fs-primary-nav.fs-sub-nav .md-menu-link{
  font-family: var(--md-menu-font-family) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  letter-spacing: .01em !important;
  color: var(--md-menu-text-color) !important;
  opacity: 1 !important;
  text-decoration: none !important;
  display: inline-block !important;
  position: relative !important;
  padding: 0 !important;
}

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

.fs-primary-nav .md-menu-item,
.fs-primary-nav ul li.md-menu-item{
  margin: 0.8em 0 !important;
}

.md-menu-list{
  list-style:none;
  margin:0;
  padding:0;
}

.md-menu-flyin{
  display:inline-block;
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0);
  opacity: 1;
  font-family: var(--md-menu-font-family);
  font-weight: 400;
}

.md-menu-flyin .md-linkline::after{
  bottom:-0.12em;
  height:2px;
}

.md-menu-ready .md-menu-flyin{
  transform: translate3d(0, calc(-1 * var(--md-menu-fly-distance)), 0);
  opacity: 0;
}

.md-menu-animate .md-menu-item--4 .md-menu-flyin{
  animation: mdMenuFlyIn var(--md-menu-fly-duration) cubic-bezier(.18,.8,.22,1) calc(var(--md-menu-panel-pause) + 0 * var(--md-menu-item-delay-step)) both;
}
.md-menu-animate .md-menu-item--3 .md-menu-flyin{
  animation: mdMenuFlyIn var(--md-menu-fly-duration) cubic-bezier(.18,.8,.22,1) calc(var(--md-menu-panel-pause) + 1 * var(--md-menu-item-delay-step)) both;
}
.md-menu-animate .md-menu-item--2 .md-menu-flyin{
  animation: mdMenuFlyIn var(--md-menu-fly-duration) cubic-bezier(.18,.8,.22,1) calc(var(--md-menu-panel-pause) + 2 * var(--md-menu-item-delay-step)) both;
}
.md-menu-animate .md-menu-item--1 .md-menu-flyin{
  animation: mdMenuFlyIn var(--md-menu-fly-duration) cubic-bezier(.18,.8,.22,1) calc(var(--md-menu-panel-pause) + 3 * var(--md-menu-item-delay-step)) both;
}

@keyframes mdMenuFlyIn{
  0%{
    transform: translate3d(0, calc(-1 * var(--md-menu-fly-distance)), 0);
    opacity: 0;
  }
  55%{
    opacity: 1;
  }
  100%{
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce){
  .md-menu-ready .md-menu-flyin,
  .md-menu-animate .md-menu-flyin{
    animation:none !important;
    transform:none !important;
    opacity:1 !important;
  }
}

/* FULLBLEED TRANSPARENT // Zitat Transparent Animiert + Subline // zentriert */
.fullbleed-transparent{
  width:100vw;
  max-width:100vw;
  margin-left:calc(-50vw + 50%);
  position:relative;
  padding-top:var(--md-fullbleed-space-top,8vh);
  padding-bottom:var(--md-fullbleed-space-bottom,8vh);
}

.fullbleed-transparent-img{
  width:var(--md-fullbleed-img-size,50%);
  display:block;
  margin:0 auto;
}

.fullbleed-handwriting-svg{
  opacity:0;
  clip-path:inset(0 100% 0 0);
  animation: mdHandwritingReveal 2.4s ease-out 0.2s forwards;
}

.fullbleed-transparent-signature{
  margin-top:2.2rem;
  text-align:center;
  font-family:"Quicksand", sans-serif;
  font-size:clamp(1.17rem, 1.56vw, 1.43rem);
  letter-spacing:0.08em;
  color:#111;
  opacity:0;
  transform:translateY(10px);
  animation: mdSignatureFadeIn 0.8s ease-out 1.9s forwards;
}

@keyframes mdHandwritingReveal{
  0%{
    opacity:0;
    clip-path:inset(0 100% 0 0);
  }
  12%{
    opacity:1;
  }
  100%{
    opacity:1;
    clip-path:inset(0 0 0 0);
  }
}

@keyframes mdSignatureFadeIn{
  from{
    opacity:0;
    transform:translateY(10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* Handwriting // Zitat 2 Zeilen // Transparent Animiert + Subline // zentriert */
.handwriting-stage{
  width:var(--md-fullbleed-img-size,50%);
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(0.6rem, 1.4vw, 1.2rem);
}

.handwriting-line-svg{
  display:block;
  width:100%;
  height:auto;
  opacity:0;
}

.handwriting-line-1{
  clip-path:inset(0 100% 0 0);
  animation:mdHandLineReveal 2.34s ease-out 0.2s forwards;
}

.handwriting-line-2{
  clip-path:inset(0 100% 0 0);
  animation:mdHandLineReveal 2.34s ease-out 1.9s forwards;
}

.fullbleed-transparent-signature{
  margin-top:2.2rem;
  text-align:center;
  font-family:"Quicksand", sans-serif;
  font-size:clamp(1.17rem, 1.56vw, 1.43rem);
  letter-spacing:0.08em;
  color:#111;
  opacity:0;
  transform:translateY(10px);
  animation:mdSignatureFadeIn 0.8s ease-out 3.5s forwards;
}

@keyframes mdHandLineReveal{
  0%{
    opacity:1;
    clip-path:inset(0 100% 0 0);
  }
  100%{
    opacity:1;
    clip-path:inset(0 0 0 0);
  }
}

@keyframes mdSignatureFadeIn{
  from{
    opacity:0;
    transform:translateY(10px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* =========================================================
   MAREN DESSEL // FOOTER 
   ========================================================= */
.md-footer{
  background:#e7e1dd;
  width:100%;
  padding:clamp(3rem, 6vw, 5rem) 0;
}

.md-footer-inner{
  width:min(1400px, 92%);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:start;
  gap:clamp(2rem, 4vw, 4rem);
}

.md-footer-left{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  min-height:260px;
}

.md-footer-nav-group{
  display:flex;
  align-items:flex-start;
  gap:clamp(3rem, 4vw, 5rem);
}

.md-footer-nav{
  display:flex;
  flex-direction:column;
  gap:0.35rem;
  line-height:1.9;
}

.md-footer-nav a{
  font-family:"Quicksand", sans-serif;
  font-size:clamp(1.6rem, 1.76vw, 1.84rem);
  font-weight:400;
  color:#111;
  text-decoration:none;
  letter-spacing:0.04em;
}

.md-footer-copy{
  margin-top:2rem;
  font-family:"Quicksand", sans-serif;
  font-size:clamp(1.44rem, 1.6vw, 1.6rem);
  font-weight:400;
  color:#111;
  letter-spacing:0.04em;
}

.md-footer-center{
  display:flex;
  justify-content:center;
  align-items:flex-start;
}

.md-footer-logo{
  width:clamp(95px, 9vw, 150px);
  height:auto;
  display:block;
}

.md-footer-right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:1.5rem;
  min-height:260px;
}

.md-footer-address{
  text-align:right;
}

.md-footer-address,
.md-footer-address p{
  margin:0;
  font-family:"Quicksand", sans-serif;
  font-size:clamp(1.6rem, 1.76vw, 1.84rem);
  font-weight:400;
  color:#111;
  letter-spacing:0.04em;
}

@media (max-width: 900px){
  .md-footer-inner{
    grid-template-columns:1fr;
    text-align:center;
  }

  .md-footer-left,
  .md-footer-right{
    min-height:auto;
    align-items:center;
  }

  .md-footer-nav-group{
    flex-direction:column;
    align-items:center;
    gap:1.5rem;
  }

  .md-footer-right{
    align-items:center;
  }

  .md-footer-address{
    text-align:center;
  }
}

/* =========================================================
   MAREN DESSEL // GLOBAL LINK LINE
   ========================================================= */

.md-linkline{
  position:relative;
  display:inline-block;
  width:fit-content;
  max-width:max-content;
  text-decoration:none;
}

.md-linkline::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-0.03em;
  width:100%;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform 520ms cubic-bezier(.22,.75,.18,1);
  pointer-events:none;
}

a:hover .md-linkline::after,
a:focus-visible .md-linkline::after,
.md-linkline:hover::after,
.md-linkline:focus-visible::after{
  transform:scaleX(1);
}

/* =========================================================
   MAREN DESSEL // DUO PORTRAIT SECTION
   ========================================================= */
.md-duo-portrait-section{
  width:100%;
  padding:clamp(3rem, 6vw, 6rem) 0;
}

.md-duo-portrait-grid{
  width:min(1100px, 88%);
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:clamp(1.5rem, 3vw, 3rem);
  align-items:start;
}

.md-duo-portrait-card{
  margin:0;
  aspect-ratio:5 / 7;
  overflow:hidden;
  position:relative;
}

.md-duo-portrait-img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

/* Mobile */
@media (max-width: 767px){
  .md-duo-portrait-grid{
    grid-template-columns:1fr;
    width:min(700px, 88%);
  }
}

/* =========================================================
   MAREN DESSEL // HERO FLY WORDS
   ========================================================= */

.md-hero-fly-overlay{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  pointer-events:none;
}

.md-hero-fly-stack{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:clamp(4.8rem,9.6vw,8rem);
}

.md-hero-fly-word{
  width:clamp(240px,21vw,390px);
  height:auto;
  opacity:0;
  transform:translateY(-8vh);
  animation:mdHeroFlyWord 900ms cubic-bezier(.18,.8,.22,1) forwards;
}

/* Reihenfolge */

.md-hero-fly-word--4{ animation-delay:740ms; }
.md-hero-fly-word--3{ animation-delay:660ms; }
.md-hero-fly-word--2{ animation-delay:580ms; }
.md-hero-fly-word--1{ animation-delay:400ms; }

@keyframes mdHeroFlyWord{

  0%{
    opacity:0;
    transform:translateY(-8vh);
  }

  60%{
    opacity:1;
  }

  100%{
    opacity:1;
    transform:translateY(0);
  }
}

/* =========================================================
   MAREN DESSEL // REVEAL ZOOM OUT
   ========================================================= */
.md-reveal-zoomout{
  transform:scale(1.07);
  transition:transform 2400ms cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}

.md-reveal-zoomout.is-in{
  transform:scale(1);
}

@media (prefers-reduced-motion: reduce){
  .md-reveal-zoomout,
  .md-reveal-zoomout.is-in{
    transform:none;
    transition:none;
  }
}

/* =========================================================
   MAREN DESSEL // REVEAL ZOOM OUT IN FRAME
   ========================================================= */

.md-duo-portrait-card{
  margin:0;
  aspect-ratio:5 / 7;
  overflow:hidden;
  position:relative;
  background:#fff;
}

.md-duo-portrait-img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transform-origin:center center;
}

.md-reveal-zoomout-frame{
  transform:scale(1.07);
  transition:transform 2400ms cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}

.md-reveal-zoomout-frame.is-in{
  transform:scale(1);
}

@media (prefers-reduced-motion: reduce){
  .md-reveal-zoomout-frame,
  .md-reveal-zoomout-frame.is-in{
    transform:none;
    transition:none;
  }
}

/* =========================================================
   MAREN DESSEL // REVEAL ZOOM OUT IN FRAME
   ========================================================= */
.md-duo-portrait-card{
  margin:0;
  aspect-ratio:5 / 7;
  overflow:hidden;
  position:relative;
  background:#fff;
}

.md-duo-portrait-img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transform-origin:center center;
}

.md-reveal-zoomout-frame{
  transform:scale(1.07);
  transition:transform 3400ms cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}

.md-reveal-zoomout-frame.is-in{
  transform:scale(1);
}

@media (prefers-reduced-motion: reduce){
  .md-reveal-zoomout-frame,
  .md-reveal-zoomout-frame.is-in{
    transform:none;
    transition:none;
  }
}

/* =========================================================
   STORY STRIP – DER WEG ZUR TASCHE
   neue, isolierte Section
   ========================================================= */

.md-story-strip{
  position:relative;
  padding:clamp(4rem, 8vw, 8rem) 0 clamp(5rem, 8vw, 8rem);
  background:transparent;
}

/* Intro bewusst als eigener, zentrierter Textcontainer */
.md-story-strip__intro{
  width:min(900px, calc(100% - 2rem));
  max-width:900px;
  margin:0 auto clamp(2.25rem, 4vw, 3.75rem);
  text-align:center;
  box-sizing:border-box;
}

.md-story-strip__title{
  display:block;
  max-width:none;
  width:100%;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
  white-space:nowrap;
}

@media (max-width: 420px){
  .md-story-strip__title{
    white-space:normal;
  }
}

.md-story-strip__lead{
  display:block;
  width:min(52ch, 100%);
  margin-top:clamp(1rem, 1.8vw, 1.4rem) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center;
  line-height:1.45;
}

/* eigene Section-Feinjustierung statt globale Klasse zu verändern */
.md-story-strip__title.h-MarenDessel-2{
  font-size:clamp(2.6rem, 4.4vw + 0.6rem, 5.8rem);
  line-height:0.98;
}

.md-story-strip__lead.h-MarenDessel-4{
  font-size:clamp(1.1rem, 0.55vw + 0.95rem, 1.45rem);
  font-weight:400;
}

/* Fullbleed-Horizontalbereich */
.md-story-strip__scroller{
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  cursor:grab;
  box-sizing:border-box;
}

.md-story-strip__scroller::-webkit-scrollbar{
  display:none;
}

.md-story-strip__scroller:active{
  cursor:grabbing;
}

.md-story-strip__track{
  display:flex;
  gap:clamp(28px, 3vw, 54px);
  width:max-content;
  padding-top:80px;
  padding-bottom:20px;
  box-sizing:border-box;
}

/* Robuster linker/rechter Raum als echte Flex-Spacer */
.md-story-strip__track::before,
.md-story-strip__track::after{
  content:"";
  display:block;
  flex:0 0 auto;
}

.md-story-strip__track{
  --md-story-edge-left:96px;
  --md-story-edge-right:96px;
}

@media (min-width: 769px){
  .md-story-strip__track::before{
    width:var(--md-story-edge-left);
    flex-basis:var(--md-story-edge-left);
  }

  .md-story-strip__track::after{
    width:var(--md-story-edge-right);
    flex-basis:var(--md-story-edge-right);
  }
}

/* Desktop: ca. 3 Cards sichtbar */
.md-story-strip__card{
  flex:0 0 clamp(300px, 27vw, 390px);
  width:clamp(300px, 27vw, 390px);
}

.md-story-strip__media-wrap{
  display:block;
  text-decoration:none;
  overflow:hidden;
  background:#f3f1ee;
}

.md-story-strip__image{
  display:block;
  width:100%;
  aspect-ratio:5 / 7;
  object-fit:cover;
  object-position:center;
  transform:scale(1);
  transform-origin:center center;
  transition:transform 700ms cubic-bezier(.16,.8,.2,1);
  will-change:transform;
}

/* Desktop Hover: Zoom in, Passepartout bleibt erhalten */
@media (hover: hover) and (pointer: fine){
  .md-story-strip__media-wrap:hover .md-story-strip__image,
  .md-story-strip__media-wrap:focus-visible .md-story-strip__image{
    transform:scale(1.07);
  }
}

.md-story-strip__copy{
  padding-top:clamp(1rem, 1.4vw, 1.4rem);
}

.md-story-strip__card-title{
  margin:0 0 .7rem 0 !important;
  line-height:1.08;
}

/* +20% größer */
.md-story-strip__card-title.h-MarenDessel-3{
  font-size:clamp(1.68rem, 1.2vw + 1.2rem, 2.4rem);
}

.md-story-strip__text{
  margin:0;
  max-width:28ch;
  font-family:"Quicksand","Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:clamp(1.2rem, 0.26vw + 1.14rem, 1.296rem);
  line-height:1.55;
  color:#000;
}

.md-story-strip__link{
  display:inline-block;
  margin-top:clamp(1rem, 1.8vw, 1.4rem);
  text-decoration:none;
  color:inherit;
  font-family:"Quicksand","Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:clamp(1rem, 0.2vw + 0.95rem, 1.08rem);
  line-height:1.2;
}

/* Desktop: kein Scroll-Snap, da die JS-Zielpositionen exakt gesteuert werden */
@media (min-width: 769px){
  .md-story-strip__scroller{
    scroll-snap-type:none;
    scroll-padding-left:0;
    scroll-padding-right:0;
  }

  .md-story-strip__card{
    scroll-snap-align:none;
  }
}

@media (max-width: 768px){
  .md-story-strip{
    padding:clamp(3rem, 10vw, 4.5rem) 0 clamp(4rem, 10vw, 5rem);
  }

  .md-story-strip__intro{
    width:min(100%, calc(100% - 2rem));
  }

  .md-story-strip__title.h-MarenDessel-2{
    font-size:clamp(2.1rem, 8vw, 3.4rem);
  }

  .md-story-strip__lead{
    width:min(100%, 34ch);
  }

.md-story-strip__track{
    gap:18px;
    --md-story-edge-left:16px;
    --md-story-edge-right:16px;
  }

  .md-story-strip__track::before{
    width:16px;
  }

  .md-story-strip__track::after{
    width:16px;
  }

  .md-story-strip__scroller{
    scroll-padding-left:16px;
    scroll-padding-right:16px;
  }

  /* Mobile: eine Card sichtbar */
  .md-story-strip__card{
    flex:0 0 calc(100vw - 32px);
    width:calc(100vw - 32px);
  }

  .md-story-strip__text{
    max-width:32ch;
  }
}

/* =========================================================
   STORY STRIP – STEP NAVIGATION
   additiv, ohne bestehende Klassen zu verändern
   ========================================================= */

.md-story-strip__steps{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:clamp(1rem, 2vw, 2rem);
  width:min(1400px, calc(100% - 2rem));
  margin:clamp(1.6rem, 3vw, 2.6rem) auto 0;
  padding:0;
}

.md-story-step{
  appearance:none;
  background:transparent;
  border:0;
  padding:0;
  margin:0;
  cursor:pointer;
  color:#111;
  font-family:"Quicksand","Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:clamp(1.45rem, 1.2vw + 1rem, 2.1rem);
  line-height:1.08;
  letter-spacing:-0.02em;
  font-weight:500;
  opacity:.5;
  transition:opacity .22s ease, transform .22s ease;
}

.md-story-step:hover,
.md-story-step:focus-visible{
  opacity:.9;
  transform:translateY(-1px);
  outline:none;
}

.md-story-step .md-linkline{
  display:inline-block;
}

.md-story-step .md-linkline::after{
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform 260ms cubic-bezier(.16,.8,.2,1);
}

.md-story-step.is-active{
  opacity:1;
}

.md-story-step.is-active .md-linkline::after{
  transform:scaleX(1);
}


/* =========================================================
   STORY STRIP – SLIDING INK LINE
   additiv, unter Step-Navigation
   ========================================================= */

.md-story-strip__steps{
  position:relative;
}

.md-story-strip__inkline{
  position:absolute;
  left:0;
  bottom:-.08em;
  height:4px;
  border-radius:999px;
  background:#111;
  width:0;
  transform:translateX(0);
  transition:
    transform 320ms cubic-bezier(.16,.8,.2,1),
    width 320ms cubic-bezier(.16,.8,.2,1);
  pointer-events:none;
}

.md-story-strip__inkline.is-no-anim{
  transition:none;
}

/* alte einzelne Unterstreichung im Step-Menü ausblenden */
.md-story-step .md-linkline::after{
  display:none !important;
}

@media (max-width: 991px){
  .md-story-strip__steps{
    gap:.85rem 1.2rem;
    width:min(100%, calc(100% - 2rem));
    margin:1.4rem auto 0;
  }

  .md-story-step{
    font-size:clamp(1.15rem, 2.4vw, 1.5rem);
  }
}

@media (max-width: 768px){
  .md-story-strip__steps{
    justify-content:flex-start;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    flex-wrap:nowrap;
    width:100vw;
    max-width:100vw;
    margin-left:calc(50% - 50vw);
    padding-left:16px;
    padding-right:16px;
  }

  .md-story-strip__steps::-webkit-scrollbar{
    display:none;
  }

  .md-story-step{
    flex:0 0 auto;
    white-space:nowrap;
    font-size:1.15rem;
    opacity:.78;
  }

  .md-story-step.is-active{
    opacity:1;
  }
}

/* =========================================================
   STORY STRIP – SLIDING INK LINE REFINEMENT
   thinner and slightly lower, additive override
   ========================================================= */

.md-story-strip__steps{
  position:relative;
}

.md-story-strip__inkline{
  position:absolute;
  left:0;
  bottom:-0.03em;
  height:1px;
  border-radius:999px;
  background:currentColor;
  width:0;
  transform:translateX(0);
  transition:
    transform 320ms cubic-bezier(.16,.8,.2,1),
    width 320ms cubic-bezier(.16,.8,.2,1);
  pointer-events:none;
}

.md-story-strip__inkline.is-no-anim{
  transition:none;
}

/* hide the per-step underline inside the step menu only */
.md-story-step .md-linkline::after{
  display:none !important;
}

/* =========================================================
   FLYDOWN REVEAL – autonome Einblendung ohne .is-in-Abhängigkeit
   Typografie bleibt vollständig unberührt
   ========================================================= */
.md-flydown{
  animation:mdFlydown 900ms cubic-bezier(.22,.61,.36,1) both;
  will-change:transform, opacity;
}

@keyframes mdFlydown{
  0%{
    opacity:0;
    transform:translate3d(0, -32px, 0);
  }
  100%{
    opacity:1;
    transform:translate3d(0, 0, 0);
  }
}

@media (prefers-reduced-motion: reduce){
  .md-flydown{
    animation:none;
    opacity:1;
    transform:none;
  }
}

.md-flydown-delay{
  animation-delay:220ms;
}

/* =========================================================
   STORY STRIP – EDITORIAL VARIANT
   additiv / scoped / reversibel
   nur aktiv auf .md-story-strip--editorial
   ========================================================= */

.md-story-strip--editorial .md-story-strip__track{
  gap:26px;
}

.md-story-strip--editorial .md-story-strip__card{
  flex:0 0 auto;
  width:auto;
}

.md-story-strip--editorial .md-story-editorial-card{
  box-sizing:border-box;
}

.md-story-strip--editorial .md-story-editorial-card__grid{
  display:grid;
  grid-template-columns:400px 600px;
  column-gap:80px;
  width:max-content;
  align-items:start;
}

.md-story-strip--editorial .md-story-editorial-card__media-wrap{
  display:block;
  text-decoration:none;
  overflow:hidden;
  background:#f3f1ee;
}

.md-story-strip--editorial .md-story-editorial-card__image{
  display:block;
  width:100%;
  aspect-ratio:5 / 7;
  object-fit:cover;
  object-position:center;
}

.md-story-strip--editorial .md-story-editorial-card__content{
  padding-top:clamp(2rem, 5vw, 4rem);
  min-width:0;
}

.md-story-strip--editorial .md-story-editorial-card__title{
  margin:0;
  max-width:16ch;
  min-width:0;
  font-family:"Quicksand","Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-weight:400;
  font-size:clamp(3rem, 3.1vw + 1rem, 5.3rem);
  line-height:.94;
  letter-spacing:-.02em;
  color:#b86a00;
}

.md-story-strip--editorial .md-story-editorial-card__kicker{
  margin:clamp(1.6rem, 2.2vw, 2.2rem) 0 0 40px;
  max-width:20ch;
  font-family:"Quicksand","Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-weight:800;
  font-size: clamp(1.43rem, 0.715vw + 1.235rem, 1.885rem);
  line-height:1.22;
  color:#111;
}

.md-story-strip--editorial .md-story-editorial-card__body{
  margin:clamp(1.4rem, 2vw, 2rem) 0 0 40px;
  max-width:56ch;
}

.md-story-strip--editorial .md-story-editorial-card__body p{
  margin:0;
  font-family:"Quicksand","Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-weight:400;
  font-size: clamp(1.43rem, 0.715vw + 1.235rem, 1.885rem);
  line-height:1.22;
  color:#111;
}

@media (max-width: 1100px){
  .md-story-strip--editorial .md-story-strip__track{
    gap:56px;
  }

  .md-story-strip--editorial .md-story-strip__card{
    flex:0 0 auto;
    width:auto;
  }

  .md-story-strip--editorial .md-story-editorial-card__grid{
    grid-template-columns:380px 250px;
    column-gap:32px;
    width:max-content;
  }
}

@media (max-width: 768px){
  .md-story-strip--editorial .md-story-strip__track{
    gap:18px;
  }

  .md-story-strip--editorial .md-story-strip__card{
    flex:0 0 calc(100vw - 32px);
    width:calc(100vw - 32px);
  }

  .md-story-strip--editorial .md-story-editorial-card__grid{
    grid-template-columns:1fr;
    row-gap:clamp(1.2rem, 4vw, 1.8rem);
    width:100%;
  }

  .md-story-strip--editorial .md-story-editorial-card__content{
    padding-top:0;
  }

  .md-story-strip--editorial .md-story-editorial-card__title,
  .md-story-strip--editorial .md-story-editorial-card__kicker,
  .md-story-strip--editorial .md-story-editorial-card__body{
    max-width:none;
  }

  .md-story-strip--editorial .md-story-editorial-card__kicker,
  .md-story-strip--editorial .md-story-editorial-card__body{
    margin-left:0;
  }
}

/* =========================================================
   ORANIENBAUM – isolierte Font-Klassen
   additiv / scoped / reversibel
   ========================================================= */

.md-font-oranienbaum-display{
  font-family:"Oranienbaum", Georgia, "Times New Roman", serif !important;
  font-weight:400;
  letter-spacing:0;
  line-height:.96;
}

.md-font-oranienbaum-card{
  font-family:"Oranienbaum", Georgia, "Times New Roman", serif !important;
  font-weight:400;
  letter-spacing:0;
  line-height:1.02;
}

/* =========================================================
   MAREN DESSEL // STORY STRIP 3D PARALLAX PATCH
   additiv / scoped / reversibel / non-destructive
   nur für .md-story-strip--editorial
   ========================================================= */

.md-story-strip--editorial.md-story-strip--parallax-3d{
  --md-story-3d-perspective: 1400px;
  --md-story-3d-title-z: 120px;
  --md-story-3d-copy-z: 64px;
  --md-story-3d-media-z: 18px;
}

.md-story-strip--editorial.md-story-strip--parallax-3d .md-story-strip__scroller{
  perspective: var(--md-story-3d-perspective);
  transform-style: preserve-3d;
}

.md-story-strip--editorial.md-story-strip--parallax-3d .md-story-strip__card{
  transform-style: preserve-3d;
}

.md-story-strip--editorial.md-story-strip--parallax-3d .md-story-editorial-card__grid{
  transform-style: preserve-3d;
}

.md-story-strip--editorial.md-story-strip--parallax-3d .md-story-editorial-card__media-wrap,
.md-story-strip--editorial.md-story-strip--parallax-3d .md-story-editorial-card__content,
.md-story-strip--editorial.md-story-strip--parallax-3d .md-story-editorial-card__title,
.md-story-strip--editorial.md-story-strip--parallax-3d .md-story-editorial-card__kicker,
.md-story-strip--editorial.md-story-strip--parallax-3d .md-story-editorial-card__body{
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform;
}

/* Grundstaffelung im Raum */
.md-story-strip--editorial.md-story-strip--parallax-3d .md-story-editorial-card__title{
  transform: translate3d(0,0,var(--md-story-3d-title-z));
}

.md-story-strip--editorial.md-story-strip--parallax-3d .md-story-editorial-card__kicker,
.md-story-strip--editorial.md-story-strip--parallax-3d .md-story-editorial-card__body{
  transform: translate3d(0,0,var(--md-story-3d-copy-z));
}

.md-story-strip--editorial.md-story-strip--parallax-3d .md-story-editorial-card__media-wrap{
  transform: translate3d(0,0,var(--md-story-3d-media-z));
}

/* sanfte Übergänge nur auf Desktop */
@media (min-width: 992px){
  .md-story-strip--editorial.md-story-strip--parallax-3d .md-story-editorial-card__media-wrap,
  .md-story-strip--editorial.md-story-strip--parallax-3d .md-story-editorial-card__content,
  .md-story-strip--editorial.md-story-strip--parallax-3d .md-story-editorial-card__title,
  .md-story-strip--editorial.md-story-strip--parallax-3d .md-story-editorial-card__kicker,
  .md-story-strip--editorial.md-story-strip--parallax-3d .md-story-editorial-card__body{
    transition: none;
  }
}

/* Mobile / Reduced Motion: Effekt deaktivieren */
@media (max-width: 991px), (prefers-reduced-motion: reduce){
  .md-story-strip--editorial.md-story-strip--parallax-3d .md-story-editorial-card__media-wrap,
  .md-story-strip--editorial.md-story-strip--parallax-3d .md-story-editorial-card__content,
  .md-story-strip--editorial.md-story-strip--parallax-3d .md-story-editorial-card__title,
  .md-story-strip--editorial.md-story-strip--parallax-3d .md-story-editorial-card__kicker,
  .md-story-strip--editorial.md-story-strip--parallax-3d .md-story-editorial-card__body{
    transform: none !important;
    transition: none !important;
    will-change: auto;
  }
}

/* =========================================================
   MAREN DESSEL // STORY STRIP NAV SAFETY PATCH
   additiv / scoped / reversibel / non-destructive
   ========================================================= */

.md-story-strip--editorial .md-story-strip__intro{
  position: relative;
  z-index: 30;
}

.md-story-strip--editorial .md-story-strip__steps{
  position: relative;
  z-index: 40;
  pointer-events: auto;
}

.md-story-strip--editorial.md-story-strip--parallax-3d .md-story-strip__scroller{
  position: relative;
  z-index: 1;
}

/* =========================================================
   MAREN DESSEL // QUOTE PANEL
   an Portrait-Duo ausgerichtet
   ========================================================= */

.md-quote-panel{
  background: transparent;
  margin: 0;
  padding: clamp(48px, 7vw, 84px) 0 clamp(28px, 4vw, 48px);
}

.md-quote-panel__inner{
  width: min(1100px, 88%);
  margin: 0 auto;
}

.md-quote-panel__quote{
  margin: 0;
  border-left: none;
  padding-left: 0;
}

.md-quote-panel__quote p{
  margin: 0;
  font-family: "Quicksand","Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-weight: 200;
  /*font-size: clamp(1.61rem, 2.87vw + 0.7rem, 4.06rem);*/

  font-size: clamp(2.3rem, 4.1vw + 1rem, 5.8rem);
	
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-wrap: none;
}

.md-quote-panel__meta{
  margin: clamp(24px, 3vw, 38px) 0 0;
  font-family: "Quicksand","Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-weight: 400;
  font-size: clamp(1.37rem, 0.50vw + 1.30rem, 1.75rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  opacity: 0.95;
}

@media (max-width: 768px){
  .md-quote-panel{
    padding: 40px 0 24px;
  }

  .md-quote-panel__inner{
    width: min(700px, 88%);
    margin: 0 auto;
  }

  .md-quote-panel__quote p{
    font-size: clamp(2rem, 8vw, 3.2rem);
    line-height: 1.08;
    text-wrap: pretty;
  }

  .md-quote-panel__meta{
    margin-top: 18px;
    font-size: clamp(1.08rem, 0.4vw + 1rem, 1.32rem);
  }
}

/* Quote-Panel Write-in: Meta 20% größer */
.md-quote-panel--meta-lg .md-quote-panel__meta{
  font-size: clamp(1.37rem, 0.50vw + 1.30rem, 1.75rem);
}

/* =========================================================
   MAREN DESSEL // QUOTE PANEL WRITE-IN
   horizontal / scoped / reversibel
   ========================================================= */

.md-quote-panel--writein .md-quote-panel__quote,
.md-quote-panel--writein .md-quote-panel__meta{
  opacity: 0;
  will-change: opacity, clip-path, filter;
}

.md-quote-panel--writein .md-quote-panel__quote{
  clip-path: inset(0 100% 0 0);
  filter: blur(0.4px);
}

.md-quote-panel--writein .md-quote-panel__meta{
  clip-path: inset(0 100% 0 0);
}

.md-quote-panel--writein.is-in .md-quote-panel__quote{
  opacity: 1;
  clip-path: inset(0 0 0 0);
  filter: blur(0);
  transition:
    clip-path 2400ms cubic-bezier(.22,.61,.36,1),
    opacity 820ms ease-out,
    filter 1900ms ease-out;
}

.md-quote-panel--writein.is-in .md-quote-panel__meta{
  opacity: 1;
  clip-path: inset(0 0 0 0);
  transition:
    clip-path 900ms cubic-bezier(.22,.61,.36,1) 260ms,
    opacity 420ms ease-out 260ms;
}

@media (prefers-reduced-motion: reduce){
  .md-quote-panel--writein .md-quote-panel__quote,
  .md-quote-panel--writein .md-quote-panel__meta,
  .md-quote-panel--writein.is-in .md-quote-panel__quote,
  .md-quote-panel--writein.is-in .md-quote-panel__meta{
    opacity: 1;
    clip-path: none;
    filter: none;
    transition: none;
  }
}

.md-quote-panel--signature-right .md-quote-panel__meta{
  display: block;
  width: 100%;
  text-align: right;
}

/* Quote Panel Reveal */
.md-quote-panel--reveal{
  opacity: 0;
  transform: translateY(40px);
  transition:
    transform 900ms cubic-bezier(.22,.61,.36,1),
    opacity 600ms ease-out;
}

.md-quote-panel--reveal.is-in{
  opacity: 1;
  transform: translateY(0);
}

/* =========================================================
   MAREN DESSEL // PORTRAIT TRIO
   additiv / scoped / reversibel / copy-pastefähig
   ========================================================= */
.md-trio-portrait-section{
  margin: 0;
  padding: 0;
}

.md-trio-portrait-grid{
  width: min(1100px, 88%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.6vw, 22px);
  align-items: start;
}

.md-trio-portrait-card{
  margin: 0;
  aspect-ratio: 5 / 7;
  overflow: hidden;
  position: relative;
  background: #fff;
}

.md-trio-portrait-img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transform-origin: center center;
}

@media (max-width: 991px){
  .md-trio-portrait-grid{
    grid-template-columns: 1fr;
    gap: 14px;
    width: min(700px, 88%);
  }
}

/* =========================================================
   MENUE FARBE // OVERWRITE
   additiv / reversibel / Farbe original in style.css
   ========================================================= */
.fs-primary-nav{
  background:#e8e8e8;
}

/* =========================================================
   MAREN DESSEL // STORY STRIP INTRO PANEL
   additiv / scoped / reversibel / non-destructive
   nur für die Intro-Zone "Der Weg zur Tasche"
   ========================================================= */
.md-story-strip-intro-panel{
  position: relative;
  z-index: 0;
  isolation: auto;
}

.md-story-strip-intro-panel .md-story-strip__title,
.md-story-strip-intro-panel .md-story-strip__steps,
.md-story-strip-intro-panel .md-story-step{
  position: relative;
  z-index: 0;
}

/* =========================================================
   STORY STRIP INTRO PANEL – STACK FIX
   additiv / lokal / reversibel
   ========================================================= */

.md-story-strip-intro-panel{
  position: relative;
  z-index: 1;
}

.md-story-strip{
  position: relative;
  z-index: 1;
}

/* =========================================================
   MD EDITORIAL TEXT SECTION
   Additiv / nicht-destruktiv / kopierbar
   ========================================================= */

.md-editorial-section{
  background:#f3f1ef;
  padding:clamp(72px, 10vw, 150px) 0;
}

.md-editorial-section__inner{
  width:min(100%, 1180px);
  margin:0 auto;
  padding:0 clamp(24px, 6vw, 64px);
}

.md-editorial-heading{
  font-family:"Quicksand","Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:clamp(2.05rem, 2.2vw, 2.6rem);
  font-weight:400;
  line-height:1.18;
  letter-spacing:-0.01em;
  margin:0 0 clamp(28px, 3vw, 40px) 0;
  color:#2d2926;
  max-width:24ch;
}

.md-editorial-fleecetext{
  font-family:"Quicksand","Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:clamp(1.22rem, 1.05vw + 0.95rem, 1.68rem);
  font-weight:200;
  line-height:1.9;
  letter-spacing:0.01em;
  color:#2f2b28;
  max-width:58ch;
}

.md-editorial-fleecetext p{
  margin:0 0 1.45em 0;
}

.md-editorial-fleecetext p:last-child{
  margin-bottom:0;
}

@media (max-width:768px){
  .md-editorial-section{
    padding:clamp(52px, 12vw, 84px) 0;
  }

  .md-editorial-heading{
    max-width:none;
    margin-bottom:24px;
  }

  .md-editorial-fleecetext{
    max-width:none;
    line-height:1.75;
  }
}

/* =========================================================
   MD EDITORIAL TEXT SECTION – DUO
   Erweiterung der bestehenden Editorial Section
   ========================================================= */

.md-editorial-section-duo .md-editorial-section__inner{
  width:min(100%,1180px);
  margin:0 auto;
  padding:0 clamp(24px,6vw,64px);

  display:grid;
  grid-template-columns:minmax(220px,0.9fr) 1fr 1fr;
  column-gap:clamp(36px,5vw,64px);
  align-items:start;
}

.md-editorial-section-duo .md-editorial-heading{
  grid-column:1;
  margin-bottom:0;
}

.md-editorial-section-duo .md-editorial-fleecetext{
  grid-column:2 / span 2;
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:clamp(28px,4vw,48px);
}

/* einzelne Spalten */
.md-editorial-section-duo .md-editorial-col{
  max-width:36ch;
}

/* Mobile Layout */
@media (max-width:900px){

  .md-editorial-section-duo .md-editorial-section__inner{
    grid-template-columns:1fr;
    row-gap:28px;
  }

  .md-editorial-section-duo .md-editorial-fleecetext{
    grid-template-columns:1fr;
  }

  .md-editorial-section-duo .md-editorial-col{
    max-width:none;
  }

}

/* =========================================================
   MD STAGGER UP
   Isolierter Reveal von unten nach oben, weich und versetzt
   ========================================================= */

.md-stagger-up .md-stagger-up__item{
  opacity:0;
  transform:translate3d(0, 42px, 0);
  transition:
    opacity 1100ms ease,
    transform 1400ms cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}

.md-stagger-up.is-in .md-stagger-up__item{
  opacity:1;
  transform:translate3d(0, 0, 0);
}

/* gestaffelte Reihenfolge */
.md-stagger-up.is-in .md-stagger-up__item:nth-child(1){
  transition-delay:0ms;
}
.md-stagger-up.is-in .md-stagger-up__item:nth-child(2){
  transition-delay:180ms;
}
.md-stagger-up.is-in .md-stagger-up__item:nth-child(3){
  transition-delay:360ms;
}

/* optional: sanftere Startdistanz auf Mobile */
@media (max-width:768px){
  .md-stagger-up .md-stagger-up__item{
    transform:translate3d(0, 28px, 0);
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce){
  .md-stagger-up .md-stagger-up__item{
    opacity:1;
    transform:none;
    transition:none;
  }
}

/* =========================================================
   MD CTA PILL
   Outline Button – editorial style
   ========================================================= */

.md-cta-pill-wrap{
  text-align:center;
  padding-top:clamp(22px,3vw,40px);
}

.md-cta-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  font-family:"Quicksand","Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-weight:400;
  font-size:clamp(1.05rem,1vw + .6rem,1.4rem);
  letter-spacing:0.02em;

  padding:clamp(8px,1vw,13px) clamp(22px,2.8vw,39px);

  border:1.1px solid #2c2c2c;
  border-radius:999px;

  text-decoration:none;
  color:#2c2c2c;
  background:transparent;

  transition:
    transform 220ms ease,
    background-color 220ms ease,
    color 220ms ease;
}

/* =========================================================
   CTA // PILLE // BUTTON
   ========================================================= */

.md-cta-pill:hover{
  transform:translateY(-2px);
  background:#2c2c2c;
  color:#ffffff;
}

/* Variante: CTA linksbündig */
.md-cta-pill-wrap--left{
  text-align:left;
}

/* =========================================================
   MD EDITORIAL CENTERED
   Einzelspalte mit Heading links, Text rechts – exakt auf
   der Mittelachse der Seite (wie Portrait-Duo)
   ========================================================= */

.md-editorial-centered{
  padding:clamp(80px,10vw,10px) 0;
}

.md-editorial-centered__inner{
  width:min(100%,1180px);
  margin:0 auto;
  padding:0 clamp(24px,6vw,64px);

  display:grid;

  /* Mittelachse exakt in der Mitte */
  grid-template-columns:1fr 1fr;

  column-gap:clamp(32px,4vw,60px);
  align-items:start;
}

.md-editorial-centered-heading{
  font-family:"Quicksand","Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:clamp(2.1rem,2.4vw,2.7rem);
  font-weight:400;
  line-height:1.15;
  letter-spacing:-0.01em;
  margin:0;

  justify-self:end;      /* endet genau an der Mittelachse */
  text-align:right;
  max-width:18ch;
}

.md-editorial-centered-text{
  font-family:"Quicksand","Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:clamp(1.2rem,1.1vw + .8rem,1.65rem);
  font-weight:200;
  line-height:1.85;

  justify-self:start;
  max-width:38ch;
}

.md-editorial-centered-text p{
  margin:0 0 1.45em 0;
}

.md-editorial-centered-text p:last-child{
  margin-bottom:0;
}

.md-editorial-centered-heading{
  transform:translateX(-6px);
}

/* Mobile */

@media (max-width:900px){

  .md-editorial-centered__inner{
    grid-template-columns:1fr;
    row-gap:28px;
  }

  .md-editorial-centered-heading{
    justify-self:start;
    text-align:left;
    max-width:none;
  }

  .md-editorial-centered-text{
    max-width:60ch;
  }

}

/* =========================================================
   MD FEATURE FRAME
   Isolierte Passepartout-Bildsection mit Text + CTA
   ========================================================= */

.md-feature-frame{
  padding:clamp(34px, 6vw, 72px) 0;
}

.md-feature-frame__inner{
  width:min(100%, 1180px);
  margin:0 auto;
  padding:0 clamp(24px, 6vw, 64px);
}

/* Passepartout / sichtbarer Rahmen */
.md-feature-frame__mat{
  position:relative;
  overflow:hidden;
  background:#f3f1ed;
  min-height:clamp(420px, 48vw, 680px);
  isolation:isolate;
}

/* Hintergrundbild darf größer sein als der sichtbare Ausschnitt */
.md-feature-frame__media{
  position:absolute;
  inset:-1%;
  width:112%;
  height:112%;
  object-fit:cover;
  object-position:center center;
  transform:translate3d(0,0,0) scale(1);
  will-change:transform;
}

/* optional etwas dunkler für Lesbarkeit */
.md-feature-frame__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(0,0,0,.26) 0%,
    rgba(0,0,0,.16) 24%,
    rgba(0,0,0,.04) 48%,
    rgba(0,0,0,0) 70%
  );
  pointer-events:none;
  z-index:1;
}

.md-feature-frame__content{
  position:relative;
  z-index:2;
  min-height:clamp(420px, 48vw, 680px);
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  padding:
    clamp(34px, 4.8vw, 68px)
    clamp(36px, 4.6vw, 72px)
    clamp(34px, 4.8vw, 68px)
    clamp(42px, 5vw, 82px);
  padding-left:110px;
}

.md-feature-frame__copy{
  max-width:min(560px, 52vw);
}

.md-feature-frame__eyebrow{
  margin:0 0 clamp(10px, 1.2vw, 16px) 0;
  font-family:"Quicksand","Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:clamp(1.06rem, 0.46vw + 0.94rem, 1.30rem);
  font-weight:800;
  line-height:1.2;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:#00000;
  opacity:.92;
}

.md-feature-frame__title{
  margin:0;
  font-family:"Quicksand","Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:clamp(2.2rem, 3.8vw, 4.3rem);
  font-weight:300;
  line-height:.98;
  letter-spacing:-.0em;
  color:#000000;
  max-width:12ch;
}

/* CTA-Einbindung nur innerhalb dieser Section */
.md-feature-frame__cta{
  margin-top:clamp(18px, 2vw, 28px);
  text-align:left;
}

/* CTA leicht auf dunklem Bild optimiert */
.md-feature-frame .md-cta-pill{
  color:#00000;
  border-color:#00000;
  background-color:transparent;
}

.md-feature-frame .md-cta-pill:hover,
.md-feature-frame .md-cta-pill:focus-visible{
  background-color:#111111;
  color:#00000;
  border-color:#ffffff;
}

/* Motion: sanftes Reveal */
.md-feature-frame[data-md-reveal="up"] .md-feature-frame__copy{
  opacity:0;
  transform:translate3d(0, 34px, 0);
  transition:
    opacity 1000ms ease,
    transform 1200ms cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}

.md-feature-frame.is-in[data-md-reveal="up"] .md-feature-frame__copy{
  opacity:1;
  transform:translate3d(0, 0, 0);
}

/* Mobile */
@media (max-width:900px){
  .md-feature-frame__mat,
  .md-feature-frame__content{
    min-height:clamp(360px, 72vw, 560px);
  }

  .md-feature-frame__content{
    align-items:flex-end;
    padding:
      28px
      24px
      28px
      28px;
  }

  .md-feature-frame__copy{
    max-width:none;
  }

  .md-feature-frame__title{
    max-width:11ch;
  }
}

@media (prefers-reduced-motion: reduce){
  .md-feature-frame__media{
    transform:none !important;
  }

  .md-feature-frame[data-md-reveal="up"] .md-feature-frame__copy{
    opacity:1;
    transform:none;
    transition:none;
  }
}

/* =========================================================
   MD FEATURE FRAME – WAY
   (Clone von md-feature-frame)
   CTA Frame für "Der Weg zur Tasche"
   ========================================================= */

.md-feature-frame-way{
  padding:clamp(34px, 6vw, 72px) 0;
}

.md-feature-frame-way__inner{
  width:min(100%,1180px);
  margin:0 auto;
  padding:0 clamp(24px,6vw,64px);
}

.md-feature-frame-way__mat{
  position:relative;
  overflow:hidden;
  background:#f3f1ed;
  min-height:clamp(420px,48vw,680px);
  isolation:isolate;
}

.md-feature-frame-way__media{
  position:absolute;
  inset:-1%;
  width:112%;
  height:112%;
  object-fit:cover;
  object-position:center center;
  transform:translate3d(0,0,0) scale(1);
  will-change:transform;
}

.md-feature-frame-way__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(0,0,0,.26) 0%,
    rgba(0,0,0,.16) 24%,
    rgba(0,0,0,.04) 48%,
    rgba(0,0,0,0) 70%
  );
  pointer-events:none;
  z-index:1;
}

.md-feature-frame-way__content{
  position:relative;
  z-index:2;
  min-height:clamp(420px,48vw,680px);
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  padding:
    clamp(34px,4.8vw,68px)
    clamp(36px,4.6vw,72px)
    clamp(34px,4.8vw,68px)
    clamp(42px,5vw,82px);
  padding-left:110px;	
}

.md-feature-frame-way__copy{
  max-width:min(560px,52vw);
}

.md-feature-frame-way__eyebrow{
  margin:0 0 clamp(10px, 1.2vw, 16px) 0;
  font-family:"Quicksand","Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:clamp(1.06rem, 0.46vw + 0.94rem, 1.30rem);
  font-weight:800;
  line-height:.2;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:#000;
  opacity:.92;
}

.md-feature-frame-way__title{
  margin:0;
  font-family:"Quicksand","Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:clamp(2.2rem,3.8vw,4.3rem);
  font-weight:400;
  line-height:.98;
  letter-spacing:-.02em;
  color:#11111;
  max-width:18ch;
}

.md-feature-frame-way__cta{
  margin-top:clamp(18px,2vw,28px);
  text-align:left;
}

/* CTA Styling nur innerhalb dieser Section */

.md-feature-frame-way .md-cta-pill{
  color:#11111;
  border-color:#11111;
  background-color:#11111;
}

.md-feature-frame-way .md-cta-pill:hover,
.md-feature-frame-way .md-cta-pill:focus-visible{
  background-color:#11111;
  color:#fffff;
  border-color:#11111;
}


/* MOBILE */

@media (max-width:900px){

  .md-feature-frame-way__mat,
  .md-feature-frame-way__content{
    min-height:clamp(360px,72vw,560px);
  }

  .md-feature-frame-way__content{
    align-items:flex-end;
    padding:
      28px
      24px
      28px
      28px;
  }

  .md-feature-frame-way__copy{
    max-width:none;
  }

  .md-feature-frame-way__title{
    max-width:11ch;
  }

}


/* =========================================================
   MD LEGAL PAGE
   Wiederverwendbare Section für Impressum / Datenschutz
   ========================================================= */

.md-legal-page{
  background:#f8f7f5;
  min-height:100vh;
}

.md-legal-section{
  padding:clamp(80px, 10vw, 150px) 0 clamp(70px, 8vw, 120px);
}

.md-legal-section__inner{
  width:min(100%, 1180px);
  margin:0 auto;
  padding:0 clamp(24px, 6vw, 64px);
}

.md-legal-header{
  margin:0 0 clamp(34px, 4vw, 54px) 0;
  max-width:18ch;
}

.md-legal-title{
  margin:0;
  font-family:"Quicksand","Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:clamp(2.4rem, 4vw, 4.8rem);
  font-weight:300;
  line-height:.98;
  letter-spacing:-0.02em;
  color:#222;
}

.md-legal-content{
  max-width:72ch;
  font-family:"Quicksand","Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:clamp(1.02rem, 0.35vw + 0.95rem, 1.22rem);
  font-weight:300;
  line-height:1.8;
  color:#2d2a27;
}

.md-legal-content h2,
.md-legal-content h3,
.md-legal-content h4{
  font-family:"Quicksand","Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-weight:400;
  line-height:1.2;
  letter-spacing:-0.01em;
  color:#222;
  margin:2.2em 0 .7em 0;
}

.md-legal-content h2{
  font-size:clamp(1.5rem, 1.2vw + 1.1rem, 2.1rem);
}

.md-legal-content h3{
  font-size:clamp(1.2rem, 0.8vw + 1rem, 1.55rem);
}

.md-legal-content p{
  margin:0 0 1.15em 0;
}

.md-legal-content ul,
.md-legal-content ol{
  margin:0 0 1.3em 1.2em;
  padding:0;
}

.md-legal-content li{
  margin:0 0 .45em 0;
}

.md-legal-content a{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:.14em;
  text-decoration-thickness:.08em;
}

.md-legal-content strong{
  font-weight:500;
}

.md-legal-content hr{
  border:0;
  border-top:1px solid rgba(0,0,0,.12);
  margin:2.2em 0;
}

@media (max-width:768px){
  .md-legal-section{
    padding:clamp(60px, 12vw, 90px) 0 clamp(54px, 10vw, 80px);
  }

  .md-legal-header{
    max-width:none;
  }

  .md-legal-content{
    max-width:none;
    line-height:1.72;
  }
}

/* =========================================================
   MD SIGNATURE - ONLY MOBILE // GRÖSSE ANPASSUNG 
   reversibel 
   ========================================================= */
@media (max-width:768px){

  .fullbleed-transparent.fullbleed-quote-signature{
    --md-fullbleed-img-size:75%;
  }

  .fullbleed-transparent.fullbleed-quote-signature .handwriting-stage{
    transform:scale(1.08);
    transform-origin:center center;
  }

}

/* =========================================================
   STRIP - ONLY MOBILE // GRÖSSE ANPASSUNG 
   reversibel 
   ========================================================= */

@media (max-width:768px){

  /* STORY STRIP editorial – mobil ca. 30% kleiner */
  .md-story-strip--editorial .md-story-editorial-card__grid{
    grid-template-columns:280px;
    row-gap:36px;
    width:280px;
  }

  .md-story-strip--editorial .md-story-strip__card{
    flex:0 0 300px;
    width:300px;
  }

  .md-story-strip--editorial .md-story-editorial-card__content{
    padding-top:0;
  }

  /* Abstand Bilder ↔ Menü kleiner */
  .md-story-strip__steps{
    margin:0.6rem auto 0;
  }

  /* optional etwas kompakter zwischen den Cards */
  .md-story-strip--editorial .md-story-strip__track{
    gap:26px;
  }

}

/* =========================================================
   STRIP - ONLY MOBILE // ABSTAND MINI MENUE -> CARDS 
   reversibel 
   ========================================================= */
@media (max-width:768px){

  /* Abstand Cards → Step-Menü reduzieren */
  .md-story-strip__steps{
    margin:0.4rem auto 0;
  }

  /* optional: etwas weniger Luft im Strip selbst */
  .md-story-strip__track{
    padding-top:2px;
  }

}

/* =========================================================
   STRIP - ONLY MOBILE // GRÖSSE FLIESSTEXT COLUMEN -> CARDS 
   reversibel 
   ========================================================= */
@media (max-width:768px){

  .md-story-strip--editorial .md-story-editorial-card__body p{
    font-size:0.85em;
    line-height:1.55;
  }

}