/* DCE-Elemente — Optik wie die Live-Seite, in ABEM-Schreibweise
   (block__element + separate -modifier, camelCase; ohne a-/m-/o-Prefix). Hover nur in
   @media (hover: hover). mobile-first, Farben/Schrift über variables.css.
   Globale v12-Klassen werden genutzt, nicht dupliziert: .font__button (Button), .font__far (Icon),
   .headline / .-subheader / .-likeh1 (Überschriften). Überschriften-Größen: template.css/firstload.css. */


/* ============================================================
   Slogan (DCE 9) — slogan
   ============================================================ */
.slogan__line {
  display: inline-block;
  white-space: nowrap;
  text-transform: uppercase;
  color: rgb(var(--c-neutral-lightest));
  font-family: var(--f-family-2);
}
.slogan__line.-small {
  font-weight: var(--f-weight-b);
  font-style: italic;
  font-size: 125%;
  line-height: 120%;
  background: rgb(var(--c-neutral));
  padding: 5px 15px;
  margin-bottom: 3px;
}
.slogan__line.-large {
  font-weight: var(--f-weight-l);
  font-size: 312%;
  line-height: 110%;
  max-width: 700px;
  background: rgb(var(--c-primary));
  padding: 8px 15px;
}
@media (min-width: 901px) {
  .slogan__line.-small { padding: 10px 35px; }
  .slogan__line.-large { padding: 12px 35px; }
}


/* ============================================================
   Sondertabelle (DCE 2) — specialTable
   ============================================================ */
.specialTable__row {
  display: table;
  overflow: hidden;
  width: 100%;
  margin-bottom: 10px;
}
.specialTable__cell {
  display: block;
  width: 100%;
  border: 2px solid rgb(var(--c-primary-lighter));
  padding: 0.3em 0.7em;
}
.specialTable__cell.-head {
  color: rgb(var(--c-neutral-lightest));
  background: rgb(var(--c-primary));
  vertical-align: top;
  font-family: var(--f-family-2);
  font-style: italic;
  line-height: 120%;
  text-transform: uppercase;
  font-size: 125%;
}
.specialTable__cell.-body {
  background: rgb(var(--c-neutral-lightest));
}
@media (min-width: 501px) {
  .specialTable__row { margin-bottom: 0; }
  .specialTable__cell { display: table-cell; }
  .specialTable__cell.-head { width: 35%; }
  .specialTable__cell.-body { width: 65%; }
}


/* ============================================================
   Link-/Textbox (DCE 3) — linkbox
   ============================================================ */
.linkbox {
  background: rgb(var(--c-neutral-lightest));
  position: relative;
}
/* Gerader Container (weiß) → Box hellblau, damit sie kontrastiert
   (Live: `.contentarea > div:nth-child(2n) .linkbox`). Der Hover unten ist
   gleich spezifisch, steht aber später → gewinnt und färbt teal. */
.content > .frame:nth-child(even) .linkbox {
  background: rgb(var(--c-primary-lighter));
}
.linkbox__inner { padding: 20px 60px 20px 20px; }
.linkbox.-noLink .linkbox__inner { padding: 20px; }
.linkbox.-withLink > a {
  display: block;
  font-family: var(--f-family);
}
.linkbox__title {
  color: rgb(var(--c-primary));
  margin-bottom: 0.2em;
  font-family: var(--f-family-2);
  font-weight: var(--f-weight-b);
  font-style: italic;
  line-height: 120%;
  text-transform: uppercase;
  font-size: 125%;
}
.linkbox__subtitle { color: rgb(var(--c-primary)); }

/* Pfeil-Icon rechts bei verlinkten Boxen (Inline-SVG-Chevron, umfärbbar) */
.linkbox.-withLink .linkbox__inner::after {
  position: absolute;
  right: 20px;
  top: 50%;
  margin-top: -28px;
  width: 22px;
  height: 56px;
  content: '';
  background-color: rgb(var(--c-primary));
  /* grosser, duenner Chevron wie Live (Sprite 23x50, feine Linie) */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 56'%3E%3Cpath d='M6 6 16 28 6 50' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 56'%3E%3Cpath d='M6 6 16 28 6 50' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: background-color 0.3s ease;
}

