/* designs/shadowrun/shadowrun.css - THE SHADOWRUN DESIGN (22.09.2026, issue #17).

   THREE PARTS, IN THIS ORDER:
     1. tokens and surface  - the colours measured from the German SR5 core rulebook and
                              the three fonts (Adobe Fonts kit "Persona Shadowrun",
                              oax1gov, loaded by designs/shadowrun/kopf.php)
     2. structure           - an INDEPENDENT COPY of assets/persona.css as of 22.09.2026,
                              so every page that has no Shadowrun template of its own
                              still works. It is this design's own from now on: change it
                              here freely, never expect assets/persona.css to follow.
     3. the Shadowrun layer - what makes it look like the books and the character sheet

   COLOURS, measured in the book (see the old world file for the method):
     page ground #dcdcdc, headings #9a060c, head band #380810 -> #600000.
   FONTS, measured in the book's PDF and matched on Adobe Fonts:
     Armadura (headings)       -> Microgramma Extended (Bold/Medium)
     Univers Condensed (boxes) -> Univers Next Pro Condensed (same family)
     Friz Quadrata (body)      -> Optima nova (Friz is not on Adobe Fonts)
*/

/* =============================================== 1. tokens and surface ===== */
:root{
  --papier:#dcdcdc;
  --papier-hell:#eeeeee;
  --papier-tief:#c9c7c7;

  --text:#17171a;
  --leise:#56565c;
  --sehr-leise:#87878d;

  --akzent:#9a060c;
  --akzent-hell:#b8232a;
  --gold:#8a6a1e;
  --warnung:#9a060c;
  --gut:#3f6b4f;

  --rand:#a8a8aa;
  --karte:linear-gradient(180deg,#f0f0f0,#e8e8e8);
  --karte-fest:#e6e6e6;

  --serif:"optima-nova-lt-pro",Optima,Candara,"Segoe UI",sans-serif;
  --schrift:var(--serif);
  --radius:0px;

  --blut:#9a060c;
  --bund:#2f5d7a;
  --feind:#7a4a1c;
  --hintergrund:#1b1b1f;

  /* Only in this design: the two book fonts beside the body text, and the band. */
  --sr-kopf:"microgramma-extended","Eurostile","Bank Gothic",sans-serif;
  --sr-schmal:"univers-next-pro-condensed","Arial Narrow","Roboto Condensed",sans-serif;
  --sr-band:linear-gradient(90deg,#3a0810,#620004 60%,#3a0810);
  --sr-linie:rgba(154,6,12,.55);
}

html{background:var(--hintergrund)}
/* THE CITY BEHIND THE PAGE (22.09.2026, Roger: "das hintergrund grau kann auch gerne noch
   struktur bekommen"). The pale skyline of the official character sheet (core rulebook,
   PDF pages 493/494): the full-page background images of both sheet pages, taken out of
   the PDF WITHOUT the form on top (they are separate images there), cross-faded over
   200px because the two pages do not join (1456x1170, 89 KB). Served after login only:
   ~/persona_data/designs/shadowrun/stadt.jpg via bild.php?dg=. MULTIPLIED onto the grey,
   so the buildings sit in the ground as darker greys instead of a white picture on top.
   The adventure pages set their own body background inline and are not affected.
   ON ITS OWN FIXED LAYER since 25.09.2026 (Roger: "die seite wird beim scrollen schon recht
   langsam"): it was the body's background with background-attachment:fixed, which the
   browser repaints on every scroll step. Measured with a DevTools trace of a scroll through
   Diesel's tab Werte: Paint 24 -> 2 ms, Layerize 69 -> 9, GPU 154 -> 28 without it, while
   switching off filters, masks, blend modes, clip-paths or shadows changed next to nothing.
   Now body::after, position:fixed behind the content (z-index -1; the body paints no
   background of its own, else it would cover the layer), painted once and only composited
   while scrolling. The adventure pages (body.abenteuer-seite) keep theirs - no layer there. */
body{background:none}
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;will-change:transform;
  background-color:#c9c9cc;
  background-image:
    radial-gradient(ellipse at 20% 6%,  rgba(255,255,255,.45), transparent 55%),
    radial-gradient(ellipse at 88% 94%, rgba(50,50,56,.20),    transparent 55%),
    url("../../bild.php?dg=shadowrun&n=stadt");
  background-size:auto,auto,cover;
  background-position:0 0,0 0,center top;
  background-repeat:no-repeat;
  background-blend-mode:normal,normal,multiply;
}
body.abenteuer-seite::after{display:none}
/* A fine print grain, as on the book pages. */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  opacity:.10;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.linienpapier{
  background-image:repeating-linear-gradient(to bottom,
    transparent 0 1.6rem, rgba(154,6,12,.14) 1.6rem 1.62rem);
  line-height:1.62rem;
}

/* =============================================== 2. structure (copy) ======== */
/* persona.css — STRUKTUR, KEINE FARBE.
 *
 * Every colour, texture and radius comes from the theme file loaded before this one
 * (assets/thema-<name>.css). NOT ONE LITERAL COLOUR BELONGS IN HERE - a single
 * hardcoded #hex and the next theme is only half a theme. The two exceptions are
 * transparent shadows, which darken whatever is underneath rather than paint.
 */

*{box-sizing:border-box}
body{margin:0;color:var(--text);font:16px/1.62 var(--schrift)}
.seite{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:1.3rem 1.2rem 4rem}

h1,h2,h3{font-family:var(--serif);font-weight:600;margin:0}

/* ---------------------------------------------------------------- Kopf --- */
/* DREI SPALTEN, NICHT space-between: das Zeichen soll in der Mitte der SEITE stehen,
   nicht in der Mitte zwischen sich und dem Menue. Mit space-between wandert es, sobald
   das Menue seine Breite aendert - angemeldet drei Punkte, abgemeldet keinen. Die
   leere erste Spalte haelt die Mitte fest. */
.kopf{display:grid;grid-template-columns:1fr auto 1fr;align-items:end;gap:1rem;
  padding-bottom:1.2rem}   /* 1,2 + 0,2 der Zierlinie = 1,4rem, das Doppelte von vorher */
/* Der Kopf traegt NUR das Zeichen, den Schriftzug traegt der Anmeldekasten
   (Roger, 06.09.2026). Das <a> hat damit keinen Text mehr - das alt des Bildes IST
   sein zugaenglicher Name, es darf hier also nicht leer sein. */
.marke{grid-column:2;justify-self:center;display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--serif);font-size:1.5rem;letter-spacing:.3em;text-transform:uppercase;
  color:var(--akzent);text-decoration:none}
.marke img{height:4rem;width:auto;display:block}
/* letter-spacing haengt auch HINTER dem letzten Buchstaben - zentriert waere die
   Bild-Wortmarke dadurch um 0,3em nach links versetzt. */
.marke .wort{margin-right:-.3em}
.kopf nav{grid-column:3;justify-self:end}
.kopf nav a{color:var(--leise);text-decoration:none;margin-left:1.2rem;
  font-size:.78rem;letter-spacing:.1em;text-transform:uppercase}
.kopf nav a:hover{color:var(--akzent)}

/* --------------------------------------------- Die aktive Welt im Kopf --- */
/* SPALTE 1, DIE BIS HEUTE LEER WAR (09.09.2026). Sie bleibt 1fr wie die Leiste rechts,
   also steht die Marke weiter in der Mitte der SEITE - das Wappen ist schmaler als das
   Menue und verschiebt daher nichts. grid-column steht trotzdem ausdruecklich da:
   abgemeldet fehlt der ganze Block, und eine automatische Platzierung waere dann eine
   andere als angemeldet. */
/* NICHT .weltwahl - so heissen bereits die <select> auf dem Bogen und in der Szene
   (select.weltwahl weiter unten). Eine zweite Bedeutung fuer denselben Namen haette
   position:relative auf jene Auswahlfelder gelegt und querySelector() an die blosse
   Dokumentreihenfolge gehaengt. */
.weltaktiv{grid-column:1;justify-self:start;position:relative}
/* FESTE GROESSE UND BLOCKEBENE - sonst SPRINGT das Zeichen beim Umschalten
   (Roger, 09.09.2026: "das logo links springt wenn man von alle auf eine welt
   umschaltet, die position vertikal ist unterschiedlich").
   DIE HOEHE WAR NIE DAS PROBLEM: Wappen und Platzhalter sind beide 44x44. Es war die
   GRUNDLINIE. Ein <button> ist inline-level und holt seine Baseline aus dem Inhalt -
   ein <img display:block> liefert die Unterkante, ein <span display:flex> die Baseline
   seines ersten Kindes, also die des 22px-Schilds. Zwei verschiedene Baselines heissen
   zwei verschiedene Hoehen in der Zeile, obwohl beide Kaesten gleich gross sind.
   display:flex macht den Knopf blockartig: er nimmt an der Baseline-Ausrichtung gar
   nicht mehr teil, und die feste Groesse macht beide Zustaende deckungsgleich, egal
   was einmal darin steht. 50 = 44 Inhalt + 2x2 Innenabstand + 2x1 Rahmen
   (box-sizing:border-box gilt global). line-height:0 ist damit weg - es war der
   Behelf, den das Zentrieren jetzt richtig erledigt. */
.weltknopf{display:flex;align-items:center;justify-content:center;width:50px;height:50px;
  background:none;border:1px solid var(--rand);border-radius:var(--radius);
  padding:2px;cursor:pointer;color:var(--leise)}
.weltknopf:hover{border-color:var(--akzent);color:var(--akzent)}
.weltknopf img{width:44px;height:44px;object-fit:cover;display:block;
  border-radius:calc(var(--radius) - 1px)}
/* display:block SCHLAEGT DAS hidden-Attribut - ohne diese Zeile waere das Wappen auch
   dann sichtbar (als leerer Rahmen), wenn keine Welt aktiv ist. Dieselbe Falle wie bei
   img.ersatz gegen .bildnis img (Abschnitt 36), nur mit dem Attribut statt einer
   Klasse. */
.weltaktiv [hidden]{display:none}
/* OHNE AKTIVE WELT EIN BLASSES SCHILD - genau so gross wie ein Wappen, damit der Kopf
   beim Wechseln nicht springt. */
.weltleer{width:44px;height:44px;display:flex;align-items:center;justify-content:center}
.weltleer svg{width:22px;height:22px;opacity:.55}
/* Die Liste haengt UNTER dem Knopf: der Kopf steht am oberen Seitenrand, nach oben
   waere kein Platz - anders als bei der Bildwahl weit unten auf dem Bogen. */
.weltmenue{position:absolute;top:calc(100% + .4rem);left:0;z-index:40;margin:0;
  padding:.3rem;list-style:none;min-width:13rem;background:var(--papier-hell);
  border:1px solid var(--rand);border-radius:var(--radius);
  box-shadow:0 6px 18px rgba(0,0,0,.18)}
.weltmenue li{margin:0}
.weltmenue button{width:100%;display:flex;align-items:center;gap:.5rem;background:none;
  border:0;padding:.35rem .5rem;font:inherit;font-size:.82rem;color:var(--text);
  text-align:left;cursor:pointer;border-radius:calc(var(--radius) - 2px)}
.weltmenue button:hover{background:var(--papier-tief)}
.weltmenue button.ist{color:var(--akzent);font-weight:600}
.weltmenue img{width:22px;height:22px;object-fit:cover;border:1px solid var(--rand);
  border-radius:2px;flex:none}
.weltmenue span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* -------------------------------------------------------- Zierlinie ------ */
.zier{display:flex;align-items:center;gap:.7rem;margin:.2rem 0 1.3rem}
/* DIE UNTERE LINIE SPIEGELT DIE OBERE (Roger, 06.09.2026). Mit denselben Werten sass
   sie nicht symmetrisch, sondern schief: oben stehen 1,3rem ZWISCHEN Linie und Inhalt,
   unten waeren es 0,2rem - der Abstand, der oben ueber der Linie liegt. Gespiegelt
   sind es beide Male 1,3rem zum Inhalt und 0,2rem zum Rand. */
.zier.unten{margin:1.3rem 0 .2rem}
.zier::before,.zier::after{content:"";flex:1;height:0;
  border-top:1px solid var(--akzent);box-shadow:0 3px 0 -2px var(--akzent)}
.zier i{width:9px;height:9px;transform:rotate(45deg);background:var(--akzent);flex:none}
.zier.klein{margin:.9rem 0 .8rem}
.zier.klein::before,.zier.klein::after{border-color:var(--rand);box-shadow:none}
.zier.klein i{background:var(--rand);width:6px;height:6px}

/* ------------------------------------------------------- Kasten + Ecken --- */
.kasten{position:relative;padding:1rem 1.1rem;background:var(--karte);
  border:1px solid var(--rand);border-radius:var(--radius);
  box-shadow:inset 0 0 0 3px var(--papier-hell), inset 0 0 0 4px var(--rand),
             0 1px 2px rgba(0,0,0,.14)}
.ecke{position:absolute;width:22px;height:22px;color:var(--gold);opacity:.85;pointer-events:none}
.ecke.lo{top:5px;left:5px}
.ecke.ro{top:5px;right:5px;transform:scaleX(-1)}
.ecke.lu{bottom:5px;left:5px;transform:scaleY(-1)}
.ecke.ru{bottom:5px;right:5px;transform:scale(-1,-1)}

.rubrik{font-family:var(--serif);font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--akzent);margin:0 0 .5rem;font-weight:700}
.hint{color:var(--leise);font-size:.78rem;font-style:italic;margin:0 0 .55rem}
.zahl{color:var(--leise);font-weight:400;font-size:.9rem}
/* Neben einer RUBRIK muss die Zahl schrumpfen: .9rem sind kleiner als eine Ueberschrift,
   aber groesser als die .72rem der Rubrik - die Zahl waere dort das Groesste in der
   Zeile. Und die Sperrung von .24em gehoert zur Versalzeile, nicht in eine Klammer. */
.rubrik .zahl{font-size:.72rem;letter-spacing:normal}
.leer{color:var(--leise);font-style:italic}

/* ------------------------------------------------------------ Bedienung --- */
button,.dateiknopf span{font:inherit;font-family:var(--serif);font-size:.72rem;
  letter-spacing:.12em;text-transform:uppercase;padding:.32rem .7rem;cursor:pointer;
  color:var(--leise);background:linear-gradient(180deg,var(--papier-hell),var(--papier-tief));
  border:1px solid var(--rand);border-radius:var(--radius)}
button:hover,.dateiknopf:hover span{color:var(--akzent);border-color:var(--akzent)}
button:disabled{opacity:.5;cursor:default;color:var(--leise);border-color:var(--rand)}
button.haupt{color:var(--papier-hell);background:var(--akzent);border-color:var(--akzent)}
button.haupt:hover{background:var(--akzent-hell);color:var(--papier-hell)}
.zauberstab{color:var(--akzent);border-color:var(--akzent-hell)}
.zurueck{color:var(--warnung)}

input[type=text],input[type=password],textarea{
  width:100%;font:inherit;font-family:var(--serif);color:var(--text);
  background:rgba(255,252,242,.35);border:1px solid var(--rand);
  border-radius:var(--radius);padding:.5rem .65rem}
textarea{resize:vertical}
input:focus,textarea:focus{outline:none;border-color:var(--akzent);
  background:rgba(255,252,242,.6)}
label{font-size:.8rem;color:var(--leise)}

/* DIE BILDLAUFLEISTEN GEHOEREN ZUM THEMA (20.09.2026, Roger: "können wir die scrollbalken
   an das design anpassen bitte"). Zwei Wege, und beide sind noetig: scrollbar-color ist
   der Standard (Firefox, Chrome ab 121), ::-webkit-scrollbar der aeltere Weg fuer alles
   davor. Setzt ein Browser den Standard um, ignoriert er die Pseudoelemente - deshalb
   muessen beide dasselbe meinen.
   DIE FARBEN KOMMEN AUS DEM THEMA, wie alles hier: die dunkle Buehne schreibt --rand um
   und bekommt ihre Leisten damit ohne eine zweite Regel (Abschnitt 12). Nur die Leiste des
   FENSTERS haengt an <html> und sieht die Variablen des <body> nicht - dafuer steht eine
   Zeile in abenteuer.css. */
html{scrollbar-color:var(--rand) transparent;scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--rand);border:2px solid transparent;
  background-clip:content-box;border-radius:var(--radius)}
::-webkit-scrollbar-thumb:hover{background:var(--sehr-leise);background-clip:content-box}
::-webkit-scrollbar-corner{background:transparent}

/* ------------------------------------------------------------- Anmelden --- */
body.schmal .seite{max-width:400px;padding-top:9vh}
.anmelden{display:grid;gap:.7rem}
.anmelden h1{text-align:center;font-size:1.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--akzent)}
.fehler{color:var(--warnung);font-size:.85rem;margin:0;font-weight:600}
.ankreuz{display:flex;align-items:center;gap:.5rem;cursor:pointer}
.ankreuz input{accent-color:var(--akzent)}
/* GESCHLECHT UND ALTER STEHEN NEBENEINANDER (09.09.2026, Roger: "das sieht sonst so voll
   aus"). Zuerst waren es zwei Ankreuz-Zeilen mit nachgestellter Erklaerung; das Zeichen
   ersetzt den Text, und nebeneinander bleibt EINE Zeile statt zweier. Die Spalte ist
   280 Pixel breit (.bogen), zwei Felder mit Zeichen passen darin nebeneinander. */
.merkmale{display:flex;gap:.5rem;align-items:center}
.merkmal{display:flex;align-items:center;gap:.3rem;flex:1 1 0;min-width:0;cursor:pointer}
.merkmal .ic{width:16px;height:16px;flex:none;color:var(--akzent);opacity:.8}
.merkmal select,.merkmal input{width:100%;min-width:0;font:inherit;font-size:.82rem;
  padding:.1rem .2rem;color:var(--text);background:var(--papier-hell);
  border:1px solid var(--rand);border-radius:var(--radius)}
.merkmal input::placeholder{color:var(--sehr-leise)}

/* ----------------------------------------------------------- Übersicht --- */
.leiste{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  margin-bottom:1rem;flex-wrap:wrap}
.leiste-knoepfe{display:flex;gap:.5rem;align-items:center}

/* Filterleiste. Sie schreibt nichts - alles steht in der URL, siehe index.php. */
.sieb{display:flex;gap:.8rem;align-items:flex-end;flex-wrap:wrap;margin:0 0 1.2rem;
  padding:.7rem .9rem;border-top:1px solid var(--rand);border-bottom:1px solid var(--rand)}
.sieb label{display:grid;gap:.15rem}
.sieb label span{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--akzent)}
.sieb select,.sieb input[type=text]{font:inherit;font-family:var(--serif);font-size:.86rem;
  color:var(--text);background:rgba(255,252,242,.35);border:1px solid var(--rand);
  border-radius:var(--radius);padding:.32rem .45rem}
.sieb select:focus,.sieb input:focus{outline:none;border-color:var(--akzent)}
.sieb .suche{flex:1;min-width:12rem}
.sieb .suche input{width:100%}
/* Die Zeichenzeile der Karte: Weltwappen, K fuer Kindroid, oder der Weltname als
   Text. FLEX STATT text-align (07.09.2026), weil seit dem K zwei Zeichen darin
   stehen koennen - die Luecke kommt jetzt aus gap und nicht mehr aus einem Rand am
   Bild, sonst muesste jedes neue Zeichen seinen eigenen Abstand mitbringen. */
.meta.welt{color:var(--akzent);font-style:italic;
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.4rem}

.raster{list-style:none;margin:0;padding:0;display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.raster .kasten{padding:.75rem}
.raster a{display:block;text-decoration:none;color:inherit}
.raster .bildnis{aspect-ratio:3/4;overflow:hidden;background:var(--papier-tief);
  border:1px solid var(--rand);margin-bottom:.6rem}
.raster .bildnis img,.raster .bildnis svg{width:100%;height:100%;object-fit:cover;display:block}
.raster h2{font-size:1.1rem;text-align:center;line-height:1.2}
/* Die Hinweiszeile UNTER dem Inhalt (Roger, 14.09.2026, mit Screenshot: "auf jeder seite wo
   so ein text drunter steht"): Personas und Szenen unter dem Raster, die Karte unter ihrem
   Kasten. Sie klebte daran, weil .hint nur einen unteren Rand hat. Abstand wie zwischen
   den Karten; Hinweiszeilen an anderen Stellen trifft die Regel nicht. */
.raster + .hint,.kasten.karte + .hint{margin-top:1rem}
.meta{color:var(--leise);font-size:.76rem;text-align:center;margin:.25rem 0 0;
  letter-spacing:.06em}

/* --------------------------------------------------------------- Bogen --- */
.bogen{display:grid;grid-template-columns:280px 1fr;gap:1.1rem;align-items:start}
@media(max-width:880px){.bogen{grid-template-columns:1fr}}
.felder{display:grid;gap:1rem}

.bildnisrahmen{position:relative;padding:7px;background:var(--papier-tief);
  border:1px solid var(--rand);box-shadow:inset 0 0 0 2px var(--papier-hell)}
/* position:relative seit 07.09.2026 fuer den Speichern-Knopf, der IM Bild sitzt.
   Ohne das waere sein Bezugsrahmen .bildnisrahmen - und weil .bildnis overflow:hidden
   hat, wuerde er an der Kante beschnitten. Sonst aendert die Zeile nichts: es gibt
   keinen anderen absolut gesetzten Nachfahren hier drin. */
.bildnis{position:relative;aspect-ratio:3/4;overflow:hidden;background:var(--papier-tief);
  border:1px solid var(--leise)}
.bildnis img,.bildnis svg{width:100%;height:100%;object-fit:cover;display:block}
.steckbrief .name{margin-top:.75rem;text-align:center;font-size:1.25rem;
  border-color:transparent;background:transparent}
.steckbrief .name:focus{border-color:var(--akzent);background:rgba(255,252,242,.5)}

.fakten{list-style:none;margin:0;padding:0;font-size:.85rem}
.fakten li{display:flex;justify-content:space-between;gap:.6rem;padding:.32rem 0;
  border-bottom:1px dotted var(--rand)}
.fakten li:last-child{border-bottom:0}
.fakten .k{color:var(--leise);letter-spacing:.04em}
.fakten a{color:var(--text);text-decoration:none;border-bottom:1px dotted var(--rand)}
.fakten a:hover{color:var(--akzent)}

/* ------------------------------------------------------------------ Welt --- */
select.weltwahl{width:100%;font:inherit;font-family:var(--serif);font-size:.9rem;
  color:var(--text);background:rgba(255,252,242,.35);border:1px solid var(--rand);
  border-radius:var(--radius);padding:.4rem .5rem}
select.weltwahl:focus{outline:none;border-color:var(--akzent)}
.hint a{color:var(--akzent)}
.zurueck-link{color:var(--leise);text-decoration:none;font-size:.74rem;
  letter-spacing:.12em;text-transform:uppercase;align-self:center}
.zurueck-link:hover{color:var(--akzent)}
.weltliste{list-style:none;margin:0;padding:0;display:grid;gap:1rem}
.weltliste a{text-decoration:none;color:inherit}
.weltliste a:hover h2{color:var(--akzent)}
.weltliste .meta{text-align:left}

/* --------------------------------------------------------------- Felder --- */
/* UMBRECHEN, NICHT UEBERLAUFEN (Roger, 06.09.2026: "button reichen aus dem
   fensterbereich raus"). Die Werkzeugleiste ist von zwei Knoepfen auf fuenf
   gewachsen - KI, Zurueck, Kopieren, Beziehungen, Kindroid -, und eine Zeile,
   die nicht umbrechen darf, schiebt den Rest aus dem Fenster statt zu wachsen. */
.fkopf{display:flex;align-items:center;gap:.55rem;margin-bottom:.1rem;flex-wrap:wrap}
.fkopf h2{font-size:1.06rem;letter-spacing:.02em;cursor:pointer;white-space:nowrap}
.fkopf h2:hover{color:var(--akzent)}

/* Zuklappen. Der Kopf bleibt stehen, der Rumpf verschwindet, und die Vorschau
   uebernimmt: ein geschlossener Bogen liest sich wie ein Inhaltsverzeichnis. */
/* FESTE BREITE (14.09.2026): der Knopf wechselt zwischen ▾ und ▸, und ein Zeichen, das seine
   Breite mitbringt, schiebt die Ueberschrift daneben beim Klappen seitlich. */
.klapp{width:1.4rem;padding:.1rem 0;text-align:center;line-height:1;border-color:transparent;
  background:none;color:var(--leise);font-size:.8rem;letter-spacing:0}
.klapp:hover{border-color:var(--rand)}
.vorschau{flex:1 1 4rem;min-width:0;color:var(--sehr-leise);font-size:.78rem;font-style:italic;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Beim offenen Abschnitt bleibt die Vorschau als Abstandhalter stehen (flex:1
   schiebt die Werkzeuge nach rechts) - nur unsichtbar, nicht entfernt. */
.feld:not(.zu) .vorschau{visibility:hidden}
/* NUR UNTEN KNAPPER (14.09.2026, Roger: "die ueberschriften der bloecke springen beim auf
   und zuklappen"). Hier stand auch padding-top:.7rem gegen die 1rem von .kasten - die
   Ueberschrift rutschte beim Zuklappen um .3rem hoch und beim Aufklappen wieder herunter. */
.feld.zu{padding-bottom:.7rem}
/* ALLES AUSSER KOPF UND ECKEN verschwindet - als Aufzaehlung einzelner Kindklassen
   geschrieben, hatte der Verlauf mit seiner Liste beim Zuklappen offen dagestanden. */
.feld.zu > *:not(.fkopf):not(.ecke){display:none}
.feld.zu .fkopf{margin-bottom:0}
.werkzeug{display:flex;gap:.35rem;flex-wrap:wrap;justify-content:flex-end;
  margin-left:auto}
/* Kleiner als sonst: fuenf Knoepfe in einer Kopfzeile brauchen jeden Millimeter,
   und sie stehen neben einer Ueberschrift, nicht fuer sich. */
.werkzeug button{font-size:.66rem;padding:.26rem .5rem;letter-spacing:.08em}
.feld.laeuft textarea{opacity:.45}
.feld textarea{background:rgba(255,252,242,.3)}
.briefing textarea{min-height:7rem}

.mass{display:flex;align-items:center;gap:.7rem;margin-top:.55rem}
.balken{flex:1;height:7px;background:var(--papier-tief);border:1px solid var(--rand)}
.balken i{display:block;height:100%;background:var(--leise);transition:width .2s}
.balken.eng i{background:var(--gold)}
.balken.voll i{background:var(--warnung)}
.zaehler{font-size:.74rem;color:var(--leise);font-variant-numeric:tabular-nums;
  min-width:5.6rem;text-align:right;letter-spacing:.03em}
.zaehler.drueber{color:var(--warnung);font-weight:700}
.preis{font-size:.7rem;color:var(--sehr-leise);font-variant-numeric:tabular-nums;
  letter-spacing:.04em}
.stand{font-size:.74rem;color:var(--leise);letter-spacing:.08em;text-transform:uppercase}
.stand.offen{color:var(--warnung);font-weight:700}
.hinweis{color:var(--akzent);font-size:.85rem;margin:-.4rem 0 .9rem;font-style:italic}

/* --------------------------------------------------------------- Bilder --- */
.bilder-liste{list-style:none;margin:0 0 .7rem;padding:0;display:grid;gap:.5rem;
  grid-template-columns:repeat(auto-fill,minmax(84px,1fr))}
.bilder-liste li{border:1px solid var(--rand);background:var(--papier-tief);padding:3px}
.bilder-liste li.haupt{border-color:var(--akzent);box-shadow:0 0 0 1px var(--akzent)}
.bilder-liste img{width:100%;aspect-ratio:1;object-fit:cover;display:block}
/* REIHENFOLGE ZIEHEN (07.09.2026). touch-action:none MUSS am Bild stehen, sonst
   scrollt das Telefon die Seite, statt die Kachel zu bewegen - der Browser entscheidet
   das, bevor das erste pointermove ankommt, und ist dann nicht mehr umzustimmen.
   DER PREIS: eine Wischgeste, die GENAU auf einer Miniatur beginnt, scrollt nicht
   mehr. Die Kacheln sind 84 Pixel breit und stehen in der linken Spalte; daneben
   scrollt alles wie vorher. */
.bilder-liste li{touch-action:none}
.bilder-liste img,.bilder-liste .verborgen{-webkit-user-drag:none;
  -webkit-user-select:none;user-select:none}
.bilder-liste li.zieht{opacity:.5;outline:2px dashed var(--akzent);outline-offset:-2px}
.bilder-liste.ziehen li{cursor:grabbing}
.bilder-liste.ziehen img{pointer-events:none}   /* sonst liegt das Bild unter dem Zeiger */
.bild-knoepfe{display:flex;gap:.2rem;margin-top:3px}
.bild-knoepfe button{flex:1;font-size:.6rem;padding:.2rem .1rem;letter-spacing:.04em}
/* "OK?" - DER SCHARFE WEG-KNOPF (13.09.2026, Abschnitt 62). Rot wie .gefahr, aber so
   klein wie sein Nachbar: die Kachel ist 84 Pixel breit, und .gefahr braechte Groesse
   und Sperrung mit. */
.bild-knoepfe button.scharf{color:var(--papier-hell);background:var(--warnung);
  border-color:var(--warnung)}
/* DER KOPIERKNOPF DES PROMPTS (13.09.2026, Abschnitt 65): ein Sinnbild, nur so breit wie
   noetig - Haupt und Weg teilen sich den Rest der Kachel. */
.bild-knoepfe button.bild-prompt-kopieren{flex:none;padding:.2rem .25rem;line-height:0}
.dateiknopf input[type=file]{display:none}
.dateiknopf span{display:inline-block}

/* -------------------------------------------------------------- Verlauf --- */
/* ABSTAND FUER DIE ABSCHNITTE HINTER DEM FORMULAR (Roger, 06.09.2026: "ueber
   beziehungen fehlt ein abstand"). Die Abschnitte INNERHALB der Felderspalte
   bekommen ihren Abstand vom Raster (.felder{gap:1rem}); Beziehungen und Verlauf
   stehen ausserhalb des Formulars und damit ausserhalb des Rasters - sie brauchen
   ihn als Rand. Der Verlauf hatte ihn, die Beziehungen nicht.
   ONE GAP FOR ALL, THE GRID'S 1rem (19.09.2026, Roger with a screenshot: "bitte abstand
   vereinheitlichen"). Three different gaps were visible: 1rem inside the field column,
   1.4rem before Beziehungen and Verlauf, and NONE before Ausruestung - the section of the
   same day that nobody gave this margin. */
.beziehungen,.ausruestung,.direktchat,.erinnerungen,.verletzungen,.verlauf{margin-top:1rem}
/* Abgeschlossene Verletzungen bleiben stehen und treten zurueck - ein verlorener Arm
   gehoert zur Geschichte, auch wenn er laengst Cyberware ist (20.09.2026). */
/* Eintragen und abschliessen gehen auch von Hand (20.09.2026): das Feld steht unter dem
   Hinweis, der Abschluss in der Kopfzeile des offenen Eintrags. Beides bricht auf schmalem
   Schirm um, statt die Zeile zu sprengen. */
/* Luft zwischen dem Eingabefeld und der Liste: ohne sie las sich die erste Zeile des
   ersten Eintrags als zweite Zeile des Formulars (Rogers Ausschnitt, 20.09.2026). */
.verletzung-neu{display:flex;flex-wrap:wrap;gap:.4rem;margin:.6rem 0 1.1rem}
.verletzung-neu input[name="text"]{flex:2 1 14rem}
.verletzung-neu input[name="abzug"]{flex:1 1 9rem}
.verletzung-zu{display:flex;gap:.3rem;align-items:center}
.verletzung-zu input{width:6rem;font-size:.78rem;padding:.15rem .4rem}
/* EIN EINTRAG IST EINE ZEILE (20.09.2026, Roger: "evtl. einfach alles in eine zeile
   ist einfacher"): der Text nimmt den Platz, Datum und Knoepfe stehen rechts, und auf
   schmalem Schirm bricht es um. Die Erinnerungen daneben bleiben zweizeilig. */
.verletzungs-liste li{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .7rem}
.verletzungs-liste .er-text{flex:1 1 16rem;margin:0}
.verletzungs-liste .wann{margin-left:auto}
.verletzung-zu button,.verletzung-neu button{font-size:.72rem;padding:.2rem .7rem}
.verletzungs-liste li.zu .er-text,.verletzungs-liste li.zu .wann{color:var(--leise)}
/* UNTER VIER AUGEN (20.09.2026, Abschnitt 72). Der Abschnitt fehlte in der Zeile darueber
   und klebte deshalb an der Ausruestung - genau der Fehler, den Abschnitt 70 hier fuer die
   Ausruestung selbst schon einmal hatte. Wer einen Abschnitt baut, traegt ihn hier ein.
   Das Formular darunter bekam gar keinen Abstand: Auswahl und Knopf klebten aneinander. */
.direkt-neu{display:grid;gap:.5rem;margin-top:.7rem}
.direkt-neu button{justify-self:start}
/* DIE BISHERIGEN BEGEGNUNGEN. Erst stand hier .ab-liste - die gibt es nur in
   abenteuer.css, und die laedt der Bogen nicht: der Link kam browserviolett und
   unterstrichen heraus (Roger, 20.09.2026, mit Ausschnitt). Eine Klasse aus einer
   Stylesheet-Datei, die diese Seite gar nicht laedt, ist keine Klasse.
   Aufbau wie .erinnerungs-liste daneben, Link wie .fakten a und .kontostaende a. */
.direkt-liste{list-style:none;margin:.7rem 0 0;padding:0}
.direkt-liste li{padding:.4rem 0;border-top:1px solid var(--rand);display:flex;
  flex-wrap:wrap;gap:.5rem;align-items:baseline}
.direkt-liste a{color:var(--text);text-decoration:none;border-bottom:1px dotted var(--rand)}
.direkt-liste a:hover{color:var(--akzent)}
/* Der Loeschknopf rechts, wie bei den Erinnerungen (.er-kopf form). */
.direkt-liste form{margin-left:auto}
/* ERINNERUNGEN AUS DEN ABENTEUERN (20.09.2026, Abschnitt 71): Lesetext wie der Rueckblick,
   darueber eine leise Zeile mit Zeit, Abenteuer und dem Loeschknopf. */
.erinnerungs-liste{list-style:none;margin:.2rem 0 0;padding:0}
.erinnerungs-liste li{padding:.5rem 0;border-top:1px solid var(--rand)}
.er-kopf{display:flex;flex-wrap:wrap;gap:.6rem;align-items:baseline;font-size:.78rem;color:var(--leise)}
.er-kopf form{margin-left:auto}
.er-kopf button{font-size:.7rem}
.er-abenteuer{color:var(--leise);text-decoration:none;border-bottom:1px dotted var(--rand)}
.er-abenteuer:hover{color:var(--akzent)}
.er-text{margin:.25rem 0 0;font-family:var(--serif);font-size:.92rem;line-height:1.55;white-space:pre-wrap}
.verlauf ul{list-style:none;margin:.5rem 0 0;padding:0}
.verlauf li{display:flex;align-items:center;gap:.8rem;padding:.4rem 0;
  border-top:1px dotted var(--rand);font-size:.84rem;flex-wrap:wrap}
.verlauf .wann{font-variant-numeric:tabular-nums;white-space:nowrap}
.verlauf .was{color:var(--leise);flex:1;font-style:italic}
.verlauf form{margin:0}

/* ----------------------------------------------------------------- Lupe --- */
/* Der einzige Ort mit einer eigenen Farbe, und die ist bewusst keine Themenfarbe:
   hinter dem Bild soll neutrales Dunkel liegen, sonst faerbt das Pergament die
   Bildwahrnehmung. Deshalb rgba-Schwarz statt var(). */
.lupe{position:fixed;inset:0;z-index:50;display:none;background:rgba(12,10,8,.92);
  overflow:auto;padding:2.5rem;text-align:center}
.lupe.offen{display:block}
body.lupe-offen{overflow:hidden}
.lupe img{display:inline-block;max-width:95vw;max-height:88vh;object-fit:contain;
  cursor:zoom-in;box-shadow:0 4px 30px rgba(0,0,0,.6);background:var(--papier-tief)}
.lupe.voll img{max-width:none;max-height:none;cursor:zoom-out}
.lupe-stand{position:fixed;left:0;right:0;bottom:.7rem;margin:0;text-align:center;
  color:var(--papier-tief);font-size:.76rem;letter-spacing:.06em;pointer-events:none}
.lupe button{position:fixed;background:rgba(0,0,0,.45);border-color:rgba(255,255,255,.25);
  color:var(--papier-hell);font-size:1.1rem;padding:.2rem .7rem;line-height:1.4}
.lupe button:hover{color:var(--papier-hell);border-color:var(--papier-hell)}
.lupe-zu{top:.8rem;right:.9rem}
.lupe-vor{left:.9rem;top:50%;transform:translateY(-50%)}
.lupe-nach{right:.9rem;top:50%;transform:translateY(-50%)}
.lupe:not(.mehrere) .lupe-vor,.lupe:not(.mehrere) .lupe-nach{display:none}

.loeschen{margin-top:1.6rem;text-align:right}
.loeschen button{color:var(--warnung);background:none;border-color:transparent}
.loeschen button:hover{border-color:var(--warnung)}

/* --------------------------------------------------------- Beziehungen --- */
/* Die Farbe sagt die Art: Blut, Bund, Feindschaft - drei Werte, die das Thema
   ohnehin schon fuehrt (--blut, --bund, --feind). KEINE FESTE FARBE HIER, sonst
   ist das naechste Thema nur ein halbes. */
.bez-liste{list-style:none;margin:.2rem 0 1.1rem;padding:0;display:grid;gap:.8rem;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
/* SAMMELKARTE - derselbe Aufbau wie ein Knoten auf der Karte: Titelleiste, Bildfenster,
   Name, darunter das Kleingedruckte. Die Farbe sagt die Art, und sie kommt aus dem
   Thema (--blut, --bund, --feind), nicht aus einer festen Zahl. */
.bez{position:relative;display:flex;flex-direction:column;gap:.35rem;padding:.45rem;
  background:var(--karte-fest);border:1px solid var(--rand);
  box-shadow:inset 0 0 0 2px var(--papier-hell), 0 1px 2px rgba(0,0,0,.14)}
.bez-titel{display:flex;align-items:center;justify-content:center;gap:.35rem;margin:0;
  padding:.2rem .3rem;background:var(--papier-hell);border:1px solid var(--rand);
  font-family:var(--serif);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  text-align:center}
.bez.blut  .bez-titel{color:var(--blut);border-color:var(--blut)}
.bez.bund  .bez-titel{color:var(--bund);border-color:var(--bund)}
.bez.feind .bez-titel{color:var(--feind);border-color:var(--feind)}
.bez.abgeleitet .bez-titel{border-style:dashed}
.bez .siegel{font-size:.8rem;line-height:1}
.bez-fenster{aspect-ratio:9/10;overflow:hidden;display:flex;align-items:center;
  justify-content:center;background:var(--papier-tief);border:1px solid var(--rand)}
.bez-fenster img{width:100%;height:100%;object-fit:cover;display:block}
.bez-fenster .ohne{font-size:.7rem;font-style:italic;color:var(--leise)}
.bez-name{margin:0;text-align:center;font-family:var(--serif);font-size:.92rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bez-name a{color:var(--text)}
.bez-name em{color:var(--leise)}          /* kursiv = kein eigenes Blatt */
.bez-notiz{margin:0;text-align:center;font-size:.74rem;font-style:italic;
  color:var(--leise);line-height:1.35}
.bez-quelle{margin:0;text-align:center;font-size:.62rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--sehr-leise)}
.bez form{position:absolute;top:.3rem;right:.3rem;margin:0}
.bez form button{padding:0 .3rem;line-height:1.2;border-color:transparent;
  background:none;color:var(--sehr-leise)}
.bez form button:hover{color:var(--warnung);border-color:var(--warnung)}

.bez-neu{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.bez-neu select,.bez-neu input{margin:0}
.bez-neu input{flex:1;min-width:9rem}


/* --------------------------------------------------------------- Karte --- */
.karte-rahmen{overflow:auto;padding:.2rem 0}
/* KEIN max-width:100% - genau das hat die Bildnisse schrumpfen lassen. Das SVG behaelt
   seine gerechnete Groesse; wird es breiter als die Seite, schiebt der Rahmen darum.
   Ein Bild, das mitwaechst, klingt richtig und macht bei zehn Knoten in einer Reihe
   aus jedem Bildnis einen Punkt. */
.karte-svg{display:block;margin:0 auto}
/* DER KNOTEN IST EINE SAMMELKARTE: Koerper, Titelleiste, Bildfenster, Angaben, Eckzier
   (Roger, 06.09.2026). Alle Rechtecke werden ueber ihre KLASSE angesprochen und nicht
   ueber den Typ - siehe die Warnung bei der Klickflaeche weiter unten. */
.karte-svg .kn rect.k-koerper{fill:var(--karte-fest);stroke:var(--rand);stroke-width:1}
.karte-svg .kn.namenlos rect.k-koerper{stroke-dasharray:3 3}
.karte-svg .kn rect.k-titel{fill:var(--papier-hell);stroke:var(--rand);stroke-width:1}
.karte-svg .kn text{font-family:var(--serif);fill:var(--text)}
.karte-svg .k-name{font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  fill:var(--akzent)}
.karte-svg .kn.namenlos .k-name{fill:var(--leise);font-style:italic}
.karte-svg .k-welt{font-size:11px;font-style:italic;fill:var(--leise)}
.karte-svg .k-fakt{font-size:10px;letter-spacing:.05em;fill:var(--sehr-leise)}
.karte-svg .k-ohne{font-size:10px;font-style:italic;fill:var(--leise)}
.karte-svg .k-eck{color:var(--gold);opacity:.85}
.karte-svg .kn rect.bildrand{fill:none;stroke:var(--rand)}
.karte-svg .kn rect.leeresbildnis{fill:var(--papier-tief);stroke:var(--rand)}
/* DIE KLICKFLAECHE MUSS DEN KOERPER SCHLAGEN. Beide Regeln sind gleich spezifisch
   (0,3,1), also entscheidet die REIHENFOLGE - diese Zeile muss unter der des Koerpers
   stehen. Am 06.09.2026 war sie es nicht (".karte-svg .klickflaeche", 0,2,0, gegen
   ".karte-svg .kn rect", 0,2,1): das durchsichtige Rechteck wurde pergamentfarben
   gefuellt und deckte Name und Bildnis zu, sichtbar blieb nur der Tooltip. Eine
   Geometriepruefung findet so etwas nie - es ist Malreihenfolge, nicht Position. */
.karte-svg .kn rect.klickflaeche{fill:transparent;stroke:none;cursor:pointer}
.karte-svg .kn a:hover rect.klickflaeche{fill:var(--akzent);fill-opacity:.08}
/* 2,8 statt 1,4 Pixel (Roger, 06.09.2026: "ich sehe den unterschied kaum"). Der
   Unterschied steckt in der Farbe, und Farbe braucht Flaeche: Rot (--blut) und Braun
   (--feind) liegen auf Pergament nah beieinander, und ein Haarstrich von 1,4 Pixel
   gibt dem Auge zu wenig davon. Die Strichelung der Feindschaft waechst mit, sonst
   sieht ein dicker Strich wieder aus wie eine durchgezogene Linie. */
.karte-svg .linie{fill:none;stroke-width:2.8;stroke-linecap:round}
.karte-svg .linie.blut{stroke:var(--blut)}
.karte-svg .linie.bund{stroke:var(--bund)}
.karte-svg .linie.feind{stroke:var(--feind)}
.karte-svg .linie.feindlich{stroke-dasharray:8 6}
.karte-legende{list-style:none;display:flex;flex-wrap:wrap;gap:1.1rem;margin:.9rem 0 0;
  padding:0;font-size:.78rem;color:var(--leise)}
.karte-legende i{display:inline-block;width:1.6rem;height:0;vertical-align:middle;
  margin-right:.4rem;border-top:3px solid var(--rand)}   /* so dick wie die Linien */
.karte-legende i.blut{border-color:var(--blut)}
.karte-legende i.bund{border-color:var(--bund)}
.karte-legende i.feind{border-top-style:dashed;border-color:var(--feind)}
.karte-legende i.namenlos{border-top-style:dashed}

/* ------------------------------------------------------------- Bildwahl --- */
.bildwahl{position:relative;min-width:13rem}
.bw-knopf{display:flex;align-items:center;gap:.5rem;width:100%;text-align:left;
  text-transform:none;letter-spacing:.02em;font-size:.86rem;padding:.25rem .5rem}
/* NACH OBEN (Roger, 06.09.2026). Der Abschnitt "Beziehungen" steht weit unten auf dem
   Bogen - nach unten aufgeklappt schiebt sich die Liste aus dem Fenster, und man
   scrollt hinter der eigenen Auswahl her. Fest nach oben, nicht je nach Platz
   umschlagend: eine Liste, die mal so und mal so aufgeht, verwirrt mehr als sie hilft. */
.bw-liste{position:absolute;z-index:20;bottom:calc(100% + 2px);top:auto;left:0;min-width:100%;
  max-height:26rem;overflow:auto;margin:0;padding:.25rem;list-style:none;
  background:var(--karte-fest);border:1px solid var(--rand);
  box-shadow:0 4px 10px rgba(0,0,0,.22)}
.bw-eintrag{display:flex;align-items:center;gap:.55rem;width:100%;text-align:left;
  text-transform:none;letter-spacing:.02em;font-size:.9rem;background:none;
  border-color:transparent;padding:.22rem .35rem}
.bw-eintrag:hover,.bw-eintrag:focus{border-color:var(--rand);
  background:linear-gradient(180deg,var(--papier-hell),var(--papier-tief));outline:none}
/* DIE GEWAEHLTE ZEILE (20.09.2026). Sie war nie markiert, weil der Knopf darueber sie
   zeigte - wo die Liste offen steht und der Knopf fehlt (data-offen="immer"), muss sie es
   selbst sagen. Auch sonst schadet es nicht: beim Aufklappen sieht man jetzt sofort, wo
   man steht. */
.bw-eintrag.gewaehlt{border-color:var(--akzent)}
.bw-eintrag.gewaehlt .bw-name{color:var(--akzent)}
/* 60 statt 30 Pixel (Roger, 06.09.2026: "ungefaehr doppelt so gross") - bei dreissig
   war der Sinn der ganzen Bildwahl kaum zu erkennen. Die Liste darf dafuer hoeher
   werden, sonst zeigt sie weniger Zeilen als vorher.
   NICHT RUND (Roger, gleicher Tag): var(--radius) ist im Pergament 0 - "Papier hat
   keine runden Ecken", steht so im Thema. Das Bildnis folgt damit derselben Regel wie
   jeder andere Rahmen auf dem Bogen. */
.bw-knopf img,.bw-eintrag img,.bw-leer{width:60px;height:60px;flex:none;
  border-radius:var(--radius);object-fit:cover;border:1px solid var(--rand);
  background:var(--papier-tief);display:block}
.bw-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--text);font-family:var(--serif)}
/* DER WELTNAME DARF NICHT MEHR DEN PERSONANAMEN AUFFRESSEN (07.09.2026, Issue #10).
   Er stand hier auf flex:none - unschrumpfbar -, waehrend .bw-name mit min-width:0
   nachgab: von "Eithne" blieb "E." uebrig. Wo die Welt ein Wappen hat, steht jetzt
   das (22 Pixel, fest); wo nicht, bleibt der Text und darf kuerzen. */
.bw-welt{flex:0 1 auto;min-width:0;max-width:45%;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;font-size:.72rem;font-style:italic;color:var(--leise)}

/* Hervorheben beim Darueberfahren (siehe persona.js). Die Akzentfarbe ist das Rot des
   Themas - "rot umranden" heisst hier: die Linie traegt die Farbe, das Gegenueber
   bekommt einen roten Rahmen. Uebergaenge kurz, damit es reagiert und nicht animiert. */
.karte-svg .linie{transition:stroke .12s,stroke-width .12s,opacity .12s}
.karte-svg .linie.hell{stroke:var(--akzent);stroke-width:4.4}
.karte-svg .linie.blass{opacity:.22}
.karte-svg .kn rect.k-koerper{transition:stroke .12s,stroke-width .12s}
.karte-svg .kn.hell rect.k-koerper{stroke:var(--akzent);stroke-width:2.5}
.karte-svg .kn.hell rect.k-titel{stroke:var(--akzent)}

/* ------------------------------------------------------- Bildnis erzeugen --- */
/* NO margin-top ANY MORE (19.09.2026, Roger with a screenshot: "ist dieser abstand
   absichtlich anders?" - no). The .6rem dates from when the generator sat under the
   portraits; as a section in the field grid it added to the grid's 1rem gap, so the
   gap above "Portrait" was 1.6rem on edit.php, szene.php and gegenstand.php. */
.bildgen{display:grid;gap:.4rem}
.bildgen .bild-stil{font-size:.82rem}
.bildgen-kasten{display:grid;gap:.4rem;padding:.5rem;border:1px dashed var(--rand);
  background:rgba(255,252,242,.3)}
.bild-promptfeld{font-size:.82rem;line-height:1.45}
/* ZWISCHENUEBERSCHRIFTEN UND BEARBEITEN (13.09.2026, Issue #14). Die Rubrik rueckt an ihren
   Inhalt, der Abstand davor kommt aus dem Raster. Bearbeiten ist gestapelt wie der Kasten
   darueber, aber ohne dessen Rahmen - der gehoert dem Prompt, der erst gebaut werden muss. */
.bildgen .rubrik{margin:.3rem 0 0}
.bild-bearb{display:grid;gap:.4rem;margin-top:.3rem}
.bild-bearb-feld{font-size:.82rem;line-height:1.45}
.bild-bearb-feld:disabled{opacity:.5}
.bildgen-knoepfe{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.bild-preis{font-size:.7rem;color:var(--sehr-leise);letter-spacing:.04em}
.bild-nachschlag{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.bild-nachschlag input{flex:1;min-width:10rem;font-size:.8rem}
/* MODELLWAHL UND ZUSATZBILD (07.09.2026, Issue #12). Die Modellzeile darf umbrechen:
   der Name samt Preis wird lang, und die Seitenleiste ist schmal. Die Beschriftung
   steht UEBER dem Auswahlfeld wie im Sieb der Startseite - daneben rutschte das Feld
   auf schmalen Fenstern aus dem Kasten. */
.bild-modellzeile{display:flex;gap:.5rem;flex-wrap:wrap;align-items:end}
.bild-modellzeile label{display:grid;gap:.15rem;min-width:0}
.bild-modellzeile span{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--akzent)}
.bild-modellzeile select{font:inherit;font-family:var(--serif);font-size:.78rem;
  color:var(--text);background:rgba(255,252,242,.35);border:1px solid var(--rand);
  border-radius:var(--radius);padding:.28rem .4rem;max-width:100%}
.bild-modellzeile select:focus{outline:none;border-color:var(--akzent)}

/* DIE AUFGEKLAPPTE LISTE EINES <select> GEHOERT AUCH ZUM THEMA (20.09.2026, Roger: "ich
   möchte eigentlich überall die hässlichen dropdowns nicht sondern immer welche mit den
   bildern"). Wo es ein Bild gibt, steht seither eine .bildwahl; die übrigen wählen Zahlen
   und Worte - Modell, Auflösung, Sortierung, die Kataloge der Ausrüstung ("da wirds wohl
   nicht anders gehen"). Sie bleiben Systemfelder, aber nicht in Systemweiß.
   DER BROWSER MALT DIE LISTE MIT DER background-color DES FELDES, und die war hier ein
   halbdurchsichtiges Papierweiß: über nichts wird daraus Weiß. Das ist dieselbe Ursache
   wie bei Issue #27 auf der dunklen Bühne, nur auf Pergament. Also ein DECKENDER
   Papierton - und die Optionen bekommen ihn ausdrücklich, sie erben ihn nicht.
   ZULETZT UND NICHT OBEN: drei der Regeln darüber setzen die Fläche mit der Kurzform
   background und sind spezifischer als ein blankes select. Die Textfelder daneben behalten
   ihr durchsichtiges Papier - nur das Auswahlfeld wird deckend. */
select,select.weltwahl,.sieb select,.bild-modellzeile select{
  background-color:var(--papier-hell)}
select option{background-color:var(--papier-hell);color:var(--text)}
.bild-zusatz{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.bild-refname{font-size:.72rem;color:var(--leise);overflow-wrap:anywhere}

/* ANWESENDE EINER SZENE (07.09.2026, Issue #11). Kaestchen mit Gesicht: hier sucht man
   Figuren, und ein Name allein sagt bei zwanzig Boegen zu wenig - dieselbe Ueberlegung
   wie beim Weltwappen. Mehrspaltig, weil die Liste sonst laenger waere als alles
   andere auf der Seite.
   SEIT 17.09.2026 MINIKARTEN, SECHS JE ZEILE (Roger: "nicht mehr als checkbox sondern als
   minikarten auswahl ... pro persona eine karte mit dem namen darunter. auswahl erfolgt
   dann darueber das man die karte anklickt"). Das MARKUP ist dasselbe geblieben -
   Kaestchen, Bild, Name in einem <label> -, gedreht hat sich nur die Richtung.
   GERECHNET, NICHT GESCHAETZT: die rechte Spalte gibt 747 px her (1120 - 2x1.2rem Seite,
   - 280 Steckbrief, - 1.1rem Luecke, - Polster und Rahmen des Kastens), sechs Karten sind
   damit 120 px breit. Das Bild ist 90 px, die Karte rund 128 - bei 17 Figuren (Shadowrun,
   die laengste sichtbare Liste) waechst der Block von 278 auf rund 394 px.
   WARUM GERADE SECHS: die Bildhoehe zaehlt je ZEILE, und Breite ist hier reichlich da.
   Sechs Spalten sind bei 17 Figuren nur DREI Zeilen, fuenf waeren vier und vier waeren
   fuenf - deshalb erlaubt die groessere Spaltenzahl das groessere Bild, nicht die
   kleinere. Zwischenstand am selben Tag waren fuenf Spalten mit 50 px; Roger wollte
   groessere Karten. */
/* ALLE ZEILEN GLEICH HOCH (17.09.2026, Roger: "die erste zeile ist hoeher als die
   anderen"). Ein Raster misst jede Zeile fuer sich, und in der ersten stand der
   Gamemaster - gemessen, nicht vermutet: er ist Platz 5 der sichtbaren Karten und traegt
   als einziger neben Echo eine Zusatzangabe. Die machte seine Karte hoeher und mit ihr die
   ganze Zeile. grid-auto-rows:1fr gibt allen Zeilen die Hoehe der groessten; damit ist es
   egal, ob ein Name einmal umbricht. */
.kartenwahl{list-style:none;margin:0;padding:0;display:grid;gap:.3rem;
  grid-template-columns:repeat(6,1fr);grid-auto-rows:1fr}
.kartenwahl li{min-width:0}
/* SPACE BEFORE THE NEXT HEADING (18.09.2026, Roger with a screenshot: "bitte an diesen
   stellen einen abstand einfuegen" - above "Wer ist jetzt da?" and "Was soll die Regie
   wissen?"). The grid has no margin and .rubrik none on top, so each heading sat on the
   cards above it and read as their caption. 1rem like .raster + .hint. Only where a
   heading follows a card grid - today the world page's Gamemaster section.
   THE SAME FOR A HEADING RIGHT AFTER A FORM FIELD (Roger, next screenshot: "noch eine
   stelle" - "Gruppen-Kennung" on the one-shot instruction field in "Gruppenchat").
   Measured over the rendered pages (index, start, edit, szene, szenen, welt, welten,
   karte): that is the only heading whose previous element is an input. */
.kartenwahl + .rubrik,input + .rubrik{margin-top:1rem}
/* DAS KAESTCHEN BLEIBT IM FORMULAR und wird nur unsichtbar: an ihm haengen name, value
   und die data-Attribute, die "→ Kindroid" und "→ Besetzung" im Augenblick des Klicks
   lesen (Abschnitt 37). WEGGEKLIPPT UND NICHT display:none - Letzteres nimmt es aus der
   Tastaturfolge, und die Auswahl waere ohne Maus nicht mehr zu bedienen. Den Fokus zeigt
   dafuer die Karte - siehe die Regel weiter unten. */
.kartenwahl .ankreuz{position:relative;display:flex;flex-direction:column;
  align-items:center;gap:.3rem;height:100%;font-size:.78rem;line-height:1.3;
  text-align:center;padding:.35rem .25rem;background:var(--papier-tief);
  border:1px solid var(--rand);border-radius:var(--radius)}
.kartenwahl .ankreuz input{position:absolute;width:1px;height:1px;margin:-1px;
  padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.kartenwahl .ankreuz:hover{border-color:var(--akzent)}
/* NUR FUER DIE TASTATUR, nicht nach jedem Klick (17.09.2026, Roger: "da bleibt ein roter
   rahmen stehen wenn man etwas ausgewaehlt oder abgewaehlt hat (also ein zusaetzlicher)").
   Die erste Fassung hatte :focus-within - das Kaestchen behaelt den Fokus auch nach einem
   Mausklick, also blieb der Ring auf der zuletzt angeklickten Karte stehen, mit 2 px
   Abstand ausserhalb und damit als ZWEITER Rahmen neben dem der Auswahl.
   :focus-visible unterscheidet genau das; den Elternselektor dafuer gibt es nur ueber
   :has(). KANN EIN BROWSER DAS NICHT, faellt die Regel ersatzlos aus - dann ist es wie
   vor dem 17.09.2026, wo die Karte gar keinen Fokus zeigte. Kein Rueckschritt also. */
.kartenwahl .ankreuz:has(input:focus-visible){outline:2px solid var(--akzent);
  outline-offset:2px}
/* AUSGEWAEHLT IST DER ZUSTAND, DEN MAN SEHEN MUSS - ein Haken waere ein zweites Zeichen
   fuer dieselbe Auskunft, und DAS BLASSSTELLEN DER UEBRIGEN WAR EIN DRITTES. Es ist am
   17.09.2026 wieder raus (Roger: "nicht ausgegraut, der rahmen signalisiert genug was
   ausgewaehlt ist") - die Zeilen davor waren blass, weil dort nur ein Haken das Ja/Nein
   trug; die Karte sagt es mit dem Rahmen deutlich genug.
   Die Klasse .aus bleibt und rendern szene.php und welt.php weiter mit: sie traegt jetzt
   allein die Auswahl (li:not(.aus) = dabei), und ohne sie saehen beim Laden alle Karten
   gewaehlt aus, bis persona.js gelaufen ist. */
.kartenwahl li:not(.aus) .ankreuz{border-color:var(--akzent);
  box-shadow:inset 0 0 0 1px var(--akzent)}
/* Der HELLERE GRUND fuer die Abgewaehlten (17.09.2026, Roger: "kannst du bei den inaktiven
   den background heller setzen wie beim ausgegrauten status"). Das Blassstellen vorher war
   opacity und nahm Bild und Namen mit; hier ist es nur der Grund - das Gesicht bleibt
   voll da, die Karte tritt trotzdem zurueck. --papier-hell statt --papier-tief. */
.kartenwahl li.aus .ankreuz{background:var(--papier-hell)}
/* Bei acht Anwesenden sperrt persona.js die uebrigen Kaestchen. Weil sie unsichtbar
   sind, faerbt input:disabled nichts mehr - die Klasse sagt es der Karte. */
.anwesende-wahl li.voll .ankreuz{opacity:.3;cursor:not-allowed}

/* HERUNTERLADEN, unten rechts IM Bild (07.09.2026). Dieselbe Ecke und dieselbe Groesse
   wie der 18+ Haken in der Leiste - wer beides kennt, sucht nicht zweimal. Halb
   durchsichtig, damit er das Bild nicht zerschneidet, und beim Zeigen voll da.
   SEIN BEZUG IST .bildnis, das dafuer position:relative bekommen hat - vorher war es
   nicht positioniert, und der Knopf haette sich an .bildnisrahmen gehalten und waere
   an dessen overflow:hidden abgeschnitten worden. Nachgemessen, nicht angenommen. */
.bild-runter{position:absolute;right:6px;bottom:6px;width:26px;height:26px;
  display:flex;align-items:center;justify-content:center;
  background:var(--papier-tief);border:1px solid var(--rand);border-radius:var(--radius);
  color:var(--text);opacity:.55;transition:opacity .12s ease}
.bild-runter:hover{opacity:1;border-color:var(--akzent);color:var(--akzent)}
.bild-runter svg{width:15px;height:15px;display:block;pointer-events:none}
/* Eine Persona, die in der Szene steht, aber ihre Kindroid-Kennung verloren hat: sie
   bleibt sichtbar, damit man sie abwaehlen kann, und sagt durch die Farbe, dass etwas
   mit ihr nicht stimmt. */
.anwesende-wahl li.ohne-kin .aw-name{color:var(--warnung)}
/* DIE WELT DER SZENE SIEBT (11.09.2026). Ausgeblendet wird mit hidden, und das braucht
   hier eine eigene Zeile: li hat display:flex, und eine Autorenregel schlaegt die
   Browservorgabe fuer [hidden] - ohne diese Zeile bliebe jede Figur stehen.
   Wer angehakt ist, aber aus einer anderen Welt stammt, bleibt sichtbar und traegt
   dieselbe Warnfarbe wie eine Figur ohne Kennung: beides heisst "gehoert nicht hierher". */
.kartenwahl li[hidden]{display:none}
.anwesende-wahl li.fremd .aw-name{color:var(--warnung)}
/* DIE AUFTRAEGE AN DIE REGIE (11.09.2026, Abschnitt 58) auf der Weltseite: ein Protokoll,
   klein gesetzt. Was noch wartet, traegt die Akzentfarbe, was schiefging die Warnfarbe;
   erledigt tritt zurueck. */
.regie-liste{list-style:none;margin:.2rem 0 0;padding:0;font-size:.82rem;line-height:1.45}
.regie-liste li{padding:.45rem 0;border-top:1px solid var(--rand)}
.regie-liste .zeit,.regie-liste .status{color:var(--leise)}
.regie-liste .zeit{margin-right:.35rem}
.regie-liste li.st-offen .status,.regie-liste li.st-in_arbeit .status{color:var(--akzent)}
.regie-liste li.st-fehler .status{color:var(--warnung)}
.regie-liste button{margin-top:.3rem;font-size:.75rem}
/* Die Live-Meldung ueber der Liste (Abschnitt 59). .hinweis zieht sich oben mit einem
   negativen Rand an die Kopfzeile der Seite - mitten im Abschnitt wuerde es damit in
   den Absatz darueber ragen. */
.hinweis.regie-meldung{margin:.4rem 0 .2rem}
/* Der Spielleiter steht in der Gruppe, aber nicht im Bild - das muss an ihm dranstehen,
   sonst sucht man den fehlenden Kopf beim Generator.
   HINTER DEM NAMEN UND NICHT DARUNTER seit 17.09.2026 (Roger: "das du kann hinter den
   namen nicht drunter"). Bis dahin display:block, also eine eigene Zeile - auf einer
   Karte war das die Zeile, die eine ganze Rasterzeile hoeher machte. Die Sperrung ist
   dabei von .12em auf .06em zurueckgenommen: neben dem Namen zaehlt jetzt die Breite.
   Auf einer 120-px-Karte passt "Gamemaster Spielleiter" trotzdem nicht in eine Zeile und
   bricht um - deshalb steht die Gleichhoehe der Zeilen oben und nicht hier. */
.aw-sl{font-size:.6rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--akzent);margin-left:.3em}
/* 90 STATT 34 PIXEL seit 17.09.2026 (Minikarten, siehe oben; 50 px waren der
   Zwischenstand mit fuenf Spalten). Quadratisch wie in der Besetzung der Weltseite: bei
   dieser Groesse ist ein Hochformat beschnitten, und gesucht wird ohnehin das Gesicht.
   Es fuellt damit drei Viertel der 120-px-Karte. */
.aw-bild{flex:none;width:90px;height:90px;overflow:hidden;border:1px solid var(--rand);
  background:var(--papier-tief);display:block}
.aw-bild img{width:100%;height:100%;object-fit:cover;display:block}
body.blur18 .aw-bild .verborgen{width:100%;height:100%}
.aw-name{overflow-wrap:anywhere}
/* THE NAME IS A LINK to the sheet or scene (18.09.2026, Roger: "die namen der szenen und
   personen bitte verlinken auf die jeweilige seite. linkstyle: schrift wird rot bei mouse
   over"). It sits inside the card's <label>, and that is allowed: a click on interactive
   content inside a label does not activate the labelled control, so the name navigates
   and the picture still selects. color:inherit keeps the warning colour of .ohne-kin and
   .fremd. */
.aw-name a{color:inherit;text-decoration:none}
.aw-name a:hover{color:var(--akzent)}
.bild-guthaben,.bild-zen-guthaben{margin:0;font-style:normal;font-size:.72rem;letter-spacing:.04em}

/* Beziehungsblock fuer das Zielsystem */
.bez-block{display:grid;gap:.4rem}
.bez-vorschau{margin:0;padding:.5rem .6rem;background:rgba(255,252,242,.35);
  border:1px dashed var(--rand);font-family:var(--serif);font-size:.78rem;
  line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.bez-stand{letter-spacing:.06em;text-transform:uppercase;font-size:.7rem}
.bez-stand.aktuell{color:var(--gut)}
.bez-stand.veraltet,.bez-stand.fehlt{color:var(--warnung)}
.drueber{color:var(--warnung);font-weight:600}
/* Kindroid-Kennung unter dem Namen - leiser als der Name, es ist eine Adresse. */
.kin-id{font-size:.74rem;letter-spacing:.04em;color:var(--leise);
  padding:.3rem .5rem;margin-top:.35rem}
/* Der Besetzungsknopf sieht aus wie "→ Kindroid" und ist es nicht: er schickt keinen
   Text, sondern tauscht die Teilnehmer der Gruppe. Gleiche Farbe, weil beide dasselbe
   tun - drueben etwas ohne Rueckweg ueberschreiben. */
.kin-senden,.gruppe-senden{color:var(--bund);border-color:var(--bund)}
.kin-senden:hover{color:var(--akzent);border-color:var(--akzent)}

/* Sinnbilder in der Werkzeugleiste. Die Knoepfe werden dadurch quadratisch; die
   Beschriftung lebt im title und im aria-label weiter, damit weder Maus noch
   Screenreader raten muessen. "→ Kindroid" bleibt bewusst Text: was drueben ohne
   Rueckweg ueberschreibt, soll man lesen koennen. */
.ic{width:14px;height:14px;display:block;pointer-events:none}
.werkzeug button:has(.ic){padding:.3rem .42rem;line-height:0}
.kopieren.fertig,.bild-prompt-kopieren.fertig,.ausr-kopieren.fertig{color:var(--gut);border-color:var(--gut)}

/* --------------------------------------------------------- Neues Gespraech --- */
/* ROT UND GROESSER ALS DIE ANDEREN (Roger, 06.09.2026: "wichtiger roter knopf!! nicht
   ausversehen drücken"). Er sieht bewusst nicht aus wie die uebrigen Knoepfe - was
   drueben ein Gespraech beendet, soll sich nicht wie "Kopieren" anfuehlen. */
.gespraech-knoepfe{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-top:.5rem}
.gefahr{color:var(--papier-hell);background:var(--warnung);border-color:var(--warnung);
  font-size:.78rem;padding:.45rem 1rem;letter-spacing:.1em}
.gefahr:hover{color:var(--papier-hell);background:var(--akzent-hell);
  border-color:var(--akzent-hell)}
.gefahr:disabled{opacity:.55}
.warnung-zeile{color:var(--warnung)}
.kin-break-stand{margin:0}
/* Zauberstab neben einer Rubrik (Weltseite) - kleiner, buendig, ohne eigene Zeile. */
.rubrik .zauberstab{margin-left:.5rem;padding:.18rem .4rem;line-height:0;vertical-align:middle}

/* --------------------------------------------------------------- Wappen --- */
/* Quadratisch, weil es ueberall als kleines Zeichen neben einem Namen steht. */
.wappenrahmen{position:relative;padding:6px;background:var(--papier-tief);
  border:1px solid var(--rand);box-shadow:inset 0 0 0 2px var(--papier-hell);
  margin-bottom:.5rem}
.wappen{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;
  border:1px solid var(--rand)}
.wappen.leer{display:flex;align-items:center;justify-content:center;
  color:var(--leise);font-style:italic;font-size:.78rem;background:var(--papier-tief)}
.wappen-knoepfe{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;justify-content:center}
.wappen-kasten{display:grid;gap:.4rem;margin-top:.5rem;padding:.5rem;
  border:1px dashed var(--rand);background:rgba(255,252,242,.3)}
/* OHNE DIESE ZEILE WIRKT DAS hidden AM KASTEN NICHT (15.09.2026): display:grid schlaegt die
   Browserregel [hidden]{display:none} - dieselbe Falle wie in Abschnitt 43. Der Kasten
   stand deshalb seit dem ersten Tag offen da. */
.wappen-kasten[hidden]{display:none}
.wappen-prompt{font-size:.78rem;line-height:1.45}
.wappen-stand{margin:.4rem 0 0}
/* Das Wappen in Listen und neben Weltnamen */
/* In der Weltenliste eine eigene Spalte, nicht in der Zeile: dort war das Wappen an
   die Schrifthoehe gebunden und blieb winzig. Der Text daneben behaelt seine Breite,
   weil die Spalte fest ist und der Rest fliesst. */
.weltliste .kasten.mitwappen{display:flex;align-items:flex-start;gap:1rem}
.weltliste .weltzeichen{flex:none;width:92px;display:block}
.weltliste .weltzeichen img{width:92px;height:92px;object-fit:cover;display:block;
  border:1px solid var(--rand);box-shadow:inset 0 0 0 2px var(--papier-hell)}
.welttext{min-width:0;flex:1}
.welttext .meta{text-align:left}
@media(max-width:560px){
  .weltliste .kasten.mitwappen{display:block}
  .weltliste .weltzeichen{margin-bottom:.6rem}
}
/* Kleines Zeichen fuer alles andere - Auswahlmenue, Karten, Zeilen. */
.weltzeichen-klein{width:22px;height:22px;object-fit:cover;border:1px solid var(--rand);
  vertical-align:middle;margin-right:.4rem;display:inline-block}
/* Steht es ALLEIN - ohne Namen daneben -, faellt der Abstand nach rechts weg; sonst
   sitzt es sichtbar links der Mitte (07.09.2026, Issues #9 und #10). */
.weltzeichen-klein.allein{margin-right:0;flex:none}

/* DIE STARTSEITE (14.09.2026, Abschnitt 66). Der lange Name schlicht, kursiv und leise
   unter der Zierlinie; darunter je Welt eine grosse Kachel, DREI NEBENEINANDER - die
   groesste Breite, die drei in dieser Seite haben (rund 350 Pixel, die Szenenkarten rund
   200). Das Wappen steht gross in der Mitte, die ganze Kachel ist der Link zur Welt.
   Rahmen und Platzhalter sind die vorhandenen der Weltseite (.wappenrahmen, .wappen). */
.langname{text-align:center;font-style:italic;color:var(--leise);margin:0 0 1.3rem}
.weltkacheln{list-style:none;margin:0;padding:0;display:grid;gap:1rem;
  grid-template-columns:repeat(3,minmax(0,1fr))}
.weltkacheln .kasten{padding:1.1rem}
/* Die Kachel ist ein Absende-Knopf (das Oeffnen aktiviert die Welt), sieht aber nicht so
   aus: alles, was button{} oben setzt - Groesse, Versalien, Sperrung, Verlauf, Rahmen -,
   wird hier zurueckgenommen. Der Name ist ein span im Aussehen einer h2. */
.weltkacheln form{margin:0}
.weltkachel{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;
  font:inherit;letter-spacing:normal;text-transform:none;text-align:center;color:var(--text)}
.weltkachel:hover{color:var(--text)}
.weltkachel .wappenrahmen{display:block;width:78%;margin:.3rem auto .9rem}
.weltkachel .name{display:block;font-family:var(--serif);font-weight:600;font-size:1.35rem;
  line-height:1.2}
.weltkachel:hover .name{color:var(--akzent)}
.weltkachel .meta{display:block}
/* DAS ZULETZT BESPIELTE ABENTEUER unter der Kachel (20.09.2026, Issue #22). Es steht
   AUSSERHALB des Knopfes - ein Link darin waere nicht anklickbar -, sieht aber wie sein
   Fuss aus: mittig, klein, mit etwas Luft nach oben. Linkbild wie .fakten a. */
.welt-abenteuer{text-align:center;font-size:.82rem;margin:.7rem 0 0;line-height:1.5}
.welt-abenteuer a{color:var(--text);text-decoration:none;border-bottom:1px dotted var(--rand)}
.welt-abenteuer a:hover{color:var(--akzent);border-bottom-color:var(--akzent)}
.welt-abenteuer .leise{display:block;font-size:.74rem}
/* DIE KONTOSTAENDE unter den Kacheln (16.09.2026): klein, leise, mittig, Luft nach oben und
   unten. */
.kontostaende{text-align:center;font-size:.78rem;color:var(--leise);margin:1.6rem 0}
/* Der Claude-Link in der Farbe der Zeile statt Browser-Blau (Roger), gepunktet unterstrichen wie
   .fakten a, rot beim Darueberfahren wie Menue und Abmelden. */
.kontostaende a{color:inherit;text-decoration:none;border-bottom:1px dotted var(--rand)}
.kontostaende a:hover{color:var(--akzent)}
@media(max-width:700px){
  .weltkacheln{grid-template-columns:minmax(0,1fr)}
  .weltkacheln .wappenrahmen{max-width:280px}
}

/* DAS K FUER KINDROID (07.09.2026). GENAU SO GROSS WIE DAS WELTWAPPEN und mit
   demselben Rahmen: die beiden stehen nebeneinander und sagen dasselbe Art von Sache
   - wohin dieser Bogen gehoert, und ob es ihn drueben schon gibt. Zwei verschiedene
   Groessen haetten die Zeile schief gemacht.
   OHNE EIGENE FARBE: das Zeichen erbt --akzent von .meta.welt ueber currentColor,
   also die Tinte der Zeile, in der es steht. */
.kin-marke{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border:1px solid var(--rand);background:var(--papier-tief)}
.kin-marke svg{width:13px;height:13px;display:block}

/* BESETZUNG AUF DER WELTSEITE (07.09.2026, Issue #4). Sammelkarten wie unter
   "Beziehungen", aber ZWEISPALTIG in einer 280 Pixel breiten Seitenleiste - Roger hat
   es vorhergesehen: "es kann sein das die karten etwas schmaler werden muessen".
   GERECHNET: 280 minus zweimal Innenabstand der Leiste, minus die Luecke, macht rund
   122 Pixel je Karte. Die Beziehungskarte faengt bei 150 an, also muss hier alles eine
   Nummer kleiner - eigene Karten waeren ein dritter Typ fuer dieselbe Sache. */
.besetzung{grid-template-columns:repeat(2,1fr);gap:.5rem}
.besetzung .bez{padding:.3rem;gap:.25rem}
.besetzung .bez-titel{display:block;padding:.15rem .2rem;font-size:.58rem;
  letter-spacing:.05em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.besetzung .bez-fenster{aspect-ratio:1}
.besetzung .meta{margin:0;font-size:.64rem}
/* KLAPPBAR (15.09.2026). Die Ueberschrift ist eine h2, damit der Klick aus persona.js
   greift, soll aber aussehen wie die Rubrik - .fkopf h2 machte sie sonst gross. Der Abstand
   zur Liste kommt vom Kopf (zugeklappt setzt .feld.zu .fkopf ihn auf 0), und zugeklappt
   bekommt der Block keinen Innenabstand: .feld.zu gilt den Kaesten rechts, dieser hat keinen. */
/* Dieselben drei Regeln gelten seit 15.09.2026 fuer die Bilderleiste auf Bogen und Szene. */
.besetzung-abschnitt .fkopf,section.bilder .fkopf{margin-bottom:.5rem}
.besetzung-abschnitt .fkopf h2.rubrik,section.bilder .fkopf h2.rubrik{font-size:.72rem;letter-spacing:.24em;margin:0}
.besetzung-abschnitt.zu,section.bilder.zu{padding-bottom:0}
.gm-los{color:var(--akzent);border-color:var(--akzent)}
.gm-antwort{margin:0 0 1rem;padding:.7rem .9rem;background:var(--karte);border:1px solid var(--rand)}
.gm-antwort pre{margin:.3rem 0 0;white-space:pre-wrap;overflow-wrap:anywhere;font-family:var(--serif);font-size:.9rem;line-height:1.55}

/* ------------------------------------------------------------------ 18+ --- */
/* ZWEI KLASSEN, ZWEI ZUSTAENDIGKEITEN: .nsfw am Bild sagt nur, WELCHES Bild
   gekennzeichnet ist; .blur18 am body sagt, ob es gerade verborgen sein soll.
   Deshalb muss keine der sechs Anzeigestellen den Schalter kennen.
   EIN PLATZHALTER STATT EINES WEICHZEICHNERS (Roger, 07.09.2026): ein unscharfes Bild
   zeigt Formen und Farben weiter - ein verwaschener Koerper bleibt ein Koerper. Die
   Flaeche zeigt nichts. Und sie sagt auch nicht, WAS sie verbirgt: ein "18+" waere
   genau die Auskunft, die der Vorhang vermeiden soll.
   BEIDES STEHT IM MARKUP, das CSS zeigt eines davon - nur so wirkt der Schalter in
   der Fusszeile ohne Neuladen. */
.verborgen{display:none}
body.blur18 img.nsfw,
body.blur18 .karte-svg image.nsfw{display:none}
body.blur18 .verborgen{display:flex;align-items:center;justify-content:center;
  background:var(--papier-tief);color:var(--sehr-leise)}
body.blur18 .verborgen svg{width:26%;min-width:14px;max-width:34px;height:auto}
/* Die Flaeche nimmt genau den Platz des Bildes ein, und der ist je Ort ein anderer.
   In der Bildwahl bringt .bw-leer Groesse und Rahmen schon mit (60x60). */
body.blur18 .bildnis .verborgen,
body.blur18 .bez-fenster .verborgen{width:100%;height:100%}
body.blur18 .bilder-liste .verborgen{width:100%;aspect-ratio:1}
/* IN DER LEISTE STEHT DER PLATZHALTER IMMER IM MARKUP - gezeigt wird er nur, wenn die
   Kachel markiert ist. Nur so kann der Haken OHNE Neuladen wirken: sonst bliebe beim
   Aushaken der Platzhalter neben dem zurueckgekehrten Bild stehen, und beim Ankreuzen
   verschwaende das Bild ersatzlos. An den anderen Stellen wird er weiterhin nur dann
   gerendert, wenn er gebraucht wird - dort gibt es keinen Haken. */
body.blur18 .bilder-liste li:not(.markiert) .verborgen{display:none}
/* Auf der Karte gibt es keine Pseudoelemente und kein display:flex - Flaeche und
   Zeichen sind dort eigene SVG-Elemente. */
.karte-svg .verborgen-flaeche,.karte-svg .verborgen-zeichen{display:none}
body.blur18 .karte-svg .verborgen-flaeche{display:block}
body.blur18 .karte-svg .verborgen-zeichen{display:block;color:var(--sehr-leise)}

/* DER ERSATZ FUER EIN GEKENNZEICHNETES HAUPTBILD (Issue #8). Er steht neben dem
   Hauptbild im Markup und wird nur bei eingeschaltetem Schalter gezeigt - dieselbe
   Machart wie der Platzhalter, den er ersetzt, wo es ein unmarkiertes Bild gibt.
   MIT TYPSELEKTOR, und das ist kein Schoenheitsfehler: .bildnis img, .bez-fenster img
   und .bw-eintrag img sind (0,1,1) spezifisch und setzen display:block - ein blosses
   .ersatz (0,1,0) verloere gegen sie und der Ersatz waere immer sichtbar. */
img.ersatz,.karte-svg image.ersatz{display:none}
body.blur18 img.ersatz,
body.blur18 .karte-svg image.ersatz{display:block}

/* DER HAKEN LIEGT IM BILD, unten rechts. Das Etikett deckt GENAU die Bildflaeche ab -
   links/rechts/oben der Innenabstand des Kastens, aspect-ratio:1 wie das Bild selbst -
   und schiebt seinen Inhalt in dessen untere rechte Ecke. Mit 'bottom' waere es an den
   Kasten gebunden, und der ist wegen der Knopfreihe hoeher als das Bild.
   Es faengt keine Klicks ab (pointer-events), sonst laege eine unsichtbare Flaeche
   ueber dem Bild und die Lupe ginge nicht mehr auf. */
.bilder-liste li{position:relative}
.ab18{position:absolute;left:3px;right:3px;top:3px;aspect-ratio:1;
  display:flex;align-items:flex-end;justify-content:flex-end;padding:3px;
  pointer-events:none}
.ab18 input{position:absolute;width:1px;height:1px;opacity:0;margin:0}
/* DASSELBE ZEICHEN WIE DER PLATZHALTER, kein "18+" (Roger, 07.09.2026: "das 18+ aus
   dem button nehmen"). Ein Schild, das die Sorte des Inhalts ausruft, sagt auf jedem
   Bildschirm genau das, was der Schalter verbergen soll. Das durchgestrichene Auge
   sagt "wird verborgen" - eine Handlung, keine Auskunft.
   DIE TOENE KOMMEN AUS DEM THEMA: die Tinte halbdurchsichtig hinter dem Zeichen, das
   Papier als Zeichenfarbe. Fest eingetragen waere es im naechsten Thema der einzige
   Fleck, der nicht mitwandert (Abschnitt 12). */
.ab18 .zeichen{pointer-events:auto;cursor:pointer;user-select:none;
  display:flex;align-items:center;justify-content:center;width:19px;height:19px;
  background:color-mix(in srgb, var(--text) 45%, transparent);
  color:var(--papier-hell);border:1px solid transparent;opacity:.7}
.ab18 .zeichen svg{width:12px;height:12px;display:block}
.ab18:hover .zeichen{opacity:1}
.ab18 input:checked + .zeichen{background:var(--warnung);opacity:1;
  border-color:var(--papier-hell)}
.ab18 input:focus-visible + .zeichen{outline:2px solid var(--akzent);outline-offset:1px}
/* LOCKED while 18+ is hidden (18.09.2026): a marked picture cannot be unmarked then.
   Still visibly marked, just paler, and the cursor says it will not move. */
.ab18 input:checked:disabled + .zeichen{opacity:.55;cursor:not-allowed}
/* The scene's download button fetches the ORIGINAL of the main picture. Marked and hidden,
   bild.php refuses it, and the browser would save a file holding "403" under the scene's
   name - so the button goes while there is nothing it could fetch. */
body.blur18 .bildnis img.nsfw ~ .bild-runter{display:none}

/* Der globale Schalter und das Zeichen von My Institute, unter der unteren Zierlinie -
   .zier.unten laesst darueber .2rem, hier kommt der Abstand zum Seitenende dazu.
   DREI SPALTEN, DAMIT DAS ZEICHEN MITTIG STEHT und nicht mittig zwischen Schalter und
   Rand: es sitzt fest in Spalte 2, der Schalter faellt links daneben. Abgemeldet ist
   der Schalter gar nicht da - das Zeichen bleibt trotzdem in seiner Spalte, weil die
   Spalte ihm gehoert und nicht der Reihenfolge.
   ABSTAND NACH OBEN (07.09.2026, Roger: "ein wenig Abstand ueber das my institute
   logo"): 1.1rem statt .2rem. Die Zierlinie darueber laesst absichtlich nur .2rem zum
   Seitenrand hin - das war richtig, solange darunter nur ein Ankreuzfeld sass. Ein
   Zeichen braucht Luft, sonst klebt es an der Linie. */
.fusszeile{margin:1.1rem 0 1.3rem;display:grid;align-items:center;gap:.6rem;
  grid-template-columns:1fr auto 1fr}
.fusszeile .ankreuz{display:inline-flex;font-size:.8rem;color:var(--leise)}
/* The 18+ switch and its password field share column 1 (18.09.2026). [hidden] needs its
   own line: display:inline-block would beat the browser's [hidden]{display:none}, the
   same trap as .weltaktiv [hidden] (section 41). */
.fusszeile .schalter18{grid-column:1;display:inline-flex;align-items:center;gap:.4rem}
.fusszeile .kennwort18{display:inline-block;width:8rem;font-size:.78rem;padding:.12rem .35rem}
.fusszeile .kennwort18[hidden]{display:none}
.fusszeile .kennwort18.falsch{border-color:var(--warnung)}
.fusszeile .institut{grid-column:2;display:block;opacity:.9}
/* Spalte 3, rechtsbuendig - dieselbe feste Zuordnung wie beim Zeichen: ohne den Schalter
   links waere sie sonst nachgerueckt. Seit dem 21.09.2026 stehen dort ZWEI Links
   (Verwaltung, Abmelden), deshalb traegt eine Huelle die Spalte und die beiden liegen als
   Flexzeile darin - einzeln haetten sie sich zwei Rasterzeilen genommen. */
.fusszeile .fussrechts{grid-column:3;justify-self:end;display:inline-flex;
  align-items:center;gap:1rem}
.fusszeile .fussrechts a{font-size:.8rem;color:var(--leise);text-decoration:none;
  letter-spacing:.06em}
.fusszeile .fussrechts a:hover{color:var(--akzent)}

/* THE LOADING BAR (18.09.2026, Issue #13; persona.js: personaLaeuft). A thin strip at the
   TOP edge of the window - Roger's choice over the bottom and over a card in the middle,
   because it covers nothing. pointer-events:none: it must never block a click, the page
   stays fully usable while an image is being made. The moving piece has no percentage -
   how long a run still needs, nobody knows. z-index above the lightbox (50), so it shows
   while one looks at pictures. [hidden] needs its own line against display:block. */
.ladebalken{position:fixed;top:0;left:0;right:0;height:4px;z-index:60;overflow:hidden;
  pointer-events:none;background:color-mix(in srgb, var(--akzent) 18%, transparent)}
.ladebalken[hidden]{display:none}
.ladebalken::before{content:"";position:absolute;top:0;bottom:0;left:0;width:30%;
  background:var(--akzent);animation:ladebalken 1.3s ease-in-out infinite}
/* -100% starts the piece fully outside on the left, 340% of its 30% ends past the right. */
@keyframes ladebalken{from{transform:translateX(-100%)}to{transform:translateX(340%)}}
@media (prefers-reduced-motion:reduce){.ladebalken::before{animation-duration:3s}}

/* -------------------------------------------- Ausruestung (19.09.2026, #15) --- */
/* A link that looks like the buttons beside it - the world page's toolbar sits inside its
   form, where no nested form (and so no GET button) is allowed. */
.knopf-link{font-family:var(--serif);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.32rem .7rem;color:var(--leise);text-decoration:none;
  background:linear-gradient(180deg,var(--papier-hell),var(--papier-tief));
  border:1px solid var(--rand);border-radius:var(--radius)}
.knopf-link:hover{color:var(--akzent);border-color:var(--akzent)}
.hinweis.fehler{color:var(--warnung);font-style:normal}
.leise{color:var(--leise);font-size:.85em}

/* the catalogue */
table.katalog{width:100%;border-collapse:collapse;font-size:.88rem}
table.katalog th{font-family:var(--serif);font-weight:400;font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--leise);text-align:left;padding:.3rem .5rem;
  border-bottom:1px solid var(--rand)}
table.katalog td{padding:.35rem .5rem;border-bottom:1px solid var(--rand);vertical-align:middle}
table.katalog .k-bild{width:48px;padding:.25rem}
table.katalog .k-bild a{display:block;width:44px;height:44px;background:var(--papier-tief)}
table.katalog .k-bild img{width:44px;height:44px;object-fit:cover;display:block}
table.katalog .k-name a{color:var(--text);text-decoration:none;font-weight:600}
table.katalog .k-name a:hover{color:var(--akzent)}
table.katalog .k-werte{color:var(--leise)}
.blaettern{display:flex;gap:1rem;justify-content:center;align-items:center;margin:1rem 0;font-size:.85rem}
.blaettern a{color:var(--akzent);text-decoration:none}

/* the item's page */
.werte-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));gap:.6rem .9rem}
.werte-raster label{display:grid;gap:.15rem}
.werte-raster label span{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--leise)}
.werte-raster label.eigen span{color:var(--akzent)}
.werte-raster label.eigen input{border-color:var(--akzent)}
ul.traeger{list-style:none;margin:0 0 .5rem;padding:0;max-width:26rem}
ul.traeger li{display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  padding:.25rem 0;border-bottom:1px solid var(--rand)}
ul.traeger a{color:var(--text);text-decoration:none;font-weight:600}
ul.traeger a:hover{color:var(--akzent)}
.traeger-neu{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:.4rem}
.traeger-neu .bildwahl{flex:1;max-width:22rem}

/* the section on the sheet */
.ausr-liste{list-style:none;margin:.2rem 0 .8rem;padding:0;display:grid;gap:.35rem}
.ausr-zeile{display:flex;align-items:center;gap:.6rem;padding:.3rem 0;border-bottom:1px solid var(--rand)}
.ausr-zeile.weg .ausr-text a{text-decoration:line-through}
.ausr-bild{flex:none;width:40px;height:40px;background:var(--papier-tief);overflow:hidden}
.ausr-bild img{width:40px;height:40px;object-fit:cover;display:block}
.ausr-text{flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:.1rem .6rem;align-items:baseline}
.ausr-text a{color:var(--text);text-decoration:none;font-weight:600}
.ausr-text a:hover{color:var(--akzent)}
.ausr-kurz{color:var(--leise);font-size:.8rem}
/* THE KIND AS A SUB-HEADING (19.09.2026) - a .rubrik inside the list; the grid gap does
   the spacing below, a larger step above separates it from the kind before. Heading and
   sub-kind link to the filtered catalogue: the sub-kind stays small and quiet, and like
   the other names it turns red on hover. */
/* Zuklappbar je Art (20.09.2026): Knopf, Name, Zahl in einer Zeile. Die Zeilen werden
   versteckt - .ausr-zeile traegt display:flex, und eine Autorenregel schlaegt die
   Browservorgabe fuer [hidden]; ohne die naechste Zeile bliebe alles stehen. */
.ausr-liste .ausr-zeile[hidden]{display:none}
.ausr-liste .ausr-gruppe{margin:.7rem 0 0;display:flex;align-items:center;gap:.4rem}
.ausr-klapp{width:1.4rem;padding:.1rem 0;text-align:center;line-height:1;border-color:transparent;
  background:none;font-size:.7rem}
.ausr-klapp:hover{border-color:var(--rand)}
.ausr-liste .ausr-gruppe:first-child{margin-top:0}
/* Der Name klappt (Zeiger wie beim Abschnittskopf), der Katalog ist der Link daneben -
   klein, in Klammern, leise (20.09.2026). */
.ausr-name{cursor:pointer}
.ausr-kat{font-size:.72rem;letter-spacing:0;text-transform:none;color:var(--leise);
  text-decoration:none;border-bottom:1px dotted var(--rand)}
.ausr-kat:hover{color:var(--akzent);border-bottom-color:var(--akzent)}
.ausr-text a.leise{color:var(--leise);font-weight:400}
.ausr-text a.leise:hover{color:var(--akzent)}
/* − count + (19.09.2026): the same on the sheet and on the item's "Getragen von". */
.ausr-menge{flex:none;display:inline-flex;align-items:center;gap:.3rem}
.ausr-menge button{padding:.05rem .45rem;font-size:.9rem;line-height:1.2;letter-spacing:0}
.ausr-anzahl{min-width:1.4rem;text-align:center;font-weight:600}
/* Rating and grade of a carried piece (23.09.2026), as in persona.css. */
.ausr-stufe{flex:none;display:inline-flex;align-items:center;gap:.45rem;font-size:.78rem;color:var(--leise)}
.ausr-stufe label{margin:0}
.ausr-stufe-wert{width:3.2rem;margin:0 0 0 .2rem;padding:.1rem .3rem;font-size:.85rem}
.ausr-guete{display:inline-flex}
.ausr-guete label{position:relative;cursor:pointer}
.ausr-guete input{position:absolute;opacity:0;pointer-events:none}
.ausr-guete span{display:block;padding:.1rem .35rem;border:1px solid var(--rand);font-size:.72rem;line-height:1.3}
.ausr-guete label + label span{border-left:none}
.ausr-guete input:checked + span{color:var(--papier-hell);background:var(--akzent);border-color:var(--akzent)}
.ausr-guete input:focus-visible + span{outline:2px solid var(--akzent);outline-offset:1px}
/* "zu Hause" (23.09.2026): a toggle like the grade buttons; the row fades when it is on. */
.ausr-daheim,.ausr-einbau,.ausr-wirkt{position:relative;cursor:pointer}
.ausr-daheim input,.ausr-einbau input,.ausr-wirkt input{position:absolute;opacity:0;pointer-events:none}
.ausr-daheim span,.ausr-einbau span,.ausr-wirkt span{display:block;padding:.1rem .35rem;border:1px solid var(--rand);font-size:.72rem;line-height:1.3}
.ausr-daheim input:checked + span,.ausr-einbau input:checked + span,.ausr-wirkt input:checked + span{color:var(--papier-hell);background:var(--akzent);border-color:var(--akzent)}
.ausr-daheim input:focus-visible + span,.ausr-einbau input:focus-visible + span,.ausr-wirkt input:focus-visible + span{outline:2px solid var(--akzent);outline-offset:1px}
.ausr-zeile.daheim .ausr-bild,.ausr-zeile.daheim .ausr-text{opacity:.45}
/* built into the implant above it (23.09.2026) */
.ausr-zeile.eingebaut{position:relative;padding-left:1.5rem}
.ausr-zeile.eingebaut::before{content:"↳";position:absolute;left:.35rem;color:var(--leise)}
/* deeper levels (a program in a commlink in an implant) and the target buttons */
.ausr-zeile.tiefe-2{padding-left:3rem}
.ausr-zeile.tiefe-2::before{left:1.85rem}
.ausr-zeile.tiefe-3{padding-left:4.5rem}
.ausr-zeile.tiefe-3::before{left:3.35rem}
.ausr-einbau{display:inline-flex;flex-wrap:wrap}
.ausr-kap{font-size:.72rem;color:var(--leise);white-space:nowrap}
.ausr-kap.voll{color:var(--akzent);font-weight:700}
.ausr-einbau label{position:relative;margin:0;cursor:pointer}
.ausr-einbau label + label span{border-left:none}
.ausr-neu{position:relative}
.ausr-treffer{position:absolute;left:0;right:0;top:100%;z-index:20;list-style:none;margin:.2rem 0 0;
  padding:.2rem;max-height:22rem;overflow:auto;background:var(--papier-hell);border:1px solid var(--rand)}
.ausr-treffer[hidden]{display:none}
.ausr-treffer .leer{padding:.35rem .5rem;font-size:.82rem}
.ausr-treffer-knopf{display:flex;flex-direction:column;align-items:flex-start;width:100%;text-align:left;
  text-transform:none;letter-spacing:normal;font-size:.88rem;border:0;background:none;color:var(--text);
  padding:.35rem .5rem}
.ausr-treffer-knopf:hover{background:var(--papier-tief);color:var(--akzent)}
/* DIE REGELSTELLE (21.09.2026). Der Text kommt Zeile fuer Zeile aus dem PDF, also
   white-space:pre-wrap - die Umbrueche des Satzes sind die einzige Gliederung, die der
   Auszug noch hat. Eine feste Hoehe mit eigenem Rollbalken, damit eine volle Buchseite
   den Bogen nicht auf das Dreifache streckt. */
.regel-text{white-space:pre-wrap;max-height:26rem;overflow:auto;font-size:.86rem;
  line-height:1.5;padding:.6rem .7rem;background:var(--papier-hell);border:1px solid var(--rand)}
.regel-text mark{background:none;color:var(--akzent);font-weight:600}
.regel-blaettern{display:flex;gap:1rem;flex-wrap:wrap;margin:.5rem 0 0;font-size:.82rem}
.regel-blaettern a{color:var(--leise)}
.regel-blaettern a:hover{color:var(--akzent)}
/* DAS BUCH IN DER LUPE (21.09.2026). Fast bildschirmfuellend - ein PDF-Betrachter in
   einem kleinen Kasten ist keiner. ::backdrop dunkelt ab, das kommt vom <dialog> selbst. */
.buch-lupe{width:92vw;height:92vh;max-width:none;max-height:none;padding:0;border:1px solid var(--rand);
  background:var(--papier-hell);color:var(--text)}
.buch-lupe::backdrop{background:rgba(0,0,0,.72)}
.buch-lupe-kopf{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.45rem .7rem;border-bottom:1px solid var(--rand);font-size:.85rem}
.buch-lupe-zu{border:0;background:none;color:var(--leise);font-size:1.4rem;line-height:1;
  padding:0 .3rem;cursor:pointer}
.buch-lupe-zu:hover{color:var(--akzent)}
.buch-lupe-rahmen{display:block;width:100%;height:calc(92vh - 2.4rem);border:0}
.buch-oeffnen{font-size:.82rem;padding:.1rem .5rem}
/* REGELWERKE (21.09.2026). Die Trefferliste: Kopfzeile mit Band und Seite, darunter der
   Schnipsel. Aufgebaut wie die Ausruestungsliste, damit beide Nachschlagewerke gleich
   gelesen werden. */
.fundliste{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:.5rem}
.fundliste li{border:1px solid var(--rand);background:var(--papier-hell);padding:.45rem .6rem}
.fundliste a{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;
  text-decoration:none;color:var(--text);font-weight:600}
.fundliste a:hover .fund-buch{color:var(--akzent)}
.fund-zahl{flex:none;color:var(--leise);font-size:.78rem;font-weight:400}
.fund-text{margin:.25rem 0 0;font-size:.82rem;line-height:1.45;color:var(--leise)}
.fund-text mark{background:none;color:var(--akzent);font-weight:600}
/* Die aufgeschlagene Seite darf hoeher sein als der Auszug am Gegenstand - hier ist Lesen
   der Zweck der Seite und nicht eine Beigabe. */
.regel-text.gross{max-height:none}
.buchseite{margin-bottom:1rem}
/* DIE BANDZEILE traegt seit dem 21.09.2026 einen Knopf, also ist sie kein einziger Link
   mehr: Titel links, Werkzeug rechts. Die Trefferzeilen daneben behalten ihren
   <a>-ueber-alles-Aufbau, dort gibt es nichts zu druecken. */
.fund-kopf{display:flex;justify-content:space-between;gap:1rem;align-items:baseline}
.fundliste a.fund-buch{display:inline;font-weight:600;color:var(--text);text-decoration:none}
.fundliste a.fund-buch:hover{color:var(--akzent)}
.fund-werkzeug{flex:none;display:inline-flex;align-items:center;gap:.6rem}
.fund-werkzeug .buch-oeffnen{font-size:.72rem;padding:.08rem .5rem}
/* DIE QUELLE IN DER AUSRUESTUNGSZEILE (21.09.2026). Ganz rechts und leise: sie ist die
   seltenste Auskunft der Zeile und darf Name und Werte nicht wegdruecken. Als Link traegt
   sie eine gepunktete Linie, damit man sieht, dass sie etwas tut - .ausr-text a ist sonst
   fett und schwarz wie der Name. */
.ausr-quelle{margin-left:auto;color:var(--leise);font-size:.76rem;white-space:nowrap}
.ausr-text a.ausr-quelle{font-weight:400;color:var(--leise);border-bottom:1px dotted var(--rand)}
.ausr-text a.ausr-quelle:hover{color:var(--akzent);border-bottom-color:var(--akzent)}
/* DER BANDFILTER IM SIEB (21.09.2026, zweite Fassung). Ein Klappmenue mit Mehrfachwahl.
   DIE LISTE SCHWEBT (position:absolute), und genau deshalb bleibt die Siebzeile einzeilig
   wie vorher - die erste Fassung war ein <select multiple> und machte sie dreimal so hoch.
   Der Rahmen traegt position:relative, sonst haenge die Liste an der Seite statt am Feld. */
.baendersieb{position:relative;display:grid;gap:.15rem}
.baendersieb .sieb-marke{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--leise)}
.bandwahl summary{list-style:none;cursor:pointer;min-width:12rem;padding:.3rem .5rem;
  border:1px solid var(--rand);background:var(--papier-hell);font-size:.85rem;
  display:flex;justify-content:space-between;align-items:center;gap:.5rem}
.bandwahl summary::-webkit-details-marker{display:none}
/* Das Dreieck als ECHTES ZEICHEN, nicht als CSS-Maskierung: die Datei ist UTF-8, und
   ein Backslash-Escape faellt durch jedes Werkzeug, das Backslashes anfasst - genau das
   ist hier passiert, danach stand ein Steuerzeichen in der Regel. */
.bandwahl summary::after{content:'▾';color:var(--leise);font-size:.8rem}
.bandwahl[open] summary::after{content:'▴'}
.bandwahl summary:hover{border-color:var(--akzent)}
.bandwahl-liste{position:absolute;z-index:30;left:0;top:100%;margin-top:.15rem;
  min-width:100%;white-space:nowrap;padding:.4rem;background:var(--papier-hell);
  border:1px solid var(--rand);max-height:20rem;overflow:auto}
.bandwahl-schnell{display:flex;gap:.4rem;margin:0 0 .35rem;padding:0 0 .35rem;
  border-bottom:1px solid var(--rand)}
.bandwahl-schnell button{font-size:.72rem;padding:.05rem .5rem}
.bandwahl-liste .ankreuz{display:flex;align-items:center;gap:.4rem;padding:.12rem .15rem;
  font-size:.85rem;cursor:pointer}
.bandwahl-liste .ankreuz:hover{color:var(--akzent)}
/* DIE VERWALTUNG (21.09.2026). Zahlentabelle, Reiter, Bilderraster.
   DAS RASTER IST auto-fill MIT EINER MINDESTBREITE, keine feste Spaltenzahl: 144 Bilder
   bei den Personas und 3 bei den Wappen sollen beide vernuenftig aussehen. */
.verw-zahlen{width:100%;border-collapse:collapse;margin:0 0 1.2rem;font-size:.85rem}
.verw-zahlen th{text-align:right;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--leise);font-weight:400;padding:.2rem .5rem;border-bottom:1px solid var(--rand)}
.verw-zahlen th:first-child{text-align:left}
.verw-zahlen td{text-align:right;padding:.25rem .5rem;border-bottom:1px solid var(--rand)}
.verw-zahlen td:first-child{text-align:left}
.verw-zahlen tr.offen td{color:var(--text);font-weight:600}
.verw-zahlen tr.summe td{border-bottom:0;color:var(--leise);font-style:italic}
.verw-zahlen a{color:inherit;text-decoration:none;border-bottom:1px dotted var(--rand)}
.verw-zahlen a:hover{color:var(--akzent)}

.verw-reiter{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 1rem}
.verw-reiter a{padding:.25rem .7rem;border:1px solid var(--rand);text-decoration:none;
  color:var(--leise);font-size:.82rem;background:var(--papier-hell)}
.verw-reiter a:hover{color:var(--akzent);border-color:var(--akzent)}
/* Der offene Reiter ist KEIN Link mehr im Aussehen - er traegt Papierfarbe und einen
   Akzentstrich oben, damit man auf einen Blick sieht, wo man ist. */
.verw-reiter a.offen{color:var(--text);font-weight:600;border-top:2px solid var(--akzent)}
.verw-reiter .zahl{color:var(--leise);font-weight:400;font-size:.76rem;margin-left:.3rem}

.verw-raster{list-style:none;margin:0;padding:0;display:grid;gap:.7rem;
  grid-template-columns:repeat(auto-fill,minmax(9rem,1fr))}
.verw-raster li{display:grid;gap:.15rem;border:1px solid var(--rand);padding:.4rem;
  background:var(--papier-hell)}
.verw-bild{display:block;aspect-ratio:1;overflow:hidden;background:var(--papier-tief)}
.verw-bild img{width:100%;height:100%;object-fit:cover;display:block}
/* Der Platzhalter fuer ein verborgenes 18+ Bild - kein gebrochenes Bild, sondern ein
   ruhiges Feld mit der Kennzeichnung darin. */
/* Das durchgestrichene Auge (21.09.2026) - dasselbe Zeichen wie ueberall sonst fuer
   "verborgen". Es zeichnet mit currentColor, nimmt also die Farbe dieses Feldes. */
.verw-bild.verborgen{display:flex;align-items:center;justify-content:center;
  color:var(--leise)}
.verw-bild.verborgen svg{width:28px;height:28px;display:block}
.verw-bogen{font-size:.8rem;line-height:1.25;overflow-wrap:anywhere}
.verw-bogen a{color:var(--text);text-decoration:none;font-weight:600}
.verw-bogen a:hover{color:var(--akzent)}
.verw-datei{font-size:.72rem;color:var(--leise)}
.verw-runter{font-size:.72rem;color:var(--leise);text-decoration:none;justify-self:start;
  border-bottom:1px dotted var(--rand)}
.verw-runter:hover{color:var(--akzent);border-bottom-color:var(--akzent)}
.verw-bogen .verw-auch{display:block;font-size:.68rem;color:var(--leise);
  letter-spacing:.08em;text-transform:uppercase;margin-top:.2rem}

/* DIE REGELWERK-KACHELN (21.09.2026, Roger: "kannst du die regelwerke startseite mit
   kacheln bauen und der regelwerk titelseite als bild", Groesse "wie eine personakachel").
   Es IST das Raster der Personaliste - hier stehen nur die drei Unterschiede.
   .raster.baende UND NICHT .baende: .raster .bildnis img setzt object-fit:cover mit
   derselben Spezifitaet (0,2,1), und wer sich auf die Reihenfolge im Stylesheet
   verlaesst, baut die Falle aus den Abschnitten 24, 35 und 41 ein drittes Mal. */
.raster.baende .bildnis img{object-fit:contain;background:var(--papier-tief)}
.raster.baende .bildnis.leer{display:flex;align-items:center;justify-content:center;
  color:var(--leise)}
.raster.baende .bildnis.leer svg{width:38%;height:38%;display:block}
.raster.baende h2{margin:0}
.raster.baende h2 a{color:inherit;text-decoration:none;display:block}
.raster.baende h2 a:hover{color:var(--akzent)}

/* ------------------------------------------------------- REITER AM BOGEN ---
   22.09.2026, Issue #17. Der Bogen hatte zwoelf Abschnitte untereinander; die Werte
   der SR5-Boegen kommen noch dazu. Statt einer immer laengeren Spalte sechs Reiter
   ueber der vollen Breite, darueber eine Kopfzeile statt der 280-Pixel-Spalte.
   NUR edit.php HAT SIE. szene.php und gegenstand.php tragen dasselbe Markup Klasse
   fuer Klasse (Abschnitte 37 und 70) - deshalb haengt alles hier an .mit-reitern
   beziehungsweise .bogenkopf und nicht an .bogen oder .steckbrief allein.

   GEBAUT NACH DEM PROTOTYP (.claude/previews/persona-bogen-reiter.html), nachdem
   Roger die echte Seite daneben gehalten hatte: "online sieht es ganz anders aus."
   Die erste Fassung war ein Raster aus drei Spalten mit den EINGABEFELDERN darin; der
   Prototyp zeigt eine ANZEIGE - Portrait, Name, Marker, Auszug, Zaehler - und die
   Felder unten im Reiter. */
.bogen.mit-reitern{display:block}

/* DER KOPF KLEBT OBEN, und zwar als EIN Block samt Reiterleiste und Band: zwei
   getrennte sticky-Elemente schoeben sich uebereinander. overflow:hidden haelt das
   Hintergrundbild in seinen Grenzen. */
/* KEIN sticky UND KEIN ZUSAMMENSCHIEBEN (22.09.2026). Roger: "das ist falsch, nimm das
   komplett raus, lass es einfach hochscrollen" - "wir versuchen es spaeter nochmal".
   Die vier gescheiterten Versuche stehen in Abschnitt 98; sie sind die Begruendung
   dafuer, es nicht unbesehen wieder einzubauen.
   overflow:hidden bleibt - es haelt das Hintergrundbild in den Grenzen des Kopfes. */
.bogenkopf{overflow:hidden;padding:.7rem .9rem 0}

/* DAS HINTERGRUNDBILD (Roger: "Wie waere es ein Bild in den Bildern als 'Background'
   zu markieren und dieses in den Kopf zu legen?"). Die Adresse setzt edit.php AM
   ELEMENT und nicht hier - eine relative Adresse in einer CSS-Datei gilt gegen diese
   Datei, also gegen assets/ (gemessen am 20.09.2026, Abschnitt 71). Ohne Bild ist
   --hg-bild leer und die Ebene bleibt unsichtbar. 70 % ist Rogers Wert. */
.bogenkopf::before{content:"";position:absolute;inset:0;z-index:0;
  background:var(--hg-bild) center 45%/cover no-repeat;
  opacity:var(--hg-deckkraft,.7)}
.bogenkopf:not(.mit-hg)::before{content:none}
.kopfzeile,.bogenkopf .reiter,.reiterband{position:relative;z-index:1}

.kopfzeile{display:flex;align-items:flex-start;gap:1.1rem;flex-wrap:wrap;padding-bottom:.6rem}

/* 227 Pixel ist genau die Breite, die das Portrait in der alten Spalte hatte:
   280 minus Polster und Raender. */
.bogenkopf .bildnisrahmen{width:227px;flex:0 0 auto}
.bogenkopf .bildnis{aspect-ratio:3/4}

/* ZWEI PLATTEN AUF DEM BILD, und das ist kein Zierrat: ohne sie steht der Text direkt
   auf dem Foto und ist je nach Bild unlesbar. Sie verschwinden, wenn der Kopf
   zusammengeschoben ist - dann verschwindet auch das Bild. */
.kopfmitte,.kopfwerte{background:var(--papier);border:1px solid var(--rand);
  border-radius:var(--radius);padding:.5rem .7rem}
.kopfmitte{flex:1 1 22rem;min-width:0}

.kopfname{font:700 1.5rem/1.15 var(--serif)}
/* Der Name ist ein Eingabefeld und soll wie eine Ueberschrift aussehen: er erbt die
   Schrift seiner Huelle, statt sie noch einmal zu nennen. */
.bogenkopf .name{margin:0;padding:0;text-align:left;font:inherit;color:inherit;
  border:0;background:transparent;width:100%}
.bogenkopf .name:focus{border:0;background:rgba(255,255,255,.35);outline:none}
.kopfname small{display:block;font:400 .78rem/1.3 var(--serif);color:var(--leise);
  letter-spacing:.06em}

.marker{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.25rem}
.marker span{font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;
  border:1px solid var(--rand);padding:.1rem .35rem;border-radius:2px;color:var(--leise)}
.marker span.akz{background:var(--akzent);border-color:var(--akzent);color:var(--papier-hell)}

/* Der Auszug wird ZEILENWEISE abgeschnitten, nicht zeichenweise: so endet er nie
   mitten in einer halben Zeile Text. Die 600 Zeichen davor kappt edit.php. */
.kopfauszug{margin:.7rem 0 0;font-size:.88rem;line-height:1.5;color:var(--leise);
  border-left:3px solid var(--rand);padding-left:.75rem;
  display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden}
.kopfauszug b{display:block;font:700 .66rem/1 var(--serif);letter-spacing:.18em;
  text-transform:uppercase;color:var(--akzent);margin-bottom:.3rem}

.kopfwerte{margin-left:auto;display:flex;gap:1.3rem;text-align:right}
.kopfwerte div{font-size:.78rem;color:var(--leise)}
.kopfwerte b{display:block;font:700 1.05rem/1.2 var(--serif);color:var(--text)}
.kopfwerte b.warn{color:var(--akzent)}

@media(max-width:880px){
  .bogenkopf .bildnisrahmen{width:120px}
  .kopfwerte{margin-left:0;gap:.9rem}
}

/* ------------------------------------------------------------- die Leiste ---
   Sie steht im Kopf und scrollt mit ihm weg. */
.reiter{display:flex;gap:.25rem;flex-wrap:wrap;margin:0;
  border-bottom:2px solid var(--akzent)}
.reiter button{font:600 .74rem/1 var(--serif);letter-spacing:.16em;text-transform:uppercase;
  padding:.55rem .85rem;border:1px solid var(--rand);border-bottom:none;
  background:var(--papier-tief);color:var(--leise);cursor:pointer;
  border-radius:var(--radius) var(--radius) 0 0}
.reiter button:hover{color:var(--text)}
.reiter button.an{background:var(--akzent);color:var(--papier-hell);border-color:var(--akzent)}
/* Die Zahl am Reiter sagt, was dahinter liegt. Sie ist kleiner und blasser als die
   Beschriftung - sie ist die Nebenauskunft, nicht der Name. */
.reiter button .zahl{margin-left:.45rem;font-size:.66rem;opacity:.7;letter-spacing:.06em}

/* Das Band je Reiter kommt aus dem Welt-CSS; ohne Weltdatei gibt es keines. */
.reiterband{display:none}

.tafel{display:none}
.tafel.an{display:grid;gap:1rem}
/* Knoepfe, die nur einen Reiter betreffen, stehen rechts oben in ihm (Alle Felder generieren). */
.tafel-knoepfe{display:flex;justify-content:flex-end;gap:.5rem}

/* Der Steckbrief im Reiter "Figur" - die Felder, die bis zum 22.09.2026 im Kopf
   standen. Sie behalten ihre Breite, statt ueber die ganze Seite zu laufen. */
.steckbrief-daten .kin-id,.steckbrief-daten .bildwahl{max-width:24rem}
.steckbrief-daten .kopf-zeile{display:flex;flex-wrap:wrap;align-items:center;
  gap:.4rem 1.2rem;margin:.2rem 0}
.steckbrief-daten .kopf-zeile .merkmale{margin:0}
.steckbrief-daten .kopf-zeile .ankreuz{margin:0;white-space:nowrap}
.steckbrief-daten .fakten{margin-top:.7rem}

/* =============================================== 3. the Shadowrun layer ===== */

/* ------------------------------------------------------------- type --------
   Body text Optima, headings Microgramma, everything that LABELS something (buttons,
   field names, counters, menus) Univers Condensed - the split the books use. */
body{font-size:15.5px;line-height:1.6}
h1,h2,h3{font-family:var(--sr-kopf);font-weight:700;letter-spacing:.02em}
.leiste h1{font-size:1.75rem;line-height:1.1;color:var(--akzent);text-transform:uppercase;
  letter-spacing:.03em}
label{font-family:var(--sr-schmal);font-size:.86rem;color:#3a3a3e}
.hint{font-family:var(--serif);font-size:.82rem}
.rubrik{font-family:var(--sr-schmal);font-weight:700;font-size:.8rem;letter-spacing:.1em;
  color:var(--akzent)}
.rubrik .zahl{font-size:.8rem}
.zahl{font-family:var(--sr-schmal)}
.stand,.zaehler,.preis,.meta{font-family:var(--sr-schmal);letter-spacing:.04em}
.stand{font-size:.82rem}
.zaehler{font-size:.82rem}

/* ------------------------------------------------------- the page frame ----
   THE BOOK'S HEAD BAND at the top of every page, the same band as the footer. The
   notch at the lower right corner is the sheet's cut corner. */
.seite{max-width:1180px}
/* THE BOOK'S BANDS ARE BUILT, NOT CUT OUT (22.09.2026). Rendered from the PDF they came
   out in pieces - page numbers and chapter names are baked into the raster, a picture
   frame reaches into one of them (Roger: "im pdf teilweise zerschnitten, sehr unschoen").
   So the PRINCIPLE is rebuilt instead: a dark red band with fine scan lines and a ragged
   edge of light pixel blocks, generated once as an SVG (fixed seed - it looks the same on
   every load; the source is tools/design/, see PROJECT_NOTES section 9). */
:root{
  --sr-pixel-unten:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22600%22 height=%2212%22 viewBox=%220 0 600 12%22%3E%3Crect x=%220%22 y=%228%22 width=%2210%22 height=%224%22 fill=%22rgb%28205,205,207%29%22 fill-opacity=%220.80%22/%3E%3Crect x=%2236%22 y=%224%22 width=%2210%22 height=%228%22 fill=%22rgb%28235,235,237%29%22 fill-opacity=%220.35%22/%3E%3Crect x=%2246%22 y=%227%22 width=%2218%22 height=%225%22 fill=%22rgb%28235,235,237%29%22 fill-opacity=%220.50%22/%3E%3Crect x=%2264%22 y=%222%22 width=%226%22 height=%2210%22 fill=%22rgb%28225,225,227%29%22 fill-opacity=%220.65%22/%3E%3Crect x=%2274%22 y=%222%22 width=%2218%22 height=%2210%22 fill=%22rgb%28245,245,247%29%22 fill-opacity=%220.50%22/%3E%3Crect x=%2294%22 y=%226%22 width=%2210%22 height=%226%22 fill=%22rgb%28205,205,207%29%22 fill-opacity=%220.65%22/%3E%3Crect x=%22104%22 y=%227%22 width=%2232%22 height=%225%22 fill=%22rgb%28245,245,247%29%22 fill-opacity=%220.65%22/%3E%3Crect x=%22140%22 y=%222%22 width=%2232%22 height=%2210%22 fill=%22rgb%28215,215,217%29%22 fill-opacity=%220.65%22/%3E%3Crect x=%22190%22 y=%229%22 width=%2232%22 height=%223%22 fill=%22rgb%28205,205,207%29%22 fill-opacity=%220.80%22/%3E%3Crect x=%22226%22 y=%229%22 width=%2232%22 height=%223%22 fill=%22rgb%28215,215,217%29%22 fill-opacity=%220.50%22/%3E%3Crect x=%22258%22 y=%228%22 width=%2240%22 height=%224%22 fill=%22rgb%28215,215,217%29%22 fill-opacity=%220.35%22/%3E%3Crect x=%22300%22 y=%227%22 width=%2210%22 height=%225%22 fill=%22rgb%28225,225,227%29%22 fill-opacity=%220.50%22/%3E%3Crect x=%22310%22 y=%222%22 width=%2210%22 height=%2210%22 fill=%22rgb%28215,215,217%29%22 fill-opacity=%220.35%22/%3E%3Crect x=%22324%22 y=%228%22 width=%228%22 height=%224%22 fill=%22rgb%28245,245,247%29%22 fill-opacity=%220.80%22/%3E%3Crect x=%22332%22 y=%222%22 width=%2240%22 height=%2210%22 fill=%22rgb%28245,245,247%29%22 fill-opacity=%220.50%22/%3E%3Crect x=%22416%22 y=%229%22 width=%2218%22 height=%223%22 fill=%22rgb%28205,205,207%29%22 fill-opacity=%220.50%22/%3E%3Crect x=%22434%22 y=%229%22 width=%2224%22 height=%223%22 fill=%22rgb%28215,215,217%29%22 fill-opacity=%220.80%22/%3E%3Crect x=%22458%22 y=%229%22 width=%226%22 height=%223%22 fill=%22rgb%28215,215,217%29%22 fill-opacity=%220.65%22/%3E%3Crect x=%22464%22 y=%226%22 width=%2218%22 height=%226%22 fill=%22rgb%28205,205,207%29%22 fill-opacity=%220.50%22/%3E%3Crect x=%22482%22 y=%224%22 width=%2240%22 height=%228%22 fill=%22rgb%28215,215,217%29%22 fill-opacity=%220.80%22/%3E%3Crect x=%22548%22 y=%228%22 width=%226%22 height=%224%22 fill=%22rgb%28215,215,217%29%22 fill-opacity=%220.80%22/%3E%3Crect x=%22586%22 y=%229%22 width=%2218%22 height=%223%22 fill=%22rgb%28245,245,247%29%22 fill-opacity=%220.50%22/%3E%3C/svg%3E");
  --sr-pixel-oben:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22600%22 height=%2212%22 viewBox=%220 0 600 12%22%3E%3Crect x=%220%22 y=%220%22 width=%2210%22 height=%224%22 fill=%22rgb%28205,205,207%29%22 fill-opacity=%220.80%22/%3E%3Crect x=%2236%22 y=%220%22 width=%2210%22 height=%228%22 fill=%22rgb%28235,235,237%29%22 fill-opacity=%220.35%22/%3E%3Crect x=%2246%22 y=%220%22 width=%2218%22 height=%225%22 fill=%22rgb%28235,235,237%29%22 fill-opacity=%220.50%22/%3E%3Crect x=%2264%22 y=%220%22 width=%226%22 height=%2210%22 fill=%22rgb%28225,225,227%29%22 fill-opacity=%220.65%22/%3E%3Crect x=%2274%22 y=%220%22 width=%2218%22 height=%2210%22 fill=%22rgb%28245,245,247%29%22 fill-opacity=%220.50%22/%3E%3Crect x=%2294%22 y=%220%22 width=%2210%22 height=%226%22 fill=%22rgb%28205,205,207%29%22 fill-opacity=%220.65%22/%3E%3Crect x=%22104%22 y=%220%22 width=%2232%22 height=%225%22 fill=%22rgb%28245,245,247%29%22 fill-opacity=%220.65%22/%3E%3Crect x=%22140%22 y=%220%22 width=%2232%22 height=%2210%22 fill=%22rgb%28215,215,217%29%22 fill-opacity=%220.65%22/%3E%3Crect x=%22190%22 y=%220%22 width=%2232%22 height=%223%22 fill=%22rgb%28205,205,207%29%22 fill-opacity=%220.80%22/%3E%3Crect x=%22226%22 y=%220%22 width=%2232%22 height=%223%22 fill=%22rgb%28215,215,217%29%22 fill-opacity=%220.50%22/%3E%3Crect x=%22258%22 y=%220%22 width=%2240%22 height=%224%22 fill=%22rgb%28215,215,217%29%22 fill-opacity=%220.35%22/%3E%3Crect x=%22300%22 y=%220%22 width=%2210%22 height=%225%22 fill=%22rgb%28225,225,227%29%22 fill-opacity=%220.50%22/%3E%3Crect x=%22310%22 y=%220%22 width=%2210%22 height=%2210%22 fill=%22rgb%28215,215,217%29%22 fill-opacity=%220.35%22/%3E%3Crect x=%22324%22 y=%220%22 width=%228%22 height=%224%22 fill=%22rgb%28245,245,247%29%22 fill-opacity=%220.80%22/%3E%3Crect x=%22332%22 y=%220%22 width=%2240%22 height=%2210%22 fill=%22rgb%28245,245,247%29%22 fill-opacity=%220.50%22/%3E%3Crect x=%22416%22 y=%220%22 width=%2218%22 height=%223%22 fill=%22rgb%28205,205,207%29%22 fill-opacity=%220.50%22/%3E%3Crect x=%22434%22 y=%220%22 width=%2224%22 height=%223%22 fill=%22rgb%28215,215,217%29%22 fill-opacity=%220.80%22/%3E%3Crect x=%22458%22 y=%220%22 width=%226%22 height=%223%22 fill=%22rgb%28215,215,217%29%22 fill-opacity=%220.65%22/%3E%3Crect x=%22464%22 y=%220%22 width=%2218%22 height=%226%22 fill=%22rgb%28205,205,207%29%22 fill-opacity=%220.50%22/%3E%3Crect x=%22482%22 y=%220%22 width=%2240%22 height=%228%22 fill=%22rgb%28215,215,217%29%22 fill-opacity=%220.80%22/%3E%3Crect x=%22548%22 y=%220%22 width=%226%22 height=%224%22 fill=%22rgb%28215,215,217%29%22 fill-opacity=%220.80%22/%3E%3Crect x=%22586%22 y=%220%22 width=%2218%22 height=%223%22 fill=%22rgb%28245,245,247%29%22 fill-opacity=%220.50%22/%3E%3C/svg%3E");
  --sr-zeilen:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px);
}
/* THE BAND IS A LAYER BEHIND (::before), NOT A clip-path ON THE HEAD: the clip cut off the
   world list that opens out of the crest button (Roger, 25.09.2026: "die weltenauswahl links
   kaputt ... der dropdown ist hinter dem kopf") - the same trap as the catalogue's red bar.
   The head stands above the page (z-index 20; the compact sheet bar is 45). */
.kopf{position:relative;z-index:20;color:#eee;padding:.55rem 1rem .95rem;margin:0 0 .2rem;align-items:center;
  background:none}
.kopf::before{content:"";position:absolute;inset:0;z-index:-1;
  background:var(--sr-pixel-unten) left bottom/600px 12px repeat-x,var(--sr-zeilen),var(--sr-band);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%)}
/* THE MARK SITS LEFT, beside the world crest, like the title in the book's band - the
   centred column of the standard design left the menu too little room (it overflowed). */
.kopf{grid-template-columns:auto auto 1fr}
.marke{font-family:var(--sr-kopf);font-weight:700;font-size:1.15rem;letter-spacing:.26em;
  color:#f3eded;justify-self:start}
.marke img{height:2.9rem;filter:brightness(0) invert(.94)}
/* NO PERSONA LOGO IN THE SHADOWRUN HEAD BAND, for now (Roger: "lass es erst mal weg"):
   the world crest is the mark here, the word stays. Only where there is a word - the
   login page shows the logo alone and keeps it. */
.marke:has(.wort) img{display:none}
/* ONE LINE WHERE IT FITS: seven items fit beside the mark only with modest spacing - with .12em
   and 1.1rem they wrapped into two rows (seen 22.09.2026). WHERE IT DOES NOT, IT WRAPS inside the
   band, right-aligned (16.10.2026, Roger: "die hauptnavigation oben muss umbrechen wenn das
   fenster zu schmal wird"): on the adventure page the head is narrower than the window (the
   right column), so the 880px query below never came and the nowrap line ran out of the band
   under "Keine Szene". */
.kopf nav{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;row-gap:.35rem;white-space:nowrap}
.kopf nav a{font-family:var(--sr-schmal);font-weight:700;font-size:.84rem;letter-spacing:.07em;
  color:rgba(243,237,237,.78);margin-left:.8rem}
.kopf nav a:hover{color:#fff}
/* the line between the menu's topic groups (28.09.2026, Roger: "ein feiner strich") */
.kopf nav .trenner{display:inline-block;width:1px;height:.8em;margin-left:.8rem;
  background:rgba(243,237,237,.4);vertical-align:-.05em}
/* ON A PHONE the one line does not fit (seen in the narrow pane, 22.09.2026: the band ran
   off the screen). There the menu gets its own row under crest and mark and may wrap. */
@media(max-width:880px){
  .kopf{grid-template-columns:auto 1fr;row-gap:.4rem}
  .kopf nav{grid-column:1/-1;justify-self:start;justify-content:flex-start;white-space:normal}
  .kopf nav a{margin:0 .8rem 0 0;display:inline-block}
  .kopf nav .trenner{margin:0 .8rem 0 0}
  .kopfwerte{flex-wrap:wrap}
}
.weltknopf{border-color:rgba(255,255,255,.35);color:#eee}
.weltknopf:hover{border-color:#fff;color:#fff}
.weltmenue{background:#efefef;border-color:var(--sr-linie)}

/* The ornament line becomes a plain red rule with a short bar - no diamond. */
.zier::before,.zier::after{border-top:2px solid var(--akzent);box-shadow:none}
.zier i{width:22px;height:6px;transform:none;background:var(--akzent)}
.zier.klein::before,.zier.klein::after{border-top-width:1px}
.zier.klein i{width:12px;height:4px}

/* THE FOOT BAND. It carried the emblem at first, as the book pages do - Roger: "das logo
   unten finde ich nicht so gut". The emblem now sits on the sheet (below). */
.fusszeile{color:#eee;padding:.95rem 1rem .55rem;
  background:var(--sr-pixel-oben) left top/600px 12px repeat-x,var(--sr-zeilen),var(--sr-band);
  clip-path:polygon(12px 0,100% 0,100% 100%,0 100%,0 12px)}
.fusszeile .fussrechts a{font-family:var(--sr-schmal);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:rgba(243,237,237,.78)}
.fusszeile .fussrechts a:hover{color:#fff}
.fusszeile .ankreuz{color:#eee}
.fusszeile .institut{filter:brightness(0) invert(.94)}

/* ------------------------------------------------------------- boxes -------
   THE CHARACTER SHEET'S BOX: a thin red outline on a light ground, straight corners, the
   top right corner cut off. Nothing on the box itself is clipped: a clip-path or mask
   would also cut off everything that opens out of the box - the picture pickers open
   upward.
   THE CORNER IS REALLY EMPTY (22.09.2026, second version). The first one painted the
   cut with the page's grey over a normal border - but the page ground is a gradient, so
   the triangle showed as a patch (Roger: "bei den ecken ist der hintergrund drin"). Now
   the box's own ground leaves the corner transparent (the 225deg gradient stops 10.6px
   in = a 15px cut), and the red outline is drawn by ::after as a ring with the same cut
   (clip-path on the pseudo element only, evenodd = outer path minus inner path). The
   drop shadow went with the border: it would outline the missing corner. */
.kasten{border:none;box-shadow:none;
  background:linear-gradient(225deg,transparent 10.6px,#ececec 10.6px)}
.kasten::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--sr-linie);
  clip-path:polygon(evenodd,
    0 0,calc(100% - 15px) 0,100% 15px,100% 100%,0 100%,0 0,
    1px 1px,1px calc(100% - 1px),calc(100% - 1px) calc(100% - 1px),calc(100% - 1px) 15.4px,calc(100% - 15.4px) 1px,1px 1px)}
.ecke{display:none}

/* THE RED FLAG: a box heading as on the sheet - filled red, light capitals, slanted
   right end, sitting on the top edge of the box. The head row is pulled to the box's
   edges for that; the fold button moves behind the flag (order), the tools stay right. */
/* padding-right 1.1rem = the box's own inset: the tools end where the textarea ends, and
   clear of the 15px cut corner (with .6rem the last button reached into it - Roger's
   screenshot, 25.09.2026) */
.kasten > .fkopf{margin:-1rem -1.1rem .7rem;padding-right:1.1rem;align-items:center}
.kasten > .fkopf > h2{order:-1}
.kasten > .fkopf > h2,
.kasten > h2{font-family:var(--sr-kopf);font-weight:700;font-size:.78rem;line-height:1.2;
  letter-spacing:.12em;text-transform:uppercase;color:#fff;background:var(--akzent);
  padding:.45rem 1.9rem .42rem .9rem;margin:0;white-space:nowrap;
  clip-path:polygon(0 0,calc(100% - 1rem) 0,100% 100%,0 100%)}
.kasten > h2{display:inline-block;margin:-1rem 0 .7rem -1.1rem}
.kasten > .fkopf > h2:hover{color:#fff;background:var(--akzent-hell)}
.kasten > .fkopf > h2 .zahl{color:rgba(255,255,255,.75);font-size:.72rem}
.feld.zu{padding-bottom:0}
.feld.zu > .fkopf{margin-bottom:0}
.klapp{color:var(--leise)}

/* ------------------------------------------------------------ controls -----*/
button,.dateiknopf span{font-family:var(--sr-schmal);font-weight:700;font-size:.8rem;
  letter-spacing:.07em;color:#2a2a2e;background:linear-gradient(180deg,#ececec,#d6d6d8);
  border:1px solid #9c9ca0}
button:hover,.dateiknopf:hover span{color:var(--akzent);border-color:var(--akzent)}
button.haupt{color:#fff;background:var(--akzent);border-color:var(--akzent);
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,0 100%)}
button.haupt:hover{background:var(--akzent-hell);color:#fff}
.werkzeug button{font-size:.74rem}

/* ICONS: FONT AWESOME 7 ETCH (22.09.2026, Roger's choice: "etch passt schon ziemlich gut in
   die welt"). The font comes with Roger's kit, loaded by designs/shadowrun/kopf.php; the
   glyphs are set HERE, so the page markup stays the standard one. Etch has only about 140
   icons (read out of the font file) - the code points below were checked against it.
   Where Roger and I placed them: the field tool buttons and the image tiles (space is
   tight, they repeat) and the tabs (set with the tab styles below). NOT on "-> Kindroid": the script writes
   "sende ..." and "uebertragen" into that button, and an icon would swallow that answer
   for an action that overwrites over there without a way back. */
.werkzeug .zauberstab svg,.werkzeug .zurueck svg,.werkzeug .kopieren svg,
.werkzeug .bez-auffrischen svg{display:none}
.werkzeug .zauberstab::before,.werkzeug .zurueck::before,.werkzeug .kopieren::before,
.werkzeug .bez-auffrischen::before,.werkzeug .kuerzen::before,
.bild-knoepfe .bild-haupt::before,.bild-knoepfe .bild-weg::before{
  font:normal 900 1rem/1 "Font Awesome 7 Etch";display:inline-block;vertical-align:-.12em}
.werkzeug .zauberstab::before{content:"\e2ca"}       /* wand-magic-sparkles */
.werkzeug .zurueck::before{content:"\f0e2"}          /* arrow-rotate-left */
.werkzeug .kopieren::before{content:"\f24d"}         /* clone */
.werkzeug .bez-auffrischen::before{content:"\f1e0"}  /* share-nodes */
.werkzeug .kuerzen::before{content:"\f0c4";margin-right:.4em}  /* scissors, text stays */
/* The image tiles: crown and bin instead of the words. "Weg" turns red on the first click
   (.scharf) and shows a check mark (23.09.2026, like the list rows - the word "OK?" stays
   in the button for screen readers). */
.bild-knoepfe .bild-haupt,.bild-knoepfe .bild-weg{font-size:0;padding:.28rem .1rem}
.bild-knoepfe .bild-haupt::before{content:"\f521";font-size:.85rem}          /* crown */
.bild-knoepfe .bild-weg:not(.scharf)::before{content:"\f1f8";font-size:.85rem} /* trash */
.bild-knoepfe .bild-weg.scharf::before{content:"\f00c";font-size:.85rem}     /* check */
.klapp{background:none;border-color:transparent}
.zauberstab{color:var(--akzent);border-color:var(--akzent-hell)}

input[type=text],input[type=password],textarea{font-family:var(--serif);
  background:#f7f7f7;border:1px solid #b0b0b4}
input:focus,textarea:focus{border-color:var(--akzent);background:#fff;
  box-shadow:0 0 0 1px var(--akzent)}
.feld textarea{background-color:#f7f7f7}
select.weltwahl,.sieb select,.sieb input[type=text]{font-family:var(--serif);background:#f7f7f7}
.sieb label span{font-family:var(--sr-schmal);font-weight:700;letter-spacing:.1em}

/* ------------------------------------------------------ the sheet head -----
   The sheet's top line: the name as the chapter title, the counters in the heading font. */
.bildnisrahmen{background:#1e1e22;border-color:#111;box-shadow:none;padding:5px}
.bildnis{border-color:#000}
.kopfmitte,.kopfwerte{background:#f1f1f1;border:1px solid var(--sr-linie)}
/* THE MIDDLE PLATE REACHES DOWN TO THE PORTRAIT'S LOWER EDGE (Roger: "das textfeld in der
   mitte oben bitte bis unterkante"); the counters stay a plate at the top. Two more lines
   of the excerpt fill the height it gains. */
.kopfmitte{align-self:stretch}
.kopfauszug{-webkit-line-clamp:9}
/* SPACE BETWEEN THE SHEET HEAD AND THE FIRST BOX of the tab - the box sat glued to the
   band (Roger's arrow, 22.09.2026). The same 1rem as between the boxes. */
.bogen.mit-reitern{margin-top:1rem}
/* THE RED RULE UNDER THE HEAD BAND IS GONE (Roger: "der strich oben kann weg") - the
   band's own pixel edge closes it. */
.kopf + .zier{display:none}
/* ...and the one above the foot band too, so both bands are closed the same way (Roger:
   "den strich unten bitte auch weg, dann ist es einheitlich"). */
.zier.unten{display:none}
/* Nothing below the foot band and nothing above the head band (09.10.2026, Roger: "unter der
   fusszeile ist ein abstand ueberfluessig", "ueber dem kopf auch"): they close and open the
   page. Not on the chat pages, whose fixed bar needs the room, nor on the login page (9vh). */
.fusszeile{margin-top:1.6rem;margin-bottom:0}
.seite{padding-bottom:0}
body:not(.mit-kopfleiste):not(.schmal) .seite{padding-top:0}
.kopf{margin-bottom:1.2rem}   /* the room the rule used to take, or the title sits on the band */
.kopfname{font-family:var(--sr-kopf);font-size:1.55rem;line-height:1.15;color:var(--akzent);
  text-transform:uppercase;letter-spacing:.02em}
.kopfname .name-text{display:block;min-height:1.15em}   /* the name as text (kopf-name.php) */
.kopfname small{font-family:var(--sr-schmal);font-size:.9rem;text-transform:none;
  letter-spacing:.04em;color:var(--leise)}
.marker span{font-family:var(--sr-schmal);font-weight:700;font-size:.74rem;letter-spacing:.08em;
  border-color:#9c9ca0;border-radius:0}
.kopfauszug{font-family:var(--serif);border-left-color:var(--akzent);color:#3a3a3e}
.kopfauszug b{font-family:var(--sr-kopf);font-size:.62rem;letter-spacing:.14em}
.kopfwerte div{font-family:var(--sr-schmal);font-size:.76rem;letter-spacing:.08em;
  text-transform:uppercase}
.kopfwerte b{font-family:var(--sr-kopf);font-size:1.2rem;color:var(--akzent)}

/* THE VALUE BOX UNDER THE COUNTERS (22.09.2026) - weapons carried and open injuries,
   markup in designs/shadowrun/kopf-werte.php. Built after the book's value tables (core
   rulebook, PDF page 53, measured there): a dark plate with the cut corner, heading in
   yellow #fdb714, a near-black header row #231f20 with yellow column heads, zebra rows
   #58595b on the plate, white values, a yellow rule under each table. The heading is
   semi-bold instead of the book's bold (Roger: "die ueberschrift evtl. nicht so dick").
   PLACED IN THE COUNTERS' COLUMN: on a wide screen the head row becomes a grid - portrait
   and middle plate span both rows, counters above, box below. width:0 plus min-width:100%
   keeps the table from widening that column: it takes the counters' width, long weapon
   names wrap. Narrow screens keep the wrapping row, and the box takes a line of its own. */
@media(min-width:881px){
  .kopfzeile{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
    grid-template-rows:auto 1fr;column-gap:1.1rem;row-gap:.7rem;align-items:start}
  .kopfzeile > .bildnisrahmen{grid-column:1;grid-row:1 / span 2}
  .kopfzeile > .kopfmitte{grid-column:2;grid-row:1 / span 2}
  .kopfzeile > .kopfwerte{grid-column:3;grid-row:1;margin-left:0}
  .kopfzeile > .sr-wertebox{grid-column:3;grid-row:2;width:0;min-width:100%}
}
@media(max-width:880px){.sr-wertebox{flex:1 1 100%}}
.sr-wertebox{position:relative;z-index:0;padding:.55rem .7rem 1.25rem;color:#fff;
  font:400 .8rem/1.25 var(--sr-schmal);filter:drop-shadow(3px 4px 3px rgba(0,0,0,.22))}
/* ^ THE BOOK'S OUTLINE, measured at 300 dpi (PDF page 53) and on Roger's close-up, taken
   x1.33 to CSS pixels. Two STEPS, each a slant plus a flat shoulder: top right the top edge
   ends 49px before the corner, drops 17px on a slant and runs flat for the last 20px;
   bottom left the first 38px of the bottom edge sit 8px higher and drop on an 11px slant.
   (First tries: two 45-degree corners, then a slant straight into the corner - Roger:
   "fast, schau mal".) The room under the table is the book's too (Roger: "unten links
   etwas mehr abstand").
   THE PLATE IS ::before, NOT THE BOX: a clip-path on the box would cut off its drop
   shadow, which the book has (down right). The box carries the filter, the plate behind
   the content (z-index -1 inside the box's own stacking context), the fine light rim is
   a ring on ::after with the same shape, 1px inside (evenodd, as on .kasten). */
.sr-wertebox::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(160deg,#343335,#262527 70%);
  clip-path:polygon(0 0,calc(100% - 49px) 0,calc(100% - 20px) 17px,100% 17px,100% 100%,
    49px 100%,38px calc(100% - 8px),0 calc(100% - 8px))}
.sr-wertebox::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:rgba(255,255,255,.3);
  clip-path:polygon(evenodd,
    0 0,calc(100% - 49px) 0,calc(100% - 20px) 17px,100% 17px,100% 100%,
    49px 100%,38px calc(100% - 8px),0 calc(100% - 8px),0 0,
    1px 1px,1px calc(100% - 9px),38.4px calc(100% - 9px),49.4px calc(100% - 1px),
    calc(100% - 1px) calc(100% - 1px),calc(100% - 1px) 18px,calc(100% - 20.4px) 18px,
    calc(100% - 49.4px) 1px,1px 1px)}
.sr-wertebox h3{margin:0 0 .35rem;font:600 .98rem/1.15 var(--sr-schmal);letter-spacing:.05em;
  text-transform:uppercase;color:#fdb714}
.sr-wertebox h3 ~ h3{margin-top:.7rem}
.sr-wertebox table{width:100%;border-collapse:collapse;border-bottom:1px solid #fdb714}
.sr-wertebox thead th{border-top:1px solid #fdb714;border-bottom:1px solid #fdb714}
.sr-wertebox th{background:#231f20;color:#fdb714;font-weight:700;font-size:.7rem;
  letter-spacing:.06em;text-transform:uppercase;padding:.22rem .35rem;text-align:center;
  white-space:nowrap}
.sr-wertebox td{padding:.2rem .35rem;text-align:center;white-space:nowrap}
.sr-wertebox th:first-child,.sr-wertebox td:first-child{text-align:left;white-space:normal}
.sr-wertebox tbody tr:nth-child(odd){background:#58595b}
.sr-wertebox td a{color:#fff;text-decoration:none}
.sr-wertebox td a:hover{color:#fdb714}
.sr-wertebox .anz{color:#fdb714}
.sr-wertebox .sr-verletzt td:last-child{text-align:right;white-space:normal;color:#fdb714}
.sr-wertebox .sr-mehr{display:block;margin-top:.3rem;text-align:right;font-size:.74rem;
  letter-spacing:.04em;color:#fdb714;text-decoration:none}
.sr-wertebox .sr-mehr:hover{text-decoration:underline}

/* ------------------------------------------------------ tab layouts ---------
   THE TABS ARE BOOK SPREADS, NOT STACKS OF BOXES (22.09.2026, Roger: "nicht mehr ... dass
   lauter bloecke einfach untereinander stehen, das soll interessanter sein"). A text
   column and a sidebar, offset against each other, light against dark or red - the
   asymmetry is wanted ("das lockert die ganze sache auf wenn es nicht so symmetrisch
   ist"). First: the tab Figur, markup in designs/shadowrun/reiter-figur.php.
   Two columns, each a stack of its own (.sr-links, .sr-rechts), both starting on one line
   (Roger: "richtig zum linken feld ausrichten" - a sidebar set lower was taken back). The
   columns do NOT end level: the Briefing is short ("muss nur halb so hoch sein, da steht
   nicht viel"); what the left column gains later fills it, and free room under the
   Briefing is meant for a graphic. Rejected: stretching the Briefing to the sidebar's
   height - a tall empty field. */
.sr-spalten{display:grid;grid-template-columns:minmax(0,1fr) 20rem;gap:1.4rem;align-items:stretch}
.sr-links,.sr-rechts{display:grid;gap:1.2rem;align-content:start;min-width:0}
/* The illustration takes the left column's remaining height, so it ends where the
   sidebar ends (and at least 12rem): the column is Briefing + picture. */
.sr-links:has(> .sr-illu){display:flex;flex-direction:column}
.sr-links > .sr-illu{flex:1 1 14rem;display:flex;flex-direction:column}
.sr-illu .fenster{flex:1;height:auto;min-height:10rem}
.sr-spalten .kasten{margin:0}
.sr-spalten .briefing textarea{min-height:10rem}
@media(max-width:880px){.sr-spalten{grid-template-columns:minmax(0,1fr)}}
/* QUALITIES AND REPUTATION under the Briefing (reiter-figur.php, step 6): the list wide,
   the numbers narrow with the rule box under them. Inputs in the dark boxes are dark. */
.sr-unterzeile{display:grid;grid-template-columns:minmax(0,1fr) 14rem;gap:1.2rem;align-items:start}
@media(max-width:880px){.sr-unterzeile{grid-template-columns:minmax(0,1fr)}}
.sr-karma{display:grid;gap:.9rem}
.sr-wertebox input[type=text],.sr-wertebox input[type=number]{width:100%;margin:0;padding:.2rem .35rem;
  background:#1b1a1c;border:1px solid #4a494c;color:#fff;font:400 .82rem/1.2 var(--sr-schmal)}
.sr-wertebox input:focus{border-color:#fdb714;box-shadow:none;background:#111}
.sr-wertebox input::placeholder{color:#77767a}
.sr-vorteile td{padding:.18rem .25rem}
.sr-vorteile td:nth-child(1){width:42%}
.sr-vorteile td:nth-child(3){width:4.2rem}
.sr-vorteile td:nth-child(4){width:1.6rem}
.sr-vn span{padding:.25rem .1rem;font-size:.7rem}
.sr-zeile-weg{padding:.15rem .3rem;background:none;border:none;color:#9d9da0;line-height:1;clip-path:none;
  font:600 .7rem/1 var(--sr-schmal)}
/* The bin (Etch, like the image tiles); armed it shows the red "OK?" (persona.js). */
.sr-zeile-weg:not(.scharf)::before{content:"\f1f8";font:normal 900 .85rem/1 "Font Awesome 7 Etch"}
.sr-zeile-weg:hover{color:#fdb714}
/* ARMED: a check mark instead of the word (23.09.2026, Roger: "manchmal geht das OK über
   den platz hinaus"); persona.js still writes "OK?" - hidden by font-size 0, so a screen
   reader keeps the question. Etch has the check (\f00c, measured in the kit's font). */
.sr-zeile-weg.scharf{background:var(--akzent);color:#fff;font-size:0}
.sr-zeile-weg.scharf::before{content:"\f00c";font:normal 900 .85rem/1 "Font Awesome 7 Etch"}
.sr-zeile-neu{display:block;margin:.45rem 0 0 auto;padding:.25rem .5rem;background:none;
  border:1px solid #fdb714;color:#fdb714;font:600 .72rem/1 var(--sr-schmal);letter-spacing:.08em;
  text-transform:uppercase;clip-path:none}
.sr-zeile-neu:hover{background:#fdb714;color:#231f20}
.sr-karma td:first-child{text-align:left;white-space:nowrap}
.sr-karma td:last-child{width:5rem}
.sr-karma tr.sr-berechnet td{color:#fdb714;font-weight:700}
.sr-karma output{display:block;text-align:center;font-size:.95rem}
/* The rule box: the example box, smaller, with the page reference. */
.sr-regel{margin:0;padding:40px 18px 12px 22px}   /* less room below (Roger) */
.sr-figur-regel{margin-top:1.2rem}   /* the tab Figur's rule box under the injuries (30.09.2026) */
.sr-regel p{font-size:.84rem;line-height:1.35}
.sr-regel i{display:block;margin-top:.3rem;font-size:.74rem;color:#6a6a6e}
.sr-regel a{display:block;color:var(--akzent);text-decoration:none}
.sr-regel a i{color:inherit}
.sr-regel a:hover i{text-decoration:underline}

/* THE TAB ROLLE (designs/shadowrun/reiter-rolle.php): the fields in chapters with a
   book-style heading - chapter font, red, a red rule under it - and a STICKY sidebar:
   the overview (value box, a fill bar and count per field, the name a jump link), the
   generate button, "Neues Gespraech". Sticky below the compact bar (~6rem). The jump
   targets keep that room too (scroll-margin). */
.sr-kapitel{margin:.9rem 0 0;padding-bottom:.3rem;font:700 1.25rem/1 var(--sr-kopf);
  letter-spacing:.03em;text-transform:uppercase;color:var(--akzent);
  border-bottom:3px solid var(--akzent)}
.sr-links > .sr-kapitel:first-child{margin-top:0}
/* the light surface under a chapter heading (24.09.2026, a trial - Roger: "heller"; the
   head panel's grey #ececec, "das falsche weiss" was #fff),
   its content set in from the edge */
/* right under the heading's rule: -1.2rem takes back .sr-links' grid gap; inside, the
   boxes keep that gap between them as they had in the column */
.sr-kapitel-flaeche{margin:-1.2rem 0 0;padding:1rem 1.2rem;background:#ececec;
  display:grid;gap:1.2rem;align-content:start;min-width:0}
.sr-feldanker{scroll-margin-top:7rem}
.sr-feldanker > .kasten{margin:0}
.sr-kleben{position:sticky;top:6.5rem;align-self:start}
@media(max-width:880px){.sr-kleben{position:static}}
.sr-uebersicht td:last-child{text-align:right;white-space:nowrap}
.sr-uebersicht td a{font-weight:600}
.sr-uebersicht tbody tr:nth-child(odd){background:none}
.sr-uebersicht tbody tr[data-uebersicht]:nth-of-type(even){background:#3a393c}
.sr-uebersicht tr.kap td{padding-top:.55rem;color:#fdb714;font-weight:700;font-size:.64rem;
  letter-spacing:.12em;text-transform:uppercase;text-align:left}
.sr-uebersicht .bal{display:inline-block;width:4.2rem;height:5px;margin-right:.45rem;
  background:#1b1a1c;vertical-align:middle}
.sr-uebersicht .bal i{display:block;height:100%;background:#fdb714}
.sr-uebersicht tr.drueber b{color:#ff6b6b}
.sr-uebersicht tr.drueber .bal i{background:#ff6b6b}
.sr-rolle .tafel-knoepfe button{width:100%}
/* The wipe tick in the narrow sidebar: one running line, not three columns of a flex row. */
.sr-rolle .gespraech .warnung-zeile{display:block}
.sr-rolle .gespraech .warnung-zeile input{margin-right:.35rem;vertical-align:-.1em}

/* THE INJURIES in the tab Figur (reiter-figur.php), under the illustration, as wide as
   the column. A value box like the others; closed injuries muted; the new-entry row and
   the "close" controls are small dark inputs with a yellow outline button. */
.sr-verletzungen h3 small{margin-left:.4rem;font-size:.72rem;letter-spacing:.06em;color:#c9c9cc}
.sr-verletzungen table{table-layout:fixed}
.sr-verletzungen th,.sr-verletzungen td{white-space:normal;text-align:left;vertical-align:middle;
  overflow-wrap:anywhere}
/* Fixed shares - a long "abgeschlossen: ..." ran the table past the box. */
.sr-verletzungen th:nth-child(1){width:30%}
.sr-verletzungen th:nth-child(2){width:20%}
.sr-verletzungen th:nth-child(3){width:6.2rem}
.sr-verletzungen th:nth-child(5){width:2rem}
.sr-verletzungen td:nth-child(3) a{display:block;color:#fdb714;font-size:.72rem;text-decoration:none}
.sr-verletzungen td:last-child{text-align:center}
.sr-verletzungen tr.zu td{color:#9d9da0}
.sr-verletzungen .sr-stand{display:flex;gap:.3rem;align-items:center}
.sr-verletzungen tr.zu .sr-stand{display:table-cell}
.sr-verletzungen .sr-stand input{flex:1;min-width:0}
.sr-knopf{padding:.22rem .5rem;background:none;border:1px solid #fdb714;color:#fdb714;clip-path:none;
  font:600 .7rem/1 var(--sr-schmal);letter-spacing:.08em;text-transform:uppercase}
.sr-knopf:hover{background:#fdb714;color:#231f20}
/* THE VALUES WAND's row at the top of the tab Werte (24.09.2026): on the light page, so
   the red of the headings instead of the boxes' yellow; the status to the left of it */
.sr-stabzeile{display:flex;justify-content:flex-end;align-items:center;gap:.5rem;margin:0 0 .9rem}
.sr-stabzeile .sr-knopf{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .7rem;border-color:var(--akzent);color:var(--akzent)}
.sr-stabzeile .sr-knopf:hover{background:var(--akzent);color:#fff}
.sr-stabzeile .sr-knopf:disabled{opacity:.5;cursor:wait}
.sr-stabzeile .ic{width:14px;height:14px;fill:currentColor}
.stab-status{font:400 .8rem/1.3 var(--sr-schmal);color:#555}
.stab-status.fehler{color:var(--akzent)}
/* INITIATING (05.10.2026, M2 of #55): the metamagic's choice and the button under the list in the box Initiation */
.sr-initiieren{margin:.5rem 0 0}
.sr-initiieren .sr-init-knopf{margin-top:.5rem}
.sr-initiieren .sr-knopf:disabled{opacity:.5;cursor:not-allowed}
.sr-verletzung-neu{display:flex;gap:.4rem;margin-top:.55rem}
.sr-verletzung-neu input:first-child{flex:2}
.sr-verletzung-neu input:nth-child(2){flex:1}
.sr-leer{margin:.2rem 0 .3rem;color:#c9c9cc;font-size:.85rem}

/* THE BOOK'S PICTURE FRAME (designs/shadowrun/rahmen.php, 23.09.2026) after Roger's two
   close-ups of the core rulebook's illustrations: a dark striped frame whose top edge
   steps down after the barcodes and is cut at the top right, a step at the bottom (left
   part higher), the window buttons and two barcodes on top, one barcode at the bottom
   right; inside a red rim with a cut corner top left and red stripes in the bottom right
   corner. The frame is ::before (behind), the rim ::after of the window.
   THE RED TONE ON EVERY FRAMED PICTURE (Roger: "einen roten filter ... dann sind die
   einheitlich"): grey, hard contrast, multiplied with the band red plus scan lines - the
   recipe of the tab band. To take it off: drop the img filter and .ton.
   Uses: the persona's picture in the tab Figur (.sr-illu, grows with the column), the
   rulebook pictures in the tab Werte (bild.php?dg=shadowrun; .flach, .breit). */
.sr-rahmen{position:relative;z-index:0;margin:0;padding:30px 12px 22px;
  filter:drop-shadow(3px 4px 3px rgba(0,0,0,.25))}
.sr-rahmen::before{content:"";position:absolute;inset:0;z-index:-1;
  background:repeating-linear-gradient(0deg,#19181a 0 2px,#2c2b2d 2px 4px);
  clip-path:polygon(0 0,46% 0,calc(46% + 14px) 12px,calc(100% - 24px) 12px,100% 36px,
    100% calc(100% - 18px),calc(100% - 18px) 100%,62% 100%,calc(62% - 12px) calc(100% - 10px),
    0 calc(100% - 10px))}
.sr-rahmen .knoepfe{position:absolute;left:12px;top:6px;font:15px/1 Arial,sans-serif;letter-spacing:2px;
  color:#a9a9ad}
.sr-rahmen .code{position:absolute;top:7px;left:74px;width:92px;height:15px;
  background:repeating-linear-gradient(90deg,#8d8d91 0 1px,transparent 1px 2px,#8d8d91 2px 4px,
    transparent 4px 5px,#8d8d91 5px 6px,transparent 6px 9px)}
.sr-rahmen .code.b{left:176px;width:104px}
.sr-rahmen .code.c{top:auto;bottom:4px;left:auto;right:36px;width:120px;height:11px}
/* A NARROW FRAME (the 13rem picture in the tab Rolle, 25.09.2026 - Roger's screenshot: the
   barcodes ran out of it on the right): each barcode ends before the frame edge's step
   (top 46%, bottom 62%) and shrinks to nothing when there is no room; wide frames keep
   their full widths. */
/* an 18+ picture's stand-in (rahmen.php 'ersatz'): .sr-rahmen img above sets display
   after the general img.ersatz rule, so the pair is said again for the frame */
.sr-rahmen img.ersatz{display:none}
body.blur18 .sr-rahmen img.ersatz{display:block}
.sr-rahmen .code{width:min(92px,max(0px,calc(46% - 84px)))}
.sr-rahmen .code.b{width:min(104px,max(0px,calc(46% - 186px)))}
.sr-rahmen .code.c{width:min(120px,max(0px,calc(38% - 42px)))}
.sr-rahmen .fenster{position:relative;height:200px;overflow:hidden;background:#111;
  clip-path:polygon(26px 0,100% 0,100% 100%,0 100%,0 26px)}
.sr-rahmen .fenster::before{content:"";position:absolute;right:0;bottom:0;width:40px;height:40px;
  z-index:2;background:repeating-linear-gradient(135deg,#b3161d 0 2px,transparent 2px 5px);
  clip-path:polygon(100% 0,100% 100%,0 100%)}
.sr-rahmen .fenster::after{content:"";position:absolute;inset:0;z-index:2;border:2px solid #b3161d;
  pointer-events:none}
.sr-rahmen img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;
  object-position:center 28%;filter:grayscale(1) contrast(1.35) brightness(1.45)}
.sr-rahmen .ton{position:absolute;inset:0;z-index:1;mix-blend-mode:multiply;pointer-events:none;
  background:var(--sr-zeilen),linear-gradient(115deg,#3a0810,#b30c13 45%,#7a0a10 75%,#2a060b)}
.sr-illu img{object-position:center 22%}
.sr-rahmen.flach .fenster{height:130px}
.sr-rahmen.flach img{object-position:center 35%}
/* personas' portraits in the flat strip: the face sits in the upper part (23.09.2026).
   NOT "bildnis" - that is the head's portrait frame with aspect-ratio 3/4, which made
   this frame 1069px tall. */
.sr-rahmen.flach.leute img{object-position:center 22%}
/* a collage (the chosen connections): the pictures side by side, a dark seam between */
.sr-rahmen .fenster.collage{display:flex;gap:3px;background:#19181a}
.sr-rahmen .fenster.collage img{position:static;flex:1 1 0;min-width:0}
.sr-rahmen.breit{margin-top:1.4rem}
.sr-rahmen.breit .fenster{height:250px}

/* ------------------------------------------------------ the tab Werte ---------
   designs/shadowrun/reiter-werte.php (23.09.2026). The attributes as a band of light
   tiles (the number is the input, in the heading font), edge points as hexagons, the
   limits as red plates; below the book spread (.sr-spalten) with the value boxes.
   COUNTS ARE CLICKABLE BOXES (edge points, damage, loyalty, influence): radio buttons,
   the boxes up to the chosen one marked with :has() - no script for the look. */
.tafel[data-t=werte].an{display:block}
.sr-attrband{display:grid;grid-template-columns:4fr 4fr 3fr;gap:1rem;margin-bottom:.8rem}
.sr-attrband h4,.sr-mon h4{margin:0 0 .35rem;padding-bottom:.25rem;font:700 .7rem/1 var(--sr-schmal);
  letter-spacing:.14em;text-transform:uppercase;color:var(--akzent);border-bottom:2px solid var(--akzent)}
.sr-attrband .reihe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.45rem}
.sr-attrband .spezial .reihe{grid-template-columns:repeat(3,minmax(0,1fr))}
.sr-attr{padding:.45rem .3rem .4rem;text-align:center;background:#ececec;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%);box-shadow:inset 0 3px 0 var(--akzent)}
.sr-attr label{display:block;margin:0;cursor:text}
.sr-attr b{display:block;font:700 .72rem/1 var(--sr-schmal);letter-spacing:.12em;color:var(--akzent)}
.sr-attr input.z{display:block;width:100%;margin:.15rem 0 .1rem;padding:0;border:none;border-bottom:1px solid transparent;
  background:none;box-shadow:none;text-align:center;font:700 2rem/1.1 var(--sr-kopf);color:#231f20;
  -moz-appearance:textfield}
.sr-attr input.z::-webkit-inner-spin-button,.sr-attr input.z::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.sr-attr input.z:focus{border-bottom-color:var(--akzent);outline:none}
.sr-attr input.z::placeholder{color:#b9b9bc}
.sr-attr small{display:block;font:400 .66rem/1.1 var(--sr-schmal);color:#555;text-transform:uppercase;letter-spacing:.05em}
.sr-attr small.leer{margin-top:.2rem;text-transform:none;color:#8a8a8e}
/* the augmented value under the natural one (implants, 23.09.2026) */
.sr-attr .sr-aug{display:block;margin:-.1rem 0 .15rem;font:700 .85rem/1 var(--sr-kopf);color:var(--akzent);cursor:help}
/* raised green, lowered red (27.09.2026, Roger - overload lowers GES/REA) */
.sr-attr .sr-aug.hoch{color:#1f7a35}
.sr-attr .sr-aug.tief{color:#c8101a}
/* a deduction inside the value (overload ...) - yellow triangle right of the number */
.sr-attr{position:relative}
.sr-attr .sr-abzug{position:absolute;top:1.35rem;right:.3rem;width:1rem;height:.9rem;cursor:help}
/* the same triangle beside a name: persona list, sheet head (werteAchtung) */
.sr-achtung{display:inline-block;width:.9em;height:.8em;margin-left:.35em;vertical-align:-.02em;cursor:help}
.kopfname:has(.sr-achtung) .name-text{display:inline-block}
.kopfname .sr-achtung{width:.75em;height:.66em}
/* THE TRIANGLE AS A BUTTON AND ITS OVERLAY (30.09.2026, Roger: "overlay mit den fehlern bei klick") - sheet head and compact
   bar (kopf-name.php, bogen-kompakt.php), persona.js "DAS DREIECK" */
.sr-achtung-knopf{background:none;border:0;padding:0;margin:0;font:inherit;line-height:0;cursor:pointer;vertical-align:baseline}
.sr-achtung-knopf[hidden]{display:none}
.sr-achtung-knopf .sr-achtung{cursor:pointer}
dialog.sr-achtung-dialog{width:min(42rem,calc(100vw - 2rem));max-width:none;padding:0;border:0;background:#f2f2f2;color:#231f20;box-shadow:0 .6rem 2rem rgba(0,0,0,.45)}
dialog.sr-achtung-dialog::backdrop{background:rgba(0,0,0,.55)}
.sr-achtung-kopf{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem 1rem;background:#9a060c;color:#fff}
.sr-achtung-kopf h3{margin:0;font-size:1rem;color:#fff}
.sr-achtung-zu{background:none;border:0;padding:0 .2rem;color:#fff;font-size:1.1rem;cursor:pointer}
.sr-achtung-inhalt{padding:.9rem 1.1rem 1rem;max-height:70vh;overflow:auto}
.sr-achtung-liste{margin:0;padding:0;list-style:none}
.sr-achtung-liste li{margin:0 0 .45rem;padding:.4rem .7rem;border-left:4px solid #9a060c;background:#fff;line-height:1.4}
.sr-achtung-liste a.buch-oeffnen{padding:0;font-size:inherit;color:#9a060c}
.sr-achtung-annahmen{margin:.8rem 0 0;padding-left:1.1rem;font-size:.85rem;color:#666}
.sr-achtung-fuss,.sr-achtung-leer{margin:.8rem 0 0;font-size:.8rem;color:#666}
/* a computed tile (essence): dark with yellow, like every computed value */
.sr-attr.ber{background:#2c2b2d;box-shadow:inset 0 3px 0 #fdb714}
.sr-attr.ber b,.sr-attr.ber .z{color:#fdb714}
.sr-attr.ber .z{display:block;margin:.15rem 0 .1rem;font:700 1.75rem/1.25 var(--sr-kopf);white-space:nowrap}
.sr-attr.ber small{color:#bbb}
/* ALL TILES ONE HEIGHT, abbreviation at the top, number in the middle, words at the
   bottom (24.09.2026, Roger). The groups stretch to the band's row, their rows to the
   group, each tile is a column: the number takes the free space above and below it,
   Edge's hexagons and the M/R buttons stay under the words. */
.sr-attrband .gruppe{display:flex;flex-direction:column}
.sr-attrband .reihe{flex:1}
.sr-attr{display:flex;flex-direction:column}
.sr-attr label{flex:1;display:flex;flex-direction:column}
.sr-attr label > b + *,.sr-attr.ber > .z{margin-top:auto}
.sr-attr label > small,.sr-attr.ber > small{margin-top:auto}
.sr-attr label.ohne-text > input.z{margin-bottom:auto}
/* Edge's points upright beside the number, four left and four right (Roger) - at most 8
   (7 for humans, +1 with Glück, core rulebook p. 67). One radio group as before (the
   grey-before-the-chosen rule needs the labels as siblings), placed by a grid over the
   tile: points 1-4 in the left column, 5-8 in the right, spent ones grey from the top. */
.sr-attr{position:relative}
.sr-attr > .sr-hex{position:absolute;left:.45rem;right:.45rem;top:50%;transform:translateY(-50%);margin:0;
  display:grid;grid-template-columns:14px 1fr 14px;grid-template-rows:repeat(4,12px);grid-auto-flow:row dense;
  gap:3px 0;pointer-events:none}   /* dense: the right column starts at the top again */
.sr-attr > .sr-hex label{pointer-events:auto}
.sr-attr > .sr-hex label:nth-of-type(-n+4){grid-column:1}
.sr-attr > .sr-hex label:nth-of-type(n+5){grid-column:3}
/* how the armor value was made, and what is missing or over the limit */
.sr-herleitung{margin:.3rem 0 0;font-size:.7rem;line-height:1.3;color:#c9c9cc}
.sr-warnung{display:block;margin:.35rem 0 0;font-size:.72rem;line-height:1.3;color:#ff8a80;text-decoration:none}
a.sr-warnung:hover{text-decoration:underline}
.sr-warnung a{color:inherit}
.sr-warnung i{font-style:normal}
.sr-warnung.hell{margin:-.8rem 0 1.2rem;color:var(--akzent)}
.sr-wertebox .sr-warnung.hell{margin:.45rem 0 0;color:#ff8a80}
/* 23.09.2026: effects that are only named (conditional limits, skill bonuses), the wound
   modifier line, magic/resonance under M/R, the matrix and vehicle blocks */
.sr-bedingt{margin:-.8rem 0 1.2rem;font-size:.74rem;line-height:1.35;color:#555}
.sr-bedingt b{font-weight:700;color:var(--akzent)}
.sr-wertebox .sr-bedingt{margin:.45rem 0 0;font-size:.7rem;color:#c9c9cc}
.sr-wertebox .sr-bedingt b,.sr-herleitung b{color:#fdb714}
/* links in these lines and in a table head: the box's yellow, no button padding of the
   book link (.buch-oeffnen) - Roger, 23.09.2026: "style im link ist nicht korrekt" */
.sr-bedingt a,.sr-wund a,.sr-warnung a.buch-oeffnen,.sr-herleitung a{padding:0;font-size:inherit;text-decoration:none}
.sr-bedingt a{color:var(--akzent)}
/* .sr-herleitung too (26.09.2026, Roger's screenshot: the book links of "Zwei Waffen" blue) */
.sr-wertebox .sr-bedingt a,.sr-wund a,.sr-herleitung a{color:#fdb714}
.sr-bedingt a i,.sr-wund a i,.sr-herleitung a i{font-style:normal}
.sr-bedingt a:hover,.sr-wund a:hover{text-decoration:underline}
/* THE BUILD CHECK (24.09.2026, includes/bau.php): under the limits, in the book-style hint
   box of the tab Figur (.sr-beispiel - Roger: "in eine solche box"), closed; the line red
   while it has hints, dark when it fits. A hint only - nothing is locked. */
.sr-baubox{margin:-.4rem 0 1.4rem}
/* the creation's frozen figures under the box "Ruf und Karma" (28.09.2026): one quiet grey line */
.sr-bau-zahlen{margin:.45rem .2rem 0;font:400 .78rem/1.35 var(--sr-schmal);color:#6d6e71}
.sr-bau{margin:0;font:400 .9rem/1.45 var(--sr-schmal);color:#222}
.sr-bau summary{cursor:pointer;color:var(--akzent)}
.sr-bau.passt summary{color:#222}
.sr-bau summary b{font-weight:700}
.sr-bau summary span{color:#555}
.sr-baubox .sr-bau p,.sr-bau ul{margin:.35rem 0 0;font:inherit}
.sr-bau ul{padding-left:1.1rem}
.sr-bau li{color:var(--akzent)}
.sr-bau ul.annahmen li{color:#555}
.sr-bau small{color:#777}
.sr-bau .quelle a{padding:0;font-size:inherit;color:var(--akzent);text-decoration:none}
.sr-bau .quelle i{font-style:normal}
.sr-wertebox th a{color:inherit;text-decoration:none}
.sr-wertebox th a:hover{text-decoration:underline}
.sr-wund{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .5rem;margin:.55rem 0 0;font-size:.78rem;color:#fff}
.sr-wund output{font:700 1rem/1 var(--sr-kopf);color:#fdb714}
.sr-wund span{font-size:.66rem;color:#c9c9cc}
.sr-wund a{color:#fdb714}
.sr-attr .sr-mr{margin-top:.3rem}
.sr-attr .sr-mr span{background:#e4e4e2;border-color:#b9b9bc;color:#333;font-size:.6rem}
.sr-attr .sr-mr input:checked + span{background:var(--akzent);border-color:var(--akzent);color:#fff}
.sr-matrix{grid-template-columns:minmax(0,1fr)}
.sr-wireless{display:flex;align-items:center;gap:.6rem;margin:0 0 .55rem}
.sr-wireless .sr-knoepfe{flex:0 0 9rem}
.sr-wireless small{font-size:.66rem;color:#c9c9cc}
.sr-deck{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.25rem .6rem;align-items:center;margin:.55rem 0 0}
.sr-deck > span{font:700 .64rem/1 var(--sr-schmal);letter-spacing:.08em;text-transform:uppercase;color:#fdb714}
.sr-matrixmon{margin-top:.6rem}
.sr-matrixmon .gitter{max-width:14rem}
.sr-mini{display:grid;grid-template-columns:auto auto;justify-content:start;gap:.2rem 1rem;margin:.55rem 0 0}
.sr-mini dt{font:700 .64rem/1.6 var(--sr-schmal);letter-spacing:.08em;text-transform:uppercase;color:#fdb714}
.sr-mini dd{margin:0;font:700 .9rem/1.3 var(--sr-schmal);color:#fff}
.sr-matrixbox .sr-waffenwahl,.sr-fahrzeug .sr-waffenwahl{margin-top:.5rem}
/* lists from the rule catalogue (23.09.2026): the name cell with its search list and
   source, the columns the catalogue decides as yellow text; the box with an open list
   lies above the next one (every box is its own stacking context) */
.sr-wertebox td.sr-regelname{position:relative;min-width:11rem;text-align:left;white-space:normal}
.sr-wertebox td a.sr-regelquelle,.sr-wertebox td small.sr-regelquelle{display:block;margin-top:.1rem;padding:0;
  font-size:.62rem;color:#a9a9ad;text-decoration:none}
.sr-wertebox td a.sr-regelquelle:hover{color:#fdb714}
.sr-wertebox td.sr-ausk{color:#fdb714;font-size:.75rem}
.sr-wertebox:has(.regel-treffer){z-index:5}
.regel-treffer{position:absolute;left:0;top:100%;z-index:20;min-width:18rem;max-height:18rem;overflow:auto;
  margin:.1rem 0 0;padding:0;list-style:none;background:#231f20;border:1px solid #fdb714;text-align:left}
.regel-treffer li{padding:.3rem .5rem;border-bottom:1px solid #3a393c;cursor:pointer;white-space:normal}
.regel-treffer li:hover{background:#3a393c}
.regel-treffer b{font-size:.8rem;color:#fff}
.regel-treffer small{font-size:.66rem;color:#8a8a8e}
.regel-treffer span{display:block;font-size:.66rem;color:#fdb714}
/* TRADITION AND MENTOR (27.09.2026): one search field each in the spell box - label, field
   (the list opens under it like a row's), a small link to the catalogue entry */
.sr-regelfeld{display:flex;align-items:center;gap:.5rem;margin:.35rem 0 .2rem}
/* part D: the martial art under the skills, initiation / submersion in the magic box */
.sr-kampfkunst,.sr-initiation{margin-top:1.2rem}
.sr-initiation td.sr-ausk{text-align:left;white-space:normal}
.sr-regelfeld-titel{flex:0 0 6.5rem;font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:#fdb714}
.sr-regelfeld .sr-regelname{position:relative;flex:1;min-width:0}
.sr-regelfeld .sr-regelname input[type="text"]{width:100%}
.sr-regelfeld-link{flex:0 0 auto;width:1.2rem;height:1.2rem;border:1px solid #fdb714;border-radius:50%;
  font:700 .7rem/1.1rem var(--sr-schmal);text-align:center;color:#fdb714;text-decoration:none}
.sr-regelfeld-link:hover{background:#fdb714;color:#231f20}
.sr-wertebox .sr-mentorwahl{margin:.3rem 0}
.sr-kampf td.gross output{display:block;text-align:right;font:700 1.1rem/1 var(--sr-kopf);color:#fdb714}
.sr-wertebox .sr-leer a{color:#fdb714}
.sr-hex,.sr-pips{display:flex;gap:2px}
.sr-hex{justify-content:center;flex-wrap:wrap;margin-top:.3rem}
.sr-hex label,.sr-pips label{margin:0;cursor:pointer}
.sr-hex input,.sr-pips input,.gitter input{position:absolute;opacity:0;pointer-events:none}
.sr-hex i{display:block;width:14px;height:12px;background:var(--akzent);
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
/* spent: every point up to the chosen one */
.sr-hex label:has(~ label input:checked) i,.sr-hex label:has(input:checked) i{background:#bdbdbd}
.sr-limits{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin:0 0 1.3rem}
.sr-limits > span:not(.quelle){display:flex;align-items:baseline;gap:.5rem;padding:.3rem .8rem .3rem .7rem;
  background:linear-gradient(90deg,#5e0d0e,#a3171c);color:#fff;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}
.sr-limits small{font:700 .66rem/1 var(--sr-schmal);letter-spacing:.1em;text-transform:uppercase}
.sr-limits b{font:700 1.15rem/1 var(--sr-kopf);color:#fdb714}
.sr-limits .quelle{margin-left:auto;font:400 .74rem/1 var(--sr-schmal);color:var(--akzent)}
.sr-limits .quelle i{margin:0;font-size:inherit;font-style:normal}
.sr-limits .quelle a{color:var(--akzent);text-decoration:none}
/* The rule box of the tab: one line per source, the page link at the line's end. */
.sr-quellen p + p{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;
  margin-top:.3rem;font-size:.8rem}
.sr-quellen p + p a,.sr-quellen p + p i{display:inline;margin:0;white-space:nowrap}
/* Skills in two columns, as on the sheet: the rows form a grid, the header repeats. */
/* five cells since 23.09.2026: name (+ specialisation), rating, pool, A/W, delete.
   ONE COLUMN GRID FOR HEADER AND ROWS (23.09.2026, Roger's screenshot: the row ran past
   its header and the bin stood beside it): header and body use the same eleven tracks -
   five, a 1rem gap track, five - and each row takes its half as a subgrid. All tracks are
   FIXED (head and body are two grids; an 'auto' track would size differently in each);
   A/W needs 5rem (4.4 pushed the bin out), the armed bin 2rem (1.6 let it stick out
   over the row, Roger), the pool gave the room (5.6 -> 5.2rem).
   Rejected: a column-gap in the body against a margin on the fifth head cell - the two
   halves were half a rem apart. */
.sr-fert thead tr,.sr-fert tbody{display:grid;column-gap:0;
  grid-template-columns:minmax(0,1fr) 2.6rem 5.2rem 5rem 2rem 1rem minmax(0,1fr) 2.6rem 5.2rem 5rem 2rem}
.sr-fert thead th:nth-child(6){grid-column-start:7}
.sr-fert thead th:nth-child(5n+1){text-align:left}
.sr-fert tbody tr{display:grid;grid-template-columns:subgrid;align-items:center}
.sr-fert tbody tr:nth-child(odd){grid-column:1 / 6}
.sr-fert tbody tr:nth-child(even){grid-column:7 / 12}
.sr-fert td.sr-regelname{min-width:0}
.sr-wertebox input.sr-spez{margin-top:.15rem;padding:.1rem .35rem;font-size:.68rem}
.sr-wertebox td.sr-pool{white-space:nowrap}
.sr-wertebox td.sr-pool small{font-size:.62rem;color:#c9c9cc}
/* conditional limits (23.09.2026): the bracket gets its own line and may wrap */
.sr-wertebox td.sr-pool small.sr-lim-mehr{display:block;white-space:normal;line-height:1.15}
/* a spell with a known effect: successes, and the attribute / limit it goes on */
.sr-wertebox td.sr-zauberwirkung{min-width:7.5rem}
.sr-wertebox td.sr-zauberwirkung input{width:5rem}
.sr-knoepfe.drei.sr-auf{grid-template-columns:repeat(4,minmax(0,1fr))}
.sr-zauberwirkung .sr-knoepfe{margin-top:.15rem}
.sr-fert tbody tr:nth-child(odd){background:none}
.sr-fert tbody tr:nth-child(4n+1),.sr-fert tbody tr:nth-child(4n+2){background:#58595b}
.sr-fert td{padding:.18rem .25rem}
.sr-fert td:last-child{padding-left:0;padding-right:0;text-align:center}  /* the bin: all 2rem for the button */
.sr-klein span,.sr-vn span{padding:.25rem .1rem;font-size:.7rem}
.sr-zauber td:nth-child(1){width:28%}
.sr-zauber td:nth-child(2){width:8.4rem}
/* spells above, adept powers below, each the full width (23.09.2026, Roger: "den block
   unter den anderen" - the powers' 16rem column beside the spells was too narrow).
   Rejected: each power row in two lines inside the narrow column. */
.sr-magie{grid-template-columns:minmax(0,1fr)}
.sr-hinweis{margin:0;font:400 .9rem/1.4 var(--sr-schmal);color:#444}
.sr-hinweis a{color:var(--akzent)}
/* CONNECTIONS: chips to choose from the relationships, a card per connection. */
.sr-conn-wahl{display:flex;flex-wrap:wrap;gap:.35rem;align-items:center;margin:0 0 .2rem}
.sr-conn-wahl > span{font:700 .66rem/1 var(--sr-schmal);letter-spacing:.1em;text-transform:uppercase;color:#555;margin-right:.3rem}
.sr-conn-wahl label{margin:0;cursor:pointer}
.sr-conn-wahl input{position:absolute;opacity:0;pointer-events:none}
.sr-conn-wahl label span{display:block;padding:.28rem .55rem;border:1px solid #9d9da0;background:#ececec;color:#333;
  font:600 .74rem/1 var(--sr-schmal)}
.sr-conn-wahl input:checked + span{background:var(--akzent);border-color:var(--akzent);color:#fff}
.sr-conn-wahl input:focus-visible + span{outline:2px solid var(--akzent);outline-offset:1px}
.sr-conn-wahl .weg span{text-decoration:line-through}
.sr-conns{display:grid;grid-template-columns:repeat(auto-fill,minmax(11.5rem,1fr));gap:.7rem}
/* SET OFF FROM THE CHAPTER'S GREY (24.09.2026, Roger: "die connection müssen wir vom
   hintergrund abheben, evtl. so wie beziehungskarte die haben noch einen weißen rand.
   aber die ecke lassen"): as the relationship card - a darker grey, a thin rule and a
   white ring inside it, the picture set in from the edge; one cut corner, bottom left
   (Roger: "die ecke nur links unten"). */
.sr-conn{position:relative;padding:.45rem .45rem .6rem;background:#e6e6e6;text-align:center;
  clip-path:polygon(0 0,100% 0,100% 100%,14px 100%,0 calc(100% - 14px));
  box-shadow:inset 0 0 0 1px #9d9da0,inset 0 0 0 3px #fff}
.sr-conn[hidden]{display:none}
.sr-conn .bild{height:84px;margin:0 0 .45rem;background:#1b1b1d;overflow:hidden;
  display:flex;align-items:center;justify-content:center;font:700 1.6rem/1 var(--sr-kopf);color:#6a6a6e}
.sr-conn .bild img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.sr-conn .name{display:block;font:700 .92rem/1.1 var(--sr-schmal);color:#231f20;text-decoration:none}
.sr-conn a.name:hover{color:var(--akzent)}
.sr-conn > small{display:block;margin-bottom:.35rem;font:400 .7rem/1.2 var(--sr-schmal);color:#666;
  text-transform:uppercase;letter-spacing:.06em}
.sr-conn dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.25rem .4rem;margin:0;text-align:left;align-items:center}
.sr-conn .sr-pips{flex-wrap:wrap;row-gap:2px}   /* influence has 12 points */
.sr-conn dt{font:700 .6rem/1.4 var(--sr-schmal);letter-spacing:.08em;text-transform:uppercase;color:var(--akzent)}
.sr-conn dd{margin:0}
.sr-conn dd input[type=number]{width:3.4rem;margin:0;padding:.1rem .3rem;font:600 .8rem/1.2 var(--sr-schmal)}
/* A FREE CONNECTION (26.09.2026): name and role typed on the card, in the places and type
   of the relationship card's name and label; × at the top right, over the picture. */
.sr-conn.frei input.name,.sr-conn.frei input.rolle{width:100%;box-sizing:border-box;margin:0 0 .2rem;padding:.12rem .3rem;
  text-align:center;background:#f4f4f4;border:1px solid #c4c4c7}
.sr-conn.frei input.name{font:700 .92rem/1.1 var(--sr-schmal);color:#231f20}
.sr-conn.frei input.rolle{margin-bottom:.35rem;font:400 .7rem/1.2 var(--sr-schmal);color:#666;text-transform:uppercase;letter-spacing:.06em}
.sr-conn.frei .sr-zeile-weg{position:absolute;top:.55rem;right:.55rem;background:#231f20}
/* the add button on the chapter's light grey in the accent, as on the SINs - yellow was
   near invisible there (Roger: "ist nicht da") */
.sr-conns ~ .sr-zeile-neu{border-color:var(--akzent);color:var(--akzent)}
.sr-conns ~ .sr-zeile-neu:hover{background:var(--akzent);color:#fff}
/* C0 of #93 (Roger's F2): a connection's marks, a person or an organisation, a lost one grey (F4) */
.sr-conn-merk{display:flex;flex-wrap:wrap;justify-content:center;gap:.2rem .7rem;margin:.4rem 0 0;
  font:600 .64rem/1.2 var(--sr-schmal);letter-spacing:.06em;text-transform:uppercase;color:#555}
.sr-conn-merk label{display:flex;align-items:center;gap:.25rem;margin:0;cursor:pointer}
.sr-conn-merk input{margin:0}
.sr-conn-art{display:flex;justify-content:center;gap:.25rem;margin:0 0 .35rem}
.sr-conn-art label{margin:0;cursor:pointer}
.sr-conn-art input{position:absolute;opacity:0;pointer-events:none}
.sr-conn-art span{display:block;padding:.15rem .4rem;border:1px solid #9d9da0;background:#ececec;color:#333;
  font:600 .62rem/1.2 var(--sr-schmal);letter-spacing:.06em;text-transform:uppercase}
.sr-conn-art input:checked + span{background:var(--akzent);border-color:var(--akzent);color:#fff}
.sr-conn-art input:focus-visible + span{outline:2px solid var(--akzent);outline-offset:1px}
.sr-conn.ehemalig{filter:grayscale(1);opacity:.6}
.sr-pips i{display:block;width:10px;height:9px;background:#cfcfd2;
  clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.sr-pips label:has(~ label input:checked) i,.sr-pips label:has(input:checked) i{background:var(--akzent)}
.sr-pips label:hover i{background:#d86a6e}
/* COMBAT VALUES: armor input, the chosen weapons, the choice as small buttons. */
.sr-kampf table + table,.sr-kampf .sr-waffenwahl + table{margin-top:.55rem}
.sr-kampf td,.sr-kampf th{font-size:.72rem;padding:.2rem .15rem}
/* THE RANGED TABLE MUST FIT THE 20rem COLUMN (24.09.2026): eight columns needed 344px of
   the 298 there, so the box ran past the page edge (measured). Headers without letter
   spacing and narrower padding bring it to 295; a long value (magazine "100(gurt)")
   wraps in its cell instead of widening the table. */
.sr-kampf th{letter-spacing:0}
.sr-kampf td{white-space:normal;overflow-wrap:anywhere}
.sr-kampf td.gross input{width:4.2rem;margin-left:auto;display:block;text-align:right;
  font:700 1.1rem/1 var(--sr-kopf);color:#fdb714}
.sr-kampf td.leer{color:#9d9da0;text-align:left}
.sr-kampf tr[hidden]{display:none}
.sr-waffenwahl{flex-wrap:wrap;gap:3px;margin:.35rem 0 0}
.sr-waffenwahl label{flex:0 0 auto;max-width:100%}
.sr-waffenwahl span{padding:.22rem .45rem;font-size:.64rem;border-left:1px solid rgba(255,255,255,.25)}
.sr-waffenwahl label + label span{border-left:1px solid rgba(255,255,255,.25)}
/* THE CONDITION MONITOR as on the sheet: rows of three boxes, a modifier in every third,
   the damaged boxes crossed. */
.sr-monitore .paar{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-top:.3rem}
.sr-mon h4{color:#fff;border-bottom:none;padding:0}
.sr-mon .gitter{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #fdb714}
.sr-mon .gitter label{position:relative;height:22px;margin:0;cursor:pointer;
  border-right:1px solid #6a6a6e;border-bottom:1px solid #6a6a6e}
.sr-mon .gitter label:nth-of-type(3n){border-right:none}
.sr-mon .gitter label:hover{background:#3a393c}
.sr-mon .gitter label:has(~ label input:checked),.sr-mon .gitter label:has(input:checked){
  background:linear-gradient(135deg,transparent 45%,#ff5a4e 45% 55%,transparent 55%),
    linear-gradient(45deg,transparent 45%,#ff5a4e 45% 55%,transparent 55%),#4a1d1f}
.sr-mon .gitter em{position:absolute;right:2px;bottom:1px;font:700 .62rem/1 var(--sr-schmal);color:#fdb714;font-style:normal}
.sr-mon small{display:block;margin-top:.3rem;font-size:.66rem;color:#c9c9cc}
.sr-monitore .ueber{display:flex;align-items:center;gap:.4rem;margin:.6rem 0 0;font-size:.78rem;color:#fff}
.sr-monitore .ueber input{width:3.2rem}
.sr-monitore .ueber span{color:#c9c9cc}
.sr-monitore .ueber output{color:#fdb714}
.sr-abgel{display:grid;grid-template-columns:1fr auto;gap:.35rem .8rem;margin:0}
.sr-abgel dt{font:700 .68rem/1.5 var(--sr-schmal);letter-spacing:.1em;text-transform:uppercase;color:#fdb714}
.sr-abgel dd{margin:0;text-align:right;font:700 .95rem/1.3 var(--sr-schmal);color:#fff}
/* THE SIN CARD: a light card with a dark head strip and a barcode. */
.sr-sin{position:relative;padding:.7rem .9rem .9rem;background:#f4f4f2;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,16px 100%,0 calc(100% - 16px));
  box-shadow:inset 0 0 0 1px #b9b9bc}
.sr-sin .kopf{display:flex;justify-content:space-between;align-items:center;margin:-.7rem -.9rem .7rem;
  padding:.45rem .9rem;background:#231f20;color:#fdb714;font:700 .74rem/1 var(--sr-schmal);letter-spacing:.1em;
  text-transform:uppercase}
.sr-sin .code{width:70px;height:18px;background:repeating-linear-gradient(90deg,#e8e8e8 0 1px,transparent 1px 3px,
  #e8e8e8 3px 5px,transparent 5px 6px,#e8e8e8 6px 7px,transparent 7px 10px)}
.sr-sin .sr-feld > span{color:var(--akzent)}
.sr-sin .sr-knoepfe span{background:#e4e4e2;border-color:#b9b9bc;color:#333}
.sr-sin .sr-knoepfe.drei label + label span{border-left:1px solid #b9b9bc}
.sr-sin .sr-knoepfe input:checked + span{background:var(--akzent);border-color:var(--akzent);color:#fff}
.sr-sin input[type=number],.sr-sin input[type=text]{width:100%;margin:0;padding:.25rem .4rem;font:400 .85rem/1.2 var(--sr-schmal)}
.sr-sin table{width:100%;margin-top:.3rem;border-collapse:collapse}
.sr-sin th{text-align:left;font:700 .62rem/1 var(--sr-schmal);letter-spacing:.08em;text-transform:uppercase;
  color:#666;border-bottom:1px solid #999;padding:.2rem .15rem}
.sr-sin td{padding:.15rem}
.sr-sin td:nth-child(2){width:3.2rem}
.sr-sin td:last-child{width:1.6rem}
.sr-sin .sr-zeile-neu{border-color:var(--akzent);color:var(--akzent)}
.sr-sin .sr-zeile-neu:hover{background:var(--akzent);color:#fff}
@media(max-width:880px){
  .sr-attrband{grid-template-columns:1fr}
  /* one column: five tracks, every row in them */
  .sr-fert thead tr,.sr-fert tbody{grid-template-columns:minmax(0,1fr) 2.6rem 5.2rem 5rem 2rem}
  .sr-fert thead th:nth-child(n+6){display:none}
  .sr-fert tbody tr:nth-child(odd),.sr-fert tbody tr:nth-child(even){grid-column:1 / 6}
  .sr-magie{grid-template-columns:minmax(0,1fr)}
}

/* THE EXAMPLE BOX (core rulebook page 57, "Beispiel"): a dark striped frame with a
   yellow heading in the chapter font, a white inset with cut corners, dark text. Frame
   and inset are ::before/::after BEHIND the content (z-index -1 in the box's own
   stacking context), so the text is never clipped. Shapes from Roger's close-up: the
   frame's top edge steps down on the right, the inset has cut corners top left and
   bottom right. Used for the explaining hints. */
.sr-beispiel{position:relative;z-index:0;margin:.3rem 0 1rem;padding:44px 28px 26px 30px}
.sr-beispiel::before{content:"";position:absolute;inset:0;z-index:-1;
  background:repeating-linear-gradient(0deg,#19181a 0 2px,#2c2b2d 2px 4px);
  clip-path:polygon(0 20px,20px 0,58% 0,calc(58% + 22px) 22px,calc(100% - 22px) 22px,
    100% 44px,100% 100%,0 100%)}
.sr-beispiel::after{content:"";position:absolute;inset:32px 14px 14px 16px;z-index:-1;
  background:#fff;
  clip-path:polygon(0 18px,18px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 18px),
    calc(100% - 18px) 100%,0 100%)}
.sr-beispiel > b{position:absolute;left:22px;top:10px;font:700 .74rem/1 var(--sr-kopf);
  letter-spacing:.08em;text-transform:uppercase;color:#fdb714}
.sr-beispiel p{margin:0;font:400 .98rem/1.45 var(--sr-schmal);color:#222}

/* THE RED SIDEBAR (core rulebook page 100, "Beispiel-Connections" - there all raster,
   rebuilt): a red plate, dark left and brighter right, with scan lines, inside a dark
   striped frame whose top left sits lower and steps up; a barcode of light lines over
   the top edge, fading into the red. The book's heading bold yellow, the text white.
   Frame on .sr-rot::before, plate on .sr-rot-flaeche::before, barcode .sr-rot::after -
   all behind or beside the content, NOT a clip-path on the content: the world's picture
   menu opens out of it. The drop shadow matches the value box. */
.sr-rot{position:relative;z-index:0;padding:18px 12px 12px 10px;
  filter:drop-shadow(3px 4px 3px rgba(0,0,0,.22))}
.sr-rot::before{content:"";position:absolute;inset:0;z-index:-1;
  background:repeating-linear-gradient(0deg,#19181a 0 2px,#2c2b2d 2px 4px);
  clip-path:polygon(0 8px,64px 8px,72px 0,calc(100% - 30px) 0,100% 30px,
    100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%)}
.sr-rot::after{content:"";position:absolute;top:3px;left:30%;width:56%;height:46px;z-index:1;
  pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(225,225,228,.75) 0 1px,transparent 1px 2px,
    rgba(225,225,228,.5) 2px 4px,transparent 4px 6px,rgba(225,225,228,.8) 6px 7px,transparent 7px 9px);
  -webkit-mask-image:linear-gradient(to bottom,#000 35%,transparent),
    linear-gradient(90deg,#000 0 46%,transparent 46% 52%,#000 52%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom,#000 35%,transparent),
    linear-gradient(90deg,#000 0 46%,transparent 46% 52%,#000 52%);
  mask-composite:intersect}
.sr-rot-flaeche{position:relative;z-index:0;padding:1.9rem 1rem 1rem;color:#fff}
.sr-rot-flaeche::before{content:"";position:absolute;inset:0;z-index:-1;
  background:var(--sr-zeilen),linear-gradient(90deg,#5e0d0e,#8a1216 55%,#a3171c);
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%)}
.sr-rot h3{margin:0 0 .8rem;font:600 1.2rem/1.1 var(--sr-schmal);letter-spacing:.04em;
  text-transform:uppercase;color:#fdb714}
.sr-feld{display:block;margin:0 0 .75rem}
/* [hidden] needs its own line against display:block - the metavariant rows (issue #62) are shown by data-wenn */
.sr-feld[hidden]{display:none}
.sr-feld > span{display:block;margin-bottom:.3rem;font:700 .68rem/1 var(--sr-schmal);
  letter-spacing:.12em;text-transform:uppercase;color:#fdb714}
.sr-rot input[type=text],.sr-rot input[type=number]{width:100%;margin:0;padding:.35rem .5rem;background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.25);color:#fff;font-family:var(--sr-schmal);font-size:.95rem}
.sr-rot input[type=text]::placeholder{color:rgba(255,255,255,.45)}
.sr-rot input[type=text]:focus,.sr-rot input[type=number]:focus{background:rgba(0,0,0,.5);
  border-color:#fdb714;box-shadow:none}
.sr-feld > span i{font-style:normal;text-transform:none;letter-spacing:0;opacity:.75}
/* Two short values side by side (height | weight). */
.sr-paar{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
/* A choice of six (lifestyle) in two rows of three; the cells overlap by their border. */
.sr-knoepfe.drei{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
/* Long words ("Mittelschicht") pushed the sidebar past the page edge: narrower type,
   and a button may shrink below its word. */
.sr-knoepfe span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr-knoepfe input:disabled + span{opacity:.35;cursor:not-allowed}   /* already in the other hand */
.sr-knoepfe.drei span{font-size:.7rem;letter-spacing:.02em}
.sr-knoepfe.drei label{margin:0 -1px -1px 0}
.sr-knoepfe.drei label + label span{border-left:1px solid rgba(255,255,255,.25)}
.sr-knoepfe.drei input:checked + span{border-color:#fdb714}
/* The gender as three buttons in a row - radios underneath, so the form sends the value. */
.sr-knoepfe{display:flex}
.sr-knoepfe label{flex:1;min-width:0;margin:0;position:relative}
.sr-knoepfe input{position:absolute;opacity:0;pointer-events:none}
.sr-knoepfe span{display:block;padding:.38rem .15rem;text-align:center;cursor:pointer;
  background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.25);color:#f0dcdc;
  font:600 .74rem/1 var(--sr-schmal);letter-spacing:.03em;text-transform:uppercase}
.sr-knoepfe label + label span{border-left:none}
.sr-knoepfe span:hover{background:rgba(0,0,0,.4)}
.sr-knoepfe input:checked + span{background:#fdb714;border-color:#fdb714;color:#231f20}
.sr-knoepfe input:focus-visible + span{outline:2px solid #fff;outline-offset:1px}
/* THE ARCHETYPE (24.09.2026): 25 buttons, two to a row - three cut the long names */
.sr-archetyp .sr-knoepfe.drei{grid-template-columns:repeat(2,minmax(0,1fr))}

/* THE SYSTEM BOX ("Persona": Kindroid id, roles, world, dates, delete) - what is NOT the
   figure in the world, so quiet: the light plate of the boxes, a red rule on the left, a
   cut corner bottom left, red small labels. The corner is PAINTED (transparent in the
   gradient), not clipped: the world's picture menu opens out of this box. */
.sr-system{position:relative;padding:.85rem 1rem 1rem 1.2rem;
  background:linear-gradient(45deg,transparent 10px,#ececec 10px)}
/* The red rule on the left stops where the corner is cut - as a border it ran on through
   the cut (Roger's screenshot). */
.sr-system::before{content:"";position:absolute;left:0;top:0;bottom:14px;width:3px;
  background:var(--akzent)}
.sr-system h3{margin:0 0 .7rem;font:600 .98rem/1 var(--sr-schmal);letter-spacing:.08em;
  text-transform:uppercase;color:var(--akzent)}
.sr-system .sr-feld > span{color:#6a6a6e}
.sr-system input[type=text]{width:100%;margin:0;padding:.3rem .45rem}
.sr-system .ankreuz{display:flex;align-items:center;gap:.45rem;margin:.2rem 0;
  font-family:var(--sr-schmal);font-size:.88rem}
.sr-system small{display:block;margin-top:.35rem;color:var(--leise);
  font-family:var(--sr-schmal);font-size:.78rem}
.sr-system small a{color:var(--akzent)}
.sr-system .fakten{margin:.8rem 0 0}
.sr-system .fakten li{font-family:var(--sr-schmal);font-size:.8rem}
/* Delete lives in the Persona box (reiter-figur.php); the page-end form stays for the
   button to submit, but its own button is hidden. */
#persona-loeschen{display:none}
.sr-system .sr-loeschen{display:block;margin:.9rem 0 0 auto;padding:.3rem .6rem;background:none;
  border:1px solid var(--akzent);color:var(--akzent);font:600 .72rem/1 var(--sr-schmal);
  letter-spacing:.1em;text-transform:uppercase;clip-path:none}
.sr-system .sr-loeschen:hover{background:var(--akzent);color:#fff}

/* The tabs: dark flags that turn red when open, on a red rule. */
.reiter{border-bottom:3px solid var(--akzent);gap:.2rem}
.reiter button{font-family:var(--sr-kopf);font-weight:700;font-size:.64rem;letter-spacing:.1em;
  padding:.62rem 1.3rem .58rem .8rem;background:#cfcfd2;border:1px solid #a8a8aa;
  border-bottom:none;color:#3a3a3e;
  clip-path:polygon(0 0,calc(100% - .55rem) 0,100% 100%,0 100%)}
.reiter button:hover{color:var(--akzent);background:#dcdcde}
.reiter button.an{background:var(--akzent);border-color:var(--akzent);color:#fff}
.reiter button .zahl{font-family:var(--sr-schmal);font-size:.72rem}
/* TAB ICONS (Etch, see ICONS above), on the big tabs and on the compact bar's copies. Keyed
   by the tab's key (data-reiter / data-ziel), so a renamed label keeps its icon. */
.reiter button[data-reiter]::before,.bk-reiter button[data-ziel]::before{
  font:normal 900 1.05rem/1 "Font Awesome 7 Etch";display:inline-block;vertical-align:-.2em;
  margin-right:.5em}
/* ^ The icons take the label colour. Rejected: punched out in the plate colour, with or
   without 1px relief edges - at 1rem the effect does not come across. */
.reiter [data-reiter=figur]::before,.bk-reiter [data-ziel=figur]::before{content:"\f2bd"}   /* circle-user */
.reiter [data-reiter=werte]::before,.bk-reiter [data-ziel=werte]::before{content:"\e473"}   /* chart-simple */
.reiter [data-reiter=rolle]::before,.bk-reiter [data-ziel=rolle]::before{content:"\f2bb"}   /* address-card */
.reiter [data-reiter=bez]::before,.bk-reiter [data-ziel=bez]::before{content:"\f1e0"}       /* share-nodes */
.reiter [data-reiter=ausr]::before,.bk-reiter [data-ziel=ausr]::before{content:"\f0f2"}     /* suitcase */
.reiter [data-reiter=abent]::before,.bk-reiter [data-ziel=abent]::before{content:"\f14e"}   /* compass */
.reiter [data-reiter=bilder]::before,.bk-reiter [data-ziel=bilder]::before{content:"\f302"} /* images */
/* THE SHEET CHECK (issue #65, 30.09.2026): PRÜFEN / BERICHT in the toolbar and the compact bar, the report page bericht.php */
.leiste [data-bericht][disabled],.bk-knoepfe [data-tun=bericht][disabled],.leiste [data-pruefen][disabled],.bk-knoepfe [data-tun=pruefen][disabled]{opacity:.5;cursor:default}
.sr-pb-stand{margin:0 0 .6rem;font-size:.82rem;color:#555}
.sr-pb-stand .alt{color:#9a060c;font-weight:600}
.sr-pb-urteil{margin:0 0 1rem;font-size:1.05rem;font-weight:600}
.sr-pb h4{margin:1.1rem 0 .45rem}
.sr-pb ul{list-style:none;margin:0;padding:0}
.sr-pb li{margin:0 0 .45rem;padding:.4rem .7rem;border-left:4px solid #9a9a9a;background:rgba(255,255,255,.6);line-height:1.4}
.sr-pb li.fehler{border-left-color:#9a060c}
.sr-pb li.pruefen{border-left-color:#fdb714}
.sr-pb li b{margin-right:.5rem}
.sr-pb .sr-pb-quelle{margin-left:.5rem;font-size:.8rem;white-space:nowrap}
.sr-pb-ok{margin:.9rem 0 0;font-size:.86rem;color:#555}
/* THE EMBLEM ON THE SHEET, right of the tabs and over the band like a stamp (Roger:
   "rechts neben den reitern ueber den balken"). Only on the sheet head - verwaltung.php
   has a .reiter too. The tab row is lifted above the band (z-index 2), or the band, a
   later sibling at the same level, would paint over the emblem. Roger's clean file
   (SR_Logo.png, 460x576, cut free), served only after login through
   bild.php?dg=shadowrun&n=emblem - relative to THIS file, so ../../ reaches the site
   root under both addresses.
   NEAR THE BOX'S RIGHT EDGE, inside, .5rem off it: the tab row ends .9rem before the
   edge, so right:-.4rem (flush at -.9rem was "nicht ganz so direkt dran").
   It stood half over the edge for an hour; Roger took it back ("dann lieber
   nicht ueberlappen aber an den rand") - graphics over an edge are for other pictures,
   the emblem is an S and cannot be mirrored for a left side either. The sheet head keeps
   overflow:visible for those (its hidden background layer .bogenkopf::before is unused). */
.bogenkopf{overflow:visible}
.bogenkopf .reiter{z-index:2}
.bogenkopf .reiter::after{content:"";position:absolute;right:-.4rem;bottom:-55px;
  width:76px;height:95px;pointer-events:none;
  background:url("../../bild.php?dg=shadowrun&n=emblem") center/contain no-repeat;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.55))}
@media(max-width:880px){.bogenkopf .reiter::after{width:44px;height:55px;bottom:-34px}}
/* THE BAND UNDER THE TABS IS THE BOOKS' FOOT BAND (25.09.2026, Roger's close-up of a core
   rulebook page foot, "diesen roten balken, ohne schrift drin"): a dark striped ground, a
   red bar across its middle that fades in from the left, light pixel blocks along the top
   edge on the left half. No text, no picture - the emblem stands over its right end.
   ::before the pixel blocks, ::after the red bar (with the scan lines), the element the
   ground. edit.php still writes --band-bild; nothing here reads it.
   Rejected the same day: the persona's picture tinted red in the band (22.09.) and the
   books' red page HEAD with "» TAB «" and the picture (Roger meant the foot band). */
.reiterband{display:block;height:80px;margin:0 -.9rem;position:relative;overflow:hidden;
  background:repeating-linear-gradient(0deg,#1b1a1c 0 2px,#27262a 2px 4px)}
.reiterband::before{content:"";position:absolute;left:0;top:0;width:48%;height:12px;
  background:var(--sr-pixel-oben) 0 0/600px 12px repeat-x}
.reiterband::after{content:"";position:absolute;left:0;right:0;top:24%;bottom:22%;
  background:var(--sr-zeilen),
    linear-gradient(90deg,transparent 28%,#6e0b10 44%,#8f0f15 62%,#a4161c 100%)}
@media(max-width:700px){.reiterband{height:56px}}

/* -------------------------------------------------------- lists, cards -----*/
.fakten li{border-bottom:1px solid rgba(154,6,12,.22)}
.fakten .k{font-family:var(--sr-schmal);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;font-size:.8rem;color:#3a3a3e}
.ausr-zeile{border-bottom:1px solid rgba(154,6,12,.18)}
.ausr-gruppe{color:var(--akzent);font-family:var(--sr-schmal)}
.bez-titel,.bez-quelle{font-family:var(--sr-schmal);font-weight:700}
.bez-name{font-family:var(--sr-schmal);font-weight:700;font-size:.98rem}
.raster h2{font-family:var(--sr-kopf);font-size:.95rem;text-transform:uppercase}
.bilder-liste li{background:#1e1e22;border-color:#111}
.bilder-liste li.haupt{border-color:var(--akzent);box-shadow:0 0 0 2px var(--akzent)}
.bild-knoepfe button{font-size:.66rem}

html{scrollbar-color:#8a8a8e transparent}

/* ------------------------------------------------------ the compact head ----
   designs/shadowrun/bogen-kompakt.php, moved by persona.js ("KOMPAKTER KOPF"). Fixed at
   the top, outside the page flow - which is why it cannot make the page jump. Hidden it
   sits above the screen; .an slides it in. The width follows the page column. z-index 45:
   over the page, under the lightbox (50) and the loading bar (60). */
.bogen-kompakt{position:fixed;top:0;left:50%;z-index:45;width:min(1142px,calc(100% - 1.6rem));
  transform:translate(-50%,-115%);transition:transform .22s ease-out;
  background:linear-gradient(#efefef,#e4e4e4);border:1px solid var(--sr-linie);border-top:none;
  box-shadow:0 4px 14px rgba(0,0,0,.28);padding:.45rem .8rem 0}
.bogen-kompakt.an{transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.bogen-kompakt{transition:none}}
.bk-zeile{display:flex;align-items:center;gap:.9rem;padding-bottom:.45rem;min-width:0}
.bk-bild{width:34px;height:44px;object-fit:cover;object-position:center 15%;flex:none;
  border:2px solid #1e1e22}
.bk-name{font-family:var(--sr-kopf);font-weight:700;font-size:1.05rem;line-height:1.1;
  color:var(--akzent);text-transform:uppercase;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;min-width:0}
.bk-werte{display:flex;gap:.9rem;font-family:var(--sr-schmal);font-size:.74rem;
  letter-spacing:.06em;text-transform:uppercase;color:var(--leise);white-space:nowrap}
.bk-werte b{font-family:var(--sr-kopf);font-size:.84rem;color:var(--akzent);margin-right:.15rem}
.bk-knoepfe{margin-left:auto;display:flex;gap:.4rem;align-items:center;flex:none}
.bk-knoepfe button{font-size:.74rem;padding:.26rem .6rem}
.bk-stand{font-family:var(--sr-schmal);font-size:.8rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--leise)}
.bk-stand.offen{color:var(--warnung);font-weight:700}
/* The tabs EXACTLY as in the big head, on the same red rule - a size smaller at first,
   and Roger noticed ("die reiter sind etwas kleiner geworden"): the tabs that stay should
   look like the ones that scrolled away. */
.bk-reiter{display:flex;gap:.2rem;flex-wrap:wrap;margin:0 -.8rem;padding:0 .8rem;
  border-bottom:3px solid var(--akzent)}
.bk-reiter button{font-family:var(--sr-kopf);font-weight:700;font-size:.64rem;letter-spacing:.1em;
  text-transform:uppercase;padding:.62rem 1.3rem .58rem .8rem;background:#cfcfd2;
  border:1px solid #a8a8aa;border-bottom:none;color:#3a3a3e;
  clip-path:polygon(0 0,calc(100% - .5rem) 0,100% 100%,0 100%)}
.bk-reiter button:hover{color:var(--akzent);background:#dcdcde;border-color:#a8a8aa}
.bk-reiter button.an{background:var(--akzent);border-color:var(--akzent);color:#fff}
.bk-reiter .zahl{font-family:var(--sr-schmal);font-size:.66rem;margin-left:.35rem;opacity:.7}
/* A phone has no room for the counters and all three buttons - Speichern stays. */
@media(max-width:880px){
  .bk-werte,.bk-knoepfe button[data-tun="auf"],.bk-knoepfe button[data-tun="zu"]{display:none}
}

/* ============================================ THE TAB AUSRUESTUNG: THREE VIEWS ===
   23.09.2026, issue #17, plan "Persona: Reiter Ausrüstung neu" (after two Cyberpunk 2077
   screens Roger gave as inspiration). designs/shadowrun/ausr-oben.php renders the switch
   and all three views, "Ausrüstung", "Cyberware", "Rucksack", each with the same
   controls; the standard section right after it is hidden in this design.
   data-ansicht on .sr-ausr decides what shows (persona.js "EQUIPMENT VIEWS"). */
.sr-ausr:not([data-ansicht="ausr"]) .sa-ausr,.sr-ausr:not([data-ansicht="cyber"]) .sa-cyber,
.sr-ausr:not([data-ansicht="rucksack"]) .sa-rucksack{display:none}
.sr-ausr + section.ausruestung{display:none}
/* the switch: red capitals like the chapter heads, the open one yellow on a dark plate */
.sr-ausr-wahl{display:flex;gap:.3rem;margin:0 0 1.1rem;border-bottom:3px solid var(--akzent)}
.sr-ausr-wahl button{padding:.55rem 1.1rem .45rem;background:none;border:none;border-radius:0;
  font:700 .95rem/1 var(--sr-kopf);letter-spacing:.04em;text-transform:uppercase;color:var(--akzent);cursor:pointer;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}
.sr-ausr-wahl button:hover{background:rgba(154,6,12,.12)}
.sr-ausr-wahl button[aria-selected="true"]{background:#231f20;color:#fdb714}
/* the view "Ausrüstung" */
/* two rows of two (weapons | armor, matrix | vehicles), the row gap the areas' own
   (1.1rem, as .sa-bereich + .sa-bereich); then .sa-breit over both columns (24.09.2026) */
.sa-ausr{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:1.1rem 1.6rem;align-items:start}
.sa-links,.sa-rechts,.sa-breit{min-width:0}
.sa-breit{grid-column:1 / -1}
.sa-kopf{margin:.2rem 0 .55rem;padding-bottom:.25rem;font:700 .9rem/1 var(--sr-kopf);letter-spacing:.05em;
  text-transform:uppercase;color:var(--akzent);border-bottom:1px solid var(--sr-linie)}
.sa-bereich + .sa-bereich{margin-top:1.1rem}
/* the light surface under an area's heading (24.09.2026, Roger: "bei ausrüstung und
   cyberware bitte auch so" - the tab Werte's chapters, the head panel's grey) */
.sa-bereich > .sa-kopf{margin-bottom:0}
.sa-flaeche{padding:.9rem 1rem;background:#ececec}
.sa-leer{margin:0 0 .6rem;font:400 .85rem/1.3 var(--sr-schmal);color:#666}
.sa-karten{display:grid;gap:.55rem}
.sa-mini{grid-template-columns:repeat(auto-fill,minmax(12rem,1fr))}
/* ONE CARD: dark plate, picture square on the left, a red stripe on the left edge (yellow
   when the tab Werte has chosen it), the bottom right corner cut */
.sa-karte{position:relative;display:grid;grid-template-columns:7rem minmax(0,1fr);gap:.75rem;align-items:start;
  padding:.55rem .7rem .55rem .55rem;background:linear-gradient(135deg,#2a292d,#18171a);color:#fff;
  border-left:3px solid #9a060c;box-shadow:3px 4px 5px rgba(0,0,0,.22);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%)}
.sa-karte.gewaehlt{border-left-color:#fdb714}
.sa-schmal .sa-karte{grid-template-columns:4.6rem minmax(0,1fr)}
.sa-mini .sa-karte{grid-template-columns:2.8rem minmax(0,1fr);gap:.55rem;padding:.4rem .55rem .4rem .4rem}
.sa-waffen .sa-karte{grid-template-columns:9.5rem minmax(0,1fr)}
/* the picture over the kind's symbol: without a picture (or while an 18+ one is hidden)
   the symbol shows */
.sa-bild{position:relative;display:block;aspect-ratio:1;overflow:hidden;background:#0f0e11;border:1px solid #3a393c}
.sa-bild img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;display:block}
.sa-sym::before{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font:normal 900 1.6rem/1 "Font Awesome 7 Etch";color:#4d4c50}
.sa-mini .sa-sym::before{font-size:1rem}
/* Etch code points, checked in the kit's font (23.09.2026) */
.sa-sym.waffe::before{content:"\f54c"}   /* skull */
.sa-sym.panzer::before{content:"\f132"}  /* shield */
.sa-sym.cyber::before{content:"\f0e7"}   /* zap */
.sa-sym.bio::before{content:"\f004"}     /* heart */
.sa-sym.droge::before{content:"\f043"}   /* drop */
.sa-sym.medizin::before{content:"\f1cd"} /* life ring */
.sa-sym.mobil::before{content:"\f3ce"}   /* mobile phone */
.sa-sym.deck::before{content:"\f109"}    /* laptop */
.sa-sym.auto::before{content:"\f1b9"}    /* car */
.sa-sym.flug::before{content:"\f072"}    /* plane */
.sa-sym.schiff::before{content:"\f21a"}  /* ship */
.sa-sym.lkw::before{content:"\f0d1"}     /* truck */
.sa-sym.sonst::before{content:"\f0f2"}   /* suitcase */
.sa-sym.zubehoer::before{content:"\f0ad"} /* wrench - weapon accessories (27.09.2026) */
.sa-text{min-width:0;display:flex;flex-direction:column;gap:.2rem}
.sa-name{font:700 1rem/1.15 var(--sr-schmal);color:#fff;text-decoration:none;overflow-wrap:anywhere}
.sa-name:hover{color:#fdb714}
.sa-text > small{font:400 .72rem/1.2 var(--sr-schmal);letter-spacing:.04em;text-transform:uppercase;color:#9d9da0}
.sa-mini .sa-name{font-size:.88rem}
.sa-gross{display:flex;align-items:baseline;gap:.5rem;margin-top:.15rem}
.sa-gross b{font:700 1.7rem/1 var(--sr-schmal);color:#fdb714}
.sa-gross span{font:600 .78rem/1 var(--sr-schmal);letter-spacing:.06em;text-transform:uppercase;color:#c9c9cc}
.sa-klein{display:flex;flex-wrap:wrap;gap:.1rem .7rem;margin:.15rem 0 0;font:400 .8rem/1.2 var(--sr-schmal)}
.sa-klein dt{margin:0;font-weight:700;font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:#fdb714;align-self:center}
.sa-klein dd{margin:0 0 0 -.4rem;color:#fff}
/* the grip to reorder a card (27.09.2026): top left over the picture, shown on hover; touch-action
   only on it, so the page still scrolls under a finger elsewhere */
.sa-greif{position:absolute;top:.2rem;left:.2rem;z-index:2;width:1.5rem;height:1.5rem;padding:0;border:0;border-radius:2px;
  background:rgba(20,19,21,.75);color:#fdb714;font-size:.95rem;line-height:1;cursor:grab;touch-action:none;opacity:0;transition:opacity .15s}
.sa-karte:hover .sa-greif,.sa-greif:focus-visible{opacity:1}
@media (hover:none){.sa-greif{opacity:.8}}
.sa-karte.zieht{opacity:.55;outline:2px dashed #fdb714;outline-offset:2px}
/* the heart (coveted configuration, 27.09.2026): bottom left over the picture; empty it shows on
   hover only, set it stays red */
.sa-herz{position:absolute;bottom:.25rem;left:.25rem;z-index:2;width:1.5rem;height:1.5rem;padding:0;border:0;border-radius:50%;
  background:rgba(20,19,21,.75);color:#fdb714;font-size:1rem;line-height:1;cursor:pointer;opacity:0;transition:opacity .15s;clip-path:none}
.sa-karte:hover .sa-herz,.sa-herz:focus-visible,.sa-herz.an{opacity:1}
.sa-herz.an{color:#ff3446;text-shadow:0 0 6px rgba(255,52,70,.7)}
@media (hover:none){.sa-herz{opacity:.8}}
.sa-karte.zieht .sa-greif{cursor:grabbing;opacity:1}
.sa-marke{position:absolute;top:0;right:0;padding:.2rem .45rem;background:#fdb714;color:#231f20;
  font:700 .62rem/1 var(--sr-schmal);letter-spacing:.08em;text-transform:uppercase}
.sa-anz{position:absolute;right:.9rem;bottom:.35rem;font:700 .8rem/1 var(--sr-schmal);color:#c9c9cc}
.sa-chips{display:flex;flex-wrap:wrap;gap:.25rem;margin:.3rem 0 0;padding:0;list-style:none}
.sa-chips li{margin:0;padding:.12rem .4rem;background:#3a393c;font:400 .74rem/1.2 var(--sr-schmal);color:#fff}
.sa-chips a{color:#fff;text-decoration:none}
.sa-chips a:hover{color:#fdb714}
.sa-chips small{color:#c9c9cc}
/* A WEAPON'S RANGE, SILENCER AND FACTORY PARTS (27.09.2026): quiet lines under its values; the
   factory parts as chips without ✕, a step darker */
.sa-rw,.sa-daempfer,.sa-kurz{margin:.1rem 0 0;font:400 .76rem/1.2 var(--sr-schmal);color:#c9c9cc}
.sa-daempfer{color:#fdb714}
.sa-chips.sa-fest li{background:#2a292c}
.sa-heim .sa-rw,.sa-heim .sa-daempfer{display:none}
/* the framed picture under the view, across both columns */
.sa-ausr > .sr-rahmen{grid-column:1 / -1}
/* THE CONTROLS of a piece, the same in every view (small dark buttons, the set one yellow) */
.sa-tun{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;margin-top:.45rem}
.sa-tun button{padding:.28rem .5rem;background:#3a393c;border:1px solid #58595b;border-radius:0;color:#fff;
  font:700 .66rem/1 var(--sr-schmal);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;clip-path:none}
.sa-tun button:hover{border-color:#fdb714}
.sa-tun button.an{background:#fdb714;border-color:#fdb714;color:#231f20}
.sa-tun button:disabled{opacity:.5;cursor:default}
.sa-gruppe{display:inline-flex}
.sa-gruppe button + button{border-left:none}
.sa-st{display:inline-flex;align-items:center;gap:.25rem;margin:0;font:700 .66rem/1 var(--sr-schmal);letter-spacing:.08em;
  text-transform:uppercase;color:#fdb714}
.sa-st input{width:3.2rem;margin:0;padding:.2rem .3rem;background:#111;border:1px solid #58595b;color:#fff;font:400 .85rem var(--sr-schmal)}
.sa-anw{display:inline-flex;align-items:center;font:700 .66rem/1 var(--sr-schmal);letter-spacing:.08em;text-transform:uppercase;color:#fdb714}
.sa-anw.leer{color:#e0474d}
.sa-menge{display:inline-flex;align-items:center;gap:.35rem;margin-left:auto;font:700 .85rem/1 var(--sr-schmal);color:#fff}
.sa-menge button{padding:.2rem .45rem}
.sa-chips button{margin-left:.35rem;padding:0 .2rem;background:none;border:none;color:#c9c9cc;font-size:.7rem;cursor:pointer;clip-path:none}
.sa-chips button:hover{color:#fdb714}
/* A PROGRAM RUNS OR SITS IN STORAGE (03.10.2026, GRW p. 225): the running one's switch lit, a stored one's chip quiet */
.sa-chips button[data-tu="laeuft"].an{color:#fdb714}
.sa-chips li.sa-speicher{background:#2a292c}
.sa-chips li.sa-speicher a{color:#a9a9ad}
.sa-klein dd.voll{color:#ff6b6b}
/* "+ ... hinzufügen" and its search */
.sa-plus{display:block;width:100%;margin:.55rem 0 0;padding:.45rem .6rem;background:none;border:1px dashed #9a060c;
  border-radius:0;color:#9a060c;font:700 .72rem/1 var(--sr-schmal);letter-spacing:.1em;text-transform:uppercase;
  text-align:left;cursor:pointer;clip-path:none}
.sa-plus:hover{background:rgba(154,6,12,.08)}
.sa-suche{margin:.4rem 0 0;padding:.5rem;background:#231f20}
.sa-suche[hidden]{display:none}
.sa-suche input{width:100%;margin:0;padding:.4rem .5rem;background:#111;border:1px solid #fdb714;color:#fff;font:400 .9rem var(--sr-schmal)}
.sa-treffer{list-style:none;margin:.3rem 0 0;padding:0}
.sa-treffer li{margin:0;border-bottom:1px solid #3a393c}
.sa-treffer li.leer{padding:.35rem .4rem;color:#9d9da0;font:400 .85rem var(--sr-schmal)}
.sa-treffer button{display:block;width:100%;padding:.35rem .4rem;background:none;border:none;border-radius:0;color:#fff;
  text-align:left;font:400 .88rem/1.2 var(--sr-schmal);cursor:pointer;clip-path:none}
.sa-treffer button:hover{background:#3a393c;color:#fdb714}
.sa-treffer small{margin-left:.45rem;color:#9d9da0}
/* AT HOME, grey under its area (Roger: "da ist quasi die lagerkiste zu hause") */
.sa-heim{margin:.7rem 0 0}
.sa-heim h4{margin:0 0 .35rem;font:700 .66rem/1 var(--sr-schmal);letter-spacing:.1em;text-transform:uppercase;color:#777}
.sa-heim .sa-karte{filter:grayscale(1);opacity:.6}
.sa-heim .sa-karte:hover{opacity:.85}
.sa-heim .sa-gross,.sa-heim .sa-klein,.sa-heim .sa-chips{display:none}
/* the view "Rucksack": search and copy on top, one value box per kind */
.sa-rkopf{display:flex;gap:1rem;align-items:flex-start;margin:0 0 1rem}
.sa-rkopf .sa-neu{flex:1}
.sa-rkopf .sa-plus{margin:0}
.sa-kopieren{flex:none;padding:.45rem .7rem;background:#231f20;border:none;border-radius:0;color:#fdb714;
  font:700 .72rem/1 var(--sr-schmal);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.sa-rbox + .sa-rbox{margin-top:1.1rem}
.sa-rbox .sa-zahl{margin-left:.35rem;color:#c9c9cc;font-size:.8rem}
.sa-rbox td{vertical-align:middle}
.sa-rbox td.sa-rbild{width:2.6rem;padding:.25rem}
.sa-rbox .sa-bild{width:2.4rem}
.sa-rbox .sa-sym::before{font-size:.95rem}
.sa-rbox td.sa-rname{white-space:normal;text-align:left}
.sa-rbox td.sa-rname a{color:#fff;text-decoration:none;font-weight:700}
.sa-rbox td.sa-rname a:hover{color:#fdb714}
.sa-rbox td.sa-rname small{display:block;color:#c9c9cc;font-size:.72rem;text-transform:uppercase;letter-spacing:.04em}
.sa-rbox td.sa-rwerte{white-space:normal;font-size:.8rem;color:#e6e6e8}
.sa-rbox td.sa-rort{font-size:.78rem;color:#c9c9cc}
.sa-rbox td.sa-rtun{white-space:normal}
.sa-rbox td.sa-rtun .sa-tun{margin:0;justify-content:flex-end}
.sa-rbox td.sa-rquelle{font-size:.75rem;white-space:nowrap}
.sa-rbox td.sa-rquelle a{color:#fdb714;text-decoration:none}
.sa-rbox tr.daheim td{opacity:.55}
.sa-rbox tr.tiefe-1 td.sa-rname{padding-left:1.1rem}
.sa-rbox tr.tiefe-2 td.sa-rname{padding-left:2.1rem}
.sa-rbox tr.tiefe-3 td.sa-rname{padding-left:3.1rem}
.sa-pfeil{margin-right:.3rem;color:#fdb714}
.sa-rbox .sa-st input{width:3.2rem}   /* beats the value box's full-width inputs */
/* view "Cyberware": the essence bar, head regions | the figure | body regions */
.sa-cyber{display:grid;grid-template-columns:5.5rem minmax(0,1fr) 13rem minmax(0,1fr);gap:1.2rem;align-items:start;isolation:isolate}
.sa-seite{min-width:0}
/* THE FIGURE (24.09.2026, Roger's picture, tinted red and stored non-public as
   persona_data/designs/shadowrun/koerper-m.webp / koerper-w4.webp - since 29.09.2026 a male and a
   female one, .weiblich for a woman, the male one for everyone else (Roger); a new name
   because bild.php lets the browser keep a picture a day): centred on the empty middle column,
   wider than it, BEHIND the region tiles (z-index -1 inside the isolated grid), sticky
   while the columns scroll; a FIXED height (25.09.2026, Roger: on the large monitor 1.5x
   the window height was far too tall - it must not follow the screen), about what 1.5x
   a laptop window gave (Roger: "1.5x größer"), so the legs run below the window and show
   at the end of the view. SCAN LINES
   (Roger: "so ein streifen filter"): a striped mask cuts thin lines into the picture
   itself, so the stripes follow the figure and never show as a box. OPACITY .5 (29.09.2026, Roger: at .4 it
   looked pale on the light page ground - "dunkler, weniger blass"; .7 tried, "doch eher 50"), the doc's the same. */
.sa-figur{position:sticky;top:6.5rem;z-index:-1;height:72rem;pointer-events:none}
.sa-figur::before{content:"";position:absolute;top:0;left:50%;height:100%;aspect-ratio:720/1400;transform:translateX(-50%);
  background:url("../../bild.php?dg=shadowrun&n=koerper-m") center/contain no-repeat;opacity:.5;
  -webkit-mask-image:repeating-linear-gradient(0deg,#000 0 2px,rgba(0,0,0,.25) 2px 4px);
          mask-image:repeating-linear-gradient(0deg,#000 0 2px,rgba(0,0,0,.25) 2px 4px)}
.sa-figur.weiblich::before{aspect-ratio:586/1400;background-image:url("../../bild.php?dg=shadowrun&n=koerper-w4")}
.sa-region.ziel{outline:2px solid #fdb714;outline-offset:4px}
.sa-essenz{position:sticky;top:6.5rem;display:flex;flex-direction:column;align-items:center;gap:.35rem;
  padding:.7rem .4rem;background:#231f20;color:#fff;clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%)}
/* the empty part - the essence left - green like its number above (24.09.2026, Roger:
   "die grauen offenen balken auch grün"); the filled part yellow, used, from below */
.sa-essenz-balken{position:relative;display:block;width:1.3rem;height:16rem;
  background:repeating-linear-gradient(0deg,#4cd07d 0 5px,#231f20 5px 8px)}
.sa-essenz-balken i{position:absolute;left:0;right:0;bottom:0;
  background:repeating-linear-gradient(0deg,#fdb714 0 5px,#231f20 5px 8px)}
.sa-essenz-balken i.ueber{background:repeating-linear-gradient(0deg,#ff4d4d 0 5px,#231f20 5px 8px)}   /* over 6 */
.sa-essenz b{font:700 1.5rem/1 var(--sr-schmal);color:#fdb714}
.sa-essenz b.sa-essenz-rest{color:#4cd07d}   /* the essence left, above the bar */
/* ESSENCE BELOW ZERO (24.09.2026, Roger: "bitte rot darstellen die zahl mit -") - the
   bar view, the equipment bar, the tab Werte's ESS tile */
.sa-essenz b.sa-essenz-rest.minus,.ess-minus{color:#ff4d4d !important}
.sa-essenz small{font:600 .66rem/1.1 var(--sr-schmal);letter-spacing:.06em;text-transform:uppercase;text-align:center;color:#c9c9cc}
@media(max-width:880px){
  .sa-ausr{grid-template-columns:minmax(0,1fr)}
  .sa-rbox td.sa-rwerte,.sa-rbox td.sa-rquelle,.sa-rbox th:nth-child(3),.sa-rbox th:nth-child(6){display:none}
  /* a phone: essence bar and figure side by side on top, the regions below */
  .sa-cyber{grid-template-columns:4rem minmax(0,1fr);gap:.8rem}
  .sa-essenz,.sa-figur{grid-row:1;position:static}
  .sa-figur{grid-column:2;position:relative;height:18rem}
  .sa-seite{grid-column:1 / -1}
  .sa-waffen .sa-karte{grid-template-columns:6rem minmax(0,1fr)}
  .sr-ausr-wahl button{padding:.5rem .6rem .4rem;font-size:.78rem}
}

/* THE ITEM PAGE (25.09.2026, designs/shadowrun/gegenstand.php; Roger: "im neuen design ...
   mit den passenden blöcken und hinweisblöcken"). The head IS the sheet head (.bogenkopf,
   .kopfzeile, .kopfmitte, .kopfwerte, the dark box - "eher wie einen persona bogen kopf"),
   laid out by the rules above; the name only in the page title, the own-name field a row
   of the fact box. Chapters (.sr-kapitel over .sr-kapitel-flaeche) in rows, the pictures
   below; one column under 900 px. A chapter here is a block, not a grid cell - so the
   surface's -1.2rem (made to eat .sr-links' grid gap) is taken back. */
.sr-gegenstand{display:grid;gap:1.8rem}
.sr-gegenstand .kasten{margin:0}
.sr-gegenstand .bogenkopf .sr-wertebox td{text-align:left;white-space:normal}
.sr-gegenstand .bogenkopf .sr-wertebox td:first-child{width:7.5rem;color:#fdb714;white-space:nowrap}
/* the counters' column wide enough for the fact box beneath (few counters on an item) */
@media(min-width:881px){
  .sr-gegenstand .kopfzeile{grid-template-columns:auto minmax(0,1fr) minmax(19rem,auto)}
}
/* ROWS, NOT COLUMNS (same day, Roger: "die einzelnen blöcke bitte immer oben ausrichten.
   also eher zeilen nicht spalten"; then the order "Werte, Getragen von, neue Zeile,
   Beschreibung, Regelstelle", the rule passage as high as the description): the two
   column wrappers dissolve (display:contents), each block gets its cell, the two of a row
   start at the same height. THE RULE PASSAGE adds no height to its row - its content lies
   absolutely in the stretched cell (.sr-g-regel-innen), so the description sets the
   height and the book text scrolls inside. */
.sr-g-spalten{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.8rem 1.4rem;align-items:start}
.sr-g-spalte{display:contents}
.sr-g-werte{grid-column:1;grid-row:1}
.sr-g-traeger{grid-column:2;grid-row:1}
.sr-g-streifen{grid-column:1 / -1;grid-row:2;min-width:0}   /* the narrow picture, full width */
.sr-g-beschreibung{grid-column:1;grid-row:3}
.sr-g-regel{grid-column:2;grid-row:3;align-self:stretch;position:relative;min-height:14rem}
.sr-g-regel-innen{position:absolute;inset:0;display:flex;flex-direction:column}
.sr-g-regel-innen > .sr-kapitel-flaeche{flex:1;min-height:0;display:flex;flex-direction:column;gap:1.2rem}
.sr-g-regel .regelstelle{flex:1;min-height:0;display:flex;flex-direction:column}
.sr-g-regel .regel-text{flex:1;min-height:0;max-height:none}
.sr-g-block{min-width:0}
/* also inside the rule passage's wrapper - without it the surface's -1.2rem slid over the
   heading and the heading sat lower than its neighbour (Roger's screenshot) */
.sr-g-block > .sr-kapitel,.sr-g-regel-innen > .sr-kapitel{margin-top:0}
.sr-g-block > .sr-kapitel-flaeche,.sr-g-regel-innen > .sr-kapitel-flaeche{margin-top:0}
/* the hint line on the light surface: a keyword in the accent, the rest quiet */
.sr-g-hinweis{margin:0;font:400 .8rem/1.4 var(--sr-schmal);color:#555}
/* THE KEPT INSTRUCTIONS on the world page (designs/shadowrun/welt.php, includes/merken.php, 04.10.2026) */
.sr-merken{margin:.8rem 0 .4rem 1.4rem;padding:0}
.sr-merken li{margin:0 0 .8rem}
.sr-merken textarea,.sr-merken-neu textarea{width:100%;box-sizing:border-box}
.sr-merken-fuss{display:flex;gap:.5rem;align-items:center;justify-content:flex-end;margin-top:.2rem;font:400 .78rem/1.3 var(--sr-schmal);color:#555}
.sr-merken-neu{display:flex;gap:.6rem;align-items:flex-end;margin-top:.6rem}
.sr-merken-neu button{flex:0 0 auto}
.sr-g-hinweis b{font-weight:700;color:var(--akzent)}
.sr-wertebox .sr-g-hinweis{color:#c9c9cc}
.sr-wertebox .sr-g-hinweis b{color:#fdb714}
/* values: label | the input that counts; a value of Roger's own in yellow */
.sr-g-werte .sr-wertebox td:first-child{width:45%}
.sr-g-werte tr.eigen td:first-child{color:#fdb714}
.sr-g-werte tr.eigen small{font-size:.66rem;text-transform:uppercase;letter-spacing:.05em}
.sr-g-alle summary{margin-top:.5rem;cursor:pointer;font-size:.74rem;color:#fdb714}
.sr-g-alle table{margin-top:.3rem}
/* carriers in the dark box */
.sr-wertebox ul.traeger{max-width:none;margin:0 0 .5rem}
.sr-wertebox ul.traeger li{padding:.25rem .35rem;border-bottom:1px solid #58595b}
.sr-wertebox ul.traeger li:nth-child(odd){background:#58595b}
.sr-wertebox ul.traeger a{color:#fff}
.sr-wertebox ul.traeger a:hover{color:#fdb714}
.sr-wertebox .traeger-leer,.sr-wertebox .hint{color:#c9c9cc}
/* THE PERSONA PICKER OPENS OVER THE HEAD (Roger's screenshot: it opened under it). The dark
   box is its own stacking context (z-index 0 + the drop-shadow filter), the head row sits
   at z-index 1 - so the carriers' box goes above it. */
.sr-g-traeger .sr-wertebox{z-index:2}
/* the book link in the fact box as plain text (it carries the button padding elsewhere) */
.sr-gegenstand .bogenkopf .sr-wertebox a.buch-oeffnen{padding:0;font-size:inherit}
.sr-wertebox h3 .zahl{color:#fff;font-size:.8rem}
/* the description's tools stand alone in its head, to the right */
.sr-g-werkzeug{justify-content:flex-end}
/* in a box (the look) the head is pulled to the box edges for a red title it does not have
   here - the price line ("über die Brücke") stuck to the left rule (Roger's screenshot) */
.kasten > .fkopf.sr-g-werkzeug{padding-left:1.1rem}
/* the tiles 1.5x (Roger: "die kleinen bilder 1.5fach so groß"), and a save button beside
   crown and bin, drawn like them */
.sr-g-bilder .bilder-liste{grid-template-columns:repeat(auto-fill,minmax(165px,1fr))}
.bild-knoepfe .bild-dl{flex:1;display:inline-flex;align-items:center;justify-content:center;
  padding:.28rem .1rem;color:#2a2a2e;background:linear-gradient(180deg,#ececec,#d6d6d8);
  border:1px solid #9c9ca0;line-height:0}
.bild-knoepfe .bild-dl:hover{color:var(--akzent);border-color:var(--akzent)}
.bild-knoepfe .bild-dl .ic{width:.85rem;height:.85rem}
/* WHAT FITS THIS WEAPON (27.09.2026): full width under the two rows, a value box per mount,
   as many columns as fit; the effect and price quiet and right, "braucht ..." its own line */
.sr-g-zubehoer{margin-top:1.8rem}
/* folded by default (30.09.2026, gegenstand.php): the chapter heading is the handle, a triangle turns when open */
.sr-g-zubehoer > summary{display:block;list-style:none;cursor:pointer}
.sr-g-zubehoer > summary::-webkit-details-marker{display:none}
.sr-g-zubehoer > summary .sr-kapitel::before{content:"▸";display:inline-block;width:1rem;margin-right:.4rem;transition:transform .15s}
.sr-g-zubehoer[open] > summary .sr-kapitel::before{transform:rotate(90deg)}
.sr-g-zubehoer > summary .sr-pz-zahl{font-weight:400;opacity:.75}
.sr-g-zubehoer > summary:focus-visible{outline:1px solid var(--akzent);outline-offset:2px}
.sr-g-zubehoer-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(21rem,1fr));gap:1.2rem;
  align-items:start;margin-top:.8rem}
.sr-g-zubehoer .sr-wertebox td.sr-pz-wirkung{white-space:normal;text-align:right;color:#c9c9cc;font-size:.74rem}
.sr-g-zubehoer .sr-wertebox td.sr-pz-preis{text-align:right;color:#c9c9cc;font-size:.74rem;white-space:normal}
/* FIXED COLUMNS (Roger's screenshot of an armor: "das ist zu breit geraten" - with auto layout
   a long cell widened its table past the grid cell and the three tables of a wide group ran
   into each other): the name gets 42 %, the rest share what is left and wrap inside. */
.sr-g-zubehoer .sr-wertebox table{table-layout:fixed;width:100%}
.sr-g-zubehoer .sr-wertebox td:first-child{width:42%}
.sr-g-zubehoer .sr-wertebox td{overflow-wrap:break-word}
.sr-g-zubehoer .sr-pz-tabellen > table{min-width:0}
/* four columns (capacity / slots) need more room: wider boxes, two tables in a wide group */
.sr-g-zubehoer-raster:has(.sr-pz-vier){grid-template-columns:repeat(auto-fill,minmax(27rem,1fr))}
.sr-pz-breit.sr-pz-vier .sr-pz-tabellen{grid-template-columns:repeat(auto-fit,minmax(27rem,1fr))}
.sr-g-zubehoer .sr-pz-vier td:first-child{width:36%}
.sr-g-zubehoer .sr-wertebox small.anz{font-size:.66rem;text-transform:uppercase;letter-spacing:.05em}
.sr-g-zubehoer .sr-wertebox .sr-pz-braucht{display:block;font-size:.7rem;color:#fdb714}
.sr-g-zubehoer .sr-pz-breit{grid-column:1 / -1}
.sr-pz-breit .sr-pz-tabellen{display:grid;grid-template-columns:repeat(auto-fit,minmax(21rem,1fr));gap:0 1.2rem;align-items:start}
/* THE SCHIEBER (27.09.2026, schieber.php). ROUND 2 "NACHTLADEN" (Roger: "richtig
   ladenfeeling"): the dark page of the adventure area (body sr-dunkel sr-laden - its ground is
   the books' code page), the shop's sign in a red neon frame that flickers now and then, the
   fixer behind his counter with a speech line, the customer and the base beside him; then
   THE COUNTER (her piece with everything in it, lit yellow from the top edge), THE SHELF
   (value boxes standing on a board, a yellow price tag per part) beside THE RECEIPT (paper,
   typewriter type, a torn edge), which stays in view while scrolling. */
.sr-schieber{display:grid;gap:1.8rem;margin-top:1rem}
body.sr-laden .leiste h1{color:#fff;letter-spacing:.14em;
  text-shadow:0 0 4px #ff4050,0 0 14px rgba(255,40,60,.75),0 0 36px rgba(255,40,60,.35)}
.sr-laden .knopf-link[hidden]{display:none}
.sr-laden .hinweis{color:#d9d6cf}
.sr-laden-schild{margin:.6rem 0 1.4rem;padding:4px;border:2px solid #ff3446;border-radius:6px;
  box-shadow:0 0 6px rgba(255,52,70,.95),0 0 24px rgba(255,52,70,.5),inset 0 0 10px rgba(255,52,70,.45);
  animation:sr-neon 9s infinite}
.sr-laden-schild img{display:block;width:100%;height:auto;border-radius:3px}
@keyframes sr-neon{0%,91%,100%{opacity:1}92%{opacity:.5}93%{opacity:1}95%{opacity:.72}96%{opacity:1}}
@media (prefers-reduced-motion:reduce){.sr-laden-schild{animation:none}}
/* the counter's front: the fixer | the customer | the special offers - ONE BASELINE (Roger:
   "gleiche höhe wie sonderangebote, verkäufer auch.. alles eine grundlinie"): the row stretches,
   the offers set its height, and the two pictures FILL what is left in their column - absolutely
   positioned, so they add no height of their own, cut at the bottom (object-position top) */
.sr-laden-tresen{display:grid;grid-template-columns:17rem minmax(0,1fr) minmax(0,1.4fr);gap:1.4rem;align-items:stretch}
.sr-laden-haendler{position:relative;display:flex;flex-direction:column;margin:0}
.sr-haendler-bild{position:relative;display:block;flex:1 1 auto;min-height:14rem;overflow:hidden;border:1px solid #4a3a2a;
  box-shadow:0 0 18px rgba(253,150,20,.28),0 10px 24px rgba(0,0,0,.7)}
.sr-haendler-bild img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center 15%}
.sr-laden-kunde{display:flex;flex-direction:column}
.sr-laden-kunde .sr-kapitel-flaeche{flex:1 1 auto;display:flex;flex-direction:column}
.sr-laden-spruch{position:relative;margin:.9rem .3rem 0;padding:.6rem .8rem;background:#1b1a1d;border:1px solid #fdb714;
  color:#fdb714;font:italic 600 .92rem/1.35 var(--sr-schmal)}
.sr-laden-spruch::before{content:"";position:absolute;top:-.5rem;left:1.6rem;width:.9rem;height:.9rem;background:#1b1a1d;
  border-left:1px solid #fdb714;border-top:1px solid #fdb714;transform:rotate(45deg)}
.sr-laden .sr-kapitel-flaeche{background:rgba(22,21,24,.86);border:1px solid #2e2d31}
.sr-laden .sr-g-hinweis{color:#c9c6bf}
.sr-laden .sr-g-hinweis b{color:#fdb714}
/* the customer's picture, big, under the picker (Roger) - no display rule on the img: the
   18+ pair (img.nsfw / img.ersatz) is switched by the general rules */
.sr-kunde-bild{position:relative;display:block;flex:1 1 auto;min-height:12rem;margin:.9rem 0 0;background:#0b0a0c;
  border:1px solid #4a484c;overflow:hidden;box-shadow:0 0 16px rgba(255,52,70,.25)}
.sr-kunde-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top}
.sr-kunde-bild span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:700 4rem/1 var(--sr-kopf);color:#3d3c40}
.sr-laden-geld{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin:.8rem 0 0;color:#c9c6bf}
.sr-laden-geld span{font:700 .72rem/1 var(--sr-schmal);letter-spacing:.1em;text-transform:uppercase}
.sr-laden-geld b{font:700 1.5rem/1 var(--sr-kopf);color:#fdb714;text-shadow:0 0 12px rgba(253,183,20,.4)}
.sr-laden-geld small{font-size:.76rem}
/* THE SPECIAL OFFERS (round 3): adverts beside the customer - a neon label, tiles like posters */
.sr-laden-reklame{min-width:0}
.sr-reklame-kopf{margin:0 0 .6rem;font:700 .74rem/1.2 var(--sr-schmal);letter-spacing:.12em;text-transform:uppercase;color:#c9c6bf}
.sr-reklame-kopf span{display:inline-block;margin-right:.4rem;padding:.2rem .55rem;border:2px solid #fdb714;border-radius:4px;color:#fff;
  font:700 .95rem/1 var(--sr-kopf);letter-spacing:.08em;
  text-shadow:0 0 4px #fdb714,0 0 12px rgba(253,183,20,.7);box-shadow:0 0 8px rgba(253,183,20,.6),inset 0 0 8px rgba(253,183,20,.35)}
.sr-reklame-kacheln{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem}
.sr-reklame{position:relative;display:grid;gap:.15rem;padding:0 0 .6rem;background:#161518;border:1px solid #3d3c40;
  border-top:3px solid #ff3446;color:#f1efe9;text-decoration:none;transition:box-shadow .15s,border-color .15s}
.sr-reklame:hover{border-color:#fdb714;box-shadow:0 0 14px rgba(253,183,20,.45)}
.sr-reklame-bild{position:relative;display:block;aspect-ratio:4/3;background:#0b0a0c;overflow:hidden}
.sr-reklame-bild img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover}
.sr-reklame-bild.sa-sym::before{font-size:2.2rem;color:#5a585e}
.sr-reklame-name{padding:.3rem .55rem 0;font:700 .86rem/1.2 var(--sr-schmal)}
.sr-reklame small{padding:0 .55rem;color:#a9a6a0;font-size:.72rem}
.sr-reklame .sr-preisschild{position:absolute;z-index:2;top:.5rem;right:-.35rem;font-size:.8rem;box-shadow:0 2px 6px rgba(0,0,0,.6)}
/* HER THINGS (round 3): tabs per area, her pieces as small tiles */
.sr-sachen-reiter{display:flex;flex-wrap:wrap;gap:.3rem;margin-bottom:.9rem;border-bottom:1px solid #3d3c40;padding-bottom:.5rem}
.sr-sachen-reiter button{padding:.35rem .75rem;border:1px solid #4a484c;background:#1f1e21;color:#e8e5de;
  font:700 .78rem/1.1 var(--sr-schmal);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;clip-path:none}
.sr-sachen-reiter button span{color:#fdb714;margin-left:.2rem}
.sr-sachen-reiter button:hover{border-color:#fdb714;color:#fdb714}
.sr-sachen-reiter button.an{background:var(--akzent);border-color:#ff3446;color:#fff;box-shadow:0 0 10px rgba(255,52,70,.5)}
.sr-sachen-reiter button.an span{color:#fff}
.sr-sachen-reiter .sr-sachen-neu{margin-left:auto;border-color:#fdb714;color:#fdb714}
.sr-sachen-tafel{display:grid;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:.5rem}
.sr-sachen-tafel[hidden]{display:none}
.sr-sachen-tafel[data-sachen-tafel="neu"]{display:block;max-width:34rem}
.sr-sachen-tafel[data-sachen-tafel="neu"][hidden]{display:none}
.sr-sache{display:grid;grid-template-columns:3.4rem minmax(0,1fr);gap:.6rem;align-items:center;padding:.35rem;
  background:#1c1b1e;border:1px solid #38373b;color:#f1efe9;text-decoration:none}
.sr-sache:hover{border-color:#fdb714}
.sr-sache.an{border-color:#ff3446;box-shadow:0 0 10px rgba(255,52,70,.45)}
.sr-sache.daheim{opacity:.55}
.sr-sache-bild{position:relative;display:block;width:3.4rem;height:3.4rem;background:#0b0a0c;overflow:hidden}
.sr-sache-bild img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover}
.sr-sache-bild.sa-sym::before{font-size:1.3rem;color:#5a585e}
.sr-sache-text{display:grid;gap:.1rem;min-width:0}
.sr-sache-text b{font:700 .84rem/1.2 var(--sr-schmal);overflow-wrap:anywhere}
.sr-sache-text small{color:#a9a6a0;font-size:.72rem}
/* WHERE THINGS GO (Roger: "welche anbauorte es gibt und welche schon belegt sind"): on the
   counter a field per mount / weapon place - taken white with the part, free outlined yellow,
   new from the receipt yellow -, a capacity bar, a vehicle's slots; on the tiles dots */
.sr-theke-orte{margin-top:1rem}
.sr-theke-orte h4{margin:0 0 .4rem;font:700 .7rem/1 var(--sr-schmal);letter-spacing:.12em;text-transform:uppercase;color:#8d8a84;
  border-bottom:1px solid #38373b;padding-bottom:.25rem}
.sr-theke-orte ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.sr-theke-orte li{display:grid;gap:.1rem;min-width:7.5rem;padding:.3rem .55rem;border:1px solid #4a484c;background:#1c1b1e}
.sr-theke-orte li span{font:700 .64rem/1 var(--sr-schmal);letter-spacing:.1em;text-transform:uppercase;color:#8d8a84}
.sr-theke-orte li b{font:600 .8rem/1.2 var(--sr-schmal);color:#f1efe9}
.sr-theke-orte li small{font-size:.64rem;color:#8d8a84}
.sr-theke-orte li.frei{border:1px dashed #fdb714;background:transparent}
.sr-theke-orte li.frei b{color:#fdb714;font-weight:400;font-style:italic}
.sr-theke-orte li.neu{border-color:#fdb714;box-shadow:0 0 8px rgba(253,183,20,.35)}
.sr-theke-orte li.neu b,.sr-theke-orte li.neu small{color:#fdb714}
.sr-theke-orte li.werk b{color:#a9a6a0}
.sr-kap{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin:.6rem 0 0;font-size:.8rem;color:#c9c6bf}
.sr-kap > span:first-child{font:700 .64rem/1 var(--sr-schmal);letter-spacing:.1em;text-transform:uppercase;color:#8d8a84}
.sr-kap-balken{position:relative;flex:0 1 14rem;height:.55rem;background:#0b0a0c;border:1px solid #4a484c}
.sr-kap-balken i{position:absolute;inset:0 auto 0 0;background:#fdb714}
.sr-kap.voll .sr-kap-balken i{background:#ff3446}
.sr-kap b{color:#fff}
.sr-kap small{color:#fdb714}
.sr-theke-slots{display:flex;flex-wrap:wrap;gap:.3rem .9rem;margin:.6rem 0 0;font-size:.78rem;color:#a9a6a0}
.sr-theke-slots b{color:#fff}
.sr-theke-slots .voll b{color:#ff6a74}
.sr-sache-orte{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .5rem;margin-top:.15rem}
.sr-sache-orte i{display:inline-block;width:.55rem;height:.55rem;border:1px solid #fdb714;border-radius:50%}
.sr-sache-orte i.voll{background:#fdb714}
.sr-sache-orte em{font-style:normal;font-size:.68rem;color:#c9c6bf}
/* COVETED CONFIGURATIONS (27.09.2026): tiles like "Ihre Sachen", a little larger, the owner and
   the parts, the price tag right; the heart on the counter */
.sr-konfigs{display:grid;grid-template-columns:repeat(auto-fill,minmax(19rem,1fr));gap:.6rem}
.sr-konfig{display:grid;grid-template-columns:4.2rem minmax(0,1fr) auto;gap:.7rem;align-items:center;padding:.45rem .55rem;
  background:#1c1b1e;border:1px solid #38373b;border-left:3px solid #ff3446;color:#f1efe9;text-decoration:none}
.sr-konfig:hover{border-color:#fdb714;border-left-color:#ff3446;box-shadow:0 0 10px rgba(253,183,20,.3)}
.sr-konfig.an{border-color:#ff3446;box-shadow:0 0 12px rgba(255,52,70,.45)}
.sr-konfig .sr-sache-bild{width:4.2rem;height:4.2rem}
.sr-konfig b small{font-weight:400;color:#a9a6a0;margin-left:.3rem}
.sr-konfig-teile{display:block;font-size:.72rem;color:#fdb714;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr-konfig .sr-preisschild{align-self:start}
.sr-laden-begehrt{margin-bottom:0}
.sr-theke-herz{margin-left:.6rem;padding:.12rem .5rem;border:1px solid #6a5a5e;background:transparent;color:#d9d6cf;
  font:700 .68rem/1.3 var(--sr-schmal);letter-spacing:.08em;cursor:pointer;clip-path:none;vertical-align:middle}
.sr-theke-herz:hover{border-color:#ff3446;color:#ff6a74}
.sr-theke-herz.an{border-color:#ff3446;color:#ff3446;text-shadow:0 0 6px rgba(255,52,70,.6)}
/* the counter's "sell the whole piece" (round 3) */
.sr-theke-verkauf{margin:1rem 0 0;display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
.sr-theke-verkauf em{color:#ff6a74;font-size:.86rem}
.sr-theke-verkauf button{padding:.35rem .8rem;border:1px solid #ff3446;background:transparent;color:#ff6a74;
  font:700 .76rem/1.2 var(--sr-schmal);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;clip-path:none}
.sr-theke-verkauf button:hover{background:#ff3446;color:#fff}
.sr-laden-theke.verkauft .sr-theke-bild,.sr-laden-theke.verkauft h2{opacity:.5}
.sr-laden-theke.verkauft h2{text-decoration:line-through}
/* the persona picker opens DOWNWARD here (Roger) - elsewhere the lists open upward; the
   customer's block lies above the base's so the list covers it */
.sr-schieber .bw-liste{top:calc(100% + 2px);bottom:auto}
.sr-laden-kunde{position:relative;z-index:4}
/* THE COUNTER: her piece and everything in it */
.sr-laden-theke{position:relative;display:grid;grid-template-columns:10rem minmax(0,1fr) minmax(14rem,19rem);gap:1.4rem;
  align-items:start;padding:1.3rem 1.4rem 1.7rem;background:linear-gradient(180deg,#201f23,#131215);
  border:1px solid #38373b;border-top:3px solid #fdb714;box-shadow:0 -6px 22px rgba(253,183,20,.18),0 14px 26px rgba(0,0,0,.65)}
.sr-laden-theke::after{content:"";position:absolute;left:-1px;right:-1px;bottom:-9px;height:9px;
  background:linear-gradient(180deg,#3a3035,#1a1618)}
.sr-theke-bild{position:relative;display:block;width:10rem;height:10rem;background:#0b0a0c;border:1px solid #3d3c40;overflow:hidden}
.sr-theke-bild img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover}
.sr-theke-bild.sa-sym::before{font-size:3rem;color:#5a585e}
.sr-theke-marke{margin:0;font:700 .7rem/1 var(--sr-schmal);letter-spacing:.14em;text-transform:uppercase;color:#fdb714}
.sr-laden-theke h2{margin:.35rem 0 .1rem;font:700 1.35rem/1.15 var(--sr-kopf);color:#fff}
.sr-laden-theke h2 small{font:600 .8rem/1 var(--sr-schmal);color:#c9c6bf;margin-left:.4rem}
.sr-theke-art{margin:0 0 .8rem;color:#a9a6a0;font-size:.82rem}
/* one column, the groups under each other (Roger: "lieber eine spalte und dann untereinander
   abwerk und schon drin") - side by side the names broke and the buttons fell to a second line */
.sr-theke-gruppen{display:grid;grid-template-columns:minmax(0,1fr);gap:.9rem;max-width:44rem}
.sr-theke-gruppen h4{margin:0 0 .3rem;font:700 .7rem/1 var(--sr-schmal);letter-spacing:.12em;text-transform:uppercase;color:#8d8a84;
  border-bottom:1px solid #38373b;padding-bottom:.25rem}
.sr-theke-gruppen ul{list-style:none;margin:0;padding:0;display:grid;gap:.3rem}
.sr-theke-teil{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .5rem;font-size:.86rem}
.sr-theke-teil a{color:#f1efe9;text-decoration:none}
.sr-theke-teil a:hover{color:#fdb714}
.sr-theke-teil small{color:#a9a6a0;font-size:.72rem}
.sr-theke-teil.werk a{color:#9a979f}
.sr-theke-teil.neu{padding-left:.45rem;border-left:2px solid #fdb714}
.sr-theke-teil.neu a{color:#fdb714}
.sr-theke-teil.raus a{text-decoration:line-through;opacity:.55}
.sr-theke-teil.leer{color:#77757a;font-style:italic;font-size:.8rem}
.sr-theke-tun{display:inline-flex;gap:.25rem;margin-left:auto;align-items:baseline}
.sr-theke-tun em{font-size:.72rem;color:#ff6a74}
.sr-theke-tun button{padding:.08rem .45rem;border:1px solid #5d5b61;background:transparent;color:#d9d6cf;
  font:600 .68rem/1.3 var(--sr-schmal);letter-spacing:.04em;cursor:pointer;clip-path:none}
.sr-theke-tun button:hover{border-color:#fdb714;color:#fdb714}
.sr-theke-tun button[data-verkauf="1"]:hover{border-color:#ff4a55;color:#ff4a55}
#schieber-bau{display:grid;gap:2.2rem}
.sr-schieber-bau{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:1.4rem;align-items:start}
.sr-schieber-korb{position:sticky;top:6.5rem;z-index:2}
/* THE SHELF: each value box stands on a board */
.sr-laden .sr-regal{margin-bottom:.9rem;box-shadow:0 13px 0 -5px #4a3b30,0 20px 14px -6px rgba(0,0,0,.8)}
.sr-preisschild{display:inline-block;max-width:100%;overflow-wrap:anywhere;padding:.08rem .45rem .08rem .75rem;background:#fdb714;color:#1a1a1a;
  font:700 .72rem/1.25 var(--sr-schmal);clip-path:polygon(.5rem 0,100% 0,100% 100%,.5rem 100%,0 50%)}
/* THE RECEIPT */
.sr-bon{position:relative;padding:1.1rem 1rem 1.3rem;background:#f3f0e6;color:#262426;
  font:.8rem/1.35 "Courier New",Courier,monospace;box-shadow:0 12px 28px rgba(0,0,0,.75);transform:rotate(.5deg)}
.sr-bon::after{content:"";position:absolute;left:0;right:0;bottom:-9px;height:9px;
  background:linear-gradient(135deg,#f3f0e6 50%,transparent 50%) 0 0/12px 9px repeat-x,
             linear-gradient(-135deg,#f3f0e6 50%,transparent 50%) 0 0/12px 9px repeat-x}
.sr-bon-kopf{margin:0 0 .7rem;padding-bottom:.6rem;border-bottom:1px dashed #8a877f;text-align:center;
  font-weight:700;letter-spacing:.3em;text-transform:uppercase}
.sr-bon-kopf small{font-weight:400;letter-spacing:.05em;text-transform:none}
.sr-bon table{width:100%;border-collapse:collapse;table-layout:fixed}
.sr-bon td{padding:.25rem .15rem;vertical-align:top;border-bottom:1px dotted #c9c5b8}
.sr-bon td.sr-bon-preis{width:6.2rem;text-align:right;white-space:nowrap}
.sr-bon td.sr-bon-weg{width:1.6rem;text-align:right}
.sr-bon tr.verkauf td.sr-bon-preis{color:#0d7a3a}
.sr-bon tr.ausbau td{color:#6a675f}
.sr-bon-art{font-weight:700;text-transform:uppercase;font-size:.7rem}
.sr-bon-leer{color:#7a776f;font-style:italic}
.sr-bon .sr-schieber-verf{color:#6a675f}
.sr-bon select{display:block;margin:.2rem 0 0;font:.72rem "Courier New",monospace;background:#fff;color:#222;border:1px solid #a9a597}
.sr-bon .sr-schieber-gueten button{border-color:#a9a597;color:#4a4842}
.sr-bon .sr-schieber-gueten button.an{border-color:#262426;background:#262426;color:#f3f0e6}
.sr-bon-weg button{width:1.3rem;height:1.3rem;padding:0;border:1px solid #a9a597;background:transparent;color:#4a4842;
  font:700 .75rem/1 var(--sr-schmal);cursor:pointer;clip-path:none}
.sr-bon-weg button:hover{border-color:#b3121c;color:#b3121c}
/* the new piece's ✕ is a link (it empties the counter) - drawn like the buttons beside it */
.sr-bon-weg a.sr-bon-leeren{display:inline-flex;align-items:center;justify-content:center;width:1.3rem;height:1.3rem;
  border:1px solid #a9a597;color:#4a4842;font:700 .75rem/1 var(--sr-schmal);text-decoration:none}
.sr-bon-weg a.sr-bon-leeren:hover{border-color:#b3121c;color:#b3121c}
.sr-bon-summe{display:flex;justify-content:space-between;margin:.7rem 0 .2rem;padding-top:.5rem;border-top:2px solid #262426;
  font-weight:700;text-transform:uppercase}
.sr-bon-summe b{font-size:1.1rem}
.sr-bon-klein{margin:.35rem 0 0;font-size:.72rem;color:#55534c}
/* .sr-warnung.hell pulls itself up by -.8rem elsewhere; on the receipt it ran into the nuyen line */
.sr-bon .sr-warnung,.sr-bon .sr-warnung.hell{margin:.35rem 0 0;font-family:var(--sr-schmal)}
.sr-laden .sr-warnung.hell{margin:.5rem 0 0}
.sr-bon .schieber-kaufen{display:block;width:100%;margin-top:.9rem}
.sr-schieber-gruppen{display:grid;grid-template-columns:repeat(auto-fill,minmax(26rem,1fr));gap:1.2rem;align-items:start;margin-top:.8rem}
.sr-schieber .sr-wertebox table{table-layout:fixed;width:100%}
.sr-schieber .sr-wertebox td:first-child{width:44%;white-space:normal}
.sr-schieber .sr-wertebox td{overflow-wrap:break-word}
.sr-schieber .sr-wertebox td.sr-pz-wirkung{white-space:normal;text-align:right;color:#c9c9cc;font-size:.74rem}
.sr-schieber .sr-wertebox td.sr-pz-preis{white-space:normal;text-align:right;color:#c9c9cc;font-size:.74rem}
.sr-schieber .sr-wertebox .sr-pz-braucht{display:block;font-size:.7rem;color:#fdb714}
.sr-schieber .sr-wertebox td.sr-schieber-plus{width:2.2rem;text-align:right}
.sr-schieber-plus button{width:1.6rem;height:1.6rem;padding:0;border:1px solid #fdb714;background:transparent;color:#fdb714;
  font:700 .95rem/1 var(--sr-schmal);cursor:pointer}
.sr-schieber-plus button:hover{background:#fdb714;color:#231f20}
.sr-schieber-chips{display:flex;flex-wrap:wrap;gap:.3rem;margin:.3rem 0 .9rem}
.sr-schieber-chips a{padding:.28rem .6rem;font:600 .8rem/1.2 var(--sr-schmal);color:#2a2a2e;text-decoration:none;
  background:#e4e4e6;border:1px solid #b5b5b8}
.sr-schieber-chips a:hover{color:var(--akzent);border-color:var(--akzent)}
.sr-schieber-chips a.an{background:var(--akzent);border-color:var(--akzent);color:#fff}
.sr-schieber-chips small{font-weight:400;opacity:.7}
.sr-schieber-suche{position:relative;margin:.3rem 0}
.sr-schieber-suche input{width:100%}
.sr-schieber-gueten{display:inline-flex;gap:.15rem;margin-top:.15rem}
.sr-schieber-gueten button{padding:.05rem .35rem;border:1px solid #8a8a8e;background:transparent;color:#c9c9cc;font-size:.68rem;cursor:pointer;clip-path:none}
.sr-schieber-gueten button.an{border-color:#fdb714;color:#fdb714}
.sr-schieber-verf{font-size:.66rem;color:#a9a9ad}
/* the search fields on the dark page: light text (Roger: the typed text was dark on dark) */
.sr-laden .sr-schieber-suche input,.sr-laden .sr-schieber-suche input:focus{background:#0f0e10;color:#f1efe9;
  border:1px solid #4a484c;caret-color:#fdb714}
.sr-laden .sr-schieber-suche input:focus{border-color:#fdb714;outline:none;box-shadow:0 0 8px rgba(253,183,20,.35)}
.sr-laden .sr-schieber-suche input::placeholder{color:#77757a}
.sr-laden .sr-schieber-chips a{background:#1f1e21;border-color:#4a484c;color:#e8e5de}
.sr-laden .sr-schieber-chips a:hover{color:#fdb714;border-color:#fdb714}
.sr-laden .sr-schieber-chips a.an{background:var(--akzent);border-color:#ff3446;color:#fff;box-shadow:0 0 10px rgba(255,52,70,.5)}
@media(max-width:1100px){
  .sr-laden-tresen{grid-template-columns:13rem minmax(0,1fr)}
  .sr-laden-reklame{grid-column:1 / -1}
  .sr-reklame-kacheln{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sr-laden-theke{grid-template-columns:8rem minmax(0,1fr)}
  .sr-theke-bild{width:8rem;height:8rem}
  .sr-theke-werte{grid-column:1 / -1}
}
@media(max-width:900px){
  .sr-schieber-bau,.sr-laden-tresen{grid-template-columns:1fr}
  .sr-laden-haendler{max-width:17rem}
  .sr-schieber-korb{position:static}
  .sr-schieber-gruppen{grid-template-columns:1fr}
}
/* THE MARKET (28.09.2026, issue #41, karte.php - the menu's "Karte"): the city map and its places. A marker is a round
   picture in the place's colour (--ort-farbe) on a pin, glowing, its name always under it; hovering or
   focusing shows a small card with the line. Placed by per cent of the map picture (translate: the pin's
   tip is the spot). */
.sr-markt-karte{position:relative;margin-top:1rem;border:1px solid #2e2d31;border-radius:4px;overflow:hidden;
  box-shadow:0 0 30px rgba(0,0,0,.8)}
.sr-markt-bild{display:block;width:100%;height:auto}
.sr-markt-ort{position:absolute;z-index:2;display:flex;flex-direction:column;align-items:center;transform:translate(-50%,-100%);
  text-decoration:none}
.sr-ort-pin{position:relative;display:block;width:4.4rem;height:4.4rem;border-radius:50%;border:3px solid var(--ort-farbe);
  background:#0b0a0c;overflow:hidden;transition:transform .15s;
  box-shadow:0 0 10px var(--ort-farbe),0 0 28px color-mix(in srgb,var(--ort-farbe) 55%,transparent)}
.sr-ort-pin img{display:block;width:100%;height:100%;object-fit:cover}
.sr-markt-ort::after{content:"";order:2;width:0;height:0;margin-top:-2px;border-left:.55rem solid transparent;
  border-right:.55rem solid transparent;border-top:.85rem solid var(--ort-farbe);filter:drop-shadow(0 0 6px var(--ort-farbe))}
.sr-ort-name{order:3;margin-top:.25rem;padding:.1rem .4rem;background:rgba(11,10,12,.75);font:700 .72rem/1.2 var(--sr-kopf);
  letter-spacing:.1em;text-transform:uppercase;color:#fff;text-shadow:0 0 6px var(--ort-farbe);white-space:nowrap}
.sr-ort-karte{position:absolute;left:50%;bottom:calc(100% + .5rem);z-index:3;width:max-content;max-width:17rem;
  padding:.45rem .7rem;transform:translateX(-50%);background:rgba(11,10,12,.93);border:1px solid var(--ort-farbe);
  text-align:center;opacity:0;pointer-events:none;transition:opacity .15s}
.sr-ort-karte b{display:block;font:700 .95rem/1.2 var(--sr-kopf);letter-spacing:.06em;text-transform:uppercase;color:var(--ort-farbe)}
.sr-ort-karte small{display:block;margin-top:.15rem;font:400 .82rem/1.3 var(--sr-schmal);color:#d9d6cf}
.sr-markt-ort:hover .sr-ort-pin,.sr-markt-ort:focus-visible .sr-ort-pin{transform:scale(1.12)}
.sr-markt-ort:hover .sr-ort-karte,.sr-markt-ort:focus-visible .sr-ort-karte{opacity:1}
@media(max-width:700px){.sr-ort-pin{width:2.7rem;height:2.7rem;border-width:2px}}
/* THE SHOPS' OWN WORLDS - five since the evening, Jockey 10101 the electronics shop (28.09.2026, issue #41; Roger: "das muss sich richtig unterscheiden,
   farbwelt, hintergrund, rahmen der elemente" - plan in the chat, his "passt": the Straßendoc a LIGHT
   page, the kit's three fonts only, the red head and foot band stay). body class laden-<key>
   (includes/markt.php). Each shop sets its colours as variables (on body.sr-laden.laden-<key> - with one class
   less, body.sr-dunkel's own values, later in this file, won and the doc stayed dark text on white) (--l-*, plus the dark page's own
   --text / --leise / --rand ... and the controls' --knopf-* / --feld-*), the rules below them are
   written once; the frames that differ in shape follow per shop.
     Schieber      back room, pawn shop: rust, brass, oil brown; riveted metal plates, a hazard
                   stripe under the headings, crate labels, a stained thermal receipt
     Straßendoc    clinic: white, ice blue, cyan, a touch of theatre green; a monitor's corner
                   brackets, a fine grid over the ground, a patient chart on a clipboard
     Taliskrämer   herb shop by candlelight: deep green, brass, amber, wine; a double brass line
                   with an ornament in the corners, brass plaques, a parchment note
   THE GROUND is ONE fixed layer (body::after, as everywhere): the shop's picture (laden-hg-<key>,
   ~/persona_data/designs/shadowrun/, via bild.php?dg= - until it exists the colour and gradients
   show alone) under its veil. Rejected: the wash on body::before (27./28.09.2026) - both pseudo
   elements sat at z-index -1 and ::after, painted later, covered it: the moods were almost invisible. */
body.sr-laden.laden-schieber::before,body.sr-laden.laden-doc::before,body.sr-laden.laden-talis::before{display:none}
body.sr-laden.laden-werkstatt::before,body.sr-laden.laden-elektronik::before{display:none}

body.sr-laden.laden-schieber{
  --text:#eadcc4;--leise:#a8977c;--sehr-leise:#7d6f5a;--rand:#5c4830;--karte-fest:#221a12;
  --papier-hell:#2a2119;--papier-tief:#1a140e;--gelb:#d9a441;
  --knopf-text:#e6d3b0;--knopf-grund:#1d1712;--knopf-rand:#7a5f3a;--feld-grund:#15100b;--feld-rand:#5c4830;
  --l-akzent:#d9a441;--l-akzent2:#c8692a;--l-glut:rgba(200,137,74,.35);--l-kopf:#d9a441;
  --l-kachel:#2a2119;--l-kachel-rand:#5c4830;--l-bildgrund:#140f0a;--l-radius:0;
  --l-knopf-an:#d9a441;--l-knopf-an-text:#1a130b;
  --l-platte:linear-gradient(160deg,#3b3127,#2a231b 70%);--l-platte-rand:rgba(217,164,65,.35);--l-platte-text:#f1e4c8;
  --l-platte-kopf:#1c1611;--l-zebra:#4a3e31;--l-linie:#d9a441;
  --l-preis:#e6d9b3;--l-preis-text:#2a2016;--l-bon:#ebe4cf;--l-bon-text:#2a2419;--l-bon-linie:#b9ad8f}
body.sr-laden.laden-doc{
  --text:#1b2a33;--leise:#58707d;--sehr-leise:#8aa0ab;--rand:#c3dbe6;--karte-fest:#ffffff;
  --papier-hell:#ffffff;--papier-tief:#eef5f8;--gelb:#0a8fb3;--akzent-text:#c0303a;
  --knopf-text:#0a6f8c;--knopf-grund:#ffffff;--knopf-rand:#9ec6d6;--feld-grund:#ffffff;--feld-rand:#9ec6d6;
  --l-akzent:#0a8fb3;--l-akzent2:#16a38a;--l-glut:rgba(10,143,179,.22);--l-kopf:#0a6f8c;
  --l-kachel:#ffffff;--l-kachel-rand:#c9dde6;--l-bildgrund:#e8f1f5;--l-radius:8px;
  --l-knopf-an:#0a8fb3;--l-knopf-an-text:#ffffff;
  --l-platte:linear-gradient(160deg,#fbfdfe,#eaf3f7 70%);--l-platte-rand:rgba(10,143,179,.5);--l-platte-text:#1b2a33;
  --l-platte-kopf:#dcedf4;--l-zebra:#eef6f9;--l-linie:#0a8fb3;
  --l-preis:#0a8fb3;--l-preis-text:#ffffff;--l-bon:#ffffff;--l-bon-text:#1b2a33;--l-bon-linie:#d5e6ee}
body.sr-laden.laden-talis{
  --text:#ece3c8;--leise:#b3a986;--sehr-leise:#80785c;--rand:#5d6b3a;--karte-fest:#221e15;
  --papier-hell:#2a2519;--papier-tief:#1b1810;--gelb:#8fb05a;
  --knopf-text:#e3dcbf;--knopf-grund:#252317;--knopf-rand:#6b7a44;--feld-grund:#17150e;--feld-rand:#5d6b3a;
  --l-akzent:#8fb05a;--l-akzent2:#a8503c;--l-glut:rgba(143,176,90,.28);--l-kopf:#cbd99a;
  --l-kachel:rgba(40,34,23,.96);--l-kachel-rand:#5a5236;--l-bildgrund:#14120b;--l-radius:10px;
  --l-knopf-an:#6f8f3e;--l-knopf-an-text:#f6f2de;
  --l-platte:linear-gradient(160deg,#28311d,#1b2214 70%);--l-platte-rand:rgba(143,176,90,.45);--l-platte-text:#ece3c8;
  --l-platte-kopf:#151b0f;--l-zebra:#2e3a22;--l-linie:#8fb05a;
  --l-preis:#e9dfc4;--l-preis-text:#3a2e18;--l-bon:#ecdfbd;--l-bon-text:#3a2e18;--l-bon-linie:#b9a47a;
  --l-schrift:"antiquarian-scribe","optima-nova-lt-pro",Optima,serif}

body.sr-laden.laden-werkstatt{
  --text:#e3e7ea;--leise:#9aa3ab;--sehr-leise:#6d757c;--rand:#4f575e;--karte-fest:#1c2024;
  --papier-hell:#262b30;--papier-tief:#181b1f;--gelb:#a9c4dc;
  --knopf-text:#dde3e8;--knopf-grund:linear-gradient(180deg,#3a4046,#262b30);--knopf-rand:#6b747c;--feld-grund:#15181b;--feld-rand:#4f575e;
  --l-akzent:#a9c4dc;--l-akzent2:#5d7388;--l-glut:rgba(169,196,220,.22);--l-kopf:#d7dde2;
  --l-kachel:#1f2327;--l-kachel-rand:#4a5157;--l-bildgrund:#111316;--l-radius:2px;
  --l-knopf-an:linear-gradient(180deg,#d3dae0,#8d98a2);--l-knopf-an-text:#111416;
  --l-platte:linear-gradient(160deg,#30363c,#23272b 70%);--l-platte-rand:rgba(200,210,220,.35);--l-platte-text:#e3e7ea;
  --l-platte-kopf:#181b1f;--l-zebra:#394046;--l-linie:#a9c4dc;
  --l-preis:#c9d2d9;--l-preis-text:#14171a;--l-bon:#e6eaee;--l-bon-text:#1d2b4f;--l-bon-linie:#a9b4c3}
/* JOCKEY 10101, the electronics shop (28.09.2026): black and phosphor green, one amber LED accent */
body.sr-laden.laden-elektronik{
  --text:#c9f5d2;--leise:#6fae7c;--sehr-leise:#4a7a55;--rand:#1f4a2a;--karte-fest:#07130b;
  --papier-hell:#0c1a10;--papier-tief:#060d08;--gelb:#5dff7a;
  --knopf-text:#9dffb0;--knopf-grund:#08140c;--knopf-rand:#2c7a3e;--feld-grund:#040a06;--feld-rand:#1f4a2a;
  --l-akzent:#5dff7a;--l-akzent2:#ffb13b;--l-glut:rgba(93,255,122,.28);--l-kopf:#7dff95;
  --l-kachel:#08140c;--l-kachel-rand:#1f5a2d;--l-bildgrund:#030805;--l-radius:0;
  --l-knopf-an:#5dff7a;--l-knopf-an-text:#03120a;
  --l-platte:linear-gradient(160deg,#0d2014,#07120b 70%);--l-platte-rand:rgba(93,255,122,.4);--l-platte-text:#c9f5d2;
  --l-platte-kopf:#04100a;--l-zebra:#0f2717;--l-linie:#5dff7a;
  --l-preis:#5dff7a;--l-preis-text:#03120a;--l-bon:#0a120d;--l-bon-text:#7dff95;--l-bon-linie:#1f5a2d}
/* THE GROUND */
html:has(body.laden-schieber){background:#0d0b08}
html:has(body.laden-doc){background:#e6eef2;scrollbar-color:#9ec6d6 transparent}
html:has(body.laden-talis){background:#0e0f09}
html:has(body.laden-werkstatt){background:#111315}
html:has(body.laden-elektronik){background:#030805;scrollbar-color:#2c7a3e transparent}
body.sr-laden.laden-schieber::after{background:
  radial-gradient(ellipse at 25% 0%,rgba(200,137,74,.22),transparent 60%),
  radial-gradient(ellipse at 50% 45%,transparent 45%,rgba(0,0,0,.55) 100%),
  linear-gradient(180deg,rgba(14,10,6,.6),rgba(10,7,4,.8)),
  url("../../bild.php?dg=shadowrun&n=laden-hg-schieber") center/cover no-repeat,#0d0b08}
body.sr-laden.laden-doc::after{background:
  repeating-linear-gradient(0deg,rgba(10,143,179,.07) 0 1px,transparent 1px 28px),
  repeating-linear-gradient(90deg,rgba(10,143,179,.07) 0 1px,transparent 1px 28px),
  radial-gradient(ellipse at 50% 0%,rgba(255,255,255,.7),transparent 60%),
  linear-gradient(180deg,rgba(236,243,247,.62),rgba(226,236,242,.78)),
  url("../../bild.php?dg=shadowrun&n=laden-hg-doc") center/cover no-repeat,#e6eef2}
/* more contrast (Roger: "dafür beim doc etwas mehr kontrast"): a thinner veil (.82/.92 -> .62/.78) and the picture harder */
body.sr-laden.laden-doc::after{filter:contrast(1.15) saturate(1.1)}
body.sr-laden.laden-talis::after{background:
  radial-gradient(ellipse at 50% 10%,rgba(255,180,80,.18),transparent 55%),
  radial-gradient(ellipse at 50% 115%,rgba(70,100,35,.3),transparent 60%),
  radial-gradient(ellipse at 50% 50%,rgba(14,14,8,.48) 30%,rgba(7,8,4,.92) 100%),
  url("../../bild.php?dg=shadowrun&n=laden-hg-talis") center/cover no-repeat,#0e0f09}
/* paler and darker (Roger: "den tali background etwas blasser", "und etwas dunkler") - less colour and contrast on the fixed layer, the veil unchanged */
body.sr-laden.laden-talis::after{filter:saturate(.6) contrast(.85) brightness(.78)}
body.sr-laden.laden-werkstatt::after{background:
  radial-gradient(ellipse at 85% 95%,rgba(120,180,255,.12),transparent 55%),
  radial-gradient(ellipse at 50% 45%,transparent 45%,rgba(0,0,0,.5) 100%),
  linear-gradient(180deg,rgba(18,20,22,.62),rgba(12,13,15,.82)),
  url("../../bild.php?dg=shadowrun&n=laden-hg-werkstatt") center/cover no-repeat,#111315;
  filter:saturate(.55)}
/* Jockey 10101: his back room under CRT scan lines and a dark veil */
body.sr-laden.laden-elektronik::after{background:
  repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px),
  radial-gradient(ellipse at 50% 45%,transparent 40%,rgba(0,0,0,.6) 100%),
  linear-gradient(180deg,rgba(3,10,5,.55),rgba(2,7,4,.82)),
  url("../../bild.php?dg=shadowrun&n=laden-hg-elektronik") center/cover no-repeat,#030805}

/* WRITTEN ONCE, COLOURED PER SHOP */
body.sr-laden .hinweis{color:var(--text)}
body.sr-laden .stand{color:var(--leise)}
body.sr-laden .knopf-link{color:var(--knopf-text);background:var(--knopf-grund);border-color:var(--knopf-rand);border-radius:var(--l-radius)}
body.sr-laden .knopf-link:hover{color:var(--l-akzent);border-color:var(--l-akzent)}
body.sr-laden .sr-kapitel{color:var(--l-kopf);border-bottom-color:var(--l-akzent)}
body.sr-laden .sr-kapitel-flaeche{border-radius:var(--l-radius)}
body.sr-laden .sr-g-hinweis{color:var(--leise)}
body.sr-laden .sr-g-hinweis b{color:var(--l-akzent)}
body.sr-laden .sr-laden-spruch,body.sr-laden .sr-laden-spruch::before{background:var(--karte-fest);border-color:var(--l-akzent);color:var(--text)}
body.sr-laden .sr-laden-geld{color:var(--leise)}
body.sr-laden .sr-laden-geld b{color:var(--l-akzent);text-shadow:0 0 12px var(--l-glut)}
body.sr-laden .sr-haendler-bild,body.sr-laden .sr-kunde-bild{border-color:var(--l-kachel-rand);border-radius:var(--l-radius);
  background:var(--l-bildgrund);box-shadow:0 0 18px var(--l-glut),0 10px 24px rgba(0,0,0,.45)}
body.sr-laden .sr-reklame-kopf{color:var(--leise)}
body.sr-laden .sr-reklame,body.sr-laden .sr-sache,body.sr-laden .sr-konfig,body.sr-laden .sr-theke-orte li{
  background:var(--l-kachel);border-color:var(--l-kachel-rand);color:var(--text);border-radius:var(--l-radius)}
body.sr-laden .sr-reklame{border-top-color:var(--l-akzent2)}
body.sr-laden .sr-konfig{border-left-color:var(--l-akzent2)}
body.sr-laden .sr-reklame:hover,body.sr-laden .sr-sache:hover,body.sr-laden .sr-konfig:hover{border-color:var(--l-akzent);box-shadow:0 0 12px var(--l-glut)}
body.sr-laden .sr-sache.an,body.sr-laden .sr-konfig.an{border-color:var(--l-akzent2);box-shadow:0 0 12px var(--l-glut)}
body.sr-laden .sr-reklame small,body.sr-laden .sr-sache-text small,body.sr-laden .sr-konfig b small{color:var(--leise)}
body.sr-laden .sr-konfig-teile,body.sr-laden .sr-sache-orte em{color:var(--l-akzent)}
body.sr-laden .sr-sache-orte i{border-color:var(--l-akzent)}
body.sr-laden .sr-sache-orte i.voll{background:var(--l-akzent)}
body.sr-laden .sr-reklame-bild,body.sr-laden .sr-sache-bild,body.sr-laden .sr-theke-bild{background:var(--l-bildgrund);border-color:var(--l-kachel-rand)}
body.sr-laden .sr-sachen-reiter{border-bottom-color:var(--rand)}
body.sr-laden .sr-sachen-reiter button,body.sr-laden .sr-schieber-chips a{color:var(--knopf-text);background:var(--knopf-grund);
  border-color:var(--knopf-rand);border-radius:var(--l-radius);box-shadow:none}
body.sr-laden .sr-sachen-reiter button span{color:var(--l-akzent)}
body.sr-laden .sr-sachen-reiter button:hover,body.sr-laden .sr-schieber-chips a:hover{color:var(--l-akzent);border-color:var(--l-akzent)}
body.sr-laden .sr-sachen-reiter button.an,body.sr-laden .sr-schieber-chips a.an{background:var(--l-knopf-an);color:var(--l-knopf-an-text);
  border-color:var(--l-akzent);box-shadow:0 0 10px var(--l-glut)}
body.sr-laden .sr-sachen-reiter button.an span{color:inherit}
body.sr-laden .sr-sachen-reiter .sr-sachen-neu{border-color:var(--l-akzent);color:var(--l-akzent)}
body.sr-laden .sr-sachen-reiter .sr-sachen-neu.an{color:var(--l-knopf-an-text)}
body.sr-laden .sr-schieber-suche input,body.sr-laden .sr-schieber-suche input:focus{background:var(--feld-grund);color:var(--text);
  border-color:var(--feld-rand);caret-color:var(--l-akzent);border-radius:var(--l-radius)}
body.sr-laden .sr-schieber-suche input:focus{border-color:var(--l-akzent);box-shadow:0 0 8px var(--l-glut)}
body.sr-laden .sr-schieber-suche input::placeholder{color:var(--sehr-leise)}
body.sr-laden .sr-preisschild{background:var(--l-preis);color:var(--l-preis-text)}
/* STÖBERN (29.09.2026, Roger: the shop's goods in a lightbox "im shopdesign"): the button in the middle of the tab row,
   the box on the shop's own variables - so the doc's is light and cool, Speedstop's steel. schieber-stoebern.php. */
.sr-sachen-reiter .sr-stoebern-auf{margin-left:auto}
/* Stöbern looks like "Neu kaufen"; both light up on hover - their colour IS the hover colour of the other tabs, so the
   plain colour change showed nothing (Roger: "neu kaufen hat auch kein mouse over mehr") */
body.sr-laden .sr-sachen-reiter .sr-stoebern-auf{border-color:var(--l-akzent);color:var(--l-akzent)}
.sr-sachen-reiter .sr-stoebern-auf:hover,.sr-sachen-reiter .sr-sachen-neu:not(.an):hover,.sr-stoebern-zeile .sr-stoebern-auf:hover{
  box-shadow:0 0 12px var(--l-glut,rgba(253,183,20,.45));filter:brightness(1.3)}
/* at the doc (no tab row): a row of its own above the body, the button centred in the tab buttons' look */
.sr-stoebern-zeile{display:flex;justify-content:center;margin-bottom:.9rem}
.sr-stoebern-zeile .sr-stoebern-auf{padding:.35rem .9rem;border:1px solid var(--l-akzent,#fdb714);background:var(--knopf-grund,#1f1e21);
  color:var(--l-akzent,#fdb714);border-radius:var(--l-radius,0);font:700 .78rem/1.1 var(--sr-schmal);letter-spacing:.06em;
  text-transform:uppercase;cursor:pointer}
.sr-stoebern{width:min(64rem,94vw);max-height:86vh;padding:0;border:1px solid var(--l-platte-rand,#4a484c);border-radius:var(--l-radius,0);
  background:var(--karte-fest,#1f1e21);color:var(--text,#e8e5de);box-shadow:0 18px 60px rgba(0,0,0,.6);overflow:hidden}
.sr-stoebern[open]{display:flex;flex-direction:column}
.sr-stoebern::backdrop{background:rgba(0,0,0,.62)}
.sr-stoebern-kopf{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 1rem .3rem}
.sr-stoebern-kopf .sr-kapitel{margin:0}
.sr-stoebern-ziel{overflow:auto;padding:0 1rem 1rem;min-height:14rem}
.sr-stoebern-ziel[aria-busy]{opacity:.5}
.sr-stoebern-arten,.sr-stoebern-unter{display:flex;flex-wrap:wrap;gap:.3rem;margin:.5rem 0 .6rem}
.sr-stoebern-arten{border-bottom:1px solid var(--rand,#3d3c40);padding-bottom:.5rem}
.sr-stoebern-arten button,.sr-stoebern-unter button,.sr-stoebern-seiten button,.sr-stoebern-zu{padding:.32rem .7rem;
  border:1px solid var(--knopf-rand,#4a484c);background:var(--knopf-grund,#1f1e21);color:var(--knopf-text,#e8e5de);
  border-radius:var(--l-radius,0);font:700 .76rem/1.1 var(--sr-schmal);letter-spacing:.05em;text-transform:uppercase;cursor:pointer}
.sr-stoebern-unter button{font-size:.7rem;text-transform:none;letter-spacing:.02em}
.sr-stoebern-arten button span,.sr-stoebern-unter button span{color:var(--l-akzent,#fdb714);margin-left:.2rem}
.sr-stoebern-arten button:hover,.sr-stoebern-unter button:hover,.sr-stoebern-seiten button:hover:not(:disabled),.sr-stoebern-zu:hover{
  color:var(--l-akzent,#fdb714);border-color:var(--l-akzent,#fdb714)}
.sr-stoebern-arten button.an,.sr-stoebern-unter button.an{background:var(--l-knopf-an,#9a060c);color:var(--l-knopf-an-text,#fff);
  border-color:var(--l-akzent,#ff3446);box-shadow:0 0 10px var(--l-glut,rgba(255,52,70,.4))}
.sr-stoebern-arten button.an span,.sr-stoebern-unter button.an span{color:inherit}
.sr-stoebern-seiten button:disabled{opacity:.35;cursor:default}
.sr-stoebern-liste{width:100%;border-collapse:collapse;background:var(--l-platte,#2a292c);color:var(--l-platte-text,#f1efe9)}
.sr-stoebern-liste th{position:sticky;top:0;z-index:2;background:var(--l-platte-kopf,#231f20);color:var(--l-akzent,#fdb714);text-align:left;
  padding:.4rem .5rem;font:700 .74rem/1.1 var(--sr-schmal);letter-spacing:.05em;text-transform:uppercase;border-bottom:1px solid var(--l-linie,#fdb714)}
.sr-stoebern-liste td{padding:.35rem .5rem;vertical-align:middle}
.sr-stoebern-liste tbody tr{cursor:pointer}
.sr-stoebern-liste tbody tr:nth-child(even){background:var(--l-zebra,rgba(255,255,255,.05))}
.sr-stoebern-liste tbody tr:hover,.sr-stoebern-liste tbody tr:focus-visible{outline:2px solid var(--l-akzent,#fdb714);outline-offset:-2px}
/* the picture as large as the catalogue's (.sr-kbild, 64px - 20.10.2026, Roger: "die produktbilder in der selben größe wie im
   katalog"), the name column narrow, its long names wrapping ("die bezeichnungspalte muss etwas schmaler") */
.sr-stoebern-liste .k-bild{width:70px}
.sr-stoebern-liste .k-bild .sr-sache-bild{width:64px;height:64px}
.sr-stoebern-liste .k-name{width:18%;min-width:8rem}
.sr-stoebern-liste .k-name b{display:block;font:700 .86rem/1.2 var(--sr-schmal)}
.sr-stoebern-liste .k-name small,.sr-stoebern-liste .k-werte{color:var(--leise,#a9a6a0);font-size:.76rem}
.sr-stoebern-liste .k-verf{white-space:nowrap}
.sr-stoebern-liste .k-preis{text-align:right}
/* the start of the description (20.10.2026, ausrAnriss): four lines fit beside the 64px picture, cut with "…" */
.sr-stoebern-liste .k-text{width:44%;min-width:12rem;color:var(--leise,#a9a6a0);font-size:.76rem;line-height:1.3}
.sr-stoebern-liste .k-text span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden}
/* what the customer already has (10.10.2026): "hat 2×" after the name, outlined in the shop's colour */
.sr-stoebern-hat{display:inline-block;margin-left:.35rem;padding:0 .35rem;border:1px solid var(--l-akzent,#fdb714);color:var(--l-akzent,#fdb714);
  font:600 .7rem/1.45 var(--sr-schmal);letter-spacing:.04em;white-space:nowrap;vertical-align:middle}
/* put into the cart (10.10.2026): "+" beside the price, "+2" the second time - persona.js "SCHIEBER: STÖBERN" */
.sr-stoebern-dazu{display:inline-block;min-width:1.4rem;margin-left:.35rem;padding:0 .3rem;text-align:center;
  background:var(--l-akzent,#fdb714);color:#1a1a1a;font:700 .78rem/1.5 var(--sr-schmal)}
.sr-stoebern-seiten{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:.7rem;color:var(--leise,#a9a6a0);font-size:.8rem}
@media (max-width:700px){.sr-stoebern-liste .k-werte,.sr-stoebern-liste .k-text{display:none}}
body.sr-laden .sr-schieber-plus button{border-color:var(--l-akzent);color:var(--l-akzent);background:transparent;border-radius:var(--l-radius)}
body.sr-laden .sr-schieber-plus button:hover{background:var(--l-akzent);color:var(--l-knopf-an-text)}
body.sr-laden .sr-kap-balken{background:var(--l-bildgrund);border-color:var(--rand)}
body.sr-laden .sr-kap-balken i{background:var(--l-akzent)}
body.sr-laden .sr-kap,body.sr-laden .sr-theke-slots{color:var(--leise)}
body.sr-laden .sr-kap b,body.sr-laden .sr-theke-slots b{color:var(--text)}
body.sr-laden .sr-theke-orte li b{color:var(--text)}
body.sr-laden .sr-theke-orte li.frei{border-style:dashed;border-color:var(--l-akzent);background:transparent}
body.sr-laden .sr-theke-orte li.frei b,body.sr-laden .sr-theke-orte li.neu b,body.sr-laden .sr-theke-orte li.neu small{color:var(--l-akzent)}
body.sr-laden .sr-theke-orte li.neu{border-color:var(--l-akzent)}
/* the value boxes (the shelf, "Mit allem"): the plate and its rim in the shop's colours */
body.sr-laden .sr-wertebox{color:var(--l-platte-text)}
body.sr-laden .sr-wertebox::before{background:var(--l-platte)}
body.sr-laden .sr-wertebox::after{background:var(--l-platte-rand)}
body.sr-laden .sr-wertebox h3{color:var(--l-kopf)}
body.sr-laden .sr-wertebox h3 .zahl{color:var(--l-platte-text)}
body.sr-laden .sr-wertebox table{border-bottom-color:var(--l-linie)}
body.sr-laden .sr-wertebox th{background:var(--l-platte-kopf);color:var(--l-kopf)}
body.sr-laden .sr-wertebox tbody tr:nth-child(odd){background:var(--l-zebra)}
body.sr-laden .sr-wertebox td a{color:var(--l-platte-text)}
body.sr-laden .sr-wertebox td a:hover{color:var(--l-akzent)}
body.sr-laden .sr-wertebox td.sr-pz-wirkung,body.sr-laden .sr-wertebox td.sr-pz-preis{color:var(--leise)}
body.sr-laden .sr-wertebox .sr-pz-braucht{color:var(--l-akzent)}
body.sr-laden .sr-schieber-gueten button{border-color:var(--rand);color:var(--leise);background:transparent}
body.sr-laden .sr-schieber-gueten button.an{border-color:var(--l-akzent);color:var(--l-akzent)}
/* the counter */
body.sr-laden .sr-theke-marke{color:var(--l-akzent)}
body.sr-laden .sr-laden-theke h2{color:var(--text)}
body.sr-laden .sr-laden-theke h2 small,body.sr-laden .sr-theke-art,body.sr-laden .sr-theke-teil small{color:var(--leise)}
body.sr-laden .sr-theke-gruppen h4,body.sr-laden .sr-theke-orte h4{color:var(--sehr-leise);border-bottom-color:var(--rand)}
body.sr-laden .sr-theke-teil a{color:var(--text)}
body.sr-laden .sr-theke-teil a:hover,body.sr-laden .sr-theke-teil.neu a{color:var(--l-akzent)}
body.sr-laden .sr-theke-teil.neu{border-left-color:var(--l-akzent)}
/* the receipt: paper, lines and ink per shop */
body.sr-laden .sr-bon{background-color:var(--l-bon);color:var(--l-bon-text)}
body.sr-laden .sr-bon td{border-bottom-color:var(--l-bon-linie)}
body.sr-laden .sr-bon-kopf{border-bottom-color:var(--l-bon-linie)}
body.sr-laden .sr-bon-summe{border-top-color:var(--l-bon-text)}
/* the main button ("Abschließen") in the shop's second colour, not the site's red */
body.sr-laden button.haupt{background:var(--l-akzent2);border-color:var(--l-akzent2);color:#fff}
body.sr-laden button.haupt:hover{filter:brightness(1.12);background:var(--l-akzent2);color:#fff}
body.sr-laden .sr-kap small{color:var(--l-akzent)}
/* MARKET STAGE 3 (28.09.2026): the count of a consumable on the receipt, a focus not yet bonded (tab Ausrüstung) */
.sr-bon-menge{display:inline-flex;align-items:center;gap:.3rem;margin:.2rem 0 0;font-size:.72rem}
.sr-bon-menge input{width:4.2rem;padding:.1rem .3rem;font:inherit}
/* THE CART (09./10.10.2026, round 2): a value box beside the shelf - its lines, the one on the counter marked yellow with
   its parts indented below, − [n] + as one control, "Zur Kasse" across the foot. THE RECEIPT is a <dialog> over the page,
   the same paper as before. Without a piece on the counter the cart stands alone in the right column. */
.sr-wagen table{table-layout:fixed}
.sr-wagen td{vertical-align:top}
.sr-wagen td:first-child{white-space:normal}
.sr-wagen td.sr-bon-preis{width:5.8rem;text-align:right}
.sr-wagen td.sr-bon-weg{width:1.9rem;text-align:right}
.sr-wagen .sr-schieber-verf{color:#c9c9cc}
.sr-wagen tr.sr-wagen-zeile:not(.an){cursor:pointer}
.sr-wagen tr.sr-wagen-zeile:not(.an):hover td{background:#3a3a3c}
.sr-wagen tr.an td{background:#3b3216}
.sr-wagen tr.an td:first-child{box-shadow:inset 3px 0 0 #fdb714}
.sr-wagen tr.an b{color:#fdb714}
.sr-wagen tr.sr-wagen-teil td{background:#2c2a2b;font-size:.8rem}
.sr-wagen tr.sr-wagen-teil td:first-child{padding-left:1.2rem}
.sr-wagen tr.sr-wagen-abschnitt td{padding-top:.55rem;background:transparent;color:#fdb714;font:700 .7rem/1.2 var(--sr-schmal);
  letter-spacing:.14em;text-transform:uppercase}
.sr-wagen tr.verkauf td.sr-bon-preis{color:#7fdc9c}
.sr-wagen .sr-bon-leer{color:#c9c9cc;font-style:italic}
.sr-wagen select{display:block;margin:.25rem 0 0;font:.74rem var(--sr-schmal);background:#111;color:#fff;border:1px solid #77767a}
.sr-wagen .sr-bon-weg button,.sr-wagen .sr-bon-weg a.sr-bon-leeren{width:1.4rem;height:1.4rem;padding:0;border:1px solid #77767a;background:transparent;
  color:#ddd;font:700 .75rem/1 var(--sr-schmal);cursor:pointer;clip-path:none}
.sr-wagen .sr-bon-weg button:hover,.sr-wagen .sr-bon-weg a.sr-bon-leeren:hover{border-color:#fdb714;color:#fdb714}
.sr-wagen .ankreuz{display:flex;margin:.3rem 0 0;color:#ddd}
.sr-bon-menge{display:flex;gap:0;width:max-content;margin:.3rem 0 0}
.sr-bon-menge input{width:3.2rem;text-align:center;border:1px solid #77767a;border-left:0;border-right:0;background:#111;color:#fff;
  -moz-appearance:textfield;appearance:textfield}
.sr-bon-menge input::-webkit-inner-spin-button,.sr-bon-menge input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.sr-bon-menge button{width:1.6rem;padding:0;border:1px solid #77767a;background:transparent;color:#fff;
  font:700 .85rem/1.5 var(--sr-schmal);cursor:pointer;clip-path:none}
.sr-bon-menge button:hover{border-color:#fdb714;color:#fdb714}
.sr-bon-menge button:disabled{opacity:.35;pointer-events:none}
.sr-wagen-summe{display:flex;justify-content:space-between;margin:.6rem 0 .5rem;font:600 .9rem/1.2 var(--sr-schmal);letter-spacing:.04em}
.sr-wagen-summe b{color:#fdb714}
.sr-wagen .schieber-kasse{display:block;width:100%}
.sr-bon-fenster{width:min(30rem,calc(100vw - 32px));max-height:calc(100vh - 3rem);padding:.5rem .5rem 1.2rem;border:0;background:transparent;overflow:auto}
.sr-bon-fenster::backdrop{background:rgba(0,0,0,.7)}
.sr-bon-fenster .sr-bon{transform:none}
.sr-bon-zu{position:absolute;top:.5rem;right:.5rem;width:1.5rem;height:1.5rem;padding:0;border:1px solid #a9a597;background:transparent;color:#4a4842;
  font:700 .8rem/1 var(--sr-schmal);cursor:pointer;clip-path:none}
.sr-bon-zu:hover{border-color:#b3121c;color:#b3121c}
.sr-bon-fenster .schieber-kaufen{margin-top:.6rem}
@media(min-width:901px){
  .sr-schieber-bau.nur-wagen{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}
  .sr-schieber-bau.nur-wagen .sr-schieber-korb{grid-column:2}
}
.sa-ungebunden{display:inline-block;margin:.15rem 0 0;padding:.05rem .4rem;border:1px dashed #fdb714;color:#fdb714;
  font:600 .66rem/1.3 var(--sr-schmal);font-style:normal;letter-spacing:.06em;text-transform:uppercase}
/* LEARNING AND BONDING ON THE CARD (28.09.2026, ausr-oben.php $saMagie): the yellow action button, why not
   in red under it, "gelernt" like "ungebunden" but solid; a formula without a spell gets the dark search box */
.sa-magie{margin:.35rem 0 0}
.sa-magie button{padding:.28rem .5rem;background:#fdb714;border:1px solid #fdb714;border-radius:0;color:#231f20;
  font:700 .66rem/1 var(--sr-schmal);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;clip-path:none}
.sa-magie button:disabled{background:#3a393c;border-color:#58595b;color:#c9c9cc;cursor:default}
.sa-magie button.sa-magie-leise{background:#3a393c;border-color:#58595b;color:#fff}
.sa-magie-warn{margin:.2rem 0 0;font:400 .74rem/1.25 var(--sr-schmal);color:#ff6b74}
.sa-magie-frage{margin:0;font:600 .76rem/1.25 var(--sr-schmal);color:#fdb714}
.sa-gelernt{display:inline-block;padding:.05rem .4rem;background:#fdb714;color:#231f20;
  font:700 .66rem/1.3 var(--sr-schmal);font-style:normal;letter-spacing:.06em;text-transform:uppercase}
.sa-magie .sa-treffer button{background:none;border:none;color:#fff;text-transform:none;letter-spacing:0;font:400 .85rem var(--sr-schmal);text-align:left}
/* A QI FOCUS'S SKILL AS A DROPDOWN (30.09.2026, Roger: the big yellow buttons were "sehr unschön", "dropdown wäre besser"):
   the summary a dark field with the chosen skill and ▾, the list opening IN the card under it - the card carries a
   clip-path (its cut corner), so a list floating out of it would be cut off (ausr-oben.php) */
.sa-magie .sa-qi-wahl{display:inline-block;margin:.3rem .5rem 0 0;vertical-align:top}
.sa-magie .sa-qi-wahl summary{display:inline-flex;align-items:center;gap:.5rem;min-width:9rem;padding:.25rem .5rem;cursor:pointer;list-style:none;
  background:#3a393c;border:1px solid #58595b;color:#fff;font:700 .66rem/1.2 var(--sr-schmal);letter-spacing:.08em;text-transform:uppercase}
.sa-magie .sa-qi-wahl summary::after{content:"▾";margin-left:auto;color:#fdb714}
.sa-magie .sa-qi-wahl summary::-webkit-details-marker{display:none}
.sa-magie .sa-qi-fert{min-width:100%;max-height:16rem;overflow:auto;margin:0;padding:.2rem 0;
  list-style:none;background:#262527;border:1px solid #58595b;border-top:0}
.sa-magie .sa-qi-fert button{display:block;width:100%;padding:.3rem .6rem;background:none;border:0;color:#fff;text-align:left;
  font:600 .72rem/1.2 var(--sr-schmal);letter-spacing:.04em;text-transform:none}
.sa-magie .sa-qi-fert button:hover,.sa-magie .sa-qi-fert button:focus-visible{background:#58595b}
.sa-magie .sa-qi-fert button[aria-pressed="true"]{color:#fdb714}
/* A FAKE LICENCE'S PURPOSE (30.09.2026, ausr-oben.php $saLizenz): a dark text field, the SIN dropdown under it */
.sa-lizenz input[data-tu="zweck"]{display:block;width:100%;box-sizing:border-box;margin:0 0 .1rem;padding:.25rem .45rem;background:#3a393c;
  border:1px solid #58595b;border-radius:0;color:#fff;font:600 .74rem/1.2 var(--sr-schmal)}
.sa-lizenz input[data-tu="zweck"]::placeholder{color:#a9a9ad;font-weight:400}
.sa-lizenz input[data-tu="zweck"]:focus{outline:1px solid #fdb714;outline-offset:0}
/* the SIN card's bought SINs and licences (reiter-werte.php) */
.sr-sin-stuecke{margin:.4rem 0 0;padding:0;list-style:none;font:400 .82rem/1.35 var(--sr-schmal)}
.sr-sin-stuecke>li{margin:.25rem 0 0}
.sr-sin-stuecke b{font-weight:700}
.sr-sin-stuecke ul{margin:.1rem 0 0 .9rem;padding:0;list-style:none}
.sr-sin-stuecke .leer{color:#9a060c}
/* THE DOC'S BODY VIEW AND SURGERY (28.09.2026, market stage 2): the tab Ausrüstung's view "Cyberware"
   (.sa-cyber, .sa-essenz, .sa-figur) around her implants, a region = heading, cards, a search; each card
   with "ausbauen" beside it; on the receipt the essence before / after and the surgery's boxes */
.sr-doc-koerper .sa-figur{height:46rem}
.sr-doc-region{margin:0 0 1.1rem}
.sr-doc-region h4{margin:0 0 .45rem;padding-bottom:.25rem;font:700 .78rem/1.1 var(--sr-schmal);letter-spacing:.12em;text-transform:uppercase;
  color:var(--l-kopf);border-bottom:1px solid var(--rand)}
.sr-doc-region h4 span{margin-left:.3rem;color:var(--leise);font-weight:400}
.sr-doc-karte{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.35rem;align-items:center;margin:0 0 .4rem}
.sr-doc-weg{padding:.3rem .55rem;border:1px solid var(--knopf-rand);border-radius:var(--l-radius);background:var(--knopf-grund);color:var(--knopf-text);
  font:700 .68rem/1.2 var(--sr-schmal);letter-spacing:.06em;text-transform:uppercase;text-decoration:none}
.sr-doc-weg:hover{border-color:#c0303a;color:#c0303a}
.sr-doc-neu input{font-size:.8rem}
.sr-bon-op{margin:.4rem 0 0;font-size:.8rem}
.sr-bon-op span{margin-right:.35rem;font-weight:700;font-size:.68rem;letter-spacing:.08em;text-transform:uppercase}
.sr-bon-op small{display:block;margin-top:.1rem;font-size:.7rem;opacity:.8}
@media(max-width:880px){.sr-doc-koerper{grid-template-columns:4.5rem minmax(0,1fr)}.sr-doc-koerper .sa-figur{display:none}
  .sr-doc-koerper .sa-seite + .sa-figur + .sa-seite{grid-column:2}}

/* ---- SCHIEBER: the back room ---- */
body.laden-schieber .leiste h1{color:#f0d9a8;text-shadow:0 0 4px #c8894a,0 0 14px rgba(200,137,74,.7),0 0 36px rgba(200,137,74,.3)}
body.laden-schieber .sr-laden-schild{border-color:#a8763f;box-shadow:0 0 6px rgba(200,137,74,.9),0 0 24px rgba(200,137,74,.45),inset 0 0 10px rgba(200,137,74,.4)}
/* riveted metal plates: four rivets in the corners, brushed steel, an oil-dark ground */
body.laden-schieber .sr-kapitel-flaeche,body.laden-schieber .sr-laden-theke{border:2px solid #4d3c29;
  box-shadow:inset 0 1px 0 rgba(255,230,190,.08),0 8px 18px rgba(0,0,0,.6);background:
  radial-gradient(circle at 9px 9px,#b59a70 0 2px,#2a2016 2.5px 3.5px,transparent 4px),
  radial-gradient(circle at calc(100% - 9px) 9px,#b59a70 0 2px,#2a2016 2.5px 3.5px,transparent 4px),
  radial-gradient(circle at 9px calc(100% - 9px),#b59a70 0 2px,#2a2016 2.5px 3.5px,transparent 4px),
  radial-gradient(circle at calc(100% - 9px) calc(100% - 9px),#b59a70 0 2px,#2a2016 2.5px 3.5px,transparent 4px),
  repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 2px,transparent 2px 5px),
  linear-gradient(180deg,#2c241b,#1d1812)}
body.laden-schieber .sr-laden-theke{border-top:3px solid #c8692a}
body.laden-schieber .sr-laden-theke::after{background:linear-gradient(180deg,#4a3826,#231a11)}
/* the headings: brass, a hazard stripe instead of the red rule */
body.laden-schieber .sr-kapitel{border-bottom:0;padding-bottom:.6rem;
  background:repeating-linear-gradient(-45deg,#d9a441 0 7px,#17120c 7px 14px) left bottom/100% 5px no-repeat}
/* crate labels */
body.laden-schieber .sr-sache,body.laden-schieber .sr-konfig,body.laden-schieber .sr-reklame{border-left:4px solid #c8692a}
body.laden-schieber .sr-reklame{border-top:1px solid var(--l-kachel-rand)}
body.laden-schieber .sr-reklame-kopf span{border:0;border-radius:0;background:#c8692a;color:#1a130b;text-shadow:none;box-shadow:0 2px 0 #6b3a14}
/* the price tag: a strip of masking tape */
body.laden-schieber .sr-preisschild{clip-path:none;padding:.1rem .5rem;transform:rotate(-2deg);box-shadow:0 1px 3px rgba(0,0,0,.5)}
body.laden-schieber .sr-regal{box-shadow:0 13px 0 -5px #5a3f24,0 20px 14px -6px rgba(0,0,0,.8)}
body.laden-schieber .sr-haendler-bild{border:3px solid #3a2c1e}
/* the receipt: stained thermal paper */
body.laden-schieber .sr-bon{background-image:
  radial-gradient(circle at 82% 18%,rgba(150,110,60,.2) 0 16px,transparent 30px),
  radial-gradient(circle at 18% 72%,rgba(120,90,50,.15) 0 24px,transparent 42px)}
body.laden-schieber .sr-bon::after{background:linear-gradient(135deg,#ebe4cf 50%,transparent 50%) 0 0/12px 9px repeat-x,
  linear-gradient(-135deg,#ebe4cf 50%,transparent 50%) 0 0/12px 9px repeat-x}

/* ---- STRASSENDOC: the clinic, a light page ---- */
body.laden-doc .leiste h1{color:#0a6f8c;text-shadow:none}
body.laden-doc .sr-laden-schild{background:#fff;border:2px solid #0a8fb3;border-radius:10px;animation:none;
  box-shadow:0 0 0 4px rgba(10,143,179,.12),0 8px 24px rgba(10,80,110,.18)}
body.laden-doc .sr-laden-neonschrift span{color:#0a8fb3;text-shadow:0 0 14px rgba(10,165,201,.45)}
/* the monitor frame: corner brackets in cyan on a white glass pane */
body.laden-doc .sr-kapitel-flaeche,body.laden-doc .sr-laden-theke{--c:#0a8fb3;border:1px solid #c3dbe6;border-radius:2px;
  box-shadow:0 6px 20px rgba(20,70,100,.12);background:
  linear-gradient(var(--c),var(--c)) 0 0/18px 2px no-repeat,linear-gradient(var(--c),var(--c)) 0 0/2px 18px no-repeat,
  linear-gradient(var(--c),var(--c)) 100% 0/18px 2px no-repeat,linear-gradient(var(--c),var(--c)) 100% 0/2px 18px no-repeat,
  linear-gradient(var(--c),var(--c)) 0 100%/18px 2px no-repeat,linear-gradient(var(--c),var(--c)) 0 100%/2px 18px no-repeat,
  linear-gradient(var(--c),var(--c)) 100% 100%/18px 2px no-repeat,linear-gradient(var(--c),var(--c)) 100% 100%/2px 18px no-repeat,
  rgba(255,255,255,.92)}
body.laden-doc .sr-laden-theke{border-top:3px solid #0a8fb3}
body.laden-doc .sr-laden-theke::after{background:linear-gradient(180deg,#d4e2ea,#b9cbd5)}
/* the headings: thin, spaced, a medical cross in front */
body.laden-doc .sr-kapitel{font:400 1.15rem/1 var(--sr-schmal);letter-spacing:.22em;border-bottom:1px solid #0a8fb3}
body.laden-doc .sr-kapitel::before{content:"+";display:inline-block;width:1.15rem;height:1.15rem;margin-right:.55rem;
  background:#16a38a;color:#fff;font:700 1rem/1.15rem var(--sr-schmal);text-align:center;letter-spacing:0;border-radius:2px;vertical-align:.08em}
body.laden-doc .sr-reklame-kopf span{border:2px solid #16a38a;border-radius:6px;background:#e9f7f3;color:#0b6f5e;text-shadow:none;box-shadow:none}
body.laden-doc .sr-preisschild{clip-path:none;padding:.08rem .45rem;border-radius:3px}
body.laden-doc .sr-reklame,body.laden-doc .sr-sache,body.laden-doc .sr-konfig{box-shadow:0 2px 8px rgba(20,70,100,.08)}
body.laden-doc .sr-reklame-bild.sa-sym::before,body.laden-doc .sr-sache-bild.sa-sym::before,body.laden-doc .sr-theke-bild.sa-sym::before{color:#9eb8c4}
/* the shelf: glass, lit from below like a fridge */
body.laden-doc .sr-regal{box-shadow:0 12px 0 -6px rgba(10,143,179,.3),0 18px 18px -8px rgba(10,80,110,.25)}
body.laden-doc .sr-wertebox{filter:drop-shadow(2px 3px 3px rgba(20,70,100,.15))}
body.laden-doc .sr-haendler-bild{border-radius:10px}
body.laden-doc .sr-laden-spruch{color:#0a4f66}
body.laden-doc .sr-laden-geld b{text-shadow:none}
/* the receipt: a patient chart on a clipboard */
body.laden-doc .sr-bon{transform:none;padding-top:1.9rem;border:1px solid #c3dbe6;border-radius:4px;font:.84rem/1.45 var(--sr-schmal);
  box-shadow:0 10px 26px rgba(20,70,100,.2);
  background-image:repeating-linear-gradient(180deg,transparent 0 1.4rem,rgba(10,143,179,.1) 1.4rem calc(1.4rem + 1px))}
body.laden-doc .sr-bon::after{top:-.6rem;bottom:auto;left:50%;right:auto;width:5.5rem;height:1.25rem;transform:translateX(-50%);
  background:linear-gradient(180deg,#c3ced4,#7f8c94);border-radius:5px 5px 2px 2px;box-shadow:0 2px 4px rgba(0,0,0,.25)}
body.laden-doc .sr-bon select{font-family:var(--sr-schmal)}
body.laden-doc .sr-bon .sr-schieber-gueten button.an{background:#0a8fb3;border-color:#0a8fb3;color:#fff}
body.laden-doc .sr-warnung.hell{color:#c0303a}
/* the body view in the clinic: the figure turned cold (the red tint baked into koerper-m / -w3.webp, hue-rotated),
   the essence bar on a white card */
body.laden-doc .sr-doc-koerper .sa-figur::before{filter:hue-rotate(180deg) saturate(.7);opacity:.5}
/* the new implant on the counter at its place (29.09.2026): a dashed card, "neu · auf der Theke" */
.sr-doc-karte-neu .sr-sache{border-style:dashed;border-color:var(--l-akzent,#fdb714)}
.sr-doc-karte-neu .sr-sache small{color:var(--l-akzent,#fdb714)}
body.laden-doc .sr-doc-koerper .sa-essenz{background:#fff;color:#1b2a33;border:1px solid #c3dbe6;border-radius:6px;clip-path:none;
  box-shadow:0 4px 14px rgba(20,70,100,.12)}

/* ---- TALISKRAEMER: herbs, moss and candlelight (28.09.2026, second round - Roger: "etwas mehr
   naturverbunden, die schrift schnörkeliger"): moss and leaf green, bark and earth brown, honey,
   rosehip; the headings, the sign and the counter in Antiquarian Scribe (its own kit, see
   kopf.php); a leaf sprig in two corners of every surface, a vine instead of a rule under the
   headings, wood grain in the plates, pill-shaped seed labels for the buttons. Rejected: brass
   double lines, ornaments and Optima small capitals (the first round the same day - "zu wenig natur"). */
body.laden-talis .leiste h1{font:400 2.1rem/1.1 var(--l-schrift);text-transform:none;letter-spacing:.01em;color:#dfe8b8;
  text-shadow:0 0 10px rgba(255,190,90,.35),0 2px 3px rgba(0,0,0,.6)}
/* the sign: a wooden board, the name written on it, lit by candles */
body.laden-talis .sr-laden-schild{border:2px solid #5d4a2c;border-radius:12px;animation:sr-kerze 5s infinite;
  background:repeating-linear-gradient(90deg,rgba(255,230,180,.035) 0 2px,transparent 2px 9px),linear-gradient(180deg,#3b2c1a,#241a0f);
  box-shadow:0 0 22px rgba(255,170,60,.25),inset 0 0 18px rgba(0,0,0,.5)}
body.laden-talis .sr-laden-neonschrift span{font:400 clamp(2.4rem,6vw,4rem)/1.1 var(--l-schrift);text-transform:none;letter-spacing:.02em;
  color:#f1e6bf;text-shadow:0 0 8px rgba(255,190,90,.7),0 0 26px rgba(255,150,50,.35)}
@keyframes sr-kerze{0%,100%{opacity:1}30%{opacity:.94}32%{opacity:.98}60%{opacity:.96}62%{opacity:1}}
@media (prefers-reduced-motion:reduce){body.laden-talis .sr-laden-schild{animation:none}}
/* every surface: dark wood with a soft moss edge, round corners, a leaf sprig bottom right (top left too
   until Roger's "die blätter oben links weg" the same day - it sat on the vine under the heading) */
body.laden-talis .sr-kapitel-flaeche,body.laden-talis .sr-laden-theke{position:relative;border:1px solid #5d6b3a;
  box-shadow:0 10px 26px rgba(0,0,0,.55),inset 0 0 24px rgba(90,110,50,.12);
  background:repeating-linear-gradient(93deg,rgba(255,240,200,.022) 0 3px,transparent 3px 12px),
  linear-gradient(180deg,rgba(38,33,22,.95),rgba(25,22,14,.96))}
body.laden-talis .sr-kapitel-flaeche::after{content:"";position:absolute;z-index:1;
  width:46px;height:46px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46' viewBox='0 0 46 46'%3E%3Cpath d='M3 43 C14 32 24 21 42 4' fill='none' stroke='%237d9a4a' stroke-width='1.5'/%3E%3Cg fill='%238fb05a'%3E%3Cpath d='M13 33c-6-1-9-6-9-10 5 1 9 5 9 10z'/%3E%3Cpath d='M13 33c1-6 6-9 10-9-1 5-5 9-10 9z'/%3E%3Cpath d='M23 22c-6-1-9-6-9-10 5 1 9 5 9 10z'/%3E%3Cpath d='M23 22c1-6 6-9 10-9-1 5-5 9-10 9z'/%3E%3Cpath d='M34 11c-4-1-7-4-7-8 4 1 7 4 7 8z'/%3E%3C/g%3E%3Ccircle cx='31' cy='16' r='1.8' fill='%23a8503c'/%3E%3C/svg%3E") center/contain no-repeat;pointer-events:none}
body.laden-talis .sr-kapitel-flaeche::after{bottom:-20px;right:-20px;transform:scaleX(-1)}
body.laden-talis .sr-laden-theke{border-top:3px solid #6b5230;background:
  repeating-linear-gradient(90deg,rgba(255,230,180,.03) 0 2px,transparent 2px 10px),linear-gradient(180deg,#34261a,#1c140c)}
body.laden-talis .sr-laden-theke::after{background:linear-gradient(180deg,#4d3a22,#23190e);border-radius:0 0 8px 8px}
/* the headings: the script, young green, a vine under them */
body.laden-talis .sr-kapitel{font:400 1.7rem/1.15 var(--l-schrift);text-transform:none;letter-spacing:.01em;border-bottom:0;
  padding-bottom:.75rem;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='12' viewBox='0 0 64 12'%3E%3Cpath d='M0 6C11 0 21 12 32 6S53 0 64 6' fill='none' stroke='%237d9a4a' stroke-width='1.4'/%3E%3Cpath d='M16 4c-2-4 1-5 4-4-1 3-2 4-4 4zM48 8c2 4-1 5-4 4 1-3 2-4 4-4z' fill='%238fb05a'/%3E%3C/svg%3E") left bottom/64px 12px repeat-x}
body.laden-talis .sr-kapitel::before{content:"❧";margin-right:.4rem;color:#8fb05a;font:400 1.1rem/1 "Segoe UI Symbol",serif;
  display:inline-block;transform:rotate(-20deg)}
body.laden-talis .sr-laden-theke h2{font:400 1.8rem/1.15 var(--l-schrift);letter-spacing:.01em}
/* "Sonderangebote" as a heading like "Kundschaft", no label around it (Roger: "die schrift geht nur als
   überschriften" - the script in a pill did not fit) */
body.laden-talis .sr-reklame-kopf span{border:0;border-radius:0;background:none;color:var(--l-kopf);text-shadow:none;box-shadow:none;
  font:400 1.7rem/1.15 var(--l-schrift);letter-spacing:.01em;padding:0;margin-right:.6rem;text-transform:none}
/* buttons, tabs, chips: seed labels */
body.laden-talis .sr-sachen-reiter button,body.laden-talis .sr-schieber-chips a,body.laden-talis .knopf-link{border-radius:999px;
  font-family:var(--serif);letter-spacing:.05em}
body.laden-talis .sr-reklame{border-top:3px solid #6f8f3e}
body.laden-talis .sr-regal{box-shadow:0 13px 0 -5px #4d3a22,0 20px 14px -6px rgba(0,0,0,.8)}
body.laden-talis .sr-haendler-bild{border:2px solid #5d4a2c;border-radius:14px}
body.laden-talis .sr-laden-spruch{font-family:var(--serif);font-style:italic;border-radius:10px}
/* the receipt: a note on parchment, headed in the script */
body.laden-talis .sr-bon{transform:rotate(-.7deg);border-radius:3px;font:italic 600 .9rem/1.45 var(--serif);background-image:
  radial-gradient(ellipse at 85% 12%,rgba(140,100,40,.2) 0 20px,transparent 42px),
  radial-gradient(ellipse at 10% 88%,rgba(90,110,40,.16) 0 26px,transparent 50px),
  linear-gradient(180deg,rgba(255,250,230,.35),rgba(160,120,60,.12))}
body.laden-talis .sr-bon::after{background:linear-gradient(135deg,#ecdfbd 50%,transparent 50%) 0 0/12px 9px repeat-x,
  linear-gradient(-135deg,#ecdfbd 50%,transparent 50%) 0 0/12px 9px repeat-x}
body.laden-talis .sr-bon-kopf{font:400 1.5rem/1.1 var(--l-schrift);letter-spacing:.01em;text-transform:none}
body.laden-talis .sr-bon-kopf small{font:italic .78rem/1.3 var(--serif)}
body.laden-talis .sr-bon td{border-bottom-style:dotted}

/* ---- WERKSTATT: the vehicle workshop (28.09.2026, Roger: "farbwelt grau, metall, stahl") - grey steel
   and gunmetal, one cold accent of welding light; diamond-plate surfaces with a bevel, headings in
   Microgramma on a steel bar whose first part is lit, steel tags, the receipt a work order on continuous
   form paper (tractor holes, carbon-blue type). ---- */
body.laden-werkstatt .leiste h1{color:#e1e7ec;letter-spacing:.16em;text-shadow:0 1px 0 #000,0 0 14px rgba(169,196,220,.25)}
/* the sign: a brushed steel plate, the name stamped in, no neon */
body.laden-werkstatt .sr-laden-schild{animation:none;border:2px solid #7c8791;border-radius:4px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0 1px,transparent 1px 3px),linear-gradient(180deg,#5b636b,#353b41);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -2px 0 rgba(0,0,0,.45),0 10px 24px rgba(0,0,0,.6)}
body.laden-werkstatt .sr-laden-neonschrift span{color:#eef2f5;letter-spacing:.3em;text-shadow:0 -1px 0 rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.25)}
/* every surface: diamond plate with a bevel */
body.laden-werkstatt .sr-kapitel-flaeche,body.laden-werkstatt .sr-laden-theke{border:1px solid #5a636b;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -2px 0 rgba(0,0,0,.4),0 8px 18px rgba(0,0,0,.55);background:
  repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 2px,transparent 2px 12px),
  repeating-linear-gradient(-45deg,rgba(0,0,0,.22) 0 2px,transparent 2px 12px),
  linear-gradient(180deg,rgba(45,50,55,.96),rgba(31,35,39,.97))}
body.laden-werkstatt .sr-laden-theke{border-top:3px solid #8d98a2}
body.laden-werkstatt .sr-laden-theke::after{background:linear-gradient(180deg,#6b747c,#2b3034)}
/* the headings: a steel bar under them, its first part lit */
body.laden-werkstatt .sr-kapitel{letter-spacing:.1em;border-bottom:0;padding-bottom:.55rem;
  background:linear-gradient(90deg,#a9c4dc 0 3rem,#6b747c 3rem) left bottom/100% 3px no-repeat}
body.laden-werkstatt .sr-reklame-kopf span{border:1px solid #8d98a2;border-radius:2px;background:linear-gradient(180deg,#4a5157,#2b3034);
  color:#eef2f5;text-shadow:0 -1px 0 #000;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
/* steel tags */
body.laden-werkstatt .sr-sache,body.laden-werkstatt .sr-konfig,body.laden-werkstatt .sr-reklame{border-top:2px solid #6b747c;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
body.laden-werkstatt .sr-reklame{border-top-color:#a9c4dc}
body.laden-werkstatt .sr-regal{box-shadow:0 12px 0 -5px #5a636b,0 20px 14px -6px rgba(0,0,0,.8)}
body.laden-werkstatt .sr-haendler-bild{border:2px solid #5a636b}
/* the receipt: a work order on continuous form paper - tractor holes down the left, carbon-blue type */
body.laden-werkstatt .sr-bon{transform:none;padding-left:2rem;background-image:
  radial-gradient(circle at 12px 14px,#8e979f 0 3.5px,transparent 4px),
  repeating-linear-gradient(180deg,transparent 0 1.35rem,rgba(29,43,79,.08) 1.35rem calc(1.35rem + 1px))}
body.laden-werkstatt .sr-bon{background-size:24px 28px,auto;background-repeat:repeat-y,repeat}
body.laden-werkstatt .sr-bon::after{background:linear-gradient(135deg,#e6eaee 50%,transparent 50%) 0 0/12px 9px repeat-x,
  linear-gradient(-135deg,#e6eaee 50%,transparent 50%) 0 0/12px 9px repeat-x}

/* ---- JOCKEY 10101: the electronics shop (28.09.2026, Roger: "für decker ... elektronik laden"; the plan's
   "Schwarz mit Phosphorgrün, Platinen-Muster, Bildschirmzeilen") - every surface a dark circuit board with
   copper-green traces, headings as a terminal line with a blinking block cursor, square LED tags, the
   receipt a green-on-black terminal printout. ---- */
body.laden-elektronik .leiste h1{color:#7dff95;letter-spacing:.14em;text-shadow:0 0 10px rgba(93,255,122,.55)}
body.laden-elektronik .sr-laden-schild{animation:none;border:1px solid #2c7a3e;border-radius:0;box-shadow:0 0 18px rgba(93,255,122,.25)}
body.laden-elektronik .sr-laden-neonschrift span{color:#7dff95;font-family:var(--sr-kopf);text-shadow:0 0 12px rgba(93,255,122,.8)}
/* every surface: a circuit board - a fine grid of traces, a few brighter vias */
body.laden-elektronik .sr-kapitel-flaeche,body.laden-elektronik .sr-laden-theke{border:1px solid #1f5a2d;
  box-shadow:0 0 0 1px rgba(0,0,0,.6),0 8px 20px rgba(0,0,0,.7),inset 0 0 24px rgba(93,255,122,.06);background:
  radial-gradient(circle at 18px 18px,rgba(93,255,122,.22) 0 1.5px,transparent 2px) 0 0/72px 72px,
  repeating-linear-gradient(90deg,rgba(93,255,122,.05) 0 1px,transparent 1px 24px),
  repeating-linear-gradient(0deg,rgba(93,255,122,.05) 0 1px,transparent 1px 24px),
  linear-gradient(180deg,rgba(8,20,12,.95),rgba(4,12,7,.97))}
body.laden-elektronik .sr-laden-theke{border-top:2px solid #5dff7a}
body.laden-elektronik .sr-laden-theke::after{background:linear-gradient(180deg,#2c7a3e,#07120b)}
/* the headings: a terminal prompt with a blinking block cursor */
body.laden-elektronik .sr-kapitel{border-bottom:1px solid #1f5a2d;letter-spacing:.08em;color:#7dff95;text-shadow:0 0 8px rgba(93,255,122,.45)}
body.laden-elektronik .sr-kapitel::before{content:"> ";color:#ffb13b}
body.laden-elektronik .sr-kapitel::after{content:"";display:inline-block;width:.55em;height:1em;margin-left:.3em;vertical-align:-.12em;
  background:#5dff7a;animation:sr-jockey-cursor 1.1s steps(1) infinite}
@keyframes sr-jockey-cursor{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){body.laden-elektronik .sr-kapitel::after{animation:none}}
body.laden-elektronik .sr-reklame-kopf span{border:1px solid #5dff7a;background:#04100a;color:#7dff95;text-shadow:0 0 8px rgba(93,255,122,.7)}
/* square LED tags */
body.laden-elektronik .sr-sache,body.laden-elektronik .sr-konfig,body.laden-elektronik .sr-reklame{border-left:3px solid #2c7a3e;
  box-shadow:inset 0 0 12px rgba(93,255,122,.05)}
body.laden-elektronik .sr-reklame{border-left-color:#ffb13b}
body.laden-elektronik .sr-regal{box-shadow:0 12px 0 -5px #1f5a2d,0 20px 14px -6px rgba(0,0,0,.85)}
body.laden-elektronik .sr-haendler-bild{border:1px solid #2c7a3e;box-shadow:0 0 16px rgba(93,255,122,.2)}
/* the receipt: a terminal printout, green on black, scan lines */
body.laden-elektronik .sr-bon{transform:none;font-family:"Courier New",monospace;box-shadow:0 0 18px rgba(93,255,122,.18);background-image:
  repeating-linear-gradient(0deg,rgba(93,255,122,.05) 0 1px,transparent 1px 3px)}
body.laden-elektronik .sr-bon::after{background:linear-gradient(135deg,#0a120d 50%,transparent 50%) 0 0/12px 9px repeat-x,
  linear-gradient(-135deg,#0a120d 50%,transparent 50%) 0 0/12px 9px repeat-x}
body.laden-elektronik .sr-bon-kopf{color:#7dff95;text-shadow:0 0 8px rgba(93,255,122,.6)}

/* THE SIGN PICTURE (28.09.2026): the flat box keeps its height; the sign whole in the middle (contain), the same
   picture - the box's inline background-image - blurred and darkened behind it on ::before, so the box is filled */
body.sr-laden .sr-laden-schild.sr-laden-bildschild{position:relative;overflow:hidden;height:6rem;padding:0;
  background-size:0 0;background-repeat:no-repeat}
.sr-laden-bildschild::before{content:"";position:absolute;inset:-24px;background-image:inherit;background-size:cover;
  background-position:center;filter:blur(16px) brightness(.5)}
/* the whole width, cut at top and bottom (Roger: "das kann auch angeschnitten sein" - contain left the sign at
   about 40 % of the width); the blurred ::before stays as the ground while the picture loads */
.sr-laden-schild.sr-laden-bildschild img{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:cover;object-position:center 50%;border-radius:0}
/* a shop without a sign picture: its name as the sign's writing */
.sr-laden-neonschrift{display:flex;align-items:center;justify-content:center;min-height:5.5rem}
.sr-laden-neonschrift span{font:700 clamp(1.8rem,5vw,3.2rem)/1 var(--sr-kopf);letter-spacing:.22em;text-transform:uppercase;color:#fff}
@media(max-width:900px){
  .sr-g-spalten{grid-template-columns:1fr;gap:1.8rem}
  .sr-g-spalten .sr-g-block,.sr-g-spalten .sr-g-streifen{grid-column:1;grid-row:auto}
  .sr-g-werte{order:1}
  .sr-g-traeger{order:2}
  .sr-g-streifen{order:3}
  .sr-g-beschreibung{order:4}
  .sr-g-regel{order:5;min-height:0}
  .sr-g-regel-innen{position:static}
  .sr-g-regel .regel-text{max-height:26rem}
}
/* THE DESCRIPTION IN THE HEAD (25.09.2026, the split: "das feld beschreibung sitzt oben im
   kopf und ist editierbar (mit zauberstab)") - a field in the middle plate, titled like the
   sheet's excerpt label, the wand to the right. */
.sr-g-kopffeld{margin-top:.6rem;display:grid;gap:.35rem}
/* WHAT IT DOES IN PLAY (18.10.2026, Wirkungstext): a line above the description, its mark as a quiet tag; a rule the
   server does not compute yet in the accent's red. */
.sr-g-wirkung{margin:.5rem 0 0;font:400 .9rem/1.45 var(--serif)}
.sr-g-wirkung b{margin-right:.35rem;font:700 .62rem/1 var(--sr-kopf);letter-spacing:.14em;text-transform:uppercase;color:var(--akzent)}
.sr-g-wirkung-art{display:inline-block;margin-left:.35rem;padding:.05rem .4rem;border:1px solid currentColor;
  font:400 .68rem/1.3 var(--sr-schmal);color:var(--leise);white-space:nowrap}
.sr-g-wirkung-offen .sr-g-wirkung-art,.sr-g-wirkung-teilweise .sr-g-wirkung-art{color:var(--akzent)}
.sr-g-kopffeld .fkopf{margin:0}
.sr-g-kopffeld-titel{margin-right:auto;font:700 .62rem/1 var(--sr-kopf);letter-spacing:.14em;
  text-transform:uppercase;color:var(--akzent)}
.sr-g-kopffeld textarea{width:100%;min-height:7.5rem;margin:0;font:400 .9rem/1.5 var(--serif);
  background:#fff;resize:vertical}

/* THE TAB ROLLE IN THE BOOK'S BLOCKS (25.09.2026, designs/shadowrun/reiter-rolle.php; plan
   "Reiter Rolle im Shadowrun-Design"): a hint box per chapter on the chapter's surface -
   a line per field, the field's name in the accent, where it goes as a quiet tag; the
   persona's own picture beside Physical Appearance, as high as the field; a K in the
   overview for the fields that go to Kindroid. */
.sr-rolle-hinweis{margin:0}
.sr-rolle-hinweis p{font-size:.9rem}
.sr-rolle-hinweis p + p{margin-top:.45rem}
.sr-rolle-hinweis p b{font-weight:700;color:var(--akzent)}
.sr-wohin{font-style:normal;font-weight:600;font-size:.8rem;color:#6b6b70;white-space:nowrap}
.sr-wohin::before{content:"· "}
.sr-rolle-aussehen{display:grid;grid-template-columns:minmax(0,1fr) 13rem;gap:1.2rem;align-items:stretch}
.sr-rolle-bild{display:flex;flex-direction:column}
.sr-rolle-bild .fenster{flex:1;height:auto;min-height:12rem}
.sr-rolle-bild img{object-position:center 22%}
.sr-uebersicht .sr-kin{display:inline-block;margin-left:.3rem;color:#fdb714;vertical-align:-.1em}
.sr-uebersicht .sr-kin .ic{display:inline-block;width:.8rem;height:.8rem}
@media(max-width:700px){
  .sr-rolle-aussehen{grid-template-columns:1fr}
  .sr-rolle-bild .fenster{flex:none;height:16rem}
}
/* the hint box inside a field (Additional Context: what "Beziehungen aktualisieren" does) */
.sr-feldhinweis{margin:0 0 .8rem}
.sr-feldhinweis p{font-size:.9rem}
.sr-feldhinweis p b{font-weight:700;color:var(--akzent)}
/* a frame whose only picture is 18+ marked and has no stand-in (rahmen.php .nur18) goes
   away while 18+ is hidden; beside Physical Appearance the field then takes the width */
body.blur18 .sr-rahmen.nur18{display:none}
body.blur18 .sr-rolle-aussehen:has(> .nur18){grid-template-columns:1fr}

/* THE TAB BEZIEHUNGEN (25.09.2026, designs/shadowrun/reiter-bez.php): the cards on the
   chapter surface, the form in the red sidebar - its kinds as buttons, two to a row
   ("Auftraggeber", "Verbündeter" are cut at three). */
.sr-kapitel small{font-size:.8rem;opacity:.7}
.sr-bez .bez-liste{margin:0}
.sr-bez .sr-leer{margin:0;color:#555}
.sr-bez .sr-rolle-hinweis a{color:var(--akzent)}
.sr-bez-neu{display:grid;gap:.8rem}
.sr-bez-neu .sr-feld{margin:0}
.sr-bez-neu .sr-knoepfe.drei{grid-template-columns:repeat(2,minmax(0,1fr))}
.sr-bez-neu .sr-knopf{justify-self:start;padding:.4rem .9rem}
/* the persona picker opens DOWNWARD here (03.10.2026, Roger - upward it ran under the fixed compact head; the sticky
   column sits right below it), as at the Schieber */
.sr-bez-neu .bw-liste{top:calc(100% + 2px);bottom:auto}
/* THE RELATIONSHIP CARDS (same day, Roger: "die karten auch ein wenig anpassen, eine
   schräge links unten zum beispiel"): the bottom left corner cut (16px), built like the
   boxes' cut - the ground leaves the corner transparent (45deg gradient, 11.3px = 16px
   across), ::after draws the outline as a ring with the same cut, the shadow is a
   drop-shadow filter so it follows the cut; outline and title bar in the kind's colour
   (--bez-farbe), the title a filled bar with white capitals, the × white on it. */
.sr-bez .bez{--bez-farbe:var(--sr-linie);border:none;box-shadow:none;padding:.45rem .45rem .75rem;
  background:linear-gradient(45deg,transparent 11.3px,#f6f6f6 11.3px);
  filter:drop-shadow(1px 2px 2px rgba(0,0,0,.18))}
.sr-bez .bez.blut{--bez-farbe:var(--blut)}
.sr-bez .bez.bund{--bez-farbe:var(--bund)}
.sr-bez .bez.feind{--bez-farbe:var(--feind)}
.sr-bez .bez::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--bez-farbe);
  clip-path:polygon(evenodd,0 0,100% 0,100% 100%,16px 100%,0 calc(100% - 16px),0 0,
    1px 1px,1px calc(100% - 16.4px),16.4px calc(100% - 1px),calc(100% - 1px) calc(100% - 1px),
    calc(100% - 1px) 1px,1px 1px)}
.sr-bez .bez .bez-titel,.sr-bez .bez.blut .bez-titel,.sr-bez .bez.bund .bez-titel,
.sr-bez .bez.feind .bez-titel{padding:.3rem 1.4rem;background:var(--bez-farbe);color:#fff;border:none;
  font-size:.7rem;letter-spacing:.12em}
.sr-bez .bez.abgeleitet .bez-titel{background:repeating-linear-gradient(135deg,var(--bez-farbe) 0 6px,
  color-mix(in srgb,var(--bez-farbe) 80%,#fff) 6px 9px)}
.sr-bez .bez form{top:.5rem;right:.5rem}
.sr-bez .bez form button{color:#fff;padding:0 .25rem;line-height:1.3}
.sr-bez .bez form button:hover{color:#fff;border-color:#fff}
.sr-bez .bez-fenster{border-color:rgba(0,0,0,.2)}
/* the relationships' jump target stays clear of the compact bar */
#bez-karten{scroll-margin-top:7rem}

/* THE TAB ABENTEUER (25.09.2026, designs/shadowrun/reiter-abent.php): the adventures she
   played in as a list, the memories per adventure on the chapter surface with the bin,
   "Unter vier Augen" in the red sidebar, "Neues Gespräch" as a WARNING BOX (the example
   box's frame in red stripes - it destroys something in Kindroid), the version history as
   a value table over the full width. The right column is not sticky: it is taller than
   a window. */
.sr-abent-liste,.sr-erinnerungen,.sr-direkt-liste{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.sr-abent-liste li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  padding:.2rem 0 .35rem;border-bottom:1px solid rgba(154,6,12,.18)}
.sr-abent-liste a{font:700 1rem/1.2 var(--sr-schmal);color:var(--akzent);text-decoration:none}
.sr-abent-liste a:hover{text-decoration:underline}
.sr-abent-liste span{font:400 .85rem/1.2 var(--sr-schmal);color:#555;white-space:nowrap}
.sr-abent .sr-leer{margin:0;color:#555}
.sr-erinnerungen li{display:flex;align-items:flex-start;gap:.5rem}
.sr-erinnerungen p{flex:1;font-size:.92rem;line-height:1.45;color:#333}
.sr-erinnerungen form,.sr-direkt-liste form{margin:0}
.sr-rot-text{margin:0 0 .8rem;font:400 .85rem/1.4 var(--sr-schmal);color:#f0dcdc}
.sr-direkt-liste{margin-top:1rem}
.sr-direkt-liste li{display:grid;grid-template-columns:1fr auto;gap:.1rem .5rem;
  padding-bottom:.35rem;border-bottom:1px solid rgba(255,255,255,.2)}
.sr-direkt-liste a{color:#fdb714;font:700 .9rem/1.2 var(--sr-schmal);text-decoration:none}
.sr-direkt-liste span{grid-column:1;font:400 .78rem/1.3 var(--sr-schmal);color:#f0dcdc}
.sr-direkt-liste form{grid-column:2;grid-row:1 / span 2;align-self:center}
.sr-direkt-liste .sr-zeile-weg{color:#f0dcdc}
.sr-warnkasten{position:relative;z-index:0;margin:1.2rem 0 0;padding:44px 28px 26px 30px}
.sr-warnkasten::before{content:"";position:absolute;inset:0;z-index:-1;
  background:repeating-linear-gradient(0deg,#5e0d0e 0 2px,#86131a 2px 4px);
  clip-path:polygon(0 20px,20px 0,58% 0,calc(58% + 22px) 22px,calc(100% - 22px) 22px,
    100% 44px,100% 100%,0 100%)}
.sr-warnkasten::after{content:"";position:absolute;inset:32px 14px 14px 16px;z-index:-1;background:#fff;
  clip-path:polygon(0 18px,18px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 18px),
    calc(100% - 18px) 100%,0 100%)}
.sr-warnkasten-titel{position:absolute;left:22px;top:10px;font:700 .74rem/1 var(--sr-kopf);
  letter-spacing:.08em;text-transform:uppercase;color:#fdb714}
.sr-warnkasten .fkopf{margin:0 0 .3rem}
.sr-warnkasten textarea{width:100%;margin:.5rem 0 0}
.sr-warnkasten .sr-g-hinweis{margin:.2rem 0}
.sr-warnkasten .sr-warnung-text{margin-top:.8rem}
.sr-warnkasten .sr-warnung-text b{color:var(--warnung)}
.sr-warnkasten .warnung-zeile{display:block;margin:.4rem 0;font-size:.85rem}
.sr-warnkasten .warnung-zeile input{margin-right:.35rem;vertical-align:-.1em}
.sr-verlauf{margin-top:1.8rem}
.sr-verlauf h3 small{font-size:.75rem;opacity:.7}
.sr-verlauf .sr-g-hinweis{margin:0 0 .5rem}
.sr-verlauf td:nth-child(2){text-align:left;white-space:normal}
.sr-verlauf form{margin:0}
.sr-verlauf .sr-knopf{padding:.12rem .45rem;font-size:.72rem}
#abent-mit,#abent-erinnerungen,#abent-direkt,#abent-verlauf,#abent-gespraech{scroll-margin-top:7rem}
/* A PICKER IN A RED SIDEBAR OPENS OVER THE HEAD (25.09.2026, Roger's screenshot: the scene
   list of "Unter vier Augen" went under the tabs and the band). .sr-rot is its own stacking
   context at 0, the head's parts at 1 and 2 - so the red boxes that hold a picker go to 3;
   the compact bar (45) stays above. As .sr-g-traeger's box on the item page. */
.sr-bez .sr-rot,.sr-abent .sr-rot{z-index:3}
/* NO "ALLE ÖFFNEN / ALLE SCHLIESSEN" in this design (25.09.2026, Roger: "brauchen wir nicht
   mehr"): the standard toolbar's buttons hidden on sheet, scene and world pages (the markup
   stays the standard's), the compact bar has none. A section that still folds opens by its
   heading. */
.design-shadowrun .leiste .alle-auf,.design-shadowrun .leiste .alle-zu{display:none}
/* ...and in Beziehungen the red box stands in the STICKY right column - position:sticky makes
   the column a stacking context of its own, so the box's 3 stayed inside it (Roger's second
   screenshot). The column itself goes to 3. */
.sr-bez .sr-rechts{z-index:3}
/* the tab Abenteuer's right column as a flex stack, so the upright picture (.sr-illu) grows
   down to where the left column ends, as in the tab Figur */
.sr-abent .sr-rechts{display:flex;flex-direction:column;gap:1.2rem}
.sr-abent .sr-rechts > .sr-illu{flex:1 1 22rem;display:flex;flex-direction:column}
.sr-abent .sr-warnkasten{margin:0}

/* THE TAB BILDER (25.09.2026, designs/shadowrun/reiter-bilder.php) like the item page's
   pictures: a stack of chapters (the grid gap the chapter surface's -1.2rem takes back),
   the standard sections' own headings hidden (the chapter says it), the grey hints in the
   book's narrow type; tiles 1.5x through .sr-g-bilder. */
.sr-bilder-tab{display:grid;gap:1.2rem}
.sr-bilder-tab .bilder > .fkopf,.sr-bilder-tab .bildgen > .fkopf{display:none}
.sr-bilder-tab .bilder,.sr-bilder-tab .bildgen{margin:0}
.sr-bilder-tab .hint{font:400 .85rem/1.45 var(--sr-schmal);color:#555}

/* THE GENERATOR'S CHOICES AS BUTTON ROWS (25.09.2026, persona.js "BUTTON ROWS"; the tab
   Bilder and the item page): the real select hidden, the row beside it - long model names
   wrap in wide buttons, resolution and count are short ones; the chosen one red. The model
   row's fields stacked (a row of buttons needs the width). */
.sr-knopfwahl-quelle{display:none !important}
.design-shadowrun .bild-modellzeile{display:grid;gap:.7rem;align-items:start}
.bild-modellzeile label.bild-auflwahl[hidden]{display:none}
.sr-knopfwahl{display:flex;flex-wrap:wrap;margin-top:.15rem}
.sr-knopfwahl button{flex:1 1 13rem;margin:0 -1px -1px 0;padding:.42rem .6rem;clip-path:none;
  text-align:left;text-transform:none;letter-spacing:.02em;font:600 .78rem/1.25 var(--sr-schmal);
  color:#2a2a2e;background:linear-gradient(180deg,#ececec,#d6d6d8);border:1px solid #9c9ca0}
.sr-knopfwahl.kurz button{flex:0 0 auto;min-width:2.8rem;text-align:center}
.sr-knopfwahl button:hover{color:var(--akzent);border-color:var(--akzent)}
.sr-knopfwahl button.an,.sr-knopfwahl button.an:hover{color:#fff;background:var(--akzent);border-color:var(--akzent);position:relative;z-index:1}

/* THE CATALOGUE (25.09.2026, designs/shadowrun/ausruestung.php): the kinds as a tab row with
   Etch symbols, the sub-kinds as chips, search and books in a red bar, the list as the book's
   dark value table with a 64px picture per row - a row with its own picture framed yellow
   (Roger: "ich möchte sehen wo ich schon bilder erstellt habe"). */
.sr-katalog{display:grid;gap:1rem}
.sr-katalog-arten{display:flex;flex-wrap:wrap;gap:.3rem;align-items:center}
.sr-katalog-arten a{display:inline-flex;align-items:center;gap:.45rem;padding:.5rem 1.2rem .5rem .7rem;
  background:linear-gradient(180deg,#ececec,#d6d6d8);border:1px solid #9c9ca0;color:#2a2a2e;text-decoration:none;
  font:700 .74rem/1 var(--sr-kopf);letter-spacing:.06em;text-transform:uppercase;
  clip-path:polygon(0 0,calc(100% - .7rem) 0,100% 100%,0 100%)}
.sr-katalog-arten a:hover{color:var(--akzent)}
.sr-katalog-arten a.an,.sr-katalog-arten a.an:hover{background:var(--akzent);border-color:var(--akzent);color:#fff}
.sr-katalog-trenner{margin:0 .2rem 0 .9rem;font:700 .66rem/1 var(--sr-schmal);letter-spacing:.14em;
  text-transform:uppercase;color:#555}
/* Etch code points, checked in the kit's font (tools: fontTools on pro-fa-etch-solid-900-*.woff2) */
.sr-ksym::before{font:normal 900 .95rem/1 "Font Awesome 7 Etch"}
.sr-ksym.alle::before{content:"\f5fd"}     /* layer-group */
.sr-ksym.waffe::before{content:"\f54c"}    /* skull */
.sr-ksym.panzer::before{content:"\f132"}   /* shield */
.sr-ksym.cyber::before{content:"\f0e7"}    /* bolt */
.sr-ksym.bio::before{content:"\f004"}      /* heart */
.sr-ksym.sonst::before{content:"\f0f2"}    /* suitcase */
.sr-ksym.zubehoer::before{content:"\f0ad"} /* wrench - weapon accessories */
.sr-ksym.droge::before{content:"\f043"}    /* drop */
.sr-ksym.auto::before{content:"\f1b9"}     /* car */
.sr-ksym.vorteil::before{content:"\f005"}  /* star */
.sr-ksym.kraft::before{content:"\f06d"}    /* fire */
.sr-ksym.zauber::before{content:"\e2ca"}   /* wand-magic-sparkles */
.sr-ksym.form::before{content:"\f121"}     /* code */
.sr-ksym.fert::before{content:"\f518"}     /* book-open */
.sr-katalog-unter{display:flex;flex-wrap:wrap;gap:.25rem}
.sr-katalog-unter a{padding:.28rem .6rem;font:600 .8rem/1.2 var(--sr-schmal);color:#2a2a2e;text-decoration:none;
  background:#e4e4e6;border:1px solid #b5b5b8}
.sr-katalog-unter a:hover{color:var(--akzent);border-color:var(--akzent)}
.sr-katalog-unter a.an,.sr-katalog-unter a.an:hover{background:#262527;border-color:#262527;color:#fdb714}
/* THE RED BAR IS A LAYER BEHIND (::before), NOT A clip-path ON THE FORM: a clip-path cut off
   the book list that opens out of it (Roger's screenshot, the same evening - section 9's
   rule about boxes). z-index 3 lifts the open list over the table below. */
.sr-katalog-sieb{position:relative;z-index:3;display:flex;flex-wrap:wrap;gap:.8rem 1.2rem;align-items:end;
  margin:0;padding:.8rem 1rem;color:#fff}
.sr-katalog-sieb::before{content:"";position:absolute;inset:0;z-index:-1;
  background:var(--sr-zeilen),linear-gradient(90deg,#5e0d0e,#a3171c);
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%)}
/* the book choice is a light field: its text dark, not the bar's white */
.sr-katalog-sieb .bandwahl,.sr-katalog-sieb .bandwahl summary,.sr-katalog-sieb .bandwahl-liste{color:#2a2a2e}
.sr-katalog-sieb .suche{flex:1 1 16rem}
.sr-katalog-sieb label > span,.sr-katalog-sieb .sieb-marke{display:block;margin-bottom:.3rem;
  font:700 .66rem/1 var(--sr-schmal);letter-spacing:.12em;text-transform:uppercase;color:#fdb714}
.sr-katalog-sieb input[type=text]{width:100%;margin:0;padding:.4rem .55rem;background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.3);color:#fff;font:400 .95rem/1.2 var(--sr-schmal)}
.sr-katalog-sieb input[type=text]::placeholder{color:rgba(255,255,255,.5)}
.sr-katalog-sieb .zurueck-link{color:#f0dcdc}
.sr-katalog-sieb .sr-knopf{padding:.42rem 1rem}
.sr-katalog > .sr-g-hinweis{margin:-.4rem 0 0}
.sr-katalog > .sr-kapitel{margin:.4rem 0 0}
.sr-katalog-liste{margin-top:-.4rem;padding-top:1.5rem} /* the table's head clear of the plate's 17px step top right (Roger) */
.sr-katalog-liste td.k-bild{width:70px;padding:.3rem .35rem}
.sr-kbild{position:relative;display:block;width:64px;height:64px;overflow:hidden;background:#0f0e11;
  border:1px solid #3a393c}
.sr-kbild::before{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:1.35rem;color:#4d4c50}
.sr-kbild.mit-bild{border-color:#fdb714}
.sr-kbild img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;display:block}
.sr-katalog-liste td.k-name{text-align:left;white-space:normal;min-width:12rem}
.sr-katalog-liste td.k-name a{font-weight:700}
.sr-katalog-liste td.k-name small{display:block;margin-top:.15rem;font-size:.72rem;color:#c9c9cc}
.sr-katalog-liste td.k-werte,.sr-katalog-liste td.k-quelle{text-align:left;white-space:normal}
/* the start of the description (20.10.2026, ausrAnriss): four lines fit beside the 64px picture, cut with "…"; gone on a phone */
.sr-katalog-liste td.k-text{width:34%;min-width:12rem;text-align:left;white-space:normal;font-size:.78rem;line-height:1.3;color:#c9c9cc}
.sr-katalog-liste td.k-text span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;line-clamp:4;overflow:hidden}
@media (max-width:700px){.sr-katalog-liste .k-text{display:none}}
.sr-blaettern{display:flex;gap:1rem;align-items:center;justify-content:center}
.sr-blaettern span{font:600 .85rem/1 var(--sr-schmal);color:#333}
.sr-blaettern .sr-knopf{text-decoration:none}

/* the catalogue's choices land under the picture strip (#katalog-wahl), a little air above */
.sr-katalog-arten{scroll-margin-top:.8rem}

/* THE RULEBOOKS (25.09.2026, designs/shadowrun/regelwerke.php): search in the red bar, the
   volumes as chips (.sr-katalog-sieb / .sr-katalog-unter from the catalogue), a narrow
   framed picture under them, a shelf in chapters, a page under the books' red page head,
   the hits in a sticky column beside the page. */
.sr-regelwerke{display:grid;gap:1rem}
.sr-rw-spalten{display:grid;grid-template-columns:minmax(0,1fr);gap:1.4rem;align-items:start}
.sr-rw-spalten.mit-treffern{grid-template-columns:24rem minmax(0,1fr)}
.sr-rw-regal{display:flex;flex-wrap:wrap;gap:1.4rem;align-items:stretch;min-width:0}
/* a chapter as wide as its --n volumes (190px each - Roger: "was größer", 1rem apart, the surface's 1.2rem sides),
   at least its heading's width, never wider than the column - there its covers wrap */
.sr-regalfach{display:grid;grid-template-rows:auto 1fr;gap:1.2rem;min-width:0;max-width:100%;
  width:max(14rem,calc(var(--n) * 190px + (var(--n) - 1) * 1rem + 2.4rem))}
.sr-regalfach > .sr-kapitel{margin:0;white-space:nowrap;font-size:1.05rem}
.sr-rw-treffer{display:grid;gap:.6rem;align-content:start;min-width:0}
.mit-treffern > .sr-rw-treffer{position:sticky;top:1rem;max-height:calc(100vh - 2rem);overflow:auto;
  padding-right:.3rem}
/* THE SHELF: the cover in its own colours (no red tone - it is the book), a dark plate under it */
.sr-baende{list-style:none;margin:0;padding:0;display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fill,190px)}
.sr-baende li{display:flex;flex-direction:column;min-width:0;filter:drop-shadow(3px 4px 0 rgba(0,0,0,.22))}
.sr-band-bild{display:block;aspect-ratio:210/297;background:#1b1a1c;overflow:hidden}
.sr-band-bild img{display:block;width:100%;height:100%;object-fit:cover}
.sr-band-bild:hover img{opacity:.85}
.sr-band-platte{flex:1;display:grid;gap:.2rem;align-content:start;padding:.55rem .65rem .65rem;
  background:linear-gradient(180deg,#262527,#343335);color:#fff;border-top:2px solid #fdb714;
  clip-path:polygon(0 0,100% 0,100% 100%,12px 100%,0 calc(100% - 12px))}
.sr-band-platte h3{margin:0;font:600 .95rem/1.2 var(--sr-schmal)}
.sr-band-platte h3 a{color:#fdb714;text-decoration:none}
.sr-band-platte h3 a:hover{color:#fff}
.sr-band-platte p{margin:0;font:400 .76rem/1.3 var(--sr-schmal);color:#c9c9cc}
.sr-band-platte .sr-band-knoepfe{display:flex;gap:.35rem;margin-top:.35rem}
.sr-band-knoepfe .sr-knopf{text-decoration:none}
/* THE PAGE */
.sr-buchseite{min-width:0;background:#ececec}
.sr-seitenkopf{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.5rem 1.1rem;color:#fff;background:var(--sr-zeilen),linear-gradient(90deg,#5e0d0e,#a3171c);
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%)}
.sr-seitenkopf span{font:700 .78rem/1.2 var(--sr-kopf);letter-spacing:.08em;text-transform:uppercase}
.sr-seitenkopf b{font:700 1.5rem/1 var(--sr-kopf)}
.sr-seitenwerkzeug{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;padding:.7rem 1.1rem 0}
.sr-regelwerke .sr-seitenwerkzeug .sr-knopf{border-color:var(--akzent);color:var(--akzent);text-decoration:none;
  padding:.35rem .6rem}
.sr-regelwerke .sr-seitenwerkzeug .sr-knopf:hover{background:var(--akzent);color:#fff}
.sr-seitensprung{margin:0}
.sr-seitensprung label{display:flex;align-items:center;gap:.35rem;margin:0;
  font:600 .7rem/1 var(--sr-schmal);letter-spacing:.08em;text-transform:uppercase;color:#555}
.sr-seitensprung input{width:4.6rem;margin:0;padding:.25rem .4rem;font:400 .9rem/1.2 var(--sr-schmal)}
.sr-seitenpdf{display:flex;gap:.5rem;margin-left:auto}
.sr-buchseite > .sr-g-hinweis{padding:.6rem 1.1rem 0}
.sr-buchseite .regel-text{margin:0;padding:1rem 1.1rem 1.3rem;max-height:none;overflow:visible;
  background:none;border:0;font:400 1rem/1.55 var(--sr-schmal);color:#222}
.sr-regelwerke mark{background:#fdb714;color:#231f20;font-weight:600;padding:0 .1em}
/* THE HITS */
.sr-fundliste{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.sr-fundliste li{padding:.45rem .55rem;background:#ececec;border-left:3px solid transparent}
.sr-fundliste li.an{border-left-color:var(--akzent);background:#fff}
.sr-fundliste a{display:flex;align-items:center;gap:.55rem;color:#2a2a2e;text-decoration:none}
.sr-fundliste img{flex:none;width:28px;height:40px;object-fit:cover;background:#1b1a1c}
.sr-fundliste .fund-buch{flex:1;min-width:0;font:600 .88rem/1.25 var(--sr-schmal)}
.sr-fundliste .fund-buch b{color:var(--akzent);white-space:nowrap}
.sr-fundliste a:hover .fund-buch{color:var(--akzent)}
.sr-fundzahl{flex:none;display:inline-grid;place-items:center;min-width:28px;height:24px;padding:0 5px;
  background:#fdb714;color:#231f20;font:700 .74rem/1 var(--sr-schmal);
  clip-path:polygon(22% 0,78% 0,100% 50%,78% 100%,22% 100%,0 50%)}
.sr-fundliste .fund-text{margin:.3rem 0 0;font:400 .82rem/1.4 var(--sr-schmal);color:#444}
.sr-regelwerke > .sr-beispiel{margin:.4rem 0 0}
@media(max-width:880px){
  .sr-rw-spalten.mit-treffern{grid-template-columns:minmax(0,1fr)}
  .mit-treffern > .sr-rw-treffer{position:static;max-height:none}
}

/* THE SCENES (25.09.2026, designs/shadowrun/szenen.php + szene.php; plan "Szenen im
   Shadowrun-Design"). The list: filter chips, a framed strip, cards like the rulebook shelf -
   the picture in its own colours, a dark plate with name, scene text, faces, date. The scene
   page borrows the item page's layout (.sr-gegenstand, .sr-g-*); below only what differs. */
.sr-szenen{display:grid;gap:1rem}
.sr-szenenkarten{list-style:none;margin:0;padding:0;display:grid;gap:1.2rem;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.sr-szenenkarten li{display:flex;flex-direction:column;min-width:0;filter:drop-shadow(3px 4px 0 rgba(0,0,0,.22))}
.sr-szene-bild{position:relative;display:block;aspect-ratio:3/4;background:#1b1a1c;overflow:hidden}
.sr-szene-bild img,.sr-szene-bild svg{display:block;width:100%;height:100%;object-fit:cover}
.sr-szene-bild img.ersatz{display:none}
body.blur18 .sr-szene-bild img.nsfw{display:none}
body.blur18 .sr-szene-bild img.ersatz{display:block}
body.blur18 .sr-szene-bild .verborgen{width:100%;height:100%}
.sr-szene-bild:hover img{opacity:.88}
/* the picture after the last card: from its place to the row's end (the auto-fill tracks
   are explicit, so -1 is the last column line), the row's height; the frame and its
   window grow with it */
.sr-szenenkarten li.sr-szenen-fuell{grid-column:auto / -1;filter:none;min-height:16rem}
.sr-szenen-fuell > .sr-rahmen{flex:1;display:flex;flex-direction:column}
.sr-szenen-fuell .sr-rahmen .fenster{flex:1;height:auto;min-height:8rem}
.sr-szenen-fuell .sr-rahmen img{object-position:center 45%}
.sr-auto{position:absolute;right:0;top:.6rem;padding:.2rem .5rem;background:#fdb714;color:#231f20;
  font:700 .62rem/1 var(--sr-kopf);letter-spacing:.1em;text-transform:uppercase}
.sr-szene-platte{flex:1;display:grid;gap:.35rem;align-content:start;padding:.55rem .65rem .7rem;
  background:linear-gradient(180deg,#262527,#343335);color:#fff;border-top:2px solid #fdb714;
  clip-path:polygon(0 0,100% 0,100% 100%,12px 100%,0 calc(100% - 12px))}
.sr-szene-platte h2{margin:0;font:600 1rem/1.2 var(--sr-schmal)}
.sr-szene-platte h2 a{color:#fdb714;text-decoration:none}
.sr-szene-platte h2 a:hover{color:#fff}
.sr-szene-text{margin:0;font:400 .76rem/1.35 var(--sr-schmal);color:#c9c9cc}
/* THE SCENE LIST SHOWS FIVE LINES (11.10.2026): a description holds 1000 characters since 10.10. and made its card
   as tall as its text; the rest is on the scene's page */
.sr-szenenkarten .sr-szene-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;line-clamp:5;overflow:hidden}
.sr-szene-datum{margin:0;font:400 .72rem/1.2 var(--sr-schmal);color:#9d9da0}
/* the faces of the people present: small round portraits in a row */
.sr-gesichter{display:flex;flex-wrap:wrap;gap:.25rem;margin:0}
.sr-gesichter i,.sr-gesichter a{display:block;width:26px;height:26px;overflow:hidden;
  background:#58595b;border:1px solid #fdb714;flex:none}
.sr-gesichter img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 20%}
.sr-gesichter span{display:grid;place-items:center;width:100%;height:100%;
  font:700 .7rem/1 var(--sr-schmal);color:#fff}
.sr-gesichter.gross{margin-top:.7rem;gap:.35rem}
.sr-gesichter[hidden]{display:none}
.sr-gesichter.gross a{width:42px;height:52px;border-color:var(--akzent)}
.sr-gesichter.gross a:hover{border-width:2px}
/* THE SCENE PAGE */
.sr-szene .sr-szene-daten td:first-child{width:5.5rem}
.sr-szene .sr-szene-daten input[type=text]{width:100%}
.sr-szene .sr-szene-daten .ankreuz{margin:0;color:#fff;font-size:.8rem}
.sr-szene .sr-chatart{max-width:14rem}
.sr-szene-loeschen{margin:.7rem 0 0;text-align:right}
.sr-szene-loeschen .sr-knopf{padding:.35rem .6rem}
#szene-loeschen{display:none}
/* the world picker in the dark box opens over what follows */
.sr-szene .sr-szene-daten{z-index:2}
.sr-szene .sr-g-kopffeld .bildki{margin:.2rem 0 0;font-size:.82rem}
.sr-szene .sr-g-kopffeld textarea{min-height:5.5rem}
.sr-szene .sr-g-spalten .briefing textarea{width:100%;min-height:14rem;margin:0}
/* "-> Besetzung" and the cards below the box's top edge and clear of its cut corner
   (Roger: "der button bzw. alles muss etwas weiter runter" - .6rem put it on the edge) */
/* THE CAST FOLDS (10.10.2026): the block is a <details>, closed on every load; its summary is the chapter heading with
   an arrow at the right end instead of the browser's marker */
details.sr-szene-anwesende > summary.sr-kapitel{display:flex;align-items:baseline;gap:.5rem;cursor:pointer;list-style:none}
details.sr-szene-anwesende > summary.sr-kapitel::-webkit-details-marker{display:none}
details.sr-szene-anwesende > summary.sr-kapitel::after{content:"▸";margin-left:auto;font-size:1rem;line-height:1}
details.sr-szene-anwesende[open] > summary.sr-kapitel::after{content:"▾"}
.sr-szene-anwesende .kasten.feld{padding-top:1.5rem}
.sr-szene-anwesende .kasten.feld > .fkopf{margin-bottom:.8rem}
/* the cards in the half-width column: the standard's six columns made a card 77px wide under a
   fixed 90px picture, which stuck out left and top (Roger's screenshot) - here as many
   columns as fit, the picture as wide as its card */
.sr-szene-anwesende .kartenwahl{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}
.sr-szene-anwesende .aw-bild{width:100%;height:auto;aspect-ratio:1}

/* THE MAP AS A CONTACT NET (25.09.2026, designs/shadowrun/beziehungen.php; plan "Karte im
   Shadowrun-Design"): the ring of round portraits on the dark plate with a fine grid,
   parentage red, bond yellow, enmity red dashed; the highlight of persona.js (hell/blass)
   in white on the dark ground. */
.sr-karte-seite{display:grid;gap:1rem}
.sr-karte-legende{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem;margin:0;padding:0}
.sr-karte-legende li{display:flex;align-items:center;gap:.45rem;padding:.3rem .65rem;
  background:#262527;color:#fff;font:600 .78rem/1.2 var(--sr-schmal)}
.sr-karte-legende i{display:inline-block;width:1.6rem;border-top:3px solid #fdb714}
.sr-karte-legende i.blut{border-color:#e0343b}
.sr-karte-legende i.feind{border-top-style:dashed;border-color:#e0343b}
.sr-karte-legende i.namenlos{border-top:2px dashed #c9c9cc}
.sr-karte{overflow:auto;padding:.5rem 0;
  background:linear-gradient(rgba(253,183,20,.06) 1px,transparent 1px) 0 0/28px 28px,
             linear-gradient(90deg,rgba(253,183,20,.06) 1px,transparent 1px) 0 0/28px 28px,
             linear-gradient(180deg,#262527,#1b1a1c);
  clip-path:polygon(0 0,calc(100% - 18px) 0,100% 18px,100% 100%,18px 100%,0 calc(100% - 18px))}
.sr-karte .karte-svg{display:block;margin:0 auto;overflow:visible}
.sr-karte .sr-ring{fill:none;stroke:rgba(253,183,20,.18);stroke-width:1;stroke-dasharray:2 6}
.sr-karte .karte-svg .linie{fill:none;stroke-width:2.4;stroke-linecap:round;opacity:.85}
.sr-karte .karte-svg .linie.blut{stroke:#e0343b}
.sr-karte .karte-svg .linie.bund{stroke:#fdb714}
.sr-karte .karte-svg .linie.feind{stroke:#e0343b;stroke-dasharray:7 6}
.sr-karte .karte-svg .linie.hell{stroke:#fff;stroke-width:3.6;opacity:1}
.sr-karte .karte-svg .linie.blass{opacity:.12}
.sr-karte .kn .k-grund{fill:#3a393c}
.sr-karte .kn .k-rand{fill:none;stroke:#fdb714;stroke-width:2;transition:stroke .12s,stroke-width .12s}
.sr-karte .kn.namenlos .k-rand{stroke:#c9c9cc;stroke-dasharray:4 4}
.sr-karte .kn.hell .k-rand,.sr-karte .kn:hover .k-rand{stroke:#fff;stroke-width:3.5}
.sr-karte .kn .k-initial{font:700 26px/1 var(--sr-schmal);fill:#c9c9cc}
.sr-karte .kn .k-name{font:600 13px/1 var(--sr-schmal);fill:#fff;letter-spacing:.02em;text-transform:none}
.sr-karte .kn.namenlos .k-name{fill:#c9c9cc;font-style:italic}
.sr-karte .kn .k-zahl{font:400 10.5px/1 var(--sr-schmal);fill:#9d9da0}
.sr-karte .kn circle.klickflaeche{fill:transparent;stroke:none;cursor:pointer}
body.blur18 .sr-karte .karte-svg .verborgen-flaeche{fill:#3a393c}
/* the kind on the line: a small word with a dark halo, in its line's colour; four classes so
   it beats the line rules above (it carries .linie for the highlight) */
.sr-karte .karte-svg .linie.k-art{fill:#fdb714;stroke:#1b1a1c;stroke-width:3.5;stroke-dasharray:none;
  paint-order:stroke;font:600 10.5px/1 var(--sr-schmal);letter-spacing:.04em;opacity:.9;pointer-events:none}
.sr-karte .karte-svg .linie.k-art.blut,.sr-karte .karte-svg .linie.k-art.feind{fill:#ff6a70}
.sr-karte .karte-svg .linie.k-art.hell{fill:#fff;stroke-width:4;font-size:12px;opacity:1}
.sr-karte .karte-svg .linie.k-art.blass{opacity:.12}

/* THE PERSONA LIST (25.09.2026, designs/shadowrun/index.php): the scene list's cards; on the
   plate "Metatyp · Archetyp" and marks - Werte / Ausrüstung light when filled (Roger: "ob
   werte und ausrüstung gefüllt sind"), K, Du, Spielleiter, auto; open injuries as a red
   label on the portrait. */
.sr-chipzeilen{display:grid;gap:.35rem}
.sr-marken{display:flex;flex-wrap:wrap;gap:.25rem;margin:.1rem 0 0}
.sr-marken span{display:inline-flex;align-items:center;gap:.2rem;padding:.14rem .4rem;
  border:1px solid #58595b;color:#77767a;font:600 .62rem/1 var(--sr-schmal);letter-spacing:.08em;text-transform:uppercase}
.sr-marken span.an{border-color:#fdb714;color:#fdb714}
.sr-marken span.sr-rolle{border-color:#c9c9cc;color:#fff}
.sr-marken .sr-kin svg{width:.75rem;height:.75rem;display:block;fill:currentColor}
.sr-wunden{position:absolute;left:0;top:.6rem;padding:.2rem .5rem;background:#b3161d;color:#fff;
  font:700 .7rem/1 var(--sr-schmal);letter-spacing:.05em}
/* the persona list's flags (28.09.2026): injuries (✚) and a red heart for boxes on the monitor, stacked top left;
   the karma she can still spend as a number top right */
.sr-personenkarten li{position:relative}   /* the flags are links of their own, over the card (28.09.2026) */
.sr-flaggen{position:absolute;left:0;top:.6rem;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:.3rem}
.sr-flaggen a,a.sr-karma-offen{text-decoration:none}
.sr-flaggen a:hover,a.sr-karma-offen:hover{filter:brightness(1.2)}
#zustandsmonitor,#ruf-karma{scroll-margin-top:7rem}
.sr-flaggen .sr-wunden{position:static}
/* the same red flag as the injuries' "✚ n", a white heart in it (Roger, same evening); dying: a black flag */
.sr-verwundet{padding:.2rem .5rem;background:#b3161d;color:#fff;font:700 .7rem/1 var(--sr-schmal);letter-spacing:.05em}
.sr-verwundet.stirbt{background:#1b1a1c}
.sr-karma-offen{position:absolute;right:0;top:.6rem;z-index:2;min-width:1.6rem;padding:.2rem .4rem;background:#fdb714;color:#1b1a1c;
  font:700 .85rem/1 var(--sr-schmal);text-align:center}

/* THE WORLDS (25.09.2026, designs/shadowrun/welten.php + welt.php; plan "Welten im
   Shadowrun-Design"). The list: wide cards (the scene list's plate) with the crest large on
   the dark ground. The world page: the item/scene layout (.sr-gegenstand), its wrapper also
   .bogen for persona.js's messages - so the standard's two-column .bogen grid is undone here. */
.sr-weltkarten{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.sr-welt-wappen{position:relative;display:grid;place-items:center;aspect-ratio:16/10;
  background:radial-gradient(circle at 50% 45%,#3a393c,#1b1a1c 70%);overflow:hidden}
.sr-welt-wappen img{width:58%;aspect-ratio:1;object-fit:cover;display:block;border:2px solid #fdb714}
.sr-welt-wappen span{font:600 .8rem/1 var(--sr-schmal);color:#9d9da0}
.sr-welt-zahlen{display:flex;flex-wrap:wrap;gap:.3rem 1rem;margin:0;font:400 .76rem/1.2 var(--sr-schmal);color:#c9c9cc}
.sr-welt-zahlen b{color:#fff;font-weight:700}
/* the world page */
.sr-welt.bogen{display:grid;grid-template-columns:minmax(0,1fr);gap:1.8rem;align-items:start}
@media(min-width:881px){
  .sr-welt .kopfzeile{grid-template-columns:200px minmax(0,1fr) minmax(19rem,auto)}
}
.sr-welt-wappenspalte{display:grid;gap:.5rem;align-content:start;width:200px;max-width:100%}
.sr-welt .wappenrahmen{background:#1b1a1c;border:1px solid #3a393c}
.sr-weltname{display:grid;gap:.35rem;margin:0}
.sr-weltname input{width:100%;margin:0;font:700 1.35rem/1.2 var(--sr-kopf);letter-spacing:.02em}
/* the crest column spans both head rows like the sheet's portrait - otherwise it set the
   first row's height and pushed the fact box down under the counters */
@media(min-width:881px){.sr-welt .kopfzeile > .sr-welt-wappenspalte{grid-column:1;grid-row:1 / span 2}}
.sr-welt-anfang{margin:.9rem 0 0;font:italic 400 .92rem/1.55 var(--serif);color:#444;white-space:pre-line}
.sr-welt-texte{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.sr-welt .sr-welt-texte textarea{width:100%;margin:0}
.sr-welt .sr-beispiel{margin:0}
/* the cast: square-cornered portraits (Roger: "ich mag keine runden personabilder" - only
   the contact net keeps round ones, everything there is round), name, "Metatyp · Archetyp" */
.sr-besetzung{list-style:none;margin:0;padding:0;display:grid;gap:1rem .6rem;
  grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
.sr-besetzung a{display:grid;justify-items:center;gap:.25rem;text-align:center;text-decoration:none;color:#2a2a2e}
.sr-besetzung-bild{display:block;width:84px;height:106px;overflow:hidden;
  border:2px solid #fdb714;background:#3a393c}
.sr-besetzung-bild img{width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block}
.sr-besetzung-bild i{display:grid;place-items:center;height:100%;font:700 1.5rem/1 var(--sr-schmal);color:#c9c9cc;font-style:normal}
.sr-besetzung a:hover .sr-besetzung-bild{border-color:var(--akzent)}
.sr-besetzung b{font:600 .88rem/1.2 var(--sr-schmal)}
.sr-besetzung a:hover b{color:var(--akzent)}
.sr-besetzung small{font:400 .72rem/1.2 var(--sr-schmal);color:#666}
/* the Kindroid group: chat fields in the dark box, the gamemaster below */
.sr-welt-gruppe{display:grid;grid-template-columns:minmax(0,1fr);gap:1.2rem;align-items:start}
.sr-welt-chat{display:grid;gap:.6rem}
.sr-welt-chatkopf{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.sr-welt-chatkopf h3{margin:0}
.sr-welt-feldkopf{display:flex;align-items:center;justify-content:space-between;gap:.4rem;margin:0 0 .25rem;
  font:600 .74rem/1 var(--sr-schmal);letter-spacing:.08em;text-transform:uppercase;color:#fdb714}
.sr-welt-chat textarea{width:100%;margin:0;background:#1b1a1c;border:1px solid #4a494c;color:#fff;
  font:400 .86rem/1.45 var(--sr-schmal);resize:vertical}
.sr-welt-chat textarea:focus{border-color:#fdb714;outline:none}
.sr-welt-chat .zaehler{color:#c9c9cc}
.sr-welt-gm{margin:0}
@media(max-width:900px){
  .sr-welt-texte{grid-template-columns:minmax(0,1fr)}
}
#welt-loeschen{display:none}

/* LIGHT CARD PLATES (25.09.2026, Roger: "du bist mit den karten ein wenig ins dunkle
   gedriftet, alles sehr dunkelgrau" - "eigentlich waren nur die tabellen dunkelgrau"): the
   plates under the pictures of the PERSONA list and the rulebook shelf on the light ground of
   the chapters, the name in the accent, text dark grey. Dark stay the value tables, the
   contact net ("die karte ist ok, das kann man besser erkennen"), THE SCENE LIST ("szene war ok
   dunkelgrau, weil das mehr filmisch ist") and THE WORLD LIST's plates ("die karten unten grau,
   weil oben genug hell ist" - the crest in its red box on light ground above them). */
.sr-personenkarten .sr-szene-platte,.sr-band-platte{
  background:linear-gradient(180deg,#f0f0f0,#e2e2e4);color:#2a2a2e;
  border-top:3px solid var(--akzent);box-shadow:inset 0 0 0 1px #c9c9cc}
.sr-personenkarten .sr-szene-platte h2 a,.sr-band-platte h3 a{color:var(--akzent)}
.sr-personenkarten .sr-szene-platte h2 a:hover,.sr-band-platte h3 a:hover{color:#2a2a2e}
.sr-personenkarten .sr-szene-text,.sr-band-platte p{color:#444}
.sr-personenkarten .sr-szene-datum{color:#6f6f73}
.sr-personenkarten .sr-marken span{border-color:#c2c2c5;color:#9a9a9e;background:#fff}
.sr-personenkarten .sr-marken span.an{border-color:var(--akzent);color:var(--akzent)}
.sr-personenkarten .sr-marken span.sr-rolle{border-color:#2a2a2e;color:#2a2a2e}
.sr-band-platte .sr-knopf{border-color:var(--akzent);color:var(--akzent)}
.sr-band-platte .sr-knopf:hover{background:var(--akzent);color:#fff}
.sr-welt-wappen{background:radial-gradient(circle at 50% 45%,#f4f4f4,#d4d4d6 75%)}
.sr-welt-wappen img{border-color:var(--akzent)}
.sr-personenkarten .sr-szene-bild,.sr-band-bild{background:#d4d4d6}

.sr-welt-kindroid[hidden]{display:none}
/* the crests of the world list in the red sidebar (Roger: "die weltenlogos ... in so einen
   roten kasten jeweils"): no fixed proportion any more, the box sets the height */
.sr-weltkarten .sr-welt-wappen{aspect-ratio:auto;padding:1.1rem 0 1.3rem}
.sr-welt-wappen .sr-rot{display:block;width:64%}
.sr-welt-wappen .sr-rot-flaeche{display:block;padding:1.7rem .8rem .8rem}
.sr-welt-wappen .sr-rot-flaeche img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border:1px solid rgba(255,255,255,.25)}
.sr-welt-ohne{display:grid;place-items:center;aspect-ratio:1;font:600 .8rem/1 var(--sr-schmal);color:#f0dcdc}
/* Briefing and Ton as high as each other (Roger: "briefing und ton gleich hoch bitte"): the row
   stretches both chapters, their surfaces and fields grow, the text fields fill the rest */
.sr-welt-texte{align-items:stretch}
.sr-welt-texte > .sr-g-block{display:flex;flex-direction:column}
.sr-welt-texte .sr-kapitel-flaeche{flex:1;display:flex;flex-direction:column}
.sr-welt-texte section.kasten.feld{flex:1;display:flex;flex-direction:column}
.sr-welt-texte section.kasten.feld textarea{flex:1;min-height:14rem}

/* THE ADVENTURE PAGES, DARK (26.09.2026, designs/shadowrun/abenteuer.php and the other
   adventure templates; plan in Claude Docs "Abenteuer im Shadowrun-Design"). THE BOOKS' STORY
   PAGE: the short stories in the rulebooks are set on a near-black ground with a fine pattern
   of code (GRW PDF p. 21: #0a0807-#110f0e, the page's own background image, cut out as
   code.jpg), white text in the body font, a small red cross between scenes, the red foot band.
   The same blocks as the other pages, recoloured - switched on by the body class sr-dunkel,
   which only the Shadowrun adventure templates set (the standard templates still load
   assets/abenteuer.css; these do not - every rule it had that the chat needs is here, under
   .sr-dunkel, so nothing leaks onto another page). */
body.sr-dunkel{
  --papier:#131214;
  --papier-hell:#2a292c;
  --papier-tief:#1c1b1e;
  --text:#f1efe9;
  --leise:#bdbab4;
  --sehr-leise:#8d8a84;
  --rand:#3d3c40;
  --karte:linear-gradient(180deg,#262527,#1f1e21);
  --karte-fest:#1f1e21;
  --akzent-text:#e0343b;
  --gelb:#fdb714;
}
html:has(body.sr-dunkel){background:#0b0a0a;scrollbar-color:#4a484c transparent}
/* THE GROUND: the book's code page on the fixed layer (body::after, as the skyline on the
   other pages), tiled at its own size. With a scene, the scene's picture takes the layer:
   abenteuer.js writes it into the BODY's inline background-image (and the page does on
   load) - the body paints it at size 0, the layer inherits it and paints it fixed. So the
   picture no longer rides on background-attachment:fixed, which the browser repaints on
   every scroll step (issue #37, point 1); the script stays as it is. */
body.sr-dunkel{background-color:transparent;background-size:0 0!important;background-repeat:no-repeat}
body.sr-dunkel::after{display:block;background:#0b0a0a url("../../bild.php?dg=shadowrun&n=code") 0 0/828px auto repeat}
body.sr-dunkel.mit-bild::after{background-color:#0b0a0a;background-image:inherit;
  background-size:cover;background-position:center;background-repeat:no-repeat}
/* the print grain becomes the code again, faint, over the scene too */
body.sr-dunkel::before{opacity:.35;mix-blend-mode:screen;
  background:url("../../bild.php?dg=shadowrun&n=code") 0 0/828px auto repeat}
body.sr-dunkel:not(.mit-bild)::before{display:none}
body.sr-dunkel{color:var(--text)}

/* THE STICKY BAR (abenteuerKopfleiste, both chat pages): the head band, thin - scan lines on
   the band red, the emblem instead of the Persona logo, the title in the chapter font. */
body.sr-dunkel.mit-kopfleiste{padding-top:2.8rem}
.sr-dunkel .ab-kopfleiste{position:fixed;top:0;left:0;right:0;z-index:40;height:2.8rem;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.9rem;padding:0 1rem;
  background:var(--sr-zeilen),var(--sr-band);box-shadow:0 2px 8px rgba(0,0,0,.55)}
.sr-dunkel .ab-kl-logo{display:flex;align-items:center}
/* the Persona logo, the way to the start page (Roger: "im chat links oben sollte das persona
   icon hin, es verlinkt auf die persona startseite") */
.sr-dunkel .ab-kl-logo img{display:block;height:2.1rem;width:auto}
.sr-dunkel .ab-kl-titel{min-width:0;font:700 .78rem/1 var(--sr-kopf);letter-spacing:.14em;
  text-transform:uppercase;color:#f3eded;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-decoration:none}
.sr-dunkel a.ab-kl-titel:hover{color:var(--gelb)}
.sr-dunkel .ab-kl-rechts{display:flex;align-items:center;gap:1rem}
.sr-dunkel .ab-kl-link{font:700 .84rem/1 var(--sr-schmal);letter-spacing:.08em;text-transform:uppercase;
  color:rgba(243,237,237,.8);text-decoration:none;white-space:nowrap}
.sr-dunkel .ab-kl-link:hover{color:#fff}
.sr-dunkel .ab-kopfleiste button{padding:.28rem .8rem;font-size:.76rem;white-space:nowrap;clip-path:none;
  background:rgba(0,0,0,.3);color:#fff;border:1px solid rgba(255,255,255,.6)}
.sr-dunkel .ab-kopfleiste button:hover{background:#fff;color:var(--akzent)}
/* THE SEARCH (17.10.2026, plan "Suche im Abenteuer-Verlauf"): in the middle of the head bar - its grid gets a free column each
   side (.mit-suche) -, the field, "3/12", ‹ ›; the transcript a flyout under the bar, centred on the window (abenteuer.js
   suchBauen); the hits yellow, the current one solid */
.sr-dunkel .ab-kopfleiste.mit-suche{grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr) auto}
.sr-dunkel .ab-kopfleiste.mit-suche .ab-kl-rechts{grid-column:5}
.sr-dunkel .ab-suche{display:flex;align-items:center;gap:.4rem}
.sr-dunkel .ab-suche-feld{width:clamp(8rem,28vw,30rem);box-sizing:border-box;padding:.32rem .6rem;font:400 .9rem/1.2 var(--sr-schmal);
  color:#fff;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.6);border-radius:0}
.sr-dunkel .ab-suche-feld:focus{outline:none;border-color:var(--gelb)}
.sr-dunkel .ab-suche-zahl{min-width:3.2rem;text-align:center;font:700 .82rem/1 var(--sr-schmal);color:#fff}
.sr-dunkel .ab-kopfleiste .ab-suche-pfeil{padding:.22rem .55rem;font-size:.95rem;line-height:1}
.sr-dunkel .ab-suche-tafel{position:fixed;top:3.3rem;left:50%;transform:translateX(-50%);width:min(44rem,calc(100vw - 2rem));
  max-height:70vh;overflow-y:auto;box-sizing:border-box;padding:.8rem;background:#1c1b1e;border:1px solid var(--sr-linie);
  box-shadow:0 8px 24px rgba(0,0,0,.6)}
.sr-dunkel .ab-suche-tafel[hidden]{display:none}
.sr-dunkel .ab-ts-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.sr-dunkel .ab-ts-zeile{padding:.35rem .6rem;border-left:2px solid #58595b;font:400 .9rem/1.45 var(--sr-schmal);color:var(--text);
  overflow-wrap:anywhere}
.sr-dunkel .ab-ts-tisch{font-style:italic;color:var(--leise)}
.sr-dunkel .ab-ts-kopf{display:flex;align-items:center;gap:.5rem;margin-bottom:.2rem}
.sr-dunkel .ab-ts-zeit{font:400 .72rem/1 var(--sr-schmal);color:var(--sehr-leise)}
.sr-dunkel .ab-ts-wer{font:700 .58rem/1 var(--sr-kopf);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--gelb)}
.sr-dunkel .ab-kopfleiste .ab-ts-merken{margin-left:auto;padding:.12rem .45rem;font:400 .72rem/1 var(--sr-schmal);background:none;
  border:1px solid #58595b;color:var(--leise)}
.sr-dunkel .ab-kopfleiste .ab-ts-merken.an{border-color:var(--gelb);color:var(--gelb)}
.sr-dunkel .ab-kopfleiste .ab-ts-merken:hover{background:none;border-color:var(--gelb);color:#fff}
.sr-dunkel .ab-ts-text{white-space:pre-wrap}
.sr-dunkel .ab-ts-text em{color:#bdbab4}
.sr-dunkel mark.ab-ts-treffer{background:rgba(255,204,0,.3);color:inherit}
.sr-dunkel mark.ab-ts-treffer.aktuell{background:var(--gelb);color:#111}
.sr-dunkel .ab-ts-leer{margin:0;font:italic 400 .85rem/1.3 var(--sr-schmal);color:var(--leise)}
@media(max-width:640px){.sr-dunkel .ab-suche-feld{width:6.5rem}.sr-dunkel .ab-suche-zahl{min-width:2.4rem}}

/* THE HEAD OF A STORY: the world in a small red tab (where the book names the author), the
   title large in the chapter font on a red band that fades out to the right, the line
   under it quiet. */
.sr-ab-kopf{margin:.4rem 0 1.4rem}
.sr-ab-welt{display:inline-block;padding:.32rem 1.6rem .3rem .8rem;background:var(--akzent);color:#fff;
  font:700 .68rem/1 var(--sr-kopf);letter-spacing:.14em;text-transform:uppercase;
  clip-path:polygon(0 0,calc(100% - .8rem) 0,100% 100%,0 100%)}
.sr-ab-kopf h1{margin:0;padding:.5rem 1rem .45rem;font:700 2.3rem/1.08 var(--sr-kopf);
  letter-spacing:.03em;text-transform:uppercase;color:#fff;overflow-wrap:anywhere;
  background:var(--sr-zeilen),linear-gradient(90deg,#620004,#9a060c 45%,rgba(154,6,12,.35) 80%,transparent)}
.sr-ab-unter{margin:0;padding:.5rem 1rem .55rem;font:400 .95rem/1.45 var(--sr-schmal);color:var(--leise);
  background:rgba(12,11,13,.8)}
.sr-ab-zahl{display:block;margin-top:.2rem;font-size:.82rem;color:var(--sehr-leise)}
/* the running scene, filled by the script */
.sr-dunkel .ab-szene{margin:-.6rem 0 1rem;font:italic 400 .92rem/1.3 var(--sr-schmal);color:var(--leise)}
.sr-dunkel .ab-szene[hidden]{display:none}
.sr-dunkel .ab-szene a{color:var(--gelb);text-decoration:none;border-bottom:1px dotted rgba(253,183,20,.5)}
.sr-dunkel .ab-szene a:hover{color:#fff}

/* THE COLUMN: a dark box of the design - the cut corner top right and the red ring, the
   ground a veil over the scene so the picture stays visible at the edges */
.sr-dunkel .ab-chat{position:relative;padding:1.3rem 1.3rem 1.1rem;
  background:linear-gradient(225deg,transparent 10.6px,rgba(12,11,13,.9) 10.6px)}
.sr-dunkel .ab-chat::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--sr-linie);
  clip-path:polygon(evenodd,
    0 0,calc(100% - 15px) 0,100% 15px,100% 100%,0 100%,0 0,
    1px 1px,1px calc(100% - 1px),calc(100% - 1px) calc(100% - 1px),calc(100% - 1px) 15.4px,calc(100% - 15.4px) 1px,1px 1px)}
.sr-dunkel .ab-chat > *{position:relative;z-index:1}
.sr-dunkel .ab-verlauf{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1rem}

/* A BUBBLE. The Kins: the value box's dark plate with the yellow rule on top and a cut
   corner bottom left (the scene cards' plate), the portrait square with a red rim, the name
   in yellow. Roger's figure on the right in the red sidebar's plate - red means "you" here.
   The narrator has no bubble: white text across the width, as the book sets its story. */
.sr-dunkel .ab-nachricht{display:flex;gap:.7rem;align-items:flex-start;max-width:80%;min-width:0;position:relative}
.sr-dunkel .ab-kin{align-self:flex-start}
.sr-dunkel .ab-ich{align-self:flex-end;flex-direction:row-reverse}
.sr-dunkel .ab-sl{align-self:stretch;max-width:none;padding:.1rem 0 .1rem 1rem;border-left:3px solid var(--akzent)}
.sr-dunkel .ab-bild{flex:none;width:66px;height:66px;overflow:hidden;border:1px solid var(--akzent);
  background:#1b1a1c;position:sticky;top:1rem;align-self:flex-start;
  box-shadow:0 0 0 2px rgba(0,0,0,.6)}
.sr-dunkel.mit-kopfleiste .ab-bild{top:3.8rem}
.sr-dunkel .ab-bild img{width:100%;height:100%;object-fit:cover;object-position:center 20%;vertical-align:top}
.sr-dunkel a.ab-bild{text-decoration:none;color:inherit;cursor:pointer}
.sr-dunkel a.ab-bild:hover{border-color:var(--gelb)}
.sr-dunkel .ab-ich .ab-bild{border-color:var(--gelb)}
/* a figure without a sheet: its initials in the portrait's place (abenteuer.js platzhalterBild) */
.sr-dunkel .ab-bild-leer{display:grid;place-items:center;border-color:#a3171c;background:#3b3a3c;font:700 1.3rem/1 var(--sr-kopf);color:#9a9893}
.sr-dunkel .ab-inhalt{min-width:0}
.sr-dunkel .ab-kin .ab-inhalt{padding:.5rem .8rem .65rem;background:linear-gradient(180deg,#2c2b2e,#353437);
  border-top:2px solid var(--gelb);clip-path:polygon(0 0,100% 0,100% 100%,12px 100%,0 calc(100% - 12px))}
.sr-dunkel .ab-ich .ab-inhalt{padding:.5rem .8rem .65rem;
  background:var(--sr-zeilen),linear-gradient(90deg,#5e0d0e,#8a1216 55%,#a3171c);
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%)}
.sr-dunkel .ab-wer{display:flex;gap:.6rem;align-items:baseline;margin-bottom:.2rem}
.sr-dunkel .ab-ich .ab-wer{justify-content:flex-end}
.sr-dunkel .ab-name{font:700 .76rem/1.1 var(--sr-schmal);letter-spacing:.1em;text-transform:uppercase;color:var(--gelb)}
.sr-dunkel a.ab-name{text-decoration:none}
.sr-dunkel a.ab-name:hover{color:#fff}
.sr-dunkel .ab-sl .ab-name{font:700 .6rem/1 var(--sr-kopf);letter-spacing:.14em;color:var(--akzent-text)}
.sr-dunkel .ab-zeit{font:400 .7rem/1 var(--sr-schmal);color:var(--sehr-leise)}
.sr-dunkel .ab-ich .ab-zeit{color:#f0dcdc}
/* the body font of the books (Optima nova for Friz Quadrata), a little larger than the
   rest of the app - it is the text one reads here */
.sr-dunkel .ab-text{white-space:pre-wrap;overflow-wrap:anywhere;font:400 calc(1.08rem * var(--ab-schrift,1))/1.58 var(--serif);color:#f1efe9}
.sr-dunkel .ab-sl .ab-text{font-size:calc(1.14rem * var(--ab-schrift,1));line-height:1.62;color:#fff}
/* THE TOOLBAR IN THE HEAD BAR (09.10.2026): first in .ab-kl-rechts, a thin line to Favoriten; A− / A+ scale the chat text
   (--ab-schrift, abenteuer.js). The buttons are the bar's own buttons, only narrower. */
.sr-dunkel .ab-werkzeuge{display:flex;align-items:center;gap:.4rem;padding-right:1rem;border-right:1px solid rgba(255,255,255,.35)}
.sr-dunkel .ab-werkzeuge button{min-width:2.2rem;padding:.28rem .5rem;font:700 .8rem/1 var(--sr-schmal);letter-spacing:.04em}
.sr-dunkel .ab-werkzeuge button:disabled{opacity:.4;pointer-events:none}
/* THE CHAT'S WIDTH (10.10.2026): ▸◂ / ◂▸ beside A− / A+ set --ab-breite on the body (abenteuer.js) - the page column of
   the chat pages, 1180px the design's. A little room parts the two pairs; on a phone the column is the window, no buttons. */
.sr-dunkel.mit-kopfleiste .seite{max-width:var(--ab-breite,1180px)}
.sr-dunkel .ab-werkzeuge .ab-breite-knopf{letter-spacing:-.05em}
.sr-dunkel .ab-werkzeuge .ab-breite-knopf:nth-of-type(3){margin-left:.5rem}
@media(max-width:900px){.sr-dunkel .ab-werkzeuge .ab-breite-knopf{display:none}}
.sr-dunkel .ab-text em{color:#bdbab4}
.sr-dunkel .ab-ich .ab-text em{color:#f0cfcf}
.sr-dunkel .ab-fav-marke{font-size:.8rem;color:var(--gelb)}
.sr-dunkel .ab-wer .ab-fav-marke{margin-left:auto}
.sr-dunkel .ab-wer .ab-fav-marke + .ab-menue{margin-left:.3rem}

/* THE MENU "⋯": quiet until hovered; its panel a dark plate like a button row */
.sr-dunkel .ab-menue{border:0;background:none;color:var(--sehr-leise);font-size:1.05rem;line-height:1;
  padding:0 .2rem;opacity:0;transition:opacity .12s ease;clip-path:none}
.sr-dunkel .ab-nachricht:hover .ab-menue,.sr-dunkel .ab-menue:focus-visible{opacity:1}
.sr-dunkel .ab-menue:hover{color:var(--gelb)}
.sr-dunkel .ab-wer .ab-menue{margin-left:auto}
.sr-dunkel .ab-ich .ab-menue{color:#f0dcdc}
.sr-dunkel .ab-system .ab-menue{margin-left:.4rem}
.sr-dunkel .ab-blasenmenue{position:absolute;top:1.6rem;right:0;z-index:25;display:grid;min-width:13rem;
  background:#1c1b1e;border:1px solid var(--sr-linie);padding:.25rem;box-shadow:0 6px 18px rgba(0,0,0,.6)}
.sr-dunkel .ab-ich .ab-blasenmenue{right:auto;left:0}
.sr-dunkel .ab-blasenmenue button{border:0;background:none;text-align:left;font:700 .8rem/1.2 var(--sr-schmal);
  letter-spacing:.06em;text-transform:uppercase;color:#e8e6e2;padding:.4rem .55rem;white-space:nowrap;clip-path:none}
.sr-dunkel .ab-blasenmenue button:hover{color:var(--gelb);background:rgba(255,255,255,.05)}

/* THE TABLE LINES (scene change, cast, curtain falls): as the book separates its scenes -
   a small red cross each side, the line in the chapter font, small */
.sr-dunkel .ab-system{align-self:center;max-width:none;justify-content:center;align-items:center}
.sr-dunkel .ab-system-text{font:700 .62rem/1.5 var(--sr-kopf);letter-spacing:.14em;text-transform:uppercase;
  color:#a9a6a0;text-align:center}
.sr-dunkel .ab-system:not(.ab-hinweis):not(.ab-frage):not(.ab-meta):not(.ab-vorhang) .ab-system-text::before,
.sr-dunkel .ab-system:not(.ab-hinweis):not(.ab-frage):not(.ab-meta):not(.ab-vorhang) .ab-system-text::after{
  content:"\2716";margin:0 .8rem;color:#a3171c;font-size:.7rem}
/* HIS TURN (04.10.2026, Roger: "der hinweis oben ist sehr zaghaft", "evtl. einen balken über die ganze breite wo das steht"):
   a line that says who acts now is a bar across the column, dark red - his figure's yellow (abenteuer.js .ab-dran-zeile / .ab-ich-dran) */
.sr-dunkel .ab-system.ab-dran-zeile{align-self:stretch;background:linear-gradient(90deg,#5e0d0e,#a3171c);padding:.55rem 1rem;margin:.6rem 0}
.sr-dunkel .ab-system.ab-dran-zeile .ab-system-text{font-size:.9rem;color:#fff}
.sr-dunkel .ab-system.ab-dran-zeile .ab-system-text::before,.sr-dunkel .ab-system.ab-dran-zeile .ab-system-text::after{color:#f0dcdc}
.sr-dunkel .ab-system.ab-ich-dran{background:var(--gelb)}
.sr-dunkel .ab-system.ab-dran-zeile .ab-zf-knopf{margin:0 0 0 1rem;color:#f0dcdc;border-color:currentColor}
.sr-dunkel .ab-system.ab-ich-dran .ab-zf-knopf{color:#1b1a1c}
.sr-dunkel .ab-system.ab-ich-dran .ab-system-text{font-size:.95rem;color:#1b1a1c}
.sr-dunkel .ab-system.ab-ich-dran .ab-system-text::before,.sr-dunkel .ab-system.ab-ich-dran .ab-system-text::after{color:#1b1a1c}
/* THE CURTAIN OFFER: the warning box of the tab Abenteuer (red stripes), dark inset - an
   invitation to leave the table, so it stands out; its two buttons under the line */
.sr-dunkel .ab-vorhang{flex-wrap:wrap;gap:.6rem .8rem;justify-content:flex-start;align-self:stretch;
  padding:40px 26px 22px 28px;z-index:0}
.sr-dunkel .ab-vorhang::before{content:"";position:absolute;inset:0;z-index:-1;
  background:repeating-linear-gradient(0deg,#5e0d0e 0 2px,#86131a 2px 4px);
  clip-path:polygon(0 20px,20px 0,58% 0,calc(58% + 22px) 22px,calc(100% - 22px) 22px,100% 44px,100% 100%,0 100%)}
.sr-dunkel .ab-vorhang::after{content:"Vorhang";position:absolute;left:22px;top:9px;
  font:700 .7rem/1 var(--sr-kopf);letter-spacing:.1em;text-transform:uppercase;color:var(--gelb)}
.sr-dunkel .ab-vorhang .ab-system-text{flex-basis:100%;text-align:left;text-transform:none;letter-spacing:0;
  font:400 1rem/1.5 var(--serif);color:#fff;background:rgba(10,9,10,.85);padding:.6rem .8rem}
.sr-dunkel .ab-vorhang button.haupt{font-size:.8rem;padding:.35rem .9rem;background:var(--gelb);border-color:var(--gelb);color:#231f20}
.sr-dunkel .ab-vorhang button.haupt:hover{background:#fff;border-color:#fff;color:#231f20}
.sr-dunkel .ab-vorhang .ab-vorhang-zu,.sr-dunkel .ab-vorhang .ab-bild-zu,.sr-dunkel .ab-vorhang .ab-neben-zu,
.sr-dunkel .ab-vorhang .ab-bildwahl-kein{font-size:.8rem;padding:.35rem .9rem}
/* THE PICTURE OFFER (28.09.2026, issue #18) wears the curtain's box with its own label - so does a side adventure's (16.10.2026) */
.sr-dunkel .ab-bildangebot::after{content:"Bild"}
.sr-dunkel .ab-nebenangebot::after{content:"Nebenabenteuer"}
.sr-dunkel .ab-vorhang .ab-menue{position:absolute;top:10px;right:26px;margin:0;color:#f0dcdc}
/* A HINT to the game master and a QUESTION: a quiet line with its label */
.sr-dunkel .ab-hinweis .ab-system-text,.sr-dunkel .ab-frage .ab-system-text{text-transform:none;letter-spacing:.01em;
  font:italic 400 .9rem/1.45 var(--sr-schmal);color:var(--leise);padding:.25rem .7rem;
  border-left:2px solid #58595b;text-align:left}
.sr-dunkel .ab-frage .ab-system-text{font-style:normal;color:var(--text);border-left-color:var(--gelb)}
.sr-dunkel .ab-hinweis .ab-system-text::before,.sr-dunkel .ab-frage .ab-system-text::before{
  content:"An den Spielleiter: ";font:700 .62rem/1 var(--sr-kopf);font-style:normal;letter-spacing:.12em;
  text-transform:uppercase;color:var(--sehr-leise)}
/* THE GAME MASTER OUTSIDE THE STORY: his voice, not in play - a plate with a yellow rule on
   the left and its label on top. Its text follows A− / A+ like the bubbles (--ab-schrift, 10.10.2026 - Roger: "die
   spielleiter außerhalb des spiels schrift verändert ihre größe nicht mit"); the label keeps its size. */
.sr-dunkel .ab-meta{align-self:stretch;justify-content:flex-start;align-items:flex-start}
.sr-dunkel .ab-meta .ab-system-text{flex:1;white-space:pre-wrap;text-align:left;text-transform:none;letter-spacing:0;
  font:400 calc(1rem * var(--ab-schrift,1))/1.55 var(--serif);color:var(--text);padding:.55rem .8rem .65rem;
  background:linear-gradient(180deg,#262527,#2e2d30);border-left:3px solid var(--gelb)}
.sr-dunkel .ab-meta .ab-system-text::before{content:"Spielleiter · außerhalb der Geschichte";display:block;
  margin-bottom:.35rem;font:700 .6rem/1 var(--sr-kopf);letter-spacing:.12em;text-transform:uppercase;color:var(--gelb)}
/* A LOOKUP (/ausruestung ...): the value box - dark plate, yellow heading with a yellow rule */
.sr-dunkel .ab-nachschlag{align-self:stretch;flex-direction:column;align-items:stretch;gap:0;
  background:linear-gradient(180deg,#262527,#343335);padding:.55rem .75rem .75rem}
.sr-dunkel .ab-nachschlag-marke{align-self:stretch;font:600 .9rem/1.2 var(--sr-schmal);letter-spacing:.05em;
  text-transform:uppercase;color:var(--gelb);border-bottom:1px solid var(--gelb);padding:0 0 .25rem;margin-bottom:.45rem}
.sr-dunkel .ab-nachschlag .ab-menue{position:absolute;top:.5rem;right:.6rem;margin:0}
.sr-dunkel .ab-nachschlag-text{margin:0;white-space:pre-wrap;overflow-x:auto;max-width:100%;
  font:400 .84rem/1.5 ui-monospace,"SFMono-Regular",Consolas,monospace;color:#f1efe9;background:none;border:0;padding:0}
.sr-dunkel .ab-nachschlag-link{color:inherit;text-decoration:underline dotted;text-underline-offset:.18em}
.sr-dunkel .ab-nachschlag-link:hover{color:var(--gelb)}
/* THE ROLE-PLAY MODE'S ROLLS (26.09.2026, issue #38): a roll line as the value box - dark
   plate, yellow label; the dice small light squares, hits yellow, a glitch's 1s red, the
   rule-of-six dice after a gap with a dashed ring; they shake while they roll (abenteuer.js
   "THE ROLE-PLAY MODE'S DICE"). Roger's open roll: the same plate over the input, red rule. */
.sr-dunkel .ab-probe,.sr-dunkel .ab-probe-offen{align-self:stretch;display:flex;flex-direction:column;align-items:stretch;
  gap:.4rem;position:relative;background:linear-gradient(180deg,#262527,#343335);padding:.55rem .75rem .7rem}
.sr-dunkel .ab-probe-offen{margin-top:1rem;border-left:3px solid var(--akzent)}
.sr-dunkel .ab-probe-marke{font:600 .82rem/1.2 var(--sr-schmal);letter-spacing:.05em;text-transform:uppercase;
  color:var(--gelb);border-bottom:1px solid var(--gelb);padding-bottom:.2rem}
.sr-dunkel .ab-probe-seite{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .6rem}
.sr-dunkel .ab-probe-wer{font:400 .92rem/1.3 var(--sr-schmal);color:#f1efe9}
.sr-dunkel .ab-probe-pool,.sr-dunkel .ab-probe-edge{font:400 .78rem/1 var(--sr-schmal);color:var(--sehr-leise)}
.sr-dunkel .ab-probe-erfolge{font:700 .86rem/1 var(--sr-schmal);color:#f1efe9}
.sr-dunkel .ab-probe-gegen,.sr-dunkel .ab-probe-verdeckt{font:italic 400 .84rem/1.2 var(--sr-schmal);color:var(--leise)}
.sr-dunkel .ab-probe-auf{font-size:.7rem;padding:.15rem .5rem}
.sr-dunkel .ab-probe-ergebnis{font:700 .9rem/1.3 var(--sr-schmal);letter-spacing:.04em;text-transform:uppercase;color:var(--gelb)}
.sr-dunkel .ab-probe-ergebnis.nein{color:#e0474d}
.sr-dunkel .ab-probe-ergebnis.verborgen{display:none}
.sr-dunkel .ab-probe .ab-menue{position:absolute;top:.45rem;right:.6rem;margin:0}
/* a roll line with the roller's portrait before the box, like a bubble (26.09.2026) */
.sr-dunkel .ab-nachricht.ab-probe-mit{max-width:none;align-self:stretch}
.sr-dunkel .ab-probe-mit > .ab-probe{flex:1;min-width:0}
.sr-dunkel .ab-nachricht.ab-probe-ohne{display:block;max-width:none;align-self:stretch}
.sr-dunkel .ab-probe-entzug{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .6rem;margin-top:.2rem;opacity:.9}
.sr-dunkel .ab-wuerfel{display:inline-flex;flex-wrap:wrap;gap:3px}
.sr-dunkel .ab-w6{display:inline-grid;place-items:center;width:1.4rem;height:1.4rem;border-radius:3px;
  background:#d9d7d2;color:#231f20;font:700 .8rem/1 var(--sr-schmal)}
.sr-dunkel .ab-w6.treffer{background:var(--gelb)}
.sr-dunkel .ab-w6.eins{background:#a3171c;color:#fff}
.sr-dunkel .ab-w6.extra{outline:1px dashed var(--gelb);outline-offset:1px}
.sr-dunkel .ab-w6:not(.extra) + .ab-w6.extra{margin-left:.55rem}
.sr-dunkel .ab-wuerfel.rollt .ab-w6{animation:sr-w6-rollen .18s linear infinite}
@keyframes sr-w6-rollen{0%,100%{transform:rotate(-14deg) translateY(-1px)}50%{transform:rotate(14deg) translateY(1px)}}
@media (prefers-reduced-motion:reduce){.sr-dunkel .ab-wuerfel.rollt .ab-w6{animation:none}}
/* the pool's breakdown under the dice, and his choice of limit (26.09.2026) */
.sr-dunkel .ab-probe-aufbau{flex-basis:100%;font:italic 400 .8rem/1.3 var(--sr-schmal);color:var(--leise)}
.sr-dunkel .ab-probe-limits{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem}
.sr-dunkel .ab-probe-limits button{font-size:.72rem;padding:.2rem .55rem}
.sr-dunkel .ab-probe-limits button.an{background:var(--gelb);border-color:var(--gelb);color:#231f20}
.sr-dunkel .ab-probe-limits button:disabled{opacity:.4;cursor:not-allowed}
/* THE COMPACT CARD (04.10.2026, abenteuer.js "THE COMPACT CARD", Roger: "kleiner aber einfach verständlich mit
   durchführung", "die wichtigen zahlen die verrechnet werden in diesen großen ziffern gelb"; replaces the duel card of
   03.10.2026): a head line with small portraits, "A → B" and what happens; then numbered steps of one line each - the
   label, the reckoned numbers big and yellow (.ab-z, the other side's white), the dice counts small, the outcome as a pill.
   "Details" opens the dice and sums (.offen on the card). No clip-path on the card: the "⋯" menu opens out of it. */
.sr-dunkel .ab-probe.ab-karte,.sr-dunkel .ab-probe-offen.ab-karte{gap:0;padding:0 0 .25rem;counter-reset:schritt;
  background:linear-gradient(180deg,#2d2c2e,#222123);border:1px solid rgba(255,255,255,.08)}
.sr-dunkel .ab-probe-offen.ab-karte{border-right:3px solid var(--gelb)}
.sr-dunkel .ab-kk-kopf{display:flex;flex-direction:column;align-items:flex-start;gap:.35rem;padding:.5rem 2.2rem .45rem .7rem;
  border-bottom:1px solid rgba(253,183,20,.22)}
.sr-dunkel .ab-kk-figur{display:inline-flex;align-items:center;gap:.4rem;min-width:0}
.sr-dunkel .ab-kk-bild{flex:none;display:grid;place-items:center;width:1.75rem;height:1.75rem;overflow:hidden;box-sizing:border-box;
  border:1px solid #a3171c;background:#3b3a3c;font:700 .62rem/1 var(--sr-kopf);color:#9a9893}
.sr-dunkel .ab-kk-figur.ich .ab-kk-bild{border-color:var(--gelb)}
.sr-dunkel .ab-kk-bild img{width:100%;height:100%;object-fit:cover}
.sr-dunkel .ab-kk-name{font:700 .8rem/1.15 var(--sr-kopf);letter-spacing:.04em;text-transform:uppercase;color:#fff}
.sr-dunkel .ab-kk-pfeil{font:700 .95rem/1 var(--sr-schmal);color:var(--gelb)}
.sr-dunkel .ab-kk-quelle{font:600 .92rem/1.2 var(--sr-schmal);color:#cfccc5}
.sr-dunkel .ab-kk-titel{font:700 .95rem/1.2 var(--sr-kopf);letter-spacing:.08em;text-transform:uppercase;color:var(--gelb)}
.sr-dunkel .ab-kk-wer{display:inline-flex;align-items:center;flex-wrap:wrap;gap:.3rem .5rem}
.sr-dunkel .ab-schritt{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.25rem .55rem;
  padding:.4rem .7rem;border-top:1px solid rgba(255,255,255,.05)}
.sr-dunkel .ab-kk-kopf + .ab-d-runden > .ab-schritt:first-child{border-top:0}
.sr-dunkel .ab-s-nr{display:grid;place-items:center;width:1.2rem;height:1.2rem;box-sizing:border-box;border:1px solid #58575b;border-radius:50%;
  font:700 .66rem/1 var(--sr-schmal);color:#9a9893}
.sr-dunkel .ab-s-nr::before{counter-increment:schritt;content:counter(schritt)}
.sr-dunkel .ab-s-lab{font:700 .72rem/1.1 var(--sr-schmal);letter-spacing:.12em;text-transform:uppercase;color:#9a9893}
.sr-dunkel .ab-s-rech{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .35rem;min-width:0;font:500 .92rem/1.2 var(--sr-schmal);color:#cfccc5}
.sr-dunkel .ab-z{font:700 1.5rem/1 var(--sr-kopf);color:var(--gelb)}
.sr-dunkel .ab-z.grau{color:#f1efe9}
.sr-dunkel .ab-w{font:600 .82rem/1 var(--sr-schmal);letter-spacing:.04em;color:#9a9893}
.sr-dunkel .ab-s-erg{justify-self:end;padding:.3rem .6rem;background:var(--gelb);color:#231f20;font:700 .72rem/1.1 var(--sr-kopf);
  letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.sr-dunkel .ab-s-erg.nein{background:#a3171c;color:#fff}
.sr-dunkel .ab-s-erg.grau{background:#3a393b;color:#cfccc5}
.sr-dunkel .ab-s-erg[hidden]{display:none}
/* EACH CARD SAYS ITS OWN OUTCOME (12.10.2026, abenteuer.js paarZeile; Roger's picture: a red ground on the attack that failed, a
   green word on the answer that held): a roll that got through is a green plate ('ja'), and its card takes the ground of its
   outcome - a tint laid over whatever ground the card has (an inset shadow; the card's parts have no ground of their own). Not
   on a pair's acting card while its answer still waits for his "Weiter" (.ab-antwort-wartet on the line). */
.sr-dunkel .ab-s-erg.ja{background:#0ab092;color:#06231d}
.sr-dunkel .ab-karte.ab-aus-ja{box-shadow:inset 0 0 0 999px rgba(10,176,146,.16)}
.sr-dunkel .ab-karte.ab-aus-nein{box-shadow:inset 0 0 0 999px rgba(163,23,28,.3)}
.sr-dunkel .ab-antwort-wartet .ab-karte.ab-aus-ja,.sr-dunkel .ab-antwort-wartet .ab-karte.ab-aus-nein{box-shadow:none}
.sr-dunkel .ab-antwort-wartet .ab-s-erg.ab-urteil-a{display:none}
.sr-dunkel .ab-schritt .ab-probe-auf{grid-column:1 / -1;justify-self:start}
.sr-dunkel .ab-s-wuerfel{padding:0 .7rem .35rem}
.sr-dunkel .ab-leben{display:inline-flex;flex-wrap:wrap;align-items:center;gap:3px .5rem}
.sr-dunkel .ab-leben-k,.sr-dunkel .ab-leben-g{display:flex;gap:2px}
.sr-dunkel .ab-leben-k i{display:block;width:.62rem;height:.62rem;background:#d8c25a}
.sr-dunkel .ab-leben-g i{display:block;width:.62rem;height:.25rem;background:#8f8c86}
.sr-dunkel .ab-anhang{position:relative}
.sr-dunkel .ab-anhang > .ab-menue{position:absolute;top:.4rem;right:.3rem;margin:0}
.sr-dunkel .ab-anhang > .ab-schritt:first-child{padding-right:2rem}
.sr-dunkel .ab-mehr{display:block;margin:.35rem auto .2rem;padding:.3rem .8rem;background:transparent;border:1px solid rgba(255,255,255,.18);
  color:#9a9893;font:600 .74rem/1 var(--sr-schmal);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.sr-dunkel .ab-mehr:hover{color:var(--gelb);border-color:var(--gelb)}
.sr-dunkel .ab-karte > .ab-menue{top:.5rem;right:.6rem;color:#f6d7d8}
.sr-dunkel .ab-leben i.weg{background:#3a393b}
.sr-dunkel .ab-leben i.neu{background:#a3171c;box-shadow:inset 0 0 0 1px #ff6b6b}
.sr-dunkel .ab-leben-text{font:500 .8rem/1.1 var(--sr-schmal);color:#9a9893}
.sr-dunkel .ab-sblock{position:relative}
.sr-dunkel .ab-wartet{opacity:.45}
.sr-dunkel .ab-details{display:none;margin:.6rem .95rem 0;padding:.7rem .85rem;background:#1a191b}
.sr-dunkel .ab-karte.offen .ab-details{display:block}
.sr-dunkel .ab-dz{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:.55rem .8rem;margin:0}
.sr-dunkel .ab-dz dt{font:700 .72rem/1.7 var(--sr-schmal);letter-spacing:.14em;text-transform:uppercase;color:var(--gelb)}
.sr-dunkel .ab-dz dd{margin:0;display:flex;flex-direction:column;gap:.35rem;min-width:0}
.sr-dunkel .ab-klartext{font:500 .95rem/1.35 var(--sr-schmal);color:#cfccc5}
.sr-dunkel .ab-klartext .plus{color:#7cc6d8}
.sr-dunkel .ab-klartext .minus{color:#ef6a6f}
.sr-dunkel .ab-karte .ab-wuerfel{display:flex;flex-wrap:wrap;align-items:center;gap:3px}
.sr-dunkel .ab-karte .ab-w6{width:1.45rem;height:1.45rem;border-radius:3px;background:#3a393b;color:#9a9893;font:700 .85rem/1 var(--sr-schmal)}
.sr-dunkel .ab-karte .ab-w6.treffer{background:var(--gelb);color:#231f20}
.sr-dunkel .ab-karte .ab-w6.ueber{background:transparent;color:var(--gelb);box-shadow:inset 0 0 0 1px var(--gelb);opacity:.75}
.sr-dunkel .ab-karte .ab-w6.eins{background:#a3171c;color:#fff}
.sr-dunkel .ab-limit-strich{display:inline-flex;flex-direction:column;align-items:center;gap:2px;margin:0 .3rem}
.sr-dunkel .ab-limit-strich i{display:block;width:2px;height:1.2rem;background:#e0474d}
.sr-dunkel .ab-limit-strich em{font:700 .58rem/1 var(--sr-schmal);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:#ef6a6f;white-space:nowrap}
.sr-dunkel .ab-kwahl{display:flex;flex-direction:column;gap:.5rem;margin:.8rem .95rem 0}
.sr-dunkel .ab-edge-zeile{display:flex;align-items:center;gap:.6rem}
.sr-dunkel .ab-hexe{display:flex;gap:.3rem}
.sr-dunkel .ab-hx{display:block;width:1.05rem;height:1.2rem;background:#3a393b;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.sr-dunkel .ab-hx.an{background:var(--gelb)}
.sr-dunkel .ab-karte .ab-probe-limits{gap:.4rem}
.sr-dunkel .ab-karte .ab-probe-limits button{min-height:2.2rem;padding:.3rem .8rem;font-size:.85rem}
.sr-dunkel .ab-karte .ab-probe-limits button.an{background:#3a2f0f;border-color:var(--gelb);color:var(--gelb);box-shadow:inset 0 0 0 1px var(--gelb)}
.sr-dunkel .ab-karte .ab-probe-knoepfe{padding:.8rem .95rem 0}
.sr-dunkel .ab-karte .ab-probe-knoepfe button{min-height:2.5rem}
.sr-dunkel .ab-notiz{margin:.4rem .95rem 0;font:italic 400 .9rem/1.3 var(--sr-schmal);color:#9a9893}
@media (max-width:640px){
  .sr-dunkel .ab-dz{grid-template-columns:minmax(0,1fr)}
}
.sr-dunkel .ab-kampf-figur.ueberrascht{border-style:dashed;border-color:#e0474d}
.sr-dunkel .ab-kampf-figur.wartet{border-style:dotted;border-color:#e3b341;opacity:.75}
/* THE FIGHT (27.09.2026, abenteuer.js "THE FIGHT"): a narrow bar above the input - the round,
   the order as small square portraits with names; who acts outlined yellow, who acted faded, who
   is through for this pass struck out, hidden figures with their place; his initiative card
   is the open roll's plate with a yellow rule */
.sr-dunkel .ab-kampf{display:flex;flex-direction:column;gap:.35rem;margin-top:1rem;padding:.45rem .6rem .55rem;
  background:linear-gradient(180deg,#1d1c1f,#141316);border-top:2px solid var(--akzent);border-bottom:1px solid #38373b}
.sr-dunkel .ab-kampf-kopf{font:700 .74rem/1 var(--sr-schmal);letter-spacing:.12em;text-transform:uppercase;color:var(--gelb)}
.sr-dunkel .ab-kampf-reihe{display:flex;flex-wrap:wrap;gap:.35rem;list-style:none;margin:0;padding:0}
.sr-dunkel .ab-kampf-figur{display:grid;grid-template-columns:1.9rem auto;grid-template-rows:auto auto;column-gap:.35rem;align-items:center;
  padding:.2rem .45rem .2rem .2rem;border:1px solid #3d3c40;background:#1f1e21;font:400 .76rem/1.1 var(--sr-schmal);color:#f1efe9}
.sr-dunkel .ab-kampf-bild{grid-row:1 / 3;display:grid;place-items:center;width:1.9rem;height:1.9rem;overflow:hidden;background:#0b0a0c;
  color:#8d8a84;font-weight:700}
.sr-dunkel .ab-kampf-bild img{width:100%;height:100%;object-fit:cover;object-position:center top}
.sr-dunkel .ab-kampf-figur.gegner .ab-kampf-bild{color:#e0474d}
.sr-dunkel .ab-kampf-zahl{font-weight:700;color:var(--gelb)}
.sr-dunkel .ab-kampf-figur.dran{border-color:var(--gelb);box-shadow:0 0 8px rgba(253,183,20,.45)}
.sr-dunkel .ab-kampf-figur.ich .ab-kampf-name{color:var(--gelb)}
/* what is in her hand (05.10.2026), a small grey line under portrait and name */
.sr-dunkel .ab-kampf-hand{grid-column:1 / -1;max-width:9rem;font-size:.66rem;color:#8d8a84;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-dunkel .ab-kampf-seite.schmal .ab-kampf-hand{display:none}
.sr-dunkel .ab-kampf-figur.fertig{opacity:.5}
.sr-dunkel .ab-kampf-figur.durch{opacity:.4}
.sr-dunkel .ab-kampf-figur.durch .ab-kampf-name{text-decoration:line-through}
/* ACTIONS IN A PHASE (29.09.2026, Roger: "drei kleinen punkten"): under the one acting - two yellow for the simple actions, a
   gap, a white one for the free action of the pass; used = hollow (abenteuer.js, kampf.php 'hd') */
.sr-dunkel .ab-kampf-hd{grid-column:1 / -1;display:flex;justify-content:center;gap:3px;padding-top:3px}
.sr-dunkel .ab-kampf-hd i{display:block;width:.45rem;height:.45rem;border-radius:50%;background:var(--gelb)}
.sr-dunkel .ab-kampf-hd i.frei{margin-left:3px;background:#f1efe9}
.sr-dunkel .ab-kampf-hd i.leer{background:transparent;box-shadow:inset 0 0 0 1px var(--gelb)}
.sr-dunkel .ab-kampf-hd i.frei.leer{box-shadow:inset 0 0 0 1px #8d8a84}
.sr-dunkel .ab-kampf-halt{align-items:center}
.sr-dunkel .ab-kampf-halt-text{font:400 .85rem/1.3 var(--sr-schmal);color:#f0dcdc}
/* the order as a fixed column left of the chat while there is room (abenteuer.js kampfPlatz) */
.sr-dunkel .ab-kampf[hidden]{display:none}
/* at the top under the head bar, level with the sketch on the right (07.10.2026, Roger: "die rundenbeteiligten bitte nach oben
   schieben" - centred, it stood over the cut-out figure below). OVER EVERYTHING BUT THE HEAD BAR (17.10.2026, Roger: "die
   initiative-spalte soll wieder über allem liegen (nur unter der kopfleiste)"): z-index 35 - over the panels and buttons "Fotos",
   "Notizen", "Spielleiter" (29), the figure panel (30) and the arrows (30); the head bar 40, the large views 55 */
.sr-dunkel .ab-kampf-seite{position:fixed;width:max-content;top:3.6rem;z-index:35;margin:0;max-height:calc(100vh - 4.6rem);overflow-y:auto;box-sizing:border-box}
.sr-dunkel .ab-kampf-seite .ab-kampf-reihe{flex-direction:column;flex-wrap:nowrap}
.sr-dunkel .ab-kampf-seite .ab-kampf-figur{grid-template-columns:1.9rem minmax(0,1fr);box-sizing:border-box;width:100%}
.sr-dunkel .ab-kampf-seite .ab-kampf-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* the heading on two unbroken lines, "Kampfrunde 1" / "Durchgang 1" - they set the least width, the names widen it
   (30.09.2026: with the one-line heading contained, short names made the column so narrow it broke mid-phrase);
   cut with … where the room ends, so no scrollbar */
.sr-dunkel .ab-kampf-kopf b{font-weight:inherit}
.sr-dunkel .ab-kampf-seite{overflow-x:hidden}
.sr-dunkel .ab-kampf-seite .ab-kampf-kopf{line-height:1.3}
.sr-dunkel .ab-kampf-seite .ab-kampf-kopf b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sr-dunkel .ab-kampf-seite .ab-kampf-trenn{display:none}
.sr-dunkel .ab-kampf-seite.schmal{padding:.35rem .35rem .45rem}
.sr-dunkel .ab-kampf-seite.schmal .ab-kampf-kopf{font-size:.56rem;letter-spacing:.06em;line-height:1.25}
.sr-dunkel .ab-kampf-seite.schmal .ab-kampf-name{display:none}
.sr-dunkel .ab-kampf-haltbox{margin-top:.6rem}
.sr-dunkel .ab-ini-karte{border-left-color:var(--gelb)}
/* THE SITUATION SKETCH (26.09.2026): in the history, in the direction fly-out, large on a click */
.ab-skizze-svg{display:block;width:100%;max-width:44rem;height:auto}
/* in the history at HALF that width (10.10.2026, Roger: "die karte die im chat angezeigt [wird] nur halb so groß") - a
   click shows it large, and the latest one stands top right anyway */
.ab-nachricht.ab-skizze .ab-skizze-svg{max-width:22rem}
.ab-skizze-klick{cursor:zoom-in}
/* the condition monitor in the direction fly-out (26.09.2026) */
.sr-dunkel .ab-regie-zustand{display:flex;flex-direction:column;gap:.45rem;margin:.5rem 0 .7rem}
.sr-dunkel .ab-zm-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .5rem;font-size:.78rem;letter-spacing:0;text-transform:none}
.sr-dunkel .ab-zm-name{flex-basis:100%;font-weight:700;color:inherit;text-decoration:none}
.sr-dunkel .ab-zm-zeile.ich .ab-zm-name{color:#fdb714}
.sr-dunkel .ab-zm-kaest{display:inline-flex;align-items:center;gap:2px}
.sr-dunkel .ab-zm-kaest b{font-size:.68rem;margin-right:2px}
.sr-dunkel .ab-zm-kaest i{width:7px;height:9px;border:1px solid #58575b;background:rgba(0,0,0,.35)}
.sr-dunkel .ab-zm-kaest.k i.voll{background:#e0474d;border-color:#e0474d}
.sr-dunkel .ab-zm-kaest.g i.voll{background:#fdb714;border-color:#fdb714}
.sr-dunkel .ab-zm-rest{opacity:.85}
.sr-dunkel .ab-zm-zeile.bewusstlos .ab-zm-rest,.sr-dunkel .ab-zm-zeile.stirbt .ab-zm-rest,.sr-dunkel .ab-zm-zeile.tot .ab-zm-rest{color:#ff8a8f;opacity:1;font-weight:700}
/* magic stage A: spells kept up / on her */
.sr-dunkel .ab-zm-zauber{display:block;font:400 .74rem/1.3 var(--sr-schmal);color:#f0dcdc;text-transform:none;letter-spacing:.02em}
.sr-dunkel .ab-zm-zauber.auf{color:#fdb714}
.sr-dunkel .ab-zm-weg{margin-left:.3rem;padding:0 .3rem;font-size:.7rem;line-height:1.2;background:none;border:1px solid rgba(255,255,255,.35);color:#fff;cursor:pointer}
/* the fly-out's capitals and letter spacing must not reach the plan's labels (26.09.2026) */
.ab-skizze-svg text{letter-spacing:0;word-spacing:0;text-transform:none;font-style:normal}
.sr-dunkel .ab-regie-skizze{display:block;width:100%;margin:.4rem 0;padding:0;background:none;border:1px solid #58575b;cursor:zoom-in}
.sr-dunkel .ab-regie-skizze:hover{border-color:var(--gelb)}
/* THE SKETCH TOP RIGHT (07.10.2026): fixed beside the chat column's right edge - left and width set by abenteuer.js
   lagePlatz -, under the direction fly-out (z 29) and the arrows (z 30: the arrow down lies on it where they meet);
   while it shows, the fly-out's sketch and "Lage zeichnen" are hidden (body.ab-lage-oben) */
.sr-dunkel .ab-lage{position:fixed;top:3.6rem;z-index:28;display:grid;gap:.5rem}
.sr-dunkel .ab-lage[hidden]{display:none}
/* THE FOLDING BAR above the sketch (10.10.2026): "Lageskizze" and an arrow; .zu hides the sketch and its button below it -
   the scene's picture and name above stay */
.sr-dunkel .ab-lage-leiste{display:flex;justify-content:space-between;align-items:center;width:100%;padding:.22rem .5rem;clip-path:none;
  background:rgba(12,11,13,.9);border:1px solid #58575b;color:#f7eaea;font:700 .68rem/1.3 var(--sr-schmal);letter-spacing:.1em;
  text-transform:uppercase;cursor:pointer}
.sr-dunkel .ab-lage-leiste:hover{border-color:var(--gelb);color:var(--gelb)}
.sr-dunkel .ab-lage-pfeil{font-size:.8rem;line-height:1}
.sr-dunkel .ab-lage.zu .ab-lage-bild,.sr-dunkel .ab-lage.zu .ab-lage-neu{display:none}
.sr-dunkel .ab-lage-bild{display:block;width:100%;padding:0;background:rgba(12,11,13,.9);border:1px solid #58575b;clip-path:none;cursor:zoom-in}
.sr-dunkel .ab-lage-bild:hover{border-color:var(--gelb)}
.sr-dunkel .ab-lage-bild:disabled{cursor:default;border-color:#58575b}
.sr-dunkel .ab-lage-leer{display:block;aspect-ratio:4/3;background:#2a292c}
.sr-dunkel .ab-lage .ab-funktion{width:100%;clip-path:none;background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.3);color:#f7eaea}
.sr-dunkel .ab-lage .ab-funktion:hover{background:rgba(0,0,0,.45);color:var(--gelb);border-color:var(--gelb)}
.sr-dunkel .ab-lage .ab-funktion:disabled{opacity:.45}
.sr-dunkel .ab-lage .ab-regie-szene{margin:0;padding:.4rem;background:rgba(12,11,13,.9)}   /* the scene above it, readable over the picture */
.sr-dunkel .ab-lage .ab-regie-szene a{flex-direction:column;align-items:stretch;gap:.4rem}   /* the name under the picture (Roger) */
.sr-dunkel .ab-lage .ab-regie-bild{width:100%;height:auto;aspect-ratio:16/9}
/* CUT-OUT FIGURES AT THE BOTTOM CORNERS (07.10.2026, a trial for position and size - abenteuer.js freistellerZeigen):
   in front of the column and the footer, under the fly-out, the sketch and the arrows; clicks pass through */
/* pushed out of the window at the bottom and the sides - a fixed element's overflow makes no scrollbar */
.sr-dunkel .ab-freisteller{position:fixed;bottom:calc(100px - 30vh);z-index:5;--frei-h:70vh;height:var(--frei-h);
  width:var(--frei-w,auto);overflow:hidden;opacity:.9;pointer-events:none}
/* trimmed on all four sides: abenteuer.js freistellerZuschnitt sets --frei-f / --frei-w (the box) and --frei-t / --frei-l */
.sr-dunkel .ab-freisteller img{display:block;width:auto;height:calc(var(--frei-h) / var(--frei-f,1));
  transform:translate(calc(var(--frei-l,0) * -100%),calc(var(--frei-t,0) * -100%))}
/* flush with the window edge: the box is the figure itself since the trim (Roger: Elysia "zu weit links" at -15 % of it) */
.sr-dunkel .ab-freisteller.links{left:0}
.sr-dunkel .ab-freisteller.rechts{right:0}
/* sliding out and in at its side (07.10.2026, Roger: "das alte schiebt raus das neue rein"): --frei-weg is the way off the
   screen (abenteuer.js freistellerPlatz); 'translate' adds to the inline transform that centres the box */
.sr-dunkel .ab-freisteller.wartet{visibility:hidden}
.sr-dunkel .ab-freisteller.rein{animation:frei-rein .3s ease-out both}
.sr-dunkel .ab-freisteller.raus{animation:frei-raus .225s ease-in both}
@keyframes frei-rein{from{translate:var(--frei-weg,0px) 0}to{translate:0 0}}
@keyframes frei-raus{from{translate:0 0}to{translate:var(--frei-weg,0px) 0}}
.sr-dunkel.ab-lage-oben .ab-flyout .ab-regie-skizze,.sr-dunkel.ab-lage-oben .ab-flyout .ab-lage-zeichnen,
.sr-dunkel.ab-lage-oben .ab-flyout .ab-regie-szene{display:none}
.ab-skizze-gross{position:fixed;inset:0;z-index:55;display:flex;align-items:center;justify-content:center;
  background:#0e0d0f;cursor:zoom-out}
.ab-skizze-gross .ab-skizze-svg{max-width:none;height:auto}
/* A PICTURE LINE (28.09.2026, issue #18): the preview in the box, the original on the sketch's overlay */
.ab-bildzeile .ab-bild-rahmen{position:relative;display:inline-block;max-width:min(100%,15rem)}
.ab-bildzeile .ab-bild-klick{display:block;max-width:100%;height:auto;cursor:zoom-in}
.ab-skizze-gross .ab-bild-gross{max-width:96vw;max-height:94vh;object-fit:contain}
/* the magnifier to 100 % and the ✕, top right (17.10.2026, abenteuer.js bildGross); in 100 % the overlay scrolls - a block,
   not the centring flex box, which would cut off the picture's left and top beyond the window */
.ab-gross-knoepfe{position:fixed;top:1rem;right:1rem;display:flex;gap:.5rem}
.ab-gross-knopf{display:flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;padding:0;font:700 1rem/1 var(--sr-schmal);
  color:#fff;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.6);clip-path:none;cursor:pointer}
.ab-gross-knopf:hover{border-color:var(--gelb);color:var(--gelb)}
.ab-gross-knopf[hidden]{display:none}
.ab-gross-knopf svg{width:18px;height:18px}
.ab-bild-ansicht.voll{display:block;overflow:auto;cursor:default}
.ab-bild-ansicht.voll .ab-bild-gross{display:block;max-width:none;max-height:none;margin:auto}
.sr-dunkel .ab-probe-knoepfe{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.2rem}
.sr-dunkel .ab-probe-knoepfe button{font-size:.8rem;padding:.35rem .9rem}
.sr-dunkel .ab-probe-knoepfe button.haupt{background:var(--gelb);border-color:var(--gelb);color:#231f20}
.sr-dunkel .ab-probe-knoepfe button.haupt:hover{background:#fff;border-color:#fff;color:#231f20}
/* THE YELLOW BUTTONS THAT WAIT FOR HIM PULSE (20.10.2026, Roger: "die gelben weiter buttons im abenteuer leicht pulsierend machen,
   ich übersehe die manchmal"): "Weiter ▾" and every yellow main button of a card or of the fight's hold while it can be clicked -
   CSS alone cannot tell "Weiter" from "Würfeln" or "Annehmen". Brightness, not a glow: .ab-weitere's clip-path would cut a
   shadow; nothing moves, nothing grows. Still on hover and for reduced motion.
   INTO THE DARK, not lighter (same day, Roger: "eher von der normalen farbe ins dunkle pulsieren"): 1 -> 0.75 -> 1. */
@keyframes ab-weiter-puls{0%,100%{filter:none}50%{filter:brightness(.75)}}
.sr-dunkel .ab-weitere:not([hidden]),.sr-dunkel .ab-probe-knoepfe button.haupt:not(:disabled){animation:ab-weiter-puls 1.8s ease-in-out infinite}
.sr-dunkel .ab-weitere:hover,.sr-dunkel .ab-probe-knoepfe button.haupt:hover{animation:none}
@media (prefers-reduced-motion:reduce){.sr-dunkel .ab-weitere,.sr-dunkel .ab-probe-knoepfe button.haupt{animation:none}}

/* STATUS AND INPUT: a console at the foot of the column */
.sr-dunkel .ab-status{margin:1rem 0 0;font:italic 400 .9rem/1.3 var(--sr-schmal);color:var(--leise)}
.sr-dunkel .ab-status[hidden]{display:none}
.sr-dunkel .ab-status.ab-schreibt{color:var(--gelb);animation:sr-ab-puls 1.4s ease-in-out infinite}
/* THE SUMMARY AT THE END (04.10.2026, abenteuer.js "THE SUMMARY AT THE END"): the first card version (03.10.2026, commit
   5d6bb76) scoped to .ab-zf - its pool cells are .ab-zz, its pips .ab-zf-vs, so nothing touches the compact cards */
.sr-dunkel .ab-zf .ab-karte-kopf{display:flex;align-items:center;flex-wrap:wrap;gap:.3rem .8rem;padding:.55rem 2.4rem .55rem .9rem;
  background:linear-gradient(90deg,#5e0d0e,#a3171c 55%,#5e0d0e)}
.sr-dunkel .ab-zf .ab-karte-titel{font:700 .72rem/1.3 var(--sr-kopf);letter-spacing:.14em;text-transform:uppercase;color:#fff}
.sr-dunkel .ab-zf .ab-karte-grund{margin-left:auto;font:italic 400 .95rem/1.25 var(--sr-schmal);color:#f6d7d8}
.sr-dunkel .ab-zf .ab-teil{position:relative;display:flex;flex-direction:column;gap:.6rem;padding:.85rem .95rem .1rem}
.sr-dunkel .ab-zf .ab-teil-kopf{display:flex;align-items:center;flex-wrap:wrap;gap:.3rem .6rem;padding-bottom:.4rem;border-bottom:1px solid rgba(253,183,20,.3)}
.sr-dunkel .ab-zf .ab-ikon{flex:none;display:grid;place-items:center;width:1.5rem;height:1.5rem;background:var(--gelb);color:#231f20;
  clip-path:polygon(0 0,100% 0,100% 72%,72% 100%,0 100%)}
.sr-dunkel .ab-zf .ab-ikon.rot{background:#a3171c;color:#fff}
.sr-dunkel .ab-zf .ab-ikon svg{width:1rem;height:1rem}
.sr-dunkel .ab-zf .ab-teil-titel{font:700 .86rem/1 var(--sr-schmal);letter-spacing:.16em;text-transform:uppercase;color:var(--gelb)}
.sr-dunkel .ab-zf .ab-teil-wer{margin-left:auto;font:600 .95rem/1.25 var(--sr-schmal);color:#f1efe9;text-align:right}
.sr-dunkel .ab-zf .ab-teil-wer span{font-weight:400;color:#9a9893}
.sr-dunkel .ab-zf .ab-teil-zeile{display:flex;align-items:flex-start;gap:1rem}
.sr-dunkel .ab-zf .ab-zahl{flex:none;width:3.3rem;text-align:center;padding-top:.1rem}
.sr-dunkel .ab-zf .ab-zahl b{display:block;font:700 1.55rem/1 var(--sr-kopf);color:#f1efe9}
.sr-dunkel .ab-zf .ab-zahl small{display:block;margin-top:.35rem;font:600 .64rem/1 var(--sr-schmal);letter-spacing:.14em;text-transform:uppercase;color:#9a9893}
.sr-dunkel .ab-zf .ab-teil-rechts{flex:1;min-width:0;display:flex;flex-direction:column;gap:.6rem}
.sr-dunkel .ab-zf .ab-balken{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.6rem .5rem}
.sr-dunkel .ab-zf .ab-bt{display:flex;flex-direction:column;gap:.3rem;max-width:100%}
.sr-dunkel .ab-zf .ab-zellen{display:flex;flex-wrap:wrap;gap:2px}
.sr-dunkel .ab-zf .ab-zz{display:block;width:.62rem;height:.95rem;border-radius:2px;background:#e9e6df}
.sr-dunkel .ab-zf .ab-zz.f{background:var(--gelb)}
.sr-dunkel .ab-zf .ab-zz.g{background:#8f8c86}
.sr-dunkel .ab-zf .ab-zz.p{background:#5fb3c7}
.sr-dunkel .ab-zf .ab-zz.m{background:repeating-linear-gradient(135deg,#e0474d 0 2px,transparent 2px 4px);box-shadow:inset 0 0 0 1px #e0474d}
.sr-dunkel .ab-zf .ab-balken.viele .ab-zz{width:.4rem}
.sr-dunkel .ab-zf .ab-bt small{max-width:20rem;font:500 .82rem/1.15 var(--sr-schmal);color:#cfccc5}
.sr-dunkel .ab-zf .ab-bt small.p{color:#7cc6d8}
.sr-dunkel .ab-zf .ab-bt small.m{color:#ef6a6f}
.sr-dunkel .ab-zf .ab-gleich{padding-bottom:1.1rem;font:700 .85rem/1 var(--sr-kopf);color:#f1efe9;white-space:nowrap}
.sr-dunkel .ab-zf .ab-wuerfel{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
.sr-dunkel .ab-zf .ab-w6{width:1.65rem;height:1.65rem;border-radius:4px;background:#3a393b;color:#9a9893;font:700 .95rem/1 var(--sr-schmal)}
.sr-dunkel .ab-zf .ab-w6.treffer{background:var(--gelb);color:#231f20}
.sr-dunkel .ab-zf .ab-w6.ueber{background:transparent;color:var(--gelb);box-shadow:inset 0 0 0 1px var(--gelb);opacity:.75}
.sr-dunkel .ab-zf .ab-w6.eins{background:#a3171c;color:#fff}
.sr-dunkel .ab-zf .ab-limit-strich{display:inline-flex;flex-direction:column;align-items:center;gap:2px;margin:0 .3rem}
.sr-dunkel .ab-zf .ab-limit-strich i{display:block;width:2px;height:1.3rem;background:#e0474d}
.sr-dunkel .ab-zf .ab-limit-strich em{font:700 .6rem/1 var(--sr-schmal);font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:#ef6a6f;white-space:nowrap}
.sr-dunkel .ab-zf .ab-erfolge{display:flex;flex-wrap:wrap;align-items:baseline;gap:.25rem .5rem;font:500 .95rem/1.2 var(--sr-schmal);color:#cfccc5}
.sr-dunkel .ab-zf .ab-erfolge b{font:700 1.25rem/1 var(--sr-kopf);color:var(--gelb)}
.sr-dunkel .ab-zf .ab-erfolge b.grau{color:#f1efe9}
.sr-dunkel .ab-zf .ab-erfolge span{color:#9a9893}
.sr-dunkel .ab-zf .ab-erfolge .rot,.sr-dunkel .ab-zf .ab-mtext.rot{color:#ef6a6f}
.sr-dunkel .ab-zf-vs{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.4rem .8rem}
.sr-dunkel .ab-zf-vs small{font:500 .88rem/1 var(--sr-schmal);color:#cfccc5;text-align:right;white-space:nowrap}
.sr-dunkel .ab-zf .ab-pips,.sr-dunkel .ab-zf .ab-schwelle{display:flex;flex-wrap:wrap;align-items:center;gap:3px}
.sr-dunkel .ab-zf .ab-pip{display:block;width:1.35rem;height:.68rem;border-radius:2px;background:var(--gelb)}
.sr-dunkel .ab-zf .ab-pip.weg{background:#4d3f17;box-shadow:inset 0 0 0 1px #8a6a12}
.sr-dunkel .ab-zf .ab-pip.v{background:#9a9893}
.sr-dunkel .ab-zf .ab-pip.leer{background:transparent;box-shadow:inset 0 0 0 1px #6b6a6d}
.sr-dunkel .ab-zf .ab-pip.plus{box-shadow:0 0 7px rgba(253,183,20,.7)}
.sr-dunkel .ab-zf .ab-fazit{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem}
.sr-dunkel .ab-zf .ab-netto{display:flex;align-items:baseline;gap:.5rem;font:600 .8rem/1 var(--sr-schmal);letter-spacing:.12em;text-transform:uppercase;color:#cfccc5}
.sr-dunkel .ab-zf .ab-netto b{font:700 1.8rem/1 var(--sr-kopf);letter-spacing:0;color:var(--gelb)}
.sr-dunkel .ab-zf .ab-stempel{margin-left:auto;padding:.55rem 1.05rem .55rem .9rem;background:var(--gelb);color:#231f20;
  font:700 .8rem/1 var(--sr-kopf);letter-spacing:.14em;text-transform:uppercase;clip-path:polygon(0 0,100% 0,100% 65%,calc(100% - .55rem) 100%,0 100%)}
.sr-dunkel .ab-zf .ab-stempel.nein{background:#a3171c;color:#fff}
.sr-dunkel .ab-zf .ab-stempel.grau{background:#58575b;color:#fff}
.sr-dunkel .ab-zf .ab-chips{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;font:700 .85rem/1 var(--sr-kopf);color:#9a9893}
.sr-dunkel .ab-zf .ab-chip{display:inline-flex;flex-direction:column;align-items:center;gap:.25rem;padding:.35rem .6rem .3rem;
  border:1px solid rgba(255,255,255,.18);border-radius:3px;font:700 1.1rem/1 var(--sr-schmal);color:#f1efe9}
.sr-dunkel .ab-zf .ab-chip small{font:600 .6rem/1 var(--sr-schmal);letter-spacing:.12em;text-transform:uppercase;color:#9a9893}
.sr-dunkel .ab-zf .ab-chip.voll{background:#a3171c;border-color:#a3171c;color:#fff}
.sr-dunkel .ab-zf .ab-chip.voll small{color:#f6d7d8}
.sr-dunkel .ab-zf .ab-notiz{font:italic 400 .86rem/1.3 var(--sr-schmal);color:#9a9893}
.sr-dunkel .ab-zf .ab-monitor{display:flex;flex-direction:column;gap:.4rem}
.sr-dunkel .ab-zf .ab-mreihe{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .7rem}
.sr-dunkel .ab-zf .ab-mreihe > small{width:4.6rem;font:700 .68rem/1 var(--sr-schmal);letter-spacing:.14em;text-transform:uppercase;color:#9a9893}
.sr-dunkel .ab-zf .ab-kaesten{display:flex;flex-wrap:wrap;gap:.4rem}
.sr-dunkel .ab-zf .ab-drei{display:flex;gap:2px}
.sr-dunkel .ab-zf .ab-k{display:block;width:1.1rem;height:1.1rem;box-sizing:border-box;border:1px solid #6b6a6d;background:#1a191b}
.sr-dunkel .ab-zf .ab-k.voll{background:#a3171c;border-color:#a3171c}
.sr-dunkel .ab-zf .ab-k.g.voll{background:#c99a12;border-color:#c99a12}
.sr-dunkel .ab-zf .ab-k.neu{border-color:var(--gelb);box-shadow:0 0 0 1px var(--gelb)}
.sr-dunkel .ab-zf .ab-mtext{font:600 .95rem/1 var(--sr-schmal);color:#f1efe9}
.sr-dunkel .ab-zf .ab-system-text{font:500 .95rem/1.35 var(--sr-schmal);color:#f1efe9}
.sr-dunkel .ab-zf-zeile{list-style:none;align-self:stretch;margin:-.2rem 0 .4rem}
.sr-dunkel .ab-zf{display:flex;flex-direction:column;padding:0 0 .8rem;background:linear-gradient(180deg,#2d2c2e,#222123);border:1px solid rgba(255,255,255,.07)}
.sr-dunkel .ab-zf-knopf{display:block;margin:.35rem auto .2rem;padding:.3rem .8rem;background:transparent;border:1px solid rgba(255,255,255,.18);color:#9a9893;font:600 .74rem/1 var(--sr-schmal);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;clip-path:none}
.sr-dunkel .ab-zf-knopf:hover{color:var(--gelb);border-color:var(--gelb)}
/* HE TURNS THE PAGE (04.10.2026, abenteuer.js): "Weiterlesen" under the last message; his own cards wait below until he
   has read through */
.sr-dunkel .ab-weitere{display:block;margin:1rem auto 0;padding:.6rem 1.6rem;font:700 .9rem/1 var(--sr-kopf);letter-spacing:.12em;
  text-transform:uppercase;color:#231f20;background:var(--gelb);border:0;cursor:pointer;
  clip-path:polygon(0 0,100% 0,100% 65%,calc(100% - .55rem) 100%,0 100%)}
.sr-dunkel .ab-weitere:hover{background:#ffd257}
.sr-dunkel .ab-weitere[hidden]{display:none}
.sr-dunkel .ab-chat.ab-liest > .ab-offen-rahmen,.sr-dunkel .ab-chat.ab-liest > .ab-offen-gruppe,.sr-dunkel .ab-chat.ab-liest > .ab-kampf-haltbox{display:none}
/* his own open card framed like his bubble, his portrait right (abenteuer.js ichRahmen) */
.sr-dunkel .ab-offen-rahmen,.sr-dunkel .ab-offen-gruppe{margin-top:1rem}
/* his defense line as the two cards he went through (abenteuer.js paarZeile) */
.sr-dunkel .ab-nachricht.ab-probe-paar{max-width:none;align-self:stretch;flex-direction:column;align-items:stretch;gap:.9rem}
.sr-dunkel .ab-probe-paar > .ab-paar-teil{display:flex;gap:.7rem;align-items:flex-start;align-self:stretch}
.sr-dunkel .ab-probe-paar > .ab-paar-teil.ab-spaeter{display:none}   /* held back until his Weiter (abenteuer.js naechste) */
.sr-dunkel .ab-probe-paar > .ab-paar-teil.ab-ich{flex-direction:row-reverse}
.sr-dunkel .ab-paar-teil > .ab-probe{flex:1;min-width:0}
.sr-dunkel .ab-offen-gruppe{display:flex;flex-direction:column;gap:.9rem}
.sr-dunkel .ab-offen-gruppe > .ab-offen-rahmen{margin-top:0}
/* BEHIND THE SCREEN (abenteuer.js, rule R5a): the slim line and its "aufdecken" */
.sr-dunkel .ab-geheim .ab-system-text{font-style:italic;color:#9a9893}
.sr-dunkel .ab-geheim-auf{margin-left:.6rem;padding:.15rem .55rem;background:transparent;border:1px solid #58575b;color:#9a9893;font:600 .7rem/1.2 var(--sr-schmal);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;clip-path:none}
.sr-dunkel .ab-geheim-auf:hover{color:var(--gelb);border-color:var(--gelb)}
.sr-dunkel .ab-offen-rahmen > .ab-probe-offen{flex:1;min-width:0;margin-top:0}
@keyframes sr-ab-puls{50%{opacity:.35}}
.sr-dunkel .ab-eingabe{display:grid;grid-template-columns:1fr auto;gap:.4rem .7rem;align-items:end;
  margin-top:1.2rem;padding-top:.9rem;border-top:2px solid var(--akzent)}
.sr-dunkel .ab-chat > .hinweis{margin:1.2rem 0 0;padding-top:.9rem;border-top:2px solid var(--akzent);color:var(--leise)}
.sr-dunkel .ab-eingabe-kopf{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;gap:.6rem}
.sr-dunkel .ab-als{font:700 .66rem/1 var(--sr-kopf);letter-spacing:.12em;text-transform:uppercase;color:var(--gelb)}
/* ICH SPIELE ALS (issue #68): the picture menu in the label's place, its button in the label's type */
.sr-dunkel .ab-ichwahl{min-width:0;max-width:18rem}
.sr-dunkel .ab-ichwahl .bw-knopf{padding:.15rem .45rem}
.sr-dunkel .ab-ichwahl .bw-knopf .bw-name{font:700 .66rem/1 var(--sr-kopf);letter-spacing:.12em;text-transform:uppercase;color:var(--gelb)}
.sr-dunkel .ab-ichwahl .bw-knopf img,.sr-dunkel .ab-ichwahl .bw-knopf .bw-leer{width:28px;height:28px}
.sr-dunkel .ab-eingabe .ab-pause{padding:.25rem .8rem;font-size:.76rem}
.sr-dunkel .ab-eingabe .ab-pause.an{color:#fff;background:var(--akzent);border-color:var(--akzent)}
.sr-dunkel .ab-eingabe textarea{min-height:4.4rem;font:400 1.05rem/1.5 var(--serif)}
.sr-dunkel .ab-eingabe button.haupt{padding:.55rem 1.2rem;font-size:.86rem}

/* THE CONTROLS ON THE DARK GROUND: buttons, fields and the picture picker take the dark
   plate; the red main button stays */
.sr-dunkel button{color:var(--knopf-text,#e8e6e2);background:var(--knopf-grund,linear-gradient(180deg,#2e2d30,#222124));border-color:var(--knopf-rand,#58575b)}
.sr-dunkel button:hover{color:var(--gelb);border-color:var(--gelb)}
.sr-dunkel button:disabled{color:#8d8a84;border-color:#3d3c40}
.sr-dunkel button.haupt{color:#fff;background:var(--akzent);border-color:var(--akzent)}
.sr-dunkel button.haupt:hover{background:var(--akzent-hell);color:#fff}
.sr-dunkel input[type=text],.sr-dunkel input[type=password],.sr-dunkel textarea,.sr-dunkel select{
  color:var(--text);background:var(--feld-grund,#141315);border:1px solid var(--feld-rand,#48474b)}
.sr-dunkel input:focus,.sr-dunkel textarea:focus{background:#19181a;border-color:var(--akzent);box-shadow:0 0 0 1px var(--akzent)}
.sr-dunkel textarea::placeholder,.sr-dunkel input::placeholder{color:#7d7a75}
.sr-dunkel select option{background:var(--karte-fest,#1f1e21);color:var(--text)}   /* the shop's colours - the doc is light (28.09.2026) */
.sr-dunkel .bw-eintrag:hover,.sr-dunkel .bw-eintrag:focus{background:rgba(255,255,255,.06);border-color:#58575b}
.sr-dunkel .bw-eintrag.gewaehlt{border-color:var(--gelb)}
.sr-dunkel .bw-eintrag.gewaehlt .bw-name{color:var(--gelb)}
.sr-dunkel .bw-knopf img,.sr-dunkel .bw-eintrag img,.sr-dunkel .bw-leer{border-color:var(--akzent);background:#1b1a1c}
.sr-dunkel .bw-name{font-family:var(--sr-schmal);font-size:.95rem}
.sr-dunkel .leer{color:var(--leise)}

/* UP AND DOWN: square, fixed to the screen */
.sr-dunkel .ab-hoch,.sr-dunkel .ab-runter{position:fixed;right:1rem;z-index:30;width:2.3rem;height:2.3rem;
  padding:0;font:700 1.05rem/1 var(--sr-schmal);background:#1f1e21;border:1px solid var(--akzent);color:#fff;clip-path:none}
.sr-dunkel .ab-hoch:hover,.sr-dunkel .ab-runter:hover{background:var(--akzent);color:#fff}
.sr-dunkel .ab-hoch{bottom:1rem}
.sr-dunkel .ab-runter{top:1rem}
.sr-dunkel.mit-kopfleiste .ab-runter{top:3.6rem}

/* THE FLYOUTS, fixed to the screen: the handle a strip of the band; left the cast as square
   cards on the dark plate, right the direction in the red sidebar's plate, the second panel
   dark beside it */
.sr-dunkel .ab-flyout{position:fixed;top:50%;transform:translateY(-50%);z-index:29;display:flex;align-items:center}
.sr-dunkel .ab-flyout[hidden]{display:none}
.sr-dunkel .ab-flyout.rechts{right:0;flex-direction:row-reverse}
.sr-dunkel .ab-griff{writing-mode:vertical-rl;padding:.8rem .32rem;font:700 .6rem/1 var(--sr-kopf);letter-spacing:.14em;
  text-transform:uppercase;color:#fff;background:var(--sr-zeilen),var(--sr-band);border:0;clip-path:none}
.sr-dunkel .ab-griff:hover{color:var(--gelb)}
.sr-dunkel .ab-flyout.rechts .ab-griff{rotate:180deg}
.sr-dunkel .ab-tafel{width:0;overflow:hidden;transition:width .18s ease;max-height:80vh;overflow-y:auto;
  background:#1c1b1e;border:1px solid var(--sr-linie)}
/* the scrollbar's room kept (27.09.2026): content right at 80vh made the bar come and go, the
   width changed, the monitor boxes wrapped and unwrapped every moment */
.sr-dunkel .ab-flyout.offen .ab-tafel{scrollbar-gutter:stable}
.sr-dunkel .ab-flyout.offen .ab-tafel{width:16rem;padding:.8rem}
/* the direction panel wider, so a monitor row (K and G boxes, edge) stays on one line (27.09.2026) */
.sr-dunkel .ab-flyout.rechts.offen .ab-tafel{width:17rem}
.sr-dunkel .ab-flyout:not(.offen) .ab-tafel{border-width:0}
.sr-dunkel .ab-flyout.rechts .ab-tafel{background:var(--sr-zeilen),linear-gradient(90deg,#5e0d0e,#8a1216 55%,#a3171c);border:0}
/* THE PANELS AT THE FOOT (17.10.2026, plan "Spielleiter-Knopf und Notizen"; "Spielleiter" stood upright at the edge under
   "Regie" before, issue #77) - as in assets/abenteuer.css: a lying button in the middle of the free room beside the chat
   column - "Spielleiter" right of it, "Notizen" left of it - and its panel opening upward, as wide as that room (abenteuer.js
   randPlatz sets left / right and --ab-rand); 'ecke' = no room: the panel shut, the button greyed in its corner, "Spielleiter"
   beside the ↑. A toggle; open stays open. The dark plate of a panel, not Regie's red: these are read, not clicked. */
.sr-dunkel .ab-flyout.ab-unten{top:auto;bottom:1rem;flex-direction:column-reverse;align-items:center;gap:.5rem}
.sr-dunkel .ab-flyout.ab-notizen{transform:translateX(-50%)}
.sr-dunkel .ab-flyout.ab-gm{transform:translateX(50%)}
.sr-dunkel .ab-flyout.ab-notizen.ecke{left:1rem;transform:none;align-items:flex-start}
.sr-dunkel .ab-flyout.ab-gm.ecke{right:3.8rem;transform:none;align-items:flex-end}
.sr-dunkel .ab-unten .ab-griff{writing-mode:horizontal-tb;rotate:none;display:inline-flex;align-items:center;gap:.45rem;
  padding:.62rem 1.3rem;font-size:.66rem}
.sr-dunkel .ab-unten.offen .ab-griff{color:var(--gelb)}
.sr-dunkel .ab-unten .ab-griff:disabled,.sr-dunkel .ab-unten .ab-griff:disabled:hover{opacity:.4;color:#fff;cursor:not-allowed}
.sr-dunkel .ab-gm-marke{display:inline-block;min-width:1.05rem;padding:.14rem .2rem;font:700 .62rem/1 var(--sr-kopf);
  letter-spacing:0;text-align:center;color:#111;background:var(--gelb)}
.sr-dunkel .ab-gm-marke[hidden]{display:none}
.sr-dunkel .ab-unten .ab-tafel{display:none}
.sr-dunkel .ab-unten.offen .ab-tafel{display:flex;flex-direction:column;gap:.55rem;box-sizing:border-box;transition:none;
  width:min(26rem,var(--ab-rand,22rem));height:min(36rem,calc(100vh - 8.5rem));max-height:none;overflow:hidden}
/* "Spielleiter" ends under the sketch box above it (--ab-hoch, abenteuer.js gmHoehe; 17.10.2026) */
.sr-dunkel .ab-gm.offen .ab-tafel{height:min(36rem,calc(100vh - 8.5rem),var(--ab-hoch,100vh))}
/* the panel "Notizen": his notes, then the favourites - each a head line (date; face, name, date), the text below, a quiet
   button to remove it; the field at the foot as in "Spielleiter" */
.sr-dunkel .ab-notiz-inhalt{flex:1;min-height:0;overflow-y:auto}
.sr-dunkel .ab-notiz-kopf{margin:0 0 .45rem;font:700 .6rem/1 var(--sr-kopf);letter-spacing:.12em;text-transform:uppercase;color:var(--gelb)}
.sr-dunkel .ab-notiz-kopf ~ .ab-notiz-kopf{margin-top:1.1rem}
.sr-dunkel .ab-notiz-liste,.sr-dunkel .ab-notiz-favs{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem}
.sr-dunkel .ab-notiz{padding:.35rem .6rem;border-left:2px solid #58595b;font:400 .9rem/1.45 var(--sr-schmal);color:var(--text);
  overflow-wrap:anywhere}
.sr-dunkel .ab-notiz-fav{border-left-color:var(--akzent)}
.sr-dunkel .ab-notiz-zeile{display:flex;align-items:center;gap:.45rem;margin-bottom:.25rem}
.sr-dunkel .ab-notiz-bild{width:1.5rem;height:1.5rem;border-radius:50%;object-fit:cover}
.sr-dunkel .ab-notiz-wer{font:700 .58rem/1 var(--sr-kopf);letter-spacing:.12em;text-transform:uppercase;color:var(--text)}
.sr-dunkel .ab-notiz-zeit{font:400 .72rem/1 var(--sr-schmal);color:var(--sehr-leise)}
.sr-dunkel .ab-notiz-weg{margin-left:auto;padding:.15rem .45rem;font:400 .7rem/1 var(--sr-schmal);background:none;
  border:1px solid #58595b;color:var(--leise);clip-path:none}
.sr-dunkel .ab-notiz-weg:hover{border-color:var(--akzent);color:#fff}
.sr-dunkel .ab-notiz-text{white-space:pre-wrap}
.sr-dunkel .ab-notiz-text em{color:#bdbab4}
.sr-dunkel .ab-notiz-eingabe{display:grid;grid-template-columns:1fr auto;gap:.4rem .6rem;align-items:end}
.sr-dunkel .ab-notiz-eingabe textarea{width:100%;min-height:3.4rem;box-sizing:border-box;font:400 .95rem/1.45 var(--serif)}
.sr-dunkel .ab-notiz-eingabe button.haupt{padding:.4rem .9rem;font-size:.78rem}
/* THE PANEL "FOTOS" (17.10.2026, plan "Fotos-Knopf im Abenteuer"): at the TOP of the room left of the column, placed like
   "Notizen" (randPlatz), opening downward - its panel ends above the "Notizen" button; the pictures a grid of the chat's
   picture frames (square previews, the download button bottom right); both left panels open = half the height each
   (body.ab-links-beide, abenteuer.js linksBeide) */
.sr-dunkel .ab-flyout.ab-oben{top:3.4rem;bottom:auto;transform:translateX(-50%);flex-direction:column;align-items:center;gap:.5rem}
.sr-dunkel .ab-flyout.ab-oben.ecke{left:1rem;transform:none;align-items:flex-start}
.sr-dunkel .ab-oben .ab-griff{writing-mode:horizontal-tb;rotate:none;display:inline-flex;align-items:center;gap:.45rem;
  padding:.62rem 1.3rem;font-size:.66rem}
.sr-dunkel .ab-oben.offen .ab-griff{color:var(--gelb)}
.sr-dunkel .ab-oben .ab-griff:disabled,.sr-dunkel .ab-oben .ab-griff:disabled:hover{opacity:.4;color:#fff;cursor:not-allowed}
.sr-dunkel .ab-oben .ab-tafel{display:none}
.sr-dunkel .ab-oben.offen .ab-tafel{display:block;box-sizing:border-box;transition:none;width:min(26rem,var(--ab-rand,22rem));
  max-height:min(36rem,calc(100vh - 11rem));overflow-y:auto}
.sr-dunkel.ab-links-beide .ab-oben.offen .ab-tafel{max-height:calc(50vh - 5.5rem)}
.sr-dunkel.ab-links-beide .ab-notizen.offen .ab-tafel{height:calc(50vh - 5.5rem)}
.sr-dunkel .ab-fotos-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(7rem,1fr));gap:.6rem}
.sr-dunkel .ab-foto{margin:0;min-width:0}
.sr-dunkel .ab-foto .ab-bild-rahmen{position:relative;display:block}
.sr-dunkel .ab-foto .ab-bild-klick{display:block;width:100%;aspect-ratio:1;object-fit:cover;cursor:zoom-in;border:1px solid var(--sr-linie)}
.sr-dunkel .ab-foto figcaption{margin-top:.25rem;font:400 .75rem/1.25 var(--sr-schmal);color:var(--leise);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
/* delete the picture entirely (17.10.2026): top right, the download button's look */
.sr-dunkel .ab-foto-weg{position:absolute;right:6px;top:6px;width:26px;height:26px;padding:0;display:flex;align-items:center;
  justify-content:center;font:700 .8rem/1 var(--sr-schmal);color:#fff;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.5);
  clip-path:none;opacity:.8;cursor:pointer}
.sr-dunkel .ab-foto-weg:hover{opacity:1;border-color:var(--akzent);color:var(--akzent);background:rgba(0,0,0,.75)}
.sr-dunkel .ab-fotos-raster .leer{grid-column:1 / -1;margin:0;font:italic 400 .85rem/1.3 var(--sr-schmal);color:var(--leise)}
.sr-dunkel .ab-gm-kopf{margin:0;font:700 .6rem/1 var(--sr-kopf);letter-spacing:.12em;text-transform:uppercase;color:var(--gelb)}
.sr-dunkel .ab-gm-verlauf{flex:1;min-height:0;overflow-y:auto;list-style:none;margin:0;padding:0;display:flex;
  flex-direction:column;gap:.55rem}
.sr-dunkel .ab-gm-zeile{padding:.35rem .6rem;border-left:2px solid #58595b;font:400 .9rem/1.45 var(--sr-schmal);
  color:var(--text);overflow-wrap:anywhere}
.sr-dunkel .ab-gm-wer{display:block;margin-bottom:.2rem;font:700 .58rem/1 var(--sr-kopf);font-style:normal;letter-spacing:.12em;
  text-transform:uppercase;color:var(--sehr-leise)}
.sr-dunkel .ab-gm-text{white-space:pre-wrap}
.sr-dunkel .ab-gm-hinweis{font-style:italic;color:var(--leise)}
.sr-dunkel .ab-gm-meta{padding:.5rem .7rem .6rem;border-left:3px solid var(--gelb);
  background:linear-gradient(180deg,#262527,#2e2d30);font:400 .95rem/1.5 var(--serif)}
.sr-dunkel .ab-gm-meta .ab-gm-wer{color:var(--gelb)}
.sr-dunkel .ab-gm-status{margin:0;font:italic 400 .82rem/1.3 var(--sr-schmal);color:var(--leise)}
.sr-dunkel .ab-gm-eingabe{display:grid;grid-template-columns:1fr auto;gap:.4rem .6rem;align-items:center}
.sr-dunkel .ab-gm-eingabe[hidden]{display:none}
.sr-dunkel .ab-gm-eingabe textarea{grid-column:1 / -1;width:100%;min-height:3.4rem;box-sizing:border-box;
  font:400 .95rem/1.45 var(--serif)}
.sr-dunkel .ab-gm-art{font:400 .78rem/1.2 var(--sr-schmal);color:var(--leise)}
.sr-dunkel .ab-gm-eingabe button.haupt{padding:.4rem .9rem;font-size:.78rem}
.sr-dunkel .ab-karte a{display:flex;align-items:center;gap:.6rem;color:var(--text);text-decoration:none}
.sr-dunkel .ab-regie-bild{flex:none;width:66px;height:66px;overflow:hidden;
  border:1px solid var(--akzent);background:#1b1a1c}
.sr-dunkel .ab-regie-bild{border-color:rgba(255,255,255,.4)}
.sr-dunkel .ab-regie-bild img{width:100%;height:100%;object-fit:cover;vertical-align:top}
/* ONLY CONNECTED (28.09.2026, Roger: "ein wlan zeichen ... wenn die person remote zugeschaltet ist"): bottom right
   on the portrait of a bubble and of a cast circle */
.sr-dunkel .ab-fern{position:absolute;right:2px;bottom:2px;width:22px;height:22px;border-radius:50%;background:rgba(20,19,21,.88);
  box-shadow:0 0 0 1px var(--akzent);display:flex;align-items:center;justify-content:center;pointer-events:none}
.sr-dunkel .ab-fern svg{width:15px;height:15px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round}
.sr-dunkel .ab-fern svg circle{fill:#fff;stroke:none}
/* DIRECT TO - subvocal, a text, a commlink (15.10.2026, issue #110): the bubble's top edge dashed (the clipped corners keep a full border from showing),
   "→ Ixchel" with the radio mark in its head, and the mark above the input while "/pm" holds */
.sr-dunkel .ab-direkt.ab-kin .ab-inhalt{border-top-style:dashed}
.sr-dunkel .ab-direkt.ab-ich .ab-inhalt{border-top:2px dashed rgba(255,255,255,.7)}
.sr-dunkel .ab-an{display:inline-flex;align-items:center;gap:.3rem;font:700 .7rem/1 var(--sr-schmal);letter-spacing:.06em;color:#d8d6d0}
.sr-dunkel .ab-an .ab-fern,.sr-dunkel .ab-pm .ab-fern{position:static;width:16px;height:16px}
.sr-dunkel .ab-an .ab-fern svg,.sr-dunkel .ab-pm .ab-fern svg{width:11px;height:11px}
.sr-dunkel .ab-pm{display:flex;align-items:center;gap:.5rem;margin-top:1rem;padding:.3rem .6rem;border:1px dashed var(--gelb);
  font:700 .76rem/1.2 var(--sr-schmal);letter-spacing:.06em;text-transform:uppercase;color:var(--gelb)}
.sr-dunkel .ab-pm[hidden]{display:none}
.sr-dunkel .ab-pm-zu{margin-left:auto;padding:0 .45rem;font-size:1rem;line-height:1.4}
/* THE CAST AS CIRCLES AT THE LEFT EDGE and the figure panel (06.10.2026) - the block of abenteuer.css,
   which this design does not load, on the dark plate: 64px, the left third behind the edge (the ring's
   geometry in abenteuer.js assumes that ratio), the panel like the direction's second panel */
.sr-dunkel .ab-leiste{position:fixed;left:-21px;top:50%;transform:translateY(-50%);z-index:29;width:64px;
  max-height:calc(100vh - 6rem);overflow-y:auto;scrollbar-width:none}
.sr-dunkel .ab-leiste::-webkit-scrollbar{display:none}
.sr-dunkel .ab-leiste[hidden]{display:none}
.sr-dunkel .ab-kreise{list-style:none;margin:0;padding:4px 0;display:grid;gap:8px}
.sr-dunkel .ab-kreise li.ich{margin-bottom:8px}
.sr-dunkel .ab-kreis{position:relative;display:block;width:64px;height:64px;min-height:0;padding:0;border:0;border-radius:50%;
  background:#000;box-shadow:0 0 4px 1px rgba(224,71,77,.75);clip-path:none;cursor:pointer}   /* black behind the ring and a light glow, so its segments read over a figure behind (07.10.2026) */
.sr-dunkel .ab-kreis-bild{position:absolute;inset:5px;border-radius:50%;overflow:hidden;background:#1b1a1c;
  box-shadow:0 0 0 1px rgba(255,255,255,.35)}
.sr-dunkel .ab-kreis-bild img{width:100%;height:100%;object-fit:cover;vertical-align:top}
.sr-dunkel .ab-kreis-initiale{display:flex;align-items:center;justify-content:center;height:100%;font:700 1.3rem/1 var(--sr-schmal);color:#9a9893}
.sr-dunkel .ab-kreis:hover .ab-kreis-bild,.sr-dunkel .ab-kreis.offen .ab-kreis-bild{box-shadow:0 0 0 2px var(--gelb)}
.sr-dunkel .ab-kreis .ab-fern{right:0;bottom:0;width:18px;height:18px}
.sr-dunkel .ab-kreis .ab-fern svg{width:12px;height:12px}
.sr-dunkel .ab-ring{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.sr-dunkel .ab-ring .ab-ring-mitte{stroke:#fff;stroke-width:2;stroke-linecap:round}   /* where full monitors meet */
.sr-dunkel .ab-ring path{fill:none;stroke:rgba(255,255,255,.2);stroke-width:3.5}
.sr-dunkel .ab-ring path.k.voll{stroke:#e0474d}
.sr-dunkel .ab-ring path.g.voll{stroke:#fdb714}
.sr-dunkel .ab-kreis.bewusstlos .ab-kreis-bild,.sr-dunkel .ab-kreis.tot .ab-kreis-bild{filter:grayscale(1)}
.sr-dunkel .ab-kreis.tot .ab-kreis-bild{opacity:.5}
.sr-dunkel .ab-kreis.stirbt .ab-kreis-bild{filter:grayscale(1);box-shadow:0 0 10px 3px rgba(224,71,77,.75)}
/* as high as the window below the head bar (2.8rem) with figurPlatz's 8px above and below, before it scrolls (09.10.2026, Roger);
   z-index 30, over the buttons "Fotos" and "Notizen" (29) - "charakter im vordergrund" (17.10.2026) */
.sr-dunkel .ab-figur{position:fixed;left:52px;top:4rem;z-index:30;width:18rem;max-height:calc(100vh - 2.8rem - 16px);overflow-y:auto;
  background:#1c1b1e;border:1px solid var(--sr-linie);padding:.8rem;font:400 .85rem/1.35 var(--sr-schmal);
  letter-spacing:.02em;box-shadow:0 6px 24px rgba(0,0,0,.55)}
.sr-dunkel .ab-figur[hidden]{display:none}
.sr-dunkel .ab-figur-kopf{display:flex;align-items:center;gap:.6rem}
.sr-dunkel .ab-figur-bild{flex:none;width:48px;height:48px;border-radius:50%;overflow:hidden;background:#1b1a1c;
  box-shadow:0 0 0 1px rgba(255,255,255,.35)}
.sr-dunkel .ab-figur-bild img{width:100%;height:100%;object-fit:cover;vertical-align:top}
.sr-dunkel .ab-figur-name{display:flex;flex-direction:column;min-width:0}
.sr-dunkel .ab-figur-name b{font:700 1rem/1.2 var(--sr-schmal);letter-spacing:.04em;overflow-wrap:anywhere}
.sr-dunkel .ab-figur-name a{font-size:.75rem;color:#9a9893}
.sr-dunkel .ab-figur-name a:hover{color:var(--gelb)}
.sr-dunkel .ab-figur-teil{margin-top:.75rem}
.sr-dunkel .ab-figur-teil h3{margin:0 0 .35rem;font:700 .62rem/1.2 var(--sr-kopf);letter-spacing:.14em;text-transform:uppercase;color:var(--gelb)}
.sr-dunkel .ab-figur-attr{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;margin-bottom:.5rem}
.sr-dunkel .ab-figur-attr span{display:flex;align-items:baseline;gap:.2rem;padding:.15rem .3rem;background:#2a292c}
.sr-dunkel .ab-figur-attr small{font-size:.62rem;color:#9a9893}
.sr-dunkel .ab-figur-attr em{font-style:normal;font-size:.75rem;color:var(--gelb)}
.sr-dunkel .ab-figur-zeilen{display:grid;grid-template-columns:auto 1fr;gap:.1rem .6rem;margin:0}
.sr-dunkel .ab-figur-zeilen dt{color:#9a9893}
.sr-dunkel .ab-figur-zeilen dd{margin:0}
.sr-dunkel .ab-figur-liste{list-style:none;margin:0;padding:0;display:grid;gap:.2rem}
.sr-dunkel .ab-figur-liste li{display:flex;justify-content:space-between;gap:.6rem}
.sr-dunkel .ab-figur-ding{min-width:0}
.sr-dunkel .ab-figur-wert{flex:none;color:#9a9893;text-align:right;white-space:nowrap}
/* a vehicle (09.10.2026): its values under its name, wrapping */
.sr-dunkel .ab-figur-liste li.ab-figur-fz{display:block}
.sr-dunkel .ab-figur-fz .ab-figur-wert{display:block;text-align:left;white-space:normal;font-size:.78rem}
.sr-dunkel .ab-tafel .leer{font:italic 400 .85rem/1.3 var(--sr-schmal)}
.sr-dunkel .ab-regie-szene{margin:0 0 .8rem}
.sr-dunkel .ab-regie-szene a{display:flex;align-items:center;gap:.6rem;text-decoration:none}
.sr-dunkel .ab-regie-name{font:700 .72rem/1.2 var(--sr-kopf);letter-spacing:.1em;text-transform:uppercase;
  color:var(--gelb);overflow-wrap:anywhere}
.sr-dunkel .ab-regie-szene a:hover .ab-regie-name{color:#fff}
/* one gap in the direction panel: .5rem between the buttons and from the last one to the
   usage line (27.09.2026, Roger - Lage zeichnen / Run beenden had .7rem more below them) */
.sr-dunkel .ab-auslastung{margin:.5rem 0 .8rem;font:400 .8rem/1.3 var(--sr-schmal);color:#f0dcdc;letter-spacing:.03em}
.sr-dunkel .ab-tafel .ab-funktion{width:100%;clip-path:none;background:rgba(0,0,0,.28);
  border:1px solid rgba(255,255,255,.3);color:#f7eaea}
.sr-dunkel .ab-tafel .ab-funktion:hover{background:rgba(0,0,0,.45);color:var(--gelb);border-color:var(--gelb)}
.sr-dunkel .ab-tafel .ab-funktion:disabled{opacity:.45}
.sr-dunkel .ab-tafel .ab-funktion + .ab-funktion{margin-top:.5rem}
.sr-dunkel .ab-zweite{width:20rem;max-height:86vh;overflow-y:auto;background:#1c1b1e;border:1px solid var(--sr-linie);
  border-right:0;padding:.8rem}
.sr-dunkel .ab-zweite[hidden]{display:none}
.sr-dunkel .ab-zweite .bw-liste{position:static;max-height:60vh;min-width:0;box-shadow:none;border:0;padding:0;
  margin-top:.4rem;background:none}
.sr-dunkel .ab-zweite .ab-wahlliste{max-height:60vh;overflow:auto}
.sr-dunkel .ab-zweite .bw-knopf{display:none}
.sr-dunkel .ab-wahl,.sr-dunkel .ab-szenenwahl,.sr-dunkel .ab-vorhangwahl{margin:0;display:grid;gap:.6rem}
.sr-dunkel .ab-wahl[hidden],.sr-dunkel .ab-szenenwahl[hidden],.sr-dunkel .ab-vorhangwahl[hidden]{display:none}
/* the kinds of place over the scene picker (26.09.2026) - small chips, the chosen one yellow */
.sr-dunkel .ab-ortsarten{display:flex;flex-wrap:wrap;gap:.25rem}
.sr-dunkel .ab-ortsarten button{font-size:.68rem;padding:.2rem .5rem;clip-path:none}
.sr-dunkel .ab-ortsarten button.an{background:var(--gelb);border-color:var(--gelb);color:#231f20}
.sr-dunkel .ab-wahlliste{list-style:none;margin:0;padding:0;display:grid;gap:.25rem}
.sr-dunkel .ab-wahlliste .ankreuz{display:flex;align-items:center;gap:.55rem;padding:.2rem .3rem;border:1px solid transparent;
  color:var(--text);cursor:pointer}
.sr-dunkel .ab-wahlliste .ankreuz:hover{border-color:#58575b}
.sr-dunkel .ab-wahlliste .ankreuz:has(input:checked){border-color:var(--gelb)}
.sr-dunkel .ab-wahlbild{width:60px;height:60px;flex:none;overflow:hidden;border:1px solid var(--akzent);background:#1b1a1c;display:block}
.sr-dunkel .ab-wahlbild img{width:100%;height:100%;object-fit:cover;vertical-align:top}
.sr-dunkel .ab-wahlname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:700 .9rem/1.2 var(--sr-schmal)}
.sr-dunkel .ab-wahlliste .ankreuz.fremd .ab-wahlname{color:var(--akzent-text)}

@media(max-width:640px){
  .sr-dunkel .ab-nachricht{max-width:94%}
  .sr-dunkel .ab-bild{width:50px;height:50px}
  .sr-dunkel .ab-eingabe{grid-template-columns:1fr}
  .sr-dunkel .ab-eingabe button.haupt{justify-self:end}
  .sr-dunkel .ab-flyout.offen .ab-tafel,.sr-dunkel .ab-flyout.rechts.offen .ab-tafel{width:11rem}
  /* the cast circles smaller, still a third behind the edge (the ring scales with them) */
  .sr-dunkel .ab-leiste{left:-16px;width:48px}
  .sr-dunkel .ab-kreis{width:48px;height:48px}
  .sr-dunkel .ab-kreis-bild{inset:4px}
  .sr-dunkel .ab-figur{left:38px;width:min(18rem,calc(100vw - 46px))}
  .sr-dunkel .ab-zweite{width:13rem}
  .sr-ab-kopf h1{font-size:1.6rem}
}

/* THE 1:1 (designs/shadowrun/direkt.php + direkt-liste.php): the story head with the Kin's
   portrait beside the title, the book's hint box in its dark version, the scene line with a
   small picture; the list as the scene list's cards, "läuft" yellow, "beendet" grey. */
.sr-ab-direkt{display:flex;gap:1rem;align-items:stretch}
.sr-ab-titel{flex:1;min-width:0;display:flex;flex-direction:column}
.sr-ab-titel .sr-ab-welt{align-self:flex-start}
.sr-ab-titel .sr-ab-unter{flex:1}
.sr-ab-portrait{flex:none;width:120px;align-self:stretch;min-height:150px;overflow:hidden;
  border:1px solid var(--akzent);background:#1b1a1c;box-shadow:0 0 0 3px rgba(0,0,0,.6)}
.sr-ab-portrait img,.sr-ab-mini img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 20%}
.sr-ab-portrait:hover{border-color:var(--gelb)}
.sr-ab-portrait img.ersatz,.sr-ab-mini img.ersatz{display:none}
body.blur18 .sr-ab-portrait img.nsfw,body.blur18 .sr-ab-mini img.nsfw{display:none}
body.blur18 .sr-ab-portrait img.ersatz,body.blur18 .sr-ab-mini img.ersatz{display:block}
.sr-dunkel .sr-ab-szene{display:flex;align-items:center;gap:.6rem;margin:0 0 1rem}
.sr-ab-mini{flex:none;width:40px;height:40px;overflow:hidden;border:1px solid var(--akzent);background:#1b1a1c}
/* the book's hint box on the dark page: the striped frame a step lighter, the inset dark */
.sr-dunkel .sr-beispiel::before{background:repeating-linear-gradient(0deg,#2c2b2e 0 2px,#403f43 2px 4px)}
.sr-dunkel .sr-beispiel::after{background:#141315}
.sr-dunkel .sr-beispiel p{color:#e8e6e2}
.sr-ab-hinweis{margin:0 0 1.2rem}
.sr-dunkel .hinweis{color:var(--leise)}
.sr-dunkel .hinweis.fehler{color:var(--akzent-text)}
.sr-ab-karten .sr-auto.sr-aus{background:#58595b;color:#eee}
@media(max-width:640px){
  .sr-ab-portrait{width:80px;min-height:100px}
}

/* THE ADVENTURE LIST (designs/shadowrun/abenteuer-liste.php): the cards beside the red
   sidebar "Neues Abenteuer"; a card's plate carries the 1:1s that came out of it and the
   delete button as a quiet bin at its foot; a world's crest stands in for a missing scene
   picture, contained on the dark ground. */
.sr-ab-liste{display:grid;grid-template-columns:minmax(0,1fr) 19rem;gap:1.4rem;align-items:start}
.sr-ab-links{display:grid;gap:1rem;min-width:0}
.sr-ab-rechts{position:sticky;top:1rem;z-index:3}
@media(max-width:880px){.sr-ab-liste{grid-template-columns:minmax(0,1fr)}.sr-ab-rechts{position:static}}
.sr-ab-kapitel{display:flex;align-items:center;gap:.6rem;margin:.4rem 0 0;padding:.4rem 1.6rem .38rem .7rem;
  justify-self:start;background:var(--akzent);color:#fff;font:700 .8rem/1.2 var(--sr-kopf);letter-spacing:.12em;
  text-transform:uppercase;clip-path:polygon(0 0,calc(100% - 1rem) 0,100% 100%,0 100%)}
.sr-ab-kapitel img{width:26px;height:26px;object-fit:cover;border:1px solid rgba(255,255,255,.5)}
.sr-ab-kapitel .zahl{color:rgba(255,255,255,.75);font-size:.72rem}
.sr-ab-karten{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.sr-szene-bild img.sr-ab-wappen{object-fit:contain;padding:18%;background:radial-gradient(circle,#2c2b2e,#161517)}
.sr-ab-ort{font-style:italic}
.sr-ab-vieraugen{list-style:none;margin:.2rem 0 0;padding:.35rem 0 0;border-top:1px solid rgba(255,255,255,.12);
  display:grid;gap:.3rem}
.sr-ab-vieraugen li{display:grid;grid-template-columns:1fr auto;gap:0 .4rem;align-items:center}
.sr-ab-vieraugen a{font:700 .8rem/1.2 var(--sr-schmal);color:#f0dcdc;text-decoration:none}
.sr-ab-vieraugen a:hover{color:var(--gelb)}
.sr-ab-vieraugen span{grid-column:1;font:400 .7rem/1.2 var(--sr-schmal);color:#9d9da0}
.sr-ab-vieraugen form{grid-column:2;grid-row:1 / span 2;margin:0}
.sr-ab-loeschen{margin:.1rem 0 0;justify-self:end}
.sr-dunkel .sr-ab-weg{font-size:0;padding:.22rem .35rem;background:none;border-color:transparent;color:#8d8a84;clip-path:none}
.sr-dunkel .sr-ab-weg::before{content:"\f1f8";font:normal 900 .8rem/1 "Font Awesome 7 Etch"}
.sr-dunkel .sr-ab-weg:hover{color:var(--akzent-text);border-color:var(--akzent-text)}
/* THE ARCHIVE (issue #64, 30.09.2026): the box (archive) or the arrow (bring back) beside the bin - both Etch glyphs,
   measured in the kit's font; the link to the archive under the head; the archive page has no side column */
.sr-ab-knoepfe{display:flex;gap:.15rem;justify-self:end;margin:.1rem 0 0}
.sr-ab-knoepfe form{margin:0}
/* THE ADVENTURE BOOKS on the adventure list (16.10.2026; for a few hours the page generator.php): a book card spans the column -
   its text is long; the book behind "Spoiler" */
.sr-gen-karten{grid-template-columns:1fr}
.sr-gen-karten .sr-ab-knoepfe{align-items:center;gap:.5rem}
.sr-gen-stand{color:var(--gelb)}
.sr-gen-meldung{color:#e8b4b4}
.sr-gen-spoiler{margin:.4rem 0 0;padding:.35rem 0 0;border-top:1px solid rgba(255,255,255,.12)}
.sr-gen-spoiler summary{cursor:pointer;font:700 .8rem/1.2 var(--sr-schmal);color:#f0dcdc}
.sr-gen-spoiler summary:hover{color:var(--gelb)}
.sr-gen-text{white-space:pre-wrap;max-height:60vh;overflow:auto;margin:.4rem 0 0;padding:.6rem .7rem;background:rgba(0,0,0,.35);
  font:400 .82rem/1.45 var(--sr-schmal);color:#ddd}
.sr-gen-neu{font:700 .75rem/1.2 var(--sr-schmal);padding:.25rem .55rem}
.sr-dunkel .sr-ab-archiv::before{content:"\f187"}
.sr-dunkel .sr-ab-zurueck::before{content:"\f0e2"}
.sr-ab-archivlink{margin:0;padding:.35rem 1rem .4rem;background:rgba(12,11,13,.8);font:700 .78rem/1.2 var(--sr-schmal);
  letter-spacing:.08em;text-transform:uppercase}
.sr-ab-archivlink a{color:var(--gelb);text-decoration:none}
.sr-ab-archivlink a:hover{color:#fff}
.sr-ab-liste:not(:has(.sr-ab-rechts)){grid-template-columns:minmax(0,1fr)}
.sr-ab-neu textarea,.sr-ab-neu input[type=text]{width:100%}
.sr-dunkel .sr-ab-neu textarea{background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.25);color:#fff;
  font:400 .95rem/1.4 var(--sr-schmal)}
.sr-dunkel .sr-ab-neu textarea:focus{border-color:var(--gelb);box-shadow:none;background:rgba(0,0,0,.5)}
.sr-ab-neu button.haupt{margin-top:.2rem;padding:.45rem 1.1rem;background:var(--gelb);border-color:var(--gelb);color:#231f20}
.sr-ab-neu button.haupt:hover{background:#fff;border-color:#fff;color:#231f20}
/* the mode (26.09.2026, issue #38): two buttons side by side */
.sr-ab-neu .sr-ab-modus{grid-template-columns:repeat(2,minmax(0,1fr))}
/* THE BTL ARENA's tick (includes/arena.php) beside its words */
.sr-ab-neu .sr-ab-arena{display:flex;flex-direction:row;align-items:flex-start;gap:.55rem;cursor:pointer}
.sr-ab-neu .sr-ab-arena input{flex:none;margin:.05rem 0 0}
.sr-ab-neu .bildwahl{min-width:0}
/* OHNE BUCH / MIT BUCH (16.10.2026, the generator folded in): the switch shows one of the two forms; a browser without :has()
   shows both, which still works */
.sr-ab-neu .sr-ab-buchwahl{margin:0 0 .7rem}
.sr-ab-neu:has(.sr-ab-buchwahl input[value=mit]:checked) .sr-ab-ohnebuch,
.sr-ab-neu:has(.sr-ab-buchwahl input[value=ohne]:checked) .sr-ab-mitbuch{display:none}
/* ICH SPIELE ALS (issue #121): a picture menu like the world's; hidden by its script for a world without personas */
.sr-ab-neu .ab-ichals[hidden]{display:none}
/* A SIDE ADVENTURE (16.10.2026): its main one only with "Nebenabenteuer"; its line under the main book's card */
.sr-ab-mitbuch:not(:has(input[name=art][value=neben]:checked)) .sr-ab-zu{display:none}
/* the scenes field of the kind chosen (16.10.2026); without :has() both show, the server takes the kind's own */
.sr-ab-mitbuch:has(input[name=art][value=neben]:checked) .sr-ab-szenen-haupt,
.sr-ab-mitbuch:not(:has(input[name=art][value=neben]:checked)) .sr-ab-szenen-neben{display:none}
.sr-dunkel .sr-ab-neu input[type=number]{width:100%;background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.25);color:#fff;
  font:400 .95rem/1.4 var(--sr-schmal)}
.sr-ab-mitbuch .sr-ab-zu select{width:100%}
/* no main book yet: a plain sentence, light on the red (the italic grey of the field hints did not read - Roger, 16.10.2026) */
.sr-ab-neu .sr-ab-leer{font:400 .95rem/1.4 var(--sr-schmal);color:#f3eded;text-transform:none;letter-spacing:0}
.sr-ab-neben{display:flex;flex-wrap:wrap;align-items:center;gap:0 .4rem;margin:.3rem 0 0;padding:.3rem 0 0;border-top:1px solid rgba(255,255,255,.12)}
.sr-ab-neben > p{flex:1 1 auto;margin:0}
.sr-ab-neben > details{flex-basis:100%}

/* THE START PAGE (26.09.2026, designs/shadowrun/start.php; plan "Startseite im
   Shadowrun-Design", Roger: "ok", "wie welten"): the long name in the chapter font with the
   initials in red; the world list's cards, whose crest and name are submit buttons (the
   world is activated by a POST), so the buttons lose every button look; the last adventure
   a line on the plate; the balances a small value box; a wide framed picture below. */
.sr-langname{margin:.2rem 0 1.4rem;text-align:center;font:700 .74rem/1.5 var(--sr-kopf);font-style:normal;
  letter-spacing:.16em;text-transform:uppercase;color:var(--leise)}
.sr-langname b{color:var(--akzent);font-weight:700}
.sr-startkarten form{flex:1;display:flex;flex-direction:column;margin:0}
.sr-startkarten button.sr-welt-wappen{width:100%;border:0;border-radius:0;cursor:pointer;clip-path:none;
  font:inherit;text-transform:none;letter-spacing:0;color:inherit}
.sr-startkarten button.sr-welt-wappen:hover img{filter:brightness(1.1)}
.sr-startkarten .sr-szene-platte{gap:.45rem}
.sr-start-name{padding:0;margin:0;border:0;background:none;clip-path:none;cursor:pointer;text-align:left;
  font:600 1.15rem/1.2 var(--sr-schmal);letter-spacing:.02em;text-transform:none;color:#fdb714}
.sr-start-name:hover{color:#fff;background:none}
.sr-start-abenteuer{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .6rem;margin:.1rem 0 0;
  padding-top:.4rem;border-top:1px solid rgba(255,255,255,.12)}
.sr-start-abenteuer a{font:700 .88rem/1.2 var(--sr-schmal);color:#fff;text-decoration:none}
.sr-start-abenteuer a:hover{color:#fdb714}
.sr-start-abenteuer span{font:400 .74rem/1.2 var(--sr-schmal);color:#9d9da0}
.sr-konten{justify-self:center;width:min(22rem,100%);margin:.6rem 0 .4rem}
.sr-konten td:last-child{text-align:right}
.sr-konten .kontostaende a{border:0}
.sr-konten .kontostaende{color:#fff;font-size:.84rem;text-align:left}
.sr-startkarten .sr-welt-wappen .sr-auto{color:#231f20;opacity:1}
/* EINSTELLUNGEN (14.10.2026, einstellungen.php - the markup is the standard design's): the pressed way like an open tab of
   the shop (.sr-sachen-reiter button.an); persona.css has the standard design's copy */
.einst{margin:0 0 1.6rem}
.einst h2{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;margin:0 0 .5rem}
.einst-wahl{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:0 0 .6rem}
.einst-wahl button.an{background:var(--akzent);border-color:#ff3446;color:#fff;box-shadow:0 0 10px rgba(255,52,70,.5)}
.einst-stand{color:var(--leise);font-size:.78rem}
.einst-kosten{font-size:.85rem;margin:0}
/* THE RULE PAGE (15.10.2026, issue #106, designs/shadowrun/regel.php): the item page's head and
   blocks (.sr-gegenstand) with the kind's Etch symbol where the portrait stands, a narrow framed
   picture, then a book spread as in the tab Figur - the rule text wide and at full length | a
   20rem column with the values. One column under 900 px, the values first. */
.sr-r-symbol{width:150px;aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;box-sizing:border-box;
  background:linear-gradient(180deg,#343335,#262527);border:5px solid #1e1e22}
.sr-r-symbol .sr-ksym::before{font-size:4.5rem;color:#fdb714}
@media(min-width:881px){.sr-regel .kopfzeile > .sr-r-symbol{grid-column:1;grid-row:1 / span 2}}
.sr-regel .kopfmitte .sr-g-hinweis{margin-top:.6rem}
.sr-r-streifen{min-width:0}
.sr-r-spalten{display:grid;grid-template-columns:minmax(0,1fr) 20rem;gap:1.8rem 1.4rem;align-items:start}
.sr-r-text{grid-column:1;grid-row:1}
.sr-r-seite{grid-column:2;grid-row:1;display:grid;gap:1.8rem;align-content:start;min-width:0}
.sr-r-text .regel-text{max-height:none}
.sr-r-seite .sr-wertebox td{text-align:left;white-space:normal}
.sr-r-seite .sr-wertebox td:first-child{width:45%;color:#fdb714}
.sr-r-ks{margin:0}
@media(max-width:880px){
  .sr-r-symbol{width:100px}
  .sr-r-symbol .sr-ksym::before{font-size:3rem}
  .sr-r-spalten{grid-template-columns:minmax(0,1fr)}
  .sr-r-seite{grid-column:1;grid-row:1}
  .sr-r-text{grid-column:1;grid-row:2}
}