:root{
--bg:#E9ECEA;
--bg-grain:#DFE3E0;
--surface:#FCFCFB;
--surface-2:#F2F4F1;
--surface-3:#E8EBE7;
--ink:#131E1C;
--ink-2:#33423F;
--muted:#5F6E6A;
--line:#DCE1DD;
--line-strong:#C6CEC9;
--accent:#A2673A;
--accent-ink:#8A5427;
--accent-soft:#F2E6DA;
--teal:#2C5A55;
--teal-soft:#E1EBE8;
--ok:#3C6B4B;
--ok-soft:#E2EDE4;
--warn-soft:#F7E9DC;
--rot:#B4472F;
--rot-soft:#F7E3DE;
--field-bg:#FFFFFF;
--shadow:0 20px 44px -26px rgba(19,30,28,.34), 0 1px 3px rgba(19,30,28,.05);
}
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]){
--bg:#0A100F; --bg-grain:#0E1614; --surface:#141D1B; --surface-2:#1B2523; --surface-3:#222D2A;
--ink:#E8EDEA; --ink-2:#C3CDC9; --muted:#8E9D98; --line:#26312E; --line-strong:#33403C;
--accent:#CE9560; --accent-ink:#E0AC7C; --accent-soft:#2C2119;
--teal:#7FBDB2; --teal-soft:#172523;
--ok:#8CC49B; --ok-soft:#16241B; --warn-soft:#2C2119;
--rot:#F08C6E; --rot-soft:#2A1713;
--field-bg:#0F1716;
--shadow:0 20px 44px -26px rgba(0,0,0,.7), 0 1px 3px rgba(0,0,0,.4);
}
}
*{box-sizing:border-box;}
[hidden]{display:none !important;}
body{
margin:0;
background:var(--bg);
background-image:radial-gradient(120% 80% at 12% 0%, var(--bg-grain) 0%, var(--bg) 58%);
color:var(--ink);
font-family:"Archivo","Helvetica Neue",Arial,sans-serif;
font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;
}
a{color:var(--accent-ink);}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px;}
h1,h2,h3{font-weight:700;letter-spacing:-.025em;}
h1{font-size:30px;line-height:1.12;margin:0 0 10px;text-wrap:balance;}
h2{font-size:21px;margin:0;}
h3{font-size:17px;margin:0;}
.topbar{
display:flex;align-items:center;gap:20px;flex-wrap:wrap;
padding:12px 26px;background:var(--surface);border-bottom:1px solid var(--line-strong);
}
.marke{display:flex;align-items:center;gap:9px;font-weight:700;font-size:15px;color:var(--ink);text-decoration:none;letter-spacing:-.01em;}
.marke-key{font-size:17px;}
.hauptnav{display:flex;gap:2px;flex-wrap:wrap;margin-left:6px;}
.hauptnav a{
padding:7px 12px;border-radius:9px;font-size:13.5px;font-weight:500;color:var(--muted);text-decoration:none;
}
.hauptnav a:hover{background:var(--surface-2);color:var(--ink);}
.hauptnav a.aktiv{background:var(--accent-soft);color:var(--accent-ink);font-weight:600;}
.konto{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:12.5px;color:var(--muted);}
.konto a{color:var(--muted);text-decoration:none;}
.konto a:hover{color:var(--accent-ink);}
.knr{font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink-2);}
.badge{
font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
padding:3px 7px;border-radius:5px;background:var(--teal-soft);color:var(--teal);
}
main.inhalt{max-width:940px;margin:0 auto;padding:32px 22px 70px;}
main.schmal{max-width:430px;margin:0 auto;padding:64px 22px 70px;}
.fuss{
max-width:940px;margin:0 auto;padding:0 22px 40px;
font-size:11.5px;color:var(--muted);
}
.seitenkopf{margin-bottom:24px;}
.seitenkopf p{margin:0;color:var(--muted);max-width:62ch;}
.eyebrow{font-size:10.5px;letter-spacing:.17em;text-transform:uppercase;font-weight:700;color:var(--accent-ink);margin:0 0 10px;}
.karte{
background:var(--surface);border:1px solid var(--line);border-radius:16px;
padding:20px;margin-bottom:16px;
}
.karte.gehoben{box-shadow:var(--shadow);border-color:var(--line-strong);}
.karte h2,.karte h3{margin-bottom:4px;}
.karte .unter{color:var(--muted);font-size:12.5px;margin:0 0 16px;}
.meldung{
padding:12px 15px;border-radius:12px;margin-bottom:20px;font-size:13.5px;font-weight:500;
background:var(--ok-soft);color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 30%,transparent);
}
.meldung.fehler{background:var(--rot-soft);color:var(--rot);border-color:color-mix(in srgb,var(--rot) 32%,transparent);}
.meldung.hinweis{background:var(--warn-soft);color:var(--accent-ink);border-color:color-mix(in srgb,var(--accent) 26%,transparent);}
.felder{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.feld{display:flex;flex-direction:column;gap:5px;}
.feld.breit{grid-column:1 / -1;}
label,.lbl{font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--muted);}
.req{color:var(--accent-ink);}
input[type=text],input[type=url],input[type=email],input[type=password],input[type=date],input[type=number],input[type=tel],textarea,select{
font:inherit;font-size:14px;color:var(--ink);background:var(--field-bg);
border:1px solid var(--line-strong);border-radius:10px;padding:9px 11px;width:100%;
transition:border-color .15s ease, box-shadow .15s ease;
}
input:focus,textarea:focus,select:focus{
outline:none;border-color:var(--accent);
box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent);
}
textarea{resize:vertical;min-height:72px;line-height:1.5;}
.hilfe{font-size:11.5px;color:var(--muted);margin:0;}
.btn{
display:inline-block;padding:11px 20px;border-radius:11px;font-size:14px;font-weight:600;
border:1px solid var(--line-strong);color:var(--ink-2);background:var(--surface-2);text-decoration:none;
}
.btn:hover{border-color:var(--accent);color:var(--accent-ink);}
.btn.primaer{background:var(--accent);border-color:var(--accent);color:#FFF8F1;}
.btn.primaer:hover{filter:brightness(1.06);color:#FFF8F1;}
.btn.klein{padding:7px 13px;font-size:12.5px;border-radius:9px;}
.btn.gefahr:hover{border-color:var(--rot);color:var(--rot);}
.btn[disabled]{opacity:.55;cursor:not-allowed;}
.aktionen{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:18px;}
.aktionen .hinweis{font-size:12.5px;color:var(--muted);}
.seg{display:flex;background:var(--surface-2);border:1px solid var(--line-strong);border-radius:11px;padding:3px;width:fit-content;}
.seg button{padding:7px 16px;border-radius:8px;font-size:13px;font-weight:500;color:var(--muted);}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.09);}
.chips{display:flex;flex-wrap:wrap;gap:7px;}
.chip-toggle{
padding:6px 12px;border-radius:999px;font-size:12.5px;font-weight:500;
border:1px solid var(--line-strong);color:var(--muted);background:var(--surface);
}
.chip-toggle[aria-pressed="true"]{background:var(--teal-soft);border-color:color-mix(in srgb,var(--teal) 40%,transparent);color:var(--teal);font-weight:600;}
.abschnitt{display:flex;align-items:baseline;gap:10px;margin:26px 0 10px;}
.abschnitt h3{font-family:"Archivo",sans-serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--muted);margin:0;}
.abschnitt .linie{flex:1;height:1px;background:var(--line);}
.abschnitt .zahl{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;}
.bereiche{display:flex;flex-direction:column;gap:8px;}
.bereich{border:1px solid var(--line);border-radius:14px;background:var(--surface);transition:border-color .16s ease,box-shadow .16s ease;}
.bereich.on{border-color:var(--line-strong);box-shadow:0 8px 22px -18px rgba(19,30,28,.5);}
.bereich-kopf{display:flex;align-items:flex-start;gap:12px;padding:13px 14px;}
.bereich.on .bereich-kopf{cursor:pointer;}
.bereich-kopf .ico{flex:none;width:24px;height:24px;color:var(--muted);margin-top:1px;}
.bereich.on .bereich-kopf .ico{color:var(--accent);}
.bereich-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.bereich-txt .name{font-size:14.5px;font-weight:600;}
.bereich-txt .desc{font-size:12px;color:var(--muted);line-height:1.4;}
.bereich-txt .zusammenfassung{font-size:11.5px;color:var(--muted);margin-top:3px;}
.bereich-txt .zusammenfassung b{color:var(--accent-ink);font-weight:600;}
.name-eingabe{font-size:14.5px;font-weight:600;padding:5px 9px;}
.chev{flex:none;width:24px;height:24px;display:grid;place-items:center;color:var(--muted);transition:transform .18s ease;}
.chev svg{width:16px;height:16px;}
.bereich.offen .chev{transform:rotate(180deg);}
.schalter{
flex:none;position:relative;width:40px;height:23px;border-radius:999px;margin-top:1px;
background:var(--surface-3);border:1px solid var(--line-strong);
transition:background .18s ease,border-color .18s ease;
}
.schalter::after{
content:"";position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;
background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.28);
transition:transform .18s cubic-bezier(.32,.72,.3,1);
}
.bereich.on .schalter{background:var(--accent);border-color:var(--accent);}
.bereich.on .schalter::after{transform:translateX(17px);}
.schalter input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;}
.schalter:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px;}
.bereich-koerper{border-top:1px dashed var(--line-strong);padding:14px;display:flex;flex-direction:column;gap:12px;}
.linkzeilen{display:flex;flex-direction:column;gap:7px;}
.linkzeile{display:grid;grid-template-columns:minmax(0,0.42fr) minmax(0,1fr) 30px;gap:7px;align-items:center;}
.linkzeile input{padding:7px 10px;font-size:13px;}
.ikonbtn{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--muted);border:1px solid transparent;}
.ikonbtn:hover{color:var(--rot);border-color:var(--line-strong);background:var(--surface-2);}
.ikonbtn svg{width:15px;height:15px;}
.linkplus{align-self:flex-start;font-size:12.5px;font-weight:600;color:var(--accent-ink);padding:5px 10px;border-radius:8px;border:1px dashed var(--line-strong);}
.linkplus:hover{background:var(--accent-soft);border-color:var(--accent);}
.bereichplus{
margin-top:10px;width:100%;padding:13px;border-radius:13px;border:1px dashed var(--line-strong);
color:var(--ink-2);font-size:13px;font-weight:600;background:var(--surface-2);
}
.bereichplus:hover{border-color:var(--accent);color:var(--accent-ink);}
.tabelle-huelle{overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:13.5px;}
th{
text-align:left;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
font-weight:700;padding:0 12px 8px;border-bottom:1px solid var(--line-strong);white-space:nowrap;
}
td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top;}
tr:last-child td{border-bottom:0;}
td.zahl,th.zahl{text-align:right;font-variant-numeric:tabular-nums;}
.leer{color:var(--muted);font-size:13px;padding:16px 0;}
.status{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;padding:3px 8px;border-radius:6px;background:var(--surface-3);color:var(--ink-2);}
.status.live{background:var(--ok-soft);color:var(--ok);}
.status.eingereicht{background:var(--teal-soft);color:var(--teal);}
.status.in_arbeit{background:var(--accent-soft);color:var(--accent-ink);}
.status.offen{background:var(--rot-soft);color:var(--rot);}
.kennzahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:18px;}
.kennzahl{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:15px 16px;}
.kennzahl .k{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700;}
.kennzahl .v{font-size:26px;font-weight:600;font-variant-numeric:tabular-nums;margin-top:4px;letter-spacing:-.02em;}
.kennzahl .n{font-size:11.5px;color:var(--muted);margin-top:2px;}
.balken{display:flex;align-items:flex-end;gap:3px;height:110px;padding-top:8px;}
.balken .tag{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:5px;min-width:0;}
.balken .stab{width:100%;background:var(--accent);border-radius:3px 3px 0 0;min-height:2px;opacity:.85;}
.balken .tag:hover .stab{opacity:1;}
.balken .beschriftung{font-size:9.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;}
.login-karte{background:var(--surface);border:1px solid var(--line-strong);border-radius:18px;padding:28px;box-shadow:var(--shadow);}
.login-marke{display:flex;align-items:center;margin-bottom:22px;}
.login-marke img{display:block;height:27px;width:auto;}
.login-karte h1{font-size:25px;}
.login-karte .felder{grid-template-columns:1fr;}
.login-fuss{margin-top:18px;font-size:12px;color:var(--muted);line-height:1.55;}
.eintrag{border:1px solid var(--line);border-radius:13px;background:var(--surface);padding:14px;margin-bottom:9px;}
.eintrag-kopf{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.eintrag-kopf .titel{font-weight:600;font-size:14.5px;flex:1;}
.eintrag .felder{gap:10px;}
.eintrag.inaktiv{opacity:.6;}
@media (max-width:720px){
.felder{grid-template-columns:1fr;}
.linkzeile{grid-template-columns:minmax(0,1fr) 30px;}
.linkzeile input:first-child{grid-column:1 / -1;}
.topbar{gap:10px;padding:10px 16px;}
.konto{width:100%;margin-left:0;justify-content:flex-start;}
main.inhalt{padding:22px 16px 60px;}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important;}}
.vorlagen{
display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-top:6px;
}
.vorlage{
display:flex;flex-direction:column;gap:5px;text-align:left;cursor:pointer;
padding:14px 15px;border-radius:14px;border:1px solid var(--line);
background:var(--surface);font:inherit;color:inherit;
transition:border-color .14s ease,background .14s ease;
}
.vorlage:hover{border-color:var(--line-strong);}
.vorlage[aria-checked="true"]{
border-color:var(--teal);background:var(--teal-soft);
box-shadow:inset 0 0 0 1px var(--teal);
}
.vorlage .v-name{font-size:14.5px;font-weight:600;letter-spacing:-.005em;}
.vorlage .v-kurz{font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--accent-ink);}
.vorlage .v-text{font-size:11.5px;color:var(--muted);line-height:1.45;}
.vorlage[aria-checked="true"] .v-text{color:var(--ink-2);}
.reihenfolge{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;}
.rfz{
display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:11px;
border:1px solid var(--line);background:var(--surface);
}
.rfz.fest{background:var(--teal-soft);border-color:color-mix(in srgb,var(--teal) 26%,transparent);}
.rfz-nr{
flex:none;width:22px;height:22px;border-radius:7px;display:grid;place-items:center;
background:var(--surface-3);color:var(--muted);font-size:11px;font-weight:700;
font-variant-numeric:tabular-nums;
}
.rfz.fest .rfz-nr{background:var(--teal);color:#FFF8F1;}
.rfz-sym{flex:none;width:18px;height:18px;color:var(--accent);}
.rfz.fest .rfz-sym{color:var(--teal);}
.rfz-sym svg{width:18px;height:18px;}
.rfz-name{flex:1;font-size:13.5px;font-weight:500;}
.rfz-fest{font-size:10.5px;color:var(--teal);font-weight:600;}
.rfz-tasten{display:flex;gap:4px;}
.rfz-t{
width:30px;height:30px;display:grid;place-items:center;cursor:pointer;
border:1px solid var(--line-strong);border-radius:8px;background:var(--surface);color:var(--ink-2);
}
.rfz-t svg{width:15px;height:15px;}
.rfz-t:hover:not(:disabled){border-color:var(--accent);color:var(--accent-ink);}
.rfz-t:disabled{opacity:.3;cursor:default;}
.marke img{display:block;height:23px;width:auto;margin-top:-3px;}
.filter{display:flex;flex-wrap:wrap;gap:6px 14px;margin:0 0 20px;font-size:13.5px;}
.filter a{text-decoration:none;color:var(--muted);border-bottom:1px solid transparent;padding-bottom:1px;}
.filter a:hover{color:var(--ink);}
.filter a.hier{color:var(--ink);border-bottom-color:var(--accent);font-weight:600;}
.bestellkarte{margin-bottom:16px;}
.bk-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:16px;flex-wrap:wrap;}
.bk-kopf > div{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;}
.bk-nummer{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;
color:var(--muted);letter-spacing:.02em;}
.bk-kopf strong{font-size:16px;}
.stand{flex:none;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
padding:4px 10px;border-radius:999px;background:var(--surface-2);color:var(--muted);
border:1px solid var(--line);}
.stand-neu{background:#F6EBE0;color:#8A552E;border-color:#E6CDB4;}
.stand-in_pruefung{background:#EEF2F6;color:#3F5A73;border-color:#D2DEE8;}
.stand-angeboten{background:#EAF0FA;color:#38508C;border-color:#CBD8EE;}
.stand-beauftragt{background:#E2EAE7;color:#2C5A55;border-color:#C6D6D1;}
.stand-erledigt{background:#E7F0E7;color:#3B6B3E;border-color:#CBE0CC;}
.stand-abgelehnt{background:#F7ECEA;color:#84362C;border-color:#E7C9C3;}
.bk-spalten{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
.bk-spalten h3{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
color:var(--muted);margin-bottom:8px;}
.bk-spalten p{font-size:14.5px;line-height:1.5;margin:0 0 10px;}
.bk-bemerkung{margin-top:14px;padding:12px 15px;border-radius:10px;background:var(--surface-2);
font-size:14px;line-height:1.55;}
.bk-fuss{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;
margin-top:18px;padding-top:15px;border-top:1px solid var(--line);}
.bk-fuss form.inline{display:flex;align-items:center;gap:8px;margin:0;}
.bk-fuss select{width:auto;min-width:150px;}
@media (max-width:720px){
.bk-spalten{grid-template-columns:1fr;gap:18px;}
}
.fahne{
font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
padding:3px 8px;border-radius:999px;white-space:nowrap;
}
.fahne.abgelaufen{background:#FBE9E7;color:#9A2A16;}
.fahne.bald{background:#FFF4DB;color:#7A5300;}
.hilfe.warn{color:#9A2A16;font-weight:600;}
.eintrag-kopf .hilfe{flex:0 0 auto;}
.eintrag.abgelaufen{border-color:#E9C9C1;background:#FFFBFA;}
.karte.todo{border-left:4px solid #C8721F;background:#FFFCF6;}
.karte.todo h2{margin-bottom:6px;}
.todo-satz{margin:8px 0 6px;font-size:14px;line-height:1.5;}
.todo-liste{list-style:none;margin:0 0 6px;padding:0;}
.todo-liste li{
display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;
padding:6px 0;border-top:1px solid var(--line);
}
.todo-liste li a{font-weight:600;}