@media all and (min-width: 800px) {
  /* Fixiertes Menü oben */


  
.menue {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  
  display: flex;
  font-family: 'Suisse intl', sans-serif;
  font-weight: 300; /* Medium */
  font-size: 12px;
}

.referenzen-mobile {
  display: none;
}
.mobile-menu__dropdown {
  display: none;
}

/* Box-sizing einheitlich */
* {
  box-sizing: border-box;
}


/* Sprachbutton rechts oben */
.mobile-language-toggle {
  display: none;
}


/* EN/DE Button */
.menue__punkt {
  width: 20%;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* linksbündig in seiner Spalte */
  order: 4; /* ← DAS ist entscheidend */

}

.menue__menue-punkt--menue1 {
  width: 40%;
  order: 1;
}

.menubalken {
  width: 20%;
  order: 2;
}

.menue__punkt {
  width: 20%;
  order: 3; /* wenn er die 4. visuelle Spalte sein soll */
}

.menue__menue-punkt--me1 {
  width: 20%;
  order: 4;
}



/* Menüleiste: alle Blöcke nebeneinander, gleiche Höhe */
.menue__menue {
  display: flex;
  width: 100%;
  align-items: stretch; /* gleiche Höhe */
  
}

/* Alle Menüblöcke: Basis */
.menue__menue > div {
  
  align-items: center;
  padding-top: 10px;
  padding-bottom: 10px;
  box-sizing: border-box;
  
  
}


.menue__menue1 { display: grid; grid-template-columns: repeat(5, 1fr); width: 100%; align-items: center; } /* Alle Menüblöcke: Basis */ .menue__menue1 > div { display: flex; align-items: center; padding-top: 10px; padding-bottom: 10px; box-sizing: border-box; }



/* linker Block: Menüpunkte */
.menue__menue-punkt--menue1 {
  width: 40%;
  display: flex;
  align-items: center;
   padding-left: 0; /* Block selbst bleibt bündig */
}

/* Innenlinks jetzt 10px links */
.menue__menue-punkt--menue1 a:first-child {
  margin-left: 10px; /* nur der erste Link bekommt links Abstand */
  
}





/* Innenlinks jetzt 10px links */
.menue__menue-punkt1--menue1 a:first-child {
  margin-left: 10px; /* nur der erste Link bekommt links Abstand */
  
}


/* linker Block: Menüpunkte */
.zurueck {
  width: 40%;
  display: flex;
  align-items: center;
   padding-left: 0; /* Block selbst bleibt bündig */
   text-decoration: none;
  
}

/* Innenlinks jetzt 10px links */
.zurueck a:first-child {
  margin-left: 10px; /* nur der erste Link bekommt links Abstand */
    font-family: 'Suisse intl', sans-serif;
  font-weight: 300; /* Medium */
  font-size: 12px;
  color: #9a9a9a;
  text-decoration: none;
}






/* Menüpunkte links: Punkte + Text nebeneinander */
.menue__menue-punkt--menue1 a {
  color: #000;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;          /* Abstand Punkt ↔ Text */
  margin-right: 16px; /* Abstand zwischen den Wörtern */
  font-family: 'Suisse Intl', sans-serif; /* Light Font wie oben */
  font-weight: 300; /* Medium */
  font-size: 12px;

}

/* Kreis vor Wort */
.menue__menue-punkt--menue1 a::before {
  content: "";
  width: 7px;
  height: 7px;
  border: 0.5px solid #000;
  border-radius: 50%;
}

/* Kreis aktiv */
.menue__menue-punkt--menue1 a.active::before {
  background: #000;
}


/* Mitte: Projekttitel */
.menubalken {
  width: 20%;
  padding-left: 0;   /* links bündig */
  padding-right: 10px;
  pointer-events: none;
  display: flex;
  align-items: center;
  font-family: 'Suisse Intl', sans-serif; /* Light Font wie oben */
  font-weight: 300; /* Medium */
  font-size: 12px;
}




.menubalken #projekttitel {
  opacity: 0;
  transition: opacity 0.3s ease;
}



.projekte-liste-mobile {
    display: none;
}

/* Rechts: jE Architektur */
.menue__menue-punkt--me1 {
  width: 20%;
  text-align: right;
  margin-right: 5px;   /* links bündig */
  padding-right: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-family: 'Suisse Intl', sans-serif; /* Light Font wie oben */
  font-weight: 300; /* Medium */
}


