/* ═══════════════════════════════════════════════════════════════════════════
   RMW — photography.roger-wahl.de
   "Schnitt". See PROJECT_NOTES §4 for the rules and for why each ground is
   the colour it is. Single-theme by intent: every colour is painted, nothing
   is inherited from the viewer's environment.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --leaf:#0B1F11;   /* aus IMG_5233 gerechnet     */
  --dark:#060F09;   /* derselbe Ton, weiter unten */
  --acid:#DBF40A;   /* Akzent, aus IMG_4726       */
  --bone:#E6F0D8;
  --sage:#9BB58A;
  --grot:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --pad:clamp(20px,4.4vw,72px);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--dark); color:var(--bone);
  font-family:var(--mono); font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{display:block; max-width:100%}
a{color:inherit}
:focus-visible{outline:2px solid var(--acid); outline-offset:4px}

.huge{
  font-family:var(--grot); font-variation-settings:"wdth" 62,"wght" 900;
  font-weight:900; text-transform:uppercase; letter-spacing:-.045em;
  line-height:.8; margin:0;
}
.cut{color:#FFFFFF; mix-blend-mode:difference; pointer-events:none}
.tag{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(230,240,216,.66);
  font-variant-numeric:tabular-nums;
}
.lede{max-width:54ch; color:var(--sage); font-size:14px; line-height:1.9; margin:0}
.lede b{color:var(--bone); font-weight:400}
.kick{
  font-family:var(--mono); font-size:10px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--acid); margin:0 0 18px;
}

/* ── the magnified band ─────────────────────────────────────────────────────
   --z is the magnification and is a LAYOUT width, not a transform: the
   browser then samples the source at that size and the detail survives.
   --fx/--fy are the focal point, set per image in the admin. A transform
   percentage refers to the element's own box, so translate(-fx,-fy) puts
   exactly that point of the photograph in the middle of the band — which is
   what makes a 3.2x crop land on the animal instead of next to it.
   --dy is written by the scroll handler and nothing else.
   ─────────────────────────────────────────────────────────────────────────── */
.band{position:relative; overflow:hidden; background:#000; isolation:isolate;
  margin-bottom:clamp(8px,1.3vw,18px)}
.band .z{position:absolute; inset:0; overflow:hidden}
.band .z img{
  position:absolute; left:50%; top:50%;
  width:calc(100% * var(--z,1)); height:auto; max-width:none;
  transform:translate3d(calc(-1 * var(--fx,50%)), calc(-1 * var(--fy,50%) + var(--dy,0px)), 0);
  will-change:transform;
}
.band .w{
  position:absolute; inset:0; display:flex; align-items:center;
  padding:0 var(--pad); font-size:clamp(38px,10.5vw,168px); z-index:2;
}
.band .w.r{justify-content:flex-end}
.band .t{position:absolute; right:var(--pad); bottom:8px; z-index:3}
.band .t.l{right:auto; left:var(--pad)}
.band .zoomtag{
  position:absolute; right:var(--pad); top:9px; z-index:3;
  font-family:var(--mono); font-size:9px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--acid); opacity:.85;
  font-variant-numeric:tabular-nums;
}
.band .t.l ~ .zoomtag{right:auto; left:var(--pad)}
.h-xs{height:clamp(78px,11vh,124px)}
.h-s {height:clamp(112px,16vh,180px)}
.h-m {height:clamp(158px,24vh,262px)}
.h-l {height:clamp(220px,34vh,376px)}
.h-kopf{height:clamp(104px,18vh,204px); align-self:center; margin-bottom:0}
.h-schluss{height:clamp(120px,22vh,240px); margin-bottom:0}
.h-schluss .w{justify-content:center}

/* a gap where a photograph is not there yet — this is a CMS */
.fehlt{
  position:absolute; inset:0; display:grid; place-content:center; gap:6px;
  background:repeating-linear-gradient(45deg,#101a12 0 12px,#0c150e 12px 24px);
  text-align:center;
}
.fehlt span{font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--acid)}
.fehlt code{font-family:var(--mono); font-size:12px; color:var(--sage)}

