/* John Tonic V2 — ruhig, editorial, dunkel. Die Kunst trägt die Farbe. */
*,*::before,*::after{box-sizing:border-box}
:root{
  --grund:#14110e; --grund2:#1b1712; --hell:#f3efe7; --leise:#a09484;
  --linie:#2e2820; --akzent:#c9a96a;
  --serif:"Fraunces",Georgia,serif; --sans:"Archivo","Segoe UI",system-ui,sans-serif;
  --rand:clamp(20px,5vw,72px);
  color-scheme:dark;
}
html{-webkit-text-size-adjust:100%;scroll-padding-top:90px}

body{margin:0;background:var(--grund);color:var(--hell);
  font-family:var(--sans);font-size:16px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit}

.skip{position:absolute;left:-9999px;top:0;background:var(--hell);color:var(--grund);
  padding:10px 16px;z-index:100}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:2px solid var(--akzent);outline-offset:3px}

/* ---------- Kopf ---------- */
#kopf{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;align-items:center;
  justify-content:space-between;gap:20px;
  padding:18px var(--rand);padding-top:calc(18px + env(safe-area-inset-top,0px));
  pointer-events:none;mix-blend-mode:normal}
#kopf::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,#14110ecc,#14110e00)}
#marke,#kopf nav{position:relative;pointer-events:auto}
#marke{font-size:15px;letter-spacing:.2em;text-decoration:none;line-height:1.3}
#marke span{display:block;font-size:9.5px;letter-spacing:.24em;color:var(--leise);
  text-transform:uppercase;margin-top:3px}
#kopf nav{display:flex;gap:clamp(14px,2.4vw,30px);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase}
#kopf nav a{color:var(--leise);text-decoration:none;transition:color .2s}
#kopf nav a:hover{color:var(--hell)}
@media(max-width:720px){#kopf nav{display:none}}

/* ---------- Hero ---------- */
#hero{position:relative;height:100svh;min-height:520px;overflow:hidden}
#galerie{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-text{position:absolute;left:var(--rand);bottom:clamp(76px,13vh,140px);
  z-index:3;max-width:min(30ch,78vw);pointer-events:none}
