/* GRUNDLEGENDE EINSTELLUNGEN UND VARIABLEN */
/* ========================================= */

/* CSS-Variablen erlauben es uns, Werte wie Farben zentral zu definieren.
  Das ist sehr praktisch, wenn man das Farbschema später ändern möchte.
  Die Farben sind an das Design der MediaBroadcast angelehnt (Blau- und Grautöne).
*/
:root {
    --primary-color: #0055A4; /* Hauptfarbe (ein kräftiges Blau) */
    --secondary-color: #D0D3D4; /* Sekundärfarbe (ein helles Grau) */
    --accent-color: #00AEEF;  /* Akzentfarbe (ein leuchtendes Hellblau) */
    --dark-color: #2C2A29;    /* Dunkler Text und Hintergrundelemente */
    --light-color: #FFFFFF;    /* Heller Text und Hintergründe */
    --font-family: 'Roboto', sans-serif; /* Globale Schriftart */
}

/* Basis-Reset und globale Stile, um ein konsistentes Aussehen 
  in allen Browsern zu gewährleisten.
*/
* {
    box-sizing: border-box; /* Intuitiveres Box-Modell */
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth; /* Sorgt für sanftes Scrollen bei Klick auf Ankerlinks (z.B. in der Navi) */
}

body {
    font-family: var(--font-family);
    line-height: 1.6;
    background-color: var(--light-color);
    color: var(--dark-color);
}


/* HEADER UND NAVIGATION */
/* ===================== */

.main-header {
    background-color: rgba(255, 255, 255, 0.9); /* Leicht transparenter Hintergrund */
    backdrop-filter: blur(10px); /* Milchglas-Effekt für moderne Browser */
    border-bottom: 1px solid var(--secondary-color);
    padding: 0 2rem;
    position: fixed; /* Fixiert die Navigation am oberen Bildschirmrand */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000; /* Stellt sicher, dass die Navi immer im Vordergrund ist */
    transition: background-color 0.3s ease;
}

.main-nav {
    display: flex; /* Nutzt Flexbox für eine flexible Ausrichtung der Elemente */
    justify-content: space-between; /* Elemente verteilen sich: Logo links, Links rechts */
    align-items: center; /* Zentriert die Elemente vertikal */
    height: 70px;
    max-width: 1200px;
    margin: 0 auto; /* Zentriert die Navigation auf großen Bildschirmen */
}

.nav-logo img {
    height: 40px; /* Höhe des Logos */
    transition: transform 0.3s ease; /* Sanfte Animation für das Logo */
}

.nav-logo img:hover {
    transform: scale(1.05); /* Leichte Vergrößerung beim Überfahren mit der Maus */
}

.nav-links {
    list-style: none; /* Entfernt die Aufzählungspunkte der Liste */
    display: flex; /* Ordnet die Links nebeneinander an */
}

.nav-links li {
    margin-left: 2rem; /* Abstand zwischen den Menüpunkten */
}

.nav-links a {
    color: var(--dark-color);
    text-decoration: none;
    font-weight: 700;
    padding: 5px 0;
    position: relative; /* Wichtig für den "Unterstrich"-Effekt beim Hover */
    transition: color 0.3s ease;
}

/* Animierter Unterstrich-Effekt */
.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--accent-color);
    transition: width 0.4s ease; /* Die Animation für den Unterstrich */
}

.nav-links a:hover {
    color: var(--primary-color); /* Farbänderung beim Hover */
}

.nav-links a:hover::after {
    width: 100%; /* Der Unterstrich wird beim Hover sichtbar */
}

/* SEKTIONEN-STYLING (ALLGEMEIN) */
/* ============================== */

/* Stil für die erste Sektion (Startseite) */
.section-fullheight {
    min-height: 100vh; /* Die Sektion füllt die gesamte Bildschirmhöhe aus */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--light-color);
    position: relative;
    /* Hintergrundbild für die Startseite. Hier kann ein generisches Technik-Bild hin */
    background: url('../pictures/unternehmen.jpg') no-repeat center center/cover;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Ein Farbverlauf als Overlay macht den Text auf dem Bild besser lesbar */
    background: linear-gradient(45deg, rgba(0, 85, 164, 0.7), rgba(44, 42, 41, 0.8));
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    padding: 1rem;
}

.hero-content h1 {
    font-size: 3.5rem; /* Größere Schrift für die Hauptüberschrift */
    margin-bottom: 1rem;
}

.hero-content p {
    font-size: 1.5rem;
    margin-bottom: 2rem;
}

/* Stil für alle anderen Inhalts-Sektionen */
.content-section {
    padding: 6rem 2rem; /* Viel Abstand oben/unten, weniger an den Seiten */
    max-width: 1000px;
    margin: 0 auto; /* Zentriert den Inhalt */
    overflow: hidden; /* Verhindert, dass Animationen seitliches Scrollen verursachen */
}

