/* A run of statements. The slide next door owns one sentence and its typography; this file
   owns what happens between them — and das Weiterschalten selbst macht `<u2-carousel>`. */

[qcms-mod="cont.luca.slides"] {
  /* Ohne JavaScript bleibt `<u2-carousel>` ein unbekanntes Element: die Aussagen stehen
     dann schlicht untereinander und man scrollt. Das ist der Rückfall, und er ist in
     Ordnung — darum hier keine Höhe und keine Überlauf-Regel am Behälter. */
  u2-carousel {
    /* Für den Fall ohne JavaScript: ein unbekanntes Element ist inline, die Aussagen
       stünden dann in einer Zeile. Sobald u2 aufrüstet, setzt `:host([mode=fade])` selbst
       `display:flex !important` und diese Zeile ist wirkungslos. */
    display: block;

    /* Wie lange ein Übergang dauert — nicht zu verwechseln mit der Wartezeit dazwischen,
       die als `--u2-carousel-slideshow-speed` am Element steht. Ruhig gesetzt: eine
       Aussage soll herüberdämmern, nicht umschlagen. */
    --u2-carousel-animation-speed: 1.2s;
  }

  /* Im fade-Modus liegen die Aussagen übereinander, gehalten von einem negativen
     Aussenabstand. Dafür muss jede die volle Breite belegen.

     `contain: inline-size` ist die Stelle, an der es auf dem Telefon hing. Im fade-Modus
     setzt u2 im Shadow DOM `:host([mode=fade]) .body { display:flex }` — ohne `min-width:0`.
     Dieses `.body` ist ein `<slot>` ohne `part`, von hier also nicht zu erreichen, und sein
     `min-width: auto` rechnet sich aus der min-content-Breite seines Inhalts: aus der
     **Summe** über alle Aussagen, denn sie stehen in einer Flex-Zeile nebeneinander (die
     negativen Aussenabstände, die sie später übereinanderlegen, zählen dabei nicht mit).
     Auf einem 390er-Telefon wurde der Slot so 442 breit, und die Aussage stand nicht mehr
     dort, wo man sie liest. Gemessen, nicht vermutet: mit `min-width:0` am Slot geht er auf
     390 zurück.

     `min-width: 0` an den Kindern hilft dagegen nicht — es nimmt einer Aussage nur ihr
     eigenes Mindestmass, ihr Beitrag zur Summe bleibt. `contain: inline-size` nimmt ihn:
     der Inhalt einer Aussage zählt für die Breitenrechnung des Slots gar nicht mehr, und
     das gilt für sechs Aussagen so wie für zwanzig. Deshalb liegt der seitliche Rand einer
     Aussage auch an ihrem inneren Behälter (siehe cms.cont.luca.slide) — eigener Rand
     zählt trotz Containment mit.

     Gehört eigentlich in u2 (`min-width: 0` an `:host([mode=fade]) .body`); solange es
     dort nicht steht, steht es hier. */
  u2-carousel > * {
    flex: 0 0 100%;
    contain: inline-size;
  }

  /* Die Pfeile bringt das Element selbst mit. Sie sind der Griff, mit dem man anhält —
     sobald der Fokus drin ist, wartet das Karussell —, sollen aber neben einer
     bildschirmfüllenden Aussage nicht mitreden. */
  u2-carousel::part(control) {
    opacity: .25;
    transition: opacity .2s;
  }
  u2-carousel::part(control):hover,
  u2-carousel::part(control):focus-visible { opacity: 1 }

  /* Die Punkte darunter: `<u2-carousel-nav>` bringt eigene Regeln mit (graue Scheiben);
     hier bekommen sie die Hand der Site — ein Ring, gefüllt, wo man steht. */
  u2-carousel-nav {
    gap: .7rem;
    margin: 0;
    padding-block: 1.2rem;
  }
  u2-carousel-nav > * {
    width: .7rem;
    height: .7rem;
    background: none;
    border: 1.5px solid currentColor;
    opacity: 1;
    /* `<u2-carousel-nav>` schreibt die Nummer in den Punkt und versteckt sie mit
       `color: transparent`. Damit wäre auch der Ring unsichtbar, denn er ist
       `currentColor` — die Ziffer verschwindet hier stattdessen über die Schriftgrösse. */
    color: inherit;
    font-size: 0;
  }
  u2-carousel-nav > .-active { background: currentColor }
}

/* Wer sein System auf weniger Bewegung gestellt hat, bekommt den Wechsel ohne Überblendung.
   Das Weiterschalten selbst bleibt — es ist der Inhalt der Seite, nicht seine Verzierung —,
   und angehalten wird es, sobald der Fokus im Karussell liegt. */
@media (prefers-reduced-motion: reduce) {
  [qcms-mod="cont.luca.slides"] u2-carousel { --u2-carousel-animation-speed: 0s }
}