/**
 * @file quickstart.css
 * Schnellstart-Block: große Buttons mit Icon und Label.
 * Mobile-first: 2 Spalten, ab 768px 4 Spalten.
 *
 * Robust gegen das CKEditor-„Full HTML"-Format:
 * - Das Icon ist ein ::before (kein eigenes Element, das CKEditor als leeres
 *   Inline-Element entfernen würde). Eingefärbt per mask + currentColor.
 * - CKEditor verpackt die Links beim Speichern in einen <p>; display:contents
 *   löst diesen Wrapper im Layout auf, sodass die Links Grid-Items bleiben.
 */

.quickstart {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
  margin: var(--space-lg) 0;
  padding: 0;
  list-style: none;
}

.quickstart p {
  display: contents;
}

@media (min-width: 768px) {
  .quickstart {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
  }
}

.quickstart__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  min-height: 8rem;
  padding: var(--space-md) var(--space-sm);
  text-align: center;
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: var(--font-size-lg);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-white);
  background: var(--color-highlight);
  border: 2px solid var(--color-highlight);
  border-radius: var(--radius-md);
  transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base), transform var(--transition-base);
}

.quickstart__item:hover,
.quickstart__item:focus-visible {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-white);
  transform: translateY(-2px);
}

/* Icon: per CSS-mask aus SVG, in der Textfarbe (currentColor) eingefärbt. */
.quickstart__item::before {
  content: "";
  width: 2.5rem;
  height: 2.5rem;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-size: contain;
          mask-size: contain;
}

/* Icons als Inline-Data-URI: keine separate Datei nötig (deploy-unabhängig). */
.quickstart__item--programm::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%3Crect%20x%3D%273%27%20y%3D%274.5%27%20width%3D%2718%27%20height%3D%2716%27%20rx%3D%272%27%2F%3E%20%3Cline%20x1%3D%273%27%20y1%3D%279%27%20x2%3D%2721%27%20y2%3D%279%27%2F%3E%20%3Cline%20x1%3D%278%27%20y1%3D%272.5%27%20x2%3D%278%27%20y2%3D%276%27%2F%3E%20%3Cline%20x1%3D%2716%27%20y1%3D%272.5%27%20x2%3D%2716%27%20y2%3D%276%27%2F%3E%20%3Cline%20x1%3D%277%27%20y1%3D%2713%27%20x2%3D%2713%27%20y2%3D%2713%27%2F%3E%20%3Cline%20x1%3D%277%27%20y1%3D%2716.5%27%20x2%3D%2711%27%20y2%3D%2716.5%27%2F%3E%20%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%3Crect%20x%3D%273%27%20y%3D%274.5%27%20width%3D%2718%27%20height%3D%2716%27%20rx%3D%272%27%2F%3E%20%3Cline%20x1%3D%273%27%20y1%3D%279%27%20x2%3D%2721%27%20y2%3D%279%27%2F%3E%20%3Cline%20x1%3D%278%27%20y1%3D%272.5%27%20x2%3D%278%27%20y2%3D%276%27%2F%3E%20%3Cline%20x1%3D%2716%27%20y1%3D%272.5%27%20x2%3D%2716%27%20y2%3D%276%27%2F%3E%20%3Cline%20x1%3D%277%27%20y1%3D%2713%27%20x2%3D%2713%27%20y2%3D%2713%27%2F%3E%20%3Cline%20x1%3D%277%27%20y1%3D%2716.5%27%20x2%3D%2711%27%20y2%3D%2716.5%27%2F%3E%20%3C%2Fsvg%3E");
}

.quickstart__item--lageplan::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%3Cpath%20d%3D%27M12%2021.5s7-6.2%207-11.5a7%207%200%201%200-14%200c0%205.3%207%2011.5%207%2011.5z%27%2F%3E%20%3Ccircle%20cx%3D%2712%27%20cy%3D%2710%27%20r%3D%272.5%27%2F%3E%20%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%3Cpath%20d%3D%27M12%2021.5s7-6.2%207-11.5a7%207%200%201%200-14%200c0%205.3%207%2011.5%207%2011.5z%27%2F%3E%20%3Ccircle%20cx%3D%2712%27%20cy%3D%2710%27%20r%3D%272.5%27%2F%3E%20%3C%2Fsvg%3E");
}

.quickstart__item--campregeln::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%2020L12%204L21%2020Z%27%2F%3E%3Cpath%20d%3D%27M9%2020L12%2012L15%2020%27%2F%3E%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M3%2020L12%204L21%2020Z%27%2F%3E%3Cpath%20d%3D%27M9%2020L12%2012L15%2020%27%2F%3E%3C%2Fsvg%3E");
}

.quickstart__item--faq::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%3Cpath%20d%3D%27M20.5%2011.5a8%208%200%200%201-11.6%207.1L3.5%2020.5l1.9-5.3A8%208%200%201%201%2020.5%2011.5z%27%2F%3E%20%3Cpath%20d%3D%27M9.6%209.2a2.4%202.4%200%200%201%204.6%201c0%201.6-2.2%201.9-2.2%203.3%27%2F%3E%20%3Cline%20x1%3D%2712%27%20y1%3D%2716.5%27%20x2%3D%2712%27%20y2%3D%2716.5%27%2F%3E%20%3C%2Fsvg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23000%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%20%3Cpath%20d%3D%27M20.5%2011.5a8%208%200%200%201-11.6%207.1L3.5%2020.5l1.9-5.3A8%208%200%201%201%2020.5%2011.5z%27%2F%3E%20%3Cpath%20d%3D%27M9.6%209.2a2.4%202.4%200%200%201%204.6%201c0%201.6-2.2%201.9-2.2%203.3%27%2F%3E%20%3Cline%20x1%3D%2712%27%20y1%3D%2716.5%27%20x2%3D%2712%27%20y2%3D%2716.5%27%2F%3E%20%3C%2Fsvg%3E");
}