/*!
Theme Name: Terza Natura
Theme URI: https://www.terza-natura.ch/
Author: wald.pixel.werk
Author URI: https://waldpixelwerk.de/
Description: Theme für TN
Version: 1.0.0
Tested up to: 8.4
Requires PHP: 7.2
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: tn
Tags: custom-menu, translation-ready
*/

@charset "UTF-8";


  @font-face {
  font-family: 'Eiko';
  src: url('./fonts/PPEiko-Light.woff2') format('ttf'),
       url('./fonts/PPEiko-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
}
  @font-face {
  font-family: 'Eiko';
  src: url('./fonts/PPEiko-Regular.woff2') format('ttf'),
       url('./fonts/PPEiko-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

  @font-face {
  font-family: 'Mori';
  src: url('./fonts/PPMori-Book.woff2') format('woff2'),
       url('./fonts/PPMori-Book.woff') format('woff');
  font-weight: 400;
  font-style: normal;
}

  @font-face {
  font-family: 'Mori';
  src: url('./fonts/PPMori-ExtraBold.woff2') format('woff2'),
       url('./fonts/PPMori-ExtraBold.woff') format('woff');
  font-weight: 800;
  font-style: normal;
}



body{
--black:#000;
--white:#ffffff;
--gold:#B48739;
--dblue:#213349;
--heather:#F2F2F2;
--red:#C64C28;
--dgreen:#495942;
--lineheight:1.5em;
--font:1.3888vw;
--fontsmall:0.8em;
--h1:3em;
--h3:1.7rem;
--container:80vw;
}


@media (orientation: portrait){
	
body{
--font:4vw;
--container:90vw;
	--h1:2em;
--h3:1.5rem;
}
}

 :root{

  }


/* Global */

body, html{
font-family: "Mori", sans-serif;
font-weight: 400;
font-style: normal;
width:100vw;
text-rendering: geometricPrecision;

padding:0;margin:0;left:0;top:0;position:relative;font-size:var(--font);line-height:var(--lineheight);font-weight:400;background-color:var(--white);color: var(--dblue);white-space-collapsing:discard;min-height:100dvh;}

a, a:link, a:hover, a:active, a:visited{text-decoration:none;transition:color .2s ease-in-out;color:var(--dblue);}

h1, h2, h3, h4, h5, h6{
 line-height:1.15em;
margin-inline-start: 0px;
margin-block-end: 0em;
margin-block-start: 0rem;
font-weight:300;
	font-family:"Eiko";
}

p{
margin-inline-start: 0px;
margin-block-end: 0.5rem;
margin-block-start: 0.5rem;
}

h1{font-size:var(--h1);line-height:0.8em}
h2{font-size:var(--h1);line-height:1.15em}
h3{font-size:var(--h3);line-height:1.25em;font-weight: 400}
img{max-width:100%}


.small{font-size:var(--fontsmall);line-height:1.625em}

.animate{opacity:0;transition: opacity 1.5s ease, transform 1s ease;transition-delay:1s}
.animate-left{transform: translateX(-1.5em)}
.animate-done{opacity: 1;transform:translateX(0em)}
.headline h2{line-height:1.5em;}
.headline-block{padding-left:2.2rem;width:34em;box-sizing:border-box;position: relative;}
.headline-block:after{content:"";position:absolute;background-color:var(--gold);width:2px;height:100%;opacity:0;transition:opacity .7s ease;left:0;top:0}
.headline-block.active:after{opacity:1}
.headline-text{margin-top:3.4rem;padding-left:4em}

.button{background-color:var(--gold);padding:0.4em 1.3em 0.15em 1.3em;font-size:0.7rem;text-transform: uppercase;font-weight: 700;border-radius:2em;color:var(--white);display:inline-block;}
.button a{color:var(--white) !important;display:inline-block;line-height:1em}
.button:after {
    content: "";
    width: 1em;
    height: 1em;
    margin-left: 1.3em;
    margin-right: 0.5em;
    background-image: url(./img/button-arrow.svg);
    background-size: contain;
    background-repeat: no-repeat;
    transform: scale(2) translateY(0.05em);
    position: relative;
    display: inline-block;
}
.button:hover{font-weight:400;}

.container{width:100vw;display: block;text-align: center;position: relative}
.container-inner{width:var(--container);text-align:left;display: inline-block;position:relative;}



/* Elements */


header{position:fixed;width:100vw;z-index:9;height:100dvh;pointer-events:none;overflow-x:hidden;top:0}
.logo{position:absolute;left:1em;top:1em;pointer-events:auto}
.logo a{width:max-content;}
.logo img{position:absolute;opacity:0;transition:opacity .4s ease;width:6em;left:0;top:0}
.logo img:nth-child(1){position:relative}
.logo img:nth-child(2){width:100%;}
.logo img.visible{opacity:1}

.navigation{position:absolute;left:100%;width:50%;background-color:var(--dblue);transition:left 1s ease;z-index:2;pointer-events:auto;}
.header.active .navigation{left:50%}
.navigation-container{margin-left:6.4rem;width:calc(100% - 12.8rem);height:100vh;overflow:scroll}
.navigation-main{margin-top:5rem;margin-bottom:4rem;font-family:"Eiko"}
.navigation-main .link-wrapper{overflow:hidden;height:5em;width:100%;}
.navigation-main a{color:var(--gold) !important;transition:transform 1.4s cubic-bezier(.2,.75,.2,1), opacity .2s ease;font-size:3.75em;line-height:1.1em;font-weight:300;position: relative;opacity:0;transform:translateY(125%);display:inline-block;}
.navigation-main a.active{opacity:1;transform:translateY(0);}
.navigation-main a:after{position:absolute;content:"";bottom:0;height:2px;background-color: var(--gold);width:0;transition:width 2s ease;transition-delay: 0s;left:0}
.navigation-main a:hover:after{width:100%}
.navigation-main .link-wrapper:nth-child(4) a{transition-delay:0.8s}
.navigation-main .link-wrapper:nth-child(3) a{transition-delay:1s}
.navigation-main .link-wrapper:nth-child(2) a{transition-delay:1.2s}
.navigation-main .link-wrapper:nth-child(1) a{transition-delay:1.4s}
.navigation-sec{width:100%;display: inline-block;text-transform:uppercase}
.navigation-sec a{color:var(--white);transition:opacity 1.5s ease;opacity:0;font-weight:800;letter-spacing:0.1em}
.navigation-sec.active a{opacity:1}
.navigation-sec div:nth-child(1) a{transition-delay: 2s}
.navigation-sec div:nth-child(2) a{transition-delay: 2.6s}
.navigation-sec div:nth-child(3) a{transition-delay: 3.2s}
.navigation-sec div{display:inline-block;}
.navigation-sec div:nth-child(1){float:left;}
.navigation-sec div:nth-child(2){float:left;margin-left:6.5em}
.navigation-sec div:nth-child(3){float:right;}

.navigation-line{margin:2.5rem 0;width:100%;height:2px;position: relative;}
.navigation-line-after{content:"";height:2px;background-color: var(--gold);width:0;transition:width 2.5s ease;transition-delay:1.5s;position:absolute;left:0}
.navigation-line.active .navigation-line-after{width:100%}

.navigation-bottom{width:100%;position: relative;display:inline-block;margin-bottom:3em}
.navigation-kontakt{float:left;display: inline-block;width:50%;opacity:0;transition:opacity 1s ease;transition-delay:3.4s;}
.navigation-kontakt.active{opacity:1}
.navigation-kontakt-text{color:var(--white)}
.navigation-kontakt-text a{color:var(--white) !important}
.navigation-sm{float:right;display:inline-block;width:50%;text-align:right}
.navigation-sm img{opacity:0;transition:opacity .3s ease 3.2s, transform .2s ease}
.navigation-sm img.active{opacity:1}
.navigation-sm a:nth-child(2) img{transition:opacity 1s ease 3.8s, transform .2s ease}
.navigation-sm a:nth-child(3) img{transition:opacity 1s ease 4.3s, transform .2s ease}
.navigation-sm a:nth-child(4) img{transition:opacity 1s ease 4.8s, transform .2s ease}
.navigation-copy{font-size:0.5em;bottom:0;right:0;position:absolute;color:var(--white);text-transform: uppercase;opacity:0;transition:opacity 1s ease;transition-delay:5.4s;font-weight:800;letter-spacing:0.1em}
.navigation-copy.active{opacity:1}

.navigation-kontakt h3{margin-bottom:1.5rem;color:var(--white)}
.navigation-container.nav-no-delay ,.navigation-container.nav-no-delay *{
  transition-delay: 0s !important;
  transition-duration:0.1s !important;
}

.burger-menu{z-index:3;position:absolute;right:1em;top:1.5em;pointer-events:auto;cursor:pointer}
.burger-menu-text{font-size:var(--fontsmall);line-height:1.45em;color:var(--white);transition: opacity .5s ease, color .3s;margin-right:1em;}
.heather .burger-menu-text{color:var(--dblue)}
.burger-menu-icon{width:1em;height:1em;display:inline-block;position:relative;transform:translateY(0.48em)}
.burger-menu-icon-line{width:100%;height:1px;background-color:var(--white);position:absolute;top:0.3em;transition:transform .5s, background-color .3s}
.burger-menu-icon-line.line-1{transform:translateY(-0.3em)}
.burger-menu-icon-line.line-3{transform:translateY(0.3em)}

.heather .burger-menu-icon-line{background-color:var(--dblue)}
.header.active .burger-menu-icon-line{background-color:var(--white)}
.header.active .burger-menu-icon-line.line-1.step1{transform:translateY(0)}
.header.active .burger-menu-icon-line.line-2.step1{transform:translateY(0)}
.header.active .burger-menu-icon-line.line-3.step1{transform:translateY(0)}

.header.active .burger-menu-icon-line.line-1.step2{transform:translateY(0) rotate(45deg)}
.header.active .burger-menu-icon-line.line-2.step2{transform:translateY(0) rotate(45deg)}
.header.active .burger-menu-icon-line.line-3.step2{transform:translateY(0) rotate(-45deg)}

.header.active .burger-menu-text{opacity:0;pointer-events:none}

.main-content{height:max-content;padding-bottom:10vh;}
.content{background: #fff;position:relative;z-index:3}
footer{position:sticky;bottom:0;left:0;width:100vw;color:var(--white);background-color: var(--dblue);padding-top: 30vh;max-height:100vh;overflow:scroll;z-index:0}
footer .container-inner{padding-top:1em}




/* Pathline */

    #pathtext {
      height: 100vh;
      display: grid;
      align-items: center;
      padding: 0;
      overflow:hidden;width:100vw;
    }

    .pathtext-inner { width: 104vw; margin: 0 auto; transform:translateX(-2vw)}

    #pathtext svg { width: 100%; height: 18em; overflow: visible; display: block; }
    #pathtext #pathtextWaveVisible { display:none }
    #pathtext text { font-size: 3.2rem; font-weight: 300; fill: var(--dblue);font-family:"Eiko";}


    /*headline*/
.headline[data-split="true"] .char {
  opacity: 0;
  transform: translateY(1.1em);
}

.headline.is-animating .char {
 animation: riseIn 650ms cubic-bezier(.2,.75,.2,1) forwards;
  animation-delay: calc(var(--i) * var(--stagger, 2ms));
  will-change: transform, opacity;
}

.char-clip {
  display: inline-block;
  overflow: hidden;        /* unten "beschnitten" */
  vertical-align: bottom;
}

.char {
  display: inline-block;
}

@keyframes riseIn {
  to { opacity: 1; transform: translateY(0); }
}

/* text */

.textsmall{width:20em;}

.copytext{display: inline-block;}
.copytext[data-lines="true"] .line-inner {
  opacity: 0;
  transform: translateY(1.1em);
}

.copytext.is-animating .line-inner {
  animation: lineRiseIn 700ms cubic-bezier(.2,.75,.2,1) forwards;
  animation-delay: calc(var(--li) * var(--line-stagger, 90ms));
  will-change: transform, opacity;
}

/* Clip pro Zeile => “unten beschnitten” */
.line-clip {
  display: block;
  overflow: hidden;
}

/* Inhalt der Zeile */
.line-inner {
  display: block;
}

@keyframes lineRiseIn {
  to { opacity: 1; transform: translateY(0); }
}


/* Anfangszustand: solange noch NICHT gesplittet, nichts zeigen */
.headline:not([data-split="true"]) {
  visibility: hidden;
}

.copytext:not([data-lines="true"]) {
  visibility: hidden;
}
.word{white-space: nowrap;}

/* wave */


.section--wave{        /* gleiche Farbe wie Section */
  background: inherit;
  position: relative;
}

.section-wave{
  position: absolute;
  left: 0; top: -14em;
  width: 100%;
  height: 15em;                 /* Wellenhöhe */
  pointer-events: none;
  overflow: hidden;
}

.section-wave svg{
  width: 100%;
  height: 100%;
  display: block;
}

.wave-path{
  fill: #fff;      /* Welle hat Section-Farbe */
}

.section-content{
  position: relative;
  padding-top: 70px;            /* Platz unter der Welle */
}


.section-wave--bottom{
top: unset;
    bottom: -14em;
  transform: scaleY(-1) scaleX(-1);
  transform-origin: center;
}

/* Platz für die Welle am Section-Ende */
.section--wave .section-content{
padding-bottom:1em;
}

/* Scroll Image Text */


.scrollit-container{
  position: relative;
 height:300vh;
}

.scrollit-fixed-inner{
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 0;
 position:sticky;
}

.scrollit-frame{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.scrollit-frame-left,
.scrollit-frame-right{
  position: absolute;
  top: 0;
  width: 50vw;

}

.scrollit-frame-left{ left: 0; }
.scrollit-frame-right{ right: 0; }

 
.scrollit-frame-image,
.scrollit-frame-text{
  overflow: hidden;
}
 
.scrollit-frame-image{
  bottom: 0;
  top: auto;
  height: 0
}
.scrollit-frame-image img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

/* Text: Reveal von oben nach unten */
.scrollit-frame-text{
  top: 0;
  bottom: auto;
  height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.scrollit-frame-text-inner{
  width: 70%;
  margin: 0 auto;
}


.scrollit-frame-image,
.scrollit-frame-text{
  will-change: height;
  height:0;
  transition: height 2000ms cubic-bezier(.2,.75,.2,1);
}

.scrollit-frame.active .scrollit-frame-image,
.scrollit-frame.active .scrollit-frame-text{
height:100vh;
}

.sectionfade-container{
  position: relative;
  overflow: visible;           /* sticky braucht meist visible */
}

/* RELATIVER CONTENT */
.sectionfade-content-relative{
  position: relative;
  z-index: 2;
  background-color:#fff;
  transition: background-color .4s;
}

.sectionfade-container{
  --tint: 0; /* 0..1 */
}

.sectionfade-content-relative{
  position: relative;
  background: rgb(var(--sfTintR, 255), var(--sfTintG, 255), var(--sfTintB, 255));
}

/* Content über dem Overlay */
.sectionfade-content-relative > :not(.sectionfade-content-relative-overlay){
  position: relative;
  z-index: 10;
}

/* Wave-Fill wird ebenfalls per Variablen gesteuert */
.sectionfade-content-relative .wave-path{
  fill: rgb(var(--sfTintR, 255), var(--sfTintG, 255), var(--sfTintB, 255));
  transition: fill .4s;
}


/* STICKY BOTTOM PANEL */
.sectionfade-content-stickybottom{
  position: sticky;
  bottom: 0;                   /* bleibt am unteren Viewport kleben */
  z-index: 1;
}

/* optional: damit sticky wie ein Panel wirkt */
.sectionfade-content-stickybottom .section-content{
  background: #ade3d3;
}

/* optional: Wave */
.sectionfade-content-stickybottom .wave-path{
  fill: #ade3d3;
}

/* wenn sticky aktiv ist -> Overlay dunkler */
.sectionfade-container.sf-sticky-active
  .sectionfade-content-relative-overlay{
  opacity: 0.18;
}


/* Startseite */



.start-hero{height:130vh;min-height:30em;}
.start-hero .container-inner{height:100%}
.start-hero-background {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.start-hero-background img{width:100%;height:100%;object-fit: cover}
.start-hero-headline-block{position:absolute;left:45%;top:70%;transform:translateY(-100%);color:var(--white);width:45%}
.start-hero-headline-block h1{color:var(--white);line-height:1.15em}
.start-hero-shadow{
  position: absolute;          /* oder fixed / relative – je nach Layout */
  top: 0;
  left: 0;
  width: 100%;
  height: 10em;

  pointer-events: none;        /* klickt nichts weg */
  z-index: 7;                 /* über dem Hero */

  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0.0) 100%
  );
}

.start-hero-headline-block:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translate(-30%, 10%);
    width: 160%;
    height: 160%;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.35) 35%, rgba(0, 0, 0, 0.0) 70%);
    z-index: -1;
    pointer-events: none;
    opacity:0;
    transition:opacity 1s ease;
}

.start-hero-headline-block.active:before{opacity:1}

.start-intro{padding-top:0em;margin-top:-20em;}
.start-intro .wave-path{fill:var(--heather);}

.start-hero-arrow-down{position:absolute;left:95%;top:70%;transform:translateY(-80%);transition:opacity 2s ease;}
.start-hero-arrow-down.active{opacity: 0}
.start-hero-arrow-down img{width:2em}

.start-blume{position:fixed;width:2em;left:1em;bottom:1em;z-index:6}

.start-intro .section-wave {
    position: absolute;
    left: 0;
    top: -26em;
    width: 100%;
    height: 65em;
    pointer-events: none;
    overflow: hidden;
}
 .wave-spacer{height:40em;margin-top:-20em}

 .start-intro-text{width:50%;margin-top:-2em;}

 .start-intro-button{margin-top:4em;position: relative;}

.start-intro #pathtext {
    margin-top: -14em;
    position:relative;
    margin-left:-10vw;
}


 .start-intro-button-projects{margin-top:4em;position: relative;text-align:center;margin-bottom:1em}


