/* Grundlegende Stile zurücksetzen */
* { margin: 0; padding: 0; box-sizing: border-box; }

.toast {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: #4CAF50;
    color: white;
    padding: 16px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    font-size: 1em;
    z-index: 9999;
    animation: fadeInOut 5s ease forwards;
}

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


body { font-family: 'Inter', sans-serif; line-height: 1.6; color: #1d1d1f; background-color: #f5f5f7; }

a { text-decoration: none; color: inherit; transition: color 0.3s ease; }
a:hover { color: #007bff; }

h1, h2, h3 { margin-bottom: 20px; font-weight: 600; color: #1d1d1f; }
h1 { font-size: 2.5em; font-weight: 700; }
h2 { font-size: 2em; text-align: center; margin-bottom: 40px; }
h3 { font-size: 1.5em; margin-bottom: 10px; }
p { margin-bottom: 20px; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

header {background-color: #fff;padding: 15px 0;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);position: sticky;top: 0;z-index: 1000;}
header .container {display: flex;justify-content: space-between;align-items: center;}

.logo a { font-size: 1.5em; font-weight: 700; }

nav ul { list-style: none; display: flex; }
nav ul li { margin-left: 30px; }
nav ul li a { font-weight: 500; }

.burger { display: none; cursor: pointer; }
.burger div { width: 25px; height: 3px; background-color: #1d1d1f; margin: 5px; transition: all 0.3s ease; }

.hero { background-color: #e9e9eb; color: #1d1d1f; text-align: center; padding: 100px 20px; margin-bottom: 60px; }
.hero h1 { margin-bottom: 15px; }
.hero p { font-size: 1.2em; margin-bottom: 30px; color: #666; }

.cta-button { display: inline-block; background-color: #007bff; color: white; padding: 12px 30px; border-radius: 25px; font-size: 1.1em; font-weight: 500; transition: background-color 0.3s ease; }
.cta-button:hover { background-color: #0056b3; }

section { padding: 60px 0; margin-bottom: 40px; }
section:nth-child(even) { background-color: #f5f5f7; }

.services .service-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));gap: 30px;text-align: center;}

.service-item { background-color: #fff; padding: 30px; border-radius: 10px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); }
.service-item i { font-size: 3em; color: #007bff; margin-bottom: 20px; }

.about .container { max-width: 800px; }
.about p { text-align: justify; margin-bottom: 15px; }

.cloud-ai { text-align: center; }
.cloud-ai-icons { margin: 30px 0; }
.cloud-ai-icons i { margin: 0 15px; color: #007bff; }

.contact .container { max-width: 600px; }
.contact form { display: flex; flex-direction: column; gap: 20px; margin-bottom: 30px; }
.contact form input,
.contact form textarea { padding: 15px; border: 1px solid #ccc; border-radius: 5px; font-size: 1em; font-family: 'Inter', sans-serif; }
.contact .location { text-align: center; font-size: 1.1em; color: #666; }

footer { background-color: #1d1d1f; color: #f5f5f7; padding: 30px 0; text-align: center; font-size: 0.9em; }
footer .container { display: flex; flex-direction: column; align-items: center; }
.social-links { margin-top: 15px; }
.social-links a { margin: 0 10px; font-size: 1.5em; color: #f5f5f7; transition: color 0.3s ease; }
.social-links a:hover { color: #007bff; }

@media (max-width: 768px) {
    header .container {flex-direction: row;justify-content: space-between;align-items: center;}

    .nav-links {position: absolute;top: 100%;left: 0;background-color: white;width: 100%;flex-direction: column;text-align: center;overflow: hidden;max-height: 0;transition: max-height 0.4s ease-in-out;box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);z-index: 999;}
    .nav-active {max-height: 300px;}
    .nav-links li {opacity: 0;transform: translateY(-10px);animation: fadeInNav 0.4s forwards;animation-delay: calc(var(--i) * 0.2s); margin-left: 0px; font-size: 1.5em; padding: 10px}

    @keyframes fadeInNav { to {opacity: 1;transform: translateY(0);} }
    .nav-inactive {max-height: 0;}

    .burger { display: block; }
    .hero { padding: 80px 20px; }
    .hero h1 { font-size: 2em; }
    h2 { font-size: 1.8em; }
    .service-grid { grid-template-columns: 1fr; }
    .cloud-ai-icons i { font-size: 2.5em; }
}

/* Animation für das Burger-Icon beim Öffnen/Schließen */
.toggle .line1 { transform: rotate(-45deg) translate(-5px, 6px); }
.toggle .line2 { opacity: 0; }
.toggle .line3 { transform: rotate(45deg) translate(-5px, -6px); }