/* I N D I K A T I O N E N   A L S   S L I D E R   ( nur index.html )

   Die zwoelf Karten standen als Raster untereinander; jetzt laufen sie
   waagerecht durch. Diese Datei enthaelt ausschliesslich, was der Umbau
   braucht - das Kartenbild selbst (heller Kopf, Jade-Linie, voller Text)
   steht unveraendert in css/style.css und wird hier nicht angefasst.

   Geladen NACH lib/swiper/swiper-bundle.min.css. Alle Regeln hier haben
   dieselbe oder hoehere Spezifitaet als die von Swiper; wo sie gleich ist,
   entscheidet die spaetere Position. */

/* Der Slider-Container.

   css/slides.css setzt fuer die Bildergalerie auf ausstattung.html ein
   globales ".swiper { width: 90vw }" - und diese Datei ist auf index.html
   ebenfalls geladen. Ohne die Ruecknahme hier waere der Slider 90% des
   Fensters breit und stuende nicht mehr in einer Flucht mit dem grauen
   Kopf darueber.

   overflow: hidden bringt Swiper selbst mit; dadurch schneidet die Kante
   des Containers die angeschnittene naechste Karte sauber ab. */
.indikationen-slider.swiper {
   width: 100%;
   /* Dieselbe Fuge zum grauen Kopf wie zuvor am Raster. */
   margin-top: 4px;
}

/* Die Kartenliste ist zugleich Swipers Laufband.

   .indikationen war ein Grid mit drei Spalten (css/style.css) und faellt in
   den min*-max*-Dateien auf zwei und eine Spalte zurueck. Als Laufband muss
   sie flex sein - das bringt .swiper-wrapper mit, aber mit derselben
   Spezifitaet wie .indikationen (0,1,0). Deshalb steht das hier noch einmal
   ausdruecklich mit zwei Klassen (0,2,0), sonst haenge die Darstellung
   davon ab, welche Datei zuletzt geladen wurde.

   grid-template-columns wird mit zurueckgenommen: bliebe der Wert stehen,
   wuerde er zwar nicht wirken, aber bei jeder spaeteren Fehlersuche in den
   Entwicklerwerkzeugen als vermeintliche Ursache auftauchen.

   gap: 0 ist dagegen kein Aufraeumen, sondern noetig: gap wirkt in Flexbox
   genauso wie im Grid. Die 4px des Rasters blieben also stehen und kaemen
   zu Swipers spaceBetween von 4px hinzu - gemessen waren es 8px statt 4.
   Schlimmer als der zu grosse Abstand ist, dass Swiper davon nichts weiss:
   es rechnet die Verschiebung des Laufbands aus Kartenbreite plus
   spaceBetween aus, und jede Fuge, die CSS zusaetzlich einzieht, laeuft
   ueber zwoelf Karten hinweg aus dem Ruder.

   margin-top gehoert jetzt an den Container darueber, nicht mehr hierher -
   Swiper verschiebt das Laufband per transform, ein Aussenabstand daran
   waere eine Wackelquelle. */
