/* 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; }
}

/* Meta-Navigation oben rechts: Eintraege sind rechts ausgerichtet (float: right), der letzte steht
   daher ganz links und braucht keinen Trennstrich davor. */
#meta li:last-child > a, #meta li:last-child > strong { border-left: 0; }

/* Publikationen: Das 3-Spalten-Raster war nur auf 1280px begrenzt. Bei Fensterbreiten 960-1365px
   (z.B. Laptops mit 125-150 % Windows-Skalierung) lief es deshalb ohne Rand ueber die ganze Breite.
   Wie die uebrigen Seiten (und die alte Seite) in diesem Bereich auf 960px begrenzen und zentrieren. */
@media only screen and (min-width: 960px) and (max-width: 1365px) {
  body.publikationen #main .mod_article { max-width: 960px; width: calc(100% - 20px); column-gap: 30px; }
}

/* Projektsuche (se_load_more.js, setupProjectSearch) */
.se-project-search { margin: 0 auto 25px; }
.se-project-search input[type="search"] {
  display: block; width: 100%; max-width: 420px; box-sizing: border-box; /* globale Regel "input {display:none}" aufheben */
  padding: 10px 12px; border: 1px solid #ccc; border-radius: 0;
  font: inherit; font-size: 15px; color: #333; background: #fff;
}
.se-project-search input[type="search"]:focus { outline: none; border-color: #b00000; }
.se-project-search-info { margin: 8px 0 0; font-size: 14px; color: #666; min-height: 1.2em; }
.se-search-hidden { display: none !important; }
/* Bei space-between bleiben angefangene Reihen dank Platzhalter in Projektbreite links buendig */
.mod_newslist.se-searching::after { content: ''; width: var(--se-item-w, 0); height: 0; }
@media only screen and (max-width: 959px) {
  .se-project-search { padding: 0 10px; box-sizing: border-box; }
}
/* Projektsuche Desktop: kleiner, rechts auf Hoehe der Ueberschrift "Ausgewaehlte Projekte"
   (Ueberschrift 50px hoch + 25px Abstand; Feld 38px hoch, daher 69px nach oben = vertikal mittig) */
@media only screen and (min-width: 960px) {
  .se-project-search { display: flex; flex-direction: column; align-items: flex-end; margin-top: -69px; margin-bottom: 6px; position: relative; }
  .se-project-search input[type="search"] { max-width: 240px; padding: 8px 10px; font-size: 14px; }
  .se-project-search-info { margin-top: 4px; font-size: 13px; text-align: right; }
}

/* Projektliste abgeschnitten statt ausgeblendet (Vorschau, setupProjectsAllInPage): alle Projekte bleiben
   im sichtbaren Text, die Liste ist nur in der Hoehe begrenzt; Verlauf deutet die naechste Reihe an. */
.mod_newslist.se-clipped { overflow: hidden; position: relative; }
.mod_newslist.se-clipped::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 90px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 85%); pointer-events: none;
}

/* Angebote: Bild soll den 242px-Rahmen ganz ausfuellen. In Contao 5 steckt das <img> in <a> und <picture>
   (beide inline), dadurch griff height:100% nicht und flachere Bilder liessen einen Spalt bis zum roten Streifen. */
.layout_latest.arc_26 .image_container a, .layout_latest.arc_26 .image_container picture,
.layout_latest.arc_33 .image_container a, .layout_latest.arc_33 .image_container picture,
.layout_latest.arc_38 .image_container a, .layout_latest.arc_38 .image_container picture { display: block; height: 100%; }
.layout_latest.arc_26 .image_container img,
.layout_latest.arc_33 .image_container img,
.layout_latest.arc_38 .image_container img { display: block; height: 100% !important; } /* ueberstimmt ".mod_newslist .image_container img {height:auto !important}" */

/* Hauptueberschrift (MainHeadingListener, 20.10.2026): Auf Seiten ohne h1 wird die erste h2 im Inhaltsbereich
   Hinweis: h1:where(.se-h1) hat dieselbe Gewichtung wie "h2", damit z.B. die Zentrierung ".mod_article > *" weiter greift.
   zur h1:where(.se-h1). Sie bekommt dieselbe Gestaltung wie bisher die h2:
   1) die bestehenden h2-Regeln, uebertragen auf h1:where(.se-h1) (gleiche Reihenfolge, gleiche Prioritaet) */
