/* HC Elementor Framework v3.0 — Hover Cards */

.elementor-widget-hc_hover_cards,
.elementor-widget-hc_hover_cards .elementor-widget-container {
    width: 100% !important;
    max-width: 100% !important;
}

/* Grid-Wrapper */
.hc-hover-cards {
    --hc-columns: 4;

    display: grid !important;
    grid-template-columns: repeat(var(--hc-columns), minmax(0, 1fr));
    grid-auto-flow: row;
    grid-auto-rows: auto;
    gap: 2px;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    align-items: stretch;
}

/* ── Card ─────────────────────────────────────────────────────────── */

.hc-hover-card {
    /* Steuervariablen — werden von Elementor-Controls überschrieben */
    --hc-padding-left: 26px;   /* horizontaler Einzug links  */
    --hc-padding-right: 26px;  /* horizontaler Einzug rechts */
    --hc-bottom: 22px;         /* Atemraum zur Kartenunterkante (Headline normal / Button hover) */
    --hc-gap: 12px;            /* Lücke zwischen Headline und Beschreibung (nur Hover sichtbar) */

    min-height: 420px;
    width: 100%;
    min-width: 0;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    cursor: pointer;
    display: block;
    text-decoration: none;

    background-color: #333;
}

/*
 * Eigene Hintergrund-Ebene — trägt Bild/Farbe/Verlauf (per Elementor
 * Group_Control_Background gesetzt) und den Zoom-Effekt beim Hover.
 * Standardverhalten: Platzhalterbild ist gesetzt; löscht man das Bild im
 * Control, wird die gewählte Farbe sichtbar (wie in Elementor üblich).
 */
.hc-hover-card-bg {
    position: absolute;
    inset: 0;

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    transform: scale(1);
    transition: transform 0.7s cubic-bezier(.4, 0, .2, 1);

    z-index: 0;
    pointer-events: none;
}

.hc-hover-card:hover .hc-hover-card-bg,
.hc-hover-card:focus-within .hc-hover-card-bg {
    transform: scale(1.06);
}

/* ── Overlay ──────────────────────────────────────────────────────── */

.hc-hover-card-overlay {
    position: absolute;
    inset: 0;
    background-color: #000;
    opacity: 0.6;
    z-index: 1;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.hc-hover-card:hover .hc-hover-card-overlay,
.hc-hover-card:focus-within .hc-hover-card-overlay {
    opacity: 0.32;
}

/* ── Hover-Linie (optional) ───────────────────────────────────────── */

.hc-hover-card-line {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background-color: #e2007a;
    z-index: 3;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.4s cubic-bezier(.4, 0, .2, 1);
}

.hc-hover-card:hover .hc-hover-card-line,
.hc-hover-card:focus-within .hc-hover-card-line {
    transform: scaleX(1);
}

/* ── Textblock: an der Unterkante verankert ───────────────────────── */

/*
 * Der Textblock ist mit bottom:var(--hc-bottom) an der Kartenunterkante
 * verankert. Wächst der Reveal-Bereich (Hover), wächst der Block nach OBEN —
 * die Unterkante bleibt fix. Dadurch ist der Atemraum unten (--hc-bottom)
 * komplett unabhängig von der Lücke Headline→Text (--hc-gap).
 */
.hc-hover-card-text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: var(--hc-bottom);

    z-index: 2;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

.hc-hover-card-visible {
    box-sizing: border-box;
    padding-left: var(--hc-padding-left);
    padding-right: var(--hc-padding-right);
}

/* Zwei-Klassen-Selektor schlägt Theme-Regeln wie ".wrapper h3 { margin }" */
.hc-hover-card .hc-hover-card-title {
    margin: 0;
}

/* ── Reveal per CSS Grid 0fr → 1fr (kein JS nötig) ────────────────── */

.hc-hover-card-reveal {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.55s cubic-bezier(.4, 0, .2, 1);
}

.hc-hover-card:hover .hc-hover-card-reveal,
.hc-hover-card:focus-within .hc-hover-card-reveal {
    grid-template-rows: 1fr;
}

.hc-hover-card-hidden {
    overflow: hidden;
    min-height: 0; /* erlaubt vollständiges Kollabieren der Grid-Zeile */
    box-sizing: border-box;
    padding-left: var(--hc-padding-left);
    padding-right: var(--hc-padding-right);
}

/* ── Typografie Defaults ──────────────────────────────────────────── */

.hc-hover-card-num {
    font-size: 16px;
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 8px;
}

.hc-hover-card-title {
    font-size: 32px;
    line-height: 1.05;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0;
}

.hc-hover-card-desc {
    font-size: 15px;
    line-height: 1.55;
    margin: 0 0 12px;
    padding-top: var(--hc-gap); /* Lücke Headline→Text; im Normalzustand weggeclippt */
}

.hc-hover-card-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 26px;
    border-radius: 3px;
    font-weight: 600;
    text-decoration: none;
    background-color: #e2007a; /* Fallback; via Control "Button Hintergrundfarbe" überschreibbar */
    color: #fff;               /* Fallback; via Control "Button Textfarbe" überschreibbar */
    cursor: pointer;
}

