/* Zanetti Real Estate Consulting — Version 2
   Gleiche Marke wie Version 1 (Geist, Anthrazit, Sand), aber mit grossen
   Landschaftsbildern. Jede Schrift, die auf einem Foto steht, bekommt eine
   eigene Abdunklung darunter — die Bilder sind ausserdem schon beim Export
   entsaettigt und abgedunkelt, damit der Sandton lesbar bleibt.

   Bewegung: der Hero-Auftritt ist reines CSS (laeuft auch ohne Skript),
   alles am Scroll haengt an GSAP/ScrollTrigger auf nativem Scroll. Ohne
   Skript oder bei reduzierter Bewegung steht alles sofort sichtbar da. */

:root{
  --ink:#191917;
  /* Zweiter Grund (Services, Ablauf): sichtbar heller als --ink, Text bleibt AA. */
  --ink-2:#262522;
  --ink-3:#262522;
  --sand:#C7C1A5;
  --sand-lt:#DAD5BE;
  --titel:#D6D1B8;
  --txt:#C5C1AD;
  --muted:#979380;
  --line:rgba(199,193,165,.34);
  --line-soft:rgba(217,211,199,.15);
  --line-bild:rgba(218,213,190,.38);
  --scrim:18,18,16;
  --shell:min(1320px, 88vw);
  --weit:min(1480px, 92vw);
  --kopf-h:5rem;
  --micro:.8rem;
  --weich:cubic-bezier(.2,.7,.2,1);
  --raus:cubic-bezier(.16,1,.3,1);
  --intro:0s;
}
.mit-intro{--intro:1.5s}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
/* Dunkler Grund schon auf html: kein heller Blitz zwischen zwei Seiten. */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--ink)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--ink);
  color:var(--txt);
  /* Geist Fallback: Arial mit den Massen von Geist (@font-face im Kopf). */
  font-family:'Geist','Geist Fallback',Helvetica,Arial,sans-serif;
  font-size:1.15rem;
  line-height:1.72;
  letter-spacing:.005em;
  overflow-x:hidden;
}
body.gesperrt{overflow:hidden}
img{max-width:100%;height:auto;display:block}
/* picture ohne eigene Box: das img liegt fuer das Layout wie frueher direkt
   im Rahmen (Hero-Dias und Baender setzen ihr picture selbst auf block). */
picture{display:contents}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:1px solid var(--sand-lt);outline-offset:4px}
::selection{background:var(--sand);color:var(--ink)}

h1,h2,h3{font-weight:300;margin:0}
h2{font-size:clamp(2rem,4vw,3.25rem);line-height:1.12;letter-spacing:-.012em;color:var(--titel)}
h3{font-size:1.3rem;line-height:1.34;color:var(--titel)}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}

.shell{width:var(--shell);margin-inline:auto}

.micro{
  display:block;
  font-size:var(--micro);
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--sand);
  line-height:2;
}
.micro--dim{color:var(--muted)}

.sprung{
  position:absolute;left:1rem;top:-4rem;z-index:100;
  padding:.8em 1.4em;background:var(--sand);color:var(--ink);
  text-decoration:none;
}
.sprung:focus{top:1rem}

section[id]{scroll-margin-top:calc(var(--kopf-h) - 1px)}

/* ---------------------------------------------------------------- Intro */

/* Beim ersten Aufruf: Anthrazitflaeche, die Sonne dreht sich auf, dann
   faehrt die Flaeche nach oben weg. Reines CSS, damit sie auch dann
   verschwindet, wenn ein Skript nicht laedt. */
.intro{display:none}
.mit-intro .intro{
  position:fixed;
  inset:0;
  z-index:90;
  display:grid;
  place-content:center;
  justify-items:center;
  gap:1.6rem;
  background:var(--ink);
  pointer-events:none;
  animation:intro-weg .95s var(--raus) 1.15s forwards;
}
.intro__sonne{width:clamp(64px,7vw,96px);animation:intro-sonne 1.3s var(--raus) both}
.intro__name{
  font-size:.95rem;
  font-weight:300;
  letter-spacing:.6em;
  text-indent:.6em;
  text-transform:uppercase;
  color:var(--sand);
  animation:intro-name 1s var(--raus) .25s both;
}
@keyframes intro-weg{to{transform:translateY(-100%);visibility:hidden}}
@keyframes intro-sonne{from{opacity:0;rotate:-140deg;scale:.4}to{opacity:1;rotate:0deg;scale:1}}
@keyframes intro-name{from{opacity:0;letter-spacing:1.2em}to{opacity:1;letter-spacing:.6em}}

/* ---------------------------------------------------------------- Schaltflaechen */

/* Haarlinie, die Sandflaeche faehrt beim Zeigen von unten ein. */
.knopf{
  position:relative;
  display:inline-block;
  overflow:hidden;
  isolation:isolate;
  padding:1em 2.9em;
  border:1px solid var(--line);
  background:transparent;
  font-size:var(--micro);
  letter-spacing:.32em;
  text-indent:.32em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--sand-lt);
  cursor:pointer;
  transition:border-color .35s ease,color .45s ease;
}
.knopf::before{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:var(--sand);
  transform:translateY(101%);
  transition:transform .55s var(--raus);
}
.knopf > span{display:inline-block}
.knopf:hover,.knopf:focus-visible{border-color:var(--sand);color:var(--ink)}
.knopf:hover::before,.knopf:focus-visible::before{transform:none}
.knopf:active{scale:.98}
.knopf--hell{border-color:rgba(218,213,190,.62);background:rgba(var(--scrim),.25)}

