:root{
  --ink:#16221E; --ink-2:#56665F; --paper:#EDF1EF; --panel:#FFFFFF; --panel-2:#F6F8F7; --line:#D2DBD7;
  --table:#B4C0BB; --accent:#0B6B57; --accent-ink:#FFFFFF; --accent-soft:#DCEEE7;
  --ok:#237A47; --warn:#A6570F; --err:#B42318; --focus:#1F7FD0; --on-err:#FFFFFF;
  --shadow:rgba(16,32,27,.18); --shadow-strong:rgba(16,32,27,.32); --backdrop:rgba(10,20,17,.5);
  --mm-bg:#C9D3CF; --mm-field:#FFFFFF; --mm-line:#8F9D98; --mm-hl:#1F7FD0; --swatch-edge:rgba(0,0,0,.18);
  color-scheme:light;
  --ui:"Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --head:"Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#E3EAE7; --ink-2:#9DAEA7; --paper:#0E1412; --panel:#151D1A; --panel-2:#1B2521; --line:#2B3833;
    --table:#070B0A; --accent:#45C3A0; --accent-ink:#04120D; --accent-soft:#173A30;
    --ok:#5BCB8A; --warn:#F0A45A; --err:#FF7A6C; --focus:#5AB0F0; --on-err:#1A0503;
    --shadow:rgba(0,0,0,.5); --shadow-strong:rgba(0,0,0,.7); --backdrop:rgba(0,0,0,.62);
    --mm-bg:#33423D; --mm-field:#E3EAE7; --mm-line:#6F817A; --mm-hl:#5AB0F0; --swatch-edge:rgba(255,255,255,.22);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ink:#E3EAE7; --ink-2:#9DAEA7; --paper:#0E1412; --panel:#151D1A; --panel-2:#1B2521; --line:#2B3833;
  --table:#070B0A; --accent:#45C3A0; --accent-ink:#04120D; --accent-soft:#173A30;
  --ok:#5BCB8A; --warn:#F0A45A; --err:#FF7A6C; --focus:#5AB0F0; --on-err:#1A0503;
  --shadow:rgba(0,0,0,.5); --shadow-strong:rgba(0,0,0,.7); --backdrop:rgba(0,0,0,.62);
  --mm-bg:#33423D; --mm-field:#E3EAE7; --mm-line:#6F817A; --mm-hl:#5AB0F0; --swatch-edge:rgba(255,255,255,.22);
  color-scheme:dark;
}
html{height:100%; scroll-padding-top:env(safe-area-inset-top,0px)}
*,*::before,*::after{box-sizing:border-box}
body{margin:0; height:100%; background:var(--paper); color:var(--ink); font:15px/1.45 var(--ui); overflow:hidden}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px}

.app{display:flex; height:100%}
.panel{width:370px; flex:0 0 370px; background:var(--panel); border-right:1px solid var(--line); display:flex; flex-direction:column; min-height:0}
.brand{padding:16px 18px 10px}
.brand h1{font:700 24px/1.1 var(--head); margin:0; letter-spacing:.2px}
.brand p{margin:4px 0 0; color:var(--ink-2); font-size:13.5px}
.tabs{display:flex; gap:2px; padding:0 10px; border-bottom:1px solid var(--line)}
.tabs{overflow-x:auto; scrollbar-width:none}
.tab{flex:1 1 0; min-width:0; hyphens:manual; overflow-wrap:normal; background:none; border:0; border-bottom:3px solid transparent; padding:8px 2px 7px; font-weight:600; font-size:12.5px; line-height:1.15; color:var(--ink-2); cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:3px; text-align:center}
.tab i{font-style:normal; font-size:11px; width:18px; height:18px; border-radius:50%; display:inline-grid; place-items:center; background:var(--line); color:var(--ink)}
.tab[aria-selected="true"] i{background:var(--accent); color:var(--accent-ink)}
.tab[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--accent)}
.stepnav{display:flex; align-items:center; gap:8px; padding:8px 12px; border-top:1px solid var(--line); background:var(--panel)}
.stepnav .btn{padding:7px 12px}
.stepnav span{display:none}
.stepnav #stepPrev{margin-right:auto}
.stepnav{display:none !important}
.histbtns{display:flex; gap:6px; margin-right:auto}
.histbtns .zbtn{font-size:18px; min-width:38px}
.histbtns .zbtn:disabled{opacity:.35; cursor:default}
#collapseTxt{display:none}
#shapeGrid{max-height:none; overflow:visible}
.checks li.clickable{cursor:pointer; border-radius:8px}
.checks li.clickable:hover{background:var(--panel-2)}
.checks li.clickable small::after{content:" Antippen zum Anzeigen."; color:var(--accent)}
body.menu-closed .stepnav{display:none}
.tabbody{flex:1; overflow:auto; padding:16px 18px 28px; min-height:0}
.tabbody section[hidden],[hidden]{display:none !important}
h2{font:600 19px/1.2 var(--head); margin:18px 0 8px}
h2:first-child{margin-top:0}
.hint{color:var(--ink-2); font-size:13.5px; margin:4px 0 10px}

