/* ANGEBOT section: uniform image height via archive class (arc_26=DE, arc_33=EN, arc_38=FR) */
.layout_latest.arc_26 .image_container,
.layout_latest.arc_33 .image_container,
.layout_latest.arc_38 .image_container {
  overflow: hidden;
  height: 242px;
}
.layout_latest.arc_26 .image_container img,
.layout_latest.arc_33 .image_container img,
.layout_latest.arc_38 .image_container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Homepage TEAM section: only show 3 items */
body.home .mod_newslist.team .layout_latest:nth-child(n+4) { display: none; }

/* ANGEBOT cards: spacing around image and CTA link */
.layout_latest.arc_26 .image_container,
.layout_latest.arc_33 .image_container,
.layout_latest.arc_38 .image_container {
  margin-bottom: 12px;
}
.layout_latest.arc_26 > a,
.layout_latest.arc_33 > a,
.layout_latest.arc_38 > a {
  display: block;
  margin-top: 12px;
}
/* Row gap between grid rows */
.layout_latest.arc_26,
.layout_latest.arc_33,
.layout_latest.arc_38 {
  padding-bottom: 24px;
}

/* Load-more button */
.se-more-btn {
  display: block;
  margin: 20px auto 10px;
  padding: 10px 24px;
  background: transparent;
  border: 2px solid #b81f24;
  color: #b81f24;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  letter-spacing: 0.04em;
}
.se-more-btn:hover {
  background: #b81f24;
  color: #fff;
}

/* Publikationen: headings above their section (override the staggered default grid).
   Original CSS puts :nth-child(2) in row 1 col 1 (newslist) and :nth-child(3) in row 2 col 1 (heading).
   We swap the row assignments so h2 → row 1, newslist → row 2 for each column. */
body.publikationen #main .mod_article > :nth-child(1) { grid-area: 1 / 1; }
body.publikationen #main .mod_article > :nth-child(2) { grid-area: 2 / 1; }
body.publikationen #main .mod_article > :nth-child(3) { grid-area: 1 / 2; }
body.publikationen #main .mod_article > :nth-child(4) { grid-area: 2 / 2; }
body.publikationen #main .mod_article > :nth-child(5) { grid-area: 1 / 3; }
body.publikationen #main .mod_article > :nth-child(6) { grid-area: 2 / 3; }

/* Projekte page: hide server-side pagination (replaced by JS load-more button) */
.pagination { display: none; }

/* TEAM: einheitliches Bildformat (3:2), unabhaengig vom Seitenverhaeltnis des Originals.
   arc_2 = DE, arc_6 = EN, arc_36 = FR. Zugeschnitten wird ueber object-fit, Kopf bleibt oben. */
.layout_latest.arc_2 .image_container img,
.layout_latest.arc_6 .image_container img,
.layout_latest.arc_36 .image_container img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 372 / 242;
  object-fit: cover;
  object-position: 50% 20%;
}

/* FR: Navigation ist laenger als der Platz im 960px-Header (Fensterbreite 960-1300px) und
   laeuft ins Wortlogo. Dort nur das Symbol zeigen (SE_Icon.svg = Logo ohne "swiss economics"),
   auch in der fixierten Navigation beim Scrollen. DE/EN haben genug Platz. */
@media only screen and (min-width: 960px) and (max-width: 1300px) {
  html[lang="fr"] #logo,
  html[lang="fr"] #logo a { width: 45px; }
  html[lang="fr"] #logo a { background: url(SE_Icon.svg) top right / auto 45px no-repeat; }
  html[lang="fr"] #nav.sticky ul.level_1 { background: url(SE_Icon.svg) center right / auto 43px no-repeat; }
}

/* MOBIL: Contao 5 kennt keine getrennten Mobil-Layouts mehr (frueher "Deutsch Mobile" per Geraete-Erkennung).
   Damit Kopfbereich und Burger-Menue wie frueher aussehen (Werte aus se-mobile.css des Originals). */
