/* D E R   B I L D E R - S L I D E R
   ( ausstattung.html und klinik.html - dieselbe Komponente, nicht kopiert.
     Was nur auf klinik.html gilt, haengt an .slider-nach-parallax ganz
     unten in dieser Datei. )

   Unter dem blauen Kopf standen drei Parallax-Panels mit weissen
   Baskerville-Zeilen darauf. Jetzt laeuft dort ein Kartenstapel aus sechs
   Bildern: die naechste Aufnahme schiebt sich vollstaendig ueber die
   aktuelle, die abgelegte bleibt liegen.

   D I E   M E C H A N I K   I S T   D I E   D E S   B A U S T E I N E -
   S L I D E R S   auf konzept.html - gleicher Creative-Effect, gleiche
   Z-Ebene von Hand, gleicher Schatten an der Vorderkante, gleiche
   Bedienleiste. Was hier fehlt, ist alles Text-Bezogene: keine Doppelseite,
   keine Spalten, keine Ziffer, kein weisses Blatt. Eine Slide ist nur ein
   Bild.

   WARUM EINE EIGENE DATEI und keine gemeinsame Klasse mit
   css/bausteine-slider.css: Dort haengt jede zweite Regel an .baustein,
   .baustein__text oder .baustein__bild - Bestandteile, die es hier nicht
   gibt. Uebernommen sind die WERTE, nicht die Selektoren; sie stehen unten
   jeweils mit dem Hinweis, wo ihr Gegenstueck liegt. Wer an der Bedienleiste
   etwas aendert, muss es an drei Stellen tun: hier, in
   css/bausteine-slider.css und in css/indikationen-slider.css.

   Geladen NACH lib/swiper/swiper-bundle.min.css und NACH css/style.css. */

/* D I E   B R E I T E   F O L G T   D E M   B L A U E N   K O P F

   Der Slider ist nicht randlos, sondern genau so breit wie der blaue Balken
   darueber: 96% mit je 2% Aussenabstand. Das sind dieselben Werte, die
   .lightblue480 in css/style.css traegt - hier wiederholt und nicht per
   Klasse geteilt, weil .lightblue480 zusaetzlich Hoehe und Hintergrundfarbe
   setzt, die hier beide falsch waeren.

   Gemessen bei 1440px: Balken 29..1411, Slider 29..1411 - dieselben Kanten.
   Die Ueberschrift IM Balken sitzt noch einmal weiter innen (bei 1440px ab
   252px), das ist der Innenabstand von .lightblue480content.

   Die Bedienleiste darunter bleibt im .container-text und fluchtet damit mit
   dem Intro-Text; sie ist schmaler als der Slider, so wie die Ueberschrift
   schmaler ist als der Balken.

   D I E   H O E H E   S T A F F E L T   S I C H

   Je schmaler das Fenster, desto flacher das Band - ein 62vh hohes Bild
   fuellt auf dem Telefon fast den ganzen Bildschirm und schiebt alles
   Weitere aus dem Blick.

   Die Stufen stehen hier und nicht in den min*-max*-Dateien, aus demselben
   Grund wie beim Bausteine- und beim Indikationen-Slider: Der Baustein
   bleibt an einer Stelle lesbar. Die Grenzen sind die des Projektrasters. */
.ausstattung-slider.swiper {
   width: 100%;
   margin-inline: 0;
   height: 75vh;
}

@media screen and (min-width: 1024px) and (max-width: 1200px) {

   .ausstattung-slider.swiper {
      height: 58vh;
   }
}

@media screen and (min-width: 769px) and (max-width: 1023px) {

   .ausstattung-slider.swiper {
      height: 50vh;
   }
}

@media screen and (min-width: 481px) and (max-width: 768px) {

   .ausstattung-slider.swiper {
      height: 44vh;
   }
}

@media screen and (max-width: 480px) {

   .ausstattung-slider.swiper {
      height: 36vh;
   }
}

/* Das Laufband und die Folien fuellen den Container.

   Swiper gibt Slides von Haus aus height: 100%; die Zeile steht hier
   trotzdem, weil .swiper-slide in css/slides.css fuer die Bildergalerie
   weiter unten auf der Seite eine eigene Hoehe bekommt. */
.ausstattung-slider .swiper-wrapper,
.ausstattung-slider .swiper-slide {
   height: 100%;
}