.indikationen.swiper-wrapper {
   display: flex;
   grid-template-columns: none;
   gap: 0;
   margin-top: 0;
   /* Die Kurve fuer den Kartenwechsel. Swiper setzt nur die Dauer als
      Inline-Angabe (speed in js/indikationen-slider.js), die Kurve bleibt
      dem Stylesheet ueberlassen; ohne diese Zeile gilt die Vorgabe ease,
      die kraeftig anzieht und lange ausrollt. Dieselbe Kurve wie beim
      Aufklappen der Karten - eine Bewegungssprache fuer den Baustein.

      Waehrend des Ziehens ist die Dauer 0, die Kurve also ohne Wirkung -
      der Finger fuehrt die Karten unmittelbar. */
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Gleich hohe Karten.

   Swiper gibt jedem Slide von Haus aus height: 100%. Das wird hier auf auto
   zurueckgesetzt - dann bestimmt die hoechste Karte die Hoehe des Laufbands,
   und alle anderen werden als Flex-Kinder darauf gestreckt. Erst dadurch
   schneidet die angeschnittene Karte am rechten Rand ueber die volle Hoehe
   sauber ab, statt auf halber Strecke zu enden.

   ACHTUNG, hier lag ein Fehler: Die Karte IST der Slide - sie traegt beide
   Klassen. Ein zusaetzliches height: 100% "fuer die Karte" ist deshalb kein
   zweiter Gurt, sondern schneidet den ersten durch: eine ausdrueckliche
   Hoehe an einem Flex-Kind schaltet dessen Streckung ab, und 100% von einer
   unbestimmten Hoehe ist wieder auto. Gemessen standen die Karten dann
   zwischen 442px und 974px hoch. Die Hoehe kommt allein aus der Streckung.

   display: flex nimmt zugleich den subgrid-Block aus css/style.css
   zurueck, der jeder Karte display: grid und grid-row: span 2 gibt. Im
   Raster richtete das die Koepfe zeilenweise aus; im Laufband gibt es
   keine Zeilen mehr, und die Koepfe gleicht ohnehin js/indikationen.js
   ueber alle Karten hinweg an. Zwei Klassen (0,2,0) schlagen die eine
   Klasse des @supports-Blocks (0,1,0).

   Der zweite Selektor greift nur, falls das Markup spaeter doch einen
   eigenen Slide-Wrapper um die Karte bekommt - dann ist die Karte ein
   Flex-Kind des Slides und wird von dort gestreckt. */
.indikationen-slider .swiper-slide {
   height: auto;
}

.indikationen-slider .swiper-slide,
.indikationen-slider .indikation {
   display: flex;
   flex-direction: column;
}

/* Die Zustandslinie wandert an den KOPF der Karte.

   In css/style.css sitzt sie am unteren Kartenende (bottom: 0) - dort war
   sie der Abschluss der Kachel im Raster. Im Slider steht 12px darunter
   der Fortschrittsbalken ueber die ganze Breite; zwei waagerechte Striche
   dicht uebereinander lesen sich als ein Element und die Linie verliert
   ihre Aussage. Oben hat sie freien Raum und sitzt zugleich direkt an der
   Kante des hellen Kopfes, auf den sie sich bezieht.

   Gleiche Spezifitaet wie die Grundregel (0,2,1) - es entscheidet die
   Ladereihenfolge, und diese Datei kommt nach css/style.css. bottom muss
   dabei ausdruecklich auf auto: sonst waere das Kaestchen oben UND unten
   verankert und damit ueber die ganze Kartenhoehe gespannt. */
.indikationen-slider .indikation::after {
   top: 0;
   bottom: auto;
}

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

   In den schmalen Karten des Sliders bricht fast jeder Titel um. Wer die
   Stelle waehlt, entscheidet css/style.css bisher mit hyphens: auto - also
   der Browser anhand seines Silbenwoerterbuchs. Der trennt zwar
   silbenrichtig, aber ohne Sinn fuer die Wortbildung: aus
   "Stressfolgeerkrankungen" wurde "Stressfolgeer-krankungen" statt
   "Stressfolge-erkrankungen". Silbisch nicht falsch, zu lesen aber
   muehsam - die Fuge des zusammengesetzten Wortes liegt woanders.

   Deshalb hier hyphens: manual. Damit gelten AUSSCHLIESSLICH die weichen
   Trennstriche (­), die im Markup an den Wortfugen stehen. Der Browser
   trennt von sich aus gar nicht mehr.

   Die Kehrseite: Ein Wort ohne ­, das breiter ist als die Karte,
   bricht dann nirgends mehr um und stoesst ueber den Rand. Alle Titel sind
   daraufhin durchgesehen; jedes Wort ab etwa zwoelf Zeichen hat seine
   Trennstelle. Wer einen Titel aendert, muss die Trennstellen mitpflegen. */
.indikationen-slider .indikation__kopf {
   hyphens: manual;
   -webkit-hyphens: manual;
}

/* D I E   Z I F F E R   I M   K A R T E N K O P F

   Jede Karte traegt ihre Nummer als grosses Baskerville-Numeral links vom
   Titel - ein Wasserzeichen, das dem Durchlauf eine Ordnung gibt: man sieht
   auf einen Blick, wo in den zwoelf man steht. Reine Dekoration, deshalb
   aria-hidden im Markup; die Zaehlung erfaehrt ein Screenreader ohnehin
   nicht aus einer Ziffer, sondern aus der Reihenfolge der Karten.

   Warum der Titel jetzt in einem eigenen <span> steckt: Der Kopf ist eine
   Flexbox (css/style.css). Nackter Text darin wird zu einem ANONYMEN
   Flex-Item - das laesst sich weder ansprechen noch verlaesslich an einer
   Grundlinie ausrichten. Mit dem Span sind es zwei benannte Geschwister.

   Saemtliche Regeln hier haengen am .indikationen-slider, greifen also nur
   auf index.html. css/style.css bleibt unangetastet; Farben, Toenung und
   Hover der Karte sind dort unveraendert und werden hier nicht angefasst. */

/* baseline statt flex-start: nur so sitzen Ziffer und erste Titelzeile auf
   EINER Grundlinie. Bei den mehrzeiligen Titeln - das sind die meisten -
   aendert sich dadurch nichts Sichtbares, denn ausgerichtet wird an der
   ersten Zeile, und der Titel beginnt weiterhin oben.

   Der Abstand kommt als gap und nicht als margin an der Ziffer: gap gehoert
   der Fuge, margin gehoerte dem Element - und das haette bei einer spaeter
   ausgeblendeten Ziffer eine Einrueckung hinterlassen. */
.indikationen-slider .indikation__kopf {
   align-items: baseline;
   gap: 12px;
}

.indikationen-slider .indikation__ziffer {
   /* Nicht schrumpfen: sonst quetscht ein langer Titel die Ziffer schmal,
      und "11" saehe anders aus als "01". */
   flex: 0 0 auto;
   font-family: var(--baskerville-font);
   font-size: 2.75rem;
   font-weight: 400;
   /* line-height: 1 haelt die Zeilenbox so knapp wie moeglich. Das ist hier
      keine Kosmetik: js/indikationen.js misst die Koepfe und rechnet daraus
      --kopf-hoehe fuer ALLE Karten. Jeder Zuschlag an dieser einen Zeile
      laeuft ueber zwoelf Karten hinweg in die Hoehe des ganzen Sliders. */
   line-height: 1;
   /* Gleiche Ziffernbreite - "11" ist damit exakt so breit wie "01", die
      Titel aller zwoelf Karten beginnen auf derselben senkrechten Kante. */
   font-variant-numeric: tabular-nums;
   -webkit-font-feature-settings: "tnum";
   font-feature-settings: "tnum";
   /* Wasserzeichen, kein Ausrufezeichen - aber lesbar.

      Zuerst stand hier Weiss mit 75% Deckkraft: auf dem Kopfton #E3F6E9
      ergab das rund #F8FDFA und damit 1.09:1, zu leise. Mehr Deckkraft
      haette nichts gebracht - reines Weiss kommt auf diesem sehr hellen
      Ton auf 1.13:1, also 0.04 mehr. Heller geht nicht, der Ton musste
      die Richtung wechseln.

      Jetzt --jadegruen (#A1BEAA), die mittlere Stufe derselben Familie,
      zu der Kopf (--lightjadegruen) und die Ueberschrift im grauen Block
      darueber gehoeren: 1.78:1. Deutlich genug, um die Ziffer zu lesen,
      weit unter den 4.5:1 eines Textes - sie traegt die Struktur, sie
      streitet nicht mit dem Titel.

      Als reine Dekoration (siehe aria-hidden im Markup) unterliegt sie
      keiner Kontrastforderung; die Zaehlung steckt in der Reihenfolge der
      Karten, nicht in der Zahl.

      Im Hover dunkelt der Kopf auf #dcf0e3 nach, die Ziffer steht dann bei
      1.69:1 statt 1.78:1. Der Unterschied ist rechnerisch da und mit dem
      Auge nicht zu sehen; deshalb dreht die Ziffer bewusst NICHT mit -
      eine mitlaufende Farbe waere eine zweite Bewegung im Hover, und der
      Hover soll bleiben, wie er ist.

      Lauter oder leiser in einer Zeile: --darkblue waere 9.38:1 und viel
      zu laut, ein color-mix mit 75% --jadegruen brachte 1.51:1. */
   color: var(--jadegruen);
}

/* min-width: 0 ist der Gegenzug zur Vorgabe min-width: auto, die jedes
   Flex-Item mindestens so breit macht wie sein laengstes unteilbares Wort.
   Ohne diese Zeile schoebe ein langes Wort ("Leistungsminderungen") den
   Titel ueber die Kartenkante hinaus, statt an seinen weichen
   Trennstrichen umzubrechen. */
.indikationen-slider .indikation__titel {
   flex: 1 1 auto;
   min-width: 0;
   -webkit-hyphens: manual;   /* NEU */
   hyphens: manual;           /* NEU – schlaegt das direkte auto aus style.css */
   overflow-wrap: break-word; /* NEU – Notnagel, falls ein Wort ohne &shy; zu breit ist */
}

.indikationen-slider .indikation__text p {
   -webkit-hyphens: manual;
   hyphens: manual;
   overflow-wrap: break-word;
}

/* Schmalere Karten, kleinere Ziffer. Die Grenze folgt der des
   Kurzfassungs-Knopfes weiter unten und aus demselben Grund: am engsten
   sind die Karten nicht auf dem Handy, sondern im Tablet-Bereich bei
   zweieinhalb sichtbaren Karten. 44px Ziffer plus 12px Fuge nehmen dort
   ein Viertel der Textbreite - der Titel braeuchte zwei Zeilen mehr, und
   die schlagen ueber --kopf-hoehe auf alle zwoelf Karten durch. */

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

   .indikationen-slider .indikation__ziffer {
      font-size: 2rem;
   }

   .indikationen-slider .indikation__kopf {
      gap: 10px;
   }
}

