/* ==========================================================================
   NATA Lisboa Wien — style.css
   Brand: #FECE22 (Nata-Gelb) · #0C0B09 (Ink) · #FAF5EC (Cream)
   Display: Jost (Futura-nah, wie im Marken-Auftritt) · Text: Inter
   ========================================================================== */

/* ---------- Fonts (self-hosted, keine Google-Fonts-Verbindung) ---------- */
@font-face{font-family:'Jost';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(assets/fonts/jost-latin.woff2) format('woff2');
  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:'Jost';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(assets/fonts/jost-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(assets/fonts/inter-latin.woff2) format('woff2');
  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:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(assets/fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* ---------- Tokens ---------- */
:root{
  --ink:#0C0B09;
  --ink-2:#15130F;
  --ink-3:#221E18;
  --cream:#FAF5EC;
  --cream-2:#F1E7D5;
  --cream-3:#E6D8BE;
  --yellow:#FECE22;
  --yellow-deep:#E3B000;
  --yellow-soft:#FFF0B8;
  --white:#fff;

  --fg:var(--ink);
  --muted:#5C544A;

  --font-display:'Jost',ui-sans-serif,'Futura','Century Gothic',system-ui,sans-serif;
  --font-body:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;

  --wrap:1240px;
  --gut:clamp(20px,5vw,64px);
  --radius:2px;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,0,.35,1);

  --deco:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%23FECE22' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M0 140 L70 0 L140 140'/%3E%3Cpath d='M0 0 L70 140 L140 0'/%3E%3Cpath d='M-35 140 L35 0 L105 140'/%3E%3Cpath d='M35 140 L105 0 L175 140'/%3E%3Ccircle cx='70' cy='70' r='26'/%3E%3Ccircle cx='0' cy='70' r='26'/%3E%3Ccircle cx='140' cy='70' r='26'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  font-family:var(--font-body);
  font-size:clamp(16px,.42vw + 14.6px,17.5px);
  line-height:1.72;
  color:var(--fg);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--yellow);color:var(--ink)}
:focus-visible{outline:2px solid var(--yellow-deep);outline-offset:3px;border-radius:2px}

/* ---------- Typo ---------- */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:500;line-height:1.02;letter-spacing:-.02em;text-wrap:balance}
.h-xl{font-size:clamp(2.6rem,min(9.2vw,13.2svh),7.4rem);font-weight:500;letter-spacing:-.045em;line-height:.9;text-transform:uppercase}
.h-lg{font-size:clamp(2.1rem,5.6vw,4.4rem);letter-spacing:-.035em;line-height:.98}
.h-md{font-size:clamp(1.6rem,3vw,2.4rem);letter-spacing:-.025em;line-height:1.08}
.h-sm{font-size:clamp(1.15rem,1.6vw,1.4rem);letter-spacing:-.015em;line-height:1.2;font-weight:600}
p{text-wrap:pretty}
.lead{font-size:clamp(1.08rem,1.5vw,1.32rem);line-height:1.6;color:var(--muted)}

.eyebrow{
  font-family:var(--font-display);
  font-size:.74rem;font-weight:600;letter-spacing:.3em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.7em;color:var(--yellow-deep);
}
.eyebrow::before{content:"";width:34px;height:1px;background:currentColor;opacity:.6}
.on-dark .eyebrow{color:var(--yellow)}
.pt{font-style:italic;font-family:var(--font-display);font-weight:300}

/* ---------- Layout ---------- */
.wrap{width:min(100% - var(--gut)*2,var(--wrap));margin-inline:auto}
.wrap-wide{width:min(100% - var(--gut)*2,1500px);margin-inline:auto}
section{position:relative}
.sect{padding-block:clamp(72px,11vw,150px)}
.sect-tight{padding-block:clamp(52px,7vw,96px)}
.on-dark{background:var(--ink);color:var(--cream)}
.on-dark .lead,.on-dark p{color:rgba(250,245,236,.68)}
.on-dark h1,.on-dark h2,.on-dark h3{color:var(--cream)}
.grid{display:grid;gap:clamp(28px,4vw,64px)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* grain */
.grain::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:2;opacity:.05;mix-blend-mode:overlay;
  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'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Scroll progress ---------- */
.progress{position:fixed;top:0;left:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--yellow-deep),var(--yellow));z-index:200;will-change:transform}

/* ---------- Nav ---------- */
.nav{position:fixed;inset:0 0 auto;z-index:150;transition:transform .5s var(--ease),background .4s,backdrop-filter .4s,box-shadow .4s}
.nav-in{display:flex;align-items:center;gap:clamp(16px,3vw,40px);padding-block:clamp(6px,.8vw,11px);transition:padding .4s var(--ease)}
.nav.is-stuck{background:rgba(12,11,9,.88);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);box-shadow:0 1px 0 rgba(254,206,34,.16)}
.nav.is-stuck .nav-in{padding-block:6px}
.nav.is-hidden{transform:translateY(-105%)}
.brand{display:flex;align-items:center;gap:.7rem;margin-right:auto;z-index:2}
.brand img{width:40px;height:auto;transition:transform .5s var(--ease)}
.brand:hover img{transform:rotate(-14deg) scale(1.06)}
.brand-txt{font-family:var(--font-display);font-weight:600;letter-spacing:.22em;font-size:.78rem;text-transform:uppercase;color:var(--cream);line-height:1.2}
.brand-txt small{display:block;font-weight:400;font-size:.62rem;letter-spacing:.36em;opacity:.6}
.nav-links{display:flex;align-items:center;gap:clamp(14px,1.7vw,28px)}
.nav-links a{
  font-family:var(--font-display);font-size:.82rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(250,245,236,.82);position:relative;padding:.35em 0;transition:color .3s
}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--yellow);
  transform:scaleX(0);transform-origin:100% 50%;transition:transform .45s var(--ease)}
