/*
	Insight – Kommentare im Blog (seit 4.19.0)
	Zurückhaltende Grundform; Farben und Schrift kommen von der Homepage.
	Eigenes Aussehen über das eigene CSS (Layout → CSS), Klassen ins-kommentar*.
*/

.ins-kommentare { margin-top: 3rem; }
.ins-kommentare-anzahl { opacity: .6; font-weight: normal; }

.ins-kommentar-liste { list-style: none; margin: 0 0 2rem; padding: 0; }
.ins-kommentar-antworten { margin: 1rem 0 0 1.5rem; padding-left: 1rem; border-left: 2px solid rgba(128,128,128,.25); }
.ins-kommentar-flach { margin-left: 0; padding-left: 0; border-left: 0; }
.ins-kommentar { margin: 0 0 1.25rem; }
.ins-kommentar > article { padding: 0; }

.ins-kommentar-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .6rem; margin-bottom: .35rem; }
.ins-kommentar-bild {
	display: inline-flex; align-items: center; justify-content: center;
	width: 2.25rem; height: 2.25rem; border-radius: 50%;
	background: rgba(128,128,128,.18); font-weight: 600; flex: none;
}
.ins-kommentar-name { font-weight: 600; }
.ins-kommentar-marke { font-size: .75em; padding: .1em .5em; border-radius: 1em; background: rgba(128,128,128,.18); }
.ins-kommentar-zeit { font-size: .85em; opacity: .65; }
.ins-kommentar-text { margin-left: 2.85rem; overflow-wrap: anywhere; }
.ins-kommentar-antworten-knopf { margin-left: 2.85rem; font-size: .85em; }
.ins-kommentar-autor > article .ins-kommentar-bild { background: rgba(128,128,128,.35); }

.ins-kommentar-form { margin-top: 1.5rem; }
.ins-kommentar .ins-kommentar-form { margin: 1rem 0 1.5rem 2.85rem; }
.ins-kommentar-meldung { margin-top: 1rem; }

@media (max-width: 640px) {
	.ins-kommentar-antworten { margin-left: .5rem; padding-left: .75rem; }
	.ins-kommentar-text, .ins-kommentar-antworten-knopf { margin-left: 0; }
	.ins-kommentar .ins-kommentar-form { margin-left: 0; }
}