/* ===================================================================
   Jugendherberge am Zoo – eigene Styles
   Alles hängt unter body.jh, damit die Zoo-Website unberührt bleibt.
   Bootstrap 5 (Grid, .container, .row, .col-*) wird vorausgesetzt.
   =================================================================== */

body.jh {
	--jh-wald:     #16362E;
	--jh-nacht:    #0E241E;
	--jh-laterne:  #F2B33D;
	--jh-papier:   #F4F6F2;
	--jh-sand:     #E6EAE1;
	--jh-linie:    #C6CEC2;

	--jh-schrift-titel: "Bricolage Grotesque", "Trebuchet MS", "Segoe UI", sans-serif;
	--jh-schrift-text:  "Atkinson Hyperlegible", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	background: var(--jh-papier);
	color: var(--jh-wald);
	font-family: var(--jh-schrift-text);
	font-size: 1.0625rem;
	line-height: 1.65;
}

body.jh a { color: inherit; }

/* --- Sprungmarke ------------------------------------------------- */
.jh .jh-skip,
body.jh .jh-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--jh-laterne);
	color: var(--jh-wald);
	padding: .75rem 1.25rem;
	font-weight: 700;
	text-decoration: none;
}
body.jh .jh-skip:focus { left: 0; }

body.jh :focus-visible {
	outline: 3px solid var(--jh-laterne);
	outline-offset: 2px;
}

/* --- Kopf --------------------------------------------------------- */
body.jh .jh-kopf {
	background: var(--jh-papier);
	border-bottom: 1px solid var(--jh-linie);
	position: sticky;
	top: 0;
	z-index: 100;
}

body.jh .jh-kopf__zeile {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
	padding: .9rem 0;
}

body.jh .jh-marke {
	text-decoration: none;
	display: block;
	line-height: 1.15;
}
body.jh .jh-marke__name {
	display: block;
	font-family: var(--jh-schrift-titel);
	font-weight: 700;
	font-size: 1.2rem;
	letter-spacing: -.01em;
}
body.jh .jh-marke__ort {
	display: block;
	font-size: .8rem;
	color: #587165;
}

/* Burger – nur mobil sichtbar */
body.jh .jh-burger {
	background: none;
	border: 1px solid var(--jh-linie);
	border-radius: 4px;
	padding: .55rem .6rem;
	display: flex;
	flex-direction: column;
	gap: 4px;
	cursor: pointer;
}
body.jh .jh-burger span {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--jh-wald);
}

body.jh .jh-nav__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .5rem;
}
body.jh .jh-nav__liste a {
	text-decoration: none;
	font-weight: 600;
	padding: .35rem 0;
	display: inline-block;
	border-bottom: 2px solid transparent;
}
body.jh .jh-nav__liste a:hover,
body.jh .jh-nav__liste .current-menu-item > a {
	border-bottom-color: var(--jh-laterne);
}

@media (min-width: 992px) {
	body.jh .jh-burger { display: none; }
	body.jh .jh-nav.collapse:not(.show) { display: flex; }   /* Bootstrap-Collapse ab Desktop aushebeln */
	body.jh .jh-nav {
		display: flex;
		align-items: center;
		gap: 1.75rem;
	}
	body.jh .jh-nav__liste {
		flex-direction: row;
		gap: 1.75rem;
	}
}

/* --- Bausteine ---------------------------------------------------- */
body.jh .jh-btn {
	display: inline-block;
	background: var(--jh-wald);
	color: var(--jh-papier);
	text-decoration: none;
	font-weight: 700;
	padding: .8rem 1.5rem;
	border-radius: 2px;
}
body.jh .jh-btn:hover { background: var(--jh-nacht); color: var(--jh-papier); }
body.jh .jh-btn--klein { padding: .5rem 1rem; font-size: .9rem; }
body.jh .jh-btn--hell { background: var(--jh-laterne); color: var(--jh-wald); }
body.jh .jh-btn--hell:hover { background: #FFC658; color: var(--jh-wald); }

body.jh .jh-link {
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: .25em;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--jh-laterne);
}

body.jh .jh-h2 {
	font-family: var(--jh-schrift-titel);
	font-weight: 700;
	font-size: clamp(1.6rem, 3.4vw, 2.3rem);
	letter-spacing: -.015em;
	margin: 0 0 1rem;
}
body.jh .jh-h2--hell { color: var(--jh-papier); }

body.jh .jh-vorspann {
	font-size: 1.1rem;
	max-width: 60ch;
	margin: 0 0 1.5rem;
}

body.jh .jh-fliess p { max-width: 68ch; }

/* --- Hinweisband -------------------------------------------------- */
body.jh .jh-hinweis {
	background: var(--jh-laterne);
	color: var(--jh-wald);
	font-weight: 600;
	padding: .7rem 0;
	font-size: .95rem;
}

/* --- Hero --------------------------------------------------------- */
body.jh .jh-hero { padding: 3.5rem 0 3rem; }

body.jh .jh-hero__titel {
	font-family: var(--jh-schrift-titel);
	font-weight: 800;
	font-size: clamp(2.4rem, 7vw, 4.1rem);
	line-height: 1.02;
	letter-spacing: -.03em;
	margin: 0 0 1.25rem;
}
body.jh .jh-hero__text {
	font-size: 1.2rem;
	max-width: 46ch;
	margin: 0 0 2rem;
}
body.jh .jh-hero__aktionen {
	display: flex;
	align-items: center;
	gap: 1.75rem;
	flex-wrap: wrap;
}

