:root {
  --farbe: #009bdc;         /* Hauptfarbe */
  --farbe-dunkel: #0077a8;  /* für Schrift und Links – besser lesbar auf Weiß */
  --farbe-hell: #e5f5fc;
  --text: #1a2b33;
  --grau: #5d6b73;
  --rand: #cfe6f2;
  --hintergrund: #f2fafd;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 18px;
  line-height: 1.5;
  color: var(--text);
  background: var(--hintergrund);
}

a { color: var(--farbe-dunkel); }

.kopf {
  background: var(--farbe);
  color: white;
  padding: 1rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1rem;
}
.logo { color: white; font-size: 1.4rem; font-weight: 700; text-decoration: none; }
.untertitel { font-weight: 500; }

.inhalt { max-width: 60rem; margin: 0 auto; padding: 1.5rem 1.25rem 3rem; }

.suche input:focus { outline: none; border-color: var(--farbe); }

.suche input {
  width: 100%;
  font-size: 1.1rem;
  padding: 0.9rem 1rem;
  border: 2px solid var(--rand);
  border-radius: 0.6rem;
  background: white;
}

.gruppe h2 {
  margin: 2rem 0 0.75rem;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--farbe-dunkel);
}

.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1rem;
}

.kachel {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.25rem;
  background: white;
  border: 2px solid var(--rand);
  border-radius: 0.8rem;
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.15s, background 0.15s;
}
.kachel:hover, .kachel:focus { border-color: var(--farbe); background: var(--farbe-hell); }
.kachel-name { font-size: 1.2rem; font-weight: 600; }
.kachel-anzahl { color: var(--grau); font-size: 0.95rem; }

.brotkrumen { color: var(--grau); margin: 0; }
h1 { margin: 0.25rem 0 1rem; }

.rubrik {
  background: white;
  border: 1px solid var(--rand);
  border-radius: 0.8rem;
  padding: 0.5rem 1.25rem 1rem;
  margin-bottom: 1rem;
}
.rubrik h2 { font-size: 1.2rem; color: var(--farbe-dunkel); }
.leer { color: var(--grau); font-style: italic; }

/* ---------- Kopfleiste: Menü ---------- */
.kopf { justify-content: space-between; align-items: center; }
.kopf-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; }
.kopf-menue { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; }
.kopf-menue a { color: white; font-weight: 500; }
.kopf-menue form { margin: 0; }

/* ---------- Karten, Formulare, Knöpfe ---------- */
.karte {
  background: white;
  border: 1px solid var(--rand);
  border-radius: 0.8rem;
  padding: 1rem 1.25rem 1.25rem;
  margin-bottom: 1rem;
}
.karte.schmal { max-width: 28rem; margin: 2rem auto; }
.karte h2, .karte h3 { margin-top: 0.25rem; color: var(--farbe-dunkel); }

.formular { display: flex; flex-direction: column; gap: 0.9rem; }
.formular label { display: flex; flex-direction: column; gap: 0.3rem; font-weight: 500; }
.formular input[type=text], .formular input:not([type]), .formular input[type=password] {
  font: inherit;
  padding: 0.6rem 0.75rem;
  border: 2px solid var(--rand);
  border-radius: 0.5rem;
}
.formular input:focus { outline: none; border-color: var(--farbe); }
.formular small { font-weight: 400; color: var(--grau); }
fieldset { border: 1px solid var(--rand); border-radius: 0.5rem; padding: 0.5rem 1rem 0.75rem; }
legend { color: var(--grau); padding: 0 0.3rem; }
.formular label.auswahl, label.auswahl {
  flex-direction: row; align-items: center; gap: 0.5rem; font-weight: 400;
  display: inline-flex; margin-right: 1.25rem;
}
.auswahl input { width: 1.2rem; height: 1.2rem; accent-color: var(--farbe); }

.knopf, .knopf-klein, .knopf-hell {
  font: inherit; cursor: pointer; border-radius: 0.5rem; border: 2px solid var(--farbe-dunkel);
  background: var(--farbe-dunkel); color: white; font-weight: 600;
}
.knopf { padding: 0.7rem 1.25rem; align-self: flex-start; }
.knopf-klein { padding: 0.35rem 0.9rem; font-size: 0.95rem; align-self: flex-start; }
.knopf-rand { background: white; color: var(--farbe-dunkel); }
.knopf-hell { background: white; color: var(--farbe-dunkel); border-color: white; padding: 0.3rem 0.9rem; }
.knopf:hover, .knopf-klein:hover { background: var(--farbe); border-color: var(--farbe); color: white; }

.knopfreihe { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.9rem; }
.knopfreihe form { margin: 0; }

/* ---------- Meldungen und Marken ---------- */
.meldung { padding: 0.75rem 1rem; border-radius: 0.5rem; border: 1px solid var(--rand); background: white; }
.meldung-info { background: var(--farbe-hell); border-color: var(--farbe); }
.meldung-fehler { background: #fdecec; border-color: #c62828; color: #8e1c1c; }
.meldung-passwort { background: #fff8e1; border-color: #c79100; font-weight: 600; }
.hinweis { color: var(--grau); font-size: 0.95rem; }

.marke {
  display: inline-block; font-size: 0.8rem; font-weight: 600; padding: 0.1rem 0.5rem;
  border-radius: 1rem; background: var(--farbe-hell); color: var(--farbe-dunkel);
  vertical-align: middle; align-self: flex-start;
}
.marke-rot { background: #fdecec; color: #8e1c1c; }
.marke-grau { background: #eef1f2; color: var(--grau); }
.konto.gesperrt { opacity: 0.65; }

/* ---------- Schritt 2: Dokumente ---------- */
a.knopf, a.knopf-klein { display: inline-block; text-decoration: none; text-align: center; }
.titelzeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.titelzeile .knopf { align-self: center; }

.dokumentliste { list-style: none; margin: 0; padding: 0; }
.dokument {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: 0.5rem 1rem; padding: 0.75rem 0; border-top: 1px solid var(--rand);
}
.dokument:first-child { border-top: none; }
.dokument-text { flex: 1 1 18rem; min-width: 0; }
.dokument-titel { font-weight: 600; font-size: 1.05rem; overflow-wrap: anywhere; }
.dokument-beschreibung { margin: 0.2rem 0 0; }
.dokument-info { margin: 0.3rem 0 0; color: var(--grau); font-size: 0.9rem; }

.formular textarea, .formular input[type=file] {
  font: inherit; padding: 0.6rem 0.75rem; border: 2px solid var(--rand); border-radius: 0.5rem;
  background: white; width: 100%;
}
.formular textarea:focus { outline: none; border-color: var(--farbe); }
.formular .knopfreihe { margin-top: 0.25rem; }

.karte.gefahr { border-color: #e7b4b4; }
.karte.gefahr h2 { color: #8e1c1c; }
.knopf-gefahr { background: #c62828; border-color: #c62828; }
.knopf-gefahr:hover { background: #8e1c1c; border-color: #8e1c1c; }