/* /homepages/pj-dpf/htdocs/css/landing.css
 * 2026-11-04: homepage redesign layer on top of home.css (hero motion, trust strip, icons,
 * illustrated DPF cycle, "how it works" timeline, opt-in section). Also used by the help page.
 * No external assets, fonts or tracking. All motion is switched off with prefers-reduced-motion.
 */
.ico{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- hero ---------- */
.hero-actions .text-link{margin:0;align-self:center}
.hero-status{display:flex;align-items:center;gap:10px}
.status-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--accent);animation:dd-pulse 2.4s ease-out infinite}
.hero-art .hero-orbit{border-color:rgba(66,211,165,.24)}
.hero-orbit-spin{position:absolute;inset:-1px;border-radius:50%;animation:dd-spin 22s linear infinite}
.orbit-dot{position:absolute;left:50%;top:-6px;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--accent);box-shadow:0 0 18px 4px rgba(66,211,165,.55)}
.hero-art .hero-orbit-2{width:78%;border-style:dashed;border-color:rgba(255,255,255,.09);transform:rotate(31deg) scaleY(.52)}
.hero-art::after{content:"";position:absolute;z-index:0;width:46%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(66,211,165,.30),transparent 70%);animation:dd-breathe 6s ease-in-out infinite}
.hero-chip{position:absolute;z-index:2;display:inline-flex;align-items:center;gap:8px;padding:9px 15px 9px 11px;border-radius:999px;border:1px solid rgba(66,211,165,.28);background:rgba(12,27,37,.84);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--text);font-size:.84rem;font-weight:700;letter-spacing:-.01em;white-space:nowrap;box-shadow:0 14px 34px rgba(0,0,0,.32);animation:dd-float 7s ease-in-out infinite}
.hero-chip .ico{width:18px;height:18px;color:var(--accent)}
.chip-a{top:13%;left:2%}
.chip-b{top:47%;right:0;animation-delay:-2.3s}
.chip-b .ico{color:#ffa45c}
.chip-c{bottom:12%;left:12%;animation-delay:-4.6s}
.chip-c .ico{color:#6cb8ff}

/* ---------- trust strip ---------- */
.trust-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:-40px 0 24px}
.trust-item{display:flex;align-items:flex-start;gap:13px;padding:18px;border:1px solid var(--line);border-radius:16px;background:rgba(17,31,43,.55);min-width:0}
.trust-item .ico{color:var(--accent);margin-top:1px}
.trust-item strong{display:block;font-size:.95rem;line-height:1.3}
.trust-item span{display:block;color:var(--muted);font-size:.84rem;margin-top:3px;line-height:1.45}

/* ---------- feature cards ---------- */
.feature-icon{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:13px;background:var(--accent-soft);border:1px solid rgba(66,211,165,.25);color:var(--accent);margin:0 12px 0 0;vertical-align:middle}
.feature-icon .ico{width:24px;height:24px}
.feature-icon.is-heat{background:rgba(255,164,92,.12);border-color:rgba(255,164,92,.3);color:#ffa45c}
.feature-icon.is-blue{background:rgba(108,184,255,.12);border-color:rgba(108,184,255,.3);color:#6cb8ff}
.page-home .feature-card{transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.page-home .feature-card:hover{transform:translateY(-4px);border-color:rgba(66,211,165,.32);box-shadow:0 20px 44px rgba(0,0,0,.28)}
.page-home .feature-card h3{margin-top:14px}
.section-more{margin:22px 0 0}

/* ---------- DPF cycle (illustration, no measured values) ---------- */
.dpf-story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,70px);align-items:center}
.dpf-copy h2,.help-copy h2{font-size:clamp(1.8rem,4vw,3.1rem);line-height:1.12;letter-spacing:-.045em;margin:0 0 18px}
.dpf-copy>p:not(.eyebrow),.help-copy p:not(.eyebrow){color:var(--muted);line-height:1.8;margin:0}
.dpf-steps{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:10px}
.dpf-step{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:rgba(17,31,43,.4);animation:dd-step 12s linear infinite both}
.dpf-step:nth-child(2){animation-delay:4s}
.dpf-step:nth-child(3){animation-delay:8s}
.dpf-step>span{font-size:.75rem;font-weight:800;letter-spacing:.12em;color:var(--accent);padding-top:3px}
.dpf-step strong{display:block;font-size:1rem}
.dpf-step p{margin:4px 0 0;color:var(--muted);font-size:.9rem;line-height:1.6}
.dpf-visual{padding:clamp(22px,4vw,40px);border:1px solid var(--line);border-radius:24px;background:radial-gradient(circle at 70% 20%,rgba(66,211,165,.10),transparent 60%),linear-gradient(140deg,#102430,#0a1821)}
.dpf-device{display:grid;grid-template-columns:1fr 2.6fr 1fr;align-items:center;height:150px}
.dpf-flow{position:relative;height:36px;border-top:1px solid rgba(255,255,255,.12);border-bottom:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.02);overflow:hidden}
.dpf-flow i{position:absolute;top:50%;left:-8px;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:#6b737b;animation:dd-flow 2.4s linear infinite}
.dpf-flow i:nth-child(2){top:28%;animation-delay:-.5s}
.dpf-flow i:nth-child(3){top:72%;animation-delay:-1s}
.dpf-flow i:nth-child(4){top:40%;animation-delay:-1.5s}
.dpf-flow i:nth-child(5){top:62%;animation-delay:-2s}
.dpf-flow-out i{width:5px;height:5px;margin-top:-2.5px;background:rgba(66,211,165,.8)}
.dpf-body{position:relative;height:100%;border-radius:28px;border:1px solid rgba(255,255,255,.16);background:#0d1e28;overflow:hidden;box-shadow:inset 0 0 30px rgba(0,0,0,.45)}
.dpf-cells{position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 13px,rgba(255,255,255,.07) 13px 14px),repeating-linear-gradient(0deg,transparent 0 13px,rgba(255,255,255,.05) 13px 14px)}
.dpf-soot{position:absolute;inset:0;background:radial-gradient(rgba(0,0,0,.6) 1.5px,transparent 2px) 0 0/9px 9px,linear-gradient(90deg,#14181b,#2a2f33);opacity:.12;animation:dd-soot 12s linear infinite}
.dpf-heat{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 60%,rgba(255,170,80,.8),rgba(255,98,50,.35) 45%,transparent 75%);opacity:0;animation:dd-heat 12s linear infinite}
.dpf-meter{margin-top:26px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center}
.dpf-meter-label{font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.dpf-meter-track{height:12px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden}
.dpf-meter-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#42d3a5,#e9c35a 62%,#ff7a45);clip-path:inset(0 86% 0 0 round 999px);animation:dd-meter 12s linear infinite}
.dpf-note{margin:12px 2px 0;color:#7f95a4;font-size:.8rem}

/* ---------- how it works ---------- */
.how-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.how-steps li{position:relative;padding:28px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(160deg,rgba(23,42,54,.75),rgba(11,26,37,.6));min-width:0}
.how-steps li:not(:last-child)::after{content:"";position:absolute;top:47px;right:-17px;width:18px;height:2px;background:linear-gradient(90deg,var(--accent),transparent)}
.how-num{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--accent);color:#05151a;font-weight:850;box-shadow:0 0 0 6px rgba(66,211,165,.12)}
.how-steps h3{margin:18px 0 10px;font-size:1.2rem;letter-spacing:-.02em}
.how-steps p{margin:0;color:var(--muted);line-height:1.7;font-size:.95rem}

/* ---------- opt-in "help improve the app" ---------- */
.help-panel{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(26px,5vw,64px);align-items:center;padding:clamp(28px,5vw,60px);border-radius:24px;border:1px solid rgba(66,211,165,.28);background:radial-gradient(circle at 0 0,rgba(66,211,165,.16),transparent 55%),linear-gradient(120deg,#10252f,#0a1a23);margin:40px 0 20px;scroll-margin-top:90px}
.help-links{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;margin-top:26px}
.help-links .text-link{margin-top:0}
.help-points{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.help-points li{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:14px;background:rgba(9,17,24,.45);border:1px solid var(--line);line-height:1.55}
.help-points .ico{width:22px;height:22px;padding:4px;border-radius:50%;background:var(--accent);color:#05151a;stroke-width:3.2;margin-top:1px}
.help-points span{color:var(--muted)}
.help-points strong{color:var(--text)}
.help-points-spaced{margin-top:16px}
#mithelfen,#contribute{scroll-margin-top:90px}

/* ---------- reveal on scroll (only when js/landing.js enabled it) ---------- */
.reveal-on [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal-on [data-reveal].is-visible{opacity:1;transform:none}
.reveal-on .how-steps li:nth-child(2){transition-delay:.12s}
.reveal-on .how-steps li:nth-child(3){transition-delay:.24s}

@keyframes dd-spin{to{transform:rotate(360deg)}}
@keyframes dd-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes dd-breathe{0%,100%{transform:scale(.92);opacity:.7}50%{transform:scale(1.08);opacity:1}}
@keyframes dd-pulse{0%{box-shadow:0 0 0 0 rgba(66,211,165,.55)}70%{box-shadow:0 0 0 9px rgba(66,211,165,0)}100%{box-shadow:0 0 0 0 rgba(66,211,165,0)}}
@keyframes dd-flow{0%{left:-8px;opacity:0}15%,85%{opacity:1}100%{left:100%;opacity:0}}
@keyframes dd-soot{0%{opacity:.12}33%,38%{opacity:.9}62%{opacity:.08}100%{opacity:.12}}
@keyframes dd-heat{0%,33%{opacity:0}38%{opacity:.95}58%{opacity:.8}66%,100%{opacity:0}}
@keyframes dd-meter{0%{clip-path:inset(0 86% 0 0 round 999px)}33%,38%{clip-path:inset(0 12% 0 0 round 999px)}62%{clip-path:inset(0 90% 0 0 round 999px)}100%{clip-path:inset(0 86% 0 0 round 999px)}}
@keyframes dd-step{0%{opacity:.5;border-color:rgba(255,255,255,.09);background:rgba(17,31,43,.4)}2%,31%{opacity:1;border-color:rgba(66,211,165,.45);background:rgba(66,211,165,.08)}33.4%,100%{opacity:.5;border-color:rgba(255,255,255,.09);background:rgba(17,31,43,.4)}}

@media(max-width:920px){
  .hero-art{overflow:hidden} /* rotated orbit ellipse otherwise widens the page on phones (390px: scrollWidth 425) */
  .hero-art .hero-orbit{width:min(90%,430px)}
  .hero-art .hero-orbit-2{width:min(78%,340px)}
  .hero-chip{font-size:.78rem;padding:7px 12px 7px 9px}
  .trust-strip{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:0}
  .dpf-story,.help-panel{grid-template-columns:1fr}
  .how-steps{grid-template-columns:1fr}
  .how-steps li:not(:last-child)::after{top:auto;bottom:-17px;right:auto;left:47px;width:2px;height:18px;background:linear-gradient(180deg,var(--accent),transparent)}
}
@media(max-width:650px){
  .trust-strip{grid-template-columns:1fr}
  .dpf-device{height:118px}
  .chip-a{left:0}
  .chip-c{left:3%}
  .how-steps li{padding:24px}
}
@media(prefers-reduced-motion:reduce){
  .status-dot,.hero-orbit-spin,.hero-chip,.hero-art::after,.dpf-flow i,.dpf-soot,.dpf-heat,.dpf-meter-fill,.dpf-step{animation:none}
  .dpf-flow i{left:45%}
  .dpf-soot{opacity:.5}
  .dpf-meter-fill{clip-path:inset(0 45% 0 0 round 999px)}
  .dpf-step{opacity:1}
  .page-home .feature-card{transition:none}
  .page-home .feature-card:hover{transform:none}
  .reveal-on [data-reveal]{opacity:1;transform:none;transition:none}
}