/* Kacheln ("So helfen wir") - Masse aus Figma: Titel 36px blau links,
   Leadtext 18px/150% max. 600px, Raster 3 Spalten mit 32px Abstand,
   Bild 12:5, Kacheltitel 24px blau mit 24px Innenabstand, Schatten
   bewusst zarter als im Design. Darunter Button + Textlink. */

#content section.mantik-tgrid,
.mantik-tgrid { position: relative; padding: 80px 0; margin: 0; overflow-x: clip; } /* Deko darf nicht seitlich scrollen */
.mantik-tgrid > .container { position: relative; }

/* Dekoration oben rechts (hellblau, hinter dem Inhalt, leichter Parallax) */
.mantik-tgrid--deco-hand > .container::before,
.mantik-tgrid--deco-snowflake > .container::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: -40px; right: -16px; width: 170px; height: 170px;
  background: center / contain no-repeat; opacity: .2;
  /* Frontend.js verschiebt die Deko beim Scrollen leicht (Parallax) */
  transform: translateY(var(--mantik-tgrid-deco-y, 0px)) rotate(var(--mantik-tgrid-rot, 0deg));
  will-change: transform;
}
.mantik-tgrid--deco-hand > .container::before { background-image: url("/Images/hand.svg"); --mantik-tgrid-rot: -12deg; }
.mantik-tgrid--deco-snowflake > .container::before { background-image: url("/Images/schneeflocke.svg"); --mantik-tgrid-rot: 30deg; }
.mantik-tgrid__intro, .mantik-tgrid__grid, .mantik-tgrid__actions { position: relative; z-index: 1; }

.mantik-tgrid__intro { max-width: 600px; margin-bottom: 48px; }
#content .mantik-tgrid .mantik-tgrid__title,
.mantik-tgrid .mantik-tgrid__title {
  margin: 0; font-size: 2.25rem; line-height: 1.3; font-weight: 500; color: #009fe3;
}
#content .mantik-tgrid .mantik-tgrid__lead,
.mantik-tgrid .mantik-tgrid__lead {
  margin: 24px 0 0; font-size: 1.125rem; line-height: 1.5; color: #212529;
}

.mantik-tgrid__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.mantik-tgrid__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mantik-tgrid__grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mantik-tgrid__grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* Zentrierte Variante: Titel mittig, Inhalt wie col-12 col-sm-10 */
.mantik-tgrid--center .mantik-tgrid__intro { max-width: 760px; margin-left: auto; margin-right: auto; text-align: center; }
.mantik-tgrid--center .mantik-tgrid__grid,
.mantik-tgrid--center .mantik-tgrid__actions { width: 100%; margin-left: auto; margin-right: auto; }
@media (min-width: 576px) {
  .mantik-tgrid--center .mantik-tgrid__grid,
  .mantik-tgrid--center .mantik-tgrid__actions { width: 83.3333%; }
}
.mantik-tgrid--center .mantik-tgrid__actions { justify-content: center; }


#content .mantik-tgrid .mantik-tgrid__card,
.mantik-tgrid .mantik-tgrid__card {
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border-radius: 4px; color: #009fe3; text-decoration: none;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .08);
  transition: box-shadow .2s ease, transform .2s ease;
}
#content .mantik-tgrid .mantik-tgrid__card--link:hover,
.mantik-tgrid .mantik-tgrid__card--link:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, .12); transform: translateY(-2px); text-decoration: none;
}

.mantik-tgrid__media { display: block; aspect-ratio: 12 / 5; background: #f2f2f2; overflow: hidden; }
.mantik-tgrid__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.mantik-tgrid__card--link:hover .mantik-tgrid__media img { transform: scale(1.03); }

#content .mantik-tgrid .mantik-tgrid__cardtitle,
.mantik-tgrid .mantik-tgrid__cardtitle {
  display: block; padding: 24px; font-size: 1.5rem; line-height: 1.3; font-weight: 500; color: #009fe3;
}

.mantik-tgrid__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px 32px; margin-top: 48px; }

#content .mantik-tgrid .mantik-tgrid__button,
.mantik-tgrid .mantik-tgrid__button {
  display: inline-flex; align-items: center; height: 46px; padding: 0 1.5rem;
  border-radius: 2rem; background: #009fe3; color: #fff; text-decoration: none;
  font-size: 1rem; line-height: 1.5; font-weight: 500; transition: background-color .2s ease;
}
#content .mantik-tgrid .mantik-tgrid__button:hover,
.mantik-tgrid .mantik-tgrid__button:hover { background: #0089c4; color: #fff; text-decoration: none; }

#content .mantik-tgrid .mantik-tgrid__more,
.mantik-tgrid .mantik-tgrid__more {
  display: inline-block;
  font-size: 1rem; line-height: 1.5; font-weight: 500; color: #009fe3; text-decoration: none;
}
#content .mantik-tgrid .mantik-tgrid__more:hover,
.mantik-tgrid .mantik-tgrid__more:hover { color: #009fe3; text-decoration: none; }
.mantik-tgrid__arrow { display: inline-block; transition: transform .2s ease; }
.mantik-tgrid__more:hover .mantik-tgrid__arrow { transform: translateX(4px); }

@media (max-width: 991px) {
  #content section.mantik-tgrid, .mantik-tgrid { padding: 48px 0; }
  .mantik-tgrid__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  #content .mantik-tgrid .mantik-tgrid__title,
  .mantik-tgrid .mantik-tgrid__title { font-size: 1.75rem; padding-right: 90px; }
  .mantik-tgrid--deco-hand > .container::before,
  .mantik-tgrid--deco-snowflake > .container::before { width: 100px; height: 100px; top: -24px; }
  .mantik-tgrid__intro { margin-bottom: 32px; }
  #content .mantik-tgrid .mantik-tgrid__cardtitle,
  .mantik-tgrid .mantik-tgrid__cardtitle { font-size: 1.25rem; padding: 16px 20px; }
}
@media (max-width: 575px) {
  .mantik-tgrid__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* Variante mit Pfeil (am Dateiende, damit die Titelfarbe gewinnt): Titel schwarz, Pfeil unten rechts in der Kachel */
#content .mantik-tgrid--arrow .mantik-tgrid__cardtitle,
.mantik-tgrid--arrow .mantik-tgrid__cardtitle { color: #212529; font-size: 1.25rem; padding-bottom: .5rem; }
.mantik-tgrid--arrow .mantik-tgrid__card { color: #212529; }
.mantik-tgrid__cardarrow {
  display: block; margin-top: auto; padding: 0 24px 20px; text-align: right;
  font-size: 1.5rem; line-height: 1; color: #009fe3;
}
.mantik-tgrid__cardarrow svg { transition: transform .2s ease; }
.mantik-tgrid__card--link:hover .mantik-tgrid__cardarrow svg { transform: translateX(4px); }