/* KI-Komponentensystem — Basis-Styles der SSOT-Komponenten. Nutzt ausschließlich die WPCarSync-Tokens
   (Farben/Abstände/Radius/Fonts aus :root, per-Tenant im Customizer gesetzt). Keine Roh-Werte hier,
   damit ein Token-Wechsel alle Seiten re-themed. */

/* Kein eigener horizontaler Rand/Breiten-Cap: der SSOT-Inhalt fließt exakt wie normaler Seiten-Content
   im Content-Container des Themes (z.B. .wpcs-content-wrapper). Ein eigenes padding-inline würde einen
   doppelten Einzug erzeugen, der SSOT-Seiten anders aussehen ließe als andere Inhaltsseiten. */
.wpcs-ssot-content {
    width: 100%;
    font-family: var(--wpcs-font-body, sans-serif);
    color: var(--wpcs-color-text, #1a1f24);
}

:is(.wpcs-ssot-content, .wpcs-c-scope) .wpcs-c {
    margin-block: var(--wpcs-space-lg, 32px);
}

/* headline */
.wpcs-ssot-eyebrow {
    display: block;
    font-family: var(--wpcs-font-label, sans-serif);
    font-size: var(--wpcs-text-sm, 0.85rem);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--wpcs-color-primary, #00c4a0);
    margin-block-end: var(--wpcs-space-xs, 6px);
}
.wpcs-ssot-headline {
    font-family: var(--wpcs-font-label, sans-serif);
    line-height: 1.15;
    margin: 0;
}

/* text_block */
.wpcs-ssot-text {
    line-height: 1.65;
}
.wpcs-ssot-text > :first-child { margin-block-start: 0; }
.wpcs-ssot-text > :last-child { margin-block-end: 0; }
.wpcs-ssot-text a {
    color: var(--wpcs-color-primary, #00c4a0);
    text-decoration: underline;
}
/* Schriftgröße (Typo-Tokens); ohne size-Klasse gilt die Vererbung */
/* Schriftgröße für Fließtext — universell über den Wrapper (.wpcs-sz-*, setzt --wpcs-prose-size).
   NUR Prosa-Elemente lesen die Variable; Überschriften (h1–h6) bleiben unberührt. Vererbt in Container
   (z.B. size an einer card skaliert die Text-Kinder darin). */
.wpcs-sz-sm { --wpcs-prose-size: var(--wpcs-c-prose-sm, var(--wpcs-text-md, 14px)); }
.wpcs-sz-md { --wpcs-prose-size: var(--wpcs-c-prose-md, var(--wpcs-text-lg, 16px)); }
.wpcs-sz-lg { --wpcs-prose-size: var(--wpcs-c-prose-lg, var(--wpcs-text-2xl, 20px)); }
.wpcs-sz-xl { --wpcs-prose-size: var(--wpcs-c-prose-xl, var(--wpcs-text-3xl, 22px)); }
.wpcs-ssot-text { font-size: var(--wpcs-prose-size, inherit); }

/* Breite (universell, am Wrapper) — begrenzt NUR die Breite (max-width), NICHT die Position. Ein schmaler
   Block sitzt damit standardmäßig LINKS (natürlicher Lesefluss); die Block-Position steuert `align`
   (margin-inline, s.u.) — so wird ein schmalerer Text nicht ungewollt mittig. Gleiche Tokens wie die
   Bild-Breiten; ohne width-Klasse fließt das Element in voller Container-Breite. Bilder steuern ihre
   Breite über die eigenen .wpcs-ssot-image--*-Klassen (image.php), daher hier nur Nicht-Bild-Wrapper. */
:is(.wpcs-ssot-content, .wpcs-c-scope) .wpcs-w-narrow  { max-width: var(--wpcs-content-narrow-width, 480px); }
:is(.wpcs-ssot-content, .wpcs-c-scope) .wpcs-w-content { max-width: var(--wpcs-content-text-width, 680px); }
:is(.wpcs-ssot-content, .wpcs-c-scope) .wpcs-w-wide    { max-width: var(--wpcs-content-body-width, 820px); }
:is(.wpcs-ssot-content, .wpcs-c-scope) .wpcs-w-full    { max-width: 100%; }

/* image */
.wpcs-ssot-image {
    margin: 0;
}
.wpcs-ssot-image img {
    display: block;
    width: 100%;
    height: auto;
}
.wpcs-ssot-image--narrow { max-width: var(--wpcs-content-narrow-width, 480px); margin-inline: auto; }
.wpcs-ssot-image--content { max-width: var(--wpcs-content-text-width, 680px); margin-inline: auto; }
.wpcs-ssot-image--wide { max-width: var(--wpcs-content-body-width, 820px); margin-inline: auto; }
.wpcs-ssot-image--full { max-width: 100%; }
/* Radius aus dem Design-System (per-Tenant im AdminSetting gesetzt) — gleicher Token wie WPCarSync-Bilder (Fahrzeug/Vergleich) */
.wpcs-ssot-image--rounded img { border-radius: var(--wpcs-c-image-radius, var(--wpcs-radius-md, 8px)); }
.wpcs-ssot-image figcaption {
    margin-block-start: var(--wpcs-space-sm, 12px);
    font-size: var(--wpcs-text-sm, 0.85rem);
    color: var(--wpcs-color-text-muted, #6b7785);
    text-align: center;
}
/* Lade-Platzhalter während der asynchronen KI-Bildgenerierung (site-image-Worker). */
.wpcs-ssot-image--pending .wpcs-ssot-ph {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--wpcs-space-sm, 12px);
    aspect-ratio: 16 / 9; width: 100%;
    border-radius: var(--wpcs-radius-md, 8px);
    color: var(--wpcs-color-text-muted, #6b7785);
    font-size: var(--wpcs-text-sm, 0.85rem);
    background: linear-gradient(110deg, var(--wpcs-color-surface, #eef1f4) 30%, rgba(255,255,255,0.55) 50%, var(--wpcs-color-surface, #eef1f4) 70%);
    background-size: 200% 100%;
    animation: wpcs-ssot-shimmer 1.6s ease-in-out infinite;
}
.wpcs-ssot-image--pending svg {
    width: 36px; height: 36px; opacity: 0.7;
    animation: wpcs-ssot-pulse 1.6s ease-in-out infinite;
}
@keyframes wpcs-ssot-shimmer { to { background-position: -200% 0; } }
@keyframes wpcs-ssot-pulse { 0%, 100% { opacity: 0.35; transform: scale(0.92); } 50% { opacity: 0.9; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
    .wpcs-ssot-image--pending .wpcs-ssot-ph, .wpcs-ssot-image--pending svg { animation: none; }
}

/* section (Layout-Container) — grid ODER flex, alle Optionen als token-basierte Klassen (KEIN Roh-CSS
   vom LLM). Löst das alte grid ab. Reihenfolge: Basis (grid/flex) zuerst, Modifier danach → Modifier
   gleicher Spezifität gewinnen per Quellreihenfolge. */
:is(.wpcs-ssot-content, .wpcs-c-scope) .wpcs-c-section--grid {
    display: grid;
    grid-template-columns: repeat(var(--sec-cols, 2), minmax(0, 1fr));
    align-items: stretch;
}
.wpcs-c-section--flex { display: flex; flex-wrap: wrap; align-items: center; }
.wpcs-c-section--col { flex-direction: column; }
.wpcs-c-section--nowrap { flex-wrap: nowrap; }
/* Spaltenzahl (grid) */
.wpcs-c-section--cols-1 { --sec-cols: 1; }
.wpcs-c-section--cols-2 { --sec-cols: 2; }
.wpcs-c-section--cols-3 { --sec-cols: 3; }
.wpcs-c-section--cols-4 { --sec-cols: 4; }
.wpcs-c-section--cols-5 { --sec-cols: 5; }
.wpcs-c-section--cols-6 { --sec-cols: 6; }
/* Asymmetrische 2-Spalten-Raster (grid) — scoped, überschreibt die repeat()-Basis */
:is(.wpcs-ssot-content, .wpcs-c-scope) .wpcs-c-section--ratio-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
:is(.wpcs-ssot-content, .wpcs-c-scope) .wpcs-c-section--ratio-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
:is(.wpcs-ssot-content, .wpcs-c-scope) .wpcs-c-section--ratio-1-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }
:is(.wpcs-ssot-content, .wpcs-c-scope) .wpcs-c-section--ratio-3-1 { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
:is(.wpcs-ssot-content, .wpcs-c-scope) .wpcs-c-section--ratio-2-3 { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
:is(.wpcs-ssot-content, .wpcs-c-scope) .wpcs-c-section--ratio-3-2 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
/* Abstand (Token-Skala) */
.wpcs-c-section--gap-none { gap: 0; }
.wpcs-c-section--gap-xs { gap: var(--wpcs-c-section-gap-xs, var(--wpcs-space-xs, 6px)); }
.wpcs-c-section--gap-sm { gap: var(--wpcs-c-section-gap-sm, var(--wpcs-space-sm, 12px)); }
.wpcs-c-section--gap-md { gap: var(--wpcs-c-section-gap-md, var(--wpcs-grid-gap, 16px)); }
.wpcs-c-section--gap-lg { gap: var(--wpcs-c-section-gap-lg, var(--wpcs-grid-gap-lg, 28px)); }
.wpcs-c-section--gap-xl { gap: var(--wpcs-c-section-gap-xl, var(--wpcs-space-xl, 40px)); }
/* Hauptachse (flex) */
.wpcs-c-section--justify-start { justify-content: flex-start; }
.wpcs-c-section--justify-center { justify-content: center; }
.wpcs-c-section--justify-end { justify-content: flex-end; }
.wpcs-c-section--justify-between { justify-content: space-between; }
.wpcs-c-section--justify-around { justify-content: space-around; }
/* Querachse (beide Modi) */
.wpcs-c-section--ai-start { align-items: flex-start; }
.wpcs-c-section--ai-center { align-items: center; }
.wpcs-c-section--ai-end { align-items: flex-end; }
.wpcs-c-section--ai-stretch { align-items: stretch; }
/* Kind-Zellen: vertikalen Standard-Abstand zurücksetzen; Cards im Raster füllen die Zellenhöhe */
:is(.wpcs-ssot-content, .wpcs-c-scope) .wpcs-c-section > .wpcs-c { margin-block: 0; }
:is(.wpcs-ssot-content, .wpcs-c-scope) .wpcs-c-section--grid > .wpcs-c > .wpcs-c-card { height: 100%; }
/* Responsiv: Raster kollabiert (Flex bricht ohnehin um) */
@media (max-width: 900px) { .wpcs-c-section--cols-3, .wpcs-c-section--cols-4, .wpcs-c-section--cols-5, .wpcs-c-section--cols-6 { --sec-cols: 2; } }
@media (max-width: 600px) {
    .wpcs-c-section--grid { --sec-cols: 1; }
    :is(.wpcs-ssot-content, .wpcs-c-scope) [class*="wpcs-c-section--ratio-"] { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- card (gestylte Box / Container) */
.wpcs-c-card {
    display: flex;
    flex-direction: column;
    gap: var(--wpcs-c-card-gap, var(--wpcs-space-sm, 12px));
    padding: var(--wpcs-c-card-padding, var(--wpcs-space-md, 20px));
    border-radius: var(--wpcs-c-card-radius, var(--wpcs-radius-lg, 16px));
    overflow: hidden;
}
.wpcs-c-card--bg-surface { background: var(--wpcs-color-surface, #fff); }
.wpcs-c-card--bg-surface-2 { background: var(--wpcs-color-surface-2, #fff); }
.wpcs-c-card--bg-transparent { background: transparent; padding: 0; }
.wpcs-c-card--border { border: 1px solid var(--wpcs-color-border, #dde1e6); }
.wpcs-c-card--link { text-decoration: none; color: inherit; transition: transform .15s ease, box-shadow .15s ease; }
.wpcs-c-card--link:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0, 0, 0, .1); }
:is(.wpcs-ssot-content, .wpcs-c-scope) .wpcs-c-card > .wpcs-c { margin-block: 0; }

/* ---------------------------------------------------------------- accordion (FAQ) */
.wpcs-c-accordion { border-top: 1px solid var(--wpcs-color-border, #dde1e6); }
.wpcs-c-acc-item { border-bottom: 1px solid var(--wpcs-color-border, #dde1e6); }
.wpcs-c-acc-item > summary {
    cursor: pointer;
    padding: var(--wpcs-c-accordion-pad, var(--wpcs-space-sm, 12px)) 0;
    font-family: var(--wpcs-font-label, sans-serif);
    font-weight: 600;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.wpcs-c-acc-item > summary::-webkit-details-marker { display: none; }
.wpcs-c-acc-item > summary::after { content: "+"; color: var(--wpcs-color-primary, #00c4a0); font-size: 1.3em; }
.wpcs-c-acc-item[open] > summary::after { content: "−"; }
.wpcs-c-acc-body { padding-bottom: var(--wpcs-c-accordion-pad, var(--wpcs-space-sm, 12px)); line-height: 1.6; font-size: var(--wpcs-prose-size, inherit); }

/* ---------------------------------------------------------------- feature_list */
.wpcs-c-features { display: grid; gap: var(--wpcs-c-features-gap, var(--wpcs-grid-gap-lg, 28px)); grid-template-columns: repeat(var(--fcols, 3), minmax(0, 1fr)); }
.wpcs-c-features--2 { --fcols: 2; }
.wpcs-c-features--3 { --fcols: 3; }
.wpcs-c-features--4 { --fcols: 4; }
.wpcs-c-feat-icon { width: var(--wpcs-c-feature-icon-size, 36px); height: var(--wpcs-c-feature-icon-size, 36px); color: var(--wpcs-color-primary, #00c4a0); margin-bottom: var(--wpcs-space-xs, 6px); }
.wpcs-c-feat-title { font-family: var(--wpcs-font-label, sans-serif); margin: 0 0 var(--wpcs-space-xs, 6px); font-size: 1.1rem; }
.wpcs-c-feat-text { margin: 0; line-height: 1.6; color: var(--wpcs-color-text-muted, #6b7785); font-size: var(--wpcs-prose-size, inherit); }
@media (max-width: 900px) { .wpcs-c-features--3, .wpcs-c-features--4 { --fcols: 2; } }
@media (max-width: 600px) { .wpcs-c-features { --fcols: 1; } }

/* ---------------------------------------------------------------- testimonial */
.wpcs-c-testimonial { max-width: var(--wpcs-content-text-width, 680px); margin-inline: auto; }
.wpcs-c-testi-rating { color: var(--wpcs-color-primary, #00c4a0); letter-spacing: 2px; margin-bottom: var(--wpcs-space-sm, 12px); }
.wpcs-c-testi-quote { font-size: var(--wpcs-prose-size, 1.4rem); line-height: 1.5; font-style: italic; margin: 0 0 var(--wpcs-space-md, 20px); }
.wpcs-c-testi-cap { display: inline-flex; align-items: center; gap: var(--wpcs-space-sm, 12px); }
.wpcs-c-testi-cap span { display: flex; flex-direction: column; text-align: left; }
.wpcs-c-testi-role { color: var(--wpcs-color-text-muted, #6b7785); font-size: .9rem; }
.wpcs-c-testi-avatar { width: var(--wpcs-c-testimonial-avatar-size, 48px); height: var(--wpcs-c-testimonial-avatar-size, 48px); border-radius: 50%; object-fit: cover; }

/* ---------------------------------------------------------------- stats */
.wpcs-c-stats { display: grid; gap: var(--wpcs-c-stats-gap, var(--wpcs-grid-gap, 16px)); grid-template-columns: repeat(var(--scols, 3), minmax(0, 1fr)); }
.wpcs-c-stats--2 { --scols: 2; }
.wpcs-c-stats--3 { --scols: 3; }
.wpcs-c-stats--4 { --scols: 4; }
.wpcs-c-stat-value { font-family: var(--wpcs-font-label, sans-serif); font-size: var(--wpcs-c-stat-value-size, 2.4rem); font-weight: 700; color: var(--wpcs-color-primary, #00c4a0); line-height: 1; }
.wpcs-c-stat-label { color: var(--wpcs-color-text-muted, #6b7785); margin-top: var(--wpcs-space-xs, 6px); }
@media (max-width: 600px) { .wpcs-c-stats { --scols: 2; } }

/* ---------------------------------------------------------------- gallery (Bilder + Lightbox) */
.wpcs-c-gallery { display: grid; gap: var(--wpcs-c-gallery-gap, var(--wpcs-grid-gap, 16px)); grid-template-columns: repeat(var(--gcols, 3), minmax(0, 1fr)); }
.wpcs-c-gallery--2 { --gcols: 2; }
.wpcs-c-gallery--3 { --gcols: 3; }
.wpcs-c-gallery--4 { --gcols: 4; }
.wpcs-c-gallery--5 { --gcols: 5; }
/* Zellen sind Lightbox-Trigger (.wpcs-c-gallery__item); den vertikalen Standard-Abstand der Bild-.wpcs-c darin zurücksetzen */
:is(.wpcs-ssot-content, .wpcs-c-scope) .wpcs-c-gallery__item > .wpcs-c { margin-block: 0; }
.wpcs-c-gallery__item { cursor: zoom-in; }
.wpcs-c-gallery .wpcs-ssot-image { max-width: none; margin: 0; }
.wpcs-c-gallery .wpcs-ssot-image img { aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--wpcs-c-gallery-radius, var(--wpcs-radius-md, 8px)); cursor: zoom-in; }
@media (max-width: 900px) { .wpcs-c-gallery--4, .wpcs-c-gallery--5 { --gcols: 3; } }
@media (max-width: 600px) { .wpcs-c-gallery { --gcols: 2; } }
/* Lightbox: geteilt über wpcsInitLightbox() (wpcs-core.js) — kein eigenes Overlay mehr. */

/* ---------------------------------------------------------------- spacer / divider */
.wpcs-c-spacer--sm { height: var(--wpcs-c-spacer-sm, var(--wpcs-space-sm, 12px)); }
.wpcs-c-spacer--md { height: var(--wpcs-c-spacer-md, var(--wpcs-space-md, 20px)); }
.wpcs-c-spacer--lg { height: var(--wpcs-c-spacer-lg, var(--wpcs-space-lg, 32px)); }
.wpcs-c-spacer--xl { height: var(--wpcs-c-spacer-xl, var(--wpcs-space-xl, 52px)); }
.wpcs-c-divider { border: 0; border-top: 1px solid var(--wpcs-color-border, #dde1e6); margin-block: 0; }
/* Vertikaler Abstand als NICHT-kollabierendes padding am Wrapper (nicht als margin am <hr>): sonst
   verschluckt der Grund-Rhythmus (.wpcs-c margin) den Abstand und „groß" wirkt wie normal. :has() ordnet
   das Padding anhand der Größenklasse am <hr> zu. Werte pro Größe über --wpcs-c-divider-space-* zentral
   überschreibbar (Fallback = globale Abstandsskala). */
:is(.wpcs-ssot-content, .wpcs-c-scope) .wpcs-c--divider { margin-block: 0; }
:is(.wpcs-ssot-content, .wpcs-c-scope) .wpcs-c--divider:has(.wpcs-c-divider--space-sm) { padding-block: var(--wpcs-c-divider-space-sm, var(--wpcs-space-sm, 12px)); }
:is(.wpcs-ssot-content, .wpcs-c-scope) .wpcs-c--divider:has(.wpcs-c-divider--space-md) { padding-block: var(--wpcs-c-divider-space-md, var(--wpcs-space-md, 20px)); }
:is(.wpcs-ssot-content, .wpcs-c-scope) .wpcs-c--divider:has(.wpcs-c-divider--space-lg) { padding-block: var(--wpcs-c-divider-space-lg, var(--wpcs-space-lg, 32px)); }
:is(.wpcs-ssot-content, .wpcs-c-scope) .wpcs-c--divider:has(.wpcs-c-divider--space-xl) { padding-block: var(--wpcs-c-divider-space-xl, var(--wpcs-space-xl, 52px)); }

/* ---------------------------------------------------------------- button (CTA)
   Optik an die etablierte System-A-Brand (`.wpcs-btn` in form-elements.css) angeglichen: uppercase,
   letter-spacing, Form-Höhe, Radius-sm, gleicher Hover (bright + glow) → ein einheitliches Button-Bild
   über beide Systeme. Größen bleiben über --wpcs-c-button-pad-* / -radius übersteuerbar. */
.wpcs-c-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    font-family: var(--wpcs-font-label, sans-serif);
    font-size: var(--wpcs-text-sm, 13px);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border: 1px solid transparent;
    border-radius: var(--wpcs-c-button-radius, var(--wpcs-form-border-radius, 4px));
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--wpcs-transition, 160ms ease);
}
/* md = Standard-Höhe wie .wpcs-btn; sm/md/lg über Padding-Vars übersteuerbar */
.wpcs-c-button--sm { height: auto; padding: var(--wpcs-c-button-pad-sm, 8px 16px); }
.wpcs-c-button--md { height: var(--wpcs-form-height, 48px); padding: var(--wpcs-c-button-pad-md, 0 var(--wpcs-space-lg, 32px)); }
.wpcs-c-button--lg { height: var(--wpcs-form-height, 48px); padding: var(--wpcs-c-button-pad-lg, 0 var(--wpcs-space-xl, 52px)); font-size: var(--wpcs-text-base, 15px); }
.wpcs-c-button--primary { background: var(--wpcs-color-primary, #00c4a0); color: var(--wpcs-color-bg, #f0f2f4); border-color: var(--wpcs-color-primary, #00c4a0); }
.wpcs-c-button--primary:hover { background: var(--wpcs-color-primary-bright, #00d4ae); box-shadow: 0 4px 24px var(--wpcs-color-primary-glow, rgba(0,196,160,.22)); }
.wpcs-c-button--secondary { background: var(--wpcs-color-surface, #fff); color: var(--wpcs-color-text, #1a1f24); border-color: var(--wpcs-color-border, #dde1e6); }
.wpcs-c-button--secondary:hover { border-color: var(--wpcs-color-border-hover, #b0bbc6); color: var(--wpcs-color-text, #1a1f24); }
.wpcs-c-button--ghost { background: transparent; color: var(--wpcs-color-text-muted, #6b7785); border-color: var(--wpcs-color-border, #dde1e6); }
.wpcs-c-button--ghost:hover { border-color: var(--wpcs-color-border-hover, #b0bbc6); color: var(--wpcs-color-text, #1a1f24); }
.wpcs-c-button--soft { background: var(--wpcs-color-primary-dim, #00c4a01a); color: var(--wpcs-color-primary, #00c4a0); border-color: transparent; }
.wpcs-c-button--soft:hover { background: var(--wpcs-color-primary, #00c4a0); color: var(--wpcs-color-bg, #f0f2f4); }
.wpcs-c-button--link { background: none; border: none; height: auto; padding: 0; color: var(--wpcs-color-primary, #00c4a0); font-family: var(--wpcs-font-mono, monospace); font-size: var(--wpcs-text-xs, 12px); letter-spacing: 0.06em; }
.wpcs-c-button--link:hover { text-decoration: underline; }
.wpcs-c-button--full { width: 100%; }
.wpcs-c-button__label { display: inline-block; }
/* Icon-only (Kreis) — z.B. Fahrzeug merken; Favoriten sind universell rot (Rohwerte wie in form-elements.css) */
.wpcs-c-button.wpcs-c-button--icon { width: 42px; height: 42px; min-width: 0; padding: 0; flex-shrink: 0; border-radius: 50%; background: var(--wpcs-color-surface, #fff); border: 1px solid var(--wpcs-color-border, #dde1e6); color: var(--wpcs-color-text-muted, #6b7785); letter-spacing: normal; }
.wpcs-c-button.wpcs-c-button--icon svg { width: 18px; height: 18px; }
.wpcs-c-button.wpcs-c-button--icon:hover { background: #fff; border-color: #e53935; color: #e53935; }
.wpcs-c-button.wpcs-c-button--icon.wpcs_is_parked, .wpcs-c-button.wpcs-c-button--icon.wpcs_in_comparison { background: #ffeaea; border-color: #e53935; color: #e53935; }
.wpcs-c-button.wpcs-c-button--icon.wpcs_is_parked svg, .wpcs-c-button.wpcs-c-button--icon.wpcs_in_comparison svg { fill: currentColor; }
/* Ajax-Spinner (JS toggelt .is-loading) */
.wpcs-c-button--ajax { position: relative; }
.wpcs-c-button__spinner { display: none; }
.wpcs-c-button--ajax.is-loading .wpcs-c-button__spinner { display: inline-block; animation: wpcs-c-btn-spin 0.7s linear infinite; }
.wpcs-c-button--ajax.is-loading .wpcs-c-button__label { opacity: .6; }
@keyframes wpcs-c-btn-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- slider / carousel
   Der SSOT-slider rendert als `.wpcs-carousel` (siehe slider.php) und nutzt die GETEILTE Swiper-Engine
   (form-elements.js) + deren Optik (ui.css) — es gibt nur EINEN Slider. Hier daher nur noch die
   Anpassung der Slide-Zellen: den vertikalen Standard-Abstand der Komponenten-Kinder in einer Slide
   zurücksetzen, und eine Card-Slide die volle Höhe füllen lassen. */
.wpcs-c-slide > .wpcs-c { margin-block: 0; }
.wpcs-c-slide, .wpcs-c-slide > .wpcs-c, .wpcs-c-slide > .wpcs-c > .wpcs-c-card { height: 100%; }

/* ---------------------------------------------------------------- Universelle Ausrichtung (Wrapper) */
/* horizontal — vom Wrapper .wpcs-al-*; überschreibt Komponenten-Defaults (via props.align).
   Steuert BEIDES: Textausrichtung (text-align) UND — bei breitenbegrenzten Blöcken — die Block-Position
   (margin-inline). Bei vollbreiten Elementen ist margin-inline wirkungslos (kein Freiraum) → nur text-align zählt. */
:is(.wpcs-ssot-content, .wpcs-c-scope) .wpcs-al-left { text-align: left; margin-inline: 0 auto; }
:is(.wpcs-ssot-content, .wpcs-c-scope) .wpcs-al-center { text-align: center; margin-inline: auto; }
:is(.wpcs-ssot-content, .wpcs-c-scope) .wpcs-al-right { text-align: right; margin-inline: auto 0; }
/* Bilder folgen der Ausrichtung (figure hat eine max-width) */
.wpcs-al-left > .wpcs-ssot-image { margin-inline: 0 auto; }
.wpcs-al-center > .wpcs-ssot-image { margin-inline: auto; }
.wpcs-al-right > .wpcs-ssot-image { margin-inline: auto 0; }
/* vertikal — Position der Zelle in einem grid/gallery/flex-Container */
.wpcs-va-top { align-self: start; }
.wpcs-va-center { align-self: center; }
.wpcs-va-bottom { align-self: end; }