/* K R A N K H E I T S B I L D E R   ( Rubrik, erstmals burn-out.html )

   Drei Bausteine: Linienliste, Linkzeile mitten in einer Spalte, Faktenkacheln.

   L I N I E N L I S T E

   Aufzaehlung ohne Links im Stil der Querlinks (css/schwerpunkte-querlinks.css):
   Eyebrow in gesperrten Versalien (Jade), darunter Zeilen in Baskerville
   zwischen feinen Linien. Werte bewusst 1:1 von dort - Schrift 1.15rem/400,
   letter-spacing 2px, Zeile 1.1rem Innenabstand, Linie rgba(1, 8, 66, 0.1).
   Wer an den Querlinks etwas aendert, sieht hier nach, ob es mitgehoert.

   Spezifitaet, gemessen: ".two-columns .column h3" in css/style.css hat (0,2,1)
   und schlug den Eyebrow mit zwei Klassen - er stand dunkelblau und mit dem
   Abstand eines h3 da. Deshalb h3 plus drei Klassen, also (0,3,1).
   Fuer Liste und Zeilen reichen zwei Klassen gegen ".container-text ul/li". */

.container-text .linienliste h3.linienliste__titel {
   margin: 0 0 1.5rem;
   padding: 0;
   font-family: var(--hass-font-unica), sans-serif;
   font-size: 0.94rem;
   font-weight: 600;
   line-height: 1.5;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--jadegruen);
}

.linienliste .linienliste__liste {
   list-style: none;
   margin: 0;
   padding: 0;
}

.linienliste .linienliste__liste li {
   list-style: none;
   margin: 0;
   padding: 1.1rem 0;
   border-top: 1px solid rgba(1, 8, 66, 0.1);
   font-family: var(--baskerville-font);
   font-size: 1.15rem;
   font-weight: 400;
   font-synthesis-weight: none;
   line-height: 1.3;
   letter-spacing: 2px;
   color: var(--darkblue);
}

.linienliste .linienliste__liste li:last-child {
   border-bottom: 1px solid rgba(1, 8, 66, 0.1);
}

/* Linkzeile MITTEN in einer Spalte (Krankheitsbild-Seiten): Auf den uebrigen
   Seiten steht .linkzeilen immer am Ende einer Spalte. Folgt danach noch ein
   Absatz, stiess er ohne Abstand an die untere Linie. */
.column .linkzeilen + p {
   margin-top: 2.5rem;
}

/* F A K T E N K A C H E L N  ("Das Wichtigste auf einen Blick")

   Die Kacheln sind die Team-Kacheln von konzept.html: css/team-kacheln.css
   wird mit eingebunden, Raster (.team-kacheln), Kachelblau, Quadrat, Eyebrow
   (.kachel__sparte), Baskerville-Titel (.kachel__claim) und Pfeil kommen von
   dort. Hier steht nur, was die Faktenkacheln zusaetzlich brauchen:

   - .kachel__text, ein kurzer Absatz unter dem Titel. aspect-ratio 1/1 laesst
     die Kachel wachsen, wenn der Text im schmalen Raster mehr Platz braucht.
   - .kachel__weiter: unten rechts vor dem Pfeil sagt eine Zeile, wohin die
     Kachel fuehrt (gesperrte Versalien wie der Eyebrow, aber dunkelblau).
     Sie steht mit margin-top: auto unten, auf allen Kacheln einer Reihe
     gleich hoch.
   - Alle Kacheln werden im Hover weiss, auch die ohne Link. Anheben und
     Pfeilbewegung bleiben den verlinkten vorbehalten - die Bewegung sagt
     "klickbar", die Farbe nur "hier bin ich". */
/* min-width: 0 ist Pflicht, gemessen: Mit aspect-ratio 1/1 uebertraegt der
   Browser die Mindesthoehe des Inhalts auf die Breite. Sobald der Text hoeher
   war als die Kachel breit, wurde die Kachel BREITER statt hoeher, und das
   Raster lief bei 1100px ueber den rechten Rand. Mit min-width: 0 bleibt die
   Spalte fest, und eine volle Kachel waechst nach unten. */
/* Und: kein Quadrat. Mit dem Absatz in voller Textgroesse ist der Inhalt
   fast ueberall hoeher als die Kachel breit; ein Kasten mit aspect-ratio
   macht dann nicht mehr beim Strecken der Rasterzeile mit, und die Kacheln
   einer Reihe standen unterschiedlich hoch (gemessen 311 / 341 / 341 px bei
   1440px). Ohne aspect-ratio sind alle Kacheln einer Reihe gleich hoch;
   min-height haelt knappe Reihen nahe am Quadrat. */
