/* Hanken Grotesk, selbst gehostet (kein Google-Server) */
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:300 800;font-display:swap;src:url(../fonts/hanken-grotesk-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:"Hanken Grotesk";font-style:normal;font-weight:300 800;font-display:swap;src:url(../fonts/hanken-grotesk-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}
:root{
  --bg:#f7f6f3; --bg2:#efeee9; --ink:#131210; --ink-soft:#3f3d38; --muted:#6f6b63; --faint:#a7a299;
  --dark:#121110; --on-dark:#f2f0ec; --on-dark-mut:rgba(242,240,236,.56);
  --line:rgba(19,18,16,0.15); --line-soft:rgba(19,18,16,0.08);
  --accent:#159c0b; --neon:#22d613;
  --f:"Hanken Grotesk",system-ui,-apple-system,"Helvetica Neue",sans-serif;
  --pad:clamp(18px,4vw,60px);
  --maxw:1680px;
  --e-out:cubic-bezier(0.22,1,0.36,1);
  --e-soft:cubic-bezier(0.16,1,0.3,1);
  --e-move:cubic-bezier(0.25,1,0.5,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:clamp(80px,12vh,110px)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:var(--f);color:var(--ink);background:var(--bg);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
::selection{background:var(--ink);color:var(--bg)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
/* Ein Mass fuer alle Sektionen: 44 px am Handy, 89 px am Schreibtisch.
   Daraus ergibt sich zwischen zwei Sektionen immer derselbe Abstand. */
.sec{padding-block:clamp(44px,6.2vw,92px)}

/* headline system: mixed weights, tight */
h1,h2,h3{font-weight:800;letter-spacing:-0.03em;line-height:0.94;text-transform:uppercase}
.lt{font-weight:300;letter-spacing:-0.02em}
.hl{font-weight:800}
.sup{font-weight:300;font-size:0.42em;vertical-align:super;letter-spacing:0}

/* editorial labels */
/* Die Teile bleiben als Ganzes zusammen, sonst zerreisst „Kant-ART" am Handy. */
/* Ein einziges Mass zwischen Zeile und Ueberschrift, ueberall gleich.
   Vorher stand es als Einzelwert in jeder Sektion (22, 20, 18, 16, 14 px). */
.eyebrow{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:0.72rem;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--ink);margin-bottom:clamp(16px,1.8vw,26px)}
.eyebrow > span:not(.ln){white-space:nowrap}
.eyebrow .ln{width:clamp(28px,4vw,64px);height:1px;background:var(--ink)}
.lbl{font-size:0.68rem;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted)}
.num{font-variant-numeric:tabular-nums}

/* links / buttons */
.arw{display:inline-flex;align-items:center;gap:10px;font-size:0.78rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;position:relative;padding-bottom:4px}
.arw::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%;background:currentColor;transform:scaleX(1);transform-origin:left;transition:transform .4s var(--e-move)}
.arw svg{width:16px;height:16px;transition:transform .3s var(--e-move)}
@media(hover:hover){.arw:hover::after{transform:scaleX(0);transform-origin:right}.arw:hover svg{transform:translateX(5px)}}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 28px;font-weight:700;font-size:0.78rem;letter-spacing:0.08em;text-transform:uppercase;border-radius:100px;transition:transform .3s var(--e-out),background-color .3s,color .3s,border-color .3s}
.btn--fill{background:var(--ink);color:var(--bg)}
.btn--line{border:1.5px solid var(--line)}
.btn:active{transform:scale(.97)}
@media(hover:hover){.btn--fill:hover{background:#000}.btn--line:hover{border-color:var(--ink);background:var(--ink);color:var(--bg)}}

/* works stay in colour; only photos (.bw) go monochrome */
.ph{overflow:hidden;background:var(--bg2)}
.ph img{width:100%;height:100%;object-fit:cover;transition:filter .7s var(--e-move),transform 1.2s var(--e-soft)}
.bw img{filter:grayscale(1) contrast(1.03)}
@media(hover:hover){.bw:hover img{filter:grayscale(0)}}
/* Auf Touch-Geraeten gibt es kein Hover: dort waeren die Fotos sonst fuer
   immer grau. Deshalb zeigen sie sich dort gleich in Farbe. */
/* Ohne Mauszeiger gibt es kein Hover. Statt die Fotos dauerhaft farbig zu
   zeigen, faerben sie sich, waehrend sie durchs Bild laufen: dieselbe
   Bewegung wie am Schreibtisch, nur vom Scrollen ausgeloest. */
@media(hover:none){.bw.im-blick img{filter:none}}

/* ---- masthead ---- */
.top{position:fixed;top:0;left:0;right:0;z-index:90;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:clamp(16px,1.9vw,27px) var(--pad);color:#615d54;transition:background-color .4s,backdrop-filter .4s,color .35s}
.top.solid{background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:saturate(150%) blur(16px)}
.top__l{display:flex;align-items:center;gap:16px}
.top__burger{display:inline-flex;flex-direction:column;gap:5px;padding:6px 2px;justify-self:start}
.top__burger span{width:25px;height:1.5px;background:currentColor;transition:transform .35s var(--e-out),opacity .25s}
.top__wm{display:flex;align-items:center;justify-self:center}
.top__wm img{height:26px;width:auto;display:block}
.top__cta{display:inline-flex;font-size:0.84rem;justify-self:end;white-space:nowrap}
.top.on-dark{color:var(--on-dark)}
.top.on-dark .top__burger span{background:var(--on-dark)}
.top.on-dark.solid{background:color-mix(in srgb,var(--dark) 72%,transparent)}

/* ---- hero ---- */
/* overflow-x:clip haelt den herausragenden Faecher im Rahmen, ohne die
   Seite breiter zu machen; senkrecht bleibt alles sichtbar. */
.hero{min-height:100svh;padding-top:clamp(108px,14vh,168px);padding-bottom:clamp(96px,15vh,220px);display:flex;flex-direction:column;overflow-x:clip}
.hero__head{position:relative}
.hero h1{font-size:clamp(2.6rem,9vw,9.5rem);line-height:0.9}
.hero h1 .line{display:block;overflow:hidden}
.hero h1 .line>span{display:inline-block;transform:translateY(103%);transition:transform 1.05s var(--e-soft)}
.hero.in h1 .line>span{transform:translateY(0)}
.hero h1 .line:nth-child(2)>span{transition-delay:.09s}
.hero__sub{position:absolute;right:0;top:clamp(6px,1vw,14px);max-width:22ch;text-align:right;color:var(--muted);font-size:0.98rem;opacity:0;transition:opacity .8s ease .5s}
.hero.in .hero__sub{opacity:1}
/* Bis Tablet hochkant ist der Hero so hoch wie sein Inhalt. Mit voller
   Bildschirmhoehe blieb unten Luft uebrig, die als riesiger Abstand zur
   naechsten Sektion erschien (gemessen 164 bis 327 px). */
@media(max-width:820px){
  .hero__sub{position:static;text-align:left;max-width:38ch;margin-top:20px}
  .hero{min-height:auto;padding-bottom:clamp(24px,3vw,40px)}
}
/* fanned arc */
.fan{margin-top:clamp(26px,3.5vw,54px);display:flex;justify-content:center;align-items:flex-start}
.fan figure{width:clamp(220px,29vw,440px);flex-shrink:0;overflow:hidden;background:var(--bg2);box-shadow:0 34px 70px -42px rgba(19,18,16,.42);opacity:0;transition:opacity .9s var(--e-soft)}
.hero.in .fan figure{opacity:1}
.hero.in .fan .c{transition-delay:.12s}
.hero.in .fan .r{transition-delay:.24s}
.fan figure img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4;transform:scale(1.05)}
.fan .c{z-index:3}
.fan .l{z-index:2;margin-right:-12%;transform:rotate(-16deg);transform-origin:bottom right}
.fan .r{z-index:2;margin-left:-12%;transform:rotate(16deg);transform-origin:bottom left}
/* Am Handy faechert derselbe Aufbau wie am Schreibtisch, nur enger
   geschachtelt: das mittlere Werk bleibt so gross wie bisher (72vw), die
   beiden seitlichen duerfen ueber den Rand hinauslaufen. Der Koerper
   schneidet waagerecht ab, es entsteht also keine Scrollleiste. */
@media(max-width:640px){
  .fan{margin-top:30px;align-items:flex-start}
  .fan .c{width:72vw}
  .fan .l,.fan .r{width:52vw;margin-top:13%}
  .fan .l{margin-right:-22%}
  .fan .r{margin-left:-22%}
}
/* Auf flachen Schirmen (iPhone SE und aehnliche) wuerde der Faecher unter
   den Bildschirmrand rutschen. Dort faellt er kleiner aus; die Breite der
   Seite bleibt unberuehrt. */
@media(max-width:640px) and (max-height:700px){
  .fan .c{width:58vw}
  .fan .l,.fan .r{width:42vw;margin-top:11%}
}
@media(prefers-reduced-motion:reduce){.fan figure{opacity:1!important}}

/* ---- about ---- */
.about__grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:clamp(30px,6vw,90px)}
.about__labels{display:flex;gap:clamp(24px,3vw,44px)}
.about__labels span{font-size:0.72rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink)}
.about__labels span.y{color:var(--muted)}
/* Vorspann wie die Fliesstexte der anderen Sektionen: 16 px. Gross ist in
   diesem Block die Liste darunter, denn das sind die Angaben, die jemand
   wirklich braucht. */