.start-intro-projects{
  padding: 4rem 0;
}

.start-intro-projects-grid{
  width: 100%
  margin: 0 auto;

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem 6rem;
  align-items: start;
}

/* Basis */
.start-intro-project{
  display: grid;
  gap: 1rem;
}

.start-intro-project-media{
  margin: 0;
}

.start-intro-project-media img{
  display: block;
  width: 100%;
  height: auto; /* wichtig: echtes Bildformat */
}

/* Text */
.start-intro-project-text{
  max-width: 15rem;
  line-height: 1.5;
  margin: 0;
  padding-top: 1.5em;
}

/* ---- Positionierung (3 Projekte) ---- */

.start-intro-projects-grid > .start-intro-project:nth-child(1){
  align-self: center;            
  width: 60%;
}

/* 2. Projekt: größer, rechts */
.start-intro-projects-grid > .start-intro-project:nth-child(2){
  justify-self: end;
   align-self: center; 
  width: 80%;
}
.start-intro-projects-grid > .start-intro-project:nth-child(3) {
    grid-column: 1 / -1;
    justify-self: unset;
    width: 40%;
    margin-left: 10%;
}





.start-leistungen{padding-top:16em;padding-bottom:2em}
.start-leistungen-headline-block{}


.start-leistungen-grid{display:grid;
display: grid; 
  grid-template-columns: repeat(3, 28%); 
  gap: 8%; 
  justify-content: space-between;}
