/* Pfadfinder Raeren: Anpassungen über dem Stellar-Template (wird nach main.css geladen).
   Alle Farben laufen über die Variablen hier. */

:root {
	--brand: #57379a;        /* Lila aus dem Pfadfinder-Logo */
	--brand-deep: #3b2470;   /* Hintergrund Kopf und Fuß */
	--brand-soft: #efeaf7;   /* helle Flächen, Hover */
	--ink: #2b2238;          /* Überschriften */
	--text: #4a4458;         /* Fließtext */
	--muted: #6b6478;        /* Nebeninfos */
	--line: #e3ddec;
	--radius: 8px;
}

/* Farbe: eine Markenfarbe statt pink-lila Verlauf, Textur bleibt */
body {
	background-color: var(--brand-deep);
	background-image: url("images/overlay.png");
	color: rgba(255, 255, 255, 0.88);
}

::selection {
	background: var(--brand);
	color: #ffffff;
}

/* Typografie: lesbare Grundschrift, Überschriften mit Gewicht */
body, input, select, textarea {
	font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 600;
	letter-spacing: -0.01em;
}

strong, b {
	font-weight: 600;
}

#main {
	color: var(--text);
}

	#main h1, #main h2, #main h3, #main h4, #main h5, #main h6,
	#main strong, #main b {
		color: var(--ink);
	}

	#main header.major h2:after {
		background: var(--brand);
		width: 2.5em;
		height: 3px;
	}

	#main a {
		color: var(--brand);
		border-bottom: solid 1px rgba(87, 55, 154, 0.3);
	}

		#main a:hover {
			color: var(--brand-deep);
			border-bottom-color: currentColor;
		}

	#main .button {
		background-color: var(--brand);
		box-shadow: none;
		color: #ffffff !important;
		font-weight: 600;
		border: 0;
	}

		#main .button:hover {
			background-color: var(--brand-deep);
		}

#header h1 {
	font-weight: 600;
}

#header h2 {
	font-weight: 400;
}

a:focus-visible, .button:focus-visible, button:focus-visible {
	outline: 3px solid var(--brand);
	outline-offset: 3px;
}

#header a:focus-visible, #footer a:focus-visible {
	outline-color: #ffffff;
}

/* Navigation: aktiver Abschnitt in Markenfarbe; auf dem Handy als wischbare Leiste statt ausgeblendet */
#nav ul li a {
	color: var(--ink);
}

	#nav ul li a.active {
		background-color: var(--brand);
		color: #ffffff;
	}

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

	#nav, #nav.alt {
		display: block;
		position: sticky;
		top: 0;
		z-index: 10000;
		width: auto;
		max-width: none;
		padding: 0.5em;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		text-align: left;
		background-color: rgba(247, 247, 247, 0.97);
		border-radius: var(--radius) var(--radius) 0 0;
	}

		#nav::-webkit-scrollbar {
			display: none;
		}

		#nav ul, #nav.alt ul {
			display: flex;
			gap: 0.25em;
			white-space: nowrap;
		}

			#nav ul li, #nav.alt ul li {
				flex: none;
				margin: 0;
			}

				#nav ul li a, #nav.alt ul li a {
					font-size: 0.95em;
					height: 44px;
					line-height: 44px;
					padding: 0 1em;
				}

	#nav + #main {
		border-top-left-radius: 0;
		border-top-right-radius: 0;
	}

}

