/* CONTOC – Ergaenzungen zum statischen Archiv
   Gemeinsames Stylesheet fuer contoc.org und contoc2.org.
   Das Theme (Betheme) bleibt unangetastet; hier stehen die
   vereinheitlichende Breitenlogik und die neu hinzugekommenen
   Bausteine (Sprachumschalter, Listen, Personenkaesten).

   Die Klassennamen und Maße sind bewusst allgemein gehalten,
   damit beide Seiten dieselbe Grundstruktur benutzen koennen. */

:root {
  --contoc-accent: #be1823;
  --contoc-ink: #494949;

  /* Die eine Inhaltsbreite, an der sich alle Seiten ausrichten.
     1220px ist das Maß des Themes (.section_wrapper) und bleibt
     die Bezugsgroesse fuer volle Breite (Raster, Bildreihen). */
  --contoc-width: 1220px;

  /* Lesebreite fuer Fließtext und Listen. Schmaler als die volle
     Breite, weil Zeilen ueber ~90 Zeichen schlecht lesbar werden -
     aber deutlich breiter als die alten 787px der Randspalten. */
  --contoc-read: 900px;
}

/* ---------------------------------------------------------------
   Einheitliche Inhaltsbreite
   ---------------------------------------------------------------
   Ausgangslage: Textseiten steckten in einem vc_col-sm-8-Raster
   mit zwei leeren vc_col-sm-2-Randspalten (nutzbar ~820px),
   die Uebersichtsseiten liefen dagegen ueber die volle Breite
   (~1196px). Dieselbe Website sah dadurch je nach Seite anders aus.

   Loesung ohne Eingriff in die gespiegelte Struktur: die leeren
   Randspalten werden ausgeblendet, die Inhaltsspalte bekommt die
   gemeinsame Lesebreite. Das Markup bleibt wie gespiegelt - die
   Regel greift auf beiden Seiten gleich.
   --------------------------------------------------------------- */

/* Leere Randspalten (nur ein leerer wpb_wrapper darin) nehmen
   keinen Platz mehr weg. :has() waehlt gezielt die leeren aus,
   damit befuellte Spalten unangetastet bleiben. */
.vc_row > .wpb_column.vc_col-sm-2:has(> .vc_column-inner > .wpb_wrapper:empty) {
  display: none;
}

/* Die Inhaltsspalte fuellt die Reihe und wird mittig auf die
   gemeinsame Lesebreite begrenzt. Betheme laesst die Spalten
   floaten - deshalb float zuruecksetzen, sonst greift margin:auto
   nicht und die Spalte bliebe linksbuendig. */
.vc_row:has(> .wpb_column.vc_col-sm-2 > .vc_column-inner > .wpb_wrapper:empty) > .wpb_column.vc_col-sm-8 {
  float: none;
  /* Unterhalb der Lesebreite zaehlt der Platz, den das Theme laesst -
     sonst waere die Spalte breiter als ihr Wrapper. */
  width: auto;
  max-width: var(--contoc-read);
  margin-left: auto;
  margin-right: auto;
}

/* Uebersichtsseiten (Aktuelles, News, Presse) laufen sonst ueber
   die volle Wrapper-Breite. Dieselbe Lesebreite wie die Textseiten.

   Das Theme gibt der Blog-Spalte je nach Seite unterschiedliche
   Innenabstaende (column one / mcb-column-inner). Deshalb wird die
   Breite hier auf dem aeusseren Blog-Container gesetzt und der
   Abstand zurueckgenommen - sonst sitzt die Liste zwar 900px breit,
   aber je nach Seite an einer anderen Kante. */
.blog_wrapper,
.posts_group.contoc-list,
.ctc-news {
  max-width: var(--contoc-read);
  margin-left: auto;
  margin-right: auto;
}

.column_blog > .mcb-column-inner,
.column.one.column_blog {
  padding-left: 0;
  padding-right: 0;
}

/* Seitenkopf: zentrierte Ueberschrift mit kurzer roter Trennlinie.
   Das wiederkehrende Motiv der Seite - auch dort, wo es bisher
   fehlte (Uebersichtsseiten hatten gar keine Ueberschrift). */
