<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Willkommen | SYSTEMCUT GbR</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
/* ===================================================================================
   SYSTEMCUTS LANDING v1.3 FINAL - 25. März 2026 | 22:50 CET
   🎉 #FFC000 Goldene Schrift + Header #1A1A1B + Sidebar Gradient
=================================================================================== */

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height:1.6; color:#333; overflow-x:hidden; }

/* HEADER -Schwarz #1A1A1B + Gold-Accents */
/* HEADER - Logo FIX */
#header {
    background-color: #1A1A1B !important;
    color: #FFC000 !important;
    padding

    position: sticky;
    top: 0;
    z-index: 999;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
#header nav { display:flex; justify-content:center; align-items:center; gap:30px; flex-wrap:wrap; }
#header h1 { font-size:1.4em; font-weight:600; margin:0; color: #FFC000 !important; }
#header a { 
    color: #FFC000 !important;  /* ← GOLDENE LINKS */
    text-decoration:none; 
    font-weight:500; 
    padding:0px 12px; 
    border-radius:6px; 
    transition:all 0.3s; 
}
#header a:hover { 
    color: #ffffff !important; 
    background: #FFC000;									
    text-shadow: 0 0 10px rgba(255,192,0,0.5);
} 

/* SIDEBAR - Gradient + Goldene Schrift */
.sidebar {
    position: fixed;
    left: -260px;
    top: 0;
    width: 250px;
    height: 100%;
    background: linear-gradient(135deg, #3d010e 0%, #D35400 100%);
    transition: left 0.3s ease;
    z-index: 1000;
    padding: 80px 20px 20px;
    color: #FFC000 !important;  /* ← GOLDENE SCHRIFT */
}
.sidebar.active { left: 0; }
.sidebar ul { list-style:none; }
.sidebar li { margin:15px 0; }
.sidebar a {
    color: #FFC000 !important;  /* ← GOLDENE LINKS */
    text-decoration: none;
    font-size:1.1em;
    font-weight:500;
    display:block;
    padding:12px 15px;
    border-radius:8px;
    transition: all 0.3s;
    text-shadow: 0 0 5px rgba(255,192,0,0.3);
}
.sidebar a:hover { 
    color: #ffffff !important; 
    background: #FFC000;
    transform: translateX(8px);
    box-shadow: 0 5px 15px rgba(255,192,0,0.4);
}

/* TOGGLE - Gold-Accents */
#menu-toggle {
    position: fixed;
    top: 20px;
    left: 15px;
    z-index: 1200;
    font-size: 24px;
    background: #3d010e;
    color: #FFC000 !important;  /* ← GOLDENES ICON */
    border: 2px solid #FFC000;
    padding: 12px;
    cursor: pointer;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    transition: all 0.3s;
}
#menu-toggle:hover { 
    background: #FFC000;
    color: #3d010e !important;
    transform:scale(1.05); 
}

/* MAIN CONTENT */
main { 
    margin-left: 0; 
    transition: margin-left 0.3s; 
    padding-top: 80px; 
    min-height: 100vh;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}
.sidebar.active ~ main { margin-left: 260px; padding-left: 20px; }

