* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  /* Typography */
  body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    color: #333;
    background-color: #fafafa;
    
  }
  
  /* Navigation */
  .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffffda;
    padding: 1rem 2rem;
    border-bottom: 1px solid #ddd;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
  }
  
  .nav-links {
    list-style: none;
    display: flex;
    gap: 1rem;
  }
  
  .nav-links li a {
    text-decoration: none;
    color: #333;
    padding: 0.5rem;
    font-size: 1rem;
  }
  
  .nav-links li a.active,
  .nav-links li a:hover {
    color: #e86f28;
  }
  
  .brand-logo img {
    height: 40px;
    width: auto;
  }
  
  .navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  
  .has-background {
    background: url('../images/Backgrounds/blattblurr.png') no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
    min-height: 120vh;
  }
  

  /* HOME*/ 
  .hero {
    height: 90vh;
    background: url('../images/Backgrounds/blattsharp.jpg') center / cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
  
  .hero-content h1 {
    font-size: 3rem;
    color: #000;
    margin-bottom: 1rem;
  }
  
  .hero-content p {
    font-size: 1.2rem;
    color: #000;
    margin-bottom: 2rem;
  }
  
  .btn-primary {
    background-color: #e86f28;
    color: #fff;
    padding: 0.8rem 1.2rem;
    text-decoration: none;
    border-radius: 4px;
  }
  
  .btn-primary:hover {
    background-color: #c15211;
  }

  /* =========================================
   PROJEKT HERO SECTION (Sauber & Universell)
   ========================================= */

.hero-project {
  position: relative;
  width: 100%;
  height: 60vh; 
  /* Hintergrundbild wird jetzt direkt im HTML definiert! */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Das ist die dunkle Folie über dem Bild für bessere Lesbarkeit */
.hero-project-overlay {
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;
  /* 0.5 bedeutet 50% Abdunkelung. Ändere die Zahl für mehr/weniger Dunkelheit */
  background: rgba(0, 0, 0, 0.5); 
}

/* Der Textbereich, der auf der Folie liegt */
.hero-project-content {
  position: relative; /* Hebt den Text über das Overlay */
  color: #fff;
  max-width: 800px;
  padding: 1rem;
  text-shadow: 0 2px 5px rgba(0,0,0,0.8); /* Erzeugt den leichten Schatten hinter dem Text, wie in deinem Bild */
}

/* Typografie für die Projekt-Überschriften */
.hero-project-content h1 {
  font-size: 2.5rem; /* Groß und dominant für "Portfolio" */
  margin-bottom: 0.5rem;
  font-weight: bold;
}

.hero-project-content h3 {
  font-size: 1,3rem;
  margin-bottom: 0.2rem;
  font-weight: bold;
}

.hero-project-content p {
  font-size: 1rem;
  line-height: 1.6;
}
  
  /* PORTFOLIO GRID */
  .portfolio-section {
    padding: 2rem;
    text-align: center;
  }
  
  .portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
  }
  
  .portfolio-item {   
    width: 100%;
    height: 500px;
    position: relative;
    cursor:pointer;
    overflow: hidden;
  }
  
  .portfolio-item img {
    width: 100%;
    height: auto; 
    display: block;
    object-fit: cover;
    transition: transform 0.3s ease;
  }
  
  .portfolio-item:hover img {
    transform: scale(1.05);
  }
  
  .portfolio-overlay {
    position: absolute;
    bottom: 0;
    background: #c152119e;
    color: #fff;
    width: auto;
    padding: 1rem;
    transform: translateY(100%);
    transition: transform 0.3s ease;
  }
  
  .portfolio-item:hover .portfolio-overlay {
    transform: translateY(0);
  }
  */



/* PROJECTS */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
    color: #333;
    background-color: #fafafa;
}

/*  HERO SECTION  */
.hero-bmw {
  position: relative;
  width: 100%;
  height: 60vh; /* Adjust as desired */
  background: url('../images//Backgrounds/blatt\ sharp.jpg') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.hero-bmw-overlay {
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;
  background: rgba(0,0,0,0.3); /* dark overlay for text contrast */
}

.hero-bmw-content {
  position: relative; /* above the overlay */
  color: #fff;
  max-width: 800px;
  padding: 1rem;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7); /* optional for legibility */
}