/* Die Leiste unter den Karten: links der Fortschrittsbalken ueber die
   verbleibende Breite, rechts die beiden Pfeile. Der Balken bekommt seine
   Hoehe nicht aus der Zeile, sondern behaelt seine eigenen 2px - deshalb
   align-items: center statt der Vorgabe stretch.

   Die 8px Fuge gelten fuer beide Fugen der Zeile; zwischen Balken und
   erstem Pfeil sollen es aber 16px sein, damit die zwei Pfeile als Paar
   zusammenstehen und nicht gleichmaessig verteilt wirken. Die zweiten 8px
   holt der Balken sich selbst als Aussenabstand. */
.indikationen-slider__leiste {
   display: flex;
   align-items: center;
   gap: 8px;
   margin-top: 12px;
}

.indikationen-slider .swiper-scrollbar {
   margin-right: 8px;
}

/* Die beiden Pfeile.

   Sie sagen, was der angeschnittene Kartenrand nur andeutet: hier geht es
   weiter. Gewischt und gezogen werden kann weiterhin, die Pfeile sind der
   ausgesprochene Hinweis darauf.

   Form und Verhalten folgen den Kacheln der unteren Pill-Leiste: runde
   Flaeche von 32px, Symbol in --darkblue, beim Ueberfahren faerbt sich der
   Kreis jade. Kein Schatten, keine Bewegung. Beide Pfeile teilen sich
   saemtliche Regeln - so kann ihr Ton nicht auseinanderlaufen.

   css/button.css setzt global button { justify-content: flex-start } samt
   eigener Breite - das wird hier zurueckgenommen, genau wie bei den
   Kacheln der Pill-Leiste. */