.about__lead{font-size:1rem;line-height:1.55;color:var(--muted);font-weight:400;max-width:52ch}
.stats{margin-top:clamp(40px,6vw,80px);display:grid;gap:0}
.stats div{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding-block:clamp(16px,1.8vw,24px);border-top:1px solid var(--line)}
.stats div:last-child{border-bottom:1px solid var(--line)}
.stats .n{font-size:clamp(1.6rem,2.6vw,2.4rem);font-weight:700;letter-spacing:-0.02em}
.stats .k{font-size:0.74rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted)}
@media(max-width:820px){.about__grid{grid-template-columns:1fr;gap:26px}}

/* ---- feature (glastechnik) ---- */
.feat__imgs{display:grid;grid-template-columns:1.2fr 0.8fr;grid-template-rows:1fr 1fr;gap:clamp(10px,1vw,16px);aspect-ratio:16/10;margin-bottom:clamp(36px,5vw,64px)}
.feat__imgs .ph{overflow:hidden}
.feat__imgs .ph:nth-child(1){grid-column:1;grid-row:1 / 3}
.feat__imgs .ph:nth-child(2){grid-column:2;grid-row:1}
.feat__imgs .ph:nth-child(3){grid-column:2;grid-row:2}
.feat__foot{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:end}
.feat h2{font-size:clamp(2.4rem,6.5vw,6.5rem)}
.feat__meta{color:var(--muted)}
.feat__meta .when{display:block;font-size:0.74rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink);margin-bottom:16px}
.feat__cta{margin-top:26px}
@media(max-width:820px){.feat__foot{grid-template-columns:1fr;gap:20px}.feat__imgs{grid-template-columns:1fr;grid-template-rows:none;aspect-ratio:auto;gap:14px}.feat__imgs .ph{grid-column:1!important;grid-row:auto!important;aspect-ratio:3/2}}

