/* ============================================================
wk-app.css — Styles des Mitgliederbereichs
FARBEN, SCHRIFTEN UND ECKEN STEHEN NICHT HIER. Sie kommen aus
`wk-tokens.css` — verteilt von `npm run design` aus wk-design/tokens.css,
derselben Datei, aus der auch Hauptseite und Archiv leben. Bis zum
31.08.2026 führte diese Datei eine eigene Kopie mit dem Vermerk „identisch
mit tokens.css v3.2"; solche Sätze stimmen irgendwann nicht mehr, und dann
sieht der Mitgliederbereich anders aus als die Website, ohne dass jemand etwas geändert
hätte. Unten stehen nur noch Werte, die es NUR hier gibt.
Abschnitte (per Suche springen):
TOKENS · RESET · HEADER · ROLE-TAG · PAGEHERO · MAIN/PUBLIC
WERKRAUM (Buttons/Cards/Tiles) · FORMS · EVENTS/RSVP
PILLS/STATUS · KETTE · REITER (alle Umschalter) · LEDGER/SALDO
STAT/TABLE · VORLAGE-OUT · WIR-SIND · OVERLAY/SHEET
FAB · TEXTBUCH · REVEAL · FOOTER · ICONS/MOTION
============================================================ */
/* HIER STANDEN ZWEI LINIENFARBEN (`--line`, `--gold-line`) — bis zum
12.09.2026. Sie gehören nicht dem Mitgliederbereich: die Hauptseite mischte sich
dieselben Werte von Hand zusammen, und das Archiv auch. Jetzt stehen sie
in wk-design/tokens.css, abgeleitet aus `--braun` und `--gold` statt als
Zahlen geschrieben — ändert sich die Hausfarbe, ändert sich die Linie mit.
DIESE DATEI FÜHRT KEINE EIGENEN FARBEN MEHR. Was aussieht wie eine
Ausnahme, ist ein Token: die Marken-Töne (`--ton-*`) und die Feldmaße
(`--feld-*`) stehen ebenfalls in tokens.css. Eine Prüfung in
`test-frontend.mjs` meldet jeden Hex- und rgb-Wert, der hier wieder
auftaucht. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* „GANZ OBEN" IST NICHT DER BILDSCHIRMRAND (13.09.2026).
`.site-header` ist `position:fixed` und nimmt keinen Platz im Fluss ein —
der Inhalt läuft darunter hindurch, und das ist gewollt: so bleibt das
Bühnenbild oben ganz. Ein SPRUNG ZU EINEM ANKER rechnet aber ohne die
Kopfzeile: der Browser stellt das Ziel an y=0, also unter die Leiste.
Am deutlichsten im Textbuch, und dort ist es doppelt so schlimm: klickt man
links auf eine Marke, stapeln sich Kopfzeile (--kopf) UND die Werkzeugleiste
`.kopf-leiste` (--leiste) über dem Ziel — zusammen 130 Pixel. Die Marke war
also nicht „schlecht lesbar", sie war vollständig verdeckt.
`scroll-padding-top` sagt dem Browser, wo oben anfängt. Es gilt für JEDEN
Sprung im Dokument — Anker, Tastatur, `scrollIntoView()` —, deshalb steht es
hier einmal und nicht an jedem Ziel. Die zwölf Pixel obendrauf sind der
Abstand, der den Unterschied zwischen „gerade noch da" und „angekommen"
macht.
DIE HÖHEN STEHEN HIER UND NICHT ZWEIMAL: `--kopf` hieß unten in
`body.tb-edit` schon einmal `--tb-kopf: 64px` — derselbe Wert, zweimal
aufgeschrieben, für dieselbe Leiste. Wer die Kopfzeile höher macht und nur
eine der beiden Zahlen nachzieht, bekommt genau diesen Fehler zurück. */
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;
--kopf:64px;--leiste:66px;--luft:12px;
scroll-padding-top:calc(var(--kopf) + var(--luft))}
/* IM TEXTBUCH GIBT ES KEINE KOPFZEILE — `.kopf-leiste` IST der Kopf.
Die durchscheinende Kopfzeile über einer deckend weißen Werkzeugleiste
ergab einen Streifen halb sichtbaren Textes oberhalb der eigentlichen
Leiste: der Text lief unter dem Blur durch und hörte an der weißen Kante
abrupt auf. Zwei Kopfzeilen mit verschiedener Durchsicht übereinander sind
keine Gestaltung, sondern ein Unfall — und die obere hatte hier ohnehin
nichts zu sagen: Home, Tickets, Über uns gehören zur Website, nicht in ein
Textbuch. Bühnenbild und Seitenfuß sind aus demselben Grund längst weg.
Der Weg hinaus bleibt: `← Übersicht` steht als erstes in `.kopf-leiste`.
`--kopf:0px` genügt — die Leiste rückt nach oben, `main` verliert seinen
Vorhalt, die Seitenspalte klebt eine Leiste höher, und der Ankersprung
rechnet ab jetzt nur noch mit der Werkzeugleiste. Vier Stellen, ein Wert. */
html:has(body.tb-edit),html:has(body.fo-edit){--kopf:0px;
scroll-padding-top:calc(var(--leiste) + var(--luft))}
body{
background:var(--bx-d);color:var(--creme);
font-family:var(--f-body);font-size:16.5px;line-height:1.65;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
h1,h2,h3,h4{
font-family:var(--f-display);
font-variation-settings:'opsz' 144,'SOFT' var(--fd-soft),'WONK' var(--fd-wonk);
font-weight:400;line-height:1.05;
}
a{color:inherit;text-decoration:none}
/* `height:auto` ist hier KEINE Kosmetik, und sein Fehlen hat am 15.09.2026
die Fotos verunstaltet.
Die Attribute `width` und `height` am `` setzen in CSS die
gleichnamigen EIGENSCHAFTEN (Präsentationshinweis). Wer nur `max-width`
oder `width` überschreibt, lässt `height` auf dem Attributwert stehen —
bei einem Foto also auf 4000px. Die Zelle wird dann 200 breit und 4000
hoch, `aspect-ratio` greift gar nicht (es gilt nur, wenn eine Seite `auto`
ist), und `object-fit:cover` schneidet einen schmalen senkrechten Streifen
heraus. Das sieht aus wie ein verzerrtes Hochformat und ist genau das.
Ohne die Attribute springt die Seite beim Nachladen — sie müssen bleiben,
also muss diese Zeile hier stehen. */
img,svg{display:block;max-width:100%;height:auto}
::selection{background:var(--gold);color:var(--bx-d)}
:focus-visible{outline:3px solid var(--gold-h);outline-offset:2px;box-shadow:0 0 0 2px var(--bx-d);border-radius:var(--radius)}
button{font-family:var(--f-body);cursor:pointer;border:none;background:none;color:inherit;font-size:inherit}
.hide{display:none!important}
.skip-link{position:absolute;left:16px;top:-60px;background:var(--gold);color:var(--bx-d);padding:10px 18px;border-radius:var(--radius);font-weight:600;z-index:999;transition:top .2s var(--ease-soft)}
.skip-link:focus{top:16px}
/* ── Header: fixiert, über dem Bordeaux transparent auslaufend ── */
.site-header{
position:fixed;inset:0 0 auto 0;z-index:40;
display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:14px var(--gutter);
background:linear-gradient(to bottom,color-mix(in srgb, var(--bx-d) 86%, transparent),transparent);
backdrop-filter:blur(2px);
}
.brand{display:flex;align-items:center;gap:12px;text-align:left;padding:0}
.brand-mark{width:40px;height:40px;background:var(--creme);border-radius:50%;padding:2px;box-shadow:0 2px 12px rgba(0,0,0,.4)}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-name{font-family:var(--f-display);font-size:15px;font-weight:600;color:var(--creme)}
.brand-sub{font-size:8px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-h);margin-top:2px}
.site-nav{display:flex;gap:26px;align-items:center;margin-left:auto}
.site-nav a{font-size:15px;font-weight:500;letter-spacing:.02em;color:color-mix(in srgb, var(--creme) 78%, transparent);position:relative;padding:4px 0;transition:color .25s var(--ease-soft);cursor:pointer}
.site-nav a::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease-curtain)}
.site-nav a:hover{color:var(--gold-h)}
.site-nav a:hover::after{transform:scaleX(1);transform-origin:left}
.bar-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.nav-intern{font-size:14px;font-weight:500;color:var(--gold-h);padding:6px 14px;border-radius:var(--radius);border:1px solid color-mix(in srgb, var(--gold) 40%, transparent);transition:background .25s}
.nav-intern:hover{background:color-mix(in srgb, var(--gold) 12%, transparent)}
.user-name{font-size:14px;font-weight:600;color:var(--creme)}
.btn-logout{font-size:13px;color:color-mix(in srgb, var(--creme) 75%, transparent);border-radius:var(--radius);padding:6px 12px;border:1px solid color-mix(in srgb, var(--creme) 30%, transparent);transition:color .2s,border-color .2s}
.btn-logout:hover{color:var(--creme);border-color:var(--creme)}
/* ── Mobiles Menü: dieselbe Mechanik und Optik wie auf der Hauptseite ── */
.nav-burger{display:none}
@media screen and (max-width:860px){
.brand-sub{display:none}
.nav-burger{display:flex;flex-direction:column;justify-content:center;gap:5px;
width:42px;height:42px;padding:0 9px;cursor:pointer;z-index:50}
.nav-burger span{height:2px;background:var(--creme);border-radius:var(--radius);
transition:transform .3s var(--ease-soft),opacity .2s}
.nav-toggle:checked ~ .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle:checked ~ .nav-burger span:nth-child(2){opacity:0}
.nav-toggle:checked ~ .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.site-nav{position:fixed;inset:0 0 auto 0;flex-direction:column;align-items:flex-start;
gap:4px;padding:88px var(--gutter) 28px;
background:linear-gradient(180deg,var(--bx-d) 0%,var(--bx-t) 100%);
border-bottom:1px solid color-mix(in srgb, var(--gold) 30%, transparent);box-shadow:0 24px 60px rgba(0,0,0,.5);
transform:translateY(-100%);opacity:0;pointer-events:none;
transition:transform .35s var(--ease-soft),opacity .3s}
.site-nav .nav-link{font-size:17px;padding:10px 0;color:var(--creme)}
.nav-toggle:checked ~ .site-nav{transform:translateY(0);opacity:1;pointer-events:auto}
/* OFFENES MENÜ = POP-UP (01.10.2026): die Seite dahinter steht still, wie
hinter jedem Fenster (wk-popup.css). Das Menü hat kein aria-modal, also
steht es hier — in der Media-Query, damit ein offen gelassenes Menü die
Seite nicht sperrt, wenn das Fenster breiter gezogen wird. Dafür scrollt
das Menü selbst, sonst wären Einträge unter dem Bildschirmrand weg. */
html:has(.nav-toggle:checked){overflow:hidden;scrollbar-gutter:stable}
.site-nav{max-height:100dvh;overflow-y:auto;overscroll-behavior:contain}
/* Rolle, Name und Abmelden rutschen im offenen Menü untereinander. */
.bar-actions{flex-direction:column;align-items:flex-start;gap:10px;margin-top:14px;
padding-top:14px;border-top:1px solid color-mix(in srgb, var(--gold) 25%, transparent);width:100%}
}
.role-tag{font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;border-radius:var(--radius);padding:5px 10px;background:var(--bx);color:var(--creme);border:1px solid color-mix(in srgb, var(--gold) 50%, transparent);white-space:nowrap}
.role-tag.publikum{background:var(--gruen)}
.role-tag.admin{background:var(--tinte)}
.role-tag.regisseurin,.role-tag.kassenwart,.role-tag.praesident,.role-tag.vizepraesident,.role-tag.social_media{background:var(--gold-d)}
/* Kein Amt ist der Normalfall und keine Auszeichnung: dieselbe Marke, aber
ruhig — sie sagt „Mutter" oder „Mitglied", nicht „Vorstand". */
.role-tag.ohne-amt{background:var(--braun)}
/* ── Seitenkopf wie PageHero.astro: Bordeaux-Verlauf + Gold-Sonne ── */
.phero{
position:relative;overflow:hidden;
background:linear-gradient(180deg,var(--bx) 0%,var(--bx-d) 100%);
border-bottom:1px solid color-mix(in srgb, var(--gold) 28%, transparent);
padding:clamp(110px,16vh,160px) var(--gutter) clamp(36px,6vh,60px);
}
body:not(.is-in) .phero{padding:clamp(130px,20vh,200px) var(--gutter) clamp(44px,7vh,72px)}
.phero-spot{position:absolute;inset:0;pointer-events:none;
background:radial-gradient(ellipse 78% 135% at 94% -15%,color-mix(in srgb, var(--gold-h) 15%, transparent) 0%,color-mix(in srgb, var(--gold-h) 6%, transparent) 32%,transparent 64%)}
.phero-in{position:relative;max-width:var(--maxw);margin:0 auto}
.phero-eyebrow{font-size:clamp(10px,1.4vw,12px);letter-spacing:.26em;text-transform:uppercase;color:var(--gold-h);margin-bottom:14px}
.phero h1{font-size:clamp(32px,5.5vw,56px);color:var(--creme);line-height:1;max-width:20ch}
body:not(.is-in) .phero h1{font-size:clamp(38px,7vw,72px)}
.phero h1 em{font-style:italic;color:var(--gold-h);font-variation-settings:'opsz' 96,'SOFT' 44,'WONK' 1}
.phero-lead{margin-top:18px;max-width:56ch;font-size:clamp(16px,2vw,18px);color:color-mix(in srgb, var(--creme) 86%, transparent);line-height:1.7}
/* ── Inhalt: eingeloggt = heller Werkraum (Creme), ausgeloggt = Bühne ── */
main{min-height:52vh}
body.is-in main{background:var(--creme);color:var(--braun);padding:clamp(32px,5vh,52px) var(--gutter) clamp(70px,10vh,110px)}
body:not(.is-in) main{padding:34px var(--gutter) clamp(70px,10vh,120px)}
.wrap{max-width:var(--maxw);margin:0 auto}
/* Öffentliche (dunkle) Sicht */
.pub-acts{display:flex;gap:14px;flex-wrap:wrap;margin:0 0 48px}
.pub-h{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:14px;font-weight:600}
.pub-ev{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 20px;border:1px solid color-mix(in srgb, var(--gold) 30%, transparent);background:color-mix(in srgb, var(--weiss) 4%, transparent);border-radius:var(--radius);margin-bottom:10px;transition:border-color .3s}
.pub-ev:hover{border-color:var(--gold)}
.pub-ev-t{font-family:var(--f-display);font-size:19px;color:var(--creme)}
.pub-ev-d{font-size:14px;color:var(--sepia)}
.pub-badge{border-radius:var(--radius);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-h);border:1px solid color-mix(in srgb, var(--gold) 45%, transparent);padding:5px 10px;white-space:nowrap}
/* ── Heller Werkraum (CD-Unterseiten): Sand-Karten, Bordeaux, Gold nur Linie ── */
.eyebrow{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--bx-h);font-weight:600}
.muted{color:var(--braun)}
.btn-primary{background:var(--bx);color:var(--creme);font-weight:700;font-size:14px;letter-spacing:.02em;border-radius:var(--radius);padding:13px 26px;transition:transform .25s var(--ease-soft),background .25s,box-shadow .25s}
.btn-primary:hover{background:var(--bx-h);transform:translateY(-2px);box-shadow:0 14px 30px color-mix(in srgb, var(--bx) 28%, transparent)}
.btn-gold{background:var(--gold);color:var(--bx-d);font-weight:700;font-size:14px;border-radius:var(--radius);padding:13px 26px;transition:background .25s,transform .25s var(--ease-soft)}
.btn-gold:hover{background:var(--gold-h);transform:translateY(-2px)}
.btn-ghost{border:1px solid var(--bx);color:var(--bx);font-weight:600;font-size:14px;border-radius:var(--radius);padding:12px 24px;transition:background .25s,color .25s}
.btn-ghost:hover{background:var(--bx);color:var(--creme)}
.btn-soft{background:var(--sand);color:var(--braun);border:1px solid var(--line);font-weight:600;font-size:13.5px;border-radius:var(--radius);padding:10px 16px;transition:border-color .25s,color .25s}
.btn-soft:hover{border-color:var(--gold);color:var(--tinte)}
.btn-sm{padding:8px 14px;font-size:13px}
.link{color:var(--bx);font-weight:600;font-size:14px;text-decoration:underline;text-underline-offset:3px;text-decoration-color:color-mix(in srgb, var(--gold) 60%, transparent);padding:8px 0}
.link:hover{color:var(--bx-h)}
/* Ein Knopf, der gerade arbeitet, sieht auch so aus — und federt nicht mehr
mit. Sonst bleibt ein gesperrter Knopf äußerlich ein Angebot, und wer
drückt, weil nichts passiert, drückt gleich noch einmal. Die Knöpfe mit
eigener Regel (`.kv-gross`, `.bu-pm`) bleiben davon unberührt — ihre
Klassen wiegen schwerer. */
/* NICHT der gewählte Zustand: `.gewaehlt` ist auch `disabled`, aber aus dem
entgegengesetzten Grund — nicht „geht gerade nicht", sondern „das ist deine
Antwort". Ein Knopf, der eine Auskunft ist, wird nicht blass. */
button:disabled:not(.gewaehlt){opacity:.55;cursor:default}
button:not(:disabled):active{transform:translateY(1px)}
.card{background:var(--sand);border:1px solid var(--gold-line);border-radius:var(--radius);padding:24px 22px;transition:border-color .3s}
.card h3{font-size:20px;color:var(--bx)}
/* Kachel-Übersicht (wie Wegweiser-Karten der Hauptseite, mit 3D-Kippen) */
.home-head{display:flex;justify-content:flex-end;align-items:center;gap:10px;margin-bottom:18px}
.prev-sel{font-family:var(--f-body);font-size:13.5px;font-weight:600;color:var(--braun);background:var(--sand);border:1px solid var(--line);padding:9px 12px;border-radius:var(--radius);cursor:pointer}
.prev-sel:focus{border-color:var(--gold);outline:none}
/* DIE Reiterleiste. Jeder Umschalter im Mitgliederbereich benutzt sie (reiterHTML in
wk-app.js): Auswertungen, Info-Vorlagen, Spielplan-Ansicht, „Für: …". */
.reiter{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:0 0 16px;border-bottom:1px solid var(--gold-line)}
.reiter-label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--bx-h);font-weight:600;margin-right:6px}
.reiter-btn{font-family:var(--f-body);font-size:14.5px;font-weight:600;color:var(--braun);background:none;border:none;
padding:9px 14px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;border-radius:var(--radius) var(--radius) 0 0;
transition:color .2s var(--ease-soft),background .2s,border-color .2s;border-radius:var(--radius)}
.reiter-btn:hover{color:var(--bx);background:var(--sand)}
.reiter-btn.an{color:var(--bx);border-bottom-color:var(--gold)}
/* Die Leiste im Werkzeug sitzt unter dem Kopf, nicht am Seitenrand kleben. */
.tool-head+.reiter{margin-top:-2px}
.vorschau-band{margin-left:auto;font-size:13px;font-weight:600;color:var(--braun);background:var(--sand);
border:1px solid var(--gold-line);border-radius:var(--radius);padding:6px 14px;display:inline-flex;align-items:center;gap:8px}
.tiles-gruppe+.tiles-gruppe{margin-top:34px}
.tiles-titel{font-family:var(--f-display);font-size:19px;color:var(--bx);margin-bottom:14px;
display:flex;align-items:baseline;gap:10px;padding-bottom:8px;border-bottom:1px solid var(--gold-line)}
.tiles-titel span{font-family:var(--f-body);font-size:13.5px;font-weight:500;color:var(--braun)}
.tiles{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));perspective:1000px}
.tile{text-align:left;background:var(--sand);border:1px solid var(--gold-line);border-radius:var(--radius);padding:22px;
position:relative;
display:flex;flex-direction:column;gap:10px;align-items:flex-start;min-height:142px;
transform-style:preserve-3d;transition:transform .4s var(--ease-soft),box-shadow .4s var(--ease-soft),border-color .3s}
.tile:hover{transform:rotateX(-3deg) rotateY(3.5deg) translateY(-5px);box-shadow:-12px 16px 36px color-mix(in srgb, var(--schatten-warm) 18%, transparent);border-color:var(--gold)}
.tile .ico{width:42px;height:42px;border-radius:var(--radius);background:var(--creme);border:1px solid color-mix(in srgb, var(--gold) 30%, transparent);display:flex;align-items:center;justify-content:center;color:var(--bx)}
.tile h3{font-size:20px;color:var(--bx)}
.tile p{font-size:14.5px;color:var(--braun);line-height:1.55}
.tile.admin .ico{background:var(--bx);color:var(--creme)}
/* Die eine Zahl im Mitgliederbereich (offene Antworten, Kachel „Auftritte"). Bordeaux mit
Creme darauf — die Handlungsfarbe, nicht Gold: Gold ist Detail und auf Hell
nicht lesbar. Eckig wie alles andere (`--radius`). */
.tile-zahl{position:absolute;top:16px;right:16px;background:var(--bx);color:var(--creme);
font-family:var(--f-body);font-size:13px;font-weight:700;line-height:1;
min-width:24px;padding:6px 7px;text-align:center;border-radius:var(--radius)}
/* Dieselbe Marke mitten im Satz — dort trägt sie keine Ecke oben rechts. */
.tile-zahl.im-text{position:static;display:inline-block;margin-right:4px;vertical-align:2px}
/* Und derselbe Platz für die gute Nachricht: nichts offen. Das Paar aus
Fläche und Schrift, wie jede Statusfarbe — nie eine Farbe allein. */
.tile-zahl.gut{background:var(--ton-gut-flaeche);color:var(--ton-gut-schrift);font-size:14px}
.tool-head{display:flex;align-items:center;gap:12px;margin-bottom:20px;flex-wrap:wrap}
.grid{display:grid;gap:16px}
@media screen and (min-width:760px){.grid.two{grid-template-columns:1fr 1fr}.grid.side{grid-template-columns:1.5fr 1fr}}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
/* ── FORMULARE ────────────────────────────────────────────────────────────
WIE EIN FELD AUSSIEHT, STEHT NICHT MEHR HIER, sondern in `wk-felder.css`
(verteilt aus wk-design/felder.css) — dieselbe Datei, aus der auch
Hauptseite und Archiv ihre Felder nehmen. Hier steht nur noch, wie ein
Feld im Werkraum LIEGT: Beschriftung darüber, Abstand darunter.
Und `class="feld"` gibt es nicht mehr. Es war der zweite Weg: 29 Stellen
im Finanz-Strang, zu denen es in keiner Stylesheet-Datei eine Regel gab —
Konto, Geldgeber, Kostenart, Vereinsdaten, Beleg-Posten standen deshalb
als nackte Browser-Felder in einem sonst durchgestalteten Mitgliederbereich, und ein
`style="flex-direction:row"` daran tat nichts, weil `.feld` kein `flex`
hatte. Eine Prüfung meldet jetzt jede Klasse im Quelltext, zu der es keine
Regel gibt. */
.field{display:flex;flex-direction:column;gap:6px;margin:13px 0}
.field label{font-size:13px;font-weight:600;color:var(--braun)}
/* Eine Ankreuzzeile liegt quer, nicht untereinander: Kästchen, dann Satz. */
.field.quer{flex-direction:row;align-items:center;gap:8px}
.field.quer label{font-weight:400;color:var(--tinte);font-size:14.5px}
/* Ein Auswahlfeld IN einem Feld nimmt dessen Breite. Seine eigene
Mindestbreite gilt nur, wenn es frei in einer Leiste steht — in einer
90 px schmalen Spalte („Satz") würde sie die Zeile sprengen. */
.field .wk-select{min-width:0;width:100%}
/* Passwortfeld mit Augen-Schalter: der Knopf sitzt IM Feld, deshalb rechts
Platz freihalten, damit lange Passwörter nicht unter ihm verschwinden. */
.pw-wrap{position:relative;display:flex}
.pw-wrap input{flex:1;min-width:0;padding-right:46px}
.pw-auge{position:absolute;right:2px;top:2px;bottom:2px;width:40px;display:flex;
align-items:center;justify-content:center;border:0;background:none;cursor:pointer;
color:var(--braun);border-radius:var(--radius)}
.pw-auge:hover{color:var(--bx)}
.pw-auge .i{width:20px;height:20px}
.ev{display:flex;align-items:center;gap:14px;justify-content:space-between;padding:13px 15px;background:var(--weiss);border:1px solid var(--line);border-radius:var(--radius)}
.ev-main{display:flex;flex-direction:column;gap:2px}
.ev-t{font-family:var(--f-display);font-size:17px;color:var(--tinte)}
.ev-d{font-size:13.5px;color:var(--braun)}
.rsvp{display:flex;gap:8px;margin-top:10px}
.rsvp button{flex:1;font-weight:600;font-size:13.5px;padding:10px}
.rsvp .on-ja{background:var(--gruen);color:var(--creme)}
.rsvp .on-nein{background:var(--bx);color:var(--creme)}
.att{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.chip{font-size:12.5px;padding:4px 10px;border-radius:var(--radius);border:1px solid var(--line);background:var(--weiss);color:var(--braun)}
.chip.ja{background:var(--ton-gut-flaeche);color:var(--gruen);border-color:color-mix(in srgb, var(--gruen) 30%, transparent)}
.chip.nein{background:var(--ton-offen-flaeche);color:var(--bx);border-color:color-mix(in srgb, var(--bx) 30%, transparent)}
.check-row{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.check{display:flex;align-items:center;gap:7px;background:var(--weiss);padding:8px 13px;border-radius:var(--radius);font-size:14px;cursor:pointer;border:1px solid var(--line);color:var(--tinte)}
.check input{accent-color:var(--bx)}
.note{font-size:14px;color:var(--braun);background:var(--weiss);border-left:3px solid var(--gold);padding:12px 14px;border-radius:0 var(--radius) var(--radius) 0;margin-top:14px;line-height:1.6}
.pill{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.1em;padding:4px 8px;border-radius:var(--radius);text-transform:uppercase}
.pill.jugend{background:var(--ton-gut-flaeche);color:var(--gruen)}
.pill.kinder{background:var(--ton-achtung-flaeche);color:var(--gold-d)}
.pill.erwachsene{background:var(--ton-offen-flaeche);color:var(--bx)}
.pill.warte{background:var(--ton-wartet-flaeche);color:var(--braun)}
/* Zustand eines Zahlungseingangs in der Durchsicht (Beiträge › Einnahmen):
offen = noch nichts entschieden, warte = Zahler ungeklärt, ja = fertig. */
.pill.offen{background:var(--ton-offen-flaeche);color:var(--bx)}
.pill.ja{background:var(--ton-gut-flaeche);color:var(--gruen)}
.pill.aktiv{background:var(--ton-gut-flaeche);color:var(--gruen)}
/* Status-Phasen (wartend → eingeladen → schnuppernd → aktiv/passiv → ausgetreten) */
.pill.wartend{background:var(--ton-wartet-flaeche);color:var(--braun)}
.pill.eingeladen{background:var(--ton-unterwegs-flaeche);color:var(--ton-unterwegs-schrift)}
.pill.schnuppernd{background:var(--ton-schnuppert-flaeche);color:var(--ton-schnuppert-schrift)}
.pill.passiv{background:var(--ton-passiv-flaeche);color:var(--braun)}
.pill.ausgetreten{background:var(--ton-ruht-flaeche);color:var(--ton-ruht-schrift)}
.pill.selbst,.pill.mutter,.pill.vater,.pill.vormund,.pill.sorgeberechtigt{background:var(--sand);color:var(--bx)}
/* Beziehungs-Chip (Konto ↔ Mitglied) */
.bez{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--braun);background:var(--sand);border:1px solid var(--gold-line);padding:3px 8px;border-radius:var(--radius)}
.bez.pending{background:var(--ton-wartet-flaeche);color:var(--gold-d);border-color:color-mix(in srgb, var(--gold-d) 40%, transparent)}
/* Status-Kette als Mini-Fluss */
.kette{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:2px 0 16px}
.kette .k{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--braun);background:var(--weiss);border:1px solid var(--line);border-radius:var(--radius);padding:4px 11px}
.kette .k .c{color:var(--bx);font-weight:700}
.kette .arr{color:var(--sepia);font-size:12px}
/* Kind-/Mitglied-Umschalter für Eltern-Konten */
/* Ledger-Beträge */
.num{font-variant-numeric:tabular-nums;font-weight:600;text-align:right;white-space:nowrap}
.num.pos{color:var(--gruen)}
.num.neg{color:var(--bx)}
.saldo{display:flex;align-items:baseline;gap:10px;padding:12px 16px;border-radius:var(--radius);border:1px solid var(--gold-line);background:var(--sand);margin-bottom:14px}
.saldo .lbl{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--braun);font-weight:600}
.saldo .val{font-family:var(--f-display);font-size:26px}
.saldo .val.pos{color:var(--gruen)}
.saldo .val.neg{color:var(--bx)}
/* Info-Vorlagen: fertiger Text zum Kopieren (WhatsApp-Look) */
.vorlage-out{white-space:pre-wrap;font-family:var(--f-body);font-size:13.5px;line-height:1.55;background:var(--weiss);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;color:var(--tinte);max-height:360px;overflow:auto;margin-top:4px}
/* „Wir sind X" — anonyme Mitgliederzahl, sichtbar für JEDE Rolle (DSGVO-ok) */
.wir-sind{display:flex;align-items:center;gap:22px;background:linear-gradient(120deg,var(--bx) 0%,var(--bx-d) 100%);color:var(--creme);border:1px solid var(--gold-line);border-radius:var(--radius);padding:20px 26px;margin-bottom:24px;box-shadow:0 12px 30px -18px color-mix(in srgb, var(--schatten-warm) 50%, transparent)}
.wir-zahl{font-family:var(--f-display);font-size:clamp(42px,7vw,64px);line-height:.95;color:var(--gold-h)}
.wir-txt .eyebrow{color:var(--gold-h)}
.wir-txt p{font-size:14.5px;color:color-mix(in srgb, var(--creme) 85%, transparent);margin-top:4px;line-height:1.5}
.wir-txt b{color:var(--creme);font-variant-numeric:tabular-nums}
.wir-groups{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.wir-groups .g{font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--creme);background:color-mix(in srgb, var(--weiss) 10%, transparent);border:1px solid var(--gold-line);border-radius:var(--radius);padding:4px 11px}
@media screen and (max-width:560px){.wir-sind{flex-direction:column;align-items:flex-start;gap:12px;text-align:left}}
.vorlagen-controls{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end}
.vorlagen-foot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-top:12px}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(115px,1fr));gap:14px}
.stat{background:var(--sand);border:1px solid var(--gold-line);border-radius:var(--radius);padding:14px 16px}
.stat .n{font-family:var(--f-display);font-size:30px;color:var(--bx);line-height:1.1}
.stat .l{font-size:11px;color:var(--braun);letter-spacing:.08em;text-transform:uppercase;font-weight:600;margin-top:2px}
.tbl-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--radius);margin-top:10px;background:var(--weiss)}
table.db{width:100%;border-collapse:collapse;font-size:13px}
table.db th,table.db td{text-align:left;padding:8px 11px;border-bottom:1px solid var(--line);white-space:nowrap;color:var(--tinte)}
table.db th{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--bx-h);font-weight:700}
table.db tr:last-child td{border-bottom:none}
/* Ein Eingabefeld MITTEN in einer Tabelle bekommt sonst gar keins ab: die
Feldgestaltung hängt an `.field`, und in einer Zelle steht kein `.field`.
Ergebnis war ein nacktes Browser-Kästchen zwischen lauter gesetztem Text. */
.zell-eingabe{font-family:var(--f-body);font-size:14px;padding:8px 11px;border-radius:var(--radius);
border:1px solid color-mix(in srgb, var(--braun) 30%, transparent);background:var(--weiss);color:var(--tinte);min-width:210px}
.zell-eingabe:focus{border-color:var(--gold);outline:none}
/* Der Knopf steht mit Abstand daneben, nicht an der Feldkante: sonst sieht
er aus, als gehörte er ins Feld, und wird beim Tippen mitgetroffen. */
.zell-tat{display:flex;gap:14px;align-items:center;flex-wrap:nowrap}
.zell-eingabe.schmal{min-width:0;width:88px}
/* Ein Feld IN einer Tabellenzelle bringt keinen eigenen Abstand mit — die
Zelle hat schon einen, und die Zeile soll nicht auseinandergehen. */
.field.zell-feld{margin:0;display:inline-flex}
table.matrix td{text-align:center}
table.matrix td:first-child{text-align:left;font-weight:600}
table.matrix input{accent-color:var(--bx);width:17px;height:17px;cursor:pointer}
.lock{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:28px;color:var(--braun);background:var(--sand);border-radius:var(--radius);border:1px dashed var(--sepia)}
/* ── Pop-ups: wie die Dialoge der Hauptseite (Weiß, Bordeaux-Kante) ── */
.overlay{position:fixed;inset:0;z-index:60;background:color-mix(in srgb, var(--schatten-tief) 60%, transparent);display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(3px)}
.sheet{background:var(--weiss);border-radius:var(--radius);border-top:4px solid var(--bx);max-width:440px;width:100%;padding:28px;box-shadow:0 30px 70px -20px rgba(0,0,0,.6);max-height:92vh;overflow:auto;color:var(--braun)}
.sheet h2{font-size:26px;color:var(--bx);margin-bottom:4px}
.demo-cards{display:grid;gap:8px;margin:8px 0}
/* Überschrift je Testkonten-Gruppe (Ämter · Klammern · Ränder). Einundzwanzig
Knöpfe untereinander sind keine Liste, sondern eine Wand. */
.tk-gruppe{margin:16px 0 6px;font-size:12px;font-weight:700;letter-spacing:.08em;
text-transform:uppercase;color:var(--braun)}
/* Ein Konto, dessen Anmeldung scheitern MUSS — das ist die Aussage, nicht
ein Fehler. Gestrichelt statt rot: rot hieße „kaputt". */
.demo.scheitert{border-style:dashed;opacity:.75}
.demo{display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;width:100%;background:var(--sand);color:var(--tinte);border:1px solid var(--gold-line);border-radius:var(--radius);padding:12px 14px;font-weight:500;transition:border-color .25s}
.demo:hover{border-color:var(--gold)}
.demo b{font-family:var(--f-display);font-weight:600;color:var(--bx)}
.demo small{display:block;color:var(--braun);font-weight:400;font-size:12.5px}
.sep{display:flex;align-items:center;gap:10px;margin:18px 0 10px;color:var(--braun);font-size:13px}
.sep::before,.sep::after{content:"";height:1px;background:var(--line);flex:1}
.code-hint{background:var(--sand);border:1px dashed var(--gold-d);border-radius:var(--radius);padding:10px 14px;font-size:14px;color:var(--braun);margin:10px 0}
.code-hint b{font-family:var(--f-display);color:var(--bx);letter-spacing:.12em}
.close-x{color:var(--braun);font-size:22px;padding:2px 8px;line-height:1}
.close-x:hover{color:var(--bx)}
/* Kopf, Text und Fuß eines Fensters. Standen vorher als Inline-Stil in jedem
einzelnen Dialog — die Kopfzeile vierundzwanzigmal Zeichen für Zeichen
gleich, die Fußzeile neunmal. Geschrieben werden sie jetzt von `dialog()`
in wk-bausteine.js, und wie sie aussehen, steht hier. */
.dlg-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.dlg-kopf>div{flex:1;min-width:0}
.dlg-kopf h2{min-width:0}
.dlg-unter{color:var(--braun);font-size:14px}
.dlg-text{color:var(--braun);font-size:14.5px;margin-top:6px}
.dlg-fuss{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:18px}
.dlg-fertig{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.dlg-fertig .muted{font-size:14.5px}
.empty-coll{font-size:13px;color:var(--braun);font-style:italic;padding:8px}
/* ── MITGLIEDERVERWALTUNG: Tabelle zum Arbeiten ────────────
Raster statt
, damit Spaltenbreiten und das Bearbeiten in der Zelle
sauber zusammengehen. Ruhig gehalten: die Daten sollen auffallen, nicht das Gitter. */
.mv-leiste{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.mv-suche{flex:1;min-width:210px;font-family:var(--f-body);font-size:15px;
padding:10px 13px;border:1px solid var(--line);border-radius:var(--radius);
background:var(--weiss);color:var(--tinte)}
.mv-suche:focus{border-color:var(--gold);outline:none}
.mv-filter{font-family:var(--f-body);font-size:14px;padding:10px 11px;
border:1px solid var(--line);border-radius:var(--radius);background:var(--weiss);
color:var(--braun);cursor:pointer}
.mv-filter:focus{border-color:var(--gold);outline:none}
.mv-zahl{font-size:13px;color:var(--braun);font-variant-numeric:tabular-nums;
white-space:nowrap;margin-left:auto}
.mv-hilfe{font-size:13px;color:var(--sepia);margin-bottom:12px}
.mv-hilfe b{color:var(--braun);font-weight:600}
/* Die Zeile über der Tabelle, wenn Konten auf ihre Einladung warten (1082).
Sie IST das Nachfassen — es gibt bewusst keinen Cron dafür —, also darf sie
nicht wie ein Hinweis aussehen, den man wegliest. Linker Balken wie beim
offenen Antrag, aber am Ort der Handlung statt in einem eigenen Bereich. */
.mv-offen{display:flex;flex-wrap:wrap;align-items:center;gap:10px;
margin-bottom:12px;padding:10px 13px;background:var(--weiss);
border:1px solid var(--line);border-left:3px solid var(--bx);
border-radius:var(--radius);font-size:13.5px;color:var(--braun)}
.mv-offen .mv-offen-wer{color:var(--sepia);font-size:12.5px;width:100%}
.mv-offen button{margin-left:auto}
.mv-tabelle{background:var(--weiss);border:1px solid var(--line);border-radius:var(--radius);
overflow-x:auto}
.mv-kopf,.mv-zeile{display:grid;grid-template-columns:var(--mv-raster);
align-items:stretch;min-width:940px}
.mv-kopf{background:var(--sand);border-bottom:1px solid var(--line);
position:sticky;top:0;z-index:2}
.mv-th{font-family:var(--f-body);font-size:11.5px;font-weight:700;
letter-spacing:.09em;text-transform:uppercase;color:var(--braun);
text-align:left;padding:11px 12px;background:none;border:none;cursor:pointer;
display:flex;align-items:center;gap:5px;border-radius:var(--radius)}
.mv-th:hover{color:var(--bx)}
.mv-th.sortiert{color:var(--bx)}
.mv-th .pfeil{color:var(--gold-d);font-size:12px}
.mv-th.still{cursor:default}
.mv-th.still:hover{color:var(--braun)}
.mv-zeile{border-bottom:1px solid color-mix(in srgb, var(--braun) 9%, transparent)}
.mv-zeile:last-child{border-bottom:none}
.mv-zeile:hover{background:var(--creme)}
.mv-td{padding:9px 12px;font-size:14.5px;color:var(--tinte);display:flex;
align-items:center;min-height:44px;overflow:hidden}
.mv-td.still{color:var(--braun);font-size:13.5px}
.mv-td .leer{color:var(--sepia)}
/* Die Notiz aus dem Anmeldeformular: drei Zeilen, dann Tooltip. Ganz
abgeschnitten wäre sie wertlos, ganz ausgeklappt sprengte sie die Zeile. */
.mv-notiz{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;
overflow:hidden;white-space:normal;line-height:1.35}
/* Die Gegenliste unter „Wer darf auf …": fließender Text statt Tabelle — sie
ist zum Abgleichen da, nicht zum Durchgehen. */
.frg-nicht{margin:14px 0 4px;font-size:14px;line-height:1.7;color:var(--braun)}
.mv-abschnitt{font-family:var(--f-display);font-size:19px;color:var(--bx);margin:26px 0 4px}
.mv-edit{cursor:text;border-radius:var(--radius);outline:none;
box-shadow:inset 0 0 0 1px transparent;transition:box-shadow .12s,background .12s}
.mv-edit:hover{box-shadow:inset 0 0 0 1px var(--line);background:var(--weiss)}
.mv-edit:focus-visible{box-shadow:inset 0 0 0 2px var(--gold)}
.mv-edit.tippt{background:var(--weiss);box-shadow:inset 0 0 0 2px var(--gold);padding:4px 6px}
.mv-edit.frisch{background:color-mix(in srgb, var(--gruen) 10%, transparent)}
.mv-edit input,.mv-edit select{width:100%;font-family:var(--f-body);font-size:14.5px;
padding:6px 7px;border:none;background:none;color:var(--tinte);outline:none}
.mv-aktionen{gap:5px;justify-content:flex-end;flex-wrap:wrap}
.btn-xs{padding:5px 10px;font-size:12px;border-radius:var(--radius)}
.mv-nichts{padding:34px;text-align:center;color:var(--braun);font-style:italic;font-size:15px}
/* DIE DREI SCHNUPPERPUNKTE. Groß genug für einen Daumen (Treffer 30px), auch
wenn der Punkt selbst klein aussieht — geklickt wird das hier am Rand der
Halle auf dem Handy, nicht am Schreibtisch. Kein Rot und kein Häkchen: es
ist eine Zählung, keine Bewertung. */
.mv-punkte{display:inline-flex;gap:2px;align-items:center}
.mv-punkt{min-width:30px;height:30px;padding:0;border:none;background:none;cursor:pointer;
font-size:17px;line-height:1;color:var(--line);transition:color .12s,transform .12s}
.mv-punkt:hover{color:var(--gold-d);transform:scale(1.15)}
.mv-punkt.voll{color:var(--gruen)}
.mv-punkt:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:50%}
/* Erlaubnis-Marken: erledigt oder offen. Kein Rot fürs Offene — es ist keine
Verfehlung, sondern eine Nachfassliste. */
.mv-erl{gap:5px;flex-wrap:wrap}
.erl{font-size:12px;padding:3px 8px;border-radius:var(--radius);border:1px solid var(--line);
white-space:nowrap;line-height:1.5}
.erl.ja{background:var(--ton-gut-flaeche);color:var(--gruen);border-color:color-mix(in srgb, var(--gruen) 30%, transparent)}
.erl.offen{background:var(--sand);color:var(--braun)}
/* „Nichts erlaubt" ist entschieden — deshalb fest umrandet und nicht blass
wie das offene. Es steht neben ✓, nicht neben ○. */
.erl.nein{background:var(--weiss);color:var(--bx);border-color:var(--bx-h)}
/* „Ältere Fassung": erteilt, aber zu einem Text, den es so nicht mehr gibt.
Warm wie „offen", weil beides eine Nachfrage bedeutet — aber deutlicher
abgesetzt, damit man die beiden in einer langen Liste unterscheidet. */
.erl.alt{background:var(--sand);color:var(--braun);border-color:var(--gold)}
/* Eine Anmeldung, die seit Tagen nicht bestätigt wurde. Bordeaux und fett,
aber ohne Kasten: sie steht mitten in der Kontaktspalte zwischen Namen und
Telefonnummern, und eine Marke dort würde die Zeile auseinanderreißen.
Auffallen soll sie trotzdem — dahinter steckt fast immer ein Tippfehler in
der Adresse, und den findet nur, wer hinsieht. */
.warn-alt{color:var(--bx);font-weight:700;cursor:help}
/* Was bisher galt — dieselbe Bauform wie die Namenslisten am Termin. */
.foto-verlauf{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.foto-verlauf>summary{cursor:pointer;display:flex;align-items:center;gap:8px;
font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--braun)}
/* Die Aktionsknöpfe bleiben stehen, solange die Tabelle seitlich läuft —
sonst schiebt man die Zeile nach rechts und verliert genau das, wofür man
sie geöffnet hat. Der Hintergrund muss mit, sonst scheinen die Zellen durch. */
.mv-aktionen{position:sticky;right:0;background:var(--weiss)}
.mv-zeile:hover .mv-aktionen{background:var(--creme)}
/* ── Karteikarte ── */
.kt-kopf h2{font-family:var(--f-display);font-size:22px}
.kt-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:2px 18px}
.kt-zeile{display:flex;flex-direction:column;padding:6px 0}
.kt-label{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--braun);font-weight:700}
.kt-zeile .mv-td{min-height:38px;padding:6px 8px;margin-left:-8px}
.kt-liste{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-direction:column;gap:12px}
.kt-kontakt,.kt-punkt{font-size:14.5px;color:var(--tinte)}
.kt-punkt{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kt-erreich{font-size:13.5px;color:var(--braun);margin-top:2px}
.kt-erreich a{color:var(--bx)}
/* Auf dem Handy wird aus jeder Zeile eine Karte: eine 940 px breite Tabelle
auf einem 390-px-Schirm ist kein Kompromiss, sondern eine Zumutung.
Die Überschrift kommt aus data-label, weil die Kopfzeile hier entfällt.
WICHTIG: `screen` muss dranstehen — eine A4-Seite ist im Druck rund 790 px
„breit", und ohne das griffe diese Regel auch auf Papier. */
@media screen and (max-width:760px){
.mv-zahl{margin-left:0}
.mv-leiste{position:sticky;top:0;z-index:3;background:var(--creme);
padding:8px 0;margin-bottom:6px}
/* In einer Karte klebt sie auf deren Sand, nicht auf dem Creme der Seite. */
.card .mv-leiste{background:var(--sand)}
.mv-tabelle{background:none;border:none;overflow-x:visible}
.mv-kopf{display:none}
/* Die Karte ist ein umbrechender Fluss, kein Stapel: Name und Pillen legen
sich nebeneinander, alles Weitere darunter. Acht Zeilen aus Überschrift
UND Wert wären auf einem 390-px-Schirm eine Bildschirmhöhe je Mitglied —
man sähe zwei Leute und müsste für den dritten scrollen. */
.mv-zeile{position:relative;display:flex;flex-wrap:wrap;align-items:baseline;
gap:1px 8px;min-width:0;background:var(--weiss);border:1px solid var(--line);
border-radius:var(--radius);padding:9px 11px;margin-bottom:8px}
.mv-zeile:hover{background:var(--weiss)}
.mv-zeile .mv-td{display:block;width:100%;min-height:0;padding:1px 0;
font-size:14px;overflow:visible}
/* Die Überschrift steht VOR dem Wert, nicht darüber — das halbiert die Höhe
der Karte, und gelesen wird sie ohnehin nur beim ersten Mal. */
.mv-zeile .mv-td[data-label]::before{content:attr(data-label) ":";display:inline;
font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--braun);
font-weight:700;margin-right:5px}
/* Kopf der Karte: der Name ist die Zeile, Gruppe und Status stehen als
Pillen daneben. Alle drei brauchen keine Überschrift — man sieht ihnen an,
was sie sind. */
.mv-zeile .mv-c-nachname{font-size:16px;font-weight:600;padding-bottom:3px}
.mv-zeile .mv-c-gruppe,.mv-zeile .mv-c-status{width:auto;padding:0 0 6px}
.mv-zeile .mv-c-nachname::before,.mv-zeile .mv-c-gruppe::before,
.mv-zeile .mv-c-status::before,.mv-zeile .mv-c-offen::before{content:none}
/* Kurze Angaben teilen sich eine Zeile, lange bekommen ihre eigene: so
schrumpft die Karte von acht Zeilen auf fünf, ohne dass etwas zusammenrückt,
was zusammen keinen Sinn ergibt. */
.mv-zeile .mv-c-geb,.mv-zeile .mv-c-aufnahme,.mv-zeile .mv-c-alter{width:auto}
.mv-zeile .mv-c-kontakt{font-size:13.5px}
.mv-zeile .mv-c-offen{padding-top:5px}
/* Was leer ist, braucht auf dem Handy keine Zeile. Fällt `:has` aus, steht
dort eben ein Strich — die Karte ist dann länger, aber nicht kaputt. */
.mv-zeile .mv-td:has(> .leer:only-child){display:none}
.mv-zeile .mv-edit{padding:2px 4px;margin-left:-4px}
/* Aktionen: mehr Luft dazwischen als am Rechner. Auf einem Touchscreen
liegen 6 px zwischen zwei Knöpfen innerhalb einer Fingerkuppe — man trifft
dann „Austritt" statt „Ändern", und das ist eine Rückfrage, die niemand
erwartet hat. Deshalb 12 px und größere Flächen. */
.mv-aktionen{position:static;display:flex;justify-content:flex-start;
gap:12px;flex-wrap:wrap;padding-top:10px;padding-right:52px;background:none}
.mv-zeile:hover .mv-aktionen{background:none}
.mv-aktionen::before{content:none}
.mv-aktionen .btn-xs{padding:8px 14px;font-size:13px}
/* Das Kuvert immer an derselben Stelle: unten rechts in der Karte. Der
Innenabstand rechts oben hält die anderen Knöpfe davon fern, damit sich
nichts überlagert, wenn die Zeile umbricht. */
.mv-zeile .mv-mailknopf{position:absolute;right:11px;bottom:9px;margin:0;
padding:8px 12px;font-size:15px;line-height:1}
.kt-raster{grid-template-columns:1fr}
}
/* ── BEITRÄGE & FINANZEN ── */
.bt-minus{color:var(--bx);font-weight:600}
.bt-plus{color:var(--gruen);font-weight:600}
/* ── SPIELPLAN ─────────────────────────────────────────── */
.pill.vs-verfuegbar{background:var(--ton-gut-flaeche);color:var(--gruen)}
.pill.vs-wenige{background:var(--ton-achtung-flaeche);color:var(--gold-d)}
.pill.vs-ausverkauft{background:var(--ton-offen-flaeche);color:var(--bx)}
.pill.vs-abgesagt{background:var(--ton-ruht-flaeche);color:var(--ton-ruht-schrift);text-decoration:line-through}
.mv-zeile.vergangen{opacity:.5}
.sp-status{font-family:var(--f-body);font-size:12px;padding:4px 6px;border-radius:var(--radius);
border:1px solid var(--line);background:var(--weiss);color:var(--braun);max-width:118px}
.sp-zaehler{font-size:12px;color:var(--bx);margin-top:-6px}
.sp-zaehler.ok{color:var(--gruen)}
/* Schalter statt Häkchen: „öffentlich" ist die folgenreichste Angabe der Zeile. */
.sp-schalter{position:relative;display:inline-flex;cursor:pointer}
.sp-schalter input{position:absolute;opacity:0;width:0;height:0}
.sp-schalter span{width:38px;height:21px;border-radius:var(--radius);background:var(--sand);
border:1px solid var(--line);transition:background .2s;position:relative;display:block}
.sp-schalter span::after{content:"";position:absolute;top:2px;left:2px;width:15px;height:15px;
border-radius:50%;background:var(--weiss);box-shadow:0 1px 3px color-mix(in srgb, var(--braun) 35%, transparent);transition:transform .2s}
.sp-schalter input:checked + span{background:var(--gruen);border-color:var(--gruen)}
.sp-schalter input:checked + span::after{transform:translateX(17px)}
.sp-schalter input:focus-visible + span{outline:2px solid var(--gold);outline-offset:2px}
/* ── BLATT FÜR DEN TOURISMUS-HUB ── */
.hub-pruef{border-radius:var(--radius);padding:14px 16px;margin:14px 0 18px;font-size:14px}
.hub-pruef.fertig{background:var(--ton-gut-flaeche);color:var(--gruen)}
.hub-pruef.offen{background:var(--sand);color:var(--braun)}
.hub-pruef ul{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:3px}
.hub-pruef li{font-size:13.5px}
.hub-pruef li.ok{color:var(--gruen)}
.hub-pruef li.fehlt{color:var(--bx);font-weight:600}
.hub-block{margin-bottom:18px}
.hub-block h3{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--braun);
font-family:var(--f-body);font-weight:700;padding-bottom:6px;border-bottom:1px solid var(--line);margin-bottom:8px}
.hub-feld{display:grid;grid-template-columns:150px 1fr auto;gap:10px;align-items:start;
padding:7px 0;font-size:14px}
.hub-bez{color:var(--braun);font-weight:600;font-size:13px}
.hub-hint{display:block;font-weight:400;font-size:11.5px;color:var(--sepia)}
.hub-wert{white-space:pre-line;word-break:break-word;color:var(--tinte)}
.hub-wert .leer{color:var(--bx);font-style:italic}
.hub-feld .btn-xs.kopiert{background:var(--gruen);color:var(--creme);border-color:var(--gruen)}
@media screen and (max-width:600px){ .hub-feld{grid-template-columns:1fr;gap:3px} }
/* ── ANMELDESEITE ──────────────────────────────────────────
Bewusst schlicht: eine ruhige Karte in der Bildschirmmitte. Kein Bühnenbild,
keine Werbeflächen — wer hier ist, will sich anmelden. */
/* Bühnenbild und Fuß sind hier weg — dieselbe Paarung wie beim Textbuch-Editor
(`body.tb-edit`, weiter unten).
DIESE ZEILE HAT GEFEHLT, und zwar unsichtbar (13.09.2026): die beiden
Selektoren standen ohne eigenen Block direkt über dem Kommentar zur
Kopfzeile und gehörten damit zu DEREN Regel. Ein Kommentar zwischen zwei
Selektorzeilen trennt sie nicht — CSS liest darüber hinweg. Hero und Fuß
bekamen also `background:weiß` statt `display:none`, und der Hero blieb auf
der Anmeldeseite stehen: mitsamt dem, was zuletzt darin stand. Wer sich
abmeldete, dem stand „Hallo, " über dem Anmeldeformular — der Gruß
an den gerade Abgemeldeten. `#pheroIn` wird beim Abmelden nicht geleert,
weil es bis heute niemand musste. */
body.is-login .phero,
body.is-login .site-footer{display:none}
/* Die Kopfzeile ist für den dunklen Hintergrund gebaut — auf der hellen
Anmeldeseite wäre sie creme auf creme, also unsichtbar. Hier bekommt sie
eine helle Fassung, damit der Weg zurück zur Website sichtbar bleibt. */
body.is-login .site-header{background:var(--weiss);border-bottom:1px solid var(--line);
backdrop-filter:none}
body.is-login .brand-name{color:var(--bx)}
body.is-login .brand-sub{color:var(--braun)}
body.is-login .brand-mark{box-shadow:0 1px 6px color-mix(in srgb, var(--braun) 20%, transparent)}
body.is-login .nav-link{color:var(--braun)}
body.is-login .nav-link:hover{color:var(--bx)}
body.is-login .nav-link::after{background:var(--gold)}
/* Der Login-Knopf oben rechts ist hier überflüssig — das Formular steht ja da. */
body.is-login #barActions{display:none}
/* Auf schmalen Bildschirmen versteckt die Kopfzeile ihre Links. Damit man auch
dort zurück auf die Website kommt, bleiben sie auf der Anmeldeseite sichtbar. */
@media screen and (max-width:860px){
/* Die Striche des Burgers stehen hier auf hellem Grund. */
body.is-login .nav-burger span{background:var(--bx)}
/* ABER: aufgeklappt ist das Menü auch auf der Anmeldeseite DUNKEL — es ist
dieselbe Tafel wie überall (`.site-nav` weiter oben, Verlauf bx-d →
var(--bx-t)). Die helle Fassung der Kopfzeile gilt nur für die Leiste, nicht
für das, was aus ihr herausklappt.
Ohne diese Zeilen gewann `body.is-login .nav-link` mit seinem `body`
davor gegen `.site-nav .nav-link` — beide zwei Klassen, das eine mit
einem Element mehr. Die Links standen deshalb genau hier BRAUN auf
Dunkelrot, während sie im übrigen Mitgliederbereich und auf der Hauptseite creme
sind: dieselbe Tafel, zwei Farben, je nachdem ob man angemeldet ist. */
body.is-login .site-nav .nav-link{color:var(--creme)}
body.is-login .site-nav .nav-link:hover{color:var(--gold-h)}
}
body.is-login main{background:var(--creme);min-height:100vh;display:flex;align-items:center;
justify-content:center;padding:96px var(--gutter) 48px}
body.is-login .wrap{width:100%}
.anmeldung{max-width:380px;margin:0 auto;text-align:center;color:var(--tinte)}
.anmeldung-logo{margin:0 auto 18px;border-radius:50%;background:var(--weiss);
padding:3px;box-shadow:0 2px 14px color-mix(in srgb, var(--braun) 18%, transparent)}
.anmeldung h1{font-size:29px;color:var(--bx);line-height:1.15}
.anmeldung-sub{font-size:13px;letter-spacing:.14em;text-transform:uppercase;
color:var(--braun);margin-top:8px}
.anmeldung-form{margin-top:30px;text-align:left}
.anmeldung-form .field{margin:0 0 14px}
.anmeldung-form input{width:100%;padding:13px 14px;font-size:16px}
.anmeldung-form .pw-wrap input{padding-right:46px}
.anmeldung-vergessen{display:inline-block;margin-top:14px;font-size:14px}
.anmeldung-fuss{margin-top:30px;padding-top:20px;border-top:1px solid var(--line);
font-size:14px;color:var(--braun)}
.anmeldung-fuss a{color:var(--bx);font-weight:600;text-decoration:underline;
text-underline-offset:3px;text-decoration-color:var(--gold-line);cursor:pointer}
.anmeldung-fuss a:hover{text-decoration-color:var(--gold)}
.anmeldung .sep{justify-content:center;margin-top:26px}
.anmeldung-zurueck{margin-top:14px}
.anmeldung-zurueck a{font-size:13.5px;color:var(--braun);cursor:pointer}
.anmeldung-zurueck a:hover{color:var(--bx)}
@media screen and (max-width:520px){
body.is-login main{padding:84px var(--gutter) 40px;align-items:flex-start}
}
/* ── TEXTBUCH: Übersicht ── */
.tb-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.tb-card{display:flex;flex-direction:column;gap:9px;align-items:flex-start;text-align:left;cursor:pointer;
background:var(--sand);border:1px solid var(--gold-line);border-radius:var(--radius);padding:20px;min-height:132px;
transition:transform .3s var(--ease-soft),box-shadow .3s var(--ease-soft),border-color .3s}
.tb-card:hover{transform:translateY(-3px);box-shadow:-10px 14px 30px color-mix(in srgb, var(--schatten-warm) 16%, transparent);border-color:var(--gold)}
.tb-card-t{font-family:var(--f-display);font-size:19px;color:var(--bx);line-height:1.15}
.tb-card-m{font-size:13px;color:var(--braun)}
.tb-card-f{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;width:100%;margin-top:auto}
.tb-card.neu{align-items:center;justify-content:center;background:none;border-style:dashed;color:var(--braun);font-weight:600;gap:6px}
.tb-card.neu:hover{color:var(--bx);border-color:var(--bx)}
.tb-card.neu .plus{font-family:var(--f-display);font-size:24px;line-height:1}
/* Die leise Fassung einer Kachelwand (`wandAbschnitt`, art 'leise'): ohne
Fläche, halb so hoch, enger gestellt — findbar, aber nicht gleichrangig.
Die Foto-Wand hatte bis zum 26.10.2026 eine Kopie dieser Kachel
(`fo-card`); jetzt ist es dieselbe. */
.tb-grid.klein{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.tb-grid.klein>*{min-height:0;padding:10px 14px;gap:2px;background:none;border-color:var(--line)}
.tb-grid.klein .tb-card-t{font-size:15.5px}
.pill.tb-entwurf{background:var(--ton-wartet-flaeche);color:var(--braun)}
.pill.tb-gegenlesen{background:var(--ton-unterwegs-flaeche);color:var(--ton-unterwegs-schrift)}
.pill.tb-gespielt{background:var(--ton-gut-flaeche);color:var(--gruen)}
.pill.tb-archiv{background:var(--ton-ruht-flaeche);color:var(--ton-ruht-schrift)}
/* ── TEXTBUCH: Editor ──────────────────────────────────────────
Alle Maße hängen an vier Zahlen. Vorher standen dieselben Werte als
64/68/132/250/1250 über den Block verteilt — änderte man eine, verrutschte
der Rest, und die Eingabezeile stand ohnehin nie unter der Textspalte
(mittig zentrierter Kasten mit `padding-left:250px`). Jetzt teilen sich
Seitenspalte, Buch und Eingabe dieselbe Rechnung. */
/* --tb-klang: der Blauton der Pille „Gegenlesen". Kein CD-Token, deshalb hier. */
/* `--tb-zeile` ist die Höhe der Eingabezeile und steht deshalb EINMAL da:
das Textfeld nimmt sie, die Auswahl und der Knopf wachsen über `stretch`
mit. Vorher gab das Textfeld die Höhe vor (zwei Zeilen plus Innenabstand =
74px) — und wo es keins gibt, war die Leiste eben 18px flacher. */
/* `--tb-kopf` und `--leiste` stehen oben bei `html`, weil der Ankersprung
sie braucht und ein Wert für zwei Zwecke ein Wert bleiben muss. Die Namen
hier ändern sich nicht — sie zeigen nur auf dieselbe Quelle. */
body.tb-edit{--tb-kopf:var(--kopf);--tb-side:320px;--tb-mass:1000px;--tb-eingabe:186px;
--tb-zeile:74px;--tb-klang:var(--ton-unterwegs-schrift)}
body.tb-edit .phero,body.tb-edit .site-footer,body.tb-edit .site-header{display:none}
/* Ohne diese Zeile endet `main` bei kurzem Inhalt mitten auf dem Schirm und
darunter steht der bordeauxrote Seitengrund — bei einem leeren Textbuch
also fast überall. */
body.tb-edit main{padding:var(--tb-kopf) 0 0;min-height:100vh}
body.tb-edit .wrap{max-width:none}
/* Die Leiste über jeder Arbeitsfläche (`kopfLeiste`, wk-bausteine.js). Bis
zum 26.10.2026 zweimal da, als `.tb-top` und `.fo-top`, mit denselben
Maßen. Im Textbuch sitzt sie unter der Kopfzeile, sonst ganz oben. */
.kopf-leiste{position:sticky;top:var(--tb-kopf,0);z-index:30;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
min-height:var(--leiste);padding:12px var(--gutter);background:var(--weiss);border-bottom:1px solid var(--line)}
.kopf-leiste-meta{flex:1;min-width:200px}
.kopf-leiste-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.kopf-leiste-sub{display:block;font-size:13px;color:var(--braun);padding-left:1px}
.tb-titel{font-family:var(--f-display);font-size:23px;line-height:1.15;color:var(--bx);outline:none;
border:1px dashed transparent;padding:2px 6px;margin-left:-6px}
.tb-titel:hover{border-color:var(--line)}
.tb-titel:focus{border-color:var(--gold);background:var(--creme)}
.tb-status{font-family:var(--f-body);font-size:13px;font-weight:600;color:var(--braun);background:var(--sand);
border:1px solid var(--line);padding:8px 10px;cursor:pointer}
.tb-status:focus{border-color:var(--gold);outline:none}
.tb-auto{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--braun);white-space:nowrap}
.tb-auto .dot{width:7px;height:7px;border-radius:50%;background:var(--gruen);animation:tbpuls 2s infinite}
@keyframes tbpuls{0%,100%{opacity:1}50%{opacity:.25}}
/* LESEN: keine Seitenspalte, keine Eingabeleiste — also auch kein Platz, den
beide sonst brauchen. Sonst stünde das Buch in einer Spalte mit 320px
Luft links und 186px unten, die niemand füllt. */
.tb-layout.lesen{display:block}
.tb-layout.lesen .tb-doc{padding-bottom:60px}
/* ══ FOTOS: die Kachelwand und die Werkstatt ══════════════════════════
Dieselbe Bauart wie im Textbuch, und zwar bewusst: „eine Wand aus Kacheln,
eine davon wählen, dann ganzseitig arbeiten" ist EIN Muster im Mitgliederbereich und
soll nicht zweimal verschieden aussehen. Die Maße stehen deshalb neben
denen des Textbuchs und nicht in einer eigenen Ecke. */
body.fo-edit{--fo-side:320px}
body.fo-edit .phero,body.fo-edit .site-footer,body.fo-edit .site-header{display:none}
body.fo-edit main{padding:0;min-height:100vh}
body.fo-edit .wrap{max-width:none;padding:0}
.fo-titel{font-family:var(--f-display);font-size:23px;line-height:1.15;color:var(--bx)}
/* Die Zahl der gewählten Bilder — groß, im Bordeaux des Hauses, damit man
sie aus dem Augenwinkel sieht, während man im Gitter klickt. Sie ist
zugleich der Knopf, der die Auswahl aufhebt. */
.fo-zahl{display:inline-flex;align-items:baseline;gap:7px;cursor:pointer;
background:var(--bx);color:var(--weiss);border:none;border-radius:var(--radius);padding:6px 14px}
.fo-zahl b{font-family:var(--f-display);font-size:28px;line-height:1}
.fo-zahl span{font-size:13px}
.fo-zahl:hover{opacity:.9}
/* Leer steht sie trotzdem da, nur gedämpft — sonst rutschte die Spalte beim
ersten Klick um ihre Höhe nach unten. */
.fo-zahl.leer{background:var(--sand);color:var(--braun);cursor:default}
.fo-zahl.leer:hover{opacity:1}
/* Kopf der Seitenspalte: Auswahlzahl und „alle wählen" (26.10.2026, vorher
oben in der Leiste, wo sie die Reiter verschoben). */
.fo-auswahl{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 14px}
.fo-layout{display:grid;grid-template-columns:var(--fo-side) 1fr;align-items:stretch;
min-height:calc(100vh - var(--leiste))}
/* Feste Höhe statt max-height — so reicht die weiße Spalte immer bis nach
unten, auch wenn nur drei Namen darin stehen. Dieselbe Begründung wie bei
`.tb-side`, und derselbe Aufbau. */
.fo-side{position:sticky;top:var(--leiste);height:calc(100vh - var(--leiste));overflow-y:auto;
background:var(--weiss);border-right:1px solid var(--line);padding:18px 14px 40px}
.fo-side h3{font-family:var(--f-body);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
color:var(--braun);margin:0 0 8px;padding-bottom:6px;border-bottom:1px solid var(--gold-line)}
.fo-doc{padding:16px var(--gutter) 60px;min-width:0}
.fo-ablage{margin-bottom:16px}
/* SCHMAL: aus der Spalte wird ein Block über dem Gitter. Sie bleibt oben
kleben, damit die Namen beim Blättern durchs Gitter nicht weglaufen. */
@media screen and (max-width:900px){
body.fo-edit{--fo-side:0px}
.fo-layout{display:block}
.fo-side{position:static;height:auto;border-right:none;border-bottom:1px solid var(--line);padding:14px var(--gutter)}
.fo-doc{padding-top:14px}
}
/* Die Prompt-Anleitung im Import-Fenster. */
.tb-prompt summary{cursor:pointer;font-size:13.5px;font-weight:600;color:var(--bx);padding:6px 0}
.tb-prompt textarea{width:100%;border:1px solid var(--line);background:var(--weiss);padding:10px;line-height:1.5}
/* Das Textbuch am Termin: eine Zeile im Kalender-Eintrag, kein eigener Kasten. */
.tb-termin{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:4px}
.kal-spielt{display:block;margin-top:4px;font-size:15px}
.kal-spielt b{color:var(--bx)}
.tb-layout{display:grid;grid-template-columns:var(--tb-side) 1fr;align-items:stretch;
min-height:calc(100vh - var(--tb-kopf) - var(--leiste))}
/* Feste Höhe statt max-height: so reicht die weiße Spalte immer bis nach
unten, auch wenn erst zwei Rollen darin stehen. */
.tb-side{position:sticky;top:calc(var(--tb-kopf) + var(--leiste));
height:calc(100vh - var(--tb-kopf) - var(--leiste));overflow-y:auto;
background:var(--weiss);border-right:1px solid var(--line);padding:18px 14px calc(var(--tb-eingabe) + 20px)}
.tb-side h3{font-family:var(--f-body);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
color:var(--braun);margin:22px 0 8px;padding-bottom:6px;border-bottom:1px solid var(--gold-line)}
.tb-side h3:first-child{margin-top:0}
.tb-leer{font-size:12.5px;font-style:italic;color:var(--sepia);padding:4px 6px}
/* `padding-right` hält die Ecke frei, in der das Löschkreuz sitzt — ohne das
schöbe ein langer Name es vor sich her. */
.tb-char,.tb-buehne{position:relative;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;
padding:6px 26px 6px 7px;font-size:13.5px}
.tb-char:hover,.tb-buehne:hover{background:var(--creme)}
.tb-char-n{font-weight:700;color:var(--bx);outline:none;border:1px dashed transparent;padding:0 3px}
.tb-char-n:hover{border-color:var(--line)}
.tb-char-n:focus{border-color:var(--gold);background:var(--creme)}
.tb-char-k{font-size:11.5px;color:var(--sepia);letter-spacing:.04em}
/* Besetzung: die realen Menschen hinter der Figur — in derselben Zeile wie
Figur und Rollenschlüssel, dafür ist die Spalte breiter geworden. */
.tb-bes-chip{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;
color:var(--gruen);background:color-mix(in srgb, var(--gruen) 10%, transparent);padding:2px 4px 2px 9px}
.tb-bes-chip button{background:none;border:none;cursor:pointer;color:var(--gruen);opacity:.55;
font-size:11px;line-height:1;padding:2px 4px}
.tb-bes-chip button:hover{opacity:1;color:var(--bx)}
.tb-bes-add{background:none;border:1px dashed var(--line);cursor:pointer;
font-family:var(--f-body);font-size:11.5px;font-weight:600;color:var(--braun);padding:2px 9px;flex-shrink:0}
.tb-bes-add:hover{border-color:var(--gruen);color:var(--gruen)}
/* Auswahlfenster: eine lange Namensliste, deshalb mit Suche und Gruppen. */
.bes-liste{max-height:46vh;overflow-y:auto;border:1px solid var(--line);border-radius:var(--radius);padding:4px 10px}
.bes-gruppe{padding:8px 0}
.bes-gruppe+.bes-gruppe{border-top:1px solid var(--line)}
.bes-gruppe .eyebrow{display:block;margin-bottom:4px}
.bes-z{display:flex;align-items:center;gap:8px;padding:4px 2px;font-size:14px}
.tb-add{background:none;border:none;color:var(--gruen);font-family:var(--f-body);font-weight:600;font-size:12px;
cursor:pointer;padding:6px 7px}
.tb-add:hover{color:var(--bx)}
.tb-marken a{display:block;padding:5px 7px;font-size:12.5px;color:var(--tinte);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-marken a:hover{background:var(--creme)}
.tb-marken a.mk-klang{color:var(--tb-klang)}
/* Das Deckblatt ist eine ganze Seite, kein Kasten: Titel oben links, die
Grafik dazwischen, Autor:in unten rechts. Kein Rahmen und kein Hintergrund —
die Grafik ist ein PNG mit durchsichtigem Grund und soll ins Blatt
hineinwirken, nicht auf einer Karte liegen. Weil das Bild jedes Mal ein
anderes ist, sieht auch jedes Deckblatt anders aus, ohne dass am Aufbau
etwas geändert werden müsste. */
/* Am Bildschirm ist das Deckblatt nur ein kleiner Entwurf: es zeigt den
Aufbau — Titel oben links, Grafik dazwischen, Autor:in unten rechts — und
nimmt dem Text darunter keinen Platz weg. Gedruckt füllt es die Seite. */
.tb-deckblatt{display:flex;flex-direction:column;gap:10px;max-width:300px;
margin-bottom:30px;padding-bottom:20px;border-bottom:1px solid var(--gold-line)}
.tb-deckblatt img{max-height:190px;width:100%;object-fit:contain;object-position:center}
.tb-dk-leer{display:flex;align-items:center;justify-content:center;min-height:110px;
font-size:12.5px;font-style:italic;color:var(--sepia);
border:1px dashed var(--line);padding:16px}
.tb-dk-titel{align-self:flex-start;font-family:var(--f-script);font-weight:400;
font-size:26px;line-height:1.15;color:var(--bx)}
.tb-dk-autor{align-self:flex-end;text-align:right;font-size:13px;font-style:italic;color:var(--braun)}
.tb-dk-vorschau{width:100%;border:1px solid var(--line);margin-bottom:6px}
.tb-doc{padding:34px var(--gutter) calc(var(--tb-eingabe) + 60px);max-width:var(--tb-mass);margin:0 auto;width:100%;color:var(--tinte)}
/* ── DIE LÜCKE ZWISCHEN DEN ABSCHNITTEN ───────────────────────
Hier stand bis zum 15.09.2026 Text („Hier einfügen", und in der gewählten
Lücke ein 46px hoher Kasten mit „Hier wird eingefügt"). Zwischen zwei
Repliken ist das eine Zeile, die niemand gesprochen hat — beim Lesen stört
sie, und gelesen wird ein Textbuch häufiger als bearbeitet.
Jetzt ist die Lücke ein schmaler Streifen ohne Inhalt. Wo eingefügt wird,
sagt eine dünne Linie; WAS dort passiert, sagt die Traube am linken Rand
(s. u.). Die Höhe springt nicht mehr: der Text stand sonst bei jedem Klick
um 26px woanders. */
.tb-gap{position:relative;height:26px;margin:2px 0;cursor:pointer}
.tb-gap::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;
transform:translateY(-50%);background:var(--gold);opacity:0;transition:opacity .18s,height .18s}
.tb-gap:hover::after{opacity:.45}
.tb-gap.active{height:34px;margin:8px 0}
.tb-gap.active::after{opacity:1;height:3px}
/* ── DIE TRAUBE ───────────────────────────────────────────────
Rund und nach innen spitz — eine Beere, die mit ihrer SPITZE an der Linie
andockt. Die Form ist ein Kreis mit EINER eckigen Ecke; 225° gedreht zeigt
die Ecke waagerecht nach rechts und trifft damit den Anfang der Linie (bei
135° stand sie senkrecht und zeigte an ihr vorbei). Das „+" steht als
eigenes Kind darin und dreht deshalb NICHT mit — eine gedrehte Ziffer sieht
aus wie ein Fehler.
Sie sitzt im linken Rand der Textspalte (`--gutter`, mindestens 20px) und
nicht im Satz: 46% ihrer Breite liegen außerhalb, nur die Spitze reicht in
die Spalte. Beim Zeigen wächst sie, in der gewählten Lücke steht sie ganz
und schiebt sich leicht gegen die Linie — so findet man die Stelle wieder,
ohne sie zu lesen. */
.tb-traube{position:absolute;left:0;top:50%;width:52px;height:52px;display:grid;place-items:center;
pointer-events:none;opacity:0;transform:translate(-46%,-50%) scale(.5);
transition:opacity .18s,transform .22s var(--ease-soft)}
.tb-traube::before{content:"";position:absolute;inset:0;border-radius:50% 50% 50% 0;
transform:rotate(225deg);background:var(--sand);border:1px solid var(--gold)}
.tb-traube span{position:relative;font-size:26px;line-height:1;font-weight:700;color:var(--bx)}
.tb-gap:hover .tb-traube{opacity:1;transform:translate(-46%,-50%) scale(.85)}
.tb-gap.active .tb-traube{opacity:1;transform:translate(-46%,-50%) scale(1);animation:tbbob 1.8s infinite}
.tb-gap.active .tb-traube::before{background:var(--bx);border-color:var(--gold)}
.tb-gap.active .tb-traube span{color:var(--creme)}
/* Gewippt wird die Traube, nicht ihr Platz: die Verschiebung steckt im
`translate` der Regeln oben und muss in jedem Schritt mitlaufen. Bewegt
wird sie seitwärts gegen die Linie — die Spitze soll andocken, und eine
Bewegung nach oben führte von ihr weg. */
@keyframes tbbob{0%,100%{transform:translate(-46%,-50%) scale(1)}
50%{transform:translate(-42%,-50%) scale(1.03)}}
.tb-block{position:relative}
.tb-block:hover,.tb-technik:hover,.tb-klang:hover{background:var(--weiss)}
.tb-del{position:absolute;right:2px;top:4px;opacity:0;transition:opacity .12s;background:none;border:none;
cursor:pointer;color:var(--sepia);font-size:16px;line-height:1;padding:3px 6px}
.tb-block:hover .tb-del,.tb-technik:hover .tb-del,.tb-klang:hover .tb-del,.tb-char:hover .tb-del,.tb-buehne:hover .tb-del{opacity:1}
.tb-del:hover{color:var(--bx)}
/* In der Seitenspalte saß das Kreuz bisher IM Textfluss und wanderte mit dem
Namen in die zweite Zeile — samt einer Lücke davor, wo `margin-left:auto`
den Rest der ersten Zeile aufspannte. Jetzt steht es fest in der Ecke oben
rechts, genau wie an einem Abschnitt im Skript. */
.tb-char .tb-del,.tb-buehne .tb-del{right:1px;top:3px;font-size:15px}
/* Zwei Spalten wie bisher — nur steht der Sprecher jetzt LINKS in seiner
Spalte statt rechtsbündig an der Textkante. Die Textspalte bleibt
unverändert; sie ist der Teil, den man liest. */
.tb-block.dialog{display:grid;grid-template-columns:180px 1fr;gap:2px 22px;padding:7px 30px 7px 0;font-size:19px}
/* Der Sprechername ist ein