/* char-bogen-a4.css -- der Charakterbogen als A4-Blaetter (Nr. 987; char-bogen-a4.js, char-bogen-a4-ansicht.js).
   Blatt = .csa4-seite.fransen[data-material="pergament"] (Papier + Fransenrand aus material.css, Tinte --mat-text = schwarz, KEIN Blau). Eine Seite ist 794 x 1123 px (A4 bei 96 dpi)
   und wird als Ganzes mit transform verkleinert/vergroessert (MFBuchGanz wie beim Buch): Abstaende und Schrift stehen darum fest und in em relativ zur Seitenschrift, nie in Bildschirmmassen.
   Am Handy "Abschnitte": dieselben Kaesten einspaltig und gross. Keine eigenen Farben/Schatten: nur --mat-*, --bm, --border, --sp-* (hier auf der Seite fest, wie im Buch), Knoepfe aus dem Leisten-Baukasten. */

/* ---- Flaeche: ueber dem Raumbild, unter der Eckenzeile (Zurueck, ?, Menue liegen darueber) ---- */
.csa4-wurzel { position: fixed; inset: 0; z-index: var(--z-nav); overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.csa4-wurzel[data-ansicht="abschnitte"] { overflow-y: auto; touch-action: pan-y; user-select: text; -webkit-user-select: text; overscroll-behavior: contain; }
.cs-bogen[data-a4] { display: none; }
.csa4-buehne { position: absolute; left: 0; top: 0; display: flex; gap: 24px; transform-origin: 0 0; }
.csa4-wurzel[data-ansicht="abschnitte"] .csa4-buehne { position: static; display: block; box-sizing: border-box; padding: calc(var(--ganz-oben, 62px)) var(--rand-aussen) calc(var(--menue-platz) + var(--bedien-h, 0px) + var(--sp-3)); }

/* ---- Leiste oben: Seiten, Lesen/Bearbeiten, Ansicht, Zoom (Kacheln mit Wort wie Kartenbau/Buch) ---- */
.csa4-leiste { position: fixed; z-index: 2; top: var(--rand-aussen); left: max(var(--rand-aussen), var(--csa4-links, 0px)); right: var(--rand-aussen); margin-inline: auto; max-width: 46rem; box-sizing: border-box; padding: var(--sp-1); }   /* --csa4-links: Platz für den Admin-Knopf Melden oben links (Nr. 1023, JS misst ihn) */
body:has(#mfm-knopf) .csa4-wurzel { --csa4-links: calc(var(--rand-aussen) + var(--tap) + var(--sp-2)); }   /* Rückfall, bis das Skript gemessen hat */
.csa4-seg { display: inline-flex; flex: 0 0 auto; border: 1px solid var(--mat-rand); border-radius: var(--mat-radius-klein); overflow: hidden; }   /* Umschalter: Lesen | Bearbeiten, Ganze Seite | Abschnitte (Nr. 1023) */
.csa4-leiste.sv-leiste .csa4-seg .csa4-segknopf { border-width: 0; border-radius: 0; background: transparent; color: var(--mat-text); }
.csa4-leiste.sv-leiste .csa4-seg .csa4-segknopf + .csa4-segknopf { border-left: 1px solid var(--mat-rand); }
.csa4-leiste.sv-leiste .csa4-seg .csa4-segknopf[aria-checked="true"] { background: var(--mat-feld); border-bottom: 4px solid var(--mat-akzent); font-weight: 700; }
/* Blätter-Pfeile (Nr. 1023): runder Baustein .el-rund wie im Buch, unten links/rechts, auf Höhe des Aktion-Knopfs und über der Eckenzeile */
.csa4-pfeil { position: fixed; z-index: 3; bottom: calc(var(--sp-2) + var(--menue-platz, 0px) + env(safe-area-inset-bottom, 0px)); touch-action: auto; }
.csa4-pfeil-l { left: var(--rand-aussen); }
.csa4-pfeil-r { right: var(--rand-aussen); }
.csa4-pfeil[hidden] { display: none; }
.csa4-hinweis { margin: 0 0 var(--sp-1); font-size: var(--fs-xs); text-align: center; }
.csa4-hinweis[hidden] { display: none; }
/* Knöpfe: nur der Leistenbaukasten (bauteile/leistenbaukasten.css: .mfl-reihe wischbar, .mfl-kachel, .sv-bbtn Zettel/Tintenring, gewählt dunkel; Onyx: optik-onyx.css Eisen-Platte). Hier nur Maße (Nr. 982 Nachtrag, vorher eigene Flex-/Abstands-Regeln) */
.csa4-leiste .sv-bbtn { touch-action: auto; }       /* die Reihe wischt, auch wenn die Fläche darunter Zoomgesten fängt */
/* Kacheln 44 px (Nr. 1017): die Leiste bleibt eine flache Reihe unter 48 px Kachelhöhe */
.csa4-kacheln .mfl-kachel { min-height: var(--tap); padding-block: 2px; }
@media (max-width: 520px) { .csa4-leiste { padding: 2px var(--sp-1); } .csa4-kacheln .mfl-kachel { min-width: 3.4rem; } }

/* ---- Das Blatt ---- */
.csa4-seite { --sp-1: 6px; --sp-2: 12px; --sp-3: 24px; --fransen-n: var(--fransen-breit-n);
    flex: none; width: 794px; height: 1123px; box-sizing: border-box; position: relative; display: flex; flex-direction: column; overflow: hidden;
    padding: var(--sp-3) var(--sp-3) var(--sp-2); color: var(--mat-text); font-family: Georgia, 'Times New Roman', serif; font-size: var(--fs-fest-text); line-height: 1.3; text-align: left; hyphens: auto; }
.csa4-seite * { box-sizing: border-box; min-width: 0; }
.csa4-inhalt { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--sp-2); min-height: 0; }
.csa4-seitenkopf, .csa4-fuss { flex: none; display: flex; justify-content: space-between; gap: var(--sp-2); font-family: 'Cinzel', serif; font-weight: 700; font-size: .55em; letter-spacing: .1em; text-transform: uppercase; color: var(--mat-leise); }
.csa4-seitenkopf { padding-bottom: var(--sp-1); margin-bottom: var(--sp-2); border-bottom: 1px solid var(--bm); }
.csa4-fuss { padding-top: var(--sp-1); }
.csa4-sk-name { font-size: 1.7em; letter-spacing: .02em; text-transform: none; font-family: Georgia, serif; font-style: italic; font-weight: 400; color: var(--mat-text); }

/* ---- Kasten: gezeichnet mit Tintenlinie, innen eine zweite feine Linie, Papier scheint durch ---- */
.csa4-kasten { position: relative; border: 1.6px solid var(--bm); border-radius: var(--mat-radius-klein); background: var(--mat-feld); padding: var(--sp-1) var(--sp-2); }
.csa4-kasten::after { content: ''; position: absolute; inset: 3px; border: 1px solid var(--border); border-radius: 2px; pointer-events: none; }
.csa4-titel { hyphens: manual; margin: 0 0 var(--sp-1); padding-bottom: 3px; border-bottom: 1px solid var(--border); font: 700 .62em/1 'Cinzel', serif; letter-spacing: .12em; text-transform: uppercase; text-align: center; color: var(--mat-akzent); }
.csa4-et { hyphens: manual; font: 700 .55em/1.15 'Cinzel', serif; letter-spacing: .1em; text-transform: uppercase; color: var(--mat-leise); }
.csa4-wert { font-style: italic; color: var(--mat-text); }       /* Eingetragenes: Georgia kursiv, ebenfalls schwarze Tinte */
.csa4-gross { display: block; font-size: 1.9em; line-height: 1.1; }
.csa4-leer { font-size: .8em; color: var(--mat-leise); font-style: italic; }
.csa4-text { font-size: .8em; line-height: 1.35; }
.csa4-spalten { display: grid; grid-template-columns: 235px minmax(0, 1fr); gap: var(--sp-2); flex: 1 1 auto; align-items: stretch; min-height: 0; }
.csa4-spalte { display: flex; flex-direction: column; gap: var(--sp-2); }

/* Kopf */
.csa4-kopf { display: grid; grid-template-columns: minmax(74px, auto) minmax(0, 1fr); gap: var(--sp-3); align-items: center; }
.csa4-portraet { width: 74px; height: 74px; border-radius: 50%; border: 1.6px solid var(--bm); overflow: hidden; display: grid; place-items: center; background: var(--mat-feld); font-size: 2em; color: var(--mat-akzent); }
.csa4-bildspalte { display: grid; justify-items: center; gap: 2px; }
.csa4-bildknopf { min-height: 0; padding: 3px var(--sp-2); font-size: var(--fs-xs); line-height: 1.2; white-space: nowrap; }   /* auf der ganzen (verkleinerten) Seite so klein wie die Schrift der Seite; antippbare 44 px gibt es in der Ansicht „Abschnitte“ und beim Zoomen (Nr. 1210) */
.csa4-wurzel[data-ansicht="abschnitte"] .csa4-bildknopf { min-height: var(--tap); font-size: var(--fs-sm); white-space: normal; padding-inline: var(--sp-1); }   /* schmale Spalte: „Bild hochladen“ bricht in zwei Zeilen */
.csa4-wurzel[data-ansicht="abschnitte"] .csa4-bildspalte { width: 100%; }
.csa4-portraet { cursor: pointer; }   /* Nr. 1184: antippbar in Lesen und Bearbeiten */
.csa4-portraet.csa4-hervor { outline: 4px solid var(--mat-akzent); outline-offset: 3px; animation: csa4-hervor 2s ease-out forwards; }   /* nach dem Anlegen im Assistenten: „hier kommt das Bild hin“ */
@keyframes csa4-hervor { 0%, 60% { outline-color: var(--mat-akzent); } 100% { outline-color: transparent; } }
@media (prefers-reduced-motion: reduce) { .csa4-portraet.csa4-hervor { animation: none; } }
.csa4-portraet img { width: 100%; height: 100%; object-fit: cover; }
.csa4-kopf-rechts { display: grid; gap: var(--sp-1); }
.csa4-name { font-size: 1.9em; line-height: 1.05; font-style: italic; padding-bottom: 2px; border-bottom: 1.6px solid var(--bm); overflow-wrap: anywhere; }
.csa4-charid { font-size: .8em; margin-top: 2px; user-select: all; }   /* Nr. 1133: Char-ID zum Einladen, ein Tipp markiert sie ganz (Kopieren) */
.csa4-kopfzeile { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: var(--sp-1) var(--sp-2); }
.csa4-feld { display: flex; flex-direction: column-reverse; justify-content: flex-end; border-bottom: 1.2px solid var(--bm); }
.csa4-feld .csa4-wert { font-size: .85em; min-height: 1.4em; padding: 0 2px; display: flex; align-items: flex-end; overflow-wrap: anywhere; }

/* Attribute */
.csa4-attrreihe { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-2); padding: var(--sp-1) var(--sp-1) var(--sp-3); background: none; border: 0; }
.csa4-attrreihe::after { display: none; }
.csa4-attr { position: relative; text-align: center; border: 1.6px solid var(--bm); border-radius: var(--mat-radius-klein); background: var(--mat-feld); padding: var(--sp-1) 2px var(--sp-3); }
.csa4-attr .csa4-et { display: block; font-size: .5em; }
.csa4-oval { position: absolute; left: 50%; bottom: -10px; translate: -50% 0; min-width: 2.6em; padding: 1px var(--sp-1); border: 1.6px solid var(--bm); border-radius: 12px; background: var(--mat-flaeche); font-size: .85em; line-height: 1.25; }

