/* ═══════════════════════════════════════════════════════════════════════════
   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}

/* ── Bildlaufleisten ────────────────────────────────────────────────────────
   Die Voreinstellung des Browsers ist hell und reisst an der Kante ein Loch
   in den dunklen Grund — senkrecht an der Seite, waagerecht unter jedem
   Streifen. Beide werden hier gefasst.

   Der Griff ist SAGE MIT DECKKRAFT, keine neue Farbe: die Palette in §4 ist
   aus den Fotos gerechnet, und eine dazuerfundene Farbe waere die einzige
   ohne Herkunft. Erst beim Zeigen wird er Akzent.

   Zuerst die Standard-Eigenschaften — Chrome kennt sie seit 121 und uebergeht
   dann die -webkit-Regeln von selbst; die bleiben fuer aeltere Fassungen und
   bringen dort zusaetzlich den Hover, den der Standard nicht kann. */
html{
  -webkit-text-size-adjust:100%;
  scrollbar-color:rgba(155,181,138,.42) var(--dark);
  scrollbar-width:thin;
}
::-webkit-scrollbar{width:11px; height:11px}
::-webkit-scrollbar-track{background:var(--dark)}
::-webkit-scrollbar-thumb{background:rgba(155,181,138,.42)}
::-webkit-scrollbar-thumb:hover{background:var(--acid)}
::-webkit-scrollbar-corner{background:var(--dark)}
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;
  /* Sicherheitsnetz gegen einen zu groß gestellten Faktor: bricht ein Wort
     nur dann um, wenn es sonst seitlich aus dem Bild liefe. */
  overflow-wrap:break-word;
}
.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); z-index:2;
  /* Der Faktor darf nie über die Bandhöhe hinauswachsen — sonst schneidet
     das Band das Wort ab. --kappe steht bei jeder Höhenklasse und liegt bei
     rund zwei Dritteln der Bandhöhe, weil .huge mit line-height .8 setzt. */
  font-size:min(calc(clamp(38px,10.5vw,168px) * var(--gr,1)), var(--kappe,999px));
}
.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); --kappe:clamp(52px,7.4vh,84px)}
.h-s {height:clamp(112px,16vh,180px); --kappe:clamp(75px,10.7vh,120px)}
.h-m {height:clamp(158px,24vh,262px); --kappe:clamp(105px,16vh,175px)}
.h-l {height:clamp(220px,34vh,376px); --kappe:clamp(147px,22.7vh,250px)}
.h-kopf{height:clamp(104px,18vh,204px); align-self:center; margin-bottom:0;
  --kappe:clamp(69px,12vh,136px)}
.h-schluss{height:clamp(120px,22vh,240px); margin-bottom:0;
  --kappe:clamp(80px,14.7vh,160px)}
.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 — with an optional photograph behind the word */
.titelblock .mitte{display:grid; place-content:center; padding:0 var(--pad)}
.titelblock .mitte .huge{font-size:calc(clamp(52px,15vw,240px) * var(--gr,1)); color:var(--acid)}
/* Roger, 30.08.2026 (Issue #6): die Riesenschrift soll auf einem Foto liegen
   können. Das Bild wird von seinem Kasten beschnitten, der Bildpunkt sagt
   welcher Ausschnitt — wie beim Vorhang und den Rubrikkacheln. Die Schrift
   trägt dann die vorhandene Klasse .cut (Zeile 58) und wird vom Bild gefärbt;
   deshalb muss die feste Acidfarbe eine Zeile weiter oben zurücktreten.
   .kopf hat bereits isolation:isolate, die Mischung bleibt also im Kopf. */
.titelblock.mitbild{position:relative; background:var(--dark)}
/* z-index:-1, sonst deckt das Bild die drei Reihen zu: ein absolut gesetztes
   Element malt über gewöhnlichen Inhalt, ganz gleich wie früh es im Dokument
   steht. Negativ bleibt es über dem Grund und unter Kopfzeile, Wort und Fuß —
   und dank isolation:isolate an .kopf innerhalb des Kopfes. */
.titelblock .grund{position:absolute; inset:0; z-index:-1}
.titelblock .grund img{width:100%; height:100%; object-fit:cover;
  object-position:var(--fx,50%) var(--fy,50%)}
