/* =============================================================================
 * Modernes Design – Darstellungsschicht für das BuddyBoss-Child (Stufe 1c)
 * -----------------------------------------------------------------------------
 * - Greift nur bei <body class="dg-modern">. Ohne die Klasse ändert sich nichts.
 *   Die Klasse setzt Erweiterungen/modern-design.php (Schalter, Vorgabe AUS).
 * - Farben, Schrift, Knopf-Radius und Theme-Stil kommen aus dem Backend des
 *   Eltern-Themes (BuddyBoss → Theme-Optionen), das sie als --bb-* ausgibt.
 *   Hier wird nichts davon fest eingetragen, nur abgeleitet (Mischung, Abstufung).
 *   Schriften setzt das Eltern-Theme selbst; diese Datei setzt keine font-family.
 * - Die einzige berechnete Farbe ist --dgm-primary-strong (Akzent mit mind.
 *   4,5:1 auf Weiß). PHP rechnet sie je Seite aus; der Wert unten ist der Rückfall.
 * ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
body.dg-modern {
	--dgm-primary:        var(--bb-primary-color);
	--dgm-primary-strong: color-mix(in srgb, var(--bb-primary-color) 78%, #000);
	--dgm-primary-soft:   rgba(var(--bb-primary-color-rgb), .10);
	--dgm-primary-softer: rgba(var(--bb-primary-color-rgb), .06);

	--dgm-ink:   var(--bb-headings-color);
	--dgm-text:  var(--bb-body-text-color);
	--dgm-muted: color-mix(in srgb, var(--bb-alternate-text-color) 45%, #3c4046);
	--dgm-line:  rgba(var(--bb-content-border-color-rgb), .7);
	--dgm-soft:  var(--bb-content-alternate-background-color);
	--dgm-bg:    var(--bb-content-background-color);

	/* Rundungen folgen dem Theme-Stil aus dem Backend (Stil 1: 4 px, Stil 2: 10 px)
	   und werden nur eine Stufe weicher – kein fester Wert. */
	--dgm-radius:    calc(var(--bb-block-radius) + 6px);
	--dgm-radius-md: var(--bb-block-radius);
	--dgm-radius-sm: var(--bb-input-radius);
	--dgm-pill:      999px;

	--dgm-shadow:       0 1px 2px rgba(16, 24, 40, .04), 0 6px 22px rgba(16, 24, 40, .06);
	--dgm-shadow-hover: 0 2px 4px rgba(16, 24, 40, .05), 0 14px 34px rgba(16, 24, 40, .10);
	--dgm-ease:         cubic-bezier(.2, .7, .2, 1);

	--dgm-feed-w: 760px;

	/* Knopf-Standard: immer Schwarz mit weißer Schrift (Kontrast 21:1),
	   unabhängig von der Akzentfarbe der Seite. */
	--dgm-knopf:       #000;
	--dgm-knopf-hover: #2b2b2b;
	--dgm-knopf-text:  #fff;
	--bb-primary-button-background-regular: var(--dgm-knopf);
	--bb-primary-button-border-regular:     var(--dgm-knopf);
	--bb-primary-button-background-hover:   var(--dgm-knopf-hover);
	--bb-primary-button-border-hover:       var(--dgm-knopf-hover);
	--bb-primary-button-text-regular:       var(--dgm-knopf-text);
	--bb-primary-button-text-hover:         var(--dgm-knopf-text);
	--bb-primary-button-text-regular-rgb:   255, 255, 255;
	--bb-primary-button-text-hover-rgb:     255, 255, 255;
	--bb-primary-button-focus-shadow:       0 0 0 2px #fff, 0 0 0 4px var(--dgm-knopf);
	--bb-alternate-text-color:              var(--dgm-muted);
}

/* 2. Fokus und Bewegung ----------------------------------------------------- */
body.dg-modern :is(a, button, .button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--dgm-primary-strong);
	outline-offset: 2px;
	box-shadow: 0 0 0 5px var(--dgm-bg);
}
@media (prefers-reduced-motion: reduce) {
	body.dg-modern *, body.dg-modern *::before, body.dg-modern *::after {
		transition: none !important;
		animation: none !important;
	}
}

/* Textlinks in der Akzentfarbe mit voller Lesbarkeit (WCAG 1.4.3): Profilfelder, Schritt beim Gruppe-Erstellen */
body.dg-modern:not(#dgm-a) :is(.profile-fields td.data, .group-create-buttons li.current) a { color: var(--dgm-primary-strong); }

/* 3. Seite, Kopfleiste, linke Navigation ------------------------------------ */
body.dg-modern .site-content { background: var(--bb-body-background-color); }

/* Suchfeld in der Kopfleiste als Pille */
body.dg-modern #masthead .header-search-wrap :is(input[type="search"], input[type="text"]) {
	border-radius: var(--dgm-pill);
	background: var(--dgm-soft);
	border-color: transparent;
}

/* Linke Navigation: aktiver Punkt als hell hinterlegte Pille, Symbole ruhiger */
body.dg-modern .buddypanel .side-panel-menu > li > a {
	border-radius: var(--dgm-radius-md);
	transition: background-color .2s var(--dgm-ease), color .2s var(--dgm-ease);
}
body.dg-modern .buddypanel .side-panel-menu > li > a:hover { background: var(--dgm-primary-softer); }
body.dg-modern .buddypanel .side-panel-menu > li:is(.current-menu-item, .current_page_item, .current-menu-parent) > a {
	background: var(--dgm-primary-soft);
	color: var(--dgm-primary-strong);
	font-weight: 600;
}

/* 4. Überschrift und Erklärtext der Seite ------------------------------------ */
body.dg-modern .entry-header .entry-title { letter-spacing: -.01em; }
body.dg-modern .dgl-seitentext {
	background: var(--dgm-primary-softer);
	border: 1px solid var(--dgm-primary-soft);
	border-radius: var(--dgm-radius);
	padding: 16px 20px;
	color: var(--dgm-text);
}

/* 5. Begrüßung über dem Feed (Markup aus modern-design.php) ------------------ */
body.dg-modern .dgm-hallo {
	position: relative;
	overflow: hidden;
	margin: 0 0 20px;
	padding: 24px 24px 20px;
	border: 1px solid var(--dgm-line);
	border-radius: var(--dgm-radius);
	background:
		radial-gradient(120% 140% at 100% 0%, rgba(var(--bb-primary-color-rgb), .16) 0%, rgba(var(--bb-primary-color-rgb), 0) 55%),
		var(--dgm-bg);
	box-shadow: var(--dgm-shadow);
}
/* #buddypress im Selektor: Das Eltern-Theme setzt Überschriften darin 27 px Abstand. */
body.dg-modern #buddypress .dgm-hallo .dgm-hallo__titel,
body.dg-modern .dgm-hallo__titel {
	margin: 0;
	font-size: 1.5rem;
	line-height: 1.25;
	color: var(--dgm-ink);
}
body.dg-modern .dgm-hallo__text { margin: 4px 0 0; color: var(--dgm-muted); }
body.dg-modern .dgm-hallo__zahlen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}
body.dg-modern .dgm-hallo__zahl > a,
body.dg-modern .dgm-hallo__zahl > span {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 100%;
	padding: 12px 14px;
	border: 1px solid var(--dgm-line);
	border-radius: var(--dgm-radius-md);
	background: var(--dgm-bg);
	color: var(--dgm-text);
	text-decoration: none;
	transition: box-shadow .2s var(--dgm-ease), transform .2s var(--dgm-ease);
}
body.dg-modern .dgm-hallo__zahl > a:hover { box-shadow: var(--dgm-shadow); transform: translateY(-1px); }
body.dg-modern .dgm-hallo__symbol {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: var(--dgm-radius-md);
	background: var(--dgm-primary-soft);
	color: var(--dgm-primary-strong);
	font-size: 18px;
}
body.dg-modern .dgm-hallo__wert { display: block; font-size: 1.25rem; font-weight: 700; line-height: 1.1; color: var(--dgm-ink); }
body.dg-modern .dgm-hallo__label {
	display: block;
	font-size: .8125rem;
	line-height: 1.35;
	color: var(--dgm-muted);
	overflow-wrap: anywhere;
	hyphens: auto;
}
body.dg-modern .dgm-hallo__zahl > :is(a, span) > span:last-child { min-width: 0; }