h1:where(.se-h1) { margin: 0; padding: 0; }
h1:where(.se-h1) { font-size: 100%; font-weight: 400; }
h1:where(.se-h1) { font-size: 1.6667em; }
h1:where(.se-h1) { margin-top: 1em; }
h1:where(.se-h1) { margin-bottom: 12px; }
.mod_article h1:where(.se-h1) { text-transform: uppercase; font-weight: 700; border-left: 5px solid #b00000; padding-left: 10px; margin-top: 3px; margin-bottom: 25px; min-height: 50px; }
h1:where(.se-h1) { text-transform: uppercase; font-weight: 700; }
.publikationen .mod_article h1:where(.se-h1) { margin-bottom: 0; }
.dienstleistungen h1:where(.se-h1) { margin-bottom: 25px !important; }
@media only screen and (min-width: 1px) and (max-width: 959px) {
  .mod_article > h1:where(.se-h1) { margin-left: 10px !important; }
}
/* 2) allgemeine h1-Regeln aufheben, die fuer die h2 nicht galten (Zeilenhoehe, Schrift/Abstand Laptop & Handy) */
h1:where(.se-h1) { line-height: inherit; }
@media only screen and (min-width: 960px) and (max-width: 1300px) {
  h1:where(.se-h1) { font-size: 1.6667em !important; margin-bottom: 12px !important; }
  .mod_article h1:where(.se-h1) { margin-bottom: 25px !important; }
  .publikationen .mod_article h1:where(.se-h1) { margin-bottom: 0 !important; }
}
@media only screen and (min-width: 1px) and (max-width: 959px) {
  h1:where(.se-h1) { margin-bottom: 12px !important; }
  .mod_article h1:where(.se-h1) { margin-bottom: 25px !important; }
  .publikationen .mod_article h1:where(.se-h1) { margin-bottom: 0 !important; }
}
.dienstleistungen h1:where(.se-h1) { margin-bottom: 25px !important; }

/* Titelbild mobil (21.10.2026): auf dem Handy 150px hoch wie in der alten Mobilversion (se-mobile.css) statt 275px;
   auf Tablets waechst es mit der Breite bis 275px. Seiten mit 5px-Streifen (.team, .news, … #slider) bleiben unveraendert. */
@media only screen and (max-width: 959px) {
  #slider { height: clamp(150px, 40vw, 275px); background-size: cover; background-position: center center; } /* wie alte Mobilversion: Bild auf die Hoehe skalieren statt fester Desktop-Breite 2400px (sonst Zoom-Ausschnitt) */
  .startseite #slider, .home #slider { height: clamp(150px, 40vw, 275px) !important; } /* se2.css setzt 275px !important */
}

/* Mobil-Typografie wie in der alten Mobilversion (se-mobile.css, 21.10.2026): Grundschrift 14px/22px #454545
   statt 16px/24px schwarz. Ueberschriften in em (z.B. Bereichstitel 1.6667em) werden dadurch wieder 23px;
   "Excellence in Economics" auf der Startseite wie frueher 24px. Bisher nur fuer .team.detail umgesetzt. */
@media only screen and (max-width: 959px) {
  body { font-size: 14px; line-height: 22px; color: #454545; }
  #main h1, #main h2, #main h3, #main h4 { color: #454545; }
  /* Abstaende wie alte Mobilversion: 64px ueber, 46px unter dem Titel (Zeilenhoehe 22px wie frueher) */
  .home #main h1:not(.se-h1) { font-size: 24px; line-height: 22px; margin-top: 34px; margin-bottom: 12px !important; }
}

/* Listen (Aktuell, Publikationen, Projekte …): Im Bildrahmen stehen ein leerer Link und das Bild als Textzeile (inline);
   das schob das Bild ~25px nach unten. Als Bloecke entfaellt der Leerraum; Datum → Bild wieder wie frueher. */
@media only screen and (max-width: 959px) {
  .layout_latest .image_container > a, .layout_latest .image_container picture, .layout_latest .image_container img { display: block; }
  /* leere Links (nur Leerraum, Ueberbleibsel der Vorlagen) vor und im Bildrahmen erzeugen sonst Leerzeilen */
  .layout_latest > a:not(:has(*)), .layout_latest .image_container > a:not(:has(*)) { display: none; }
}

/* se2.css schiebt auf dem Handy jedes Listenbild 25px nach unten (".mod_newslist .image_container img {margin-top:25px}")
   – das ist zugleich der Abstand zwischen Eintraegen ohne Datumszeile und bleibt dort. Ausnahmen:
   - mit Datumszeile (News, Publikationen, Projekte): Bild direkt unter das Datum wie in der alten Mobilversion
   - Angebote: Bild fuellt seinen 242px-Rahmen; der Abstand gehoert an den Rahmen, sonst rutscht das Bild nach unten */
@media only screen and (max-width: 959px) {
  .layout_latest p.info ~ .image_container img { margin-top: 0; }
  .layout_latest.arc_26 .image_container, .layout_latest.arc_33 .image_container, .layout_latest.arc_38 .image_container { margin-top: 25px; }
  .layout_latest.arc_26 .image_container img, .layout_latest.arc_33 .image_container img, .layout_latest.arc_38 .image_container img { margin-top: 0; }
}

/* Handy: feiner grauer Strich unter jedem Listeneintrag wie in der alten Mobilversion (1px #ccc, danach 25px Abstand) */
@media only screen and (max-width: 959px) {
  .mod_newslist .layout_latest { border-bottom: 1px solid #ccc; margin-bottom: 25px; }
  .layout_latest.arc_26, .layout_latest.arc_33, .layout_latest.arc_38 { padding-bottom: 3px; }
  .layout_latest.arc_26 .image_container, .layout_latest.arc_33 .image_container, .layout_latest.arc_38 .image_container { margin-top: 12px; }
}

/* News-Seite (Vorschau ?vorschau=news): Link zur Einzelmeldung im aufgeklappten Text; Button "Weitere News"
   gehoert zur Desktop- bzw. Handy-Liste, die se2.css bei 780px umschaltet */
.se-news-permalink { margin: 12px 0 0; }
@media only screen and (max-width: 780px) { .se-news-more-d { display: none; } }
@media only screen and (min-width: 781px) { .se-news-more-m { display: none; } }