/* EIN VERLAUF ZWISCHEN FOTO UND SCHRIFT, Roger 30.08.2026: "dunkler verlauf
   hinter der schrift". Gemessen auf einem echten Bild (025a0917, Kormorane
   ueber heller Wiese): ohne ihn wird die Ueberschrift matschig und die beiden
   kleinen Kopfzeilen — rgba(230,240,216,.66), eine Farbe fuer den flachen
   gruenen Grund — verschwinden fast.
   ER RETTET DIE HAUSREGEL, statt sie zu brechen: ueber dunklem Grund kippt
   difference die Ueberschrift ins Helle, sie wird also weiterhin vom Bild
   gefaerbt und ist trotzdem lesbar. Deshalb kein zweiter Farbwert fuer die
   Schrift.
   Oben und unten am staerksten, weil dort die kleinen Zeilen stehen; in der
   Mitte am schwaechsten, damit das Foto atmet. Die Farbe ist --dark aus der
   Palette (§4), kein dazuerfundener Hexwert.
   Als ::after auf .grund, also innerhalb derselben z-index:-1-Ebene: liegt
   ueber dem Foto und unter jeder Schrift, ohne eine weitere Ebene. */
.titelblock .grund::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgba(6,15,9,.90) 0%,
    rgba(6,15,9,.36) 24%,
    rgba(6,15,9,.58) 60%,
    rgba(6,15,9,.92) 100%)}
.titelblock.mitbild .mitte .huge.cut{color:#FFFFFF}
/* Die beiden kleinen Zeilen stehen sonst bei 66 % Deckkraft — gerechnet für
   den flachen grünen Grund. Über einem Foto ist das zu wenig, gemessen an
   025a0917. Über dem Bild also voll deckend; der Verlauf trägt den Kontrast. */
.titelblock.mitbild .top .tag{color:var(--bone)}

/* ── 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:calc(clamp(38px,9vw,132px) * var(--gr,1))}
.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:calc(clamp(42px,10vw,150px) * var(--gr,1)); 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%)}
/* Der Bildpunkt gilt auch hier: der Vorhang zeigt geschlossen nur das
   mittlere Sechstel der Bildhoehe, da entscheidet er alles. */
.vorhang .frame img{width:100%; height:100%; object-fit:cover;
  object-position:var(--fx,50%) var(--fy,50%)}
.vorhang .w{position:relative; z-index:2; text-align:center; will-change:transform;
  font-size:calc(clamp(40px,11vw,182px) * var(--gr,1))}
.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:calc(clamp(26px,6.4vw,96px) * var(--gr,1)); 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:calc(clamp(70px,21.5vw,340px) * var(--gr,1)); 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:calc(clamp(70px,21.5vw,340px) * var(--gr,1)); 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:calc(clamp(38px,9vw,132px) * var(--gr,1)); 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;
  object-position:var(--fx,50%) var(--fy,50%)}
.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; position:relative}
.rub .titel .huge{font-size:clamp(44px,11vw,168px)}
/* Diashow-Einstieg, Roger 30.08.2026 (Issue #7). Er steht oben rechts im
   Titelblock, wo Roger ihn eingezeichnet hat — ABSOLUT gesetzt, damit das
   zweispaltige Raster darunter unberührt bleibt. Schrift wie seine Nachbarn
   in der Kopfzeile (.back, .crumb), damit er nicht als Fremdkörper wirkt.
   cursor:pointer überschreibt die Lupe von .rub a.gross: die gilt für Fotos,
   nicht für einen Knopf aus Schrift. */
.rub .titel .dia{
  position:absolute; top:18px; right:var(--pad);
  font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--acid); text-decoration:none;
  cursor:pointer; padding:9px 14px; border:1px solid rgba(219,244,10,.42)}
.rub .titel .dia:hover{border-color:var(--acid)}
.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%}
  /* Auf einer Spalte ist oben rechts kein freier Platz mehr — dort liegt die
     Überschrift. Der Einstieg stellt sich deshalb in die Reihe, statt sie zu
     überdecken. */
  .rub .titel .dia{position:static; justify-self:start}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
  .vorhang .frame{clip-path:inset(0 0 0 0)!important}
}

/* ── Rubrik-Darstellungen ──────────────────────────────────────────────────
   Je Rubrik im Admin einstellbar, siehe lib/rubrikansicht.php. KEINE dieser
   Ansichten schneidet ein Foto an — das ist die Regel der Rubrikseite
   (PROJECT_NOTES §4). Der Kontaktbogen kommt dem am nächsten und ist deshalb
   ein Index: jede Kachel führt in die Einzelansicht. */

