/* SP Kundenverwaltung – Frontend / Kundenportal Styles */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap');

:root {
  --sp-black:  #0a0a0f;
  --sp-dark:   #111118;
  --sp-panel:  #16161f;
  --sp-border: #2a2a3a;
  --sp-border2:#3a3a4a;
  --sp-gold:   #c8a84b;
  --sp-goldl:  #e2c97e;
  --sp-goldd:  rgba(200,168,75,.14);
  --sp-text:   #e8e8f0;
  --sp-muted:  #7a7a9a;
  --sp-green:  #4aA870;
  --sp-red:    #c05050;
  --sp-orange: #c07840;
  --sp-blue:   #4a6fa5;
  --ff-d: 'Bebas Neue', sans-serif;
  --ff-b: 'DM Sans', sans-serif;
  --ff-m: 'DM Mono', monospace;
}

/* ── Outer Wrap ─────────────────────────────────────────── */
.spfe-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 32px 20px 60px;
  font-family: var(--ff-b);
  color: var(--sp-text);
  box-sizing: border-box;
}
.spfe-wrap *, .spfe-wrap *::before, .spfe-wrap *::after { box-sizing: border-box; }

/* ── Header ─────────────────────────────────────────────── */
.spfe-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0 24px;
  border-bottom: 1px solid var(--sp-border);
  margin-bottom: 28px;
}
.spfe-brand {
  font-family: var(--ff-d);
  font-size: 26px;
  letter-spacing: 2px;
  color: var(--sp-gold);
}
.spfe-header-logo {
  max-height: 44px;
  width: auto;
}
.spfe-user-chip {
  font-size: 13px;
  font-weight: 500;
  background: var(--sp-goldd);
  color: var(--sp-gold);
  border: 1px solid rgba(200,168,75,.22);
  padding: 5px 12px;
  border-radius: 20px;
}
.spfe-project-nr {
  font-family: var(--ff-m);
  font-size: 13px;
  color: var(--sp-muted);
  margin-top: 2px;
}

/* ── Welcome ────────────────────────────────────────────── */
.spfe-welcome {
  font-family: var(--ff-d);
  font-size: 28px;
  letter-spacing: 1px;
  margin-bottom: 24px;
  color: var(--sp-text);
}
.spfe-welcome span { color: var(--sp-muted); font-size: 16px; display: block; margin-bottom: 2px; font-family: var(--ff-b); letter-spacing: 0; }

/* ── Login Box ──────────────────────────────────────────── */
.spfe-login-box {
  max-width: 420px;
  margin: 40px auto;
  background: var(--sp-panel);
  border: 1px solid var(--sp-border);
  border-radius: 16px;
  padding: 36px 32px;
  text-align: center;
}
.spfe-logo {
  font-family: var(--ff-d);
  font-size: 32px;
  letter-spacing: 3px;
  color: var(--sp-gold);
  margin-bottom: 24px;
}
.spfe-login-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 6px;
}
.spfe-login-sub {
  font-size: 13px;
  color: var(--sp-muted);
  margin-bottom: 28px;
}

/* ── OTP Inputs ─────────────────────────────────────────── */
.spfe-otp-info {
  font-size: 13px;
  color: var(--sp-muted);
  margin-bottom: 20px;
  line-height: 1.5;
}
.spfe-otp-inputs {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 20px;
}
.spfe-otp-digit {
  width: 48px !important;
  height: 56px;
  text-align: center;
  font-size: 22px !important;
  font-family: var(--ff-m) !important;
  font-weight: 500;
  background: var(--sp-dark) !important;
  border: 2px solid var(--sp-border) !important;
  border-radius: 10px !important;
  color: var(--sp-text) !important;
  transition: border-color .15s, box-shadow .15s;
  padding: 0 !important;
}
.spfe-otp-digit:focus {
  outline: none !important;
  border-color: var(--sp-gold) !important;
  box-shadow: 0 0 0 3px rgba(200,168,75,.15);
}
.spfe-otp-digit.filled {
  border-color: var(--sp-gold) !important;
  color: var(--sp-gold) !important;
}

/* ── Datenschutz ────────────────────────────────────────── */
.spfe-datenschutz-text {
  background: var(--sp-dark);
  border: 1px solid var(--sp-border);
  border-radius: 8px;
  padding: 16px;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(232,232,240,.8);
  text-align: left;
  margin-bottom: 20px;
  max-height: 200px;
  overflow-y: auto;
}

