/* BWS Uster Lebenslauf-Generator – css/styles.css: App-Oberfläche (Abschnitt 1) */

/* =========================================================
   1. App-Oberfläche
   ========================================================= */
:root{
  --bg:#EEF0F3; --panel:#FFFFFF; --desk:#DCE0E6; --line:#D9DDE4; --ink:#1B1F2A; --muted:#5F6675;
  --action:#2F3B5C; --action-ink:#FFFFFF; --ok:#2B7A4B; --bad:#B23A2E; --r:8px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font:14px/1.45 "Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--ink);background:var(--bg);display:flex;flex-direction:column}
button{font:inherit;color:inherit}
svg.i{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:8px;min-height:54px;padding:8px 16px;background:var(--panel);border-bottom:1px solid var(--line);flex-wrap:wrap;flex:none}
.saveinfo{font-size:12.5px;color:var(--muted);margin-right:6px;white-space:nowrap;max-width:200px;overflow:hidden;text-overflow:ellipsis}
@media (max-width:1700px){.topbar h1 span{display:none!important}}
[hidden]{display:none!important}
.saveinfo.warn{color:#9A5B00;font-weight:600}
.saveinfo:empty{display:none}
.draftbar{display:flex;align-items:center;gap:10px;padding:8px 16px;background:#FFF4DE;border-bottom:1px solid #F0D9A8;font-size:13px}
.draftbar[hidden]{display:none}
.draftbar{flex:none}
body.acct-loading .topbar,body.acct-loading #app{cursor:progress}   /* Konto lädt: Eingaben kurz gesperrt (inert) */
.fixbar{background:#EEF3FF;border-color:#C9D6F5}
.fixbar .chips{display:flex;gap:6px;flex-wrap:wrap;margin-left:0}
.fixbar .chip{border:1px solid #9FB4E8;background:#fff;border-radius:99px;padding:3px 10px;font-size:12.5px;cursor:pointer}
.fixbar .chip:hover{background:#DDE7FB}
.rte mark.fix,.page .ltext mark.fix{background:#FFE58F;color:inherit;padding:0 .1em;border-radius:2px}
/* Prüfliste pro Betrieb: Hinweis im Abschnittskopf, Streifen mit «Geprüft» im Abschnitt */
.fixpill{flex:none;height:20px;padding:0 8px;border-radius:99px;background:#FFE9A8;color:#6B4E00;font-size:11.5px;font-weight:600;line-height:20px;letter-spacing:.01em}
.fixpill[hidden],.fixstrip[hidden]{display:none}
.globpill{flex:none;height:20px;margin-left:6px;padding:0 8px;border-radius:99px;background:var(--action-soft);color:var(--action);font-size:11.5px;font-weight:600;line-height:20px;white-space:nowrap}   /* Grunddaten: gelten für alle Berufsvorlagen */
.globpill[hidden]{display:none}
.fixstrip{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:8px 8px 8px 12px;border:1px solid #F0D9A8;border-radius:8px;background:#FFF7E0;font-size:13px;color:#5A4300}
.fixstrip .fs-txt{flex:1;min-width:0}
.fixstrip .btn{height:30px;flex:none;font-weight:600}
.fixstrip .btn::before{content:"";width:9px;height:5px;margin:-3px 2px 0 0;border-left:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(-45deg)}
.fixstrip .btn:disabled{opacity:.55;cursor:not-allowed}
.draftbar span{margin-right:auto}
.topbar h1{font-size:16px;font-weight:600;margin:0 auto 0 0;white-space:nowrap;display:flex;align-items:center;gap:14px;min-width:0}
.topbar .logo{height:28px;width:auto;display:block}
.topbar h1 span{display:flex;align-items:center;gap:14px;overflow:hidden;text-overflow:ellipsis}
.topbar h1 span::before{content:"";width:1px;height:22px;background:var(--line);flex:none}
.btn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r);background:#fff;cursor:pointer;white-space:nowrap}
.btn:hover{background:#F6F7F9}
.btn:disabled{opacity:.5;cursor:default}
.btn.primary{background:var(--action);border-color:var(--action);color:var(--action-ink)}
.btn.primary:hover{background:#26304B}
.btn:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible,.sw:focus-visible,.ib:focus-visible,.add:focus-visible,.fbtn:focus-visible,.tab:focus-visible{outline:2px solid #7C8DB5;outline-offset:2px}

#app{display:grid;grid-template-columns:440px minmax(0,1fr);flex:1 1 auto;min-height:0}
#form{overflow:auto;background:var(--panel);border-right:1px solid var(--line)}

.sec{border-bottom:1px solid var(--line)}
.sec>summary{list-style:none;display:flex;align-items:center;gap:10px;padding:12px 16px;cursor:pointer;font-weight:600;user-select:none}
.sec>summary::-webkit-details-marker{display:none}
.sec>summary::before{content:"";width:7px;height:7px;margin-left:2px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(-45deg);transition:transform .15s;flex:none}
.sec[open]>summary::before{transform:rotate(45deg)}
.sec .opt{font-weight:400;color:var(--muted)}
.count-badge{margin-left:auto;flex:none;white-space:nowrap;font-size:12px;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums}
.sec-body{padding:2px 16px 14px}

.field{display:flex;flex-direction:column;gap:4px;margin-bottom:10px}
.field label{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted)}
.field .cnt{font-variant-numeric:tabular-nums}
.field .cnt.full{color:var(--bad)}
.field input[type=text],.field input[type=password],.field textarea,.field select{font:inherit;padding:7px 9px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--ink);width:100%}
.field input[type=color]{width:100%;height:36px;padding:2px 3px;border:1px solid var(--line);border-radius:6px;background:#fff;cursor:pointer}
.field textarea{resize:vertical;min-height:64px;line-height:1.4}
.hint{font-size:11.5px;color:var(--muted);line-height:1.4}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.check{display:flex;align-items:center;gap:8px;margin:6px 0 12px;cursor:pointer}
.check input{width:16px;height:16px;margin:0}

.item{background:#F6F7F9;border:1px solid var(--line);border-radius:var(--r);padding:10px 10px 0;margin-bottom:10px}
.item-head{display:flex;align-items:center;gap:2px;margin-bottom:8px;font-size:12px;color:var(--muted)}
.item-head .t{font-weight:600;margin-right:auto}
.ib{width:28px;height:28px;border:1px solid transparent;border-radius:6px;background:transparent;cursor:pointer;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;padding:0}
.ib:hover{background:#fff;border-color:var(--line);color:var(--ink)}
.ib:disabled{opacity:.3;cursor:default;background:transparent;border-color:transparent}
.ib.danger:hover{color:var(--bad)}
.line-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;align-items:center;margin-bottom:8px}
.line-item.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto}
.line-item input{font:inherit;padding:7px 9px;border:1px solid var(--line);border-radius:6px;width:100%;min-width:0}
.line-item input.subline{font-weight:600;background:#F3F4F7}
.ordrow{padding:7px 10px;border:1px solid var(--line);border-radius:6px;background:#fff}
.ordrow.off{color:var(--muted);background:#F6F7F9}
.ordrow b{font-weight:600;margin-right:4px}
.btns{display:inline-flex}
.inwrap{position:relative;display:block;min-width:0}
.inwrap input{padding-right:46px}
.cnt2{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:10.5px;color:var(--muted);pointer-events:none;font-variant-numeric:tabular-nums}
.cnt2.full{color:var(--bad)}
.add{width:100%;height:36px;border:1px dashed #B9C0CC;border-radius:var(--r);background:transparent;color:var(--muted);cursor:pointer;margin-bottom:8px}
.add:hover:not(:disabled){border-color:var(--action);color:var(--action)}
.add:disabled{cursor:default;opacity:.6}

.fonts{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.fbtn{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:6px 8px;border:1px solid var(--line);border-radius:6px;background:#fff;cursor:pointer;text-align:left;min-width:0}
.fbtn:hover{background:#F6F7F9}
.fbtn .aa{font-size:21px;line-height:1.15;display:flex;align-items:baseline;gap:6px;max-width:100%;overflow:hidden}
.fbtn .ab{font-size:12px;color:var(--ink);white-space:nowrap}
.fbtn .fn{font-size:10.5px;color:var(--muted);line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.fbtn.on{border-color:var(--action);box-shadow:inset 0 0 0 1px var(--action)}
.swatches{display:flex;gap:8px;flex-wrap:wrap;padding-top:2px}
.colorrow{display:flex;gap:6px}
.colorrow input[type=color]{width:48px;height:36px;flex:none;padding:2px 3px;border:1px solid var(--line);border-radius:6px;background:#fff;cursor:pointer}
.colorrow .hex{flex:1;min-width:0;font:inherit;font-family:ui-monospace,Menlo,Consolas,monospace;padding:7px 9px;border:1px solid var(--line);border-radius:6px;text-transform:uppercase}
.colorrow .hex.bad{border-color:var(--bad)}
.sw{width:30px;height:30px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);cursor:pointer;padding:0}
.sw:hover{box-shadow:0 0 0 2px var(--action)}
.photo-row{display:flex;gap:14px;align-items:flex-start;padding-top:6px}
.thumb{width:84px;height:84px;flex:none;background:#F0F1F4;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--muted);overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:contain;display:block;background:#E8EAEE}
.photo-actions{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.photo-actions .row{display:flex;gap:8px;flex-wrap:wrap}
.thumb.logo-thumb{width:120px;height:64px;background:repeating-conic-gradient(#E8EAEE 0 25%,#fff 0 50%) 0 0/16px 16px}
.thumb.logo-thumb img{object-fit:contain;background:transparent;padding:4px}
.sign-field{margin-top:4px}   /* Unterschrift im Abschnitt «Bewerbungsschreiben» */
.sign-prev{display:flex;align-items:center;height:76px;padding:8px 12px;border:1px solid var(--line);border-radius:6px;background:#fff}
.sign-prev img{display:block;max-width:100%;max-height:100%}
.sign-actions{display:flex;gap:8px;flex-wrap:wrap}
.field .sign-actions label.btn{justify-content:center;font-size:inherit;color:inherit}   /* «Bild wählen» ist ein <label>: nicht wie eine Feldbeschriftung */
.lchips{display:flex;gap:8px;flex-wrap:wrap}
.lchip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:7px;padding:4px 6px 4px 4px;font-size:11.5px}
.lchip i{width:22px;height:22px;border-radius:5px;border:1px solid rgba(0,0,0,.12);flex:none}
.lchip b{font-weight:500;font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--muted)}
.lchip button{border:1px solid var(--line);background:#fff;border-radius:5px;padding:2px 6px;font-size:11px;cursor:pointer}
.lchip button:hover{border-color:var(--action);color:var(--action)}

#preview{display:flex;flex-direction:column;min-width:0}
.status{display:flex;align-items:center;gap:18px;padding:8px 20px;border-bottom:1px solid var(--line);background:var(--panel);font-size:12.5px;color:var(--muted);flex-wrap:wrap;row-gap:6px;min-height:46px}
.tabs{display:inline-flex;border:1px solid var(--line);border-radius:7px;overflow:hidden}
.tab{padding:5px 12px;border:0;background:#fff;cursor:pointer;color:var(--muted)}
.tab.on{background:var(--action);color:#fff}
.pill{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--ok)}
.pill.bad{color:var(--bad)}
.pill::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex:none}
.meter{display:inline-flex;align-items:center;gap:7px;font-variant-numeric:tabular-nums}
.meter b{font-weight:500;color:var(--ink)}
.bar-ui{width:84px;height:6px;background:#E3E6EB;border-radius:3px;overflow:hidden}
.bar-ui i{display:block;height:100%;background:var(--ok);border-radius:3px}
.bar-ui.bad i{background:var(--bad)}
.status .msg{flex-basis:100%;color:var(--bad)}
.status .note{flex-basis:100%;color:var(--muted)}
.status .msg:empty,.status .note:empty{display:none}
#viewport{flex:1;overflow:auto;background:var(--desk);padding:24px;display:flex;justify-content:center;align-items:flex-start}
#scaler{position:relative;flex:none}
#scaler .page{position:absolute;top:0;left:0;transform-origin:top left;box-shadow:0 2px 24px rgba(20,30,50,.18)}
#scaler .page:not(.active){visibility:hidden}
#scaler .page.overflow{outline:3px solid var(--bad)}
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tcard{border:1px solid var(--line);border-radius:8px;padding:6px;cursor:pointer;background:#fff;min-width:0}
.tcard:hover{border-color:#9AA3B5}
.tcard.on{border-color:var(--action);box-shadow:inset 0 0 0 1px var(--action)}
.tframe{position:relative;width:100%;aspect-ratio:210/297;overflow:hidden;background:#fff;border:1px solid var(--line)}
.tframe .page{position:absolute;top:0;left:0;transform-origin:top left;pointer-events:none}
.tname{font-size:11px;color:var(--muted);margin-top:5px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

#toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:9px 14px;border-radius:8px;font-size:13px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:40}
#toast.show{opacity:1}

.rte-bar{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:4px}
.rte-bar button{min-width:30px;height:28px;padding:0 8px;border:1px solid var(--line);border-radius:6px;background:#fff;cursor:pointer;font-size:13px;white-space:nowrap}
.rte-bar button:hover{background:#F6F7F9}
.rte-end{display:flex;gap:4px;margin-left:auto}   /* «Anpassen» und «Erledigt» rechts, beim Umbruch zusammen */
.rte{min-height:180px;max-height:420px;overflow:auto;padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:#fff;font:14px/1.5 "Segoe UI",system-ui,sans-serif;white-space:normal}
.rte:empty::before{content:attr(data-ph);color:#9AA0AE}
.rte p{margin:0 0 8px}
.rte ul,.rte ol{margin:0 0 8px;padding-left:22px}
.modal{position:fixed;inset:0;background:rgba(20,25,40,.55);display:flex;align-items:center;justify-content:center;z-index:30;padding:16px;overflow-y:auto}   /* höher als das Fenster (Handy quer): der Dialog scrollt */
.modal[hidden]{display:none}
.modal-box{background:#fff;border-radius:12px;padding:18px 20px;max-width:100%;width:460px;box-shadow:0 12px 40px rgba(0,0,0,.3);margin:auto}   /* margin:auto statt Zentrieren: ragt nie oben hinaus */
.modal-box h2{font-size:16px;margin:0 0 4px}
.modal-box.wide{width:640px}
.modal-box.apps{max-height:90vh;overflow:auto}
.apps h3{font-size:13px;margin:16px 0 8px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.apps h3:first-child{margin-top:4px}
.apps .alist{display:flex;flex-direction:column;gap:6px}
.apps .arow{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:8px;padding:6px 8px 6px 12px}
.apps .arow.on{border-color:var(--action);box-shadow:inset 0 0 0 1px var(--action)}
.apps .arow .t{flex:1;min-width:0;cursor:pointer}
.apps .arow .t b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.apps .arow .t span{font-size:12px;color:var(--muted)}
.apps .new{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.apps .new .field{margin:0}
.apps .new .full{grid-column:1/-1}
.apps .row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.apps .row .field{flex:1;margin:0;min-width:180px}
#importText{width:100%;font:13px/1.45 ui-monospace,Menlo,Consolas,monospace;padding:8px 10px;border:1px solid var(--line);border-radius:6px;resize:vertical}
#importSummary{font-size:13px;line-height:1.5}
#importSummary ul{margin:6px 0 10px;padding-left:18px}
#importSummary .miss{color:var(--muted)}
.modal-box .hint{margin-bottom:10px}
#cropCanvas{display:block;max-width:100%;max-height:calc(var(--vvh,100vh) - 240px);min-height:120px;margin:0 auto;border-radius:6px;touch-action:none;cursor:grab}   /* Handy quer: Bild kleiner, «Übernehmen» bleibt im Bild */
#cropCanvas:active{cursor:grabbing}
#signPad{display:block;width:100%;height:auto;aspect-ratio:5/2;max-height:calc(var(--vvh,100vh) - 230px);border:1px solid var(--line);border-radius:10px;background:linear-gradient(#D3D8E0,#D3D8E0) no-repeat 50% 72%/86% 1.5px #fff;touch-action:none;cursor:crosshair;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}   /* Hilfslinie nur als Hintergrund: sie wird nie mit übernommen */
#dlgSign .d-msg:not(:empty){margin:10px 0 0}
#dsClear{margin-right:auto}
.crop-ctrl{display:flex;align-items:center;gap:12px;margin:12px 0 4px}
.crop-ctrl label{display:flex;align-items:center;gap:8px;flex:1;font-size:12px;color:var(--muted)}
.crop-ctrl input[type=range]{flex:1}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
.acct-tabs{display:flex;margin:0 0 12px}
.acct-tabs .tab{flex:1;height:36px;font-weight:600}
.acct-msg:empty{display:none}
.acct-msg{color:var(--bad)}
.acct-msg .linkbtn{border:0;background:none;padding:0;color:var(--action);font:inherit;font-weight:600;text-decoration:underline;cursor:pointer}
#tourOverlay{position:fixed;inset:0;z-index:45}
#tourOverlay[hidden]{display:none}
.tour-hole{position:fixed;border-radius:10px;box-shadow:0 0 0 9999px rgba(20,25,40,.58);outline:3px solid #F5A623;outline-offset:2px;pointer-events:none;transition:top .25s,left .25s,width .25s,height .25s}
.tour-hole.none{outline:none;width:0;height:0;top:50%;left:50%}
.tour-card{position:fixed;width:360px;max-width:calc(100vw - 24px);background:#fff;border-radius:12px;padding:14px 16px 12px;box-shadow:0 16px 48px rgba(0,0,0,.35);font-size:14px;line-height:1.5}
.tour-card.center{left:50%;top:50%;transform:translate(-50%,-50%);width:440px}
.tour-card:not(.center){transition:left .25s ease,top .25s ease}
.tour-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.tour-top h2{margin:0;font-size:15px}
.tour-x{border:0;background:transparent;color:var(--muted);cursor:pointer;font-size:12.5px;padding:4px 6px;border-radius:6px}
.tour-x:hover{background:#F6F7F9;color:var(--ink)}
.tour-body p{margin:0 0 8px}
.tour-body .k{display:inline-block;border:1px solid var(--line);border-radius:5px;padding:0 6px;font-size:12.5px;background:#F6F7F9;white-space:nowrap}
.tour-body .big{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.tour-body .big .btn{flex:1;justify-content:center;height:40px}
.tour-foot{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}
.tour-foot .check{margin:0;font-size:12px;color:var(--muted)}
.tour-dots{display:inline-flex;gap:5px;margin-right:auto}
.tour-dots i{width:7px;height:7px;border-radius:50%;background:#D9DDE4;display:inline-block}
.tour-dots i.on{background:var(--action)}
.tour-nav{display:inline-flex;gap:8px;align-items:center}
#btnAcct{max-width:170px;overflow:hidden;text-overflow:ellipsis;display:inline-block;line-height:32px}
#btnTour{width:34px;padding:0;justify-content:center;font-weight:700}

/* =========================================================
   1b. Konto-Seite, Menüs, schlanke Dialoge, Kopfleiste im Konto-Modus
   Nur Klassen mit eigenem Präfix (d-, dlg, pop, doc …), damit nichts mit dem Editor kollidiert.
   ========================================================= */
:root{
  --soft:#F7F8FA; --line-2:#E7EAEF; --faint:#8C93A1; --action-soft:#E8ECF4; --action-soft-hover:#DCE2EE; --bad-soft:#FBEDEB;
  --pop:0 16px 40px rgba(20,30,50,.18), 0 2px 8px rgba(20,30,50,.08); --ring:0 0 0 3px rgba(47,59,92,.22);
}
svg.ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
svg.ic.sm{width:15px;height:15px}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.icon-btn{display:inline-grid;place-items:center;flex:none;width:36px;height:36px;padding:0;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--muted);cursor:pointer}
.icon-btn:hover{background:#F0F2F5;color:var(--ink)}
.icon-btn[aria-expanded="true"]{background:#E9ECF1;color:var(--ink)}
.icon-btn:focus-visible,.acct-btn:focus-visible,.pop button:focus-visible,.pop a:focus-visible,.d-continue:focus-visible,.d-rcard:focus-visible,.d-state:focus-visible,.d-new:focus-visible,.d-ftoggle:focus-visible,.d-drop:focus-within{outline:2px solid #7C8DB5;outline-offset:2px}
.btn.soft{background:var(--action-soft);border-color:transparent;color:var(--action);font-weight:600}
.btn.soft:hover{background:var(--action-soft-hover)}
.btn.block{width:100%;justify-content:center}

/* Menüs */
.pop{position:absolute;top:calc(100% + 6px);right:0;z-index:35;min-width:220px;padding:6px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--pop);text-align:left;font-size:14.5px;line-height:1.35}
.pop button,.pop a{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:6px 10px;border:0;border-radius:8px;background:transparent;color:var(--ink);font-size:14.5px;text-align:left;white-space:nowrap;text-decoration:none;cursor:pointer}
.pop button:hover,.pop a:hover{background:#F0F2F5}
.pop svg.ic{color:var(--muted)}
.pop .danger,.pop .danger svg.ic{color:var(--bad)}
.pop .danger:hover{background:var(--bad-soft)}
.pop hr{border:0;border-top:1px solid var(--line-2);margin:6px 2px}
.pop .two{display:flex;flex-direction:column}
.pop .two small{font-size:12.5px;color:var(--muted)}
.pop .ph-only{display:none}

/* Kopfleiste: Konto, Speichern-Menü, Drei-Punkte-Menü, offenes Dokument */
.tb-more,.tb-acct,.split{position:relative;display:inline-flex;align-items:center}
.tb-more,.tb-back,#btnDialog .ph-ic{display:none}
.split.on #btnSave{border-top-right-radius:0;border-bottom-right-radius:0;border-right-width:0}
.split .caret{width:32px;padding:0;justify-content:center;border-top-left-radius:0;border-bottom-left-radius:0}
.split .pop{min-width:280px}
.acct-btn{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 10px 0 4px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--ink);cursor:pointer}
.acct-btn:hover{background:var(--soft)}
.avatar{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--action);color:#fff;font-size:12px;font-weight:600;letter-spacing:.03em}
.acct-btn .uname{max-width:140px;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acct-btn svg.ic{color:var(--muted)}
.doc{display:inline-flex;align-items:baseline;gap:6px;min-width:0;max-width:300px;margin-right:auto;padding-left:14px;border-left:1px solid var(--line);font-size:14px;white-space:nowrap}
.doc small{font-size:12.5px;color:var(--muted)}
.doc b{font-weight:600;overflow:hidden;text-overflow:ellipsis}
.doc.as small{flex-shrink:999;min-width:5.5em;overflow:hidden;text-overflow:ellipsis}   /* Master-Login: «Name · Bewerbung» wird zuerst gekürzt, nicht der Betrieb */
/* Berufsvorlage mit Fachrichtung: klein «Berufsvorlage · Beruf» (zuerst wird «Berufsvorlage» gekürzt), darunter fett die Fachrichtung – sie unterscheidet zwei Vorlagen desselben Berufs */
.doc.fach{flex-direction:column;align-items:flex-start;gap:0;line-height:1.2}
.doc.fach small{display:flex;max-width:100%;min-width:0}
.doc.fach small span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.doc.fach small span:first-child{flex-shrink:999}
.doc.fach small .dsep{flex:none}
.doc.fach b{max-width:100%}
@media (max-width:760px){ body.acct-user .doc.fach small .dk{display:none} }   /* Handy: nur Beruf über der Fachrichtung, «Berufsvorlage» steht im title */
#btnAppsLbl{max-width:9em;overflow:hidden;text-overflow:ellipsis}   /* langer Name der Lernenden: ganzer Name im title */
body.acct-user:not(.dash-open) .topbar h1{margin-right:0}
body.dash-open .ed-only{display:none!important}

/* Konto-Seite */
.dash{flex:1 1 auto;min-height:0;overflow:auto;background:var(--bg);font-size:15px;line-height:1.5}
.dash-in{max-width:1120px;margin:0 auto;padding:40px 32px 72px}
.d-loading{margin:0;color:var(--muted)}
.d-retry{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.dash .btn{height:40px;padding:0 16px;border-radius:10px;font-weight:500;justify-content:center}
.dash .btn.sm{height:34px;padding:0 12px;font-size:14px;border-radius:8px}
.d-head{display:flex;align-items:center;justify-content:space-between;gap:24px}
.d-head h1{margin:0;font-size:30px;line-height:1.15;font-weight:650;letter-spacing:-.015em}
.d-continue{display:inline-flex;align-items:center;gap:18px;min-height:64px;max-width:100%;padding:10px 12px 10px 22px;border:0;border-radius:14px;background:var(--action);color:#fff;text-align:left;cursor:pointer;transition:background .12s}
.d-continue:hover{background:#26304B}
.d-continue .txt{min-width:0}
.d-continue .lbl{display:block;font-size:12.5px;line-height:1.3;opacity:.78}
.d-continue .nm{display:block;max-width:320px;font-size:17px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d-continue .go{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.14)}
.d-sec{margin-top:44px}
.d-head+.d-sec{margin-top:36px}
.d-sec-head{display:flex;align-items:baseline;gap:10px;margin:0 0 14px}
.d-sec-head h2{margin:0;font-size:18px;line-height:1.3;font-weight:650}
.d-count{font-size:13px;font-weight:400;color:var(--muted);font-variant-numeric:tabular-nums}
.d-dot{display:inline-block;flex:none;width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,var(--c1) 50%,var(--c2) 50%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
.d-tag{display:inline-flex;align-items:center;gap:6px;max-width:100%;min-width:0;height:22px;padding:0 8px;border-radius:6px;background:#EFF1F4;color:#48505F;font-size:12px;font-weight:500;white-space:nowrap}
.d-tag span{overflow:hidden;text-overflow:ellipsis}
.d-recent{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.d-rcard{display:flex;flex-direction:column;align-items:flex-start;min-width:0;min-height:120px;padding:16px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:border-color .12s}
.d-rcard:hover,.d-state:hover{border-color:#A9B1BF}
.d-rcard .firm{font-size:15.5px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.d-rcard .job{display:flex;align-items:flex-start;gap:6px;max-width:100%;min-width:0;margin-top:3px;font-size:13.5px;line-height:1.35;color:var(--muted)}
.d-rcard .job .d-dot{margin-top:4px}
.d-rcard .job span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.d-rcard .foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;width:100%;margin-top:auto;padding-top:14px}
.d-rcard .date{font-size:12.5px;color:var(--muted);white-space:nowrap}
.d-state{display:flex;align-items:center;gap:14px;width:100%;margin-top:12px;padding:14px 14px 14px 16px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:border-color .12s}
.d-recent+.d-state{margin-top:12px}
.d-sec-head+.d-state{margin-top:0}
.d-state .ico{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:10px;background:var(--action-soft);color:var(--action)}
.d-state .txt{min-width:0}
.d-state .t{display:block;font-weight:600;line-height:1.3}
.d-state .m{display:block;font-size:13.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d-state .chev{margin-left:auto;color:var(--muted)}
.d-tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:12px}
.d-tcard{position:relative;display:flex;flex-direction:column;min-width:0;min-height:180px;padding:16px;border:1px solid var(--line);border-radius:12px;background:#fff}
.d-tcard .top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px}
.d-swatch{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--c1) 50%,var(--c2) 50%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.d-tcard .top .icon-btn{margin:-6px -8px 0 0}
.d-tcard h3{margin:0;font-size:16px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.d-tcard .meta{margin-top:2px;font-size:13.5px;color:var(--muted)}
.d-tcard .act{margin-top:auto;padding-top:16px}
.d-tcard .pop{top:46px;right:8px}
.d-new{align-items:center;justify-content:center;gap:10px;border:1.5px dashed #BCC3CF;background:transparent;color:var(--action);font:inherit;font-weight:600;cursor:pointer;transition:background .12s,border-color .12s}
.d-new:hover{background:#fff;border-color:var(--action)}
.d-new .plus{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--action-soft)}
.d-group+.d-group{margin-top:22px}
.d-group h3{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:14px;font-weight:600}
.d-list{list-style:none;margin:0;padding:0;border:1px solid var(--line);border-radius:12px;background:#fff}
.d-row{position:relative}
.d-row+.d-row{border-top:1px solid var(--line-2)}
.d-row.over{outline:2px dashed var(--action);outline-offset:-2px;background:var(--action-soft)}
.d-ar{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1.25fr) 132px 72px auto 36px;align-items:center;column-gap:16px;min-height:60px;padding:8px 10px 8px 18px}
.d-ar .firm{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d-ar .job,.d-ar .date{font-size:14px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d-ftoggle{display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 8px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--muted);font:inherit;font-size:14px;font-variant-numeric:tabular-nums;cursor:pointer}
.d-ftoggle:hover{background:#F0F2F5;color:var(--ink)}
.d-ftoggle .chev{width:14px;height:14px;transition:transform .15s}
.d-ftoggle[aria-expanded="true"]{background:var(--action-soft);color:var(--action)}
.d-ftoggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
.d-row .pop{top:52px;right:8px;min-width:200px}
.d-fpanel{padding:6px 18px 18px;background:var(--soft);border-top:1px solid var(--line-2)}
.d-row:last-child .d-fpanel{border-radius:0 0 12px 12px}
.d-flist{list-style:none;margin:0 0 10px;padding:0}
.d-frow{display:flex;align-items:center;gap:8px;min-height:44px;border-bottom:1px solid var(--line-2);font-size:14px}
.d-frow>svg.ic{color:var(--muted)}
.d-frow .fname{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d-frow .fsize{margin-right:4px;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.d-drop{position:relative;display:flex;align-items:center;justify-content:center;gap:10px;min-height:64px;padding:12px 16px;border:1.5px dashed #BCC3CF;border-radius:10px;background:#fff;color:var(--muted);font-size:14px;text-align:center;cursor:pointer;transition:background .12s,border-color .12s,color .12s}
.d-drop:hover,.d-drop:focus-within,.d-row.over .d-drop{border-color:var(--action);background:var(--action-soft);color:var(--action)}
.d-drop b{color:var(--action);font-weight:600}
.d-empty{display:flex;align-items:center;gap:14px;padding:22px 20px;border:1px dashed #C6CCD6;border-radius:12px;color:var(--muted)}
.d-empty .ico{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:50%;background:#E4E7EC;color:var(--muted)}
.d-empty b{display:block;color:var(--ink);font-weight:600}
.d-backlink{display:inline-flex;align-items:center;gap:6px;height:34px;margin:-10px 0 14px -10px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:var(--muted);font:inherit;font-size:14px;cursor:pointer}
.d-backlink:hover{background:#E4E7EC;color:var(--ink)}

/* Liste der Lernenden (Master-Login) */
.d-search{position:relative;display:flex;align-items:center;margin-left:auto;align-self:center;width:260px;max-width:100%}
.d-search svg.ic{position:absolute;left:12px;color:var(--muted);pointer-events:none}
.d-search .inp{height:40px;padding-left:36px;font-size:15px}
.d-lrow{cursor:pointer}
.d-lrow:hover{background:var(--soft)}
.d-lrow[hidden]{display:none}
.d-lrow:first-child,.d-lrow:first-child:hover{border-radius:12px 12px 0 0}
.d-lr{display:grid;grid-template-columns:36px minmax(0,1.6fr) 132px 118px 96px auto;align-items:center;column-gap:16px;min-height:62px;padding:8px 10px 8px 14px}
.d-lr .avatar{width:36px;height:36px;font-size:13px}
.d-lr .who{min-width:0}
.d-lr .firm{display:flex;align-items:center;gap:8px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d-lr .acc{display:block;font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d-lr .date,.d-lr .num{font-size:14px;color:var(--muted);white-space:nowrap}
p.d-empty{margin:12px 0 0}

/* Mein Konto */
.dash-in.d-narrow{max-width:760px}
.d-sub{margin:4px 0 0;color:var(--muted);font-size:14.5px}
.linkbtn{border:0;background:none;padding:0;color:var(--action);font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
/* Rechte und Konto löschen (Master) */
.dr-roles{margin:0 0 12px;padding:0;border:0}
.dr-roles legend{margin-bottom:6px;font-size:13.5px;font-weight:600}
.dr-role{display:flex;align-items:flex-start;gap:10px;padding:9px 10px;border:1px solid var(--line);border-radius:10px;cursor:pointer}
.dr-role+.dr-role{margin-top:6px}
.dr-role:has(input:checked){border-color:var(--action);background:var(--action-soft)}
.dr-role input{margin:3px 0 0;width:18px;height:18px;accent-color:var(--action)}
.dr-role b{display:block;font-size:14.5px}
.dr-role small,.dr-edit small,.dr-list small{color:var(--muted);font-size:12.5px}
.dr-list{list-style:none;margin:0;padding:4px 8px;max-height:min(260px,40vh);overflow:auto;border:1px solid var(--line);border-radius:10px}
.dr-list .check{margin:0;min-height:40px}
.dr-list li[hidden]{display:none}
.dd-text{margin:0 0 12px}
.btn.danger{background:var(--bad);border-color:var(--bad);color:#fff}
.btn.danger:disabled{opacity:.45}
.linkbtn.danger{color:var(--bad)}
.d-tag.role{background:var(--action-soft);color:var(--action)}
/* Dokumente (Konto-Seite) und Beilagen im Abschnitt «Dossier» */
.d-dr{display:grid;grid-template-columns:24px minmax(0,1fr) 120px repeat(3,36px);align-items:center;column-gap:10px;min-height:58px;padding:6px 10px 6px 16px}
.d-dr>svg.ic{color:var(--muted)}
.d-dr .who{min-width:0}
.d-dr .firm{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d-dr .acc{display:block;font-size:13px;color:var(--muted)}
.d-dr .date{font-size:14px;color:var(--muted);white-space:nowrap}
.d-small{font-size:12px}
.d-docdrop{margin-top:10px}
.d-docbusy{margin:10px 0 0;color:var(--muted);font-size:14px}
.d-docbusy[hidden]{display:none}
#dDocs .d-note{margin:-6px 0 12px}
#docDrop.over{border-color:var(--action);background:var(--action-soft);color:var(--action)}
.doc-pick{margin:12px 0 4px;padding:10px 12px;border:1px solid var(--line);border-radius:10px}
.doc-pick .lbl{margin-bottom:4px;font-size:13.5px;font-weight:600}
.doc-pick .check{margin:4px 0}
.doc-est{margin:10px 0 6px;padding:8px 12px;border-radius:8px;background:#E8F5EC;color:#1E6A3A;font-size:13.5px}
.doc-est.warn{background:#FFF3D6;color:#6B4E00}
.doc-est.bad{background:#FDE7E4;color:#9B2C1F}
.sx-add{margin:8px 0 0;font-size:13.5px}
.sx-go{display:flex;flex-wrap:wrap;gap:8px}
.sx-warn{color:#6B4E00}
body.ro #docDrop,body.ro [data-rename-doc],body.ro [data-del-doc]{display:none!important}
/* Klassen (Master): Werkzeuge über der Liste, Klassen-Dialog */
.d-tools{display:flex;align-items:center;gap:10px;flex:none}
.d-tools .d-search{margin-left:0;width:220px}
.d-sec[data-cat]+.d-sec[data-cat]{margin-top:30px}
.d-sec[data-cat] .d-group h3{color:var(--muted)}
.dr-hint{margin:6px 0 0;font-size:13px}
.dc-list{list-style:none;margin:0 0 16px;padding:0;border:1px solid var(--line);border-radius:10px}
.dc-list li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-height:52px;padding:10px 12px}
.dc-list li+li{border-top:1px solid var(--line-2)}
.dc-list .nm{flex:1 1 auto;min-width:110px;font-weight:600;overflow-wrap:anywhere}
.dc-list .d-count{flex:none}
.dc-list .acts{display:flex;align-items:center;gap:14px;flex:0 0 auto;margin-left:auto}   /* zu wenig Platz: die Knöpfe rutschen auf eine eigene Zeile, der Name bleibt lesbar */
.dc-list .dc-edit{flex:1 1 160px;min-width:0}
#dlgClasses .dlg{width:560px}
#dlgRights .dlg-foot,#dlgClasses .dlg-foot{position:sticky;bottom:-20px;margin:22px -24px -20px;padding:12px 24px 20px;background:#fff;border-top:1px solid var(--line-2)}   /* lange Listen: «Speichern» bleibt sichtbar */
.dc-list .ph-only{display:none}
.dc-new{margin-top:4px}
.dc-new .pw-row .inp{font-family:inherit;letter-spacing:normal}
#dcBack{margin-top:-4px}
.robar{background:#EEF3FF;border-color:#C9D6F5}
body.ro #saveWrap,body.ro #btnImport,body.ro #btnExample,body.ro #btnClear,body.ro #moreMenu [data-more="import"],body.ro #moreMenu [data-more="example"],body.ro #moreMenu [data-more="clear"],
body.ro [data-step-page],body.ro [data-new-app],body.ro .d-new,body.ro [data-del-app],body.ro [data-del-tpl],body.ro [data-rename-tpl],body.ro [data-del-file],body.ro .d-drop,body.ro .d-tcard-warn,body.ro .fixstrip button{display:none!important}
body.ro .sign-actions{display:none!important}
body.ro #form .sec-body{opacity:.92}
.pw-row{display:flex;gap:8px}
.pw-row .inp{flex:1;min-width:0;font-family:ui-monospace,Menlo,Consolas,monospace;letter-spacing:.02em}
.pw-row .btn{flex:none;height:44px}
.pw-done{margin:0 0 6px}
.pw-show{margin:0 0 10px;padding:12px 14px;border:1px dashed #BCC3CF;border-radius:10px;background:var(--soft);font:600 22px/1.2 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.03em;user-select:all;overflow-wrap:anywhere}
.d-panel{padding:20px 22px 20px;border:1px solid var(--line);border-radius:12px;background:#fff}
.d-note{margin:0 0 18px;color:var(--muted);font-size:14px}
.d-grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.d-grid2 .d-full{grid-column:1/-1}
.d-grid2 .fld{margin-bottom:14px}
.d-msg{margin:0;min-height:0;color:var(--bad);font-size:14px}
.d-msg:not(:empty){margin:0 0 8px}
.d-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}

/* Schlanke Dialoge (auf dem Handy als Blatt von unten) */
.modal.sheet{z-index:31;background:rgba(20,25,40,.42)}
.dlg{width:460px;max-width:100%;max-height:calc(100vh - 32px);overflow:auto;margin:0;padding:22px 24px 20px;background:#fff;border-radius:16px;box-shadow:var(--pop);font-size:15px;line-height:1.5}
.dlg.wide{width:600px}
.dlg .btn{height:40px;padding:0 16px;border-radius:10px;font-weight:500;justify-content:center}
.dlg-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.dlg-head h2{margin:0;font-size:19px;line-height:1.3;font-weight:650}
.dlg-head .icon-btn{margin:-6px -10px 0 0}
.dlg-ctx{margin:-8px 0 18px}
.fld{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.fld label{font-size:13.5px;font-weight:600;color:var(--ink)}
/* Berufsauswahl (durchsuchbare Liste) */
.jp{position:relative}
.jp-list{margin-top:4px;max-height:min(280px,42vh);overflow:auto;overscroll-behavior:contain;padding:4px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 6px 18px rgba(20,30,50,.08)}
.jp-list[hidden]{display:none}
.jp-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));align-items:center;gap:2px 6px;padding:3px 2px;border-bottom:1px solid var(--line-2)}
.jp-row small{grid-column:1/-1}
.jp-row:last-of-type{border-bottom:0}
.jp-row small{color:var(--muted);font-size:12px;margin:-2px 0 2px 10px}
.jp-opt{padding:7px 10px;border:1px solid transparent;border-radius:8px;font-size:15px;line-height:1.3;cursor:pointer}
.jp-opt:hover{background:#F0F2F5}
.jp-opt[aria-selected="true"]{background:var(--action-soft);color:var(--action)}
.jp-more{padding:8px 10px;color:var(--muted);font-size:13px}
.jp-hint{margin:6px 0 0;color:var(--bad);font-size:13.5px}
.jp-hint[hidden]{display:none}
/* Fachrichtung zum Beruf: Auswahl (js/fachrichtungen.js) oder freies Textfeld; Hinweise direkt darunter */
.fp .inwrap .inp{padding-right:52px}
.fp-note,.fp-dup{margin:-8px 0 16px}
.d-tcard h3 .d-fach{display:block;margin-top:2px;font-size:14px;font-weight:500;color:#3B4250}
.d-tcard-warn{margin:6px 0 0;padding:6px 8px;border-radius:8px;background:#FFF7E0;color:#5A4300;font-size:13px}
/* Hinweis im Dialog «Neue Bewerbung»: Beruf weicht von der Vorlage ab */
.dlg-note{margin:8px 0 0;padding:8px 10px;border-radius:8px;background:#FFF7E0;color:#5A4300;font-size:13.5px;line-height:1.4}
.dlg-note[hidden]{display:none}
.dlg-note p{margin:0}
.dlg-note .chk{display:flex;align-items:flex-start;gap:8px;margin-top:6px;font-weight:500;cursor:pointer}
.dlg-note .chk input{margin:2px 0 0;flex:none;accent-color:var(--action)}
.dlg-note .chk[hidden]{display:none}
.inp{width:100%;height:44px;padding:0 12px;border:1px solid #C6CCD6;border-radius:10px;background:#fff;color:var(--ink);font:inherit;font-size:16px;-webkit-appearance:none;appearance:none}
.inp::placeholder{color:#6E7584}
.inp:focus{outline:none;border-color:var(--action);box-shadow:var(--ring)}
select.inp{padding-right:40px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235F6675' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center/18px}
.dlg-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:22px}
/* Fenster «Weitere Export-Möglichkeiten» (#dlgExport): zwei gleichwertige, ruhige Wahl-Zeilen wie «Anders ausgeben» im Tagebuch */
.dx-choices{display:grid;gap:10px}
.dx-choice{display:flex;align-items:center;gap:14px;width:100%;min-height:64px;padding:12px 14px;border:1px solid #C6CCD6;border-radius:12px;background:#fff;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.dx-choice:hover:not(:disabled){border-color:var(--action);background:var(--soft)}
.dx-choice:focus-visible{outline:none;border-color:var(--action);box-shadow:var(--ring)}
.dx-choice:disabled{opacity:.55;cursor:default}
.dx-ico{display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:10px;background:var(--action-soft);color:var(--action)}
.dx-txt{flex:1;min-width:0;overflow-wrap:anywhere}
.dx-txt b{display:block;font-weight:600;line-height:1.3}
.dx-txt small{display:block;margin-top:2px;font-size:13.5px;line-height:1.35;color:var(--muted)}
.sx-more{margin:0 0 18px;font-size:14px;color:var(--muted)}   /* letzter Schritt: «Weitere Export-Möglichkeiten: Word-Datei oder Drucken …» */
.sx-more .linkbtn{padding:12px 0;margin:-12px 0}                 /* grössere Tippfläche, gleiche Zeilenhöhe */
.dx-cardlink{display:block;margin-top:8px;font-size:13px}        /* Link im Abschnitt «Dossier» (lange Liste): eigene Zeile, nicht im kleinen Hinweistext */
.dx-cardlink .linkbtn{padding:14px 0;margin:-14px 0}
.linkbtn:disabled{color:var(--muted);text-decoration:none;cursor:default}
body.steps .dx-cardlink{display:none}                            /* Link im Abschnitt «Dossier» nur in der langen Liste */
body.ro .dx-cardlink{display:none}                               /* Nur Ansicht: der Abschnitt ist inert, der Link reagierte nicht … */
body.ro:not(.steps) .tb-more{display:inline-flex}                /* … dafür in der langen Liste immer das Menü ⋯ (sonst ab 1280 px ausgeblendet) */

/* Kopfleiste schmaler: zuerst Kontoname und Speicherzeit kürzen, dann wandern Importieren/Beispiel/Leeren ins Menü
   (mit Konto unter 1280 px, ohne Konto unter 1100 px) */
body.acct-user .topbar h1 span{display:none!important}
@media (max-width:1599px){ body.acct-user .acct-btn{padding:0 4px} body.acct-user .acct-btn .uname,body.acct-user .acct-btn svg.ic{display:none} body.acct-user .saveinfo{max-width:150px} body.acct-user .doc{max-width:220px} }
@media (max-width:1439px){ body.acct-user .saveinfo{display:none} }   /* 1380–1439 px: sonst rutscht das Konto-Menü in eine zweite Zeile */
@media (max-width:1279px){ body.acct-user .ed-wide{display:none} body.acct-user .tb-more{display:inline-flex} body.acct-user .doc{max-width:200px} }
@media (max-width:1099px){ .ed-wide{display:none} .tb-more{display:inline-flex} }
body.tb-tight1 #saveInfo{display:none} body.tb-tight .ed-wide{display:none} body.tb-tight .tb-more{display:inline-flex}
/* Rückgängig/Wiederholen: in der Kopfleiste links von «Speichern» (ab 761 px), auf dem Handy rechts in der Schrittleiste; fitTopbar misst die Stufen ohne sie (tb-noundo) */
.tb-undo{display:inline-flex;align-items:center;flex:none}
.tb-undo .icon-btn{width:32px;height:34px;color:var(--ink)}
.tb-undo .icon-btn svg.ic,.st-undo .icon-btn svg.ic{width:20px;height:20px;stroke-width:1.8}
.tb-undo .icon-btn:disabled,.st-undo .icon-btn:disabled{color:#B5BAC4;background:transparent;cursor:default}
.st-undo{display:none}
.pop .ph-undo{display:none}
body.ro .tb-undo,body.ro .st-undo,body.ro .pop .ph-undo{display:none!important}
body.tb-noundo .tb-undo{display:none}
body.tb-tight0 .topbar .logo{width:30px;object-fit:cover;object-position:left center}
body.tb-help:not(.dash-open) #btnTour{display:none} body.tb-help #moreMenu [data-more="tour"]{display:flex}
@media (max-width:1099px){ body:not(.steps) .tb-undo{display:none} body:not(.steps) .pop button.ph-undo{display:flex} body:not(.steps) .pop hr.ph-undo{display:block} }   /* lange Liste (?editor=klassisch): im Menü ⋯ */
.pop button:disabled,.pop button:disabled svg.ic{color:#B5BAC4} .pop button:disabled{cursor:default;background:transparent}   /* passt die Kopfleiste nicht auf eine Zeile (langer Name, viele Knöpfe): Werkzeuge ins Menü ⋯ (fitTopbar) */
@media (max-width:980px){ body.dash-open .topbar h1{flex-basis:auto;margin:0 auto 0 0} body.acct-user .doc{padding-left:0;border-left:0} }
@media (max-width:899px){
  .d-recent{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -32px;padding:2px 32px 10px;scroll-padding:0 32px}
  .d-recent .d-rcard{flex:0 0 212px;scroll-snap-align:start}
}
@media (max-width:899px){ .d-lr{grid-template-columns:36px minmax(0,1fr) 120px auto} .d-lr .num{display:none} }
@media (max-width:719px){
  .d-ar{grid-template-columns:minmax(0,1fr) auto auto 44px;grid-template-areas:"firm files open more" "date files open more";column-gap:6px;padding:10px 4px 10px 16px}
  .d-ar .firm{grid-area:firm;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.3}
  .d-ar .date{grid-area:date;font-size:13px}
  .d-ar .job{display:none}
  .d-ar .d-ftoggle{grid-area:files;height:40px;border-color:var(--line);background:#fff}
  .d-ar .open{grid-area:open}
  .d-ar .more{grid-area:more;width:44px;height:44px}
  .d-fpanel{padding:4px 12px 14px 16px}
  .d-frow .icon-btn{width:44px;height:44px}
}
/* Handy-Layout (bis 760 px, auch Handy quer): Kopfleiste in einer Zeile – mit und ohne Konto */
@media (max-width:760px){
  body.acct-user .topbar{flex-wrap:nowrap;gap:4px;padding:8px 10px}
  body.acct-user:not(.dash-open) .topbar h1{display:none}
  body.acct-user:not(.dash-open) .tb-back{display:inline-grid;width:40px;height:40px}
  body.acct-user .topbar>*:not(.doc){flex:none}
  body.acct-user .doc{flex:1 1 0;flex-direction:column;align-items:flex-start;gap:0;max-width:none;margin:0 0 0 2px;padding:0;border:0;font-size:14.5px;line-height:1.2}
  body.acct-user .doc small{font-size:11.5px;max-width:100%;overflow:hidden;text-overflow:ellipsis}
  body.acct-user .doc b{max-width:100%}
  body.acct-user #btnApps,body.acct-user:not(.dash-open) #btnTour,body.acct-user:not(.dash-open) .tb-acct{display:none}
  .pop .ph-only{display:flex}
  .pop hr.ph-only{display:block}
  .topbar .btn,.tb-more .icon-btn{height:40px}
  body.acct-user .split .caret{width:34px}
  #btnDialog{width:40px;padding:0;justify-content:center}
  #btnDialog .ph-ic{display:block}
  #btnDialog .ph-hide{display:none}
  /* ohne Konto (Datei-Modus): «?» steht im Menü ⋯ als «Kurzanleitung», Speicherzeit ausgeblendet; unter 640 px nur das runde Logo */
  body:not(.acct-user) .topbar{gap:4px;padding:8px 10px}
  body:not(.acct-user) .topbar h1{flex-basis:auto;margin:0 auto 0 0}
  body:not(.acct-user) #saveInfo,body:not(.acct-user) #btnTour{display:none}
}
@media (max-width:639px){
  body:not(.acct-user) .topbar .logo{width:30px;object-fit:cover;object-position:left center}   /* nur das runde Zeichen */
  #stepFoot .ph-hide{display:none}
  .fixbar{flex-wrap:wrap;row-gap:6px;padding:8px 12px}
  .fixbar #fixText{flex-basis:100%;margin:0}
  #draftBar,#lostBar,#failBar{flex-wrap:wrap;row-gap:6px;padding:8px 12px}
  #draftBar>span,#lostBar>span,#failBar>span{flex-basis:100%;margin:0}
  body.dash-open .topbar .logo{height:24px}
  .dash-in{padding:24px 16px 56px}
  .d-head{flex-direction:column;align-items:stretch;gap:18px}
  .d-head h1{font-size:26px}
  .d-tools{flex-wrap:wrap}
  .d-dr{grid-template-columns:22px minmax(0,1fr) repeat(3,40px);padding-left:12px}
  .d-dr .date{display:none}
  .d-tools .d-search{flex:1 1 180px;width:auto}
  .dc-list li{flex-wrap:wrap}
  .dc-list .acts{flex-basis:100%;justify-content:flex-start;margin-left:0}
  .dc-list .ph-hide{display:none}
  .dc-list .ph-only{display:inline}
  #dlgRights .dlg-foot,#dlgClasses .dlg-foot{margin:18px -20px calc(-20px - env(safe-area-inset-bottom));padding:12px 20px calc(20px + env(safe-area-inset-bottom));bottom:calc(-20px - env(safe-area-inset-bottom))}
  .d-continue{width:100%}
  .d-continue .txt{flex:1}
  .d-continue .nm{max-width:none}
  .d-sec{margin-top:36px}
  .d-head+.d-sec{margin-top:28px}
  .d-recent{margin:0 -16px;padding:2px 16px 10px;scroll-padding:0 16px}
  .d-recent .d-rcard{flex-basis:72%}
  .d-tgrid{grid-template-columns:1fr}
  .d-tcard:not(.d-new){display:grid;grid-template-columns:36px minmax(0,1fr) 44px;grid-template-areas:"sw name more" "sw meta more" "act act act";column-gap:12px;align-items:center;min-height:0;padding:14px 8px 14px 16px}
  .d-tcard .top{display:contents}
  .d-tcard .d-swatch{grid-area:sw;align-self:start;margin-top:2px}
  .d-tcard .top .icon-btn{grid-area:more;align-self:start;width:44px;height:44px;margin:-6px 0 0}
  .d-tcard h3{grid-area:name;font-size:15.5px}
  .d-tcard .meta{grid-area:meta;margin:0}
  .d-tcard .act{grid-area:act;padding:12px 8px 0 0}
  .d-tcard-warn{grid-column:1/-1}
  .d-tcard .pop{top:50px}
  .d-new{flex-direction:row;min-height:60px}
  .d-new .plus{width:32px;height:32px}
  .d-drop .ph-hide{display:none}
  .d-backlink{margin:-6px 0 10px -8px}
  .d-sec-head{flex-wrap:wrap}
  .d-search{width:100%;margin:6px 0 0}
  .d-lr{grid-template-columns:36px minmax(0,1fr) auto;grid-template-areas:"av who open" "av meta open";column-gap:12px;row-gap:2px;padding:10px 10px 10px 14px}
  .d-lr .avatar{grid-area:av;align-self:start}
  .d-lr .who{grid-area:who}
  .d-lr .date{grid-area:meta;font-size:13px}
  .d-lr .num{display:none}
  .d-lr .open{grid-area:open}
  .d-panel{padding:16px}
  .d-grid2{grid-template-columns:1fr}
  .d-actions .btn{flex:1;height:44px}
  .modal.sheet{align-items:flex-end;padding:0}
  .modal.sheet .dlg,.modal.sheet .dlg.wide{width:100%;max-width:none;max-height:calc(var(--vvh,100vh) * .92);margin-bottom:var(--kb,0px);border-radius:20px 20px 0 0;padding:10px 20px calc(20px + env(safe-area-inset-bottom))}
  .modal.sheet .dlg::before{content:"";display:block;width:40px;height:4px;margin:0 auto 14px;border-radius:2px;background:#D3D8E0}
  .dlg-head .icon-btn{width:44px;height:44px;margin:-8px -12px 0 0}
  .dlg-foot .btn{flex:1;height:44px}
}
@media (hover:hover) and (pointer:fine){ .d-recent{scrollbar-width:thin} }
@media (prefers-reduced-motion:reduce){ .d-continue,.d-rcard,.d-state,.d-new,.d-drop,.d-ftoggle .chev{transition:none} }

/* =========================================================
   1c. Probeversion «Editor in Schritten» (js/schritte.js, nur mit body.steps)
   ========================================================= */
body.steps #app{grid-template-columns:272px 460px minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
body.steps #preview{min-height:0}
#stepRail{display:flex;flex-direction:column;min-height:0;overflow:auto;background:var(--panel);border-right:1px solid var(--line);padding:14px 12px 12px}
.st-check{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px 12px;margin:0 0 14px;padding:12px;border:1px solid #F0D9A8;border-radius:12px;background:#FFF7E0}
.st-ring{--p:0;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;font:inherit;cursor:pointer;background:conic-gradient(var(--ok) calc(var(--p)*360deg),#F0DDB0 0)}
.st-ring b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#FFF7E0;font-size:12.5px;font-weight:700;color:#5A4300}
.st-ctext{min-width:0;font-size:13px;color:#5A4300;line-height:1.3}
.st-ctext b{display:block;font-size:14px;color:#3F2F00;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.st-next{grid-column:1/-1;justify-content:space-between;height:36px;background:#fff;border-color:#E6CF9C;font-weight:600}
.st-list{list-style:none;margin:0;padding:0;position:relative}
.st-list li{position:relative}
.st-list li+li::before{content:"";position:absolute;left:25px;top:-10px;height:20px;border-left:2px solid var(--line-2)}
.st-item{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;column-gap:12px;width:100%;min-height:58px;padding:8px 10px 8px 12px;border:0;border-radius:10px;background:transparent;color:var(--ink);text-align:left;font:inherit;cursor:pointer}
.st-item:hover{background:#F0F2F5}
.st-item.cur{background:var(--action-soft)}
.st-num{position:relative;z-index:1;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:2px solid #C6CCD6;background:#fff;font-size:13px;font-weight:700;color:var(--muted)}
.st-item.ok .st-num{border-color:var(--ok);background:var(--ok);color:#fff}
.st-item.chk .st-num{border-color:#E2B53B;color:#6B4E00}
.st-item.long .st-num{border-color:var(--bad);color:var(--bad)}
.st-item.cur .st-num{border-color:var(--action);background:var(--action);color:#fff}
.st-item.cur.long .st-num{border-color:var(--bad)}
.st-txt{min-width:0}
.st-t{display:block;font-weight:600;font-size:14.5px;line-height:1.25}
.st-s{display:block;font-size:12.5px;line-height:1.3;color:var(--muted)}
.st-badge{display:inline-block;height:20px;padding:0 8px;border-radius:99px;background:#FFE9A8;color:#6B4E00;font-size:11.5px;font-weight:600;line-height:20px;white-space:nowrap}
.st-badge.bad{background:var(--bad-soft);color:var(--bad)}
.st-foot{margin-top:auto;padding:14px 6px 0;border-top:1px solid var(--line-2);font-size:12.5px;color:var(--muted)}
.st-all{display:flex;align-items:center;gap:8px;min-height:36px;color:var(--ink);font-size:13.5px;cursor:pointer}
.st-all input{width:18px;height:18px;margin:0;accent-color:var(--action)}
.st-legend{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;margin:8px 0}
.st-dot{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;border:2px solid #C6CCD6;background:#fff;color:#fff}
.st-dot.ok{border-color:var(--ok);background:var(--ok)}
.st-dot svg.ic.sm{width:11px;height:11px;stroke-width:3}
.st-old{color:var(--muted)}
.st-tip{margin:0 0 8px}
.st-short{display:none}
.st-check[data-step-next-check]{cursor:pointer}
body.steps #form{background:#F4F5F7;display:flex;flex-direction:column}
#stepHead{padding:20px 24px 6px}
#stepHead:empty{display:none}
.sh-k{font-size:13px;color:var(--muted)}
#stepHead h2{margin:2px 0 2px;font-size:24px;line-height:1.2;font-weight:650;letter-spacing:-.01em}
#stepHead p{margin:0;color:var(--muted);font-size:14px}
.step-sec{padding:10px 16px 6px}
.step-sec[hidden]{display:none}
body.steps:not(.steps-all) .step-sep{display:none}
.step-sep{display:flex;align-items:baseline;gap:10px;margin:14px 8px 10px;font-size:20px;font-weight:650}
.step-sep span{font-size:12.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
body.steps .step-sec details.sec{margin:0 0 12px;border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}
body.steps .step-sec details.sec>summary{padding:14px 16px;font-size:15px}
body.steps .step-sec details.sec[open]>summary{border-bottom:1px solid var(--line-2)}
#stepExtra .sx-card{margin:0 0 12px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:#fff}
#stepExtra:empty{display:none}
.sx-card h3{margin:0 0 8px;font-size:15px}
.sx-list{list-style:none;margin:0;padding:0}
.sx-list li{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:10px;min-height:44px;border-top:1px solid var(--line-2)}
.sx-list li:first-child{border-top:0}
.sx-list .where{font-size:12.5px;color:var(--muted)}
.sx-list .nm{overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto}   /* lange Wörter («Bewerbungsschreiben») trennen statt in «Schritt N» zu laufen (iPad hoch, schmale Handys) */
.sx-ok{margin:0;color:var(--ok);font-weight:600}
.sx-bad{margin:0;color:var(--bad)}
.sx-bad+.sx-bad{margin-top:6px}
.sx-sub{display:block;font-size:12.5px;font-weight:400;color:var(--muted)}
.sx-sub.warn{color:#6B4E00;font-weight:600}
.sx-how{margin:0 0 8px;padding-left:20px}
#stepFoot{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;gap:8px;margin-top:auto;padding:12px 16px;background:rgba(244,245,247,.96);border-top:1px solid var(--line);backdrop-filter:blur(4px)}
#stepFoot:empty{display:none}
#stepFoot .btn{height:42px;border-radius:10px;font-weight:600}
#stepFoot .btn.primary{margin-left:auto;min-width:0}
#stepFoot .btn:not(.primary){flex:none}
#stepFoot .sf-t{min-width:0;overflow:hidden;text-overflow:ellipsis}   /* zu wenig Platz: Beschriftung mit «…» statt über den Rand */
#stepFoot .sf-prev{display:none}
@media (min-width:761px){ body.steps #form{scroll-padding:8px 0 84px} }   /* hier scrollt #form: Fokus mit Tab landet nicht unter der Fussleiste «Weiter» */
body.steps #viewport .page{cursor:pointer}
.step-hl{background-color:rgba(47,59,92,.07)!important;box-shadow:0 0 0 3px rgba(47,59,92,.07)}
.tour-pulse{position:relative;background-color:rgba(245,166,35,.22)!important;box-shadow:0 0 0 4px rgba(245,166,35,.35);animation:tourPulse 1.2s ease-in-out infinite}
@keyframes tourPulse{50%{box-shadow:0 0 0 9px rgba(245,166,35,.12)}}
@media (prefers-reduced-motion:reduce){ .tour-pulse{animation:none} }
.tour-body .tour-big{font-size:15px}
/* Vorschau gross */
.pv-full-btn{margin-left:auto}
.pv-close{display:none}
body.pv-full #preview{position:fixed;inset:0;z-index:38;display:flex;flex-direction:column;background:var(--desk)}
body.pv-full #preview .status{padding:8px 16px}
body.pv-full #preview .status .note,body.pv-full #preview #msg,body.pv-full #meters,body.pv-full #fsInfo{display:none!important}
body.pv-full .pv-full-btn{display:none}
body.pv-full .pv-close{display:inline-flex;margin-left:auto;font-weight:600}
body.pv-full #viewport{flex:1;min-height:0;padding:16px}
body.pv-full .topbar,body.pv-full #stepRail{visibility:hidden}
body.pv-full .step-hl{background-color:transparent!important;box-shadow:none!important}
.pv-zoom{display:none}
body.pv-full .pv-zoom{display:inline-flex}
body.pv-full #viewport{align-items:flex-start}
@media print{ .step-hl,.tour-pulse{background-color:transparent!important;box-shadow:none!important;animation:none!important} #stepRail,#stepHead,#stepFoot,#stepExtra,#btnFull,#btnFullClose{display:none!important} body.pv-full #preview{position:static;display:block;background:#fff} body.pv-full #viewport{padding:0} }
@media (max-width:1279px){ body.steps #app{grid-template-columns:220px 420px minmax(0,1fr)} .st-s{display:none} .st-item{min-height:48px} }

@media (max-width:980px){
  .topbar{height:auto;padding:8px 12px;flex-wrap:wrap}
  .topbar h1{flex-basis:100%;margin-bottom:4px}
  .fonts{grid-template-columns:repeat(2,1fr)}
  /* lange Liste (?editor=klassisch): Formular und Vorschau untereinander, die ganze Seite scrollt (sonst schrumpft das Formular auf 0 px) */
  html:not(.steps),html:not(.steps) body{height:auto;min-height:100%}
  body:not(.steps) #app{grid-template-columns:1fr;height:auto;flex:none}
  body:not(.steps) #form{overflow:visible;border-right:0;border-bottom:1px solid var(--line)}
  body:not(.steps) #viewport{min-height:80vh}
}
/* Editor in Schritten auf kleinen Bildschirmen (z.B. Schul-Laptop mit Vergrösserung): schmale Schrittleiste, Formular und Vorschau
   nebeneinander; die Seite scrollt nie als Ganzes, damit Seitenwahl oben und Weiter unten immer sichtbar sind */
@media (min-width:761px) and (max-width:1099px){
  body.steps #app{grid-template-columns:64px minmax(300px,46%) minmax(0,1fr)}
  #stepRail{padding:10px 6px}
  .st-foot,.st-txt,.st-item .st-badge{display:none}
  .st-check{grid-template-columns:1fr;justify-items:center;margin:0 0 10px;padding:4px}   /* nur der Ring; Klick führt zum nächsten offenen Punkt */
  .st-check .st-ctext,.st-check .st-next{display:none}
  .st-ring{width:40px;height:40px}.st-ring b{width:32px;height:32px;font-size:11px}
  .st-item{grid-template-columns:1fr;justify-items:center;padding:8px 0}
  .st-item.chk .st-num{box-shadow:0 0 0 3px #FFE9A8}
  .st-item.long .st-num{box-shadow:0 0 0 3px var(--bad-soft)}   /* ohne Beschriftung: roter Ring statt «zu lang» */
  .st-list li+li::before{left:50%}
  body.steps .topbar h1{flex-basis:auto;margin:0 auto 0 0}
  /* mit Konto eine Zeile: «Alle Bewerbungen» als Pfeil (Beschriftung in aria-label/title), der Name des Dokuments nimmt den Rest */
  body.steps.acct-user:not(.dash-open) .topbar{flex-wrap:nowrap}
  body.steps.acct-user:not(.dash-open) .topbar>*:not(.doc){flex:none}
  body.steps.acct-user:not(.dash-open) .doc{flex:1 1 0;max-width:none}
  body.steps.acct-user:not(.dash-open) #btnApps{display:none}
  body.steps.acct-user:not(.dash-open) .tb-back{display:inline-grid}
  body.steps #preview .status{gap:4px 12px;padding:6px 12px;min-height:0}
  body.steps #meters{gap:10px!important}
}
@media (min-width:761px) and (max-width:899px){ body.steps.acct-user:not(.dash-open) .topbar .logo{width:30px;object-fit:cover;object-position:left center} }   /* nur das runde Logo, sonst bleibt vom Betrieb nur «Kant…» */
/* Handy (bis 760 px): untereinander, Schrittleiste oben, die Seite scrollt */
@media (max-width:760px){
  html.steps,html.steps body{height:auto;min-height:100%}
  html.steps{scroll-padding:calc(var(--tbh,56px) + 72px) 0 72px}   /* Sprünge und Fokus landen nicht unter Kopf-, Schritt- oder Fussleiste */
  body.steps #app{grid-template-columns:minmax(0,1fr);grid-template-rows:none;height:auto;flex:none}   /* minmax(0,…): breite Knöpfe im Fuss machen die Seite nicht breiter */
  body.steps #form{overflow:visible;border-right:0;border-bottom:1px solid var(--line)}
  body.steps #viewport{min-height:80vh}
  #stepRail{position:sticky;top:var(--tbh,56px);z-index:15;flex-direction:row;align-items:center;gap:8px;padding:8px 10px;border-right:0;border-bottom:1px solid var(--line);overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
  #stepRail::-webkit-scrollbar{display:none}
  .st-check{flex:none;margin:0;padding:4px 10px 4px 4px;border-radius:99px;grid-template-columns:auto auto}
  .st-check .st-ctext,.st-check .st-next,.st-foot{display:none}
  .st-short{display:inline;font-size:13px;font-weight:600;color:#5A4300}
  .st-ring{width:34px;height:34px}.st-ring b{width:26px;height:26px;font-size:11px}
  .st-ctext b{font-size:12.5px}
  .st-list{display:flex;flex:none;gap:4px}
  .st-list li{flex:none}
  .st-list li+li::before{display:none}
  .st-item{grid-template-columns:auto auto;min-height:44px;padding:6px 12px 6px 6px;border:1px solid var(--line);border-radius:99px;white-space:nowrap}
  .st-item.cur{border-color:var(--action)}
  .st-s,.st-item .st-badge{display:none}
  .st-item.chk .st-t::after,.st-item.long .st-t::after{content:"";display:inline-block;width:8px;height:8px;margin-left:6px;border-radius:50%;background:#E2B53B;vertical-align:middle}
  .st-item.long .st-t::after{background:var(--bad)}
  #stepHead{padding:16px 16px 4px}
  .step-sec{padding:8px 10px 4px}
  #stepFoot .sf-prev{display:inline-flex}
  #stepFoot{padding:10px}
  #stepFoot .btn{padding:0 12px;min-width:0}
  #stepFoot .btn.primary{flex:1 1 auto;justify-content:center;overflow:hidden;white-space:nowrap}
}
@media (max-width:760px){
  .tb-undo{display:none}
  #stepRail .st-undo{position:sticky;right:-10px;z-index:2;display:inline-flex;align-items:center;align-self:stretch;flex:none;margin:-8px -10px -8px auto;padding:0 4px 0 16px;background:linear-gradient(90deg,rgba(255,255,255,0),var(--panel) 14px)}
  #stepRail .st-undo::before{content:"";width:1px;height:28px;margin-right:4px;background:var(--line)}
  #stepRail .st-undo .icon-btn{width:44px;height:44px;color:var(--ink)}
  #stepRail .st-undo .icon-btn:disabled{color:#B5BAC4}
}
@media (max-width:420px){ #stepFoot{gap:6px;padding:10px 8px} #stepFoot .btn{padding:0 9px;gap:4px} }   /* «Prüfen und drucken» passt ab 375 px ganz */
@media (prefers-reduced-motion:reduce){.sec>summary::before,#toast{transition:none}}
/* iPhone/iPad: Felder unter 16 px lassen Safari beim Antippen hineinzoomen (steht am Schluss, damit es die Regeln oben schlägt) */
@media (max-width:760px), (pointer:coarse){
  .field input[type=text],.field input[type=password],.field textarea,.field select,.line-item input,.colorrow .hex,.rte,#importText,.d-search .inp{font-size:16px}
  .item-head .ib{width:44px;height:44px}   /* Einträge: grosse Tippflächen (in Listenzeilen nicht, sonst werden die Felder zu schmal) */
  .ib.danger{margin-left:8px}              /* Abstand zwischen «Nach unten» und «Löschen» */
  /* Tippflächen mindestens 44 px (min-height schlägt auch feste Höhen wie .dash .btn.sm) */
  .topbar .btn,.topbar .icon-btn,#btnFull,#btnFullClose,.photo-actions .btn,.sign-actions .btn,.fixstrip .btn,.status .tab,.dash .btn.sm,.d-backlink{min-height:44px}
  #btnTour,.topbar .icon-btn,.rte-bar button{min-width:44px}
  .rte-bar button{min-height:44px}
  #btnAcct{line-height:42px}
  .sw{width:40px;height:40px}
}
@media (max-width:374px){ .topbar .icon-btn{min-width:40px} .topbar .btn{padding:0 10px} }   /* 360 px: «Datei speichern», Drucken und «Anmelden» bleiben in einer Zeile */