/* Only /vorlagen loads this file. Shared homepage styles remain untouched. */
.templates-page .templates-overview {
  padding-top: 72px;
  background: var(--soft-gray);
}

.templates-page .templates-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  max-width: 866px;
  margin-inline: auto;
  text-align: center;
}

/* The compact page title uses the homepage's section-heading scale. */
.templates-page .templates-intro h1 {
  font-size: 40px;
  line-height: 1.15;
  text-wrap: balance;
}

.templates-page .templates-intro p { max-width: 644px; }
.templates-page .templates-grid { margin-top: 64px; }
.templates-page .template-card { justify-content: flex-start; }
.templates-page .template-card-visual {
  display: grid;
  place-items: center;
  flex: none;
  margin: -40px -40px 0;
  padding: 40px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--button-blue);
}
.templates-page .template-card-visual > .template-icon {
  width: 140px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 14px rgb(0 14 56 / 10%));
}
.templates-page .template-card-copy { flex: 1; }
.templates-page .template-card h2 {
  font-size: 24px;
  line-height: 29px;
  text-align: left;
}

.templates-page .template-card .button {
  width: 100%;
  white-space: normal;
  text-align: center;
}

.templates-page .templates-product { background: var(--pale-blue); }
.templates-page .templates-product .feature-copy { grid-column: 1 / 6; }
.templates-page .templates-product h2 { text-align: left; }
.templates-page .templates-product .button {
  max-width: 100%;
  margin-top: 32px;
  white-space: normal;
  text-align: center;
}

@media (max-width: 1199px) {
  .templates-page .template-card-visual > .template-icon { width: 112px; }
}

@media (max-width: 767px) {
  .templates-page .template-card-visual { margin: -24px -24px 0; padding: 24px; }
  .templates-page .template-card-visual > .template-icon { width: 96px; }
  .templates-page .templates-overview { padding-top: 54px; }
  .templates-page .templates-intro h1 { font-size: 32px; }
  .templates-page .templates-grid { margin-top: 54px; }
  .templates-page .template-card { gap: 24px; }
  .templates-page .template-card h2 { font-size: 22px; line-height: 26px; }
  .templates-page .templates-product .button { width: 100%; }
}

@media (max-width: 374px) {
  .templates-page .templates-intro h1 { font-size: 28px; overflow-wrap: anywhere; }
}