.textlink{
  display:inline-block;
  margin-top:1.6rem;
  padding-bottom:.35em;
  font-size:var(--micro);
  letter-spacing:.3em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--sand-lt);
  background:linear-gradient(var(--sand),var(--sand)) left bottom / 2.4em 1px no-repeat;
  transition:background-size .5s var(--weich),color .3s ease,letter-spacing .5s var(--weich);
}
.textlink:hover,.textlink:focus-visible{background-size:100% 1px;color:#E4E0CC;letter-spacing:.36em}

/* ---------------------------------------------------------------- Kopfleiste */

/* Oben im Hero durchsichtig; beim Scrollen durch den Hero laeuft die Leiste
   mit der Seite nach oben weg (Skript, ohne Uebergang). Sobald der Hero
   vorbei ist, faehrt sie in Anthrazit herein und bleibt stehen. Der
   Uebergang auf transform gilt nur fuer dieses Hereinfahren.
   Kein will-change hier: ein transformierter Kopf wuerde die fixierte
   Menuetafel einsperren. */
.kopf{
  position:fixed;
  inset:0 0 auto;
  z-index:40;
  border-bottom:1px solid transparent;
  transition:background-color .45s ease,border-color .45s ease;
  animation:einblenden 1s ease calc(1.1s + var(--intro)) both;
}
.kopf.ist-fest{
  background:var(--ink);
  border-bottom-color:var(--line-soft);
  transition:background-color .45s ease,border-color .45s ease,transform .7s var(--raus);
}
.kopf__in{
  position:relative;
  width:var(--weit);
  height:var(--kopf-h);
  margin-inline:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
/* Lesefortschritt als Sandlinie an der Unterkante. */
.kopf__linie{
  position:absolute;
  left:0;bottom:-1px;
  width:100%;height:1px;
  background:var(--sand);
  transform:scaleX(var(--fortschritt,0));
  transform-origin:left;
}
@keyframes einblenden{from{opacity:0}to{opacity:1}}

.marke{
  display:flex;
  align-items:center;
  gap:.65rem;
  text-decoration:none;
  transition:opacity .45s ease,transform .6s var(--weich);
}
.marke img{width:2.45rem;transition:rotate .9s var(--raus)}
.marke:hover img{rotate:120deg}
/* Wie im Logo: Name gross, darunter die Unterzeile auf dieselbe Breite
   gesperrt. */
.marke__text{display:flex;flex-direction:column;gap:.32rem;text-transform:uppercase;color:var(--sand)}
.marke__name{
  font-size:1.4rem;
  font-weight:300;
  line-height:1;
  letter-spacing:.57em;
  margin-right:-.57em;
}
.marke__sub{
  font-size:.68rem;
  font-weight:400;
  line-height:1;
  letter-spacing:.118em;
  white-space:nowrap;
  color:var(--sand-lt);
}
/* Solange die grosse Marke im Hero steht, waere die kleine doppelt. */
.marke.ist-weg{opacity:0;transform:translateY(-.4rem);pointer-events:none}

.menue{display:flex;align-items:center;justify-content:flex-end;flex:1}
.menue__links{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  display:flex;
  gap:2.5rem;
}
.menue a{
  position:relative;
  font-size:var(--micro);
  letter-spacing:.26em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--txt);
  padding-bottom:.3em;
  transition:color .3s ease;
}
/* Unterstrich waechst von links, der aktive Punkt behaelt ihn. */
.menue a::after{
  content:"";
  position:absolute;
  left:0;right:.26em;bottom:0;
  height:1px;
  background:var(--sand);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .5s var(--raus);
}
.menue a:hover,.menue a:focus-visible,.menue a.ist-aktiv{color:var(--sand-lt)}
.menue a:hover::after,.menue a:focus-visible::after,.menue a.ist-aktiv::after{transform:scaleX(1);transform-origin:left}

.menue__meta{display:flex;align-items:center;gap:1.6rem}
.sprachen{display:flex;gap:.95rem}
.sprachen a[aria-current]{color:var(--sand-lt)}
.sprachen a[aria-current]::after{transform:scaleX(1);background:var(--line)}

/* Ein Knopf fuer beides: die zwei Striche laufen zur Mitte und drehen sich
   zum Kreuz, an derselben Stelle. Beim Oeffnen erst zusammen, dann drehen;
   beim Schliessen umgekehrt. Knopf und Marke liegen ueber der Tafel. */
.burger{
  display:none;
  position:relative;
  z-index:70;
  width:2.75rem;height:2.75rem;
  margin:0 -.4rem 0 auto;
  padding:0;border:0;background:none;cursor:pointer;
}
.burger span{
  position:absolute;
  right:.4rem;
  height:1px;
  background:var(--sand);
  transition:top .3s var(--raus) .22s,transform .35s var(--raus) 0s,width .35s var(--raus),background-color .3s ease;
}
.burger span:first-child{top:calc(50% - 4.5px);width:1.9rem}
.burger span:last-child{top:calc(50% + 4.5px);width:1.25rem}
.burger[aria-expanded="false"]:hover span:last-child{width:1.9rem}
.burger[aria-expanded="true"] span{
  top:50%;
  width:1.6rem;
  transition:top .3s var(--raus) 0s,transform .5s var(--raus) .22s,width .3s var(--raus),background-color .3s ease;
}
.burger[aria-expanded="true"] span:first-child{transform:rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:rotate(-45deg)}
.burger[aria-expanded="true"]:hover span{background:var(--sand-lt)}
.marke{position:relative;z-index:70}
/* Bei offener Tafel steht die Marke immer da, auch ueber dem Hero. */
.kopf.menue-offen .marke{opacity:1;transform:none;pointer-events:auto}

/* ---------------------------------------------------------------- Hero */

/* overflow-anchor: Firefox verankert sonst die Scrollposition an Hero-Inhalten,
   die sich per translate bewegen (Einstieg, Parallaxe), und die Seite
   kriecht dann beim Scrollen im Hero von selbst weiter. */
.hero{
  position:relative;
  isolation:isolate;
  overflow-anchor:none;
  min-height:100svh;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:var(--ink);
  color:var(--sand);
}
/* Der Bildrahmen ist rundum etwas groesser als der Hero, damit die
   Zeigerparallaxe nie eine Kante freilegt. */
.hero__bild{position:absolute;inset:-28px;z-index:-2;display:block}
/* Bildwechsel: langsame Ueberblendung, das aktive Bild faehrt dabei ganz
   ruhig zurueck. */
.hero__dia{
  position:absolute;inset:0;
  display:block;
  opacity:0;
  scale:1.07;
  transition:opacity 2.2s ease,scale 10s linear;
}
.hero__dia.ist-an{opacity:1;scale:1}
.hero__bild img,
.band__bild img{
  position:absolute;
  left:0;top:-8%;
  width:100%;height:116%;
  object-fit:cover;
}
/* --hero-y: Parallaxe beim Wegscrollen (app.js), in Prozent der Bildhoehe. */
.hero__bild img{object-position:62% 50%;translate:0 calc(var(--hero-y, 0) * 1%);animation:heranfahren 3.2s var(--raus) var(--intro) both}
@keyframes heranfahren{from{scale:1.14;opacity:.2}to{scale:1;opacity:1}}

/* Abdunklung nur dort, wo Schrift steht: oben fuer die Leiste, in der Mitte
   weich fuer das Logo, unten fuer die Wertezeile. */
.hero::after{
  content:"";
  position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(ellipse 46% 42% at 50% 48%, rgba(var(--scrim),.52), rgba(var(--scrim),0) 72%),
    linear-gradient(to bottom,
      rgba(var(--scrim),.78) 0%,
      rgba(var(--scrim),.22) 20%,
      rgba(var(--scrim),.08) 48%,
      rgba(var(--scrim),.38) 78%,
      rgba(var(--scrim),.9) 100%);
}

.hero__inhalt{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:calc(var(--kopf-h) + 3svh) 6vw 7svh;
  text-shadow:0 1px 14px rgba(var(--scrim),.45);
}

.logo{display:flex;flex-direction:column;align-items:center;font-weight:300}
.logo__sonne{
  position:relative;
  display:block;
  width:clamp(84px,9.4vw,136px);
  aspect-ratio:1;
  /* --sonne-dreh: Weiterdrehen beim Wegscrollen (app.js). */
  transform:rotate(calc(var(--sonne-dreh, 0) * 1deg));
  animation:sonne-auf 2s var(--raus) calc(.1s + var(--intro)) both;
}
.logo__sonne img{position:relative;width:100%;animation:drehen 80s linear infinite}
/* Der Hof ist das Leuchten der Sonne aus dem Logo: ein warmer, atmender
   Lichtkreis hinter dem Zeichen. */
.logo__hof{
  position:absolute;
  inset:-60%;
  border-radius:50%;
  background:radial-gradient(circle, rgba(236,214,158,.30) 0%, rgba(236,214,158,.10) 38%, rgba(236,214,158,0) 68%);
  animation:atmen 6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes sonne-auf{from{opacity:0;rotate:-90deg;scale:.7}to{opacity:1;rotate:0deg;scale:1}}
@keyframes drehen{to{rotate:360deg}}
@keyframes atmen{0%,100%{opacity:.55;scale:.92}50%{opacity:1;scale:1.06}}

.logo__name{
  display:block;
  margin-top:clamp(1.3rem,2.6svh,2rem);
  font-size:clamp(2.75rem,5.3vw,4rem);
  line-height:1;
  letter-spacing:.34em;
  text-indent:.34em;
  text-transform:uppercase;
  color:var(--titel);
}
/* Buchstabe fuer Buchstabe: aus der Unschaerfe, leicht von unten. */
.logo__name > span{
  display:inline-block;
  animation:buchstabe 1.3s var(--raus) calc(.45s + var(--i) * .07s + var(--intro)) both;
}
@keyframes buchstabe{from{opacity:0;translate:0 .35em;filter:blur(10px)}to{opacity:1;translate:0 0;filter:blur(0)}}

.logo__sub{
  display:block;
  margin-top:1.05rem;
  font-size:clamp(.78rem,1.02vw,.92rem);
  font-weight:400;
  letter-spacing:.52em;
  text-indent:.52em;
  text-transform:uppercase;
  color:var(--sand);
  animation:sperren 1.6s var(--raus) calc(.95s + var(--intro)) both;
}
@keyframes sperren{from{opacity:0;letter-spacing:1.1em}to{opacity:1;letter-spacing:.52em}}

.hero__claim{
  margin:clamp(2.2rem,5.4svh,3.6rem) 0 0;
  font-size:clamp(1.15rem,2.15vw,1.8rem);
  font-weight:300;
  line-height:1.6;
  letter-spacing:.24em;
  text-indent:.24em;
  text-transform:uppercase;
  color:var(--sand-lt);
}
.hero__claim::before{
  content:"";
  display:block;
  width:3.2rem;height:1px;
  margin:0 auto clamp(1.8rem,4svh,2.6rem);
  background:var(--line-bild);
  animation:linie 1.2s var(--raus) calc(1.1s + var(--intro)) both;
}
@keyframes linie{from{scale:0 1}to{scale:1 1}}
/* Zeilen steigen aus einer Maske auf. */
.zeile{display:block;overflow:hidden;padding-block:.08em}
.zeile > span{
  display:block;
  animation:aufsteigen 1.3s var(--raus) calc(1.25s + var(--i) * .14s + var(--intro)) both;
}
@keyframes aufsteigen{from{translate:0 110%}to{translate:0 0}}

.hero__werte{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.3em 0;
  margin:clamp(1.6rem,3.6svh,2.4rem) 0 0;
  font-size:.84rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--sand);
}
.hero__werte span{animation:einblenden 1s ease calc(1.75s + var(--i) * .15s + var(--intro)) both}
.hero__werte span + span::before{
  content:"\00B7";
  margin:0 1em 0 .7em;
  color:var(--muted);
}

.bildort{
  position:absolute;
  right:clamp(1rem,4vw,3.5rem);
  bottom:clamp(1.2rem,3vw,2.2rem);
  margin:0;
  font-size:.74rem;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:rgba(218,213,190,.66);
}

/* Flagge zum gezeigten Bild, mittig unter den Werten. Beide Flaggen
   liegen aufeinander und blenden so lange wie die Bilder (app.js). Die
   feine Linie gibt Weiss und Rot auf jedem Foto eine Kante. */
.hero__flaggen{
  position:relative;
  width:48px;height:32px;
  margin:clamp(1.4rem,3.2svh,2.2rem) auto 0;
  animation:einblenden 1s ease calc(2.2s + var(--intro)) both;
}
.hero__flagge{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  transition:opacity 2.2s ease;
}
.hero__flagge.ist-an{opacity:1}
.hero__flagge svg{display:block;outline:1px solid var(--line-bild)}

/* ---------------------------------------------------------------- Profil */

.profil{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);
  gap:clamp(2.5rem,6vw,6.5rem);
  align-items:end;
  padding-block:clamp(5rem,11vw,9.5rem);
}
.profil__titel{
  font-size:clamp(2.2rem,4.7vw,4rem);
  line-height:1.08;
  letter-spacing:-.016em;
}
.profil__text p{max-width:40ch}