.start-leistungen-grid-single-image, .start-leistungen-grid-single-headline{text-align:center;}
.start-leistungen-grid-single-image{margin-bottom:2.5rem}
.start-leistungen-grid-single-image img{width:5em;height:5em;object-fit: contain}
.start-leistungen-grid-single-headline{margin-bottom:2rem;}

.start-leistungen-button{margin-top:4em;margin-bottom:8em;text-align:center;width:100%}

.scrollit-frame{text-align:center;}
.scrollit-frame-1 .scrollit-frame-text{color:var(--white);background-color:var(--dblue)}
.scrollit-frame-2 .scrollit-frame-text{color:var(--white);background-color:var(--gold)}

.scrollit-showcase .copytext{margin:2em 0 3vh 0}
.showcase-image{margin-top:6vh;margin-bottom:1em}
.showcase-image img{width:40%;height:unset}
.scrollit-showcase{height:200vh}


.start-quote{background-color:var(--heather);}
.start-quote-inner{width:76%;margin:8em 12% 10em 12%;text-align:center}
.start-quote-text{font-size:2.5rem;line-height:1.4em;font-weight:300;font-family:"Eiko";}
.start-quote-name{margin-top:3em;text-transform: uppercase}



.start-shop{min-height:30em;max-height:80em;height:calc(100vh + 8em);overflow:hidden;position:relative}
.start-shop-image{width:100%;height:calc(100% + 10em);position:absolute;top:-5em;z-index:1}
.start-shop-image img{width:100%;height:100%;object-fit: cover}
.start-shop .container-inner {
    height: 100%;
    position: absolute;
    left: 10vw;
    top: 0;
}
.start-shop-text{position:absolute;bottom:10em;width:50%;z-index:2;color:var(--white)}
.start-shop-text .copytext{margin:3em 0}

