/* ==========================================================================
   ABOUT  —  nur für about.html
   ========================================================================== */

/* Seitenkopf-Grundgerüst liegt in layout.css — hier nur das About-Layout */
.page-hero__inner{
  display:grid;
  grid-template-columns:1.25fr .95fr;
  gap:clamp(2rem, 5vw, 4.5rem);
  align-items:end;
}

.motto h2{
  font-size:clamp(1.1rem, 1.8vw, 1.5rem);
  color:var(--accent-2);
  margin-bottom:1rem;
}
.motto p{ color:var(--text-dim); font-size:.86rem; }

/* aktuelle Rolle */
.rolecard{
  grid-column:1 / -1;
  margin-top:clamp(2rem, 4vw, 3.5rem);
  display:flex; flex-wrap:wrap; gap:1.5rem;
  align-items:center; justify-content:space-between;
  padding:1.4rem 1.75rem;
  background:linear-gradient(120deg, rgba(17,39,34,.9), rgba(11,26,22,.55));
  border:1px solid var(--line-strong);
  clip-path:var(--chamfer);
}
.rolecard__main{ display:flex; flex-direction:column; gap:.35rem; }
.rolecard__label{
  font-family:var(--font-display); font-weight:600;
  font-size:.64rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--accent);
}
.rolecard__main strong{
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1rem, 1.6vw, 1.25rem);
  letter-spacing:.03em; text-transform:uppercase;
}
.rolecard__org{ font-size:.78rem; color:var(--text-mute); }

.rolecard__tags{ display:flex; flex-wrap:wrap; gap:.5rem; }
.rolecard__tags li{
  padding:.35rem .8rem;
  font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--accent-2);
  border:1px solid rgba(53,242,207,.35);
  background:rgba(53,242,207,.07);
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
}

/* ==========================================================================
   PROFIL
   ========================================================================== */
.profile{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:clamp(2rem, 5vw, 4rem);
  align-items:start;
}
.profile__shot{ position:sticky; top:calc(var(--header-h) + 2rem); }

.storyblock{
  margin-top:2rem;
  padding-left:1.25rem;
  border-left:2px solid var(--line);
  transition:border-color .3s var(--ease);
}
.storyblock:hover{ border-left-color:var(--accent-2); }
.storyblock h3{
  font-size:clamp(1rem, 1.5vw, 1.2rem);
  color:var(--accent-2);
  margin-bottom:.6rem;
}
.storyblock p{ color:var(--text-dim); font-size:.84rem; }

/* ==========================================================================
   ZWEI PERSPEKTIVEN
   ========================================================================== */
.section--duo{
  background:
    radial-gradient(60% 50% at 80% 20%, rgba(255,232,61,.07), transparent 60%),
    var(--bg);
}
.duo{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:clamp(1.25rem, 3vw, 2rem);
  margin-top:1rem;
}
.duo__card{
  position:relative;
  padding:clamp(1.5rem, 3vw, 2.25rem);
  background:linear-gradient(160deg, var(--panel-2), rgba(11,26,22,.7));
  border:1px solid var(--line);
  clip-path:var(--chamfer);
  overflow:hidden;
  transition:border-color .35s var(--ease), transform .35s var(--ease);
}
.duo__card::after{
  content:"";
  position:absolute; left:0; right:0; top:0; height:2px;
  background:var(--accent);
  transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease);
}
.duo__card--tech::after{ background:var(--accent-2); }
.duo__card:hover{ transform:translateY(-4px); }
.duo__card:hover::after{ transform:scaleX(1); }

.duo__eyebrow{
  display:inline-block; margin-bottom:.9rem;
  font-family:var(--font-display); font-weight:600;
  font-size:.66rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--accent);
}
.duo__card--tech .duo__eyebrow{ color:var(--accent-2); }
.duo__card h3{ font-size:clamp(1.15rem, 2vw, 1.6rem); margin-bottom:.9rem; }
.duo__card p{ color:var(--text-dim); font-size:.84rem; }

