/*
Theme Name: DPSG 17&4 Papenburg
Description: Eigenstaendiges Theme fuer den Pfadfinderstamm DPSG 17&4 Papenburg. Kein Eltern-Theme, alle Klassennamen beginnen mit dpsg-.
Author: Stamm 17&4 Papenburg
Version: 1.0
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 7.4
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dpsg-17-4
*/

/* =====================================================================
   DPSG 17&4 Papenburg - Child-Theme-Stylesheet
   Farben: Pfadfinder-Blau #003056 (Primaer), #810a1a (Akzent/Hover)
   Ziel: aufgeraeumt, modern, ruhig, gut lesbar - keine Spielereien,
   Eltern und technisch ungeuebte Besucher sollen sich sofort zurechtfinden.
   ===================================================================== */

:root {
	--dpsg-blue: #003056;
	--dpsg-blue-light: #0a4576;
	--dpsg-accent: #810a1a;
	--dpsg-sky: #5db0e8;
	--dpsg-bg: #e9edf1;
	--dpsg-text: #14171a;
	--dpsg-text-soft: #4b5157;
	--dpsg-border: #e3e7eb;
	--dpsg-radius: 10px;
	--dpsg-shadow: 0 1px 2px rgba(20, 30, 40, 0.05), 0 8px 24px rgba(20, 30, 40, 0.08);
}

/* ---- Hero als bearbeitbarer Cover-Block (Startseite) ----
   Der Hero ist ein normaler Cover-Block im Seiteninhalt, damit Simon
   Foto, Text und Buttons im Editor aendern kann. Dieses CSS zieht ihn
   auf volle Fensterbreite und uebernimmt die bisherige Hero-Optik. */
.wp-block-cover.dpsg-hero-cover {
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	width: 100vw;
	max-width: 100vw;
	margin-top: 0;
	margin-bottom: 36px;
}

/* Auf der Startseite den Innenabstand ueber dem Hero entfernen,
   damit das Foto direkt an der Menueleiste anliegt */
body.home .dpsg-haupt {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

body.home .dpsg-inhalt.content-area {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

.dpsg-hero-cover .wp-block-cover__inner-container {
	max-width: 780px;
	margin: 0 auto;
	padding: 60px 24px;
	color: #ffffff;
	text-align: center;
}

.dpsg-hero-cover .dpsg-hero-eyebrow {
	display: block;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #bfe0f7;
	margin-bottom: 18px;
}

.dpsg-hero-cover h1.dpsg-hero-title {
	color: #ffffff;
	font-family: "Suez One", Georgia, serif;
	font-size: 3.2rem;
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.2;
	margin: 0 0 20px;
	padding-left: 0;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.4);
}

.dpsg-hero-cover h1.dpsg-hero-title::before {
	display: none;
}

.dpsg-hero-cover .dpsg-hero-text {
	font-size: 1.2rem;
	line-height: 1.6;
	color: #eef4f9;
	margin: 0 auto 32px;
	max-width: 560px;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

/* Beide Hero-Buttons fuehren zu gleichwertigen Bereichen, deshalb
   gleiche Groesse. Unterschieden werden sie nur ueber die Fuellung:
   "Aktionen" gefuellt im Akzentrot, "Gruppenstunden" als helle
   Glas-Flaeche. Beides hebt sich zuverlaessig vom Foto ab. */
.dpsg-hero-cover .wp-block-buttons {
	gap: 14px;
}

.dpsg-hero-cover .wp-block-button .wp-block-button__link {
	min-width: 210px;
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: 0.01em;
	padding: 14px 30px !important;
	border-radius: 10px;
	text-align: center;
	text-decoration: none !important;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.dpsg-hero-cover .wp-block-button.dpsg-hero-btn-primary .wp-block-button__link {
	background-color: var(--dpsg-accent) !important;
	color: #ffffff !important;
	border: 2px solid var(--dpsg-accent);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.dpsg-hero-cover .wp-block-button.dpsg-hero-btn-primary .wp-block-button__link:hover {
	background-color: #9c0f21 !important;
	border-color: #9c0f21;
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
}

/* Zweiter Knopf: volle Flaeche in Pfadfinder-Blau.
   Vorher war das eine durchscheinende Flaeche mit weisser Umrandung und
   Weichzeichner dahinter. Auf dem unruhigen Foto sah der Rand aus wie ein
   Fehler, deshalb jetzt schlicht und deckend. */
.dpsg-hero-cover .wp-block-button.dpsg-hero-btn-secondary .wp-block-button__link {
	background-color: var(--dpsg-blue) !important;
	border: 0 !important;
	color: #ffffff !important;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

.dpsg-hero-cover .wp-block-button.dpsg-hero-btn-secondary .wp-block-button__link:hover {
	background-color: #00223d !important;
	color: #ffffff !important;
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
}

@media (max-width: 480px) {
	.dpsg-hero-cover .wp-block-button .wp-block-button__link {
		min-width: 180px;
		font-size: 0.95rem;
		padding: 12px 24px !important;
	}
}

/* ---- Hero-Bereich auf der Startseite ---- */
.dpsg-hero {
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	width: 100vw;
	min-height: 78vh;
	display: flex;
	align-items: center;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	box-sizing: border-box;
}

.dpsg-hero-inner {
	max-width: 780px;
	margin: 0 auto;
	padding: 60px 24px;
	text-align: center;
	color: #ffffff;
}

.dpsg-hero-eyebrow {
	display: inline-block;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #bfe0f7;
	margin-bottom: 18px;
}

.dpsg-hero-inner h1 {
	color: #ffffff;
	font-family: "Suez One", Georgia, serif;
	font-size: 3.2rem;
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.2;
	margin: 0 0 20px;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.4);
}

.dpsg-hero-inner p {
	font-size: 1.2rem;
	line-height: 1.6;
	color: #eef4f9;
	margin: 0 auto 32px;
	max-width: 560px;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

.dpsg-hero-actions {
	display: flex;
	gap: 14px;
	justify-content: center;
	flex-wrap: wrap;
}

.dpsg-hero-btn {
	display: inline-block;
	padding: 13px 30px;
	border-radius: 10px;
	font-weight: 700;
	font-size: 0.98rem;
	text-decoration: none !important;
	letter-spacing: 0.01em;
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.dpsg-hero-btn-primary {
	background-color: var(--dpsg-accent);
	color: #ffffff !important;
	box-shadow: 0 4px 16px rgba(129, 10, 26, 0.4);
}

.dpsg-hero-btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(129, 10, 26, 0.5);
}

.dpsg-hero-btn-secondary {
	background-color: var(--dpsg-blue);
	color: #ffffff !important;
	border: 0;
}

.dpsg-hero-btn-secondary:hover {
	background-color: #00223d;
	transform: translateY(-2px);
}

@media (max-width: 640px) {
	.dpsg-hero { min-height: 62vh; }
	.dpsg-hero-inner h1 { font-size: 2.1rem; }
	.dpsg-hero-inner p { font-size: 1.02rem; }
}

/* Da die Hero-Sektion die Willkommens-Headline schon zeigt,
   wird der doppelte Seitentitel auf der Startseite ausgeblendet.
   Der Kopfbereich muss komplett weg, nicht nur der Titel: sonst bleibt
   ein leeres Element mit 20px Abstand stehen und erzeugt einen weissen
   Spalt zwischen Menueleiste und Hero-Foto. */
.home .dpsg-inhalt .entry-title {
	display: none;
}

.home .dpsg-inhalt .entry-header {
	display: none;
}

/* Der Cover-Block bringt oben einen eigenen Innenabstand mit,
   der direkt unter der Menueleiste ebenfalls als heller Streifen wirkt. */
.home .dpsg-inhalt .dpsg-text > .dpsg-hero-cover {
	padding-top: 0;
}

/* ---- Grundschrift: gleiche Schriftfamilien wie dpsg.de ----
   WICHTIG: Die Grundgroesse MUSS auf html (Root) gesetzt werden, nicht auf
   body. Fast alle Textgroessen in diesem Stylesheet sind in rem angegeben,
   und 1rem = Schriftgroesse des html-Elements (Browser-Standard 16px).
   Eine Groesse auf body aendert rem-basierte Texte NICHT - genau deshalb
   blieb der Text vorher klein, egal wie hoch der body-Wert war. */
html {
	font-size: 15px;
}

@media (min-width: 800px) {
	html {
		font-size: 18px;
	}
}

@media (min-width: 1400px) {
	html {
		font-size: 19px;
	}
}

body {
	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: var(--dpsg-text);
	background-color: var(--dpsg-bg) !important;
	line-height: 1.75;
	font-size: 1rem;
	-webkit-font-smoothing: auto;
	-moz-osx-font-smoothing: auto;
	animation: page-fade-in 0.35s cubic-bezier(0, 0, 0.2, 1) both;
}

/* WICHTIG: nur die Deckkraft animieren, KEIN transform.
   Ein transform auf <body> bleibt nach der Animation bestehen und macht
   body zum Bezugsrahmen fuer alles, was position:fixed ist. Dadurch
   scrollte die WordPress-Adminleiste mit der Seite weg (sah aus, als
   wuerde der Header nach oben springen) und das Sticky-Menue des Themes
   funktionierte nicht mehr.

   Eigener Name plus !important, weil im Customizer unter "Zusaetzliches
   CSS" noch eine aeltere Fassung von "page-fade-in" (mit transform)
   liegt, die nach diesem Stylesheet geladen wird und sonst gewinnt. */
@keyframes dpsg-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

body {
	animation-name: dpsg-fade-in !important;
}
@media (prefers-reduced-motion: reduce) {
	body { animation: none; }
}

h1, h2, h3, h4, h5, h6 {
	font-family: "Suez One", Georgia, serif;
	font-weight: 400;
	letter-spacing: -0.005em;
	color: var(--dpsg-blue);
	line-height: 1.25;
}

.dpsg-navi ul li > a,
.dpsg-hero-eyebrow,
.dpsg-quicklink-title,
.dpsg-hero-btn {
	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ---- Kopfbereich / Logo ---- */
.dpsg-kopf {
	background-color: #ffffff;
	border-bottom: 1px solid var(--dpsg-border);
}

.site-branding,
.dpsg-kopf .site-title,
.dpsg-kopf .site-description {
	color: var(--dpsg-blue);
}

/* ---- Hauptnavigation ---- */
.dpsg-navi,
.site-header .shopping-cart-dropdown {
	background-color: var(--dpsg-blue);
}

.dpsg-navi ul li > a {
	font-weight: 600;
	font-size: 1.1rem;
	letter-spacing: 0.01em;
	padding-top: 18px;
	padding-bottom: 18px;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.dpsg-navi a,
.dpsg-navi ul ul a {
	color: #c8dff0;
}

.dpsg-navi ul li:hover > a,
.dpsg-navi ul li.focus > a,
.dpsg-navi ul li > a:focus,
.dpsg-suche-knopf:hover {
	background-color: var(--dpsg-accent);
	color: #ffffff;
}

.dpsg-navi ul ul {
	background-color: var(--dpsg-blue);
	box-shadow: var(--dpsg-shadow);
}

/* ---- Aktueller Menuepunkt in Rot (08.08.2026) ----
   Die Vorfahren-Klassen sind wichtig: steht man auf "Anmeldung Sommerlager",
   ist der Menuepunkt "Anmeldungen" der Vorfahre und soll markiert sein.
   WordPress vergibt diese Klassen selbst, solange die Seite im Menue unter
   dem Punkt haengt. Fuer die Aktionen erledigt das inc/menue-markierung.php,
   weil das ein eigener Beitragstyp ist. */
.dpsg-navi .current-menu-item > a,
.dpsg-navi .current_page_item > a,
.dpsg-navi .current-menu-parent > a,
.dpsg-navi .current-menu-ancestor > a,
.dpsg-navi .current_page_parent > a,
.dpsg-navi .current_page_ancestor > a,
.dpsg-navi .dpsg-aktiv > a {
	background-color: var(--dpsg-accent);
	color: #ffffff;
	/* heller Strich unten, damit sich der aktive Punkt auch dann abhebt,
	   wenn gerade ein anderer Punkt ueberfahren wird (der ist ebenfalls rot) */
	box-shadow: inset 0 -3px 0 rgba(255, 255, 255, 0.85);
}

/* Im aufgeklappten Untermenue reicht die Farbe, dort stoert der Strich */
.dpsg-navi ul ul .current-menu-item > a,
.dpsg-navi ul ul .current_page_item > a {
	background-color: var(--dpsg-accent);
	color: #ffffff;
	box-shadow: none;
}

/* Ein Vorfahre, der selbst nicht die offene Seite ist, wird etwas ruhiger
   dargestellt als die Seite, auf der man wirklich steht. */
.dpsg-navi .current-menu-ancestor:not(.current-menu-item) > a,
.dpsg-navi .current_page_ancestor:not(.current_page_item) > a,
.dpsg-navi .current-menu-parent:not(.current-menu-item) > a {
	background-color: #6d0d1c;
}

/* ---- Menueleiste: Logo und Menuepunkte sauber in einer Zeile ----
   Vantage floatet Logo und Menue nur nebeneinander; wird das Menue zu
   breit, bricht es unschoen in eine zweite Zeile um. Ab Desktop-Breite
   deshalb Flexbox: Logo links (groesser, vertikal zentriert), Menue
   rechts, nichts umbrechen. */
@media (min-width: 900px) {
	.dpsg-navi > .dpsg-breite {
		display: flex;
		align-items: center;
		flex-wrap: nowrap;
		max-width: 1260px !important;
		width: auto !important;
		gap: 12px;
	}

	.dpsg-navi .dpsg-logo {
		float: none;
		flex: 0 0 auto;
		display: flex;
		align-items: center;
	}

	.dpsg-navi .dpsg-logo-bild {
		height: 31px !important;
		max-height: 31px !important;
		width: auto !important;
		max-width: none !important;
	}

	.dpsg-navi .menu-topmenue-container {
		float: none;
		flex: 0 1 auto;
		margin-left: auto;
	}

	.dpsg-navi ul.dpsg-menue {
		float: none;
		display: flex;
		flex-wrap: nowrap;
		align-items: stretch;
	}

	.dpsg-navi ul.dpsg-menue > li {
		float: none;
		white-space: nowrap;
	}

	.dpsg-navi .dpsg-suche-knopf {
		float: none;
		flex: 0 0 auto;
		position: static !important;
	}

	/* Dropdown-Menues: Unterpunkte immer sauber untereinander,
	   nicht nebeneinander/uebereinander */
	.dpsg-navi ul.dpsg-menue ul.dpsg-untermenue {
		width: auto !important;
		min-width: 280px;
	}

	.dpsg-navi ul.dpsg-menue ul.dpsg-untermenue > li {
		display: block !important;
		float: none !important;
		white-space: nowrap;
		width: 100%;
	}

	.dpsg-navi ul.dpsg-menue ul.dpsg-untermenue > li > a {
		display: block;
		width: auto !important;
		white-space: nowrap;
		padding: 12px 20px;
	}
}

/* Menuepunkte: etwas kompakter, damit alles nebeneinander passt */
.dpsg-navi ul.dpsg-menue > li > a {
	font-size: 1rem;
	padding-left: 14px;
	padding-right: 14px;
}

/* ---- Hauptinhalt ---- */
.dpsg-inhalt.content-area {
	background-color: #ffffff;
	border-radius: var(--dpsg-radius);
	border-top: 4px solid var(--dpsg-blue);
	box-shadow: var(--dpsg-shadow);
	padding: 44px 48px;
	margin-top: 32px;
}

/* Auf der Startseite folgt der Inhalt direkt auf den Hero, keine
   nochmalige Box-Kante noetig, wirkt sonst wie zwei gestapelte Karten. */
.home .dpsg-inhalt.content-area {
	border-top: none;
	border-radius: 0;
	box-shadow: none;
	margin-top: 0;
	padding-top: 52px;
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

.dpsg-inhalt.content-area h1.entry-title,
.dpsg-inhalt h2.entry-title {
	font-size: 2.3rem;
	margin-bottom: 0.6em;
}

.dpsg-text h1,
.dpsg-text h2 {
	font-size: 1.85rem;
	margin-top: 1.7em;
	position: relative;
	padding-left: 18px;
}

.dpsg-text h1::before,
.dpsg-text h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	bottom: 0.15em;
	width: 4px;
	background-color: var(--dpsg-accent);
	border-radius: 2px;
}

.dpsg-text h3 {
	font-size: 1.4rem;
	margin-top: 1.4em;
}

.dpsg-text p,
.dpsg-text li {
	margin-bottom: 1.15em;
	color: var(--dpsg-text);
	font-size: 1rem;
}

/* ---- Listen etwas luftiger und mit eigenem Aufzaehlungspunkt in Markenfarbe ---- */
.dpsg-text ul:not(.wp-block-gallery):not([class*="sbi_"]) li {
	margin-bottom: 0.4em;
	padding-left: 0.2em;
}

.dpsg-text ul:not(.wp-block-gallery):not([class*="sbi_"]) li::marker {
	color: var(--dpsg-sky);
	font-weight: 700;
}

/* ---- Links im Inhalt ---- */
.dpsg-text a,
.dpsg-text a:visited {
	color: var(--dpsg-blue);
	text-decoration: underline;
	text-decoration-color: var(--dpsg-sky);
	text-underline-offset: 2px;
}

.dpsg-text a:hover {
	color: var(--dpsg-accent);
	text-decoration-color: var(--dpsg-accent);
}

/* ---- Trennlinie als Blau-Verlauf ---- */
.dpsg-text hr.wp-block-separator {
	border: none;
	border-top: 3px solid;
	border-image: linear-gradient(90deg, var(--dpsg-blue) 0%, var(--dpsg-sky) 60%, transparent 100%) 1;
	margin: 28px 0;
}

/* ---- Buttons (Call-to-Action im Inhalt) ---- */
.dpsg-text .wp-block-button__link,
.dpsg-text .wp-block-button__link:visited {
	background-color: var(--dpsg-blue) !important;
	color: #ffffff !important;
	border-radius: 10px !important;
	padding: 12px 26px !important;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none !important;
	box-shadow: 0 2px 6px rgba(0, 48, 86, 0.25);
	transition: background-color 0.18s ease, transform 0.12s ease;
}

.dpsg-text .wp-block-button__link:hover {
	background-color: var(--dpsg-accent) !important;
	color: #ffffff !important;
	transform: translateY(-1px);
}

/* ---- Zurueck-nach-oben-Button zuruecksetzen ---- */
#site-up, .site-up, .back-to-top {
	background-color: initial !important;
	color: initial !important;
}

/* ---- Seitenleiste (Sidebar) ---- */
#secondary {
	background-color: var(--dpsg-blue);
	border-radius: var(--dpsg-radius);
	box-shadow: var(--dpsg-shadow);
	padding: 26px 22px;
	color: #e8f0f7;
}

#secondary .widget-title {
	color: #ffffff;
	font-size: 1rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
	padding-bottom: 10px;
	margin-bottom: 14px;
}

#secondary a {
	color: #cfe4f4;
}
#secondary a:hover {
	color: #ffffff;
}

#secondary:not(:has(.widget)):not(:has(aside)) {
	background: none !important;
	padding: 0 !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	min-height: 0 !important;
}

/* ---- Instagram-Bereich: klar abgegrenzt, ruhig ---- */
#sb_instagram {
	margin-top: 8px;
}

