/* =====================================================
   SB-DISKM – Frontend (6 Stil-Varianten, 1:1 nach Mockup)
   Aktive Variante über SB-DISKM → Einstellungen → Frontend-Stil.
   Alle Selektoren entsprechen exakt dem mitgelieferten
   design-vorschlaege.html.
   ===================================================== */

/* ---------- Design-Tokens ---------- */
.sb-dm-discussion,
.comment.sb-dm-comment {
	--sbdm-orange:      #f5a623;
	--sbdm-orange-soft: rgba(245, 166, 35, .14);
	--sbdm-orange-line: rgba(245, 166, 35, .35);
	--sbdm-orange-pale: #fff5e6;
	--sbdm-orange-mid:  #fdecd0;
	--sbdm-ink:         #111;
	--sbdm-text:        #333;
	--sbdm-muted:       #888;
	--sbdm-soft:        #f7f7f7;
	--sbdm-soft-2:      #fafafa;
	--sbdm-soft-3:      #f3f3f3;
	--sbdm-border:      #ececec;
	--sbdm-border-soft: #f5f5f5;
}

/* =====================================================================
   GLOBALER RESET für importierte WP-Kommentare (Theme-Linien killen)
   ===================================================================== */
.comment.sb-dm-comment,
li.comment.sb-dm-comment,
.commentlist .comment.sb-dm-comment,
ol.commentlist li.comment.sb-dm-comment,
ul.commentlist li.comment.sb-dm-comment,
.comments-area .comment.sb-dm-comment,
.comment-list .comment.sb-dm-comment {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	list-style: none !important;
	border: 0 !important;
	border-radius: 0 !important;
}
.comment.sb-dm-comment::before,
.comment.sb-dm-comment::after,
li.comment.sb-dm-comment::before,
li.comment.sb-dm-comment::after { display: none !important; }