#hero::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(105deg,#14110ee0 0%,#14110e9c 26%,#14110e18 46%,transparent 62%)}
@media(max-width:720px){#hero::after{
  background:linear-gradient(to top,#14110eee 0%,#14110eb0 34%,#14110e20 62%,transparent 78%)}}
.hero-text .oben{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--akzent);margin:0 0 14px}
.hero-text h1{font-family:var(--serif);font-weight:300;
  font-size:clamp(38px,6.6vw,86px);line-height:1.02;letter-spacing:-.022em;margin:0;
  text-shadow:0 2px 40px #14110ecc}
.hero-text .unten{margin:20px 0 0;font-size:14px;color:var(--leise);line-height:1.6;
  text-shadow:0 1px 20px #14110e}
.hinweis{position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:3;
  font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--leise);
  display:flex;flex-direction:column;align-items:center;gap:8px}
.hinweis span{width:1px;height:34px;background:linear-gradient(var(--leise),transparent);
  animation:sinken 2.6s ease-in-out infinite}
@keyframes sinken{0%,100%{opacity:.25;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}
@media(prefers-reduced-motion:reduce){.hinweis span{animation:none;opacity:.6}}

/* ---------- Grundraster ---------- */
.sec{padding:clamp(76px,11vw,150px) var(--rand);position:relative}
.label{font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--akzent);
  margin:0 0 18px}
.label.hell{color:var(--akzent)}
.gross{font-family:var(--serif);font-weight:300;font-size:clamp(28px,4.4vw,58px);
  line-height:1.1;letter-spacing:-.02em;margin:0;text-wrap:balance}
.fliess{font-size:clamp(16px,1.35vw,19px);line-height:1.72;color:#ded6c8;
  max-width:54ch;margin:26px 0 0}
.fliess.klein{font-size:15px;color:var(--leise);margin-top:18px}
.quelle{font-size:11.5px;letter-spacing:.1em;color:var(--leise);margin:30px 0 0}
.hell{color:var(--hell)}
.kopfzeile{max-width:64ch;margin-bottom:clamp(38px,5vw,64px)}

/* Reveal: von sichtbarer Ruhelage aus, nie unsichtbar hängend */
.reveal{opacity:0;transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.reveal.da{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
.no-js .reveal{opacity:1;transform:none}

/* ---------- 02 Intro ---------- */
.intro{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(28px,5vw,80px);align-items:center}
.intro-bild img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:2px}
@media(max-width:860px){.intro{grid-template-columns:1fr}}

/* ---------- 03/06 Film ---------- */
.film{min-height:min(88svh,760px);display:grid;place-items:center;overflow:hidden;
  padding-block:clamp(90px,14vw,180px)}
.film.kurz{min-height:min(62svh,540px)}
.film .hintergrund{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:0;filter:saturate(.92)}
.film::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to right,#14110eee,#14110ec4 44%,#14110e70 74%,#14110e4a)}
.film.kurz::after{background:radial-gradient(ellipse 62% 58% at 50% 46%,#14110ec2,#14110e8f 68%,#14110ecc)}
.film-inhalt{position:relative;z-index:2;width:100%;max-width:1180px;margin-inline:auto}
.film-inhalt.mitte{text-align:center;max-width:min(20ch + 18vw,42ch);margin-inline:auto}
.zitat{font-family:var(--serif);font-weight:300;font-size:clamp(22px,3.2vw,40px);
  line-height:1.26;letter-spacing:-.015em;margin:0;text-wrap:balance}

/* ---------- 04 Ein Werk groß ---------- */
.werk-gross{padding-inline:0}
.werk-gross figure{margin:0;display:grid;justify-items:center;gap:22px}
.werk-gross img{max-height:82svh;width:auto;max-width:calc(100% - 2*var(--rand));
  object-fit:contain}
.werk-gross figcaption{display:grid;gap:5px;text-align:center;padding-inline:var(--rand)}
.wt{font-family:var(--serif);font-size:clamp(20px,2.4vw,30px);font-weight:400}
.wm{font-size:12px;letter-spacing:.1em;color:var(--leise);text-transform:uppercase}
.wn{font-size:13px;color:var(--akzent);margin-top:4px}

/* ---------- 05 Story ---------- */
.story{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(30px,5vw,80px);align-items:center}
.weg{list-style:none;padding:0;margin:40px 0 0;display:grid;gap:0}
.weg li{display:grid;grid-template-columns:132px 1fr;gap:18px;padding:18px 0;
  border-top:1px solid var(--linie);align-items:baseline}
.weg li:last-child{border-bottom:1px solid var(--linie)}
.weg b{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--akzent);
  font-weight:500}
.weg span{color:#ded6c8;font-size:15.5px}
.story-bilder{display:grid;gap:14px}
.story-bilder img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:2px}
.story-bilder img:last-child{aspect-ratio:3/2}
@media(max-width:860px){.story{grid-template-columns:1fr}
  .weg li{grid-template-columns:100px 1fr;gap:12px}}

/* ---------- 07 Featured ---------- */
.featured-gitter{display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(16px,2.4vw,34px)}
.fw{margin:0;grid-column:span 6;cursor:zoom-in;background:none;border:0;padding:0;
  color:inherit;font:inherit;text-align:left;display:block;width:100%}
.fw:nth-child(1){grid-column:span 7}
.fw:nth-child(2){grid-column:span 5}
.fw:nth-child(3){grid-column:span 5}
.fw:nth-child(4){grid-column:span 7}
.fw:nth-child(5){grid-column:span 6}
.fw:nth-child(6){grid-column:span 6}
.fw-bild{overflow:hidden;background:#0d0b09;border-radius:2px}
.fw img{width:100%;height:auto;transition:transform .9s cubic-bezier(.22,.61,.36,1)}
.fw:hover img,.fw:focus-visible img{transform:scale(1.028)}
@media(prefers-reduced-motion:reduce){.fw img{transition:none}}
.fw-text{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;margin-top:14px}
.fw-titel{font-family:var(--serif);font-size:clamp(17px,1.7vw,22px)}
.fw-mass{font-size:11px;letter-spacing:.1em;color:var(--leise);text-transform:uppercase}
.fw-note{font-size:11px;letter-spacing:.08em;color:var(--akzent)}
@media(max-width:760px){.featured-gitter>.fw,.featured-gitter>.fw:nth-child(n){grid-column:span 12}}

/* ---------- 08 Aussage ---------- */
.aussage{display:grid;place-items:center;text-align:center;
  padding-block:clamp(90px,15vw,190px);border-top:1px solid var(--linie);
  border-bottom:1px solid var(--linie)}
.gross-aussage{font-family:var(--serif);font-weight:300;
  font-size:clamp(24px,3.8vw,50px);line-height:1.24;letter-spacing:-.018em;
  max-width:22ch;margin:0;text-wrap:balance;color:#e8e0d2}

/* ---------- 09 Alle Arbeiten ---------- */
.alle-gitter{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:clamp(14px,2vw,26px)}
.aw{margin:0;background:none;border:0;padding:0;color:inherit;font:inherit;
  text-align:left;cursor:zoom-in;display:block;width:100%}
.aw-bild{background:#0d0b09;border-radius:2px;overflow:hidden;aspect-ratio:1;
  display:grid;place-items:center}
.aw-bild img{width:100%;height:100%;object-fit:contain;
  transition:transform .7s cubic-bezier(.22,.61,.36,1)}
.aw:hover .aw-bild img,.aw:focus-visible .aw-bild img{transform:scale(1.04)}
@media(prefers-reduced-motion:reduce){.aw-bild img{transition:none}}
.aw-titel{display:block;font-size:14px;margin-top:11px;letter-spacing:-.005em}
.aw-mass{display:block;font-size:10.5px;letter-spacing:.1em;color:var(--leise);
  text-transform:uppercase;margin-top:2px;font-variant-numeric:tabular-nums}

/* ---------- 10 Ausstellungen ---------- */
.ausstellungen{list-style:none;padding:0;margin:0}
.ausstellungen li{display:grid;grid-template-columns:76px minmax(0,1.5fr) minmax(0,1fr) 92px;
  gap:clamp(12px,2vw,30px);align-items:baseline;padding:20px 0;
  border-top:1px solid var(--linie)}
.ausstellungen li:last-child{border-bottom:1px solid var(--linie)}
.a-jahr{font-size:12px;letter-spacing:.12em;color:var(--akzent);
  font-variant-numeric:tabular-nums}
.a-titel{font-family:var(--serif);font-size:clamp(16px,1.6vw,21px)}
.a-ort{font-size:14px;color:var(--leise)}
.a-art{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--leise);
  text-align:right}
@media(max-width:760px){
  .ausstellungen li{grid-template-columns:60px 1fr;gap:4px 14px}
  .a-ort{grid-column:2}.a-art{grid-column:2;text-align:left;margin-top:2px}}

/* ---------- 11 Kontakt ---------- */
.kontakt{background:var(--grund2);border-top:1px solid var(--linie)}
.kontakt-innen{max-width:760px}
.kontakt dl{display:grid;grid-template-columns:120px 1fr;gap:14px 26px;
  margin:44px 0 0;font-size:15.5px}
.kontakt dt{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--leise);padding-top:5px}
.kontakt dd{margin:0;color:#ded6c8}
.kopierbar{cursor:copy;border-bottom:1px dotted var(--linie);transition:border-color .2s}
.kopierbar:hover{border-bottom-color:var(--akzent)}
.kopierbar.kopiert{color:var(--akzent);border-bottom-color:var(--akzent)}
@media(max-width:600px){.kontakt dl{grid-template-columns:1fr;gap:3px}
  .kontakt dt{padding-top:14px}}

/* ---------- Fuß ---------- */
#fuss{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px;
  padding:26px var(--rand);padding-bottom:calc(26px + env(safe-area-inset-bottom,0px));
  border-top:1px solid var(--linie);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--leise)}

/* ---------- Lupe ---------- */
.lupe{position:fixed;inset:0;z-index:60;background:#0b0907f2;
  display:grid;place-items:center;padding:clamp(16px,4vw,54px);
  padding-top:calc(clamp(16px,4vw,54px) + env(safe-area-inset-top,0px))}
.lupe[hidden]{display:none}
.lupe img{max-width:100%;max-height:82svh;object-fit:contain}
.lupe-text{margin:16px 0 0;font-size:12px;letter-spacing:.1em;color:var(--leise);
  text-transform:uppercase;text-align:center}
.lupe-zu{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:16px;
  width:44px;height:44px;font-size:26px;line-height:1;background:none;border:0;
  color:var(--hell);cursor:pointer}