/* style_light.css — Helles, leicht farbiges Design (Standard) */

/* Farb-Variablen */
:root{
  --bg: #f9fafc;
  --card: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;
  --accent: #3b82f6;       /* Hauptakzent (Blau) */
  --accent-2: #60a5fa;
  --accent-strong: #2563eb;
  --danger: #ef4444;
  --ok: #10b981;
  --table-border: #e6eefc;
}

/* Grundlayout */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
  padding:18px;
}

/* Header / Nav */
header{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:12px;
}
.header-row{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
}
h1{margin:0;font-size:1.4rem;color:var(--text)}
nav a { color:var(--accent); text-decoration:none; margin-right:8px; font-weight:600; }
nav a:hover{ color:var(--accent-strong) }

/* Buttons */
.btn{
  display:inline-block;
  background:var(--accent);
  color:#fff;
  padding:8px 12px;
  border-radius:8px;
  text-decoration:none;
  font-size:0.95rem;
  border:0;
  cursor:pointer;
}
.btn:hover{ background:var(--accent-strong) }
.btn-danger{ background:var(--danger) }
.btn-ghost{
  background:transparent;
  border:1px solid rgba(0,0,0,0.06);
  color:var(--text);
}

/* Container / Card */
.container{ max-width:1100px; margin:0 auto; }
.card{
  background:var(--card);
  border-radius:12px;
  padding:14px;
  box-shadow:0 6px 18px rgba(15,23,42,0.04);
  margin-bottom:14px;
}

/* Filter-Form */
.filter-form{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:8px;
}
.filter-form label{ font-size:0.85rem; color:var(--muted) }
input[type="text"], input[type="date"], select, textarea{
  padding:8px 10px;
  border-radius:8px;
  border:1px solid var(--table-border);
  background:#fff;
  min-width:140px;
}
textarea{ min-height:80px; resize:vertical }

/* Table */
.table-wrap{ overflow:auto; }
table{
  width:100%;
  border-collapse:collapse;
  background:var(--card);
  border-radius:8px;
  overflow:hidden;
}
thead th{
  background: linear-gradient(180deg, rgba(59,130,246,0.95), rgba(99,102,241,0.95));
  color:#fff;
  font-weight:600;
  padding:12px 10px;
  text-align:left;
  font-size:0.9rem;
}
tbody td{
  padding:10px;
  border-bottom:1px solid var(--table-border);
  vertical-align:middle;
  font-size:0.95rem;
  color:var(--text);
}
tbody tr:hover td{ background:#fbfdff }

/* Thumbnail */
.thumb{ max-width:80px; max-height:60px; border-radius:6px; object-fit:cover; box-shadow:0 2px 6px rgba(15,23,42,0.06) }

/* Responsive: table transforms to card rows on small screens */
@media (max-width:820px){
  .filter-form{ gap:8px }
  table, thead, tbody, th, td, tr{ display:block; }
  thead{ display:none; }
  tbody tr{ margin-bottom:12px; background:var(--card); border-radius:8px; padding:10px; }
  tbody td{ display:flex; justify-content:space-between; padding:8px 6px; border:0 }
  tbody td::before{ content: attr(data-label); font-weight:600; color:var(--muted); margin-right:10px }
  .thumb{ max-width:100%; height:auto; display:block; margin-top:6px }
}

/* Forms & small utilities */
label{ display:block; font-size:0.88rem; margin-bottom:6px; color:var(--muted) }
.input-inline{ display:flex; gap:8px; align-items:center }
.small{ font-size:0.85rem; color:var(--muted) }
.footer{ margin-top:22px; color:var(--muted); font-size:0.9rem }

/* status badges */
.badge{ display:inline-block; padding:4px 8px; border-radius:999px; font-size:0.8rem; background:#eef2ff; color:var(--accent) }

/* accessibility focus */
a:focus, button:focus, input:focus, select:focus { outline:3px solid rgba(59,130,246,0.2); outline-offset:2px }

/* small screens: reduce padding */
@media (max-width:420px){
  body{ padding:10px }
  .btn{ padding:6px 10px }
  thead th, tbody td{ font-size:0.9rem }
}
	  /* === Buttons === */
.btn {
  background-color: #c49d60;
  color: #fff;
  padding: 8px 14px;
  border: none;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
  display: inline-block;
  transition: background 0.2s ease;
  cursor: pointer;
}

.btn:hover {
  background-color: #b4874f;
}

.btn:active {
  transform: scale(0.97);
}

/* Der Zurück-Button in Kopfzeile */
.header-row .btn {
  background-color: #c49d60;
  color: #fff;
  margin-left: auto;
}

/* Variante: Löschen-Button röter */
.btn-danger {
  background-color: #d9534f;
  color: #fff;
}

.btn-danger:hover {
  background-color: #c9302c;
}