/* kleine Kreise (Uebung, Inspiration, Passive Wahrnehmung) */
.csa4-klein { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-2); }
.csa4-kreis { flex: none; display: grid; place-items: center; min-width: 2.2em; height: 2.2em; border: 1.6px solid var(--bm); border-radius: 50%; background: var(--mat-feld); font-size: 1.05em; padding: 0 3px; }
.csa4-klein .csa4-et { flex: 1; }
.csa4-paar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.csa4-paar .csa4-klein { flex-direction: column; gap: var(--sp-1); text-align: center; padding: var(--sp-2) var(--sp-1); }
.csa4-paar .csa4-klein .csa4-et { flex: none; }

/* Listen: Punkt (geuebt) + Zahl + Name */
.csa4-liste { display: grid; }
.csa4-zeile { display: grid; grid-template-columns: .8em 2.2em minmax(0, 1fr); gap: var(--sp-1); align-items: center; padding: 2px 0; font-size: .74em; border-bottom: 1px dotted var(--border); }
.csa4-zeile:last-child { border-bottom: 0; }
.csa4-zahl { text-align: center; font-size: 1.1em; border-bottom: 1px solid var(--bm); padding-bottom: 1px; }
.csa4-zeile small { font: 700 .7em 'Cinzel', serif; letter-spacing: .06em; color: var(--mat-leise); }
.csa4-punkt, .csa4-kae { display: inline-block; flex: none; width: .8em; height: .8em; border: 1.4px solid var(--bm); vertical-align: -.1em; }
.csa4-punkt { border-radius: 50%; }
.csa4-punkt.an { background: radial-gradient(circle, var(--mat-text) 0 55%, transparent 60%); }
.csa4-kae { width: .95em; height: .95em; border-radius: 2px; background: var(--mat-feld); }
.csa4-kae.an { background: linear-gradient(45deg, transparent 44%, var(--mat-text) 44% 56%, transparent 56%), linear-gradient(-45deg, transparent 44%, var(--mat-text) 44% 56%, transparent 56%); }
.csa4-kaes { display: inline-flex; gap: 4px; flex-wrap: wrap; }