.comment.sb-dm-comment .comment-body,
.comment.sb-dm-comment article.comment-body,
.comment.sb-dm-comment .comment-wrap,
.comment.sb-dm-comment .comment-content-wrap {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* The7 & andere Themes setzen den Autor-/Meta-Block oft auf
   schwarzen Hintergrund mit weißer Schrift. Hier komplett neutralisieren. */
.comment.sb-dm-comment .comment-author,
.comment.sb-dm-comment .comment-author-info,
.comment.sb-dm-comment .comment-meta,
.comment.sb-dm-comment .comment-metadata,
.comment.sb-dm-comment .comment-info,
.comment.sb-dm-comment .comment-header,
.comment.sb-dm-comment header,
.comment.sb-dm-comment .vcard,
.comment.sb-dm-comment .comment-author cite,
.comment.sb-dm-comment .comment-author .fn,
.comment.sb-dm-comment .comment-author a,
.comment.sb-dm-comment .comment-meta a,
.comment.sb-dm-comment .comment-metadata a,
.comment.sb-dm-comment .comment-meta time,
.comment.sb-dm-comment time {
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	text-shadow: none !important;
}

/* "sagt:" / "says:" und Klammern um den Bearbeiten-Link verstecken */
.comment.sb-dm-comment .says,
.comment.sb-dm-comment .comment-meta::before,
.comment.sb-dm-comment .comment-meta::after,
.comment.sb-dm-comment .comment-metadata::before,
.comment.sb-dm-comment .comment-metadata::after {
	display: none !important;
}

/* Bearbeiten-Link dezent */
.comment.sb-dm-comment .edit-link,
.comment.sb-dm-comment .comment-edit-link {
	margin-left: 8px !important;
	color: #999 !important;
	font-size: 11px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.4px !important;
}
.comment.sb-dm-comment .edit-link a,
.comment.sb-dm-comment .comment-edit-link { color: #999 !important; }

.comment.sb-dm-comment .children,
li.comment.sb-dm-comment > .children,
.commentlist .comment.sb-dm-comment .children,
ol .comment.sb-dm-comment .children,
ul .comment.sb-dm-comment .children {
	border: 0 !important;
	border-left: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* =====================================================================
   ÄUSSERER RAHMEN (.sb-dm-discussion) – wie .variant im Mockup
   ===================================================================== */
.sb-dm-discussion {
	box-sizing: border-box;
	max-width: 760px;
	margin: 24px auto;
	padding: 22px 26px 26px;
	background: #fff;
	border: 1px solid var(--sbdm-border);
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
	font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--sbdm-text);
	line-height: 1.55;
	font-size: 15px;
}
.sb-dm-discussion *,
.sb-dm-discussion *::before,
.sb-dm-discussion *::after { box-sizing: border-box; }

.sb-dm-discussion .sb-dm-notice {
	background: var(--sbdm-orange-soft);
	color: var(--sbdm-ink);
	border-radius: 8px;
	padding: 10px 14px;
	font-size: 13px;
	line-height: 1.5;
	margin: 0 0 18px;
}
.sb-dm-discussion .sb-dm-notice strong {
	color: #a16811;
	margin-right: 4px;
}
.sb-dm-discussion .sb-dm-topic {
	font-family: "Oswald", sans-serif;
	font-size: 20px;
	font-weight: 700;
	color: var(--sbdm-ink);
	letter-spacing: 0.5px;
	margin: 0 0 18px;
}
.sb-dm-discussion .sb-dm-thread { margin: 0; padding: 0; }

/* Avatar standardmäßig versteckt – nur Variante 2 & 3 zeigen ihn explizit */
.sb-dm-discussion .sb-dm-avatar { display: none; }

/* Replies-Container neutral – Indent & Linien werden pro Variante gesetzt */
.sb-dm-discussion .sb-dm-replies {
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
}

/* ============================================================
   VARIANTE 1 – ZEITUNG / KLAR
   Nur Trennlinien zwischen Beiträgen, Antworten mit kurzem
   orange Strich links.
   ============================================================ */
.sb-dm-style-variant1 .sb-dm-item {
	display: block;
	padding: 14px 0;
	border-top: 1px solid var(--sbdm-border);
}
.sb-dm-style-variant1 .sb-dm-item:first-child { border-top: 0; }

.sb-dm-style-variant1 .sb-dm-head {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 4px;
}
.sb-dm-style-variant1 .sb-dm-name { font-weight: 700; color: var(--sbdm-ink); }
.sb-dm-style-variant1 .sb-dm-role {
	font-size: 11px;
	color: var(--sbdm-orange);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: 700;
}
.sb-dm-style-variant1 .sb-dm-date {
	color: var(--sbdm-muted);
	font-size: 12px;
	margin-left: auto;
}
.sb-dm-style-variant1 .sb-dm-content { color: var(--sbdm-text); font-size: 15px; }

.sb-dm-style-variant1 .sb-dm-replies {
	padding-left: 24px;
	border-left: 2px solid var(--sbdm-orange);
	margin-left: 4px;
}
.sb-dm-style-variant1 .sb-dm-replies .sb-dm-replies {
	border-left-color: #ddd;
}

/* ============================================================
   VARIANTE 2 – CHAT BUBBLES (Messenger-Style)
   ============================================================ */
.sb-dm-style-variant2 .sb-dm-item {
	display: flex;
	gap: 12px;
	margin-bottom: 14px;
	align-items: flex-start;
	padding: 0;
	border: 0;
	background: transparent;
}
.sb-dm-style-variant2 .sb-dm-avatar {
	display: flex !important;
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--sbdm-orange) !important;
	color: #fff !important;
	font-weight: 700;
	align-items: center;
	justify-content: center;
	font-size: 13px;
}
.sb-dm-style-variant2 .sb-dm-body {
	max-width: 75%;
	background: var(--sbdm-soft);
	border-radius: 14px;
	padding: 10px 14px 12px;
}
/* Funktionsträger: rechte Seite + orange Bubble */
.sb-dm-style-variant2 .sb-dm-rolle-redaktion,
.sb-dm-style-variant2 .sb-dm-rolle-redakteur,
.sb-dm-style-variant2 .sb-dm-rolle-admin,
.sb-dm-style-variant2 .sb-dm-rolle-administrator,
.sb-dm-style-variant2 .sb-dm-rolle-moderator,
.sb-dm-style-variant2 .sb-dm-rolle-moderation { flex-direction: row-reverse; }
.sb-dm-style-variant2 .sb-dm-rolle-redaktion  .sb-dm-body,
.sb-dm-style-variant2 .sb-dm-rolle-redakteur  .sb-dm-body,
.sb-dm-style-variant2 .sb-dm-rolle-admin      .sb-dm-body,
.sb-dm-style-variant2 .sb-dm-rolle-administrator .sb-dm-body,
.sb-dm-style-variant2 .sb-dm-rolle-moderator  .sb-dm-body,
.sb-dm-style-variant2 .sb-dm-rolle-moderation .sb-dm-body {
	background: var(--sbdm-orange-soft);
}
.sb-dm-style-variant2 .sb-dm-head {
	display: block;
	font-size: 12px;
	color: var(--sbdm-muted);
	margin-bottom: 4px;
}
.sb-dm-style-variant2 .sb-dm-name {
	color: var(--sbdm-ink);
	font-weight: 700;
	margin-right: 6px;
}
.sb-dm-style-variant2 .sb-dm-role {
	color: var(--sbdm-muted);
	font-size: 11px;
	margin-right: 6px;
}
.sb-dm-style-variant2 .sb-dm-date { color: var(--sbdm-muted); }
.sb-dm-style-variant2 .sb-dm-content { color: var(--sbdm-text); font-size: 14.5px; }

.sb-dm-style-variant2 .sb-dm-replies { margin-left: 48px; }

/* ============================================================
   VARIANTE 3 – READER / TYPOGRAFISCH
   Initialen-Kreise als Outline, Body in Merriweather
   ============================================================ */
.sb-dm-style-variant3 .sb-dm-item {
	display: flex;
	gap: 16px;
	padding: 18px 0 16px;
	border-top: 1px dashed #e5e5e5;
	background: transparent;
}
.sb-dm-style-variant3 .sb-dm-item:first-child { border-top: 0; }

.sb-dm-style-variant3 .sb-dm-avatar {
	display: flex !important;
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	background: transparent !important;
	color: var(--sbdm-orange) !important;
	border: 1.5px solid var(--sbdm-orange);
	font-family: "Oswald", sans-serif;
	font-weight: 700;
	font-size: 14px;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
}
.sb-dm-style-variant3 .sb-dm-body { flex: 1 1 auto; min-width: 0; }
.sb-dm-style-variant3 .sb-dm-head {
	display: block;
	font-family: "Oswald", sans-serif;
	font-size: 13px;
	letter-spacing: 0.8px;
	text-transform: uppercase;
	color: var(--sbdm-ink);
	margin-bottom: 4px;
}
.sb-dm-style-variant3 .sb-dm-name { font-weight: 700; color: var(--sbdm-ink); }
.sb-dm-style-variant3 .sb-dm-role,
.sb-dm-style-variant3 .sb-dm-date {
	color: var(--sbdm-muted);
	font-weight: 400;
	letter-spacing: 0.3px;
	margin-left: 8px;
	text-transform: uppercase;
}
.sb-dm-style-variant3 .sb-dm-content {
	font-family: "Merriweather", Georgia, "Times New Roman", serif;
	font-size: 15px;
	line-height: 1.7;
	color: #2a2a2a;
}
.sb-dm-style-variant3 .sb-dm-replies { padding-left: 48px; }

/* ============================================================
   VARIANTE 4 – PARLAMENT / PROTOKOLL
   Linke Spalte = Name + Datum, rechte Spalte = Rolle-Tag + Text
   Trick: .sb-dm-head bekommt display:contents, dadurch
   landen name/role/date direkt im 2-Spalten-Grid von .sb-dm-body.
   ============================================================ */
.sb-dm-style-variant4 .sb-dm-item {
	display: block;
	padding: 12px 0;
	border-top: 1px solid var(--sbdm-border);
	background: transparent;
}
.sb-dm-style-variant4 .sb-dm-item:first-child { border-top: 0; }
.sb-dm-style-variant4 .sb-dm-avatar { display: none !important; }
.sb-dm-style-variant4 .sb-dm-body {
	display: grid;
	grid-template-columns: 130px 1fr;
	gap: 4px 18px;
}
.sb-dm-style-variant4 .sb-dm-head { display: contents; }
.sb-dm-style-variant4 .sb-dm-name {
	grid-column: 1;
	grid-row: 1;
	display: block;
	color: var(--sbdm-ink);
	font-family: "Oswald", sans-serif;
	font-size: 14px;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	text-align: right;
	margin-bottom: 0;
}
.sb-dm-style-variant4 .sb-dm-date {
	grid-column: 1;
	grid-row: 2;
	color: var(--sbdm-muted);
	font-size: 12px;
	text-align: right;
}
.sb-dm-style-variant4 .sb-dm-role {
	grid-column: 2;
	grid-row: 1;
	justify-self: start;
	align-self: start;
	display: inline-block;
	background: var(--sbdm-orange);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	padding: 2px 8px;
	border-radius: 3px;
	line-height: 1.4;
}
.sb-dm-style-variant4 .sb-dm-content {
	grid-column: 2;
	grid-row: 2;
	color: var(--sbdm-text);
}
.sb-dm-style-variant4 .sb-dm-replies {
	margin-left: 30px;
	border-left: 2px solid var(--sbdm-orange-line);
	padding-left: 14px;
}
.sb-dm-style-variant4 .sb-dm-replies .sb-dm-replies { margin-left: 30px; }

/* ============================================================
   VARIANTE 5 – MINIMAL CARD
   Sehr dezente Karten mit Trennlinie zwischen Header und Text
   ============================================================ */
.sb-dm-style-variant5 .sb-dm-item {
	display: block;
	background: #fff;
	border: 1px solid #f0f0f0;
	border-radius: 6px;
	padding: 16px 20px;
	margin-bottom: 10px;
}
.sb-dm-style-variant5 .sb-dm-head {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 6px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--sbdm-border-soft);
}
.sb-dm-style-variant5 .sb-dm-name {
	font-weight: 700;
	color: var(--sbdm-ink);
	font-size: 14.5px;
}
.sb-dm-style-variant5 .sb-dm-role {
	font-size: 10.5px;
	color: var(--sbdm-orange);
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 0.6px;
}
.sb-dm-style-variant5 .sb-dm-date {
	color: var(--sbdm-muted);
	font-size: 11.5px;
	margin-left: auto;
}
.sb-dm-style-variant5 .sb-dm-content {
	color: var(--sbdm-text);
	font-size: 14.5px;
	line-height: 1.65;
}
.sb-dm-style-variant5 .sb-dm-replies { margin-left: 28px; }

