:root{
  --bg: #0b0c0f;
  --text: #e9ecf2;
  --muted: #a7adbd;
  --line: rgba(255,255,255,.10);

  /* SERIÖSES BLAU als Akzent */
  --accent: #2b6cb0;

  --shadow: 0 18px 50px rgba(0,0,0,.45);
  --radius: 14px;

  /* Seite schmaler -> Hintergrund links/rechts sichtbar */
  --pageW: 1280px;
  --gutter: 22px;

  --navH: 72px;

  --paper: #f7f7f9;
  --paper2: #efeff2;
  --ink: #111;
  --inkMuted: rgba(17,17,17,.72);
  
  /* Grundfarben */
  --bg-main: #f6f7f9;
  --bg-card: #ffffff;

  /* Text */
  --text-main: #1f2933;     /* fast schwarz, sehr gut lesbar */
  --text-secondary: #5b6773;/* Meta-Texte */
  --text-muted: #8a96a3;    /* Zeit, Labels */

  /* Linien & Rahmen */
  --border-light: #e2e6ea;
  --border-strong: #d0d7de;

  /* Akzent */
  --accent-blue: #1f5fa8;   /* seriöses Technik-Blau */
  --accent-blue-soft: #e8f0fa;

  /* Timeline */
  --timeline-line: #cfd8e3;
  --timeline-dot: #1f5fa8;

  section[id], header[id]{
    scroll-margin-top: 90px;
}


*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background: var(--bg);
  color: var(--text);
}
a{ color: inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

.page{
  width: min(var(--pageW), calc(100% - (var(--gutter) * 2)));
  margin: 0 auto;
  background: transparent;
  /* borders raus -> keine vertikalen Striche im Header */
  border: 0;
}

.shell{
  width: min(1120px, calc(100% - (var(--gutter) * 2)));
  margin: 0 auto;
}

/* ---------- Page Background ---------- */
.pageBg{
  position: fixed;
  inset: 0;
  z-index: -2;
  background: url("assets/hero.jpg") center/cover no-repeat;
  transform: translateZ(0);
}
.pageBg__overlay{
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(900px 450px at 50% 25%, rgba(43,108,176,.14), transparent 62%),
    linear-gradient(to bottom,
      rgba(0,0,0,.86) 0%,
      rgba(0,0,0,.78) 40%,
      rgba(0,0,0,.92) 100%
    );
}

/* ---------- HERO (halb hoch) ---------- */
.hero{
  min-height: 44vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow: hidden; /* killt leichte Render-Artefakte */
}
.hero__content{
  text-align:center;
  padding: 54px 0 44px;
}
.hero__brand{
  display:inline-flex;
  flex-direction:column;
  gap:8px;
  align-items:center;
  margin-bottom: 14px;
}
.hero__brandName{
  letter-spacing: .34em;
  font-weight: 800;
  font-size: 18px;
}
.hero__brandTag{
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.hero__brandLine{
  width: 160px;
  height: 3px;
  background: var(--accent);
  border-radius: 0;
}
.hero__title{
  margin: 0;
  font-size: clamp(28px, 4.6vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 900;
}
.hero__title .accent{ color: var(--accent); }

.heroTitle_primary {
  color: var(--accent-blue);
  font-weight: 400;
  font-size: 1.4em;
}

.heroTitle_focus {
  color: #fff;
  font-weight: 600;
  font-size: 1.4em;
  margin: 0 .3ch;
}

.heroTitle_secondary {
  color: rgba(255,255,255,.85);
  font-weight: 500;
  font-size: 0.50em;
  margin-left: .4ch;
}

.hero__subtitle{
  margin: 10px auto 0;
  max-width: 820px;
  color: rgba(233,236,242,.86);
  font-size: 18px;
  line-height: 1.6;
}
.hero__cta{
  margin-top: 18px;
  display:flex;
  gap: 12px;
  justify-content:center;
  flex-wrap:wrap;
}

/* Buttons */
.btn{
  border: 1px solid var(--line);
  background: rgba(18,19,24,.72);
  color: var(--text);
  padding: 11px 15px;
  border-radius: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  display:inline-flex;
  align-items:center;
  gap: 10px;
  box-shadow: var(--shadow);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{
  transform: translateY(-1px);
  background: rgba(18,19,24,.90);
  border-color: rgba(255,255,255,.16);
}
.btn--primary{
  background: linear-gradient(180deg, rgba(43,108,176,.96), rgba(43,108,176,.76));
  color: #0b1220;
  border-color: rgba(43,108,176,.8);
}
.btn--primary:hover{
  background: linear-gradient(180deg, rgba(43,108,176,1), rgba(43,108,176,.82));
}
.btn__dot{
  width: 10px; height: 10px;
  border-radius: 3px;
  background: currentColor;
  opacity: .92;
}

/* NAV */
.nav{
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--navH);
  background: rgba(10,10,12,.62);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid var(--line);
}
.nav__inner{
  height: 100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
}
.nav__logo{
  font-weight: 900;
  letter-spacing: .18em;
  font-size: 13px;
}
.nav__links{
  display:flex;
  gap: 14px;
  align-items:center;
}
.nav__link{
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(233,236,242,.86);
  padding: 10px 10px;
  border-radius: 10px;
  border: 1px solid transparent;
}
.nav__link:hover{
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
}
.nav__link.is-active{
  color: #fff;
  border-color: rgba(43,108,176,.45);
  box-shadow: 0 0 0 3px rgba(43,108,176,.12) inset;
}
.nav__toggle{
  display:none;
  width: 44px; height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: rgba(18,19,24,.72);
  padding: 10px;
}
.nav__toggle span{
  display:block;
  height: 2px;
  background: rgba(233,236,242,.9);
  margin: 6px 0;
  border-radius: 0;
}

/* Sections */
.section{ padding: 70px 0; }

/* Section Head */
.sectionHead{
  text-align:center;
  margin-bottom: 34px;
}
.sectionHead__title{
  margin: 0;
  font-size: 38px;
  letter-spacing: .12em;
  font-weight: 900;
}
.sectionHead__subtitle{
  margin: 10px auto 0;
  max-width: 820px;
  color: rgba(233,236,242,.78);
  line-height: 1.6;
}
.sectionHead__kicker{
  width: 26px;
  height: 3px;
  background: var(--accent);
  margin: 0 auto 12px;
}
.sectionHead--light .sectionHead__title{ color: var(--ink); }
.sectionHead--light .sectionHead__subtitle{ color: var(--inkMuted); }

/* ABOUT */
.section--about{
  background: var(--paper);
  color: var(--ink);
}
.about{
  display:grid;
  grid-template-columns: 1.05fr 0.95fr 1fr;
  gap: 30px;
  align-items:center;
}
.about__name{
  margin:0;
  font-size: 34px;
  letter-spacing: -0.02em;
}
.about__role{
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(17,17,17,.70);
  display:flex;
  align-items:center;
  gap: 10px;
}
.about__role::after{
  content:"";
  width: 42px;
  height: 3px;
  background: var(--accent);
}
.about__text{
  margin-top: 16px;
  color: rgba(17,17,17,.75);
  line-height: 1.75;
  font-size: 14px;
  max-width: 520px;
}
.about__buttons{
  margin-top: 16px;
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
}
.about .btn{
  box-shadow: none;
  border-color: rgba(0,0,0,.10);
  background: rgba(255,255,255,.86);
  color: #111;
}
.about .btn:hover{ border-color: rgba(0,0,0,.18); }
.about .btn--primary{
  background: linear-gradient(180deg, rgba(43,108,176,1), rgba(43,108,176,.78));
  border-color: rgba(43,108,176,.8);
  color: #0b1220;
}

.aboutFacts {
  margin-top: 1rem;
  display: block;        /* <-- wichtig */
  max-width: 440px;
  font-size: 0.95rem;
  line-height: 1.6;
}

.factRow {
  display: block;
  margin-bottom: 0.35rem;
}

.factKey {
  color: #6b7280;
  font-weight: 500;
  margin-right: 0.35rem;
}

.factVal {
  color: #111827;
  font-weight: 500;
}

.photoFrame{
  position: relative;
  border-radius: var(--radius);
  overflow:hidden;
  background: #e9e9ee;
  box-shadow: 0 14px 40px rgba(0,0,0,.16);
}
.photoFrame img{
  width: 100%;
  height: 520px;
  object-fit: cover;
  object-position: center;
}
.photoFrame__corner{
  position:absolute;
  width: 40px; height: 40px;
  border: 3px solid var(--accent);
}
.photoFrame__corner--tl{
  top: 14px; left: 14px;
  border-right: 0; border-bottom: 0;
}
.photoFrame__corner--br{
  bottom: 14px; right: 14px;
  border-left: 0; border-top: 0;
}

.skills{ display:flex; flex-direction:column; gap: 16px; }
.skill{ display:flex; flex-direction:column; gap: 8px; }
.skill__top{
  display:flex; justify-content:space-between;
  font-size: 12px; letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(17,17,17,.70);
}
.skill__bar{
  height: 3px;
  background: rgba(17,17,17,.12);
  position:relative;
  overflow:hidden;
  border-radius: 0;
}
.skill__fill{
  position:absolute; inset: 0 auto 0 0;
  width: 0%;
  background: var(--accent);
}
.social{ margin-top: 18px; display:flex; gap: 10px; flex-wrap:wrap; }
.social__item{
  width: 44px; height: 44px;
  display:grid; place-items:center;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.86);
  color: rgba(17,17,17,.75);
  transition: transform .15s ease, border-color .15s ease;
}
.social__item:hover{ transform: translateY(-1px); border-color: rgba(0,0,0,.18); }

/* EXPERIENCE (stabil: Row full width + inner boxed grid) */
.section--experience{ background: #fff; color: var(--ink); padding-bottom: 0; }
.expWrap{
  width: 100%;
  background: var(--paper2);
  border-top: 1px solid rgba(0,0,0,.06);
}
.expRow{
  width: 100%;
}
.expRow:nth-child(even){ background: #fff; }

.expRow__inner{
  width: 100%;
  display:grid;
  grid-template-columns: 1fr 110px 1fr;
  min-height: 420px;
}

.expYear{
  background: linear-gradient(180deg, #111, #1a1a1a);
  display:flex;
  align-items:center;
  justify-content:center;
}
.expYear__text{
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  letter-spacing: .22em;
  font-weight: 900;
  color: var(--accent);
  font-size: 16px;
}

.expCell{
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 10px 10px;
}

.expCell--media{
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}

.expMedia{
  width: 100%;
  height: 100%;
  min-height: 420px;
  background: #ddd center/cover no-repeat;
  border-radius: 0; /* falls irgendwo Rundung ist */
  box-shadow: none; /* falls du keine Innenkante willst */
}

.expText{ max-width: 520px; width: 100%; }
.expBadge{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  margin-bottom: 14px;
}
.expIcon{
  width: 58px; height: 58px;
  border-radius: 50%;
  display:grid;
  place-items:center;
  background: #fff;
  box-shadow: 0 10px 28px rgba(0,0,0,.08);
  border: 1px solid rgba(0,0,0,.06);
  color: var(--accent);
  font-weight: 900;
}
.expMeta{
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(17,17,17,.55);
}
.expRole{
  margin: 0;
  font-size: 32px;
  letter-spacing: -0.02em;
}
.expDesc{
  margin-top: 12px;
  color: rgba(17,17,17,.70);
  line-height: 1.8;
  font-size: 14px;
}

/* Stabil: Grid-Areas statt Grid-Column */
.expRow__inner{
  width: 100%;
  display:grid;
  grid-template-columns: 1fr 110px 1fr;
  grid-template-areas: "text year media";
  min-height: 420px;
}

.expCell--text{ grid-area: text; }
.expYear{ grid-area: year; }
.expCell--media{ grid-area: media; }

.expRow__inner.is-reversed{
  grid-template-areas: "media year text";
}

/* RADAR */
.section--radar{ background: var(--paper); color: var(--ink); }
.radarCard{
  border: 1px solid rgba(0,0,0,.06);
  background: #fff;
  border-radius: 18px;
  padding: 18px;
  display:grid;
  grid-template-columns: 1fr 280px;
  gap: 18px;
  box-shadow: 0 20px 45px rgba(0,0,0,.10);
}

/* keine Innenbox mehr */
.radarCard__canvas{
  border: 0;
  border-radius: 14px;
  background: transparent;
  padding: 0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow: visible;
  box-shadow: none;
}

/* Canvas einfach sauber zentrieren */
.radarCard canvas{
  width: 100%;
  height: auto;
  max-width: 760px;
  display:block;
}

.radarLegend{ padding: 10px 10px; }

.radarLegend__item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(247,247,249,.95);
  margin-bottom: 10px;
}
.radarLegend__name{
  font-weight: 850;
}
.radarLegend__val{
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(17,17,17,.60);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(43,108,176,.08);
}
.radarSolo{
  display:flex;
  justify-content:center;
  align-items:center;
  padding-top: 10px;
}
.radarSolo canvas{
  width: min(760px, 100%);
  height: auto;
  display:block;
}

/* CONTACT (Map + Overlay) */
.section--contact{
  padding: 0;
  position: relative;
  background: #0f1014;
  color: var(--text);
}
.contactMap{
  height: 180px;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.contactMap iframe{
  width: 100%;
  height: 100%;
  border: 0;
  display:block;
  filter: saturate(0.95) contrast(1.02);
}

#mapFrame {
  pointer-events: none;
}
.map-active #mapFrame {
  pointer-events: auto;
}

.contactOverlay{
  position: relative;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.75) 0%, rgba(0,0,0,.82) 100%),
    url("assets/contact-bg.jpg") center/cover no-repeat;
}
.contactPanel{
  padding: 64px 0 62px;
}
.contactPanel .sectionHead__title{
  color: #fff;
  letter-spacing: .12em;
}
.contactPanel .sectionHead__subtitle{
  color: rgba(233,236,242,.80);
}

.contactForm{
  max-width: 720px;
  margin: 26px auto 0;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.field{ display:flex; flex-direction:column; gap: 8px; }
.field__label{
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(233,236,242,.72);
}
.field__input{
  border: 0;
  border-bottom: 1px solid rgba(233,236,242,.35);
  background: transparent;
  color: rgba(233,236,242,.92);
  padding: 10px 0;
  outline: none;
}
.field__input::placeholder{ color: rgba(233,236,242,.45); }
.field__textarea{
  resize: vertical;
  min-height: 110px;
}
.field--full{ grid-column: 1 / -1; }

.contactForm__actions{
  grid-column: 1 / -1;
  display:flex;
  align-items:center;
  gap: 14px;
  flex-wrap:wrap;
  margin-top: 10px;
}
.contactForm__hint{
  color: rgba(233,236,242,.72);
  font-size: 13px;
}

/* Kontakt-Infokarten */
.contactStrip{
  background: rgba(15,16,20,.82);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
}
.contactStrip__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.contactCard{
  display:flex;
  gap: 12px;
  align-items:center;
  padding: 14px 14px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(255,255,255,.03);
}
.contactCard__icon{
  width: 46px; height: 46px;
  border-radius: 14px;
  border: 1px dashed rgba(255,255,255,.16);
  display:grid;
  place-items:center;
  color: rgba(233,236,242,.92);
}
.contactCard__title{
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(233,236,242,.72);
  margin: 0;
}
.contactCard__value{
  margin-top: 6px;
  font-size: 13px;
  color: rgba(233,236,242,.92);
  line-height: 1.4;
}

/* =========================================
   CONTACT – Link-basierter CTA
   ========================================= */

.contactActions{
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Quicklinks = Hauptaktion */
.contactQuickLinks{
  display: flex;
  gap: 28px;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

/* CTA-Look für Links */
.contactQuickLinks a{
  position: relative;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .03em;
  text-decoration: none;
  padding: 10px 18px;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    rgba(46,120,198,.95),
    rgba(32,92,158,.95)
  );
  box-shadow:
    0 10px 26px rgba(0,0,0,.35),
    inset 0 1px 0 rgba(255,255,255,.18);
  transition:
    transform .15s ease,
    box-shadow .15s ease,
    filter .15s ease;
}

/* Hover = subtil, hochwertig */
.contactQuickLinks a:hover{
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow:
    0 14px 34px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.25);
}

/* Mobile: untereinander, schön groß */
@media (max-width: 520px){
  .contactQuickLinks{
    flex-direction: column;
    gap: 14px;
  }

  .contactQuickLinks a{
    width: 100%;
    max-width: 280px;
    text-align: center;
  }
}

/* Footer */
.footer{
  padding: 22px 0;
  color: rgba(233,236,242,.62);
  font-size: 13px;
  background: rgba(0,0,0,.35);
}
.footer__inner{
  display:flex;
  justify-content:space-between;
  gap: 14px;
  flex-wrap:wrap;
  border-top: 1px solid rgba(255,255,255,.10);
  padding-top: 16px;
}

/* Responsive */
@media (max-width: 980px){
  .about{ grid-template-columns: 1fr; }
  .photoFrame img{ height: 420px; }
  .contactStrip__grid{ grid-template-columns: 1fr; }

  .radarCard{ grid-template-columns: 1fr; }

  .expRow__inner{
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .expYear{ display:none; }
  .expCell{ padding: 26px 18px; }
  .expMedia{ min-height: 240px; }
  .expRow.is-reversed .expCell--text,
  .expRow.is-reversed .expCell--media{ grid-column: auto; }

  .contactForm{ grid-template-columns: 1fr; }
  .nav__toggle{ display:block; }
  .nav__links{
    position: absolute;
    top: var(--navH);
    left: 0;
    right: 0;
    background: rgba(10,10,12,.92);
    border-bottom: 1px solid var(--line);
    display:none;
    flex-direction:column;
    padding: 12px 20px 18px;
  }
  .nav__links.is-open{ display:flex; }
  .nav__link{ width: 100%; }
}

.skill__badge{
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.03);
  color: rgba(17,17,17,.70);
  font-weight: 900;
}
.skill__badge--basic{
  background: rgba(43,108,176,.06);
}
.skill__badge--solid{
  background: rgba(43,108,176,.10);
}
.skill__badge--advanced{
  background: rgba(43,108,176,.14);
}
.skill__badge--pro{
  background: rgba(43,108,176,.18);
}

.skill__bar{
  height: 6px;                 /* dicker */
  border-radius: 999px;        /* pill */
  background: rgba(17,17,17,.10);
}
.skill__fill{
  border-radius: 999px;
  box-shadow: 0 6px 14px rgba(43,108,176,.20);
}

.section--cv{
  background: #fff;
  color: var(--ink);
}

.cvTimeline{
  position: relative;
  padding-left: 34px;
  max-width: 920px;
  margin: 0 auto;
}

/* vertikale Linie */
.cvTimeline::before{
  content:"";
  position:absolute;
  left: 12px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, rgba(0,0,0,.06), rgba(0,0,0,.14), rgba(0,0,0,.06));
}

.cvItem{
  position: relative;
  padding: 18px 18px 18px 18px;
  margin-bottom: 14px;
  border-radius: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  box-shadow: 0 4px 14px rgba(0,0,0,0.04);
}

.cvItem h3 {
  color: var(--text-main);
}

/* Punkt */
.cvItem::before{
  content:"";
  position:absolute;
  left: -34px;
  top: 26px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--timeline-line);
  border: 3px solid var(--accent);
  box-shadow: 0 8px 16px rgba(43,108,176,.18);
}