.contoc-pagehead {
  max-width: var(--contoc-read);
  margin: 0 auto 10px;
  text-align: center;
}

.contoc-pagehead h1 {
  margin: 0;
  text-align: center;
}

.contoc-pagehead::after {
  content: "";
  display: block;
  width: 60px;
  height: 0;
  margin: 22px auto 0;
  border-top: 2px solid var(--contoc-accent);
}

/* ---------------------------------------------------------------
   Sprachumschalter (ersetzt die Polylang-Flaggen)
   --------------------------------------------------------------- */

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  vertical-align: middle;
  margin-left: 10px;
  font-family: inherit;
  line-height: 1;
}

.lang-switch-item {
  display: inline-block;
  padding: 5px 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--contoc-ink);
  border-radius: 3px;
  transition: color 0.2s, background-color 0.2s;
}

a.lang-switch-item:hover,
a.lang-switch-item:focus-visible {
  color: var(--contoc-accent);
  background-color: rgba(190, 24, 35, 0.08);
  text-decoration: none;
}

.lang-switch-item.is-active {
  color: #fff;
  background-color: var(--contoc-accent);
  cursor: default;
}

/* Sprache ohne Uebersetzung: sichtbar, aber klar nicht anklickbar */
.lang-switch-item.is-empty {
  color: #b5b5b5;
  cursor: default;
}

/* ---------------------------------------------------------------
   Uebersichtsliste (Aktuelles / News / Presse)
   Vorher als <style>-Block in 36 Dateien wiederholt, jetzt hier
   an einer Stelle. Schlichte chronologische Liste: Datum, Titel,
   kurzer Anriss, Trennlinie.
   --------------------------------------------------------------- */

.ctc-news {
  margin: 0;
  padding: 0;
  list-style: none;
}

.ctc-news li {
  padding: 26px 0;
  border-bottom: 1px solid #e6e6e2;
}

.ctc-news li:first-child {
  padding-top: 4px;
}

.ctc-news li:last-child {
  border-bottom: 0;
}

.ctc-news .ctc-news-date {
  display: block;
  margin: 0 0 7px;
  font-size: 12px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #8d8d86;
}

.ctc-news .ctc-news-title {
  margin: 0 0 9px;
  font-size: 22px;
  line-height: 1.32;
  font-weight: 600;
}

.ctc-news .ctc-news-title a {
  color: #1d1d1b;
  text-decoration: none;
}

.ctc-news .ctc-news-title a:hover,
.ctc-news .ctc-news-title a:focus-visible {
  color: var(--contoc-accent);
}

.ctc-news .ctc-news-text {
  margin: 0 0 8px;
  font-size: 15.5px;
  line-height: 1.68;
  color: #55554f;
  /* Blocksatz des Themes erzeugt hier Loecher zwischen den Woertern */
  text-align: left;
}

.ctc-news .ctc-news-more {
  font-size: 14px;
  font-weight: 600;
  color: var(--contoc-accent);
  text-decoration: none;
}

.ctc-news .ctc-news-more:hover,
.ctc-news .ctc-news-more:focus-visible {
  text-decoration: underline;
}

@media (max-width: 640px) {
  .ctc-news li {
    padding: 20px 0;
  }
  .ctc-news .ctc-news-title {
    font-size: 19px;
  }
}

/* ---------------------------------------------------------------
   Chronologische Liste (Ergebnisse, News-Uebersicht)
   Ruhige Liste statt Kachelraster: Datum, Titel, kurzer Anriss,
   klare Trennlinie, begrenzte Zeilenlaenge.
   --------------------------------------------------------------- */

.ergebnis-liste {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
}

/* Das Theme setzt Listenpunkte per ::before auf li - hier nicht erwuenscht */
.ergebnis-liste > li::before,
.ergebnis-liste > li::marker {
  content: none !important;
  display: none !important;
}

.ergebnis-eintrag {
  margin: 0;
  padding: 28px 0;
  border-top: 1px solid #e3e3e3;
  list-style: none;
}

