/* ==========================================================================
   Auftragszettel — der Baukasten
   Der Zettel liegt als Papierobjekt auf der Werkbank. Alles Bedienbare
   ordnet sich ihm unter: dunkle Leisten oben und unten, Kupfer nur dort,
   wo etwas passiert.
   ========================================================================== */

body{
  min-height:100dvh;
  background-color:var(--night);
  background-image:
    linear-gradient(to right, rgba(67,166,151,.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(67,166,151,.04) 1px, transparent 1px),
    radial-gradient(1100px 520px at 84% -6%, rgba(210,101,44,.13), transparent 62%),
    radial-gradient(900px 640px at -10% 104%, rgba(23,59,71,.65), transparent 60%);
  background-size:34px 34px, 34px 34px, auto, auto;
  background-attachment:fixed;
}

/* ---------- Kopfleiste ---------- */
.topbar{
  position:sticky;top:0;z-index:30;
  background:rgba(10,26,33,.82);
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  border-bottom:1px solid var(--night-3);
  padding-top:env(safe-area-inset-top);
}
.topbar-inner{
  max-width:760px;margin:0 auto;
  display:flex;align-items:center;gap:12px;
  padding:12px clamp(14px,3vw,18px);
}
.topbar-brand{display:flex;align-items:center;gap:11px;min-width:0;flex:1}
.brand-mark{
  flex:none;width:32px;height:32px;border-radius:9px;
  background:linear-gradient(158deg,var(--copper-hi),var(--copper-dp));
  color:#fff;font-family:var(--display);font-weight:700;font-size:15px;
  display:grid;place-items:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3);
  overflow:hidden;
}
.brand-mark img{width:100%;height:100%;object-fit:contain;display:block;background:#fff;padding:3px}
.brand-name{
  color:var(--night-text);font-family:var(--label);font-weight:600;
  font-size:16px;letter-spacing:.005em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ---------- Bühne ---------- */
.view{
  max-width:760px;margin:0 auto;
  padding:12px clamp(10px,2.5vw,16px) calc(126px + env(safe-area-inset-bottom));
}

/* ---------- Werkzeugleiste: Vorlagen und Design ---------- */
.dockbar{display:flex;justify-content:flex-end;gap:8px;margin:4px 2px 12px}
.dock-chip{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--night-3);border-radius:999px;
  background:rgba(15,40,49,.6);color:var(--night-text);cursor:pointer;
  font-family:var(--label);font-weight:600;font-size:14.5px;letter-spacing:.01em;
  padding:11px 17px;min-height:44px;
  transition:border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease), transform .15s var(--ease);
}
.dock-chip:hover{border-color:var(--patina);color:#fff}
.dock-chip:active{transform:scale(.97)}
.dock-chip[aria-expanded="true"]{
  border-color:var(--copper);color:#fff;
  background:linear-gradient(168deg,rgba(210,101,44,.28),rgba(210,101,44,.12));
}
.dockpanel{
  background:linear-gradient(168deg,rgba(23,59,71,.62),rgba(15,40,49,.5));
  border:1px solid var(--night-3);border-radius:var(--r-lg);
  padding:20px;margin-bottom:14px;color:var(--night-text);
  box-shadow:var(--lift-2);
  animation:panel-in .32s var(--ease) both;
}
@keyframes panel-in{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:none}
}
.dp-title{
  margin:0 0 12px;font-family:var(--label);font-weight:600;font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--patina);
}
.dp-title:not(:first-child){margin-top:24px}
.dp-row{display:flex;flex-wrap:wrap;gap:9px}
.dp-toggle{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:42px;margin-top:6px}
.dp-toggle span{font-size:15.5px;color:var(--night-text)}
.dp-hint{font-size:13.5px;color:var(--night-mute);margin:14px 0 0;line-height:1.55}
.dp-input{
  flex:1;min-width:0;border:1px solid var(--night-3);border-radius:12px;
  background:rgba(4,14,18,.4);color:#fff;font:inherit;font-size:15.5px;
  padding:12px 14px;
  transition:border-color .2s var(--ease), background-color .2s var(--ease);
}
.dp-input::placeholder{color:var(--night-mute)}
.dp-input:focus{outline:none;border-color:var(--patina);background:rgba(4,14,18,.6)}
.dp-btn{
  border:0;border-radius:12px;cursor:pointer;
  background:linear-gradient(160deg,var(--copper-hi),var(--copper) 60%,var(--copper-dp));color:#fff;
  font-family:var(--label);font-weight:600;font-size:15px;
  padding:12px 17px;white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .15s var(--ease), box-shadow .2s var(--ease);
}
.dp-btn:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 6px 16px rgba(210,101,44,.32)}
.dp-btn:active{transform:scale(.97)}
.dp-btn:disabled{opacity:.5;cursor:default}