.start-shop-text:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    transform: translate(-30%, 35%);
    width: 290%;
    height: 340%;
    overflow: visible;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.55) 35%, rgba(0, 0, 0, 0) 70%);
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1s ease;
}

.start-shop-text.active:before{opacity:1}


.section--wave-garten{z-index:2}

.start-garten-text{position:relative;margin-bottom:6em;}
.start-garten-button{position:absolute;right:0;bottom:0}
.start-garten-text .headline-text{width:55%}


.start-garten-headline-block{width:45em;}


.start-garten-entries{display:grid;
display: grid; 
  grid-template-columns: repeat(3, 30%); 
  gap: 5%; 
  justify-content: space-between;margin-bottom:5em;margin-top:3em}

  .start-garten-entry-image{width:100%;margin-bottom:1.5em;}
.start-garten-entry-image img {
    width: 100%;
    height: 24em;
    object-fit: cover;
}
  .start-garten-entry-headline{width:100%;margin-bottom:1.5em;position: relative;display:inline-block;font-family:"Eiko";font-weight:300}
  .start-garten-entry-headline .copytext{width:80%;float:left;display: inline-block;}
    .start-garten-entry-headline .copytext{font-size:1.7em;line-height:1.2em;}
  .start-garten-entry-headline .start-garten-entry-link{float:right;margin-top:0.3em}

  .start-garten-entries-button{text-align:center}

  .start-garten-entry:nth-child(2){transition-delay:1.5s}
    .start-garten-entry:nth-child(3){transition-delay:2s}
    .start-garten-entry:nth-child(4){transition-delay:2.5s}
    .start-garten-entry:nth-child(5){transition-delay:3s}


    .footer-top-left{width:50%;display: inline-block;float:left;}
    .footer-top-left h3{font-size:1.7em;margin-bottom:2.5rem;font-weight:400;}
    .footer-top-right{width:38%;display: inline-block;float:right;}

    footer a, footer a:link, footer a:hover, footer a:visited{color:var(--white)}

    .footer-top-contact{line-height:2em}
    .newsletter-head{font-size:0.7em;margin-bottom:1rem;font-weight:800;letter-spacing:0.1em;}
    .newsletter-text{width:85%;margin-right:15%}



    .footer-center{width:100%;margin-top:2.5em;padding-top:2.5em;border-top:solid 1px var(--gold);display: inline-block;position:relative;}

 .footer-center-links{width:70%}
 .footer-center-links-single{display:inline-block;float:left;margin-right:5em;min-height:3em}
.footer-center-bottom-headline{text-transform:uppercase;margin-bottom:1em;font-weight:800;letter-spacing:0.1em;font-size:0.9rem;}

.footer-center-sm{width:20%;float:right;display:inline-block;position:absolute;right:0;text-align:right}
.socials img{margin-left:2.5em;transition:transform .3s ease}
.socials img:hover{transform:scale(1.2)}

.footer-copy{position:absolute;right:0;bottom:0;font-size:0.6em;font-weight:800;letter-spacing:0.1em}

 .footer-center-links{line-height:2em}
  .footer-center-links a{width:100%;display:block}

.footer-bottom {
    color: var(--gold);
    font-size: 9.82em;
    line-height: 1;
    margin: 3rem 0;
    font-family: "Eiko";
    white-space: nowrap;
}


  /* philosophie */

.philosophie-intro{height:100vh;min-height:43em;}
  .philosophie-intro-text{text-align:center;width:90%;margin-left:5%;margin-top:14vh;}
    .philosophie-intro-text .copytext{font-size:2.5em;line-height:1.4em;font-weight:300;text-align:center;font-family:"Eiko"}
    .philosophie-intro-sub{ text-transform: uppercase;margin-top:4em;transition-delay:4.2s}

.philosophie-intro-stones{text-align:center;}
    .logo-sequence{
  width: 7em;
  height: auto;
  display: inline-block;
  margin-top:3.5em;
}

/* alle Pfade starten unsichtbar */
.logo-sequence path{
  opacity: 0;

  animation: logoFadeIn 1.4s ease forwards;

}

/* unterster Pfad zuerst */
.logo-sequence path:nth-child(1){ animation-delay: 2.2s; }
.logo-sequence path:nth-child(2){ animation-delay: 2.6s; }
.logo-sequence path:nth-child(3){ animation-delay: 3s; }
.logo-sequence path:nth-child(4){ animation-delay: 3.4s; }
.logo-sequence path:nth-child(5){ animation-delay: 3.8s; }

