/* ======= Wohnortliste – Modernes MCU-Layout ======= */
:root{
  --res-bg: var(--bg-color, #1E1F11);
  --res-panel: var(--bg-color2, #343528);
  --res-ink: var(--font-color, #A4998A);
  --res-accent: var(--akzent-color2, #93946C);
  --res-accent2: var(--akzent-color3, #A4998A);
  --res-radius: 14px; --res-gap: 14px;
}
*{box-sizing:border-box}

/* Rahmen */
.res-wrap{
  max-width:min(1200px,96vw);
  margin:26px auto 40px;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border:1px solid var(--res-panel);
  border-radius:18px;
  box-shadow:0 30px 80px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.03);
  color:var(--res-ink);
  overflow:hidden;
}
.res-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;border-bottom:1px solid var(--res-panel);
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.08));
}
.res-title{
  font:700 24px/1 Antonio,system-ui,sans-serif;
  letter-spacing:3px;text-transform:uppercase;color:var(--res-accent2);
}

/* Form-Bereich (Ort + Zuhause) */
.res-forms{
  display:grid;gap:var(--res-gap);
  grid-template-columns:1fr 1fr; padding:16px;
}
@media (max-width:900px){ .res-forms{ grid-template-columns:1fr; } }
.res-card{
  background:var(--res-panel);
  border:1px solid color-mix(in srgb, var(--res-panel) 70%, #000);
  border-radius:var(--res-radius);
  padding:12px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03), 0 12px 30px rgba(0,0,0,.25);
}
.res-card .h{
  font:800 12px/1 Antonio;text-transform:uppercase;letter-spacing:2px;
  color:var(--res-accent2); margin:0 0 10px;
}
/* Tabellen in Formularen hübsch */
.res-card table{width:100%;border-collapse:separate;border-spacing:0 10px}
.res-card .thead,.res-card .tcat{display:none}
.res-card td{background:#202214;border:1px solid var(--res-panel);
  padding:10px;border-radius:10px}
.res-card select,.res-card input[type=text],.res-card input[type=number],
.res-card textarea{
  width:100%;background:#13140d;color:var(--res-ink);
  border:1px solid var(--res-panel);border-radius:10px;padding:8px 10px;
  font:15px/1.4 Rajdhani,system-ui;outline:none;
}
.res-card textarea{min-height:70px;resize:vertical}
.res-card select:focus,.res-card input:focus,.res-card textarea:focus{
  border-color:var(--res-accent);box-shadow:0 0 0 3px rgba(147,148,108,.25);
}
.res-card .button{
  font:800 11px/1 Antonio;text-transform:uppercase;letter-spacing:2px;
  background:var(--res-accent);color:#15160f;border:1px solid var(--res-accent);
  border-radius:10px;padding:8px 12px;cursor:pointer;
}

/* Länder-/Orte-Bereich */
.res-country{ padding:0 16px 16px; }
.country-head{
  margin:8px 0 10px; padding:10px 12px; background:#2a2b1c;
  border:1px solid var(--res-panel); border-radius:12px;
  font:800 18px/1 Antonio; letter-spacing:3px; text-transform:uppercase;
  color:var(--res-accent2);
}

/* Liste der Homes als Grid */
.homes{ display:grid; gap:var(--res-gap); grid-template-columns:1fr 1fr; }
@media (max-width:900px){ .homes{ grid-template-columns:1fr; } }

/* Einzelnes Zuhause als Karte */
.home-card{
  background:#17180f;border:1px solid var(--res-panel);
  border-radius:14px;padding:12px;
  display:grid; grid-template-columns:1fr 280px; gap:12px; align-items:start;
}
@media (max-width:740px){ .home-card{ grid-template-columns:1fr; } }

.home-card .title{
  font:800 16px/1 Antonio; letter-spacing:2px; text-transform:uppercase;
  color:var(--res-accent2); display:flex; gap:8px; align-items:center;
}
.badge{
  display:inline-block;border:1px solid var(--res-accent);color:var(--res-accent);
  padding:2px 8px;border-radius:999px;font:800 10px/1 Antonio;text-transform:uppercase;
}
.home-desc{ color:var(--res-ink); opacity:.95; line-height:1.5; text-align:justify; }

.meta{ display:grid; gap:8px; }
.meta .row{
  display:grid; grid-template-columns:110px 1fr; gap:8px;
  background:#1f2114; border:1px solid var(--res-panel);
  border-radius:10px; padding:8px;
}
.meta .k{ font:700 11px/1 Antonio; color:var(--res-accent); letter-spacing:1px; text-transform:uppercase;}
.meta .v{ font:700 13px/1 Rajdhani; color:var(--res-ink); }
.residents{ display:flex; flex-wrap:wrap; gap:6px; }
.residents a{
  display:inline-block; background:#2b2e1c; border:1px solid var(--res-panel);
  border-radius:999px; padding:6px 10px; font:700 12px/1 Antonio;
  color:var(--res-ink); text-decoration:none;
}
.residents a:hover{ border-color:var(--res-accent); }

.home-actions{ display:flex; gap:8px; justify-content:flex-end; }
.home-actions .button{ background:#2a2b20; color:var(--res-ink); border-color:var(--res-panel); }
.home-actions .button:hover{ border-color:var(--res-accent); }

/* Tabellen, die vom Plugin kommen, neutralisieren */
.res-country table{ width:100%; border-collapse:separate; border-spacing:0 12px; }
.res-country .tcat,.res-country .thead{ background:transparent; border:0; }
.res-country .trow1,.res-country .trow2{ background:transparent; border:0; padding:0; }


/* --- Fix: rechte Meta-Spalte darf schrumpfen und bleibt bündig --- */
.home-card{
  display: grid;
  grid-template-columns: 1fr 320px; /* gern anpassen (z.B. 280–340px) */
  gap: 12px;
}
.home-card > *{ min-width: 0; }      /* Grid-Items dürfen schrumpfen */
.meta{ width: 320px; min-width: 0; } /* harte Breite + Schrumpfen erlaubt */

/* Reihen im Meta-Block füllen exakt die Spaltenbreite */
.meta .row{ width: 100%; box-sizing: border-box; }

/* Werte-Zelle: kein erzwungenes nowrap, sauber umbrechen */
.meta .v{ min-width: 0; white-space: normal; overflow-wrap: anywhere; }

/* Bewohner-Liste: bricht in mehrere Zeilen, statt nach rechts zu schieben */
.residents{ display: flex; flex-wrap: wrap; gap: 6px; }
.residents a{ white-space: nowrap; }

/* Falls irgendwo .button/.btn global nowrap erzwingt, hier neutralisieren */
.home-actions .button,
.meta .btn,
.meta .button{ white-space: normal; }

/* Sicherheitsnetz: nichts aus der rechten Spalte darf „überlaufen“ */
.meta{ overflow: hidden; }


/* ================== Scroller für Beschreibung & Bewohner ================== */

/* 1) Beschreibung links – begrenzen & scrollbar */
.home-desc{
  max-height: clamp(140px, 24vh, 260px); /* <- Höhe anpassen */
  overflow: auto;
  padding-right: 8px;          /* Platz für die Scrollbar */
  text-align: justify;
}

/* 2) Bewohner rechts – mehrere Zeilen + scrollbar */
.meta .v.residents{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-content: flex-start;   /* füllt oben zuerst */
  max-height: clamp(90px, 18vh, 160px); /* <- Höhe anpassen */
  overflow: auto;
  padding-right: 6px;
  min-width: 0;                /* darf schrumpfen (Grid) */
}

/* 3) Pill-Namen bleiben einzeilig */
.meta .v.residents a{ white-space: nowrap; }

/* 4) Einheitliches Scrollbar-Design */
.home-desc::-webkit-scrollbar,
.meta .v.residents::-webkit-scrollbar{ width:6px; height:6px; }
.home-desc::-webkit-scrollbar-thumb,
.meta .v.residents::-webkit-scrollbar-thumb{ background: var(--bg-color2); }
.home-desc::-webkit-scrollbar-track,
.meta .v.residents::-webkit-scrollbar-track{ background: var(--akzent-color2); }
/* Firefox */
.home-desc,
.meta .v.residents{ scrollbar-color: var(--bg-color2) var(--akzent-color2); }

/* Sicherheit im Grid: rechte Spalte bleibt fix, nichts läuft über */
.home-card > *{ min-width: 0; }
.meta{ overflow:hidden; }