/* International Ink – Stylesheet */

/* ── Schriften (lokal) ─────────────────────────────────── */
@font-face{font-family:"Big Shoulders Display";src:url("../fonts/BigShouldersDisplay.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Familjen Grotesk";src:url("../fonts/FamiljenGrotesk.woff2") format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("../fonts/IBMPlexMono-500.woff2") format("woff2");font-weight:500;font-display:swap}
/* Hero: Fraktur (Old-School-Lettering) + Pinsel-Schreibschrift */
@font-face{font-family:"Pirata One";src:url("../fonts/PirataOne.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Kaushan Script";src:url("../fonts/KaushanScript.woff2") format("woff2");font-display:swap}

/* ── Tokens ───────────────────────────────────────────── */
:root{
  --ink:#0e0d0c;        /* Studio-Schwarz */
  --ink-2:#171513;      /* Flächen */
  --line:#2c2925;       /* Linien auf Schwarz */
  --bone:#ebe3d4;       /* Papier / heller Text */
  --bone-2:#d6ccb9;
  --gold:#e9b730;       /* Logo-Gold */
  --stencil:#5a45d2;    /* Stencil-Violett, nur Flash-Motive */
  --smoke:#9a9287;      /* Nebentext */
  --paper-ink:#24201b;  /* Text auf Papier */

  --f-display:"Big Shoulders Display",Impact,sans-serif;
  --f-body:"Familjen Grotesk",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;

  --ease-out:cubic-bezier(.23,1,.32,1);
  --wrap:min(1200px,calc(100% - 32px));
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{background:var(--ink);color:var(--bone);font:400 17px/1.6 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}
.wrap{width:var(--wrap);margin-inline:auto}
.mono{font:500 .76rem/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase}
.eyebrow{display:flex;align-items:center;gap:.8em;color:var(--gold);margin-bottom:18px}
.eyebrow::before{content:"";width:28px;height:1.5px;background:currentColor}
.h2{font:900 clamp(2.6rem,6.2vw,4.8rem)/.9 var(--f-display);text-transform:uppercase}
.h2 em{font-style:normal;color:var(--gold)}
.sec{padding:clamp(72px,10vw,128px) 0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── Buttons ─────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6em;padding:.95em 1.45em;border-radius:999px;font:600 1rem/1 var(--f-body);text-decoration:none;border:1.5px solid transparent;cursor:pointer;background:none;transition:transform 160ms var(--ease-out),background-color 200ms ease,color 200ms ease,border-color 200ms ease}
.btn:active{transform:scale(.97)}
.btn svg{width:1.15em;height:1.15em;flex:none}
.btn--gold{background:var(--gold);color:var(--ink)}
.btn--ghost{border-color:currentColor}
.btn--dark{background:var(--paper-ink);color:var(--bone)}
@media (hover:hover) and (pointer:fine){
  .btn--gold:hover{background:#f3c84a}
  .btn--ghost:hover{background:var(--bone);color:var(--ink);border-color:var(--bone)}
  .btn--dark:hover{background:#000}
}

/* ── Header ──────────────────────────────────────────── */
.top{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--ink) 86%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;height:72px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{width:46px;height:auto}
.brand b{font:800 1.25rem/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase}
.brand b span{color:var(--gold)}
.nav{display:flex;align-items:center;gap:28px}
.nav a:not(.btn){position:relative;font-size:.95rem;text-decoration:none;color:var(--smoke);padding:6px 0;transition:color 200ms ease}
/* Hover am PC: goldener Strich wächst von links ein, läuft nach rechts aus */
@media (hover:hover) and (pointer:fine) and (min-width:961px){
  .nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform 260ms var(--ease-out)}
  .nav a:not(.btn):hover{color:var(--bone)}
  .nav a:not(.btn):hover::after{transform:scaleX(1);transform-origin:left}
}
.nav__cta{display:none}
.top__cta{padding:.72em 1.15em;font-size:.92rem}
.burger{display:none;width:46px;height:46px;border:1px solid var(--line);border-radius:50%;background:none;cursor:pointer;place-items:center;align-content:center;gap:5px;transition:transform 160ms var(--ease-out)}
.burger:active{transform:scale(.94)}
.burger span{display:block;width:18px;height:1.5px;background:var(--bone);transition:transform 240ms var(--ease-out),opacity 160ms ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* Mobil: Menü klappt unter dem Header auf */
@media (max-width:960px){
  .burger{display:grid}
  .top__cta{display:none}
  .nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;padding:8px 16px 20px;background:var(--ink);border-bottom:1px solid var(--line);
    clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path 300ms var(--ease-out),visibility 0s linear 300ms}
  .nav.open{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path 300ms var(--ease-out),visibility 0s}
  .nav a:not(.btn){font:800 1.6rem/1 var(--f-display);text-transform:uppercase;letter-spacing:.02em;color:var(--bone);padding:16px 0;border-bottom:1px solid var(--line)}
  .nav__cta{display:inline-flex;margin-top:18px}
}
@media (max-width:520px){.brand b{font-size:1.1rem}}

/* ── Hero ────────────────────────────────────────────── */
.hero{position:relative;padding:clamp(40px,7vw,88px) 0 clamp(64px,8vw,104px);overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:clamp(32px,6vw,88px)}
.status{display:inline-flex;align-items:center;gap:.6em;padding:.5em .9em;border:1px solid var(--line);border-radius:999px;color:var(--bone-2);margin-bottom:26px}
.status i{width:8px;height:8px;border-radius:50%;background:var(--smoke)}
.status.open i{background:#5fd068;box-shadow:0 0 0 4px rgba(95,208,104,.18)}
.hero h1{font-weight:400;line-height:.9}
.hero h1 > span{display:block}
.h1-script{font:400 clamp(3rem,7vw,5.8rem)/1 "Kaushan Script",cursive;transform:rotate(-4deg);transform-origin:left bottom;margin:0 0 .08em .04em}
.h1-brush{font:400 clamp(3.8rem,9.4vw,8rem)/.9 "Pirata One",var(--f-display)}
.h1-place{font:400 clamp(2.6rem,5.8vw,5rem)/1 "Pirata One",var(--f-display);color:var(--gold);margin-top:.1em}
.hero__lead{max-width:40ch;margin:28px 0 34px;font-size:clamp(1.05rem,1.5vw,1.22rem);color:#cfc7ba}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}
.hero__facts{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:40px;padding-top:22px;border-top:1px solid var(--line);color:var(--smoke)}
.hero__facts b{color:var(--bone);font-weight:600}

/* Video im versetzten Goldrahmen (Inspo: Photography) */
.frame{position:relative;justify-self:end;width:min(100%,400px)}
.frame::before{content:"";position:absolute;inset:-18px 18px 18px -18px;border:1.5px solid var(--gold);pointer-events:none}
.frame video{position:relative;width:100%;aspect-ratio:720/1162;object-fit:cover;background:var(--ink-2)}
.frame__tag{position:absolute;right:-12px;bottom:28px;background:var(--gold);color:var(--ink);padding:.6em .9em}
.frame__toggle{position:absolute;left:12px;bottom:12px;width:40px;height:40px;border-radius:50%;border:0;background:rgba(14,13,12,.7);display:grid;place-items:center;cursor:pointer;transition:transform 160ms var(--ease-out)}
.frame__toggle:active{transform:scale(.94)}
.frame__toggle svg{width:16px;height:16px;fill:var(--bone)}
@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr}
  .frame{justify-self:center;width:min(100%,340px);margin-top:18px}
  .frame__tag{right:-6px}
}

/* ── Galerie (Inspo: Photography-Masonry) ────────────── */
.gallery-head{display:flex;justify-content:space-between;align-items:end;gap:24px 40px;flex-wrap:wrap;margin-bottom:34px}
.gallery-head p{max-width:42ch;color:var(--smoke)}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.chip{appearance:none;border:1px solid var(--line);background:none;border-radius:999px;padding:.6em 1.05em;cursor:pointer;font-size:.92rem;color:var(--bone-2);transition:background-color 200ms ease,color 200ms ease,border-color 200ms ease,transform 160ms var(--ease-out)}
.chip:active{transform:scale(.97)}
.chip[aria-pressed="true"]{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.chip small{font-family:var(--f-mono);opacity:.6;margin-left:.35em}
.masonry{columns:3 280px;column-gap:14px}
.shot{break-inside:avoid;margin-bottom:14px;position:relative;display:block;width:100%;padding:0;border:0;background:var(--ink-2);cursor:zoom-in;overflow:hidden}
.shot img{width:100%;height:auto;filter:grayscale(.15);transition:transform 500ms var(--ease-out),filter 300ms ease}
.shot .cap{position:absolute;inset:auto 0 0 0;padding:40px 14px 12px;background:linear-gradient(transparent,rgba(14,13,12,.88));text-align:left;font-size:.92rem;opacity:0;transform:translateY(6px);transition:opacity 220ms ease,transform 220ms var(--ease-out)}
.shot .cap .mono{display:block;color:var(--gold);margin-bottom:2px}
.shot[hidden]{display:none}
@media (hover:hover) and (pointer:fine){
  .shot:hover img{transform:scale(1.035);filter:none}
  .shot:hover .cap{opacity:1;transform:none}
}
@media (hover:none){.shot .cap{opacity:1;transform:none;padding-top:28px}}
.gallery-foot{margin-top:22px;color:var(--smoke)}
.gallery-foot a{color:var(--gold)}

/* ── Cover-up & Großprojekte ─────────────────────────── */
.cover{background:var(--ink-2);border-block:1px solid var(--line)}
.cover .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,96px);align-items:center}
.pair{position:relative;isolation:isolate;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pair figure{position:relative}
.pair figure:last-child{margin-top:56px}
.pair figure:last-child::after{content:"";position:absolute;inset:14px -14px -14px 14px;border:1.5px solid var(--gold);z-index:-1}
.pair img{width:100%;aspect-ratio:3/4;object-fit:cover}
.pair figcaption{position:absolute;top:10px;left:10px;background:var(--ink);padding:.45em .7em}
.pair figure:last-child figcaption{background:var(--gold);color:var(--ink)}
.pair-switch{display:flex;gap:8px;margin-top:28px}
.cover__lead{margin:22px 0 30px;max-width:44ch;color:#cfc7ba}
.steps{list-style:none;padding:0;counter-reset:s}
.steps li{display:grid;grid-template-columns:48px 1fr;gap:12px;padding:16px 0;border-top:1px solid var(--line);counter-increment:s}
.steps li::before{content:counter(s);font:900 1.9rem/1 var(--f-display);color:var(--gold)}
.steps h3{font:600 1.05rem/1.3 var(--f-body);margin-bottom:2px}
.steps p{color:var(--smoke);font-size:.95rem}
@media (max-width:860px){.cover .wrap{grid-template-columns:1fr}.pair{order:-1}}

/* ── Piercing (helle Papier-Sektion) ─────────────────── */
.pierce{background:var(--bone);color:var(--paper-ink)}
.pierce .eyebrow{color:var(--stencil)}
.pierce__grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(36px,6vw,88px);align-items:start}
.pierce__lead{margin:22px 0 28px;max-width:40ch;color:#4a4339}
.price-list{list-style:none;padding:0;margin-bottom:30px}
.price-list li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;border-top:1.5px dashed var(--bone-2)}
.price-list li:last-child{border-bottom:1.5px dashed var(--bone-2)}
.price-list b{font:800 1.6rem/1 var(--f-display)}
.price-list span small{display:block;color:#7a7064;font-size:.85rem}
.pierce__photos{display:grid;grid-template-columns:1.15fr .85fr;grid-template-rows:auto auto;gap:12px}
.pierce__photos .shot{margin:0;background:var(--bone-2)}
.pierce__photos .shot:first-child{grid-row:span 2}
.pierce__photos .shot img{height:100%;object-fit:cover}
.pierce__photos .shot:first-child img{aspect-ratio:3/5}
.pierce__photos .shot:not(:first-child) img{aspect-ratio:1/1}
@media (max-width:860px){.pierce__grid{grid-template-columns:1fr}}

/* ── Kontakt ─────────────────────────────────────────── */
.contact .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,88px);align-items:start}
.contact__logo{width:min(220px,50%);margin-bottom:28px}
.contact__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.facts{display:grid}
.fact{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:18px 0;border-top:1px solid var(--line)}
.fact:last-child{border-bottom:1px solid var(--line)}
.fact dt{color:var(--smoke)}
.fact dd a{text-decoration-color:var(--gold);text-underline-offset:4px}
.hours{list-style:none;padding:0;display:grid;gap:2px}
.hours li{display:flex;justify-content:space-between;gap:16px;max-width:240px;color:var(--bone-2)}
.hours li.today{color:var(--gold);font-weight:600}
@media (max-width:860px){.contact .wrap{grid-template-columns:1fr}.fact{grid-template-columns:1fr;gap:4px}}

/* ── Footer ──────────────────────────────────────────── */
footer{border-top:1px solid var(--line);padding:28px 0;color:var(--smoke);font-size:.9rem}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
footer nav{display:flex;gap:20px}
@media (max-width:860px){footer{padding-bottom:96px}}

/* ── Schwebende Buttons: Walk-in-Pille, WhatsApp, nach oben (Muster wie Best Age Revolution) ── */
.pill{position:fixed;left:20px;bottom:22px;z-index:30;display:flex;align-items:center;gap:.6em;padding:.8em 1.15em;border-radius:999px;border:0;background:var(--gold);color:var(--ink);font-weight:600;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.4);transition:transform 160ms var(--ease-out)}
.pill:active{transform:scale(.97)}
.pill[hidden]{display:none}
@media (max-width:560px){.pill{left:12px;bottom:18px;padding:.7em 1em;font-size:.88rem}}

.wa-fab{position:fixed;right:22px;bottom:22px;z-index:30;width:60px;height:60px;border-radius:50%;background:#25d366;color:#fff;display:grid;place-items:center;box-shadow:0 12px 30px rgba(37,211,102,.4);transition:transform 200ms var(--ease-out),box-shadow 200ms ease}
.wa-fab::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(37,211,102,.45);animation:waPulse 2.4s ease-out infinite}
@keyframes waPulse{0%{transform:scale(.9);opacity:.7}100%{transform:scale(1.35);opacity:0}}
.wa-fab:active{transform:scale(.95)}
.wa-fab svg{width:32px;height:32px}
.wa-label{position:absolute;right:74px;top:50%;transform:translateY(-50%) translateX(8px);background:var(--bone);color:var(--ink);font-weight:600;font-size:.88rem;white-space:nowrap;padding:9px 15px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity 200ms ease,transform 200ms var(--ease-out)}
.wa-label::after{content:"";position:absolute;right:-6px;top:50%;transform:translateY(-50%);border:6px solid transparent;border-left-color:var(--bone);border-right:0}
@media (hover:hover) and (pointer:fine){
  .wa-fab:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(37,211,102,.5)}
  .wa-fab:hover .wa-label{opacity:1;transform:translateY(-50%) translateX(0)}
}

.to-top{position:fixed;right:28px;bottom:96px;z-index:30;width:48px;height:48px;border-radius:50%;border:1.5px solid var(--gold);background:var(--ink-2);color:var(--gold);cursor:pointer;display:grid;place-items:center;
  opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity 300ms ease,transform 300ms var(--ease-out),background-color 200ms ease,color 200ms ease}
.to-top.on{opacity:1;transform:none;pointer-events:auto}
.to-top:active{transform:scale(.94)}
.to-top svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine){.to-top.on:hover{background:var(--gold);color:var(--ink);transform:translateY(-3px)}}
@media (max-width:560px){
  .wa-fab{width:54px;height:54px;right:16px;bottom:16px}
  .wa-label{display:none}
  .to-top{width:44px;height:44px;right:21px;bottom:82px}
}
@media (prefers-reduced-motion:reduce){.wa-fab::after{animation:none;opacity:0}}

