/*
  Oberfläche des Cockpits. Farben und Schriftschnitte stammen aus
  src/styles/tokens.css der Website, damit sich beides gleich anfühlt.

  Bewusst schlicht: Das hier ist ein Werkzeug, keine Bühne. Große Klickflächen,
  ruhige Flächen, klare Zustände. Die Schrift ist die des Systems, weil das
  Cockpit keine Fremdserver ansprechen darf und eine mitgelieferte Schriftdatei
  für ein internes Werkzeug den Aufwand nicht wert ist.
*/

:root {
  --petrol: #2c3d49;
  --petrol-dunkel: #1f2d37;
  --petrol-hell: #344a58;
  --gold: #e9cc60;
  --rose: #c05676;
  --rose-dunkel: #a8455f;
  --creme: #f8f7f3;
  --weiss: #fff;
  --linie: #eceae4;
  --linie-warm: #e4e1d8;
  --text: #2c3d49;
  --text-weich: #5a6b76;
  --text-grau: #8a97a0;
  --gruen: #2f7d5f;
  --schrift: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--creme);
}

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

/* --- Kopf ------------------------------------------------------------- */

.kopf {
  background: var(--petrol);
  color: var(--weiss);
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 22px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 10;
}
.kopf strong { font-weight: 500; letter-spacing: 0.02em; }
.kopf nav { display: flex; gap: 18px; flex-wrap: wrap; }
.kopf a { color: rgba(255, 255, 255, 0.82); text-decoration: none; }
.kopf a:hover, .kopf a[aria-current='page'] { color: var(--gold); }
.kopf .rechts { margin-left: auto; display: flex; align-items: center; gap: 16px; }
.kopf .quelle {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  padding: 2px 10px;
}
.kopf .quelle.ordner { color: var(--gold); border-color: var(--gold); }

main { max-width: 900px; margin: 0 auto; padding: 32px 24px 90px; }
main.breit { max-width: 1120px; }

h1 { font-size: 30px; font-weight: 300; margin: 0 0 6px; letter-spacing: -0.01em; }
h2 { font-size: 20px; font-weight: 500; margin: 34px 0 12px; }
h3 { font-size: 16px; font-weight: 500; margin: 0 0 8px; }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12px;
  font-weight: 500;
  color: var(--rose);
  margin: 0 0 6px;
}
.unterzeile { color: var(--text-weich); margin: 0 0 26px; }

/* --- Karten und Listen ------------------------------------------------- */

.karte {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 14px;
}