.nav-links a:hover{color:var(--yellow)}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:0 50%}
.nav-cta{
  font-family:var(--font-display);font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  background:var(--yellow);color:var(--ink);padding:.8em 1.5em;border-radius:100px;
  transition:transform .4s var(--ease),box-shadow .4s;white-space:nowrap
}
.nav-cta:hover{transform:translateY(-2px);box-shadow:0 10px 26px -10px rgba(254,206,34,.8)}
.burger{display:none;width:44px;height:44px;position:relative;z-index:2;flex:none}
.burger span{position:absolute;left:11px;width:22px;height:1.6px;background:var(--cream);transition:transform .45s var(--ease),opacity .25s}
.burger span:nth-child(1){top:18px}
.burger span:nth-child(2){top:25px}
.nav.is-open .burger span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.nav.is-open .burger span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}

@media (max-width:980px){
  .burger{display:block}
  .nav-links{
    position:fixed;inset:0;flex-direction:column;justify-content:center;gap:clamp(10px,3vh,26px);
    background:var(--ink);padding-bottom:clamp(74px,14vh,132px);
    clip-path:circle(0% at calc(100% - 34px) 34px);
    transition:clip-path .8s var(--ease);
  }
  .nav-links::before{
    content:"";position:absolute;inset:0;background-image:var(--deco);background-size:150px;
    opacity:.11;pointer-events:none
  }
  .nav.is-open .nav-links{clip-path:circle(150% at calc(100% - 34px) 34px)}
  .nav-links a{position:relative;z-index:1;font-size:clamp(1.4rem,7vw,2.4rem);letter-spacing:.02em;
    opacity:0;transform:translateY(22px);transition:opacity .5s,transform .5s}
  .nav.is-open .nav-links a{opacity:1;transform:none;transition-delay:calc(.12s + var(--i,0)*.055s)}
  .nav-links a::after{display:none}
  .nav-cta{
    display:none;position:fixed;left:50%;bottom:clamp(40px,8vh,84px);transform:translateX(-50%);
    z-index:3;white-space:nowrap
  }
  .nav.is-open .nav-cta{display:inline-flex}
  .nav.is-open .nav-cta:hover{transform:translateX(-50%) translateY(-2px)}
}

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--yellow);--fg:var(--ink);
  display:inline-flex;align-items:center;gap:.75em;position:relative;overflow:hidden;isolation:isolate;
  font-family:var(--font-display);font-size:.85rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  background:var(--bg);color:var(--fg);padding:1.08em 2em;border-radius:100px;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),color .35s;
  will-change:transform
}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);
  transform:translateY(101%);transition:transform .55s var(--ease)}
.btn:hover{box-shadow:0 18px 40px -18px rgba(0,0,0,.55);color:var(--yellow)}
.btn:hover::before{transform:translateY(0)}
.btn .ar{transition:transform .45s var(--ease)}
.btn:hover .ar{transform:translateX(5px)}
.btn-ghost{--bg:transparent;--fg:currentColor;box-shadow:inset 0 0 0 1px currentColor}
.btn-ghost::before{background:var(--yellow)}
.btn-ghost:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--yellow)}
.btn-dark{--bg:var(--ink);--fg:var(--cream)}
.btn-dark::before{background:var(--yellow)}
.btn-dark:hover{color:var(--ink)}

.link-u{position:relative;display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-display);
  font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:.84rem;padding-bottom:.25em}
.link-u::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;
  transform-origin:0 50%;transition:transform .5s var(--ease)}
.link-u:hover::after{transform:scaleX(0);transform-origin:100% 50%}