.hero-bmw-content h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.hero-bmw-content p {
  font-size: 1.1rem;
  line-height: 1.6;
}

/*  TIMELINE  */
.timeline-bmw {
  width: 90%;
  max-width: 1200px;
  margin: 3rem auto;
  position: relative;
}

/* Left-side vertical line (timeline style). 
   If you want it centered, place it at left: 50%; transform: translateX(-50%). */
.timeline-bmw::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50px; 
  width: 2px;
  background: #ccc;
}



/* 1. Standard-Layout für Desktop (Text links, Bild rechts) */
.milestone {
  position: relative;
  margin: 4rem 0;
  padding-left: 80px; /* Platz für die Linie und den Punkt */
  display: flex;
  flex-direction: row; /* Elemente nebeneinander */
  align-items: center; /* Vertikal zentrieren */
  gap: 2rem;
}

/* 2. Umkehrung für Desktop (Bild links, Text rechts) */
.milestone.reverse {
  flex-direction: row-reverse; 
}

/* 3. Aussehen des Punktes auf der Zeitachse */
.milestone-dot {
  position: absolute;
  top: 45%; 
  left: 41px;
  width: 16px;
  height: 16px;
  background: #e86f28; /* Markenfarbe */
  border-radius: 30%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px #e86f2890;
}

/* 4. Spalten-Eigenschaften */
.text-column,
.image-column {
  flex: 1; /* Beide Spalten nehmen gleich viel Platz ein */
  min-width: 300px; /* Verhindert, dass die Spalten zu klein gequetscht werden */
}

.text-column h2 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.text-column p {
  margin-bottom: 1rem;
  line-height: 1.5;
}

.image-column img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  display: block;
}


/*  FINAL OUTCOME  */
.outcome {
  text-align: center;
  padding: 2rem;
}

.outcome h2 {
  margin-bottom: 1rem;
  font-size: 1.8rem;
}

.outcome p {
  max-width: 700px;
  margin: 0.5rem auto 2rem auto;
  line-height: 1.6;
}

.outcome img {
  width: 60%;
  max-width: 600px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* --- Konzept Sektion (Angepasst an Timeline Proportionen) --- */
.outcome.outcome-adhs {
  display: flex;
  align-items: center;
  gap: 2rem;             /* Gleicher Abstand zwischen Bild und Text wie in der Timeline */
  
  /* Übernimmt die Breite deines .timeline-bmw Containers */
  width: 90%;            
  max-width: 1200px;     
  margin: 3rem auto;     /* Zentriert die Sektion auf der Seite */
  
  flex-direction: row-reverse;
  padding: 0 2rem; 
  text-align: left;
}

/* Zwingt das Bild in der neuen Sektion, 100% der Spalte auszufüllen (wie in der Timeline) */
.outcome.outcome-adhs .image-column img {
  width: 100%;
  max-width: 100%;
  /* Stellt sicher, dass auch die Ecken und der Schatten exakt gleich aussehen */
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.video {
  position: fixed;  /* or absolute, if you prefer */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;  /* hide any overflow if the video is larger than the window */
  z-index: -1;       /* place it behind other elements */
}

.video-background video {
  width: 100%;
  height: 100%;
  object-fit: cover; 
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);/* crop/zoom so it fills the container without black bars */
}

.content {
  position: relative;
  z-index: 1; /* above the video */
  /* additional styling for your text/content */
}

/*  TIMELINE CONTAINER  */
.timeline {
  width: 90%;
  max-width: 1200px;
  margin: 3rem auto;
  position: relative;
}

/* Left-side vertical line (timeline style). 
centered, place it at left: 50%; transform: translateX(-50%). */
.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50px; 
  width: 2px;
  background: #ccc;
}

/* Each milestone is a row with a dot on the left & two columns for text/images */
.milestone {
  position: relative;
  margin: 4rem 0;
  padding-left: 80px; /* space for line & dot */
  display: flex;
  flex-wrap: wrap; /* columns stack on small screens */
  align-items: center;
  gap: 2rem;
}

.milestone-dot {
  position: absolute;
  top: 45%; /* vertical offset within the milestone */
  left: 43px; 
  width: 16px;
  height: 16px;
  background: #e86f28; /* brand color */
  border-radius: 30%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px #e86f2890;
}


.text-column,
.image-column {
  flex: 1; 
  min-width: 300px;
}


