/* PV Payback – öffentliche Produktseite (/info) im appsolvia Design System.
   Baut auf _content/PvPayback.Shared/css/appsolvia-tokens.css auf (Farben, Schriften, Hell/Dunkel). Mobile first. */

:root {
    --gutter: 16px;
    --header-height: 64px;
    --product-max-width: 1200px;
    --product-section-space: 64px;
    --surface-bar: rgba(252, 254, 253, .88);
    --text-accent: var(--primary-600);
    --text-strong: var(--neutral-600);
    --icon-tile-bg: var(--primary-100);
    --icon-tile-fg: var(--primary-600);
    --success-bg: var(--success-100);
    --success-fg: var(--success-500);
    --page-bg: #F5F8F7;
}

@media (min-width: 600px) { :root { --gutter: 24px; } }
@media (min-width: 900px) { :root { --gutter: 40px; --header-height: 72px; --product-section-space: 104px; } }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --surface-bar: rgba(14, 38, 44, .88);
        --text-accent: var(--link-color);
        --text-strong: var(--text-heading);
        --icon-tile-bg: #113631;
        --icon-tile-fg: #C7E4DD;
        --success-bg: #103221;
        --success-fg: #9FD8B0;
        --page-bg: #071419;
    }
}

:root[data-theme="dark"] {
    --surface-bar: rgba(14, 38, 44, .88);
    --text-accent: var(--link-color);
    --text-strong: var(--text-heading);
    --icon-tile-bg: #113631;
    --icon-tile-fg: #C7E4DD;
    --success-bg: #103221;
    --success-fg: #9FD8B0;
    --page-bg: #071419;
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
    margin: 0;
    font: 400 16px/1.5 var(--font-body);
    color: var(--text-body);
    background: var(--page-bg);
}

h1, h2, h3, h4 { margin: 0; font-family: var(--font-heading); font-weight: 400; letter-spacing: -.015em; color: var(--text-heading); }
p { margin: 0 0 12px; }
img { max-width: 100%; }
a { color: var(--link-color); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--link-hover); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 4px; }
.icon { flex-shrink: 0; display: block; }

.section-label {
    margin: 0 0 12px;
    font: 400 clamp(14px, 3.6vw, 16px)/1.45 var(--font-heading);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-label);
}

.product [id] { scroll-margin-top: calc(var(--header-height) + 16px); }
.product-main:focus { outline: none; box-shadow: none; }

.product-container {
    max-width: var(--product-max-width);
    margin: 0 auto;
    padding: 0 max(var(--gutter), env(safe-area-inset-right, 0px)) 0 max(var(--gutter), env(safe-area-inset-left, 0px));
}

.product-container--narrow { max-width: 880px; }

.product-skip {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 70;
    padding: 10px 16px;
    border-radius: 4px;
    background: var(--surface-card);
    color: var(--text-accent);
    transform: translateY(-160%);
    transition: transform .2s ease;
}

.product-skip:focus { transform: none; }

/* ---------- Buttons (appsolvia ButtonPrimary/Secondary) ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 12px 24px;
    border: 0;
    border-radius: 4px;
    background: var(--primary-500);
    color: #FCFEFD;
    font: 700 15px/1.2 var(--font-body);
    text-decoration: none;
    cursor: pointer;
    transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}

.btn:hover { color: #FCFEFD; }
.btn-primary:hover { background: var(--button-primary-hover); }
.btn-primary:active { background: var(--primary-700); }

.btn-secondary { background: transparent; color: var(--text-accent); box-shadow: inset 0 0 0 1.2px currentColor; }
.btn-secondary:hover { background: var(--surface-tint); color: var(--text-accent); }
.btn-secondary:active { background: var(--primary-300); }

.btn-small { min-height: 40px; padding: 8px 16px; font-size: 14px; }

.btn-light { background: #FCFEFD; color: var(--primary-600); box-shadow: var(--shadow-5); }
.btn-light:hover { background: var(--primary-100); color: var(--primary-600); }
.btn-light:active { background: var(--primary-300); }

.btn-outline-light { background: transparent; color: #FCFEFD; box-shadow: inset 0 0 0 1.2px rgba(252, 254, 253, .85); }
.btn-outline-light:hover { background: rgba(252, 254, 253, .12); }
.btn-outline-light:active { background: rgba(252, 254, 253, .2); }

.btn:focus-visible { box-shadow: var(--focus-ring); }

/* ---------- Kopfzeile ---------- */
.product-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--surface-bar);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    backdrop-filter: saturate(1.4) blur(14px);
    box-shadow: inset 0 -1px 0 var(--border-default);
}