.menue__menue-punkt--me1 a {
  color: #000;
  text-decoration: none;
  font-family: 'Suisse', sans-serif;
  font-weight: 300;
  font-size: 12px;
  font-family: 'Suisse Intl', sans-serif; /* Light Font wie oben */
  
}


.mobile-menu {
  display: none !important;
}
/* Smartphone Menü verstecken */
.smartphone__menue__menue,
.projektbilder_uebersicht-smart {
  display: none;
}
.smartphone__menue {
   display: none;
}


/* Schrägstrich / zwischen EN und DE */
.menue__menue-punkt--schregstrich {
  padding: 3px 5px;
}



/* Standard: Mobile sichtbar */
.mobile-menu {
  display: none;


  
}
.projektbilder_uebersicht-mobile {
  display: none;
}
.layer-top-mobile {
  display: none;
}

  
    

    :root {
    --menu-height: -1px;
}
#layer-top {
    display: flex;
    align-items: center;

    height: calc(100vh - var(--menu-height));
    margin-top: var(--menu-height);
}
    
  .projektbilder_uebersicht {
    display: flex;
    flex-direction: row;
gap: 3px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    align-items: center;
        scroll-padding-left: 3px;
padding: 3px;
    /* 🔥 Scrollbar verstecken */
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* IE / Edge alt */

      scroll-snap-type: x mandatory; /* ← HIER */
  scroll-behavior: smooth;
}
.projektbilder_uebersicht::-webkit-scrollbar {
    display: none;                  /* Chrome, Safari */
}
    
    .stage-smart {
        display: none;
    }
    .projektbilder__overlay {
    pointer-events: none;
}
    .projektbilder__bild {
    display: block;   /* 🔥 wichtig */
    width: 250px;
    overflow: hidden;
    
    transform-origin: center center;
    transition: width 0.3s ease; /* 🔥 EINHEITLICH */

     opacity: 1;
     
    transition: width 0.3s ease, opacity 0.4s ease;

      scroll-snap-align: start; /* ← HIER */
  transition: width 0.3s ease, opacity 0.4s ease;
  opacity: 1;

    
}
 /* Wenn ein Bild aktiv ist, alle Bilder leicht transparent */
.projektbilder_uebersicht.has-active .projektbilder__bild {
    opacity: 0.35; /* die "anderen" werden transparent */
}

/* Das aktive Bild bleibt klar */
.projektbilder_uebersicht.has-active .projektbilder__bild.active {
    opacity: 1;
}

.projektbilder__bild.active {
    width: 600px;
     opacity: 1;
}
    





.projekte-liste {
    font-family: 'Suisse Intl', sans-serif;
    font-weight: 300; /* Light */
    font-size: 12px;
    color: #9a9a9a; /* hellgrau */
    width: 100%;      /* volle Breite */
    max-width: 100%;  /* kein Limit mehr */
    margin: 0;        /* kein zentrieren mehr */
    padding: 0 10px;  /* optional: minimaler Innenabstand */
    box-sizing: border-box; /* sorgt dafür, dass padding nicht die Breite überschreitet */
}

.projekte-header,
.projekt-row {
    display: grid;
    grid-template-columns: 20% 20% 20% 20% 20%;
    
    align-items: center;
}

.projekte-header > div,
.projekt-row > div {
   
    
    box-sizing: border-box;
}
/* Kopfzeile nicht fett, kein extra Style */
.projekte-header {
    font-weight: 300; /* normal, nicht fett */
    padding-bottom: 20px;
}


/* Jede Projektzeile */
.projekt-row {
    cursor: pointer;
    transition: background 0.2s ease;
}

.projekt-row:hover {
    background: rgba(0, 0, 0, 0.05);
}

.projekt-bilder {
    display: flex;
    flex-wrap: wrap;          /* 🔥 erlaubt mehrere Reihen */
    gap: 3px;                 /* etwas mehr Luft */
    overflow: hidden;         /* kein Scrollen mehr */
    margin-bottom: 10px;
    opacity: 0;
    max-height: 0;
    transition: opacity 0.8s ease;
}



.projekt-bilder img {
    height: 180px;    /* 🔥 größer */
    width: auto;      /* Proportionen bleiben korrekt */
    display: block;
    
}

.projekt-item.active .projekt-bilder {
    opacity: 1;
    max-height: 350px; /* 🔥 genug für 2 Reihen */
   
   
}

