* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: #f4f4f5;
  color: #1c1c1e;
  padding-bottom: 40px;
}
a { color: inherit; text-decoration: none; }

.topbar {
  background: #1c1c1e;
  color: #fff;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar a.back { color: #fff; font-size: 20px; }
.topbar .logout-link { color: #fff; font-size: 13px; opacity: 0.85; }
.topbar h1 { font-size: 17px; margin: 0; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.topbar h1 svg { width: 20px; height: 20px; flex-shrink: 0; }

.container { padding: 12px; max-width: 700px; margin: 0 auto; }

/* Karten (Kunden / Shootings / Rubriken) */
.card {
  background: #fff;
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.card-link { display: block; }
.card h2 { margin: 0 0 4px; font-size: 17px; }
.card .meta { color: #8e8e93; font-size: 13px; }

/* Fortschrittsbalken */
.progress-wrap {
  background: #e5e5ea;
  border-radius: 8px;
  height: 10px;
  overflow: hidden;
  margin-top: 10px;
}
.progress-bar {
  height: 100%;
  background: #34c759;
  transition: width 0.3s ease;
}
.progress-label {
  font-size: 12px;
  color: #8e8e93;
  margin-top: 4px;
  display: flex;
  justify-content: space-between;
}

/* Accordion Rubriken */
.category {
  background: #fff;
  border-radius: 14px;
  margin-bottom: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.category-header {
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.category-header h2 { font-size: 16px; margin: 0; }
.category-header .chevron { transition: transform 0.2s; color: #8e8e93; flex-shrink: 0; margin-left: 14px; }
.category-header .chevron svg { width: 20px; height: 20px; display: block; }
.category.open .chevron { transform: rotate(90deg); }
.category-body { display: none; padding: 0 16px 16px; }
.category.open .category-body { display: block; }

/* Perspektiven-Liste */
.perspective-row {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-top: 1px solid #f0f0f0;
  gap: 12px;
}
.perspective-row:first-child { border-top: none; }
.perspective-row .checkbox {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #c7c7cc;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.perspective-row.checked .checkbox {
  background: #34c759;
  border-color: #34c759;
  color: #fff;
}
.perspective-row .title { flex: 1; font-size: 15px; }
.perspective-row.checked .title { color: #8e8e93; text-decoration: line-through; }
.img-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; flex-shrink: 0; white-space: nowrap; }
.img-badge svg { width: 15px; height: 15px; flex-shrink: 0; }
.img-badge.has-images { color: #34c759; }
.img-badge.no-images { color: #c7c7cc; }
.perspective-row .arrow { color: #c7c7cc; flex-shrink: 0; margin-left: 10px; }
.perspective-row .arrow svg { width: 18px; height: 18px; display: block; }
.perspective-row .delete-icon { color: #c7c7cc; flex-shrink: 0; padding: 4px; margin: -4px 0 -4px 6px; }
.perspective-row .delete-icon svg { width: 17px; height: 17px; display: block; }
.perspective-row .delete-icon:active { color: #ff3b30; }

/* Perspektiven-Detail */
.detail-block { background: #fff; border-radius: 14px; padding: 16px; margin-bottom: 12px; }
.detail-block .label { font-size: 12px; color: #8e8e93; text-transform: uppercase; margin-bottom: 4px; }
.detail-block .value { font-size: 15px; margin-bottom: 14px; }
.detail-block .value:last-child { margin-bottom: 0; }

.big-checkbox-btn {
  width: 100%;
  padding: 16px;
  border-radius: 14px;
  border: none;
  font-size: 16px;
  font-weight: 600;
  background: #e5e5ea;
  color: #1c1c1e;
  margin-bottom: 12px;
}
.big-checkbox-btn.checked { background: #34c759; color: #fff; }

/* Swipe Galerie */
.gallery {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 8px;
  border-radius: 14px;
  -webkit-overflow-scrolling: touch;
  background: #000;
}
.gallery img {
  scroll-snap-align: center;
  flex: 0 0 85%;
  height: 280px;
  object-fit: contain;
  border-radius: 14px;
  background: #1c1c1e;
}
.gallery-empty {
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8e8e93;
  background: #f4f4f5;
  border-radius: 14px;
  font-size: 14px;
}

/* Formulare */
form.inline-form { margin-top: 12px; }
input[type=text], input[type=date], input[type=password], textarea, select {
  width: 100%;
  padding: 12px;
  border: 1px solid #d1d1d6;
  border-radius: 10px;
  font-size: 15px;
  margin-bottom: 10px;
  font-family: inherit;
}
button, .btn {
  background: #007aff;
  color: #fff;
  border: none;
  padding: 12px 18px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: inline-block;
}
button.secondary, .btn.secondary { background: #e5e5ea; color: #1c1c1e; }
button.danger { background: #ff3b30; }

.fab-add {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 8px;
  background: #fff;
  border: 2px dashed #c7c7cc;
  color: #8e8e93;
  padding: 14px;
  border-radius: 12px;
}

.login-box {
  max-width: 320px;
  margin: 80px auto;
  padding: 24px;
  background: #fff;
  border-radius: 14px;
  text-align: center;
}

.empty-state { text-align: center; color: #8e8e93; padding: 40px 16px; }