.product-header__inner {
    max-width: var(--product-max-width);
    height: var(--header-height);
    margin: 0 auto;
    padding: 0 max(var(--gutter), env(safe-area-inset-right, 0px)) 0 max(var(--gutter), env(safe-area-inset-left, 0px));
    display: flex;
    align-items: center;
    gap: 24px;
}

.product-brand { display: flex; align-items: center; gap: 10px; color: var(--text-heading); text-decoration: none; font-weight: 400; }
.product-brand:hover { color: var(--text-heading); }
.product-brand img { width: 36px; height: 36px; }
.product-brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.product-brand__name { font: 400 20px/1.15 var(--font-heading); letter-spacing: -.015em; }
.product-brand__by { font: 400 12px/1.3 var(--font-body); color: var(--text-muted); }

.product-nav { display: none; align-items: center; gap: 28px; margin-left: auto; }

.product-nav__link {
    padding: 8px 0;
    border-radius: 0;
    color: var(--text-muted);
    font: 700 15px/1.3 var(--font-body);
    text-decoration: none;
    box-shadow: inset 0 -2px 0 transparent;
    transition: color .2s ease, box-shadow .2s ease;
}

.product-nav__link:hover { color: var(--text-accent); box-shadow: inset 0 -2px 0 var(--primary-500); }

.product-header__actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.product-header__app { display: none; }

@media (min-width: 600px) { .product-header__app { display: inline-flex; } }

@media (min-width: 960px) {
    .product-nav { display: flex; }
    .product-header__actions { margin-left: 12px; }
}

/* ---------- Hero ---------- */
.product-hero {
    position: relative;
    overflow: hidden;
    padding: 48px 0 56px;
    background: var(--gradient-02);
    color: #FCFEFD;
}

/* Große, blasse Rauten aus dem Logo als Wasserzeichen */
.product-hero::before, .product-hero::after, .product-cta::after {
    content: "";
    position: absolute;
    border-radius: 28%;
    background: rgba(252, 254, 253, .06);
    transform: rotate(45deg);
    pointer-events: none;
}

.product-hero::before { top: -180px; right: -120px; width: 460px; height: 460px; }
.product-hero::after { bottom: -220px; left: -160px; width: 380px; height: 380px; }

.product-hero__inner { position: relative; z-index: 1; display: grid; gap: 48px; }

.product-hero__label {
    margin: 0 0 12px;
    font: 400 14px/1.4 var(--font-heading);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(252, 254, 253, .8);
}

.product-hero__title {
    max-width: 15em;
    font: 400 clamp(32px, 6.4vw + 8px, 54px)/1.12 var(--font-heading);
    letter-spacing: -.02em;
    color: #FCFEFD;
}

.product-hero__accent { color: var(--primary-300); }

.product-hero__lead {
    max-width: 34em;
    margin: 20px 0 0;
    font-size: 18px;
    line-height: 1.6;
    color: rgba(252, 254, 253, .9);
}

.product-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.product-hero__actions .btn { min-height: 48px; }

@media (max-width: 519.98px) { .product-hero__actions .btn { flex: 1 1 100%; } }

