/* Keystate - Oberflaeche
 *
 * Uebernommen aus docs/design/dashboard-entwurf.html. Wer hier etwas
 * aendert, aendert das Design - der Entwurf ist die Vorlage, nicht
 * eine Anregung.
 */

:root {
  /* Brandfarbe aus dem Verlaufsbild */
  --ks-hell:   #7FC4EC;
  --ks:        #1E93D6;
  --ks-tief:   #0B6FA8;
  --ks-nacht:  #08456B;

  /* Grundflaechen: warmes Grau wie in der Referenz, aber ins Kuehle
     gezogen, damit es das Blau nicht schmutzig macht */
  --grund:     #e7e7e6;
  --karte:     #ffffff;
  --text:      #14181d;
  --text-leise:#8b9199;
  --linie:     #eef0f2;

  --gut:       #14a06b;
  --schlecht:  #d9534f;

  --r-gross:   22px;
  --r-klein:   14px;
  --schatten:  0 1px 2px rgba(20,24,29,.04), 0 8px 24px rgba(20,24,29,.06);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--grund);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  padding: 26px;
}

/* ---------- Grundriss ---------- */
.huelle { display: flex; gap: 22px; max-width: 1320px; margin: 0 auto; }

/* ---------- Schwebende Icon-Leiste ---------- */
.leiste {
  width: 62px; flex-shrink: 0;
  background: var(--karte);
  border-radius: 40px;
  padding: 16px 0;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  box-shadow: var(--schatten);
  align-self: flex-start;
  position: sticky; top: 26px;
}
.leiste .sym {
  width: 42px; height: 42px; border-radius: 13px;
  display: grid; place-items: center;
  color: var(--text-leise);
  cursor: pointer; transition: all .18s ease;
  position: relative;
}
.leiste .sym:hover { background: #f4f6f8; color: var(--ks-tief); }
.leiste .sym.aktiv {
  background: var(--text); color: #fff;
  box-shadow: 0 6px 16px rgba(20,24,29,.22);
}
.leiste .trenner { height: 1px; width: 26px; background: var(--linie); margin: 8px 0; }
.leiste .fuss { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.leiste .konto {
  width: 40px; height: 40px; border-radius: 50%; margin-top: 8px;
  background: linear-gradient(145deg, var(--ks-hell), var(--ks-tief));
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 13px;
  box-shadow: 0 4px 12px rgba(11,111,168,.32);
}
.leiste .sym svg { width: 19px; height: 19px; stroke-width: 1.9; }

/* ---------- Inhalt ---------- */
.inhalt { flex: 1; min-width: 0; }

/* ---------- Kopfzeile ---------- */
.kopf { display: flex; align-items: center; gap: 16px; margin: 4px 0 22px; }
.marke {
  width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
  background: linear-gradient(150deg, var(--ks-hell) 0%, var(--ks) 46%, var(--ks-tief) 100%);
  display: grid; place-items: center;
  box-shadow: 0 6px 18px rgba(30,147,214,.30);
}
.marke svg { width: 24px; height: 24px; }
.gruss h1 { font-size: 21px; font-weight: 700; margin: 0; letter-spacing: -.4px; }
.gruss p { margin: 2px 0 0; font-size: 13.5px; color: var(--text-leise); }
.kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.suche {
  display: flex; align-items: center; gap: 8px;
  background: var(--karte); border-radius: 999px;
  padding: 6px 6px 6px 18px; width: 290px;
  box-shadow: var(--schatten);
}
.suche input {
  border: 0; outline: 0; background: transparent; flex: 1;
  font-family: inherit; font-size: 13.5px; color: var(--text);
}
.suche input::placeholder { color: var(--text-leise); }
.suche .los {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--text); color: #fff;
  display: grid; place-items: center; cursor: pointer; flex-shrink: 0;
}
.rundknopf {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--karte); box-shadow: var(--schatten);
  display: grid; place-items: center; cursor: pointer;
  color: var(--text); position: relative;
}
.rundknopf .punkt {
  position: absolute; top: 10px; right: 11px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--schlecht); border: 1.5px solid var(--karte);
}
.rundknopf svg { width: 18px; height: 18px; stroke-width: 1.9; }

/* ---------- Raster ---------- */
.reihe { display: grid; gap: 16px; margin-bottom: 16px; }
.reihe.vier { grid-template-columns: repeat(4, 1fr); }
.reihe.drei  { grid-template-columns: 1.55fr 1fr 1fr; }