/* ---- cinematic break ---- */
.cine{position:relative;height:82vh;overflow:hidden;background:#000}
.cine img{width:100%;height:120%;object-fit:cover;filter:grayscale(1) contrast(1.05);will-change:transform}
.cine__q{position:absolute;inset:auto 0 0 0;padding:clamp(60px,10vw,150px) clamp(24px,5vw,70px) clamp(24px,5vw,70px);color:#fff;background:linear-gradient(to top,rgba(10,9,8,.72),rgba(10,9,8,0))}
.galerie__imgs{margin-top:clamp(44px,5vw,78px)!important;margin-bottom:0!important}
/* Marco (light) */
.marco__intro{display:grid;grid-template-columns:0.85fr 1.15fr;gap:clamp(28px,5vw,72px);align-items:center}
.marco__fig{aspect-ratio:4/5}
.marco__fig img{width:100%;height:100%;object-fit:cover}
.marco h2{font-size:clamp(2.2rem,5vw,4.6rem)}
.marco__role{color:var(--accent);font-size:0.74rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;margin:12px 0 clamp(18px,2.4vw,26px)}
.marco__lead{font-size:clamp(1.15rem,1.7vw,1.5rem);line-height:1.4;font-weight:300;margin-bottom:18px}
.marco p{color:var(--muted);text-transform:none;max-width:54ch;margin-bottom:14px}
.marco .vita{margin-top:clamp(20px,2.6vw,30px);display:grid}
.marco .vita div{display:grid;grid-template-columns:8em 1fr;gap:16px;padding-block:11px;border-top:1px solid var(--line-soft);font-size:0.9rem}
.marco .vita div:last-child{border-bottom:1px solid var(--line-soft)}
.marco .vita .k{color:var(--muted);font-size:0.66rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;padding-top:3px}
.marco__video{margin-top:clamp(40px,5vw,72px)}
@media(max-width:820px){.marco__intro{grid-template-columns:1fr;gap:26px}.marco__fig{order:-1}}
/* Gastkünstler (dark) */
.event{background:var(--dark);color:var(--on-dark);padding-block:clamp(56px,8vw,120px)}
.event .eyebrow{color:var(--on-dark)}
.event h2{color:var(--on-dark);font-size:clamp(2.2rem,5vw,4.6rem)}
.event__intro{color:var(--on-dark-mut);max-width:52ch;margin-top:clamp(34px,5vw,60px);text-transform:none;font-weight:400}
.event__grid{display:grid;grid-template-columns:minmax(0,13fr) minmax(0,8fr);grid-template-areas:"head poster" "meta poster";grid-template-rows:auto 1fr;column-gap:clamp(40px,6vw,110px)}
.event__head{grid-area:head;padding-top:clamp(4px,1vw,14px)}
.event__head h2{font-size:clamp(2.6rem,6vw,6.2rem)}
.event__poster{grid-area:poster;align-self:start}
/* Solange kein Plakat da ist: graue Flaeche im Format des Plakats. */
.event__poster--leer{aspect-ratio:1122/1589;display:grid;place-items:center;background:#1b1916;border:1px solid rgba(242,240,236,.12)}
.event__poster--leer span{text-align:center;line-height:1.5;font-size:0.72rem;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:rgba(242,240,236,.34)}
.event__meta{grid-area:meta;align-self:end;display:grid;margin-top:clamp(36px,4vw,60px)}
.erow{display:grid;grid-template-columns:9em minmax(0,1fr);gap:20px;padding-block:clamp(15px,1.6vw,22px);border-top:1px solid rgba(242,240,236,.14);align-items:baseline}
.erow:last-child{border-bottom:1px solid rgba(242,240,236,.14)}
.erow .k{font-size:0.68rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--on-dark-mut)}
.erow .v{font-size:clamp(1.05rem,1.5vw,1.4rem);font-weight:500}
.erow .v a{border-bottom:1px solid rgba(242,240,236,.24);transition:border-color .25s}
@media(hover:hover){.erow .v a:hover{border-color:var(--neon)}}
.btn--light{background:var(--on-dark);color:var(--dark)}
@media(hover:hover){.btn--light:hover{background:#fff}}
@media(max-width:820px){.event__poster.event__poster--leer{max-width:none;aspect-ratio:4/5}.event__grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "poster" "meta";grid-template-rows:auto}.event__poster{margin-top:clamp(28px,6vw,40px);max-width:520px}.event__meta{margin-top:30px}.erow{grid-template-columns:6.5em minmax(0,1fr)}}
/* Shop teaser: straight overlapping deck */
/* Raster wie .feat__foot: der Text rechts beginnt auf derselben Linie wie
   in „Die Galerie", „Der Kuenstler" und „Glastechnik". */
.shop__head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:end;margin-bottom:clamp(34px,4.6vw,62px)}
.shop__head h2{font-size:clamp(2.4rem,6vw,5.4rem)}
.shop__intro{color:var(--muted);text-transform:none;padding-bottom:6px}
/* --deckH ist die Hoehe der Buehne UND die Grenze fuer das Werk darin.
   Querformate waren vorher breiter als der Bildschirm und wurden an den
   Seiten abgeschnitten; jetzt begrenzen Hoehe und Breite gemeinsam. */
.deck{position:relative;--deckH:clamp(430px,54vw,690px);--peek:clamp(24px,5vw,74px);height:var(--deckH);cursor:pointer;user-select:none;touch-action:pan-y;overflow:hidden}
.deck:focus-visible{outline:2px solid var(--accent);outline-offset:8px}
.deck::before,.deck::after{content:"";position:absolute;top:0;bottom:0;width:calc(var(--peek) + clamp(28px,4vw,56px));z-index:4;pointer-events:none}
.deck::before{left:0;background:linear-gradient(90deg,var(--bg) 12%,transparent)}
.deck::after{right:0;background:linear-gradient(270deg,var(--bg) 12%,transparent)}
.deck__card{position:absolute;top:50%;overflow:hidden;background:var(--bg2);box-shadow:0 44px 84px -48px rgba(19,18,16,.6);transition:transform .6s var(--e-soft),opacity .55s var(--e-soft),filter .55s;will-change:transform}
.deck__card img{display:block;aspect-ratio:var(--r,1);width:calc(var(--deckH) * var(--r,1));max-width:calc(100vw - 2 * var(--peek) - clamp(16px,4vw,150px));height:auto;max-height:var(--deckH);object-fit:cover;pointer-events:none}
.deck__card.is-side{filter:brightness(.8) saturate(.92)}
/* Raster statt Flex: die Pfeile mit dem Zaehler stehen fest in der Mitte.
   Als Flex-Zeile wanderten sie mit, sobald ein Werktitel laenger war. */
.deck__bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;margin-top:clamp(24px,2.8vw,38px);border-top:1px solid var(--line);padding-top:20px}
.deck__bar .btn{justify-self:end}
.deck__cap{min-width:0}
.deck__t{font-weight:700;text-transform:uppercase;font-size:clamp(1.05rem,1.6vw,1.4rem);letter-spacing:-0.01em}
.deck__s{color:var(--muted);font-size:0.82rem;margin-top:4px}
.deck__nav{display:flex;align-items:center;gap:16px;justify-self:center}
.deck__count{font-weight:700;font-size:0.9rem;font-variant-numeric:tabular-nums;min-width:56px;text-align:center}
.deck__arrow{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--ink);transition:color .25s,background-color .25s,border-color .25s}
.deck__arrow svg{width:18px;height:18px}
@media(hover:hover){.deck__arrow:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}}
@media(max-width:820px){.shop__head{grid-template-columns:1fr;gap:20px;align-items:start}.shop__intro{max-width:none}.deck{--deckH:clamp(360px,92vw,540px);--peek:clamp(12px,4.5vw,44px)}.deck__bar{grid-template-columns:auto minmax(0,1fr);gap:16px 20px}.deck__cap{grid-column:1 / -1;min-width:0}.deck__bar .btn{min-width:0;text-align:center}.deck__nav{justify-self:start}.deck__bar .btn{justify-self:end}}
.tech-video{position:relative;margin-top:clamp(34px,4.5vw,64px);aspect-ratio:16/9;overflow:hidden;background:#111}
/* Am Handy ist 16:9 nur ein schmaler Streifen. Hochkant wird daraus eine
   Buehne; der Ausschnitt wandert dabei in die Mitte des Bildes. */
@media(max-width:640px){
  .tech-video{aspect-ratio:4/5}
  /* Am Handy nur das grosse Prozessbild, in derselben Breite und demselben
     Format wie die Raumfotos in „Die Galerie". Das kleine Detailbild daneben
     wuerde auf der schmalen Flaeche untergehen. */
  .glas__body .glas__stack{position:static;aspect-ratio:auto;max-width:none}
  .glas__body .glas__a{position:static;width:100%;aspect-ratio:3/2}
  .glas__body .glas__b{display:none}
  .tech-video__poster{object-position:50% 50%}

  .tech-video__vid{object-position:38% 50%}
}
.tech-video__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#111}
.tech-video__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.02);z-index:1;transition:opacity .5s var(--e-soft)}
.tech-video::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(12,11,9,.55),rgba(12,11,9,0) 42%);transition:opacity .5s}
.tech-video__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;width:clamp(64px,7vw,94px);height:clamp(64px,7vw,94px);border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;cursor:pointer;transition:transform .35s var(--e-out),opacity .45s,background-color .3s}
.tech-video__play svg{width:32%;height:32%;margin-left:6%}
.tech-video__lbl{position:absolute;left:clamp(16px,2vw,26px);bottom:clamp(14px,2vw,22px);z-index:2;color:#fff;font-size:0.7rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;transition:opacity .45s}
@media(hover:hover){.tech-video__play:hover{transform:translate(-50%,-50%) scale(1.06)}}
.tech-video.playing .tech-video__poster,.tech-video.playing::after,.tech-video.playing .tech-video__play,.tech-video.playing .tech-video__lbl{opacity:0;pointer-events:none}

/* ---- Glastechnik-Section ---- */
.glas__top{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:end;margin-bottom:clamp(40px,5.5vw,84px)}
.glas__top h2{font-size:clamp(2.6rem,7vw,6.6rem);line-height:0.9}
.glas__intro{color:var(--muted);text-transform:none;font-size:0.98rem;line-height:1.6;padding-bottom:clamp(4px,0.8vw,10px)}
.glas__body{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,80px);align-items:center}
.glas__stack{position:relative;aspect-ratio:1/1}
.glas__a,.glas__b{position:absolute;overflow:hidden;background:var(--bg2)}
.glas__a{top:0;left:0;width:84%;aspect-ratio:3/2;box-shadow:0 34px 68px -44px rgba(19,18,16,.5);z-index:1}
.glas__b{bottom:0;right:0;width:46%;aspect-ratio:4/5;box-shadow:0 42px 74px -36px rgba(19,18,16,.62);z-index:2}
.glas__a img,.glas__b img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--e-soft),filter .6s var(--e-soft)}
@media(hover:hover){.glas__a:hover img,.glas__b:hover img{transform:scale(1.04)}}
.glas__meta{color:var(--muted)}
.glas__meta>p{font-size:0.98rem;line-height:1.65;max-width:none}
/* Der Knopf steht rechts am Rand der Spalte, buendig mit dem Text. */
.glas__cta{display:flex;width:fit-content;margin-top:clamp(30px,3.6vw,46px);margin-left:auto}
@media(max-width:820px){.glas__top{grid-template-columns:1fr;gap:16px}.glas__body{grid-template-columns:1fr;gap:clamp(30px,8vw,52px)}.glas__stack{width:100%;max-width:460px;margin-inline:auto}.glas__cta{width:100%;justify-content:center}}
.cine__q blockquote{font-size:clamp(1.4rem,3.2vw,3rem);font-weight:300;line-height:1.14;letter-spacing:-0.02em;max-width:24ch}
.cine__q cite{display:block;margin-top:16px;font-style:normal;font-size:0.72rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:rgba(255,255,255,.7)}

