/* D I E   W O L L M A R S H O E H E   I M   U E B E R B L I C K
   ( nur ausstattung.html )

   Die einundzwanzig Punkte standen in einem grauen Kasten als zwei Spalten
   quadratischer Aufzaehlungszeichen. Jetzt sind sie vier Kategorien in der
   Linien-Sprache des Querlink-Blocks: Jade-Eyebrow als Kategorietitel,
   darunter die Punkte zwischen feinen Trennlinien.

   D E R   U N T E R S C H I E D   Z U   . q u e r l i n k s   ist
   inhaltlich, nicht optisch: Das hier sind KEINE Links. Deshalb kein Pfeil,
   kein <a>, kein Zeigerwechsel - nur der sanfte Farbwechsel im Hover, damit
   die Zeile unter dem Mauszeiger sichtbar wird. Aus demselben Grund eine
   eigene Klasse statt .querlinks: Wer dort spaeter Link-Verhalten ergaenzt,
   soll es hier nicht mitbekommen.

   Uebernommen sind die Werte: Eyebrow 0.94rem/600/0.16em in --jadegruen,
   Punkte 1.15rem Baskerville in --darkblue, Trennlinien 1px. Die Linien sind
   hier eine Spur kraeftiger (0.12 statt 0.1 Deckkraft), weil sie ohne Pfeil
   und ohne Hoverflaeche die einzige Gliederung sind.

   Geladen NACH css/style.css. */

/* D A S   2 x 2 - R A S T E R

   Vier Kategorien nebeneinander waeren zu schmal fuer Zeilen wie
   "medizinischer Gesundheits- und Wellnessbereich mit Saunas, Salzgrotte und
   Kneippbecken"; vier untereinander waeren eine lange Liste ohne Halt.
   Zwei mal zwei haelt beide Achsen ueberschaubar.

   Ab 768px einspaltig - dieselbe Grenze, an der auch der zweispaltige
   Fliesstext der Seite umbricht.

   margin-top haelt Abstand zur Ueberschrift darueber. Er steht hier und
   nicht als groesseres padding-bottom an ".container-text h3": Die Regel
   dort gilt fuer jede Zwischenueberschrift der Seite, hier soll nur dieser
   eine Block weiter abruecken. */
.ueberblick {
   margin-top: 2.5rem;
   display: grid;
   grid-template-columns: 1fr 1fr;
   column-gap: 3rem;
   row-gap: 3rem;
   padding-bottom: 2rem;
}

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

   .ueberblick {
      grid-template-columns: 1fr;
      row-gap: 2.5rem;
   }
}

/* Der Kategorietitel.

   DIE ELTERNKLASSE IM SELEKTOR IST PFLICHT: ".container-text h4" steht in
   css/style.css und hat (0,1,1) - eine einzelne Klasse (0,1,0) verliert
   dagegen. Dieselbe Falle wie beim Querlink-Block, dort ausfuehrlich
   vermerkt.

   ACHTUNG, GEMESSEN: --jadegruen auf Weiss ergibt 2.01 : 1 und liegt damit
   unter den 4.5 : 1 fuer Text. Bewusst getragen, wie bei den uebrigen
   Eyebrows des Projekts. */
.ueberblick .ueberblick__titel {
   margin: 0 0 1.25rem;
   padding: 0;
   font-family: var(--hass-font-unica), sans-serif;
   font-size: 0.94rem;
   font-weight: 600;
   line-height: 1.5;
   letter-spacing: 0.16em;
   text-transform: uppercase;
   color: var(--jadegruen);
}

/* Die Punkte.

   Kein list-style, kein Einzug - css/style.css gibt Listen in
   .container-text beides mit, und die quadratischen Aufzaehlungszeichen
   sind gerade das, was hier weg soll. */
.ueberblick .ueberblick__liste {
   list-style: none;
   margin: 0;
   padding: 0;
}

/* Jede Zeile traegt ihre Linie oben, die letzte zusaetzlich eine unten -
   so ist jede Kategorie oben und unten geschlossen, unabhaengig davon, wie
   viele Punkte sie hat. */
.ueberblick .ueberblick__punkt {
   list-style: none;
   margin: 0;
   padding: 0.9rem 0;
   border-top: 1px solid rgba(1, 8, 66, 0.12);
   font-family: var(--baskerville-font);
   font-size: 1.15rem;
   font-weight: 400;
   font-synthesis-weight: none;
   line-height: 1.35;
   letter-spacing: 0;
   color: var(--darkblue);
   transition: color 0.2s ease;
}

.ueberblick .ueberblick__punkt:last-child {
   border-bottom: 1px solid rgba(1, 8, 66, 0.12);
}

/* Sanfter Farbwechsel im Hover. Kein Zeigerwechsel und keine Unterstreichung
   - die Zeile ist kein Link, sie soll sich nur zeigen, wo der Mauszeiger
   steht. Der Ton faellt dabei von 18.84 : 1 auf 2.01 : 1; als kurzer
   Zustand auf einer nicht anklickbaren Zeile hier vertretbar. */
.ueberblick .ueberblick__punkt:hover {
   color: var(--jadegruen);
}

/* Traeger der gestaffelten AOS-Einblendung (data-aos am <span>, nicht am <li>).
 *
 * Warum nicht direkt am <li>: AOS erzwingt auf jedem Element mit data-aos
 * seine eigene transition-duration - hier 1.5s aus lib/aos/aos-setup.js. Die
 * gaelte dann auch fuer die color-Transition oben, und der Farbwechsel im
 * Hover liefe statt in 0.2s in 1.5s. Gemessen genau so. Mit dem <span> bleibt
 * die Zeile bei ihrer eigenen Transition; eingeblendet wird nur der Text.
 *
 * Die zweite Falle steckte in der Kurzschreibweise: `transition: color 0.2s`
 * setzt transition-property auf color und nimmt AOS damit `opacity, transform`
 * weg - die Punkte sprangen ohne Ueberblendung ins Bild, obwohl die
 * transition-delay-Werte (0 bis 2000ms) korrekt anlagen. Am <span> steht keine
 * eigene transition, AOS behaelt seine Eigenschaften.
 *
 * display:block, weil transform auf einem inline-Element nicht wirkt. */
.ueberblick .ueberblick__text {
   display: block;
}