/* ==========================================================================
   Sektion 6 · Bewertungen (acf/mk-bewertungen)
   Grundlage Design #11b/#11m. Sand. Kopf zentriert (Eyebrow, Goldstrich, H2, feine Goldlinie,
   Einleitung 680 px), darunter das Bewertungs-Widget über die Inhaltsbreite.
   Kopf mit reservierten Zeilen (Eyebrow 1, H2 2, Einleitung 3): gleiche Höhe auf allen Seiten.
   Widget-Fläche mind. 340 px, damit beim Nachladen nichts springt.
   Maße in em auf Basis --mk-fs-body, kein zoom.
   ========================================================================== */

.mk-section.mk-bewertungen {
	--mk-bew-x: max(var(--mk-gutter), 6.25vw);                        /* 90 px bei 1440 */
	padding: 0;                                     /* doppelte Klasse: sonst gewinnt .mk-section */
	font-size: var(--mk-fs-body);
	background: var(--mk-sand);
}

.mk-bewertungen__inner {
	max-width: calc(70em + 2 * var(--mk-bew-x));    /* Inhalt 1260 px bei 1440 */
	margin-inline: auto;
	padding: 4em var(--mk-bew-x) 3.11em;            /* 72 / 56 px */
}

/* ---------- Kopf ---------- */
.mk-bewertungen__kopf {
	display: flex; flex-direction: column; align-items: center;
	text-align: center;
}
.mk-bewertungen__eyebrow {
	margin: 0 0 1.333em;                            /* 16 px */
	min-height: 1.3em;                              /* 1 Zeile reserviert */
	font-size: 0.667em; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
	line-height: 1.3; color: var(--mk-gold-dark);
}
.mk-bewertungen__rule {
	display: block; width: 4.89em; height: 2px;     /* 88 px */
	margin-bottom: 1.22em;                          /* 22 px */
	background: var(--mk-gold);
}
.mk-bewertungen__rule--thin {
	width: 6.67em; height: 1px; margin: 1.22em 0;   /* 120 px */
	background: rgba(214, 167, 66, 0.75);
}
.mk-bewertungen .mk-bewertungen__h2 {   /* doppelte Klasse: sonst gewinnt .mk-h2 aus main.css (max. 709 px) */
	max-width: calc(var(--mk-fs-h2) * 18.2);        /* 800 px bei 1440, bricht auf jeder Breite gleich um */
	margin: 0; color: var(--mk-ink);
	min-height: 2.08em;                             /* 2 Zeilen reserviert */
	text-wrap: balance;
}
.mk-bewertungen__gold { color: var(--mk-gold-head); font-weight: 900; }

.mk-bewertungen__intro {
	max-width: 37.78em;                             /* 680 px */
	min-height: 4.95em;                             /* 3 Zeilen reserviert */
	margin: 0; font-size: 1em; line-height: 1.65; color: var(--mk-text-strong);
}
.mk-bewertungen__intro strong { font-weight: 700; color: var(--mk-ink); }

/* ---------- Widget ----------
   Fläche hält die Höhe. Nur der Borlabs-Platzhalter (vor der Zustimmung) bekommt den goldenen
   Strichrahmen aus dem Design, das geladene Widget steht frei auf Sand. */
.mk-bewertungen__widget {
	min-height: 18.89em;                            /* 340 px */
	margin-top: 2.22em;                             /* 40 px */
	display: flex; flex-direction: column; justify-content: center;
}
.mk-bewertungen__widget > * { width: 100%; }
.mk-bewertungen__widget--vorschau,
.mk-bewertungen__widget:has([class*="brlbs"]) {
	padding: 2.22em;                                /* 40 px */
	border: 1px dashed rgba(214, 167, 66, 0.55);
	border-radius: 10px;
	background: #FBF9F4;
	text-align: center;
}
.mk-bewertungen__widget--vorschau { align-items: center; }

/* Borlabs-Platzhalter im Stil der Seite. Borlabs legt die Inhaltsbox als Container an, der ohne
   feste Breite auf 0 schrumpft (0.9.0: schmale schwarze Spalte). Daher: jede Borlabs-Ebene volle Breite,
   Borlabs-Farben (Schwarz, Grün) aus. Gilt nur vor der Zustimmung: danach ist das Borlabs-Markup weg. */