/* 5b. Start-Checkliste „Gut ankommen“ (render_checkliste) ------------------- */
body.dg-modern .dgm-start {
	margin: 18px 0 0;
	padding: 14px 16px;
	border: 1px solid var(--dgm-line);
	border-radius: var(--dgm-radius-md);
	background: var(--dgm-bg);
}
body.dg-modern .dgm-start__kopf { display: flex; align-items: center; gap: 12px; }
body.dg-modern .dgm-start__ring { position: relative; flex: 0 0 auto; width: 48px; height: 48px; }
body.dg-modern .dgm-start__ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
body.dg-modern .dgm-start__ring circle { fill: none; stroke-width: 3.5; }
body.dg-modern .dgm-start__bahn { stroke: var(--dgm-primary-soft); }
body.dg-modern .dgm-start__fuell { stroke: var(--dgm-primary-strong); stroke-linecap: round; transition: stroke-dasharray .6s var(--dgm-ease); }
body.dg-modern .dgm-start__ring > span {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	font-size: .75rem;
	font-weight: 700;
	color: var(--dgm-ink);
}
body.dg-modern .dgm-start__text { flex: 1 1 auto; min-width: 0; }
body.dg-modern #buddypress .dgm-start .dgm-start__titel,
body.dg-modern .dgm-start__titel { margin: 0; font-size: 1rem; line-height: 1.3; color: var(--dgm-ink); }
body.dg-modern .dgm-start__stand { margin: 0; font-size: .8125rem; color: var(--dgm-muted); }
body.dg-modern .dgm-start__weg { flex: 0 0 auto; font-size: .8125rem; color: var(--dgm-muted); text-decoration: underline; }
body.dg-modern .dgm-start__weg:hover { color: var(--dgm-ink); }
body.dg-modern .dgm-start__schritte {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 8px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}
body.dg-modern .dgm-start__schritt > :is(a, button, span) {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 9px 12px;
	border: 1px solid var(--dgm-line);
	border-radius: var(--dgm-radius-sm);
	background: var(--dgm-bg);
	color: var(--dgm-text);
	font: inherit;
	font-size: .875rem;
	line-height: 1.35;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	transition: border-color .2s var(--dgm-ease), box-shadow .2s var(--dgm-ease);
}
body.dg-modern .dgm-start__schritt > :is(a, button):hover { border-color: var(--dgm-primary-strong); box-shadow: var(--dgm-shadow); }
body.dg-modern .dgm-start__schritt > button:disabled { opacity: .6; cursor: progress; }
body.dg-modern .dgm-start__haken {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border: 2px solid var(--dgm-line);
	border-radius: 50%;
	font-size: 12px;
	color: transparent;
}
body.dg-modern .dgm-start__schritt.ist-fertig > span { cursor: default; background: var(--dgm-primary-softer); color: var(--dgm-muted); }
body.dg-modern .dgm-start__schritt.ist-fertig > span > span:last-child { text-decoration: line-through; }
body.dg-modern .dgm-start__schritt.ist-fertig .dgm-start__haken { border-color: var(--dgm-primary-strong); background: var(--dgm-primary-strong); color: #fff; }

/* 5c. Nächste Veranstaltung (render_termine → render_termin_gross) ------------
   Wie die Vorlage: Überschrift mit Link, darunter eine eigene Karte mit
   Datumsfeld, Trennstrich, Titel, Zeit und zwei Knöpfen; rechts wahlweise
   Kalender-Grafik oder Bild. */
body.dg-modern .dgm-termine { margin: 28px 0 0; }
body.dg-modern .dgm-termine__kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; margin: 0 0 14px; }
body.dg-modern #buddypress .dgm-termine .dgm-termine__titel,
body.dg-modern .dgm-termine__titel { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 1.25rem; font-weight: 800; line-height: 1.3; letter-spacing: -.01em; color: var(--dgm-ink); }
body.dg-modern .dgm-termine__titel i { font-size: 1.5rem; }
body.dg-modern .dgm-termine__alle { font-size: .9375rem; font-weight: 600; color: var(--dgm-primary-strong); text-decoration: none; }
body.dg-modern .dgm-termine__alle:hover { text-decoration: underline; }
body.dg-modern .dgm-termin {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	gap: 28px;
	min-height: 180px;
	padding: 28px 32px;
	border: 1px solid rgba(var(--bb-primary-color-rgb), .1);
	border-radius: 20px;
	background: var(--dgm-bg);
	box-shadow: 0 6px 24px rgba(var(--bb-primary-color-rgb), .08);
}
body.dg-modern .dgm-termin > :not(.dgm-termin__bild) { position: relative; z-index: 1; }
body.dg-modern .dgm-termin__datum {
	flex: 0 0 auto;
	align-self: flex-start;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 104px;
	height: 104px;
	border-radius: 16px;
	background: var(--dgm-primary-soft);
	color: var(--dgm-primary-strong);
	line-height: 1;
}
body.dg-modern .dgm-termin__tag { font-size: 2.75rem; font-weight: 800; letter-spacing: -.02em; }
body.dg-modern .dgm-termin__monat { margin-top: 6px; font-size: 1rem; font-weight: 700; text-transform: uppercase; }
/* senkrechter Trennstrich zwischen Datum und Text */
body.dg-modern .dgm-termin__info { display: flex; flex-direction: column; gap: 8px; min-width: 0; max-width: 54%; padding-left: 28px; border-left: 2px solid var(--dgm-line); }
body.dg-modern .dgm-termin:not(.dgm-termin--bild) .dgm-termin__info { max-width: none; }
body.dg-modern .dgm-termin__name { font-size: 1.5rem; font-weight: 800; line-height: 1.25; letter-spacing: -.01em; color: var(--dgm-ink); overflow-wrap: anywhere; }
body.dg-modern a.dgm-termin__name { text-decoration: none; }
body.dg-modern a.dgm-termin__name:hover { text-decoration: underline; }
body.dg-modern :is(.dgm-termin__zeit, .dgm-termin__ort) { display: flex; align-items: center; gap: 8px; font-size: 1rem; line-height: 1.4; color: var(--dgm-text); }
body.dg-modern .dgm-termin__zeit i { font-size: 1.125rem; color: var(--dgm-muted); }
body.dg-modern .dgm-termin__knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
body.dg-modern :is(.dgm-termin__kalender, .dgm-termin__details) {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 10px 22px;
	border-radius: 12px;
	font-size: .9375rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
}
body.dg-modern :is(.dgm-termin__kalender, .dgm-termin__details) i { font-size: 1.125rem; }
/* Hauptknopf in der lesbaren Akzentstufe (mindestens 5,5:1 zu Weiß, akzent_lesbar) */
body.dg-modern .dgm-termin__kalender { border: 1px solid var(--dgm-primary-strong); background: var(--dgm-primary-strong); color: #fff; }
body.dg-modern .dgm-termin__kalender:hover { filter: brightness(.9); color: #fff; }
body.dg-modern .dgm-termin__details { border: 1px solid var(--dgm-line); background: var(--dgm-bg); color: var(--dgm-ink); }
body.dg-modern .dgm-termin__details:hover { border-color: var(--dgm-primary-strong); color: var(--dgm-ink); }
/* Bild bzw. Grafik: rechte Hälfte, läuft nach links in die Karte aus */
body.dg-modern .dgm-termin__bild {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 46%;
	color: var(--bb-primary-color);
	pointer-events: none;
}
body.dg-modern .dgm-termin__bild::before { content: ""; position: absolute; pointer-events: none; }
body.dg-modern .dgm-termin__bild img {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: right center;
}
/* Foto: geschwungener linker Rand, davor ein Saum in der Akzentfarbe (wie die Vorlage) */
body.dg-modern .dgm-termin__bild--bild { width: 56%; }
body.dg-modern .dgm-termin__bild--bild img,
body.dg-modern .dgm-termin__bild--bild::before {
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100C14 100 16 58 21 34C25 12 30 0 40 0H100V100Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100C14 100 16 58 21 34C25 12 30 0 40 0H100V100Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
body.dg-modern .dgm-termin__bild--bild::before {
	top: 0;
	bottom: 0;
	left: -9%;
	right: 0;
	background: linear-gradient(90deg, rgba(var(--bb-primary-color-rgb), .32), rgba(var(--bb-primary-color-rgb), .06) 45%);
}
/* Grafik: weicher Hügel in der Akzentfarbe hinter dem Kalender */
body.dg-modern .dgm-termin__bild--grafik { width: 52%; }
body.dg-modern .dgm-termin__bild--grafik::before {
	inset: 0;
	background: linear-gradient(90deg, rgba(var(--bb-primary-color-rgb), .05), rgba(var(--bb-primary-color-rgb), .16));
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100C18 100 26 62 46 56C66 50 80 48 100 34V100Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100C18 100 26 62 46 56C66 50 80 48 100 34V100Z'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
}
body.dg-modern .dgm-termin__bild .dgm-kalender { position: absolute; right: 16px; bottom: 0; width: auto; height: 100%; max-width: 100%; }

/* 5e. Hintergrund der Begrüßung (hallo_grund): Motiv rechts oben, kein Verlauf über die Fläche */
body.dg-modern .dgm-oben--motiv { position: relative; overflow: hidden; }
body.dg-modern .dgm-oben--motiv > .container { position: relative; z-index: 1; }
body.dg-modern .dgm-oben--motiv > .dgm-grund {
	position: absolute;
	top: 0;
	right: 0;
	width: 72%;
	height: 230px;
	color: var(--bb-primary-color);
	pointer-events: none;
	/* läuft nach links und nach unten weich aus, keine harte Kante zwischen den Karten */
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 30%), linear-gradient(to top, transparent 0, #000 35%);
	mask-image: linear-gradient(to right, transparent 0, #000 30%), linear-gradient(to top, transparent 0, #000 35%);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
}
body.dg-modern .dgm-oben--motiv > img.dgm-grund {
	object-fit: cover;
	object-position: right center;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 45%), linear-gradient(to top, transparent 0, #000 40%);
	mask-image: linear-gradient(to right, transparent 0, #000 45%), linear-gradient(to top, transparent 0, #000 40%);
}
@media (max-width: 600px) {
	body.dg-modern .dgm-oben--motiv > .dgm-grund { width: 100%; height: 150px; opacity: .7; }
	/* Karte: Bild oben, darunter Datum und Text */
	body.dg-modern .dgm-termine { margin-top: 20px; }
	body.dg-modern .dgm-termine__titel { font-size: 1.125rem; }
	body.dg-modern .dgm-termin { flex-wrap: wrap; align-items: flex-start; gap: 14px 16px; min-height: 0; padding: 18px 16px; border-radius: 16px; }
	body.dg-modern .dgm-termin--bild { padding-top: 0; }
	body.dg-modern .dgm-termin__bild {
		position: relative;
		flex: 0 0 calc(100% + 32px);
		order: -1;
		width: auto;
		height: 130px;
		margin: 0 -16px;
	}
	body.dg-modern .dgm-termin__bild--bild img {
		-webkit-mask: linear-gradient(to bottom, #000 55%, transparent 100%);
		mask: linear-gradient(to bottom, #000 55%, transparent 100%);
	}
	body.dg-modern .dgm-termin__bild--bild::before { display: none; }
	body.dg-modern .dgm-termin__bild .dgm-kalender { left: 50%; right: auto; transform: translateX(-50%); }
	body.dg-modern .dgm-termin__datum { width: 64px; height: 68px; border-radius: 12px; }
	body.dg-modern .dgm-termin__tag { font-size: 1.75rem; }
	body.dg-modern .dgm-termin__monat { margin-top: 4px; font-size: .8125rem; }
	body.dg-modern .dgm-termin__info { flex: 1 1 0; max-width: none; padding-left: 16px; gap: 6px; }
	body.dg-modern .dgm-termin__name { font-size: 1.125rem; }
	body.dg-modern :is(.dgm-termin__zeit, .dgm-termin__ort) { font-size: .875rem; }
	body.dg-modern .dgm-termin__knoepfe { flex: 0 0 100%; margin-top: 0; }
	body.dg-modern :is(.dgm-termin__kalender, .dgm-termin__details) { flex: 1 1 auto; justify-content: center; padding: 10px 14px; }
}

/* Erklärtext unter der Begrüßung (modern-design.php verschiebt ihn) */
body.dg-modern #buddypress .dgm-hallo + .dgl-seitentext { margin-bottom: 20px; }

/* 5a. Begrüßung als Band ganz oben (body.dgm-hallo-oben) ------------------------
   Steht am Anfang von #content und reicht über dessen seitlichen Abstand
   hinaus, also von der linken Navigation bis zum rechten Rand. Der Verlauf
   beginnt in der rechten oberen Ecke. Innen läuft der Inhalt in derselben
   Spalte wie der Feed (.container wie im Inhaltsbereich). Der Seitentitel
   bleibt nur für Screenreader. */
body.dgm-hallo-oben #content { --dgm-rand: 10px; padding-left: var(--dgm-rand); padding-right: var(--dgm-rand); }
@media (min-width: 800px) {
	body.dgm-hallo-oben #content { --dgm-rand: 30px; }
}
body.dgm-hallo-oben .entry-header {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}
/* Kein Verlauf über die Fläche: Kennzahlen, Veranstaltung und Erklärtext sind eigene Karten. */
body.dg-modern .dgm-oben {
	margin: 0 calc(-1 * var(--dgm-rand, 0px));
	background: none;
}
body.dg-modern .dgm-oben__innen { padding: 0 10px; }
body.dg-modern.activity.directory .dgm-oben__innen { max-width: var(--dgm-feed-w); margin: 0 auto; }
body.dg-modern .dgm-oben .dgm-hallo {
	margin: 0;
	padding: 32px 0 28px;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	overflow: visible;
}
body.dg-modern .dgm-oben .dgm-hallo__titel { font-size: 2.25rem; font-weight: 800; letter-spacing: -.02em; }
body.dg-modern .dgm-oben .dgm-hallo__text { margin-top: 6px; font-size: 1.125rem; }
/* Kennzahlen: eigene Karten mit großem Symbolfeld */
body.dg-modern .dgm-oben .dgm-hallo__zahlen { gap: 20px; margin-top: 28px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
body.dg-modern .dgm-oben .dgm-hallo__zahl > :is(a, span) {
	gap: 18px;
	padding: 20px 22px;
	border: 1px solid rgba(var(--bb-primary-color-rgb), .1);
	border-radius: 20px;
	box-shadow: 0 6px 24px rgba(var(--bb-primary-color-rgb), .08);
}
body.dg-modern .dgm-oben .dgm-hallo__symbol { width: 56px; height: 56px; border-radius: 14px; font-size: 26px; }
body.dg-modern .dgm-oben .dgm-hallo__wert { font-size: 1.75rem; font-weight: 800; }
body.dg-modern .dgm-oben .dgm-hallo__label { margin-top: 2px; font-size: .9375rem; color: var(--dgm-text); }
body.dg-modern .dgm-oben .dgm-start { margin-top: 20px; border-radius: 20px; }
/* Erklärtext als Hinweis: Info-Symbol, Trennstrich, Text */
body.dg-modern .dgm-oben .dgl-seitentext {
	position: relative;
	margin: 0 0 28px;
	padding: 22px 28px 22px 112px;
	border: 1px solid rgba(var(--bb-primary-color-rgb), .1);
	border-radius: 20px;
	background: var(--dgm-primary-softer);
	font-size: 1rem;
	line-height: 1.6;
}
body.dg-modern .dgm-oben .dgl-seitentext::before {
	content: "i" / ""; /* nur Schmuck, Screenreader lesen nichts vor */
	position: absolute;
	top: 50%;
	left: 32px;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	border: 3px solid var(--dgm-primary-strong);
	border-radius: 50%;
	box-sizing: border-box;
	color: var(--dgm-primary-strong);
	font-size: 1.25rem;
	font-weight: 800;
	line-height: 1;
}
body.dg-modern .dgm-oben .dgl-seitentext::after {
	content: "";
	position: absolute;
	top: 22px;
	bottom: 22px;
	left: 92px;
	border-left: 2px solid rgba(var(--bb-primary-color-rgb), .25);
}
body.dg-modern .dgm-oben .dgl-seitentext :is(p:last-child) { margin-bottom: 0; }
body.dg-modern .dgm-oben .dgl-seitentext a { font-weight: 700; color: var(--dgm-primary-strong); }

/* 6. Feed: lesbare Spalte ---------------------------------------------------- */
/* Bei jeder Breite: Titel, Erklärtext und Feed teilen dieselbe Spalte. Vorher
   galt sie erst ab 1100 px; darunter war der Erklärtext (custom.css, 760 px)
   schmaler als Begrüßung und Feed. */
body.dg-modern.activity.directory :is(.entry-header, .dgl-seitentext, #buddypress) {
	max-width: var(--dgm-feed-w);
	margin-left: auto;
	margin-right: auto;
}

/* Beitragsformular: Karte, Werkzeugleiste ohne graue Fläche */
body.dg-modern #bp-nouveau-activity-form {
	border: 1px solid var(--dgm-line);
	border-radius: var(--dgm-radius);
	box-shadow: var(--dgm-shadow);
	background: var(--dgm-bg);
	overflow: hidden;
}
body.dg-modern #bp-nouveau-activity-form :is(.whats-new-form-footer, #whats-new-toolbar) {
	background: transparent;
	border-top: 1px solid var(--dgm-line);
}

/* Filter und Sortierung als Pillen */
body.dg-modern #buddypress :is(.subnav-filters, .bb-subnav-filters-container) :is(select, .bb-subnav-filters-label, .subnav-filters-opener, .bp-search input) {
	border-radius: var(--dgm-pill);
}
/* Reiter über Verzeichnissen (Mitglieder, Gruppen …): aktuelle Seite unterstrichen, ohne Fläche */
body.dg-modern #buddypress .bp-navs.dir-navs ul li a,
body.dg-modern #buddypress .bp-navs.dir-navs ul li > span {
	padding: 6px 14px;
	transition: color .2s var(--dgm-ease);
}
body.dg-modern:not(#dgm-a):not(#dgm-b):not(#dgm-c) #buddypress .bp-navs.dir-navs ul li.selected a {
	background: transparent;
	color: var(--dgm-primary-strong);
	font-weight: 600;
	text-decoration: underline 2px;
	text-underline-offset: 6px;
}
body.dg-modern #buddypress .bp-navs.dir-navs ul li.selected a::after { display: none; }
body.dg-modern #buddypress .bp-navs.dir-navs ul li a .bb-component-nav-item-point { border-bottom: 0; }

/* 7. Beitragskarten ---------------------------------------------------------- */
body.dg-modern .activity-list > li.activity-item {
	border: 1px solid var(--dgm-line);
	border-radius: var(--dgm-radius);
	box-shadow: var(--dgm-shadow);
	background: var(--dgm-bg);
	padding: 20px 20px 8px;
	margin-bottom: 16px;
	transition: box-shadow .2s var(--dgm-ease);
}
body.dg-modern .activity-list > li.activity-item:hover { box-shadow: var(--dgm-shadow-hover); }
body.dg-modern .activity-list .activity-header :is(a, .activity-post-author) { color: var(--dgm-ink); font-weight: 600; }
body.dg-modern .activity-list :is(.time-since, .activity-date, .bb-activity-time) { color: var(--dgm-muted); font-size: 13px; }
body.dg-modern .activity-list .activity-inner :is(img, video, .bb-activity-media-wrap) { border-radius: var(--dgm-radius-md); }
/* Barrierefreiheit: Links im Beitrag und „Weiterlesen“ in der lesbaren Akzentstufe
   (≥ 4,5:1); Datums-Link mit 24 px hoher Klickfläche, ohne die Zeile zu verschieben;
   Mitgliederbild am Gruppenbild 1 px weiter außen, damit vom Gruppenbild 24 px
   anklickbar bleiben. */
body.dg-modern .activity-list :is(.activity-read-more, .activity-inner, .acomment-content) a:not(.button):not([class*="bb-"]) { color: var(--dgm-primary-strong); }
body.dg-modern .activity-list .activity-date a { display: inline-block; padding-block: 4px; margin-block: -4px; }
body.dg-modern .activity-list .bp-activity-head-group .author-avatar { left: 24px; top: 24px; right: -6px; bottom: -6px; }
body.dg-modern .dgl-seitentext a:not(.button) { color: var(--dgm-primary-strong); }
/* Aktiver Unterreiter (z. B. Profil → Bearbeiten): weiße Schrift auf der
   lesbaren Akzentstufe statt auf dem hellen Akzent (3,4:1 → ≥ 4,5:1). */
body.dg-modern:not(#dgm-a):not(#dgm-b):not(#dgm-c) #buddypress :is(#subnav, .bp-subnavs):not(.dir-navs) li:is(.current, .selected) > a { background-color: var(--dgm-primary-strong); color: #fff; }

/* Aktionsleiste: Knöpfe als ruhige Flächen, „Gefällt mir“ als Chip */
body.dg-modern .activity-list .activity-meta.action { border-top-color: var(--dgm-line); }
body.dg-modern .activity-list .activity-meta.action :is(.generic-button a, a.button) {
	border-radius: var(--dgm-radius-md);
	transition: background-color .2s var(--dgm-ease), color .2s var(--dgm-ease);
}
body.dg-modern .activity-list .activity-meta.action :is(.generic-button a, a.button):hover {
	background: var(--dgm-primary-softer);
	color: var(--dgm-primary-strong);
}
body.dg-modern .activity-list .activity-meta.action a.fav.unfav,
body.dg-modern .activity-list .activity-meta.action a.has-like {
	color: var(--dgm-primary-strong);
}
body.dg-modern .activity-list .activity-meta.action a:is(.unfav, .has-like) :is(i, .bb-icon-thumbs-up, [class*="bb-icon"]) {
	animation: dgm-like .35s var(--dgm-ease);
}
@keyframes dgm-like {
	0%   { transform: scale(1); }
	45%  { transform: scale(1.25); }
	100% { transform: scale(1); }
}

/* Kommentare als weiche Blasen */
body.dg-modern .activity-comments .acomment-content-wrap,
body.dg-modern .activity-comments .acomment-display .acomment-content {
	border-radius: var(--dgm-radius-md);
}

/* 8. Gruppen- und Mitglieder-Karten ----------------------------------------- */
body.dg-modern :is(#groups-list, #members-list).grid > li .list-wrap {
	border: 1px solid var(--dgm-line);
	border-radius: var(--dgm-radius);
	box-shadow: var(--dgm-shadow);
	background: var(--dgm-bg);
	overflow: hidden;
	transition: box-shadow .25s var(--dgm-ease), transform .25s var(--dgm-ease);
}
body.dg-modern :is(#groups-list, #members-list).grid > li .list-wrap:hover {
	box-shadow: var(--dgm-shadow-hover);
	transform: translateY(-3px);
}
/* Titelbild der Gruppenkarte oben bündig, Gruppenbild überlappend mit Rand */
body.dg-modern #groups-list.grid .bs-group-cover { border-radius: 0; }
body.dg-modern #groups-list.grid .item-avatar img.avatar {
	border: 3px solid var(--dgm-bg);
	border-radius: var(--dgm-radius-md);
	box-shadow: var(--dgm-shadow);
}
body.dg-modern #members-list.grid .item-avatar img.avatar {
	border: 3px solid var(--dgm-bg);
	box-shadow: 0 0 0 1px var(--dgm-line);
}
body.dg-modern :is(#groups-list, #members-list) .list-wrap :is(.item-meta, .group-details, .last-activity) { color: var(--dgm-muted); }

/* Knöpfe in Karten: „Beitreten“ kräftig, „Mitglied/Beigetreten“ als heller Zustand.
   Nicht in der Symbolleiste unten in der Mitgliederkarte (.footer-button-wrap):
   Dort zeigt das Eltern-Theme nur Symbole, eine Füllung wird zum farbigen Kreis. */
body.dg-modern :is(#groups-list, #members-list) .list-wrap :is(.generic-button a, .generic-button button, a.button, button.button):not(.footer-button-wrap *) {
	border-radius: var(--bb-button-radius);
	border-color: var(--dgm-primary-strong);
	color: var(--dgm-primary-strong);
	font-weight: 600;
	transition: background-color .2s var(--dgm-ease), color .2s var(--dgm-ease);
}
body.dg-modern :is(#groups-list, #members-list) .list-wrap :is(.generic-button a, .generic-button button):is(.join-group, .request-membership, .add):not(.footer-button-wrap *) {
	background: var(--dgm-knopf);
	border-color: var(--dgm-knopf);
	color: var(--dgm-knopf-text);
}
body.dg-modern :is(#groups-list, #members-list) .list-wrap :is(.generic-button a, .generic-button button):is(.leave-group, .group-member, .is_friend, .pending, .membership-requested):not(.footer-button-wrap *) {
	background: var(--dgm-primary-soft);
	border-color: transparent;
	color: var(--dgm-primary-strong);
}
/* Symbolleiste der Mitgliederkarte: Symbole bleiben ruhig, beim Überfahren in Akzentfarbe */
body.dg-modern #members-list .footer-button-wrap :is(a, button) i::before { transition: color .2s var(--dgm-ease); }
body.dg-modern #members-list .footer-button-wrap :is(a, button):is(:hover, :focus-visible) i::before { color: var(--dgm-primary-strong); }

/* 9. Kopfbereich Profil und Gruppe ------------------------------------------ */
/* Rahmen und Titelbild mit denselben Ecken. Das Eltern-Theme rundet den Rahmen
   nur unten (0 0 10px 10px), das runde Bild ließ oben die eckige Linie stehen. */
body.dg-modern #buddypress #cover-image-container {
	border-radius: var(--dgm-radius);
}
body.dg-modern #cover-image-container :is(#header-cover-image, .header-cover-image) {
	border-radius: calc(var(--dgm-radius) - 1px) calc(var(--dgm-radius) - 1px) 0 0;
}
body.dg-modern #cover-image-container #item-header-avatar img.avatar {
	border: 4px solid var(--dgm-bg);
	box-shadow: var(--dgm-shadow);
}
body.dg-modern #item-header-content :is(.item-meta, .group-status, .bp-member-type, .activity) { color: var(--dgm-muted); }

/* Kennzahlen im Profilkopf (modern-design.php) */
body.dg-modern .dgm-profilzahlen {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	margin: 10px 0 0;
	padding: 0;
	list-style: none;
}
body.dg-modern .dgm-profilzahlen li { margin: 0; }
body.dg-modern .dgm-profilzahlen a { color: var(--dgm-muted); font-size: 14px; }
body.dg-modern .dgm-profilzahlen a:hover .dgm-profilzahlen__label { color: var(--dgm-primary-strong); }
body.dg-modern .dgm-profilzahlen__wert { color: var(--dgm-ink); font-weight: 700; }

/* Reiter auf Detailseiten: Unterstrich in Akzentfarbe statt Kasten */
body.dg-modern #item-nav .bp-navs ul li a,
body.dg-modern #object-nav ul li a {
	border-radius: 0;
	transition: color .2s var(--dgm-ease), box-shadow .2s var(--dgm-ease);
}
body.dg-modern #item-nav .bp-navs ul li:is(.current, .selected) a,
body.dg-modern #object-nav ul li:is(.current, .selected) a {
	color: var(--dgm-primary-strong);
	box-shadow: inset 0 -3px 0 var(--dgm-primary-strong);
}

