:root{
  --tinte:#14232C;--zink:#EDF0F1;--blatt:#FFFFFF;--linie:#D3DADE;--linie-stark:#AEBAC1;
  --grau:#62747E;--nordsee:#1F6E8C;--gruen:#0B6E55;--rot:#A32E1C;--gelb:#96660C;
  --display:'Archivo',"Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',"Consolas","Menlo",monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--zink);color:var(--tinte);font-family:var(--display);font-size:15px;line-height:1.45;min-height:100vh}
body.mitte{display:flex;align-items:center;justify-content:center;padding:24px}
a{color:var(--nordsee)}
header{background:var(--tinte);color:#fff;padding:20px 28px;display:flex;flex-wrap:wrap;align-items:baseline;gap:16px 24px}
header .marke{color:#fff;text-decoration:none}
header h1{margin:0;font-size:20px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
header .ort{font-family:var(--mono);font-size:12px;color:#9FB4BE;letter-spacing:.1em;text-transform:uppercase}
header .rechts{margin-left:auto;display:flex;gap:10px;align-items:center}
.knopf,header button,header summary{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  background:none;border:1px solid #48606D;color:#C8D7DE;padding:7px 13px;cursor:pointer;text-decoration:none;display:inline-block;list-style:none}
header .knopf:hover,header button:hover,header summary:hover{background:#1E3340;color:#fff}
.knopf.hell{background:#fff;color:var(--tinte);border-color:#fff}
.knopf.hell:hover{background:#E8F0F3;color:var(--tinte)}
.knopf.dunkel{border-color:var(--tinte);color:var(--tinte)}
.knopf.dunkel:hover{background:var(--tinte);color:#fff}
.menu{position:relative}
.menu summary::-webkit-details-marker{display:none}
.menu-inhalt{position:absolute;right:0;top:calc(100% + 6px);background:#fff;border:1px solid var(--linie-stark);min-width:190px;z-index:20;display:flex;flex-direction:column}
.menu-inhalt a,.menu-inhalt button{font-family:var(--display);font-size:14px;letter-spacing:0;text-transform:none;color:var(--tinte);border:none;background:none;padding:10px 14px;text-align:left;cursor:pointer;text-decoration:none;width:100%}
.menu-inhalt a:hover,.menu-inhalt button:hover{background:var(--zink);color:var(--tinte)}
.menu-inhalt form{margin:0;border-top:1px solid var(--linie)}

main.seite{padding:24px 28px 60px;max-width:1100px}
.karte{background:var(--blatt);border:1px solid var(--linie);padding:24px 28px}
.karte.klein{width:100%;max-width:400px}
.karte h2{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--nordsee);margin:0 0 16px}
.karte .titel{margin:0 0 4px;font-size:18px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.karte .unter{margin:0 0 20px;color:var(--grau);font-size:13px}
label{display:block;font-size:12.5px;color:var(--grau);margin-bottom:12px}
label input{display:block;margin-top:4px}
input[type=text],input[type=password],input[type=search],input[type=number]{font-family:var(--mono);font-size:15px;color:var(--tinte);
  width:100%;padding:8px 10px;border:1px solid var(--linie-stark);background:#fff;border-radius:0}
input:focus,button:focus-visible{outline:2px solid var(--nordsee);outline-offset:-1px}
button.primaer{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;background:var(--tinte);color:#fff;border:1px solid var(--tinte);padding:10px 16px;cursor:pointer;width:100%}
button.primaer:hover{background:#1E3340}
.zurueck{display:block;margin-top:14px;font-size:13px}
.meldung{padding:9px 12px;margin-bottom:14px;font-size:13.5px;border-left:3px solid}
.meldung.fehler{background:#FBECE8;border-color:var(--rot);color:#6B1E12}
.meldung.ok{background:#E6F3EF;border-color:var(--gruen);color:#084A3A}
.hinweis{font-size:11.5px;color:var(--grau);margin:10px 0 0;line-height:1.35}

.werkzeuge{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.suche{display:flex;gap:0;flex:1;min-width:260px;max-width:520px;align-items:center}
.suche input{flex:1}
.suche button,.aktionen button,.zeilenform button:not(.primaer){font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;background:#fff;color:var(--tinte);border:1px solid var(--linie-stark);padding:9px 12px;cursor:pointer;white-space:nowrap}
.suche button{border-left:none}
.suche a{margin-left:10px;font-size:13px}
.export{margin-left:auto}
.leer{background:var(--blatt);border:1px solid var(--linie);padding:28px;color:var(--grau);text-align:center}

table.objekte{width:100%;border-collapse:collapse;background:var(--blatt);border:1px solid var(--linie);margin-top:16px}
table.objekte th{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--grau);text-align:left;padding:10px 12px;border-bottom:1px solid var(--linie-stark)}
table.objekte td{padding:10px 12px;border-bottom:1px solid var(--linie);vertical-align:top}
table.objekte tr:last-child td{border-bottom:none}
table.objekte tr.gesperrt td{color:var(--grau)}
table.objekte small{display:block;font-size:11.5px;color:var(--grau);margin-top:2px}
.mono{font-family:var(--mono);font-size:13.5px}
.r{text-align:right}
.titel-link{color:var(--tinte);font-weight:600;text-decoration:none}
.titel-link:hover{color:var(--nordsee);text-decoration:underline}
.aktionen{white-space:nowrap;text-align:right}
.aktionen button{padding:6px 10px;margin-left:4px}
.aktionen button:hover{background:var(--zink)}
.aktionen button.warn{color:var(--rot);border-color:#D9A79E}
.aktionen button.warn:hover{background:#FBECE8}
.aktionen form.inline{display:inline-flex;gap:0;margin-left:6px;vertical-align:middle}
.aktionen form.inline input[type=text]{width:150px;padding:6px 8px;font-size:12.5px}
.aktionen form.inline input+button{border-left:none}
.zeilenform{display:grid;grid-template-columns:1fr 1fr 1fr auto auto;gap:12px;align-items:end}
.zeilenform label{margin:0}
.zeilenform label.check{display:flex;align-items:center;gap:6px;padding-bottom:9px}
.zeilenform label.check input{width:auto;margin:0}
.zeilenform button.primaer{width:auto}
@media(max-width:800px){
  header{padding:16px 18px}
  main.seite{padding:16px 14px 40px}
  .zeilenform{grid-template-columns:1fr 1fr}
  table.objekte th:nth-child(2),table.objekte td:nth-child(2),table.objekte th:nth-child(3),table.objekte td:nth-child(3){display:none}
  .aktionen{white-space:normal;text-align:left}
  .aktionen form.inline{margin:4px 0}
  .export{margin-left:0}
}