/* Anmeldeseite – Planungs-Cockpit */
:root {
  --bg: #f6f4f1; --flaeche: #ffffff; --flaeche-2: #f0ece6; --rand: #e3ddd5;
  --text: #1f1b17; --text-2: #6b625a;
  --akzent: #0f766e; --akzent-text: #ffffff;
  --schlecht: #b91c1c; --schlecht-weich: #fee2e2;
  --schatten: 0 1px 2px rgba(0,0,0,.05), 0 4px 16px rgba(0,0,0,.05);
  color-scheme: light;
}
:root[data-theme="dunkel"] {
  --bg: #121110; --flaeche: #1c1a18; --flaeche-2: #26231f; --rand: #34302b;
  --text: #f2eee9; --text-2: #a39a90;
  --akzent: #2dd4bf; --akzent-text: #042f2e;
  --schlecht: #f87171; --schlecht-weich: #3a1515;
  --schatten: 0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Ubuntu, "Noto Sans", sans-serif;
  background: var(--bg); color: var(--text);
  min-height: 100vh; display: grid; place-items: center;
  padding: 16px; font-size: 15px; line-height: 1.45;
}
.karte {
  width: 100%; max-width: 360px;
  background: var(--flaeche); border: 1px solid var(--rand);
  border-radius: 14px; box-shadow: var(--schatten); padding: 28px;
}
.marke { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.marke strong { display: block; font-size: 1.05rem; }
.marke small { color: var(--text-2); font-size: .8rem; }
.logo {
  width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  background: var(--akzent); color: var(--akzent-text); font-weight: 700; font-size: 1.1rem;
}
form { display: flex; flex-direction: column; }
label { font-weight: 600; font-size: .85rem; margin: 0 0 4px; }
input {
  font: inherit; color: var(--text); background: var(--flaeche);
  border: 1px solid var(--rand); border-radius: 10px; padding: 9px 12px; margin-bottom: 14px;
}
input:focus { outline: 2px solid var(--akzent); outline-offset: 1px; border-color: transparent; }
.knopf {
  font: inherit; font-weight: 600; cursor: pointer; margin-top: 6px;
  border-radius: 10px; padding: 10px 14px; border: 1px solid var(--akzent);
  background: var(--akzent); color: var(--akzent-text);
}
.knopf:hover { filter: brightness(1.08); }
.knopf:disabled { opacity: .6; cursor: wait; }
.fehler {
  margin: 0 0 16px; padding: 10px 12px; border-radius: 10px;
  background: var(--schlecht-weich); color: var(--schlecht); font-size: .9rem; font-weight: 600;
}