/* ==========================================================================
   ALWIN GREYSON PHOTOGRAPHY — REFERENCE BUILD · Farbversion B „Feminine Soft Luxury" (nur :root geaendert)
   Praezise nach dem Referenzdesign des Betreibers: cremefarbene Leiste,
   vollflaechiger Hero mit warmem Schleier links, Cormorant-Ueberschrift mit
   kursivem Schlusswort, Pill-CTA, Scroll-Marke, Fortschritt rechts und eine
   dekorative Handschrift unten rechts. Danach die Editorial-Doppelseite mit
   gestapelten Abzuegen. Palette aus den Bildern: Elfenbein, Leinen, Blush,
   Nude, Pilz, Taupe, Rosenholz, Kakao.
   ========================================================================== */
:root{
  --ivory:#F8F1EE; --cream:#FCF7F4; --linen:#F2E6E1; --blush:#EBD5CE; --nude:#DEC3BA; --sand:#CFAFA6;
  --mushroom:#7C6763; --taupe:#7D6666; --mauve:#8A6468; --mauve-2:#74555A; --rosewood:#8E5B60; --cocoa:#33272A;
  --line:#E7D4CF; --line-2:#D5BBB5;
  --on-photo:#FCF6F3; --on-photo-mute:rgba(252,246,243,0.84);
  /* Flaechen, die sonst hart codiert waeren — fuer den Farbtest zentral */
  --haze:214,180,172;            /* warmer Schleier links im Hero */
  --haze-deep:128,90,90;         /* Abdunkelung unten im Hero */
  --shadow:92,60,64;             /* Abzug-Schatten */
  --nav-bg:#F8F1EE;
  --gnav-bg:rgba(248,241,238,0.92);
  --theme:#F8F1EE;
  --fs-micro:clamp(0.68rem,0.64rem + 0.15vw,0.76rem);
  --fs-small:clamp(0.84rem,0.8rem + 0.18vw,0.94rem);
  --fs-body:clamp(1rem,0.94rem + 0.26vw,1.12rem);
  --fs-lead:clamp(1.2rem,1.05rem + 0.7vw,1.6rem);
  --fs-h3:clamp(1.6rem,1.25rem + 1.4vw,2.5rem);
  --fs-h2:clamp(2.4rem,1.5rem + 3.6vw,5rem);
  --fs-display:clamp(2.9rem,1.5rem + 6.2vw,7rem);
  --gutter:clamp(1.25rem,0.5rem + 4vw,6rem);
  --photo-gap:clamp(1rem,0.7rem + 1.5vw,2rem); /* ein Abstandssystem fuer S2, S3 und S4 der Startseite */
  --band-y:clamp(4rem,2rem + 8vw,10rem);
  --nav-h:4.5rem;
  --ease:cubic-bezier(0.22,0.61,0.36,1); --ease-expo:cubic-bezier(0.16,1,0.3,1);
}
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--ivory);color:var(--cocoa);font-family:"Figtree","Figtree Fallback",sans-serif;font-weight:400;font-size:var(--fs-body);line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden;}
img,svg{display:block;max-width:100%;} img{height:auto;}
h1,h2,h3,p,figure,ul,ol,dl,dd,blockquote{margin:0;} ul,ol{list-style:none;padding:0;}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;}
a{color:inherit;text-decoration:none;}
:focus-visible{outline:2px solid var(--rosewood);outline-offset:4px;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.skip{position:absolute;left:1rem;top:-5rem;z-index:300;background:var(--cocoa);color:var(--ivory);padding:0.75rem 1.25rem;transition:top 160ms ease;} .skip:focus{top:1rem;}
html.is-locked,html.is-locked body{overflow:hidden;height:100%;}

/* ---------- Typografie ---------- */
.serif{font-family:"Cormorant Garamond","Cormorant Fallback",serif;font-weight:400;line-height:1.02;letter-spacing:-0.005em;}
.serif em,.serif i{font-style:italic;font-weight:400;}
.display{font-size:var(--fs-display);line-height:1.0;}
.h2{font-size:var(--fs-h2);line-height:1.02;max-width:16ch;}
.h3{font-size:var(--fs-h3);line-height:1.1;}
.lead{font-family:"Cormorant Garamond","Cormorant Fallback",serif;font-size:var(--fs-lead);line-height:1.4;font-weight:400;max-width:34ch;}
.prose{font-family:"Cormorant Garamond","Cormorant Fallback",serif;font-size:calc(var(--fs-body) * 1.12);line-height:1.55;color:var(--taupe);max-width:44ch;} .prose + .prose{margin-top:0.9em;}
.label{display:inline-flex;align-items:center;gap:1rem;white-space:nowrap;font-size:var(--fs-micro);font-weight:500;letter-spacing:0.22em;text-transform:uppercase;color:var(--mushroom);}
.label--rule::after{content:none;}
.num{font-family:"Figtree","Figtree Fallback",sans-serif;font-size:var(--fs-micro);letter-spacing:0.22em;color:var(--mushroom);}
.hand{font-family:"Homemade Apple","Apple Fallback",cursive;font-size:clamp(0.95rem,0.85rem + 0.5vw,1.3rem);line-height:1.5;color:var(--taupe);transform:rotate(-6deg);transform-origin:left bottom;}
.cap{margin-top:0.75rem;font-family:"Cormorant Garamond","Cormorant Fallback",serif;font-style:italic;font-size:var(--fs-body);color:var(--mushroom);}
.wrap{max-width:96rem;margin-inline:auto;padding-inline:var(--gutter);}
.band{padding-block:var(--band-y);}
.band--linen{background:var(--linen);} .band--blush{background:var(--blush);} .band--cream{background:var(--cream);}
.rule{height:1px;background:var(--line);border:0;}
.short-rule{display:none;}

/* Knoepfe: Pill (Mauve oder Creme) und schmaler Rahmen; Textlinks in Versalien mit Linie */
.btn{display:inline-flex;align-items:center;gap:0.9rem;min-height:2.9rem;padding:0.85rem 1.75rem;border-radius:999px;font-size:var(--fs-micro);font-weight:500;letter-spacing:0.2em;text-transform:uppercase;transition:background-color 320ms var(--ease),color 320ms var(--ease);}
.btn svg{width:0.95rem;height:0.95rem;flex:none;transition:transform 320ms var(--ease);} .btn:hover svg{transform:translateX(3px);}
.btn--mauve{background:var(--mauve);color:var(--cream);} .btn--mauve:hover{background:var(--mauve-2);}
.btn--cream{background:rgba(251,247,241,0.92);color:var(--cocoa);} .btn--cream:hover{background:var(--cream);}
.btn--line{border-radius:0;background:transparent;color:var(--cocoa);border:1px solid var(--line-2);} .btn--line:hover{background:var(--linen);}
.btn--fill{border-radius:0;background:var(--mauve-2);color:var(--cream);} .btn--fill:hover{background:var(--rosewood);}
.tlink{position:relative;display:inline-flex;align-items:center;gap:0.9rem;font-size:var(--fs-micro);font-weight:500;letter-spacing:0.2em;text-transform:uppercase;color:var(--cocoa);padding-bottom:0.6rem;}
.tlink::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--cocoa);opacity:0.55;transform-origin:left;transition:transform 480ms var(--ease-expo);}
.tlink:hover::after{transform:scaleX(0);transform-origin:right;}
.tlink svg{width:0.95rem;height:0.95rem;}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;}
.avail{display:inline-flex;align-items:center;gap:0.6rem;font-size:var(--fs-small);color:var(--taupe);} .avail::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--rosewood);}
/* Kundenregel 2026-09-29 „do not crop any images": der Rahmen nimmt das Seitenverhaeltnis des Fotos an (height:auto),
   nirgends object-fit:cover. Wo mehrere Fotos eine Hoehe teilen sollen, folgen die SPALTENBREITEN den Seitenverhaeltnissen. */
.fig{position:relative;overflow:hidden;background:var(--linen);} .fig img{width:100%;height:auto;display:block;}

/* ==========================================================================
   NAVIGATION — cremefarbene Leiste ueber dem Hero: Wortmarke links, Punkte
   mittig, Pill rechts. Sie ist fix; der Hero klebt darunter.
   ========================================================================== */
.nav{position:fixed;inset:0 0 auto 0;z-index:100;height:var(--nav-h);background:var(--nav-bg);display:flex;align-items:center;border-bottom:1px solid transparent;transition:border-color 400ms var(--ease),background-color 700ms var(--ease);}
/* Helle Darstellung der Navigation (Startseite ab dem Portraits-Kapitel): dieselben Tokens wie body.light, nur auf der Leiste */
.nav.is-light{--nav-bg:#FBFAF8;--mauve:#232120;--mauve-2:#0F0E0D;--rosewood:#A47D74;--cocoa:#1B1917;--taupe:#5F5955;--mushroom:#6E6863;}
.nav .btn--mauve{transition:background-color 700ms var(--ease),color 700ms var(--ease);}
.nav.is-scrolled{border-bottom-color:var(--line);}
.nav__inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1.5rem;width:100%;}
/* Wortmarke: das Original-Logo des Kunden (weisses PNG der bestehenden Seite, eingefaerbt) */
.mark{display:block;width:clamp(8.5rem,7.5rem + 2vw,11rem);flex:none;}
.mark img{width:100%;height:auto;display:block;}
.foot .mark{width:clamp(8rem,7rem + 1.5vw,9.5rem);}
.nav__links{display:none;justify-content:center;gap:clamp(1rem,0.2rem + 1.4vw,2rem);}
.nav__links a{font-size:var(--fs-micro);font-weight:500;letter-spacing:0.2em;text-transform:uppercase;color:var(--taupe);position:relative;padding-block:0.4rem;transition:color 260ms var(--ease);}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rosewood);transform:scaleX(0);transform-origin:right;transition:transform 420ms var(--ease-expo);}
.nav__links a:hover,.nav__links a[aria-current="page"],.nav__links a.is-active{color:var(--cocoa);}
.nav__links a:hover::after,.nav__links a[aria-current="page"]::after,.nav__links a.is-active::after{transform:scaleX(1);transform-origin:left;}
.nav__cta{display:none;justify-self:end;white-space:nowrap;}
@media (min-width:64rem) and (max-width:79.99rem){ .nav__cta{padding-inline:1.2rem;} .nav__links a{letter-spacing:0.14em;} }
.burger{width:3rem;height:3rem;display:grid;place-items:center;margin-right:-0.75rem;color:var(--cocoa);justify-self:end;}
.burger span{display:block;width:22px;height:1px;background:currentColor;position:relative;transition:background-color 200ms linear;}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:22px;height:1px;background:currentColor;transition:transform 420ms var(--ease-expo);}
.burger span::before{top:-7px;} .burger span::after{top:7px;}
.burger[aria-expanded="true"] span{background:transparent;}
.burger[aria-expanded="true"] span::before{transform:translateY(7px) rotate(45deg);} .burger[aria-expanded="true"] span::after{transform:translateY(-7px) rotate(-45deg);}
.menu{position:fixed;inset:0;z-index:99;background:var(--linen);display:flex;flex-direction:column;justify-content:center;padding:var(--nav-h) var(--gutter) 2rem;opacity:0;visibility:hidden;transition:opacity 480ms var(--ease),visibility 0s linear 480ms;}
.menu.is-open{opacity:1;visibility:visible;transition-delay:0s;}
.menu__links{display:flex;flex-direction:column;gap:0.5rem;}
.menu__links a{font-family:"Cormorant Garamond","Cormorant Fallback",serif;font-size:clamp(2.4rem,1.4rem + 5vw,3.75rem);line-height:1.08;}
.menu__links a:hover{color:var(--rosewood);}
.menu__links .menu__page{margin-top:1rem;padding-top:1.25rem;border-top:1px solid var(--line-2);font-style:italic;font-size:clamp(1.7rem,1.1rem + 3vw,2.5rem);color:var(--taupe);}
html.motion .menu__links a{opacity:0;transform:translateY(18px);}
html.motion .menu.is-open .menu__links a{opacity:1;transform:none;transition:opacity 520ms var(--ease),transform 720ms var(--ease-expo);}
html.motion .menu.is-open .menu__links a:nth-child(1){transition-delay:80ms;} html.motion .menu.is-open .menu__links a:nth-child(2){transition-delay:140ms;} html.motion .menu.is-open .menu__links a:nth-child(3){transition-delay:200ms;} html.motion .menu.is-open .menu__links a:nth-child(4){transition-delay:260ms;} html.motion .menu.is-open .menu__links a:nth-child(5){transition-delay:320ms;} html.motion .menu.is-open .menu__links a:nth-child(6){transition-delay:380ms;}
.menu__meta{margin-top:auto;padding-top:2.5rem;font-size:var(--fs-small);color:var(--taupe);display:grid;gap:0.35rem;}
@media (min-width:64rem){ .nav__links{display:flex;} .nav__cta{display:inline-flex;} .burger,.menu{display:none;} }

/* ==========================================================================
   STAGE + HERO — der Hero klebt unter der Leiste; die naechste Sektion faehrt
   als Fläche von unten darueber (CSS sticky, kein Pin). Der Schleier links
   ist ein warmer Verlauf, der Text steht auf dem Foto.
   ========================================================================== */
/* Die Buehne beginnt UNTER der fixen Leiste. Ohne dieses Polster schob das
   Sticky den Hero schon bei Scroll 0 um die Leistenhoehe nach unten, waehrend
   sein Layoutplatz bei 0 blieb — die folgende Sektion ueberlappte den Hero
   im Ruhezustand um 72 px und verdeckte Scroll-Marke und Signatur (gemessen). */
.stage{position:relative;padding-top:var(--nav-h);}
/* V2.1: Die Buehne ist 3:2 (Seitenverhaeltnis des ersten Motivs) und hoechstens eine Fensterhoehe; jedes Motiv liegt
   VOLLSTAENDIG darin (object-fit: contain), die Restflaeche fuellt eine weichgezeichnete Kopie desselben Motivs. */
.hero{position:sticky;top:var(--nav-h);z-index:1;overflow:hidden;background:var(--cocoa);display:grid;}
.hero__frame{position:relative;grid-area:1 / 1;width:100%;aspect-ratio:3/2;max-height:calc(100svh - var(--nav-h));min-height:20rem;overflow:hidden;}
/* V2.2: auf dem Desktop wieder die volle Fensterhoehe wie in V2 — das Motiv liegt VOLLSTAENDIG und rechtsbuendig in der
   Buehne (object-fit: contain), die Restflaeche links (unter dem Schleier, wo die Zeilen stehen) fuellt die
   weichgezeichnete Kopie desselben Motivs. Kein Beschnitt, kein Bild ueber einem Bild. */
/* V2.3: auf dem Desktop ein kontrollierter Beschnitt statt Fuellflaeche — cover mit Fokuspunkt je Motiv (Paar/Gesichter
   bleiben vollstaendig; es faellt Himmel bzw. Rasen weg: bei 1440×900 ca. 14 % der Hoehe beim Konfetti-, ca. 20 % bei den
   beiden 7:5-Motiven). Die weichgezeichnete Fuellung ist dort nicht mehr sichtbar. */
