/* Startseite – Werte 1:1 aus relaunch-paket/referenz/Main.dc.html */

/* ---------- Hero ---------- */
.hero{padding-top:clamp(16px,5vh,110px);padding-bottom:clamp(150px,24vh,230px);display:flex;flex-wrap:wrap;gap:40px;align-items:center}
.hero-text{flex:1 1 640px;min-width:0}
.hero .lead{margin:clamp(14px,3vh,30px) 0 0;max-width:40em}
.hero-cta{display:flex;gap:12px;margin-top:clamp(18px,4vh,38px);flex-wrap:wrap}
.hero-art{flex:1 1 340px;min-width:0;position:relative;height:clamp(320px,52vh,440px)}

.fc{position:absolute;border-radius:18px;padding:16px 18px;color:var(--ink);background:rgba(255,255,255,.92);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.9);
  box-shadow:0 30px 60px -30px rgba(14,26,51,.45);display:flex;gap:12px;align-items:center;animation:fl 7s ease-in-out infinite}
.fc .ic{width:40px;height:40px;border-radius:12px;background:var(--royal);color:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.fc-t{font-weight:600}
.fc-s{font-size:13px;color:var(--muted)}
.fc-1{left:4%;top:6%}
.fc-2{right:0;top:34%;animation-delay:-2.5s}
.fc-3{left:12%;bottom:4%;animation-delay:-4.5s;flex-direction:column;align-items:stretch;width:260px}
.fc-3-head{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}
@keyframes fl{50%{transform:translateY(-14px)}}

/* ---------- Zahlenleiste ---------- */
.stats{margin-top:-90px;padding-bottom:100px}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1px;background:var(--hair);
  border-radius:22px;overflow:hidden;border:1px solid rgba(14,26,51,.08);margin:0}