.fakten-kacheln .kachel {
   min-width: 0;
   aspect-ratio: auto;
   min-height: 18rem;
   padding-bottom: 2.75rem;   /* Luft unter dem Text: 44px statt der 26px der
                                 Team-Kacheln, die unten nur den Pfeil tragen */
}
@media screen and (max-width: 560px) {
   .fakten-kacheln .kachel {
      min-height: 0;
   }
}
.team-kacheln.fakten-kacheln {
   margin-top: 2.5rem;   /* Abstand zur Abschnittsueberschrift - auf konzept.html
                            gibt ihn der Vorspann (.team-intro), hier fehlt er */
   padding-bottom: 0;
}
/* Der Kacheltext ist ein gewoehnliches <p> und folgt damit der Groessen-
   und Zeilenleiter aller Absaetze (style.css und min*-max*-Dateien) -
   gemessen 16px/28px am Desktop, 14.4px/26.4px auf dem Telefon, wie Text und
   Fragen der Seite. Hier nur Abstand und Farbe. */
.container-text .fakten-kacheln .kachel__text {
   margin: 0.9rem 0 0;
   padding: 0;
   color: var(--darkblue);
}
.fakten-kacheln .kachel__weiter {
   display: flex;
   align-items: baseline;
   gap: 0.6rem;
   margin-top: auto;
   padding-top: 1.2rem;
   align-self: flex-end;
   font-family: var(--hass-font-unica), sans-serif;
   font-size: 0.65rem;
   font-weight: 600;
   line-height: 1.4;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: var(--darkblue);
}
.fakten-kacheln .kachel__weiter .kachel__pfeil {
   margin-top: 0;
}
.fakten-kacheln .kachel.kachel--statisch {
   transition: background-color var(--kachel-dauer) var(--kachel-kurve);
}
.fakten-kacheln .kachel.kachel--statisch:hover {
   background-color: #ffffff;
   transform: none;
}

/* F R A G E N   ("Häufige Fragen zu ...")

   Dieselbe Sprache wie Linienliste und Querlinks: feine Linien in
   rgba(1, 8, 66, 0.1), die Frage in Baskerville, die Antwort im Fliesstext.
   Ab 1024px steht jede Frage links und ihre Antwort rechts daneben, darunter
   untereinander. Bewusst NICHT das Fragenraster von patienteninformation.html
   (.fragen / .frage in css/style.css): das ist ein zweispaltiges Raster mit
   serifenloser Frage und haette hier eine dritte Optik neben Kacheln und
   Linienliste gebracht.

   Selektoren mit .container-text davor: ".container-text h3" (0,1,1) und
   ".two-columns .column p" setzen sonst Groesse, Farbe und Abstaende. */
.container-text .faq {
   margin: 2.5rem 0 0;
   padding: 0;
}
.container-text .faq .faq__eintrag {
   display: grid;
   grid-template-columns: 2fr 3fr;
   column-gap: 3rem;
   padding: 1.8rem 0;
   border-top: 1px solid rgba(1, 8, 66, 0.1);
}
.container-text .faq .faq__eintrag:last-child {
   border-bottom: 1px solid rgba(1, 8, 66, 0.1);
}
.container-text .faq h3.faq__frage {
   margin: 0;
   padding: 0;
   font-family: var(--baskerville-font);
   font-size: 1.35rem;
   font-weight: 400;
   font-synthesis-weight: none;
   line-height: 1.3;
   letter-spacing: 0.5px;
   color: var(--darkblue);
   -webkit-hyphens: none;
   hyphens: none;
}
.container-text .faq .faq__antwort p {
   margin: 0;
   padding: 0;
}
@media screen and (max-width: 1023px) {
   .container-text .faq .faq__eintrag {
      grid-template-columns: 1fr;
      row-gap: 0.9rem;
   }
   .container-text .faq h3.faq__frage {
      font-size: 1.2rem;
   }
}

/* Hover der Fragen: Die Zeile hinterlegt sich im Kachelblau (#e9f0fb, wie
   die Faktenkacheln). Die Frage bleibt dunkelblau - Jade auf dem Kachelblau
   kaeme auf rund 1,75 : 1 und waere fuer eine ganze Frage zu blass.
   Die Flaeche liegt als ::before hinter der Zeile und steht links und rechts
   1.5rem ueber - so bekommt der Text Luft, ohne sich selbst zu verschieben.
   Kurve und Dauer der Kacheln (--kachel-dauer, --kachel-kurve). Nur auf
   Geraeten mit echtem Hover; auf dem Telefon bliebe die Flaeche sonst nach
   dem Antippen stehen. */