/* Standard-Schriftfarbe */
.projekt-row {
    cursor: pointer;
    transition: color 0.2s ease; /* nur Farbe animieren */
    color: #888; /* hellgrau standard */
    background: none; /* Hintergrund bleibt transparent */
}

/* Hover – nur Schrift schwarz */
.projekt-row:hover {
    color: #000; /* schwarz beim Hover */
    
}

/* Aktives Projekt – Schrift schwarz, auch nach Klick */
.projekt-item.active .projekt-row {
    color: #000; /* dauerhaft schwarz */
    
}
@font-face {
    font-family: 'Suisse Intl';
    src: url('../fonts/SuisseIntl-Light.woff') format('woff');
    font-weight: 300; /* Light */
    font-style: normal;
}



.unternehmen-info {
    width: 80%;         /* volle Breite */
    margin-top: 200px;
    margin-left: 10px;
    box-sizing: border-box;
    font-family: 'Suisse Intl', sans-serif; /* Light Font wie oben */
   font-family: 'Suisse Intl', sans-serif;
    font-weight: 300; /* Light */
    font-size: 15px;
    color: #000000;          /* hellgrau wie Liste */
    line-height: 1.5em;   /* angenehmes Lesen */
}

.unternehmen-info .info-block {
    margin-bottom: 30px;  /* Abstand zwischen den drei Textblöcken */
}

.unternehmen-info h3 {
     font-family: 'Suisse Intl', sans-serif;
    font-weight: 300; /* Light */
    font-size: 20px;
    margin-bottom: 5px;    /* Abstand zu Text */
    color: #000;           /* Überschrift schwarz */
}

.unternehmen-info p {
    margin: 0;             /* kein extra Abstand, nur Zeilenhöhe */
     font-family: 'Suisse Intl', sans-serif;
    font-weight: 300; /* Light */
    font-size: 20px;
}


