/* ═══════════════════════════════════════════════════════════════════════════
   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 */
  --moss:#192308;   /* Moos; der gelbere der beiden Grüns, aus §4 */
  --bark:#1C110F;   /* Rinde; stand von Hand an allen Rubriken, jetzt benannt */
  --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;
}
/* height:auto IST DAS GEGENSTUECK ZU DEN width/height-ATTRIBUTEN, die bild_tag()
   seit 31.08.2026 an jedes Bild schreibt (sie halten den Platz frei, bevor die
   Datei da ist — siehe dort). Ein height-Attribut ist fuer den Browser ein
   DARSTELLUNGSHINWEIS, also eine CSS-Regel mit der niedrigsten Prioritaet: wo
   das Stylesheet selbst keine Hoehe setzt, greift er. Genau das ist im "Festen
   Satz" passiert — .pin .track img setzt width und aspect-ratio, aber keine
   Hoehe, also stand dort ploetzlich die ORIGINALHOEHE der Datei: 1707 und
   3072 px statt Breite mal 2/3, und der Baustein war 8667 px hoch. Mit
   height:auto sind die Attribute wieder nur das VERHAELTNIS und nie die Groesse.
   Jede Regel weiter unten, die eine echte Hoehe setzt, gewinnt darueber. */
img{display:block; max-width:100%; height:auto}
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)}
/* Halb so hoch wie der Splitter (02.09.2026, Rogers Wunsch) — dieselben drei
   Werte des clamp() halbiert, damit die Stufe im ganzen Bereich haelt und
   nicht nur bei einer Fensterhoehe. --kappe halbiert mit, sonst schnitte ein
   Wort in einem so flachen Streifen oben und unten ab. */
.h-xxs{height:clamp(39px,5.5vh,62px); --kappe:clamp(26px,3.7vh,42px)}
.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}

/* ── Abstand ───────────────────────────────────────────────────────────────
   Ein Baustein, der nichts zeigt ausser Platz (31.08.2026, Rogers Modul). Die
   Hoehe kommt aus denselben h-Klassen wie bei Baendern und Bildstreifen, der
   Grund wahlweise aus der Palette. KEIN eigener Aussenabstand: dieser Baustein
   IST der Abstand, er darf nicht noch einen mitbringen. */
.abstand{margin:0; padding:0}

/* ── Bildstreifen ──────────────────────────────────────────────────────────
   Ein Streifen über die ganze Breite, aus einem Foto oder aus mehreren
   nebeneinander (31.08.2026, Rogers Modul). Die Höhe kommt aus denselben
   h-Klassen wie bei den Bändern, samt --kappe für das Wort. GLEICHVERTEILT
   heisst repeat(n,1fr); n schreibt der Renderer als --felder ins style-Attribut.
   Ohne Fugen, es ist ein Streifen und keine Reihe Kacheln.
   Beschnitten wird über object-fit:cover, und WELCHER Ausschnitt zu sehen ist,
   sagt der Bildpunkt — derselbe Weg wie beim Vorhang und den Rubrikkacheln. */
.bildstreifen{
  position:relative; overflow:hidden; background:#000; isolation:isolate;
  /* KEIN Abstand nach unten, anders als beim Band (Roger, 31.08.2026: "den
     unteren abstand bitte weg"). Bänder stehen zu mehreren untereinander und
     brauchen die Fuge; ein Bildstreifen ist ein einzelner Baustein und soll
     an dem sitzen, was unter ihm kommt. Zwei Streifen hintereinander liegen
     damit bündig — das ist gewollt, es ergibt einen durchgehenden Block. */
  margin-bottom:0;
  display:grid; grid-template-columns:repeat(var(--felder,1),1fr);
  /* 1fr UND NICHT auto, sonst wird die Zeile nur so hoch, wie die Bilder von
     selbst sind — bei einem Drittel Breite deutlich weniger als der Streifen,
     und darunter stand der schwarze Grund als Balken. Gesehen von Roger am
     31.08.2026 auf der Startseite. Mit 1fr fuellt die Zeile die Hoehe der
     h-Klasse, und object-fit:cover beschneidet die Fotos darauf. */
  grid-template-rows:1fr;
}
.bildstreifen .feld{position:relative; overflow:hidden; min-width:0}
.bildstreifen .feld img{width:100%; height:100%; object-fit:cover;
  object-position:var(--fx,50%) var(--fy,50%)}
