:root{
    --cream:#FAF8F5; --cream-2:#F2EEE8; --ink:#1F1E1C; --ink-soft:#3A3835;
    --sand:#A6815C; --sand-deep:#8C6A47; --gold:#EAD9C4; --grey:#8A8580;
    --line:rgba(31,30,28,.14);
    --serif:'Fraunces',Georgia,serif; --sans:'Inter',-apple-system,sans-serif;
    --maxw:1280px; --ease:cubic-bezier(.22,.61,.36,1);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html.lenis,html.lenis body{height:auto}
  .lenis.lenis-smooth{scroll-behavior:auto!important}
  .lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
  html{scroll-behavior:smooth}
  body{font-family:var(--sans);color:var(--ink);background:var(--cream);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.08;letter-spacing:-.01em}
  img{display:block;max-width:100%}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,64px)}
  .eyebrow{font-family:var(--sans);font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:var(--sand-deep);font-weight:500}

  /* overlays */
  .grain{position:fixed;inset:-60%;width:220%;height:220%;pointer-events:none;z-index:60;opacity:.085;mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation:grain 1.2s steps(4) infinite}
  @keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-2%)}100%{transform:translate(3%,3%)}}
  .vignette{position:fixed;inset:0;pointer-events:none;z-index:59;background:radial-gradient(130% 130% at 50% 45%,transparent 56%,rgba(20,19,17,.32))}

  /* custom cursor (deaktiviert) */
  .cursor,.cursor-txt{display:none!important}
  .cursor{width:9px;height:9px;border-radius:50%;background:var(--gold);transform:translate(-50%,-50%);
    transition:width .35s var(--ease),height .35s var(--ease),background .35s,opacity .3s,border-color .3s;mix-blend-mode:difference}
  .cursor.lg{width:96px;height:96px;background:transparent;border:1px solid rgba(255,255,255,.9)}
  .cursor.sm{width:46px;height:46px;background:transparent;border:1px solid var(--gold)}
  .cursor-txt{transform:translate(-50%,-50%);color:#fff;font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:0;transition:opacity .3s}
  .cursor-txt.show{opacity:1}
  html.has-cursor *{cursor:none!important}

  /* buttons */
  .btn{display:inline-flex;align-items:center;gap:.6em;font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:.04em;
    padding:16px 30px;border-radius:2px;cursor:pointer;border:1px solid var(--ink);background:var(--ink);color:var(--cream);
    transition:background .4s var(--ease),color .4s var(--ease);position:relative}
  .btn:hover{background:transparent;color:var(--ink)}
  .btn--light{background:var(--cream);color:var(--ink);border-color:var(--cream)}
  .btn--light:hover{background:transparent;color:var(--cream);border-color:var(--cream)}
  .btn--ghost{background:transparent;color:var(--cream);border-color:rgba(255,255,255,.5)}
  .btn--ghost:hover{background:var(--cream);color:var(--ink);border-color:var(--cream)}

  /* header */
  header{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;
    padding:24px clamp(20px,5vw,64px);transition:all .5s var(--ease)}
  header.scrolled{background:rgba(250,248,245,.86);backdrop-filter:blur(16px);padding:14px clamp(20px,5vw,64px);box-shadow:0 1px 0 var(--line)}
  .brand{display:flex;flex-direction:column;line-height:1;color:var(--cream);transition:color .5s var(--ease)}
  header.scrolled .brand{color:var(--ink)}
  .brand b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:26px}
  .brand span{font-size:10px;letter-spacing:.42em;text-transform:uppercase;margin-top:4px;padding-left:2px;font-weight:500}
  nav{display:flex;align-items:center;gap:34px}
  nav a.navlink{font-size:14px;letter-spacing:.04em;color:var(--cream);position:relative;transition:color .5s var(--ease)}
  header.scrolled nav a.navlink{color:var(--ink-soft)}
  nav a.navlink::after{content:"";position:absolute;left:0;bottom:-5px;width:0;height:1px;background:currentColor;transition:width .4s var(--ease)}
  nav a.navlink:hover::after{width:100%}
  .nav-cta{font-size:13px;letter-spacing:.06em;padding:11px 22px;border:1px solid currentColor;border-radius:2px;color:var(--cream);transition:all .4s var(--ease)}
  header.scrolled .nav-cta{color:var(--ink)}
  .nav-cta:hover{background:var(--cream);color:var(--ink);border-color:var(--cream)}
  header.scrolled .nav-cta:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}
  .burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:6px}
  .burger span{width:26px;height:2px;background:var(--cream);transition:all .4s var(--ease)}
  header.scrolled .burger span{background:var(--ink)}

  /* hero */
  .hero{position:relative;height:100vh;min-height:620px;display:flex;align-items:flex-end;overflow:hidden}
  .hero-media{position:absolute;inset:0;z-index:-2;will-change:transform}
  .hero-slide{position:absolute;inset:0;opacity:0;animation:heroFade 21s linear infinite}
  .hero-slide:nth-child(1){animation-delay:0s}
  .hero-slide:nth-child(2){animation-delay:7s}
  .hero-slide:nth-child(3){animation-delay:14s}
  .hero-slide img{width:100%;height:100%;object-fit:cover;transform:scale(1.0);animation:kb 24s ease-in-out infinite}
  @keyframes kb{0%,100%{transform:scale(1.0)}50%{transform:scale(1.06)}}
  @keyframes heroFade{0%{opacity:0}4%{opacity:1}30%{opacity:1}37%{opacity:0}100%{opacity:0}}
  .hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(20,19,17,.8) 0%,rgba(20,19,17,.28) 44%,rgba(20,19,17,.2) 100%)}
  .hero-inner{color:var(--cream);padding-bottom:clamp(56px,9vh,120px);max-width:960px;will-change:transform,opacity}
  .hero .eyebrow{color:var(--gold);margin-bottom:22px;opacity:0;transform:translateY(20px);animation:rise .9s var(--ease) .3s forwards}
  .hero h1{font-size:clamp(46px,8vw,120px);font-weight:300;letter-spacing:-.02em}
  .hero h1 .ln{display:block;overflow:hidden}
  .hero h1 .ln i{display:block;font-style:normal;transform:translateY(110%);animation:rise 1.1s var(--ease) forwards}
  .hero h1 .ln:nth-child(1) i{animation-delay:.45s}
  .hero h1 .ln:nth-child(2) i{animation-delay:.62s;font-style:italic;color:var(--gold)}
  .hero p.sub{font-size:clamp(16px,1.5vw,20px);max-width:560px;margin:26px 0 36px;color:rgba(255,255,255,.86);font-weight:300;opacity:0;transform:translateY(20px);animation:rise .9s var(--ease) .95s forwards}
  .hero .hero-cta{opacity:0;transform:translateY(20px);animation:rise .9s var(--ease) 1.1s forwards;display:flex;gap:16px;flex-wrap:wrap}
  @keyframes rise{to{opacity:1;transform:translateY(0)}}
  .scroll-hint{position:absolute;right:clamp(20px,5vw,64px);bottom:46px;z-index:2;color:var(--cream);font-size:11px;letter-spacing:.28em;text-transform:uppercase;opacity:0;animation:rise 1s var(--ease) 1.4s forwards;writing-mode:vertical-rl}
  .scroll-hint::after{content:"";display:block;width:1px;height:54px;margin-top:12px;background:linear-gradient(var(--cream),transparent);animation:scrolldot 2.4s ease-in-out infinite}
  @keyframes scrolldot{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}50.1%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

  /* reveal */
  .reveal{opacity:0;transform:translateY(42px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
  .reveal.in{opacity:1;transform:none}
  .reveal.d1{transition-delay:.12s}.reveal.d2{transition-delay:.24s}.reveal.d3{transition-delay:.36s}
  /* Clip-Wipe auf das innere Bild legen (nicht auf den Container!),
     sonst misst der IntersectionObserver 0 Fläche und der Reveal blockiert sich selbst. */
  .clip{overflow:hidden}
  .clip img{clip-path:inset(0 0 100% 0);transform:scale(1.12);transition:clip-path 1.2s var(--ease),transform 1.6s var(--ease)}
  .clip.in img{clip-path:inset(0 0 0 0);transform:scale(1)}

  /* framed signature */
  .framed{position:relative}
  .framed .corner{position:absolute;width:26px;height:26px;border:1.5px solid var(--gold);opacity:0;transition:opacity .6s var(--ease) .5s}
  .framed.in .corner{opacity:1}
  .framed .c-tl{top:14px;left:14px;border-right:0;border-bottom:0}
  .framed .c-tr{top:14px;right:14px;border-left:0;border-bottom:0}
  .framed .c-bl{bottom:14px;left:14px;border-right:0;border-top:0}
  .framed .c-br{bottom:14px;right:14px;border-left:0;border-top:0}

  section{position:relative}
  .sec-pad{padding:clamp(80px,12vh,160px) 0}
  .sec-head{max-width:760px;margin-bottom:clamp(40px,6vw,72px)}
  .sec-head .eyebrow{display:block;margin-bottom:18px}
  .sec-head h2{font-size:clamp(32px,4.6vw,60px);font-weight:300}
  .sec-head h2 em{font-style:italic;color:var(--sand-deep)}
  .sec-head p{margin-top:22px;font-size:18px;color:var(--ink-soft);max-width:600px}

  /* intro */
  .intro{background:var(--cream)}
  .intro .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,90px);align-items:center}
  .intro-figure{position:relative;aspect-ratio:4/5;overflow:hidden}
  .intro-figure img{width:100%;height:100%;object-fit:cover}
  .intro-quote{font-family:var(--serif);font-size:clamp(26px,3.4vw,46px);font-weight:300;line-height:1.22}
  .intro-quote em{font-style:italic;color:var(--sand-deep)}
  .intro-text{margin-top:28px;font-size:17px;color:var(--ink-soft);max-width:480px}
  .sig{margin-top:30px;font-family:var(--serif);font-style:italic;font-size:26px}

  /* marquee */
  .marquee{background:var(--ink);color:var(--cream);padding:32px 0;overflow:hidden;white-space:nowrap;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
  .marquee-track{display:inline-flex;align-items:center;gap:0;animation:marq 34s linear infinite}
  .marquee-track span{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(34px,5vw,72px);padding:0 .4em;color:var(--cream)}
  .marquee-track .out{color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.5)}
  .marquee-track .dot{font-size:clamp(20px,3vw,36px);color:var(--sand);font-style:normal}
  @keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  /* statement section – grosser, eleganter Gold-Schriftzug */
  .masked{background:var(--ink);text-align:center;padding:clamp(90px,17vh,180px) 24px;display:flex;flex-direction:column;align-items:center;gap:20px;overflow:hidden}
  .masked .eyebrow{color:var(--gold)}
  .masked-word{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(80px,18vw,280px);line-height:.96;letter-spacing:-.02em;
    background:linear-gradient(175deg,#FBF1E2 0%,var(--gold) 52%,var(--sand) 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
  .masked p{color:rgba(255,255,255,.62);max-width:520px;font-size:17px;font-weight:300;padding:0 20px;margin-top:6px}

  /* horizontal cinematic gallery */
  .hg{background:var(--cream-2);position:relative}
  .hg-head{padding-top:clamp(80px,12vh,150px);padding-bottom:48px}
  .hg-head .eyebrow{display:block;margin-bottom:18px}
  .hg-head h2{font-size:clamp(32px,4.6vw,60px);font-weight:300}
  .hg-head h2 em{font-style:italic;color:var(--sand-deep)}
  .hg-head p{margin-top:18px;color:var(--ink-soft);max-width:560px}
  .filters{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px}
  .filter{font-family:var(--sans);font-size:13px;letter-spacing:.05em;padding:10px 22px;border:1px solid var(--line);border-radius:40px;background:transparent;color:var(--ink-soft);cursor:pointer;transition:all .35s var(--ease)}
  .filter:hover{border-color:var(--ink)}
  .filter.active{background:var(--ink);color:var(--cream);border-color:var(--ink)}
  .hg-pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
  .hg-track{display:flex;gap:22px;padding:0 clamp(20px,8vw,140px);will-change:transform}
  .htile{position:relative;flex:0 0 auto;height:70vh;overflow:hidden;cursor:pointer;background:var(--cream)}
  .htile img{height:100%;width:auto;object-fit:cover;transition:transform 1.2s var(--ease)}
  .htile:hover img{transform:scale(1.05)}
  .htile .cap{position:absolute;left:0;right:0;bottom:0;padding:20px 22px;color:#fff;font-size:13px;letter-spacing:.04em;background:linear-gradient(transparent,rgba(20,19,17,.72));opacity:0;transform:translateY(10px);transition:all .5s var(--ease)}
  .htile:hover .cap{opacity:1;transform:none}
  .htile.hide{display:none}
  .hg-progress{position:absolute;left:clamp(20px,8vw,140px);right:clamp(20px,8vw,140px);bottom:46px;height:1px;background:rgba(31,30,28,.16)}
  .hg-progress span{display:block;height:100%;width:0;background:var(--sand-deep)}
  .hg-count{position:absolute;right:clamp(20px,8vw,140px);bottom:58px;font-size:12px;letter-spacing:.2em;color:var(--ink-soft)}

  /* bereiche */
  .bereiche{background:var(--cream)}
  .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,28px)}
  .card-img{position:relative;aspect-ratio:4/5;overflow:hidden;margin-bottom:22px}
  .card-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
  .card:hover .card-img img{transform:scale(1.05)}
  .card-num{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--sand-deep)}
  .card h3{font-size:26px;margin:6px 0 10px;font-weight:400}
  .card p{font-size:15px;color:var(--ink-soft)}

  /* trust */
  .trust{position:relative;color:var(--cream);overflow:hidden}
  .trust-media{position:absolute;inset:-10% 0;z-index:-2;will-change:transform}
  .trust-media img{width:100%;height:120%;object-fit:cover;object-position:center 40%}
  .trust::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(20,19,17,.84),rgba(20,19,17,.45) 60%,rgba(20,19,17,.2))}
  .trust .wrap{padding:clamp(90px,16vh,200px) 0}
  .trust h2{font-size:clamp(30px,4.4vw,56px);font-weight:300;max-width:680px}
  .trust h2 em{font-style:italic;color:var(--gold)}
  .trust p{margin-top:24px;max-width:520px;color:rgba(255,255,255,.85);font-size:18px;font-weight:300}

  /* warum */
  .warum{background:var(--cream-2)}
  .warum-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,36px)}
  .why{padding-top:26px;border-top:1px solid var(--line)}
  .why .n{font-family:var(--serif);font-style:italic;color:var(--sand-deep);font-size:18px}
  .why h3{font-size:21px;font-weight:400;margin:12px 0 10px}
  .why p{font-size:15px;color:var(--ink-soft)}

  /* stimmen */
  .stimmen{background:var(--cream)}
  .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px)}
  .quote{background:var(--cream-2);padding:38px 32px;border-radius:3px}
  .stars{color:var(--sand);letter-spacing:3px;font-size:14px}
  .quote blockquote{font-family:var(--serif);font-size:19px;font-weight:300;line-height:1.5;margin:18px 0 22px;font-style:italic}
  .quote .who{font-size:14px;color:var(--ink-soft)}
  .placeholder-note{margin-top:34px;font-size:13px;color:var(--grey);text-align:center;font-style:italic}
  .ig-line{margin-top:40px;text-align:center;font-size:15px}
  .ig-line a{color:var(--sand-deep);border-bottom:1px solid var(--sand);padding-bottom:2px}

  /* kontakt */
  .kontakt{background:var(--ink);color:var(--cream)}
  .kontakt .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px)}
  .kontakt h2{font-size:clamp(32px,4.6vw,58px);font-weight:300}
  .kontakt h2 em{font-style:italic;color:var(--gold)}
  .kontakt .lead{margin-top:22px;color:rgba(255,255,255,.78);max-width:420px;font-weight:300;font-size:17px}
  .contact-meta{margin-top:38px;display:flex;flex-direction:column;gap:14px}
  .contact-meta a{display:flex;align-items:center;gap:14px;font-size:16px;color:rgba(255,255,255,.92);transition:color .3s}
  .contact-meta a:hover{color:var(--gold)}
  .contact-meta .ic{width:18px;height:18px;opacity:.7;flex-shrink:0}
  form{display:flex;flex-direction:column;gap:18px}
  .field{display:flex;flex-direction:column;gap:8px}
  .field label{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.6)}
  .field input,.field select,.field textarea{background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.28);color:var(--cream);font-family:var(--sans);font-size:16px;padding:10px 2px;transition:border-color .3s}
  .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold)}
  .field select option{color:#000}
  .field textarea{resize:vertical;min-height:80px}
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
  form .btn{margin-top:8px;align-self:flex-start}
  .micro{font-size:13px;color:rgba(255,255,255,.55);margin-top:4px}

  footer{background:var(--ink);color:rgba(255,255,255,.6);border-top:1px solid rgba(255,255,255,.1)}
  footer .wrap{padding:46px 0;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
  footer .brand b{color:var(--cream)} footer .brand span{color:rgba(255,255,255,.5)}
  footer .f-links{display:flex;gap:24px;font-size:13px}
  footer .f-links a:hover{color:var(--cream)}
  footer .copy{font-size:12px;width:100%;text-align:center;padding-top:24px;margin-top:24px;border-top:1px solid rgba(255,255,255,.08)}

  /* lightbox */
  .lb{position:fixed;inset:0;z-index:200;background:rgba(18,17,15,.96);display:none;align-items:center;justify-content:center;padding:5vh 4vw}
  .lb.open{display:flex}
  .lb img{max-width:100%;max-height:90vh;object-fit:contain;box-shadow:0 30px 80px rgba(0,0,0,.5)}
  .lb-close,.lb-nav{position:absolute;background:none;border:none;color:rgba(255,255,255,.8);cursor:pointer;transition:color .3s}
  .lb-close{top:26px;right:30px;font-size:34px} .lb-close:hover,.lb-nav:hover{color:#fff}
  .lb-nav{top:50%;transform:translateY(-50%);font-size:46px;padding:10px 18px}
  .lb-prev{left:10px}.lb-next{right:10px}
  .lb-cap{position:absolute;bottom:24px;left:0;right:0;text-align:center;color:rgba(255,255,255,.7);font-size:13px;letter-spacing:.04em}

  /* mobile */
  @media(max-width:880px){
    nav{position:fixed;inset:0;background:var(--ink);flex-direction:column;justify-content:center;gap:30px;transform:translateX(100%);transition:transform .5s var(--ease);z-index:99}
    nav.open{transform:none}
    nav a.navlink,header.scrolled nav a.navlink{color:var(--cream);font-size:22px;font-family:var(--serif)}
    .nav-cta,header.scrolled .nav-cta{color:var(--cream);font-size:15px}
    .burger{display:flex;z-index:101}
    .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
    .burger.open span:nth-child(2){opacity:0}
    .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
    .burger.open span,header.scrolled .burger.open span{background:var(--cream)}
    .intro .wrap,.kontakt .wrap{grid-template-columns:1fr}
    .cards,.quotes{grid-template-columns:1fr}
    .warum-grid{grid-template-columns:1fr 1fr}
    .row2{grid-template-columns:1fr}
    .scroll-hint{display:none}
    /* horizontal gallery -> swipe strip */
    .hg-pin{position:static;height:auto;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:30px;scroll-snap-type:x mandatory}
    .hg-track{transform:none!important;padding:0 20px}
    .htile{height:60vh;scroll-snap-align:center}
    .hg-progress,.hg-count{display:none}
    .masked-word{background-size:auto 130%}
  }
  @media(max-width:520px){ .warum-grid{grid-template-columns:1fr} .htile{height:52vh} }
  @media(prefers-reduced-motion:reduce){
    *{animation-duration:.001s!important;animation-iteration-count:1!important}
    .reveal,.clip{opacity:1;transform:none;clip-path:none}
    .clip img{clip-path:none;transform:none}
    .hero h1 .ln i{transform:none}
  }

  /* ============ PRELOADER ============ */
  .preloader{position:fixed;inset:0;z-index:300;background:var(--cream);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;animation:plOut .9s var(--ease) 1.7s forwards}
  .pl-brand{font-family:var(--serif);font-style:italic;font-size:clamp(34px,6vw,64px);color:var(--ink);opacity:0;transform:translateY(14px);animation:plIn 1s var(--ease) .15s forwards}
  .pl-sub{font-size:11px;letter-spacing:.42em;text-transform:uppercase;color:var(--sand-deep);opacity:0;animation:plIn 1s var(--ease) .45s forwards}
  .pl-line{height:1px;width:0;background:var(--sand);margin-top:6px;animation:plLine 1.3s var(--ease) .5s forwards}
  @keyframes plIn{to{opacity:1;transform:none}}
  @keyframes plLine{to{width:min(220px,50vw)}}
  @keyframes plOut{to{transform:translateY(-101%);visibility:hidden}}

  /* ============ BREADCRUMB ============ */
  .crumb{font-size:12px;letter-spacing:.06em;color:rgba(255,255,255,.7);display:flex;gap:10px;align-items:center}
  .crumb a:hover{color:#fff}
  .crumb .sep{opacity:.5}

  /* ============ PAGE HERO (subpages) ============ */
  .phero{position:relative;height:82vh;min-height:560px;display:flex;align-items:flex-end;overflow:hidden}
  .phero-media{position:absolute;inset:0;z-index:-2;will-change:transform}
  .phero-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);animation:kb 22s ease-in-out infinite}
  .phero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(20,19,17,.82) 0%,rgba(20,19,17,.3) 50%,rgba(20,19,17,.25) 100%)}
  .phero-inner{color:var(--cream);padding-bottom:clamp(48px,8vh,96px);max-width:900px}
  .phero .eyebrow{color:var(--gold);display:block;margin:18px 0 16px}
  .phero h1{font-size:clamp(40px,6.4vw,92px);font-weight:300;letter-spacing:-.02em}
  .phero h1 em{font-style:italic;color:var(--gold)}
  .phero p.sub{font-size:clamp(16px,1.5vw,20px);max-width:560px;margin-top:22px;color:rgba(255,255,255,.86);font-weight:300}

  /* ============ SERVICE INTRO ============ */
  .sintro{background:var(--cream)}
  .sintro .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(36px,6vw,90px);align-items:center}
  .sintro h2{font-size:clamp(28px,3.6vw,46px);font-weight:300;line-height:1.14}
  .sintro h2 em{font-style:italic;color:var(--sand-deep)}
  .sintro p{margin-top:22px;font-size:17px;color:var(--ink-soft)}
  .sintro .stat{display:flex;gap:40px;margin-top:36px;flex-wrap:wrap}
  .sintro .stat b{font-family:var(--serif);font-style:italic;font-size:40px;font-weight:300;color:var(--ink);display:block}
  .sintro .stat span{font-size:13px;letter-spacing:.04em;color:var(--grey)}
  .sintro-figure{position:relative;aspect-ratio:4/5;overflow:hidden}
  .sintro-figure img{width:100%;height:100%;object-fit:cover}

  /* ============ MASONRY GALLERY (subpages) ============ */
  .mgrid{column-count:3;column-gap:16px}
  .mtile{position:relative;overflow:hidden;cursor:pointer;background:var(--cream);break-inside:avoid;margin:0 0 16px}
  .mtile img{width:100%;height:auto;display:block;transition:transform 1.1s var(--ease)}
  .mtile:hover img{transform:scale(1.06)}
  .mtile .cap{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;color:#fff;font-size:12px;letter-spacing:.04em;background:linear-gradient(transparent,rgba(20,19,17,.7));opacity:0;transform:translateY(8px);transition:all .5s var(--ease)}
  .mtile:hover .cap{opacity:1;transform:none}
  .mtile.hide{display:none}

  /* ============ ABLAUF TIMELINE ============ */
  .ablauf{background:var(--cream-2)}
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,40px)}
  .step{position:relative;padding-top:30px;border-top:1px solid var(--line)}
  .step .sn{font-family:var(--serif);font-style:italic;font-size:34px;font-weight:300;color:var(--sand);line-height:1}
  .step h3{font-size:20px;font-weight:400;margin:16px 0 10px}
  .step p{font-size:15px;color:var(--ink-soft)}

  /* ============ FAQ ============ */
  .faq{background:var(--cream)}
  .faq-wrap{max-width:860px;margin:0 auto}
  .faq-item{border-bottom:1px solid var(--line)}
  .faq-q{width:100%;text-align:left;background:none;border:none;cursor:pointer;padding:28px 0;display:flex;justify-content:space-between;align-items:center;gap:24px;font-family:var(--serif);font-size:clamp(19px,2.2vw,26px);font-weight:400;color:var(--ink)}
  .faq-q .pm{flex-shrink:0;width:22px;height:22px;position:relative;transition:transform .4s var(--ease)}
  .faq-q .pm::before,.faq-q .pm::after{content:"";position:absolute;background:var(--sand-deep);transition:opacity .3s}
  .faq-q .pm::before{left:0;top:10px;width:22px;height:1.5px}
  .faq-q .pm::after{left:10px;top:0;width:1.5px;height:22px}
  .faq-item.open .faq-q .pm::after{opacity:0}
  .faq-a{max-height:0;overflow:hidden;transition:max-height .5s var(--ease)}
  .faq-a p{padding:0 0 28px;font-size:16px;color:var(--ink-soft);max-width:680px}

  /* ============ CTA BAND ============ */
  .ctaband{background:var(--ink);color:var(--cream);text-align:center}
  .ctaband .wrap{padding:clamp(70px,12vh,140px) 0}
  .ctaband h2{font-size:clamp(30px,4.4vw,58px);font-weight:300}
  .ctaband h2 em{font-style:italic;color:var(--gold)}
  .ctaband p{margin:20px auto 34px;max-width:480px;color:rgba(255,255,255,.78);font-weight:300}

  /* ============ CROSS LINKS ============ */
  .xlinks{background:var(--cream)}
  .xgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
  .xcard{position:relative;aspect-ratio:16/10;overflow:hidden;display:flex;align-items:flex-end;color:#fff;text-decoration:none;background:var(--ink)}
  .xcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
  .xcard::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(20,19,17,.82),rgba(20,19,17,.12))}
  .xcard:hover img{transform:scale(1.06)}
  .xcard .xc{position:relative;z-index:2;padding:30px 32px}
  .xcard .xc span{font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
  .xcard .xc h3{font-size:clamp(22px,2.6vw,32px);font-weight:400;margin-top:8px}

  /* ============ MOBILE for new components ============ */
  @media(max-width:880px){
    .preloader .pl-brand{font-size:38px}
    .sintro .wrap{grid-template-columns:1fr}
    .mgrid{column-count:2}
    .steps{grid-template-columns:1fr 1fr}
    .xgrid{grid-template-columns:1fr}
    .phero{height:72vh}
  }
  @media(max-width:520px){
    .mgrid{column-count:1}
    .steps{grid-template-columns:1fr}
    .sintro .stat{gap:28px}
  }
  @media(prefers-reduced-motion:reduce){
    .preloader{display:none}
  }

  /* ============ MULTI-STEP WIZARD ============ */
  .kontakt .wrap{display:block}
  .k-head{max-width:680px;margin:0 auto 44px;text-align:center}
  .k-head h2{font-size:clamp(32px,4.6vw,58px);font-weight:300}
  .k-head h2 em{font-style:italic;color:var(--gold)}
  .k-head .lead{margin-top:18px;color:rgba(255,255,255,.72);font-weight:300;font-size:18px}
  .wizard{max-width:780px;margin:0 auto;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.12);border-radius:6px;padding:clamp(24px,4vw,48px)}
  .wz-top{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:30px}
  .step-counter{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);white-space:nowrap}
  .wz-progress{display:flex;gap:8px;flex:1}
  .wz-seg{height:3px;flex:1;border-radius:2px;background:rgba(255,255,255,.16);transition:background .4s var(--ease),opacity .4s}
  .wz-seg.active{background:var(--gold)}
  .wz-seg.done{background:var(--gold);opacity:.5}
  .wz-step{display:none;animation:wzIn .5s var(--ease)}
  .wz-step.active{display:block}
  @keyframes wzIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  .wz-q{font-family:var(--serif);font-size:clamp(24px,3vw,34px);font-weight:300;margin-bottom:6px}
  .wz-q em{font-style:italic;color:var(--gold)}
  .wz-sub{color:rgba(255,255,255,.6);font-size:15px;margin-bottom:26px}
  .opt-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .opt{position:relative;border:1px solid rgba(255,255,255,.18);border-radius:5px;padding:22px 22px;cursor:pointer;color:var(--cream);background:rgba(255,255,255,.02);transition:border-color .3s,background .3s,transform .3s var(--ease);text-align:left}
  .opt:hover{border-color:rgba(255,255,255,.55);transform:translateY(-2px)}
  .opt.sel{border-color:var(--gold);background:rgba(234,217,196,.08)}
  .opt .ol{font-family:var(--serif);font-size:20px;font-weight:400}
  .opt .od{display:block;font-size:13px;color:rgba(255,255,255,.55);margin-top:4px}
  .opt .ock{position:absolute;top:16px;right:16px;width:22px;height:22px;border-radius:50%;border:1px solid rgba(255,255,255,.3);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--ink);background:transparent;transition:all .3s}
  .opt.sel .ock{background:var(--gold);border-color:var(--gold)}
  .opt.sel .ock::after{content:"✓"}
  /* image option cards */
  .opt.img{padding:0;min-height:180px;overflow:hidden;display:flex;align-items:flex-end}
  .opt.img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.82;transition:transform 1s var(--ease),opacity .4s;z-index:0}
  .opt.img:hover img{transform:scale(1.06)}
  .opt.img.sel img{opacity:1}
  .opt.img::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(20,19,17,.82));z-index:1}
  .opt.img .ol{position:relative;z-index:2;padding:18px 20px;width:100%}
  .opt.img .ock{z-index:2}
  /* wizard nav */
  .wz-nav{display:flex;align-items:center;justify-content:space-between;margin-top:28px;min-height:24px}
  .wz-back{background:none;border:none;color:rgba(255,255,255,.6);cursor:pointer;font-family:var(--sans);font-size:14px;letter-spacing:.03em;transition:color .3s;opacity:0;pointer-events:none}
  .wz-back.show{opacity:1;pointer-events:auto}
  .wz-back:hover{color:var(--cream)}
  .wz-hint{font-size:13px;color:rgba(255,255,255,.4)}
  /* contact step */
  .wz-summary{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
  .chip{font-size:12px;letter-spacing:.04em;padding:7px 14px;border:1px solid rgba(234,217,196,.4);border-radius:30px;color:var(--gold)}
  .wz-fields{display:flex;flex-direction:column;gap:18px}
  .wz-err{border-color:#d98b7a!important}
  .wz-submit{margin-top:6px;align-self:flex-start}
  .wz-micro{font-size:13px;color:rgba(255,255,255,.5);margin-top:2px}
  /* success */
  .wz-success{display:none;text-align:center;padding:30px 0}
  .wz-success.show{display:block;animation:wzIn .6s var(--ease)}
  .wz-success .tick{width:64px;height:64px;border-radius:50%;border:1px solid var(--gold);display:flex;align-items:center;justify-content:center;margin:0 auto 24px;color:var(--gold);font-size:28px}
  .wz-success h3{font-family:var(--serif);font-size:clamp(26px,3.4vw,40px);font-weight:300}
  .wz-success h3 em{font-style:italic;color:var(--gold)}
  .wz-success p{color:rgba(255,255,255,.7);margin-top:16px;max-width:440px;margin-left:auto;margin-right:auto}
  /* direct contact row under wizard */
  .k-direct{max-width:820px;margin:40px auto 0;display:flex;flex-wrap:wrap;gap:16px 40px;justify-content:center;align-items:center;color:rgba(255,255,255,.7);font-size:15px}
  .k-direct>span{width:100%;text-align:center;color:rgba(255,255,255,.45);font-size:13px;letter-spacing:.04em;margin-bottom:2px}
  .k-direct a{display:inline-flex;align-items:center;gap:10px;color:rgba(255,255,255,.9);transition:color .3s}
  .k-direct a:hover{color:var(--gold)}
  .k-direct .ic{width:17px;height:17px;opacity:.7}
  .k-direct .sep{display:none}
  @media(max-width:560px){ .opt-grid{grid-template-columns:1fr} .opt.img{min-height:150px} }

  /* ============ SCROLL PROGRESS ============ */
  .scrollbar-top{position:fixed;top:0;left:0;height:2px;width:0;background:var(--sand);z-index:101;transition:width .08s linear;pointer-events:none}

  /* ============ PAGE TRANSITION CURTAIN ============ */
  .pcurtain{position:fixed;inset:0;z-index:400;background:var(--cream);transform:translateY(100%);pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
  .pcurtain.in{transform:translateY(0);transition:transform .55s var(--ease)}
  .pcurtain .pc-brand{font-family:var(--serif);font-style:italic;font-size:clamp(32px,5vw,52px);color:var(--ink);opacity:0;transition:opacity .4s var(--ease) .15s}
  .pcurtain.in .pc-brand{opacity:1}

  /* ============ SPOTLIGHT REVEAL ============ */
  .spotlight{position:relative;height:84vh;min-height:520px;background:var(--ink);overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center}
  .spotlight .sl-img{position:absolute;inset:0;background-size:cover;background-position:center 35%;opacity:.92;
    -webkit-mask-image:radial-gradient(circle var(--r,150px) at var(--x,50%) var(--y,50%),#000 0%,rgba(0,0,0,.55) 42%,transparent 72%);
    mask-image:radial-gradient(circle var(--r,150px) at var(--x,50%) var(--y,50%),#000 0%,rgba(0,0,0,.55) 42%,transparent 72%)}
  .spotlight .sl-text{position:relative;z-index:2;color:var(--cream);max-width:760px;padding:0 28px;pointer-events:none}
  .spotlight .eyebrow{color:var(--gold);display:block;margin-bottom:20px}
  .spotlight h2{font-family:var(--serif);font-weight:300;font-size:clamp(30px,4.6vw,60px);line-height:1.12}
  .spotlight h2 em{font-style:italic;color:var(--gold)}
  .spotlight .sl-hint{margin-top:24px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.45)}
  @media(pointer:coarse){ .spotlight .sl-img{-webkit-mask-image:none;mask-image:none;opacity:.28} .spotlight .sl-hint{display:none} }

  /* ============ HANDWRITTEN SIGNATURE ============ */
  .signature{font-family:'Allura',cursive;font-size:clamp(46px,6vw,76px);line-height:.9;color:var(--ink);display:inline-block;margin-top:18px;
    clip-path:inset(0 100% 0 0);transition:clip-path 1.7s var(--ease)}
  .signature.in{clip-path:inset(0 0 0 0)}

  /* ============ LOGO IMAGE ============ */
  .brand-logo{height:132px;width:auto;display:block}
  header .brand-logo{filter:brightness(0) invert(1) drop-shadow(0 2px 10px rgba(0,0,0,.6));transition:filter .5s var(--ease),height .5s var(--ease)}
  header.scrolled .brand-logo{filter:none;height:48px}
  footer .brand-logo{filter:brightness(0) invert(1);height:56px}
  .pl-logo{width:min(280px,66vw);height:auto;opacity:0;transform:translateY(12px);animation:plIn 1s var(--ease) .15s forwards}
  @media(max-width:880px){ .brand-logo{height:66px} header.scrolled .brand-logo{height:42px} footer .brand-logo{height:48px} }

  /* ============ KONTAKT CTA ============ */
  .k-cta{text-align:center;margin-top:8px}
  .k-cta .btn{font-size:15px;padding:18px 40px}
  .k-cta-note{margin-top:16px;font-size:13px;letter-spacing:.04em;color:rgba(255,255,255,.5)}

  /* ============ FORM MODAL ============ */
  .form-modal{position:fixed;inset:0;z-index:500;display:none;align-items:center;justify-content:center;padding:4vh 4vw}
  .form-modal.open{display:flex}
  .fm-backdrop{position:absolute;inset:0;background:rgba(15,14,12,.62);backdrop-filter:blur(10px);opacity:0;transition:opacity .5s var(--ease)}
  .form-modal.open .fm-backdrop{opacity:1}
  .fm-panel{position:relative;width:min(820px,100%);max-height:92vh;overflow-y:auto;background:var(--ink);border:1px solid rgba(255,255,255,.12);border-radius:8px;padding:clamp(26px,4vw,52px);
    transform:translateY(30px) scale(.97);opacity:0;transition:transform .6s var(--ease),opacity .45s var(--ease);box-shadow:0 50px 130px rgba(0,0,0,.55);-webkit-overflow-scrolling:touch}
  .form-modal.open .fm-panel{transform:none;opacity:1}
  .fm-panel::-webkit-scrollbar{width:0}
  .fm-close{position:absolute;top:14px;right:18px;background:none;border:none;color:rgba(255,255,255,.55);font-size:30px;line-height:1;cursor:pointer;z-index:3;transition:color .3s,transform .3s}
  .fm-close:hover{color:#fff;transform:rotate(90deg)}
  .fm-eyebrow{color:var(--gold);display:block;margin-bottom:22px}
  .fm-panel .wizard{background:none;border:none;padding:0;max-width:none;margin:0}