/* ---- selected works (horizontal) ---- */
.works__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:clamp(30px,4vw,50px)}
.works__head h2{font-size:clamp(2.4rem,6vw,6rem)}
.works__head p{color:var(--muted);max-width:46ch;font-size:0.98rem}
.rail{display:flex;gap:clamp(16px,1.6vw,26px);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:20px;cursor:grab;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail.drag{cursor:grabbing;scroll-snap-type:none}
.wk{flex:0 0 auto;width:clamp(230px,26vw,360px);scroll-snap-align:start}
.wk__fig{overflow:hidden;background:var(--bg2);cursor:pointer;position:relative;aspect-ratio:4/5}
.wk__fig img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--e-soft)}
.wk__fig::after{content:"";position:absolute;inset:0;background:rgba(19,18,16,0);transition:background .4s}
@media(hover:hover){.wk:hover .wk__fig img{transform:scale(1.045)}.wk:hover .wk__fig::after{background:rgba(19,18,16,.06)}}
.wk__cap{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding-top:14px}
.wk__t{font-weight:700;font-size:0.98rem;letter-spacing:-0.01em}
.wk__s{color:var(--muted);font-size:0.76rem;margin-top:3px}
.wk__n{color:var(--faint);font-size:0.72rem;font-weight:700;letter-spacing:0.08em}
.works__foot{margin-top:clamp(24px,3vw,40px);display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:22px;color:var(--muted)}

