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

/* Schrift liegt lokal im Projekt, nicht beim Google-Font-CDN: jeder
 * Aufruf dorthin uebertraegt die IP des Nutzers in die USA, und genau
 * dafuer ist das LG Muenchen I (3 O 17493/20) einschlaegig.
 * Quelle der Dateien: assets/fonts/, SIL OFL - siehe
 * schriften/PlusJakartaSans-OFL.txt.
 *
 * Nur drei Schnitte: 500 und 800 tauchen weiter unten zwar auf,
 * fallen aber auf 400 bzw. 700 zurueck. Zwei weitere Downloads
 * waeren das kaum sichtbare Ergebnis nicht wert.
 */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('schriften/PlusJakartaSans-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('schriften/PlusJakartaSans-SemiBold.woff2') format('woff2');
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('schriften/PlusJakartaSans-Bold.woff2') format('woff2');
}

: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;
  /* 4,93:1 auf --karte, 4,66:1 auf der Kachelflaeche #f7f9fa, 4,50:1 auf
     der Pille #f2f5f8 - ueberall WCAG AA. Der Vorgaenger #8b9199 kam auf
     3,18:1: lesbar fuer den, der die Farbe gewaehlt hat, unlesbar fuer
     den, der sie braucht. Wer hier aufhellt, nimmt jeden Erklaertext,
     jede Zeitangabe und jede Feldhilfe wieder mit. */
  --text-leise:#6b7179;
  --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);

  /* Kartenpolster und Kartenrundung als Variablen, weil Bausteine in der
     Karte daran haengen: ein randlos durchlaufendes Band muss das
     Polster negativ ausgleichen und die Rundung oben nachziehen. Auf dem
     Telefon schrumpfen beide - wer 18px/20px fest einbaut, sitzt dort
     schief. */
  --karte-polster-y: 18px;
  --karte-polster-x: 20px;
  --karte-rund: var(--r-gross);

  /* Der Rand um die ganze Seite. Als Variable, weil .tor daraus seine
     Mindesthoehe rechnet - vorher stand dort die Konstante 52px, also
     zweimal 26. Auf dem Telefon schrumpft der Rand, und die Konstante
     haette danach eine Bildhoehe behauptet, die es nicht gibt. */
  --seiten-rand: 26px;
}

* { 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: var(--seiten-rand);
}

/* ---------- 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; }
.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 ----------
   Die Spaltenbreiten stehen hier und nicht als style="" in 38 Vorlagen.
   Grund ist nicht Ordnungsliebe: ein Inline-Attribut schlaegt jede
   Medienabfrage, der Umbruchpunkt weiter unten koennte ein inline
   gesetztes Raster gar nicht zuruecknehmen.

   Jede Spur ist minmax(0, ...) statt 1fr. "1fr" ist in Wahrheit
   minmax(auto, 1fr), und auto heisst als Mindestmass min-content: eine
   breite Tabelle in der Spalte drueckt die Spur auf, die Spur das
   Raster, das Raster den Seitenkoerper. Genau daran scrollte das
   Telefon waagerecht. */