/* News (NewsLister): Karten ohne graue Kopfleiste, Bild bleibt in der Karte, linksbündig statt Blocksatz */
#news .panel {
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: none;
	margin-bottom: 1.5em;
	overflow: hidden;
}

	#news .panel-heading {
		background: none;
		border: 0;
		padding: 1.25em 1.5em 0 1.5em;
	}

		#news .panel-title {
			font-size: 1.35em;
			margin: 0;
		}

			#news .panel-title a, #news .p-news > a {
				border-bottom: 0;
				color: var(--ink);
			}

			#news .panel-title a:hover {
				color: var(--brand);
			}

	#news .panel-body {
		display: flow-root;
		padding: 0.75em 1.5em 1.5em 1.5em;
	}

	#news .p-news {
		margin: 0 0 1em 0;
		text-align: left;
	}

	#news .result-image {
		width: 220px;
		height: 165px;
		object-fit: cover;
		border-radius: 6px;
		margin: 0.35em 1.5em 0.5em 0;
	}

	#news .detail-image {
		border-radius: 6px;
		margin-top: 1em;
	}

	#news .btn {
		background: var(--brand-soft);
		color: var(--brand) !important;
		font: 600 1em/1 "Source Sans Pro", Helvetica, sans-serif;
		padding: 0.8em 1.25em;
		border-radius: 6px;
		border-bottom: 0;
		text-shadow: none;
	}

		#news .btn:hover {
			background: var(--brand);
			color: #ffffff !important;
		}

	#news .pagination {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5em;
		justify-content: center;
		margin: 1.5em 0 0 0;
		padding: 0;
		list-style: none;
	}

		#news .pagination li {
			padding: 0;
		}

		#news .pagination a {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			min-width: 44px;
			height: 44px;
			border: 1px solid var(--line);
			border-radius: 6px;
			color: var(--ink);
		}

			#news .pagination a:not([href]) {
				background: var(--brand);
				border-color: var(--brand);
				color: #ffffff;
			}

				#news .pagination a:not([href]) b {
					color: #ffffff;
				}

			#news .pagination a[href]:hover {
				border-color: var(--brand);
				color: var(--brand);
			}

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

	#news .panel-heading {
		padding: 1em 1em 0 1em;
	}

	#news .panel-body {
		padding: 0.75em 1em 1em 1em;
	}

	#news .result-image {
		float: none !important;
		display: block;
		width: 100%;
		height: auto;
		aspect-ratio: 4 / 3;
		margin: 0 0 1em 0;
	}

}

/* Gruppen: eine Zeile pro Altersstufe, echte Sektionslogos statt Zufalls-Icons */
#gruppen .stufen {
	max-width: 56em;
	margin: 0 auto;
	text-align: left;
}

	#gruppen .stufe {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr;
		gap: 1em;
		align-items: center;
		padding: 1.25em 0;
		border-top: 1px solid var(--line);
	}

		#gruppen .stufe h3 {
			margin: 0;
			font-size: 1.15em;
			line-height: 1.35;
		}

	#main #gruppen .gruppe {
		display: flex;
		align-items: center;
		gap: 1em;
		padding: 0.75em;
		border: 1px solid var(--line);
		border-radius: var(--radius);
		color: var(--ink);
		line-height: 1.3;
		transition: border-color 0.2s ease, background-color 0.2s ease;
	}

		#main #gruppen .gruppe:hover {
			border-color: var(--brand);
			background-color: var(--brand-soft);
		}

		#gruppen .gruppe img {
			flex: none;
			width: 72px;
			height: 72px;
			object-fit: contain;
			border-radius: 6px;
		}

		#gruppen .gruppe-name {
			display: block;
			font-weight: 600;
			font-size: 1.1em;
		}

		#gruppen .gruppe-alter {
			display: block;
			color: var(--muted);
			font-size: 0.9em;
		}

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

	#gruppen .stufe {
		grid-template-columns: 1fr 1fr;
		gap: 0.75em;
	}

		#gruppen .stufe h3 {
			grid-column: 1 / -1;
		}

	#main #gruppen .gruppe {
		flex-direction: column;
		gap: 0.5em;
		text-align: center;
	}

}

/* Bankverbindungen: eine Liste pro Einheit, IBAN einzeilig und mit einem Tipp markierbar */
#bank .konten {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.5em;
	max-width: 50em;
	margin: 0 auto;
	text-align: left;
}

	#bank h3 {
		font-size: 1.15em;
		margin: 0 0 0.75em 0;
	}

	#bank dl {
		display: grid;
		grid-template-columns: max-content 1fr;
		margin: 0;
		border-top: 1px solid var(--line);
	}

		#bank dt, #bank dd {
			margin: 0;
			padding: 0.6em 0;
			border-bottom: 1px solid var(--line);
		}

		#bank dt {
			font-weight: 400;
			color: var(--muted);
			padding-right: 1.5em;
		}

		#bank dd {
			color: var(--ink);
			font-weight: 600;
			font-variant-numeric: tabular-nums;
			text-align: right;
			white-space: nowrap;
			user-select: all;
			-webkit-user-select: all;
		}

#bank .bic {
	margin: 1.5em 0 0 0;
	color: var(--muted);
}

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

	#bank .konten {
		grid-template-columns: 1fr;
		gap: 2em;
	}

}