/* Keyboard-Focus Outline */
.hc-hover-card:focus-visible {
    outline: 2px solid #e2007a;
    outline-offset: 2px;
}

/* ── Tablet ───────────────────────────────────────────────────────── */

@media (min-width: 768px) and (max-width: 1024px) {
    .hc-hover-card-title,
    .hc-hover-card-desc {
        overflow-wrap: break-word;
        word-break: normal;
    }
}

/* ── Mobile: alles sichtbar, keine Hover-Animation ───────────────── */

@media (max-width: 767px) {
    .hc-hover-cards {
        --hc-columns: 1 !important;
        grid-template-columns: 1fr !important;
        gap: 28px;
    }

    .hc-hover-card {
        width: 100% !important;
        min-height: 520px;
    }

    .hc-hover-card-bg,
    .hc-hover-card:hover .hc-hover-card-bg,
    .hc-hover-card:focus-within .hc-hover-card-bg {
        transform: scale(1) !important;
        transition: none !important;
    }

    .hc-hover-card-overlay,
    .hc-hover-card:hover .hc-hover-card-overlay,
    .hc-hover-card:focus-within .hc-hover-card-overlay {
        transition: none !important;
    }

    .hc-hover-card-line {
        display: none;
    }

    /* Reveal dauerhaft offen, ohne Animation */
    .hc-hover-card-reveal {
        grid-template-rows: 1fr !important;
        transition: none !important;
    }

    .hc-hover-card-title {
        font-size: 36px;
    }

    .hc-hover-card-desc {
        font-size: 17px;
        margin-bottom: 18px;
    }
}

/* ════════════════════════════════════════════════════════════════════
   HC TILES — Projekt-/Beitrags-Kacheln mit Layout-Presets
   ════════════════════════════════════════════════════════════════════ */

.elementor-widget-hc_tiles,
.elementor-widget-hc_tiles .elementor-widget-container {
    width: 100% !important;
    max-width: 100% !important;
}

/* ── Grid-Basis: 12 Spalten, zwei einstellbare Zeilenhoehen ──────────────
   --hc-row-big   = Hoehe der grossen Kacheln
   --hc-row-small = Hoehe der kleinen Kacheln
   Zeilen sind auto-hoch; die Kacheln erzwingen ihre Hoehe per min-height und
   fuellen ihren Grid-Bereich durch align-items: stretch. So bleibt das
   Verhaeltnis frei einstellbar, ohne Luecken in gekoppelten Layouts. */
.hc-tiles {
    --hc-row-big: 360px;
    --hc-row-small: 280px;

    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: auto;
    grid-auto-flow: row dense;
    align-items: stretch;
    gap: 3px;
    width: 100%;
    box-sizing: border-box;
}

/* Default-Span + Default-Hoehe (greift, falls ein Layout einen Slot nicht definiert) */
.hc-tiles .hc-tile {
    grid-column: span 4;
    grid-row: span 1;
    min-height: var(--hc-row-small);
}

/* Grosse Kacheln je Layout erhalten die grosse Hoehe */
.hc-tiles--two-top .hc-tile:nth-child(1),
.hc-tiles--two-top .hc-tile:nth-child(2),
.hc-tiles--main-top .hc-tile:nth-child(1),
.hc-tiles--main-left .hc-tile:nth-child(1),
.hc-tiles--main-left-3 .hc-tile:nth-child(1),
.hc-tiles--main-right .hc-tile:nth-child(1),
.hc-tiles--masonry .hc-tile:nth-child(4n+1) {
    min-height: var(--hc-row-big);
}

/* ── Layout-Presets ──────────────────────────────────────────────────── */

