/* Base Reset & Variables */


:root {
    --transition-slow: 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    --transition-fast: 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    --primary-color: #30373e;
    /* Kierer Anthrazit / Dark text */
    --accent-color: #E64515;
    /* Kierer Brand Orange */
    --light-color: #f7f9fa;
    /* Sleek structural background */
    --card-bg: #ffffff;
}




/* Typography elements */
.kierer-logo-img {
    height: 64px;
    width: auto;
}



/* Main Layout */
.splash-container {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 100vh;
    padding: 0 2rem 10vh 2rem;
    background-color: transparent;
}

#bg-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    background:
        radial-gradient(circle at top right, rgba(230, 69, 21, 0.08) 0%, transparent 40%),
        radial-gradient(circle at bottom left, rgba(48, 55, 62, 0.05) 0%, transparent 40%),
        linear-gradient(135deg, rgba(230, 69, 21, 0.03) 0%, transparent 100%);
    background-color: var(--light-color);
}

/* Header & Navigation */
.main-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1300px;
    /* Aligned exactly with grid-3x3 */
    margin-bottom: 4rem;
    padding-top: 3rem;
}

.nav-brand {
    flex: 1;
    /* Assign equal space to left and right columns using flex */
    display: flex;
    justify-content: flex-start;
}

.nav-contact {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    /* Right align contact */
    gap: 2.5rem;
    flex: 1;
    /* Assign equal space to left and right columns using flex */
}

.contact-pill {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    transition: transform var(--transition-fast);
}

.contact-pill:hover {
    transform: translateY(-2px);
}

.contact-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-color);
}

.contact-icon svg {
    width: 30px;
    height: 30px;
    stroke-width: 2.2;
}

.contact-text {
    display: flex;
    flex-direction: column;
}

.contact-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary-color);
    line-height: 1.2;
    margin-bottom: 0.1rem;
}

.contact-val {
    font-size: 1.15rem;
    color: var(--primary-color);
    font-weight: 700;
}

/* Header Middle Section */
.nav-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex: 0 0 auto;
    /* Let center take exact width needed */
    padding: 0 2rem;
}

.hero-subtitle {
    font-size: 2.1rem;
    /* Larger title for more impact */
    font-weight: 800;
    color: var(--primary-color);
    letter-spacing: -1px;
    margin-bottom: 0.3rem;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

.instruction-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 0.5rem;
}

.instruction-text {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--accent-color);
    font-weight: 700;
}

/* Grid System */
.grid-3x3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 1.5rem;
    width: 100%;
    max-width: 1300px;
    height: 75vh;
}

.grid-tile {
    position: relative;
    border-radius: 0;
    /* Sharp design */
    background: var(--card-bg);
    overflow: hidden;
    cursor: pointer;
    box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(26, 31, 36, 0.1);
    transition: all var(--transition-slow);
    
    /* Anti-aliasing / Subpixel Rendering Fixes for Hover Transforms */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: radial-gradient(white, black);
}

.tile-inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.25rem 1.5rem;
    /* Moved text further down */
    z-index: 1;
    /* Establish base stacking context */
}

.tile-content {
    position: relative;
    z-index: 10;
    /* Highest priority for text */
    display: flex;
    flex-direction: column;
    transition: all var(--transition-fast);
}

.tile-number {
    font-size: 0.85rem;
    font-weight: 600;
    color: #94a3b8;
    margin-bottom: 0.75rem;
    letter-spacing: 1.5px;
    transition: color var(--transition-fast);
}

.tile-content h2 {
    margin-bottom: 0;
}

.tile-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    /* Align arrow to the top where title sits */
    width: 100%;
}

.tile-text-wrap {
    display: flex;
    flex-direction: column;
}

.tile-desc {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.9);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-top: 0;
    transform: translateY(12px);
    transition: all 0.3s ease;
    line-height: 1.4;
}

.tile-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: #fff;
    color: var(--primary-color);
    border-radius: 50%;
    opacity: 0;
    transform: translateX(-15px) scale(0.9);
    transition: all 0.3s ease;
    flex-shrink: 0;
    margin-left: 1rem;
    position: relative;
    top: -2px;
    /* Fine-tune visual alignment with h2 */
}

.kierer-tile-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 2;
    /* Sandwiched between base and overlay */
    opacity: 0;
    transition: opacity var(--transition-slow), transform 6s ease-out;
    transform: scale(1.1);
    pointer-events: none;
    /* Let hovers pass through */
}

.tile-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(26, 31, 36, 0.9) 0%, rgba(26, 31, 36, 0.4) 60%, rgba(26, 31, 36, 0.1) 100%);
    z-index: 3;
    /* Below content, above bg */
    opacity: 0;
    transition: opacity var(--transition-slow);
    pointer-events: none;
}


/* Label ("Coming soon") oben links: eigenes Element ueber Bild und Overlay,
   Farben ueber Variablen, damit Elementor sie je Karte setzen kann. */
.tile-badge {
    --kc-badge-bg: var(--accent-color, #e64515);
    --kc-badge-color: #ffffff;
    --kc-badge-border: currentColor;
    --kc-badge-offset: 18px;
    position: absolute;
    z-index: 12;
    top: var(--kc-badge-offset);
    left: var(--kc-badge-offset);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border-radius: 999px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
    background: var(--kc-badge-bg);
    color: var(--kc-badge-color);
    border: 1.5px solid transparent;
    pointer-events: none;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease, color 0.3s ease;
}
.tile-badge--shadow { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); }
.tile-badge--top-right { left: auto; right: var(--kc-badge-offset); }
.tile-badge--bottom-left { top: auto; bottom: var(--kc-badge-offset); }
.tile-badge--bottom-right { top: auto; left: auto; right: var(--kc-badge-offset); bottom: var(--kc-badge-offset); }
.tile-badge--outline {
    background: transparent;
    border-color: var(--kc-badge-border);
    box-shadow: none;
}
.tile-badge--glass {
    background: color-mix(in srgb, var(--kc-badge-bg) 22%, transparent);
    border-color: color-mix(in srgb, var(--kc-badge-border) 45%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.tile-badge--plain {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    padding-left: 0;
    padding-right: 0;
}
.grid-tile:hover .tile-badge { transform: translateY(-2px); }
/* Position "Direkt über dem Titel": das Label steht im Textblock, links bündig mit dem Titel. */
.tile-badge--above-title {
    position: static;
    align-self: flex-start;
    margin: 0 0 10px;
}
.grid-tile:hover .tile-badge--above-title { transform: none; }
/* Gesperrte Karte (Seite noch in Arbeit): kein Link, kein Hand-Cursor. Bild, Overlay
   und Beschreibung reagieren weiter auf den Hover, damit die Karte lebendig bleibt. */
.grid-tile.is-locked { cursor: default; }

/* Hover Effects */
.grid-tile:hover {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    transform: translateY(-8px) scale(1.02);
}

.grid-tile:hover .kierer-tile-layer {
    opacity: 1;
    transform: scale(1);
}

.grid-tile:hover .tile-overlay {
    opacity: 1;
}

.grid-tile:hover .tile-content {
    color: #ffffff;
}

.grid-tile:hover h2 {
    color: #ffffff;
    transform: translateY(-5px);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.grid-tile:hover .tile-number {
    color: var(--accent-color);
}

.grid-tile:hover .tile-arrow {
    opacity: 1;
    transform: translateX(0) scale(1);
    background: var(--primary-color);
    color: #fff;
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.05s;
}

/* Magic Layout on Hover */
.grid-tile:hover .tile-desc {
    max-height: 48px;
    opacity: 1;
    margin-top: 0.4rem;
    transform: translateY(0);
    transition: max-height 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.05s,
        opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s,
        transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.05s,
        margin-top 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.05s;
}

/* Base WOW Effect Variables */
.grid-tile {
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1), border 0.6s ease;
}

.tile-inner {
    transform: translateZ(20px);
    /* Brings content slightly forward */
}

.kierer-tile-layer {
    transform: translateZ(0) scale(1.1);
    /* Background stays behind */
    transition: opacity var(--transition-slow), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1), filter var(--transition-slow);
}




/* Variant Switcher Control Panel */
.controls-panel {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    left: auto;
    transform: none;
    z-index: 100;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(15px);
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(26, 31, 36, 0.1);
    transition: all var(--transition-slow);
}

.control-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
}

.controls-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #64748b;
    font-weight: 600;
    margin-right: 0.25rem;
}

.variant-btn,
.fx-btn {
    background: transparent;
    border: none;
    color: var(--primary-color);
    font-family: inherit;
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.variant-btn:hover,
.fx-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

.variant-btn.active,
.fx-btn.active {
    background: var(--primary-color);
    color: #fff;
    font-weight: 500;
}


/* =========================================
   VARIANT 1: SHARP (IMAGE ON HOVER)
   ========================================= */
.variant-v1 {
    background-color: var(--light-color);
}

.variant-v1 .splash-container {
    background: radial-gradient(circle at 50% -20%, #ffffff 0%, transparent 60%);
}

.variant-v1 .grid-tile {
    border-radius: 6px;
    /* Slightly modern edge */
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

.variant-v1 h2 {
    color: var(--primary-color);
}

.variant-v1 .tile-desc {
    color: rgba(48, 55, 62, 0.7);
    /* Darker text for readability if bg is white */
}

.variant-v1 .tile-arrow {
    opacity: 1;
    background: #f1f5f9;
    color: var(--primary-color);
    transform: translateX(0) scale(0.9);
    box-shadow: none;
}

.variant-v1 .kierer-tile-layer {
    opacity: 0;
    transform: scale(1.05);
}

.variant-v1 .tile-overlay {
    opacity: 0;
    background: linear-gradient(to top, rgba(26, 31, 36, 0.95) 0%, rgba(26, 31, 36, 0.5) 50%, rgba(26, 31, 36, 0.1) 100%);
}

body.variant-v1 .grid-tile:hover {
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12);
    transform: translateY(-8px);
    border-color: transparent;
}

.variant-v1 .grid-tile:hover .kierer-tile-layer {
    opacity: 1;
    transform: scale(1);
}

.variant-v1 .grid-tile:hover .tile-overlay {
    opacity: 1;
}

.variant-v1 .grid-tile:hover .tile-content,
.variant-v1 .grid-tile:hover h2,
.variant-v1 .grid-tile:hover .tile-desc {
    color: #ffffff;
    transform: translateY(-5px);
}

.variant-v1 .grid-tile:hover .tile-arrow {
    opacity: 1;
    transform: translateX(5px) scale(1);
    background: var(--accent-color);
    color: #ffffff;
}

/* =========================================
   VARIANT 3: PREMIUM VISION (ORIGINAL V5)
   ========================================= */
.variant-v3 {
    background-color: #fafbfc;
    /* Soft premium white base */
    --mouse-x: 50%;
    --mouse-y: 50%;
}

/* Hide fallback colored glows to maintain clean base */
.variant-v3 #bg-canvas {
    display: none;
}

/* Interactive Fluid Gradient Mesh */
body.variant-v3::before {
    content: '';
    position: fixed;
    top: -20vh;
    left: -20vw;
    right: -20vw;
    bottom: -20vh;
    background-color: #fbfbfd;
    /* Base */
    background:
        /* Primary glow following mouse */
        radial-gradient(circle at var(--mouse-x) var(--mouse-y), rgba(230, 69, 21, 0.08) 0%, transparent 40%),
        /* Opposing cool glow */
        radial-gradient(circle at calc(100% - var(--mouse-x)) calc(100% - var(--mouse-y)), rgba(48, 55, 62, 0.05) 0%, transparent 50%),
        /* Static general warmth */
        radial-gradient(circle at 80% 20%, rgba(230, 69, 21, 0.04) 0%, transparent 35%);
    filter: blur(80px);
    z-index: 0;
    pointer-events: none;
    transition: background 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    /* Very smooth interpolations to prevent jitter */
}

/* Subtle Vignette to frame the content */
body.variant-v3::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 50%, transparent 60%, rgba(250, 251, 252, 0.6) 100%);
    pointer-events: none;
    z-index: 1;
}

