/* C.K. Portraits Fotografie | gemeinsames Stylesheet */
/* ==========================================================
   TOKENS
   ========================================================== */
:root{
  --paper:#F7F1E8;      /* warmes Papierweiß, Grundfläche */
  --paper-2:#F2EADD;    /* eine Stufe wärmer */
  --cream:#ECE1D0;      /* Creme */
  --sand:#E2D2BB;       /* Sand */
  --sand-deep:#CDB597;  /* tiefer Sand, Linien und Deko */
  --clay:#B07A57;       /* Akzent für Linien und große Schrift */
  --clay-ink:#8A5636;   /* Akzent für kleine Schrift, Kontrast AA */
  --ink:#2A211C;        /* Espresso statt Schwarz */
  --ink-soft:#5B4D44;
  --muted:#6E5F54;
  --line:rgba(42,33,28,.14);
  --line-soft:rgba(42,33,28,.08);
  --shadow:0 34px 70px -34px rgba(74,52,36,.42), 0 14px 26px -18px rgba(74,52,36,.2);

  --serif:"Cormorant Garamond","Cormorant",Georgia,"Times New Roman",serif;
  --sans:"Jost","Helvetica Neue",Arial,sans-serif;
  --script:"Mrs Saint Delafield","Brush Script MT",cursive;

  --pad:clamp(20px,5vw,84px);
  --maxw:1480px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-io:cubic-bezier(.77,0,.18,1);
}

/* ==========================================================
   BASIS
   ========================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-gutter:stable}
html.is-locked{overflow:hidden}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-weight:400;font-size:clamp(15.5px,1.02vw,17px);line-height:1.7;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;
}
/* feines Papierkorn über allem */
body::before{
  content:"";position:fixed;inset:0;z-index:95;pointer-events:none;opacity:.1;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .26 0 0 0 0 .18 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
p{margin:0 0 1em}
p:last-child{margin-bottom:0}
::selection{background:var(--sand);color:var(--ink)}
:focus-visible{outline:2px solid var(--clay-ink);outline-offset:3px;border-radius:2px}
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.skip{position:fixed;left:16px;top:-80px;z-index:600;background:var(--ink);color:var(--paper);padding:12px 20px;border-radius:999px;font-size:13px;transition:top .3s}
.skip:focus{top:16px}
.ic{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* Typografie */
h1,h2,h3,h4{font-family:var(--serif);font-weight:300;line-height:.98;letter-spacing:-.015em;margin:0;color:var(--ink)}
h1 em,h2 em,h3 em{font-style:italic;color:var(--clay-ink)}
.h2{font-size:clamp(44px,6.2vw,100px);line-height:.94;letter-spacing:-.022em}
.kicker{
  display:flex;align-items:center;gap:14px;margin:0 0 26px;
  font-size:11px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);
}
.kicker::before{content:"";width:34px;height:1px;background:var(--clay);flex:none}
.kicker b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:16px;letter-spacing:0;text-transform:none;color:var(--clay-ink)}
.lead{font-size:clamp(16px,1.15vw,18.5px);color:var(--ink-soft);max-width:44ch}

/* Buttons */
.btn{
  position:relative;display:inline-flex;align-items:center;gap:14px;isolation:isolate;overflow:hidden;
  padding:18px 30px;border:0;border-radius:999px;cursor:pointer;
  font-family:var(--sans);font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  background:var(--ink);color:var(--paper);
  transition:color .5s var(--ease),transform .6s var(--ease-out),box-shadow .5s;
}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--clay-ink);
  transform:translateY(102%);transition:transform .65s var(--ease-out);
}
.btn:hover::before,.btn:focus-visible::before{transform:none}
.btn:hover{box-shadow:0 18px 34px -18px rgba(138,86,54,.7)}
.btn .ic{transition:transform .5s var(--ease-out)}
.btn:hover .ic{transform:translateX(5px)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn-ghost::before{background:var(--ink)}
.btn-ghost:hover{color:var(--paper);box-shadow:inset 0 0 0 1px var(--ink)}
.btn-sm{padding:13px 22px;font-size:11px}
.ulink{
  display:inline-flex;align-items:center;gap:10px;padding:6px 0;
  font-size:12px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;
  transition:background-size .6s var(--ease-out),color .3s;
}
.ulink:hover{background-size:0 1px;background-position:100% 100%;color:var(--clay-ink)}

/* Reveal Grundlagen (nur mit JS) */
.js .rv{opacity:0;transform:translateY(34px);transition:opacity 1.1s var(--ease-out) var(--rd,0ms),transform 1.2s var(--ease-out) var(--rd,0ms)}
.js .rv.in{opacity:1;transform:none}
.d1{--rd:110ms}.d2{--rd:220ms}.d3{--rd:330ms}.d4{--rd:440ms}
.js [data-split] .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.1em .07em .16em 0;margin:-.1em -.07em -.16em 0}
.js [data-split] .wi{display:inline-block;transform:translateY(112%) rotate(4deg);transform-origin:0 100%;transition:transform 1.3s var(--ease-out);transition-delay:calc(var(--i)*70ms + var(--wd,0ms))}
.js [data-split].in .wi{transform:none}
.ln{position:relative}
.ln::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--ink);transform-origin:0 50%}
.js .ln::before{transform:scaleX(0);transition:transform 1.6s var(--ease-io) var(--rd,0ms)}
.js .ln.in::before{transform:scaleX(1)}

