@charset "utf-8";
/* ============================================================
   Moises & Rebecca Graniel — weddings.moisesgraniel.com
   Design system: "Firn"
   Plates on ink, reading on paper. Brass only as a hairline.
   ============================================================ */

/* ---------- 1. FONTS (self-hosted, OFL) ---------- */
@font-face{
  font-family:"Fraunces";
  src:url("assets/fonts/fraunces-var.woff2") format("woff2-variations");
  font-weight:100 900; font-stretch:normal; font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Archivo";
  src:url("assets/fonts/archivo-var.woff2") format("woff2-variations");
  font-weight:100 900; font-stretch:62% 125%; font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ---------- 2. TOKENS ---------- */
:root{
  /* colour */
  --ink:#12161A;
  --ink-2:#191F25;
  --ink-3:#232B32;
  --paper:#F2F0EC;
  --paper-2:#E5E2DB;
  --paper-3:#D6D2C9;
  --snow:#FFFFFF;
  --frost:#9DAAB4;
  --stone:#59616A;
  --brass:#B08D3F;
  --brass-soft:#C7A75E;
  --brass-ink:#7E611C;   /* darker brass: small text on paper, AA */

  /* per-surface, overridden by .sec--ink / .sec--paper */
  --bg:var(--paper);
  --fg:#171B1F;
  --fg-mute:var(--stone);
  --rule:var(--paper-2);

  /* type */
  --ff-d:"Fraunces",Georgia,"Times New Roman",serif;
  --ff-b:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  /* metrics */
  --rail:76px;
  --gut:clamp(20px,4.4vw,72px);
  --maxw:1360px;
  --pad-y:clamp(88px,10.5vw,164px);
  --r:2px;

  --ease:cubic-bezier(.22,.68,.16,1);
  --dur:.72s;
}

/* ---------- 3. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ol,ul,fieldset,legend{margin:0;padding:0}
ol,ul{list-style:none}
img,picture,svg,video{display:block;max-width:100%}
img{height:auto}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:inherit}
abbr[title]{text-decoration:none;border:0}
address{font-style:normal}
summary::-webkit-details-marker{display:none}

html{scroll-behavior:smooth;scroll-padding-top:96px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  font-family:var(--ff-b);
  font-variation-settings:"wght" 380,"wdth" 100;
  font-size:clamp(1rem,.96rem + .18vw,1.0938rem);
  line-height:1.62;
  color:var(--fg);
  background:var(--ink);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
@media (min-width:1100px){ body{padding-left:var(--rail)} }

::selection{background:var(--brass);color:var(--snow)}

.u-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip{
  position:fixed;top:8px;left:8px;z-index:400;
  transform:translateY(-160%);
  background:var(--snow);color:var(--ink);
  padding:.7em 1.2em;font-size:.82rem;font-variation-settings:"wght" 560;
  border-radius:var(--r);
}
.skip:focus{transform:none}

:where(a,button,summary,input,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--brass-soft);
  outline-offset:3px;
  border-radius:1px;
}

/* ---------- 4. TYPE PRIMITIVES ---------- */
.h2{
  font-family:var(--ff-d);
  font-variation-settings:"opsz" 110,"wght" 360,"SOFT" 24,"WONK" 1;
  font-size:clamp(2.05rem,1.2rem + 3.7vw,4.05rem);
  line-height:1.03;
  letter-spacing:-.018em;
  text-wrap:balance;
}
.h3{
  font-family:var(--ff-d);
  font-variation-settings:"opsz" 42,"wght" 420,"SOFT" 20,"WONK" 0;
  font-size:clamp(1.24rem,1.06rem + .72vw,1.62rem);
  line-height:1.2;
  letter-spacing:-.008em;
}
.eyebrow{
  font-size:.6875rem;
  font-variation-settings:"wght" 580,"wdth" 92;
  letter-spacing:.17em;
  text-transform:uppercase;
  color:var(--fg-mute);
  display:flex;align-items:baseline;gap:.85em;
}
.idx{
  color:var(--brass-ink);
  font-variant-numeric:tabular-nums;
  letter-spacing:.06em;
}
.idx::after{
  content:"";display:inline-block;width:26px;height:1px;
  background:var(--brass);vertical-align:.32em;margin-left:.85em;opacity:.55;
}
.lead{
  font-size:clamp(1.04rem,.98rem + .42vw,1.28rem);
  line-height:1.55;
  color:var(--fg-mute);
  max-width:46ch;
  text-wrap:pretty;
}

/* ---------- 5. BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-height:50px;padding:.9em 1.6em;
  font-size:.78rem;font-variation-settings:"wght" 600,"wdth" 96;
  letter-spacing:.13em;text-transform:uppercase;text-decoration:none;
  border-radius:var(--r);
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.btn--solid{background:var(--snow);color:var(--ink);border:1px solid var(--snow)}
.btn--solid:hover{background:var(--brass);border-color:var(--brass);color:var(--snow)}
.sec--paper .btn--solid,.split__body .btn--solid{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.sec--paper .btn--solid:hover,.split__body .btn--solid:hover{background:var(--brass);border-color:var(--brass);color:var(--snow)}
.btn--ghost{border:1px solid rgba(255,255,255,.34);color:var(--snow)}
.btn--ghost:hover{border-color:var(--snow);background:rgba(255,255,255,.08)}
.btn--line{border:1px solid currentColor;min-height:42px;padding:.6em 1.15em;font-size:.7rem}
.btn--line:hover{background:var(--snow);color:var(--ink);border-color:var(--snow)}
.btn--full{width:100%}

.lnk{
  display:inline-flex;align-items:center;gap:.55em;
  font-size:.74rem;font-variation-settings:"wght" 600,"wdth" 96;
  letter-spacing:.13em;text-transform:uppercase;text-decoration:none;
  padding-bottom:.35em;border-bottom:1px solid var(--brass);
  transition:gap .3s var(--ease),color .3s var(--ease);
}
.lnk::after{content:"→";font-size:1.05em;line-height:1}
.lnk:hover{gap:.95em;color:var(--brass-ink)}
.sec--ink .lnk:hover,.hero .lnk:hover{color:var(--brass-soft)}

/* ---------- 6. RAIL (signature) ---------- */
.rail{display:none}
@media (min-width:1100px){
  .rail{
    display:flex;flex-direction:column;align-items:center;justify-content:space-between;
    position:fixed;inset:0 auto 0 0;width:var(--rail);z-index:120;
    padding:26px 0 22px;
    background:var(--ink);
    border-right:1px solid rgba(255,255,255,.09);
    pointer-events:none;
  }
  .rail__mark{
    margin-top:74px;
    display:flex;flex-direction:column;align-items:center;gap:18px;
  }
  .rail__idx{
    font-size:.72rem;font-variation-settings:"wght" 560,"wdth" 84;
    letter-spacing:.12em;color:var(--brass);font-variant-numeric:tabular-nums;
  }
  .rail__name{
    writing-mode:vertical-rl;
    font-size:.66rem;font-variation-settings:"wght" 520,"wdth" 88;
    letter-spacing:.26em;text-transform:uppercase;color:var(--frost);
    white-space:nowrap;
    transition:opacity .35s var(--ease);
  }
  .rail__track{
    flex:1;width:1px;margin:26px 0;
    background:rgba(255,255,255,.13);position:relative;
  }
  .rail__fill{
    position:absolute;inset:0 0 auto 0;height:0;
    background:var(--brass);
    transform-origin:top;
  }
  .rail__foot{
    font-family:var(--ff-d);
    font-variation-settings:"opsz" 18,"wght" 500;
    font-size:.8rem;letter-spacing:.14em;color:rgba(255,255,255,.52);
  }
}

/* ---------- 7. HEADER ---------- */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:150;
  display:flex;align-items:center;gap:clamp(16px,3vw,48px);
  padding:18px var(--gut);
  color:var(--snow);
  transition:background .4s var(--ease),padding .4s var(--ease),border-color .4s var(--ease);
  border-bottom:1px solid transparent;
}
/* Der Verlauf trägt die Kopfzeile über dem Bild. In Version A war er zu
   kurz: über dem hellen Himmel im Hero standen Navigation und Sprach-
   umschalter praktisch ohne Kontrast. Jetzt dunkler und mit längerem
   Auslauf über die Kopfzeile hinaus, damit die Kante unsichtbar bleibt. */