/* ── Buttons ────────────────────────────────────────────── */
.spfe-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: all .15s;
  font-family: var(--ff-b);
  text-decoration: none;
  line-height: 1;
}
.spfe-btn-primary {
  background: var(--sp-gold);
  color: #000;
  width: 100%;
  margin-top: 4px;
  font-size: 15px;
  padding: 14px;
}
.spfe-btn-primary:hover { background: var(--sp-goldl); }
.spfe-btn-ghost {
  background: transparent;
  color: var(--sp-muted);
  border: 1px solid transparent;
  font-size: 13px;
}
.spfe-btn-ghost:hover { color: var(--sp-text); background: rgba(255,255,255,.04); }
.spfe-btn-sm { padding: 7px 14px; font-size: 12px; width: auto; }
.spfe-btn-large { font-size: 16px; padding: 16px; margin-top: 8px; }
.spfe-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ── Forms ──────────────────────────────────────────────── */
.spfe-section-title {
  font-family: var(--ff-d);
  font-size: 22px;
  letter-spacing: 1px;
  color: var(--sp-gold);
  margin-bottom: 6px;
}
.spfe-intro {
  font-size: 13px;
  color: var(--sp-muted);
  margin-bottom: 24px;
  line-height: 1.6;
}
.spfe-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.spfe-span-2 { grid-column: span 2; }
.spfe-form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.spfe-form-group label {
  font-size: 10px;
  color: var(--sp-muted);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 600;
}
.spfe-wrap input[type=text],
.spfe-wrap input[type=email],
.spfe-wrap input[type=number],
.spfe-wrap select,
.spfe-wrap textarea {
  background: var(--sp-dark);
  border: 1px solid var(--sp-border);
  border-radius: 8px;
  padding: 10px 13px;
  color: var(--sp-text);
  font-size: 14px;
  font-family: var(--ff-b);
  transition: border-color .15s;
  width: 100%;
}
.spfe-wrap input:focus, .spfe-wrap select:focus, .spfe-wrap textarea:focus {
  outline: none;
  border-color: var(--sp-gold);
}
.spfe-wrap textarea { resize: vertical; min-height: 100px; }
.spfe-wrap select option { background: var(--sp-dark); }
.spfe-wrap input::placeholder, .spfe-wrap textarea::placeholder { color: var(--sp-muted); }

/* ── Cards ──────────────────────────────────────────────── */
.spfe-card {
  background: var(--sp-panel);
  border: 1px solid var(--sp-border);
  border-radius: 12px;
  padding: 22px;
  margin-bottom: 16px;
}
.spfe-card-title {
  font-family: var(--ff-d);
  font-size: 16px;
  letter-spacing: 1px;
  color: var(--sp-text);
  margin-bottom: 16px;
}
.spfe-subsection-title {
  font-size: 12px;
  color: var(--sp-muted);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 16px 0 10px;
  font-weight: 600;
}

/* ── Flurstücke ─────────────────────────────────────────── */
.spfe-fs-section { margin-top: 16px; border-top: 1px solid var(--sp-border); padding-top: 16px; }
.spfe-fs-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 10px;
}
.spfe-btn-remove-fs {
  background: rgba(192,80,80,.12);
  color: var(--sp-red);
  border: 1px solid rgba(192,80,80,.25);
  border-radius: 8px;
  width: 36px;
  height: 40px;
  cursor: pointer;
  font-size: 14px;
  transition: background .15s;
}
.spfe-btn-remove-fs:hover { background: rgba(192,80,80,.22); }

/* ── Projekt Cards ──────────────────────────────────────── */
.spfe-projekt-card {
  background: var(--sp-panel);
  border: 1px solid var(--sp-border);
  border-radius: 12px;
  margin-bottom: 20px;
  overflow: hidden;
}
.spfe-projekt-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--sp-border);
}
.spfe-projekt-nr {
  font-family: var(--ff-d);
  font-size: 26px;
  letter-spacing: 2px;
  color: var(--sp-gold);
  line-height: 1;
}
.spfe-projekt-name {
  font-size: 15px;
  color: rgba(232,232,240,.7);
  margin-top: 4px;
}

/* ── Badges ─────────────────────────────────────────────── */
.spfe-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.spfe-badge-gold   { background: var(--sp-goldd); color: var(--sp-gold); border: 1px solid rgba(200,168,75,.22); }
.spfe-badge-green  { background: rgba(74,168,112,.1); color: var(--sp-green); border: 1px solid rgba(74,168,112,.22); }
.spfe-badge-red    { background: rgba(192,80,80,.1); color: var(--sp-red); border: 1px solid rgba(192,80,80,.22); }
.spfe-badge-orange { background: rgba(192,120,64,.1); color: var(--sp-orange); border: 1px solid rgba(192,120,64,.22); }
.spfe-badge-blue   { background: rgba(74,111,165,.1); color: var(--sp-blue); border: 1px solid rgba(74,111,165,.22); }
.spfe-badge-muted  { background: rgba(122,122,154,.1); color: var(--sp-muted); border: 1px solid rgba(122,122,154,.18); }