/* ---------- HERO ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  background:var(--ink);color:var(--cream);overflow:hidden;
  padding-top:clamp(82px,10.5vh,124px);padding-bottom:clamp(36px,6vh,70px)
}
.hero-bg{position:absolute;inset:0;z-index:0;background-image:var(--deco);background-size:150px;opacity:.13;
  animation:decoDrift 60s linear infinite}
@keyframes decoDrift{to{background-position:300px 300px}}
.hero-glow{
  position:absolute;z-index:0;width:min(85vw,900px);aspect-ratio:1;border-radius:50%;
  left:var(--mx,50%);top:var(--my,45%);translate:-50% -50%;
  background:radial-gradient(circle,rgba(254,206,34,.22),rgba(254,206,34,.06) 42%,transparent 66%);
  filter:blur(18px);transition:left .9s var(--ease),top .9s var(--ease);pointer-events:none
}
.hero-in{position:relative;z-index:3}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,4vw,60px);align-items:end}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}}

.hero-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.2rem;margin-bottom:clamp(14px,2.2vh,26px)}
.pill{
  font-family:var(--font-display);font-size:.7rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;
  border:1px solid rgba(254,206,34,.45);color:var(--yellow);border-radius:100px;padding:.55em 1.1em;
  backdrop-filter:blur(4px)
}
.hero h1{margin:0}
.hero h1 .ln{display:block;overflow:hidden}
.hero h1 .ln > span{display:block;transform:translateY(105%) rotate(4deg);opacity:0}
.is-ready .hero h1 .ln > span{
  transform:none;opacity:1;
  transition:transform 1.15s var(--ease) calc(.15s + var(--i)*.11s),opacity .9s ease calc(.15s + var(--i)*.11s)
}
.hero h1 em{font-style:normal;color:var(--yellow);position:relative;display:inline-block}
.hero-sub{max-width:44ch;margin-top:clamp(16px,2.4vh,28px);font-size:clamp(1rem,1.25vw,1.18rem);color:rgba(250,245,236,.7)}
.hero-actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:clamp(20px,3vh,34px)}
.hero-fade{opacity:0;transform:translateY(26px)}
.is-ready .hero-fade{opacity:1;transform:none;transition:opacity .9s ease var(--d,.7s),transform 1s var(--ease) var(--d,.7s)}

.hero-visual{position:relative;justify-self:end;width:100%;max-width:560px}
.hero-shot{position:relative;border-radius:260px 260px 18px 18px;overflow:hidden;
  box-shadow:0 60px 110px -50px rgba(0,0,0,.9);
  clip-path:inset(0 0 100% 0)}
.is-ready .hero-shot{clip-path:inset(0 0 0 0);transition:clip-path 1.5s var(--ease) .5s}
.hero-shot img{width:100%;height:clamp(330px,54svh,600px);object-fit:cover;object-position:52% 38%;transform:scale(1.14);
  transition:transform 1.8s var(--ease) .5s}
.is-ready .hero-shot img{transform:scale(1)}
@media (max-width:900px){
  .hero-visual{max-width:none;margin-top:clamp(30px,6vh,54px)}
  .hero-shot{border-radius:180px 180px 14px 14px}
  .hero-shot img{height:auto;aspect-ratio:5/4;object-position:52% 42%}
}

/* rotierendes Siegel */
.seal{position:absolute;right:-16px;bottom:-26px;width:clamp(104px,13vw,146px);aspect-ratio:1;z-index:4;
  display:grid;place-items:center;filter:drop-shadow(0 12px 28px rgba(0,0,0,.5))}
.seal svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 26s linear infinite}
.seal .seal-core{width:56%;height:56%;background:var(--yellow);border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:700;font-size:.58rem;letter-spacing:.06em;color:var(--ink);text-align:center;line-height:1.1}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Ticker ---------- */
.ticker{background:var(--yellow);color:var(--ink);overflow:hidden;padding-block:.85rem;
  border-block:1px solid rgba(12,11,9,.12)}
.ticker-dark{background:var(--ink);color:var(--yellow);border-color:rgba(254,206,34,.2)}
.ticker-track{display:flex;width:max-content;animation:marq 38s linear infinite}
.ticker-rev .ticker-track{animation-direction:reverse}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-track span{font-family:var(--font-display);font-weight:600;font-size:clamp(.95rem,1.7vw,1.25rem);
  letter-spacing:.2em;text-transform:uppercase;padding-inline:1.3rem;display:flex;align-items:center;gap:1.3rem;white-space:nowrap}
.ticker-track span::after{content:"";width:7px;height:7px;background:currentColor;transform:rotate(45deg);flex:none}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- Reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(34px);
  transition:opacity .95s ease var(--d,0s),transform 1.05s var(--ease) var(--d,0s)}
[data-reveal].in{opacity:1;transform:none}
[data-reveal="left"]{transform:translateX(-38px)}
[data-reveal="right"]{transform:translateX(38px)}
[data-reveal="scale"]{transform:scale(.94)}
[data-reveal="mask"]{opacity:1;transform:none}
[data-reveal="mask"] > img{clip-path:inset(0 0 100% 0);transition:clip-path 1.35s var(--ease) var(--d,0s)}
[data-reveal="mask"].in > img{clip-path:inset(0 0 0 0)}
[data-reveal="char"]{opacity:1;transform:none}
.split .ln{display:block;overflow:hidden}
.split .ln>span{display:block;transform:translateY(105%);transition:transform 1.1s var(--ease) calc(var(--d,0s) + var(--i)*.085s)}
.split.in .ln>span{transform:none}