.ergebnis-eintrag:last-child {
  border-bottom: 1px solid #e3e3e3;
}

.ergebnis-datum {
  margin: 0 0 6px;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8c8c8c;
}

.ergebnis-titel {
  margin: 0 0 10px;
  font-size: 22px;
  line-height: 1.35;
}

.ergebnis-titel a {
  color: var(--contoc-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

.ergebnis-titel a:hover,
.ergebnis-titel a:focus-visible {
  color: var(--contoc-accent);
  border-bottom-color: currentColor;
}

.ergebnis-text {
  margin: 0;
  max-width: 62ch;
  color: #6b6b6b;
  line-height: 1.65;
  /* Blocksatz des Themes erzeugt hier Loecher zwischen den Woertern */
  text-align: left;
}

/* ---------------------------------------------------------------
   News-/Archiv-Uebersicht als chronologische Liste
   Vorher: dreispaltiges Masonry-Raster mit unterschiedlich hohen
   Kacheln und vollem Artikeltext. Jetzt: eine Spalte, Datum ueber
   dem Titel, kurzer Anriss, Trennlinie dazwischen.

   Das Raster wird per JS (Isotope) mit absoluter Positionierung
   aufgebaut. Deshalb muessen position/top/left hier zurueckgesetzt
   werden - sonst liegen die Beitraege uebereinander.
   --------------------------------------------------------------- */

.posts_group.contoc-list {
  position: static !important;
  height: auto !important;
  margin: 0;
}

.posts_group.contoc-list > .post-item {
  position: static !important;
  transform: none !important;
  width: 100% !important;
  max-width: 780px;
  /* Das Theme setzt hier eigene Raster-Margins - deshalb !important,
     sonst sitzt die Liste linksbuendig statt mittig. */
  margin: 0 auto !important;
  float: none !important;
  padding: 30px 0;
  border-top: 1px solid #e3e3e3;
  border-bottom: 0;
  box-shadow: none;
  background: none;
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 0 26px;
  align-items: start;
}

.posts_group.contoc-list > .post-item:first-child {
  border-top: 0;
}

/* Bild links, klein und einheitlich - kein Layout-Sprung mehr */
.posts_group.contoc-list > .post-item .image_frame {
  grid-column: 1;
  margin: 0;
  border: 0;
  width: 132px;
}

.posts_group.contoc-list > .post-item .image_frame .image_wrapper img {
  width: 132px;
  height: 99px;
  object-fit: cover;
  display: block;
}

/* Lupe/Link-Overlay auf den Bildern der Uebersicht: unnoetig */
.posts_group.contoc-list > .post-item .image_links {
  display: none !important;
}

/* Das Theme setzt hier eine feste Pixelbreite fuers Raster. In der Liste
   sprengt die die Spalte, deshalb zurueck auf automatische Breite. */
.posts_group.contoc-list > .post-item .post-desc-wrapper {
  grid-column: 2;
  width: auto !important;
  min-width: 0;
  background: none !important;
  padding: 0;
  border: 0;
  box-shadow: none;
}

.posts_group.contoc-list > .post-item .post-desc {
  min-width: 0;
}

/* Beitraege im Link-Format haben einen leeren Bildrahmen. Die Bildspalte
   bleibt als Leerraum stehen, damit Datum und Titel aller Eintraege an
   derselben Kante beginnen - sonst springt die Textkante von Eintrag zu
   Eintrag hin und her. */
.posts_group.contoc-list > .post-item.no-img .image_frame {
  visibility: hidden;
  height: 0;
  margin: 0;
}

/* Das Ketten-Icon vor dem Titel braucht die Liste nicht */
.posts_group.contoc-list > .post-item .post-title > .icon-link {
  display: none;
}

/* Die nackte Ziel-URL unter dem Titel ist oft laenger als der Titel selbst.
   Sie bleibt als Link erhalten (sie ist bei diesen Beitraegen der einzige
   Verweis auf die Quelle), wird aber auf eine Zeile gekuerzt. */
.posts_group.contoc-list > .post-item .link-wrapper > a {
  display: block;
  max-width: 62ch;
  margin-top: 4px;
  font-size: 13px;
  /* dezent statt signalrot - der Titel ist der eigentliche Einstieg */
  color: #9a9a9a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Falls doch eine lange URL im Text steht: umbrechen statt ueberlaufen */
.posts_group.contoc-list > .post-item .post-desc a {
  overflow-wrap: anywhere;
}

/* "Do you like it?" gehoerte zum entfernten Like-Button */
.posts_group.contoc-list > .post-item .button-love {
  display: none;
}

.posts_group.contoc-list > .post-item .post-desc {
  padding: 0;
}

/* Datum: einmal reicht - das Label oben links des Themes entfaellt */
.posts_group.contoc-list > .post-item .date_label {
  display: none;
}

.posts_group.contoc-list > .post-item .post-meta {
  margin: 0 0 4px;
  font-size: 13px;
  color: #8c8c8c;
}

.posts_group.contoc-list > .post-item .post-title h4,
.posts_group.contoc-list > .post-item .post-title h2 {
  margin: 0 0 8px;
  font-size: 20px;
  line-height: 1.35;
}

.posts_group.contoc-list > .post-item .post-excerpt,
.posts_group.contoc-list > .post-item .post-desc p {
  max-width: 62ch;
  text-align: left;
  color: #6b6b6b;
  line-height: 1.6;
}

/* Der Anriss war der komplette Artikel - auf wenige Zeilen begrenzen */
.posts_group.contoc-list > .post-item .post-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.posts_group.contoc-list > .post-item .post-footer {
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: none;
}

@media (max-width: 599px) {
  .posts_group.contoc-list > .post-item {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .posts_group.contoc-list > .post-item .image_frame,
  .posts_group.contoc-list > .post-item .post-desc-wrapper {
    grid-column: 1;
  }
}

/* ---------------------------------------------------------------
   Zurueck nach oben
   --------------------------------------------------------------- */

#to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 9999;
  width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: var(--contoc-accent);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.22);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.2s;
}

#to-top[hidden] {
  display: none;
}

#to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
}