/* ---------------------------------------------------------------- Services */

.services{
  background:var(--ink-2);
  border-top:1px solid var(--line-soft);
  padding-block:clamp(4.5rem,9vw,8rem);
  --spalte:clamp(1.2rem,2.2vw,2.2rem);
}
.kopfzeile{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(2rem,5vw,5rem);
  align-items:end;
  margin-bottom:clamp(3rem,6vw,5rem);
}
.kopfzeile h2{margin-top:1.1rem;max-width:17ch}
.kopfzeile__lead{max-width:46ch}

/* Die Spalten ragen um ihren Innenabstand ueber das Raster hinaus, damit der
   Text buendig mit der Ueberschrift steht und das Hover-Bild trotzdem Luft
   hat. */
.leistungen{
  position:relative;
  list-style:none;
  margin:0 calc(-1 * var(--spalte));
  padding:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.leistungen::before{
  content:"";
  position:absolute;
  left:var(--spalte);right:var(--spalte);top:0;
  height:1px;
  background:var(--line-soft);
  transform:scaleX(var(--zug,1));
  transform-origin:left;
}
.leistung{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:clamp(2rem,3.4vw,2.8rem) var(--spalte) clamp(2.2rem,3.4vw,2.8rem);
}
.leistung + .leistung{border-left:1px solid var(--line-soft)}
/* Die Sandlinie oben laeuft beim Zeigen ueber die ganze Spalte. */
.leistung::before{
  content:"";
  position:absolute;
  left:0;top:0;
  height:1px;width:100%;
  background:var(--sand);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .7s var(--weich);
  z-index:1;
}
.leistung:hover::before,.leistung:focus-within::before{transform:scaleX(1)}

/* Hover-Bild: faehrt von unten in die Spalte, das Foto zoomt dabei zurueck.
   Nur mit Maus — am Touchscreen gibt es kein Zeigen. */
.leistung__bild{display:none}
@media (hover:hover) and (pointer:fine){
  .leistung__bild{
    display:block;
    position:absolute;inset:0;z-index:-1;
    clip-path:inset(100% 0 0 0);
    transition:clip-path .8s var(--raus);
  }
  .leistung__bild::after{
    content:"";
    position:absolute;inset:0;
    background:linear-gradient(to bottom, rgba(var(--scrim),.55), rgba(var(--scrim),.72) 55%, rgba(var(--scrim),.9));
  }
  .leistung__bild img{
    width:100%;height:100%;
    object-fit:cover;
    scale:1.25;
    transition:scale 1.2s var(--raus);
  }
  .leistung:hover .leistung__bild{clip-path:inset(0 0 0 0)}
  .leistung:hover .leistung__bild img{scale:1}
}

.leistung__nr{
  display:block;
  overflow:hidden;
  margin-bottom:clamp(1.4rem,3vw,2.4rem);
  font-size:clamp(2.4rem,3.8vw,3.3rem);
  font-weight:300;
  line-height:1.05;
  color:var(--sand);
}
.leistung__nr > span{display:inline-block;transition:translate .6s var(--raus),color .3s ease}
.leistung:hover .leistung__nr > span{translate:.18em 0;color:#E8E4D2}
.leistung h3{
  margin-bottom:.8rem;
  font-size:1rem;
  font-weight:400;
  letter-spacing:.12em;
  text-transform:uppercase;
  transition:color .3s ease;
}
.leistung p{max-width:28ch;font-size:1.125rem;transition:color .3s ease}
.leistung:hover h3{color:#EDE9D8}
.leistung:hover p{color:#DCD8C6}

/* ---------------------------------------------------------------- Bildbaender */

.band{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:grid;
  min-height:clamp(600px,96svh,940px);
  padding-block:clamp(5rem,10vw,8rem) clamp(5.5rem,10vw,8rem);
  background:var(--ink);
}
.band__bild{position:absolute;inset:0;z-index:-2;display:block;overflow:hidden}
.band::after{content:"";position:absolute;inset:0;z-index:-1}
.band__inhalt{position:relative}
.band h2{color:#E0DBC4}
.band .micro{color:var(--sand-lt)}

/* Werte: Titel oben, die vier Werte unten auf einer Linie. */
.werte::after{
  background:linear-gradient(to bottom,
    rgba(var(--scrim),.62) 0%,
    rgba(var(--scrim),.12) 38%,
    rgba(var(--scrim),.24) 62%,
    rgba(var(--scrim),.88) 100%);
}
.werte .band__inhalt{display:flex;flex-direction:column;justify-content:space-between;gap:5rem}
.werte__titel{margin-top:1rem;font-size:clamp(2.3rem,5vw,4.3rem)}
.werte__liste{
  list-style:none;
  margin:0;padding:0;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0 clamp(1.4rem,3vw,3rem);
}
.wert{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:1.2rem;
  padding-top:clamp(1.6rem,2.6vw,2.2rem);
  border-top:1px solid var(--line-bild);
}
.wert::before{
  content:"";
  position:absolute;
  left:0;top:-1px;
  height:1px;width:100%;
  background:var(--sand-lt);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .9s var(--raus);
}
.wert:hover::before{transform:scaleX(1)}
/* Lordicon spielt beim Zeigen einmal ab. Wichtig: das Band nie per GSAP
   anheften (siehe .werte-spur), sonst liegen mehrere Player uebereinander. */
.wert__ikone{
  display:block;
  width:clamp(56px,5vw,72px);height:clamp(56px,5vw,72px);
  transition:opacity .6s ease;
}
.wert:hover span{letter-spacing:.24em}
.wert span{
  font-size:clamp(1.25rem,2.1vw,1.85rem);
  font-weight:300;
  line-height:1.2;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#E0DBC4;
  transition:opacity .6s ease,letter-spacing .9s var(--raus);
}
/* Desktop mit Skript: das Band klebt oben, waehrend man durch die Spur
   scrollt, und ein Wert nach dem anderen leuchtet auf (app.js). Die Hoehe
   haengt am CSS (html.js aus dem Kopfskript), damit sie schon vor dem
   ersten Zeichnen stimmt - sonst verrutscht die Leseposition nach einem
   Sprachwechsel. Gleiche Bedingung wie in app.js. */
@media (min-width:1024px) and (min-height:640px) and (prefers-reduced-motion:no-preference){
  .js .werte-spur{height:220svh}
  .js .werte-spur .werte{position:sticky;top:0;height:100svh;min-height:0}
}
.werte.ist-gesteuert .wert:not(.ist-an) .wert__ikone{opacity:.28}
.werte.ist-gesteuert .wert:not(.ist-an) span{opacity:.3;letter-spacing:.32em}
.werte.ist-gesteuert .wert.ist-an::before{transform:scaleX(1)}

/* Kontakt: Text unten links, das Bild laeuft nach unten in den Fuss aus. */
.kontakt{min-height:clamp(640px,100svh,980px)}
.kontakt::after{
  background:
    linear-gradient(to right, rgba(var(--scrim),.62) 0%, rgba(var(--scrim),.18) 55%, rgba(var(--scrim),0) 80%),
    linear-gradient(to bottom,
      rgba(var(--scrim),.35) 0%,
      rgba(var(--scrim),.05) 30%,
      rgba(var(--scrim),.55) 62%,
      rgba(25,25,23,.97) 100%);
}
.kontakt__inhalt{align-self:end}
.kontakt__inhalt h2{margin:1rem 0 1.4rem;max-width:18ch}
.kontakt__inhalt p{max-width:44ch;color:#D2CEB9}
.kontakt__aktion{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1.2rem 2.4rem;
  margin-top:2.4rem;
}
.kontakt__mail{
  font-size:clamp(1.15rem,1.8vw,1.45rem);
  font-weight:300;
  letter-spacing:.02em;
  text-decoration:none;
  color:var(--sand-lt);
  padding-bottom:.15em;
  background:
    linear-gradient(var(--sand),var(--sand)) left bottom / 0 1px no-repeat,
    linear-gradient(var(--line),var(--line)) left bottom / 100% 1px no-repeat;
  transition:color .3s ease,background-size .7s var(--raus);
}
.kontakt__mail:hover,.kontakt__mail:focus-visible{color:#E8E4D2;background-size:100% 1px,100% 1px}
.kontakt .band__ort{bottom:auto;top:calc(var(--kopf-h) + 1.4rem)}

/* ---------------------------------------------------------------- About */

/* Bild links bis an den Rand, Text rechts im Raster. */
.about{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(3rem,7vw,7rem);
  align-items:center;
  padding-block:clamp(5rem,10vw,9rem);
  padding-right:calc((100vw - var(--shell)) / 2);
}
.about__bild{margin:0;overflow:hidden;height:clamp(440px,80svh,780px)}
.about__bild img{
  width:100%;
  height:118%;
  object-fit:cover;
  filter:saturate(.72) brightness(.86);
}
.about__text h2{margin:1.1rem 0 1.8rem;max-width:14ch}
.about__text p{max-width:46ch}
.about__text .knopf{margin-top:clamp(1.6rem,3vw,2.4rem)}

/* ---------------------------------------------------------------- Ablauf */

/* Wie Services: Linie nur oben. Folgt direkt das Kontaktband, gleicher
   Abstand wie ueber dem Werte-Band; vor den Referenzen wie bisher knapper. */
.ablauf{
  background:var(--ink-2);
  border-top:1px solid var(--line-soft);
  padding-block:clamp(4.5rem,9vw,8rem);
  --rand:clamp(2rem,4vw,3.4rem);
}
.ablauf:has(+ .referenzen){padding-bottom:clamp(3rem,6vw,5rem)}
.ablauf__raster{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(3rem,7vw,7rem);
  align-items:start;
}

/* Die Buehne klebt, waehrend rechts die Schritte vorbeiziehen. */
.ablauf__buehne{
  position:sticky;
  top:calc(var(--kopf-h) + 4svh);
  height:min(calc(100svh - var(--kopf-h) - 8svh), 780px);
  overflow:hidden;
}
.ablauf__bilder{position:absolute;inset:0}
/* Ohne Skript: einfache Bilder, nur das erste steht. */
.ablauf__bilder > picture > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.ablauf__bilder > picture > img.ist-an{opacity:1}

/* Mit Skript ist jedes Bild in fuenf Streifen geschnitten. Ein neues Bild
   oeffnet sich wie eine Jalousie: Streifen fuer Streifen, abwechselnd von
   unten und von oben, und setzt sich dabei aus der Vergroesserung. Das
   vorige bleibt darunter stehen und dunkelt ab. Die Fotos in den Streifen
   sind so gross wie die ganze Buehne (Container-Einheiten), deshalb setzen
   sich die Streifen nahtlos zusammen. */
.ablauf__bild{position:absolute;inset:0;z-index:0;container-type:size}
.ablauf__bild > span{
  position:absolute;
  top:0;bottom:0;
  left:calc(var(--k) * 20%);
  width:calc(20% + 1px);
  overflow:hidden;
  clip-path:inset(100% 0 0 0);
  transition:clip-path 1.05s var(--raus) calc(var(--k) * .075s);
}
.ablauf__bild > span:nth-child(even){clip-path:inset(0 0 100% 0)}
.ablauf__bild img{
  position:absolute;
  top:0;
  left:calc(var(--k) * -20cqw);
  width:100cqw;height:100cqh;
  max-width:none;
  object-fit:cover;
  transform-origin:calc(50cqw) 50%;
  scale:1.18;
  transition:scale 1.9s var(--raus),filter 1.2s ease;
}
.ablauf__bild.ist-an,.ablauf__bild.war-an{z-index:2}
.ablauf__bild.war-an{z-index:1}
.ablauf__bild.ist-an > span,
.ablauf__bild.war-an > span{clip-path:inset(0 0 0 0)}
.ablauf__bild.ist-an img{scale:1}
.ablauf__bild.war-an img{scale:1.06;filter:brightness(.4)}
.sofort,.sofort *{transition:none!important}
.ablauf__buehne::after{
  content:"";
  position:absolute;inset:0;z-index:3;
  background:linear-gradient(to top, rgba(var(--scrim),.72), rgba(var(--scrim),0) 42%);
  pointer-events:none;
}

/* Grosse Schrittnummer: die Ziffern rollen in einer Maske. */
.ablauf__zahl{
  position:absolute;
  left:clamp(1.2rem,2.6vw,2.2rem);
  bottom:clamp(1rem,2.4vw,2rem);
  z-index:4;
  display:flex;
  align-items:baseline;
  gap:.6rem;
  color:var(--sand-lt);
}
.ablauf__rolle{
  display:block;
  height:1em;
  overflow:hidden;
  font-size:clamp(4rem,8vw,7.5rem);
  font-weight:300;
  line-height:1;
  letter-spacing:-.02em;
}
.ablauf__spalte{
  display:block;
  translate:0 calc(var(--schritt,0) * -1em);
  transition:translate .9s var(--raus);
}
.ablauf__spalte span{display:block;height:1em}
.ablauf__von{font-size:var(--micro);letter-spacing:.26em;color:var(--sand)}

/* Schritte mit Schiene; die Sandlinie fuellt sich mit dem Scrollen. */
.ablauf__schritte{
  position:relative;
  list-style:none;
  margin:0;
  padding:0 0 0 var(--rand);
}
.ablauf__schritte::before,
.ablauf__schritte::after{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;
  width:1px;
  background:var(--line-soft);
}
.ablauf__schritte::after{
  background:var(--sand);
  transform:scaleY(var(--fuellung,1));
  transform-origin:top;
}
.schritt{
  display:flex;
  flex-direction:column;
  justify-content:center;
  min-height:min(72svh,720px);
  transition:opacity .7s ease;
}
.schritt__bild{display:none}
.schritt__nr{
  position:relative;
  display:block;
  margin-bottom:1rem;
  font-size:var(--micro);
  letter-spacing:.3em;
  color:var(--sand);
}
/* Der Punkt sitzt auf der Schiene. */
.schritt__nr::before{
  content:"";
  position:absolute;
  left:calc(-1 * var(--rand) - 5px);
  top:.55em;
  width:11px;height:11px;
  border:1px solid var(--sand);
  border-radius:50%;
  background:var(--ink-2);
  transition:background-color .5s ease,scale .6s var(--raus);
}
.schritt h3{
  margin-bottom:1rem;
  font-size:clamp(1.8rem,3vw,2.6rem);
  line-height:1.12;
  letter-spacing:-.01em;
  transition:translate .8s var(--raus);
}
.schritt p{max-width:36ch}
.schritt.ist-an .schritt__nr::before{background:var(--sand);scale:1.25}
@media (min-width:901px){
  .ablauf.ist-gesteuert .schritt:not(.ist-an){opacity:.28}
  .ablauf.ist-gesteuert .schritt:not(.ist-an) h3{translate:-.3em 0}
}

/* ---------------------------------------------------------------- Referenzen */

.referenzen{padding-block:clamp(4.5rem,9vw,8rem);border-top:1px solid var(--line-soft)}
.referenzen h2{margin:1.1rem 0 clamp(2rem,4vw,3rem)}
.projekt{margin-bottom:clamp(3rem,6vw,5rem)}
.projekt:last-child{margin-bottom:0}
.projekt__rahmen{overflow:hidden;height:clamp(320px,68svh,720px)}
.projekt__rahmen img{
  width:100%;
  height:120%;
  object-fit:cover;
  filter:saturate(.7) brightness(.82);
  transition:filter .9s ease;
}
.projekt:hover .projekt__rahmen img{filter:saturate(.95) brightness(.96)}
.projekt__zeile{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:baseline;
  gap:.3rem 2rem;
  margin-top:1.15rem;
  padding-top:1.15rem;
}
.projekt__zeile::before{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:1px;
  background:var(--line-soft);
}
.projekt__zeile::after{
  content:"";
  position:absolute;
  left:0;right:0;top:0;
  height:1px;
  background:var(--sand);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 1s var(--raus);
}
.projekt:hover .projekt__zeile::after{transform:scaleX(1)}
.projekt__nr{font-size:var(--micro);letter-spacing:.26em;color:var(--sand)}
.projekt h3{transition:translate .6s var(--raus),color .3s ease}
.projekt:hover h3{translate:.4em 0;color:#E8E4D2}

/* ---------------------------------------------------------------- Fuss */

/* Eigener Grund wie die feste Kopfleiste. position: relative legt den Fuss
   ueber das Kontaktband davor, falls dessen Bild je ueber den Rand ragte
   (heute schneidet .band mit overflow: hidden ab). */
.fuss{position:relative;padding:2.2rem 0 2.8rem;border-top:1px solid var(--line-soft);background:var(--ink)}
.fuss__in{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:baseline;
  gap:1rem 2.4rem;
  font-size:var(--micro);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
}
.fuss__links{display:flex;flex-wrap:wrap;gap:.6rem 1.8rem}
.fuss a{
  color:var(--muted);
  text-decoration:none;
  border-bottom:1px solid transparent;
  padding-bottom:.2em;
  transition:color .3s ease,border-color .3s ease;
}
.fuss a:hover,.fuss a:focus-visible{color:var(--sand);border-bottom-color:var(--line)}

/* ---------------------------------------------------------------- Rechtsseiten */

/* Reine Lesespalte unter der festen Kopfleiste. */
.recht{padding-block:calc(var(--kopf-h) + clamp(3.5rem,8vw,6rem)) clamp(4rem,8vw,6.5rem)}
.recht h1{
  margin:1.1rem 0 clamp(2rem,4vw,2.8rem);
  max-width:20ch;
  font-size:clamp(2.2rem,4.7vw,4rem);
  line-height:1.08;
  letter-spacing:-.016em;
  color:var(--titel);
}
.recht h2{margin:clamp(2.2rem,4vw,3rem) 0 .7rem;font-size:1.3rem;line-height:1.34;letter-spacing:0}
.recht p{max-width:68ch}
.recht__lead{color:var(--sand-lt);max-width:60ch}
.recht__hinweis{color:var(--muted);font-size:1rem}
.recht__adresse{line-height:1.9}
.recht__stand{margin-top:clamp(2.4rem,5vw,3.4rem);padding-top:1.2rem;border-top:1px solid var(--line-soft)}
.recht a{color:var(--sand-lt);text-decoration:none;border-bottom:1px solid var(--line);transition:color .3s ease,border-color .3s ease}
.recht a:hover,.recht a:focus-visible{color:#E4E0CC;border-bottom-color:var(--sand)}

/* ---------------------------------------------------------------- Maskierte Zeilen */

/* SplitText legt jede Zeile in eine Maske; das Padding verhindert, dass
   Unterlaengen abgeschnitten werden. */
.zeilen-maske{padding-bottom:.08em;margin-bottom:-.08em}

/* ---------------------------------------------------------------- Tablet */

/* Enger setzen, damit fuenf Menuepunkte nicht an die Sprachwahl stossen. */
@media (max-width:1400px){
  .menue__links{gap:1.9rem}
}

@media (max-width:1260px){
  :root{--kopf-h:4.4rem}
  .burger{display:block}

  /* Die Tafel deckt alles ab; visibility verhindert, dass die geschlossene
     Tafel per Tabulator erreichbar bleibt. Die Punkte laufen gestaffelt ein. */
  .menue{
    position:fixed;
    inset:0;
    z-index:60;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:3rem;
    background:var(--ink);
    clip-path:inset(0 0 100% 0);
    visibility:hidden;
    transition:clip-path .7s var(--raus),visibility 0s linear .7s;
  }
  .menue.ist-offen{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .7s var(--raus),visibility 0s}
  .menue__links{position:static;transform:none;flex-direction:column;align-items:center;gap:1.1rem}
  .menue__links a{font-size:clamp(1.6rem,6vw,2.2rem);font-weight:300;letter-spacing:.14em;text-indent:.14em}
  .menue__links a,.menue__meta{opacity:0;translate:0 1.2rem;transition:opacity .5s ease,translate .7s var(--raus)}
  .menue.ist-offen .menue__links a,.menue.ist-offen .menue__meta{opacity:1;translate:0 0}
  .menue.ist-offen .menue__links a:nth-child(1){transition-delay:.15s}
  .menue.ist-offen .menue__links a:nth-child(2){transition-delay:.21s}
  .menue.ist-offen .menue__links a:nth-child(3){transition-delay:.27s}
  .menue.ist-offen .menue__links a:nth-child(4){transition-delay:.33s}
  .menue.ist-offen .menue__links a:nth-child(5){transition-delay:.39s}
  .menue.ist-offen .menue__meta{transition-delay:.45s}
  /* Fingerziele: mindestens 44px hoch. */
  .menue a{padding-block:.35em}
  .menue a::after{bottom:.2em}
  .menue__meta{
    flex-direction:column;
    gap:1.4rem;
    padding-top:2.2rem;
    border-top:1px solid var(--line-soft);
  }
  .sprachen{gap:1.6rem}

  .leistungen{grid-template-columns:repeat(2,minmax(0,1fr))}
  .leistung:nth-child(3){border-left:0}
  .leistung:nth-child(n+3){border-top:1px solid var(--line-soft)}
  .werte__liste{grid-template-columns:repeat(2,minmax(0,1fr));gap:2.4rem clamp(1.4rem,3vw,3rem)}
}

/* Ablauf schmal: keine Buehne, jeder Schritt zeigt sein eigenes Bild. */
@media (max-width:900px){
  .ablauf__raster{grid-template-columns:1fr}
  .ablauf__buehne{display:none}
  .schritt{min-height:0;padding-block:0 3rem}
  .schritt:last-child{padding-bottom:0}
  .schritt__bild{
    display:block;
    width:100%;
    aspect-ratio:4 / 3;
    object-fit:cover;
    margin-bottom:1.6rem;
  }
  .schritt__nr::before{top:.55em}
}

/* ---------------------------------------------------------------- Handy */

@media (max-width:760px){
  body{font-size:1.1rem}
  /* Lange deutsche Komposita ("Immobilienentscheidung") passen sonst nicht
     in die Zeilenmaske und wuerden abgeschnitten. */
  h2{font-size:clamp(1.75rem,7.2vw,2.3rem);-webkit-hyphens:auto;hyphens:auto}
  .hero__inhalt{padding:calc(var(--kopf-h) + 2svh) 7vw 12svh}
  .logo__name{font-size:clamp(2.2rem,11vw,2.9rem);letter-spacing:.26em;text-indent:.26em}
  .logo__sub{letter-spacing:.36em;text-indent:.36em;font-size:.74rem;animation-name:einblenden}
  .hero__claim{font-size:clamp(1rem,4.7vw,1.2rem);letter-spacing:.16em;text-indent:.16em}
  /* Untereinander statt mit Punkten: beim Umbruch bliebe sonst ein Punkt
     am Zeilenanfang haengen. */
  .hero__werte{flex-direction:column;align-items:center;gap:.15em;font-size:.74rem;letter-spacing:.24em;text-indent:.24em}
  .hero__werte span + span::before{content:none}
  .hero__flaggen{margin-top:1.3rem}

  .profil,.kopfzeile{grid-template-columns:1fr}
  .profil{gap:1.8rem}

  .services{--spalte:0px}
  .leistungen{grid-template-columns:1fr}
  .leistungen::before{content:none}
  .leistung,
  .leistung:nth-child(3){padding:1.8rem 0 2rem;border-left:0;border-top:1px solid var(--line-soft)}
  .leistung + .leistung{border-left:0}
  .leistung__nr{margin-bottom:1rem}

  .werte .band__inhalt{gap:3.5rem}
  .werte__liste{gap:2rem 1.2rem}
  .wert span{letter-spacing:.14em}
  .kontakt .band__ort{display:none}

  .about{grid-template-columns:1fr;padding-right:0;padding-top:0;gap:2.6rem}
  .about__bild{height:min(118vw,560px)}
  .about__text{width:var(--shell);margin-inline:auto}

  .projekt__zeile{grid-template-columns:auto 1fr}
  .projekt__zeile .micro{grid-column:1 / -1}

  .kontakt__aktion{flex-direction:column;align-items:flex-start}
  .fuss__in{flex-direction:column;align-items:flex-start}
}

/* Niedrige Schirme (Handy quer): Hero zusammenziehen. */
@media (max-height:560px) and (orientation:landscape){
  .logo__sonne{width:56px}
  .logo__name{font-size:2rem;margin-top:.8rem}
  .hero__claim{margin-top:1.2rem;font-size:.95rem}
  .hero__claim::before{margin-bottom:1rem}
  .hero__werte{margin-top:1rem}
  .hero__flaggen{margin-top:.8rem;scale:.75}
}

/* ---------------------------------------------------------------- Sprachwechsel */

/* Wechsel der Sprache als Ueberblendung statt als neues Laden: die
   Kopfleiste bleibt stehen, der Inhalt blendet kurz ueber (Chrome, Edge,
   Safari; die Seite wird dabei per Speculation Rules vorab geladen). */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  .kopf{view-transition-name:kopf}
  /* Offene Menuetafel: sie gehoert zur Seite und blendet mit ihr aus. */
  .kopf.menue-offen{view-transition-name:none}
  ::view-transition-group(*){animation-duration:.3s}
}

/* Nach einem Sprachwechsel steht der Einstieg sofort fertig da; die
   endlosen Bewegungen (Sonne, Hof, Bildwechsel) laufen weiter. */
.ist-wechsel .intro{display:none}
.ist-wechsel .kopf,
.ist-wechsel .hero__bild img,
.ist-wechsel .logo__sonne,
.ist-wechsel .logo__name > span,
.ist-wechsel .logo__sub,
.ist-wechsel .hero__claim::before,
.ist-wechsel .zeile > span,
.ist-wechsel .hero__werte span,
.ist-wechsel .hero__flaggen{animation:none}
/* Die ersten Augenblicke danach ohne Uebergaenge (Kopfleiste, Buehne, Werte
   springen direkt in den Zustand der Leseposition). */
.ist-ankunft *,.ist-ankunft *::before,.ist-ankunft *::after{transition:none!important}
/* Vorab geladene Seite: nichts laeuft, bis sie wirklich gezeigt wird. */
.ist-vorab *,.ist-vorab *::before,.ist-vorab *::after{animation-play-state:paused!important}

/* ---------------------------------------------------------------- Ruhe */

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}