/* ── Timeline ───────────────────────────────────────────── */
.spfe-updates-section { padding: 18px 22px; }
.spfe-updates-title {
  font-size: 11px;
  color: var(--sp-muted);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 14px;
  font-weight: 600;
}
.spfe-timeline { position: relative; padding-left: 22px; }
.spfe-timeline::before {
  content: '';
  position: absolute;
  left: 6px; top: 6px; bottom: 6px;
  width: 2px;
  background: var(--sp-border);
  border-radius: 2px;
}
.spfe-timeline-item { position: relative; margin-bottom: 18px; }
.spfe-timeline-item:last-child { margin-bottom: 0; }
.spfe-timeline-dot {
  position: absolute;
  left: -19px;
  top: 5px;
  width: 10px;
  height: 10px;
  background: var(--sp-gold);
  border-radius: 50%;
  border: 2px solid var(--sp-panel);
}
.spfe-timeline-date {
  font-size: 11px;
  color: var(--sp-muted);
  font-family: var(--ff-m);
  margin-bottom: 3px;
}
.spfe-timeline-title { font-weight: 600; font-size: 14px; margin-bottom: 4px; }
.spfe-timeline-text  { font-size: 13px; color: rgba(232,232,240,.7); line-height: 1.6; }

/* ── Notices ────────────────────────────────────────────── */
.spfe-notice { padding: 12px 16px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; }
.spfe-notice-success { background: rgba(74,168,112,.1); border: 1px solid rgba(74,168,112,.25); color: var(--sp-green); }
.spfe-notice-error   { background: rgba(192,80,80,.1); border: 1px solid rgba(192,80,80,.25); color: var(--sp-red); }
.spfe-notice-info    { background: rgba(74,111,165,.1); border: 1px solid rgba(74,111,165,.25); color: var(--sp-blue); }

/* ── Errors ─────────────────────────────────────────────── */
.spfe-error {
  font-size: 13px;
  color: var(--sp-red);
  margin-top: 10px;
  padding: 10px 14px;
  background: rgba(192,80,80,.08);
  border-radius: 6px;
  border: 1px solid rgba(192,80,80,.2);
}

/* ── Spinner ────────────────────────────────────────────── */
.spfe-spinner {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid rgba(0,0,0,.2);
  border-top-color: #000;
  border-radius: 50%;
  animation: sp-spin .6s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}
@keyframes sp-spin { to { transform: rotate(360deg); } }

/* ── Stars ──────────────────────────────────────────────── */
.spfe-stars { display: flex; justify-content: center; gap: 8px; margin: 16px 0; }
.spfe-star {
  font-size: 40px;
  color: var(--sp-border2);
  cursor: pointer;
  transition: color .15s, transform .1s;
  line-height: 1;
}
.spfe-star:hover, .spfe-star.active { color: var(--sp-gold); transform: scale(1.1); }

/* ── Checkbox row ───────────────────────────────────────── */
.spfe-check-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.spfe-check-row input[type=checkbox] {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px;
  margin-top: 2px;
  accent-color: var(--sp-gold);
}
.spfe-check-row label {
  font-size: 13px;
  color: rgba(232,232,240,.8);
  line-height: 1.5;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 400 !important;
  cursor: pointer;
}

/* ── Success screen ─────────────────────────────────────── */
.spfe-success-screen {
  text-align: center;
  padding: 48px 20px;
}
.spfe-success-icon { font-size: 56px; margin-bottom: 16px; }
.spfe-success-title { font-family: var(--ff-d); font-size: 28px; letter-spacing: 1px; color: var(--sp-green); margin-bottom: 8px; }
.spfe-success-text  { font-size: 14px; color: var(--sp-muted); }

/* ── Loading overlay ────────────────────────────────────── */
.spfe-loading {
  opacity: .5;
  pointer-events: none;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 600px) {
  .spfe-login-box { padding: 24px 18px; }
  .spfe-form-grid { grid-template-columns: 1fr; }
  .spfe-span-2 { grid-column: span 1; }
  .spfe-fs-row { grid-template-columns: 1fr 1fr; }
  .spfe-fs-row .spfe-form-group:last-of-type { grid-column: span 2; }
  .spfe-otp-digit { width: 40px !important; height: 48px; font-size: 18px !important; }
  .spfe-projekt-header { flex-direction: column; gap: 10px; }
}