/* Kontakt/Footer: volle Deckkraft auf dunklem Lila statt 65 % Weiß auf Rosa */
#footer {
	color: rgba(255, 255, 255, 0.9);
}

	#footer h2, #footer h3, #footer h4 {
		color: #ffffff;
	}

	#footer h3 {
		font-size: 1.1em;
		margin: 1.75em 0 0.35em 0;
	}

		#footer section > h3:first-child {
			margin-top: 0;
		}

	#footer h4 {
		font-size: 1em;
		margin: 1.25em 0 0.35em 0;
	}

	#footer p {
		margin: 0 0 1em 0;
	}

	#footer a {
		color: #ffffff;
		border-bottom: solid 1px rgba(255, 255, 255, 0.5);
	}

		#footer a:hover {
			border-bottom-color: #ffffff;
		}

	#footer .button {
		background-color: #ffffff;
		color: var(--brand) !important;
		box-shadow: none;
		font-weight: 600;
		border: 0;
	}

		#footer .button:hover {
			background-color: var(--brand-soft);
		}

	#footer .datenschutz {
		font-size: 0.9em;
	}

	#footer .copyright {
		color: rgba(255, 255, 255, 0.75);
	}

/* Knopf-Leisten bündig zum Text (main.css verschiebt alle li um 1em) */
ul.actions li {
	left: 0;
}

/* Methode: Foto als echter Kreis statt verzerrtem Oval */
.spotlight .image {
	border-color: var(--line);
}

	.spotlight .image img {
		width: 16em;
		height: 16em;
		object-fit: cover;
		object-position: center 15%;
	}

/* Spezialbierbude (Startseite): Bild in Originalgröße mittig über dem Text statt gequetscht daneben */
#spezialbierbude .logo1 {
	float: none;
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	margin: 0.5em auto 0 auto;
	padding: 0;
	border-radius: 6px;
}

#spezialbierbude header.major p {
	max-width: 34em;
	margin-left: auto;
	margin-right: auto;
}

/* Kopf: ein klarer Satz und ein Weg zur passenden Gruppe */
#header .actions {
	margin-top: 1.5em;
}

	#header .button {
		background-color: #ffffff;
		color: var(--brand) !important;
		box-shadow: none;
		font-weight: 600;
		border: 0;
	}

		#header .button:hover {
			background-color: var(--brand-soft);
		}

/* Einblenden des Kopfs: 0,6 s statt 3,5 s; bei „Bewegung reduzieren“ gar nicht */
#header.alt > * {
	transition: opacity 0.6s ease-out;
	transition-delay: 0.1s;
}

@media (prefers-reduced-motion: reduce) {

	*, *:before, *:after {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}

	body.is-loading #header.alt > * {
		opacity: 1;
	}

	body.is-loading #header.alt .logo {
		transform: none;
	}

}

/* Downloads: ganze Zelle ist Tippfläche, Hinweis auf PDF */
#downloads th {
	font-weight: 600;
	color: var(--ink);
	text-align: center;
}

#downloads td {
	padding: 0;
}

	#main #downloads td a {
		display: block;
		padding: 0.75em 1em;
		border-bottom: 0;
	}

		#main #downloads td a:hover {
			background-color: var(--brand-soft);
		}

		#downloads td a:after {
			content: "PDF";
			margin-left: 0.6em;
			padding: 0.1em 0.45em;
			border: 1px solid var(--line);
			border-radius: 4px;
			color: var(--muted);
			font-size: 0.7em;
			font-weight: 600;
			vertical-align: 0.15em;
		}

/* Nützliche Links: zweispaltige Liste statt zentrierter Zeilen */
#links .linkliste {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 2em;
	max-width: 44em;
	margin: 0 auto;
	padding: 0;
	list-style: none;
	text-align: left;
}

	#links .linkliste li {
		left: 0;
		padding: 0;
		border-bottom: 1px solid var(--line);
	}

		#main #links .linkliste a {
			display: block;
			padding: 0.7em 0;
			border-bottom: 0;
		}

			#main #links .linkliste a:after {
				content: "↗";
				margin-left: 0.4em;
				color: var(--muted);
			}

			#main #links .linkliste a:visited {
				color: #7a5fa8;
			}

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

	#links .linkliste {
		grid-template-columns: 1fr;
	}

}

/* Unterseiten nutzen h1 als Abschnittsüberschrift: mit kräftigerer Schrift eine Stufe kleiner */
#main h1 {
	font-size: 2.1em;
	line-height: 1.25;
}

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

	#main h1 {
		font-size: 1.6em;
	}

}

/* Bilder der Unterseiten nie breiter als der Bildschirm (Cadus-Bild hatte feste 480 px) */
#main .logo1, #main .logo2, #main .logo3 {
	max-width: 100%;
	height: auto;
}

/* News-Titel als ganze Zeile klickbar */
#news .panel-title a {
	display: block;
	padding: 0.15em 0;
}