body.variant-v3 .splash-container {
    background: transparent;
}

.variant-v3 .grid-tile {
    background: #ffffff;
    border: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    border-radius: 8px;
    /* High-end widget aesthetic */
}

.variant-v3 .kierer-tile-layer {
    opacity: 0.6;
    filter: grayscale(60%) contrast(1.1);
    transform: scale(1.0);
}

.variant-v3 .tile-overlay {
    opacity: 1;
    /* Slightly stronger white shadow fade */
    background: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 45%, rgba(255, 255, 255, 0) 90%);
}

/* Text Base State - Make headers incredibly crisp */
.variant-v3 .tile-content,
.variant-v3 h2 {
    color: var(--primary-color);
}

.variant-v3 h2 {
    font-weight: 800;
    letter-spacing: -0.5px;
}

.variant-v3 .tile-number {
    color: var(--accent-color);
    font-weight: 700;
    font-size: 0.85rem;
    display: inline-block;
    align-self: flex-start;
}

.variant-v3 .tile-arrow {
    opacity: 1;
    background: #f1f5f9;
    color: #94a3b8;
    transform: translateX(0) scale(0.85);
    /* Slightly smaller default */
    box-shadow: none;
}

/* HOVER: Immersive Action */
body.variant-v3 .grid-tile:hover {
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
    transform: translateY(0) scale(1);
}

.variant-v3 .grid-tile:hover .kierer-tile-layer {
    opacity: 0.9;
    filter: grayscale(0%) contrast(1.05);
    transform: scale(1.05);
}

.variant-v3 .grid-tile:hover .tile-overlay {
    /* Much softer dark hover gradient */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.15) 50%, rgba(0, 0, 0, 0) 100%);
}

.variant-v3 .grid-tile:hover .tile-content,
.variant-v3 .grid-tile:hover h2,
.variant-v3 .grid-tile:hover .tile-desc {
    color: #ffffff;
    transform: translateY(-4px);
}

.variant-v3 .grid-tile:hover .tile-arrow {
    background: var(--accent-color);
    color: #ffffff;
    transform: translateX(5px) scale(1.1);
    box-shadow: 0 10px 20px rgba(230, 69, 21, 0.3);
}

.variant-v3 .grid-tile:hover .tile-number {
    color: #ffffff;
}

/* =========================================
   VARIANT 4: PREMIUM VISION WITH DARK SHADOW
   ========================================= */
body.variant-v4 {
    background-color: #fafbfc;
    /* Soft premium white base */
    --mouse-x: 50%;
    --mouse-y: 50%;
}

/* Hide fallback colored glows to maintain clean base */
body.variant-v4 #bg-canvas {
    display: none;
}

/* Interactive Fluid Gradient Mesh */
body.variant-v4::before {
    content: '';
    position: fixed;
    top: -20vh;
    left: -20vw;
    right: -20vw;
    bottom: -20vh;
    background-color: #fafbfc;
    /* Base */
    background:
        /* Primary bright orange glow following mouse */
        radial-gradient(circle at var(--mouse-x) var(--mouse-y), rgba(230, 69, 21, 0.08) 0%, transparent 40%),
        /* Opposing soft cool glow to add depth */
        radial-gradient(circle at calc(100% - var(--mouse-x)) calc(100% - var(--mouse-y)), rgba(48, 55, 62, 0.05) 0%, transparent 50%),
        /* Static highlight for general warmth */
        radial-gradient(circle at 80% 20%, rgba(230, 69, 21, 0.04) 0%, transparent 35%);
    filter: blur(80px);
    /* Heavy blur creates the "mesh/gas" effect */
    z-index: 0;
    pointer-events: none;
    transition: background 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    /* Very smooth interpolations to prevent jitter */
}

/* Subtle Vignette to frame the content */
body.variant-v4::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 50%, transparent 60%, rgba(250, 251, 252, 0.6) 100%);
    pointer-events: none;
    z-index: 1;
}

.variant-v4 .splash-container {
    background: transparent;
}

.variant-v4 .grid-tile {
    /* For variant 4 with black shadow, perhaps keep the base card darker too?
       The user said "statt den aktuellen weißen scahtten den schwarz machst, aber mit unseren schwarz."
       This means the default state should have the dark primary color overlay. */
    background: var(--primary-color);
    border: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    border-radius: 8px;
    /* High-end widget aesthetic */
}

.variant-v4 .kierer-tile-layer {
    opacity: 0.6;
    filter: grayscale(60%) contrast(1.1);
    transform: scale(1.0);
}

.variant-v4 .tile-overlay {
    opacity: 1;
    /* Black shadow fade using --primary-color (#30373e) */
    background: linear-gradient(to top, rgba(48, 55, 62, 1) 0%, rgba(48, 55, 62, 0.8) 45%, rgba(48, 55, 62, 0) 90%);
}

/* Text Base State for black shadow - needs to be readable */
.variant-v4 .tile-content,
.variant-v4 h2 {
    color: #ffffff;
    /* Text should be white on dark shadow */
}

.variant-v4 h2 {
    font-weight: 800;
    letter-spacing: -0.5px;
}

.variant-v4 .tile-number {
    color: var(--accent-color);
    font-weight: 700;
    font-size: 0.85rem;
    display: inline-block;
    align-self: flex-start;
}

.variant-v4 .tile-arrow {
    opacity: 1;
    background: rgba(255, 255, 255, 0.1);
    /* Subtle transluscent arrow on dark background */
    color: #ffffff;
    transform: translateX(0) scale(0.85);
    /* Slightly smaller default */
    box-shadow: none;
}

/* HOVER: Immersive Action */
body.variant-v4 .grid-tile:hover {
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.3);
    transform: translateY(0) scale(1);
}

.variant-v4 .grid-tile:hover .kierer-tile-layer {
    opacity: 0.9;
    filter: grayscale(0%) contrast(1.05);
    transform: scale(1.05);
}

.variant-v4 .grid-tile:hover .tile-overlay {
    /* Keep it dark on hover, maybe shift gradient sightly */
    background: linear-gradient(to top, rgba(48, 55, 62, 0.9) 0%, rgba(48, 55, 62, 0.4) 50%, rgba(48, 55, 62, 0) 100%);
}

.variant-v4 .grid-tile:hover .tile-content,
.variant-v4 .grid-tile:hover h2,
.variant-v4 .grid-tile:hover .tile-desc {
    color: #ffffff;
    transform: translateY(-4px);
}

.variant-v4 .grid-tile:hover .tile-arrow {
    background: var(--accent-color);
    color: #ffffff;
    transform: translateX(5px) scale(1.1);
    box-shadow: 0 10px 20px rgba(230, 69, 21, 0.3);
}

.variant-v4 .grid-tile:hover .tile-number {
    color: #ffffff;
}

/* Responsive */
@media (max-width: 992px) {
    .main-nav {
        flex-direction: column;
        gap: 1.5rem;
        margin-bottom: 2rem;
    }

    .nav-center {
        padding: 0;
    }

    .hero-subtitle {
        font-size: 1.4rem;
    }

    .grid-3x3 {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
        height: auto;
        max-height: 70vh;
        overflow-y: auto;
        padding-right: 15px;
        gap: 1rem;
    }

    .controls-panel {
        bottom: 1rem;
        width: 90%;
        justify-content: center;
        flex-wrap: wrap;
    }
}

@media (max-width: 600px) {
    .grid-3x3 {
        grid-template-columns: 1fr;
    }
}

/* Base Rest & Variables */


:root {
    --primary-color: #30373e;
    /* Kierer Anthrazit / Dark text */
    --accent-color: #E64515;
    /* Kierer Brand Orange */
    --light-color: #f7f9fa;
}




/* 50/50 Split Layout */
.elementor-widget-kierer_v2_split {
    margin-bottom: 0 !important;
}

.split-layout {
    display: flex;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

/* LEFT PANEL (50%) */
.left-panel {
    flex: 0 0 50%;
    /* EXACTLY 50% */
    background: #ffffff;
    display: flex;
    flex-direction: column;
    padding: 3.5rem 4rem 3.5rem 6rem;
    /* Added more left padding (6rem) to push content inward */
    z-index: 10;
}

.kierer-header {
    margin-bottom: auto;
    /* Push menu down towards middle */
}

.kierer-logo {
    height: 70px;
    /* Increased logo visibility */
}

/* NAVIGATION MENU - Massive, uppercase, tight */
.main-nav-v2 {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.main-nav-v2 ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
    padding: 0;
    gap: 0;
    /* NO GAP, completely tight */
}

.kierer-menu-item-wrap {
    display: inline-block;
    width: max-content;
    transition: opacity 0.3s ease, filter 0.3s ease;
    cursor: pointer;
    opacity: 1;
    filter: none;
    /* Ensuring the wrapping container has exactly zero height padding to wrap the text tightly */
    padding: 0;
    margin: 0;
}

/* Slightly fade unhovered siblings only when an actual item is being hovered */
.main-nav-v2 ul:has(.kierer-menu-item-wrap:hover) .kierer-menu-item-wrap:not(:hover) {
    opacity: 0.3;
}

/* Menu Text */
.kierer-menu-item {
    font-size: clamp(2rem, 3.8vw, 4.3rem);
    /* Decreased slightly again as requested */
    font-weight: 800;
    line-height: 1.15;
    /* Increased line height spacing again */
    letter-spacing: -0.03em;
    color: var(--primary-color);
    text-transform: uppercase;
    transition: color 0.3s ease, transform 0.3s ease;
    /* Reverted margin shift to a pure transform to avoid layout recalculations */
    display: inline-block;
}

/* Hover / Active effect */
.kierer-menu-item-wrap:hover .kierer-menu-item,
.kierer-menu-item-wrap.active .kierer-menu-item {
    color: var(--primary-color);
    /* Keep dark, do not use orange */
    transform: translateX(10px);
}

/* FOOTER */
.kierer-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Center to align with social icons perfectly */
    margin-top: auto;
    font-size: 1.05rem;
    /* Increased size slightly */
}

.kierer-footer-info {
    display: flex;
    flex-direction: row;
    /* Changed from column to row */
    align-items: center;
    gap: 1.5rem;
    /* Increased gap for side-by-side spacing */
}

.contact-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--primary-color);
    font-weight: 600;
}

.contact-icon-wrap {
    color: var(--accent-color);
    display: flex;
}

.kierer-footer-socials {
    display: flex;
    gap: 0.8rem;
}

.social-circle {
    width: 44px;
    /* Increased slightly */
    height: 44px;
    /* Increased slightly */
    border-radius: 50%;
    border: 1px solid #E2E8F0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    transition: all 0.3s ease;
}

.social-circle svg {
    width: 20px;
    /* Increased slightly */
    height: 20px;
    /* Increased slightly */
}

.social-circle:hover {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

/* RIGHT PANEL (50%) */
.right-panel {
    flex: 0 0 50%;
    /* EXACTLY 50% */
    position: relative;
    overflow: hidden;
    background: #000;
}

/* Slides container */
.slide-wrap {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s ease, visibility 0.6s ease;
    z-index: 1;
}

.slide-wrap.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

/* Background Image inner wrapper for slow scale effect */
.bg-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transform: scale(1.05);
    /* Zoomed out slightly */
    transition: transform 6s cubic-bezier(0.25, 1, 0.5, 1);
}

.slide-wrap.active .bg-image {
    transform: scale(1);
}

/* Gradient overlay to make text readable */
.slide-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
}

/* Overlay Text */
.image-overlay-content {
    position: absolute;
    bottom: 4rem;
    left: 4rem;
    right: 4rem;
    z-index: 3;
    color: #fff;
    max-width: 600px;
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1) 0.1s;
}

.slide-wrap.active .image-overlay-content {
    transform: translateY(0);
    opacity: 1;
}

.category {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(2px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 30px;
    padding: 6px 16px;
    display: inline-block;
    margin-bottom: 1rem;
}

.image-overlay-content h2 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1rem;
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.image-overlay-content p {
    font-size: 1.15rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.9);
}