/* 2 gross oben + 3er-Raster */
.hc-tiles--two-top .hc-tile:nth-child(1),
.hc-tiles--two-top .hc-tile:nth-child(2) { grid-column: span 6; grid-row: span 2; }
.hc-tiles--two-top .hc-tile:nth-child(n+3) { grid-column: span 4; grid-row: span 1; }

/* 1 gross oben (volle Breite) + 3er-Raster */
.hc-tiles--main-top .hc-tile:nth-child(1) { grid-column: span 12; grid-row: span 2; }
.hc-tiles--main-top .hc-tile:nth-child(n+2) { grid-column: span 4; grid-row: span 1; }

/* Haupt links + 2 rechts gestapelt */
.hc-tiles--main-left .hc-tile:nth-child(1) { grid-column: span 6; grid-row: span 2; }
.hc-tiles--main-left .hc-tile:nth-child(n+2) { grid-column: span 6; grid-row: span 1; }

/* Haupt links + 4er-Raster rechts */
.hc-tiles--main-left-3 .hc-tile:nth-child(1) { grid-column: span 6; grid-row: span 2; }
.hc-tiles--main-left-3 .hc-tile:nth-child(n+2) { grid-column: span 3; grid-row: span 1; }

/* Haupt rechts + 2 links gestapelt */
.hc-tiles--main-right .hc-tile:nth-child(1) { grid-column: 7 / 13; grid-row: 1 / 3; }
.hc-tiles--main-right .hc-tile:nth-child(n+2) { grid-column: span 6; grid-row: span 1; }

/* Gleichmaessige Raster */
.hc-tiles--grid-2 .hc-tile { grid-column: span 6; grid-row: span 1; }
.hc-tiles--grid-3 .hc-tile { grid-column: span 4; grid-row: span 1; }
.hc-tiles--grid-4 .hc-tile { grid-column: span 3; grid-row: span 1; }

/* Versetzt (Masonry-Anmutung) */
.hc-tiles--masonry .hc-tile { grid-column: span 4; grid-row: span 1; }
.hc-tiles--masonry .hc-tile:nth-child(4n+1) { grid-column: span 8; grid-row: span 2; }

/* ── Einzelne Kachel ─────────────────────────────────────────────────── */
.hc-tile {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: block;
    text-decoration: none;
    background-color: #1a2840;
}

.hc-tile-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    filter: brightness(0.42) saturate(0.6);
    transform: scale(1);
    transition: filter 0.5s ease, transform 0.7s cubic-bezier(.4, 0, .2, 1);
    z-index: 0;
    pointer-events: none;
}

.hc-tile:hover .hc-tile-img {
    filter: brightness(0.6) saturate(0.85);
    transform: scale(1.05);
}

/* ── Bild-Ueberlagerung: drei waehlbare Modi ─────────────────────────────
   Gesteuert per CSS-Variablen (im Editor einstellbar):
   --hc-ov-color   = Farbe
   --hc-ov-opacity = Deckkraft (0..1)
   --hc-ov-area    = Hoehe des Verlaufs/der Flaeche in % (nur Modus 2 & 3) */
.hc-tile-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* 1. Vollflaeche: einfarbig ueber das ganze Bild */
.hc-tile-overlay--full {
    background-color: var(--hc-ov-color, #171b26);
    opacity: var(--hc-ov-opacity, 0.6);
}

/* 2. Flaeche nur hinter dem Text: kein Vollflaechen-Overlay – die Flaeche
   wird passgenau ueber .hc-tile-body::before erzeugt (siehe unten). */
.hc-tile-overlay--behind-text {
    display: none;
}

.hc-tiles--ov-behind-text .hc-tile-body::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--hc-ov-color, #171b26);
    opacity: var(--hc-ov-opacity, 0.85);
}

/* 3. Verlauf von unten nach oben – Farben/Positionen/Winkel kommen aus dem
   nativen Elementor-Verlaufs-Control. Hier nur ein Fallback. */
.hc-tile-overlay--gradient-bottom {
    background: linear-gradient(
        to top,
        rgba(23, 27, 38, 0.92) 0%,
        rgba(23, 27, 38, 0) 60%
    );
}

.hc-tile-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 26px 22px;
    z-index: 2;
    box-sizing: border-box;
}

.hc-tile-eyebrow {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #e2007a;
    margin-bottom: 6px;
}

.hc-tile .hc-tile-title {
    font-size: 22px;
    line-height: 1.1;
    font-weight: 800;
    text-transform: uppercase;
    color: #fff;
    margin: 0;
}