/* RK / Initiative / Bewegung, TP, Trefferwuerfel, Todesrettung */
.csa4-drei { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); padding: var(--sp-2) var(--sp-2) var(--sp-1); text-align: center; }
.csa4-schild { text-align: center; }
.csa4-schild .csa4-et { display: block; }
.csa4-tp { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-1) var(--sp-2); align-items: end; }
.csa4-tp > div { display: flex; flex-direction: column; }
.csa4-tp-max { text-align: center; } .csa4-tp-akt { text-align: center; }
.csa4-tp-max .csa4-wert { font-size: 1.3em; }
.csa4-tp-temp { grid-column: 1 / -1; flex-direction: row !important; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--border); padding-top: 2px; }
.csa4-zweier { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.csa4-zeile2 { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-1); padding: 2px 0; font-size: .85em; border-bottom: 1px dotted var(--border); }
.csa4-zeile2:last-child { border-bottom: 0; }

/* Tabelle Angriffe */
.csa4-tab { width: 100%; border-collapse: collapse; font-size: .78em; }
.csa4-tab th { font: 700 .72em 'Cinzel', serif; letter-spacing: .08em; text-transform: uppercase; color: var(--mat-leise); text-align: left; padding: 0 3px 3px; border-bottom: 1px solid var(--bm); }
.csa4-tab td { padding: 4px 3px; border-bottom: 1px dotted var(--border); vertical-align: top; overflow-wrap: anywhere; }
.csa4-tab tr:last-child td { border-bottom: 0; }
.csa4-tab td.z { text-align: center; }

