/* ═══════════════════════════════════════════════════════════════
   Homepage: "Unsere Geschichte" (.pp-story) + "Material & Verarbeitung" (.pp-material)
   Loaded on the front page only (inc/story-section.php). Every selector is scoped to these two components, so no
   other homepage section, page or global style is affected; main.css is not touched.
   ═══════════════════════════════════════════════════════════════ */

.pp-story, .pp-material {
    --st-gold:      #2676A3;
    --st-gold-dark: #1E6085;               /* gold text: ≥ 4.5:1 on both backgrounds */
    --st-ink:       #1A1A1A;
    --st-text:      #3A3A3A;
    --st-mute:      #5C5C5C;
    --st-line:      #D5E8F3;
    --st-serif:     'Playfair Display', Georgia, serif;
    --st-sans:      var(--font-body, 'Barlow', system-ui, sans-serif);
    font-family: var(--st-sans);
    color: var(--st-ink);
}
.pp-story a, .pp-material a { text-decoration: none; }
.pp-story :focus-visible, .pp-material :focus-visible { outline: 2px solid var(--st-gold); outline-offset: 3px; }

.pp-story__wrap { box-sizing: border-box; max-width: 1400px; margin: 0 auto; padding-inline: var(--gap, 1.5rem); }

/* ── Upper section: photographs left, story right ───────────────── */
.pp-story { background: #F2F8FC; padding-block: clamp(48px, 5.2vw, 80px); }
.pp-story__grid {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: clamp(48px, 4.4vw, 64px); align-items: center;
}

.pp-story__media { min-width: 0; }
.pp-story__figure { display: flex; flex-direction: column; gap: 18px; margin: 0; }
.pp-story__photo {
    display: block; width: 100%; height: auto; aspect-ratio: 3 / 2;
    object-fit: cover; object-position: center;                 /* the photographs keep their proportions, never stretched */
    border-radius: 6px; background: #F2F8FC;
}
.pp-story__photo--empty { display: grid; place-items: center; color: #8CC8E8; }
.pp-story__caption { margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: var(--st-mute); }
.pp-story__hint { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--st-mute); }   /* editors only */
.pp-story__hint a { color: var(--st-gold-dark); text-decoration: underline; text-underline-offset: 3px; }

.pp-story__text { min-width: 0; }
.pp-story__eyebrow { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--st-gold-dark); }
.pp-story__title {
    margin: 18px 0 0; font-family: var(--st-serif); font-weight: 400;
    font-size: clamp(1.875rem, 3.3vw, 3.25rem);                 /* 30px phone → 52px desktop */
    line-height: 1.14; letter-spacing: -.005em; color: var(--st-ink); overflow-wrap: break-word;
}
.pp-story__title em { font-style: italic; font-weight: 400; }
.pp-story__intro {
    margin: 20px 0 0; max-width: 40em;
    font-size: clamp(1.0625rem, 1.2vw, 1.1875rem);              /* 17 → 19px */
    line-height: 1.6; color: var(--st-text); text-wrap: pretty;
}

/* feature rows: circle-framed gold outline icons */
.pp-story__features { list-style: none; margin: 30px 0 0; padding: 0; }
.pp-story__features li { display: flex; align-items: center; gap: 18px; min-width: 0; }
.pp-story__features li + li { margin-top: 16px; }
.pp-story__features li > span:not(.pp-story__ico) { font-size: clamp(1.0625rem, 1.2vw, 1.1875rem); line-height: 1.4; color: var(--st-ink); }
.pp-story__ico {
    flex: none; display: grid; place-items: center; width: 44px; height: 44px;
    border: 1px solid var(--st-gold); border-radius: 50%; color: var(--st-gold);
}

