/* ============================================================
   initiative party & jugend — Verein

   Grundsatz wie beim Schwesterplugin: Dieses Stylesheet fasst nichts
   außerhalb der eigenen Bereiche an. Alle Auswahlregeln beginnen mit
   .pjv-block, es gibt keinen Reset und keine Regeln auf body, a oder
   Überschriften.

   Warum .pjv-block doppelt vorangestellt ist: Elementor setzt globale
   Überschriftenstile über .elementor-kit-N h3 — das ist spezifischer als eine
   einzelne Klasse. Mit dem zusätzlichen .pjv-block liegen wir darüber, ohne
   !important zu brauchen.

   Jeder Abschnitt hat eine eigene Kennung: --vorstand, --beisitzer,
   --sponsoren. So beeinflussen sich die Bereiche nicht gegenseitig.
   ============================================================ */

.pjv-block {
  --pjv-navy: #000949;
  --pjv-eis: #87cedc;
  --pjv-eis-tief: #3f96ac;
  --pjv-linie: #dbe7ee;
  --pjv-dunst: #ecfbff;
  --pjv-leise: #55606e;
}

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

/* ---------- Überschrift eines Blocks ---------- */
.pjv-block .pjv-kopf { text-align: center; margin-bottom: 2.5rem; }
.pjv-block .pjv-kopf h2 {
  margin: 0 0 .8rem;
  font-size: calc(2.2rem * var(--pjv-skala, 1)); line-height: 1.2;
}
.pjv-block .pjv-zier {
  display: block; width: 120px; height: 10px; margin: 0 auto;
  background: repeating-linear-gradient(115deg,
    var(--pjv-eis) 0 2px, transparent 2px 7px);
}

.pjv-block .pjv-leer {
  text-align: center; color: var(--pjv-leise);
  font-size: calc(1.3rem * var(--pjv-skala, 1)); line-height: 1.6;
}

/* Text nur für Screenreader — ein Symbol allein wäre sonst eine Sackgasse */
.pjv-block .pjv-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 ---------- */
.pjv-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. */
  --pjv-bild-groesse: clamp(160px, 18vw, 220px);
}

.pjv-block--vorstand .pjv-personen {
  display: grid; gap: 2.4rem 1.6rem;
  grid-template-columns: 1fr;
  justify-items: center;
}
@media (min-width: 560px)  { .pjv-block--vorstand .pjv-personen { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .pjv-block--vorstand .pjv-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. */
.pjv-block--vorstand .pjv-personen:not(:has(> :nth-child(4))) {
  max-width: 720px; margin-inline: auto;
}
.pjv-block--vorstand .pjv-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. */
.pjv-block--vorstand .pjv-personen:not(:has(> :nth-child(3))) {
  --pjv-bild-groesse: clamp(180px, 24vw, 240px);
}

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

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

/* Schrift eine Stufe größer. Über dieselbe Skala wie überall sonst, damit ein
   im Shortcode gesetzter Wert weiterhin durchschlägt. */
.pjv-block--vorstand .pjv-personen:not(:has(> :nth-child(2))) .pjv-person-name {
  font-size: calc(1.6rem * var(--pjv-skala, 1));
}
.pjv-block--vorstand .pjv-personen:not(:has(> :nth-child(2))) .pjv-person-rolle {
  font-size: calc(1.2rem * var(--pjv-skala, 1));
}
.pjv-block--vorstand .pjv-personen:not(:has(> :nth-child(2))) .pjv-person-platzhalter {
  font-size: calc(3.2rem * var(--pjv-skala, 1));
}

.pjv-block--vorstand .pjv-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. */
.pjv-block--vorstand .pjv-person-name,
.pjv-block--vorstand .pjv-person-rolle { width: 100%; }

.pjv-block--vorstand .pjv-person-flaeche {
  position: relative; display: grid; place-items: center;
  width: var(--pjv-bild-groesse);
  aspect-ratio: 1 / 1;
  margin: 0 0 .9rem;
  background: var(--pjv-dunst);
  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. */
.pjv-block--vorstand .pjv-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;
}

.pjv-block--vorstand .pjv-person-platzhalter {
  position: relative; z-index: 1;
  font-size: calc(2.2rem * var(--pjv-skala, 1)); font-weight: 700;
  letter-spacing: .05em; color: var(--pjv-eis-tief);
}

.pjv-block--vorstand .pjv-person-name {
  margin: 0 0 .25rem;
  font-size: calc(1.35rem * var(--pjv-skala, 1)); line-height: 1.3;
  color: var(--pjv-navy);
}
.pjv-block--vorstand .pjv-person-rolle {
  margin: 0 0 .8rem;
  font-size: calc(1.1rem * var(--pjv-skala, 1));
  color: var(--pjv-leise);
}

.pjv-block--vorstand .pjv-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%;
}
.pjv-block--vorstand .pjv-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(--pjv-eis-tief); text-decoration: none;
  transition: color .15s ease, transform .15s ease;
}
.pjv-block--vorstand .pjv-weg:hover { color: var(--pjv-navy); transform: translateY(-2px); }
.pjv-block--vorstand .pjv-weg svg { width: 20px; height: 20px; }