#sb_instagram .sbi_header_link,
#sb_instagram .sbi_header_link .sbi_header_text,
#sb_instagram .sbi_header_link .sbi_header_text h3,
#sb_instagram .sbi_header_link .sbi_header_text p {
	color: var(--dpsg-blue);
}

.sb_instagram_header {
	border-left: 4px solid var(--dpsg-blue);
	background: #eef5fb;
	border-radius: 0 10px 10px 0;
	padding: 12px 16px;
	margin-bottom: 16px;
	box-sizing: border-box;
	width: 100%;
}

.sb_instagram_header .sbi_header_link {
	display: flex !important;
	align-items: center !important;
	gap: 14px;
	padding-left: 10px;
}

.sb_instagram_header .sbi_header_img_wrap,
.sb_instagram_header .sbi_header_img {
	flex-shrink: 0;
}

.sb_instagram_header .sbi_header_text {
	overflow: visible !important;
	white-space: normal !important;
	min-width: 0;
	flex: 1;
}

.sb_instagram_header .sbi_header_text h3,
.sb_instagram_header .sbi_header_text p {
	white-space: normal !important;
	overflow: visible !important;
	text-overflow: unset !important;
	word-break: break-word;
}

#sb_instagram .sbi_photo {
	border-radius: 10px;
	overflow: hidden;
}

@media (max-width: 480px) {
	.sb_instagram_header .sbi_header_link { align-items: flex-start !important; }
}

/* ---- Startseite: Schnellzugriff-Karten ----
   Der native Gruppen-Block rendert einen zusaetzlichen
   ".wp-block-group__inner-container"-Wrapper zwischen dem Block und seinem
   Inhalt, das Grid/Flex muss deshalb auf diesen inneren Wrapper zielen,
   nicht auf den Block selbst. */
.dpsg-quicklinks > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin: 28px 0 32px;
}

.dpsg-quicklink > .wp-block-group__inner-container {
	display: flex;
	flex-direction: column;
	gap: 5px;
	height: 100%;
}