@media only screen and (max-width: 959px) {
  #metabereich { display: none; }
  #header { height: 80px; }
  #logo { position: absolute; float: none; top: 0; left: auto; right: 54px; width: 180px; height: 39px; margin-top: 20px; z-index: auto; }
  #logo a { width: 224px; height: 39px; background: url(SE_Logo_rechts.svg) top right no-repeat; display: block; }
  .mobile_menu_trigger { top: 20px; }
}
/* Footer-Spalten haben im Basis-CSS feste 400px und machen die Seite auf dem Handy zu breit */
@media only screen and (max-width: 780px) {
  #footer .col, #footer .col3 { width: 100%; margin-left: 0; float: none; display: block; }
}
/* Burger-Menue-Panel: Schrift 14px, Sprachwahl nebeneinander (Original) */
.mobile_menu .inner { font-size: 14px; }
.mobile_menu .inner li a { font-size: 14px; }
.mobile_menu #chlang { position: static; float: none; width: auto; margin: 0; }
.mobile_menu #chlang ul { width: auto; }
.mobile_menu #chlang ul li { float: left; width: 30%; display: list-item; line-height: 22px; }
.mobile_menu #chlang ul li a { font-size: 14px; color: #fff; border-bottom: 0; padding: 0; width: 100%; font-weight: 400; }
.mobile_menu #chlang ul li strong { font-size: 14px; color: #666; font-weight: 700; padding: 0; width: auto; }

/* Contao 5: Text-Elemente mit Bild rendern <div class="content-text"><figure><img> statt .ce_text.
   Rote Linie unter dem Bild wie im Original (".ce_text img { border-bottom: 5px solid #b00000 }"). */
.content-text figure img { border-bottom: 5px solid #b00000; }
#footer .content-text figure img { border-bottom: 0; }

/* Team-Detailseite mobil: Biografie und Expertise untereinander statt nebeneinander.
   Die Desktop-Regel (.team.detail ...) ist spezifischer als die mobile Regel weiter oben und blieb sonst aktiv. */
@media only screen and (max-width: 959px) {
  .team.detail .news-right > .content-text:not(.media--left),
  .team.detail .news-right > .mod_newsreader { float: none; width: 100%; padding-left: 0; padding-right: 0; border-right: 0; }
}
/* Foto auf dem Handy volle Breite (Original: .team .news-right .image_container { width:100% }) */
@media only screen and (max-width: 780px) {
  .team.detail .news-right > .media--left figure { margin-right: 0; width: 100%; }
  .team.detail .news-right > .media--left figure img { width: 100%; height: auto; }
}

/* Team-Detailseite mobil: Schrift und Ueberschriften wie im frueheren Mobil-Layout (se-mobile.css des Originals):
   Grundschrift 14px/22px in #454545, Abschnittstitel mit rotem Balken. */
@media only screen and (max-width: 959px) {
  body.team.detail { font-size: 14px; line-height: 22px; color: #454545; }
  .team.detail h1, .team.detail h2, .team.detail h3 { color: #454545; }
  .team.detail h2.header-title,
  .team.detail h2.header-title.expertise { font-size: 23.33px; border-left: 5px solid #b00000; padding-left: 10px; min-height: 50px; margin-top: 0; margin-bottom: 0; }
  .team.detail h3.header-title { font-size: 21px; margin-top: 21px; margin-bottom: 12px; }
}
@media only screen and (max-width: 959px) {
  .team.detail #main ul li { width: auto !important; }
}

/* Expertise-/Sektorseiten mobil: Kontaktpersonen, Referenzprojekte und Publikationen einspaltig (wie im Original).
   Die Desktop-Regeln ".dienstleistungen .mod_newslist .layout_latest" und ".team2 ..." (48% !important)
   sind spezifischer als die mobile 100%-Regel und erzwangen zwei Spalten. */
@media only screen and (max-width: 780px) {
  .dienstleistungen .mod_newslist .layout_latest,
  .team2 .mod_newslist .layout_latest { width: 100% !important; }
}
/* ... dazu wie im Original-Mobil-Layout: Trennstrich + 25px Abstand, Kurzbeschreibung bei den Kontaktpersonen sichtbar */
@media only screen and (max-width: 780px) {
  .dienstleistungen .mod_newslist .layout_latest,
  .team2 .mod_newslist .layout_latest { margin-bottom: 25px; border-bottom: 1px solid #ccc; }
  .team2 .ce_text,
  .dienstleistungen .team .layout_latest .ce_text { display: block; }
}

/* Mobil: Zwischenueberschriften (h3.content-headline, z.B. "Expertise"/"Sektoren" auf der Startseite) klebten am linken
   Rand, alle anderen Elemente haben 10px Seitenabstand. */
@media only screen and (max-width: 959px) {
  .mod_article > h3.content-headline { padding-left: 10px; padding-right: 10px; box-sizing: border-box; }
}