/* Q U E R L I N K S   Z U   D E N   A N D E R E N   S C H W E R P U N K T E N
   ( nur auf den acht Detailseiten )

   Unter dem Fliesstext steht auf jeder Detailseite eine Liste der uebrigen
   sieben Fachbereiche: kleine Eyebrow-Ueberschrift, darunter zwei Spalten mit
   Namen in Baskerville und einem Pfeil rechts.

   Die Schrift- und Farblogik ist die des Projekts: Baskerville fuer den Namen
   wie bei den Kachel-Titeln und den Slider-Ziffern, --darkblue fuer den Text,
   --jadegruen fuer Eyebrow, Pfeil und Hover. Eigene Werte gibt es nur fuer
   das, was es sonst nirgends gibt - die Trennlinien und das Raster.

   Geladen NACH css/style.css. Alles haengt an .querlinks. */

/* Der Block setzt sich mit einer feinen Linie vom Text darueber ab.

   Der Ton der Linie ist derselbe, den die Scrollbar-Schiene der beiden Slider
   traegt: rgba(1, 8, 66, 0.1), also --darkblue mit 10 Prozent. So bleibt die
   Seite bei einem einzigen sehr hellen Grau, statt ein zweites einzufuehren. */
.querlinks {
   margin-top: 3rem;
   padding-top: 2.5rem;
}

/* Die Eyebrow-Ueberschrift.

   Gesperrte Versalien in Jade wie der Eyebrow der Schwerpunkt-Kacheln auf
   schwerpunkte.html, hier aber DEUTLICH GROESSER: 0.94rem statt der 0.65rem
   dort, dazu Schnitt 600 statt 500 und 2rem Abstand nach unten. Der Grund
   ist das Gewicht im Verhaeltnis zur Liste darunter - in der Kachel steht
   der Eyebrow unter einem grossen Baskerville-Titel und darf zuruecktreten,
   hier ist er die einzige Ueberschrift ueber sieben Zeilen und muss sie
   tragen koennen.

   margin und padding werden ausdruecklich zurueckgenommen:
   ".container-text h3" setzt in css/style.css einen Innenabstand nach oben,
   der hier den Abstand zur Linie verdoppeln wuerde.

   DIE ELTERNKLASSE IM SELEKTOR IST PFLICHT, nicht Zierde: ".container-text h3"
   hat die Spezifitaet (0,1,1) und schlaegt eine einzelne Klasse (0,1,0).
   Gemessen stand die Ueberschrift ohne sie in 29.6px Dunkelblau statt in
   0.65rem Jade - die ganze Regel war wirkungslos. Mit zwei Klassen sind es
   (0,2,0), und sie gewinnt.

   ACHTUNG, GEMESSEN: --jadegruen (#A1BEAA) auf Weiss ergibt 2.01 : 1 und
   liegt damit unter den 4.5 : 1 fuer Text. Dieselbe bewusst getragene
   Schwaeche wie bei den Kacheln; dort ist sie ausfuehrlich vermerkt. */
.querlinks .querlinks__titel {
   margin: 0 0 2rem;
   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);
}

/* D I E   L I S T E

   Zwei Spalten, ab 760px eine. Der Umbruchpunkt liegt bewusst nicht auf einer
   Marke des Projektrasters: Er folgt der Zeilenbreite, und die laengsten
   Namen ("Stressmedizin / Stresslabor / Autonome Funktionsdiagnostik",
   "Stoffwechsel- und Leistungsdiagnostik") brauchen bei zwei Spalten
   unterhalb von rund 760px mehr als zwei Zeilen.

   Kein list-style, kein Einzug - css/style.css gibt Listen in .container-text
   beides mit. */
.querlinks .querlinks__liste {
   display: grid;
   grid-template-columns: 1fr 1fr;
   column-gap: 3rem;
   list-style: none;
   margin: 0;
   padding: 0;
}

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

   .querlinks .querlinks__liste {
      grid-template-columns: 1fr;
   }
}

