/* Nur Styles der Über-mich-Unterseite. Gemeinsame Bereiche bleiben in style.css. */

.about-page { background: var(--paper); }

.about-overline {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: var(--gold-light);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.about-overline::before { content: ""; width: 30px; height: 1px; background: currentColor; }

.about-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: radial-gradient(circle at 83% 22%, rgba(224,184,111,.16), transparent 24%), linear-gradient(145deg,#0d1b1e 0%,#050d10 72%);
}

.about-hero::after {
    content: "";
    position: absolute;
    top: -38%;
    right: -7%;
    width: 48vw;
    aspect-ratio: 1;
    border: 1px solid rgba(224,184,111,.11);
    border-radius: 50%;
    box-shadow: 0 0 0 7vw rgba(224,184,111,.024), 0 0 0 14vw rgba(224,184,111,.015);
    pointer-events: none;
}

.about-hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    min-height: 650px;
    grid-template-columns: minmax(0,1.35fr) minmax(300px,.65fr);
    align-items: end;
    gap: clamp(48px,8vw,120px);
    padding-top: clamp(105px,11vw,155px);
    padding-bottom: clamp(78px,8vw,115px);
}

.about-hero-copy { min-width: 0; max-width: 840px; }
.about-hero h1 { margin: 22px 0 28px; font-size: clamp(3.7rem,7vw,7.1rem); font-weight: 700; letter-spacing: -.06em; line-height: .89; }
.about-hero h1 span { color: var(--gold-light); }
.about-hero-copy > p { max-width: 690px; margin: 0; color: rgba(255,255,255,.67); font-size: clamp(1rem,1.35vw,1.18rem); line-height: 1.75; }
.about-hero-button { margin-top: 34px; }