.dpsg-quicklink {
	padding: 20px 22px;
	background-color: var(--dpsg-blue);
	border-radius: 10px;
	text-decoration: none !important;
	box-shadow: 0 4px 14px rgba(0, 48, 86, 0.18);
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.dpsg-quicklink:hover {
	transform: translateY(-3px);
	background-color: var(--dpsg-blue-light);
	box-shadow: 0 8px 22px rgba(0, 48, 86, 0.28);
}

.dpsg-quicklink .dpsg-quicklink-title {
	font-weight: 700;
	font-size: 1.3rem;
	color: #ffffff;
	margin: 0;
}

.dpsg-quicklink .dpsg-quicklink-desc {
	font-size: 1.05rem;
	color: #cbe6f7;
	margin: 0;
}

@media (max-width: 720px) {
	.dpsg-quicklinks > .wp-block-group__inner-container {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.dpsg-quicklinks > .wp-block-group__inner-container {
		grid-template-columns: 1fr;
	}
}

.dpsg-quicklink .wp-block-buttons {
	margin-top: 6px;
}

.dpsg-quicklink-btn .wp-block-button__link {
	background-color: transparent;
	border: 2px solid #ffffff;
	color: #ffffff !important;
	font-weight: 700;
	font-size: 0.9rem;
	padding: 8px 18px;
	border-radius: 10px;
	text-decoration: none !important;
}

.dpsg-quicklink-btn .wp-block-button__link:hover {
	background-color: rgba(255, 255, 255, 0.15);
}

/* ---- Stufen & Gruppenstunden: kombinierte Uebersicht ----
   Wie bei .dpsg-quicklinks rendert der native Gruppen-Block einen
   zusaetzlichen ".wp-block-group__inner-container"-Wrapper, Grid/Flex
   muss deshalb auf diesen inneren Wrapper zielen. Die Stufenfarbe wird
   ueber eine Modifier-Klasse (dpsg-color-*) statt per Inline-Style
   gesetzt, damit der Block-Editor den Inhalt nicht als ungueltig meldet. */
.dpsg-stufen-grid > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 18px;
	margin: 28px 0 20px;
}

.dpsg-stufe-card {
	border: 1px solid var(--dpsg-border);
	border-top: 4px solid var(--stufe-color, var(--dpsg-blue));
	border-radius: 10px;
	padding: 20px 22px;
	background-color: #fbfcfd;
	display: flex;
	flex-direction: column;
}

/* Alle Karten gleich aufgebaut: Inhalt untereinander,
   der Button haengt immer buendig am unteren Kartenrand */
.dpsg-stufe-card > .wp-block-group__inner-container {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.dpsg-stufe-card .wp-block-buttons {
	margin-top: auto;
	padding-top: 12px;
}

.dpsg-color-orange { --stufe-color: #f47e3c; }
.dpsg-color-blue { --stufe-color: #1e73be; }
.dpsg-color-green { --stufe-color: #2e7d32; }
.dpsg-color-red { --stufe-color: #810a1a; }
.dpsg-color-purple { --stufe-color: #6a3fa0; }

/* Kartenkopf: Name immer oben, Altersbadge immer direkt darunter,
   bei jeder Karte gleich (vorher stand das Badge je nach Namenslaenge
   mal daneben, mal darunter) */
.dpsg-stufe-head > .wp-block-group__inner-container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.dpsg-stufe-head {
	margin-bottom: 10px;
}

.dpsg-stufe-card .dpsg-stufe-name {
	font-family: "Suez One", Georgia, serif;
	font-size: 1.35rem;
	color: var(--dpsg-blue);
	margin: 0;
	line-height: 1.25;
}

.dpsg-stufe-card .dpsg-stufe-age {
	font-size: 0.92rem;
	font-weight: 700;
	color: #ffffff;
	background-color: var(--stufe-color, var(--dpsg-blue));
	padding: 3px 10px;
	border-radius: 999px;
	margin: 0;
	display: inline-block;
}

.dpsg-stufe-card .dpsg-stufe-desc {
	font-size: 1.05rem;
	color: var(--dpsg-text);
	margin-bottom: 10px;
}

.dpsg-stufe-card .dpsg-stufe-time {
	font-size: 1rem;
	color: var(--dpsg-text-soft);
	border-left: 3px solid var(--stufe-color, var(--dpsg-blue));
	padding-left: 10px;
	margin-bottom: 12px;
}

/* "Mehr erfahren" pro Stufe: gefuellt in der Stufenfarbe mit weisser
   Schrift. Das !important ist noetig, weil die allgemeine Button-Regel
   weiter oben ebenfalls mit !important arbeitet. */
.dpsg-stufe-link .wp-block-button__link {
	background-color: var(--stufe-color, var(--dpsg-blue)) !important;
	color: #ffffff !important;
	font-weight: 700;
	font-size: 0.95rem;
	text-decoration: none !important;
	padding: 10px 22px !important;
	border-radius: 10px !important;
}

.dpsg-stufe-link .wp-block-button__link:hover {
	filter: brightness(0.88);
	text-decoration: none !important;
}

/* ---- Neu bei uns / Treffpunkt ---- */
.dpsg-neu-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: 18px;
	margin-top: 24px;
}

.dpsg-neu-karte {
	flex: 0 1 calc(33.333% - 16px);
	max-width: calc(33.333% - 16px);
	display: flex;
	flex-direction: column;
	border: 1px solid var(--dpsg-border);
	border-top: 4px solid var(--dpsg-red);
	border-radius: 10px;
	background: #fbfcfd;
	padding: 20px 22px;
}

.dpsg-neu-karte > .wp-block-group__inner-container {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

.dpsg-neu-karte h3 {
	color: var(--dpsg-blue);
	margin-top: 0;
}

.dpsg-neu-karte .wp-block-buttons {
	margin-top: auto;
	padding-top: 10px;
}

/* Kartenrahmen. Enthaelt seit 08.08.2026 ein fertiges Bild aus dem eigenen
   Uploads-Ordner statt einer Einbettung, siehe inc/karte-bild.php. */
.dpsg-karte-platzhalter {
	margin: 24px 0 16px;
	border: 1px solid var(--dpsg-border);
	border-radius: 10px;
	overflow: hidden;
	background: #eef3f6;
	position: relative;
}

.dpsg-karte-link {
	display: block;
	line-height: 0;
}

.dpsg-karte-platzhalter img {
	display: block;
	width: 100%;
	height: auto;
	/* Auf schmalen Geraeten das Bild seitlich beschneiden statt es so weit
	   zu verkleinern, dass man nichts mehr erkennt. */
	max-height: 380px;
	object-fit: cover;
	object-position: center;
	transition: transform 0.3s ease;
}

.dpsg-karte-link:hover img,
.dpsg-karte-link:focus img {
	transform: scale(1.02);
}

/* Quellenangabe, von der Lizenz verlangt */
.dpsg-karte-quelle {
	position: absolute;
	right: 0;
	bottom: 0;
	margin: 0;
	padding: 3px 9px;
	font-size: 0.72rem;
	line-height: 1.5;
	background: rgba(255, 255, 255, 0.86);
	border-top-left-radius: 10px;
	color: #3d444a;
}

.dpsg-karte-quelle a {
	color: inherit;
	text-decoration: underline;
}

/* Auf schmalen Geraeten ist das breite Format zu flach, die Karte waere nur
   gut 130px hoch. Deshalb feste Hoehe und seitlich beschneiden, die
   Markierung sitzt in der Mitte und bleibt dabei sichtbar. */
@media (max-width: 767px) {
	.dpsg-karte-link {
		display: block;
		height: 230px;
	}

	.dpsg-karte-platzhalter img {
		height: 100%;
		max-height: none;
	}
}

/* Apple- und Google-Route nebeneinander, auf schmalen Geraeten untereinander */
.dpsg-karten-knoepfe {
	gap: 12px;
}

@media (max-width: 899px) {
	.dpsg-neu-karte {
		flex-basis: calc(50% - 12px);
		max-width: calc(50% - 12px);
	}
}

@media (max-width: 600px) {
	.dpsg-neu-karte {
		flex-basis: 100%;
		max-width: 100%;
	}
}

@media (max-width: 720px) {
	.dpsg-stufen-grid > .wp-block-group__inner-container {
		grid-template-columns: 1fr;
	}
}

/* ---- Aktionen-Uebersicht (nativer Query-Loop-Block) ----
   WordPress' eigenes Spalten-Layout rechnet die Kartenbreiten knapp zu
   gross, dadurch passten nur 2 statt 3 Karten nebeneinander und alles
   klebte links. Stattdessen sauberes Grid wie bei den Stufen-Karten. */
.dpsg-aktionen-query ul.wp-block-post-template {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 18px;
	list-style: none;
	padding: 0;
	margin: 28px 0 20px;
}

.dpsg-aktionen-query ul.wp-block-post-template > li {
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
}

.dpsg-aktion-card {
	border: 1px solid var(--dpsg-border);
	border-top: 4px solid var(--dpsg-blue);
	border-radius: 10px;
	padding: 20px 22px 22px;
	background-color: #fbfcfd;
	box-shadow: var(--dpsg-shadow);
	height: 100%;
	text-align: left;
}

.dpsg-aktion-card .wp-block-post-featured-image {
	margin: -20px -22px 14px;
	border-radius: 10px 10px 0 0;
	overflow: hidden;
}

.dpsg-aktion-card .wp-block-post-featured-image img {
	width: 100%;
	height: 180px;
	object-fit: cover;
	display: block;
}

.dpsg-aktion-card .wp-block-post-title {
	font-family: "Suez One", Georgia, serif;
	font-size: 1.35rem;
	color: var(--dpsg-blue);
	margin-bottom: 8px;
	hyphens: auto;
	word-break: keep-all;
}

.dpsg-aktion-card .wp-block-post-title a {
	color: var(--dpsg-blue) !important;
	text-decoration: none !important;
}

.dpsg-aktion-card .wp-block-post-excerpt {
	font-size: 1.02rem;
	color: var(--dpsg-text-soft);
}

/* Button-Zeile am Kartenende: "Mehr erfahren" immer, "Jetzt anmelden"
   nur wenn die Aktion den Anmelde-Baustein enthaelt. Beide Karten einer
   Reihe sind gleich hoch, die Buttons sitzen buendig unten. */
.dpsg-aktion-card,
.dpsg-aktion-card > .wp-block-group__inner-container {
	display: flex;
	flex-direction: column;
}

.dpsg-aktion-card > .wp-block-group__inner-container {
	flex: 1 1 auto;
}

.dpsg-aktion-card .wp-block-post-excerpt {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.dpsg-aktion-knoepfe {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: auto;
	padding-top: 16px;
}

.dpsg-aktion-btn {
	display: inline-block;
	padding: 9px 16px;
	border-radius: 10px;
	font-weight: 700;
	font-size: 0.82rem;
	white-space: nowrap;
	text-decoration: none !important;
	transition: background-color 0.15s ease, transform 0.12s ease;
}

.dpsg-aktion-btn-mehr {
	background-color: var(--dpsg-blue);
	color: #ffffff !important;
	box-shadow: 0 2px 6px rgba(0, 48, 86, 0.25);
}

.dpsg-aktion-btn-mehr:hover {
	background-color: var(--dpsg-blue-light);
	transform: translateY(-1px);
}

.dpsg-aktion-btn-anmelden {
	background-color: var(--dpsg-accent);
	color: #ffffff !important;
	box-shadow: 0 2px 6px rgba(129, 10, 26, 0.3);
}

.dpsg-aktion-btn-anmelden:hover {
	background-color: #a00d21;
	transform: translateY(-1px);
}

/* Anmelde-Button-Baustein (auf der Aktionsseite selbst) */
.dpsg-text .wp-block-button.dpsg-anmelde-btn .wp-block-button__link {
	background-color: var(--dpsg-accent) !important;
	color: #ffffff !important;
	font-weight: 700;
	padding: 13px 30px !important;
	border-radius: 10px !important;
	box-shadow: 0 4px 16px rgba(129, 10, 26, 0.35);
}

.dpsg-text .wp-block-button.dpsg-anmelde-btn .wp-block-button__link:hover {
	background-color: #a00d21 !important;
	transform: translateY(-2px);
}

/* ---- Anmeldeseiten: Foto ganz oben ----
   Liegt als normaler Bild-Block im Inhalt, damit Simon es unter
   "Seite bearbeiten" per "Ersetzen" tauschen kann. Feste Hoehe und
   Zuschnitt sorgen dafuer, dass alle Anmeldeseiten gleich aussehen,
   egal welches Format das eingesetzte Foto hat. */
.dpsg-text .wp-block-image.dpsg-anmelde-bild {
	margin: 0 0 26px;
}

.dpsg-text .wp-block-image.dpsg-anmelde-bild img {
	width: 100%;
	height: 346px;
	object-fit: cover;
	border-radius: 10px;
	display: block;
}

@media (max-width: 640px) {
	.dpsg-text .wp-block-image.dpsg-anmelde-bild img {
		height: 200px;
	}
}

/* ---- Startseite: Leitungsteam und Vorstand ---- */
/* Gruppenfoto des Leitungsteams. Ueber die volle Inhaltsbreite von 1560px
   wirkte es erschlagend, deshalb gedeckelt und mittig. */
/* ---- Leitungsteam-Foto (01.10.2026) ----
   Das Foto ist 1024x768. Die Gruppe steht nur im mittleren Band, oben
   sind Himmel und Hausdach, unten rund 150 Pixel leerer Rasen. Ohne
   Ausschnitt wirkte das Team klein und das Bild nahm fast den ganzen
   Bildschirm ein.
   Deshalb ein Ausschnitt per CSS: 16:9 am Rechner, 3:2 auf dem Handy,
   damit die Gesichter dort groesser bleiben. object-position 55 Prozent
   schiebt den Ausschnitt nach oben, so bleibt ueber den Koepfen Luft und
   unter den Fuessen ein Streifen Rasen.
   Die Bilddatei bleibt unberuehrt, der Ausschnitt ist jederzeit
   umstellbar. Die Breite geht jetzt bis zur vollen Textspalte, damit das
   Foto buendig mit dem Text abschliesst statt leicht eingerueckt zu
   haengen. */
.dpsg-text .wp-block-image.dpsg-team-bild {
	margin: 22px auto 34px;
	max-width: 720px;
}

.dpsg-text .wp-block-image.dpsg-team-bild img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: 50% 55%;
	border-radius: 10px;
	box-shadow: var(--dpsg-shadow);
	display: block;
}

@media (max-width: 600px) {
	.dpsg-text .wp-block-image.dpsg-team-bild img {
		aspect-ratio: 3 / 2;
	}
}

.dpsg-text .wp-block-columns.dpsg-vorstand {
	gap: 22px;
	margin-bottom: 8px;
}

/* Portraits einheitlich quadratisch und rund beschnitten, damit
   unterschiedlich formatige Fotos trotzdem gleich aussehen */
.dpsg-vorstand .wp-block-image.dpsg-vorstand-bild {
	margin: 0 0 12px;
}

.dpsg-vorstand .wp-block-image.dpsg-vorstand-bild img {
	width: 190px;
	height: 190px;
	max-width: 100%;
	object-fit: cover;
	border-radius: 50%;
	display: block;
	margin: 0 auto;
	border: 4px solid #ffffff;
	box-shadow: 0 4px 16px rgba(0, 48, 86, 0.22);
}

.dpsg-vorstand .dpsg-vorstand-name {
	font-size: 1.15rem;
	margin: 0 0 2px;
	padding-left: 0;
	text-align: center;
}

.dpsg-vorstand .dpsg-vorstand-name::before {
	display: none;
}

.dpsg-vorstand .dpsg-vorstand-rolle {
	font-size: 0.98rem;
	color: var(--dpsg-text-soft);
	margin: 0;
	text-align: center;
}

@media (max-width: 640px) {
	.dpsg-text .wp-block-columns.dpsg-vorstand {
		gap: 26px;
	}

	.dpsg-vorstand .wp-block-image.dpsg-vorstand-bild img {
		width: 150px;
		height: 150px;
	}
}

/* ---- Formulare (z. B. Kontaktformular) ---- */
.dpsg-text input[type="text"],
.dpsg-text input[type="email"],
.dpsg-text input[type="tel"],
.dpsg-text input[type="url"],
.dpsg-text input[type="number"],
.dpsg-text textarea,
.dpsg-text select {
	width: 100%;
	max-width: 480px;
	padding: 10px 14px;
	border: 1px solid var(--dpsg-border);
	border-radius: 10px;
	font-family: inherit;
	font-size: 0.95rem;
	background-color: #fbfcfd;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	box-sizing: border-box;
}

.dpsg-text textarea {
	max-width: 100%;
}

.dpsg-text input[type="text"]:focus,
.dpsg-text input[type="email"]:focus,
.dpsg-text input[type="tel"]:focus,
.dpsg-text textarea:focus,
.dpsg-text select:focus {
	outline: none;
	border-color: var(--dpsg-sky);
	box-shadow: 0 0 0 3px rgba(93, 176, 232, 0.2);
}

.dpsg-text input[type="submit"],
.dpsg-text .wpcf7-submit {
	background-color: var(--dpsg-blue) !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 10px !important;
	padding: 11px 28px !important;
	font-weight: 600;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background-color 0.18s ease, transform 0.12s ease;
}

.dpsg-text input[type="submit"]:hover,
.dpsg-text .wpcf7-submit:hover {
	background-color: var(--dpsg-accent) !important;
	transform: translateY(-1px);
}

/* ---- Kalender-Widget: dezent einrahmen ---- */
.dg-calendar, [class*="kalender-digital"], [id*="kalender-digital"] {
	border-radius: var(--dpsg-radius);
	overflow: hidden;
}

/* ---- Footer ---- */
.dpsg-fuss {
	background-color: var(--dpsg-blue) !important;
	border-top: 3px solid var(--dpsg-sky);
	color: #9dc9e8;
}

#footer-widgets {
	background-color: var(--dpsg-blue);
	padding-top: 8px;
}

#footer-widgets .widget-title {
	color: #ffffff;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	font-size: 0.95rem;
	border-bottom: 1px solid var(--dpsg-sky);
	padding-bottom: 8px;
	margin-bottom: 12px;
}

#footer-widgets a,
#footer-widgets a:visited {
	color: #9dc9e8;
}

#footer-widgets a:hover {
	color: #ffffff;
}

.dpsg-fuss .wp-block-button__link {
	background-color: transparent !important;
	border: 1px solid rgba(255, 255, 255, 0.35) !important;
	color: #9dc9e8 !important;
	font-size: 0.85rem;
	padding: 6px 16px;
}

.dpsg-fuss .wp-block-button__link:hover {
	background-color: rgba(255, 255, 255, 0.1) !important;
	color: #ffffff !important;
}

#theme-attribution,
#theme-attribution a {
	color: rgba(157, 201, 232, 0.45);
	font-size: 0.78rem;
}

/* ---- Gruppenstunden: Stufen-Buttons (Seite ID 41) ---- */
body.page-id-41 .wp-block-button.is-style-outline--1 .wp-block-button__link {
	background-color: #f47e3c !important;
	border-color: #f47e3c !important;
	color: #ffffff !important;
}
body.page-id-41 .wp-block-button.is-style-outline--1 .wp-block-button__link:hover {
	background-color: #d4652a !important;
	border-color: #d4652a !important;
}

body.page-id-41 .wp-block-button.is-style-outline--2 .wp-block-button__link {
	background-color: #1e73be !important;
	border-color: #1e73be !important;
}
body.page-id-41 .wp-block-button.is-style-outline--2 .wp-block-button__link:hover {
	background-color: #15589a !important;
	border-color: #15589a !important;
}

body.page-id-41 .wp-block-button.is-style-outline--3 .wp-block-button__link {
	background-color: #15589a !important;
	border-color: #15589a !important;
}
body.page-id-41 .wp-block-button.is-style-outline--3 .wp-block-button__link:hover {
	background-color: #1e5c24 !important;
	border-color: #1e5c24 !important;
}

/* ---- Responsive: Tablet (<= 900px) ---- */
@media (max-width: 900px) {
	.dpsg-inhalt.content-area {
		padding: 28px 24px;
	}
}

/* ---- Responsive: Mobil (<= 640px) ---- */
@media (max-width: 640px) {
	.dpsg-inhalt.content-area {
		padding: 20px 16px;
		border-radius: 10px;
	}

	.dpsg-text h1 { font-size: 1.5rem; }
	.dpsg-text h2 { font-size: 1.3rem; }
	.dpsg-text h3 { font-size: 1.1rem; }

	#secondary {
		margin-top: 18px;
		padding: 20px 18px;
	}

	.dpsg-navi ul li > a {
		padding-top: 14px;
		padding-bottom: 14px;
	}
}

/* =====================================================================
   HANDY UND TABLET
   Dieser Block steht bewusst ganz am Ende, damit er die Regeln davor
   sauber ueberschreibt. Aufbau von breit nach schmal.
   ===================================================================== */

/* =====================================================================
   FOOTER IMMER AM UNTEREN RAND
   Bei kurzen Seiten (zum Beispiel "Anmeldungen") endete der Inhalt
   mitten im Fenster und darunter blieb eine graue Flaeche stehen.
   Der Seitenrahmen ist jetzt eine Spalte ueber die volle Fensterhoehe:
   der Inhaltsbereich dehnt sich aus, der Footer wird nach unten
   geschoben. Bei langen Seiten aendert sich nichts.
   ===================================================================== */
.dpsg-seite {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	/* dvh beruecksichtigt die ein- und ausfahrende Adressleiste
	   auf dem Handy, aeltere Browser nutzen weiterhin vh */
	min-height: 100dvh;
}

.dpsg-haupt {
	flex: 1 0 auto;
}

.dpsg-fuss {
	flex-shrink: 0;
	margin-top: auto;
}

/* Die WordPress-Adminleiste nimmt oben Platz weg, sonst entstuende
   unten ein Ueberhang von genau ihrer Hoehe. */
.admin-bar .dpsg-seite {
	min-height: calc(100vh - 32px);
	min-height: calc(100dvh - 32px);
}

@media screen and (max-width: 782px) {
	.admin-bar .dpsg-seite {
		min-height: calc(100vh - 46px);
		min-height: calc(100dvh - 46px);
	}
}

/* ---- Grundsatz: nichts darf seitlich herausragen ---- */
img,
iframe,
video,
embed,
object {
	max-width: 100%;
}

.dpsg-seite {
	overflow-x: hidden;
}

/* ---- Sauberer Zeilenumbruch (09.08.2026) ----
   Vorher stand hier nur overflow-wrap: break-word. Das zerhackt lange
   Woerter irgendwo mitten drin und ohne Trennstrich, was besonders bei
   deutschen Zusammensetzungen ("Jungpfadfinderstufe") auffaellt.

   Jetzt trennt der Browser richtig nach Silben und setzt einen
   Trennstrich. Die Seite ist als lang="de" ausgezeichnet, deshalb greifen
   die deutschen Trennregeln. break-word bleibt als Notnagel fuer Dinge,
   die sich nicht trennen lassen, etwa lange Adressen. */
.dpsg-text p,
.dpsg-text li,
.dpsg-text h1,
.dpsg-text h2,
.dpsg-text h3,
.dpsg-stufe-desc,
.dpsg-stufe-time,
.dpsg-neu-karte p,
.dpsg-dok-text,
.dpsg-leiter-karte p {
	hyphens: auto;
	-webkit-hyphens: auto;
	/* nicht bei jedem kurzen Wort trennen: mindestens 6 Zeichen im Wort,
	   davon 3 vor und 3 nach dem Trennstrich */
	hyphenate-limit-chars: 6 3 3;
	overflow-wrap: break-word;
}

/* Ueberschriften moeglichst gleichmaessig auf die Zeilen verteilen statt
   ein einzelnes Wort in der letzten Zeile stehen zu lassen. Browser, die
   das nicht kennen, ignorieren es einfach. */
.dpsg-text h1,
.dpsg-text h2,
.dpsg-text h3,
.dpsg-titel,
.dpsg-stufe-name,
.dpsg-quicklink-title,
.dpsg-dok-titel {
	text-wrap: balance;
	hyphens: manual;
}

/* Im Fliesstext keine einzeln stehenden Schlusszeilen */
.dpsg-text p,
.dpsg-stufe-desc,
.dpsg-neu-karte p,
.dpsg-dok-text {
	text-wrap: pretty;
}

/* Leere Footer-Widgets werden serverseitig entfernt, siehe
   inc/leere-widgets-ausblenden.php */

/* ---- Bis 782px: Abstand fuer die WordPress-Adminleiste ---- */
@media (max-width: 782px) {
	.admin-bar .dpsg-seite {
		padding-top: 0;
	}
}

/* ---- Bis 720px: Inhalte einspaltig ---- */
@media (max-width: 720px) {
	/* Startseite: Schnellzugriff-Karten untereinander */
	.dpsg-quicklinks > .wp-block-group__inner-container {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	/* Stufen- und Aktionskarten untereinander */
	.dpsg-stufen-grid > .wp-block-group__inner-container,
	.dpsg-aktionen-query ul.wp-block-post-template {
		grid-template-columns: 1fr;
		gap: 14px;
	}
}

/* ---- Bis 640px: Handy ---- */
@media (max-width: 640px) {
	/* --- Hero --- */
	.wp-block-cover.dpsg-hero-cover {
		min-height: 66vh !important;
	}

	.dpsg-hero-cover .wp-block-cover__inner-container {
		padding: 40px 18px;
	}

	.dpsg-hero-cover h1.dpsg-hero-title {
		font-size: 2rem;
		line-height: 1.15;
		margin-bottom: 14px;
	}

	.dpsg-hero-cover .dpsg-hero-eyebrow {
		font-size: 0.72rem;
		letter-spacing: 0.1em;
		margin-bottom: 12px;
	}

	.dpsg-hero-cover .dpsg-hero-text {
		font-size: 1rem;
		margin-bottom: 24px;
	}

	/* Hero-Buttons untereinander und volle Breite, damit sie
	   bequem mit dem Daumen zu treffen sind */
	.dpsg-hero-cover .wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.dpsg-hero-cover .wp-block-button {
		width: 100%;
	}

	.dpsg-hero-cover .wp-block-button .wp-block-button__link {
		display: block;
		width: 100%;
		min-width: 0;
	}

	/* --- Schnellzugriff-Karten --- */
	.dpsg-quicklink {
		padding: 16px 18px;
	}

	.dpsg-quicklink .dpsg-quicklink-title {
		font-size: 1.15rem;
	}

	.dpsg-quicklink .dpsg-quicklink-desc {
		font-size: 0.98rem;
	}

	/* --- Stufen-Karten --- */
	.dpsg-stufe-card {
		padding: 16px 18px;
	}

	.dpsg-stufe-card .dpsg-stufe-name {
		font-size: 1.2rem;
	}

	/* --- Aktionskarten --- */
	.dpsg-aktion-card {
		padding: 16px 18px 18px;
	}

	.dpsg-aktion-card .wp-block-post-featured-image {
		margin: -16px -18px 12px;
	}

	.dpsg-aktion-card .wp-block-post-featured-image img {
		height: 150px;
	}

	.dpsg-aktion-card .wp-block-post-title {
		font-size: 1.2rem;
	}

	/* Die beiden Kartenknoepfe nebeneinander lassen, aber schmaler */
	.dpsg-aktion-knoepfe {
		gap: 8px;
	}

	.dpsg-aktion-btn {
		padding: 9px 14px;
		font-size: 0.8rem;
	}

	/* --- Anmeldungen: Buttonreihe untereinander --- */
	.dpsg-anmeldungen-uebersicht {
		flex-direction: column;
		align-items: stretch;
	}

	.dpsg-anmeldungen-uebersicht .wp-block-button,
	.dpsg-anmeldungen-uebersicht .wp-block-button__link {
		width: 100%;
	}

	/* --- Formulare --- */
	.dpsg-text input[type="text"],
	.dpsg-text input[type="email"],
	.dpsg-text input[type="tel"],
	.dpsg-text input[type="url"],
	.dpsg-text input[type="number"],
	.dpsg-text textarea,
	.dpsg-text select {
		max-width: 100%;
		font-size: 16px; /* verhindert das Hineinzoomen von iPhones */
	}

	.dpsg-text input[type="submit"] {
		width: 100%;
	}

	/* --- Footer --- */
	.dpsg-fuss .wp-block-buttons {
		justify-content: center;
		gap: 8px;
	}

	.dpsg-fuss .wp-block-button__link {
		font-size: 0.82rem;
		padding: 8px 14px;
	}

	/* --- Instagram-Kopfbereich --- */
	.sb_instagram_header {
		padding: 10px 12px;
	}
}

/* ---- Bis 400px: sehr schmale Geraete ---- */
@media (max-width: 400px) {
	.dpsg-hero-cover h1.dpsg-hero-title {
		font-size: 1.7rem;
	}

	.dpsg-hero-cover .wp-block-cover__inner-container {
		padding: 32px 14px;
	}

	.dpsg-inhalt.content-area {
		padding: 16px 12px;
	}

	/* Lange Titel wie "Blumenpatenschaften" sauber trennen */
	.dpsg-aktion-card .wp-block-post-title,
	.dpsg-stufe-card .dpsg-stufe-name {
		hyphens: auto;
	}

	/* Kartenknoepfe untereinander, sonst wird es zu eng */
	.dpsg-aktion-knoepfe {
		flex-direction: column;
		align-items: stretch;
	}

	.dpsg-aktion-btn {
		text-align: center;
	}
}

/* Breiteres Layout (07.08.2026) */
@media (min-width: 1100px) {
	.dpsg-breite,
	.dpsg-haupt .dpsg-breite,
	.dpsg-kopf .dpsg-breite,
	.dpsg-fuss .dpsg-breite {
		max-width: 1560px !important;
		width: 94% !important;
	}
	.dpsg-navi > .dpsg-breite {
		max-width: 1560px !important;
	}
}

/* Karten-Raster (07.08.2026, ueberarbeitet)
   Frueher lag die Aufteilung in nth-child-Regeln (Karte 1-3 oben, 4 und 5
   unten mittig). Sobald jemand die Reihenfolge im Editor aendert, greifen
   diese Regeln auf andere Karten und die Groessen springen. Jetzt Flexbox
   mit fester Breite pro Karte: jede Karte ist gleich gross, die letzte
   Reihe wird mittig gesetzt, egal wie viele Karten es sind und in welcher
   Reihenfolge sie stehen. */
@media (min-width: 900px) {
	.dpsg-stufen-grid > .wp-block-group__inner-container {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 18px;
		grid-template-columns: none;
	}

	.dpsg-stufen-grid > .wp-block-group__inner-container > .dpsg-stufe-card {
		flex: 0 1 calc(33.333% - 16px);
		max-width: calc(33.333% - 16px);
		grid-column: auto;
	}
}

/* Aktionen: gleichmaessig 3 pro Reihe (07.08.2026) */
@media (min-width: 900px) {
	.wp-block-post-template.is-layout-grid {
		display: flex !important;
		flex-wrap: wrap;
		justify-content: center;
		grid-template-columns: none !important;
	}

	.wp-block-post-template.is-layout-grid > li {
		flex: 0 1 calc(33.333% - 16px);
		max-width: calc(33.333% - 16px);
	}
}

/* Lesbarkeit: Zeilenlaenge im Fliesstext begrenzen (07.08.2026) */
@media (min-width: 1100px) {
	.dpsg-text > p,
	.dpsg-text > ul,
	.dpsg-text > ol {
		max-width: 78ch;
	}
}

/* Schrift und Kontrast (07.08.2026)
   1. Formularelemente, Buttons und Widgets erben die Schriftart nicht von
      selbst, deshalb hier explizit auf die DPSG-Schriften gesetzt.
   2. font-smoothing steht auf auto, antialiased liess die Schrift auf dem
      Mac duenner und blasser wirken.
   3. Inhaltsflaeche hebt sich jetzt deutlicher vom Seitenhintergrund ab. */
body, button, input, select, textarea, optgroup,
.widget, .dpsg-text, .wp-block-button__link, .wp-element-button {
	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.site-title, .widget-title, .dpsg-stufe-name {
	font-family: "Suez One", Georgia, serif !important;
}

.dpsg-text,
.dpsg-text p,
.dpsg-text li {
	color: var(--dpsg-text);
}

.dpsg-inhalt.content-area {
	border: 1px solid #d3dae1;
	border-top: 4px solid var(--dpsg-blue);
	box-shadow: 0 2px 10px rgba(0, 48, 86, 0.10);
}

.dpsg-stufe-card {
	background-color: #ffffff;
}

.dpsg-stufe-time,
.dpsg-stufe-desc {
	color: #2b3238;
}

.dpsg-text h1,
.dpsg-text h2,
.dpsg-text h3,
.dpsg-text h4 {
	color: var(--dpsg-blue);
}

/* Ausnahme: Schnellzugriff-Karten bleiben in PT Sans, Suez One wirkt dort
   auf blauem Grund zu fett und wird schlechter lesbar (07.08.2026) */
.dpsg-quicklink .dpsg-quicklink-title,
.dpsg-hero-eyebrow,
.dpsg-hero-btn,
.dpsg-navi ul li > a {
	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
	font-weight: 700;
}

/* Trenner vor den Kacheln (07.08.2026) */

/* Kurzer Akzentstrich, gleiche Optik wie ueber "Unser Vorstand" */
.dpsg-quicklinks {
	position: relative;
	padding-top: 44px;
	margin-top: 44px;
	border-top: 1px solid var(--dpsg-border);
}

.dpsg-quicklinks::before {
	content: "";
	position: absolute;
	top: -2px;
	left: 0;
	width: 72px;
	height: 4px;
	background-color: var(--dpsg-red, #810a1a);
	border-radius: 2px;
}

/* Einheitlicher Trenner fuer die ganze Seite (07.08.2026)
   Feine graue Linie ueber die volle Breite mit kurzem rotem Akzent links,
   ersetzt den alten Blau-Verlauf. */
.dpsg-text hr.wp-block-separator {
	position: relative;
	border: none;
	border-top: 1px solid var(--dpsg-border) !important;
	border-image: none !important;
	height: 0;
	margin: 44px 0;
	overflow: visible;
	background: none;
}

.dpsg-text hr.wp-block-separator::before {
	content: "";
	position: absolute;
	top: -2px;
	left: 0;
	width: 72px;
	height: 4px;
	background-color: var(--dpsg-red, #810a1a);
	border-radius: 2px;
}

/* Startseite: Luft zwischen Titelbild und Einleitungstext.
   Der Abstand muss UNTER den Hero, nicht ueber die Inhaltsflaeche, sonst
   entsteht ein weisser Streifen zwischen Menueleiste und Titelbild. */
.home .dpsg-inhalt.content-area {
	padding-top: 0 !important;
}

.home .dpsg-inhalt .dpsg-text > .dpsg-hero-cover {
	margin-bottom: 72px !important;
}

/* ---- Suche als Vollbild-Overlay (07.08.2026) ---- */
.dpsg-suche-knopf .searchform {
	display: none !important;
}

.dpsg-suche-knopf {
	cursor: pointer;
	color: #ffffff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px;
}

.dpsg-suche-knopf .dpsg-suche-knopf svg::before {
	content: none !important;
}

.dpsg-lupe {
	display: block;
}

body.dpsg-suche-offen {
	overflow: hidden;
}

.dpsg-suche {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(0, 34, 61, 0.94);
	padding: 24px;
}

.dpsg-suche[hidden] {
	display: none;
}

.dpsg-suche-inner {
	width: 100%;
	max-width: 900px;
	text-align: center;
}

.dpsg-suche-titel {
	color: #ffffff !important;
	font-family: "Suez One", Georgia, serif !important;
	font-size: 2.1rem;
	margin: 0 0 22px;
}

.dpsg-suche input[type="search"] {
	width: 100%;
	font-size: 1.15rem;
	padding: 18px 20px;
	border: 2px solid #ffffff;
	border-radius: 10px;
	background-color: #ffffff;
	color: var(--dpsg-text);
}

.dpsg-suche input[type="search"]:focus {
	outline: 3px solid var(--dpsg-sky);
	outline-offset: 2px;
}

.dpsg-suche-btn {
	margin-top: 22px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background-color: var(--dpsg-red, #810a1a);
	color: #ffffff;
	border: none;
	border-radius: 10px;
	padding: 14px 34px;
	font-size: 1.05rem;
	font-weight: 700;
	cursor: pointer;
}

.dpsg-suche-btn:hover {
	background-color: #9c0f21;
}

.dpsg-suche-schliessen {
	position: absolute;
	top: 22px;
	right: 28px;
	background: none;
	border: none;
	color: #ffffff;
	font-size: 2.6rem;
	line-height: 1;
	cursor: pointer;
	padding: 4px 12px;
}

@media (max-width: 600px) {
	.dpsg-suche-titel {
		font-size: 1.5rem;
	}
}

/* Wer im System reduzierte Bewegung eingestellt hat, bekommt keine
   Animation, die Groessen wechseln dann direkt. */
@media (prefers-reduced-motion: reduce) {
	.dpsg-navi,
	.dpsg-navi > .dpsg-breite,
	.dpsg-navi .dpsg-logo-bild,
	.dpsg-navi ul.dpsg-menue > li > a {
		transition: none !important;
	}
}

/* Kompakte Menueleiste (07.08.2026): Simon wollte die kleinere Variante
   dauerhaft, nicht erst beim Scrollen. */
@media (min-width: 900px) {
	.dpsg-navi ul.dpsg-menue > li > a {
		font-size: 0.92rem;
		padding-top: 10px;
		padding-bottom: 10px;
	}
}

/* ---- Lupe: eigener Hover statt des roten Theme-Kastens (07.08.2026) ----
   Vantage faerbt die Lupe beim Hovern vollflaechig ein (59px breit, volle
   Hoehe). Durch das Flex-Layout der Leiste sah der Kasten verrutscht aus. */
.dpsg-suche-knopf,
.dpsg-navi .dpsg-suche-knopf {
	width: 38px !important;
	height: 38px !important;
	background-color: transparent !important;
	border-radius: 50%;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background-color 0.2s ease;
}

.dpsg-suche-knopf:hover,
.dpsg-suche-knopf:focus {
	background-color: rgba(255, 255, 255, 0.16) !important;
	color: #ffffff;
}

.dpsg-suche-knopf .dpsg-suche-knopf svg {
	position: static !important;
	margin: 0 !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
}

/* ---- Menueleiste schrumpft beim Scrollen (07.08.2026) ----
   Basis ist die kompakte Leiste, beim Scrollen wird sie nochmal etwas
   flacher. Alles mit Transition, damit nichts springt. */
@media (min-width: 900px) {
	.dpsg-navi {
		transition: box-shadow 0.25s ease;
	}

	.dpsg-navi .dpsg-logo-bild {
		transition: height 0.25s ease, max-height 0.25s ease;
	}

	.dpsg-navi ul.dpsg-menue > li > a {
		transition: padding 0.25s ease, font-size 0.25s ease;
	}

	.dpsg-nav-klein .dpsg-navi .dpsg-logo-bild {
		height: 25px !important;
		max-height: 25px !important;
	}

	.dpsg-nav-klein .dpsg-navi ul.dpsg-menue > li > a {
		font-size: 0.84rem;
		padding-top: 6px;
		padding-bottom: 6px;
	}

	.dpsg-nav-klein .dpsg-navi {
		box-shadow: 0 2px 12px rgba(0, 34, 61, 0.25);
	}
}

@media (prefers-reduced-motion: reduce) {
	.dpsg-navi,
	.dpsg-navi .dpsg-logo-bild,
	.dpsg-navi ul.dpsg-menue > li > a {
		transition: none !important;
	}
}

/* Weisser 1px-Streifen unter der Menueleiste (07.08.2026)
   .dpsg-kopf ist einen Pixel hoeher als die Navigation und hatte weissen
   Hintergrund plus untere Randlinie. Beides faellt weg, damit die blaue
   Leiste bruchlos in den Inhalt uebergeht. */
.dpsg-kopf {
	background-color: var(--dpsg-blue) !important;
	border-bottom: none !important;
}

/* ---- Leitungs-Kacheln (07.08.2026) ---- */
.dpsg-leiter-grid > .wp-block-group__inner-container {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 18px;
	margin: 24px 0 32px;
}

.dpsg-leiter-karte {
	border: 1px solid var(--dpsg-border);
	border-top: 4px solid var(--dpsg-blue);
	border-radius: 10px;
	background-color: #ffffff;
	box-shadow: 0 2px 8px rgba(0, 48, 86, 0.08);
	padding: 22px 20px 24px;
	text-align: center;
	overflow: hidden;
}

.dpsg-leiter-karte > .wp-block-group__inner-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	height: 100%;
}

.dpsg-leiter-bild {
	margin: 0 0 6px !important;
	width: 140px;
}

.dpsg-leiter-bild img {
	width: 140px;
	height: 140px;
	object-fit: cover;
	border-radius: 50%;
	border: 3px solid #ffffff;
	box-shadow: 0 2px 10px rgba(0, 48, 86, 0.18);
}

.dpsg-leiter-name {
	margin: 0 !important;
	font-size: 1.15rem;
	color: var(--dpsg-blue) !important;
}

.dpsg-leiter-rolle {
	margin: 0 !important;
	color: #4b5157;
	font-size: 0.95rem;
}

.dpsg-leiter-tel {
	margin: 8px 0 0 !important;
	font-weight: 700;
}

.dpsg-leiter-tel a {
	display: inline-block;
	background-color: var(--dpsg-blue);
	color: #ffffff !important;
	text-decoration: none;
	padding: 8px 18px;
	border-radius: 999px;
}

.dpsg-leiter-tel a:hover {
	background-color: var(--dpsg-red, #810a1a);
}

@media (max-width: 600px) {
	.dpsg-leiter-grid > .wp-block-group__inner-container {
		grid-template-columns: 1fr;
	}
}

/* Leiter-Kacheln: feste Breite pro Karte, damit sich beim Verschieben
   nichts verzieht (07.08.2026) */
@media (min-width: 900px) {
	.dpsg-leiter-grid > .wp-block-group__inner-container > .dpsg-leiter-karte {
		flex: 0 1 calc(33.333% - 16px);
		max-width: calc(33.333% - 16px);
	}
}

@media (min-width: 601px) and (max-width: 899px) {
	.dpsg-leiter-grid > .wp-block-group__inner-container > .dpsg-leiter-karte {
		flex: 0 1 calc(50% - 12px);
		max-width: calc(50% - 12px);
	}
}

@media (max-width: 600px) {
	.dpsg-leiter-grid > .wp-block-group__inner-container > .dpsg-leiter-karte {
		flex: 1 1 100%;
		max-width: 100%;
	}
}

/* Schnellzugriff-Kacheln: gleiche Logik, damit auch dort das Verschieben
   keine unterschiedlichen Breiten erzeugt */
@media (min-width: 900px) {
	.dpsg-quicklinks > .wp-block-group__inner-container {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		grid-template-columns: none;
	}

	.dpsg-quicklinks > .wp-block-group__inner-container > .dpsg-quicklink {
		flex: 0 1 calc(33.333% - 14px);
		max-width: calc(33.333% - 14px);
	}
}

/* Aktionen-Karten: feste Breite je Karte (07.08.2026)
   Die aeltere Regel setzt max-width auf none mit !important, deshalb hier
   nochmal ueberschreiben, sonst laufen die Karten auf volle Breite. */
@media (min-width: 900px) {
	.dpsg-aktionen-query ul.wp-block-post-template {
		display: flex !important;
		flex-wrap: wrap;
		justify-content: center;
		grid-template-columns: none !important;
	}

	.dpsg-aktionen-query ul.wp-block-post-template > li {
		flex: 0 1 calc(33.333% - 16px) !important;
		max-width: calc(33.333% - 16px) !important;
		width: auto !important;
	}
}

/* ---- Kachel-Raster mit echtem Flex-Layout (07.08.2026) ----
   Die Raster sind jetzt Gruppen mit layout type flex. WordPress rendert
   dabei KEINEN inneren Wrapper mehr, die Kacheln haengen direkt in der
   Gruppe. Deshalb hier dieselben Regeln nochmal ohne inner-container. */
.dpsg-leiter-grid.is-layout-flex,
.dpsg-stufen-grid.is-layout-flex,
.dpsg-quicklinks.is-layout-flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
}

.dpsg-leiter-grid.is-layout-flex,
.dpsg-stufen-grid.is-layout-flex {
	gap: 18px;
}

.dpsg-quicklinks.is-layout-flex {
	gap: 14px;
}

@media (min-width: 900px) {
	.dpsg-leiter-grid > .dpsg-leiter-karte,
	.dpsg-stufen-grid > .dpsg-stufe-card {
		flex: 0 1 calc(33.333% - 16px);
		max-width: calc(33.333% - 16px);
	}

	.dpsg-quicklinks > .dpsg-quicklink {
		flex: 0 1 calc(33.333% - 14px);
		max-width: calc(33.333% - 14px);
	}
}

@media (min-width: 601px) and (max-width: 899px) {
	.dpsg-leiter-grid > .dpsg-leiter-karte,
	.dpsg-stufen-grid > .dpsg-stufe-card,
	.dpsg-quicklinks > .dpsg-quicklink {
		flex: 0 1 calc(50% - 12px);
		max-width: calc(50% - 12px);
	}
}

@media (max-width: 600px) {
	.dpsg-leiter-grid > .dpsg-leiter-karte,
	.dpsg-stufen-grid > .dpsg-stufe-card,
	.dpsg-quicklinks > .dpsg-quicklink {
		flex: 1 1 100%;
		max-width: 100%;
	}
}

/* ---- Handy: Menueleiste bleibt oben stehen (07.08.2026) ----
   Auf dem Desktop macht das Sticky-Menue des Themes das schon. Auf
   schmalen Geraeten war die Leiste bisher normal mitgescrollt.
   Wichtig: .dpsg-seite hat overflow-x hidden, damit funktioniert
   position sticky in diesem Zweig NICHT. Deshalb position fixed plus
   ein Platzhalter-Abstand in gleicher Hoehe, sonst rutscht der Inhalt
   unter die Leiste. */
@media (max-width: 899px) {
	.dpsg-kopf {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 9990;
		transition: box-shadow 0.25s ease;
	}

	body.admin-bar .dpsg-kopf {
		top: 46px;
	}

	.dpsg-seite {
		padding-top: var(--dpsg-nav-hoehe, 58px) !important;
	}

	/* Nur Werte animieren, die auch wirklich zwei Pixelwerte haben. */
	.dpsg-navi .dpsg-logo-bild {
		transition: height 0.25s ease, max-height 0.25s ease;
	}

	.dpsg-kopf .logo,
	.dpsg-navi .dpsg-menue-knopf,
	.dpsg-navi .dpsg-menue-knopf {
		transition: padding 0.25s ease;
	}

	/* Waehrend des Messens (siehe inc/header-schrumpfen.php) darf nichts
	   animieren, sonst blitzt die grosse Leiste kurz auf. */
	.dpsg-nav-messen .dpsg-kopf,
	.dpsg-nav-messen .dpsg-kopf * {
		transition: none !important;
	}

	/* Zusammengefahrener Zustand beim Scrollen */
	.dpsg-nav-klein .dpsg-kopf {
		box-shadow: 0 2px 12px rgba(0, 34, 61, 0.28) !important;
	}

	/* 58px oben, 44px beim Scrollen. Nicht flacher, sonst wird der
	   Menue-Knopf kleiner als die 44px, die sich sicher antippen lassen. */
	.dpsg-nav-klein .dpsg-navi .dpsg-logo-bild {
		height: 32px !important;
		max-height: 32px !important;
	}

	.dpsg-nav-klein .dpsg-kopf .logo {
		padding: 6px 0;
	}

	.dpsg-nav-klein .dpsg-navi .dpsg-menue-knopf,
	.dpsg-nav-klein .dpsg-navi .dpsg-menue-knopf {
		padding-top: 13px;
		padding-bottom: 13px;
	}

	/* Das aufklappbare Menue liegt ueber der fixierten Leiste */
	.dpsg-menue-panel {
		z-index: 9995;
	}
}

/* ---- Kluft: Foto links, Text rechts (08.08.2026) ----
   Das Kluftfoto ist hochkant. Ohne Deckel waere es in der 38%-Spalte
   ueber 800px hoch und wuerde den ganzen Abschnitt auseinanderziehen. */
.dpsg-kluft {
	margin: 24px 0 32px;
	gap: 32px;
}

.dpsg-kluft .wp-block-media-text__media img {
	max-height: 460px;
	width: auto;
	max-width: 100%;
	display: block;
	margin: 0 auto;
	border-radius: 10px;
	border: 1px solid var(--dpsg-border);
}

.dpsg-kluft .wp-block-media-text__content {
	padding-left: 0;
	padding-right: 0;
}

.dpsg-kluft .wp-block-media-text__content p:first-child {
	margin-top: 0;
}

/* Unter 900px untereinander. Der Block bringt von Haus aus nur 600px mit,
   das passt nicht zur Breakpoint-Grenze der Seite. */
@media (max-width: 899px) {
	.dpsg-kluft.is-stacked-on-mobile {
		display: block;
	}

	.dpsg-kluft.is-stacked-on-mobile .wp-block-media-text__media {
		margin-bottom: 20px;
	}

	.dpsg-kluft .wp-block-media-text__media img {
		max-height: 380px;
	}
}

/* ---- Ort in den Stufen-Kacheln springt zur Karte (08.08.2026) ---- */
.dpsg-ort-link {
	color: inherit;
	text-decoration: underline;
	text-decoration-style: dotted;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	font-weight: 700;
}

.dpsg-ort-link:hover,
.dpsg-ort-link:focus {
	color: var(--dpsg-accent);
	text-decoration-style: solid;
}

/* Sanft scrollen, wer im System reduzierte Bewegung eingestellt hat,
   springt weiterhin direkt. */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Auf dem Handy steht die Menueleiste fest oben. Ohne diesen Abstand
   verschwindet die Ueberschrift des Sprungziels darunter. */
#treffpunkt {
	scroll-margin-top: 24px;
}

@media (max-width: 899px) {
	#treffpunkt {
		scroll-margin-top: calc(var(--dpsg-nav-hoehe, 58px) + 16px);
	}
}

/* Kurz hervorheben, damit klar ist wo man gelandet ist */
@media (prefers-reduced-motion: no-preference) {
	#treffpunkt:target {
		animation: dpsg-ziel 1.6s ease;
	}

	@keyframes dpsg-ziel {
		0%, 55% { background-color: rgba(74, 159, 216, 0.16); }
		100%    { background-color: transparent; }
	}
}

/* ---- Dokumente-Seite als Karten (08.08.2026) ----
   Gleicher Bauplan wie die Stufen-Kacheln: Flexbox mit fester Breite pro
   Karte, damit sich beim Umsortieren nichts verschiebt. Kein nth-child. */
.dpsg-dok-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: 18px;
	margin: 22px 0 26px;
}

.dpsg-dok-karte {
	flex: 0 1 calc(50% - 9px);
	max-width: calc(50% - 9px);
	border: 1px solid var(--dpsg-border);
	border-left: 4px solid var(--dpsg-accent);
	border-radius: 10px;
	padding: 20px 22px;
	background-color: #fbfcfd;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.dpsg-dok-karte:hover {
	box-shadow: 0 6px 18px rgba(0, 34, 61, 0.10);
	transform: translateY(-2px);
}

.dpsg-dok-karte > .wp-block-group__inner-container {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.dpsg-dok-titel {
	margin: 0 0 8px;
	font-size: 1.18rem;
	color: var(--dpsg-blue);
}

/* Kleines Blatt-Symbol vor dem Titel, rein dekorativ */
.dpsg-dok-titel::before {
	content: "";
	display: inline-block;
	width: 16px;
	height: 20px;
	margin-right: 10px;
	vertical-align: -3px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 30'><path d='M3.5 1.5h11l6 6v21h-17z' fill='none' stroke='%23810a1a' stroke-width='2.2' stroke-linejoin='round'/><path d='M14 1.8v6h6' fill='none' stroke='%23810a1a' stroke-width='2.2' stroke-linejoin='round'/><path d='M7.5 15h9M7.5 20h9' stroke='%23810a1a' stroke-width='2.2' stroke-linecap='round'/></svg>") center / contain no-repeat;
}

.dpsg-dok-text {
	margin: 0 0 10px;
}

.dpsg-dok-meta {
	margin: 0;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #5b646c;
}

.dpsg-dok-karte .wp-block-buttons {
	margin-top: auto;
	padding-top: 14px;
}

.dpsg-dok-hinweis {
	margin: 0 auto 8px;
	max-width: 62ch;
	text-align: center;
	color: #464e55;
}

/* Einzelne Karte (Kuendigung) nicht ueber die halbe Breite hinaus ziehen */
.dpsg-dok-grid > .dpsg-dok-karte:only-child {
	flex-basis: calc(50% - 9px);
}

@media (max-width: 899px) {
	.dpsg-dok-karte,
	.dpsg-dok-grid > .dpsg-dok-karte:only-child {
		flex-basis: 100%;
		max-width: 100%;
	}
}

/* =====================================================================
   EIGENSTAENDIGES THEME: GRUNDGERUEST, KOPF, MENUE, FUSS
   Dieser Abschnitt ersetzt das, was frueher das Eltern-Theme Vantage
   beigesteuert hat. Er steht am Ende, damit er die Regeln davor
   ueberschreibt, und benutzt ausschliesslich unsere eigenen Klassen.
   ===================================================================== */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background-color: var(--dpsg-bg);
	color: var(--dpsg-text);
	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	line-height: 1.75;
	-webkit-font-smoothing: auto;
}

/* Mittige Inhaltsspalte */
.dpsg-breite {
	width: 94%;
	max-width: 1560px;
	margin-left: auto;
	margin-right: auto;
}

/* Weisse Inhaltsflaeche auf hellem Grund */
.dpsg-haupt {
	width: 94%;
	max-width: 1560px;
	margin: 0 auto;
}

.dpsg-inhalt {
	background-color: #ffffff;
	border: 1px solid var(--dpsg-border);
	border-top: 4px solid var(--dpsg-blue);
	border-radius: 10px;
	box-shadow: 0 2px 10px rgba(0, 48, 86, 0.08);
	padding: 32px 36px 48px;
	margin: 28px auto 40px;
}

/* Die Startseite bringt ihren Hero randlos mit */
.dpsg-inhalt-start {
	padding-top: 0;
	overflow: hidden;
}

.dpsg-titel {
	margin-top: 0;
}

.dpsg-text > *:first-child {
	margin-top: 0;
}

/* Sprungmarke fuer die Tastaturbedienung */
.dpsg-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 10000;
	background: #ffffff;
	color: var(--dpsg-blue);
	padding: 12px 18px;
	border-radius: 0 0 10px 0;
	font-weight: 700;
}