/* LANDING CONTENT mit Gold-Accents */
.landing-card {
    background: white;
    padding: 80px 50px;
    border-radius: 30px;
    box-shadow: 0 30px 70px rgba(0,0,0,0.15);
    max-width: 900px;
    margin: 60px auto;
    text-align: center;
    border: 1px solid #e9ecef;
    position: relative;
}
.landing-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: linear-gradient(90deg, #3d010e 0%, #D35400 100%);
    border-radius: 30px 30px 0 0;
}
.landing-card i { 
    font-size: 5em; 
    color: #FFC000 !important;  /* ← GOLDENE EMOJIS */
    margin-bottom: 25px; 
    display: block; 
    animation: bounce 2s infinite;
    text-shadow: 0 0 20px rgba(255,192,0,0.5);
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-10px); }
    60% { transform: translateY(-5px); }
}
.landing-card h1 { color: #3d010e; font-size: 2.8em; font-weight: 700; margin-bottom: 20px; }
.landing-card p { color: #666; font-size: 1.3em; max-width: 600px; margin: 0 auto 50px; }

.highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    margin: 60px 0;
}
.highlight-item {
    padding: 35px 25px;
    background: #f8f9fa;
    border-radius: 20px;
    border-left: 5px solid #FFC000;  /* ← GOLDENER STREIFEN */
    transition: all 0.3s ease;
}
.highlight-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(255,192,0,0.2);
}
.highlight-item i { 
    font-size: 2.8em; 
    color: #FFC000 !important;  /* ← GOLDENE ICONS */
    margin-bottom: 20px; 
    display: block; 
}
.highlight-item h3 { 
    color: #3d010e; 
    font-size: 1.5em; 
    margin-bottom: 12px; 
    font-weight: 700; 
}
.highlight-item p { color: #555; font-size: 1.08em; }

.cta-buttons {
    display: flex;
    gap: 25px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 60px;
}
.cta-btn {
    padding: 22px 50px;
    font-size: 1.2em;
    font-weight: 700;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 12px 35px rgba(0,0,0,0.2);
}
.cta-primary {
    background: linear-gradient(135deg, #3d010e 0%, #D35400 100%);
    color: #FFC000 !important;  /* ← GOLDENE BUTTON-TEXT */
}
.cta-primary:hover {
    color: white !important;
    transform: translateY(-4px);
    box-shadow: 0 20px 45px rgba(255,192,0,0.4);
}
.cta-secondary {
    background: #FFC000;  /* ← GOLDENER BUTTON */
    color: #3d010e !important;
    border: 3px solid #3d010e;
}
.cta-secondary:hover {
    background: #3d010e;
    color: #FFC000 !important;
    transform: translateY(-4px);
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .sidebar { width:80%; left:-80%; }
    .sidebar.active ~ main { margin-left:0; }
    #header nav { flex-direction:column; gap:15px; }
    .landing-card { margin: 20px; padding: 50px 30px; }
    .cta-buttons { flex-direction:column; align-items:center; }
    .cta-btn { width: 100%; max-width: 320px; justify-content: center; }
}
    </style>
</head>
<body>
    <!-- Toggle Button -->
    <button id="menu-toggle"><i class="fas fa-bars"></i></button>

    <!-- Sidebar -->
    <nav class="sidebar">
        <ul>
            <li><a href="/"><i class="fas fa-home"></i> Home</a></li>
            <li><a href="/shops"><i class="fas fa-store"></i> Shops</a></li>
            <li><a href="/about"><i class="fas fa-info-circle"></i> Über uns</a></li>
            <li><a href="/kontakt"><i class="fas fa-phone"></i> Kontakt</a></li>
            <li><a href="/impressum"><i class="fas fa-file-contract"></i> Impressum</a></li>
        </ul>
    </nav>

    <!-- Header -->
    <header id="header">
        <nav>
            <h1>rondo/cut gbr</h1>
            <a href="/">Home</a>
            <a href="/shops">Shops</a>
            <a href="/about">Über uns</a>
            <a href="/kontakt">Kontakt</a>
            <a href="/impressum">Impressum</a>
        </nav>
    </header>

    <!-- Main Content -->
    <main>
        <div class="landing-card">
            <i class="fas fa-tools"></i>
            <h1>Willkommen bei rondo/cut gbr</h1>
            <p>Professionelle Werkzeuglösungen für Handwerk und Industrie – zuverlässig, direkt, fair.</p>

            <div class="highlights">
                <div class="highlight-item">
                    <i class="fas fa-truck"></i>
                    <h3>Schnelle Lieferung</h3>
                    <p>Versand innerhalb Deutschlands in 1-2 Werktagen direkt ab Lager.</p>
                </div>
                <div class="highlight-item">
                    <i class="fas fa-shield-alt"></i>
                    <h3>Qualität garantiert</h3>
                    <p>Ausgewählte Premiummarken für den professionellen Einsatz.</p>
                </div>
                <div class="highlight-item">
                    <i class="fas fa-headset"></i>
                    <h3>Persönlicher Service</h3>
                    <p>Kompetente Beratung durch Fachleute – telefonisch oder per E-Mail.</p>
                </div>
            </div>

            <div class="cta-buttons">
                <a href="/shops" class="cta-btn cta-primary">
                    <i class="fas fa-store"></i> Unsere Shops entdecken
                </a>
                <a href="/kontakt" class="cta-btn cta-secondary">
                    <i class="fas fa-phone"></i> Jetzt kontaktieren
                </a>
            </div>
        </div>
    </main>

    <script>
        const toggle = document.getElementById('menu-toggle');
        const sidebar = document.querySelector('.sidebar');
        toggle.addEventListener('click', () => {
            sidebar.classList.toggle('active');
            toggle.innerHTML = sidebar.classList.contains('active') ? 
                '<i class="fas fa-times"></i>' : '<i class="fas fa-bars"></i>';
        });
        document.addEventListener('click', (e) => {
            if (!sidebar.contains(e.target) && !toggle.contains(e.target)) {
                sidebar.classList.remove('active');
                toggle.innerHTML = '<i class="fas fa-bars"></i>';
            }
        });
    </script>
</body>
</html>










/* Gemeinsame Basis für alle Brand-Überschriften */
h1.brand, h2.brand, h3.brand, h4.brand, h5.brand, h6.brand {
 /*  display: flex;  */
	 display: inline-flex;
  align-items: baseline;
  font-family: 'Comfortaa', sans-serif;
  margin: 10px 0; /* Standard-Abstand oben/unten */
  text-transform: none; /* Verhindert, dass Browser alles groß schreiben */
	white-space: nowrap; /* Verhindert den Zeilenumbruch innerhalb des Namens */
}

/* Spezifische Größen-Definitionen */
h1.brand { font-size: 40px; }
h2.brand { font-size: 32px; }
h3.brand { font-size: 28px; }
h4.brand { font-size: 24px; }
h5.brand { font-size: 20px; }
h6.brand { font-size: 16px; }

/* Die Farben für die Wortmarke */
.brand .logo1 {
  font-weight: 600;
  color: #1A1A1B;
}

.brand .logo2 {
  font-weight: 700;
  color: #A0A0A0;
}

/* Die Rechtsform (GbR) skaliert immer proportional (50% der Hauptgröße) */
.brand .legal {
  font-size: 0.5em; 
  color: #A0A0A0;
  margin-left: 0.4em; /* Dynamischer Abstand statt festen Pixeln */
  font-weight: 400;
}