/* Jede Zeile traegt ihre Trennlinie oben - so steht auch ueber der ersten
   Zeile jeder Spalte eine, und die beiden Spalten beginnen optisch gleich.
   Die letzte Zeile bekommt zusaetzlich eine untere, damit die Liste unten
   nicht ausfranst; bei ungerader Zahl endet nur eine Spalte mit einer Zeile,
   deshalb haengt sie am letzten Kind und nicht an der Spalte. */
.querlinks .querlinks__eintrag {
   border-top: 1px solid rgba(1, 8, 66, 0.1);
   list-style: none;
   margin: 0;
   padding: 0;
}

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

/* Der Link fuellt die Zeile: Name links, Pfeil rechts.

   1.15rem und Schnitt 400: Baskerville ist ein Display-Schnitt und traegt
   von Haus aus viel Gewicht; eine Nummer kleiner und im Regular stehen die
   sieben Zeilen leichter da und kommen dem Eyebrow darueber optisch naeher.

   font-synthesis-weight: none ist die Bremse gegen faux-bold - falls der
   Typekit-Kit den regulaeren Schnitt einmal nicht ausliefert, zeichnet der
   Browser sonst einen kuenstlich verfetteten nach, statt sichtbar auf die
   Ersatzschrift zu fallen.

   text-decoration: none nimmt die Unterstreichung zurueck, die
   ".container-text a" in css/style.css setzt. */
.querlinks .querlinks__eintrag a {
   display: flex;
   align-items: baseline;
   justify-content: space-between;
   gap: 1rem;
   padding: 1.1rem 0;
   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);
   text-decoration: none;
   transition: color 0.2s ease;
}

/* Der Pfeil steht immer in Jade und rueckt beim Ueberfahren nach rechts -
   dieselbe Bewegung wie in den Kacheln, damit sich die beiden Elemente nicht
   unterschiedlich anfuehlen.

   flex-shrink: 0 haelt ihn in der Zeile, wenn der Name zweizeilig wird;
   align-items: baseline am Link setzt ihn dabei auf die erste Zeile des
   Namens und nicht in die Mitte des Blocks. */
.querlinks__pfeil {
   flex: 0 0 auto;
   font-size: 1rem;
   line-height: 1;
   color: var(--jadegruen);
   transition: transform 0.2s ease;
}

/* Beim Ueberfahren dreht der Name nach Jade.

   ANMERKUNG ZUM KONTRAST: Damit faellt der Name im Hover von 18.84 : 1 auf
   2.01 : 1. Es ist ein Zustand, kein Dauerzustand, und die Zeile bleibt an
   Position und Groesse unveraendert lesbar - so beauftragt. Wer es heben
   will, ohne den Jade-Eindruck zu verlieren:
   color-mix(in srgb, var(--jadegruen) 50%, var(--darkblue)) ergibt 5.39 : 1. */
.querlinks .querlinks__eintrag a:hover {
   color: var(--jadegruen);
}

.querlinks .querlinks__eintrag a:hover .querlinks__pfeil {
   transform: translateX(5px);
}

@media (prefers-reduced-motion: reduce) {

   .querlinks__pfeil {
      transition: color 0.2s ease;
   }

   .querlinks .querlinks__eintrag a:hover .querlinks__pfeil {
      transform: none;
   }
}