/* ---------- Intro / Konzept ---------- */
.intro{background:var(--cream);position:relative;overflow:clip}
.intro-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(34px,6vw,90px);align-items:center}
@media (max-width:900px){.intro-grid{grid-template-columns:1fr}}
.intro-copy p + p{margin-top:1.1em}
.intro-media{position:relative}
.intro-media .fig-a{border-radius:2px;overflow:hidden;box-shadow:0 40px 80px -46px rgba(12,11,9,.6)}
.intro-media .fig-a img{aspect-ratio:4/5;object-fit:cover;width:100%}
.intro-media .fig-b{position:absolute;right:-6%;bottom:-9%;width:52%;border:8px solid var(--cream);
  box-shadow:0 30px 60px -34px rgba(12,11,9,.65);overflow:hidden}
.intro-media .fig-b img{aspect-ratio:1/1;object-fit:cover;width:100%}
@media (max-width:560px){.intro-media .fig-b{width:56%;right:-2%;border-width:6px}}

.wordmark{
  position:absolute;left:50%;translate:-50% 0;bottom:clamp(10px,2vw,30px);z-index:0;pointer-events:none;
  font-family:var(--font-display);font-weight:600;text-transform:uppercase;letter-spacing:-.05em;
  font-size:clamp(3.4rem,13.5vw,11rem);line-height:.8;color:transparent;
  -webkit-text-stroke:1px rgba(12,11,9,.09);white-space:nowrap
}
.on-dark .wordmark{-webkit-text-stroke-color:rgba(254,206,34,.11)}
.sect.on-dark{overflow:clip}
.sect.on-dark > .wrap,.sect.on-dark > .wrap-wide{position:relative;z-index:1}

/* ---------- Feature / Genusswelt ---------- */
.head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:clamp(20px,4vw,60px);
  align-items:end;margin-bottom:clamp(38px,5vw,72px)}
@media (max-width:820px){.head{grid-template-columns:1fr;gap:20px}}
.head .eyebrow{margin-bottom:1.1rem}

.cards{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(16px,2vw,26px)}
@media (min-width:700px){
  .cards{grid-template-columns:repeat(6,minmax(0,1fr))}
  .cards > *{grid-column:span 3}
  .cards > :nth-child(5){grid-column:span 6}
}
@media (min-width:1100px){
  .cards > :nth-child(-n+3){grid-column:span 2}
  .cards > :nth-child(n+4){grid-column:span 3}
}
.card{
  position:relative;overflow:hidden;background:var(--ink-2);color:var(--cream);
  border-radius:3px;isolation:isolate;min-height:clamp(340px,42vw,440px);display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(22px,2.4vw,32px);
  transition:transform .7s var(--ease),box-shadow .7s var(--ease)
}
.card::before{content:"";position:absolute;inset:0;z-index:-2;background-image:var(--img);background-size:cover;background-position:center;
  transform:scale(1.03);transition:transform 1.2s var(--ease),filter .8s}
.card::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(12,11,9,.15) 0%,rgba(12,11,9,.5) 48%,rgba(12,11,9,.93) 100%);
  transition:background .7s}
.card:hover{transform:translateY(-7px);box-shadow:0 40px 70px -40px rgba(12,11,9,.8)}
.card:hover::before{transform:scale(1.12)}
.card:hover::after{background:linear-gradient(180deg,rgba(12,11,9,.05) 0%,rgba(227,176,0,.3) 40%,rgba(12,11,9,.95) 100%)}
.card-n{position:absolute;top:clamp(18px,2vw,26px);left:clamp(22px,2.4vw,32px);font-family:var(--font-display);
  font-size:.72rem;font-weight:600;letter-spacing:.24em;color:var(--yellow)}
.card h3{margin-bottom:.5rem;font-size:clamp(1.4rem,2.1vw,1.85rem)}
.card p{font-size:.95rem;line-height:1.6;color:rgba(250,245,236,.74);
  max-height:0;opacity:0;overflow:hidden;transition:max-height .7s var(--ease),opacity .5s}
.card:hover p,.card:focus-within p{max-height:12em;opacity:1}
@media (hover:none){.card p{max-height:12em;opacity:1}}
.card .tag{display:inline-flex;align-items:center;gap:.5em;font-family:var(--font-display);font-size:.7rem;
  font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--yellow);margin-top:1rem}

/* ---------- Editorial split ---------- */
.split-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(30px,5vw,84px);align-items:center}
@media (max-width:900px){.split-row{grid-template-columns:1fr}}
.split-row.rev .sr-media{order:2}
@media (max-width:900px){.split-row.rev .sr-media{order:0}}
.sr-media{position:relative;overflow:hidden}
.sr-media img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 1.4s var(--ease)}
.sr-media:hover img{transform:scale(1.05)}
.sr-copy p+p{margin-top:1.05em}
.sr-copy .btn{margin-top:clamp(22px,3vw,34px)}

/* Zahlen-Liste */
.facts{list-style:none;padding:0;margin-top:clamp(26px,3vw,38px);display:grid;gap:0}
.facts li{display:grid;grid-template-columns:auto 1fr;gap:1.2rem;align-items:baseline;
  padding-block:1rem;border-top:1px solid rgba(12,11,9,.13)}