.reihe { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 16px; }
.reihe.eins { grid-template-columns: minmax(0, 1fr); }
.reihe.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.reihe.drei  { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr) minmax(0, 1fr); }
.reihe.drei-gleich { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.reihe.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Breite Arbeitsspalte links, schmale Begleitspalte rechts. Ersetzt
   1.3fr / 1.4fr / 1.5fr / 1.6fr aus den Vorlagen - der Unterschied
   zwischen diesen vier war nie eine Entscheidung, nur Streuung. */
.reihe.haupt-neben { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }

/* Eine einzelne Karte, die nicht ueber die ganze Breite laufen soll:
   leere Zustaende, Fehlerseite, Bueroauswahl. */
.reihe.schmal { grid-template-columns: minmax(0, 560px); }

/* Kachelgalerie. min(100%, 300px) statt 300px: ist das Fenster schmaler
   als die Mindestbreite der Spur, schoebe die Kachel sonst hinaus,
   statt sich auf Fensterbreite zu setzen. */
.reihe.galerie { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.reihe.galerie.eng { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }

/* Karte ueber beide Spalten. Als Klasse und nicht inline, weil der
   Umbruchpunkt sie zuruecknehmen muss: in einer einspaltigen Reihe legt
   span 2 sonst eine zweite, implizite Spalte an - und die laeuft aus
   dem Bild. */
.reihe > .ueber-zwei { grid-column: span 2; }

.karte {
  background: var(--karte); border-radius: var(--karte-rund);
  padding: var(--karte-polster-y) var(--karte-polster-x);
  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: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 6px; }
.kacheln.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Vorschaustreifen der Objektfotos. 84 px als Mindestbreite ergibt auf
   einem Telefon drei Bilder nebeneinander und auf dem Schreibtisch so
   viele, wie hineinpassen - eine feste Spaltenzahl kann beides nicht. */
.fotostreifen {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 84px), 1fr));
}
.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 ----------
   .karte.hinweis, nicht .hinweis: es gibt 22 <div class="meldung
   hinweis"> in den Vorlagen und genau eine Hinweis-Karte. Unqualifiziert
   traf die Regel alle - jede blaue Meldung stand mittig und trug 22 px
   Kopfpolster, und mehrzeilige Texte waren dadurch auf dem Telefon
   schlecht zu lesen. */
.karte.hinweis { text-align: center; padding-top: 22px; }
.karte.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);
}
.karte.hinweis .sym-gross svg { width: 26px; height: 26px; stroke-width: 1.7; }
.karte.hinweis h3 { font-size: 15.5px; font-weight: 700; margin: 0 0 5px; }
.karte.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: repeat(2, minmax(0, 1fr)); }
  .reihe.drei { grid-template-columns: minmax(0, 1fr); }
  /* .drei ist hier einspaltig - eine Karte ueber zwei Spalten legt
     sonst eine zweite, implizite Spalte an und schiebt die Seite. */
  .reihe.drei > .ueber-zwei { grid-column: auto; }
}

/* ---------- 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 - 2 * var(--seiten-rand));
  display: grid;
  place-items: center;
  padding: 24px 16px;
  /* Der Schein hinter der Karte ist 130 % breit und absolut gesetzt. Auf
     390 px ragte er 46 px ueber jeden Rand hinaus und machte die
     Anmeldung - den ersten Bildschirm ueberhaupt - waagerecht
     schiebbar. Beschneiden statt verkleinern: sonst waere aus dem
     weichen Verlauf eine sichtbare Kante geworden. */
  overflow: hidden;
}

/* 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; }
/* Wer auf einer Fehlerseite landet, ist steckengeblieben - der Weg
   zurueck zur Uebersicht allein hilft ihm dann nicht weiter. */
.leer .hilfe { font-size: 12.5px; color: var(--text-leise); margin-top: 14px; }
.leer .hilfe a { color: var(--ks-tief); text-decoration: none; }
.leer .hilfe a:hover { text-decoration: underline; }

/* ---------- 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; }

/* Huelle um jede Tabelle.

   Sieben Spalten passen nicht in 390 px, und das laesst sich nicht
   wegdesignen. Zwei Auswege gibt es: die Zeile als Karte stapeln oder
   die Tabelle in einer eigenen Flaeche schieben. Gestapelt wird hier
   nichts - diese Tabellen werden spaltenweise gelesen (wer, welche
   Rolle, wann zuletzt, wie oft), und genau dieser senkrechte Vergleich
   geht als Kartenstapel verloren. Wo eine Karte die bessere Form ist,
   steht in der Vorlage auch eine Karte und keine Tabelle: die
   Anruf-Liste ist so gebaut.

   Also schiebt die Tabelle, nicht die Seite. */
.tabelle-huelle { overflow-x: auto; }