.dpsg-skip:focus {
	left: 0;
}

/* ---- Kopfleiste ---------------------------------------------------- */

.dpsg-kopf {
	background-color: var(--dpsg-blue);
}

.dpsg-navi {
	background-color: var(--dpsg-blue);
}

.dpsg-navi > .dpsg-breite {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 94%;
	max-width: 1560px;
}

/* Logo links, Menue mittig, Knoepfe rechts.
   Damit das Menue wirklich in der Mitte der Leiste sitzt und nicht nur
   irgendwo dazwischen, bekommen die beiden Aussenseiten dieselbe
   Platzzuteilung (flex: 1 1 0). Wird es eng, gibt zuerst das Logo nach. */
.dpsg-navi .dpsg-logo {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
}

.dpsg-navi .dpsg-navi-rechts {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
}

.dpsg-logo-link {
	display: flex;
	align-items: center;
	padding: 8px 0;
	text-decoration: none;
}

.dpsg-logo-bild {
	display: block;
	height: 31px;
	width: auto;
	max-width: 100%;
}

.dpsg-logo-text {
	color: #ffffff;
	font-family: "Suez One", Georgia, serif;
	font-size: 1.1rem;
}

.dpsg-navi .dpsg-navi-menue {
	flex: 0 0 auto;
	margin: 0 auto;
}

