@font-face { font-family: "Montserrat"; src: url("/static/Montserrat-Regular.ttf"); font-weight: 400; }
@font-face { font-family: "Montserrat"; src: url("/static/Montserrat-SemiBold.ttf"); font-weight: 600; }
@font-face { font-family: "Montserrat"; src: url("/static/Montserrat-Bold.ttf"); font-weight: 700; }
:root {
  --rot: #ea0a2a; --rot-d: #c4001f; --ink: #1c1c1e; --muted: #6b6b70; --line: #e3e3e6;
  --bg: #f3f3f5; --panel: #fff; --ok: #1d8a4a; --warn: #b26b00; --err: #c62020;
  --r: 10px; --top: 56px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 15px/1.45 "Montserrat", -apple-system, system-ui, sans-serif; color: var(--ink); background: var(--bg); -webkit-text-size-adjust: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--rot); }
.muted { color: var(--muted); }
b { font-weight: 700; }

/* Kopf */
.top { position: sticky; top: 0; z-index: 20; height: var(--top); display: flex; align-items: center; gap: 14px; padding: 0 clamp(24px, 4vw, 60px);  /* 30.10.26 Jens: Logo zu nah am linken Rand */
  padding-top: env(safe-area-inset-top); background: #fff; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); font-weight: 600; white-space: nowrap; }
.brand { align-self: stretch; }
.brand .logo { align-self: flex-start; height: calc(var(--top) - 10px); width: auto; display: block; }  /* CSL Behring Wide (Mail an Printec 27.10.26), hängt wie im alten Printtool an der Oberkante */
.crumb { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px; }
.chip { display: inline-block; font-size: 12px; font-weight: 600; color: var(--rot); background: #fdecec; border-radius: 99px; padding: 1px 9px; }
.actions { display: flex; gap: 8px; }
button { cursor: pointer; border-radius: 8px; border: 1px solid var(--line); background: #fff; padding: 8px 14px; font-weight: 600; font-size: 14px; }
button.primary { background: var(--rot); border-color: var(--rot); color: #fff; }
button.primary:hover { background: var(--rot-d); }
button.primary:disabled { background: #e8b3b2; border-color: #e8b3b2; cursor: not-allowed; }
button.ghost:hover { background: #f6f6f7; }
button.sm { padding: 4px 10px; font-size: 13px; }
button:disabled { opacity: .45; cursor: default; }

/* Editor-Raster */
.split { display: grid; grid-template-columns: minmax(340px, 430px) 1fr; height: calc(100vh - var(--top)); }
.formcol { overflow-y: auto; background: var(--panel); border-right: 1px solid var(--line); padding: 8px 16px 120px; }
.previewcol { overflow: auto; padding: 14px 18px 60px; position: relative; }
.group { border-bottom: 1px solid var(--line); padding: 12px 0 6px; }
.group h3 { margin: 4px 0 10px; font-size: 16px; display: flex; align-items: baseline; justify-content: space-between; cursor: pointer; }
.group h3 .pg { font-size: 12px; font-weight: 400; color: var(--muted); }
.field { margin: 0 0 14px; border-radius: 8px; transition: background .3s; }
.field.flash { background: #fff4d6; box-shadow: 0 0 0 6px #fff4d6; }
.lbl { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
input[type=text], input[type=url], input[type=date], input[type=time], select, textarea {
  width: 100%; border: 1px solid #cfcfd4; border-radius: 8px; padding: 9px 10px; background: #fff; font-size: 16px; }
textarea { resize: vertical; line-height: 1.4; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--rot); box-shadow: 0 0 0 3px #fbdada; }
.row { display: flex; gap: 8px; align-items: center; }
.row.end { justify-content: flex-end; }
.help { font-size: 12px; color: var(--muted); margin-top: 4px; }
.msg { font-size: 12px; font-weight: 600; margin-top: 4px; }
.field.err input, .field.err textarea, .field.err select { border-color: var(--err); background: #fff6f6; }
.field.err .msg { color: var(--err); }
.field.wrn .msg { color: var(--warn); }
.bausteine { display: grid; gap: 6px; }
.baustein { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; cursor: pointer; }
.baustein input { margin-top: 3px; accent-color: var(--rot); width: 18px; height: 18px; }
.baustein small { display: block; color: var(--muted); font-size: 12px; }
.rows .cells { display: grid; gap: 4px; grid-template-columns: 1fr; flex: 1; }
.rows.table .cells.head { font-size: 11px; font-weight: 600; color: var(--muted); padding: 0 82px 2px 0; }
.rows.repeat .rowline { border: 1px solid var(--line); border-radius: 8px; padding: 6px; }
.rowline { display: flex; gap: 4px; align-items: center; margin-bottom: 4px; }
.rowline input { padding: 7px 8px; font-size: 15px; }
.ctl { display: flex; gap: 2px; }
.ic { width: 26px; height: 30px; padding: 0; border: none; background: transparent; color: var(--muted); font-size: 15px; }
.ic:hover:not(:disabled) { background: #f1f1f3; color: var(--ink); }
.ic.del:hover { color: var(--err); }
.add { margin-top: 4px; }
.img .imgrow { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.img img { width: 96px; height: 72px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
.imgmeta { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.slider { display: grid; grid-template-columns: 110px 1fr; align-items: center; font-size: 13px; }
.slider input { accent-color: var(--rot); }

/* Vorschau */
.ptools { position: sticky; top: -14px; z-index: 5; display: flex; gap: 6px; align-items: center; padding: 8px 0; background: var(--bg); }
.spacer { flex: 1; }
.pstatus { font-size: 12px; color: var(--muted); }
.pstatus.busy::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--rot); margin-right: 6px; animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .2; } }
.pages { display: flex; flex-direction: column; align-items: center; gap: 26px; }
figure.sp { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
figcaption { font-size: 12px; color: var(--muted); }
.spread { display: flex; box-shadow: 0 2px 14px rgba(0,0,0,.13), 0 0 0 1px rgba(0,0,0,.06); background: #fff; }
.page { position: relative; background: #fff; }
.page + .page { border-left: 1px dashed #d0d0d4; }
.page img { width: 100%; height: 100%; display: block; }
.hots { position: absolute; inset: 0; }
.hot { position: absolute; border-radius: 3px; cursor: pointer; transition: background .15s, box-shadow .15s; }
.hot:hover, .hot.on { background: rgba(228,35,31,.06); box-shadow: 0 0 0 1.5px rgba(228,35,31,.55); }
.warnbox { background: #fff; border-radius: var(--r); padding: 8px 12px; margin: 0 auto 14px; max-width: 760px; box-shadow: 0 0 0 1px var(--line); }
.warnbox .w { font-size: 13px; padding: 4px 0; cursor: pointer; }
.warnbox .w.error { color: var(--err); font-weight: 600; }
.warnbox .w.warn { color: var(--warn); }
.hint { text-align: center; font-size: 12px; color: var(--muted); margin-top: 24px; }
.tabbar { display: none; }

/* Dialog, Hinweis */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: grid; place-items: center; z-index: 50; padding: 16px; }
.modal[hidden] { display: none; }
.modal .card { background: #fff; border-radius: 14px; padding: 18px 20px; width: min(440px, 100%); display: grid; gap: 12px; }
.modal h3 { margin: 0; }
.modal label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; }
.toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); background: #1c1c1e; color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 14px; z-index: 60; max-width: 90vw; }
.toast[hidden] { display: none; }

/* Startseite, Aufträge */
.wrap { max-width: 1040px; margin: 0 auto; padding: 24px 18px 80px; }
h1 { font-size: 24px; margin: 6px 0 4px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; margin-top: 18px; }
.tcard { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); text-decoration: none; color: var(--ink); display: flex; flex-direction: column; }
.tcard:hover { box-shadow: 0 0 0 2px var(--rot); }
.tcard .th { background: #ececef; height: 220px; display: grid; place-items: center; padding: 14px; }
.tcard .th img { max-width: 100%; max-height: 192px; box-shadow: 0 2px 10px rgba(0,0,0,.18); background: #fff; }  /* 220 − 2 × 14 Innenabstand: hohe Seiten (A5, A4) passen ins Feld */
.tcard .tx { padding: 12px 14px; display: grid; gap: 2px; }
.tcard .tx small { color: var(--muted); }
table.jobs { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 0 0 1px var(--line); margin-top: 16px; font-size: 14px; }
table.jobs th, table.jobs td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.jobs th { font-size: 12px; color: var(--muted); font-weight: 600; background: #fafafb; }
.st { font-size: 12px; font-weight: 600; border-radius: 99px; padding: 2px 9px; white-space: nowrap; }
.st.wait { background: #fff2d9; color: #8a5300; }
.st.ok { background: #e2f5ea; color: var(--ok); }
.st.no { background: #fde6e6; color: var(--err); }
tr.hl td { background: #fffbea; }


/* Serienbrief (Teilnehmerliste, Blättern in der Vorschau) */
.sbox textarea { tab-size: 6; white-space: pre; overflow-x: auto; line-height: 1.45; }
.slist { margin-top: 6px; }
.shead { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.shead b { color: var(--ink); }
.snames { position: relative; margin: 0; padding: 4px 4px 4px 34px; max-height: 210px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; }
.snames li { padding: 2px 8px 2px 2px; cursor: pointer; border-radius: 5px; }
.snames li:hover { background: #f6f6f7; }
.snames li.on { background: #fdecec; color: var(--rot-d); font-weight: 600; }
.snames li.warn::after { content: " ⚠️"; }
.snames li.error::after { content: " ⛔"; }
.snav { display: inline-flex; align-items: center; gap: 4px; }
.snav[hidden] { display: none; }
.spos { font-size: 13px; font-weight: 600; min-width: 10.5em; text-align: center; white-space: nowrap; }
.tinfo { background: #fff; border-radius: var(--r); padding: 8px 12px; margin: 0 auto 14px; max-width: 760px; box-shadow: 0 0 0 1px var(--line); font-size: 13px; color: var(--muted); }
.tinfo[hidden] { display: none; }

@media (max-width: 900px) {
  :root { --top: 52px; }
  .crumb, #btnReset { display: none; }
  .top { gap: 8px; padding: 0 10px; }
  .actions button { padding: 7px 10px; font-size: 13px; }
  .split { display: block; height: auto; }
  .formcol { border: none; padding-bottom: 110px; }
  .previewcol { padding: 6px 10px 110px; }
  body[data-tab=preview] .formcol, body:not([data-tab=preview]) .previewcol { display: none; }
  body.editor:not([data-tab]) .previewcol { display: none; }
  .tabbar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; background: #fff; border-top: 1px solid var(--line); padding: 6px 10px calc(6px + env(safe-area-inset-bottom)); gap: 8px; }
  .tabbar button { flex: 1; padding: 10px; font-size: 15px; }
  .tabbar button.on { background: var(--ink); border-color: var(--ink); color: #fff; }
  .ptools { top: 0; }
  table.jobs .hide-m { display: none; }
  body.serial .pstatus { display: none; }
  .spos { min-width: 0; }
  .spos .lw { display: none; }
}

/* Bild-Vorgaben und frei platzierte Bilder (29.10.26) */
.presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-bottom: 8px; }
.preset { padding: 4px; display: flex; flex-direction: column; gap: 4px; align-items: stretch; font-size: 12px; font-weight: 600; }
.img .preset img { width: 100%; height: 58px; object-fit: cover; border-radius: 5px; border: 0; }
.preset.on { border-color: var(--rot); box-shadow: 0 0 0 2px var(--rot); color: var(--rot); }
.img .row { margin: 4px 0 8px; }
.hot.drag { cursor: move; touch-action: none; box-shadow: 0 0 0 1.5px rgba(228,35,31,.75); background: rgba(228,35,31,.03); }
.hot.drag .rs { position: absolute; right: -9px; bottom: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--rot);
  border: 2px solid #fff; cursor: nwse-resize; box-shadow: 0 1px 3px rgba(0,0,0,.35); touch-action: none; }
.hot.drag .ghostimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; opacity: 0; pointer-events: none; }
.hot.drag.active .ghostimg { opacity: .9; }
.hot.drag.active { background: rgba(255,255,255,.4); }
.zone { position: absolute; border: 1.5px dashed rgba(0,0,0,.4); border-radius: 2px; pointer-events: none; opacity: 0; transition: opacity .15s; }
.zone.on { opacity: 1; }

/* Korrektur durch die Freigabe */
.kchip { background: #fff2d9; color: #8a5300; }
.kinfo { background: #fff8e6; border: 1px solid #f1d9a0; border-radius: 8px; padding: 8px 12px; margin: 0 auto 14px; max-width: 760px; font-size: 13px; line-height: 1.45; }
.klog { margin: 4px 0 0; padding-left: 16px; font-size: 12px; color: #6b5a2e; }
.klog li { margin: 1px 0; }
table.jobs td.act { white-space: nowrap; }
@media (max-width: 600px) {
  table.jobs thead { display: none; }
  table.jobs, table.jobs tbody, table.jobs tr { display: block; }
  table.jobs tr { border-bottom: 1px solid var(--line); padding: 8px 0; }
  table.jobs td { display: block; border: 0; padding: 3px 14px; }
  table.jobs td[data-l]::before { content: attr(data-l) ": "; color: var(--muted); font-size: 12px; }
  table.jobs td.act { white-space: normal; padding-top: 6px; }
  table.jobs td.act button { margin: 6px 4px 0 0; }
  table.jobs td.act br { display: none; }
  table.jobs td.act a + a, table.jobs td.act > a:first-child { display: inline-block; }
}
.actions .m { display: none; }
@media (max-width: 900px) {
  .actions .d { display: none; }
  .actions .m { display: inline; }
  body.korrektur #btnPdf { display: none; }
  .actions button { white-space: nowrap; }
}

/* Startseite im Look des alten Printtools (30.10.26): große hängende Logo-Fahne, Streifen mit schräger Unterkante, rote Titelboxen, grauer Fuß */
.top.home { position: relative; }
.top.home .brand { position: relative; z-index: 25; }
.top.home .brand .logo { height: 104px; }
.top.home .brand span { align-self: center; }
.hero { background: linear-gradient(115deg, #f6f6f7 0%, #e9eaee 55%, #dfe1e6 100%); clip-path: polygon(0 0, 100% 0, 100% 78%, 0 100%); margin-top: -1px; }
.hero-in { max-width: 1040px; margin: 0 auto; padding: 84px 18px 84px 18px; }
h1.welcome { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; font-weight: 400; font-size: 32px; line-height: 1.2; }
h1.welcome span { background: var(--rot); color: #fff; padding: 9px 22px 10px; }
h2.pick { font-size: 22px; font-weight: 600; margin: 4px 0 4px; }
.foot { background: #f8f8f8; border-top: 1px solid #e6e6e6; text-align: center; font-size: 13px; color: var(--muted); padding: 30px 16px calc(30px + env(safe-area-inset-bottom)); }
body:has(.hero) .wrap { padding-bottom: 50px; }
@media (max-width: 900px) {
  .top.home .brand .logo { height: 76px; }
  .hero-in { padding: 60px 16px 56px 18px; }
  h1.welcome { font-size: 22px; gap: 5px; }
  h1.welcome span { padding: 6px 14px 7px; }
}
@media (max-width: 600px) {
  .hero-in { padding: 50px 14px 46px 24px; }
  body:has(.hero) .wrap { padding-left: 24px; padding-right: 24px; }
  h1.welcome { font-size: 19px; }
}

/* Stufe 1 (30.10.26): Menü, Anmeldung, Profil, Verwaltung */
.who { position: relative; }
.who-btn { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px 5px 5px; }
.who-btn .ini { width: 28px; height: 28px; border-radius: 50%; background: var(--rot); color: #fff; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.menu { position: absolute; right: 0; top: calc(100% + 6px); background: #fff; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.18), 0 0 0 1px var(--line); min-width: 250px; padding: 8px; display: grid; gap: 2px; z-index: 40; }
.menu[hidden] { display: none; }
.menu a, .menu button { display: block; text-align: left; padding: 9px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 14px; border: 0; width: 100%; font-weight: 500; }
.menu a:hover, .menu button:hover { background: #f4f4f6; }
.menu .mh { padding: 6px 10px 8px; display: grid; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.menu .mh small { color: var(--muted); font-size: 12px; }
.menu .mb { display: grid; gap: 4px; padding: 4px 10px 8px; font-size: 12px; font-weight: 600; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.menu .mb select { font-size: 14px; padding: 6px 8px; }
.foot a { color: var(--muted); }
.box { background: #fff; border-radius: 14px; box-shadow: 0 0 0 1px var(--line); padding: 18px 20px; display: grid; gap: 12px; }
.box h2 { margin: 0; font-size: 18px; }
.box label { display: grid; gap: 4px; font-size: 13px; font-weight: 600; }
input[type=email], input[type=search], input[type=tel] { width: 100%; border: 1px solid #cfcfd4; border-radius: 8px; padding: 9px 10px; background: #fff; font-size: 16px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grid3 { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; }
.login { max-width: 440px; margin: 0 auto; padding: 36px 18px 60px; display: grid; gap: 16px; }
.login h1 { text-align: center; font-weight: 400; font-size: 30px; }
.codein { font-size: 28px !important; letter-spacing: .35em; text-align: center; font-variant-numeric: tabular-nums; }
.err { color: var(--err); font-size: 13px; font-weight: 600; }
.ok { color: var(--ok); font-size: 13px; font-weight: 600; }
.entwurf { background: #fff2d9; border: 1px solid #f1d9a0; border-radius: 8px; padding: 8px 12px; }
.doc { max-width: 820px; } .doc h1 { margin-top: 10px; } .doc h2 { font-size: 17px; margin: 22px 0 6px; } .doc p, .doc li { line-height: 1.55; }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0; }
.tabs button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.st.gray { background: #ececef; color: var(--muted); }
.aend { margin: 4px 0 0; padding: 6px 10px; background: #f3f8ff; border-radius: 8px; font-size: 12px; }
.aend ul { margin: 2px 0 0; padding-left: 16px; }
.neu { font-size: 11px; font-weight: 700; color: #8a5300; background: #fff2d9; border-radius: 99px; padding: 1px 7px; }
.fuerbox { background: #f6f6f8; border-radius: 10px; padding: 10px 12px; margin: 10px 0 4px; display: grid; gap: 6px; }
.fuerbox .lbl { margin: 0; }
.adr { display: grid; gap: 8px; }
.adr[hidden] { display: none; }
.tcard.locked { opacity: .55; pointer-events: none; }
.small { font-size: 12px; }
table.adm td, table.adm th { font-size: 13px; }
table.adm select { font-size: 13px; padding: 4px 6px; width: auto; }
.chips { display: flex; flex-wrap: wrap; gap: 4px; }
@media (max-width: 900px) { .who-btn .d { display: none; } .grid2 { grid-template-columns: 1fr; } }
.modal .card { max-height: 92vh; overflow-y: auto; }
[hidden] { display: none !important; }
.modal label.row { display: flex; gap: 8px; align-items: center; font-weight: 500; }
.modal label.row input { width: auto; margin: 0; accent-color: var(--rot); }
table.jobs td:first-child { white-space: nowrap; }
@media (max-width: 600px) { body.editor .who { display: none; } }
@media (max-width: 600px) { body.editor .top { padding-right: 10px; } body.editor .actions { gap: 5px; } body.editor .actions button { padding: 7px 8px; } }