/* ==== Produktseiten (Datenerfassung & GPS) — geteilte Dramaturgie-Komponenten ==== */

.p-hero { padding-top: var(--sp-5); }
@media (max-width: 640px) { .p-hero { padding-top: var(--sp-2); } }
.p-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--sp-5); align-items: center; }
.p-hero-ctas { display: flex; gap: var(--sp-2); flex-wrap: wrap; margin-top: var(--sp-3); }
@media (max-width: 980px) { .p-hero-grid { grid-template-columns: 1fr; } }

.breadcrumb { display: flex; align-items: center; gap: .5em; font-size: .85rem; color: var(--ink-faint); margin-bottom: var(--sp-2); }
.breadcrumb a { color: var(--ink-faint); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; }

/* ---- Problem-Grid ---- */
.problem-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin-top: var(--sp-4); }
.problem-card { padding: var(--sp-3); border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); }
.problem-card .ic { width: 40px; height: 40px; border-radius: 10px; background: #F5E6E1; color: var(--danger); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.problem-card h3 { font-size: 1rem; margin-bottom: .4rem; }
.problem-card p { font-size: .9rem; color: var(--ink-soft); }
@media (max-width: 900px) { .problem-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .problem-grid { grid-template-columns: 1fr; } }

/* ---- Prozess-Schritte ---- */
.process-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); margin-top: var(--sp-4); counter-reset: step; }
.process-step { position: relative; padding-top: var(--sp-2); border-top: 2px solid var(--border); }
.process-step .num { font-family: var(--font-display); font-weight: 900; font-size: 2rem; color: var(--brand-200); display: block; margin-bottom: .6rem; }
.gps-theme .process-step .num { color: var(--gps-200); }
.process-step h3 { font-size: 1.02rem; margin-bottom: .4rem; }
.process-step p { font-size: .9rem; color: var(--ink-soft); }
@media (max-width: 900px) { .process-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .process-row { grid-template-columns: 1fr; } }

/* ---- Feature-Bereich mit Bild/Mockup wechselseitig ---- */
.feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); align-items: center; padding-block: var(--sp-4); }
.feature-row:not(:last-child) { border-bottom: 1px solid var(--border); }
.feature-row.rev .f-copy { order: 2; }
.feature-row .eyebrow { margin-bottom: .8rem; }
.feature-row h3 { font-size: clamp(1.4rem, 1vw + 1.1rem, 1.9rem); margin-bottom: .8rem; }
.feature-row p.desc { color: var(--ink-soft); margin-bottom: 1.2rem; }
.feature-list { display: flex; flex-direction: column; gap: .6rem; }
.feature-list li { display: flex; gap: .6em; align-items: flex-start; font-size: .95rem; }
.feature-list svg { flex-shrink: 0; margin-top: .25em; color: var(--brand-700); }
.gps-theme .feature-list svg { color: var(--gps-700); }
@media (max-width: 900px) { .feature-row { grid-template-columns: 1fr; gap: var(--sp-3); } .feature-row.rev .f-copy { order: 0; } }

/* ---- Kleines Feature-Grid (sekundäre Funktionen) ---- */
.mini-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); margin-top: var(--sp-4); }
.mini-feature { padding: var(--sp-3); border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); }
.mini-feature .ic { width: 38px; height: 38px; border-radius: 9px; background: var(--brand-100); color: var(--brand-700); display: flex; align-items: center; justify-content: center; margin-bottom: .9rem; }
.gps-theme .mini-feature .ic { background: var(--gps-100); color: var(--gps-700); }
.mini-feature h3 { font-size: .98rem; margin-bottom: .35rem; }
.mini-feature p { font-size: .88rem; color: var(--ink-soft); }
@media (max-width: 900px) { .mini-feature-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .mini-feature-grid { grid-template-columns: 1fr; } }

/* ---- Anwendungsfälle ---- */
.usecase-row { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: var(--sp-4); }
.usecase-chip { display: inline-flex; padding: .8em 1.3em; border-radius: 999px; background: var(--surface); color: var(--brand-900); font-weight: 700; font-size: .92rem; border: 1.5px solid var(--brand-200); box-shadow: var(--shadow-sm); }
.gps-theme .usecase-chip { color: var(--gps-700); border-color: var(--gps-200); }

