/*
 * CType schule_dynamische_navigation: Unterseiten-Kacheln.
 * Bootstrap-Grid (row-cols-lg-3) aus gsb_public_frontend uebernimmt die
 * Spaltenaufteilung - hier nur die Kachel-Optik selbst.
 */

.frame-type-schule_dynamische_navigation {
  /* Basis fuer Mindesthoehe der Kachel, doppelte urspruengliche Hoehe
     (einzeilger Titel + Padding, ca. 4rem). */
  --dynamic-navigation-tile-height: 8rem;
  /* Anteil der Kachelhoehe, um den die erste Reihe ins Bild darueber
     hineinragt (siehe .dynamic-navigation-overlap-stage weiter unten).
     Eigene Variable statt Zahl in der calc-Formel, damit sich der Wert
     an einer Stelle justieren laesst. 15% (0.15) waren bei 128px
     Kachelhoehe nur 19px - auf einem 421px hohen Bild optisch nicht
     wahrnehmbar. Per DevTools-Messung auf 0.5 erhoeht (= 64px), das
     ist deutlich sichtbar. */
  --dynamic-navigation-overlap: 0.5;
}

/* Kachelbereich 10% schmaler als der Inhaltsbereich, zentriert. Zwei
   Klassen (.dynamic-navigation.row) noetig, um Bootstraps .row-Regel zu
   schlagen, die bereits margin-left/-right per Gutter-Variable belegt
   (dynamische-navigation.css laedt unabhaengig von der CSS-Reihenfolge
   sicher dagegen an, Spezifitaet 0-0-2-0 schlaegt 0-0-1-0 unabhaengig von
   der Ladereihenfolge der Stylesheets). Die Gutter-Paddings der einzelnen
   .col-Spalten (row-cols-lg-3, g-4) bleiben unveraendert - nur die
   Gesamtbreite der Row wird eingeschraenkt und zentriert. */
.dynamic-navigation.row {
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;
}

.dynamic-navigation-tile {
  position: relative;
  min-height: var(--dynamic-navigation-tile-height);
  /* Bootstraps .row/.col stretchen sich per Flexbox je Zeile auf den
     hoechsten Wert - height:100% laesst die Kachel diese gestreckte
     Spaltenhoehe ausfuellen, damit alle Kacheln einer Reihe gleich hoch
     bleiben, auch bei unterschiedlich langen Titeln. */
  height: 100%;
  display: flex;
  flex-direction: column;
  /* Icon-Platzhalter oben, Text unten - space-between schiebt beide an
     die Kanten, unabhaengig von der (variablen) Kachelhoehe. */
  justify-content: space-between;
  align-items: flex-start;
  padding: 1rem 1.5rem 1rem 1rem;
  border-radius: 5px;
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, .12);
  background: #fff;
  color: inherit;
  text-decoration: none;
}

/* Icon oben links: SVG bekommt currentColor, siehe konzept.md, "Icons:
   currentColor-Konvention" - Farbe kommt ueber color von hier, faerbt nur
   die Teile der Grafik mit fill="currentColor". PNG/JPG (img) bleiben immer
   bei ihrer Originalfarbe.

   Groesse skaliert an --dynamic-navigation-tile-height (die Halfte davon)
   statt an einem festen Wert, damit der Platz oberhalb des Titels auch bei
   einer kuenftig geaenderten Kachelhoehe weiterhin gut ausgefuellt ist.

   Der Block bleibt immer im Markup, auch ohne Icon (leer) - so steht der
   Titel bei jeder Kachel an derselben Stelle unten, unabhaengig davon, ob
   die Seite ein Icon hinterlegt hat. */
.dynamic-navigation-tile-icon {
  display: block;
  width: calc(var(--dynamic-navigation-tile-height) * 0.5);
  height: calc(var(--dynamic-navigation-tile-height) * 0.5);
  color: var(--bs-primary);
}

.dynamic-navigation-tile-icon svg,
.dynamic-navigation-tile-icon img {
  width: 100%;
  height: 100%;
}

/* Basis 1rem (16px) + 4px, fett - siehe Anforderung Kacheltext. */
.dynamic-navigation-tile-title {
  font-size: 1.25rem;
  font-weight: bold;
}

/* Zierstreifen rechts in der Schulform-Farbe, siehe Farbkonzept in konzept.md */
.dynamic-navigation-tile::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 3px;
  border-radius: 0 5px 5px 0;
  background: var(--bs-primary);
}

