/* BGW-ABOUT 1.3.7 – Origo / Biografie / Daten.
   Nur innerhalb von <main>: keine Aenderungen an Header, Footer oder globalen Layoutregeln. */
.about-main {
    padding-inline: clamp(22px, 6vw, 96px);
}
.about-main__inner {
    max-width: 1140px;
    margin: 0 auto;
    padding-top: clamp(86px, 8.2vw, 128px);
}
.about-section-title {
    margin: 0;
    font-family: var(--bgw-sans);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #222;
}
.about-section-title--origo {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .27em;
}
.about-epigraph {
    max-width: 745px;
    margin: clamp(26px, 3.2vw, 44px) auto 0;
    padding: 0;
    border: 0;
    text-align: center;
}
.about-epigraph p {
    margin: 0;
    font: italic 400 clamp(1.26rem, 1.62vw, 1.46rem)/1.55 var(--bgw-serif);
    color: #555;
    letter-spacing: .012em;
}
.about-epigraph footer {
    margin-top: 16px;
    color: #777;
    font: 400 .78rem/1.6 var(--bgw-sans);
    letter-spacing: .025em;
}
.about-epigraph cite { font-style: normal; }
.about-origo__text {
    width: min(100%, 760px);
    margin: clamp(62px, 7vw, 108px) auto 0;
    color: #333;
    font: 400 clamp(1.2rem, 1.47vw, 1.38rem)/1.69 var(--bgw-serif);
    text-align: left;
    hyphens: auto;
    overflow-wrap: break-word;
}
.about-origo__text p { margin: 0 0 1.12em; }
.about-origo__text p:last-child { margin-bottom: 0; }
.about-person {
    display: grid;
    grid-template-columns: minmax(0, 315px) minmax(0, 1fr);
    align-items: start;
    gap: clamp(36px, 5.7vw, 82px);
    max-width: 1090px;
    margin: clamp(126px, 13vw, 205px) auto 0;
}
.about-person__portrait { margin: 0; }
.about-person__portrait img {
    display: block;
    width: 100%;
    height: auto;
}
.about-person__portrait figcaption {
    margin-top: 12px;
    font: 400 .69rem/1.5 var(--bgw-sans);
    letter-spacing: .035em;
    color: #8a8a8a;
}
.about-section-title--small {
    font-size: .98rem;
    letter-spacing: .07em;
}
.about-biography__text {
    margin-top: 16px;
    font: 400 clamp(1.18rem, 1.42vw, 1.32rem)/1.72 var(--bgw-serif);
    color: #333;
    hyphens: auto;
}
.about-biography__text p { margin: 0 0 .66em; }
.about-biography__text p:last-child { margin-bottom: 0; }
.about-data {
    margin-top: clamp(40px, 4.5vw, 65px);
    color: #666;
}
.about-data__list {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 0;
    list-style: none;
    margin: 15px 0 0;
    padding: 0;
    font: 400 .90rem/1.8 var(--bgw-sans);
    letter-spacing: .012em;
}
.about-data__list li { display: inline; }
.about-data__list li:not(:last-child)::after {
    content: '·';
    margin: 0 .54em;
    color: #aaa;
}
.about-data__note {
    margin: 20px 0 0;
    font: 400 clamp(1.12rem, 1.25vw, 1.22rem)/1.6 var(--bgw-serif);
    color: #777;
}
.about-data__references { margin-top: 50px; }
.about-data__list--references { margin-top: 0; }
@media (max-width: 800px) {
    .about-main { padding-inline: clamp(24px, 6vw, 52px); }
    .about-main__inner { padding-top: 82px; }
    .about-person { grid-template-columns: minmax(0, 245px) minmax(0, 1fr); gap: 35px; }
}
@media (max-width: 650px) {
    .about-main { padding-inline: 7%; }
    .about-main__inner { padding-top: 64px; }
    .about-epigraph { margin-top: 25px; }
    .about-origo__text { margin-top: 55px; font-size: 1.19rem; line-height: 1.71; }
    .about-person { display: block; margin-top: 105px; }
    .about-person__portrait { width: min(100%, 310px); margin: 0 auto 52px; }
    .about-biography__text { font-size: 1.2rem; }
    .about-data { margin-top: 48px; }
    .about-data__list { font-size: .89rem; }
}

