/* ==========================================================================
   JSA — Gestaltungssprache
   Abgeleitet aus skills/gestaltung.md, entwuerfe/jsa-dashboard-entwurf.html
   und entwuerfe/kve-entwurf.html (28.08.2026).
   Farben aus dem Investorenexposé: Rot, Kohle, Weiß.

   Diese Datei trägt beide Layouts:
     .app / .sb / .buehne   — interne Oberflächen mit Seitenleiste (Dashboard)
     .aussen                — Seiten für Externe, ohne Navigation (KVE)

   Warum das zweite Layout: Die KVE-Seite läuft ohne Anmeldung, und ein
   Vertriebspartner soll dort keine Navigation zu Vermietung, Liquidität und
   GuV vorfinden. Was er nicht sehen darf, wird ihm auch nicht angezeigt.

   Fassung 2 (28.08.2026): weichere Radien, größere Tippflächen, dunklere
   Beschriftungen, randlose Karten auf schmalen Schirmen. Die Seite wird
   häufig am Handy ausgefüllt — dort ist sie zuerst richtig, nicht zuletzt.
   ========================================================================== */

:root{
  /* Gemessen am Logo im Investorenexposé: #FF3131. Die frühere Angabe
     #FE3030 wich um einen Punkt ab — sichtbar wurde es nie, aber Logo und
     Fläche kommen jetzt aus derselben Quelle. */
  --rot:#FF3131;
  --rot-dunkel:#E22525;
  --rot-hauch:#FFF0EF;
  --kohle:#292929;
  --kohle-tief:#1E1E1E;
  --kohle-hell:#3A3A3A;
  --flaeche:#F5F5F6;
  --karte:#FFFFFF;
  --linie:#E7E7EA;
  --linie-zart:#F0F0F2;
  --text:#1A1A1C;
  --text-2:#66666D;
  --text-3:#9B9BA3;
  --gruen:#12805C; --gruen-flaeche:#E7F4EF; --gruen-linie:#C6E4D8;
  --gelb:#96620A;  --gelb-flaeche:#FCF3E2; --gelb-linie:#EFDCB4;
  --grau:#55555C;  --grau-flaeche:#F0F0F2;

  --r-karte:14px;
  --r-feld:10px;
  --r:14px;                       /* Altname, weiter benutzt vom Dashboard */
  --schatten:0 1px 2px rgba(20,20,25,.04), 0 2px 8px rgba(20,20,25,.05);
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--flaeche); color:var(--text);
  font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
a{color:inherit;text-decoration:none}

/* Jede Zahl bekommt Tabellenziffern — sonst springen die Spalten. */
.zahl{font-variant-numeric:tabular-nums}

/* Ein Formular, das am Fuß eine klebende Leiste trägt, braucht Platz
   darunter — sonst verdeckt sie das letzte Feld. */
body.aussen{padding-bottom:96px}

/* ---------- Kopfzeile --------------------------------------------------- */
.kopf{
  background:var(--karte); border-bottom:1px solid var(--linie);
  position:sticky; top:0; z-index:30;
}
.kopf-innen{
  max-width:760px; margin:0 auto;
  padding:0 20px; height:64px;
  display:flex; align-items:center; gap:13px;
}
/* Das Logo aus dem Exposé ist selbst ein rotes Quadrat; die weichen Ecken
   kommen von hier. */
.logo{width:44px; height:44px; flex:none; border-radius:10px; display:block}
.kopf-text{display:flex; flex-direction:column; line-height:1.25; min-width:0}
.kopf-text h1{font-size:15px; font-weight:600; letter-spacing:-.01em}
.kopf-text span{font-size:11.5px; color:var(--text-3); font-weight:500}

/* Kennzeichen neben dem Seitentitel, damit niemand eine Vorführung für ein
   laufendes System hält. */
.entwurf{
  margin-left:auto;
  font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--rot);background:var(--rot-hauch);padding:4px 9px;border-radius:6px;
  white-space:nowrap;
}