.on-dark .facts li{border-color:rgba(250,245,236,.14)}
.facts li:last-child{border-bottom:1px solid rgba(12,11,9,.13)}
.facts-row{margin-top:clamp(48px,6vw,84px)}
@media (min-width:760px){
  .facts-row{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(24px,3vw,56px)}
  .facts-row li{grid-template-columns:1fr;gap:.55rem;border-bottom:0;padding-top:1.4rem}
  .facts-row li:last-child{border-bottom:0}
  .facts-row b{min-width:0}
}
.on-dark .facts li:last-child{border-color:rgba(250,245,236,.14)}
.facts b{font-family:var(--font-display);font-size:clamp(1.7rem,3vw,2.4rem);font-weight:500;color:var(--yellow-deep);
  letter-spacing:-.03em;line-height:1;min-width:2.6em}
.on-dark .facts b{color:var(--yellow)}
.facts li > span{font-size:.97rem;line-height:1.5}
.facts b span{font:inherit;color:inherit;letter-spacing:inherit}

/* ---------- Galerie (horizontal) ---------- */
.gal{overflow:hidden;padding-bottom:clamp(40px,6vw,70px)}
.gal-track{display:flex;gap:clamp(12px,1.6vw,22px);overflow-x:auto;scroll-snap-type:x mandatory;
  padding-inline:var(--gut);padding-bottom:1.4rem;cursor:grab;
  scrollbar-width:thin;scrollbar-color:var(--yellow) rgba(250,245,236,.12)}
.gal-track.drag{cursor:grabbing;scroll-snap-type:none}
.gal-track::-webkit-scrollbar{height:3px}
.gal-track::-webkit-scrollbar-track{background:rgba(250,245,236,.12)}
.gal-track::-webkit-scrollbar-thumb{background:var(--yellow)}
.gal-item{flex:0 0 clamp(250px,32vw,430px);scroll-snap-align:center;position:relative;overflow:hidden;
  border-radius:2px;user-select:none}
.gal-item img{width:100%;aspect-ratio:3/4;object-fit:cover;transition:transform 1.2s var(--ease),filter .8s;
  filter:saturate(.92)}
.gal-item:hover img{transform:scale(1.06);filter:saturate(1.1)}
.gal-item figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.5rem 1.3rem .95rem;
  background:linear-gradient(transparent,rgba(12,11,9,.88));color:var(--cream);
  font-family:var(--font-display);font-size:.76rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase}
.gal-hint{display:flex;align-items:center;gap:.65rem;margin-top:1.4rem;padding-inline:var(--gut);
  font-family:var(--font-display);font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;opacity:.5}

/* ---------- Kaffee-Sektion ---------- */
.steam{position:absolute;left:50%;top:6%;translate:-50% 0;width:120px;height:130px;pointer-events:none;z-index:3;opacity:.55}
.steam i{position:absolute;bottom:0;width:8px;height:100%;border-radius:50%;
  background:linear-gradient(transparent,rgba(250,245,236,.5));filter:blur(7px);
  animation:steam 4.6s ease-in-out infinite}
.steam i:nth-child(1){left:26%;animation-delay:0s}
.steam i:nth-child(2){left:48%;animation-delay:1s;height:88%}
.steam i:nth-child(3){left:68%;animation-delay:2.1s;height:76%}
@keyframes steam{
  0%{opacity:0;transform:translateY(16px) scaleX(.7)}
  35%{opacity:.85}
  100%{opacity:0;transform:translateY(-34px) scaleX(1.5) skewX(-9deg)}
}

/* ---------- Events ---------- */
.evt{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:clamp(14px,1.8vw,22px);
  margin-top:clamp(30px,4vw,50px)}
.evt-item{border:1px solid rgba(250,245,236,.16);padding:clamp(22px,2.4vw,30px);border-radius:3px;position:relative;
  overflow:hidden;transition:border-color .5s,transform .6s var(--ease),background .5s}
.evt-item::before{content:"";position:absolute;inset:auto auto 0 0;width:100%;height:2px;background:var(--yellow);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .6s var(--ease)}
.evt-item:hover{transform:translateY(-6px);border-color:rgba(254,206,34,.45);background:rgba(254,206,34,.05)}
.evt-item:hover::before{transform:scaleX(1)}
.evt-item h3{font-size:1.2rem;margin-bottom:.45rem}
.evt-item p{font-size:.93rem;line-height:1.6}
.evt-ico{width:34px;height:34px;margin-bottom:1.1rem;color:var(--yellow)}

/* ---------- Blog-Teaser ---------- */
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));gap:clamp(20px,2.6vw,34px)}
.post{display:flex;flex-direction:column;background:var(--white);border-radius:3px;overflow:hidden;
  box-shadow:0 2px 0 rgba(12,11,9,.06);transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.post:hover{transform:translateY(-6px);box-shadow:0 34px 60px -38px rgba(12,11,9,.55)}
.post-img{overflow:hidden;background:var(--cream-2)}
.post-img img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform 1.2s var(--ease)}
.post:hover .post-img img{transform:scale(1.06)}
.post-body{padding:clamp(20px,2.4vw,30px);display:flex;flex-direction:column;gap:.75rem;flex:1}
.post-meta{font-family:var(--font-display);font-size:.7rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--yellow-deep)}
.post h3{font-size:clamp(1.25rem,2vw,1.55rem)}
.post p{font-size:.95rem;line-height:1.62;color:var(--muted)}
.post .link-u{margin-top:auto;padding-top:.6rem}