@media (min-width:64rem){ .hero__frame{aspect-ratio:auto;height:calc(100svh - var(--nav-h));min-height:34rem;} .hero__frame .hero__slide img{object-fit:cover;object-position:50% 42%;} .hero__frame .hero__slide:nth-child(2) img{object-position:50% 56%;} .hero__frame .hero__slide:nth-child(3) img{object-position:50% 46%;} .hero__frame .hero__slide .hero__fill{display:none;} } /* .hero__frame davor: die Basisregel (contain) steht spaeter in der Datei */
.stage > .over{position:relative;z-index:2;}
.hero__slides{position:absolute;inset:0;}
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity 1600ms var(--ease);}
.hero__slide.is-on{opacity:1;}
.hero__slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;}
.hero__slide .hero__fill{object-fit:cover;filter:blur(26px) saturate(1.05);transform:scale(1.12);opacity:0.92;will-change:transform;}
.hero__haze{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to right,rgba(var(--haze),0.40) 0%,rgba(var(--haze),0.22) 34%,rgba(var(--haze),0.04) 60%,rgba(var(--haze),0) 76%),linear-gradient(to top,rgba(var(--haze-deep),0.22) 0%,rgba(var(--haze-deep),0) 42%);}
.hero__dim{position:absolute;inset:0;pointer-events:none;background:var(--cocoa);opacity:0;}
.hero__content{position:relative;z-index:2;grid-area:1 / 1;align-self:center;width:100%;color:var(--on-photo);display:grid;gap:clamp(1rem,0.7rem + 1.2vw,1.5rem);max-width:46rem;padding-inline:var(--gutter);}
.hero__where{display:flex;gap:1.1rem;font-size:var(--fs-micro);font-weight:500;letter-spacing:0.28em;text-transform:uppercase;color:var(--on-photo-mute);}
.hero__where i{font-style:normal;opacity:0.7;}
.hero__title{font-size:clamp(2.6rem,1.2rem + 3.7vw,4.7rem);line-height:1.02;}
.hero__title span{display:block;}
.hero__sub{font-family:"Cormorant Garamond","Cormorant Fallback",serif;font-size:var(--fs-lead);line-height:1.35;max-width:30ch;color:var(--on-photo);}
.hero__actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.75rem;margin-top:0.5rem;}
.hero__tag{font-size:var(--fs-micro);font-weight:500;letter-spacing:0.22em;text-transform:uppercase;color:var(--on-photo-mute);}
.hero__play{display:inline-flex;align-items:center;gap:0.9rem;color:var(--on-photo);font-size:var(--fs-micro);font-weight:500;letter-spacing:0.2em;text-transform:uppercase;position:relative;padding-bottom:0.5rem;}
.hero__play::after{content:"";position:absolute;left:0;right:2.9rem;bottom:0;height:1px;background:currentColor;opacity:0.7;}
.hero__play i{display:grid;place-items:center;width:2.1rem;height:2.1rem;border-radius:50%;border:1px solid currentColor;font-style:normal;}
.hero__play i svg{width:0.7rem;height:0.7rem;}
.hero__scroll{position:absolute;left:var(--gutter);bottom:2.5rem;z-index:2;display:flex;align-items:center;gap:1rem;color:var(--on-photo);font-size:var(--fs-micro);letter-spacing:0.24em;text-transform:uppercase;}
.hero__scroll i{position:relative;display:block;width:1px;height:4.5rem;background:currentColor;opacity:0.85;}
.hero__scroll i::after{content:"";position:absolute;left:-3px;bottom:0;width:7px;height:7px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg);}
.hero__sign{position:absolute;right:calc(var(--gutter) + 2.5rem);bottom:2.75rem;z-index:2;color:var(--on-photo);font-family:"Homemade Apple","Apple Fallback",cursive;font-size:clamp(1.1rem,0.9rem + 0.9vw,1.7rem);line-height:1.5;text-align:right;transform:rotate(-7deg);transform-origin:right bottom;}
.hero__sign small{display:block;font-size:0.62em;opacity:0.9;}
.hero__sign--plain{font-family:"Figtree","Figtree Fallback",sans-serif;font-size:var(--fs-micro);letter-spacing:0.22em;text-transform:uppercase;transform:none;text-shadow:none;color:var(--on-photo-mute);}
@media (min-width:64rem){ .hero__content{padding-left:calc(var(--gutter) + 0.5rem);} }
@media (max-width:63.99rem){
  /* Telefon/Tablet: das Foto ungekuerzt oben (3:2), die Zeilen darunter auf Elfenbein */
  .hero{grid-template-rows:auto auto;background:var(--ivory);}
  .hero__frame{grid-area:auto;min-height:0;}
  .hero__content{grid-area:auto;align-self:start;color:var(--cocoa);padding-block:clamp(2rem,1.5rem + 2vw,3rem) 6.5rem;max-width:none;}
  .hero__where,.hero__tag{color:var(--mushroom);} .hero__sub{color:var(--taupe);}
  .hero__haze{background:linear-gradient(to top,rgba(var(--haze-deep),0.18) 0%,rgba(var(--haze-deep),0) 40%);}
  .hero__sub{font-size:calc(var(--fs-body) * 1.15);max-width:32ch;}
  .hero__scroll{color:var(--mushroom);}
  .hero__sign{right:var(--gutter);bottom:2.25rem;font-size:1.05rem;}
  .hero__sign--plain{font-size:var(--fs-micro);}
  .hero__scroll{bottom:2.25rem;} .hero__scroll i{height:2.75rem;}
}
@media (max-width:47.99rem){ .hero__title{font-size:clamp(2.4rem,1.2rem + 6.5vw,3.1rem);} .hero__play{display:none;} }

/* ==========================================================================
   EDITORIAL SPREAD (01 Weddings) — Text links, zwei gestapelte Abzuege rechts:
   ein hohes Foto hinten, ein gerahmter, leicht gedrehter Abzug davor, ein
   rundes Siegel oben rechts, eine Handschrift unten rechts.
   ========================================================================== */
.spread{display:grid;gap:clamp(2.5rem,1.5rem + 4vw,4rem);}
.spread__text{display:grid;gap:1.35rem;align-content:center;}
.spread__text .h2{max-width:16ch;}
.nowrap{white-space:nowrap;} /* „A feeling." bleibt auf jeder Breite eine Zeile (Kundenwunsch); 10 Zeichen passen auch bei 320 px */
.spread__text .prose{max-width:38ch;}
/* Zwei Fotos nebeneinander, gleiche Hoehe (4fr bei 4:5 und 5fr bei 1:1 ergeben
   rechnerisch dieselbe Hoehe), ein Abstand, kein Rahmen, kein Versatz. */
/* 4fr bei 4:5 und 5fr bei 1:1 ergeben rechnerisch dieselbe Hoehe: gemeinsame Ober- und Unterkante, ein Abstand */
.spread__art{position:relative;display:grid;grid-template-columns:1399fr 1390fr;gap:var(--photo-gap);align-items:start;} /* Spaltenbreiten = Seitenverhaeltnisse (1500×1072, 1500×1079) → gleiche Hoehe ohne Beschnitt */
.spread__tall{margin:0;}
.spread__print{position:relative;margin:0;}
.spread__seal{position:absolute;right:-0.5rem;top:-2.5rem;width:clamp(5.5rem,4rem + 4vw,8rem);color:var(--sand);z-index:3;}
.spread__seal svg{width:100%;height:auto;}
.spread__note{grid-column:6 / span 7;justify-self:end;margin-top:clamp(1.25rem,1rem + 1.5vw,2.5rem);padding-right:1rem;}
.spread__note .hand{text-align:right;transform:rotate(-6deg);transform-origin:right top;}
@media (min-width:64rem){
  .spread{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(3rem,2rem + 5vw,7rem);align-items:center;}
  .spread__art{padding-top:2rem;}
}
@media (max-width:63.99rem){
  .spread__seal{top:-1.25rem;right:0;}
}

/* ==========================================================================
   STORY — der Tag in Abzuegen, versetzt; ein Vollbleed als Taktschlag
   ========================================================================== */
.story__head{display:grid;gap:1rem;margin-bottom:clamp(2rem,1.5rem + 3vw,4rem);}
.frames{display:grid;gap:clamp(1.25rem,0.8rem + 2vw,2.5rem) clamp(0.9rem,0.6rem + 1.5vw,2rem);grid-template-columns:repeat(12,minmax(0,1fr));align-items:start;}
.frames + .frames{margin-top:clamp(2rem,1.5rem + 4vw,5rem);}
.frames .fig{aspect-ratio:4/5;} .frames .fig.is-wide{aspect-ratio:3/2;} .frames .fig.is-land{aspect-ratio:4/3;}
.frame{grid-column:span 6;}
@media (min-width:64rem){
  .frame.c-2-5{grid-column:2 / span 4;} .frame.c-7-11{grid-column:7 / span 5;margin-top:clamp(3rem,2rem + 6vw,9rem);}
  .frame.c-1-8{grid-column:1 / span 8;} .frame.c-9-12{grid-column:9 / span 4;align-self:end;}
}
@media (max-width:63.99rem){ .frame.c-1-8{grid-column:1 / -1;} }
.bleed{margin-top:clamp(2.5rem,1.5rem + 4vw,5rem);}
.bleed .fig{aspect-ratio:21/9;max-height:80svh;}
.bleed .cap{padding-inline:var(--gutter);}
@media (max-width:47.99rem){ .bleed .fig{aspect-ratio:4/5;} }

/* ==========================================================================
   SELECTED WORK — horizontale Werkleiste (Mechanik aus alwin-greyson-v1).
   Gemeinsame HOEHE, Breite folgt dem Seitenverhaeltnis: liest sich wie ein
   Kontaktabzug. Ab 64 rem scrollgebunden (main.js), darunter nativ.
   ========================================================================== */
.work{overflow:hidden;padding-block:clamp(3rem,2rem + 4vw,5rem);}
.work__head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem 3rem;}
.work__head .h2{max-width:14ch;}
.work__aside{display:grid;gap:1rem;justify-items:start;}
.work__hint{display:flex;align-items:center;gap:0.7rem;font-size:var(--fs-micro);letter-spacing:0.22em;text-transform:uppercase;color:var(--mushroom);}
.work__hint i{display:none;}
/* V2.2: die horizontale Werkleiste ist zurueck (Showcase, keine Galerie). Eine gemeinsame Hoehe, die BREITE folgt dem
   natuerlichen Seitenverhaeltnis jedes Fotos — nichts beschnitten, ein Abstand, kein Schatten. Ab 64 rem scrollgebunden
   (main.js pinnt Kopf + Leiste), darunter nativer Wischbereich mit Snap. */
.rail{
  margin-top:clamp(1.5rem,1rem + 2vw,2.5rem);
  display:flex;align-items:flex-start;gap:var(--photo-gap);
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  padding-inline:var(--gutter);padding-bottom:1.25rem;
  scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;
}
.rail::-webkit-scrollbar{height:2px;} .rail::-webkit-scrollbar-thumb{background:var(--line-2);}
.rail__item{flex:none;scroll-snap-align:center;margin:0;}
.rail__item .fig{width:auto;height:auto;}
.rail__item .fig img{height:clamp(14rem,46vh,28rem);width:auto;max-width:none;}
@media (min-width:64rem){ [data-work].is-pinned .rail{overflow:visible;scroll-snap-type:none;padding-bottom:0;} .work__pin{padding-top:clamp(1.25rem,0.5rem + 1.2vw,2rem);} }
@media (max-width:47.99rem){
  .rail{scroll-padding-inline:var(--gutter);}
  .rail__item{scroll-snap-align:start;}
  .rail__item .fig img{height:16rem;}
  .work__hint{display:none;}
}

.row-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:1rem 2rem;margin-bottom:clamp(1.75rem,1.2rem + 2vw,3rem);}

/* ==========================================================================
   ALWIN — Portraet mit Passepartout, Text daneben, Zahlen als Zeile
   ========================================================================== */
.alwin{display:grid;gap:clamp(2rem,1.5rem + 3vw,4rem);}
.alwin__fig{background:var(--cream);padding:clamp(0.9rem,0.6rem + 1.2vw,1.6rem);}
.alwin__text{display:grid;gap:1.25rem;align-content:center;}
.alwin__names{font-family:"Cormorant Garamond","Cormorant Fallback",serif;font-style:italic;font-size:var(--fs-lead);color:var(--taupe);}
.facts{display:flex;flex-wrap:wrap;gap:1.5rem 3rem;margin-top:0.5rem;padding-top:1.5rem;border-top:1px solid var(--line);}
.facts b{display:block;font-family:"Cormorant Garamond","Cormorant Fallback",serif;font-weight:400;font-size:var(--fs-h2);line-height:1;}
.facts span{font-size:var(--fs-small);color:var(--taupe);letter-spacing:0.04em;}
@media (min-width:64rem){ .alwin{grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(3rem,2rem + 5vw,8rem);align-items:center;} .alwin__fig{transform:rotate(-1.5deg);} }

/* ==========================================================================
   ALSO — Portraits und Commercial als zwei Editorial-Karten (Referenz 2, unten)
   ========================================================================== */
.also{display:grid;gap:clamp(2rem,1.5rem + 3vw,4rem);}
.also__item{display:grid;grid-template-columns:minmax(5rem,8rem) minmax(0,1fr);min-width:0;gap:clamp(1.25rem,1rem + 1.5vw,2.25rem);align-items:start;}
.also__item .fig{aspect-ratio:2/3;}
@media (max-width:35.99rem){ .also__item{grid-template-columns:1fr;} .also__item .fig{aspect-ratio:3/2;max-height:14rem;} .also__item .fig img{object-position:50% 18%;} }
.also__body{display:grid;gap:0.6rem;justify-items:start;min-width:0;}
.also__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:0.5rem 1.5rem;width:100%;min-width:0;}
.also__from{text-align:right;font-size:var(--fs-micro);letter-spacing:0.22em;text-transform:uppercase;color:var(--mushroom);}
.also__from b{display:block;font-family:"Cormorant Garamond","Cormorant Fallback",serif;font-weight:400;font-size:var(--fs-h3);letter-spacing:0;text-transform:none;color:var(--cocoa);line-height:1;margin-top:0.25rem;}
.also__sub{font-family:"Cormorant Garamond","Cormorant Fallback",serif;font-style:italic;font-size:var(--fs-lead);color:var(--taupe);}
@media (min-width:56rem){ .also{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,1.5rem + 4vw,6rem);} }

/* ==========================================================================
   COLLECTIONS — drei Karten nach Referenz 2: Name in Versalien, kursive Zeile,
   Preis gross, Hairline, Liste, Rahmenknopf. Die mittlere Karte ist getoent.
   ========================================================================== */
.coll__head{display:grid;gap:1rem;margin-bottom:clamp(1.5rem,1rem + 2vw,2.5rem);}
.coll__head .lead{font-style:italic;max-width:38ch;}
@media (min-width:64rem){ .coll__head{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:3rem;} .coll__head .lead{justify-self:end;text-align:right;} }
.plans{display:grid;gap:clamp(0.9rem,0.6rem + 1.4vw,1.75rem);}
@media (min-width:56rem){ .plans{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;} }
.plan{position:relative;background:var(--cream);border:1px solid var(--line);padding:clamp(1.6rem,1.2rem + 1.8vw,2.75rem);display:grid;gap:0.5rem;align-content:start;}
.plan--tint{background:var(--blush);border-color:var(--nude);}
.plan__name{font-family:"Cormorant Garamond","Cormorant Fallback",serif;font-weight:500;font-size:var(--fs-h3);letter-spacing:0.14em;text-transform:uppercase;line-height:1.1;}
.plan__tag{font-family:"Cormorant Garamond","Cormorant Fallback",serif;font-style:italic;font-size:var(--fs-lead);color:var(--taupe);}
.plan__price{font-family:"Cormorant Garamond","Cormorant Fallback",serif;font-size:clamp(2.2rem,1.6rem + 2.6vw,3.6rem);line-height:1;margin-top:1rem;}
.plan__rule{height:1px;background:var(--line-2);margin-block:1.25rem 1rem;}
.plan__list{display:grid;gap:0.45rem;font-family:"Cormorant Garamond","Cormorant Fallback",serif;font-size:calc(var(--fs-body) * 1.08);line-height:1.45;color:var(--cocoa);}
.plan .btn{justify-self:stretch;justify-content:space-between;margin-top:1.75rem;}
.coll__foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:2rem;margin-top:clamp(2.5rem,1.5rem + 4vw,5rem);}
.coll__extras{display:grid;gap:0;max-width:34rem;flex:1 1 20rem;}
.coll__extras > div{display:flex;justify-content:space-between;gap:1.5rem;align-items:baseline;padding-block:0.7rem;border-bottom:1px solid var(--line);font-size:var(--fs-small);color:var(--taupe);}
.coll__extras dt small{display:block;font-size:var(--fs-micro);color:var(--mushroom);margin-top:0.25rem;line-height:1.4;}
.coll__extras dd{font-family:"Cormorant Garamond","Cormorant Fallback",serif;font-size:var(--fs-lead);color:var(--cocoa);white-space:nowrap;}
.coll__bespoke{display:grid;gap:1rem;justify-items:start;max-width:34rem;flex:1 1 20rem;}
.coll__bespoke .lead{font-style:italic;}

/* ==========================================================================
   ENQUIRE — der letzte ruhige Moment: links ein Satz, eine Aktion, zwei
   Kontaktzeilen; rechts EIN Abzug mit Passepartout und die Handschrift.
   ========================================================================== */
.enquire{display:grid;gap:clamp(2.5rem,1.5rem + 4vw,5rem);}
.enquire__copy{display:grid;gap:clamp(1.25rem,1rem + 1.2vw,1.75rem);justify-items:start;align-content:center;}
.enquire__title{font-size:clamp(2.8rem,1.4rem + 5.4vw,6.6rem);line-height:0.98;max-width:9ch;}
.enquire__title em{color:var(--mauve-2);}
.enquire__lead{font-family:"Cormorant Garamond","Cormorant Fallback",serif;font-size:var(--fs-lead);line-height:1.4;color:var(--taupe);max-width:30ch;}
.enquire__contacts{display:grid;gap:0.4rem;margin-top:0.5rem;padding-top:1.25rem;border-top:1px solid var(--line);min-width:min(100%,22rem);font-size:var(--fs-small);color:var(--taupe);}
.enquire__contacts a{color:var(--cocoa);}
.enquire__art{position:relative;justify-self:end;width:min(100%,30rem);}
.enquire__print{background:var(--cream);padding:clamp(0.8rem,0.6rem + 1vw,1.4rem);}
@media (min-width:64rem){
  .enquire{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center;gap:clamp(3rem,2rem + 5vw,8rem);}
  .enquire__art{transform:rotate(1.5deg);}
}
@media (max-width:63.99rem){ .enquire__art{justify-self:start;width:min(100%,24rem);} }
/* V2 Commercial-Abschluss: Bild ohne Rahmen und Drehung, randbuendig in seiner Spalte, Text mittig davor;
   kompakteres Band auf Cream, damit es sich vom weissen FAQ absetzt und als Endpunkt liest */
