/* ============================================================
   CMS — components.css
   Styles für alle Bausteine. 100% CSS/CSS3, KEIN JavaScript.
   ============================================================ */

.blk { padding: clamp(2.5rem, 6vw, 4.5rem) var(--outer, 6vw); }
.blk:first-of-type { padding-top: calc(var(--header-h, 64px) + clamp(2rem, 6vw, 4rem)); }

.blk-headline { font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin: 0 0 1.25rem; font-size: clamp(1.7rem, 5vw, 2.6rem); }
/* Überschriften-Ebenen: manuelle Größen wenn hl_tag gesetzt */
.blk-headline--h1 { font-size: clamp(2rem,   6vw, 3.2rem); }
.blk-headline--h2 { font-size: clamp(1.7rem, 5vw, 2.6rem); }
.blk-headline--h3 { font-size: clamp(1.3rem, 4vw, 1.9rem); font-weight: 700; letter-spacing: -.01em; }
.blk-text { font-size: 1.05rem; line-height: 1.7; opacity: .85; }
.blk-text p { margin: 0 0 1rem; }
.blk-text p:last-child { margin-bottom: 0; }
/* Zwischenüberschriften h1–h5, wenn direkt im Editor-Fließtext gesetzt
   (z.B. in Headline+Absatz, Bild+Text, Spalten-Inhalt, Grid-Text-Zelle).
   Eigenständige rem-Größen statt Browser-Default, damit es zur restlichen
   Typografie der Seite passt statt riesig/unpassend zu wirken. */
.blk-text h1, .blk-image-text h1, .blk-col h1, .blk-grid-cell-text h1,
.blk-text h2, .blk-image-text h2, .blk-col h2, .blk-grid-cell-text h2,
.blk-text h3, .blk-image-text h3, .blk-col h3, .blk-grid-cell-text h3,
.blk-text h4, .blk-image-text h4, .blk-col h4, .blk-grid-cell-text h4,
.blk-text h5, .blk-image-text h5, .blk-col h5, .blk-grid-cell-text h5 {
	font-weight: 800; letter-spacing: -.015em; line-height: 1.25; opacity: 1;
	margin: 1.75rem 0 .75rem;
}
.blk-text h1:first-child, .blk-text h2:first-child, .blk-text h3:first-child, .blk-text h4:first-child, .blk-text h5:first-child,
.blk-image-text h1:first-child, .blk-image-text h2:first-child, .blk-image-text h3:first-child, .blk-image-text h4:first-child, .blk-image-text h5:first-child,
.blk-col h1:first-child, .blk-col h2:first-child, .blk-col h3:first-child, .blk-col h4:first-child, .blk-col h5:first-child,
.blk-grid-cell-text h1:first-child, .blk-grid-cell-text h2:first-child, .blk-grid-cell-text h3:first-child, .blk-grid-cell-text h4:first-child, .blk-grid-cell-text h5:first-child {
	margin-top: 0;
}
.blk-text h1, .blk-image-text h1, .blk-col h1, .blk-grid-cell-text h1 { font-size: clamp(1.75rem, 4vw, 2.4rem); }
.blk-text h2, .blk-image-text h2, .blk-col h2, .blk-grid-cell-text h2 { font-size: clamp(1.5rem, 3.4vw, 2rem); }
.blk-text h3, .blk-image-text h3, .blk-col h3, .blk-grid-cell-text h3 { font-size: clamp(1.25rem, 2.8vw, 1.6rem); }
.blk-text h4, .blk-image-text h4, .blk-col h4, .blk-grid-cell-text h4 { font-size: clamp(1.1rem, 2.2vw, 1.3rem); }
.blk-text h5, .blk-image-text h5, .blk-col h5, .blk-grid-cell-text h5 { font-size: clamp(1rem, 1.8vw, 1.1rem); text-transform: uppercase; letter-spacing: .04em; opacity: .8; }