/* 10. Diskussionen (bbPress) ------------------------------------------------- */
body.dg-modern #bbpress-forums :is(.bs-forums-items, ul.bbp-topics, ul.bbp-forums) {
	border: 1px solid var(--dgm-line);
	border-radius: var(--dgm-radius);
	box-shadow: var(--dgm-shadow);
	background: var(--dgm-bg);
	overflow: hidden;
}
body.dg-modern #bbpress-forums :is(.bs-item-list, ul.bbp-topics > li, .bs-forums-items > li) {
	transition: background-color .2s var(--dgm-ease);
}
body.dg-modern #bbpress-forums :is(.bs-item-list, ul.bbp-topics > li, .bs-forums-items > li):hover {
	background: var(--dgm-primary-softer);
}
/* Antwortzahl als Chip */
body.dg-modern #bbpress-forums :is(.bs-replies, .bbp-topic-reply-count) {
	display: inline-block;
	padding: 2px 10px;
	border-radius: var(--dgm-pill);
	background: var(--dgm-primary-soft);
	color: var(--dgm-primary-strong);
	font-size: 12px;
	font-weight: 600;
}

/* 11. Nachrichten ------------------------------------------------------------ */
body.dg-modern #bp-message-thread-list .bp-message-content-wrap {
	display: inline-block;
	max-width: min(72ch, 100%);
	background: var(--dgm-soft);
	border-radius: 4px var(--dgm-radius) var(--dgm-radius) var(--dgm-radius);
	padding: 10px 14px;
	margin-top: 4px;
	color: var(--dgm-ink);
}
body.dg-modern #bp-message-thread-list .message-metadata time { color: var(--dgm-muted); }
body.dg-modern .bp-messages-threads-list .thread-item :is(.thread-content, a) { border-radius: var(--dgm-radius-md); }