.enquire--com{padding-block:clamp(3.5rem,2.5rem + 4vw,7rem);}
.enquire--com .enquire__title{font-size:clamp(2.6rem,1.3rem + 4.6vw,5.6rem);}
.enquire__print--plain{background:none;padding:0;}
.enquire--com .enquire__art{width:100%;justify-self:stretch;}
@media (min-width:64rem){
  .enquire--com .enquire{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(3rem,2rem + 4vw,6rem);align-items:center;}
  .enquire--com .enquire__art{transform:none;}
}
@media (max-width:63.99rem){ .enquire--com .enquire__art{width:100%;} }
@media (min-width:40rem) and (max-width:63.99rem){ .enquire--com .enquire__art{width:min(100%,26rem);} }

@media (min-width:64rem){ .foot__inner{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);} .foot__contact{justify-self:end;text-align:right;} }

/* ==========================================================================
   UNTERSEITEN — dieselbe Sprache, ruhiger
   ========================================================================== */
.phead{padding-top:calc(var(--nav-h) + clamp(2.5rem,1.5rem + 5vw,7rem));padding-bottom:clamp(2rem,1.5rem + 3vw,4rem);display:grid;gap:clamp(1.25rem,1rem + 1.5vw,2rem);}
.phead .display{max-width:12ch;font-size:clamp(2.6rem,1.2rem + 5.4vw,6.2rem);}
.phead__side{display:grid;gap:1.25rem;align-content:end;}
@media (min-width:64rem){ .phead{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;gap:clamp(2rem,1rem + 4vw,6rem);} }
.plead .fig{aspect-ratio:21/9;max-height:78svh;}
@media (max-width:63.99rem){ .plead{margin-inline:calc(-1 * var(--gutter));} .plead .fig{aspect-ratio:4/5;max-height:none;} }
.two{display:grid;gap:clamp(2rem,1.5rem + 3vw,4rem);}
@media (min-width:64rem){ .two{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(3rem,2rem + 5vw,8rem);align-items:start;} }
.offer{display:grid;gap:clamp(2rem,1.5rem + 3vw,4rem);}
.offer__list{display:grid;border-top:1px solid var(--line-2);}
.offer__list > div{display:grid;grid-template-columns:2.5rem minmax(0,1fr);gap:0.4rem 1rem;padding-block:clamp(1.1rem,0.9rem + 1vw,1.6rem);border-bottom:1px solid var(--line);}
.offer__list h3{font-family:"Cormorant Garamond","Cormorant Fallback",serif;font-weight:400;font-size:var(--fs-h3);line-height:1.15;}
.offer__list p{grid-column:2;font-family:"Cormorant Garamond","Cormorant Fallback",serif;font-size:calc(var(--fs-body) * 1.1);color:var(--taupe);max-width:48ch;}
@media (min-width:64rem){ .offer{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(3rem,2rem + 5vw,8rem);align-items:start;} }
.more{display:grid;gap:clamp(0.9rem,0.6rem + 1.5vw,2rem);grid-template-columns:repeat(4,minmax(0,1fr));align-items:start;}
.more .fig{aspect-ratio:4/5;} .more .frame{grid-column:auto;} .more .frame:nth-child(2),.more .frame:nth-child(4){margin-top:clamp(1.5rem,1rem + 2vw,3rem);}
@media (max-width:47.99rem){ .more{grid-template-columns:repeat(2,minmax(0,1fr));} }
.chapters{display:grid;gap:clamp(4rem,2.5rem + 7vw,9rem);}
.chapter{display:grid;gap:clamp(1.25rem,1rem + 1.5vw,2rem);}
@media (min-width:64rem){ .chapter{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,1rem + 4vw,6rem);} .chapter__head{position:sticky;top:calc(var(--nav-h) + 2rem);} .chapter__imgs .fig:nth-child(2){margin-top:3rem;} }
.gnav{position:sticky;top:var(--nav-h);z-index:50;background:var(--gnav-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line);}
.gnav ul{display:flex;gap:1.5rem 2.5rem;overflow-x:auto;padding-block:1rem;scrollbar-width:none;} .gnav ul::-webkit-scrollbar{display:none;}
.gnav a{font-size:var(--fs-micro);font-weight:500;letter-spacing:0.2em;text-transform:uppercase;color:var(--taupe);white-space:nowrap;padding-bottom:3px;border-bottom:1px solid transparent;transition:color 260ms var(--ease),border-color 260ms var(--ease);}
.gnav a:hover,.gnav a.is-active{color:var(--cocoa);border-color:var(--rosewood);}
.gset{padding-block:clamp(3rem,2rem + 4vw,6rem);scroll-margin-top:calc(var(--nav-h) + 3.5rem);}
.mosaic{display:grid;gap:clamp(0.75rem,0.5rem + 1.2vw,1.5rem);grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:dense;}
.mosaic .fig{aspect-ratio:4/5;} .mosaic .fig.is-wide{grid-column:span 2;aspect-ratio:3/2;} .mosaic .frame{grid-column:auto;} .mosaic .frame.has-wide{grid-column:span 2;}
@media (min-width:48rem){ .mosaic{grid-template-columns:repeat(3,minmax(0,1fr));} } @media (min-width:80rem){ .mosaic{grid-template-columns:repeat(4,minmax(0,1fr));} }
.enquiry{display:grid;gap:clamp(2rem,1.5rem + 3vw,4rem);}
@media (min-width:64rem){ .enquiry{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(3rem,2rem + 5vw,8rem);align-items:start;} }
.form{position:relative;display:grid;gap:clamp(1.25rem,1rem + 1.2vw,1.75rem);}
.form__row{display:grid;gap:clamp(1.25rem,1rem + 1.2vw,1.75rem);} @media (min-width:36rem){ .form__row{grid-template-columns:repeat(2,minmax(0,1fr));} }
.field{display:grid;gap:0.55rem;position:relative;}
.field label{font-size:var(--fs-micro);font-weight:500;letter-spacing:0.2em;text-transform:uppercase;color:var(--mushroom);} .field label .opt{text-transform:none;letter-spacing:0.02em;font-weight:400;}
.field input,.field textarea,.field select{width:100%;font:inherit;font-size:var(--fs-body);color:var(--cocoa);background:transparent;border:0;border-bottom:1px solid var(--line-2);border-radius:0;padding:0.75rem 0;min-height:3rem;transition:border-color 260ms var(--ease);}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 12px) 50%,calc(100% - 7px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2rem;}
.field textarea{resize:vertical;min-height:8rem;line-height:1.55;}
.field input::placeholder,.field textarea::placeholder{color:var(--mushroom);opacity:0.7;}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-bottom-color:var(--mauve);}
.field::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--mauve);transform:scaleX(0);transform-origin:left;transition:transform 0.35s cubic-bezier(0.22,1,0.36,1);pointer-events:none;} .field:focus-within::after{transform:scaleX(1);} .field.is-invalid::after{background:#A9432F;transform:scaleX(1);}
.field.is-valid label::after{content:" \2713";color:var(--mauve);letter-spacing:0;}
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{box-shadow:0 1px 0 0 var(--cocoa);}
.field.is-invalid input,.field.is-invalid textarea,.field.is-invalid select{border-bottom-color:#A9432F;}
.field__err{display:none;font-size:var(--fs-small);color:#A9432F;} .field.is-invalid .field__err{display:block;}
.form__foot{display:grid;gap:1rem;justify-items:start;}
.form .btn.is-busy{pointer-events:none;opacity:0.75;} .form .btn.is-busy::after{content:"";width:0.9em;height:0.9em;margin-left:0.6em;border:1.5px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin 0.8s linear infinite;} @keyframes spin{to{transform:rotate(360deg);}}
.form__context{display:inline-flex;align-items:center;gap:0.6rem;font-size:var(--fs-micro);letter-spacing:0.2em;text-transform:uppercase;color:var(--mauve-2);padding:0.5rem 0.9rem;border:1px solid var(--line-2);border-radius:999px;} .form__context::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--rosewood);}
.form__hint{font-size:var(--fs-small);color:var(--taupe);max-width:52ch;}
.form__status{display:none;max-width:52ch;} .form__status.is-on{display:block;}
.form__status--ok{padding:clamp(1.25rem,1rem + 1vw,1.75rem) clamp(1.25rem,1rem + 1.2vw,2rem);background:var(--linen);border-left:2px solid var(--mauve);font-family:"Cormorant Garamond","Cormorant Fallback",serif;font-size:var(--fs-lead);line-height:1.4;} .form__status--ok strong{font-weight:500;color:var(--cocoa);display:block;margin-bottom:0.25rem;} .form__status--err{color:#A9432F;padding:1rem 1.25rem;border-left:2px solid #A9432F;background:rgba(169,67,47,0.06);}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
.aside{display:grid;gap:1.5rem;align-content:start;}
.aside .fig{max-width:26rem;}
.aside dt{font-size:var(--fs-micro);letter-spacing:0.2em;text-transform:uppercase;color:var(--mushroom);margin-bottom:0.35rem;font-weight:500;}
.aside dd{font-family:"Cormorant Garamond","Cormorant Fallback",serif;font-size:clamp(1.25rem,1.05rem + 0.9vw,1.9rem);line-height:1.3;overflow-wrap:anywhere;}
/* Zweispaltiges Kontaktlayout: die Detailzeile darf nie breiter als ihre Spalte werden (E-Mail = 15,15 em; Spalte ~34 vw) */
@media (min-width:64rem){ .aside dd{font-size:min(clamp(1.25rem,1.05rem + 0.9vw,1.9rem),2.2vw);} }
.aside dd.plain,.aside dd.mail{font-family:"Figtree","Figtree Fallback",sans-serif;font-size:var(--fs-body);color:var(--taupe);}
.aside address{font-style:normal;}
/* Kundenvorgabe 2026-10-03: drei Fotos (Wedding, Portrait, Commercial) neben dem gemeinsamen Formular */
/* 2026-10-04: ruhige Dreiergruppe statt dreier Galeriebilder — eine Breite (20rem), ein Format (3:2, Fokus oben-mittig,
   damit keine Koepfe fallen), gleiche Abstaende (1.75rem), Bereichsname als Mikro-Label unter dem Bild (Stil der dt-Zeilen). */
/* 2026-10-04: ohne Beschriftung (Alwin wollte drei Bilder, keine Labels) — ein gleichmaessiger Abstand von 1.25rem zwischen den
   drei Bildern; ab 64rem beginnt die Gruppe auf der Hoehe der ersten Formularzeile (40 px unter der Kartenkante). */
.aside__trio{display:grid;gap:1.25rem;max-width:20rem;}
.aside__pic{margin:0;display:grid;gap:0;}
.aside__pic .fig{aspect-ratio:3/2;} .aside__pic .fig img{height:100%;object-fit:cover;object-position:50% 40%;}
@media (min-width:64rem){ .aside__trio{margin-top:2.5rem;} }
@media (min-width:40rem) and (max-width:63.99rem){ .aside__trio{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;gap:var(--photo-gap);} }
@media (max-width:39.99rem){ .aside__trio{max-width:none;} } /* Telefon: volle Spaltenbreite statt 20rem */
.ilink{position:relative;display:inline-flex;align-items:center;gap:0.5rem;padding-bottom:2px;}
.ilink::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rosewood);transform-origin:left;transition:transform 480ms var(--ease-expo);}
.ilink:hover::after{transform:scaleX(0);transform-origin:right;}

/* ==========================================================================
   MOTION — Ausgangszustaende an html.motion; nichts wird maskiert
   ========================================================================== */
html.motion .r{opacity:0;transform:translateY(18px);}
html.motion .r-img{opacity:0;transform:translateY(12px);} /* V2.1: kein Zoom im Rahmen */
html.motion .hero__content > *{opacity:0;transform:translateY(18px);}
html.motion .hero__scroll,html.motion .hero__sign{opacity:0;}
@media (prefers-reduced-motion:reduce){
  html.motion .r,html.motion .hero__content > *{opacity:1;transform:none;}
  html.motion .r-img{opacity:1;transform:none;}
  html.motion .hero__scroll,html.motion .hero__sign{opacity:1;}
  html.motion .menu__links a{opacity:1;transform:none;}
  .hero__slide{transition:none;}
}

/* ==========================================================================
   02 PHOTO STORY — Doppelseite 3:2 nach Referenz. Die Leinwand ist ein
   3:2-Rechteck, das in die Buehne (eine Fensterhoehe) passt; alle Abzuege,
   Texte und Labels liegen in Prozent darauf. Mobil: Fluss.
   ========================================================================== */
.pstory{background:var(--ivory);padding-block:clamp(3rem,2rem + 4vw,5rem);}
.pstory__ph{margin:0;}
.pstory__ph .fig{width:100%;}
.pstory__ph img{will-change:transform;}
.pstory__label{gap:0.9rem;white-space:nowrap;}
.pstory__label i{display:none;}
.pstory__title{font-size:clamp(2.4rem,1.2rem + 4.4vw,6rem);line-height:1.0;}
.pstory__title em{color:var(--mauve-2);}
.pstory__prose{max-width:30ch;}
.pstory__col{display:grid;gap:0.35rem;font-size:var(--fs-micro);font-weight:500;letter-spacing:0.22em;text-transform:uppercase;color:var(--taupe);}
.pstory__col-rule{display:none;}
.pstory__tag{font-size:var(--fs-micro);font-weight:500;letter-spacing:0.22em;text-transform:uppercase;color:var(--taupe);white-space:nowrap;}
.pstory__hand{font-size:clamp(1rem,0.8rem + 0.9vw,1.6rem);line-height:1.35;color:var(--taupe);}
.pstory__cap{display:block;color:var(--taupe);line-height:1.3;font-size:clamp(0.9rem,0.8rem + 0.4vw,1.1rem);}
/* ---- Mobil / Tablet / kurze Desktop-Fenster (< 44 rem hoch): eigene Reihe, kein Pin.
   Bei 640 px Hoehe waere die 3:2-Leinwand 756 px breit — Text und Abzuege
   kollidierten (nachgemessen). ---- */
