/* static/css/konto.css — Anmeldung, Einladung, Passwort, eigenes Konto.
 *
 * Keine eigenen Marken: alles kommt aus crm.css. Die einzige Ausnahme ist
 * `--akzent-betrieb`, das die Vorlage inline aus der Betriebstabelle setzt —
 * ein Kunde soll seine Farbe sehen und nicht unsere.
 *
 * Mobil zuerst, wie im ganzen System seit dem Umbau: nur `min-width`, und
 * Zielgroessen ueber `pointer: coarse` statt ueber die Fensterbreite. Ein
 * Tastschirm kann 1400 px breit sein.
 */

:root { --akzent-betrieb: var(--accent); }

.konto-seite {
  min-height: 100vh;
  min-height: 100dvh;          /* iOS: sonst springt die Seite mit der Leiste */
  display: grid;
  grid-template-rows: 1fr auto;
  padding: var(--s5);
  background: var(--bg);
}

.konto-mitte {
  width: 100%;
  max-width: 26rem;
  margin: auto;
  padding: var(--s6) 0;
}
.konto-mitte.breit { max-width: 46rem; }

/* ── Kopf ───────────────────────────────────────────────────────────── */
.konto-kopf { text-align: center; margin-bottom: var(--s6); }
.konto-kopf img {
  max-height: 56px; max-width: 200px;
  width: auto; height: auto;
  object-fit: contain;
  margin-bottom: var(--s4);
}
.konto-kopf .betrieb {
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--text);
  margin: 0 0 var(--s2);
  letter-spacing: -.01em;
}
.konto-kopf .zeile {
  font-size: var(--t-sm);
  color: var(--text3);
  margin: 0;
}

/* ── Karte ──────────────────────────────────────────────────────────── */
.konto-karte {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--s6) var(--s5);
}
@media (min-width: 480px) { .konto-karte { padding: var(--s7) var(--s6); } }

.konto-karte h1 {
  font-size: var(--t-xl);
  font-weight: 650;
  color: var(--text);
  margin: 0 0 var(--s3);
  letter-spacing: -.015em;
  text-wrap: balance;
}
.konto-karte > p.hin {
  font-size: var(--t-md);
  color: var(--text2);
  margin: 0 0 var(--s6);
  line-height: 1.6;
}

/* ── Felder ─────────────────────────────────────────────────────────── */
.konto-feld { display: grid; gap: var(--s2); margin-bottom: var(--s5); align-content: start; }
.konto-feld > label {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text3);
}
.konto-feld input,
.konto-feld select {
  width: 100%;
  min-height: var(--h-field);
  /* 16 px, sonst zoomt iOS beim Antippen ins Feld hinein. */
  font-size: 16px;
  padding: 0 var(--s4);
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  color: var(--text);
  font-family: inherit;
}
.konto-feld input:focus,
.konto-feld select:focus {
  outline: none;
  border-color: var(--akzent-betrieb);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--akzent-betrieb) 18%, transparent);
}
.konto-feld .erklaerung { font-size: var(--t-xs); color: var(--text3); line-height: 1.5; }

/* Passwortfeld mit Anzeigen-Knopf */
.pw-feld { position: relative; }
.pw-feld input { padding-right: 3.4rem; }
.pw-zeigen {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  height: calc(var(--h-field) - 8px);
  padding: 0 var(--s3);
  background: none; border: 0; cursor: pointer;
  color: var(--text3); font-size: var(--t-xs);
  font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  border-radius: var(--radius-sm);
}
.pw-zeigen:hover { color: var(--text); background: var(--raised); }

/* Staerkeanzeige: vier Stufen, keine Prozentzahl. Eine Prozentzahl taeuscht
   eine Genauigkeit vor, die keine Heuristik hat. */
.pw-staerke { display: grid; gap: var(--s2); margin-top: var(--s1); }
.pw-balken { display: flex; gap: 3px; }
.pw-balken span {
  flex: 1; height: 3px; border-radius: 2px; background: var(--border2);
  transition: background .18s ease;
}
.pw-balken[data-stufe="1"] span:nth-child(-n+1),
.pw-balken[data-stufe="2"] span:nth-child(-n+2) { background: var(--yellow); }
.pw-balken[data-stufe="3"] span:nth-child(-n+3),
.pw-balken[data-stufe="4"] span { background: var(--green); }
.pw-text { font-size: var(--t-xs); color: var(--text3); }