@media (hover: hover) {
  .content .linkbox.-withLink:hover { background: rgb(var(--c-primary)); }
  .linkbox.-withLink:hover .linkbox__title,
  .linkbox.-withLink:hover .linkbox__subtitle,
  .linkbox.-withLink:hover a { color: rgb(var(--c-neutral-lightest)); }
  .linkbox.-withLink:hover .linkbox__inner::after { background-color: rgb(var(--c-neutral-lightest)); }
}


/* ============================================================
   Hintergrundbild (DCE 5) — bgimage (Bildhälfte im textimage-Container)
   ============================================================ */
.bgimage {
  display: block;
  width: 100%;
  height: 250px;
  position: relative;
  box-sizing: border-box;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}
.bgimage__gradient { display: none; }

/* gestapelte Bildhöhen wie Live (max-width 640→300, 500→250): mobil 250, ab 501 300, ab 641 350. */
@media (min-width: 501px) { .bgimage { height: 300px; } }
@media (min-width: 641px) { .bgimage { height: 350px; } }

/* ab 901px (Live max-width:900) stellt der Content-Bild-Container (.frame-content-image) Text|Bild
   nebeneinander → das Bild füllt die Spaltenhöhe (= Texthöhe), Verlauf am linken Rand. */
@media (min-width: 901px) {
  .bgimage { height: 100%; min-height: 300px; }
  .bgimage__gradient {
    display: block;
    width: 20%;
    max-width: 300px;
    position: absolute;
    z-index: 1;
    left: 0; top: 0; bottom: 0;
    background: linear-gradient(to right, rgba(var(--c-primary-lighter),1) 0%, rgba(var(--c-primary-lighter),0.82) 50%, rgba(var(--c-primary-lighter),0) 100%);
  }
}


/* ============================================================
   Content-Slider (DCE 7) — contentSlider (Swiper)
   Swiper übernimmt Layout + Navigation; Init: JavaScript/content-slider.js.
   ============================================================ */
.contentSlider {
  position: relative;
  --swiper-navigation-color: rgb(var(--c-neutral-lightest));   /* weißer Pfeil */
  --swiper-navigation-size: 18px;
}
/* Der FOUC-Schutz (Slides beim Laden schon nebeneinander: .swiper-wrapper display:flex + Slide-Breiten
   je slidesPerView-Breakpoint) steht in der INLINE firstload.css — die dce.css lädt extern zu spät, um
   das anfängliche Stapeln zu verhindern. Hier nur die restliche Slider-Optik. */
.contentSlider__slide { height: auto; }              /* gleiche Höhe je Slide */
.contentSlider__inner { height: 100%; }
.contentSlider__image { margin-bottom: 1rem; overflow: hidden; aspect-ratio: 1 / 1; }
.contentSlider__image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.contentSlider__text { color: rgb(var(--c-neutral-dark)); margin-bottom: 1.5em; }

/* Pfeile: weißer Chevron auf Primär-Blau bei opacity 0.9 (wie Live-Sprite: #006682 @ 0.9) —
   mobil-first klein, auf Desktop größer (Live-Maße 38×57 / 50×75). */