/* Safe CSS Entrance Animations (Replacing GSAP) */
@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInTop {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInBottom {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slide-in-left {
    opacity: 0;
    animation: slideInLeft 0.8s ease forwards 0.2s;
}

.slide-in-top {
    opacity: 0;
    animation: slideInTop 0.8s ease forwards 0.1s;
}

.slide-in-bottom {
    opacity: 0;
    animation: slideInBottom 0.8s ease forwards 0.3s;
}

/* Responsive catch */
@media (max-width: 1200px) {
    .kierer-menu-item {
        font-size: 4vw;
    }
}

@media (max-width: 900px) {

    .left-panel,
    .right-panel {
        flex: 0 0 100%;
        height: 50vh;
    }

    .split-layout {
        flex-direction: column;
        height: auto;
    }
}

/* V3 CSS: Light-Mode Arch Layouts Refined */
:root {
    --brand-orange: #e34c26;
    --bg-page: #FDFDFD;
    --surface-white: #FFFFFF;
    --text-dark: #121212;
    --text-muted: #6B7280;
    --border-soft: rgba(0, 0, 0, 0.05);
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.06);
    --shadow-hover: 0 25px 50px rgba(0, 0, 0, 0.2);
}


/* =========================================
   TOP NAV
   ========================================= */
.top-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    padding: 0 4rem;
    z-index: 50;
    pointer-events: none;
}

.top-nav * {
    pointer-events: auto;
}

.site-logo {
    height: 40px;
}

.btn-contact {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: var(--surface-white);
    border: 1px solid var(--border-soft);
    padding: 0.75rem 1.5rem;
    border-radius: 100px;
    color: var(--text-dark);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.95rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    transition: all 0.3s;
}

.btn-contact:hover {
    border-color: rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.btn-contact .kierer-icon {
    color: var(--brand-orange);
}


/* =========================================
   THE CANVAS & CENTER TEXT
   ========================================= */
.arch-canvas {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.center-text-block {
    position: absolute;
    text-align: center;
    z-index: 5;
    padding: 2rem;
    background: radial-gradient(circle at center, rgba(253, 253, 253, 0.95) 0%, rgba(253, 253, 253, 0) 70%);
    pointer-events: none;
}

/* Center elements are interactive! */
.center-text-block * {
    pointer-events: auto;
}

.eyebrow {
    display: block;
    color: var(--brand-orange);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
}

.main-headline {
    font-size: 4.5rem;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.04em;
    color: var(--text-dark);
    margin-bottom: 1rem;
}

.subtitle {
    font-size: 1.25rem;
    color: var(--text-muted);
    margin-bottom: 2rem;
}

/* Central Actions */
.center-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}

.btn-outline {
    background: var(--surface-white);
    color: var(--text-dark);
    text-decoration: none;
    padding: 1rem 2rem;
    border-radius: 100px;
    font-weight: 700;
    font-size: 1rem;
    border: 2px solid rgba(0, 0, 0, 0.1);
    transition: all 0.3s;
}

.btn-outline:hover {
    border-color: var(--text-dark);
    background: rgba(0, 0, 0, 0.02);
}

.btn-orange {
    background: var(--brand-orange);
    color: var(--surface-white);
    text-decoration: none;
    padding: 1rem 2rem;
    border-radius: 100px;
    font-weight: 700;
    font-size: 1rem;
    transition: all 0.3s;
}

.btn-orange:hover {
    background: #c93e1b;
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}


/* =========================================
   WIDGETS (Portrait & Text Reveal)
   ========================================= */
#widgets-container {
    position: absolute;
    width: 1px;
    height: 1px;
    top: 50%;
    left: 50%;
    z-index: 10;
}

.a-card {
    position: absolute;
    width: 230px;
    height: 330px;
    margin-left: -115px;
    margin-top: -165px;

    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    background: var(--surface-white);

    /* Fix: Replace static border with inset shadow and force 3D context to stop edge artifacts */
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04), var(--shadow-soft);
    border: none;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);

    will-change: transform;
    transition: box-shadow 0.4s ease, filter 0.4s ease;
}

.a-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    /* Fallback before JS inline sets it */
}

.a-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    /* Fix: Smoother gradient without a hard stop in the middle to prevent Firefox dithering line */
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.05) 40%, rgba(0, 0, 0, 0.85) 100%);
    opacity: 1;
    transition: background 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.a-content {
    position: absolute;
    inset: 0;
    z-index: 3;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    color: white;
    pointer-events: none;

    /* Anti-blur rendering safeguards during animation */
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.a-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.a-title {
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
    transition: color 0.4s ease;
}

.a-hover-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--brand-orange);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.5) translateX(-10px);
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 4px 10px rgba(227, 76, 38, 0.3);
    flex-shrink: 0;
    margin-left: 0.5rem;
}

.a-desc-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    width: 100%;
}

.a-desc {
    overflow: hidden;
    font-size: 0.9rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
    margin-top: 0.5rem;
    opacity: 0;
    transition: opacity 0.3s ease;
}


/* --- Hover Interactions Global --- */
#widgets-container:hover .a-card {
    filter: grayscale(20%) brightness(0.95);
    /* Softer dimming */
}

/* Hover on Specific Card */
#widgets-container .a-card:hover {
    filter: none;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04), var(--shadow-hover);
    z-index: 100 !important;
}

/* Reveal Text inside */
.a-card:hover .a-bg {
    transform: scale(1.05);
    /* Softer zoom */
}

.a-card:hover .a-overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.95) 100%);
}

.a-card:hover .a-hover-btn {
    opacity: 1;
    transform: scale(1) translateX(0);
}

.a-card:hover .a-desc-wrapper {
    grid-template-rows: 1fr;
}

.a-card:hover .a-desc {
    opacity: 1;
}


/* =========================================
   BOTTOM SWITCHER TABS 
   ========================================= */
.card-design-switcher {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 0.5rem;
    border-radius: 100px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.05);
    z-index: 50;
}

.design-btn {
    padding: 0.75rem 1.5rem;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-muted);
    border-radius: 100px;
    transition: all 0.3s;
}

.design-btn:hover {
    color: var(--text-dark);
}

.design-btn.active {
    background: var(--text-dark);
    color: var(--surface-white);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}


/* =========================================
   FOCUS MODAL
   ========================================= */
.focus-overlay {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(253, 253, 253, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.focus-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.close-btn {
    position: absolute;
    top: 3rem;
    right: 4rem;
    background: var(--surface-white);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: var(--text-dark);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s;
    z-index: 210;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.close-btn:hover {
    background: var(--brand-orange);
    color: white;
    transform: scale(1.1);
    border-color: transparent;
}

.focus-modal {
    width: 85vw;
    max-width: 1200px;
    height: 70vh;
    background: var(--surface-white);
    border-radius: 40px;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.15);
    display: flex;
    overflow: hidden;
    transform: scale(0.95) translateY(20px);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.2, 1), opacity 0.5s ease;
}

.focus-overlay.active .focus-modal {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.modal-image-zone {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.modal-content-zone {
    flex: 1;
    padding: 5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.modal-num {
    color: var(--brand-orange);
    font-size: 1.25rem;
    font-family: monospace;
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.modal-title {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
    color: var(--text-dark);
}

.modal-desc {
    font-size: 1.15rem;
    line-height: 1.7;
    color: var(--text-muted);
    margin-bottom: 3rem;
}

.primary-btn {
    align-self: flex-start;
    background: var(--text-dark);
    color: white;
    border: none;
    padding: 1.25rem 2.5rem;
    font-size: 1.05rem;
    font-weight: 700;
    border-radius: 100px;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.primary-btn:hover {
    background: var(--brand-orange);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(227, 76, 38, 0.3);
}

.primary-btn .arrow {
    transition: transform 0.3s;
}

.primary-btn:hover .arrow {
    transform: translateX(4px);
}

/* Overrides */
@media (max-width: 1600px) {
    .arch-canvas {
        transform: scale(0.9);
    }
}

@media (max-width: 1400px) {
    .arch-canvas {
        transform: scale(0.75);
    }
}

/* Base Reset & Variables */


:root {
    --transition-slow: 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    --transition-fast: 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    --primary-color: #30373e;
    /* Kierer Anthrazit */
    --accent-color: #E64515;
    /* Kierer Brand Orange */
    --light-bg: #f5f7f9;
    --card-bg: #ffffff;
    --bento-gap: 1.5rem;
    --bento-radius: 28px;
}




/* =========================================
   KIERER V4 BENTO BOX WIDGET (Single Adaptive Box)
   ========================================= */

.kierer-v4-box {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    /* Let Elementor Column handle width/grid */
    min-height: 280px;
    border-radius: 24px;
    padding: 2.5rem;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease;
    cursor: pointer;
    /* Base internal layering context */
    z-index: 1;
}

.kierer-v4-box:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
}

/* Base Content Layer above backgrounds */
.v4-content-layer {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Default: content at bottom */
    align-items: flex-start;
    /* Default: left aligned */
    height: 100%;
    flex: 1;
}

/* Main Content Block (icon + text + cta grouped together) */
.v4-main-content {
    display: flex;
    flex-direction: column;
}

/* --- Icon Position Variant: Above Title (default) --- */
.v4-icon-above_title .v4-icon-wrap {
    margin-bottom: 10px;
}

/* --- Icon Position Variant: Top Left Corner --- */
.v4-icon-top_left .v4-corner-icon {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 6;
}

/* --- Icon Position Variant: Top Right Corner --- */
.v4-icon-top_right .v4-corner-icon {
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    z-index: 6;
}

/* =========================================
   STYLE: STANDARD (Image Background)
   ========================================= */
.v4-style-standard .v4-bg-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
    transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.kierer-v4-box.v4-style-standard:hover .v4-bg-image {
    /* Base default zoom, overridable by inline setting */
    transform: scale(1.05);
}

.v4-style-standard .v4-bg-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0.85) 100%);
    transition: background 0.6s ease;
}

.kierer-v4-box.v4-style-standard:hover .v4-bg-overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.2) 40%, rgba(0, 0, 0, 0.95) 100%);
}

.v4-style-standard .v4-main-content {
    color: #ffffff;
    display: flex;
    flex-direction: column;
}

.v4-style-standard .v4-title {
    color: #ffffff;
    font-size: 1.8rem;
    font-weight: 800;
    margin: 0 0 0.5rem 0;
    line-height: 1.1;
    letter-spacing: -0.02em;
    transform: translateY(4px);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.v4-style-standard .v4-desc {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1rem;
    margin: 0;
    opacity: 0.9;
    transform: translateY(4px);
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.kierer-v4-box.v4-style-standard:hover .v4-title,
.kierer-v4-box.v4-style-standard:hover .v4-desc {
    transform: translateY(0);
}

/* Icon Wrap defaults */
.v4-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);
    border-radius: 12px;
    color: #ffffff;
    transition: transform 0.3s ease, background 0.3s ease;
}

.v4-icon {
    display: flex;
    font-size: 20px;
    line-height: 1;
}