/* ---------- Kontakt ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(34px,5vw,80px)}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
.cdl{display:grid;gap:0;margin-top:clamp(22px,3vw,34px)}
.cdl > div{padding-block:1.15rem;border-top:1px solid rgba(250,245,236,.15);
  display:grid;grid-template-columns:8.5rem 1fr;gap:1rem;align-items:baseline}
.cdl > div:last-child{border-bottom:1px solid rgba(250,245,236,.15)}
.cdl dt{font-family:var(--font-display);font-size:.72rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--yellow)}
.cdl dd{margin:0;font-size:1.02rem;line-height:1.55}
.cdl a:hover{color:var(--yellow)}
@media (max-width:560px){.cdl > div{grid-template-columns:1fr;gap:.3rem}}
.contact-card{background:rgba(250,245,236,.04);border:1px solid rgba(250,245,236,.14);border-radius:3px;
  padding:clamp(26px,3vw,40px);align-self:start;position:relative;overflow:hidden}
.contact-card::after{content:"";position:absolute;inset:auto -30% -55% auto;width:75%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(254,206,34,.16),transparent 68%)}
.contact-card h3{margin-bottom:.8rem}
.contact-card p{font-size:.97rem}
.contact-card .btn{margin-top:1.5rem}

/* ---------- Footer ---------- */
.foot{background:var(--ink);color:var(--cream);padding-block:clamp(52px,6vw,84px) clamp(26px,3vw,36px);position:relative;overflow:hidden}
.foot-top{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,.8fr));gap:clamp(28px,4vw,60px);
  padding-bottom:clamp(34px,4vw,54px);border-bottom:1px solid rgba(250,245,236,.14)}
@media (max-width:820px){.foot-top{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}
.foot-brand img{width:64px;margin-bottom:1.2rem}
.foot-brand p{font-size:.95rem;max-width:34ch}
.foot h4{font-family:var(--font-display);font-size:.74rem;font-weight:600;letter-spacing:.24em;
  text-transform:uppercase;color:var(--yellow);margin-bottom:1.15rem}
.foot ul{list-style:none;padding:0;display:grid;gap:.6rem}
.foot ul a{font-size:.95rem;color:rgba(250,245,236,.72);transition:color .3s,padding-left .35s var(--ease);display:inline-block}
.foot ul a:hover{color:var(--yellow);padding-left:.4rem}
.foot-bot{display:flex;flex-wrap:wrap;gap:.9rem 1.8rem;align-items:center;justify-content:space-between;
  padding-top:clamp(20px,2.4vw,28px);font-size:.82rem;color:rgba(250,245,236,.5)}
.foot-bot nav{display:flex;flex-wrap:wrap;gap:1.2rem}
.foot-bot a:hover{color:var(--yellow)}
.foot-claim{font-family:var(--font-display);font-size:clamp(2.4rem,9vw,7rem);font-weight:600;text-transform:uppercase;
  letter-spacing:-.04em;line-height:.85;color:transparent;-webkit-text-stroke:1px rgba(254,206,34,.22);
  margin-top:clamp(30px,4vw,48px);text-align:center;white-space:nowrap;overflow:hidden}

/* ---------- Legal / Blog Artikel-Typo ---------- */
.page-head{background:var(--ink);color:var(--cream);padding-top:clamp(112px,14vh,168px);
  padding-bottom:clamp(48px,7vw,90px);position:relative;overflow:hidden}
.page-head .hero-bg{opacity:.1}
.page-head .eyebrow{margin-bottom:1.2rem}
.prose{max-width:74ch;font-size:1.02rem;line-height:1.78}
.prose h2{font-size:clamp(1.45rem,2.6vw,2rem);margin-top:2.6em;margin-bottom:.7em;letter-spacing:-.025em}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:clamp(1.15rem,1.8vw,1.35rem);margin-top:2em;margin-bottom:.55em;font-weight:600}
.prose p{margin-bottom:1.15em}
.prose ul,.prose ol{margin:0 0 1.3em;padding-left:1.25em;display:grid;gap:.5em}
.prose li{line-height:1.7}
.prose li::marker{color:var(--yellow-deep)}
.prose a{color:var(--ink);border-bottom:1px solid var(--yellow);transition:background .3s}
.prose a:hover{background:var(--yellow-soft)}
.prose strong{font-weight:600}
.prose hr{border:0;border-top:1px solid rgba(12,11,9,.14);margin:2.4em 0}
.prose address{font-style:normal;line-height:1.8}
.todo{background:var(--yellow-soft);border-left:3px solid var(--yellow-deep);padding:.15em .5em;
  font-family:var(--font-body);font-size:.92em;font-weight:600;color:#7a5c00;display:inline-block}

.art-hero{max-width:1100px;margin-inline:auto}
.art-hero img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:3px}
.art-cap{margin-top:.9rem;font-size:.84rem;line-height:1.55;color:var(--muted);display:flex;flex-wrap:wrap;gap:.4rem 1rem}
.art-cap .cr{opacity:.75}
.art-src{margin-top:2.6em;padding-top:1.4em;border-top:1px solid rgba(12,11,9,.14);font-size:.86rem;color:var(--muted)}
.backlink{display:inline-flex;align-items:center;gap:.6em;margin-top:clamp(34px,4vw,54px);
  font-family:var(--font-display);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:.8rem}
