/* Startseite: Scroll-Tour, Galerie, Tafeln, Räume */

/* ---------- Vorhang / Loader ---------- */
.loader{position:fixed;inset:0;z-index:99;background:var(--ink);color:var(--paper);display:grid;place-items:center;transition:clip-path 1.1s var(--ease-io);clip-path:inset(0 0 0 0)}
.loader.out{clip-path:inset(0 0 100% 0)}
.loader .in{display:flex;flex-direction:column;align-items:center;gap:18px}
.loader .word{display:flex;font-family:var(--display);font-weight:700;font-size:clamp(56px,12vw,150px);letter-spacing:.22em;margin-right:-.22em;line-height:1;overflow:hidden}
.loader .word span{display:inline-block;transform:translateY(105%);animation:up 1s var(--ease) forwards}
.loader .word span:nth-child(2){animation-delay:.07s}.loader .word span:nth-child(3){animation-delay:.14s}.loader .word span:nth-child(4){animation-delay:.21s}.loader .word span:nth-child(5){animation-delay:.28s}
@keyframes up{to{transform:none}}
.loader small{font-size:11px;letter-spacing:.42em;opacity:0;animation:fade .8s .6s forwards}
.loader .pct{font-family:var(--serif);font-style:italic;font-size:22px;opacity:0;animation:fade .8s .8s forwards;min-width:12ch;text-align:center}
.loader .bar{width:min(260px,60vw);height:2px;background:rgba(243,240,234,.15);position:relative;overflow:hidden}
.loader .bar i{position:absolute;inset:0;background:var(--accent);transform-origin:left;transform:scaleX(0);transition:transform .3s}
@keyframes fade{to{opacity:1}}

