.product-detail { --product-ink: #113b70; --product-blue: #185bc3; --product-edge: clamp(.75rem, 2svh, 1.5rem); --product-height: calc(100svh - var(--site-header-height, 5.25rem) - 2 * var(--product-edge)); color: var(--product-ink); background: #f5f6f9; padding-top: var(--product-edge); padding-bottom: 2rem; }
.product-width { width: min(calc(100% - 3rem), 112.5rem); margin-inline: auto; }
.product-hero { position: relative; isolation: isolate; display: flex; flex-wrap: wrap; align-items: stretch; min-height: var(--product-height); overflow: hidden; border-radius: 1.8rem; background: #c4e5ff; }
.product-hero::before, .product-hero::after { position: absolute; z-index: -1; content: ""; width: 48%; aspect-ratio: 1; border-radius: 4rem; background: #a2d6fb; transform: rotate(45deg); }
.product-hero::before { top: -52%; right: 23%; }
.product-hero::after { bottom: -65%; right: 18%; background: #87c9f5; }
.product-hero__copy { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; flex: 1.15 1 20rem; min-width: 0; padding: clamp(1.25rem, 3svh, 3rem) clamp(1.25rem, 3vw, 3.5rem); padding-right: 1rem; }
.product-hero__name { margin: 0 0 .5rem; font-size: clamp(1.1rem, 1.65vw, 1.8rem); font-weight: 450; }
.product-hero h1 { max-width: 22ch; margin: 0; font-size: clamp(1.8rem, min(2.9vw, 5.4svh), 3.3rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.14; text-wrap: balance; }
.product-hero__lede { max-width: 43ch; margin: clamp(.6rem, 1.7svh, 1rem) 0 0; font-size: clamp(1rem, 1.18vw, 1.25rem); line-height: 1.5; }
.product-checks { display: grid; gap: 1.25rem; padding: 0; margin: 0; list-style: none; }
.product-checks li { position: relative; padding-left: 1.6em; }
.product-checks li::before { content: ""; position: absolute; left: .16em; top: .45em; width: .62em; height: .34em; border-left: .15em solid var(--product-blue); border-bottom: .15em solid var(--product-blue); transform: rotate(-45deg); }
.product-hero__highlights { margin: clamp(.8rem, 2.5svh, 1.6rem) 0 0; gap: clamp(.45rem, 1.3svh, .85rem); font-size: clamp(1rem, min(1.4vw, 2.8svh), 1.5rem); line-height: 1.4; }
.product-price { margin-top: clamp(.85rem, 2.8svh, 2rem); }
.product-price > span { font-size: .94rem; font-weight: 550; }
.product-price p { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .65rem; margin: .2rem 0; }
.product-price strong { font-size: clamp(2.2rem, min(3.6vw, 6.5svh), 3.6rem); font-weight: 750; line-height: 1.12; letter-spacing: -.045em; }
.product-price p span { font-size: 1rem; font-weight: 600; }
.product-price small { display: block; margin-top: .5rem; font-size: .8rem; }
.product-hero__actions { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; align-items: center; margin-top: clamp(.75rem, 2svh, 1.4rem); }
.product-hero__actions .button { background: #1855c0; font-size: 1rem; font-weight: 600; box-shadow: none; }
.product-hero__more { padding-block: .7rem; font-size: 1rem; text-underline-offset: .25em; }
.product-art { position: relative; flex: 1 1 16rem; align-self: stretch; min-width: 0; margin: 0; }
.product-art__calendar { position: absolute; width: 91%; top: 44%; right: 8%; transform: translateY(-50%); padding: .3rem; border-radius: .6rem; background: #fff; box-shadow: 0 .7rem 2rem #16487718; }
.product-art__calendar img { width: 100%; border-radius: .35rem; }
.product-art__person { position: absolute; right: 0; bottom: 0; width: 100%; height: min(88%, 32rem); }
.product-art__person img { width: 100%; height: 100%; object-fit: contain; object-position: right bottom; }
.product-art--drawing { display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 3vw, 3rem); background: #98cef740; }
.product-art--drawing img { position: absolute; width: 82%; height: 72%; max-width: 30rem; max-height: 28rem; object-fit: contain; }
.product-nav { position: sticky; top: var(--site-header-height, 5.25rem); z-index: 5; margin-top: var(--product-edge); background: #d6ebfc; }
.product-nav > div { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0 .5rem; }
.product-nav a { display: flex; align-items: center; justify-content: center; min-height: 4rem; padding: 1rem 1.4rem; font-size: 1rem; font-weight: 550; text-decoration: none; }
.product-nav a:hover { background: #edf7ff; }
.product-nav a[aria-current="location"] { background: #fff; }
.product-nav .product-nav__price { margin-left: auto; gap: .75rem; }
/* The document already supplies 6rem of scroll-padding-top. */
.product-detail :is(#vorteile, #fragen) { scroll-margin-top: calc(var(--site-header-height, 5.25rem) + var(--product-nav-height, 4rem) + 1rem - 6rem); }
.product-benefits { padding-block: 2.5rem 3rem; }
.product-detail h2 { margin: 0 0 2rem; font-size: clamp(1.9rem, 2.6vw, 2.75rem); text-align: center; font-weight: 600; letter-spacing: -.025em; }
.product-benefits__grid { display: flex; flex-wrap: wrap; align-items: stretch; gap: clamp(1rem, 1.6vw, 2rem); }
.product-benefit { flex: 1 1 calc(25% - 2rem); min-width: min(100%, 16rem); padding: clamp(1.4rem, 2.4vw, 3rem) clamp(1.25rem, 2vw, 2.7rem) 2.7rem; border-radius: .4rem; background: #fff; box-shadow: 0 1px 3px #17365b14; }
.product-benefit h3 { display: flex; justify-content: center; align-items: center; min-height: 2.6em; margin: 0; text-align: center; font-size: clamp(1.45rem, 1.95vw, 2.25rem); font-weight: 500; line-height: 1.2; letter-spacing: -.02em; }
.product-benefit__image { height: 10rem; display: flex; justify-content: center; align-items: center; margin: 1.5rem 0; }
.product-benefit__image img { width: 9rem; max-height: 9rem; object-fit: contain; }
.product-benefit__text { min-height: 4.5em; margin: 1.6rem 0; text-align: center; font-size: clamp(1rem, 1.15vw, 1.3rem); line-height: 1.5; }
.product-benefit .product-checks { font-size: clamp(1rem, 1.3vw, 1.45rem); line-height: 1.55; gap: 1.65rem; }
.product-benefit a { text-underline-offset: .2em; }
.product-questions { max-width: 65rem; padding-block: 1.7rem; }
.product-questions details { border-top: 1px solid #cddae6; }
.product-questions details:last-child { border-bottom: 1px solid #cddae6; }
.product-questions summary { display: flex; gap: 1rem; justify-content: space-between; align-items: center; padding: 1.15rem .3rem; cursor: pointer; list-style: none; font-size: 1.1rem; font-weight: 550; }
.product-questions summary::-webkit-details-marker { display: none; }
.product-questions summary span { font-size: 1.65rem; line-height: 1; font-weight: 400; }
.product-questions details[open] summary span { transform: rotate(45deg); }
.product-questions details p { max-width: 70ch; margin: 0 0 1.5rem; padding-inline: .3rem; font-size: 1rem; line-height: 1.7; }
.product-related { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem 2rem; padding-block: 2rem; }
.product-related a { font-size: 1rem; text-underline-offset: .25em; }
.product-detail--split .product-hero { gap: 1.25rem; background: transparent; overflow: visible; }
.product-detail--split .product-hero::before, .product-detail--split .product-hero::after { display: none; }
.product-detail--split .product-hero__copy { border-radius: 1.8rem; background: #e4f3ff; padding-right: clamp(1.25rem, 3vw, 3.5rem); }
.product-detail--split .product-art { border-radius: 1.8rem; background: #b7dffc; overflow: hidden; }
.product-detail--split .product-benefit { flex-basis: calc(50% - 2rem); }
.product-detail--reverse .product-art { order: -1; background: #a2d6fb; border-radius: 50% 45% 45% 50%; margin: clamp(1rem, 3vw, 3rem); }
.product-detail--reverse .product-hero__copy { padding-right: clamp(1.25rem, 3vw, 3.5rem); padding-left: 1rem; }
@media (min-width: 1000px) {
    .product-detail--split .product-benefit { display: grid; grid-template-columns: 7rem 1fr; column-gap: 1.5rem; padding: 2rem; }
    .product-detail--split .product-benefit__image { grid-column: 1; grid-row: 1 / 4; margin: 0; align-self: center; }
    .product-detail--split .product-benefit h3, .product-detail--split .product-benefit__text, .product-detail--split .product-benefit .product-checks { grid-column: 2; min-height: 0; text-align: left; justify-content: flex-start; }
    .product-detail--split .product-benefit__text { margin: 1rem 0; }
    .product-detail--split .product-benefit .product-checks { font-size: 1.1rem; gap: .8rem; }
}
@media (max-width: 1150px) {
    .product-benefit { flex-basis: calc(50% - 2rem); }
}
@media (max-width: 1000px) {
    .product-hero__copy { flex-basis: 18rem; }
    .product-art { flex-basis: 13rem; }
    .product-detail--reverse .product-art { margin: .75rem; }
    .product-hero__actions { gap: .4rem .85rem; }
    .product-hero__actions .button { padding: .75rem; font-size: .9rem; min-height: 2.8rem; }
    .product-hero__more { font-size: .9rem; }
    .product-nav a { padding: .85rem; min-height: 3.25rem; }
}
@media (min-width: 680px) and (max-aspect-ratio: 4 / 3) {
    .product-art__person { height: auto; aspect-ratio: 1; max-height: 32rem; bottom: 50%; transform: translateY(65%); }
}
@media (min-width: 680px) and (max-height: 650px) {
    .product-hero__copy { padding-block: .85rem; }
    .product-hero__name { margin-bottom: .25rem; }
    .product-hero__lede { margin-top: .45rem; line-height: 1.4; }
    .product-hero__highlights { margin-top: .65rem; gap: .35rem; line-height: 1.3; }
    .product-price { margin-top: .65rem; }
    .product-price small { margin-top: .3rem; }
    .product-hero__actions { margin-top: .5rem; }
    .product-hero__actions .button { min-height: 2.75rem; padding-block: .6rem; }
}
@media (max-width: 679px) {
    .product-hero { min-height: 0; }
    .product-hero__copy { flex-basis: 100%; padding: 1.6rem; }
    .product-hero h1 { max-width: 26ch; font-size: 2rem; }
    .product-art { flex-basis: 100%; height: min(64vw, 23rem); }
    .product-art__person { width: 88%; height: 100%; right: 1%; }
    .product-art__calendar { top: 40%; width: 86%; right: 10%; }
    .product-detail--reverse .product-art { order: 0; margin: 0 1rem 1rem; flex-basis: calc(100% - 2rem); border-radius: 1rem; }
    .product-detail--reverse .product-hero__copy { padding: 1.6rem; }
    .product-detail--split .product-art, .product-detail--split .product-hero__copy { border-radius: 1rem; }
}
@media (max-width: 560px) {
    .product-width { width: calc(100% - 1.5rem); }
    .product-hero { border-radius: 1rem; }
    .product-hero__copy { padding: 1.6rem 1.35rem 1rem; }
    .product-hero h1 { font-size: 2rem; }
    .product-hero__highlights { font-size: 1.05rem; }
    .product-hero__lede { font-size: 1rem; }
    .product-price { margin-top: 1.5rem; }
    .product-nav a { flex: 1 1 40%; font-size: .9rem; }
    .product-nav .product-nav__price { margin-left: 0; }
    .product-detail { --product-nav-height: 6.5rem; }
    .product-benefits { padding-top: 2rem; }
    .product-benefit { flex-basis: 100%; padding: 1.6rem 1.5rem 2rem; }
    .product-benefit h3 { min-height: 0; font-size: 1.75rem; }
    .product-benefit__image { height: 8rem; margin: 1rem 0; }
    .product-benefit__image img { max-height: 8rem; }
    .product-benefit__text { min-height: 0; margin: 1rem 0 1.5rem; }
    .product-benefit .product-checks { gap: 1rem; font-size: 1.1rem; }
    .product-questions summary { font-size: 1rem; }
}