/* ============================================================
   VARIANTE 6 – WHATSAPP (echt, abwechselnd links / rechts)
   – ungerade Beiträge links, gerade rechts
   – Avatare wandern mit
   – Bubbles grau (Bürger) / orange (Funktionsträger)
   – Bei Mobile: alle linksbündig, Bubble fast volle Breite
   ============================================================ */
.sb-dm-style-variant6 .sb-dm-item {
	display: flex;
	gap: 8px;
	margin-bottom: 8px;
	align-items: flex-end;
	background: transparent;
	padding: 0;
}
/* ungerade -> links (Avatar links, Bubble rechts daneben) */
.sb-dm-style-variant6 .sb-dm-alt-odd {
	flex-direction: row;
	justify-content: flex-start;
}
/* gerade -> rechts (Avatar rechts, Bubble links daneben, alles rechts gepusht) */
.sb-dm-style-variant6 .sb-dm-alt-even {
	flex-direction: row-reverse;
	justify-content: flex-start;
}

.sb-dm-style-variant6 .sb-dm-avatar {
	display: flex !important;
	flex: 0 0 32px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--sbdm-orange) !important;
	color: #fff !important;
	font-weight: 700;
	font-size: 12px;
	align-items: center;
	justify-content: center;
}

.sb-dm-style-variant6 .sb-dm-body {
	max-width: 78%;
	background: #ececec;
	border-radius: 14px;
	padding: 8px 12px 10px;
	position: relative;
}
/* Bubble-Ecken-Trick wie bei WhatsApp:
   bei links die linke untere Ecke spitz, bei rechts die rechte untere Ecke spitz. */