/* 12. Meldungen, Ladeanzeige --------------------------------------------------- */
body.dg-modern #buddypress .bp-feedback {
	border-radius: var(--dgm-radius-md);
	box-shadow: var(--dgm-shadow);
	animation: dgm-einblenden .3s var(--dgm-ease);
}
@keyframes dgm-einblenden {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: none; }
}
/* Lade-Platzhalter: sanftes Schimmern statt Drehkreis, wo BuddyBoss eine Lade-Zeile zeigt */
body.dg-modern #buddypress .bp-list li.load-more a,
body.dg-modern #buddypress .bp-list li.load-newest a {
	border-radius: var(--dgm-pill);
}

/* 12-. Barrierefreiheit: Zielgrößen und Kontraste, die BuddyBoss knapp verfehlt */
/* Links im Kopf des Handymenüs (Name, „Mein Konto“): mindestens 24 px hoch (WCAG 2.5.8) */
body.dg-modern .bb-mobile-panel-header .user-wrap a:not(:has(img)),
body.dg-modern .bb-mobile-panel-header .my-account-link a { display: inline-block; min-height: 24px; line-height: 24px; }
/* Profil-/Gruppentyp-Etikett: Akzent als Schrift auf seiner Tönung nur in der lesbaren Stufe (vorher 3:1) */
body.dg-modern:not(#dgm-a) :is(.bp-member-type, .bp-group-type .group-type) { color: var(--dgm-primary-strong); }
/* Aktiver Punkt im Handymenü: BuddyBoss nimmt dort die Akzentfarbe mit weißer Schrift (Orange: 3,4:1) */
body.dg-modern:not(#dgm-a) .bb-mobile-panel-inner .bb-primary-menu .current-menu-item > a { background-color: var(--dgm-primary-strong); }

/* 12a. Seitenwechsel läuft: Leiste, Menü, Kopfzeile kurz gesperrt (dg-modern.js 8) */
html.dgm-laedt body.dg-modern :is(.dgm-leiste, .bb-mobile-panel-wrapper .main-navigation, .dgm-kopf, #masthead .header-aside) a[href]:not(.dgm-laedt-ziel) { opacity: .55; transition: opacity .15s; }
html.dgm-laedt body.dg-modern .dgm-laedt-ziel { animation: dgm-laedt 1s ease-in-out infinite; }
@keyframes dgm-laedt { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
	html.dgm-laedt body.dg-modern .dgm-laedt-ziel { animation: none; opacity: .7; }
}

/* 12b. Dunkelmodus-Wahl im Menü (nur App, dg-modern.js 6) ----------------------- */
body.dg-modern .dgm-farbwahl {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 12px;
	margin: 0;
	padding: 12px 20px;
	list-style: none;
	border-bottom: 1px solid var(--dgm-line);
}
/* Im Handymenü unter dem Menü: Trennlinie zum Menü */
body.dg-modern .bb-mobile-panel-inner > .main-navigation + .dgm-farbwahl { margin-top: 8px; border-top: 1px solid var(--dgm-line); }
body.dg-modern .bb-mobile-panel-inner > .dgm-farbwahl:last-child { border-bottom: 0; padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
/* Offenes Handymenü: Cookie- und Hilfe-Knopf lägen über den Schaltern */
body.dg-modern.bb-mobile-panel-open :is(.inrv-faq-fab, #dgc-oeffnen) { visibility: hidden; }
body.dg-modern .user-wrap .sub-menu-inner > li.dgm-farbwahl { padding: 10px 16px; border-bottom: 0; border-top: 1px solid var(--dgm-line); }
body.dg-modern .dgm-farbwahl__titel {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--bb-headings-color);
	font-size: .9375rem;
	font-weight: 600;
}
body.dg-modern .dgm-farbwahl__titel i { font-size: 1.25rem; }
body.dg-modern .dgm-farbwahl__knoepfe {
	display: inline-flex;
	padding: 3px;
	border-radius: var(--dgm-pill);
	background: var(--bb-content-alternate-background-color);
	border: 1px solid var(--dgm-line);
}
body.dg-modern .dgm-farbwahl__knoepfe button {
	min-height: 32px;
	padding: 4px 12px;
	border: 0;
	border-radius: var(--dgm-pill);
	background: transparent;
	color: var(--bb-body-text-color);
	font-size: .8125rem;
	font-weight: 500;
	line-height: 1.2;
	box-shadow: none;
	cursor: pointer;
}
body.dg-modern .dgm-farbwahl__knoepfe button[aria-checked="true"] {
	background: var(--dgm-knopf);
	color: var(--dgm-knopf-text);
	font-weight: 600;
}
body.dg-modern .dgm-farbwahl__knoepfe button:focus-visible { outline: 2px solid var(--bb-primary-color); outline-offset: 2px; }
/* Startseite der App (dg-modern.js 6b) */
body.dg-modern .dgm-startwahl select {
	min-height: 36px;
	max-width: 100%;
	padding: 4px 32px 4px 12px;
	border: 1px solid var(--dgm-line);
	border-radius: var(--dgm-pill);
	background-color: var(--bb-content-alternate-background-color);
	color: var(--bb-body-text-color);
	font-size: .875rem;
}
/* Was aufs Handy kommt (dg-modern.js 6c): Schalter untereinander */
body.dg-modern .dgm-pushwahl__liste { display: flex; flex-direction: column; gap: 6px; width: 100%; }
body.dg-modern .dgm-pushwahl__hinweis { display: block; width: 100%; margin: 4px 0 6px; color: var(--bb-body-text-color); font-size: .8125rem; line-height: 1.4; }
body.dg-modern .dgm-pushwahl__hinweis[hidden] { display: none; }
body.dg-modern .dgm-pushwahl__liste label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 36px;
	margin: 0;
	color: var(--bb-body-text-color);
	font-size: .875rem;
	font-weight: 500;
	cursor: pointer;
}
body.dg-modern .dgm-pushwahl__liste input[role="switch"] {
	appearance: none;
	-webkit-appearance: none;
	position: relative;
	flex: 0 0 auto;
	order: 2;
	width: 40px;
	height: 24px;
	margin: 0;
	border: 1px solid var(--dgm-line);
	border-radius: var(--dgm-pill);
	background: var(--bb-content-alternate-background-color);
	cursor: pointer;
	transition: background-color .15s;
}
body.dg-modern .dgm-pushwahl__liste input[role="switch"]::before {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--bb-body-text-color);
	transition: transform .15s;
}
body.dg-modern .dgm-pushwahl__liste input[role="switch"]:checked { background: var(--dgm-knopf); border-color: var(--dgm-knopf); }
body.dg-modern .dgm-pushwahl__liste input[role="switch"]:checked::before { background: var(--dgm-knopf-text); transform: translateX(16px); }
body.dg-modern .dgm-pushwahl__liste input[role="switch"]:focus-visible { outline: 2px solid var(--bb-primary-color); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
	body.dg-modern .dgm-pushwahl__liste input[role="switch"],
	body.dg-modern .dgm-pushwahl__liste input[role="switch"]::before { transition: none; }
}

/* 13. Handy --------------------------------------------------------------------- */
/* Erklärtext auf dem Handy: Pfeil neben der Überschrift klappt ihn auf
   (dg-modern.js setzt Knopf und Klasse dgm-zu). Am Rechner kein Pfeil. */
body.dg-modern .dgm-pfeil {
	display: none;
	width: 36px;
	height: 36px;
	margin-left: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--dgm-primary-soft);
	color: var(--dgm-primary-strong);
	font-size: 18px;
	line-height: 1;
	vertical-align: middle;
	cursor: pointer;
}
body.dg-modern .dgm-pfeil i { display: inline-block; transition: transform .2s var(--dgm-ease); }
body.dg-modern .dgm-pfeil[aria-expanded="true"] i { transform: rotate(180deg); }

/* Kopfzeile auf dem Handy (template-parts/header-mobile.php). Anmelden und
   Abmelden sehen aus wie die Symbole der unteren Leiste. */
body.dg-modern .dgm-kopf .bb-left-panel-icon-wrap { min-width: 24px; }
body.dg-modern .dgm-kopf .header-aside { display: flex; align-items: center; gap: 6px; }
body.dg-modern .dgm-kopf__symbol {
	display: inline-grid;
	place-items: center;
	min-width: 44px;
	min-height: 44px;
	margin-right: -10px;
	color: var(--dgm-muted);
	text-decoration: none;
}
body.dg-modern .dgm-kopf__symbol i { font-size: 26px; line-height: 1; }
/* Handysymbol „Als App ablegen“ (nur im Feed). Beim Laden: kurz wackeln,
   anheben, zurück (dg-modern.js setzt dgm-wink einmal). */
body.dg-modern button.dgm-kopf__app {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--dgm-primary-strong);
	cursor: pointer;
}
body.dg-modern .dgm-kopf__app.dgm-wink i { animation: dgm-wink 1.6s var(--dgm-ease) .6s 1 both; }
@keyframes dgm-wink {
	0%   { transform: none; }
	12%  { transform: rotate(-16deg); }
	24%  { transform: rotate(14deg); }
	36%  { transform: rotate(-10deg); }
	48%  { transform: rotate(6deg); }
	60%  { transform: translateY(-4px) scale(1.15); }
	80%  { transform: translateY(-4px) scale(1.15); }
	100% { transform: none; }
}
@media (display-mode: standalone), (display-mode: fullscreen) {
	body.dg-modern .dgm-kopf__app { display: none; }
}