/* Platzhalter: warmer Verlauf, solange kein Foto da ist */
.ph{
  position:relative;overflow:hidden;
  --t1:#EBDDC9;--t2:#D5BC9B;
  background:radial-gradient(120% 90% at 28% 18%,rgba(255,251,244,.6),transparent 58%),linear-gradient(160deg,var(--t1),var(--t2));
}
.ph>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph::after{
  content:attr(data-label);position:absolute;left:50%;top:50%;z-index:1;transform:translate(-50%,-50%);
  display:none;padding:7px 13px;border:1px solid rgba(42,33,28,.18);border-radius:999px;background:rgba(247,241,232,.55);
  font-family:var(--sans);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(42,33,28,.62);white-space:nowrap;
}
.ph.ph-missing>img{opacity:0}
.ph.ph-missing::after{display:block}
[data-cat="familie"] .ph,.t2{--t1:#E9D9C4;--t2:#C9AE8C}
[data-cat="einzel"] .ph,.t3{--t1:#EEE2D2;--t2:#D9C2A6}
[data-cat="schwanger"] .ph,.t4{--t1:#EFDFCF;--t2:#D3B49A}
[data-cat="baby"] .ph,.t5{--t1:#F1E6D8;--t2:#DCC8AE}
[data-cat="hochzeit"] .ph,.t6{--t1:#E8DCCB;--t2:#C7B193}

/* Sucherecken, wie im Kamerasucher */
.vf{
  position:absolute;inset:14px;z-index:3;pointer-events:none;opacity:0;transform:scale(1.08);
  transition:opacity .5s var(--ease),transform .8s var(--ease-out);
  --c:rgba(255,252,246,.95);
  background:
    linear-gradient(var(--c),var(--c)) 0 0/20px 1px,linear-gradient(var(--c),var(--c)) 0 0/1px 20px,
    linear-gradient(var(--c),var(--c)) 100% 0/20px 1px,linear-gradient(var(--c),var(--c)) 100% 0/1px 20px,
    linear-gradient(var(--c),var(--c)) 0 100%/20px 1px,linear-gradient(var(--c),var(--c)) 0 100%/1px 20px,
    linear-gradient(var(--c),var(--c)) 100% 100%/20px 1px,linear-gradient(var(--c),var(--c)) 100% 100%/1px 20px;
  background-repeat:no-repeat;
}

/* ==========================================================
   LADEVORHANG
   ========================================================== */
.loader{display:none}
.js .loader{
  display:flex;position:fixed;inset:0;z-index:300;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  background:var(--cream);transition:transform 1.15s var(--ease-io);
}
.loaded .loader{transform:translateY(-100%)}
.ld-mono{overflow:hidden;padding:.1em .1em 0}
.ld-mono span{display:block;font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(64px,9vw,110px);line-height:1;color:var(--ink);animation:ldUp 1.1s var(--ease-out) both}
.ld-sub{font-size:10.5px;letter-spacing:.38em;text-transform:uppercase;color:var(--muted);animation:ldFade 1s var(--ease) .35s both}
.ld-bar{width:120px;height:1px;background:var(--line);position:relative;overflow:hidden;margin-top:8px}
.ld-bar::after{content:"";position:absolute;inset:0;background:var(--clay);transform-origin:0 50%;animation:ldBar 1s var(--ease-io) .2s both}
@keyframes ldUp{from{transform:translateY(105%)}to{transform:none}}
@keyframes ldFade{from{opacity:0;letter-spacing:.6em}to{opacity:1}}
@keyframes ldBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ==========================================================
   NAVIGATION
   ========================================================== */
.nav{position:fixed;inset:0 0 auto 0;z-index:170;transition:transform .7s var(--ease-out),background .5s,box-shadow .5s}
.nav.scrolled{background:rgba(247,241,232,.84);-webkit-backdrop-filter:blur(14px) saturate(120%);backdrop-filter:blur(14px) saturate(120%);box-shadow:0 1px 0 var(--line-soft)}
.nav.hide{transform:translateY(-102%)}
.menu-open .nav{background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:24px;height:86px;transition:height .5s var(--ease-out)}
.nav.scrolled .nav-in{height:72px}
.logo{display:flex;align-items:baseline;gap:12px;white-space:nowrap}
.logo i{font-family:var(--serif);font-style:italic;font-weight:400;font-size:31px;line-height:1;letter-spacing:-.02em}
.logo span{font-size:10px;font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:var(--muted)}
.nav-links{display:flex;gap:clamp(22px,2.4vw,38px)}
.nav-links a{position:relative;padding:6px 0;font-size:11.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft);transition:color .3s}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--clay);transform:scaleX(0);transition:transform .5s var(--ease-out)}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after,.nav-links a.is-current::after{transform:scaleX(1)}
.nav-act{display:flex;align-items:center;gap:22px}
.menu-btn{display:none;align-items:center;gap:12px;background:none;border:0;padding:10px 0 10px 6px;cursor:pointer;font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase}
.mb-l{position:relative;display:block;width:26px;height:10px}
.mb-l i{position:absolute;left:0;right:0;height:1px;background:var(--ink);transition:transform .5s var(--ease-out),top .5s var(--ease-out)}
.mb-l i:first-child{top:0}
.mb-l i:last-child{top:9px}
.menu-open .mb-l i:first-child{top:4.5px;transform:rotate(45deg)}
.menu-open .mb-l i:last-child{top:4.5px;transform:rotate(-45deg)}

.menu{
  position:fixed;inset:0;z-index:150;display:flex;flex-direction:column;justify-content:space-between;
  padding:120px var(--pad) 44px;background:var(--paper-2);visibility:hidden;
  clip-path:circle(0% at calc(100% - 52px) 43px);
  transition:clip-path .95s var(--ease-io),visibility 0s linear .95s;
}
.menu.open{visibility:visible;clip-path:circle(150% at calc(100% - 52px) 43px);transition:clip-path .95s var(--ease-io),visibility 0s}
.menu nav{display:flex;flex-direction:column}
.m-link{display:flex;align-items:baseline;gap:18px;overflow:hidden;padding:4px 0;border-bottom:1px solid var(--line-soft)}
.m-link .n{font-size:11px;letter-spacing:.2em;color:var(--muted);width:24px}
.m-link .t{display:inline-block;font-family:var(--serif);font-weight:300;font-size:clamp(40px,10.5vw,68px);line-height:1.1;transform:translateY(110%);transition:transform .9s var(--ease-out) calc(.3s + var(--i)*60ms)}
.m-link .t em{color:var(--clay-ink)}
.menu.open .m-link .t{transform:none}
.m-foot{display:flex;flex-wrap:wrap;gap:26px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-soft)}

/* ==========================================================
   HERO
   ========================================================== */
.hero{
  position:relative;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;overflow:hidden;
  padding-top:clamp(110px,15vh,160px);
  background:radial-gradient(110% 80% at 85% 15%,#FCF8F1 0%,var(--paper) 55%,var(--paper-2) 100%);
}
.hero-mark{
  position:absolute;left:-1.5vw;bottom:-7vw;z-index:0;pointer-events:none;user-select:none;
  font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(220px,33vw,640px);line-height:.8;letter-spacing:-.05em;
  color:var(--cream);
}
.js .hero-mark{opacity:0;transition:opacity 2s var(--ease) 1s}
.loaded .hero-mark{opacity:1}
.hero-grid{position:relative;z-index:2;flex:1;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(30px,5vw,90px);align-items:center}
.hero-text{padding-bottom:3vh}
.hero-h{font-size:clamp(56px,8vw,138px);line-height:.9;letter-spacing:-.03em;margin:0 0 30px;--wd:420ms}
.hero-p{max-width:42ch;color:var(--ink-soft);font-size:clamp(16px,1.15vw,18.5px)}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:22px 34px;margin-top:38px}
.hero .rv{--rd:900ms}
.hero .rv.d1{--rd:1050ms}
.hero .rv.d2{--rd:1200ms}

.slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.8s var(--ease)}
.slide.is-active{opacity:1;z-index:1}
html:not(.js) .slide:first-child{opacity:1}
.slide>img{transform:scale(1.14);transition:transform 9s cubic-bezier(.3,.1,.3,1)}
.slide.is-active>img{transform:scale(1)}
.slide:nth-child(2){--t1:#E9D9C4;--t2:#C9AE8C}
.slide:nth-child(3){--t1:#EFDFCF;--t2:#D3B49A}
.slide:nth-child(4){--t1:#F1E6D8;--t2:#DCC8AE}
.slide:nth-child(5){--t1:#EEE2D2;--t2:#D9C2A6}
.slide:nth-child(6){--t1:#E8DCCB;--t2:#C7B193}



.hero-foot{position:relative;z-index:2;display:flex;align-items:center;gap:clamp(18px,3vw,40px);padding-block:24px 28px;margin-top:clamp(16px,3vh,36px)}
.hero-foot::before{content:"";position:absolute;left:var(--pad);right:var(--pad);top:0;height:1px;background:var(--line);transform-origin:0 50%}
.js .hero-foot::before{transform:scaleX(0);transition:transform 1.8s var(--ease-io) .8s}
.loaded .hero-foot::before{transform:scaleX(1)}
.js .hero-foot>*{opacity:0;transition:opacity 1s var(--ease) 1.4s}
.loaded .hero-foot>*{opacity:1}
.h-count{font-family:var(--serif);font-size:22px;line-height:1;white-space:nowrap}
.h-count span{font-size:14px;color:var(--muted);margin-left:4px}
.dots{display:flex;gap:10px}
.dot{position:relative;width:46px;height:26px;padding:0;border:0;background:none;cursor:pointer}
.dot::before,.dot i{content:"";position:absolute;left:0;right:0;top:50%;height:1px}
.dot::before{background:var(--line)}
.dot i{background:var(--ink);transform:scaleX(0);transform-origin:0 50%}
.dot.is-active i{animation:fillDot var(--dur,6.5s) linear forwards}
.hero.paused .dot.is-active i{animation-play-state:paused}
.no-auto .dot.is-active i{animation:none;transform:scaleX(1)}
@keyframes fillDot{to{transform:scaleX(1)}}
.h-label{display:flex;align-items:baseline;gap:12px;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.h-label b{display:inline-block;font-family:var(--serif);font-style:italic;font-weight:400;font-size:21px;letter-spacing:0;text-transform:none;color:var(--ink);transition:opacity .35s,transform .45s var(--ease-out)}
.h-label b.swap{opacity:0;transform:translateY(8px)}
.scroll-cue{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:10.5px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-soft)}
.scroll-cue i{position:relative;width:1px;height:40px;background:var(--line);overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;left:0;top:0;width:1px;height:14px;background:var(--ink);animation:drop 2.2s var(--ease-io) infinite}
@keyframes drop{0%{transform:translateY(-16px)}100%{transform:translateY(42px)}}

/* ==========================================================
   KINETISCHES BAND
   ========================================================== */
.ticker{overflow:hidden;padding:clamp(26px,3.6vw,46px) 0;border-block:1px solid var(--line);background:var(--paper-2)}
.ticker-track{display:flex;width:max-content;will-change:transform}
.ticker-set{display:flex;align-items:center;flex:none;gap:clamp(28px,3.4vw,58px);padding-right:clamp(28px,3.4vw,58px);font-family:var(--serif);font-weight:300;font-size:clamp(46px,7.6vw,124px);line-height:1;letter-spacing:-.02em;white-space:nowrap}
.ticker-set em{color:var(--clay)}
.ticker-set .o{color:transparent;-webkit-text-stroke:1px var(--sand-deep)}
.ticker-set i{position:relative;flex:none;width:14px;height:14px;border:1px solid var(--clay);border-radius:50%}
.ticker-set i::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--clay)}

/* ==========================================================
   SEKTIONEN ALLGEMEIN
   ========================================================== */
.sec{padding-block:clamp(96px,12vw,190px)}
.sec-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 24px;align-items:end;margin-bottom:clamp(46px,6vw,92px)}
.sec-head .kicker{grid-column:1/-1}
.sec-head .h2{grid-column:1/8}
.sec-head .lead{grid-column:9/13;margin:0;padding-bottom:.5em}

/* ==========================================================
   PORTFOLIO
   ========================================================== */
.masonry{display:flex;align-items:flex-start;gap:clamp(16px,2.6vw,44px);transition:opacity .45s var(--ease),transform .5s var(--ease)}
.masonry.is-switching{opacity:0;transform:translateY(22px)}
.masonry:not(.ready){display:block;columns:3 260px;column-gap:clamp(16px,2.6vw,44px)}
.masonry:not(.ready) .g-item{break-inside:avoid;margin-bottom:40px}
.g-col{flex:1;min-width:0;display:flex;flex-direction:column;gap:clamp(30px,3.8vw,68px)}
.g-col:nth-child(2){padding-top:clamp(56px,9vw,170px)}
.g-col:nth-child(3){padding-top:clamp(20px,3vw,56px)}
.g-item{margin:0}
.g-open{position:relative;display:block;width:100%;padding:0;border:0;background:none;text-align:left;cursor:pointer}
.g-media{display:block;aspect-ratio:var(--r,2/3);border-radius:3px}
.g-media::before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(to top,rgba(42,33,28,.34),transparent 46%);opacity:0;transition:opacity .7s var(--ease)}
.g-media>img{transform:scale(1.24);transition:transform 1.7s var(--ease-out)}
.js .g-media{clip-path:inset(100% 0 0 0);transition:clip-path 1.35s var(--ease-io) var(--d,0ms)}
.js .g-item.in .g-media{clip-path:inset(0 0 0 0)}
.g-item.in .g-media>img,html:not(.js) .g-media>img{transform:scale(1)}
.g-item.in .g-open:hover .g-media>img{transform:scale(1.06);transition-duration:1.2s}
.g-open:hover .g-media::before,.g-open:focus-visible .g-media::before{opacity:1}
.g-open:hover .vf,.g-open:focus-visible .vf{opacity:1;transform:none}
.g-item.is-src .g-media>img{opacity:0}
.g-cap{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-top:14px;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.g-cap b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:19px;letter-spacing:0;text-transform:none;color:var(--ink);transition:transform .6s var(--ease-out),color .4s}
.g-item:hover .g-cap b{transform:translateX(8px);color:var(--clay-ink)}
.g-more{display:flex;justify-content:center;margin-top:clamp(56px,7vw,100px)}
.g-more[hidden]{display:none}

/* Lightbox */
.lb{position:fixed;inset:0;z-index:200;visibility:hidden}
.lb.open,.lb.closing{visibility:visible}
.lb-bg{position:absolute;inset:0;background:rgba(242,234,221,.97);opacity:0;transition:opacity .7s var(--ease)}
.lb.open .lb-bg{opacity:1}
.lb-frame{position:fixed;left:0;top:0;margin:0;transform-origin:0 0;border-radius:3px;box-shadow:var(--shadow);will-change:transform}
.lb-frame>img{transition:opacity .3s}
.lb-frame.fade>img,.lb-frame.fade::after{opacity:0}
.lb-ui{opacity:0;transition:opacity .5s var(--ease)}
.lb.open .lb-ui{opacity:1;transition-delay:.35s}
.lb-top{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:center;padding:22px var(--pad)}
.lb-cap{margin:0;display:flex;align-items:baseline;gap:16px;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.lb-cap b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:22px;letter-spacing:0;text-transform:none;color:var(--ink)}
.lb-close{display:inline-flex;align-items:center;gap:10px;padding:10px 0;border:0;background:none;cursor:pointer;font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase}
.lb-close .x{position:relative;width:18px;height:18px}
.lb-close .x::before,.lb-close .x::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:currentColor;transform:rotate(45deg)}
.lb-close .x::after{transform:rotate(-45deg)}
.lb-nav{position:absolute;top:50%;width:56px;height:56px;margin-top:-28px;display:grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:rgba(247,241,232,.7);cursor:pointer;transition:background .4s,color .4s,border-color .4s}
.lb-nav:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.lb-prev{left:clamp(10px,2.4vw,40px)}
.lb-prev .ic{transform:rotate(180deg)}
.lb-next{right:clamp(10px,2.4vw,40px)}

