/* ==========================================================================
   PA/TEC — Über-mich-Seite (zusätzlich zu style.css + legal.css)
   ========================================================================== */

.about-wrap{max-width:940px}

/* Foto + Intro nebeneinander (Desktop), gestapelt (Mobile) */
.about-grid{display:grid;grid-template-columns:280px 1fr;gap:48px;align-items:start;margin-top:30px}
@media(max-width:720px){.about-grid{grid-template-columns:1fr;gap:26px}}

.about-photo{position:relative;border:1px solid var(--line-strong);border-radius:4px;overflow:hidden;background:var(--bg-elev);aspect-ratio:4/5}
.about-photo img{display:block;width:100%;height:100%;object-fit:cover}
.about-photo::after{content:"";position:absolute;left:0;top:0;width:3px;height:100%;background:var(--accent);box-shadow:0 0 14px var(--glow)}
@media(max-width:720px){.about-photo{max-width:280px}}

.about-lead p{color:var(--ink-soft);font-size:clamp(16px,1.9vw,18px);line-height:1.75;margin-bottom:16px}
.about-lead p:last-child{margin-bottom:0}
.about-lead strong{color:var(--ink);font-weight:600}
.about-lead a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(79,125,255,.35);transition:border-color .2s}
.about-lead a:hover{border-color:var(--accent)}

/* Abschnitte */
.about{padding:10px 0 96px}
/* padding:0 hebt das geerbte section{padding:84px 0} aus style.css auf —
   Abstand wird hier bewusst nur über margin-top gesteuert. */
.about-section{margin-top:52px;padding:0}
.about-section > h2{font-family:var(--display);font-weight:600;font-size:21px;letter-spacing:.2px;margin-bottom:20px;display:flex;gap:11px;align-items:baseline}
.about-section > h2 .n{color:var(--accent);font-family:var(--mono);font-size:14px;flex:none}

/* Werdegang / Stationen */
.stations{list-style:none;padding:0;margin:0}
.stations li{position:relative;padding:16px 0 16px 28px;border-top:1px solid var(--line)}
.stations li:first-child{border-top:0;padding-top:0}
.stations li:first-child::before{top:0}
.stations li::before{content:"/";position:absolute;left:0;top:16px;color:var(--accent);font-family:var(--mono);display:inline-block;transform:skewX(-12deg)}
.stations .when{font-family:var(--mono);font-size:13px;color:var(--faint);letter-spacing:.2px}
.stations .role{font-family:var(--display);font-weight:600;font-size:17px;color:var(--ink);margin:3px 0 5px}
.stations .role span{color:var(--muted);font-weight:500;font-size:15px}
.stations .desc{color:var(--ink-soft);font-size:15px;line-height:1.6}

/* Qualifikation (fließende /-Liste) */
.quals{list-style:none;display:flex;flex-wrap:wrap;gap:10px 24px;padding:0;margin:0}
.quals li{position:relative;padding-left:19px;font-family:var(--mono);font-size:14px;letter-spacing:.2px;color:var(--muted)}
.quals li::before{content:"/";position:absolute;left:0;color:var(--accent);display:inline-block;transform:skewX(-12deg)}

/* CTA */
.about-cta{margin-top:54px;font-size:17px;color:var(--ink-soft)}
.about-cta a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(79,125,255,.35);transition:border-color .2s}
.about-cta a:hover{border-color:var(--accent)}