.hdr::before{
  content:"";position:absolute;left:0;right:0;top:0;bottom:-46px;z-index:-1;
  background:linear-gradient(to bottom,
    rgba(10,13,16,.90) 0%,
    rgba(10,13,16,.78) 40%,
    rgba(10,13,16,.42) 70%,
    rgba(10,13,16,.14) 88%,
    rgba(10,13,16,0) 100%);
  transition:opacity .4s var(--ease);
}
.hdr.is-stuck{background:var(--ink);border-bottom-color:rgba(255,255,255,.1);padding-block:12px}
.hdr.is-stuck::before{opacity:0}
@media (min-width:1100px){ .hdr{left:var(--rail)} }

.brand{display:flex;align-items:center;gap:13px;text-decoration:none;flex:0 0 auto}
.brand__lion,.brand__word,.ftr__lion{
  display:block;background:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}
.brand__lion{
  width:21px;aspect-ratio:503/516;
  -webkit-mask-image:url("assets/icons/logo-lion.svg");mask-image:url("assets/icons/logo-lion.svg");
}
.brand__word{
  width:clamp(112px,15vw,156px);aspect-ratio:887/74;
  -webkit-mask-image:url("assets/icons/logo-wordmark.svg");mask-image:url("assets/icons/logo-wordmark.svg");
}

/* Wortmarke als Satz statt als SVG. Der Grund: die Firma sind zwei
   Menschen, und „Moises & Rebecca" passt einzeilig nicht neben die
   Navigation. Zwei Zeilen, die zweite auf die Breite der ersten
   gesperrt, ergeben ein ruhiges Lockup in Kopfzeilenbreite. */
.brand__lock{
  display:grid;gap:.18em;line-height:1;
  font-family:var(--ff-d);
  text-transform:uppercase;
  white-space:nowrap;
}
.brand__pair{
  font-variation-settings:"opsz" 40,"wght" 340,"SOFT" 0,"WONK" 0;
  font-size:clamp(.72rem,.66rem + .28vw,.86rem);
  letter-spacing:.14em;
}
.brand__sur{
  font-variation-settings:"opsz" 40,"wght" 420,"SOFT" 0,"WONK" 0;
  font-size:clamp(.6rem,.55rem + .22vw,.7rem);
  letter-spacing:.52em;
  text-indent:.52em;          /* letzte Sperrung optisch ausgleichen */
  text-align:center;
  color:var(--brass-soft);
}
.hdr.is-stuck .brand__sur{color:var(--brass-soft)}

.nav{margin-left:auto}
.nav__list{display:none}
@media (min-width:1080px){
  .nav__list{display:flex;gap:clamp(16px,2.1vw,36px)}
  .nav__list a{
    text-decoration:none;
    font-size:.735rem;font-variation-settings:"wght" 520,"wdth" 96;
    letter-spacing:.13em;text-transform:uppercase;
    padding:.45em 0;position:relative;display:block;white-space:nowrap;
    color:rgba(255,255,255,.86);
    transition:color .3s var(--ease);
  }
  .nav__list a::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
    background:var(--brass);transform:scaleX(0);transform-origin:left;
    transition:transform .38s var(--ease);
  }
  .nav__list a:hover,.nav__list a.is-active{color:var(--snow)}
  .nav__list a:hover::after,.nav__list a.is-active::after{transform:scaleX(1)}
}
.hdr__cta{display:none}
@media (min-width:1080px){ .hdr__cta{display:inline-flex;flex:0 0 auto} .nav{margin-left:auto} }

/* Sprachumschalter: zwei Wörter, eine Haarlinie dazwischen.
   Auf Mobil steckt er im Menü (.lang--m), damit die Kopfzeile ruhig bleibt. */
.lang{display:none;align-items:center;flex:0 0 auto;
  font-size:.685rem;font-variation-settings:"wght" 580,"wdth" 92;
  letter-spacing:.15em;text-transform:uppercase}
@media (min-width:1080px){ .lang{display:flex} }
.lang>*{position:relative;color:rgba(255,255,255,.82);text-decoration:none;
  padding-bottom:.45em;transition:color .3s var(--ease)}
.lang>*+*{margin-left:9px;padding-left:10px;border-left:1px solid rgba(255,255,255,.22)}
.lang a:hover{color:var(--snow)}
/* aktive Sprache wie der aktive Navigationspunkt: weiß mit Messing-Haarlinie.
   Messing als Textfarbe wäre über dem hellen Himmel im Hero nicht lesbar. */
.lang [aria-current]{color:var(--snow)}
.lang [aria-current]::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--brass);
}
.lang>*+*[aria-current]::after{left:10px}
.lang--m{display:flex;font-size:.78rem;letter-spacing:.12em;
  padding-bottom:18px;border-bottom:1px solid rgba(255,255,255,.1)}
.lang--m>*{color:var(--frost);padding-bottom:0}
.lang--m a:hover{color:var(--snow)}
.lang--m [aria-current]{color:var(--snow)}
.lang--m [aria-current]::after{display:none}