/* ---------- Bühne ------------------------------------------------------- */
.buehne{padding:24px 28px 40px;max-width:1440px;width:100%}

/* Für Externe: schmaler, mittig. Ein Formular über 1440 px zu ziehen macht
   es nicht besser lesbar. */
.aussen .buehne{max-width:760px;margin:0 auto;padding:28px 20px 40px}

.gruss{margin-bottom:24px}
.gruss h2{font-size:26px;font-weight:600;letter-spacing:-.025em;line-height:1.25}
.gruss p{color:var(--text-2);font-size:14.5px;margin-top:8px;max-width:56ch}

/* ---------- Karten ------------------------------------------------------ */
.karte{
  background:var(--karte); border:1px solid var(--linie);
  border-radius:var(--r-karte); box-shadow:var(--schatten);
  margin-bottom:14px; overflow:hidden;
}
/* Kein Trennstrich unter der Kartenüberschrift — der Abstand trennt.
   Eine Linie weniger je Karte, fünfmal auf der Seite. */
.karte-kopf{padding:18px 20px 0;display:flex;align-items:center;gap:11px}
.karte-kopf h3{font-size:15px;font-weight:600;letter-spacing:-.01em}
.karte-kopf .zusatz{margin-left:auto;font-size:12px;color:var(--text-3)}
.karte-koerper{padding:16px 20px 20px}
.karte-koerper p + p{margin-top:10px}

/* Die Schrittzahl ist reine Orientierung — sie ändert nichts am Ablauf,
   sagt aber auf den ersten Blick, wie viel noch kommt. */
.schritt{
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;flex:none;
  border-radius:7px;background:var(--rot-hauch);color:var(--rot);
  font-size:12px;font-weight:600;
}