/* Streifen — waagerecht, Snap je Bild. Die Höhe ist fest, die Breite folgt
   dem Format, damit Hoch- und Querformat nebeneinander stehen können. */
.rub .streifen{
  display:flex; gap:clamp(16px,2.4vw,40px); align-items:flex-end;
  overflow-x:auto; overscroll-behavior-x:contain;
  /* scrollbar-color wird vererbt, scrollbar-width NICHT (gemessen) — die
     waagerechte Leiste hier braucht die Angabe deshalb noch einmal. */
  scrollbar-width:thin;
  scroll-snap-type:x mandatory; scroll-padding-left:var(--pad);
  padding:0 var(--pad) clamp(20px,3vw,40px);
}
.rub .streifen figure{margin:0; flex:0 0 auto; scroll-snap-align:center;
  display:grid; gap:12px}
.rub .streifen figure img{height:min(72svh,760px); width:auto; max-width:none;
  display:block}
.rub .streifen .cap{max-width:min(100%,46ch)}
.rub .streifen:focus-visible{outline:1px solid var(--acid); outline-offset:-2px}

/* Kontaktbogen — dichtes Raster, feste Zeilenhöhe, object-fit:contain, damit
   das Format jeder Aufnahme lesbar bleibt statt beschnitten zu werden. */
.rub .bogen{
  display:grid; gap:clamp(8px,1.2vw,18px); padding:0 var(--pad);
  grid-template-columns:repeat(auto-fill,minmax(clamp(96px,12vw,180px),1fr));
}
.rub .bogen a{display:block; height:clamp(84px,10vw,150px); background:var(--dark)}
.rub .bogen img{width:100%; height:100%; object-fit:contain}
.rub .bogen a:hover{outline:1px solid var(--acid); outline-offset:2px}

/* Mosaik — mehrspaltig, Formate bleiben */
.rub .mosaik{columns:3 260px; column-gap:clamp(16px,2.4vw,40px);
  padding:0 var(--pad)}
.rub .mosaik figure{margin:0 0 clamp(18px,2.6vw,44px); break-inside:avoid;
  display:grid; gap:10px}
.rub .mosaik figure img{width:100%; height:auto}

/* Zeitleiste — nach Aufnahmejahr */
.rub .zeitleiste .jahr{padding:clamp(26px,4vw,64px) 0 0}
.rub .zeitleiste .jahrzahl{font-size:clamp(56px,14vw,190px); color:var(--acid);
  padding:0 var(--pad)}
.rub .zeitleiste .jahr > .kick{padding:0 var(--pad) clamp(16px,2.4vw,34px)}

/* Einzelbild als BÜHNE — eines nach dem anderen, GEKLICKT. Roger, 29.08.2026:
   "kein autoplay". Bewegt wird hier nur, was Scrollen oder ein Klick bewegt.

   --voll läuft beim Durchscrollen von 0 auf 1 und wieder auf 0 (site.js,
   dieselbe Kurve wie beim Vorhang). Alles Weitere hängt allein daran, damit
   es nur EINEN Regler gibt. */
.rub .buehnehoch{position:relative; height:210svh}
/* Der Grund wird mit der Bühne schwarz — Roger, 29.08.2026: "wenn die diashow
   aktiv wird den hintergrund links rechts vom bild schwarz werden lassen".
   Kein Übergang: --voll ändert sich ohnehin Bild für Bild beim Scrollen, ein
   transition würde nur hinterherhinken. */
.rub .buehne{
  position:sticky; top:0; height:100svh; overflow:hidden;
  background:rgb(0 0 0 / var(--voll,0));
}

/* Bei 0 sitzt das Bild eingerückt wie eine Tafel, bei 1 füllt es die Fläche.
   Das Polster wandert, nicht die Größe — so springt beim Wechsel nichts. */
.rub .buehne figure{
  position:absolute; inset:0; margin:0;
  padding:calc((18 - 18 * var(--voll,0)) * 1svh) var(--pad);
}
.rub .buehne .blatt{
  position:absolute; inset:inherit; width:auto; height:auto;
  max-width:calc(100% - 2 * var(--pad)); max-height:100%;
  margin:auto; object-fit:contain;
  opacity:0; transition:opacity .5s ease; pointer-events:none;
}
/* Nur das obenauf liegende Blatt ist anfassbar — sonst greift die Lupe das
   leere Ersatzblatt darunter ab. */
