/* RMW admin — a tool, not a poster. Same palette as the site so it does not
   feel like a different program, but everything here is sized for reading a
   lot of rows and hitting small controls accurately. */
:root{
  --leaf:#0B1F11; --dark:#060F09; --acid:#DBF40A; --bone:#E6F0D8; --sage:#9BB58A;
  --linie:rgba(230,240,216,.16); --rot:#F0644A;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--dark); color:var(--bone);
  font:14px/1.5 var(--mono); -webkit-font-smoothing:antialiased;
}
a{color:var(--bone)}
code{color:var(--acid); font-size:.92em}
img{display:block; max-width:100%}
:focus-visible{outline:2px solid var(--acid); outline-offset:2px}

/* ── setup / login ────────────────────────────────────────────── */
body.maske{display:grid; place-items:center; min-height:100vh; padding:20px}
body.maske main{max-width:420px; width:100%; background:var(--leaf);
  border:1px solid var(--linie); padding:28px}
body.maske h1{font-size:19px; margin:0 0 16px; color:var(--acid); font-weight:500}

/* ── chrome ───────────────────────────────────────────────────── */
.kopf{display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding:11px 18px; background:var(--leaf); border-bottom:1px solid var(--linie);
  position:sticky; top:0; z-index:60}
.kopf .marke{color:var(--acid); letter-spacing:.1em; text-transform:uppercase; font-size:11px}
.kopf nav{display:flex; gap:4px}
.kopf nav a{padding:6px 13px; text-decoration:none; border:1px solid transparent}
.kopf nav a.an{border-color:var(--acid); color:var(--acid)}
.kopf .raus{margin-left:auto; font-size:12px; color:var(--sage); text-decoration:none}
.kopf .raus + .raus{margin-left:0}

.bereichswahl{display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  padding:9px 18px; border-bottom:1px solid var(--linie); background:#08170D}
.bereichswahl span{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--sage);
  margin-right:8px}
.bereichswahl a{padding:5px 11px; text-decoration:none; border:1px solid var(--linie)}
.bereichswahl a.an{border-color:var(--acid); color:var(--acid)}
.bereichswahl small{color:var(--sage); margin-left:5px}

/* DER KOPFTEIL BLEIBT STEHEN, 02.09.2026. Roger: "kann im admin folgender
   kopfteil immer stehenbleiben" - gezeichnet als rote Linie unter dem
   Platzhalter-Balken. .kopf klebte schon allein, die drei darunter stapeln
   sich jetzt darauf.

   DIE top-WERTE HIER SIND NUR DER NOTNAGEL. Beide Leisten haben flex-wrap,
   ihre Hoehe haengt also an der Fensterbreite und an der Zahl der Bereiche -
   jede feste Zahl ist in dem Moment falsch, in dem eine Zeile umbricht.
   admin.js misst und ueberschreibt sie; ohne JavaScript stimmen sie fuer den
   breiten Normalfall.

   UND KEIN AUSSENABSTAND AN EINEM KLEBENDEN ELEMENT: ein margin liegt
   AUSSERHALB des Hintergrunds, waere im festgeklebten Zustand also ein
   stehender Schlitz, durch den der Inhalt darunter hindurchwandert. Die
   Platzhalterliste behaelt ihren deshalb und fuellt ihn mit einem
   Schlagschatten in der Seitenfarbe - der kostet keinen Platz und faellt
   genau in die 18px.

   ZWISCHEN BEIDEN STAND EINE HINWEISZEILE ("Reihenfolge der Blöcke = ...").
   Roger am selben Abend: "den hinweis ..rheienfolg der blöcke... kann raus".
   Sie ist weg, mitsamt ihrer Klasse kopfteil und dem Dateinamen, den sie
   nebenbei nannte. */
.bereichswahl{position:sticky; top:58px; z-index:50}
.platzhalter{position:sticky; top:110px; z-index:30; box-shadow:0 18px 0 var(--dark)}

/* Aufgeklappt darf sie nicht den halben Schirm besetzen: eigener Rollbereich,
   und die Zeile zum Zuklappen bleibt darin sichtbar. */