/* ==========================================================================
   KERNKOMPETENZEN
   ========================================================================== */
.skills{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:clamp(1.25rem, 3vw, 2rem);
}
.skill{
  padding:clamp(1.4rem, 2.5vw, 2rem);
  background:rgba(7,15,13,.7);
  border:1px solid var(--line);
  clip-path:var(--chamfer);
  transition:border-color .35s var(--ease), background .35s var(--ease);
}
.skill:hover{ border-color:var(--line-strong); background:rgba(13,31,26,.85); }

.skill__head{
  display:flex; align-items:center; gap:.9rem;
  padding-bottom:1rem; margin-bottom:1.25rem;
  border-bottom:1px solid var(--line);
}
.skill__icon{
  width:30px; height:30px; flex:none;
  fill:none; stroke:var(--accent);
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
  filter:drop-shadow(0 0 8px rgba(255,232,61,.4));
}
.skill h3{ font-size:.95rem; line-height:1.3; letter-spacing:.05em; }

.skill dl{ display:grid; gap:.25rem; }
.skill dt{
  font-family:var(--font-display); font-weight:600;
  font-size:.82rem; letter-spacing:.04em;
  color:var(--accent-2);
  margin-top:.9rem;
}
.skill dt:first-child{ margin-top:0; }
.skill dd{
  margin:0;
  font-size:.78rem; line-height:1.7;
  color:var(--text-mute);
}
/* Randnotiz an einem Kompetenz-Titel, z. B. „kein aktueller Schwerpunkt“ */
.skill__note{
  display:inline-block; margin-left:.5rem;
  padding:.1rem .5rem;
  font-family:var(--font-body); font-weight:300;
  font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-mute);
  border:1px solid var(--line);
  vertical-align:middle;
}

/* ==========================================================================
   FÖRDERPROJEKTE
   ========================================================================== */
.euprojects{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(1.25rem, 3vw, 2rem);
  margin-top:2.5rem;
}
.eup{
  position:relative;
  padding:clamp(1.4rem, 2.5vw, 1.9rem);
  background:linear-gradient(165deg, var(--panel), rgba(7,15,13,.85));
  border:1px solid var(--line);
  clip-path:var(--chamfer);
  transition:transform .35s var(--ease), border-color .35s var(--ease);
}
.eup:hover{ transform:translateY(-5px); border-color:var(--accent-2); }
.eup__prog{
  display:block;
  font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent);
  margin-bottom:.7rem;
}
.eup h3{
  font-size:clamp(1.05rem, 1.8vw, 1.35rem);
  text-transform:none; letter-spacing:.01em;
  margin-bottom:.5rem;
}
.eup__role{
  display:inline-block; margin-bottom:1rem;
  padding:.25rem .7rem;
  font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent-2);
  border:1px solid rgba(53,242,207,.35);
  background:rgba(53,242,207,.07);
}
.eup p{ font-size:.8rem; color:var(--text-dim); }

/* ==========================================================================
   ABLAUF
   ========================================================================== */
.section--process{
  background:
    radial-gradient(70% 60% at 20% 20%, rgba(53,242,207,.08), transparent 60%),
    var(--bg);
}
.process{
  position:relative;
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:1rem;
  margin-top:3rem;
}
.process::before{
  content:"";
  position:absolute; left:6%; right:6%; top:38px;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--line-strong) 15%, var(--line-strong) 85%, transparent);
}
.step{
  position:relative;
  padding:1.5rem 1.25rem;
  background:linear-gradient(180deg, rgba(17,39,34,.75), rgba(7,15,13,.9));
  border:1px solid var(--line);
  border-radius:var(--radius);
  transition:transform .35s var(--ease), border-color .35s var(--ease);
}
.step:hover{ transform:translateY(-6px); border-color:var(--accent); }
.step__no{
  position:relative; z-index:1;
  display:grid; place-items:center;
  width:40px; height:40px; margin-bottom:1.1rem;
  font-family:var(--font-display); font-weight:700; font-size:.8rem;
  color:#0a1512;
  background:linear-gradient(135deg, var(--accent-soft), var(--accent));
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  filter:drop-shadow(0 0 10px rgba(255,232,61,.45));
}
.step h3{ font-size:.92rem; margin-bottom:.7rem; }
.step p{ font-size:.78rem; color:var(--text-mute); line-height:1.7; }

