:root {  --brand-light: #517fe4;
  --brand: #0546a8;
  --brand-dark: #35a1e0c7;
  --brand-hover: #1d4d37;
  --text:#1f2937; --muted:#6b7280; --card:#ffffff; --border:#e5e7eb; --bg:#f9fafb;
  --header-h: 60px; --footer-h: 50px;
  --radius: 12px; --shadow: 0 8px 20px rgba(0,0,0,0.08); --shadow-soft: 0 4px 12px rgba(0,0,0,.05);
  --status-ok-bg: #d1fae5; --status-ok-text: #065f46;
  --status-no-bg: #fee2e2; --status-no-text: #991b1b;
  --status-offen-bg: #e0e7ff; --status-offen-text: #3730a3;
}

* { box-sizing: border-box; }
html,body { height:100%; margin:0; padding:0; }

body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: url('../img/bg_dogs.png') no-repeat center center fixed;
  background-size: cover;
  color: var(--text);
}

/* Overlay für bessere Lesbarkeit */
.content-wrapper {
  padding-top: var(--header-h);
  padding-bottom: var(--footer-h);
  min-height: 100vh;
  background: rgba(255,255,255,0.9);
}

/* Container */
.container {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
  padding: 24px;
}

/* === Topbar === */
.topbar {
  position: fixed; top:0; left:0; right:0; z-index:1100;
  height: var(--header-h);
  background: linear-gradient(180deg, var(--brand) 0%, #27a662 100%);
  color:#fff; display:flex; align-items:center; gap:14px; padding: 0 24px;
  box-shadow: 0 6px 18px rgba(47,179,111,.25);
}
.brand { display:flex; align-items:center; gap:12px; font-weight:800; font-size:1.25rem; }
.brand img { width:32px; height:32px; border-radius:6px; }
.topbar nav { margin-left:auto; display:flex; align-items:center; gap:12px; }
.topbar nav a {
  color:#fff; text-decoration:none; padding:8px 14px; border-radius:8px;
  font-weight:600; transition: background .2s ease, transform .15s ease;
}
.topbar nav a:hover { background:rgba(255,255,255,.16); transform: translateY(-1px); }

/* === Einheitliche Navbar-Suche (Chip + Text + Barcode) === */
.search-form {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.2);
  border-radius: 8px;
  padding: 2px 6px;
}
.search-form input {
  border: none;
  background: transparent;
  color: #fff;
  padding: 6px 8px;
  font-size: 0.9rem;
  width: 200px;
  outline: none;
}
.search-form input::placeholder { color: rgba(255,255,255,0.7); }
.search-form button {
  background: #fff; color: var(--brand);
  border: none; border-radius: 6px;
  padding: 6px 10px; font-size: 0.85rem; font-weight: 600;
  cursor: pointer; transition: all 0.2s ease;
}
.search-form button:hover { background: var(--brand-dark); color: #fff; }

.search-results {
  position: absolute; top: 110%; left: 0; width: 100%;
  background: #fff; border: 1px solid var(--border);
  border-radius: 6px; box-shadow: var(--shadow-soft);
  max-height: 220px; overflow-y: auto; z-index: 3000; display: none;
}
.search-results div {
  padding: 8px 10px; cursor: pointer; font-size: 0.9rem; color: var(--text);
}
.search-results div:hover { background: var(--brand-soft); color: var(--brand-dark); }

/* === Footer === */
.site-footer {
  position: fixed; left:0; right:0; bottom:0; z-index:1100;
  height: var(--footer-h);
  background: rgba(255,255,255,0.95); border-top:1px solid var(--border);
}
.footer-inner {
  display:flex; align-items:center; justify-content:space-between;
  height: 100%; max-width: 1600px; margin: 0 auto; padding: 0 24px;
}
.footer-nav a { color:var(--muted); margin-left:12px; text-decoration:none; }

/* === Cards & Tables === */
.cards {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:16px; margin:20px 0; width:100%;
}
.card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); padding:24px; box-shadow:var(--shadow-soft);
}
.card .label { color:var(--muted); font-size:.95rem; margin-bottom:6px }
.card .value { font-size:1.9rem; font-weight:800; color:var(--brand) }

.table-like {
  background:#fff; border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow-soft);
  overflow-x:auto; width:100%; margin-bottom:20px;
}
.table-like .head, .table-like .row {
  display:grid; gap:1rem; padding:12px 16px;
  border-bottom:1px solid var(--border); align-items:center;
}
.table-like .row:last-child { border-bottom: none; }
.table-like .row:hover { background-color: var(--brand-soft); }
.table-like .head {
  background-color: #f9fafb; font-weight:600; color: var(--muted);
  font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em;
}

/* === Buttons === */
button, a.button {
  display:inline-block; margin-top:12px; padding:10px 16px;
  border-radius:10px; border:0;
  background:var(--brand); color:#fff; font-weight:700; text-decoration:none;
  cursor:pointer; box-shadow:0 4px 12px rgba(47,179,111,.2);
  transition: all .2s ease;
}
button:hover,a.button:hover {
  background:var(--brand-dark);
  transform: translateY(-1px);
  box-shadow:0 6px 16px rgba(47,179,111,.25);
}

/* === Badges === */
.badge { display:inline-flex; padding:0.25rem 0.75rem; border-radius:9999px; font-size:0.75rem; font-weight:600; line-height:1; text-transform:capitalize; }
.badge.status-ok { background-color: var(--status-ok-bg); color: var(--status-ok-text); }
.badge.status-no { background-color: var(--status-no-bg); color: var(--status-no-text); }
.badge.status-offen { background-color: var(--status-offen-bg); color: var(--status-offen-text); }

/* === Stammdaten-Logo oben rechts === */
.stammdaten-logo {
  position: absolute; top: var(--header-h); right: 20px; z-index: 500;
}
.stammdaten-logo img {
  max-height: 80px;
  width: auto;
  object-fit: contain;
}
/* === Einheitliche Formulare für HundeCoach === */
.form-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  padding: 24px;
  max-width: 900px;
  margin: 20px auto;
  display: grid;
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
}
.form-group.two-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-group label {
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 0.95rem;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 1rem;
  background: #fff;
  width: 100%;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--brand);
  outline: none;
  box-shadow: 0 0 0 3px var(--brand-soft);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* Vorschau Boxen */
.sachkunde-preview,
.chip-box {
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 10px;
  margin-top: 10px;
  font-size: 0.9rem;
}

.preview-img {
  max-width: 250px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-top: 5px;
}

.preview-pdf {
  width: 100%;
  max-width: 400px;
  height: 300px;
  border: 1px solid #ccc;
  margin-top: 5px;
}

.chip-status {
  margin-top: 10px;
  font-size: 0.9rem;
  color: #333;
}

.chip-box h4 {
  margin: 0 0 6px 0;
  font-size: 1rem;
  color: #065f46;
}
.chip-box ul {
  margin: 0;
  padding-left: 20px;
}