/* =========================================================
   JUWELIER KOHLER — Shared Styles (v5 / Mai 2026)
   Wird von allen Unterseiten genutzt. Homepage v5 hat
   diese Styles inline (Single-File). Bei Änderungen
   beide Stellen synchron halten.
   ========================================================= */

:root{
  --bg:#FAFAF6;
  --paper:#FFFFFF;
  --ink:#101010;
  --ink-soft:#3D3D3D;
  --muted:#8A8478;
  --line:#E5E1D6;
  --line-soft:#F0ECE1;
  --camel:#CCA98F;
  --camel-deep:#B08F75;
  --gold:#A88B4B;
  --gold-soft:#D4BF92;
  --whatsapp:#25D366;
  --max:1280px;
  --pad:clamp(20px,5vw,64px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{background:var(--bg);color:var(--ink);font-family:'Inter',system-ui,sans-serif;font-size:15px;line-height:1.6;font-weight:400}
img,picture,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
::selection{background:var(--camel);color:var(--ink)}

h1,h2,h3,h4,h5{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;letter-spacing:-.01em;line-height:1.08;color:var(--ink)}
h1{font-size:clamp(2.6rem,5.4vw,4.6rem);font-weight:400}
h2{font-size:clamp(1.9rem,3.4vw,3rem);font-weight:500}
h3{font-size:clamp(1.4rem,2vw,1.8rem);font-weight:500}
.it{font-style:italic;font-weight:400}
.meta{font-family:'Inter',sans-serif;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-weight:500}
.meta-gold{color:var(--gold);font-weight:600;display:inline-flex;align-items:center;gap:12px}
.meta-gold::before{content:"";display:inline-block;width:28px;height:1px;background:var(--gold)}
.lead{font-family:'Cormorant Garamond',serif;font-size:clamp(1.1rem,1.4vw,1.3rem);font-style:italic;color:var(--ink-soft);line-height:1.55}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.section{padding:clamp(80px,9vw,140px) 0}
.section-tight{padding:clamp(56px,6vw,90px) 0}
hr.line{border:0;height:1px;background:var(--line);margin:0}

.btn{display:inline-flex;align-items:center;gap:10px;padding:14px 26px;font-family:'Inter',sans-serif;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;border:1px solid transparent;transition:background .2s,color .2s,border-color .2s,gap .25s;cursor:pointer}
.btn-dark{background:var(--ink);color:var(--paper)}
.btn-dark:hover{background:#000;gap:14px}
.btn-outline{border-color:var(--ink);color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:var(--paper)}
.btn-camel{background:var(--camel);color:var(--ink)}
.btn-camel:hover{background:var(--camel-deep);gap:14px}
.btn-light{background:#fff;color:var(--ink);border-color:#fff}
.btn-light:hover{background:var(--ink);color:#fff;border-color:var(--ink);gap:14px}
.btn-outline-light{border-color:rgba(255,255,255,.7);color:#fff;background:transparent}
.btn-outline-light:hover{background:#fff;color:var(--ink);border-color:#fff;gap:14px}
.btn-wa{background:#25D366;color:#fff}
.btn-wa:hover{background:#1da851;color:#fff;gap:14px}
.btn-wa svg{fill:currentColor;stroke:none;width:14px;height:14px}
.btn svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.5}
.link-inline{display:inline-flex;align-items:center;gap:10px;font-family:'Inter',sans-serif;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;font-weight:500;color:var(--ink);padding:6px 0;border-bottom:1px solid var(--ink);transition:gap .25s}
.link-inline:hover{gap:16px}
.link-inline svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.5}

[data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
[data-reveal].in{opacity:1;transform:none}

/* ===== HEADER ===== */
.header{position:fixed;top:0;left:0;right:0;z-index:50;padding:18px var(--pad);display:flex;align-items:center;justify-content:space-between;background:rgba(250,250,246,.96);-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);border-bottom:1px solid var(--line);transition:border-color .3s,padding .3s,background .35s,backdrop-filter .35s,box-shadow .3s;box-shadow:0 1px 0 rgba(0,0,0,.02);min-height:80px}
.header.scrolled{background:rgba(250,250,246,.85);box-shadow:0 8px 20px -14px rgba(0,0,0,.18);padding:12px var(--pad)}
.header.is-hidden{transform:translateY(calc(-100% - 4px))}
.header-left{display:flex;align-items:center;gap:clamp(28px,4vw,52px)}
.logo{display:inline-flex;align-items:center;font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:500;color:var(--ink);min-height:44px}
.logo img{height:44px;width:auto;display:block;object-fit:contain;transition:height .3s}
.header.scrolled .logo img{height:38px}
.nav{display:flex;gap:clamp(20px,2.4vw,34px);list-style:none;align-items:center;position:static}
.nav-item{position:static}
.nav-item>a,.nav-item>button{font-family:'Inter',sans-serif;font-size:.78rem;color:var(--ink);font-weight:500;letter-spacing:.18em;text-transform:uppercase;padding:14px 2px;display:inline-flex;align-items:center;cursor:pointer;background:none;border:0;transition:color .25s;position:relative}
.nav-item>a:hover,.nav-item>button:hover,.nav-item.is-open>a,.nav-item.is-open>button{color:var(--ink)}
.nav-item>a::before,.nav-item>button::before{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.nav-item>a:hover::before,.nav-item>button:hover::before,.nav-item.is-open>a::before,.nav-item.is-open>button::before{transform:scaleX(1)}

/* Mega-Menü */
.megamenu{position:fixed;left:0;right:0;top:80px;background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(24px,2.4vw,36px) var(--pad) clamp(28px,2.8vw,40px);opacity:0;visibility:hidden;transform:translateY(-14px);transition:opacity .45s cubic-bezier(.2,.8,.2,1),visibility .45s,transform .5s cubic-bezier(.2,.8,.2,1);box-shadow:0 40px 80px -40px rgba(0,0,0,.22);z-index:49;pointer-events:none}
.nav-item.is-open .megamenu{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
.megamenu-col,.megamenu-featured{opacity:0;transform:translateY(16px);transition:opacity .5s cubic-bezier(.2,.8,.2,1),transform .5s cubic-bezier(.2,.8,.2,1)}
.nav-item.is-open .megamenu-col,.nav-item.is-open .megamenu-featured{opacity:1;transform:translateY(0)}
.nav-item.is-open .megamenu-col:nth-child(1){transition-delay:.08s}
.nav-item.is-open .megamenu-col:nth-child(2){transition-delay:.14s}
.nav-item.is-open .megamenu-col:nth-child(3){transition-delay:.2s}
.nav-item.is-open .megamenu-featured{transition-delay:.26s}
.megamenu-inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(28px,3vw,52px);align-items:start}
.megamenu-col h6{font-family:'Inter',sans-serif;font-size:.62rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-weight:600;margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.megamenu-col h6::after{content:"";flex:1;height:1px;background:var(--line);min-width:20px}
.megamenu-col ul{list-style:none;display:flex;flex-direction:column;gap:2px;padding:0;margin:0}
.megamenu-col a,.megamenu-col button{display:block;width:100%;text-align:left;padding:10px 0;font-family:'Cormorant Garamond',serif;font-weight:500;font-size:1.15rem;color:var(--ink);letter-spacing:-.005em;transition:color .2s,padding-left .25s;line-height:1.25;background:none;border:0;cursor:pointer}
.megamenu-col a:hover,.megamenu-col button:hover{color:var(--gold);padding-left:6px}
.megamenu-col a small,.megamenu-col button small{display:block;font-family:'Inter',sans-serif;font-size:.74rem;color:var(--muted);margin-top:3px;font-weight:400;letter-spacing:.01em;text-transform:none}
.megamenu-featured{background:#0c0c0c;position:relative;aspect-ratio:4/3;overflow:hidden;display:block;min-height:200px}
.megamenu-featured img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.megamenu-featured:hover img{transform:scale(1.05)}
.megamenu-featured::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.85) 100%)}
.megamenu-featured-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1a1a1a 0%,#2c2c2c 100%);color:rgba(255,255,255,.4)}
.megamenu-featured-ph svg{width:40%;max-width:80px;stroke:var(--gold);fill:none;stroke-width:1;opacity:.5}
.megamenu-featured .label{position:absolute;left:clamp(20px,1.6vw,28px);bottom:clamp(20px,1.6vw,26px);right:clamp(20px,1.6vw,28px);color:#fff;z-index:2;display:flex;flex-direction:column;gap:6px}
.megamenu-featured .label small{font-family:'Inter',sans-serif;font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.72);font-weight:600}
.megamenu-featured .label strong{font-family:'Cormorant Garamond',serif;font-size:1.15rem;font-weight:500;line-height:1.2}
.megamenu-featured .label em{font-style:italic;color:var(--gold);font-family:'Cormorant Garamond',serif;font-size:.92rem}
.mega-backdrop{position:fixed;top:80px;left:0;right:0;bottom:0;background:rgba(10,10,10,.35);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);opacity:0;visibility:hidden;z-index:48;transition:opacity .3s,visibility .3s;pointer-events:none}
.mega-backdrop.open{opacity:1;visibility:visible}
@media(max-width:980px){.megamenu,.mega-backdrop{display:none}}

.header-right{display:flex;align-items:center;gap:14px}
.icon-btn{width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:50%;color:var(--ink);transition:background .25s,border-color .25s;background:none;cursor:pointer}
.icon-btn:hover{background:var(--paper);border-color:var(--line)}
.icon-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5}
.btn-wa-mini{background:#25D366;color:#fff;display:inline-flex;align-items:center;gap:10px;padding:11px 18px;font-family:'Inter',sans-serif;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;border:1px solid #25D366;transition:background .2s}
.btn-wa-mini:hover{background:#1da851;border-color:#1da851}
.btn-wa-mini svg{fill:currentColor;stroke:none;width:14px;height:14px}
.burger{display:none;flex-direction:column;gap:5px;padding:10px;z-index:51;background:none;border:0;cursor:pointer}
.burger span{width:22px;height:1px;background:var(--ink);transition:transform .3s,opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.m-nav{position:fixed;inset:0;background:var(--bg);z-index:49;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s;padding:80px 20px 40px;overflow-y:auto}
.m-nav.open{opacity:1;visibility:visible}
.m-nav ul{list-style:none;text-align:center;display:flex;flex-direction:column;gap:18px;width:100%;max-width:340px}
.m-nav ul a,.m-nav ul button{font-family:'Cormorant Garamond',serif;font-size:1.85rem;font-weight:400;color:var(--ink);background:none;border:0;cursor:pointer;width:100%}
.m-nav .m-meta{margin-top:44px;display:flex;flex-direction:column;gap:18px;align-items:center;width:100%;max-width:300px}
body.nav-open{overflow:hidden}
@media(max-width:980px){.nav,.header-right .icon-btn-search{display:none}.burger{display:flex}.header-right{gap:8px}}

/* ===== Page-Hero (für Unterseiten) ===== */
.page-hero{padding:130px 0 0;background:var(--bg);position:relative}
.page-hero-inner{max-width:var(--max);margin:0 auto;padding:clamp(50px,6vw,90px) var(--pad) clamp(48px,5vw,72px)}
.page-hero .crumbs{font-family:'Inter',sans-serif;font-size:.7rem;color:var(--muted);letter-spacing:.04em;margin-bottom:clamp(20px,2.5vw,30px)}
.page-hero .crumbs a{color:var(--muted);transition:color .2s}
.page-hero .crumbs a:hover{color:var(--ink)}
.page-hero .crumbs .sep{margin:0 10px;color:var(--line)}
.page-hero .meta-gold{display:inline-flex;margin-bottom:18px}
.page-hero h1{max-width:18ch;font-weight:400;line-height:1.05;margin-bottom:24px;letter-spacing:-.015em}
.page-hero h1 em{font-style:italic;color:var(--ink-soft)}
.page-hero .lead{max-width:60ch;color:var(--ink-soft)}
.page-hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.page-hero-img{position:relative;width:100%;height:min(60vh,600px);overflow:hidden;background:var(--bg)}
.page-hero-img img{width:100%;height:100%;object-fit:cover}
.page-hero-img::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.12) 50%,rgba(0,0,0,.45) 100%);pointer-events:none}

/* ===== Trust-Bar (für Unterseiten) ===== */
.trust-bar{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:30px 0}
.trust-row{max-width:var(--max);margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(18px,2vw,32px);align-items:center}
.trust-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;border-right:1px solid var(--line-soft);padding:0 12px}
.trust-item:last-child{border-right:0}
.trust-item .num{font-family:'Cormorant Garamond',serif;font-size:clamp(1.6rem,2.4vw,2.1rem);font-weight:500;color:var(--ink);line-height:1}
.trust-item .num em{font-style:italic;color:var(--gold);font-weight:400}
.trust-item .lbl{font-family:'Inter',sans-serif;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:600;line-height:1.3}
.trust-item .stars{color:var(--gold);font-size:.78rem;letter-spacing:.1em;line-height:1}
.trust-item svg{width:22px;height:22px}
@media(max-width:900px){.trust-row{grid-template-columns:repeat(2,1fr);gap:24px 12px}.trust-item{border-right:0;border-bottom:1px solid var(--line-soft);padding:0 8px 16px}.trust-item:nth-last-child(-n+2){border-bottom:0;padding-bottom:0}}
@media(max-width:520px){.trust-row{grid-template-columns:1fr}.trust-item{border-bottom:1px solid var(--line-soft)!important;padding:14px 0!important}.trust-item:last-child{border-bottom:0!important}}

/* ===== Editorial Split (alternierend Bild/Text) ===== */
.split{padding:clamp(80px,9vw,130px) 0;background:var(--bg)}
.split.alt{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.split-grid{max-width:var(--max);margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px);align-items:center}
.split-grid.flip > div:first-child{order:2}
.split-img{aspect-ratio:4/5;overflow:hidden;background:var(--bg)}
.split-img img{width:100%;height:100%;object-fit:cover}
.split-img-ph{display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--bg) 0%,#EFE9DC 100%);height:100%}
.split-img-ph svg{width:42%;max-width:120px;opacity:.32;stroke:var(--ink-soft);fill:none;stroke-width:1}
.split-text .meta-gold{display:inline-flex;margin-bottom:20px}
.split-text h2{font-weight:500;line-height:1.05;margin-bottom:24px;max-width:14ch}
.split-text h2 em{font-style:italic;color:var(--ink-soft)}
.split-text .lede{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.15rem;color:var(--ink-soft);line-height:1.55;margin-bottom:24px;max-width:46ch}
.split-text p{font-size:.96rem;line-height:1.75;color:var(--ink-soft);margin-bottom:18px;max-width:48ch}
.split-text .btn{margin-top:14px}
@media(max-width:900px){.split-grid,.split-grid.flip{grid-template-columns:1fr;gap:32px}.split-grid.flip > div:first-child{order:0}.split-img{aspect-ratio:3/2;max-height:380px}}

/* ===== Promise / Feature-Cards (3 Spalten) ===== */
.feature-grid{max-width:var(--max);margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,2.6vw,40px)}
.feature-card{background:var(--paper);border:1px solid var(--line);padding:clamp(28px,3vw,40px) clamp(26px,3vw,36px);display:flex;flex-direction:column;gap:18px;transition:border-color .35s,transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
.feature-card:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:0 22px 44px -22px rgba(0,0,0,.18)}
.feature-card .ico{width:56px;height:56px;color:var(--gold);display:flex;align-items:center;justify-content:center}
.feature-card .ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.4}
.feature-card h3{font-family:'Cormorant Garamond',serif;font-size:1.4rem;font-weight:500;color:var(--ink);letter-spacing:.01em;margin-bottom:0}
.feature-card p{color:var(--ink-soft);font-size:.93rem;line-height:1.7}
@media(max-width:900px){.feature-grid{grid-template-columns:1fr;max-width:520px;margin-left:auto;margin-right:auto}}

/* ===== Watch-Cards (Listings auf Marken-Pages) ===== */
.watch-grid{max-width:var(--max);margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(24px,2.4vw,40px) clamp(20px,2vw,32px)}
.watch-card{display:flex;flex-direction:column;gap:18px;cursor:pointer;transition:transform .4s cubic-bezier(.2,.7,.2,1);color:var(--ink)}
.watch-card:hover{transform:translateY(-4px)}
.watch-img{position:relative;aspect-ratio:1/1.05;background:var(--bg);overflow:hidden;border:1px solid var(--line-soft)}
.watch-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.watch-card:hover .watch-img img{transform:scale(1.04)}
.watch-ribbon{position:absolute;top:14px;left:14px;font-family:'Inter',sans-serif;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:var(--gold);background:rgba(255,255,255,.95);padding:6px 12px;backdrop-filter:blur(4px)}
.watch-ribbon.gold{background:var(--gold);color:#fff}
.watch-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--bg) 0%,#EFE9DC 100%)}
.watch-ph svg{width:42%;max-width:120px;opacity:.28;stroke:var(--ink-soft);fill:none;stroke-width:1}
.watch-meta{display:flex;flex-direction:column;gap:4px}
.watch-brand{font-family:'Inter',sans-serif;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-weight:600}
.watch-name{font-family:'Cormorant Garamond',serif;font-size:1.25rem;font-weight:500;color:var(--ink);line-height:1.22;letter-spacing:-.005em}
.watch-foot{display:flex;justify-content:space-between;align-items:baseline;padding-top:12px;border-top:1px solid var(--line);margin-top:6px}
.watch-foot .price{font-family:'Cormorant Garamond',serif;font-size:1.05rem;font-weight:500;letter-spacing:.01em}
.watch-foot .badge{font-family:'Inter',sans-serif;font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600}
@media(max-width:1000px){.watch-grid{grid-template-columns:repeat(2,1fr);gap:30px}}
@media(max-width:560px){.watch-grid{grid-template-columns:1fr;gap:32px;max-width:340px;margin-left:auto;margin-right:auto}}

/* ===== CTA-Block (für Unterseiten) ===== */
.cta-block{padding:clamp(80px,9vw,130px) 0;background:var(--bg)}
.cta-grid{max-width:var(--max);margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,2.4vw,40px)}
.cta-card{background:var(--paper);border:1px solid var(--line);padding:clamp(40px,5vw,72px) clamp(32px,4vw,56px);display:flex;flex-direction:column;align-items:flex-start;gap:18px;transition:border-color .3s,transform .35s,background .3s;cursor:pointer}
.cta-card:hover{border-color:var(--ink);transform:translateY(-4px)}
.cta-card .meta-gold{display:inline-flex;font-size:.66rem;margin-bottom:0}
.cta-card h3{font-family:'Cormorant Garamond',serif;font-size:clamp(1.7rem,2.6vw,2.3rem);font-weight:500;line-height:1.15;color:var(--ink);max-width:18ch;letter-spacing:-.005em}
.cta-card .sub{font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--ink-soft);font-size:1.02rem;font-weight:400;margin-bottom:12px}
.cta-card .btn{margin-top:14px;pointer-events:none}
@media(max-width:780px){.cta-grid{grid-template-columns:1fr}}