@media (max-width:63.99rem), (max-height:43.99rem){
  .pstory__canvas{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--photo-gap);align-items:start;padding-inline:var(--gutter);}
  .pstory__ph{position:relative;}
  .pstory__text{grid-column:1 / -1;order:-1;display:grid;gap:1.1rem;margin-bottom:0.5rem;}
  .ph-1{grid-column:1 / -1;order:0;}
  .ph-a{grid-column:1 / span 6;order:1;}
  .ph-4{grid-column:7 / span 6;order:2;}
  .ph-5{grid-column:1 / -1;order:4;}
  .ph-3{grid-column:1 / -1;order:5;}
  .ph-6{display:none;}
  .pstory__cap{width:max-content;max-width:100%;margin-top:0.55rem;}

  .hand-1{grid-column:1 / span 5;order:5;align-self:end;transform:rotate(-8deg);}
  .hand-2{grid-column:1 / span 8;order:6;transform:rotate(-5deg);margin-top:0.5rem;}
  .pstory__col{display:none;}
  .pstory__tag{grid-column:1 / -1;order:8;white-space:normal;}
}
/* ---- Desktop: Buehne + 3:2-Leinwand ---- */
@media (min-width:64rem) and (min-height:44rem){
  .pstory{padding-block:0;}
  .pstory__stage{height:calc(100svh - var(--nav-h));min-height:36rem;max-height:60rem;display:flex;align-items:center;justify-content:center;overflow:hidden;padding-block:2rem;}
  .pstory__canvas{position:relative;aspect-ratio:3/2;width:min(100% - 2 * var(--gutter),calc((100svh - var(--nav-h) - 4rem) * 1.5));max-width:96rem;container-type:inline-size;}
  .pstory__ph,.pstory__text,.pstory__hand,.pstory__col,.pstory__tag{position:absolute;}
  /* Geometrie: zwei Reihen, jede Reihe gleiche Hoehe (3:2 bei --w, 2:3 bei --n = 4/9 --w),
     alle Abstaende = --photo-gap; rechte Kante beider Reihen bei 98 cqw, linke bei 6 cqw.
     Zwischen den Reihen kommt der Platz fuer die Bildunterschrift dazu. */
  /* Hierarchie: EIN Leitbild (16:10) neben dem Text, darunter eine Reihe aus vier gleich hohen
     Bildern (2:3, 3:2, 2:3, 3:2). Alle Abstaende = --photo-gap; Kanten bei 6 und 98 cqw. */
  /* Kundenwortlaut „all photographs the same height": alle fuenf Bilder haben EINE Hoehe (--h).
     Reihe 1 rechts vom Text: Auto 3:2 + Register 2:3; Reihe 2 volle Breite: Golden 3:2, Bridesmaid 2:3, Reden 3:2.
     Abstaende = --photo-gap, Kanten bei 6 und 98 cqw; zwischen den Reihen der Platz fuer die Bildunterschrift. */
  /* V2.1: eine Hoehe --h fuer alle fuenf Bilder, Breiten aus den NATUERLICHEN Seitenverhaeltnissen (Auto 1,3993 · Register 0,6667 ·
     Golden 1,5 · Bridesmaid 0,6667 · Reden 1,5). Reihe 2: (1,5 + 0,6667 + 1,5) h + 2 Luecken = 92 cqw. */
  .pstory__canvas{--pg:var(--photo-gap);--h:calc((92cqw - 2 * var(--pg)) / 3.6667);--n:calc(var(--h) * 0.6667);--w:calc(var(--h) * 1.5);--w1:calc(var(--h) * 1.3993);--row2:calc(4cqw + var(--h) + var(--pg));}
  .pstory__text{left:6cqw;top:3cqw;width:34cqw;display:grid;gap:1.1cqw;z-index:4;justify-items:start;transform-origin:0 0;will-change:transform;} /* etwas enger, damit der hoehere Block bei 1024 px ueber der zweiten Reihe bleibt */
  .pstory__title{font-size:4.9cqw;line-height:1.02;}
  /* V2.2: Beschreibung in echter Fliesstextgroesse (vorher 1,2 cqw ≈ 14,9 px bei 1440), nie unter --fs-body */
  .pstory__prose{font-size:max(var(--fs-body),1.5cqw);line-height:1.55;max-width:30ch;}
  .pstory__label{font-size:max(0.58rem,0.78cqw);} .pstory__label i{width:9cqw;}
  .pstory__text .tlink{font-size:max(0.58rem,0.78cqw);padding-bottom:0.6cqw;}
  .pstory__col,.pstory__tag{font-size:clamp(0.6rem,0.72cqw,0.74rem);}
  .pstory__col{gap:0.3cqw;}
  .pstory__hand{font-size:max(0.8rem,1.45cqw);line-height:1.3;}
  .ph-1{left:calc(98cqw - var(--n) - var(--pg) - var(--w1));top:4cqw;width:var(--w1);z-index:3;}
  .ph-a{left:calc(98cqw - var(--n));top:4cqw;width:var(--n);z-index:2;}
  .ph-5{left:6cqw;top:var(--row2);width:var(--w);z-index:2;}
  .ph-4{left:calc(6cqw + var(--w) + var(--pg));top:var(--row2);width:var(--n);z-index:2;}
  .ph-3{left:calc(98cqw - var(--w));top:var(--row2);width:var(--w);z-index:2;}
  .ph-6{left:88%;top:44%;width:12.2%;transform:rotate(1.5deg);z-index:1;}                          .ph-6 .fig{aspect-ratio:3/5;}
  .hand-1{left:36%;top:41%;transform:rotate(-22deg);transform-origin:left top;white-space:nowrap;}
  .hand-2{left:83.5%;top:84%;transform:rotate(-12deg);transform-origin:left top;white-space:nowrap;z-index:5;}
  .pstory__cap{position:absolute;white-space:nowrap;font-size:max(0.72rem,1.25cqw);line-height:1.2;}
  .cap-ph-a{top:100%;left:0;margin-top:0.8cqw;}
  .cap-ph-1{top:100%;left:0;margin-top:0.8cqw;}
  .cap-ph-3{top:100%;left:0;margin-top:0.8cqw;}
  .cap-ph-4{top:100%;left:0;margin-top:0.8cqw;}
  .cap-ph-5{top:100%;left:0;margin-top:0.8cqw;}
  .cap-ph-6{top:100%;right:0;text-align:right;margin-top:0.6cqw;transform:rotate(-2deg);transform-origin:right top;font-size:max(0.68rem,1.1cqw);}
  .pstory__col{left:89%;top:10%;}
  .pstory__col--2{left:84%;top:32.5%;}
  .pstory__tag{right:10%;bottom:5.5%;}
}
/* Motion-Ausgangszustaende: nur wenn die Desktop-Choreografie scharf ist */
html.motion.pstory-armed .ph-1,html.motion.pstory-armed .ph-3,html.motion.pstory-armed .ph-4,html.motion.pstory-armed .ph-5,html.motion.pstory-armed .ph-6,html.motion.pstory-armed .ph-a .pstory__cap,html.motion.pstory-armed .pstory__hand,html.motion.pstory-armed .pstory__deco{opacity:0;}

/* ==========================================================================
   WEDDINGS — Story nach Referenz. Text links in einer STATISCHEN Spalte,
   rechts ein Kunstfeld (fester Seitenverhaeltnis-Rahmen), in dem die Prints
   absolut liegen; nur sie werden bewegt.
   ========================================================================== */
.wed-open{padding-top:calc(var(--nav-h) + clamp(2rem,1rem + 3vw,4rem));background:var(--ivory);}
.wed-open__grid{display:grid;gap:clamp(2rem,1.5rem + 3vw,4rem);align-items:center;}
.wed-open__text{display:grid;gap:clamp(1rem,0.7rem + 1.2vw,1.6rem);align-content:center;}
.wed-open__title{font-size:clamp(2.6rem,1.2rem + 4.6vw,5.6rem);line-height:1.02;max-width:12ch;}
.wed-open__lead{max-width:34ch;}
.wed-open__scroll{display:grid;gap:0.9rem;justify-items:start;font-size:var(--fs-micro);letter-spacing:0.24em;text-transform:uppercase;color:var(--mushroom);margin-top:1rem;}
.wed-open__scroll i{display:block;width:1px;height:3.5rem;background:var(--line-2);margin-left:0.25rem;}
.wed-open__art{position:relative;}
.wed-open__hand{position:absolute;right:-0.5rem;bottom:2rem;transform:rotate(-10deg);transform-origin:right bottom;text-align:right;color:var(--taupe);}
@media (min-width:64rem){
  .wed-open__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(3rem,2rem + 5vw,8rem);}
}
@media (max-width:63.99rem){ .wed-open__art{margin-inline:calc(-1 * var(--gutter));} .wed-open__hand{right:var(--gutter);} }

.wed{position:relative;}
.wed-ch,.ch{scroll-margin-top:var(--nav-h);}


/* Kapitel: Text-Spalte + Kunstfeld */
.ch{padding-block:clamp(3rem,2rem + 4vw,6rem);background:var(--ivory);}
.ch--linen{background:var(--linen);}
.ch--journey{padding-block:clamp(2rem,1.5rem + 3vw,4.5rem);overflow:clip;} /* die Oeffnungs-Drift (+44 px) bleibt im Gutter, erzeugt aber sonst scrollWidth > Fenster */
.ch__grid{display:grid;gap:clamp(2rem,1.5rem + 3vw,4rem);}
.ch__text{display:grid;gap:0.9rem;align-content:start;justify-items:start;}
.ch__title{font-size:clamp(2.4rem,1.4rem + 3.4vw,4.4rem);line-height:1.0;max-width:10ch;}
.ch__sub{font-size:var(--fs-micro);font-weight:500;letter-spacing:0.26em;text-transform:uppercase;color:var(--mauve-2);}
.ch__prose{max-width:30ch;margin-top:0.5rem;}
.ch__eye{font-family:"Cormorant Garamond","Cormorant Fallback",serif;font-style:italic;font-size:clamp(1.35rem,1.1rem + 1.1vw,2rem);line-height:1.18;color:var(--mauve-2);max-width:18ch;margin-top:0.75rem;display:grid;gap:0.5rem;}
.ch__eye-label{font-family:"Figtree","Figtree Fallback",sans-serif;font-style:normal;font-size:var(--fs-micro);font-weight:500;letter-spacing:0.22em;text-transform:uppercase;color:var(--mushroom);}
.wed-grow__text .ch__eye{max-width:20ch;font-size:clamp(1.15rem,1rem + 0.7vw,1.5rem);} .wed-gold__text .ch__eye{color:var(--on-photo);max-width:20ch;font-size:clamp(1.15rem,1rem + 0.7vw,1.5rem);} .wed-gold__text .ch__eye-label{color:var(--on-photo-mute);}
.ch__tag{font-size:var(--fs-micro);font-weight:500;letter-spacing:0.22em;text-transform:uppercase;color:var(--taupe);line-height:1.8;}
.ch__hand{color:var(--taupe);transform:rotate(-8deg);transform-origin:left top;margin-top:1rem;}
/* V2.1 Kapitel-Kunstfeld: Raster statt Collage — kein Bild ueber einem anderen, kein Beschnitt, kein Schatten (Kundenregeln).
   Ein grosses Leitbild links, rechts eine Spalte aus zwei Bildern; die Spaltenbreite --b ist so gerechnet, dass Unterkante
   der Spalte = Unterkante des Leitbilds (aus den natuerlichen Seitenverhaeltnissen der ausgelieferten Dateien). */
.ch__art{--g:var(--photo-gap);position:relative;display:grid;gap:var(--g);align-items:start;}
.pr{position:relative;margin:0;min-width:0;}
.pr .fig{width:100%;}
.ch__side{display:none;}
@media (min-width:64rem){
  .ch__grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(2rem,1rem + 4vw,6rem);align-items:center;}
  .ch__text{position:relative;z-index:2;}
  .ch__art{grid-template-columns:minmax(0,1fr) var(--b);grid-template-rows:auto auto;}
  .ch__art .p1{grid-column:1;grid-row:1 / 3;} .ch__art .p2{grid-column:2;grid-row:1;} .ch__art .p3{grid-column:2;grid-row:2;}
  /* Morning (vier Bilder): Kleid 0,7143 hoch links; rechts Make-up 1,5 ueber Ringe 1,3993 + Venedig 1,0 */
  .ch__art--morning{--d:calc((100% - 3.1905 * var(--g)) / 4.2561);grid-template-columns:calc(1.8568 * var(--d) + 1.1905 * var(--g)) calc(1.3993 * var(--d)) var(--d);}
  .ch__art--morning .p1{grid-column:1;grid-row:1 / 3;} .ch__art--morning .p4{grid-column:2 / 4;grid-row:1;}
  .ch__art--morning .p2{grid-column:2;grid-row:2;} .ch__art--morning .p3{grid-column:3;grid-row:2;}
  /* Journey: Auto 1,3993; rechts Hassop 0,7143 ueber Braut 1,5 */
  .ch--journey .ch__grid{grid-template-columns:minmax(0,3fr) minmax(0,9fr);}
  .ch__art--journey{--b:calc((100% - 2.3993 * var(--g)) / 3.892);}
  /* Just married: Konfetti 1,5; rechts Mosborough 1,5 ueber Mutter 1,3993 */
  .ch__art--married{--b:calc((100% - 2.5 * var(--g)) / 3.072);}
  /* Moments in between: Tissington 1,4006 als Leitbild; rechts Bus 1,3993 ueber Bouquet 1,5 */
  .ch__art--between{--b:calc((100% - 2.4006 * var(--g)) / 2.9347);}
  .ch__art--between .p2{grid-column:1;grid-row:1 / 3;} .ch__art--between .p1{grid-column:2;grid-row:1;} .ch__art--between .p3{grid-column:2;grid-row:2;}
  #between .ch__eye{font-size:clamp(1rem,0.92rem + 0.35vw,1.2rem);max-width:30ch;margin-top:0.5rem;line-height:1.35;}
  /* Evening: Tanz 1,5723; rechts Photobooth 0,7143 ueber Halifax 1,3993 */
  .ch__art--evening{--b:calc((100% - 2.5723 * var(--g)) / 4.325);}
  #evening .ch__eye{font-size:clamp(1rem,0.92rem + 0.35vw,1.2rem);max-width:30ch;margin-top:0.5rem;line-height:1.35;}
  #evening .ch__text{gap:0.75rem;}
}
/* Telefon/Tablet: Leitbild ueber die volle Breite, darunter die uebrigen als Paar gleicher Hoehe (Spalten ∝ Seitenverhaeltnis) */
@media (max-width:63.99rem){
  .ch__art{gap:clamp(0.9rem,0.6rem + 1.4vw,1.5rem);}
  .ch__art .p1{grid-column:1 / -1;}
  .ch__art--morning{grid-template-columns:1399fr 1000fr;} .ch__art--morning .p2{grid-column:1;} .ch__art--morning .p3{grid-column:2;} .ch__art--morning .p4{grid-column:1 / -1;}
  .ch__art--journey{grid-template-columns:714fr 1500fr;} .ch__art--journey .p2{grid-column:1;} .ch__art--journey .p3{grid-column:2;}
  .ch__art--married{grid-template-columns:1500fr 1399fr;} .ch__art--married .p2{grid-column:1;} .ch__art--married .p3{grid-column:2;}
  .ch__art--between{grid-template-columns:1399fr 1500fr;} .ch__art--between .p2{grid-column:1 / -1;order:-1;} .ch__art--between .p1{grid-column:1;} .ch__art--between .p3{grid-column:2;}
  .ch__art--evening{grid-template-columns:714fr 1399fr;} .ch__art--evening .p2{grid-column:1;} .ch__art--evening .p3{grid-column:2;}
}

/* 02 Ceremony — EIN Bild auf einer Buehne */
.wed-grow__stage{position:relative;aspect-ratio:2500/1786;overflow:hidden;background:var(--linen);}
.wed-grow__a{position:absolute;inset:0;margin:0;transform-origin:50% 50%;background:transparent;} .wed-grow__a img{height:100%;object-fit:contain;}
.wed-grow__text{position:absolute;left:var(--gutter);bottom:clamp(2rem,1.5rem + 2vw,3.5rem);z-index:3;background:rgba(252,247,244,0.94);padding:clamp(1.1rem,0.9rem + 1vw,1.6rem) clamp(1.25rem,1rem + 1.2vw,2rem);display:grid;gap:0.5rem;opacity:0;}
.wed-grow__line{font-size:clamp(1.8rem,1.2rem + 2.2vw,3.2rem);line-height:1.05;}
.wed-grow__flow{display:none;}
@media (max-width:63.99rem){
  .ch--grow{padding-block:0 clamp(3rem,2rem + 4vw,5rem);background:var(--ivory);}
  .wed-grow__stage{aspect-ratio:auto;overflow:visible;background:transparent;}
  .wed-grow__a{position:relative;inset:auto;} .wed-grow__a img{height:auto;}
  .wed-grow__text{display:none;}
  .wed-grow__flow{display:grid;gap:0.9rem;justify-items:start;padding-top:clamp(1.5rem,1rem + 2vw,2.5rem);}
}

/* 05 Golden hour — Maske faellt, zwei kleine Prints laufen langsamer */
.wed-gold__stage{position:relative;aspect-ratio:2500/1406;overflow:hidden;background:var(--ivory);}
.wed-gold__fig{position:absolute;inset:0;margin:0;transform-origin:50% 50%;} .wed-gold__fig img{height:100%;object-fit:contain;}
.wed-gold__more{display:grid;grid-template-columns:1458fr 1400fr;gap:var(--photo-gap);padding-top:var(--photo-gap);} /* 1500×1029 und 1500×1071: gleiche Hoehe */
.wed-gold__s{margin:0;}
.wed-gold__text{position:absolute;left:0;bottom:0;padding:clamp(4rem,3rem + 4vw,7rem) var(--gutter) clamp(2rem,1.5rem + 2vw,3.5rem);z-index:3;color:var(--on-photo);display:grid;gap:0.5rem;opacity:0;background:linear-gradient(to top,rgba(40,24,20,0.55),rgba(40,24,20,0.28) 55%,rgba(40,24,20,0) 100%);width:min(100%,40rem);}
.wed-gold__text .ch__sub{color:var(--on-photo-mute);}
@media (max-width:63.99rem){
  .ch--gold{padding-block:0 clamp(3rem,2rem + 4vw,5rem);}
  .wed-gold__stage{aspect-ratio:auto;overflow:visible;}
  .wed-gold__fig{position:relative;inset:auto;} .wed-gold__fig img{height:auto;}
  .wed-gold__text{position:relative;inset:auto;color:var(--cocoa);opacity:1;padding:1rem var(--gutter) 0;background:none;}
  .wed-gold__text .ch__eye{color:var(--mauve-2);} .wed-gold__text .ch__eye-label{color:var(--mushroom);} .wed-gold__text .ch__sub{color:var(--mauve-2);}
  .wed-gold__text .ch__sub{color:var(--mauve-2);}
}

/* 06 Evening — tiefer */
.ch--evening{background:var(--cocoa);color:var(--on-photo);}
.ch--evening .ch__tag,.ch--evening .ch__prose,.ch--evening .ch__eye{color:var(--on-photo-mute);}
.ch--evening .ch__sub{color:var(--nude);}
.ch--evening .pr .fig{background:rgba(255,255,255,0.06);}
.ch--evening .tlink{color:var(--on-photo);} .ch--evening .tlink::after{background:var(--on-photo);}

