/* =============================================================
   Organisation: Gremiumsseiten (page-gremium.php)

   Vorstand, Jugendvorstand, Ältestenrat, Schiedsrichter und die Seite
   „Ansprechpartner“. Eigene Datei wie beim Videoarchiv: Die Karten
   gibt es nur dort, style.css bleibt frei davon. Alle Werte sind die
   Marken aus style.css – Farben, Abstände, Schriften; hier steht nur,
   wie sie zusammengesetzt werden.

   Die Karte: Foto oder Initialen im Kreis links, rechts Funktion, Name
   und die Kontaktwege als antippbare Zeilen. Der Kreis ist dieselbe Marke
   wie beim Ansprechpartner der Mannschaft (.kontaktkarte__avatar), damit
   man sie wiedererkennt.
   ============================================================= */

/* ---------- Kopf ---------- */
.gremium__head { padding-bottom: 0; }
.gremium__head .entry__title { margin-top: var(--sp-3); }
.gremium__intro { max-width: 62ch; font-size: var(--fs-md); color: var(--ink-700); }
.gremium__intro > * + * { margin-top: var(--sp-3); }
.gremium__zahl {
  margin-top: var(--sp-3); font-size: var(--fs-xs); font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-500);
}
.gremium__hinweis {
  margin-top: var(--sp-5); padding: var(--sp-4); border: 1px dashed var(--line);
  border-radius: var(--radius); color: var(--ink-500); font-size: var(--fs-sm);
}

/* ---------- Die Karten ---------- */
.personen {
  display: grid; gap: clamp(.9rem, 1.4vw, 1.5rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
}
.person {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-3) var(--sp-4); align-items: start;
  padding: clamp(1.1rem, 1.6vw, 1.5rem); border-radius: var(--radius-lg);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
.person__foto {
  width: 5.5rem; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  background: var(--green-50); flex: none;
}
.person__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.person__initialen {
  display: grid; place-items: center; width: 100%; height: 100%;
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-display); font-style: italic;
  font-size: var(--fs-lg); line-height: 1; letter-spacing: -.02em;
}
.person__text { min-width: 0; }
.person__rollen { display: grid; gap: .15rem; }
.person__funktion {
  margin: 0 0 .35rem; font-size: var(--fs-xs); font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--green-700);
}
.person__rollen .person__funktion { margin-bottom: 0; }
.person .person__rollen + .person__name { margin-top: .35rem; }
.person__gremium { font-weight: 600; color: var(--ink-500); white-space: nowrap; }
.person__gremium::before { content: "· "; }
/* Die Karte steht seit dem 08.09.2026 auch im Fließtext der Mannschafts-
   seite, und dort gilt .entry__content h3: fs-md und --sp-6 Abstand nach oben.
   Chris am 08.09.2026: „der Abstand von Abteilung und Name ist doch bei den
   anderen Kacheln deutlich weniger." Gemessen waren es 32 statt 6 Pixel, und
   der Name war kleiner als auf den Gremiumsseiten. Der Name der Karte hängt
   deshalb an .person – eine Karte sieht überall gleich aus, egal worin sie
   steht. Aus demselben Grund die beiden Zeilen darüber und darunter. */
.person .person__name {
  margin: 0; font-family: var(--font-display); font-style: italic; text-transform: uppercase;
  /* Kleiner als die Kontaktkarte der Mannschaft und ohne Silbentrennung:
     „NICO-LE ZIM-MERMANN“ in vier Spalten war kein Name mehr. Bricht nur
     an Leerzeichen; ein einzelnes Wort, das nicht passt, darf überlaufen. */
  font-size: clamp(1.15rem, 1.05rem + .5vw, 1.5rem); line-height: .95; letter-spacing: -.01em;
  hyphens: manual; overflow-wrap: normal; color: var(--ink);
}
/* Die Kontaktwege stehen unter Foto und Name über die ganze Kartenbreite.
   Neben dem Foto blieben nur rund 190 px, da brach jede E-Mail-Adresse und
   das Symbol stand allein in einer Zeile. Chris am 07.09.2026: „es ist mir
   sehr wichtig, dass die E-Mail-Adressen nicht so umbrechen." Deshalb: nichts
   in dieser Liste bricht – weder Nummer noch Adresse noch das Symbol davon
   weg. Die längste Adresse im Bestand hat 34 Zeichen und passt so auch in
   die schmalste Karte (340 px). Ist die Karte breit genug (zwei Spalten auf
   dem Desktop), rücken die Wege wieder neben das Foto. */
