/* ============================================================
   Ergänzungen zur Original-Seite (Stand 01.09.2026)
   Eigene Klassen mit Präfix jub-, damit css/site.css unverändert
   mit dem Webflow-Original abgleichbar bleibt.
   Farben und Schriften kommen aus den :root-Variablen von site.css.
   ============================================================ */

.jub-section {
  width: 100%;
  padding: 80px 5%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.jub-section.hell { background-color: var(--hell); }
.jub-section.grau { background-color: var(--grau); }
.jub-section.weiss { background-color: #fff; }

.jub-inner {
  width: 100%;
  max-width: 1400px;
  display: flex;
  flex-direction: column;
  row-gap: 40px;
}

.jub-head { display: flex; flex-direction: column; row-gap: 16px; max-width: 900px; }

.jub-h2 {
  color: var(--grau);
  font-family: Zbp, Arial, sans-serif;
  font-size: 35px;
  line-height: 1.5em;
  margin: 0;
}
.jub-h2.hell { color: var(--hell); }
.jub-h2.rot { color: var(--rot); }

.jub-lead {
  color: var(--grau);
  font-family: Itcavantgardepro Bk, Arial, sans-serif;
  font-size: 20px;
  line-height: 1.5em;
  margin: 0;
}
.jub-lead.hell { color: var(--hell); }

/* --- Hero: Jubiläumszeile über der Begrüßung --- */
.jub-heroKicker {
  display: block;
  color: #fff;
  font-family: Zbp, Arial, sans-serif;
  font-size: 30px;
  line-height: 1.3em;
  margin-bottom: 10px;
  padding-bottom: 12px;
  border-bottom: 2px solid #ffffff59;
}
@media screen and (max-width: 991px) { .jub-heroKicker { font-size: 24px; } }

/* --- Kurz vorab: ein einzelner Hinweis statt zweier Boxen --- */
.jub-hinweis {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 50px;
  row-gap: 24px;
  flex-wrap: wrap;
  width: 100%;
  background-color: var(--rot);
  padding: 46px 50px;
}
.jub-hinweis__text { display: flex; flex-direction: column; row-gap: 12px; max-width: 760px; }
.jub-hinweis__titel {
  color: var(--hell);
  font-family: Zbp, Arial, sans-serif;
  font-size: 28px;
  line-height: 140%;
  margin: 0;
}
.jub-hinweis__copy {
  color: var(--hell);
  font-family: Itcavantgardepro Bk, Arial, sans-serif;
  font-size: 19px;
  line-height: 1.5em;
  margin: 0;
}
.jub-hinweis__mail {
  flex: 0 0 auto;
  color: #fff;
  font-family: Zbp, Arial, sans-serif;
  font-size: 25px;
  text-decoration: underline;
  text-underline-offset: .18em;
  white-space: nowrap;
}

/* --- Der Abend: gleichrangige Programmpunkte, bewusst ohne Nummern ---
   Vier Karten (seit 11.09.2026 wieder mit der Live-Illustration) stehen auf
   dem Desktop als 2 x 2. Vier in einer Reihe wären bei 1400 px Innenbreite
   nur rund 320 px schmal und die Texte würden sehr lang. */
.jub-programm {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 30px;
  row-gap: 30px;
  width: 100%;
}
.jub-punkt {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  box-shadow: 9px 5px 20px #4853531f;
}
.jub-punkt__bild {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #e3e0d8;
  border-bottom: 2px solid var(--rot);
  color: #8c8377;
  font-family: Itcavantgardepro Bk, Arial, sans-serif;
  font-size: 15px;
  text-align: center;
  padding: 16px;
}
/* Das height-Attribut des <img> würde sonst die Kachelhöhe bestimmen und
   die Karte gegenüber den Platzhaltern verzerren */
img.jub-punkt__bild { display: block; padding: 0; height: auto; }
.jub-punkt__text { display: flex; flex-direction: column; row-gap: 10px; padding: 34px 36px 38px; }
.jub-punkt__titel {
  color: var(--grau);
  font-family: Zbp, Arial, sans-serif;
  font-size: 25px;
  line-height: 140%;
  margin: 0;
}
.jub-punkt__credit {
  color: #8c8377;
  font-family: Itcavantgardepro Bk, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.4em;
}
.jub-punkt__copy {
  color: var(--grau);
  font-family: Itcavantgardepro Bk, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.5em;
  margin: 0;
}

/* --- Spenden statt Geschenke --- */
.jub-spenden {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 20px;
  row-gap: 20px;
  width: 100%;
}
.jub-spende {
  display: flex;
  flex-direction: column;
  row-gap: 12px;
  background-color: var(--hell);
  border-top: 3px solid var(--rot);
  padding: 34px 32px;
  text-decoration: none;
  transition: background-color .2s ease;
}
.jub-spende:hover { background-color: #e3e0d8; }
.jub-spende__name {
  color: var(--grau);
  font-family: Zbp, Arial, sans-serif;
  font-size: 22px;
  line-height: 140%;
}
.jub-spende__text {
  color: var(--grau);
  font-family: Itcavantgardepro Bk, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.5em;
}
.jub-spende__link {
  color: var(--rot);
  font-family: Itcavantgardepro Bk, Arial, sans-serif;
  font-size: 16px;
  text-decoration: underline;
  text-underline-offset: .15em;
  margin-top: auto;
  padding-top: 10px;
}

/* --- Einzelbild über die volle Breite (Anfahrt) --- */
.jub-figure--breit .jub-shot { height: 420px; }

.jub-kicker {
  color: var(--rot);
  font-family: Itcavantgardepro, Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.jub-quote {
  display: flex;
  flex-direction: column;
  row-gap: 18px;
  border-top: 1px solid #48535333;
  padding-top: 34px;
  margin-top: 10px;
}
.jub-quote__text {
  color: var(--grau);
  font-family: Zbp, Arial, sans-serif;
  font-size: 32px;
  line-height: 140%;
  max-width: 30ch;
  margin: 0;
}
.jub-quote__sub {
  color: var(--grau);
  font-family: Itcavantgardepro Bk, Arial, sans-serif;
  font-size: 19px;
  line-height: 1.55em;
  max-width: 62ch;
  margin: 0;
}
@media screen and (max-width: 767px) {
  .jub-quote__text { font-size: 26px; max-width: none; }
  .jub-quote__sub { font-size: 17px; }
}

/* --- Anfahrt: Text neben Karte --- */
.jub-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 40px;
  row-gap: 40px;
  width: 100%;
  align-items: start;
}

.jub-facts { display: flex; flex-direction: column; row-gap: 28px; }
.jub-fact { display: flex; flex-direction: column; row-gap: 6px; }
.jub-fact__label {
  color: var(--rot);
  font-family: Itcavantgardepro, Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.jub-section.grau .jub-fact__label { color: var(--hell-2); }
/* Section-Labels durchgehend rot, auch auf Petrol (Kundenwunsch 09.09.2026) */
.jub-section.grau .jub-kicker { color: var(--rot); }
.jub-fact__text {
  color: var(--grau);
  font-family: Itcavantgardepro Bk, Arial, sans-serif;
  font-size: 18px;
  line-height: 1.5em;
  margin: 0;
}
.jub-section.grau .jub-fact__text { color: var(--hell); }
.jub-fact__text a { color: inherit; text-decoration: underline; }

/* --- Karte mit Zwei-Klick-Lösung (lädt Google erst nach Klick) --- */
.jub-map {
  position: relative;
  width: 100%;
  min-height: 420px;
  background-color: #dcd8d0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.jub-map iframe { width: 100%; height: 100%; min-height: 420px; border: 0; display: block; }
.jub-map__consent {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 16px;
  max-width: 420px;
  padding: 30px;
  text-align: center;
  background-color: #ffffffee;
}
.jub-map__note {
  color: var(--grau);
  font-family: Itcavantgardepro Bk, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5em;
  margin: 0;
}
.jub-btn {
  display: inline-block;
  background-color: var(--rot);
  color: var(--hell);
  font-family: Itcavantgardepro Bk, Arial, sans-serif;
  font-size: 18px;
  padding: 15px 30px;
  border: 0;
  cursor: pointer;
  text-decoration: none;
}
.jub-btn:hover { background-color: var(--dunkelrot); }

/* --- Bildpaar (Eindrücke der Halle) --- */
.jub-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 20px;
  row-gap: 20px;
  width: 100%;
}
.jub-figure { margin: 0; display: flex; flex-direction: column; row-gap: 12px; }
.jub-shot { width: 100%; height: 340px; object-fit: cover; display: block; }
.jub-figure__caption {
  color: var(--hell-2);
  text-align: left;
  font-family: Itcavantgardepro Bk, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5em;
}
.jub-shot--platzhalter {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 340px;
  border: 2px dashed #b7a99a;
  background-color: #ffffff14;
  color: var(--hell-2);
  font-family: Itcavantgardepro Bk, Arial, sans-serif;
  font-size: 16px;
  text-align: center;
  padding: 20px;
}

/* --- Platzhalter, die der Kunde noch füllt --- */
.jub-todo {
  border-left: 3px solid var(--rot);
  padding-left: 14px;
  color: var(--grau);
  font-family: Itcavantgardepro Bk, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.5em;
}
/* Platzhalter auf dunklem Grund */
.jub-section.grau .jub-todo { color: var(--hell); }

/* --- Breakpoints wie im Original --- */
@media screen and (max-width: 991px) {
  .jub-quote__text { max-width: none; }
  .jub-split, .jub-duo { grid-template-columns: 1fr; }
  .jub-h2 { font-size: 30px; }
}
@media screen and (max-width: 767px) {
  .jub-section { padding: 60px 5%; }
  .jub-quote__text { font-size: 21px; }
  .jub-map, .jub-map iframe { min-height: 320px; }
  .jub-punkt__text { padding: 26px 26px 30px; }
  .jub-hinweis { flex-direction: column; align-items: flex-start; }
  .jub-hinweis__mail { font-size: 21px; }
  .jub-shot, .jub-shot--platzhalter { height: 240px; }
}
@media screen and (max-width: 479px) {
  .jub-h2 { font-size: 26px; }
  .jub-lead { font-size: 18px; }
}

/* --- Hero: groesserer Kasten (Original: max 700px, 10/20/20 Innenabstand) --- */
@media screen and (min-width: 992px) {
  .div-block-9803 { width: 100%; max-width: 1200px; padding: 46px 56px 50px; }
  .div-block-9803 .heading { font-size: 56px; line-height: 1.25em; }
  .div-block-9803 .paragraph { font-size: 25px; }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  .div-block-9803 { width: 100%; max-width: 92%; padding: 32px 36px 34px; }
  .div-block-9803 .heading { font-size: 40px; line-height: 1.3em; }
  .div-block-9803 .paragraph { font-size: 21px; }
}

@media screen and (max-width: 767px) {
}

/* --- Hero-Bild: Korrektur zweier Fehler aus dem Webflow-Original ---
   1. site.css setzt ab 1280 px `margin-top: 100px` auf das absolut
      positionierte Hero-Bild. Dadurch ragt das Foto 100 px unter den Hero
      hinaus und legt sich als Kante über die folgende Section.
   2. Zwischen 1280 und 1439 px steht `object-position: 50% 100%`, das Foto
      wird also von unten ausgerichtet und schneidet auf breiten, flachen
      Fenstern die Köpfe ab. 20 % haelt oben etwas Luft und beschneidet
      stattdessen den Boden. */
@media screen and (min-width: 1280px) {
  .image-1206 { margin-top: 0; object-position: 50% 20%; }
}
.section-108 { overflow: hidden; }

/* Adresse in den Eventdetails als Link erkennbar machen
   (site.css setzt auf .link-2 text-decoration: none) */
.link-2 { text-decoration: underline; text-underline-offset: .15em; }

/* --- Einwilligungsbanner für die Google-Karte ---
   Ablehnen und Zustimmen sind bewusst gleich groß und gleich gut erreichbar. */
.jub-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background-color: var(--grau);
  box-shadow: 0 -8px 30px #1a1a1a3d;
}
.jub-consent[hidden] { display: none; }
.jub-consent__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: 40px;
  row-gap: 20px;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 26px 5%;
}
.jub-consent__text { max-width: 820px; }
.jub-consent__copy {
  color: var(--hell);
  font-family: Itcavantgardepro Bk, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5em;
  margin: 0;
}
.jub-consent__copy a { color: var(--hell); text-decoration: underline; }
.jub-consent__buttons { display: flex; column-gap: 12px; row-gap: 12px; flex-wrap: wrap; }
.jub-consent__btn {
  min-width: 170px;
  background-color: #0000;
  color: var(--hell);
  border: 1px solid var(--hell);
  font-family: Itcavantgardepro Bk, Arial, sans-serif;
  font-size: 17px;
  padding: 14px 26px;
  cursor: pointer;
}
.jub-consent__btn:hover { background-color: #ebe9e21f; }
.jub-consent__btn--ja { background-color: var(--rot); border-color: var(--rot); }
.jub-consent__btn--ja:hover { background-color: var(--dunkelrot); border-color: var(--dunkelrot); }

.jub-rechtliches { column-gap: 12px; row-gap: 6px; flex-wrap: wrap; }
.jub-rechtliches a { cursor: pointer; }
.jub-sep { color: #48535359; }

@media screen and (max-width: 767px) {
  .jub-consent__inner { flex-direction: column; align-items: flex-start; padding: 22px 5%; }
  .jub-consent__copy { font-size: 15px; }
  .jub-consent__buttons { width: 100%; }
  .jub-consent__btn { flex: 1 1 0; min-width: 0; }
}

/* ============================================================
   Mobil: zwei weitere Fehler aus dem Webflow-Original
   ============================================================ */

/* 1. Der Textblock unter dem Hero-Foto steht in site.css ab 479 px auf
      #0d4e59 — ein Türkis, das in der ganzen Palette sonst nicht vorkommt.
      Auf dem Desktop ist dieser Block rot, also auch hier. */
@media screen and (max-width: 479px) {
  .div-block-9806 { background-color: var(--rot); padding: 44px 4%; }
  /* Trennstriche entfallen, die Links stehen dann untereinander */
  .jub-sep { display: none; }
  .jub-rechtliches { flex-direction: column; align-items: flex-start; row-gap: 4px; }
}

/* 2. Die Eventdetails bleiben in site.css bis ganz unten zweispaltig. Auf
      390 px ergibt das zwei 155 px schmale Spalten: das Foto wird zu einem
      Streifen, die Überschrift bricht in fünf Zeilen. Ab hier untereinander. */
@media screen and (max-width: 767px) {
  .div-block-9819 { grid-template-columns: 1fr; grid-row-gap: 30px; }
  /* Hochformat 1300x1400 in einem Querformat-Kasten: ohne Positionierung
     schneidet der Zuschnitt mittig und damit durch das Gesicht */
  .image-1207 { height: 320px; object-position: 50% 18%; }
  .div-block-9820 { height: auto; min-height: 0; padding: 0; }
  .section-109 { padding-top: 44px; padding-bottom: 50px; }
}

/* 3. Footer: bleibt in site.css auch auf dem Handy eine Zeile. Das Logo wird
      dabei auf 47 px zusammengequetscht und der Text rechtsbündig umbrochen. */
@media screen and (max-width: 767px) {
  .div-block-9818 { flex-direction: column; align-items: flex-start; row-gap: 22px; }
  .container-9 { width: auto; }
  .footer-brand-2 img { width: 180px; max-width: 180px; height: auto; }
  .div-block-9817 { width: 100%; }
  .footer-copyright, .footer-bottom { justify-content: flex-start; flex-wrap: wrap; text-align: left; }
  .container-9 { margin-left: 0; margin-right: auto; }
  .footer-bottom > .footer-copyright { width: 100%; }

  /* Kartenplatzhalter ohne Leerstreifen ober- und unterhalb */
  .jub-map { min-height: 0; }
}

/* --- Textliche Überarbeitung vom 07.09.2026 --- */

/* Label über der Eventdetails-Überschrift, dort auf dunklem Grund.
   site.css gibt .heading ein margin-top von 20px, das zusammen mit der
   Zeilenhöhe eine 44-px-Lücke ergab. */
.jub-kicker--hell { display: block; color: var(--rot); margin-bottom: 0; }
.div-block-9820 .heading { margin-top: 4px; }

/* Kontaktzeile ist jetzt ein Satz statt zweier Kurzangaben */


/* Kennzahlen: site.css setzt sie über text-transform komplett in Versalien,
   der Kunde möchte korrekte Groß- und Kleinschreibung */
.begeisterung, .vision, .hingabe { text-transform: none; }

/* Footer: die Kontaktaufforderung etwas kräftiger */
.footer-copyright.jub-footerLead {
  font-family: Itcavantgardepro, Arial, sans-serif;
  font-weight: 700;
  font-size: 20px;
}

@media screen and (max-width: 991px) {
  .jub-spenden { grid-template-columns: 1fr; }
  .jub-hinweis { padding: 36px 34px; }
  /* unter 992 px stehen die drei Karten untereinander (Kundenwunsch 10.09.2026);
     diese Regel steht bewusst hinter der 767er-Regel, sonst gewinnt sie in der Kaskade */
  .jub-programm { grid-template-columns: 1fr; }
  .jub-figure--breit .jub-shot { height: 300px; }
}

/* 4. Hero auf dem Handy: Köpfe verschwanden hinter der Kopfzeile.
      Zwei Ursachen: Die Kopfzeile ist fixiert und 111 px hoch, das Foto
      beginnt aber bei y = 0 und liegt darunter. Und das Foto ist bis 479 px
      ein schrumpfendes Flex-Element: je flacher das Fenster, desto kleiner
      der Bildkasten, desto weiter rutschen die Köpfe in den verdeckten
      Bereich. Auf einem 430x700-Fenster war davon nichts mehr zu sehen. */
@media screen and (max-width: 767px) {
  .section-108 { padding-top: 111px; }
}
@media screen and (max-width: 479px) {
  .div-block-9802 { height: auto; min-height: 0; }
  .image-1206 { flex: 0 0 auto; height: auto; aspect-ratio: 3 / 2; }
}

/* --- Mobile-Typografie: eine einzige Größenstaffel ------------------------
   Kundenwunsch 10.09.2026: auf dem Telefon war die Schrift zu groß und jede
   Section brachte ihre eigene Größe mit (35 px Headline hier, 26 px dort,
   Fließtext zwischen 16 und 20 px). Ab hier gilt für alle Blöcke dieselbe
   Staffel:

     24 px  Section-Headline
     20 px  Block- und Kartentitel
     16 px  Fließtext
     13 px  Label über der Headline

   Der Block steht bewusst am Dateiende: er muss die früheren 767er- und
   479er-Regeln überschreiben, und bei gleicher Spezifität gewinnt die
   spätere Regel. */
@media screen and (max-width: 767px) {
  /* Section-Headline */
  .jub-h2,
  .section-109 .heading { font-size: 24px; line-height: 1.3em; }

  /* Block- und Kartentitel */
  .jub-hinweis__titel,
  .jub-punkt__titel,
  .jub-spende__name,
  .begeisterung,
  .vision,
  .hingabe { font-size: 20px; line-height: 1.35em; }

  /* Fließtext */
  .jub-lead,
  .jub-punkt__copy,
  .jub-hinweis__copy,
  .jub-fact__text,
  .jub-quote__sub,
  .jub-spende__text,
  .jub-map__note,
  .jub-figure__caption,
  .jub-todo,
  .paragraph-2,
  .paragraph-2.white,
  .text-span-2,
  .text-span-3,
  .text-span-4,
  .text-span-5,
  .link-2,
  .jub-footerLead,
  .footer-copyright { font-size: 16px; line-height: 1.6em; }

  /* Label */
  .jub-kicker,
  .jub-fact__label,
  .jub-punkt__credit,
  .jub-spende__link { font-size: 13px; }

  /* eine Stufe über dem Fließtext: der fette Schlusssatz und die Mailadresse */
  .jub-quote__text { font-size: 19px; line-height: 1.4em; }
  .jub-hinweis__mail { font-size: 18px; }
  .footer-copyright.jub-footerLead { font-size: 18px; }
  .jub-btn,
  .jub-consent__btn,
  .jub-consent__copy { font-size: 16px; }

  /* Hero in derselben Staffel, nur die H1 eine Stufe darüber */
  .jub-heroKicker { font-size: 17px; margin-bottom: 8px; padding-bottom: 10px; }
  .div-block-9803 .heading { font-size: 30px; line-height: 1.25em; }
  .div-block-9803 .paragraph { font-size: 16px; line-height: 1.55em; }
}

/* --- Hero soll auf dem Telefon ohne Scrollen lesbar sein ------------------
   Kundenwunsch 10.09.2026: der Absatz im roten Kasten wurde vom unteren
   Bildschirmrand abgeschnitten. Auf einem 393 x 852 großen Gerät bleiben in
   Safari nach Abzug der Leisten rund 690 px sichtbar. Mit 111 px Header,
   einem flacheren Foto (16:10) und schlankeren Innenabständen passt der
   komplette Hero in dieses Fenster. */
@media screen and (max-width: 479px) {
  .image-1206 { aspect-ratio: 16 / 10; }
  .div-block-9806 { padding: 32px 5% 34px; }
}

/* --- Ankersprünge nicht hinter der fixierten Navigation landen lassen ---
   Beim Klick in der Navigation rechnet webflow.js die Höhe des <header> ab.
   Für direkte Aufrufe mit Anker in der Adresse (…/#anfahrt) sorgt das hier;
   --jub-kopf setzt js/navigation.js auf die tatsächliche Navigationshöhe. */
section[id] { scroll-margin-top: var(--jub-kopf, 111px); }

/* Logo trägt width/height, damit die Navigation vom ersten Bild an ihre volle
   Höhe hat (vorher lazy geladen und ohne Höhe: 50 px statt 111 px, der
   Direktsprung auf einen Anker landete dann 61 px zu hoch). */
.navbar-brand img { height: auto; }

/* --- Footer auf Tablet-Breiten (Durchsicht 11.09.2026) ---
   1. Die Kontaktzeile bricht dort um, stand dann linksbündig in einer sonst
      rechtsbündigen Spalte und hatte kaum Zeilenabstand.
   2. Die Rechtslinks passen bis rund 1120 px nicht in eine Zeile; der
      Trennstrich blieb am Zeilenende hängen. Bis 1199 px (Puffer für breiter
      laufende Schriften unter Windows) entfallen die Striche, der Abstand trennt. */
@media screen and (min-width: 768px) {
  .footer-copyright.jub-footerLead { text-align: right; line-height: 1.35em; }
}
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .jub-rechtliches .jub-sep { display: none; }
  .jub-rechtliches { column-gap: 22px; }
}

/* --- Menü für Tablet und Handy (Kundenwunsch 11.09.2026) ------------------
   Unter 992 px blendet Webflow die Navigation aus (data-collapse="medium")
   und zeigt stattdessen .w-nav-button. Öffnen, Schließen und das Zuklappen
   nach einem Klick auf einen Menüpunkt macht das Webflow-Navbar-Modul.
   Bewusst nicht die Klasse .menu-button aus site.css: die bringt die
   Petrol-/Grüntöne der Webflow-Vorlage mit. */
@media screen and (max-width: 991px) {
  .jub-burger {
    position: relative;
    width: 48px;
    height: 48px;
    margin-right: -12px;
    padding: 0;
    color: var(--grau);
    background-color: transparent;
  }
  .jub-burger.w--open { color: var(--rot); background-color: transparent; }
  .jub-burger:focus-visible { outline: 2px solid var(--rot); outline-offset: 2px; }
  .jub-burger__linie {
    position: absolute;
    left: 12px;
    right: 12px;
    height: 2px;
    background-color: currentColor;
    transition: transform .3s ease, opacity .2s ease;
  }
  .jub-burger__linie:nth-child(1) { top: 16px; }
  .jub-burger__linie:nth-child(2) { top: 23px; }
  .jub-burger__linie:nth-child(3) { top: 30px; }
  /* geöffnet wird aus den drei Linien ein X */
  .jub-burger.w--open .jub-burger__linie:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .jub-burger.w--open .jub-burger__linie:nth-child(2) { opacity: 0; }
  .jub-burger.w--open .jub-burger__linie:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Das Menü klappt unter der Navigation über die volle Bildschirmbreite auf.
     Der Header hat 5 % Innenabstand, deshalb 100vw und zentriert. */
  .w-nav-overlay {
    left: calc(50% - 50vw);
    width: 100vw;
  }
  /* Webflow zieht die Overlay-Ebene über die ganze Seitenhöhe (für das
     Schließen per Tipp daneben), der Schatten gehört deshalb ans Menü selbst */
  .nav-menu-wrapper[data-nav-menu-open] {
    box-shadow: 0 22px 30px -22px #48535366;
    width: 100%;
    inset: 0 auto auto 0;
    background-color: #fff;
    text-align: left;
    border-top: 1px solid #4853531f;
  }
  .nav-menu-wrapper[data-nav-menu-open] .nav-menu {
    flex-direction: column;
    align-items: stretch;
    row-gap: 0;
    width: 100%;
    padding: 4px 5% 18px;
    background-color: #fff;
  }
  .nav-menu-wrapper[data-nav-menu-open] .nav-menu li + li { border-top: 1px solid #4853531f; }
  .nav-menu-wrapper[data-nav-menu-open] .nav-link {
    display: block;
    margin: 0;
    padding: 17px 0;
    text-align: left;
    font-size: 18px;
    line-height: 1.2em;
  }
}

/* --- Bilderstrecke vom Abend (Rückblick seit 06.10.2026) -----------------
   Die Spur scrollt horizontal und rastet per scroll-snap ein. Dadurch wischt
   man auf dem Handy wie gewohnt, ohne dass eine Bibliothek nötig wäre.
   js/slider.js setzt nur scrollLeft und hält Punkte und Zähler aktuell. */
.jub-slider { position: relative; }
.jub-slider__spur {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  margin: 0;
  padding: 0;
  list-style: none;
}
.jub-slider__spur::-webkit-scrollbar { display: none; }
/* Filmstreifen: feste Höhe, Breite richtet sich nach dem Bild. Dadurch
   stehen Quer- und Hochformate nebeneinander, ohne dass etwas beschnitten
   wird und ohne leere Flächen neben den Hochformaten. */
.jub-slide { flex: 0 0 auto; scroll-snap-align: center; margin: 0; }
.jub-slide__rahmen {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(360px, 52vh, 560px);
  /* Weiß wie die Section: Hoch- und Querformate stehen dadurch in der Fläche,
     statt in einem sichtbaren Kasten zu sitzen. */
  background-color: #fff;
  overflow: hidden;
}
.jub-slide__bild {
  display: block;
  height: 100%;
  width: auto;
  max-width: none;
}
/* Pfeile liegen über dem Bild, auf dem Handy rücken sie unter die Strecke */
.jub-slider__pfeil {
  position: absolute;
  top: calc(clamp(360px, 52vh, 560px) / 2);
  transform: translateY(-50%);
  z-index: 2;
  width: 54px;
  height: 54px;
  border: 0;
  cursor: pointer;
  background-color: #ffffffee;
  box-shadow: 0 6px 18px #48535333;
  transition: background-color .2s ease, opacity .2s ease;
}
.jub-slider__pfeil:hover { background-color: var(--rot); }
.jub-slider__pfeil:disabled { opacity: .3; cursor: default; }
.jub-slider__pfeil:disabled:hover { background-color: #ffffffee; }
.jub-slider__pfeil::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 13px;
  height: 13px;
  border-top: 2px solid var(--grau);
  border-right: 2px solid var(--grau);
}
.jub-slider__pfeil:hover::before { border-color: #fff; }
.jub-slider__pfeil--zurueck { left: 18px; }
.jub-slider__pfeil--zurueck::before { transform: translate(-30%, -50%) rotate(-135deg); }
.jub-slider__pfeil--vor { right: 18px; }
.jub-slider__pfeil--vor::before { transform: translate(-70%, -50%) rotate(45deg); }

.jub-slider__fuss {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #48535333;
}
.jub-slider__punkte { display: flex; gap: 10px; flex-wrap: wrap; }
.jub-slider__punkt {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 1px solid var(--grau);
  background-color: transparent;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease;
}
.jub-slider__punkt:hover { border-color: var(--rot); }
.jub-slider__punkt.is-aktiv { background-color: var(--rot); border-color: var(--rot); }
@media screen and (max-width: 767px) {
  /* Auf dem Telefon je eine Folie über die volle Breite, mit fester
     Bühnenhöhe. Mitwachsende Höhen würden beim Wischen springen, weil die
     Strecke sonst bei jedem Bild ihre Höhe ändert. */
  .jub-slide { flex: 0 0 100%; }
  .jub-slide__rahmen { height: 50vh; }
  .jub-slide__bild { height: auto; width: auto; max-width: 100%; max-height: 100%; }
  .jub-slider__pfeil { width: 44px; height: 44px; }
  .jub-slider__pfeil--zurueck { left: 10px; }
  .jub-slider__pfeil--vor { right: 10px; }
}


/* --- Film vom Abend ------------------------------------------------------
   Das Video ist im Hochformat gedreht. Es steht deshalb neben dem Text und
   läuft nicht über die volle Breite, sonst müsste man es beschneiden. */
/* Die Section bekommt ein abgedunkeltes Motiv aus der Halle als Grund, damit
   die Fläche neben dem Hochformat nicht leer wirkt. */
.jub-section--film {
  position: relative;
  background-color: #1a1a1a;
  background-image: url("../img/abend/film-hintergrund.jpg");
  background-size: cover;
  background-position: 50% 45%;
}
.jub-section--film::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, #1a1a1af7 0%, #1a1a1ae6 50%, #485353d4 100%);
}
.jub-section--film .jub-inner { position: relative; z-index: 1; }

/* Die Bühne wird über die Höhe bestimmt, die Breite ergibt sich aus 9:16.
   Video und Text stehen als zentrierte Einheit, damit rechts kein großes
   Loch bleibt. */
.jub-video { display: grid; grid-template-columns: auto minmax(300px, 430px); gap: 60px;
  align-items: center; justify-content: center; }
.jub-video__buehne {
  position: relative;
  height: clamp(460px, 78vh, 820px);
  aspect-ratio: 9 / 16;
  width: auto;
  background-color: #1a1a1a;
  overflow: hidden;
  box-shadow: 0 24px 60px #1a1a1a59;
}
.jub-video__film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.jub-video__play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 78px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: #fffffff2;
  box-shadow: 0 8px 24px #1a1a1a40;
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}
.jub-video__play:hover { background-color: var(--rot); transform: translate(-50%, -50%) scale(1.06); }
/* Ohne diese Zeile setzt sich das display:flex der Klasse gegen das
   hidden-Attribut durch: Der Knopf wäre sichtbar, obwohl noch kein Film da
   ist, und ein Klick würde nichts tun. */
.jub-video__play[hidden] { display: none; }
.jub-video__play::before {
  content: "";
  border-left: 24px solid var(--rot);
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
  margin-left: 7px;
  transition: border-left-color .2s ease;
}
.jub-video__play:hover::before { border-left-color: #fff; }
.jub-video__text { max-width: 430px; }
.jub-video__text .jub-kicker { display: block; margin-bottom: 14px; }
.jub-video__text .jub-h2 { margin-bottom: .45em; }
/* Großansicht */
body.ist-fixiert { overflow: hidden; }
.jub-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 26px;
  background-color: #1a1a1af2;
}
.jub-lightbox.ist-offen { display: flex; }
.jub-lightbox[hidden] { display: none; }
.jub-lightbox__film, .jub-lightbox__bild { max-width: 100%; max-height: 88vh; width: auto; background-color: #000; }
.jub-lightbox__film[hidden], .jub-lightbox__bild[hidden] { display: none; }
.jub-lightbox__zu {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 54px;
  height: 54px;
  border: 0;
  background-color: #ffffff1a;
  cursor: pointer;
  transition: background-color .2s ease;
}
.jub-lightbox__zu:hover { background-color: var(--rot); }
.jub-lightbox__zu::before, .jub-lightbox__zu::after {
  content: "";
  position: absolute;
  left: 15px;
  top: 26px;
  width: 24px;
  height: 2px;
  background-color: #fff;
}
.jub-lightbox__zu::before { transform: rotate(45deg); }
.jub-lightbox__zu::after { transform: rotate(-45deg); }

@media screen and (max-width: 1199px) {
  .jub-video { gap: 44px; grid-template-columns: auto minmax(260px, 380px); }
  .jub-video__buehne { height: clamp(420px, 66vh, 660px); }
}
@media screen and (max-width: 991px) {
  /* Unter 992 px untereinander, sonst bleibt neben dem Hochformat zu wenig
     Platz für den Text. */
  .jub-video { grid-template-columns: 1fr; gap: 32px; justify-items: center; }
  .jub-video__text { max-width: none; text-align: center; }
}
@media screen and (max-width: 767px) {
  .jub-video { grid-template-columns: 1fr; gap: 26px; }
  /* Kein margin:auto: im Grid schrumpft das Element damit auf seinen Inhalt,
     und der ist hier absolut positioniert, also null breit. */
  .jub-video__buehne { height: auto; width: 100%; max-width: 420px; justify-self: center; }
  .jub-video__play { width: 64px; height: 64px; }
  .jub-video__play::before { border-left-width: 20px; border-top-width: 12px; border-bottom-width: 12px; }
  .jub-lightbox { padding: 14px; }
  .jub-lightbox__zu { top: 10px; right: 10px; width: 46px; height: 46px; }
  .jub-lightbox__zu::before, .jub-lightbox__zu::after { left: 13px; top: 22px; width: 20px; }
}


/* Bild der Spendenübergabe ohne feste Höhe: so ist es vollständig zu sehen,
   statt auf eine Bandhöhe beschnitten zu werden (Kundenwunsch 06.10.2026). */
.jub-figure--voll { margin-top: 44px; }
.jub-shot--voll { width: 100%; height: auto; object-fit: contain; }
@media screen and (max-width: 767px) {
  .jub-figure--voll { margin-top: 30px; }
  .jub-shot--voll { height: auto; }
}