
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Über uns - RL Switzerland</title>
    <link rel="stylesheet" href="./style.css">
    <script src="https://cdn.lordicon.com/lordicon.js"></script>
    <link rel="icon" type="image/x-icon" href="./img/rl_switzerland_logo.png">
    <style>
        body {
            background: linear-gradient(180deg, #0d0d0d, #292929);
            color: #fff;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            margin: 0;
            padding: 0;
            background-size: cover;
        }

        header {
            background: #569CF6;
            backdrop-filter: blur(10px);
            padding: 15px;
            text-align: center;
            color: white;
            font-size: 1.5rem;
            border-radius: 15px;
            box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
            margin-top: 16px;
            margin-left: 16px;
            margin-right: 16px;
        }

        nav {
            margin-top: 10px;
            display: flex;
            justify-content: center;
            gap: 15px;
        }

        nav a {
            color: #fff;
            text-decoration: none;
            font-weight: bold;
            font-size: 1rem;
            transition: color 0.3s;
        }

        nav a:hover {
            color: #ffcc00;
            text-decoration: underline;
        }

        main {
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 10px;
        }

        .bio-section,
        .info-section,
        .partner-section {
            background: #1c1c1c;
            border-radius: 10px;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
            padding: 20px;
            max-width: 300px;
            text-align: center;
            transition: transform 0.3s;
            animation: fadeIn 1.5s ease-in-out;
        }

        .bio-section:hover,
        .info-section:hover,
        .partner-section:hover {
            transform: scale(1.05);
        }

        .bio-section h2,
        .info-section h2,
        .partner-section h2 {
            font-size: 1.8rem;
            color: #00c8ff;
        }

        .bio-section p,
        .info-section p,
        .partner-section p {
            font-size: 1.1rem;
            color: #ccc;
        }

        .content-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 15px;
            width: 100%;
            max-width: 1200px;
        }

        .logos {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 60%;
            margin-top: 10px;
            position: relative;
        }

        .logos img {
            width: 100px;
            height: auto;
            filter: drop-shadow(0 0 10px #00c8ff);
            transition: transform 0.3s;
        }

        .logos img:hover {
            transform: scale(1.2);
        }

        .partner-symbol {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 1.5rem;
            color: #00c8ff;
            background: rgba(0, 0, 0, 0.6);
            padding: 5px 15px;
            border-radius: 15px;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
        }

        .highlight-text {
            font-size: 2rem;
            color: #00ffcc;
            text-align: center;
            animation: fadeIn 2s ease-in-out;
            margin: 20px 0;
        }

        footer {
            background: #0056b3;
            color: #fff;
            padding: 20px;
            text-align: center;
        }

        footer a {
            color: #ffcc00;
            text-decoration: none;
            font-weight: bold;
            transition: color 0.3s;
        }

        footer a:hover {
            color: #fff;
        }

        .footer-partner {
            margin-top: 20px;
            font-size: 1rem;
            color: #ccc;
            text-align: center;
        }

        .footer-partner img {
            width: 50px;
            height: auto;
            margin: 0 10px;
        }

        .footer-partner a {
            color: #00c8ff;
            text-decoration: none;
            font-weight: bold;
            transition: color 0.3s;
        }

        .footer-partner a:hover {
            color: #ffcc00;
        }

        @keyframes fadeIn {
            0% {
                opacity: 0;
                transform: translateY(20px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .popup {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #1c1c1c;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
            text-align: center;
            color: #fff;
            z-index: 1000;
        }

        .popup h2 {
            color: #00c8ff;
        }

        .popup button {
            margin-top: 20px;
            padding: 10px 20px;
            background: #00c8ff;
            border: none;
            border-radius: 5px;
            color: #fff;
            font-size: 1rem;
            cursor: pointer;
            transition: background 0.3s;
        }

        .popup button:hover {
            background: #0056b3;
        }

        .container1 {
            display: flex;
            justify-content: space-around;
            align-items: center;
            width: 1000px;
            margin-bottom: 130px;
        }

        .container2 {
            display: flex;
            justify-content: space-around;
            align-items: center;
            width: 1300px;
            margin-bottom: 130px;
        }

        .partner-symbol2 {
            position: absolute;
            top: 800px;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 1.5rem;
            color: #00c8ff;
            background: rgba(0, 0, 0, 0.6);
            padding: 5px 15px;
            border-radius: 15px;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
        }
        .info-section {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 300px;
            padding: 15px;
            background: rgba(28, 28, 28, 0.9);
            border-radius: 10px;
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5);
    }

            .info-section h2 {
                font-size: 1.8rem;
                text-align: center;
                margin: 10px 0;
                color: #00c8ff;
            }

            .info-section p {
                font-size: 1.1rem;
                text-align: center;
                color: #ccc;
                margin-bottom: 10px;
                line-height: 1.4;
            }

            .info-section lord-icon {
                width: 50px;
                height: 50px;
                margin-top: 5px;
            }


        h1 {
            font-size: 55px;
        }

        .title-section {
            font-size: 23px;
        }

        .container3 {
            margin-bottom: 130px;
        }

        .sahitpopup {
            cursor: pointer;
        }

        .bio-section {
            height: 400px;
        }

    
        .hover-box {
            background: #1c1c1c;
            color: #00c8ff;
            text-align: center;
            padding: 15px;
            border-radius: 10px;
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
            margin: 15px auto;
            max-width: 500px;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            animation: fadeIn 1.5s ease-in-out;
            transition: transform 0.3s;
        }

        .hover-box h3 {
            font-size: 1.5rem;
            text-shadow: 0 0 8px rgba(0, 200, 255, 0.8);
        }

        .hover-box p {
            color: #ffffff;
            font-size: 1rem;
            margin-top: 5px;
        }

        .hover-box:hover {
            transform: scale(1.05);
            transition: 0.3s;
        }


    </style>
</head>

<body>
    
    <header>
        <h1>RL Switzerland</h1>
        <nav>
            <a href="services.html">Dienstleistungen</a>
            <a href="contact.html">Kontakt</a>
            <a class="sahitpopup" href="#" onclick="openPopup('sahitPopup')">Partner</a>
        </nav>
    </header>

    <main>
        <div class="logos">
            <img src="img/rl_switzerland_logo.png" alt="RL Switzerland Logo">
            <div class="title-section"><h2>Was bewirkt RL Switzerland?</h2></div>
            <img src="img/sahit_logo.png" alt="Sahit Logo">
        </div>

        <div class="container1">
            <div class="info-section">
                <lord-icon src="https://cdn.lordicon.com/puvaffet.json" trigger="hover" colors="primary:#00c8ff,secondary:#ffffff" style="width:80px;height:80px"></lord-icon>
                <h2>Unsere Technologien</h2>
                <p>Wir setzen auf moderne und leistungsstarke Technologien wie HTML, CSS, JavaScript und Node.js, um benutzerfreundliche und ansprechende Websites zu erstellen.</p>
            </div>
    
            <div class="info-section">
                <lord-icon src="https://cdn.lordicon.com/mecwbjnp.json" trigger="hover" colors="primary:#00c8ff,secondary:#ffffff" style="width:80px;height:80px"></lord-icon>
                <h2>Individuelle Lösungen</h2>
                <p>Wir bieten maßgeschneiderte Webentwicklungs-Dienstleistungen an, die speziell auf die Bedürfnisse Ihres Unternehmens zugeschnitten sind.</p>
            </div>
        </div>

        <div class="title-section"><h2>Team</h2></div>
        <div class="container2">
            <section class="bio-section">
                <lord-icon src="https://cdn.lordicon.com/eouimtlu.json" trigger="hover" colors="primary:#00c8ff,secondary:#ffffff" style="width:60px;height:60px"></lord-icon>
                <h2>Roni Dakaj</h2>
                <p>Inhaber | Designer</p>
                <p>Roni ist die kreative Kraft hinter unseren Designs. Mit einem ausgeprägten Sinn für Ästhetik und einer Leidenschaft für benutzerzentriertes Design sorgt er dafür, dass jedes Projekt die Vision des Kunden widerspiegelt und ein aussergewöhnliches Benutzererlebnis bietet.</p>
            </section>

            <div class="hover-box">
                <h3>Deine Vision, unsere Mission</h3>
                <p>Wir setzen alles daran, Ihre Ideen in beeindruckende digitale Erlebnisse zu verwandeln.</p>
            </div>
            


            <section class="bio-section">
                <lord-icon src="https://cdn.lordicon.com/lzgmgrnn.json" trigger="hover" colors="primary:#00c8ff,secondary:#ffffff" style="width:60px;height:60px"></lord-icon>
                <h2>Lirion Zeka</h2>
                <p>Inhaber | Entwickler</p>
                <p>Lirion ist unser technischer Assistent, der Konzepte in voll funktionsfähige Websites umwandelt. Er ist auf die Entwicklung robuster und skalierbarer Lösungen spezialisiert und sorgt dafür, dass die von uns erstellten Websites nicht nur optisch ansprechend sind, sondern auch nahtlos funktionieren.</p>
            </section>
        </div>

        <div class="title-section"><h2>Partner</h2></div>
        <div class="container3">
            <section class="partner-section">
                <lord-icon src="https://cdn.lordicon.com/uqpazftn.json" trigger="hover" colors="primary:#00c8ff,secondary:#ffffff" style="width:80px;height:80px"></lord-icon>
                <h2>Sahit Fadez</h2>
                <p>Partner | Projektmanager</p>
                <p>Sahit Fadez ist ein stark angeschlossener Partner, der unsere Projekte unterstützt und bei der Umsetzung unserer Visionen hilft.</p>
            </section>
        </div>
    </main>

    <footer>
        <p>&copy; 2025 RL Switzerland. Alle Rechte vorbehalten.</p>
        <p><a href="#" onclick="openPopup('agbPopup')">AGB</a> | <a href="#" onclick="openPopup('privacyPopup')">Datenschutz</a></p>

        
    <div class="popup" id="sahitPopup">
        <h2>Unsere Partner</h2>
        <p>Partner | <a href="https://sahitfadezz.ch" target="_blank"> Sahit Fadez</a></p>
        <button onclick="closePopup('sahitPopup')">Schließen</button>
    </div>

    <div class="popup" id="agbPopup">
        <h2>Allgemeine Geschäftsbedingungen</h2>
        <p>RL Switzerland übernimmt keine Haftung für Schäden, die durch die Nutzung unserer Dienstleistungen entstehen könnten. Alle Leistungen erfolgen nach bestem Wissen und Gewissen.</p>
        <button onclick="closePopup('agbPopup')">Schließen</button>
    </div>

    <div class="popup" id="privacyPopup">
        <h2>Datenschutzerklärung</h2>
        <p>Ihre Daten werden ausschließlich zur Bearbeitung Ihrer Anfragen verwendet. Wir geben keine personenbezogenen Daten ohne Ihre Zustimmung weiter.</p>
        <button onclick="closePopup('privacyPopup')">Schließen</button>
    </div>


    <script>
        function openPopup(id) {
            document.getElementById(id).style.display = 'block';
        }

        function closePopup(id) {
            document.getElementById(id).style.display = 'none';
        }
    </script>
</body>

</html>