/* Seite 2 */
.csa4-s2 { flex: none; align-items: start; }
.csa4-s2, .csa4-s3 { font-size: 1.18em; }      /* Seite 2 und 3 haben weniger Inhalt: grosser gesetzt */
.csa4-kasten[data-abschnitt="angriffe"] { flex: 1 1 auto; min-height: 9em; }
.csa4-person { display: flex; flex-direction: column-reverse; margin-bottom: var(--sp-2); }
.csa4-p-wert { border-bottom: 1.2px solid var(--bm); min-height: 1.5em; padding: 0 2px; font-size: .95em; overflow-wrap: anywhere; }
.csa4-faehig { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-2); padding: 3px 0; font-size: .82em; border-bottom: 1px dotted var(--border); }
.csa4-faehig small { font: 700 .7em 'Cinzel', serif; letter-spacing: .06em; color: var(--mat-leise); text-transform: uppercase; }
.csa4-ul { margin: 2px 0 var(--sp-2); padding-left: 1.2em; font-size: .85em; }
.csa4-muenzen { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-1); text-align: center; }
.csa4-muenze .csa4-gross { font-size: 1.3em; border-bottom: 1.2px solid var(--bm); }
.csa4-notizen { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.csa4-notiz { margin-bottom: var(--sp-2); font-size: .85em; }
.csa4-notiz p { margin: 2px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.csa4-liniert { height: 14em; background: repeating-linear-gradient(transparent 0 1.55em, var(--border) 1.55em calc(1.55em + 1px)); }

/* Seite 3 */
.csa4-vier { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-2); padding: var(--sp-2); text-align: center; flex: none; }
.csa4-s3 { flex: 1 1 auto; align-items: start; }
.csa4-platz { display: grid; grid-template-columns: 4.5em minmax(0, 1fr) auto; gap: var(--sp-1); align-items: center; padding: 3px 0; font-size: .85em; border-bottom: 1px dotted var(--border); }
.csa4-zl { display: grid; grid-template-columns: .8em minmax(0, 1fr) auto; gap: var(--sp-1); align-items: center; padding: 3px 0; font-size: .82em; border-bottom: 1px dotted var(--border); }
.csa4-zl small { font: 700 .72em 'Cinzel', serif; letter-spacing: .06em; text-transform: uppercase; color: var(--mat-leise); }
.csa4-gradkopf { margin: var(--sp-1) 0 2px; font: 700 .65em 'Cinzel', serif; letter-spacing: .1em; text-transform: uppercase; color: var(--mat-akzent); border-bottom: 1px solid var(--border); }

/* ---- Bearbeiten: antippbare Kaesten gestrichelt, beim Drueberfahren heller ---- */
.csa4-wurzel[data-modus="bearbeiten"] { --csa4-linie: calc(1.5px / var(--ganz-s, .5)); }      /* Linienstaerke gleicht den Zoom aus: am Bildschirm immer ca. 2 px */
.csa4-wurzel[data-ansicht="abschnitte"] { --ganz-s: 1; }
.csa4-wurzel[data-modus="bearbeiten"] [data-bearb] { cursor: pointer; outline: var(--csa4-linie) dashed var(--mat-akzent); outline-offset: 0; border-radius: var(--mat-radius-klein); }
.csa4-wurzel[data-modus="bearbeiten"] [data-bearb]:hover { background: var(--mat-hover); }
.csa4-wurzel[data-modus="bearbeiten"] [data-bearb]:focus-visible { outline: calc(1.5 * var(--csa4-linie)) solid var(--mat-fokus); }
.csa4-wurzel[data-modus="bearbeiten"] .csa4-portraet[data-bearb] { border-radius: 50%; }   /* Nr. 1136: Bild bleibt rund, gestrichelter Kreis = antippbar */
.csa4-wurzel[data-modus="bearbeiten"] .csa4-bildknopf[data-bearb] { outline: none; }   /* der Knopf ist selbst als Knopf erkennbar, kein gestrichelter Rahmen (Nr. 1210) */
.csa4-wurzel[data-modus="bearbeiten"] :is([data-todes], [data-feat], [data-slot]) { cursor: pointer; background-color: var(--mat-hover); }

/* ---- Handy "Abschnitte": die Kaesten einspaltig, gross, in sinnvoller Lesereihenfolge ---- */
.csa4-wurzel[data-ansicht="abschnitte"] .csa4-seite { width: 100%; height: auto; overflow: visible; font-size: calc(var(--fs-fest-text) * 1.3); --sp-2: 14px; --sp-3: 20px; padding: var(--sp-3) var(--sp-2); }
.csa4-wurzel[data-ansicht="abschnitte"] .csa4-inhalt { gap: var(--sp-2); }
.csa4-wurzel[data-ansicht="abschnitte"] :is(.csa4-spalten, .csa4-spalte, .csa4-zweier, .csa4-paar) { display: contents; }
.csa4-wurzel[data-ansicht="abschnitte"] .csa4-kasten[data-abschnitt="angriffe"] { min-height: 0; }
.csa4-wurzel[data-ansicht="abschnitte"] .csa4-seite :is(.csa4-s2, .csa4-s3) { font-size: 1em; }
.csa4-wurzel[data-ansicht="abschnitte"] .csa4-inhalt { display: flex; flex-direction: column; }
.csa4-wurzel[data-ansicht="abschnitte"] .csa4-kopf { grid-template-columns: minmax(56px, 6.5rem) minmax(0, 1fr); gap: var(--sp-2); }
.csa4-wurzel[data-ansicht="abschnitte"] .csa4-portraet { width: 56px; height: 56px; }
.csa4-wurzel[data-ansicht="abschnitte"] .csa4-kopfzeile { grid-template-columns: 1fr; }
.csa4-wurzel[data-ansicht="abschnitte"] .csa4-attrreihe { grid-template-columns: repeat(3, 1fr); gap: var(--sp-3) var(--sp-2); }
.csa4-wurzel[data-ansicht="abschnitte"] .csa4-vier { grid-template-columns: repeat(2, 1fr); }
.csa4-wurzel[data-ansicht="abschnitte"] .csa4-zeile { padding: 5px 0; }
.csa4-wurzel[data-ansicht="abschnitte"] .csa4-seitenkopf { display: none; }
.csa4-wurzel[data-ansicht="abschnitte"] [data-abschnitt="kopf"] { order: 1; } .csa4-wurzel[data-ansicht="abschnitte"] [data-abschnitt="attribute"] { order: 2; }
.csa4-wurzel[data-ansicht="abschnitte"] [data-abschnitt="rk"] { order: 3; } .csa4-wurzel[data-ansicht="abschnitte"] [data-abschnitt="tp"] { order: 4; }
.csa4-wurzel[data-ansicht="abschnitte"] [data-abschnitt="trefferwuerfel"] { order: 5; } .csa4-wurzel[data-ansicht="abschnitte"] [data-abschnitt="todesrettung"] { order: 6; }
.csa4-wurzel[data-ansicht="abschnitte"] [data-abschnitt="angriffe"] { order: 7; } .csa4-wurzel[data-ansicht="abschnitte"] [data-abschnitt="zustaende"] { order: 8; }
.csa4-wurzel[data-ansicht="abschnitte"] [data-abschnitt="inspiration"] { order: 9; } .csa4-wurzel[data-ansicht="abschnitte"] [data-abschnitt="uebung"] { order: 10; }
.csa4-wurzel[data-ansicht="abschnitte"] [data-abschnitt="rettungswuerfe"] { order: 11; } .csa4-wurzel[data-ansicht="abschnitte"] [data-abschnitt="fertigkeiten"] { order: 12; }
.csa4-wurzel[data-ansicht="abschnitte"] [data-abschnitt="passiv"] { order: 13; }
.csa4-wurzel[data-ansicht="abschnitte"] .csa4-notizen { overflow: visible; }
.csa4-wurzel[data-ansicht="abschnitte"][data-modus="bearbeiten"] [data-bearb] { min-height: var(--tap); }