/* ── Knöpfe ─────────────────────────────────────────────────────────── */
.konto-tat {
  width: 100%;
  min-height: var(--h-ctl);
  padding: var(--s3) var(--s5);
  background: var(--akzent-betrieb);
  color: var(--accent-ink);
  border: 0;
  border-radius: var(--radius);
  font-size: var(--t-md);
  font-weight: 650;
  font-family: inherit;
  cursor: pointer;
  /* Ohne das erbt der Knopf die Zeilenhoehe des Fliesstextes und wird
     unnoetig hoch — die Falle stand schon in der Noir-Vorlage. */
  line-height: 1.2;
}
.konto-tat:hover { filter: brightness(1.08); }
.konto-tat:active { transform: translateY(1px); }
.konto-tat.still {
  background: var(--raised); color: var(--text);
  border: 1px solid var(--border2);
}

/* ── Fußzeile der Karte ─────────────────────────────────────────────── */
.konto-fuss {
  margin-top: var(--s5);
  padding-top: var(--s5);
  border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; gap: var(--s4);
  justify-content: space-between;
  font-size: var(--t-sm);
}
.konto-fuss a { color: var(--text3); text-decoration: none; }
.konto-fuss a:hover { color: var(--akzent-betrieb); text-decoration: underline; }

.konto-marke {
  text-align: center;
  font-size: var(--t-xs);
  color: var(--text3);
  padding-top: var(--s6);
}

/* ── Meldungen ──────────────────────────────────────────────────────── */
.konto-meldung {
  padding: var(--s4);
  border-radius: var(--radius);
  font-size: var(--t-sm);
  line-height: 1.55;
  margin-bottom: var(--s5);
  border: 1px solid;
}
.konto-meldung.error   { background: rgba(255,107,99,.09);  border-color: rgba(255,107,99,.35);  color: #ffb3ae; }
.konto-meldung.success { background: rgba(53,208,90,.09);   border-color: rgba(53,208,90,.35);   color: #8ce8a5; }
.konto-meldung.warning { background: rgba(255,197,61,.09);  border-color: rgba(255,197,61,.35);  color: #ffe09a; }
.konto-meldung.info    { background: var(--accent-dim);     border-color: var(--accent-line);    color: var(--text2); }

/* ── Kopierbarer Link ───────────────────────────────────────────────── */
.linkkasten {
  background: var(--bg2);
  border: 1px solid var(--accent-line);
  border-radius: var(--radius);
  padding: var(--s4);
  margin-bottom: var(--s5);
}
.linkkasten .titel {
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 var(--s3);
}
.linkkasten .adresse {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--t-xs);
  color: var(--text2);
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: var(--s3);
  /* Ein Link bricht sonst aus der Karte heraus — er hat keine Leerzeichen. */
  word-break: break-all;
  margin-bottom: var(--s3);
  line-height: 1.5;
}
.linkkasten .hinweis { font-size: var(--t-xs); color: var(--text3); margin: var(--s3) 0 0; }

/* ── Wahl zwischen den Zugangswegen ─────────────────────────────────── */
.wege { display: grid; gap: var(--s3); margin-bottom: var(--s5); }
.weg {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s3);
  align-items: start;
  padding: var(--s4);
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  cursor: pointer;
  background: var(--bg2);
}
.weg:has(input:checked) {
  border-color: var(--akzent-betrieb);
  background: var(--accent-dim);
}
/* Ohne diese Ausnahme trifft die allgemeine Feldregel auch das Kaestchen und
   macht es zu einem 100 % breiten, 0 px hohen Element — unsichtbar und nicht
   anklickbar. Genau dieser Fehler steckte in den Einstellungen. */
.weg input[type="radio"] {
  width: auto; height: auto; min-width: 18px; min-height: 18px;
  padding: 0; margin-top: 3px; flex: 0 0 auto;
  accent-color: var(--akzent-betrieb);
}
.weg b { display: block; font-size: var(--t-md); color: var(--text); font-weight: 600; margin-bottom: 2px; }
.weg span { font-size: var(--t-sm); color: var(--text3); line-height: 1.5; }

/* ── Am Finger größer ───────────────────────────────────────────────── */
@media (pointer: coarse) {
  .konto-feld input, .konto-feld select { min-height: 46px; }
  .konto-tat { min-height: 50px; }
  .pw-zeigen { height: 38px; }
  .weg { padding: var(--s5); }
}