/* ── Grundeinstellungen ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Segoe UI', Arial, sans-serif;
  background: #f0f4f8;
  color: #1a202c;
  line-height: 1.6;
}

.container { max-width: 800px; margin: 0 auto; padding: 0 1.5rem; }

/* ── Header ─────────────────────────────────────────────────────────── */
header {
  background: linear-gradient(135deg, #1a365d, #2b6cb0);
  color: white;
  padding: 2.5rem 0;
  text-align: center;
}
header h1 { font-size: 2.2rem; margin-bottom: .5rem; }
header p  { font-size: 1.1rem; opacity: .85; }

/* ── Info-Boxen ─────────────────────────────────────────────────────── */
.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 2rem 0;
}
.info-box {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.info-box .icon { font-size: 2.5rem; display: block; margin-bottom: .5rem; }
.info-box h3    { font-size: 1.1rem; margin-bottom: .4rem; color: #2b6cb0; }
.info-box p     { font-size: .9rem; color: #666; }

/* ── Formular-Karte ─────────────────────────────────────────────────── */
.form-card {
  background: white;
  border-radius: 16px;
  padding: 2.5rem;
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
  margin-bottom: 3rem;
}
.form-card h2    { font-size: 1.6rem; color: #1a365d; margin-bottom: .5rem; }
.form-card .subtitle { color: #666; margin-bottom: 2rem; }

/* ── Formular-Elemente ──────────────────────────────────────────────── */
.form-gruppe { margin-bottom: 1.4rem; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

label {
  display: block;
  font-weight: 600;
  margin-bottom: .4rem;
  color: #2d3748;
  font-size: .95rem;
}
label small { font-weight: 400; color: #888; }

input[type="text"],
input[type="email"],
input[type="tel"] {
  width: 100%;
  padding: .75rem 1rem;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color .2s;
}
input:focus {
  outline: none;
  border-color: #2b6cb0;
}
input.ungueltig { border-color: #e53e3e; }

/* ── Sparten-Auswahl ────────────────────────────────────────────────── */
.sparten-auswahl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
}
.sparte-option { cursor: pointer; }
.sparte-option input { display: none; } /* Radio-Button verstecken */
.sparte-option span {
  display: block;
  padding: .85rem;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  text-align: center;
  font-weight: 500;
  transition: all .2s;
}
.sparte-option input:checked + span {
  border-color: #2b6cb0;
  background: #ebf4ff;
  color: #2b6cb0;
}
.sparte-option:hover span { border-color: #90cdf4; }

/* ── Upload-Bereich ─────────────────────────────────────────────────── */
.upload-bereich {
  position: relative;
  border: 2px dashed #cbd5e0;
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: all .2s;
}
.upload-bereich:hover,
.upload-bereich.dragover { border-color: #2b6cb0; background: #ebf4ff; }
.upload-bereich input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}
.upload-icon { font-size: 3rem; display: block; margin-bottom: .5rem; }
.upload-info { font-size: .85rem; color: #888; margin-top: .25rem; }
.datei-info {
  margin-top: .75rem;
  background: #ebf4ff;
  color: #2b6cb0;
  padding: .6rem 1rem;
  border-radius: 8px;
  font-size: .9rem;
}

/* ── DSGVO ──────────────────────────────────────────────────────────── */
.dsgvo { background: #f7fafc; padding: 1rem 1.25rem; border-radius: 8px; }
.checkbox-label {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  cursor: pointer;
  font-weight: 400;
}
.checkbox-label input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-top: .1rem;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: #2b6cb0;
}

/* ── Fehler ─────────────────────────────────────────────────────────── */
.fehler-text {
  color: #e53e3e;
  font-size: .85rem;
  margin-top: .3rem;
  display: block;
}

/* ── Button ─────────────────────────────────────────────────────────── */
.btn-submit {
  width: 100%;
  padding: 1rem;
  background: #2b6cb0;
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: .5rem;
  transition: background .2s;
}
.btn-submit:hover:not(:disabled) { background: #1a365d; }
.btn-submit:disabled { opacity: .6; cursor: not-allowed; }
.pflichtfelder-hinweis { font-size: .85rem; color: #888; margin-top: .75rem; }

/* ── Meldungen ──────────────────────────────────────────────────────── */
.meldung {
  padding: 1rem 1.5rem;
  border-radius: 10px;
  margin-bottom: 1.5rem;
  font-weight: 500;
}
.meldung.erfolg { background: #c6f6d5; color: #276749; border: 1px solid #9ae6b4; }
.meldung.fehler { background: #fed7d7; color: #9b2c2c; border: 1px solid #fc8181; }
.versteckt { display: none; }

/* ── Footer ─────────────────────────────────────────────────────────── */
footer {
  background: #1a202c;
  color: #a0aec0;
  padding: 1.5rem 0;
  text-align: center;
  font-size: .9rem;
}
footer a { color: #90cdf4; text-decoration: none; }

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .info-grid       { grid-template-columns: 1fr; }
  .form-row        { grid-template-columns: 1fr; }
  .sparten-auswahl { grid-template-columns: 1fr; }
  .form-card       { padding: 1.5rem; }
}