.sb-dm-style-variant6 .sb-dm-alt-odd  .sb-dm-body { border-bottom-left-radius: 4px; }
.sb-dm-style-variant6 .sb-dm-alt-even .sb-dm-body { border-bottom-right-radius: 4px; }

/* Funktionsträger: orange Bubble (egal welche Seite) */
.sb-dm-style-variant6 .sb-dm-rolle-redaktion  .sb-dm-body,
.sb-dm-style-variant6 .sb-dm-rolle-redakteur  .sb-dm-body,
.sb-dm-style-variant6 .sb-dm-rolle-admin      .sb-dm-body,
.sb-dm-style-variant6 .sb-dm-rolle-administrator .sb-dm-body,
.sb-dm-style-variant6 .sb-dm-rolle-moderator  .sb-dm-body,
.sb-dm-style-variant6 .sb-dm-rolle-moderation .sb-dm-body {
	background: #ffd99c;
}

.sb-dm-style-variant6 .sb-dm-head {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 2px;
	line-height: 1.3;
	font-size: 11.5px;
}
.sb-dm-style-variant6 .sb-dm-name {
	font-weight: 700;
	color: var(--sbdm-ink);
	font-size: 12.5px;
}
/* Rolle standardmäßig versteckt (Bürger/Unbekannt) */
.sb-dm-style-variant6 .sb-dm-role { display: none; }
/* Rolle als Pill nur für Funktionsträger */
.sb-dm-style-variant6 .sb-dm-rolle-redaktion  .sb-dm-role,
.sb-dm-style-variant6 .sb-dm-rolle-redakteur  .sb-dm-role,
.sb-dm-style-variant6 .sb-dm-rolle-admin      .sb-dm-role,
.sb-dm-style-variant6 .sb-dm-rolle-administrator .sb-dm-role,
.sb-dm-style-variant6 .sb-dm-rolle-moderator  .sb-dm-role,
.sb-dm-style-variant6 .sb-dm-rolle-moderation .sb-dm-role {
	display: inline-block;
	background: #b8732a;
	color: #fff;
	font-size: 9.5px;
	font-weight: 700;
	padding: 1px 6px;
	border-radius: 999px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}
.sb-dm-style-variant6 .sb-dm-date {
	color: var(--sbdm-muted);
	font-size: 11px;
	margin-left: auto;
}
.sb-dm-style-variant6 .sb-dm-content {
	color: var(--sbdm-text);
	font-size: 14px;
	line-height: 1.55;
}
/* Antworten: kein extra Indent – Hierarchie kommt aus dem Links-/Rechts-Wechsel.
   Geringe Einrückung dient nur als optischer Hinweis. */