/* Ruhe vor den Collections */
.wed-rest{padding-block:clamp(3rem,2rem + 5vw,7rem) clamp(4rem,2.5rem + 6vw,8rem);}
/* ---------- What remains: Payoff der Story. Text kurz, dann die Bilder (Zeilentypen der Gallery, Reveal ueber r-img, Drift auf den grossen) ---------- */
/* V2 Signature-Moment: der Tag kommt zum Stillstand. Das Konfetti-Bild steht anfangs unscharf und
   gross (Bewegung), setzt sich beim Scrollen scharf und still; der dunkle Schleier des Abends hebt
   sich, dann erscheint die Zeile. Danach die ruhige Kachelreihe auf Cream. */
.keep{padding-block:0 clamp(3rem,2rem + 4vw,6rem);background:var(--cream);}
.keep__stage{position:relative;overflow:hidden;background:var(--cocoa);display:grid;align-items:center;} /* V2.3: Zeilen mittig statt am unteren Rand */
.keep__still{position:absolute;inset:0;margin:0;} .keep__still img{width:100%;height:100%;object-fit:contain;will-change:filter;}
.keep__veil{position:absolute;inset:0;background:linear-gradient(to right,rgba(51,39,42,0.84) 0%,rgba(51,39,42,0.56) 38%,rgba(51,39,42,0.14) 66%,rgba(51,39,42,0) 100%),linear-gradient(to top,rgba(51,39,42,0.5) 0%,rgba(51,39,42,0) 45%);} /* V2.3: Schleier von links (unter den Zeilen), unten nur noch leicht */

@media (min-width:64rem){ .keep__stage{aspect-ratio:3000/2000;} }
@media (max-width:63.99rem){ .keep__still{position:relative;inset:auto;aspect-ratio:3/2;} .keep__still img{height:auto;} .keep__veil{display:none;} .keep__head{padding-top:clamp(2rem,1.5rem + 2vw,3rem);} }
html.motion.keep-armed .keep__head > *{opacity:0;}
.keep__head{position:relative;z-index:2;display:grid;gap:clamp(1rem,0.8rem + 1vw,1.5rem);justify-items:start;padding-block:clamp(3rem,2rem + 5vw,7rem) clamp(2.5rem,1.5rem + 4vw,5.5rem);color:var(--on-photo);} .keep__head .label{color:var(--on-photo-mute);}
.keep__title{font-size:clamp(2.6rem,1.4rem + 4.6vw,6rem);line-height:0.98;max-width:12ch;}
.keep__lead{font-size:var(--fs-lead);line-height:1.4;color:var(--on-photo-mute);max-width:34ch;}
.keep__flow{display:grid;gap:clamp(3rem,2rem + 6vw,9rem);}
.keep .gfig{position:relative;}
.keep__cap{position:absolute;left:0;top:100%;margin-top:0.6rem;font-size:clamp(0.95rem,0.85rem + 0.4vw,1.15rem);line-height:1.3;color:var(--taupe);transform:rotate(-3deg);transform-origin:left top;max-width:100%;}
/* V2: Kacheln links, Schlusssatz rechts daneben — auf dem Desktop bleibt der Satz beim Scrollen
   durch die Galerie auf Fensterhoehe stehen (sticky), damit Bild und Aussage eine Seite bilden */
.keep__body{display:grid;gap:clamp(2.5rem,1.5rem + 4vw,5rem);padding-top:var(--photo-gap);}
.keep__end{margin-top:0;}
@media (min-width:64rem){
  .keep__body{grid-template-columns:minmax(0,8fr) minmax(0,4fr);column-gap:clamp(3rem,2rem + 5vw,7rem);align-items:start;}
  .keep__body .tiles{columns:2;}
  .keep__end{position:sticky;top:calc(var(--nav-h) + 28vh);align-self:start;}
}
.keep__line{font-size:clamp(1.7rem,1.2rem + 1.7vw,2.9rem);line-height:1.15;max-width:18ch;}
.keep__line em{color:var(--mauve-2);}
@media (min-width:64rem){ .keep__head{grid-template-columns:minmax(0,6fr) minmax(0,6fr);row-gap:clamp(1.25rem,1rem + 1vw,1.75rem);padding-block:calc(clamp(3rem,2rem + 4vw,5rem) + 7rem) clamp(3rem,2rem + 4vw,5rem);} /* Block leicht unter die Mitte: die Titelzeile laesst das Gesicht des Braeutigams frei */ .keep__head > *{grid-column:1;} .keep__lead{max-width:30ch;} } /* V2.3: Titel und Lead untereinander in der linken Haelfte, die rechte bleibt dem Foto */
@media (max-width:63.99rem){ .keep__flow{gap:clamp(2.5rem,1.5rem + 4vw,4rem);} .keep__cap{white-space:normal;max-width:100%;} .keep .gfig:has(.keep__cap){margin-bottom:2.2rem;} }
.wed-rest__line{font-size:clamp(1.6rem,1.1rem + 2vw,3rem);line-height:1.2;max-width:22ch;margin-top:1.5rem;}
.wed-rest__line em{color:var(--mauve-2);}

/* ---------- Tile gallery (V2.1): Spaltensatz, jede Kachel im eigenen Seitenverhaeltnis, ein Abstand — nichts beschnitten,
   nichts ueberlappt (Kundenvorgabe „all galleries in tile format", Beispielbild in der PDF). ---------- */
.tiles{--tg:clamp(0.75rem,0.5rem + 1vw,1.25rem);columns:2;column-gap:var(--tg);}
.tiles .tile{display:inline-block;width:100%;margin:0 0 var(--tg);break-inside:avoid;-webkit-column-break-inside:avoid;vertical-align:top;}
.tiles .tile .fig{width:100%;}
@media (min-width:40rem){ .tiles--3{columns:3;} }
@media (max-width:39.99rem){ .tiles{columns:1;} }
.keep .keep__flow,.keep__cap{display:none;}

/* Ausgangszustaende (nur wenn Desktop-Choreografie scharf) */
html.motion.wed-armed [data-ch] .pr{opacity:0;}
html.motion .wed-quiet .r{transform:none;}
html.motion.wed-armed .wed-grow__a{transform:scale(0.5);}
@media (prefers-reduced-motion:reduce){
  .wed-grow__text,.wed-gold__text{opacity:1;}
  html.motion.wed-armed .ch__art .pr{opacity:1;} html.motion.wed-armed .wed-grow__a{transform:none;}
}

/* ==========================================================================
   HELLE SEITEN (Portraits, Commercial): dieselbe Architektur, andere Stimmung.
   Nur Tokens auf <body class="light"> — Nav, Buttons, Footer folgen von selbst.
   ========================================================================== */
.light{--ivory:#FBFAF8;--cream:#FFFFFF;--linen:#F5F2EE;--blush:#F3EEE9;--nude:#E8E1DA;--sand:#D8CEC5;
  --mushroom:#6E6863;--taupe:#5F5955;--mauve:#232120;--mauve-2:#0F0E0D;--rosewood:#A47D74;--cocoa:#1B1917;
  --line:#E7E2DC;--line-2:#D3CCC4;--haze:230,225,218;--haze-deep:60,55,50;--shadow:40,36,32;
  --nav-bg:#FBFAF8;--gnav-bg:rgba(251,250,248,0.92);--theme:#FBFAF8;background:var(--ivory);color:var(--cocoa);}
.light .btn--mauve:hover{background:var(--rosewood);}
.light .avail::before{background:var(--rosewood);}

/* ---------- Portraits: weiss, intim, minimal ---------- */
.por-hero{padding-top:calc(var(--nav-h) + clamp(2rem,1rem + 4vw,5rem));padding-bottom:clamp(3rem,2rem + 4vw,6rem);display:grid;gap:clamp(2rem,1.5rem + 3vw,4rem);}
.por-hero__text{display:grid;gap:clamp(1.25rem,1rem + 1.5vw,2rem);align-content:center;justify-items:start;}
.por-hero__title{font-size:clamp(3rem,1.4rem + 6.4vw,7.6rem);line-height:0.98;max-width:9ch;letter-spacing:-0.01em;}
.por-hero__lead{max-width:30ch;}
.por-hero__art{position:relative;}
@media (min-width:64rem){
  .por-hero{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(3rem,2rem + 6vw,9rem);align-items:end;}
  .por-hero__art{padding-top:clamp(2rem,1rem + 4vw,6rem);}
  .por-hero__text{padding-bottom:clamp(2rem,1rem + 3vw,4rem);}
}
.por-note{padding-block:clamp(2.5rem,1.5rem + 3.5vw,5.5rem);}
.por-note__grid{display:grid;gap:2rem;}
.por-note__q{font-size:clamp(1.9rem,1.2rem + 2.6vw,3.6rem);line-height:1.12;font-style:italic;max-width:22ch;}
@media (min-width:64rem){ .por-note__grid{grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(3rem,2rem + 6vw,9rem);align-items:end;} .por-note .prose{justify-self:end;} }
.por-comp{padding-block:clamp(1.25rem,0.75rem + 2vw,3rem);}
.por-comp--loc{padding-top:clamp(1.5rem,1rem + 2vw,3rem);}
.por-comp__grid{display:grid;gap:1.5rem;}
.por-comp__small{width:min(60%,18rem);}
.por-comp__text{display:grid;gap:0.8rem;align-content:end;justify-items:start;}
.por-comp__text .prose{max-width:26ch;}
@media (min-width:64rem){
  .por-comp__grid{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto 1fr;align-items:start;gap:0 var(--photo-gap);}
  .por-comp__main{grid-row:1 / 3;}
  .por-comp__small{width:100%;grid-row:2;align-self:end;}
  .por-comp__text{grid-row:1;align-self:start;padding-top:0.25rem;}
  /* V2: Location als Leitkomposition — Text oben links, Kinderbild unten links auf der Unterkante
     des grossen Hauptbilds rechts (dieselbe Ordnung wie der Portraits-Teaser der Startseite) */
  .por-comp--loc .por-comp__text{grid-column:1/5;grid-row:1;align-self:start;padding-top:0.5rem;}
  .por-comp--loc .por-comp__small{grid-column:1/5;grid-row:2;align-self:end;}
  .por-comp--loc .por-comp__main{grid-column:5/13;grid-row:1/3;}
  .por-comp--loc .por-comp__text .prose{max-width:22ch;}
  /* Studio als Nebenpaar: Text links, zwei gleich hohe Bilder — bewusst kleiner als Location */
  /* Studio: Text, Maternity (2048×1317) und Familie (2000×1429) in einer Zeile; die beiden Bildspalten ∝ Seitenverhaeltnis → gleiche Hoehe */
  .por-comp--stu .por-comp__grid{grid-template-columns:calc(25% - var(--photo-gap)) calc((75% - var(--photo-gap)) * 0.5263) calc((75% - var(--photo-gap)) * 0.4737);grid-template-rows:auto;align-items:end;}
  .por-comp--stu .por-comp__text{grid-column:1;grid-row:1;align-self:end;padding-bottom:0.25rem;}
  .por-comp--stu .por-comp__small{grid-column:2;grid-row:1;}
  .por-comp--stu .por-comp__main{grid-column:3;grid-row:1;}
}
.por-sess{padding-block:var(--band-y);background:var(--cream);}
.por-sess__head{display:grid;gap:1rem;margin-bottom:clamp(2rem,1.5rem + 3vw,4rem);}
.por-sess__row{display:grid;gap:1rem 2rem;padding-block:clamp(1.75rem,1.25rem + 2vw,3rem);border-top:1px solid var(--line);}
.por-sess__row:last-of-type{border-bottom:1px solid var(--line);}
.por-sess__name{font-size:clamp(2.2rem,1.4rem + 3vw,4.4rem);line-height:1;}
.por-sess__name small{display:block;font-family:"Figtree","Figtree Fallback",sans-serif;font-size:var(--fs-micro);letter-spacing:0.22em;text-transform:uppercase;color:var(--mushroom);margin-top:0.75rem;}
.por-sess__price{font-size:clamp(1.8rem,1.3rem + 1.8vw,2.8rem);line-height:1;white-space:nowrap;}
.por-sess__price small{display:block;font-family:"Figtree","Figtree Fallback",sans-serif;font-size:var(--fs-micro);letter-spacing:0.22em;text-transform:uppercase;color:var(--mushroom);margin-bottom:0.5rem;}
.por-sess__inc{display:grid;gap:0.35rem;font-size:var(--fs-small);color:var(--taupe);}
.por-sess__prices{display:grid;gap:1rem;}
.por-sess__note{margin-top:clamp(1.5rem,1rem + 2vw,2.5rem);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem 2rem;}
@media (min-width:64rem){ .por-sess__row{grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,3fr);align-items:start;} .por-sess__price{text-align:right;} }
.por-trip{padding-block:clamp(2.5rem,1.5rem + 3.5vw,5.5rem);}
.por-trip__grid{display:grid;gap:clamp(0.75rem,0.5rem + 1vw,1.25rem);grid-template-columns:714fr 1400fr 1400fr;align-items:start;} /* 1500×2100 · 1967×1405 · 2000×1429 → eine Hoehe */
.por-trip__grid figure{margin:0;}
@media (max-width:47.99rem){ .por-trip__grid{grid-template-columns:1fr 1fr;} .por-trip__grid > :first-child{grid-column:1 / -1;} }
/* Alwin 04.11.: zweite Reihe mit zwei Portraets in gleicher Hoehe (Spalten im Verhaeltnis der Seitenformate, nichts beschnitten) */
.por-trip__grid--two{grid-template-columns:1400fr 1778fr;margin-top:clamp(0.75rem,0.5rem + 1vw,1.25rem);}
.por-trip__grid--two > :first-child{grid-column:auto;}
.por-gallery{padding-block:var(--band-y) clamp(2rem,1.5rem + 2.5vw,4rem);background:var(--cream);}
.por-gallery__head{display:grid;gap:1rem;margin-bottom:clamp(1.5rem,1rem + 2vw,2.5rem);}
@media (min-width:64rem){ .por-gallery__head{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;} .por-gallery__head .prose{justify-self:end;} }
.quotes--por{background:var(--linen);}
.quotes--wed{background:var(--cream);}
/* V2 Commercial: das Leitzitat gross ueber neun Spalten, daneben das Portraet der zitierten Person,
   darunter zwei Stimmen auf einer Linie — Magazin, nicht Review-Liste */
.quotes--com{background:var(--ivory);}
.quotes--com .quotes__lead p{font-size:clamp(1.7rem,1.15rem + 2vw,2.9rem);line-height:1.18;max-width:30ch;}
.quotes--com .quotes__lead cite{margin-top:0.25rem;}
@media (min-width:64rem){
  /* Leitzitat 1–8, Portraet direkt daneben in 8–12 (eine Luecke, keine Leerspalte am Rand); die
     Oberkante des Portraets liegt auf der ersten Zitatzeile, seine Unterkante auf der Attribution */
  .quotes--com .quotes__lead{grid-column:1/7;grid-row:2;}
  /* Das Bild traegt keine eigene Hoehe (absolut im gestreckten figure): Oberkante = erste Zitatzeile,
     Unterkante = Attribution; Breite vier Spalten direkt neben dem Zitat, eine Spalte Luft am Rand */
  .quotes--com .quotes__fig{grid-column:7/11;grid-row:2;align-self:start;margin-top:clamp(2.2rem,1.6rem + 2vw,3.4rem);}
  .quotes--com .quotes__more{grid-column:1/11;grid-row:3;}
}
@media (max-width:63.99rem){ .quotes--com .quotes__label{order:-2;} .quotes--com .quotes__fig{width:min(50%,16rem);order:-1;} }
.quote-one{padding-block:var(--band-y);background:var(--linen);}
.quote-one blockquote{display:grid;gap:1.5rem;justify-items:center;text-align:center;max-width:36ch;margin-inline:auto;}
.quote-one p{font-size:clamp(1.7rem,1.1rem + 2.2vw,3.1rem);line-height:1.18;font-style:italic;}
.quote-one cite{font-style:normal;font-size:var(--fs-micro);letter-spacing:0.22em;text-transform:uppercase;color:var(--mushroom);}