.container-text .faq .faq__eintrag {
   position: relative;
   z-index: 0;
}
.container-text .faq .faq__eintrag::before {
   content: "";
   position: absolute;
   inset: 0 -1.5rem;
   z-index: -1;
   background-color: #e9f0fb;
   opacity: 0;
   transition: opacity var(--kachel-dauer) var(--kachel-kurve);
}
@media (hover: hover) {
   .container-text .faq .faq__eintrag:hover::before {
      opacity: 1;
   }
}

/* Die leise Zeile unter den Faktenkacheln: FOCUS-Empfehlung, Wortlaut wie im
   Footer aller Seiten. Gesperrte Versalien wie der Eyebrow der Kacheln, aber
   dunkelblau mit 55 % - ein Hinweis, keine Ueberschrift. Rechtsbuendig, damit
   sie als Fussnote des Kachelblocks gelesen wird und nicht als neuer Absatz. */
.container-text p.fakten-hinweis {
   margin: 1.4rem 0 0;
   padding: 0;
   text-align: right;
   font-family: var(--hass-font-unica), sans-serif;
   font-size: 0.65rem;
   font-weight: 500;
   line-height: 1.5;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: rgba(1, 8, 66, 0.55);
}
@media screen and (max-width: 560px) {
   .container-text p.fakten-hinweis {
      text-align: left;
   }
}

/* W E I T E R E   K R A N K H E I T S B I L D E R   A L S   B I L D R A S T E R

   Jeder Eintrag: das Motiv seiner Seite in voller Spaltenbreite, darunter der
   Name mit dem Pfeil. Nur hier - die Liste "Passende Schwerpunkte" darueber
   und die Querlinks der Schwerpunktseiten bleiben Textzeilen, darum haengt
   alles an den Modifikator-Klassen --bilder und --bild.

   Drei Spalten ab 1024px, zwei darunter, eine unter 481px. Die Trennlinien
   der Textliste entfallen, der Abstand zwischen den Karten traegt die
   Gliederung.

   Quelle ist das Querformat 1280x480, gezeigt im selben Seitenverhaeltnis
   8:3 wie der Kopf der Seiten - ein schmaler Streifen, nichts wird
   beschnitten. */
.querlinks .querlinks__liste--bilder {
   grid-template-columns: repeat(3, 1fr);
   column-gap: 2rem;
   row-gap: 2.5rem;
   margin-top: 0.5rem;
}

.querlinks .querlinks__liste--bilder .querlinks__eintrag--bild,
.querlinks .querlinks__liste--bilder .querlinks__eintrag--bild:last-child {
   border: 0;
}

.querlinks .querlinks__eintrag--bild a {
   display: grid;
   grid-template-columns: 1fr auto;
   align-items: baseline;
   row-gap: 0.9rem;
   column-gap: 1rem;
   padding: 0;
}

.querlinks__bild {
   grid-column: 1 / -1;
   display: block;
   width: 100%;
   height: auto;
   aspect-ratio: 8 / 3;
   object-fit: cover;
   transition: opacity 0.2s ease;
}

.querlinks .querlinks__eintrag--bild a:hover .querlinks__bild {
   opacity: 0.85;
}

@media screen and (max-width: 1023px) {
   .querlinks .querlinks__liste--bilder {
      grid-template-columns: repeat(2, 1fr);
   }
}

@media screen and (max-width: 480px) {
   .querlinks .querlinks__liste--bilder {
      grid-template-columns: 1fr;
      row-gap: 2rem;
   }
}

/* Teaser unter dem Namen: die Kopfzeile der jeweiligen Seite. Klein, wie der
   Teaser im Empfehlungsblock (css/style.css, Ende). Er belegt die ganze
   Breite unter Name und Pfeil. */
.querlinks__eintrag--bild .querlinks__teaser {
   grid-column: 1 / -1;
   margin-top: -0.4rem;
   font-family: var(--hass-font-unica), sans-serif;
   font-size: 0.85rem;
   line-height: 1.4;
   letter-spacing: 1px;
   color: rgba(1, 8, 66, 0.7);
}

/* Keine Silbentrennung in den Karten - weder automatisch (globale Regel
   "* { hyphens: auto }") noch an den &shy; im Text. "none" schaltet beides
   ab; lange Woerter brechen dann ganz in die naechste Zeile. */
.querlinks .querlinks__eintrag--bild a,
.querlinks .querlinks__eintrag--bild a * {
   hyphens: none;
   -webkit-hyphens: none;
}

/* Vertiefung unter dem grossen Einstiegstext: normale Absaetze mit Luft
   dazwischen - die globalen Regeln setzen Absaetze hier auf margin 0. */
.lightgrey .one-column .column p.big ~ p {
   margin-top: 1.1rem;
}

.lightgrey .one-column .column p.big + p {
   margin-top: 2rem;
}