/*
 * Gestaltung der Vereinsblöcke.
 *
 * **Keine eigenen Schriftgrößen in rem, keine eigenen Farben.**
 *
 * Vorher standen hier feste Größen wie 2.2rem und ein Satz eigener
 * Farbwerte, die aus dem Theme des anderen Vereins stammten — dort waren
 * sie nirgends definiert, also fielen sie auf Schwarz zurück, und die
 * Schrift war neben dem übrigen Text viel zu groß.
 *
 * Jetzt:
 *
 * - **Keine Schriftgrößen.** Namen, Funktionen und Beisitzer stehen in
 *   der Größe, die das Theme für Fließtext vorgibt; die Blocküberschrift
 *   ist ein `<h2>` und wird als solches gestaltet. Einzige Ausnahme ist
 *   der Buchstabe im Bildersatz — der sitzt in einem 200 Pixel großen
 *   Kreis und wäre in Textgröße verloren.
 * - Farben über die Werte des Themes (`--rot`, `--tinte`,
 *   `--tinte-leise`, `--flaeche`) mit einem Rückfall, falls das Plugin
 *   einmal unter einem anderen Theme läuft.
 *
 * Schriftart wird gar nicht gesetzt — sie wird geerbt.
 */

.maycv-block * { box-sizing: border-box; }