@keyframes logoFadeIn{
  from{ opacity: 0; }
  to{ opacity: 1; }
}



.philosophie-about-headline-block{margin-top:18em;position: relative;display:inline-block;width:50%;margin-bottom:6em}

.philosophie-about-image {
    position: absolute;
    width: 35%;
    right: 0;
    top: 12em;
}


.philosophie-about-text{padding-left:7.7em;width:50%;box-sizing:border-box;}

.philosophie-about-bottom{width:100%;display: inline-block;margin-top:6em;position:relative;margin-bottom:5em}
.philosophie-about-image-2 {width:50%;display:inline-block;float:left;position:relative;}
.philosophie-about-text-2{float:right;right:0;dislay:inline-block;width:35%;top:50%;transform: translateY(-50%);position:absolute;}

.grow{transform-origin:center bottom;height:auto;}

.philosophie-garten{background-color:var(--heather);}
.philosophie-garten-headline-block{margin-top:6em;width:50%;}
.philosophie-garten-texte{width:100%;display: inline-block;margin-top:6em;position:relative;margin-bottom:5em}
.philosophie-garten-text{padding-left:7.7em;width:50%;box-sizing:border-box;}
.philosophie-garten-text-2{float:right; dislay:inline-block;width:35%;margin-top:6em;}

.philosophie-about-2{background-color:var(--white)}

.philosophie-garten-scroll{height:400vh;width:100%;display: block;background-color:var(--heather);}

.philosophie-garten #pathtext {
    margin-top: 0em;
    height: 16em;
    position: relative;
    top: 0;
}

.philosophie-stones-container{position:sticky;height:100vh;top:0;width:100%;}

.philosophie-stones-single{position: absolute;left:0;top:100%;width:100%;height:100dvh;overflow:hidden;z-index:1;opacity:0;pointer-events:none;transition:top .6s cubic-bezier(.2,.75,.2,1), opacity .2s ease}

.scroll-up .philosophie-stones-single{transition:top .6s cubic-bezier(.2,.75,.2,1), opacity .2s ease .4s}

.scroll-up .philosophie-stones-single.bottom{transition:top .6s cubic-bezier(.2,.75,.2,1)}
.philosophie-stones-single-1, .philosophie-stones-single.active, .philosophie-stones-single-4.bottom.active, .philosophie-stones-single-4.bottom{top:0;}
.philosophie-stones-single.active{opacity:1;pointer-events: auto}
.philosophie-stones-single-image{width:100%;height:100%;position:absolute;left:0;top:0;z-index:1}
.philosophie-stones-single-image img{width:100%;height:100%;object-fit: cover;}
.philosophie-stones-single-text{width:100%;position:absolute;left:0;top:50%;transform:translateY(-50%);color:var(--white);z-index:3;opacity:0;
  transition:opacity .5s ease;}
.philosophie-stones-single.active-text .philosophie-stones-single-text{opacity:1}
.philosophie-stones-single-text-head{font-size:6.75rem;line-height:1em;text-align:center;width:100%;text-transform: uppercase;font-family:"Eiko";font-weight:300}
.philosophie-stones-single-text-copy{width:60%;margin-left:20%;display: grid; 
  text-align:left;margin-top:8em;
  grid-template-columns: repeat(2, 48%); 
  gap: 4%; 
  justify-content: space-between;
}


  .philosophie-stones-single-shadow{
     position: absolute;      
  top: 0%;
  left: 0;
  width: 100%;
  height: 100%;
 pointer-events: none;    
 transition:opacity 1s ease;
  z-index: 2;              
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.0) 0%,
    rgba(0, 0, 0, 0.9) 100%
  );
  opacity:0;
 
  }
.philosophie-stones-single.active .philosophie-stones-single-shadow{opacity:1}



.clip-images{position:absolute;left:0;top:0;width:100vw;height:100vh;}

.art {
    width: 100%;
    height: 100vh;
    display: block;
  }

  .art{ overflow: visible; } /* wirkt in manchen Browsern nur so: */
svg.art{ overflow: visible; }


#clip-1{transition:transform 0.7s ease-in;transform-origin: 14% 65%;}
#clip-1.active{transform:scale(15)}
#clip-2{
transition:transform .7s ease-in;
    transform-origin: 80% 60%;
}

#clip-2.active{
    transform: scale(12);

}

.clip-sand.active{z-index:2}





.philosophie-fusion{background-color:var(--heather);}
.philosophie-fusion-headline-block{margin-top:6em;width:50%;}
.philosophie-fusion-texte{width:100%;display: inline-block;margin-top:6em;position:relative;margin-bottom:5em}
.philosophie-fusion-text{padding-left:7.7em;width:50%;box-sizing:border-box;}
.philosophie-fusion-text-2{float:right; dislay:inline-block;width:35%;margin-top:6em;}

.philosophie-pflanzen{position: relative;display: inline-block;width:100%;padding-bottom:5em}
.philosophie-entries-master{width:100vw;overflow:hidden;position: relative;display: inline-block;padding-bottom:5em}
.philosophie-entries-container{
  width: 100vw;
  overflow-x: auto;      /* horizontal scroll */
  overflow-y: hidden;
  position: relative;
  display: inline-block;

  scroll-snap-type: x mandatory;   /* snap horizontal */
  scroll-behavior: smooth;         /* smooth scroll (auch bei JS) */
  -webkit-overflow-scrolling: touch;
}

/* jedes Entry ist ein Snap-Point */
.philosophie-pflanzen-entry{
  scroll-snap-align: start;     /* snap am linken Rand */
  scroll-snap-stop: always;     /* optional: stoppt "überspringen" */
}

/* optional: wenn du willst, dass beim Snappen 10vw Padding berücksichtigt wird */
.philosophie-entries-container{
  scroll-padding-left: 10vw;
  scroll-padding-right: calc(10vw - 3em);
}

/* Tipp: Schreibfehler fixen (bei dir: oveflow) */
.philosophie-entries-container-inner{
  display:block;
  width:max-content;
  padding-left:10vw;
  padding-right:calc(10vw - 3em);
  /* oveflow:scroll; <-- entfernen, ist falsch/unnötig */
}
.philosophie-pflanzen-entry{width:calc(var(--container) / 3 - 2em);box-sizing:border-box;margin-right:3em;float:left;display:inline-block;}

