/* Container für alle Listen-Seiten */
.listen-container {
  margin: 40px auto;
  padding: 20px;
  max-width: 1200px;
}

/* Seitentitel / Überschriften */
.listen-title {
  font-family: var(--akzenttext);
  font-size: var(--txtxxl);
  text-transform: uppercase;
  color: var(--akzent-hell);
  letter-spacing: .15em;
  margin: 20px 0;
}

.listen-subtitle {
  font-family: var(--akzenttext);
  font-size: var(--txtl);
  text-transform: uppercase;
  color: var(--design);
  margin: 25px 0 10px;
  letter-spacing: .1em;
}

/* Navigation */
.listen-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0;
}

.listen-link {
  padding: 6px 12px;
  border: 1px solid var(--hairline);
  background: var(--tbl-main-tr2);
  color: var(--akzent-hell);
  font-size: var(--txtsmall);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .15em;
  transition: all .25s ease;
}

.listen-link:hover,
.listen-link.active {
  background: var(--tbl-main-tr);
  color: var(--design);
}

.listen-link.external::after {
  content: "↗";
  margin-left: 4px;
  font-size: .8em;
}

/* Tabellenartige Listen */
.tborder {
  border: 1px solid var(--hairline);
  background: var(--tbl-main-tr);
  margin-bottom: 20px;
}

.container.listen-container .tborder.list-bildung > .thead,
.container.listen-container .tborder.list-namen > .thead {
  font-weight: 600;
  text-transform: uppercase;
  font-size: var(--txtxsmall);
  letter-spacing: .1em;
  padding: 8px 12px;
  background: var(--tbl-main-tr2);
  color: var(--design);
}

.trow {
  padding: 6px 12px;
  border-top: 1px solid var(--hairline);
  color: var(--txtcol);
}

.trow.empty {
  text-align: center;
  font-style: italic;
  color: var(--txtcol-light, #aaa);
}

/* Grid-System */
.grid {
  display: grid;
  gap: 8px;
  align-items: center;
}
.grid.two { grid-template-columns: repeat(2, 1fr); }
.grid.grid-3 { grid-template-columns: repeat(3, 1fr); }

/* Wohnsitze */
.country-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 30px;
}
.country-card {
  background: var(--tbl-main-tr2);
  border: 1px solid var(--hairline);
  padding: 10px;
}
.city-name {
  font-weight: 600;
  color: var(--akzent-hell);
  margin-top: 8px;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.city-users .trow {
  padding-left: 12px;
  font-size: var(--txtsmall);
}

/* Inhalte */
.firstname.value, .lastname.value,
.faceclaims.value, .patrges.value,
.bildung.value, .jahrgang.value {
  font-weight: 500;
  color: var(--txtcol);
}

.user {
  color: var(--akzent-hell);
}
.user a { color: inherit; text-decoration: none; }
.user a:hover { color: var(--design); text-decoration: underline; }

.firstname.value s { color: var(--akzent-red-soft); }

/* Responsive */
@media (max-width:1000px){
  .country-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width:600px){
  .country-grid { grid-template-columns: 1fr; }
}