.burger{
  margin-left:auto;display:flex;align-items:center;gap:.7em;
  min-height:44px;padding:0 2px;color:var(--snow);
  font-size:.7rem;font-variation-settings:"wght" 560,"wdth" 92;
  letter-spacing:.15em;text-transform:uppercase;
}
.burger__box{display:block;width:24px}
.burger__box i{display:block;height:1.5px;background:currentColor;transition:transform .38s var(--ease),opacity .3s var(--ease)}
.burger__box i:first-child{margin-bottom:6px}
.burger[aria-expanded="true"] .burger__box i:first-child{transform:translateY(3.75px) rotate(45deg)}
.burger[aria-expanded="true"] .burger__box i:last-child{transform:translateY(-3.75px) rotate(-45deg)}
@media (min-width:1080px){ .burger{display:none} }

/* ---------- 8. MOBILE MENU ---------- */
.menu{
  position:fixed;inset:0;z-index:140;
  background:var(--ink);color:var(--snow);
  padding:104px var(--gut) 36px;
  display:flex;flex-direction:column;justify-content:space-between;gap:32px;
  overflow-y:auto;overscroll-behavior:contain;
}
.menu[hidden]{display:none}
.menu__list li+li{border-top:1px solid rgba(255,255,255,.1)}
/* Neun Punkte statt acht. In Version A war die Liste schon so lang, dass
   Sprachumschalter und Knopf unter die Falte rutschten. Gestaucht werden
   die Zeilenhöhen, nicht die Trefferflächen: 44 px bleiben überall. */
.menu__list a{
  display:flex;align-items:center;gap:1.1em;
  padding:.5em 0;min-height:44px;text-decoration:none;
  font-family:var(--ff-d);
  font-variation-settings:"opsz" 48,"wght" 380,"SOFT" 22;
  font-size:clamp(1.32rem,5.6vw,1.78rem);line-height:1.15;
}
@media (max-height:740px){
  .menu{padding-top:76px;padding-bottom:26px;gap:18px}
  .menu__list a{font-size:clamp(1.14rem,4.8vw,1.44rem);padding:.34em 0}
  .menu__foot{gap:14px}
}
.menu__list span{
  font-family:var(--ff-b);font-size:.66rem;color:var(--brass);
  font-variation-settings:"wght" 560,"wdth" 84;letter-spacing:.1em;
}
.menu__foot{display:flex;flex-direction:column;gap:20px}
.menu__foot p{font-size:.9rem;color:var(--frost);line-height:1.8}
.menu__foot a{text-decoration:none}
.menu__foot p a:hover{color:var(--brass-soft)}

/* ---------- 9. SECTION SHELL ---------- */
.sec{
  padding-block:var(--pad-y);
  padding-inline:var(--gut);
  background:var(--bg);color:var(--fg);
  position:relative;
}
.sec--ink{
  --bg:var(--ink);--fg:#EDEFF1;--fg-mute:var(--frost);--rule:rgba(255,255,255,.13);
}
.sec--ink .idx,.hero .idx{color:var(--brass)}
.sec--paper{
  --bg:var(--paper);--fg:#171B1F;--fg-mute:var(--stone);--rule:var(--paper-2);
}
.sec--tight{padding-block:clamp(64px,7vw,104px)}

.sec__head{
  max-width:var(--maxw);margin-inline:auto;
  margin-bottom:clamp(40px,5.4vw,80px);
  display:grid;gap:20px;
}
.sec__head .lead{margin-top:2px}
@media (min-width:900px){
  .sec__head{
    grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
    align-items:end;column-gap:clamp(32px,5vw,90px);
  }
  .sec__head .eyebrow{grid-column:1/-1}
  .sec__head .lead{padding-bottom:.45em}
}

/* ---------- 10. HERO ---------- */
.hero{
  display:grid;background:var(--ink);color:#EDEFF1;
  --fg:#EDEFF1;--fg-mute:var(--frost);--rule:rgba(255,255,255,.14);
  min-height:100svh;position:relative;
}
.hero__type{
  display:flex;flex-direction:column;justify-content:flex-end;
  gap:clamp(20px,2.6vw,32px);
  padding:clamp(94px,12vh,146px) var(--gut) clamp(38px,5.6vh,70px);
  order:2;
}
.hero__plate{order:1;position:relative;overflow:hidden;background:var(--ink-2)}
.hero__plate picture{display:block;height:100%}
.hero__plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 34%}
.hero__plate::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(18,22,26,.4) 0,rgba(18,22,26,0) 34%);
  pointer-events:none;
}
@media (max-width:900px){
  /* el recorte del móvil es exactamente 4:5, así no se corta nada;
     el tope evita que la foto se coma toda la pantalla en tablets */
  .hero__plate{aspect-ratio:4/5;height:auto;max-height:62svh}
  .hero__plate img{object-position:center 26%}
}
@media (min-width:901px){
  .hero{grid-template-columns:minmax(0,43fr) minmax(0,57fr)}
  .hero__type{order:1;padding-right:clamp(32px,4vw,64px)}
  .hero__plate{order:2}
  .hero__plate::after{background:linear-gradient(to right,rgba(18,22,26,.5) 0,rgba(18,22,26,0) 22%)}
}

.hero__h1{
  font-family:var(--ff-d);
  font-variation-settings:"opsz" 144,"wght" 330,"SOFT" 30,"WONK" 1;
  font-size:clamp(2.3rem,1.1rem + 4.1vw,4.15rem);
  line-height:1.0;
  letter-spacing:-.026em;
  text-wrap:balance;
}
.hero__h1 em{
  font-style:normal;display:block;
  color:var(--frost);
  font-variation-settings:"opsz" 144,"wght" 300,"SOFT" 60,"WONK" 1;
}
.hero__sub{color:var(--frost);max-width:40ch;font-size:clamp(1rem,.94rem + .4vw,1.19rem);line-height:1.56}
.hero__cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px}
.lnk--hero{color:#E6EAED;border-bottom-color:rgba(176,141,63,.9)}
.lnk--hero:hover{color:var(--brass-soft)}
.facts{
  display:flex;flex-wrap:wrap;gap:.55em 1.2em;
  padding-top:clamp(14px,2.4vh,26px);
  border-top:1px solid rgba(255,255,255,.14);
  font-size:.685rem;font-variation-settings:"wght" 520,"wdth" 90;
  letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.56);
}
.facts li{display:flex;align-items:center;gap:1.2em}
.facts li:not(:last-child)::after{content:"";width:3px;height:3px;border-radius:50%;background:var(--brass);flex:0 0 auto}

