/* Gemeinsame Bausteine für Unterseiten: Hero, Abschnitte mit Screenshot, Listen, Schritte, Weiterlesen */

.pg-page { background: var(--white); }
.pg-page main a:not(.button):focus-visible { outline: 3px solid var(--forest); outline-offset: 3px; }

.pg-link { color: var(--forest); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.pg-link:hover { text-decoration-thickness: 2px; }

.pg-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); align-items: end; gap: 48px; margin-bottom: 52px; }
.pg-head h2 { max-width: 16ch; }
.pg-head p { max-width: 460px; margin: 0 0 6px; color: var(--muted); font-size: 1.06rem; line-height: 1.65; }

.pg-shot { display: block; width: 100%; padding: 0; overflow: hidden; border: 1px solid rgba(19, 38, 29, 0.14); border-radius: 12px; background: var(--white); cursor: zoom-in; }
.pg-shot img { width: 100%; height: auto; }

/* Hero */
.pg-hero { padding: 28px 0 0; color: #d3e3d8; background: linear-gradient(to bottom, var(--forest-dark) calc(100% - 120px), var(--white) calc(100% - 120px)); }
.pg-hero .breadcrumbs { margin-bottom: 60px; color: #a9c4b2; }
.pg-hero .breadcrumbs a { color: #d3e3d8; }
.pg-hero-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: 64px; }
.pg-hero-copy { padding-bottom: 150px; }
.pg-kicker { margin: 0 0 18px; color: var(--lime); font-size: 0.92rem; font-weight: 700; }
.pg-hero h1 { max-width: 15ch; color: var(--white); font-size: clamp(2.5rem, 4.2vw, 3.9rem); font-weight: 700; line-height: 1.04; letter-spacing: -0.022em; }
.pg-hero-copy > p:not(.pg-kicker) { max-width: 520px; margin: 24px 0 0; font-size: 1.1rem; line-height: 1.65; }
.pg-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.pg-facts { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 24px 0 0; padding: 0; list-style: none; color: #a9c4b2; font-size: 0.9rem; font-weight: 600; }
.pg-facts li { display: flex; align-items: center; gap: 8px; }
.pg-facts li::before { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); content: ""; }
.pg-hero .button:focus-visible,
.pg-hero a:focus-visible { outline-color: var(--lime); }

.pg-hero-visual { position: relative; align-self: end; padding-bottom: 40px; }
.pg-hero-visual figure { margin: 0; }
.pg-hero-visual .pg-shot { box-shadow: 0 34px 70px -24px rgba(5, 25, 15, 0.55); }
.pg-hero-visual figcaption { position: absolute; top: -13px; z-index: 2; padding: 4px 11px; border-radius: 6px; color: var(--ink); background: var(--white); font-size: 0.78rem; font-weight: 750; box-shadow: 0 6px 16px rgba(5, 25, 15, 0.18); }
.pg-hero-main { position: relative; }
.pg-hero-main figcaption { right: 18px; }
.pg-hero-second { position: absolute; bottom: 0; left: -48px; z-index: 2; width: 52%; }
.pg-hero-second figcaption { left: 14px; background: var(--lime); }

/* Kommt Ihnen das bekannt vor? */
.pg-pains { padding: 110px 0; }
.pg-pains-grid { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: 80px; }
.pg-pains-intro { position: sticky; top: 130px; align-self: start; }
.pg-pains-intro p { max-width: 340px; margin: 20px 0 0; color: var(--muted); font-size: 1.06rem; line-height: 1.6; }
.pg-pain-list { margin: 0; padding: 0; list-style: none; }
.pg-pain-list li { display: grid; gap: 10px; padding: 28px 0; border-top: 1px solid var(--line); }
.pg-pain-list li:first-child { padding-top: 0; border-top: 0; }
.pg-pain-list q { color: var(--muted); font-size: 1.12rem; font-style: italic; line-height: 1.5; quotes: "„" "“"; }
.pg-pain-list p { margin: 0; color: var(--ink); font-size: 1.08rem; line-height: 1.65; }
.pg-pain-list strong { color: var(--forest); }

/* Abläufe mit Screenshots */
.pg-stories { padding: 110px 0; background: var(--paper); }
.pg-story { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; gap: 72px; }
.pg-story + .pg-story { margin-top: 100px; }
.pg-story:nth-of-type(even) .pg-story-copy { order: 2; }
.pg-story-copy h3 { margin: 0; font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1.12; letter-spacing: -0.02em; }
.pg-story-copy > p { margin: 18px 0 0; color: #48584f; font-size: 1.05rem; line-height: 1.7; }
.pg-story-copy ul { display: grid; gap: 8px; margin: 22px 0 24px; padding: 0; list-style: none; }
.pg-story-copy li { position: relative; padding-left: 22px; color: #2f4137; line-height: 1.5; }
.pg-story-copy li::before { position: absolute; top: 0.65em; left: 0; width: 10px; height: 2px; background: #7fc44a; content: ""; }
.pg-story figure { margin: 0; }
.pg-story .pg-shot { box-shadow: 0 30px 60px -28px rgba(19, 50, 34, 0.3); }

/* Dunkler Nachweis (Referenz, Pakete) */
.pg-proof { padding: 110px 0; color: #e8f1eb; background: var(--forest-dark); }
.pg-proof h2 { color: var(--white); }
.pg-proof-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); align-items: center; gap: 80px; }
.pg-proof-case > p { max-width: 480px; margin: 20px 0 22px; color: #c6d8cc; font-size: 1.04rem; line-height: 1.7; }
.pg-proof-case strong { color: var(--white); }
.pg-proof .pg-link { color: var(--lime); }
.pg-proof-logo { width: 120px; height: auto; margin-bottom: 30px; padding: 10px 14px; border-radius: 8px; background: var(--white); }
.pg-quote { margin: 0; padding-left: 44px; border-left: 2px solid var(--lime); }
.pg-quote p { margin: 0; color: var(--white); font-size: clamp(1.6rem, 2.6vw, 2.3rem); font-weight: 600; line-height: 1.28; letter-spacing: -0.02em; }
.pg-quote footer { display: flex; align-items: center; gap: 16px; margin-top: 30px; color: #c6d8cc; font-size: 0.95rem; }
.pg-quote img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.pg-quote footer strong { display: block; color: var(--white); }

.pg-packages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 48px; }
.pg-package { display: grid; align-content: start; gap: 10px; padding: 28px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 16px; }
.pg-package-featured { border-color: var(--lime); background: rgba(185, 239, 114, 0.08); }
.pg-package h3 { margin: 0; color: var(--white); font-size: 1.5rem; letter-spacing: -0.02em; }
.pg-package strong { color: var(--lime); font-size: 1.15rem; }
.pg-package p { margin: 0; color: #c6d8cc; line-height: 1.6; }
.pg-proof-note { margin: 28px 0 0; color: #a9c4b2; }

/* Schritte */
.pg-steps-section { padding: 110px 0; }
.pg-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 32px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.pg-steps li { display: grid; align-content: start; gap: 8px; padding-top: 22px; border-top: 2px solid var(--ink); counter-increment: step; }
.pg-steps li::before { color: var(--forest); content: "Schritt " counter(step); font-size: 0.82rem; font-weight: 750; }
.pg-steps strong { font-size: 1.2rem; }
.pg-steps span { color: #48584f; line-height: 1.6; }

/* Weiterführende Links */
.pg-related { padding: 0 0 110px; }
.pg-related-grid { display: grid; grid-template-columns: minmax(0, 0.7fr) repeat(3, minmax(0, 1fr)); gap: 16px; padding-top: 40px; border-top: 1px solid var(--line); }
.pg-related-grid > p { margin: 0; align-self: center; font-size: 1.2rem; font-weight: 720; }
.pg-related-grid a { display: grid; align-content: start; gap: 4px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); text-decoration: none; transition: background 140ms ease, border-color 140ms ease; }
.pg-related-grid a:hover { border-color: rgba(31, 90, 61, 0.35); background: #f1f7f2; }
.pg-related-grid span { color: var(--muted); font-size: 0.9rem; }

@media (max-width: 1050px) {
    .pg-hero-grid,
    .pg-pains-grid,
    .pg-story,
    .pg-proof-grid { grid-template-columns: 1fr; gap: 44px; }
    .pg-hero-copy { padding-bottom: 0; }
    .pg-hero-visual { margin-top: 10px; padding-bottom: 60px; }
    .pg-hero-second { left: -8px; }
    .pg-pains-intro { position: static; }
    .pg-story:nth-of-type(even) .pg-story-copy { order: 0; }
    .pg-story-copy { max-width: 640px; }
    .pg-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pg-packages { grid-template-columns: 1fr; }
    .pg-related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pg-related-grid > p { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
    .pg-hero .breadcrumbs { margin-bottom: 40px; }
    .pg-hero { background: linear-gradient(to bottom, var(--forest-dark) calc(100% - 70px), var(--white) calc(100% - 70px)); }
    .pg-hero-visual { padding-bottom: 40px; }
    .pg-hero-second { width: 62%; }
    .pg-hero-visual figcaption { font-size: 0.7rem; }
    .pg-head { grid-template-columns: 1fr; gap: 16px; margin-bottom: 32px; }
    .pg-pains,
    .pg-stories,
    .pg-proof,
    .pg-steps-section { padding: 72px 0; }
    .pg-story + .pg-story { margin-top: 64px; }
    .pg-quote { padding-left: 22px; }
    .pg-steps { grid-template-columns: 1fr; }
    .pg-related { padding-bottom: 72px; }
    .pg-related-grid { grid-template-columns: 1fr; }
}

.pg-proof .pg-head p { color: #c6d8cc; }

/* Übersichtsseite: Hero mit Inhaltsverzeichnis und gruppierte Funktionsliste */
.pg-hero-index { padding-bottom: 96px; background: var(--forest-dark); }
.pg-index-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); align-items: end; gap: 64px; }
.pg-index-copy > p:not(.pg-kicker) { max-width: 500px; margin: 24px 0 0; font-size: 1.1rem; line-height: 1.65; }
.pg-index-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pg-index-nav a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 12px; color: var(--white); text-decoration: none; transition: background 140ms ease, border-color 140ms ease; }
.pg-index-nav a:hover { border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.06); }
.pg-index-nav a.is-highlight { grid-column: 1 / -1; border-color: var(--lime); color: var(--ink); background: var(--lime); }
.pg-index-nav strong { font-size: 0.98rem; font-weight: 680; }
.pg-index-nav span { min-width: 30px; padding: 2px 8px; border-radius: 999px; color: #a9c4b2; background: rgba(255, 255, 255, 0.08); font-size: 0.78rem; font-weight: 700; text-align: center; }
.pg-index-nav a.is-highlight span { color: var(--ink); background: rgba(19, 38, 29, 0.1); }

.pg-directory-group { padding: 84px 0; border-top: 1px solid var(--line); }
.pg-directory-group:first-child { border-top: 0; }
.pg-directory-group.is-highlight { background: #eef7e3; }
.pg-directory-grid { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 64px; }
.pg-directory-head { position: sticky; top: 120px; align-self: start; }
.pg-directory-head h2 { font-size: clamp(2rem, 3.2vw, 2.9rem); }
.pg-directory-head p { max-width: 340px; margin: 16px 0 0; color: var(--muted); font-size: 1.04rem; line-height: 1.6; }
.pg-directory-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin: 0; padding: 0; list-style: none; }
.pg-directory-items li { border-top: 1px solid var(--line); }
.pg-directory-items a { display: grid; gap: 3px; padding: 16px 0; color: var(--ink); text-decoration: none; }
.pg-directory-items strong { font-size: 1rem; font-weight: 680; }
.pg-directory-items span { color: var(--muted); font-size: 0.9rem; line-height: 1.45; }
.pg-directory-items a:hover strong { color: var(--forest); text-decoration: underline; text-underline-offset: 4px; }
.pg-directory-group.is-highlight .pg-directory-items li { border-color: rgba(19, 38, 29, 0.14); }

.pg-directory-more { padding: 40px 0 90px; border-top: 1px solid var(--line); }
.pg-directory-more summary { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border: 1px solid var(--line); border-radius: 999px; font-weight: 680; list-style: none; cursor: pointer; }
.pg-directory-more summary::-webkit-details-marker { display: none; }
.pg-directory-more summary span { padding: 1px 8px; border-radius: 999px; color: var(--muted); background: var(--paper); font-size: 0.78rem; }
.pg-directory-more summary:hover { border-color: var(--forest); }
.pg-directory-items-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 28px; }

@media (max-width: 1050px) {
    .pg-index-grid,
    .pg-directory-grid { grid-template-columns: 1fr; gap: 36px; }
    .pg-directory-head { position: static; }
    .pg-directory-items-compact { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .pg-hero-index { padding-bottom: 64px; }
    .pg-index-nav { grid-template-columns: 1fr; }
    .pg-directory-group { padding: 60px 0; }
    .pg-directory-items,
    .pg-directory-items-compact { grid-template-columns: 1fr; }
}

/* Ebenen: kurze Begriffe mit Erklärung nebeneinander */
.pg-levels-section { padding: 100px 0; }
.pg-levels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin: 0; }
.pg-levels > div { padding-top: 20px; border-top: 2px solid var(--ink); }
.pg-levels dt { font-size: 1.2rem; font-weight: 720; }
.pg-levels dd { margin: 8px 0 0; color: #48584f; line-height: 1.55; }

@media (max-width: 1050px) {
    .pg-levels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .pg-levels-section { padding: 68px 0; }
    .pg-levels { grid-template-columns: 1fr; gap: 24px; }
}

.pg-hero + .pg-stories { background: var(--white); }
.pg-shot-portrait { max-width: 300px; margin-inline: auto; border-radius: 22px; }

/* Karten: verlinkte Kacheln, etwa für Integrationen oder Entwicklerthemen */
.pg-cards-section { padding: 100px 0; }
.pg-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.pg-cards a { display: grid; align-content: start; gap: 8px; padding: 24px; border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: var(--white); text-decoration: none; transition: border-color 140ms ease, background 140ms ease; }
.pg-cards a:hover { border-color: rgba(31, 90, 61, 0.35); background: #f1f7f2; }
.pg-cards span { justify-self: start; padding: 2px 9px; border-radius: 6px; color: var(--forest); background: var(--mint); font-size: 0.75rem; font-weight: 700; }
.pg-cards strong { font-size: 1.2rem; font-weight: 720; }
.pg-cards p { margin: 0; color: #48584f; line-height: 1.55; }

@media (max-width: 1050px) { .pg-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .pg-cards-section { padding: 68px 0; } .pg-cards { grid-template-columns: 1fr; } }

/* Preisseite: Pakete, Projektleistungen, Betriebsmodelle */
.pg-price-steps a { padding: 18px 18px; }
.pg-index-nav.pg-price-steps { grid-template-columns: 1fr; }
.pg-price-steps strong { display: flex; align-items: center; gap: 12px; }
.pg-price-steps em { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; color: var(--ink); background: var(--lime); font-size: 0.82rem; font-style: normal; font-weight: 800; }
.pg-price-steps span { min-width: 0; padding: 2px 10px; white-space: nowrap; }

.pg-price-section { padding: 100px 0; }
.pg-price-section-tint { background: var(--paper); }
.pg-price-tag { justify-self: start; padding: 3px 10px; border-radius: 6px; color: var(--forest); background: var(--mint); font-size: 0.76rem; font-weight: 700; }
.pg-price-summary { margin: 0; color: #48584f; line-height: 1.6; }
.pg-price-small { max-width: 820px; margin: 28px 0 0; color: var(--muted); font-size: 0.9rem; line-height: 1.6; }

.pg-price-packages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.pg-price-package,
.pg-price-plan { display: grid; align-content: start; gap: 12px; padding: 30px 28px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); }
.pg-price-package.is-featured,
.pg-price-plan.is-featured { border: 2px solid var(--forest); box-shadow: 0 30px 60px -36px rgba(19, 50, 34, 0.45); }
.pg-price-package.is-featured .pg-price-tag,
.pg-price-plan.is-featured .pg-price-tag { color: var(--ink); background: var(--lime); }
.pg-price-package h3,
.pg-price-plan h3 { margin: 4px 0 0; font-size: 1.7rem; letter-spacing: -0.02em; }
.pg-price-amount { margin: 0; font-size: 2rem; font-weight: 760; letter-spacing: -0.02em; }
.pg-price-note { margin: -8px 0 0; color: var(--muted); font-size: 0.9rem; }
.pg-price-package ul,
.pg-price-plan ul { display: grid; gap: 8px; margin: 6px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); list-style: none; }
.pg-price-package li,
.pg-price-plan li { position: relative; padding-left: 22px; color: #2f4137; font-size: 0.95rem; line-height: 1.45; }
.pg-price-package li::before,
.pg-price-plan li::before { position: absolute; top: 0.6em; left: 0; width: 10px; height: 2px; background: #7fc44a; content: ""; }
.pg-price-footnote { margin: 4px 0 0; color: var(--muted); font-size: 0.88rem; line-height: 1.5; }
.pg-price-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 10px; }

.pg-price-services { margin: 0; border-top: 1px solid var(--ink); }
.pg-price-services > div { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.4fr) auto; align-items: baseline; gap: 32px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.pg-price-services dt { font-size: 1.15rem; font-weight: 720; }
.pg-price-services dd { margin: 0; }
.pg-price-service-text { color: #48584f; line-height: 1.55; }
.pg-price-service-price { font-size: 1.1rem; font-weight: 760; white-space: nowrap; }

.pg-price-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
.pg-price-plan { padding: 26px 22px; }
.pg-price-plan h3 { font-size: 1.45rem; }
.pg-price-plan-prices { display: grid; gap: 6px; margin: 0; }
.pg-price-plan-prices > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pg-price-plan-prices dt { color: var(--muted); font-size: 0.88rem; }
.pg-price-plan-prices dd { margin: 0; font-size: 1.3rem; font-weight: 760; }
.pg-price-plan-prices small { color: var(--muted); font-size: 0.78rem; font-weight: 500; }
.pg-price-plan-custom { margin: 0; font-size: 1.3rem; font-weight: 760; }
.pg-price-plan li { font-size: 0.9rem; }
.pg-price-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 40px; margin: 36px 0 0; padding: 0; list-style: none; color: var(--muted); font-size: 0.88rem; line-height: 1.55; }

@media (max-width: 1180px) {
    .pg-price-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1050px) {
    .pg-price-packages { grid-template-columns: 1fr; max-width: 620px; }
    .pg-price-services > div { grid-template-columns: 1fr auto; }
    .pg-price-service-text { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 760px) {
    .pg-price-section { padding: 68px 0; }
    .pg-price-plans,
    .pg-price-notes { grid-template-columns: 1fr; }
}

/* Kompakter Hero ohne Bild, etwa für Kontakt oder Demo */
.pg-hero-compact { padding-bottom: 80px; }
.pg-hero-compact h1 { max-width: 18ch; }

/* Kontaktseite: Seitenspalte neben dem Formular */
.pg-contact-intro h2 { font-size: clamp(1.9rem, 3vw, 2.6rem); }
.pg-contact-intro > p { margin: 16px 0 0; color: #48584f; line-height: 1.65; }
.pg-contact-promises { display: grid; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.pg-contact-promises li { position: relative; padding-left: 22px; font-weight: 650; }
.pg-contact-promises li::before { position: absolute; top: 0.62em; left: 0; width: 10px; height: 2px; background: #7fc44a; content: ""; }
.pg-contact-people { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 30px; }
.pg-contact-people figure { margin: 0; }
.pg-contact-people img { width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 12px; object-fit: cover; }
.pg-contact-people figcaption { margin-top: 8px; color: var(--muted); font-size: 0.82rem; line-height: 1.4; }
.pg-contact-people figcaption strong { display: block; color: var(--ink); font-size: 0.92rem; }
.pg-contact-direct { display: grid; gap: 4px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.pg-contact-direct span { color: var(--muted); font-size: 0.88rem; }
.pg-contact-direct a { color: var(--ink); font-size: 1.1rem; font-weight: 720; text-decoration: none; }
.pg-contact-direct a:hover { color: var(--forest); text-decoration: underline; text-underline-offset: 4px; }
.pg-contact-intro .pg-contact-promises { border: 0; }
.pg-contact-intro .pg-contact-promises li { display: block; min-height: 0; margin: 0; padding: 0 0 0 22px; border: 0; color: var(--ink); font-size: 1rem; }

/* Demo-Seite: Shop-Karten mit Vorschaubild und Zugangsdaten */
.pg-demo-shops { padding: 100px 0; }
.pg-demo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.pg-demo-card { display: grid; align-content: start; gap: 10px; padding: 16px 16px 26px; border: 1px solid var(--line); border-radius: 18px; color: var(--ink); background: var(--white); text-decoration: none; transition: border-color 140ms ease, box-shadow 140ms ease; }
.pg-demo-card:hover { border-color: rgba(31, 90, 61, 0.35); box-shadow: 0 30px 60px -36px rgba(19, 50, 34, 0.45); }
.pg-demo-card img { width: 100%; height: auto; margin-bottom: 10px; border-radius: 10px; }
.pg-demo-card > span,
.pg-demo-card strong,
.pg-demo-card p,
.pg-demo-card em { margin-inline: 10px; }
.pg-demo-card strong { font-size: 1.7rem; font-weight: 720; letter-spacing: -0.02em; }
.pg-demo-card p { margin-top: 0; margin-bottom: 0; color: #48584f; line-height: 1.55; }
.pg-demo-card em { margin-top: 6px; color: var(--forest); font-style: normal; font-weight: 700; text-decoration: underline; text-underline-offset: 5px; }
.pg-demo-login { display: flex; gap: 40px; margin: 22px 0 26px; padding: 16px 20px; border-radius: 12px; background: var(--white); }
.pg-demo-login dt { color: var(--muted); font-size: 0.82rem; }
.pg-demo-login dd { margin: 2px 0 0; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 1.05rem; font-weight: 700; }
.pg-levels dd .pg-link { display: inline-block; margin-top: 6px; }

@media (max-width: 760px) {
    .pg-demo-shops { padding: 68px 0; }
    .pg-demo-grid { grid-template-columns: 1fr; }
}

/* Über uns: Kennzahlen, Zeitstrahl, Team */
.pg-about-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.pg-about-facts > div { padding: 18px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 12px; }
.pg-about-facts dt { color: var(--lime); font-size: 1.5rem; font-weight: 740; letter-spacing: -0.02em; }
.pg-about-facts dd { margin: 4px 0 0; color: #c6d8cc; font-size: 0.9rem; line-height: 1.45; }

.pg-about-history,
.pg-about-team { padding: 100px 0; }
.pg-timeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 0; padding: 0; list-style: none; }
.pg-timeline li { position: relative; display: grid; align-content: start; gap: 6px; padding-top: 26px; border-top: 2px solid var(--ink); }
.pg-timeline li::before { position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 3px var(--white); content: ""; }
.pg-timeline span { color: var(--forest); font-size: 0.86rem; font-weight: 750; }
.pg-timeline strong { font-size: 1.5rem; letter-spacing: -0.02em; }
.pg-timeline p { margin: 4px 0 0; color: #48584f; line-height: 1.6; }
.pg-about-name { max-width: 720px; margin: 44px 0 0; color: #48584f; line-height: 1.65; }

.pg-team { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.pg-team figure { margin: 0; }
.pg-team img { width: 100%; height: auto; aspect-ratio: 4 / 5; border-radius: 14px; object-fit: cover; }
.pg-team figcaption { display: grid; gap: 4px; margin-top: 16px; }
.pg-team figcaption span { color: var(--forest); font-size: 0.84rem; font-weight: 700; }
.pg-team figcaption strong { font-size: 1.3rem; }
.pg-team figcaption p { margin: 4px 0 0; color: #48584f; line-height: 1.6; }

@media (max-width: 1050px) {
    .pg-timeline { grid-template-columns: 1fr; }
    .pg-team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .pg-about-history,
    .pg-about-team { padding: 68px 0; }
    .pg-about-facts,
    .pg-team { grid-template-columns: 1fr; }
}
.pg-cards .pg-card-static { display: grid; align-content: start; gap: 8px; padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); }
.pg-cards code { justify-self: start; margin-top: 4px; color: var(--forest); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.8rem; }
.pg-page .devapi-section-heading h2 { letter-spacing: -0.028em; }

/* Lange deutsche Wörter in Überschriften umbrechen statt überlaufen lassen */
.pg-page h1,
.pg-page h2,
.pg-page h3 { overflow-wrap: break-word; hyphens: manual; }
.pg-head > * { min-width: 0; }

/* Häufige Fragen */
.pg-faq { padding: 100px 0; background: var(--paper); }
.pg-faq-grid { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); gap: 72px; }
.pg-faq-head { position: sticky; top: 120px; align-self: start; }
.pg-faq-head p { max-width: 340px; margin: 18px 0 0; color: var(--muted); font-size: 1.04rem; line-height: 1.6; }
.pg-faq-list { border-top: 1px solid var(--ink); }
.pg-faq-list details { border-bottom: 1px solid var(--line); }
.pg-faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; font-size: 1.08rem; font-weight: 680; list-style: none; cursor: pointer; }
.pg-faq-list summary::-webkit-details-marker { display: none; }
.pg-faq-list summary::after { flex: 0 0 auto; width: 9px; height: 9px; margin-right: 4px; border-right: 2px solid var(--forest); border-bottom: 2px solid var(--forest); content: ""; transform: rotate(45deg) translateY(-3px); transition: transform 160ms ease; }
.pg-faq-list details[open] summary::after { transform: rotate(225deg) translateY(-3px); }
.pg-faq-list summary:hover { color: var(--forest); }
.pg-faq-list p { max-width: 680px; margin: 0; padding: 0 0 22px; color: #48584f; line-height: 1.65; }

@media (max-width: 1050px) {
    .pg-faq-grid { grid-template-columns: 1fr; gap: 32px; }
    .pg-faq-head { position: static; }
}
@media (max-width: 760px) { .pg-faq { padding: 68px 0; } }

html[lang="en"] .pg-steps li::before { content: "Step " counter(step); }