.indikationen-slider__zurueck,
.indikationen-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;
}

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

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

/* An den Enden der Reihe haengt Swiper die Klasse swiper-button-disabled
   an - am Anfang an den Zurueck-Pfeil, am Ende an den Weiter-Pfeil. Der
   Pfeil bleibt stehen - ihn verschwinden zu lassen liesse die Leiste
   springen -, wird aber sichtbar stumm. */
.indikationen-slider__zurueck.swiper-button-disabled,
.indikationen-slider__weiter.swiper-button-disabled {
   opacity: 0.25;
   cursor: default;
}

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

/* S C R O L L B A R   S T A T T   F O R T S C H R I T T S B A L K E N

   Vorher stand hier eine Pagination vom Typ progressbar: eine Linie, die
   sich jadegruen fuellte. Sie zeigte den Stand, war aber nicht anfassbar.
   Die Scrollbar zeigt denselben Stand und laesst sich zusaetzlich ziehen
   (draggable in js/indikationen-slider.js).

   Die Grundlinie uebernimmt die Werte des alten Balkens unveraendert:
   2px hoch, 10% Deckkraft in Dunkelblau. Sichtbar genug, um die Position
   im Durchlauf zu zeigen, zu leise, um mit den Karten zu konkurrieren.

   Swiper stellt die Scrollbar von Haus aus absolut an den unteren Rand
   des Containers - dort schwebte sie ueber der untersten Kartenzeile.
   Hier soll sie unter den Karten in der Leiste stehen, deshalb zurueck in
   den normalen Fluss und die Breite aus dem Flexbox-Rest statt aus einem
   calc() ueber die Containerbreite - sonst schoebe sie die Pfeile aus der
   Zeile.

   Zurueckgenommen werden muessen deshalb saemtliche Angaben aus Swipers
   Regel .swiper-scrollbar(.swiper-scrollbar-horizontal): position, left,
   bottom, top, width, height, z-index, border-radius und der Hintergrund.
   Die Regel dort hat zwei Stufen (0,2,0), diese hier ebenfalls - es
   entscheidet die Ladereihenfolge, und diese Datei kommt nach
   lib/swiper/swiper-bundle.min.css.

   opacity ist ausdruecklich gesetzt, obwohl hide: false in der
   Konfiguration steht: Swiper schreibt beim Aus- und Einblenden eine
   Inline-opacity: 0 bzw. 1. Mit hide: false passiert das nicht, die Zeile
   ist die Rueckfallebene, falls jemand die Option spaeter umstellt. */