#to-top:hover,
#to-top:focus-visible {
  background-color: #8f121b;
}

#to-top svg {
  width: 20px;
  height: 20px;
  display: block;
}

@media (max-width: 767px) {
  #to-top {
    right: 16px;
    bottom: 16px;
    width: 40px;
    height: 40px;
  }
}

/* Wer Bewegung reduziert haben will, bekommt keine Animation */
@media (prefers-reduced-motion: reduce) {
  #to-top {
    transition: opacity 0.01ms;
    transform: none;
  }
}

/* ---------------------------------------------------------------
   Personenkaesten (Forschungsgruppe / Netzwerk)
   Kontaktdaten stehen jetzt als Text unter dem Namen,
   die Hover-Overlays ueber den Fotos sind entfallen.
   --------------------------------------------------------------- */

/* Gleichmaessiges Raster: alle Kaesten einer Reihe gleich hoch */
.vc_row.vc_column-gap-20 {
  display: flex;
  flex-wrap: wrap;
  /* Spalten einer Reihe auf gleiche Hoehe ziehen */
  align-items: stretch;
}

.vc_row.vc_column-gap-20 > .wpb_column,
.vc_row.vc_column-gap-20 > .wpb_column > .vc_column-inner,
.vc_row.vc_column-gap-20 > .wpb_column > .vc_column-inner > .wpb_wrapper {
  display: flex;
  flex-direction: column;
}

/* Die letzte Reihe ist oft nicht voll besetzt. Ohne feste Spaltenbreite
   wuerden die verbleibenden Kaesten die Reihe auffuellen und breiter
   ausfallen als die darueber - die Kaesten bleiben deshalb ein Drittel
   breit und die Reihe endet einfach frueher. */
.vc_row.vc_column-gap-20 > .wpb_column.vc_col-sm-4 {
  flex: 0 0 33.3333%;
  max-width: 33.3333%;
}