/* Icon Hover Effect: white background + orange icon (like Variante 4) */
.kierer-v4-box.v4-style-standard:hover .v4-icon-wrap {
    transform: scale(1.1) translateY(-3px);
    background: #ffffff;
    color: var(--accent-color, #E64515);
}

.kierer-v4-box.v4-style-standard:hover .v4-icon-wrap svg {
    color: var(--accent-color, #E64515);
    fill: var(--accent-color, #E64515);
}

/* =========================================
   STYLE: CONTACT CTA (Gradient & Button)
   ========================================= */
.v4-style-contact {
    /* Fallback gradient config if no CSS variable is set by widget */
    --bg-1: #ffffff;
    --bg-2: #fff5f2;
    background: radial-gradient(circle at right, var(--bg-2) 0%, var(--bg-1) 80%);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.v4-style-contact:hover {
    background: radial-gradient(circle at right, rgba(230, 69, 21, 0.08) 0%, var(--bg-1) 80%);
}

.v4-style-contact .v4-content-layer {
    flex-direction: column;
}

/* In contact mode: CSS Grid for [icon + text] left column, [CTA button] right */
.v4-style-contact .v4-main-content {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: end;
    gap: 0.5rem 2rem;
    width: 100%;
}

/* Icon spans the left column */
.v4-style-contact .v4-main-content>.v4-icon-wrap {
    grid-column: 1;
    grid-row: 1;
}

/* Text spans the left column below the icon */
.v4-style-contact .v4-text-block {
    grid-column: 1;
    grid-row: 2;
    min-width: 200px;
}

/* CTA button in the right column, vertically centered across both rows */
.v4-style-contact .v4-cta-block {
    grid-column: 2;
    grid-row: 1 / -1;
    align-self: center;
    flex-shrink: 0;
}

.v4-style-contact .v4-icon-wrap {
    background: #e34c26;
    /* Brand Orange default */
}

.v4-style-contact .v4-title {
    color: #1d1d1f;
    font-size: 1.8rem;
    font-weight: 800;
    margin: 0 0 0.5rem 0;
    line-height: 1.1;
}

.v4-style-contact .v4-desc {
    color: #6e6e73;
    font-size: 1rem;
    margin: 0;
}

.v4-cta-btn {
    display: inline-block;
    background: #e34c26;
    color: #ffffff;
    padding: 0.85rem 1.8rem;
    border-radius: 100px;
    font-weight: 700;
    font-size: 1rem;
    white-space: nowrap;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 4px 12px rgba(227, 76, 38, 0.15);
}

.kierer-v4-box.v4-style-contact:hover .v4-cta-btn {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(227, 76, 38, 0.3);
}

/* Component Overrides from Elementor go inline or via wrapper selectors. */


/* Variables for a high-end, bright, minimalist tech aesthetic */
:root {
    --bg-page: #fbfbfd;
    /* Apple-style off-white */
    --surface-card: #ffffff;
    --text-primary: #1d1d1f;
    --text-secondary: #86868b;
    --accent-orange: #E64515;
    --border-color: rgba(0, 0, 0, 0.04);

    font-family: 'Plus Jakarta Sans', sans-serif;
}


.variant-v5-minimal {
    background-color: var(--bg-page);
    color: var(--text-primary);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* =========================================
   CLEAN HEADER
   ========================================= */
.minimal-header {
    width: 100%;
    padding: 1rem 0;
    background-color: var(--bg-page);
}

.kierer-header-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-logo {
    height: 48px;
}

.kierer-header-titles {
    text-align: center;
}

.kierer-header-titles h1 {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 0px;
}

.kierer-header-titles p {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.kierer-header-contact {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    padding: 0.8rem 1.5rem;
    background: #fff;
    border-radius: 100px;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
    transition: all 0.3s ease;
}

.kierer-header-contact:hover {
    border-color: var(--accent-orange);
    color: var(--accent-orange);
    box-shadow: 0 4px 15px rgba(230, 69, 21, 0.1);
}

/* =========================================
   THE 3x3 GRID (Exactly like V1 layout)
   ========================================= */
.grid-container {
    max-width: 1400px;
    margin: 0 auto 1.5rem;
    padding: 0 3rem;
    flex: 1;

    /* Strict 3x3 */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);

    /* Absolute exact fit for standard screens */
    height: calc(100vh - 100px);
    max-height: 900px;
    min-height: 400px;
    gap: 1rem;
}

/* =========================================
   THE PREMIUM CARDS
   ========================================= */
.premium-card {
    background: var(--surface-card);
    border-radius: 20px;
    /* Big, modern curved corners */
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Clips the image cleanly */

    /* Ultra-soft shadow */
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
    /* Tiny border for definition on white backgrounds */
    border: 1px solid rgba(0, 0, 0, 0.02);

    /* Premium hardware-accelerated transition */
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
    height: auto;
    min-height: 100%;
    /* Force perfectly into grid row */
}

.card-image-wrapper {
    flex: 1;
    /* Dynamically takes remaining height */
    min-height: 0;
    overflow: hidden;
    background: #e5e5ea;
    /* Placeholder color before img loads */
}

.card-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-content {
    padding: 1.25rem 1.5rem 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    /* Fixed height large enough to hold 2 lines of description safely */
    flex: 0 0 125px;
    min-height: 125px;
    position: relative;
    /* For absolutely positioning the arrow */
}

/* Typography inside card */
.card-content .v5-title {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 0.4rem;
    flex-shrink: 0;
}

.card-content .v5-desc {
    font-size: 1.05rem;
    color: var(--text-secondary);
    line-height: 1.4;
    margin-bottom: 0px;
    padding-right: 35px;
    /* Avoid overlapping arrow */
}

/* The subtle arrow button in the bottom right corner */
.card-arrow {
    position: absolute;
    bottom: 0.8rem;
    right: 1rem;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-page);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--text-primary);
    transition: all 0.3s ease;
}

.card-arrow svg {
    width: 16px;
    height: 16px;
}

/* =========================================
   CARD HOVER EFFECTS
   ========================================= */
.premium-card:hover {
    /* Lift up gently */
    transform: translateY(-6px);
    /* Cast a slightly deeper, softer shadow */
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
}

/* Zoom the image elegantly */
.premium-card:hover .card-image-wrapper img {
    transform: scale(1.05);
}

/* Make the arrow pop */
.premium-card:hover .card-arrow {
    background: var(--accent-orange);
    color: #fff;
    transform: scale(1.1);
}


/* =========================================
   CARD 9: CTA EXCEPTION
   ========================================= */
.accent-card {
    background: var(--accent-orange);
    border: none;
    box-shadow: 0 4px 24px rgba(230, 69, 21, 0.2);
}

.accent-card .cta-content {
    flex: 1;
    /* Override the fixed 140px block to fill the CTA card */
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    height: 100%;
}

.accent-card .v5-title {
    font-size: 1.7rem;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.cta-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    color: var(--text-primary);
    padding: 1rem 1.8rem;
    border-radius: 100px;
    font-weight: 700;
    font-size: 1rem;
    transition: transform 0.3s;
}

.cta-button svg {
    width: 16px;
    height: 16px;
}

.accent-card:hover {
    box-shadow: 0 16px 40px rgba(230, 69, 21, 0.4);
}

.accent-card:hover .cta-button {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* =========================================
   RESPONSIVE (Fold down on small screens)
   ========================================= */
@media (max-width: 1200px) {
    .grid-container {
        grid-template-columns: repeat(2, 1fr);
        height: auto;
    }
}

@media (max-width: 768px) {
    .grid-container {
        grid-template-columns: 1fr;
    }

    .kierer-header-inner {
        flex-direction: column;
        gap: 1rem;
    }
}


/* =============================================
   ELEMENTOR WIDGET: Element-Level Card Variants
   !important to block WordPress/Elementor theme inheritance.
   ============================================= */

/* -- HARD RESET: Block ALL theme color inheritance -- */
.grid-tile,
.grid-tile *,
.grid-tile h1,
.grid-tile h2,
.grid-tile h3,
.grid-tile h4,
.grid-tile h5,
.grid-tile h6,
.grid-tile p,
.grid-tile span,
.grid-tile a,
.grid-tile div,
.grid-tile .tile-title {
    text-decoration: none !important;
    -webkit-text-fill-color: unset !important;
}

a.grid-tile,
a.grid-tile:hover,
a.grid-tile:focus,
a.grid-tile:visited,
a.grid-tile:active {
    text-decoration: none !important;
}

/* -- Base grid-tile -- */
.grid-tile {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    display: block;
    background: transparent !important;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.grid-tile .tile-inner {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: inherit;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Reduced bottom padding to lower the default text placement naturally */
    padding: 1.25rem 1.5rem 0.75rem 1.5rem;
    z-index: 1;
}

.grid-tile .kierer-tile-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 2;
    transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1),
        transform 1.2s cubic-bezier(0.16, 1, 0.3, 1),
        filter 0.6s;
    pointer-events: none;
}

.grid-tile .tile-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1),
        background 0.6s;
    pointer-events: none;
}

.grid-tile .tile-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.grid-tile .tile-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

.grid-tile .tile-text-wrap {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.grid-tile .tile-title {
    margin: 0;
    padding: 0;
    line-height: 1.2;
}

.grid-tile .tile-desc {
    font-size: 18px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-top: 0;
    transform: translateY(12px);
    transition: all inherit;
    /* Inherit the exact Elementor speed so it's perfectly synced! */
    line-height: 1.4;
}

/* Always-visible description */
.grid-tile .tile-desc.tile-desc--always {
    max-height: 200px !important;
    opacity: 1 !important;
    margin-top: 0.4rem !important;
    transform: translateY(0) !important;
}

.grid-tile .tile-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-left: 1rem;
    position: relative;
    top: -2px;
    transition: all 0.3s ease;
}

/* HOVER: description reveal */
.grid-tile:hover .tile-desc:not(.tile-desc--always) {
    max-height: 80px;
    opacity: 1 !important;
    margin-top: 0.4rem;
    transform: translateY(0);
}

/* ─── V1: CLEAN SHARP ─── */
.grid-tile.variant-v1 {
    border-radius: 6px;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}

.grid-tile.variant-v1 .tile-title {
    color: #30373e !important;
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 700 !important;
}

.grid-tile.variant-v1 .tile-desc {
    color: rgba(48, 55, 62, 0.7) !important;
}

.grid-tile.variant-v1 .tile-arrow {
    opacity: 1 !important;
    background: #f1f5f9 !important;
    color: #30373e !important;
    transform: translateX(0) scale(0.85);
}

.grid-tile.variant-v1 .kierer-tile-layer {
    opacity: 0 !important;
    transform: scale(1.05);
}

.grid-tile.variant-v1 .tile-overlay {
    opacity: 0 !important;
    background: linear-gradient(to top, rgba(26, 31, 36, 0.95) 0%, rgba(26, 31, 36, 0.5) 50%, transparent 100%) !important;
}

.grid-tile.variant-v1:hover {
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
    border-color: transparent !important;
}

.grid-tile.variant-v1:hover .kierer-tile-layer {
    opacity: 1 !important;
    transform: scale(1);
}

.grid-tile.variant-v1:hover .tile-overlay {
    opacity: 1 !important;
}

.grid-tile.variant-v1:hover .tile-content,
.grid-tile.variant-v1:hover .tile-title,
.grid-tile.variant-v1:hover .tile-desc {
    color: #ffffff !important;
}


.grid-tile.variant-v1:hover .tile-arrow {
    background: #E64515 !important;
    color: #ffffff !important;
    transform: translateX(5px) scale(1.1);
}

/* ─── V3: PREMIUM VISION (White Shadow) ─── */
.grid-tile.variant-v3 {
    background: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    border-radius: 8px;
}

.grid-tile.variant-v3 .kierer-tile-layer {
    opacity: 0.6 !important;
    filter: grayscale(60%) contrast(1.1);
}

.grid-tile.variant-v3 .tile-overlay {
    opacity: 1 !important;
    /* Use dark V4 gradient so the white text is readable */
    background: linear-gradient(to top, rgba(48, 55, 62, 1) 0%, rgba(48, 55, 62, 0.8) 45%, rgba(48, 55, 62, 0) 100%) !important;
}

.grid-tile.variant-v3 .tile-content,
.grid-tile.variant-v3 .tile-title {
    color: #ffffff !important;
}

.grid-tile.variant-v3 .tile-title {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px;
}

.grid-tile.variant-v3 .tile-desc {
    color: rgba(255, 255, 255, 0.9) !important;
}

.grid-tile.variant-v3 .tile-arrow {
    opacity: 1 !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    transform: translateX(0) scale(0.85);
}

.grid-tile.variant-v3:hover {
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
}

.grid-tile.variant-v3:hover .kierer-tile-layer {
    opacity: 0.9 !important;
    filter: grayscale(0%) contrast(1.05);
    transform: scale(1.05);
}

.grid-tile.variant-v3:hover .tile-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.3) 45%, rgba(0, 0, 0, 0) 100%) !important;
}

.grid-tile.variant-v3:hover .tile-content,
.grid-tile.variant-v3:hover .tile-title,
.grid-tile.variant-v3:hover .tile-desc {
    color: #ffffff !important;
}