.philosophie-entries-pagination{width:100%;height:100%;position: absolute;top:0;left:0;pointer-events: none}
.philosophie-entries-pagination-arrow{width:10vw;height:100%;background-color:rgba(255,255,255,.8);text-align:center;position:absolute;pointer-events:auto;cursor:pointer}
.philosophie-entries-pagination-arrow img{margin-top:8em;width:1.5em;}
.philosophie-entries-pagination-arrow-right{right:0;left:unset;}
.philosophie-entries-pagination-arrow-right img{transform:rotate(180deg)}







.leistungen-hero{height:50vh;min-height:25em;}
.leistungen-hero .container-inner{height:100%}
.leistungen-hero-background {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
.leistungen-hero-background img{width:100%;height:100%;object-fit: cover}
 


.leistungen-intro{padding-top:0em;margin-top:-20em;background-color:var(--heather);padding-bottom:8em}
.leistungen-intro .wave-path{fill:var(--heather);}
.leistungen-headline-block{width:70%}


.scrollit-leistungen .scrollit-frame-1 .scrollit-frame-text {
    color: var(--white);
    background-color: var(--dgreen);
}

.scrollit-leistungen .scrollit-frame-2 .scrollit-frame-text {
    color: var(--white);
    background-color: var(--red);
}

.scrollit-leistungen .scrollit-frame-3 .scrollit-frame-text {
    color: var(--white);
    background-color: var(--dblue);
}

.scrollit-icon{width:5em;height:5em;object-position:bottom center;display: inline-block;object-fit:contain;margin-bottom:2em}
.scrollit-icon img{object-position:bottom center;display: inline-block;object-fit:contain;width:100%;height:100%}

.scrollit-leistungen .copytext{margin-top:8em}


.start-leistungen-headline-block{width:100%;margin:8em 0}

.start-leistungen-headline-block .headline-text{width:40%}
.leistungen-action-button{width:100%;text-align:right;margin-top:2em}

.leistungen-link{height:100vh;position: relative;overflow:hidden}
.leistungen-link .container-inner{height:100%;width:100%;position: absolute;left:0;top:0}
.leistungen-link-box {
    bottom: 10em;
    width: 21em;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 1.8em 1.8em 1.5em 1.8em;
    box-sizing: border-box;
    position: absolute;
    left: 10vw;

}
a .leistungen-link-box{color:var(--dblue)}
.leistungen-link-head{width:80%;margin-bottom:1em;line-height:1.25em;font-weight:300;font-family:"Eiko"}
.leistungen-link-arrow{position:absolute;right:1.5em;top:1.5em;width:2em;}

.leistungen-link-text{width:100%;font-size:0.7em;}


.start-shop-image{
  position: relative;
  overflow: hidden; /* wichtig */
}
.start-shop-image{
  position: relative;
  overflow: visible; /* wichtig: wir schneiden per Maske, nicht per overflow */
}

.wave-masked{
  display:block;
  width:100%;
  height:100%;
  object-fit: cover;

  /* sichtbare Fläche: oben komplett + unten Wave-Kante */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 1000'%3E%3Cpath fill='white' d='M0 0 H1440 V900 C960 840 480 980 0 900 Z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  -webkit-mask-position: 0 0;

  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 1000'%3E%3Cpath fill='white' d='M0 0 H1440 V900 C960 840 480 980 0 900 Z'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  mask-position: 0 0;
}


/* projekte */


.projekte-master{width:100vw;overflow:hidden;position: relative;display: block;height:100vh;}
.projekte-entries-container{
  width: 100vw;
  overflow-x: auto;      /* horizontal scroll */
  overflow-y: hidden;
  position: relative;
  display: inline-block;
height:100%;
  scroll-snap-type: x mandatory;   /* snap horizontal */
  scroll-behavior: smooth;         /* smooth scroll (auch bei JS) */
  -webkit-overflow-scrolling: touch;
}


.projekte-shadow{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
	z-index:1;
	pointer-events:none;
}


.projekte-shadow-top{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 10em;
	  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0.0) 100%
  );
}

.projekte-shadow-left{
    position: absolute;
    left: 0;
    top: 0;
    width: 10em;
    height: 100%;
	  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0.0) 100%
  );
}
.projekte-shadow-right{
    position: absolute;
    right: 0;
    top: 0;
    width: 10em;
    height: 100%;
	  background: linear-gradient(
    to left,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0.0) 100%
  );
}

.projekte-container{
  width: 100vw;
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;

  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

/* Snap-Point */
.projekte-single{
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* Empfehlung: inner als Flex (stabiler als float) */
.projekte-container-inner{
  display: flex;
  height: 100%;
  width: max-content;
}


.projekte-single-img{width:100%;height:100%;}
.projekte-single-img img{width:100%;height:100%;object-fit: cover}

.projekte-container::-webkit-scrollbar { display: none; }
.projekte-container { scrollbar-width: none; }


.projekte-single{width:28vw;box-sizing:border-box;height:100%;border-right:2px solid var(--white);float:left;display:inline-block;text-align:left;transition:width .6s ease;position:relative}
.projekte-single:hover{width:56vw}

.projekte-entries-pagination{width:100%;height:100%;position: absolute;top:0;left:0;pointer-events: none;z-index:2}
.projekte-entries-pagination-arrow{width:10vw;height:100%;text-align:center;position:absolute;cursor:pointer;pointer-events:auto;}
.projekte-entries-pagination-arrow img{margin-top:40vh;transform:translateY(calc(-50%));width:3em;position:relative;pointer-events:auto;}
.projekte-entries-pagination-arrow-right{right:0;left:unset;}
.projekte-entries-pagination-arrow-right img{transform:rotate(180deg)}

.projekte-box {
    bottom: 5em;
    width: 19em;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 1.8em 1.8em 1.5em 1.8em;
    box-sizing: border-box;
    position: absolute;
    left: 0;
}



.projekt-head-shadow{
  position: absolute;          /* oder fixed / relative – je nach Layout */
  top: 0;
  left: 0;
  width: 100%;
  height: 10em;

  pointer-events: none;        /* klickt nichts weg */
  z-index: 7;                 /* über dem Hero */

  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.6) 0%,
    rgba(0, 0, 0, 0.0) 100%
  );
}



