/* =====================================================================
   Seite „Über mich“ – im wulut-Stil (Rot, Anthrazit, Sand), animiert
   ===================================================================== */
.ab { --ab-red: #D63A22; --ab-red2: #FF7A57; --ab-ink: #14171A; }
/* ---------- Hero */
.ab-hero { position: relative; overflow: hidden; background: #111315; color: #fff; padding: 70px 0 90px; isolation: isolate; }
.ab-glow { position: absolute; z-index: -1; width: 900px; height: 900px; right: -260px; top: -320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(214,58,34,.55), rgba(214,58,34,.12) 45%, transparent 68%); animation: ab-breathe 9s ease-in-out infinite alternate; }
@keyframes ab-breathe { to { transform: translate(-60px, 40px) scale(1.08); } }
.ab-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .06; pointer-events: none;
  background-image: radial-gradient(circle, #fff 1px, transparent 1.2px); background-size: 26px 26px; }
.ab-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: center; }
.ab-pill { display: inline-flex; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); font-weight: 700; font-size: 14px; color: #FFD6CC; }
.ab-hero h1 { font-family: var(--display); font-weight: 800; font-size: clamp(48px, 7vw, 96px); line-height: .95; letter-spacing: -.045em; margin: 18px 0 18px; color: #fff; }
.ab-name { position: relative; display: inline-block; color: #fff; }
.ab-name svg { position: absolute; left: 0; right: 0; bottom: -.12em; width: 100%; height: .28em; overflow: visible; }
.ab-name path { fill: none; stroke: var(--ab-red2); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 340; stroke-dashoffset: 340; animation: ab-draw 1.1s cubic-bezier(.6,.1,.3,1) .9s forwards; }
@keyframes ab-draw { to { stroke-dashoffset: 0; } }
.ab-wave { display: inline-block; transform-origin: 70% 75%; animation: ab-wave 2.4s ease-in-out 1.6s 2; }
@keyframes ab-wave { 0%, 60%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(16deg); } 20%, 40% { transform: rotate(-9deg); } }
.ab-headline { font-size: clamp(20px, 2.1vw, 26px); line-height: 1.4; color: #E6E8EA; max-width: 30ch; margin: 0 0 22px; font-weight: 500; }
.ab-sign { display: flex; flex-direction: column; margin: 0 0 26px; } .ab-sign b { font-size: 17px; } .ab-sign span { color: #A9AFB5; font-size: 15px; }
.ab-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ab-ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.3); }
.ab-ghost:hover { color: #fff; border-color: #fff; }
[data-ab-in] { opacity: 0; transform: translateY(16px); animation: ab-in .7s cubic-bezier(.2,.9,.3,1.1) forwards; animation-delay: calc(.12s + var(--d) * .12s); }
@keyframes ab-in { to { opacity: 1; transform: none; } }
/* Foto-Bühne */
.ab-stage { position: relative; height: 560px; display: flex; align-items: flex-end; justify-content: center; margin-bottom: -90px; }
.ab-blob { position: absolute; width: 400px; height: 400px; bottom: 40px; background: linear-gradient(135deg, var(--ab-red), var(--ab-red2) 60%, #FFB199);
  border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; animation: ab-morph 12s ease-in-out infinite, ab-in .9s ease .2s both; box-shadow: 0 40px 100px rgba(214,58,34,.35); }
@keyframes ab-morph { 0%, 100% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; } 33% { border-radius: 63% 37% 45% 55% / 55% 38% 62% 45%; } 66% { border-radius: 38% 62% 36% 64% / 62% 55% 45% 38%; } }
.ab-ring { position: absolute; width: 500px; height: 500px; bottom: -10px; border-radius: 50%; border: 1.5px dashed rgba(255,255,255,.18); animation: ab-spin 50s linear infinite; }
@keyframes ab-spin { to { transform: rotate(360deg); } }
.ab-photo { position: relative; z-index: 2; width: auto; height: 540px; max-width: none; filter: drop-shadow(0 30px 40px rgba(0,0,0,.45)); transition: transform .4s ease-out; animation: ab-rise 1s cubic-bezier(.2,.9,.3,1.05) .35s both; }
@keyframes ab-rise { from { opacity: 0; transform: translateY(40px) scale(.96); } }
.ab-sticker { position: absolute; z-index: 3; width: 62px; height: 62px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; font-size: 32px;
  box-shadow: 0 14px 30px rgba(0,0,0,.35); animation: ab-float 6s ease-in-out infinite, ab-in .6s ease both; }
.ab-sticker.s1 { left: 6%; top: 18%; animation-delay: 0s, .9s; } .ab-sticker.s2 { right: 4%; top: 34%; animation-delay: -2s, 1.05s; width: 54px; height: 54px; font-size: 28px; }
.ab-sticker.s3 { left: 14%; bottom: 14%; animation-delay: -4s, 1.2s; width: 50px; height: 50px; font-size: 26px; }
@keyframes ab-float { 50% { translate: 0 -12px; } }
.ab-card { position: absolute; z-index: 3; padding: 10px 14px; border-radius: 16px; background: rgba(255,255,255,.95); color: var(--ab-ink); font-size: 14px; font-weight: 700; box-shadow: 0 16px 34px rgba(0,0,0,.35); animation: ab-in .7s ease both, ab-float 7s ease-in-out infinite; }
.ab-card b { color: var(--ab-red); font-size: 18px; margin-right: 4px; }
.ab-card.c1 { right: 0; bottom: 30%; animation-delay: 1.3s, -1s; } .ab-card.c2 { left: 0; top: 48%; animation-delay: 1.45s, -3s; max-width: 190px; }
.ab-scroll { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); width: 26px; height: 42px; border-radius: 14px; border: 2px solid rgba(255,255,255,.35); }
.ab-scroll span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: #fff; animation: ab-scrolldot 1.8s ease-in-out infinite; }
@keyframes ab-scrolldot { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }
/* ---------- Scroll-Animationen */
[data-ab-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.9,.3,1.05); }
[data-ab-reveal].in { opacity: 1; transform: none; }
/* ---------- Geschichte */
.ab-story { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 48px; padding-top: 96px; padding-bottom: 40px; }
.ab-story-head { position: sticky; top: 110px; align-self: start; }
.ab-kicker { color: var(--ab-red); font-weight: 800; font-size: 15px; }
.ab-story h2, .ab-values h2, .ab-time h2 { font-family: var(--display); font-weight: 800; font-size: clamp(34px, 4.4vw, 56px); letter-spacing: -.035em; line-height: 1; margin: 10px 0 0; }
.ab-story-text p { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.65; margin: 0 0 24px; color: var(--ink); }
.ab-story-text p:first-child::first-letter { float: left; font-family: var(--display); font-weight: 800; font-size: 4.2em; line-height: .8; margin: 6px 12px 0 0; color: var(--ab-red); }
/* ---------- Zitat */
.ab-quote { margin: 40px 0; padding: 90px 0; background: var(--ab-red); color: #fff; position: relative; overflow: hidden; }
.ab-quote::before { content: "“"; position: absolute; left: 4%; top: -60px; font: 800 340px/1 var(--display); color: rgba(255,255,255,.12); }
.ab-quote blockquote { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(30px, 4.6vw, 64px); line-height: 1.08; letter-spacing: -.03em; max-width: 22ch; position: relative; }
.ab-quote blockquote .w { display: inline-block; opacity: .15; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease; }
.ab-quote blockquote .w.on { opacity: 1; transform: none; }
.ab-quote-by { margin: 22px 0 0; font-weight: 700; color: #FFE3DB; font-size: 18px; }
/* ---------- Zahlen */
.ab-numbers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding-top: 40px; padding-bottom: 40px; }
.ab-num { padding: 26px 22px; border-radius: 26px; background: var(--white); border: 1.5px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.ab-num b { font-family: var(--display); font-weight: 800; font-size: clamp(36px, 4vw, 52px); letter-spacing: -.03em; line-height: 1; color: var(--ab-red); font-variant-numeric: tabular-nums; }
.ab-num > span { color: var(--muted); font-size: 15px; } .ab-num b span { font: inherit; color: inherit; }
.ab-numbers .ab-num:nth-child(2) { transition-delay: .08s; } .ab-numbers .ab-num:nth-child(3) { transition-delay: .16s; } .ab-numbers .ab-num:nth-child(4) { transition-delay: .24s; }
/* ---------- Werte */
.ab-values { padding-top: 56px; padding-bottom: 20px; }
.ab-values-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 28px; }
.ab-values article { padding: 28px; border-radius: 28px; background: var(--sand); transition: transform .3s cubic-bezier(.2,.9,.3,1.2), box-shadow .3s; transform-style: preserve-3d; }
.ab-values article:nth-child(2) { background: #FDE6E1; } .ab-values article:nth-child(3) { background: #EAF3EE; }
:root[data-theme="dark"] .ab-values article { background: rgba(255,255,255,.06) !important; }
.ab-values article:hover { box-shadow: 0 24px 50px rgba(20,23,26,.12); }
.ab-values article > span { font-size: 40px; display: inline-block; transition: transform .3s; } .ab-values article:hover > span { transform: scale(1.15) rotate(-8deg); }
.ab-values h3 { font-family: var(--display); font-weight: 800; font-size: 28px; letter-spacing: -.02em; margin: 14px 0 8px; }
.ab-values p { margin: 0; color: var(--muted); font-size: 16.5px; line-height: 1.55; }
/* ---------- Meilensteine */
.ab-time { padding-top: 56px; padding-bottom: 10px; }
.ab-timeline { list-style: none; margin: 30px 0 0; padding: 0 0 0 28px; position: relative; }
.ab-timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--ab-red), var(--ab-red2), transparent); }
.ab-timeline li { position: relative; padding: 0 0 28px 18px; }
.ab-dot { position: absolute; left: -28px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--ab-red); box-shadow: 0 0 0 5px rgba(214,58,34,.18); }
.ab-timeline time { font-weight: 800; color: var(--ab-red); } .ab-timeline p { margin: 4px 0 0; font-size: 17px; }
/* ---------- Kontakt */
.ab-cta { padding-top: 56px; padding-bottom: 90px; }
.ab-cta-card { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; padding: 28px 34px 0 28px; border-radius: 32px; background: #14171A; color: #fff; overflow: hidden; position: relative; }
.ab-cta-card::before { content: ""; position: absolute; width: 420px; height: 420px; right: -140px; top: -180px; border-radius: 50%; background: radial-gradient(circle, rgba(214,58,34,.5), transparent 65%); }
.ab-cta-card img { align-self: end; width: 150px; height: auto; position: relative; }
.ab-cta-card > div { position: relative; padding-bottom: 28px; }
.ab-cta-card h2 { font-family: var(--display); font-weight: 800; font-size: clamp(30px, 3.6vw, 46px); letter-spacing: -.03em; margin: 0 0 10px; color: #fff; }
.ab-cta-card p { color: #C9CDD2; margin: 0 0 20px; max-width: 52ch; } .ab-cta-card p a { color: #fff; }
.ab-cta-card .btn:not(.btn-primary) { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.2); }
/* Link auf der Startseite */
.founder-more { display: inline-block; margin-top: 10px; font-weight: 800; color: #D63A22; text-decoration: underline; text-underline-offset: 3px; }
/* ---------- Handy */
@media (max-width: 900px) {
  .ab-hero { padding: 36px 0 70px; }
  .ab-hero-grid { grid-template-columns: 1fr; gap: 10px; }
  .ab-stage { height: 430px; margin-bottom: -70px; } .ab-photo { height: 420px; } .ab-blob { width: 300px; height: 300px; bottom: 30px; } .ab-ring { width: 370px; height: 370px; }
  .ab-card.c2 { max-width: 150px; font-size: 13px; }
  .ab-story { grid-template-columns: 1fr; gap: 18px; padding-top: 64px; } .ab-story-head { position: static; }
  .ab-numbers { grid-template-columns: 1fr 1fr; } .ab-values-grid { grid-template-columns: 1fr; }
  .ab-quote { padding: 64px 0; }
  .ab-cta-card { grid-template-columns: 1fr; padding: 26px 22px 0; } .ab-cta-card img { order: 2; justify-self: center; width: 130px; } .ab-cta-card > div { padding-bottom: 6px; }
  .ab-scroll { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ab *, .ab *::before, .ab *::after { animation: none !important; transition: none !important; }
  [data-ab-in], [data-ab-reveal] { opacity: 1 !important; transform: none !important; }
  .ab-name path { stroke-dashoffset: 0; } .ab-quote blockquote .w { opacity: 1; transform: none; }
}