@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/pt-sans-regular.ttf) format('truetype');
}
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/pt-sans-bold.ttf) format('truetype');
}
@font-face {
  font-family: 'PT Sans Caption';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(assets/pt-sans-caption-regular.ttf) format('truetype');
}
@font-face {
  font-family: 'PT Sans Caption';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(assets/pt-sans-caption-bold.ttf) format('truetype');
}

:root{--pink:#CF2644;--ink:#2B2B2A;--muted:#6f7077;--line:#e5e5e7;--paper:#f7f7f8;--soft:#FAE9EC;font-family:'PT Sans',Arial,sans-serif;color:var(--ink);font-size:16px}*{box-sizing:border-box}body{margin:0;background:var(--paper)}button,input,select,textarea{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--pink);outline-offset:4px}button:disabled{cursor:wait;opacity:.5}.initial{padding:12vh 8vw;font-size:60px;font-weight:bold;letter-spacing:-3px}.initial span{display:block;font-size:16px;font-weight:normal;letter-spacing:0;margin-top:20px}.shell{display:grid;grid-template-columns:248px 1fr;min-height:100vh}.sidebar{background:white;border-right:1px solid var(--line);padding:34px 24px;display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;width:248px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#d4d4d8 transparent}
/* Die Leiste wird laenger als der Bildschirm, sobald ein paar Bereiche mehr
   dazukommen. Dann scrollt sie fuer sich - der Balken bleibt schmal und
   faellt erst auf, wenn er gebraucht wird. */
.sidebar::-webkit-scrollbar{width:8px}
.sidebar::-webkit-scrollbar-thumb{background:#d4d4d8;border-radius:4px;border:2px solid #fff}
.sidebar:hover::-webkit-scrollbar-thumb{background:#bdbdc4}
.sidebar::-webkit-scrollbar-track{background:transparent}
/* Die Marke bleibt oben stehen; alles andere wandert mit - sonst frisst der
   Fuss den Platz, den die Bereiche brauchen. */
.sidebar .brand{position:sticky;top:-34px;background:#fff;padding-top:2px;z-index:1}.brand{text-decoration:none;font-size:32px;line-height:.9;font-weight:700;letter-spacing:-1.8px;display:block}.brand small{font-size:12px;display:block;font-weight:normal;letter-spacing:.3px;margin-bottom:8px}.brand .brand-dot{color:var(--pink)}.portal-label{font:12px 'PT Sans Caption',sans-serif;letter-spacing:1.5px;text-transform:uppercase;margin:24px 0 38px;color:var(--muted)}nav{display:flex;flex-direction:column;gap:7px}.nav-item{display:flex;align-items:center;gap:12px;border:0;background:none;padding:14px 13px;border-radius:7px;text-align:left;color:#69696e;font-size:14px}.nav-item.active{background:var(--soft);color:var(--pink);font-weight:700}.nav-item:hover{background:#f5f5f6}.nav-item svg{width:19px;height:19px}.nav-item b{margin-left:auto;font-size:12px;border-radius:4px;background:white;padding:3px 6px}.sidebar-bottom{margin-top:auto;padding-top:28px}.mini-contact{padding:20px 12px;border-top:1px solid var(--line)}.mini-contact p{font-size:14px;line-height:1.6;margin:0 0 10px;color:var(--muted)}.mini-contact a{font-size:14px;text-decoration:none;font-weight:bold}.account{display:flex;gap:10px;align-items:center;padding:20px 0 0;border-top:1px solid var(--line)}.avatar{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#eeeef0;font-size:12px;flex-shrink:0}.account strong{font-size:14px;display:block}.account small{font-size:12px;color:var(--muted)}.icon-button{border:0;background:transparent;padding:8px;color:var(--muted);margin-left:auto}.icon-button svg{width:18px;height:18px}.main{grid-column:2;min-width:0}.topbar{height:84px;display:flex;align-items:center;justify-content:space-between;padding:0 46px;border-bottom:1px solid var(--line);background:#fff;font-size:14px}.breadcrumb{color:var(--muted)}.breadcrumb span{margin:0 12px;color:#bbb}.top-actions{display:flex;gap:22px;align-items:center}.text-link{border:0;background:transparent;display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-size:14px}.text-link svg{width:16px;height:16px}.content{max-width:1440px;margin:auto;padding:42px 46px 24px}.eyebrow{text-transform:uppercase;font:12px 'PT Sans Caption',sans-serif;letter-spacing:1.8px;color:var(--muted);margin:0 0 13px}.title-row{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:30px}h1{font-size:clamp(36px,4vw,56px);letter-spacing:-2.8px;line-height:1.05;margin:0 0 13px;font-weight:700}h1 em{font-style:normal;color:var(--pink)}.intro{color:var(--muted);line-height:1.6;margin:0;font-size:15px}.date{font:12px 'PT Sans Caption',sans-serif;color:var(--muted);white-space:nowrap;padding-bottom:8px}.hero{background:var(--pink);color:white;padding:28px 32px;display:flex;gap:25px;align-items:center;justify-content:space-between;margin-bottom:26px;position:relative;overflow:hidden;border-radius:9px}.hero h2{font-size:29px;letter-spacing:-1px;margin:0 0 10px}.hero p{font-size:14px;margin:0;line-height:1.6;max-width:480px;color:#ffe3ec}.hero .button{background:#fff;color:var(--ink);border-color:white;white-space:nowrap}.button{border:1px solid var(--line);border-radius:6px;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:12px 16px;text-decoration:none;font-size:14px;background:white;color:var(--ink);font-weight:600;line-height:1.3}.button svg{width:17px;height:17px}.button.primary{background:var(--ink);border-color:var(--ink);color:white}.button.pink{background:var(--pink);border-color:var(--pink);color:white}.button:hover{filter:brightness(.95)}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:32px}.metric{background:white;border:1px solid var(--line);border-radius:8px;padding:22px}.metric-head{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:14px}.metric-head svg{width:20px;height:20px}.metric-value{font-size:36px;letter-spacing:-1.5px;font-weight:600;margin:20px 0 10px}.metric-value small{font-size:14px;letter-spacing:0;color:var(--muted);font-weight:normal}.metric-note{font-size:12px;color:var(--muted);margin:12px 0 0;line-height:1.5}.meter{height:4px;background:#f0f0f2;border-radius:4px;overflow:hidden}.meter i{height:100%;display:block;background:var(--pink);width:var(--progress)}.metric-value.managed{font-size:27px;margin-bottom:17px}.columns{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:24px}.panel{background:white;border:1px solid var(--line);border-radius:8px;overflow:hidden}.panel-head{padding:24px;display:flex;justify-content:space-between;gap:12px;align-items:center;border-bottom:1px solid var(--line)}h2{font-size:20px;letter-spacing:-.5px;margin:0}h3{font-size:17px;margin:0 0 10px;letter-spacing:-.3px}.panel-head p{font-size:13px;color:var(--muted);margin:7px 0 0}.count{font-size:12px;background:#f2f2f4;border:1px solid var(--line);padding:3px 7px;border-radius:5px;margin-left:7px;vertical-align:middle}.mail-row{padding:19px 24px;display:flex;gap:13px;align-items:center;border-bottom:1px solid #efeff1}.mail-row:last-child{border-bottom:none}.mail-icon{width:38px;height:38px;display:grid;place-items:center;background:#f6f6f7;border-radius:7px;flex-shrink:0}.mail-icon svg{width:18px;height:18px;color:#777}.mail-info{min-width:0;flex:1}.mail-info strong{font-size:14px;font-weight:600;overflow-wrap:anywhere}.mail-info p{font-size:12px;color:var(--muted);margin:6px 0 0}.status{font-size:12px;background:#eef7f1;color:#31774d;padding:5px 8px;border-radius:4px;white-space:nowrap}.status.neutral{background:#f0f0f2;color:#666}.row-button{border:1px solid var(--line);background:white;padding:8px;border-radius:5px;display:grid;place-items:center}.row-button svg{width:16px;height:16px}.panel-footer{border-top:1px solid var(--line);padding:17px 24px}.panel-footer button{border:0;background:transparent;color:var(--pink);font-size:14px;font-weight:600;padding:0;display:flex;align-items:center;gap:8px}.panel-footer svg{width:15px}.support-card{background:var(--ink);border-radius:8px;color:white;padding:25px;align-self:start}.support-card .eyebrow{color:#aaaab0;margin-bottom:23px;font-size:11px}.support-card h2{font-size:28px;line-height:1.1;letter-spacing:-1px}.support-card h2 span{color:#ff477f}.support-card p{font-size:14px;line-height:1.7;color:#b9b9bf;margin:16px 0 22px}.support-card .button{width:100%;background:transparent;border-color:#555;color:white}.support-person{border-top:1px solid #3a3a3d;padding-top:18px;margin-top:24px;display:flex;align-items:center;gap:10px;font-size:13px}.support-person .avatar{background:var(--pink);color:white;font-size:15px;font-weight:700}.support-person small{display:block;color:#a2a2aa;margin-top:4px;font-size:12px}.foot{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;font-size:12px;color:var(--muted);padding:28px 0 0;margin-top:12px}.foot a{text-decoration:none}.note{font-size:13px;color:var(--muted);line-height:1.6;padding:16px 0}.empty{padding:40px 24px;text-align:center;color:var(--muted);line-height:1.7}.toolbar{display:flex;gap:15px;justify-content:space-between;align-items:center;margin-bottom:22px}.search{padding:12px 15px;border:1px solid var(--line);border-radius:6px;background:white;max-width:330px;width:100%;font-size:14px}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.detail-card{padding:27px;background:white;border:1px solid var(--line);border-radius:8px}.detail-card p{font-size:14px;color:var(--muted);line-height:1.7}.detail-card dl{margin:20px 0 0}.detail-card dl div{display:flex;justify-content:space-between;gap:12px;padding:15px 0;border-top:1px solid var(--line);font-size:14px}.detail-card dd{margin:0;overflow-wrap:anywhere;text-align:right}.detail-card dt{color:var(--muted)}.callout{padding:20px;background:var(--soft);border-radius:7px;font-size:14px;line-height:1.6;margin-top:22px}.loading{padding:60px;text-align:center;color:var(--muted)}dialog{padding:0;border:0;border-radius:12px;max-width:520px;width:calc(100% - 32px);box-shadow:0 24px 100px #0003;color:var(--ink)}dialog::backdrop{background:#17171988;backdrop-filter:blur(3px)}.dialog-head{padding:26px 28px 20px;display:flex;align-items:center;gap:10px}.dialog-head h2{font-size:25px;letter-spacing:-.8px}.dialog-body{padding:0 28px 28px}.dialog-body h3{margin:28px 0 4px;font-size:13px;text-transform:uppercase;letter-spacing:1.4px;color:var(--muted);border-top:1px solid var(--line);padding-top:22px}.dialog-body>p:first-child{font-weight:600;color:var(--ink)}.dialog-body>p{font-size:14px;color:var(--muted);line-height:1.6;margin:0 0 24px}.field{display:block;margin:18px 0;font-size:14px;font-weight:600}.field input,.field select,.field textarea{display:block;width:100%;border:1px solid #d8d8dd;border-radius:6px;padding:12px;margin-top:8px;background:white;font-weight:normal;color:var(--ink)}.field textarea{min-height:130px;resize:vertical}.field small{display:block;font-size:12px;line-height:1.5;color:var(--muted);font-weight:normal;margin-top:7px}.form-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:24px}.error{color:#a40032;font-size:14px;line-height:1.5;background:#fff0f3;padding:12px;border-radius:5px}.error:empty{display:none}.dialog-hinweis{margin:18px 0 0;color:#a40032;font-size:14px;line-height:1.5;background:#fff0f3;padding:12px;border-radius:5px}.dialog-hinweis.gut{color:#1f6a40;background:#eef7f1}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);padding:15px 24px;background:var(--ink);color:white;border-radius:7px;box-shadow:0 5px 30px #0002;z-index:20;max-width:90%;font-size:14px;display:none}#toast.visible{display:block}.login-layout{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}.login-art{background:var(--pink);color:white;padding:55px;display:flex;flex-direction:column;justify-content:space-between}.login-art h1{font-size:clamp(60px,7vw,100px);letter-spacing:-5px;max-width:600px}.login-art p{line-height:1.7;max-width:400px}.login-main{display:grid;place-items:center;padding:40px}.login-box{width:100%;max-width:370px}.login-box h2{font-size:36px;letter-spacing:-1.5px}.login-box>p{color:var(--muted);font-size:14px;line-height:1.6}.login-box .button{width:100%;margin-top:10px}.mobile-brand{display:none}svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media(min-width:1600px){.content{padding-top:55px}.hero{padding:35px}.metrics{margin-bottom:36px}}
@media(max-width:1150px){.shell{grid-template-columns:210px 1fr}.sidebar{width:210px;padding:30px 18px}.content{padding:32px 28px}.topbar{padding:0 28px}.columns{grid-template-columns:1fr}.support-card{display:none}.hero h2{font-size:25px}.metric{padding:18px}.date{display:none}}
@media(max-width:760px){.shell{display:block}.sidebar{position:static;width:auto;padding:18px 20px;border-bottom:1px solid var(--line);border-right:0;overflow-y:visible}.sidebar .brand{position:static}.brand{font-size:26px}.brand small{font-size:10px}.portal-label,.sidebar-bottom{display:none}nav{margin-top:22px;flex-direction:row;overflow-x:auto;gap:3px}.nav-item{padding:10px;font-size:12px;white-space:nowrap}.nav-item svg{width:17px}.nav-item b{display:none}.topbar{height:60px;padding:0 20px}.topbar .breadcrumb{font-size:12px}.top-actions{gap:8px}.top-actions .text-link{font-size:12px}.content{padding:28px 20px}.title-row{margin-bottom:24px}h1{font-size:39px;letter-spacing:-2px}.hero{display:block;padding:24px}.hero .button{margin-top:20px}.metrics{gap:10px;grid-template-columns:1fr 1fr}.metric:last-child{grid-column:span 2}.metric-value{margin:14px 0 10px;font-size:31px}.metric-value.managed{font-size:22px;margin:12px 0}.metric-head{font-size:13px}.panel-head{padding:20px}.mail-row{padding:16px}.mail-row .status{display:none}.panel-head .button{font-size:12px;padding:10px}.panel-head h2{font-size:18px}.detail-grid{grid-template-columns:1fr}.toolbar{align-items:stretch;flex-direction:column}.search{max-width:none}.login-layout{grid-template-columns:1fr}.login-art{padding:30px;min-height:260px}.login-art h1{font-size:52px;letter-spacing:-3px;margin:30px 0 0}.login-art>p{display:none}.login-main{padding:35px 25px}.intro{font-size:14px}.foot{line-height:1.8}.dialog-head{padding:24px 20px 16px}.dialog-body{padding:0 20px 24px}}
@media(prefers-reduced-motion:no-preference){.content{animation:enter .25s ease-out}@keyframes enter{from{opacity:.4;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}}

/* Weisslein brand: original logo and self-hosted PT family. */
h1,h2,h3,h4{font-family:'PT Sans Caption','PT Sans',sans-serif;font-weight:700}
h1{letter-spacing:-1.8px}h2,h3{letter-spacing:-.4px}
.brand{display:block;width:100%;max-width:205px;line-height:1;letter-spacing:normal}
.brand img{display:block;width:100%;height:auto}
.login-art .brand{max-width:300px;background:none;padding:0}
.login-art h1{letter-spacing:-2.8px}
.portal-label,.eyebrow,.date{font-family:'PT Sans Caption',sans-serif}
@media(max-width:760px){.sidebar .brand{max-width:200px}h1{letter-spacing:-1px}.login-art h1{letter-spacing:-1.5px}}

.support-person .avatar svg{width:20px;height:20px}
/* Project workspaces share the existing Weisslein brand tokens. */
.section-heading{display:flex;justify-content:space-between;align-items:center;gap:18px;margin:32px 0 18px}.section-tabs{display:flex;gap:8px;margin-bottom:28px;flex-wrap:wrap}.project-hero .eyebrow{color:#ffe0eb;margin-bottom:14px}.project-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.project-card{padding:26px;background:white;border:1px solid var(--line);border-radius:8px;text-align:left;color:var(--ink);transition:border-color .15s}.project-card:hover{border-color:var(--pink)}.project-card-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:26px}.project-card-top .eyebrow{margin:0;font-size:11px}.project-card h2{font-size:24px;line-height:1.35;overflow-wrap:anywhere}.project-card>p{font-size:14px;color:var(--muted)}.project-progress{display:flex;justify-content:space-between;gap:12px;margin:26px 0 12px;font-size:13px;color:var(--muted)}.project-progress strong{color:var(--ink)}.project-card-foot{margin-top:20px;display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--muted)}.project-card-foot svg{width:20px;height:20px;color:var(--pink)}.pink-status{background:var(--soft);color:#af0035}.back-link{margin-bottom:25px}.project-summary{padding:22px 25px;background:white;border:1px solid var(--line);border-radius:8px;display:flex;align-items:center;gap:30px;flex-wrap:wrap}.project-summary .eyebrow{display:block;font-size:11px;margin-bottom:9px}.project-summary strong{font-size:15px}.summary-actions{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}.requirements{display:flex;flex-direction:column;gap:20px}.requirement-head{padding:23px 24px;display:flex;align-items:center;gap:16px;border-bottom:1px solid var(--line)}.requirement-head>div{flex:1;min-width:0}.requirement-head h2{overflow-wrap:anywhere}.requirement-head p{font-size:14px;line-height:1.6;color:var(--muted);margin:6px 0 0;white-space:pre-wrap}.requirement-number{font-family:'PT Sans Caption',sans-serif;color:var(--pink);font-size:14px;align-self:start;padding-top:3px}.upload-empty{padding:30px 24px;font-size:14px;color:var(--muted);background:#fcfcfd}.requirement-footer{display:flex;justify-content:space-between;align-items:center;gap:15px;flex-wrap:wrap;padding:17px 24px;border-top:1px solid var(--line)}.row-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.uploaded-file{padding:17px 24px;display:flex;align-items:center;gap:15px;border-bottom:1px solid #ededee}.uploaded-file:last-child{border-bottom:0}.file-type{flex-shrink:0;width:43px;height:49px;display:grid;place-items:center;background:var(--soft);border-radius:4px;font-size:11px;font-weight:bold;color:var(--pink)}.file-description{flex:1;min-width:0}.file-description strong{font-size:15px;display:block;overflow-wrap:anywhere}.file-description span,.file-description small{display:block;font-size:12px;color:var(--muted);margin-top:5px;overflow-wrap:anywhere}.file-description p{font-size:14px;line-height:1.5;margin:8px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}.file-actions{display:flex;align-items:center;gap:10px}.file-actions a{text-decoration:none;color:var(--ink)}.archived-file{background:#f4f4f5}.library-group{margin-bottom:22px}.inline-field{margin:0;min-width:240px}.check-field{display:flex;gap:10px;align-items:center;font-size:14px;line-height:1.5;margin:14px 0}.check-field input{width:17px;height:17px;accent-color:var(--pink);flex-shrink:0}.file-picker{border:1px dashed #c9c9ce;padding:20px;border-radius:7px;background:var(--paper)}.file-picker input{border:0;padding:10px 0;background:transparent;font-size:14px;max-width:100%}.module-tags{display:flex;flex-wrap:wrap;gap:7px}.customer-card .section-heading{margin:0 0 10px}.archive-control{border-top:1px solid var(--line);margin-top:25px;padding-top:18px}.user-entry{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;padding:15px;margin:10px 0 20px;border:1px solid var(--line);border-radius:6px;background:white;font-size:14px;text-align:left}.user-entry>span:first-child{overflow-wrap:anywhere}dialog{max-height:90vh;overflow:auto}.callout{white-space:pre-wrap}.project-grid>.empty{grid-column:1/-1}.topbar .breadcrumb{min-width:0;overflow-wrap:anywhere}.project-hero{min-height:150px}
@media(max-width:900px){.project-grid{grid-template-columns:1fr}.project-card-top{margin-bottom:18px}.summary-actions{margin-left:0}.file-actions{flex-wrap:wrap;justify-content:flex-end}.requirement-head{flex-wrap:wrap}.requirement-head .status{margin-left:32px}.project-summary{gap:20px}.uploaded-file{padding:16px;gap:10px}.file-actions .status{display:none}}
@media(max-width:480px){.project-summary{display:block}.project-summary>div{margin:0 0 18px}.project-summary>div:last-child{margin:0}.summary-actions{display:flex}.requirement-head{padding:20px 16px}.requirement-footer{padding:16px}.project-card{padding:20px}.project-card h2{font-size:21px}.section-heading{align-items:start}.project-card-top{align-items:start;flex-wrap:wrap}.title-row h1{overflow-wrap:anywhere}}
/* Internal workspace: same brand, denser collaborative views. */
.work-toolbar{flex-wrap:wrap;gap:12px}.work-toolbar select{padding:12px;border:1px solid var(--line,#dedede);border-radius:7px;background:white;max-width:240px}.work-board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:start}.board-column{background:#f0efed;border-radius:10px;padding:12px;min-height:280px}.board-column-head{display:flex;justify-content:space-between;align-items:center;border-top:4px solid #a6a4a0;padding:14px 3px}.board-column-head h2{font-size:15px;margin:0}.board-column-head.doing{border-color:var(--pink)}.board-column-head.waiting{border-color:#cf901a}.board-column-head.done{border-color:#4e8272}.board-card{display:block;text-align:left;width:100%;background:white;border:1px solid #e3e1de;border-radius:8px;padding:17px;margin-bottom:12px;cursor:pointer;box-shadow:0 2px 6px #00000004}.board-card:hover{border-color:var(--pink)}.board-card small{color:#686560}.board-card h3{font-family:'PT Sans Caption',sans-serif;font-size:16px;line-height:1.4;margin:12px 0 16px}.board-owner{display:inline-block;background:#f9e9f0;padding:4px 8px;border-radius:20px;font-size:12px}.board-card-foot{display:flex;justify-content:space-between;gap:8px;margin-top:20px;font-size:11px;color:#696762}.board-empty{font-size:13px;color:#777;padding:16px 2px}.work-table-wrap{overflow-x:auto;background:white;border:1px solid #e5e2df;border-radius:10px}.work-table{width:100%;border-collapse:collapse;text-align:left;white-space:nowrap}.work-table th{font-size:12px;color:#73716b;background:#f7f6f4;font-weight:400}.work-table th,.work-table td{padding:16px;border-bottom:1px solid #eeece8}.work-table td{font-size:13px}.work-table td:first-child{min-width:190px;white-space:normal}.work-status{display:inline-block;padding:5px 10px;border-radius:5px;font-size:12px;background:#eee}.work-status.doing{background:var(--soft);color:#bd0042}.work-status.waiting{background:#fff0d1;color:#815710}.work-status.done{background:#e2f0e9;color:#31634c}.internal-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:22px;margin-top:28px;align-items:start}.work-comment{padding:20px;border-bottom:1px solid #eee;overflow-wrap:anywhere}.work-comment small{display:block;color:#797570;font-size:12px;margin-top:5px}.work-comment p{white-space:pre-wrap;line-height:1.6;font-size:14px}.work-comment.unread{border-left:3px solid var(--pink);background:#fff9fb}.calendar-wrap{overflow-x:auto}.work-calendar.mit-kw{grid-template-columns:52px repeat(7,minmax(0,1fr));min-width:752px}
.calendar-weekday.kw{color:#9a9aa2}
.calendar-kw{display:flex;align-items:flex-start;justify-content:center;padding:9px 4px;background:#faf9f7;border-right:1px solid #e2dfdb;border-bottom:1px solid #e2dfdb;font-size:12px;color:#8e8b86}
.work-calendar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));min-width:700px;border-left:1px solid #e2dfdb;border-top:1px solid #e2dfdb}.calendar-weekday{padding:12px;text-align:center;background:#f3f1ee;font-size:13px}.calendar-day{min-height:140px;padding:9px;background:white;border-right:1px solid #e2dfdb;border-bottom:1px solid #e2dfdb}.calendar-day>strong{font-size:12px;font-weight:400}.calendar-day.outside{background:#f8f7f5;color:#aaa}.calendar-day.today>strong{background:var(--pink);color:white;padding:4px 7px;border-radius:50%}.calendar-event{display:block;width:100%;border:0;border-left:3px solid var(--pink);background:var(--soft);padding:7px;margin-top:8px;text-align:left;font-size:12px;cursor:pointer;overflow-wrap:anywhere}.calendar-event small{display:block;font-size:10px;color:#806773}.calendar-event.done{border-color:#51836e;background:#eaf3ed}.work-comment .text-link{margin-top:8px}
@media(max-width:1200px){.work-board{grid-template-columns:repeat(2,minmax(0,1fr))}.internal-grid{grid-template-columns:1fr}}
@media(max-width:650px){.work-board{grid-template-columns:1fr}.work-toolbar .search{width:100%;min-width:0}.work-table th,.work-table td{padding:12px}.calendar-day{min-height:110px}}

/* ---- Agenturbereich: Personen, Notizen, Termine, Zuteilung ---- */
.wl-person{display:inline-flex;align-items:center;gap:7px;font-size:14px;white-space:nowrap}
.wl-person i{width:10px;height:10px;border-radius:50%;background:var(--muted);flex:none}
.wl-person.offen{color:var(--muted)}
.wl-person.offen i{background:transparent;border:1px dashed #b5b5bb}
.wl-leer{color:var(--muted)}
.hero-buttons{display:flex;gap:10px;flex-wrap:wrap}
.wl-zeile{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.wl-zeile-3{grid-template-columns:120px 1fr 1fr}
.wl-zeile .field{margin:18px 0 0}

.wl-notiz-spalten{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:10px}
.wl-notiz{background:#fff;border:1px solid var(--line);border-left:3px solid var(--pink);border-radius:8px;padding:16px 18px;margin-bottom:12px}
.wl-notiz.erledigt{opacity:.55;border-left-color:var(--line)}
.wl-notiz-kopf{display:flex;justify-content:space-between;gap:12px;align-items:baseline;flex-wrap:wrap}
.wl-notiz-art{font:11px 'PT Sans Caption',sans-serif;letter-spacing:1.4px;text-transform:uppercase;color:var(--pink)}
.wl-notiz-kopf small{color:var(--muted);font-size:12px}
.wl-notiz p{margin:10px 0 12px;font-size:14px;line-height:1.6;white-space:pre-wrap}
.wl-notiz-fuss{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}

.wl-termin{display:grid;grid-template-columns:110px 1fr auto auto;gap:14px;align-items:center;width:100%;text-align:left;border:0;border-bottom:1px solid #efeff1;background:none;padding:15px 24px}
.wl-termin:last-child{border-bottom:none}
.wl-termin:hover{background:#fafafb}
.wl-termin-zeit{font-family:var(--mono);font-size:12px;color:var(--muted)}
.wl-termin-titel{font-weight:600;font-size:14px}
.wl-termin-rest{font-size:12px;color:var(--muted)}
.wl-termin-leute{display:flex;gap:4px}
.wl-termin-leute i{width:10px;height:10px;border-radius:50%;display:block}
.wl-tag{border:0;background:none;padding:0;font:inherit;color:inherit;cursor:pointer}
.wl-tag:hover{color:var(--pink);text-decoration:underline}
.calendar-event.termin{border-left:3px solid var(--wl-farbe,var(--pink))}

.wl-ablage{background:#fff;border:1px solid var(--line);border-radius:8px;padding:20px 22px;margin-bottom:22px}
.wl-ablage-kopf h2{font-size:18px}
.wl-ablage-kopf p{font-size:13px;color:var(--muted);margin:6px 0 16px}
.wl-ziele{display:flex;gap:10px;flex-wrap:wrap}
.wl-ziel{display:inline-flex;align-items:center;gap:9px;border:1px dashed #c9c9cf;border-radius:999px;padding:10px 16px;font-size:14px;transition:background .12s,border-color .12s}
.wl-ziel i{width:11px;height:11px;border-radius:50%;background:transparent;border:1px dashed #b5b5bb;flex:none}
.wl-ziel.bereit{border-style:solid;border-color:var(--pink);background:var(--soft)}
.wl-offen{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.wl-karte{background:#fff;border:1px solid var(--line);border-radius:8px;padding:16px 18px;cursor:grab;display:grid;gap:5px}
.wl-karte:active{cursor:grabbing}
.wl-karte.zieht{opacity:.4}
.wl-karte small{font-size:12px;color:var(--muted)}
.wl-karte strong{font-size:15px;line-height:1.3}
.wl-karte span{font-size:12px;color:var(--muted)}

.wl-farbwahl{display:flex;gap:10px;margin:6px 0 4px}
.wl-farbe-wahl input{position:absolute;opacity:0;width:0;height:0}
.wl-farbe-wahl span{display:block;width:30px;height:30px;border-radius:50%;border:2px solid transparent;box-shadow:0 0 0 1px var(--line) inset;cursor:pointer}
.wl-farbe-wahl input:checked+span{border-color:var(--ink);box-shadow:0 0 0 2px #fff inset}
.board-card{border-left:3px solid var(--wl-farbe,var(--line))}

@media (max-width:900px){
  .wl-notiz-spalten{grid-template-columns:1fr}
  .wl-zeile{grid-template-columns:1fr}
  .wl-termin{grid-template-columns:1fr;gap:6px;padding:14px 18px}
}

/* Kundensuche mit eigenen Vorschlaegen */
.wl-such{display:block;position:relative}
.wl-vorschlaege{list-style:none;margin:4px 0 0;padding:6px;position:absolute;z-index:5;left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:7px;box-shadow:0 12px 30px #0000001f;max-height:230px;overflow:auto}
.wl-vorschlaege[hidden]{display:none}
.wl-vorschlag{display:block;width:100%;text-align:left;border:0;background:none;padding:10px 12px;border-radius:5px;font-size:14px;font-weight:normal}
.wl-vorschlag:hover,.wl-vorschlag.aktiv{background:var(--soft);color:var(--pink);font-weight:600}

/* Druckablauf */
.wl-druck .panel-head p{font-size:13px;color:var(--muted);margin:6px 0 0}
/* Der Ablauf als Fortschrittsleiste: eine durchgehende Linie, rot bis dorthin,
   wo der Auftrag steht. Die Stufe, auf der er gerade steht, ist gefüllt - sie
   ist erreicht, nicht halb erreicht. Die Beschriftung steht unter der Linie,
   damit die Linie nicht durch die Wörter läuft. --anteil kommt aus dem Markup. */
/* Kein Umbruch: Sobald eine Stufe in die zweite Zeile rutscht, stimmt die
   Rechnung fuer den roten Balken nicht mehr - der geht von gleich breiten
   Spalten in einer Reihe aus. Die Beschriftung darf stattdessen umbrechen. */
.wl-stufen{list-style:none;margin:0;padding:24px 24px 22px;display:flex;gap:0;flex-wrap:nowrap;position:relative}
.wl-stufen::before,.wl-stufen::after{content:'';position:absolute;top:28px;height:4px;border-radius:2px}
.wl-stufen::before{left:30px;width:calc((100% - 48px) * var(--voll,1));background:#e4e4e9}
.wl-stufen::after{left:30px;width:calc((100% - 48px) * var(--anteil,0));background:var(--pink);
 transition:width .35s ease}
.wl-stufen li{flex:1 1 0;min-width:0;position:relative;padding:22px 10px 0 0;font-size:12px;
 line-height:1.4;color:var(--muted);hyphens:auto;overflow-wrap:anywhere}
.wl-stufen li::before{content:'';position:absolute;left:0;top:0;width:12px;height:12px;border-radius:50%;
 border:2px solid #d2d2d8;background:#fff;z-index:1}
.wl-stufen li.fertig{color:var(--ink)}
.wl-stufen li.fertig::before{background:var(--pink);border-color:var(--pink)}
.wl-stufen li.jetzt{color:var(--ink);font-weight:700}
.wl-stufen li.jetzt::before{background:var(--pink);border-color:var(--pink);box-shadow:0 0 0 4px var(--soft)}
.wl-hinweis{display:block;font-size:12px;color:var(--muted);margin:-10px 0 4px;line-height:1.5}
@media (max-width:700px){
 .wl-stufen{flex-direction:column;gap:0;padding:20px 24px}
 .wl-stufen li{padding:0 0 18px 26px;min-width:0}
 .wl-stufen li:last-child{padding-bottom:0}
 .wl-stufen li::before{left:0;top:1px}
 .wl-stufen::before{left:29px;right:auto;top:27px;bottom:26px;width:4px;height:auto;border-radius:2px}
 .wl-stufen::after{left:29px;top:27px;width:4px;height:calc((100% - 53px) * var(--anteil,0));
  transition:height .35s ease}
}

/* Anrufmaske: wird geöffnet, wenn ein Anruf hereinkommt. */
.wl-anruf-liste{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:6px}
.wl-anruf-liste li{padding:8px 12px;border:1px solid var(--linie,#e5e5e7);border-radius:8px;font-size:14px}
.wl-anruf-knoepfe{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--linie,#e5e5e7)}
.wl-anruf-knoepfe .button{flex:1 1 auto}

/* Aufträge: Liste mit Stand-Farben, Leiste zum Ziehen, Übergabe. */
.wl-stand{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono,ui-monospace,monospace);font-size:12px;letter-spacing:.02em;color:var(--ink,#2B2B2A);white-space:nowrap}
.wl-stand::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--wl-stand,#8A8A90);flex:0 0 auto}
.wl-stand-leiste .wl-ziel{--wl-stand:#8A8A90}
.wl-stand-leiste .wl-ziel i{background:var(--wl-stand)}
.wl-stand-leiste .wl-ziel.bereit{border-color:var(--wl-stand);box-shadow:0 0 0 3px color-mix(in srgb,var(--wl-stand) 25%,transparent)}
.wl-auftraege{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.wl-auftrag{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 14px 10px 10px;background:var(--bg,#fff);border:1px solid var(--linie,#e5e5e7);border-left:5px solid var(--wl-stand,#8A8A90);border-radius:10px;transition:box-shadow .12s,transform .12s}
.wl-auftrag:hover{box-shadow:0 2px 10px rgba(0,0,0,.06)}
.wl-auftrag.zieht{opacity:.45}
.wl-auftrag.oben{box-shadow:0 -3px 0 0 var(--red,#CF2644)}
.wl-auftrag.unten{box-shadow:0 3px 0 0 var(--red,#CF2644)}
.wl-auftrag-griff{color:var(--ink-3,#8A8A90);cursor:grab;font-size:14px;letter-spacing:-3px;user-select:none;text-align:center}
.wl-auftrag-kern{appearance:none;background:none;border:none;padding:0;text-align:left;cursor:pointer;min-width:0;font:inherit;color:inherit}
.wl-auftrag-kern small{display:block;font-family:var(--mono,ui-monospace,monospace);font-size:11px;color:var(--ink-3,#8A8A90);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wl-auftrag-kern strong{display:block;font-weight:500;font-size:15.5px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wl-auftrag-kern:hover strong{color:var(--red,#CF2644)}
.wl-auftrag-rechts{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}
.wl-auftrag-aufgaben{font-family:var(--mono,ui-monospace,monospace);font-size:12px;color:var(--ink-3,#8A8A90)}
.wl-stand-knoepfe .button{--wl-stand:#8A8A90;display:inline-flex;align-items:center;gap:8px}
.wl-stand-knoepfe .button i{width:9px;height:9px;border-radius:50%;background:var(--wl-stand);display:inline-block}
.wl-board-stand .board-column-head{border-top:3px solid var(--wl-stand,#8A8A90)}
@media (max-width:720px){
 .wl-auftrag{grid-template-columns:18px minmax(0,1fr)}
 .wl-auftrag-rechts{grid-column:2;justify-content:flex-start}
}
/* Fristen aus Aufträgen tragen die Farbe ihres Standes, Termine die der Person. */
.calendar-event.frist{border-left:3px solid var(--wl-farbe,#8A8A90)}

/* Freigaben am Auftrag. */
.wl-freigaben{display:flex;flex-direction:column;gap:2px}
.wl-freigabe{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--hair,#e5e5e7)}
.wl-freigabe:last-child{border-bottom:none}
.wl-freigabe small{display:block;font-family:var(--mono,ui-monospace,monospace);font-size:11px;color:var(--ink-3,#8A8A90)}
.wl-freigabe strong{display:block;font-weight:500;font-size:15.5px;margin:2px 0 3px}
.wl-freigabe .ruhig{font-size:13.5px;color:var(--ink-2,#3C3C40)}
.wl-freigabe.freigegeben strong::after{content:" ✓";color:#2E9E5B}
.wl-freigabe.aenderung strong::after{content:" ↺";color:var(--red,#CF2644)}
.wl-freigabe-notiz{margin:8px 0 0;font-size:14px;color:var(--ink-2,#3C3C40);font-style:italic}
#wl-freigabe-link{font-family:var(--mono,ui-monospace,monospace);font-size:13px}

/* Freigaben: zwei Knöpfe in der Überschrift, und ein Dateifeld, das nicht wie ein
   Fremdkörper aussieht. */
.wl-kopfknoepfe{display:flex;gap:8px;flex-wrap:wrap}
.wl-freigabe .ruhig{display:block;font-size:13.5px;color:var(--muted)}
.wl-freigabe-notiz{margin:6px 0 0;font-size:13.5px;color:var(--muted)}
.field input[type=file]{width:100%;font:inherit;padding:9px 10px;border:1px dashed var(--line);background:#fff}
.field input[type=file]:hover{border-color:var(--red)}

/* Kundenunterlagen: je Kunde ein Block mit Kopfzeile. */
.wl-kundenblock{margin:0 0 34px}
.wl-kundenkopf{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;
 border-bottom:1px solid var(--ink);padding-bottom:10px;margin:0 0 16px}
.wl-kundenkopf h2{margin:0;font:700 26px/1.2 'PT Sans Caption','PT Sans',sans-serif;letter-spacing:-.6px}
.wl-kundenkopf .ruhig{margin:4px 0 0;color:var(--muted);font-size:13.5px}
.wl-suchfeld input{min-width:260px}

/* Mitteilungen als Postfach: eine Zeile je Nachricht, ungelesene fett und mit
   Punkt, darunter die geöffnete Nachricht. */
.wl-postfach{background:#fff;border:1px solid var(--line)}
.wl-post-zeile{display:grid;grid-template-columns:14px 150px 1fr auto;align-items:baseline;gap:14px;
 width:100%;text-align:left;padding:13px 18px;border:0;border-bottom:1px solid var(--line);
 background:#fff;color:var(--ink);font:inherit;cursor:pointer}
.wl-post-zeile:last-child{border-bottom:0}
.wl-post-zeile:hover{background:var(--sand,#F1F1F1)}
.wl-post-zeile.offen{background:var(--sand,#F1F1F1)}
.wl-post-punkt{width:8px;height:8px;border-radius:50%;background:transparent;align-self:center}
.wl-post-zeile.neu .wl-post-punkt{background:var(--red,#CF2644)}
.wl-post-von{color:var(--muted);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wl-post-zeile.neu .wl-post-von{color:var(--ink);font-weight:600}
.wl-post-betreff{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}
.wl-post-betreff strong{font-weight:400}
.wl-post-zeile.neu .wl-post-betreff strong{font-weight:600}
.wl-post-auftrag{color:var(--muted);font-size:14px}
.wl-post-zeit{color:var(--muted);font:400 12.5px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap}
@media(max-width:760px){
 .wl-post-zeile{grid-template-columns:14px 1fr auto;row-gap:2px}
 .wl-post-von{grid-column:2;order:1}
 .wl-post-zeit{grid-column:3;order:2}
 .wl-post-betreff{grid-column:2/4;order:3;white-space:normal}
}
.wl-post-brief{margin-top:20px}
.wl-post-briefkopf{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
 border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:16px}
.wl-post-briefkopf h2{margin:6px 0 0;font:700 24px/1.25 'PT Sans Caption','PT Sans',sans-serif;letter-spacing:-.5px}

/* Eine Liste, keine Kartenwand. Jede Zeile: Lampe links, Sache in der Mitte,
   Stand und Datum rechts – damit die rechte Hälfte nicht leer steht. */
.wl-liste{background:#fff;border:1px solid var(--line);margin:0 0 30px}
.wl-reihe{display:grid;grid-template-columns:10px 1fr auto;align-items:start;gap:0 16px;
 padding:14px 18px;border-bottom:1px solid var(--line)}
.wl-reihe:last-child{border-bottom:0}
.wl-reihe-lampe{width:8px;height:8px;border-radius:50%;margin-top:7px;background:var(--muted)}
.wl-reihe.z-offen .wl-reihe-lampe{background:#C9720B}
.wl-reihe.z-freigegeben .wl-reihe-lampe{background:#1F8A70}
.wl-reihe.z-aenderung .wl-reihe-lampe{background:var(--red,#CF2644)}
.wl-reihe.z-zurueckgezogen .wl-reihe-lampe,.wl-reihe.z-gesperrt .wl-reihe-lampe{background:#C9CACE}
.wl-reihe-mitte{min-width:0}
.wl-reihe-kopf{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.wl-reihe-kopf strong{font-weight:500;font-size:15.5px}
.wl-marke{font:400 11px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.05em;
 text-transform:uppercase;color:var(--muted);border:1px solid var(--line);padding:0 6px;white-space:nowrap}
.wl-marke.datei{text-transform:none;letter-spacing:0;max-width:26em;overflow:hidden;text-overflow:ellipsis}
/* Die Fassung zum Nachsehen: sieht aus wie die anderen Marken, verhaelt sich
   aber wie ein Link - roter Rand, wenn man darueber geht. */
a.wl-marke.datei{color:var(--ink-2,#3C3C40);text-decoration:none;cursor:pointer}
a.wl-marke.datei:hover,a.wl-marke.datei:focus-visible{color:var(--red,#CF2644);border-color:var(--red,#CF2644)}
.wl-reihe-unten{display:block;margin-top:3px;font-size:13.5px;color:var(--muted);
 overflow:hidden;text-overflow:ellipsis}
.wl-reihe-zitat{display:block;margin-top:5px;font-size:13.5px;font-style:italic;color:var(--ink-2,#3C3C40)}
.wl-reihe-rechts{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right}
.wl-reihe-stand{font-size:13.5px;font-weight:500}
.wl-reihe-zeit{font:400 12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted)}
.wl-reihe-tun{display:flex;gap:12px;margin-top:4px}
.wl-reihe-tun .text-link{font-size:13px}
@media(max-width:700px){
 .wl-reihe{grid-template-columns:10px 1fr;row-gap:8px}
 .wl-reihe-rechts{grid-column:2;flex-direction:row;align-items:baseline;gap:12px;text-align:left;flex-wrap:wrap}
 .wl-reihe-tun{margin-top:0}
}

/* Postfach oben in der Leiste: Briefsymbol mit Zahl, darunter die letzten
   Nachrichten zum Aufklappen. */
.wl-postklappe{position:relative}
.wl-postknopf{position:relative}
.wl-postzahl{position:absolute;top:-2px;right:-2px;min-width:17px;height:17px;padding:0 4px;
 border-radius:9px;background:var(--red,#CF2644);color:#fff;
 font:700 10.5px/17px 'PT Sans Caption','PT Sans',sans-serif;text-align:center}
.wl-postschleier{display:none}
.wl-postblatt{position:absolute;right:0;top:calc(100% + 10px);width:360px;max-width:calc(100vw - 32px);
 background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;
 box-shadow:0 12px 32px rgba(0,0,0,.12);z-index:60}
.wl-postblatt-kopf{display:flex;align-items:baseline;gap:10px;
 padding:12px 16px;border-bottom:1px solid var(--line)}
.wl-postblatt-kopf strong{font-size:15px}
.wl-postblatt-kopf .ruhig{color:var(--muted);font-size:12.5px;margin-right:auto}
.wl-postblatt-zu{display:none;width:32px;height:32px;margin:-6px -8px -6px 0;border:0;border-radius:50%;
 background:var(--sand,#F1F1F1);color:var(--ink);font:400 20px/32px inherit;cursor:pointer;align-self:center}
.wl-postblatt-leer{display:flex;flex-direction:column;align-items:center;text-align:center;gap:0}
.wl-postblatt-leer::before{content:"";width:34px;height:34px;margin-bottom:10px;border-radius:50%;
 background:var(--sand,#F1F1F1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E") center/18px no-repeat}
.wl-postblatt-push{display:flex;align-items:center;justify-content:space-between;gap:12px;
 padding:11px 16px;border-top:1px solid var(--line);background:var(--sand,#F1F1F1);font-size:13px;color:var(--ink)}
.wl-postblatt-push .ruhig{color:var(--muted)}
.wl-postblatt-push-knoepfe{display:flex;gap:14px;align-items:center;flex:none}
.wl-postblatt-push .button.small{padding:6px 12px;font-size:13px}
.wl-postblatt-push .text-link{font-size:13px}
.wl-postblatt-zeile{display:grid;grid-template-columns:8px minmax(0,1fr) auto;align-items:center;gap:10px;
 width:100%;text-align:left;padding:11px 16px;border:0;border-bottom:1px solid var(--line);
 background:#fff;color:var(--ink);font:inherit;cursor:pointer}
.wl-postblatt-zeile:hover{background:var(--sand,#F1F1F1)}
.wl-postblatt-zeile .wl-post-punkt{width:7px;height:7px;border-radius:50%;background:transparent}
.wl-postblatt-zeile.neu .wl-post-punkt{background:var(--red,#CF2644)}
.wl-postblatt-von{display:block;font-size:12px;color:var(--muted)}
.wl-postblatt-betreff{display:block;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wl-postblatt-zeile.neu .wl-postblatt-betreff{font-weight:600}
.wl-postblatt-leer{padding:26px 16px 22px;color:var(--muted);font-size:14px}
.wl-postblatt-fuss{width:100%;padding:13px 16px;border:0;border-top:1px solid var(--line);background:#fff;color:var(--red,#CF2644);
 font:600 13.5px/1.4 inherit;text-align:left;cursor:pointer}
.wl-postblatt-fuss:hover{background:var(--sand,#F1F1F1)}
.wl-postblatt-zeile+.wl-postblatt-fuss{border-top:0}
.wl-notiz-archiv{margin-bottom:30px}

/* Logos & Vorlagen: was der Kunde nicht sieht, sieht auch intern anders aus. */
.uploaded-file.verborgen{background:#fbfbfc}
.uploaded-file.verborgen .file-type{background:#f0f0f2;color:var(--muted)}
.uploaded-file.verborgen .file-description strong{color:var(--muted)}
.uploaded-file .file-actions{flex-wrap:wrap;justify-content:flex-end}
.uploaded-file .file-actions .button{padding:8px 12px;font-size:13px}

/* Verlauf: wann ging der Auftrag in welchen Stand. */
.wl-verlauf .wl-reihe-stand{font:400 13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace}
.wl-verlauf .wl-reihe:last-child .wl-reihe-lampe{background:var(--red,#CF2644)}
.wl-seit{display:block;margin-top:4px;font-size:12px;color:var(--muted);font-weight:400}
.project-summary strong{display:block}

/* Was noch zu prüfen ist, soll ins Auge fallen. */
.wl-marke.wl-wartet{color:#C9720B;border-color:#C9720B}

/* Ladebalken beim Hochladen. Sitzt über den Knöpfen und bleibt stehen, bis die
   Antwort da ist – das Übertragen ist nur die halbe Wartezeit. */
.wl-balken{position:relative;height:8px;background:#e4e4e9;border-radius:4px;margin:26px 0 34px}
.wl-balken i{display:block;height:100%;width:0;background:var(--pink);border-radius:4px;transition:width .2s linear}
.wl-balken span{position:absolute;left:0;top:14px;font:400 12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted)}
.wl-platz{font:400 13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted);margin-left:auto}

/* Was gerade ausgewählt ist, mit Größe und Summe. */
.wl-auswahl{margin:10px 0 0;font-size:14px}
.wl-auswahl div{display:flex;justify-content:space-between;gap:12px;padding:4px 0;border-bottom:1px solid var(--line)}
.wl-auswahl div:last-child{border-bottom:0}
.wl-auswahl em{font-style:normal;color:var(--pink)}

/* Speicherbalken und Dateiauswahl je Kunde. */
.wl-speicher{background:#fff;border:1px solid var(--line);padding:20px 22px;margin:0 0 22px}
.wl-speicher-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.wl-speicher-kopf span{font:400 13.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted)}
.wl-speicher-bahn{height:10px;background:#e4e4e9;border-radius:5px;overflow:hidden}
.wl-speicher-bahn i{display:block;height:100%;background:#1F8A70;transition:width .3s ease}
.wl-speicher.eng .wl-speicher-bahn i{background:#C9720B}
.wl-speicher.voll .wl-speicher-bahn i{background:var(--pink)}
.wl-speicher-fuss{margin-top:8px;font-size:13px;color:var(--muted)}
.wl-wahlleiste{display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:#fff;border:1px solid var(--line);padding:14px 18px;margin:0 0 20px}
.wl-wahlleiste .check-field{margin:0}
.wl-wahlleiste .row-actions{margin-left:auto}
.wl-wahlleiste .button{padding:9px 13px;font-size:13.5px}
.wl-reihe-wahl{display:flex;align-items:center;padding-top:2px}
.wl-reihe-wahl input{width:18px;height:18px;accent-color:var(--pink)}
.wl-reihe.gewaehlt{background:var(--soft)}

/* Abgeschlossene Aufträge, nach Zeit zusammengefasst. */
.wl-abschluss-kopf{display:flex;align-items:center;gap:14px;margin:26px 0 10px;font-size:14px}
.wl-abschluss-kopf span:first-child{font-weight:600}
.wl-abschluss-kopf i{flex:1;height:1px;background:var(--line)}
.wl-abschluss-kopf .ruhig{color:var(--muted);font-size:13px}

/* „Hier brauchen wir Sie" – konkrete Schritte statt Kacheln mit Nullen. */
.wl-handeln{background:#fff;border:1px solid var(--line);margin:0 0 28px}
.wl-handeln-kopf{padding:22px 24px 16px;border-bottom:1px solid var(--line)}
.wl-handeln-kopf h2{font-size:20px;letter-spacing:-.4px}
.wl-handeln-kopf p{margin:6px 0 0;font-size:14px;color:var(--muted)}
.wl-handeln.leer .wl-handeln-kopf{border-bottom:0}
.wl-handeln-zeile{display:flex;align-items:center;gap:16px;padding:16px 24px;border-bottom:1px solid var(--line)}
.wl-handeln-zeile:last-child{border-bottom:0}
.wl-handeln-zeile>div{flex:1;min-width:0}
.wl-handeln-zeile strong{display:block;font-weight:600;font-size:15px}
.wl-handeln-zeile span{display:block;font-size:14px;color:var(--muted);margin-top:3px}
.wl-handeln-punkt{width:9px;height:9px;border-radius:50%;background:#C9720B;flex:0 0 auto}
.wl-handeln-zeile.dringend{background:var(--soft)}
.wl-handeln-zeile.dringend .wl-handeln-punkt{background:var(--pink)}
.wl-reihe-rechts .text-link{font-size:13px}
.wl-archiviert{background:var(--paper);color:var(--muted);font-size:14px}

/* Korrekturrunden über den beiden Stufen, zwischen denen sie pendeln. */
.wl-runden{position:relative;height:34px;margin:18px 24px -6px}
.wl-runden-strich{position:absolute;left:calc(100% * var(--von));width:calc(100% * var(--breite));
 bottom:0;height:7px;border:1px solid var(--line);border-bottom:0;border-radius:4px 4px 0 0}
.wl-runden-zahlen{position:absolute;left:calc(100% * var(--von));width:calc(100% * var(--breite));
 bottom:9px;display:flex;align-items:baseline;justify-content:center;gap:7px;flex-wrap:wrap}
.wl-runden-zahlen i{font-style:normal;font-size:13px;color:var(--muted)}
.wl-runden-zahlen i.jetzt{color:var(--pink);font-weight:700;font-size:15px}
.wl-runden-zahlen em{font-style:normal;font-size:11.5px;color:var(--muted);letter-spacing:.02em}
.wl-marke.wl-runde{color:#E0742B;border-color:#E0742B}
@media(max-width:700px){
 .wl-runden{height:auto;margin:0 24px 10px}
 .wl-runden-strich{display:none}
 .wl-runden-zahlen{position:static;width:auto;justify-content:flex-start}
}

/* Die vorgelegte Fassung über dem Ablauf. */
.wl-fassung{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
 padding:16px 24px;border-bottom:1px solid var(--line);background:var(--paper)}
.wl-fassung .eyebrow{display:block;margin:0 0 6px;font-size:11px}
.wl-fassung strong{display:block;font-size:15.5px}
.wl-fassung .ruhig{display:block;margin-top:3px;font-size:13.5px;color:var(--muted)}

/* Die Versandfrage. Sie steht vor jeder Mail, und nichts ist vorausgewählt –
   deshalb sieht sie aus wie eine Frage und nicht wie ein Haken, den man
   überliest. */
.wl-versand{border:1px solid var(--linie,#E3E3E6);border-radius:14px;padding:14px 16px 12px;margin:18px 0 6px;background:#FCFCFD;}
.wl-versand legend{padding:0 6px;font:400 11px/1 'PT Sans Caption','PT Sans',sans-serif;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);}
.wl-versand-wahl{display:flex;gap:10px;align-items:flex-start;padding:9px 0;cursor:pointer;}
.wl-versand-wahl+.wl-versand-wahl{border-top:1px solid #EEEEF1;}
.wl-versand-wahl input{margin-top:3px;accent-color:#C8102E;width:17px;height:17px;flex:0 0 auto;}
.wl-versand-wahl span{display:block;font:400 15px/1.5 'PT Sans',Arial,sans-serif;color:var(--ink,#2B2B2A);}
.wl-versand-wahl em{display:block;font-style:normal;font-size:13px;line-height:1.5;color:#7A7A80;margin-top:2px;}
.wl-versand-wahl:has(input:checked) strong{color:#C8102E;}

/* Inseratenprojekte: Kontakte, Auswahl, Zeitleiste der Ausgabe. */
.wl-auswahlleiste{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:0 0 12px;font-size:13.5px}
.wl-auswahlleiste .check-field{margin:0}
.wl-auswahlleiste select{padding:9px 10px;border:1px solid var(--line);border-radius:6px;background:white;font-size:13.5px}
.wl-reihe .ins-wahl{width:17px;height:17px;accent-color:var(--pink);align-self:center;margin:0 4px 0 0}
.wl-marke.gut{color:#1F8A70;border-color:#1F8A70}
.wl-marke.warn{color:var(--pink);border-color:var(--pink);font-weight:700}
.wl-reihe-zitat.wl-sonder{color:var(--pink)}
.wl-zeitleiste{position:relative;height:74px;margin:22px 8px 10px;--anteil:0}
.wl-zeitleiste-strich{position:absolute;left:0;right:0;top:14px;height:4px;background:var(--line);border-radius:4px}
.wl-zeitleiste-strich::after{content:"";position:absolute;left:0;top:0;bottom:0;width:calc(var(--anteil)*100%);background:var(--pink);border-radius:4px}
.wl-zeitleiste-heute{position:absolute;top:6px;left:calc(var(--anteil)*100%);width:2px;height:20px;background:var(--pink);transform:translateX(-1px)}
.wl-zeitleiste-punkt{position:absolute;top:9px;left:calc(var(--pos)*100%);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px}
.wl-zeitleiste-punkt i{display:block;width:14px;height:14px;border-radius:50%;background:white;border:3px solid var(--line)}
.wl-zeitleiste-punkt.vorbei i{border-color:var(--pink);background:var(--pink)}
.wl-zeitleiste-punkt.erledigt i{border-color:#1F8A70;background:#1F8A70}
.wl-zeitleiste-punkt em{font:400 11px/1.3 'PT Sans Caption','PT Sans',sans-serif;font-style:normal;color:var(--muted);text-align:center;white-space:nowrap;letter-spacing:.2px}
.wl-zeitleiste-punkt:nth-child(odd) em{margin-top:14px}
@media (max-width:760px){.wl-zeitleiste{display:none}}
/* Jahrestabelle einer Reihe: eine Zeile je Ausgabe, eine Spalte je Termin. */
.wl-jahrestabelle td{white-space:nowrap}
.wl-jahrestabelle tr.vorbei td{color:var(--muted)}
.wl-jt-knopf{border:1px solid transparent;background:transparent;font:inherit;padding:5px 8px;border-radius:6px;color:inherit;cursor:pointer}
.wl-jt-knopf:hover{border-color:var(--pink);color:var(--pink)}
.wl-jt.erledigt .wl-jt-knopf{color:#1F8A70;text-decoration:line-through}
.wl-jt.vorbei:not(.erledigt) .wl-jt-knopf{color:var(--pink);font-weight:600}
.wl-jt.heute .wl-jt-knopf{background:var(--soft);color:var(--pink);font-weight:600}
.wl-jt-knopf i{font-style:normal;margin-left:2px;color:var(--muted)}
.wl-jt-leer .text-link{color:var(--muted)}
.wl-rechner-feld .zeile{display:flex;gap:12px;flex-wrap:wrap}
.wl-rechner-feld .zeile .field{flex:1 1 180px}
.wl-re-ergebnis{margin-top:18px;padding:16px 18px;background:var(--soft);border-radius:7px;min-height:56px}
.wl-re-ergebnis .note{padding:0;margin:6px 0 0}
.wl-re-gross{font:700 30px/1.15 inherit;letter-spacing:-1px;margin:0}
.wl-re-besser{margin:14px 0 0;padding:10px 12px;background:#E6F4EE;border-left:3px solid #1F6B4E;font-size:14px;line-height:1.55}
.wl-re-achtung{background:#FFF6E5;border-left:3px solid #C98A12;padding:10px 12px;margin:12px 0 0;font-size:13px}
.wl-re-gross small{font-size:15px;font-weight:400;letter-spacing:0;color:var(--muted)}
.wl-plan-zeile{align-items:end;gap:10px;flex-wrap:wrap}
.wl-plan-zeile .field:first-child{flex:1 1 180px}
.wl-plan-zeile input[type=date]{min-width:150px}
#wl-plan-einfuegen{width:100%;min-height:96px;font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;
 border:1px solid #d8d8dd;border-radius:6px;padding:10px;margin:8px 0 10px}
.wl-plan-zeile .field{margin:8px 0}
.wl-plan-weg{align-self:center;margin-bottom:12px;color:var(--muted)}
/* Ausgabe-Seite: fuenf Kacheln, Inserentenzeilen mit ihren Anzeigen. */
.wl-metrics-5{grid-template-columns:repeat(5,1fr)}
@media (max-width:1100px){.wl-metrics-5{grid-template-columns:repeat(2,1fr)}}
.wl-inserenten-leiste{align-items:center;flex-wrap:wrap;gap:12px}
.wl-inserenten-leiste select{padding:10px 12px;border:1px solid var(--line);border-radius:6px;background:white;font-size:14px}
.wl-anzeigen{margin-top:10px;display:flex;flex-direction:column;gap:6px}
.wl-anzeige{border:1px solid var(--line);border-radius:8px;padding:9px 12px;background:#fcfcfd;font-size:13.5px}
.wl-anzeige.storniert{opacity:.55;text-decoration:line-through}
.wl-anzeige-kopf{display:block}
.wl-anzeige-unten{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:5px;color:var(--muted)}
.wl-treffer{width:100%;text-align:left;border:1px solid var(--line);background:white;cursor:pointer;padding:10px 14px;border-radius:8px;margin-top:6px}
.wl-treffer:hover{border-color:var(--pink)}
.wl-editor{margin:0 0 22px}
.wl-editor .dialog-body{padding:0 24px 22px}
.wl-brief{white-space:pre-wrap;font:inherit;font-size:13.5px;background:#fcfcfd;border:1px solid var(--line);padding:12px 14px;border-radius:8px;margin:8px 0 0}
.wl-details summary{cursor:pointer;font-size:13px;margin-top:6px}
/* Fahrplan einer Ausgabe: ein Schritt je Zeile, der aktuelle hervorgehoben. */
.wl-fahrplan{background:white;border:1px solid var(--line);border-radius:10px;padding:6px 0;margin:0 0 22px}
.wl-schritt{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:14px;align-items:center;padding:11px 20px 11px 16px;border-bottom:1px solid #f0f0f2}
.wl-schritt:last-of-type{border-bottom:0}
.wl-schritt-nr{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;border:2px solid var(--line);font:600 13px/1 'PT Sans Caption','PT Sans',sans-serif;color:var(--muted)}
.wl-schritt.erledigt .wl-schritt-nr{border-color:#1F8A70;background:#1F8A70;color:white}
.wl-schritt.aktuell{background:var(--soft)}
.wl-schritt.aktuell .wl-schritt-nr{border-color:var(--pink);background:var(--pink);color:white}
.wl-schritt-mitte{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;min-width:0}
.wl-schritt-mitte strong{font-size:15px}
.wl-schritt.erledigt .wl-schritt-mitte strong{color:var(--muted);font-weight:500}
.wl-schritt-datum{font:400 12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink)}
.wl-schritt-text{font-size:13.5px;color:var(--muted)}
.wl-schritt-tun{white-space:nowrap}
.wl-schritt-tun .button{padding:8px 12px;font-size:13px}
.wl-fahrplan-fuss{padding:8px 20px 4px;margin:0}
.wl-ausgabe-reiter{margin-bottom:16px}
@media (max-width:760px){.wl-schritt{grid-template-columns:34px 1fr;} .wl-schritt-tun{grid-column:2}}

.wl-unterlagen{margin-top:26px}
.wl-unterlagen .dialog-body{padding-top:6px}
.wl-editor-knoepfe{justify-content:space-between;align-items:center}
.wl-editor-knoepfe>span{display:flex;gap:10px;flex-wrap:wrap}
.wl-senden-auswahl{margin-top:14px;padding:14px;border:1px solid var(--line);border-radius:12px}
.wl-senden-auswahl .row-actions{margin-bottom:10px}
.wl-senden-liste{max-height:320px;overflow:auto}
.wl-senden-liste .check-field{padding:6px 0;border-bottom:1px solid var(--line)}
.wl-senden-liste .check-field:last-child{border-bottom:0}

.wl-marke-block{margin-top:26px}
.wl-marke-block .dialog-body{padding-top:6px}
.wl-marke-vorschau{--reihe:var(--pink);border:1px solid var(--line);border-radius:10px;padding:22px 24px;margin:4px 0 16px;background:#fff}
.wl-marke-vorschau img{display:block;max-width:100%;height:auto}
.wl-marke-strich{display:block;margin:12px 0 14px;height:3px;width:40px;background:var(--reihe)}
.wl-marke-fuss{display:block;font-size:12px;line-height:1.75;color:var(--muted)}

.wl-merken{align-items:flex-start;margin:18px 0 4px}
.wl-merken input{margin-top:2px}
.wl-merken small{display:block;font-size:12px;line-height:1.5;color:var(--muted);margin-top:3px;font-weight:400}

/* --------------------------------------------- Anzeige eintragen: Größen */
.wl-anzeige-form .wl-wahlreihe{border:1px solid var(--linie,#E3E3E6);border-radius:14px;
 padding:12px 16px 14px;margin:14px 0 0;background:#FCFCFD}
.wl-anzeige-form .wl-wahlreihe legend{padding:0 6px;font:400 11px/1 'PT Sans Caption','PT Sans',sans-serif;
 letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}
.wl-pillen{display:flex;flex-wrap:wrap;gap:8px}
.wl-pille{position:relative}
.wl-pille input{position:absolute;opacity:0;width:0;height:0}
.wl-pille span{display:block;padding:7px 14px;border:1px solid var(--linie,#E3E3E6);border-radius:999px;
 background:#fff;font:400 13.5px/1.4 'PT Sans',Arial,sans-serif;color:var(--ink,#2B2B2A);cursor:pointer}
.wl-pille input:checked+span{border-color:#C8102E;color:#C8102E;box-shadow:inset 0 0 0 1px #C8102E}
.wl-pille input:focus-visible+span{outline:2px solid #C8102E;outline-offset:2px}
.wl-groessen{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:8px}
.wl-groesse{position:relative;display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:10px;
 padding:9px 12px;border:1px solid var(--linie,#E3E3E6);border-radius:10px;background:#fff;cursor:pointer}
.wl-groesse input{position:absolute;opacity:0;width:0;height:0}
.wl-groesse:has(input:checked){border-color:#C8102E;box-shadow:inset 0 0 0 1px #C8102E}
.wl-groesse:has(input:focus-visible){outline:2px solid #C8102E;outline-offset:2px}
.wl-groesse-bild{display:flex;align-items:center;justify-content:center}
/* Ein Blatt Zeitung mit der eingezeichneten Anzeige - dieselbe Darstellung
   wie auf der oeffentlichen Infoseite: So sieht man auf einen Blick, wie viel
   von der Seite die Anzeige einnimmt, statt Millimeterzahlen zu vergleichen. */
.wl-blattbild{position:relative;display:block;background:#fff;border:1px solid var(--linie,#E3E3E6);border-radius:2px}
.wl-blattbild i{position:absolute;display:block;background:#DFE0E4;border-radius:1px}
.wl-groesse:has(input:checked) .wl-blattbild i{background:#C8102E}
.wl-blattbild i.offen{background:none;border:1px dashed #B6B7BC;border-radius:2px}
.wl-groesse-text{min-width:0}
.wl-groesse-text strong{display:block;font:400 13.5px/1.35 'PT Sans',Arial,sans-serif;color:var(--ink,#2B2B2A)}
.wl-groesse-text em{display:block;font-style:normal;font-size:13.5px;line-height:1.35;color:var(--muted)}
.wl-groesse-preis{font:700 13.5px/1.35 'PT Sans',Arial,sans-serif;white-space:nowrap}
.wl-anzeige-form .wl-frei{margin-top:10px}
.wl-summe{margin:14px 0 0;padding:11px 14px;border-radius:10px;background:var(--soft,#F6F6F8);font-size:13.5px}
.wl-summe strong{font-size:17px;font-weight:700}
.wl-mehr{margin-top:14px;border-top:1px solid var(--linie,#E3E3E6);padding-top:6px}
.wl-mehr>summary{cursor:pointer;padding:8px 0;font-size:13.5px;color:var(--muted)}
.wl-mehr>summary:hover{color:#C8102E}
@media(max-width:560px){.wl-groessen{grid-template-columns:1fr}}

/* ------------------------------- Inserentenliste: eine ruhige Schriftgröße.
   Drei Größen und nicht mehr: 15,5 px der Name, 13,5 px alles andere,
   11 px die Marken. Vorher war der Firmenname 14 px (weil er in einem Knopf
   steckt), die Person 16 px (geerbt) und der Rest 13,5 px - das sah unruhig
   aus, ohne dass ein Unterschied gemeint war. */
.wl-inserenten .wl-reihe-kopf strong{font-size:15.5px}
.wl-inserenten .wl-reihe-unten,.wl-inserenten .wl-reihe-zitat,
.wl-inserenten .wl-reihe-zeit,.wl-inserenten .wl-reihe-tun .text-link,
.wl-inserenten .wl-anzeige{font-size:13.5px}
.wl-inserenten .wl-reihe-zeit{font-family:'PT Sans',Arial,sans-serif;letter-spacing:0}
.wl-inserenten .wl-anzeige{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:4px 12px}
.wl-inserenten .wl-anzeige-kopf{display:block;min-width:0}
.wl-inserenten .wl-anzeige-kopf strong{font-weight:500}
.wl-inserenten .wl-anzeige-preis{font-weight:700;text-align:right;white-space:nowrap}
.wl-inserenten .wl-anzeige-unten{grid-column:1/-1;margin-top:2px}
.wl-anzeige-form .wl-frei[hidden]{display:none}

.wl-inserenten .wl-reihe-kopf strong .text-link{font:500 15.5px/1.4 'PT Sans',Arial,sans-serif;
 color:var(--ink,#2B2B2A);text-decoration:none}
.wl-inserenten .wl-reihe-kopf strong .text-link:hover,
.wl-inserenten .wl-reihe-kopf strong .text-link:focus-visible{color:var(--red,#CF2644)}
.wl-inserenten .wl-reihe-kopf .ruhig{font-size:13.5px;color:var(--muted)}
.wl-inserenten .text-link{font-size:13.5px}
dialog:has(.wl-anzeige-form){max-width:780px}
/* Zeilen ohne Statuslampe (Unterlagen, Infoseite): sonst rutscht der Text in
   die 10-px-Spalte der Lampe und jedes Wort steht einzeln untereinander. */
.wl-reihe.wl-ohne-lampe{grid-template-columns:1fr auto}
@media(max-width:700px){.wl-reihe.wl-ohne-lampe{grid-template-columns:1fr}
 .wl-reihe.wl-ohne-lampe .wl-reihe-rechts{grid-column:1}}
/* Vorschau des Briefkopfs: ein Blatt im Kleinen, damit man den gewaehlten
   Absender sieht und nicht nur seinen Namen liest. */
.wl-marke-vorschau{--reihe:#CF2644;border:1px solid var(--line);border-radius:10px;
 padding:22px 24px;margin:4px 0 6px;background:#fff}
.wl-marke-vorschau img{display:block;max-width:100%;height:auto}
.wl-vorschau-wortmarke{font:700 17px/1.3 'PT Sans',Arial,sans-serif;letter-spacing:-.01em}
.wl-vorschau-strich{height:3px;width:56px;background:var(--reihe);margin:14px 0 16px}
.wl-vorschau-text{margin:0 0 14px;font-size:13.5px;color:var(--muted)}
.wl-vorschau-knopf{display:inline-block;padding:9px 16px;border-radius:5px;
 background:var(--reihe);color:#fff;font-size:13.5px;font-weight:600}
.wl-vorschau-fuss{margin-top:18px;padding-top:12px;border-top:1px solid var(--line);
 font-size:12.5px;line-height:1.7;color:var(--muted)}
/* Sicherheitsnetz: Eine Zeile ohne etwas in der ersten Spalte (Lampe,
   Auswahlkästchen) bekommt das Raster ohne diese Spalte - sonst landet der
   Text in 10 px Breite und jedes Wort steht einzeln untereinander. Die
   ausdrückliche Kennung wl-ohne-lampe bleibt, für Browser ohne :has(). */
.wl-reihe:not(:has(> .wl-reihe-lampe)):not(:has(> .wl-reihe-wahl)):not(:has(> .ins-wahl)){
 grid-template-columns:1fr auto}
/* Das Postfach am Telefon: fest unter der Kopfleiste statt am Knopf
   hängend - sonst ragt es über den linken Rand hinaus. Und die Zeile darf
   die Klappe nicht aufblähen: der Betreff steht in einer Spalte mit
   minmax(0,1fr) und bekommt min-width:0, sonst zählt seine ganze Länge als
   Mindestbreite und die Seite wird breiter als der Bildschirm. */
.wl-postblatt-zeile>span{min-width:0}
@media(max-width:760px){
 /* Am Telefon steht die Kopfleiste unter der Navigation, ein Kasten am Knopf
    laege also mitten im Logo. Deshalb unten am Rand - immer erreichbar, immer
    vollstaendig, und der Daumen ist ohnehin dort. */
 .wl-postschleier{position:fixed;inset:0;background:rgba(20,20,22,.35);z-index:59}
 .wl-postblatt{position:fixed;inset:auto 0 0 0;top:auto;width:auto;max-width:none;
  max-height:76vh;overflow:auto;border:0;border-radius:18px 18px 0 0;
  padding-bottom:env(safe-area-inset-bottom,0);
  box-shadow:0 -12px 34px rgba(0,0,0,.18)}
 /* Der kleine Griff oben, wie man ihn von Blaettern am Handy kennt. */
 .wl-postblatt::before{content:"";display:block;width:38px;height:4px;border-radius:2px;
  background:#D9D9DC;margin:10px auto 2px}
 .wl-postblatt-kopf{position:sticky;top:0;background:#fff;padding:12px 20px 14px;border-bottom:1px solid var(--line)}
 .wl-postblatt-kopf strong{font-size:18px}
 .wl-postblatt-zu{display:inline-flex}
 .wl-postblatt-zeile{padding:14px 20px}
 .wl-postblatt-leer{padding:36px 20px 28px;text-align:center}
 .wl-postblatt-leer::before{width:40px;height:40px;margin-bottom:12px}
 .wl-postblatt-fuss,.wl-postblatt-push{padding-left:20px;padding-right:20px}
}

/* Der Preisrechner in der Reihe: Die Groessen stehen als Karten da, nicht mehr
   in einer Liste zum Aufklappen - man sieht alle auf einmal, mit Bild und mit
   dem Preis fuer den gewaehlten Tarif. */
.wl-rechner-feld .wl-re-titel{margin:16px 0 8px;color:var(--muted)}
.wl-rechner-feld .wl-groessen-blatt{grid-template-columns:repeat(auto-fill,minmax(268px,1fr))}
/* Die letzte Spalte der Jahrestabelle traegt zwei Knoepfe untereinander
   ("oeffnen" und "weglegen") - sie darf nicht umbrechen. */
.wl-jahrestabelle td:last-child{white-space:nowrap}

/* Die Kontaktzeile: Firma, Person und Marken standen ohne Abstand
   nebeneinander und liefen ineinander. Jetzt hat jede Zeile ihren eigenen
   Fluss, die Marken bekommen Luft und brechen sauber um. */
.wl-inserenten .wl-reihe-kopf,.wl-liste .wl-reihe-kopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.wl-liste .wl-reihe-unten{display:block;margin-top:2px}
.wl-liste .wl-reihe-marken{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin-top:5px}
.wl-liste .wl-reihe>input[type=checkbox]{align-self:flex-start;margin-top:3px}

/* Die Inserentenliste der Reihe: ein Suchfeld wie alle anderen Felder auch. */
.wl-reihe-inserenten .wl-leute-suche{width:100%;max-width:360px;margin:0 0 12px;padding:9px 12px;
 border:1px solid var(--linie,#E3E3E6);border-radius:8px;background:#fff;font:inherit;font-size:14px}
.wl-reihe-inserenten .wl-leute-suche:focus{outline:2px solid #C8102E;outline-offset:1px}
.wl-reihe-inserenten .work-table td{vertical-align:top}


/* Die Empfängerliste eines Anschreibens. */
.wl-empfaenger{margin-top:10px}
.wl-empfaenger .work-table{font-size:13.5px}
.wl-empfaenger .work-table td{vertical-align:top}

/* Eine Rückfrage, die sich über den offenen Dialog legt: Das Formular
   darunter bleibt stehen, nichts Getipptes geht verloren. */
dialog{position:relative}
.wl-frage{position:absolute;inset:0;z-index:3;background:#fff;border-radius:12px;overflow:auto}
.wl-frage .wl-vorschlag{display:block;width:100%;text-align:left;margin:6px 0;padding:12px 14px;
 border:1px solid var(--line);border-radius:8px;background:#fff;font-size:14px}
.wl-frage .wl-vorschlag:hover{border-color:var(--pink)}
.wl-frage .wl-vorschlag small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}

/* Die Kundenliste: eine Zeile je Kunde, damit sie auch bei sechzig Kunden
   noch lesbar bleibt. */
.wl-kundenliste{table-layout:fixed;width:100%}
.wl-kundenliste td{vertical-align:top;font-size:13.5px;white-space:normal;overflow-wrap:anywhere}
.wl-kundenliste tr.vorbei td{opacity:.6}
.wl-kundenliste td:last-child{white-space:normal}
.wl-kundenliste td:last-child .text-link{display:block;margin:0 0 3px}
.wl-kundenliste td small{display:block;font-size:12px;line-height:1.4}
/* Feste Breiten, damit nichts mehr nach rechts wegläuft: Adresse und Kontakt
   stehen zweizeilig statt in einer langen Zeile. */
.wl-kundenliste th:nth-child(1),.wl-kundenliste td:nth-child(1){width:19%}
.wl-kundenliste th:nth-child(2),.wl-kundenliste td:nth-child(2){width:15%}
.wl-kundenliste th:nth-child(3),.wl-kundenliste td:nth-child(3){width:22%}
.wl-kundenliste th:nth-child(4),.wl-kundenliste td:nth-child(4){width:13%}
.wl-kundenliste th:nth-child(5),.wl-kundenliste td:nth-child(5){width:16%}
.wl-kundenliste th:nth-child(6),.wl-kundenliste td:nth-child(6){width:15%}
/* Das kleine Zeichen für lexoffice: verbunden oder eben nicht. */
/* Die Kundennummer aus lexoffice - schlicht als Text, und nur wenn eine da
   ist. Ein Kettensymbol versprach eine Verbindung, die es nicht gibt. */
.wl-lexnr{display:inline-block;padding:1px 7px;border-radius:999px;background:#F1F1F1;
  color:#6f7077;font-size:11.5px;letter-spacing:.01em}
.wl-kunde-marken{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.wl-kunde-marken .wl-marke{margin:0}
.wl-kunde-marken .wl-marke svg{width:11px;height:11px;vertical-align:-1px;margin-right:3px;fill:none;stroke:currentColor;stroke-width:2}
.wl-nummer{display:inline-flex;align-items:center;gap:5px;color:inherit;text-decoration:none;line-height:1.5}
.wl-nummer:hover{text-decoration:underline}
.wl-nummer svg{flex:0 0 13px;width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;opacity:.65}
.wl-nummern{display:block}
.wl-nummern-mehr{margin-left:6px;font-size:12px}
.wl-nummern-rest{display:block}
@media(max-width:900px){
 .wl-kundenliste{table-layout:auto}
 .wl-kundenliste th:nth-child(4),.wl-kundenliste td:nth-child(4),
 .wl-kundenliste th:nth-child(5),.wl-kundenliste td:nth-child(5){display:none}
}

/* Die Ablage für Beiträge: ein Feld, auf das man Unterlagen fallen lässt.
   Beim Darüberziehen färbt es sich, damit klar ist, dass es annimmt. */
.wl-ablage{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;
 margin:0 0 22px;padding:26px 20px;background:#fff;border:2px dashed #d3d3d8;transition:border-color .12s,background .12s}
.wl-ablage strong{font-size:15px}
.wl-ablage .ruhig{max-width:52ch;font-size:13.5px;line-height:1.6}
.wl-ablage .button{margin-top:4px}
.wl-ablage.bereit{border-color:var(--pink,#CF2644);background:#FDF3F5}
.wl-beitrag-gruppe{margin:22px 0 8px;font:600 13px/1.3 inherit;letter-spacing:.06em;text-transform:uppercase;color:#6f7077}
.wl-beitrag-dateien{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.wl-beitrag-dateien button{padding:0 2px;line-height:1}

/* Die Kontaktliste soll nicht wie eine Datenbanktabelle aussehen: Name groß,
   darunter eine ruhige Reihe mit dem, was man am Telefon braucht. */
.wl-kontaktliste .wl-reihe{padding:16px 20px;gap:14px}
.wl-kontaktliste .wl-reihe-kopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;font-size:15.5px}
.wl-kontaktliste .wl-reihe-kopf strong .text-link{font-size:15.5px;font-weight:600}
.wl-kontaktliste .wl-kontakt-daten{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;margin-top:6px}
.wl-kontaktliste .wl-kontakt-daten .ruhig{font-size:13px}
.wl-kontaktliste .wl-reihe-marken{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:8px}
.wl-kontaktliste .wl-reihe-rechts{align-items:flex-end}
.wl-marke.sanft{text-transform:none;letter-spacing:0;font-size:12px;font-weight:500;background:#F1F1F1;border-color:transparent;color:#5c5c62}
.wl-kontaktliste .wl-kontakt-herkunft{font-size:12.5px;opacity:.8}
/* Ein Kontakt, der zugleich Kundenkonto ist. */
.wl-kundenpunkt{display:inline-block;padding:2px 8px;border-radius:999px;background:#2B2B2A;color:#fff;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;line-height:1.5}
.wl-kontakt.ist-kunde{box-shadow:inset 3px 0 0 #2B2B2A}

/* `small` ist von Haus aus inline. Ein Innenabstand wirkt dann zwar nicht auf
   die Höhe, malt und fängt Klicks aber trotzdem - der Hinweis legte sich
   unsichtbar über den Knopf darüber, und der ließ sich nicht mehr drücken.
   Als Block steht der Hinweis da, wo er hingehört, und nimmt nichts weg. */
small.note{display:block;padding:10px 0 0}

/* Der Zeichenzähler unter dem Text der Kleinanzeige. */
.wl-zaehler{display:block;margin-top:7px;font:400 12.5px/1.5 inherit;color:var(--muted,#6f7077);font-variant-numeric:tabular-nums}
.wl-zaehler.voll{color:#a40032}

/* Der Text einer Kleinanzeige steht so da, wie er im Heft stehen soll. */
.wl-anzeige-text{display:block;margin:8px 0 4px;padding:10px 12px;background:#fff;border-left:2px solid #d9d9dd;white-space:pre-wrap;font-size:13.5px;line-height:1.6}

/* Rechnungen und Angebote: je Auftrag ein Kasten, darin die Belege als
   Zeilen, die man anklickt. Kein Tabellengitter - es sind ein paar Zeilen,
   keine Buchhaltung. */
.wl-beleg-auftrag{margin-bottom:20px}
.wl-beleg-auftrag .panel-head h2{font-size:19px}
.wl-beleg{display:flex;align-items:center;gap:14px;padding:16px 24px;border-bottom:1px solid #efeff1;text-decoration:none;color:inherit}
.wl-beleg:last-child{border-bottom:0}
.wl-beleg:hover{background:#fafafb}
.wl-beleg-zeichen{flex:0 0 38px;height:38px;display:grid;place-items:center;background:#f6f6f7;border-radius:7px}
.wl-beleg-zeichen svg{width:18px;height:18px;color:#777;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.wl-beleg-mitte{flex:1;min-width:0}
.wl-beleg-mitte strong{display:block;font-size:15px;overflow-wrap:anywhere}
.wl-beleg-mitte small{display:block;font-size:12.5px;color:var(--muted);margin-top:4px}
.wl-beleg-tun{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--pink);white-space:nowrap}
.wl-beleg-tun svg{width:14px;height:14px}
@media(max-width:620px){.wl-beleg{padding:14px 16px;flex-wrap:wrap}.wl-beleg-tun{margin-left:52px}}

/* Die Schalterleiste über dem Kalender: eine Reihe kleiner Chips, die man
   an- und ausknipst. Ausgeschaltet bleiben sie lesbar – man soll ja sehen,
   was man gerade nicht sieht. */
.wl-kalender-filter{display:flex;flex-direction:column;gap:10px;margin:0 0 20px;padding:16px 18px;background:#fff;border:1px solid var(--line);border-radius:8px}
.wl-chips{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.wl-chips-titel{font:12px 'PT Sans Caption',sans-serif;letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);min-width:44px}
.wl-chip{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:13px;color:var(--muted);line-height:1.4}
.wl-chip i{width:9px;height:9px;border-radius:50%;background:var(--wl-farbe,#c7c7cc);flex:0 0 9px;opacity:.35}
.wl-chip.an{color:var(--ink);border-color:#9a9aa0;background:#fff;font-weight:600}
.wl-chip.an i{opacity:1;box-shadow:0 0 0 3px color-mix(in srgb,var(--wl-farbe,#8a8a90) 22%,transparent)}
/* Ausgeschaltet heisst: durchgestrichen. Ein blasser Punkt allein sagt zu
   wenig - man sieht dann nicht, ob etwas fehlt oder nur nichts da ist. */
.wl-chip:not(.an){text-decoration:line-through;background:#f4f4f6}
.wl-chip:hover{border-color:var(--pink)}
/* Die abweichende Rechnungsanschrift steht erst da, wenn jemand sagt, dass
   es sie gibt. Ohne :has() bleibt sie sichtbar - unschoen, nicht kaputt. */
@supports selector(:has(*)){
 .wl-rechnungsadresse .wl-rechnung-feld{display:none}
 .wl-rechnungsadresse:has(input[name="rechnung_extra"]:checked) .wl-rechnung-feld{display:block}
}
.calendar-day[data-neuer-termin]{cursor:pointer}
.calendar-day[data-neuer-termin]:hover{background:#fbf7f8;box-shadow:inset 0 0 0 1px var(--pink)}
@media(max-width:760px){.wl-kalender-filter{padding:12px}.wl-chips-titel{width:100%}}

/* ---------- Kalender ----------
   Samstag, Sonntag und Feiertage sind hell hinterlegt, nicht gesperrt: Man
   darf darauf buchen, man soll nur sehen, worauf. Deshalb ein Hauch Farbe
   statt einer Schranke. */
.work-calendar{border-radius:10px;overflow:hidden}
.calendar-weekday{font-weight:600;letter-spacing:.04em;color:#6f7077}
.calendar-weekday.wochenende{color:#b0455c;background:#faf2f4}
.calendar-day.wochenende{background:#fdf7f8}
.calendar-day.ft-feiertag{background:#fbeef1}
.calendar-day.ft-regional,.calendar-day.ft-still{background:#fdf7f8}
.calendar-day.outside{background:#f8f7f5}
.calendar-day.outside.wochenende{background:#f6f2f3}
.calendar-day.today{box-shadow:inset 0 0 0 2px var(--pink)}
.wl-feiertag{display:block;margin:2px 0 4px;font-size:10.5px;line-height:1.35;color:#a4566a;overflow-wrap:anywhere}
.calendar-day.ft-regional .wl-feiertag,.calendar-day.ft-still .wl-feiertag{color:#9a9aa2}
.calendar-event{border-radius:4px}

/* Das Jahr auf einem Blatt. */
.wl-jahr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-bottom:24px}
.wl-jahr-monat{background:#fff;border:1px solid var(--line);border-radius:9px;padding:14px}
.wl-jahr-monat h3{margin:0 0 10px;font-size:15px}
.wl-jahr-monat h3 .text-link{font-size:15px;font-weight:600}
.wl-jz-kopf,.wl-jz-gitter{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.wl-jz-kopf.mit-kw,.wl-jz-gitter.mit-kw{grid-template-columns:1.1fr repeat(7,1fr)}
.wl-jz-kopf .kw{color:#b6b6bd}
.wl-jz-kw{display:flex;align-items:center;justify-content:center;font-size:9px;color:#b0b0b8;padding:3px 0 6px;min-height:26px}
.wl-jz-kopf span{text-align:center;font-size:10px;color:#9a9aa2;padding-bottom:4px}
.wl-jz-kopf span.wochenende{color:#b0455c}
.wl-jz{position:relative;border:0;background:transparent;border-radius:4px;padding:3px 0 6px;min-height:26px;display:flex;flex-direction:column;align-items:center;gap:2px;font:inherit}
.wl-jz.leer{visibility:hidden}
.wl-jz i{font-style:normal;font-size:11.5px;line-height:1.2;color:var(--ink);font-variant-numeric:tabular-nums}
.wl-jz.wochenende{background:#fdf7f8}
.wl-jz.wochenende i{color:#b0455c}
.wl-jz.ft-feiertag{background:#fbeef1}
.wl-jz.ft-feiertag i{color:#a4566a;font-weight:600}
.wl-jz.heute{box-shadow:inset 0 0 0 1.5px var(--pink)}
.wl-jz:hover{background:#f0f0f2}
.wl-jz u{display:flex;gap:2px;text-decoration:none;line-height:0}
.wl-jz u b{width:4px;height:4px;border-radius:50%;display:block}
.wl-jz.belegt i{font-weight:600}
.wl-feiertage{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:2px 20px;padding:18px 24px 24px}
.wl-feiertag-zeile{display:flex;gap:12px;font-size:13.5px;line-height:1.9}
.wl-feiertag-zeile b{font-weight:400;color:var(--muted);min-width:82px;font-variant-numeric:tabular-nums}
.wl-feiertag-zeile.regional{color:var(--muted)}
@media(max-width:1200px){.wl-jahr{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.wl-jahr{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.wl-jahr{grid-template-columns:1fr}}

/* „Wen schreiben wir an?" – der erste Schritt, oben im Anschreiben-Reiter. */
.wl-verteilerblock{margin-bottom:22px}
.wl-verteilerblock .panel-head{flex-wrap:wrap;align-items:flex-start;gap:16px}
.wl-verteilerblock h2{font-size:19px}
.wl-verteilerblock .panel-head>div:first-child{flex:1;min-width:260px}
.wl-verteilerblock .panel-head p{max-width:62ch}
.wl-verteilerblock select{padding:12px;border:1px solid var(--line);border-radius:7px;background:#fff;max-width:240px}

/* In der Agenturansicht hat ein Beleg mehrere Wege: ansehen, ändern,
   verschicken. Deshalb hier mehrere Verweise statt eines Knopfes. */
.wl-beleg-tun{display:inline-flex;align-items:center;gap:14px;flex-wrap:wrap}
.wl-beleg-tun a,.wl-beleg-tun .text-link{font-size:13.5px;color:var(--pink);text-decoration:none}
.wl-beleg-tun a:hover,.wl-beleg-tun .text-link:hover{text-decoration:underline}

/* ---------- Postfach ----------
   Drei Spalten mit fester Ordnung: wer, worum es geht, wann. Der Absender
   bekommt ein Kürzel in seiner Farbe, wenn es ein Mensch aus dem Team ist -
   dann erkennt man die Zeile, bevor man sie liest. */
.wl-post-zeile{display:flex;align-items:stretch;gap:0;background:#fff;border-bottom:1px solid #efeff1}
.wl-post-zeile:last-child{border-bottom:0}
.wl-post-zeile:hover{background:#fafafb}
.wl-post-zeile.offen{background:#fff7f9;box-shadow:inset 3px 0 0 var(--pink)}
.wl-post-haupt{flex:1;min-width:0;display:grid;grid-template-columns:14px 190px minmax(0,1fr) 78px;align-items:center;gap:14px;
 border:0;background:transparent;padding:14px 8px 14px 18px;text-align:left;font:inherit}
.wl-post-punkt{width:8px;height:8px;border-radius:50%;background:transparent}
.wl-post-zeile.neu .wl-post-punkt{background:var(--pink)}
.wl-post-von{display:flex;align-items:center;gap:9px;min-width:0}
.wl-post-von.mensch em{color:var(--ink)}
.wl-post-von i{flex:0 0 26px;height:26px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:10.5px;font-weight:700;
 background:var(--wl-farbe,#eeeef0);color:var(--wl-farbe,#6f7077);box-shadow:inset 0 0 0 99px #ffffffd9}
.wl-post-von em{font-style:normal;font-size:13.5px;color:#4a4a50;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wl-post-mitte{min-width:0}
.wl-post-mitte strong{display:block;font-size:14.5px;font-weight:500;line-height:1.45;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wl-post-zeile.neu .wl-post-mitte strong{font-weight:700}
.wl-post-mitte small{display:block;margin-top:3px;font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wl-post-zeit{text-align:right;line-height:1.35}
.wl-post-zeit b{display:block;font-size:12.5px;font-weight:500;color:#4a4a50;font-variant-numeric:tabular-nums}
.wl-post-zeit i{display:block;font-style:normal;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.wl-post-tun{display:flex;align-items:center;gap:4px;padding-right:8px}
.wl-post-weg,.wl-post-hin{padding:0 10px;font-size:12.5px;color:var(--muted);opacity:0;transition:opacity .12s;white-space:nowrap}
.wl-post-hin{color:var(--pink)}
.wl-post-zeile:hover .wl-post-weg,.wl-post-zeile:hover .wl-post-hin,
.wl-post-weg:focus-visible,.wl-post-hin:focus-visible{opacity:1}
@media(max-width:900px){
 .wl-post-haupt{grid-template-columns:12px minmax(0,1fr) 62px;gap:10px;padding:13px 6px 13px 14px}
 .wl-post-von{display:none}
 .wl-post-weg,.wl-post-hin{opacity:1;padding:0 8px}
 .wl-post-hin{display:none}
}

/* Das Archiv: Gruppen, die man aufklappt. */
.wl-archivliste{display:flex;flex-direction:column;gap:10px}
.wl-archiv-gruppe{background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.wl-archiv-kopf{display:flex;align-items:center;gap:14px;width:100%;border:0;background:transparent;padding:16px 20px;text-align:left;font:inherit}
.wl-archiv-kopf span{flex:1;font-size:15px;font-weight:600}
.wl-archiv-kopf b{font-weight:400;font-size:13px;color:var(--muted)}
.wl-archiv-kopf i{font-style:normal;font-size:18px;color:var(--muted);width:18px;text-align:center}
.wl-archiv-gruppe.auf .wl-archiv-kopf{border-bottom:1px solid #efeff1}
.wl-archiv-gruppe.auf .wl-archiv-kopf span{color:var(--pink)}

/* Kundenansicht: der Streifen, der daran erinnert, dass man gerade mit
   fremden Augen schaut - und der Weg zurueck. Auffaellig, aber nicht
   erschreckend; er steht ueber allem und bleibt beim Scrollen stehen. */
.wl-alsstreifen{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  margin:0 0 1.5rem;padding:.75rem 1rem;border-radius:12px;
  background:#fde7ef;border:1px solid #f5b6ce;color:#7a1038;font-size:.95rem}
.wl-alsstreifen strong{font-weight:600}
.wl-alsstreifen .button{margin-left:auto;padding:.35rem .9rem;font-size:.9rem}
/* Der Block „ohne Mail“ im Nachfrage-Dialog tritt zurueck, solange die Mail
   angekreuzt ist - er gilt ja nur fuer den anderen Fall. */
#nachfrage-form:has([name="mail"]:checked) .wl-ohne-mail{display:none}
/* Was nur gilt, wenn wirklich eine Mail hinausgeht - der Link ohne Anmeldung
   steckt ja in der Mail. Ohne Häkchen tritt der Block zurück. */
#nachfrage-form:not(:has([name="mail"]:checked)) .wl-mit-mail{display:none}
/* Ein Zugang mit dem Link darunter, der zeigt, was gerade dieser Zugang sieht. */
.wl-zugang{margin-bottom:.75rem}
.wl-zugang .text-link{margin:.25rem 0 0 .25rem;font-size:.9rem}
/* Die Zeile eines Belegs hat jetzt Abzeichen und Knopf: Sie darf umbrechen,
   statt die Angaben links zusammenzuquetschen. */
.wl-beleg-tun{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;justify-content:flex-end}
.wl-beleg-tun .button{padding:.35rem .9rem;font-size:.9rem}

/* Zugangsdaten: die Überschrift je Kunde über der Gruppe, und die Marke für
   die Zwei-Faktor-Abfrage etwas deutlicher - sie ist die Angabe, auf die es
   im Ernstfall ankommt. */
.wl-gruppe{margin:1.75rem 0 .5rem;font-size:1.05rem;font-weight:600}
.wl-gruppe:first-child{margin-top:0}
.wl-marke.wl-zwei{background:#E6F4EE;color:#1F6B4E}
#tresor-klar{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.05rem}
/* Die weiteren Zugänge eines Eintrags: je Zeile eine Karte, damit man sieht,
   was zusammengehört. */
.wl-teile .wl-teil{padding:.6rem .75rem;margin:0 0 .5rem;border:1px solid #e5e5e7;border-radius:8px;background:#fafafa}
.wl-teile .wl-teil .field{margin:0}
/* Die fünf Schubladen über der Liste. */
.wl-bereiche{margin:0 0 .9rem;flex-wrap:wrap}
.wl-marke.wl-bereich{background:#eef2f7;color:#334155;font-weight:600}
.wl-kommentare{margin:0 0 22px}
.wl-archiv-jahr{border:1px solid var(--line);border-radius:8px;background:#fff;margin:0 0 10px;padding:0 16px}
.wl-archiv-jahr summary{cursor:pointer;padding:14px 0;font-size:14px}
.wl-archiv-jahr .wl-liste{margin:0 0 14px;border:0}
.wl-archiv-jahr .wl-reihe{padding:10px 0}

/* Abstand zwischen gestapelten Kästen (Reihe, Ausgabe) */
#page .panel + .panel, #page .panel + section.panel, #page section.panel + .panel{margin-top:24px}

.wl-druckpreise table input{width:110px;text-align:right;padding:6px 8px;font-variant-numeric:tabular-nums}
.wl-druckpreise .form-actions{padding:12px 16px 16px}
.wl-druckpreise-kopf{padding:16px 16px 0}
.wl-druckpreise table{table-layout:auto}
.wl-druckpreise th,.wl-druckpreise td{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.wl-druckpreise th:first-child,.wl-druckpreise td:first-child{text-align:left;width:70px}
.wl-druckpreise th:nth-child(2),.wl-druckpreise td:nth-child(2),.wl-druckpreise th:nth-child(3),.wl-druckpreise td:nth-child(3){width:150px}
.wl-druckpreise td:nth-child(6){background:rgba(0,0,0,.025)}
.wl-druckpreise td:nth-child(7){color:#2E7D5B}
.wl-druckpreise td:last-child,.wl-druckpreise th:last-child{padding-right:20px}
.wl-druckpreise .work-table-wrap{margin:8px 16px 0;border:1px solid var(--line);border-radius:8px;overflow:auto}
.wl-druckpreise .note{margin:14px 16px 0}

.wl-titel-form{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.wl-titel-form input[name=title]{flex:1 1 220px;font-weight:700;font-size:16px;padding:8px 10px}

/* Alle Mails ansehen */
dialog:has(#wl-vorschau){max-width:1180px;width:96vw}
.wl-vorschau{display:grid;grid-template-columns:minmax(240px,320px) 1fr;gap:18px;align-items:start}
.wl-vorschau-liste{max-height:70vh;overflow:auto;border-right:1px solid var(--line,#e5e5e7);padding-right:10px}
.wl-vorschau-zeile{display:flex;gap:10px;align-items:flex-start;padding:8px 6px;border-bottom:1px solid var(--line,#e5e5e7)}
.wl-vorschau-zeile.aktiv{background:rgba(0,0,0,.05)}
.wl-vorschau-zeile.ruhig{opacity:.55}
.wl-vorschau-zeile input{margin-top:4px}
.wl-vorschau-zeile .text-link{text-align:left;display:flex;flex-direction:column;gap:2px}
.wl-vorschau-zeile small{font-size:12px;color:#6f7077;font-weight:400}
.wl-vorschau-leer{width:16px;flex:0 0 16px}
.wl-vorschau-zeile input{width:16px;height:16px;flex:0 0 16px;margin:3px 0 0}
.wl-vorschau-kopf{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.wl-vorschau-rahmen{width:100%;height:68vh;border:1px solid var(--line,#e5e5e7);background:#f1f1f1}
@media (max-width:760px){.wl-vorschau{grid-template-columns:1fr}.wl-vorschau-liste{max-height:30vh;border-right:0}}

/* Zulieferer: Kacheln */
.wl-zl-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px;margin-top:18px}
.wl-zl-kachel{padding:22px 24px;display:flex;flex-direction:column;gap:16px}
.zl-k-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.zl-k-kopf h2{margin:0 0 4px;font-size:20px}
.zl-k-kopf p{margin:0;color:#69696e;font-size:13.5px;line-height:1.5}
.zl-k-zahlen{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.zl-k-zahlen div{background:#f6f6f7;border-radius:8px;padding:10px 12px}
.zl-k-zahlen b{display:block;font-size:20px;line-height:1.1}
.zl-k-zahlen span{font-size:11.5px;color:#69696e}
.zl-k-zahlen .zl-k-offen{background:#FCE8EC}.zl-k-zahlen .zl-k-offen b{color:#CF2644}
.zl-k-stand{margin:0;font-size:13px;color:#69696e}
.zl-k-knoepfe{display:flex;gap:10px;flex-wrap:wrap}
.zl-k-links{display:flex;gap:18px;flex-wrap:wrap;border-top:1px solid #ececef;padding-top:12px;font-size:13.5px}
.zl-k-links a,.zl-k-links button{outline:none}
.zl-k-links a:focus-visible,.zl-k-links button:focus-visible{outline:2px solid #CF2644;outline-offset:2px}

/* Zurückgestellte Aufträge (Fassung 20260925p) */
.wl-zurueck-hinweis{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 20px}
.wl-auftrag-zurueck{opacity:.78;grid-template-columns:1fr auto}
.wl-auftrag-zurueck:hover{opacity:1}
.wl-zurueck-grund{display:block;margin-top:4px;font-style:italic}
.wl-wiedervorlage{display:flex;flex-direction:column;gap:2px;padding:10px 0;border-bottom:1px solid var(--line,#eee)}
.wl-wiedervorlage:last-child{border-bottom:0}

/* Datei im Fenster ansehen (Fassung 20260925v) */
.wl-pdf-fenster{width:min(78vw,900px);height:min(70vh,760px);background:var(--flaeche,#fff);border:1px solid var(--linie,#e5e5e7);border-radius:8px;overflow:hidden}
.wl-pdf-fenster iframe{width:100%;height:100%;border:0;display:block}
@media (max-width:760px){.wl-pdf-fenster{width:100%;height:60vh}}

/* Auftragszeile, Hinweis und Spaltenwahl (Fassung 20260925w) */
/* Feste Spalte für den Stand, damit Kunde und Auftrag in allen Zeilen an
   derselben Stelle beginnen. */
.wl-auftrag{grid-template-columns:22px 168px minmax(0,1fr) auto}
.wl-auftrag-stand{white-space:nowrap;overflow:hidden}
.wl-auftrag-stand .wl-stand{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.wl-auftrag-stand{display:inline-flex;align-items:center}
.wl-auftrag-hinweis{padding:2px 0 10px;color:var(--ink-2,#5d6673);font-size:15px;line-height:1.55}
.wl-spaltenliste{display:flex;flex-direction:column;gap:2px;margin:10px 0}
.wl-spaltenzeile{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 10px;border:1px solid var(--linie,#e5e5e7);border-radius:8px}
.wl-spaltenzeile .row-actions{display:flex;gap:6px}
button.wl-marke.datei{border:0;cursor:pointer;font:inherit}
/* Am Telefon untereinander: Stand oben, darunter Kunde und Auftrag, dann die Knöpfe. */
@media (max-width:1100px){.wl-auftrag{grid-template-columns:22px 150px minmax(0,1fr) auto}}
@media (max-width:860px){
 .wl-auftrag{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
 .wl-auftrag-griff{order:1}
 .wl-auftrag-stand{order:2}
 .wl-auftrag-kern{order:3;flex:1 1 100%}
 .wl-auftrag-rechts{order:4;flex:1 1 100%;justify-content:flex-start}
}

/* Abgehakte Termine: im Kalender blass stehen lassen (Fassung 20260926e) */
.wl-termin.erledigt,.calendar-event.termin.erledigt{opacity:.45}
.wl-termin.erledigt .wl-termin-titel,.calendar-event.termin.erledigt small{text-decoration:line-through}

/* Hinweis und Kommentare im Auftrag (Fassung 20260926f) */
.wl-hinweis-inhalt{padding:16px 20px 18px}
.wl-hinweis-inhalt:empty{display:none}
.wl-hinweis-inhalt .work-comment:first-child{padding-top:0;border-top:0}
.wl-kommentare .panel-head .row-actions{display:flex;gap:16px;align-items:center}
.wl-auftrag-hinweis{padding:0 0 4px}
.wl-auftrag-hinweis+.work-comment{margin-top:14px;padding-top:14px;border-top:1px solid var(--line,#eee)}

/* Postfach: wischen (Fassung 20260926i) */
.wl-post-huelle{position:relative;overflow:hidden}
.wl-post-huelle .wl-wisch{position:absolute;top:0;bottom:0;display:flex;align-items:center;padding:0 18px;font:400 13px/1 var(--mono,ui-monospace,monospace);letter-spacing:.04em;color:#fff;opacity:0;transition:opacity .12s}
.wl-post-huelle .wl-wisch.links{right:0;background:#5D6673;justify-content:flex-end}
.wl-post-huelle .wl-wisch.rechts{left:0;background:#CF2644}
.wl-post-huelle.nach-links .wl-wisch.links,.wl-post-huelle.nach-rechts .wl-wisch.rechts{opacity:.55}
.wl-post-huelle.reif .wl-wisch{opacity:1}
.wl-post-huelle .wl-post-zeile{position:relative;background:var(--bg,#fff);touch-action:pan-y;transition:transform .16s}
.wl-post-huelle.zieht .wl-post-zeile{transition:none;cursor:grabbing}

/* Wer das Foto gemacht hat (Fassung 20260926k) */
.wl-foto-von{display:block;margin-top:3px;color:var(--muted,#6A6A70)}
.wl-foto-von .text-link{font-size:12px}