/* ==========================================================
   ÜBER MICH
   ========================================================== */
.about{background:var(--paper-2)}
.about-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(48px,8vw,140px);align-items:start}
.about-media{position:sticky;top:120px;padding-left:clamp(0px,3vw,48px)}
.about-arch{width:88%;aspect-ratio:3/4;border-radius:999px 999px 5px 5px;box-shadow:var(--shadow)}
.about-arch>img{transform:scale(1.18);transition:transform 2.2s var(--ease-out)}
.reveal.in .about-arch>img,html:not(.js) .about-arch>img{transform:scale(1)}
.js .about-arch{clip-path:inset(100% 0 0 0 round 999px 999px 5px 5px);transition:clip-path 1.6s var(--ease-io)}
.js .reveal.in .about-arch{clip-path:inset(0 0 0 0 round 999px 999px 5px 5px)}
.about-coord{position:absolute;left:0;top:12%;writing-mode:vertical-rl;transform:rotate(180deg);font-size:10px;letter-spacing:.32em;text-transform:uppercase;color:var(--muted)}
.about-text{padding-top:clamp(0px,4vw,60px)}
.about-intro{font-size:clamp(18px,1.4vw,22px);color:var(--ink-soft);margin-top:34px}
.scrub{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3vw,48px);line-height:1.16;letter-spacing:-.01em;margin:.9em 0 .8em}
.js .scrub .sw{color:rgba(42,33,28,.17);transition:color .6s var(--ease)}
.js .scrub .sw.on{color:var(--ink)}
.sig{font-family:var(--script);font-size:clamp(64px,6.4vw,100px);line-height:1;color:var(--clay-ink);margin:28px 0 0;padding-right:.2em;display:inline-block}
.js .sig{clip-path:inset(0 100% 0 0);transition:clip-path 2.4s var(--ease) .25s}
.js .sig.in{clip-path:inset(-20% -10% -20% 0)}
.values{list-style:none;padding:0;margin:clamp(44px,5vw,76px) 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,34px)}
.values li{padding-top:22px}
.values .rn{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--clay-ink)}
.values h3{font-size:clamp(24px,2vw,30px);font-weight:500;margin:6px 0 10px}
.values p{font-size:14.5px;line-height:1.65;color:var(--ink-soft)}