.rub .buehne .blatt.an{opacity:1; pointer-events:auto}

/* Die Pfeile liegen AUF dem Bild und erscheinen mit der Bühne. Weiße Schrift
   im Differenz-Modus, wie alle Schrift über Bildern in diesem Haus: ihre
   Farbe entscheidet das Foto, nicht der Gestalter. */
.rub .buehne .steuer{
  position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
  display:flex; justify-content:space-between; align-items:center;
  padding:0 clamp(10px,2.4vw,40px); pointer-events:none;
  opacity:var(--voll,0); transition:opacity .25s linear;
}
.rub .buehne .pfeil{
  pointer-events:auto; color:#FFFFFF; mix-blend-mode:difference;
  text-decoration:none; font-family:var(--grot);
  font-variation-settings:"wdth" 70,"wght" 700; text-transform:uppercase;
  font-size:clamp(15px,2.6vw,34px); letter-spacing:.02em; padding:14px 8px;
}
.rub .buehne .pfeil.aus{opacity:.25; pointer-events:none}
.rub .buehne .cap{
  position:absolute; left:var(--pad); right:var(--pad); bottom:0;
  justify-content:center; text-align:center; padding:44px 0 clamp(14px,3vh,32px);
  background:linear-gradient(to bottom, transparent, rgba(6,15,9,.82));
}
.rub .buehne .alle{
  position:absolute; left:0; right:0; top:clamp(10px,2vh,22px); margin:0;
  text-align:center; opacity:calc(1 - var(--voll,0));
}
.rub .buehne .alle a{color:var(--sage)}
.rub .buehne .pfeil:hover{color:var(--acid); mix-blend-mode:normal}

@media (max-width:760px){
  .rub .mosaik{columns:1}
  .rub .streifen figure img{height:min(58svh,520px)}
}

/* ── Lupe ──────────────────────────────────────────────────────────────────
   Nur auf Rubrikseiten und nur mit Zeiger, siehe site.js. pointer-events:none
   ist Pflicht: sonst frisst das Fenster die Mausbewegung, die es steuert. */
.lupe{
  position:fixed; z-index:80; border-radius:50%; pointer-events:none;
  background-repeat:no-repeat; background-color:var(--dark);
  box-shadow:0 0 0 1px var(--acid), 0 20px 50px rgba(0,0,0,.55);
}

/* ── Lightbox ──────────────────────────────────────────────────────────────
   Für die Mosaik- und die Zeitleistenansicht. Der Grund ist schwarz wie bei
   der Bühne, und die Schrift darauf liegt im Differenz-Modus, wie alle
   Schrift über Bildern in diesem Haus. */
body.lightboxoffen{overflow:hidden}
.lightbox{
  position:fixed; inset:0; z-index:90; display:none;
  grid-template-columns:auto minmax(0,1fr) auto; grid-template-rows:minmax(0,1fr) auto;
  align-items:center; gap:0 clamp(6px,2vw,28px);
  padding:clamp(10px,2.4vh,26px) clamp(8px,2vw,32px);
  background:#000;
}
.lightbox.an{display:grid}
.lightbox figure{
  grid-column:2; grid-row:1; margin:0; display:grid; place-items:center;
  min-width:0; min-height:0; width:100%; height:100%;
}
.lightbox figure img{
  max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; display:block;
}
.lightbox .cap{
  grid-column:1/-1; grid-row:2; justify-content:center; text-align:center;
  padding-top:clamp(8px,1.6vh,18px);
}
.lightbox .pfeil,.lightbox .zu{
  background:none; border:0; cursor:pointer; color:#FFFFFF;
  mix-blend-mode:difference; font-family:var(--grot);
  font-variation-settings:"wdth" 70,"wght" 700; text-transform:uppercase;
  letter-spacing:.02em; padding:14px 8px; font-size:clamp(13px,2.2vw,28px);
}
.lightbox .pfeil.vor{grid-column:1; grid-row:1}
.lightbox .pfeil.nach{grid-column:3; grid-row:1}
.lightbox .pfeil:disabled{opacity:.2; cursor:default}
.lightbox .pfeil:not(:disabled):hover,.lightbox .zu:hover{color:var(--acid); mix-blend-mode:normal}
.lightbox .zu{
  position:absolute; top:clamp(6px,1.4vh,18px); right:clamp(8px,2vw,28px);
  z-index:2; font-family:var(--mono); font-size:11px; letter-spacing:.18em;
}

