/* 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: default;
    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: default;
}

/* Pointer nur, wenn die Karte / der Button tatsächlich verlinkt ist */
a.hc-hover-card,
a.hc-hover-card-button {
    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;
}

/* ════════════════════════════════════════════════════════════════════
   HC Process Steps — Ablauf-Modul (Raster + Slider/Scroller)
   ════════════════════════════════════════════════════════════════════ */

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

.hc-ps {
    /* Steuervariablen — von Elementor-Controls überschrieben */
    --hc-ps-cols: 4;
    --hc-ps-spv: 3;
    --hc-ps-gap: 30px;
    --hc-ps-num-size: 66px;
    --hc-ps-num-radius: 0px;
    --hc-ps-line-color: #e2007a;
    --hc-ps-line-thickness: 2px;

    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

/* Reihenfolge der Blöcke (steuert oben/unten der Pfeile) */
.hc-ps-head { order: 0; }
.hc-ps-viewport { order: 2; }
.hc-ps-nav { order: 3; } /* Standard: unten */

/* ── Kopfbereich ─────────────────────────────────────────────────────── */
.hc-ps-head {
    margin-bottom: 56px;
}

.hc-ps-eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #e2007a;
    margin-bottom: 14px;
}

.hc-ps-eyebrow::before {
    content: "";
    display: block;
    width: 30px;
    height: 2px;
    background-color: currentColor;
    flex-shrink: 0;
}

.hc-ps-heading {
    font-size: clamp(34px, 4.5vw, 60px);
    font-weight: 900;
    line-height: 0.95;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: #171b26;
    margin: 0;
}

.hc-ps-heading em {
    font-style: normal;
    color: #e2007a;
}

/* Zweizeilig: Akzentwort rückt in eine eigene Zeile */
.hc-ps-heading--stack em {
    display: block;
}

/* ── Viewport / Track ────────────────────────────────────────────────── */
.hc-ps-viewport {
    position: relative;
    box-sizing: border-box;
}

.hc-ps-track {
    box-sizing: border-box;
}

/* Raster-Modus: feste Spalten */
.hc-ps--grid .hc-ps-track {
    display: grid;
    grid-template-columns: repeat(var(--hc-ps-cols), minmax(0, 1fr));
    gap: var(--hc-ps-gap);
    position: relative;
}

/* durchgehende Linie hinter den Nummern (Raster) — startet exakt in der Mitte
   der ersten Nummer und endet in der Mitte der letzten Spalte. Die Nummern
   sind linksbündig in ihrer Spalte, daher:
     left  = halbe Nummerngröße (Mitte der ersten Nummer)
     width = (Spaltenbreite + Abstand) × (Spalten − 1)
           = (100% + Abstand) × (cols − 1) / cols
   So reicht die Linie nie über die letzte Nummer hinaus. */
.hc-ps--grid .hc-ps-track::before {
    content: "";
    position: absolute;
    top: calc(var(--hc-ps-num-size) / 2 - var(--hc-ps-line-thickness) / 2);
    left: calc(var(--hc-ps-num-size) / 2);
    width: calc((100% + var(--hc-ps-gap)) * (var(--hc-ps-cols) - 1) / var(--hc-ps-cols));
    height: var(--hc-ps-line-thickness);
    background-color: var(--hc-ps-line-color);
    z-index: 0;
}

.hc-ps--no-line .hc-ps-track::before {
    display: none;
}

/* Slider-Modus: horizontaler Scroller mit Snap */
.hc-ps--slider .hc-ps-track {
    display: flex;
    gap: var(--hc-ps-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
}

.hc-ps--slider .hc-ps-track::-webkit-scrollbar {
    display: none;
}

.hc-ps--slider .hc-ps-step {
    flex: 0 0 calc((100% - (var(--hc-ps-spv) - 1) * var(--hc-ps-gap)) / var(--hc-ps-spv));
    scroll-snap-align: start;
}

.hc-ps--slider.is-dragging .hc-ps-track {
    scroll-behavior: auto;
    scroll-snap-type: none;
    cursor: grabbing;
    user-select: none;
}

.hc-ps--slider[data-hc-ps-drag="1"] .hc-ps-track {
    cursor: grab;
}

/* ── Einzelner Schritt ───────────────────────────────────────────────── */
.hc-ps-step {
    position: relative;
    min-width: 0;
    box-sizing: border-box;
    text-align: var(--hc-ps-align, left);
}

.hc-ps-num-row {
    position: relative;
    margin-bottom: 26px;
}

.hc-ps-num {
    position: relative;
    z-index: 1;
    width: var(--hc-ps-num-size);
    height: var(--hc-ps-num-size);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border: 2px solid var(--hc-ps-line-color);
    border-radius: var(--hc-ps-num-radius);
    color: #e2007a;
    font-size: 26px;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 4px 16px rgba(226, 0, 122, 0.12);
}

/* Per-Schritt-Verbinder: Startpunkt (--hc-ps-line-start) wird per JS an die
   tatsaechliche Nummern-Mitte gesetzt — funktioniert bei links/zentriert/rechts. */
.hc-ps-connector {
    position: absolute;
    top: calc(var(--hc-ps-num-size) / 2 - var(--hc-ps-line-thickness) / 2);
    left: var(--hc-ps-line-start, calc(var(--hc-ps-num-size) / 2));
    width: calc(100% + var(--hc-ps-gap));
    height: var(--hc-ps-line-thickness);
    background-color: var(--hc-ps-line-color);
    z-index: 0;
}

/* im Raster-Modus übernimmt (ohne JS) die durchgehende Track-Linie — Verbinder aus */
.hc-ps--grid .hc-ps-connector {
    display: none;
}

/* letzter Schritt: kein Verbinder nach rechts */
.hc-ps-step:last-child .hc-ps-connector {
    display: none;
}

.hc-ps--no-line .hc-ps-connector {
    display: none !important;
}

/* ── JS aktiv (hc-ps--conn): Per-Schritt-Verbinder statt durchgehender Linie.
   --hc-ps-line-display schaltet die Linie je Geraet an/aus. ── */
.hc-ps--conn.hc-ps--grid .hc-ps-track::before { display: none; }
.hc-ps--conn.hc-ps--grid .hc-ps-connector { display: var(--hc-ps-line-display, block); }
/* letztes Element einer Reihe (JS-markiert): kein Verbinder nach rechts */
.hc-ps--conn .hc-ps-step--row-end .hc-ps-connector { display: none; }

/* Gestapelt (1 Spalte, mobil): Verbinder vertikal, an der Nummern-Mitte ausgerichtet
   (auch bei zentrierten Nummern). num-row static -> bezieht sich auf den ganzen Schritt. */
.hc-ps--conn.hc-ps--vstack .hc-ps-num-row { position: static; }
.hc-ps--conn.hc-ps--vstack .hc-ps-connector {
    display: var(--hc-ps-line-display, block);
    top: calc(var(--hc-ps-num-size) / 2);
    left: calc(var(--hc-ps-line-start, calc(var(--hc-ps-num-size) / 2)) - var(--hc-ps-line-thickness) / 2);
    width: var(--hc-ps-line-thickness);
    height: calc(100% + var(--hc-ps-gap));
}
.hc-ps--conn.hc-ps--vstack .hc-ps-step--row-end .hc-ps-connector { display: none; }

/* Titel/Text ueber die Linie legen, damit die (zentrierte) Linie nicht durch den Text laeuft */
.hc-ps .hc-ps-title,
.hc-ps .hc-ps-text { position: relative; z-index: 1; }

.hc-ps .hc-ps-title {
    font-size: 18px;
    font-weight: 800;
    line-height: 1.15;
    text-transform: uppercase;
    color: #171b26;
    margin: 0 0 10px;
}

.hc-ps-text {
    font-size: 14px;
    line-height: 1.68;
    color: #5e6a7e;
}

/* ── Slider-Navigation ───────────────────────────────────────────────── */
.hc-ps-nav {
    display: flex;
    gap: 10px;
    margin-top: 36px;
}

.hc-ps-arrow {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #e2007a;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.hc-ps-arrow:hover {
    transform: translateY(-2px);
}

.hc-ps-arrow[disabled] {
    opacity: 0.35;
    cursor: default;
    transform: none;
}

/* nur im Slider-Modus sichtbar */
.hc-ps--grid .hc-ps-nav {
    display: none;
}

/* ── Pfeil-Position ──────────────────────────────────────────────────── */
/* horizontale Ausrichtung */
.hc-ps--arrows-bottom-left .hc-ps-nav,
.hc-ps--arrows-top-left .hc-ps-nav {
    justify-content: flex-start;
}
.hc-ps--arrows-bottom-center .hc-ps-nav,
.hc-ps--arrows-top-center .hc-ps-nav {
    justify-content: center;
}
.hc-ps--arrows-bottom-right .hc-ps-nav,
.hc-ps--arrows-top-right .hc-ps-nav {
    justify-content: flex-end;
}

/* oben: Navigation zwischen Kopfbereich und Schritten platzieren */
.hc-ps--arrows-top-left .hc-ps-nav,
.hc-ps--arrows-top-center .hc-ps-nav,
.hc-ps--arrows-top-right .hc-ps-nav {
    order: 1;
    margin-top: 0;
    margin-bottom: 24px;
}

/* ── Mobile: Raster bricht um, Linie aus ─────────────────────────────── */
@media (max-width: 767px) {
    .hc-ps--grid .hc-ps-track::before {
        display: none;
    }
}

/* ════════════════════════════════════════════════════════════════════
   HC Process Steps — Darstellungs-Picker (CHOOSE-Control im Editor)
   ════════════════════════════════════════════════════════════════════ */
.hc-ps-mode-icon {
    display: block;
    width: 46px;
    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;
}

/* Raster: vier gleich hohe Spalten */
.hc-ps-md-grid {
    -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='7' height='28'/%3E%3Crect x='11' y='0' width='7' height='28'/%3E%3Crect x='22' y='0' width='7' height='28'/%3E%3Crect x='33' y='0' width='7' height='28'/%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='7' height='28'/%3E%3Crect x='11' y='0' width='7' height='28'/%3E%3Crect x='22' y='0' width='7' height='28'/%3E%3Crect x='33' y='0' width='7' height='28'/%3E%3C/svg%3E");
}

/* Slider: zwei volle Karten + an den Rändern angeschnittene (scrollbar) */
.hc-ps-md-slider {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 28'%3E%3Crect x='-6' y='4' width='12' height='20'/%3E%3Crect x='10' y='0' width='12' height='28'/%3E%3Crect x='24' y='0' width='12' height='28'/%3E%3Crect x='40' y='4' width='12' height='20'/%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='-6' y='4' width='12' height='20'/%3E%3Crect x='10' y='0' width='12' height='28'/%3E%3Crect x='24' y='0' width='12' height='28'/%3E%3Crect x='40' y='4' width='12' height='20'/%3E%3C/svg%3E");
}

/* Picker im Editor-Panel: 2 grosse Felder nebeneinander */
.elementor-control-display_mode .elementor-choices {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    height: auto !important;
    min-height: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
    background: transparent !important;
}

.elementor-control-display_mode .elementor-choices > input {
    display: none !important;
}

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

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

.elementor-control-display_mode .elementor-choices input:checked + .elementor-choices-label {
    border-color: #e2007a;
    color: #e2007a;
    background-color: #fff;
}

.elementor-control-display_mode .elementor-choices .hc-ps-mode-icon {
    width: 100%;
    height: 40px;
}

/* ════════════════════════════════════════════════════════════════════
   HC Testimonials — Kundenstimmen (Personen-Liste + aktives Zitat)
   ════════════════════════════════════════════════════════════════════ */
.hc-testi {
    --hc-testi-accent: #e2007a;
    --hc-testi-gap: 80px;
    --hc-testi-thumb-size: 40px;
    --hc-testi-watermark: rgba(255, 255, 255, 0.06);
    --hc-testi-watermark-size: 380px;
    position: relative;
    overflow: hidden;
    color: #fff;
}

/* großes Anführungszeichen im Hintergrund ("Blase") — rechts unten */
.hc-testi--watermark::before {
    content: '\201D';
    position: absolute;
    top: auto;
    bottom: -0.34em;
    left: auto;
    right: 0.04em;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: var(--hc-testi-watermark-size);
    font-weight: 900;
    line-height: 0.8;
    color: var(--hc-testi-watermark);
    pointer-events: none;
    user-select: none;
    z-index: 0;
}

.hc-testi-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--hc-testi-gap);
    align-items: center;
}