/* D I E   T A F E L K A N T E:   W E I S S E R   R A N D   U N D
   W E I C H E R   S C H A T T E N

   Jede Tafel traegt links einen 6px breiten weissen Rand und dahinter einen
   weichen Schatten. Beim Ueberlappen trennt das die beiden Aufnahmen
   sauber: erst die helle Kante, dann der Schatten, der auf das Bild
   darunter faellt.

   Das ersetzt das fruehere Schatten-Layer (.swiper-slide::before, 180px
   breiter Verlauf). Der Verlauf setzte hart an der Kante an und lief weit
   ins darunterliegende Bild; bei Fotos statt weisser Blaetter las sich das
   als Verschmutzung, nicht als Kante.

   box-shadow statt eines Layers geht hier, weil der Schatten NICHT an allen
   vier Kanten stehen soll: negative Weite (-12px) und negativer Spread
   (-12px) halten ihn auf die linke Seite. Bei den Bausteinen war genau das
   der Grund fuer das eigene Layer - dort reicht der Schatten 180px weit,
   und fuer diese Reichweite bekommt man ihn mit box-shadow nicht mehr
   einseitig.

   Die Rahmenbreite geht von der Bildflaeche ab (box-sizing: border-box),
   das Bild wird also 6px schmaler - gewollt, das ist der weisse Rand.

   overflow: visible nimmt Swipers ".swiper-creative .swiper-slide
   { overflow: hidden }" zurueck. Fuer den box-shadow braeuchte es das
   nicht - der wird ausserhalb der Border-Box gezeichnet und von der
   eigenen overflow-Angabe nicht beschnitten -, es bleibt aber stehen,
   damit spaetere Auflagen innerhalb der Folie nicht ueberraschend
   abgeschnitten werden. Gleiche Spezifitaet (0,2,0) wie Swipers Regel, es
   entscheidet die Ladereihenfolge. */
.ausstattung-slider .swiper-slide {
   overflow: visible;
   position: relative;
   border-left: 6px solid #ffffff;
   box-shadow: -12px 0 20px -12px rgba(0, 0, 0, 0.3);
}

/* Das Bild fuellt die Folie randlos.

   object-fit: cover schneidet an der langen Kante zu, statt zu verzerren.
   Die Motive liegen in 8:3 vor; passt das Band-Verhaeltnis nicht dazu,
   wird oben und unten beschnitten - gewollt, das ist der Preis fuer ein
   formatfuellendes Bild ueber alle Breiten.

   css/style.css gibt Bildern in Textabschnitten 2rem Abstand nach unten;
   margin: 0 nimmt das zurueck. */
.ausstattung-slider .swiper-slide img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
   margin: 0;
}

.ausstattung-slider .swiper-slide picture {
   display: block;
   width: 100%;
   height: 100%;
}

/* D I E   B E D I E N L E I S T E

   Dieselbe Leiste wie unter den beiden anderen Slidern, Werte eins zu eins.
   Die ausfuehrliche Herleitung steht in css/indikationen-slider.css: Swiper
   stellt die Scrollbar absolut an den unteren Containerrand, wo sie ueber
   dem Bild schwebte; deshalb zurueck in den Fluss und saemtliche Vorgaben
   zuruecknehmen. */
.ausstattung-slider__leiste {
   display: flex;
   align-items: center;
   gap: 8px;
   margin-top: 32px;
}

.ausstattung-slider__leiste .swiper-scrollbar {
   position: static;
   flex: 1 1 auto;
   width: auto;
   height: 2px;
   margin-right: 8px;
   background-color: rgba(1, 8, 66, 0.1);
   border-radius: 0;
   opacity: 1;
   z-index: auto;
}

/* Das Segment: jade, 6px statt der 2px der Schiene, ueber top: -2px mittig
   auf die Linie gesetzt. Die Schiene bleibt der stille graue Strich, das
   Segment ist die einzige farbige Marke der Leiste.

   Der Ton MUSS deckend angegeben sein - das Segment ist ein Kind der
   Schiene, zweimal 10% Deckkraft uebereinander ergaeben rund 19% und damit
   einen dunkleren Kern mit helleren Raendern. var(--jadegruen) ist deckend,
   damit erledigt sich die Frage; solange hier Grau stand, war es der
   gerechnete Wert #E6E6EC = rgba(1, 8, 66, 0.1) auf Weiss. Wer wieder auf
   Grau geht, muss den Wert neu rechnen.

   Dieselbe Leiste: css/indikationen-slider.css und
   css/bausteine-slider.css - alle drei jade. */