.contentSlider .swiper-button-prev,
.contentSlider .swiper-button-next {
  width: 38px;
  height: 57px;
  top: 0;
  transform: translateY(-50%);
  background: rgba(var(--c-primary), 0.9);
  transition: background 0.3s ease;
  /* vertikal mittig auf dem quadratischen Bild: margin-top = halbe Bildhöhe.
     Bildhöhe = Slide-Breite; margin-top-% bezieht sich auf die Slider-Breite → pro
     slidesPerView-Stufe gestaffelt (1 / 2 / 3 / 4). */
  margin-top: 50%;   /* 1 Slide (≤500): Bildhöhe = Slider-Breite → halbe Höhe = 50% */
}
@media (min-width: 501px) {   /* 2 Slides: Bildhöhe ≈ Breite/2 */
  .contentSlider .swiper-button-prev,
  .contentSlider .swiper-button-next { margin-top: 25%; }
}
@media (min-width: 641px) {   /* 3 Slides: Bildhöhe ≈ Breite/3 */
  .contentSlider .swiper-button-prev,
  .contentSlider .swiper-button-next { margin-top: 16%; }
}
@media (min-width: 1024px) {
  .contentSlider { --swiper-navigation-size: 26px; }
  .contentSlider .swiper-button-prev,
  .contentSlider .swiper-button-next { width: 50px; height: 75px; }
}
@media (min-width: 1200px) {   /* 4 Slides (wie Live): Bildhöhe ≈ Breite/4 → halbe Höhe = 12.5% */
  .contentSlider .swiper-button-prev,
  .contentSlider .swiper-button-next { margin-top: 12.5%; }
}
@media (hover: hover) {
  .contentSlider__slide:hover .contentSlider__image img { transform: scale(1.1); }
  .contentSlider .swiper-button-prev:hover,
  .contentSlider .swiper-button-next:hover { background: rgb(var(--c-primary)); }
}


/* ============================================================
   Bild-Text Kacheln (DCE 8) — tiles
   Raster wie Live: 1-spaltig (≤640) → 2-spaltig (641–1180: k1|k2 / k3 voll / k4|k5)
   → 3-spaltig (>1180, k3 als hohe Mittelspalte). Kacheln flach in .tiles, Anordnung
   per grid-template-areas.
   ============================================================ */
.tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}
.tiles__item {
  position: relative;
  height: 250px;
  border: 2px solid rgb(var(--c-primary-lighter));
  overflow: hidden;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.tiles__item::before,
.tiles__item::after {
  position: absolute;
  content: '';
  display: block;
  height: 50%;
  left: 0; right: 0; bottom: 0;
}
.tiles__item::before { background: linear-gradient(to bottom, rgba(var(--c-primary), 0) 0%, rgba(var(--c-primary), 0.3) 100%); z-index: 2; }
.tiles__item::after  { background: linear-gradient(to bottom, rgba(var(--c-neutral-darkest), 0) 0%, rgba(var(--c-neutral-darkest), 0.8) 100%); z-index: 1; }

.tiles__front .tiles__headline {
  position: absolute;
  bottom: 10px;
  left: 15px;
  z-index: 3;
}
.tiles__overlay {
  position: absolute;
  left: 10px; top: 10px; bottom: 10px; right: 10px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: rgba(var(--c-primary), 0.9);
  color: rgb(var(--c-neutral-lightest));
  padding: 15px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.tiles__headline {
  display: block;
  margin: 0;
  font-family: var(--f-family-2);
  font-weight: var(--f-weight-b);
  font-style: italic;
  font-size: 156%;
  color: rgb(var(--c-neutral-lightest));
  text-transform: uppercase;
  line-height: 120%;
}
.tiles__overlay .tiles__headline { margin-bottom: 10px; }
.tiles__text {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 87%;
}
/* Button in der Overlay-Kachel: weißer Outline-Button. Der Look sitzt KOMPLETT auf dem span
   .font__button (padding + 2px-Rand + Schrift aus firstload.css) — hier nur Grund transparent
   und Rand/Schrift auf weiß. Der innere <a> bekommt KEIN eigenes padding/border/background,
   sonst doppelter Rand und zu breit. */
.tiles__overlay .font__button {
  align-self: flex-start;   /* nur so breit wie Inhalt (Overlay ist flex-column, sonst volle Breite) */
  margin-top: 1em;          /* Abstand nach oben zum Text */
  background: transparent;
  border-color: rgb(var(--c-neutral-lightest));
  font-size: 100%;          /* nicht das 125% aus firstload.css ab 640px */
}
.tiles__overlay .font__button,
.tiles__overlay .font__button a { color: rgb(var(--c-neutral-lightest)); }

/* Hover wie Live `.kachel-hover .textbutton a:hover` (color #006682, background #fff): der weiße
   Outline-Button füllt sich weiß, der Text wird teal — auf dem teal Overlay-Grund lesbar (der
   generische firstload-Hover würde teal Schrift auf transparentem = teal Grund erzeugen). */
@media (hover: hover) {
  .tiles__overlay .font__button:hover {
    background: rgb(var(--c-neutral-lightest));
    border-color: rgb(var(--c-neutral-lightest));
  }
  .tiles__overlay .font__button:hover a { color: rgb(var(--c-primary)); }
}

/* Overlay-Reveal bewusst NICHT auf @media (hover:hover) beschränkt: so zeigt auf Touch der
   erste Tap das Overlay (Tap-Hover wie Live) und macht den "Erfahre mehr"-Button erreichbar;
   :focus-within deckt Tastatur-/robuste Touch-Fälle ab. */
.tiles__item:hover .tiles__overlay,
.tiles__item:focus-within .tiles__overlay { opacity: 1; }
.tiles__item:hover .tiles__front,
.tiles__item:focus-within .tiles__front { opacity: 0; }

@media (hover: hover) {
  .tiles__overlay .font__button:hover { background: rgb(var(--c-neutral-lightest)); }
  .tiles__overlay .font__button:hover,
  .tiles__overlay .font__button:hover a { color: rgb(var(--c-primary)); }
}

/* 2-spaltig ab 501px (Live 501–1024): k1|k2 oben, k3 volle Breite, k4|k5 unten. */
@media (min-width: 501px) {
  .tiles {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "k1 k2"
      "k3 k3"
      "k4 k5";
  }
  .tiles__item:nth-child(1) { grid-area: k1; }
  .tiles__item:nth-child(2) { grid-area: k2; }
  .tiles__item:nth-child(3) { grid-area: k3; }
  .tiles__item:nth-child(4) { grid-area: k4; }
  .tiles__item:nth-child(5) { grid-area: k5; }
  .tiles__front .tiles__headline { bottom: 15px; left: 20px; }
  .tiles__overlay { padding: 20px; }
}
@media (min-width: 1024px) {
  .tiles__front .tiles__headline { bottom: 25px; left: 30px; }
  .tiles__overlay { padding: 25px; }
}
/* 3-spaltig ab 1025px (Live >1024): k3 als hohe Mittelspalte über beide Zeilen. */
@media (min-width: 1025px) {
  .tiles {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
      "k1 k3 k4"
      "k2 k3 k5";
    height: 640px;
  }
  .tiles__item { height: auto; }
  .tiles__headline { font-size: 218%; }
  .tiles__overlay { padding: 35px; }
  .tiles__overlay .tiles__headline { margin-bottom: 20px; }
}
@media (min-width: 1681px) {
  .tiles__text { font-size: 91%; }
}


/* ============================================================
   Scrollbutton „nach oben" (DCE 4) — scrollTop (Inline-SVG-Chevron)
   ============================================================ */
.scrollTop {
  display: block;
  width: 40px;
  height: 40px;
  background-color: rgb(var(--c-primary));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M10 30 24 16 38 30' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath d='M10 30 24 16 38 30' fill='none' stroke='%23000' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
  transition: background-color 0.3s ease;
}
@media (hover: hover) {
  .scrollTop:hover { background-color: rgb(var(--c-primary-dark)); }
}

/* Hinweis: der Button (.font__button), die Icon-Font (.font__far) und die Überschriften
   (.headline) sind globale v12-Klassen (template.css/firstload.css) — hier nicht dupliziert.
   Die DCE-Templates verwenden diese Klassen direkt. */