.product-hero__meta { margin: 16px 0 0; font-size: 14px; color: rgba(252, 254, 253, .8); }
.product-hero__meta a { color: #FCFEFD; }

.product-hero__visual { position: relative; padding: 0 12% 40px 0; }
.product-hero__phone { position: absolute; right: 0; bottom: 0; width: 28%; min-width: 104px; }

@media (min-width: 960px) {
    .product-hero { padding: 88px 0 96px; }
    .product-hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: center; gap: 56px; }
    .product-hero__visual { padding: 0 10% 48px 0; }
}

/* ---------- Geräterahmen ---------- */
.product-window {
    overflow: hidden;
    border-radius: 8px;
    background: var(--surface-card);
    box-shadow: var(--shadow-10), inset 0 0 0 1px var(--border-default);
}

.product-window__bar { display: flex; gap: 6px; padding: 10px 12px; background: var(--neutral-100); }
.product-window__bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--neutral-200); }

.product-window img, .product-phone img { display: block; width: 100%; height: auto; }

/* Dunkler Rand um den Screenshot; box-shadow hält die Ecken konzentrisch. */
.product-phone {
    overflow: hidden;
    border-radius: 32px;
    background: #050E18;
    box-shadow: 0 0 0 6px #050E18, var(--shadow-10);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .product-window__bar { background: #1D3C42; }
    :root:not([data-theme="light"]) .product-window__bar span { background: #2B4E54; }
    :root:not([data-theme="light"]) .product-phone { box-shadow: 0 0 0 6px #050E18, 0 0 0 7px #2B4E54, var(--shadow-10); }
}

:root[data-theme="dark"] .product-window__bar { background: #1D3C42; }
:root[data-theme="dark"] .product-window__bar span { background: #2B4E54; }

/* ---------- Abschnitte ---------- */
.product-section { padding: var(--product-section-space) 0; }

.product-section--tint {
    background: var(--surface-card);
    box-shadow: inset 0 1px 0 var(--border-default), inset 0 -1px 0 var(--border-default);
}

.product-heading { max-width: 760px; margin-bottom: 40px; }
.product-heading--center { margin-left: auto; margin-right: auto; text-align: center; }

.product-heading__title { font: 400 clamp(28px, 1.9vw + 20px, 40px)/1.2 var(--font-heading); letter-spacing: -.015em; }

.product-heading__lead, .product-copy { margin: 16px 0 0; font-size: 18px; line-height: 1.6; color: var(--text-body); }

.product-split { display: grid; gap: 40px; align-items: center; }
.product-split__media { display: flex; justify-content: center; }
.product-split__media .product-phone { width: min(300px, 78%); }
.product-split__media .product-window { width: 100%; }
.product-split__media--pair { gap: 20px; align-items: flex-start; }
.product-split__media--pair .product-phone { width: min(260px, 47%); }
.product-split__media--pair .product-phone + .product-phone { margin-top: 48px; }

@media (min-width: 900px) {
    .product-split { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 72px; }
    .product-split--reverse .product-split__text { order: 2; }
    .product-split--reverse .product-split__media { order: 1; }
}

.product-checks { display: grid; gap: 12px; margin: 24px 0 0; padding: 0; list-style: none; }
.product-checks li { display: flex; align-items: flex-start; gap: 12px; font-weight: 600; }
.product-checks .icon { margin-top: 2px; color: var(--primary-500); }

/* ---------- Zahlen ---------- */
.product-numbers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }

@media (min-width: 900px) { .product-numbers { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } }

.product-number {
    display: grid;
    gap: 4px;
    padding: 24px 16px;
    border-radius: 16px;
    background: var(--surface-card);
    box-shadow: var(--shadow-5);
    text-align: center;
}

.product-number__value {
    font: 700 clamp(30px, 2vw + 20px, 44px)/1.1 var(--font-heading);
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--text-accent);
}

.product-number__unit { font: 400 15px/1.4 var(--font-heading); letter-spacing: .06em; text-transform: uppercase; color: var(--text-label); }
.product-number__text { margin-top: 4px; font-size: 15px; color: var(--text-muted); }

/* ---------- Kacheln ---------- */
.product-tiles { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }

@media (min-width: 600px) { .product-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .product-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }

.product-tile { padding: 24px; border-radius: 8px; background: var(--surface-card); box-shadow: inset 0 0 0 1px var(--border-strong); }
.product-tile p { margin: 8px 0 0; color: var(--text-body); }

.product-tile__icon, .product-download__icon {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: var(--icon-tile-bg);
    color: var(--icon-tile-fg);
}

.product-tile__title, .product-step__title, .product-download__title { margin-top: 16px; font: 400 20px/1.3 var(--font-heading); }

/* ---------- Demo ---------- */
.product-hero__demo {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 12px;
    color: #FCFEFD;
    font-size: 15px;
}

.product-hero__demo:hover { color: var(--primary-300); }

.product-section--demo { background: var(--gradient-03); }

.product-demos { display: grid; gap: 24px; max-width: 980px; margin: 0 auto; }

@media (min-width: 900px) { .product-demos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.product-demo {
    display: flex;
    flex-direction: column;
    padding: 28px 24px 24px;
    border-radius: 16px;
    background: var(--surface-card);
    box-shadow: var(--shadow-5);
}

.product-demo__person { display: flex; align-items: center; gap: 16px; }

.product-demo__avatar {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--gradient-02);
    color: #FCFEFD;
    font: 600 20px/1 var(--font-heading);
    letter-spacing: .02em;
}

.product-demo__avatar--new { background: var(--primary-300); color: var(--primary-700); }
.product-demo__name { font: 400 24px/1.25 var(--font-heading); }
.product-demo__tag { margin: 2px 0 0; font-weight: 700; color: var(--text-accent); }
.product-demo__text { margin: 20px 0 0; }
.product-demo__checks { margin-bottom: 24px; }
.product-demo__form { margin-top: auto; }
.product-demo__button { width: 100%; min-height: 48px; }

.product-demo__note {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    max-width: 760px;
    margin: 32px auto 0;
    font-size: 15px;
    color: var(--text-body);
    text-align: center;
}

.product-demo__note .icon { margin-top: 2px; color: var(--primary-500); }

.product-demo-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    max-width: 760px;
    margin: 0 auto 24px;
    padding: 12px 16px;
    border-radius: 8px;
    background: var(--warning-100);
    color: var(--neutral-600);
    font-weight: 700;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .product-section--demo { background: linear-gradient(119.358deg, #113631 0%, #0B1F24 100%); }
    :root:not([data-theme="light"]) .product-demo__avatar--new { background: #1D3C42; color: #C7E4DD; }
}

:root[data-theme="dark"] .product-section--demo { background: linear-gradient(119.358deg, #113631 0%, #0B1F24 100%); }

/* ---------- Schritte ---------- */
.product-steps { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }

@media (min-width: 900px) { .product-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }

.product-step { padding: 28px 24px; border-radius: 8px; background: var(--page-bg); box-shadow: inset 0 0 0 1px var(--border-default); }
.product-step p { margin: 8px 0 0; }

.product-step__number {
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--gradient-02);
    color: #FCFEFD;
    font: 600 20px/1 var(--font-heading);
}

/* ---------- Downloads ---------- */
.product-detected {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 20px 0 0;
    padding: 8px 16px;
    border-radius: 32px;
    background: var(--success-bg);
    color: var(--success-fg);
    font: 700 15px/1.3 var(--font-body);
}

.product-downloads { display: grid; gap: 24px; }

@media (min-width: 900px) { .product-downloads { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; } }

.product-download {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 24px 24px;
    border-radius: 8px;
    background: var(--surface-card);
    box-shadow: inset 0 0 0 1px var(--border-strong);
}

.product-download--recommended { box-shadow: inset 0 0 0 2px var(--primary-500), var(--shadow-10); }

.product-download__badge {
    position: absolute;
    top: 0;
    right: 20px;
    transform: translateY(-50%);
    padding: 6px 12px;
    border-radius: 32px;
    background: var(--primary-500);
    color: #FCFEFD;
    font: 700 13px/1 var(--font-body);
}

.product-download__icon { width: 52px; height: 52px; }
.product-download__text { margin: 8px 0 20px; }
.product-download__button { width: 100%; margin-top: auto; }
.product-download__meta, .product-download__hint, .product-download__soon { margin: 12px 0 0; font-size: 14px; color: var(--text-muted); }
.product-download__meta { font-weight: 700; color: var(--text-label); }

.product-download__soon {
    margin-top: auto;
    padding: 12px 16px;
    width: 100%;
    border-radius: 8px;
    background: var(--surface-tint);
    color: var(--text-body);
}

/* ---------- Fragen ---------- */
.product-faq { display: grid; gap: 12px; }
.product-faq__item { border-radius: 8px; background: var(--page-bg); box-shadow: inset 0 0 0 1px var(--border-strong); }

.product-faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-radius: 8px;
    font: 700 17px/1.4 var(--font-body);
    color: var(--text-strong);
    cursor: pointer;
    list-style: none;
}

.product-faq__item summary::-webkit-details-marker { display: none; }
.product-faq__item summary:hover { color: var(--text-accent); }
.product-faq__chevron { transition: transform .2s ease; }
.product-faq__item[open] .product-faq__chevron { transform: rotate(180deg); }
.product-faq__item p { margin: 0; padding: 0 20px 20px; }

/* ---------- Abschluss ---------- */
.product-cta {
    position: relative;
    overflow: hidden;
    padding: var(--product-section-space) 0;
    background: var(--gradient-02);
    color: #FCFEFD;
    text-align: center;
}

.product-cta::after { top: -140px; right: -100px; width: 340px; height: 340px; }
.product-cta__inner { position: relative; z-index: 1; }
.product-cta__title { font: 400 clamp(28px, 1.9vw + 20px, 40px)/1.2 var(--font-heading); color: #FCFEFD; }
.product-cta__text { margin: 12px 0 0; font-size: 18px; color: rgba(252, 254, 253, .9); }
.product-cta__actions { justify-content: center; }

/* ---------- Fußzeile ---------- */
.product-footer {
    padding: 40px 0 calc(40px + env(safe-area-inset-bottom, 0px));
    background: var(--secondary-900);
    color: rgba(252, 254, 253, .78);
    font-size: 15px;
}

.product-footer__inner { display: grid; gap: 24px; align-items: center; }

@media (min-width: 900px) { .product-footer__inner { grid-template-columns: 1fr auto; } }

.product-footer__company { display: inline-flex; align-items: center; gap: 16px; justify-self: start; color: #FCFEFD; text-decoration: none; font-weight: 400; }
.product-footer__company:hover { color: #FCFEFD; }
.product-footer__company:hover .product-footer__claim { text-decoration: underline; }
.product-footer__logo { width: 44px; height: 44px; fill: #FCFEFD; flex-shrink: 0; }
.product-footer__claim { display: block; font: 700 17px/1.3 var(--font-body); }
.product-footer__slogan { display: block; margin-top: 2px; font-size: 14px; color: rgba(252, 254, 253, .7); }

.product-footer__links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; }

.product-footer__links a, .product-footer__link-button {
    padding: 0;
    border: 0;
    background: none;
    color: #FCFEFD;
    font: 700 15px/1.5 var(--font-body);
    text-decoration: none;
    cursor: pointer;
}

.product-footer__links a:hover, .product-footer__link-button:hover { color: var(--primary-300); text-decoration: underline; }

.product-footer__copyright {
    margin: 0;
    padding-top: 24px;
    font-size: 14px;
    color: rgba(252, 254, 253, .6);
    box-shadow: inset 0 1px 0 rgba(252, 254, 253, .12);
}

@media (min-width: 900px) { .product-footer__copyright { grid-column: 1 / -1; } }