.indikationen-slider .swiper-scrollbar {
   position: static;
   flex: 1 1 auto;
   width: auto;
   height: 2px;
   background-color: rgba(1, 8, 66, 0.1);
   border-radius: 0;
   opacity: 1;
   z-index: auto;
}

/* Das Segment: jade, 6px statt der 2px der Grundlinie, ueber top: -2px
   mittig auf die Linie gesetzt; es ragt also oben und unten je 2px heraus,
   die Grundlinie behaelt ihre 2px. Keine runden Ecken. Die Schiene bleibt
   der stille graue Strich, das Segment ist die einzige farbige Marke.

   DER TON MUSS DECKEND ANGEGEBEN SEIN - das gilt unabhaengig davon, welche
   Farbe dort steht: Das Segment ist ein KIND der Schiene. Zweimal 10%
   Deckkraft uebereinander ergeben rund 19%, das Segment bekaeme einen
   dunkleren 2px-Kern mit helleren Raendern statt einer gleichmaessigen
   Flaeche. var(--jadegruen) ist von Haus aus deckend, damit erledigt sich
   die Frage.

   Solange das Segment grau war, stand hier der gerechnete Wert #E6E6EC -
   exakt das, was rgba(1, 8, 66, 0.1) auf Weiss ergibt: 0.1*1 + 0.9*255 =
   229.6 -> E6, ebenso 230.3 -> E6 und 236.1 -> EC. Weiss ist dabei die
   richtige Bezugsflaeche, denn die Leiste hat keinen eigenen Hintergrund;
   durch sie scheint body { background: #ffffff }. WER WIEDER AUF EINEN
   GRAUTON ZURUECKGEHT, MUSS DIESE RECHNUNG NEU AUFMACHEN.

   Dieselbe Leiste steht in css/bausteine-slider.css und
   css/ausstattung-slider.css - alle drei jade.

   position ist bei Swiper relative und bleibt es - top wirkt nur so. */