.stats-grid div{background:#fff;padding:26px}
.stats-grid dt{order:2;color:var(--muted)}
.stats-grid dd{margin:0;font-family:var(--font-d);letter-spacing:-0.035em;font-size:40px;font-weight:800}
.stats-grid div{display:flex;flex-direction:column}
@media (max-width:900px){.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stats-grid div{padding:22px}}

/* ---------- Begriffe / Laufband ---------- */
.terms{padding:20px 0 110px}
.terms-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:40px}
.terms-head .h2{max-width:16ch}
.mq{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mqt{display:flex;gap:12px;width:max-content;animation:mqs 45s linear infinite;padding:8px 0}
.mq:hover .mqt,.mq:focus-within .mqt,.mq.paused .mqt{animation-play-state:paused}
@keyframes mqs{to{transform:translateX(-50%)}}
.tag{font-family:var(--font-d);font-weight:600;font-size:26px;letter-spacing:-0.02em;min-height:56px;padding:8px 26px;
  border-radius:999px;border:1px solid rgba(14,26,51,.1);background:#fff;color:var(--muted);cursor:pointer;white-space:nowrap;transition:all .25s}
.tag:hover,.tag.on{color:#fff;background:var(--ink);border-color:var(--ink)}
.mq-toggle{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;
  border:1px solid rgba(14,26,51,.12);background:#fff;font:600 14px var(--font-t);color:var(--ink);cursor:pointer}
.mq-toggle:hover{border-color:var(--royal);color:var(--royal)}
.term-box{display:flex;gap:20px;align-items:baseline;flex-wrap:wrap;padding:24px 28px;border-radius:20px;background:#fff;
  border:1px solid rgba(14,26,51,.07);margin-top:28px}
.term-box .d{font-size:24px;font-weight:700;color:var(--royal);flex:0 0 auto}
.term-box p{flex:1 1 400px;margin:0;font-size:18px;line-height:1.55;color:var(--ink-2)}

/* ---------- Lebensplaner-Teaser ---------- */
.teaser{padding:clamp(28px,4vw,56px)}
.teaser-in{display:flex;flex-wrap:wrap;gap:40px;align-items:center}
.teaser-text{flex:1 1 380px;min-width:0}
.teaser-text .h2{max-width:13ch}
.teaser-text p{margin:20px 0 0;font-size:18px;line-height:1.55;max-width:30em}
.teaser-art{flex:1 1 460px;min-width:0}
.teaser-svg{width:100%;height:auto;display:block}
.teaser-svg .pop{transform-box:fill-box;transform-origin:center}
.js .teaser-svg .draw{stroke-dasharray:1;stroke-dashoffset:1}
.js .teaser-svg.play .draw{animation:drawl 3.2s cubic-bezier(.6,.1,.3,1) .4s forwards}
.js .teaser-svg .pop,.js .teaser-svg .fadeup{opacity:0}
.js .teaser-svg.play .pop{animation:pop .5s cubic-bezier(.34,1.56,.64,1) forwards}
.js .teaser-svg.play .fadeup{animation:fu .8s ease 3.4s forwards}
@keyframes drawl{to{stroke-dashoffset:0}}
@keyframes pop{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}
@keyframes fu{to{opacity:1}}

/* ---------- Leistungs-Bento ---------- */
.sec{padding-bottom:120px}
.sec-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:40px}
.sec-head .h2{max-width:17ch}
.bento{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.bento .card{padding:30px}
.bento .card>div{height:100%;display:flex;flex-direction:column;gap:14px}
.bento h3{margin:auto 0 0;font-size:26px;font-weight:700}
.bento p{margin:0;font-size:16px;line-height:1.55;max-width:32em}
.span4{grid-column:span 4;min-height:240px}
.span2{grid-column:span 2;min-height:220px}
.span2.tall{min-height:240px}
.span6{grid-column:span 6;min-height:180px}
@media (max-width:860px){.bento{grid-template-columns:1fr}.bento>*{grid-column:auto!important}}

/* ---------- Ablauf ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.step{padding:28px;border-radius:22px;background:#fff;border:1px solid rgba(14,26,51,.07)}
.step h3{margin:18px 0 8px;font-size:24px;font-weight:700}
.step p{margin:0;line-height:1.55}
.num{font-family:var(--font-d);font-weight:800;font-size:64px;line-height:1;letter-spacing:-0.05em;
  background:linear-gradient(180deg,var(--royal),var(--ice));-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Mitarbeiten (dunkel) ---------- */
.join{padding-top:120px;padding-bottom:120px;display:flex;flex-wrap:wrap;gap:56px;align-items:center}
.join-text{flex:1 1 460px;min-width:0}
.join-text p{margin:24px 0 0;font-size:18px;line-height:1.6;max-width:32em}
.join-grid{flex:1 1 380px;min-width:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.join-grid .d{font-size:22px;font-weight:700}
.join-grid p{margin:8px 0 0;color:rgba(247,248,250,.7);line-height:1.5}

/* ---------- Kontakt ---------- */
.contact{max-width:1040px;padding-top:120px;padding-bottom:120px}
.contact .h2{margin:0 auto;max-width:14ch}
.contact p{margin:22px auto 0;font-size:18px;line-height:1.55;max-width:32em}
.contact-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px}

@media (max-width:1279px){.fc{padding:12px 14px;gap:10px}.fc .ic{width:34px;height:34px}.fc-3{width:220px}}
@media (max-width:1099px){.hero-art{display:none}}
@media (prefers-reduced-motion:reduce){
  .fc,.mqt{animation:none!important}
  .js .teaser-svg .draw{animation:none!important;stroke-dashoffset:0}
  .js .teaser-svg .pop,.js .teaser-svg .fadeup{animation:none!important;opacity:1}
}

/* Sehr niedrige Fenster (Laptop mit 150 % Skalierung): Hero kompakter */
@media (max-height:460px) and (min-width:700px){
  .hero .lead{font-size:16.5px;line-height:1.5}
  .hero-cta{margin-top:14px}
}