.stagewrap{flex:1; position:relative; min-width:0; min-height:0}
.stage{position:absolute; inset:0; background:var(--table); overflow:auto}
.wheelhint{position:absolute; left:50%; top:52px; transform:translateX(-50%); z-index:6; background:var(--ink); color:var(--paper); font-size:13px; padding:6px 12px; border-radius:999px; box-shadow:0 4px 14px var(--shadow); pointer-events:none; white-space:nowrap}
.fab{position:absolute; z-index:6; display:flex; gap:6px}
.fab-left{left:10px; bottom:10px}
.fab-right{right:10px; bottom:10px; flex-direction:column}
.fab .zbtn{min-width:40px; height:40px; box-shadow:0 2px 8px var(--shadow); font-size:17px}
.fab-left .zbtn{padding:0 12px; font-size:14px; white-space:nowrap}
body.viewmode #viewBtn{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.stagebar{position:sticky; top:0; left:0; z-index:5; display:flex; align-items:center; gap:8px; padding:8px 12px; background:color-mix(in srgb, var(--table) 88%, transparent); backdrop-filter:blur(4px)}
body.viewmode #viewBtn{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.stagebar .dim{font:600 15px var(--head); color:var(--ink); margin-right:auto}
.zbtn{flex:0 0 auto; min-width:36px; height:34px; border-radius:8px; border:1px solid var(--line); background:var(--panel); cursor:pointer; font-weight:600}
.sheetwrap{padding:14px 28px 40px; display:flex; justify-content:center}
.sheet{box-shadow:0 1px 2px var(--shadow-strong), 0 8px 24px var(--shadow); line-height:0}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; border-radius:9px; border:1px solid var(--line); background:var(--panel); padding:9px 14px; cursor:pointer; font-weight:500}
.btn:hover{border-color:var(--ink-2)}
.btn.primary{background:var(--accent); color:var(--accent-ink); border-color:var(--accent); font-weight:600}
.btn.primary:disabled{opacity:.45; cursor:not-allowed}
.btn.danger{color:var(--err)}
.btn.small{padding:6px 10px; font-size:13.5px}
.row{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.row.grow > *{flex:1}

.well{display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:var(--panel); cursor:pointer; text-align:left; margin-bottom:8px}
.well .sw{width:30px; height:30px; border-radius:7px; border:1px solid var(--swatch-edge); flex:0 0 30px}
.well .lab{flex:1; min-width:0}
.well .lab b{display:block; font-weight:600; font-size:14px}
.well .lab span{font-size:12.5px; color:var(--ink-2)}
.well:hover{border-color:var(--ink-2)}
.picker{border:1px solid var(--line); border-radius:10px; padding:10px; margin:-4px 0 10px; background:var(--paper)}
.swatches{display:grid; grid-template-columns:repeat(7,1fr); gap:6px}
.picker .recent-t:first-child{margin-top:0}
.swatches button{aspect-ratio:1; border-radius:7px; border:1px solid var(--swatch-edge); cursor:pointer; padding:0}
.swatches button[aria-pressed="true"]{outline:2px solid var(--accent); outline-offset:2px}
.grp{font:600 17px var(--head); margin:0 0 8px}
.subrow{display:flex; align-items:center; gap:10px; margin:-2px 0 10px; font-size:13px; color:var(--ink-2)}
.subrow .seg{flex:1; margin:0}
details.adv{border:1px solid var(--line); border-radius:10px; padding:8px 12px; margin:6px 0 4px}
details.adv summary{cursor:pointer; font-weight:600; font-size:14px; padding:2px 0}
details.adv[open] summary{margin-bottom:8px}
.intro{margin:0 0 14px; font-size:14px; color:var(--ink-2); background:var(--paper); border-radius:10px; padding:10px 12px}
.steps{padding-left:20px; margin:0 0 12px; font-size:14px}
.steps li{margin:4px 0}
.themes{display:grid; grid-template-columns:repeat(auto-fill,minmax(74px,1fr)); gap:8px}
.theme{min-width:0} .theme span{overflow-wrap:break-word; hyphens:auto; -webkit-hyphens:auto; line-height:1.2; font-size:11.5px}
.theme{border:1px solid var(--line); border-radius:10px; background:var(--panel); padding:6px 4px 4px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:4px; font-size:12px; font-weight:600}
.theme svg{width:100%; height:86px}
.theme .noth{height:86px; display:grid; place-items:center; color:var(--ink-2)}
.theme img{height:86px; width:auto; max-width:100%; border-radius:3px; box-shadow:0 0 0 1px var(--line)}
.theme:hover{border-color:var(--accent)}
.addgrid{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.addbtn{display:flex; align-items:center; gap:8px; padding:10px; border:1px solid var(--line); border-radius:10px; background:var(--panel); cursor:pointer; font-weight:600; text-align:left}
.addbtn b{width:28px; height:28px; border-radius:8px; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; flex:0 0 28px}
.addbtn:hover{border-color:var(--accent)}
.lock{display:inline-flex; align-items:center; gap:5px; border:1px solid var(--line); background:var(--panel); border-radius:999px; padding:4px 9px; font-size:12.5px; cursor:pointer; color:var(--ink-2); white-space:nowrap}
.lock[aria-pressed="true"]{background:var(--accent-soft); border-color:var(--accent); color:var(--ink)}
.lock svg{width:14px; height:14px}
.subrow{flex-wrap:wrap}
.subrow .seg{flex:1 1 170px}
.fprow{display:flex; flex-wrap:wrap; align-items:center; gap:5px; margin:4px 0}
.fpg{flex:0 0 100%; font-size:12px; color:var(--ink-2); font-weight:600; margin-top:4px}
.fprow .chip{padding:4px 10px; font-size:13px}
.fprow .chip.has::after{content:"●"; color:var(--accent); margin-left:5px; font-size:10px}
.fpwho>span{font-size:13px; font-weight:600}
.subbox{border-top:1px dashed var(--line); margin-top:12px; padding-top:10px}
.subbox .grphead svg{display:none}
.grpacts{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 8px}
.lock.join{border-color:var(--accent); color:var(--accent)}
.pairrow{display:flex; gap:8px; align-items:flex-start}
.pairrow > .wcol{flex:1; min-width:0}
.pairrow > .lock{margin-top:12px}
.savebox{border:1px solid var(--line); border-radius:12px; padding:12px; margin-bottom:6px}
.saverow{display:flex; gap:8px}
.saverow input{flex:1; min-width:0; padding:8px 10px; border:1px solid var(--line); border-radius:9px; background:var(--panel)}
.dslist{list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:6px}
.dslist li{display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:10px; padding:6px 8px; background:var(--panel)}
.dslist li.cur{border-color:var(--accent); background:var(--accent-soft)}
.dslist img{width:22px; height:72px; object-fit:cover; border-radius:3px; border:1px solid var(--line); flex:0 0 22px; background:var(--mm-bg)}
.dslist .meta{flex:1; min-width:0}
.dslist .meta b{display:block; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.dslist .meta span{font-size:12px; color:var(--ink-2)}
.dslist .acts{display:flex; flex-direction:column; gap:4px}
.dslist .acts .btn{padding:4px 10px; font-size:13px}
.recent-t{font-size:12px; color:var(--ink-2); margin:10px 0 4px}
details.more{margin-top:10px}
details.more summary{cursor:pointer; font-size:14px; font-weight:600}
/* Eingebetteter Farbwähler: Fläche für Sättigung und Helligkeit, darunter die Farbton-Leiste */
.svbox,.huebar{position:relative; margin-top:10px; border-radius:8px; border:1px solid var(--line); touch-action:none; cursor:crosshair; user-select:none}
.svbox{height:150px; background-image:linear-gradient(to top,#000,rgba(0,0,0,0)),linear-gradient(to right,#fff,rgba(255,255,255,0))}
.huebar{height:22px; background-image:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00)}
.svbox .knob,.huebar .knob{position:absolute; width:20px; height:20px; margin:-10px 0 0 -10px; border-radius:50%; border:3px solid #fff; box-shadow:0 0 0 1px rgba(0,0,0,.5),0 1px 4px rgba(0,0,0,.4); pointer-events:none}
.huebar .knob{top:50%}

.chips{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px}
.chip{border:1px solid var(--line); background:var(--panel); border-radius:999px; padding:6px 12px; cursor:pointer; font-size:14px}
.check{display:flex; gap:8px; align-items:center; margin:8px 0; font-size:14px; cursor:pointer}
.warnbox{align-items:flex-start; border:1px solid var(--err); border-radius:10px; padding:10px 12px; margin:0 0 14px; background:color-mix(in srgb, var(--err) 7%, var(--panel))}
.warnbox b{display:block; color:var(--err); font-weight:600}
.warnbox input{margin-top:2px; flex:0 0 18px}
.btn.primary.risky{background:var(--err); border-color:var(--err); color:var(--on-err)}
.check input{width:18px; height:18px; accent-color:var(--accent)}
.gallery{border:1px solid var(--line); border-radius:12px; padding:10px; margin-top:8px; background:var(--paper)}
.galgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(56px,1fr)); gap:6px; max-height:260px; overflow:auto}
.galgrid button{aspect-ratio:1; border:1px solid var(--line); border-radius:9px; background:var(--panel); color:var(--ink); cursor:pointer; padding:8px; display:grid; place-items:center}
.galgrid button:hover{border-color:var(--accent)}
.galgrid svg{width:100%; height:100%}
.nonechip{flex:1 1 100%; justify-content:center; font-weight:600; border-width:1.5px; padding:8px 12px; text-align:center}
.nonechip[aria-pressed="false"]{border-style:dashed}
.chip[aria-pressed="true"]{background:var(--accent-soft); border-color:var(--accent); font-weight:600}

.lockedcard{border:1px dashed var(--line); border-radius:10px; padding:10px 12px; margin-bottom:12px; font-size:13.5px; color:var(--ink-2); display:flex; gap:10px; align-items:flex-start}
.lockedcard svg{flex:0 0 18px; margin-top:2px}

.field{display:flex; flex-direction:column; gap:4px; margin-bottom:12px}
.field > span{font-size:13px; color:var(--ink-2); font-weight:500}
.field textarea,.field select,.field input[type=text],.field input[type=number]{width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:9px; background:var(--panel)}
.field textarea{min-height:70px; resize:vertical}
.rng{display:flex; gap:10px; align-items:center}
.rng input[type=range]{flex:1; accent-color:var(--accent)}
.rng input[type=number]{width:78px}
.seg{display:flex; border:1px solid var(--line); border-radius:9px; overflow:hidden}
.seg button{flex:1; border:0; background:var(--panel); padding:7px; cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--accent-soft); font-weight:600}
.selbox{border:1px solid var(--accent); border-radius:12px; padding:12px; margin:14px 0; background:color-mix(in srgb, var(--accent-soft) 45%, var(--panel))}
.logotip[hidden]{display:none}
.infobtn{display:inline-grid; place-items:center; width:20px; height:20px; border-radius:50%; border:1.5px solid var(--ink-2); background:none; color:var(--ink-2); font:700 12px/1 Georgia,serif; font-style:italic; cursor:help; vertical-align:middle; margin-left:6px; padding:0}
.infobtn:hover,.infobtn[aria-expanded="true"]{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.tip{position:fixed; z-index:200; max-width:min(300px,86vw); background:var(--ink); color:var(--paper); padding:9px 11px; border-radius:9px; font:400 13px/1.4 var(--ui); box-shadow:0 6px 20px var(--shadow-strong); pointer-events:none}
.tip[hidden]{display:none}
.logotip .x{position:absolute; top:4px; right:6px; border:0; background:none; font-size:18px; color:var(--ink-2); cursor:pointer}
.logotip{position:relative; border:1px solid var(--line); border-left:4px solid var(--focus); border-radius:10px; padding:10px 12px; margin:10px 0 6px; font-size:13.5px; display:flex; flex-direction:column; gap:6px; background:var(--panel)}
.logotip b{font-weight:600}
.logotip span{color:var(--ink-2)}
.logotip .btn{align-self:flex-start}
.resetrow{display:flex; justify-content:flex-end; margin:-4px 0 6px}
.btn.reset{color:var(--ink-2)}
.grphead .gr{margin-left:auto; flex:0 0 auto; border:1px solid var(--line); background:var(--panel); border-radius:8px; padding:3px 8px; font-size:12.5px; color:var(--ink-2); cursor:pointer}
/* Spielfelder-Boxen: einheitliche Abstände (8 px) */
#fgroups{display:flex; flex-direction:column; gap:8px; margin-top:4px}
.gbox{display:flex; flex-direction:column; gap:8px; border:1px solid var(--line); border-radius:12px; padding:10px; background:var(--panel)}
.gtop{display:flex; gap:10px; align-items:flex-start} .gheadcol{flex:1; min-width:0; display:flex; flex-direction:column; gap:8px}
.gprev svg{width:34px; height:auto; display:block}
.gbody{display:flex; flex-direction:column; gap:8px; min-width:0}
.ghead{display:flex; align-items:flex-start; gap:8px}
.ghead .tt{flex:1; min-width:0} .ghead .tt b{display:block; font:600 16px/1.2 var(--head)}
.ghead .tt span{display:block; font-size:12px; line-height:1.3; color:var(--ink-2)}
.ghead .gr{flex:0 0 auto; border:1px solid var(--line); background:var(--panel); border-radius:8px; padding:2px 8px; font-size:12.5px; color:var(--ink-2); cursor:pointer}
#fgroups .grpacts{margin:0; display:flex; gap:6px} #fgroups .unit{margin:0; display:flex; flex-direction:column; gap:4px}
#fgroups .well{margin:0} #fgroups .unit .unitseg{margin:0}
#fgroups .pairrow{display:flex; flex-direction:column; align-items:stretch; gap:6px; margin:0} #fgroups .pairrow .lock{align-self:flex-start; order:-1; margin-top:0} #fgroups .pairrow .wcol{min-width:0; display:flex; flex-direction:column; gap:8px}
#fgroups .subbox{margin:2px 0 0; padding-top:8px; border-top:1px dashed var(--line); display:flex; flex-direction:column; gap:8px}
#fgroups .subhead{margin:0} #fgroups .subrow{margin:0} #fgroups .check{margin:0} #fgroups .hint{margin:0}
.unit{margin-bottom:4px}
#fgroups .grpacts{margin:0 0 6px} #fgroups .subbox{margin-top:8px; padding-top:8px} #fgroups .check{margin:4px 0}
.unit .unitseg{margin:-2px 0 4px}
.unit .unitseg button{padding:4px; font-size:12.5px}
.unit-t{display:flex; align-items:baseline; gap:8px; padding:6px 2px} .unit-t span{font-size:12px; color:var(--ink-2)}
.subhead{display:flex; flex-direction:column; margin-bottom:4px} .subhead b{font-size:15px} .subhead span{font-size:12px; color:var(--ink-2)}
.warnhint{color:var(--warn); margin-top:8px}
.linkbtn{border:0; background:none; padding:0; color:var(--accent); font-weight:600; font-size:13px; cursor:pointer; text-decoration:underline; text-underline-offset:2px}
.pattiles{display:grid; grid-template-columns:repeat(auto-fill,minmax(58px,1fr)); gap:6px; margin-bottom:10px}
.pimgs{display:flex; flex-wrap:wrap; gap:6px; margin:0 0 8px}
.pimg{position:relative; width:52px; height:52px; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:var(--panel-2)}
.pimg img{width:100%; height:100%; object-fit:cover}
.pimg button{position:absolute; top:2px; right:2px; width:20px; height:20px; border-radius:50%; border:0; background:rgba(0,0,0,.6); color:#fff; font-size:14px; line-height:20px; padding:0; cursor:pointer}
.ptile{display:flex; flex-direction:column; align-items:center; gap:3px; padding:6px 2px 5px; border:1px solid var(--line); border-radius:9px; background:var(--panel); color:var(--ink); cursor:pointer; min-width:0}
.ptile svg{width:28px; height:28px; color:var(--ink-2)}
.ptile span{font-size:10.5px; line-height:1.15; text-align:center; overflow-wrap:normal; hyphens:auto}
.ptile[aria-pressed="true"]{border-color:var(--accent); background:var(--accent-soft)}
.ptile[aria-pressed="true"] svg{color:var(--accent)}
.ptile.none{grid-column:1/-1; flex-direction:row; justify-content:center; padding:8px}
.ptile.none span{font-size:13.5px; font-weight:600}
.txtstyle{display:flex; gap:6px}
.txtstyle button{min-width:40px; height:36px; border:1px solid var(--line); border-radius:8px; background:var(--panel); color:var(--ink); font-size:16px; cursor:pointer}
.txtstyle button[aria-pressed="true"]{background:var(--accent-soft); border-color:var(--accent)}
.adminbox{border:2px dashed var(--warn); border-radius:12px; padding:12px; margin:14px 0}
.adminbox h2{margin-top:6px} .adminbox h2:first-child{margin-top:0}
.idrow{display:flex; align-items:center; gap:8px; padding:6px 8px; border:1px solid var(--line); border-radius:8px; margin-bottom:6px; font-size:13px}
.idrow img{height:44px; width:auto; border-radius:3px}
.idrow .nm{flex:1; min-width:0} .idrow .nm small{display:block; color:var(--ink-2)}
.anchors{display:grid; grid-template-columns:1fr 1fr; gap:6px}
.numgrid{display:grid; grid-template-columns:1fr 1fr; gap:8px 10px}
.numgrid label{display:flex; flex-direction:column; gap:3px; font-size:12.5px; color:var(--ink-2)}
.numgrid input{padding:7px 8px; border:1px solid var(--line); border-radius:8px; background:var(--panel); width:100%}
.fontbtn{display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px; border:1px solid var(--line); border-radius:9px; background:var(--panel); cursor:pointer; text-align:left}
.fontbtn .fp{flex:0 0 auto; height:26px; display:flex; align-items:center; max-width:55%}
.fontbtn .fp svg{height:24px; width:auto; max-width:100%}
.fontbtn .fn{flex:1; font-size:12px; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fontbtn.loading{opacity:.6; cursor:progress}
.fontlist{border:1px solid var(--line); border-radius:10px; margin-top:6px; padding:6px 8px 8px; max-height:300px; overflow:auto; background:var(--paper)}
.fcat{font-size:11.5px; font-weight:600; color:var(--ink-2); text-transform:uppercase; letter-spacing:.4px; margin:8px 2px 4px}
.fopt{display:flex; align-items:center; width:100%; height:44px; padding:6px 10px; margin:2px 0; border:1px solid transparent; border-radius:8px; background:var(--panel); color:var(--ink); cursor:pointer}
.fopt svg{height:28px; width:auto; max-width:100%}
.fopt[aria-selected="true"]{border-color:var(--accent); background:var(--accent-soft)}
.galmode{margin-bottom:8px}
.galgrid .multi svg{filter:none}
.selbox h3{margin:0 0 10px; font:600 17px var(--head)}
.dpi{font-size:13.5px; margin:0 0 10px}
.dpi b{font-weight:600}

.layers{list-style:none; margin:0; padding:0; border:1px solid var(--line); border-radius:10px; overflow:hidden}
.layers li button{display:flex; width:100%; gap:8px; align-items:center; padding:8px 10px; border:0; border-bottom:1px solid var(--line); background:var(--panel); cursor:pointer; text-align:left}
.layers li:last-child button{border-bottom:0}
.layers li button[aria-current="true"]{background:var(--accent-soft)}
.layers .ic{width:22px; text-align:center; font-weight:700; color:var(--ink-2)}
.layers li{display:flex; align-items:stretch}
.layers li>button:first-child{flex:1; min-width:0}
.lkbtn{flex:0 0 40px; border:0; border-left:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--panel); color:var(--ink-2); cursor:pointer; display:grid; place-items:center}
.lkbtn.on{color:var(--accent); background:var(--accent-soft)}
.lkbtn svg{width:16px; height:16px}
.layers .nm{flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.layers .lk{font-size:12px; color:var(--ink-2)}
.empty{padding:14px; color:var(--ink-2); font-size:13.5px; border:1px dashed var(--line); border-radius:10px}

.checks{list-style:none; padding:0; margin:0 0 14px}
.checks li{display:flex; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); font-size:14px}
.checks .dot{flex:0 0 12px; height:12px; border-radius:50%; margin-top:5px}
.checks .ok .dot{background:var(--ok)} .checks .warn .dot{background:var(--warn)} .checks .err .dot{background:var(--err)}
.checks small{display:block; color:var(--ink-2); font-size:12.5px}
.status{font-size:13.5px; margin-top:10px; min-height:1.4em}
.status.err{color:var(--err)} .status.ok{color:var(--ok)}
.spec{font-size:13px; color:var(--ink-2); margin-top:14px}
dialog.askdlg{border:0; border-radius:14px; padding:20px; max-width:min(460px,92vw); background:var(--panel); color:var(--ink); box-shadow:0 12px 40px var(--shadow-strong)}
dialog.askdlg::backdrop{background:var(--backdrop)}
dialog.askdlg h2{margin:0 0 8px; color:var(--warn)}
dialog.askdlg[data-tone="frage"] h2{color:var(--ink)} dialog.askdlg[data-tone="ok"] h2{color:var(--accent)}
#helpBtn{transition:background .5s,color .5s,border-color .5s}
#helpBtn.aufmerksam{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
@media (prefers-reduced-motion:no-preference){#helpBtn.aufmerksam{animation:hilfeRing 1.6s ease-out 0s 3}}
@keyframes hilfeRing{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent)}100%{box-shadow:0 0 0 14px color-mix(in srgb,var(--accent) 0%,transparent)}}

dialog.askdlg p{margin:0 0 16px; font-size:14.5px}
.askbtns{display:flex; flex-direction:column; gap:8px}
.askbtns .btn{width:100%}
.dpi .low{color:var(--err); font-weight:600}
dialog#help{border:0; border-radius:14px; padding:clamp(12px,2.2vh,20px) clamp(14px,4vw,20px); max-width:min(520px,94vw); max-height:calc(100dvh - 16px); overflow:auto; background:var(--panel); color:var(--ink); box-shadow:0 12px 40px var(--shadow-strong)}
dialog#help::backdrop{background:var(--backdrop)}
dialog#help h2{margin:0 0 clamp(4px,1.2vh,12px); font-size:clamp(17px,2.6vh,19px)}
.helpnote{margin:4px 0 clamp(8px,1.4vh,12px)}
.legend{list-style:none; margin:0 0 4px; padding:0}
.legend li{display:flex; gap:12px; padding:clamp(4px,1.1vh,9px) 0; border-bottom:1px solid var(--line); font-size:clamp(12.5px,1.9vh,14px); line-height:1.35}
.legend li:last-child{border-bottom:0}
.legend b{font-weight:600}
@media (max-height:760px){
  .legend li{gap:10px; padding:3px 0; font-size:12.5px; line-height:1.3}
  .lg{flex-basis:26px; height:16px}
  .helpnote{font-size:12px; margin:2px 0 8px}
}
@media (max-height:600px){ .helpnote{display:none} .legend li{font-size:12px} }
.lg{flex:0 0 30px; height:20px; border-radius:4px; margin-top:2px}
.lg-trim{border:2px dashed #E6007E}
.lg-bleed{background:#8FA59E; box-shadow:inset 0 0 0 6px #C9D5D1}
.lg-safe{border:2px dotted #1F8FD6}
.lg-field{background:#fff; border:1px solid var(--mm-line); border-radius:50%/60%}
.lg-free{background:#173A33}
.toast{position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); background:var(--ink); color:var(--paper); padding:10px 16px; border-radius:10px; font-size:14px; z-index:50; max-width:90vw; opacity:0; pointer-events:none; transition:opacity .2s}
.toast.show{opacity:1}
.loading{position:fixed; inset:0; display:grid; place-items:center; background:var(--backdrop); z-index:100; padding:8px; padding-top:calc(8px + env(safe-area-inset-top,0px)); padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}
.loading .quietmsg{display:none; font:600 18px var(--head); color:var(--ink)}
.loading.quiet{background:var(--paper)}
.loading.closed{display:none}
.loading.quiet .startcard{display:none}
.loading.quiet .quietmsg{display:block}
.startcard{border-radius:14px; padding:clamp(12px,2.2vh,20px) clamp(14px,4vw,20px); width:min(520px,100%); max-height:100%; overflow:auto; background:var(--panel); color:var(--ink); box-shadow:0 12px 40px var(--shadow-strong)}
.startcard{position:relative}
.ipage[hidden]{display:none}
.introx{position:absolute; top:6px; right:8px; border:0; background:none; font-size:22px; color:var(--ink-2); cursor:pointer}
.introx[hidden]{display:none}
.idots{display:flex; justify-content:center; gap:8px; margin:clamp(6px,1.4vh,12px) 0}
.idots button{width:9px; height:9px; border-radius:50%; border:0; padding:0; background:var(--line); cursor:pointer}
.idots button[aria-current="true"]{background:var(--accent)}
.inav{display:flex; gap:8px}
.inav .btn{flex:1}
.steps{margin:0 0 6px; padding-left:22px}
.steps li{margin:clamp(3px,.9vh,7px) 0; font-size:clamp(13px,1.9vh,14.5px)}
.fieldlegend{display:flex; gap:14px; align-items:flex-start}
.flmap{flex:0 0 clamp(70px,13vh,104px)}
.flmap svg{width:100%; height:auto; display:block}
ol.fl{margin:0; padding-left:20px; font-size:clamp(12.5px,1.8vh,14px)}
ol.fl li{margin:0 0 clamp(4px,1vh,8px)}
ol.fl b{display:block}
.saveinfo .ico{flex:0 0 26px; font-size:18px; text-align:center}
.startcard h2{margin:0 0 clamp(4px,1.2vh,12px); font-size:clamp(16px,2.6vh,19px)}
.starthide{margin:0 0 clamp(6px,1.2vh,10px); font-size:13px}
.fileinp{position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; clip:rect(0 0 0 0); pointer-events:none}
label.addbtn,label.btn{cursor:pointer}
.dropzone-on .sheet{outline:3px dashed var(--accent); outline-offset:6px}

.collapse{display:none; flex-direction:column; align-items:center; gap:3px; width:100%; border:0; background:var(--panel); padding:6px 0 2px; font-size:12px; color:var(--ink-2); cursor:pointer}
.collapse .grip{width:48px; height:6px; border-radius:3px; background:var(--ink-2); opacity:.45}
.collapse{touch-action:none; user-select:none}
body.resizing .panel{transition:none}
@media (max-width: 820px){
  .app{flex-direction:column-reverse}
  .panel{width:auto; flex:0 0 var(--panelH,50%); border-right:0; border-top:1px solid var(--line)}
  .brand{display:none}
  .stagewrap{flex:1 1 50%}
  .sheetwrap{padding:6px 10px 10px}
  .tab{font-size:12px}
  body.viewmode #viewBtn{background:var(--accent); color:var(--accent-ink); border-color:var(--accent)}
.stagebar .dim{visibility:hidden; width:0; overflow:hidden}
  .collapse{display:flex}
  body.menu-closed .panel{flex:0 0 auto}
  body.menu-closed .tabbody{display:none}
  #helpBtn .t2,#quickSave .t2{display:none}
}
@media (max-width: 420px){ #helpBtn .t3,#viewBtn .t3{display:none} .stagebar{gap:5px; padding:6px 8px} .zbtn{min-width:32px} .tab{font-size:11px; padding:8px 2px 6px} }
@media (max-width: 345px){ .stagebar{gap:3px; padding:6px 5px} .stagebar .zbtn{min-width:30px; padding:0 6px !important; height:32px} #themeBtn{margin-left:0 !important} }
@media (prefers-reduced-motion: reduce){ .toast{transition:none} }
.sitelinks a{color:inherit;text-decoration:underline;text-underline-offset:2px}.sitelinks a:hover{color:var(--accent)}.homelink{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;color:var(--ink)}
.gradbox{margin-top:10px}.gradbox .gradon{display:flex;align-items:center;gap:8px;font-weight:600;cursor:pointer;padding:4px 0}.gradbox .gradon input{width:18px;height:18px;accent-color:var(--accent)}.gradbox .gradwell{margin-top:6px}.gradbox .gradseg{margin-top:8px;flex-wrap:wrap}
.codebox{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}.codebox label{display:block;font-weight:600;margin-bottom:6px}.codebox .row{gap:8px;flex-wrap:nowrap}.codebox input{flex:1;min-width:0;font:inherit;font-weight:600;letter-spacing:.08em;font-variant-ligatures:none;padding:9px 10px;border:1.5px solid var(--line);border-radius:8px;background:var(--panel,#fff);color:var(--ink)}.codebox input::placeholder{text-transform:none;letter-spacing:normal;font-weight:400}.sr-hint{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.codeinfo{position:absolute;left:50%;top:52px;transform:translateX(-50%);z-index:7;width:min(460px,calc(100% - 24px));background:var(--panel,#fff);color:var(--ink);border:1.5px solid var(--line);border-radius:14px;padding:12px 40px 12px 16px;box-shadow:0 8px 24px var(--shadow);transition:background .6s,color .6s,border-color .6s,box-shadow .6s}
.codeinfo .ci-t{display:block;font-size:15px;margin-bottom:4px}.codeinfo .ci-p{margin:0 0 10px;font-size:13.5px;line-height:1.45;color:var(--ink-2);transition:color .6s}
.codeinfo .ci-a{display:flex;gap:8px;flex-wrap:wrap}.codeinfo .ci-x{position:absolute;top:6px;right:8px;width:30px;height:30px;border:0;background:none;color:inherit;font-size:20px;line-height:1;cursor:pointer;border-radius:8px}
.codeinfo.neu{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 30%,transparent),0 12px 30px var(--shadow)}
.codeinfo.neu .ci-p{color:#fff}.codeinfo.neu .btn{background:#fff;color:var(--accent);border-color:#fff}
@media (prefers-reduced-motion:no-preference){.codeinfo.neu{animation:ciPuls 1.2s ease-in-out 0s 4}}
@keyframes ciPuls{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.035)}}
@media (max-width:820px){.codeinfo{top:48px;padding:10px 36px 10px 12px}.codeinfo .ci-p{font-size:13px}}
.codeakt p span{display:block;margin-top:4px;color:var(--ink-2);font-size:12.5px;line-height:1.4}
.codehint{margin:10px 0 6px}.codeakt[hidden],.codeinfo[hidden]{display:none!important}.codesave{margin-bottom:6px}.codesave>#dsCode{width:100%}.codeakt{margin-top:8px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--accent-soft,rgba(11,107,87,.08))}.codeakt p{margin:0 0 8px;font-size:14px}.codeakt b{letter-spacing:.08em}.codeakt .row{gap:8px;flex-wrap:wrap}.coderow{display:flex;gap:6px;align-items:stretch;margin-bottom:6px}.coderow .codechip{margin-bottom:0;flex:1}.codeshare{flex:0 0 auto;min-width:40px}
.codechip{display:flex;gap:10px;align-items:baseline;width:100%;text-align:left;background:none;border:1px solid var(--line);border-radius:8px;padding:8px 10px;margin-bottom:6px;cursor:pointer;color:var(--ink);font:inherit}.codechip b{letter-spacing:.08em}.codechip span{color:var(--ink-2);font-size:13px}.codechip:hover{border-color:var(--accent)}
.bildlage{margin-top:8px}
.bildlage .row{flex-wrap:wrap; gap:8px}

/* ---- Hilfsklassen statt Inline-Stilen (die Sicherheitsrichtlinie erlaubt keine style-Attribute). Wie ein Inline-Stil gehen sie vor. ---- */
.oben-6{margin-top:6px !important} .oben-10{margin-top:10px !important} .oben-14{margin:14px 0 0 !important}
.unten-6{margin-bottom:6px !important} .rand-0{margin:0 !important}
.rand-hinweis{margin:-4px 0 10px !important} .abstand-hinweis{margin:4px 0 8px !important}
.breit{width:100% !important} .dehnen{flex:1 !important} .fett-600{font-weight:600 !important}
.zeile-eng{align-items:center !important; gap:8px !important; flex-wrap:nowrap !important}
.menge-schmal{width:4.5em !important; flex:0 0 auto !important}
.knopf-eng{padding:0 10px !important; white-space:nowrap !important} .knopf-enger{padding:0 9px !important}
.passend{max-width:100% !important; max-height:100% !important}
.doppelt{text-decoration-style:double}
/* Vorschaukarte der Feldgruppen (Minikarte): Farben je Rolle */
.mm-grund{fill:var(--mm-bg)} .mm-hl{fill:var(--mm-hl)} .mm-feld{fill:var(--mm-field); stroke:var(--mm-line); stroke-width:10}
.mm-ring{fill:none; stroke:var(--mm-line); stroke-width:8} .mm-ring-hl{fill:none; stroke:var(--mm-hl); stroke-width:18}