/* =========================================
   HERO
========================================= */

/* Variablen */
.section--hero{
  --card-logo-size: 130px;
  --hero-pad-block: clamp(52px, 8vw, 96px);
  --hero-gap: clamp(16px, 4vw, 28px);
}

.section--hero{ position:relative; padding-block: var(--hero-pad-block); overflow:hidden; }
.section--hero .hero-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.section--hero .shade{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 140% at 80% 20%, rgba(0,0,0,.12), rgba(0,0,0,.28) 70%),
    linear-gradient(to bottom, rgba(0,0,0,.06), rgba(0,0,0,0) 30%);
}

/* Layout */
.section--hero .hero-grid{
  position:relative; display:grid; grid-template-columns: 1fr min(420px, 36%);
  gap: var(--hero-gap); align-items:start;
}
.section--hero .hero-copy{ max-width:64ch; min-width:0; }
.section--hero .title{ margin:.2rem 0 .6rem; line-height:1.12; text-wrap: balance; hyphens:auto; }
.section--hero .lead{ margin:0 0 1rem; opacity:.95; overflow-wrap:anywhere; hyphens:auto; }
.section--hero .hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin:.25rem 0 .75rem; }
.section--hero .usp{ list-style:none; margin:.5rem 0 0; padding:0; }
.section--hero .usp li{ margin:.28rem 0; opacity:.95; overflow-wrap:anywhere; hyphens:auto; }

/* Schnellstart-Card */
.section--hero .hero-card{
  position:relative; align-self:start; background:#f0fdf4;
  border:1px solid #e5ece3; border-radius:14px; padding:16px 16px 18px;
  box-shadow:0 10px 28px rgba(0,0,0,.12);
}
.section--hero .hero-card-logo{
  position:absolute; top:12px; right:12px; height: var(--card-logo-size);
  width:auto; padding:0; border:0; background:transparent; box-shadow:none; pointer-events:none;
}
.section--hero .hero-card h3{
  margin:0 0 .6rem; padding-right: calc(var(--card-logo-size) + 16px); line-height:1.2;
  overflow-wrap:anywhere; hyphens:auto; text-wrap: balance;
}
.section--hero .hero-card ol{ margin:0 0 .6rem; padding-left:1.2rem; }
.section--hero .hero-card .hint{ margin:.4rem 0 0; opacity:.9; overflow-wrap:anywhere; hyphens:auto; }

/* Responsive */
@media (max-width: 960px){
  .section--hero .hero-grid{ grid-template-columns:1fr; }
  .section--hero{ --card-logo-size: 110px; }
  .section--hero .hero-card{ margin-top:8px; }
}
@media (max-width:520px){
  .section--hero{ --card-logo-size: 96px; }
  .section--hero .hero-card{ padding:14px 14px 16px; }
}