/* ===== Footer ===== */
.footer{background:var(--ink);color:#cfcdc7;padding:36px 0 28px;border-top:1px solid var(--ink)}
.footer-row{max-width:var(--max);margin:0 auto;padding:0 var(--pad);display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.footer-logo img{height:34px;width:auto;filter:brightness(0) invert(1);opacity:.85}
.footer-legal{display:flex;gap:24px;font-family:'Inter',sans-serif;font-size:.74rem;color:#9c958a;letter-spacing:.04em}
.footer-legal a{transition:color .2s}
.footer-legal a:hover{color:var(--gold)}
.footer-copy{font-family:'Inter',sans-serif;font-size:.7rem;color:#7a7468;letter-spacing:.04em;margin-top:18px;text-align:center}

/* ===== Sticky WhatsApp ===== */
.sticky-wa{position:fixed;right:18px;bottom:18px;z-index:40;width:56px;height:56px;background:#25D366;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(37,211,102,.4);transition:transform .3s}
.sticky-wa:hover{transform:scale(1.06)}
.sticky-wa svg{width:26px;height:26px;fill:currentColor}
@media(min-width:980px){.sticky-wa{display:none}}

/* ===== Modals ===== */
.modal{position:fixed;inset:0;z-index:200;background:rgba(20,20,20,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s}
.modal.open{opacity:1;visibility:visible}
.modal-box{background:var(--bg);max-width:780px;width:100%;max-height:90vh;overflow-y:auto;position:relative;animation:modalIn .4s cubic-bezier(.2,.7,.2,1)}
@keyframes modalIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.modal-close{position:absolute;top:18px;right:18px;width:40px;height:40px;background:rgba(255,255,255,.95);border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--ink);transition:background .2s,transform .2s;z-index:5}
.modal-close:hover{background:var(--ink);color:#fff;transform:rotate(90deg)}
.modal-close svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8}
.modal-head{padding:clamp(36px,4vw,52px) clamp(32px,4vw,48px) clamp(20px,2vw,30px);background:var(--paper);border-bottom:1px solid var(--line)}
.modal-head .meta-gold{display:inline-flex;margin-bottom:14px}
.modal-head h2{font-family:'Cormorant Garamond',serif;font-size:clamp(1.7rem,2.6vw,2.4rem);font-weight:500;line-height:1.15;color:var(--ink);margin-bottom:10px}
.modal-head .sub{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.05rem;color:var(--ink-soft)}
.modal-body{padding:clamp(28px,3vw,40px) clamp(32px,4vw,48px) clamp(36px,4vw,52px)}
.modal-body p{color:var(--ink-soft);font-size:.96rem;line-height:1.7;margin-bottom:20px}
.steps{display:flex;flex-direction:column;gap:0;margin:24px 0}
.step{display:flex;gap:24px;padding:24px 0;border-bottom:1px solid var(--line-soft)}
.step:last-child{border-bottom:0}
.step-n{flex-shrink:0;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.5rem;color:var(--gold);font-weight:400;line-height:1;width:36px;padding-top:2px}
.step-text h4{font-family:'Cormorant Garamond',serif;font-size:1.15rem;font-weight:500;color:var(--ink);margin-bottom:6px;line-height:1.25;letter-spacing:0;text-transform:none}
.step-text p{margin-bottom:0;font-size:.92rem;line-height:1.6}
.modal-cta{margin-top:30px;padding-top:24px;border-top:1px solid var(--line);display:flex;gap:14px;flex-wrap:wrap}
.brand-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:10px}
.brand-pick a{display:flex;flex-direction:column;align-items:center;gap:14px;padding:32px 18px;background:var(--paper);border:1px solid var(--line);text-align:center;transition:border-color .25s,background .25s,transform .3s}
.brand-pick a:hover{border-color:var(--gold);transform:translateY(-4px);background:var(--bg)}
.brand-pick .brand-name{font-family:'Cormorant Garamond',serif;font-size:1.3rem;font-weight:500;color:var(--ink)}
.brand-pick .brand-sub{font-family:'Inter',sans-serif;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-weight:500}
.brand-pick .brand-img{width:100%;aspect-ratio:1/1;background:var(--bg);overflow:hidden}
.brand-pick .brand-img img{width:100%;height:100%;object-fit:cover}
@media(max-width:600px){.brand-pick{grid-template-columns:1fr;gap:10px}}
body.modal-open{overflow:hidden}

/* ===== Editorial Article (für Blog-Posts) ===== */
.article{padding:130px 0 clamp(80px,9vw,120px);background:var(--bg)}
.article-head{max-width:760px;margin:0 auto;padding:0 var(--pad);text-align:center}
.article-head .crumbs{font-family:'Inter',sans-serif;font-size:.7rem;color:var(--muted);letter-spacing:.04em;margin-bottom:24px;text-align:left}
.article-head .meta-gold{margin-bottom:24px;display:inline-flex}
.article-head h1{font-size:clamp(2.2rem,4.4vw,3.6rem);font-weight:400;line-height:1.1;margin-bottom:24px;letter-spacing:-.005em}
.article-head h1 em{font-style:italic;color:var(--ink-soft)}
.article-head .lead{max-width:54ch;margin:0 auto 32px;color:var(--ink-soft)}
.article-byline{display:inline-flex;align-items:center;gap:16px;font-family:'Inter',sans-serif;font-size:.74rem;color:var(--muted);letter-spacing:.04em;padding-top:24px;border-top:1px solid var(--line);max-width:540px;margin:0 auto;justify-content:center;flex-wrap:wrap}
.article-byline strong{font-weight:600;color:var(--ink-soft)}
.article-byline .dot{width:3px;height:3px;background:var(--gold);border-radius:50%}
.article-img{max-width:1080px;margin:clamp(40px,5vw,72px) auto 0;padding:0 var(--pad)}
.article-img-inner{aspect-ratio:16/9;background:linear-gradient(135deg,var(--bg) 0%,#EFE9DC 100%);overflow:hidden;display:flex;align-items:center;justify-content:center;color:var(--muted);font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.1rem}
.article-img-inner img{width:100%;height:100%;object-fit:cover}
.article-body{max-width:720px;margin:clamp(48px,6vw,80px) auto 0;padding:0 var(--pad);font-family:'Inter',sans-serif;font-size:1.02rem;line-height:1.85;color:var(--ink-soft)}
.article-body h2{font-family:'Cormorant Garamond',serif;font-size:clamp(1.7rem,2.8vw,2.4rem);font-weight:500;line-height:1.15;margin:clamp(40px,5vw,64px) 0 20px;color:var(--ink);letter-spacing:-.005em}
.article-body h2 em{font-style:italic;color:var(--ink-soft)}
.article-body h3{font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:500;line-height:1.2;margin:36px 0 14px;color:var(--ink);letter-spacing:0;text-transform:none}
.article-body p{margin-bottom:22px}
.article-body strong{color:var(--ink);font-weight:600}
.article-body em{font-style:italic}
.article-body ul,.article-body ol{margin:0 0 22px 26px}
.article-body li{margin-bottom:10px}
.article-body blockquote{margin:32px 0;padding:8px 0 8px 26px;border-left:1px solid var(--gold);font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.25rem;line-height:1.5;color:var(--ink)}
.article-body blockquote cite{display:block;margin-top:12px;font-family:'Inter',sans-serif;font-style:normal;font-size:.74rem;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;font-weight:600}
.article-body blockquote cite::before{content:"— "}
.article-body a{color:var(--ink);border-bottom:1px solid var(--gold);transition:color .2s,border-color .2s}
.article-body a:hover{color:var(--gold);border-color:var(--ink)}
.article-body .key-fact{background:var(--paper);border-left:2px solid var(--gold);padding:24px 28px;margin:28px 0;font-family:'Cormorant Garamond',serif;font-style:italic;font-size:1.15rem;color:var(--ink);line-height:1.5}

/* FAQ */
.faq{margin:48px 0 0;border-top:1px solid var(--line);padding-top:32px}
.faq h2{margin-top:0!important}
.faq-item{border-bottom:1px solid var(--line-soft);padding:18px 0}
.faq-item summary{font-family:'Cormorant Garamond',serif;font-size:1.2rem;font-weight:500;color:var(--ink);cursor:pointer;list-style:none;padding-right:30px;position:relative;line-height:1.3}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font-family:'Inter',sans-serif;font-weight:400;color:var(--gold);font-size:1.3rem;transition:transform .3s}
.faq-item[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq-item p{margin:14px 0 4px;font-family:'Inter',sans-serif;font-size:.95rem;line-height:1.7;color:var(--ink-soft)}

/* Author Box */
.article-foot{max-width:720px;margin:60px auto 0;padding:36px var(--pad) 0;border-top:1px solid var(--line)}
.author-box{display:flex;gap:20px;align-items:flex-start;background:var(--paper);padding:28px;border:1px solid var(--line)}
.author-box .avatar{width:64px;height:64px;border-radius:50%;background:var(--gold);color:#fff;display:flex;align-items:center;justify-content:center;font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:500;flex-shrink:0}
.author-box .name{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:1.2rem;color:var(--ink);margin-bottom:4px}
.author-box .role{font-family:'Inter',sans-serif;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:10px}
.author-box .bio{font-family:'Inter',sans-serif;font-size:.86rem;line-height:1.6;color:var(--ink-soft)}

/* ===== Form ===== */
.form-group{margin-bottom:22px}
.form-group label{display:block;font-family:'Inter',sans-serif;font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:8px}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:14px 16px;border:1px solid var(--line);background:var(--paper);font-family:'Inter',sans-serif;font-size:.95rem;color:var(--ink);transition:border-color .25s}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:var(--gold)}
.form-group textarea{min-height:140px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:600px){.form-row{grid-template-columns:1fr;gap:0}}

/* ===== Legal Page ===== */
.legal{padding:140px 0 80px;background:var(--bg)}
.legal-inner{max-width:780px;margin:0 auto;padding:0 var(--pad)}
.legal h1{font-size:clamp(2rem,4vw,3rem);font-weight:400;margin-bottom:32px}
.legal h2{font-family:'Cormorant Garamond',serif;font-size:1.5rem;font-weight:500;margin:36px 0 14px;color:var(--ink);letter-spacing:0;text-transform:none}
.legal h3{font-family:'Inter',sans-serif;font-size:.85rem;font-weight:600;letter-spacing:.04em;color:var(--ink);margin:24px 0 8px;text-transform:none}
.legal p,.legal li{font-family:'Inter',sans-serif;font-size:.92rem;line-height:1.7;color:var(--ink-soft);margin-bottom:14px}
.legal ul,.legal ol{margin:0 0 14px 24px}
.legal a{color:var(--ink);border-bottom:1px solid var(--gold);transition:color .2s}
.legal a:hover{color:var(--gold)}
.legal .note{background:var(--paper);border-left:2px solid var(--gold);padding:18px 22px;margin:24px 0;font-size:.85rem;color:var(--ink-soft)}

/* =========================================================
   v5.1 LOOK & FEEL · Image-Komponenten
   ========================================================= */

/* Page-Hero mit großem Bild rechts */
.page-hero.with-image{padding:120px 0 0}
.page-hero-grid{max-width:var(--max);margin:0 auto;padding:clamp(40px,5vw,72px) var(--pad) clamp(48px,5vw,72px);display:grid;grid-template-columns:7fr 5fr;gap:clamp(28px,4vw,72px);align-items:center}
.page-hero-grid .text{display:flex;flex-direction:column;gap:0}
.page-hero-grid .img{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--bg)}
.page-hero-grid .img img{width:100%;height:100%;object-fit:cover;animation:hero-zoom 20s ease-in-out infinite alternate}
@keyframes hero-zoom{0%{transform:scale(1)}100%{transform:scale(1.05)}}
@media(max-width:900px){.page-hero-grid{grid-template-columns:1fr;gap:32px}.page-hero-grid .img{aspect-ratio:3/2;max-height:400px}}

/* Full-Bleed cinematic Image-Sektion */
.cinema{position:relative;height:min(72vh,720px);overflow:hidden;background:#0a0a0a;color:#fff}
.cinema > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85;animation:hero-zoom 24s ease-in-out infinite alternate}
.cinema::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,0) 35%,rgba(0,0,0,.85) 100%);z-index:1}
.cinema-inner{position:relative;z-index:2;height:100%;max-width:var(--max);margin:0 auto;padding:var(--pad);display:flex;flex-direction:column;justify-content:flex-end;gap:18px}
.cinema .meta-gold{color:rgba(255,255,255,.92);margin-bottom:8px}
.cinema .meta-gold::before{background:var(--gold)}
.cinema h2{color:#fff;font-weight:400;font-size:clamp(2rem,4vw,3.4rem);line-height:1.05;letter-spacing:-.015em;margin-bottom:20px;max-width:24ch;text-shadow:0 4px 28px rgba(0,0,0,.4)}
.cinema h2 em{font-style:italic;color:var(--gold)}
.cinema p{font-family:'Cormorant Garamond',serif;font-size:clamp(1.05rem,1.3vw,1.3rem);font-style:italic;color:rgba(255,255,255,.9);max-width:54ch;line-height:1.55;text-shadow:0 2px 14px rgba(0,0,0,.4)}
.cinema-ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}

/* Image-Mosaic · 3 oder 4 Spalten Bilder */
.mosaic{padding:clamp(40px,5vw,80px) 0;background:var(--bg)}
.mosaic-grid{max-width:var(--max);margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(8px,1vw,18px)}
.mosaic-grid.four{grid-template-columns:repeat(4,1fr)}
.mosaic-tile{aspect-ratio:1;overflow:hidden;background:var(--bg);position:relative}
.mosaic-tile img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.mosaic-tile:hover img{transform:scale(1.06)}
.mosaic-tile.tall{aspect-ratio:1/1.4}
.mosaic-tile.wide{aspect-ratio:2/1;grid-column:span 2}
@media(max-width:900px){.mosaic-grid{grid-template-columns:repeat(2,1fr)}.mosaic-grid.four{grid-template-columns:repeat(2,1fr)}.mosaic-tile.wide{grid-column:span 1;aspect-ratio:1}}

/* Editorial Image (full-width center mit caption) */
.editorial-img{padding:clamp(40px,5vw,80px) 0}
.editorial-img-inner{max-width:1080px;margin:0 auto;padding:0 var(--pad)}
.editorial-img-frame{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--bg)}
.editorial-img-frame img{width:100%;height:100%;object-fit:cover}
.editorial-img-caption{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-top:18px;font-family:'Inter',sans-serif;font-size:.74rem;color:var(--muted);letter-spacing:.04em}
.editorial-img-caption .credit{font-style:italic;font-family:'Cormorant Garamond',serif;font-size:.92rem}