/* Das Wort steht über dem GANZEN Streifen, nicht in einem der Felder — bei
   mehreren Bildern gehört es zum Streifen, nicht zu einem davon. Dieselbe
   Deckelung wie beim Band: nie höher als --kappe, sonst schneidet der Streifen
   es ab. */
.bildstreifen .w{
  position:absolute; inset:0; display:flex; align-items:center;
  justify-content:center; text-align:center; padding:0 var(--pad); z-index:2;
  font-size:min(calc(clamp(38px,10.5vw,168px) * var(--gr,1)), var(--kappe,999px));
}


/* 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;
}
/* EIN KURZER BALKEN, DER SENKRECHT WANDERT (Roger, 31.08.2026: "aktuell sieht
   es so aus als würde man horizontal scrollen"). Der Strich davor wuchs in die
   BREITE — die Geste zeigte also zur Seite, wo die Seite doch nach unten geht.
   Das ::after ist jetzt eine feste Bahn von 22x14, der Balken darin ein Verlauf
   von 22x2, und nur dessen background-position wandert. Die Bahn ist NIEDRIGER
   als die Zeile selbst (10px Schrift x 1.6 = 16px), deshalb ändert die neue
   Bewegung an keiner Stelle die Höhe eines Bausteins. Bei prefers-reduced-motion
   steht der Balken oben still — das erledigt die Regel weiter unten.

   ER LÄUFT NUR IN EINE RICHTUNG und löst sich unten auf, statt wieder
   hochzufahren (Roger, kurz danach: "der balken von oben nach unten wandert
   unten sich auflöst und wieder von oben nach unten"). Das ist der Unterschied
   zwischen einem Zeiger und einem Pendel: hin UND zurück nennt zwei Richtungen
   gleich wichtig, und nach oben soll hier niemand. Die opacity gehört dem
   Balken allein — das ::after IST der Balken, die Bahn darum ist durchsichtig —,
   also blendet sie ihn aus, ohne die Beschriftung anzufassen. Bei 0 % ist er
   schon unsichtbar, deshalb sieht man den Sprung zurück nach oben nicht.
   Der Weg ist 12px, und das ist das Maximum ohne Folgen: Bahn 14px minus 2px
   Balken, und 14px ist, was in die 16px hohe Zeile passt. */
.scrollcue::after{content:""; width:22px; height:14px; flex:none;
  background:linear-gradient(var(--acid),var(--acid)) no-repeat; background-size:22px 2px;
  animation:wandern 2s linear infinite}
@keyframes wandern{
  0%{background-position:0 0; opacity:0}
  12%{opacity:1}
  62%{opacity:1}
  100%{background-position:0 12px; opacity:0}
}

/* Der Scroll-Hinweis als eigener Baustein (31.08.2026): eine Zeile, sonst
   nichts. Waagerecht der ubliche Seitenrand, "rechts" schiebt den Inhalt ans
   andere Ende — dieselbe Klasse .r wie am Band.
   SENKRECHT 10 px, und das ist die eine AUSNAHME von der Regel, dass Bausteine
   kein senkrechtes Polster mehr haben (Roger: "der braucht allerdings einen
   abstand oben unten 10px?"). Der Grund ist, dass es hier nicht um den Abstand
   ZWISCHEN Bausteinen geht, den setzt der Abstand-Baustein: der Inhalt dieser
   Zeile ist 10 px hoch, und ohne eigene Luft klebt die Schrift an dem, was
   darueber und darunter steht. Das ist die Luft der Zeile selbst. */
.hinweiszeile{padding:10px var(--pad); display:flex}
.hinweiszeile.r{justify-content:flex-end}

/* 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:0}
.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:0}
.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)}

/* EIN KOPFBEREICH OHNE INHALT DAHINTER TRAEGT KEIN POLSTER (02.09.2026,
   Roger: "das modul bänder hat auch einen abstand drunter, bitte auch
   entfernen"). Auf der Startseite steht ein Baender-Block, der nur eine
   Ueberschrift hat und kein einziges Band — gemessen hingen dort 62px unter
   dem letzten Sichtbaren.
   Das Polster UNTER einer Ueberschrift ist am 31.08. bewusst geblieben, als
   alle anderen senkrechten Polster fielen: es trennt Ueberschrift von Inhalt.
   Genau deshalb gehoert es weg, wenn kein Inhalt folgt — :last-child sagt
   genau das. Gilt fuer alle vier Bausteine mit Kopfbereich, denn der Fehler
   waere dort derselbe. */
