:root{ --green:#4CAF50; --bg:#f6fff6; --text:#1a1a1a; --muted:#6b7280; }
*{ box-sizing:border-box; }
body{ margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial; color:var(--text); background:var(--bg); }
.topbar{ display:flex; justify-content:space-between; align-items:center; padding:10px 16px; background:#fff; border-bottom:1px solid #e5e7eb; position:sticky; top:0; z-index:10; }
.brand{ display:flex; align-items:center; gap:12px; }
.logo{ width:44px; height:44px; object-fit:contain; }
.brand h1{ margin:0; font-size:1.1rem; color:var(--green); text-align:center; }
.nav a,.hello{ margin-left:12px; text-decoration:none; color:#111; }
.container{ max-width:1100px; margin:20px auto; padding:0 16px; }
.card{ background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:16px; margin-bottom:16px; }
.table-wrap{ overflow:auto; }
table{ width:100%; border-collapse:collapse; }
th,td{ padding:10px; border-bottom:1px solid #eee; text-align:left; }
.btn{ display:inline-block; padding:8px 12px; background:#e8f6ea; border:1px solid #cde8d1; color:#0f5132; border-radius:10px; text-decoration:none; cursor:pointer; }
.btn.primary{ background:var(--green); color:#fff; border:none; }
.btn.danger{ background:#fee2e2; border:1px solid #fecaca; color:#991b1b; }
.form label{ display:block; margin-bottom:10px; }
.form input,.form select,.form textarea{ width:100%; padding:10px; border:1px solid #d1d5db; border-radius:8px; }
.row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
.grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; }
.notice{ padding:10px; background:#ecfeff; border:1px solid #bae6fd; border-radius:8px; margin-bottom:12px; }
.highlight{ background:#fbfff4; }
.badge{ background:#d9534f; color:#fff; padding:2px 8px; border-radius:999px; font-size:.9em; }
.footer{ text-align:center; color:var(--muted); padding:24px 12px; }
/* Buttons/Tap-Ziele */
.btn { min-height: 44px; line-height: 1.2; }

/* Karten/Tabellen auf Handy stapeln */
@media (max-width: 640px) {
  .row { display: grid; grid-template-columns: 1fr !important; gap: 10px; }
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table th, table td { padding: .55rem; }
  nav a, .btn { display:inline-flex; align-items:center; padding:.65rem .9rem; }
}

/* Details/Summary besser klickbar */
details > summary { cursor: pointer; user-select: none; }