/* Menue in einer Zeile */
ul.dpsg-menue {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
}

ul.dpsg-menue > li {
	position: relative;
}

ul.dpsg-menue a {
	display: block;
	text-decoration: none;
	color: #c8dff0;
	white-space: nowrap;
}

/* Untermenues klappen beim Ueberfahren auf */
ul.dpsg-untermenue {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 240px;
	list-style: none;
	margin: 0;
	padding: 6px 0;
	background-color: var(--dpsg-blue);
	box-shadow: var(--dpsg-shadow, 0 6px 20px rgba(0, 34, 61, 0.25));
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
	z-index: 100;
}

ul.dpsg-menue > li:hover > ul.dpsg-untermenue,
ul.dpsg-menue > li:focus-within > ul.dpsg-untermenue {
	opacity: 1;
	visibility: visible;
	transform: none;
}

ul.dpsg-untermenue a {
	padding: 10px 18px;
	font-size: 0.95rem;
	white-space: normal;
}

/* Lupe */
.dpsg-suche-knopf {
	flex: 0 0 auto;
	flex-shrink: 0;
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background-color: transparent;
	color: #ffffff;
	cursor: pointer;
	padding: 0;
	transition: background-color 0.2s ease;
}

.dpsg-suche-knopf:hover,
.dpsg-suche-knopf:focus {
	background-color: rgba(255, 255, 255, 0.16);
}