/* ---------- 11. MOSAIC ---------- */
.mosaic{
  max-width:var(--maxw);margin-inline:auto;
  display:grid;gap:clamp(10px,1.1vw,18px);
  grid-template-columns:1fr;align-items:stretch;
}
.m{overflow:hidden;background:var(--ink-2);aspect-ratio:4/5}
.m--w2{aspect-ratio:3/2}
.m--w3{aspect-ratio:16/9}
@media (min-width:620px){
  .mosaic{grid-template-columns:repeat(2,1fr)}
  .m--w2,.m--w3{grid-column:span 2;aspect-ratio:16/9}
}
@media (min-width:960px){
  .mosaic{grid-template-columns:repeat(6,1fr)}
  .m{grid-column:span 2;aspect-ratio:4/5}
  .m--w2{grid-column:span 4;aspect-ratio:16/10}
  .m--w3{grid-column:span 6;aspect-ratio:21/9}
}
.m__btn{display:block;width:100%;height:100%;position:relative;padding:0;cursor:zoom-in}
.m__btn img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.m__zoom{
  position:absolute;right:12px;bottom:12px;width:32px;height:32px;
  border:1px solid rgba(255,255,255,.55);border-radius:50%;
  opacity:0;transform:scale(.85);transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.m__zoom::before,.m__zoom::after{
  content:"";position:absolute;background:var(--snow);left:50%;top:50%;transform:translate(-50%,-50%);
}
.m__zoom::before{width:11px;height:1px}
.m__zoom::after{width:1px;height:11px}
.m__btn:hover img{transform:scale(1.035)}
.m__btn:hover .m__zoom,.m__btn:focus-visible .m__zoom{opacity:1;transform:scale(1)}

/* ---------- 12. DUO (Foto & Film) ---------- */
.duo{max-width:var(--maxw);margin-inline:auto;display:grid;gap:clamp(28px,4vw,64px)}
@media (min-width:900px){
  .duo{grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);align-items:start;column-gap:clamp(36px,4.6vw,84px)}
  .duo__sticky{position:sticky;top:clamp(100px,16vh,168px)}
}
.duo__frame{position:relative;aspect-ratio:5/4;overflow:hidden;background:var(--paper-2)}
.duo__frame img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .8s var(--ease);
}
.duo__frame img.is-on{opacity:1}
html:not(.js) .duo__frame img{opacity:1}
html:not(.js) .duo__frame img+img{display:none}

.duo__caps{display:grid;gap:0;margin-top:0;border-top:1px solid var(--rule)}
.cap{
  display:grid;grid-template-columns:66px 1fr;align-items:baseline;gap:14px;
  padding:.85em 0;border-bottom:1px solid var(--rule);
}
.cap__k{
  font-size:.66rem;font-variation-settings:"wght" 620,"wdth" 86;
  letter-spacing:.2em;text-transform:uppercase;color:var(--brass-ink);
}
.cap__v{
  font-family:var(--ff-d);
  font-variation-settings:"opsz" 30,"wght" 400,"SOFT" 26;
  font-size:clamp(1rem,.95rem + .3vw,1.16rem);line-height:1.25;
  transition:opacity .35s var(--ease);
}
.cap__v.is-swap{opacity:0}

.duo__flow{display:grid;gap:clamp(38px,7vw,96px)}
@media (min-width:900px){
  .duo__flow{gap:0;padding-block:0}
  .duo__step{min-height:62vh;align-content:center}
}
.duo__step{display:grid;gap:14px;max-width:44ch;transition:opacity .5s var(--ease)}
@media (min-width:900px){
  .duo__step{opacity:.34}
  .duo__step.is-on{opacity:1}
  html:not(.js) .duo__step{opacity:1}
}
.duo__step p{color:var(--fg-mute);text-wrap:pretty}
.duo__close{
  max-width:44ch;
  padding-top:clamp(24px,3vw,38px);
  border-top:1px solid var(--rule);
  font-family:var(--ff-d);
  font-variation-settings:"opsz" 40,"wght" 350,"SOFT" 30,"WONK" 1;
  font-size:clamp(1.16rem,1.02rem + .62vw,1.55rem);
  line-height:1.28;letter-spacing:-.008em;
  color:var(--fg);text-wrap:balance;
}
@media (min-width:900px){ .duo__close{margin-top:-14vh;padding-bottom:8vh} }

/* ---------- 12b. FILM ---------- */
.film{padding-block:clamp(76px,8.5vw,132px)}
.film__head{margin-bottom:clamp(30px,4vw,54px)}
.film__head .h2 em{
  font-style:normal;color:var(--frost);
  font-variation-settings:"opsz" 110,"wght" 300,"SOFT" 30,"WONK" 1;
}
.reel{max-width:var(--maxw);margin-inline:auto}
/* Auf dem Telefon läuft der Film von Kante zu Kante. Ein 16:9-Feld
   innerhalb der Ränder wäre dort nur ein Briefmarkenformat. */
@media (max-width:619px){
  .reel{margin-inline:calc(var(--gut) * -1)}
  .reel__cap{padding-inline:var(--gut)}
  .reel__ph{border-left:0;border-right:0}
}
.reel__media,.reel__ph{
  display:block;width:100%;aspect-ratio:16/9;
  border:0;background:var(--ink-2);
}
.reel__media{object-fit:cover}
/* Platzhalter: soll erkennbar ein Platzhalter sein, nicht ein Fehler.
   Haarlinie gestrichelt, kein Play-Symbol, damit niemand darauf klickt. */
.reel__ph{
  display:grid;place-content:center;justify-items:center;gap:14px;
  text-align:center;padding:24px;
  border:1px dashed rgba(255,255,255,.26);
  background:
    linear-gradient(rgba(18,22,26,.55),rgba(18,22,26,.55)),
    repeating-linear-gradient(-45deg,transparent 0 14px,rgba(255,255,255,.028) 14px 28px);
}
.reel__phk{
  font-size:clamp(.68rem,.62rem + .3vw,.8rem);
  font-variation-settings:"wght" 560,"wdth" 94;
  letter-spacing:.22em;text-transform:uppercase;color:var(--brass-soft);
}
.reel__pht{
  font-size:clamp(.86rem,.82rem + .2vw,.98rem);
  line-height:1.6;color:var(--frost);
}
.reel__cap{
  margin-top:clamp(16px,2vw,24px);
  font-family:var(--ff-d);
  font-variation-settings:"opsz" 40,"wght" 340,"SOFT" 30,"WONK" 1;
  font-size:clamp(1.05rem,.98rem + .4vw,1.32rem);
  line-height:1.35;color:#E4E7EA;
}
.reel__cap::before{
  content:"";display:block;width:34px;height:1px;background:var(--brass);
  margin-bottom:clamp(14px,1.8vw,20px);
}

