/*
 * Lokale Schriftarten-Definitionen (Self-Hosted - nur .woff2 für moderne Browser)
 */

/* roboto-regular - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('../fonts/roboto-v26-latin-regular.woff2') format('woff2'); /* Nur .woff2 für moderne Browser */
}
/* roboto-700 - latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('../fonts/roboto-v26-latin-700.woff2') format('woff2'); /* Nur .woff2 für moderne Browser */
}

/* montserrat-regular - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url('../fonts/montserrat-v26-latin-regular.woff2') format('woff2'); /* Nur .woff2 für moderne Browser */
}
/* montserrat-700 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url('../fonts/montserrat-v26-latin-700.woff2') format('woff2'); /* Nur .woff2 für moderne Browser */
}

/* Der restliche Inhalt Ihrer style.css bleibt unverändert... */

/* Globale Stile und Typografie */
body {
    font-family: 'Roboto', sans-serif;
    background-color: #f8f9fa; /* Leicht grauer Hintergrund */
    color: #343a40; /* Dunklerer Text für besseren Kontrast */
}

h1, h2, h3, h4, h5, h6, .navbar-brand {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700; /* Fett für alle Überschriften */
}

/* Navbar Anpassungen */
.navbar-brand {
    font-size: 1.5rem;
}

.navbar-brand span {
    font-weight: 700; /* "METALLTECHNIK" in fett */
}

/* Hero-Sektion auf der Startseite */
.hero-section {
    background-color: #e9ecef; /* Etwas dunkler als der Body */
    padding: 6rem 0;
    text-align: center;
}

.hero-section h1 {
    font-size: 3.5rem;
    font-weight: 700;
}

.hero-section .lead {
    font-size: 1.25rem;
}

/* Allgemeine Sektionen mit Innenabstand */
.section-padding {
    padding: 4rem 0;
}

/* Anpassung der Kontakt-Icons im Footer */
footer .fas {
    width: 20px; /* Sorgt für eine saubere Ausrichtung */
}

/* Stile für interaktive Videokarten auf der Leistungsseite */
.video-card {
    cursor: pointer;
}

/* Stile für interaktive Videokarten auf der Leistungsseite */
.video-card {
    position: relative; /* Wichtig für die Positionierung des Videos */
    cursor: pointer;
    overflow: hidden; /* Verhindert, dass Elemente über den Kartenrand hinausragen */
}

.card-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain; /* NEU: Stellt sicher, dass das ganze Video sichtbar ist */
    background-color: #000; /* NEU: Fügt einen schwarzen Hintergrund für "Letterboxing" hinzu */
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

/* Wenn man über die Karte fährt, wird das Video sichtbar */
.video-card:hover .card-video-overlay {
    opacity: 1;
}

/*
 * Stile für die Zeitleiste auf der "Über uns"-Seite
 */
.timeline {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

/* Die vertikale Linie der Zeitleiste */
.timeline::before {
    content: '';
    position: absolute;
    width: 2px;
    background-color: #dee2e6; /* Helles Bootstrap-Grau */
    top: 0;
    bottom: 0;
    left: 20px; /* Position der Linie */
}

/* Container für jeden einzelnen Eintrag in der Zeitleiste */
.timeline-item {
    position: relative;
    margin-bottom: 50px;
}

/* Der Punkt auf der vertikalen Linie */
.timeline-dot {
    position: absolute;
    left: 13px; /* Zentriert den Punkt auf der Linie */
    top: 5px;
    width: 15px;
    height: 15px;
    background-color: #0d6efd; /* Bootstrap-Primärfarbe (Blau) */
    border-radius: 50%;
    z-index: 1;
}

/* Der eigentliche Inhalt neben der Linie */
.timeline-content {
    padding-left: 30px; /* Abstand zur Linie */
}

.timeline-content h4 {
    color: #0d6efd; /* Blau für das Jahr zur Hervorhebung */
    margin-bottom: 0.5rem;
}