/* Liste rechts: Spalten spiegeln (Zitat breit links, Liste schmal rechts) */
.hc-testi--nav-right .hc-testi-inner {
    grid-template-columns: 2fr 1fr;
}
.hc-testi--nav-right .hc-testi-nav-col {
    order: 2;
}
.hc-testi--nav-right .hc-testi-stage {
    order: 1;
}

/* ── Kopfbereich ── */
.hc-testi-head {
    margin-bottom: 34px;
}

.hc-testi-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--hc-testi-accent);
    margin-bottom: 16px;
}
.hc-testi-eyebrow::before {
    content: '';
    width: 32px;
    height: 2px;
    background-color: var(--hc-testi-accent);
}

.hc-testi-heading {
    margin: 0;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 56px;
    font-weight: 800;
    line-height: 0.98;
    text-transform: uppercase;
    color: #fff;
}
.hc-testi-heading em {
    font-style: normal;
    color: var(--hc-testi-accent);
}

/* ── Personen-Liste ── */
.hc-testi-thumbs {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hc-testi-thumb {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 14px 16px;
    margin: 0;
    text-align: left;
    background: transparent;
    border: 0;
    border-left: 2px solid transparent;
    cursor: pointer;
    transition: background 0.25s, border-color 0.25s;
}
.hc-testi-thumb.is-active {
    border-left-color: var(--hc-testi-accent);
}

.hc-testi-thumb-img {
    width: var(--hc-testi-thumb-size);
    height: var(--hc-testi-thumb-size);
    border-radius: 50%;
    object-fit: cover;
    object-position: top;
    filter: grayscale(0.5);
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, 0.2);
    transition: border-color 0.25s, filter 0.25s;
}
.hc-testi-thumb.is-active .hc-testi-thumb-img {
    border-color: var(--hc-testi-accent);
    filter: grayscale(0);
}

.hc-testi-thumb-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.hc-testi-thumb-name {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
}
.hc-testi-thumb-role {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
}

/* ── Bühne (aktives Testimonial) ── */
.hc-testi-stage {
    position: relative;
}
.hc-testi-slide {
    display: none;
}
.hc-testi-slide.is-active {
    display: block;
}

.hc-testi-stars {
    display: flex;
    gap: 4px;
    margin-bottom: 18px;
}
.hc-testi-star {
    width: 15px;
    height: 15px;
    fill: var(--hc-testi-accent);
}

.hc-testi .hc-testi-quote {
    margin: 0 0 30px;
    padding-left: 26px;
    font-size: 21px;
    font-weight: 300;
    font-style: italic;
    line-height: 1.72;
    color: rgba(255, 255, 255, 0.88);
    background: none;
    border: 0;
    border-left: 3px solid var(--hc-testi-accent);
    border-radius: 0;
}

.hc-testi-name {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 26px;
    font-weight: 800;
    text-transform: uppercase;
    color: #fff;
}
.hc-testi-role {
    margin-top: 3px;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.5);
}
.hc-testi-company {
    display: block;
    margin-top: 12px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--hc-testi-accent);
}