.font-chip{
  border:1px solid var(--rule-2);border-radius:12px;background:var(--paper);
  color:var(--ink);cursor:pointer;padding:11px 15px;font-size:15px;
  transition:border-color .18s var(--ease), background-color .18s var(--ease), transform .15s var(--ease);
}
.font-chip:active{transform:scale(.97)}
.font-chip.active{border-color:var(--copper);background:var(--copper-tint);box-shadow:0 0 0 1px var(--copper)}
.swatch{
  width:38px;height:38px;border-radius:50%;cursor:pointer;
  border:2px solid rgba(255,255,255,.18);padding:0;
  transition:transform .15s var(--ease);
}
.swatch:hover{transform:scale(1.08)}
.swatch.active{outline:2.5px solid #fff;outline-offset:3px}
.stylechip{
  display:inline-flex;align-items:center;gap:9px;
  border:1px solid var(--rule-2);border-radius:12px;background:var(--paper);
  color:var(--ink);cursor:pointer;padding:9px 14px;
  font-family:var(--label);font-weight:600;font-size:14px;
  transition:border-color .18s var(--ease), background-color .18s var(--ease);
}
.stylechip.active{border-color:var(--copper);background:var(--copper-tint);box-shadow:0 0 0 1px var(--copper)}
.stylechip .bnum{width:21px;height:21px;font-size:12px}

.tpl-row{
  display:flex;align-items:center;gap:8px;
  border:1px solid var(--night-3);border-radius:12px;
  padding:6px 6px 6px 14px;margin-bottom:8px;background:rgba(4,14,18,.28);
  transition:border-color .2s var(--ease), background-color .2s var(--ease);
}
.tpl-row:hover{border-color:var(--patina);background:rgba(4,14,18,.42)}
.tpl-name{
  flex:1;min-width:0;font-family:var(--label);font-weight:600;font-size:15.5px;
  color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;
  background:none;border:0;cursor:pointer;padding:10px 0;
}
.tpl-load{
  border:1px solid var(--copper);border-radius:10px;background:transparent;
  color:var(--copper-hi);font-family:var(--label);font-weight:600;font-size:13px;
  letter-spacing:.02em;padding:9px 13px;cursor:pointer;white-space:nowrap;
  transition:background-color .2s var(--ease), color .2s var(--ease);
}
.tpl-load:hover{background:var(--copper);color:#fff}
.tpl-del{
  width:38px;height:38px;border:0;border-radius:10px;background:transparent;
  color:var(--night-mute);font-size:19px;cursor:pointer;flex:none;
  transition:color .18s var(--ease), background-color .18s var(--ease);
}
.tpl-del:hover{color:#ff9a8d;background:rgba(179,54,43,.18)}
.tpl-save{display:flex;gap:8px;margin-top:12px}

/* ---------- Schalter ---------- */
.switch{
  position:relative;flex:none;width:50px;height:30px;border-radius:15px;
  border:0;cursor:pointer;background:var(--rule-2);padding:0;
  transition:background-color .22s var(--ease);
}
.dockpanel .switch{background:#365360}
.switch::after{
  content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);
  transition:transform .22s var(--ease);
}
.switch[aria-checked="true"]{background:var(--copper)}
.switch[aria-checked="true"]::after{transform:translateX(20px)}

/* ---------- Der Zettel ---------- */
.sheet{
  --sf:var(--body);
  background:var(--paper);
  color:var(--ink);
  border-radius:18px;
  box-shadow:var(--sheet-lift);
  padding:clamp(18px,3.6vw,32px);
  animation:sheet-up .4s var(--ease) both;
}
.sheet[data-font="klassisch"]{--sf:Georgia,"Times New Roman",serif}
.sheet[data-font="schreibmaschine"]{--sf:ui-monospace,"Cascadia Mono",Consolas,"Courier New",monospace}
.sheet[data-font="robust"]{--sf:Verdana,Geneva,sans-serif}
.sheet[data-font="schmal"]{--sf:"Barlow Condensed","Arial Narrow",sans-serif;font-size:18px}
@keyframes sheet-up{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}

/* ---------- Briefkopf ---------- */
.lh{position:relative;padding:4px 0 2px}
.lh-controls{position:absolute;top:-6px;right:-6px;display:flex;gap:2px;z-index:2}
.lh-brand{display:flex;align-items:center;gap:8px 14px;padding-right:88px;min-height:44px;flex-wrap:wrap}
.lh-logo{height:44px;width:auto;max-width:min(56vw,210px);object-fit:contain;flex:none}
.lh-ident{min-width:0;flex:1 1 190px}
.lh-name{
  font-family:var(--label);font-weight:600;font-size:20px;letter-spacing:-.005em;
  color:var(--ink);line-height:1.2;overflow-wrap:break-word;
}
.lh-name.placeholder{color:#a9a091;font-weight:400}
.lh-sub{
  margin-top:3px;font-family:var(--label);font-weight:600;font-size:11.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);
  overflow-wrap:break-word;
}
.lh-rule{margin:14px 0 18px;border-top:2px solid var(--ink);position:relative}
.lh-rule::after{
  content:"";position:absolute;left:0;right:0;top:1.5px;
  border-top:1px solid var(--copper);
}
.lh-title-row{display:flex;align-items:flex-end;justify-content:space-between;gap:10px 16px;flex-wrap:wrap}
.lh-meta{display:flex;gap:18px;flex:none;text-align:right;margin-left:auto}
.lh-title{
  border:0;background:transparent;min-width:min(100%,230px);flex:1;
  font-family:var(--display);font-weight:700;
  font-size:clamp(23px,5.4vw,31px);
  letter-spacing:-.02em;text-transform:uppercase;color:var(--ink);
  padding:0 0 2px;border-bottom:2px dashed transparent;border-radius:0;
  transition:border-color .18s var(--ease);
}
.lh-title:hover{border-bottom-color:var(--rule-2)}
.lh-title:focus{outline:none;border-bottom-color:var(--copper)}
.lh-date{font-family:var(--mono);font-size:13.5px;color:var(--ink);display:block;padding:3px 0}
.lh-nr{
  width:96px;border:0;border-bottom:1.5px solid var(--rule-2);
  background:transparent;font-family:var(--mono);font-size:13.5px;color:var(--ink);
  padding:3px 0;border-radius:0;text-align:right;
}
.lh-nr::placeholder{color:#b5ac9c}
.lh-nr:focus{outline:none;border-bottom-color:var(--copper)}
.plabel{
  display:block;font-family:var(--label);font-weight:600;font-size:11px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-2);
}
.lh-project{display:block;margin-top:16px}
.lh-project input{
  width:100%;border:0;border-bottom:1.5px solid var(--rule-2);
  background:transparent;font-family:var(--sf);font-size:18px;font-weight:600;
  padding:9px 2px;color:var(--ink);border-radius:0;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.lh-project input::placeholder{color:#a9a091;font-weight:400}
.lh-project input:focus{outline:none;border-bottom-color:var(--copper);box-shadow:0 1px 0 var(--copper)}

/* ---------- Trennlinie mit Einfügepunkt ---------- */
.insert{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  margin:3px 0;min-height:28px;
}
.insert::before{
  content:"";position:absolute;left:0;right:0;top:14px;border-top:1px solid var(--rule);
}
.insert-btn{
  position:relative;z-index:1;width:28px;height:28px;border-radius:50%;
  border:1px solid var(--rule-2);background:var(--paper);
  color:var(--ink-2);font-size:17px;line-height:1;cursor:pointer;
  display:grid;place-items:center;
  transition:transform .2s var(--ease), color .18s var(--ease), border-color .18s var(--ease), background-color .18s var(--ease);
}
.insert-btn::after{content:"";position:absolute;inset:-11px;border-radius:50%}
.insert-btn:hover{color:var(--copper-dp);border-color:var(--copper);background:var(--copper-tint)}
.insert.open .insert-btn{
  transform:rotate(45deg);border-color:var(--copper);color:#fff;background:var(--copper);
}
.insert-picker{display:none;width:100%;margin:14px 0 6px;flex-direction:column;gap:12px}
.insert.open .insert-picker{display:flex;animation:panel-in .28s var(--ease) both}
.insert-hint{margin:0;font-size:13.5px;color:var(--copper-dp);font-weight:500}
.insert-chips{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
@media (max-width:480px){.insert-chips{grid-template-columns:repeat(2,1fr)}}
.insert-chip{
  border:1px solid var(--rule);border-radius:12px;background:var(--paper-2);
  padding:13px 9px;display:flex;flex-direction:column;align-items:center;gap:7px;
  color:var(--ink);cursor:pointer;
  font-family:var(--label);font-weight:600;font-size:13.5px;letter-spacing:.005em;
  text-align:center;
  transition:border-color .18s var(--ease), background-color .18s var(--ease), transform .15s var(--ease);
}
.insert-chip svg{color:var(--ink-2);transition:color .18s var(--ease)}
.insert-chip:hover{border-color:var(--copper);background:var(--copper-tint);transform:translateY(-2px)}
.insert-chip:hover svg{color:var(--copper-dp)}

/* ---------- Bausteine ---------- */
.block{margin-top:6px;border-radius:12px;container-type:inline-size}
.block.headblock{margin-top:0}
.blockrow{display:grid;grid-template-columns:1fr 1fr;gap:4px 24px;align-items:start}
.blockrow.cols-3{grid-template-columns:1fr 1fr 1fr;gap:4px 16px}
.blockrow > .block{min-width:0}
@media (max-width:560px){
  .blockrow,.blockrow.cols-3{grid-template-columns:1fr;gap:14px}
}
.block.flash{animation:blockflash 1.5s var(--ease)}
@keyframes blockflash{
  0%{background:var(--copper-tint);box-shadow:0 0 0 6px var(--copper-tint)}
  100%{background:transparent;box-shadow:none}
}
.sheet-empty{text-align:center;color:var(--ink-2);font-size:15px;margin:22px 0 6px}

.bhead{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.bnum{
  flex:none;width:24px;height:24px;border-radius:7px;
  background:linear-gradient(158deg,var(--copper-hi),var(--copper-dp));
  color:#fff;font-family:var(--label);font-weight:600;font-size:12.5px;
  display:grid;place-items:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
}
.sheet[data-accent-style="rund"] .bnum{border-radius:50%}
.sheet[data-accent-style="umrandet"] .bnum{
  background:transparent;border:1.5px solid var(--copper);color:var(--copper-dp);box-shadow:none;
}
.sheet.no-num .bnum{display:none}
.stylechip[data-style="rund"] .bnum{border-radius:50%}
.stylechip[data-style="umrandet"] .bnum{background:transparent;border:1.5px solid var(--copper);color:var(--copper-dp);box-shadow:none}

.btitle-input{
  border:0;background:transparent;
  font-family:var(--label);font-weight:600;font-size:15px;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink);
  padding:3px 0;min-width:44px;max-width:calc(100% - 104px);
  border-bottom:1.5px dashed transparent;border-radius:0;
  transition:border-color .18s var(--ease);
}
.btitle-input:hover{border-bottom-color:var(--rule-2)}
.btitle-input:focus{outline:none;border-bottom-color:var(--copper)}
.brule{flex:1;height:1px;background:var(--rule);min-width:12px}
/* Auf schmalen Geräten gehört der Platz dem Titel, nicht der Zierlinie */
@media (max-width:480px){
  .brule{display:none}
  .btitle-input{max-width:calc(100% - 90px);letter-spacing:.08em}
  .bhead .bconf{margin-left:auto}
}
.bconf,.bremove{
  flex:none;width:38px;height:38px;border:0;border-radius:10px;
  background:transparent;color:#b7ae9e;cursor:pointer;
  display:grid;place-items:center;font-size:20px;line-height:1;
  transition:background-color .16s var(--ease), color .16s var(--ease);
}
.bconf:hover{color:var(--copper-dp);background:var(--copper-tint)}
.bconf.open{color:#fff;background:var(--copper)}
.bremove:hover{color:var(--danger);background:rgba(179,54,43,.1)}

/* ---------- Einstellungen je Baustein ---------- */
.bopts{
  background:var(--paper-2);border:1px solid var(--rule);border-radius:14px;
  padding:14px 16px;margin:0 0 14px;display:grid;gap:12px;
  animation:panel-in .26s var(--ease) both;
}
.opt-row{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:36px;flex-wrap:wrap}
.opt-label{
  font-family:var(--label);font-weight:600;font-size:11.5px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2);
}
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg-btn{
  border:1px solid var(--rule-2);border-radius:10px;background:var(--paper);
  padding:9px 13px;min-height:40px;cursor:pointer;color:var(--ink);
  font-family:var(--label);font-weight:600;font-size:14px;
  transition:border-color .16s var(--ease), background-color .16s var(--ease), color .16s var(--ease);
}
.seg-btn:hover{border-color:var(--copper)}
.seg-btn.active{border-color:var(--copper);background:var(--copper-tint);color:var(--copper-dp);box-shadow:0 0 0 1px var(--copper)}
.opt-field{display:block}
.opt-field span{
  display:block;font-family:var(--label);font-weight:600;font-size:11px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2);margin-bottom:2px;
}
.opt-field input{
  width:100%;border:0;border-bottom:1.5px solid var(--rule-2);
  background:transparent;font:inherit;font-size:16px;padding:8px 1px;color:var(--ink);border-radius:0;
}
.opt-field input:focus{outline:none;border-bottom-color:var(--copper)}
.opt-move{
  width:50px;height:40px;border:1px solid var(--rule-2);border-radius:10px;
  background:var(--paper);color:var(--ink-2);cursor:pointer;
  display:inline-grid;place-items:center;
  transition:border-color .16s var(--ease), background-color .16s var(--ease), color .16s var(--ease);
}
.opt-move:hover:not(:disabled){border-color:var(--copper);color:var(--copper-dp);background:var(--copper-tint)}
.opt-move:disabled{opacity:.3;cursor:default}
.logo-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.logo-preview{width:46px;height:46px;object-fit:contain;border:1px solid var(--rule-2);border-radius:10px;background:#fff}
.optlist{display:grid;gap:9px}
.optlist-row{display:flex;gap:8px;align-items:center}
.optlist-row input{
  flex:1;min-width:0;border:0;border-bottom:1.5px solid var(--rule-2);
  background:transparent;font:inherit;font-size:15.5px;padding:9px 2px;color:var(--ink);border-radius:0;
}
.optlist-row input:focus{outline:none;border-bottom-color:var(--copper)}
.optlist .btn.small{justify-self:start}

/* ---------- Felder ---------- */
.grid2{display:grid;grid-template-columns:1fr;gap:15px}
.grid2 .wide{grid-column:1 / -1}
@container (min-width:460px){
  .grid2{grid-template-columns:1fr 1fr}
}
.field span{
  display:block;font-family:var(--label);font-weight:600;font-size:11px;
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink-2);margin-bottom:3px;
}
.field input{
  width:100%;border:0;border-bottom:1.5px solid var(--rule-2);
  background:transparent;font-family:var(--sf);font-size:17px;padding:10px 2px;color:var(--ink);border-radius:0;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field input::placeholder{color:#aaa192}
.field input:focus{outline:none;border-bottom-color:var(--copper);box-shadow:0 1px 0 var(--copper)}

textarea.ruled,textarea.plain{
  width:100%;border:0;border-bottom:1.5px solid var(--rule-2);
  background-color:transparent;font-family:var(--sf);font-size:17px;
  padding:0 2px 6px;color:var(--ink);
  min-height:100px;resize:none;overflow:hidden;border-radius:0;
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
textarea.ruled{
  background-image:repeating-linear-gradient(to bottom, transparent 0 31px, var(--rule) 31px 32px);
  background-attachment:local;line-height:32px;
}
textarea.plain{line-height:1.6;padding-top:6px}
textarea.big{font-size:20px}
textarea.ruled::placeholder,textarea.plain::placeholder{color:#aaa192}
textarea.ruled:focus,textarea.plain:focus{outline:none;border-bottom-color:var(--copper);box-shadow:0 1px 0 var(--copper)}
.mic-hint{
  display:flex;align-items:center;gap:9px;
  margin-top:12px;padding:10px 12px;border-radius:10px;
  background:var(--paper-2);
  font-size:13.5px;color:var(--ink-2);
}
.mic-hint svg{flex:none;color:var(--copper)}
.mic-hint button{
  margin-left:auto;border:0;background:none;color:var(--ink-2);
  font-size:13px;cursor:pointer;padding:6px;text-decoration:underline;font-family:inherit;
}
.mic-hint button:hover{color:var(--copper-dp)}

/* ---------- Listen ---------- */
ul.rows{list-style:none;margin:0;padding:0}
.row{
  display:flex;align-items:center;gap:10px;
  border-bottom:1px solid var(--rule);padding:2px 0;min-height:46px;
  transition:border-color .18s var(--ease);
}
.row:focus-within{border-bottom-color:var(--copper)}
.rowtext{
  flex:1;min-width:0;border:0;background:transparent;font-family:var(--sf);font-size:17px;
  padding:11px 2px;color:var(--ink);border-radius:0;
}
.rowtext::placeholder{color:#aaa192}
.rowtext:focus{outline:none}
.qty{
  flex:none;width:70px;border:0;border-right:1px solid var(--rule);
  background:transparent;font-family:var(--mono);font-size:15.5px;
  padding:11px 8px 11px 2px;color:var(--ink);text-align:right;border-radius:0;
}
.qty::placeholder{color:#aaa192;font-family:var(--body)}
.qty:focus{outline:none}
.unit{
  flex:none;width:60px;border:0;border-right:1px solid var(--rule);
  background:transparent;font-family:var(--sf);font-size:15px;
  padding:11px 6px 11px 2px;color:var(--ink);border-radius:0;
}
.unit::placeholder{color:#aaa192}
.unit:focus{outline:none}
.orderno{
  flex:none;width:96px;border:0;border-left:1px solid var(--rule);
  background:transparent;font-family:var(--mono);font-size:13px;
  padding:11px 2px 11px 9px;color:var(--ink-2);border-radius:0;
}
.orderno::placeholder{color:#b5ac9c;font-family:var(--body)}
.orderno:focus{outline:none;color:var(--ink)}
@media (max-width:480px){
  .orderno{width:68px}
  .unit{width:46px}
  .row .qty{width:50px;padding-right:5px}
  .rowdel{width:32px}
}
.checkbox{
  flex:none;width:30px;height:30px;border-radius:9px;
  border:1.5px solid var(--ink);background:transparent;cursor:pointer;
  display:grid;place-items:center;padding:0;
  transition:background-color .16s var(--ease), border-color .16s var(--ease), transform .12s var(--ease);
}
.checkbox:active{transform:scale(.92)}
.checkbox svg{opacity:0;transform:scale(.6);transition:all .16s var(--ease);color:#fff}
.checkbox[aria-checked="true"]{background:var(--copper);border-color:var(--copper)}
.checkbox[aria-checked="true"] svg{opacity:1;transform:scale(1)}
.bullet{flex:none;width:30px;height:30px;display:grid;place-items:center}
.bullet::after{content:"";width:9px;height:9px;border-radius:50%;background:var(--copper)}
.row.done .rowtext{color:var(--ink-2);text-decoration:line-through;text-decoration-color:rgba(87,104,110,.55)}
.rowdel{
  flex:none;width:40px;height:40px;border:0;border-radius:10px;
  background:transparent;color:#b7ae9e;font-size:22px;line-height:1;cursor:pointer;
  transition:color .16s var(--ease), background-color .16s var(--ease);
}
.rowdel:hover{color:var(--danger);background:rgba(179,54,43,.1)}
.addrow{
  margin-top:13px;width:100%;
  border:1.5px dashed var(--rule-2);border-radius:12px;
  background:transparent;color:var(--ink-2);
  font-family:var(--label);font-weight:600;font-size:15.5px;
  padding:14px;cursor:pointer;
  transition:border-color .18s var(--ease), color .18s var(--ease), background-color .18s var(--ease);
}
.addrow:hover{border-color:var(--copper);color:var(--copper-dp);background:var(--copper-tint)}
.empty-note{color:var(--ink-2);font-size:14.5px;margin:4px 0 0;font-style:italic}

/* ---------- Auswahl und Fragen ---------- */
.pickrow{display:flex;flex-wrap:wrap;gap:9px}
.pick{
  border:1px solid var(--rule-2);border-radius:12px;background:var(--paper);
  padding:12px 17px;min-height:48px;cursor:pointer;color:var(--ink);
  font-family:var(--label);font-weight:600;font-size:15.5px;
  transition:border-color .16s var(--ease), background-color .16s var(--ease), color .16s var(--ease), transform .12s var(--ease);
}
.pick:hover{border-color:var(--copper)}
.pick:active{transform:scale(.97)}
.pick.active{border-color:var(--copper);background:var(--copper-tint);color:var(--copper-dp);box-shadow:0 0 0 1px var(--copper)}
.pick.small{padding:9px 14px;min-height:42px;font-size:14.5px}

.qrow{border-bottom:1px solid var(--rule);padding:11px 0 13px}
.qrow:last-of-type{border-bottom:0}
.qtop{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.qtext{
  flex:1;min-width:150px;border:0;background:transparent;
  font-family:var(--sf);font-size:16.5px;color:var(--ink);
  padding:9px 2px;border-radius:0;border-bottom:1.5px dashed transparent;
  transition:border-color .16s var(--ease);
}
.qtext:hover{border-bottom-color:var(--rule)}
.qtext::placeholder{color:#aaa192}
.qtext:focus{outline:none;border-bottom-color:var(--copper)}
.qchips{display:flex;gap:7px;flex:none;margin-left:auto}
.qnote{
  width:100%;border:0;border-bottom:1px dashed var(--rule);
  background:transparent;font-family:var(--sf);font-size:14px;color:var(--ink);
  padding:8px 2px;margin-top:5px;border-radius:0;
}
.qnote::placeholder{color:#bbb2a3}
.qnote:focus{outline:none;border-bottom-color:var(--copper)}

/* ---------- Arbeitszeit ---------- */
.wt-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
@container (min-width:460px){.wt-grid{grid-template-columns:repeat(4,1fr)}}
.wt-checks{margin-top:10px}
.wt-label{flex:1;min-width:0;font-size:15.5px;padding:11px 0;color:var(--ink)}

/* ---------- Fotos ---------- */
.photogrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.photo{position:relative;margin:0;min-width:0}
.photo img{
  width:100%;aspect-ratio:1;object-fit:cover;display:block;
  border-radius:10px;border:1px solid var(--rule-2);
}
.photodel{
  position:absolute;top:7px;right:7px;width:30px;height:30px;
  border:0;border-radius:50%;background:rgba(10,26,33,.82);color:#fff;
  font-size:17px;line-height:1;cursor:pointer;display:grid;place-items:center;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:background-color .16s var(--ease);
}
.photodel:hover{background:var(--danger)}
.photo .caption{
  width:100%;border:0;border-bottom:1px solid var(--rule);
  background:transparent;font-family:var(--sf);font-size:13px;color:var(--ink);
  padding:7px 1px;border-radius:0;
}
.photo .caption::placeholder{color:#bbb2a3}
.photo .caption:focus{outline:none;border-bottom-color:var(--copper)}
.photoadd{
  aspect-ratio:1;border:1.5px dashed var(--rule-2);border-radius:10px;
  background:transparent;color:var(--ink-2);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  font-family:var(--label);font-weight:600;font-size:14.5px;
  transition:border-color .18s var(--ease), color .18s var(--ease), background-color .18s var(--ease);
}
.photoadd:hover{border-color:var(--copper);color:var(--copper-dp);background:var(--copper-tint)}

/* ---------- Unterschrift ---------- */
.sigwrap{position:relative}
.sigpad{
  width:100%;height:150px;display:block;background:#fff;
  border:1.5px dashed var(--rule-2);border-radius:12px;touch-action:none;
  transition:border-color .18s var(--ease);
}
.sigwrap:hover .sigpad{border-color:var(--copper)}
.sigwrap::after{
  content:"";position:absolute;left:8%;right:8%;bottom:34px;height:0;
  border-bottom:1px solid var(--rule-2);pointer-events:none;
}
.sigx{position:absolute;left:8%;bottom:40px;color:var(--rule-2);font-size:18px;pointer-events:none}
.sighint{
  position:absolute;inset:0;display:grid;place-items:center;
  color:#b5ac9c;pointer-events:none;font-size:15px;
}
.sigclear{
  position:absolute;top:9px;right:9px;
  border:0;border-radius:9px;background:var(--paper-2);color:var(--ink-2);
  font-size:13.5px;padding:9px 11px;cursor:pointer;font-family:inherit;
}
.sigclear:hover{background:var(--copper-tint);color:var(--copper-dp)}
.sigmeta{display:grid;grid-template-columns:1fr auto;gap:14px;margin-top:15px;align-items:end}
.dateval{padding:10px 2px;font-size:15px}
.sig-legal{margin:11px 0 0;font-size:12.5px;color:var(--ink-2);line-height:1.5}

.savestate{margin:18px 0 0;text-align:center;font-size:12px;color:#b5ac9c;letter-spacing:.04em}

/* ---------- Aktionsleiste ---------- */
.actionbar{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  background:linear-gradient(180deg, rgba(10,26,33,.7), rgba(7,20,26,.97));
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);
  border-top:1px solid var(--night-3);
  padding:12px clamp(10px,2.5vw,16px) calc(12px + env(safe-area-inset-bottom));
}
.actionbar-inner{max-width:760px;margin:0 auto;display:flex;gap:10px}
.btn{
  border:0;border-radius:14px;cursor:pointer;
  font-family:var(--label);font-weight:600;font-size:16.5px;letter-spacing:.005em;
  padding:16px 20px;min-height:56px;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  -webkit-tap-highlight-color:transparent;white-space:nowrap;
  transition:transform .14s var(--ease), box-shadow .22s var(--ease),
             background-color .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease), opacity .2s var(--ease);
}
.btn:active{transform:scale(.97)}
.btn.primary{
  flex:1;
  background:linear-gradient(160deg,var(--copper-hi),var(--copper) 58%,var(--copper-dp));
  color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 6px 18px rgba(210,101,44,.28);
}
.btn.primary:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.34), 0 10px 26px rgba(210,101,44,.38)}
.btn.ghost{
  flex:none;background:rgba(15,40,49,.5);color:var(--night-text);
  border:1px solid var(--night-3);padding:16px 15px;
}
.btn.ghost:hover{border-color:var(--patina);color:#fff}
.btn.square{
  flex:none;width:58px;padding:0;align-self:stretch;
  background:rgba(15,40,49,.5);color:var(--night-text);border:1px solid var(--night-3);
}
.btn.square:hover{border-color:var(--patina);color:#fff}
.btn.small{
  font-size:14.5px;padding:10px 14px;min-height:42px;border-radius:10px;
  background:var(--copper-tint);color:var(--copper-dp);
}
.btn.small:hover{background:var(--copper);color:#fff}
.btn.ghost2{background:transparent;color:var(--ink-2);border:1px solid var(--rule-2)}
.btn.ghost2:hover{border-color:var(--danger);color:var(--danger)}
.btn:disabled{opacity:.5;cursor:default}
@media (max-width:430px){
  .btn{font-size:16px}
  .btn.ghost{padding:16px 12px}
  .btn.square{width:52px}
  .btn.primary{padding:16px 10px}
  .btn.primary svg{display:none}
}
@media (max-width:360px){
  .actionbar-inner{gap:8px}
  .btn.ghost svg{display:none}
  .btn.ghost{padding:15px 11px}
  .btn.square{width:48px}
  .btn.primary{padding:16px 8px}
}

/* ---------- Hinweis ---------- */
.toast{
  position:fixed;left:50%;bottom:calc(100px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(10px);
  background:rgba(15,40,49,.96);color:#fff;
  border:1px solid var(--night-3);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  padding:13px 20px;border-radius:999px;font-size:14.5px;
  box-shadow:var(--lift-2);
  opacity:0;pointer-events:none;
  transition:opacity .25s var(--ease), transform .25s var(--ease);
  z-index:40;max-width:88vw;text-align:center;
}
.toast.show{opacity:1;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.toast-action{
  margin-left:15px;border:0;background:none;cursor:pointer;
  color:var(--copper-hi);font-family:var(--label);font-weight:600;
  font-size:14px;letter-spacing:.06em;text-transform:uppercase;padding:4px 2px;
}
.toast-action:hover{color:#fff}

/* ---------- Drucken ---------- */
@media print{
  .topbar,.actionbar,.toast,.dockbar,.dockpanel,.insert,.bconf,.bremove,.lh-controls,
  .addrow,.rowdel,.photodel,.photoadd,.sigclear,.mic-hint,.savestate,.sighint,.sigx,.bopts{display:none !important}
  body{background:#fff}
  .sheet{box-shadow:none;border-radius:0}
}