.pp-story__cta { margin: 32px 0 0; }
.pp-story__btn {
    display: inline-flex; align-items: center; gap: 12px; padding: 15px 30px;
    background: var(--st-gold); color: #fff; border-radius: 4px;
    font: 600 14px/1.2 var(--st-sans); letter-spacing: .1em; text-transform: uppercase; transition: background .2s;
}
.pp-story__btn:hover { background: var(--color-accent-dark, #1E6085); color: #fff; }

/* ── Lower section: material & workmanship, editorial ───────────── */
.pp-material { background: #fff; padding-block: clamp(44px, 4.6vw, 72px); }
.pp-material__head { max-width: 46em; }
.pp-material__title { margin: 16px 0 0; font-family: var(--st-serif); font-weight: 400; font-size: clamp(1.75rem, 2.7vw, 2.375rem); line-height: 1.2; color: var(--st-ink); }
.pp-material__intro { margin: 16px 0 0; font-size: clamp(1rem, 1.1vw, 1.0625rem); line-height: 1.6; color: var(--st-text); text-wrap: pretty; }

.pp-material__grid {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(24px, 2.6vw, 40px); margin-top: clamp(28px, 3vw, 40px);
}
.pp-material__block { min-width: 0; padding-block: clamp(22px, 2.2vw, 28px); border-top: 1px solid var(--st-line); }
.pp-material__num { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .14em; color: var(--st-gold-dark); font-variant-numeric: tabular-nums; }
.pp-material__h { margin: 10px 0 0; font-family: var(--st-serif); font-weight: 400; font-size: clamp(1.25rem, 1.65vw, 1.5rem); line-height: 1.25; color: var(--st-ink); }
.pp-material__block p:not(.pp-material__num) { margin: 10px 0 0; font-size: clamp(1rem, 1.05vw, 1.0625rem); line-height: 1.65; color: var(--st-mute); text-wrap: pretty; }

.pp-material__more { margin: clamp(26px, 2.6vw, 34px) 0 0; }
.pp-material__more a { font-size: 1.0625rem; color: var(--st-gold-dark); text-decoration: underline; text-underline-offset: 5px; }
.pp-material__more a:hover { color: #1E6085; }

.pp-material__layout { display: grid; align-items: start; }
.pp-material__text { min-width: 0; }
.pp-material__media { width: 100%; }
.pp-material__img { display: block; flex: none; width: 100%; height: auto; border: 1px solid var(--st-line); border-radius: 10px; }

/* From 768 px text and images share ONE grid (display: contents takes the wrappers out of it, the markup stays as it is), so each
   image stays level with the divider above its text row however the text wraps. The images keep their own proportions
   (width / height attributes) and are never cropped or stretched.
   768–1099 px: two features side by side, their image at the full width below them – beside them the text would be too narrow. */
@media (min-width: 768px) {
    .pp-material__layout { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 40px); }
    .pp-material__text, .pp-material__grid, .pp-material__media { display: contents; }
    .pp-material__head { grid-column: 1 / -1; grid-row: 1; margin-bottom: clamp(28px, 3vw, 40px); }
    .pp-material__block:nth-child(odd) { grid-column: 1; }
    .pp-material__block:nth-child(even) { grid-column: 2; }
    .pp-material__block:nth-child(-n+2) { grid-row: 2; }
    .pp-material__block:nth-child(n+3) { grid-row: 4; }
    .pp-material__img { grid-column: 1 / -1; margin-bottom: clamp(22px, 2.2vw, 28px); }
    .pp-material__img:nth-child(1) { grid-row: 3; }
    .pp-material__img:nth-child(2) { grid-row: 5; }
    .pp-material__more { grid-column: 1 / -1; grid-row: 6; margin-top: 0; }
}
/* From 1100 px: two feature columns left, the image of that row right (about 55 % of the free width); this section only gets a
   stage a bit wider than the site container. */
@media (min-width: 1100px) {
    .pp-material > .pp-material__layout {
        width: min(1400px, 100% - 2 * var(--gap));
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2.4fr);
        column-gap: clamp(24px, 2.6vw, 36px);
    }
    .pp-material__block:nth-child(n+3) { grid-row: 3; }
    .pp-material__img { grid-column: 3; }
    .pp-material__img:nth-child(1) { grid-row: 2; }
    .pp-material__img:nth-child(2) { grid-row: 3; }
    .pp-material__more { grid-row: 4; margin-top: clamp(4px, .8vw, 10px); }
}

/* ── Tablet / phone ─────────────────────────────────────────────
   Mobile order: heading + introduction · photographs · features + button.
   `display: contents` re-orders the existing elements – nothing is duplicated. */
@media (max-width: 899px) {
    .pp-story__grid { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
    .pp-story__text { display: contents; }
    .pp-story__eyebrow  { order: 1; }
    .pp-story__title    { order: 2; }
    .pp-story__intro    { order: 3; max-width: none; }
    .pp-story__media    { order: 4; margin-top: 28px; }
    .pp-story__features { order: 5; margin-top: 30px; }
    .pp-story__cta      { order: 6; }
}
@media (max-width: 767px) {
    .pp-material__grid { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
    .pp-material__head { max-width: none; }
    /* text first, then the two images side by side (phones: below each other, see 599 px) */
    .pp-material__layout { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
    .pp-material__media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 599px) {
    .pp-material__media { grid-template-columns: minmax(0, 1fr); max-width: 420px; }
}
@media (max-width: 640px) {
    .pp-story__figure { gap: 16px; }
    .pp-story__features li { gap: 14px; }
    .pp-story__ico { width: 42px; height: 42px; }
    .pp-story__btn { padding: 15px 24px; }
}
@media (prefers-reduced-motion: reduce) { .pp-story *, .pp-material * { transition: none !important; } }