.about-identity { display: grid; gap: 1px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 18px; background: rgba(255,255,255,.1); box-shadow: 0 24px 70px rgba(0,0,0,.2); }
.about-identity > div { display: flex; min-width: 0; flex-direction: column; gap: 4px; padding: 24px 26px; background: rgba(7,17,19,.88); backdrop-filter: blur(12px); }
.about-identity strong { color: #fff; font-size: 1rem; font-weight: 700; }
.about-identity span { color: rgba(255,255,255,.48); font-size: .75rem; }

.about-intro { padding: clamp(84px,8vw,128px) 0; background: radial-gradient(circle at 3% 5%,rgba(185,133,63,.1),transparent 26%),var(--paper); }
.about-intro-grid { display: grid; grid-template-columns: minmax(340px,.9fr) minmax(0,1.1fr); align-items: center; gap: clamp(50px,8vw,112px); }
.about-portrait-wrap { position: relative; min-width: 0; }
.about-portrait { width: 100%; aspect-ratio: 4 / 5; border-radius: 24px; background-position: center; box-shadow: 0 28px 72px rgba(17,25,26,.17); }
.about-portrait-note { position: absolute; right: -24px; bottom: 30px; display: flex; min-width: 205px; flex-direction: column; gap: 3px; padding: 20px 23px; color: #fff; border: 1px solid rgba(255,255,255,.12); border-radius: 13px; background: rgba(7,17,19,.94); box-shadow: 0 18px 45px rgba(7,17,19,.2); }
.about-portrait-note span { color: var(--gold-light); font-size: .64rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.about-portrait-note strong { font-size: .95rem; }

.about-intro-copy { min-width: 0; }
.about-intro-copy .about-overline { color: var(--gold); }
.about-intro h2 { max-width: 700px; margin: 18px 0 28px; color: var(--ink); font-size: clamp(2.5rem,4.5vw,4.7rem); font-weight: 700; hyphens: auto; overflow-wrap: break-word; letter-spacing: -.05em; line-height: .98; }
.about-intro-copy p { max-width: 680px; margin: 0 0 16px; color: #5c6568; font-size: 1rem; line-height: 1.8; }
.about-intro-copy .about-lead { color: #202b2e; font-size: 1.12rem; font-weight: 600; line-height: 1.7; }
.about-signature { display: flex; align-items: center; gap: 12px; margin-top: 31px; color: var(--gold); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.about-path { padding: clamp(82px,8vw,120px) 0; color: #fff; background: radial-gradient(circle at 80% 0,rgba(224,184,111,.12),transparent 29%),var(--ink); }
.about-section-heading { max-width: 810px; margin-bottom: 48px; }
.about-section-heading h2 { margin: 14px 0 0; color: #fff; font-size: clamp(2.6rem,4.7vw,4.8rem); font-weight: 700; letter-spacing: -.05em; line-height: .96; }
.about-path-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.about-path-card { position: relative; min-width: 0; min-height: 375px; padding: 34px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 20px; background: linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.018)); }
.about-path-number { position: absolute; top: 24px; right: 28px; color: rgba(255,255,255,.19); font-size: .75rem; font-weight: 800; letter-spacing: .1em; }
.about-path-card > i { display: grid; width: 58px; height: 58px; margin-bottom: 48px; place-items: center; color: var(--ink); border-radius: 15px; background: var(--gold-light); font-size: 1.55rem; }
.about-path-card h3 { margin: 0 0 17px; color: #fff; font-size: 1.55rem; font-weight: 700; }
.about-path-card p { margin: 0; color: rgba(255,255,255,.6); font-size: .92rem; line-height: 1.75; }

.about-bridge { padding: clamp(88px,9vw,136px) 0; background: var(--paper-deep); }
.about-bridge-grid { display: grid; grid-template-columns: minmax(0,.9fr) minmax(420px,1.1fr); align-items: center; gap: clamp(55px,8vw,115px); }
.about-bridge-copy { min-width: 0; }
.about-bridge-copy .about-overline { color: var(--gold); }
.about-bridge h2 { margin: 18px 0 28px; color: var(--ink); font-size: clamp(2.6rem,4.8vw,4.9rem); font-weight: 700; hyphens: auto; overflow-wrap: break-word; letter-spacing: -.052em; line-height: .97; }
.about-bridge-copy p { max-width: 630px; margin: 0 0 17px; color: #5a6366; font-size: 1rem; line-height: 1.8; }
.about-places { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 17px; transform: rotate(1.5deg); }
.about-place { display: flex; min-width: 0; min-height: 390px; flex-direction: column; justify-content: flex-end; padding: 30px; overflow: hidden; border: 1px solid rgba(7,17,19,.08); border-radius: 19px; box-shadow: 0 20px 55px rgba(20,28,29,.1); }
.about-place-germany { background: linear-gradient(180deg,rgba(255,255,255,.1),rgba(7,17,19,.9)),linear-gradient(180deg,#252d30 0 33%,#8d302d 33% 66%,#b9853f 66%); }
.about-place-gambia { margin-top: 38px; background: linear-gradient(180deg,rgba(255,255,255,.08),rgba(7,17,19,.9)),linear-gradient(180deg,#a43831 0 31%,#fff 31% 35%,#314d86 35% 64%,#fff 64% 68%,#4d7340 68%); }
.about-place span { color: var(--gold-light); font-size: .65rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.about-place h3 { margin: 9px 0 13px; color: #fff; font-size: 2rem; font-weight: 700; }
.about-place p { margin: 0; color: rgba(255,255,255,.65); font-size: .85rem; line-height: 1.65; }

.about-convictions { padding: clamp(84px,8vw,122px) 0; background: var(--cream); }
.about-section-heading-light h2 { color: var(--ink); }
.about-section-heading-light .about-overline { color: var(--gold); }
.about-convictions-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border-top: 1px solid rgba(7,17,19,.1); border-bottom: 1px solid rgba(7,17,19,.1); }
.about-convictions-grid article { min-width: 0; padding: 35px 28px 38px; border-right: 1px solid rgba(7,17,19,.1); }
.about-convictions-grid article:last-child { border-right: 0; }
.about-convictions-grid i { color: var(--gold); font-size: 1.65rem; }
.about-convictions-grid h3 { margin: 25px 0 13px; color: var(--ink); font-size: 1.2rem; font-weight: 700; }
.about-convictions-grid p { margin: 0; color: #687174; font-size: .88rem; line-height: 1.7; }

.about-cta { padding: clamp(70px,7vw,100px) 0; color: #fff; background: radial-gradient(circle at 92% 15%,rgba(224,184,111,.15),transparent 27%),#0b181b; }
.about-cta-inner { display: flex; align-items: end; justify-content: space-between; gap: 45px; }
.about-cta-inner > div { min-width: 0; max-width: 820px; }
.about-cta h2 { margin: 14px 0 0; color: #fff; font-size: clamp(2.2rem,4vw,4rem); font-weight: 700; hyphens: auto; overflow-wrap: break-word; letter-spacing: -.045em; line-height: 1; }
.about-cta .btn { flex: 0 0 auto; }

@media (max-width: 991.98px) {
    .about-hero-inner { grid-template-columns: minmax(0,1.2fr) minmax(260px,.8fr); }
    .about-intro-grid { grid-template-columns: minmax(300px,.85fr) minmax(0,1.15fr); gap: 55px; }
    .about-path-card { min-height: 410px; padding: 28px; }
    .about-bridge-grid { grid-template-columns: 1fr; }
    .about-bridge-copy { max-width: 760px; }
    .about-places { max-width: 680px; transform: none; }
    .about-convictions-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .about-convictions-grid article:nth-child(2) { border-right: 0; }
    .about-convictions-grid article:nth-child(-n+2) { border-bottom: 1px solid rgba(7,17,19,.1); }
}

@media (max-width: 767.98px) {
    .about-hero-inner { min-height: 0; grid-template-columns: 1fr; gap: 42px; padding-top: 110px; padding-right: 28px; padding-bottom: 68px; }
    .about-hero h1 { max-width: 100%; font-size: clamp(3.05rem,11vw,4.3rem); letter-spacing: -.055em; overflow-wrap: anywhere; }
    .about-hero-copy > p { max-width: 32ch; }
    .about-identity { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .about-identity > div { padding: 19px 15px; }
    .about-intro { padding: 66px 0; }
    .about-intro-grid { grid-template-columns: 1fr; gap: 52px; }
    .about-portrait-wrap { max-width: 570px; }
    .about-portrait { aspect-ratio: 4 / 4.5; }
    .about-portrait-note { right: -7px; bottom: 22px; }
    .about-intro h2 { font-size: clamp(2.35rem,11vw,3.25rem); }
    .about-path { padding: 66px 0; }
    .about-path-grid { grid-template-columns: 1fr; }
    .about-path-card { min-height: 0; }
    .about-path-card > i { margin-bottom: 34px; }
    .about-section-heading h2,
    .about-bridge h2 { font-size: clamp(2.4rem,11vw,3.4rem); }
    .about-bridge { padding: 68px 0 78px; }
    .about-places { transform: none; }
    .about-place { min-height: 330px; padding: 23px; }
    .about-convictions { padding: 68px 0; }
    .about-cta-inner { align-items: flex-start; flex-direction: column; }
    .about-cta .btn { width: 100%; }
}

@media (max-width: 519.98px) {
    .about-hero h1 { font-size: clamp(2.8rem,12vw,3.5rem); }
    .about-identity { grid-template-columns: 1fr; }
    .about-identity > div { padding: 18px 20px; }
    .about-portrait-note { position: static; min-width: 0; margin: -12px 16px 0; }
    .about-places { grid-template-columns: 1fr; }
    .about-place { min-height: 310px; }
    .about-place-gambia { margin-top: 0; }
    .about-convictions-grid { grid-template-columns: 1fr; }
    .about-convictions-grid article { border-right: 0; border-bottom: 1px solid rgba(7,17,19,.1); }
    .about-convictions-grid article:last-child { border-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .about-page { scroll-behavior: auto; }
}
@media (min-width:768px) { .about-hero-inner { min-height:610px; } }
/* Hero bleibt bewusst frei von Zusatzkarten. */
.about-hero-inner { grid-template-columns: minmax(0,1fr); }