/* ==========================================================================
   Leistungs-Slider im Hero
   --------------------------------------------------------------------------
   Vier Produktbilder, gerade stehend, zum Wischen nach links und rechts.
   Geführt wird über eine schmale Leiste über der Beschriftung - Pfeile gibt
   es bewusst keine mehr.

   Gewischt wird mit dem Browser selbst (overflow-x + scroll-snap), nicht mit
   nachgebauten Zeigerereignissen. Das gibt Schwung, Gummiband und
   Tastaturbedienung geschenkt und läuft auf dem Handy flüssiger.

   Zwei Kniffe sorgen dafür, dass beim Wechsel nichts hart an der Kante
   abgeschnitten wirkt:
   - eine Maske blendet die Spur an beiden Rändern weich aus,
   - karten.js rechnet je Bild den Abstand zur Mitte aus und setzt danach
     Grösse und Deckkraft; das nächste Bild wächst also herein statt
     hereinzuspringen.
   Nur auf der Startseite geladen (siehe functions.php).
   ========================================================================== */

/* Der Rahmen um den Hero hiess frueher .hero-buehne und war 260vh hoch, damit
   der klebende Hero eine Scrollstrecke hatte. Geblieben ist nur die Aufgabe,
   dem Elementor-Container Flaeche und Abstaende zu nehmen - der Hero bringt
   beides selbst mit.

   Der Selektor muss dafuer VIER Klassen tief sein. hell.css fasst jeden
   Abschnitt ueber ".site-main > .elementor > .e-con" (drei Klassen) und gibt
   ihm einen seitlichen Aussenabstand. Ein Selektor mit zwei Klassen verliert
   dagegen: der Rahmen behielt seine 20 px links, blieb aber 100 % breit und
   ragte rechts aus dem Fenster. Links stand danach der doppelte weisse Rand,
   rechts gar keiner. */
.site-main > .elementor > .e-con.hero-rahmen,
.site-main > .e-con.hero-rahmen {
  margin: 0;
  padding: 0;
  background: none;
  border-radius: 0;
  overflow: visible;
}

/* Ein waagerechter Scrollbereich verlangt im Raster so viel Platz, wie sein
   Inhalt breit ist - vier Folien nebeneinander. Damit sprengte er die Spalte
   und ragte auf dem Handy aus dem Hero heraus. min-width: 0 erlaubt ihm,
   kleiner zu werden als sein Inhalt; genau dafuer ist ein Scrollbereich da. */
.hero__stage-wrap,
.karten-slider,
.karten-spur { min-width: 0; }

/* Die Bilder sind die Hauptsache im Hero und sollen gross stehen. Die rechte
   Spalte bekommt dafür erstens mehr Platz als die Textspalte, und zweitens
   greift der Slider über sie hinaus: nach links hinter die Textspalte, nach
   rechts fast bis an die Kante des Hero. Das ist so gewollt - die Bilder
   dürfen sich hinter Überschrift und Kästchen schieben.

   Damit das geht, liegt die Textspalte darüber (z-index). Sonst stünde das
   Bild vor der Überschrift statt dahinter. */
@media (min-width: 1024px) {
  .hero__inner:has(.karten-slider) {
    grid-template-columns: minmax(0, .87fr) minmax(0, 1.13fr);
  }
  .hero__inner:has(.karten-slider) .hero__copy {
    position: relative;
    z-index: 3;
    /* Oben buendig statt mittig: die Textspalte soll direkt unter der
       Kopfzeile ansetzen, nicht in der Mitte der Zeile schweben. Die
       Bildspalte bleibt mittig - dort richtet karten.js die Kaestchen
       ohnehin an den Knoepfen aus. */
    align-self: start;
  }
  /* Groesser als der uebrige Stil ihn setzt. Dass "Wirkung." dabei ueber die
     Spalte hinausragt, ist gewollt - die Textspalte liegt vor dem Bild. */
  .hero__inner:has(.karten-slider) .hero__title,
  .hero__inner:has(.karten-slider) .hero__title .elementor-heading-title {
    font-size: clamp(3.4rem, 2.1rem + 6.5vw, 8.5rem);
    /* Blocksy bricht lange Woerter notfalls mitten durch. Bei dieser Groesse
       passt "Wirkung." nicht mehr in die Spalte und wurde zu "Wirkun / g."
       zerlegt. Es soll stattdessen ueber die Spalte hinausragen - dafuer
       liegt die Textspalte ja vor dem Bild. */
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }
  .karten-slider {
    --ueberhang-links: clamp(0px, 6.5vw, 122px);
    --ueberhang-rechts: clamp(0px, 3.6vw, 66px);
    width: calc(100% + var(--ueberhang-links) + var(--ueberhang-rechts));
    margin-left: calc(-1 * var(--ueberhang-links));
    margin-right: calc(-1 * var(--ueberhang-rechts));
  }
}