/*
 * Erste Kachelreihe ragt --dynamic-navigation-overlap (Anteil der
 * Kachelhoehe) ins Bild darueber - nur wenn die Redaktion das Haekchen
 * "In darueberliegendes Bild einruecken"
 * setzt (TCA-Feld tx_schule_nav_overlap_stage, siehe
 * Configuration/TCA/Overrides/tt_content_schule_dynamische_navigation.php).
 *
 * Bewusst keine automatische Erkennung per CSS-Selektor mehr (siehe
 * Git-Historie): ein frueherer Versuch mit
 * ".top-container:has(.frame-type-stage) + .main-container
 * .frame-type-schule_dynamische_navigation:first-child" verlangte drei
 * gleichzeitig erfuellte Bedingungen (Stage-Element vorhanden, in colPos
 * 0, unser Element :first-child in colPos 1) - fehlte eine, blieb
 * margin-top bei 0, ohne dass im Backend sichtbar war warum. Nur die
 * Redaktion weiss beim Anlegen der Seite zuverlaessig, ob ueber dem
 * Element ein Bild liegt - das gehoert als explizite Entscheidung ins
 * Backend, nicht als Heuristik ins CSS.
 *
 * margin-top sitzt am Wrapper (.frame), nicht an .dynamic-navigation
 * (.row): die Bootstrap-Gutter-Klasse g-4 traegt bereits einen eigenen
 * negativen margin-top zur Row-Ausrichtung, den wir nicht ueberschreiben
 * duerfen. Am Wrapper verschiebt sich das ganze Element inklusive beider
 * Reihen gemeinsam nach oben, der interne Abstand zwischen erster und
 * zweiter Reihe (row-gap aus g-4) bleibt dadurch unveraendert.
 *
 * position:relative + z-index heben den Wrapper ueber das Bild darueber,
 * damit die Kacheln beim Ueberlappen sichtbar davor liegen statt
 * dahinter. .main-wrapper (umschliesst top- und main-container, siehe
 * gsb_core Templates/Page/Default.html) hat kein eigenes z-index, bildet
 * also keinen neuen Stacking-Context - z-index:1 reicht damit aus. Das
 * fixierte Kreisrahmen-Band (z-index 1020) liegt in einer eigenen Ebene
 * weit darueber, betrifft aber nur den obersten Viewport-Streifen beim
 * Scrollen - das gilt fuer jeden Seiteninhalt dort, nicht nur fuer diese
 * Kacheln, und ist kein Effekt des Ueberlapps.
 *
 * Erster Anlauf (-0.15 * Kachelhoehe, keine 1rem-Korrektur) griff zwar
 * (per DevTools bei 1912px Breite gemessen: margin-top -19.2px, Nav-Top
 * 619, Frame-Bottom des Bild-Elements 643), blieb aber unsichtbar: das
 * vorausgehende Bild-Element (frame-type-textpic) selbst traegt am
 * <figure class="figure"> noch 1rem Bottom-Margin - Bootstrap-Reboots
 * Element-Selektor "figure { margin: 0 0 1rem }" (gsb_public_frontend
 * screen.css), der fuer ein einfaches Textpic-Element (ohne .frame-teaser-
 * oder .carousel-item-Vorfahren - nur dort wird er auf 0 zurueckgesetzt)
 * nicht ueberschrieben wird. Das eigentliche Foto (<img>/<picture>, ohne
 * eigenes Padding/Margin) endet damit 16px oberhalb der Frame-Kante
 * (gemessen: Bild-Bottom 627 vs. Frame-Bottom 643). Von den -19.2px
 * Versatz gingen die ersten 16px in diesen Leerraum, sichtbar blieben nur
 * 3.2px. -1rem gleicht das aus, bevor der eigentliche Versatz greift -
 * anders als eine fest gemessene Pixelzahl ist das kein Wert, der bei
 * anderen Viewport-Breiten abweicht: 1rem ist Bootstraps global fixe
 * Basis-Absatzmarge, nicht Teil der responsiven Bildskalierung.
 *
 * Mit der 1rem-Korrektur war der Versatz nachweislich real (margin-top
 * -35.2px, Kacheln 19.2px ueber der Bildkante), aber bei einem 421px
 * hohen Bild optisch kaum wahrnehmbar - 15% von 128px Kachelhoehe sind
 * schlicht zu wenig. --dynamic-navigation-overlap (oben an
 * .frame-type-schule_dynamische_navigation) auf 0.5 erhoeht, das ergibt
 * rund 64px sichtbaren Ueberlapp. Als eigene Variable statt Zahl in der
 * Formel, damit sich der Wert kuenftig an einer Stelle justieren laesst.
 */
.dynamic-navigation-overlap-stage {
  position: relative;
  z-index: 1;
  margin-top: calc(-1rem - var(--dynamic-navigation-tile-height) * var(--dynamic-navigation-overlap));
}