.cvDot {
  background: #fff;
  border: 2px solid var(--timeline-dot);
}

.cvDot::after {
  background: var(--timeline-dot);
}

/* Meta-Zeile */
.cvMeta{
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom: 8px;
}
.cvPeriod{
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--accent-blue);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.06);
  background: var(--accent-blue-soft);
}
.cvPlace{
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(17,17,17,.55);
}

.cvTitle{
  margin: 0;
  font-size: 18px;
  letter-spacing: -0.01em;
}
.cvDesc{
  margin-top: 10px;
  color: rgba(17,17,17,.72);
  line-height: 1.75;
  font-size: 14px;
}

@media (max-width: 980px){
  .cvTimeline{ padding-left: 28px; }
  .cvItem::before{ left: -28px; }
}

.section--trainings{
  background: #f7f8fa;
  padding-top: clamp(64px, 8vw, 96px);
  padding-bottom: clamp(64px, 8vw, 96px);
  position: relative;
  z-index: 1;
}

/* Trainings wie CV-Timeline */
.trainingsList{
  position: relative;
  padding-left: 34px;
  max-width: 920px;
  margin: 0 auto;
}

.trainingsList::before{
  content:"";
  position:absolute;
  left: 12px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, rgba(0,0,0,.06), rgba(0,0,0,.14), rgba(0,0,0,.06));
}

.trainingItem{
  position: relative;
  padding: 16px 18px;
  margin-bottom: 12px;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  background: rgba(247,247,249,.92);
  box-shadow: 0 10px 20px rgba(0,0,0,.06);
}

.trainingItem::before{
  content:"";
  position:absolute;
  left: -34px;
  top: 22px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #fff;
  border: 3px solid var(--accent);
  box-shadow: 0 8px 16px rgba(31,95,168,.18);
}

.trainingMeta{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom: 8px;
}

.trainingPeriod{
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(17,17,17,.55);
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.06);
  background: rgba(31,95,168,.08);
  font-weight: 700;
}

.trainingTitle{
  margin: 0;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: rgba(17,17,17,.92);
}

.trainingDesc{
  margin-top: 8px;
  color: rgba(17,17,17,.72);
  line-height: 1.6;
  font-size: 13px;
}

@media (max-width: 980px){
  .trainingsList{ padding-left: 28px; }
  .trainingItem::before{ left: -28px; }
}