/* ---------- Beisitzer ---------- */
.pjv-block--beisitzer .pjv-namen {
  margin: 0; text-align: center;
  font-size: calc(1.4rem * var(--pjv-skala, 1)); line-height: 1.7;
  color: var(--pjv-navy);
}
.pjv-block--beisitzer .pjv-name { white-space: nowrap; }

/* ---------- Sponsoren: Laufband ---------- */
.pjv-block--sponsoren .pjv-laufband {
  /* Beschneiden ist nur waagerecht nötig. Senkrecht kann nichts überstehen,
     weil alle Einträge dieselbe feste Höhe haben. */
  display: flex; overflow-x: hidden; overflow-y: hidden;
  /* Am Rand ausblenden, damit die Logos nicht abgeschnitten auftauchen */
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.pjv-block--sponsoren .pjv-laufband-spur {
  /* flex-start: Alle Einträge sind ohnehin gleich hoch, so bleibt es auch bei
     einer Änderung der Höhen verlässlich. */
  display: flex; align-items: flex-start; flex: none;
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  padding: .5rem clamp(2rem, 1rem + 3vw, 4rem) .5rem 0;
  animation: pjv-laufband var(--pjv-dauer, 40s) linear infinite;
}

/* Anhalten, sobald jemand mit der Maus darüberfährt oder mit der Tastatur
   hineinspringt — sonst wäre ein Logo kaum zu treffen. */
.pjv-block--sponsoren .pjv-laufband:hover .pjv-laufband-spur,
.pjv-block--sponsoren .pjv-laufband:focus-within .pjv-laufband-spur {
  animation-play-state: paused;
}

@keyframes pjv-laufband {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* ---------- Sponsoren: Raster ---------- */
.pjv-block--sponsoren .pjv-sponsorenraster {
  display: flex; flex-wrap: wrap; justify-content: center;
  align-items: flex-start; gap: clamp(2rem, 1rem + 3vw, 4rem) clamp(1.5rem, 1rem + 2vw, 3rem);
}

/* ---------- Ein einzelner Sponsor ----------
   Zwei feste Zeilen: oben das Logo, unten der Name. Beide Höhen stehen fest,
   deshalb sind alle Einträge gleich hoch — die Logos stehen auf einer Linie,
   die Namen ebenso, und der Block kann nicht über seine Höhe hinauswachsen.

   Die Höhen liegen als Variablen an einer Stelle, damit sie sich ändern
   lassen, ohne mehrere Regeln durchzugehen. */
.pjv-block--sponsoren {
  --pjv-logo-hoehe: clamp(70px, 7vw, 100px);
  --pjv-name-hoehe: 3.2em;
}

.pjv-block--sponsoren .pjv-sponsor {
  display: grid;
  grid-template-rows: var(--pjv-logo-hoehe) var(--pjv-name-hoehe);
  row-gap: .7rem;
  flex: none;
  width: clamp(150px, 13vw, 210px);
  text-decoration: none; color: var(--pjv-navy);
}

/* Bezugspunkt für das Logo darin — ohne den könnte sich dessen Höhe nicht
   auf die Fläche beziehen. */
.pjv-block--sponsoren .pjv-sponsor-flaeche {
  position: relative;
  display: block;
  width: 100%; height: 100%;
}

/* Absolut über alle vier Kanten: Eine Höchsthöhe in Prozent greift hier nicht
   zuverlässig, weil das Theme für alle Inhaltsbilder height:auto setzt. Mit
   festen Kanten steht die Größe, und object-fit passt das Logo hinein, ohne
   es zu verzerren oder zu beschneiden. */
.pjv-block--sponsoren .pjv-sponsor-flaeche img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  margin: 0;
  object-fit: contain;
  object-position: center center;
  /* Logos kommen in allen Farben und Formaten — der Graustich gleicht das an,
     beim Überfahren zeigt sich die eigene Farbe. */
  filter: grayscale(1);
  opacity: .8;
  transition: filter .2s ease, opacity .2s ease, transform .2s ease;
}
.pjv-block--sponsoren .pjv-sponsor:hover .pjv-sponsor-flaeche img,
.pjv-block--sponsoren .pjv-sponsor:focus-visible .pjv-sponsor-flaeche img {
  filter: none; opacity: 1; transform: scale(1.04);
}

/* Ohne Logo der erste Buchstabe als Platzhalter */
.pjv-block--sponsoren .pjv-sponsor-ersatz {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: var(--pjv-dunst); color: var(--pjv-eis-tief);
  font-size: calc(1.8rem * var(--pjv-skala, 1)); font-weight: 700;
}

/* Der Name steht in fester Höhe und beginnt oben — so stehen alle Namen auf
   derselben Linie, auch wenn einer zweizeilig ist. */
.pjv-block--sponsoren .pjv-sponsor-name {
  display: block;
  height: 100%;
  overflow: hidden;
  font-size: calc(1.05rem * var(--pjv-skala, 1));
  line-height: 1.35; text-align: center;
  color: var(--pjv-leise);
  overflow-wrap: anywhere;
}
.pjv-block--sponsoren .pjv-sponsor:hover .pjv-sponsor-name { color: var(--pjv-navy); }

/* ---------- Bewegung reduzieren ----------
   Wer das im System eingestellt hat, bekommt statt des Laufbands eine Liste
   zum Schieben — die Logos bleiben erreichbar, nur eben ohne Bewegung. */
@media (prefers-reduced-motion: reduce) {
  .pjv-block--sponsoren .pjv-laufband {
    overflow-x: auto;
    mask-image: none; -webkit-mask-image: none;
  }
  .pjv-block--sponsoren .pjv-laufband-spur { animation: none; }
  .pjv-block--sponsoren .pjv-laufband-spur[aria-hidden="true"] { display: none; }

  .pjv-block--vorstand .pjv-weg,
  .pjv-block--sponsoren .pjv-sponsor-flaeche img { transition: none; }
  .pjv-block--vorstand .pjv-weg:hover { transform: none; }
  .pjv-block--sponsoren .pjv-sponsor:hover .pjv-sponsor-flaeche img { 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) {
  .pjv-block .pjv-kopf { margin-bottom: 1.6rem; }
  .pjv-block .pjv-kopf h2 { font-size: calc(1.9rem * var(--pjv-skala, 1)); }

  /* 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. */
  .pjv-block--vorstand { --pjv-bild-groesse: min(11rem, 40vw); }
  .pjv-block--vorstand .pjv-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. */
  .pjv-block--vorstand .pjv-person { min-width: 0; }
  .pjv-block--vorstand .pjv-wege { gap: 2px; }
  .pjv-block--vorstand .pjv-weg { width: 32px; height: 32px; }
  .pjv-block--vorstand .pjv-weg svg { width: 18px; height: 18px; }
  .pjv-block--vorstand .pjv-person-name { font-size: calc(1.2rem * var(--pjv-skala, 1)); }
  .pjv-block--vorstand .pjv-person-rolle { font-size: calc(1.05rem * var(--pjv-skala, 1)); }

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

  .pjv-block--beisitzer .pjv-namen { font-size: calc(1.25rem * var(--pjv-skala, 1)); }

  /* Nur die Variablen ändern — die Regeln darüber bleiben unangetastet. */
  .pjv-block--sponsoren {
    --pjv-logo-hoehe: 64px;
    --pjv-name-hoehe: 3em;
  }
  .pjv-block--sponsoren .pjv-sponsor { width: clamp(120px, 36vw, 160px); row-gap: .5rem; }
  .pjv-block--sponsoren .pjv-sponsor-name { font-size: calc(1rem * var(--pjv-skala, 1)); }
  .pjv-block--sponsoren .pjv-laufband-spur,
  .pjv-block--sponsoren .pjv-sponsorenraster { gap: 2rem; }
}

/* 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) {
  .pjv-block--vorstand .pjv-personen {
    grid-template-columns: 1fr; gap: 2rem;
  }
  .pjv-block--vorstand .pjv-person { max-width: 16rem; }
  .pjv-block--vorstand .pjv-weg { width: 40px; height: 40px; }
  .pjv-block--vorstand .pjv-weg svg { width: 20px; height: 20px; }
  .pjv-block--vorstand .pjv-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. */
  .pjv-block--vorstand { --pjv-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. */
  .pjv-block--vorstand .pjv-person-name { font-size: calc(1.35rem * var(--pjv-skala, 1)); }
  .pjv-block--vorstand .pjv-person-rolle { font-size: calc(1.1rem * var(--pjv-skala, 1)); }
}