/* Auf dem Telefon sind die Pfeile am Rand zu schmal — dort unter das Bild. */
@media (max-width:760px){
  .lightbox{grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto auto}
  .lightbox figure{grid-column:1; grid-row:1}
  .lightbox .cap{grid-column:1; grid-row:2}
  .lightbox .pfeil{grid-column:1; grid-row:3}
  .lightbox .pfeil.vor{justify-self:start}
  .lightbox .pfeil.nach{justify-self:end}
}

/* Der Zeiger sagt, dass da etwas passiert — in allen vier Ansichten, die die
   Lightbox öffnen: Mosaik, Zeitleiste, Kontaktbogen und Streifen. */
.rub a.gross{cursor:zoom-in}
.rub .mosaik a.gross{display:block}

/* ── Einstiege ─────────────────────────────────────────────────────────────
   Handverlesene Wege in einzelne Rubriken, quer über alle Bereiche — das
   Modul der Startseite. Anders als die Bereichskacheln trägt jeder Einstieg
   ein FOTO: auf einer Startseite soll man Bilder sehen, keine Liste.
   Der Bildpunkt gilt auch hier, weil object-fit:cover beschneidet. */
.einstiege{background:var(--leaf); padding:clamp(56px,9vw,130px) 0 clamp(50px,8vw,110px)}
.einstiege .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;
}
.einstiege .head .huge{font-size:calc(clamp(38px,9vw,132px) * var(--gr,1)); color:var(--acid)}
.einstiege .reihe{
  display:grid; gap:1px; background:rgba(230,240,216,.16);
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  border-top:1px solid rgba(230,240,216,.16);
  border-bottom:1px solid rgba(230,240,216,.16);
}
.einstiege .reihe a{
  position:relative; display:grid; align-content:end; gap:6px;
  min-height:clamp(210px,30vh,340px);
  padding:var(--pad) clamp(16px,2.4vw,28px) clamp(16px,2.4vw,28px);
  background:var(--leaf); text-decoration:none; color:var(--bone); overflow:hidden;
}
.einstiege .reihe .bild{
  position:absolute; inset:0; opacity:.42;
  transition:opacity .45s cubic-bezier(.2,.7,.3,1);
}
.einstiege .reihe .bild img{
  width:100%; height:100%; object-fit:cover;
  object-position:var(--fx,50%) var(--fy,50%);
}
.einstiege .reihe a:hover .bild,.einstiege .reihe a:focus-visible .bild{opacity:.74}
.einstiege .reihe .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(19px,3.2vw,34px); line-height:1;
  transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
.einstiege .reihe a:hover .nm{transform:translateX(10px)}
.einstiege .reihe .tag{position:relative; z-index:2}

/* Der Weg zurück auf die Startseite, oben links in der Kopfzeile eines
   Bereichs. Nur da, wenn es eine Startseite über den Bereichen gibt. */
.kopf .top .heim,.heimzeile .heim{
  font-family:var(--mono); font-size:9.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--acid); text-decoration:none;
  margin-right:16px; border-bottom:1px solid transparent;
}
.kopf .top .heim:hover,.heimzeile .heim:hover{border-bottom-color:var(--acid)}
/* Eigene Zeile fuer Seiten, die nicht mit einem Kopf-Block anfangen. */
.heimzeile{background:var(--leaf); padding:var(--pad) var(--pad) 0}

/* ── Nach oben ─────────────────────────────────────────────────────────────
   Roger, 30.08.2026 (Issue #10): "auf jeder Seite rechts unten einen nach
   oben Pfeil ergänzen". Er sitzt fest über allem, in denselben Farben wie die
   übrige Kleinschrift, und ist 44 px groß — die Größe, unter der ein
   Bedienelement auf dem Telefon nicht mehr sicher zu treffen ist.
   ER ERSCHEINT ERST, WENN ES ETWAS NACH OBEN GIBT: site.js setzt die Klasse
   "an" ab einer Bildschirmhöhe Scrollstrecke. Das bewegt sich nur, weil
   gescrollt wird — die Hausregel aus §4 bleibt heil. */
/* GANZ AN DEN RAND, Roger 30.08.2026: "kann der pfeil ganz rechts an den rand
   damit er keinen inhalt überlagert?" Der Inhalt steht überall in einer Spalte
   mit padding:0 var(--pad); rechts davon ist leerer Rand, und genau dort sitzt
   er jetzt. Bei weitem Fenster ist die Spalte bis 72 px breit, der Pfeil 44 —
   er berührt den Text dann gar nicht mehr. Auf dem Telefon schrumpft --pad auf
   20 px, dort bleibt eine Überlagerung unvermeidlich. */