.mk-bewertungen__widget:has([class*="brlbs"]) { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; justify-items: stretch; }
.mk-bewertungen__widget div[class*="brlbs"] {
	width: 100% !important; max-width: none !important; min-width: 0 !important;
	margin: 0 !important; padding: 0 !important;
	background: transparent !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important;
	color: var(--mk-text) !important; font-family: var(--mk-font-text) !important;
	text-align: center !important;
}
.mk-bewertungen__widget [class*="brlbs"] p {
	max-width: 36em !important; margin: 0 auto 1.33em !important;          /* 648 px, 24 px */
	font-size: 1em !important; line-height: 1.6 !important;                /* 18 px wie Fließtext */
	color: var(--mk-text) !important;
}
.mk-bewertungen__widget [class*="brlbs"] strong { color: var(--mk-ink) !important; }
/* Borlabs 3 zeigt zwei Wahlmöglichkeiten („Inhalt entsperren“, „Service akzeptieren …“):
   untereinander, gleich breit, damit beide gut lesbar sind */
.mk-bewertungen__widget div[class*="brlbs"]:has(> :is(button, [role="button"], a[class*="btn"])) {
	display: flex !important; flex-direction: column !important; align-items: center !important;
	gap: 0.67em !important;                                                /* 12 px */
}
/* Button im Nebenbutton-Standard wie der LV-Download (0.17.12). Nie Orange, nie Grün.
   !important, weil Borlabs seine eigenen Farben mit hoher Spezifität setzt.
   Nur Borlabs-Knöpfe (0.19.0): vorher traf die Regel auch die Trustindex-Pfeile (role="button")
   und machte sie zu 24em breiten weißen Kästen mitten über den Bewertungen */
.mk-bewertungen__widget :is(button, [role="button"], a[class*="btn"]):is([class*="brlbs"], [class*="brlbs"] *) {
	display: inline-flex !important; align-items: center; justify-content: center;
	width: min(100%, 24em) !important; min-height: 56px; padding: 0.6em 1.33em !important; margin: 0 !important;
	border: 1px solid var(--mk-line-gold-strong) !important; border-radius: var(--mk-r-ctrl) !important;
	background: var(--mk-white) !important; box-shadow: none !important;
	color: var(--mk-gold-dark) !important;
	font: 700 0.889em/1.3 var(--mk-font-text) !important; letter-spacing: 0.01em !important; text-transform: none !important;   /* 16 px */
	text-align: center !important; white-space: normal !important;
	text-decoration: none !important; cursor: pointer;
	transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
}
.mk-bewertungen__widget :is(button, [role="button"], a[class*="btn"]):is([class*="brlbs"], [class*="brlbs"] *):is(:hover, :focus-visible) {
	background: var(--mk-gold-dark) !important; border-color: var(--mk-gold-dark) !important;
	color: var(--mk-white) !important; box-shadow: var(--mk-shadow-neben) !important;
}
/* „Weitere Informationen“: kleiner Link in Gold */
.mk-bewertungen__widget [class*="brlbs"] a:not([class*="btn"]):not([role="button"]),
.mk-bewertungen__widget [class*="brlbs"] [class*="provider-toggle"] {
	display: inline-block !important; margin-top: 1em !important; padding: 0 !important;
	min-height: 0; border: 0 !important; background: none !important;
	color: var(--mk-gold-dark) !important; font: 600 0.889em/1.4 var(--mk-font-text) !important;   /* 16 px */
	letter-spacing: 0 !important; text-transform: none;
	text-decoration: underline !important; text-underline-offset: 3px;
}

/* Trustindex-Pfeile (0.19.0): seitlich neben den Bewertungen, klein und dezent.
   Die Reihe bekommt links und rechts Platz, die Pfeile sitzen darin senkrecht mittig.
   !important, weil Trustindex seine Pfeile mit hoher Spezifität setzt. Das Pfeilzeichen selbst bleibt von Trustindex */