/* ---- artist (dark) ---- */
.artist{background:var(--dark);color:var(--on-dark)}
.artist__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:center}
.artist__fig{aspect-ratio:4/5;overflow:hidden;background:#000}
.artist__fig img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04);transition:filter .7s}
@media(hover:hover){.artist__fig:hover img{filter:grayscale(0)}}
.artist h2{font-size:clamp(2.2rem,5vw,4.6rem);color:var(--on-dark)}
.artist .role{color:var(--on-dark-mut);font-size:0.74rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;margin:14px 0 clamp(22px,3vw,32px)}
.artist__lead{font-size:clamp(1.15rem,1.7vw,1.5rem);line-height:1.4;font-weight:300;margin-bottom:20px}
.artist p{color:var(--on-dark-mut);max-width:52ch;margin-bottom:16px}
.artist .vita{margin-top:clamp(24px,3vw,34px);display:grid}
.artist .vita div{display:grid;grid-template-columns:8em 1fr;gap:16px;padding-block:12px;border-top:1px solid rgba(242,240,236,.16);font-size:0.9rem}
.artist .vita div:last-child{border-bottom:1px solid rgba(242,240,236,.16)}
.artist .vita .k{color:var(--on-dark-mut);font-size:0.66rem;font-weight:700;letter-spacing:0.12em;text-transform:uppercase;padding-top:3px}
@media(max-width:820px){.artist__grid{grid-template-columns:1fr;gap:30px}.artist__fig{order:-1}}

