.elementor-6193 .elementor-element.elementor-element-e80ec9c{--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:0px;--margin-bottom:4px;--margin-left:4px;--margin-right:4px;--padding-top:-4px;--padding-bottom:-4px;--padding-left:-4px;--padding-right:-4px;}.elementor-6193 .elementor-element.elementor-element-4b973a5f{--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;}.elementor-6193 .elementor-element.elementor-element-1495627a.elementor-element{--align-self:center;}.elementor-6193 .elementor-element.elementor-element-7a49610f{--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:-77px;--margin-bottom:18px;--margin-left:0px;--margin-right:0px;}.elementor-6193 .elementor-element.elementor-element-600ae008 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-6193 .elementor-element.elementor-element-1676c02d{--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:-47px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-6193 .elementor-element.elementor-element-575d40c{--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;}.elementor-6193 .elementor-element.elementor-element-47f35076{--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:-47px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-6193 .elementor-element.elementor-element-2e41c743{--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;}.elementor-6193 .elementor-element.elementor-element-100102de{--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;}.elementor-6193 .elementor-element.elementor-element-6f63ae76{padding:50px 0px 100px 0px;}.elementor-widget-heading .elementor-heading-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );color:var( --e-global-color-primary );}.elementor-6193 .elementor-element.elementor-element-628566ab{text-align:center;}.elementor-6193 .elementor-element.elementor-element-628566ab .elementor-heading-title{font-family:"Poppins", Sans-serif;font-size:40px;font-weight:600;line-height:1.1em;color:#222222;}.elementor-widget-accordion .elementor-accordion-icon, .elementor-widget-accordion .elementor-accordion-title{color:var( --e-global-color-primary );}.elementor-widget-accordion .elementor-accordion-icon svg{fill:var( --e-global-color-primary );}.elementor-widget-accordion .elementor-active .elementor-accordion-icon, .elementor-widget-accordion .elementor-active .elementor-accordion-title{color:var( --e-global-color-accent );}.elementor-widget-accordion .elementor-active .elementor-accordion-icon svg{fill:var( --e-global-color-accent );}.elementor-widget-accordion .elementor-accordion-title{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-weight:var( --e-global-typography-primary-font-weight );}.elementor-widget-accordion .elementor-tab-content{color:var( --e-global-color-text );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-6193 .elementor-element.elementor-element-60844f95 > .elementor-widget-container{background-color:#FFFFFF;margin:30px 0px 0px 0px;padding:15px 15px 15px 15px;border-style:solid;border-width:1px 1px 1px 1px;border-color:#F6F6F6;border-radius:19px 19px 19px 19px;box-shadow:0px 0px 25px 0px rgba(200.25, 200.25, 200.25, 0.5);}.elementor-6193 .elementor-element.elementor-element-60844f95 .elementor-accordion-item{border-width:0px;border-color:#F2F2F2;}.elementor-6193 .elementor-element.elementor-element-60844f95 .elementor-accordion-item .elementor-tab-content{border-width:0px;border-top-color:#F2F2F2;}.elementor-6193 .elementor-element.elementor-element-60844f95 .elementor-accordion-item .elementor-tab-title.elementor-active{border-width:0px;border-bottom-color:#F2F2F2;}.elementor-6193 .elementor-element.elementor-element-60844f95 .elementor-tab-title{background-color:#FFFFFF;padding:18px 18px 18px 18px;}.elementor-6193 .elementor-element.elementor-element-60844f95 .elementor-accordion-icon, .elementor-6193 .elementor-element.elementor-element-60844f95 .elementor-accordion-title{color:#737373;}.elementor-6193 .elementor-element.elementor-element-60844f95 .elementor-accordion-icon svg{fill:#737373;}.elementor-6193 .elementor-element.elementor-element-60844f95 .elementor-active .elementor-accordion-icon, .elementor-6193 .elementor-element.elementor-element-60844f95 .elementor-active .elementor-accordion-title{color:#4F4F4F;}.elementor-6193 .elementor-element.elementor-element-60844f95 .elementor-active .elementor-accordion-icon svg{fill:#4F4F4F;}.elementor-6193 .elementor-element.elementor-element-60844f95 .elementor-accordion-title{font-family:"Poppins", Sans-serif;font-size:16px;font-weight:400;}.elementor-6193 .elementor-element.elementor-element-60844f95 .elementor-tab-title .elementor-accordion-icon i:before{color:#737373;}.elementor-6193 .elementor-element.elementor-element-60844f95 .elementor-tab-title .elementor-accordion-icon svg{fill:#737373;}.elementor-6193 .elementor-element.elementor-element-60844f95 .elementor-tab-title.elementor-active .elementor-accordion-icon i:before{color:#4F4F4F;}.elementor-6193 .elementor-element.elementor-element-60844f95 .elementor-tab-title.elementor-active .elementor-accordion-icon svg{fill:#4F4F4F;}.elementor-6193 .elementor-element.elementor-element-60844f95 .elementor-tab-content{background-color:#FFFFFF;color:#4F4F4F;font-family:"Open Sans", Sans-serif;font-size:14px;font-weight:400;line-height:1.7em;letter-spacing:0.2px;}body.elementor-page-6193:not(.elementor-motion-effects-element-type-background), body.elementor-page-6193 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}@media(max-width:1024px){.elementor-6193 .elementor-element.elementor-element-397477f1 > .elementor-widget-container{margin:-55px -55px -55px -55px;}.elementor-6193 .elementor-element.elementor-element-6f63ae76{padding:0px 20px 50px 20px;}.elementor-6193 .elementor-element.elementor-element-628566ab .elementor-heading-title{font-size:30px;}.elementor-6193 .elementor-element.elementor-element-60844f95 .elementor-accordion-title{font-size:14px;}.elementor-6193 .elementor-element.elementor-element-60844f95 .elementor-tab-content{font-size:13px;}}@media(max-width:767px){.elementor-6193 .elementor-element.elementor-element-7a49610f{--margin-top:-140px;--margin-bottom:72px;--margin-left:0px;--margin-right:0px;}.elementor-6193 .elementor-element.elementor-element-1676c02d{--margin-top:-106px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-6193 .elementor-element.elementor-element-47f35076{--margin-top:-55px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}.elementor-6193 .elementor-element.elementor-element-5658f83a > .elementor-widget-container{margin:-21px -23px -23px -23px;}.elementor-6193 .elementor-element.elementor-element-57b3dc1c > .elementor-widget-container{margin:-33px -33px -33px -33px;}.elementor-6193 .elementor-element.elementor-element-397477f1 > .elementor-widget-container{margin:-59px -59px -59px -59px;}.elementor-6193 .elementor-element.elementor-element-628566ab .elementor-heading-title{font-size:27px;}.elementor-6193 .elementor-element.elementor-element-60844f95 > .elementor-widget-container{margin:0px 0px 0px 0px;}}/* Start custom CSS for html, class: .elementor-element-df230e5 */<style>
    /* Scope the CSS to this hero section to prevent conflicts */
    #freeaiden-hero-section {
        position: relative;
        width: 100%;
        min-height: 80vh; /* Bei Bedarf für die Höhe des Hero-Bereichs anpassen */
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 50px 20px;
        box-sizing: border-box;
        overflow: hidden; /* Wichtig für Bildüberlauf */
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); /* Futuristischer dunkler Farbverlauf */
        color: #e0e0e0; /* Helle Textfarbe */
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }

    #freeaiden-hero-content {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        max-width: 600px; /* Inhaltbreite begrenzen */
        z-index: 2; /* Sicherstellen, dass der Inhalt über den Hintergrundelementen liegt */
        margin-right: 40px; /* Abstand zwischen Text und Bild */
    }

    #freeaiden-hero-content h1 {
        font-size: 3.5em; /* Große Überschrift */
        margin-bottom: 20px;
        line-height: 1.2;
        font-weight: 700;
        color: #ffffff; /* Helleres Weiß für die Überschrift */
    }

    #freeaiden-hero-content h1 strong {
        color: #00ffc8; /* Futuristisches Grün zur Hervorhebung */
        /* Texteffekt für wechselnde Wörter */
        display: inline-block;
        min-width: 150px; /* Layout-Verschiebung beim Wortwechsel verhindern */
    }

    #freeaiden-hero-content p {
        font-size: 1.2em;
        line-height: 1.6;
        margin-bottom: 30px;
        color: #b0b0b0;
    }

    .freeaiden-hero-buttons {
        display: flex;
        gap: 20px; /* Abstand zwischen den Schaltflächen */
    }

    .freeaiden-hero-button {
        display: inline-block;
        padding: 15px 30px;
        border-radius: 8px;
        text-decoration: none;
        font-weight: bold;
        transition: transform 0.3s ease, background-color 0.3s ease;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }

    .freeaiden-hero-button:hover {
        transform: translateY(-3px);
    }

    .freeaiden-primary-button {
        background-color: #00ffc8; /* Futuristisches Grün */
        color: #1a1a2e; /* Dunkler Text für Kontrast */
    }

    .freeaiden-primary-button:hover {
        background-color: #00e0b0;
    }

    #freeaiden-ai-image {
        position: relative;
        width: 450px; /* Feste Breite für den Bildcontainer */
        height: 450px; /* Feste Höhe für den Bildcontainer */
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1; /* Unterhalb des Inhalts, aber über dem Hintergrund */
        margin-left: 40px; /* Abstand zwischen Text und Bild */
    }

    #freeaiden-ai-image img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain; /* Sicherstellen, dass das Bild in seinen Container passt */
        filter: drop-shadow(0 0 20px rgba(0, 255, 200, 0.6)); /* Leuchtender Effekt */
        animation: floatEffect 4s ease-in-out infinite; /* Subtile Schweben-Animation */
    }

    @keyframes floatEffect {
        0% { transform: translateY(0px); }
        50% { transform: translateY(-10px); }
        100% { transform: translateY(0px); }
    }

    /* Dekorative Hintergrundelemente (optional, aber fügt futuristisches Gefühl hinzu) */
    #freeaiden-hero-section::before,
    #freeaiden-hero-section::after {
        content: '';
        position: absolute;
        border-radius: 50%;
        filter: blur(80px); /* Weicher Glanz */
        opacity: 0.3;
        z-index: 0;
    }

    #freeaiden-hero-section::before {
        width: 300px;
        height: 300px;
        background-color: #00ffc8;
        top: -50px;
        left: -50px;
    }

    #freeaiden-hero-section::after {
        width: 400px;
        height: 400px;
        background-color: #3e2162; /* Eine weitere Akzentfarbe */
        bottom: -100px;
        right: -100px;
    }


    /* --- Responsives Design --- */

    /* Tablet und größere Handys */
    @media (max-width: 992px) {
        #freeaiden-hero-section {
            flex-direction: column; /* Inhalt und Bild stapeln */
            text-align: center;
            padding: 80px 20px;
            min-height: unset; /* Höhe an den Inhalt anpassen lassen */
        }

        #freeaiden-hero-content {
            align-items: center;
            margin-right: 0;
            margin-bottom: 40px; /* Abstand zwischen Text und Bild */
            max-width: 100%; /* Volle Breite auf kleineren Bildschirmen nutzen */
        }

        #freeaiden-hero-content h1 {
            font-size: 3em;
        }

        #freeaiden-hero-content p {
            font-size: 1.1em;
        }

        #freeaiden-ai-image {
            width: 350px;
            height: 350px;
            margin-left: 0;
        }

        .freeaiden-hero-buttons {
            justify-content: center; /* Schaltflächen zentrieren */
        }
    }

    /* Mobile Geräte */
    @media (max-width: 768px) {
        #freeaiden-hero-content h1 {
            font-size: 2.5em;
        }

        #freeaiden-hero-content p {
            font-size: 1em;
        }

        .freeaiden-hero-button {
            padding: 12px 25px;
            font-size: 0.9em;
        }

        #freeaiden-ai-image {
            width: 280px;
            height: 280px;
        }
    }

    @media (max-width: 480px) {
        #freeaiden-hero-content h1 {
            font-size: 2em;
        }

        #freeaiden-hero-content p {
            font-size: 0.9em;
        }

        .freeaiden-hero-buttons {
            flex-direction: column; /* Schaltflächen vertikal stapeln */
            gap: 15px;
            width: 100%; /* Schaltflächen in voller Breite */
        }

        .freeaiden-hero-button {
            width: 100%;
            text-align: center;
        }

        #freeaiden-ai-image {
            width: 220px;
            height: 220px;
        }
    }