/* Reverse class flips the order of columns to alternate text/image layout */
.milestone.reverse {
  flex-direction: row-reverse;
}

.text-column h2 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}

.text-column p {
  margin-bottom: 1rem;
  line-height: 1.5;
}

.image-column img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/*  FINAL OUTCOME  */
.outcome {
  text-align: center;
  padding: 2rem;
}

.outcome h2 {
  margin-bottom: 1rem;
  font-size: 1.8rem;
}

.outcome p {
  max-width: 700px;
  margin: 0.5rem auto 2rem auto;
  line-height: 1.6;
}

.outcome img {
  width: 60%;
  max-width: 600px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* =========================================
   KARUSSELL SEKTION (Text oben, Karussell unten)
   ========================================= */

   .carousel-section {
    display: flex;
    flex-direction: column; /* Zwingt Text und Karussell UNTEREINANDER */
    align-items: flex-start; /* Linksbündig ausrichten */
    gap: 3rem; /* Schöner Abstand zwischen Text und Karussell */
    width: 90%;
    max-width: 1200px;
    margin: 4rem auto; /* Zentriert die Sektion auf der Seite */
  }
  
  .carousel-text {
    width: 100%;
    max-width: 800px; /* Begrenzt die Textbreite für bessere Lesbarkeit */
  }
  
  .carousel-text h2 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
  }
  
  .carousel-text p {
    line-height: 1.6;
    font-size: 1.1rem;
  }
  
  /* =========================================
     DEIN KARUSSELL CODE (Aufgeräumt)
     ========================================= */
  
  .carousel-outer {
    position: relative;
    width: 100%;
  }
  
  .carousel-container {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    overflow: hidden;
    /* Maske für den weichen Übergang an den Rändern */
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  }
  
  .carousel-wrapper {
    display: flex !important;
    flex-direction: row !important;
    gap: 1.5rem; /* Etwas mehr Abstand zwischen den Bildern */
    width: 100%;
    transition: transform 0.5s ease;
  }
  
  .carousel-wrapper img {
    flex: 0 0 30%;       
    max-width: 30%;      
    height: 350px; /* Höhe etwas angepasst, damit die Mockups besser wirken */
    object-fit: cover;   
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    display: block;
  }
  
  .carousel-btn {
    background: none;       
    border: none;
    color: #000;            
    font-size: 3rem; /* Pfeile etwas größer gemacht */
    cursor: pointer;
    position: absolute;
    z-index: 20;            
    top: 50%;
    transform: translateY(-50%);
    padding: 0 10px;
    transition: opacity 0.3s ease;
  }
  
  .carousel-btn:hover {
    opacity: 0.5;           
  }
  
  /* Pfeile weiter nach außen setzen, damit sie nicht über den Bildern liegen */
  .prev { left: -40px; }     
  .next { right: -40px; }

/*Body Timeline*/

body {
  font-family: sans-serif;
  background: #fdfdfd;
  color: #333;
  
}


.timeline {
  position: relative;
  width: 80%;
  /* horizontally center the timeline container */
  margin: 2rem auto;
  padding: 2rem 0;
}

/* Draw the center line using a pseudo-element */
.timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: #ccc; /* the vertical timeline line color */
  transform: translateX(-50%);
  z-index: 1;
}

/* ==== Timeline Items ==== */
.timeline-item {
  position: relative;
  width: 50%;
  padding: 3rem 0;
  display: flex;
  /* let the timeline-marker and timeline-card align side-by-side */
  align-items: center;
}



/* The marker (dot) on center line */
.timeline-marker {
  position: relative;
  z-index: 2; /* above the timeline line */
  width: 0;   /* we don't need extra space here */
  height: 0;
}

.timeline-dot {
  position: absolute;
  top: 0;
  left: 50%;
  right: 50%;
  width: 16px;
  height: 16px;
  background-color: #e86f28; /* Dot color */
  border-radius: 50%;
  transform: translate(-50%, 0);
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px #c15211; /* optional highlight */
}

/* The card (orange rectangle with rounded corners) */
.timeline-card {
  display: inline-block; 
  background: #e86e28a7;  /* orange color for the rectangle */
  border-radius: 12px;  /* rounded corners */
  color: #fff;          /* text color on orange */
  padding: 1rem;
  margin: 0 1rem;       /* space between the dot and the card */
  position: relative;
  z-index: 2;
  width: 400px;
  min-height: 300px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  transition: transform 0.8s ease, box-shadow 0.2s ease;
}

