/**
 * shell.css — tokenized restyling of the page shell ONLY.
 *
 * Loaded LAST (after the vendored Drupal CSS) so it can override the old
 * theme for: header, top bar, navigation shell, breadcrumb, page title,
 * footer, and the download/file blocks. The interior of article content
 * is intentionally NOT touched here (that is step 4).
 *
 * Colors, spacing, radii, shadows and fonts must come from tokens.css —
 * never hardcode a color here.
 */

/* ---------- Global shell background & typography (over vendored body/html) */
html {
  font-family: var(--font-sans);
  color: var(--color-text);
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  line-height: var(--leading-normal);
}

/* ---------- Header ------------------------------------------------ */
/* NOTE: selectors mirror the vendored ones exactly (e.g. `section.top`,
   not `.top`) — shell.css loads last, so equal specificity wins. Using a
   LOWER specificity (`.top`) silently loses to `section.top` and let the
   old hardcoded electric blue leak through. */
.header-section {
  background-color: var(--color-primary-soft);
}

/* The old top bar ("Accueil" + language switcher) is removed in step 3:
   the scrape dropped the language switcher, so the orphaned bar went with
   it. The `section.top` shell overrides were removed along with it. */

/* Logo is a transparent SVG (public/files/logo.svg); the white background
   chip that the old JPEG-in-PNG needed in dark mode is gone. */

/* ---------- Slider / breadcrumb / page title ----------------------- */
.slider-section {
  background-color: var(--color-primary-soft);
  /* The scraped rule capped the slider at 600px and clipped the rest
     (main-1.css: max-height:600px; overflow:hidden) — that cut off the
     overlaid dot indicators and the caption band's reserved strip. The
     slider height is now stable via the shared image aspect ratio, so the
     cap is obsolete. */
  max-height: none;
}

/* Hero slider: the two scraped slides have different image aspect ratios
   (6000x2624 vs 2000x694), so the slider height — and with it the caption
   band — jumped on every rotation. Force one shared aspect ratio and crop
   the images to fit (object-fit: cover); slides, slider height and the
   caption now stay at the same place for every slide. NOTE: slick makes
   each `.paragraph-section.p-slider-gross` a slide, so target the image
   style class, not a descendant of the section. */
.slick-slide .image-style-slider-gross {
  width: 100%;
  aspect-ratio: 5 / 2;
  height: auto;
  object-fit: cover;
}

.breadcrumb-section {
  background-color: var(--color-bg);
}

.breadcrumb a {
  color: var(--color-text-muted);
}

.breadcrumb a:hover {
  color: var(--color-primary);
  text-decoration: none;
}

.breadcrumb__item:hover a {
  color: var(--color-primary);
  text-decoration: none;
}

.block-page-title-block .page-title {
  color: var(--color-primary); /* old theme rendered h1 titles in brand blue */
  font-family: var(--font-sans);
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--leading-tight);
}

/* ---------- Footer ------------------------------------------------- */
/* Blog listing: rows without a picture keep the image column (the vendored
   layout floats bild 22.75% + text 74.25%), so titles and text align with the
   other rows on desktop. A branded placeholder fills the slot. */
.blogview__bild-placeholder {
  box-sizing: border-box;
  width: 100%;
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary-soft);
}

.blogview__bild-placeholder img {
  width: 55%;
  height: auto;
  opacity: 0.35;
}

/* Hero slider caption: the vendored CSS overlays the caption on the image
   only at >=768px; on mobile it fell into the flow BELOW the image with dark
   text on the page surface — unreadable in dark mode and misaligned. Mirror
   the overlay at every width so the caption sits centered on the band over
   the image everywhere. */
.slider--content .slider--text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background-color: var(--color-caption-band);
  color: var(--color-on-scrim);
  text-align: center;
  /* reserve the bottom strip for the overlaid dot indicators */
  padding-bottom: calc(2em + 1.75rem);
}

.slider--content :is(h1, h2, h3, h4, p, div, a) {
  color: var(--color-on-scrim);
  text-align: center;
}

/* The 5/2 crop leaves too little image under the caption band on narrow
   screens: use a taller ratio there, plus a smaller band title and a top
   padding so the caption fits inside the image. */
@media only screen and (max-width: 767px) {
  .slick-slide .image-style-slider-gross,
  .slider-strip--gross img {
    aspect-ratio: 3 / 2;
  }

  .slider--content .slider--text {
    padding-top: 0.5em;
    padding-bottom: calc(1em + 1.75rem);
  }

  .slider--content :is(h1, h2, h3, h4) {
    font-size: var(--text-2xl);
    line-height: 1.2;
  }
}

/* Brand footer kept: primary fill with on-primary text (like the old
   site), expressed through tokens so dark mode follows automatically. */
.footer-section {
  background-color: var(--color-primary-fill);
  color: var(--color-on-primary);
}

.footer-section h2 {
  color: var(--color-on-primary);
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-semibold);
}

.footer-section a {
  color: var(--color-on-primary);
}

.footer-section a:hover {
  color: var(--color-on-primary);
  text-decoration: underline;
}

.footer-section p {
  color: var(--color-on-primary);
}

.footer-section .block-views ul {
  border-top-color: var(--color-on-primary);
}

.footer-section .block-views ul li a {
  color: var(--color-on-primary);
  border-color: var(--color-on-primary);
}

.footer-section .block-views ul li a:hover {
  color: var(--color-on-primary);
  background-color: var(--color-primary-hover);
}

.footer-section .block-views ul li a:after {
  color: var(--color-on-primary);
}

/* ---------- Download / file blocks --------------------------------- */
.filewrapper {
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
}

.file {
  margin-top: 0;
  margin-bottom: var(--space-2);
}

.file a {
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
}

.file a:hover {
  color: var(--color-primary-strong);
}

.file--application-pdf a {
  border-bottom: 1px solid var(--color-border-strong);
}

/* ---------- Content paragraph bands --------------------------------- */
.mit-hintergrund {
  background-color: var(--color-primary-soft);
}

/* ---------- Homepage teaser cards ------------------------------------ */
.p-box-element {
  background-color: var(--color-surface-muted);
  border: 0;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-1);
  overflow: hidden;
  margin: 0;
  width: 100%;
}

.p-box-element__content {
  padding: var(--space-3) var(--space-4);
}

.p-box .paragraph-content {
  row-gap: var(--space-5);
}