/* ---------- Commercial: weiss, selbstbewusst, art-directed ---------- */
.com-hero{padding-top:calc(var(--nav-h) + clamp(1.5rem,1rem + 2vw,3rem));display:grid;gap:2rem;}
.com-hero__art{position:relative;}
.com-hero__text{display:grid;gap:clamp(1.25rem,1rem + 1.5vw,2rem);justify-items:start;align-content:start;}
.com-hero__title{font-size:clamp(3.2rem,1.4rem + 9vw,11rem);line-height:0.92;letter-spacing:-0.015em;}
.com-hero__title em{display:block;}
.com-hero__lead{max-width:32ch;}
.com-hero__cap{text-align:right;}
@media (min-width:64rem){
  .com-hero{grid-template-columns:repeat(12,minmax(0,1fr));align-items:start;padding-bottom:clamp(2rem,1rem + 3vw,4rem);column-gap:0;}
  /* V2.1: Text und Portraet teilen sich die Breite ohne Ueberlagerung; das Portraet (1429×2000) ungekuerzt */
  .com-hero__art{grid-column:8/13;grid-row:1;margin-right:calc(-1 * var(--gutter));}
  .com-hero__text{grid-column:1/8;grid-row:1;z-index:2;padding-top:clamp(2rem,1rem + 4vw,6rem);padding-right:var(--photo-gap);}
  .com-hero__lead,.com-hero__text .actions{max-width:34ch;}
  .com-hero__cap{padding-right:var(--gutter);}
}
@media (max-width:63.99rem){ .com-hero__art{margin-inline:calc(-1 * var(--gutter));} }
/* V2 „Crafted…": eine Editorial-Pause — Ueberschrift, ein schmales Produkt-Stillleben als Detail,
   die Beschreibung unten rechts auf dessen Unterkante. Kein zweites grosses Bild. */
/* V2 Signature-Moment „Crafted": Editorial Assembly. Desktop gepinnt (+90 %): das Stillleben
   fuellt anfangs die ganze Buehne (clip-path inset 0) hinter der grossen, zeilenweise versetzten
   Headline; beim Scrollen zieht es sich in seinen 2:3-Rahmen zurueck (Clip auf das Feld des
   Grids), die Zeilen rasten in ihre Endposition, die Beschreibung schiebt von der Bildunterkante
   nach. Endzustand = die statische Komposition (Titel 6/12, Bild 3/12, Text 3/12). */
.com-intro{padding-block:clamp(3.5rem,2.5rem + 4vw,7rem);}
.com-intro__stage{position:relative;}
.com-intro__grid{position:relative;display:grid;gap:clamp(1.5rem,1rem + 2vw,2.5rem);align-items:start;}
.com-intro__title{font-size:var(--fs-h2);line-height:1.02;max-width:14ch;position:relative;z-index:2;}
.com-intro__line{display:block;will-change:transform;}
/* V2.3: das Stillleben groesser und im 3:4-Rahmen (natuerlich 5:7 = 0,714 → 0,75: ca. 5 % der Hoehe, oben/unten Stoff;
   das Messer bleibt komplett), die Beschreibung unter der Headline — Headline, Bild und Text bilden wieder eine Seite */
.com-intro__still{margin:0;width:min(56%,19rem);position:relative;z-index:1;}
.com-intro__still .fig{aspect-ratio:3/4;} .com-intro__still .fig img{height:100%;object-fit:cover;object-position:50% 50%;}
.com-intro__still img{will-change:transform;}
.com-intro__prose{max-width:34ch;position:relative;z-index:2;}
@media (min-width:64rem){
  .com-intro__grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--photo-gap);grid-template-rows:auto 1fr;align-items:end;}
  .com-intro__title{grid-column:1/7;grid-row:1;align-self:start;}
  .com-intro__prose{grid-column:1/5;grid-row:2;align-self:end;}
  .com-intro__still{grid-column:8/12;grid-row:1/3;width:100%;align-self:start;}
  /* Buehne fuer den Pin: eine Fensterhoehe, Grid vertikal mittig; die Vollbild-Aufnahme liegt als
     absolutes Element unter dem Grid und wird per clip-path auf das Bildfeld zusammengezogen */
  html.motion.craft-armed .com-intro{padding-block:0;}
  html.motion.craft-armed .com-intro__stage{height:calc(100svh - var(--nav-h));min-height:34rem;max-height:56rem;display:flex;align-items:center;overflow:hidden;}
  html.motion.craft-armed .com-intro__grid{width:100%;}
  /* V2.1: der Klon ist ein VOLLSTAENDIGES Bild (kein Beschnitt), das per Transform in den Rahmen des Grid-Bilds faehrt */
  html.motion.craft-armed .com-intro__full{position:absolute;left:0;top:0;margin:0;z-index:1;transform-origin:0 0;will-change:transform;overflow:hidden;background:var(--linen);}
  html.motion.craft-armed .com-intro__full img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;display:block;} /* derselbe Ausschnitt wie der Rahmen */
  html.motion.craft-armed .com-intro__still{visibility:hidden;}
  /* Der Schleier liegt IM Klon und wird mitgeclippt: das Bild beginnt „gewaschen" hinter dem
     Cocoa-Titel und klaert sich, waehrend es in seinen Rahmen zieht — kein Farbwechsel im Text */
  html.motion.craft-armed .com-intro__veil{position:absolute;inset:0;background:var(--cream);opacity:0.68;pointer-events:none;}
  html.motion.craft-armed .com-intro__prose{opacity:0;}
}
.com-intro__list{margin-top:1.5rem;font-family:"Cormorant Garamond","Cormorant Fallback",serif;font-size:var(--fs-lead);line-height:1.5;color:var(--cocoa);}
.com-intro__list .label{display:block;margin-bottom:0.5rem;}
.com-work{padding-block:clamp(1rem,0.5rem + 2vw,3rem) clamp(1.5rem,1rem + 2vw,3rem);}

.com-set{display:grid;gap:1.25rem;padding-block:clamp(1.5rem,1rem + 2vw,3.5rem);}
.com-set__head{display:grid;gap:0.6rem;align-content:start;justify-items:start;}
.com-set__title{font-size:var(--fs-h3);line-height:1.08;}
.com-set__head .prose{max-width:22ch;font-size:var(--fs-body);}
.com-set__b{width:min(60%,20rem);}
@media (min-width:64rem){
  .com-set{grid-template-columns:repeat(12,minmax(0,1fr));align-items:end;column-gap:var(--photo-gap);}
  .com-set__head{grid-column:1/4;grid-row:1;align-self:start;position:sticky;top:calc(var(--nav-h) + 2rem);}
  .com-set__a{grid-column:4/10;grid-row:1;}
  .com-set__b{grid-column:10/13;grid-row:1;width:100%;margin-top:0;}
  .com-set--flip .com-set__head{grid-column:10/13;} .com-set--flip .com-set__a{grid-column:1/7;} .com-set--flip .com-set__b{grid-column:7/10;}
  /* Sets, deren zweites Bild querformatig ist, bekommen ihm vier Spalten */
  .com-set--wideb .com-set__a{grid-column:4/9;} .com-set--wideb .com-set__b{grid-column:9/13;}
  .com-set--wideb.com-set--flip .com-set__a{grid-column:1/6;} .com-set--wideb.com-set--flip .com-set__b{grid-column:6/10;}
  .com-set__c{grid-column:1/10;grid-row:2;margin-top:var(--photo-gap);} /* Alwin 04.11.: die Doppelseite in voller Breite unter dem Paar */
}
.com-row3{display:grid;gap:clamp(0.75rem,0.5rem + 2vw,3rem);grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;padding-block:clamp(2rem,1.5rem + 3vw,5rem);}
.com-row3__head{grid-column:1/-1;display:grid;gap:0.6rem;justify-items:start;margin-bottom:0.5rem;}
/* Personal branding (Kunde: „keep images inline at the bottom"): die drei Portraets in EINER Zeile unter dem Text,
   Spalten ∝ Seitenverhaeltnis (1000×1400 · 1000×1400 · 1000×1500) → gleiche Hoehe, gemeinsame Unterkante */
.com-row3--inline{grid-template-columns:1fr;gap:var(--photo-gap);}
/* V2.5: die Bildreihe als eigenes Raster im Wrapper — Spalten ∝ Seitenverhaeltnis (1000×1400 · 1000×1400 · 1000×1500) →
   gleiche Hoehe, gemeinsame Ober- und Unterkante, ein Abstand; der Wrapper traegt den Reveal, also bewegen sich die drei
   Bilder als Einheit */
.com-row3__imgs{grid-column:1/-1;display:grid;grid-template-columns:714fr 714fr 667fr;align-items:end;gap:var(--photo-gap);}
.com-row3__imgs > figure{margin:0;}
@media (max-width:47.99rem){ .com-row3__imgs{gap:clamp(0.5rem,0.4rem + 0.6vw,0.75rem);} }
.com-rates{padding-block:var(--band-y);background:var(--cream);}
.com-rates__grid{display:grid;gap:2.5rem;}
.com-rates__head{display:grid;gap:1rem;justify-items:start;}
.com-rate{display:grid;gap:0.9rem;padding-top:1.5rem;border-top:1px solid var(--line);justify-items:start;}
.com-rate__name{font-size:var(--fs-h3);}
.com-rate__price{font-size:clamp(2.8rem,1.6rem + 4.4vw,6rem);line-height:1;}
.com-rate__price small{font-family:"Figtree","Figtree Fallback",sans-serif;font-size:var(--fs-micro);letter-spacing:0.22em;text-transform:uppercase;color:var(--mushroom);margin-left:0.6rem;}
.com-rate__min{font-size:var(--fs-micro);font-weight:500;letter-spacing:0.22em;text-transform:uppercase;color:var(--mauve-2);margin-top:-0.35rem;}
.com-rate__inc{font-size:var(--fs-small);color:var(--taupe);max-width:28ch;}
.com-rates__note{margin-top:clamp(2rem,1.5rem + 3vw,4rem);padding-top:1.5rem;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem 2rem;}
@media (min-width:64rem){ .com-rates__grid{grid-template-columns:minmax(0,5fr) minmax(0,3.5fr) minmax(0,3.5fr);gap:clamp(2rem,1rem + 4vw,6rem);align-items:start;} }
/* V2 Kundenstimmen: ein Leitzitat gross und editorial neben einer Fotografie, zwei weitere darunter
   auf einer Linie — keine Karten, keine Sterne, Wortlaut unveraendert. */
.quotes{padding-block:var(--band-y);background:var(--linen);}
.quotes__grid{display:grid;gap:clamp(1.5rem,1rem + 2.5vw,3rem);}
.quotes__label{margin:0;}
.quotes__fig{margin:0;} .quotes__fig .fig{width:100%;}
.quotes blockquote{display:grid;gap:1.1rem;align-content:start;margin:0;}
.quotes blockquote p{font-size:clamp(1.2rem,1rem + 0.9vw,1.6rem);line-height:1.35;font-style:italic;color:var(--cocoa);}
.quotes cite{font-style:normal;font-size:var(--fs-micro);letter-spacing:0.22em;text-transform:uppercase;color:var(--mushroom);}
.quotes__lead{position:relative;padding-top:clamp(2.2rem,1.6rem + 2vw,3.4rem);}
.quotes__lead::before{content:"\201C";position:absolute;left:-0.06em;top:-0.1em;font-family:"Cormorant Garamond","Cormorant Fallback",serif;font-size:clamp(5rem,3rem + 6vw,9rem);line-height:1;color:var(--sand);}
.quotes__lead p{font-size:clamp(1.6rem,1.15rem + 1.7vw,2.6rem);line-height:1.22;max-width:30ch;}
.quotes__more{display:grid;gap:clamp(1.5rem,1rem + 2vw,2.5rem);padding-top:clamp(1.5rem,1rem + 2vw,2.5rem);border-top:1px solid var(--line);}
.quotes__more blockquote p{max-width:34ch;}
@media (min-width:48rem){ .quotes__more{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,1.5rem + 3vw,4rem);} }
@media (min-width:64rem){
  .quotes__grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(2rem,1rem + 4vw,6rem);row-gap:clamp(2rem,1.5rem + 3vw,4rem);align-items:start;}
  .quotes__label{grid-column:1/-1;}
  .quotes__fig{grid-column:1/5;grid-row:2 / span 2;}
  .quotes__lead{grid-column:5/13;grid-row:2;}
  .quotes__more{grid-column:5/13;grid-row:3;}
}
@media (max-width:63.99rem){ .quotes__fig{width:min(60%,20rem);} }

/* ---------- Commercial: Auftraggeber als zwei ruhige, gegenlaeufige Logo-Zeilen ----------
   Inhalt = Logo-Wand der bestehenden Seite; Logos lokal, einfarbig (Anthrazit, Alpha),
   Hoehe je Logo ueber --f normalisiert. EIN animiertes Band je Zeile (zwei identische
   Sequenzen, translate3d −50 % = exakt eine Sequenz → nahtlos), nur transform. */
.clients{padding-block:clamp(3rem,2rem + 5vw,7rem) clamp(2rem,1.5rem + 3vw,4rem);overflow:hidden;--logo-h:2rem;--logo-gap:clamp(3rem,2rem + 4vw,6.5rem);}
.marquee{display:grid;gap:clamp(1.5rem,1rem + 2vw,3rem);margin-top:clamp(2rem,1.5rem + 2.5vw,4rem);}
.marquee__row{width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent);}
.marquee__belt{display:flex;width:max-content;animation:marquee var(--dur,140s) linear infinite;will-change:transform;backface-visibility:hidden;transform:translate3d(0,0,0);}
.marquee__row--a{--dur:150s;} .marquee__row--b{--dur:130s;} .marquee__row--b .marquee__belt{animation-direction:reverse;}
.marquee__track{display:flex;flex:none;align-items:center;gap:var(--logo-gap);padding-right:var(--logo-gap);}
.marquee__track li{flex:none;display:flex;align-items:center;height:calc(var(--logo-h) * 1.5);}
.marquee__track img{display:block;height:calc(var(--logo-h) * var(--f,1));width:auto;max-width:none;object-fit:contain;opacity:0.82;}
.marquee__row:hover .marquee__belt{animation-play-state:paused;}
@keyframes marquee{from{transform:translate3d(0,0,0);}to{transform:translate3d(-50%,0,0);}}
@media (max-width:63.99rem){ .clients{--logo-h:1.6rem;--logo-gap:clamp(2rem,1.5rem + 3vw,3.5rem);} .marquee__row--a{--dur:110s;} .marquee__row--b{--dur:95s;} }
@media (prefers-reduced-motion:reduce){
  .marquee__row{overflow:visible;-webkit-mask-image:none;mask-image:none;}
  .marquee__belt{animation:none;width:100%;}
  .marquee__track{flex:1 1 auto;width:100%;min-width:0;flex-wrap:wrap;gap:1.25rem clamp(1.5rem,1rem + 2.5vw,3.5rem);padding-right:0;}
  .marquee__track[aria-hidden]{display:none;}
}

/* ==========================================================================
   GALLERY: kuratiertes Archiv. Eine Kategorie zur Zeit, Rhythmus aus grossen und
   kleinen Abzuegen; die Farbwelt wechselt langsam mit der Kategorie.
   ========================================================================== */
.gpage{transition:background-color 900ms var(--ease),color 900ms var(--ease);}
.gpage .nav{transition:background-color 900ms var(--ease),border-color 400ms var(--ease);}
.gpage .fig{transition:background-color 900ms var(--ease);}
.theme-por{--ivory:#FBFAF8;--cream:#FFFFFF;--linen:#F5F2EE;--blush:#F3EEE9;--nude:#E8E1DA;--sand:#D8CEC5;--mushroom:#6E6863;--taupe:#5F5955;--mauve:#232120;--mauve-2:#0F0E0D;--rosewood:#A47D74;--cocoa:#1B1917;--line:#E7E2DC;--line-2:#D3CCC4;--shadow:40,36,32;--nav-bg:#FBFAF8;--gnav-bg:rgba(251,250,248,0.92);background:var(--ivory);color:var(--cocoa);}
.theme-com{--ivory:#FFFFFF;--cream:#FFFFFF;--linen:#F5F5F3;--blush:#F2F1EE;--nude:#E6E4E0;--sand:#D6D3CE;--mushroom:#6B6966;--taupe:#57544F;--mauve:#161513;--mauve-2:#000000;--rosewood:#8F8A83;--cocoa:#111110;--line:#E6E4E0;--line-2:#CFCCC6;--shadow:30,30,28;--nav-bg:#FFFFFF;--gnav-bg:rgba(255,255,255,0.92);background:var(--ivory);color:var(--cocoa);}
.ghead{padding-top:calc(var(--nav-h) + clamp(2.5rem,1.5rem + 5vw,7rem));padding-bottom:clamp(1.5rem,1rem + 2vw,3rem);display:grid;gap:clamp(1.25rem,1rem + 1.5vw,2rem);}
.ghead__title{font-size:clamp(2.8rem,1.4rem + 5.6vw,6.8rem);line-height:0.98;max-width:12ch;}
.gsel{display:flex;flex-wrap:wrap;gap:0.75rem clamp(1.5rem,1rem + 2.5vw,3.5rem);margin-top:clamp(0.5rem,0.25rem + 1vw,1.5rem);}
.gsel a{position:relative;font-family:"Cormorant Garamond","Cormorant Fallback",serif;font-size:clamp(1.35rem,1.1rem + 1vw,2rem);line-height:1.2;color:var(--mushroom);padding-bottom:0.35rem;transition:color 320ms var(--ease);}
.gsel a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--cocoa);transform:scaleX(0);transform-origin:left;transition:transform 520ms var(--ease-expo);}
.gsel a:hover{color:var(--cocoa);} .gsel a.is-active{color:var(--cocoa);} .gsel a.is-active::after{transform:scaleX(1);}
.gcat{padding-block:clamp(1.5rem,1rem + 2vw,3rem) clamp(3rem,2rem + 5vw,7rem);}
.gcat[hidden]{display:none;}
/* Enquiry-Bild der Galerie folgt der Kategorie (body.theme-* setzt main.js); ohne Skript: Wedding */
.enquire__print [data-for="por"],.enquire__print [data-for="com"]{display:none;}
body.theme-por .enquire__print [data-for="wed"],body.theme-com .enquire__print [data-for="wed"]{display:none;}
body.theme-por .enquire__print [data-for="por"],body.theme-com .enquire__print [data-for="com"]{display:block;}
.gcat__head{display:grid;gap:0.75rem;margin-bottom:clamp(2rem,1.5rem + 3vw,4.5rem);}
.gcat__title{font-size:var(--fs-h3);} .gcat__lede{max-width:52ch;}
.gcat__count{font-size:var(--fs-micro);letter-spacing:0.22em;text-transform:uppercase;color:var(--mushroom);margin-top:0.25rem;}
.ghead__lede{max-width:48ch;}
.gfig{margin:0;} .gfig .fig{width:100%;}
.gtiles .gfig{content-visibility:auto;contain-intrinsic-height:auto 22rem;}
/* Reveal beim Eintritt: Deckkraft und ein kurzer Weg — keine Skalierung im Rahmen (die beschnitte das Foto) */
html.motion .gtiles .gfig{opacity:0.001;transform:translateY(14px);transition:opacity 700ms var(--ease),transform 900ms var(--ease-expo);} html.motion .gtiles .gfig.is-in{opacity:1;transform:none;}