/* Knopf fuer das Ausklappmenue, auf dem Desktop unsichtbar */
.dpsg-menue-knopf {
	display: none;
	align-items: center;
	gap: 10px;
	border: 0;
	background: transparent;
	color: #ffffff;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	padding: 12px 4px 12px 12px;
	cursor: pointer;
}

.dpsg-menue-strich,
.dpsg-menue-strich::before,
.dpsg-menue-strich::after {
	display: block;
	width: 22px;
	height: 2px;
	background: #ffffff;
	border-radius: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.dpsg-menue-strich {
	position: relative;
}

.dpsg-menue-strich::before,
.dpsg-menue-strich::after {
	content: "";
	position: absolute;
	left: 0;
}

.dpsg-menue-strich::before { top: -7px; }
.dpsg-menue-strich::after  { top: 7px; }

.dpsg-menue-offen .dpsg-menue-strich { background: transparent; }
.dpsg-menue-offen .dpsg-menue-strich::before { transform: translateY(7px) rotate(45deg); }
.dpsg-menue-offen .dpsg-menue-strich::after  { transform: translateY(-7px) rotate(-45deg); }

/* Aufklapp-Pfeil der Untermenues, nur auf dem Handy sichtbar */
.dpsg-aufklappen {
	display: none;
}

/* ---- Fusszeile ----------------------------------------------------- */

.dpsg-fuss {
	background-color: var(--dpsg-blue);
	color: #d7e4ee;
	margin-top: 40px;
	padding: 28px 0 20px;
}

.dpsg-fuss a {
	color: #ffffff;
}

.dpsg-fuss-widgets {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 18px;
	padding-bottom: 14px;
}

.dpsg-fuss-zeile {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	padding-top: 16px;
}

.dpsg-fuss-copyright {
	margin: 0;
	font-size: 0.9rem;
}

ul.dpsg-fuss-menue {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.9rem;
}

/* ---- Nach oben ----------------------------------------------------- */

.dpsg-nach-oben {
	position: fixed;
	right: 18px;
	bottom: 18px;
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 50%;
	background: var(--dpsg-blue);
	color: #ffffff;
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
	z-index: 9980;
	box-shadow: 0 3px 12px rgba(0, 34, 61, 0.3);
}

.dpsg-nach-oben.dpsg-sichtbar {
	opacity: 0.92;
	visibility: visible;
	transform: none;
}

.dpsg-nach-oben:hover {
	opacity: 1;
}

/* ---- Ausklappmenue auf Handy und Tablet ---------------------------- */

@media (max-width: 899px) {
	.dpsg-menue-knopf {
		display: inline-flex;
		margin-left: auto;
	}

	/* Leiste 58px hoch, beim Scrollen 44px. Nicht flacher, sonst rutscht
	   der Menue-Knopf unter die 44px, die sich sicher antippen lassen. */
	.dpsg-logo-link {
		padding: 8px 0;
	}

	.dpsg-logo-bild {
		height: 42px;
	}

	.dpsg-nav-klein .dpsg-logo-link {
		padding: 6px 0;
	}

	.dpsg-nav-klein .dpsg-logo-bild {
		height: 32px;
	}

	.dpsg-logo-link,
	.dpsg-logo-bild {
		transition: height 0.25s ease, padding 0.25s ease;
	}

	.dpsg-nav-messen .dpsg-kopf,
	.dpsg-nav-messen .dpsg-kopf * {
		transition: none !important;
	}

	.dpsg-navi-menue {
		display: none;
		position: fixed;
		top: var(--dpsg-nav-hoehe, 58px);
		left: 0;
		right: 0;
		bottom: 0;
		overflow-y: auto;
		padding: 16px 14px 32px;
		background: linear-gradient(168deg, #024272 0%, var(--dpsg-blue) 46%, #00203b 100%);
		z-index: 9985;
	}

	.dpsg-menue-offen .dpsg-navi-menue {
		display: block;
	}

	.dpsg-menue-offen {
		overflow: hidden;
	}

	/* Punkte als einzelne Kacheln, jede ueber die volle Breite.
	   align-items muss hier ausdruecklich zurueckgesetzt werden: auf dem
	   Desktop steht es auf center, und in einer Spalte zentriert das
	   horizontal, dann schrumpfen die Kacheln auf Textbreite. */
	ul.dpsg-menue {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
	}

	ul.dpsg-menue > li {
		position: relative;
		border: 1px solid rgba(255, 255, 255, 0.13);
		border-radius: 10px;
		background: rgba(255, 255, 255, 0.07);
		overflow: hidden;
	}

	ul.dpsg-menue > li > a {
		color: #ffffff;
		font-size: 1.05rem;
		font-weight: 700;
		padding: 15px 54px 15px 16px;
		white-space: normal;
	}

	/* Aufklapp-Pfeil rechts als eigene Flaeche */
	.dpsg-aufklappen {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 0;
		right: 0;
		width: 52px;
		height: 54px;
		border: 0;
		border-left: 1px solid rgba(255, 255, 255, 0.13);
		background: rgba(255, 255, 255, 0.09);
		color: #ffffff;
		font-size: 1.5rem;
		line-height: 1;
		cursor: pointer;
		transition: background-color 0.18s ease, transform 0.18s ease;
	}

	.dpsg-aufklappen:hover {
		background: rgba(255, 255, 255, 0.2);
	}

	ul.dpsg-menue > li.dpsg-offen > .dpsg-aufklappen {
		transform: rotate(90deg);
	}

	/* Untermenue eingerueckt statt schwebend */
	ul.dpsg-untermenue {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		display: none;
		min-width: 0;
		background: rgba(0, 0, 0, 0.18);
		box-shadow: none;
		padding: 4px 0;
	}

	ul.dpsg-menue > li.dpsg-offen > ul.dpsg-untermenue {
		display: block;
	}

	ul.dpsg-untermenue a {
		padding-left: 30px;
		color: #dce9f4;
	}

	/* Der aktive Punkt bekommt seinen roten Balken auch hier */
	ul.dpsg-menue > li.current-menu-item,
	ul.dpsg-menue > li.current_page_item,
	ul.dpsg-menue > li.current-menu-ancestor,
	ul.dpsg-menue > li.dpsg-aktiv {
		background: rgba(255, 255, 255, 0.16);
		border-color: rgba(255, 255, 255, 0.3);
		box-shadow: inset 4px 0 0 var(--dpsg-accent);
	}

	ul.dpsg-menue > li.current-menu-item > a,
	ul.dpsg-menue > li.current_page_item > a,
	ul.dpsg-menue > li.current-menu-ancestor > a,
	ul.dpsg-menue > li.dpsg-aktiv > a {
		background: transparent;
		box-shadow: none;
	}

	.dpsg-inhalt {
		padding: 22px 18px 32px;
	}

	.dpsg-fuss-zeile {
		justify-content: center;
		text-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dpsg-nach-oben,
	.dpsg-aufklappen,
	ul.dpsg-untermenue,
	.dpsg-menue-strich,
	.dpsg-menue-strich::before,
	.dpsg-menue-strich::after {
		transition: none !important;
	}
}

/* ---- Kopfleiste bleibt oben stehen (09.08.2026) ----
   Bisher galt das nur auf schmalen Geraeten. Auf dem Desktop scrollte die
   Leiste mit, weil das mitlaufende Menue des alten Eltern-Themes beim
   Neubau nicht mitgekommen ist.

   Warum fixed und nicht sticky: .dpsg-seite hat overflow-x: hidden, und
   damit ist position: sticky fuer alles darin wirkungslos. Also fixed plus
   ein Platzhalter-Abstand in Hoehe der Leiste. Die Hoehe misst
   inc/header-schrumpfen.php und legt sie als --dpsg-nav-hoehe ab. */
.dpsg-kopf {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9990;
	transition: box-shadow 0.25s ease;
}

/* Beim Scrollen hebt sich die Leiste leicht vom Inhalt ab */
.dpsg-nav-klein .dpsg-kopf {
	box-shadow: 0 2px 12px rgba(0, 34, 61, 0.25);
}

/* Die WordPress-Adminleiste sitzt darueber und ist unterschiedlich hoch */
body.admin-bar .dpsg-kopf {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .dpsg-kopf {
		top: 46px;
	}
}

/* Platzhalter, sonst laege der Seitenanfang unter der Leiste */
.dpsg-seite {
	padding-top: var(--dpsg-nav-hoehe, 51px);
}

/* Sprungziele duerfen nicht unter der Leiste landen */
#treffpunkt {
	scroll-margin-top: calc(var(--dpsg-nav-hoehe, 51px) + 16px);
}

/* ---- Nachbesserung Ausklappmenue (09.08.2026) ----

   1. Der Safari-Trick gegen das verschwindende Logo sitzt jetzt am Logo
      selbst statt an der Kopfleiste. An der Leiste hat er alles darin mit
      position: fixed auf die Leiste bezogen statt aufs Fenster, dadurch war
      das Menue-Panel nur wenige Pixel hoch. */
.dpsg-logo-bild {
	transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

@media (max-width: 899px) {
	/* 2. Die Luecke zwischen geschrumpfter Leiste und Panel wird nicht mehr
	      per CSS bekaempft: die Schrumpf-Regeln sind spezifischer und haben
	      immer gewonnen. Stattdessen nimmt js/navi.js beim Oeffnen die
	      Klasse dpsg-nav-klein weg, damit passt die Leiste wieder zur
	      Anfangshoehe des Panels. */

	/* 3. Das Panel deckt den Rest des Fensters vollstaendig ab. dvh
	      beruecksichtigt die ein- und ausfahrende Adressleiste auf dem Handy. */
	.dpsg-navi-menue {
		height: calc(100vh - var(--dpsg-nav-hoehe, 58px));
		height: calc(100dvh - var(--dpsg-nav-hoehe, 58px));
	}

	/* Angemeldete sehen zusaetzlich die WordPress-Adminleiste ueber der
	   Seite. Das Panel muss entsprechend tiefer anfangen und kuerzer sein,
	   sonst schiebt es sich unter die Kopfleiste. Besucher merken davon
	   nichts, die haben keine Adminleiste. */
	.admin-bar .dpsg-navi-menue {
		top: calc(var(--dpsg-nav-hoehe, 58px) + 46px);
		height: calc(100vh - var(--dpsg-nav-hoehe, 58px) - 46px);
		height: calc(100dvh - var(--dpsg-nav-hoehe, 58px) - 46px);
	}
}

/* =====================================================================
   COOKIE-HINWEIS IM STAMMES-DESIGN (09.08.2026)

   Das Plugin "DSGVO All in One" bringt den Hinweis in Grau mit giftgruenen
   Knoepfen mit. Hier wird daraus unser Blau.

   Zwei Besonderheiten:
   1. Das Plugin setzt die Farben per JavaScript als style-Attribut direkt
      am Element. Inline-Angaben schlagen jedes Stylesheet, deshalb steht
      hier ueberall !important. Ohne das passiert nichts.
   2. Am Plugin selbst wird nichts geaendert. Ein Update wuerde das sonst
      wieder ueberschreiben.
   ===================================================================== */

/* Schrift der Website statt des Standard-Sans */
#tarteaucitronRoot *,
#tarteaucitronAlertBig,
#tarteaucitronAlertBig * {
	font-family: "PT Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* Der Balken selbst */
.dsdvo-cookie-notice.style1 #tarteaucitronAlertBig,
#tarteaucitronAlertBig {
	background: var(--dpsg-blue) !important;
	color: #ffffff !important;
	border-top: 3px solid var(--dpsg-accent) !important;
	box-shadow: 0 -6px 24px rgba(0, 20, 40, 0.28) !important;
	padding-top: 16px !important;
	padding-bottom: 16px !important;
	font-size: 0.95rem !important;
	line-height: 1.6 !important;
}

#tarteaucitronAlertBig #tarteaucitronDisclaimerAlert,
#tarteaucitronAlertBig #tarteaucitronDisclaimerAlert * {
	color: #ffffff !important;
}

#tarteaucitronAlertBig a {
	color: #ffffff !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
}

