/* ---------- Über mich ---------- */
.sl-about-hero { padding: 11em 0 7em; overflow: hidden; }
.sl-about-hero-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 5em; align-items: center; }
.sl-about-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 1.75em; }
.sl-about-h1 { font-size: 5.5em; line-height: 1.05; }
.sl-about-lead { margin: 0; color: #ffffffcc; font-size: 1.4em; line-height: 1.5; letter-spacing: .02em; max-width: 30em; }
.sl-about-social-wrap { display: flex; align-items: center; gap: 1.25em; margin-top: .5em; flex-wrap: wrap; }
.sl-about-social-label { color: #ffffff80; font-size: .9em; letter-spacing: .12em; text-transform: uppercase; }
.sl-about-social { display: flex; gap: .75em; }

.sl-social { --c: #7970f2; position: relative; width: 3.25em; height: 3.25em; border-radius: 1em; display: inline-flex; align-items: center; justify-content: center;
  color: #fff; background: #ffffff10; border: 1px solid #ffffff24; overflow: hidden; isolation: isolate;
  transition: transform .45s var(--ease-out), border-color .35s var(--ease-io), box-shadow .45s var(--ease-out); }
.sl-social::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c); transform: translateY(101%); transition: transform .45s var(--ease-out); }
.sl-social svg { width: 1.35em; height: 1.35em; transition: transform .45s var(--ease-out); }
.sl-social:hover { transform: translateY(-4px); border-color: transparent; box-shadow: 0 14px 30px -12px var(--c); }
.sl-social:hover::before { transform: translateY(0); }
.sl-social:hover svg { transform: scale(1.1); }
.sl-social-linkedin { --c: #0a66c2; }
.sl-social-github { --c: #24292f; }
.sl-social-youtube { --c: #ff0033; }
.sl-social-instagram { --c: linear-gradient(45deg, #feda75, #fa7e1e 25%, #d62976 50%, #962fbf 75%, #4f5bd5); }
.sl-social-instagram::before { background: var(--c); }
.sl-footer-social { display: flex; gap: .6em; }
.sl-footer-social .sl-social { width: 2.6em; height: 2.6em; border-radius: .75em; }
.sl-footer-social .sl-social svg { width: 1.1em; height: 1.1em; }

.sl-about-portrait { position: relative; justify-self: center; width: 100%; max-width: 30em; }
.sl-portrait-frame { position: relative; border-radius: 2em; padding: 3px; aspect-ratio: 4 / 5; transform-style: preserve-3d; will-change: transform; transition: transform .6s var(--ease-out); }
.sl-portrait-frame::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 3px;
  background: conic-gradient(from var(--sl-angle, 0deg), #a39df6, #5044ee, #ef8b6e, #7970f2, #a39df6);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: sl-spin-angle 6s linear infinite; }
.sl-portrait-frame::after { content: ""; position: absolute; inset: 8%; z-index: -1; border-radius: 50%; background: #6a60f1; filter: blur(70px); opacity: .55; }
.sl-portrait-img { width: 100%; height: 100%; object-fit: cover; object-position: 38% 30%; border-radius: calc(2em - 3px); display: block; }
@property --sl-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes sl-spin-angle { to { --sl-angle: 360deg; } }
.sl-float-badge { position: absolute; width: 7.5em; height: auto; filter: drop-shadow(0 18px 24px #0008); animation: sl-float 6s ease-in-out infinite; pointer-events: none; }
.sl-float-1 { top: -1.5em; right: -2.5em; animation-delay: -1s; }
.sl-float-2 { bottom: 4em; left: -3.5em; width: 6.5em; animation-delay: -3s; }
.sl-float-3 { bottom: -2em; right: 1.5em; width: 6em; animation-delay: -4.5s; }
@keyframes sl-float { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-14px) rotate(4deg); } }

.sl-about-section { position: relative; padding: 9em 0; }
.sl-about-light { background: #fff; }
.sl-about-dark { background: radial-gradient(60% 70% at 0% 0%, #2a2470 0%, transparent 60%), radial-gradient(50% 60% at 100% 100%, #241f5e 0%, transparent 60%), #0f0e17; color: #fff; }
.sl-about-head { display: flex; flex-direction: column; gap: 1em; margin-bottom: 4.5em; }
.sl-about-head.is-center { align-items: center; text-align: center; }
.sl-eyebrow { color: #6a60f1; font-size: .95em; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; }
.sl-eyebrow.is-light { color: #a39df6; }
.sl-about-h2 { margin: 0; color: #1a1a1a; font-size: 3.75em; line-height: 1.12; font-weight: 500; letter-spacing: -.01em; }
.sl-about-h2.is-light { color: #f0efe8; }
.sl-about-sub { margin: 0; color: #ffffffa6; font-size: 1.15em; max-width: 34em; line-height: 1.5; }

/* Werdegang */
.sl-timeline { list-style: none; margin: 0; padding: 0; position: relative; max-width: 62em; }
.sl-timeline::before, .sl-timeline::after { content: ""; position: absolute; left: 2em; top: 2em; bottom: 2em; width: 2px; border-radius: 2px; }
.sl-timeline::before { background: #ece9ff; }
.sl-timeline::after { background: linear-gradient(#a39df6, #5044ee); transform-origin: top; transform: scaleY(var(--sl-progress, 0)); }
.sl-step { position: relative; display: grid; grid-template-columns: 4em 1fr; gap: 2.5em; padding-bottom: 3em; }
.sl-step:last-child { padding-bottom: 0; }
.sl-step-dot { position: relative; z-index: 1; width: 4em; height: 4em; border-radius: 1.2em; display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid #dcdaf9; color: #6a60f1; font-weight: 600; letter-spacing: .04em; transition: background-color .6s var(--ease-out), color .6s, border-color .6s, box-shadow .6s; }
.sl-step.is-reached .sl-step-dot { background: linear-gradient(135deg, #8d85f4, #5044ee); color: #fff; border-color: transparent; box-shadow: 0 12px 30px -10px #5044ee; }
.sl-step-card { padding: 2em 2.25em; border-radius: 1.25em; background: #f7f6ff; border: 1px solid #ece9ff; transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .4s; }
.sl-step-card:hover { transform: translateX(6px); border-color: #c9c5fb; box-shadow: 0 20px 40px -24px #5044ee66; }
.sl-step-kicker { color: #6a60f1; font-size: .85em; letter-spacing: .14em; text-transform: uppercase; margin-bottom: .6em; }
.sl-step-title { margin: 0 0 .6em; color: #1a1a1a; font-size: 1.75em; font-weight: 500; line-height: 1.2; }
.sl-step-card p { margin: 0; color: #1a1a1acc; font-size: 1.1em; line-height: 1.6; }

/* Zertifikats-Karussell */
.sl-certs { padding-bottom: 7em; overflow: hidden; }
.sl-marquee { --gap: 1.5em; overflow: hidden; padding: 1.5em 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.sl-marquee-track { display: flex; gap: var(--gap); width: max-content; animation: sl-marquee 55s linear infinite; }
.sl-marquee.is-reverse .sl-marquee-track { animation-direction: reverse; animation-duration: 45s; }
.sl-marquee:hover .sl-marquee-track { animation-play-state: paused; }
.sl-marquee-group { display: flex; gap: var(--gap); }
@keyframes sl-marquee { from { transform: translateX(0); } to { transform: translateX(calc(-50% - var(--gap) / 2)); } }
.sl-badge { flex: none; width: 15em; padding: 1.75em 1.25em 1.5em; border-radius: 1.25em; display: flex; flex-direction: column; align-items: center; gap: .5em; text-align: center;
  background: linear-gradient(160deg, #ffffff14, #ffffff05); border: 1px solid #ffffff17; transition: transform .5s var(--ease-out), border-color .4s, background-color .4s; }
.sl-badge img { width: 9.5em; height: 9.5em; object-fit: contain; margin-bottom: .75em; filter: drop-shadow(0 14px 22px #0007); transition: transform .6s var(--ease-out); }
.sl-badge:hover { transform: translateY(-8px); border-color: #8d85f466; }
.sl-badge:hover img { transform: scale(1.08) rotate(-3deg); }
.sl-badge-name { color: #fff; font-size: 1em; font-weight: 500; line-height: 1.3; }
.sl-badge-level { color: #a39df6; font-size: .8em; letter-spacing: .12em; text-transform: uppercase; }

/* Warum dieser Blog */
.sl-why { max-width: 60em; display: flex; flex-direction: column; gap: 2em; }
.sl-why-quote { margin: 0; color: #1a1a1a; font-size: 3em; line-height: 1.25; font-weight: 500; letter-spacing: -.01em; }
.sl-why-quote span { background: linear-gradient(90deg, #a39df6, #7970f2 0%, #5044ee 102%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.sl-why-text { margin: 0; color: #1a1a1acc; font-size: 1.3em; line-height: 1.6; max-width: 42em; }

/* Abseits vom Bildschirm */
.sl-life-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 2.5em; align-items: start; }
.sl-life-card.sl-life-sport { margin-top: 7em; }
.sl-life-card { margin: 0; display: flex; flex-direction: column; gap: 1.75em; }
.sl-life-img { position: relative; border-radius: 1.5em; overflow: hidden; transform-style: preserve-3d; will-change: transform; transition: transform .6s var(--ease-out); box-shadow: 0 40px 80px -40px #000; }
.sl-life-dog .sl-life-img { aspect-ratio: 4 / 5; }
.sl-life-sport .sl-life-img { aspect-ratio: 16 / 10; }
.sl-life-img img { position: absolute; left: 0; top: -7.5%; width: 100%; height: 115%; max-width: none; object-fit: cover; display: block; transform: translateY(var(--sl-par, 0)); transition: transform .2s linear; }
.sl-life-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, #0f0e17aa); pointer-events: none; }
.sl-life-card figcaption { display: flex; flex-direction: column; align-items: flex-start; gap: .6em; max-width: 30em; text-align: left; }
.sl-life-tag { align-self: flex-start; border: 1px solid #ffffff59; border-radius: .5em; padding: .45em .7em; font-size: .8em; letter-spacing: .12em; text-transform: uppercase; color: #fff; }
.sl-life-card h3 { margin: .2em 0 0; color: #f0efe8; font-size: 2em; font-weight: 500; }
.sl-life-card p { margin: 0; color: #ffffffb3; font-size: 1.15em; line-height: 1.6; }

/* Disclaimer */
.sl-disclaimer-section { padding: 6em 0; }
.sl-disclaimer { display: flex; align-items: flex-start; gap: 1.25em; max-width: 52em; margin: 0 auto; padding: 1.75em 2em; border-radius: 1.25em; background: #fff7f4; border: 1px solid #f6d3c8; }
.sl-disclaimer-icon { flex: none; font-size: 1.6em; line-height: 1.2; }
.sl-disclaimer p { margin: 0; color: #1a1a1acc; font-size: 1.1em; line-height: 1.6; }
.sl-disclaimer strong { color: #1a1a1a; font-weight: 600; }

/* Animation beim Scrollen */
html.sl-js [data-am] { opacity: 0; transform: translate3d(0, 2.5em, 0); transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out); transition-delay: var(--am-d, 0ms); }
html.sl-js [data-am].is-in { opacity: 1; transform: none; }
html.sl-js .sl-about-portrait[data-am] { transform: translate3d(0, 2.5em, 0) scale(.94); }
html.sl-js .sl-about-portrait[data-am].is-in { transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.sl-js [data-am] { opacity: 1; transform: none; transition: none; }
  .sl-marquee-track, .sl-float-badge, .sl-portrait-frame::before { animation: none; }
}

@media screen and (max-width: 991px) {
  .sl-about-hero { padding: 9em 0 5em; }
  .sl-about-hero-grid { grid-template-columns: 1fr; gap: 4em; }
  .sl-about-h1 { font-size: 4em; }
  .sl-about-portrait { max-width: 24em; }
  .sl-about-h2 { font-size: 2.8em; }
  .sl-why-quote { font-size: 2.2em; }
  .sl-life-grid { grid-template-columns: 1fr 1fr; }
  .sl-life-card.sl-life-sport { margin-top: 4em; }
  .sl-about-section { padding: 6.5em 0; }
}
@media screen and (max-width: 767px) {
  .sl-about-h1 { font-size: 3em; }
  .sl-about-lead { font-size: 1.15em; }
  .sl-about-h2 { font-size: 2.2em; }
  .sl-why-quote { font-size: 1.7em; }
  .sl-why-text { font-size: 1.1em; }
  .sl-life-grid { grid-template-columns: 1fr; gap: 4em; }
  .sl-life-card.sl-life-sport { margin-top: 0; }
  .sl-step { grid-template-columns: 3em 1fr; gap: 1.25em; }
  .sl-step-dot { width: 3em; height: 3em; border-radius: .9em; font-size: .9em; }
  .sl-timeline::before, .sl-timeline::after { left: 1.5em; }
  .sl-step-card { padding: 1.5em; }
  .sl-step-title { font-size: 1.4em; }
  .sl-badge { width: 12em; }
  .sl-badge img { width: 7.5em; height: 7.5em; }
  .sl-float-1 { right: -.5em; width: 5.5em; }
  .sl-float-2 { left: -.75em; width: 5em; }
  .sl-float-3 { width: 4.5em; }
  .sl-about-section { padding: 5em 0; }
  .sl-disclaimer { padding: 1.25em 1.25em; }
}