.karten-slider {
  --karte-h: clamp(320px, min(56vw, 74vh), 740px);
  /* Saum: so breit ist der weiche Rand der Maske. Die Folie bekommt ihn als
     Polsterung, damit das Bild im Stillstand nicht hineinragt. */
  --saum: clamp(14px, 1.8vw, 26px);
  position: relative;
  /* KEIN width: 100% hier. Die Regel stand frueher an dieser Stelle und hat
     den Ueberhang aus dem Medienblock weiter oben wieder aufgehoben - gleiche
     Spezifitaet, aber spaeter im Stylesheet. Als Blockelement fuellt der
     Slider seine Spalte ohnehin aus. */
}

/* ------------------------------------------------------------------- Spur */

.karten-spur {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Damit das Wischen am Ende nicht die ganze Seite mitzieht. */
  overscroll-behavior-x: contain;
  /* Die Leiste des Browsers bleibt unsichtbar - geführt wird über die
     eigene Leiste unter den Bildern. */
  scrollbar-width: none;
  -ms-overflow-style: none;

  /* Weiche Ränder: das hereinwandernde Bild wird nicht mehr senkrecht
     abgeschnitten, sondern blendet sich auf. */
  -webkit-mask-image: linear-gradient(90deg,
      transparent 0, #000 var(--saum),
      #000 calc(100% - var(--saum)), transparent 100%);
  mask-image: linear-gradient(90deg,
      transparent 0, #000 var(--saum),
      #000 calc(100% - var(--saum)), transparent 100%);
}
.karten-spur::-webkit-scrollbar { width: 0; height: 0; display: none; }

/* Am Rechner gibt es keine Wischgeste - dort zieht man mit der Maus, und der
   Zeiger sagt das auch an. karten.js macht die Bewegung. */
@media (hover: hover) and (pointer: fine) {
  .karten-spur { cursor: grab; }
  .karten-spur.wird-gezogen { cursor: grabbing; }
}
/* Beim Ziehen soll weder Text markiert noch das Bild aus der Seite gezogen
   werden - beides wuerde die Geste abbrechen. */
.karten-spur.wird-gezogen { user-select: none; }
.karte__bild { -webkit-user-drag: none; user-select: none; }
.karten-spur:focus-visible {
  outline: 2px solid var(--navy, #1E3C72);
  outline-offset: 6px;
  border-radius: 18px;
}

.karte {
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: grid;
  place-items: center;
  height: var(--karte-h);
  padding: 0 var(--saum);
}

/* --naehe kommt aus karten.js: 1 in der Mitte, 0 ganz aussen. */
.karte__bild {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  transform: scale(calc(.9 + .1 * var(--naehe, 1)));
  opacity: calc(.45 + .55 * var(--naehe, 1));
  will-change: transform, opacity;
}

/* ------------------------------------------------------------------ Leiste
   Vier Kästchen mit je einem Sinnbild der Leistung. Sie führen durch den
   Slider und zeigen zugleich, worum es geht - eine dünne Linie tat das
   nicht. Zurückhaltend gehalten: helle Fläche, feine Kante; nur das
   aktuelle Kästchen tritt hervor. */

.karten-leiste {
  display: flex;
  justify-content: center;
  gap: clamp(.45rem, 1vw, .7rem);
  /* Der negative obere Abstand zieht die Kästchen über den unteren Rand des
     Bildes. Das ist gewollt: so bleibt Platz für ein deutlich grösseres Bild,
     ohne dass der Hero wächst. */
  margin: clamp(-64px, -4.5vh, -18px) auto clamp(.8rem, 1.6vw, 1.1rem);
  position: relative;
  z-index: 2;
}
.karten-leiste button {
  display: grid;
  place-items: center;
  width: clamp(42px, 4.4vw, 56px);
  height: clamp(42px, 4.4vw, 56px);
  padding: 0;
  border: 1px solid rgba(30, 60, 114, .12);
  border-radius: clamp(12px, 1.2vw, 16px);
  /* Die Kaestchen liegen jetzt ueber dem unteren Rand des Bildes. Auf einem
     weissen Shirt waere eine halbdurchsichtige Flaeche nicht mehr zu sehen -
     deshalb deckender und mit einem feinen Schatten. */
  background: rgba(255, 255, 255, .86);
  box-shadow: 0 4px 12px -8px rgba(30, 60, 114, .45);
  color: rgba(30, 60, 114, .45);
  cursor: pointer;
  transition: background-color .3s var(--ease), border-color .3s var(--ease),
              color .3s var(--ease), box-shadow .3s var(--ease),
              transform .3s var(--ease);
}
.karten-leiste button svg {
  width: clamp(21px, 2.1vw, 27px);
  height: clamp(21px, 2.1vw, 27px);
}
.karten-leiste button:hover {
  background: #fff;
  color: rgba(30, 60, 114, .7);
}
.karten-leiste button:focus-visible { outline: 2px solid var(--navy, #1E3C72); outline-offset: 3px; }
.karten-leiste button.ist-aktiv {
  background: #fff;
  border-color: rgba(30, 60, 114, .2);
  color: var(--navy, #1E3C72);
  box-shadow: 0 8px 18px -10px rgba(30, 60, 114, .55);
  transform: translateY(-2px);
}

/* ----------------------------------------------------- Beschriftung
   Eine einzige Beschriftung für alle vier Bilder, von karten.js gewechselt.
   Früher stand sie in jeder Folie; dort hätte die Leiste darüber nicht
   sitzen können, ohne mitzuwandern. Den Inhalt trägt der Alternativtext
   der Bilder, deshalb ist sie für Vorleseprogramme ausgeblendet. */

.karten-beschriftung {
  display: grid;
  justify-items: center;
  gap: .42rem;
  margin: 0;
  text-align: center;
  transition: opacity .28s var(--ease);
}
.karten-beschriftung.wechselt { opacity: 0; }

.karte__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.14rem, 1.75vw, 1.56rem);
  letter-spacing: -.015em;
  line-height: 1.16;
  color: var(--ink);
  text-wrap: balance;
}

.karte__zeile {
  font-size: clamp(.8rem, 1.05vw, .92rem);
  line-height: 1.45;
  color: var(--text-muted);
  max-width: 34ch;
  text-wrap: balance;
  /* Platz für zwei Zeilen, auch wenn nur eine kommt: sonst springt die
     Beschriftung beim Weiterwischen in der Höhe. */
  min-height: 2.9em;
}

/* ------------------------------------------------------------------ Handy */

@media (max-width: 900px) {
  .karten-slider {
    --karte-h: clamp(300px, 92vw, 500px);
    --saum: clamp(10px, 3vw, 20px);
    /* Auch hier ein kleiner Ueberhang - er bleibt innerhalb der Hero-Karte,
       holt dem Bild aber die Polsterung des Containers zurueck. */
    --ueberhang: clamp(0px, 4vw, 18px);
    width: calc(100% + 2 * var(--ueberhang));
    margin-inline: calc(-1 * var(--ueberhang));
  }
  .karten-leiste { margin-top: clamp(-30px, -2.5vh, -8px); }
}

/* ------------------------------------------------------------------- Ruhe */

@media (prefers-reduced-motion: reduce) {
  .karten-spur { scroll-behavior: auto; }
  .karten-leiste button,
  .karten-beschriftung { transition: none; }
  .karte__bild { transform: none; opacity: 1; }
}