.eplus-team.eplus-team-2 {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
  text-align: center;
}

/* Die Kaesten einer Reihe sollen gleich hoch enden, auch wenn die
   Funktionsbezeichnungen unterschiedlich lang sind. Das Theme haengt
   30px Aussenabstand unten an, der sonst die Hoehen auseinandertreibt. */
.vc_row.vc_column-gap-20 > .wpb_column > .vc_column-inner,
.vc_row.vc_column-gap-20 > .wpb_column > .vc_column-inner > .wpb_wrapper {
  flex: 1 1 auto;
}

.eplus-team.eplus-team-2 {
  margin-bottom: 30px;
}

/* Der Textblock schiebt sich auf, damit der Kasten unten buendig endet */
.eplus-team-2 .eplus-team-info {
  justify-content: flex-start;
}

.eplus-team-2 .eplus-team-title-wrap {
  flex: 1 1 auto;
}

/* Einheitliche Bildgroesse ohne Verzerrung */
.eplus-team-2 .eplus-team-img img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  object-position: center 25%;
  background-color: #fff;
}

/* Der graue Strich unter dem Namen war linksbuendig - jetzt mittig */
.eplus-team-2 .eplus-team-title-wrap:before {
  left: 50%;
  transform: translateX(-50%);
}

.eplus-team-2 .eplus-team-info {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

/* Ohne Overlay braucht das Bild keine Abdunklung mehr */
.eplus-team-2 .eplus-team-img:before,
.eplus-team-2:hover .eplus-team-img:before {
  display: none;
}

.eplus-team-2 .eplus-team-contact {
  margin-top: 12px;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 1.6;
}

.contoc-contact-row {
  word-break: break-word;
}

.contoc-contact-row a {
  color: var(--contoc-ink);
  text-decoration: none;
}

.contoc-contact-row a:hover,
.contoc-contact-row a:focus-visible {
  color: var(--contoc-accent);
  text-decoration: underline;
}

@media (max-width: 767px) {
  .vc_row.vc_column-gap-20 {
    display: block;
  }
  .eplus-team-2 .eplus-team-img img {
    height: 240px;
  }
}

/* Die Filterleiste ("Filter by Categories/Tags/Authors" samt "Show all")
   gehoerte zum Isotope-Raster. In der chronologischen Liste filtert sie
   nichts mehr und ist reiner Ballast. */
.section-filters {
  display: none !important;
}

/* Das Kategorien-Aufklappmenue im Beitragskopf doppelt nur das Datum
   und oeffnet ein leeres Panel - in der Liste nicht gebraucht. */
.posts_group.contoc-list > .post-item .post-meta .category {
  display: none;
}

/* ---------------------------------------------------------------
   Nicht mehr vorhandene Beitraege
   Ein Beitrag (ref.ch, 23.03.2021) wurde vor der Spiegelung aus dem
   WordPress geloescht und ist auch live nicht mehr abrufbar. Der Titel
   bleibt in den Uebersichten stehen, ist aber kein toter Link mehr.
   --------------------------------------------------------------- */

.beitrag-entfallen {
  color: #8c8c8c;
  cursor: help;
}

/* --- Listeneintraege: ganze Zeile reagiert --- */
.ctc-news li{position:relative;padding:24px 64px 24px 20px;margin:0 -20px;
  border-bottom:1px solid var(--ctc-rule);border-radius:4px;
  transition:transform .22s cubic-bezier(.2,.7,.3,1),
             box-shadow .22s ease, background-color .22s ease}
.ctc-news li:hover{transform:scale(1.012) translateY(-2px);
  background:#fafaf8;box-shadow:0 6px 22px rgba(0,0,0,.09);
  border-bottom-color:transparent}
.ctc-news li:focus-within{background:#fafaf8;
  box-shadow:0 0 0 2px var(--ctc-accent)}

/* Ganze Zeile klickbar: Titel-Link ueberdeckt den Eintrag */
.ctc-news .ctc-news-title a::after{content:"";position:absolute;inset:0;
  border-radius:4px}

/* Pfeil-Kasten, wischt von hinten herein */
.ctc-news li .ctc-news-go{position:absolute;top:50%;right:16px;
  width:38px;height:38px;margin-top:-19px;display:flex;align-items:center;
  justify-content:center;background:var(--ctc-accent);border-radius:4px;
  opacity:0;transform:translateX(14px);pointer-events:none;
  transition:opacity .22s ease, transform .22s cubic-bezier(.2,.7,.3,1)}
.ctc-news li:hover .ctc-news-go,
.ctc-news li:focus-within .ctc-news-go{opacity:1;transform:translateX(0)}
.ctc-news li .ctc-news-go svg{width:17px;height:17px;stroke:#fff;
  stroke-width:2.6;fill:none;stroke-linecap:round;stroke-linejoin:round}

@media (max-width:640px){
  .ctc-news li{padding:20px 16px;margin:0}
  .ctc-news li .ctc-news-go{display:none}
  .ctc-news li:hover{transform:none;box-shadow:none}
}
@media (prefers-reduced-motion:reduce){
  .ctc-news li,.ctc-news li .ctc-news-go{transition:none}
  .ctc-news li:hover{transform:none}
}

/* --- Bilder im Fliesstext: einheitliche Abstaende --- */
.wpb_single_image,.vc_single_image-wrapper,
.the_content_wrapper .image_frame{margin:0 0 28px}
.wpb_single_image{margin-top:28px}
.wpb_single_image:first-child,
.the_content_wrapper .image_frame:first-child{margin-top:0}
.wpb_single_image img,.vc_single_image-wrapper img,
.the_content_wrapper .image_frame img{max-width:100%;height:auto;display:block}
.wpb_single_image.vc_align_center,.wpb_single_image.vc_align_center img{
  margin-left:auto;margin-right:auto}
.the_content_wrapper p + .wpb_single_image{margin-top:28px}

/* --- Studien-Block auf der Startseite --- */
.ctc-study{margin:46px 0 8px;padding:40px 0;background:#f4f4f1;
  border-top:1px solid var(--ctc-rule);border-bottom:1px solid var(--ctc-rule)}
.ctc-study-inner{max-width:var(--ctc-wrap);margin:0 auto;padding:0 24px;
  display:flex;gap:44px;align-items:center;flex-wrap:wrap}
.ctc-study-cover{flex:0 0 208px;max-width:208px;display:block;line-height:0;
  transform:rotate(-1.4deg);transition:transform .25s ease,box-shadow .25s ease;
  box-shadow:0 8px 26px rgba(0,0,0,.18)}
.ctc-study-cover:hover{transform:rotate(0) translateY(-4px);
  box-shadow:0 14px 34px rgba(0,0,0,.24)}
.ctc-study-cover img{width:100%;height:auto;display:block}
.ctc-study-text{flex:1 1 320px;min-width:0}
.ctc-study-kicker{margin:0 0 9px;font-size:12px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ctc-accent);font-weight:700}
.ctc-study-title{margin:0 0 14px;font-size:25px;line-height:1.3;font-weight:600;
  color:var(--ctc-ink)}