/* ==========================================================
   PREISE
   ========================================================== */
.svc-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.svc-row{
  position:relative;isolation:isolate;display:grid;align-items:center;gap:24px;
  grid-template-columns:56px minmax(170px,1fr) minmax(0,1.3fr) minmax(150px,auto) 46px;
  padding:clamp(24px,2.6vw,38px) clamp(8px,1.4vw,22px);border-bottom:1px solid var(--line);
}
.svc-row::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--cream);transform:scaleY(0);transform-origin:50% 100%;transition:transform .7s var(--ease-out)}
.svc-row:hover::before,.svc-row:focus-visible::before{transform:none}
.svc-no{font-family:var(--serif);font-style:italic;font-size:18px;color:var(--clay-ink)}
.svc-thumb{display:none}
.svc-thumb.ph::after{display:none!important}
.svc-title{font-family:var(--serif);font-weight:300;font-size:clamp(34px,3.9vw,62px);line-height:1;letter-spacing:-.015em;transition:transform .7s var(--ease-out),color .4s}
.svc-row:hover .svc-title{transform:translateX(14px);color:var(--clay-ink)}
.svc-desc{color:var(--ink-soft);font-size:15px;line-height:1.6;max-width:48ch}
.svc-price{display:flex;flex-direction:column;align-items:flex-end;font-family:var(--serif);font-size:clamp(26px,2.1vw,34px);line-height:1.1;white-space:nowrap}
.svc-price small{font-family:var(--sans);font-size:10px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.svc-price em{font-family:var(--sans);font-style:normal;font-size:11.5px;color:var(--muted);margin-top:6px}
.svc-arr{display:grid;place-items:center;width:46px;height:46px;border:1px solid var(--line);border-radius:50%;transition:background .45s,color .45s,border-color .45s,transform .6s var(--ease-out)}
.svc-row:hover .svc-arr{background:var(--ink);color:var(--paper);border-color:var(--ink);transform:rotate(-45deg)}

.svc-preview{display:none}
.fine .svc-preview{display:block;position:fixed;left:0;top:0;z-index:60;width:0;height:0;pointer-events:none}
.pv-in{position:absolute;left:0;top:0;width:clamp(220px,17vw,290px);aspect-ratio:3/4;overflow:hidden;border-radius:999px 999px 6px 6px;background:var(--sand);box-shadow:var(--shadow);opacity:0;transform:translate(-50%,-50%) scale(.55);transition:opacity .45s var(--ease),transform .7s var(--ease-out)}
.svc-preview.on .pv-in{opacity:1;transform:translate(-50%,-50%) scale(1)}
.pv{position:absolute;inset:0;opacity:0;transition:opacity .55s var(--ease)}
.pv>img{transform:scale(1.18);transition:transform 1.1s var(--ease-out)}
.pv.on{opacity:1;z-index:1}
.pv.on>img{transform:scale(1)}

.extras-k{margin-top:clamp(70px,8vw,120px)}
.extras{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3vw,52px)}
.extra{padding-top:28px}
.extra h3{font-size:clamp(26px,2.3vw,34px);font-weight:400;margin-bottom:12px}
.extra p{color:var(--ink-soft);font-size:15px}
.extra .x-price{display:block;margin-top:16px;font-family:var(--serif);font-style:italic;font-size:24px;color:var(--clay-ink)}