/* ── 00 Kopf ─────────────────────────────────────────────────────────────── */
.kopf{background:var(--leaf); min-height:100svh; display:grid;
  grid-template-rows:1fr auto auto; isolation:isolate}
.kopf .top{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding:var(--pad) var(--pad) 0}
.kopf .bottom{display:flex; justify-content:space-between; align-items:flex-end;
  gap:24px; flex-wrap:wrap; padding:clamp(22px,4vw,54px) var(--pad) var(--pad)}
.kopf .bottom p{margin:0}
.scrollcue{
  font-family:var(--mono); font-size:10px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--acid); display:flex; align-items:center; gap:10px;
}
.scrollcue::after{content:""; width:52px; height:1px; background:var(--acid);
  transform-origin:left; animation:draw 2.6s ease-in-out infinite}
@keyframes draw{0%,100%{transform:scaleX(.25)}50%{transform:scaleX(1)}}

/* a title panel for an area that has no photograph to lead with yet */
.titelblock .mitte{display:grid; place-content:center; padding:0 var(--pad)}
.titelblock .mitte .huge{font-size:clamp(52px,15vw,240px); color:var(--acid)}

/* ── Bereichsnavigation ──────────────────────────────────────────────────── */
.bereiche{background:var(--leaf); padding:clamp(56px,9vw,130px) 0 clamp(50px,8vw,110px)}
.bereiche .head{padding:0 var(--pad) clamp(28px,4vw,54px); display:grid; gap:20px;
  grid-template-columns:minmax(0,1fr) minmax(0,50ch); align-items:end}
.bereiche .head .huge{font-size:clamp(38px,9vw,132px)}
.bereiche .vier{display:grid; gap:1px; background:rgba(230,240,216,.16);
  border-top:1px solid rgba(230,240,216,.16); border-bottom:1px solid rgba(230,240,216,.16);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.bereiche .vier a{
  background:var(--leaf); text-decoration:none; color:var(--bone);
  padding:clamp(20px,3vw,34px) var(--pad); display:grid; gap:9px; align-content:start;
  transition:background .3s;
}
.bereiche .vier a:hover{background:#0F2A17}
.bereiche .vier .kurz{font-family:var(--mono); font-size:9.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--acid)}
.bereiche .vier .nm{font-family:var(--grot);
  font-variation-settings:"wdth" 70,"wght" 800; font-weight:800;
  text-transform:uppercase; font-size:clamp(24px,3.4vw,42px); line-height:.92;
  letter-spacing:-.025em}
.bereiche .vier .lede{font-size:13px; line-height:1.75}

/* ── 01 Bänder ───────────────────────────────────────────────────────────── */
.baender{background:var(--dark); padding:clamp(56px,9vw,132px) 0 clamp(40px,6vw,90px)}
.baender .head{padding:0 var(--pad) clamp(30px,5vw,62px); display:grid; gap:20px;
  grid-template-columns:minmax(0,1fr) minmax(0,54ch); align-items:end}
.baender .head .huge{font-size:clamp(42px,10vw,150px); color:var(--acid)}

/* ── 02 Vorhang ──────────────────────────────────────────────────────────── */
.vorhang{position:relative; height:300vh}
.vorhang .stage{position:sticky; top:0; height:100svh; overflow:hidden;
  display:grid; place-items:center; isolation:isolate}
.vorhang .frame{position:absolute; inset:0; will-change:clip-path;
  clip-path:inset(42% 0% 42% 0%)}
.vorhang .frame img{width:100%; height:100%; object-fit:cover}
.vorhang .w{position:relative; z-index:2; font-size:clamp(40px,11vw,182px);
  text-align:center; will-change:transform}
.vorhang .meta{position:absolute; left:var(--pad); bottom:var(--pad); z-index:3;
  display:grid; gap:5px}
.vorhang .rail{position:absolute; right:var(--pad); top:0; bottom:0; width:1px;
  background:rgba(230,240,216,.18); z-index:3}
.vorhang .rail i{position:absolute; left:-3px; width:7px; height:7px;
  background:var(--acid); display:block; will-change:top}

/* ── 03 Fester Satz ──────────────────────────────────────────────────────── */
.pin{display:grid; background:var(--leaf); isolation:isolate}
.pin > *{grid-area:1/1}
.pin .track{display:grid; gap:clamp(10px,2vw,26px); padding:22vh var(--pad)}
.pin .track figure{margin:0; position:relative}
.pin .track img{width:100%; aspect-ratio:3/2; object-fit:cover}
.pin .track figure:nth-child(2){width:62%; justify-self:end}
.pin .track figure:nth-child(3){width:78%}
.pin .track figure:nth-child(4){width:54%; justify-self:end}
.pin .word{position:sticky; top:0; height:100svh; align-self:start;
  display:grid; place-content:center; padding:0 var(--pad); z-index:4;
  font-size:clamp(26px,6.4vw,96px); text-align:center}

/* ── 04 Die Zahl ─────────────────────────────────────────────────────────── */
.zahl{padding:clamp(58px,9vw,130px) var(--pad)}
.zahl .row{display:grid; gap:clamp(26px,4vw,64px);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); align-items:start}
.zahl .big{font-size:clamp(84px,19vw,300px); color:var(--acid); line-height:.76}
.zahl .big small{display:block; font-family:var(--mono); font-size:11px;
  letter-spacing:.22em; text-transform:uppercase; color:var(--sage);
  margin-top:20px; line-height:1.7; font-variation-settings:normal;
  font-weight:400}
