/* --- Lokale Schriftarten (DSGVO-konform) --- */

/* Light (300) */
@font-face {
    font-family: 'Inter';
    src: url('fonts/inter-300.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

/* Regular (400) - Der Standard */
@font-face {
    font-family: 'Inter';
    src: url('fonts/inter-400.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

/* SemiBold (600) */
@font-face {
    font-family: 'Inter';
    src: url('fonts/inter-600.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

/* Bold (700) */
@font-face {
    font-family: 'Inter';
    src: url('fonts/inter-700.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

/* Globale Variablen für einfaches Ändern der Farben */
:root {
    --primary-color: #0f172a; /* Dunkles Navy */
    --accent-color: #2563eb;  /* Kräftiges Blau */
    --text-dark: #333333;
    --text-light: #f4f4f4;
    --bg-light: #ffffff;
    --bg-grey: #f8f9fa;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Bindestrich ist wichtig! */
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: var(--text-dark);
}

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

/* Navigation */
.navbar {
    background: var(--bg-light);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 1rem 0;
}

.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img {
    height: 50px; /* Passt die Logo-Größe an */
    width: auto;
}

.nav-links {
    list-style: none;
    display: flex;
    align-items: center;
}

.nav-links li {
    margin-left: 30px;
}

.nav-links a {
    text-decoration: none;
    color: var(--primary-color);
    font-weight: 600;
    transition: color 0.3s;
}

.nav-links a:hover {
    color: var(--accent-color);
}

/* Buttons */
.btn-primary {
    background: var(--accent-color);
    color: white !important;
    padding: 10px 20px;
    border-radius: 5px;
    transition: background 0.3s;
}

.btn-primary:hover {
    background: #1d4ed8;
}

/* Hero Section */
.hero {
    background: linear-gradient(rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.8)), url('hero-bg.jpg');
    background-size: cover;
    background-position: center;
    height: 80vh;
    color: white;
    display: flex;
    align-items: center;
    text-align: center;
}

.hero .container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.hero-sub {
    font-size: 1.5rem;
    font-weight: 300;
    margin-bottom: 2rem;
    color: #cbd5e1;
}

/* Sections General */
section {
    padding: 80px 0;
}

.section-light { background: var(--bg-light); }
.section-dark { background: var(--primary-color); color: white; }

h2 {
    text-align: center;
    font-size: 2.5rem;
    margin-bottom: 40px;
}

/* Services Grid */
.grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.card {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 30px;
    border-radius: 8px;
}

.card h3 {
    margin-bottom: 15px;
    color: var(--accent-color);
}

/* Listen */
.check-list {
    list-style: none;
    max-width: 800px;
    margin: 0 auto;
}

.check-list li {
    margin-bottom: 15px;
    padding-left: 25px;
    position: relative;
}

.check-list li::before {
    content: "✓";
    color: var(--accent-color);
    position: absolute;
    left: 0;
    font-weight: bold;
}

/* Footer */
footer {
    background: #020617;
    color: white;
    padding: 50px 0 20px;
}

.footer-content {
    text-align: center;
}

.contact-info a {
    color: var(--accent-color);
    text-decoration: none;
}

/* Mobile Responsive */
.hamburger { display: none; cursor: pointer; }

@media (max-width: 768px) {
    .nav-links {
        display: none; /* Mobile Menü Logik benötigt JS */
        flex-direction: column;
        position: absolute;
        top: 70px;
        right: 0;
        background: white;
        width: 100%;
        text-align: center;
        padding: 20px 0;
        box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    }

    .nav-links.active { display: flex; }
    .nav-links li { margin: 15px 0; }
    .hamburger { display: block; }
    
    .hamburger span {
        display: block;
        width: 25px;
        height: 3px;
        margin: 5px;
        background: var(--primary-color);
    }
    
    .hero h1 { font-size: 2rem; }
}
/* --- Neue Styles für die About Section mit Foto --- */

/* Container, der Bild und Text nebeneinander stellt */
.about-split {
    display: flex;
    align-items: center; /* Zentriert Text vertikal zum Bild */
    gap: 50px; /* Abstand zwischen Bild und Text */
}

/* Bild-Container */
.about-image-container {
    flex: 1; /* Nimmt 1 Teil des Platzes ein */
    display: flex;
    justify-content: center; /* Zentriert das Bild im Container */
}

/* Das Foto selbst */
.profile-photo {
    width: 100%;
    max-width: 350px; /* Maximale Breite des Fotos */
    height: auto;
    border-radius: 12px; /* Schöne abgerundete Ecken */
    box-shadow: 0 10px 25px rgba(0,0,0,0.15); /* Professioneller Schatten */
    object-fit: cover; /* Stellt sicher, dass das Bild nicht verzerrt wird */
}

/* Text-Bereich */
.about-text {
    flex: 1.5; /* Der Text bekommt etwas mehr Platz als das Bild (Verhältnis 1:1.5) */
}

.intro-text {
    font-size: 1.2rem;
    margin-bottom: 25px;
}

/* Hervorhebung der Kernkompetenz */
.competency-highlight {
    background: var(--bg-light);
    border-left: 5px solid var(--accent-color); /* Blauer Balken links */
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    font-size: 1.1rem;
}

/* --- Mobile Anpassung für das Foto --- */
/* Wir müssen unsere bestehende Media Query erweitern oder eine neue hinzufügen,
   damit das Bild auf kleinen Bildschirmen über dem Text steht. */

@media (max-width: 768px) {
    /* Bestehende Regeln hier drin lassen... */

    /* NEU HINZUFÜGEN: About Section auf Handy untereinander */
    .about-split {
        flex-direction: column; /* Untereinander statt nebeneinander */
        text-align: center; /* Text zentrieren */
        gap: 30px;
    }

    .about-image-container {
        width: 100%;
    }

    .profile-photo {
        max-width: 280px; /* Bild auf Handy etwas kleiner machen */
    }

    .competency-highlight {
        text-align: left; /* Die Box sieht linksbündig besser aus */
    }
}

/* --- Testimonials / Client Voices --- */

/* Das Design der einzelnen Karte */
.testimonial-card {
    background: rgba(255, 255, 255, 0.05); /* Sehr leicht transparent */
    padding: 30px;
    border-radius: 8px;
    position: relative; /* Wichtig für das Anführungszeichen */
    border-left: 4px solid var(--accent-color); /* Blauer Balken links */
    height: 100%; /* Damit alle Karten gleich hoch wirken */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Das große Anführungszeichen als Design-Element */
.quote-icon {
    font-family: serif; /* Serifen-Schrift für klassische Anführungszeichen */
    font-size: 4rem;
    line-height: 1;
    color: var(--accent-color);
    opacity: 0.3;
    margin-bottom: -20px; /* Zieht den Text etwas näher ran */
}

/* Der eigentliche Text */
.quote-text {
    font-style: italic;
    margin-bottom: 20px;
    color: #e2e8f0; /* Helles Grau für gute Lesbarkeit auf Dunkelblau */
    font-weight: 300;
}

/* Infos zum Kunden (Name/Firma) */
.client-info strong {
    display: block;
    color: white;
    margin-bottom: 5px;
}

.client-info span {
    font-size: 0.9rem;
    color: #94a3b8; /* Etwas dunkleres Grau */
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* --- Mobile Reparatur-Kit --- */

html, body {
    max-width: 100%;
    overflow-x: hidden; /* Verbietet horizontales Scrollen strikt */
}

/* Stellt sicher, dass Bilder nie breiter als der Bildschirm sind */
img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 768px) {
    /* Container-Abstand auf Handys verringern, gibt mehr Platz für Inhalt */
    .container {
        padding: 0 15px;
    }
    
    /* Lange Wörter (wie deine E-Mail) dürfen umbrechen */
    a, p, h1, h2 {
        word-wrap: break-word;
    }
    
    /* Grid auf Handys zwingend einspaltig machen */
    .grid-3 {
        grid-template-columns: 1fr;
    }

    /* Footer Links (Datenschutz) untereinander statt nebeneinander, falls zu breit */
    .legal-links p {
        font-size: 0.8rem;
    }
}