/* ==========================================================================
   Bricks Vergleich – Styles
   ========================================================================== */

.vergleich-wrapper {
    display: grid;
    grid-template-columns: var(--vgl-label-width, 220px) minmax(0, auto);
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    /* clip statt hidden — erhält Border-Radius-Clipping, erzeugt aber keinen
       Scroll-Container und blockiert deshalb position:sticky auf Zellen nicht. */
    overflow: clip;
    background: #fff;
    position: relative;
    max-width: 100%;
}

/* === LINKE LABEL-SPALTE === */
.vergleich-labels {
    display: grid;
    grid-auto-rows: minmax(var(--vgl-row-min, 80px), auto);
    background: #f3f4f6;
    z-index: 3;
}

.vergleich-wrapper.has-sticky-labels .vergleich-labels {
    position: sticky;
    left: 0;
}

.vergleich-label {
    padding: 16px;
    font-weight: 600;
    color: #111;
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.3;
}

.vergleich-label__text {
    min-width: 0;
}

/* Info-Icon neben dem Label, Tooltip per CSS (::after mit attr()) */
.vergleich-tooltip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15em;
    height: 1.15em;
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    color: currentColor;
    opacity: .55;
    cursor: help;
    font-size: .95em;
    line-height: 1;
    position: relative;
    transition: opacity .12s ease;
}

.vergleich-tooltip:hover,
.vergleich-tooltip:focus-visible {
    opacity: 1;
    outline: none;
}

.vergleich-tooltip svg {
    width: 1em;
    height: 1em;
    display: block;
}

.vergleich-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    min-width: 180px;
    max-width: 280px;
    padding: 8px 12px;
    background: #111827;
    color: #fff;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 20;
    transition: opacity .12s ease;
}

.vergleich-tooltip:hover::after,
.vergleich-tooltip:focus-visible::after {
    opacity: 1;
    visibility: visible;
}

.vergleich-wrapper.has-dividers .vergleich-label {
    border-bottom: 1px solid #e5e7eb;
}

.vergleich-wrapper.has-dividers .vergleich-label:last-child {
    border-bottom: none;
}

.vergleich-label.is-highlighted {
    background-color: #fef3c7;
    color: #92400e;
}

/* Schatten-Hervorhebung: bandartiger Schatten ueber und unter der Reihe.
   Gilt fuer Label und alle Card-Zellen der Reihe. z-index bringt die Zelle
   ueber angrenzende Zeilen, damit der Schatten nicht abgeschnitten wirkt. */
.vergleich-label.is-highlight-shadow,
.vergleich-zelle.is-highlight-shadow {
    position: relative;
    z-index: 2;
    box-shadow: var(--vgl-highlight-shadow, 0 3px 10px -2px rgba(0, 0, 0, .09), 0 -3px 10px -2px rgba(0, 0, 0, .09));
}

.vergleich-wrapper.has-dividers .vergleich-label.is-highlight-shadow,
.vergleich-wrapper.has-dividers .vergleich-zelle.is-highlight-shadow {
    border-top: 0;
    border-bottom: 0;
}

/* === RECHTE SCROLL-REGION === */
.vergleich-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.vergleich-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--vgl-column-width, 220px);
}

/* === PRODUKT-CARDS === */
.vergleich-card {
    display: grid;
    grid-auto-rows: minmax(var(--vgl-row-min, 80px), auto);
    border-left: 1px solid #e5e7eb;
    background: #fff;
    position: relative !important;
    /* Basis-z-index: sorgt dafuer, dass die gepinnte Spalte (z:10) IMMER
       klar ueber ihren Nachbarn liegt. Ohne expliziten Wert wuerden
       DOM-spaetere Cards beim horizontalen Scrollen visuell ueber die
       gepinnte Card schieben. */
    z-index: 1;
}

.vergleich-card:first-child {
    border-left: none;
}