/* ---- visit ---- */
.visit__head{margin-bottom:clamp(34px,5vw,60px)}
.visit__head h2{font-size:clamp(2.4rem,6vw,6rem)}
/* Beide Spalten gleich hoch: das Formular steht sonst kuerzer da als die
   Angaben daneben. Der Platz geht an das Nachrichtenfeld. */
.visit__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:stretch}
.visit__rows{display:grid}
.vrow{display:grid;grid-template-columns:9em minmax(0,1fr);gap:20px;padding-block:clamp(15px,1.6vw,20px);border-top:1px solid var(--line);align-items:baseline}
.vrow:last-child{border-bottom:1px solid var(--line)}
.vrow .k{font-size:0.68rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--muted)}
/* Dieselbe Stufe wie die Veranstaltungszeilen: Datenzeilen sind in beiden
   Sektionen das Wichtige. */
.vrow .v{font-size:clamp(1.05rem,1.5vw,1.4rem);font-weight:500}
.vrow .v a{border-bottom:1px solid var(--line);transition:border-color .25s}
@media(hover:hover){.vrow .v a:hover{border-color:var(--accent)}}
.visit__form{display:flex;flex-direction:column;gap:14px;background:var(--bg2);padding:clamp(22px,3vw,36px);border-radius:4px}
.field--wachsen{flex:1}
.field--wachsen textarea{height:100%}
.field{display:grid;gap:6px}
.field label{font-size:0.66rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted)}
.field label .req,.field__lbl .req{color:var(--accent)}
.field__lbl{font-size:0.66rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--muted)}
.field input,.field textarea,.field select{font-family:inherit;font-size:0.98rem;color:var(--ink);background:var(--bg);border:1.5px solid var(--line);border-radius:3px;padding:13px 14px;transition:border-color .25s}
.field textarea{resize:vertical;min-height:88px}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--ink)}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)}
.visit__form .row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.visit__form button{justify-content:center;margin-top:2px}
.form-note{font-size:0.74rem;color:var(--muted);text-align:center}
.form-note a{border-bottom:1px solid var(--line)}
.form-note.is-ok{color:var(--accent);font-weight:600}
.form-note.is-err{color:#b3261e;font-weight:600}
.visit__form .falle{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.visit__form{position:relative}
.visit__form [hidden]{display:none!important}
.choice{display:flex;flex-wrap:wrap;gap:8px}
.choice label{position:relative;display:block}
.choice input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.choice span{display:block;font-size:0.8rem;font-weight:600;color:var(--ink-soft);background:var(--bg);border:1.5px solid var(--line);border-radius:100px;padding:11px 18px;transition:color .25s,background-color .25s,border-color .25s}
.choice input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.choice input:focus-visible+span{outline:2px solid var(--accent);outline-offset:3px}
@media(hover:hover){.choice input:not(:checked):hover+span{border-color:var(--ink)}}
.field--bad input,.field--bad select,.field--bad textarea,.field--bad .choice span{border-color:#b3261e}
.field .hint{font-size:0.76rem;color:var(--muted)}
@media(max-width:820px){.visit__grid{grid-template-columns:1fr}.visit__form .row{grid-template-columns:1fr}}

.nur-klein{display:none}
@media(max-width:560px){.nur-gross{display:none}.nur-klein{display:inline}.deck__bar .btn{white-space:nowrap}}

/* ---- Mobil: Rhythmus --------------------------------------------
   Am Schreibtisch sind einzelne Sektionen bewusst enger gekoppelt (Galerie
   und Kuenstler, Shop und Besuch). Am Handy fielen diese Ausnahmen
   unterschiedlich stark aus, die sichtbaren Luecken schwankten zwischen 66
   und 180 px. Hier gilt deshalb ein Mass fuer alle. */
@media(max-width:640px){

}

/* ---- Mobil: Faktenzeilen -----------------------------------------
   Aufbau wie am Desktop: links der Wert, rechts die Beschriftung. Damit
   es am Handy sauber aussieht, steht die Beschriftung rechtsbuendig (sonst
   flattert sie beim Umbruch) und die Spalte der Beschriftung wird schmaler,
   damit die Anschrift in eine Zeile passt. */
@media(max-width:640px){
  .stats .k{text-align:right}
  .stats div{gap:14px}
  .vrow,.erow{grid-template-columns:4.6em minmax(0,1fr);gap:12px}
  .vrow .k,.erow .k{font-size:0.58rem;letter-spacing:0.1em}
  .vrow .v{font-size:0.94rem}
  /* Die Postleitzahl faellt am Handy weg, sonst bricht die Anschrift um.
     Im Kartenlink und am Desktop steht sie weiter drin. */
  .plz{display:none}
  .erow .v{font-size:1.02rem}
}

/* ---- Mobil: Bedienbarkeit ----------------------------------------
   Fingerflaechen auf mindestens 44 px, Eingabefelder auf 16 px (darunter
   zoomt iOS beim Antippen in die Seite hinein), Beschriftung der Kopfzeile
   kleiner, damit sie einzeilig bleibt. */
@media(max-width:820px){
  .top__burger{padding:12px 10px;margin-left:-10px;min-height:44px;justify-content:center}
  .top__cta{font-size:0.74rem}
  .top__cta svg{width:14px;height:14px}
  .menu__close{padding:12px 0 12px 12px;margin-right:-12px}
  .foot ul a,.menu__foot span{display:inline-block;padding-block:7px}
  .foot ul{gap:4px}
  .foot__bottom a{display:inline-block;padding-block:6px}
  .field input,.field textarea,.field select{font-size:16px}
  .vrow .v a,.erow .v a{display:inline-block;padding-block:4px}
  /* Groessere Fingerflaeche, ohne das Aussehen zu veraendern: eine
     unsichtbare Flaeche um Logo, Kopfzeilen-Link und Zurueck-Link. */
  .top__wm,.top__cta,.legal__back .arw{position:relative}
  .top__wm::after,.top__cta::before,.legal__back .arw::before{content:"";position:absolute;inset:-12px -10px}
}
@media(max-width:400px){
  .top__cta{font-size:0.68rem;gap:7px}
  .deck__bar .btn{font-size:0.72rem;padding:14px 20px}
  .deck__nav{gap:10px}
}

/* ---- footer ---- */
.foot{background:var(--dark);color:var(--on-dark);padding-top:clamp(50px,7vw,90px);padding-bottom:34px;overflow:hidden}
.foot a{color:var(--on-dark-mut);transition:color .25s}
@media(hover:hover){.foot a:hover{color:var(--on-dark)}}
.foot__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:clamp(24px,4vw,56px)}
.foot__grid p{max-width:32ch;margin-top:14px;font-size:0.92rem;color:var(--on-dark-mut);line-height:1.5}
.foot h4{font-size:0.64rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--on-dark-mut);font-weight:700;margin-bottom:16px}
.foot ul{list-style:none;display:grid;gap:10px;font-size:0.93rem}
/* Nur die Anschrift daempfen: sie ist der einzige Eintrag ohne Link.
   Die Links regelt weiter oben .foot a, die bleiben unberuehrt. */
.foot ul li{color:var(--on-dark-mut)}
.foot__wm{margin-top:clamp(34px,5vw,64px);user-select:none;display:flex;justify-content:center}
.foot__wm img{width:min(94%,1180px);height:auto;display:block}
.foot__bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:clamp(24px,3vw,44px);padding-top:20px;border-top:1px solid rgba(242,240,236,.16);font-size:0.78rem;letter-spacing:0.04em;text-transform:uppercase;color:var(--on-dark-mut)}
@media(max-width:820px){.foot__grid{grid-template-columns:1fr;gap:30px}}