.indikationen-slider .swiper-scrollbar-drag {
   height: 6px;
   top: -2px;
   background-color: var(--jadegruen);
   border-radius: 0;
}

/* Der Zeiger zeigt an, dass sich hier etwas ziehen laesst. grabCursor in
   der Konfiguration setzt das als Inline-Style; die Regel hier ist die
   Rueckfallebene, falls das Skript nicht laeuft - dann laesst sich zwar
   nichts ziehen, aber es sieht auch nicht danach aus. */
.indikationen-slider:not(.swiper-initialized) {
   cursor: default;
}

/* Ohne JavaScript bleibt Swiper aus: Das Laufband ist dann eine Flex-Reihe,
   die ueber den Container hinauslaeuft und - weil Swiper overflow: hidden
   mitbringt - abgeschnitten waere. Ab hier duerfen die Karten deshalb
   waagerecht gescrollt werden. Mit Swiper ist die Regel wirkungslos, weil
   das Skript die Klasse swiper-initialized setzt.

   scroll-snap sorgt dabei fuer dasselbe Einrasten, das Swiper mit
   freeMode: false liefert. */
.indikationen-slider:not(.swiper-initialized) .swiper-wrapper {
   overflow-x: auto;
   scroll-snap-type: x mandatory;
}

.indikationen-slider:not(.swiper-initialized) .swiper-slide {
   scroll-snap-align: start;
}

/* K U R Z F A S S U N G   A U F   S C H M A L E N   G E R A E T E N

   Der Knopf steht in jeder Karte, wird aber nur unterhalb von 1024px
   gezeigt - ab dort sind die Karten breit genug fuer den ganzen Text.

   Die Grenze liegt bewusst nicht bei 769px. Am schmalsten sind die Karten
   naemlich NICHT auf dem Handy: dort stehen anderthalb Karten, gemessen
   227px breit. Bei 800px sind es zweieinhalb - und damit nur noch 222px.
   Das Tablet ist der engste Fall von allen, und ohne Kurzfassung stuenden
   dort 1013px hohe Karten.
   Er kommt aus js/indikationen-mehr.js; steht die Klasse hat-mehr nicht
   am Slider, greift keine der folgenden Regeln und die Texte stehen
   vollstaendig da.

   Aussehen wie die uebrigen Textlinks der Seite (vgl. .read-more-btn in
   css/style.css): unterstrichen, --darkblue, keine Flaeche. Die drei
   Ruecknahmen am Anfang gelten dem globalen button-Block in
   css/button.css, der jedem Knopf 80vw Breite und margin: auto gibt. */