.grid-tile.variant-v3:hover .tile-arrow {
    background: #E64515 !important;
    color: #ffffff !important;
    transform: translateX(5px) scale(1.1);
    box-shadow: 0 10px 20px rgba(230, 69, 21, 0.3);
}

/* ─── V4: PREMIUM VISION DARK ─── */
.grid-tile.variant-v4 {
    background: #30373e !important;
    border: none !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    border-radius: 8px;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: radial-gradient(white, black);
    /* Advanced Hack to prevent edge bleeding */
    outline: 1px solid transparent; 
}
.grid-tile.variant-v4::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.01); 
    pointer-events: none;
    z-index: 20;
}

.grid-tile.variant-v4 .kierer-tile-layer {
    opacity: 0.6 !important;
    filter: grayscale(60%) contrast(1.1);
    
    /* Hardware acceleration on inner layer to prevent clipping breakout */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    border-radius: 8px; /* Force radius matching parent */
}


.grid-tile.variant-v4 .tile-overlay {
    opacity: 1 !important;
    background: linear-gradient(to top, rgba(48, 55, 62, 0.95) 0%, rgba(48, 55, 62, 0.8) 45%, rgba(48, 55, 62, 0) 100%) !important;
}

.grid-tile.variant-v4 .tile-content,
.grid-tile.variant-v4 .tile-title {
    color: #ffffff !important;
}

.grid-tile.variant-v4 .tile-title {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px;
}

.grid-tile.variant-v4 .tile-desc {
    color: rgba(255, 255, 255, 0.9) !important;
}

.grid-tile.variant-v4 .tile-arrow {
    opacity: 1 !important;
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    transform: translateX(0) scale(0.85);
}

.grid-tile.variant-v4:hover {
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.01), 0 30px 60px rgba(0, 0, 0, 0.3);
    border-color: transparent !important;
}

.grid-tile.variant-v4:hover .kierer-tile-layer {
    opacity: 0.9 !important;
    filter: grayscale(0%) contrast(1.05);
    transform: scale(1.05);
}

.grid-tile.variant-v4:hover .tile-overlay {
    background: linear-gradient(to top, rgba(48, 55, 62, 1) 0%, rgba(48, 55, 62, 0.6) 45%, rgba(48, 55, 62, 0) 100%) !important;
}

.grid-tile.variant-v4:hover .tile-content,
.grid-tile.variant-v4:hover .tile-title,
.grid-tile.variant-v4:hover .tile-desc {
    color: #ffffff !important;
}


.grid-tile.variant-v4:hover .tile-arrow {
    background: #E64515 !important;
    color: #ffffff !important;
    transform: translateX(5px) scale(1.1);
    box-shadow: 0 10px 20px rgba(230, 69, 21, 0.3);
}

/* =========================================
   CONTACT WIDGET (kierer-contact)
   ========================================= */
.kierer-contact-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.kierer-contact-item {
    display: flex;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    cursor: pointer;
}

.kierer-contact-item:hover {
    transform: translateY(-2px);
}

.kc-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.kc-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* --- Layout: Stacked (Variante 1 Style) --- */
.layout-stacked .kierer-contact-item {
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.5rem 0.5rem 0.5rem 0;
}

.layout-stacked .kc-icon {
    color: var(--accent-color, #E64515);
    font-size: 24px;
}

.layout-stacked .kc-icon svg {
    width: 24px;
    height: 24px;
    stroke-width: 2;
}

.layout-stacked .kc-label {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 0.1rem;
    color: var(--primary-color, #30373e);
}

.layout-stacked .kc-val {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primary-color, #30373e);
}

/* --- Layout: Pill (Bild 2 Style) --- */
.layout-pill .kierer-contact-item {
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.75rem;
    border-radius: 100px;
    font-weight: 700;
    font-size: 0.95rem;
    border: 1px solid transparent;
}

.layout-pill .kc-icon {
    font-size: 18px;
}

.layout-pill .kc-icon svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.2;
}

/* Hardcoded Theme Overrides for Pill Buttons */
/* THEME: LIGHT (White Button, Dark Text, Soft Border) */
.kierer-contact-item.theme-light {
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.05);
    color: #30373e;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.kierer-contact-item.theme-light:hover {
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.kierer-contact-item.theme-light .kc-icon {
    color: #30373e;
}

.kierer-contact-item.theme-light .kc-val {
    color: #30373e;
}

/* THEME: DARK (Anthracite Button, White Text) */
.kierer-contact-item.theme-dark {
    background-color: #30373e;
    border: 1px solid #30373e;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.kierer-contact-item.theme-dark:hover {
    background-color: #24292e;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.kierer-contact-item.theme-dark .kc-label,
.kierer-contact-item.theme-dark .kc-val,
.kierer-contact-item.theme-dark .kc-icon {
    color: #ffffff !important;
}

/* THEME: ACCENT (Orange Button, White Text) */
.kierer-contact-item.theme-accent {
    background-color: #E64515;
    border: 1px solid #E64515;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(230, 69, 21, 0.2);
}

.kierer-contact-item.theme-accent:hover {
    background-color: #c93e1b;
    border-color: #c93e1b;
    box-shadow: 0 8px 25px rgba(230, 69, 21, 0.4);
}

.kierer-contact-item.theme-accent .kc-label,
.kierer-contact-item.theme-accent .kc-val,
.kierer-contact-item.theme-accent .kc-icon {
    color: #ffffff !important;
}

/* =========================================
   CUSTOM ENTRANCE ANIMATIONS
   ========================================= */
.kierer-animate {
    opacity: 0;
    transition: opacity var(--k-anim-dur, 0.8s) ease var(--k-anim-del, 0s), transform var(--k-anim-dur, 0.8s) cubic-bezier(0.16, 1, 0.3, 1) var(--k-anim-del, 0s);
    will-change: opacity, transform;
}

.kierer-anim-fade-up {
    transform: translateY(40px);
}

.kierer-anim-fade-in {
    transform: none;
}

.kierer-anim-zoom-in {
    transform: scale(0.9);
}

.kierer-anim-slide-left {
    transform: translateX(40px);
}

.kierer-anim-slide-right {
    transform: translateX(-40px);
}

.kierer-animate.is-visible {
    opacity: 1;
    transform: translateZ(0) scale(1);
}
/* =========================================
   REFINED SHOWCASE TABS (PREMIUM)
   ========================================= */
:root {
  --k-accent: #E64515;
}

.wpt-wrap, .wpt-wrap * {
  box-sizing: border-box !important;
}

.wpt-wrap {
  width: 100%;
  max-width: 100%;
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: #1a1a1a;
  background: #ffffff;
  border: 1px solid #f0ede8;
  border-radius: 24px;
  overflow: hidden;
}

/* Glassmorphism Option */
.wpt-wrap.has-glass .wpt-info-side {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.wpt-wrap.has-glass .wpt-panel-wrap {
  border: none;
  box-shadow: 0 20px 50px rgba(0,0,0,0.08);
}

/* Image Position (Right) */
.wpt-wrap.img-pos-right .wpt-panel {
  grid-template-columns: 1fr 1fr;
}
.wpt-wrap.img-pos-right .wpt-img-side {
  order: 2;
}
.wpt-wrap.img-pos-right .wpt-info-side {
  order: 1;
}

/* Responsiveness & Stacking */
@media (max-width: 991px) {
  .wpt-panel.active {
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* Make Tabs Stack Vertically on Tablet too */
  .wpt-tabs {
    flex-direction: column !important;
    gap: 8px !important;
    padding: 15px !important;
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid #f0ede8 !important;
    max-width: 100% !important;
  }
  
  .wpt-tab-indicator {
    display: none !important;
  }
  
  .wpt-tab {
    width: 100% !important;
    padding: 14px 20px !important;
    flex-shrink: 0 !important;
    font-size: 13px !important;
    white-space: normal !important;
    justify-content: flex-start !important;
    text-align: left !important;
    border: 1px solid #f0ede8 !important;
    border-radius: 8px !important;
    background: #f8f9fa !important;
  }
  
  .wpt-tab.active {
    background: #ffffff !important;
    border-color: var(--k-accent) !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
  }
  
  /* Force Image BELOW text always on tablet/mobile is now handled by responsive Elementor control */
  
  .wpt-img-side { 
    height: 50vw !important;
    min-height: 400px !important;
    max-height: 500px !important;
    width: 100% !important;
    flex: none !important;
  }
  .wpt-info-side { padding: 40px 30px !important; }
  
  .img-pos-left .wpt-img-side, 
  .img-pos-right .wpt-img-side,
  .wpt-img-side {
    border-radius: 0 0 24px 24px !important; 
  }
}

@media (max-width: 767px) {
  .wpt-wrap {
    overflow: hidden;
    max-width: 100%;
  }
  
  .wpt-info-side {
    padding: 30px 20px !important;
  }
  
  .wpt-info-title {
    font-size: 24px !important;
    margin-bottom: 15px !important;
  }
  
  .wpt-info-desc {
    font-size: 15px !important;
    margin-bottom: 25px !important;
  }
  
  .wpt-stats {
    flex-wrap: wrap !important;
    gap: 15px 25px !important;
    margin-bottom: 25px !important;
    padding: 15px 0 !important;
  }
  
  .wpt-stat-val {
    font-size: 20px !important;
  }
  
  .wpt-img-badge {
    top: 15px !important;
    left: 15px !important;
    font-size: 12px !important;
    padding: 6px 14px !important;
  }
  
  .wpt-img-tag {
    bottom: 15px !important;
    left: 15px !important;
    font-size: 12.5px !important;
    padding: 7px 15px !important;
  }
  
  .wpt-cta {
    padding: 12px 24px !important;
    font-size: 13px !important;
    width: 100% !important;
    justify-content: center !important;
  }
}

.wpt-tabs {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 0;
  position: relative;
  background: #f8f9fa;
  padding: 10px 20px;
  border-bottom: 1px solid #f0ede8;
}

.wpt-tab {
  padding: 12px 24px;
  text-align: center;
  cursor: pointer;
  border: none;
  background: transparent;
  position: relative;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #888;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: 8px;
}

.wpt-tab:hover {
  color: #1a1a1a;
  background: rgba(0,0,0,0.03);
}

.wpt-tab.active {
  color: #1a1a1a;
}

.wpt-tab-num {
  font-size: 11px;
  font-weight: 800;
  color: #bbb;
  opacity: 0.7;
  transition: all 0.3s ease;
}

.wpt-tab.active .wpt-tab-num {
  color: var(--k-accent);
  opacity: 1;
}

.wpt-tab-indicator {
  position: absolute;
  bottom: 0;
  height: 2px;
  background: var(--k-accent);
  border-radius: 2px;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.wpt-panel-wrap {
  background: transparent;
  width: 100%;
}

.wpt-panel {
  display: none;
  grid-template-columns: 1fr 1fr;
}

.wpt-panel.active {
  display: grid;
}

.wpt-img-side {
  position: relative;
  overflow: hidden;
  background: #f8f9fa;
  min-height: 450px;
}

/* Specific corner fixes for image panels */
.img-pos-left .wpt-img-side {
  border-bottom-left-radius: 23px;
}
.img-pos-right .wpt-img-side {
  border-bottom-right-radius: 23px;
}

.wpt-main-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.8s cubic-bezier(0.2, 0, 0.2, 1);
}

.wpt-panel.active .wpt-main-img {
  transform: scale(1.05);
}

.wpt-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.4));
  pointer-events: none;
}

.wpt-img-badge {
  position: absolute;
  top: 25px;
  left: 25px;
  padding: 7px 16px;
  background: var(--k-accent);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  z-index: 5;
}

.wpt-img-tag {
  position: absolute;
  bottom: 25px;
  left: 25px;
  padding: 8px 18px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0.03em;
  border-radius: 50px;
  text-transform: uppercase;
  z-index: 5;
}

.wpt-info-side {
  padding: 50px 45px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.wpt-info-eyebrow {
  font-size: 11px;
  font-weight: 800;
  color: var(--k-accent);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 15px;
}

.wpt-info-title {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 20px;
  color: #1a1a1a;
}

.wpt-info-desc {
  font-size: 16px;
  line-height: 1.6;
  color: #666;
  margin-bottom: 35px;
}

.wpt-stats {
  display: flex;
  gap: 30px;
  margin-bottom: 35px;
  padding: 20px 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

.wpt-stat-val {
  font-size: 24px;
  font-weight: 800;
  color: var(--k-accent);
  line-height: 1;
}

.wpt-stat-lbl {
  font-size: 12px;
  color: #999;
  font-weight: 600;
  margin-top: 4px;
}

.wpt-facts {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 40px;
}

.wpt-fact {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.wpt-fact-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--k-accent);
  margin-top: 8px;
  flex-shrink: 0;
}

.wpt-fact-icon {
  color: var(--k-accent);
  font-size: 16px;
  flex-shrink: 0;
}

.wpt-fact-text {
  font-size: 14px;
  line-height: 1.5;
  color: #444;
}

.wpt-fact-text p {
  margin: 0 !important;
  padding: 0 !important;
}

.wpt-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: #1a1a1a;
  color: #fff;
  border-radius: 50px;
  text-decoration: none !important;
  font-weight: 700;
  font-size: 14px;
  transition: all 0.3s ease;
  width: fit-content;
}

.wpt-cta:hover {
  background: var(--k-accent);
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

.wpt-cta svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Kontaktseite: der Kopfzeilen-Button "Projekt starten" fuehrt auf die Kontaktseite,
   dort ist er ueberfluessig (Wunsch Kierer, 02.09.2026). Der Button ist das
   Elementor-Element 6da2a7f im Header-Template. */
body.page-id-28 .elementor-element-6da2a7f {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   Menü-Karten (Widget "Kierer Menü-Karten", Dropdown Heizsysteme)
   Ruhig, aber sorgfältig: Symbol in einer feinen Konturfläche, Titel und
   Beschreibung, beim Überfahren nur ein leichter Hintergrund. Rechts optional
   eine Seitenkarte mit Bild (z. B. Weg zur Beratung).
   ═══════════════════════════════════════════════════════════════════ */
.kmc {
  display: flex;
  align-items: stretch;
  gap: 12px;
}
/* Die Zeilen teilen sich die Höhe der Seitenkarte gleichmäßig auf (grid-auto-rows), damit links
   und rechts oben und unten bündig abschließen. */
.kmc-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  gap: 4px;
  flex: 1 1 auto;
  min-width: 0;
  align-content: stretch;
}
.kmc-card {
  --kmc-bg: transparent;
  --kmc-bg-hover: #f4f4f6;
  --kmc-icon: #E64515;
  --kmc-icon-bg: #fff3ee;
  --kmc-icon-line: #e6e6ea;
  --kmc-title-hover: #1a1a1a;
  position: relative;
  /* Die Navigation des Themes setzt Links im Untermenue auf display:block, daher hier fest. */
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  text-align: left !important;
  gap: 16px;
  padding: 12px 16px 12px 14px;
  border-radius: 12px;
  background: var(--kmc-bg);
  text-decoration: none !important;
  cursor: pointer;
  transition: background .16s ease;
}
.kmc-card.is-plain,
.kmc-card.is-locked { cursor: default; }
.kmc-card:hover:not(.is-locked):not(.is-plain),
.kmc-card:focus-visible { background: var(--kmc-bg-hover); outline: none; }
.kmc-card:hover:not(.is-locked):not(.is-plain) .kmc-title { color: var(--kmc-title-hover); }

.kmc-icon {
  flex: 0 0 auto !important;
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--kmc-icon);
  background: #fff;
  border: 1px solid var(--kmc-icon-line);
  border-radius: 12px;
  transition: border-color .16s ease, background .16s ease;
}
.kmc-icon i { font-size: 22px; line-height: 1; }
.kmc-icon svg { width: 30px; height: 30px; fill: currentColor; }
.kmc-icon svg.kmc-ki { fill: none; } /* eigene Strichsymbole (kierer_icon) bleiben Kontur */
.kmc-icon img { width: 30px; height: 30px; object-fit: contain; }
.kmc-card:hover:not(.is-locked):not(.is-plain) .kmc-icon { border-color: #d4d4da; }
.kmc-icons-soft .kmc-icon { background: var(--kmc-icon-bg); border-color: rgba(230, 69, 21, 0.16); }
.kmc-icons-solid .kmc-icon { background: var(--kmc-icon); border-color: transparent; color: #fff; }
.kmc-icons-plain .kmc-icon { background: transparent; border-color: transparent; }
.kmc-icons-grau .kmc-icon { background: #f5f5f7; border-color: #ececef; }
.kmc-icons-grau .kmc-card:hover:not(.is-locked):not(.is-plain) .kmc-icon { background: #ffffff; border-color: #e2e2e6; }

.kmc-text {
  display: flex !important;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}
.kmc-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: #1a1a1a;
  transition: color .16s ease;
}
.kmc-desc {
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 13px;
  line-height: 1.4;
  color: #6b7178;
}
.kmc-badge {
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: #ececee;
  color: #4a4f55;
  white-space: nowrap;
}
.kmc-arrow {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #9a9fa5;
  opacity: 0;
  transition: opacity .18s ease;
}
.kmc-arrow svg { width: 16px; height: 16px; }
.kmc-card:hover:not(.is-locked):not(.is-plain) .kmc-arrow { opacity: 1; }
.kmc-card.is-locked { opacity: .5; }
.kmc-lift .kmc-card:hover:not(.is-locked):not(.is-plain) { transform: translateY(-1px); }

/* Seitenkarte rechts */
.kmc-aside {
  --kmc-aside-bg: #f5f5f7;
  --kmc-aside-bg-hover: #eeeef1;
  flex: 0 0 224px;
  width: 224px;
  display: flex !important;
  flex-direction: column;
  padding: 8px;
  border-radius: 14px;
  background: var(--kmc-aside-bg);
  color: inherit;
  text-decoration: none !important;
  transition: background .16s ease;
}
a.kmc-aside:hover { background: var(--kmc-aside-bg-hover); }
.kmc-aside-media {
  display: block;
  aspect-ratio: 16 / 10;
  border-radius: 10px;
  overflow: hidden;
  background: #e3e3e7;
}
.kmc-aside-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.16, 1, .3, 1);
}
a.kmc-aside:hover .kmc-aside-media img { transform: scale(1.03); }
.kmc-aside-body {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px 8px 8px;
  font-family: "Plus Jakarta Sans", sans-serif;
}
.kmc-aside-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #E64515;
}
.kmc-aside-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: #1a1a1a;
}
.kmc-aside-text {
  font-size: 13px;
  line-height: 1.45;
  color: #6b7178;
}
.kmc-aside-link {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #1a1a1a;
}
.kmc-aside-link svg { width: 14px; height: 14px; transition: transform .2s ease; }
a.kmc-aside:hover .kmc-aside-link svg { transform: translateX(3px); }
/* Seitenkarte füllt die Höhe der Liste: das Bild wächst mit (seit 1.4.20, fünf Einträge machten die Liste
   höher als die Karte und ließen unten eine leere graue Fläche) */