/* ==========================================================================
   WERDEGANG
   ========================================================================== */
.section--cv{
  background:
    linear-gradient(180deg, var(--bg), rgba(11,26,22,.9)),
    var(--bg);
  border-top:1px solid var(--line);
}
.timeline{ margin-top:3rem; }

.tl{
  display:grid;
  grid-template-columns:145px minmax(0, 1fr) 290px;
  align-items:start;
}
.tl__meta{
  display:flex; flex-direction:column; align-items:flex-end; gap:.5rem;
  padding:.15rem 1.5rem 0 0;
  text-align:right;
}
.tl__year{
  font-family:var(--font-display); font-weight:700;
  font-size:.9rem; letter-spacing:.06em;
  color:var(--accent);
  white-space:nowrap;
}
.tl__type{
  font-size:.58rem; letter-spacing:.18em; text-transform:uppercase;
  padding:.2rem .55rem;
  border:1px solid var(--line);
  color:var(--text-mute);
}
.tl__type--job{ color:var(--accent-2); border-color:rgba(53,242,207,.3); }
.tl__type--edu{ color:var(--accent-3); border-color:rgba(139,255,107,.3); }

.tl__content{
  position:relative;
  padding:0 0 3.25rem 2rem;
  border-left:2px solid var(--line);
}
.tl:last-child .tl__content{
  border-image:linear-gradient(var(--line), transparent) 1;
  padding-bottom:1rem;
}
.tl__content::before{
  content:"";
  position:absolute; left:-8px; top:.35rem;
  width:14px; height:14px; border-radius:50%;
  background:var(--bg);
  border:2px solid var(--accent);
  box-shadow:0 0 14px rgba(255,232,61,.6);
}
.tl__content h3{
  font-size:clamp(1rem, 1.6vw, 1.25rem);
  margin-bottom:.35rem;
}
.tl__org{
  font-size:.76rem; letter-spacing:.06em;
  color:var(--accent-2);
  margin-bottom:.9rem;
}
.tl__content > p{ font-size:.8rem; color:var(--text-dim); }

.tl__shot{ padding:0 0 2rem 2rem; }
.tl__shot figcaption{ font-size:.68rem; }

/* ==========================================================================
   BREAKPOINTS
   ========================================================================== */
@media (max-width: 1080px){
  .process{ grid-template-columns:repeat(3, 1fr); }
  .process::before{ display:none; }
  .euprojects{ grid-template-columns:repeat(2, 1fr); }
  .tl{ grid-template-columns:130px minmax(0, 1fr); }
  .tl__shot{ grid-column:2; padding-left:2rem; max-width:420px; }
}

@media (max-width: 900px){
  .page-hero__inner{ grid-template-columns:1fr; align-items:start; }
  .profile{ grid-template-columns:1fr; }
  .profile__shot{ position:static; max-width:520px; }
  .duo,
  .skills{ grid-template-columns:1fr; }
  .rolecard{ flex-direction:column; align-items:flex-start; }
}

@media (max-width: 700px){
  .process{ grid-template-columns:1fr; }
  .euprojects{ grid-template-columns:1fr; }

  .tl{ grid-template-columns:1fr; }
  .tl__meta{
    flex-direction:row; align-items:center; justify-content:flex-start;
    padding:0 0 .6rem 2rem;
    text-align:left;
    border-left:2px solid var(--line);   /* Linie durchgehend halten */
  }
  .tl:first-child .tl__meta{ border-left-color:transparent; }
  .tl__shot{ grid-column:1; }
}