/* Dialog mit Anleitung (Safari, Firefox: kein Angebot des Browsers) */
body.dg-modern .dgm-app {
	width: min(92vw, 380px);
	padding: 24px 22px 20px;
	border: 0;
	border-radius: var(--dgm-radius);
	background: var(--dgm-bg);
	color: var(--dgm-text);
	box-shadow: var(--dgm-shadow-hover);
}
body.dg-modern .dgm-app::backdrop { background: rgba(17, 24, 39, .45); }
body.dg-modern .dgm-app__symbol {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	margin-bottom: 12px;
	border-radius: var(--dgm-radius-md);
	background: var(--dgm-primary-soft);
	color: var(--dgm-primary-strong);
	font-size: 28px;
}
body.dg-modern .dgm-app__titel { margin: 0 0 6px; font-size: 1.125rem; line-height: 1.3; color: var(--dgm-ink); }
body.dg-modern .dgm-app__text { margin: 0 0 12px; color: var(--dgm-muted); font-size: .9375rem; }
body.dg-modern .dgm-app__schritte { margin: 0 0 18px 1.2em; padding: 0; font-size: .9375rem; }
body.dg-modern .dgm-app__schritte li { margin: 0 0 6px; }
body.dg-modern .dgm-app__knoepfe { margin: 0; text-align: right; }
body.dg-modern .dgm-app__knoepfe .button { border: 1px solid var(--dgm-knopf); border-radius: var(--dgm-pill); background: var(--dgm-knopf); color: var(--dgm-knopf-text); box-shadow: none; }
body.dg-modern .dgm-app__knoepfe .button:is(:hover, :focus-visible) { background: var(--dgm-knopf-hover); border-color: var(--dgm-knopf-hover); color: var(--dgm-knopf-text); }
body.dg-modern .dgm-app__knoepfe .button + .button { margin-left: 8px; }
body.dg-modern .dgm-app__knoepfe .button.dgm-app__spaeter,
body.dg-modern .dgm-app__knoepfe .button.dgm-app__spaeter:is(:hover, :focus-visible) { background: #fff; color: var(--dgm-knopf); }
body.dg-modern .dgm-kopf__symbol:is(:hover, :focus-visible) { color: var(--dgm-primary-strong); }

/* Linie „Neu seit Ihrem letzten Besuch“ im Feed (dg-modern.js, Abschnitt 4b) */
body.dg-modern .activity-list > li.dgm-neu-trenner {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 8px 0 20px;
	padding: 0;
	list-style: none;
	background: none;
	border: 0;
	box-shadow: none;
	color: var(--dgm-primary-strong);
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .02em;
}
body.dg-modern .activity-list > li.dgm-neu-trenner::before,
body.dg-modern .activity-list > li.dgm-neu-trenner::after {
	content: "";
	flex: 1;
	height: 1px;
	background: color-mix(in srgb, var(--dgm-primary-strong) 35%, transparent);
}
/* Nachrichten und Benachrichtigungen: Fenster am Kopf statt am Symbol verankern,
   sonst ragt es (330 px, rechtsbündig am Symbol) auf schmalen Handys links hinaus. */
body.dg-modern .dgm-kopf .bb-mobile-header { position: relative; }
body.dg-modern .dgm-kopf .header-aside .notification-wrap { position: static; }
body.dg-modern .dgm-kopf .header-aside .notification-wrap :is(.notification-dropdown, .header-dropdown) {
	left: 8px;
	right: 8px;
	width: auto;
	max-width: none;
}

/* Untere Navigationsleiste (modern-design.php), nur auf dem Handy sichtbar */
body.dg-modern .dgm-leiste { display: none; }

@media (max-width: 767px) {
	/* Unsichtbare Tooltips des Eltern-Themes (::after an Symbolknöpfen) ragen
	   über den Rand und erzeugen Querscrollen. Das Eltern-Theme schneidet .site
	   mit hidden ab, Inhaltspakete der Seite (z. B. body.pkg-inrv) setzen das mit
	   !important auf visible zurück, vermutlich wegen sticky. clip erhält sticky
	   und schneidet trotzdem ab, deshalb hier mit !important am #page. */
	body.dg-modern #page { overflow-x: clip !important; }

	body.dg-modern .dgm-pfeil { display: inline-grid; place-items: center; }
	body.dg-modern :is(.entry-title, .dgm-hallo__titel):has(+ .dgm-pfeil) { display: inline-block; vertical-align: middle; }
	body.dg-modern .dgl-seitentext.dgm-zu { display: none; }

	body.dg-modern .dgm-leiste {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 610;
		padding: 0 6px env(safe-area-inset-bottom);
		background: var(--dgm-bg);
		border-top: 1px solid var(--dgm-line);
		box-shadow: 0 -4px 16px rgba(17, 24, 39, .06);
	}
	body.dg-modern .dgm-leiste__liste {
		display: flex;
		align-items: center;
		height: 64px;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	body.dg-modern .dgm-leiste__liste > li { flex: 1 1 0; min-width: 0; order: 1; margin: 0; }
	body.dg-modern .dgm-leiste__liste > li:nth-child(n+3) { order: 3; }
	body.dg-modern .dgm-leiste__liste > li > a {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		min-height: 48px;
		padding: 4px 2px;
		color: var(--dgm-muted);
		font-size: 11px;
		line-height: 1.2;
	}
	/* Das Menü-Symbol-Plugin setzt die Größe inline (für die linke Navigation) */
	body.dg-modern .dgm-leiste__liste > li > a i { margin: 0 !important; font-size: 26px !important; line-height: 1; }
	/* Nur Symbole (Wunsch des Nutzers). Die Beschriftung bleibt für Screenreader. */
	body.dg-modern .dgm-leiste__liste > li > a span {
		position: absolute !important;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}
	body.dg-modern .dgm-leiste__liste > li > a { text-decoration: none; }
	/* Menüpunkt ohne Symbol: Beschriftung doch zeigen, sonst wäre er leer */
	body.dg-modern .dgm-leiste__liste > li:not(.dgm-leiste__neu) > a:not(:has(i, img)) span {
		position: static !important; width: auto; height: auto; clip: auto; max-width: 100%; text-overflow: ellipsis;
	}
	body.dg-modern .dgm-leiste__liste > li:is(.current-menu-item, .current_page_item, .current-menu-parent) > a { color: var(--dgm-primary-strong); font-weight: 600; }
	/* Aktive Seite nicht nur über die Farbe (WCAG 1.4.1): Strich unter dem Symbol */
	body.dg-modern .dgm-leiste__liste > li:is(.current-menu-item, .current_page_item, .current-menu-parent):not(.dgm-leiste__neu) > a::after {
		content: ""; width: 20px; height: 3px; border-radius: 2px; background: currentColor;
	}
	body.dg-modern .dgm-leiste__liste > li.dgm-leiste__neu { flex: 0 0 auto; order: 2; margin: 0 4px; }
	body.dg-modern .dgm-leiste__liste > li.dgm-leiste__neu > a {
		width: 48px;
		height: 48px;
		border-radius: 50%;
		background: var(--dgm-primary-strong);
		color: #fff;
		box-shadow: var(--dgm-shadow);
		transform: translateY(-6px);
	}
	body.dg-modern .dgm-leiste__liste > li.dgm-leiste__neu > a:hover { background: color-mix(in srgb, var(--dgm-primary-strong) 85%, #000); }
	/* Platz am Seitenende. Nicht über padding am body: Das setzt auf der Testseite
	   ein anderes Inline-Skript mit !important auf 0. */
	/* Fokus nicht unter der Leiste verstecken (WCAG 2.4.11) */
	html:has(body.dg-modern .dgm-leiste) { scroll-padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
	body.dg-modern:has(.dgm-leiste)::after {
		content: "";
		display: block;
		height: calc(64px + env(safe-area-inset-bottom));
	}
	/* Schwebende Knöpfe (Hilfe, Datenschutz-Einstellungen) über die Leiste heben */
	body.dg-modern:has(.dgm-leiste) :is(.inrv-faq-fab, #dgc-oeffnen) {
		bottom: calc(80px + env(safe-area-inset-bottom)) !important;
	}

	body.dg-modern .dgm-hallo { padding: 18px 16px 16px; }
	body.dg-modern .dgm-hallo__titel { font-size: 1.25rem; }
	body.dg-modern .dgm-hallo__zahlen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
	body.dg-modern .dgm-hallo__zahl > :is(a, span) { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px; }
	body.dg-modern .dgm-hallo__symbol { width: 28px; height: 28px; font-size: 15px; }
	body.dg-modern .dgm-oben .dgm-hallo { padding: 22px 0 20px; }
	body.dg-modern .dgm-oben .dgm-hallo__titel { font-size: 1.375rem; }
	body.dg-modern .dgm-oben .dgm-hallo__text { font-size: 1rem; }
	body.dg-modern .dgm-oben .dgm-hallo__zahlen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 18px; }
	body.dg-modern .dgm-oben .dgm-hallo__zahl > :is(a, span) { gap: 8px; padding: 12px 10px; border-radius: 14px; }
	body.dg-modern .dgm-oben .dgm-hallo__symbol { width: 36px; height: 36px; border-radius: 10px; font-size: 18px; }
	body.dg-modern .dgm-oben .dgm-hallo__wert { font-size: 1.25rem; }
	body.dg-modern .dgm-oben .dgm-hallo__label { font-size: .8125rem; }
	body.dg-modern .dgm-oben .dgm-start { border-radius: 14px; }
	body.dg-modern .dgm-oben .dgl-seitentext { margin-bottom: 20px; padding: 16px 16px 16px 66px; border-radius: 14px; font-size: .9375rem; }
	body.dg-modern .dgm-oben .dgl-seitentext::before { top: 18px; left: 14px; width: 32px; height: 32px; margin-top: 0; border-width: 2px; font-size: 1rem; }
	body.dg-modern .dgm-oben .dgl-seitentext::after { top: 16px; bottom: 16px; left: 54px; }
	body.dg-modern .activity-list > li.activity-item { padding: 16px 14px 6px; }
	body.dg-modern .dgm-start { padding: 12px; }
	body.dg-modern .dgm-start__schritte { grid-template-columns: 1fr; }
	body.dg-modern .dgm-start__schritt.ist-fertig { display: none; } /* der Ring zeigt den Stand, das Band bleibt kurz */
}

/* 12a. Beitrag-Fenster im sichtbaren Bereich (Maße aus dg-modern.js 4a) ------
   Nur solange BuddyBoss das Fenster offen hat (.modal-popup): Nach dem Absenden
   steht das Formular wieder im Feed, ohne Höhe aus dem Fenster. */
body.dg-modern #bp-nouveau-activity-form.modal-popup.dgm-vv {
	top: var(--dgm-vv-top) !important;
	height: var(--dgm-vv-h) !important;
	max-height: var(--dgm-vv-h) !important;
}
body.dg-modern #bp-nouveau-activity-form.modal-popup.dgm-vv .whats-new-scroll-view { max-height: var(--dgm-vv-rolle) !important; }
body.dg-modern #bp-nouveau-activity-form.modal-popup.dgm-vv-tastatur .whats-new-scroll-view { min-height: 0 !important; }

/* 13. Beitrag-Fenster auf dem Handy --------------------------------------- */
@media (max-width: 800px) {
	/* Beitrag-Fenster auf dem Handy: füllt den sichtbaren Bereich (Höhe setzt dg-modern.js 4a
	   nach visualViewport). Kopf mit X bleibt oben, nur der Text rollt, Knöpfe unten. */
	body.dg-modern #bp-nouveau-activity-form.modal-popup .activity-form {
		position: absolute !important;
		inset: 0 !important;
		margin: 0 !important;
		width: auto !important;
		max-width: none !important;
		height: auto !important;
		max-height: none !important;
		transform: none !important;
		display: flex !important;
		flex-direction: column;
		border-radius: 0 !important;
	}
	body.dg-modern #bp-nouveau-activity-form.modal-popup .activity-form > :is(#activity-header, #editor-toolbar, .whats-new-form-footer) { flex: 0 0 auto; }
	body.dg-modern #bp-nouveau-activity-form.modal-popup .activity-form > .whats-new-scroll-view {
		flex: 1 1 auto !important;
		min-height: 0 !important;
		max-height: none !important;
	}
	/* Kamera und Tags in die Zeile von Aa, @ und Emoji (links), unten nur Planen + Beitrag */
	body.dg-modern #bp-nouveau-activity-form.modal-popup #editor-toolbar {
		box-sizing: border-box;
		display: flex !important;
		align-items: center;
		justify-content: flex-end;
		gap: 10px;
		height: 52px !important;
		min-height: 0 !important;
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}
	body.dg-modern #bp-nouveau-activity-form.modal-popup #editor-toolbar > .post-elements-buttons-item { float: none !important; margin: 0 !important; }
	body.dg-modern #bp-nouveau-activity-form.modal-popup .whats-new-form-footer {
		display: grid !important;
		grid-template-columns: auto auto 1fr;
		grid-template-areas: "kamera tags ." "knopf knopf knopf";
		align-items: center;
		column-gap: 12px;
		flex-direction: row !important;
		margin-top: -52px !important;
		padding-top: 0 !important;
		pointer-events: none;
	}
	body.dg-modern #bp-nouveau-activity-form.modal-popup .whats-new-form-footer > * { pointer-events: auto; }
	body.dg-modern #bp-nouveau-activity-form.modal-popup .whats-new-form-footer > :is(#whats-new-toolbar, #dnft-picker) {
		display: flex !important;
		align-items: center;
		height: 52px;
		margin: 0 !important;
		padding: 0 !important;
		width: auto !important;
		flex: 0 0 auto;
	}
	body.dg-modern #bp-nouveau-activity-form.modal-popup .whats-new-form-footer > #whats-new-toolbar { grid-area: kamera; margin-left: 16px !important; }
	body.dg-modern #bp-nouveau-activity-form.modal-popup .whats-new-form-footer > #dnft-picker { grid-area: tags; }
	body.dg-modern #bp-nouveau-activity-form.modal-popup .whats-new-form-footer > #activity-form-submit-wrapper {
		grid-area: knopf;
		width: 100% !important;
		max-width: none !important;
		height: auto !important;
		display: flex !important;
		align-items: center;
		justify-content: flex-end;
		gap: 10px;
		margin: 0 !important;
		padding: 4px 16px 8px !important;
		box-sizing: border-box;
	}
	body.dg-modern #bp-nouveau-activity-form.modal-popup #activity-form-submit-wrapper > * { margin-top: 0 !important; margin-bottom: 0 !important; }
	/* Schwebende Knöpfe (Hilfe, Datenschutz) verdecken sonst Kamera und Tags */
	body.dg-modern:has(#bp-nouveau-activity-form.modal-popup) :is(.inrv-faq-fab, #dgc-oeffnen) { display: none !important; }
}

/* 14. iPhone: Versatz zwischen sichtbarem Bereich und fester Ebene ausgleichen
   (dg-modern.js 9). „translate“ statt „transform“, damit vorhandene
   Verschiebungen der Knöpfe erhalten bleiben. */
html.dgm-vv-versatz body.dg-modern .dgm-leiste,
html.dgm-vv-versatz body.dg-modern :is(.inrv-faq-fab, #dgc-oeffnen) { translate: 0 calc(-1 * var(--dgm-vv-unten, 0px)); }
html.dgm-vv-versatz body.dg-modern .site-header { translate: 0 var(--dgm-vv-oben, 0px); }