.obenpfeil{
  position:fixed; right:0; bottom:var(--pad); z-index:70;
  width:44px; height:44px; display:grid; place-content:center;
  font-family:var(--mono); font-size:16px; line-height:1;
  color:var(--acid); text-decoration:none;
  background:rgba(6,15,9,.72); border:1px solid rgba(219,244,10,.42);
  backdrop-filter:blur(8px);
  opacity:0; pointer-events:none; transition:opacity .25s ease}
.obenpfeil.an{opacity:1; pointer-events:auto}
.obenpfeil:hover{border-color:var(--acid); background:rgba(6,15,9,.92)}

/* ── Kontaktformular ───────────────────────────────────────────────────────
   Issue #5, Punkt 2. Es lebt auf einer eigenen Seite (/kontakt) und wird von
   der Lightbox unten NUR eingerahmt — die Gestaltung gilt also für beides,
   die Seite ohne JavaScript und das Fenster darüber. */
.formular{padding:0 var(--pad) clamp(50px,8vw,120px); max-width:62ch}
.formular label{display:block; margin-bottom:22px;
  font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--acid)}
.formular .wink{display:block; margin-top:3px; letter-spacing:.12em;
  text-transform:none; color:var(--sage); font-size:10px}
.formular input[type=text],.formular input[type=email],.formular textarea{
  display:block; width:100%; margin-top:9px; padding:11px 13px;
  background:var(--dark); color:var(--bone);
  border:1px solid rgba(230,240,216,.22);
  font-family:var(--mono); font-size:14px; line-height:1.6;
  text-transform:none; letter-spacing:0}
.formular textarea{resize:vertical; min-height:150px}
.formular input:focus,.formular textarea:focus{
  outline:none; border-color:var(--acid)}
.formular button{
  font-family:var(--mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--dark); background:var(--acid);
  border:0; padding:13px 26px; cursor:pointer}
.formular button:hover{background:var(--bone)}
.formular .meldung,.formular .fehler{
  font-family:var(--mono); font-size:12px; line-height:1.7;
  padding:12px 15px; margin:0 0 24px; border-left:2px solid var(--acid)}
.formular .meldung{color:var(--acid); background:rgba(219,244,10,.07)}
.formular .fehler{color:#FFB4A2; background:rgba(255,120,90,.08);
  border-left-color:#FFB4A2}
/* Der Honigtopf. NICHT display:none — manche Skripte lesen genau das und
   lassen solche Felder aus. Aus dem Bild geschoben ist unauffälliger, und
   für Vorleseprogramme sperrt aria-hidden im Markup. */
.formular .honig{position:absolute; left:-9999px; width:1px; height:1px;
  overflow:hidden}

/* ── Das Formular als Lightbox ─────────────────────────────────────────────
   Roger, 30.08.2026: "zum mailformular dieses in einer lightbox öffnen".
   Aufbau wie die Bild-Lightbox: fester schwarzer Grund, Escape schliesst, der
   Zurück-Knopf auch. Eigene Klasse und nicht .lightbox, weil jene ein Raster
   für ein Bild samt Pfeilen ist — hier steht ein Formular. */
body.formboxoffen{overflow:hidden}
.formbox{position:fixed; inset:0; z-index:95; display:none;
  background:rgba(6,15,9,.93); backdrop-filter:blur(6px);
  overflow-y:auto; overscroll-behavior:contain}
.formbox.an{display:block}
.formbox .rahmen{
  max-width:64ch; margin:clamp(24px,6vh,90px) auto; padding:0 var(--pad);
  position:relative}
.formbox .zu{
  position:absolute; top:0; right:var(--pad);
  font-family:var(--mono); font-size:10px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--acid); background:none; border:0;
  cursor:pointer; padding:8px}
.formbox .zu:hover{color:var(--bone)}
.formbox h2{font-family:var(--grot); font-variation-settings:"wdth" 62,"wght" 900;
  font-weight:900; text-transform:uppercase; letter-spacing:-.045em;
  line-height:.85; margin:0 0 8px; font-size:clamp(30px,5vw,58px)}
.formbox .formular{padding:26px 0 40px; max-width:none}