/* ---------- Überschrift eines Blocks ---------- */
/* Auch die Blocküberschrift folgt der Umgebung. */
.maycv-block .maycv-kopf { text-align: inherit; margin-bottom: 2.5rem; }
.maycv-block .maycv-kopf h2 {
  margin: 0 0 .8rem;
  line-height: 1.2;
}
.maycv-block .maycv-zier {
  /* `margin-inline: 0` statt `auto`: Der Zierstrich soll unter der
     Überschrift beginnen, nicht in der Mitte des Blocks schweben. Steht
     die Überschrift mittig, schiebt ihn `text-align` mit. */
  display: inline-block; width: 120px; height: 10px; margin: 0;
  background: repeating-linear-gradient(115deg,
    var(--rot, #af121d) 0 2px, transparent 2px 7px);
}

.maycv-block .maycv-leer {
  text-align: inherit; color: var(--tinte-leise, #5f574c);
  line-height: 1.6;
}

/* Text nur für Screenreader — ein Symbol allein wäre sonst eine Sackgasse */
.maycv-block .maycv-nur-vorlesen {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Vorstandschaft ---------- */
.maycv-block--vorstand {
  /* An einer Stelle einstellbar: Wie groß eine Person auf der Seite wirkt.
     Der Wert wird in den Media Queries weiter unten je Bildschirmbreite
     überschrieben — ein einziges clamp() reicht dafür nicht, weil `vw` sich
     auf den ganzen Bildschirm bezieht und nicht auf die Spalte. Genau daran
     lag es, dass die Bilder auf dem Handy winzig wurden: Bei 375 Pixeln sind
     13vw nur 49 Pixel, das clamp() fiel auf seinen Mindestwert von 130 zurück
     — während die Symbolreihe darunter 219 Pixel breit war. */
  --maycv-bild-groesse: clamp(160px, 18vw, 220px);
}

.maycv-block--vorstand .maycv-personen {
  display: grid; gap: 2.4rem 1.6rem;
  grid-template-columns: 1fr;
  justify-items: center;
}
@media (min-width: 560px)  { .maycv-block--vorstand .maycv-personen { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .maycv-block--vorstand .maycv-personen { grid-template-columns: repeat(4, 1fr); } }

/* Bei ein bis drei Personen bliebe rechts eine Lücke, die Reihe wirkte
   abgebrochen. Statt die Spalten zu begrenzen, wird das Raster schmaler. */
.maycv-block--vorstand .maycv-personen:not(:has(> :nth-child(4))) {
  max-width: 720px; margin-inline: auto;
}
.maycv-block--vorstand .maycv-personen:not(:has(> :nth-child(3))) {
  max-width: 500px;
}

/* Je weniger Personen, desto größer dürfen sie sein.

   Das Schmalerziehen allein reichte nicht: Eine einzelne Person stand in
   einem 240 px schmalen Rahmen mit einem 180 px kleinen Bild — auf einer
   breiten Seite wirkte sie verloren, obwohl ringsum nichts als Platz war.
   Die Größe richtet sich deshalb nach der Anzahl. Gesetzt wird die vorhandene
   Variable, damit Bild, Name und Funktion gemeinsam mitwachsen. */
.maycv-block--vorstand .maycv-personen:not(:has(> :nth-child(3))) {
  --maycv-bild-groesse: clamp(180px, 24vw, 240px);
}

.maycv-block--vorstand .maycv-personen:not(:has(> :nth-child(2))) {
  max-width: 26rem;
  --maycv-bild-groesse: clamp(200px, 32vw, 290px);
}

/* Die Karte muss mitwachsen, sonst ragte das größere Bild über ihre
   Höchstbreite von 15 rem hinaus. */
.maycv-block--vorstand .maycv-personen:not(:has(> :nth-child(2))) .maycv-person {
  max-width: 24rem;
}

.maycv-block--vorstand .maycv-person {
  /* Eine gemeinsame Achse für alles darin: Bild, Name, Funktion und die
     Symbolreihe. Vorher zentrierte jedes Teil für sich — über text-align,
     über automatische Ränder und über justify-content. Sobald eines davon
     eine andere Bezugsbreite hatte, standen sie nicht mehr übereinander. */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  /* Breit genug für fünf Symbole nebeneinander: 5 × 40 px plus vier Abstände
     ergibt rund 220 px — deshalb 14 rem als Mindestbreite. */
  max-width: 15rem;
  min-width: 14rem;
}

/* Name und Funktion über die volle Breite, damit lange Namen umbrechen statt
   die Karte zu verbreitern. Bild und Symbolreihe behalten ihre eigene Breite
   und werden über align-items zentriert. */
.maycv-block--vorstand .maycv-person-name,
.maycv-block--vorstand .maycv-person-rolle { width: 100%; }

.maycv-block--vorstand .maycv-person-flaeche {
  position: relative; display: grid; place-items: center;
  width: var(--maycv-bild-groesse);
  aspect-ratio: 1 / 1;
  margin: 0 0 .9rem;
  background: var(--flaeche, #f4f1ec);
  overflow: hidden;
  /* Nur die Ecken abrunden. Ganz rund wirkte wie ein Profilbild in einem
     sozialen Netzwerk und schnitt bei hochformatigen Aufnahmen zu viel weg. */
  border-radius: 6px;
}

/* Absolut über alle Kanten: Eine Prozenthöhe könnte sich nicht auf einen
   Behälter beziehen, dessen Höhe erst aus dem Seitenverhältnis entsteht —
   Browser verwerfen die Angabe dann. */
.maycv-block--vorstand .maycv-person-flaeche img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  margin: 0;
  object-fit: cover;
  object-position: center center;
}

.maycv-block--vorstand .maycv-person-platzhalter {
  position: relative; z-index: 1;
  font-size: 2.2em; font-weight: 700;
  letter-spacing: .05em; color: var(--rot, #af121d);
}

.maycv-block--vorstand .maycv-person-name {
  margin: 0 0 .25rem;
  line-height: 1.3;
  color: var(--tinte, #17140f);
}
.maycv-block--vorstand .maycv-person-rolle {
  margin: 0 0 .8rem;
  color: var(--tinte-leise, #5f574c);
}

.maycv-block--vorstand .maycv-wege {
  /* Kein Umbruch: Fünf Symbole gehören in eine Zeile, sonst steht bei einer
     Person eines allein darunter und die Karten werden unterschiedlich hoch.
     Wird es eng, rücken sie näher zusammen statt umzubrechen. */
  display: flex; flex-wrap: nowrap; justify-content: center;
  gap: clamp(0rem, .5vw, .3rem);
  /* Nur so breit wie nötig, sonst zieht die Reihe die Karte auseinander */
  max-width: 100%;
}
.maycv-block--vorstand .maycv-weg {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  /* Die Tippfläche bleibt bei 40 Pixeln, auch wenn das Symbol kleiner ist —
     sonst trifft man auf dem Handy daneben. */
  width: 40px; height: 40px;
  color: var(--rot, #af121d); text-decoration: none;
  transition: color .15s ease, transform .15s ease;
}
/*
 * Beim Überfahren das helle Vereinsrot, nicht Schwarz.
 *
 * Das Theme macht es bei jedem Verweis so (`a:hover` → `--rot-hell`).
 * Ein Wechsel nach Schwarz sah aus, als würde das Symbol ausgehen
 * statt zu reagieren — und passte zu nichts anderem auf der Seite.
 */
.maycv-block--vorstand .maycv-weg:hover,
.maycv-block--vorstand .maycv-weg:focus-visible {
  color: var(--rot-hell, #d1202e);
  transform: translateY(-2px);
}
.maycv-block--vorstand .maycv-weg svg { width: 20px; height: 20px; }

/* ---------- Einleitungstexte ---------- */

/*
 * Der Satz über einer Liste, gepflegt unter *Verein → Texte*.
 *
 * Ohne eigene Größe und Farbe: Er ist gewöhnlicher Fließtext und soll
 * aussehen wie der Absatz darüber. Nur der Abstand nach unten kommt von
 * hier, damit er nicht am Block klebt.
 */
.maycv-einleitung {
  margin-bottom: 1.25rem;
}

.maycv-einleitung > :first-child { margin-top: 0; }
.maycv-einleitung > :last-child { margin-bottom: 0; }

/* ---------- Beisitzer ---------- */

/*
 * **Keine feste Ausrichtung.**
 *
 * Vorher stand hier `text-align: center`. Damit war es gleich, was im
 * Editor eingestellt war — die Namen standen immer mittig, auch wenn
 * der Rest der Seite links ausgerichtet war.
 *
 * `inherit` übernimmt, was drumherum gilt: Setzt jemand den Shortcode in
 * eine Gruppe oder einen Absatz mit Ausrichtung, folgt er dieser. Ohne
 * Angabe steht er links, wie der übrige Text.
 */
/*
 * Ein Kasten statt einer nackten Zeile.
 *
 * Die Namen standen bisher als gewöhnlicher Absatz da und gingen
 * zwischen Vorstandschaft und Formalia unter. Der helle Grund mit dem
 * roten Balken zeigt, dass sie zusammengehören, ohne sie so laut zu
 * machen wie die Karten darüber.
 */
.maycv-block--beisitzer {
  /* Abstand nach unten: Danach folgen meist die Formalia, und die
     sollen nicht am Kasten kleben. */
  margin-bottom: clamp(1.5rem, 4vw, 2.5rem);
  padding: 1.1rem 1.35rem;
  background: var(--flaeche, #f4f1ec);
  border-left: 3px solid var(--rot, #af121d);
  border-radius: var(--radius-gross, 12px);
}

.maycv-block--beisitzer .maycv-namen {
  margin: 0; text-align: inherit;
  line-height: 1.8;
  color: var(--tinte, #17140f);
}

/* Die Trennzeichen etwas zurücknehmen, damit die Namen führen. */
/*
 * Kein Innenabstand mehr: Die Lücken stecken jetzt im Text selbst, weil
 * sie je nach Zeichen verschieden sind. Ein Komma klebt am Wort davor,
 * ein Strich steht frei — mit einem Abstand für alle wurde daraus
 * „Anna , Daniel“.
 */
.maycv-block--beisitzer .maycv-trenner {
  color: var(--tinte-leise, #5f574c);
}
.maycv-block--beisitzer .maycv-name { white-space: nowrap; }
  to   { transform: translateX(-100%); }
  .maycv-block--vorstand .maycv-weg:hover { transform: none; }
}

/* ============================================================
   Handy und schmale Bildschirme

   Gebündelt am Ende: Vorher über die Datei verstreute Anpassungen führen
   regelmäßig dazu, dass beim Ändern einer Größe Werte übersehen werden.
   ============================================================ */

@media (max-width: 780px) {
  .maycv-block .maycv-kopf { margin-bottom: 1.6rem; }

  /* Auf dem Handy zwei Spalten statt einer — bei vier Personen wäre die Seite
     sonst sehr lang.

     Die frühere Deckelung auf 140 Pixel war zu streng: Bei 375 Pixeln blieb
     ein 112 Pixel kleines Bild über einer Symbolreihe von 219 Pixeln stehen.
     Maßgeblich ist die halbe Bildschirmbreite, nicht die ganze — bei 420
     Pixeln bleiben je Spalte rund 183, ein Bild von 40vw passt dort ebenso
     wie am oberen Ende dieses Bereichs. */
  .maycv-block--vorstand { --maycv-bild-groesse: min(11rem, 40vw); }
  .maycv-block--vorstand .maycv-personen {
    grid-template-columns: repeat(2, 1fr); gap: 2rem .8rem;
  }
  /* Die Mindestbreite muss weg, sonst sprengen zwei Spalten den Bildschirm.
     Die Symbole werden dafür kleiner: Auf 390 Pixeln bleiben je Spalte rund
     172 Pixel, fünf Symbole zu 32 plus Abstände brauchen 168. */
  .maycv-block--vorstand .maycv-person { min-width: 0; }
  .maycv-block--vorstand .maycv-wege { gap: 2px; }
  .maycv-block--vorstand .maycv-weg { width: 32px; height: 32px; }
  .maycv-block--vorstand .maycv-weg svg { width: 18px; height: 18px; }

  /* Auf einer oder zwei Spalten gibt es nichts zu zentrieren — die
     Begrenzung würde die Karten nur unnötig schmal machen. */
  .maycv-block--vorstand .maycv-personen:not(:has(> :nth-child(2))),
  .maycv-block--vorstand .maycv-personen:not(:has(> :nth-child(3))),
  .maycv-block--vorstand .maycv-personen:not(:has(> :nth-child(4))) { max-width: none; }

}

/* Sehr schmale Geräte — iPhone SE und ähnliche liegen bei 360 Pixeln.
   Dort reicht die halbe Bildschirmbreite nicht mehr für fünf Symbole
   nebeneinander, also eine Spalte statt zwei. */
@media (max-width: 400px) {
  .maycv-block--vorstand .maycv-personen {
    grid-template-columns: 1fr; gap: 2rem;
  }
  .maycv-block--vorstand .maycv-person { max-width: 16rem; }
  .maycv-block--vorstand .maycv-weg { width: 40px; height: 40px; }
  .maycv-block--vorstand .maycv-weg svg { width: 20px; height: 20px; }
  .maycv-block--vorstand .maycv-wege { gap: .3rem; }

  /* Steht nur eine Person je Zeile, ist die ganze Spaltenbreite da — dann
     darf das Bild sie auch nutzen. Als Maß dient die Symbolreihe darunter:
     fünf Symbole zu 40 Pixeln plus vier Abstände ergeben rund 219. Ein Bild,
     das schmaler ist als die Symbole darunter, sieht verloren aus.
     Die 70vw greifen erst unterhalb von 320 Pixeln und verhindern dort das
     Überlaufen. */
  .maycv-block--vorstand { --maycv-bild-groesse: min(14rem, 70vw); }

  /* Auch die Schrift eine Stufe zurück nach oben: Die Verkleinerung aus der
     Zweispalten-Stufe darüber gilt hier sonst weiter, obwohl der Platz einer
     ganzen Spalte zur Verfügung steht. */
}