.karte {
  background: var(--karte); border-radius: var(--r-gross);
  padding: 18px 20px; box-shadow: var(--schatten);
}

/* ---------- Kennzahl-Karten ---------- */
.kennzahl { display: flex; align-items: center; gap: 14px; }
.kennzahl .rund {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; background: #f2f5f8; color: var(--ks-tief);
}
.kennzahl .rund svg { width: 20px; height: 20px; stroke-width: 1.9; }
.kennzahl .text { flex: 1; min-width: 0; }
.kennzahl .label { font-size: 12.5px; color: var(--text-leise); margin-bottom: 3px; }
.kennzahl .wert { font-size: 21px; font-weight: 700; letter-spacing: -.5px; }
.kennzahl .bild { flex-shrink: 0; }

/* Eine Karte je Reihe traegt die Marke - wie in der Referenz */
.karte.marke-voll {
  background: linear-gradient(140deg, var(--ks) 0%, var(--ks-tief) 100%);
  color: #fff; box-shadow: 0 10px 26px rgba(11,111,168,.32);
}
.karte.marke-voll .label { color: rgba(255,255,255,.82); }
.karte.marke-voll .wert { color: #fff; }
.karte.marke-voll .rund { background: rgba(255,255,255,.18); color: #fff; }

/* ---------- Verlaufs-Karte ---------- */
.zeile { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.zeile h2 { font-size: 16px; font-weight: 700; margin: 0; letter-spacing: -.3px; }
.pille {
  font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 5px;
}
.pille.gut { background: #e6f7ef; color: var(--gut); }
.pille.schlecht { background: #fdecec; color: var(--schlecht); }
.pille.leise { background: #f2f5f8; color: var(--text-leise); }
.wahl {
  margin-left: auto; font-size: 12.5px; color: var(--text-leise);
  display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
}
.kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 6px; }
.kachel { background: #f7f9fa; border-radius: var(--r-klein); padding: 12px 14px; }
.kachel .k-label { font-size: 11.5px; color: var(--text-leise); margin-bottom: 4px; }
.kachel .k-zeile { display: flex; align-items: center; gap: 8px; }
.kachel .k-wert { font-size: 18px; font-weight: 700; letter-spacing: -.4px; }
.linie-diagramm { margin: 4px -4px -6px; }

/* ---------- Rate-Karte mit Bogen ---------- */
.rate .gross { font-size: 26px; font-weight: 800; color: var(--ks-tief); letter-spacing: -.8px; }
.rate .klein { font-size: 12.5px; color: var(--text-leise); }
.bogen { position: relative; margin: 6px auto 0; width: 168px; }
.bogen .mitte {
  position: absolute; left: 0; right: 0; bottom: 4px; text-align: center;
  font-size: 22px; font-weight: 800; letter-spacing: -.6px;
}

/* ---------- Profil-Karte ---------- */
.profil { text-align: center; }
.profil .bild {
  width: 66px; height: 66px; border-radius: 50%; margin: 2px auto 10px;
  background: linear-gradient(150deg, #eaf4fb, #cfe6f6);
  display: grid; place-items: center; font-size: 24px; font-weight: 800;
  color: var(--ks-tief); border: 3px solid #fff;
  box-shadow: 0 6px 16px rgba(11,111,168,.16);
}
.profil h3 { font-size: 15.5px; font-weight: 700; margin: 0; }
.profil .mail { font-size: 12.5px; color: var(--text-leise); margin: 2px 0 14px; }
.profil .zahlen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.profil .zahlen .z-label { font-size: 11px; color: var(--text-leise); }
.profil .zahlen .z-wert { font-size: 16px; font-weight: 700; margin-top: 1px; }

/* ---------- Aktions-Karte mit Illustration ---------- */
.aktion { display: flex; gap: 8px; align-items: stretch; overflow: hidden; }
.aktion .links { flex: 1; min-width: 0; padding: 2px 0; }
.aktion h2 { font-size: 17px; font-weight: 700; margin: 0 0 8px; letter-spacing: -.3px; line-height: 1.3; }
.aktion p { font-size: 12.8px; color: var(--text-leise); margin: 0 0 16px; line-height: 1.55; }
.knopf {
  display: inline-flex; align-items: center; gap: 7px;
  background: linear-gradient(140deg, var(--ks) 0%, var(--ks-tief) 100%);
  color: #fff; border: 0; border-radius: 11px;
  padding: 10px 18px; font-family: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; box-shadow: 0 4px 14px rgba(11,111,168,.28);
}
.knopf.leise {
  background: #f2f5f8; color: var(--text); box-shadow: none;
}
.aktion .rechts { width: 45%; flex-shrink: 0; position: relative; }

/* Expose-Stapel statt Kreditkarten */
.stapel { position: absolute; inset: 0; }
.blatt {
  position: absolute; border-radius: 12px; background: #fff;
  box-shadow: 0 8px 22px rgba(20,24,29,.14);
  border: 1px solid var(--linie);
  overflow: hidden;
}
.blatt .kopfband { height: 26%; background: linear-gradient(120deg, var(--ks-hell), var(--ks)); }
.blatt .strich { height: 3px; border-radius: 2px; background: #eceff2; margin: 7px 9px 0; }
.blatt .strich.kurz { width: 42%; }
.blatt:nth-child(1) { inset: 26% 34% 12% 4%; transform: rotate(-7deg); }
.blatt:nth-child(2) { inset: 16% 20% 20% 18%; transform: rotate(2deg); }
.blatt:nth-child(3) {
  inset: 8% 4% 26% 32%; transform: rotate(9deg);
  box-shadow: 0 14px 30px rgba(11,111,168,.22);
}

/* ---------- Liste ---------- */
.liste h2 { font-size: 16px; font-weight: 700; margin: 0 0 14px; letter-spacing: -.3px; }
.eintrag {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 0; border-bottom: 1px solid var(--linie);
}
.eintrag:last-child { border-bottom: 0; padding-bottom: 0; }
.eintrag .balken { width: 3px; height: 30px; border-radius: 3px; background: var(--ks); flex-shrink: 0; }
.eintrag .wer { flex: 1; min-width: 0; }
.eintrag .name { font-size: 13.2px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eintrag .wann { font-size: 11.5px; color: var(--text-leise); margin-top: 1px; }

/* ---------- Hinweis-Karte ---------- */
.hinweis { text-align: center; padding-top: 22px; }
.hinweis .sym-gross {
  width: 54px; height: 54px; margin: 0 auto 12px; border-radius: 16px;
  background: #f2f5f8; display: grid; place-items: center; color: var(--ks-tief);
}
.hinweis .sym-gross svg { width: 26px; height: 26px; stroke-width: 1.7; }
.hinweis h3 { font-size: 15.5px; font-weight: 700; margin: 0 0 5px; }
.hinweis p { font-size: 12.5px; color: var(--text-leise); margin: 0 0 15px; line-height: 1.5; }

@media (max-width: 1080px) {
  .reihe.vier { grid-template-columns: 1fr 1fr; }
  .reihe.drei { grid-template-columns: 1fr; }
}

/* ---------- Anmeldung ----------
   Nur .tor-Regeln. .karte, .marke, .knopf und .meldung gehoeren der ganzen
   Anwendung — wer die hier anfasst, aendert jede Seite mit. */
.tor {
  position: relative;
  min-height: calc(100vh - 52px);
  display: grid;
  place-items: center;
  padding: 24px 16px;
}

/* Weicher Schein hinter der Karte. Laeuft innerhalb der Flaeche auf Null
   aus, damit an keiner Kante eine Linie entsteht. */
.tor-schein {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(760px, 130%);
  height: 620px;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(30, 147, 214, 0.18), rgba(30, 147, 214, 0) 70%);
  pointer-events: none;
}

.tor .karte { position: relative; width: 100%; max-width: 404px; padding: 34px 32px 30px; }

.tor-kopf { display: flex; align-items: center; gap: 13px; }
.tor .wortmarke { font-size: 19px; font-weight: 700; letter-spacing: -.4px; line-height: 1.1; }
.tor .unter { font-size: 12.5px; color: var(--text-leise); margin-top: 2px; }

.tor h1 {
  font-size: 25px; font-weight: 700; letter-spacing: -.6px;
  margin: 26px 0 0; padding-top: 22px; border-top: 1px solid var(--linie);
}

.tor label { display: block; font-size: 12.5px; font-weight: 600; margin: 18px 0 7px; }
.tor input {
  width: 100%; font-family: inherit; font-size: 14.5px;
  padding: 13px 15px; border: 1.5px solid var(--linie);
  border-radius: var(--r-klein); outline: 0; color: var(--text);
  background: #fbfcfd;
  transition: border-color .15s, box-shadow .15s, background-color .15s;
}
/* Sichtbarer Fokus: ein Rahmenwechsel allein ist als einziges Signal zu leise. */
.tor input:focus {
  border-color: var(--ks);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(30, 147, 214, 0.14);
}

.tor .knopf {
  width: 100%; justify-content: center; margin-top: 24px;
  padding: 13px 18px; font-size: 14.5px; border-radius: var(--r-klein);
}
.tor .knopf svg { width: 15px; height: 15px; }

.tor .fehler {
  display: flex; align-items: flex-start; gap: 9px;
  background: #fdecec; color: var(--schlecht); font-size: 13px;
  font-weight: 500; padding: 11px 13px; border-radius: var(--r-klein);
  margin-top: 16px; line-height: 1.45;
}
.tor .fehler svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }

.tor .fuss {
  font-size: 12.5px; color: var(--text-leise); text-align: center;
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--linie);
  line-height: 1.55;
}
.tor .fuss p { margin: 0; }
.tor .fuss p + p { margin-top: 6px; }
.tor .fuss a { color: var(--ks-tief); font-weight: 600; }

@media (max-width: 440px) {
  .tor .karte { padding: 26px 22px 24px; }
  .tor h1 { font-size: 23px; }
}

/* ---------- Leere Zustaende: eine Einladung, nichts Trauriges ---------- */
.leer { text-align: center; padding: 26px 12px; }
.leer .satz { font-size: 14px; font-weight: 600; }
.leer .dazu { font-size: 12.5px; color: var(--text-leise); margin-top: 4px; line-height: 1.5; }
.leer .knopf { margin-top: 15px; }

/* ---------- Bueroauswahl ---------- */
.wahlliste .eintrag { cursor: pointer; text-decoration: none; color: inherit; }
.wahlliste .eintrag:hover .name { color: var(--ks-tief); }
.wahlliste .kreis {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(150deg, #eaf4fb, #cfe6f6);
  display: grid; place-items: center; font-size: 13px; font-weight: 800;
  color: var(--ks-tief);
}

/* Die Leiste traegt jetzt echte Links, keine <div>s */
.leiste a.sym { text-decoration: none; }

/* ---------- Register innerhalb einer Seite ----------
   Aus fuenf Menuepunkten wird eine Seite mit Registern. Die Leiste hat
   nur Platz fuer sieben Symbole - was zum selben Arbeitsschritt gehoert,
   teilt sich eine Seite. */
.register {
  display: flex; gap: 4px; margin-bottom: 16px;
  background: var(--karte); border-radius: 999px;
  padding: 5px; box-shadow: var(--schatten);
  width: fit-content; max-width: 100%; overflow-x: auto;
}
.register a {
  padding: 8px 16px; border-radius: 999px;
  font-size: 13.5px; font-weight: 600; color: var(--text-leise);
  text-decoration: none; white-space: nowrap;
  transition: background .16s, color .16s;
}
.register a:hover { color: var(--text); }
.register a.aktiv { background: var(--text); color: #fff; }
.register .zaehler {
  font-size: 11px; font-weight: 700; margin-left: 6px;
  padding: 1px 6px; border-radius: 999px;
  background: #f2f5f8; color: var(--text-leise);
}
.register a.aktiv .zaehler { background: rgba(255,255,255,.22); color: #fff; }

/* ---------- Tabelle ----------
   Keine Rahmen, nur Trennlinien: Eine Liste von Menschen soll nicht
   aussehen wie eine Buchhaltung. */
.tabelle { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabelle th {
  text-align: left; font-size: 11.5px; font-weight: 600;
  color: var(--text-leise); text-transform: none;
  padding: 0 12px 10px 0; border-bottom: 1px solid var(--linie);
  white-space: nowrap;
}
.tabelle th.rechts, .tabelle td.rechts { text-align: right; padding-right: 0; }
.tabelle td {
  padding: 11px 12px 11px 0; border-bottom: 1px solid var(--linie);
  vertical-align: middle;
}
.tabelle tr:last-child td { border-bottom: 0; }
.tabelle tbody tr { transition: background .12s; }
.tabelle tbody tr:hover { background: #fafbfc; }
.tabelle .stark { font-weight: 600; }
.tabelle .leise { color: var(--text-leise); font-size: 12.5px; }
.tabelle .schmal { width: 1%; white-space: nowrap; }
.tabelle a { color: var(--ks-tief); text-decoration: none; }
.tabelle a:hover { text-decoration: underline; }

/* Runde Kennung in Listenzeilen */
.kreis {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(150deg, #eaf4fb, #cfe6f6);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 800; color: var(--ks-tief);
}
.mit-kreis { display: flex; align-items: center; gap: 11px; }

/* ---------- Formulare ---------- */
.feld { margin-bottom: 16px; }
.feld label, .feld .beschriftung {
  display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 6px;
}
.feld .hilfe { font-size: 12px; color: var(--text-leise); margin-top: 5px; line-height: 1.45; }
.feld input[type=text], .feld input[type=email], .feld input[type=password],
.feld input[type=number], .feld input[type=url], .feld input[type=date],
.feld select, .feld textarea {
  width: 100%; font-family: inherit; font-size: 13.5px;
  padding: 10px 13px; border: 1.5px solid var(--linie);
  border-radius: var(--r-klein); outline: 0;
  background: #fff; color: var(--text);
  transition: border-color .15s;
}
.feld textarea { min-height: 96px; resize: vertical; line-height: 1.55; }
.feld input:focus, .feld select:focus, .feld textarea:focus { border-color: var(--ks); }
.feld input[disabled], .feld select[disabled] { background: #f7f9fa; color: var(--text-leise); }

.feld-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.feld-drei { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

/* Kaestchen: die Beschriftung ist anklickbar, nicht nur das Quadrat */
.haken { display: flex; align-items: flex-start; gap: 9px; margin-bottom: 10px; cursor: pointer; }
.haken input { width: 17px; height: 17px; margin: 1px 0 0; accent-color: var(--ks); flex-shrink: 0; }
.haken .text { font-size: 13.5px; line-height: 1.45; }
.haken .text .dazu { font-size: 12px; color: var(--text-leise); margin-top: 2px; }

/* Farbwahl */
.farbe-feld { display: flex; align-items: center; gap: 10px; }
.farbe-feld input[type=color] {
  width: 42px; height: 42px; padding: 0; border: 1.5px solid var(--linie);
  border-radius: 11px; background: none; cursor: pointer;
}

.knopf-reihe { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.knopf:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.knopf.klein { padding: 7px 13px; font-size: 12.5px; border-radius: 9px; }
.knopf.gefahr { background: #fdecec; color: var(--schlecht); box-shadow: none; }
.knopf.gefahr:hover { background: #fbdada; }

/* ---------- Meldungen ---------- */
.meldung {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 15px; border-radius: var(--r-klein);
  font-size: 13.2px; line-height: 1.5; margin-bottom: 16px;
}
.meldung.gut      { background: #e6f7ef; color: #0d7a51; }
.meldung.warn     { background: #fdf6e3; color: #8a6410; }
.meldung.schlecht { background: #fdecec; color: #a8322e; }
.meldung.hinweis  { background: #eef6fc; color: var(--ks-nacht); }
.meldung svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; }

/* ---------- Fortschritt ---------- */
.balken { height: 8px; border-radius: 999px; background: #eef1f4; overflow: hidden; }
.balken .fuellung {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--ks-hell), var(--ks-tief));
  transition: width .4s ease;
}

/* ---------- Kopfzeile einer Karte mit Aktion rechts ---------- */
.karte-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.karte-kopf h2 { font-size: 16px; font-weight: 700; margin: 0; letter-spacing: -.3px; }
.karte-kopf .weg { flex: 1; }

/* ---------- Werkzeugleiste ueber Listen ---------- */
.werkzeug { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.werkzeug .suchfeld {
  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 200px;
  background: #f7f9fa; border-radius: 999px; padding: 8px 15px;
}
.werkzeug .suchfeld input {
  border: 0; outline: 0; background: transparent; flex: 1;
  font-family: inherit; font-size: 13.5px; color: var(--text);
}
.werkzeug .suchfeld svg { width: 15px; height: 15px; color: var(--text-leise); flex-shrink: 0; }
.werkzeug select {
  font-family: inherit; font-size: 13px; padding: 8px 12px;
  border: 1.5px solid var(--linie); border-radius: 999px;
  background: #fff; color: var(--text); outline: 0; cursor: pointer;
}

/* ---------- Blaettern ---------- */
.blaettern { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; }
.blaettern a, .blaettern span {
  min-width: 32px; height: 32px; padding: 0 10px;
  display: grid; place-items: center; border-radius: 9px;
  font-size: 13px; font-weight: 600; color: var(--text-leise);
  text-decoration: none;
}
.blaettern a:hover { background: #f2f5f8; color: var(--text); }
.blaettern .jetzt { background: var(--text); color: #fff; }

/* ---------- Schrittleiste des Wizards ---------- */
.schritte { display: flex; align-items: center; gap: 0; margin-bottom: 18px; }
.schritte .schritt { display: flex; align-items: center; gap: 9px; }
.schritte .punkt {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; flex-shrink: 0;
  font-size: 12px; font-weight: 700;
  background: #eef1f4; color: var(--text-leise);
}
.schritte .schritt.fertig .punkt { background: var(--gut); color: #fff; }
.schritte .schritt.jetzt .punkt { background: var(--ks); color: #fff;
  box-shadow: 0 0 0 4px rgba(30,147,214,.16); }
.schritte .name { font-size: 12.8px; font-weight: 600; color: var(--text-leise); white-space: nowrap; }
.schritte .schritt.jetzt .name { color: var(--text); }
.schritte .strecke { flex: 1; height: 2px; background: #eef1f4; margin: 0 12px; min-width: 16px; }
.schritte .schritt.fertig + .strecke { background: var(--gut); }

@media (max-width: 900px) {
  .schritte .name { display: none; }
  .feld-paar, .feld-drei { grid-template-columns: 1fr; }
}

/* ---------- Wizard: Schrittleiste als Weg ----------
   Die Streamlit-Fassung hatte einen Stepper, aber keine Adresse je
   Schritt. Hier ist jeder Schritt ein Link - also darf er auch wie
   einer aussehen. */
.wegleiste {
  display: flex; align-items: center;
  background: var(--karte); border-radius: 999px;
  padding: 8px 14px; margin-bottom: 18px;
  box-shadow: var(--schatten); overflow-x: auto;
}
.wegleiste a, .wegleiste span.stufe {
  display: flex; align-items: center; gap: 9px;
  padding: 4px 10px; border-radius: 999px;
  text-decoration: none; white-space: nowrap;
}
.wegleiste .zahl {
  width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; flex-shrink: 0;
  font-size: 11.5px; font-weight: 700;
  background: #eef1f4; color: var(--text-leise);
}
.wegleiste .wort { font-size: 13px; font-weight: 600; color: var(--text-leise); }
.wegleiste .fertig .zahl { background: var(--gut); color: #fff; }
.wegleiste .fertig .wort { color: var(--text); }
.wegleiste .jetzt .zahl {
  background: var(--ks); color: #fff;
  box-shadow: 0 0 0 4px rgba(30,147,214,.16);
}
.wegleiste .jetzt .wort { color: var(--text); }
.wegleiste .strich { flex: 1; height: 2px; background: #eef1f4; margin: 0 4px; min-width: 14px; }

/* ---------- Objektkarte im Wizard ---------- */
.objekt { display: flex; gap: 14px; align-items: flex-start; }
.objekt .foto {
  width: 118px; height: 84px; border-radius: 12px; flex-shrink: 0;
  background: #f2f5f8 center/cover no-repeat;
  display: grid; place-items: center; color: var(--text-leise); font-size: 11.5px;
}
.objekt .mitte { flex: 1; min-width: 0; }
.objekt .titel { font-size: 14.5px; font-weight: 700; letter-spacing: -.2px; }
.objekt .ort { font-size: 12.5px; color: var(--text-leise); margin-top: 1px; }
.objekt .preis { font-size: 14px; font-weight: 700; color: var(--ks-tief); margin-top: 5px; }
.objekt .griff { display: flex; flex-direction: column; gap: 3px; flex-shrink: 0; }
.objekt .griff button {
  width: 26px; height: 24px; border: 0; border-radius: 7px;
  background: #f2f5f8; color: var(--text-leise); cursor: pointer;
  font-size: 11px; line-height: 1;
}
.objekt .griff button:hover { background: #e6ebf0; color: var(--text); }

/* ---------- Vorschaurahmen ---------- */
.mailrahmen {
  border: 1px solid var(--linie); border-radius: var(--r-klein);
  overflow: hidden; background: #f7f9fa;
}
.mailrahmen iframe { display: block; width: 100%; height: 720px; border: 0; background: #fff; }

/* ---------- Pruefliste ---------- */
.befund { display: flex; gap: 11px; align-items: flex-start; padding: 10px 0;
          border-bottom: 1px solid var(--linie); }
.befund:last-child { border-bottom: 0; }
.befund .zeichen {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; margin-top: 1px;
  display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff;
}
.befund.gut .zeichen { background: var(--gut); }
.befund.warn .zeichen { background: var(--warn, #e8b23a); }
.befund.schlecht .zeichen { background: var(--schlecht); }
.befund .satz { font-size: 13.5px; font-weight: 600; }
.befund .dazu { font-size: 12.5px; color: var(--text-leise); margin-top: 2px; line-height: 1.45; }

/* ---------- Typwahl ---------- */
.typwahl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.typwahl button {
  text-align: left; background: var(--karte); border: 2px solid transparent;
  border-radius: var(--r-gross); padding: 22px; cursor: pointer;
  box-shadow: var(--schatten); font-family: inherit;
  transition: border-color .16s, transform .16s;
}
.typwahl button:hover { border-color: var(--ks); transform: translateY(-2px); }
.typwahl .sym {
  width: 46px; height: 46px; border-radius: 14px; margin-bottom: 14px;
  background: linear-gradient(150deg, var(--ks-hell), var(--ks-tief));
  display: grid; place-items: center; color: #fff;
}
.typwahl .sym svg { width: 22px; height: 22px; }
.typwahl h3 { font-size: 16px; font-weight: 700; margin: 0 0 6px; letter-spacing: -.2px; }
.typwahl p { font-size: 12.8px; color: var(--text-leise); margin: 0; line-height: 1.55; }

@media (max-width: 900px) { .typwahl { grid-template-columns: 1fr; } }

/* ---------- Nachtrag: Klassen, die in Vorlagen benutzt werden ----------
   Drei Faelle, die beim Aufraeumen auffielen. */

/* .marke ist im Entwurf die Lupen-Kachel der Kopfzeile: 46x46 mit
   Verlauf. Eine Pille mit derselben Klasse erbte das und wurde zum
   blauen Kreis. Hoehere Spezifitaet setzt jede dieser Eigenschaften
   zurueck - umbenennen waere sauberer, aendert aber jede Vorlage. */
.pille.marke {
  width: auto; height: auto; border-radius: 999px;
  background: #e8f4fc; color: var(--ks-tief);
  display: inline-flex; place-items: unset;
  box-shadow: none; padding: 4px 10px;
}

/* .gross gab es nur als .rate .gross - ausserhalb der Klickrate-Karte
   blieb die Zahl so gross wie Fliesstext. */
.gross {
  font-size: 26px; font-weight: 800;
  letter-spacing: -.8px; margin: 4px 0 0;
}

/* Listeneintrag mit Beschriftung links und Wert rechts. Der Entwurf
   kennt .eintrag fuer Namen mit Balken; .posten ist die ruhige Form
   fuer Zahlenpaare. */
.liste .posten {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 0; border-bottom: 1px solid var(--linie);
  text-decoration: none; color: inherit;
}
.liste .posten:last-child { border-bottom: 0; }
.liste .posten .weg { flex: 1; min-width: 0; }
.liste .posten .titel { font-size: 13.5px; font-weight: 600; }
.liste .posten .unter { font-size: 12.5px; color: var(--text-leise); }

/* htmx: Anzeige nur waehrend eine Anfrage laeuft */
.htmx-indicator { opacity: 0; transition: opacity .2s; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { opacity: 1; }

/* ---------- Leerer Zustand mit Bild ----------
   Genau ein Motiv, an den drei Stellen, die dasselbe sagen: Es fehlen
   Objekte. Mehr Bilder waeren Deko - dieses eine macht aus einer leeren
   Karte einen Anfang. */
.leer.mit-bild img {
  width: 132px; height: 132px;
  display: block; margin: 0 auto 6px;
  opacity: .96;
}