/* Gemeinsame Form aller drei Schaltflaechen */
#tarteaucitronAlertBig #tarteaucitronPersonalize,
#tarteaucitronAlertBig #tarteaucitronCloseAlert,
#tarteaucitronAlertBig #tarteaucitronCustomize {
	border-radius: 10px !important;
	font-weight: 700 !important;
	font-size: 0.95rem !important;
	padding: 11px 22px !important;
	margin: 6px 5px !important;
	line-height: 1.3 !important;
	border: 2px solid transparent !important;
	transition: background-color 0.18s ease, color 0.18s ease !important;
}

/* Zustimmen: die auffaelligste Flaeche, weiss auf Blau */
#tarteaucitronAlertBig #tarteaucitronPersonalize {
	background: #ffffff !important;
	color: var(--dpsg-blue) !important;
}

#tarteaucitronAlertBig #tarteaucitronPersonalize:hover {
	background: #e3ecf3 !important;
}

/* Auswahl speichern: zurueckhaltender, nur Umriss */
#tarteaucitronAlertBig #tarteaucitronCloseAlert {
	background: transparent !important;
	color: #ffffff !important;
	border-color: rgba(255, 255, 255, 0.55) !important;
}

#tarteaucitronAlertBig #tarteaucitronCloseAlert:hover {
	background: rgba(255, 255, 255, 0.14) !important;
}

