/* ─────────────────────────────────────────────────────────────
   Maison Lumière — Shared Styles
   Editorial White / Bleu · Blanc · Rouge
   ───────────────────────────────────────────────────────────── */

@font-face{
  font-family:"Cormorant";
  src:url("fonts/CormorantGaramond.woff2") format("woff2-variations"),
      url("fonts/CormorantGaramond.woff2") format("woff2");
  font-weight:300 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Cormorant";
  src:url("fonts/CormorantGaramond-Italic.woff2") format("woff2-variations"),
      url("fonts/CormorantGaramond-Italic.woff2") format("woff2");
  font-weight:300 700; font-style:italic; font-display:swap;
}
@font-face{
  font-family:"Mona";
  src:url("fonts/MonaSans.woff2") format("woff2-variations"),
      url("fonts/MonaSans.woff2") format("woff2");
  font-weight:200 900; font-stretch:75% 125%; font-style:normal; font-display:swap;
}

:root{
  --warm-white:#FFFFFF;
  --creme:#F6F4F0;
  --grey:#A8ADB8;
  --grey-line:#E8E8EC;
  --bleu:#1B2A5B;
  --bleu-dark:#101A3D;
  --bleu-soft:#E4E8F2;
  --rouge:#C8102E;
  --rouge-dark:#9E0A23;
  --espresso:#0F172A;
  --espresso-soft:#4A5468;

  --serif:"Cormorant", Georgia, "Times New Roman", serif;
  --sans:"Mona", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --container:1320px;
  --pad:clamp(20px, 4vw, 56px);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--warm-white); color:var(--espresso);
  font-family:var(--sans); font-weight:380; font-size:16px; line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; background:none; border:0; cursor:pointer; color:inherit}

/* ─── Atmosphäre ─────────────────────────────────────────────── */
.window-light{
  position:fixed; inset:0; pointer-events:none; z-index:1;
  background:
    radial-gradient(ellipse 60% 50% at 15% 10%, rgba(228,232,242,.55), transparent 60%),
    radial-gradient(ellipse 40% 35% at 85% 80%, rgba(200,16,46,.04), transparent 65%);
  mix-blend-mode:multiply;
  animation:lightDrift 24s var(--ease) infinite alternate;
}
@keyframes lightDrift{
  0%{transform:translate3d(0,0,0)}
  100%{transform:translate3d(-3%,2%,0)}
}
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:2;
  opacity:.035; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.06 0 0 0 0 0.09 0 0 0 0 0.16 0 0 0 .8 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ─── Typografie ─────────────────────────────────────────────── */
.eyebrow{
  font-family:var(--sans); font-weight:500; font-size:11px;
  letter-spacing:.28em; text-transform:uppercase; color:var(--espresso-soft);
  display:inline-flex; align-items:center; gap:14px;
}
.eyebrow::before{content:""; width:32px; height:1px; background:var(--rouge)}
h1,h2,h3,h4{
  font-family:var(--serif); font-weight:400; letter-spacing:-.01em;
  line-height:1.05; margin:0; color:var(--espresso);
}
h1{font-size:clamp(48px, 8.4vw, 132px)}
h2{font-size:clamp(38px, 5.6vw, 78px); line-height:1.08}
h3{font-size:clamp(24px, 2.6vw, 34px)}
h4{font-size:22px}
.serif-italic{font-style:italic; color:var(--bleu)}
p{margin:0 0 1em; max-width:62ch}

/* ─── Buttons ────────────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; gap:12px;
  padding:14px 26px;
  font-family:var(--sans); font-size:12px; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase;
  border-radius:999px;
  transition:transform .4s var(--ease), background .3s var(--ease), color .3s var(--ease);
  white-space:nowrap;
}
.btn-primary{background:var(--rouge); color:var(--warm-white); border:1px solid var(--rouge)}
.btn-primary:hover{background:var(--rouge-dark); transform:translateY(-2px)}
.btn-ghost{background:transparent; color:var(--espresso); border:1px solid var(--espresso)}
.btn-ghost:hover{background:var(--espresso); color:var(--warm-white); transform:translateY(-2px)}
.btn .arrow{transition:transform .4s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}

/* ─── Navigation ─────────────────────────────────────────────── */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  padding:22px var(--pad);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  transition:background .4s var(--ease), padding .4s var(--ease), border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  padding:14px var(--pad);
  border-bottom-color:var(--grey-line);
}
.brand{
  font-family:var(--serif); font-size:24px; font-weight:500;
  letter-spacing:.02em; color:var(--espresso); justify-self:start;
}
.brand small{
  display:block;
  font-family:var(--sans); font-size:9px; font-weight:500;
  letter-spacing:.4em; text-transform:uppercase;
  color:var(--bleu); margin-top:2px;
}
.nav-links{display:flex; gap:38px; justify-self:center}
.nav-links a{
  font-size:12px; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--espresso-soft);
  position:relative; padding:6px 0;
  transition:color .3s var(--ease);
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--rouge); transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease);
}
.nav-links a:hover, .nav-links a.active{color:var(--espresso)}
.nav-links a.active::after, .nav-links a:hover::after{transform:scaleX(1)}
.nav-cta{justify-self:end}

