/* ============================================================
   PITCH-ENTWURF · Fotografin (Hochzeit & Business) · v2
   Gebler Webdesign — zentrale Stylesheet-Datei
   Raster: 8er-Skala · Mobile First · Volle Breite, Editorial-Typo
   ============================================================ */

@font-face{font-family:'Marcellus';src:url('fonts/marcellus.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Cormorant';src:url('fonts/cormorant-italic.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'Jost';src:url('fonts/jost-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Jost';src:url('fonts/jost-500.woff2') format('woff2');font-weight:500;font-display:swap}

:root{
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:128px;

  --paper:#F7F4EE; --paper-2:#F0EAE0;
  --ink:#211D18; --stone:#847D6F; --line:#D9D2C2;
  --sage:#B59B77; --sage-deep:#8F7550;
  --deep:#2A251E; --deep-ink:#EDEAE0;

  --f-display:'Marcellus', Georgia, serif;
  --f-accent:'Cormorant', Georgia, serif;
  --f-body:'Jost', 'Segoe UI', system-ui, sans-serif;

  --wrap:min(1560px, 100% - clamp(32px, 6vw, 112px));
  --measure:64ch;
  --radius:2px;
}

*,*::before,*::after{box-sizing:border-box}

body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--f-body); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
img{max-width:100%; display:block}
a{color:inherit}

/* ---------- Typo-Skala: groß, editorial ---------- */
h1,h2,h3,h4{font-family:var(--f-display); font-weight:400; margin:0 0 var(--s3)}
h1{font-size:clamp(46px,9vw,132px); line-height:1.02; letter-spacing:.015em}
h2{font-size:clamp(36px,5.8vw,84px); line-height:1.06}
h3{font-size:clamp(22px,3vw,32px); line-height:1.2}
p{margin:0 0 var(--s2); max-width:var(--measure)}
.lede{font-size:clamp(17px,1.6vw,21px); line-height:1.7}
.caps{text-transform:uppercase; letter-spacing:.07em}
.em{font-family:var(--f-accent); font-style:italic; font-weight:500; letter-spacing:.005em; color:var(--sage-deep)}
h1 .em,h2 .em{font-size:1.06em; text-transform:none; letter-spacing:0}
.on-dark .em{color:#D6C7A8}
.statement{font-family:var(--f-display); font-size:clamp(26px,4.4vw,54px); line-height:1.22; max-width:24ch; margin:0 0 var(--s3)}

:focus-visible{outline:2px solid var(--sage-deep); outline-offset:3px}

.eyebrow{
  font-weight:500; font-size:clamp(11px,1vw,13px); letter-spacing:.32em; text-transform:uppercase;
  color:var(--stone); display:block; margin-bottom:var(--s3);
}
.on-dark .eyebrow{color:#A69C8B}
.frame-no{font-weight:500; font-size:11px; letter-spacing:.2em; color:var(--stone); text-transform:uppercase}

/* Layout */
.wrap{width:var(--wrap); margin-inline:auto}
.section{padding-block:clamp(64px,9vw,128px)}
.section--tinted{background:var(--paper-2)}
.section--dark{background:var(--deep); color:var(--deep-ink)}
.center{text-align:center}
.center p{margin-inline:auto}
.sec-head{margin-bottom:clamp(32px,5vw,72px)}
.sec-head.center h2{max-width:18ch; margin-inline:auto}

/* Buttons */
.btn{
  display:inline-block; padding:15px 32px; border:1px solid var(--ink);
  font-weight:500; font-size:13px; letter-spacing:.18em; text-transform:uppercase; text-decoration:none;
  color:var(--ink); background:transparent; border-radius:var(--radius);
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.btn:hover{background:var(--ink); color:var(--paper)}
.btn--solid{background:var(--ink); color:var(--paper)}
.btn--solid:hover{background:var(--sage-deep); border-color:var(--sage-deep); color:#fff}
.on-dark .btn{border-color:var(--deep-ink); color:var(--deep-ink)}
.on-dark .btn:hover{background:var(--deep-ink); color:var(--deep)}
.btn-row{display:flex; gap:var(--s2); flex-wrap:wrap}
.btn-row--center{justify-content:center}

/* ---------- Header ---------- */
.site-head{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb,var(--paper) 90%,transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.site-head .wrap{display:flex; align-items:center; justify-content:space-between; min-height:72px}
.brand{font-family:var(--f-display); font-size:20px; letter-spacing:.3em; text-transform:uppercase; text-decoration:none}
.brand small{display:block; font-family:var(--f-body); font-size:9px; letter-spacing:.4em; color:var(--stone)}
.nav{display:none}
.nav a{
  font-weight:500; font-size:12px; letter-spacing:.2em; text-transform:uppercase; text-decoration:none;
  padding:8px 0; margin-left:var(--s4); border-bottom:1px solid transparent;
}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--sage-deep); color:var(--sage-deep)}
.nav .nav-portal{border:1px solid var(--line); padding:9px 16px; border-radius:var(--radius)}
.nav .nav-portal:hover{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.nav-toggle{appearance:none; background:none; border:0; cursor:pointer; width:44px; height:44px; display:grid; place-items:center; margin-right:-10px}
.nav-toggle span,.nav-toggle span::before,.nav-toggle span::after{content:""; display:block; width:22px; height:1.5px; background:var(--ink); position:relative; transition:transform .25s ease}
.nav-toggle span::before{position:absolute; top:-7px}
.nav-toggle span::after{position:absolute; top:7px}
body.nav-open .nav-toggle span{background:transparent}
body.nav-open .nav-toggle span::before{transform:translateY(7px) rotate(45deg)}
body.nav-open .nav-toggle span::after{transform:translateY(-7px) rotate(-45deg)}
.mobile-nav{display:none; border-bottom:1px solid var(--line); background:var(--paper)}
body.nav-open .mobile-nav{display:block}
.mobile-nav a{display:block; padding:var(--s2) var(--s3); text-decoration:none; font-weight:500; font-size:14px; letter-spacing:.16em; text-transform:uppercase; border-top:1px solid var(--line)}
@media(min-width:980px){
  .nav{display:flex; align-items:center}
  .nav-toggle,.mobile-nav{display:none!important}
}

/* ---------- Bildrahmen (Kontaktbogen) ---------- */
.frame{position:relative; margin:0; background:var(--paper-2); overflow:hidden}
.frame--lined{border:1px solid var(--line)}
.frame::after{
  content:attr(data-no); position:absolute; right:12px; bottom:10px;
  font-family:var(--f-body); font-weight:500; font-size:10px; letter-spacing:.22em;
  color:#fff; mix-blend-mode:difference; pointer-events:none;
}
.frame img{width:100%; height:100%; object-fit:cover}
.frame img.missing{display:none}
.ph{
  position:absolute; inset:0; display:grid; place-items:center;
  background:
    radial-gradient(120% 90% at 20% 10%, #E4DCCB 0%, transparent 60%),
    radial-gradient(120% 100% at 85% 90%, #D9CCB2 0%, transparent 55%),
    linear-gradient(160deg,#EDE7D9 0%,#D6D2C2 50%,#C4B394 100%);
}
.ph::before{
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
.ph span{
  position:relative; font-weight:500; font-size:10px; letter-spacing:.26em; text-transform:uppercase;
  color:#8A8676; border:1px solid #B7B29F; padding:6px 12px; background:rgba(246,243,236,.55);
}
.ph--dark{background:
    radial-gradient(120% 90% at 25% 15%, #4E4437 0%, transparent 60%),
    radial-gradient(130% 100% at 80% 90%, #27211A 0%, transparent 55%),
    linear-gradient(160deg,#3F372C 0%,#2F2921 55%,#1C1712 100%)}
.ph--dark span{color:#C4BBA9; border-color:#5F5545; background:rgba(30,32,27,.45)}
.frame--tall{aspect-ratio:3/4}
.frame--wide{aspect-ratio:16/10}
.frame--square{aspect-ratio:1/1}

/* ---------- Hero: volle Höhe, volle Breite, zentriert ---------- */
.hero{position:relative; min-height:100svh; display:grid; place-items:center; overflow:hidden; background:var(--deep); text-align:center}
.hero-slides{position:absolute; inset:0}
.hero-slide{position:absolute; inset:0; opacity:0; transition:opacity 1.8s ease}
.hero-slide.is-active{opacity:1}
.hero-slide .frame{position:absolute; inset:0; border:0; background:transparent}
.hero .frame::after{display:none}
.hero::before{content:""; position:absolute; inset:0; z-index:2; background:rgba(28,23,18,.42)}
.hero-content{position:relative; z-index:3; color:#F3F1E9; padding:var(--s6) var(--s3); width:100%}
.hero-content .eyebrow{color:#D6D4C6}
.hero-content h1{margin:0 auto var(--s2); max-width:12ch; text-wrap:balance}
.hero-content h1 .caps-line{display:block; text-transform:uppercase; letter-spacing:.06em}
.hero-content h1 .em{display:block; color:#EADFC9; font-size:.82em; margin-top:.08em}
.hero-sub{max-width:46ch; margin:0 auto var(--s4); color:#E4E2D6; font-size:clamp(16px,1.4vw,19px)}
.hero .btn{border-color:#F3F1E9; color:#F3F1E9}
.hero .btn:hover{background:#F3F1E9; color:var(--deep)}
.hero .btn--solid{background:#F3F1E9; color:var(--deep); border-color:#F3F1E9}
.hero .btn--solid:hover{background:var(--sage); border-color:var(--sage); color:#fff}
.hero-frame-no{position:absolute; right:clamp(16px,3vw,48px); bottom:clamp(16px,3vw,40px); z-index:3; font-weight:500; font-size:11px; letter-spacing:.26em; color:#CBC9BC}
.hero-scroll{position:absolute; left:50%; bottom:clamp(14px,2.5vw,36px); transform:translateX(-50%); z-index:3; color:#CBC9BC; font-size:10px; letter-spacing:.3em; text-transform:uppercase; text-decoration:none}
@media(max-width:640px){.hero-sub{display:none} .hero-content h1{max-width:10ch}}

/* ---------- Fenster-Effekt (Parallax-Reveal) ----------
   Sektion = Ausschnitt, Bild liegt fixiert dahinter.
   clip-path:inset(0) clippt das position:fixed-Kind auf die Sektion
   und erzeugt den Stacking-Context — läuft auch auf iOS. */
.window{position:relative; height:clamp(420px,74svh,760px); clip-path:inset(0); display:grid; place-items:center; text-align:center; color:#F3F1E9}
.window-bg{position:absolute; inset:0; z-index:-1}
.window-bg .frame{position:absolute; inset:0; background:var(--deep)}
.window-bg .frame::after{display:none}
@supports (clip-path: inset(0)){ .window-bg{position:fixed} }
.window::before{content:""; position:absolute; inset:0; background:rgba(28,23,18,.38); pointer-events:none}
.window-content{position:relative; padding:var(--s4)}
.window-content .eyebrow{color:#D6D4C6}
.window-content h2{font-size:clamp(38px,7vw,110px); text-transform:uppercase; letter-spacing:.06em; margin:0}
.window-content .em{display:block; text-transform:none; letter-spacing:0; font-size:clamp(24px,3.4vw,52px); color:#EADFC9; margin-top:var(--s1)}
.window-content .btn{margin-top:var(--s4); border-color:#F3F1E9; color:#F3F1E9}
.window-content .btn:hover{background:#F3F1E9; color:var(--deep)}

/* ---------- Intro (asymmetrisch, volle Breite) ---------- */
.intro-grid{display:grid; gap:var(--s5)}
@media(min-width:900px){
  .intro-grid{grid-template-columns:7fr 4fr; gap:clamp(48px,7vw,128px); align-items:center}
}
.intro-grid .frame{width:min(420px,100%)}
@media(min-width:900px){.intro-grid .frame{justify-self:end}}

/* ---------- Diptychon Hochzeit / Business: full-bleed ---------- */
.worlds{display:grid; gap:4px; background:var(--paper)}
@media(min-width:820px){.worlds{grid-template-columns:1fr 1fr}}
.world{position:relative; display:block; text-decoration:none; min-height:clamp(420px,72svh,720px); overflow:hidden}
.world .frame{position:absolute; inset:0}
.world .frame::after{display:none}
.world::before{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(to top, rgba(26,21,16,.72) 0%, rgba(26,21,16,.08) 55%, transparent 100%); transition:background .35s ease}
.world:hover::before{background:linear-gradient(to top, rgba(40,33,25,.82) 0%, rgba(40,33,25,.2) 60%, transparent 100%)}
.world-body{position:absolute; z-index:2; left:0; right:0; bottom:0; padding:clamp(24px,4vw,56px); color:#F3F1E9}
.world-body .frame-no{color:#CBC9BC; display:block; margin-bottom:var(--s1)}
.world-body h3{font-size:clamp(30px,3.6vw,52px); margin-bottom:var(--s1)}
.world-body p{color:#E0DED2; font-size:15px; max-width:48ch; margin-bottom:var(--s2)}
.world-link{font-weight:500; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:#EADFC9}
.world:hover .world-link{text-decoration:underline; text-underline-offset:5px}

/* ---------- Kontaktbogen-Slider: full-bleed mit Anschnitt ---------- */
.sheet-track{
  display:flex; gap:var(--s2); overflow-x:auto; padding-bottom:var(--s2);
  padding-inline:max(calc((100% - var(--wrap)) / 2), 16px);
  scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent;
}
.sheet-track .frame{flex:0 0 78%; scroll-snap-align:start}
@media(min-width:640px){.sheet-track .frame{flex-basis:42%}}
@media(min-width:1100px){.sheet-track .frame{flex-basis:26%}}
.sheet-hint{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--stone); margin-top:var(--s1)}
@media(min-width:1100px){.sheet-hint{display:none}}

/* ---------- Ablauf ---------- */
.steps{display:grid; gap:var(--s4)}
@media(min-width:860px){.steps{grid-template-columns:repeat(3,1fr); gap:clamp(32px,4vw,72px)}}
.step{border-top:1px solid var(--line); padding-top:var(--s3)}
.step .frame-no{color:var(--sage-deep); display:block; margin-bottom:var(--s1)}
.step p{font-size:15px; color:var(--stone); margin:0}

/* ---------- Zitat im Fenster ---------- */
.window-quote blockquote{margin:0 0 var(--s2); font-family:var(--f-accent); font-style:italic; font-size:clamp(26px,4.2vw,54px); line-height:1.3; max-width:26ch}
.window-quote cite{font-style:normal; font-family:var(--f-body); font-weight:500; font-size:12px; letter-spacing:.26em; text-transform:uppercase; color:#CBC9BC}

/* ---------- Portal-Teaser ---------- */
.portal-grid{display:grid; gap:var(--s5); align-items:center}
@media(min-width:980px){.portal-grid{grid-template-columns:1fr 1.1fr; gap:clamp(48px,6vw,112px)}}
.portal-list{list-style:none; margin:0 0 var(--s4); padding:0}
.portal-list li{padding:12px 0 12px 28px; position:relative; font-size:15px; color:#CFCDC0; border-bottom:1px solid rgba(237,234,224,.12)}
.portal-list li::before{content:"—"; position:absolute; left:0; color:var(--sage)}
.portal-shot{border:1px solid rgba(237,234,224,.2); background:#26211A; padding:var(--s3); box-shadow:0 32px 80px rgba(0,0,0,.4)}
.portal-shot .bar{display:flex; gap:6px; margin-bottom:var(--s2)}
.portal-shot .bar i{width:8px; height:8px; border-radius:50%; background:#4E463B}
.mini-rows{display:grid; gap:10px}
.mini-row{display:flex; justify-content:space-between; align-items:center; gap:var(--s2); background:#312A22; border:1px solid #403830; padding:14px 16px; font-size:13px; color:#D8D6C9}
.mini-row .tag{font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:#C8B896; border:1px solid #57493A; padding:3px 8px; white-space:nowrap}

/* ---------- Portfolio ---------- */
.filterbar{display:flex; gap:var(--s1); flex-wrap:wrap; justify-content:center; margin-bottom:var(--s5)}
.filterbar button{
  appearance:none; background:none; border:1px solid var(--line); cursor:pointer;
  font-family:var(--f-body); font-weight:500; font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  padding:11px 22px; color:var(--stone); border-radius:var(--radius);
}
.filterbar button[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--paper)}
.masonry{columns:1; column-gap:var(--s2)}
@media(min-width:600px){.masonry{columns:2}}
@media(min-width:1000px){.masonry{columns:3}}
@media(min-width:1400px){.masonry{columns:4}}
.masonry .frame{break-inside:avoid; margin-bottom:var(--s2)}
.masonry .frame.is-hidden{display:none}
figcaption.cap{padding:var(--s1) 2px var(--s2); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--stone)}

/* ---------- Über mich / Kontakt ---------- */
.about-grid{display:grid; gap:var(--s5)}
@media(min-width:900px){.about-grid{grid-template-columns:5fr 7fr; gap:clamp(48px,6vw,112px); align-items:start}}
.facts{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s3); border-top:1px solid var(--line); padding-top:var(--s3); margin-top:var(--s4)}
.facts b{font-family:var(--f-display); font-weight:400; font-size:clamp(26px,3.4vw,44px); display:block}
.facts span{font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--stone)}

.contact-grid{display:grid; gap:var(--s5)}
@media(min-width:960px){.contact-grid{grid-template-columns:1fr 1.15fr; gap:clamp(48px,7vw,128px)}}
.contact-meta p{color:var(--stone); font-size:15px}
form.f{display:grid; gap:var(--s2)}
.f label{font-weight:500; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--stone); display:block; margin-bottom:6px}
.f input,.f select,.f textarea{
  width:100%; padding:14px 15px; border:1px solid var(--line); background:#FCFAF5;
  font-family:var(--f-body); font-size:15px; color:var(--ink); border-radius:var(--radius);
}
.f input:focus,.f select:focus,.f textarea:focus{outline:2px solid var(--sage-deep); outline-offset:0}
.f-row{display:grid; gap:var(--s2)}
@media(min-width:620px){.f-row{grid-template-columns:1fr 1fr}}
.form-note{font-size:13px; color:var(--stone)}

/* ---------- Footer ---------- */
.site-foot{background:var(--deep); color:var(--deep-ink); padding-block:clamp(64px,8vw,112px) var(--s4)}
.foot-grid{display:grid; gap:var(--s4)}
@media(min-width:860px){.foot-grid{grid-template-columns:2fr 1fr 1fr; gap:clamp(48px,6vw,112px)}}
.site-foot .brand{color:var(--deep-ink)}
.site-foot p{color:#B9B7AA; font-size:14px}
.foot-nav a{display:block; text-decoration:none; color:#CFCDC0; font-size:14px; padding:5px 0}
.foot-nav a:hover{color:#fff}
.foot-legal{border-top:1px solid rgba(237,234,224,.14); margin-top:var(--s5); padding-top:var(--s3); font-size:12px; color:#8E8C80; display:flex; flex-wrap:wrap; gap:var(--s2); justify-content:space-between}

.preview-note{background:var(--sage-deep); color:#fff; text-align:center; font-size:11px; letter-spacing:.2em; text-transform:uppercase; padding:8px var(--s2)}

/* ---------- Scroll-Reveal ---------- */
html.js:not(.reduced) .reveal{opacity:0; transform:translateY(22px); transition:opacity .8s ease,transform .8s ease}
html.js:not(.reduced) .reveal.in{opacity:1; transform:none}

/* ============================================================
   V3 POLISH · Smoothness-Paket
   ============================================================ */
::selection{background:var(--sage-deep); color:#fff}

/* Bild-Reveal: Clip öffnet sich, Motiv fährt sanft zurück */
html.js:not(.reduced) .reveal, html.js:not(.reduced) .reveal-img{transition-delay:var(--d,0s)}
html.js:not(.reduced) .reveal-img{clip-path:inset(9% 6%); transition:clip-path 1.1s cubic-bezier(.22,.61,.21,1)}
html.js:not(.reduced) .reveal-img img,
html.js:not(.reduced) .reveal-img .ph{transform:scale(1.09); transition:transform 1.2s cubic-bezier(.22,.61,.21,1); transition-delay:var(--d,0s)}
html.js:not(.reduced) .reveal-img.in{clip-path:inset(0 0)}
html.js:not(.reduced) .reveal-img.in img,
html.js:not(.reduced) .reveal-img.in .ph{transform:scale(1)}

/* Hero: orchestrierter Einstieg + Ken-Burns auf aktivem Slide */
html.js:not(.reduced) .hero-in{opacity:0; transform:translateY(26px); animation:heroIn 1s cubic-bezier(.22,.61,.21,1) forwards}
html.js:not(.reduced) .hero-in-1{animation-delay:.2s}
html.js:not(.reduced) .hero-in-2{animation-delay:.4s}
html.js:not(.reduced) .hero-in-3{animation-delay:.55s}
html.js:not(.reduced) .hero-in-4{animation-delay:.75s}
html.js:not(.reduced) .hero-in-5{animation-delay:.9s}
@keyframes heroIn{to{opacity:1; transform:none}}
@media (prefers-reduced-motion:no-preference){
  .hero-slide img,.hero-slide .ph{will-change:transform}
  .hero-slide.is-active img,.hero-slide.is-active .ph{animation:kenburns 9s ease-out forwards}
}
@keyframes kenburns{from{transform:scale(1.07)}to{transform:scale(1.0)}}

/* Panels: sanfter Zoom beim Hover */
.world img,.world .ph{transition:transform .9s cubic-bezier(.22,.61,.21,1)}
.world:hover img,.world:hover .ph{transform:scale(1.045)}
.masonry .frame img{transition:transform .9s cubic-bezier(.22,.61,.21,1)}
.masonry .frame:hover img{transform:scale(1.03)}

/* Nav-Unterstreichung gleitet */
.nav a{transition:color .25s ease,border-bottom-color .25s ease}
.hero-scroll{transition:opacity .3s ease}
.hero-scroll:hover{opacity:.7}

/* Sanfte Ränder für Bilder in Frames (Kontaktbogen-Feinschliff) */
.frame--lined{padding:0}
.frame--lined img,.frame--lined .ph{filter:none}

/* ============================================================
   V4 · Produktivzustand: FAQ, Formular-Feedback, Rechtsseiten
   ============================================================ */
.faq{max-width:860px}
.faq details{border-bottom:1px solid rgba(237,234,224,.16)}
.faq summary{
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:baseline;
  gap:var(--s3); padding:20px 0; font-family:var(--f-display); font-size:clamp(18px,2vw,23px);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-family:var(--f-body); font-weight:400; color:var(--sage); font-size:22px; line-height:1}
.faq details[open] summary::after{content:"–"}
.faq details p{color:#CFCDC0; font-size:15px; padding-bottom:var(--s3); margin:0; max-width:70ch}

.note{padding:var(--s3); border:1px solid; margin-bottom:var(--s2)}
.note--ok{background:#EDF2E7; border-color:#9FB491; color:#3F5537}
.note--ok h3{margin-bottom:var(--s1)}
.note--err{background:#F6E3DD; border-color:#CE9B8B; color:#8A4630; font-size:14px}

.hp{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}

.legal{max-width:820px}
.legal-body h3{margin-top:var(--s4)}
.legal-body p{color:var(--stone) }
.form-note a{color:var(--sage-deep)}

/* ============================================================
   KUNDENBEREICH (echtes Portal) + Login
   ============================================================ */
body.dash{background:#F1EEE6}
.dash-shell{display:grid; min-height:calc(100svh - 73px)}
@media(min-width:900px){.dash-shell{grid-template-columns:260px 1fr}}
.dash-side{background:var(--deep); color:var(--deep-ink); padding:var(--s3) 0}
.dash-side .who{padding:0 var(--s3) var(--s3); border-bottom:1px solid rgba(237,234,224,.12); margin-bottom:var(--s2)}
.dash-side .who b{font-family:var(--f-display); font-weight:400; font-size:17px; display:block}
.dash-side .who span{font-size:12px; color:#A69C8B}
.dash-side .who a{color:#A69C8B; font-size:12px}
.dash-nav{display:flex; overflow-x:auto; gap:2px; padding:0 var(--s2)}
@media(min-width:900px){.dash-nav{display:block; padding:0}}
.dash-nav button{
  appearance:none; background:none; border:0; cursor:pointer; color:#C7C5B8;
  font-family:var(--f-body); font-weight:500; font-size:13px; letter-spacing:.06em;
  padding:13px var(--s3); text-align:left; white-space:nowrap; border-left:2px solid transparent;
}
@media(min-width:900px){.dash-nav button{width:100%; display:block}}
.dash-nav button[aria-selected="true"]{color:#fff; background:rgba(255,255,255,.06); border-left-color:var(--sage)}
.dash-main{padding:var(--s3)}
@media(min-width:900px){.dash-main{padding:var(--s6)}}
.dash-panel{display:none}
.dash-panel.is-active{display:block}
.dash-h{display:flex; align-items:baseline; justify-content:space-between; gap:var(--s2); flex-wrap:wrap; margin-bottom:var(--s3)}
.dash-h h2{font-size:clamp(24px,3vw,34px); margin:0}
.cards{display:grid; gap:var(--s2)}
@media(min-width:700px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{background:#FCFAF5; border:1px solid var(--line); padding:var(--s3)}
.card .k{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--stone); display:block; margin-bottom:var(--s1)}
.card .v{font-family:var(--f-display); font-size:clamp(20px,2.6vw,28px); line-height:1.2}
.tbl{width:100%; border-collapse:collapse; background:#FCFAF5; border:1px solid var(--line); font-size:14px}
.tbl th{font-weight:500; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--stone); text-align:left; padding:12px 14px; border-bottom:1px solid var(--line)}
.tbl td{padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl-scroll{overflow-x:auto}
.pill{font-size:10px; letter-spacing:.14em; text-transform:uppercase; padding:4px 10px; border:1px solid; white-space:nowrap; display:inline-block}
.pill--ok{color:#4F6A45; border-color:#9FB491; background:#EDF2E7}
.pill--wait{color:#8A6D2F; border-color:#CBB27A; background:#F6EFDD}
.pill--open{color:#6B6553; border-color:#C9C2AE; background:#F1ECDF}
.chat{display:grid; grid-template-rows:1fr auto; background:#FCFAF5; border:1px solid var(--line); height:min(62svh,560px)}
.chat-log{overflow-y:auto; padding:var(--s3); display:flex; flex-direction:column; gap:var(--s2)}
.msg{max-width:78%; padding:12px 16px; font-size:14px; line-height:1.5; white-space:pre-line}
.msg time{display:block; font-size:10px; letter-spacing:.1em; color:var(--stone); margin-top:4px; white-space:normal}
.msg--in{align-self:flex-start; background:#EFEAE0; border:1px solid var(--line)}
.msg--out{align-self:flex-end; background:var(--deep); color:var(--deep-ink)}
.msg--out time{color:#A69C8B}
.chat-send{display:flex; gap:var(--s1); border-top:1px solid var(--line); padding:var(--s2)}
.chat-send input[type=text]{flex:1; border:1px solid var(--line); padding:12px 14px; font-family:var(--f-body); font-size:14px; background:#fff}
.chat-send button{border:0; background:var(--ink); color:var(--paper); font-family:var(--f-body); font-weight:500; font-size:12px; letter-spacing:.14em; text-transform:uppercase; padding:0 20px; cursor:pointer}
.chat-send button:hover{background:var(--sage-deep)}
.appt{display:grid; gap:var(--s2)}
.appt-item{display:flex; gap:var(--s3); align-items:center; background:#FCFAF5; border:1px solid var(--line); padding:var(--s2) var(--s3)}
.appt-date{text-align:center; min-width:56px}
.appt-date b{font-family:var(--f-display); font-weight:400; font-size:24px; display:block; line-height:1}
.appt-date span{font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--stone)}
.appt-item p{margin:0; font-size:14px}
.appt-item small{color:var(--stone)}
/* Login-Karte (Kundenbereich) */
.login-card{width:min(440px,100%); background:#FCFAF5; border:1px solid var(--line); padding:clamp(28px,5vw,48px)}
.login-card h1{font-size:clamp(26px,4vw,34px)}
.login-card .form-note{margin-top:var(--s2)}

/* ---------- Login-Bühne: Bildpanel + Karte ---------- */
.auth-split{display:grid; min-height:calc(100svh - 73px)}
@media(min-width:960px){.auth-split{grid-template-columns:1fr 1.1fr}}
.auth-visual{position:relative; display:none; overflow:hidden; background:var(--deep)}
@media(min-width:960px){.auth-visual{display:block}}
.auth-visual .frame{position:absolute; inset:0}
.auth-visual .frame::after{display:none}
.auth-visual::before{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(to top, rgba(28,23,18,.55), rgba(28,23,18,.1) 55%)}
.auth-quote{position:absolute; z-index:2; left:clamp(24px,4vw,48px); bottom:clamp(24px,4vw,44px); font-size:clamp(22px,2.4vw,32px); color:#F3F1E9}
.auth-quote .em{color:#EADFC9}
.login-wrap{display:grid; place-items:center; padding:var(--s5) var(--s3); background:#F1EEE6}
.login-card h1{font-size:clamp(28px,3.2vw,38px)}

/* ---------- Kategorie-Index (editorialer Leistungs-Index) ---------- */
.catdex{border-top:1px solid var(--line)}
.catdex-row{
  position:relative; display:grid; gap:6px var(--s3);
  grid-template-columns:1fr; align-items:baseline;
  padding:clamp(20px,3.5vw,40px) 0; border-bottom:1px solid var(--line);
  text-decoration:none;
}
@media(min-width:900px){
  .catdex-row{grid-template-columns:70px 1.2fr 1fr; align-items:center}
}
.catdex-title{
  font-family:var(--f-display); font-size:clamp(30px,5vw,64px); line-height:1.05;
  transition:color .3s ease, transform .5s cubic-bezier(.22,.61,.21,1);
}
.catdex-text{color:var(--stone); font-size:15px; max-width:44ch}
.catdex-row:hover .catdex-title{color:var(--sage-deep); transform:translateX(10px)}
.catdex-img{
  display:none; position:absolute; right:0; top:50%; transform:translateY(-50%) scale(.96);
  width:min(300px,26vw); aspect-ratio:4/3; z-index:2; pointer-events:none;
  opacity:0; transition:opacity .35s ease, transform .5s cubic-bezier(.22,.61,.21,1);
  box-shadow:0 24px 60px rgba(20,22,17,.25);
}
@media(min-width:1100px){.catdex-img{display:block}}
.catdex-img .frame{position:absolute; inset:0}
.catdex-img .frame::after{display:none}
.catdex-row:hover .catdex-img{opacity:1; transform:translateY(-50%) scale(1)}
@media(min-width:1100px){.catdex-row{padding-right:340px}}

/* ---------- Header-Dropdown (Portfolio-Kategorien) ---------- */
.nav-group{position:relative; display:inline-block}
.nav-group > a .caret{display:inline-block; width:7px; height:7px; margin-left:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px)}
.nav-drop{
  position:absolute; left:50%; top:100%; transform:translateX(-50%) translateY(6px);
  min-width:230px; padding:10px 0; background:var(--paper);
  border:1px solid var(--line); box-shadow:0 18px 44px rgba(30,25,18,.12);
  opacity:0; visibility:hidden; transition:opacity .22s ease, transform .22s ease, visibility .22s;
}
.nav-group:hover .nav-drop,
.nav-group:focus-within .nav-drop{opacity:1; visibility:visible; transform:translateX(-50%) translateY(0)}
.nav-drop a{
  display:block; margin:0; padding:10px 22px; border-bottom:0;
  font-weight:500; font-size:12px; letter-spacing:.16em; text-transform:uppercase; text-decoration:none;
}
.nav-drop a:hover{color:var(--sage-deep); background:var(--paper-2)}
.nav-drop .drop-all{border-top:1px solid var(--line); margin-top:8px; padding-top:14px; color:var(--stone)}
.mobile-nav .mob-sub{padding-left:calc(var(--s3) + 14px); font-size:12px; color:var(--stone); border-top:1px solid var(--paper-2)}

/* ---------- Portal: Download-Pills & Neu-Badge ---------- */
.dl-pill{
  display:inline-block; margin:6px 8px 0 0; padding:6px 12px; text-decoration:none;
  font-weight:500; font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  border:1px solid var(--sage-deep); color:var(--sage-deep); border-radius:var(--radius);
  transition:background .2s ease, color .2s ease;
}
.dl-pill:hover{background:var(--sage-deep); color:#fff}
.nbadge{
  display:inline-block; min-width:18px; text-align:center; margin-left:6px;
  background:var(--sage); color:#fff; border-radius:9px; font-size:11px; padding:1px 6px;
}

/* ---------- Logo ---------- */
.brand-img{display:block; height:46px; width:auto}
@media(min-width:900px){.brand-img{height:54px}}
.brand-img--foot{height:auto; width:min(210px,60vw)}

/* ---------- Lightbox ---------- */
.masonry .frame{cursor:zoom-in}
.lb{position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center;
    background:rgba(24,20,15,.92); padding:24px}
.lb.is-open{display:flex}
.lb-stage{position:relative; margin:0; max-width:min(1400px,92vw); max-height:88svh; display:grid; justify-items:center}
.lb-img{max-width:100%; max-height:82svh; display:block; box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lb-shield{position:absolute; inset:0}
.lb-cap{margin-top:12px; color:#C8BFB0; font-size:11px; letter-spacing:.2em; text-transform:uppercase}
.lb-close,.lb-prev,.lb-next{
  appearance:none; background:none; border:0; cursor:pointer; color:#EDE7DA;
  font-family:var(--f-display); line-height:1; padding:12px; z-index:2;
}
.lb-close{position:absolute; top:12px; right:16px; font-size:40px}
.lb-prev,.lb-next{font-size:52px; opacity:.75}
.lb-prev:hover,.lb-next:hover{opacity:1}
@media(max-width:700px){.lb-prev,.lb-next{position:absolute; bottom:8px} .lb-prev{left:20vw} .lb-next{right:20vw}}

/* ---------- Kopierschutz (Deterrent — Screenshots bleiben möglich) ---------- */
.frame img,.lb-img{-webkit-user-drag:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none}

/* ---------- Glas-Header (Kategorie-Seiten): transparent + Schliereffekt ---------- */
body.glass .preview-note{display:none}
body.glass .site-head{
  position:fixed; left:0; right:0; top:0;
  background:rgba(247,244,238,.55);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid rgba(33,29,24,.08);
}
@supports not (backdrop-filter:blur(1px)){
  body.glass .site-head{background:rgba(247,244,238,.9)}
}

/* ---------- Florales Ornament (Startseite) ---------- */


/* ---------- Schliereffekt: Hero-Foto läuft weich ins Creme (Kategorie-Seiten) ---------- */
body.glass .window::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px;
  height:clamp(380px, 52svh, 560px);
  pointer-events:none;
  /* Lightroom-Verlaufsfilter-Prinzip: eine lange, sinus-geeaste Dichte-Rampe */
  background:linear-gradient(to bottom,
    rgba(247,244,238,0.0) 0%,
    rgba(247,244,238,0.003) 7%,
    rgba(247,244,238,0.023) 14%,
    rgba(247,244,238,0.069) 21%,
    rgba(247,244,238,0.145) 29%,
    rgba(247,244,238,0.246) 36%,
    rgba(247,244,238,0.368) 43%,
    rgba(247,244,238,0.5) 50%,
    rgba(247,244,238,0.632) 57%,
    rgba(247,244,238,0.754) 64%,
    rgba(247,244,238,0.855) 71%,
    rgba(247,244,238,0.931) 79%,
    rgba(247,244,238,0.977) 86%,
    rgba(247,244,238,0.997) 93%,
    rgba(247,244,238,1.0) 100%);
}
body.glass .window{color:#F3F1E9}

/* ---------- Florales Ornament: Portfolio "Alle Arbeiten" ---------- */
body.floral-page .sec-head{position:relative}
body.floral-page .sec-head::before,
body.floral-page .sec-head::after{
  content:""; position:absolute; z-index:0; pointer-events:none;
  width:min(340px,26vw); height:620px;
  background:url("img/floral-bronze.svg?v=2") no-repeat center / contain;
  opacity:.34;
}
body.floral-page .sec-head::before{right:min(2vw,44px); top:0; transform:rotate(9deg); transform-origin:top center}
body.floral-page .sec-head::after{left:min(1vw,28px); top:140px; width:min(280px,21vw); height:520px; opacity:.28; transform:scaleX(-1) rotate(3deg)}
body.floral-page .sec-head > *{position:relative; z-index:1}
@media(max-width:800px){body.floral-page .sec-head::before,body.floral-page .sec-head::after{display:none}}

/* ---------- Kaputte Bildquelle: gestylter Platzhalter ---------- */
.frame.img-broken{background:linear-gradient(160deg,#EDE5D4,#D6CBB3)}
.frame.img-broken::before{
  content:"Motiv folgt"; position:absolute; inset:0; display:grid; place-items:center;
  font-family:'Jost'; font-weight:500; font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:#8D8371;
}