/* ── Dialoge (Walk-in + Lightbox) ────────────────────── */
dialog{border:0;padding:0;margin:auto;color:inherit;max-width:none;max-height:none}
dialog::backdrop{background:rgba(8,7,6,.78);backdrop-filter:blur(4px)}
dialog[open]{animation:pop 240ms var(--ease-out)}
@keyframes pop{from{opacity:0;transform:scale(.96)}}
.x{position:absolute;top:12px;right:12px;z-index:2;width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;transition:transform 160ms var(--ease-out),background-color 200ms ease}
.x:active{transform:scale(.94)}
.x svg{width:18px;height:18px;stroke:currentColor;stroke-width:2.2;fill:none}

/* Walk-in-Flyer (Pop-up ab Seitenmitte) */
.flyer{width:min(440px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto;background:var(--ink-2);border:1px solid var(--line)}
.flyer img{width:100%;height:auto}
.flyer .x{background:var(--ink);color:var(--bone);border:1px solid var(--line)}
.flyer__bar{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px}
.flyer__bar .btn{padding:.9em .8em;font-size:.95rem;color:var(--bone)}
.flyer__bar .btn--gold{color:var(--ink)}
@media (max-height:700px){.flyer{width:min(360px,calc(100% - 32px))}}

/* Walk-in-Sektion mit Flash-Bogen */
.walkin__head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:24px;margin-bottom:36px}
.walkin .eyebrow{color:var(--stencil)}
.walkin__when{text-align:right;font:800 clamp(1.6rem,3vw,2.2rem)/1 var(--f-display);text-transform:uppercase}
.walkin__when small{display:block;margin-top:10px;color:var(--stencil)}
@media (max-width:700px){.walkin__head{grid-template-columns:1fr}.walkin__when{text-align:left}}
.walkin{background:var(--bone);color:var(--paper-ink);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3  0 0 0 0 .25  0 0 0 0 .2  0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.walkin__intro{margin:16px 0 0;max-width:52ch;color:#4a4339}
.sheet{display:grid;grid-template-columns:repeat(3,1fr);border-top:1.5px dashed var(--bone-2);border-left:1.5px dashed var(--bone-2)}
.motif{position:relative;appearance:none;background:none;border:0;border-right:1.5px dashed var(--bone-2);border-bottom:1.5px dashed var(--bone-2);padding:22px 16px 16px;cursor:pointer;color:inherit;text-align:left;display:grid;gap:10px;transition:background-color 200ms ease}
.motif > svg{width:min(92px,60%);aspect-ratio:1;margin-inline:auto;fill:none;stroke:var(--stencil);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform 220ms var(--ease-out)}
.motif .solid{fill:var(--stencil);stroke:none}
.motif__row{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.motif__name{font-weight:600}
.motif__price{font:500 .8rem/1.3 var(--f-mono)}
.motif__tick{position:absolute;top:10px;right:10px;width:24px;height:24px;border-radius:50%;border:1.5px solid var(--bone-2);display:grid;place-items:center;transition:background-color 160ms ease,border-color 160ms ease}
.motif__tick svg{width:12px;stroke:var(--bone);stroke-width:3;fill:none;opacity:0;transition:opacity 160ms ease}
.motif[aria-pressed="true"]{background:#e2d8c6}
.motif[aria-pressed="true"] .motif__tick{background:var(--stencil);border-color:var(--stencil)}
.motif[aria-pressed="true"] .motif__tick svg{opacity:1}
.motif:active > svg{transform:scale(.96)}
@media (hover:hover) and (pointer:fine){.motif:hover > svg{transform:rotate(-3deg) scale(1.03)}}
@media (max-width:640px){.sheet{grid-template-columns:repeat(2,1fr)}.motif__row{flex-direction:column;gap:2px}}
.tally{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px;margin-top:24px}
.ladder{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0}
.ladder li{font:500 .8rem/1 var(--f-mono);padding:.6em .85em;border:1.5px solid var(--paper-ink);border-radius:999px;transition:background-color 200ms ease,color 200ms ease}
.ladder li.on{background:var(--paper-ink);color:var(--bone)}
.pick{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.pick__sum{font:800 1.6rem/1 var(--f-display);text-transform:uppercase}
.pick .btn[aria-disabled="true"]{opacity:.35;pointer-events:none}
.walkin__note{margin-top:18px;font-size:.85rem;color:#6a6156}

/* Lightbox */
.lightbox{width:100%;height:100%;margin:0;background:transparent;display:none}
.lightbox[open]{display:grid;grid-template-columns:64px 1fr 64px;align-items:center;gap:8px;padding:56px 12px 20px}
.lightbox figure{display:grid;justify-items:center;gap:12px;min-height:0;height:100%;align-content:center}
.lightbox img{max-height:calc(100dvh - 140px);width:auto;object-fit:contain}
.lightbox figcaption{color:var(--bone-2);text-align:center}
.lightbox figcaption .mono{color:var(--gold);display:block}
.lightbox .x{background:var(--bone);color:var(--ink);top:12px;right:12px}
.nav-btn{width:48px;height:48px;border-radius:50%;border:1px solid rgba(235,227,212,.3);background:rgba(14,13,12,.6);cursor:pointer;display:grid;place-items:center;transition:transform 160ms var(--ease-out),background-color 200ms ease}
.nav-btn:active{transform:scale(.94)}
.nav-btn svg{width:18px;height:18px;stroke:var(--bone);stroke-width:2.2;fill:none}
@media (max-width:640px){
  .lightbox[open]{grid-template-columns:1fr;grid-template-rows:1fr auto;padding:60px 8px 16px}
  .lightbox figure{grid-column:1}
  .nav-btn{position:absolute;bottom:18px}
  .nav-btn.prev{left:16px}.nav-btn.next{right:16px}
  .lightbox figcaption{padding:0 64px}
}

/* ── Einblenden beim Scrollen ────────────────────────── */
.rv{opacity:0;transform:translateY(14px);transition:opacity 600ms ease,transform 700ms var(--ease-out)}
.rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{transform:none;transition:opacity 300ms ease}
  dialog[open]{animation:none}
  .shot img,.motif > svg{transition:none}
}