/* Mobile Burger */
.nav-burger{
  display:none; width:38px; height:38px;
  align-items:center; justify-content:center;
  color:var(--espresso); border:1px solid var(--grey-line); border-radius:50%;
}
.nav-burger span{display:block; width:14px; height:1px; background:currentColor; position:relative}
.nav-burger span::before, .nav-burger span::after{
  content:""; position:absolute; left:0; right:0; height:1px; background:currentColor;
}
.nav-burger span::before{top:-5px}
.nav-burger span::after{top:5px}
.nav-mobile{
  position:fixed; inset:0; z-index:60;
  background:var(--warm-white);
  padding:30px var(--pad);
  transform:translateY(-100%);
  transition:transform .5s var(--ease);
  display:flex; flex-direction:column;
}
.nav-mobile.open{transform:translateY(0)}
.nav-mobile-top{
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:60px;
}
.nav-mobile-close{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--grey-line);
  display:grid; place-items:center; font-size:18px;
}
.nav-mobile ul{list-style:none; padding:0; margin:0}
.nav-mobile li{border-bottom:1px solid var(--grey-line)}
.nav-mobile a{
  display:block; padding:20px 0;
  font-family:var(--serif); font-size:28px; color:var(--espresso);
}
.nav-mobile a.active{color:var(--bleu); font-style:italic}
.nav-mobile-foot{
  margin-top:auto; padding-top:30px;
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--espresso-soft);
}

@media (max-width:900px){
  .nav-links, .nav-cta{display:none}
  .nav{grid-template-columns:1fr auto}
  .nav-burger{display:flex}
  .brand{font-size:20px}
}

/* ─── Footer ─────────────────────────────────────────────────── */
footer{
  border-top:1px solid var(--grey-line);
  background:var(--warm-white);
  padding:80px var(--pad) 30px;
  position:relative;
}
footer::before{
  content:""; position:absolute; top:-1px; left:0; right:0; height:3px;
  background:linear-gradient(to right,
    var(--bleu) 0 33.33%,
    var(--warm-white) 33.33% 66.66%,
    var(--rouge) 66.66% 100%);
}
.f-grid{
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:60px;
  margin-bottom:60px;
}
.f-brand .brand{font-size:32px}
.f-brand p{margin-top:18px; font-size:14px; color:var(--espresso-soft); max-width:32ch}
.f-col h5{
  font-family:var(--sans); font-size:11px; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--espresso); margin:0 0 18px;
}
.f-col ul{list-style:none; margin:0; padding:0}
.f-col li{margin-bottom:8px; font-size:14px; color:var(--espresso-soft)}
.f-col a{transition:color .3s var(--ease)}
.f-col a:hover{color:var(--bleu)}
.f-bottom{
  max-width:var(--container); margin:0 auto;
  border-top:1px solid var(--grey-line); padding-top:24px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:18px;
  font-size:12px; color:var(--espresso-soft);
}
@media (max-width:900px){.f-grid{grid-template-columns:1fr 1fr; gap:36px}}

/* ─── Sektions-Header (für Unterseiten) ──────────────────────── */
.section-head{
  max-width:var(--container); margin:0 auto;
  padding:0 var(--pad);
  display:grid; grid-template-columns:1fr auto; gap:40px;
  align-items:end; margin-bottom:60px;
}
.section-head .eyebrow{margin-bottom:18px}
.section-num{
  font-family:var(--serif); font-style:italic;
  font-size:80px; color:var(--bleu); line-height:1; opacity:.35;
}
@media (max-width:700px){.section-num{font-size:50px}}

