/* D I E   T E A M - K A C H E L N   ( nur konzept.html )

   Der Mitarbeiter-Abschnitt zeigte eine Linkliste: neun <li class="employee-list">
   nebeneinander mit der reinen Sparte, blassblau hinterlegt, links ein Pfeil.
   Jetzt steht dort ein Raster quadratischer Kacheln - je Sparte eine Kachel mit
   der Sparte als Eyebrow, dem Claim der Teamseite in Baskerville und einem
   Pfeil unten rechts.

   D I E   A L T E   L I S T E   I S T   I N Z W I S C H E N   W E G:
   Beim Umbau hier blieb .column ul li.employee-list in css/style.css stehen,
   weil die Klasse damals noch auf allen neun Teamseiten die
   Sparten-Navigation trug. Auch dort steht sie nicht mehr - an ihrer Stelle
   liegt jetzt der Querlink-Block (css/schwerpunkte-querlinks.css). Die
   Regeln sind mit dem Umbau der Teamseiten aus css/style.css entfernt
   worden.

   Geladen NACH css/style.css und den min*-max*-Dateien. Alles haengt an
   .team-kacheln bzw. .kachel und greift damit nur hier. */

/* D A S   R A S T E R

   Der Vorspann darueber sitzt im vorhandenen .one-column (65% am Desktop,
   darunter 90/100%) - das ist das Muster der Seite fuer einen Fliesstext, der
   nicht ueber die ganze Breite laufen soll. Das Raster nimmt dagegen die volle
   Breite des .container-text.

   Die Stufen folgen der Kachelbreite, nicht dem Projektraster: Bei drei
   Spalten wird eine Kachel unterhalb von rund 900px so schmal, dass der
   laengste Claim ("Die wohl wirklich guten Seelen der Klinik.") in ihr nicht
   mehr ruhig steht; bei zwei Spalten passiert dasselbe unterhalb von 560px.
   Deshalb 3 / 2 / 1. */
/* D E R   K A C H E L T O N

   Er steht hier und nicht in :root von css/style.css, weil er nur an dieser
   einen Stelle vorkommt und style.css nach der Projektregel unangetastet
   bleibt. Erben tut die Kachel ihn von selbst.

   Warum keine vorhandene Variable: Die alten Balken trugen --superlightcyan
   (#f5faff). Als 15px hohe Zeile genuegte dieser Hauch
   Blau; als Quadrat von gemessenen 324px liest er sich auf Weiss gar nicht
   mehr als Flaeche. --lightcyan (#B9E5F8) ist der einzige andere blaue Ton
   im Projekt und mit Abstand zu kraeftig. Deshalb ein eigener Wert in
   derselben Richtung, nur traegerfaehig.

   Einen zweiten Ton braucht es nicht: Der Hover ist Weiss, siehe unten. */
.team-kacheln {
   --kachel-blau: #e9f0fb;

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

/* Der Abstand zwischen Vorspann und Raster gehoert dem Vorspann, und er wird
   hier festgesetzt statt der Kaskade ueberlassen: .one-column traegt in
   css/style.css "padding: 3rem 0", css/min769-max1023.css setzt daraus aber
   "padding: 0". Im Tablet-Band klebte das Raster deshalb unmittelbar unter
   der letzten Textzeile, waehrend am Desktop 3rem standen. Ein fester Wert
   an dieser einen Stelle haelt den Abstand ueber alle Breiten gleich; die
   uebrigen .one-column der Seite bleiben unberuehrt, weil die zweite Klasse
   nur hier steht. */
.one-column.team-intro {
   padding-bottom: 2.5rem;
}

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

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

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

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

/* D I E   K A C H E L

   Ein <a> als Flex-Spalte: Sparte, Claim, Pfeil. Der Pfeil wird ueber
   margin-top: auto nach unten und ueber align-self: flex-end nach rechts
   gedrueckt; alles darueber steht oben. So sitzt er in jeder Kachel an
   derselben Stelle, gleich wie lang der Claim ist.

   Der Hintergrund ist das helle Blau der bisherigen Balken, nur traegerfaehig
   - Herleitung oben bei den beiden Variablen.

   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. */
.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 var(--kachel-dauer) var(--kachel-kurve), transform var(--kachel-dauer) var(--kachel-kurve);
}