/* ---- Einwände (Accordion) ---- */
.faq-list { max-width: 780px; margin-top: var(--sp-3); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.3rem 0; cursor: pointer; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .chev { flex-shrink: 0; transition: transform .2s ease; color: var(--ink-faint); }
.faq-item[open] summary .chev { transform: rotate(180deg); }
.faq-item p { padding-bottom: 1.3rem; color: var(--ink-soft); max-width: 68ch; }

/* ---- Pricing-Karte ---- */
.price-card { max-width: 620px; margin-inline: auto; background: var(--surface); border: 1.5px solid var(--brand-700); border-radius: var(--r-lg); padding: var(--sp-4); box-shadow: var(--shadow-md); text-align: center; }
.gps-theme .price-card { border-color: var(--gps-700); }
.price-value { font-family: var(--font-display); font-weight: 900; font-size: 3.4rem; color: var(--brand-900); font-variant-numeric: tabular-nums; }
.gps-theme .price-value { color: var(--gps-700); }
.price-unit { font-size: .95rem; color: var(--ink-faint); margin-top: -.4rem; }
.price-list { display: flex; flex-direction: column; gap: .7rem; text-align: left; margin: var(--sp-3) 0; max-width: 420px; margin-inline: auto; }
.price-list li { display: flex; gap: .6em; font-size: .95rem; }
.price-list svg { flex-shrink: 0; color: var(--brand-700); margin-top: .2em; }
.gps-theme .price-list svg { color: var(--gps-700); }

/* ---- Zwei-Varianten-Vergleich (GPS) ---- */
.variant-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: var(--sp-4); }
.variant-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-4); }
.variant-card .tag { display: inline-block; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: .35em .8em; border-radius: 999px; background: var(--gps-100); color: var(--gps-700); margin-bottom: 1rem; }
.variant-card h3 { font-size: 1.3rem; margin-bottom: .6rem; }
.variant-card p.desc { color: var(--ink-soft); margin-bottom: 1.2rem; }
.variant-card .price-tag { font-family: var(--font-display); font-weight: 900; font-size: 1.7rem; color: var(--gps-700); margin-bottom: 1rem; }
.variant-card .price-tag span { font-family: var(--font-body); font-weight: 600; font-size: .85rem; color: var(--ink-faint); }
@media (max-width: 780px) { .variant-grid { grid-template-columns: 1fr; } }

.pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-top: var(--sp-4); max-width: 900px; margin-inline: auto; }
@media (max-width: 780px) { .pricing-grid { grid-template-columns: 1fr; } }

/* ---- Preis-Staffel (3 Stufen) ---- */
.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); margin-top: var(--sp-4); max-width: 900px; margin-inline: auto; }
.tier-card { background: var(--surface); border: 1.5px solid var(--border); border-radius: var(--r-lg); padding: var(--sp-3); text-align: center; }
.tier-card .tier-range { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-faint); margin-bottom: .8rem; }
.tier-card .tier-price { font-family: var(--font-display); font-weight: 900; font-size: 2.4rem; color: var(--brand-900); font-variant-numeric: tabular-nums; }
.tier-card .tier-unit { font-size: .82rem; color: var(--ink-faint); margin-top: -.2rem; }
@media (max-width: 780px) { .tier-grid { grid-template-columns: 1fr; max-width: 420px; } }

/* ---- Funktionen-Accordion ---- */
.func-accordion { max-width: 820px; margin-top: var(--sp-4); display: flex; flex-direction: column; gap: .6rem; }
.func-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.func-item summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.3rem; cursor: pointer; list-style: none; }
.func-item summary::-webkit-details-marker { display: none; }
.func-item-head { display: flex; align-items: center; gap: .9rem; min-width: 0; }
.func-item-head .ic { flex-shrink: 0; width: 40px; height: 40px; border-radius: 10px; background: var(--brand-100); color: var(--brand-700); display: flex; align-items: center; justify-content: center; }
.func-item-title { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.02rem; }
.func-item-teaser { display: block; font-size: .87rem; color: var(--ink-soft); margin-top: .15rem; }
.func-item summary .chev { flex-shrink: 0; transition: transform .2s ease; color: var(--ink-faint); }
.func-item[open] summary .chev { transform: rotate(180deg); }
.func-item[open] summary { border-bottom: 1px solid var(--border); }
.func-item-body { padding: 0 1.3rem 1.3rem calc(40px + .9rem + 1.3rem); }
.func-item-body p.desc { color: var(--ink-soft); margin-bottom: .9rem; }
.func-item-body .feature-list { gap: .5rem; }
@media (max-width: 640px) { .func-item-body { padding: 0 1.1rem 1.1rem 1.1rem; } .func-item summary { padding: 1rem 1.1rem; } }

/* ---- Sektions-Varianten ---- */
.section-tint { background: var(--brand-100); }
.gps-theme .section-tint { background: var(--gps-100); }