/* ---------- 13. WAS BLEIBT ---------- */
.bleibt{padding-inline:0;padding-block:0;display:grid}
.bleibt__plate{position:relative;overflow:hidden;background:var(--ink-2)}
.bleibt__plate img{width:100%;height:100%;object-fit:cover;object-position:center 42%}
.bleibt__plate::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(18,22,26,.75),rgba(18,22,26,0) 55%);
}
.bleibt__body{
  padding:clamp(52px,7vw,96px) var(--gut) clamp(64px,8vw,112px);
  display:grid;gap:clamp(20px,2.6vw,30px);align-content:center;
  max-width:none;
}
@media (max-width:899px){ .bleibt__plate{height:min(52svh,460px)} }
@media (min-width:900px){
  .bleibt{grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);align-items:stretch}
  .bleibt__plate::after{background:linear-gradient(to right,rgba(18,22,26,0) 55%,rgba(18,22,26,.6))}
  .bleibt__body{padding-block:clamp(84px,9vw,150px);padding-right:clamp(40px,6vw,110px)}
}
.beats{display:grid;gap:0;border-top:1px solid var(--rule)}
.beats li{
  padding:.82em 0 .82em 30px;position:relative;
  border-bottom:1px solid var(--rule);
  font-family:var(--ff-d);
  font-variation-settings:"opsz" 30,"wght" 360,"SOFT" 28;
  font-size:clamp(1.02rem,.96rem + .34vw,1.2rem);line-height:1.3;
  color:#E4E7EA;
}
.beats li::before{
  content:"";position:absolute;left:0;top:1.28em;width:16px;height:1px;background:var(--brass);
}
.bleibt__close{color:var(--fg-mute);max-width:48ch;text-wrap:pretty}
.bleibt .btn{justify-self:start}

/* ---------- 14. BREATH PLATE ---------- */
.breath{background:var(--ink);overflow:hidden}
.breath img{width:100%;height:clamp(180px,26vw,340px);object-fit:cover;object-position:center 55%;opacity:.9}

/* ---------- 15. VOICES ---------- */
.voices{
  max-width:var(--maxw);margin-inline:auto;
  display:grid;gap:clamp(26px,3.4vw,52px);
}
@media (min-width:820px){
  .voices{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .v--lead{grid-column:1/-1}
}
.v{
  border-top:2px solid var(--fg);
  padding-top:clamp(20px,2.4vw,30px);
  display:grid;gap:14px;
}
.v__pull{
  font-family:var(--ff-d);
  font-variation-settings:"opsz" 60,"wght" 370,"SOFT" 26,"WONK" 1;
  font-size:clamp(1.28rem,1.05rem + 1vw,1.86rem);
  line-height:1.2;letter-spacing:-.012em;text-wrap:pretty;
}
.v--lead .v__pull{font-size:clamp(1.55rem,1.1rem + 2.1vw,2.9rem);max-width:22ch}
.v--lead{display:grid;gap:18px}
@media (min-width:820px){
  .v--lead{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:clamp(32px,5vw,80px);align-items:start}
  .v--lead .v__pull{grid-row:span 2}
  .v--lead .v__by{align-self:start}
}
.v__body{color:var(--fg-mute);font-size:.97rem;line-height:1.66;text-wrap:pretty}
.v__by{
  font-size:.72rem;font-variation-settings:"wght" 600,"wdth" 94;
  letter-spacing:.14em;text-transform:uppercase;
  display:flex;flex-wrap:wrap;gap:.9em;align-items:center;
}
.v__by span{color:var(--brass-ink);font-variation-settings:"wght" 560,"wdth" 88}
.v__by span::before{content:"· "}
/* Herkunftsvermerk. Die Stimme steht in der Sprache der Seite, damit
   der Lesefluss nicht bricht. Woher sie ursprünglich kam, gehört
   trotzdem dazu, klein und ohne Gewicht. */
.v__orig{
  margin-top:-4px;
  font-size:.72rem;font-variation-settings:"wght" 420,"wdth" 96;
  letter-spacing:.05em;color:var(--fg-mute);opacity:.72;
}
/* Nur auf der englischen Seite: die Rechtstexte liegen bis auf Weiteres
   nur auf Deutsch vor. Das gehört hingeschrieben statt verschwiegen. */
.ftr__legalnote{
  flex-basis:100%;
  font-size:.74rem;color:var(--frost);opacity:.7;
}
.v__img{overflow:hidden;background:var(--paper-2)}
.v__img img{width:100%;aspect-ratio:4/3;object-fit:cover}
@media (min-width:820px){ .v__img{align-self:stretch} .v__img img{height:100%;aspect-ratio:auto;min-height:320px} }

/* ---------- 16. TIERS ---------- */
.tier--hero{
  max-width:var(--maxw);margin-inline:auto;
  display:grid;gap:0;background:var(--snow);
  border-top:2px solid var(--fg);
  margin-bottom:clamp(14px,1.4vw,22px);
}
@media (min-width:900px){
  .tier--hero{grid-template-columns:minmax(0,.78fr) minmax(0,1fr);align-items:stretch}
}
.tier__img{overflow:hidden;background:var(--paper-2)}
.tier__img img{width:100%;height:100%;object-fit:cover;min-height:260px}
.tier__body{padding:clamp(28px,3.4vw,54px);display:grid;gap:14px;align-content:center}
.tier__tag{
  font-size:.67rem;font-variation-settings:"wght" 620,"wdth" 88;
  letter-spacing:.19em;text-transform:uppercase;color:var(--brass-ink);
}
.tier__name{
  font-family:var(--ff-d);
  font-variation-settings:"opsz" 60,"wght" 400,"SOFT" 24,"WONK" 1;
  font-size:clamp(1.55rem,1.2rem + 1.5vw,2.5rem);line-height:1.05;letter-spacing:-.016em;
}
.tier__price{
  font-family:var(--ff-d);
  font-variation-settings:"opsz" 40,"wght" 340,"SOFT" 20;
  font-size:clamp(1.4rem,1.15rem + 1vw,2rem);
  line-height:1;font-variant-numeric:tabular-nums;
}
.tier__price span{font-size:.62em;color:var(--fg-mute);margin-left:.15em}
.tier__for{font-size:.95rem;color:var(--fg)}
.tier__for strong{font-variation-settings:"wght" 620}
.tier__txt{color:var(--fg-mute);font-size:.95rem;line-height:1.66;text-wrap:pretty}
.tier--hero .btn{justify-self:start;margin-top:6px}

.tiers{
  max-width:var(--maxw);margin-inline:auto;
  display:grid;gap:clamp(14px,1.4vw,22px);
}
@media (min-width:700px){ .tiers{grid-template-columns:repeat(3,minmax(0,1fr))} }
.tier--sm{
  background:var(--snow);border-top:1px solid var(--fg);
  padding:clamp(22px,2.4vw,34px);
  display:grid;gap:11px;align-content:start;
}
.tier--sm .tier__name{font-size:clamp(1.22rem,1.08rem + .55vw,1.5rem)}
/* Zweizeiliger Paketname: die Zusatzzeile trägt die Erklärung, ohne
   die Preistreppe optisch zu stören. */
.tier__name2{
  display:block;margin-top:.18em;
  font-family:var(--ff-b);
  font-size:.5em;font-variation-settings:"wght" 500,"wdth" 96;
  letter-spacing:.13em;text-transform:uppercase;
  color:var(--fg-mute);
}
.tier--sm .tier__price{font-size:clamp(1.18rem,1.05rem + .5vw,1.45rem)}
.tier--sm .lnk{justify-self:start;margin-top:8px}

.incl{
  max-width:var(--maxw);margin-inline:auto;
  margin-top:clamp(34px,4vw,64px);
  display:grid;gap:clamp(26px,3vw,56px);
  padding-top:clamp(26px,3vw,44px);border-top:1px solid var(--paper-3);
}
@media (min-width:760px){ .incl{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)} }
.incl__col{display:grid;gap:14px;align-content:start}
.incl__list{display:grid;gap:0}
.incl__list li{
  padding:.7em 0 .7em 28px;position:relative;
  border-bottom:1px solid var(--paper-2);
  font-size:.94rem;line-height:1.55;color:var(--fg-mute);
}
.incl__list li::before{content:"";position:absolute;left:0;top:1.22em;width:14px;height:1px;background:var(--brass)}
.incl__note{font-size:.83rem;color:var(--fg-mute);opacity:.85;max-width:44ch;margin-top:4px}