/* Process-Rail · Schritt-für-Schritt mit Bildern */
.process-rail{padding:clamp(80px,9vw,130px) 0;background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.process-rail-head{text-align:center;max-width:680px;margin:0 auto clamp(48px,5vw,72px);padding:0 var(--pad)}
.process-rail-head .meta-gold{display:inline-flex;margin-bottom:18px}
.process-rail-head h2{font-weight:500}
.proc-rail{display:flex;gap:clamp(16px,1.8vw,28px);overflow-x:auto;scroll-snap-type:x mandatory;padding:8px clamp(20px,5vw,64px) 24px;scrollbar-width:none}
.proc-rail::-webkit-scrollbar{display:none}
.proc-card{flex:0 0 clamp(280px,25vw,340px);scroll-snap-align:start;background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden;transition:border-color .35s,transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
.proc-card:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:0 22px 44px -22px rgba(0,0,0,.18)}
.proc-card-media{position:relative;aspect-ratio:4/3;overflow:hidden;background:#0c0c0c}
.proc-card-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s cubic-bezier(.2,.7,.2,1);filter:brightness(.85) contrast(1.05)}
.proc-card:hover .proc-card-media img{transform:scale(1.04);filter:brightness(1) contrast(1)}
.proc-card-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(0,0,0,.5) 100%);pointer-events:none}
.proc-card-n{position:absolute;top:14px;right:16px;font-family:'Cormorant Garamond',serif;font-style:italic;color:#fff;font-size:2rem;line-height:1;z-index:2;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.proc-card-body{padding:clamp(22px,2vw,28px)}
.proc-card-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.64rem;letter-spacing:.26em;text-transform:uppercase;font-weight:600;color:var(--gold);margin-bottom:10px}
.proc-card-eyebrow::before{content:"";width:18px;height:1px;background:var(--gold)}
.proc-card h3{font-family:'Cormorant Garamond',serif;font-weight:500;font-size:clamp(1.3rem,1.7vw,1.55rem);line-height:1.18;margin-bottom:10px}
.proc-card h3 em{font-style:italic;color:var(--ink-soft)}
.proc-card p{font-size:.86rem;line-height:1.6;color:var(--muted)}