/* Schattenkante als Hinweis, dass rechts noch etwas steht.

   Die beiden hellen Verlaeufe haengen an "local" und wandern mit dem
   Inhalt, die beiden Schatten an "scroll" und bleiben stehen. Am
   Anschlag liegt der Verlauf ueber dem Schatten und deckt ihn zu - der
   Schatten erscheint also nur, solange es wirklich weitergeht. Das
   kostet kein Javascript und luegt nie. */
.tabelle-huelle {
  background:
    linear-gradient(to right, var(--karte) 40%, rgba(255,255,255,0)) left center / 26px 100% no-repeat local,
    linear-gradient(to left,  var(--karte) 40%, rgba(255,255,255,0)) right center / 26px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,   rgba(20,24,29,.16), rgba(20,24,29,0)) left center / 11px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(20,24,29,.16), rgba(20,24,29,0)) right center / 11px 100% no-repeat scroll;
}

/* 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 input[type=datetime-local], .feld input[type=time],
.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); }

/* Auswahlfelder im Hausdesign (web/statisch/wahl.js)
 *
 * Das aufgeklappte Menue eines <select> zeichnet das Betriebssystem -
 * auf einem Mac ein dunkelgraues Kaestchen mit Haken, mitten in einer
 * hellen Oberflaeche. Erreichbar ist es mit CSS nicht, also baut das
 * Skript die Liste nach. Das echte Feld bleibt stehen und traegt den
 * Wert; hier wird es nur unsichtbar gemacht.
 *
 * Nicht display:none - ein so verstecktes Pflichtfeld laesst sich vom
 * Browser nicht bemaengeln ("not focusable"), und das Formular haengt
 * ohne sichtbare Meldung. */
.wahl { position: relative; }
.wahl .wahl-echt {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; pointer-events: none; z-index: -1;
}