.kmc-aside-media { flex: 1 1 auto; }
/* Mit Telefonzeile ist die Karte ein div mit zwei Links; das Theme zwingt Links im Untermenü auf
   display:block, darum !important */
.kmc-aside--mit-telefon .kmc-aside-main {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  color: inherit;
  text-decoration: none !important;
}
.kmc-aside--mit-telefon:has(.kmc-aside-main:hover) { background: var(--kmc-aside-bg-hover); }
.kmc-aside-main:hover .kmc-aside-media img { transform: scale(1.03); }
.kmc-aside-main:hover .kmc-aside-link svg { transform: translateX(3px); }
.kmc-aside-phone {
  display: flex !important;
  align-items: center;
  gap: 10px;
  margin: 2px 8px 2px;
  padding: 12px 0 4px;
  border-top: 1px solid rgba(20, 24, 30, 0.08);
  color: inherit;
  text-decoration: none !important;
  font-family: "Plus Jakarta Sans", sans-serif;
}
.kmc-aside-phone-icon {
  flex: 0 0 auto;
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(20, 24, 30, 0.08);
  color: #E64515;
}
.kmc-aside-phone-icon svg { width: 15px; height: 15px; }
.kmc-aside-phone-text { display: flex; flex-direction: column; line-height: 1.3; }
.kmc-aside-phone-label { font-size: 12px; color: #6b7178; }
.kmc-aside-phone-nr { font-size: 14px; font-weight: 600; color: #1a1a1a; transition: color .16s ease; }
.kmc-aside-phone:hover .kmc-aside-phone-nr,
.kmc-aside-phone:focus-visible .kmc-aside-phone-nr { color: #E64515; }

/* Das Dropdown selbst (Kitchor-Mega-Menü) rund um die Menü-Karten */
.main-navigation ul ul.sub-menu.mega-menu:has(.kmc) {
  width: 420px !important;
  padding: 12px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(20, 24, 30, 0.06);
  box-shadow: 0 24px 60px -18px rgba(20, 24, 30, 0.3), 0 2px 8px rgba(20, 24, 30, 0.06) !important;
  overflow: hidden;
}
.main-navigation ul ul.sub-menu.mega-menu:has(.kmc-has-aside) { width: 620px !important; }
.main-navigation .sub-menu.mega-menu > li.mega-menu-item { padding: 0 !important; min-width: 0 !important; }

@media (max-width: 1024px) {
  .kmc { flex-direction: column; }
  .kmc-aside { display: none !important; }
}
@media (max-width: 767px) {
  .kmc-grid { grid-template-columns: 1fr !important; }
  .kmc-card { padding: 9px 10px; gap: 12px; }
  .kmc-icon { width: 40px; height: 40px; }
  .kmc-title { font-size: 14.5px; }
  .kmc-desc { font-size: 12.5px; }
}

/* ═══════════════════════════════════════════════════════════════════
   Willkommensbereich (Widget "Kierer Willkommensbereich")
   ═══════════════════════════════════════════════════════════════════ */
.kierer-welcome {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  background: #30373E;
}
.kierer-welcome .kw-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.kierer-welcome.kw-zoom .kw-media {
  transform: scale(1.06);
  transition: transform 12s cubic-bezier(.22,.61,.36,1);
}
.kierer-welcome.kw-zoom.kw-in .kw-media { transform: scale(1); }
.kierer-welcome .kw-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(20, 22, 26, 0.5);
}
.kierer-welcome.kw-has-gradient::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 45%;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(20,22,26,0), rgba(20,22,26,0.34));
  pointer-events: none;
}
.kierer-welcome .kw-inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  max-width: 900px;
  padding: 90px 24px;
  width: 100%;
}
.kierer-welcome .kw-logo img { display: block; width: 296px; height: auto; }
.kierer-welcome .kw-logo { margin-top: -18px; margin-bottom: 6px; } /* Logo sitzt etwas hoeher (Wunsch 08.09.2026) */
.kierer-welcome .kw-eyebrow {
  margin: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
}
/* Lesbarkeit auf hellen Bildern: KEIN Textschatten (der lief bei großen Buchstaben zu grauen Rechtecken
   zusammen), sondern ein weicher, an den Rändern auslaufender Schleier hinter dem Textblock. Er ist als
   Kante nicht sichtbar und lässt das Bild ringsum hell (08.09.2026). */