.ausstattung-slider__leiste .swiper-scrollbar-drag {
   height: 6px;
   top: -2px;
   background-color: var(--jadegruen);
   border-radius: 0;
}

.ausstattung-slider__zurueck,
.ausstattung-slider__weiter {
   display: flex;
   align-items: center;
   justify-content: center;
   flex: 0 0 auto;
   width: 32px;
   height: 32px;
   min-width: 0;
   margin: 0;
   padding: 0;
   border: none;
   border-radius: 50%;
   background-color: transparent;
   color: var(--darkblue);
   font: inherit;
   line-height: 1;
   cursor: pointer;
   transition: background-color 0.2s ease, opacity 0.2s ease;
}

.ausstattung-slider__zurueck i,
.ausstattung-slider__weiter i {
   font-size: 17px;
   line-height: 1;
   color: var(--darkblue);
}

.ausstattung-slider__zurueck:hover,
.ausstattung-slider__weiter:hover {
   background-color: var(--jadegruen);
}

.ausstattung-slider__zurueck.swiper-button-disabled,
.ausstattung-slider__weiter.swiper-button-disabled {
   opacity: 0.25;
   cursor: default;
}

.ausstattung-slider__zurueck.swiper-button-disabled:hover,
.ausstattung-slider__weiter.swiper-button-disabled:hover {
   background-color: transparent;
}

/* D E R   S L I D E R   U N T E R   E I N E M   P A R A L L A X - K O P F
   -----------------------------------------------------------------
   Nur dort noetig, wo die Komponente direkt unter dem ScrollMagic-Kopf
   sitzt - auf klinik.html. Auf ausstattung.html steht darueber ein
   gewoehnliches Farbband, dort greift diese Klasse nicht.

   Der obere Aussenabstand ist die 2%-Marke des Projekts - dieselbe, die
   das Passepartout traegt. Er haelt den weissen Streifen zwischen
   Parallax-Kopf und Slider.

   D I E   A N H E B U N G   S T E H T   N I C H T   H I E R.  Diese
   Klasse trug zuerst auch position: relative und z-index: 3 gegen die
   Ebene des Parallax-Kopfes, ohne die dort nichts bedienbar ist. Das
   sitzt jetzt in css/hero-ebene.css am <main> statt am einzelnen
   Abschnitt: Die Schicht deckt ein Band des Dokuments ab, kein
   bestimmtes Element - wer nur den ersten Abschnitt anhebt und spaeter
   etwas darunter einfuegt, faellt wieder hinein. Und es betrifft alle
   vier Hero-Seiten, nicht nur die mit einem Slider. Die Begruendung
   samt Fehlerbild steht dort. */
.slider-nach-parallax {
   margin-top: 2%;
}

/* D I E   6   P I X E L   D E R   T A F E L K A N T E   A U S G L E I C H E N
   -----------------------------------------------------------------
   Jede Folie traegt links einen 6px breiten weissen Rand - die Kante, die
   beim Ueberlappen die obenliegende Aufnahme von der darunter trennt. Der
   geht wegen box-sizing: border-box von der Bildflaeche ab.

   Bei der LINKEN Folie steht diese Kante vor dem Bild, ohne dass darunter
   etwas waere, wovon sie trennen muesste. Auf weissem Grund ist sie
   unsichtbar und wirkt wie ein zusaetzlicher Einzug: gemessen fluchten
   .bg1, .bg2, .content, main und der Slider-Kasten alle exakt bei 39,04px,
   das Bild beginnt aber bei 45,04px. Sechs Pixel, die man sieht, sobald
   darueber eine randlose Flaeche steht - auf klinik.html der dunkle
   Parallax-Kopf.

   Ausgeglichen wird am Container, nicht an der Folie: Der Slider rueckt um
   die Rahmenbreite nach links und wird um dieselbe breiter. Damit liegt die
   BILDKANTE auf 39,04px, die rechte Kante bleibt, wo sie war, und die
   Tafelkante selbst bleibt unangetastet - sie tut zwischen den Folien
   weiterhin ihren Dienst.

   NUR HIER, nicht in der Basisregel: Auf ausstattung.html soll sich
   optisch nichts aendern. */
.slider-nach-parallax .ausstattung-slider.swiper {
   margin-left: -6px;
   width: calc(100% + 6px);
}