/* Jede zweite Sektion bekommt einen leicht grauen Hintergrund für besseren Kontrast */
.content-section:nth-of-type(odd) {
    background-color: #f8f9fa;
}

.content-section h2 {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 3rem;
    color: var(--primary-color);
    position: relative;
    padding-bottom: 1rem;
}

/* Dekorativer Unterstrich für die Sektionsüberschriften */
.content-section h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background-color: var(--accent-color);
}


/* FLEXBOX LAYOUT FÜR BILD & TEXT */
/* ============================== */

.flex-container {
    display: flex;
    align-items: center; /* Vertikal zentrieren */
    gap: 3rem; /* Abstand zwischen Bild und Text */
}

.flex-item-image {
    flex: 1; /* Nimmt 50% der Breite ein */
}

.flex-item-text {
    flex: 1; /* Nimmt 50% der Breite ein */
}

/* Bei der "reverse" Klasse wird die Reihenfolge von Bild und Text getauscht */
.flex-container.reverse {
    flex-direction: row-reverse;
}

/* SPEZIFISCHE ELEMENTE */
/* ==================== */

/* Bilder */
.profile-picture {
    width: 100%;
    max-width: 300px;
    height: auto;
    border-radius: 50%; /* Macht das Bild rund */
    border: 5px solid var(--light-color);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    display: block;
    margin: 0 auto;
}

.section-image {
    width: 100%;
    height: auto;
    border-radius: 10px; /* Abgerundete Ecken */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    margin-bottom: 1rem;
}

/* Call-to-Action Button */
.cta-button {
    background-color: var(--accent-color);
    color: var(--light-color);
    padding: 12px 25px;
    border-radius: 50px; /* "Pillen"-Form */
    text-decoration: none;
    font-weight: 700;
    display: inline-block;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.cta-button:hover {
    background-color: var(--primary-color);
    transform: translateY(-3px); /* Hebt den Button leicht an */
}

/* Tabelle für persönliche Infos */
.info-table {
    width: 100%;
    margin-top: 1.5rem;
    border-collapse: collapse; /* Entfernt doppelte Rahmen */
}

.info-table td {
    padding: 0.8rem;
    border-bottom: 1px solid var(--secondary-color);
}

.info-table td:first-child {
    font-weight: 700;
    color: var(--primary-color);
}

/* Liste für Aufgaben */
#aufgaben ul {
    list-style: none; /* Eigene Listen-Symbole */
    padding-left: 0;
}

#aufgaben ul li {
    padding-left: 2rem;
    position: relative;
    margin-bottom: 1rem;
}

/* Eigenes Listen-Symbol mit der Akzentfarbe */
#aufgaben ul li::before {
    content: '✔';
    position: absolute;
    left: 0;
    color: var(--accent-color);
    font-weight: bold;
}

/* Impressum */
.impressum-content {
    max-width: 800px;
    margin: 0 auto;
    background: #f8f9fa;
    padding: 2rem;
    border-radius: 8px;
    border-left: 5px solid var(--primary-color);
}

.impressum-content h3 {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    color: var(--primary-color);
}

.impressum-content h3:first-child {
    margin-top: 0;
}

.mail-link {
    color: var(--accent-color);
    font-weight: bold;
    text-decoration: none;
}
.mail-link:hover {
    text-decoration: underline;
}

/* FUSSZEILE */
/* ========== */

.main-footer {
    background-color: var(--dark-color);
    color: var(--light-color);
    text-align: center;
    padding: 1.5rem;
    font-size: 0.9rem;
}


/* JAVASCRIPT-BASIERTE ANIMATIONEN */
/* ================================= */

/* Diese Stile werden durch das JavaScript gesteuert.
  Standardmäßig sind die Elemente unsichtbar und nach unten verschoben.
*/
.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Wenn JavaScript die Klasse '.visible' hinzufügt, 
  wird das Element sichtbar und an seine ursprüngliche Position bewegt.
*/
.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Kleinere Verzögerung für Elemente in der Startseite für einen Staffelungseffekt */
.hero-content h1.animate-on-scroll { transition-delay: 0.2s; }
.hero-content p.animate-on-scroll { transition-delay: 0.4s; }
.hero-content .cta-button.animate-on-scroll { transition-delay: 0.6s; }


/* RESPONSIVES DESIGN (für Handys & Tablets) */
/* ========================================= */