/* ---------- 17. STEPS ---------- */
.steps{
  max-width:var(--maxw);margin-inline:auto;
  display:grid;gap:0;position:relative;
}
.steps::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--rule);
}
.step{
  position:relative;padding:clamp(22px,2.6vw,32px) 0 clamp(22px,2.6vw,32px) clamp(46px,5vw,78px);
  border-bottom:1px solid var(--rule);
  display:grid;gap:8px;
}
.step:first-child{border-top:1px solid var(--rule)}
.step__n{
  position:absolute;left:0;top:clamp(22px,2.6vw,32px);
  width:clamp(30px,3.4vw,44px);
  font-family:var(--ff-d);
  font-variation-settings:"opsz" 40,"wght" 330,"SOFT" 20;
  font-size:clamp(1.15rem,1rem + .7vw,1.6rem);line-height:1.05;
  color:var(--brass);font-variant-numeric:tabular-nums;
  transition:color .4s var(--ease);
}
.step__t{
  font-family:var(--ff-d);
  font-variation-settings:"opsz" 44,"wght" 400,"SOFT" 22;
  font-size:clamp(1.18rem,1.05rem + .6vw,1.55rem);line-height:1.15;letter-spacing:-.01em;
}
.step p{color:var(--fg-mute);max-width:56ch;font-size:.97rem;text-wrap:pretty}
@media (min-width:820px){
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(40px,6vw,110px)}
  .steps::before{display:none}
  .step:nth-child(2){border-top:1px solid var(--rule)}
}
.steps.is-lit .step__n{color:var(--brass-soft)}

/* ---------- 18. ABOUT ---------- */
.about{max-width:var(--maxw);margin-inline:auto;display:grid;gap:clamp(28px,4vw,68px)}
@media (min-width:900px){
  .about{grid-template-columns:minmax(0,.72fr) minmax(0,1fr);align-items:start;column-gap:clamp(40px,6vw,100px)}
  .about__img{position:sticky;top:118px}
}
.about__img{background:var(--paper-2)}
.about__img img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 40%}
.about__img figcaption{color:var(--fg-mute);
  padding-top:10px;font-size:.68rem;font-variation-settings:"wght" 520,"wdth" 90;
  letter-spacing:.16em;text-transform:uppercase;color:var(--fg-mute);
}
.about__body{display:grid;gap:18px;max-width:60ch}
.about__body .h2{margin-bottom:4px}
.about__body p{color:var(--fg-mute);text-wrap:pretty}
.about__sign{
  font-family:var(--ff-d);
  font-variation-settings:"opsz" 40,"wght" 380,"SOFT" 40,"WONK" 1;
  font-size:1.3rem;color:var(--fg)!important;margin-top:4px;
}
.about__facts{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;
  margin-top:14px;border-top:1px solid var(--paper-3);
}
@media (min-width:620px){ .about__facts{grid-template-columns:repeat(4,minmax(0,1fr))} }
.about__facts div{padding:16px 0;border-bottom:1px solid var(--paper-2);padding-right:14px}
.about__facts dt{
  font-size:.63rem;font-variation-settings:"wght" 580,"wdth" 88;
  letter-spacing:.17em;text-transform:uppercase;color:var(--fg-mute);margin-bottom:5px;
}
.about__facts dd{
  font-family:var(--ff-d);
  font-variation-settings:"opsz" 30,"wght" 380,"SOFT" 22;
  font-size:1.06rem;line-height:1.15;
}

/* ---------- 19. FAQ ---------- */
.faq{max-width:var(--maxw);margin-inline:auto;display:grid;gap:clamp(30px,4vw,68px)}
@media (min-width:900px){
  .faq{grid-template-columns:minmax(0,.72fr) minmax(0,1fr);align-items:start;column-gap:clamp(40px,6vw,100px)}
  .faq__head{position:sticky;top:118px}
}
.faq__head{display:grid;gap:18px;align-content:start}
.faq__img{margin-top:8px;background:var(--paper-2)}
.faq__img img{width:100%;aspect-ratio:3/2;object-fit:cover}
@media (max-width:899px){ .faq__img{margin-top:2px} .faq__img img{aspect-ratio:16/9} }
.faq__list{display:grid;gap:0;border-top:1px solid var(--paper-3)}
.qa{border-bottom:1px solid var(--paper-3)}
.qa summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:1.05em 0;min-height:56px;
  font-family:var(--ff-d);
  font-variation-settings:"opsz" 36,"wght" 400,"SOFT" 22;
  font-size:clamp(1.04rem,.98rem + .38vw,1.24rem);line-height:1.28;letter-spacing:-.008em;
  transition:color .3s var(--ease);
}
.qa summary:hover{color:var(--brass-ink)}
.qa summary::after{
  content:"";flex:0 0 auto;width:13px;height:13px;margin-top:.42em;position:relative;
  background:
    linear-gradient(var(--brass),var(--brass)) center/13px 1px no-repeat,
    linear-gradient(var(--brass),var(--brass)) center/1px 13px no-repeat;
  transition:transform .4s var(--ease);
}
.qa[open] summary::after{transform:rotate(90deg);background:linear-gradient(var(--brass),var(--brass)) center/13px 1px no-repeat}
.qa__a{padding:0 0 1.35em;max-width:62ch}
.qa__a p{color:var(--fg-mute);text-wrap:pretty}
.qa__a em{font-style:italic;color:var(--fg)}

