html { --jf-stern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2l2.6 5.6 6 .8-4.4 4.2 1.1 6-5.3-2.9-5.3 2.9 1.1-6L3.4 9.6l6-.8z'/%3E%3C/svg%3E"); }
html { --jf-insta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2c3.2 0 3.6 0 4.9.07 1.17.05 1.97.24 2.67.51.72.28 1.33.66 1.94 1.27.61.61.99 1.22 1.27 1.94.27.7.46 1.5.51 2.67.06 1.3.07 1.7.07 4.9s0 3.6-.07 4.9c-.05 1.17-.24 1.97-.51 2.67a5.4 5.4 0 0 1-1.27 1.945.4 5.4 0 0 1-1.94 1.27c-.7.27-1.5.46-2.67.51-1.3.06-1.7.07-4.9.07s-3.6 0-4.9-.07c-1.17-.05-1.97-.24-2.67-.51a5.4 5.4 0 0 1-1.94-1.27 5.4 5.4 0 0 1-1.27-1.94c-.27-.7-.46-1.5-.51-2.67C2.2 15.6 2.2 15.2 2.2 12s0-3.6.07-4.9c.05-1.17.24-1.97.51-2.67.28-.72.66-1.33 1.27-1.94A5.4 5.4 0 0 1 5.99 2.78c.7-.27 1.5-.46 2.67-.51C9.96 2.2 10.36 2.2 12 2.2Zm0 1.98c-3.14 0-3.5.01-4.73.07-.94.04-1.45.2-1.79.33-.45.17-.77.38-1.11.72-.34.34-.55.66-.72 1.11-.13.34-.29.85-.33 1.79-.06 1.23-.07 1.59-.07 4.73s.01 3.5.07 4.73c.04.94.2 1.45.33 1.79.17.45.38.77.72 1.11.34.34.66.55 1.11.72.34.13.85.29 1.79.331.23.06 1.59.07 4.73.07s3.5-.01 4.73-.07c.94-.04 1.45-.2 1.79-.33.45-.17.77-.38 1.11-.72.34-.34.55-.66.72-1.11.13-.34.29-.85.33-1.79.06-1.23.07-1.59.07-4.73s-.01-3.5-.07-4.73c-.04-.94-.2-1.45-.33-1.79a2.98 2.98 0 0 0-.72-1.112.98 2.98 0 0 0-1.11-.72c-.34-.13-.85-.29-1.79-.33-1.23-.06-1.59-.07-4.73-.07Zm0 3.37a4.45 4.45 0 1 1 0 8.9 4.45 4.45 0 0 1 0-8.9Zm0 1.98a2.47 2.47 0 1 0 0 4.94 2.47 2.47 0 0 0 0-4.94Zm5.67-2.2a1.04 1.04 0 1 1-2.08 0 1.04 1.04 0 0 1 2.08 0Z'/%3E%3C/svg%3E") }
/* Junge Freunde – Extras: Aussehen + Handy-Korrekturen. Wird von jf-extras.php eingebunden (nach Elementor). */
/* 1. Handy/Tablet: Elementor gibt den Zeilen in der Event-Liste 100vw – dadurch war die Seite breiter als der Bildschirm */
.e-loop-item :is(.elementor-element-c0b1b49, .elementor-element-0f37807) { --width: 100% !important; }
/* 1. Tablet: der Kalender-Bereich hatte feste 1120 px und der obere Bereich 120 px Rand je Seite */
@media (max-width: 1150px) { .elementor-element-ced10aa { --width: 100% !important; max-width: 100% !important; } }
@media (min-width: 768px) and (max-width: 1024px) { .elementor-element-f6a4b83 { padding-left: 24px !important; padding-right: 24px !important; } }

/* Grundwerte der Seite (gemessen): Hintergrund #1B1D1F, Papier #262624, Schrift #F7F7FF,
   Titel Montserrat 800, Text Roboto 600 16/21, Knopf #69727D rund mit Schatten */
.jf-block { color: #F7F7FF; margin: 0 auto; max-width: 1120px; width: 100%; box-sizing: border-box; }
.jf-titel { font: 800 40px/1.05 "Montserrat", sans-serif; text-transform: uppercase; text-align: center; color: #F7F7FF; margin: 0 0 var(--jf-titel-luecke, 30px); }
.jf-unterzeile { font: 800 24px/1.2 "Montserrat", sans-serif; text-align: center; color: #FFCE00; margin: -14px 0 30px; }

/* Einheitlicher Abstand von einer Abschnittsüberschrift zum Inhalt darunter (Wunsch Matthias,
   13.11.2026). Der Abstand kam bisher aus dem Zeilenabstand des Elementor-Containers und war von
   Seite zu Seite verschieden (0, 16, 18, 20, 30, 45 px). Jetzt bekommt jeder Container, in dem eine
   große Überschrift (h1/h2) steckt, denselben Wert; eigene Abschnitte nutzen über .jf-titel dieselbe
   Variable. Karten, Kalender-Einträge, Kopf und Fuß bleiben außen vor, die haben ihren eigenen Takt. */
html { --jf-titel-luecke: 30px; }
:root body :is(.e-con, .e-con-inner):has(> .elementor-widget-heading > .elementor-widget-container > :is(h1, h2).elementor-heading-title):not(
    .e-loop-item *, .elementor-location-header *, .elementor-location-footer *, .jf-karte, .jf-karte *, .jf-zs__karte, .jf-zs__karte *) {
  row-gap: var(--jf-titel-luecke) !important; }

.jf-hinweis { font: 500 16px/26px "Montserrat", sans-serif; text-align: center; color: #F7F7FF; margin: 14px 0 0; }
.jf-hinweis a { color: #FFCE00 !important; }

/* Knöpfe wie „Mehr erfahren“ */
.jf-knoepfe { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin: 24px 0 0; }
.jf-knoepfe--mitte { justify-content: center; }
.jf-knopf { display: inline-block; background: #69727D; color: #F7F7FF !important; text-decoration: none !important;
  font: 700 16px/1 "Montserrat", sans-serif; padding: 15px 22px; border-radius: 27px;
  box-shadow: 0 3px 6px rgba(0,0,0,.35); }
.jf-knopf:hover { transform: rotate(-1deg); }
/* Graue Knöpfe: beim Hover CI-Gelb mit dunkler Schrift (eigene Knöpfe und Elementor-Knöpfe wie „Mehr erfahren“) */
:root body :is(.jf-knopf, .elementor-button):is(:hover, :focus-visible) { background-color: #FFCE00 !important; color: #1B1D1F !important; }
:root body .elementor-button:is(:hover, :focus-visible) :is(.elementor-button-text, svg) { color: #1B1D1F !important; fill: #1B1D1F !important; }
.jf-knopf--haupt { background: #69727D; }
.jf-knopf--leise { background: none; box-shadow: none; color: #FFCE00 !important; padding-left: 4px; padding-right: 4px; }

/* Mehrere Knöpfe in einem Textabsatz (z. B. Kontakt, Mitglied werden): als Reihe mit Abstand, auch wenn sie umbrechen */
.elementor-widget-text-editor p:has(> a.jf-knopf) { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 0; }
.elementor-widget-text-editor p:has(> a.jf-knopf) > a.jf-knopf { margin: 0; }

/* Infos am Event (Uhrzeit, Ort, Kosten, Anmeldung, Plätze): Symbol + Text, bewusst ohne Fläche und Schatten,
   damit sie nicht wie Knöpfe aussehen. Symbole als Maske, Farbe je Art (CI-Farben). */
.jf-tags { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.jf-tag { display: inline-flex; align-items: center; gap: 7px; font: 600 14px/1.3 "Montserrat", sans-serif; color: #F7F7FF; }
.jf-tag::before { content: ""; flex: none; width: 16px; height: 16px; background: var(--jf-ic-farbe, #FFCE00);
  -webkit-mask: var(--jf-ic) center / contain no-repeat; mask: var(--jf-ic) center / contain no-repeat; }
.jf-tag--zeit { --jf-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); --jf-ic-farbe: #FFCE00; }
.jf-tag--ort { --jf-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E"); --jf-ic-farbe: #FFCE00; }
.jf-tag--frei { --jf-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.5 6.5a6.5 6.5 0 1 0 0 11M4 10.2h9M4 13.8h9'/%3E%3C/svg%3E"); --jf-ic-farbe: #22CF68; }
.jf-tag--kosten { --jf-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.5 6.5a6.5 6.5 0 1 0 0 11M4 10.2h9M4 13.8h9'/%3E%3C/svg%3E"); --jf-ic-farbe: #0A8CFA; }
.jf-tag--anmeldung { --jf-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19.5 8.5l-4-4L4 16z'/%3E%3Cpath d='M13.5 6.5l4 4'/%3E%3C/svg%3E"); --jf-ic-farbe: #FA780A; }
.jf-tag--offen { --jf-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8 12.2l2.8 2.8L16.2 9'/%3E%3C/svg%3E"); --jf-ic-farbe: #97CC2C; }
.jf-tag--bonus { --jf-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2l2.6 5.6 6 .8-4.4 4.2 1.1 6-5.3-2.9-5.3 2.9 1.1-6L3.4 9.6l6-.8z'/%3E%3C/svg%3E"); --jf-ic-farbe: #FFCE00; color: #FFCE00; font-weight: 800; }

/* Archiv: Störer oben rechts auf der Karte */
.e-loop-item .elementor-element-1ff0976 > .elementor-widget-shortcode:has(.jf-stoerer) { inset: 0 0 auto auto; width: 100%; height: 0; }
@media (max-width: 767px) {
  .jf-stoerer { top: 10px; right: 12px; padding: 6px 9px 5px; }
  /* Am Handy steht der Störer direkt über der Titelzeile: nur der Titel weicht aus (der Text darunter
     liegt tiefer als der Störer und behält die volle Breite). Das !important schlägt die Abstandsregel
     weiter unten im Handy-Block, die sonst gewinnt. */
  .e-loop-item .elementor-element-83745e4:has(.jf-stoerer) .elementor-element-066b6eb { padding-right: 100px !important; }
  .jf-stoerer__wort { font-size: 12.5px; }
  .jf-stoerer__oben { font-size: 8px; }
}

/* Kalender: Ohne Enddatum keinen leeren End-Zettel und kein „bis“ zeigen (Desktop und Handy) */
.e-loop-item .elementor-element-c049afb:not(:has(.elementor-widget)) { display: none !important; }

/* Deutschlandkarte „Junge Freunde in ganz Deutschland“ (Über uns): Bundesländer als Papierstücke im Collage-Look
   (jedes Land ein eigener Ton, Kanten leicht unruhig geschnitten), Pins in CI-Farben. Beim Antippen leuchtet
   das Bundesland in der Farbe des Pins. */
.jf-mk { margin: 0 auto; max-width: 1120px; }
.jf-mk__text { max-width: 760px; margin: 0 auto 32px; text-align: center; font: 500 16px/1.6 "Montserrat", sans-serif; }
.jf-mk__text a { color: #FFCE00; font-weight: 700; }
.jf-mk__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 38px; align-items: start; }
.jf-mk__karte { position: relative; }
.jf-mk__karte svg { display: block; width: 100%; height: auto; overflow: visible; }
.jf-mk__land { stroke: #1B1D1F; stroke-width: 2.2; stroke-linejoin: round; transition: fill .25s ease; }
.jf-mk__land--aktiv-moeglich { stroke: #45443F; }
.jf-mk__land.ist-an { stroke: #1B1D1F; filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .5)); }
.jf-mk__pin { position: absolute; transform: translate(-50%, -50%); width: 28px; height: 28px; padding: 0; border: 0;
  background: none; cursor: pointer; display: grid; place-items: center; }
.jf-mk__pin > span { width: 12px; height: 12px; background: var(--f); border: 2.5px solid #1B1D1F; border-radius: 50%;
  transition: transform .2s cubic-bezier(.3, 1.5, .5, 1); }
.jf-mk__pin:is(:hover, :focus-visible) > span { transform: scale(1.45); }
.jf-mk__pin.ist-an > span { transform: scale(1.8); box-shadow: 0 0 0 3px #1B1D1F, 0 0 0 6px var(--f); }
.jf-mk__pin--wir > span { width: 16px; height: 16px; }
/* Infokasten: dunkles Papier mit Risskanten (paper.js), Farbe des gewählten Pins als Linie oben */
.jf-mk__info { background: #262624; padding: 24px 26px 26px; margin: 0 0 24px; display: grid; gap: 7px; justify-items: start;
  border-top: 4px solid var(--f, #FFCE00); }
:root:root body .jf-mk__info strong { font: 800 27px/1.05 "Montserrat", sans-serif; text-transform: uppercase; color: var(--f, #FFCE00); }
.jf-mk__gruppe { font: 700 16px/1.35 "Montserrat", sans-serif; }
.jf-mk__verein { font: 500 14px/1.45 "Montserrat", sans-serif; color: #C9CAD0; }
.jf-mk__knoepfe { display: flex; flex-wrap: wrap; gap: 9px; margin: 12px 0 0; }
.jf-mk__info .jf-knopf { margin: 0; }
/* Instagram-Knopf im Infokasten: Farbe des Pins, dunkle Schrift, kleines Zeichen davor */
.jf-knopf--insta { background: var(--f, #FFCE00); color: #1B1D1F !important; display: inline-flex; align-items: center; gap: 7px; }
.jf-knopf--insta::before { content: ""; width: 14px; height: 14px; flex: none; background: #1B1D1F;
  -webkit-mask: var(--jf-insta) center / contain no-repeat; mask: var(--jf-insta) center / contain no-repeat; }
.jf-knopf__kurz { display: none; }
@media (max-width: 600px) { .jf-knopf__lang { display: none; } .jf-knopf__kurz { display: inline; } }
.jf-mk__wir { font: 800 11px/1 "Montserrat", sans-serif; text-transform: uppercase; letter-spacing: .06em;
  background: #FFCE00; color: #1B1D1F; padding: 7px 12px 6px; margin: 12px 0 0; }
.jf-mk__liste { list-style: none; margin: 0; padding: 0; max-height: 340px; overflow-y: auto; display: grid; gap: 2px;
  scrollbar-width: thin; scrollbar-color: #45443F transparent; }
.jf-mk__zeile { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; padding: 10px 13px;
  display: grid; gap: 2px; color: #F7F7FF; border-left: 4px solid transparent; transition: background .18s ease; }
.jf-mk__zeile strong { font: 800 14px/1.2 "Montserrat", sans-serif; text-transform: uppercase; }
.jf-mk__zeile span { font: 500 13px/1.3 "Montserrat", sans-serif; color: #A9AAB0; }
.jf-mk__zeile:is(:hover, :focus-visible) { background: #262624; }
.jf-mk__zeile.ist-an { background: #262624; border-left-color: var(--f); }
.jf-mk__zeile.ist-an strong { color: var(--f); }
@media (max-width: 767px) {
  .jf-mk__raster { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .jf-mk__karte { max-width: 320px; margin: 0 auto; }
  .jf-mk__pin { width: 34px; height: 34px; }
  .jf-mk__land { stroke-width: 2.8; }
  .jf-mk__liste { max-height: 270px; }
  .jf-mk__text { font-size: 15px; margin-bottom: 24px; }
}

/* Mitglieder-Bonus: gelbes Abzeichen, das sofort auffällt (Kalender, Archiv, Event-Seite).
   Bewusst eine Fläche statt einer Info-Zeile, damit der Vorteil für Mitglieder heraussticht. */
/* Mitglieder-Bonus. Zwei Formen: der Störer (klein, schräg, in der Ecke der Karte, Kalender und Archiv)
   und das längere Abzeichen im Kopf der Event-Seite. Beide gelb mit Stern, damit der Vorteil sofort auffällt. */
.jf-stoerer { position: absolute; z-index: 3; top: 12px; right: 14px; display: grid; justify-items: center; gap: 1px;
  color: #1B1D1F; padding: 7px 11px 6px; text-align: center;
  border-top: 0 solid #FFCE00;        /* Farbe der gerissenen Fläche dahinter (paper.js) */
  background: #FFCE00;                /* Rückfall ohne JavaScript */
  filter: drop-shadow(0 3px 7px rgba(0, 0, 0, .5)); }
/* Mit Risskante übernimmt die Fläche dahinter das Gelb und die Schräglage.
   paper.css setzt [data-jf-band] auf position: relative, deshalb hier absolut erzwingen. */
:root:root .jf-stoerer[data-jf-band] { position: absolute; background: none; rotate: none; }
.jf-stoerer__oben { font: 800 9px/1 "Montserrat", sans-serif; text-transform: uppercase; letter-spacing: .09em; opacity: .9; }
.jf-stoerer__wort { display: flex; align-items: center; gap: 4px; font: 800 14px/1 "Montserrat", sans-serif; text-transform: uppercase; }
.jf-stoerer__wort::before { content: ""; width: 11px; height: 11px; background: #1B1D1F;
  -webkit-mask: var(--jf-stern) center / contain no-repeat; mask: var(--jf-stern) center / contain no-repeat; }
/* Das umgebende Widget nimmt keinen Platz weg, der Störer sitzt über der Karte */
.e-loop-item .elementor-widget-shortcode:has(.jf-stoerer) { position: absolute; inset: 0; margin: 0; padding: 0; pointer-events: none; }
.e-loop-item .elementor-element-83745e4, .e-loop-item .elementor-element-1ff0976 { position: relative; }
/* Rechts Platz lassen, damit der Störer weder Titel noch den Infotext beim Hover überdeckt */
.e-loop-item .elementor-element-83745e4:has(.jf-stoerer) .elementor-element-d90f845 { padding-right: 112px; }
/* Abzeichen im Kopf der Event-Seite (längere Fassung) */
.jf-bonus { display: inline-flex; align-items: center; gap: 7px; background: #FFCE00; color: #1B1D1F;
  font: 800 13px/1 "Montserrat", sans-serif; text-transform: uppercase; letter-spacing: .03em; padding: 9px 14px 8px; white-space: nowrap; }
.jf-bonus::before { content: ""; flex: none; width: 14px; height: 14px; background: #1B1D1F;
  -webkit-mask: var(--jf-stern) center / contain no-repeat; mask: var(--jf-stern) center / contain no-repeat; }

.jf-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.jf-aktionen { margin: 10px 0 30px; }

/* „Mach mit“ (Ehrenamt), gebaut wie „Neu hier?“; kurze Fassung mit einem Absatz statt Karten */
.jf-mit__text { max-width: 660px; margin: 0 auto 26px; text-align: center; font: 500 17px/1.6 "Montserrat", sans-serif; }
.jf-mit--kurz { padding-bottom: 10px; }

/* Karten wie die Format-Kacheln: farbiger Kopf + dunkles Papier */
.jf-karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.jf-karte { display: flex; flex-direction: column; }
.jf-karte__kopf { background: var(--jf-farbe); color: #F7F7FF; font: 800 28px/1.05 "Montserrat", sans-serif; text-align: center;
  padding: 28px 20px 24px; }
.jf-karte__text { background: #262624; flex: 1; font: 500 16px/26px "Montserrat", sans-serif; padding: 24px 30px 28px; }

/* So war's: Bild + dunkles Textfeld wie die Archiv-Karten, farbige Fläche dahinter */
.jf-sowars__reihe { display: flex; gap: 26px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 18px 6px 26px; scrollbar-width: thin; }
.jf-sowars__karte { flex: 0 0 clamp(230px, 24vw, 270px); scroll-snap-align: start; color: #F7F7FF !important; text-decoration: none !important;
  display: flex; flex-direction: column; border-top: 0 solid var(--jf-farbe); }
.jf-sowars__bildrahmen { display: block; }
.jf-sowars__bild { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; height: auto; }
.jf-sowars__text { background: #262624; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 16px 20px; text-align: center; flex: 1; }
.jf-sowars__datum { font: 500 14px/1 "Montserrat", sans-serif; } .jf-sowars__titel { font: 800 20px/1.1 "Montserrat", sans-serif; }

/* Instagram: wie ein Kalender-Eintrag (farbige Fläche in Pink hinter dunklem Feld) */
.jf-insta__band { border-top: 0 solid #EA5E9D; padding: 0; }
.jf-insta__feld { background: #262624; padding: 34px 40px 36px; }
.jf-insta__titel { font: 800 40px/1.05 "Montserrat", sans-serif; text-transform: uppercase; color: #F7F7FF; margin: 0 0 14px; }
.jf-insta__text { font: 500 16px/26px "Montserrat", sans-serif; margin: 0; max-width: 720px; }
.jf-insta--kontakt { margin-bottom: 40px; }

/* Mitglied werden */
.jf-mitglied { margin: 10px auto 20px; }

/* Typografie einheitlich, nach Mehrheit gemessen (02.11.2026, 10 Seiten, gewichtet nach Textmenge):
   Fließtext Montserrat 500 16/26 · große Überschriften (h1/h2) Montserrat 800 40 px ·
   Zwischenüberschriften (h3) Montserrat 800 28 px. Kopf, Fuß, Logo und Kalender-/Archiv-Einträge bleiben, wie sie sind. */
:root body :is(.elementor-widget-text-editor, .elementor-widget-theme-post-content :is(p, li), .elementor-widget-theme-post-excerpt):not(.e-loop-item *, .elementor-location-header *, .elementor-location-footer *, .elementor-location-header, .elementor-location-footer) {
  font-family: "Montserrat", sans-serif !important; font-weight: 500 !important; font-size: 16px !important; line-height: 26px !important; letter-spacing: normal !important; }
:root body .elementor-widget-text-editor:not(.e-loop-item *, .elementor-location-header *, .elementor-location-footer *) :is(p, li, span, strong) { font-family: inherit !important; font-size: inherit !important; line-height: inherit !important; letter-spacing: inherit !important; }
:root body :is(:is(h1, h2).elementor-heading-title, .page-header .entry-title):not(.e-loop-item *, .elementor-location-header *, .elementor-location-footer *, .jf-karte__kopf *, .jf-karte__unter *) {
  font-family: "Montserrat", sans-serif !important; font-weight: 800 !important; font-size: 40px !important; line-height: 1.05 !important; text-transform: uppercase !important; letter-spacing: normal !important; }
:root body h3.elementor-heading-title:not(.e-loop-item *, .elementor-location-header *, .elementor-location-footer *, .jf-karte__kopf *, .jf-karte__unter *) {
  font-family: "Montserrat", sans-serif !important; font-weight: 800 !important; font-size: 28px !important; line-height: 1.2 !important; text-transform: uppercase !important; }
/* Überschriften immer in Versalien (Vorgabe Matthias, 02.11.2026): alle Elementor-Überschriften und Seitentitel des Themes überall,
   auch Kalender, Archiv, Kopf/Fuß, Karten und eigene Abschnitte. Nicht: Logo, Menü, FAQ-Fragen, Etiketten. */
:root body :is(.elementor-heading-title, .page-header .entry-title, .error404 .page-content :is(h1, h2), .jf-titel, .jf-insta__titel, .jf-karte__kopf, .jf-sowars__titel, .jf-unterzeile, .wpcf7 :is(h1, h2, h3, h4), .elementor-widget-theme-post-content :is(h1, h2, h3, h4), .elementor-widget-text-editor :is(h1, h2, h3, h4)) { text-transform: uppercase !important; }
@media (max-width: 767px) {
  :root body :is(h1, h2).elementor-heading-title:not(.e-loop-item *, .elementor-location-header *, .elementor-location-footer *, .jf-karte__kopf *, .jf-karte__unter *) { font-size: 30px !important; }
  :root body h3.elementor-heading-title:not(.e-loop-item *, .elementor-location-header *, .elementor-location-footer *, .jf-karte__kopf *, .jf-karte__unter *) { font-size: 23px !important; }
}

/* Kopfzeile Variante B (03.11.2026): ruhigeres Menü (Bold 15 px, Versalien), „Mitglied werden“ als gelber Knopf
   rechts (HTML-Widget f1a0400, Menüpunkt 3596 dafür auf dem Desktop ausgeblendet, im Aufklapp-Menü bleibt er),
   Kopfzeile 84 px statt 108 px. Logo-Größen stehen in jumuwi-logo/logo.css. */
.elementor-51 .elementor-element-c493964 { --min-height: 0px !important; min-height: 0 !important; padding-top: 14px !important; padding-bottom: 14px !important; align-items: center !important; }
.elementor-51 .elementor-element-cd9989d { align-items: center !important; }
/* Logo und rechte Gruppe nicht am Bildschirmrand, sondern im Raster der Seite (1120 px wie der Inhalt) */
@media (min-width: 1025px) { .elementor-51 .elementor-element-cd9989d { --width: 100% !important; padding-left: max(60px, calc((100vw - 1120px) / 2)) !important; padding-right: max(60px, calc((100vw - 1120px) / 2)) !important; } }
.elementor-51 .elementor-element-cd9989d > .e-con, .elementor-51 .elementor-element-cd9989d > .e-con-inner > .e-con { justify-content: center !important; }
.elementor-51 .elementor-nav-menu--main .elementor-item { font: 700 15px/1.2 "Montserrat", sans-serif !important; letter-spacing: .08em !important; text-transform: uppercase !important; }
.elementor-51 .elementor-nav-menu--main .elementor-nav-menu { gap: 30px; }
.elementor-51 .elementor-nav-menu--main .elementor-nav-menu > li > a { margin: 0 !important; }
.elementor-51 .elementor-nav-menu--main .menu-item-3596 { display: none !important; }
.elementor-51 .elementor-element-2aa8f32 { --width: auto !important; width: auto !important; flex-direction: row !important; align-items: center !important; justify-content: flex-end !important; gap: 20px !important; flex-wrap: nowrap !important; }
.elementor-51 .elementor-element-3347ef4 { --icon-size: 22px; width: auto !important; }
/* drei Bereiche flexibel: Logo und rechte Spalte so breit wie nötig, das Menü nimmt den Rest (vorher fest 70vw) */
.elementor-51 .elementor-element-f82c73b { --width: auto !important; width: auto !important; flex: 0 0 auto !important; }
.elementor-51 .elementor-element-ae4a471 { --width: auto !important; width: auto !important; flex: 1 1 auto !important; min-width: 0; }
.elementor-51 .elementor-element-2aa8f32 { flex: 0 0 auto !important; }
.jf-cta-widget { width: auto !important; }
.jf-cta { display: inline-block; white-space: nowrap; background: #FFCE00; color: #1B1D1F !important; text-decoration: none !important; font: 700 14px/1 "Montserrat", sans-serif; padding: 12px 18px; border-radius: 27px; box-shadow: 0 3px 6px rgba(0,0,0,.35); transition: transform .2s ease, background-color .2s ease; will-change: transform; }
.jf-cta:hover, .jf-cta:focus-visible { background: #F7F7FF; transform: rotate(-2deg); }
/* Aufklapp-Menü (Handy/Tablet): dunkles Papier, große Punkte in Versalien, aktiver Punkt gelb,
   „Mitglied werden“ als gelber Knopf am Ende (wie oben auf dem Desktop) */
@media (max-width: 1024px) {
  .elementor-51 .elementor-nav-menu--dropdown { background: #262624 !important; padding: 12px 0 22px !important; }
  .elementor-51 .elementor-nav-menu--dropdown ul.elementor-nav-menu { display: flex !important; flex-direction: column; }
  .elementor-51 .elementor-nav-menu--dropdown .elementor-item { font: 800 22px/1.15 "Montserrat", sans-serif !important; text-transform: uppercase !important; letter-spacing: .02em !important;
    color: #F7F7FF !important; background: transparent !important; padding: 15px 28px !important; justify-content: flex-start !important; border-bottom: 1px solid rgba(247,247,255,.08); }
  .elementor-51 .elementor-nav-menu--dropdown .elementor-item:is(.elementor-item-active, :hover, :focus-visible) { color: #FFCE00 !important; background: transparent !important; }
  .elementor-51 .elementor-nav-menu--dropdown .menu-item-3596 { order: 9; }
  .elementor-51 .elementor-nav-menu--dropdown .menu-item-3596 > a.elementor-item { display: inline-flex !important; width: auto !important; margin: 20px 28px 0; padding: 14px 22px !important;
    background: #FFCE00 !important; color: #1B1D1F !important; border: 0; border-radius: 30px; font-size: 16px !important; box-shadow: 0 3px 6px rgba(0,0,0,.35); }
  .elementor-51 .elementor-nav-menu--dropdown .menu-item-3596 > a.elementor-item:is(:hover, .elementor-item-active) { background: #F7F7FF !important; color: #1B1D1F !important; }
  .elementor-51 .elementor-menu-toggle { font-size: 28px; }
}

@media (max-width: 1024px) {
  .jf-cta-widget { display: none !important; }                                /* Aufklapp-Menü enthält „Mitglied werden“ */
  .elementor-51 .elementor-element-c493964 { padding-top: 10px !important; padding-bottom: 10px !important; }
}
@media (max-width: 767px) {
  .elementor-51 .elementor-element-3347ef4 { display: none !important; }       /* Instagram steht im Fuß, oben nur Logo + Menü */
}

/* Handy entschlackt (03.11.2026): weniger Höhe, weniger gleichzeitige Reize. Nur ≤ 767 px. */
@media (max-width: 767px) {
  /* große Überschriften etwas kleiner, damit lange Wörter seltener getrennt werden müssen */
  :root:root body :is(:is(h1, h2).elementor-heading-title, .page-header .entry-title):not(.e-loop-item *, .elementor-location-header *, .elementor-location-footer *, .jf-karte__kopf *, .jf-karte__unter *) { font-size: 27px !important; }
  /* Kopfzeile flacher */
  .elementor-51 .elementor-element-c493964 { padding-top: 8px !important; padding-bottom: 8px !important; }
  .elementor-51 .elementor-element-cd9989d { padding-bottom: 0 !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; min-height: 0 !important; }
  /* Startseite, Einstieg: ohne Collage, Text kürzer gesetzt */
  .elementor-element-8eb2e48 { display: none !important; }
  .elementor-element-f6a4b83 { padding-top: 18px !important; }
  .elementor-element-e39e011 { padding: 22px 20px 24px !important; }
  /* Einstieg: Text auf drei Zeilen gekürzt (vollständig über „Mehr erfahren“) */
  :root:root body .elementor-element-240b1c5 { font-size: 14px !important; line-height: 22px !important; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  /* Filter in einer wischbaren Zeile statt mehrerer Reihen */
  .elementor-element-9f487d2 .e-filter { flex-wrap: nowrap !important; overflow-x: auto; justify-content: flex-start !important; gap: 8px !important; padding: 4px 2px 10px; scrollbar-width: none; }
  .elementor-element-9f487d2 .e-filter::-webkit-scrollbar { display: none; }
  .elementor-element-9f487d2 .e-filter-item { flex: 0 0 auto; font-size: 13px !important; padding: 10px 14px !important; }
  /* Kalender auf dem Handy (03.11.2026, ruhiger): oben die Daten als zwei kleine Etiketten in einer Zeile
     („06 Februar bis 22 November“), darunter die Karte mit Titel, Etiketten und Kurztext. Keine gekippte Farbfläche
     dahinter, keine schiefe Zeile; die Kategoriefarbe steckt in den Datums-Etiketten und im Streifen links an der Karte.
     Schatten über die Zeile (filter), weil die Maske box-shadow abschneidet. */
  .e-loop-item .elementor-element-0f37807 { display: grid !important; grid-template-columns: auto auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; row-gap: 0; align-items: center; transform: none !important; filter: none !important; }
  .e-loop-item .elementor-element-0f37807::before { display: none !important; }
  .e-loop-item .elementor-element-dc3dc22 { grid-column: 1; grid-row: 1; --width: auto !important; width: auto !important; position: relative; z-index: 2; margin-bottom: -8px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.45)); }
  .e-loop-item .elementor-element-c049afb { grid-column: 2; grid-row: 1; --width: auto !important; width: auto !important; position: relative; z-index: 2; margin-bottom: -8px;
    display: flex !important; --flex-direction: row !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; gap: 8px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.45)); }
  .e-loop-item :is(.elementor-element-eb6d187, .elementor-element-9088436) { --width: auto !important; width: auto !important; flex: 0 0 auto !important; }
  .e-loop-item .elementor-element-c049afb::before { content: "bis" !important; position: static !important; display: block !important; width: auto !important; height: auto !important; inset: auto !important;
    background: none !important; opacity: 1 !important; mix-blend-mode: normal !important; font: 600 12px/1 "Montserrat", sans-serif; color: rgba(247,247,255,.75); }
  .e-loop-item .elementor-element-83745e4 { grid-column: 1 / -1; grid-row: 2; --width: 100% !important; width: 100% !important; transform: none !important;
    box-shadow: inset 5px 0 0 var(--jf-band, #B87EE3); padding: 20px 0 14px !important; }
  .e-loop-item .elementor-element-7207118 { display: none !important; }
  /* Datums-Etiketten: Zahl und Monat nebeneinander, gerissene Kanten wie überall, leicht schräg aufgeklebt */
  /* Risskanten (paper.js, auf dem Handy flacher) und Lade-Animation (jf-zettel-auf) bleiben; Innenabstand größer als die Kante tief ist */
  :root:root body .e-loop-item :is(.elementor-element-eb6d187, .elementor-element-9088436) { padding: 12px 13px 11px !important; min-height: 0 !important;
    display: flex !important; --flex-direction: row !important; flex-direction: row !important; align-items: center !important; gap: 5px; }
  .e-loop-item .elementor-element-eb6d187 { transform: rotate(-2deg) !important; }
  .e-loop-item .elementor-element-9088436 { transform: rotate(1.5deg) !important; }
  .e-loop-item :is(.elementor-element-be78b11, .elementor-element-605db84, .elementor-element-9be77f9, .elementor-element-78acc8e) { padding: 0 !important; min-height: 0 !important; width: auto !important; --width: auto !important; justify-content: center !important; }
  .e-loop-item :is(.elementor-element-fa38675, .elementor-element-97f2993, .elementor-element-d6f2029, .elementor-element-67dfaf1) :is(p, .elementor-widget-container) { margin: 0 !important; line-height: 1 !important; }
  /* Karte ohne Mindesthöhen und ohne verteilte Ausrichtung: Inhalt steht oben, keine Leerfläche */
  .e-loop-item :is(.elementor-element-83745e4, .elementor-element-d90f845, .elementor-element-066b6eb, .elementor-element-a8a5d4e, .elementor-element-1e001f0) { --min-height: 0px !important; min-height: 0 !important; justify-content: flex-start !important; }
  .e-loop-item :is(.elementor-element-1e001f0, .elementor-element-a8a5d4e) { margin-bottom: 0 !important; }   /* Elementor: 50 px bzw. 10 px */
  .e-loop-item .elementor-element-066b6eb { margin-bottom: 8px !important; }
  :root:root body .e-loop-item .elementor-element-83745e4 { padding: 20px 0 16px !important; }
  .e-loop-item :is(.elementor-element-fa38675, .elementor-element-97f2993) { font-size: 18px !important; line-height: 1 !important; }
  .e-loop-item :is(.elementor-element-d6f2029, .elementor-element-67dfaf1) { font-size: 12px !important; line-height: 1 !important; }
  .e-loop-item .elementor-element-3eb5992 .elementor-heading-title { font-size: 20px !important; line-height: 1.15 !important; hyphens: manual !important; }
  .e-loop-item .elementor-element-d90f845 { padding: 0 16px 0 20px !important; gap: 8px; }
  .e-loop-item .elementor-element-80150f7 { font-size: 13px !important; line-height: 20px !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .e-loop-item .jf-tag { font-size: 12px; gap: 5px; }
  .e-loop-item .jf-tag::before { width: 13px; height: 13px; }
  .e-loop-item .jf-tags { gap: 4px 12px; }
  .e-loop-item .jf-tags { margin-top: 6px; }
  /* „Neu hier?“ und Vorteile: kompaktere Karten */
  .jf-karte__kopf { font-size: 20px !important; padding: 16px 14px 14px !important; }
  :root:root body .jf-karte__text, :root:root body .jf-karte__text .elementor-widget-text-editor { font-size: 14px !important; line-height: 22px !important; }
  .jf-karte__text { padding: 14px 16px 16px !important; }
  .jf-karten { gap: 14px !important; }
  .jf-block .jf-knoepfe { margin-top: 16px; gap: 10px; }
  /* Archiv: zwei Karten nebeneinander statt 30 untereinander */
  .elementor-element-c2d6cef .elementor-loop-container { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 22px 12px !important; }
  .elementor-element-c2d6cef .elementor-element-3c267bc .elementor-heading-title { font-size: 14px !important; line-height: 1.15 !important; hyphens: manual !important; overflow-wrap: anywhere; }
  .elementor-element-c2d6cef .elementor-element-1539524 { font-size: 11px !important; }
  .elementor-element-c2d6cef .elementor-element-b2a1cd1 { padding: 8px 8px 10px !important; }
  /* Über uns: Team-Karten zu zweit */
  .team-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; }
  .team-grid .team-grid-card { width: auto !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; flex: none !important; }
  .team-grid .team-grid-card :is(.team-grid-card__flipper, .team-grid-card__front, .team-grid-card__back, img) { width: 100% !important; max-width: 100% !important; min-width: 0 !important; }
  /* Karte so hoch wie ihr Inhalt (vorher feste 280 px: ab ~400 px Breite lag „Leitungsteam“ auf der Risskante).
     Vorderseite im Fluss, Rückseite liegt darüber und dreht sich wie gehabt. */
  .team-grid .team-grid-card, .team-grid .team-grid-card__flipper { height: auto !important; min-height: 0 !important; aspect-ratio: auto !important; }
  .team-grid .team-grid-card__front { position: relative !important; height: auto !important; }
  .team-grid .team-grid-card__back { position: absolute !important; inset: 0 !important; height: auto !important; }
  .team-grid .team-grid-card__front img { aspect-ratio: 1 / 1; height: auto !important; object-fit: cover; display: block; }
  .team-grid .team-grid-card__info { padding: 14px 10px 22px !important; }


  /* Formate („Unsere Veranstaltungen“): wischbarer Streifen statt sieben Kacheln untereinander */
  :is(.elementor-element-201255b, .elementor-element-c3ea804) > .e-con-inner,
  :is(.elementor-element-201255b, .elementor-element-c3ea804) { flex-direction: row !important; flex-wrap: nowrap !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px !important; padding-bottom: 10px; scrollbar-width: none; }
  :is(.elementor-element-201255b, .elementor-element-c3ea804) > .e-con-inner > .e-con,
  :is(.elementor-element-201255b, .elementor-element-c3ea804) > .e-con { flex: 0 0 78% !important; --width: 78% !important; width: 78% !important; scroll-snap-align: start; }
  :is(.elementor-element-6d81ab7, .elementor-element-2e55dc6, .elementor-element-da86a0b, .elementor-element-f434e55, .elementor-element-3d0b976, .elementor-element-8019bef, .elementor-element-2ecc102) { --min-height: 150px !important; min-height: 150px !important; }
  :is(.elementor-element-ddc1937, .elementor-element-8619899, .elementor-element-7583469, .elementor-element-4cc52ab, .elementor-element-d61c8ee, .elementor-element-ddaef6d, .elementor-element-78fb9ad) { padding: 16px 18px !important; }
  :root:root body :is(.elementor-element-ddc1937, .elementor-element-8619899, .elementor-element-7583469, .elementor-element-4cc52ab, .elementor-element-d61c8ee, .elementor-element-ddaef6d, .elementor-element-78fb9ad) .elementor-widget-text-editor { font-size: 13px !important; line-height: 20px !important; }
}

/* Responsiv (03.11.2026, Test 44 Seiten × 6 Breiten): Sicherheitsnetz gegen seitliches Scrollen der ganzen Seite
   (wischbare Streifen haben ihr eigenes overflow); Freunde-Logo ohne 1,2-fach-Effekt auf schmalen Bildschirmen. */
html { overflow-x: clip; }
@media (max-width: 1024px) {
  :is(.elementor-element-d17dc9b, .elementor-element-be68a07) > .elementor-widget-container { transform: none !important; }
}
/* Format-Kacheln: Titel wachsen mit der Breite, damit lange Namen (WORKSHOPS, EMPFEHLUNGEN) in die Kachel passen */
@media (min-width: 768px) {   /* Kacheln sind höchstens ~265 px breit, auch auf großen Bildschirmen */
  :root:root body :is(.elementor-element-ef39890, .elementor-element-6743ecb, .elementor-element-e1fb100, .elementor-element-e49426a, .elementor-element-9b840dd, .elementor-element-315b386, .elementor-element-3eb0314) .elementor-heading-title { font-size: clamp(20px, 2vw, 30px) !important; }
}
/* Fußzeile: Spaltentitel auf schmalen Bildschirmen kleiner, damit „Weitere Plattformen“ in die Spalte passt */
@media (max-width: 1024px) { .elementor-251 .elementor-heading-title { font-size: 19px !important; overflow-wrap: break-word; } }
/* Tablet (768–1024 px): Filter nebeneinander statt untereinander, Kalender-Titel kleiner */
@media (min-width: 768px) and (max-width: 1024px) {
  .elementor-element-9f487d2 > .elementor-widget-container { padding-left: 0 !important; padding-right: 0 !important; }   /* Elementor: 220 px Innenabstand je Seite */
  .elementor-element-9f487d2 .e-filter { width: 100% !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: center !important; gap: 10px !important; }
  .e-loop-item .elementor-element-3eb5992 .elementor-heading-title { font-size: 28px !important; line-height: 1.1 !important; hyphens: manual !important; }
}

/* Hover ohne Stocken: Der Browser legt beim ersten Hover sonst erst eine eigene Ebene für Größe/Helligkeit an
   (Filter-Knöpfe: scale + brightness, „Mehr erfahren“: grow, eigene Knöpfe: rotate + brightness).
   Ebenen und Filter vorab anlegen und nur die bewegten Eigenschaften überblenden. */
.e-filter [data-filter], .e-filter-item, .elementor-button, .jf-knopf { will-change: transform, filter; backface-visibility: hidden; filter: brightness(100%); }
.e-filter [data-filter], .e-filter-item { transition: transform .25s ease, filter .25s ease, background-color .25s ease, color .25s ease !important; }
.jf-knopf, .elementor-button { transition: transform .2s ease, background-color .2s ease, color .2s ease !important; }
/* Schmales Fenster MIT Maus (echte Handys fallen nicht darunter): dort tauschen Titel und Infotext beim
   Hover die Position im selben Rasterfeld, der Infotext rutscht also an die Stelle unter dem Störer.
   Nur in diesem Fall weicht er ebenfalls aus; am Handy steht er tiefer und behält die volle Breite. */
@media (hover: hover) and (pointer: fine) and (max-width: 767px) {
  .e-loop-item .elementor-element-83745e4:has(.jf-stoerer) .elementor-element-1e001f0 { padding-right: 100px !important; }
}

@media (hover: hover) and (pointer: fine) {
  .e-loop-item .elementor-element-83745e4 { will-change: translate; }
  .e-loop-item :is(.elementor-element-eb6d187, .elementor-element-9088436) { will-change: scale; }
  .e-loop-item .elementor-element-d90f845 > :is(.elementor-element-066b6eb, .elementor-element-1e001f0) { will-change: transform, opacity; }
}

/* Über uns (Seite 91): mit Elementor gebaut, Klassen jf-u-* und jf-karte* (Karten wie die Format-Kacheln) */
.jf-f-1 { --jf-farbe: #FA780A; } .jf-f-2 { --jf-farbe: #97CC2C; } .jf-f-3 { --jf-farbe: #B87EE3; } .jf-f-4 { --jf-farbe: #0A8CFA; }
.e-con.jf-karte { gap: 0 !important; --gap: 0px; }
.elementor-widget.jf-karte__kopf { background: var(--jf-farbe); padding: 26px 18px 22px; margin: 0 !important; }
.jf-karte__kopf .elementor-heading-title { font: 800 28px/1.05 "Montserrat", sans-serif !important; color: #F7F7FF !important; text-align: center; text-transform: uppercase; }
.e-con.jf-karte__text { background: #262624; padding: 24px 26px 28px !important; gap: 10px; flex: 1 1 auto; justify-content: flex-start; }
.e-con.jf-karte__text .elementor-widget-text-editor, .e-con.jf-karte__text p { color: #F7F7FF; margin: 0; }
.jf-karte__unter .elementor-heading-title { font: 800 19px/1.15 "Montserrat", sans-serif !important; color: #FFCE00 !important; text-transform: uppercase; text-align: left; }
.jf-u-intro > .e-con-inner { display: grid !important; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 50px; align-items: center; padding: 50px 20px 30px; }
.jf-u-intro__text { gap: 18px; }
.jf-u-titel .elementor-heading-title { color: #F7F7FF; }
.jf-u-lead p { margin: 0; }
.e-con.jf-u-fakten { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 8px; }
.jf-u-fakten .jf-karte__kopf { padding: 18px 10px 15px; }
.jf-u-fakten .jf-karte__kopf .elementor-heading-title { font-size: 21px !important; }
.jf-u-fakten .e-con.jf-karte__text { padding: 14px 14px 18px !important; }
.jf-u-fakten .e-con.jf-karte__text .elementor-widget-text-editor { font-size: 14px !important; line-height: 22px !important; }
.jf-u-intro__video .elementor-widget-video { width: 100%; }
.jf-u-abschnitt .elementor-heading-title { text-align: center; color: #F7F7FF; }
.jf-u-geschichte > .e-con-inner { padding: 60px 20px 20px; gap: 34px; }
.e-con.jf-u-zeitleiste { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.jf-u-ziel > .e-con-inner { display: grid !important; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 0; align-items: stretch; padding: 50px 20px; }
.jf-u-ziel__bild { --width: 100% !important; width: 100% !important; min-height: 360px; }
.e-con.jf-u-ziel__text { background: #262624; padding: 44px 48px !important; justify-content: center; gap: 16px; }
.jf-u-ziel__text .elementor-heading-title { color: #F7F7FF; text-align: left !important; }
.jf-u-ziel__text p { margin: 0; }
.jf-u-gruendung > .e-con-inner, .jf-u-gruendung { gap: 30px; }
/* „Über die Freunde des Museums“ zurückhaltender (Wunsch Matthias, 13.11.2026): Die gerissene Fläche
   war CI-Gelb und damit der lauteste Block der Seite, obwohl es um den Trägerverein geht und nicht um
   uns. Jetzt das CI-Papier #262624 als Fläche und der CI-Grundton #1B1D1F für den Kasten darauf – beides
   Farben aus der CI, nur eben ohne Buntton. Dazu ein kleinerer Titel und ein etwas gedämpfter Fließtext.
   Einziger farbiger Akzent bleibt das gelbe Logo der Freunde. Die Flächenfarbe steht als border-top,
   weil paper.js sie von dort nimmt. */
.jf-u-freunde > .e-con-inner { border-top: 0 solid #262624; }   /* Farbe der Fläche dahinter, im Raster */
:root body .jf-u-freunde .elementor-element-0f025db { background-color: #1B1D1F !important; }
:root body .jf-u-freunde .elementor-element-dd16720 .elementor-heading-title { font-size: 28px !important; }
.jf-u-freunde .elementor-element-d5f0d20 { color: #C9CAD0; }
@media (max-width: 1024px) {
  .jf-u-intro > .e-con-inner, .jf-u-ziel > .e-con-inner { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .e-con.jf-u-zeitleiste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .jf-u-intro > .e-con-inner { padding: 30px 14px 10px; }
  .e-con.jf-u-fakten, .e-con.jf-u-zeitleiste { grid-template-columns: minmax(0, 1fr); }
  .jf-u-ziel > .e-con-inner { padding: 30px 14px; }
  .e-con.jf-u-ziel__text { padding: 28px 22px !important; }
  .jf-u-ziel__bild { min-height: 280px; }
}

/* Über uns: „Unser Ziel“ kompakt und Zeitstrahl (jf-zs). Mittellinie mit Punkten in CI-Farben,
   Stationen abwechselnd links und rechts; auf dem Handy Linie links, alle Stationen rechts davon. */
.jf-u-ziel--kompakt > .e-con-inner { grid-template-columns: minmax(0, 300px) minmax(0, 1fr) !important; padding: 30px 20px !important; }
.jf-u-ziel--kompakt .jf-u-ziel__bild { min-height: 320px !important; }
/* Collage-Container aus dem alten Layout hatte 1005 px Mindesthöhe: aufheben, Bild füllt die Fläche */
.jf-u-ziel--kompakt .elementor-element-bfeee68 { --min-height: 0px !important; min-height: 100% !important; height: 100%; background-size: cover !important; background-position: center top !important; }
/* Mitglied werden, „Das erwartet dich“: Collage füllt den grünen Kasten, keine leere Fläche darüber */
.jf-m-erwartet .jf-u-ziel__bild { align-items: stretch !important; justify-content: stretch !important; padding: 26px 20px 0 !important; min-height: 380px !important; }
.jf-m-erwartet .jf-u-ziel__bild .elementor-widget-image, .jf-m-erwartet .jf-u-ziel__bild .elementor-widget-image > .elementor-widget-container { flex: 1 1 auto; height: 100%; width: 100%; }
.jf-m-erwartet .jf-u-ziel__bild img { width: 100% !important; height: 100% !important; max-height: none !important; object-fit: contain; object-position: center bottom; display: block; }   /* freigestellte Collage (Sebi) steht unten auf dem Papier */
.jf-u-ziel--kompakt .e-con.jf-u-ziel__text { padding: 34px 40px !important; }
.jf-u-geschichte > .e-con-inner { padding: 40px 20px 30px !important; gap: 30px !important; }
.e-con.jf-zs { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 70px; row-gap: 0; position: relative; padding: 10px 0 !important; }
.e-con.jf-zs::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; margin-left: -2px; background: #F7F7FF; opacity: .25; border-radius: 2px; }
.e-con.jf-zs__station { position: relative; padding: 0 !important; }
.e-con.jf-zs__station { margin-bottom: 26px; align-self: start; }
.e-con.jf-zs__station:nth-child(odd) { grid-column: 1; }
.e-con.jf-zs__station:nth-child(even) { grid-column: 2; }
/* versetzt: jede Station belegt zwei Rasterzeilen, die nächste beginnt eine Zeile tiefer (keine Überlappung) */
.e-con.jf-zs__station:nth-child(1) { grid-row: 1 / span 2; }
.e-con.jf-zs__station:nth-child(2) { grid-row: 2 / span 2; }
.e-con.jf-zs__station:nth-child(3) { grid-row: 3 / span 2; }
.e-con.jf-zs__station:nth-child(4) { grid-row: 4 / span 2; }
.e-con.jf-zs__station:nth-child(5) { grid-row: 5 / span 2; }
.e-con.jf-zs__station:nth-child(6) { grid-row: 6 / span 2; }
.e-con.jf-zs__station:nth-child(7) { grid-row: 7 / span 2; }
.e-con.jf-zs__station:nth-child(8) { grid-row: 8 / span 2; }
.e-con.jf-zs__station::before { content: "" !important; display: block !important; position: absolute !important; width: 22px !important; height: 22px !important; background: var(--jf-farbe) !important; border: 4px solid #1B1D1F; border-radius: 50%; z-index: 2; opacity: 1 !important; mix-blend-mode: normal !important; }   /* Elementor nutzt ::before sonst für Hintergründe */
.e-con.jf-zs__station:nth-child(odd)::before { inset: 26px -48px auto auto !important; }
.e-con.jf-zs__station:nth-child(even)::before { inset: 26px auto auto -48px !important; }
.e-con.jf-zs__karte { background: #262624; padding: 0 0 22px !important; gap: 6px; }
.jf-zs__bild img { display: block; width: 100%; height: 170px; object-fit: cover; }
.jf-zs__karte > .elementor-element:not(.jf-zs__bild) { padding: 0 24px; }
.jf-zs__karte > .jf-zs__datum { padding-top: 18px !important; }
.jf-zs__datum .elementor-heading-title { font: 800 15px/1.2 "Montserrat", sans-serif !important; color: var(--jf-farbe) !important; letter-spacing: .06em; }
.jf-zs__titel .elementor-heading-title { font-size: 24px !important; }
.jf-zs__text p { margin: 0; }
.jf-u-freunde > .e-con-inner { padding-top: 30px !important; padding-bottom: 50px !important; }
@media (max-width: 767px) {
  .jf-u-ziel--kompakt > .e-con-inner { grid-template-columns: minmax(0, 1fr) !important; }
  .jf-u-ziel--kompakt .jf-u-ziel__bild { min-height: 240px !important; }
  .e-con.jf-zs { grid-template-columns: minmax(0, 1fr); row-gap: 26px; padding-left: 34px !important; }
  .e-con.jf-zs::before { left: 11px; }
  .e-con.jf-zs__station:nth-child(n) { grid-column: 1; grid-row: auto; margin: 0; }
  .e-con.jf-zs__station:nth-child(n)::before { inset: 22px auto auto -34px !important; }
  .jf-zs__bild img { height: 150px; }
}

/* Mitglied werden (Seite 3563), Klassen jf-m-* */
.jf-m-hero > .e-con-inner { display: grid !important; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 50px; align-items: center; padding: 50px 20px 40px; }
.jf-m-hero__text { gap: 20px; }
.jf-m-hero__text > .elementor-element { order: 0 !important; align-self: stretch; }   /* alte Reihenfolge-Einstellungen aus dem früheren Block aufheben */
.jf-m-titel .elementor-heading-title, .jf-m-hero__text .elementor-widget-text-editor { text-align: left !important; }
.jf-m-hero__bild { border-top: 0 solid #FFCE00; padding: 26px 20px 0 !important; }
.jf-m-hero__bild img { display: block; width: 100%; max-height: 520px; object-fit: contain; object-position: bottom; }
.jf-m-vorteile > .e-con-inner { padding: 30px 20px; gap: 30px; }
.jf-liste { list-style: none; margin: 12px 0; padding: 0; }
.jf-liste li { position: relative; padding-left: 22px; margin: 6px 0; }
.jf-liste li::before { content: ""; position: absolute; left: 0; top: 9px; width: 10px; height: 10px; background: #FFCE00; transform: rotate(12deg); }
.jf-m-faq > .e-con-inner, .jf-m-faq { gap: 24px; }
.jf-m-faq .e-n-accordion-item { background: #262624; margin: 0 0 14px; border: 0 !important; }
.jf-m-faq .e-n-accordion-item-title { padding: 20px 24px !important; border: 0 !important; background: transparent !important; }
.jf-m-faq .e-n-accordion-item-title-text { font: 800 20px/1.25 "Montserrat", sans-serif !important; color: #F7F7FF !important; }
.jf-m-faq .e-n-accordion-item > [role="region"] { padding: 0 24px 22px; }
.jf-m-antrag > .e-con-inner { display: grid !important; grid-template-columns: minmax(0, 1.5fr) minmax(0, .7fr); gap: 40px; align-items: start; padding: 40px 20px 60px; }
.jf-m-antrag__form { gap: 18px; }
.jf-m-antrag__seite { position: sticky; top: 110px; gap: 22px; }
.jf-m-antrag__bild { border-top: 0 solid #EA5E9D; padding: 22px 16px 0 !important; }
.jf-m-antrag__bild img { display: block; width: 100%; max-height: 460px; object-fit: contain; object-position: bottom; }
.jf-m-frage a { color: #FFCE00 !important; }
@media (max-width: 1024px) {
  .jf-m-hero > .e-con-inner, .jf-m-antrag > .e-con-inner { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .jf-m-hero__bild { max-width: 420px; justify-self: center; width: 100%; }
  .jf-m-antrag__seite { position: static; display: none; }
}
@media (max-width: 767px) {
  .jf-m-hero > .e-con-inner { padding: 30px 14px 20px; }
  .jf-m-vorteile > .e-con-inner, .jf-m-antrag > .e-con-inner { padding-left: 14px; padding-right: 14px; }
  .jf-m-faq .e-n-accordion-item-title-text { font-size: 17px !important; }
}

/* Kontakt-Vorschlag (Seite kontakt-vorschlag), Klassen jf-k-* */
.jf-k-hero > .e-con-inner { display: grid !important; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 50px; align-items: center; padding: 50px 20px 30px; }
.jf-k-hero__text { gap: 20px; }
.jf-k-hero__text > .elementor-element { order: 0 !important; }
.jf-k-hero__bild { border-top: 0 solid #0A8CFA; padding: 26px 20px 10px !important; }
.jf-k-hero__bild img { display: block; width: 100%; max-height: 420px; object-fit: contain; }
.jf-k-wege > .e-con-inner { padding: 30px 20px; gap: 30px; }
.e-con.jf-k-karten { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.jf-k-karten .jf-karte__text a { color: #FFCE00 !important; }
.jf-k-unten > .e-con-inner { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; padding: 30px 20px 60px; }
.e-con.jf-k-feld { background: #262624; padding: 32px 36px !important; gap: 12px; }
.jf-k-feld a { color: #FFCE00 !important; }
@media (max-width: 1024px) { .jf-k-hero > .e-con-inner, .jf-k-unten > .e-con-inner { grid-template-columns: minmax(0, 1fr); } .e-con.jf-k-karten { grid-template-columns: minmax(0, 1fr); } .jf-k-hero__bild { max-width: 380px; justify-self: center; width: 100%; } }
@media (max-width: 767px) { .jf-k-hero > .e-con-inner, .jf-k-wege > .e-con-inner, .jf-k-unten > .e-con-inner { padding-left: 14px; padding-right: 14px; } .e-con.jf-k-feld { padding: 26px 22px !important; } }

/* Kalender-Einträge (Loop 2754): Hover – der Titel gleitet nach oben weg, darunter erscheinen
   Kurztext und Etiketten (Zeit, Ort, Kosten …). Titel und Info liegen übereinander im selben Rasterfeld,
   die Fläche ändert dadurch ihre Größe nicht. Nur mit Maus; auf Touch-Geräten steht beides untereinander. */
@media (hover: hover) and (pointer: fine) {
  .e-loop-item .elementor-element-d90f845 { display: grid !important; grid-template: 1fr / minmax(0, 1fr); overflow: hidden; align-items: start; }
  .e-loop-item .elementor-element-d90f845 > :is(.elementor-element-066b6eb, .elementor-element-1e001f0) {
    grid-area: 1 / 1; transition: transform .45s cubic-bezier(.6, 0, .3, 1), opacity .3s ease; }
  .e-loop-item .elementor-element-1e001f0 { opacity: 0; transform: translateY(45%); }
  .e-loop-item .elementor-element-c0b1b49:is(:hover, :focus-visible) .elementor-element-066b6eb { transform: translateY(-115%); opacity: 0; }
  .e-loop-item .elementor-element-c0b1b49:is(:hover, :focus-visible) .elementor-element-1e001f0 { transform: none; opacity: 1; transition-delay: .08s; }
  /* kleiner Ruck: das dunkle Feld hebt sich, die Datums-Zettel wachsen ein wenig */
  .e-loop-item .elementor-element-83745e4 { transition: translate .35s cubic-bezier(.3, 1.4, .5, 1); }
  .e-loop-item .elementor-element-c0b1b49:is(:hover, :focus-visible) .elementor-element-83745e4 { translate: 0 -5px; }
  .e-loop-item :is(.elementor-element-eb6d187, .elementor-element-9088436) { transition: scale .35s cubic-bezier(.3, 1.6, .5, 1); }
  .e-loop-item .elementor-element-c0b1b49:is(:hover, :focus-visible) :is(.elementor-element-eb6d187, .elementor-element-9088436) { scale: 1.06; }
}

/* Kalender-Einträge: Aufbau beim Laden – farbige Fläche reißt von links auf, dann das dunkle Feld,
   dann landen die Datums-Zettel wie Stempel. Reihenfolge über --jf-i (jf-extras-Skript), nur wenn
   der Eintrag ins Bild kommt. Mit translate/scale statt transform, damit die Neigung aus paper.js bleibt. */
@keyframes jf-band-auf { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes jf-feld-auf { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }
@keyframes jf-zettel-auf { 0% { opacity: 0; scale: 1.25; } 60% { opacity: 1; scale: .95; } 100% { opacity: 1; scale: 1; } }
.jf-anim .e-loop-item .elementor-element-0f37807:not(.jf-da)::before { clip-path: inset(0 100% 0 0); }
.jf-anim .e-loop-item .elementor-element-0f37807:not(.jf-da) :is(.elementor-element-83745e4, .elementor-element-eb6d187, .elementor-element-9088436) { opacity: 0; }
.jf-anim .e-loop-item .elementor-element-0f37807.jf-da::before { animation: jf-band-auf .55s cubic-bezier(.6, 0, .3, 1) both; animation-delay: calc(var(--jf-i, 0) * 140ms); }
.jf-anim .e-loop-item .elementor-element-0f37807.jf-da .elementor-element-83745e4 { animation: jf-feld-auf .5s cubic-bezier(.3, 1.2, .5, 1) both; animation-delay: calc(var(--jf-i, 0) * 140ms + 180ms); }
.jf-anim .e-loop-item .elementor-element-0f37807.jf-da .elementor-element-eb6d187 { animation: jf-zettel-auf .45s ease-out both; animation-delay: calc(var(--jf-i, 0) * 140ms + 330ms); }
.jf-anim .e-loop-item .elementor-element-0f37807.jf-da .elementor-element-9088436 { animation: jf-zettel-auf .45s ease-out both; animation-delay: calc(var(--jf-i, 0) * 140ms + 420ms); }
@media (prefers-reduced-motion: reduce) {
  .jf-anim .e-loop-item .elementor-element-0f37807 :is(*), .jf-anim .e-loop-item .elementor-element-0f37807::before { animation: none !important; opacity: 1 !important; clip-path: none !important; }
}

/* Event-Seite (Vorlage 448, 03.11.2026): Kopf wie ein Kalender-Eintrag (Fläche in der Kategoriefarbe, Titelbild
   und dunkles Feld mit Risskanten), darunter Text und „Auf einen Blick“ nebeneinander, dann „Was als Nächstes kommt“. */
:root:root body .jf-ev-seite { padding: 70px max(24px, calc((100vw - 1120px) / 2)) 30px !important; gap: 80px !important; }
.jf-ev-seite > .elementor-element { width: 100% !important; max-width: 100% !important; }
.jf-ev__kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; border-top: 0 solid var(--jf-farbe); }
.jf-ev__kopf--ohne-bild { grid-template-columns: minmax(0, 1fr); }
.jf-ev__bild { position: relative; z-index: 1; margin: 26px -34px 26px 18px; }
.jf-ev__img { display: block; width: 100%; height: auto !important; aspect-ratio: 4 / 3; object-fit: cover; }
.jf-ev__feld { position: relative; z-index: 2; background: #262624; padding: 42px 46px 40px; }
.jf-ev__kopf .jf-bonus { margin: 0 0 4px 10px; vertical-align: middle; font-size: 13px; }
.jf-ev__format { display: inline-block; background: var(--jf-farbe); color: var(--jf-schrift); font: 800 13px/1 "Montserrat", sans-serif;
  text-transform: uppercase; letter-spacing: .06em; padding: 8px 14px; border-radius: 40px; }
:root:root body .jf-ev__titel { font: 800 clamp(30px, 3.3vw, 44px)/1.06 "Montserrat", sans-serif; text-transform: uppercase; color: #F7F7FF;
  margin: 18px 0 24px; text-align: left; overflow-wrap: break-word; hyphens: manual; }
.jf-ev__daten { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin: 0 0 22px; }
.jf-ev__zettel { display: inline-flex; align-items: center; gap: 9px; background: var(--jf-farbe); color: var(--jf-schrift); padding: 11px 16px 10px; }
.jf-ev__tag { font: 800 34px/1 "Montserrat", sans-serif; }
.jf-ev__monat { display: flex; flex-direction: column; font: 700 15px/1.15 "Montserrat", sans-serif; }
.jf-ev__jahr { font-weight: 500; font-size: 13px; opacity: .85; }
.jf-ev__bis { font: 700 14px/1 "Montserrat", sans-serif; color: #A9AAB0; }
.jf-ev__feld .jf-tags { margin: 0 0 24px; }
.jf-ev__feld .jf-knoepfe { margin: 0; }
:root:root body .jf-ev-haupt { display: grid !important; grid-template-columns: minmax(0, 1fr) 330px; gap: 60px; align-items: start; }
.jf-ev-haupt > .elementor-element { width: auto !important; max-width: none !important; }
.jf-ev-haupt > .elementor-widget-shortcode { position: sticky; top: 110px; }
.jf-ev-haupt .jf-blick { margin: 0; }
.jf-ev-haupt .jf-blick__liste div { grid-template-columns: minmax(0, 1fr); gap: 0; }
.jf-ev__text { max-width: 720px; }
.jf-ev__text .elementor-widget-container > :first-child { margin-top: 0; }
.jf-ev__text :is(p, li) { font: 500 17px/1.65 "Montserrat", sans-serif; }
.jf-ev__text figure { margin: 34px 0; }
.jf-ev__text .wp-block-image img { height: auto; }
.jf-ev__mehr { margin: 0; }
.jf-sowars__bild--leer { background: var(--jf-farbe, #69727D); }
@media (max-width: 1024px) {
  .jf-ev__kopf { grid-template-columns: minmax(0, 1fr); }
  .jf-ev__bild { margin: 18px 18px -18px; }
  :root:root body .jf-ev-haupt { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .jf-ev-haupt > .elementor-widget-shortcode { position: static; }
}
@media (max-width: 767px) {
  :root:root body .jf-ev-seite { padding: 34px 16px 10px !important; gap: 54px !important; }
  .jf-ev__bild { margin: 12px 10px -12px; }
  .jf-ev__feld { padding: 30px 22px 28px; }
  :root:root body .jf-ev__titel { font-size: 27px; margin: 14px 0 18px; }
  .jf-ev__tag { font-size: 26px; } .jf-ev__monat { font-size: 13px; }
  .jf-ev__text :is(p, li) { font-size: 16px; }
}

/* „Auf einen Blick“ unter Event-Beiträgen: dunkles Papier (Risskanten aus paper.js), Etiketten-Optik */
.jf-blick { background: #262624; padding: 26px 28px 24px; margin: 34px 0 10px; }
:root:root body .jf-blick__titel { font: 800 22px/1.2 "Montserrat", sans-serif; text-transform: uppercase; color: #FFCE00; margin: 0 0 14px; text-align: left; }
.jf-blick__liste { margin: 0; display: grid; gap: 8px; }
.jf-blick__liste div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 12px; }
.jf-blick__liste dt { font: 700 13px/26px "Montserrat", sans-serif; text-transform: uppercase; letter-spacing: .06em; color: #A9AAB0; }
.jf-blick__liste dd { margin: 0; font: 500 16px/26px "Montserrat", sans-serif; color: #F7F7FF; }
.jf-blick__vorbei { margin: 16px 0 0; font: 500 15px/24px "Montserrat", sans-serif; color: #F7F7FF; }
.jf-blick__vorbei a { color: #FFCE00; }
@media (max-width: 767px) { .jf-blick { padding: 22px 20px; } .jf-blick__liste div { grid-template-columns: minmax(0, 1fr); gap: 0; } }

/* Bildunterschriften in Beiträgen: waren #333 auf dunklem Grund */
.wp-element-caption, .wp-caption-text, .widget-image-caption { color: #A9AAB0 !important; }

@media (max-width: 767px) {
  /* 1. Handy: große Überschriften umbrechen statt über den Rand zu laufen */
  .elementor-heading-title, .elementor-widget-text-editor :is(h1, h2, h3, h4), .wpcf7 h3 { overflow-wrap: break-word; hyphens: manual; }
  .elementor-widget-text-editor :is(p, a, li) { overflow-wrap: anywhere; }
  /* Mitgliedsantrag: weniger Rand, damit Spam-Schutz (300 px) und Absenden-Knopf hineinpassen */
  .elementor-element-975518b { padding-left: 12px !important; padding-right: 12px !important; }
  .wpcf7 input, .wpcf7 textarea, .wpcf7 select { max-width: 100%; box-sizing: border-box; }
  .wpcf7 .wpcf7-submit { width: 100% !important; }
  .jf-titel { font-size: 30px; overflow-wrap: break-word; hyphens: manual; }
  .jf-karten { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .jf-mitglied, .jf-vorbei { padding: 0 6px; }
  .jf-insta__feld { padding: 28px 22px 30px; }
  .jf-insta__titel { font-size: 30px; }
  .jf-knopf { padding: 13px 18px; font-size: 15px; }
}


/* „Mach mit“ als Karte im Team-Raster: wie die Personenkarten, aber ohne Bild – nur Text, mittig.
   Sie steht per order am Ende (eingehängt wird sie vorne, siehe jf-extras.php) und dreht sich nicht:
   Die Drehung des Plugins läuft über :hover und wäre am Handy nicht erreichbar. Wichtig ist, dass ihr
   Inhalt kürzer bleibt als eine Personenkarte, sonst zieht sie im Flex-Raster alle anderen mit in die
   Länge; darum knapper Text und keine Mindesthöhe. Die Selektoren sind absichtlich so lang: das
   Team-Plugin setzt seine Werte mit zwei Klassen. */
.team-grid .team-grid-card.team-grid-card--mitmachen { order: 99; }
.team-grid .team-grid-card.team-grid-card--mitmachen:hover { transform: none; }
.team-grid .team-grid-card.team-grid-card--mitmachen:hover .team-grid-card__flipper { transform: none; }
.team-grid .team-grid-card--mitmachen .team-grid-card__front { height: 100%; justify-content: center; }
.team-grid .team-grid-card--mitmachen .team-grid-card__info { gap: 4px; padding: 24px 16px 26px !important; }
.team-grid .team-grid-card--mitmachen .jf-mitk__text { font: 500 13.5px/1.55 "Montserrat", sans-serif !important;
  color: #C9CAD0; margin: 8px 0 14px; letter-spacing: 0; }
.team-grid .team-grid-card--mitmachen .jf-mitk__wege { display: grid; gap: 7px; justify-items: center; }
.team-grid .team-grid-card--mitmachen .jf-mitk__wege .jf-knopf { font-size: 14px; padding: 11px 16px; }
/* Am Handy sind die Karten nur rund 150 px breit: kleinere Schrift und engere Abstände, damit der
   Text nicht die ganze Karte füllt und sie die Personenkarten nicht in die Länge zieht. */
@media (max-width: 767px) {
  .team-grid .team-grid-card--mitmachen .team-grid-card__info { padding: 16px 10px 18px !important; }
  /* Die Karten sind hier nur rund 150 px breit: Der erklärende Satz bräuchte fünf Zeilen und würde
     die Karte höher machen als die der Personen (die zieht das Raster dann alle mit). Name, Aufgabe
     und die beiden Knöpfe sagen das Nötige, der Satz steht ab Tablet-Breite wieder da. */
  .team-grid .team-grid-card--mitmachen .jf-mitk__text { display: none; }
  .team-grid .team-grid-card--mitmachen .jf-mitk__wege { margin-top: 12px; }
  .team-grid .team-grid-card--mitmachen .jf-mitk__wege .jf-knopf { font-size: 12.5px; padding: 9px 11px; }
}