/* Anpassungen für Bildschirme, die schmaler als 768px sind (z.B. Handys) */
@media (max-width: 768px) {
    .main-nav {
        flex-direction: column; /* Navi-Elemente untereinander */
        height: auto;
        padding: 1rem 0;
    }

    .nav-links {
        margin-top: 1rem;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .nav-links li {
        margin: 0.5rem 0;
        margin-left: 0; /* Margin zurücksetzen */
    }
    
    .hero-content h1 { font-size: 2.5rem; }
    .hero-content p { font-size: 1.2rem; }

    .content-section { padding: 4rem 1rem; }
    .content-section h2 { font-size: 2rem; }

    .flex-container, .flex-container.reverse {
        flex-direction: column; /* Bild und Text werden untereinander gestapelt */
    }

    .flex-item-image, .flex-item-text {
        text-align: center; /* Text auf kleinen Bildschirmen zentrieren */
    }

    .profile-picture { margin-bottom: 2rem; }
}
/* ZUSÄTZLICHE STILE FÜR DIE DETAIL-INHALTE */
/* ======================================= */

.detailed-content {
    margin-top: 4rem; /* Abstand zum oberen Flex-Container */
}

.subsection-title {
    text-align: center;
    font-size: 1.8rem;
    color: var(--dark-color);
    margin-bottom: 2rem;
    font-weight: 700;
}

/* Grid-Layout für die Kompetenz-Boxen */
.grid-container {
    display: grid;
    /* Erstellt 2 Spalten auf großen Bildschirmen, ansonsten 1 Spalte */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem; /* Abstand zwischen den Boxen */
}

.grid-item {
    background-color: var(--light-color);
    border: 1px solid var(--secondary-color);
    border-radius: 8px;
    padding: 1.5rem;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.grid-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

.grid-item h4 {
    color: var(--primary-color);
    margin-bottom: 0.8rem;
    font-size: 1.2rem;
}
/* STILE FÜR DIE GOOGLE MAPS KARTE */
/* =============================== */

.map-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 56.25%; /* Erzeugt ein 16:9 Seitenverhältnis */
    margin: 2rem 0;      /* Abstand nach oben und unten */
    border-radius: 8px;  /* Abgerundete Ecken, passend zum Design */
}

.map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0; /* Entfernt den Standard-Rahmen von Google */
}

/* ======================================= */
/* NEUE STILE FÜR DEN KARRIERE-ABSCHNITT    */
/* ======================================= */

#karriere {
    background-color: #f8f9fa; /* Hebt den Karriere-Bereich leicht ab */
}

.career-container {
    display: grid;
    /* 2 Spalten für Desktop, 1 Spalte für Tablets/Handys */
    grid-template-columns: 2fr 1fr; 
    gap: 3rem;
    margin-top: 2rem;
}

.application-form, .applicant-login {
    background-color: var(--light-color);
    padding: 2.5rem;
    border-radius: 8px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    border-top: 4px solid var(--primary-color);
}

.application-form h3, .applicant-login h3 {
    font-size: 1.6rem;
    color: var(--dark-color);
    margin-bottom: 0.5rem;
}

.application-form p, .applicant-login p {
    font-size: 1rem;
    color: #666;
    margin-bottom: 2rem;
    line-height: 1.5;
}

.form-group {
    margin-bottom: 1.2rem;
}

.form-group-row {
    display: flex;
    gap: 1.5rem;
}

.form-group-row .form-group {
    flex: 1;
}

.form-group label {
    display: block;
    font-weight: 700;
    color: var(--dark-color);
    margin-bottom: 0.5rem;
    font-size: 0.9rem;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--secondary-color);
    border-radius: 6px;
    font-family: var(--font-family);
    font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(0, 174, 239, 0.2);
}

.form-group textarea {
    resize: vertical;
}

/* Visuelles Verstecken des Standard-Upload-Buttons */
.file-input {
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    position: absolute;
    z-index: -1;
}

.file-label {
    display: flex;
    align-items: center;
    border: 1px solid var(--secondary-color);
    border-radius: 6px;
    padding: 0;
    cursor: pointer;
    transition: border-color 0.3s;
}

.file-label:hover {
    border-color: var(--primary-color);
}

.file-label .file-button {
    background-color: #e9ecef;
    padding: 12px 15px;
    border-right: 1px solid var(--secondary-color);
    font-weight: bold;
    white-space: nowrap;
}

.file-label .file-name {
    padding: 12px 15px;
    font-style: italic;
    color: #6c757d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.form-submit-btn {
    width: 100%;
    padding: 15px;
    font-size: 1.1rem;
    border: none;
    cursor: pointer;
}

.applicant-login {
    background-color: #f0f4f8; 
    border-top-color: var(--accent-color);
}

.login-footer {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.9rem;
}

.login-footer a {
    color: var(--primary-color);
    text-decoration: none;
}
.login-footer a:hover {
    text-decoration: underline;
}
.login-footer span {
    margin: 0 0.5rem;
    color: var(--secondary-color);
}

.notice {
    margin-top: 2rem;
    background-color: #e9ecef;
    padding: 1rem;
    border-radius: 6px;
    font-size: 0.9rem;
    text-align: center;
    border-left: 3px solid var(--accent-color);
}

/* Responsive Anpassungen für den Karrierebereich */
@media (max-width: 992px) {
    .career-container {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .form-group-row {
        flex-direction: column;
        gap: 0;
    }
    
    .application-form, .applicant-login {
        padding: 1.5rem;
    }
}