.platzhalter[open]{max-height:min(45vh,420px); overflow:auto}
.platzhalter[open] > summary{position:sticky; top:0; background:#0B1F12}

.filter{display:flex; gap:6px; flex-wrap:wrap; padding:12px 18px; align-items:center}
/* Beschriftung wie bei der Bereichsleiste darueber — ohne sie war die
   Zeile unbeschriftet (Issue #3). */
.filter > span{font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--sage); margin-right:8px}
.filter a{padding:4px 10px; text-decoration:none; border:1px solid var(--linie); font-size:12.5px}
.filter a.an{border-color:var(--acid); color:var(--acid)}
.filter small{color:var(--sage); margin-left:4px}

.meldung,.fehler,.hinweis{margin:12px 18px; padding:9px 13px; font-size:13px}
.meldung{background:#12301B; border-left:3px solid var(--acid)}
.fehler{background:#301412; border-left:3px solid var(--rot); color:#FFD9D2}
.hinweis{color:var(--sage); padding-left:0; margin-left:18px}
.baulog{margin:12px 18px; padding:13px; background:#08170D; border:1px solid var(--linie);
  white-space:pre-wrap; font-size:12px; max-height:340px; overflow:auto; color:var(--sage)}

/* ── forms ────────────────────────────────────────────────────── */
label{display:block; margin:0 0 9px; font-size:12px; color:var(--sage)}
.wink{color:var(--acid); opacity:.75; margin-left:8px; font-size:11px}
input[type=text],input[type=password],input[type=number],textarea,select{
  display:block; width:100%; margin-top:3px; padding:7px 9px;
  background:#08170D; color:var(--bone); border:1px solid var(--linie);
  font:13px/1.45 var(--mono); border-radius:0;
}
textarea{resize:vertical}
input[readonly]{color:var(--sage); background:#0A140E}
button{
  padding:8px 16px; background:var(--acid); color:#08170D; border:0; cursor:pointer;
  font:600 13px/1 var(--mono); letter-spacing:.04em;
}
button:disabled{background:#2A3A22; color:#6B7A63; cursor:default}
button.weg{background:none; color:var(--rot); border:1px solid var(--rot); font-weight:400}
form.inline{display:inline-flex; gap:5px; align-items:center; margin:0}
.zeile{display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap}
.zeile .wachs{flex:1 1 200px}
.zeile .klein{flex:0 0 110px}
.zeile .haken{display:flex; align-items:center; gap:6px; padding-bottom:8px}
.zeile .haken input{width:auto; margin:0}
.leiste{position:sticky; bottom:0; display:flex; gap:16px; align-items:center; flex-wrap:wrap;
  padding:13px 18px; background:var(--leaf); border-top:1px solid var(--linie)}
.leiste .hinweis{margin:0; padding:0}

/* ── upload ───────────────────────────────────────────────────── */
.hochladen{display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap;
  margin:0 18px 16px; padding:14px 16px; background:var(--leaf);
  border:1px solid var(--linie)}
.hochladen .klein{flex:0 0 240px}
.hochladen .wachs{flex:1 1 260px}
.hochladen input[type=file]{
  width:100%; margin-top:3px; padding:6px; background:#08170D; color:var(--bone);
  border:1px dashed var(--linie); font:12px var(--mono);
}
.hochladen .hinweis{flex:1 1 100%; margin:0; padding:0}
.hochladen .hinweis b{color:var(--bone); font-weight:400}
.hochladen.zuviel input[type=file]{border-color:var(--rot)}
.hochladen.zuviel .hinweis{color:var(--rot)}

/* ── Fortschritt beim Hochladen ───────────────────────────────
   Zwei Phasen: der Balken misst die Bytes, danach arbeitet der Server und
   der Balken pulsiert, weil dessen Dauer niemand kennt. */
.fortschritt{flex:1 1 100%; display:grid; gap:8px; margin:2px 0 0}
.fortschritt .balken{height:6px; background:#08170D; border:1px solid var(--linie)}
.fortschritt .balken span{display:block; height:100%; width:0; background:var(--acid);
  transition:width .2s linear}
.fortschritt.rechnet .balken span{animation:pulsen 1.4s ease-in-out infinite}
@keyframes pulsen{0%,100%{opacity:1} 50%{opacity:.3}}
.fortschritt.schiefgegangen .balken span{background:var(--rot)}
.fortschritt .stand{margin:0; font-size:12.5px; color:var(--bone)}
.fortschritt.schiefgegangen .stand{color:var(--rot)}
.fortschritt .abbruch{justify-self:start}
.hochladen.laeuft input,.hochladen.laeuft select{opacity:.45; pointer-events:none}

/* ── image grid ───────────────────────────────────────────────── */
.raster{display:grid; gap:16px; padding:0 18px 18px;
  grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}
.karte{background:var(--leaf); border:1px solid var(--linie); padding:12px}
.karte.aus{opacity:.5}
.karte .idzeile{display:flex; justify-content:space-between; gap:10px; margin:9px 0 2px;
  font-size:11px; color:var(--sage)}
.karte .exif{margin:0 0 10px; font-size:11px; color:var(--sage); opacity:.8}
.fokus{position:relative; cursor:crosshair; background:#000; aspect-ratio:3/2; overflow:hidden}
.fokus img{width:100%; height:100%; object-fit:cover}
.fokus .kein{display:grid; place-content:center; height:100%; color:var(--sage); font-size:11px;
  text-align:center; padding:10px}
.fokus .kreuz{
  position:absolute; width:19px; height:19px; margin:-10px 0 0 -10px; pointer-events:none;
  border:2px solid var(--acid); border-radius:50%;
  box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.6) inset;
}
.fokus .kreuz::before,.fokus .kreuz::after{content:""; position:absolute; background:var(--acid)}
.fokus .kreuz::before{left:50%; top:-9px; bottom:-9px; width:1px; margin-left:-.5px}
.fokus .kreuz::after{top:50%; left:-9px; right:-9px; height:1px; margin-top:-.5px}
.fokus.geaendert{outline:2px solid var(--acid)}

/* ── page blocks ──────────────────────────────────────────────── */
.block{background:var(--leaf); border:1px solid var(--linie); margin:0 18px 10px;
  padding:0 16px 14px}
.block > summary{
  margin:0 -16px; padding:11px 16px; font-size:13px; font-weight:500;
  display:flex; gap:10px; align-items:center; cursor:pointer; list-style:none;
  border-bottom:1px solid transparent;
}
.block > summary::-webkit-details-marker{display:none}
.block[open] > summary{border-bottom-color:var(--linie); margin-bottom:12px}
.block > summary:hover{background:#0E2716}
.block > summary::before{content:"▸"; color:var(--acid); font-size:11px; width:10px}
.block[open] > summary::before{content:"▾"}
.block summary .nr{background:var(--acid); color:#08170D; padding:1px 8px; font-weight:600}
.block summary .was{white-space:nowrap}
.block summary .blick{color:var(--sage); font-weight:400; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; min-width:0}
/* Die Platzhalterliste (Issue #15) steht zugeklappt ueber der Blockliste — sie
   soll nachschlagbar sein, nicht im Weg stehen. */
.platzhalter{border:1px solid var(--linie); background:#0B1F12; padding:10px 14px;
  margin:0 0 18px}
.platzhalter > summary{cursor:pointer; color:var(--acid); font-weight:600}
.platzhalter .hinweis{margin:10px 0}
.platzhaltertabelle{border-collapse:collapse; width:100%}
.platzhaltertabelle td{border-top:1px solid var(--linie); padding:4px 10px 4px 0;
  vertical-align:top; font-size:13px}
.platzhaltertabelle td:first-child{width:1%; white-space:nowrap}
.platzhaltertabelle i{color:var(--sage)}

/* Der Anzeigen-Haken (Issue #11) schiebt sich nach rechts, direkt vor die
   Typbezeichnung — dort hat Roger ihn eingezeichnet. Er traegt jetzt das
   margin-left:auto, das vorher an code stand: zwei automatische Raender in
   einer Flex-Zeile teilen den freien Platz und riessen die beiden auseinander. */
.block summary .zeigen{margin-left:auto; display:flex; gap:5px; align-items:center;
  color:var(--sage); font-weight:400; font-size:12px; white-space:nowrap; cursor:pointer}
.block summary .zeigen input{cursor:pointer; accent-color:var(--acid)}
.block summary code{margin-left:8px; color:var(--sage); white-space:nowrap}
/* Ein ausgeblendeter Block muss als solcher zu erkennen sein — sonst sucht man
   auf der Seite nach etwas, das man selbst abgeschaltet hat. Nur der Kopf wird
   blasser; die Felder darin bleiben normal lesbar und bearbeitbar. */
.block.aus > summary{opacity:.5}
.block.aus > summary .was::after{content:" — ausgeblendet"}
.block summary .steuer{display:flex; gap:5px; align-items:center}
.block summary .steuer button{padding:3px 9px; font-size:12px; font-weight:400;
  background:#08170D; color:var(--bone); border:1px solid var(--linie)}
.block summary .steuer button:hover:not(:disabled){border-color:var(--acid); color:var(--acid)}
.block summary .steuer button:disabled{opacity:.35; border-color:var(--linie); background:none}
.block summary .steuer button.weg:hover{border-color:var(--rot); color:var(--rot)}
/* Duplizieren steht links vom Entfernen und ist bewusst leise: es ist eine
   Hilfe, keine Hauptsache, und daneben liegt der einzige Knopf, der etwas
   wegnimmt. */
.block summary .steuer button.kopie{color:var(--sage)}
.block summary .steuer button.kopie:hover{border-color:var(--acid); color:var(--acid)}
button.neben{background:none; color:var(--sage); border:1px solid var(--linie); font-weight:400}
button.neben:hover{color:var(--acid); border-color:var(--acid)}
.neuform{padding:11px 13px; gap:8px; flex-wrap:wrap}
.neuform span:first-child{color:var(--sage); font-size:12px}
.neuform .hinweis{margin:0; padding:0; flex:1 1 100%}
table.baender,table.rubriken{width:calc(100% - 36px); margin:6px 18px 12px; border-collapse:collapse}
table.baender{width:100%; margin:6px 0 8px}
table.baender th,table.rubriken th{text-align:left; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--sage); font-weight:400; padding:4px 6px 6px}
table.baender td,table.rubriken td{padding:3px 6px 3px 0; vertical-align:middle}
table.baender td input,table.baender td select,
table.rubriken td input,table.rubriken td select{margin-top:0}
tr.neu td{opacity:.62}
tr.neu td input,tr.neu td select{border-style:dashed}
td.zahl{color:var(--acid); text-align:right; font-variant-numeric:tabular-nums}

/* ── choosing a photograph by looking at it ───────────────────── */
.bildwahl{display:flex; gap:5px; align-items:stretch; margin-top:3px}
.bildwahl .knopf{
  flex:1; display:flex; gap:9px; align-items:center; text-align:left;
  padding:4px 8px 4px 4px; background:#08170D; color:var(--bone);
  border:1px solid var(--linie); font:13px/1.3 var(--mono); font-weight:400;
  min-width:0; cursor:pointer;
}
.bildwahl .knopf:hover{border-color:var(--acid)}
.bildwahl .knopf img{width:56px; height:38px; object-fit:cover; flex:0 0 auto}
.bildwahl .knopf .ohne{
  width:56px; height:38px; flex:0 0 auto; display:grid; place-content:center;
  background:#0E1C13; color:var(--sage); font-size:17px;
}
.bildwahl .knopf .lab{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bildwahl .leeren{
  flex:0 0 auto; padding:0 9px; background:none; color:var(--sage);
  border:1px solid var(--linie); font-size:15px; font-weight:400;
}
.bildwahl .leeren:hover{color:var(--rot); border-color:var(--rot)}
.bildwahl.fehlt .knopf{border-color:var(--rot)}
.bildwahl.fehlt .lab b{color:var(--rot); font-weight:400}
.bildwahl.geaendert .knopf{border-color:var(--acid)}
table.baender .bildwahl{margin-top:0; min-width:180px}

/* DER DIALOG RECHNET SEINE HOEHE NICHT MEHR AUS (02.09.2026, Roger: "bei der
   bildauswahl ist manchmal (wenn es viele sind) die untere reihe
   abgeschnitten"). Das Gitter hatte max-height:calc(86vh - 62px) — 62px
   geraten fuer die Kopfzeile. Der Dialog hat aber VIER Kinder: Kopfzeile,
   Rubrikfilter, Gitter und die Leermeldung. Die Filterzeile fehlte in der
   Rechnung ganz, und je mehr Rubriken es gibt, desto hoeher wird sie — die
   Summe lief ueber 86vh, und overflow:hidden schnitt die letzte Reihe ab.

   Jetzt teilt eine Spalte den Platz auf: Kopf und Filter nehmen, was sie
   brauchen, das Gitter bekommt den Rest. min-height:0 gehoert dazu, sonst
   weigert sich ein Flex-Kind, kleiner als sein Inhalt zu werden, und schiebt
   genau wieder unten heraus.

   NUR IM OFFENEN ZUSTAND, und das ist kein Schmuck: display auf dem dialog
   selbst wuerde die Regel des Browsers schlagen, die ihn geschlossen
   ausblendet — er stuende dann immer sichtbar auf der Seite. */
dialog#bildwaehler{
  width:min(1100px,94vw); max-height:86vh; padding:0; border:1px solid var(--acid);
  background:var(--leaf); color:var(--bone); overflow:hidden;
}
dialog#bildwaehler[open]{ display:flex; flex-direction:column; }
dialog#bildwaehler::backdrop{background:rgba(3,8,5,.82)}
dialog#bildwaehler .kopfzeile{
  display:flex; gap:10px; padding:12px 14px; border-bottom:1px solid var(--linie);
  position:sticky; top:0; background:var(--leaf);
}
dialog#bildwaehler input[type=search]{
  flex:1; margin:0; padding:8px 10px; background:#08170D; color:var(--bone);
  border:1px solid var(--linie); font:13px var(--mono);
}
dialog#bildwaehler .zu{background:none; color:var(--sage); border:1px solid var(--linie);
  font-weight:400}
dialog#bildwaehler .gitter{
  display:grid; gap:10px; padding:14px; overflow:auto;
  flex:1 1 auto; min-height:0;
  grid-template-columns:repeat(auto-fill,minmax(158px,1fr));
}
.kachel{
  display:grid; gap:4px; padding:5px; background:#08170D; border:1px solid var(--linie);
  color:var(--bone); font:12px/1.35 var(--mono); font-weight:400; cursor:pointer;
  text-align:left;
}
.kachel:hover{border-color:var(--acid)}
.kachel.an{border-color:var(--acid); outline:1px solid var(--acid)}
.kachel img{width:100%; aspect-ratio:3/2; object-fit:cover}
.kachel .ohne{aspect-ratio:3/2; display:grid; place-content:center; background:#0E1C13;
  color:var(--sage)}
.kachel .nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.kachel .wo{color:var(--sage); font-size:10.5px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.kachel.unsichtbar{opacity:.45}

.ordnen{margin:18px; border:1px solid var(--linie); background:var(--leaf)}
.ordnenzeile{display:flex; gap:10px; align-items:center; padding:7px 13px;
  border-bottom:1px solid var(--linie); font-size:13px}
.ordnenzeile span{flex:1}
.ordnenzeile button{padding:4px 10px}
.neuform{padding:11px 13px; gap:8px}
.neuform select{width:auto}

/* ── upload target and bulk move ──────────────────────────────── */
label.warnung select{border-color:var(--acid)}
label.warnung{color:var(--acid)}
.sammeln{display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap;
  margin:0 18px 22px; padding:12px 16px; background:#0E1C13;
  border:1px solid var(--linie)}
.sammeln .klein{flex:0 0 320px}
.sammeln .hinweis{flex:1 1 100%; margin:0; padding:0}

/* ── Rubrikfilter im Auswahlfenster ───────────────────────────── */
.rubrikfilter{display:flex; gap:6px; flex-wrap:wrap; padding:0 14px 12px;
  border-bottom:1px solid var(--linie); background:var(--leaf)}
.rubrikfilter .rf{
  padding:4px 10px; background:none; color:var(--sage); border:1px solid var(--linie);
  font:12px/1.3 var(--mono); font-weight:400; cursor:pointer; display:flex;
  align-items:center; gap:6px;
}
.rubrikfilter .rf:hover{color:var(--bone); border-color:var(--sage)}
.rubrikfilter .rf.an{color:var(--acid); border-color:var(--acid)}
.rubrikfilter .rf small{color:var(--sage); opacity:.75}
.rubrikfilter .umschalt{margin-left:auto; cursor:pointer; color:var(--sage)}
.rubrikfilter .umschalt input{width:auto; margin:0}

/* ── Fußzeile der Bildkarte: Verwendung und Löschen ───────────── */
.karte .fusszeile{display:flex; align-items:center; gap:10px; margin-top:10px;
  padding-top:9px; border-top:1px solid var(--linie)}
.karte .fusszeile .benutzt{font-size:11px; color:var(--acid); cursor:help}
.karte .fusszeile .frei{font-size:11px; color:var(--sage); opacity:.7}
.karte .fusszeile button{margin-left:auto; padding:4px 11px; font-size:12px}

/* ── Mehrfachauswahl ──────────────────────────────────────────── */
.karte .waehlen{display:inline-flex; align-items:center; gap:6px; margin:0; cursor:pointer}
.karte .waehlen input{width:auto; margin:0}
.karte.gewaehlt{outline:2px solid var(--acid); outline-offset:-1px}
.sammelleiste{position:sticky; bottom:52px; z-index:9; margin:0 18px;
  background:#0E1C13; border:1px solid var(--linie); border-bottom:0}
.wahlzeile{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap;
  padding:11px 14px; border-bottom:1px solid var(--linie)}
.wahlzeile:last-child{border-bottom:0}
.wahlzeile b{color:var(--acid); font-weight:500; align-self:center;
  min-width:110px; font-variant-numeric:tabular-nums}
.wahlzeile .klein{flex:0 0 150px}
.wahlzeile button{padding:6px 12px; font-size:12px}
.wahlzeile > button:not(.weg){background:none; color:var(--bone);
  border:1px solid var(--linie); font-weight:400}
.wahlzeile > button:not(.weg):hover{border-color:var(--acid); color:var(--acid)}
.wahlzeile .hinweis{margin:0; padding:0; align-self:center}
.wahlzeile.blass{opacity:.4; pointer-events:none}

/* ── Blöcke ziehen ────────────────────────────────────────────── */
.block summary .griff{color:var(--sage); cursor:grab; font-size:15px; line-height:1;
  padding:0 2px; user-select:none}
.block summary .griff:active{cursor:grabbing}
.block.zieht{opacity:.45; outline:2px dashed var(--acid)}
.block.ziel{border-color:var(--acid)}

/* ── Modulwahl ─────────────────────────────────────────────────────
   Kacheln statt Klappfeld (31.08.2026): vierzehn Namen sagen nicht, wie ein
   Baustein aussieht. Jede Kachel ist ein Absendeknopf, die Zeichnung ist ein
   SCHEMA in der Bildsprache der Seite — Rechteck = Foto, Balken = Schrift,
   Linie = Kleintext, gestrichelt = nur Platz. */
.modulwahl{width:100%}
.modulwahl .wohin{display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin:0 0 12px; color:var(--sage)}
.modulwahl .wohin label{display:flex; align-items:center; gap:5px; cursor:pointer;
  color:var(--bone)}
.modulwahl .schnell{display:flex; gap:8px; align-items:center; margin:0 0 14px}
.modulwahl .schnell select{width:auto; min-width:220px; margin:0}
.modulwahl .kacheln{display:grid; gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.modulwahl .kachel{
  display:grid; gap:7px; align-content:start;
  background:var(--leaf); border:1px solid var(--linie); color:var(--bone);
  padding:10px;
}
.modulwahl .kachel:hover{border-color:var(--acid)}
.modulwahl .kachel .wohin{display:flex; gap:6px; margin-top:2px}
.modulwahl .kachel .wohin button{flex:1 1 0; padding:5px 8px; font-size:11.5px;
  background:none; color:var(--sage); border:1px solid var(--linie); font-weight:400}
.modulwahl .kachel .wohin button:hover{border-color:var(--acid); color:var(--acid)}
.modulwahl .schnell > span:first-child{color:var(--sage); font-size:12px}
.modulwahl .kachel b{font-weight:500; color:var(--acid); font-size:13px}
.modulwahl .kachel small{color:var(--sage); font-size:11px; line-height:1.45}
.modulwahl .kachel svg{width:100%; height:auto; display:block; background:var(--dark)}
.modulwahl .kachel svg .foto{fill:rgba(230,240,216,.24)}
.modulwahl .kachel svg .wort{fill:var(--acid)}
.modulwahl .kachel svg .linie{fill:rgba(230,240,216,.5)}
.modulwahl .kachel svg .rand{fill:none; stroke:rgba(230,240,216,.3); stroke-width:1}
.modulwahl .kachel svg .leer{fill:none; stroke:rgba(230,240,216,.4); stroke-width:1;
  stroke-dasharray:4 3}

/* ── Formatierungsleiste und Textmodul ────────────────────────────────────
   Die Leiste sitzt zwischen Beschriftung und Textfeld, klein und ruhig: sie
   ist Werkzeug, nicht Inhalt. Die Knoepfe zeigen, was sie tun — F ist fett,
   K kursiv, U unterstrichen. */
.formatleiste{ display:flex; gap:4px; margin:2px 0 4px; }
.formatleiste button{
  font:inherit; font-size:11px; line-height:1;
  padding:4px 7px; min-width:26px;
  color:var(--bone); background:rgba(230,240,216,.07);
  border:1px solid rgba(230,240,216,.18); border-radius:3px; cursor:pointer;
}
.formatleiste button:hover{ background:rgba(230,240,216,.16); border-color:var(--acid); }
/* Eine Spalte, die ueber der eingestellten Spaltenzahl liegt: sie wird nicht
   ausgegeben, ihr Text bleibt aber erhalten — also sichtbar zurueckgenommen
   statt versteckt, sonst sucht man ihn auf der Seite. */
.zeile.ausserhalb{ opacity:.55; }

/* WO MAN GERADE WAR — der Block, zu dem nach einem Speichern oder Duplizieren
   gesprungen wird, leuchtet kurz auf (02.09.2026). Ohne das Aufleuchten weiss
   man nach dem Sprung nicht, ob die Seite gescrollt hat oder ohnehin dort
   stand. 1,6 s, dann nimmt admin.js die Klasse wieder weg. */
.block.hierher{ outline:2px solid var(--acid); outline-offset:2px; }

/* ── Statistik (03.09.2026) ────────────────────────────────────────────────
   Eine Leseansicht, kein Formular: keine Eingabefelder, keine Knöpfe, nichts
   was schreibt. Deshalb darf sie dichter stehen als der Rest des Admins. */
.statwerte{display:flex; flex-wrap:wrap; gap:1px; background:var(--linie);
  margin:18px; border:1px solid var(--linie)}
.statwerte .wert{flex:1 1 130px; padding:14px 16px; background:var(--leaf)}
.statwerte .wert b{display:block; font-size:26px; font-weight:400; color:var(--acid);
  line-height:1.15}
.statwerte .wert span{display:block; margin-top:4px; font-size:10.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--sage)}
.statwerte .wert.leise b{color:var(--sage); font-size:20px}

.statblock{margin:26px 18px}
.statblock h2{font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--acid); font-weight:500; margin:0 0 10px}
.statblock h2 small{color:var(--sage); letter-spacing:.1em; margin-left:6px}
.statspalten{display:grid; grid-template-columns:repeat(auto-fit,minmax(310px,1fr))}

.stattabelle{width:100%; border-collapse:collapse; font-size:13px}
.stattabelle td{padding:5px 8px; border-bottom:1px solid var(--linie);
  vertical-align:top; word-break:break-word}
.stattabelle td.zahl{text-align:right; color:var(--acid); white-space:nowrap; width:1%}
.stattabelle tr.leise td{color:var(--sage)}
.stattabelle td.leise{color:var(--sage)}
.stattabelle a{text-decoration:none; border-bottom:1px solid var(--linie)}

/* Der Verlauf ist bewusst kein Diagramm aus einer Bibliothek: gebraucht wird
   die Form der Kurve, und die zeigen Balken aus <i>-Elementen genauso — ohne
   eine einzige Zeile fremdes JavaScript in einem Adminbereich. */
.verlauf{display:flex; align-items:flex-end; gap:2px; height:130px;
  padding:10px 0 0; border-bottom:1px solid var(--linie); overflow-x:auto}
.verlauf .saeule{flex:1 0 14px; display:flex; flex-direction:column;
  justify-content:flex-end; height:100%; min-width:14px}
.verlauf .saeule i{display:block; background:var(--acid); opacity:.75; min-height:2px}
.verlauf .saeule:hover i{opacity:1}
.verlauf .saeule span{font-size:8.5px; color:var(--sage); text-align:center;
  margin-top:4px; writing-mode:vertical-rl; align-self:center; white-space:nowrap}

.statbilder{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:10px}
.statbilder figure{margin:0; background:var(--leaf); border:1px solid var(--linie)}
.statbilder img{aspect-ratio:3/2; object-fit:cover; width:100%}
.statbilder figcaption{padding:6px 8px; font-size:11px; line-height:1.4}
.statbilder figcaption b{color:var(--acid); font-weight:400}
.statbilder figcaption span{display:block; color:var(--sage); font-size:9.5px;
  word-break:break-all}

/* Angemeldet bleiben — die Anmeldemaske hat sonst nur Blocklabels, ein
   Kästchen mit Text daneben braucht die Zeile (03.09.2026). */
body.maske label.haken{display:flex; align-items:center; gap:8px; cursor:pointer;
  margin:0 0 16px}
body.maske label.haken input{width:auto; margin:0}

/* Eine Zeitraumstufe, die weiter zurueckreicht als die Logdateien, zeigt
   zwangslaeufig dasselbe wie die naechstkleinere. Sie bleibt anklickbar —
   verschwinden wuerde erklaeren, dass sie fehlt, statt WARUM (03.09.2026). */
.filter a.ohnewirkung{opacity:.4}
.filter a.ohnewirkung.an{opacity:1}
.filter small.wink{margin-left:10px}

/* JEDE ZAHL IST EIN LINK (03.09.2026, Rogers Wunsch "kann man die zahlen
   verlinken auf die echten einträge die dahinterstehen"). Sie sollen als
   anklickbar erkennbar sein, ohne dass die Tabellen zu einem Feld aus
   Unterstrichen werden — deshalb erst beim Zeigen eine Linie. */
.stattabelle td.zahl a{color:var(--acid); text-decoration:none; border-bottom:1px solid transparent}
.stattabelle td.zahl a:hover{border-bottom-color:var(--acid)}
.stattabelle td.leise a{color:var(--sage); text-decoration:none; border-bottom:1px solid transparent}
.stattabelle td.leise a:hover{border-bottom-color:var(--sage)}
.stattabelle td.schlecht{color:var(--rot)}
.stattabelle td.nowrap{white-space:nowrap}
.stattabelle tr.kopfzeile td{color:var(--sage); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; border-bottom-color:var(--acid)}

/* Die Kennzahlen oben sind jetzt Links — sie muessen sich wie Flaechen
   anfuehlen, nicht wie Text mit Unterstrich. */
a.wert{text-decoration:none; color:inherit}
a.wert:hover{background:#12301B}
a.wert:hover b{color:var(--acid)}

/* Die Balken des Verlaufs ebenso. */
a.saeule{text-decoration:none}

/* Die Rohzeilen sind breit; sie duerfen scrollen statt die Seite zu sprengen. */
.rohliste{overflow-x:auto}
.rohliste .stattabelle{min-width:900px; font-size:12px}
.rohliste .stattabelle td{padding:4px 7px}