.projekt-kanton {
    display: grid;
    grid-template-columns: 1fr auto; /* Text nimmt alles, Pfeil nur so groß wie nötig */
    align-items: center;
    column-gap: 12px;
    min-width: 0; /* Text darf schrumpfen */
}
.kanton-text {
    overflow: hidden;
    text-overflow: ellipsis; /* … */
    white-space: nowrap;
}
/* Pfeil: feste Zone */
.projekt-link {
    justify-self: end;
    opacity: 0;
    transform: translateX(-6px);
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.projekt-item.active .projekt-link {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.projekt-link img {
    max-width: 100px;  /* Schrumpft automatisch bei kleiner Breite */
    width: 100%;
    height: auto;
    display: block;
}


.team-reihe {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 4 Spalten */
    gap: 3px; /* etwas mehr Abstand */
    width: 100%; /* volle Breite */
    margin: 0;
    padding: 0 10px;
    box-sizing: border-box;
    margin-top: 200px;
    row-gap: 30px;
}

.team-item {
    display: flex;
    flex-direction: column; /* Bild oben, Text darunter */
    width: 100%;
}

.team-item img {
    width: 100%;
    aspect-ratio: 4 / 5;   /* nur das Bild, nicht die ganze Box */
    object-fit: cover;     /* Bild füllt Box */
    display: block;
}

.team-info {
    text-align: left; /* linksbündig */
    font-family: 'Suisse Intl', sans-serif;
    font-weight: 300;
    font-size: 12px;
    line-height: 1.3em;
    color: #000;
    margin-top: 8px; /* Abstand Bild -> Text */
}


.email-link {
    font-family: 'Suisse Intl', sans-serif;
    font-weight: 300;   /* Light */
    font-size: 12px;
    color: #000000;     /* schwarz */
    text-decoration: none;  /* kein Unterstrich */
}

.email-link:hover {
    color: #9a9a9a; /* hellgrau */    /* optional: Farbe beim Hover gleich lassen */
    text-decoration: none; 
}


.grossbild-reihe {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    margin-top: 200px;
    align-items: end;
    margin-bottom: 50px;
}

.grossbild-item {
    grid-column: span 2;
    aspect-ratio: 4 / 5;
    cursor: pointer; /* klickbar */
}


.mittelbild-item {
    grid-column: 3 / 6; /* gleiche Startposition wie kleinbild */
    grid-row: 2;        /* zweite Reihe */
   
    position: relative;
    cursor: pointer;
}
.mittelbild-item .karussell-counter {
    position: absolute;
    bottom: 2px;          /* statt 0 → leicht nach oben */
    right: 100%;
    margin-right: 10px;
    display: flex;
    flex-direction: column;
    font-family: 'Suisse Intl', sans-serif;
    font-weight: 300;
    font-size: 12px;
    color: #000;
    text-align: right;
    
}

.mittelbild-item {
    position: relative;
     margin-bottom: 50px;
}

.mittelbild-item .bild-caption {
    position: absolute;
    bottom: -22px;   /* unter dem Bild */
    left: 0;
    font-family: 'Suisse Intl', sans-serif;
    font-weight: 300;
    font-size: 12px;
    color: #000;
    
}

.kleinbild-item {
    grid-column: 5 / 6;
    aspect-ratio: 4 / 5;
    cursor: pointer; /* klickbar */
}

.grossbild-item img,
.kleinbild-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.grossbild-item,
.kleinbild-item {
  cursor: pointer;
}

.grossbild-reihe {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
    margin-bottom: 50px;
    align-items: end;
    margin-top: 200px;
    overflow: visible; /* wichtig für Counter außerhalb der Spalte */
}

.grossbild-item,
.kleinbild-item {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: visible;
}

/* Counter für Großes Bild – rechts daneben */
.grossbild-item .karussell-counter {
    position: absolute;
    bottom: 0;
    left: 100%;      /* rechts neben dem Bild */
    margin-left: 10px; 
    display: flex;
    flex-direction: column;
    font-family: 'Suisse Intl', sans-serif;
    font-weight: 300;
    font-size: 12px;
    color: #000;
    text-align: left;
}

/* Counter für Kleines Bild – links daneben */
.kleinbild-item .karussell-counter {
    position: absolute;
    bottom: 0;
    right: 100%;     /* links neben dem Bild */
    left: auto;      /* überschreibt left: 100% */
    margin-right: 10px; 
    display: flex;
    flex-direction: column;
    font-family: 'Suisse Intl', sans-serif;
    font-weight: 300;
    font-size: 12px;
    color: #000;
    text-align: right; /* Text rechtsbündig zum Bild hin */
}


.kontaktbereich-wrapper {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 5-Spalten Grid */
  gap: 10px;
  margin-top: 200px;
  align-items: start;
}


/* Kontaktinfos links über 3 Spalten */
.kontakt-info {
  grid-column: 1 / 4;
  font-family: 'Suisse Intl', sans-serif;
  font-weight: 300;
  font-size: 12px;
  line-height: 1.3;
  color: #000;
  padding-left: 10px;
}


.kontakt-info p {
  margin-bottom: 15px; /* kompakter Abstand zwischen Absätzen */
  font-weight: 300;
}

.kontakt-info a {
  color: #000; /* Links schwarz */
  text-decoration: none; /* keine Unterstreichung */
  font-weight: 300;
}

.kontakt-info a:hover {
color: #9a9a9a; /* hellgrau */
  text-decoration: none; /* keine Unterstreichung */
  transition: color 0.2s ease; /* sanfter Farbwechsel beim Hover */
}

.social-links {
  margin-top: 10px; /* Abstand zum vorherigen Abschnitt */
  display: flex;
  flex-direction: column; /* untereinander */
  
  font-weight: 300;
}

.social-links a {
  font-weight: 300;
}






.kontakt-map {
  grid-column: 4 / 6;  /* Spalten 4 + 5 */
  aspect-ratio: 1 / 1; /* Quadrat */
  padding-right: 10px;
  box-sizing: border-box;
}

.kontakt-map a {
  display: block;
  width: 100%;
  height: 100%;
}

.kontakt-map img {
  width: 100%;
  height: 100%;
  object-fit: cover;     /* sauber gefüllt */
  display: block;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

/* optionaler Hover-Effekt */
.kontakt-map img:hover {
  opacity: 0.85;
}




/* Separates Logo rechts unter der Karte */
.kontakt-logo-separat {
  margin-top: 50px;
  display: flex;
  justify-content: flex-end; /* rechts ausrichten */
  padding-right: 10px;       /* Abstand vom Rand */
  padding-bottom: 10px;
}

.kontakt-logo-separat img {
  max-width: 400px; /* Größe selbst anpassen */
  height: auto;
}

.footer-text {
  font-family: 'Suisse Intl', sans-serif;
  font-weight: 300;
  font-size: 12px;
  color: #000;
  text-align: right;      /* rechts ausrichten */
  margin-top: -15px;
  padding-bottom: 10px;   /* Abstand nach unten */
   padding-right: 20px;       /* Abstand vom Rand */
}
html {
  scroll-behavior: smooth;
}

section {
  scroll-margin-top: 80px; /* Höhe deines Menüs */
}



.horizontal-galerie-wrapper {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}


.horizontal-galerie {
  position: fixed;
  overscroll-behavior: none;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  gap: 3px;
  padding: 3px;
  overflow-x: auto;
  overflow-y: hidden;

  align-items: flex-end; /* Bilder unten ausrichten */

    scroll-snap-type: x mandatory; /* ← DAS ist der Magnet */
  scroll-behavior: smooth;       /* optional, aber schön */
  scroll-padding-left: 3px;
  
}

.horizontal-galerie img {
  height: 400px;          /* gleiche Höhe für alle */
  width: auto;           /* Breite proportional */
  cursor: cell;
  transition: all 0.3s ease;
  flex-shrink: 0;        /* verhindert Schrumpfen */
  pointer-events: auto;
  object-fit: contain;   /* wichtig, dass Seitenverhältnis bleibt */

   scroll-snap-align: start; /* ← Bild dockt links an */
}

.horizontal-galerie img.active {
  height: 700px;         /* beim Klick vergrößert */
  width: auto;           /* proportional */
 
}


.projekt-text-mobile,
.projekt-info-mobile {
    display: none;
}

.zurueck {
  grid-column: 1;
  display: flex;
  align-items: center;
}

.zurueck a {
  margin-left: 10px;
  font-family: 'Suisse Intl', sans-serif;
  font-size: 12px;
  color: #9a9a9a;
  text-decoration: none;
}

.zurueck2 {
  grid-column: 1;
  display: flex;
  align-items: center;
}

.zurueck2 a {
  margin-left: 10px;
  font-family: 'Suisse Intl', sans-serif;
  font-size: 12px;
   color: #000000;
  text-decoration: none;
  font-weight: 300;
}


.projekt-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  width: 100%;

}

.projekt-grid2 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  width: 100%;

}

.projekt-info {
  grid-column: 2;
  font-family: 'Suisse Intl', sans-serif;
  font-size: 12px;
  color: #9a9a9a;
  font-weight: 300;
  margin-top: -23px;
}

.projekt-info2 {
  grid-column: 1;
  font-family: 'Suisse Intl', sans-serif;
  font-size: 20px;
  color: #8e8e8e;
  padding-left: 10px;
  
}
.projekt-text {
  grid-column: 3 / 6; /* 3–5 */
  font-family: 'Suisse Intl', sans-serif;
  font-size: 12px;
  line-height: 1.4;
  color: #9a9a9a;
font-weight: 300;
  padding-right: 10px;
  margin-top: -24px;
}

.projekt-text2 {
  grid-column: 2 / 6; /* 3–5 */
 font-family: 'Suisse Intl', sans-serif;
        font-weight: 300;
        font-size: 20px;
  
  
  color: #8e8e8e;
  padding-right: 10px;
  
}

/* Absätze innerhalb der Info-Spalte */
.projekt-info p {
  margin: 0 0 10px 0; /* Abstand nach unten zwischen den Absätzen */
  font-weight: 300;
}


/* Absätze innerhalb der Info-Spalte */
.projekt-text p {
  margin: 0 0 10px 0; /* Abstand nach unten zwischen den Absätzen */
  font-weight: 300;
}
/* Absätze innerhalb der Info-Spalte */
.projekt-text2 p {
  margin: 0 0 10px 0; /* Abstand nach unten zwischen den Absätzen */
  font-weight: 300;
}

/* Absätze innerhalb der Info-Spalte */
.projekt-info2 p {
  margin: 0 0 10px 0; /* Abstand nach unten zwischen den Absätzen */
  font-weight: 300;
}


.horizontal-galerie img,
.map-item img {
  height: 400px;
  width: auto;
  object-fit: contain;
  cursor: pointer;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.horizontal-galerie img.active,
.map-item img.active {
  height: 700px;
  width: auto;
  object-fit: contain;
  z-index: 1100;
}
}


  
  
 .projekt-item.highlight-from-top {
  background-color: rgba(236, 236, 232, 0.642); /* oder was du genau willst */
  
}
   

    
    
.pdf-link {
  margin-top: 1em; /* Abstand nach oben wie zwischen Absätzen */
  margin-bottom: 1em; /* optional, falls du Abstand nach unten willst */
  font-weight: bold;
}

.pdf-link a {
  text-decoration: none;
  color: inherit;
}