.person { container-type: inline-size; }
.person__wege { grid-column: 1 / -1; min-width: 0; margin-top: 0; display: grid; gap: .3rem; }
.person__wege a {
  display: inline-flex; align-items: center; flex-wrap: nowrap; gap: .25rem .5rem; min-height: 1.75rem;
  max-width: 100%; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); text-decoration: none;
}
.person__wege span,
.person__wege small { white-space: nowrap; }
@container (min-width: 480px) {
  .person__wege { grid-column: 2; margin-top: var(--sp-3); }
}
.person__wege svg { width: 1rem; height: 1rem; color: var(--green-600); flex: none; }
.person__wege span { border-bottom: 2px solid var(--green-100); transition: border-color .15s var(--ease), color .15s var(--ease); }
.person__wege a:hover span { color: var(--green-700); border-bottom-color: var(--green-500); }
/* Feste Breite für „Mobil“ und „Telefon“, aber nur, wenn eine Karte beide hat:
   Dann stehen die Nummern bündig untereinander. Bei nur einer Nummer gäbe die
   feste Breite bloß eine Lücke hinter „Mobil“. Die Nummern stehen immer vor
   der E-Mail, also heißt „zweite Zeile mit Wort“: zwei Nummern. */
.person__wege:has(> li:nth-child(2) .tel-art) small { min-width: 5.4em; }
.person__wege small { margin-right: -.2rem; font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500); }

/* Ein unbesetzter Posten: da, aber leer. Gestrichelt statt gefüllt. */
.person--unbesetzt { border-style: dashed; background: transparent; box-shadow: none; }
.person--unbesetzt .person__initialen { background: var(--green-100); color: var(--green-700); }
.person .person__name--frei { color: var(--ink-500); }
.person__satz { margin: .35rem 0 0; font-size: var(--fs-sm); color: var(--ink-500); }

.unbesetzt {
  display: grid; gap: .6rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
.unbesetzt__posten {
  display: grid; gap: .15rem; padding: var(--sp-4);
  border: 1px dashed var(--line); border-radius: var(--radius); background: var(--surface);
}
.unbesetzt__posten b { font-size: var(--fs-md); }
.unbesetzt__posten span { font-size: var(--fs-sm); color: var(--ink-500); }
.gremium__satz { max-width: 60ch; color: var(--ink-700); margin: .35rem 0 0; }
.gremium__satz .link-more { margin-left: .35rem; }
/* Der Satz kommt seit 06.10.2026 als Absatz aus der Textstelle; der Verweis
   „Zum Kontakt“ steht weiter dahinter in derselben Zeile. */
.gremium__satz > p { display: inline; margin: 0; }

.gremium__teams {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); flex-wrap: wrap;
  padding: var(--sp-5) var(--sp-6); border-radius: var(--radius-lg);
  background: var(--green-50); border: 1px solid var(--green-100);
}

