body { font-family: system-ui, Arial; margin:0; background:#f6f7fb; color:#111; }
.container { max-width: 1100px; margin: 24px auto; padding: 0 16px; }

.nav { display:flex; justify-content:space-between; align-items:center; padding:12px 16px; background:#fff; border-bottom:1px solid #e6e6e6; position:sticky; top:0; }
.brand { font-weight:700; text-decoration:none; color:#0b3aa6; }
.muted { color:#666; }

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

.btn { background:#0b3aa6; color:#fff; border:none; padding:10px 14px; border-radius:10px; cursor:pointer; text-decoration:none; display:inline-block; }
.btn:hover { filter:brightness(0.95); }
.btn-ghost { background:transparent; color:#0b3aa6; border:1px solid #cdd7ff; }
.btn-danger { background:#b00020; }

.tiles { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap:16px; margin-top:18px; }
.tile { background:#0b3aa6; color:#fff; padding:26px; border-radius:18px; text-decoration:none; min-height:130px; display:flex; flex-direction:column; justify-content:center; }
.tile-title { font-size:28px; font-weight:800; }
.tile-sub { opacity:.85; margin-top:8px; }
.tile-disabled { opacity:.55; cursor:not-allowed; }

.table { width:100%; border-collapse:collapse; background:#fff; border-radius:14px; overflow:hidden; box-shadow: 0 2px 10px rgba(0,0,0,.04); }
.table th, .table td { padding:12px 12px; border-bottom:1px solid #eee; text-align:left; }
.table tr.dblclick:hover, .table tr.dbl:hover { background:#f0f5ff; cursor: pointer; }

.search, .searchbar { display:flex; gap:10px; margin:14px 0; align-items:center; }
.search input, .searchbar input { flex:1; padding:10px 12px; border-radius:10px; border:1px solid #ddd; }

label { display:block; margin-top:12px; font-weight:600; }
input, textarea, select { width:100%; padding:10px 12px; border-radius:10px; border:1px solid #ddd; box-sizing:border-box; }
textarea { resize:vertical; }

.alert { background:#fff4f4; border:1px solid #ffd2d2; padding:12px; border-radius:12px; margin:12px 0; }
.form-sep { height: 18px; }

.tabs { display:flex; gap:10px; margin:10px 0 16px; flex-wrap:wrap; }
.tab { padding:10px 14px; border:1px solid #ddd; border-radius:12px; text-decoration:none; color:#111; background:#fff; }
.tab.active { background:#0b3aa6; border-color:#0b3aa6; color:#fff; }

.foto-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:14px; margin-top:12px; }
.foto-card { border:1px solid #ddd; border-radius:14px; overflow:hidden; background:#fff; cursor:pointer; }
.foto-preview { width:100%; aspect-ratio: 4 / 3; background:#f2f2f2; }
.foto-preview img { width:100%; height:100%; object-fit:cover; display:block; }
.foto-meta { padding:10px 12px; }

.foto-draggable { user-select: none; }
.foto-draggable.dragging { opacity: 0.6; outline: 2px dashed #0b3aa6; }

/* Faktura: 2 Spalten */
.grid2 { display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
@media (max-width: 900px) { .grid2 { grid-template-columns: 1fr; } }

.pager { display:flex; gap:8px; align-items:center; justify-content:center; margin:14px 0; }
.pager-info { color:#666; }

/* ===== Login ===== */

.login-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #eef2fb, #f7f9ff);
}

.login-card {
  width: 100%;
  max-width: 420px;
  background: #ffffff;
  padding: 34px 36px 38px;
  border-radius: 20px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.08);
}

.login-header {
  text-align: center;
  margin-bottom: 26px;
}

.login-brand {
  font-size: 26px;
  font-weight: 800;
  color: #0b3aa6;
  letter-spacing: 0.4px;
}

.login-sub {
  font-size: 14px;
  color: #666;
  margin-top: 4px;
  letter-spacing: 0.3px;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.login-form label {
  font-weight: 600;
  margin-bottom: 2px;
}

.login-form input {
  width: 100%;
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid #d6d9e0;
  font-size: 14px;
}

.login-form input:focus {
  outline: none;
  border-color: #0b3aa6;
  box-shadow: 0 0 0 2px rgba(11, 58, 166, 0.15);
}

.login-btn {
  margin-top: 10px;
  padding: 12px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 12px;
}