.indikation__mehr {
   display: none;
   width: auto;
   min-width: 0;
   margin: 0;
   padding: 0 20px 20px 20px;
   border: none;
   background: none;
   color: var(--darkblue);
   font-family: var(--haas-font);
   font-size: 0.8rem;
   font-weight: 500;
   line-height: 1;
   text-align: left;
   text-decoration: underline;
   cursor: pointer;
}

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

   .indikationen-slider.hat-mehr .indikation__mehr {
      display: block;
      /* Der Knopf sitzt am Fuss der Karte, auch wenn der beschnittene Text
         darueber kuerzer ausfaellt als bei den Nachbarn. */
      margin-top: auto;
   }

   /* Sechs Zeilen. Gemessen bei 390px Geraetebreite: die Karte faellt damit
      von 988px auf rund 430px, passt also auf den Bildschirm, und es
      bleibt genug Text stehen, um zu erkennen, worum es geht.

      Beschnitten wird der Absatz, nicht sein Kasten: der Kasten traegt die
      20px Innenabstand, und -webkit-box wuerde die mit einrechnen. */
   .indikationen-slider.hat-mehr .indikation__text p {
      display: -webkit-box;
      -webkit-line-clamp: 6;
      -webkit-box-orient: vertical;
      overflow: hidden;
   }

   .indikationen-slider.hat-mehr .indikation.is-offen .indikation__text p {
      display: block;
      overflow: visible;
   }

   /* Der weiche Uebergang. Animiert wird der Textkasten, nicht der Absatz:
      der Kasten traegt die 20px Innenabstand, die mitwachsen muessen.

      Die Hoehen dazu misst js/indikationen-mehr.js und setzt sie als
      Inline-Angabe - zwischen "sechs Zeilen" und "so hoch wie noetig" gibt
      es sonst nichts zu interpolieren. Ohne Skript ist diese Regel
      wirkungslos, weil die Hoehe dann nie gesetzt wird.

      overflow: hidden gilt NUR waehrend der Bewegung. Dauerhaft gesetzt
      wuerde es beim Aufklappen nichts stoeren, aber jede spaetere
      Layoutaenderung - eine nachgeladene Schrift etwa - koennte Text
      unsichtbar abschneiden. */
   .indikationen-slider.hat-mehr .indikation__text {
      transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
   }

   .indikationen-slider.hat-mehr .indikation__text.is-animiert {
      overflow: hidden;
   }

   /* Der Knopf wechselt seine Beschriftung mitten in der Bewegung. Ein
      kurzer Farbuebergang nimmt dem Wechsel die Haerte. */
   .indikationen-slider.hat-mehr .indikation__mehr {
      transition: color 0.2s ease;
   }

   /* "Bewegung reduzieren": derselbe Wechsel, nur ohne Animation. Das
      Skript ueberspringt dann zusaetzlich das Messen und das weiche
      Scrollen - beides fragt dieselbe Einstellung ab. */
   @media (prefers-reduced-motion: reduce) {
      .indikationen-slider.hat-mehr .indikation__text,
      .indikationen-slider.hat-mehr .indikation__mehr {
         transition: none;
      }
   }

   /* Jede Karte bekommt hier ihre eigene Hoehe.

      Sonst wuerde eine aufgeklappte Karte alle uebrigen mitziehen - sie
      sind Flex-Kinder derselben Reihe und werden auf die hoechste
      gestreckt. Aufklappen haette dann bei elf Karten leere Flaeche
      erzeugt und genau die Hoehe zurueckgebracht, die hier vermieden
      werden soll.

      Der Preis: die angeschnittene Karte am Rand endet nicht mehr auf
      derselben Hoehe wie ihre Nachbarin. Weil alle zugeklappten Karten
      denselben Kopf (js/indikationen.js gleicht ihn an) und dieselben
      sechs Zeilen haben, faellt das im Ruhezustand nicht auf. */
   .indikationen-slider.hat-mehr .indikationen.swiper-wrapper {
      align-items: flex-start;
   }
}

.indikationen-slider__nummern {
   display: flex;
   justify-content: center;
   align-items: baseline;
   gap: 0.15rem;
   width: 100%;
   margin-top: 0.6rem;
   font-family: var(--baskerville-font), serif;
   font-synthesis-weight: none;
}
.indikationen-slider__nummern .swiper-pagination-current {
   font-size: 1.5rem;
   font-weight: 400;
   letter-spacing: 1px;
   color: var(--darkblue);
   line-height: 1;
}
.indikationen-slider__nummern .indikationen-nummer__trenner,
.indikationen-slider__nummern .swiper-pagination-total {
   font-size: 1rem;
   letter-spacing: 1px;
   color: rgba(1, 8, 66, 0.3);
   line-height: 1;
}