/* reveal */
[data-rev]{opacity:0;transform:translateY(22px);transition:opacity .85s var(--e-soft),transform .85s var(--e-soft)}
[data-rev].in{opacity:1;transform:none}

/* ---- gestaffelte Reveals + Masthead-Load (dezent) ---- */
[data-rev] .stats div,[data-rev] .erow{transform:translateY(18px);transition:transform .85s var(--e-soft)}
[data-rev].in .stats div,[data-rev].in .erow{transform:none}
[data-rev].in .stats div:nth-child(2),[data-rev].in .erow:nth-child(2){transition-delay:.1s}
[data-rev].in .stats div:nth-child(3),[data-rev].in .erow:nth-child(3){transition-delay:.2s}
.top{animation:topIn 1s var(--e-soft) both}
@keyframes topIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){[data-rev] .stats div,[data-rev] .erow{transform:none!important;transition:none}.top{animation:none}}

/* ---- glass sheen (Glastechnik: Licht gleitet über die glänzende Oberfläche) ---- */
.fan figure{position:relative}
.sheen::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .7s var(--e-soft);background:linear-gradient(101deg,transparent calc(var(--sx,50%) - 38%),rgba(255,255,255,.13) var(--sx,50%),transparent calc(var(--sx,50%) + 38%));mix-blend-mode:screen}
@media(hover:hover){.sheen:hover::after{opacity:1}}