.mk-bewertungen__widget .ti-widget-container,
.mk-bewertungen__widget .ti-reviews-container { position: relative !important; }
.mk-bewertungen__widget .ti-reviews-container { padding-inline: 3.33em !important; }            /* 60 px */
.mk-bewertungen__widget .ti-controls {
	position: absolute !important; inset: 0 !important; width: auto !important; height: auto !important;
	margin: 0 !important; transform: none !important; pointer-events: none;
}
.mk-bewertungen__widget :is(.ti-next, .ti-prev) {
	position: absolute !important; top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important;
	display: flex !important; align-items: center; justify-content: center;
	width: 40px !important; height: 40px !important; min-width: 0 !important; min-height: 0 !important;
	margin: 0 !important; padding: 0 !important;
	border: 1px solid var(--mk-line-gold) !important; border-radius: 50% !important;
	background: rgba(255, 255, 255, 0.6) !important; box-shadow: none !important;
	color: var(--mk-gold-dark) !important; opacity: 0.75;
	pointer-events: auto; cursor: pointer;
	transition: opacity 200ms ease, border-color 200ms ease, background-color 200ms ease;
}
.mk-bewertungen__widget .ti-prev { left: 0 !important; right: auto !important; }
.mk-bewertungen__widget .ti-next { right: 0 !important; left: auto !important; }
.mk-bewertungen__widget :is(.ti-next, .ti-prev):is(:hover, :focus-visible) {
	opacity: 1; border-color: var(--mk-gold-dark) !important; background: var(--mk-white) !important;
}

/* Editor-Vorschau (nur im Block-Editor sichtbar) */
.mk-bewertungen__widget--vorschau { gap: 0.56em; }
.mk-bewertungen__widget--vorschau > * { width: auto; }
.mk-bewertungen__v-label {
	font-size: 0.611em; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
	color: var(--mk-gold-dark);
}
.mk-bewertungen__v-titel { font-size: 1em; font-weight: 700; color: var(--mk-ink); }
.mk-bewertungen__v-text { max-width: 26em; font-size: 0.806em; line-height: 1.5; color: #5C574C; }

/* ---------- Mobil (Design #11m) ---------- */
@media (max-width: 900px) {
	.mk-bewertungen__inner { padding: 34px 22px 30px; }
	.mk-bewertungen__eyebrow { margin-bottom: 12px; font-size: 11px; min-height: 0; }
	.mk-bewertungen__rule { width: 72px; margin-bottom: 18px; }
	.mk-bewertungen .mk-bewertungen__h2 { max-width: none; min-height: 0; letter-spacing: -0.03em; }
	.mk-bewertungen__rule--thin { width: 100px; margin: 18px 0; }
	.mk-bewertungen__intro { min-height: 0; }
	.mk-bewertungen__widget { min-height: 300px; margin-top: 24px; }
	.mk-bewertungen__widget:has([class*="brlbs"]),
	.mk-bewertungen__widget--vorschau { padding: 28px 18px; }
	.mk-bewertungen__widget [class*="brlbs"] p { font-size: 16px !important; }
	.mk-bewertungen__widget :is(button, [role="button"], a[class*="btn"]):is([class*="brlbs"], [class*="brlbs"] *) { font-size: 15px !important; }
	.mk-bewertungen__v-text { font-size: 13.5px; }
	.mk-bewertungen__widget .ti-reviews-container { padding-inline: 38px !important; }
	.mk-bewertungen__widget :is(.ti-next, .ti-prev) { width: 32px !important; height: 32px !important; }
}

@media (prefers-reduced-motion: reduce) {
	.mk-bewertungen__widget :is(button, [role="button"], a[class*="btn"]):is([class*="brlbs"], [class*="brlbs"] *),
	.mk-bewertungen__widget :is(.ti-next, .ti-prev) { transition: none; }
}

/* Editor-Hinweis: zweite H1 (0.27.4) */
.mk-bewertungen__h1-hinweis { max-width: var(--mk-max); margin: 0 auto 16px; padding: 12px 22px; border-bottom: 2px solid #B3341A; background: #FDF6F4; font-size: 14px; color: #8E2A15; }