.sb-dm-style-variant6 .sb-dm-replies { margin-left: 16px; }

/* =====================================================================
   KOMMENTAR-MODUS (.comment.sb-dm-comment)

   Strategie: hohe Spezifität (body-Prefix), brutale !important.
   Themes wie The7 setzen .comment-author auf hellgrau / niedrige
   Opacity. Wir gewinnen mit Reichweite + body-Anker.
   ===================================================================== */

/* ---------- Außenrahmen: weiße Karte um die Kommentarliste ---------- */
.comment-list:has(.comment.sb-dm-comment),
ol.commentlist:has(.comment.sb-dm-comment),
ul.commentlist:has(.comment.sb-dm-comment),
ol.comment-list:has(.comment.sb-dm-comment),
ul.comment-list:has(.comment.sb-dm-comment) {
	max-width: 760px !important;
	margin: 24px auto !important;
	background: #fff !important;
	border: 1px solid var(--sbdm-border) !important;
	border-radius: 12px !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .05) !important;
	padding: 22px 26px 26px !important;
	list-style: none !important;
}

/* ---------- Basis-Typografie und harte Color-Overrides ---------- */
body .comment.sb-dm-comment .comment-body,
body .comment.sb-dm-comment article.comment-body {
	font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
	color: var(--sbdm-text) !important;
	padding: 12px 0 !important;
	margin: 0 !important;
	opacity: 1 !important;
}

/* Name dunkel, fett – mit body-Prefix gegen Theme-Spezifität */
body .comment.sb-dm-comment .comment-author,
body .comment.sb-dm-comment .comment-author *,
body .comment.sb-dm-comment .vcard,
body .comment.sb-dm-comment .vcard *,
body .comment.sb-dm-comment .fn,
body .comment.sb-dm-comment cite,
body .comment.sb-dm-comment cite.fn,
body .comment.sb-dm-comment cite.fn a,
body .comment.sb-dm-comment cite.fn b {
	color: var(--sbdm-ink) !important;
	opacity: 1 !important;
	font-style: normal !important;
	text-shadow: none !important;
	text-decoration: none !important;
}
body .comment.sb-dm-comment .fn,
body .comment.sb-dm-comment cite.fn,
body .comment.sb-dm-comment .comment-author > b,
body .comment.sb-dm-comment .comment-author > a {
	font-weight: 700 !important;
	font-size: 15px !important;
}

/* Datum / Meta dezent grau */
body .comment.sb-dm-comment .comment-meta,
body .comment.sb-dm-comment .comment-meta *,
body .comment.sb-dm-comment .comment-metadata,
body .comment.sb-dm-comment .comment-metadata *,
body .comment.sb-dm-comment time {
	color: var(--sbdm-muted) !important;
	font-size: 12px !important;
	font-weight: 400 !important;
	text-shadow: none !important;
	opacity: 1 !important;
}
body .comment.sb-dm-comment .comment-meta a,
body .comment.sb-dm-comment .comment-metadata a,
body .comment.sb-dm-comment time a {
	color: var(--sbdm-muted) !important;
	text-decoration: none !important;
}

/* "sagt:" / "says:" weg – mit hoher Spezifität */
body .comment.sb-dm-comment .says,
body .comment.sb-dm-comment span.says,
body .comment.sb-dm-comment .comment-author .says {
	display: none !important;
	visibility: hidden !important;
	font-size: 0 !important;
}

/* Bearbeiten-Link dezent klein – Klammern werden im Markup mitgeliefert,
   wir können sie nicht zuverlässig ausblenden, aber kleiner machen */
body .comment.sb-dm-comment .edit-link,
body .comment.sb-dm-comment .comment-edit-link,
body .comment.sb-dm-comment .edit-link a,
body .comment.sb-dm-comment .comment-edit-link a {
	font-size: 11px !important;
	color: var(--sbdm-muted) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.4px !important;
	text-decoration: none !important;
	margin-left: 6px !important;
	font-weight: 400 !important;
	opacity: 0.7 !important;
}

/* Kommentar-Inhalt */
body .comment.sb-dm-comment .comment-content,
body .comment.sb-dm-comment .comment-text {
	font-size: 15px !important;
	line-height: 1.6 !important;
	color: var(--sbdm-text) !important;
	margin-top: 6px !important;
}

/* Antworten-Link */
body .comment.sb-dm-comment .reply,
body .comment.sb-dm-comment .comment-reply-link {
	font-size: 12px !important;
	color: var(--sbdm-orange) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.4px !important;
	font-weight: 700 !important;
	margin-top: 6px !important;
	display: inline-block !important;
}

