/* Hero-Slider - Masse aus Figma (Frame "Hero Header D"):
   Bild 1280x580, Radius 4px | Textbox 600px, Padding 24px, Abstand zum
   Link 32px, links 16px eingerueckt, oben 4px Radius | Label 14px/150%
   Versalien | Titel 36px/120% #212529 | Link 16px/24px #009FE3 |
   Pfeile 36x36, 1px Rand #3C474F 80%, Abstand 6px.
   Mechanik: Bootstrap-4-Carousel aus dem Theme, kein eigenes JS.
   Gewichte 500 und kein Letter-Spacing - Projektkonvention. */

.mantik-heroslider,
#content section.mantik-heroslider { margin: 0 0 4rem; padding: 0; }

/* Abstand zur Kanton-Pille (die ragt 16px in den Inhalt): 16px + 16px Luft.
   Gehoert zum Slider, nicht zum Header. Auf dem Handy liegt der Kanton-
   Balken separat darueber - dort kein Abstand. */
@media (min-width: 768px) {
  .mantik-heroslider,
  #content section.mantik-heroslider { padding-top: 32px; }
}

/* Slider so breit wie die Navigation (Header-Container 1400px statt
   1280px fuer normalen Inhalt, siehe mantik_neu header.css) */
@media (min-width: 1400px) {
  #content .mantik-heroslider > .container,
  .mantik-heroslider > .container { max-width: 1400px; }
}
.mantik-heroslider__carousel { position: relative; }

.mantik-heroslider .carousel-item { position: relative; }

/* Maus-Drag (Frontend.js) */
.mantik-heroslider__carousel.is-draggable .carousel-inner { cursor: grab; }
.mantik-heroslider__carousel.is-dragging .carousel-inner { cursor: grabbing; user-select: none; }
.mantik-heroslider__carousel.is-dragging a { pointer-events: none; }
.mantik-heroslider__media img { -webkit-user-drag: none; user-select: none; }

#content .mantik-heroslider__media img,
.mantik-heroslider__media img {
  display: block; width: 100%; height: 580px; object-fit: cover;
  border-radius: 4px;
}

.mantik-heroslider__caption {
  position: absolute; left: 16px; bottom: 0; z-index: 2;
  width: 600px; max-width: calc(100% - 32px); box-sizing: border-box;
  display: flex; flex-direction: column; gap: 32px;
  padding: 24px; background: #fff; border-radius: 4px 4px 0 0;
}
.mantik-heroslider__copy { display: flex; flex-direction: column; gap: 6px; }

.mantik-heroslider .mantik-heroslider__kicker,
#content .mantik-heroslider .mantik-heroslider__kicker {
  margin: 0; font-size: .875rem; line-height: 1.5; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0; color: #212529;
}
.mantik-heroslider .mantik-heroslider__headline,
#content .mantik-heroslider .mantik-heroslider__headline {
  margin: 0; font-size: 2.25rem; line-height: 1.2; font-weight: 500; color: #212529;
}

.mantik-heroslider .mantik-heroslider__link,
#content .mantik-heroslider .mantik-heroslider__link {
  align-self: flex-start; display: inline-block;
  font-size: 1rem; line-height: 1.5; font-weight: 500; color: #009fe3; text-decoration: none;
}
.mantik-heroslider .mantik-heroslider__link:hover,
#content .mantik-heroslider .mantik-heroslider__link:hover { text-decoration: none; color: #009fe3; }
.mantik-heroslider__linkarrow { display: inline-block; transition: transform .2s ease; color: inherit; }
.mantik-heroslider__link:hover .mantik-heroslider__linkarrow,
.mantik-heroslider__link:focus .mantik-heroslider__linkarrow { transform: translateX(4px); }

/* ---- Steuerung unter dem Bild: Punkte links, Pfeile rechts ---- */
.mantik-heroslider__controls {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 16px;
}

/* Bootstrap-Indikatoren komplett neu (dort absolut, Balken, halbtransparent) */
.mantik-heroslider .mantik-heroslider__dots {
  position: static; display: flex; align-items: center; gap: 6px;
  margin: 0; padding: 0; list-style: none; justify-content: flex-start;
}
.mantik-heroslider .mantik-heroslider__dots li {
  flex: 0 0 auto; box-sizing: content-box;
  width: 6px; height: 6px; margin: 0; padding: 0;
  border: 0; border-radius: 50%; opacity: 1; text-indent: 0;
  background: #d9d9d9; cursor: pointer; transition: background-color .2s ease;
}
.mantik-heroslider .mantik-heroslider__dots li.active { background: #212529; }
/* Der Punkt ist nur 6px gross - zum Treffen zu wenig. Die unsichtbare
   Flaeche darueber macht ihn anklickbar, ohne ihn groesser aussehen zu
   lassen. Breite wie der Abstand von Punkt zu Punkt, damit sich die
   Flaechen nicht ueberlappen. */
.mantik-heroslider .mantik-heroslider__dots li { position: relative; z-index: 2; }
.mantik-heroslider .mantik-heroslider__dots li::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 12px; height: 24px; transform: translate(-50%, -50%);
}

.mantik-heroslider__arrows { display: flex; gap: 6px; }
.mantik-heroslider .mantik-heroslider__arrow,
#content .mantik-heroslider .mantik-heroslider__arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; box-sizing: border-box;
  border: 1px solid rgba(60, 71, 79, .8); border-radius: 50%;
  color: #3c474f; background: #fff; text-decoration: none;
  font-size: 1rem; line-height: 1; /* Pfeil-SVG (wh-arrow) in Textgroesse */
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.mantik-heroslider .mantik-heroslider__arrow:hover,
.mantik-heroslider .mantik-heroslider__arrow:focus,
#content .mantik-heroslider .mantik-heroslider__arrow:hover {
  background: #009fe3; border-color: #009fe3; color: #fff;
}

/* ---- Handy: Bild randlos, Textbox darunter, groessere Pfeile ---- */
@media (max-width: 767px) {
  /* .carousel-inner schneidet ab (overflow) - darum Container ohne
     Innenabstand und die 16px auf Text und Steuerung verschieben */
  body .mantik-heroslider > .container { padding-left: 0; padding-right: 0; }
  .mantik-heroslider__caption,
  .mantik-heroslider__controls { padding-left: 16px; padding-right: 16px; }
  #content .mantik-heroslider__media img,
.mantik-heroslider__media img { height: auto; aspect-ratio: 16 / 10; border-radius: 0; }
  .mantik-heroslider__caption {
    position: static; width: auto; max-width: none;
    padding-top: 24px; padding-bottom: 0; border-radius: 0; gap: 24px;
  }
  .mantik-heroslider .mantik-heroslider__headline,
  #content .mantik-heroslider .mantik-heroslider__headline { font-size: 2rem; }
  .mantik-heroslider__controls { margin-top: 40px; }
  .mantik-heroslider .mantik-heroslider__arrow,
  #content .mantik-heroslider .mantik-heroslider__arrow { width: 44px; height: 44px; }
}