:root{--purpur:#5C1E66;--purpur-deep:#3B1140;--purpur-mid:#8A4D96;--purpur-light:#D9C4DF;--purpur-soft:#EFE6F1;--seal:#C8472B;--siegel:var(--seal);--ochre:#B58A2E;--ocker:var(--ochre);--done:#3F6B2E;--ink:#17141A;--muted:#6B6670;--line:#DEDAE0;--paper:#F4F3F0;--surface:#FFFFFF;--indigo:#2E2A8C;--rose:#E6C3CF}
/* purpur app shell — Aktenschrank layout in the purpur identity. Linked by every UI artboard. */
body{margin:0;background:#F4F3F0;color:#17141A;font-family:'Hanken Grotesk',sans-serif;font-size:13px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:#17141A}a:hover{color:#5C1E66}
.app{display:flex;flex-wrap:wrap;min-height:100vh}
.rail{flex:0 0 232px;background:#F4F3F0;border-right:1px solid #DEDAE0;display:flex;flex-direction:column;padding:16px 12px;box-sizing:border-box;gap:4px}
.rail .ws{display:flex;align-items:center;gap:10px;padding:6px 8px 18px}
.rail .ws .n{font-family:'Familjen Grotesk',sans-serif;font-weight:600;font-size:15px;letter-spacing:-0.02em}
.rail .ws .d{font-family:'JetBrains Mono',monospace;font-size:11px;color:#6B6670}
.rail a.i{display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;border-radius:4px;text-decoration:none;color:#17141A;font-size:13px;font-weight:500}
.rail a.i:hover{background:#EAE8E3}
.rail a.i.on{background:#FFFFFF;border:1px solid #DEDAE0;color:#17141A}
.rail a.i svg{width:20px;height:20px;flex:none}
.rail .badge{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:11px;color:#F4F3F0;background:#5C1E66;padding:1px 6px;border-radius:4px}
.rail .sp{flex:1}
.main{flex:999 1 560px;min-width:0;display:flex;flex-direction:column}
.top{height:48px;border-bottom:1px solid #DEDAE0;display:flex;align-items:center;gap:16px;padding:0 20px;background:#F4F3F0}
.top .crumb{margin:0;font-family:'Familjen Grotesk',sans-serif;font-weight:500;font-size:15px;letter-spacing:-0.01em;white-space:nowrap}
.top .q{flex:1;max-width:520px;height:32px;border:1px solid #DEDAE0;background:#FFFFFF;border-radius:4px;display:flex;align-items:center;gap:8px;padding:0 10px;color:#6B6670}
.top .q input{flex:1;border:0;background:none;font:inherit;font-size:13px;color:#17141A;min-width:0}
.top .q input:focus{outline:none}
.top .q kbd{font-family:'JetBrains Mono',monospace;font-size:11px;border:1px solid #DEDAE0;border-radius:3px;padding:0 4px;color:#6B6670}
.btn{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;border-radius:4px;border:1px solid #5C1E66;background:#5C1E66;color:#F4F3F0;font:inherit;font-weight:600;font-size:13px;text-decoration:none;cursor:pointer;white-space:nowrap}
.btn:hover{background:#3B1140;border-color:#3B1140;color:#F4F3F0}
.btn.sec{background:#FFFFFF;color:#17141A;border-color:#DEDAE0}
.btn.sec:hover{background:#F4F3F0;color:#17141A;border-color:#17141A}
.btn.sm{height:28px;padding:0 10px;font-size:12px}
.content{padding:20px;display:flex;flex-direction:column;gap:16px;flex:1;min-width:0}
.card{background:#FFFFFF;border:1px solid #DEDAE0;border-radius:4px;min-width:0}
.card .hd{display:flex;align-items:center;gap:10px;height:40px;padding:0 14px;border-bottom:1px solid #DEDAE0}
.card .hd h2{margin:0;font-family:'Familjen Grotesk',sans-serif;font-weight:500;font-size:14px;letter-spacing:-0.01em}
.card .hd .n{font-family:'JetBrains Mono',monospace;font-size:11px;color:#6B6670}
.card .hd .r{margin-left:auto;display:flex;gap:8px;align-items:center}
.mono{font-family:'JetBrains Mono',monospace}
.mut{color:#6B6670}
.lab{font-family:'Familjen Grotesk',sans-serif;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:#6B6670}
.chip{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:4px;border:1px solid #DEDAE0;background:#FFFFFF;font-size:12px;white-space:nowrap}
.chip.f{border-color:#5C1E66;color:#5C1E66}
.chip.i{border-color:#17141A;color:#17141A}
.chip.m{border-style:dashed;color:#6B6670}
.chip.p{background:#5C1E66;color:#F4F3F0;border-color:#5C1E66}
.st{display:inline-flex;align-items:center;gap:6px;font-size:12px;white-space:nowrap}
.st::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.st.open{color:#8A6A14}.st.due{color:#B42318}.st.done{color:#3F6B2E}.st.rest{color:#6B6670}
.lv{display:inline-block;width:16px;height:6px;vertical-align:1px;margin-right:6px}
.lv.f{background:#5C1E66}.lv.i{border:1px solid #17141A;box-sizing:border-box}.lv.m{border:1px dashed #17141A;box-sizing:border-box}
table.t{width:100%;border-collapse:collapse;font-size:13px}
table.t th{height:32px;text-align:left;font-weight:500;color:#6B6670;font-size:12px;border-bottom:1px solid #DEDAE0;padding:0 12px;white-space:nowrap;cursor:pointer}
table.t th .s{font-family:'JetBrains Mono',monospace;font-size:10px;margin-left:4px}
table.t td{height:32px;padding:0 12px;border-bottom:1px solid #EEECE8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px}
table.t tr:hover td{background:#FAFAF8}
table.t tr.g td{background:#F4F3F0;font-family:'Familjen Grotesk',sans-serif;font-weight:500;color:#17141A;height:30px;border-bottom:1px solid #DEDAE0}
.list{display:flex;flex-direction:column}
.list .row{display:grid;grid-template-columns:84px minmax(0,1fr) auto;gap:12px;align-items:baseline;padding:9px 14px;border-bottom:1px solid #EEECE8;font-size:13px}
.list .row:last-child{border-bottom:0}
.list .row .d{font-family:'JetBrains Mono',monospace;font-size:12px;color:#6B6670}
.list .row .d.due{color:#B42318}
.list .row .t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list .row .t b{font-weight:600}
.tabs{display:flex;gap:4px;border-bottom:1px solid #DEDAE0;padding:0 4px}
.tabs a{text-decoration:none;color:#6B6670;font-size:13px;font-weight:500;padding:10px 10px;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a.on{color:#17141A;border-bottom-color:#5C1E66}
.tabs a .k{font-family:'JetBrains Mono',monospace;font-size:11px;margin-left:6px;color:#6B6670}
.ico{width:16px;height:16px;flex:none;vertical-align:-3px}
.wsel{display:flex;flex-direction:column;gap:6px}
.wsel label{font-size:12px;color:#6B6670}
.wsel select,.wsel input{height:30px;border:1px solid #DEDAE0;border-radius:4px;background:#FFFFFF;font:inherit;font-size:13px;padding:0 8px;color:#17141A}
@media (max-width:900px){.rail{flex:1 1 100%;flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid #DEDAE0;padding:8px}.rail .ws{padding:4px 8px}.rail .sp{display:none}.content{padding:12px}}
/* htmx indicators (htmx's built-in styles are disabled in base.html) */
.htmx-indicator{opacity:0;transition:opacity var(--m-fast,160ms) ease-out}
.htmx-request .htmx-indicator,.htmx-request.htmx-indicator{opacity:1}
/* auth */
:focus-visible{outline:2px solid var(--purpur);outline-offset:2px}
.auth{display:grid;grid-template-columns:1fr 1fr;min-height:100vh}
.auth-art{position:relative;overflow:hidden;background:var(--ground,var(--purpur-deep))}
.felder{position:absolute;inset:0;background:var(--ground)}
.feld{position:absolute;background:var(--c);animation:feld-drift var(--drift) var(--delay) ease-in-out infinite alternate}
.feld:nth-child(3n){background:transparent;border:1px solid var(--ink)}
@keyframes feld-drift{to{transform:translate(2.5%,-2%) scale(1.04)}}
.auth-brand{position:absolute;left:24px;bottom:24px;display:flex;align-items:center;gap:8px}
.auth-form{background:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:24px}
.auth-card{width:min(360px,100%);display:flex;flex-direction:column;gap:8px}
.auth-card form{display:flex;flex-direction:column;gap:8px}
.auth-card .h1{margin:0 0 8px;font-family:'Familjen Grotesk',sans-serif;font-weight:600;font-size:36px;line-height:1.12;letter-spacing:-0.03em}
.auth-card p{margin:0}
.auth-card input{height:36px;border:1px solid var(--line);border-radius:4px;background:var(--surface);font:inherit;font-size:14px;padding:0 10px;color:var(--ink);box-sizing:border-box;width:100%}
.auth-card input[type=hidden]{display:none}
.auth-card .btn{justify-content:center;height:36px;margin-top:8px}
.auth-card .err,.auth-card .msg{border:1px solid var(--seal);border-radius:4px;background:var(--surface);color:var(--seal);padding:8px 10px;font-size:13px}
.auth-card .secret{display:block;overflow-wrap:anywhere;background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:8px 10px;font-size:13px}
.auth-card .secret.uri{font-size:11px}
.auth-card .codes{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.auth-card .codes li{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:6px 8px;font-size:13px}
.auth-card .qr-box{align-self:center}
.auth-card .qr{display:block;width:200px;height:200px;background:var(--paper)}
.auth-card .qr path{stroke:var(--ink)}
.auth-foot{font-size:12px;text-align:center}
.wordmark{font-family:'Familjen Grotesk',sans-serif;font-weight:600;letter-spacing:-0.035em;color:var(--ink)}
@media(max-width:900px){.auth{grid-template-columns:1fr}.auth-art{min-height:34vh}}
@media(prefers-reduced-motion:reduce){.feld{animation:none}}
/* prose (changelog, impressum) */
.auth-card:has(.prose){width:min(560px,100%)}
.prose h2{margin:16px 0 4px;font-family:'Familjen Grotesk',sans-serif;font-weight:600;font-size:18px;letter-spacing:-0.02em}
.prose ul{margin:0;padding-left:18px}
.prose a{color:var(--purpur)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link:focus{position:fixed;top:8px;left:8px;z-index:100;width:auto;height:auto;margin:0;padding:10px 14px;clip:auto;overflow:visible;background:var(--surface);color:var(--purpur);border:2px solid var(--purpur);border-radius:4px}
[tabindex="-1"]:focus{outline:none}
.help{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px}
.help-nav{display:flex;flex-direction:column;gap:2px}
.help-nav a{display:flex;align-items:center;padding:8px 10px;border-radius:4px;color:var(--ink);text-decoration:none;min-height:36px}
.help-nav a.on{background:var(--purpur-soft);color:var(--purpur-deep);font-weight:500}
.help .prose{max-width:68ch}
.help .prose h1{font-family:'Familjen Grotesk',sans-serif;font-size:24px;margin:0 0 8px}
.help .prose table{border-collapse:collapse}
.help .prose th,.help .prose td{border-bottom:1px solid var(--line);padding:6px 10px;text-align:left}
.help .toc{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:8px 12px;margin:0 0 16px}
.help .toc ul{margin:0;padding-left:18px}
@media (max-width:900px){.help{grid-template-columns:minmax(0,1fr)}.help-nav{flex-direction:row;overflow-x:auto}.help-nav a{white-space:nowrap}}
/* Drawer (Task 7): right-hand panel, full screen at phone width (constraint 19). */
.drawer:not([hidden]){position:fixed;top:0;right:0;bottom:0;width:min(420px,100vw);background:var(--surface);border-left:1px solid var(--line);overflow-y:auto;z-index:20}
@media (max-width:640px){.drawer:not([hidden]){width:100vw;border-left:0}}
/* Phone-only chrome stays hidden until mobile.css switches it on (Task 26). */
.tabbar,.q-ico,.pane-back{display:none}
/* Card header only on the direct header element; rows inside lists reuse the .hd class for titles. */
.card :is(.row,.dl) .hd{display:block;height:auto;min-height:0;padding:0;border-bottom:0;min-width:0}
/* Two-line list rows (Heute, Akte Fristen): title and date, then meta. */
.list .row.two{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"hd when" "meta meta";gap:2px 12px;align-items:baseline;text-decoration:none}
.list .row.two:hover{background:var(--paper)}
.list .row.two .hd{grid-area:hd;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.list .row.two .when{grid-area:when;font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--muted);white-space:nowrap}
.list .row.two.overdue .when{color:var(--seal)}
.list .row.two .meta{grid-area:meta;display:flex;flex-wrap:wrap;align-items:center;gap:2px 12px;min-width:0;font-size:12px;color:var(--muted)}
.list .row.two .meta .mono{font-size:12px;color:var(--ink)}
.list .row.two .meta .st.due{color:var(--seal)}
.list>p{margin:0;padding:10px 14px}
/* Filter bar (Akten, Postbuch): controls share the 36 px height of the form fields. */
.filters{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.filters input:not([type=checkbox]):not([type=radio]),.filters select{box-sizing:border-box;height:36px;border:1px solid var(--line);border-radius:4px;background:var(--surface);font:inherit;font-size:13px;padding:0 10px;color:var(--ink);min-width:0}
.filters input[type=search]{flex:1 1 240px;max-width:360px}
.filters input[type=number]{width:112px}
.filters label{display:inline-flex;align-items:center;gap:8px}
.filters input[type=checkbox]{margin:0}
#journal-wrap{overflow-x:auto}
@media (max-width:640px){.filters input[type=search],.filters select,.filters label{flex:1 1 100%;max-width:none}.filters label input{flex:1}.filters input[type=number]{width:100%;flex:1 1 100%}}
/* Topbar grows when the page actions do not fit; the Akte puts them on a second row. */
.top{height:auto;min-height:48px;flex-wrap:wrap;row-gap:8px;padding-top:6px;padding-bottom:6px;box-sizing:border-box}
.top .crumb{min-width:0;overflow:hidden;text-overflow:ellipsis}
.top .q{min-width:160px}
.top .actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.top .actions:empty{display:none}
.top form:last-child{margin-left:auto}
.top .actions form.inline{display:inline-flex;margin:0}
.akte-page .top .actions{order:5;flex:1 1 100%}
/* Shared by several pages and the drawer, so they live here and not in a page sheet. */
.pad{padding:10px 14px;margin:0}
.drawer-hd{display:flex;justify-content:space-between;align-items:center;padding:0 14px}
.drawer-hd h2{margin:0;font-size:14px}
.list a.row{text-decoration:none}
.list a.row:hover .hd{color:var(--purpur)}
/* Label/value list (Akte rubrum, FOI connection, settings): dt muted, dd value. */
dl.kv{display:grid;grid-template-columns:150px minmax(0,1fr);gap:6px 14px;align-items:baseline;margin:0;padding:12px 14px;font-size:12px}
dl.kv dt{color:var(--muted)}
dl.kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
/* Shared form rows. `.fm` wraps Django's as_p output; `.settings` forms use the same controls.
   Controls are 36 px high with a 1 px line and a 4 px radius; checkboxes and radios keep their size. */
:is(.fm,.settings) :is(input,select):not([type=checkbox],[type=radio],[type=hidden],[type=file],[type=range],[type=submit],[type=button]){box-sizing:border-box;width:100%;max-width:460px;height:36px;border:1px solid var(--line);border-radius:4px;background:var(--surface);font:inherit;font-size:13px;padding:0 10px;color:var(--ink)}
:is(.fm,.settings) textarea{box-sizing:border-box;width:100%;min-height:96px;border:1px solid var(--line);border-radius:4px;background:var(--surface);font:inherit;font-size:13px;line-height:1.5;padding:8px 10px;color:var(--ink);resize:vertical}
:is(.fm,.settings) :is(input[type=checkbox],input[type=radio]){width:auto;height:auto;margin:0;flex:none;accent-color:var(--purpur)}
:is(.fm,.settings) :is(input,select,textarea):focus-visible{outline:2px solid var(--purpur);outline-offset:1px}
.fm>p{display:grid;grid-template-columns:200px minmax(0,1fr);gap:4px 16px;align-items:start;margin:0 0 12px}
.fm>p>label:first-child{color:var(--muted);font-size:12px;padding-top:9px}
.fm>p>:is(.helptext,.errorlist){grid-column:2}
.fm .helptext{color:var(--muted);font-size:12px}
.fm .errorlist{list-style:none;margin:0;padding:0;color:var(--seal);font-size:13px}
.fm>.errorlist{margin:0 0 12px}
.fm>p>:is(input[type=checkbox],input[type=radio]){margin-top:10px}
.fm>p:has(>input[type=checkbox])>label:first-child{padding-top:0;align-self:center}
.fm ul[id],.fm div[id]{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.fm :is(ul[id],div[id]) label{display:inline-flex;gap:8px;align-items:center;color:var(--ink);font-size:13px}
@media (max-width:640px){.fm>p{grid-template-columns:minmax(0,1fr)}.fm>p>label:first-child{padding-top:0}.fm>p>:is(.helptext,.errorlist){grid-column:1}.fm :is(input,select):not([type=checkbox],[type=radio]){max-width:none}}