.zahl .facts{display:grid; align-content:start; border-top:1px solid rgba(230,240,216,.22)}
.zahl .facts div{display:flex; justify-content:space-between; gap:18px;
  padding:11px 0; border-bottom:1px solid rgba(230,240,216,.14); font-size:12.5px}
.zahl .facts b{font-weight:400; color:var(--acid); font-variant-numeric:tabular-nums}
.zahl .facts span{color:var(--sage)}

/* ── 05 Wort mit Bild ────────────────────────────────────────────────────── */
.wortbild{background:var(--dark);
  padding:clamp(50px,8vw,120px) var(--pad) clamp(56px,9vw,130px);
  display:grid; gap:clamp(22px,4vw,50px)}
.wortbild .fill{
  font-size:clamp(70px,21.5vw,340px); line-height:.78;
  background-image:var(--src); background-size:cover; background-position:50% 42%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
/* no photograph assigned yet: show the word, do not swallow it */
.wortbild .fill-leer{font-size:clamp(70px,21.5vw,340px); line-height:.78;
  color:var(--acid); opacity:.35}
.wortbild .under{display:grid; gap:16px;
  grid-template-columns:minmax(0,1fr) minmax(0,46ch); align-items:end}

/* ── 06 Rubriken ─────────────────────────────────────────────────────────── */
.sammlung{padding:clamp(56px,9vw,130px) 0 clamp(20px,4vw,60px)}
.sammlung .head{padding:0 var(--pad) clamp(28px,4vw,54px); display:grid; gap:20px;
  grid-template-columns:minmax(0,1fr) minmax(0,50ch); align-items:end}
.sammlung .head .huge{font-size:clamp(38px,9vw,132px); color:var(--acid)}
.sammlung a.row{
  display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center;
  gap:20px; position:relative; overflow:hidden; text-decoration:none;
  color:var(--bone); border-top:1px solid rgba(230,240,216,.16);
  padding:clamp(13px,2.1vw,24px) var(--pad);
}
.sammlung a.row:last-of-type{border-bottom:1px solid rgba(230,240,216,.16)}
.sammlung a.row .peek{position:absolute; inset:0; opacity:0;
  transition:opacity .45s cubic-bezier(.2,.7,.3,1)}
.sammlung a.row .peek img{width:100%; height:100%; object-fit:cover}
.sammlung a.row .nm{
  position:relative; z-index:2; font-family:var(--grot);
  font-variation-settings:"wdth" 72,"wght" 700; font-weight:700;
  text-transform:uppercase; font-size:clamp(21px,4.2vw,54px); line-height:1;
  letter-spacing:-.02em; transition:transform .4s cubic-bezier(.2,.7,.3,1);
}
.sammlung a.row .lt{position:relative; z-index:2}
.sammlung a.row:hover .peek,.sammlung a.row:focus-visible .peek{opacity:.5}
.sammlung a.row:hover .nm,.sammlung a.row:focus-visible .nm{transform:translateX(14px)}

/* ── 07 Schluss ──────────────────────────────────────────────────────────── */
.schluss{background:var(--dark); padding:clamp(56px,9vw,120px) 0 0}
.schluss .grid{display:grid; gap:clamp(22px,4vw,54px);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  padding:0 var(--pad) clamp(40px,6vw,86px)}
.schluss h4{font-family:var(--mono); font-size:10px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--acid); margin:0 0 11px}
.schluss p{margin:0; color:var(--sage); font-size:13.5px; line-height:1.85}
.schluss p b{color:var(--bone); font-weight:400}
.schluss a{text-decoration:none; border-bottom:1px solid var(--acid)}
.colophon{padding:26px var(--pad) 70px; color:#5D7355; font-size:11px;
  line-height:1.9; max-width:96ch; border-top:1px solid rgba(230,240,216,.1)}