/* ==========================================================
   GUTSCHEINE
   ========================================================== */
.voucher{background:var(--paper-2);overflow:hidden}
.voucher-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(44px,7vw,130px);align-items:center}
.v-stage{display:flex;justify-content:center;padding-block:40px;perspective:1300px}
.v-float{width:min(100%,500px);animation:float 7s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-14px) rotate(-1.2deg)}}
.v-card{
  position:relative;overflow:hidden;display:grid;grid-template-columns:1fr 32%;width:100%;aspect-ratio:1.62;border-radius:8px;
  background:linear-gradient(140deg,#FCF8F2 0%,#F2E7D8 55%,#E6D4BC 100%);
  box-shadow:0 44px 80px -40px rgba(74,52,36,.5),0 18px 30px -20px rgba(74,52,36,.25),inset 0 0 0 1px rgba(255,255,255,.7);
  transform:rotate(-3deg);transform-style:preserve-3d;transition:transform .6s var(--ease-out);
}
.v-card::before,.v-card::after{content:"";position:absolute;left:calc(68% - 12px);width:24px;height:24px;border-radius:50%;background:var(--paper-2);z-index:2}
.v-card::before{top:-12px}
.v-card::after{bottom:-12px}
.v-main{display:flex;flex-direction:column;justify-content:space-between;padding:clamp(20px,3vw,34px);border-right:1px dashed rgba(138,86,54,.4)}
.v-k{font-size:10px;font-weight:500;letter-spacing:.36em;text-transform:uppercase;color:var(--clay-ink)}
.v-t{font-family:var(--serif);font-weight:300;font-size:clamp(30px,3.3vw,48px);line-height:.98;letter-spacing:-.02em}
.v-t em{color:var(--clay-ink)}
.v-f{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);line-height:1.8}
.v-stub{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center}
.v-stub small{font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.v-stub b{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(56px,6vw,84px);line-height:.9;color:var(--ink)}
.v-glare{position:absolute;inset:0;z-index:3;pointer-events:none;mix-blend-mode:soft-light;background:radial-gradient(circle at var(--gx,25%) var(--gy,15%),rgba(255,255,255,.9),transparent 50%)}
.v-list{list-style:none;padding:0;margin:34px 0 40px;border-top:1px solid var(--line)}
.v-list li{display:flex;gap:18px;padding:15px 0;border-bottom:1px solid var(--line);color:var(--ink-soft)}
.v-list li span{min-width:28px;font-family:var(--serif);font-style:italic;font-size:18px;color:var(--clay-ink)}

/* ==========================================================
   KONTAKT
   ========================================================== */
.contact{background:var(--paper)}
.contact-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(44px,7vw,130px);align-items:start}
.contact-intro .lead{margin-top:30px}
.direct{margin-top:44px;border-top:1px solid var(--line)}
.direct a{display:grid;grid-template-columns:110px minmax(0,1fr) auto;align-items:baseline;gap:16px;padding:18px 0;border-bottom:1px solid var(--line);transition:padding .6s var(--ease-out)}
.direct small{font-size:10px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.direct b{font-family:var(--serif);font-weight:400;font-size:clamp(20px,1.6vw,24px);overflow-wrap:anywhere;transition:color .3s}
.direct .ic{align-self:center;transform:rotate(-45deg);transition:transform .5s var(--ease-out)}
.direct a:hover{padding-left:12px}
.direct a:hover b{color:var(--clay-ink)}
.direct a:hover .ic{transform:none}

.form{display:grid;gap:34px;padding:clamp(26px,4vw,58px);background:#FBF7F0;border-radius:6px;box-shadow:0 40px 80px -50px rgba(74,52,36,.35),0 0 0 1px var(--line-soft)}
.form fieldset{border:0;padding:0;margin:0;min-width:0}
.form legend{padding:0;margin-bottom:16px;font-size:10.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:inline-block;padding:10px 18px;border:1px solid var(--line);border-radius:999px;font-size:14px;color:var(--ink-soft);cursor:pointer;transition:background .35s,color .35s,border-color .35s,transform .4s var(--ease-out)}
.chip span:hover{border-color:var(--ink);color:var(--ink)}
.chip input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chip input:focus-visible+span{outline:2px solid var(--clay-ink);outline-offset:2px}
.chip.pulse span{animation:pulse .9s var(--ease-out)}
@keyframes pulse{40%{transform:scale(1.1)}}
.fieldset-err legend{color:#9B3F26}
.field{position:relative;padding-top:18px}
.field input,.field textarea{display:block;width:100%;padding:10px 0 12px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;outline:0;font:inherit;font-size:17px;color:var(--ink)}
.field textarea{min-height:120px;resize:vertical;line-height:1.6}
.field label{position:absolute;left:0;top:28px;font-size:16px;color:var(--muted);pointer-events:none;transform-origin:0 0;transition:transform .45s var(--ease-out),color .3s}
.field input:focus+label,.field input:not(:placeholder-shown)+label,
.field textarea:focus+label,.field textarea:not(:placeholder-shown)+label{transform:translateY(-26px) scale(.74);color:var(--clay-ink)}
.field .bar{position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease-out)}
.field input:focus~.bar,.field textarea:focus~.bar{transform:none}
.field.err .bar{transform:none;background:#9B3F26}
.field.err label{color:#9B3F26}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.f-actions{display:flex;flex-wrap:wrap;gap:12px}
.f-note{font-size:13px;line-height:1.6;color:var(--muted);margin:0}
.form-msg{min-height:1.6em;margin:0;font-size:14px}
.form-msg.is-err{color:#9B3F26}
.form-msg.is-ok{color:var(--clay-ink)}

/* ==========================================================
   FOOTER
   ========================================================== */
.footer{background:var(--cream);padding-top:clamp(80px,9vw,130px);overflow:hidden}
.foot-top{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:clamp(26px,4vw,60px);padding-bottom:clamp(50px,6vw,80px)}
.foot-top h2{font-size:clamp(36px,3.6vw,58px);margin-bottom:28px}
.foot-col h3{font-family:var(--sans);font-size:10.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.foot-col a{display:block;width:fit-content;padding:6px 0;font-size:15px;color:var(--ink-soft);transition:color .3s,transform .5s var(--ease-out)}
.foot-col a:hover{color:var(--clay-ink);transform:translateX(5px)}
.foot-mark{overflow:hidden;white-space:nowrap;font-family:var(--serif);font-weight:300;font-size:14vw;line-height:.82;letter-spacing:-.04em;color:var(--ink);padding-top:.06em}
.fm-in{display:inline-block}
.foot-mark em{color:var(--clay-ink)}
.js .foot-mark .ch{display:inline-block;transform:translateY(105%);transition:transform 1.3s var(--ease-out) calc(var(--i)*45ms)}
.js .foot-mark.in .ch{transform:none}
.foot-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 28px;padding-block:24px 30px;border-top:1px solid var(--line);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.foot-bottom a:hover{color:var(--clay-ink)}

/* ==========================================================
   HERO: Bildpaare aus demselben Shooting
   ========================================================== */
.hero.hero-split{--side:calc((100vw - min(100vw, var(--maxw))) / 2);--cut:calc(56vw - var(--side) - var(--pad) - 56px)}
.hero.hero-split .hero-grid{grid-template-columns:minmax(0,1fr)}
.hero.hero-split .hero-text{max-width:var(--cut);padding-bottom:4vh}
.hero.hero-split .hero-foot{padding-right:calc(100% - var(--cut) - var(--pad))}
.hero.hero-split .hero-foot::before{right:auto;width:var(--cut)}
.hero.hero-split .hero-h{font-size:clamp(56px,7.2vw,128px)}

/* Randlose Fotofläche: immer nur ein Bild, ruhiger Wechsel */
.hero-photo{position:absolute;z-index:1;top:clamp(96px,12vh,124px);right:0;bottom:0;width:44%;overflow:hidden;background:var(--sand)}
.hp-in{position:absolute;left:0;right:0;top:-6%;bottom:-6%}
.hero-photo .slide>img{object-position:var(--pos,50% 40%)}
.js .hero-photo{clip-path:inset(0 0 0 100%);transition:clip-path 1.7s var(--ease-io) .3s}
.loaded .hero-photo{clip-path:inset(0 0 0 0)}
.hero-photo::after{content:"";position:absolute;inset:auto 0 0 0;height:34%;z-index:2;pointer-events:none;background:linear-gradient(to top,rgba(42,33,28,.42),transparent)}
.hp-cap{position:absolute;z-index:3;left:clamp(20px,2.6vw,40px);bottom:clamp(20px,3vw,40px);display:flex;align-items:baseline;gap:12px;margin:0;font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:rgba(251,247,240,.82)}
.hp-cap b{display:inline-block;font-family:var(--serif);font-style:italic;font-weight:400;font-size:24px;letter-spacing:0;text-transform:none;color:#FBF7F0;transition:opacity .35s,transform .45s var(--ease-out)}
.hp-cap b.swap{opacity:0;transform:translateY(8px)}
.js .hp-cap{opacity:0;transition:opacity 1s var(--ease) 1.6s}
.loaded .hp-cap{opacity:1}
.hp-line{position:absolute;z-index:3;top:clamp(20px,2.6vw,40px);bottom:clamp(20px,2.6vw,40px);left:0;width:1px;background:rgba(251,247,240,.35)}

/* ==========================================================
   PORTFOLIO VORSCHAU (Startseite, wechselnde Kapitel)
   ========================================================== */
.pf{background:var(--paper);overflow:hidden}
.pf-stage{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(40px,6vw,110px);align-items:center}
.pf-band{position:absolute;z-index:0;top:9%;bottom:9%;left:30%;right:calc(var(--pad) * -1 - 20vw);background:var(--paper-2)}
.pf-media{position:relative;z-index:1;height:clamp(460px,68vh,700px)}
.pf-set{position:absolute;inset:0;visibility:hidden;opacity:0;transition:opacity 1.1s var(--ease),visibility 0s linear 1.1s}
.pf-set.is-active{visibility:visible;opacity:1;transition:opacity 1.1s var(--ease)}
.pf-big{position:absolute;left:0;top:0;width:66%;height:100%;border-radius:999px 999px 4px 4px;box-shadow:var(--shadow)}
.pf-big>img{transform:scale(1.12);transition:transform 2.6s var(--ease-out)}
.pf-set.is-active .pf-big>img{transform:scale(1)}
.js .pf-big{clip-path:inset(100% 0 0 0 round 999px 999px 4px 4px);transition:clip-path 1.5s var(--ease-io)}
.js .pf-set.is-active .pf-big{clip-path:inset(0 0 0 0 round 999px 999px 4px 4px)}
.pf-small{position:absolute;right:2%;bottom:7%;width:38%;aspect-ratio:4/5;border:8px solid var(--paper);border-radius:4px;box-shadow:var(--shadow);opacity:0;transform:translateY(40px);transition:opacity 1s var(--ease) .55s,transform 1.4s var(--ease-out) .55s}
.pf-set.is-active .pf-small{opacity:1;transform:none}

.pf-copy{position:relative;z-index:1;padding-block:20px}
.pf-texts{position:relative;min-height:clamp(300px,34vh,360px)}
.pf-text{position:absolute;inset:0 0 auto 0;visibility:hidden;opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .9s var(--ease-out),visibility 0s linear .7s}
.pf-text.is-active{position:relative;visibility:visible;opacity:1;transform:none;transition:opacity .9s var(--ease) .35s,transform 1.1s var(--ease-out) .35s}
.pf-n{display:block;margin-bottom:18px;font-size:10.5px;font-weight:500;letter-spacing:.28em;color:var(--muted)}
.pf-text h3{font-size:clamp(46px,5.4vw,90px);line-height:.95;letter-spacing:-.02em;margin-bottom:22px}
.pf-text p{max-width:40ch;color:var(--ink-soft);font-size:clamp(15.5px,1.1vw,17.5px)}
.pf-text .ulink{margin-top:26px}
.pf-tabs{list-style:none;margin:clamp(34px,4vw,54px) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 22px}
.pf-tab{position:relative;padding:8px 0 12px;border:0;background:none;cursor:pointer;font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);transition:color .3s}
.pf-tab::before,.pf-tab i{content:"";position:absolute;left:0;right:0;bottom:0;height:1px}
.pf-tab::before{background:var(--line)}
.pf-tab i{background:var(--ink);transform:scaleX(0);transform-origin:0 50%}
.pf-tab:hover,.pf-tab.is-active{color:var(--ink)}
.pf-tab.is-active i{animation:fillDot var(--dur,7s) linear forwards}
.pf.paused .pf-tab.is-active i{animation-play-state:paused}
.no-auto .pf-tab.is-active i{animation:none;transform:scaleX(1)}
.pf-foot{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;margin-top:clamp(34px,4vw,52px)}
.pf-arrows{display:flex;gap:10px}
.pf-arrow{display:grid;place-items:center;width:52px;height:52px;border:1px solid var(--line);border-radius:50%;background:none;cursor:pointer;transition:background .4s,color .4s,border-color .4s}
.pf-arrow:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.pf-prev .ic{transform:rotate(180deg)}

/* ==========================================================
   PORTFOLIO SEITE
   ========================================================== */
.p-intro{position:relative;overflow:hidden;padding-top:clamp(140px,20vh,220px);padding-bottom:clamp(70px,9vw,130px);background:radial-gradient(110% 80% at 85% 10%,#FCF8F1 0%,var(--paper) 55%,var(--paper-2) 100%)}
.p-intro .hero-mark{opacity:1;bottom:-9vw}
.p-intro .wrap{position:relative;z-index:1}
.p-intro h1{font-size:clamp(58px,8.6vw,146px);line-height:.9;letter-spacing:-.03em;margin:0 0 30px}
.p-intro .lead{max-width:48ch}
.p-index{list-style:none;margin:clamp(50px,6vw,90px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(20px,3vw,48px);border-top:1px solid var(--line)}
.p-index a{display:flex;align-items:baseline;gap:16px;padding:22px 2px 20px;border-bottom:1px solid var(--line);transition:padding .6s var(--ease-out)}
.p-index .n{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--clay-ink);min-width:26px}
.p-index .t{font-family:var(--serif);font-weight:300;font-size:clamp(26px,2.4vw,38px);line-height:1.05;transition:color .3s}
.p-index .c{margin-left:auto;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
.p-index a:hover{padding-left:12px}
.p-index a:hover .t{color:var(--clay-ink)}

.chapter{position:relative;padding-block:clamp(84px,10vw,160px);border-top:1px solid var(--line-soft);scroll-margin-top:40px}
.chapter.alt{background:var(--paper-2)}
.ch-grid{display:grid;grid-template-columns:minmax(0,.58fr) minmax(0,1.42fr);gap:clamp(36px,6vw,110px);align-items:start}
.chapter.flip .ch-grid{grid-template-columns:minmax(0,1.42fr) minmax(0,.58fr)}
.chapter.flip .ch-copy{order:2}
.ch-copy{position:sticky;top:118px}
.ch-num{display:block;font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(90px,10vw,170px);line-height:.78;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px var(--sand-deep);margin-bottom:6px}
.ch-copy h2{font-size:clamp(46px,5vw,86px);line-height:.95;letter-spacing:-.02em;margin-bottom:26px}
.ch-copy p{color:var(--ink-soft);max-width:38ch}
.ch-meta{display:flex;align-items:baseline;gap:14px;margin:28px 0 30px;padding-top:20px;border-top:1px solid var(--line)}
.ch-meta small{font-size:10px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.ch-meta b{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.2vw,34px);line-height:1}
.ch-meta em{font-style:normal;font-size:12px;color:var(--muted)}
.ch-count{display:block;margin-top:22px;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.ch-lead{margin:0 0 clamp(16px,2.6vw,44px)}
.ch-lead .g-media{border-radius:999px 999px 4px 4px}
.ch-cols{display:flex;align-items:flex-start;gap:clamp(16px,2.6vw,44px)}
.ch-cols:not(.ready){display:block;columns:2;column-gap:clamp(16px,2.6vw,44px)}
.ch-cols:not(.ready) .g-item{break-inside:avoid;margin-bottom:30px}
.ch-cols .g-col:nth-child(2){padding-top:clamp(40px,7vw,130px)}
.ch-back{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:clamp(50px,6vw,90px);padding-top:24px;border-top:1px solid var(--line)}
.p-cta{padding-block:clamp(90px,11vw,170px);text-align:center;background:var(--cream)}
.p-cta h2{font-size:clamp(46px,6vw,100px);margin-bottom:34px}
.p-cta .lead{margin:0 auto 38px}

@media (max-width:1023px){
  .pf-stage{grid-template-columns:1fr;gap:40px}
  .pf-band{left:20%;top:4%;bottom:auto;height:min(92vw,620px)}
  .pf-media{height:min(110vw,620px)}
  .pf-texts{min-height:0}
  .ch-grid,.chapter.flip .ch-grid{grid-template-columns:1fr}
  .chapter.flip .ch-copy{order:0}
  .ch-copy{position:relative;top:0}
  .p-index{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:899px){
  .hero.hero-split{padding-top:0}
  .hero-photo{position:relative;top:auto;right:auto;bottom:auto;width:100%;height:min(64svh,560px);margin-top:72px;order:-1}
  .js .hero-photo{clip-path:inset(0 0 100% 0)}
  .loaded .hero-photo{clip-path:inset(0 0 0 0)}
  .hero.hero-split .hero-text{max-width:none;padding-top:34px}
  .hero.hero-split .hero-foot{padding-right:var(--pad)}
  .hero.hero-split .hero-foot::before{right:var(--pad);width:auto}
}
@media (max-width:719px){
  .pf-big{width:72%}
  .pf-small{width:42%;right:0;bottom:4%;border-width:6px}
  .pf-tabs{gap:4px 16px}
  .p-index{grid-template-columns:1fr}
  .ch-cols{gap:14px}
  .ch-cols .g-col{gap:22px}
  .ch-cols .g-cap{display:none}
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */
@media (max-width:1179px){
  .nav-links{display:none}
  .menu-btn{display:inline-flex}
}
@media (min-width:1180px){ .menu{display:none} }

@media (max-width:1023px){
  .sec-head .h2{grid-column:1/-1}
  .sec-head .lead{grid-column:1/-1;margin-top:26px}
  .about-grid,.voucher-grid,.contact-grid{grid-template-columns:1fr}
  .about-media{position:relative;top:0;max-width:560px}
  .values{grid-template-columns:1fr}
  .foot-top{grid-template-columns:1fr 1fr}
  .foot-top>div:first-child{grid-column:1/-1}
  .svc-row{grid-template-columns:44px minmax(0,1fr) minmax(120px,auto) 46px}
  .svc-desc{grid-column:2/4;grid-row:2}
  .svc-title{grid-column:2}
}
@media (max-width:899px){
  .hero{padding-top:100px}
  .hero-grid{grid-template-columns:1fr;gap:30px}
  .hero-mark{font-size:62vw;bottom:-14vw}
  .hero-text{padding-bottom:0}
  .scroll-cue{display:none}
  .extras{grid-template-columns:1fr}
}
@media (max-width:719px){
  .svc-row{grid-template-columns:86px minmax(0,1fr);grid-template-areas:"th ti" "th de" "th pr";gap:6px 18px;align-items:start;padding-inline:0}
  .svc-no,.svc-arr{display:none}
  .svc-thumb{display:block;grid-area:th;width:86px;aspect-ratio:3/4;border-radius:999px 999px 4px 4px}
  .svc-title{grid-area:ti;font-size:36px}
  .svc-desc{grid-area:de;font-size:14.5px}
  .svc-price{grid-area:pr;flex-direction:row;align-items:baseline;gap:8px;font-size:26px;margin-top:6px}
  .svc-price em{margin:0 0 0 6px}
  .svc-row:hover .svc-title{transform:none}
  .row2{grid-template-columns:1fr}
  .direct a{grid-template-columns:86px minmax(0,1fr) auto}
  .h-label{display:none}
  .dot{width:34px}
  .lb-nav{top:auto;bottom:24px;margin-top:0;width:52px;height:52px}
  .lb-prev{left:calc(50% - 64px)}
  .lb-next{right:calc(50% - 64px)}
  .lb-top{padding:16px 20px}
}
@media (max-width:520px){
  .logo span{display:none}
  .nav .btn-sm{padding:11px 16px;letter-spacing:.16em}
  .about-coord{display:none}
  .direct b{font-size:18px}
  .mb-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .v-card{transform:rotate(-2deg)}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0ms!important}
  .js .loader{display:none}
}

/* ==========================================================
   HERO: nur Text, mittig
   ========================================================== */
.hero.hero-center{min-height:88vh;min-height:88svh;justify-content:center;align-items:stretch;padding-top:clamp(110px,14vh,150px);padding-bottom:clamp(60px,9vh,110px);text-align:center}
.hero-center .hero-grid{display:flex;justify-content:center;flex:none}
.hero-center .hero-text{max-width:980px;margin-inline:auto;padding-bottom:0}
.hero-center .kicker{justify-content:center}
.hero-center .kicker::after{content:"";width:34px;height:1px;background:var(--clay);flex:none}
.hero-center .hero-h{font-size:clamp(58px,8.4vw,146px)}
.hero-center .hero-p{margin-inline:auto;max-width:46ch}
.hero-center .hero-cta{justify-content:center}
.hero-center .hero-mark{left:50%;bottom:auto;top:50%;transform:translate(-50%,-46%);opacity:1!important;font-size:clamp(260px,38vw,720px);color:var(--cream);opacity:.75!important;transition:none}

/* ==========================================================
   RUHIGE ANIMATIONEN
   Nur noch sanftes Einblenden ohne Bewegung von unten.
   Hero, Über mich, Gutscheine und das Portfolio stehen fest.
   ========================================================== */
/* Überschriften erscheinen nicht mehr Wort für Wort von unten */
/* Textblöcke: nur noch weiches Einblenden, keine Bewegung */
.js .rv{transform:none;transition:opacity .9s var(--ease) var(--rd,0ms)}
/* Linien und Footer Schriftzug stehen fest */
.js .foot-mark .ch{transform:none;transition:none}
/* Satz bei Über mich ist sofort voll lesbar */
/* Gutscheine: Text steht fest */
.js .voucher .rv{opacity:1;transition:none}
/* Gutschein schwebt nicht mehr dauerhaft */
.v-float{animation:none}
/* Portfolio Seite: alles steht fest, Bilder ohne Aufdecken */
.js .chapter .rv,.js .p-intro .rv,.js .p-cta .rv{opacity:1;transition:none}
.js .chapter .g-media,.js .ch-cols .g-media{clip-path:none;transition:none}
.chapter .g-media>img{transform:none;transition:transform 1.2s var(--ease-out)}
.chapter .g-open:hover .g-media>img{transform:scale(1.04)}
/* Portfolio Vorschau: ruhiges Überblenden, Text kommt sanft von der Seite */
.js .pf-big,.js .pf-set.is-active .pf-big{clip-path:none;transition:none}
.pf-big>img{transform:scale(1.03);transition:transform 2.4s var(--ease-out)}
.pf-set.is-active .pf-big>img{transform:none}
.pf-small{transform:translateX(26px)}
.pf-set.is-active .pf-small{transform:none}
.pf-text{transform:translateX(22px)}
.pf-text.is-active{transform:none}
/* Handy: Inhalte stehen sofort fest, außer in Über mich und Preise */
@media (max-width:899px){
  .js section:not(.about):not(.services) .rv{opacity:1;transition:none}
  .hero.hero-center{min-height:auto;padding-top:132px;padding-bottom:84px}
  .hero-center .hero-mark{font-size:78vw}
}
/* Bereichstitel passen sich der Spaltenbreite an (lange Wörter wie Schwangerschaft) */
.ch-copy{container-type:inline-size}
.ch-copy h2{font-size:clamp(40px,5vw,86px);font-size:min(clamp(40px,5vw,86px),14.5cqi)}

/* ==========================================================
   HERO MIT BILDERN, RUHIG
   Text steht sofort, Fotofläche ohne Hereinschieben, ohne Zoom,
   Bilder wechseln nur durch sanftes Überblenden.
   ========================================================== */
.hero.hero-calm{justify-content:center}
.hero-calm .hero-grid{flex:1;align-items:center}
.hero-calm .hero-text{padding-bottom:0}
.js .hero-calm .hero-photo,.loaded .hero-calm .hero-photo{clip-path:none;transition:none}
.hero-calm .hero-photo{bottom:clamp(0px,0vh,0px)}
.hero-calm .hero-photo::after{display:none}
.hero-calm .hp-in{top:0;bottom:0}
.hero-calm .slide{transition:opacity .8s var(--ease)}
.hero-calm .slide>img,.hero-calm .slide.is-active>img{transform:none;transition:none}
@media (max-width:899px){
  .js .hero-calm .hero-photo,.loaded .hero-calm .hero-photo{clip-path:none}
  .hero.hero-calm{padding-bottom:70px}
}

/* ==========================================================
   ÜBER MICH UND PREISE: Animationen wie vorher
   ========================================================== */
.js .about .rv,.js .services .rv{transform:translateY(34px);transition:opacity 1.1s var(--ease-out) var(--rd,0ms),transform 1.2s var(--ease-out) var(--rd,0ms)}
.js .about .rv.in,.js .services .rv.in{transform:none}

/* ==========================================================
   ABSTÄNDE
   Etwas kompakter zwischen den Bereichen. Portfolio Vorschau und
   Preise haben dieselbe Hintergrundfarbe, deshalb dort weniger Luft.
   ========================================================== */
.sec{padding-block:clamp(76px,9vw,140px)}
.pf + .services{padding-top:clamp(24px,3vw,48px)}
.pf{padding-bottom:clamp(76px,8vw,120px)}
.extras-k{margin-top:clamp(56px,6vw,90px)}
@media (max-width:899px){
  .sec{padding-block:76px}
  .pf + .services{padding-top:20px}
}

/* Handy: weniger Luft zwischen Startbereich und Über mich */
@media (max-width:899px){
  .hero.hero-calm{padding-bottom:12px}
  .hero + .about{padding-top:44px}
}

/* ===== KONTAKTFORMULAR: Spamschutz und Sendezustand ===== */
.hp{position:absolute!important;left:-10000px!important;top:auto;width:1px;height:1px;overflow:hidden}
.f-actions .btn[disabled]{opacity:.55;pointer-events:none}
.form-msg a{color:inherit;text-decoration:underline;text-underline-offset:2px}