/* Minimal, mobile-first — Gerry bedient das auf der Leiter. */
:root { --accent: #0d6efd; --border: #ddd; --danger: #b00020; font-family: system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; color: #1a1a1a; background: #fff; }
main { padding: 1rem; max-width: 640px; margin: 0 auto; }
h1 { font-size: 1.5rem; margin: 0.5rem 0; }
h2 { font-size: 1.1rem; margin: 1.5rem 0 0.5rem; }
.topbar { display: flex; justify-content: space-between; align-items: center;
  padding: 0.5rem 1rem; border-bottom: 1px solid var(--border); }
.topbar nav { display: flex; align-items: center; gap: 1rem; }
.topbar nav a { text-decoration: none; color: var(--accent); font-weight: 600; }
footer { padding: 1rem; text-align: center; font-size: 0.8rem; color: #777; }
input, button, select, textarea { font-size: 1rem; padding: 0.6rem; width: 100%; font-family: inherit; }
input, select, textarea { border: 1px solid var(--border); border-radius: 8px; background: #fff; }
input[type="checkbox"] { width: auto; margin-right: 0.5rem; }
button, .button { background: var(--accent); color: #fff; border: 0; border-radius: 8px; cursor: pointer;
  display: inline-block; text-align: center; padding: 0.6rem; }
button.secondary, .button.secondary { background: #eef3ff; color: var(--accent); }
button.small { width: auto; padding: 0.4rem 0.8rem; font-size: 0.9rem; }
button.linklike { background: none; color: var(--accent); width: auto; padding: 0; }
button.danger, .danger { color: var(--danger); }
.stack label { display: block; margin-bottom: 0.75rem; }
.stack label.check { display: flex; align-items: center; }
.cards { list-style: none; padding: 0; }
.cards li { border: 1px solid var(--border); border-radius: 10px; padding: 0.75rem; margin-bottom: 0.5rem; }
.cards li.erledigt { opacity: 0.55; }
.cards a { text-decoration: none; color: inherit; display: block; }
.cards span { display: block; color: #666; font-size: 0.9rem; }
.cards span a { display: inline; color: var(--accent); }
.cards .meta { font-size: 0.8rem; color: #888; }
.cards .row { display: flex; gap: 0.75rem; align-items: baseline; margin-top: 0.5rem; }
.cards .row form { width: auto; }
.empty { color: #888; border-style: dashed; }
.error { color: var(--danger); }
.ok { color: #1a7f37; }
.hint { color: #777; font-size: 0.85rem; }
.notiz { white-space: pre-wrap; background: #f7f7f7; border-radius: 8px; padding: 0.6rem; }
.crumbs { font-size: 0.9rem; margin: 0; }
.crumbs a { color: var(--accent); text-decoration: none; }
details summary { margin: 1rem 0 0.5rem; color: var(--accent); cursor: pointer; }
details.inline summary { margin: 0; font-size: 0.9rem; }
details.inline .stack { margin-top: 0.75rem; }
.galerie { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 0.6rem; }
.galerie li { position: relative; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: #fafafa; }
.galerie li.empty { grid-column: 1 / -1; padding: 0.75rem; }
.galerie img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.galerie .doc { display: flex; align-items: center; justify-content: center; text-align: center;
  aspect-ratio: 1; font-size: 0.85rem; padding: 0.5rem; color: #444; word-break: break-word; }
.galerie small { display: block; padding: 0.3rem 0.5rem; color: #777; font-size: 0.75rem; }
.galerie form { position: absolute; top: 0.25rem; right: 0.25rem; width: auto; }
.galerie form button { background: rgba(255,255,255,0.9); border-radius: 50%; width: 1.8rem; height: 1.8rem; padding: 0; }
.upload { display: flex; gap: 0.6rem; margin-top: 0.75rem; }
.upload .button { flex: 1; }
.push-inline { border: 1px dashed var(--accent); border-radius: 10px; padding: 0.75rem; margin-bottom: 0.75rem; }
#push-box button { margin-bottom: 0.4rem; }
details.gefahr { margin-top: 2rem; border-top: 1px solid var(--border); padding-top: 0.5rem; }
details.gefahr summary { color: var(--danger); }
button.danger-btn { background: var(--danger); color: #fff; }
button.small-text { font-size: 0.85rem; }