*{box-sizing:border-box}
body{margin:0;font-family:system-ui,Arial,sans-serif;background:#f6f7f9}
.container{max-width:1100px;margin:0 auto;padding:16px}
.narrow{max-width:520px}

.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px}

.card{background:#fff;border-radius:12px;padding:12px;margin:10px 0;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.alert{background:#fff3cd;padding:10px;border-radius:10px}

.btn{display:inline-block;padding:10px 12px;border-radius:10px;text-decoration:none;border:1px solid #ddd;background:#fff;cursor:pointer}
.btn.primary{border-color:#333}
.btn.danger{border-color:#b00020;color:#b00020}

label{display:grid;gap:6px;margin:10px 0}
input, select, textarea{padding:10px;border-radius:10px;border:1px solid #ddd;width:100%}
textarea{min-height:90px;resize:vertical}

.filters{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0 18px}
.filters input{flex:1 1 260px}

.accordion-item{margin:12px 0}
.accordion-head{
  width:100%;
  text-align:left;
  border:0;
  background:#fff;
  border-radius:12px;
  padding:12px;
  box-shadow:0 1px 3px rgba(0,0,0,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
}
.grid4{display:grid;grid-template-columns:1fr;gap:4px;width:100%}
.chev{opacity:.6}
.accordion-body{margin-top:10px}

.form-grid{display:grid;grid-template-columns:1fr;gap:10px}
.form-grid .full{grid-column:1 / -1}

.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.muted{opacity:.7}

/* Tabellen (Healthchecks / Vet) */
.table{display:grid;gap:8px}

/* 4 Spalten: Datum | Wert | Notiz | Aktion */
.trow{
  display:grid;
  grid-template-columns:170px 140px 1fr 110px;
  gap:10px;
  padding:8px;
  border-radius:10px;
  background:#fafafa;
}
.thead{background:#f0f1f3;font-weight:600}

/* Buttons in Tabellen etwas kompakter */
.table .btn{padding:6px 10px}

@media (min-width: 800px){
  .grid4{grid-template-columns:1.2fr 1fr 1.4fr 1.2fr;gap:12px}
  .form-grid{grid-template-columns:1fr 1fr}
}

@media (max-width: 700px){
  .trow{grid-template-columns:1fr}
  .thead{display:none}
  .trow > div{padding:2px 0}
}

.k { font-weight:600; opacity:.7; margin-right:6px; display:inline; }
@media (min-width: 800px){
  .k { display:none; }
}