/* Z U R U E C K - L I N K   A M   S E I T E N E N D E

   Er traegt die Typografie des Eyebrows "Noch mehr wir fuer Sie", also
   .querlinks__titel: Unica, 0.94rem, Schnitt 600, letter-spacing 0.1em,
   uppercase, Jade. Damit rahmen Ueberschrift und Rueckweg den Linkblock in
   derselben Stimme ein - die Baskerville-Serife der Eintraege dazwischen
   bleibt den Zielen vorbehalten.

   Die Bewegungsmechanik kommt weiterhin vom Eintrag (.querlinks__eintrag a):
   Pfeil mit eigener transform-Transition, 5px Versatz im Hover, vollstaendige
   Ruecknahme bei prefers-reduced-motion.

   Drei Unterschiede zu den Eintraegen:

   1. Der Pfeil steht VOR dem Text und zeigt nach links; im Hover rueckt er
      um dieselben 5px, nur in die andere Richtung.
   2. Er steht RECHTSBUENDIG, auf der Fluchtlinie der Pfeile in der rechten
      Spalte. Gemacht wird das mit width: fit-content und margin-left: auto,
      nicht mit text-align oder justify-content: die beiden richten Inhalt
      INNERHALB einer Box aus, hier soll aber die Box selbst nach rechts.
      Ein Block mit fester Inhaltsbreite und einer automatischen linken Marge
      wird an die rechte Kante seines Elters geschoben - und die ist hier
      genau die gesuchte Kante:

         .querlinks traegt nur margin-top und padding-top, seitlich nichts;
         die Liste ist ein Grid ohne Innenabstand, und jeder Eintrag stellt
         seinen Pfeil per justify-content: space-between an das Ende seiner
         Rasterzelle. Rechte Zellenkante = rechte Listenkante = rechte
         Inhaltskante von .container-text, in dem auch dieser Link sitzt.

      Deshalb greift es unter 760px unveraendert weiter, wo das Raster auf
      eine Spalte faellt: Die massgebliche Kante ist die des Containers, nicht
      die einer bestimmten Spaltenzahl.

      display: flex statt inline-flex ist dafuer Bedingung - margin-left: auto
      wirkt nur an einem Element auf Blockebene. Die Pfeil-Text-Reihenfolge
      bleibt davon unberuehrt.
   3. Die Farbrichtung ist umgekehrt. Der Eintrag steht dunkelblau und dreht
      im Hover nach Jade, wird also blasser (18.84 : 1 auf 2.01 : 1). Der
      Zurueck-Link geht den Weg andersherum: Jade im Ruhezustand, im Hover
      fest auf --darkblue. Der Kontrast steigt damit von 2.01 : 1 auf
      18.84 : 1, statt zu fallen.

      ACHTUNG, DIESELBE BEKANNTE SCHWAECHE WIE BEIM EYEBROW: Jade auf Weiss
      liegt mit 2.01 : 1 unter den 4.5 : 1 fuer Text, und hier trifft es
      gesperrte Versalien, die fuer sich genommen schon langsamer lesen.
      Bewusst so beauftragt - der Ton folgt der Ueberschrift. Wer es heben
      will: color-mix(in srgb, var(--jadegruen) 50%, var(--darkblue))
      ergibt 5.39 : 1.

   Text und Pfeil tragen denselben Ton und wechseln gemeinsam; der Pfeil ist
   hier kein Akzent, sondern Teil der Beschriftung. */
.zurueck-btn {
   display: flex;
   width: fit-content;
   margin-left: auto;
   align-items: baseline;
   gap: 0.6rem;
   padding: 1.1rem 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);
   text-decoration: none;
   transition: color 0.2s ease;
}

/* Der Pfeil folgt der Schriftgroesse des Textes statt einer eigenen Angabe -
   1em sind hier die 0.94rem von oben. Wird die Beschriftung einmal groesser
   oder kleiner, zieht er ohne zweite Aenderung mit.

   color: inherit haelt ihn am Text: Font Awesome setzt auf dem <i> keine
   eigene Farbe, aber so ist die Absicht sichtbar und der Hover-Wechsel
   braucht keine zweite Regel. */
.zurueck-btn__pfeil {
   flex: 0 0 auto;
   font-size: 1em;
   line-height: 1;
   color: inherit;
   transition: transform 0.2s ease;
}

.zurueck-btn:hover {
   color: var(--darkblue);
}

.zurueck-btn:hover .zurueck-btn__pfeil {
   transform: translateX(-5px);
}

/* Wer die Bewegung abbestellt hat, bekommt nur den Farbwechsel - genau wie
   beim Querlink darueber. */
@media (prefers-reduced-motion: reduce) {

   .zurueck-btn__pfeil {
      transition: color 0.2s ease;
   }

   .zurueck-btn:hover .zurueck-btn__pfeil {
      transform: none;
   }
}