/* =====================================================================
   VARIANTE-SPEZIFISCHE COMMENT-OPTIK
   ===================================================================== */

/* --- Variante 1: Trennlinien --- */
body .sb-dm-style-variant1.comment.sb-dm-comment .comment-body {
	padding: 14px 0 !important;
	border-top: 1px solid var(--sbdm-border) !important;
}
body .comment-list > .sb-dm-style-variant1.comment.sb-dm-comment:first-child > .comment-body,
body ol.commentlist > .sb-dm-style-variant1.comment.sb-dm-comment:first-child > .comment-body {
	border-top: 0 !important;
}
body .sb-dm-style-variant1.comment.sb-dm-comment .children {
	padding-left: 24px !important;
	border-left: 2px solid var(--sbdm-orange) !important;
	margin-left: 4px !important;
	margin-top: 0 !important;
}
body .sb-dm-style-variant1.comment.sb-dm-comment .children .children {
	border-left-color: #ddd !important;
}
body .sb-dm-style-variant1.comment.sb-dm-comment .fn,
body .sb-dm-style-variant1.comment.sb-dm-comment cite.fn {
	color: var(--sbdm-ink) !important;
}

/* --- Variante 2: einfache Bubble-Andeutung im Comment-Modus --- */
body .sb-dm-style-variant2.comment.sb-dm-comment .comment-body {
	background: var(--sbdm-soft) !important;
	border-radius: 14px !important;
	padding: 12px 16px !important;
	margin: 0 0 12px 0 !important;
	max-width: 80% !important;
}
body .sb-dm-style-variant2.sb-dm-rolle-redaktion.comment.sb-dm-comment .comment-body,
body .sb-dm-style-variant2.sb-dm-rolle-redakteur.comment.sb-dm-comment .comment-body,
body .sb-dm-style-variant2.sb-dm-rolle-admin.comment.sb-dm-comment .comment-body,
body .sb-dm-style-variant2.sb-dm-rolle-administrator.comment.sb-dm-comment .comment-body,
body .sb-dm-style-variant2.sb-dm-rolle-moderator.comment.sb-dm-comment .comment-body,
body .sb-dm-style-variant2.sb-dm-rolle-moderation.comment.sb-dm-comment .comment-body {
	background: var(--sbdm-orange-soft) !important;
	margin-left: auto !important;
}
body .sb-dm-style-variant2.comment.sb-dm-comment .children {
	margin-left: 32px !important;
}

/* --- Variante 3: Reader, dashed separator, Merriweather Body --- */
body .sb-dm-style-variant3.comment.sb-dm-comment .comment-body {
	padding: 18px 0 16px !important;
	border-top: 1px dashed #e5e5e5 !important;
}
body .comment-list > .sb-dm-style-variant3.comment.sb-dm-comment:first-child > .comment-body,
body ol.commentlist > .sb-dm-style-variant3.comment.sb-dm-comment:first-child > .comment-body {
	border-top: 0 !important;
}
body .sb-dm-style-variant3.comment.sb-dm-comment .fn,
body .sb-dm-style-variant3.comment.sb-dm-comment cite.fn {
	font-family: "Oswald", sans-serif !important;
	font-size: 13px !important;
	letter-spacing: 0.8px !important;
	text-transform: uppercase !important;
}
body .sb-dm-style-variant3.comment.sb-dm-comment .comment-content,
body .sb-dm-style-variant3.comment.sb-dm-comment .comment-text {
	font-family: "Merriweather", Georgia, serif !important;
	font-size: 15px !important;
	line-height: 1.7 !important;
	color: #2a2a2a !important;
}
body .sb-dm-style-variant3.comment.sb-dm-comment .children {
	padding-left: 48px !important;
	border-left: 0 !important;
}

/* --- Variante 4: Protokoll – Rand-Linie an .children --- */
body .sb-dm-style-variant4.comment.sb-dm-comment .comment-body {
	padding: 12px 0 !important;
	border-top: 1px solid var(--sbdm-border) !important;
}
body .comment-list > .sb-dm-style-variant4.comment.sb-dm-comment:first-child > .comment-body,
body ol.commentlist > .sb-dm-style-variant4.comment.sb-dm-comment:first-child > .comment-body {
	border-top: 0 !important;
}
body .sb-dm-style-variant4.comment.sb-dm-comment .fn,
body .sb-dm-style-variant4.comment.sb-dm-comment cite.fn {
	font-family: "Oswald", sans-serif !important;
	font-size: 14px !important;
	letter-spacing: 0.4px !important;
	text-transform: uppercase !important;
}
body .sb-dm-style-variant4.comment.sb-dm-comment .children {
	margin-left: 30px !important;
	border-left: 2px solid var(--sbdm-orange-line) !important;
	padding-left: 14px !important;
}