.baender .head:last-child,
.sammlung .head:last-child,
.einstiege .head:last-child,
.bereiche .head:last-child{ padding-bottom:0 }

/* ── 02 Vorhang ──────────────────────────────────────────────────────────── */
.vorhang{position:relative; height:300vh}
.vorhang .stage{position:sticky; top:0; height:100svh; overflow:hidden;
  display:grid; place-items:center; isolation:isolate}
/* GANZ ZU AM ANFANG (02.09.2026, Issue #18: "Am Anfang komplett geschlossen,
   schrift sichtbar"). Bis dahin stand hier inset 42%, ein Schlitz von 16 % —
   und das Wort sass GENAU in diesem Schlitz (gemessen 1440x900: Wort 368-532,
   Schlitz 378-522), weshalb es aussah, als gaebe es die Schrift nur im Foto.
   Bei 50 % ist kein Foto da und das Wort steht allein auf dem Grund: weiss mit
   difference ergibt auf Moos rgb(230,220,247), auf jedem Grund der Palette
   aehnlich hell — nachgerechnet mit derselben Mischregel auf einem Canvas.
   Der Startwert steht ZWEIMAL, hier und in site.js (frame()); beide muessen
   dieselbe Zahl tragen, sonst springt der Vorhang beim ersten Scroll-Tick. */
.vorhang .frame{position:absolute; inset:0; will-change:clip-path;
  clip-path:inset(50% 0% 50% 0%)}
/* Der Bildpunkt gilt auch hier: waehrend der Vorhang aufgeht, zeigt er erst
   nur die Mitte 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:0 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:0 var(--pad);
  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 ─────────────────────────────────────────────────────────── */
/* KEIN SENKRECHTES POLSTER MEHR (31.08.2026). Bis dahin brachte jeder
   Baustein sein eigenes mit, oben UND unten, und zwischen zwei Bausteinen
   addierten sich zwei davon: gemessen 294 px zwischen "Einstiege" und
   "Andere Bereiche" auf der Startseite, aus 110 unten am einen, 130 oben am
   anderen und 54 einem leeren Kopfbereich. Niemand hatte diese Summe
   bestellt und niemand konnte sie aendern. Abstand ist jetzt ein eigener
   Baustein — Rogers Vorschlag, siehe block_abstand(). Die WAAGERECHTEN
   Polster bleiben, sie sind der Rand der Seite und nicht der Abstand
   zwischen Bausteinen. */
