/* PIXELtoNEWS – Push-Benachrichtigungen (Seite im Kundenportal) */

.push-page {
    --push-accent: #14844a;
    --push-accent-soft: #eaf7f0;
    --push-accent-ink: #0f5c34;
    --push-warn-soft: #fdf6dc;
    --push-warn-ink: #6b4b06;
    --push-off: #8a8f98;
    --push-sun: #f2a93b;
    padding-bottom: 90px;
    max-width: 1120px;
}
.push-content > * { max-width: 760px; }
.push-content > .push-intro { max-width: none; }

html[data-theme="dark"] .push-page {
    --push-accent: #2fbf71;
    --push-accent-soft: #17301f;
    --push-accent-ink: #9fe3bd;
    --push-warn-soft: #3a3115;
    --push-warn-ink: #f2d27a;
    --push-off: #5d6470;
}

.push-nav-icon { display: block; }

.push-head { margin-bottom: 20px; }

.push-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.push-card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.push-muted { color: var(--muted); }

.push-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

.push-row-text { flex: 1; min-width: 0; }
.push-row-title { font-weight: 700; }
.push-row-sub { font-size: 13px; color: var(--muted); margin-top: 2px; }

.push-divider { height: 1px; background: var(--border); }

/* Lizenz-Hinweis */
.push-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 14px;
    padding: 12px 14px;
    font-size: 14px;
    background: var(--push-accent-soft);
    color: var(--push-accent-ink);
}
.push-banner svg { flex: none; }
.push-banner.is-warn { background: var(--push-warn-soft); color: var(--push-warn-ink); }