/* BGW-ABOUT 1.3.7b: Dokumentlinks und externe Verweise.
   Ausschliesslich im Datenbereich der About-Seite; alle globalen Komponenten bleiben unberuehrt. */
.about-data__link {
    color: #444;
    text-decoration: none;
    transition: color .4s ease;
}
.about-data__link:hover,
.about-data__link:focus-visible { color: var(--bgw-accent); }
.about-data__link:focus-visible {
    outline: 1px solid var(--bgw-accent);
    outline-offset: 4px;
}
.about-data__list--references {
    display: block;
    margin-top: 12px;
    font-size: 1rem;
}
.about-data__list--references li {
    display: block;
    margin: .27em 0;
}
.about-data__list--references li:not(:last-child)::after { content: none; }
.about-data__link--external {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    font-family: var(--bgw-serif);
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.7;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #333;
}
.about-data__link--external::before {
    content: '';
    display: block;
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    background-color: currentColor;
    -webkit-mask: url('../svg/about-arrow-right.svg') center / contain no-repeat;
    mask: url('../svg/about-arrow-right.svg') center / contain no-repeat;
    opacity: .68;
    transition: transform .4s ease, opacity .4s ease;
}
.about-data__link--external:hover::before,
.about-data__link--external:focus-visible::before {
    transform: translateX(4px);
    opacity: 1;
}
@media (max-width: 650px) {
    .about-data__link--external { font-size: 1rem; letter-spacing: .105em; gap: 11px; }
}
@media (prefers-reduced-motion: reduce) {
    .about-data__link, .about-data__link--external::before { transition: none; }
    .about-data__link--external:hover::before,
    .about-data__link--external:focus-visible::before { transform: none; }
}

/* BGW-ABOUT 1.3.7d: Bildnachweis nur bei Hover ueber dem Portraet.
   Touchgeraete behalten den sichtbaren Nachweis unter dem Bild. */
@media (hover: hover) and (pointer: fine) {
    .about-person__portrait {
        position: relative;
        overflow: hidden;
    }
    .about-person__portrait figcaption {
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        box-sizing: border-box;
        margin: 0;
        padding: 14px 10px 15px;
        background: rgba(255, 255, 255, 0.93);
        text-align: center;
        opacity: 0;
        transform: translateY(100%);
        pointer-events: none;
        transition: opacity .45s ease, transform .45s ease;
    }
    .about-person__portrait:hover figcaption,
    .about-person__portrait:focus-within figcaption {
        opacity: 1;
        transform: translateY(0);
    }
}
@media (prefers-reduced-motion: reduce) {
    .about-person__portrait figcaption {
        transition: none;
    }
}

/* BGW-ABOUT 1.3.8ac: Epigraph behutsam groesser und breiter. */

/* About bleibt Origo; die Biografie ist unter ihrer historischen URL eigenständig. */
.about-origo__biography-nav {
    margin: clamp(46px, 5.5vw, 74px) 0 0;
    text-align: center;
}
.about-origo__biography-nav a {
    display: inline-block;
    color: #555;
    font: 400 1.08rem/1.8 var(--bgw-serif);
    text-decoration: none;
    border-bottom: 1px solid #b6b6b6;
    transition: color .35s ease, border-color .35s ease;
}
.about-origo__biography-nav a:hover,
.about-origo__biography-nav a:focus-visible {
    color: var(--bgw-accent);
    border-color: currentColor;
}
.about-origo__biography-nav a:focus-visible {
    outline: 1px solid var(--bgw-accent);
    outline-offset: 5px;
}
/* Die Biografie nutzt exakt die Origo-Titeltypografie, mittig über dem Zweispalter. */
.biography-main__title {
    margin: 0;
}
.about-person--standalone {
    margin-top: clamp(52px, 6vw, 82px);
}
.biography-main .about-biography__text {
    margin-top: 0;
}
@media (max-width: 650px) {
    .about-person--standalone {
        margin-top: 48px;
    }
}