:root { --tinte:#1a1a2e; --leise:#6b6b7b; --linie:#d4d8e0; --akzent:#2d4a7a; --gruen:#2f7d52; --hell:#f4f6fa; --rot:#b23b3b; --bg:#fafbfc; --karte:#fff; }
@media (prefers-color-scheme: dark) { :root { --tinte:#e8e8ef; --leise:#a0a0b0; --linie:#3a3f4a; --akzent:#8fb0e8; --gruen:#6fc495; --hell:#22262e; --bg:#14161a; --karte:#1c1f25; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--tinte); font:15px/1.5 "Segoe UI","Helvetica Neue",Arial,sans-serif; }
header.kopf { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 20px; border-bottom:1px solid var(--linie); background:var(--karte); }
header.kopf h1 { font-size:18px; margin:0; } header.kopf a { color:inherit; text-decoration:none; }
main { max-width:980px; margin:0 auto; padding:20px 16px 60px; }
.karte { background:var(--karte); border:1px solid var(--linie); border-radius:8px; padding:18px 20px; margin-bottom:16px; }
.karte.schmal { max-width:420px; margin:40px auto; }
h2 { font-size:17px; margin:0 0 10px; } h3 { font-size:15px; margin:18px 0 8px; }
label { display:block; font-size:13px; color:var(--leise); margin:10px 0 4px; }
input, select, textarea { width:100%; padding:9px 10px; border:1px solid var(--linie); border-radius:6px; font:inherit; background:var(--karte); color:var(--tinte); }
button, .knopf { display:inline-block; margin-top:12px; padding:9px 16px; border:0; border-radius:6px; background:var(--akzent); color:#fff; font:inherit; font-weight:600; cursor:pointer; text-decoration:none; }
button.zweit { background:transparent; color:var(--akzent); border:1px solid var(--akzent); }
.leise { color:var(--leise); font-size:13px; } .meldung { min-height:1.4em; font-size:14px; }
.liste { list-style:none; padding:0; margin:0; } .liste li { padding:10px 0; border-bottom:1px solid var(--linie); display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.liste a { color:var(--akzent); font-weight:600; text-decoration:none; }
.marke { font-size:12px; padding:2px 8px; border-radius:10px; background:var(--hell); color:var(--leise); white-space:nowrap; }
.marke.offen { background:#e6f3ea; color:#2f7d52; } .marke.erledigt { background:#e6f3ea; color:#2f7d52; } .marke.offen-auftrag { background:#fdf3e3; color:#9a6a12; }
.raster { display:grid; grid-template-columns:repeat(auto-fill, minmax(180px,1fr)); gap:12px; }
.raster figure { margin:0; border:1px solid var(--linie); border-radius:6px; overflow:hidden; background:var(--hell); }
.raster img { width:100%; height:140px; object-fit:cover; display:block; } .raster figcaption { font-size:12px; padding:6px 8px; word-break:break-word; }
.auftrag { border:1px solid var(--linie); border-radius:6px; padding:12px; margin:10px 0; }
.auftrag.aktiv { border-color:var(--akzent); box-shadow:0 0 0 2px color-mix(in srgb, var(--akzent) 25%, transparent); }
pre.prompt { white-space:pre-wrap; background:var(--hell); padding:10px; border-radius:6px; font-size:13px; margin:8px 0; }
code.url { background:var(--hell); padding:4px 8px; border-radius:4px; word-break:break-all; }
table.daten { width:100%; border-collapse:collapse; font-size:14px; } table.daten td, table.daten th { padding:5px 8px; border-bottom:1px solid var(--linie); text-align:left; }
@media (max-width:600px) { header.kopf { padding:12px 16px; } .karte { padding:14px; } }