/* =============================================================================
   Kachelmenue — drei Themes fuer EIN Element
   =============================================================================
   Stefan-Direktive 03.09.2026: „Wir koennen ein Kachelmenue geben und dem dann
   ein anderes Theme." Nicht sieben Kachelmenues bauen.

   Deshalb steht hier KEIN eigenes Markup. Die drei Themes greifen auf genau die
   Klassen zu, die Cards.html ohnehin ausgibt. Ein Theme ist eine
   Gestaltungsentscheidung, kein zweiter Baustein.

   ADDITIV UND RUECKWIRKUNGSFREI: jede Regel haengt an [data-tilemenu-theme].
   Ein Element ohne Theme rendert byteidentisch wie vorher. Das ist die
   Bedingung dafuer, dass sich in sieben Mandanten nichts ungefragt aendert.

   MANDANTENNEUTRAL: keine Farbe ist fest verdrahtet. Alles liest die
   --mandant-*-Token, die jeder Mandant ohnehin setzt. Dasselbe Stylesheet
   sieht bei GFPi blau und bei einem anderen Mandanten anders aus, ohne dass
   hier eine Zeile dazukommt.
   ========================================================================== */

.menu-cards[data-tilemenu-theme] {
  --tm-tinte:  var(--mandant-text, #1A2E3D);
  --tm-leise:  var(--mandant-muted, #4A5A6A);
  --tm-akzent: var(--mandant-primary, #0075BF);
  --tm-link:   var(--mandant-link-on-light, var(--mandant-primary, #0075BF));
  --tm-grund:  var(--mandant-white, #fff);
  --tm-panel:  var(--mandant-neutral-lighter, #E8EEF5);
  --tm-linie:  color-mix(in srgb, var(--tm-tinte) 14%, transparent);
  --tm-uebergang: var(--mandant-transition, 200ms ease);

  /* Bildgroesse. Der erste Anlauf stand auf 3,25rem und ergab gemessene 52
     Pixel in einer 450 Pixel breiten Kachel — eine Briefmarke. Ein Piktogramm
     in einem Kachelmenue traegt die Kachel mit und muss auf Armlaenge erkennbar
     sein. Gemessen wird im Browser, nicht am verkleinerten Screenshot. */
  --tm-bild: 6rem;

  --tm-titel: clamp(1.0625rem, 1.02rem + 0.18vw, 1.1875rem);
  --tm-text:  0.9375rem;
  --tm-label: 0.8125rem;
}

/* Die Karten bringen aus dem Bestand Rundungen, Schatten und ein
   Weiss-auf-Weiss mit. Innerhalb eines Themes werden sie zurueckgesetzt —
   ausserhalb bleiben sie unangetastet. */
.menu-cards[data-tilemenu-theme] .menu-card__default {
  background: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  transform: none;
}
.menu-cards[data-tilemenu-theme] .menu-card__content { padding: 0; }
.menu-cards[data-tilemenu-theme] .menu-card { margin: 0; }

/* Gemeinsame Typografie aller drei Themes. */
.menu-cards[data-tilemenu-theme] .menu-card__title {
  font-size: var(--tm-titel);
  line-height: 1.25;
  font-weight: 700;
  margin: 0;
  color: var(--tm-tinte);
}
.menu-cards[data-tilemenu-theme] .menu-card__title a {
  color: inherit;
  text-decoration: none;
}
.menu-cards[data-tilemenu-theme] .menu-card__abstract {
  font-size: var(--tm-text);
  line-height: 1.55;
  color: var(--tm-leise);
  margin: 0;
  max-width: 36ch;
}
.menu-cards[data-tilemenu-theme] .menu-card__subtitle {
  font-size: var(--tm-label);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tm-link);
  margin: 0;
}
.menu-cards[data-tilemenu-theme] .menu-cards__heading {
  font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  line-height: 1.25;
  font-weight: 700;
  color: var(--tm-tinte);
  margin: 0 0 0.4rem;
}
.menu-cards[data-tilemenu-theme] .menu-cards__subheading {
  font-size: 1.0625rem;
  color: var(--tm-leise);
  margin: 0 0 1.5rem;
  max-width: 60ch;
}

/* Die ganze Kachel ist das Ziel, nicht nur die Ueberschrift. Der sichtbare
   Link bleibt fuer Screenreader und Tastatur die Ueberschrift; die Flaeche
   darum bekommt den Klick per Pseudoelement. */
.menu-cards[data-tilemenu-theme] .menu-card { position: relative; }
.menu-cards[data-tilemenu-theme] .menu-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.menu-cards[data-tilemenu-theme] .menu-card:has(.menu-card__title a:focus-visible) {
  outline: 3px solid var(--tm-akzent);
  outline-offset: -3px;
}
.menu-cards[data-tilemenu-theme] .menu-card__title a:focus-visible { outline: none; }

/* Bilder und Symbole. Kultur-Piktogramme eines Mandanten bleiben Bilder;
   Font-Awesome-Symbole kommen als Inline-SVG und erben die Akzentfarbe. */
/* Bilder in einem Kachelmenue sind Piktogramme, keine Buehnenbilder. Das
   Bestands-Markup gibt ihnen w-full und aspect-video mit; ohne Gegenregel
   skaliert TYPO3 sie auf die volle Spaltenbreite — bei den Kultur-Piktogrammen
   der GFPi ergab das armlange Ruebenzeichnungen (03.09.2026 im Bild gesehen). */
.menu-cards[data-tilemenu-theme] .menu-card__image {
  display: block;
  width: var(--tm-bild);
  height: var(--tm-bild);
  max-width: 100%;
  object-fit: contain;
  aspect-ratio: 1;
}
.menu-cards[data-tilemenu-theme] .menu-card__default > a {
  display: block;
  width: max-content;
  max-width: 100%;
  overflow: hidden;
}
/* Das Symbol kommt als CSS-Maske, nicht als Bild. Damit erbt es die
   Mandantenfarbe aus --tm-akzent — ein <img> waere in jedem Mandanten gleich
   schwarz. Die Datei liegt im eigenen Depot, es wird nichts nachgeladen. */
.menu-cards[data-tilemenu-theme] .menu-card__icon {
  display: block;
  flex: none;
  width: var(--tm-bild);
  height: var(--tm-bild);
  background-color: var(--tm-akzent);
  -webkit-mask-image: var(--menu-icon);
  mask-image: var(--menu-icon);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
/* Ohne Maskenunterstuetzung bliebe ein farbiger Block stehen — dann lieber
   nichts anzeigen als einen Klotz. */
@supports not ((mask-image: none) or (-webkit-mask-image: none)) {
  .menu-cards[data-tilemenu-theme] .menu-card__icon { display: none; }
}

/* --- Theme 1: Register --------------------------------------------------
   Ruhig und sachlich. Haarlinienraster, drei Spalten, kein Schatten. Die
   Bauform, die am wenigsten vom Inhalt ablenkt — fuer Bereiche mit eigenen
   Bildern oder Piktogrammen.                                             */
.menu-cards[data-tilemenu-theme="register"] .menu-cards__grid {
  display: grid;
  gap: 1px;
  /* Weisser Grund, nicht die Linienfarbe: bei unvollstaendiger letzter Reihe
     wuerde ein farbiger Grund die leeren Zellen als graue Bloecke ausmalen. */
  background: var(--tm-grund);
  border: 1px solid var(--tm-linie);
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}
@media (min-width: 75em) {
  .menu-cards[data-tilemenu-theme="register"] .menu-cards__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.menu-cards[data-tilemenu-theme="register"] .menu-card {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  background: var(--tm-grund);
  padding: clamp(1.4rem, 2.2vw, 1.9rem);
  outline: 1px solid var(--tm-linie);
  transition: background var(--tm-uebergang);
}
.menu-cards[data-tilemenu-theme="register"] .menu-card::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 3px;
  background: var(--tm-akzent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--tm-uebergang);
}
.menu-cards[data-tilemenu-theme="register"] .menu-card:hover,
.menu-cards[data-tilemenu-theme="register"] .menu-card:focus-within { background: var(--tm-panel); }
.menu-cards[data-tilemenu-theme="register"] .menu-card:hover::after,
.menu-cards[data-tilemenu-theme="register"] .menu-card:focus-within::after { transform: scaleX(1); }
.menu-cards[data-tilemenu-theme="register"] .menu-card__image { margin-bottom: 0.4rem; }

/* --- Theme 2: Signet ----------------------------------------------------
   Mehr Praesenz. Das Symbol sitzt in einem getoenten Quadrat und wird zur
   Marke der Kachel. Fuer Einstiegsseiten, die etwas hermachen sollen.     */
.menu-cards[data-tilemenu-theme="signet"] .menu-cards__grid {
  display: grid;
  gap: 1px;
  background: var(--tm-grund);
  border: 1px solid var(--tm-linie);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
@media (min-width: 75em) {
  .menu-cards[data-tilemenu-theme="signet"] .menu-cards__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.menu-cards[data-tilemenu-theme="signet"] .menu-card {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  background: var(--tm-grund);
  padding: clamp(1.5rem, 2.4vw, 2rem);
  outline: 1px solid var(--tm-linie);
  border-top: 3px solid transparent;
  transition: background var(--tm-uebergang), border-color var(--tm-uebergang);
}
.menu-cards[data-tilemenu-theme="signet"] .menu-card:hover,
.menu-cards[data-tilemenu-theme="signet"] .menu-card:focus-within {
  background: var(--tm-panel);
  border-top-color: var(--tm-akzent);
}
.menu-cards[data-tilemenu-theme="signet"] { --tm-bild: 4rem; }
.menu-cards[data-tilemenu-theme="signet"] .menu-card__icon,
.menu-cards[data-tilemenu-theme="signet"] .menu-card__default > a {
  width: 7rem;
  height: 7rem;
  display: grid;
  place-items: center;
  background: var(--tm-panel);
  flex: none;
}

/* --- Theme 3: Zeile -----------------------------------------------------
   Fuer lange Listen. Dreizehn Eintraege als Kacheln zwingen das Auge in ein
   Raster; als Zeilen liest man sie in einem Durchgang. Auf dem Telefon ist
   das ohnehin die einzige Bauform, die nicht in Streichholzschachteln endet. */
.menu-cards[data-tilemenu-theme="zeile"] .menu-cards__grid {
  display: grid;
  gap: 1px;
  background: var(--tm-grund);
  border: 1px solid var(--tm-linie);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 62em) {
  .menu-cards[data-tilemenu-theme="zeile"] .menu-cards__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.menu-cards[data-tilemenu-theme="zeile"] { --tm-bild: 3.5rem; }
.menu-cards[data-tilemenu-theme="zeile"] .menu-card {
  background: var(--tm-grund);
  padding: 1.15rem 1.4rem;
  outline: 1px solid var(--tm-linie);
  border-left: 3px solid transparent;
  transition: background var(--tm-uebergang), border-color var(--tm-uebergang);
}
/* Waagerecht ueber den Karteninhalt, NICHT ueber display:contents. Mit contents
   wandern Titel und Text in getrennte Rasterzellen; der Text landet dann in der
   schmalen Symbolspalte und bricht buchstabenweise um. Am 03.09.2026 genau so
   passiert und im Bild gesehen, bevor es hier korrigiert wurde. */
.menu-cards[data-tilemenu-theme="zeile"] .menu-card__default {
  display: flex;
  align-items: flex-start;
  gap: 1.1rem;
}
.menu-cards[data-tilemenu-theme="zeile"] .menu-card__content {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 0.25rem;
}
.menu-cards[data-tilemenu-theme="zeile"] .menu-card__default > a { flex: none; margin-top: 0.15rem; }
.menu-cards[data-tilemenu-theme="zeile"] .menu-card__abstract { max-width: 52ch; }

/* --- Theme 4: Zentriert ---------------------------------------------------
   Symbol ueber mittig gesetztem Text. Die ruhigste Bauform, wenn alle Eintraege
   gleichrangig sind und keiner hervorgehoben werden soll — Einstiegsseiten,
   Schnellzugriffe. Bewusst nur hier zentriert: im Fliesstext bleibt linksbuendig
   die Regel.                                                                */
.menu-cards[data-tilemenu-theme="zentriert"] {
  --tm-bild: 5.5rem;
}
.menu-cards[data-tilemenu-theme="zentriert"] .menu-cards__grid {
  display: grid;
  gap: 1px;
  background: var(--tm-grund);
  border: 1px solid var(--tm-linie);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
@media (min-width: 62em) {
  .menu-cards[data-tilemenu-theme="zentriert"] .menu-cards__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.menu-cards[data-tilemenu-theme="zentriert"] .menu-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.9rem;
  background: var(--tm-grund);
  padding: clamp(1.75rem, 2.6vw, 2.5rem) clamp(1.25rem, 2vw, 1.75rem);
  outline: 1px solid var(--tm-linie);
  transition: background var(--tm-uebergang);
}
.menu-cards[data-tilemenu-theme="zentriert"] .menu-card:hover,
.menu-cards[data-tilemenu-theme="zentriert"] .menu-card:focus-within {
  background: var(--tm-panel);
}
.menu-cards[data-tilemenu-theme="zentriert"] .menu-card__default {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
}
.menu-cards[data-tilemenu-theme="zentriert"] .menu-card__content {
  display: grid;
  gap: 0.35rem;
  justify-items: center;
}
.menu-cards[data-tilemenu-theme="zentriert"] .menu-card__abstract {
  max-width: 26ch;
  text-align: center;
}

/* --- Breite -------------------------------------------------------------
   Stefan 03.09.2026: „dass man die gesamte Seitenbreite auch mal nutzen kann,
   das muss ueberall gegeben sein." Nicht zentrierter Text als Zwang, sondern
   die Wahl — je Element, nicht nur je Seite.                              */
.menu-cards[data-tilemenu-width="box"]  { --tm-breite: var(--bdp-container-mode-box, 90rem); }
.menu-cards[data-tilemenu-width="wide"] { --tm-breite: var(--bdp-container-mode-wide, 100rem); }
.menu-cards[data-tilemenu-width="full"] { --tm-breite: 100%; }

.menu-cards[data-tilemenu-width] {
  width: min(100% - 3rem, var(--tm-breite));
  margin-inline: auto;
}
/* Volle Breite heisst wirklich voll: der Container der Seite wird verlassen,
   ohne dass ein waagerechter Ueberlauf entsteht. */
.menu-cards[data-tilemenu-width="full"] {
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-inline: clamp(1rem, 4vw, 3rem);
}
@media (max-width: 47.99em) {
  .menu-cards[data-tilemenu-width] { width: min(100% - 2rem, 100%); }
  .menu-cards[data-tilemenu-width="full"] { padding-inline: 1rem; }
}

/* --- Barrierefreiheit ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .menu-cards[data-tilemenu-theme] .menu-card,
  .menu-cards[data-tilemenu-theme] .menu-card::after { transition: none; }
}
@media (forced-colors: active) {
  .menu-cards[data-tilemenu-theme] .menu-card { outline: 1px solid CanvasText; }
}