/* U N T E R   5 6 0 P X   F A E L L T   D A S   Q U A D R A T   W E G

   aspect-ratio gibt die Hoehe aus der Breite vor. Einspaltig ist die Kachel
   so breit wie der Container und damit auch so hoch - bei 390px Fenster ein
   Quadrat von gemessenen 342px, in dem zwei Zeilen Claim stehen und der Rest
   leer bleibt. Das ist kein Layout mehr, sondern ein Feld mit Text in der
   Ecke.

   min-height statt aspect-ratio: Die Kachel ist so hoch, wie ihr Inhalt es
   verlangt, mindestens aber 150px - kurze Claims wie "Laeuft." bekommen damit
   dieselbe ruhige Flaeche wie die langen, und lange laufen nicht ueber.

   DIESER BLOCK MUSS NACH .kachel STEHEN. Beide Regeln haben die Spezifitaet
   (0,1,0), es entscheidet die Reihenfolge - eine Media Query hebt daran
   nichts. Weiter oben bei den Rasterstufen notiert, wurde aspect-ratio: auto
   von der Basisregel wieder ueberschrieben, und die Kachel blieb quadratisch
   (gemessen: computed aspect-ratio "1 / 1" bei 390px). */
@media screen and (max-width: 560px) {

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

/* Die Sparte als Eyebrow.

   ACHTUNG, GEMESSEN: --jadegruen (#A1BEAA) auf dem Kachelblau (#e9f0fb)
   ergibt 1.75 : 1, im Hover auf Weiss 2.01 : 1. Das liegt weit unter den 4.5 : 1, die ein Text dieser Groesse braeuchte - und
   anders als bei der Ziffer im Bausteine-Slider ist das hier kein Schmuck,
   sondern die Sparte selbst. Ausdruecklich so beauftragt und 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. */
.kachel__sparte {
   font-family: var(--hass-font-unica), sans-serif;
   font-size: 0.65rem;
   font-weight: 500;
   line-height: 1.4;
   letter-spacing: 2px;
   text-transform: uppercase;
   color: var(--jadegruen);
   /* Platz fuer zwei Zeilen, auch wenn nur eine dasteht.

      Zwei der neun Sparten brechen um ("Psychologen und Neuropsychologen",
      "Physio- und Sporttherapeuten"), und ohne die Reserve begann ihr Claim
      eine Zeile tiefer als der der Nachbarkachel - in einer Reihe aus drei
      Quadraten sieht man das sofort. min-height und nicht height: Sollte ein
      Name spaeter dreizeilig werden, waechst die Zeile mit, statt zu
      ueberlappen. */
   min-height: 2.8em;
}

/* Der Claim in Baskerville, wie die Ziffern der beiden Slider und die
   Auszeichnungen der Seite. Kein hyphens: Ein Claim wird nicht getrennt;
   das globale "* { hyphens: auto }" wuerde "Beweglichkeit." sonst am
   Zeilenende zerlegen. */
.kachel__claim {
   margin-top: 0.75rem;
   font-family: var(--baskerville-font);
   font-size: 1.5rem;
   font-weight: 400;
   line-height: 1.25;
   color: var(--darkblue);
   -webkit-hyphens: none;
   hyphens: none;
}

/* Auf dem Telefon eine Nummer kleiner.

   Einspaltig ist die Kachel so breit wie der Container - bei 390px Fenster
   gemessene 342px -, und 1.5rem Baskerville ueber diese Breite wirkt dort
   nicht mehr wie eine Auszeichnung, sondern wie eine Ueberschrift. 1.12rem
   halten den Claim in der Uebersicht.

   Eigener Block und nicht der bei den Rasterstufen weiter oben: Beide Regeln
   haben die Spezifitaet (0,1,0), es entscheidet die Reihenfolge, und
   .kachel__claim steht darueber. Dieselbe Falle wie bei aspect-ratio - eine
   Media Query hebt an der Spezifitaet nichts. */
@media screen and (max-width: 560px) {

   .kachel__claim {
      font-size: 1.12rem;
   }
}

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

/* 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 - der Grund der Seite ist weiss
   (body { background: #ffffff }), die angefahrene Kachel wird also
   buchstaeblich durchsichtig und haengt allein an ihren zwei Pixel Hub.
   Kein Schatten, kein Rahmen, nichts skaliert - dieselbe Zurueckhaltung wie
   bei den Kacheln der unteren Pill-Leiste. Der einzige Farbakzent bleibt
   der Pfeil.

   Der Kontrast steigt dabei: Der Claim kommt auf Weiss auf 18.85 : 1 statt
   16.44 : 1. */
.kachel:hover {
   background-color: #ffffff;
   transform: translateY(var(--kachel-hub));
}

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

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

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

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

/* K A N T E N G L E I C H   M I T   D E N   K A C H E L N   D A R U E B E R
   -----------------------------------------------------------------
   Der Block stand in einem blanken .container-text und fluchtete damit in
   KEINEM Band mit den .container-cards darueber. Gemessener Versatz der
   Inhaltskanten, positiv heisst Kacheln weiter innen:

      Viewport   390   768   769  1023  1024  1200  1440
      links      +16  +4.9  +4.9 +17.1   -32   -32   -32

   Es waren zwei voneinander unabhaengige Ursachen, und deshalb genuegte
   auch keine einzelne Gegenmassnahme:

   1. D I E   B R E I T E.  Der Karten-Wrapper traegt cardStyle und damit
      eine eigene Leiter - 90% zwischen 481 und 768px, 80% zwischen 769 und
      1199px. Das blanke .container-text steht dort auf 80% bzw. 70%.
      Gemessener Wrapper-Versatz: 36.9px bei 768 und 769px, 49.1px bei
      1023px. OBERHALB VON 1199PX HAT cardStyle GAR KEINE EIGENE REGEL -
      dort sind beide Wrapper von Haus aus deckungsgleich. Behoben durch
      dieselbe Klasse im Markup (konzept.html).

   2. D E R   I N N E N A B S T A N D.  Der Karten-Wrapper traegt zusaetzlich
      .background-blocks mit padding: 2rem, also 32px je Seite; der
      Kachel-Wrapper trug null. Unterhalb von 481px kehrt sich das um: dort
      setzt cardStyle padding: 0.5rem (8px) und schlaegt mit (0,2,0) die
      1.5rem des .container-text - daher die +16px bei 390px. Behoben durch
      die Regel hier.

   Deshalb sprang der Versatz bei 1024px von +17.1 auf -32: ab dort faellt
   Ursache 1 weg und allein das Padding bleibt uebrig.

   NUR das Padding wird nachgebildet, NICHT die Klasse .background-blocks -
   die brächte ihren grauen Grund (#f8f8f8) mit, und der Kachelblock steht
   bewusst auf Weiss.

   Senkrecht bleibt alles, wie es war: .background-blocks setzt 2rem auch
   oben und unten, .container-text seine eigenen Werte. Das beruehrt die
   Kanten nicht und wuerde nur die Abstaende zum Nachbarabschnitt
   verschieben.

   BEWUSST IN KAUF GENOMMEN: Der Einleitungstext sitzt im selben Wrapper und
   wird mitbreiter - er steht in .one-column und nimmt davon 65% am Desktop,
   waechst also proportional mit. Die Zeilen werden laenger. */
.container-text.cardStyle.team-block {
   padding-inline: 2rem;
}

/* Unter 481px setzt cardStyle selbst padding: 0.5rem auf allen Seiten. Die
   Regel oben traegt (0,3,0) und wuerde das ueberschreiben; hier wird der
   Wert deshalb nachgezogen, damit der Block auch dort auf der Kante des
   Karten-Wrappers steht. Senkrecht bleibt cardStyle unangetastet, weil nur
   padding-inline gesetzt wird. */
@media screen and (max-width: 480px) {

   .container-text.cardStyle.team-block {
      padding-inline: 0.5rem;
   }
}