/* ---- lightbox (light) ---- */
.lb{position:fixed;inset:0;z-index:300;background:rgba(247,246,243,.92);backdrop-filter:blur(20px) saturate(1.1);-webkit-backdrop-filter:blur(20px) saturate(1.1);display:flex;align-items:center;justify-content:center;padding:clamp(14px,4vw,54px);opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.lb.open{opacity:1;visibility:visible}
.lb__inner{display:grid;grid-template-columns:1fr auto;gap:clamp(22px,3.4vw,60px);align-items:center;max-width:1320px;width:100%;max-height:100%}
.lb__stage{display:flex;align-items:center;justify-content:center;min-height:0}
.lb__frame{position:relative;display:inline-block;line-height:0;max-width:100%;max-height:84vh}
.lb__stage img{max-width:100%;max-height:84vh;width:auto;background:#fff;box-shadow:0 44px 100px -40px rgba(19,18,16,.42);transform:scale(.97);opacity:0;transition:transform .5s var(--e-soft),opacity .5s}
.lb.open .lb__stage img{transform:scale(1);opacity:1}
.lb__side{width:min(320px,74vw);color:var(--ink)}
.lb__side .no{font-size:0.7rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent)}
.lb__side h3{font-size:1.9rem;text-transform:uppercase;letter-spacing:-0.02em;margin:10px 0 16px;line-height:1;color:var(--ink)}
.lb__side .m{color:var(--muted);font-size:0.88rem;border-top:1px solid var(--line);padding-top:14px}
.lb__side .m div{display:flex;justify-content:space-between;gap:12px;padding-block:6px;border-bottom:1px solid var(--line-soft)}
.lb__side .m span:first-child{color:var(--faint);font-size:0.66rem;letter-spacing:0.08em;text-transform:uppercase;font-weight:700;padding-top:2px}
.lb__side .price{color:var(--accent);font-weight:700;margin-top:16px;font-size:0.78rem;letter-spacing:0.06em;text-transform:uppercase}
.lb__side .btn{margin-top:20px;width:100%;justify-content:center}
.lb__nav{position:absolute;top:0;bottom:0;width:14%;display:flex;align-items:center;cursor:pointer;color:rgba(19,18,16,.38);transition:color .25s;z-index:2}
.lb__nav:hover{color:var(--ink)}
.lb__prev{left:0;padding-left:clamp(8px,2vw,26px)}.lb__next{right:0;justify-content:flex-end;padding-right:clamp(8px,2vw,26px)}
.lb__nav svg{width:30px;height:30px}
.lb__close{position:absolute;top:clamp(14px,2.4vw,26px);right:clamp(14px,2.4vw,26px);color:var(--muted);font-size:0.72rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;z-index:3}
.lb__close:hover{color:var(--ink)}
.lb__count{position:absolute;top:clamp(14px,2.4vw,26px);left:clamp(14px,2.4vw,26px);color:rgba(19,18,16,.5);font-size:0.72rem;letter-spacing:0.12em}
@media(max-width:820px){.lb__inner{grid-template-columns:1fr}.lb__side{width:100%;max-width:440px}.lb__side .m{display:none}.lb__side h3{font-size:1.5rem}}

/* ---- overlay menu ---- */
.menu{position:fixed;inset:0;z-index:200;background:var(--dark);color:var(--on-dark);display:flex;flex-direction:column;padding:clamp(16px,3vw,40px);transform:translateY(-101%);transition:transform .6s var(--e-move);visibility:hidden}
.menu.open{transform:none;visibility:visible}
.menu__top{display:flex;justify-content:space-between;align-items:center}
.menu__top .wm img{height:22px;width:auto;display:block}
.menu__close{font-size:0.74rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase}
.menu__links{margin:auto 0;display:grid;gap:4px}
.menu__links a{font-weight:800;font-size:clamp(2.2rem,8vw,5rem);letter-spacing:-0.03em;text-transform:uppercase;line-height:1.02;transition:color .25s,padding-left .35s var(--e-out)}
.menu__links a .lt{font-weight:300}
@media(hover:hover){.menu__links a:hover{color:var(--accent);padding-left:14px}}
.menu__foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--on-dark-mut);font-size:0.8rem;text-transform:uppercase;letter-spacing:0.06em}

@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-rev],.hero h1 .line>span{opacity:1!important;transform:none!important}
}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}