/* Personalisieren: reiner Textlink */
#tarteaucitronAlertBig #tarteaucitronCustomize {
	background: transparent !important;
	color: var(--dpsg-sky) !important;
	text-decoration: underline !important;
	text-underline-offset: 3px;
	padding: 8px 12px !important;
}

#tarteaucitronAlertBig #tarteaucitronCustomize:hover {
	color: #ffffff !important;
}

/* Der Haken bei "Essenziell" */
.dsgvoaio-checkbox input:checked ~ .dsgvoaio-checkbox-indicator {
	background: var(--dpsg-sky) !important;
}

/* ---- Einstellungsfenster hinter "Personalisieren" ---- */
#tarteaucitron .tarteaucitronBorder {
	border-color: var(--dpsg-blue) !important;
}

#tarteaucitron #tarteaucitronServices .tarteaucitronMainLine,
#tarteaucitron #tarteaucitronServices .tarteaucitronTitle,
#tarteaucitron #tarteaucitronServices .tarteaucitronDetails,
#tarteaucitron #tarteaucitronInfo,
#tarteaucitron #tarteaucitronClosePanel,
#tarteaucitronAlertSmall #tarteaucitronCookiesListContainer #tarteaucitronCookiesTitle,
#tarteaucitronAlertSmall {
	background: var(--dpsg-blue) !important;
	border-color: var(--dpsg-blue) !important;
}

#tarteaucitron #tarteaucitronServices .tarteaucitronMainLine {
	border-left-color: var(--dpsg-accent) !important;
}

/* Erlauben und Ablehnen: unsere Farben statt Gruen und Rot */
#tarteaucitron .tarteaucitronAllow,
.tac_activate .tarteaucitronAllow {
	background: var(--dpsg-blue) !important;
	color: #ffffff !important;
	border-radius: 10px !important;
}

#tarteaucitron .tarteaucitronDeny {
	background: #6b7278 !important;
	color: #ffffff !important;
	border-radius: 10px !important;
}

#tarteaucitron .tarteaucitronIsSelected .tarteaucitronAllow {
	background: var(--dpsg-accent) !important;
}

/* Der kleine Dauerknopf zum Wiederaufrufen */
#tarteaucitronAlertSmall #tarteaucitronManager {
	color: #ffffff !important;
}

/* Auf schmalen Geraeten die Knoepfe untereinander statt gequetscht */
@media (max-width: 600px) {
	#tarteaucitronAlertBig #tarteaucitronPersonalize,
	#tarteaucitronAlertBig #tarteaucitronCloseAlert {
		display: block !important;
		width: 100% !important;
		margin: 8px 0 !important;
		box-sizing: border-box !important;
	}
}

/* ---- Hero-Knoepfe: der eckige Kasten dahinter (09.08.2026) ----
   Die Regeln .dpsg-hero-btn-primary und -secondary stammen aus einer
   frueheren Fassung, in der die Knoepfe von Hand gebaute Links waren.
   Heute sind es Block-Knoepfe, und dieselben Klassen sitzen jetzt auf dem
   umschliessenden .wp-block-button. Der bekam dadurch dieselbe
   Hintergrundfarbe, aber keinen Radius: hinter dem runden Knopf lag ein
   zweiter, eckiger Kasten in derselben Farbe. Abgerundet war der Knopf
   also die ganze Zeit, man hat es nur nicht gesehen.

   Der Wrapper ist nur eine Huelle und bekommt hier gar keine Optik mehr. */
.dpsg-hero-cover .wp-block-button,
.dpsg-hero-cover .wp-block-button.dpsg-hero-btn-primary,
.dpsg-hero-cover .wp-block-button.dpsg-hero-btn-secondary {
	background: transparent !important;
	background-color: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 10px;
}

/* Knoepfe in der Fusszeile (Login, Impressum, Datenschutz, Cloud) kamen
   noch mit der Standardrundung von WordPress, einer vollen Pille. Sie
   bekommen dieselbe Rundung wie alles andere. */
.dpsg-fuss .wp-block-button__link {
	border-radius: 10px;
}

/* Knoepfe des Instagram-Bereichs kommen mit eigener Rundung vom Plugin
   und fielen dadurch aus dem Rahmen. */
#sb_instagram .sbi_load_btn,
#sb_instagram .sbi_load_btn .sbi_btn_text,
#sbi_load .sbi_load_btn,
#sb_instagram .sbi_follow_btn a {
	border-radius: 10px !important;
}

/* ---- Fusszeilen-Menue (09.08.2026) ----
   Die Fusszeile zeigt jetzt ein Menue statt vier Block-Knoepfe. Als reine
   Textlinks waren die Antippflaechen nur 17px hoch, auf dem Handy zu wenig.
   Deshalb Polsterung, damit man sie sicher trifft. */
ul.dpsg-fuss-menue a {
	display: inline-block;
	padding: 10px 2px;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

ul.dpsg-fuss-menue a:hover,
ul.dpsg-fuss-menue a:focus {
	color: var(--dpsg-sky);
}

@media (max-width: 767px) {
	/* Untereinander mit ordentlichem Abstand, statt gedraengt nebeneinander */
	ul.dpsg-fuss-menue {
		gap: 4px 22px;
		justify-content: center;
	}

	ul.dpsg-fuss-menue a {
		padding: 11px 4px;
	}
}

/* ---- Platz fuer den Nach-oben-Knopf (09.08.2026) ----
   Der Knopf schwebt fest unten rechts (46px breit, 18px vom Rand). Die
   rechtsbuendigen Links der Fusszeile lagen darunter. Auf breiten
   Bildschirmen ruecken sie deshalb nach links, auf schmalen sind sie
   mittig, dort schafft ein Abstand nach unten den Platz. */
.dpsg-fuss-zeile {
	padding-right: 78px;
}

@media (max-width: 767px) {
	.dpsg-fuss-zeile {
		padding-right: 0;
	}

	.dpsg-fuss {
		padding-bottom: 74px;
	}
}

/* ---- Kacheln heben sich beim Ueberfahren (09.08.2026) ----
   Die Kacheln auf der Startseite (.dpsg-quicklink) gehen beim Ueberfahren
   ein Stueck nach oben und bekommen einen kraeftigeren Schatten. Die
   Stufenkarten auf /stufen/ und die Aktionskarten hatten das noch nicht.
   Gleiche Dauer und gleiche Kurve wie oben, damit sich die ganze Seite
   gleich anfuehlt. Der Weg ist 3px, wie bei den Startseiten-Kacheln.
   Wer im System weniger Bewegung eingestellt hat, bekommt nur den
   Schatten, keine Verschiebung. */
.dpsg-stufe-card,
.dpsg-aktion-card {
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.dpsg-stufe-card:hover,
.dpsg-aktion-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 22px rgba(0, 48, 86, 0.18);
}

@media (prefers-reduced-motion: reduce) {
	.dpsg-stufe-card,
	.dpsg-aktion-card {
		transition: box-shadow 0.15s ease;
	}

	.dpsg-stufe-card:hover,
	.dpsg-aktion-card:hover {
		transform: none;
	}
}

/* ---- Vorstand als ein gemeinsames Foto (01.10.2026) ----
   Statt drei runder Portraits ein Foto mit allen dreien, ungeschnitten.
   Gleich breit wie das Leitungsteam-Foto darueber. Die Namenszeile ist
   schmaler als das Foto, so stehen die Namen ungefaehr unter der
   jeweiligen Person (links Tabea, Mitte Hedwig, rechts Lukas). Sie
   bleibt auch auf dem Handy nebeneinander. */
.dpsg-text .wp-block-image.dpsg-vorstand-foto {
	margin: 18px auto 14px;
	max-width: 720px;
}

.dpsg-text .wp-block-image.dpsg-vorstand-foto img {
	width: 100%;
	height: auto;
	border-radius: 10px;
	box-shadow: var(--dpsg-shadow);
	display: block;
}

.dpsg-text .wp-block-columns.dpsg-vorstand-namen {
	max-width: 600px;
	margin: 0 auto 8px;
	gap: 8px;
}

.dpsg-text .dpsg-vorstand-namen .dpsg-vorstand-name {
	margin: 0;
	text-align: center;
	font-size: 1.05rem;
	line-height: 1.25;
}

.dpsg-text .dpsg-vorstand-namen .dpsg-vorstand-rolle {
	margin: 2px 0 0;
}

@media (max-width: 600px) {
	.dpsg-text .dpsg-vorstand-namen .dpsg-vorstand-name {
		font-size: 1rem;
	}

	.dpsg-text .dpsg-vorstand-namen .dpsg-vorstand-rolle {
		font-size: 0.9rem;
	}
}

/* ---- Vorstand auf dem Handy (01.10.2026) ----
   1. Lange Namen brechen auf schmalen Bildschirmen in zwei Zeilen um,
      "Hedwig Poel" nicht. Dadurch stand ihre Rolle hoeher als die der
      anderen. Jeder Name bekommt deshalb Platz fuer zwei Zeilen und
      steht unten in diesem Platz, so liegen alle Rollen auf einer Linie.
   2. Links und rechts im Foto ist nur Hecke. Auf dem Handy wird davon
      ein Streifen weggenommen (Format 1,15 statt 4:3), damit die drei
      groesser zu sehen sind. Alle drei bleiben komplett im Bild, die
      Personen reichen im Original von x 280 bis 1270 bei 1500 Breite,
      sichtbar ist 103 bis 1397. */
@media (max-width: 600px) {
	.dpsg-text .dpsg-vorstand-namen .dpsg-vorstand-name {
		min-height: 2.5em;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		text-wrap: balance;
	}

	.dpsg-text .wp-block-image.dpsg-vorstand-foto img {
		aspect-ratio: 1.15;
		object-fit: cover;
		object-position: 50% 50%;
	}
}

/* ---- Kluft-Foto freigestellt (03.10.2026) ----
   Das neue Kluftfoto hat keinen Hintergrund mehr, das Hemd steht frei.
   Rahmen und Rundung zeichneten deshalb einen leeren Kasten um das Hemd.
   Stattdessen ein weicher Schatten, der der Hemdform folgt. */
.dpsg-kluft .wp-block-media-text__media img {
	border: 0;
	border-radius: 0;
	filter: drop-shadow(0 6px 14px rgba(0, 48, 86, 0.18));
}