</style>

<div id="freeaiden-hero-section">
    <div id="freeaiden-hero-content">
        <h1>100% Kostenlose KI-Tools für <strong id="freeaiden-dynamic-text">Schüler</strong></h1>
        <p>Freeaiden.com Schüler, Unternehmen und Kreative mit innovativen Web-Tools und KI-gestützten Lösungen stärken. Einfach, schnell und 100% kostenlos—genau so, wie Technologie sein sollte.</p>
        <div class="freeaiden-hero-buttons">
            <a href="https://www.youtube.com/channel/UCADNLxvbvVCrNkZltFTmgzQ?sub_confirmation=1" class="freeaiden-hero-button freeaiden-primary-button">Tutorials ansehen</a>
        </div>
    </div>
    <div id="freeaiden-ai-image">
        <img src="https://freeaiden.com/storage/2025/07/5ff00a30-765d-4848-b361-36021bc10817_removalai_preview.png" alt="Freeaiden KI-Assistent" loading="lazy">
    </div>
</div>

<script>
    // Scope the JavaScript to prevent conflicts
    (function() {
        const dynamicTextElement = document.getElementById('freeaiden-dynamic-text');
        // Aktualisiertes Wörter-Array entsprechend der neuen H1-Struktur
        const words = ['Schüler', 'Unternehmen', 'Webdesigner', 'Entwickler'];
        let wordIndex = 0;

        function changeWord() {
            dynamicTextElement.style.opacity = 0; // Ausblenden
            setTimeout(() => {
                wordIndex = (wordIndex + 1) % words.length;
                dynamicTextElement.textContent = words[wordIndex];
                dynamicTextElement.style.opacity = 1; // Einblenden
            }, 500); // Warten, bis das Ausblenden abgeschlossen ist, bevor der Text geändert wird
        }

        // Wort alle 3 Sekunden ändern
        setInterval(changeWord, 3000);

        // Initiales Einblenden für das erste Wort
        dynamicTextElement.style.transition = 'opacity 0.5s ease-in-out';
        dynamicTextElement.style.opacity = 1;

    })();
</script>/* End custom CSS */