.colophon b{color:var(--sage); font-weight:400}

/* ═══ Rubrikseite — hier wird gezeigt, nicht angeschnitten ═════════════════ */
.rub{background:var(--leaf); min-height:100svh}
.rub .top{position:sticky; top:0; z-index:50; display:flex; align-items:center;
  gap:18px; flex-wrap:wrap; padding:13px var(--pad); background:rgba(11,31,17,.94);
  backdrop-filter:blur(12px); border-bottom:1px solid rgba(230,240,216,.16)}
.rub .back{font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--acid); text-decoration:none;
  display:flex; align-items:center; gap:9px}
.rub .back::before{content:""; width:22px; height:1px; background:var(--acid)}
.rub .crumb{font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--sage); margin-left:auto}
.rub .titel{padding:clamp(40px,7vw,96px) var(--pad) clamp(26px,4vw,52px);
  display:grid; gap:22px; grid-template-columns:minmax(0,1fr) minmax(0,50ch);
  align-items:end}
.rub .titel .huge{font-size:clamp(44px,11vw,168px)}
.rub .plates{display:grid; gap:clamp(30px,5vw,84px);
  padding:0 var(--pad) clamp(50px,8vw,120px)}
.rub figure{margin:0; display:grid; gap:12px}
.rub figure img{width:100%; height:auto}
/* the rhythm: every third plate steps back, every fifth moves right */
.rub .plates > figure:nth-child(3n+2){width:min(100%,72%)}
.rub .plates > figure:nth-child(5n+3){width:min(100%,56%); justify-self:end}
.rub .cap{display:flex; gap:10px 26px; flex-wrap:wrap; align-items:baseline}
.rub .cap .sci{font-family:var(--grot); font-variation-settings:"wdth" 80,"wght" 600;
  font-weight:600; font-size:clamp(15px,2vw,22px); text-transform:uppercase;
  letter-spacing:-.01em}
.rub .foot{border-top:1px solid rgba(230,240,216,.16);
  padding:clamp(30px,5vw,60px) var(--pad) clamp(56px,8vw,110px); display:grid; gap:24px}
.rub .siblings{display:flex; flex-wrap:wrap; gap:10px 26px}
.rub .siblings a{font-family:var(--grot); font-variation-settings:"wdth" 76,"wght" 600;
  font-weight:600; text-transform:uppercase; font-size:clamp(14px,2.1vw,22px);
  letter-spacing:-.01em; color:var(--sage); text-decoration:none;
  border-bottom:1px solid transparent; transition:color .25s}
.rub .siblings a:hover{color:var(--acid); border-bottom-color:var(--acid)}
.rub .leer{padding:clamp(30px,6vw,80px) var(--pad); display:grid; gap:18px}

@media (max-width:760px){
  .baender .head,.wortbild .under,.sammlung .head,.rub .titel{grid-template-columns:1fr}
  .pin .track figure:nth-child(n){width:100%}
  .rub .plates > figure:nth-child(n){width:100%}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
  .vorhang .frame{clip-path:inset(0 0 0 0)!important}
}