.projekt-head{min-height:100vh;height:100vh;display: inline-block;margin-bottom:8em;top:0;}
.projekt-head-left{width:50%;float:left;display:block;background-color:var(--red);color:var(--white);text-align:center;min-height:100%;position: relative;}
.projekt-head-right{width:50%;float:right;display:block;height:100%;position: relative;}
.projekt-head-right img{width:100%;height:100%;object-fit: cover}
.projekt-head-left-content{width:70%;display: inline-block;vertical-align: bottom;position: absolute;bottom:0em;left:15%;max-height:95vh;padding-top:5vh;overflow:scroll;}
.projekt-head-super {marign-bottom:2em;width:100%;display: inline-block;font-size:0.7em;text-transform: uppercase;}


.projekt-head-headline{width:100%;display:inline-block;}
.projekt-head-headline h1{font-size:var(--h1);line-height:1.35em;font-weight:300;margin-bottom:2rem;}
.projekt-head-sub{margin-bottom:7em;width:100%;display:inline-block;}
.projekt-head-text{margin-bottom:6em;text-align:left;width:100%;display:inline-block;font-size:var(--fontsmall);line-height:1.8em}

.builder-element{margin-bottom:8em}

.builder-image img{height:auto}
.builder-image-text .container-inner{
  display: grid;
  grid-template-columns: 1fr 1fr; /* zwei gleich große Spalten */
  gap: 9em;
  align-items: center; /* vertikal ausmitteln */
  margin:auto;
}


.builder-text-image .container-inner{
  display: grid;
  grid-template-columns: 1fr 1fr; /* zwei gleich große Spalten */
  gap: 9em;
  align-items: center; /* vertikal ausmitteln */
  margin:auto;
}


.builder-image-image .container-inner{
  display: grid;
  grid-template-columns: 1fr 1fr; /* zwei gleich große Spalten */
  gap: 5em;
  margin:auto;
}

.builder-image-image .container-inner .builder-image:nth-child(2){margin-top:16em}
.builder-grid-image{overflow:hidden}
.builder-grid-image img{width:100%;height:100%;object-fit:cover}
.builder-quote{background-color:var(--heather);display: inline-block;padding-bottom:0;margin-bottom:0em;margin-top:8em;}
.builder-quote .section-wave{top: -12em;}
.builder-quote .section-wave .wave-path {
    fill: var(--heather);
}

.builder-full-image{width:100%;height:100vh;max-height:50em;overflow: hidden;}
.builder-full-image img{width:100%;height:100%;object-fit:cover}


.projekt-more-buttons{margin:8em 0 2em 0}
.projekt-more-buttons .container-inner{z-index:2}
.projekt-more-button-left{float:left;}
.projekt-more-button-right{float:right;}

.projekt-more-button-left:before {
    content: "";
    width: 1em;
    height: 1em;
    margin-right: 1.3em;
    margin-left: 0.5em;
    background-image: url(./img/button-arrow.svg);
    background-size: contain;
    background-repeat: no-repeat;
    transform: scale(2) translateY(0.1em) rotate(180deg);
    position: relative;
    display: inline-block;
}
.projekt-more-button-left:after{display: none;}