/* ─── Page Hero (für Unterseiten) ────────────────────────────── */
.page-hero{
  padding:160px var(--pad) 80px;
  max-width:var(--container); margin:0 auto;
  position:relative; z-index:3;
}
.page-hero .eyebrow{margin-bottom:32px}
.page-hero h1{
  font-size:clamp(56px, 10vw, 160px);
  margin-bottom:28px;
}
.page-hero .lead{
  font-size:19px; color:var(--espresso-soft);
  max-width:58ch; margin-bottom:30px;
}
.page-hero-grid{
  display:grid; grid-template-columns:1.2fr 1fr;
  gap:80px; align-items:end;
}
.page-hero-meta{
  font-size:11px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--espresso-soft);
}
.page-hero-meta strong{
  display:block; font-family:var(--serif); font-style:italic;
  font-size:24px; text-transform:none; letter-spacing:0;
  color:var(--espresso); font-weight:400; margin-bottom:6px;
}
@media (max-width:900px){.page-hero-grid{grid-template-columns:1fr; gap:30px}}

/* ─── Reveal on scroll ───────────────────────────────────────── */
.reveal{
  opacity:0; transform:translateY(28px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.in{opacity:1; transform:translateY(0)}

/* ─── A11y ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
}
::selection{background:var(--rouge); color:var(--warm-white)}

/* ─────────────────────────────────────────────────────────────
   PAGE TRANSITION — Page-Flip
   ───────────────────────────────────────────────────────────── */

/* Fallback Fade-Overlay für Browser ohne View Transitions API */
#pt-overlay{
  position:fixed; inset:0; z-index:9999;
  pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  perspective:1800px;
}
#pt-overlay .sheet{
  position:absolute; inset:0;
  background:var(--warm-white);
  transform-origin:left center;
  transform:rotateY(90deg);
  box-shadow:0 30px 80px -20px rgba(15,23,42,.25);
  opacity:0;
}
#pt-overlay .sheet::after{
  /* feine Seitenkante */
  content:""; position:absolute; top:0; bottom:0; right:0; width:1px;
  background:linear-gradient(to bottom, transparent, rgba(15,23,42,.08), transparent);
}
#pt-overlay .mark{
  position:relative; z-index:2;
  opacity:0;
  font-family:var(--serif); font-style:italic;
  font-size:clamp(40px, 7vw, 96px);
  color:var(--bleu); letter-spacing:-.01em;
  text-align:center;
}
#pt-overlay .mark small{
  display:block; margin-top:8px;
  font-family:var(--sans); font-style:normal;
  font-size:11px; font-weight:500; letter-spacing:.32em;
  text-transform:uppercase; color:var(--rouge);
}

/* Aktive Flip-Animation */
body.pt-flipping #pt-overlay{pointer-events:auto}
body.pt-flipping #pt-overlay .sheet{
  animation:sheetFlip .7s var(--ease) forwards;
}
body.pt-flipping #pt-overlay .mark{
  animation:markFlash .7s var(--ease) forwards;
}
@keyframes sheetFlip{
  0%  {transform:rotateY(90deg); opacity:0}
  35% {transform:rotateY(0deg);  opacity:1}
  65% {transform:rotateY(0deg);  opacity:1}
  100%{transform:rotateY(-90deg); opacity:0; transform-origin:right center}
}
@keyframes markFlash{
  0%, 25%   {opacity:0}
  40%, 60%  {opacity:1}
  80%, 100% {opacity:0}
}

/* Body fade out beim Wegnavigieren */
body.pt-leaving main, body.pt-leaving footer{
  opacity:0; transform:translateY(-8px);
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
/* Body fade in beim Eintreten */
body.pt-entering main, body.pt-entering footer{
  opacity:0; transform:translateY(8px);
}
body main, body footer{
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}

/* View Transitions API support (Chrome/Edge/Safari neu) */
@supports (view-transition-name: root){
  ::view-transition-old(root){
    animation:vtOut .45s var(--ease) forwards;
  }
  ::view-transition-new(root){
    animation:vtIn .55s var(--ease) .15s both;
  }
  @keyframes vtOut{
    to{opacity:0; transform:translateY(-12px) scale(.995)}
  }
  @keyframes vtIn{
    from{opacity:0; transform:translateY(12px) scale(1.005)}
    to{opacity:1; transform:none}
  }
}