/* ==========================================================================
   ABSCHLUSS / FOOTER: das Logo als letzter Akkord, Handschrift als kleiner
   persoenlicher Gruss, Kontakt in Hierarchie, Navigation als eine Zeile.
   Warmer, leicht abgesetzter Ton (linen); auf hellen Seiten folgt er den Tokens.
   ========================================================================== */
.foot{background:var(--linen);padding-block:clamp(3rem,2rem + 3.5vw,5.5rem) clamp(1.25rem,1rem + 1vw,1.75rem);transition:background-color 900ms var(--ease);}
.foot__close{display:grid;gap:clamp(2rem,1.5rem + 3vw,4rem);align-items:end;}
.foot__logo{display:block;width:min(100%,26rem);}
.foot__logo img{width:100%;height:auto;display:block;}
.foot__hand{font-size:clamp(1.1rem,0.9rem + 0.9vw,1.7rem);color:var(--taupe);transform:rotate(-7deg);transform-origin:left bottom;margin-top:-0.25rem;}
.foot__reach{display:grid;gap:0.5rem;justify-items:start;text-align:left;}
.foot__where{margin-top:1rem;} .foot__address{font-size:var(--fs-small);color:var(--taupe);}
.foot__mail{font-family:"Cormorant Garamond","Cormorant Fallback",serif;font-size:clamp(1.2rem,0.95rem + 0.9vw,1.6rem);line-height:1.2;color:var(--cocoa);overflow-wrap:anywhere;}
.foot__mail:hover,.foot__tel:hover{color:var(--rosewood);}
/* Dreispaltiger Footer: dieselbe Kappung, damit die E-Mail in ihrer Spalte (~35 vw) einzeilig bleibt */
@media (min-width:64rem){ .foot__mail{font-size:min(clamp(1.2rem,0.95rem + 0.9vw,1.6rem),2.2vw);} }
.foot__tel{font-size:var(--fs-body);color:var(--cocoa);}
.foot__social{display:flex;gap:1.5rem;margin-top:0.25rem;font-size:var(--fs-micro);letter-spacing:0.2em;text-transform:uppercase;color:var(--mushroom);}
.foot__social a:hover{color:var(--cocoa);}
.foot__meta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:1rem 2rem;margin-top:clamp(2rem,1.5rem + 2.5vw,3.5rem);}
.foot__links{display:flex;flex-wrap:wrap;gap:0.75rem 1.75rem;font-size:var(--fs-micro);letter-spacing:0.2em;text-transform:uppercase;color:var(--taupe);}
.foot__links a:hover,.foot__links a[aria-current="page"]{color:var(--cocoa);}
.foot__where{font-size:var(--fs-micro);letter-spacing:0.2em;text-transform:uppercase;color:var(--mushroom);}
.foot__base{font-size:var(--fs-micro);letter-spacing:0.06em;color:var(--mushroom);}
/* Kundenvorgabe 2026-10-03: das Copyright steht im Kontaktblock, buendig unter der Adresse */
.foot__reach .foot__base{margin-top:1rem;}
/* Footer V2.4 (Vorgabe 2026-10-22, kompakter): eine Komposition statt getrennter Bloecke. Oben der Schriftzug, oben
   buendig mit der E-Mail-Zeile, rechts gespiegelt der Kontaktblock — weiter gestapelt, rechtsbuendig und in Alwins
   Reihenfolge (Vorgaben 2026-09-29 und 2026-10-03: Zeilen buendig untereinander, Copyright im Kontaktblock unter der
   Adresse). Unten EINE durchgehende Haarlinie: Navigation links, Copyright rechts unter der Adresse, auf derselben
   Grundlinie (Kundenvorgabe 2026-10-19). Der Kontaktblock gibt seine Zeilen dafuer an das Raster ab (display:contents). */
.foot{padding-block:clamp(1.6rem,1.1rem + 1.3vw,2.25rem) clamp(0.9rem,0.8rem + 0.4vw,1.2rem);}
.foot__close{gap:clamp(1.5rem,1.1rem + 1.5vw,2.25rem);}
.foot__logo{width:min(58%,12.5rem);}
.foot__reach{gap:0.35rem;}
.foot__where{margin-top:0.6rem;}
.foot__social{margin-top:0.15rem;}
.foot__reach .foot__base{margin-top:0.6rem;}
.foot__meta{margin-top:clamp(1.25rem,1rem + 1vw,1.75rem);padding-top:0.85rem;border-top:1px solid var(--line);}
@media (min-width:64rem){
  .foot > .wrap{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(5,auto) auto;column-gap:1.5rem;row-gap:0;}
  .foot__close,.foot__reach{display:contents;}
  /* V2.5: the mark sits higher (its cap line on the e-mail's) and a little larger, so it balances the stacked block */
  .foot__logo{grid-column:1 / span 4;grid-row:1 / span 5;align-self:center;width:19.5rem;max-width:none;margin-left:clamp(9.5rem,2.73rem + 10.58vw,12.25rem);} /* 23.10.: etwas groesser (264 → 312 px), vertikal mittig zum Kontaktblock und mittig ueber „Commercial" in der Navigation darunter */
  .foot__hand{display:none;}
  .foot__mail,.foot__tel,.foot__social,.foot__where,.foot__address{grid-column:6 / -1;justify-self:end;text-align:right;}
  .foot__social{justify-content:flex-end;}
  .foot__mail{grid-row:1;font-size:min(1.5rem,2.1vw);}
  .foot__tel{grid-row:2;margin-top:0.2rem;}
  .foot__social{grid-row:3;margin-top:0.3rem;}
  .foot__where{grid-row:4;margin-top:0.55rem;}
  .foot__address{grid-row:5;margin-top:0.2rem;}
  .foot__meta{grid-column:1 / -1;grid-row:6;align-self:end;margin-top:clamp(1rem,0.8rem + 0.6vw,1.4rem);padding-top:0.8rem;}
  .foot__reach .foot__base{grid-column:8 / -1;grid-row:6;align-self:end;justify-self:end;text-align:right;margin:0;padding-top:0.8rem;border:0;}
  .foot__links{flex-wrap:nowrap;gap:0.75rem clamp(1rem,-1.25rem + 3.5vw,1.75rem);}
}
/* ==========================================================================
   QUESTIONS & ANSWERS: Editorial-Aufteilung, minimales Akkordeon (nur Hairlines),
   Hoehe animiert ueber grid-template-rows, Plus dreht zum Kreuz.
   ========================================================================== */
.qa{padding-block:var(--band-y);background:var(--ivory);}
.qa__grid{display:grid;gap:clamp(2rem,1.5rem + 3vw,4rem);}
.qa__head{display:grid;gap:1.25rem;align-content:start;justify-items:start;}
.qa__head .h2{max-width:12ch;}
.qa__list{border-top:1px solid var(--line);}
.qa__item{border-bottom:1px solid var(--line);}
.qa__q{display:grid;grid-template-columns:minmax(0,1fr) 1.25rem;align-items:baseline;gap:1.25rem;width:100%;text-align:left;padding-block:clamp(1.1rem,0.9rem + 1vw,1.6rem);font-family:"Cormorant Garamond","Cormorant Fallback",serif;font-size:clamp(1.25rem,1.05rem + 0.9vw,1.75rem);line-height:1.25;color:var(--cocoa);transition:color 260ms var(--ease);}
.qa__q:hover{color:var(--mauve-2);}
.qa__i{position:relative;width:1rem;height:1rem;align-self:center;}
.qa__i::before,.qa__i::after{content:"";position:absolute;left:0;top:50%;width:100%;height:1px;background:currentColor;transition:transform 480ms var(--ease-expo);}
.qa__i::after{transform:rotate(90deg);}
.qa__item.is-open .qa__i::before{transform:rotate(45deg);} .qa__item.is-open .qa__i::after{transform:rotate(-45deg);}
.qa__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows 520ms var(--ease);}
.qa__item.is-open .qa__a{grid-template-rows:1fr;}
.qa__inner{overflow:hidden;min-height:0;}
.qa__inner p{padding:0 2.5rem clamp(1.1rem,0.9rem + 1vw,1.6rem) 0;max-width:56ch;color:var(--taupe);opacity:0;transform:translateY(-6px);transition:opacity 420ms var(--ease) 80ms,transform 420ms var(--ease) 80ms;}
.qa__item.is-open .qa__inner p{opacity:1;transform:none;}
@media (min-width:64rem){ .qa__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(3rem,2rem + 6vw,9rem);align-items:start;} .qa__head{position:sticky;top:calc(var(--nav-h) + 2rem);} }
@media (max-width:63.99rem){ .qa__inner p{padding-inline:0;} }
/* Seitenspezifische Einbettung */
.qa--warm{background:var(--ivory);} .qa--warm .qa__list{border-top-color:var(--line-2);}
.qa--still{background:var(--cream);}
.qa--structured{background:var(--ivory);} .qa--structured .qa__q{font-family:"Figtree","Figtree Fallback",sans-serif;font-size:var(--fs-body);font-weight:500;letter-spacing:0.01em;} .qa--structured .qa__list{border-top-color:var(--line-2);}
@media (prefers-reduced-motion:reduce){ .qa__a,.qa__inner p,.qa__i::before,.qa__i::after{transition:none;} }

/* ==========================================================================
   STARTSEITE, Schluss: helle Zone (Portraits, Commercial, Q&A). Dieselben Tokens
   wie body.light, aber lokal; der Hintergrund wird beim Eintritt per Scroll von
   Ivory nach Weiss gefuehrt (nur background-color, Text bleibt statisch).
   ========================================================================== */
.lightzone{--ivory:#FBFAF8;--cream:#FFFFFF;--linen:#F5F2EE;--blush:#F3EEE9;--nude:#E8E1DA;--sand:#D8CEC5;
  --mushroom:#6E6863;--taupe:#5F5955;--mauve:#232120;--mauve-2:#0F0E0D;--rosewood:#A47D74;--cocoa:#1B1917;
  --line:#E7E2DC;--line-2:#D3CCC4;--shadow:40,36,32;background:#FFFFFF;color:var(--cocoa);}
.lightzone .qa--still{background:transparent;padding-block:clamp(3rem,2rem + 3.5vw,5.5rem);}
.tease{padding-block:clamp(2.5rem,1.5rem + 3vw,4.5rem);background:#FFFFFF;}
.tease--por{padding-top:clamp(3rem,2rem + 4vw,6rem);}
.tease__grid{display:grid;gap:clamp(1.5rem,1rem + 2vw,2.5rem);align-items:center;}
.tease__text{display:grid;gap:clamp(0.6rem,0.5rem + 0.6vw,1rem);justify-items:start;align-content:center;}
.tease__title{font-size:clamp(3rem,1.8rem + 5vw,6.4rem);line-height:0.95;letter-spacing:-0.01em;}
.tease__line{font-size:clamp(1.2rem,1rem + 1vw,1.8rem);line-height:1.25;font-style:italic;color:var(--taupe);max-width:24ch;}
.tease__text .tlink{margin-top:0.5rem;}
.tease__prose{max-width:36ch;font-size:var(--fs-body);}
.tease--por .tease__line{font-size:clamp(1.1rem,0.95rem + 0.6vw,1.4rem);color:var(--mauve-2);}
.tease__belt{margin-top:clamp(2rem,1.5rem + 2.5vw,4rem);--logo-h:1.6rem;--logo-gap:clamp(2.5rem,1.5rem + 3.5vw,5.5rem);}
.tease__cta{margin-top:clamp(1.5rem,1rem + 2vw,3rem);}
.tease__act{display:flex;flex-wrap:wrap;align-items:baseline;gap:0.75rem 1.75rem;margin-top:0.5rem;}
.tease__price{font-size:var(--fs-small);color:var(--mushroom);}
@media (min-width:64rem){
  /* Verzahnung: Commercial-Bilder steigen in den leeren Raum unter dem Portrait-Text */
  .tease--por{padding-bottom:clamp(4rem,2rem + 4vw,7rem);}
  .tease--com{padding-top:clamp(1rem,0.5rem + 1.5vw,2rem);background:transparent;}
  .tease--com .tease__grid{align-items:start;}
  .tease__grid--com .tease__text{padding-top:clamp(2rem,1rem + 3vw,4.5rem);}
  .tease__art--com .tease__p1{grid-column:1 / span 8;}

}
@media (max-width:63.99rem){ .tease__belt{--logo-h:1.25rem;--logo-gap:clamp(1.75rem,1.25rem + 2.5vw,3rem);} .tease__belt .marquee__row--a{--dur:110s;} }
.tease__art{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(0.6rem,0.4rem + 0.8vw,1rem);align-items:start;}
.tease__p{margin:0;min-width:0;} .tease__p .fig{width:100%;}
.tease__cap{position:absolute;left:0;top:100%;margin-top:0.55rem;font-size:clamp(0.9rem,0.8rem + 0.4vw,1.1rem);color:var(--taupe);transform:rotate(-3deg);transform-origin:left top;white-space:nowrap;}
.tease__p{position:relative;}
.tease__sessions{display:grid;gap:0.9rem;margin-top:0.25rem;padding-top:1rem;border-top:1px solid var(--line);width:100%;max-width:30rem;}
.tease__sessions > div{display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;}
.tease__sessions dt{font-size:var(--fs-small);color:var(--taupe);}
.tease__sessions dd{margin:0;text-align:right;font-family:"Cormorant Garamond","Cormorant Fallback",serif;font-size:var(--fs-lead);line-height:1.1;color:var(--cocoa);white-space:nowrap;}
.tease__sessions dd small{display:block;font-family:"Figtree","Figtree Fallback",sans-serif;font-size:var(--fs-micro);letter-spacing:0.04em;color:var(--mushroom);margin-top:0.3rem;white-space:normal;}
.tease__art--com .tease__p1{grid-column:1 / span 8;grid-row:1;}
.tease__art--com .tease__p3{grid-column:9 / span 4;grid-row:1;align-self:end;}
.tease__art--com .tease__p2{grid-column:3 / span 4;grid-row:2;margin-top:var(--photo-gap);align-self:end;}
.tease__art--com .tease__p4{grid-column:7 / span 6;grid-row:2;margin-top:var(--photo-gap);align-self:end;}
.tease__logos{display:flex;flex-wrap:wrap;align-items:center;gap:0.75rem clamp(1rem,0.7rem + 1.4vw,2rem);margin-top:clamp(0.75rem,0.5rem + 1vw,1.5rem);padding-top:clamp(0.75rem,0.5rem + 1vw,1.5rem);border-top:1px solid var(--line);width:100%;--logo-h:1.1rem;}
.tease__logos li{display:flex;align-items:center;height:calc(var(--logo-h) * 1.5);}
.tease__logos img{display:block;height:calc(var(--logo-h) * var(--f,1));width:auto;max-width:none;opacity:0.7;}
@media (min-width:64rem){
  .tease__grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(2.5rem,1.5rem + 4vw,6rem);}
  .tease__grid--com{grid-template-columns:minmax(0,7fr) minmax(0,5fr);}
  .tease--por .tease__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start;}
}
@media (max-width:63.99rem){
  .tease__grid--com .tease__art{order:2;}
  .tease__logos{gap:0.6rem 1.1rem;--logo-h:1rem;}
}