/* Hover effect (like a "playing card") */
.timeline-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

/* Card headings */
.timeline-card h3 {
  margin-bottom: 0.5rem;
}

/* Card images (optional: you can change sizing) */
.timeline-card img {
  max-width: 100%;
  border-radius: 8px;
  margin-bottom: 0.5rem;
}

/* ==== Left vs. Right items ==== */
.timeline-item.left {
  justify-content: flex-end; /* Card is on the LEFT side of the timeline line */
  text-align: right;
  
}

.timeline-item.right {
  margin-left: 50%;
  justify-content: flex-start; /* Card on the RIGHT side */
  text-align: left;
  /* The card is anchored to the right half of the container */
}


/* .timeline::before is at 50% from the left edge,
   so the line splits the container in half.  The .left items
   occupy the left 50%, .right items the right 50%. */



/* LIGHTBOX Overlay (Hidden by default) */
.lightbox-overlay {
  position: fixed;      /* stay in place */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8); /* half-transparent black */
  display: none;       /* hide until triggered */
  align-items: center;
  justify-content: center;
  z-index: 9999;        /* on top of everything */
}

/* Container for image + controls */
.lightbox-content {
  position: relative;
  width: 80%;
  max-width: 900px;
  margin: auto;
}

/* The displayed fullscreen image */
.lightbox-img {
  width: 100%;
  max-height: 80vh;     /* so it doesn't overflow vertical screen */
  object-fit: contain;  /* or cover, depending on your preference */
  display: block;
  margin: 0 auto;
}

/* Zwingt DIESEN einen Milestone, die Elemente untereinander statt nebeneinander zu zeigen */
.milestone.milestone-stacked {
  flex-direction: column !important;
  align-items: flex-start; 
}

/* Positioniert den orangenen Punkt auf Höhe der H2-Überschrift */
.milestone.milestone-stacked .milestone-dot {
  top: 25px !important; 
}

/* Gibt dem Text die volle Breite, damit er nicht eingequetscht aussieht */
.milestone.milestone-stacked .text-column {
  width: 100%;
  max-width: 800px; /* Begrenzt die Lesebreite ein wenig für bessere Optik */
  margin-bottom: 2rem; /* Schöner Abstand zum Karussell darunter */
}

/*FIXED X IN THE RIGHT CORNER*/
.lightbox-close {
  position: fixed;      /* instead of absolute */
  top: 20px;            /* or whatever spacing from the top you prefer */
  right: 30px;          /* spacing from the right edge */
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
  cursor: pointer;
  z-index: 10000;       /* ensure it's above other elements */
}

/* =========================================
   EINLEITUNG & KONZEPT (Ohne Timeline/Dot)
   ========================================= */

   .intro-block {
    display: flex;
    align-items: center;
    gap: 2rem;
    margin: 4rem auto;
    width: 90%;
    max-width: 1200px;
  }
  
  /* Spalten-Verhalten: Beide nehmen gleich viel Platz ein */
  .intro-block .text-column,
  .intro-block .image-column {
    flex: 1;
    min-width: 300px;
  }
  
  /* Bild-Styling (passend zu deinem restlichen Design) */
  .intro-block img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    display: block;
  }
  
  /* --- VARIANTEN --- */
  
  /* 1. Bild LINKS, Text RECHTS */
  .intro-block.reverse {
    flex-direction: row-reverse;
  }
  
  /* 2. ZENTRIERT (Bild oben, Text darunter - perfekt für "Concept") */
  .intro-block.centered {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
  
  .intro-block.centered .text-column {
    max-width: 800px; /* Begrenzt die Textbreite, damit er nicht über den ganzen Bildschirm geht */
    display: flex;
    justify-content: center;
  }
  
  /* Das Bild selbst begrenzen, damit es im Vollbild nicht riesig wird */
.intro-block.centered .image-column img {
  width: 100%;
  max-width: 800px; /* Verhindert, dass das Bild auf Desktop zu breit wird */
  margin: 0 auto;   /* Sichert die mittige Ausrichtung zusätzlich ab */
}

.intro-block.centered .text-column {
  width: 100%;
  max-width: 800px; /* Textbreite ebenfalls begrenzen für gute Lesbarkeit */
  margin-top: 2rem;
}

/* Navigation arrows */
.lightbox-prev,
.lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
  padding: 0.5rem;
  cursor: pointer;
  user-select: none; /* disable text selection on arrows */
}

