/* Auf allen Seiten geladen (includes/seiten.php). Nur Kleinigkeiten, die Theme und Child-Theme ergänzen. */

/* Hauptmenü: Gruppen im Untermenü (z. B. Projekte und Teams unter Mitmachen) nebeneinander statt untereinander */
.sub-nav__items.is-level-0 > li.menu-item-has-children { display: block; break-inside: avoid; margin-bottom: 24px; }

/* Eventbox: Der Titel ist eine H2 (die H1 trägt das Titelbild, includes/seo.php), sieht aber aus wie zuvor */
.em.pixelbones .wjh-ev .wjh-ev__hero h2.wjh-ev__titel {
	font-weight: 900 !important;
	letter-spacing: .01em;
	color: #fff !important;
	font-size: clamp(30px, 3.6vw, 46px) !important;
	line-height: 1.08 !important;
}

/* Jahresübersicht: auf dem Handy erst ab dem aktuellen Monat, frühere Monate per Knopf */
.wjh-jahr-frueher { display: none; }
@media (max-width: 781px) {
	.wjh-jahr:not(.zeigt-frueher) .wjh-jahr__monat.is-vorbei { display: none; }
	.wjh-jahr-frueher {
		display: block;
		margin: 0 0 16px;
		padding: 10px 16px;
		border: 2px solid #fff;
		background: transparent;
		color: #fff;
		font-weight: 700;
		font-size: 15px;
		cursor: pointer;
	}
	.wjh-jahr-frueher:focus-visible { outline: 3px solid #47d7ac; outline-offset: 2px; }
}

/* Externe Veranstaltungen: gelber Rand an der Karte, gelbes Schild im Kicker. Der Trennpunkt des Themes
   (::before) liegt außerhalb des Schilds, damit nur das Wort hinterlegt ist. */
.wjh-karte[data-region~="extern"] { border-top: 6px solid #ffb81c; }
body .wjh-karte .wjh-karte__kicker a[href*="filter=extern"],
body .wjh-ev .wjh-ev__kicker a[href*="filter=extern"] {
	position: relative; margin-left: 1.4em !important;
	background: #ffb81c !important; color: #003594 !important; padding: 2px 8px !important; text-decoration: none;
}
body .wjh-karte .wjh-karte__kicker a[href*="filter=extern"]::before,
body .wjh-ev .wjh-ev__kicker a[href*="filter=extern"]::before {
	content: "\00b7" !important; position: absolute !important; left: -1em !important; top: 0 !important; bottom: 0 !important; display: flex !important; align-items: center !important; line-height: 1 !important; background: none !important; color: #5c6670 !important;
}

/* Schilder „Extern", „Kooperation", „Förderverein" (includes/veranstaltungen.php, includes/rueckblicke.php) */
.wjh-tag { display: inline-block; padding: 2px 7px; font-size: 11px; font-weight: 700; line-height: 1.4; letter-spacing: .05em; text-transform: uppercase; color: #003594; white-space: nowrap; }
.wjh-tag--extern { background: #ffb81c; }
.wjh-tag--coop { background: #47d7ac; }
.wjh-tag--foerder { background: #fff; }
/* Schilder in der Kickerzeile der Eventkarte: getrennt mit demselben Punkt wie Format und Ort */
.wjh-karte__kicker .wjh-tag { position: relative; margin-left: 1.4em; vertical-align: middle; }
.wjh-karte__kicker .wjh-tag::before { content: "\00b7"; position: absolute; left: -1em; top: 0; bottom: 0; display: flex; align-items: center; line-height: 1; color: #5c6670; font-size: 12px; }
body .wjh-karte .wjh-karte__kicker abbr[title] { text-decoration: none !important; border: 0 !important; cursor: inherit; }
.wjh-karte .wjh-tag--foerder, .wjh-nw-rb .wjh-tag--foerder { background: #003594; color: #fff; }

/* Rückblick-Karte: Datum und Schilder in einer Zeile */
.wjh-nw-rb__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }

/* Kopf von Eventseite und Nachbericht: Schilder stehen in der Label-Spalte der Faktenliste, die dafür
   etwas breiter ist; Werte beginnen auf einer Linie mit dem Datum. Links weiß und unterstrichen. */
.wjh-ev .wjh-ev__kopf .wjh-ev__fakten .wjh-ev__label { flex: 0 0 104px; }
.wjh-ev .wjh-ev__zeile { align-items: center; }
.wjh-ev .wjh-ev__zeile .wjh-ev__label { padding-top: 0; }
.wjh-ev__partner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
body .wjh-ev .wjh-ev__zeile a { color: #fff !important; text-decoration: underline !important; text-underline-offset: 3px; }
body .wjh-ev .wjh-ev__zeile a:hover, body .wjh-ev .wjh-ev__zeile a:focus-visible { text-decoration-thickness: 2px !important; }
.wjh-partner__logo { display: block; height: 40px; width: auto; max-width: 170px; object-fit: contain; background: #fff; padding: 5px 8px; box-sizing: content-box; }

/* Nachbericht mit Querformat-Titelbild: Das Child-Theme setzt das Bild unter den Text. Auf großen
   Bildschirmen stehen Text und Bild wie überall nebeneinander; das Bild ganz, weil es oft Text trägt. */
@media (min-width: 901px) {
	.wjh-nb .wjh-ev__hero.wjh-nb__hero--breit { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr) !important; }
	.wjh-nb .wjh-ev__bild.wjh-nb__bild--breit { grid-column: auto; padding: 0 !important; position: relative; min-height: 100%; }
	.wjh-nb .wjh-nb__bild--breit img { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; aspect-ratio: auto !important; object-fit: contain !important; object-position: center !important; }
}

/* Rückblick-Karte (includes/rueckblicke.php): Foto links auf gut 70 % der Fläche, rechts eine schräg
   angeschnittene blaue Fläche. Das Titelbild der Bewerbung ragt über die Schräge und hat oben, rechts
   und unten denselben Abstand zur Kante. */
.wjh-nw-rb__medien.hat-anker { aspect-ratio: 2 / 1; overflow: hidden; border-bottom: 5px solid #47d7ac; }
.wjh-nw-rb__medien.hat-anker .wjh-nw-rb__bild { position: absolute; top: 0; left: 0; width: 72%; height: 100%; aspect-ratio: auto; border-bottom: 0; }
.wjh-anker-flaeche {
	position: absolute; top: 0; right: 0; bottom: 0; z-index: 1; width: 44%;
	background: #003594; clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
}
.wjh-nw-rb__medien.hat-anker .wjh-nw-rb__event {
	position: absolute; z-index: 2; top: 12px; right: 12px; bottom: 12px; height: calc(100% - 24px); width: auto;
	aspect-ratio: 4 / 5; object-fit: cover; border: 2px solid #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
}

/* Nachbericht-Kopf: Titelbild klein unten rechts im Kopfbild; eigener Rahmen, weil das Theme jedes Bild dort auf die volle Fläche zieht */
.wjh-ev .wjh-ev__bild { position: relative; }
.wjh-nb-anker {
	position: absolute; right: 18px; bottom: 18px; z-index: 2; display: block; overflow: hidden;
	width: 24%; max-width: 150px; aspect-ratio: 4 / 5; border: 3px solid #fff; box-shadow: 0 6px 18px rgba(0, 53, 148, .3);
}
body .em .wjh-ev .wjh-ev__bild .wjh-nb-anker img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; aspect-ratio: auto !important; }

/* Zwei Orte an einem Abend (includes/veranstaltungen.php): Stationen nacheinander, Uhrzeit klein darüber */
.wjh-ev__stationen { display: flex; flex-direction: column; gap: 6px; }
.wjh-ev .wjh-ev__zeile.wjh-ev__orte { align-items: flex-start; }
.wjh-ev .wjh-ev__zeile.wjh-ev__orte .wjh-ev__label { padding-top: 3px; }
.wjh-ev__station { display: block; }
.wjh-ev__station-zeit { display: block; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--t, #47d7ac) !important; }
.wjh-ev__orte dd .wjh-ev__station + .wjh-ev__station { margin-top: 14px; }

/* Gravity Forms: Platzhalter für ausgeblendete Felder (Bedingungslogik) erzeugen sonst leere Zeilen im Raster */
.gform_wrapper .gfield--cl-spacer[style*="span 12"] { display: none !important; }

/* Gravity Forms: Bestätigung nach dem Absenden deutlich sichtbar */
.gform_confirmation_wrapper .gform_confirmation_message {
	padding: 20px 24px; background: #47d7ac; color: #003594; font-weight: 600; font-size: 17px; line-height: 1.5;
	border-left: 6px solid #003594; scroll-margin-top: 120px;
}

/* Ansprechpartner in der Infobox der Eventseite: Teams und Personen mit rundem Bild (includes/veranstaltungen.php) */
.wjh-kontakte { display: flex; flex-direction: column; gap: 10px; }
.wjh-kontakt { display: flex; align-items: center; gap: 10px; }
.wjh-kontakt__bild { flex: 0 0 44px; width: 44px !important; height: 44px !important; border-radius: 50%; object-fit: cover; border: 2px solid #fff; background: #47d7ac; }
.wjh-kontakt__text { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }

/* Eventkarte: vier nebeneinander, Bildformat siehe Plakat-Block unten. Der gelbe Rand externer Karten entfällt,
   „Extern" steht im Kicker. */
article.wjh-karte { border-top: 0 !important; }
@media (min-width: 1001px) { .wjh-karten { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } }

/* Personenübersicht /personen/ (includes/vorlage-personen.php): Kopf wie auf der Veranstaltungsübersicht */
.wjh-nw-archiv { max-width: 1140px; margin: 0 auto; padding: 48px 16px 80px; }
.wjh-nw-archiv__kopf { background: #003594; border-bottom: 6px solid #47d7ac; padding: 28px 16px; text-align: center; margin-bottom: 32px; }
.wjh-nw-archiv__kopf h1 { margin: 0; color: #fff; font-family: Chivo, sans-serif; font-weight: 900; text-transform: uppercase; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1; }
.wjh-nw-archiv__intro { max-width: 70ch; margin: 0 0 32px; }

/* Farbschema Eventreihe (includes/veranstaltungen.php, wjh_nw_event_thema): Farben aus der jeweiligen Canva-Grafik.
   Das Eventlayout färbt über --b (Kopf, Infobox) und --t (Linie, Labels); dazu --t-tief für den Verlauf im Kopf,
   --t-text für Überschriften im Text und --t-knopf für Absendeknopf und Aufzählungszeichen. */
body.wjh-thema-xmas-loerrach .wjh-ev { --b: #2d2a3c; --t: #ffb81c; --card: #efe9ec; --linie: #d8cdd3; --t-tief: #311725; --t-text: #3f121a; --t-knopf: #256469; --t-knopf-hover: #1d5257; }
body.wjh-thema-xmas-waldshut .wjh-ev { --b: #1e3334; --t: #9db3ab; --card: #e6eceb; --linie: #c7d3d0; --t-tief: #294453; --t-text: #1e3334; --t-knopf: #7b3332; --t-knopf-hover: #632827; }
body[class*="wjh-thema-"] .wjh-ev .wjh-ev__hero { background: linear-gradient(135deg, var(--b) 0%, var(--t-tief) 100%) !important; border-bottom-color: var(--t) !important; }
body[class*="wjh-thema-"] .wjh-ev .wjh-ev__inhalt h2,
body[class*="wjh-thema-"] .wjh-ev .wjh-ev__inhalt h3 { color: var(--t-text) !important; }
body[class*="wjh-thema-"] .wjh-ev .wjh-ev__inhalt ul li::before { background-color: var(--t-knopf) !important; }
html body[class*="wjh-thema-"] .em.pixelbones .wjh-ev a.wjh-button.wjh-anmelden { color: var(--b) !important; }
html body[class*="wjh-thema-"] .wjh-ev .wjh-ev__inhalt .gform_wrapper .gform_footer button,
html body[class*="wjh-thema-"] .wjh-ev .wjh-ev__inhalt .gform_wrapper .gform_footer input[type="submit"] { background: var(--t-knopf) !important; border-color: var(--t-knopf) !important; }
html body[class*="wjh-thema-"] .wjh-ev .wjh-ev__inhalt .gform_wrapper .gform_footer button:hover,
html body[class*="wjh-thema-"] .wjh-ev .wjh-ev__inhalt .gform_wrapper .gform_footer input[type="submit"]:hover { background: var(--t-knopf-hover) !important; border-color: var(--t-knopf-hover) !important; }
html body[class*="wjh-thema-"] .em.pixelbones .wjh-ev .wjh-ev__kicker,
html body[class*="wjh-thema-"] .em.pixelbones .wjh-ev .wjh-ev__kicker li,
html body[class*="wjh-thema-"] .em.pixelbones .wjh-ev .wjh-ev__kicker a,
html body[class*="wjh-thema-"] .em.pixelbones .wjh-ev .wjh-ev__label { color: var(--t) !important; }
html body[class*="wjh-thema-"] .em.pixelbones .wjh-ev .wjh-ev__titel::after,
html body[class*="wjh-thema-"] .em.pixelbones .wjh-ev .wjh-kontakt__bild { background-color: var(--t) !important; }
html body[class*="wjh-thema-"] .em.pixelbones .wjh-ev .wjh-ev__bild { background-color: var(--t-tief) !important; }

/* Plakat im Hochformat 4:5 (includes/veranstaltungen.php setzt .wjh-bild--hoch an jedes Hochformat).
   Das Plakat wird nirgends beschnitten: groß auf der Eventseite (nur body.single-event, damit das kleine Plakat im Nachbericht-Kopf unberührt bleibt), ganz auf der Karte, klein im Rückblick. */

/* Eventkarten: einheitlich 4:5. Querformat (ältere Eventbilder) steht ganz und mittig. */
html body article.wjh-karte .wjh-karte__bild { aspect-ratio: 4 / 5 !important; }
html body article.wjh-karte .wjh-karte__bild img { width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: center !important; }
html body article.wjh-karte .wjh-karte__bild img.wjh-bild--hoch { object-fit: cover !important; }

/* Eventseite: Plakat ganz, rechts im Kopf, mit Rand wie ein aufgehängtes Plakat. */
html body.single-event .em.pixelbones .wjh-ev .wjh-ev__hero:has(> .wjh-ev__bild > img.wjh-bild--hoch) { grid-template-columns: minmax(0, 1fr) minmax(260px, 400px) !important; align-items: center; }
html body.single-event .em.pixelbones .wjh-ev .wjh-ev__hero .wjh-ev__bild:has(> img.wjh-bild--hoch) {
	background: transparent !important; padding: 40px 48px 40px 0 !important; min-height: 0 !important; height: auto !important; aspect-ratio: auto !important;
}
html body.single-event .em.pixelbones .wjh-ev .wjh-ev__hero .wjh-ev__bild > img.wjh-bild--hoch {
	position: static !important; display: block; width: 100% !important; height: auto !important; aspect-ratio: 4 / 5 !important;
	object-fit: cover !important; object-position: center !important; box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}
@media (max-width: 900px) {
	html body.single-event .em.pixelbones .wjh-ev .wjh-ev__hero:has(> .wjh-ev__bild > img.wjh-bild--hoch) { grid-template-columns: minmax(0, 1fr) !important; }
	html body.single-event .em.pixelbones .wjh-ev .wjh-ev__hero .wjh-ev__bild:has(> img.wjh-bild--hoch) { padding: 28px 20px 4px !important; }
	html body.single-event .em.pixelbones .wjh-ev .wjh-ev__hero .wjh-ev__bild > img.wjh-bild--hoch { width: 100% !important; } /* bündig mit der Textspalte darunter */
}
/* Titel von Eventseite und Nachbericht nur an echten Bindestrichen trennen, nicht „Walds-hut" oder „Ster-nekoch". */
html body .em.pixelbones .wjh-ev .wjh-ev__titel { hyphens: manual !important; -webkit-hyphens: manual !important; overflow-wrap: break-word; }