/* ── Mobile: einspaltig ── */
@media (max-width: 767px) {
    .hc-testi-inner,
    .hc-testi--nav-right .hc-testi-inner {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .hc-testi--nav-right .hc-testi-nav-col,
    .hc-testi--nav-right .hc-testi-stage {
        order: 0;
    }
    .hc-testi-heading {
        font-size: 40px;
    }
}

/* ════════════════════════════════════════════════════════════════════
   HC Tabs (Tabulator) – Industrie-Tabs mit Akkordeon + Animationen
   ════════════════════════════════════════════════════════════════════ */
.hc-tabs {
    --hc-tabs-accent: #e2007a;
    --hc-tabs-border: #e3e6ea;
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
}
.hc-tabs--pos-bottom { flex-direction: column-reverse; }
.hc-tabs--pos-left   { flex-direction: row;          align-items: stretch; }
.hc-tabs--pos-right  { flex-direction: row-reverse;  align-items: stretch; }

/* ── Tab-Leiste (neutral; Rahmen/Abstaende je Position) ─────────────────── */
.hc-tabs-nav {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    gap: 0 38px;
    align-items: center;
    scrollbar-width: none;
}
.hc-tabs-nav::-webkit-scrollbar { display: none; }

/* Position: Oben (Standard) */
.hc-tabs--pos-top .hc-tabs-nav {
    border-bottom: 1px solid var(--hc-tabs-border);
    padding-bottom: 14px;
    margin-bottom: 48px;
    overflow-x: auto;
}
/* Position: Unten */
.hc-tabs--pos-bottom .hc-tabs-nav {
    border-top: 1px solid var(--hc-tabs-border);
    padding-top: 14px;
    margin-top: 48px;
    overflow-x: auto;
}
/* Position: Links / Rechts — vertikale Leiste */
.hc-tabs--pos-left .hc-tabs-nav,
.hc-tabs--pos-right .hc-tabs-nav {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 4px 0;
    flex: 0 0 auto;
    min-width: 170px;
    max-width: 240px;
    overflow-y: auto;
}
.hc-tabs--pos-left .hc-tabs-nav {
    border-right: 1px solid var(--hc-tabs-border);
    padding-right: 20px;
    margin-right: 40px;
}
.hc-tabs--pos-right .hc-tabs-nav {
    border-left: 1px solid var(--hc-tabs-border);
    padding-left: 20px;
    margin-left: 40px;
}
.hc-tabs--pos-left .hc-tabs-panels,
.hc-tabs--pos-right .hc-tabs-panels {
    flex: 1 1 auto;
    min-width: 0;
}
.hc-tabs--pos-left .hc-tabs-tab,
.hc-tabs--pos-right .hc-tabs-tab {
    text-align: left;
    white-space: normal;
    padding: 10px 4px;
}

/* ── Tab-Ausrichtung ─────────────────────────────────────────────────── */
.hc-tabs--align-left   .hc-tabs-nav { justify-content: flex-start; }
.hc-tabs--align-center .hc-tabs-nav { justify-content: center; }
.hc-tabs--align-right  .hc-tabs-nav { justify-content: flex-end; }

.hc-tabs-tab {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: 0;
    margin: 0;
    padding: 6px 2px;
    cursor: pointer;
    font-size: 16px;
    line-height: 1.2;
    color: #8a9099;
    white-space: nowrap;
    transition: color 0.25s ease, background-color 0.25s ease;
}
.hc-tabs-tab.is-active { color: #1a1d21; }

.hc-tabs-underline {
    position: absolute;
    background: var(--hc-tabs-accent);
    pointer-events: none;
}
/* horizontale Leiste (oben/unten): bewegt sich in der Breite */
.hc-tabs--pos-top .hc-tabs-underline,
.hc-tabs--pos-bottom .hc-tabs-underline {
    left: 0;
    height: 2px;
    width: 0;
    transition: left 0.4s cubic-bezier(.23, .75, .57, 1), width 0.4s cubic-bezier(.23, .75, .57, 1);
}
.hc-tabs--pos-top .hc-tabs-underline { bottom: -1px; }
.hc-tabs--pos-bottom .hc-tabs-underline { top: -1px; }
/* vertikale Leiste (links/rechts): bewegt sich in der Hoehe */
.hc-tabs--pos-left .hc-tabs-underline,
.hc-tabs--pos-right .hc-tabs-underline {
    top: 0;
    width: 2px;
    height: 0;
    transition: top 0.4s cubic-bezier(.23, .75, .57, 1), height 0.4s cubic-bezier(.23, .75, .57, 1);
}
.hc-tabs--pos-left .hc-tabs-underline { right: -1px; }
.hc-tabs--pos-right .hc-tabs-underline { left: -1px; }

/* ── Panels ──────────────────────────────────────────────────────────── */
.hc-tabs-panels { position: relative; }

.hc-tabs-panel {
    display: grid;
    grid-template-columns: 1fr 1.15fr 1fr;
    gap: 40px;
    align-items: stretch;
}
/* ohne Akkordeon-Spalte: nur Text links (breiter) + Bild rechts */
.hc-tabs--no-acc .hc-tabs-panel { grid-template-columns: 1.7fr 1fr; }
.hc-tabs-panel:not(.is-active) { display: none; }
.hc-tabs-panel.is-active { animation: hcTabsFade 0.5s ease both; }

@keyframes hcTabsFade {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* ── Text-Spalte ─────────────────────────────────────────────────────── */
.hc-tabs-col { min-width: 0; }
.hc-tabs-col--text {
    display: flex;
    flex-direction: column;
}
.hc-tabs-heading {
    font-size: 30px;
    line-height: 1.18;
    font-weight: 400;
    color: #1a1d21;
    margin: 0;
    max-width: 16ch;
}
.hc-tabs-desc {
    font-size: 15px;
    line-height: 1.65;
    color: #3f4651;
    margin: 20px 0 0 0;
    max-width: 42ch;
}

/* ── Bild-Spalte ─────────────────────────────────────────────────────── */
.hc-tabs-col--media {
    display: flex;
    align-items: center;
    justify-content: center;
}
.hc-tabs-img {
    display: block;
    width: 100%;
    max-width: 360px;
    height: auto;
    filter: drop-shadow(0 28px 38px rgba(30, 40, 60, 0.12));
    animation: hcTabsImg 0.6s cubic-bezier(.215, .61, .355, 1) both;
}
@keyframes hcTabsImg {
    from { opacity: 0; transform: translate(48px, -48px); }
    to   { opacity: 1; transform: translate(0, 0); }
}

/* ── Akkordeon ───────────────────────────────────────────────────────── */
.hc-tabs-accordion { display: flex; flex-direction: column; }

.hc-tabs-acc-item {
    border-top: 1px solid #e3e6ea;
    transition: background-color 0.25s ease;
}
.hc-tabs-acc-item:last-child { border-bottom: 1px solid #e3e6ea; }

.hc-tabs-panel.is-active .hc-tabs-acc-item {
    animation: hcTabsFade 0.5s ease both;
}
.hc-tabs-panel.is-active .hc-tabs-acc-item:nth-child(1) { animation-delay: 0.06s; }
.hc-tabs-panel.is-active .hc-tabs-acc-item:nth-child(2) { animation-delay: 0.13s; }
.hc-tabs-panel.is-active .hc-tabs-acc-item:nth-child(3) { animation-delay: 0.20s; }
.hc-tabs-panel.is-active .hc-tabs-acc-item:nth-child(4) { animation-delay: 0.27s; }
.hc-tabs-panel.is-active .hc-tabs-acc-item:nth-child(5) { animation-delay: 0.34s; }
.hc-tabs-panel.is-active .hc-tabs-acc-item:nth-child(6) { animation-delay: 0.41s; }
.hc-tabs-panel.is-active .hc-tabs-acc-item:nth-child(7) { animation-delay: 0.48s; }
.hc-tabs-panel.is-active .hc-tabs-acc-item:nth-child(8) { animation-delay: 0.55s; }
.hc-tabs-panel.is-active .hc-tabs-acc-item:nth-child(9) { animation-delay: 0.62s; }
.hc-tabs-panel.is-active .hc-tabs-acc-item:nth-child(10) { animation-delay: 0.69s; }

.hc-tabs-acc-head {
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: 0;
    width: 100%;
    margin: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 0;
    text-align: left;
    transition: background-color 0.25s ease;
}
.hc-tabs-acc-title {
    font-size: 16px;
    line-height: 1.3;
    font-weight: 400;
    color: #1a1d21;
    transition: color 0.25s ease;
}

.hc-tabs-acc-icon {
    position: relative;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: #1a1d21;
}
.hc-tabs-acc-icon::before,
.hc-tabs-acc-icon::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: currentColor;
    transition: transform 0.3s ease;
}
.hc-tabs-acc-icon::before { width: 16px; height: 1.5px; transform: translate(-50%, -50%); }
.hc-tabs-acc-icon::after  { width: 1.5px; height: 16px; transform: translate(-50%, -50%); }
.hc-tabs-acc-item.is-open .hc-tabs-acc-icon::before { transform: translate(-50%, -50%) rotate(45deg); }
.hc-tabs-acc-item.is-open .hc-tabs-acc-icon::after  { transform: translate(-50%, -50%) rotate(45deg); }

.hc-tabs-acc-body {
    display: grid;
    grid-template-rows: 0fr;
    color: #5b626c;
    transition: grid-template-rows 0.35s ease;
}
.hc-tabs-acc-item.is-open .hc-tabs-acc-body { grid-template-rows: 1fr; }
.hc-tabs-acc-inner { overflow: hidden; }
.hc-tabs-acc-body p {
    margin: 0 0 22px 0;
    font-size: 14px;
    line-height: 1.6;
    color: inherit;
    max-width: 44ch;
}

/* ── Responsiv ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    /* jede Position wird auf Tablet/Mobile zur horizontalen Leiste oben */
    .hc-tabs--pos-left,
    .hc-tabs--pos-right,
    .hc-tabs--pos-bottom {
        flex-direction: column;
        align-items: stretch;
    }
    .hc-tabs-nav,
    .hc-tabs--pos-left .hc-tabs-nav,
    .hc-tabs--pos-right .hc-tabs-nav,
    .hc-tabs--pos-bottom .hc-tabs-nav {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0 28px;
        min-width: 0;
        max-width: none;
        overflow-x: auto;
        overflow-y: visible;
        border: 0;
        border-bottom: 1px solid var(--hc-tabs-border);
        padding: 0 0 14px 0;
        margin: 0 0 32px 0;
    }
    .hc-tabs--pos-left .hc-tabs-tab,
    .hc-tabs--pos-right .hc-tabs-tab {
        text-align: center;
        white-space: nowrap;
        padding: 6px 2px;
    }
    .hc-tabs--pos-left .hc-tabs-underline,
    .hc-tabs--pos-right .hc-tabs-underline,
    .hc-tabs--pos-bottom .hc-tabs-underline {
        top: auto;
        bottom: -1px;
        left: 0;
        right: auto;
        width: 0;
        height: 2px;
        transition: left 0.4s ease, width 0.4s ease;
    }
    .hc-tabs-panel,
    .hc-tabs--no-acc .hc-tabs-panel {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .hc-tabs-col--media { order: -1; }
    .hc-tabs-img { max-width: 320px; }
    .hc-tabs-desc { margin-top: 20px; }
    .hc-tabs-heading { max-width: none; }
}
@media (max-width: 600px) {
    .hc-tabs-nav { gap: 0 22px; }
    .hc-tabs-tab { font-size: 14px; }
    .hc-tabs-heading { font-size: 24px; }
}
/* ════════════════════════════════════════════════════════════════════
   HC Team – Mitarbeiter-Raster mit konfigurierbarem Bild-Overlay
   ════════════════════════════════════════════════════════════════════ */
.hc-team {
    --hc-team-accent: #e2007a;
    --hc-team-ov-color: #171b26;
    --hc-team-ov-intensity: 0.92;
    --hc-team-ov-height: 58%;
    width: 100%;
}
.hc-team-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px;
    width: 100%;
}
.hc-team-card {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    /* neutraler Lade-Hintergrund (kein blauer Kasten, falls Lazy-Load das Bild
       noch nicht getauscht hat oder ein Foto fehlt) */
    background-color: #e7e9ee;
}
/* !important + hoehere Spezifitaet, damit Theme-/Lazy-Load-Regeln (EWWW etc.)
   die Bildhoehe nicht auf auto setzen und das Bild die Karte voll fuellt */
.hc-team .hc-team-card .hc-team-card-img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: top;
    /* Helligkeit + Saettigung getrennt steuerbar (Defaults = natuerlich) */
    filter: brightness(var(--hc-team-img-bright, 1)) saturate(var(--hc-team-img-sat, 1));
    transition: filter 0.5s ease, transform 0.6s ease;
    z-index: 0;
}
.hc-team-card:hover .hc-team-card-img {
    filter: brightness(var(--hc-team-img-bright-h, 1)) saturate(var(--hc-team-img-sat-h, 1));
    transform: scale(1.04);
}

/* Overlay: Farbe / Intensitaet / Verlauf einstellbar.
   Im Ruhezustand ausgeblendet (keine dunkle Flaeche) – erscheint beim Hover. */
.hc-team-card-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: var(--hc-team-ov-intensity-rest, 0);
    transition: opacity 0.45s ease;
}
.hc-team-card.has-hover:hover .hc-team-card-overlay {
    opacity: var(--hc-team-ov-intensity, 0.92);
}
.hc-team--ov-gradient .hc-team-card-overlay {
    /* unten volle Farbe -> oben dezente Resttoenung (kein harter Rand),
       wie in der Vorlage (.97 -> .12). Erste Regel = Fallback ohne color-mix. */
    background: linear-gradient(to top,
        var(--hc-team-ov-color, #171b26) 0%,
        transparent var(--hc-team-ov-height, 58%));
    background: linear-gradient(to top,
        var(--hc-team-ov-color, #171b26) 0%,
        color-mix(in srgb, var(--hc-team-ov-color, #171b26) 12%, transparent) var(--hc-team-ov-height, 58%));
}
.hc-team--ov-solid .hc-team-card-overlay {
    background: var(--hc-team-ov-color, #171b26);
}

/* immer sichtbares Namens-Tag */
.hc-team-name-wrap {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 3;
    background: #fff;
    padding: 18px 24px 20px;
    transform: translateY(0);
    transition: transform 0.45s cubic-bezier(.4, 0, .2, 1);
}
.hc-team-card.has-hover:hover .hc-team-name-wrap { transform: translateY(100%); }
.hc-team-role-light {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--hc-team-accent, #e2007a);
    margin-bottom: 4px;
}
.hc-team-name-light {
    font-size: 24px;
    font-weight: 800;
    text-transform: uppercase;
    color: #171b26;
    line-height: 1.05;
}

/* Hover-Block (Bio + Kontakt) */
.hc-team-hover-body {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    padding: 28px 24px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s;
}
.hc-team-card.has-hover:hover .hc-team-hover-body {
    opacity: 1;
    transform: translateY(0);
}
.hc-team-role {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--hc-team-accent, #e2007a);
    margin-bottom: 7px;
}
.hc-team-name {
    font-size: 28px;
    font-weight: 800;
    text-transform: uppercase;
    color: #fff;
    line-height: 1.05;
    margin-bottom: 9px;
}
.hc-team-bio {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1.55;
    margin-bottom: 14px;
}
.hc-team-contact { display: flex; flex-wrap: wrap; gap: 9px; }
.hc-team-contact-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hc-team-accent, #e2007a);
    border: 1px solid rgba(226, 0, 122, 0.4);
    border-color: color-mix(in srgb, var(--hc-team-accent, #e2007a) 40%, transparent);
    padding: 7px 13px;
    text-decoration: none;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.hc-team-contact-btn:hover {
    background: var(--hc-team-accent, #e2007a);
    color: #fff;
}
/* Button-Icon (FontAwesome <i> oder SVG); skaliert mit der Schriftgroesse */
.hc-team-contact-btn i,
.hc-team-contact-btn svg {
    font-size: 1.05em;
    width: 1.05em;
    height: 1.05em;
    line-height: 1;
    flex: 0 0 auto;
}
.hc-team-contact-btn svg { fill: currentColor; }

/* Ueberlauf-Schutz: Hover-Inhalt bleibt innerhalb der Karte */
.hc-team-hover-body {
    max-height: 100%;
    overflow: hidden;
    box-sizing: border-box;
}
.hc-team-bio {
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* ════════════════════════════════════════════════════════════════════
   HC Portfolio – Beitraege/Cases als Masonry oder Raster (Bild + Video)
   ════════════════════════════════════════════════════════════════════ */
.hc-pf {
    --hc-pf-accent: #e2007a;
    --hc-pf-fx-speed: 0.6s;
    --hc-pf-fx-zoom: 1.05;
    --hc-pf-ov-color: #e2007a;
    --hc-pf-ov-opacity: 0.4;
    width: 100%;
}
.hc-pf-grid {
    --hc-pf-cols: 2;
    --hc-pf-gap: 1px;
    --hc-pf-divider: #e6e6e6;
}

/* Raster (gleiche Hoehe, zugeschnitten) */
.hc-pf--grid .hc-pf-grid {
    display: grid;
    grid-template-columns: repeat(var(--hc-pf-cols, 2), minmax(0, 1fr));
    gap: var(--hc-pf-gap, 1px);
    background: var(--hc-pf-divider, #e6e6e6);
}

/* Masonry (passt sich der Medienhoehe an – Hochkant erzeugt hohe Karten) */
.hc-pf--masonry .hc-pf-grid {
    column-count: var(--hc-pf-cols, 2);
    column-gap: var(--hc-pf-gap, 1px);
}
.hc-pf--masonry .hc-pf-item {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin-bottom: var(--hc-pf-gap, 1px);
    width: 100%;
}

.hc-pf-item { background: #fff; }

.hc-pf-media-link { display: block; text-decoration: none; }
.hc-pf-media {
    position: relative;
    overflow: hidden;
    line-height: 0;
    background: #f2f2f2;
}
.hc-pf-media img,
.hc-pf-media video {
    display: block;
    width: 100%;
    transition: transform var(--hc-pf-fx-speed, 0.6s) cubic-bezier(.2, 0, .2, 1),
                filter var(--hc-pf-fx-speed, 0.6s) ease;
}
/* Masonry: natuerliche Hoehe */
.hc-pf--masonry .hc-pf-media img,
.hc-pf--masonry .hc-pf-media video { height: auto; }
/* Raster: feste Hoehe, Position einstellbar */
.hc-pf--grid .hc-pf-media { aspect-ratio: 4 / 3; }
.hc-pf--grid .hc-pf-media img,
.hc-pf--grid .hc-pf-media video {
    height: 100%;
    object-fit: cover;
    object-position: var(--hc-pf-pos, center center);
}
/* ── Hover-Effekte (waehlbar) ── */
/* Zoom hinein */
.hc-pf--fx-zoom-in .hc-pf-item:hover .hc-pf-media img,
.hc-pf--fx-zoom-in .hc-pf-item:hover .hc-pf-media video { transform: scale(var(--hc-pf-fx-zoom, 1.05)); }
/* Zoom heraus (startet vergroessert) */
.hc-pf--fx-zoom-out .hc-pf-media img,
.hc-pf--fx-zoom-out .hc-pf-media video { transform: scale(var(--hc-pf-fx-zoom, 1.05)); }
.hc-pf--fx-zoom-out .hc-pf-item:hover .hc-pf-media img,
.hc-pf--fx-zoom-out .hc-pf-item:hover .hc-pf-media video { transform: scale(1); }
/* Graustufen -> Farbe */
.hc-pf--fx-grayscale .hc-pf-media img,
.hc-pf--fx-grayscale .hc-pf-media video { filter: grayscale(1); }
.hc-pf--fx-grayscale .hc-pf-item:hover .hc-pf-media img,
.hc-pf--fx-grayscale .hc-pf-item:hover .hc-pf-media video { filter: grayscale(0); }
/* Abdunkeln -> Aufhellen */
.hc-pf--fx-bright .hc-pf-media img,
.hc-pf--fx-bright .hc-pf-media video { filter: brightness(0.82); }
.hc-pf--fx-bright .hc-pf-item:hover .hc-pf-media img,
.hc-pf--fx-bright .hc-pf-item:hover .hc-pf-media video { filter: brightness(1.05); }

/* ── Hover-Overlay (Farbflaeche ueber dem Bild) ── */
.hc-pf-media-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-color: var(--hc-pf-ov-color, #e2007a);
    opacity: 0;
    transition: opacity var(--hc-pf-fx-speed, 0.6s) ease;
}
.hc-pf--overlay .hc-pf-item:hover .hc-pf-media-overlay { opacity: var(--hc-pf-ov-opacity, 0.4); }

.hc-pf-body { padding: 26px 4px 40px; }
.hc-pf-eyebrow {
    color: var(--hc-pf-accent, #e2007a);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 18px;
}
.hc-pf-eyebrow { transition: color 0.25s ease; }
.hc-pf .hc-pf-title {
    font-size: 34px;
    line-height: 1.05;
    font-weight: 800;
    text-transform: uppercase;
    color: #111;
    margin: 0 0 16px 0;
    transition: color 0.25s ease;
}
.hc-pf-desc {
    font-size: 15px;
    line-height: 1.6;
    color: #555;
    margin: 0 0 22px 0;
    max-width: 46ch;
}
.hc-pf-link {
    display: inline-block;
    color: var(--hc-pf-accent, #e2007a);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px solid var(--hc-pf-accent, #e2007a);
    padding-bottom: 3px;
    transition: opacity 0.2s ease;
}
.hc-pf-link:hover { opacity: 0.65; }

/* Link als Button (Darstellung = Button) */
.hc-pf-link.hc-pf-link--button {
    border-bottom: 0;
    border: 1px solid transparent;
    padding: 13px 24px;
    background-color: var(--hc-pf-accent, #e2007a);
    color: #fff;
    line-height: 1;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.hc-pf-link.hc-pf-link--button:hover { opacity: 1; }

@media (max-width: 767px) {
    .hc-pf--grid .hc-pf-grid { grid-template-columns: 1fr !important; }
    .hc-pf--masonry .hc-pf-grid { column-count: 1 !important; }
    .hc-pf .hc-pf-title { font-size: 26px; }
    .hc-pf-body { padding: 22px 2px 32px; }
}
/* ════════════════════════════════════════════════════════════════════
   Elementor-Panel-Fix: Farb-Picker (und Auswahlfelder) nie abschneiden.
   Wird ueber das Editor-Stylesheet geladen; auf dem Frontend ohne Wirkung.
   ════════════════════════════════════════════════════════════════════ */
.elementor-control-type-color .elementor-control-field,
.elementor-control-type-choose .elementor-control-field {
    flex-wrap: wrap;
    align-items: center;
}
.elementor-control-type-color .elementor-control-title {
    white-space: normal;
    word-break: break-word;
    margin-right: 8px;
}
/* Picker rechtsbuendig statt im Fluss hinter dem Label -> bleibt im Panel */
.elementor-control-type-color .elementor-control-input-wrapper {
    margin-left: auto;
    flex-shrink: 0;
}
.elementor-control-type-color .pickr,
.elementor-control-type-color .pcr-button {
    flex-shrink: 0;
}
/* ════════════════════════════════════════════════════════════════════
   HC Slider – Hero-Slider mit Animationen, Uebergaengen, Pfeilen, Dots
   ════════════════════════════════════════════════════════════════════ */
.hc-slider {
    --hc-sl-height: 640px;
    --hc-sl-trans: 0.6s;
    --hc-sl-anim: 0.6s;
    --hc-sl-arrow-size: 58px;
    --hc-sl-kb: 8s;
    position: relative;
    width: 100%;
    overflow: hidden;
}
.hc-slider-viewport {
    position: relative;
    width: 100%;
    min-height: var(--hc-sl-height);
    overflow: hidden;
}
/* Volle Bildschirmhöhe (dvh = mobil ohne Adressleisten-Sprung).
   Viewport UND Slides bekommen die volle Höhe -> Hintergrundbild füllt mit. */
.hc-slider--fullheight .hc-slider-viewport,
.hc-slider--fullheight .hc-slide {
    min-height: 100vh;
    min-height: 100dvh;
}
/* Volle Höhe minus Header (Offset per JS gemessen -> --hc-sl-fs-offset) */
.hc-slider--fullheight-offset .hc-slider-viewport,
.hc-slider--fullheight-offset .hc-slide {
    min-height: calc(100vh - var(--hc-sl-fs-offset, 0px));
    min-height: calc(100dvh - var(--hc-sl-fs-offset, 0px));
}
.hc-slider-track { display: flex; }

.hc-slide {
    position: relative;
    flex: 0 0 100%;
    min-width: 100%;
    min-height: var(--hc-sl-height);
    display: flex;
    overflow: hidden;
}
.hc-slide-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transform: scale(1);
}
/* Ken-Burns: langsamer Zoom auf der aktiven Slide (abwaehlbar) */
.hc-slider--kenburns .hc-slide.is-active .hc-slide-bg {
    animation: hcKenBurns var(--hc-sl-kb, 8s) ease-out both;
}
@keyframes hcKenBurns { from { transform: scale(1); } to { transform: scale(1.12); } }

.hc-slide-overlay { position: absolute; inset: 0; z-index: 1; background-color: rgba(10, 20, 40, 0.45); }
.hc-slide-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 40px 120px;
    display: flex;
    align-items: center;
    /* horizontale Ausrichtung des Inhaltsblocks (von der Inhalt-Ausrichtung) */
    justify-content: var(--hc-sl-justify, flex-start);
    text-align: var(--hc-sl-text, left);
}
.hc-slide-inner {
    display: flex;
    flex-direction: column;
    max-width: 640px;
    align-items: var(--hc-sl-items, flex-start);
}
.hc-slide-buttons { justify-content: var(--hc-sl-justify, flex-start); }
/* Inhalt-Container: breit = volle Breite (kein zentrierter Container) */
.hc-slider--full .hc-slide-content { max-width: none; }

/* Uebergang: Slide */
.hc-slider--slide .hc-slider-track { transition: transform var(--hc-sl-trans) cubic-bezier(.4, 0, .2, 1); }

/* Uebergang: Fade */
.hc-slider--fade .hc-slider-track { display: block; }
.hc-slider--fade .hc-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--hc-sl-trans) ease, visibility var(--hc-sl-trans);
}
.hc-slider--fade .hc-slide.is-active { opacity: 1; visibility: visible; }

/* Texte */
.hc-slide-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #e2007a; margin-bottom: 18px; }
.hc-slide .hc-slide-title { font-size: 60px; line-height: 1.05; font-weight: 800; text-transform: uppercase; color: #fff; margin: 0 0 14px 0; }
.hc-slide-subtitle { font-size: 24px; line-height: 1.25; font-weight: 500; color: rgba(255, 255, 255, 0.9); margin: 0 0 24px 0; }
.hc-slide-text { font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, 0.85); margin: 0 0 32px 0; }
.hc-slide-buttons { display: flex; flex-wrap: wrap; gap: 14px; }
.hc-slide-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 16px 28px; font-size: 15px; font-weight: 700;
    text-decoration: none; cursor: default; border: 0;
    background-color: #e2007a; color: #fff;
    transition: background-color 0.25s ease, color 0.25s ease;
}
a.hc-slide-btn { cursor: pointer; }
.hc-slide-btn--2 { background-color: #16233f; }

/* ── Inhalts-Animationen ── */
.hc-anim { opacity: 0; }
.hc-slider--anim-none .hc-anim { opacity: 1; }
.hc-slide.is-active .hc-anim {
    animation-duration: var(--hc-sl-anim, 0.6s);
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(.2, .6, .2, 1);
}
.hc-slide.is-active .hc-anim:nth-child(1) { animation-delay: 0.10s; }
.hc-slide.is-active .hc-anim:nth-child(2) { animation-delay: 0.20s; }
.hc-slide.is-active .hc-anim:nth-child(3) { animation-delay: 0.30s; }
.hc-slide.is-active .hc-anim:nth-child(4) { animation-delay: 0.40s; }
.hc-slide.is-active .hc-anim:nth-child(5) { animation-delay: 0.50s; }
.hc-slider--anim-fade .hc-slide.is-active .hc-anim       { animation-name: hcSlFade; }
.hc-slider--anim-fade-up .hc-slide.is-active .hc-anim    { animation-name: hcSlUp; }
.hc-slider--anim-fade-down .hc-slide.is-active .hc-anim  { animation-name: hcSlDown; }
.hc-slider--anim-fade-left .hc-slide.is-active .hc-anim  { animation-name: hcSlLeft; }
.hc-slider--anim-fade-right .hc-slide.is-active .hc-anim { animation-name: hcSlRight; }
.hc-slider--anim-zoom .hc-slide.is-active .hc-anim       { animation-name: hcSlZoom; }
@keyframes hcSlFade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes hcSlUp    { from { opacity: 0; transform: translateY(34px); }  to { opacity: 1; transform: none; } }
@keyframes hcSlDown  { from { opacity: 0; transform: translateY(-34px); } to { opacity: 1; transform: none; } }
@keyframes hcSlLeft  { from { opacity: 0; transform: translateX(44px); }  to { opacity: 1; transform: none; } }
@keyframes hcSlRight { from { opacity: 0; transform: translateX(-44px); } to { opacity: 1; transform: none; } }
@keyframes hcSlZoom  { from { opacity: 0; transform: scale(0.92); }       to { opacity: 1; transform: none; } }

/* ── Pfeile ── */
.hc-slider-nav { position: absolute; bottom: 0; z-index: 5; display: flex; gap: 2px; }
.hc-slider--arrows-left .hc-slider-nav   { left: 0; }
.hc-slider--arrows-center .hc-slider-nav { left: 50%; transform: translateX(-50%); }
.hc-slider--arrows-right .hc-slider-nav  { right: 0; }
.hc-slider-arrow {
    width: var(--hc-sl-arrow-size, 58px);
    height: var(--hc-sl-arrow-size, 58px);
    display: flex; align-items: center; justify-content: center;
    background-color: #e2007a; color: #fff; border: 0; border-radius: 0; cursor: pointer;
    transition: background-color 0.25s ease;
}
.hc-slider-arrow:hover { background-color: #b80063; }

/* ── Punkte ── */
.hc-slider-dots {
    position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
    z-index: 5; display: flex; gap: 10px;
}
.hc-slider-dot {
    width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%;
    cursor: pointer; background-color: rgba(255, 255, 255, 0.5);
    transition: background-color 0.25s ease, transform 0.25s ease;
}
.hc-slider-dot.is-active { background-color: #e2007a; transform: scale(1.25); }
/* Bei zentrierten Pfeilen die Punkte daruebersetzen (keine Ueberlappung) */
.hc-slider--arrows-center .hc-slider-dots { bottom: calc(var(--hc-sl-arrow-size, 58px) + 36px); }

/* ── Text-Pagination (Karten / Linien) ── */
.hc-slider-pagi {
    --hc-pagi-accent: #e2007a;
    position: absolute;
    left: 0; right: 0; bottom: var(--hc-pagi-bottom, 0px);
    z-index: 6;
    display: flex;
    align-items: stretch;
    gap: var(--hc-pagi-gap, 0px);
}
.hc-slider-pagi-item {
    -webkit-appearance: none;
    appearance: none;
    flex: 1 1 0;
    min-width: 0;
    text-align: left;
    border: 0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
.hc-slider-pagi-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--hc-pagi-accent);
    transition: color .2s ease;
}
.hc-slider-pagi-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color .2s ease;
}

/* Variante 1: Karten als Overlay */
.hc-slider-pagi--cards .hc-slider-pagi-item {
    background-color: rgba(255, 255, 255, 0.96);
    padding: 18px 22px;
}
.hc-slider-pagi--cards .hc-slider-pagi-item + .hc-slider-pagi-item {
    border-left: 1px solid rgba(0, 0, 0, 0.08);
}
/* Bei gesetztem Abstand keine Trennlinie (Karten stehen frei) */
.hc-slider-pagi--gap.hc-slider-pagi--cards .hc-slider-pagi-item + .hc-slider-pagi-item {
    border-left: 0;
}
.hc-slider-pagi--cards .hc-slider-pagi-title { color: #16233f; }
.hc-slider-pagi--cards .hc-slider-pagi-item.is-active {
    background-color: #16233f;
}
.hc-slider-pagi--cards .hc-slider-pagi-item.is-active .hc-slider-pagi-title { color: #fff; }
.hc-slider-pagi--cards .hc-slider-pagi-item.is-active .hc-slider-pagi-eyebrow { color: #fff; }

/* Ausrichtung */
.hc-slider-pagi--align-center { justify-content: center; }
.hc-slider-pagi--align-left   { justify-content: flex-start; }
.hc-slider-pagi--align-right  { justify-content: flex-end; }
.hc-slider-pagi:not(.hc-slider-pagi--align-full) .hc-slider-pagi-item {
    flex: 0 0 220px;
}

/* Fortschritts-Linie auf der Pagination: Track (immer sichtbar) + Füllung */
.hc-slider-pagi-item { position: relative; }
.hc-slider-pagi--cards .hc-slider-pagi-item { overflow: hidden; }
.hc-slider-pagi-prog {
    position: absolute;
    left: 0;
    top: 0;
    height: 4px;
    width: 100%;
    overflow: hidden;
    pointer-events: none;
    z-index: 3;
    background-color: rgba(255, 255, 255, 0.25); /* Track */
}
.hc-slider-pagi-prog-fill {
    display: block;
    height: 100%;
    width: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    background-color: var(--hc-pagi-accent, #e2007a);
}
/* Track-Kontrast je nach Karten-/Aktiv-Zustand */
.hc-slider-pagi--cards .hc-slider-pagi-prog { background-color: rgba(0, 0, 0, 0.12); }
.hc-slider-pagi--cards .hc-slider-pagi-item.is-active .hc-slider-pagi-prog { background-color: rgba(255, 255, 255, 0.25); }
/* Linien-Variante: Progress-Füllung sitzt über der Border (Border = Track), nicht abgeschnitten */
.hc-slider-pagi--lines .hc-slider-pagi-prog { top: -3px; height: 3px; background: transparent; }
.hc-slider-pagi--lines.hc-slider-pagi--has-prog .hc-slider-pagi-item.is-active { border-top-color: var(--hc-pagi-line, rgba(255, 255, 255, 0.3)); }

/* Variante 2: schlichte Linien-Tabs */
.hc-slider-pagi--lines {
    bottom: var(--hc-pagi-bottom, 32px);
    left: 0; right: 0;
    padding: 0 40px;
    gap: var(--hc-pagi-gap, 28px);
    background: transparent;
}
.hc-slider-pagi--lines .hc-slider-pagi-item {
    background: transparent;
    border-top: 3px solid var(--hc-pagi-line, rgba(255, 255, 255, 0.3));
    padding: 14px 0 0;
    transition: border-color .25s ease;
}
.hc-slider-pagi--lines .hc-slider-pagi-eyebrow { color: rgba(255, 255, 255, 0.65); }
.hc-slider-pagi--lines .hc-slider-pagi-title { color: #fff; font-weight: 700; }
.hc-slider-pagi--lines .hc-slider-pagi-item:hover {
    border-top-color: var(--hc-pagi-line-hover, var(--hc-pagi-accent));
}
.hc-slider-pagi--lines .hc-slider-pagi-item.is-active {
    border-top-color: var(--hc-pagi-accent);
}

/* Pfeile über die Text-Pagination heben (keine Überlappung) */
.hc-slider--pagi-cards .hc-slider-nav,
.hc-slider--pagi-lines .hc-slider-nav { bottom: 110px; }

@media (max-width: 767px) {
    /* kompakt unten, bleibt absolut (Root hat overflow:hidden) */
    .hc-slider-pagi--cards .hc-slider-pagi-item { padding: 10px 10px; gap: 3px; }
    .hc-slider-pagi-eyebrow { font-size: 9px; letter-spacing: 0.08em; }
    .hc-slider-pagi-title { font-size: 11px; -webkit-line-clamp: 1; }
    .hc-slider-pagi--lines { padding: 0 14px; gap: 12px; bottom: 18px; }
    .hc-slider-pagi--lines .hc-slider-pagi-item { padding-top: 10px; }
    .hc-slider--pagi-cards .hc-slider-nav,
    .hc-slider--pagi-lines .hc-slider-nav { bottom: 0; }

    /* ── Gestapeltes Mobil-Layout: Bild oben, Pagination darunter, Text-Panel unten ── */
    .hc-slider.hc-slider--m-stacked .hc-slider-viewport { min-height: 0; height: auto; }
    .hc-slider.hc-slider--m-stacked .hc-slide {
        min-height: 0 !important;
        display: flex;
        flex-direction: column;
    }
    .hc-slider.hc-slider--m-stacked .hc-slide-bg {
        position: relative;
        inset: auto;
        width: 100%;
        height: var(--hc-sl-m-img, 40vh);
        flex: 0 0 auto;
    }
    .hc-slider.hc-slider--m-stacked .hc-slide-overlay { display: none; }
    .hc-slider.hc-slider--m-stacked .hc-slide-content {
        position: relative;
        max-width: none;
        width: 100%;
        flex: 1 1 auto;
        justify-content: var(--hc-sl-m-valign, flex-start);
        padding: var(--hc-sl-m-cpt, 40px) var(--hc-sl-m-cpr, 24px) var(--hc-sl-m-cpb, 34px) var(--hc-sl-m-cpl, 24px) !important;
        background-color: var(--hc-sl-m-content-bg, #16233f);
    }
    /* Fade-Modus im Stacked: nur aktiver Slide sichtbar (kein Overlappen) */
    .hc-slider.hc-slider--m-stacked.hc-slider--fade .hc-slide { position: relative; inset: auto; }
    .hc-slider.hc-slider--m-stacked.hc-slider--fade .hc-slide:not(.is-active) { display: none; }
    /* Pagination direkt unter das Bild */
    .hc-slider.hc-slider--m-stacked .hc-slider-pagi {
        position: absolute;
        top: var(--hc-sl-m-img, 40vh);
        bottom: auto;
        left: 0; right: 0;
        margin-top: 0;
    }

    /* ── Ken Burns auf dem Handy abschalten ── */
    .hc-slider.hc-slider--m-nokb .hc-slide.is-active .hc-slide-bg {
        animation: none;
        transform: none;
    }

    /* ── Pagination als Punkte (Handy) ── */
    .hc-slider--m-pagi-dots .hc-slider-pagi {
        justify-content: center;
        align-items: center;
        gap: 12px;
        padding: 0 !important;
        background: transparent !important;
        transform: translateY(var(--hc-m-dots-shift, 0px));
    }
    .hc-slider--m-pagi-dots .hc-slider-pagi .hc-slider-pagi-item {
        flex: 0 0 auto !important;
        width: var(--hc-m-dots-size, 11px) !important;
        height: var(--hc-m-dots-size, 11px) !important;
        min-width: 0;
        max-width: none !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 50% !important;
        background: var(--hc-m-dots-color, var(--hc-pagi-line, rgba(255, 255, 255, 0.5))) !important;
        overflow: hidden;
        transition: background-color .25s ease, transform .25s ease;
    }
    .hc-slider--m-pagi-dots .hc-slider-pagi .hc-slider-pagi-item:hover {
        background: var(--hc-m-dots-color-hover, var(--hc-m-dots-color, var(--hc-pagi-line, rgba(255, 255, 255, 0.5)))) !important;
    }
    .hc-slider--m-pagi-dots .hc-slider-pagi .hc-slider-pagi-item.is-active {
        background: var(--hc-m-dots-color-active, var(--hc-pagi-accent, #e2007a)) !important;
        transform: scale(1.25);
    }
    .hc-slider--m-pagi-dots .hc-slider-pagi-eyebrow,
    .hc-slider--m-pagi-dots .hc-slider-pagi-title,
    .hc-slider--m-pagi-dots .hc-slider-pagi-prog { display: none !important; }

    /* ── Animierte Balken (Handy): segmentierte Leiste, aktiver Balken fuellt sich ── */
    .hc-slider--m-pagi-bars .hc-slider-pagi {
        flex-direction: row !important;
        align-items: center;
        justify-content: stretch;
        gap: 6px !important;
        padding: 0 14px !important;
        background: transparent !important;
        transform: translateY(var(--hc-m-dots-shift, 0px));
    }
    .hc-slider--m-pagi-bars .hc-slider-pagi .hc-slider-pagi-item {
        flex: 1 1 0 !important;
        width: auto !important;
        max-width: none !important;
        height: var(--hc-m-bars-height, 4px) !important;
        min-width: 0;
        padding: 0 !important;
        border: 0 !important;
        border-radius: calc(var(--hc-m-bars-height, 4px) / 2);
        background: var(--hc-m-bars-color, rgba(255, 255, 255, 0.3)) !important;
        overflow: hidden;
        position: relative;
    }
    /* aktiver Balken ohne Fortschritt = voll gefuellt */
    .hc-slider--m-pagi-bars .hc-slider-pagi .hc-slider-pagi-item.is-active {
        background: var(--hc-m-bars-color-active, var(--hc-pagi-accent, #e2007a)) !important;
    }
    /* mit Fortschritt (Autoplay + Pagination): Track = Balken-Farbe, Fuellung animiert */
    .hc-slider--m-pagi-bars .hc-slider-pagi--has-prog .hc-slider-pagi-item.is-active {
        background: var(--hc-m-bars-color, rgba(255, 255, 255, 0.3)) !important;
    }
    .hc-slider--m-pagi-bars .hc-slider-pagi-prog {
        display: block !important;
        position: absolute; inset: 0;
        top: 0; height: 100%;
        background: transparent;
    }
    .hc-slider--m-pagi-bars .hc-slider-pagi-prog-fill {
        background: var(--hc-m-bars-color-active, var(--hc-pagi-accent, #e2007a)) !important;
    }
    .hc-slider--m-pagi-bars .hc-slider-pagi-eyebrow,
    .hc-slider--m-pagi-bars .hc-slider-pagi-title { display: none !important; }

    /* ── Pagination-Namen untereinander (Handy), kompakt wie ein Accordeon ── */
    .hc-slider--m-pagi-list .hc-slider-pagi {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0 !important;
        padding: 0 !important;
        background: var(--hc-ml-bg, transparent) !important;
    }
    .hc-slider--m-pagi-list .hc-slider-pagi .hc-slider-pagi-item {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        text-align: left;
        padding: 12px 16px !important;
        border: 0 !important;
        border-top: 1px solid var(--hc-ml-divider, var(--hc-pagi-line, rgba(255, 255, 255, 0.22))) !important;
        background: transparent;
    }
    .hc-slider--m-pagi-list .hc-slider-pagi .hc-slider-pagi-item.is-active {
        background: var(--hc-ml-bg-active, rgba(255, 255, 255, 0.06)) !important;
        border-left: 3px solid var(--hc-pagi-accent) !important;
        padding-left: 13px !important;
    }
    .hc-slider--m-pagi-list .hc-slider-pagi .hc-slider-pagi-item .hc-slider-pagi-title { color: var(--hc-ml-title, #fff) !important; }
    .hc-slider--m-pagi-list .hc-slider-pagi .hc-slider-pagi-item .hc-slider-pagi-eyebrow { color: var(--hc-ml-label, rgba(255, 255, 255, 0.7)) !important; }
    .hc-slider--m-pagi-list .hc-slider-pagi .hc-slider-pagi-prog { display: none !important; }

    /* ── Pagination horizontal scrollbar (Handy), aktiver Name wird per JS zentriert ── */
    .hc-slider--m-pagi-hscroll .hc-slider-pagi {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 0 12px !important;
        overflow-x: auto !important;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
    }
    .hc-slider--m-pagi-hscroll .hc-slider-pagi::-webkit-scrollbar { display: none; }
    .hc-slider--m-pagi-hscroll .hc-slider-pagi .hc-slider-pagi-item {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: 80vw !important;
        min-width: 0;
        scroll-snap-align: center;
        background: transparent;
        padding: var(--hc-m-hs-pt, 8px) var(--hc-m-hs-pr, 14px) var(--hc-m-hs-pb, 8px) var(--hc-m-hs-pl, 14px) !important;
    }
    .hc-slider--m-pagi-hscroll .hc-slider-pagi-title,
    .hc-slider--m-pagi-hscroll .hc-slider-pagi-eyebrow {
        white-space: nowrap;
        -webkit-line-clamp: unset;
        overflow: visible;
    }
    /* Farben (gleiche Variablen wie Listen-Modus) */
    .hc-slider--m-pagi-hscroll .hc-slider-pagi { background: var(--hc-ml-bg, transparent) !important; }
    .hc-slider--m-pagi-hscroll .hc-slider-pagi .hc-slider-pagi-item.is-active { background: var(--hc-ml-bg-active, transparent) !important; }
    .hc-slider--m-pagi-hscroll .hc-slider-pagi .hc-slider-pagi-item .hc-slider-pagi-title { color: var(--hc-ml-title, #fff) !important; }
    .hc-slider--m-pagi-hscroll .hc-slider-pagi .hc-slider-pagi-item .hc-slider-pagi-eyebrow { color: var(--hc-ml-label, rgba(255, 255, 255, 0.7)) !important; }
    .hc-slider--m-pagi-hscroll .hc-slider-pagi--lines .hc-slider-pagi-item:not(.is-active) { border-top-color: var(--hc-ml-divider, var(--hc-pagi-line, rgba(255, 255, 255, 0.3))) !important; }

    /* Gestapelt + Liste/H-Scroll: Pagination bleibt absolut direkt UNTER dem Bild (oben,
       ueber Headline/Text). Der noetige Freiraum wird per margin-top reserviert (nicht
       padding, damit ein Elementor-content_padding es nicht ueberschreibt). Hoehe kommt
       per JS (--hc-sl-m-list-pt); Fallback greift nur, falls JS noch nicht lief. */
    .hc-slider--m-stacked.hc-slider--m-pagi-list .hc-slide-content {
        margin-top: var(--hc-sl-m-list-pt, 120px);
    }
    .hc-slider--m-stacked.hc-slider--m-pagi-hscroll .hc-slide-content {
        margin-top: var(--hc-sl-m-list-pt, 60px);
    }
}

/* ── Fortschrittsbalken (abwaehlbar) ── */
.hc-slider-progress {
    position: absolute;
    left: 0; right: 0;
    height: 4px;
    z-index: 6;
    background-color: rgba(255, 255, 255, 0.22);
    pointer-events: none;
}
.hc-slider--progress-top .hc-slider-progress { top: 0; }
.hc-slider--progress-bottom .hc-slider-progress { bottom: 0; }
.hc-slider-progress-bar {
    display: block;
    height: 100%;
    width: 100%;
    transform-origin: left center;
    transform: scaleX(0);
    background-color: #e2007a;
}
@keyframes hcSlProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ── Responsiv ── */
@media (max-width: 1024px) {
    .hc-slide .hc-slide-title { font-size: 42px; }
    .hc-slide-content { padding: 50px 28px 110px; }
}
@media (max-width: 600px) {
    .hc-slide .hc-slide-title { font-size: 30px; }
    .hc-slide-text { font-size: 16px; }
    .hc-slide-content { padding: 36px 18px 96px; }
    .hc-slide-btn { flex: 1 1 auto; }
    .hc-slider-arrow { width: 46px; height: 46px; }
    .hc-slider-dots { bottom: 20px; }
}
/* ════════════════════════════════════════════════════════════════════
   HC Blog – dynamische Beitrags-Karten (Kategorie-Query, Grid/Masonry)
   ════════════════════════════════════════════════════════════════════ */
.hc-blog {
    --hc-blog-accent: #e2007a;
    width: 100%;
}
.hc-blog-grid {
    --hc-blog-cols: 2;
    --hc-blog-gap: 24px;
}

/* Raster */
.hc-blog--grid .hc-blog-grid {
    display: grid;
    grid-template-columns: repeat(var(--hc-blog-cols, 2), minmax(0, 1fr));
    gap: var(--hc-blog-gap, 24px);
    align-items: stretch;
}
/* Karten einer Zeile gleich hoch */
.hc-blog--grid .hc-blog-item {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.hc-blog--grid .hc-blog-body {
    flex: 1 1 auto;
}
/* Masonry */
.hc-blog--masonry .hc-blog-grid {
    column-count: var(--hc-blog-cols, 2);
    column-gap: var(--hc-blog-gap, 24px);
}
.hc-blog--masonry .hc-blog-item {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin-bottom: var(--hc-blog-gap, 24px);
    width: 100%;
}

.hc-blog-item {
    background-color: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    overflow: hidden;
}

.hc-blog-media { display: block; line-height: 0; overflow: hidden; }
.hc-blog-media img {
    display: block;
    width: 100%;
    transition: transform 0.6s cubic-bezier(.2, 0, .2, 1);
}
.hc-blog--grid .hc-blog-media { aspect-ratio: 16 / 9; }
.hc-blog--grid .hc-blog-media img { height: 100%; object-fit: cover; }
.hc-blog-item:hover .hc-blog-media img { transform: scale(1.04); }

.hc-blog-body { padding: 26px 26px 30px; }

.hc-blog-badge {
    display: inline-block;
    background-color: #5a5a5a;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 6px 12px;
    border-radius: 3px;
    margin-bottom: 18px;
}
.hc-blog .hc-blog-title {
    font-size: 22px;
    line-height: 1.2;
    font-weight: 800;
    text-transform: uppercase;
    color: #16233f;
    margin: 0 0 16px 0;
}
.hc-blog .hc-blog-title a {
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
    text-decoration: none;
    transition: color 0.25s ease;
}
.hc-blog-excerpt {
    font-size: 15px;
    line-height: 1.6;
    color: #555;
    margin: 0 0 18px 0;
}
.hc-blog-excerpt:last-child { margin-bottom: 0; }
.hc-blog-link {
    display: inline-block;
    color: var(--hc-blog-accent, #e2007a);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 2px solid var(--hc-blog-accent, #e2007a);
    padding-bottom: 3px;
    transition: opacity 0.2s ease;
}
.hc-blog-link:hover { opacity: 0.65; }
.hc-blog-link.hc-blog-link--button {
    border-bottom: 0;
    padding: 12px 22px;
    background-color: var(--hc-blog-accent, #e2007a);
    color: #fff;
    transition: background-color 0.25s ease, color 0.25s ease;
}
.hc-blog-link.hc-blog-link--button:hover { opacity: 1; }

@media (max-width: 767px) {
    .hc-blog--grid .hc-blog-grid { grid-template-columns: 1fr !important; }
    .hc-blog--masonry .hc-blog-grid { column-count: 1 !important; }
    .hc-blog .hc-blog-title { font-size: 19px; }
}

/* ════════════════════════════════════════════════════════════════════
   HC Hover Cards — Slider-Modus
   ════════════════════════════════════════════════════════════════════ */
.hc-hover-slider {
    position: relative;
    width: 100%;
}
.hc-hover-slider.has-dots {
    margin-bottom: 46px;
}
.hc-hover-viewport {
    overflow: hidden;
    width: 100%;
}

/* Grid -> horizontaler Flex-Track */
.hc-hover-cards--slider {
    --hc-slides: 3;
    --hc-slide-gap: 20px;

    display: flex !important;
    grid-template-columns: none !important;
    flex-wrap: nowrap !important;
    grid-auto-flow: column;
    gap: var(--hc-slide-gap) !important;
    align-items: stretch;
    transition: transform .5s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
}
.hc-hover-cards--slider .hc-hover-card {
    flex: 0 0 calc((100% - (var(--hc-slides) - 1) * var(--hc-slide-gap)) / var(--hc-slides)) !important;
    max-width: calc((100% - (var(--hc-slides) - 1) * var(--hc-slide-gap)) / var(--hc-slides)) !important;
    width: auto !important;
}

/* Pfeile */
.hc-hover-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: #ffffff;
    background-color: #e2007a;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    transition: background-color .25s ease, opacity .25s ease;
}
.hc-hover-arrow svg {
    width: 52%;
    height: 52%;
    display: block;
}
.hc-hover-arrow--prev { left: 12px; }
.hc-hover-arrow--next { right: 12px; }
.hc-hover-arrow.is-disabled {
    opacity: 0;
    pointer-events: none;
}

/* Pfeile außerhalb der Cards (in den Seiten-Gutter) */
.hc-hover-slider--arrows-outside {
    padding-left: 58px;
    padding-right: 58px;
}
.hc-hover-slider--arrows-outside .hc-hover-arrow--prev { left: 0 !important; }
.hc-hover-slider--arrows-outside .hc-hover-arrow--next { right: 0 !important; }
@media (max-width: 767px) {
    .hc-hover-slider--arrows-outside {
        padding-left: 44px;
        padding-right: 44px;
    }
}

/* Punkte */
.hc-hover-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -30px;
    display: flex;
    justify-content: center;
    gap: 9px;
}
.hc-hover-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: #c9ccd4;
    cursor: pointer;
    transition: background-color .25s ease, transform .25s ease;
}
.hc-hover-dot.is-active {
    background-color: #e2007a;
    transform: scale(1.25);
}

/* ════════════════════════════════════════════════════════════════════
   HC Blog — Slider-Modus
   ════════════════════════════════════════════════════════════════════ */
.hc-blog-slider {
    position: relative;
    width: 100%;
}
.hc-blog-slider.has-dots {
    margin-bottom: 46px;
}
.hc-blog-viewport {
    overflow: hidden;
    width: 100%;
    /* Luft, damit Rand + Schatten der äußeren Karten nicht abgeschnitten werden */
    padding: 24px;
    box-sizing: border-box;
}

/* Grid/Masonry -> horizontaler Flex-Track */
.hc-blog-grid--slider {
    --hc-slides: 3;
    --hc-slide-gap: 24px;

    display: flex !important;
    grid-template-columns: none !important;
    column-count: auto !important;
    flex-wrap: nowrap !important;
    gap: var(--hc-slide-gap) !important;
    align-items: stretch;
    transition: transform .5s cubic-bezier(.4, 0, .2, 1);
    will-change: transform;
}
.hc-blog-grid--slider .hc-blog-item {
    flex: 0 0 calc((100% - (var(--hc-slides) - 1) * var(--hc-slide-gap)) / var(--hc-slides)) !important;
    max-width: calc((100% - (var(--hc-slides) - 1) * var(--hc-slide-gap)) / var(--hc-slides)) !important;
    width: auto !important;
    height: auto !important;   /* erlaubt align-items:stretch -> gleiche Höhe */
    margin-bottom: 0 !important;
}

/* Pfeile */
.hc-blog-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: #ffffff;
    background-color: #e2007a;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
    transition: background-color .25s ease, opacity .25s ease;
}
.hc-blog-arrow svg { width: 52%; height: 52%; display: block; }
.hc-blog-arrow--prev { left: 12px; }
.hc-blog-arrow--next { right: 12px; }
.hc-blog-arrow.is-disabled {
    opacity: 0;
    pointer-events: none;
}
.hc-blog-slider--arrows-outside {
    padding-left: 58px;
    padding-right: 58px;
}
.hc-blog-slider--arrows-outside .hc-blog-arrow--prev { left: 0 !important; }
.hc-blog-slider--arrows-outside .hc-blog-arrow--next { right: 0 !important; }
@media (max-width: 767px) {
    .hc-blog-slider--arrows-outside {
        padding-left: 44px;
        padding-right: 44px;
    }
}

/* Punkte */
.hc-blog-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    display: flex;
    justify-content: center;
    gap: 9px;
}
.hc-blog-dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background-color: #c9ccd4;
    cursor: pointer;
    transition: background-color .25s ease, transform .25s ease;
}
.hc-blog-dot.is-active {
    background-color: #e2007a;
    transform: scale(1.25);
}

/* ════════════════════════════════════════════════════════════════════════════
   HC Weitere Beiträge (Related Posts) — v3.35
   ════════════════════════════════════════════════════════════════════════════ */

.hc-rp-wrapper {
    --hc-rp-accent: #e2007a;
}

.hc-rp-wrapper--divider {
    border-top: 2px solid #e8e4df;
    padding-top: 48px;
    margin-top:  60px;
}

.hc-rp-section-heading {
    font-size:      1.6rem;
    font-weight:    700;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin:         0 0 32px;
    color:          #171b26;
}

/* ── Grid ─────────────────────────────────────────────────────────────────── */

.hc-rp-grid {
    --hc-rp-cols: 3;
    --hc-rp-gap:  28px;

    display:               grid;
    grid-template-columns: repeat(var(--hc-rp-cols), minmax(0, 1fr));
    gap:                   var(--hc-rp-gap);
}

/* ── Karte ────────────────────────────────────────────────────────────────── */

.hc-rp-item {
    display:        flex;
    flex-direction: column;
    background:     #ffffff;
    border:         1px solid #e8e4df;
    border-radius:  3px;
    overflow:       hidden;
    transition:     box-shadow .2s ease, transform .2s ease;
}

.hc-rp-item:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, .09);
    transform:  translateY(-2px);
}

/* ── Bild ─────────────────────────────────────────────────────────────────── */

.hc-rp-media {
    display:      block;
    aspect-ratio: 16 / 9;
    overflow:     hidden;
}

.hc-rp-img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform .35s ease;
}

.hc-rp-item:hover .hc-rp-img {
    transform: scale(1.04);
}

/* ── Body ─────────────────────────────────────────────────────────────────── */

.hc-rp-body {
    display:        flex;
    flex-direction: column;
    flex:           1;
    padding:        22px 24px 26px;
}

.hc-rp-title {
    font-size:   1rem;
    font-weight: 700;
    line-height: 1.4;
    margin:      0 0 10px;
}

.hc-rp-title a {
    color:           inherit;
    text-decoration: none;
}

.hc-rp-title a:hover {
    color: var(--hc-rp-accent);
}

.hc-rp-excerpt {
    font-size:   .875rem;
    color:       #555;
    line-height: 1.6;
    margin:      0 0 16px;
    flex:        1;
}

.hc-rp-link {
    display:         inline-block;
    font-size:       .8125rem;
    font-weight:     700;
    letter-spacing:  .05em;
    text-transform:  uppercase;
    color:           var(--hc-rp-accent);
    text-decoration: none;
    margin-top:      auto;
}

.hc-rp-link:hover {
    opacity: .75;
}

/* ════════════════════════════════════════════════════════════════════
   HC Scroll-Story (Pinned-Scrollytelling: Kapitel + Zeitstrahl + Bild-Crossfade)
   ════════════════════════════════════════════════════════════════════ */
.hc-story {
    --hc-story-accent: #b08d57;
    --hc-story-track: #d8dee8;
    --hc-story-line-w: 2px;
    --hc-story-dot: 14px;
    position: relative;
    width: 100%;
}
.hc-story-stage {
    position: sticky;
    top: var(--hc-story-top, 0px);
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    align-items: center;
}
/* Bühnen-Höhe: Standard (Inhalt) / eigener Wert / volle Höhe (minus Sticky-Offset) */
.hc-story--h-auto .hc-story-stage   { height: auto; }
.hc-story--h-custom .hc-story-stage { height: var(--hc-story-stage-h, 600px); }
.hc-story--h-full .hc-story-stage   { height: calc(100vh - var(--hc-story-top, 0px)); height: calc(100dvh - var(--hc-story-top, 0px)); }
.hc-story-inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 60px;
}
/* Inhaltsbreite: voll / boxed / custom */
.hc-story--width-full .hc-story-inner  { max-width: none; }
.hc-story--width-boxed .hc-story-inner { max-width: 1200px; }
.hc-story--shots-left .hc-story-inner { flex-direction: row-reverse; }

/* Vertikale Ausrichtung der Bühne */
.hc-story--valign-top .hc-story-stage    { align-items: flex-start; padding-top: 8vh; }
.hc-story--valign-center .hc-story-stage { align-items: center; }
.hc-story--valign-bottom .hc-story-stage { align-items: flex-end; padding-bottom: 8vh; }

.hc-story-left { flex: 1 1 auto; min-width: 0; }
.hc-story-body { display: flex; gap: 22px; align-items: stretch; }

/* Zeitstrahl (Track/Fill/Dots werden per JS erzeugt) */
.hc-story-timeline {
    position: relative;
    width: 22px;
    flex: 0 0 auto;
    align-self: stretch;
    padding: 6px 0;
    box-sizing: border-box;
}
.hc-story-tl-track {
    position: absolute;
    left: 9px; top: 6px; bottom: 6px;
    width: var(--hc-story-line-w, 2px);
    background: var(--hc-story-track, #d8dee8);
    border-radius: 2px;
}
.hc-story-tl-fill {
    position: absolute;
    left: 0; top: 0;
    width: 100%; height: 0;
    background: var(--hc-story-accent, #b08d57);
    border-radius: 2px;
    transition: height .25s linear;
}
.hc-story-tl-dot {
    position: absolute;
    left: 50%;
    width: var(--hc-story-dot, 14px);
    height: var(--hc-story-dot, 14px);
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--hc-story-track, #d8dee8);
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.hc-story-tl-dot.is-on { background: var(--hc-story-accent, #b08d57); border-color: var(--hc-story-accent, #b08d57); }
.hc-story-tl-dot.is-current { box-shadow: 0 0 0 5px rgba(176, 141, 87, .22); }

/* Zeitstrahl wächst beim Scrollen: keine volle graue Linie, Punkte erscheinen nacheinander */
.hc-story--tl-grow .hc-story-tl-track { background: transparent; }
.hc-story--tl-grow .hc-story-tl-dot { opacity: 0; transition: opacity .3s ease, background-color .3s ease, border-color .3s ease, box-shadow .3s ease; }
.hc-story--tl-grow .hc-story-tl-dot.is-on { opacity: 1; }

/* Kapitel: erst unsichtbar, faden nacheinander ein und bleiben */
.hc-story-chaps { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 40px; }
.hc-story-chap { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.hc-story-chap.is-on { opacity: 1; transform: none; }
.hc-story-chap-title { display: block; font-size: 20px; font-weight: 600; line-height: 1.3; margin-bottom: 10px; }
.hc-story-chap-text { font-size: 15px; line-height: 1.65; }
/* Für die JS-Messung der Kapitel-Positionen (Transform neutralisieren) */
.hc-story-measure .hc-story-chap { transform: none !important; }
/* Scroll-gekoppelt: Deckkraft/Versatz setzt das JS direkt -> keine Transition (sonst Nachziehen) */
.hc-story--reveal-scroll .hc-story-chap,
.hc-story--reveal-scroll .hc-story-tl-fill { transition: none; }

/* Bild-Bühne: alle Bilder gestapelt, Crossfade */
.hc-story-shots { position: relative; flex: 0 0 50%; align-self: stretch; aspect-ratio: 4 / 3; }
.hc-story-shot { position: absolute; inset: 0; opacity: 0; transition: opacity var(--hc-story-img-speed, .6s) ease, transform var(--hc-story-img-speed, .6s) ease; }
.hc-story-shot.is-on { opacity: 1; transform: none; }
/* Bildwechsel-Effekte: nur INAKTIVE Bilder bekommen den Versatz,
   das aktive Bild bleibt (transform:none) -> Bewegung beim Ein-/Ausblenden */
.hc-story--img-slide  .hc-story-shot:not(.is-on) { transform: translateX(8%); }
.hc-story--img-zoom   .hc-story-shot:not(.is-on) { transform: scale(1.12); }
.hc-story--img-rotate .hc-story-shot:not(.is-on) { transform: rotate(5deg) scale(.92); }
.hc-story--img-flyout .hc-story-shot:not(.is-on) { transform: translateX(70%) rotate(8deg); }
.hc-story-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Statisch (Editor): kein Sticky, alle Kapitel sichtbar, nur erstes Bild */
.hc-story--static .hc-story-stage { position: relative; overflow: visible; }
.hc-story--static .hc-story-chap { opacity: 1; transform: none; }
.hc-story--static .hc-story-shot { position: absolute; }
.hc-story--static .hc-story-shot.is-on { opacity: 1; }

/* ── Full-Bleed: Bild fuellt die volle Hoehe (bis oben) und reicht bis zum Rand.
   Der Text bekommt eigenes Padding und bleibt lesbar/geboxt. ── */
.hc-story--fullbleed .hc-story-stage { align-items: stretch; padding: 0 !important; }
.hc-story--fullbleed .hc-story-inner {
    max-width: none;
    padding: 0;
    gap: 0;
    align-items: stretch;
    height: 100%;
}
.hc-story--fullbleed .hc-story-shots {
    aspect-ratio: auto !important;
    align-self: stretch;
    height: 100%;
}
.hc-story--fullbleed .hc-story-shot img { border-radius: 0; }
.hc-story--fullbleed .hc-story-left {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 6vh clamp(24px, 6vw, 90px);
}

@media (max-width: 767px) {
    .hc-story-stage { position: relative; height: auto; }
    .hc-story-inner, .hc-story--shots-left .hc-story-inner { flex-direction: column; gap: 30px; }
    .hc-story-shots { flex-basis: auto; width: 100%; }
    .hc-story-chap { opacity: 1; transform: none; }
    .hc-story-shot { position: relative; opacity: 1; }
    .hc-story-shot ~ .hc-story-shot { display: none; }
    .hc-story-timeline { display: none; }
    /* Full-Bleed mobil: gestapelt als normales 4/3-Bild, Text ohne Extra-Padding */
    .hc-story--fullbleed .hc-story-inner { gap: 30px; height: auto; }
    .hc-story--fullbleed .hc-story-shots { aspect-ratio: 4 / 3 !important; height: auto; }
    .hc-story--fullbleed .hc-story-left { padding: 0; display: block; }
}

/* ════════════════════════════════════════════════════════════════════
   HC Animated Headline — wechselnde Eintraege (Headline | Bild | Text)
   ════════════════════════════════════════════════════════════════════ */
.hc-ah {
    --hc-ah-accent: #e2007a;
    --hc-ah-speed: 600ms;
    --hc-ah-travel: 40px;
    --hc-ah-gap: 40px;
    --hc-ah-valign: center;
    width: 100%;
}
.hc-ah-viewport { position: relative; }
.hc-ah-item {
    position: absolute;
    top: 50%; left: 0; right: 0;
    display: flex;
    align-items: var(--hc-ah-valign, center);
    justify-content: var(--hc-ah-justify, space-between);
    gap: var(--hc-ah-gap, 40px);
    opacity: 0;
    /* vertikal in der Viewport-Mitte (-50%) + Animations-Versatz */
    transform: translate(var(--hc-ah-ex, 0px), calc(-50% + var(--hc-ah-ey, 40px)));
    transition: opacity var(--hc-ah-speed, .6s) ease, transform var(--hc-ah-speed, .6s) ease;
    pointer-events: none;
    will-change: opacity, transform;
}
.hc-ah-item.is-active {
    opacity: 1;
    transform: translate(0, -50%);
    pointer-events: auto;
}
.hc-ah-item.is-prev {
    opacity: 0;
    transform: translate(var(--hc-ah-lx, 0px), calc(-50% + var(--hc-ah-ly, -40px)));
}
/* Richtungen: waiting/enter = ex/ey, leaving = lx/ly */
.hc-ah--dir-up   { --hc-ah-ey: var(--hc-ah-travel); --hc-ah-ly: calc(-1 * var(--hc-ah-travel)); --hc-ah-ex: 0px; --hc-ah-lx: 0px; }
.hc-ah--dir-down { --hc-ah-ey: calc(-1 * var(--hc-ah-travel)); --hc-ah-ly: var(--hc-ah-travel); --hc-ah-ex: 0px; --hc-ah-lx: 0px; }
.hc-ah--dir-left { --hc-ah-ey: 0px; --hc-ah-ly: 0px; --hc-ah-ex: var(--hc-ah-travel); --hc-ah-lx: calc(-1 * var(--hc-ah-travel)); }

.hc-ah-col { min-width: 0; }
/* inhaltsbreite Spalten, damit die horizontale Ausrichtung (justify-content) greift;
   min-width:0 -> langer Text bricht um statt zu ueberlaufen */
.hc-ah-col--headline, .hc-ah-col--text { flex: 0 1 auto; min-width: 0; }
.hc-ah-col--media { flex: 0 0 var(--hc-ah-img-w, 180px); max-width: var(--hc-ah-img-w, 180px); }
/* Eintraege ohne Bild: einstellbarer Abstand zwischen Headline und Text */
.hc-ah-item--no-media { gap: var(--hc-ah-gap-nomedia, var(--hc-ah-gap, 40px)); }

/* Global-Bild: steht statisch in der Mitte, wechselt NICHT mit den Eintraegen */
.hc-ah-static-media {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: var(--hc-ah-img-w, 180px);
    z-index: 2;
    pointer-events: none;
}
.hc-ah-static-media .hc-ah-img { width: 100%; }
.hc-ah-col--spacer { visibility: hidden; }  /* reserviert nur die Bildbreite */
.hc-ah-img { display: block; width: 100%; height: auto; }
.hc-ah .hc-ah-headline { margin: 0; font-size: 34px; font-weight: 800; line-height: 1.12; color: #16233f; }
.hc-ah .hc-ah-text { font-size: 16px; line-height: 1.6; color: #5e6a7e; }

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion: reduce) {
    .hc-ah-item { transition-duration: 1ms; transform: none; }
}

@media (max-width: 767px) {
    .hc-ah--stack-m .hc-ah-item { flex-direction: column; align-items: stretch; }
    .hc-ah--stack-m .hc-ah-col--media { align-self: center; }
}

/* ════════════════════════════════════════════════════════════════════
   HC Dual Header — zweifarbige Ueberschrift (2 Teile)
   ════════════════════════════════════════════════════════════════════ */
.hc-dh { margin: 0; }
.hc-dh-part { display: inline; }
.hc-dh--stacked .hc-dh-part { display: block; }
.hc-dh--inline .hc-dh-part { display: inline; }
.hc-dh .hc-dh-1 { color: #16233f; }
.hc-dh .hc-dh-2 { color: #e2007a; }
.hc-dh-link { text-decoration: none; display: inline-block; }