/* ---------- Weitere Gremien ---------- */
.gremium-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: var(--sp-3); }
.gremium-nav__link {
  display: inline-flex; padding: .55rem 1rem; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  font-weight: 700; font-size: var(--fs-sm); color: var(--ink); text-decoration: none;
  transition: border-color .15s var(--ease), color .15s var(--ease);
}
a.gremium-nav__link:hover,
a.gremium-nav__link:focus-visible { border-color: var(--green-500); color: var(--green-700); }
.gremium-nav__link.is-aktuell { background: var(--green-600) var(--fill-green); border-color: var(--green-600); color: #fff; }

/* ---------- Handy ---------- */
@media (max-width: 767px) {
  .person { gap: var(--sp-3); }
  .person__foto { width: 4.25rem; }
  .gremium__teams { padding: var(--sp-4); }
  .gremium__teams .btn { width: 100%; justify-content: center; }
}

/* =============================================================
   Auf der Mannschaftsseite: dieselbe Karte wie der Trainerstab
   ============================================================= */

/*
 * Chris am 08.09.2026 zu den Alten Herren: „diese Section ist bei den Teams
 * der Alten Herren. bitte gib diesen Kacheln denselben Style von ‚Stab‘."
 *
 * Auf den Gremiumsseiten ist die Person der Inhalt der Seite – dort trägt die
 * Karte Foto, großen Namen und Luft. Auf einer Mannschaftsseite steht dieselbe
 * Karte neben dem Trainerstab, und der ist eine schmale Zeile. Zwei Größen für
 * denselben Menschen auf einer Seite ist der Unterschied, den man sieht, ohne
 * ihn benennen zu können.
 *
 * Sichtbar wurde es an einem Nebeneffekt: In der großen Karte, aber schmalen
 * Spalte brach „ABTEILUNGSLEITER" mitten im Wort um – „ABTEILUNGSLEIT / ER".
 * Schuld ist nicht die Rolle, sondern die Breite; in der Stab-Karte passt
 * dasselbe Wort in eine Zeile.
 *
 * Geändert wird nur das Maß, nicht das Markup: Die Karte bleibt dieselbe
 * Vorlage (person-card.php), damit es weiter EINE Personenkarte gibt.
 */
.team-text .personen {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: var(--sp-3);
}
/* Name, Rolle und Wege stehen als ein Block, in gleichen Abständen. Chris am
   08.09.2026 mit dem Bild der Stab-Karte von Elke Keller: „ja, aber es soll ja
   so aussehen." Auf der Vorlage trennt eine einzige Angabe alle Zeilen – 1,6
   Pixel –, hier standen zwischen Rolle und erster Kontaktzeile acht. Ich hatte
   die acht Pixel verteidigt, weil sie zwei verschiedene Dinge trennen; das
   Bild sagt: Auf einer Personenkarte ist das eine Sache, nämlich die Person. */
.team-text .person {
  gap: .1rem .85rem;
  padding: .85rem 1rem;
  border-radius: var(--radius);
  box-shadow: none;
}
.team-text .person__foto { width: 46px; }
.team-text .person__initialen {
  background: var(--green-600); color: #fff;
  font-size: .95rem; letter-spacing: .02em;
}
/* „ABTEILUNGSLEITER" ist ein Wort und passt nicht in die schmale Spalte. Die
   globale Regel overflow-wrap: break-word trennte es irgendwo – „ABTEILUNGSL /
   EITER". Mit Silbentrennung bricht es dort, wo es hingehört, und mit einem
   Trennstrich: „ABTEILUNGS-LEITER". Die Seite ist als deutsch ausgezeichnet,
   der Browser bringt die Trennregeln mit. */
.team-text .person__funktion {
  margin-bottom: .1rem;
  overflow-wrap: normal; hyphens: auto; hyphenate-limit-chars: 8 4 4;
}
.team-text .person .person__name {
  font-family: inherit; font-style: normal; text-transform: none;
  font-size: var(--fs-base); font-weight: 700; line-height: 1.2; letter-spacing: normal;
}
/* Beim Trainerstab steht der Name oben und die Rolle darunter – auf der
   Gremiumsseite ist es umgekehrt, weil dort die Funktion die Ordnung der Seite
   ist („Vorstand: 1. Vorsitzender, Kassierer …") und der Name die Antwort
   darauf. Auf einer Mannschaftsseite kennt man die Rolle schon, man sucht den
   Menschen. Chris am 08.09.2026 mit dem Bild einer Stab-Karte: „ich meinte so."
   Getauscht wird die Reihenfolge in der Darstellung, nicht im Markup: Im
   Quelltext steht die Funktion weiter vor dem Namen, damit Screenreader und
   Suchmaschinen überall dieselbe Reihenfolge hören wie auf den Gremiumsseiten. */
.team-text .person__text { display: flex; flex-direction: column; }
.team-text .person .person__name { order: 1; margin-bottom: .1rem; }
.team-text .person__funktion,
.team-text .person__rollen { order: 2; margin-bottom: 0; }
.team-text .person .person__rollen + .person__name { margin-top: 0; }
/* Die Wege stehen unter dem Namen, nicht unter dem Kreis: In der zweiten
   Spalte fluchten sie mit Rolle und Name, wie die Nummer beim Trainerstab. */
/* Telefon, Handy und E-Mail stehen ohne Luft dazwischen. Chris am 08.09.2026:
   „jetzt mach den Abstand von Telefon+Mail bzw. Telefon+Handy weg." Der Platz
   kam nicht aus dem Zwischenraum – der waren zwei Pixel –, sondern aus der
   Zeilenhöhe des Fließtexts: 21 Pixel für 12,7 Pixel Schrift, also acht Pixel
   Luft um jede Zeile. Beides zurück: kein Abstand, engere Zeilen. Die Wege
   einer Person gehören zusammen und sollen wie ein Block wirken. */
.team-text .person__wege { grid-column: 2; gap: 0; }
/* Die Zeilenhöhe muss auf dem <li> stehen, nicht nur auf dem Link darin. Der
   Link ist inline-flex und damit nur ein Kasten IN der Zeile; wie hoch die
   Zeile wird, entscheidet die Schrift des <li>. Solange dort 16 Pixel Text mit
   der Zeilenhöhe des Fließtexts galten, war jede Kontaktzeile 32 Pixel hoch,
   obwohl der Link nur 17 misst – die fehlenden 15 Pixel waren der Abstand, den
   Chris gesehen hat, und kein gap. */
.team-text .person__wege li { font-size: var(--fs-xs); line-height: 1.35; }
.team-text .person__wege a {
  min-height: 0; line-height: 1.35;
  font-size: var(--fs-xs); font-weight: 400; color: var(--ink-500);
}
.team-text .person__wege span { border-bottom: 0; }
/* Ohne Symbole. Chris am 08.09.2026: „entferne die Icons." Beim Trainerstab
   steht die Nummer als nackte Zeile, und mehr braucht es nicht: Was eine
   Telefonnummer ist, erkennt man an der Nummer. Auf den Gremiumsseiten bleiben
   die Symbole – dort trägt die Karte mehr Wege und ordnet sie damit. */
.team-text .person__wege svg { display: none; }