.ctc-study-lead{margin:0 0 20px;font-size:16px;line-height:1.65;
  color:var(--ctc-muted);max-width:54ch}
.ctc-study-actions{margin:0;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.ctc-study-cta{display:inline-block;padding:11px 22px;background:var(--ctc-accent);
  color:#fff;font-size:15px;font-weight:600;text-decoration:none;border-radius:3px;
  transition:background .15s}
.ctc-study-cta:hover{background:#9d121c;color:#fff}
.ctc-study-more{font-size:15px;font-weight:600;color:var(--ctc-accent);
  text-decoration:none}
.ctc-study-more:hover{text-decoration:underline}
@media (max-width:780px){
  .ctc-study{margin:34px 0 4px;padding:30px 0}
  .ctc-study-inner{gap:24px;justify-content:center}
  .ctc-study-cover{flex:0 0 150px;max-width:150px;transform:none}
  .ctc-study-text{flex:1 1 100%;text-align:center}
  .ctc-study-lead{margin-left:auto;margin-right:auto}
  .ctc-study-actions{justify-content:center}
  .ctc-study-title{font-size:21px}
}


/* --- Partnerlogos: durchlaufendes Band --- */
.ctc-partners{padding:24px 0 26px;border-bottom:1px solid var(--ctc-rule);
  overflow:hidden}
.ctc-partners-viewport{max-width:var(--ctc-wrap);margin:0 auto;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ctc-partners-track{display:flex;align-items:center;gap:64px;margin:0;padding:0;
  list-style:none;width:max-content;animation:ctc-marquee 42s linear infinite}
.ctc-partners:hover .ctc-partners-track{animation-play-state:paused}
.ctc-partners-track li{flex:0 0 auto;display:flex;align-items:center;
  justify-content:center;width:150px;height:76px}
.ctc-partners-track img{max-width:100%;max-height:100%;width:auto;height:auto;
  object-fit:contain;display:block;filter:grayscale(1);opacity:.7;
  transition:filter .2s ease,opacity .2s ease}
.ctc-partners-track img:hover{filter:grayscale(0);opacity:1}
@keyframes ctc-marquee{from{transform:translateX(0)}
  to{transform:translateX(calc(-50% - 32px))}}
@media (max-width:640px){
  .ctc-partners{padding:18px 0 20px}
  .ctc-partners-track{gap:38px}
  .ctc-partners-track li{width:104px;height:54px}
}
@media (prefers-reduced-motion:reduce){
  .ctc-partners-track{animation:none;flex-wrap:wrap;justify-content:center;
    width:auto;gap:28px 40px}
}

/* --- Hero: volle Breite, direkt unter der Navigation ---
   Der Hero steckt im .section_wrapper (max-width 1220px). Damit er ueber die
   ganze Browserbreite geht, bricht er per Viewport-Breite aus dem Container
   aus. 100vw statt 100% wegen der Scrollbar-Differenz. */
.ctc-study{margin:0 calc(50% - 50vw);padding:0;width:100vw;max-width:100vw;
  background:#f4f4f1;border:0;border-bottom:1px solid var(--ctc-rule)}
.ctc-study-inner{max-width:none;margin:0;padding:56px 6vw;
  display:flex;gap:clamp(32px,5vw,72px);align-items:center;
  justify-content:center;flex-wrap:wrap}
.ctc-study-cover{flex:0 0 clamp(180px,17vw,250px);
  max-width:clamp(180px,17vw,250px);display:block;line-height:0;
  transform:rotate(-1.4deg);transition:transform .3s ease,box-shadow .3s ease;
  box-shadow:0 10px 30px rgba(0,0,0,.2)}
.ctc-study-cover:hover{transform:rotate(0) translateY(-5px);
  box-shadow:0 16px 40px rgba(0,0,0,.26)}
.ctc-study-cover img{width:100%;height:auto;display:block}
.ctc-study-text{flex:0 1 620px;min-width:0}
.ctc-study-title{font-size:clamp(23px,2.3vw,31px)}
@media (max-width:780px){
  .ctc-study-inner{padding:34px 22px;gap:24px;justify-content:center}
  .ctc-study-cover{flex:0 0 156px;max-width:156px;transform:none;margin:0 auto}
  .ctc-study-text{flex:1 1 100%;text-align:center}
  .ctc-study-lead{margin-left:auto;margin-right:auto}
  .ctc-study-actions{justify-content:center}
}

/* --- Logos: in Farbe, ebenfalls ueber die volle Breite --- */
.ctc-partners{margin:0 calc(50% - 50vw);width:100vw;max-width:100vw}
.ctc-partners-track img{filter:none;opacity:1}
.ctc-partners-track img:hover{filter:none;opacity:1;transform:scale(1.04)}

/* --- Seitenkopf unter den Logos --- */
.ctc-pagehead{margin:44px 0 0;text-align:center}
.ctc-pagehead + .ctc-rule{margin:14px auto 18px}
.ctc-intro{text-align:center;max-width:62ch;margin-left:auto;margin-right:auto}