/* dezente Trennlinie (optional, je Block aktivierbar) */
.blk-divider { border-top: 1px solid color-mix(in srgb, var(--site-fc, #fff) 12%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--site-fc, #fff) 12%, transparent); }

/* ── headsub ──────────────────────────────────────────────── */
.blk-headsub-inner { width: 80%; max-width: 80%; margin-inline: auto; text-align: center; }
.blk-headsub .blk-text { max-width: 60ch; margin-inline: auto; }

/* ── columns ──────────────────────────────────────────────── */
.blk-columns-inner { max-width: 1200px; margin-inline: auto; }
.blk-columns .blk-headline { text-align: center; }
.blk-cols { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 768px) {
	.blk-cols-2 { grid-template-columns: repeat(2, 1fr); }
	.blk-cols-3 { grid-template-columns: repeat(3, 1fr); }
	.blk-cols-4 { grid-template-columns: repeat(4, 1fr); }
	.blk-cols-5 { grid-template-columns: repeat(5, 1fr); }
}
.blk-divider .blk-col { border-top: 1px solid color-mix(in srgb, var(--site-fc, #fff) 12%, transparent); padding-top: 1.5rem; }
@media (min-width: 768px) {
	.blk-divider .blk-cols > .blk-col { border-top: none; border-left: 1px solid color-mix(in srgb, var(--site-fc, #fff) 12%, transparent); padding-top: 0; padding-left: 1.5rem; }
	.blk-divider .blk-cols > .blk-col:first-child { border-left: none; padding-left: 0; }
}
.blk-col p { opacity: .85; line-height: 1.7; margin: 0 0 1rem; }
.blk-col p:last-child { margin-bottom: 0; }

/* ── imageleft / imageright ──────────────────────────────────── */
.blk-image-inner { max-width: 1100px; margin-inline: auto; display: flex; flex-direction: column; gap: 2rem; }
.blk-image-media img, .blk-image-media picture img { width: 100%; height: auto; display: block; border-radius: 18px; }
.blk-image-text { display: flex; flex-direction: column; justify-content: center;
    box-sizing: border-box; /* Padding frisst nicht die Breite */
    transition: background .2s ease; /* sanfter Übergang wenn Farbe gesetzt */
}
.blk-image-text p { opacity: .85; line-height: 1.7; }
@media (min-width: 768px) {
	.blk-image-inner { flex-direction: row; align-items: var(--img-text-valign, flex-start); gap: clamp(2rem, 5vw, 4rem); }
	.blk-image-media, .blk-image-text { flex: 1 1 0; min-width: 0; }
	.blk-image-right .blk-image-inner { flex-direction: row-reverse; }
}

/* ── imagebottom ──────────────────────────────────────────── */
.blk-imagebottom-inner { max-width: 1100px; margin-inline: auto; text-align: center; }
.blk-imagebottom-img { width: 100%; height: auto; display: block; border-radius: 18px; margin-inline: auto; }

/* ── 3-Spalten Varianten (img-text-img / text-img-text / text-text-img) ── */
.blk-3col-inner { max-width: 1200px; margin-inline: auto; }
.blk-3col .blk-headline { text-align: center; }
.blk-3col .blk-cols-3 { align-items: center; }
.blk-col-media img, .blk-col-media picture img { width: 100%; height: auto; border-radius: 16px; display: block; }
.blk-col-text { line-height: 1.7; opacity: .9; }

/* ── grid (frei: Bild/Video/GIF/Text/Button je Zelle) ───────── */
.blk-grid-inner { max-width: 1200px; margin-inline: auto; }
.blk-grid .blk-headline { text-align: center; }
.blk-grid-grid { display: grid; gap: var(--blk-grid-gap, 2rem); grid-template-columns: 1fr; grid-auto-rows: auto; }
@media (min-width: 768px) {
	.blk-grid-cols-1 { grid-template-columns: 1fr; }
	.blk-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
	.blk-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
	.blk-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
	.blk-grid-cols-5 { grid-template-columns: repeat(5, 1fr); }
	.blk-grid-cols-6 { grid-template-columns: repeat(6, 1fr); }
}
.blk-divider .blk-grid-cell { border: 1px solid color-mix(in srgb, var(--site-fc, #fff) 12%, transparent); border-radius: 12px; padding: 1.25rem; }
.blk-grid-cell-image img, .blk-grid-cell-gif img, .blk-grid-cell-image picture img { width: 100%; height: auto; border-radius: 14px; display: block; }
.blk-grid-cell-video video { width: 100%; height: auto; border-radius: 14px; display: block; }
.blk-grid-cell-text { line-height: 1.7; opacity: .9; text-align: center; }
.blk-grid-cell-button { display: flex; align-items: center; justify-content: center; }
.blk-img-placeholder { width: 100%; aspect-ratio: 16/10; border-radius: 14px; background: color-mix(in srgb, var(--site-fc, #fff) 8%, transparent); }

/* ── Button / CTA ─────────────────────────────────────────── */
.blk-btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: .9rem 1.8rem; border-radius: 999px;
	background: var(--site-fc, #fff); color: var(--site-bg, #0b0b0f);
	text-decoration: none; font-weight: 700; font-size: .98rem;
	transition: opacity .2s ease, transform .15s ease;
	border: none; cursor: pointer;
}
.blk-btn:hover { opacity: .85; }
.blk-btn:active { transform: scale(.97); }
.blk-button-inner { display: flex; justify-content: center; }
.blk-btn-whatsapp { background: #25D366; color: #fff; }

/* ── Video-Block ──────────────────────────────────────────── */
.blk-video-inner { max-width: 1100px; margin-inline: auto; text-align: center; }
.blk-video-el { width: 100%; height: auto; border-radius: 18px; display: block; background: #000; }

/* ── Kontaktformular ──────────────────────────────────────── */
.blk-contact-inner { max-width: 640px; margin-inline: auto; }
.blk-whatsapp-inner { max-width: 640px; margin-inline: auto; text-align: center; }
.blk-whatsapp-inner .blk-text { margin-bottom: 1.5rem; }
.blk-form { display: flex; flex-direction: column; gap: 1.1rem; margin-top: 1.5rem; }
.blk-form-row { display: flex; flex-direction: column; gap: .4rem; }
.blk-form-row label { font-size: .85rem; font-weight: 700; opacity: .75; }
.blk-form-row input, .blk-form-row textarea {
	padding: .85rem 1rem; border-radius: 12px;
	border: 1px solid color-mix(in srgb, var(--site-fc, #fff) 18%, transparent);
	background: color-mix(in srgb, var(--site-fc, #fff) 5%, transparent);
	color: var(--site-fc, #fff); font-family: inherit; font-size: 1rem;
}
.blk-form-row input:focus, .blk-form-row textarea:focus { outline: 2px solid var(--accent, #2997ff); outline-offset: 1px; }
.blk-form-hp { position: absolute; left: -9999px; opacity: 0; }
.blk-form-success { padding: 1rem 1.25rem; border-radius: 12px; background: color-mix(in srgb, #2ecc71 18%, transparent); }
.blk-form-error { padding: 1rem 1.25rem; border-radius: 12px; background: color-mix(in srgb, #e74c3c 18%, transparent); }

/* ── Spacer ───────────────────────────────────────────────── */
.blk-spacer-1 { height: clamp(1.5rem, 4vw, 3rem); }
.blk-spacer-2 { height: clamp(3rem, 8vw, 6rem); }
.blk-spacer-3 { height: clamp(4.5rem, 12vw, 9rem); }

/* ============================================================
   Slider — reines CSS Scroll-Snap, KEIN JS.
   Navigation: <a href="#slideId">-Anker, der Browser scrollt nativ
   im überlaufenden Container (scroll-snap-type) zum Ziel-Slide.
   ============================================================ */
.chdes-slider-wrap {
	position: relative;
	margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
	width: auto; max-width: none;
	padding: clamp(2rem, 6vw, 4rem) 0;
}
.chdes-slider-headline { padding: 0 max(var(--outer, 6vw), calc((100vw - 1200px) / 2)); margin-bottom: 1rem; text-align: center; }
.chdes-slider-headline-text { margin: 0; line-height: 1.2; font-size: clamp(1.5rem, 4vw, 2rem); font-weight: 800; }

.chdes-slider-outer { overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding-bottom: .5rem; }
.chdes-slider-track { display: flex; gap: 16px; padding: 0 max(var(--outer, 6vw), calc((100vw - 1200px) / 2)); }

/* Caption-Variante: feste Bildhöhe */
.is-caption .chdes-slide { flex: 0 0 auto; scroll-snap-align: center; scroll-margin-left: max(var(--outer, 6vw), calc((100vw - 1200px) / 2)); }
.is-caption .chdes-slide-img { height: 50vh; height: 50dvh; max-height: 460px; min-width: 280px; border-radius: 24px; overflow: hidden; background: color-mix(in srgb, var(--site-fc, #fff) 8%, transparent); }
.is-caption .chdes-slide-img img, .is-caption .chdes-slide-img picture img { display: block; height: 100%; width: auto; }
.chdes-slide-caption { padding: .75rem .25rem 0; }
.chdes-slide-subtext { margin: 0; font-size: .95rem; opacity: .8; }

/* Overlay-Variante: Bild als Hintergrund mit Text drauf */
.is-overlay .chdes-slide {
	position: relative; flex: 0 0 85vw; max-width: 900px;
	height: 60vh; height: 60dvh; max-height: 520px;
	border-radius: 24px; overflow: hidden;
	scroll-snap-align: center; scroll-margin-left: max(var(--outer, 6vw), calc((100vw - 1200px) / 2));
	background: #000;
}
.vsl-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.vsl-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.55)); pointer-events: none; }
.vsl-text { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(1rem, 4vw, 2rem); z-index: 2; }
.vsl-heading { color: #fff; margin: 0; font-size: clamp(1.3rem, 3vw, 1.9rem); font-weight: 700; line-height: 1.2; }

/* Slider-Navigation: kleine Anker-Punkte, reine CSS-Hover-Optik (kein aktiver State ohne JS möglich,
   daher schlicht als Sprungmarken-Leiste gestaltet).
   Touch-Target wird per Pseudo-Element auf 44×44px vergrößert (Apple-Mindestgröße
   für gut antippbare Elemente), der sichtbare Punkt bleibt klein. */
.chdes-nav-zone { display: flex; justify-content: center; margin-top: .75rem; }
.chdes-slider-controls.chdes-nav { display: flex; gap: 4px; padding: .5rem 0; }
.chdes-navdot {
	position: relative;
	width: 8px; height: 8px; border-radius: 50%;
	background: color-mix(in srgb, var(--site-fc, #fff) 35%, transparent);
	transition: background .2s ease, width .2s ease;
	text-decoration: none;
	margin: 18px 4px; /* zusammen mit der Pseudo-Element-Höhe ergibt das ein 44px-Touch-Target */
}
.chdes-navdot::before {
	content: '';
	position: absolute; top: 50%; left: 50%;
	width: 44px; height: 44px; transform: translate(-50%, -50%);
}
.chdes-navdot:hover, .chdes-navdot:focus-visible { background: var(--site-fc, #fff); width: 22px; border-radius: 6px; }

@media (max-width: 700px) {
	.is-overlay .chdes-slide { flex-basis: 88vw; height: 50vh; height: 50dvh; }
}

/* ── Social-Media-Zeile ──────────────────────────────────── */
.blk-social-inner {
	display: flex; flex-wrap: wrap; gap: 1rem;
	justify-content: var(--social-align, center);
	max-width: 1100px; margin-inline: auto; padding: 0 var(--outer, 6vw);
}
.blk-social-icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 48px; height: 48px; border-radius: 12px;
	background: color-mix(in srgb, var(--social-color, #888) 15%, transparent);
	color: var(--social-color, #888);
	transition: background .2s ease, transform .15s ease;
	text-decoration: none;
}
.blk-social-icon svg { width: 24px; height: 24px; display: block; }
.blk-social-icon:hover {
	background: color-mix(in srgb, var(--social-color, #888) 25%, transparent);
	transform: translateY(-2px);
}
@media (max-width: 480px) {
	.blk-social-icon { width: 44px; height: 44px; }
}

/* ── YouTube / externes Video (CSS-only DSGVO-Consent) ─────── */
.blk-youtube-inner { max-width: 900px; margin-inline: auto; }
.blk-yt-toggle { position: absolute; opacity: 0; pointer-events: none; }
.blk-yt-wrap { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 18px; overflow: hidden; background: #000; }
.blk-yt-consent {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	cursor: pointer; z-index: 2;
	background: color-mix(in srgb, #000 70%, transparent);
	backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.blk-yt-consent-inner { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 1.5rem; text-align: center; max-width: 480px; }
.blk-yt-play-icon { font-size: 3rem; color: #fff; opacity: .85; }
.blk-yt-consent-text { color: rgba(255,255,255,.8); font-size: .9rem; line-height: 1.5; margin: 0; }
.blk-yt-btn { font-size: .9rem; padding: .7rem 1.4rem; }
.blk-yt-frame-wrap { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity .3s ease; }
.blk-yt-frame-wrap iframe { width: 100%; height: 100%; display: block; }
.blk-yt-toggle:checked ~ .blk-yt-consent { display: none; }
.blk-yt-toggle:checked ~ .blk-yt-frame-wrap { opacity: 1; pointer-events: auto; }

/* ── Formular-Builder Frontend-Styles ─────────────────────── */
.blk-customform .blk-form { margin-top: 0; }
.blk-form-fieldset { border: 1px solid color-mix(in srgb, var(--site-fc, #fff) 15%, transparent); border-radius: 10px; padding: 1rem; margin: 0; }
.blk-form-fieldset legend { font-size: .85rem; font-weight: 700; padding: 0 .4rem; opacity: .75; }
.blk-form-radio, .blk-form-checkbox { display: flex; align-items: flex-start; gap: .5rem; margin: .4rem 0; cursor: pointer; font-size: .95rem; line-height: 1.5; }
.blk-form-radio input, .blk-form-checkbox input { margin-top: .2rem; flex-shrink: 0; accent-color: var(--accent, #2997ff); }
.blk-form-checkbox-single { display: flex; align-items: flex-start; gap: .5rem; cursor: pointer; font-size: .95rem; line-height: 1.5; }
.blk-form-checkbox-single input { margin-top: .2rem; flex-shrink: 0; accent-color: var(--accent, #2997ff); }
.blk-form-hint { font-size: .78rem; opacity: .65; margin-top: .3rem; display: block; }
.blk-form-req { color: #e74c3c; margin-left: .1rem; font-weight: 700; }
.blk-form-row select { padding: .85rem 1rem; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--site-fc, #fff) 18%, transparent); background: color-mix(in srgb, var(--site-fc, #fff) 5%, transparent); color: var(--site-fc, #fff); font-family: inherit; font-size: 1rem; width: 100%; }
.blk-form-row input[type=file] { padding: .65rem; background: color-mix(in srgb, var(--site-fc, #fff) 5%, transparent); border: 1px dashed color-mix(in srgb, var(--site-fc, #fff) 25%, transparent); border-radius: 10px; width: 100%; cursor: pointer; }
.blk-form-row input[type=date] { color-scheme: dark; }

/* ── Cookie-Banner (CSS-only, DSGVO) ─────────────────────── */
.cb-banner {
	position: fixed; bottom: 0; left: 0; right: 0; z-index: 999;
	background: color-mix(in srgb, var(--site-bg, #0b0b0f) 96%, transparent);
	backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
	border-top: 1px solid color-mix(in srgb, var(--site-fc, #fff) 12%, transparent);
	padding: 1.25rem var(--outer, 6vw);
}
.cb-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; max-width: 1100px; margin: 0 auto; }
.cb-text { flex: 1 1 300px; }
.cb-title { display: block; font-weight: 800; margin-bottom: .25rem; font-size: 1rem; }
.cb-desc { margin: 0; font-size: .85rem; opacity: .8; line-height: 1.5; }
.cb-link { opacity: 1; font-weight: 600; }
.cb-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.cb-btn { padding: .65rem 1.2rem; border-radius: 999px; border: none; cursor: pointer; font-family: inherit; font-size: .9rem; font-weight: 700; transition: opacity .2s ease; }
.cb-accept { background: var(--site-fc, #fff); color: var(--site-bg, #0b0b0f); }
.cb-reject { background: transparent; color: var(--site-fc, #fff); border: 1px solid color-mix(in srgb, var(--site-fc, #fff) 35%, transparent); }
.cb-btn:hover { opacity: .85; }
@media (max-width: 600px) {
	.cb-inner { flex-direction: column; align-items: flex-start; }
	.cb-actions { width: 100%; }
	.cb-btn { flex: 1; text-align: center; }
}

/* ── Kauf-Button / Buy-Now ──────────────────────────────────── */
.blk-buy-inner { display: flex; flex-direction: column; align-items: var(--buy-align, center); gap: 1.25rem; max-width: 600px; margin-inline: auto; }
.blk-buy-product { text-align: var(--buy-align, center); }
.blk-buy-name { font-size: clamp(1.2rem, 3vw, 1.6rem); font-weight: 800; margin: 0 0 .4rem; }
.blk-buy-desc { opacity: .8; margin: 0 0 .5rem; line-height: 1.6; }
.blk-buy-price { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 900; letter-spacing: -.02em; margin-top: .25rem; }
.blk-buy-btn { display: inline-flex; align-items: center; gap: .5rem; font-size: 1.05rem; padding: .9rem 2rem; }
.blk-buy-icon { display: flex; align-items: center; }
.blk-buy-icon svg { width: 20px; height: 20px; }
.blk-buy-ppwr-link {
	display: inline-block; margin-top: .5rem;
	font-size: .78rem; opacity: .55; text-decoration: none;
	border-bottom: 1px dashed currentColor;
	transition: opacity .15s ease;
}
.blk-buy-ppwr-link:hover { opacity: .9; }

/* ── Warenkorb-Produkt (Varianten + Menge) ─────────────────── */
.blk-cartproduct { padding: 2rem 0; }
.blk-cart-inner { display: flex; gap: 1.5rem; max-width: 600px; margin-inline: auto; flex-wrap: wrap; }
.blk-cart-img { width: 140px; height: 140px; object-fit: cover; border-radius: 12px; flex-shrink: 0; }
.blk-cart-img-empty { background: color-mix(in srgb, currentColor 12%, transparent); border: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.blk-cart-added-msg { background: color-mix(in srgb, #2e7d32 18%, transparent); border: 1px solid #2e7d32; border-radius: 10px; padding: .7rem .9rem; margin-bottom: .9rem; font-size: .9rem; }
.blk-cart-added-msg a { color: inherit; text-decoration: underline; font-weight: 600; }
.blk-cart-body { flex: 1; min-width: 200px; }
.blk-cart-form { display: flex; flex-direction: column; width: 100%; }
.blk-cart-name { font-size: 1.1rem; font-weight: 800; margin: 0 0 .3rem; }
.blk-cart-desc { opacity: .75; font-size: .9rem; margin: 0 0 .5rem; }
.blk-cart-price { font-size: 1.3rem; font-weight: 800; margin-bottom: .75rem; }
.blk-cart-variant-row { display: flex; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.blk-cart-variant-row label { font-size: .85rem; opacity: .7; min-width: 60px; }
.blk-cart-variant-row select { padding: .4rem .6rem; border-radius: 8px; flex: 1; max-width: 160px; }
.blk-cart-add-btn { margin-top: .5rem; }

/* ── Shop-Übersicht (automatisches Produkt-Raster) ─────────── */
.blk-shopoverview { padding: 2rem 0; }
.blk-shopoverview-inner { max-width: 1200px; margin-inline: auto; padding-inline: var(--outer, 1.5rem); text-align: center; }
.blk-shopoverview-grid {
	display: grid;
	grid-template-columns: repeat(var(--shop-cols, 3), 1fr);
	gap: 1.5rem;
}
.blk-shopoverview-card {
	display: block; position: relative;
	text-decoration: none !important; color: inherit;
	border-radius: 12px; overflow: hidden;
	background: color-mix(in srgb, currentColor 3%, transparent);
	transition: transform .15s ease, box-shadow .15s ease;
}
.blk-shopoverview-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px color-mix(in srgb, currentColor 12%, transparent);
}
.blk-shopoverview-img, .blk-shopoverview-img-empty {
	width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;
}
.blk-shopoverview-img-empty {
	background: color-mix(in srgb, currentColor 12%, transparent);
	border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}
.blk-shopoverview-name { padding: .75rem .9rem .2rem; font-weight: 700; font-size: .95rem; }
.blk-shopoverview-price { padding: 0 .9rem .9rem; opacity: .8; font-size: .88rem; }
.blk-shopoverview-soldout {
	position: absolute; top: .6rem; right: .6rem; z-index: 1;
	padding: .25rem .6rem; border-radius: 999px;
	background: #d70015; color: #fff; font-size: .68rem; font-weight: 800;
	pointer-events: none;
}
@media (max-width: 900px) {
	.blk-shopoverview-grid { grid-template-columns: repeat(min(var(--shop-cols, 3), 3), 1fr); }
}
@media (max-width: 560px) {
	.blk-shopoverview-grid { grid-template-columns: repeat(2, 1fr); gap: .9rem; }
}
.blk-cart-soldout {
	display: inline-block; padding: .5rem .9rem; border-radius: 8px;
	background: color-mix(in srgb, #d70015 10%, transparent);
	color: #d70015; font-weight: 700; font-size: .88rem;
}
.blk-cart-lowstock {
	font-size: .8rem; font-weight: 700; color: #f9a825;
	margin-bottom: .5rem;
}

/* ── Bestellformular: Produkttabelle ──────────────────────── */
.blk-order-table { width: 100%; border-collapse: collapse; margin: .5rem 0 1rem; }
.blk-order-head, .blk-order-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr auto;
    gap: .4rem;
    align-items: center;
    padding: .5rem .25rem;
}
.blk-order-head {
    font-weight: 700; font-size: .82rem; opacity: .65;
    border-bottom: 1px solid color-mix(in srgb, var(--site-fc) 20%, transparent);
}
.blk-order-row {
    border-bottom: 1px solid color-mix(in srgb, var(--site-fc) 8%, transparent);
}
.blk-order-row:last-child { border-bottom: none; }
.blk-order-qty-input {
    width: 60px; text-align: center; padding: .3rem .4rem;
    background: color-mix(in srgb, var(--site-fc) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--site-fc) 20%, transparent);
    border-radius: 6px; color: inherit; font-size: .9rem;
}
.blk-order-brutto { font-weight: 700; }
.blk-order-total {
    display: flex; justify-content: space-between; align-items: center;
    padding: .75rem .25rem; font-weight: 800; font-size: 1.05rem;
    border-top: 2px solid color-mix(in srgb, var(--site-fc) 25%, transparent);
    margin-top: .5rem;
}
.blk-order-total-sum { font-size: 1.2rem; }
@media (max-width: 600px) {
    .blk-order-head { display: none; }
    .blk-order-row {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        gap: .25rem;
    }
    .blk-order-pname  { grid-column: 1/-1; font-weight: 700; }
    .blk-order-netto, .blk-order-mwst { font-size: .78rem; opacity: .7; }
    .blk-order-brutto { font-weight: 800; }
    .blk-order-qty    { text-align: right; }
}
.blk-form-address .blk-form-row { margin-bottom: .5rem; }

/* ── Pagination ────────────────────────────────────────────── */
.blk-pagination { padding: 1.5rem var(--outer); }
.blk-pager { display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.blk-pager-dot, .blk-pager-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2.4rem; height: 2.4rem; padding: 0 .6rem;
    border-radius: 8px; font-weight: 700; font-size: .95rem;
    text-decoration: none; transition: background .18s, color .18s;
    border: 1.5px solid color-mix(in srgb, var(--site-fc) 20%, transparent);
    color: var(--site-fc); opacity: .7;
}
.blk-pager-dot:hover, .blk-pager-btn:hover { opacity: 1; background: color-mix(in srgb, var(--site-fc) 10%, transparent); }
.blk-pager-dot--active {
    background: var(--site-fc); color: var(--site-bg); opacity: 1;
    border-color: var(--site-fc); cursor: default;
}
.blk-pager-prev, .blk-pager-next { font-size: 1.2rem; opacity: .6; }
.blk-pager-prev:hover, .blk-pager-next:hover { opacity: 1; }

/* ── FAQ-Block (aufklappbar, CSS-only, kein JS) ──────────────────────── */
.blk-faq { padding: clamp(2rem, 6vw, 4rem) var(--outer, 6vw); }
.blk-faq-inner { max-width: 780px; margin-inline: auto; }

/* Einzelnes FAQ-Item */
.blk-faq-item {
    border: 1px solid color-mix(in srgb, var(--site-fc, #fff) 15%, transparent);
    border-radius: 12px;
    margin-bottom: .6rem;
    overflow: hidden;
    transition: border-color .2s;
}
.blk-faq-item[open] {
    border-color: color-mix(in srgb, var(--site-fc, #fff) 30%, transparent);
}

/* Frage (anklickbar) */
.blk-faq-q {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background .18s;
}
.blk-faq-q::-webkit-details-marker { display: none; }
.blk-faq-q::after {
    content: "›";
    font-size: 1.3rem;
    font-weight: 400;
    opacity: .5;
    transition: transform .22s, opacity .18s;
    flex-shrink: 0;
}
.blk-faq-item[open] .blk-faq-q::after {
    transform: rotate(90deg);
    opacity: 1;
}
.blk-faq-q:hover {
    background: color-mix(in srgb, var(--site-fc, #fff) 5%, transparent);
}

/* Antwort */
.blk-faq-a {
    padding: 0 1.25rem 1rem;
    border-top: 1px solid color-mix(in srgb, var(--site-fc, #fff) 10%, transparent);
    line-height: 1.65;
    opacity: .85;
}
.blk-faq-a p { margin: .75rem 0 0; }

/* Light-Theme Anpassung */
@media (prefers-color-scheme: light) {
    .blk-faq-item {
        border-color: color-mix(in srgb, #000 12%, transparent);
    }
    .blk-faq-q:hover {
        background: color-mix(in srgb, #000 4%, transparent);
    }
}

/* ── Icon-Box (zentriert) ────────────────────────────────────── */
.blk-iconbox { padding: clamp(2rem,6vw,4rem) var(--outer,6vw); }
.blk-iconbox-inner { max-width: 600px; margin-inline: auto; }
.blk-iconbox--center .blk-iconbox-inner { text-align: center; }
.blk-iconbox--center .blk-iconbox-icon { display: flex; justify-content: center; }
.blk-iconbox--left .blk-iconbox-inner { text-align: left; }
.blk-iconbox--right .blk-iconbox-inner { text-align: right; }
.blk-iconbox--right .blk-iconbox-icon { display: flex; justify-content: flex-end; }
.blk-iconbox-icon { margin-bottom: 1rem; }
.blk-iconbox-headline { margin-bottom: .5rem; }
.blk-iconbox-text { opacity: .85; line-height: 1.65; }

/* ── Icon-Liste (Icon links + Text rechts) ───────────────────── */
.blk-iconlist { padding: clamp(1.5rem,5vw,3rem) var(--outer,6vw); }
.blk-iconlist-list {
    list-style: none; padding: 0; margin: 0 auto;
    display: flex; flex-direction: column; gap: .75rem;
    max-width: 680px;
}
.blk-iconlist-item {
    display: flex; align-items: flex-start; gap: .75rem;
}
.blk-iconlist-icon { flex-shrink: 0; margin-top: .1rem; }
.blk-iconlist-text { line-height: 1.55; }

/* ── Bild-Effekte: Ecken, Hover, Animationen (CSS-only, kein JS) ── */

/* Basis für alle Effekt-Bilder */
.blk-img-effect {
    display: block;
    width: 100%;
}

/* ── Ecken abrunden ────────────────────────────────────────────── */
.blk-img-radius-slight { border-radius: 6px;  overflow: hidden; }
.blk-img-radius-medium { border-radius: 14px; overflow: hidden; }
.blk-img-radius-strong { border-radius: 24px; overflow: hidden; }
.blk-img-radius-round  { border-radius: 50%;  overflow: hidden; }

/* ── Hover-Effekte (Maus drüber) ────────────────────────────────── */
.blk-img-hover-zoom {
    transition: transform .35s ease, box-shadow .35s ease;
}
.blk-img-hover-zoom:hover {
    transform: scale(1.04);
}

.blk-img-hover-bright {
    transition: filter .35s ease;
}
.blk-img-hover-bright:hover {
    filter: brightness(1.12);
}

.blk-img-hover-shadow {
    transition: box-shadow .35s ease, transform .35s ease;
}
.blk-img-hover-shadow:hover {
    box-shadow: 0 12px 40px rgba(0,0,0,.28);
    transform: translateY(-2px);
}

.blk-img-hover-lift {
    transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease;
}
.blk-img-hover-lift:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(0,0,0,.22);
}

/* ── Einbend-Animationen (Keyframes, CSS-only) ──────────────────── */
@keyframes chdes-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes chdes-slide-left {
    from { opacity: 0; transform: translateX(-48px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes chdes-slide-right {
    from { opacity: 0; transform: translateX(48px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes chdes-slide-top {
    from { opacity: 0; transform: translateY(-40px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes chdes-slide-bottom {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Animationsklassen */
.blk-img-anim-fade   { animation: chdes-fade-in     .7s ease-out both; }
.blk-img-anim-left   { animation: chdes-slide-left  .7s ease-out both; }
.blk-img-anim-right  { animation: chdes-slide-right .7s ease-out both; }
.blk-img-anim-top    { animation: chdes-slide-top   .7s ease-out both; }
.blk-img-anim-bottom { animation: chdes-slide-bottom .7s ease-out both; }

/* Verzögerungs-Klassen */
.blk-img-delay-200  { animation-delay: .2s; }
.blk-img-delay-400  { animation-delay: .4s; }
.blk-img-delay-600  { animation-delay: .6s; }
.blk-img-delay-800  { animation-delay: .8s; }
.blk-img-delay-1000 { animation-delay: 1s;  }

/* prefers-reduced-motion: Animationen deaktivieren wenn Nutzer das wünscht */
@media (prefers-reduced-motion: reduce) {
    .blk-img-anim-fade,
    .blk-img-anim-left,
    .blk-img-anim-right,
    .blk-img-anim-top,
    .blk-img-anim-bottom {
        animation: none;
        opacity: 1;
        transform: none;
    }
    .blk-img-hover-zoom:hover,
    .blk-img-hover-lift:hover {
        transform: none;
    }
}

/* ── Button — vollständige Design-Steuerung ─────────────────────── */

/* CSS-Custom-Properties für dynamische Farben */
.blk-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1.75rem;
    background: var(--btn-bg, var(--site-acc, #2997ff));
    color: var(--btn-color, #fff);
    border-radius: var(--btn-radius, 8px);
    box-shadow: var(--btn-shadow, none);
    border: var(--btn-border, none);
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    transition: background .22s ease, color .22s ease,
                box-shadow .22s ease, transform .18s ease,
                border-color .22s ease;
    cursor: pointer;
}
.blk-btn:hover {
    background: var(--btn-hover-bg, color-mix(in srgb, var(--btn-bg, var(--site-acc,#2997ff)) 85%, #000));
    color: var(--btn-hover-color, var(--btn-color, #fff));
    transform: translateY(-1px);
}

/* Größen */
.blk-btn-sm { padding: .5rem 1.25rem; font-size: .875rem; }
.blk-btn-md { padding: .75rem 1.75rem; font-size: 1rem; }
.blk-btn-lg { padding: 1rem 2.25rem; font-size: 1.125rem; }
.blk-btn-xl { padding: 1.25rem 3rem; font-size: 1.25rem; }

/* Schatten */
.blk-btn-shadow-subtle { box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.blk-btn-shadow-medium { box-shadow: 0 4px 16px rgba(0,0,0,.20); }
.blk-btn-shadow-strong { box-shadow: 0 8px 32px rgba(0,0,0,.30); }
.blk-btn-shadow-glow   { box-shadow: 0 4px 20px var(--site-acc,#2997ff88); }

/* Hover verstärkt Schatten */
.blk-btn-shadow-subtle:hover { box-shadow: 0 4px 16px rgba(0,0,0,.18); }
.blk-btn-shadow-medium:hover { box-shadow: 0 8px 28px rgba(0,0,0,.26); }
.blk-btn-shadow-strong:hover { box-shadow: 0 12px 40px rgba(0,0,0,.36); }
.blk-btn-shadow-glow:hover   { box-shadow: 0 8px 32px var(--site-acc,#2997ff99); }

/* Ausrichtung */
.blk-button--center .blk-button-inner { text-align: center; }
.blk-button--left   .blk-button-inner { text-align: left; }
.blk-button--right  .blk-button-inner { text-align: right; }

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .blk-btn { transition: none; }
    .blk-btn:hover { transform: none; }
}

/* ── Text-Animationen (CSS-only, kein JS) ───────────────────────── */
/* Gleiche Keyframes wie Bild-Animationen — werden wiederverwendet */
.blk-txt-anim-fade   { animation: chdes-fade-in     .75s ease-out both; }
.blk-txt-anim-left   { animation: chdes-slide-left  .75s ease-out both; }
.blk-txt-anim-right  { animation: chdes-slide-right .75s ease-out both; }
.blk-txt-anim-top    { animation: chdes-slide-top   .75s ease-out both; }
.blk-txt-anim-bottom { animation: chdes-slide-bottom .75s ease-out both; }

/* prefers-reduced-motion: Animationen respektieren */
@media (prefers-reduced-motion: reduce) {
    .blk-txt-anim-fade,
    .blk-txt-anim-left,
    .blk-txt-anim-right,
    .blk-txt-anim-top,
    .blk-txt-anim-bottom {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* ── Hintergrundbild-Blöcke — Overlay für Lesbarkeit ───────────── */
/* Wenn ein Block ein Hintergrundbild hat und Text darüber steht    */
.blk[style*="background-image"] > .blk-headsub-inner,
.blk[style*="background-image"] > .blk-columns-inner,
.blk[style*="background-image"] > .blk-image-inner {
    position: relative;
    z-index: 1;
}

/* ══ A. Zitat / Testimonial (blk-quote) ══════════════════════════ */
.blk-quote { padding: var(--outer, 6vw); }
.blk-quote--center { text-align: center; }

.blk-quote-inner {
    margin: 0 auto;
    max-width: 780px;
    padding: 1.5rem 1.5rem 1.5rem 2rem;
    border-left: 4px solid var(--site-acc, #2997ff);
    background: color-mix(in srgb, var(--site-acc, #2997ff) 6%, transparent);
    border-radius: 0 10px 10px 0;
    font-style: italic;
    position: relative;
}
.blk-quote--center .blk-quote-inner {
    border-left: none;
    border-top: 4px solid var(--site-acc, #2997ff);
    border-radius: 0 0 10px 10px;
    padding: 1.5rem;
}

/* Varianten */
.blk-quote--info    .blk-quote-inner { border-color: #2997ff; background: rgba(41,151,255,.07); }
.blk-quote--success .blk-quote-inner { border-color: #1e8e3e; background: rgba(30,142,62,.07); }
.blk-quote--warning .blk-quote-inner { border-color: #c77700; background: rgba(199,119,0,.07); }

.blk-quote-text { font-size: clamp(1rem, 2.5vw, 1.2rem); line-height: 1.7; margin: 0; }
.blk-quote-text p { margin: 0; }

/* Sterne */
.blk-quote-stars {
    font-size: 1.1rem;
    margin-bottom: .6rem;
    letter-spacing: .1em;
}
.blk-quote-stars-filled { color: #f59e0b; }
.blk-quote-stars-empty  { color: color-mix(in srgb, currentColor 20%, transparent); }

/* Autor */
.blk-quote-author {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: .15rem;
    font-style: normal;
}
.blk-quote--center .blk-quote-author { align-items: center; }
.blk-quote-name { font-weight: 700; font-size: .95rem; }
.blk-quote-role { font-size: .82rem; opacity: .55; }

/* ══ B. Info-Box (blk-infobox) ════════════════════════════════════ */
.blk-infobox { padding: var(--outer, 6vw); }

.blk-infobox-inner {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.25rem 1.5rem;
    border-radius: 10px;
    border-left: 5px solid;
}

/* Varianten */
.blk-infobox--info    .blk-infobox-inner { border-color: #2997ff; background: rgba(41,151,255,.08); }
.blk-infobox--success .blk-infobox-inner { border-color: #1e8e3e; background: rgba(30,142,62,.08); }
.blk-infobox--warning .blk-infobox-inner { border-color: #c77700; background: rgba(199,119,0,.08); }
.blk-infobox--neutral .blk-infobox-inner { border-color: color-mix(in srgb,currentColor 25%,transparent); background: color-mix(in srgb,currentColor 5%,transparent); }

.blk-infobox-icon {
    flex-shrink: 0;
    margin-top: .1rem;
}
.blk-infobox--info    .blk-infobox-icon svg { color: #2997ff; }
.blk-infobox--success .blk-infobox-icon svg { color: #1e8e3e; }
.blk-infobox--warning .blk-infobox-icon svg { color: #c77700; }

.blk-infobox-headline {
    display: block;
    font-weight: 700;
    margin-bottom: .35rem;
    font-size: 1rem;
}
.blk-infobox-text { line-height: 1.65; }
.blk-infobox-text p { margin: 0; }

/* ══ C. Divided List — CSS-Klasse für HTML-Textfelder ════════════ */
/* Verwendung im HTML-Editor: <ul class="chdes-list-divided"> */
.chdes-list-divided {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
}
.chdes-list-divided li {
    border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
    padding: .6rem 0;
    line-height: 1.6;
}
.chdes-list-divided li:first-child {
    border-top: none;
    padding-top: 0;
}
.chdes-list-divided li:last-child { padding-bottom: 0; }

/* Alternate (zebra) — <ul class="chdes-list-alt"> */
.chdes-list-alt {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
    border-radius: 8px;
    overflow: hidden;
}
.chdes-list-alt li {
    padding: .65rem 1rem;
    line-height: 1.6;
}
.chdes-list-alt li:nth-child(odd) {
    background: color-mix(in srgb, currentColor 5%, transparent);
}

/* ══ FREEFRONTEND CSS-KLASSEN — direkt nutzbar ══════════════════
   Verwendung im freien HTML-Block oder in jedem HTML-Textfeld.
   Alle Klassen beginnen mit .chdes- damit sie eindeutig sind.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Card mit Hover-Effekt ─────────────────────────────────
   Verwendung: <div class="chdes-card-hover">...</div>           */
.chdes-card-hover {
    background: color-mix(in srgb, var(--site-fc) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--site-fc) 10%, transparent);
    border-radius: 16px;
    padding: 2rem;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    cursor: default;
}
.chdes-card-hover:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 60px rgba(0,0,0,.15);
    border-color: var(--site-acc, #2997ff);
}

/* Card-Grid: mehrere Cards nebeneinander
   <div class="chdes-card-grid">
     <div class="chdes-card-hover">...</div>
     <div class="chdes-card-hover">...</div>
   </div>                                                         */
.chdes-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
}

/* ── 2. Badge / Label ─────────────────────────────────────────
   Verwendung: <span class="chdes-badge">Neu</span>
               <span class="chdes-badge chdes-badge--accent">Beliebt</span>
               <span class="chdes-badge chdes-badge--success">✓ Verfügbar</span> */
.chdes-badge {
    display: inline-flex; align-items: center;
    padding: .2rem .7rem;
    font-size: .72rem; font-weight: 700; letter-spacing: .06em;
    border-radius: 50px;
    background: color-mix(in srgb, var(--site-fc) 10%, transparent);
    color: var(--site-fc);
    text-transform: uppercase;
    vertical-align: middle;
}
.chdes-badge--accent  { background: var(--site-acc, #2997ff); color: #fff; }
.chdes-badge--success { background: #1e8e3e; color: #fff; }
.chdes-badge--warn    { background: #c77700; color: #fff; }
.chdes-badge--danger  { background: #d70015; color: #fff; }

/* ── 3. Ribbon (Ecken-Banner) ─────────────────────────────────
   Elternelement braucht: position:relative; overflow:hidden
   Verwendung:
   <div style="position:relative;overflow:hidden" class="chdes-card-hover">
     <span class="chdes-ribbon">Neu</span>
     <h3>Produkttitel</h3>
   </div>                                                         */
.chdes-ribbon {
    position: absolute; top: 18px; right: -28px;
    width: 110px; padding: .3rem 0;
    background: var(--site-acc, #2997ff); color: #fff;
    font-size: .7rem; font-weight: 700; text-align: center;
    text-transform: uppercase; letter-spacing: .08em;
    transform: rotate(45deg);
    pointer-events: none;
}
.chdes-ribbon--success { background: #1e8e3e; }
.chdes-ribbon--warn    { background: #c77700; }

/* ── 4. Timeline ──────────────────────────────────────────────
   Verwendung:
   <div class="chdes-timeline">
     <div class="chdes-timeline-item">
       <div class="chdes-timeline-dot"></div>
       <div class="chdes-timeline-body">
         <strong>Schritt 1</strong>
         <p>Beschreibung</p>
       </div>
     </div>
   </div>                                                         */
.chdes-timeline {
    position: relative;
    padding-left: 2rem;
}
.chdes-timeline::before {
    content: '';
    position: absolute; left: .45rem; top: .5rem; bottom: .5rem;
    width: 2px;
    background: color-mix(in srgb, var(--site-acc, #2997ff) 30%, transparent);
}
.chdes-timeline-item {
    position: relative;
    padding: 0 0 2rem 1.5rem;
}
.chdes-timeline-item:last-child { padding-bottom: 0; }
.chdes-timeline-dot {
    position: absolute; left: -1.6rem; top: .3rem;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--site-acc, #2997ff);
    border: 3px solid var(--site-bg, #fff);
    box-shadow: 0 0 0 2px var(--site-acc, #2997ff);
}
.chdes-timeline-body strong { display: block; margin-bottom: .25rem; font-size: 1rem; }
.chdes-timeline-body p { margin: 0; opacity: .75; font-size: .9rem; }

/* ── 5. Gradient-Text ─────────────────────────────────────────
   Verwendung: <h2 class="chdes-gradient-text">Headline</h2>
   Oder: <span class="chdes-gradient-text">Wort</span>          */
.chdes-gradient-text {
    background: linear-gradient(135deg, var(--site-acc, #2997ff) 0%, color-mix(in srgb, var(--site-acc, #2997ff) 60%, #a855f7) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    display: inline-block;
}
/* Variante: Grün → Blau */
.chdes-gradient-text--green {
    background: linear-gradient(135deg, #1e8e3e 0%, #2997ff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
/* Variante: Warm Gold → Orange */
.chdes-gradient-text--warm {
    background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── 6. Glassmorphism Panel ───────────────────────────────────
   Verwendung: <div class="chdes-glass">...</div>
   Funktioniert gut über Hintergrundbildern.
   ⚠ backdrop-filter braucht einen nicht-transparenten Hintergrund
     hinter dem Element — funktioniert über bg-images perfekt.   */
.chdes-glass {
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 16px;
    padding: 2rem;
}
/* Dunkle Variante */
.chdes-glass--dark {
    background: rgba(0,0,0,.25);
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 16px;
    padding: 2rem;
}

/* ── Freier HTML-Block Basis-Styling ──────────────────────────*/
.blk-html { padding: var(--tok-blk-pad, clamp(3rem,8vw,6rem)) var(--outer, 6vw); }
.blk-html-inner { max-width: var(--tok-maxw, 980px); margin: 0 auto; }

/* prefers-reduced-motion: Card-Hover deaktivieren */
@media (prefers-reduced-motion: reduce) {
    .chdes-card-hover:hover { transform: none; }
}

/* ══════════════════════════════════════════════════════════════
   CSS3-ANIMATIONS — Zoom, Einflug, Fade, Zeitverzögerung
   Verwendung im freien HTML-Block — kein JavaScript nötig

   KLASSEN:
   chdes-anim-zoom         Bild/Element: klein → groß beim Laden
   chdes-anim-fadein       Sanftes Einblenden
   chdes-anim-left         Einflug von links
   chdes-anim-right        Einflug von rechts
   chdes-anim-up           Einflug von unten
   chdes-anim-down         Einflug von oben
   chdes-anim-hover-zoom   Bild wird beim Hover groß (für Galerien)

   VERZÖGERUNGEN (kombinieren mit obigen Klassen):
   chdes-delay-1  → 0.2s
   chdes-delay-2  → 0.4s
   chdes-delay-3  → 0.6s
   chdes-delay-4  → 0.8s
   chdes-delay-5  → 1.0s
   chdes-delay-6  → 1.2s

   DAUER (optional):
   chdes-dur-fast    → 0.4s
   chdes-dur-normal  → 0.7s (Standard)
   chdes-dur-slow    → 1.2s
   chdes-dur-xslow   → 2.0s

   BEISPIEL:
   <img src="..." class="chdes-anim-zoom chdes-delay-2 chdes-dur-slow">
   <div class="chdes-anim-left chdes-delay-3">Text fliegt von links</div>
   ══════════════════════════════════════════════════════════════ */

/* ── Keyframes ──────────────────────────────────────────────── */
@keyframes chdesZoomIn {
    from { opacity: 0; transform: scale(0.75); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes chdesFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes chdesFromLeft {
    from { opacity: 0; transform: translateX(-60px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes chdesFromRight {
    from { opacity: 0; transform: translateX(60px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes chdesFromUp {
    from { opacity: 0; transform: translateY(50px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes chdesFromDown {
    from { opacity: 0; transform: translateY(-50px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes chdesZoomInRotate {
    from { opacity: 0; transform: scale(0.6) rotate(-6deg); }
    to   { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes chdesPulse {
    0%,100% { transform: scale(1); }
    50%      { transform: scale(1.04); }
}
@keyframes chdesFloat {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

/* ── Animations-Klassen ─────────────────────────────────────── */
.chdes-anim-zoom {
    animation: chdesZoomIn var(--anim-dur, .7s) cubic-bezier(.22,.68,0,1.2) both;
    animation-play-state: paused;
}
.chdes-anim-fadein {
    animation: chdesFadeIn var(--anim-dur, .7s) ease both;
    animation-play-state: paused;
}
.chdes-anim-left {
    animation: chdesFromLeft var(--anim-dur, .7s) cubic-bezier(.22,.68,0,1.1) both;
    animation-play-state: paused;
}
.chdes-anim-right {
    animation: chdesFromRight var(--anim-dur, .7s) cubic-bezier(.22,.68,0,1.1) both;
    animation-play-state: paused;
}
.chdes-anim-up {
    animation: chdesFromUp var(--anim-dur, .7s) cubic-bezier(.22,.68,0,1.1) both;
    animation-play-state: paused;
}
.chdes-anim-down {
    animation: chdesFromDown var(--anim-dur, .7s) cubic-bezier(.22,.68,0,1.1) both;
    animation-play-state: paused;
}
.chdes-anim-zoom-rotate {
    animation: chdesZoomInRotate var(--anim-dur, .8s) cubic-bezier(.22,.68,0,1.2) both;
    animation-play-state: paused;
}
.chdes-anim-pulse {
    animation: chdesPulse 2.5s ease-in-out infinite;
}
.chdes-anim-float {
    animation: chdesFloat 3s ease-in-out infinite;
}

/* Auslöser fürs Scroll-Verhalten — wird von einem kleinen JavaScript
   (siehe lib/site_render.php, ganz am Seitenende) gesetzt, sobald ein
   Element in den sichtbaren Bereich scrollt. Eine einzige Regel für
   ALLE oben pausierten Animationstypen gemeinsam (Bild wie Text) — kein
   Wiederholen pro Animation nötig. Ohne JavaScript (z.B. sehr alte
   Browser) bleiben Elemente dank "animation-play-state:paused" zwar in
   ihrer Startposition stehen, aber niemals dauerhaft unsichtbar — siehe
   das <noscript>-Sicherheitsnetz ebenfalls in site_render.php. Auf
   Nutzer-Wunsch 2026-09-21 ergänzt ("erst beim Scrollen ins Bild
   abspielen"). */
.chdes-inview { animation-play-state: running !important; }

/* ── Hover-Zoom für Bilder (wie Tencent Galerie) ────────────── */
.chdes-anim-hover-zoom {
    overflow: hidden;
    display: inline-block;
    border-radius: 8px;
}
.chdes-anim-hover-zoom img {
    transition: transform .45s cubic-bezier(.22,.68,0,1.1),
                filter .45s ease;
    transform: scale(1);
    display: block;
    width: 100%;
}
.chdes-anim-hover-zoom:hover img {
    transform: scale(1.08);
    filter: brightness(1.05);
}

/* ── Zeitverzögerungen ──────────────────────────────────────── */
.chdes-delay-1 { animation-delay: .2s; }
.chdes-delay-2 { animation-delay: .4s; }
.chdes-delay-3 { animation-delay: .6s; }
.chdes-delay-4 { animation-delay: .8s; }
.chdes-delay-5 { animation-delay: 1.0s; }
.chdes-delay-6 { animation-delay: 1.2s; }

/* ── Animationsdauer ────────────────────────────────────────── */
.chdes-dur-fast   { --anim-dur: .35s; }
.chdes-dur-normal { --anim-dur: .7s; }
.chdes-dur-slow   { --anim-dur: 1.2s; }
.chdes-dur-xslow  { --anim-dur: 2.0s; }

/* ── prefers-reduced-motion — Barrierefreiheit ──────────────── */
@media (prefers-reduced-motion: reduce) {
    .chdes-anim-zoom, .chdes-anim-fadein, .chdes-anim-left,
    .chdes-anim-right, .chdes-anim-up, .chdes-anim-down,
    .chdes-anim-zoom-rotate, .chdes-anim-pulse, .chdes-anim-float {
        animation: none;
        opacity: 1;
        transform: none;
    }
    .chdes-anim-hover-zoom img { transition: none; }
}

/* ══════════════════════════════════════════════════════════════
   CSS3-TEXT-ANIMATIONEN — Schrift-spezifische Effekte
   Alle Klassen funktionieren auf h1, h2, h3, p, span, div

   KLASSEN:
   chdes-text-reveal       Text wischt von links auf (Clip-Effekt)
   chdes-text-glow         Text leuchtet auf / Glow-Effekt
   chdes-text-flicker      Text flackert kurz auf (Neon-Effekt)
   chdes-text-typewriter   Schreibmaschinen-Effekt (feste Breite nötig)
   chdes-text-slide-up     Jede Zeile schiebt sich von unten hoch
   chdes-text-wave         Wellenbewegung (nur für kurze Texte)
   chdes-text-color-cycle  Farbe wechselt sanft durch Akzentfarben
   chdes-text-blur-in      Text kommt aus Unschärfe

   KOMBINIEREN MIT:
   chdes-delay-1 bis chdes-delay-6  (Verzögerung)
   chdes-dur-fast / slow / xslow    (Geschwindigkeit)
   ══════════════════════════════════════════════════════════════ */

/* ── Text-Keyframes ─────────────────────────────────────────── */
@keyframes chdesTextReveal {
    from { clip-path: inset(0 100% 0 0); opacity: 1; }
    to   { clip-path: inset(0 0% 0 0);   opacity: 1; }
}
@keyframes chdesTextGlow {
    from {
        opacity: 0;
        text-shadow: 0 0 0px currentColor;
        transform: scale(.97);
    }
    60% {
        text-shadow: 0 0 30px var(--site-acc, #2997ff),
                     0 0 60px color-mix(in srgb, var(--site-acc,#2997ff) 40%, transparent);
    }
    to {
        opacity: 1;
        text-shadow: none;
        transform: scale(1);
    }
}
@keyframes chdesTextFlicker {
    0%   { opacity: 0; }
    10%  { opacity: 1; }
    11%  { opacity: 0; }
    12%  { opacity: 1; }
    20%  { opacity: 1; }
    21%  { opacity: 0; }
    22%  { opacity: 1; }
    100% { opacity: 1; }
}
@keyframes chdesTextSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px) skewY(1.5deg);
        filter: blur(2px);
    }
    to {
        opacity: 1;
        transform: translateY(0) skewY(0);
        filter: blur(0);
    }
}
@keyframes chdesTextBlurIn {
    from { opacity: 0; filter: blur(12px); letter-spacing: .3em; }
    to   { opacity: 1; filter: blur(0);    letter-spacing: inherit; }
}
@keyframes chdesTextColorCycle {
    0%   { color: var(--site-acc,  #2997ff); }
    33%  { color: var(--site-acc2, #1e8e3e); }
    66%  { color: color-mix(in srgb, var(--site-acc,#2997ff) 60%, #ff6b35); }
    100% { color: var(--site-acc,  #2997ff); }
}
@keyframes chdesTypewriter {
    from { width: 0; }
    to   { width: 100%; }
}
@keyframes chdesTypeBlink {
    0%,100% { border-color: currentColor; }
    50%     { border-color: transparent; }
}

/* ── Text-Animations-Klassen ────────────────────────────────── */

/* Wischt von links auf — elegant für Überschriften */
.chdes-text-reveal {
    display: inline-block;
    animation: chdesTextReveal var(--anim-dur, .9s)
               cubic-bezier(.77,0,.18,1) both;
    animation-play-state: paused;
}

/* Leuchtet auf — für Hero-Überschriften */
.chdes-text-glow {
    animation: chdesTextGlow var(--anim-dur, 1.1s) ease both;
    animation-play-state: paused;
}

/* Neon-Flackern — für besondere Akzente, sparsam einsetzen */
.chdes-text-flicker {
    animation: chdesTextFlicker var(--anim-dur, .8s) ease both;
    animation-play-state: paused;
}

/* Von unten mit leichtem Blur — modern, wie viele Top-Websites */
.chdes-text-slide-up {
    animation: chdesTextSlideUp var(--anim-dur, .7s)
               cubic-bezier(.22,.68,0,1.1) both;
    display: inline-block;
    animation-play-state: paused;
}

/* Aus Unschärfe — für Unterüberschriften und Beschreibungen */
.chdes-text-blur-in {
    animation: chdesTextBlurIn var(--anim-dur, 1.0s) ease both;
    animation-play-state: paused;
}

/* Endloser Farbwechsel — für Akzent-Wörter */
.chdes-text-color-cycle {
    animation: chdesTextColorCycle 4s ease-in-out infinite;
    font-weight: 700;
}

/* Schreibmaschinen-Effekt — für Slogans und Zitate */
.chdes-text-typewriter {
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid currentColor;
    display: inline-block;
    max-width: max-content;
    animation:
        chdesTypewriter var(--anim-dur, 2.5s) steps(40, end) both,
        chdesTypeBlink .75s step-end infinite;
    animation-play-state: paused, paused;
}
/* Cursor nach Abschluss ausblenden */
.chdes-text-typewriter.chdes-no-cursor {
    border-right: none;
}

/* ── Kombinationsbeispiele ──────────────────────────────────── */
/* Absatz-Text: Zeilen erscheinen nacheinander */
.chdes-text-lines > * {
    display: block;
    animation: chdesTextSlideUp .6s cubic-bezier(.22,.68,0,1.1) both;
}
.chdes-text-lines > *:nth-child(1) { animation-delay: .0s; }
.chdes-text-lines > *:nth-child(2) { animation-delay: .15s; }
.chdes-text-lines > *:nth-child(3) { animation-delay: .30s; }
.chdes-text-lines > *:nth-child(4) { animation-delay: .45s; }
.chdes-text-lines > *:nth-child(5) { animation-delay: .60s; }
.chdes-text-lines > *:nth-child(6) { animation-delay: .75s; }

/* ── prefers-reduced-motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .chdes-text-reveal, .chdes-text-glow, .chdes-text-flicker,
    .chdes-text-slide-up, .chdes-text-blur-in, .chdes-text-typewriter,
    .chdes-text-lines > * {
        animation: none;
        opacity: 1;
        clip-path: none;
        filter: none;
        transform: none;
        width: auto;
        letter-spacing: inherit;
    }
    .chdes-text-color-cycle { animation: none; }
    .chdes-text-typewriter { border-right: none; white-space: normal; }
}

/* ══════════════════════════════════════════════════════════════
   GESTAFFELTE ANIMATIONEN — Bild zoomt, dann Text erscheint
   Bild und Text sind in einem Container — Timing automatisch

   KLASSEN:
   chdes-reveal-wrap          Container für Bild + Text-Overlay
   chdes-reveal-img           Bild: zoomt 75% → 100%
   chdes-reveal-text          Text erscheint NACH dem Bild
   chdes-reveal-text--top     Text oben im Bild
   chdes-reveal-text--bottom  Text unten im Bild (Standard)
   chdes-reveal-text--center  Text mittig im Bild

   SCHRIFTGRÖSSEN (überall verwendbar):
   chdes-fs-xs    0.75rem  — sehr klein
   chdes-fs-sm    0.875rem — klein
   chdes-fs-md    1.05rem  — normal (Fließtext)
   chdes-fs-lg    1.35rem  — groß
   chdes-fs-xl    1.75rem  — sehr groß
   chdes-fs-2xl   2.25rem  — Unterüberschrift
   chdes-fs-3xl   3.0rem   — Überschrift
   chdes-fs-4xl   4.0rem   — Hero-Titel
   chdes-fs-fluid clamp(1.5rem,4vw,3rem) — passt sich an Bildschirm an
   ══════════════════════════════════════════════════════════════ */

/* ── Bild-Zoom + Text-Einblendung ───────────────────────────── */
.chdes-reveal-wrap {
    position: relative;
    overflow: hidden;
    border-radius: var(--reveal-radius, 12px);
    display: block;
}

/* Bild: startet bei 75%, wächst auf 100% */
.chdes-reveal-img {
    display: block;
    width: 100%;
    animation: chdesZoomIn var(--reveal-img-dur, 1.1s)
               cubic-bezier(.22,.68,0,1.15) both;
}

/* Text-Overlay: erscheint NACH dem Bild */
.chdes-reveal-text {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 1.5rem 1.25rem 1rem;
    background: linear-gradient(
        to top,
        rgba(0,0,0,.72) 0%,
        rgba(0,0,0,.35) 60%,
        transparent 100%
    );
    color: #fff;
    animation: chdesFadeIn var(--reveal-txt-dur, .7s)
               ease both;
    /* Startet wenn Bild fertig — Standard: nach 0,9s */
    animation-delay: var(--reveal-txt-delay, .9s);
}

/* Text oben */
.chdes-reveal-text--top {
    top: 0; bottom: auto;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,.72) 0%,
        rgba(0,0,0,.3) 60%,
        transparent 100%
    );
    padding: 1rem 1.25rem 1.5rem;
}

/* Text mittig */
.chdes-reveal-text--center {
    top: 50%; bottom: auto;
    transform: translateY(-50%);
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    text-align: center;
    padding: 1.25rem;
}

/* Text-Titel und Beschreibung im Overlay */
.chdes-reveal-title {
    display: block;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: .3rem;
    animation: chdesFromUp .55s cubic-bezier(.22,.68,0,1.1) both;
    animation-delay: calc(var(--reveal-txt-delay, .9s) + .05s);
}
.chdes-reveal-desc {
    display: block;
    opacity: .85;
    line-height: 1.5;
    animation: chdesFadeIn .55s ease both;
    animation-delay: calc(var(--reveal-txt-delay, .9s) + .2s);
}

/* ── Schriftgrößen-Klassen ──────────────────────────────────── */
.chdes-fs-xs   { font-size: .75rem; }
.chdes-fs-sm   { font-size: .875rem; }
.chdes-fs-md   { font-size: 1.05rem; }
.chdes-fs-lg   { font-size: 1.35rem; }
.chdes-fs-xl   { font-size: 1.75rem; }
.chdes-fs-2xl  { font-size: 2.25rem; }
.chdes-fs-3xl  { font-size: 3.0rem; }
.chdes-fs-4xl  { font-size: 4.0rem; }
.chdes-fs-fluid { font-size: clamp(1.5rem, 4vw, 3rem); }

/* Schriftgewicht */
.chdes-fw-normal { font-weight: 400; }
.chdes-fw-medium { font-weight: 500; }
.chdes-fw-semi   { font-weight: 600; }
.chdes-fw-bold   { font-weight: 700; }
.chdes-fw-black  { font-weight: 900; }

/* Timing anpassen via CSS-Variablen:
   --reveal-img-dur    Dauer des Bild-Zooms    (Standard: 1.1s)
   --reveal-txt-delay  Start des Textes        (Standard: 0.9s)
   --reveal-txt-dur    Dauer des Text-Einblendens (Standard: 0.7s)
   --reveal-radius     Ecken-Radius            (Standard: 12px)

   Beispiel: style="--reveal-img-dur:1.8s;--reveal-txt-delay:1.5s"
*/

/* ── prefers-reduced-motion ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .chdes-reveal-img  { animation: none; }
    .chdes-reveal-text { animation: none; opacity: 1; }
    .chdes-reveal-title { animation: none; }
    .chdes-reveal-desc  { animation: none; }
}

/* ── Rangliste / Vergleichsliste ──────────────────────────────
   Nummerierte Karten mit Logo, Sternebewertung, Vorteilsliste und
   Klick-Button — z.B. für "Top 5 Anbieter"-Vergleichsseiten. */
.blk-ranklist-inner { max-width: 900px; margin: 0 auto; }
.blk-ranklist-intro { text-align: center; opacity: .75; max-width: 640px; margin: 0 auto 2rem; line-height: 1.7; }
.blk-ranklist-items { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 1.5rem; }
.blk-ranklist-item {
    display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
    padding: 1.5rem; border-radius: 16px;
    background: color-mix(in srgb, var(--site-fc) 4%, transparent);
    border: 1px solid color-mix(in srgb, var(--site-fc) 10%, transparent);
    transition: transform .18s ease, border-color .18s ease;
}
.blk-ranklist-item:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--site-acc) 40%, transparent);
}
.blk-ranklist-rank {
    flex: 0 0 auto; width: 2.75rem; height: 2.75rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; font-weight: 800; font-size: 1.1rem;
    background: var(--site-acc); color: #fff;
}
.blk-ranklist-logo {
    flex: 0 0 auto; width: 4.5rem; height: 4.5rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px; overflow: hidden;
    background: color-mix(in srgb, var(--site-fc) 6%, transparent);
}
.blk-ranklist-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.blk-ranklist-body { flex: 1 1 260px; min-width: 0; }
.blk-ranklist-name-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.blk-ranklist-name { font-weight: 700; font-size: 1.1rem; }
.blk-ranklist-badge {
    font-size: .7rem; font-weight: 700; padding: .2rem .6rem; border-radius: 999px;
    background: color-mix(in srgb, var(--site-acc) 15%, transparent);
    color: var(--site-acc);
}
.blk-ranklist-stars { color: #f5b400; font-size: .95rem; margin-top: .25rem; letter-spacing: .1em; }
.blk-ranklist-features { margin: .6rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .3rem; }
.blk-ranklist-features li { font-size: .88rem; opacity: .8; padding-left: 1.3rem; position: relative; }
.blk-ranklist-features li::before {
    content: '✓'; position: absolute; left: 0; color: var(--site-acc); font-weight: 700;
}
.blk-ranklist-cta {
    flex: 0 0 auto; padding: .7rem 1.5rem; border-radius: 999px;
    background: var(--site-acc); color: #fff !important; font-weight: 700;
    text-decoration: none; white-space: nowrap;
    transition: opacity .15s ease;
}
.blk-ranklist-cta:hover { opacity: .85; }
@media (max-width: 640px) {
    .blk-ranklist-item { flex-direction: column; text-align: center; }
    .blk-ranklist-cta { width: 100%; text-align: center; }
}