/* Schalter */
.push-switch {
    flex: none;
    width: 52px;
    height: 32px;
    border: 0;
    border-radius: 999px;
    background: var(--push-off);
    padding: 3px;
    display: flex;
    justify-content: flex-start;
    cursor: pointer;
    transition: background .15s ease;
}
.push-switch::after {
    content: "";
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
.push-switch[aria-checked="true"] { background: var(--push-accent); justify-content: flex-end; }
.push-switch:disabled { opacity: .5; cursor: not-allowed; }
.push-switch:focus-visible,
.push-button:focus-visible,
.push-site-head:focus-visible,
.push-select:focus-visible { outline: 3px solid var(--push-sun); outline-offset: 2px; }

/* Buttons & Auswahl */
.push-button {
    min-height: 44px;
    border: 1.5px solid var(--border);
    background: var(--panel2);
    color: var(--text);
    border-radius: 999px;
    padding: 0 18px;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.push-button:disabled { opacity: .6; cursor: progress; }
.push-button.is-small { min-height: 36px; padding: 0 14px; font-size: 13px; }
.push-button.is-primary { background: var(--push-sun); border-color: var(--push-sun); color: #1f2024; }

.push-ok {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 999px;
    background: var(--push-accent-soft);
    color: var(--push-accent-ink);
    font-weight: 700;
}

.push-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.push-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: var(--muted);
}

.push-select {
    min-height: 44px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--panel2);
    color: var(--text);
    padding: 0 10px;
    font: inherit;
    font-size: 15px;
}

.push-note {
    font-size: 13px;
    color: var(--muted);
    margin: 0;
}

.push-hint {
    font-size: 14px;
    border-radius: 12px;
    padding: 12px 14px;
    background: var(--push-warn-soft);
    color: var(--push-warn-ink);
    margin: 0;
}

.push-error { color: var(--red); font-size: 13px; margin: 0; }

/* Weitere Geräte */
.push-subs { display: flex; flex-direction: column; gap: 10px; }
.push-sub { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.push-sub span { flex: 1; min-width: 0; }
.push-sub small { display: block; color: var(--muted); font-size: 12px; }

/* Standorte */
.push-section-title { margin: 8px 4px 0; font-size: 20px; }
.push-section-sub { margin: 4px 4px 0; font-size: 14px; color: var(--muted); }

.push-site {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 18px;
    overflow: hidden;
}

.push-site-head {
    width: 100%;
    min-height: 64px;
    border: 0;
    background: transparent;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    text-align: left;
    font: inherit;
    cursor: pointer;
}
.push-site-head .push-row-title { font-size: 17px; }
.push-site-head svg { flex: none; color: var(--muted); transition: transform .15s ease; }
.push-site-head[aria-expanded="true"] svg { transform: rotate(180deg); }

.push-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--push-off); }
.push-dot.is-ok { background: #22a35a; }
.push-dot.is-warn { background: #e0ad1f; }

.push-devices { border-top: 1px solid var(--border); }
.push-device {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}
.push-device:last-child { border-bottom: 0; }
.push-device .push-grid { padding-left: 24px; }
.push-saved { font-size: 12px; color: var(--push-accent-ink); min-height: 16px; padding-left: 24px; }

/* Gesperrt */
.push-offer {
    background: #242424;
    color: #f5f3ee;
    border-radius: 22px;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.push-offer h2 { margin: 0; font-size: 24px; line-height: 1.15; }
.push-offer p { margin: 0; color: #c9ccd2; }
.push-offer-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--push-sun);
    color: #1f2024;
    display: flex;
    align-items: center;
    justify-content: center;
}
.push-offer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.push-offer li { display: flex; gap: 10px; align-items: flex-start; }
.push-offer li svg { flex: none; margin-top: 2px; color: #3fb27f; }
.push-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.push-price strong { font-size: 30px; }
.push-price span { color: #c9ccd2; }
.push-offer .push-button.is-primary {
    min-height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 17px;
}
.push-offer small { color: #b4b7be; text-align: center; font-size: 13px; }

.push-preview { opacity: .5; display: flex; flex-direction: column; gap: 10px; }
.push-preview .push-site-head { cursor: default; }

@media (max-width: 420px) {
    .push-grid { grid-template-columns: 1fr; }
    .push-device .push-grid,
    .push-saved { padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .push-switch, .push-site-head svg { transition: none; }
}
.push-saved:empty { display: none; }

/* Staffelpreise & Energiebericht */
.push-tiers { display: flex; flex-direction: column; gap: 6px; }
.push-tier {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .06);
}
.push-tier span { display: flex; flex-direction: column; }
.push-tier small { color: #f2c46b; font-size: 12px; }
.push-tier strong { font-size: 17px; white-space: nowrap; }
.push-tier.is-rec { background: rgba(242, 169, 59, .16); box-shadow: inset 0 0 0 1.5px #f2a93b; }
.push-offer .push-offer-fine { font-size: 13px; color: #b4b7be; margin-top: -6px; }

.push-offer-light .push-button { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.push-offer-icon.is-small { width: 40px; height: 40px; border-radius: 12px; flex: none; }

.push-saved.is-error { color: var(--red); }
.push-device.is-over .push-row-sub { color: var(--push-warn-ink); }

/* Paketwahl */
button.push-tier {
    width: 100%;
    border: 0;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    min-height: 52px;
}
button.push-tier:focus-visible { outline: 3px solid #f2a93b; outline-offset: 2px; }
.push-tier-text { flex: 1; min-width: 0; }
.push-tier-radio {
    flex: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #8a8f98;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
.push-tier.is-rec .push-tier-radio { border-color: #f2a93b; }
.push-tier.is-rec .push-tier-radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #f2a93b; }
.push-offer-warn { font-size: 13px; color: #f2c46b !important; margin-top: -4px !important; }
.push-tier-text { align-items: flex-start; }

/* Erweiterung vorschlagen */
.push-upgrade {
    background: var(--panel);
    border: 1.5px solid var(--push-sun);
    border-radius: 18px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.push-upgrade.is-compact { padding: 14px; margin-top: 4px; border-radius: 14px; }
.push-upgrade .push-button.is-primary {
    display: flex; align-items: center; justify-content: center; text-decoration: none;
}
.push-upgrade-plan {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    background: var(--panel2); border-radius: 12px; padding: 10px 12px;
}
.push-upgrade-plan strong { font-size: 18px; white-space: nowrap; }
.push-saved:has(.push-upgrade) { padding-left: 0; }
.push-saved .push-upgrade { color: var(--text); font-size: 15px; }
.push-saved .push-upgrade .push-row-title { color: var(--text); }
.push-saved .push-upgrade .push-row-sub, .push-saved .push-upgrade .push-note { color: var(--muted); }


/* Paket + Erklärung nebeneinander */
.push-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.push-intro-offers { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 900px) { .push-intro { grid-template-columns: 1fr; } }

.push-explain h2 { margin: 0; font-size: 22px; }
.push-explain h3 { margin: 6px 0 0; font-size: 15px; }
.push-explain-intro { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.push-explain-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.push-explain-list li { display: flex; gap: 12px; align-items: flex-start; }
.push-explain-list li > span:last-child { display: flex; flex-direction: column; gap: 1px; font-size: 14px; color: var(--muted); line-height: 1.45; }
.push-explain-list b { color: var(--text); font-size: 15px; }
.push-explain-icon {
    flex: none; width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
    background: var(--push-accent-soft); color: var(--push-accent-ink);
}
.push-explain-steps { margin: 0; padding: 0; list-style: none; counter-reset: st; display: flex; flex-direction: column; gap: 10px; }
.push-explain-steps li { counter-increment: st; display: flex; flex-direction: column; gap: 1px; padding-left: 38px; position: relative; font-size: 14px; color: var(--muted); }
.push-explain-steps li::before {
    content: counter(st); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%;
    background: var(--push-sun); color: #1f2024; font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center;
}
.push-explain-steps b { color: var(--text); font-size: 15px; }
.push-explain-note { margin: 0; font-size: 12.5px; color: var(--muted); border-top: 1px solid var(--border); padding-top: 12px; }
.push-explain.is-compact summary { cursor: pointer; font-weight: 700; min-height: 28px; display: flex; align-items: center; }
.push-explain.is-compact summary:focus-visible { outline: 3px solid var(--push-sun); outline-offset: 2px; border-radius: 6px; }
.push-explain.is-compact[open] summary { margin-bottom: 4px; }

/* Online-Buchung */
.push-billing-fine { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.push-billing-fine.is-dark { color: #b4b7be; text-align: center; }
.push-billing-fine a { color: inherit; text-decoration: underline; }
.push-testmode {
    display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
    background: #fde8dc; color: #9a3a0a; font-weight: 700; font-size: 11.5px;
}
.push-sub-info { display: block; font-size: 13px; margin-top: 2px; }
.push-linkbtn {
    border: 0; background: none; padding: 0; font: inherit; font-size: 13px; font-weight: 700;
    color: inherit; text-decoration: underline; cursor: pointer; min-height: 24px;
}
.push-linkbtn:focus-visible { outline: 3px solid var(--push-sun); outline-offset: 2px; border-radius: 4px; }
.push-offer button.push-button.is-primary { border: 0; font-size: 17px; min-height: 52px; }

/* Zustimmung zum sofortigen Beginn (Widerrufsrecht) */
.push-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.45; text-align: left; cursor: pointer; }
.push-consent input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #3fb27f; }
.push-offer .push-consent { color: #d6d8dc; }
.push-billing-fine a { color: inherit; text-decoration: underline; }