/* --- Variante 5: Minimal Card – jeder Kommentar = eigene Karte --- */
body .sb-dm-style-variant5.comment.sb-dm-comment .comment-body {
	background: #fff !important;
	border: 1px solid var(--sbdm-border-soft) !important;
	border-radius: 6px !important;
	padding: 16px 20px !important;
	margin: 0 0 10px 0 !important;
	box-shadow: 0 1px 2px rgba(0, 0, 0, .03) !important;
}
body .sb-dm-style-variant5.comment.sb-dm-comment .comment-content,
body .sb-dm-style-variant5.comment.sb-dm-comment .comment-text {
	margin-top: 6px !important;
	padding-top: 6px !important;
	border-top: 1px solid var(--sbdm-border-soft) !important;
}
body .sb-dm-style-variant5.comment.sb-dm-comment .children {
	margin-left: 28px !important;
}

/* --- Variante 6: WhatsApp echt für Kommentare ---
   Alternation links/rechts via :nth-of-type, Name folgt Bubble-Seite.
   Funktionsträger bekommen orange Bubble – behalten aber ihre
   natürliche Alternation. */
body .sb-dm-style-variant6.comment.sb-dm-comment .comment-body {
	background: #ececec !important;
	border-radius: 14px !important;
	padding: 8px 14px 10px !important;
	margin: 0 0 8px 0 !important;
	max-width: 78% !important;
}

/* ungerade -> links */
body .sb-dm-style-variant6.comment.sb-dm-comment:nth-of-type(odd) > .comment-body,
body .sb-dm-style-variant6.comment.sb-dm-comment:nth-of-type(odd) > article.comment-body {
	margin-right: auto !important;
	margin-left: 0 !important;
	border-bottom-left-radius: 4px !important;
	border-bottom-right-radius: 14px !important;
}
body .sb-dm-style-variant6.comment.sb-dm-comment:nth-of-type(odd) .comment-author,
body .sb-dm-style-variant6.comment.sb-dm-comment:nth-of-type(odd) .comment-meta,
body .sb-dm-style-variant6.comment.sb-dm-comment:nth-of-type(odd) .comment-metadata,
body .sb-dm-style-variant6.comment.sb-dm-comment:nth-of-type(odd) .comment-content,
body .sb-dm-style-variant6.comment.sb-dm-comment:nth-of-type(odd) .comment-text {
	text-align: left !important;
}

/* gerade -> rechts */
body .sb-dm-style-variant6.comment.sb-dm-comment:nth-of-type(even) > .comment-body,
body .sb-dm-style-variant6.comment.sb-dm-comment:nth-of-type(even) > article.comment-body {
	margin-left: auto !important;
	margin-right: 0 !important;
	border-bottom-left-radius: 14px !important;
	border-bottom-right-radius: 4px !important;
}
body .sb-dm-style-variant6.comment.sb-dm-comment:nth-of-type(even) .comment-author,
body .sb-dm-style-variant6.comment.sb-dm-comment:nth-of-type(even) .comment-meta,
body .sb-dm-style-variant6.comment.sb-dm-comment:nth-of-type(even) .comment-metadata,
body .sb-dm-style-variant6.comment.sb-dm-comment:nth-of-type(even) .comment-content,
body .sb-dm-style-variant6.comment.sb-dm-comment:nth-of-type(even) .comment-text {
	text-align: right !important;
}

/* Funktionsträger: orange Bubble, ABER Alternation behalten */
body .sb-dm-style-variant6.sb-dm-rolle-redaktion.comment.sb-dm-comment > .comment-body,
body .sb-dm-style-variant6.sb-dm-rolle-redakteur.comment.sb-dm-comment > .comment-body,
body .sb-dm-style-variant6.sb-dm-rolle-admin.comment.sb-dm-comment > .comment-body,
body .sb-dm-style-variant6.sb-dm-rolle-administrator.comment.sb-dm-comment > .comment-body,
body .sb-dm-style-variant6.sb-dm-rolle-moderator.comment.sb-dm-comment > .comment-body,
body .sb-dm-style-variant6.sb-dm-rolle-moderation.comment.sb-dm-comment > .comment-body {
	background: #ffd99c !important;
}

body .sb-dm-style-variant6.comment.sb-dm-comment .fn,
body .sb-dm-style-variant6.comment.sb-dm-comment cite.fn {
	font-size: 12.5px !important;
}
body .sb-dm-style-variant6.comment.sb-dm-comment .comment-content,
body .sb-dm-style-variant6.comment.sb-dm-comment .comment-text {
	font-size: 14px !important;
	line-height: 1.55 !important;
	margin-top: 2px !important;
}
body .sb-dm-style-variant6.comment.sb-dm-comment .children {
	margin-left: 16px !important;
}

