/* 1. Grundlegende Einstellungen: HTML und Body */
/* Stellt sicher, dass die Seite die volle Höhe einnimmt und Ränder entfernt werden */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Arial, sans-serif; /* Standard-Schriftart hinzugefügt */
}

/* WICHTIG: Erstellt Platz für den fixierten Footer am unteren Rand */
body {
    margin-bottom: 100px; /* Muss der Höhe des Footers entsprechen (30px Höhe + 30px Padding + 15px) */
    font-size: 16px; /* Basisgröße für die gesamte Seite */
}


/* 2. Hintergrundbild-Container */
.hintergrund-container {
    height: 100vh; /* Volle Viewport-Höhe */
    width: 100%;
    position: relative; /* Positionierungskontext für die absolute Box */
    
    /* Hintergrundbild-Eigenschaften */
    background-image: url('images/highway.jpg'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
    margin-bottom: 75px;
}


/* 3. Die zentrierte Inhaltsbox */
.inhalts-box {
    /* Zentrierung mittels absoluter Positionierung und Transformation */
    position: absolute;
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
    
    /* Design */
    background-color: rgba(255, 255, 255, 0.9); /* Weiße Box mit leichter Transparenz */
    padding: 0px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center; /* Inhalt zentrieren */
    width: 80%; 
    max-width: 700px; /* Maximale Breite auf großen Bildschirmen */
}

.logo {
    max-width: 300px; /* Größe des Logos */
    margin-bottom: 1px;
}

h1 {
    color: #333; /* Dunkle Textfarbe für Lesbarkeit */
    font-size: 2rem; /* Überschrift 1: 2.5 mal so groß wie die Basisgröße (16px * 2.5) */
}

p {
    color: #333; /* Dunkle Textfarbe für Lesbarkeit */
    font-size: 1.5rem; /* 1.5 mal so groß wie die Basisgröße (16px * 1.5) */
}

.rot {
  color: #CC0000;
}

.blau {
    color: #174154; /* Beispiel: Ein dezentes Stahlblau */
    text-decoration: none; /* Optional: Entfernt die standardmäßige Unterstreichung */
    font-weight: bold; /* Optional: Macht den Link fett, damit er auffällt */
}

/* Erhöht den Zeilenabstand nur für den Absatz mit den Dienstleistungen */
.dienstleistungen {
    line-height: 1.6; /* <-- Abstand hier anpassen (z.B. 1.5, 2.0, 2.5) */
}

.email-link {
    color: #174154; /* Beispiel: Ein dezentes Stahlblau */
    text-decoration: none; /* Optional: Entfernt die standardmäßige Unterstreichung */
    font-weight: bold; /* Optional: Macht den Link fett, damit er auffällt */
}

/* Optional: Stil für den Hover-Effekt (wenn man mit der Maus drüberfährt) */
.email-link:hover {
    color: #11303e; /* Eine etwas dunklere Farbe beim Hover */
    text-decoration: underline; /* Fügt eine Unterstreichung beim Hover hinzu */
}

.email-link2 {
    color: #174154; /* Beispiel: Ein dezentes Stahlblau */
    text-decoration: none; /* Optional: Entfernt die standardmäßige Unterstreichung */
    
}

/* Optional: Stil für den Hover-Effekt (wenn man mit der Maus drüberfährt) */
.email-link2:hover {
    color: #11303e; /* Eine etwas dunklere Farbe beim Hover */
    text-decoration: underline; /* Fügt eine Unterstreichung beim Hover hinzu */
}

/* 4. Footer (immer unten fixiert) */
footer {
    position: fixed; /* Bleibt fixiert im Browserfenster */
    bottom: 0;       
    left: 0;         
    right: 0;        
    width: 100%;     
    
    /* Design */
    background-color: rgba(255, 255, 255, 0.80);
    color: #333;               
    padding: 5px 0 40px 0;           /* Innenabstand (ergibt zusammen mit height 75px Gesamthöhe) */
    text-align: center;        
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* Leichter Schatten nach oben */
    height: 30px;              /* Definierte Höhe des Inhaltsbereichs im Footer */
}

footer a {
    color: #007bff; /* Linkfarbe */
    text-decoration: none; /* Keine Unterstreichung */
}

.nur-pc {
    display: inline; 
}

/* 5. Media Query: Optimierung für Mobiltelefone (Bildschirmbreite kleiner als 600px) */
@media (max-width: 600px) {
    .inhalts-box {
        width: 90%; /* Box auf kleinen Bildschirmen breiter machen */
        padding: 10px; /* Etwas weniger Innenabstand */
        background-color: rgba(255, 255, 255, 0.80); /* Etwas weniger transparent */
        transform: translate(-50%, -50%) translateY(-50px); /* Verschiebt die Box 30px nach oben */
    }
    .logo {
        max-width: 200px; /* Das Logo wird auf maximal 200 Pixel Breite begrenzt (vorher 300px) */
    }
    

    h1 {
        font-size: 2rem; /* Schriftgröße für Überschriften verkleinern */
    }

    p {
        font-size: 1.2rem; /* Schriftgröße für Absätze verkleinern */
    }

    .footer-text {
        font-size: 18px; 
        text-align: center; 
    }
    
    /* Diese Regel verringert den Platz um den Text im Footer */
    footer {
        padding-top: 0px;    /* Weniger Platz oben */
        padding-bottom: 15px; /* Weniger Platz unten */
    }   

    /* Diese Regel versteckt Copyright, Telefon und Mail auf dem Handy */
    .nur-pc {
        display: none; 
    }
}

.mobile-break {
    display: none; /* Versteckt den Zeilenumbruch auf dem PC */
}

/* Spezielle Regeln nur für die "main" Inhalte (z.B. Impressum) */
main {
    max-width: 800px; /* Maximale Breite festlegen */
    margin: 20px auto; /* Zentriert den Inhalt horizontal und gibt vertikalen Abstand */
    padding: 0 20px; /* Innenabstand links und rechts, damit es nicht ganz am Rand klebt */
    background-color: #ffffff; /* Optional: Weißer Hintergrund für bessere Lesbarkeit */
    line-height: 1.6; /* Optional: Verbessert die Lesbarkeit des Textes */
    overflow-y: auto; 
    /* Optional: Mindesthöhe, damit der Footer korrekt positioniert ist, auch wenn der Text kurz ist */
    min-height: calc(100vh - 100px); /* Stellt sicher, dass main mindestens so hoch ist wie der Bildschirm minus Footerhöhe */
}