/* Installationsseite: Ergänzung zum gemeinsamen ESRA-Farbsystem. */
.download-page { min-height:100dvh; background:var(--cream); color:var(--text); }
.download-header { width:min(100% - 2rem,72rem); min-height:5.25rem; margin:auto; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--border-soft); }
.download-brand { display:inline-flex; align-items:center; gap:.7rem; color:inherit; text-decoration:none; }
.download-brand-mark { display:grid; place-items:center; width:2.35rem; height:2.35rem; border-radius:50%; background-color:var(--petrol-primary); background-image:url("../assets/brand/esra-app-icon.png"); background-position:center; background-repeat:no-repeat; background-size:cover; overflow:hidden; color:transparent; font-size:0; }
.download-brand strong,.download-brand small { display:block; line-height:1.2; }.download-brand small { margin-top:.16rem; color:var(--text-muted); font-size:.76rem; }
.download-main { width:min(100% - 2rem,72rem); margin:auto; padding:clamp(2.75rem,6vw,5rem) 0 4rem; }
.download-hero { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(15rem,.55fr); gap:clamp(2rem,6vw,5rem); align-items:end; padding-bottom:clamp(2.5rem,6vw,4.5rem); border-bottom:1px solid var(--border-soft); }
.download-kicker { margin:0 0 .75rem; color:var(--koralle); font-size:.78rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }.download-hero h1,.guide-heading h2,.download-help h2 { color:var(--petrol-primary); font-family:Georgia,"Times New Roman",serif; font-weight:600; letter-spacing:-.035em; }
.download-hero h1 { max-width:13ch; font-size:clamp(2.7rem,6vw,4.6rem); line-height:1.02; }.download-lede { max-width:57ch; margin:1.25rem 0 0; color:var(--text-muted); font-size:1.08rem; }
.download-actions { display:flex; flex-wrap:wrap; align-items:center; gap:1rem; margin-top:1.75rem; }.download-text-link { color:var(--petrol-primary); font-weight:700; text-underline-offset:4px; }.download-meta { margin:1rem 0 0; color:var(--text-muted); font-size:.82rem; }
.download-note { padding:1.1rem 1.2rem; border-left:3px solid var(--koralle); background:color-mix(in srgb,var(--koralle) 9%,var(--surface)); }.download-note strong { color:var(--petrol-primary); }.download-note p { margin:.35rem 0 0; color:var(--text-muted); font-size:.9rem; }
.install-guide { padding:clamp(3.75rem,8vw,6rem) 0; }.guide-heading { max-width:46rem; }.guide-heading h2 { font-size:clamp(2rem,4vw,3.25rem); }.guide-heading > p:last-child { margin:1rem 0 0; color:var(--text-muted); }
.install-steps { display:grid; gap:0; margin:2.5rem 0 0; padding:0; list-style:none; border-top:1px solid var(--border-soft); }.install-step { display:grid; grid-template-columns:3.2rem minmax(0,1fr); gap:1.25rem; padding:1.75rem 0; border-bottom:1px solid var(--border-soft); }.step-count { display:grid; place-items:center; width:2.2rem; height:2.2rem; border-radius:50%; color:var(--petrol-primary); background:color-mix(in srgb,var(--petrol-light) 18%,var(--surface)); font-weight:800; }.install-step h3 { margin:0; color:var(--petrol-primary); font-size:1.2rem; }.install-step p { max-width:57ch; margin:.55rem 0 0; color:var(--text-muted); }.step-content { display:grid; grid-template-columns:minmax(0,1fr) minmax(13rem,18rem); gap:clamp(1.25rem,4vw,3rem); align-items:start; }.step-content figure { margin:0; }.step-content img { width:100%; border:1px solid var(--border-soft); border-radius:.75rem; box-shadow:0 14px 32px color-mix(in srgb,var(--petrol-primary) 14%,transparent); }.step-content figcaption { margin-top:.55rem; color:var(--text-muted); font-size:.76rem; line-height:1.4; }.guide-tip { padding-left:.85rem; border-left:2px solid var(--petrol-light); }
.download-help { display:flex; justify-content:space-between; gap:1.5rem; align-items:center; padding:1.6rem 0 0; }.download-help h2 { font-size:clamp(1.6rem,3vw,2.25rem); }.download-help p { max-width:54ch; margin:0; color:var(--text-muted); }.download-footer { width:min(100% - 2rem,72rem); margin:auto; padding:1.5rem 0 2rem; border-top:1px solid var(--border-soft); color:var(--text-muted); font-size:.8rem; }
@media (hover:hover) and (pointer:fine) { .download-text-link:hover { color:var(--koralle-hover); }.step-content img { transition:transform 220ms cubic-bezier(.23,1,.32,1); }.step-content img:hover { transform:translateY(-3px); } }
@media (max-width:720px) { .download-header,.download-main,.download-footer { width:min(100% - 1.5rem,72rem); }.download-hero,.step-content { grid-template-columns:1fr; }.download-hero { align-items:start; }.download-note { max-width:35rem; }.download-help { align-items:flex-start; flex-direction:column; }.download-help .btn { width:100%; text-align:center; }.install-step { grid-template-columns:2.65rem minmax(0,1fr); gap:.75rem; }.download-hero h1 { max-width:12ch; } }
@media (prefers-reduced-motion:no-preference) { .download-hero,.install-step,.download-help { animation:install-reveal 480ms cubic-bezier(.23,1,.32,1) both; }.install-step:nth-child(2) { animation-delay:70ms; }.install-step:nth-child(3) { animation-delay:130ms; }.install-step:nth-child(4) { animation-delay:190ms; } @keyframes install-reveal { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }
[data-theme='dark'] .download-hero h1,[data-theme='dark'] .guide-heading h2,[data-theme='dark'] .download-help h2,[data-theme='dark'] .install-step h3,[data-theme='dark'] .download-note strong { color:var(--text); } [data-theme='dark'] .download-brand-mark { color:transparent; background-color:var(--petrol-light); } [data-theme='dark'] .download-note { background:color-mix(in srgb,var(--koralle) 12%,var(--surface-raised)); }