.liste { list-style: none; margin: 0; padding: 0; }
.liste li {
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  margin-bottom: 8px;
}
.liste a.zeile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  text-decoration: none;
  color: var(--text);
}
.liste a.zeile:hover { background: #fbfaf7; }
.liste .name { font-weight: 500; }
.liste .adresse { color: var(--text-grau); font-size: 14px; }
.liste .rechts { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.liste li.still { padding: 14px 18px; color: var(--text-weich); }
.liste li.still .name { color: var(--text); }

.merkmal {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 3px 10px;
  border: 1px solid var(--linie-warm);
  color: var(--text-weich);
  white-space: nowrap;
}
.merkmal.published { color: var(--gruen); border-color: #bfdccf; background: #f1f8f4; }
.merkmal.draft { color: #9a6b1f; border-color: #e8d9b4; background: #fdf8ec; }
.merkmal.archived { color: var(--text-grau); }

/* --- Formulare --------------------------------------------------------- */

.feld { margin-bottom: 18px; }
.feld > label, .gruppe > .titel {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 5px;
}
.feld .erklaerung { font-size: 13px; color: var(--text-weich); margin: 0 0 6px; }

input[type='text'], input[type='password'], input[type='number'], input[type='date'], textarea, select {
  width: 100%;
  font: inherit;
  font-size: 15px;
  color: var(--text);
  background: var(--weiss);
  border: 1px solid var(--linie-warm);
  border-radius: 8px;
  padding: 9px 11px;
}
textarea { resize: vertical; min-height: 78px; line-height: 1.55; }
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--rose);
  outline-offset: 1px;
  border-color: transparent;
}

.jaNein { display: flex; align-items: center; gap: 9px; }
.jaNein input { width: 18px; height: 18px; accent-color: var(--rose); }
.jaNein label { font-weight: 400; margin: 0; }

.gruppe {
  border: 1px solid var(--linie);
  border-left: 3px solid var(--linie-warm);
  border-radius: 8px;
  padding: 16px 18px 4px;
  margin-bottom: 14px;
  background: #fdfdfb;
}
.gruppe > .titel { color: var(--text-weich); text-transform: none; }

.eintrag { position: relative; }
.eintrag .nummer {
  font-size: 12px;
  color: var(--text-grau);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.eintrag-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }

.doku {
  background: #fdfbf4;
  border: 1px solid #efe6cd;
  border-radius: 8px;
  padding: 12px 15px;
  font-size: 14px;
  color: #6b5f3f;
  margin-bottom: 20px;
}
.doku p { margin: 0 0 7px; }
.doku p:last-child { margin: 0; }

/* --- Schaltflächen ----------------------------------------------------- */

.knopf {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  border: 0;
  border-radius: 999px;
  padding: 11px 24px;
  background: var(--rose);
  color: var(--weiss);
  cursor: pointer;
  text-decoration: none;
}
.knopf:hover { background: var(--rose-dunkel); }
.knopf.stiller { background: transparent; color: var(--text-weich); border: 1px solid var(--linie-warm); }
.knopf.stiller:hover { background: var(--weiss); color: var(--text); }
.knopf.klein { font-size: 13px; padding: 6px 14px; font-weight: 400; }
.knopf[disabled] { opacity: 0.5; cursor: progress; }

.leiste {
  position: sticky;
  bottom: 0;
  background: rgba(248, 247, 243, 0.94);
  backdrop-filter: blur(6px);
  border-top: 1px solid var(--linie-warm);
  padding: 14px 0;
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.leiste .hinweis { color: var(--text-weich); font-size: 14px; }

/* --- Meldungen --------------------------------------------------------- */

.meldung {
  border-radius: var(--radius);
  padding: 13px 17px;
  margin-bottom: 20px;
  font-size: 15px;
}
.meldung.gut { background: #f1f8f4; border: 1px solid #bfdccf; color: #205c46; }
.meldung.schlecht { background: #fdf1f4; border: 1px solid #eec6d1; color: #8f2f4b; }
.meldung.warnung { background: #fdf8ec; border: 1px solid #e8d9b4; color: #7d5a15; }

/* --- Anmeldung --------------------------------------------------------- */

.anmelden { max-width: 380px; margin: 14vh auto; padding: 0 24px; }
.anmelden .karte { padding: 30px 28px; }
.anmelden h1 { font-size: 24px; margin-bottom: 4px; }
.anmelden .knopf { width: 100%; justify-content: center; margin-top: 6px; }

/* --- Referenzen -------------------------------------------------------- */

.logoliste { display: grid; gap: 12px; }
.logozeile {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 14px 18px;
}
.logozeile .bild {
  width: 150px;
  min-width: 150px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--creme);
  border-radius: 6px;
}
.logozeile .bild img { max-width: 128px; max-height: 46px; }
.logozeile .felder { flex: 1; display: grid; gap: 8px; grid-template-columns: 1fr 150px 190px; align-items: center; }

@media (max-width: 760px) {
  .logozeile { flex-direction: column; align-items: stretch; }
  .logozeile .felder { grid-template-columns: 1fr; }
  .logozeile .bild { width: 100%; }
}

.tabellenkopf {
  display: grid;
  grid-template-columns: 168px 1fr 150px 190px;
  gap: 18px;
  padding: 0 18px 6px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-grau);
}
@media (max-width: 760px) { .tabellenkopf { display: none; } }

.hochladen {
  border: 1px dashed var(--linie-warm);
  border-radius: var(--radius);
  padding: 18px 20px;
  background: var(--weiss);
}
.hochladen input[type='file'] { font: inherit; font-size: 14px; }

.fussnote { color: var(--text-grau); font-size: 13px; margin-top: 40px; }

.zweispaltig { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 620px) { .zweispaltig { grid-template-columns: 1fr; } }