:root {
  --beige: #f2c783;
  --hell: #faf8f4;
  --grau: #e6e4e0;
  --blau: #3b4a5a;
  --orange: #e38a1d;
  --akzent: #005b9e;
  --rot: #c0392b;
  --gruen: #2e7d32;
  --text: #222;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  min-height: 100%;
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  background: linear-gradient(180deg, var(--beige) 0%, var(--hell) 100%);
  color: var(--text);
  display: flex;
  flex-direction: column;
}

header {
  background: var(--blau);
  color: white;
  width: 100%;
  padding: 1em;
  padding-top: 3.2em;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  position: relative;
}
header h1 { font-weight: 500; letter-spacing: 0.5px; margin-bottom: 0.2em; font-size: 1.3em; }
header small { font-size: 0.9em; color: #ddd; }

main {
  flex: 1;
  width: 95%;
  max-width: 1100px;
  margin: 1.5em auto;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  padding: 2em;
}

footer {
  background: var(--blau);
  color: white;
  text-align: center;
  padding: 1em 0;
  font-size: 0.9em;
  width: 100%;
  margin-top: auto;
}

.back-btn, .add-btn, .btn {
  background: var(--orange);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 0.6em 1.2em;
  font-size: 1em;
  cursor: pointer;
  transition: background 0.2s;
  text-decoration: none;
  display: inline-block;
}
.back-btn { position: absolute; left: 1em; top: 1em; padding: 0.4em 0.8em; min-height: auto; }
.btn:hover, .add-btn:hover, .back-btn:hover { background: var(--akzent); }
.btn-secondary { background: var(--grau); color: var(--text); }
.btn-secondary:hover { background: #ccc; }
.btn-danger { background: var(--rot); }
.btn-danger:hover { background: #8e2a1f; }

.logout-btn { position: absolute; right: 1em; top: 1em; min-height: auto; }

form { background: var(--hell); border-radius: 12px; padding: 1.5em; margin: 1.5em 0; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
label { display: block; margin: 0.8em 0 0.3em; text-align: left; font-weight: 500; }
input, select, textarea { width: 100%; padding: 0.6em; border-radius: 6px; border: 1px solid #bbb; font-size: 16px; background: #fff; }

button, .btn, .add-btn, .back-btn { min-height: 44px; }

.table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 1.5em; }
.table-scroll table { margin-top: 0; }
table { width: 100%; border-collapse: collapse; margin-top: 1.5em; }
th, td { border-bottom: 1px solid #ddd; padding: 0.7em; text-align: center; white-space: nowrap; }
th { background: var(--blau); color: white; font-weight: 500; }

.tent-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1em; margin-top: 1em; }
.tent-card { background: var(--grau); border-radius: 10px; padding: 1em; text-align: center; text-decoration: none; color: var(--text); font-weight: 600; box-shadow: 0 2px 5px rgba(0,0,0,0.15); transition: all 0.15s; }
.tent-card:hover { background: var(--orange); color: white; transform: translateY(-2px); }
.tent-card.has-defects { border: 2px solid var(--rot); }

.tent-select-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 0.6em; max-height: 360px; overflow-y: auto; background: var(--hell); border: 1px solid #bbb; border-radius: 8px; padding: 0.8em; }
.tent-select-card { background: white; border: 2px solid var(--grau); border-radius: 8px; padding: 0.7em 0.4em; text-align: center; font-weight: 600; cursor: pointer; user-select: none; transition: all 0.15s; }
.tent-select-card:hover { border-color: var(--akzent); }
.tent-select-card.selected { background: var(--orange); color: white; border-color: var(--orange); }
.badge { display: inline-block; padding: 0.15em 0.5em; border-radius: 10px; font-size: 0.75em; margin-top: 0.3em; }
.badge-ok { background: var(--gruen); color: white; }
.badge-defect { background: var(--rot); color: white; }

.section-title { margin: 1.5em 0 0.5em; color: var(--blau); border-bottom: 2px solid var(--grau); padding-bottom: 0.3em; }

.defect-row { display: grid; grid-template-columns: 1fr 1fr 1.4fr 0.8fr 2fr auto; gap: 0.5em; align-items: end; margin-bottom: 0.6em; }
.defect-row label { margin: 0 0 0.2em; font-size: 0.85em; }
.zone-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, 1fr); gap: 4px; max-width: 220px; margin: 0.5em 0; }
.zone-grid div { background: var(--grau); border: 1px solid #999; padding: 0.6em; text-align: center; font-size: 0.85em; border-radius: 4px; }

.completeness-row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 0.5em; align-items: center; margin-bottom: 0.4em; }

.sig-block { width: 100%; margin-bottom: 1.2em; }
.sig-block-header { display: flex; justify-content: space-between; align-items: center; }
.sig-wrapper { position: relative; width: 100%; background: white; }
.sig-pad { border: 1px solid #bbb; border-radius: 8px; background: white; width: 100%; height: 180px; touch-action: none; display: block; }
.sig-wrapper.sig-fullscreen { display: flex; align-items: center; justify-content: center; padding: 1em; }
.sig-wrapper.sig-fullscreen .sig-pad { height: 100vh; max-height: 100%; }
.sig-actions { margin-top: 0.4em; display: flex; gap: 0.6em; flex-wrap: wrap; }
.sig-fullscreen-btn { background: var(--akzent); color: white; }
.sig-fullscreen-btn:hover { background: var(--blau); }

.offline-banner { background: var(--rot); color: white; text-align: center; padding: 0.5em; font-size: 0.9em; }
.legend { font-size: 0.85em; background: var(--hell); padding: 0.8em; border-radius: 8px; margin: 1em 0; }
.legend code { background: var(--grau); padding: 0.1em 0.4em; border-radius: 4px; }

.toolbar { display: flex; gap: 0.6em; flex-wrap: wrap; align-items: center; margin-bottom: 1em; }
.toolbar input, .toolbar select { width: auto; }

@media (max-width: 700px) {
  main { padding: 1.2em; width: 95%; }
  th, td { font-size: 0.85em; }
  .defect-row { grid-template-columns: 1fr; }
  .completeness-row { grid-template-columns: 1.6fr 0.8fr 0.8fr 0.6fr; gap: 0.3em; font-size: 0.9em; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .toolbar input, .toolbar select { width: 100%; }
}

@media (max-width: 480px) {
  header { padding-top: 3.6em; }
  header h1 { font-size: 1.1em; }
  .back-btn, .logout-btn { font-size: 0.85em; padding: 0.4em 0.6em; }
}

.print-sig-row { display: flex; gap: 2em; flex-wrap: wrap; }
.print-sig { flex: 1; min-width: 200px; }
.print-sig img { max-width: 100%; border: 1px solid #bbb; border-radius: 8px; margin-top: 0.4em; }

@media print {
  .no-print { display: none !important; }
  body { background: white; }
  main { box-shadow: none; padding: 0; max-width: 100%; }
  footer { display: none; }
}