.product-page--history {
    padding-block: clamp(1.5rem, 4vw, 3.5rem);
    background: #edf1f5;
}

.history-article {
    width: min(calc(100% - 3rem), 68rem);
    padding: clamp(2.5rem, 6vw, 5rem);
    border: 1px solid rgba(36, 56, 77, .12);
    border-radius: .45rem;
    background: #fff;
    box-shadow: 0 1.25rem 3.5rem rgba(35, 55, 76, .08);
}

.history-article__header, .history-article__body { max-width: 50rem; margin-inline: auto; }
.history-article__header { padding-bottom: 2.5rem; border-bottom: 1px solid var(--line); }
.history-article__kicker { margin: 0 0 .8rem; color: var(--blue-600); font-size: .86rem; font-weight: 720; }
.history-article__header h1 { max-width: 25ch; margin: 0; font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.16; letter-spacing: -.025em; text-wrap: balance; }
.history-article__lede { max-width: 43rem; margin: 1.15rem 0 0; color: var(--muted); font-size: clamp(1.02rem, 1.5vw, 1.16rem); line-height: 1.7; }
.history-article__meta { display: flex; flex-wrap: wrap; gap: .45rem; margin: 1.15rem 0 0; color: var(--muted); font-size: .76rem; }

.history-article__opening { max-width: 43rem; margin: 2.6rem 0 3.5rem; color: var(--ink); font-size: 1.08rem; line-height: 1.78; }

.history-section {
    display: flow-root;
    padding-block: 2.8rem;
    border-top: 1px solid var(--line);
}

.history-section__period { margin: 0 0 .55rem; color: var(--blue-600); font-size: .78rem; font-weight: 720; }
.history-section h2, .history-principles h2, .history-questions h2, .history-related h2 { max-width: 26ch; margin: 0 0 1.35rem; font-size: clamp(1.45rem, 2.5vw, 1.85rem); line-height: 1.28; letter-spacing: -.022em; text-wrap: balance; }
.history-section > p:not(.history-section__period) { margin: 1rem 0 0; color: #3f5265; font-size: 1rem; line-height: 1.78; }

.history-photo { width: min(38%, 17rem); margin: .25rem 0 1.35rem; }
.history-photo--right { float: right; margin-left: 2rem; }
.history-photo--left { float: left; margin-right: 2rem; }
.history-photo picture { display: block; overflow: hidden; border: 1px solid rgba(36, 56, 77, .1); border-radius: .2rem; background: #f4f6f8; }
.history-photo img { display: block; width: 100%; height: auto; max-height: 28rem; object-fit: cover; }
.history-photo--contain picture { display: grid; place-items: center; padding: 1rem; }
.history-photo--contain img { width: auto; max-width: 100%; max-height: 25rem; object-fit: contain; }
.history-photo figcaption { margin-top: .55rem; color: var(--muted); font-size: .73rem; line-height: 1.5; }
.history-photo figcaption::before { content: "Abb.: "; font-weight: 720; }
.history-photo--wide { float: none; width: 100%; margin: 2rem 0 .4rem; clear: both; }
.history-photo--wide img { max-height: none; }

.history-principles, .history-questions, .history-related { padding-block: 2.8rem; border-top: 1px solid var(--line); }
.history-principles ol { margin: 1.7rem 0 0; padding: 0; list-style: none; }
.history-principles li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: .75rem; padding-block: 1.05rem; border-top: 1px solid var(--line); }
.history-principles li > span { padding-top: .08rem; color: var(--muted); font-size: .75rem; font-weight: 720; }
.history-principles h3, .history-questions h3 { margin: 0; font-size: 1rem; letter-spacing: -.01em; }
.history-principles li p, .history-questions div p { margin: .4rem 0 0; color: var(--muted); font-size: .92rem; line-height: 1.68; }
.history-questions div { max-width: 44rem; padding-block: 1.15rem; border-top: 1px solid var(--line); }
.history-related { padding-bottom: 0; }
.history-related ul { margin: 1.5rem 0 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.history-related a { display: flex; gap: 1rem; align-items: center; justify-content: space-between; padding: 1rem 0; border-bottom: 1px solid var(--line); color: var(--ink); font-size: .95rem; font-weight: 680; text-decoration: none; }
.history-related a span:last-child { color: var(--blue-600); }
.history-related a:hover { color: var(--blue-600); text-decoration: underline; text-underline-offset: .2rem; }

@media (max-width: 44rem) {
    .product-page--history { padding-block: .75rem; }
    .history-article { width: calc(100% - 1rem); padding: 1.5rem 1.25rem 2.5rem; border-radius: .3rem; box-shadow: 0 .6rem 1.8rem rgba(35, 55, 76, .07); }
    .history-article__header { padding-bottom: 2rem; }
    .history-article__header h1 { font-size: clamp(1.85rem, 8vw, 2.1rem); line-height: 1.2; }
    .history-article__lede { font-size: 1rem; line-height: 1.65; }
    .history-article__opening { margin-block: 2rem 2.75rem; font-size: 1.02rem; line-height: 1.72; }
    .history-section, .history-principles, .history-questions, .history-related { padding-block: 2.35rem; }
    .history-photo, .history-photo--right, .history-photo--left, .history-photo--wide { float: none; width: 100%; margin: 1.5rem 0 1.8rem; }
    .history-photo img { max-height: none; }
    .history-photo--contain picture { padding: 1rem; }
    .history-photo--contain img { max-height: 28rem; }
}