/* ==========================================================================
   Über uns – studiocarbon.eu
   Seitenspezifisches CSS (Portrait-Hero + Lebenslauf-Spalten).
   ========================================================================== */

:root{
  /* "Old Standard TT" wurde im Original per Google Fonts nachgeladen; da wir
     keine externen Fonts einbinden, bleibt bewusst nur der lokale Serif-Fallback
     (Fallback im Original ohnehin "Sans-serif" – hier Serif, optisch näher am Original) */
  --font-serif:"Old Standard TT",Georgia,"Times New Roman",serif;
}

/* 1. Hero (Portrait + Zitat) ---------------------------------------------- */
.about-hero{background-color:#020101;padding:100px 40px 0}
.about-hero__inner{max-width:none;align-items:center}
.about-hero__col{width:50%}
.about-hero__portrait-col{padding:0 0 0 25px}
.about-hero__portrait{display:block;width:100%;height:auto}
.about-hero__quote-col{padding:0 25px 0 0}
.about-hero__quote-wrap{height:46.39px;margin:0 0 20px;line-height:1.6}   /* Zeilenbox 46.39px wie im Original (Icon inline-block auf der Grundlinie) */
.about-hero__quote-icon{
  display:inline-block;
  width:40px;height:40px;
  margin:0;
  color:#686868;
  font-size:40px;
  line-height:40px;
  text-align:center;
}
.about-hero__quote{margin:0 0 40px}   /* zwei Absätze + Widget-Abstand wie im Original (dort zwei eigene Flex-Items) */
.about-hero__quote p{
  color:#fff;
  font-size:16px;
  font-weight:300;
  line-height:2;
  margin:0 0 20px;
}
.about-hero__name{
  font-family:var(--font-display);
  color:#fff;
  font-size:30px;
  font-weight:900;
  line-height:1;
  margin:0 0 20px;
}
.about-hero__role{
  font-family:var(--font-display);
  color:#686868;
  font-size:15px;
  font-weight:300;
  line-height:15px;
  letter-spacing:2px;
  text-transform:uppercase;
  margin:-10px 0 0;   /* letztes Widget der Spalte: kein Abstand danach (wie im Original) */
}
@media only screen and (max-width:1024px){
  .about-hero{padding:100px 25px}
}
@media only screen and (max-width:767px){
  .about-hero{padding:50px 20px}
  .about-hero__inner{flex-wrap:wrap}
  .about-hero__col{width:100%}
  .about-hero__portrait-col{padding:25px 0 0}   /* Original: Bild-Spalte 25px oben, Zitat-Spalte ohne Innenabstand */
  .about-hero__quote-col{padding:0;text-align:center}
  .about-hero__name{font-size:20px}
  .about-hero__role{font-size:12px;line-height:12px}
}

/* 2. Lebenslauf (Experience / Education) ----------------------------------- */
.about-body{padding:0}
.about-body__inner{max-width:940px;flex-wrap:wrap}
.about-col{width:50%;padding:40px}
.about-col--exp{
  padding:40px 40px 40px 0;
  text-align:right;
  border-right:3px solid #000;
}
.about-col--edu{padding:40px 0 40px 40px;text-align:left}
.about-heading{
  font-family:var(--font-serif);
  color:#000;
  font-size:31px;
  font-weight:400;
  letter-spacing:3px;
  text-transform:uppercase;
  line-height:1;
  margin:0 0 20px;
}
.about-heading--primary{padding-bottom:30px}   /* nur die Spaltentitel Experience/Education haben im Original diesen Abstand, Skills/Social nicht */
.about-timeline__year{
  font-family:var(--font-serif);
  color:#000;
  font-size:15px;
  font-weight:400;
  line-height:1;
  margin:0 0 20px;
}
.about-timeline__title{
  font-family:var(--font-serif);
  color:#000;
  font-size:25px;
  font-weight:900;
  line-height:1;
  margin:0 0 20px;
}
.about-timeline__title a{color:inherit}
.about-timeline__desc{
  font-family:var(--font-serif);
  color:#000;
  font-size:15px;
  font-weight:400;
  line-height:1.6;
  margin:0 0 40px;
}
.about-col--edu .about-timeline__title{font-size:21px}
.about-divider{height:4px;margin:0 0 20px}
.about-divider--wide{height:18px}
.about-divider--section{height:30px;margin:0 0 20px}   /* trennt Education-Unterabschnitte (vor Skills/Social), hat noch Abstand danach */
.about-divider--end{height:30px;margin:0}
@media only screen and (max-width:767px){
  .about-body{padding:30px}
  .about-col{width:100%}
}

/* Skills */
.about-skills-list{list-style:none;margin:0 0 20px;padding:0}
.about-skills-list__item{
  display:flex;
  align-items:center;
  padding:0 0 4px;
}
.about-skills-list__item+.about-skills-list__item{margin-top:4px}
.about-skills-list__item:last-child{padding-bottom:0}   /* letzter Eintrag ohne Original hat keinen Trenner-Puffer danach */
.about-skills-list__item .fa,
.about-skills-list__item .fas,
.about-skills-list__item .far{
  width:26.75px;
  padding-right:8px;
  font-size:15px;
  line-height:15px;
  color:#636363;
  text-align:left;
}
.about-skills-list__item span{
  padding-left:5px;
  color:#000;
  font-size:14px;
}

/* Social */
.about-social-list{display:flex;gap:22px;margin:0 0 20px}
.about-social-list__link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:50px;
  height:50px;
  border-radius:10%;
  background:#7f7f7f;
  color:#fff;
  font-size:25px;
  line-height:25px;
}
.about-social-list__link:hover{color:#fff;opacity:.9}