/* ---------- Kennzahlen (Dashboard) -------------------------------------- */
/* Höchstens eine kohlefarbene und höchstens eine rote Kachel je Reihe. */
.kpi-reihe{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}
.kpi-reihe.zwei{grid-template-columns:repeat(2,1fr)}
.kpi{
  background:var(--karte);border:1px solid var(--linie);border-radius:var(--r-karte);
  padding:16px 18px;box-shadow:var(--schatten);
}
.kpi .l{font-size:12px;color:var(--text-2);font-weight:500;margin-bottom:8px}
.kpi .w{font-size:25px;font-weight:600;letter-spacing:-.025em;line-height:1.1}
.kpi .u{font-size:12px;color:var(--text-3);margin-top:5px}
.kpi.betont{background:var(--kohle);border-color:var(--kohle)}
.kpi.betont .l{color:#A9A9B0}
.kpi.betont .w{color:#fff}
.kpi.betont .u{color:#7C7C84}
.kpi.akzent{background:var(--rot);border-color:var(--rot)}
.kpi.akzent .l{color:#FFD9D7}
.kpi.akzent .w{color:#fff}
.kpi.akzent .u{color:#FFC3C0}

/* ---------- Status ------------------------------------------------------ */
.status{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 11px 4px 9px;border-radius:20px;font-size:11.5px;font-weight:600;
  white-space:nowrap;
}
.status i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.75}
.s-verkauft{color:var(--gruen);background:var(--gruen-flaeche)}
.s-reserviert{color:var(--gelb);background:var(--gelb-flaeche)}
.s-bestand{color:var(--grau);background:var(--grau-flaeche)}
/* Auf farbigem Kartengrund trägt die Pille Weiß, sonst verschwimmt sie. */
.befund .status{background:#fff}

/* Rote Schrift auf Weiß heißt Warnung — nie in einer roten Fläche. */
.warn{color:var(--rot);font-weight:600;font-size:13px;margin-top:7px}

/* ---------- Felder ------------------------------------------------------ */
.feld{margin-bottom:18px}
.feld:last-child{margin-bottom:0}

/* Vorher 12 px grau. Eine Beschriftung, die man suchen muss, ist der
   Unterschied zwischen Formular und Behördenformular. */
.feld > label{
  display:block;font-size:13px;font-weight:500;color:var(--text);margin-bottom:7px;
}
.feld > label .opt{color:var(--text-3);font-weight:400}

.feld input[type=text],
.feld input[type=email],
.feld input[type=tel],
.feld input[type=number],
/* `password` hat hier bis zum 31.08.2026 gefehlt. Die Anmeldeseite war die
   einzige Seite mit einem solchen Feld, und sie benutzte ohnehin Klassen, die
   es nicht gab — deshalb ist es niemandem aufgefallen. */
.feld input[type=password],
.feld textarea{
  width:100%;
  /* 46 px hoch. Unter 44 px trifft ein Daumen daneben. */
  padding:12px 14px;
  font:inherit;font-size:15px;      /* 16 px-Nähe verhindert den iOS-Zoom */
  border:1px solid var(--linie);border-radius:var(--r-feld);
  background:var(--karte);color:var(--text);
  transition:border-color .15s, box-shadow .15s;
}
.feld input::placeholder{color:var(--text-3)}
.feld input:focus,.feld textarea:focus{
  outline:none;border-color:var(--rot);box-shadow:0 0 0 3px var(--rot-hauch);
}
.feld .hilfe{font-size:12.5px;color:var(--text-2);margin-top:7px;line-height:1.45}
.feld .hilfe b{color:var(--text);font-weight:600}

/* Django hängt an Pflichtfelder nichts an; die Kennzeichnung sitzt im Label. */
.feld .pflicht{color:var(--rot);font-weight:600}

/* Zwei kurze Felder nebeneinander, sobald Platz ist. */
.paar{display:grid;grid-template-columns:1fr;gap:0}
@media (min-width:560px){
  .paar{grid-template-columns:1fr 1fr;gap:0 16px}
}

/* ---------- Segmentierte Auswahl ---------------------------------------- */
/* Ersetzt die Radiogruppen von Django. Gleiche Werte, gleiche Namen — nur
   trifft man sie mit dem Daumen. Das Template durchläuft die Auswahl selbst,
   damit <input> und <label> Geschwister bleiben. */
.segment{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.segment input{position:absolute;opacity:0;pointer-events:none}
.segment label{
  display:flex;align-items:center;justify-content:center;gap:7px;
  min-height:46px;padding:10px 14px;
  border:1px solid var(--linie);border-radius:var(--r-feld);background:var(--karte);
  font-size:14px;font-weight:500;color:var(--text-2);
  cursor:pointer;text-align:center;
  transition:border-color .15s,color .15s,background .15s;
}
.segment label:hover{border-color:#C9C9CF;color:var(--text)}
.segment input:checked + label{border-color:var(--kohle);background:var(--kohle);color:#fff}
.segment input:focus-visible + label{box-shadow:0 0 0 3px var(--rot-hauch)}

/* ---------- Upload ------------------------------------------------------ */
/* Vorher ein nacktes <input type=file>. Auf dem Handy war das der Punkt, an
   dem die Seite am ältesten aussah. Das echte Feld liegt unsichtbar über der
   Fläche — damit bleibt die Bedienung die des Browsers. */
.upload{position:relative}
.upload input[type=file]{
  position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;
}
.upload-flaeche{
  display:flex;align-items:center;gap:13px;padding:16px;
  border:1.5px dashed #D6D6DC;border-radius:var(--r-feld);background:#FBFBFC;
  transition:border-color .15s,background .15s;
}
.upload:hover .upload-flaeche{border-color:var(--rot);background:var(--rot-hauch)}
.upload input:focus-visible + .upload-flaeche{
  border-color:var(--rot);box-shadow:0 0 0 3px var(--rot-hauch);
}
.upload-icon{
  flex:none;width:40px;height:40px;border-radius:10px;
  background:var(--rot-hauch);color:var(--rot);
  display:flex;align-items:center;justify-content:center;
}
.upload-text{min-width:0}
.upload-text .t1{font-size:14px;font-weight:500;color:var(--text);display:block}
.upload-text .t2{font-size:12.5px;color:var(--text-2);margin-top:2px;display:block}
/* Nach der Auswahl: Bestätigung statt unverändertem Kasten. */
.upload.hat-datei .upload-flaeche{
  border-style:solid;border-color:var(--gruen-linie);background:var(--gruen-flaeche);
}
.upload.hat-datei .upload-icon{background:#fff;color:var(--gruen)}
.upload.hat-datei .t1{color:var(--gruen)}

/* ---------- Knöpfe ------------------------------------------------------ */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:44px;padding:11px 18px;
  border:1px solid var(--linie);border-radius:var(--r-feld);background:var(--karte);
  font-size:14px;font-weight:500;color:var(--text);
  transition:border-color .15s,background .15s,transform .08s;
}
.knopf:hover{border-color:#C9C9CF;background:#FBFBFC}
.knopf:active{transform:translateY(1px)}
.knopf.primaer{background:var(--rot);border-color:var(--rot);color:#fff;font-weight:600}
.knopf.primaer:hover{background:var(--rot-dunkel);border-color:var(--rot-dunkel)}
.knopf.breit{width:100%}
.knopf.leise{border-style:dashed;color:var(--text-2);background:transparent}
.knopf.leise:hover{border-color:var(--rot);color:var(--rot);background:var(--rot-hauch)}

/* ---------- Trefferanzeige ---------------------------------------------- */
.treffer{margin-top:14px}
.treffer:empty{margin-top:0}
.befund{
  border:1px solid var(--linie);border-radius:var(--r-feld);
  padding:15px 16px;background:#FBFBFC;
  animation:auf .22s ease-out;
}
@keyframes auf{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.befund.gut{background:var(--gruen-flaeche);border-color:var(--gruen-linie)}
.befund.offen{background:var(--gelb-flaeche);border-color:var(--gelb-linie)}
.befund p{font-size:14px}
.befund .neben{font-size:12.5px;color:var(--text-2);margin-top:7px;line-height:1.5}
.wahl{
  display:block;width:100%;text-align:left;margin-top:8px;
  padding:13px 15px;font-weight:500;
}
.wahl small{
  display:block;font-size:12px;color:var(--text-3);font-weight:400;margin-top:2px;
}

/* ---------- Zweiter Käufer ---------------------------------------------- */
.k2-weg{
  margin-left:auto;font-size:13px;color:var(--text-3);font-weight:500;
  padding:6px 10px;border-radius:8px;
}
.k2-weg:hover{color:var(--rot);background:var(--rot-hauch)}

/* ---------- Absendeleiste ----------------------------------------------- */
/* Klebt unten. Auf einem langen Formular ist der Absendeknopf sonst ein Ort,
   zu dem man erst scrollen muss. */
.leiste{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-top:1px solid var(--linie);
  padding:12px 20px calc(12px + env(safe-area-inset-bottom));
}
.leiste-innen{max-width:760px;margin:0 auto;display:flex;align-items:center;gap:14px}
.leiste .hinweis{font-size:12.5px;color:var(--text-2);line-height:1.4}
.leiste .knopf{flex:none;min-width:150px}
@media (max-width:559px){
  .leiste .hinweis{display:none}
  .leiste .knopf{width:100%}
}

/* ---------- Kennzeichen -------------------------------------------------- */
.ks{
  font-size:11px;font-weight:600;color:var(--text-2);
  background:var(--grau-flaeche);padding:2px 6px;border-radius:4px;white-space:nowrap;
}
code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;
  background:var(--grau-flaeche);padding:1px 5px;border-radius:4px;
}

/* ---------- Fußnote ------------------------------------------------------ */
/* Bei echten Zahlen steht immer dabei, woher sie stammen und von wann.
   Auf der Formularseite entfällt sie (28.08.2026) — dort stehen keine Zahlen
   aus dem Bestand, sondern nur Eingaben. Auf der Bestätigungsseite bleibt sie. */
.quelle{
  background:#EFEFF1;border-radius:var(--r-feld);padding:14px 16px;
  font-size:12.5px;color:var(--text-2);margin-top:22px;line-height:1.6;
}
.quelle b{color:var(--text);font-weight:600}
.quelle a{color:var(--rot);font-weight:500}

/* ---------- Schmale Schirme --------------------------------------------- */
/* Auf dem Handy verschwinden die Kartenrahmen. Ein Rahmen um eine Karte, die
   ohnehin die volle Breite hat, umrandet nichts — er verschachtelt nur. */
@media (max-width:559px){
  body.aussen{background:var(--karte)}
  .aussen .buehne{padding:22px 0 32px}
  .aussen .gruss{padding:0 18px}
  .aussen .gruss h2{font-size:23px}
  .aussen .karte{
    border:none;border-radius:0;box-shadow:none;margin-bottom:0;
    border-bottom:8px solid var(--flaeche);
  }
  .aussen .karte-kopf{padding:22px 18px 0}
  .aussen .karte-koerper{padding:14px 18px 22px}
  .aussen .quelle{border-radius:0;margin-top:0;padding:18px}
  .aussen .k2-zeile{padding:0 18px;margin:14px 0}
  .segment{grid-template-columns:1fr}
}

/* ---------- Anmeldung ---------------------------------------------------- */
/* Die erste Seite, die jemand von der Plattform sieht. Sie trägt zwei Felder
   und einen Knopf; die Bühne für Externe (760 px) ist dafür doppelt so breit
   wie nötig, deshalb hier 400 px und mittig — waagerecht wie senkrecht.
   Eine Anmeldemaske am oberen Rand eines leeren Bildschirms sieht aus, als
   fehle etwas darunter.

   Sie erbt alles Übrige: `.karte`, `.feld`, `.knopf primaer breit`. Die
   vorige Fassung brachte eigene Klassennamen mit — `.anmeldekarte`,
   `.knopf-haupt`, `.fehler` —, die es in dieser Datei nie gegeben hat. Sie
   war deshalb nicht schlicht, sondern ungestaltet. */
/* Kein `min-height:100vh`-Rechenspiel. `100vh` ist auf Mobilbrowsern die Höhe
   OHNE die Adressleiste, die dann doch da ist — die Karte rutscht darunter.
   Ein fester Abstand von oben ist vorhersagbar und sieht überall gleich aus. */
.anmeldung{max-width:400px;margin:7vh auto 0}
.anmeldung .karte{margin-bottom:0}
.anmeldung .karte-kopf h3{font-size:17px}
.anmeldung .karte-kopf p{
  font-size:13px;color:var(--text-2);margin-top:6px;line-height:1.5;
}
.anmeldung .knopf{margin-top:22px}
.anmeldung .fuss{
  text-align:center;font-size:12px;color:var(--text-3);margin-top:18px;
}

/* Eine Meldung über dem Formular. Rot als SCHRIFT auf Weiß — das ist nach der
   Regel eine Warnung. Eine rote Fläche wäre die Marke und hier falsch. */
.meldung{
  font-size:13px;line-height:1.5;border-radius:var(--r-feld);
  padding:11px 13px;margin-bottom:18px;
}
.meldung.warnung{background:var(--rot-hauch);color:var(--rot-dunkel);font-weight:500}
.meldung.hinweis{background:var(--flaeche);color:var(--text-2)}

@media (max-width:559px){
  /* Hier bleibt die Karte gerahmt, anders als bei den Formularseiten: Sie ist
     kein Abschnitt einer langen Seite, sondern der ganze Inhalt. Ohne Rahmen
     stünde sie im Nichts. */
  .aussen .anmeldung .karte{
    border:1px solid var(--linie);border-radius:var(--r-karte);
    box-shadow:var(--schatten);border-bottom:1px solid var(--linie);
    margin:0 16px;
  }
  .aussen .anmeldung .karte-koerper{padding:16px 18px 22px}
  .anmeldung{margin-top:4vh}
}