/* Mobile: bei V6-Kommentaren alle Bubbles linksbündig */
@media (max-width: 640px) {
	body .sb-dm-style-variant6.comment.sb-dm-comment:nth-of-type(even) > .comment-body,
	body .sb-dm-style-variant6.comment.sb-dm-comment:nth-of-type(even) > article.comment-body {
		margin-left: 0 !important;
		margin-right: auto !important;
		border-bottom-left-radius: 4px !important;
		border-bottom-right-radius: 14px !important;
	}
	body .sb-dm-style-variant6.comment.sb-dm-comment:nth-of-type(even) .comment-author,
	body .sb-dm-style-variant6.comment.sb-dm-comment:nth-of-type(even) .comment-meta,
	body .sb-dm-style-variant6.comment.sb-dm-comment:nth-of-type(even) .comment-metadata,
	body .sb-dm-style-variant6.comment.sb-dm-comment:nth-of-type(even) .comment-content,
	body .sb-dm-style-variant6.comment.sb-dm-comment:nth-of-type(even) .comment-text {
		text-align: left !important;
	}
}


/* =====================================================================
   MOBILE
   ===================================================================== */
@media (max-width: 640px) {
	.sb-dm-discussion {
		padding: 14px 14px 18px;
		margin: 12px 6px;
		border-radius: 10px;
		font-size: 14.5px;
	}
	.sb-dm-discussion .sb-dm-topic { font-size: 17px; }

	/* Variante 2 (Bubbles) – auf Mobile bleibt der Avatar-Side-Wechsel
	   für Funktionsträger erhalten, Bubbles nutzen aber fast die volle Breite. */
	.sb-dm-style-variant2 .sb-dm-body    { max-width: 88%; }
	.sb-dm-style-variant2 .sb-dm-replies { margin-left: 18px; }

	/* Variante 3 (Reader) */
	.sb-dm-style-variant3 .sb-dm-replies { padding-left: 20px; }

	/* Variante 4 (Protokoll) – auf Mobile: Name/Datum oben, Text darunter */
	.sb-dm-style-variant4 .sb-dm-body {
		grid-template-columns: 1fr;
		gap: 4px;
	}
	.sb-dm-style-variant4 .sb-dm-name,
	.sb-dm-style-variant4 .sb-dm-date {
		grid-column: 1;
		text-align: left;
	}
	.sb-dm-style-variant4 .sb-dm-role,
	.sb-dm-style-variant4 .sb-dm-content {
		grid-column: 1;
	}
	.sb-dm-style-variant4 .sb-dm-replies { margin-left: 12px; padding-left: 10px; }

	/* Variante 5 (Card) */
	.sb-dm-style-variant5 .sb-dm-item    { padding: 14px 16px; }
	.sb-dm-style-variant5 .sb-dm-replies { margin-left: 14px; }

	/* Variante 6 (WhatsApp echt) – auf Mobile alle Bubbles linksbündig,
	   schmaler Bildschirm verträgt kein rechts-/links-Spiel. */
	.sb-dm-style-variant6 .sb-dm-alt-even {
		flex-direction: row;
		justify-content: flex-start;
	}
	.sb-dm-style-variant6 .sb-dm-body {
		max-width: 85%;
		border-bottom-right-radius: 14px;
		border-bottom-left-radius: 4px;
	}
	.sb-dm-style-variant6 .sb-dm-replies { margin-left: 10px; }
}

/* =====================================================================
   PERMALINK-ANKER auf Datum (Klick = Direktlink in Zwischenablage)
   ===================================================================== */
.sb-dm-permalink,
a.sb-dm-permalink {
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	position: relative;
	border-bottom: 1px dotted transparent;
	transition: color .15s ease, border-color .15s ease;
}
.sb-dm-permalink:hover,
a.sb-dm-permalink:hover,
.sb-dm-permalink:focus,
a.sb-dm-permalink:focus {
	color: var(--sbdm-orange);
	border-bottom-color: var(--sbdm-orange);
	text-decoration: none;
	outline: none;
}
.sb-dm-permalink.sb-dm-copied::after {
	content: '✓ kopiert';
	position: absolute;
	left: 50%;
	top: -24px;
	transform: translateX(-50%);
	background: var(--sbdm-ink);
	color: #fff;
	padding: 2px 7px;
	border-radius: 4px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.3px;
	white-space: nowrap;
	pointer-events: none;
	box-shadow: 0 2px 6px rgba(0,0,0,0.2);
	z-index: 5;
}

/* Highlight beim Direkt-Sprung über den Anker (~3s) */
.sb-dm-item:target {
	animation: sbdmFlash 2.4s ease-out;
}
@keyframes sbdmFlash {
	0%   { box-shadow: 0 0 0 3px var(--sbdm-orange); }
	100% { box-shadow: 0 0 0 0 rgba(245,166,35,0); }
}