.backlink:hover{color:var(--yellow-deep)}

/* ---------- 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}
  [data-reveal]{opacity:1!important;transform:none!important}
  [data-reveal] > img{clip-path:none!important}
  .hero h1 .ln>span,.split .ln>span{transform:none!important;opacity:1!important}
  .hero-fade{opacity:1!important;transform:none!important}
  .hero-shot{clip-path:none!important}
  .hero-shot img{transform:none!important}
}

/* ==========================================================================
   SIGNATURE MOTION
   Intro-Vorhang · Cursor · Azulejo-Flip · Tilt · Scroll-Timeline · Drift
   Alles degradiert sauber: ohne JS bleibt die Seite lesbar,
   bei prefers-reduced-motion bleibt sie ruhig.
   ========================================================================== */

:root{
  --intro:1.12s;
  --deco-ink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140' viewBox='0 0 140 140'%3E%3Cg fill='none' stroke='%230C0B09' stroke-width='1.1' stroke-linecap='round'%3E%3Cpath d='M0 140 L70 0 L140 140'/%3E%3Cpath d='M0 0 L70 140 L140 0'/%3E%3Cpath d='M-35 140 L35 0 L105 140'/%3E%3Cpath d='M35 140 L105 0 L175 140'/%3E%3Ccircle cx='70' cy='70' r='26'/%3E%3Ccircle cx='0' cy='70' r='26'/%3E%3Ccircle cx='140' cy='70' r='26'/%3E%3C/g%3E%3C/svg%3E");
}
html.no-intro{--intro:0s}

/* ---------- Intro-Vorhang (nur Startseite, einmal pro Sitzung) ---------- */
.intro-cur{
  position:fixed;inset:0;z-index:9998;overflow:hidden;pointer-events:none;
  animation:icGone 0s linear 2.35s forwards
}
html.no-intro .intro-cur{display:none}
@keyframes icGone{to{visibility:hidden}}

.ic-panels{position:absolute;inset:0;display:flex}
.ic-panels i{
  flex:1 1 0;position:relative;background:var(--ink);
  animation:icLift 1s var(--ease) forwards;animation-delay:calc(1.02s + var(--n,0)*.07s)
}
.ic-panels i::after{
  content:"";position:absolute;inset:0;background-image:var(--deco);background-size:150px;opacity:.14
}
@keyframes icLift{to{transform:translateY(-101%)}}

.ic-core{
  position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:clamp(1rem,2.4vh,1.6rem);animation:icOut .5s var(--ease) .92s forwards
}
@keyframes icOut{to{opacity:0;transform:translateY(-18px)}}
.ic-logo{width:clamp(76px,9vw,112px);height:auto;opacity:0;animation:icPop .95s var(--ease) .08s forwards}
@keyframes icPop{from{opacity:0;transform:scale(.55) rotate(-24deg)}to{opacity:1;transform:none}}
.ic-word{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.55em;
  font-family:var(--font-display);font-weight:600;text-transform:uppercase;
  letter-spacing:.28em;font-size:clamp(.68rem,1.5vw,.9rem);color:var(--cream);margin:0
}
.ic-word span{opacity:0;transform:translateY(16px);animation:icUp .75s var(--ease) forwards;
  animation-delay:calc(.3s + var(--n,0)*.09s)}
.ic-word span:last-child{color:var(--yellow)}
@keyframes icUp{to{opacity:1;transform:none}}
.ic-bar{display:block;width:min(46vw,188px);height:2px;background:rgba(250,245,236,.18);overflow:hidden;border-radius:2px}
.ic-bar i{display:block;height:100%;background:var(--yellow);transform:scaleX(0);transform-origin:0 50%;
  animation:icBar .95s var(--ease-io) .04s forwards}
@keyframes icBar{to{transform:scaleX(1)}}

/* Hero wartet, bis der Vorhang oben ist */
.is-ready .hero h1 .ln > span{
  transition:transform 1.15s var(--ease) calc(var(--intro) + .15s + var(--i)*.11s),
             opacity .9s ease calc(var(--intro) + .15s + var(--i)*.11s)
}
.is-ready .hero-fade{
  transition:opacity .9s ease calc(var(--intro) + var(--d,.7s)),
             transform 1s var(--ease) calc(var(--intro) + var(--d,.7s))
}
.is-ready .hero-shot{transition:clip-path 1.5s var(--ease) calc(var(--intro) + .45s)}
.hero-shot img{transition:transform 1.9s var(--ease) calc(var(--intro) + .45s)}

/* ---------- Licht-Sweep über „NATA." ---------- */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  @media (prefers-reduced-motion:no-preference){
    .hero h1 em{
      color:transparent;
      background-image:linear-gradient(104deg,var(--yellow) 0 42%,#FFF4CE 50%,var(--yellow) 58% 100%);
      background-size:320% 100%;background-position:130% 0;
      -webkit-background-clip:text;background-clip:text;
      animation:natShine 7s ease-in-out calc(var(--intro) + 2s) infinite
    }
    @keyframes natShine{0%,100%{background-position:130% 0}42%,58%{background-position:-30% 0}}
  }
}

