/* Layout: schwarze Kopfleiste, darunter der Bogen als Raster aus Sektionen mit Banderolen wie auf dem Papierbogen */
:root{
  --paper:#e9ecef; --sheet:#fbfcfd; --ink:#15181d; --muted:#5b6370; --line:#c7cdd5;
  --field:#f1f3f6; --band:#15181d; --band-ink:#f3f0ea; --accent:#8a1c2a; --accent-soft:#f4e4e6;
  --ok:#2f6b3f; --warn:#9a5b00;
  --f-display:"IM Fell English SC", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --f-body:"Alegreya Sans", "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --paper:#101216; --sheet:#181b20; --ink:#e6e8ec; --muted:#9aa2ae; --line:#323843;
  --field:#21252c; --band:#2b3038; --band-ink:#f1ece2; --accent:#e27c89; --accent-soft:#3a2228; --ok:#7fc191; --warn:#e0a957; color-scheme:dark}}

*{box-sizing:border-box}
html{background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.4;min-height:100vh}
a{color:var(--accent)}
.muted{color:var(--muted)}
[hidden]{display:none!important}

/* Kopfleiste */
.top{background:var(--band);color:var(--band-ink);position:sticky;top:0;z-index:20;padding-top:env(safe-area-inset-top,0px)}
.top-in{max-width:1360px;margin:0 auto;display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;
  padding:10px max(16px, env(safe-area-inset-right,0px)) 10px max(16px, env(safe-area-inset-left,0px))}
.brand{font-family:var(--f-display);font-size:24px;color:var(--band-ink);text-decoration:none;line-height:1;display:flex;align-items:baseline;gap:10px}
.brand small{font-family:var(--f-body);font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
@media (max-width:640px){.brand small{display:none}}
.nav{display:flex;gap:4px;flex:1;flex-wrap:wrap}
.nav a{color:var(--band-ink);text-decoration:none;padding:5px 10px;border-radius:3px;font-weight:500;opacity:.8}
.nav a:hover{opacity:1;background:rgba(255,255,255,.08)}
.nav a[aria-current="page"]{opacity:1;box-shadow:inset 0 -2px 0 var(--accent)}
.nav .sp{flex:1}
.prefs{display:flex;gap:8px;flex-wrap:wrap}
.seg{display:inline-flex;border:1px solid rgba(255,255,255,.25);border-radius:3px;overflow:hidden}
.seg button{all:unset;cursor:pointer;font-size:12px;font-weight:700;letter-spacing:.04em;padding:4px 9px;color:var(--band-ink);opacity:.65}
.seg button[aria-pressed="true"]{background:var(--band-ink);color:var(--band);opacity:1}
.seg button:focus-visible{outline:2px solid var(--accent)}

.wrap{max-width:1360px;margin:0 auto;padding-block:22px 60px;
  padding-left:max(16px, env(safe-area-inset-left,0px));padding-right:max(16px, env(safe-area-inset-right,0px));outline:none}

/* Knöpfe & Felder */
.btn{font:inherit;font-weight:700;border:1.5px solid var(--ink);background:var(--ink);color:var(--sheet);border-radius:3px;padding:7px 12px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.btn:hover{background:var(--accent);border-color:var(--accent)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.ghost:hover{color:var(--sheet)}
.btn.small{padding:3px 8px;font-size:13px}
.btn.danger{background:transparent;color:var(--accent);border-color:var(--accent)}
.btn.danger:hover,.btn.danger.armed{background:var(--accent);color:var(--sheet)}
.btn:disabled{opacity:.45;cursor:not-allowed}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
input,textarea,select{font:inherit;color:var(--ink);background:var(--field);border:1px solid transparent;border-bottom:1.5px solid var(--line);border-radius:2px;padding:5px 7px;width:100%;min-width:0}
input:hover,textarea:hover,select:hover{border-bottom-color:var(--muted)}
input:focus,textarea:focus,select:focus{border-color:var(--accent);background:var(--sheet);outline:none}
input:disabled,textarea:disabled,select:disabled{opacity:1;color:var(--ink);background:transparent;border-bottom-style:dotted;cursor:default}
input.n{text-align:center;font-variant-numeric:tabular-nums}
textarea{resize:vertical;min-height:70px;line-height:1.45}
input[type=checkbox]{width:16px;height:16px;accent-color:var(--accent);margin:0;padding:0}
.uuid{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;font-size:12.5px;letter-spacing:.01em;overflow-wrap:anywhere}

/* Allgemeine Flächen */
.card{background:var(--sheet);border:1px solid var(--line);border-radius:4px;padding:18px}
.page-head{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:flex-end;justify-content:space-between;margin-bottom:18px}
.page-head h1{font-family:var(--f-display);font-weight:400;font-size:32px;margin:0;line-height:1.1;text-wrap:balance;overflow-wrap:anywhere}
.page-head .sub{color:var(--muted);font-size:14px;margin-top:4px}
h2.h{font-family:var(--f-display);font-weight:400;font-size:22px;margin:0 0 10px}
.stack{display:grid;gap:22px;min-width:0}
.stack.g10{gap:10px}
.grid{display:grid;gap:22px}
.grid.g8{gap:8px}
.inline{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end}
.inline>.fld{flex:1 1 200px}
.idline{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;font-size:13px;color:var(--muted)}
.badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:999px;border:1px solid var(--line);color:var(--muted);white-space:nowrap}
.badge.on{border-color:var(--ok);color:var(--ok)}
.badge.gm{border-color:var(--accent);color:var(--accent)}
.notice{border-left:3px solid var(--accent);background:var(--accent-soft);padding:8px 12px;border-radius:2px;font-size:14px}
.notice.info{border-left-color:var(--muted);background:var(--field)}
.err{color:var(--accent);font-size:14px;min-height:1.2em;margin:0}

/* Login */
.auth{max-width:420px;margin:6vh auto 0;display:grid;gap:14px}
.auth h1{font-family:var(--f-display);font-weight:400;font-size:34px;margin:0}
.auth p{margin:0;color:var(--muted)}
.auth form{display:grid;gap:12px}
.linkbtn{all:unset;cursor:pointer;color:var(--accent);text-decoration:underline;font-size:14px}

/* Charakterliste */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.ccard{background:var(--sheet);border:1px solid var(--line);border-radius:4px;padding:14px 16px;display:grid;gap:6px;text-decoration:none;color:var(--ink);align-content:start}
.ccard:hover{border-color:var(--ink)}
.ccard b{font-family:var(--f-display);font-weight:400;font-size:21px;line-height:1.15;overflow-wrap:anywhere}
.ccard .l1{color:var(--muted);font-size:14px}
.ccard .l2{font-size:13px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.invite-row{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line)}
.invite-row:last-child{border-bottom:0}
.empty{background:var(--sheet);border:1px dashed var(--line);border-radius:4px;padding:36px 24px;text-align:center;display:grid;gap:12px;justify-items:center;color:var(--muted)}

/* Bogen-Seite */
.sheet-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.side{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));align-items:start}
.side>.notice{grid-column:1/-1}
.side .actions-card{display:flex;align-items:flex-start}
.side .card{padding:14px}
.side h3{font-family:var(--f-display);font-weight:400;font-size:19px;margin:0 0 8px}
.side .fld{margin-bottom:8px}
.save{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.save.ok{color:var(--ok)} .save.err{color:var(--accent)}
.check{display:flex;gap:8px;align-items:flex-start;font-size:14px;cursor:pointer}
.check input{margin-top:2px}

.sheet{background:var(--sheet);border:1px solid var(--line);border-radius:4px;padding:20px;min-width:0}
@media (max-width:560px){.sheet{padding:14px 10px}}
.cols{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:22px;align-items:start}
.cols.c2{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
.cols.c3{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
@media (max-width:1180px){.cols,.cols.c2,.cols.c3{grid-template-columns:minmax(0,1fr)}}
section{min-width:0}
.band{font-family:var(--f-display);font-weight:400;font-size:17px;letter-spacing:.06em;background:var(--band);color:var(--band-ink);
  padding:5px 26px 4px;margin:0 0 10px;display:inline-block;
  clip-path:polygon(0 50%,12px 0,calc(100% - 12px) 0,100% 50%,calc(100% - 12px) 100%,12px 100%)}
.band.wide{display:block;text-align:center}
.row{display:grid;gap:8px 10px;grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}
.row.r120{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
.row.r130{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
.row.r140{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.row .span2{grid-column:span 2}
@media (max-width:420px){.row .span2{grid-column:auto}}
.fld{display:flex;flex-direction:column-reverse;gap:2px;min-width:0}
.fld>span{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.fld>span em{font-style:normal;text-transform:none;letter-spacing:0}
.calc{display:flex;align-items:center;justify-content:center;font-weight:700;font-variant-numeric:tabular-nums;border:1.5px solid var(--ink);border-radius:2px;min-height:32px;padding:3px 6px;background:var(--sheet);white-space:nowrap}
.calc.big{font-size:19px;color:var(--accent);border-color:var(--accent)}
.calc.dim{color:var(--muted);border-color:var(--line);font-weight:400}
.tw{overflow-x:auto}
table{border-collapse:collapse;width:100%}
th{font-size:10.5px;font-weight:500;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);padding:2px 4px;text-align:center;vertical-align:bottom}
td{padding:3px;vertical-align:middle}
th.l,td.l{text-align:left}
tr.lbl th{vertical-align:top;padding-bottom:6px}
.tag{font-family:var(--f-display);background:var(--band);color:var(--band-ink);text-align:center;padding:4px 8px;border-radius:2px;font-size:17px;line-height:1.1;white-space:nowrap;display:inline-block;min-width:100%}
.tag small{display:block;font-family:var(--f-body);font-size:9px;letter-spacing:.1em;text-transform:uppercase;opacity:.8}
.op{color:var(--muted);text-align:center;width:14px;padding:0;white-space:nowrap}
.abil input.n,.abil .calc{width:62px}
.eqtab input.n{width:54px}
.eqtab .calc{width:56px}
.skills td{padding:2px 3px;border-bottom:1px solid var(--line)}
.skills tr:last-child td{border-bottom:0}
.skills .nm{white-space:nowrap}
.skills .nm .t{color:var(--accent);font-weight:700;margin-left:2px}
.skills .sub{min-width:100px;margin-top:2px;padding:2px 6px;font-size:13px}
.skills .ab{font-size:12px;color:var(--muted);white-space:nowrap;text-align:center}
.skills input.n{width:48px;padding:3px 2px}
.skills .calc{width:50px;min-height:28px}
.legend{font-size:12px;color:var(--muted);margin:6px 0 0}
.load-heavy{color:var(--warn);font-weight:700} .load-over{color:var(--accent);font-weight:700}
.weapon{border:1px solid var(--line);border-radius:2px;padding:8px;display:grid;gap:8px}
.weapon .r1{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:8px}
.weapon .r2{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
@media (max-width:520px){.weapon .r1,.weapon .r2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.weapon .r1 .fld:first-child{grid-column:1/-1}}
.weapons{display:grid;gap:8px}
.aci .w-name{min-width:150px} .aci .w-t{min-width:90px} .w-n{width:84px}
.gear td{padding:2px 3px}
.spells input.n{width:56px}
.spell-lv{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px}
.money{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}

/* Spiele */
.glist{display:grid;gap:8px}
.grow{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;justify-content:space-between;background:var(--sheet);border:1px solid var(--line);border-radius:4px;padding:10px 14px;text-decoration:none;color:var(--ink)}
.grow:hover{border-color:var(--ink)}
.grow b{font-family:var(--f-display);font-weight:400;font-size:20px}
.two{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:980px){.two{grid-template-columns:minmax(0,1fr)}}
.panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px;align-items:start;margin-top:22px}
@media (max-width:400px){.panels{grid-template-columns:minmax(0,1fr)}}
.party td,.party th{border-bottom:1px solid var(--line);padding:7px 6px;text-align:center;font-variant-numeric:tabular-nums;white-space:nowrap}
.party td.l,.party th.l{text-align:left}
.party td.l a{font-weight:700;color:var(--ink)}
.party .hp-low{color:var(--accent);font-weight:700}
.party tr:last-child td{border-bottom:0}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(18px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--sheet);padding:9px 16px;border-radius:3px;font-size:14px;z-index:50;max-width:calc(100% - 32px);box-shadow:0 6px 20px rgba(0,0,0,.25)}
.toast.err{background:var(--accent)}
@media (prefers-reduced-motion:no-preference){.btn,.ccard,.grow{transition:background .15s,color .15s,border-color .15s}}

/* Admin-Bereich */
.tabs{display:flex;gap:2px;border-bottom:1.5px solid var(--line);margin-bottom:18px;overflow-x:auto}
.tabs a{padding:8px 14px;color:var(--muted);text-decoration:none;font-weight:500;white-space:nowrap;border-bottom:2.5px solid transparent;margin-bottom:-1.5px}
.tabs a:hover{color:var(--ink)}
.tabs a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.stat{background:var(--sheet);border:1px solid var(--line);border-radius:4px;padding:14px 16px;display:grid;gap:2px;text-decoration:none;color:var(--ink);align-content:start}
.stat:hover{border-color:var(--ink)}
.stat b{font-family:var(--f-display);font-weight:400;font-size:34px;line-height:1;font-variant-numeric:tabular-nums}
.stat span{font-weight:700;font-size:14px}
.stat small{color:var(--muted);font-size:12.5px}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-bottom:12px}
.toolbar .search-fld{flex:1 1 260px;max-width:420px}
.admin-body{display:grid;gap:16px}
.admin-body>*{min-width:0}
.admin-body .create,.admin-body .toolbar,.admin-body .count{margin-bottom:0}
.create{margin-bottom:12px;padding:12px 16px}
.create summary{cursor:pointer;font-weight:700}
.create .inline>.fld{flex:1 1 180px}
.count{font-size:13px;margin:0 0 6px}
.filter{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin-bottom:10px}
.admin-table{padding:4px 10px}
.admin-table th,.admin-table td{border-bottom:1px solid var(--line);padding:8px 6px;text-align:center;white-space:nowrap;font-variant-numeric:tabular-nums}
.admin-table td.l,.admin-table th.l{text-align:left}
.admin-table td.l a{color:var(--ink)}
.admin-table td.act{text-align:right;width:1%}
.admin-table tr.off td{opacity:.6}
.admin-table tr.off td.act{opacity:1}
.admin-table tbody tr:last-child td{border-bottom:0}
.admin-table tr.panel-row>td{background:var(--field);padding:0;white-space:normal;text-align:left}
.mpanel{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px 22px;padding:14px 12px}
.mgroup{min-width:0}
.mgroup h4{margin:0 0 6px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mgroup .inline>input,.mgroup .inline>select{flex:1 1 140px;width:auto}
.hint{font-size:12.5px;margin:4px 0 0}
.log td{padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:top}
.log th{padding:4px 8px}
.log tr:last-child td{border-bottom:0}
.nowrap{white-space:nowrap}

/* WYSIWYG-Editor und formatierte Texte */
.rte{border:1px solid var(--line);border-radius:3px;background:var(--field);min-width:0}
.rte.ro{border:0;background:transparent}
.rte-bar{display:flex;flex-wrap:wrap;gap:2px 8px;padding:4px 6px;border-bottom:1px solid var(--line);background:var(--sheet);border-radius:3px 3px 0 0;position:sticky;top:calc(env(safe-area-inset-top,0px) + 52px);z-index:5}
.rte-grp{display:inline-flex;gap:1px}
.rte-bar button{all:unset;cursor:pointer;min-width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border-radius:3px;color:var(--ink);font-size:13px;font-weight:700;font-family:var(--f-body)}
.rte-bar button:hover{background:var(--field)}
.rte-bar button[aria-pressed="true"]{background:var(--ink);color:var(--sheet)}
.rte-bar button:focus-visible{outline:2px solid var(--accent)}
.rte-area{padding:10px 12px;outline:none;min-height:120px;overflow-wrap:anywhere}
.rte-area:focus{background:var(--sheet);box-shadow:inset 0 0 0 1.5px var(--accent)}
.rte-area.is-empty::before{content:attr(data-placeholder);color:var(--muted);pointer-events:none;position:absolute}
.rte-area{position:relative}
.rte-empty{color:var(--muted);font-style:italic}
.rich{line-height:1.55;max-width:75ch}
.rich>:first-child{margin-top:0}
.rich>:last-child{margin-bottom:0}
.rich p{margin:0 0 .7em}
.rich h2{font-family:var(--f-display);font-weight:400;font-size:22px;margin:1em 0 .35em;line-height:1.2}
.rich h3{font-family:var(--f-display);font-weight:400;font-size:18px;margin:.9em 0 .3em;line-height:1.2}
.rich ul,.rich ol{margin:0 0 .7em;padding-left:1.4em}
.rich li{margin:.15em 0}
.rich blockquote{margin:0 0 .7em;padding:.2em 0 .2em 1em;border-left:3px solid var(--accent);color:var(--muted);font-style:italic}
.rich hr{border:0;border-top:1px solid var(--line);margin:1em 0}
.rich a{color:var(--accent)}
.rich-slot{min-width:0}

/* Spielseite: Szenario, Notizen */
.sec-head{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;justify-content:space-between;margin-bottom:8px}
.sec-head .h{margin:0}
.scenario,.gmnotes{margin-bottom:20px}
.notes-wrap .gmnotes{margin-top:22px;border-left:3px solid var(--accent)}
.notes-list{display:grid;gap:6px}
.note-item{border:1px solid var(--line);border-radius:3px;background:var(--sheet)}
.note-item>summary{cursor:pointer;padding:8px 12px;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
.note-item[open]>summary{border-bottom:1px solid var(--line)}
.note-item .rte{border:0;border-radius:0}
.note-meta{font-size:12.5px}
.note-foot{padding:4px 12px 8px;text-align:right}

/* Änderungsverlauf */
.logbox{margin-top:20px}
.logbox>summary{cursor:pointer;font-family:var(--f-display);font-size:20px}
.loglist{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:0}
.le{padding:10px 0;border-top:1px solid var(--line);min-width:0}
.le-head{font-size:14px;margin-bottom:4px}
.le.ev>div{color:var(--ink);font-style:italic}
.le-ch{list-style:none;margin:0;padding:0;display:grid;gap:2px;font-size:14px}
.le-ch li{overflow-wrap:anywhere}
.le-ch .lk{color:var(--muted)}
.le-ch .old{text-decoration:line-through;text-decoration-color:var(--accent);color:var(--muted)}
.le-ch .arrow{color:var(--muted)}
.le-ch .new{font-weight:700}
.le-more summary{cursor:pointer;font-size:13px;color:var(--muted);margin-top:4px}

/* Drucken direkt aus der Seite (das PDF ist die bessere Vorlage) */
@media print{
  .top,.side,.logbox,.page-head .save,.page-head a,.toast,.rte-bar{display:none!important}
  body,html{background:#fff;color:#000}
  .wrap{padding:0;max-width:none}
  .sheet{border:0;padding:0}
  input,textarea,select{background:transparent!important;border:0!important;border-bottom:1px solid #999!important}
  section{break-inside:avoid}
  .cols,.cols.c2,.cols.c3{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important}
}