/* ═══════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════ */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 28px; font-size: var(--fs-small); font-weight: 600;
  letter-spacing: 0.03em; border-radius: 8px; border: none;
  transition: all 220ms cubic-bezier(0.25,0.46,0.45,0.94);
  min-height: 44px; text-decoration: none;
}
.btn--primary {
  background: linear-gradient(135deg, var(--c-blue), var(--c-blue-deep));
  color: white; box-shadow: 0 2px 16px rgba(90,143,200,0.25);
}
@media(hover:hover) {
  .btn--primary:hover { transform: scale(1.03); box-shadow: 0 6px 28px rgba(90,143,200,0.4) }
}
.btn--secondary {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.15); color: var(--text-primary);
}
@media(hover:hover) {
  .btn--secondary:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.25); transform: scale(1.03);
  }
}
.btn--nav { padding: 8px 20px; font-size: 0.82rem }


/* ═══════════════════════════════════════════════════
   SEPARATOR — Sinus-Gradient mit Glow
   ═══════════════════════════════════════════════════ */

.separator { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--space-md) }
.separator__line {
  height: 1px;
  background: linear-gradient(90deg,
    rgba(91,155,213,0) 0%, rgba(91,155,213,0.10) 8%,
    rgba(123,198,126,0.30) 20%, rgba(123,198,126,0.55) 35%,
    rgba(232,184,77,0.72) 48%, rgba(232,184,77,0.75) 52%,
    rgba(123,198,126,0.55) 65%, rgba(91,155,213,0.30) 80%,
    rgba(91,155,213,0.10) 92%, rgba(91,155,213,0) 100%);
  box-shadow: 0 0 12px rgba(232,184,77,0.08), 0 0 4px rgba(123,198,126,0.06);
}


/* ═══════════════════════════════════════════════════
   GLASMORPHISM-KARTEN (Was-ist-es Sektion)
   ═══════════════════════════════════════════════════ */

.cards { display: grid; grid-template-columns: 1fr; gap: 1.5rem }
@media(min-width:768px) { .cards { grid-template-columns: repeat(3,1fr) } }
.card {
  background: var(--bg-card); border: 1px solid var(--bg-card-border);
  border-radius: 14px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  padding: var(--space-md); position: relative; overflow: hidden;
  transition: all 280ms cubic-bezier(0.25,0.46,0.45,0.94);
}
.card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  border-radius: 14px 14px 0 0;
}
.card--blue::before { background: linear-gradient(90deg, var(--c-blue), var(--c-blue-deep)) }
.card--green::before { background: linear-gradient(90deg, var(--c-green), rgb(90,160,90)) }
.card--amber::before { background: linear-gradient(90deg, var(--c-amber), rgb(200,148,56)) }
@media(hover:hover) {
  .card:hover {
    background: var(--bg-card-hover); border-color: rgba(255,255,255,0.12);
    transform: translateY(-4px);
  }
  .card--blue:hover { box-shadow: 0 12px 40px rgba(90,143,200,0.12), 0 0 0 1px rgba(90,143,200,0.08) }
  .card--green:hover { box-shadow: 0 12px 40px rgba(124,184,124,0.12), 0 0 0 1px rgba(124,184,124,0.08) }
  .card--amber:hover { box-shadow: 0 12px 40px rgba(220,168,76,0.12), 0 0 0 1px rgba(220,168,76,0.08) }
}
.card__title { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--text-primary); margin-bottom: var(--space-xs) }
.card__text { color: var(--text-secondary); line-height: 1.6 }


/* ═══════════════════════════════════════════════════
   MODUL-KARTEN (Inseln-Sektion)
   ═══════════════════════════════════════════════════ */

.modules-label {
  font-size: 0.78rem; color: var(--text-muted); text-transform: uppercase;
  letter-spacing: 0.14em; font-weight: 600; margin-bottom: var(--space-sm);
}
.modules-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-sm) }
@media(min-width:600px) { .modules-grid { grid-template-columns: repeat(3,1fr) } }
.module-card {
  background: var(--bg-card); border: 1px solid var(--bg-card-border);
  border-radius: 10px; padding: 1.2rem 1.5rem;
  transition: all 250ms; position: relative; overflow: hidden;
}
.module-card::after {
  content: ''; position: absolute; top: 0; left: 0; width: 3px; height: 100%;
  background: linear-gradient(180deg, var(--c-blue), var(--c-green)); opacity: 0;
  transition: opacity 250ms;
}
@media(hover:hover) {
  .module-card:hover {
    background: var(--bg-card-hover); border-color: rgba(255,255,255,0.12);
    transform: translateX(4px);
  }
  .module-card:hover::after { opacity: 1 }
}
.module-name { font-family: var(--font-display); font-size: 1rem; color: var(--text-primary); margin-bottom: 3px }
.module-desc { font-size: var(--fs-small); color: var(--text-muted) }