.wahl-knopf {
  width: 100%; display: flex; align-items: center; gap: 10px;
  font-family: inherit; font-size: 13.5px; text-align: left;
  padding: 10px 13px; border: 1.5px solid var(--linie);
  border-radius: var(--r-klein); background: #fff; color: var(--text);
  cursor: pointer; transition: border-color .15s;
}
.wahl-knopf:hover { border-color: #dfe3e7; }
/* Nur der Rahmenwechsel. Den Ring zeichnet die gemeinsame
   :focus-visible-Regel weiter unten - der hiesige lag mit --ks-hell bei
   1,9:1 gegen Weiss und war damit fuer die, die ihn brauchen, kaum da. */
.wahl-knopf:focus-visible { border-color: var(--ks); }
.wahl.offen .wahl-knopf { border-color: var(--ks); }
.wahl-knopf[disabled] { background: #f7f9fa; color: var(--text-leise); cursor: default; }

.wahl-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wahl-text.wahl-leer { color: var(--text-leise); }

.wahl-pfeil {
  width: 9px; height: 9px; flex: none; margin-right: 1px;
  border-right: 1.6px solid var(--text-leise);
  border-bottom: 1.6px solid var(--text-leise);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .18s;
}
.wahl.offen .wahl-pfeil { transform: rotate(-135deg) translate(-3px, -3px); }

.wahl-liste {
  position: absolute; left: 0; top: calc(100% + 5px); z-index: 60;
  /* Der Knopf steht in Tabellen oft in einer schmalen Spalte. Die Liste
     erbt seine Breite als Untergrenze, darf aber wachsen - sonst steht
     dort "Assiste..." statt "Assistenz", und man waehlt aufs Geratewohl. */
  min-width: 100%; width: max-content; max-width: min(340px, 86vw);
  max-height: 260px; overflow-y: auto; padding: 5px;
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: var(--r-klein); box-shadow: var(--schatten);
  animation: wahl-auf .13s ease-out;
}
/* Am rechten Rand nach innen ausrichten, sonst laeuft sie aus dem Bild. */
.wahl.nach-links .wahl-liste { left: auto; right: 0; }
.wahl.nach-oben .wahl-liste { top: auto; bottom: calc(100% + 5px); }
@keyframes wahl-auf { from { opacity: 0; transform: translateY(-4px); } }
.wahl-eintrag {
  padding: 8px 11px; border-radius: 9px; font-size: 13.5px;
  /* Ausdruecklich, nicht geerbt: In einer Tabellenzelle mit leiser
     Schrift waere sonst die halbe Liste blass. */
  color: var(--text); font-weight: 400;
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.wahl-eintrag:hover, .wahl-eintrag.aktiv { background: #f2f5f7; }
.wahl-eintrag.gewaehlt { color: var(--ks-tief); font-weight: 600; }
.wahl-eintrag.gewaehlt:hover, .wahl-eintrag.gewaehlt.aktiv { background: #eaf4fb; }

/* Wer die Bewegung abbestellt hat, bekommt sie nicht. */
@media (prefers-reduced-motion: reduce) {
  .wahl-liste { animation: none; }
  .wahl-pfeil { transition: none; }
}

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

/* Eingabe plus kurzes Beiwerk daneben - ein Text mit Symbolauswahl,
   eine Zahl mit Einheit. Die zweite Spalte darf schrumpfen, aber nicht
   waagerecht wandern; 150px fest waeren auf 390 px genau das gewesen. */
.feld-paar.ungleich { grid-template-columns: minmax(0, 1fr) minmax(0, 150px); }

/* 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, .feld-paar.ungleich { grid-template-columns: minmax(0, 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;
}


/* ---------- Politur - Sichtbarer Tastaturfokus ----------

   Wer die Oberflaeche mit der Tastatur bedient, muss sehen, wo er
   steht. Vorher stand nirgends ein Fokusring, dafuer an sieben Stellen
   `outline: 0` - drei davon inline im style-Attribut einer Vorlage. Wer
   keine Maus fuehren kann, war damit ausgesperrt.

   Darum `!important`: Der Ring ist eine Untergrenze, kein Vorschlag.
   Ein Baustein darf ihn nicht unterschreiten, und ein inline gesetztes
   `outline:0` wuerde ihn sonst wieder abraeumen, ohne dass es jemand
   bemerkt - man sieht ja nichts, was fehlt.

   `:focus-visible` statt `:focus`: Der Ring erscheint bei Tastatur und
   Bildschirmleser, nicht nach jedem Mausklick. Sonst wuerde er als
   Stoerung empfunden und beim naechsten Aufraeumen wieder entfernt.

   `:is(...)` hebt die Spezifitaet auf 0-1-1 - genau so viel, wie
   `.tor input { outline: 0 }` hat. Ein blosses `:focus-visible` (0-1-0)
   waere von jeder Bausteinregel ueberstimmt worden.

   `outline-offset` legt den Ring in den Abstand *ausserhalb* des
   Elements. Dort liegt ueberall eine helle Flaeche, deshalb stimmt der
   Kontrast auch auf den dunklen Schaltflaechen (.leiste .sym.aktiv,
   .register a.aktiv). --ks-tief kommt auf 5,45:1 gegen Weiss und
   4,40:1 gegen --grund; gefordert sind 3:1. */
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ks-tief) !important;
  outline-offset: 2px;
}

/* Das echte <select> hinter einem aufgewerteten Auswahlfeld ist
   unsichtbar (web/statisch/wahl.js nimmt es aus der Tabfolge). Faellt
   das Skript aus, ist es wieder ein normales Feld und bekommt den Ring
   wie jedes andere. */
.wahl .wahl-echt:focus-visible { outline: 0 !important; }

/* ---------- Politur - Laufende Aktion ----------
   Gegenstueck zu web/statisch/rueckmeldung.js. Ein Knopf, der eine
   Sekunde lang nichts tut, sieht aus wie ein kaputter - und wird ein
   zweites Mal gedrueckt. Bei einem KI-Durchgang kostet der zweite Klick
   Geld und liefert ein zweites, abweichendes Ergebnis. */
.knopf[aria-busy="true"], button[aria-busy="true"] {
  opacity: .6;
  cursor: progress;
}

/* ---------- Politur - Der leise Nebensatz ----------
   132 Stellen schreiben class="klein" und meinen denselben leisen
   Nebensatz. Eine Regel dafuer gab es nicht: nur .rate .klein,
   .knopf.klein und .wegweiser-jetzt .klein. Ueberall sonst stand der
   Nebensatz so gross und so dunkel wie der Fliesstext daneben - und
   damit gleichrangig mit dem, was er nur erlaeutert.

   :not(.knopf), weil .knopf.klein ein kleiner KNOPF ist, kein kleiner
   Text. Ohne den Ausschluss wuerde diese Regel die weisse Schrift des
   Knopfes mit --text-leise ueberschreiben - grau auf Blau.

   Die Farbe steht bewusst hier unten und nicht frueher: So gewinnt
   .wegweiser-jetzt .klein (weiss auf der Markenflaeche) weiter, weil es
   bei gleicher Spezifitaet spaeter kommt. */
.klein:not(.knopf) {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-leise);
}

/* ==========================================================
   Telefon und Tablet
   ==========================================================

   Makler sitzen nicht am Schreibtisch. Wer im Auto vor einem Objekt
   steht und wissen will, wen er als naechstes anruft, hat 390 px.

   Der Umbruch liegt bei 900 px, nicht bei 480: schon ein Tablet im
   Hochformat (768 px) hat neben der 62-px-Saeule zu wenig Rest fuer
   zwei Spalten Inhalt. Alles darunter ist derselbe Fall.

   Dieser Abschnitt steht am Dateiende, weil er nur zuruecknimmt, was
   weiter oben steht - stuende er davor, gaeben die spaeteren Regeln
   bei gleicher Spezifitaet den Ausschlag. */

@media (max-width: 900px) {

  /* 26 px ringsum sind auf 390 px ein Siebtel der Bildbreite. */
  :root { --seiten-rand: 12px; }

  /* Aus der schwebenden Saeule wird eine Leiste ueber dem Inhalt. Sie
     bleibt oben kleben: wer weit unten in einer Liste steht, kaeme
     sonst nur durch Hochscrollen zur naechsten Seite. Passen die
     Symbole nicht nebeneinander, schiebt die Leiste - aber nur sie,
     nicht die Seite. */
  .huelle { flex-direction: column; gap: 12px; }
  .leiste {
    /* align-self bleibt aus der Grundregel auf flex-start stehen und
       machte die Leiste so breit wie ihre Symbole - 539 px auf einem
       390-px-Bild. stretch bindet sie an die Fensterbreite, erst dann
       wirkt das overflow-x darunter. */
    width: auto; align-self: stretch;
    flex-direction: row; align-items: center;
    gap: 2px; padding: 6px 8px;
    border-radius: var(--r-klein);
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none;
    top: 0; z-index: 20;
  }
  .leiste::-webkit-scrollbar { display: none; }
  .leiste .sym { flex-shrink: 0; border-radius: 11px; }
  .leiste .trenner { width: 1px; height: 24px; margin: 0 5px; flex-shrink: 0; }
  .leiste .fuss {
    flex-direction: row; align-items: center;
    margin-top: 0; margin-left: auto; gap: 2px;
  }
  .leiste .konto { margin-top: 0; flex-shrink: 0; }

  /* Die Kopfzeile bleibt einzeilig. Mit flex-wrap rutschten Anruf- und
     Hilfeknopf bei einer laengeren Ueberschrift in eine eigene Zeile und
     hinterliessen daneben eine leere Bank - der Gruss soll stattdessen
     umbrechen, er hat dafuer min-width: 0. */
  .kopf { flex-wrap: nowrap; gap: 10px; margin: 0 0 16px; }
  .marke { width: 40px; height: 40px; border-radius: 12px; }
  .marke svg { width: 21px; height: 21px; }
  .gruss { flex: 1 1 auto; min-width: 0; }
  .gruss h1 { font-size: 18px; line-height: 1.25; }
  .gruss p { font-size: 12.5px; }
  .kopf-rechts { flex-shrink: 0; gap: 8px; }

  /* Jede mehrspaltige Reihe faellt zusammen. Die Kennzahlen bleiben zu
     zweit: vier gestapelte Karten schieben den eigentlichen Inhalt
     unter den Bildrand. */
  .reihe { gap: 12px; margin-bottom: 12px; }
  .reihe.zwei, .reihe.drei, .reihe.drei-gleich,
  .reihe.haupt-neben, .reihe.schmal { grid-template-columns: minmax(0, 1fr); }
  .reihe.vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reihe > .ueber-zwei { grid-column: auto; }

  /* Nicht .karte { padding: ... } - ueber :root ziehen alle Bausteine
     mit, die das Polster negativ ausgleichen (siehe .anrufband). */
  :root { --karte-polster-y: 15px; --karte-polster-x: 16px; --karte-rund: var(--r-klein); }

  /* Die Illustration der Aktionskarte nimmt 45 % der Breite und traegt
     keine Auskunft. Der Text daneben bekommt sie zurueck. */
  .aktion { flex-direction: column; }
  .aktion .rechts { display: none; }

  /* Suchfeld auf eine eigene Zeile, sonst quetscht es sich neben das
     Auswahlfeld auf Stummelbreite. */
  .werkzeug .suchfeld { flex-basis: 100%; min-width: 0; }
  .werkzeug select { flex: 1; min-width: 0; }

  .register { width: 100%; }

  /* Kartenkopf: Ueberschrift links, Zustandsschilder rechts. Bei zwei
     Pillen blieben der Ueberschrift auf 390 px 110 px - "Exposés
     hochladen" stand zweizeilig gequetscht neben den Etiketten, die es
     erklaeren sollen. Die Schilder rutschen jetzt darunter.

     Ohne Nebenwirkung, weil .weg flex-basis 0 hat und beim Umbruch
     nicht mitzaehlt: solange alles nebeneinander passt, bleibt es
     nebeneinander - auf dem Tablet aendert sich nichts. */
  .karte-kopf { flex-wrap: wrap; row-gap: 8px; }

  /* Die Tabellen mit vielen Spalten bekommen den Hinweis in Worten -
     die Schattenkante allein sieht man auf einem hellen Bildschirm in
     der Sonne nicht. "sticky" haelt den Satz beim Schieben stehen,
     sonst wanderte er mit der Tabelle aus dem Bild. */
  .tabelle-huelle.breit::after {
    content: 'Tabelle seitlich schiebbar';
    display: block; position: sticky; left: 0;
    width: max-content; max-width: 100%;
    margin-top: 9px;
    font-size: 11.5px; color: var(--text-leise);
  }

  /* Vorschau der Mail: 720 px hoher Rahmen fuellt ein Telefon zweimal. */
  .mailrahmen iframe { height: 480px; }

  /* Vier Kacheln nebeneinander sind auf einem Tablet 80 px breit - eine
     Prozentzahl passt hinein, ihre Beschriftung nicht. */
  .kacheln { gap: 10px; }
  .kacheln.vier { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .schritte { overflow-x: auto; }
}

@media (max-width: 560px) {
  :root { --seiten-rand: 10px; --karte-polster-y: 14px; --karte-polster-x: 14px; }
  .gruss h1 { font-size: 17px; }

  /* Zwei Kennzahlen nebeneinander bleiben, aber das Symbol davor und
     der Verlaufsbalken dahinter kosten zusammen mehr Breite als die
     Zahl selbst - und die ist das Einzige, weshalb man hinsieht. */
  .kennzahl { gap: 10px; }
  .kennzahl .rund { width: 36px; height: 36px; border-radius: 11px; }
  .kennzahl .rund svg { width: 17px; height: 17px; }
  .kennzahl .bild { display: none; }
  .kennzahl .wert { font-size: 18px; }
  .kennzahl .label { font-size: 11.5px; }

  .kacheln, .kacheln.vier { grid-template-columns: minmax(0, 1fr); }
  .reihe.galerie.eng { grid-template-columns: repeat(auto-fill, minmax(min(100%, 130px), 1fr)); }

  /* Der leere Zustand mit Bild: 132 px Motiv neben 10 px Rand ist auf
     einem Telefon die halbe Karte. */
  .leer.mit-bild img { width: 104px; height: 104px; }
  .leer { padding: 20px 4px; }
}

/* ---------- Beruehrflaechen ----------

   Ein Daumen trifft eine Flaeche von etwa 9 mm zuverlaessig, das sind
   rund 44 px. .knopf.klein war 31 px hoch, .blaettern 32 px - beides
   Glueckssache.

   Die Abfrage haengt an pointer:coarse und nicht allein an der Breite:
   ein Tablet im Querformat ist 1024 px breit und wird trotzdem mit dem
   Finger bedient. Die Breite steht daneben, damit ein schmales Fenster
   am Rechner dieselbe Oberflaeche zeigt wie das Telefon - sonst pruefte
   man beim Verkleinern etwas anderes, als der Makler sieht.

   Die Pillen bleiben, wie sie sind: .pille ist ueberall ein <span>, ein
   Zustandsschild und kein Ziel. Wer sie auf 44 px zoege, machte 80
   Etiketten zu Schaltflaechen, die nichts tun. */
@media (pointer: coarse), (max-width: 900px) {
  .knopf { min-height: 44px; }
  .knopf.klein { min-height: 44px; padding: 0 15px; font-size: 13px; }
  .rundknopf { width: 44px; height: 44px; }
  .leiste .sym { width: 44px; height: 44px; }
  .register a { display: inline-flex; align-items: center; min-height: 40px; }
  .blaettern a, .blaettern span { min-width: 44px; height: 44px; }
  .objekt .griff button { width: 38px; height: 38px; }

  /* Eingabefelder sind ebenfalls Ziele - und 16 px Schrift, weil iOS
     bei allem darunter beim Antippen hineinzoomt und danach nicht mehr
     herauszoomt. */
  .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 input[type=datetime-local], .feld input[type=time],
  .feld select, .wahl-knopf, .werkzeug select, .tor input {
    min-height: 44px; font-size: 16px;
  }
  .feld textarea, .werkzeug .suchfeld input { font-size: 16px; }
  .werkzeug .suchfeld { padding: 5px 15px; min-height: 44px; }
  .wahl-eintrag { min-height: 42px; display: flex; align-items: center; }

  /* Das Kaestchen selbst ist 17 px - antippbar wird die Zeile. */
  .haken { padding: 5px 0; }
  .haken input { width: 20px; height: 20px; }
}

/* ---------- Wegweiser der Startseite (Onboarding-2) ----------
   Steht anstelle des Armaturenbretts, solange noch keine Mail zugestellt
   ist. Der naechste Schritt bekommt die Groesse, die sonst eine Kennzahl
   haette - er IST an dieser Stelle die Kennzahl. */
.wegweiser-jetzt {
  background: linear-gradient(140deg, var(--ks) 0%, var(--ks-tief) 100%);
  color: #fff; box-shadow: 0 10px 26px rgba(11,111,168,.32);
  /* Hoehe aus dem Inhalt, nicht aus der Liste daneben: Gestreckt stuenden
     unter dem Knopf je nach Schritt bis zu drei Handflaechen leeres Blau. */
  align-self: start;
  padding: 30px 30px 34px;
}
.wegweiser-jetzt .stufe {
  font-size: 12px; font-weight: 600; letter-spacing: .3px;
  color: rgba(255,255,255,.82); margin-bottom: 8px;
}
.wegweiser-jetzt h2 {
  font-size: 26px; font-weight: 800; letter-spacing: -.7px;
  line-height: 1.2; margin: 0 0 12px;
}
.wegweiser-jetzt p {
  font-size: 13.5px; line-height: 1.6; margin: 0 0 20px;
  color: rgba(255,255,255,.9); max-width: 46ch;
}
/* Der Knopf steht auf der Markenflaeche - der Verlauf des Standardknopfs
   verschwindet darin. Weiss auf Blau ist der einzige Kontrast, der hier
   traegt. */
.wegweiser-jetzt .knopf {
  align-self: flex-start;
  background: #fff; color: var(--ks-tief);
  box-shadow: 0 4px 14px rgba(8,69,107,.28);
}
.wegweiser-jetzt .klein { color: rgba(255,255,255,.88); line-height: 1.55; }

.wegliste { list-style: none; margin: 0; padding: 0; }
.wegliste li {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 8px 0; border-bottom: 1px solid var(--linie);
}
.wegliste li:last-child { border-bottom: 0; }
.wegliste .marke {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: #f2f5f8; color: var(--text-leise);
  font-size: 12px; font-weight: 700;
}
.wegliste .marke svg { width: 14px; height: 14px; }
.wegliste .was { min-width: 0; }
.wegliste .titel { display: block; font-size: 13.5px; font-weight: 600; }
.wegliste .unter { display: block; font-size: 12px; color: var(--text-leise); margin-top: 1px; }

.wegliste li.fertig .marke { background: #e6f7ef; color: var(--gut); }
.wegliste li.fertig .titel { color: var(--text-leise); font-weight: 500; }
.wegliste li.dran .marke { background: var(--ks-tief); color: #fff; }
.wegliste li.dran .titel { color: var(--ks-tief); }

/* Nebeneinander braucht der Wegweiser Breite fuer den Begruendungssatz.
   Darunter wird aus zwei Spalten eine. */
@media (max-width: 900px) {
  .wegweiser-jetzt { padding: 22px 20px; }
  .wegweiser-jetzt h2 { font-size: 21px; }
}

/* ---------- Interesse: wer um Rueckruf gebeten hat ---------- */
/* Diese Karten stehen ohnehin oben in der Anruf-Liste. Sie muessen aber
   auch dann als etwas anderes erkennbar sein, wenn eine Karte mit vier
   Klicks direkt daneben liegt - sonst arbeitet man die Liste der Reihe
   nach ab und die zugesagten zwei Stunden verstreichen an Platz eins.
   Deshalb Rand und farbiges Band statt nur einer weiteren Pille. */
.karte.bittet-um-anruf {
  border: 1.5px solid var(--ks);
  box-shadow: 0 8px 22px rgba(30, 147, 214, .18);
}
.anrufband {
  margin: calc(var(--karte-polster-y) * -1) calc(var(--karte-polster-x) * -1) 14px;
  padding: 11px var(--karte-polster-x) 10px;
  /* Zwei Pixel weniger als die Karte: Das Band sitzt INNERHALB des 1.5px
     starken Rands, mit gleichem Radius schaute es an den Ecken darueber
     hinaus. */
  border-radius: calc(var(--karte-rund) - 2px) calc(var(--karte-rund) - 2px) 0 0;
  background: linear-gradient(140deg, var(--ks) 0%, var(--ks-tief) 100%);
  color: #fff;
}
.anrufband .satz { font-size: 13.5px; font-weight: 700; letter-spacing: -.2px; }
.anrufband .frist { font-size: 12px; color: rgba(255, 255, 255, .85); margin-top: 2px; }
.anrufband .frist strong { color: #fff; font-weight: 700; }
.pille.anruf { background: var(--ks-tief); color: #fff; }