/* =============================================================================
 * 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 rgba(var(--bb-primary-color-rgb), .55);
	outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
	body.dg-modern *, body.dg-modern *::before, body.dg-modern *::after {
		transition: none !important;
		animation: none !important;
	}
}

/* 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; }

/* 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;
}
body.dg-modern .dgm-oben {
	margin: 0 calc(-1 * var(--dgm-rand, 0px));
	border-bottom: 1px solid var(--dgm-line);
	background:
		radial-gradient(70% 220% at 100% 0%, rgba(var(--bb-primary-color-rgb), .18) 0%, rgba(var(--bb-primary-color-rgb), 0) 60%),
		var(--dgm-bg);
}
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: 1.75rem; }
body.dg-modern .dgm-oben .dgl-seitentext { margin: 0 0 28px; background: var(--dgm-bg); }

/* 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);
}
body.dg-modern #buddypress .bp-navs.dir-navs ul li a,
body.dg-modern #buddypress .bp-navs.dir-navs ul li > span {
	border-radius: var(--dgm-pill);
	padding: 6px 14px;
	transition: background-color .2s var(--dgm-ease), color .2s var(--dgm-ease);
}
body.dg-modern #buddypress .bp-navs.dir-navs ul li.selected a {
	background: var(--dgm-primary-soft);
	color: var(--dgm-primary-strong);
	font-weight: 600;
}
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); }

/* 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);
}

/* 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); }
/* 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; }
	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. */
	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 .dgl-seitentext { margin-bottom: 20px; }
	body.dg-modern .activity-list > li.activity-item { padding: 16px 14px 6px; }
}