.sammlung{padding:0}
.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: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 — ein Raster, Formate bleiben. ZEILENWEISE GEFUELLT, und das ist der
   ganze Unterschied zu vorher (01.09.2026, Issue #16): hier stand columns:3
   260px, und CSS-Mehrspalten fuellen SPALTENWEISE. Auf /landschaften/normandie
   lagen die Bilder 1-21 untereinander in Spalte 1, und das Bild RECHTS neben
   dem ersten war Nummer 22 der Reihenfolge. Gelesen wird aber in Zeilen, und
   die Diashow blaettert in der gespeicherten Reihenfolge — sie sprang im Bild
   also nach unten statt nach rechts.
   HOECHSTENS --spalten SPALTEN, MINDESTENS 260px, dieselbe Aussage wie das alte
   columns:3 260px und ohne festen Umbruchpunkt: die Mindestbreite einer Spalte
   ist ein n-tel der Flaeche, sobald ein n-tel mehr als 260px ist — dann passen
   keine n+1 hinein. Aendert sich --pad oder der Spalt, zieht das Verhalten von
   selbst mit. Gemessen bei drei Spalten, vorher wie nachher: 3 Spalten ab etwa
   915px Fensterbreite, darunter 2, unter 761px eine (die Regel weiter unten).
   --spalten SETZT rubrik_mosaik() JE RUBRIK (02.09.2026, Rogers Wunsch: "bei
   recht großen bildern zum beispiel sagen 2 spaltig damit die größer angezeigt
   werden"). Ohne Angabe 3, also wie zuvor. Es ist ein HOECHSTWERT: die 260px
   bleiben, nach unten begrenzen sie nie — zwei Spalten sind wirklich zwei.
   align-items:start haelt jede Kachel auf ihrer eigenen Hoehe — ohne das zieht
   ein Raster die Bildunterschrift an den Fuss der Zeile. break-inside:avoid ist
   mit den Mehrspalten weggefallen, es hatte nur dort eine Bedeutung. */
.rub .mosaik{--spalt:clamp(16px,2.4vw,40px);
  display:grid; column-gap:var(--spalt); align-items:start;
  grid-template-columns:repeat(auto-fill,
    minmax(max(260px, calc((100% - (var(--spalten,3) - 1) * var(--spalt)) / var(--spalten,3))), 1fr));
  padding:0 var(--pad)}
.rub .mosaik figure{margin:0 0 clamp(18px,2.6vw,44px);
  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{grid-template-columns:1fr}
  .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.

   ZWEI FORMEN SEIT DEM 02.09.2026, je Rubrik einstellbar (Roger: "bzw. es
   optional bei der lupenoption anbieten"). Der Rahmen traegt die Form, das
   Bild liegt darin — bei der Lupe direkt, beim Fernglas in drei Ebenen. */
.lupe{
  position:fixed; z-index:80; pointer-events:none;
  background-repeat:no-repeat; background-color:var(--dark);
  filter:drop-shadow(0 20px 50px rgba(0,0,0,.55));
}

/* Die runde Lupe ist eine DIALUPE (Roger, 02.09.2026, mit einem Foto: "die
   normale lupe eher wie eine dialupe") — ein dicker schwarzer Koerper um ein
   rundes Glas, ohne Stiel.

   DAMIT IST DER STIEL WIEDER WEG, den er drei Nachrichten zuvor bestellt hatte
   ("die echte lupe mit dünnen schwarzen rand und einen kleinen lupenstiel
   angedeutet"). Nicht aus Versehen geloescht: eine Dialupe hat keinen.

   DER KOERPER IST EIN INNENSCHATTEN, KEIN border. Ein Rahmen wuerde den
   Hintergrund um seine Breite verschieben (background-origin liegt auf der
   Polsterkante), und damit saesse der Ausschnitt nicht mehr unter dem Zeiger.
   Ein inset-Schatten malt nur, ohne an der Geometrie zu ruehren — die Rechnung
   in site.js bleibt unberuehrt. Sichtbar bleiben davon 300 - 2*26 = 248 px Glas.

   Die zweite, breitere Innenlinie liegt UNTER der ersten und schaut deshalb nur
   in dem einen Pixel dazwischen hervor: der schwache Lichtsaum, an dem man die
   Fassung vom Glas unterscheidet. */
.lupe.rund{
  border-radius:50%;
  box-shadow:
    inset 0 0 0 26px #000,
    inset 0 0 0 27px rgba(255,255,255,.16),
    inset 0 0 22px 26px rgba(0,0,0,.55);
}
/* Der Glanz auf dem Glas: ein weicher heller Fleck oben links, wie auf Rogers
   Vorlage. Er sitzt INNERHALB der Fassung und ist bewusst schwach — er soll
   das Foto nicht aufhellen, nur die Woelbung andeuten. */
.lupe.rund::after{
  content:""; position:absolute; inset:26px; border-radius:50%;
  pointer-events:none;
  background:radial-gradient(ellipse 60% 42% at 30% 22%,
    rgba(255,255,255,.16), rgba(255,255,255,.05) 45%, transparent 70%);
}

/* Das Fernglas: zwei Kreise, um 10 % ihres Durchmessers versetzt — Roger,
   02.09.2026: "die beiden kreisförmigen Sichtfelder überschneiden sich zu 90%
   in der Mitte, sodass links und rechts nur ein ganz schmaler, sichelförmiger
   Rand versetzt ist ... eine leichte horizontale Verschiebung an den Kanten,
   die zeigt, dass das Fernglas ganz leicht dejustiert ist."

   DREI EBENEN, und zwar genau deshalb: die beiden Sicheln sollen versetzt und
   weich sein, die Mitte deckungsgleich und scharf. Mit nur zwei Ebenen waere
   die obere zugleich die Mitte, und die Sichel auf IHRER Seite haette keinen
   Versatz. Die Mitte ist deshalb eine eigene Ebene, deren Maske die
   SCHNITTMENGE beider Kreise ist (mask-composite:intersect). */
.lupe .glas{
  position:absolute; top:0; width:var(--d); height:var(--d);
  background-repeat:no-repeat; background-color:var(--dark);
}
/* Die Sicheln tragen KEINEN eigenen Rand mehr — die beiden Ringe zeichnet
   ::after weiter unten, ueber allen Ebenen, damit sie ganz zu sehen sind.
   Und auch keine eigene Unschaerfe: die kommt seit dem 02.09.2026 als Verlauf
   von der Ebene "rand", damit sie zum Rand hin ZUNIMMT statt gleich stark zu
   sein ("die unschärfe muss jetzt langsam an den rand stärker werden"). */
.lupe .glas.links{ left:0;  border-radius:50%; }
.lupe .glas.rechts{ right:0; border-radius:50%; }
/* Die weiche Aussenzone: dasselbe Bild, unscharf, mit einer Maske, die in der
   Mitte nichts durchlaesst und nach aussen dicht wird. closest-side heisst
   hier 150px — die halbe Rahmenhoehe und damit genau der Kreisradius. */
.lupe .glas.rand{
  left:0; width:100%; filter:blur(3px);
  -webkit-mask-image:radial-gradient(circle closest-side at 50% 50%,
      transparent 0 42%, rgba(0,0,0,.35) 68%, #000 100%);
          mask-image:radial-gradient(circle closest-side at 50% 50%,
      transparent 0 42%, rgba(0,0,0,.35) 68%, #000 100%);
}
.lupe .glas.mitte{
  left:0; width:100%;
  -webkit-mask-image:radial-gradient(circle at calc(var(--d) / 2) 50%, #000 0 calc(var(--d) / 2 - 1px), transparent calc(var(--d) / 2)),
                     radial-gradient(circle at calc(100% - var(--d) / 2) 50%, #000 0 calc(var(--d) / 2 - 1px), transparent calc(var(--d) / 2));
  -webkit-mask-composite:source-in;
          mask-image:radial-gradient(circle at calc(var(--d) / 2) 50%, #000 0 calc(var(--d) / 2 - 1px), transparent calc(var(--d) / 2)),
                     radial-gradient(circle at calc(100% - var(--d) / 2) 50%, #000 0 calc(var(--d) / 2 - 1px), transparent calc(var(--d) / 2));
          mask-composite:intersect;
}
/* Der Rahmen selbst traegt die Silhouette, also die VEREINIGUNG beider Kreise.
   Damit ist jede Ebene darin automatisch beschnitten — vor allem die weiche
   Aussenzone, die sonst als Rechteck ueber die Kreise hinausstuende.
   KEIN filter auf diesem Element: Filter wirken VOR der Maske, ein
   drop-shadow haette also den Schatten des ungeschnittenen Rechtecks
   geworfen. Die runde Lupe behaelt ihren, sie hat keine Maske. */
.lupe.fernglas{
  background:none; filter:none;
  -webkit-mask-image:radial-gradient(circle at calc(var(--d) / 2) 50%, #000 0 calc(var(--d) / 2 - 15px), transparent calc(var(--d) / 2)),
                     radial-gradient(circle at calc(100% - var(--d) / 2) 50%, #000 0 calc(var(--d) / 2 - 15px), transparent calc(var(--d) / 2));
  -webkit-mask-composite:source-over;
          mask-image:radial-gradient(circle at calc(var(--d) / 2) 50%, #000 0 calc(var(--d) / 2 - 15px), transparent calc(var(--d) / 2)),
                     radial-gradient(circle at calc(100% - var(--d) / 2) 50%, #000 0 calc(var(--d) / 2 - 15px), transparent calc(var(--d) / 2));
          mask-composite:add;
}

/* BEIDE RINGE GANZ, UND ZWAR OBENAUF (Roger, 02.09.2026, mit einer Skizze:
   "noch nicht richtig. so meine ich das" — er hatte zwei vollstaendige Kreise
   gezeichnet, die sich oben und unten kreuzen). Vorher trug jede Sichel ihren
   Rand selbst, und die scharfe Mitte lag DARUEBER: von den beiden Kreisen war
   nur die aeussere Silhouette zu sehen, das Ganze las sich als EIN Kreis mit
   einer Delle. Die Ringe gehoeren also ueber alle drei Ebenen.

   ZWEI FARBEN JE RING, weil ein Foto beides sein kann: aussen 2px schwarz,
   innen 1px helles Weiss. Auf dunklem Material traegt die helle Linie, auf
   hellem die schwarze — ein einfarbiger Ring verschwindet je nach Aufnahme.

   UND ZWEIMAL GEZEICHNET, SEIT DEM 02.09.2026 (Roger: "kreisränder wo sich
   überlagern nur noch schwach sichtbar"): ::after legt beide Ringe SCHWACH
   ueber die ganze Flaeche, ::before dieselben Ringe KRAEFTIG, aber nur dort,
   wo sich die Kreise NICHT ueberlagern. Diese Maske ist das ausschliessende
   Oder der beiden Kreise (mask-composite:exclude) — genau die zwei Sicheln.
   So ist die Aussenkante klar und die beiden Boegen, die durch die Mitte
   laufen, sind nur noch angedeutet. Beide brauchen z-index, sonst laege
   ::before unter den Glasebenen. */
.lupe.fernglas::before,
.lupe.fernglas::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
}
.lupe.fernglas::after{
  background:
    radial-gradient(circle at calc(var(--d) / 2) 50%,
      transparent 0 calc(var(--d) / 2 - 3px),
      rgba(255,255,255,.14) calc(var(--d) / 2 - 3px) calc(var(--d) / 2 - 2px),
      rgba(0,0,0,.30) calc(var(--d) / 2 - 2px) calc(var(--d) / 2),
      transparent calc(var(--d) / 2)),
    radial-gradient(circle at calc(100% - var(--d) / 2) 50%,
      transparent 0 calc(var(--d) / 2 - 3px),
      rgba(255,255,255,.14) calc(var(--d) / 2 - 3px) calc(var(--d) / 2 - 2px),
      rgba(0,0,0,.30) calc(var(--d) / 2 - 2px) calc(var(--d) / 2),
      transparent calc(var(--d) / 2));
}
/* 5px SCHWARZ, seit dem 02.09.2026 (Roger: "um beide kreise außen einen
   schwarzen rand, 5px"). Vorher 2px mit einer hellen Haarlinie innen.
   DASS DAS NUR AUSSEN LANDET, macht die Maske von selbst, und das ist der
   Grund fuer ihre Bauart: der Ring liegt INNEN am Kreisrand, also im Streifen
   von r-15 bis r. Wo er im anderen Kreis liegt — die Boegen quer durch die
   Mitte — faellt er komplett weg, weil genau diese Punkte in beiden Kreisen
   liegen. Uebrig bleibt die Aussenkante der Vereinigung. Die Boegen in der
   Mitte kommen aus dem schwachen ::after und bleiben damit angedeutet. */
.lupe.fernglas::before{
  background:
    radial-gradient(circle at calc(var(--d) / 2) 50%,
      transparent 0 calc(var(--d) / 2 - 15px),
      rgba(0,0,0,.92) calc(var(--d) / 2 - 15px),
      rgba(0,0,0,0) calc(var(--d) / 2)),
    radial-gradient(circle at calc(100% - var(--d) / 2) 50%,
      transparent 0 calc(var(--d) / 2 - 15px),
      rgba(0,0,0,.92) calc(var(--d) / 2 - 15px),
      rgba(0,0,0,0) calc(var(--d) / 2));
  -webkit-mask-image:radial-gradient(circle at calc(var(--d) / 2) 50%, #000 0 calc(var(--d) / 2 - 1px), transparent calc(var(--d) / 2)),
                     radial-gradient(circle at calc(100% - var(--d) / 2) 50%, #000 0 calc(var(--d) / 2 - 1px), transparent calc(var(--d) / 2));
  -webkit-mask-composite:xor;
          mask-image:radial-gradient(circle at calc(var(--d) / 2) 50%, #000 0 calc(var(--d) / 2 - 1px), transparent calc(var(--d) / 2)),
                     radial-gradient(circle at calc(100% - var(--d) / 2) 50%, #000 0 calc(var(--d) / 2 - 1px), transparent calc(var(--d) / 2));
          mask-composite:exclude;
}

/* ── 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%; position:relative;
}
/* ZWEI EBENEN, ABSOLUT GESETZT wie die Blätter der Bühne (Issue #12).
   ABSOLUT UND NICHT GESTAPELT IM RASTER, und das ist der Unterschied, der
   zählt: als Rasterkinder bemessen BEIDE Ebenen dieselbe Spur, und die wird so
   hoch wie die größere. Auf /makro/nanocube — fünfzehn Querformate und ein
   Hochformat — wurde die Zelle damit höher als das Feld, und das sichtbare
   Querformat stand mittig in einer zu hohen Spur und war halb abgeschnitten.
   Absolut gesetzt vermisst die verdeckte Ebene gar nichts.
   pointer-events gehört dazu, sonst fängt die verdeckte Ebene den Klick auf
   den Grund ab, der die Lightbox schließt. */
.lightbox figure img{
  position:absolute; inset:0; margin:auto;
  max-width:100%; max-height:100%; width:auto; height:auto;
  object-fit:contain; display:block;
  opacity:0; transition:opacity .35s ease; pointer-events:none;
}
.lightbox figure img.an{opacity:1; pointer-events:auto}
/* IMMER ZWEIZEILIG, auf Rogers Ansage ("den abstand unten so hoch machen als
   wäre eine bezeichnung da, bei allen gleich"). Die Unterschrift steht im
   Raster UNTER dem Foto, ihre Höhe entscheidet also mit, wie hoch das Bildfeld
   ist — und .rub .cap ist eine Flex-ZEILE mit Umbruch, die je nach Textlänge
   und Fensterbreite ein- oder zweizeilig wird. Gemessen 31.08.2026: 30 px
   gegen 50 px, Bildfeld 827 gegen 807. Als Spalte ist es eine feste Struktur
   statt eines Umbruchs, und zeige() legt eine leere Artzeile ein, wo keine
   Bezeichnung steht — 93 der 284 Aufnahmen. Deshalb keine Pixelhöhe: die
   Schriftgrößen sind clamp(), eine feste Zahl wäre nur bei einer Fensterbreite
   richtig. NUR in der Lightbox; die Unterschriften auf den Rubrikseiten
   bleiben, wie sie sind. */
.lightbox .cap{
  grid-column:1/-1; grid-row:2; justify-content:center; text-align:center;
  padding-top:clamp(8px,1.6vh,18px);
  flex-direction:column; align-items:center;
}
.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:0}
.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);
}
/* DIE HOEHE IST JE BAUSTEIN WAEHLBAR (02.09.2026). Ohne Angabe gilt der Wert
   unten, der seit dem Bau der Startseite dort steht — eine Seite, an der Roger
   nichts einstellt, sieht deshalb aus wie vorher.
   ES SIND DIESELBEN FUENF STUFEN wie bei Baendern, Bildstreifen und Abstand,
   damit "mittel" ueberall dasselbe heisst; nur heissen die Klassen hier
   "hoehe-" statt "h-", weil die h-Klassen eine feste Hoehe setzen und an der
   Reihe die ganze Reihe festnageln wuerden. Gesetzt wird eine MINDESThoehe:
   ein Einstieg traegt Wort und Zahl, er darf wachsen, wenn der Name umbricht. */
.einstiege .reihe.hoehe-xxs a{min-height:clamp(39px,5.5vh,62px)}
.einstiege .reihe.hoehe-xs  a{min-height:clamp(78px,11vh,124px)}
.einstiege .reihe.hoehe-s   a{min-height:clamp(112px,16vh,180px)}
.einstiege .reihe.hoehe-m   a{min-height:clamp(158px,24vh,262px)}
.einstiege .reihe.hoehe-l   a{min-height:clamp(220px,34vh,376px)}
.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,.sammlung .sammlungheim .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,
.sammlung .sammlungheim .heim:hover{border-bottom-color:var(--acid)}
/* Derselbe Link noch einmal über dem Rubriken-Modul, rechts (Issue #14). Kein
   eigenes Aussehen — er erbt oben mit, damit es einer bleibt und nicht zwei
   werden, die auseinanderlaufen. Nur der rechte Abstand fällt weg, weil hier
   nichts mehr dahinter kommt. */
.sammlung .sammlungheim{padding:0 var(--pad) clamp(10px,1.6vw,20px); text-align:right}
.sammlung .sammlungheim .heim{margin-right:0}
/* Eigene Zeile fuer Seiten, die nicht mit einem Kopf-Block anfangen.
   position/z-index SIND NICHT SCHMUCK: .huge setzt line-height:.78, die Glyphen
   eines 310-px-Wortes ragen also ueber ihren Kasten hinaus. Seit die senkrechten
   Polster weg sind (31.08.2026) beginnt das Wortbild direkt unter dieser Zeile,
   und die ueberstehende Schrift lag UEBER dem Link — gemessen: elementFromPoint
   traf auf Hoehe des Links das h2, nicht den Link. Er war anklickbar wie eine
   Wand. Der Link ist ein Bedienelement und muss oben liegen. */
.heimzeile{background:var(--leaf); padding:var(--pad) var(--pad) 0;
  position:relative; z-index:2}

/* ── 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;
  /* OBEN PLATZ FUER DEN SCHLIESSEN-KNOPF, 31.08.2026 (Roger: "das schließen
     liegt über dem formular"). Der Knopf steht absolut bei top:0, die
     Ueberschrift beginnt an derselben Stelle und laeuft ueber die volle
     Breite — sie lagen uebereinander, seit das Formular gebaut wurde. Die
     Zeile gehoert jetzt ihm allein; 34 px sind seine eigene Hoehe (10 px
     Schrift, 2x8 Polster) plus etwas Luft. */
  padding:34px var(--pad) 0;
  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}

/* ── Textmodul ─────────────────────────────────────────────────────────────
   Mehrere Spalten, je eine mit eigenem Text (02.09.2026, Rogers Wunsch: "drei
   spalten in denen nur text geschrieben werden kann ... je spalte eigenes
   feld"). Die Spaltenzahl kommt als --spalten vom Renderer.

   HOECHSTENS --spalten, MINDESTENS 22em, dieselbe Bauart wie beim Mosaik: die
   Mindestbreite ist hier eine ZEILENLAENGE und keine Bildgroesse — unter etwa
   22em wird Fliesstext unlesbar, und auf dem Telefon stehen die Spalten
   deshalb von selbst untereinander. Kein Umbruchpunkt, der nachgezogen
   werden muss. */
/* KEIN SENKRECHTES POLSTER, AUCH NICHT MIT FLAECHE (Roger, 02.09.2026: "der
   hintergrund sollte keinen abstand einfügen"). Es gab hier einen Tag lang
   72px, sobald ein Grund gesetzt war — die Ueberlegung war, dass eine Farbe
   dem Text nicht anliegen soll. Rogers Weg ist besser und braucht keine
   Ausnahme: ein Abstand-Baustein in DERSELBEN Farbe ueber und unter dem Block
   setzt die Flaeche fort, und er bestimmt die Hoehe. Damit gilt der 31.08.
   wieder ohne Sonderfall — Abstand ist ein Baustein, kein Nebeneffekt. */
.textblock{ padding:0 var(--pad); }
.textblock .huge{ font-size:calc(clamp(38px,7vw,104px) * var(--gr,1)); margin:0 0 clamp(18px,3vw,40px); }
.textblock .spalten{
  --spalt:clamp(20px,3vw,52px);
  display:grid; gap:clamp(22px,3vw,44px) var(--spalt); align-items:start;
  grid-template-columns:repeat(auto-fill,
    minmax(max(22em, calc((100% - (var(--spalten,3) - 1) * var(--spalt)) / var(--spalten,3))), 1fr));
}
.textblock .sp h4{
  font-family:var(--mono); font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--acid); margin:0 0 10px;
}
.textblock .sp p{ margin:0; color:var(--bone); font-size:15px; line-height:1.75; }
/* DIE AUSZEICHNUNGSKLASSEN STEHEN GLOBAL, nicht nur im Textmodul: rmw_text()
   laeuft in jedem lede und in den Schluss-Spalten, und ein Marker, der dort
   still nichts tut, waere eine Falle. Geprueft, dass die vier Namen sonst
   nirgends vorkommen.
   Die Groessen sind FAKTOREN und keine Pixel, damit sie der Schrift folgen,
   in der sie stehen — dieselbe Regel wie bei den Woertern. */
.gr{ font-size:1.32em; line-height:1.4; }
.kl{ font-size:.82em; }
.fw{ color:#FFFFFF; }
.fg{ color:var(--sage); }
.fh{ color:var(--acid); }

/* ── Zahnrad zur Verwaltung (03.09.2026) ───────────────────────────────────
   Am Fuss jeder Seite, im Fluss und nicht schwebend: unten rechts sitzt der
   Nach-oben-Pfeil. Zurueckhaltend, weil es fuer Besucher nichts bedeutet —
   sichtbar wird es erst, wenn man es sucht oder mit der Maus hinfaehrt. */
/* KEIN width:100% — gemessen 03.09.2026: der body liefert hier 0 als
   Bezugsbreite, damit wurde aus 100% genau 0 und uebrig blieben die 40 px
   Innenabstand. Ein Blockelement fuellt seinen Platz ohnehin von selbst. */
.zahnrad{display:block; padding:0 var(--pad) 26px;
  color:#3E5240; line-height:0; transition:color .2s ease}
.zahnrad:hover,.zahnrad:focus-visible{color:var(--acid)}
.colophon + .zahnrad{margin-top:-52px}