.hc-tile-sub {
    font-size: 13px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 6px;
}

/* Pfeil-Button: oben rechts, erscheint beim Hover */
.hc-tile-arrow {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e2007a;
    color: #fff;
    z-index: 3;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.hc-tile:hover .hc-tile-arrow {
    opacity: 1;
    transform: translateY(0);
}

.hc-tile:focus-visible {
    outline: 2px solid #e2007a;
    outline-offset: 2px;
}

/* ── Mobile: eine Spalte, automatische Hoehe ─────────────────────────── */
@media (max-width: 767px) {
    .hc-tiles {
        grid-template-columns: 1fr !important;
        grid-auto-rows: auto !important;
        gap: 14px;
    }

    .hc-tiles .hc-tile,
    .hc-tiles .hc-tile:nth-child(n) {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        min-height: var(--hc-row-small) !important;
    }

    .hc-tile-arrow {
        opacity: 1;
        transform: none;
    }

    .hc-tile-img,
    .hc-tile:hover .hc-tile-img {
        transform: scale(1) !important;
    }
}

/* ════════════════════════════════════════════════════════════════════
   Layout-Picker-Icons (Elementor CHOOSE-Control im Editor-Panel)
   ════════════════════════════════════════════════════════════════════ */
.hc-tl-icon {
    display: block;
    width: 40px;
    height: 28px;
    background-color: currentColor;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
}

.hc-tl-two-top {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'%3E%3Crect x='0' y='0' width='19' height='16'/%3E%3Crect x='21' y='0' width='19' height='16'/%3E%3Crect x='0' y='18' width='11' height='10'/%3E%3Crect x='14' y='18' width='11' height='10'/%3E%3Crect x='28' y='18' width='12' height='10'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'%3E%3Crect x='0' y='0' width='19' height='16'/%3E%3Crect x='21' y='0' width='19' height='16'/%3E%3Crect x='0' y='18' width='11' height='10'/%3E%3Crect x='14' y='18' width='11' height='10'/%3E%3Crect x='28' y='18' width='12' height='10'/%3E%3C/svg%3E");
}

.hc-tl-main-top {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'%3E%3Crect x='0' y='0' width='40' height='16'/%3E%3Crect x='0' y='18' width='12' height='10'/%3E%3Crect x='14' y='18' width='12' height='10'/%3E%3Crect x='28' y='18' width='12' height='10'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'%3E%3Crect x='0' y='0' width='40' height='16'/%3E%3Crect x='0' y='18' width='12' height='10'/%3E%3Crect x='14' y='18' width='12' height='10'/%3E%3Crect x='28' y='18' width='12' height='10'/%3E%3C/svg%3E");
}

.hc-tl-main-left {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'%3E%3Crect x='0' y='0' width='19' height='28'/%3E%3Crect x='21' y='0' width='19' height='13'/%3E%3Crect x='21' y='15' width='19' height='13'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'%3E%3Crect x='0' y='0' width='19' height='28'/%3E%3Crect x='21' y='0' width='19' height='13'/%3E%3Crect x='21' y='15' width='19' height='13'/%3E%3C/svg%3E");
}

.hc-tl-main-left-3 {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'%3E%3Crect x='0' y='0' width='19' height='28'/%3E%3Crect x='21' y='0' width='9' height='13'/%3E%3Crect x='31' y='0' width='9' height='13'/%3E%3Crect x='21' y='15' width='9' height='13'/%3E%3Crect x='31' y='15' width='9' height='13'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'%3E%3Crect x='0' y='0' width='19' height='28'/%3E%3Crect x='21' y='0' width='9' height='13'/%3E%3Crect x='31' y='0' width='9' height='13'/%3E%3Crect x='21' y='15' width='9' height='13'/%3E%3Crect x='31' y='15' width='9' height='13'/%3E%3C/svg%3E");
}

.hc-tl-main-right {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'%3E%3Crect x='21' y='0' width='19' height='28'/%3E%3Crect x='0' y='0' width='19' height='13'/%3E%3Crect x='0' y='15' width='19' height='13'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'%3E%3Crect x='21' y='0' width='19' height='28'/%3E%3Crect x='0' y='0' width='19' height='13'/%3E%3Crect x='0' y='15' width='19' height='13'/%3E%3C/svg%3E");
}

.hc-tl-grid-2 {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'%3E%3Crect x='0' y='0' width='19' height='13'/%3E%3Crect x='21' y='0' width='19' height='13'/%3E%3Crect x='0' y='15' width='19' height='13'/%3E%3Crect x='21' y='15' width='19' height='13'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'%3E%3Crect x='0' y='0' width='19' height='13'/%3E%3Crect x='21' y='0' width='19' height='13'/%3E%3Crect x='0' y='15' width='19' height='13'/%3E%3Crect x='21' y='15' width='19' height='13'/%3E%3C/svg%3E");
}

.hc-tl-grid-3 {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'%3E%3Crect x='0' y='0' width='12' height='13'/%3E%3Crect x='14' y='0' width='12' height='13'/%3E%3Crect x='28' y='0' width='12' height='13'/%3E%3Crect x='0' y='15' width='12' height='13'/%3E%3Crect x='14' y='15' width='12' height='13'/%3E%3Crect x='28' y='15' width='12' height='13'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'%3E%3Crect x='0' y='0' width='12' height='13'/%3E%3Crect x='14' y='0' width='12' height='13'/%3E%3Crect x='28' y='0' width='12' height='13'/%3E%3Crect x='0' y='15' width='12' height='13'/%3E%3Crect x='14' y='15' width='12' height='13'/%3E%3Crect x='28' y='15' width='12' height='13'/%3E%3C/svg%3E");
}

.hc-tl-grid-4 {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'%3E%3Crect x='0' y='0' width='8' height='13'/%3E%3Crect x='10' y='0' width='8' height='13'/%3E%3Crect x='20' y='0' width='8' height='13'/%3E%3Crect x='30' y='0' width='8' height='13'/%3E%3Crect x='0' y='15' width='8' height='13'/%3E%3Crect x='10' y='15' width='8' height='13'/%3E%3Crect x='20' y='15' width='8' height='13'/%3E%3Crect x='30' y='15' width='8' height='13'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'%3E%3Crect x='0' y='0' width='8' height='13'/%3E%3Crect x='10' y='0' width='8' height='13'/%3E%3Crect x='20' y='0' width='8' height='13'/%3E%3Crect x='30' y='0' width='8' height='13'/%3E%3Crect x='0' y='15' width='8' height='13'/%3E%3Crect x='10' y='15' width='8' height='13'/%3E%3Crect x='20' y='15' width='8' height='13'/%3E%3Crect x='30' y='15' width='8' height='13'/%3E%3C/svg%3E");
}

.hc-tl-masonry {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'%3E%3Crect x='0' y='0' width='23' height='16'/%3E%3Crect x='25' y='0' width='15' height='16'/%3E%3Crect x='0' y='18' width='15' height='10'/%3E%3Crect x='17' y='18' width='23' height='10'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'%3E%3Crect x='0' y='0' width='23' height='16'/%3E%3Crect x='25' y='0' width='15' height='16'/%3E%3Crect x='0' y='18' width='15' height='10'/%3E%3Crect x='17' y='18' width='23' height='10'/%3E%3C/svg%3E");
}

/* ── Layout-Picker im Editor-Panel: 3-spaltiges Raster, grosse Icons ──
   Scope ueber das Control "layout" (.elementor-control-layout) – stabil,
   anders als :has(), das im Editor nicht zuverlaessig greift. */
.elementor-control-layout .elementor-choices {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: auto !important;
    gap: 6px;
    height: auto !important;
    min-height: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    background: transparent !important;
}

/* versteckte Radio-Inputs aus dem Raster nehmen, falls Elementor sie als
   Grid-Items rendert (sonst entstehen leere Zellen / Versatz) */
.elementor-control-layout .elementor-choices > input {
    display: none !important;
}

.elementor-control-layout .elementor-choices .elementor-choices-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    height: auto;
    padding: 12px 8px;
    border: 1px solid #d5d8dd;
    border-radius: 4px;
    box-shadow: none;
    background-color: #fff;
    color: #5e6a7e;
}

.elementor-control-layout .elementor-choices .elementor-choices-label:hover {
    border-color: #e2007a;
    color: #e2007a;
}

/* aktive Auswahl hervorheben */
.elementor-control-layout .elementor-choices input:checked + .elementor-choices-label {
    border-color: #e2007a;
    color: #e2007a;
    background-color: #fff;
}

.elementor-control-layout .elementor-choices .hc-tl-icon {
    width: 100%;
    height: 40px;
}