body.jh .jh-bild { margin: 0; }
body.jh .jh-bild img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 2px;
}

/* --- Steckbrief --------------------------------------------------- */
body.jh .jh-steckbrief {
	background: var(--jh-wald);
	color: var(--jh-papier);
	padding: 2rem 0;
}
body.jh .jh-steckbrief__gitter {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem 2rem;
	margin: 0;
}
body.jh .jh-steckbrief__gitter dt {
	font-size: .85rem;
	color: var(--jh-laterne);
	font-weight: 600;
	margin-bottom: .1rem;
}
body.jh .jh-steckbrief__gitter dd {
	margin: 0;
	font-family: var(--jh-schrift-titel);
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.25;
}
@media (min-width: 768px) {
	body.jh .jh-steckbrief__gitter { grid-template-columns: repeat(4, 1fr); }
}

/* --- Abschnitte --------------------------------------------------- */
body.jh .jh-abschnitt { padding: 4rem 0; }
body.jh .jh-abschnitt--dunkel {
	background: var(--jh-nacht);
	color: var(--jh-papier);
}
body.jh .jh-abschnitt__aktion { margin: 2.25rem 0 0; }

body.jh .jh-merkmale {
	list-style: none;
	margin: 1.5rem 0 0;
	padding: 0;
	border-top: 1px solid var(--jh-linie);
}
body.jh .jh-merkmale li {
	padding: .6rem 0;
	border-bottom: 1px solid var(--jh-linie);
}

/* --- Programm-Teaser (Startseite) --------------------------------- */
body.jh .jh-teaser {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	margin-top: 2rem;
}
body.jh .jh-teaser__karte {
	border-top: 3px solid var(--jh-laterne);
	padding-top: 1rem;
}
body.jh .jh-teaser__karte h3 {
	font-family: var(--jh-schrift-titel);
	font-size: 1.2rem;
	font-weight: 700;
	margin: 0 0 .5rem;
}
body.jh .jh-teaser__karte p { margin: 0; font-size: .98rem; }
@media (min-width: 768px) {
	body.jh .jh-teaser { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}

/* --- Programmseite ------------------------------------------------ */
body.jh .jh-seitenkopf { padding: 3rem 0 2rem; }
body.jh .jh-seitenkopf__titel {
	font-family: var(--jh-schrift-titel);
	font-weight: 800;
	font-size: clamp(2.1rem, 6vw, 3.2rem);
	letter-spacing: -.025em;
	margin: 0 0 1rem;
}

body.jh .jh-gruppe { padding: 3rem 0; }
body.jh .jh-gruppe--getont { background: var(--jh-sand); }
body.jh .jh-gruppe__kopf { margin-bottom: 2rem; }
body.jh .jh-gruppe__einleitung { max-width: 62ch; margin: 0; }

body.jh .jh-programm {
	padding: 1.75rem 0;
	border-top: 1px solid var(--jh-linie);
}
body.jh .jh-programm__name {
	font-family: var(--jh-schrift-titel);
	font-size: 1.35rem;
	font-weight: 700;
	margin: 0 0 .6rem;
}
body.jh .jh-programm__text { margin: 0; max-width: 62ch; }

body.jh .jh-daten {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .35rem 1.25rem;
	margin: 0;
	font-size: .95rem;
}
body.jh .jh-daten dt { color: #587165; }
body.jh .jh-daten dd { margin: 0; font-weight: 700; }

/* --- Schlussband -------------------------------------------------- */
body.jh .jh-schluss {
	background: var(--jh-laterne);
	color: var(--jh-wald);
	padding: 3.5rem 0;
}
body.jh .jh-schluss .jh-btn { background: var(--jh-wald); color: var(--jh-papier); }
body.jh .jh-schluss__aktionen {
	display: flex;
	align-items: center;
	gap: 1.75rem;
	flex-wrap: wrap;
	margin: 0;
}
body.jh .jh-schluss .jh-link { text-decoration-color: var(--jh-wald); }

/* --- Fuß ---------------------------------------------------------- */
body.jh .jh-fuss {
	background: var(--jh-nacht);
	color: var(--jh-papier);
	padding: 3rem 0 2.5rem;
}
body.jh .jh-fuss__titel {
	font-family: var(--jh-schrift-titel);
	font-weight: 700;
	margin: 0 0 .5rem;
}
body.jh .jh-fuss__text { margin: 0 0 .5rem; font-size: .95rem; }
body.jh .jh-fuss__text--klein { font-size: .85rem; color: #A9BBB0; }
body.jh .jh-fuss__liste { list-style: none; margin: 0; padding: 0; font-size: .95rem; }
body.jh .jh-fuss__liste li { margin-bottom: .35rem; }
body.jh .jh-fuss a { text-decoration: underline; text-underline-offset: .2em; }

/* --- Rücksicht ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	body.jh *,
	body.jh *::before,
	body.jh *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

@media print {
	body.jh .jh-kopf,
	body.jh .jh-hinweis { position: static; }
	body.jh .jh-btn { border: 1px solid var(--jh-wald); }
}

/* --- Platzhalter, solange kein Beitragsbild gesetzt ist ------------ */
body.jh .jh-bild--leer {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 18rem;
	border: 2px dashed var(--jh-linie);
	color: #587165;
	font-size: .95rem;
	text-align: center;
	padding: 1rem;
}