/* ═══════════════════════════════════════════════════════════════════════
   pwa.css – Installations-Abschnitt der Landingpage und Anleitungs-Overlay.

   Nutzt dieselben Brand-Tokens wie landing.css (--brand-* aus site.css),
   funktioniert aber auch eigenstaendig ausserhalb von .lp2, damit der
   Button spaeter z. B. in der Navigation wiederverwendet werden kann.
   ═══════════════════════════════════════════════════════════════════════ */

.pwa-block {
    --pwa-dark: var(--brand-green, #123047);
    --pwa-teal: #1F6F73;
    --pwa-accent: var(--brand-accent, #3FA66B);
    --pwa-ink: var(--brand-text, #1E252B);
    --pwa-muted: var(--brand-muted, #5E7283);
    position: relative;
    max-width: 880px;
    margin: 0 auto;
    padding: clamp(2rem, 4vw, 3rem);
    border-radius: 26px;
    background: linear-gradient(135deg, #123047 0%, #1F6F73 100%);
    color: #fff;
    overflow: hidden;
    text-align: center;
}

    /* Dezente Kreisgrafik im Hintergrund – reine Deko */
    .pwa-block::after {
        content: "";
        position: absolute;
        right: -90px;
        top: -90px;
        width: 260px;
        height: 260px;
        border-radius: 50%;
        background: rgba(255,255,255,.05);
        pointer-events: none;
    }

    .pwa-block > * {
        position: relative;
        z-index: 1;
    }

.pwa-block-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,255,255,.7);
    margin-bottom: .9rem;
}

.pwa-block h2 {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(1.5rem, 3.2vw, 2.2rem);
    color: #fff;
    margin-bottom: .9rem;
}

.pwa-block-lead {
    max-width: 560px;
    margin: 0 auto 1.75rem;
    color: rgba(255,255,255,.82);
    font-size: .98rem;
    line-height: 1.7;
}

/* ── Plattform-Chips ─────────────────────────────────────────────── */
.pwa-plattformen {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin: 0 0 1.75rem;
    padding: 0;
    list-style: none;
}

.pwa-chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .4rem .85rem;
    border-radius: 100px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.18);
    font-size: .8rem;
    font-weight: 600;
    color: rgba(255,255,255,.9);
}

    .pwa-chip i {
        font-size: .95rem;
        opacity: .85;
    }

/* ── Aktionen ────────────────────────────────────────────────────── */
.pwa-aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    justify-content: center;
    align-items: center;
}

.pwa-btn {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .9rem 2rem;
    border: 2px solid transparent;
    border-radius: 100px;
    background: var(--pwa-accent, #3FA66B);
    color: #fff;
    font-size: .98rem;
    font-weight: 700;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0,0,0,.22);
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}

    .pwa-btn:hover,
    .pwa-btn:focus-visible {
        background: #2f8354;
        color: #fff;
        transform: translateY(-2px);
    }

.pwa-btn-link {
    background: none;
    border: 0;
    padding: .5rem .25rem;
    color: rgba(255,255,255,.85);
    font-family: inherit;
    font-size: .88rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

    .pwa-btn-link:hover,
    .pwa-btn-link:focus-visible {
        color: #fff;
    }

.pwa-hinweis {
    margin: 1.1rem 0 0;
    font-size: .84rem;
    color: rgba(255,255,255,.68);
    min-height: 1.2em;
}

.pwa-fussnote {
    margin: 1.4rem 0 0;
    font-size: .78rem;
    color: rgba(255,255,255,.55);
}

/* ── Erfolgsmeldung nach der Installation ────────────────────────── */
.pwa-erfolg {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    padding: 1rem 1.4rem;
    border-radius: 16px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.25);
    font-weight: 600;
    font-size: .95rem;
}

    .pwa-erfolg i {
        font-size: 1.3rem;
        color: #7ee0a8;
    }

/* ── Anleitungs-Overlay ──────────────────────────────────────────── */
.pwa-overlay {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    background: rgba(10,24,35,.62);
    backdrop-filter: blur(3px);
    animation: pwaFade .18s ease-out;
}

@keyframes pwaFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

body.pwa-overlay-offen {
    overflow: hidden;
}

.pwa-dialog {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: 88vh;
    overflow-y: auto;
    padding: 2rem 1.75rem 1.75rem;
    border-radius: 22px;
    background: #fff;
    color: var(--brand-text, #1E252B);
    box-shadow: 0 26px 70px rgba(10,24,35,.35);
    text-align: left;
}

.pwa-dialog-schliessen {
    position: absolute;
    top: .85rem;
    right: .85rem;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(18,48,71,.07);
    color: var(--brand-green, #123047);
    font-size: .85rem;
    cursor: pointer;
}

    .pwa-dialog-schliessen:hover,
    .pwa-dialog-schliessen:focus-visible {
        background: rgba(18,48,71,.14);
    }

.pwa-dialog-badge {
    display: inline-block;
    padding: .28rem .7rem;
    border-radius: 100px;
    background: rgba(31,111,115,.1);
    color: #1F6F73;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: .8rem;
}

.pwa-dialog-titel {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.3rem;
    color: var(--brand-green, #123047);
    margin: 0 0 1.1rem;
}

.pwa-dialog-schritte {
    margin: 0;
    padding-left: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: .7rem;
    font-size: .92rem;
    line-height: 1.6;
    color: var(--brand-text, #1E252B);
}

    .pwa-dialog-schritte li::marker {
        color: #3FA66B;
        font-weight: 700;
    }

.pwa-dialog-hinweis {
    margin: 1.25rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid rgba(18,48,71,.1);
    font-size: .82rem;
    color: var(--brand-muted, #5E7283);
}

@media (prefers-reduced-motion: reduce) {
    .pwa-overlay { animation: none; }

    .pwa-btn { transition: none; }

        .pwa-btn:hover { transform: none; }
}