/* Marbella Inmo Homes — Kundendatenbank
   Farben angelehnt an die Website: Creme, Terracotta, Serifentypo in Überschriften. */

:root{
  --creme:#faf7f2; --papier:#fff; --linie:#e6ded2;
  --text:#2f2a25; --grau:#8a8078;
  --terracotta:#b5603f; --terracotta-dunkel:#93492d;
  --rot:#b23a3a; --gelb:#b8860b; --gruen:#4a7c59;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--creme); color:var(--text);
  font:16px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
h1,h2{font-family:Georgia,"Times New Roman",serif; font-weight:600; margin:0 0 .6rem}
h1{font-size:1.7rem} h2{font-size:1.15rem}
a{color:var(--terracotta-dunkel)}
table{width:100%; border-collapse:collapse}
th,td{padding:.6rem .5rem; border-bottom:1px solid var(--linie); text-align:left; vertical-align:middle}
th{font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:var(--grau); font-weight:600}
tr:last-child td{border-bottom:0}

/* Kopf */
.kopf{
  display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap;
  padding:.8rem 1.5rem; background:var(--papier); border-bottom:1px solid var(--linie);
}
.marke{font-family:Georgia,serif; font-size:1.05rem; font-weight:600; text-decoration:none; color:var(--text)}
.kopf nav{display:flex; gap:1rem}
.kopf nav a{text-decoration:none; color:var(--grau); padding:.25rem 0; border-bottom:2px solid transparent}
.kopf nav a.aktiv{color:var(--text); border-bottom-color:var(--terracotta)}
.kopf .rechts{margin-left:auto; display:flex; align-items:center; gap:.7rem}
.kopf .wer{color:var(--grau); font-size:.9rem; text-decoration:none; border-bottom:1px dotted var(--linie)}
.kopf .wer:hover{color:var(--text); border-bottom-color:var(--terracotta)}
.kopf form{display:inline}

.inhalt{max-width:1180px; margin:0 auto; padding:1.5rem}

/* Karten */
.karte{background:var(--papier); border:1px solid var(--linie); border-radius:10px; padding:1.2rem; margin-bottom:1.2rem}
.karte.schmal,.schmal{max-width:520px}
.karte.leer{text-align:center; color:var(--grau)}
.titelzeile{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem}

/* Knöpfe */
.knopf{
  display:inline-block; padding:.5rem .9rem; border:1px solid var(--linie); border-radius:7px;
  background:var(--papier); color:var(--text); font:inherit; font-size:.9rem;
  text-decoration:none; cursor:pointer; white-space:nowrap;
}
.knopf:hover{border-color:var(--terracotta)}
.knopf.haupt{background:var(--terracotta); border-color:var(--terracotta); color:#fff}
.knopf.haupt:hover{background:var(--terracotta-dunkel)}
.knopf.leise{color:var(--grau)}
.knopf.klein{padding:.28rem .55rem; font-size:.82rem}
.knopf.breit{width:100%; margin-top:.6rem}

/* Formulare */
.formular label{display:block; margin-bottom:.9rem; font-size:.85rem; color:var(--grau)}
input,select,textarea{
  display:block; width:100%; margin-top:.25rem; padding:.55rem .6rem;
  border:1px solid var(--linie); border-radius:7px; background:#fff;
  font:inherit; font-size:.95rem; color:var(--text);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--terracotta); outline-offset:-1px}
textarea{resize:vertical}
.raster{display:grid; grid-template-columns:repeat(3,1fr); gap:0 1rem}
.breit2{grid-column:span 2} .breit3{grid-column:1 / -1}
.leiste{display:flex; align-items:center; gap:.8rem; margin-top:.4rem; flex-wrap:wrap}
.abschnitt{margin:1.4rem 0 .8rem; padding-top:1rem; border-top:1px solid var(--linie)}
.kacheln{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-bottom:1.2rem}
.kachel{text-align:center; margin:0}
.gross{display:block; font-size:2rem; margin-top:.2rem; font-variant-numeric:tabular-nums}
.gruen{color:var(--gruen)}
.tablewrap{overflow-x:auto}
button[disabled]{opacity:.45; cursor:not-allowed}
form.inline{display:flex; gap:.3rem; align-items:center}
form.inline input{margin:0; width:auto}

/* Suche */
.suchleiste{display:flex; gap:.6rem; margin-bottom:1.2rem; flex-wrap:wrap}
.suchleiste input[type=search]{flex:1; min-width:240px; margin:0}
.suchleiste select{width:auto; margin:0}

/* Zwei Spalten auf der Kundenseite */
.spalten{display:grid; grid-template-columns:1.35fr 1fr; gap:1.2rem; align-items:start}
.nebenspalte{display:flex; flex-direction:column}

/* Wiedervorlage */
.block h2{display:flex; align-items:center; gap:.5rem}
.zahl{display:inline-block; background:var(--linie); border-radius:99px; padding:0 .5rem;
      font-size:.8rem; color:var(--text); font-weight:600; vertical-align:middle}
h2.rot{color:var(--rot)} h2.gelb{color:var(--gelb)} h2.grau2{color:var(--grau)}
.wv-neu{display:flex; gap:.5rem; margin-bottom:.9rem; flex-wrap:wrap}
.wv-neu input{margin:0} .wv-neu input[name=notiz]{flex:1; min-width:150px}
.wv{display:flex; align-items:center; gap:.6rem; padding:.45rem 0; border-bottom:1px solid var(--linie)}
.wv:last-child{border-bottom:0}
.wv .notiz{flex:1; font-size:.9rem}
.wv.faellig .datum{color:var(--rot); font-weight:600}
.wv.erledigt{opacity:.55}
.wv form{display:inline}

/* Dokumente */
.dok-neu{margin-bottom:.9rem}
.dok-neu input{margin-bottom:.4rem}
.dok{display:flex; align-items:center; gap:.6rem; padding:.45rem 0; border-bottom:1px solid var(--linie)}
.dok:last-child{border-bottom:0}
.dok a{flex:1; font-size:.92rem}
.dok .endung{
  background:var(--creme); border:1px solid var(--linie); border-radius:5px;
  padding:.1rem .35rem; font-size:.7rem; text-transform:uppercase; color:var(--grau); min-width:2.6rem; text-align:center;
}
.gefahr{margin-top:.4rem; text-align:right}
/* Objekte */
.objekt{border:1px solid var(--linie); border-radius:8px; margin-bottom:.6rem; background:var(--creme)}
.objekt > summary{padding:.6rem .8rem; cursor:pointer; display:flex; gap:.6rem; align-items:baseline; flex-wrap:wrap}
/* display:flex entfernt in Chrome das Standard-Dreieck — deshalb ein eigenes. */
.objekt > summary::-webkit-details-marker{display:none}
.objekt > summary::marker{content:""}
.objekt > summary::before{content:"▸"; color:var(--terracotta); font-size:.8rem; line-height:1.6}
.objekt[open] > summary::before{content:"▾"}
.objekt > summary:hover{background:var(--papier)}
.objekt[open] > summary{border-bottom:1px solid var(--linie); background:var(--papier)}
.objekt .formular{padding:.9rem .8rem 0; background:var(--papier)}
.objekt .gefahr{padding:0 .8rem .7rem; background:var(--papier)}
.objekt.neu > summary{color:var(--terracotta-dunkel)}
.warn{color:var(--rot); font-weight:600; margin-left:.4rem}

/* Anrufe */
.anruf-neu{border-bottom:1px solid var(--linie); margin-bottom:.8rem}
.anruf{display:flex; align-items:center; gap:.6rem; padding:.45rem 0; border-bottom:1px solid var(--linie); flex-wrap:wrap}
.anruf:last-child{border-bottom:0}
.anruf .nr{font-variant-numeric:tabular-nums; color:var(--grau); font-size:.82rem; min-width:2.5rem}
.anruf .notiz{flex:1; font-size:.9rem; min-width:120px}
.anruf form{display:inline}
.ergebnis{font-size:.78rem; padding:.1rem .45rem; border-radius:99px; border:1px solid var(--linie); white-space:nowrap}
.erg-erreicht{color:var(--gruen); border-color:var(--gruen)}
.erg-termin{color:var(--gruen); border-color:var(--gruen); font-weight:600}
.erg-nicht_erreicht,.erg-kein_interesse{color:var(--grau)}
.erg-rueckruf{color:var(--gelb); border-color:var(--gelb)}

.ordnerkopf{display:flex; align-items:center; gap:.5rem; margin:1.2rem 0 .3rem; font-size:1rem; color:var(--grau)}
.ordnerkopf:first-child{margin-top:0}
.ordnerkopf .zahl{background:var(--creme); border:1px solid var(--linie); border-radius:99px; padding:0 .5rem; font-size:.78rem}

/* Status-Marken */
[class^="marke-"]{font-size:.8rem; padding:.15rem .5rem; border-radius:99px; background:var(--creme); border:1px solid var(--linie)}
.marke-aktiv{color:var(--gruen); border-color:var(--gruen)}
.marke-abgeschlossen{color:var(--grau)}
.marke-kein_interesse{color:var(--grau); text-decoration:line-through}

/* Kleinkram */
.grau{color:var(--grau)} .klein{font-size:.82rem} .stark{font-weight:600}
.mitte{text-align:center} .datum{white-space:nowrap; font-variant-numeric:tabular-nums}
.telefon{white-space:nowrap; font-variant-numeric:tabular-nums}
.gekuerzt{max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.inaktiv{opacity:.5}
.fehler{background:#fdecec; border:1px solid #f0c4c4; color:var(--rot); padding:.6rem .8rem; border-radius:7px}
.hinweis{background:#f2f7f3; border:1px solid #cfe3d4; color:var(--gruen); padding:.6rem .8rem; border-radius:7px}
.anmeldung{max-width:380px; margin:12vh auto}
.anmeldung h1{margin-bottom:0} .anmeldung p.grau{margin-top:.2rem; margin-bottom:1.4rem}

@media (max-width:900px){
  .spalten{grid-template-columns:1fr}
  .raster{grid-template-columns:1fr 1fr}
  .breit2,.breit3{grid-column:1 / -1}
  .kopf{gap:.7rem} .kopf .rechts{width:100%; margin-left:0}
  .gekuerzt{max-width:120px}
}
@media (max-width:560px){
  .raster{grid-template-columns:1fr}
  .inhalt{padding:1rem}
}