:root {
  --ink:#1F3A34; --ink2:#3E5650; --sun:#F5B84A; --brick:#C4532E;
  --apricot:#FCE3C4; --cream:#FBF6EE; --line:#E8DFD0; --gruen:#2F7D5B;
}
* { box-sizing:border-box; }
body { margin:0; background:var(--cream); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:15px; line-height:1.55; }
.kopf { display:flex; justify-content:space-between; align-items:center; gap:1rem;
  padding:.9rem 1.5rem; background:var(--ink); color:var(--cream); flex-wrap:wrap; }
.marke { color:var(--cream); text-decoration:none; font-weight:700; font-size:1.15rem; }
.marke span { color:var(--sun); }
.kopf nav { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.kopf nav a { color:var(--cream); text-decoration:none; font-size:.9rem; }
.kopf nav a:hover { text-decoration:underline; }
.wer { font-size:.85rem; opacity:.8; margin-right:.5rem; }
main { max-width:1100px; margin:0 auto; padding:1.5rem 1rem 3rem; }
h1 { font-size:1.6rem; margin:.2rem 0 1rem; }
h2 { font-size:1.15rem; margin:0 0 .8rem; }
h3 { font-size:1rem; margin:1rem 0 .4rem; }
.karte { background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:1.25rem; margin-bottom:1.25rem; }
.karte.schmal { max-width:460px; margin:2rem auto; }
.gitter { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; align-items:start; }
@media (max-width:820px){ .gitter { grid-template-columns:1fr; } }
label { display:block; margin-bottom:.8rem; font-size:.85rem; font-weight:600; color:var(--ink2); }
input, select, textarea { display:block; width:100%; margin-top:.25rem; padding:.55rem .65rem;
  border:1px solid var(--line); border-radius:7px; font:inherit; background:#fff; color:var(--ink); }
input[type=checkbox] { width:auto; display:inline; margin:.2rem .5rem 0 0; }
select[multiple] { height:auto; }
.zeile { display:flex; gap:1rem; flex-wrap:wrap; }
.zeile > * { flex:1 1 180px; }
.kasten { display:flex; gap:.6rem; align-items:flex-start; font-weight:400;
  background:var(--apricot); border:1px solid var(--line); border-radius:8px; padding:.7rem .8rem; }
.kasten span { font-size:.85rem; }
.knopf { display:inline-block; background:var(--ink); color:var(--cream); border:1.5px solid var(--ink);
  padding:.55rem 1.1rem; border-radius:7px; font:inherit; font-weight:600; cursor:pointer;
  text-decoration:none; }
.knopf:hover { background:var(--ink2); }
.knopf.geist { background:transparent; color:var(--ink); }
.knopf.geist:hover { background:var(--apricot); }
.knopf.klein { padding:.3rem .6rem; font-size:.8rem; }
.knopf.warnung { background:var(--brick); border-color:var(--brick); }
form.inline { display:inline-flex; gap:.4rem; align-items:center; margin:0; }
form.inline label { margin:0; }
table { width:100%; border-collapse:collapse; margin:.5rem 0 1rem; }
th, td { text-align:left; padding:.45rem .5rem; border-bottom:1px solid var(--line);
  vertical-align:top; }
th { font-size:.8rem; color:var(--ink2); font-weight:600; }
tr.begruendung td { background:#fcfaf6; }
.marke-klein { display:inline-block; background:var(--apricot); border-radius:5px;
  padding:.1rem .4rem; margin:.1rem .2rem .1rem 0; font-size:.75rem; }
.klein { font-size:.82rem; color:var(--ink2); }
.meldung { padding:.8rem 1rem; border-radius:8px; margin-bottom:1.2rem; font-size:.9rem; }
.meldung.fehler { background:#fbe0d6; border:1px solid var(--brick); }
.meldung.hinweis { background:var(--apricot); border:1px solid var(--line); }
.meldung.erfolg { background:#ddefe4; border:1px solid var(--gruen); }
.meldung ul { margin:.4rem 0 0 1.1rem; padding:0; }
.zahlen { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:.8rem;
  margin-bottom:1.5rem; }
.zahl { background:#fff; border:1px solid var(--line); border-radius:10px; padding:.9rem;
  text-align:center; }
.zahl .wert { display:block; font-size:1.7rem; font-weight:700; color:var(--brick); }
.geheimnis { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:1.05rem;
  background:var(--apricot); padding:.7rem; border-radius:8px; word-break:break-all; }
code { word-break:break-all; }
hr { border:none; border-top:1px solid var(--line); margin:1rem 0; }
.fuss { max-width:1100px; margin:0 auto; padding:1rem; display:flex; justify-content:space-between;
  gap:1rem; flex-wrap:wrap; font-size:.8rem; color:var(--ink2); border-top:1px solid var(--line); }

/* Verweis zurueck auf die oeffentliche Webseite.
   ACHTUNG: Dieser Verweis steht in der KOPFZEILE, und die ist dunkel
   (background: var(--ink)). Die frueheren Farben --ink2 und --ink waren fuer
   hellen Grund gedacht - beim Ueberfahren war die Schrift genau so dunkel wie
   der Hintergrund und verschwand. Hier gehoert helle Schrift hin, wie bei den
   uebrigen Verweisen der Kopfzeile. */
.zur-webseite { font-size:.85rem; color:var(--cream); text-decoration:none;
  border-bottom:1px solid rgba(251,246,238,.35); padding-bottom:1px;
  transition:color .12s, border-color .12s; }
.zur-webseite:hover { color:var(--sun); border-color:var(--sun);
  text-decoration:none; }

/* Eigener Punktstand des Mieters */
.scoring { border-left: 4px solid var(--brick); }
.punktzahl { display:flex; align-items:baseline; gap:.5rem; margin:.3rem 0 .6rem; }
.punktzahl .wert { font-size:2.6rem; font-weight:700; color:var(--brick); line-height:1; }
.punktzahl .von { color:var(--ink2); font-size:.95rem; }
.balken { height:10px; background:var(--line); border-radius:5px; overflow:hidden;
  margin-bottom:1rem; }
.balken-fuellung { height:100%; background:var(--brick); }

/* Hinweis Testbetrieb - beim Livegang entfernen, auch in basis.html */
#testbetrieb { background:var(--brick); color:#fff; font-size:.85rem;
  padding:.5rem 1rem; text-align:center; line-height:1.35; }

/* Wohnungsfotos */
.fotozeile td { background:var(--sand,#faf7f1); }
.fotos { display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:.6rem; }
.fotos figure { margin:0; width:150px; }
.fotos img { width:150px; height:105px; object-fit:cover; border-radius:8px;
  border:1px solid var(--line); display:block; margin-bottom:.3rem; }

/* Rollenwahl auf der Anmeldeseite */
.rollenwahl{display:flex;gap:.5rem;margin:0 0 1.2rem;}
.rollenwahl .rolle{flex:1;text-align:center;padding:.6rem .5rem;border-radius:10px;
  border:1px solid var(--line);text-decoration:none;color:var(--muted);
  font-size:.92rem;}
.rollenwahl .rolle.aktiv{background:var(--ink);color:#fff;border-color:var(--ink);
  font-weight:600;}
@media (max-width:420px){.rollenwahl{flex-direction:column;}}

/* --- Breiter Kasten -----------------------------------------------------
   main hat max-width:1100px. "Ueber die gesamte Breite" heisst also: aus
   diesem Rahmen heraus. Die negative Randbreite hebt ihn auf, ohne die
   Breite der uebrigen Kaesten anzufassen. */
.karte.breit{
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  border-radius:0;
  border-left:0;
  border-right:0;
  padding-left:max(1rem, calc(50vw - 550px + 1rem));
  padding-right:max(1rem, calc(50vw - 550px + 1rem));
}
.karte.auffaellig{
  background:linear-gradient(180deg,#FFFDF8,#FBF6EE);
  border-top:3px solid var(--brick,#B04A30);
  margin-top:0;
}
.karte.auffaellig h2{margin-top:0;}
@media (max-width:1100px){
  .karte.breit{padding-left:1rem;padding-right:1rem;}
}

/* Kosten- und Umsatzbox */
.geld-gitter{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:.8rem;}
.posten{border:1px solid var(--line);border-radius:10px;padding:.9rem 1rem;
  display:flex;flex-direction:column;gap:.15rem;}
.posten b{font-size:1.55rem;line-height:1.1;}
.posten.kosten{background:rgba(176,74,48,.05);border-color:rgba(176,74,48,.22);}
.posten.kosten b{color:#8a3b26;}
.posten.umsatz{background:rgba(42,122,94,.06);border-color:rgba(42,122,94,.22);}
.posten.umsatz b{color:#1d5742;}
.hinweis-klein{color:#8a7a68;font-style:italic;}

/* --- Verwaltung: Menue links -------------------------------------------
   Vorher oben horizontal und in jeder Seite wiederholt. Links ist mehr Platz
   fuer weitere Punkte, und der aktive ist erkennbar. */
.verw-rahmen{display:grid;grid-template-columns:200px 1fr;gap:1.6rem;
  align-items:start;}
.verw-menue{position:sticky;top:1rem;display:flex;flex-direction:column;gap:.15rem;
  background:#fff;border:1px solid var(--line);border-radius:10px;padding:.8rem;}
.verw-titel{font-size:.75rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--muted);padding:.2rem .6rem .5rem;}
.verw-menue a{display:block;padding:.5rem .6rem;border-radius:8px;
  text-decoration:none;color:inherit;font-size:.95rem;}
.verw-menue a:hover{background:rgba(31,58,52,.06);}
.verw-menue a.aktiv{background:var(--ink,#1F3A34);color:#fff;font-weight:600;}
.verw-inhalt{min-width:0;}
.verw-inhalt > h1:first-child{margin-top:0;}
@media (max-width:820px){
  .verw-rahmen{grid-template-columns:1fr;}
  .verw-menue{position:static;flex-direction:row;flex-wrap:wrap;}
  .verw-titel{display:none;}
}

/* Der zweite Weg (anmelden / registrieren) - erkennbar, aber nicht lauter als
   der Hauptknopf der Seite. */
.schon-konto{margin-top:1.4rem;padding-top:1.2rem;
  border-top:1px solid var(--line);text-align:center;}
.schon-konto .klein{display:block;margin-bottom:.5rem;color:var(--muted);}
.knopf.breit{display:block;width:100%;box-sizing:border-box;text-align:center;}
.knopf.geist{background:#fff;color:var(--ink);border:1px solid var(--ink);}
.knopf.geist:hover{background:var(--ink);color:#fff;}