.kierer-welcome .kw-inner::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 54%;
  transform: translate(-50%, -50%);
  width: 180vw;
  height: 120vh;
  z-index: -1;
  pointer-events: none;
  /* Weit ueber den Bildschirmrand hinaus, damit nirgends eine Kante des Verlaufs sichtbar wird. */
  background: radial-gradient(ellipse 32% 24% at center, rgba(16, 20, 26, 0.28) 0%, rgba(16, 20, 26, 0.19) 44%, rgba(16, 20, 26, 0.06) 70%, rgba(16, 20, 26, 0) 86%);
}
.kierer-welcome .kw-logo img { filter: none; } /* Logo bleibt ohne Schatten */
.kierer-welcome .kw-eyebrow { text-shadow: none; } /* statt Schatten: eigene Farbe (im Widget einstellbar) */
/* Weit gestreut und schwach: gibt Halt, ohne als Kante an der Schrift zu kleben (Wunsch 08.09.2026). */
.kierer-welcome .kw-headline { text-shadow: 0 4px 46px rgba(0, 0, 0, 0.18); }
.kierer-welcome .kw-subline,
.kierer-welcome .kw-hint { text-shadow: 0 3px 26px rgba(0, 0, 0, 0.26); }
.kierer-welcome a.kw-logo { display: inline-block; line-height: 0; }
.kierer-welcome .kw-headline {
  margin: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: clamp(34px, 5.4vw, 72px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: #fff;
  text-wrap: balance;
}
.kierer-welcome .kw-subline {
  margin: 0;
  max-width: 620px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
}
.kierer-welcome .kw-btn {
  --kw-btn-bg: #E64515;
  --kw-btn-color: #ffffff;
  --kw-btn-bg-hover: #ffffff;
  --kw-btn-color-hover: #1a1a1a;
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 30px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  background: var(--kw-btn-bg);
  color: var(--kw-btn-color);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none !important;
  cursor: pointer;
  transition: background .5s cubic-bezier(.33, 1, .68, 1), color .5s cubic-bezier(.33, 1, .68, 1), border-color .5s cubic-bezier(.33, 1, .68, 1), transform .3s cubic-bezier(.16,1,.3,1), box-shadow .4s ease;
}
.kierer-welcome .kw-btn:hover {
  background: var(--kw-btn-bg-hover);
  color: var(--kw-btn-color-hover);
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.25);
}
.kierer-welcome .kw-btn-icon { display: inline-flex; }
.kierer-welcome .kw-btn-icon svg { width: 17px; height: 17px; transition: transform .25s ease; }
.kierer-welcome .kw-btn:hover .kw-btn-icon svg { transform: translateY(3px); }
.kierer-welcome.kw-btn-square .kw-btn { border-radius: 6px; }
.kierer-welcome.kw-btn-ghost .kw-btn {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.65);
  color: #fff;
}
.kierer-welcome.kw-btn-ghost .kw-btn:hover {
  background: var(--kw-btn-bg-hover);
  border-color: var(--kw-btn-bg-hover);
  color: var(--kw-btn-color-hover);
}
.kierer-welcome.kw-btn-circle .kw-btn {
  width: 76px;
  height: 76px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
}
.kierer-welcome.kw-btn-circle .kw-btn-text { display: none; }
.kierer-welcome.kw-btn-circle .kw-btn-icon svg { width: 26px; height: 26px; }