@media (orientation : portrait){
	
	
	body{overflow-x:hidden}
	h2 {
  
    line-height: 1.3em;
}
	
	.burger-menu{font-size:1.2em;line-height:1em}
	
	
	.start-hero {
    width: 100vw;
    overflow: hidden;
}
	
	.start-hero-headline-block {
    left: 10%;
    top: 60%;
    width: 80%;
}
	
	.start-hero-arrow-down {
    left: 77%;
  
} 
	
	.start-intro .section-wave {
    top: -23em;
    height: 25em;
}
	
	.start-intro-text {
    width: 100%;
    margin-top: -7em;
}
	
	#pathtext svg {
    width: 100%;
    height: 6em;
    overflow: visible;
    display: block;
}
	
    .start-intro #pathtext {
        height: 15vh;
        display: inline-block;
        align-items: center;
        padding: 0;
        overflow: hidden;
        width: 100vw;
        margin-top: -5em;
        margin-left: -5vw;
        padding: 7em 0;
    }
	
	#pathtext text {
    font-size: 5.2em;
	}
	
	.start-intro-projects {
    padding: 0;
}
	
	    .start-intro-projects-grid {
        grid-template-columns: 1fr;
        gap: 4rem;
    }
	
	.start-intro-projects-grid > .start-intro-project:nth-child(1) {
    align-self: center;
    width: 80%;
}
	
	.start-intro-projects-grid > .start-intro-project:nth-child(3) {
    grid-column: 1 / -1;
    justify-self: unset;
    width: 80%;
    margin-left: 0;
}
	
	.headline-block{width:100%;}
	
	.headline-text {
    margin-top: 2em;
    padding-left: 10%;
}
	
	.start-leistungen-headline-block .headline-text, .headline-text {
    width: 90%;
}
	.section-wave{height:6em;top:-5.9em}
	.section-wave--bottom{bottom:-5.9em;height:6em;top:unset}
	
	.start-leistungen {
    padding-top: 10em;
    padding-bottom: 0em;
		
}
	
	.start-leistungen-grid {
    display:inline-block;
		width: 100%;
}
	
	.start-leistungen-grid-single{margin-bottom:4em;text-align:center;width:80%;margin-left:10%}
	.start-leistungen-grid-single-image {
    margin-bottom: 1rem;
}
	.start-leistungen-grid-single-headline h3{font-size:var(--h1)}
	
	.start-leistungen-button {
		margin-top: 0em;}
	
	.scrollit-showcase, .scrollit-container{height:auto;}
	
	.scrollit-fixed-inner {
    width: 100vw;
    height: auto;
    left: 0;
    top: 0;
    position: relative;
}
	
	.scrollit-frame {
    position: relative;
    inset: 0;
    width: 100%;
    height: auto;
    z-index: 1;
}
	
	.scrollit-frame-image, .scrollit-frame-text {
    will-change: height;
    height: auto;
    transition: height 2000ms cubic-bezier(.2, .75, .2, 1);
    display: block;
    width: 100%;
		position:relative;
}
	.scrollit-frame-text{padding:5em 0}
	.scrollit-frame-image{line-height:0}
	.scrollit-frame-image img {
    position: relative;
    inset: 0;
    width: 100%;
    height: 100vh;
    object-fit: cover;
}
	
	.start-quote-text{font-size:var(--h1)}
	.start-quote-inner {
    width: 90%;
    margin: 8em 5% 10em 5%;
    text-align: center;
}
	
	.start-shop-text {
  
    width: 80%;
		bottom:7em;
}
	
	.start-shop {
    min-height: unset;
    max-height: unset;
    height: 38em;
    overflow: hidden;
    position: relative;
}

	.start-garten-text .headline-text {
    width: 90%;
}
	
	.start-garten-button {
    position: relative;
    right: 0;
    bottom: 0;
    margin-top: 3em;
    float: right;
}
	.start-garten-entries{display:inline-block;width:100%; scrollbar-width: none;      /* Firefox (ignoriert hier) */
  -ms-overflow-style: none; margin-bottom:0}
	.start-garten-entries::-webkit-scrollbar {
  display: none;
}
	.start-garten-entry {
        margin-bottom: 0em;
        width: 70vw;
    }
	.start-garten-entry-image img {
    height: 15em;
}
	
	
	.footer-bottom{font-size:3.7em;margin: 2rem 0;}
	
	.footer-top-left {
    width: 100%;
}
	
	.footer-top-right {
    width: 100%;
    display: inline-block;
    float: right;
    margin-top: 2em;
}
	
	.footer-center-bottom-headline {
    text-transform: uppercase;
    margin-bottom: 1em;
    font-weight: 800;
    letter-spacing: 0.1em;
    font-size: 0.7rem;
    margin-top: 1em;
    margin-bottom: 0;
}
	
	.footer-center {
    width: 100%;
    margin-top: 1.5em;
		padding-top: 1.5em;}
	
	.socials img {
    margin-left: 2.5em;
 
    width: 1.5em;
    height: 1.5em;
    object-fit: contain;
    margin-top: 0.4em;
}
	
	.footer-copy{display:none;}
	
	.navigation {
    position: absolute;
    left: 100%;
    width: 100%;
	}
	
	.header.active .navigation {
    left: 0%;
}
	
	.navigation-container {
    margin-left: 5%;
    width: 90%;
    height: 100vh;
    overflow: scroll;
}
	
	.navigation-main {
    margin-top: 4rem;
    margin-bottom: 2rem;
    font-family: "Eiko";
}
	
	.navigation-main .link-wrapper {
    overflow: hidden;
    height: 4em;
    width: 100%;
}
	.navigation-sec{font-size:0.7em;}
	.navigation-main a { 
		font-size: 2.75em;}
	
	.navigation-sec div:nth-child(2) {
    float: left;
    margin-left: 1.9em;
}
	
	.navigation-copy {
		font-size: 0.7em;}
	
	
	
	.philosophie-intro-text .copytext {
    font-size: 1.5em;
    line-height: 1.4em;
    font-weight: 300;
    text-align: center;
    font-family: "Eiko";
}
	
	.philosophie-intro-text{}
	
	.philosophie-about-image {
    position: relative;
    width: 70%;
    right: 0;
    top: unset;
    float: right;
}
	
	.philosophie-about-text {
    padding-left: 0;
    width: 80%;
    box-sizing: border-box;
    margin-top: 4em;
}
	
	.philosophie-about-bottom{margin-top:3em}
	
	.philosophie-about-image-2 {
    width: 80%;
    display: inline-block;
    float: right;
    position: relative;
}
	
	.philosophie-about-text-2 {
    float: left;
    right: unset;
    display: inline-block;
    width: 80%;
    top: 50%;
    transform: unset;
    position: relative;
    margin-top: 4em;
}
	
	.philosophie-garten-text {
    padding-left: 0;
    width: 80%;
    box-sizing: border-box;
}
	
	.philosophie-garten-text-2 {
    float: right;
    display: inline-block;
    width: 80%;
    margin-top: 4em;
}
	
	.philosophie-garten #pathtext {
    margin-top: 0em;
    height: 6em;
    position: relative;
    top: 0;
    display: inline-block;
}
	.philosophie-stones-single-text-head {
    font-size: 4em;
	}
	
	
	.philosophie-stones-single-text-copy
 {
    width: 80%;
    margin-left: 5%;
	 display: inline-block;}



.philosophie-fusion-text{
    width: 80%;
    display: inline-block;
    float: right;
    position: relative;
	padding-left:0;
}
	
	.philosophie-fusion-text-2 {
    float: left;
    right: unset;
    display: inline-block;
    width: 80%;
    top: 50%;
    transform: unset;
    position: relative;
    margin-top: 4em;
}

.leistungen-intro-text{margin-top:4em;}

    .scrollit-frame-image img {
        position: relative;
        inset: 0;
        width: 100%;
        height: auto;
        object-fit: cover;
    }
.scrollit-leistungen .copytext {
    margin-top: 4em;
}
.scrollit-frame-text-inner {
	width: 80%;}

.start-shop-image {
    width: 100%;
	height: 100%;}

.leistungen-link-box {
    bottom: 5em;
    width: 80%;
}
.leistungen-link {
	height: 35em;}
.projekte-single, .projekte-single:hover {
	width: 80vw;}
.projekte-entries-pagination{display:none;}

.projekte-master{height:100dvh}


	.projekt-head{min-height:unset;height:auto;display:block;margin-bottom:0}
.projekt-head-left, .projekt-head-right{
    width: 100%;display:block;position:relative;height:auto;min-height:unset;top:0;
}

.projekt-head-left-content {
    width: 80%;
    display: inline-block;
    vertical-align: bottom;
    position: relative;
    bottom: unset;
    left: 0;
    max-height: unset;
    padding-top: 8em;
	top:0;
    overflow: unset;
	height:auto;
}
.builder-quote .section-wave {
    top: -5.9em;
}

.builder-element .container-inner {
    display: inline-block;
 width:var(--container);
}
.projekt-content{margin-top:0em;display:inline-block;padding-top:8em;}
.builder-image-text .builder-image{width:80%;margin-bottom:4em;}
.builder-image-text .bilder-text{width:80%;float:right;}

.builder-full-image {
    width: 100%;
    height: auto;
    max-height: 50em;
    overflow: hidden;
}
.builder-text-image .bilder-text{width:80%;margin-bottom:4em;}
.builder-text-image .builder-image{width:80%;float:right;}

.builder-image-image .builder-image{width:80%;float:left;}
.builder-image-image .container-inner .builder-image:nth-child(2){width:80%;float:right;margin-top:4em}

.start-shop-image img {
    width: 100%;
    height: 115%;
    object-fit: cover;
}


.art, .philosophie-stones-container {
    width: 100%;
    height: 100dvh;
}

.philosophie-garten-scroll {
    height: 500vh;
}
	
	.main-content {
    height: auto;
    padding-bottom: 10vh;
}

}