/* ---------- Tour (Vollbild) ---------- */
.tour{position:relative;height:1600vh;background:var(--ink)}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--ink)}
.stage canvas{position:absolute;inset:0;width:100%;height:100%}
.shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,19,18,.5) 0%,rgba(20,19,18,0) 20%,rgba(20,19,18,0) 42%,rgba(20,19,18,.55) 70%,rgba(20,19,18,.88) 100%)}
.intro,.chapter{position:absolute;left:var(--gut);right:var(--gut);bottom:calc(64px + env(safe-area-inset-bottom));color:var(--paper);pointer-events:none}
.intro .eyebrow{margin-bottom:22px;opacity:.85}
.intro h1{font-family:var(--display);font-weight:800;font-size:clamp(42px,min(7.6vw,13.5vh),132px);line-height:.9;letter-spacing:-.03em;margin:0;max-width:12ch}
.intro h1 em{color:var(--accent)}
.intro .hint{display:flex;align-items:center;gap:12px;margin-top:28px;font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.intro .hint i{width:1.5px;height:44px;background:rgba(243,240,234,.5);position:relative;overflow:hidden;display:block}
.intro .hint i::after{content:"";position:absolute;left:0;right:0;height:40%;background:var(--accent);animation:drip 1.8s var(--ease) infinite}
@keyframes drip{from{transform:translateY(-100%)}to{transform:translateY(260%)}}
.chapter{opacity:0;text-shadow:0 2px 24px rgba(0,0,0,.45)}
.intro{text-shadow:0 2px 24px rgba(0,0,0,.4)}
.chapter .no{font-size:12px;font-weight:700;letter-spacing:.26em;text-transform:uppercase;opacity:.85}
.chapter h2{font-family:var(--display);font-weight:800;font-size:clamp(42px,min(8.4vw,13vh),150px);line-height:.88;letter-spacing:-.035em;margin:10px 0 14px}
.chapter p{margin:0;font-size:clamp(17px,1.4vw,21px);max-width:30em;opacity:.92}
.chapter p em{font-size:1.15em}
.chapter .swap{transition:opacity .45s,transform .7s var(--ease)}
.chapter.out .no,.chapter.out h2,.chapter.out p{opacity:0;transform:translateY(24px);transition:opacity .25s,transform .25s}
.chapter .no,.chapter h2,.chapter p{transition:opacity .6s,transform .8s var(--ease)}
.tbar{position:absolute;left:var(--gut);right:var(--gut);bottom:calc(28px + env(safe-area-inset-bottom));display:flex;gap:8px;opacity:0}
.tbar i{flex:1;height:2px;background:rgba(243,240,234,.25);position:relative}
.tbar i b{position:absolute;inset:0;background:var(--paper);transform-origin:left;transform:scaleX(0)}
.tbar i span{position:absolute;left:0;bottom:8px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(243,240,234,.6);white-space:nowrap}
.tbar i.on span{color:var(--paper)}
.outro{position:absolute;inset:0;display:grid;place-items:center;text-align:center;pointer-events:none;opacity:0;color:var(--paper);background:var(--ink)}
.outro h2{font-family:var(--display);font-weight:800;font-size:clamp(46px,9vw,150px);line-height:.88;letter-spacing:-.03em;margin:0}
.outro h2 em{display:block;font-size:.8em;color:var(--pink)}
@media (max-width:820px){.tour{height:1400vh}.tbar i span{display:none}.chapter p{max-width:none}.intro h1{font-size:9.4vw}.chapter h2{font-size:11vw}.h2{font-size:clamp(38px,10.2vw,124px)}.paint{opacity:.22!important;transform:scale(.6)}}

/* ---------- Manifest ---------- */
.manifest{padding:clamp(120px,16vw,240px) 0 clamp(90px,12vw,180px);position:relative}
.manifest .eyebrow{margin-bottom:34px;display:flex;gap:14px;align-items:center}
.manifest .eyebrow::before{content:"";width:40px;height:1.5px;background:currentColor}
.mtext{font-family:var(--display);font-weight:700;font-size:clamp(30px,4.3vw,70px);line-height:1.06;letter-spacing:-.02em;margin:0;max-width:22ch}
.mtext .w{opacity:.14;transition:opacity .3s}
.mtext .w.on{opacity:1}
.mtext em{font-weight:400}
.mtext .pig{display:inline-block;width:.9em;height:.62em;border-radius:40% 60% 55% 45%/50% 40% 60% 50%;vertical-align:.04em;margin:0 .08em}
.manifest .quote{margin-top:clamp(50px,7vw,100px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(24px,5vw,90px);align-items:end}
.manifest blockquote{margin:0;font-family:var(--serif);font-style:italic;font-size:clamp(30px,3.4vw,54px);line-height:1.05}
.manifest blockquote cite{display:block;font-family:var(--sans);font-style:normal;font-size:13px;letter-spacing:.18em;text-transform:uppercase;margin-top:16px;color:var(--muted)}
.facts{display:grid;grid-template-columns:repeat(3,1fr);border-top:1.5px solid var(--ink)}
.facts div{padding:18px 18px 0 0}
.facts b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(36px,4vw,64px);line-height:1;letter-spacing:-.02em}
.facts span{font-size:14px;color:var(--muted)}
@media (max-width:820px){.manifest .quote{grid-template-columns:1fr}.facts{grid-template-columns:1fr 1fr 1fr}}

/* ---------- Galerie ---------- */
.gallery{background:var(--ink);color:var(--paper);position:relative;overflow:hidden}
.gallery .head{padding:clamp(100px,12vw,180px) 0 50px;display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:end}
.gallery .h2 em{color:var(--pink)}
.expo{border:1.5px solid var(--line-l);padding:22px 24px;display:flex;flex-direction:column;gap:8px;max-width:440px}
.expo .now{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.expo .now i{width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(228,87,46,.7);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 12px rgba(228,87,46,0)}100%{box-shadow:0 0 0 0 rgba(228,87,46,0)}}
.expo h3{margin:0;font-family:var(--display);font-weight:800;font-size:28px;line-height:1.05}
.expo p{margin:0;color:#c9c3b8;font-size:15px}
.hang{position:relative}
.hang .rail{display:flex;gap:clamp(40px,6vw,110px);padding:40px var(--gut) 80px;align-items:flex-end;width:max-content;will-change:transform}
.hang .rail::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line-l)}
.work{width:clamp(240px,26vw,400px);display:flex;flex-direction:column;gap:22px;cursor:pointer;background:none;border:0;color:inherit;text-align:left;padding:0}
.work:nth-child(3n+2){width:clamp(200px,20vw,320px)}
.work:nth-child(3n){width:clamp(260px,30vw,460px)}
.work .canvas{position:relative;background:#fff;padding:clamp(10px,1.1vw,16px);box-shadow:0 0 0 6px #e9e4da,0 30px 50px -18px rgba(0,0,0,.7);transition:transform .8s var(--ease)}
.work:hover .canvas{transform:translateY(-8px) rotate(-.6deg)}
.work .canvas img{width:100%;height:auto;aspect-ratio:auto}
.work .canvas .reddot{position:absolute;right:-6px;bottom:-6px;width:20px;height:20px}
.work .plate{background:#f6f2ea;color:var(--ink);padding:12px 14px;font-size:13px;line-height:1.4;width:min(100%,250px);box-shadow:0 6px 14px -8px rgba(0,0,0,.5)}
.work .plate b{display:block;font-family:var(--display);font-size:15px}
.work .plate i{font-family:var(--serif);font-size:15px}
.work .plate .p{display:flex;justify-content:space-between;margin-top:6px;font-weight:700}
.gallery .foot{display:flex;flex-wrap:wrap;gap:20px;justify-content:space-between;align-items:center;padding:30px 0 clamp(90px,10vw,150px);border-top:1px solid var(--line-l)}
.gallery .foot p{margin:0;font-size:clamp(20px,2vw,28px);font-family:var(--serif);font-style:italic;max-width:24ch}
.paint{position:absolute;pointer-events:none;border-radius:47% 53% 41% 59%/55% 42% 58% 45%;filter:blur(2px);opacity:.9;animation:morph 16s ease-in-out infinite alternate;mix-blend-mode:screen}
@media (max-width:820px){.gallery .head{grid-template-columns:1fr}.hang{overflow-x:auto;scroll-snap-type:x mandatory}.hang .rail{padding-bottom:50px}.work{scroll-snap-align:center}}

.soon{max-width:640px;padding:30px 0 10px}
.soon .hand{font-family:var(--hand);font-size:clamp(34px,3.6vw,52px);color:var(--pink);display:block;transform:rotate(-2deg);margin-bottom:10px}
.soon p{margin:0;font-size:clamp(18px,1.6vw,22px);color:#d8d2c7}

/* ---------- Karte / Tafeln ---------- */
.menu{background:#eee9e0;position:relative;padding:clamp(100px,12vw,170px) 0}
.menu .head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:60px}
.menu .hand{font-family:var(--hand);font-size:clamp(30px,3vw,44px);color:var(--accent);line-height:1;transform:rotate(-3deg);display:inline-block}
.boards{columns:3 320px;column-gap:clamp(20px,2.4vw,36px)}
.board{break-inside:avoid;background:var(--chalk);color:#f4f1ea;padding:28px 28px 30px;margin-bottom:clamp(20px,2.4vw,36px);border-radius:2px;position:relative;
  box-shadow:inset 0 0 60px rgba(255,255,255,.04),0 2px 0 #000,0 24px 40px -22px rgba(0,0,0,.6);transform:rotate(var(--r,0deg));transition:transform .6s var(--ease)}
.board:hover{transform:rotate(0) translateY(-4px)}
.board::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 30% 20%,rgba(255,255,255,.07),transparent 60%);pointer-events:none}
.board h3{font-family:var(--hand);font-weight:700;font-size:44px;margin:0 0 4px;line-height:1;display:inline-block;border-bottom:2px solid rgba(244,241,234,.8);padding-bottom:2px}
.board .bn{font-family:var(--hand);font-size:22px;opacity:.75;margin:4px 0 12px;line-height:1.1}
.board ul{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
.board li{display:flex;align-items:baseline;gap:10px;font-family:var(--hand);font-size:27px;line-height:1.1}
.board li .n{flex:1;min-width:0}
.board li .n small{display:block;font-size:19px;opacity:.65;margin-top:-2px}
.board li .v{display:flex;flex-direction:column;align-items:flex-end;white-space:nowrap}
.board li .v span{display:flex;gap:10px}
.board li .v em{font-family:var(--hand);font-style:normal;font-size:19px;opacity:.65}
.board .leaf{display:inline-block;width:12px;height:12px;background:#7fd19b;border-radius:0 70% 0 70%;margin-left:6px;vertical-align:4px}
.menu .lunch{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:30px}
.menu .lunch .ph{background:none}
.beirut{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:clamp(40px,6vw,90px);background:var(--paper);border-radius:4px;overflow:hidden}
.beirut .im{min-height:380px;position:relative;overflow:hidden}
.beirut .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.beirut .tx{padding:clamp(28px,4vw,64px);display:flex;flex-direction:column;gap:18px;justify-content:center}
.beirut h3{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(34px,4vw,60px);line-height:.95;letter-spacing:-.02em}
@media (max-width:820px){.beirut{grid-template-columns:1fr}.beirut .im{min-height:300px}}

/* ---------- Shop-Teaser ---------- */
.shopt{padding:clamp(100px,12vw,170px) 0}
.shopt .head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:50px}

/* ---------- Räume (Akkordeon) ---------- */
.rooms-sec{padding:0 0 clamp(100px,12vw,170px)}
.rooms-sec .head{margin-bottom:40px;display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:end}
.acc{display:flex;gap:12px;height:min(78vh,720px)}
.acc .r{position:relative;flex:1;border-radius:6px;overflow:hidden;cursor:pointer;transition:flex 1s var(--ease);background:#000;color:var(--paper);border:0;padding:0;text-align:left}
.acc .r.on{flex:4.2}
.acc .r img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.82;transition:transform 1.4s var(--ease),opacity .6s}
.acc .r.on img{opacity:1;transform:scale(1.03)}
.acc .r .t{position:absolute;left:0;right:0;bottom:0;padding:24px;background:linear-gradient(transparent,rgba(0,0,0,.72));display:flex;flex-direction:column;gap:8px}
.acc .r .t b{font-family:var(--display);font-weight:800;font-size:clamp(22px,2.4vw,38px);line-height:1;white-space:nowrap;opacity:0;transform:translateY(10px);transition:opacity .5s .15s,transform .6s .15s var(--ease)}
.acc .r.on .t b{opacity:1;transform:none}
.acc .r .lab{position:absolute;left:50%;bottom:28px;transform:translateX(-50%) rotate(180deg);writing-mode:vertical-rl;font-weight:700;font-size:13px;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap;transition:opacity .4s}
.acc .r.on .lab{opacity:0}
.acc .r::after{content:"";position:absolute;inset:0;background:rgba(20,19,18,.42);transition:opacity .6s;pointer-events:none}
.acc .r.on::after{opacity:0}
.acc .r .lab,.acc .r .no{z-index:1}
.acc .r .t p{margin:0;max-width:34ch;font-size:15px;opacity:0;transform:translateY(10px);transition:opacity .5s .2s,transform .6s .2s var(--ease)}
.acc .r.on .t p{opacity:1;transform:none}
.acc .r .no{position:absolute;top:18px;left:20px;font-family:var(--serif);font-style:italic;font-size:26px}
@media (max-width:820px){.acc .r .lab{writing-mode:horizontal-tb;transform:none;left:20px;bottom:auto;top:50%;margin-top:-8px}.acc .r .t b{opacity:1;transform:none}.acc .r:not(.on) .t b{display:none}.rooms-sec .head{grid-template-columns:1fr}.acc{flex-direction:column;height:auto}.acc .r{height:110px;flex:none;transition:height .8s var(--ease)}.acc .r.on{height:440px}}

/* ---------- Programm ---------- */
.prog{background:var(--pink);padding:clamp(100px,12vw,170px) 0;position:relative;overflow:hidden}
.prog .h2 em{color:var(--ultra)}
.prog .list{margin-top:50px;border-top:2px solid var(--ink)}
.ev{display:grid;grid-template-columns:170px 1fr auto;gap:30px;align-items:center;padding:28px 0;border-bottom:2px solid var(--ink);position:relative;transition:padding .5s var(--ease)}
.ev:hover{padding-left:20px}
.ev .d{font-family:var(--display);font-weight:800;font-size:19px;line-height:1.05}
.ev .d small{display:block;font-family:var(--sans);font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;margin-top:4px}
.ev h3{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(28px,3.4vw,52px);line-height:1;letter-spacing:-.02em}
.ev h3 em{font-weight:400;font-size:.7em;margin-left:10px}
.ev p{margin:8px 0 0;max-width:60ch}
.ev .ty{border:1.5px solid var(--ink);border-radius:999px;padding:7px 14px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
@media (max-width:820px){.ev{grid-template-columns:1fr;gap:10px}.ev .ty{justify-self:start}}

/* ---------- Mieten ---------- */
.rent{background:var(--accent);padding:clamp(100px,12vw,170px) 0}
.rent .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,90px);align-items:start}
.rent .h2{font-size:clamp(46px,7vw,112px)}
.rent ul{list-style:none;padding:0;margin:30px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.rent li{border:1.5px solid var(--ink);border-radius:999px;padding:8px 14px;font-weight:700;font-size:14px}
.rent .card-f{background:var(--paper);border-radius:6px;padding:clamp(22px,3vw,40px);box-shadow:12px 12px 0 var(--ink)}
@media (max-width:820px){.rent .grid{grid-template-columns:1fr}}

/* ---------- Besuch ---------- */
.visit{padding:clamp(100px,12vw,170px) 0}
.visit .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,90px);align-items:start}
.visit .addr{font-family:var(--display);font-weight:800;font-size:clamp(34px,4.4vw,72px);line-height:.95;letter-spacing:-.02em;margin:24px 0}
.hours{display:grid;grid-template-columns:auto 1fr;gap:10px 30px;font-size:18px;border-top:1.5px solid var(--ink);padding-top:18px;margin-top:30px}
.hours .today{color:var(--accent);font-weight:700}
.open-now{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;letter-spacing:.06em;margin-top:18px}
.open-now i{width:10px;height:10px;border-radius:50%;background:var(--muted)}
.open-now.yes i{background:#2fa35a;box-shadow:0 0 0 4px rgba(47,163,90,.2)}
.visit .pics{position:relative;height:min(90vh,820px)}
.visit .pics figure{position:absolute;margin:0;overflow:hidden;border-radius:4px;box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.visit .pics figure img{width:100%;height:100%;object-fit:cover}
.visit .pics .a{left:0;top:0;width:68%;height:72%}
.visit .pics .b{right:0;bottom:0;width:52%;height:52%;border:10px solid var(--paper)}
.visit .links{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
@media (max-width:820px){.visit .grid{grid-template-columns:1fr}.visit .pics{height:120vw}}