/* ======= Wohnortliste – MCU-Layout (Deep Teal / Ruby Red) ======= */
:root{
  /* Palette aus dem Screen */
  --res-bg:        rgba(10, 20, 22, .88);   /* dunkles Teal-Overlay */
  --res-panel:     #32474c;                 /* Rahmen/Linien (blaugrau) */
  --res-ink:       #e6eef0;                 /* Haupttext (kühles Weiß) */
  --res-ink-strong:#ffffff;                 /* starke Headlines */
  --res-accent:    #7a231c;                 /* Akzent/Buttons (ruby red) */
  --res-accent2:   #a83a2e;                 /* helleres Rot (Leisten/Chips) */
  --res-card-bg:   rgba(18, 34, 37, .60);   /* Karten – Glas-Teal */
  --res-surface-1: rgba(16, 30, 33, .74);   /* dunkle Fläche */
  --res-surface-2: rgba(14, 26, 29, .82);   /* Tabellen/Rows */
  --res-surface-3: rgba(12, 22, 25, .78);
  --res-header-bg: #7a231c;                 /* Abschnitt-Header-Balken */
  --res-input-bg:  #0f1a1c;                 /* Inputs/Selects */
  --res-chip-bg:   #16282b;                 /* Chips/kleine Buttons */
  --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,.06), rgba(255,255,255,.02)),
    var(--res-bg);
  border:1px solid var(--res-panel);
  border-radius:18px;
  box-shadow:0 30px 80px rgba(0,0,0,.48), inset 0 0 0 1px rgba(255,255,255,.05);
  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(122,35,28,.22), rgba(122,35,28,.10));
}
.res-title{
  font:700 24px/1 Antonio,system-ui,sans-serif;
  letter-spacing:3px;text-transform:uppercase;color:var(--res-ink-strong);
}

/* Form-Bereich */
.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-card-bg);
  border:1px solid var(--res-panel);
  border-radius:var(--res-radius);
  padding:12px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05), 0 12px 30px rgba(0,0,0,.35);
}
.res-card .h{
  font:800 12px/1 Antonio;text-transform:uppercase;letter-spacing:2px;
  color:var(--res-ink-strong); margin:0 0 10px;
}

/* Tabellen & Inputs */
.res-card table{width:100%;border-collapse:separate;border-spacing:0 10px}
.res-card .thead,.res-card .tcat{display:none}
.res-card td{
  background:var(--res-surface-2);
  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:var(--res-input-bg);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(122,35,28,.28);
}
.res-card .button{
  font:800 11px/1 Antonio;text-transform:uppercase;letter-spacing:2px;
  background:var(--res-accent);color:#130607;
  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:var(--res-header-bg);
  border:1px solid var(--res-panel); border-radius:12px;
  font:800 18px/1 Antonio; letter-spacing:3px; text-transform:uppercase;
  color:var(--res-ink-strong);
}

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

/* Home-Karte */
.home-card{
  background:var(--res-surface-1);
  border:1px solid var(--res-panel);
  border-radius:14px;padding:12px;
  display:grid; grid-template-columns:1fr 320px; 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-ink-strong); 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; }

/* rechte Meta-Spalte */
.meta{ display:grid; gap:8px; width:320px; min-width:0; overflow:hidden; }
.meta .row{
  display:grid; grid-template-columns:110px 1fr; gap:8px;
  background:var(--res-surface-3); border:1px solid var(--res-panel);
  border-radius:10px; padding:8px;
}
.meta .k{ font:700 11px/1 Antonio; color:var(--res-accent2); 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:var(--res-chip-bg); 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); }

/* Aktionen */
.home-actions{ display:flex; gap:8px; justify-content:flex-end; }
.home-actions .button{ background:var(--res-chip-bg); color:var(--res-ink); border-color:var(--res-panel); }
.home-actions .button:hover{ border-color:var(--res-accent); }

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

/* Schrumpf-Fixes */
.home-card > *{ min-width:0; }
.meta .row{ width:100%; box-sizing:border-box; }
.meta .v{ min-width:0; white-space:normal; overflow-wrap:anywhere; }

/* Scrollbereiche */
.home-desc{
  max-height: clamp(140px, 24vh, 260px);
  overflow: auto;
  padding-right: 8px;
  text-align: justify;
}
.meta .v.residents{
  display:flex; flex-wrap:wrap; gap:6px; align-content:flex-start;
  max-height: clamp(90px, 18vh, 160px);
  overflow:auto; padding-right:6px; min-width:0;
}
.meta .v.residents a{ white-space: nowrap; }

/* Scrollbars im Ruby-Look */
.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(--res-accent); }
.home-desc::-webkit-scrollbar-track,
.meta .v.residents::-webkit-scrollbar-track{ background: #0f1a1c; }
/* Firefox */
.home-desc, .meta .v.residents{ scrollbar-color: var(--res-accent) #0f1a1c; }