/* Wiederverwendbare UI-Komponenten */

.icon-box {
  background: var(--color-bg-alt);
  border-radius: var(--radius);
  padding: 1.5rem;
  text-align: center;
  height: 100%;
  transition: background .2s;
}
.icon-box:hover { background: #eef1f9; }
.icon-box .icon-circle {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--color-primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 1rem;
}
.icon-box h3 { font-size: 1.15rem; margin-bottom: .5rem; }

.cta-band {
  background: var(--color-secondary);
  color: #1a1a1a;
  padding: 2.5rem 0;
  text-align: center;
}
.cta-band h2 { color: var(--color-primary-dark); margin-top: 0; }
.cta-band p { color: #1a1a1a; }
.cta-band .btn-primary { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.cta-band .btn-primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); }

.accordion-button:not(.collapsed) {
  background: var(--color-bg-alt);
  color: var(--color-primary);
}

/* Download-Karten (Formulare, Merkblätter) */
.download-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--color-bg-alt);
  border: 1px solid #e2e6ee;
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
  height: 100%;
  transition: background .2s, border-color .2s, transform .15s;
}
.download-card:hover {
  background: #eef1f9;
  border-color: var(--color-primary);
  transform: translateY(-1px);
  color: inherit;
  text-decoration: none;
}
.download-card .download-icon {
  flex: 0 0 44px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.download-card .download-icon svg { width: 22px; height: 22px; }
.download-card strong { color: var(--color-primary); }