/* D I E   S C H W E R P U N K T - K A C H E L N   ( nur schwerpunkte.html )

   Die acht Behandlungsschwerpunkte standen als Accordion: Titel anklicken,
   Text klappt auf. Jetzt sind sie eine Wand aus acht quadratischen Kacheln,
   jede verlinkt auf ihre eigene Seite.

   Die Optik ist die der Team-Kacheln auf konzept.html - gleicher Grundton,
   gleicher Hover, gleicher Pfeil. Die Werte stehen hier trotzdem noch einmal
   und nicht als gemeinsame Klasse: Die beiden Raster unterscheiden sich im
   Aufbau der Kachel (dort Sparte oben und Claim darunter, hier Titel oben und
   Eyebrow darunter), und eine geteilte Basis haette an jeder zweiten Zeile
   eine Ausnahme gebraucht. WER HIER ETWAS AENDERT, sollte in
   css/team-kacheln.css nachsehen, ob es dort mitgeaendert werden muss.

   Geladen NACH css/style.css. Alles haengt an .schwerpunkte-kacheln bzw.
   .schwerpunkt-kachel und greift damit nur hier. */

/* D A S   R A S T E R

   Drei Spalten, ab 900px zwei, ab 560px eine - dieselbe Staffel wie bei den
   Team-Kacheln, und aus demselben Grund: Sie folgt der Kachelbreite, nicht
   dem Projektraster. Der laengste Titel ("Stoffwechsel- und
   Leistungsdiagnostik") und der laengste Eyebrow ("Vier Wochen stationaer,
   ohne lange Wartezeit") brauchen bei drei Spalten unterhalb von rund 900px
   mehr Zeilen, als die quadratische Kachel bequem traegt. */
.schwerpunkte-kacheln {
   --kachel-blau: #e9f0fb;

   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 18px;
   width: 100%;
   padding-bottom: 3rem;
}

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

   .schwerpunkte-kacheln {
      grid-template-columns: repeat(2, 1fr);
   }
}

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

   .schwerpunkte-kacheln {
      grid-template-columns: 1fr;
   }
}

/* D I E   K A C H E L

   Ein <a> als Flex-Spalte: Titel, Eyebrow, Pfeil. Der Pfeil wird ueber
   margin-top: auto nach unten und ueber align-self: flex-end nach rechts
   gedrueckt; alles darueber steht oben.

   Kein border, keine outline - die Flaeche traegt allein ueber den Ton.
   text-decoration: none nimmt die Unterstreichung zurueck, die .container-text
   a in css/style.css setzt. */
.schwerpunkt-kachel {
   display: flex;
   flex-direction: column;
   aspect-ratio: 1 / 1;
   padding: 26px;
   background-color: var(--kachel-blau);
   border: none;
   outline: none;
   text-decoration: none;
   transition: background-color 0.2s ease, transform 0.2s ease;
}

/* Unter 560px faellt das Quadrat weg - einspaltig ist die Kachel so breit
   wie der Container und damit auch so hoch; das waere ein Feld mit Text in
   der Ecke. min-height statt aspect-ratio: so hoch, wie der Inhalt es
   verlangt, mindestens aber 170px.

   DIESER BLOCK MUSS NACH .schwerpunkt-kachel STEHEN. Beide Regeln haben die
   Spezifitaet (0,1,0), es entscheidet die Reihenfolge - eine Media Query
   hebt daran nichts. */
@media screen and (max-width: 560px) {

   .schwerpunkt-kachel {
      aspect-ratio: auto;
      min-height: 170px;
   }
}

/* Der Titel gross in Baskerville, wie die Ziffern der Slider und die
   Auszeichnungen der Seite.

   hyphens: none - ein Schwerpunktname wird nicht getrennt; das globale
   "* { hyphens: auto }" wuerde sonst "Leistungsdiagnostik" am Zeilenende
   zerlegen. Die zusammengesetzten Namen tragen dafuer im Markup ein <wbr>
   an der Fuge, das ohne Trennstrich umbricht. */
.schwerpunkt-kachel__titel {
   font-family: var(--baskerville-font);
   font-size: 1.5rem;
   font-weight: 400;
   line-height: 1.25;
   color: var(--darkblue);
   -webkit-hyphens: none;
   hyphens: none;
}

/* Der einleitende Satz als gesperrte Versalien.

   ACHTUNG, GEMESSEN: --jadegruen (#A1BEAA) auf dem Kachelton (#e9f0fb)
   ergibt 1.75 : 1, im Hover auf Weiss 2.01 : 1 - weit unter den 4.5 : 1, die
   ein Text dieser Groesse braeuchte. Hier faellt es staerker ins Gewicht als
   bei der Sparte der Team-Kacheln: Dies ist ein ganzer Satz in gesperrten
   Grossbuchstaben, und beides - Sperrung und Versalien - macht das Lesen fuer
   sich genommen schon langsamer. Ausdruecklich so beauftragt und hier
   dokumentiert, nicht uebersehen. Wer es heben will: ein Ton aus
   color-mix(in srgb, var(--jadegruen) 50%, var(--darkblue)) kommt auf
   5.39 : 1 und bleibt gruenstichig.

   line-height 1.5 statt der ueblichen 1.2: Gesperrte Versalien brauchen mehr
   Zeilenabstand, sonst kleben die Zeilen aneinander, weil ihnen die
   Unterlaengen fehlen, die sonst Luft schaffen. */
.schwerpunkt-kachel__eyebrow {
   margin-top: 0.9rem;
   font-family: var(--hass-font-unica), sans-serif;
   font-size: 0.65rem;
   font-weight: 500;
   line-height: 1.5;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: var(--jadegruen);
}

/* Der Pfeil unten rechts. */
.schwerpunkt-kachel__pfeil {
   margin-top: auto;
   align-self: flex-end;
   font-size: 1.1rem;
   line-height: 1;
   color: var(--darkblue);
   transition: color 0.2s ease, transform 0.2s ease;
}

/* Beim Ueberfahren weicht das Blau und die Kachel hebt sich zwei Pixel.
   Weiss und nicht ein tieferer Ton: Die Kachel tritt damit aus der Reihe
   heraus, statt sich in ihr abzudunkeln. Kein Schatten, kein Rahmen, nichts
   skaliert - der einzige Farbakzent bleibt der Pfeil. */
.schwerpunkt-kachel:hover {
   background-color: #ffffff;
   transform: translateY(-2px);
}

.schwerpunkt-kachel:hover .schwerpunkt-kachel__pfeil {
   color: var(--jadegruen);
   transform: translateX(5px);
}

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

   .schwerpunkt-kachel,
   .schwerpunkt-kachel__pfeil {
      transition: background-color 0.2s ease, color 0.2s ease;
   }

   .schwerpunkt-kachel:hover,
   .schwerpunkt-kachel:hover .schwerpunkt-kachel__pfeil {
      transform: none;
   }
}