/* ---------- 20. SPLIT / FORM ---------- */
.sec--split{
  display:grid;background:var(--ink);color:#EDEFF1;
  --fg:#EDEFF1;--fg-mute:var(--frost);--rule:rgba(255,255,255,.15);
}
.split__img{overflow:hidden;background:var(--ink-2);order:1}
/* <picture> ist inline, deshalb braucht es die eigene Höhe,
   sonst hängt das Bild in der Spalte und darunter klafft Tinte. */
.split__img picture{display:block;width:100%;height:100%}
.split__img img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.split__body{
  order:2;background:var(--paper);color:#171B1F;
  --fg:#171B1F;--fg-mute:var(--stone);--rule:var(--paper-2);
  padding:clamp(48px,6.4vw,100px) var(--gut);
  display:grid;gap:clamp(18px,2.2vw,26px);align-content:center;
}
@media (max-width:899px){ .split__img{height:min(44svh,400px)} }
@media (min-width:900px){
  .sec--split{grid-template-columns:minmax(0,.78fr) minmax(0,1fr)}
  .split__body{padding-inline:clamp(40px,5.4vw,96px)}
}
.split__alt{font-size:.88rem;color:var(--fg-mute)}
.split__alt a{color:var(--fg);text-underline-offset:3px}

.form{display:grid;gap:16px;margin-top:6px}
.form[hidden]{display:none}
.form__row{display:grid;gap:16px}
@media (min-width:520px){ .form__row{grid-template-columns:repeat(2,minmax(0,1fr))} }
.fld{display:grid;gap:7px;min-width:0}
.fld--set{border:0}
.fld__l{
  font-size:.66rem;font-variation-settings:"wght" 600,"wdth" 90;
  letter-spacing:.16em;text-transform:uppercase;color:var(--fg-mute);
}
.fld__l abbr{color:var(--brass-ink)}
.fld__i{
  width:100%;min-height:50px;padding:.72em .9em;
  background:var(--snow);color:var(--fg);
  border:1px solid var(--paper-3);border-radius:var(--r);
  font-size:1rem;
  transition:border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.fld__i::placeholder{color:#9A958C}
.fld__i:hover{border-color:#B9B4AA}
.fld__i:focus{outline:0;border-color:var(--brass);box-shadow:0 0 0 3px rgba(176,141,63,.16)}
.fld__i--ta{min-height:96px;resize:vertical;line-height:1.55}
.fld__i[aria-invalid="true"]{border-color:#A8402F}
.fld__e{font-size:.78rem;color:#A8402F;min-height:0}
.fld__e:empty{display:none}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:inline-flex}
.chip input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.chip span{
  display:inline-flex;align-items:center;min-height:44px;padding:.5em 1.05em;
  border:1px solid var(--paper-3);border-radius:var(--r);background:var(--snow);
  font-size:.8rem;font-variation-settings:"wght" 500,"wdth" 96;
  transition:border-color .25s var(--ease),background .25s var(--ease),color .25s var(--ease);
}
.chip input:hover+span{border-color:#B9B4AA}
.chip input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.chip input:focus-visible+span{outline:2px solid var(--brass-soft);outline-offset:2px}

.form__legal{font-size:.79rem;color:var(--fg-mute);line-height:1.55}
.form__legal a{color:var(--fg);text-underline-offset:3px}
.form__status{font-size:.9rem;line-height:1.55}
.form__status:empty{display:none}
.form__status[data-tone="ok"]{color:#2E6B4A}
.form__status[data-tone="err"]{color:#A8402F}

/* Bestätigung bzw. Notausgang, falls kein Endpoint gesetzt ist.
   Nichts darf still verschwinden: Text bleibt sichtbar und kopierbar. */
.sent{display:grid;gap:16px;margin-top:6px;
  border-top:1px solid var(--paper-3);padding-top:clamp(24px,3vw,34px)}
.sent[hidden]{display:none}
.sent__h{font-family:var(--ff-d);
  font-variation-settings:"opsz" 40,"wght" 380,"SOFT" 30,"WONK" 1;
  font-size:clamp(1.35rem,1.1rem + 1.1vw,1.85rem);line-height:1.15}
.sent__p{font-size:.95rem;line-height:1.65;color:var(--fg-mute)}
.sent__ta{width:100%;min-height:150px;padding:.85em 1em;
  background:var(--snow);color:var(--fg);
  border:1px solid var(--paper-3);border-radius:var(--r);
  font-family:var(--ff-b);font-size:.88rem;line-height:1.6;resize:vertical}
.sent__ta:focus{outline:0;border-color:var(--brass);box-shadow:0 0 0 3px rgba(176,141,63,.16)}
.split__body .btn--line:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* ---------- 21. FOOTER ---------- */
.ftr{background:var(--ink);color:#D5DBE0;padding:clamp(56px,6.4vw,96px) var(--gut) 26px}
.ftr__top{
  max-width:var(--maxw);margin-inline:auto;
  display:grid;gap:clamp(30px,3.4vw,52px);
}
@media (min-width:760px){ .ftr__top{grid-template-columns:1.25fr 1fr 1fr 1fr} }
.ftr__brand{display:grid;gap:18px;align-content:start}
.ftr__lion{width:32px;aspect-ratio:503/516;color:var(--brass);opacity:.92;
  -webkit-mask-image:url("assets/icons/logo-lion.svg");mask-image:url("assets/icons/logo-lion.svg");}
.ftr__claim{
  font-family:var(--ff-d);
  font-variation-settings:"opsz" 40,"wght" 350,"SOFT" 34,"WONK" 1;
  font-size:clamp(1.16rem,1.05rem + .5vw,1.44rem);line-height:1.2;color:#E9ECEE;
}
.ftr__col{display:grid;gap:12px;align-content:start;font-size:.9rem;color:var(--frost);line-height:1.72}
.ftr__col .eyebrow{color:rgba(255,255,255,.5)}
.ftr__col a{text-decoration:none;border-bottom:1px solid rgba(255,255,255,.2);padding-bottom:1px}
.ftr__col a:hover{color:var(--snow);border-bottom-color:var(--brass)}
.ftr__bot{
  max-width:var(--maxw);margin:clamp(38px,4.4vw,64px) auto 0;
  padding-top:20px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:space-between;align-items:center;
  font-size:.76rem;color:rgba(255,255,255,.5);
}
.ftr__bot nav{display:flex;gap:22px}
.ftr__bot a{text-decoration:none}
.ftr__bot a:hover{color:var(--snow)}
@media (max-width:899px){ .ftr{padding-bottom:88px} }

/* ---------- 22. MOBILE CTA ---------- */
.mcta{
  position:fixed;left:var(--gut);right:var(--gut);bottom:14px;z-index:110;
  display:flex;align-items:center;justify-content:center;
  min-height:52px;padding:.85em 1.4em;
  background:var(--snow);color:var(--ink);text-decoration:none;border-radius:var(--r);
  font-size:.76rem;font-variation-settings:"wght" 620,"wdth" 96;
  letter-spacing:.14em;text-transform:uppercase;
  box-shadow:0 6px 26px rgba(0,0,0,.28);
  transform:translateY(140%);opacity:0;
  transition:transform .5s var(--ease),opacity .35s var(--ease);
}
.mcta.is-on{transform:none;opacity:1}
@media (min-width:960px){ .mcta{display:none} }

/* ---------- 23. LIGHTBOX ---------- */
.lb{
  border:0;padding:0;margin:auto;
  width:100%;max-width:100vw;height:100%;max-height:100dvh;
  /* Die Fläche liegt auf dem Dialog selbst und nicht nur auf ::backdrop.
     So bleibt der Hintergrund auch dann ruhig, wenn ein Browser den
     Backdrop anders zeichnet. */
  background:rgba(9,11,13,.96);color:var(--snow);overflow:hidden;
}
.lb::backdrop{background:rgba(9,11,13,.96)}
.lb:not([open]){display:none}
.lb__fig{
  height:100%;display:grid;
  /* minmax(0,1fr) statt 1fr: eine reine 1fr-Zeile hat als Mindesthöhe die
     Eigenhöhe ihres Inhalts. Bei Hochformaten wuchs die Zeile deshalb über
     das Fenster hinaus, max-height:100% am Bild bezog sich auf diese zu große
     Zeile und der Rest wurde vom overflow:hidden des Dialogs abgeschnitten. */
  grid-template-rows:minmax(0,1fr) auto;
  gap:14px;padding:clamp(48px,7vh,80px) clamp(14px,5vw,90px) clamp(18px,3vh,34px);
  place-items:center;
}
.lb__fig img{
  max-width:100%;max-height:100%;width:auto;height:auto;
  min-width:0;min-height:0;object-fit:contain;
  animation:lbin .5s var(--ease);
}
@keyframes lbin{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
.lb__fig figcaption{
  display:flex;gap:18px;align-items:baseline;justify-content:center;flex-wrap:wrap;
  font-size:.76rem;color:rgba(255,255,255,.66);text-align:center;max-width:70ch;line-height:1.5;
}
.lb__count{color:var(--brass);font-variant-numeric:tabular-nums;letter-spacing:.1em;flex:0 0 auto}
.lb__x{
  position:absolute;top:14px;right:14px;width:46px;height:46px;z-index:2;
  border:1px solid rgba(255,255,255,.3);border-radius:50%;
}
.lb__x::before,.lb__x::after{
  content:"";position:absolute;left:50%;top:50%;width:15px;height:1px;background:var(--snow);
}
.lb__x::before{transform:translate(-50%,-50%) rotate(45deg)}
.lb__x::after{transform:translate(-50%,-50%) rotate(-45deg)}
.lb__nav{
  position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;z-index:2;
  border:1px solid rgba(255,255,255,.22);border-radius:50%;
}
.lb__nav::before{
  content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;
  border-top:1px solid var(--snow);border-right:1px solid var(--snow);
}
.lb__nav--p{left:10px}
.lb__nav--p::before{transform:translate(-35%,-50%) rotate(-135deg)}
.lb__nav--n{right:10px}
.lb__nav--n::before{transform:translate(-65%,-50%) rotate(45deg)}
.lb__x:hover,.lb__nav:hover{border-color:var(--snow);background:rgba(255,255,255,.1)}
@media (max-width:620px){ .lb__nav{width:44px;height:44px} .lb__nav--p{left:6px} .lb__nav--n{right:6px} }

/* ---------- 24. REVEAL ---------- */
html.js .reveal{opacity:0;transform:translateY(16px)}
html.js .reveal.is-in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}

/* ---------- 25. REDUCED MOTION ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  html.js .reveal{opacity:1;transform:none}
  .m__btn:hover img{transform:none}
}

/* ---------- 26. LEGAL PAGES ---------- */
.legal{
  background:var(--paper);color:#171B1F;
  --fg:#171B1F;--fg-mute:var(--stone);
  padding:clamp(120px,14vh,180px) var(--gut) clamp(72px,9vw,120px);
}
.legal__wrap{max-width:74ch;margin-inline:auto;display:grid;gap:22px}
.legal h1{
  font-family:var(--ff-d);
  font-variation-settings:"opsz" 96,"wght" 350,"SOFT" 26,"WONK" 1;
  font-size:clamp(2rem,1.4rem + 2.6vw,3.2rem);line-height:1.04;letter-spacing:-.02em;
  margin-bottom:6px;
}
.legal h2{
  font-family:var(--ff-d);
  font-variation-settings:"opsz" 40,"wght" 420,"SOFT" 20;
  font-size:clamp(1.16rem,1.05rem + .5vw,1.42rem);line-height:1.2;
  margin-top:22px;
}
.legal p,.legal li{color:var(--fg-mute);text-wrap:pretty}
.legal ul{display:grid;gap:8px}
.legal ul li{padding-left:22px;position:relative}
.legal ul li::before{content:"";position:absolute;left:0;top:.72em;width:12px;height:1px;background:var(--brass)}
.legal a{color:var(--fg);text-underline-offset:3px}
.legal__back{margin-top:14px}
.legal__note{
  border-left:2px solid var(--brass);padding:14px 0 14px 18px;
  background:rgba(176,141,63,.06);font-size:.92rem;
}

/* ---------- 27. 404 ---------- */
.e404{
  min-height:100svh;background:var(--ink);color:#EDEFF1;
  display:grid;place-items:center;text-align:center;padding:120px var(--gut) 60px;
}
.e404__in{display:grid;gap:22px;justify-items:center;max-width:52ch}
.e404__n{
  font-family:var(--ff-d);
  font-variation-settings:"opsz" 144,"wght" 300,"SOFT" 40,"WONK" 1;
  font-size:clamp(4.5rem,16vw,10rem);line-height:.9;color:var(--brass);
}
.e404 p{color:var(--frost)}