/* === RANKING-BADGE === */
.vergleich-card > .vergleich-rank,
.vergleich-rank {
    position: absolute !important;
    top: var(--vgl-rank-offset-y, 8px);
    left: var(--vgl-rank-offset-x, 8px);
    z-index: 5;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 2px;
    box-sizing: border-box;
    min-width: var(--vgl-rank-size, 36px);
    min-height: var(--vgl-rank-size, 36px);
    padding: var(--vgl-rank-padding, 4px 10px);
    font-size: var(--vgl-rank-font-size, 14px);
    font-weight: var(--vgl-rank-font-weight, 700);
    line-height: 1;
    color: var(--vgl-rank-color, #fff);
    background: var(--vgl-rank-bg, #f59e0b);
    border-radius: var(--vgl-rank-radius, 9999px);
    box-shadow: var(--vgl-rank-shadow, 0 2px 6px rgba(0, 0, 0, .18));
    pointer-events: none;
    white-space: nowrap;
    grid-row: auto !important;
    grid-column: auto !important;
    margin: 0 !important;
}

.vergleich-wrapper.has-ranking-pos-top-left .vergleich-card > .vergleich-rank {
    top: var(--vgl-rank-offset-y, 8px) !important;
    right: auto !important;
    left: var(--vgl-rank-offset-x, 8px) !important;
    bottom: auto !important;
    transform: none !important;
}

.vergleich-wrapper.has-ranking-pos-top-right .vergleich-card > .vergleich-rank {
    top: var(--vgl-rank-offset-y, 8px) !important;
    left: auto !important;
    right: var(--vgl-rank-offset-x, 8px) !important;
    bottom: auto !important;
    transform: none !important;
}

.vergleich-wrapper.has-ranking-pos-top-center .vergleich-card > .vergleich-rank {
    top: var(--vgl-rank-offset-y, 8px) !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
}

.vergleich-wrapper.has-ranking-pos-bottom-left .vergleich-card > .vergleich-rank {
    top: auto !important;
    right: auto !important;
    left: var(--vgl-rank-offset-x, 8px) !important;
    bottom: var(--vgl-rank-offset-y, 8px) !important;
    transform: none !important;
}

.vergleich-wrapper.has-ranking-pos-bottom-right .vergleich-card > .vergleich-rank {
    top: auto !important;
    left: auto !important;
    right: var(--vgl-rank-offset-x, 8px) !important;
    bottom: var(--vgl-rank-offset-y, 8px) !important;
    transform: none !important;
}

.vergleich-card.is-rank-top > .vergleich-rank {
    background: linear-gradient(135deg, #fbbf24 0%, #d97706 100%) !important;
    color: #fff !important;
}

.vergleich-rank__prefix,
.vergleich-rank__suffix {
    opacity: .9;
}

/* === SCORE / BEWERTUNGS-BADGE ===
   Wird als Kind der Bild-Zelle gerendert. Die Zelle bekommt
   .has-score-anchor → position:relative, Badge ist absolut darin. */
.vergleich-zelle.has-score-anchor {
    position: relative !important;
}

.vergleich-zelle.has-score-anchor > .vergleich-score,
.vergleich-score {
    position: absolute !important;
    bottom: var(--vgl-score-offset-y, 8px);
    left: var(--vgl-score-offset-x, 8px);
    z-index: 5;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 2px;
    box-sizing: border-box;
    min-width: var(--vgl-score-size, 36px);
    min-height: var(--vgl-score-size, 36px);
    padding: var(--vgl-score-padding, 6px 10px);
    font-size: var(--vgl-score-font-size, 14px);
    font-weight: var(--vgl-score-font-weight, 700);
    line-height: 1;
    color: var(--vgl-score-color, #fff);
    background: var(--vgl-score-bg, #111827);
    border-radius: var(--vgl-score-radius, 6px);
    box-shadow: var(--vgl-score-shadow, 0 2px 6px rgba(0, 0, 0, .18));
    pointer-events: none;
    white-space: nowrap;
    margin: 0 !important;
    flex: 0 0 auto !important;
}

.vergleich-wrapper.has-score-pos-top-left .vergleich-zelle.has-score-anchor > .vergleich-score {
    top: var(--vgl-score-offset-y, 8px) !important;
    right: auto !important;
    left: var(--vgl-score-offset-x, 8px) !important;
    bottom: auto !important;
    transform: none !important;
}

.vergleich-wrapper.has-score-pos-top-right .vergleich-zelle.has-score-anchor > .vergleich-score {
    top: var(--vgl-score-offset-y, 8px) !important;
    left: auto !important;
    right: var(--vgl-score-offset-x, 8px) !important;
    bottom: auto !important;
    transform: none !important;
}

.vergleich-wrapper.has-score-pos-top-center .vergleich-zelle.has-score-anchor > .vergleich-score {
    top: var(--vgl-score-offset-y, 8px) !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
}

.vergleich-wrapper.has-score-pos-bottom-left .vergleich-zelle.has-score-anchor > .vergleich-score {
    top: auto !important;
    right: auto !important;
    left: var(--vgl-score-offset-x, 8px) !important;
    bottom: var(--vgl-score-offset-y, 8px) !important;
    transform: none !important;
}

.vergleich-wrapper.has-score-pos-bottom-center .vergleich-zelle.has-score-anchor > .vergleich-score {
    top: auto !important;
    left: 50% !important;
    right: auto !important;
    bottom: var(--vgl-score-offset-y, 8px) !important;
    transform: translateX(-50%) !important;
}

.vergleich-wrapper.has-score-pos-bottom-right .vergleich-zelle.has-score-anchor > .vergleich-score {
    top: auto !important;
    left: auto !important;
    right: var(--vgl-score-offset-x, 8px) !important;
    bottom: var(--vgl-score-offset-y, 8px) !important;
    transform: none !important;
}

.vergleich-score__prefix,
.vergleich-score__suffix {
    opacity: .85;
}

/* === NAVIGATIONS-PFEILE (Prev/Next) ===
   Kreisrunde Buttons, vertikal mittig am Scroll-Bereich. Per JS ein-
   und ausgeblendet je nach Scroll-Position. */
.vergleich-nav {
    position: absolute;
    top: 80px;
    transform: translateY(-50%);
    /* 15 > 10 (gepinnte Card) — sonst wuerde bei aktivem Pin der Shadow
       der gepinnten Spalte den rechts daneben positionierten Prev-Pfeil
       verdunkeln/verdecken. */
    z-index: 15;
    width: var(--vgl-nav-size, 44px);
    height: var(--vgl-nav-size, 44px);
    padding: 0;
    margin: 0;
    border: 1px solid var(--vgl-nav-border, #e5e7eb);
    background: var(--vgl-nav-bg, #ffffff);
    color: var(--vgl-nav-color, #111827);
    border-radius: 9999px;
    box-shadow: var(--vgl-nav-shadow, 0 4px 12px rgba(0, 0, 0, .15));
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--vgl-nav-icon-size, 18px);
    line-height: 1;
    transition: opacity .15s ease, transform .15s ease, background-color .15s ease;
    opacity: 1;
}

.vergleich-nav:hover {
    transform: translateY(-50%) scale(1.05);
    background: var(--vgl-nav-bg, #ffffff);
}

.vergleich-nav:focus-visible {
    outline: 2px solid var(--vgl-nav-color, #111827);
    outline-offset: 2px;
}

.vergleich-nav[hidden] {
    display: none !important;
}

.vergleich-nav svg {
    width: var(--vgl-nav-icon-size, 18px);
    height: var(--vgl-nav-icon-size, 18px);
    display: block;
}

.vergleich-nav--prev {
    left: calc(var(--vgl-label-width, 200px) + var(--vgl-nav-offset, 12px) + var(--vgl-nav-offset-x, 0px));
}

.vergleich-nav--next {
    right: calc(var(--vgl-nav-offset, 12px) - var(--vgl-nav-offset-x, 0px));
}

/* Zebra-Streifen — wirkt nur auf die Card-Zellen, nicht auf die linke
   Label-Spalte (die behaelt ihre eigene Hintergrundfarbe). */
.vergleich-zelle.is-row-odd  { background-color: var(--vgl-row-bg-odd,  transparent); }
.vergleich-zelle.is-row-even { background-color: var(--vgl-row-bg-even, transparent); }
.vergleich-zelle.is-row-odd  { color: var(--vgl-row-color-odd,  inherit); }
.vergleich-zelle.is-row-even { color: var(--vgl-row-color-even, inherit); }

/* Zeilen-Hover: JS setzt .is-row-hover auf Label + allen Zellen derselben
   Zeile, CSS faerbt sie leicht ein. */
.vergleich-wrapper.has-row-hover .vergleich-label.is-row-hover,
.vergleich-wrapper.has-row-hover .vergleich-zelle.is-row-hover {
    background-color: var(--vgl-row-hover-bg, rgba(0, 0, 0, .04));
    transition: background-color .12s ease;
}

/* Counter-Element (zeigt z.B. "1–4 von 80") */
.vergleich-counter {
    font-size: 0.875rem;
    color: #6b7280;
    padding: 8px 4px;
    min-height: 1.75em;
}

.vergleich-counter.is-align-left   { text-align: left; }
.vergleich-counter.is-align-center { text-align: center; }
.vergleich-counter.is-align-right  { text-align: right; }

/* Scrollbar ausblenden, wenn Nav-Pfeile aktiv sind — Scrollen bleibt
   moeglich per Pfeil, Mausrad und Touch-Swipe. */
.vergleich-wrapper.has-nav .vergleich-scroll {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.vergleich-wrapper.has-nav .vergleich-scroll::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

/* === ZELLEN INNERHALB DER CARDS === */
.vergleich-zelle {
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: var(--vgl-justify, center);
    text-align: var(--vgl-text-align, center);
    gap: 8px;
    line-height: 1.4;
}

.vergleich-wrapper.has-dividers .vergleich-zelle {
    border-bottom: 1px solid #e5e7eb;
}

.vergleich-wrapper.has-dividers .vergleich-zelle:last-child {
    border-bottom: none;
}

.vergleich-zelle.is-highlighted {
    background-color: #fef3c7;
}

/* Bilder in Zellen */
.vergleich-zelle img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

/* Buttons etc. nicht stretchen */
.vergleich-zelle .brxe-button,
.vergleich-zelle .button {
    flex: 0 0 auto;
}

/* Inhaltselemente: Zeilenhöhe gut, kein unnötiges Stretching */
.vergleich-zelle > * {
    margin: 0;
    max-width: 100%;
}

/* === SCROLLBAR STYLING === */
.vergleich-scroll::-webkit-scrollbar {
    height: 8px;
}

.vergleich-scroll::-webkit-scrollbar-track {
    background: #f3f4f6;
}

.vergleich-scroll::-webkit-scrollbar-thumb {
    background: #9ca3af;
    border-radius: 4px;
}

.vergleich-scroll::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}

/* === PIN-BUTTON (Spalte anpinnen) =========================================
   Kleiner Button oben rechts an jeder Card. Sichtbar nur, wenn der Wrapper
   .can-pin traegt (JS prueft, ob >=2 Cards gleichzeitig sichtbar sind —
   sonst ergibt Pinning keinen Sinn). Die gepinnte Card wird per JS im DOM
   an Position 1 im .vergleich-track verschoben und klebt dort per
   position:sticky beim horizontalen Scrollen. */
.vergleich-pin {
    position: absolute;
    top: var(--vgl-pin-offset-y, 8px);
    right: var(--vgl-pin-offset-x, 8px);
    z-index: 6;
    pointer-events: auto;
    width: var(--vgl-pin-size, 28px);
    height: var(--vgl-pin-size, 28px);
    padding: 0;
    margin: 0;
    border: 0;
    background: transparent;
    color: var(--vgl-pin-color, #9ca3af);
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border-radius: 6px;
    transition: color .15s ease, background-color .15s ease, transform .15s ease;
}

.vergleich-wrapper.has-pin.can-pin .vergleich-pin {
    display: inline-flex;
}

.vergleich-pin:hover {
    color: var(--vgl-pin-color-active, #111827);
    background: rgba(0, 0, 0, .05);
}

.vergleich-pin:focus-visible {
    outline: 2px solid var(--vgl-pin-color-active, #111827);
    outline-offset: 2px;
}

.vergleich-pin__icon {
    width: 16px;
    height: 16px;
    display: block;
}

.vergleich-pin__icon--on { display: none; }

/* Gepinnte Spalte: klebt am linken Rand beim horizontalen Scroll.
   WICHTIG: wir nutzen DOM-Move (Card wandert in JS an DOM-Position 0 im
   Track) + position:sticky — NICHT order:-1 + sticky. Die Kombination
   order + sticky hat in Chrome einen Bug, bei dem der Scroll-Container
   nach einem programmatischen scrollBy einfriert. Mit reinem DOM-Move
   ist die Card natuerlich an Layout-Column 1 und sticky laeuft komplett
   auf dem Compositor-Thread — kein Main-Thread-JS pro Frame, deshalb
   auch kein 1-Frame-Lag und kein Flackern. */
/* Die gepinnte Card bleibt visuell links stehen, waehrend der Rest des
   Tracks scrollt. Realisiert per DOM-Move (Card wird im JS an DOM-Position
   0 verschoben) + JS-getriebenem transform:translate3d(scrollLeft). Das
   ist der einzige Ansatz, der in dieser Chrome-Version zuverlaessig
   laeuft: position:sticky friert den Scroll-Container nach dem ersten
   scrollBy ein, scroll-driven animations haben denselben Effekt. JS-
   Transform pro Scroll-Frame hat einen leichten 1-Frame-Lag (Flackern),
   ist aber funktional stabil. */
.vergleich-card.is-pinned {
    z-index: 10 !important;
    background: #fff;
    box-shadow: 6px 0 8px -4px rgba(0, 0, 0, .12);
    will-change: transform;
}

/* Passendes Produkt-Label (z.B. "Testsieger", "Platz 2"). Wird in JS per
   DOM-Move an die erste Position im Label-Track verschoben. Da der Label-
   Track selbst per translateX(-scrollLeft) mit dem Card-Scroll
   synchronisiert wird, kontert ein translate3d(+scrollLeft) auf dem
   gepinnten Label — Netto bleibt es ueber der gepinnten Card stehen. Das
   inline style.transform setzt JS im rAF-geschlossenen Scroll-Handler
   (kein CSS-Var-Lag). */
.vergleich-product-label-item.is-pinned-label {
    z-index: 2;
    position: relative;
    will-change: transform;
}

.vergleich-card.is-pinned .vergleich-pin {
    color: var(--vgl-pin-color-active, #111827);
    z-index: 7;
}

.vergleich-card.is-pinned .vergleich-pin__icon--off { display: none; }
.vergleich-card.is-pinned .vergleich-pin__icon--on  { display: block; }

/* === DEFAULT-STYLES FÜR ZELLTYPEN =========================================
   Früher waren diese Werte als Inline-Styles hart im PHP-Render eingesetzt.
   Das hat verhindert, dass die globalen „Zellen-Styling"-Controls (die auf
   Klassen-Ebene gespeichert werden können) je wirksam werden — Inline
   gewinnt gegen jede CSS-Regel. Jetzt stehen die Defaults hier im CSS.
   Row-Level-Felder überschreiben immer noch per Inline (höhere Priorität),
   globale Element-Level-Controls überschreiben die CSS-Defaults per
   erhöhter Specificity (Bricks scoped sie mit `.brxe-ID .…` / Klasse). */

.vergleich-zelle--icon .vergleich-icon {
    width: 24px;
    height: 24px;
    font-size: 24px;
}

/* Lightbox-Trigger: Icon-Position per flex-direction (klassen-fähig).
   Render schreibt Icon IMMER zuerst ins DOM. Der globale
   cellLightboxIconPosition-Control setzt flex-direction auf
   .vergleich-lightbox-trigger — Per-Row-Einstellung (falls explizit
   gewählt) ueberschreibt das via hoeherer Specificity ueber eine der
   beiden Varianten-Klassen. */
.vergleich-lightbox-trigger.is-icon-left  { flex-direction: row; }
.vergleich-lightbox-trigger.is-icon-right { flex-direction: row-reverse; }

/* Heading-Zelle: eigener Default-Look als Produkt-/Spalten-Überschrift,
   damit sie ohne zusätzliches Styling schon wie ein Heading wirkt — und
   nicht wie normaler Text aussieht (dafür gibt's den Zelltyp Text).
   Browser-Default-Margin auf h2-h6 wird entfernt, damit Bricks' Flex-
   Cell-Layout nicht auseinanderbröselt. Globale cellHeading*-Controls
   überschreiben diese Defaults auf Klassen-Ebene. */
.vergleich-heading {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
}

.vergleich-bool.is-true  { color: #16a34a; }
.vergleich-bool.is-false { color: #dc2626; }
.vergleich-bool__icon {
    width: 20px;
    height: 20px;
    font-size: 20px;
}

.vergleich-rating                { font-size: 18px; }
.vergleich-rating__stars         { color: #d1d5db; letter-spacing: 2px; }
.vergleich-rating__fill          { color: #f59e0b; }
.vergleich-rating__icon.is-full,
.vergleich-rating__icon.is-half  { color: #f59e0b; }
.vergleich-rating__icon.is-empty { color: #d1d5db; }
.vergleich-rating__icons         { gap: 2px; }
.vergleich-rating__icon {
    width: 18px;
    height: 18px;
    font-size: 18px;
}
.vergleich-rating__number {
    font-weight: 600;
}

.vergleich-list {
    gap: 6px;
}
.vergleich-list__item {
    gap: 8px;
}
.vergleich-list__icon {
    width: 16px;
    height: 16px;
    min-width: 16px;
    flex: 0 0 16px;
    font-size: 16px;
}

/* Score-Zelle: Plain & Badge */
.vergleich-score-cell {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
}
.vergleich-score-cell__prefix,
.vergleich-score-cell__suffix {
    opacity: .85;
}
.vergleich-score-cell.is-badge {
    font-size: 14px;
    color: #ffffff;
    background: #111827;
    padding: 6px 12px;
    border-radius: 9999px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
    white-space: nowrap;
}

/* Score-Zelle: Karten-Modus */
.vergleich-score-cell.is-card {
    background: #e5e7eb;
    border-radius: 14px;
}
.vergleich-score-cell.is-card .vergleich-score-cell__value-region {
    padding: 18px 16px;
}
.vergleich-score-cell.is-card .vergleich-score-cell__value {
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1;
}
.vergleich-score-cell.is-card .vergleich-score-cell__prefix,
.vergleich-score-cell.is-card .vergleich-score-cell__suffix {
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
}
.vergleich-score-cell__verdict {
    background: rgba(0, 0, 0, .08);
    padding: 10px 12px;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
}

/* === BRICKS BUILDER SPEZIFISCH === */
/* Im Builder sollen die Zellen sichtbar sein, auch wenn leer */
.bricks-builder-edit .vergleich-zelle:empty::after {
    content: "Inhalt hier ablegen";
    color: #9ca3af;
    font-size: 0.75rem;
    font-style: italic;
}

.bricks-builder-edit .vergleich-wrapper {
    min-height: 200px;
}