/* ---------- Abschluss der Startseite nach dem Prinzip der bestehenden Seite:
   ein ganzflaechiges Foto, ein Satz, eine Handlung; Kontakt darunter im Footer ---------- */
/* ---------- Abschluss der Startseite (V2.2): fotografische Vollbild-Buehne wie in V2, aber ohne Beschnitt.
   Die Buehne hat das Seitenverhaeltnis des Fotos (1500×1072) und ist hoechstens eine Fensterhoehe; das Foto liegt
   vollstaendig und rechtsbuendig darin (object-fit: contain), die Flaeche links fuellt eine weichgezeichnete Kopie
   desselben Motivs, darueber der helle Schleier von links und die Zeilen. Kein Schatten, kein Bild ueber einem Bild. */
.close{position:relative;display:grid;background:var(--linen);color:var(--cocoa);overflow:hidden;}
.close__stage{grid-area:1 / 1;position:relative;width:100%;aspect-ratio:1500/1072;max-height:calc(100svh - var(--nav-h));min-height:32rem;overflow:hidden;background:var(--nude);}
.close__bg{position:absolute;inset:0;margin:0;}
.close__bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:100% 50%;filter:grayscale(1);}
.close__bg .close__fill{object-fit:cover;object-position:50% 50%;filter:grayscale(1) blur(28px);transform:scale(1.12);opacity:0.9;}
.close__haze{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to right,rgba(248,241,238,0.92) 0%,rgba(248,241,238,0.74) 30%,rgba(248,241,238,0.22) 56%,rgba(248,241,238,0) 74%),linear-gradient(to top,rgba(248,241,238,0.26) 0%,rgba(248,241,238,0) 36%);}
.close__inner{grid-area:1 / 1;position:relative;z-index:2;align-self:center;width:100%;padding-block:clamp(3rem,2rem + 4vw,5.5rem);}
.close__text{display:grid;gap:clamp(0.8rem,0.6rem + 0.8vw,1.25rem);justify-items:start;max-width:40rem;}
.close__title{font-size:clamp(2.2rem,1.2rem + 3.4vw,4.2rem);line-height:1;max-width:14ch;}
.close__title em{color:var(--mauve-2);}
.close__lead{font-family:"Cormorant Garamond","Cormorant Fallback",serif;font-size:var(--fs-lead);line-height:1.4;color:var(--taupe);max-width:30ch;}
.close__contacts{display:flex;flex-wrap:wrap;gap:0.5rem 2rem;margin-top:0.5rem;font-size:var(--fs-small);color:var(--taupe);}
.close__contacts a{color:var(--cocoa);} .close__contacts a:hover{color:var(--rosewood);}
/* Tablet (64–80 rem): die Zeilen bleiben links vom Paar (schmalerer Textblock, Aktionen brechen um) */
@media (min-width:64rem) and (max-width:79.99rem){ .close__text{max-width:27rem;} }
/* Kundenvorgabe 2026-10-03: das Strandfoto selbst fuellt die volle Breite (Panorama). Beschnitt nur oben/unten, verteilt 65:35:
   Koepfe beginnen bei 23 %, Fuesse enden bei 86 % — min-height 50vw haelt den Gesamtbeschnitt unter 31 %. Die weichgezeichnete
   Fuellung ist damit ueberfluessig. */
@media (min-width:64rem){
  /* 2. Runde: Panorama 1.95:1 statt 1.4:1 — vom Foto fallen 28 % weg, 18.5 % oben und 9.7 % unten (object-position 65.6 %):
     Koepfe ab 22 %, Saum/Schuhe bis 86 % bleiben im Bild. min-height 47.5vw haelt den oberen Beschnitt unter 22 %. */
  .close__stage{aspect-ratio:39/20;min-height:max(26rem,47.5vw);}
  .close__bg img{object-fit:cover;object-position:50% 65.6%;}
  .close__bg .close__fill{display:none;}
}
@media (max-width:63.99rem){
  /* Telefon/kleines Tablet: das Foto ungekuerzt und randlos oben (Buehne = Bildformat), die Zeilen darunter auf Leinen */
  .close{grid-template-rows:auto auto;}
  .close__stage{grid-area:auto;max-height:none;min-height:0;}
  .close__bg img{object-position:50% 50%;}
  .close__haze{display:none;}
  .close__inner{grid-area:auto;align-self:start;padding-block:clamp(2.5rem,1.5rem + 3vw,4rem) clamp(3rem,2rem + 4vw,5rem);}
}

/* ---------- Startseite: Kapitelwechsel Portraits (Sticky-Uebergabe wie der Hero) ----------
   .cstage__base klebt unter der Nav (Blush, so hoch wie ein halbes Fenster, damit der Rest des
   Fensters nie leer ist); .chapter liegt darueber im Fluss (z-index 2) und deckt die Basis beim
   Scrollen zu. Keine Deckkraft-Animation, keine Pins. */
.cstage{position:relative;}
/* Kapitel eins (Kunde 2026-09-29: „b/w with no tone"): die eigene Schwarzweiss-Datei des Kunden, neutral, ohne Farbschleier,
   ungekuerzt — die Basis ist so hoch wie das Foto, nicht so hoch wie das Fenster */
/* Kundenvorgabe 2026-10-03: das Foto fuellt die Breite; wird das Fenster zu niedrig, darf OBEN beschnitten werden (Himmel/Turm),
   nie unten (Fuesse) — die Koepfe beginnen bei 29 % der Bildhoehe, min-height 43vw begrenzt den Beschnitt auf ~24 %.
   width:100% ist noetig: ohne explizite Breite uebertraegt aspect-ratio die max-height auf die Breite (1536×864 → 1408 px). */
.cstage__base{position:sticky;top:var(--nav-h);z-index:1;width:100%;aspect-ratio:2500/1406;max-height:calc(100svh - var(--nav-h));min-height:43vw;overflow:hidden;background:#F5F2EE;}
.cstage__base img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 100%;filter:grayscale(1);}
/* 2026-10-03 (Panorama, 3. Fassung): Struktur wie 0f15401/d29a277 — die Basis IST der Bildrahmen (sticky unter der Nav,
   Notiz oben links im Bild, Tafel faehrt darueber). Geaendert ist nur die Rahmengeometrie ab 64rem: 27:13 (~2.08:1) statt
   16:9, bei 1440 px 693 px hoch — die Mitte zwischen 810 px (ungekuerzt) und 576 px (5:2). Vom Foto fallen 14 % weg,
   ALLE 14 % oben (object-position 100 %, 2026-10-04: unten faellt nichts mehr weg — Alwin erlaubt den Beschnitt nur oben):
   Koepfe ab 27 %, Schuhe bis 90 % bleiben im Bild. min-height 38vw haelt den oberen Beschnitt auch bei kurzen Fenstern
   unter 27 %. Seitlich wird nie beschnitten (Rahmen breiter als das Foto). */
@media (min-width:64rem){
  .cstage__base{aspect-ratio:27/13;min-height:38vw;}
  .cstage__base img{object-position:50% 100%;}
}
.cstage__note{position:absolute;left:var(--gutter);top:clamp(2rem,1.5rem + 2vw,3.5rem);z-index:1;display:grid;gap:0.35rem;font-size:var(--fs-micro);letter-spacing:0.22em;text-transform:uppercase;color:var(--mushroom);}
.cstage__note span{font-family:"Cormorant Garamond","Cormorant Fallback",serif;font-size:clamp(1.6rem,1.2rem + 1.6vw,2.6rem);letter-spacing:0;text-transform:none;color:var(--cocoa);line-height:1;}
.cstage > .over{position:relative;z-index:2;}
.chapter{position:relative;display:flex;align-items:center;min-height:calc(100svh - var(--nav-h));padding-block:clamp(3rem,2rem + 4vw,6rem);background:#EBD5CE;}
.chapter__inner{display:grid;gap:clamp(0.6rem,0.5rem + 0.8vw,1.1rem);justify-items:start;width:100%;}
.chapter__title{font-size:clamp(3.6rem,2rem + 8.9vw,10.7rem);line-height:0.92;letter-spacing:-0.015em;} /* 2026-10-04: alle Werte ×0.89 — 160 px bei 1440 statt 179 px; Portraits und Commercial teilen diese eine Regel */
.chapter__line{font-size:clamp(1.25rem,1rem + 1.3vw,2.1rem);line-height:1.2;font-style:italic;color:var(--taupe);max-width:24ch;}
.tease__title--sub{font-size:clamp(2.4rem,1.5rem + 2.7vw,4.1rem);line-height:1.02;max-width:16ch;letter-spacing:-0.01em;}
@media (prefers-reduced-motion:reduce){ .chapter{background:#F5F2EE;} }

/* ---------- Kapitelwechsel Commercial: grafisch, praezise (kein Overlay, keine Farbflaeche) ---------- */
.chapter--com{min-height:clamp(20rem,52svh,30rem);background:#FFFFFF;overflow:hidden;padding-block:clamp(3rem,2rem + 3vw,5rem);}
.chapter__inner--com{gap:clamp(0.75rem,0.5rem + 1vw,1.25rem);}
.chapter--com .chapter__title{letter-spacing:-0.02em;}
.chapter__rule{display:block;width:100%;height:1px;background:var(--cocoa);transform-origin:left center;transform:scaleX(0);}
.chapter__line--com{color:var(--cocoa);font-style:normal;letter-spacing:0.02em;}
@media (max-width:63.99rem){ .chapter--com{min-height:clamp(16rem,40svh,22rem);} }
@media (prefers-reduced-motion:reduce){ .chapter__rule{transform:none;} }

/* Ein Abschnitt, der einen vorhergehenden auf demselben Hintergrund fortsetzt (Galerie-Link → Logos,
   Galerie-Link → Fragen): oben nur ein halbes Band, sonst addieren sich zwei volle Bandabstaende zu
   einer Leerflaeche von ~190–300 px zwischen zwei kleinen Zeilen. Steht am Ende der Datei, weil
   .qa und .clients ihr padding-block spaeter deklarieren als die Stelle, an der der Modifier zuerst
   stand — gleiche Spezifitaet, die spaetere Regel gewann, der Modifier war wirkungslos (gemessen). */
.section--follows{padding-top:clamp(2rem,1.5rem + 2.5vw,4rem);}

/* ==========================================================================
   V2.1 (Kundenrunde 2026-09-29) — Startseite, Kapitel zwei: EINE Portraits-Sektion (Kapiteltafel + Teaser zusammengefuehrt,
   keine doppelte Copy). Links Label, Titel, Zeile, Beschreibung, Link; rechts Headshot 1000×1400 hoch, daneben Junge
   1000×1400 ueber Familie 1500×1072 — die rechte Spalte ist so breit gerechnet, dass ihre Unterkante auf der des
   Headshots liegt. Nichts beschnitten, nichts ueberlappt.
   ========================================================================== */
/* V2.4 — nach Alwins Referenz (PDF S. 3): EINE Section, links die Textspalte (Label, „Portraits", Zeile, Beschreibung,
   Link), daneben das grosse Portraet, ganz rechts die zwei kleineren uebereinander. Die Tafel schiebt sich als weisse
   Flaeche ueber Kapitel eins (sticky-Basis + Farbscrub Blush → Weiss in main.js); Text und Bilder kommen danach ruhig
   nacheinander (Timeline in main.js, Ausgangszustaende nur unter html.motion). Nichts beschnitten, nichts ueberlappt. */
/* 2026-10-03 (Kapitelsystem wie Commercial): Kopf = Label, Titel, Linie, Zeile „Individuals. Families. Moments." im Stil
   von „People. Products. Places."; darunter wie beim Commercial-Teaser Bildgruppe links (7fr), Text daneben (5fr) mit
   demselben Einzug von oben. Rhythmus und Innenabstaende aus .chapter--com / .tease--com uebernommen; die Sticky-
   Uebergabe und die Einstiegs-Timeline (main.js) bleiben unveraendert. */
.chapter--por{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:clamp(2rem,1rem + 3vw,4rem);background:#FFFFFF;min-height:calc(100svh - var(--nav-h));padding-block:clamp(3rem,2rem + 3vw,5rem) clamp(3.5rem,2.5rem + 3vw,6rem);}
/* Kapitel-Einleitung so hoch wie .chapter--com (eigener Scrollmoment), die Komposition folgt beim Weiterscrollen */
.chapter--por .chapter__inner--por{min-height:clamp(16rem,44svh,26rem);align-content:center;}
/* Kundenvorgabe 2026-10-03: Titel wie im Commercial-Kapitel (gleiche Groesse, Linie), ueber den Bildern.
   grid-template-columns ausdruecklich EINE Spalte: die Weddings-Regel `.chapter{grid-template-columns:5fr 7fr}` (Z. 372) greift sonst. */
.chapter__grid{display:grid;gap:clamp(2rem,1.5rem + 3vw,4rem);align-items:center;align-content:center;width:100%;}
.chapter--por .chapter__inner{width:auto;gap:clamp(0.7rem,0.6rem + 0.6vw,1.1rem);}
.chapter--por .chapter__inner--por{width:100%;gap:clamp(0.75rem,0.5rem + 1vw,1.25rem);} /* nach der width:auto-Regel: die Linie spannt die volle wrap-Breite */
.chapter--por .chapter__title{letter-spacing:-0.02em;}
.chapter--por .chapter__line{max-width:none;} /* Groesse, Farbe und Schnitt kommen aus .chapter__line + .chapter__line--com, wie bei Commercial */
.chapter__prose{max-width:36ch;font-size:var(--fs-body);margin-top:0;}
.chapter--por .tease__act{margin-top:0.75rem;}
/* Bildfeld: grosses Portraet (1000×1400) links, rechts Junge (1000×1400) ueber Familie (1500×1072); die rechte Spalte ist so
   breit gerechnet, dass ihre Unterkante auf der des Portraets liegt — Verhaeltnis ≈ 60 : 40 wie in der Referenz. */
.chapter__art{--g:var(--photo-gap);display:grid;gap:var(--g);grid-template-columns:minmax(0,1fr) calc((100% - 1.7143 * var(--g)) / 2.5105);grid-template-rows:auto auto;align-items:start;}
.chapter__p{margin:0;min-width:0;} .chapter__p .fig{width:100%;}
.chapter__p1{grid-column:1;grid-row:1 / 3;} .chapter__p2{grid-column:2;grid-row:1;} .chapter__p3{grid-column:2;grid-row:2;}
@media (min-width:64rem){
  /* Spiegel von .tease__grid--com (7fr Bilder | 5fr Text): hier 5fr Text | 7fr Bilder, derselbe Einzug des Textes von oben */
  .chapter__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(2.5rem,1.5rem + 4vw,6rem);align-items:start;}
  .chapter--por .chapter__copy{padding-top:clamp(2rem,1rem + 3vw,4.5rem);align-content:start;}
}
/* Telefon/kleines Tablet: Einstieg + Text, dann das Hauptbild, dann die beiden kleineren als Paar gleicher Hoehe */
@media (max-width:63.99rem){
  .chapter--por{min-height:0;}
  .chapter__art{grid-template-columns:714fr 1399fr;grid-template-rows:auto auto;}
  .chapter__p1{grid-column:1 / -1;grid-row:1;} .chapter__p2{grid-column:1;grid-row:2;} .chapter__p3{grid-column:2;grid-row:2;align-self:end;}
}
/* Ausgangszustaende fuer den Einstieg (nur mit Motion; Reduced Motion zeigt alles sofort) */
html.motion .chapter--por [data-por-text],html.motion .chapter--por [data-por-img]{opacity:0;}
@media (prefers-reduced-motion:reduce){ html.motion .chapter--por [data-por-text],html.motion .chapter--por [data-por-img]{opacity:1;} .chapter--por{background:#FFFFFF;} }


/* Contact (V2.1): Studio-Ninja-Formular des Kunden anstelle des mailto-Formulars */
.sn-form{display:grid;gap:1.5rem;min-width:0;}
.sn-form iframe{display:block;width:100%;max-width:100%;}
/* 11.11.2026: Datenschutzseite (Alwins bisheriger Text) und Dankeseite nach dem Formular */
.legal{padding-top:0;}
.legal__body{max-width:46rem;font-family:"Cormorant Garamond","Cormorant Fallback",serif;font-size:calc(var(--fs-body) * 1.08);line-height:1.6;color:var(--taupe);}
.legal__body p + p{margin-top:0.8em;}
.legal__part{font-size:clamp(1.6rem,1.2rem + 1.4vw,2.4rem);color:var(--cocoa);margin-top:2.5rem;}
.legal__h{font-family:inherit;font-size:1.2em;font-weight:600;color:var(--cocoa);margin:2rem 0 0.6rem;}
.legal__body .legal__part + .legal__h{margin-top:1rem;}
.phead__side .actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem 1.75rem;}
.page--short #main{min-height:calc(100svh - 15.5rem);display:flex;flex-direction:column;justify-content:center;} .page--short #main > *{width:100%;} /* kurze Seiten: Fusszeile am unteren Rand */