/* Editorial Split mit echtem Bild */
.split-img.real{aspect-ratio:4/5}
.split-img.real img{filter:brightness(.97) contrast(1.02)}

/* CTA Card mit Background-Bild */
.cta-card.with-bg{position:relative;overflow:hidden;color:#fff;background:#0a0a0a;border-color:#0a0a0a;min-height:340px;justify-content:flex-end}
.cta-card.with-bg .cta-bg{position:absolute;inset:0;z-index:0}
.cta-card.with-bg .cta-bg img{width:100%;height:100%;object-fit:cover;opacity:.65;transition:transform 1.2s cubic-bezier(.2,.8,.2,1),opacity .4s}
.cta-card.with-bg:hover .cta-bg img{opacity:.8;transform:scale(1.04)}
.cta-card.with-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.2) 0%,rgba(0,0,0,.45) 50%,rgba(0,0,0,.85) 100%);z-index:1;pointer-events:none}
.cta-card.with-bg > *{position:relative;z-index:2}
.cta-card.with-bg h3,.cta-card.with-bg .sub{color:#fff}
.cta-card.with-bg .sub{color:rgba(255,255,255,.8)}
.cta-card.with-bg .meta-gold{color:var(--gold)}
.cta-card.with-bg .btn-dark{background:#fff;color:var(--ink);border-color:#fff}
.cta-card.with-bg:hover{border-color:var(--gold);transform:translateY(-4px)}

/* Two-up image grid (für Marken-Pages) */
.image-pair{padding:clamp(40px,5vw,80px) 0}
.image-pair-grid{max-width:var(--max);margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px)}
.image-pair-tile{aspect-ratio:4/5;overflow:hidden;background:var(--bg)}
.image-pair-tile img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.image-pair-tile:hover img{transform:scale(1.04)}
@media(max-width:780px){.image-pair-grid{grid-template-columns:1fr;gap:14px}.image-pair-tile{aspect-ratio:3/2}}

/* Story-Caption über Bild */
.story-caption{position:absolute;bottom:clamp(20px,3vw,40px);left:clamp(20px,3vw,40px);right:clamp(20px,3vw,40px);color:#fff;z-index:2;text-shadow:0 2px 12px rgba(0,0,0,.5);font-family:'Cormorant Garamond',serif}
.story-caption .meta{color:rgba(255,255,255,.8);font-family:'Inter',sans-serif;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;font-weight:600;margin-bottom:8px}
.story-caption h4{color:#fff;font-family:'Cormorant Garamond',serif;font-weight:500;font-size:1.4rem;line-height:1.2;letter-spacing:0;text-transform:none}

/* Single Hero-Image für Marken-Pages (über volle Breite) */
.brand-hero{position:relative;height:min(70vh,640px);overflow:hidden;background:#0a0a0a;color:#fff}
.brand-hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}
.brand-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,rgba(0,0,0,0) 30%,rgba(0,0,0,.75) 100%);z-index:1}
.brand-hero-inner{position:relative;z-index:2;height:100%;max-width:var(--max);margin:0 auto;padding:130px var(--pad) clamp(40px,5vw,72px);display:flex;flex-direction:column;justify-content:flex-end}
.brand-hero .crumbs{color:rgba(255,255,255,.7);margin-bottom:clamp(16px,2vw,24px);font-family:'Inter',sans-serif;font-size:.7rem;letter-spacing:.04em}
.brand-hero .crumbs a{color:rgba(255,255,255,.7)}
.brand-hero .crumbs a:hover{color:#fff}
.brand-hero .crumbs .sep{color:rgba(255,255,255,.3)}
.brand-hero .meta-gold{color:var(--gold);margin-bottom:18px;display:inline-flex}
.brand-hero h1{color:#fff;font-weight:400;line-height:1.02;font-size:clamp(2.8rem,5.6vw,4.8rem);max-width:16ch;letter-spacing:-.02em;text-shadow:0 4px 28px rgba(0,0,0,.4);margin-bottom:24px}
.brand-hero h1 em{font-style:italic;color:var(--gold)}
.brand-hero .lead{color:rgba(255,255,255,.92);max-width:54ch;font-size:clamp(1.05rem,1.3vw,1.3rem);text-shadow:0 2px 14px rgba(0,0,0,.4)}
.brand-hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}