/* ---------- Azulejo-Kachelband (3D-Flip beim Scrollen) ---------- */
.tiles{
  display:flex;overflow:hidden;background:var(--ink);
  height:clamp(46px,5.6vw,88px);perspective:900px
}
.tiles i{
  flex:0 0 clamp(46px,5.6vw,88px);height:100%;
  background-color:var(--ink);background-image:var(--deco);background-size:cover;background-position:center;
  transform:rotateY(94deg);transform-origin:0% 50%;opacity:0;
  transition:transform .9s var(--ease) calc(var(--n,0)*.045s),opacity .45s ease calc(var(--n,0)*.045s)
}
.tiles i:nth-child(even){background-color:var(--yellow);background-image:var(--deco-ink)}
.tiles.in i{transform:none;opacity:1}

/* ---------- Ticker: driftet zusätzlich mit dem Scroll ---------- */
.ticker-drift{will-change:transform}

/* ---------- Galerie: Fokus-Skalierung am Bahn-Mittelpunkt ---------- */
.gal-item{transform:scale(calc(.925 + var(--f,1)*.075));transition:transform .55s var(--ease)}
.gal-item img{filter:saturate(calc(.5 + var(--f,1)*.5));transition:transform 1.2s var(--ease),filter .55s}
.gal-item:hover img{transform:scale(1.06);filter:saturate(1.12)}

/* ---------- 3D-Tilt für Karten ---------- */
.card,.evt-item{transform-style:preserve-3d}
.card.tilting,.evt-item.tilting{transition:transform .2s ease-out,box-shadow .5s var(--ease),border-color .5s,background .5s}

/* ---------- Eigener Cursor (nur Maus, nur ohne reduced-motion) ---------- */
.cursor{position:fixed;top:0;left:0;z-index:300;pointer-events:none;display:none;opacity:0;transition:opacity .35s}
html.has-cursor .cursor{display:block}
html.has-cursor.cursor-on .cursor{opacity:1}
.cursor-ring{
  position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;
  border:1px solid var(--yellow);display:grid;place-items:center;
  transition:width .38s var(--ease),height .38s var(--ease),margin .38s var(--ease),
             background .38s,border-color .38s
}
.cursor-ring b{
  font-family:var(--font-display);font-size:.54rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);opacity:0;transition:opacity .28s;white-space:nowrap
}
html.cursor-lg .cursor-ring{width:64px;height:64px;margin:-32px 0 0 -32px;background:rgba(254,206,34,.16);border-color:rgba(254,206,34,.5)}
html.cursor-label .cursor-ring{width:88px;height:88px;margin:-44px 0 0 -44px;background:var(--yellow);border-color:var(--yellow)}
html.cursor-label .cursor-ring b{opacity:1}

/* ---------- Zurück nach oben ---------- */
.totop{
  position:fixed;right:clamp(16px,2.4vw,30px);bottom:clamp(16px,2.4vw,30px);z-index:140;
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  background:var(--yellow);color:var(--ink);box-shadow:0 16px 34px -16px rgba(0,0,0,.65);
  opacity:0;transform:translateY(22px) scale(.86);pointer-events:none;
  transition:opacity .45s,transform .55s var(--ease),box-shadow .4s
}
.totop.show{opacity:1;transform:none;pointer-events:auto}
.totop:hover{transform:translateY(-4px)}
.totop::before{
  content:"";position:absolute;inset:-5px;border-radius:50%;
  background:conic-gradient(var(--yellow) calc(var(--p,0)*1%),rgba(254,206,34,.22) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px))
}
.totop svg{width:19px;height:19px;position:relative;z-index:1}

/* ---------- Scroll-getriebene Bewegung (CSS Scroll Timelines) ---------- */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .sr-media img,.intro-media .fig-a img,.post-img img{
      animation:objDrift linear both;animation-timeline:view();animation-range:entry 0% exit 100%
    }
    @keyframes objDrift{from{object-position:50% 30%}to{object-position:50% 70%}}

    .wordmark{animation:wmDrift linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    @keyframes wmDrift{from{translate:-59% 0}to{translate:-41% 0}}

    .foot-claim{animation:fcDrift linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    @keyframes fcDrift{from{translate:4% 0}to{translate:-4% 0}}

    .seal{animation:sealRise linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    @keyframes sealRise{from{translate:0 26px}to{translate:0 -26px}}
  }
}

/* ---------- Reduced motion: alles Neue still ---------- */
@media (prefers-reduced-motion:reduce){
  .intro-cur{display:none!important}
  .cursor,.totop{display:none!important}
  .tiles i{transform:none!important;opacity:1!important}
  .gal-item{transform:none!important}
  .hero h1 em{color:var(--yellow)!important;background:none!important;animation:none!important}
}

/* Siegel reagiert weich auf den Zeiger */
.seal{transition:transform .55s var(--ease)}