.elementor-272 .elementor-element.elementor-element-6f75c71{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:200px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-272 .elementor-element.elementor-element-f8f85c9{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;text-align:center;}.elementor-272 .elementor-element.elementor-element-f8f85c9 .elementor-heading-title{font-size:90px;color:#FFFFFF;}.elementor-272 .elementor-element.elementor-element-c1ab149{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--overlay-opacity:0;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-272 .elementor-element.elementor-element-c1ab149:not(.elementor-motion-effects-element-type-background), .elementor-272 .elementor-element.elementor-element-c1ab149 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://oymedia.de/wp-content/uploads/2026/05/OY-Logo_transparent-scaled.png");background-position:392px 0px;background-repeat:no-repeat;background-size:50% auto;}.elementor-272 .elementor-element.elementor-element-c1ab149::before, .elementor-272 .elementor-element.elementor-element-c1ab149 > .elementor-background-video-container::before, .elementor-272 .elementor-element.elementor-element-c1ab149 > .e-con-inner > .elementor-background-video-container::before, .elementor-272 .elementor-element.elementor-element-c1ab149 > .elementor-background-slideshow::before, .elementor-272 .elementor-element.elementor-element-c1ab149 > .e-con-inner > .elementor-background-slideshow::before, .elementor-272 .elementor-element.elementor-element-c1ab149 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:var( --e-global-color-cfa1f76 );--background-overlay:'';}.elementor-272 .elementor-element.elementor-element-6a12e1c{--display:grid;--e-con-grid-template-columns:repeat(2, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;--margin-top:50px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-272 .elementor-element.elementor-element-ba63687{--display:flex;}.elementor-272 .elementor-element.elementor-element-ba63687.e-con{--align-self:center;}.elementor-272 .elementor-element.elementor-element-3fcf3be{text-align:start;}.elementor-272 .elementor-element.elementor-element-bdb0224{--grid-template-columns:repeat(0, auto);text-align:center;--grid-column-gap:5px;--grid-row-gap:0px;}.elementor-272 .elementor-element.elementor-element-5ac8b62{--display:flex;}.elementor-272 .elementor-element.elementor-element-861b9b3 .ekit-form form label{color:#000000;}.elementor-272 .elementor-element.elementor-element-861b9b3 .ekit-form form label span{color:#777777;}.elementor-272 .elementor-element.elementor-element-861b9b3 .ekit-form form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]), .elementor-272 .elementor-element.elementor-element-861b9b3 .ekit-form form select{width:100%;height:50px;color:#000000;}.elementor-272 .elementor-element.elementor-element-861b9b3 .ekit-form form textarea{width:100%;height:176px;margin-bottom:20px;}.elementor-272 .elementor-element.elementor-element-861b9b3 .ekit-form form .ekit-form-input, .elementor-272 .elementor-element.elementor-element-861b9b3 .ekit-form form select, .elementor-272 .elementor-element.elementor-element-861b9b3 .ekit-form form input{margin-bottom:20px;}.elementor-272 .elementor-element.elementor-element-861b9b3 .wpcf7-form textarea{color:#000000;}.elementor-272 .elementor-element.elementor-element-861b9b3 .ekit-wid-con .ekit-form form textarea{color:#000000;}.elementor-272 .elementor-element.elementor-element-861b9b3 .ekit-form form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"])::-webkit-input-placeholder{font-size:14px;color:#000000;}.elementor-272 .elementor-element.elementor-element-861b9b3 .ekit-form form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"])::-moz-placeholder{font-size:14px;color:#000000;}.elementor-272 .elementor-element.elementor-element-861b9b3 .ekit-form form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):-ms-input-placeholder{font-size:14px;color:#000000;}.elementor-272 .elementor-element.elementor-element-861b9b3 .ekit-form form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):-moz-placeholder{font-size:14px;color:#000000;}.elementor-272 .elementor-element.elementor-element-861b9b3 .ekit-form form textarea::-webkit-input-placeholder{font-size:14px;color:#000000;}.elementor-272 .elementor-element.elementor-element-861b9b3 .ekit-form form textarea::-moz-placeholder{font-size:14px;color:#000000;}.elementor-272 .elementor-element.elementor-element-861b9b3 .ekit-form form textarea:-ms-input-placeholder{font-size:14px;color:#000000;}.elementor-272 .elementor-element.elementor-element-861b9b3 .ekit-form form textarea:-moz-placeholder{font-size:14px;color:#000000;}.elementor-272 .elementor-element.elementor-element-861b9b3 .ekit-form form > p{text-align:left;}.elementor-272 .elementor-element.elementor-element-861b9b3 .ekit-form form input[type="submit"]{color:#ffffff;}.elementor-272 .elementor-element.elementor-element-861b9b3 .ekit-form form input[type="submit"]:hover{color:#ffffff;}@media(max-width:1024px){.elementor-272 .elementor-element.elementor-element-c1ab149:not(.elementor-motion-effects-element-type-background), .elementor-272 .elementor-element.elementor-element-c1ab149 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:0px 0px;}.elementor-272 .elementor-element.elementor-element-6a12e1c{--grid-auto-flow:row;}}@media(max-width:767px){.elementor-272 .elementor-element.elementor-element-c1ab149:not(.elementor-motion-effects-element-type-background), .elementor-272 .elementor-element.elementor-element-c1ab149 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-position:0px 0px;}.elementor-272 .elementor-element.elementor-element-6a12e1c{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}}/* Start custom CSS for heading, class: .elementor-element-f8f85c9 *//* ========================================= */
/* --- PREMIUM HEADING STYLE (LIVE FIX) --- */
/* ========================================= */

/* 1. Zwingt den gesamten Container in die Mitte */
.elementor-272 .elementor-element.elementor-element-f8f85c9 .elementor-widget-container {
    text-align: center !important; 
}

/* 2. Das Styling der Schrift */
.elementor-272 .elementor-element.elementor-element-f8f85c9 .elementor-heading-title {
    color: #ffffff !important; 
    font-size: 80px !important; 
    font-weight: 800 !important; 
    letter-spacing: 8px !important; /* Noch etwas edler */
    text-transform: uppercase !important;
    position: relative !important;
    display: inline-block !important;
    
    /* LIVE-FIXES: */
    padding-bottom: 22px !important; /* Mehr harten Abstand nach unten erzwingen */
    line-height: 1 !important; /* Verhindert, dass die Live-Seite die Höhe zerschießt */
    margin-right: -8px !important; /* KORRIGIERT DIE MITTE: Gleicht das letter-spacing vom letzten Buchstaben aus */
}

/* 3. Der leuchtende OYMedia-Akzentstrich */
.elementor-272 .elementor-element.elementor-element-f8f85c9 .elementor-heading-title::after {
    content: '' !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 0px !important; /* Sitzt jetzt sicher im padding-Bereich */
    transform: translateX(-50%) !important;
    width: 60px !important; 
    height: 4px !important;
    background-color: #E02B20 !important; 
    border-radius: 2px !important;
    box-shadow: 0 0 15px rgba(224, 43, 32, 0.7) !important; 
    transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* 4. Hover-Effekt */
.elementor-272 .elementor-element.elementor-element-f8f85c9:hover .elementor-heading-title::after {
    width: 140px !important; /* Zieht sich geil in die Länge */
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-3fcf3be *//* ========================================= */
/* --- OYMEDIA PREMIUM TEXT HIGHLIGHT --- */
/* Target: Auf das Text-Editor-Widget legen */
/* ========================================= */

.elementor-272 .elementor-element.elementor-element-3fcf3be {
    /* Die OYMedia Akzentlinie links */
    border-left: 3px solid #E02B20 !important; 
    padding-left: 25px !important;
    
    /* Subtiler Glow, der nach rechts ausläuft (perfekt auf dem Logo) */
    background: linear-gradient(90deg, rgba(224, 43, 32, 0.08) 0%, rgba(0,0,0,0) 100%) !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    
    /* Leichter Push nach rechts für bessere Balance */
    margin-right: 20px !important;
}

/* Styling für die kleine Überschrift (h3) im Editor */
.elementor-272 .elementor-element.elementor-element-3fcf3be h3 {
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    margin-bottom: 15px !important;
}

/* Styling für den Fließtext */
.elementor-272 .elementor-element.elementor-element-3fcf3be p {
    color: #b3b3b3 !important; /* Edles, helles Grau für Lesbarkeit */
    font-size: 16px !important;
    line-height: 1.7 !important;
    font-weight: 400 !important;
    margin-bottom: 0 !important;
}/* End custom CSS */
/* Start custom CSS for social-icons, class: .elementor-element-bdb0224 *//* ========================================= */
/* --- OYMEDIA PREMIUM SOCIAL ICONS --- */
/* Target: Auf das Social-Icons-Widget legen */
/* ========================================= */

/* 1. Ausrichtung an den Text-Block darüber anpassen */
.elementor-272 .elementor-element.elementor-element-bdb0224 {
    margin-top: 20px !important; /* Abstand zum Text */
    padding-left: 25px !important; /* Gleiche Einrückung wie die rote Linie beim Text */
}

/* 2. Der High-End Look der Icons (Ruhezustand) */
.elementor-272 .elementor-element.elementor-element-bdb0224 .elementor-social-icon {
    background-color: rgba(255, 255, 255, 0.03) !important; /* Sehr dunkles, teures Glas */
    border: 1px solid rgba(255, 255, 255, 0.08) !important; /* Hauchdünner Premium-Rand */
    color: #ffffff !important; /* Weißes Icon */
    border-radius: 12px !important; /* Moderner Apple-Style (leicht abgerundet) */
    width: 45px !important; 
    height: 45px !important;
    font-size: 18px !important;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important; /* Butterweiche Animation */
    margin-right: 15px !important; /* Abstand zwischen den Icons */
}

/* 3. Der OYMedia Glow beim Drüberfahren (Hover) */
.elementor-272 .elementor-element.elementor-element-bdb0224 .elementor-social-icon:hover {
    background-color: #E02B20 !important; /* OYMedia Rot */
    border-color: #E02B20 !important; 
    color: #ffffff !important;
    transform: translateY(-5px) scale(1.05) !important; /* Hebt sich leicht ab */
    box-shadow: 0 10px 25px rgba(224, 43, 32, 0.4) !important; /* Roter Neon-Glow */
}

/* Optional: Icon-Größe im Container perfekt zentrieren */
.elementor-272 .elementor-element.elementor-element-bdb0224 .elementor-social-icon i {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}/* End custom CSS */
/* Start custom CSS for elementskit-contact-form7, class: .elementor-element-861b9b3 *//* --- 1. GRUNDGERÜST & ZENTRIERUNG --- */
.wpcf7 {
    text-align: left !important;
    max-width: 700px !important;
    margin: 0 auto !important;
    padding: 20px !important;
}

/* --- 2. GRID SYSTEM (2 Spalten für Name/Firma) --- */
.oy-form-grid {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.oy-half {
    flex: 1;
    min-width: 250px;
}

/* --- 3. LABELS --- */
.wpcf7 label {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-bottom: 8px !important;
    display: block !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- 4. FELDER (Input, Select, Textarea) --- */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea,
.wpcf7 select {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 2px solid transparent !important;
    border-radius: 12px !important;
    padding: 12px 20px !important;
    width: 100% !important;
    font-size: 16px !important;
    outline: none !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
    margin-bottom: 5px !important;
}

/* --- 5. GLOW EFFEKT --- */
.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
    border-color: #e60000 !important;
    box-shadow: 0 0 15px rgba(230, 0, 0, 0.3) !important;
}

/* ========================================= */
/* --- 6. BUDGET SLIDER (Premium Tech Look) --- */
/* ========================================= */

/* HIER IST DER FIX: Wir zwingen auch den versteckten <p> Tag zum Flexbox-Layout! */
.budget-wrap,
.budget-wrap p {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
}

.budget-wrap {
    margin-bottom: 20px !important;
    padding: 10px 0 !important;
}

/* Tötet heimliche Zeilenumbrüche */
.budget-wrap br {
    display: none !important;
}

/* Die Labels links und rechts bleiben kompakt */
.budget-label {
    color: #a0a0a0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important; 
}

/* Der unsichtbare CF7-Container FRISST den ganzen Platz in der Mitte */
.budget-wrap span.wpcf7-form-control-wrap {
    flex-grow: 1 !important;
    width: 100% !important;
    margin: 0 20px !important; /* Abstand zu den Zahlen */
    display: block !important;
}

/* Der Input selbst */
.wpcf7 input[type=range] {
    -webkit-appearance: none !important;
    width: 100% !important;
    max-width: 100% !important; 
    background: transparent !important; 
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    margin: 0 !important;
    --value: 0%; 
}

.wpcf7 input[type=range]::-webkit-slider-runnable-track {
    width: 100% !important;
    height: 8px !important;
    background: linear-gradient(to right, #e60000 0%, #e60000 var(--value), #333 var(--value), #333 100%) !important;
    border-radius: 50px !important;
    cursor: pointer !important;
    border: none !important;
}

.wpcf7 input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    height: 24px !important;
    width: 24px !important;
    border-radius: 50% !important;
    background: #ffffff !important; 
    cursor: pointer !important;
    margin-top: -8px !important; 
    box-shadow: 0 0 15px rgba(230, 0, 0, 0.6) !important;
    border: 3px solid #e60000 !important;
    transition: transform 0.2s ease !important;
}

.wpcf7 input[type=range]::-webkit-slider-thumb:hover {
    transform: scale(1.15) !important;
}

/* ========================================= */
/* --- SLIDER GLOW-KILLER --- */
/* Verhindert den eckigen Rahmen beim Anklicken */
/* ========================================= */
.wpcf7 input[type=range]:focus,
.wpcf7 input[type=range]:active {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
}

/* ========================================= */
/* --- 7. BUTTON (Endlich wieder da!) --- */
/* ========================================= */
.wpcf7 input[type="submit"] {
    background: linear-gradient(90deg, #e60000 0%, #ff4d4d 100%) !important;
    color: #ffffff !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    border: none !important;
    padding: 18px 0 !important;
    border-radius: 50px !important;
    width: 100% !important;
    cursor: pointer !important;
    margin-top: 20px !important;
    transition: all 0.3s ease !important;
}

.wpcf7 input[type="submit"]:hover {
    transform: translateY(-3px) scale(1.01) !important;
    box-shadow: 0 15px 30px rgba(230, 0, 0, 0.4) !important;
}

/* --- 8. Abstände & Extras --- */
.oy-separator {
    height: 20px;
}
.wpcf7 select {
    appearance: none !important;
    background-image: url('data:image/svg+xml;utf8,<svg fill="black" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: right 15px center !important;
}

/* ========================================= */
/* --- 9. DYNAMISCHES FORMULAR & INFO BOX --- */
/* ========================================= */

/* Die Sektionen blenden weich ein, statt hart aufzuploppen */
.oy-dynamic-section {
    animation: fadeIn 0.4s ease forwards;
}

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

/* Die edle Info-Box für Foto & Video */
.oy-info-box {
    background: rgba(255, 255, 255, 0.03);
    border-left: 3px solid #e60000; /* Roter Balken links */
    padding: 15px 20px;
    border-radius: 0 8px 8px 0;
    margin-top: 15px;
    margin-bottom: 10px;
}

.oy-info-box p {
    color: #a0a0a0 !important;
    font-size: 14px !important;
    margin: 0 !important;
    line-height: 1.6 !important;
}

.oy-info-box p strong {
    color: #ffffff;
}

/* Checkbox Styling (Ich bin mir unsicher) */
.oy-checkbox-label .wpcf7-list-item {
    margin: 0 !important;
    display: flex;
    align-items: center;
    gap: 10px;
}

.oy-checkbox-label input[type="checkbox"] {
    width: auto !important;
    accent-color: #e60000; /* Checkbox wird beim Klicken rot */
    cursor: pointer;
    transform: scale(1.2);
    margin: 0 !important;
}

.oy-checkbox-label .wpcf7-list-item-label {
    color: #a0a0a0;
    font-size: 14px;
    cursor: pointer;
    transition: color 0.3s ease;
}

.oy-checkbox-label:hover .wpcf7-list-item-label {
    color: #ffffff;
}

/* Sanfte Überblendung für den ausgrauenden Slider */
#budget-slider-box {
    transition: opacity 0.4s ease;
}/* End custom CSS */