.lightbox-prev { left: 0; }
.lightbox-next { right: 0; }


.lightbox-overlay.active {
  display: flex;  /* flex center the content */
}


.image-rotator {
    position: relative;
    width: 100%;      /* or a fixed width if needed */
    height: auto;     /* the container can adjust to content */
    overflow: hidden; /* ensure no overflow shows */
  }
  
  .image-rotator img {
    position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    transition: opacity 0.8s ease; /* fade transition */
    opacity: 0;                    /* by default, hidden */
  }
  

  /* Show/hide the image with .active */
  .image-rotator img.active {
    opacity: 1;
    position: relative; /* so the container's height adjusts to this image */
  }

  /* Container sorgt für den Rahmen und den Fade-Effekt */
.carousel-container {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Fade-Effekt */
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

/* WICHTIG: Das Flex-Display zwingt die Bilder in eine Reihe */
.carousel-wrapper {
  display: flex !important; /* !important überschreibt evtl. störende Regeln */
  flex-direction: row !important;
  gap: 1rem;
  width: 100%;
  transition: transform 0.5s ease;
}

/* Die Bilder zwingen wir in eine feste Größe */
.carousel-wrapper img {
  flex: 0 0 30%;       /* 30% Breite, damit immer ca. 3 Bilder zu sehen sind */
  max-width: 30%;      /* Verhindert, dass sie riesig werden */
  height: 250px;       /* Feste Höhe */
  object-fit: cover;   /* Schneidet sie passend zu */
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  display: block;
}

.carousel-btn {
  background: none;       /* Kein Hintergrund mehr */
  border: none;
  color: #000;            /* Schwarze Pfeile */
  font-size: 2rem;        /* Größe der Pfeile */
  cursor: pointer;
  position: absolute;
  z-index: 20;            /* Muss höher sein als der Fade-Effekt */
  top: 50%;
  transform: translateY(-50%);
  padding: 0 10px;
  transition: opacity 0.3s ease;
}

.carousel-btn:hover {
  opacity: 0.5;           /* Leichter Hover-Effekt */
}

.prev { left: -5px; }     /* Etwas außerhalb des Fades platzieren */
.next { right: -5px; }

.carousel-outer {
  position: relative;
  width: 100%;
}

.carousel-container {
  /* Die Maske bleibt hier, aber die Buttons sind jetzt draußen und bleiben scharf! */
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  overflow: hidden;
}

  
  /*BUTTON FROM ABOUT TO CONTACT*/
  .btn-primary {
    background-color: #e86f28; /* or your brand color */
    color: #fff;
    padding: 0.8rem 1.2rem;
    text-decoration: none;
    border-radius: 4px;
    display: inline-block; /* ensures padding and hover work nicely */
    transition: background-color 0.3s ease;
  }
  
  .btn-primary:hover {
    background-color: #c15211; /* a darker shade for hover effect */
  }
  
  .about-cta {
    text-align: center;      /* center the text and button */
    margin: 2rem auto;       /* some vertical spacing */
    max-width: 600px;        /* optionally limit width for nice layout */
    padding: 1rem;
  }
  
  .about-cta p {
    margin-bottom: 1rem;
    font-size: 1rem;
    line-height: 1.6;
  }


  /* CONTACT */
  .contact-section {
    padding: 2rem;
    text-align: center;
    line-height: 1.6;
    margin-bottom: 1rem;
    font-size: 1rem;
  }
  
  .contact-form {
    max-width: 600px;
    margin: 1rem auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  
  .contact-form input,
  .contact-form textarea {
    padding: 0.8rem;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  
  .contact-info p {
    margin-top: 2rem;
  }


.imprint-section {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
}

.imprint-section h1,
.imprint-section h2,
.imprint-section h3 {
  margin-bottom: 1rem;
}

.imprint-section p {
  margin-bottom: 1rem;
}


.imprint-section ul,
.imprint-section ol {
  padding-left: 1.2rem;
  margin-bottom: 1rem;
}

.privacy-section {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  font-size: 1rem;
  line-height: 1.6;
  color: #333;
}

.privacy-section h1,
.privacy-section h2,
.privacy-section h3 {
  margin-bottom: 1rem;
}

.privacy-section p {
  margin-bottom: 1rem;
}

.privacy-section ul,
.privacy-section ol {
  padding-left: 1.2rem;
  margin-bottom: 1rem;
}

  
  /* Footer */
  footer {
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #ffffffda;
    border-top: 1px solid #ddd;
    text-align: center;
    padding: 0.5rem;
    z-index: 999; /* Ensures the footer is on top of other elements if needed */
  }
  
  .footer-nav a {
    color: #c15211;
    text-decoration: none;
    margin: 0 0.5rem;
  }
  
  .footer-nav a:hover {
    color: #e86f28;
  }


  
  
/* ==========  MEDIA QUERIES ========== */



/* ========== MOBILE FIRST (Default) < 768px ========== */

@media (min-width:320px) and ( max-width: 768px) {
/* Navigation */
.navbar {
  padding: 1rem;
  position: relative;
  flex-wrap: wrap;
}

.brand-logo img {
  height: 35px;
}

/* Burger Menu */

/* Mobile First Styles (applies to screens < 768px) */
.burger-menu {
  display: block;
  cursor: pointer;
  padding: 0.5rem;
  z-index: 1001;
  background: none;
  border: none;
  position: absolute;
  right: 1rem;
  top: 1rem;
}

.burger-menu span {
  display: block;
  width: 25px;
  height: 3px;
  background-color: #333;
  margin: 5px 0;
  transition: all 0.3s ease;
}

/* Mobile Navigation Panel */
.nav-links {
  position: fixed;
  top: 0;
  right: -100%;
  width: 100%;
  height: 100vh;
  background-color: #fffffffa;
  padding-top: 80px;
  flex-direction: column;
  align-items: center;
  transition: right 0.3s ease;
  z-index: 999;
}

.nav-links.active {
  right: 0;
}

/* Burger Menu Animation */
.burger-menu.active span:nth-child(1) {
  transform: rotate(-45deg) translate(-5px, 6px);
}

.burger-menu.active span:nth-child(2) {
  opacity: 0;
}

.burger-menu.active span:nth-child(3) {
  transform: rotate(45deg) translate(-5px, -6px);
}

/* Tablet/Desktop Hide Burger (applies to screens ≥ 768px) */
@media (min-width: 768px) {
  .burger-menu {
    display: none;
  }
  
  .nav-links {
    position: static;
    height: auto;
    flex-direction: row;
    background: transparent;
    padding: 0;
    width: auto;
  }
}

/* Hero Sections */
.hero, 
.hero-bmw {
  height: 70vh;
  background-attachment: scroll !important;
}

.hero-content h1 {
  font-size: 2rem;
}

/* Portfolio Grid */
.portfolio-grid {
  grid-template-columns: 1fr;
}

.portfolio-item {
  height: 300px;
}

}
/* =========================================
   MOBILE TIMELINE STACK (Aufgeräumt & Korrigiert)
   ========================================= */
   @media (max-width: 768px) {
  
    /* 1. Die Linie weiter nach links an den Rand schieben */
    .timeline-bmw::before {
      left: 20px !important; 
    }
  
    /* 2. Den gesamten Container anpassen */
    .milestone,
    .milestone.reverse {
      flex-direction: column !important; /* Alles untereinander */
      align-items: flex-start !important;
      padding-left: 50px !important; /* Weniger Abstand links, da die Linie jetzt bei 20px ist */
      margin: 3rem 0 !important;
    }
   
    /* 3. Den Punkt exakt auf die Linie und auf Höhe der H2 setzen */
    .milestone-dot {
      left: 13px !important; 
      top: 5px !important; 
      transform: none !important;
    }
  
    /* Spezielle Anpassung für deinen Karussell-Milestone auf dem Handy */
    .milestone.milestone-stacked .milestone-dot {
      top: 5px !important; 
    }
  
    /* 4. Spalten auf volle Breite ziehen */
    .text-column, 
    .image-column {
      width: 100% !important;
      max-width: 100% !important;
      min-width: unset !important; /* Hebt die Desktop-Einschränkung auf */
      padding: 0 !important;
      margin-bottom: 1.5rem;
    }
  
    /* 5. Abstand zwischen Bild und dem nächsten Text */
    .image-column img {
      margin-top: 1rem;
    }
  }