:root {
  --farbe-primaer: #c8102e;
  --farbe-primaer-dunkel: #94001f;
  --farbe-text: #1a1a1a;
  --farbe-hintergrund: #ffffff;
  --farbe-flaeche: #f7f2ee;
  --farbe-rand: #d9d0c8;
  --farbe-fehler: #b3001b;
  --farbe-fehler-flaeche: #fdecec;
  --farbe-erfolg: #1b7a3d;
  --farbe-erfolg-flaeche: #eaf6ee;
  --radius: 12px;
}

* {
  box-sizing: border-box;
}

html {
  font-size: 18px;
}

body {
  margin: 0;
  font-family: "Segoe UI", Verdana, Arial, sans-serif;
  color: var(--farbe-text);
  background: var(--farbe-flaeche);
  line-height: 1.5;
}

header.kopf {
  background: var(--farbe-primaer);
  color: #fff;
  padding: 1.25rem 1rem;
}

header.kopf h1 {
  margin: 0;
  font-size: 1.3rem;
}

main {
  max-width: 640px;
  margin: 0 auto;
  padding: 1.25rem 1rem 4rem;
}

.karte {
  background: var(--farbe-hintergrund);
  border: 1px solid var(--farbe-rand);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
}

h2 {
  font-size: 1.15rem;
  margin-top: 0;
}

label {
  display: block;
  font-weight: 600;
  margin: 1rem 0 0.35rem;
}

input[type="text"],
input[type="date"],
input[type="email"],
input[type="tel"],
select {
  width: 100%;
  padding: 0.75rem;
  font-size: 1rem;
  border: 2px solid var(--farbe-rand);
  border-radius: 8px;
  font-family: inherit;
}

input:focus,
select:focus,
button:focus,
a:focus {
  outline: 3px solid #0a58ca;
  outline-offset: 2px;
}

button,
.knopf {
  display: inline-block;
  font-size: 1.05rem;
  font-weight: 600;
  padding: 0.85rem 1.5rem;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  margin-top: 1.25rem;
  margin-right: 0.75rem;
}

.knopf-primaer {
  background: var(--farbe-primaer);
  color: #fff;
}

.knopf-primaer:hover {
  background: var(--farbe-primaer-dunkel);
}

.knopf-sekundaer {
  background: #fff;
  color: var(--farbe-primaer);
  border: 2px solid var(--farbe-primaer);
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.hinweis {
  font-size: 0.9rem;
  color: #555;
}

.fehler {
  background: var(--farbe-fehler-flaeche);
  color: var(--farbe-fehler);
  border: 1px solid var(--farbe-fehler);
  border-radius: 8px;
  padding: 0.9rem 1rem;
  margin: 1rem 0;
  font-weight: 600;
}

.erfolg {
  background: var(--farbe-erfolg-flaeche);
  color: var(--farbe-erfolg);
  border: 1px solid var(--farbe-erfolg);
  border-radius: 8px;
  padding: 0.9rem 1rem;
  margin: 1rem 0;
  font-weight: 600;
}

.feld-anzeige {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--farbe-rand);
}

.feld-anzeige .bezeichnung {
  color: #555;
  flex-shrink: 0;
}

.checkbox-zeile {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-top: 0.75rem;
}

.checkbox-zeile input[type="checkbox"] {
  width: 1.3rem;
  height: 1.3rem;
  margin-top: 0.15rem;
}

footer {
  text-align: center;
  font-size: 0.85rem;
  color: #666;
  padding: 1.5rem 1rem;
}

footer a {
  color: #555;
}

.versteckt {
  display: none !important;
}

.lade-spinner {
  display: inline-block;
  width: 1.2rem;
  height: 1.2rem;
  border: 3px solid #ffffff88;
  border-top-color: #fff;
  border-radius: 50%;
  animation: drehen 0.8s linear infinite;
  vertical-align: middle;
  margin-right: 0.5rem;
}

@keyframes drehen {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --farbe-text: #f0ece7;
    --farbe-hintergrund: #221c1c;
    --farbe-flaeche: #17130f;
    --farbe-rand: #43372f;
  }
  input[type="text"],
  input[type="date"],
  input[type="email"],
  input[type="tel"],
  select {
    background: #2b241f;
    color: var(--farbe-text);
  }
  .knopf-sekundaer {
    background: #221c1c;
  }
}