.kierer-welcome .kw-hint {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  z-index: 2;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: rgba(255, 255, 255, 0.8);
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: opacity .3s ease, transform .3s ease;
}
.kierer-welcome .kw-hint.is-away { opacity: 0; transform: translateX(-50%) translateY(12px); pointer-events: none; }
.kierer-welcome .kw-hint-mouse {
  width: 24px;
  height: 38px;
  border: 1.5px solid currentColor;
  border-radius: 14px;
  display: flex;
  justify-content: center;
  padding-top: 6px;
}
.kierer-welcome .kw-hint-wheel {
  width: 3px;
  height: 7px;
  border-radius: 2px;
  background: currentColor;
  animation: kwWheel 1.9s cubic-bezier(.5,0,.35,1) infinite;
}
@keyframes kwWheel {
  0%   { transform: translateY(0); opacity: 1; }
  60%  { transform: translateY(11px); opacity: 0; }
  61%  { transform: translateY(0); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* Einblenden der Inhalte */
.kierer-welcome.kw-animate .kw-logo,
.kierer-welcome.kw-animate .kw-eyebrow,
.kierer-welcome.kw-animate .kw-headline,
.kierer-welcome.kw-animate .kw-subline,
.kierer-welcome.kw-animate .kw-btn,
.kierer-welcome.kw-animate .kw-hint {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
.kierer-welcome.kw-animate.kw-in .kw-logo    { opacity: 1; transform: none; transition-delay: .05s; }
.kierer-welcome.kw-animate.kw-in .kw-eyebrow { opacity: 1; transform: none; transition-delay: .15s; }
.kierer-welcome.kw-animate.kw-in .kw-headline{ opacity: 1; transform: none; transition-delay: .25s; }
.kierer-welcome.kw-animate.kw-in .kw-subline { opacity: 1; transform: none; transition-delay: .38s; }
.kierer-welcome.kw-animate.kw-in .kw-btn     { opacity: 1; transform: none; transition-delay: .5s; }
.kierer-welcome.kw-animate.kw-in .kw-hint    { opacity: 1; transform: translateX(-50%); transition-delay: .7s; }

@media (max-width: 767px) {
  /* Am Handy sitzen Logo und Überschrift oben, der Knopf bleibt unten (Wunsch 08.09.2026). */
  .kierer-welcome .kw-inner {
    flex: 1 1 auto;
    justify-content: flex-start;
    padding: 11vh 20px 20vh;
    gap: 14px;
  }
  .kierer-welcome .kw-btn { margin-top: auto; }
  .kierer-welcome .kw-inner::before { top: 52%; width: 200vw; height: 120vh; background: radial-gradient(ellipse 46% 26% at center, rgba(16, 20, 26, 0.24) 0%, rgba(16, 20, 26, 0.16) 44%, rgba(16, 20, 26, 0.05) 70%, rgba(16, 20, 26, 0) 86%); }
  .kierer-welcome .kw-logo img { width: 214px; }
  .kierer-welcome .kw-logo { margin-top: -8px; }
  .kierer-welcome .kw-eyebrow { font-size: 13px; }
  .kierer-welcome .kw-hint { bottom: 18px; }
  .kierer-welcome .kw-hint-mouse { width: 21px; height: 33px; }
}
@media (prefers-reduced-motion: reduce) {
  .kierer-welcome .kw-hint-wheel { animation: none; }
  .kierer-welcome.kw-zoom .kw-media { transition: none; transform: none; }
  .kierer-welcome.kw-animate * { transition: none !important; opacity: 1 !important; transform: none !important; }
  .kierer-welcome.kw-animate .kw-hint { transform: translateX(-50%) !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   Hinweis-Box (z. B. Mitteilung zum Förderbudget auf der Förderungs-Seite)
   ═══════════════════════════════════════════════════════════════════ */
.kierer-hinweis-box {
  max-width: 900px;
  margin: 0 auto 34px;
  padding: 26px 30px;
  text-align: left;
  background: #fff6f3;
  border: 1px solid rgba(230, 69, 21, 0.22);
  border-left: 5px solid #E64515;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(230, 69, 21, 0.06);
}
.kierer-hinweis-kopf {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.kierer-hinweis-zeichen {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #E64515;
  color: #fff;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 20px;
  font-weight: 800;
  line-height: 34px;
  text-align: center;
}
.kierer-hinweis-box .kierer-hinweis-titel {
  margin: 0;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: #1a1a1a;
}
.kierer-hinweis-box p {
  margin: 0 0 12px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 15.5px;
  line-height: 1.65;
  color: #4a4f55;
}
.kierer-hinweis-box p:last-child { margin-bottom: 0; }
.kierer-hinweis-box .kierer-hinweis-quelle { font-size: 13px; color: #7a8087; }
.kierer-hinweis-box a { color: #E64515; text-decoration: underline; }
@media (max-width: 767px) {
  .kierer-hinweis-box { padding: 20px 18px; border-radius: 14px; }
  .kierer-hinweis-kopf { gap: 10px; }
  .kierer-hinweis-box p { font-size: 14.5px; }
}

/* ── Willkommensbereich: Animationen über GSAP (Klasse kw-gsap), Vorhang-Effekt, Kacheln ── */
.kierer-welcome.kw-gsap .kw-logo,
.kierer-welcome.kw-gsap .kw-eyebrow,
.kierer-welcome.kw-gsap .kw-headline,
.kierer-welcome.kw-gsap .kw-subline,
.kierer-welcome.kw-gsap .kw-btn,
.kierer-welcome.kw-gsap .kw-hint,
.kierer-welcome.kw-gsap .kw-media { transition: none !important; }
/* Mit GSAP steuert das Skript die Sichtbarkeit; die CSS-Startwerte (opacity 0) duerfen die Container nicht verstecken */
.kierer-welcome.kw-gsap.kw-animate .kw-headline,
.kierer-welcome.kw-gsap.kw-animate .kw-logo,
.kierer-welcome.kw-gsap.kw-animate .kw-eyebrow,
.kierer-welcome.kw-gsap.kw-animate .kw-subline,
.kierer-welcome.kw-gsap.kw-animate .kw-btn,
.kierer-welcome.kw-gsap.kw-animate .kw-hint { opacity: 1; transform: none; }
.kierer-welcome.kw-gsap.kw-animate .kw-hint { transform: translateX(-50%); }
.kierer-welcome.kw-gsap.kw-zoom .kw-media { transform: none; }
.kierer-welcome .kw-headline { perspective: 900px; }
.kierer-welcome .kw-headline .kw-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: 0 0.04em 0.12em;
  margin-bottom: -0.12em;
}
/* Nach dem Eingang wird die Wort-Maske nicht mehr gebraucht. Sie schnitt den Textschatten am Wortrand ab,
   dadurch lagen sichtbare Rechtecke hinter den Wörtern (08.09.2026). */
.kierer-welcome.kw-done .kw-headline .kw-w { overflow: visible; }
/* Solange die Masken schneiden, trägt die Überschrift keinen Schatten: ein weiter Schatten
   würde an der Wortkante abgeschnitten und läge als Rechteck hinter dem Wort. Nach dem
   Eingang blendet er weich ein (08.09.2026). */
.kierer-welcome .kw-headline .kw-w { text-shadow: 0 4px 46px rgba(0, 0, 0, 0); }
.kierer-welcome.kw-done .kw-headline .kw-w {
  text-shadow: 0 4px 46px rgba(0, 0, 0, 0.18);
  transition: text-shadow .55s ease;
}
.kierer-welcome .kw-headline .kw-wi {
  display: inline-block;
  transform-origin: 50% 100%;
  will-change: transform, opacity;
}
.kierer-welcome .kw-sweep {
  position: absolute;
  top: -20%;
  left: 0;
  width: 60%;
  height: 140%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(105deg, rgba(255,255,255,0) 30%, rgba(255,255,255,0.14) 50%, rgba(255,255,255,0) 70%);
  transform: skewX(-12deg);
}
.kierer-welcome:not(.kw-gsap) .kw-sweep { display: none; }
.kierer-welcome .kw-btn { will-change: transform; }
.kierer-welcome .kw-btn:hover { transform: translateY(-2px); }
.kierer-welcome.kw-gsap .kw-btn.kw-pulse::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  border: 2px solid var(--kw-btn-bg);
  opacity: 0;
  animation: kwPulse 2.6s ease-out 2.4s infinite;
  pointer-events: none;
}
@keyframes kwPulse {
  0%   { transform: scale(0.9); opacity: 0.55; }
  70%  { transform: scale(1.18); opacity: 0; }
  100% { transform: scale(1.18); opacity: 0; }
}
.kierer-welcome .kw-btn { position: relative; }

/* Zwei Seiten: der Willkommensbereich liegt als feste Ebene über der Startseite, bis umgeblättert wird.
   Die Klasse setzt schon das Inline-Skript des Widgets, damit beim Laden nichts springt. */
.kw-host-fixed {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 990;
  overflow: hidden;
  display: block !important;
  will-change: transform;
  backface-visibility: hidden;
}
.kw-host-fixed > .elementor-widget-kierer_welcome,
.kw-host-fixed > .elementor-widget-kierer_welcome > .elementor-widget-container {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.kw-host-fixed .kierer-welcome { min-height: 100% !important; height: 100%; }
.kw-host-fixed.kw-hidden { visibility: hidden; pointer-events: none; }
/* Zweite Scrollleiste beim Umblättern (Chrome): Das Skript schiebt die Startseite per transform um eine
   Bildschirmhöhe nach unten. Das Theme gibt body overflow-x: hidden, damit wird body ein eigener Scrollbereich
   (overflow-y wird auto) und zeigt während der Bewegung einen zweiten Balken. clip schneidet genauso ab, macht
   body aber nicht zum Scrollbereich (18.09.2026). */
html body:has(.kierer-welcome) { overflow-x: clip; }
/* Während des Umblätterns auch nach unten abschneiden: sonst verlängert die verschobene Startseite die Seite,
   und der Scrollbalken schrumpft für eine Sekunde. Damit dabei auch auf sehr hohen Bildschirmen nichts sichtbar
   abgeschnitten wird, ist die Startseite mindestens eine Bildschirmhöhe hoch (18.09.2026). */
html body:has(.kierer-welcome) { min-height: 100vh; }
html body:has(.kierer-welcome[data-kw-zustand="wechsel"]) { overflow: clip; }
/* Elementor gibt Containern (.e-con) eine Uebergangszeit auf transform (0,4 s). GSAP setzt den Transform aber
   Bild fuer Bild, und der Browser zog jedes Bild noch einmal weich nach: der Streifen hinkte, startete zaeh,
   die Kachel-Flaeche (Container) lief anders als die Logo-Zeile (alte Section) und am Ende sprang alles in die
   Endlage (gemessen 08.09.2026). Darum: keine CSS-Uebergaenge auf den bewegten Teilen. */
.kw-host-fixed,
.kw-seite2,
.kw-gsap.elementor-widget,
.kierer-welcome.kw-gsap .kw-inner,
.kierer-welcome.kw-gsap .kw-dim { transition: none !important; }
/* Abdunkelung beim Umblättern als eigene Ebene (Deckkraft ist auf der Grafikkarte billig, ein Filter
   auf dem großen Bild müsste jedes Bild neu berechnen). Die bewegten Ebenen bekommen will-change, damit
   Chrome sie einmal rastert und beim Skalieren nicht jedes Bild neu zeichnet. */
.kierer-welcome .kw-dim { position: absolute; inset: 0; z-index: 1; background: #14161a; opacity: 0; pointer-events: none; }
.kierer-welcome.kw-gsap .kw-media,
.kierer-welcome.kw-gsap .kw-inner { will-change: transform, opacity; }

/* Kacheln unter dem Willkommensbereich: die CSS-Einblendung des Themes weicht GSAP */
.kierer-animate.kw-gsap {
  opacity: 1;
  transform: none;
  transition: none !important;
}
.kw-gsap.elementor-invisible { visibility: inherit !important; }
.kw-gsap.animated { animation: none !important; }


/* ═══════════════════════════════════════════════════════════════════
   Rechtszeile auf Seiten ohne Fußzeile (Elementor-Canvas)
   Die Startseite läuft in der Canvas-Vorlage und hat deshalb keine Fußzeile.
   Impressum und Datenschutzerklärung müssen aber von jeder Seite aus erreichbar
   sein (Offenlegungspflicht, ECG § 5). Diese Zeile ergänzt beides dezent (08.09.2026).
   ═══════════════════════════════════════════════════════════════════ */
.kierer-rechtszeile {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 22px;
  padding: 22px 24px 26px;
  background: #ffffff;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: #8a9099;
}
.kierer-rechtszeile a {
  color: #6b7178;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.kierer-rechtszeile a:hover,
.kierer-rechtszeile a:focus-visible { color: #E64515; border-bottom-color: rgba(230, 69, 21, 0.4); }
@media (max-width: 767px) {
  .kierer-rechtszeile { font-size: 12.5px; gap: 6px 16px; padding: 18px 18px 22px; }
}


/* ═══════════════════════════════════════════════════════════════════
   Handy-Navigation (Seitenleiste)
   Das Theme liefert nur eine schlichte Liste mit der Überschrift "Menü" auf grauem Grund.
   Hier: weiße Fläche mit abgerundeter Kante, Logo oben, große Einträge mit feinen Trennlinien,
   unten Telefon, E-Mail und der Knopf "Projekt starten" (Markup ergänzt kierer-mobilnav.js).
   ═══════════════════════════════════════════════════════════════════ */
/* Ohne diese Regel blitzt die Seitenleiste beim Laden links auf: die Klasse kierer-mobilnav setzt erst
   das Skript, und das Theme schiebt die Leiste nur um seine eigene Breite zur Seite (08.09.2026). */
.kitchor-mobile-nav { transform: translate3d(-102%, 0, 0) !important; }
.mobile-nav-active .kitchor-mobile-nav { transform: translate3d(0, 0, 0) !important; } /* Klasse haengt am <html> */
.kitchor-mobile-nav.kierer-mobilnav {
  width: min(364px, 87vw) !important;
  max-width: 87vw !important;
  background: #ffffff !important;
  border-radius: 0 22px 22px 0;
  overflow: hidden !important;
  /* Das Theme schiebt die Leiste um seine eigene Breite (330 px) zur Seite. Unsere Leiste ist breiter,
     dadurch schaute links ein Streifen heraus. Darum hier selbst um die volle Breite verschieben. */
  transform: translate3d(-102%, 0, 0) !important;
  box-shadow: none;
}
.mobile-nav-active .kitchor-mobile-nav.kierer-mobilnav {
  transform: translate3d(0, 0, 0) !important;
  box-shadow: 0 24px 70px -20px rgba(20, 24, 30, 0.35);
}
.kierer-mobilnav .menu-scroll-mobile {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
}
/* Überschrift "Menü" und die zweite Liste (alle Seiten) des Themes werden nicht gebraucht */
.kierer-mobilnav .mobile-nav-tabs,
.kierer-mobilnav .mobile-categories-menu,
.kierer-mobilnav .kitchor-social,
.kierer-mobilnav .search-form { display: none !important; }

.kierer-mobilnav .kmn-kopf {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 22px 18px;
  border-bottom: 1px solid #f1f1f3;
}
.kierer-mobilnav .kmn-logo { display: block; line-height: 0; }
.kierer-mobilnav .kmn-logo img { width: 148px; height: auto; display: block; }
.kierer-mobilnav a.mobile-nav-close.kmn-zu {
  position: static !important;
  float: none !important;
  width: 40px !important;
  height: 40px !important;
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f4f4f6;
  color: #30373e !important;
  transition: background .18s ease;
}
.kierer-mobilnav a.mobile-nav-close.kmn-zu:hover { background: #ebebee; }
.kierer-mobilnav .kmn-zu svg { width: 18px; height: 18px; }

.kierer-mobilnav .mobile-menu-tab {
  flex: 1 1 auto;
  padding: 6px 14px 10px !important;
}
.kierer-mobilnav .handheld-navigation ul.menu { list-style: none; margin: 0; padding: 0; }
.kierer-mobilnav .handheld-navigation li.menu-item { border-bottom: 1px solid #f4f4f6; }
.kierer-mobilnav .handheld-navigation li.menu-item:last-child { border-bottom: 0; }
.kierer-mobilnav .handheld-navigation li.menu-item > a {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 10px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.3;
  color: #30373e;
  text-transform: none;
  border: 0;
  transition: color .16s ease;
}
.kierer-mobilnav .handheld-navigation li.menu-item > a:hover,
.kierer-mobilnav .handheld-navigation li.menu-item.current-menu-item > a,
.kierer-mobilnav .handheld-navigation li.menu-item.current_page_item > a { color: #E64515; }
.kierer-mobilnav .kmn-pfeil { flex: 0 0 auto; display: inline-flex; color: #c9ccd1; }
.kierer-mobilnav .kmn-pfeil svg { width: 16px; height: 16px; }
.kierer-mobilnav li.menu-item > a:hover .kmn-pfeil,
.kierer-mobilnav li.current-menu-item > a .kmn-pfeil { color: #E64515; }

.kierer-mobilnav .kmn-fuss {
  flex: 0 0 auto;
  margin-top: auto;
  padding: 16px 18px 22px;
  border-top: 1px solid #f1f1f3;
  background: #fafafb;
}
.kierer-mobilnav .kmn-zeile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 4px;
  text-decoration: none !important;
}
.kierer-mobilnav .kmn-sym {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #ececef;
  color: #E64515;
}
.kierer-mobilnav .kmn-sym svg { width: 18px; height: 18px; }
.kierer-mobilnav .kmn-klein {
  display: block;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9aa0a7;
}
.kierer-mobilnav .kmn-wert {
  display: block;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #30373e;
}
.kierer-mobilnav .kmn-knopf {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 20px;
  border-radius: 999px;
  background: #E64515;
  color: #ffffff !important;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: background .18s ease;
}
.kierer-mobilnav .kmn-knopf:hover { background: #cf3d12; }
.kierer-mobilnav .kmn-knopf svg { width: 17px; height: 17px; }

@media (max-width: 400px) {
  .kierer-mobilnav .kmn-kopf { padding: 18px 18px 14px; }
  .kierer-mobilnav .kmn-logo img { width: 132px; }
  .kierer-mobilnav .handheld-navigation li.menu-item > a { font-size: 16px; padding: 14px 8px; }
}

/* ═══════════════════════════════════════════════
   KARUSSELL MIT TEXT UND BILD (Widget testimonials-carousel-coverflow, Seiten Ochsner, Daikin, Biomasse)
   Das Plugin legt das Produktbild als Hintergrund hinter die ganze Folie und stellt den Text oben in den
   weißen Teil des Bildes. Bei schmaleren Folien bricht der Text öfter um und rutscht ins Bild. Hier steht
   der Text oben und das Bild als eigene Fläche darunter, die Folie wächst mit dem Text (die festen
   Folienhöhen aus Elementor gelten für diese Folien nicht mehr). Alle Folien bleiben gleich hoch, die
   Bilder unten bündig.
   Bildfläche: Die Produktbilder (918 x 851 bzw. 1220 x 1127) haben oben 24 bis 36 Prozent Weißraum.
   Mit 110 Prozent Breite und Seitenverhältnis 1,29 bleibt vom Bild das untere Stück ab etwa 23,5 Prozent
   sichtbar, das Motiv ist bei allen Bildern ganz drin, Produktgröße am Desktop wie vorher.
   Nur Folien mit Text: Das Referenzbilder-Karussell auf der Wärmepumpen-Seite hat leere Titel und bleibt
   unverändert.
   ═══════════════════════════════════════════════ */
.mySwiperCoverflow .slider-container-block-background:has(.slide-title:not(:empty), .slide-description:not(:empty)) {
  height: auto !important;
  flex: 1 1 auto;
  justify-content: flex-start;
  background-size: 0 0 !important; /* Bild nicht mehr hinter dem Text; ::after erbt es von hier */
}
.mySwiperCoverflow .slider-container-block-background:has(.slide-title:not(:empty), .slide-description:not(:empty)) .slider-coverflow-wrapper {
  flex: 0 0 auto;
  width: 100%;
  height: auto;
  padding-bottom: 12px;
}
.mySwiperCoverflow .slider-container-block-background:has(.slide-title:not(:empty), .slide-description:not(:empty)) .slide-title {
  line-height: 1.25; /* zweizeilige Titel liefen mit 21px Zeilenhöhe ineinander */
}
.mySwiperCoverflow .slider-container-block-background:has(.slide-title:not(:empty), .slide-description:not(:empty))::after {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: calc(100% + 60px);
  margin: auto -30px -25px; /* über den Innenabstand der Folie bis an ihre Ränder */
  aspect-ratio: 1.29;
  background-image: inherit;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 110% auto;
}
/* Ab Tablet sind die Folien schmal (290 bis 360 Pixel): Bild stärker vergrößern, damit die Produkte nicht
   winzig werden. 125 Prozent schneidet je Seite 10 Prozent ab (Weißraum der Bilder mindestens 12 Prozent),
   Seitenverhältnis 1,13 lässt vom Bild das untere Stück ab 23,4 Prozent sichtbar. */
@media (max-width: 1400px) {
  .mySwiperCoverflow .slider-container-block-background:has(.slide-title:not(:empty), .slide-description:not(:empty))::after {
    aspect-ratio: 1.13;
    background-size: 125% auto;
  }
}