/* ==========================================================================
   Über uns – seitenspezifische Styles (wird vor style.css geladen)
   ========================================================================== */

/* Hero: hell, flach, Headline im Bild */
.ab-hero-media { position: relative; background: #E9E8E4; }
.ab-hero-img { display: block; width: 100%; height: clamp(320px, 34vw, 520px); object-fit: cover; object-position: 85% 20%; }
.ab-hero-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; }
.ab-hero-overlay .breadcrumb { margin-bottom: 1.2rem; }
.ab-hero .about-headline { font-size: clamp(2.2rem, 3.6vw, 3.3rem); margin: 0.5rem 0 0; }
@media (max-width: 700px) {
  .ab-hero-img { height: 64vw; object-position: 100% 20%; }
  .ab-hero-overlay { position: static; padding-top: 1.6rem; }
}

/* Call-to-Action innerhalb der Seite */
.ab-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.1rem 2rem; margin-top: clamp(2.4rem, 5vw, 3.4rem); padding: clamp(1.3rem, 3vw, 1.7rem) clamp(1.3rem, 3.5vw, 2.2rem); background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--copper); border-radius: var(--radius-lg); }
.ab-cta p { margin: 0; }
.ab-cta-title { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.1rem, 2vw, 1.3rem); line-height: 1.3; color: var(--ink); }
.ab-cta-text { font-size: 0.97rem; line-height: 1.55; color: var(--text); margin-top: 0.3rem !important; max-width: 40rem; }
.ab-cta .btn { flex: none; }
.ab-cta-link { text-align: center; margin-top: clamp(2.2rem, 4.5vw, 3rem); }
@media (max-width: 560px) { .ab-cta .btn { width: 100%; justify-content: center; } }

/* Hervorhebung im Fließtext (Stationen) */
.ab-hl { background: linear-gradient(transparent 60%, rgba(180, 105, 58, 0.22) 60%); color: var(--ink); font-weight: 600; padding: 0 0.08em; }

/* Unsere Geschichte – über die volle Breite */
.ab-story-intro { font-family: var(--font-display); font-weight: 300; font-size: clamp(1.45rem, 2.6vw, 2.1rem); line-height: 1.4; color: var(--ink); letter-spacing: -0.01em; max-width: 62rem; margin: 1.4rem 0 0; }
.ab-story-head { margin-bottom: clamp(1.8rem, 3.5vw, 2.6rem); }
.ab-story-cols { columns: 2; column-gap: clamp(2rem, 5vw, 4.5rem); }
.ab-story-cols p { break-inside: avoid; font-size: 1.06rem; line-height: 1.75; color: var(--text); margin: 0 0 1.1rem; }
.ab-story-cols strong { color: var(--ink); }
@media (max-width: 800px) { .ab-story-cols { columns: 1; } }

/* Gründer – Fließtext mit Porträt, abwechselnd links/rechts */
.ab-person { display: grid; gap: 1.6rem clamp(2rem, 5vw, 4rem); align-items: start; }
.ab-person + .ab-person { margin-top: clamp(2.8rem, 6vw, 4.2rem); padding-top: clamp(2.8rem, 6vw, 4.2rem); border-top: 1px solid var(--border); }
@media (min-width: 860px) {
  .ab-person { grid-template-columns: 200px 1fr; }
  .ab-person--rev { grid-template-columns: 1fr 200px; }
  .ab-person--rev .ab-person-img { order: 2; }
}
.ab-person-img { width: 200px; max-width: 60vw; aspect-ratio: 1; border-radius: 50%; object-fit: cover; display: block; border: 4px solid var(--surface); box-shadow: 0 0 0 2px var(--copper); }
.ab-person-text .ab-person-role { font-family: var(--font-mono); font-size: 0.72rem; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; color: var(--copper); margin: 0; }
.ab-person h3 { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 2.6vw, 2.1rem); color: var(--ink); margin: 0.3rem 0 1rem; }
.ab-person-text p { font-size: 1.06rem; line-height: 1.8; color: var(--text); margin: 0 0 1rem; max-width: 50rem; }

/* Wie wir arbeiten – Zeitvorsprung als Wettlauf zweier Linien (nur SVG + CSS) */
.ab-race { --rc-pt: clamp(1.4rem, 4vw, 2.4rem); --rc-px: clamp(1.2rem, 4vw, 2.6rem); --rc-pb: clamp(1.2rem, 3vw, 1.8rem); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--rc-pt) var(--rc-px) var(--rc-pb); }
.rc-legend { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; font-size: 0.85rem; color: var(--text); }
.rc-key { display: inline-block; width: 22px; height: 3px; border-radius: 2px; margin-right: 0.5rem; vertical-align: middle; }
.rc-key--opt { background: var(--copper); height: 4px; }
.rc-key--std { background: var(--text-muted); }
.rc-chart { display: block; }
/* Achsentitel an den Achsenenden: y gedreht in Achsrichtung links neben der Achse, oben bündig mit der Achsenspitze; x über dem Achsenende */
.rc-ytitle { position: absolute; right: calc(97.62% + 8px); top: 7.33%; writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--font-display); font-weight: 600; font-size: clamp(0.74rem, 1.25vw, 0.86rem); color: var(--text-muted); white-space: nowrap; }
.rc-plot { position: relative; }
.rc-svg { display: block; width: 100%; height: auto; overflow: visible; }
.rc-axis line, .rc-axis polyline { fill: none; stroke: var(--border-strong); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rc-target { stroke: var(--ink); stroke-width: 2.5; stroke-dasharray: 10 6; stroke-linecap: butt; opacity: 0.8; }
.rc-std, .rc-opt { fill: none; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.rc-std { stroke: var(--text-muted); stroke-width: 3; }
.rc-opt { stroke: var(--copper); stroke-width: 4.5; }
.rc-drop { stroke-width: 1.5; stroke-dasharray: 2 5; opacity: 0; }
.rc-drop--opt { stroke: var(--copper); }
.rc-drop--std { stroke: var(--text-muted); }
.rc-gain { fill: var(--ink-panel); transform-box: fill-box; transform-origin: center; transform: translate(-130px, 0px) rotate(0deg) scale(0, 1); }
.rc-end { stroke: var(--surface); stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; }
.rc-end--opt { fill: var(--copper); }
.rc-end--std { fill: var(--text-muted); }
.rc-check { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.rc-pulse { fill: none; stroke: var(--copper); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.rc-tlabel { position: absolute; left: 3%; top: calc(23.33% + 6px); font-family: var(--font-display); font-weight: 600; font-size: clamp(0.75rem, 1.3vw, 0.88rem); color: var(--ink); opacity: 0.9; white-space: nowrap; }
.rc-tag { position: absolute; bottom: 81.5%; transform: translateX(-50%); font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; line-height: 1.2; text-align: center; white-space: nowrap; opacity: 0; }
.rc-tag--opt { left: 57.14%; color: var(--copper-deep); }
.rc-tag--std { left: 88.1%; color: var(--text-muted); }

/* Band: übernimmt den Zeitvorsprung-Balken und fährt als Signalband über das obere Achtel der Box (randlos) */
.rc-band { position: absolute; z-index: 2; left: 57.143%; top: 90.667%; width: 30.952%; height: 5.333%; display: grid; place-items: center; background: var(--ink-panel); border-radius: 3px; overflow: hidden; opacity: 0; pointer-events: none; }
.rc-btitle { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.05rem, 2.1vw, 1.45rem); letter-spacing: 0.01em; color: #fff; white-space: nowrap; opacity: 0; }

.rc-x { position: relative; min-height: 3.2rem; margin-top: 0; }
.rc-gain-label { position: absolute; left: 72.6%; top: 0; transform: translate(-50%, -4px); text-align: center; opacity: 0; }
.rc-gain-label strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(0.85rem, 1.8vw, 1.05rem); color: var(--ink); }
.rc-gain-label em { display: block; font-style: normal; font-size: clamp(0.66rem, 1.4vw, 0.82rem); color: var(--text-muted); white-space: nowrap; opacity: 0; }
.rc-xtitle { position: absolute; right: 3.57%; top: calc(93.33% + 6px); font-family: var(--font-display); font-weight: 600; font-size: clamp(0.74rem, 1.25vw, 0.86rem); color: var(--text-muted); white-space: nowrap; }
@media (min-width: 701px) { .rc-legend { display: none; } }
@media (max-width: 700px) {
  .rc-tag { display: none; }
  .rc-std { stroke-width: 6; } .rc-opt { stroke-width: 9; }
  .rc-end--opt, .rc-pulse { r: 18; } .rc-end--std { r: 15; }
  .rc-gain-label { left: auto; right: 0; transform: translate(0, 4px); text-align: right; }
  .rc-x { min-height: 3.6rem; margin-top: 1.5rem; }
  .rc-band { display: none; }
  /* Kleines Diagramm: y-Titel über die Achsenspitze, Übergabe-Label über die Ziellinie (sonst Kollision mit der Kurve) */
  .rc-legend { margin-bottom: 1.9rem; }
  .rc-ytitle { right: auto; left: 0; top: 0; writing-mode: horizontal-tb; transform: translateY(calc(-100% - 2px)); }
  .rc-tlabel { top: auto; bottom: calc(76.67% + 3px); }
}

.ab-race.is-visible .rc-opt { animation: rcOpt 18s linear infinite; }
.ab-race.is-visible .rc-std { animation: rcStd 18s linear infinite; }
.ab-race.is-visible .rc-target { animation: rcTarget 18s ease-in-out infinite; }
.ab-race.is-visible .rc-tlabel { animation: rcTLabel 18s ease-in-out infinite; }
.ab-race.is-visible .rc-end--opt { animation: rcEndOpt 18s ease-out infinite; }
.ab-race.is-visible .rc-check { animation: rcCheck 18s ease-out infinite; }
.ab-race.is-visible .rc-pulse { animation: rcPulse 18s ease-out infinite; }
.ab-race.is-visible .rc-tag--opt { animation: rcTagOpt 18s ease-in-out infinite; }
.ab-race.is-visible .rc-end--std { animation: rcEndStd 18s ease-out infinite; }
.ab-race.is-visible .rc-tag--std { animation: rcTagStd 18s ease-in-out infinite; }
.ab-race.is-visible .rc-drop { animation: rcDrop 18s ease-in-out infinite; }
.ab-race.is-visible .rc-gain { animation: rcGain 18s ease-in-out infinite; }
.ab-race.is-visible .rc-gain-label { animation: rcGainLabel 18s ease-in-out infinite; }
.ab-race.is-visible .rc-gain-label em { animation: rcCap 18s ease-in-out infinite; }
.ab-race.is-visible .rc-axis, .ab-race.is-visible .rc-ytitle, .ab-race.is-visible .rc-xtitle { animation: rcAxis 18s ease-in-out infinite; }
.ab-race.is-visible .rc-btitle { animation: rcBTitle 18s ease-in-out infinite; }
.ab-race.is-visible .rc-band { animation: rcBand 18s ease-in-out infinite; }
/* Diagramm (Linien, Ziellinie, Achsen) blendet vollständig aus, sobald der Balken losfährt (57 %) */
/* Ablauf Desktop (18 s, Endlosschleife)
   0–8,5 s   Wettlauf: Kupfer erreicht die Übergabe früher, Grau später, Balken „Ihr Zeitvorsprung“ wächst
   8–9,3 s   Diagramm aus, Balken fährt als Band über das obere Achtel der Box, „Ihr Vorteil daraus“ erscheint im Band
   10–15 s   die vier Vorteile erscheinen nacheinander → halten → ausblenden */
@keyframes rcOpt { 0% { stroke-dashoffset: 100; opacity: 1; } 11.11%, 44.33% { stroke-dashoffset: 0; opacity: 1; } 47.44%, 99% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 100; opacity: 0; } }
@keyframes rcStd { 0% { stroke-dashoffset: 100; opacity: 1; } 18.89%, 44.33% { stroke-dashoffset: 0; opacity: 1; } 47.44%, 99% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 100; opacity: 0; } }
@keyframes rcTarget { 0%, 44.33% { opacity: 0.8; } 47.44%, 100% { opacity: 0; } }
@keyframes rcAxis { 0% { opacity: 0; } 2.33%, 44.33% { opacity: 1; } 47.44%, 100% { opacity: 0; } }
@keyframes rcTLabel { 0%, 42.78% { opacity: 0.9; } 45.11%, 100% { opacity: 0; } }
@keyframes rcEndOpt { 0%, 11.11% { opacity: 0; transform: scale(0.3); } 12.44% { opacity: 1; transform: scale(1.15); } 13.61%, 42.78% { opacity: 1; transform: scale(1); } 45.89%, 100% { opacity: 0; transform: scale(1); } }
@keyframes rcCheck { 0%, 12.44% { stroke-dashoffset: 100; opacity: 1; } 15.17%, 42.78% { stroke-dashoffset: 0; opacity: 1; } 45.89%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes rcPulse { 0%, 12.06% { opacity: 0; transform: scale(1); } 13.22% { opacity: 0.8; transform: scale(1); } 20.22% { opacity: 0; transform: scale(2.6); } 100% { opacity: 0; transform: scale(1); } }
@keyframes rcTagOpt { 0%, 12.06% { opacity: 0; } 15.17%, 42.78% { opacity: 1; } 45.89%, 100% { opacity: 0; } }
@keyframes rcEndStd { 0%, 18.89% { opacity: 0; transform: scale(0.3); } 20.44%, 42.78% { opacity: 1; transform: scale(1); } 45.89%, 100% { opacity: 0; transform: scale(1); } }
@keyframes rcTagStd { 0%, 19.83% { opacity: 0; } 22.56%, 42.78% { opacity: 1; } 45.89%, 100% { opacity: 0; } }
@keyframes rcDrop { 0%, 21.78% { opacity: 0; } 24.89%, 42.78% { opacity: 1; } 45.89%, 100% { opacity: 0; } }
@keyframes rcGainLabel { 0%, 31.11% { opacity: 0; } 34.22%, 42.78% { opacity: 1; } 45.11%, 100% { opacity: 0; } }
@keyframes rcCap { 0%, 35% { opacity: 0; } 38.11%, 42.78% { opacity: 1; } 45.11%, 100% { opacity: 0; } }
/* Balken: wächst auf der Zeitachse → fährt waagerecht und 2,5× dicker oben in die Mitte */
/* Balken: wächst auf der Zeitachse, übergibt bei 8 s an das Band */
@keyframes rcGain { 0%, 24.89% { transform: translate(-130px, 0px) rotate(0deg) scale(0, 1); opacity: 1; } 31.11%, 44.33% { transform: translate(0px, 0px) rotate(0deg) scale(1, 1); opacity: 1; } 44.56%, 99.72% { transform: translate(0px, 0px) rotate(0deg) scale(1, 1); opacity: 0; } 100% { transform: translate(-130px, 0px) rotate(0deg) scale(0, 1); opacity: 0; } }
@keyframes rcBTitle { 0%, 50.56% { opacity: 0; } 53.33%, 95.56% { opacity: 1; } 98.89%, 100% { opacity: 0; } }
@keyframes rcBand { 0%, 44.33% { opacity: 0; left: 57.143%; top: 90.667%; width: 30.952%; height: 5.333%; border-radius: 3px; } 44.44% { opacity: 1; left: 57.143%; top: 90.667%; width: 30.952%; height: 5.333%; border-radius: 3px; } 51.33%, 95.56% { opacity: 1; left: calc(-1 * var(--rc-px)); top: calc(-1 * var(--rc-pt)); width: calc(100% + 2 * var(--rc-px)); height: calc((var(--rc-pt) + 100% + 3.2rem + var(--rc-pb)) / 6.5); border-radius: 9px 9px 0 0; } 98.89%, 100% { opacity: 0; left: calc(-1 * var(--rc-px)); top: calc(-1 * var(--rc-pt)); width: calc(100% + 2 * var(--rc-px)); height: calc((var(--rc-pt) + 100% + 3.2rem + var(--rc-pb)) / 6.5); border-radius: 9px 9px 0 0; } }
@keyframes rfC1 { 0%, 55.56% { opacity: 0; transform: translateY(12px); } 60.56%, 95.56% { opacity: 1; transform: translateY(0); } 98.89%, 100% { opacity: 0; transform: translateY(0); } }
@keyframes rfC2 { 0%, 63.33% { opacity: 0; transform: translateY(12px); } 68.33%, 95.56% { opacity: 1; transform: translateY(0); } 98.89%, 100% { opacity: 0; transform: translateY(0); } }
@keyframes rfC3 { 0%, 71.11% { opacity: 0; transform: translateY(12px); } 76.11%, 95.56% { opacity: 1; transform: translateY(0); } 98.89%, 100% { opacity: 0; transform: translateY(0); } }
@keyframes rfC4 { 0%, 78.89% { opacity: 0; transform: translateY(12px); } 83.89%, 95.56% { opacity: 1; transform: translateY(0); } 98.89%, 100% { opacity: 0; transform: translateY(0); } }
/* Handy (14 s): Wettlauf und Balken bleiben stehen, Erklärung und Vorteile stehen unter dem Diagramm */
@keyframes rcOptM { 0% { stroke-dashoffset: 100; opacity: 1; } 14.29%, 94.29% { stroke-dashoffset: 0; opacity: 1; } 98.57% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 100; opacity: 0; } }
@keyframes rcStdM { 0% { stroke-dashoffset: 100; opacity: 1; } 24.29%, 94.29% { stroke-dashoffset: 0; opacity: 1; } 98.57% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 100; opacity: 0; } }
@keyframes rcTargetM { 0%, 94.29% { opacity: 0.8; } 98.57%, 100% { opacity: 0; } }
@keyframes rcTLabelM { 0%, 94.29% { opacity: 0.9; } 98.57%, 100% { opacity: 0; } }
@keyframes rcEndOptM { 0%, 14.29% { opacity: 0; transform: scale(0.3); } 16% { opacity: 1; transform: scale(1.15); } 17.5%, 94.29% { opacity: 1; transform: scale(1); } 98.57%, 100% { opacity: 0; transform: scale(1); } }
@keyframes rcCheckM { 0%, 16% { stroke-dashoffset: 100; opacity: 1; } 19.5%, 94.29% { stroke-dashoffset: 0; opacity: 1; } 98.57% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 100; opacity: 0; } }
@keyframes rcPulseM { 0%, 15.5% { opacity: 0; transform: scale(1); } 17% { opacity: 0.8; transform: scale(1); } 26% { opacity: 0; transform: scale(2.6); } 100% { opacity: 0; transform: scale(1); } }
@keyframes rcEndStdM { 0%, 24.29% { opacity: 0; transform: scale(0.3); } 26.29%, 94.29% { opacity: 1; transform: scale(1); } 98.57%, 100% { opacity: 0; transform: scale(1); } }
@keyframes rcDropM { 0%, 28% { opacity: 0; } 32%, 94.29% { opacity: 1; } 98.57%, 100% { opacity: 0; } }
@keyframes rcGainM { 0%, 32% { transform: translate(-130px, 0px) scale(0, 1); opacity: 1; } 40%, 94.29% { transform: translate(0px, 0px) scale(1, 1); opacity: 1; } 98.57% { transform: translate(0px, 0px) scale(1, 1); opacity: 0; } 100% { transform: translate(-130px, 0px) scale(0, 1); opacity: 0; } }
@keyframes rcGainLabelM { 0%, 40% { opacity: 0; } 44%, 94.29% { opacity: 1; } 98.57%, 100% { opacity: 0; } }
@keyframes rcCapM { 0%, 45% { opacity: 0; } 49%, 94.29% { opacity: 1; } 98.57%, 100% { opacity: 0; } }
/* Balken: wächst, fährt dann waagerecht und 2,5× dicker oben in die Mitte */

/* Handy: Diagramm ist zu flach für die Erklärung – Wettlauf und Balken bleiben stehen, Erklärung steht in der Liste darunter */
@media (max-width: 700px) {
  .ab-race.is-visible .rc-opt { animation: rcOptM 14s linear infinite; }
  .ab-race.is-visible .rc-std { animation: rcStdM 14s linear infinite; }
  .ab-race.is-visible .rc-target { animation: rcTargetM 14s ease-in-out infinite; }
  .ab-race.is-visible .rc-tlabel { animation: rcTLabelM 14s ease-in-out infinite; }
  .ab-race.is-visible .rc-end--opt { animation: rcEndOptM 14s ease-out infinite; }
  .ab-race.is-visible .rc-check { animation: rcCheckM 14s ease-out infinite; }
  .ab-race.is-visible .rc-pulse { animation: rcPulseM 14s ease-out infinite; }
  .ab-race.is-visible .rc-end--std { animation: rcEndStdM 14s ease-out infinite; }
  .ab-race.is-visible .rc-drop { animation: rcDropM 14s ease-in-out infinite; }
  .ab-race.is-visible .rc-gain { animation: rcGainM 14s ease-in-out infinite; }
  .ab-race.is-visible .rc-gain-label { animation: rcGainLabelM 14s ease-in-out infinite; }
  .ab-race.is-visible .rc-gain-label em { animation: rcCapM 14s ease-in-out infinite; }
  .ab-race.is-visible .rc-axis, .ab-race.is-visible .rc-ytitle, .ab-race.is-visible .rc-xtitle { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ab-race * { animation: none !important; }
  .rc-std, .rc-opt, .rc-check { stroke-dashoffset: 0; }
  .rc-end, .rc-tag, .rc-drop, .rc-gain-label, .rc-gain-label em { opacity: 1; }
  .rc-gain { transform: none; }
  .rc-band { display: none; }
}

/* Vorteile: vier große Einblendungen (2 × 2) unter dem Band */
.rf-grid { position: absolute; left: 7.14%; right: 7.14%; top: 16%; bottom: -10%; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; gap: clamp(0.6rem, 1.6vw, 1.2rem) clamp(1rem, 3vw, 2.4rem); align-content: space-evenly; align-items: start; pointer-events: none; }
.rf-card { display: grid; grid-template-columns: auto 1fr; column-gap: clamp(0.7rem, 1.4vw, 1rem); align-items: start; opacity: 0; }
.rf-icon { display: grid; place-items: center; width: clamp(2.4rem, 4.2vw, 3rem); height: clamp(2.4rem, 4.2vw, 3rem); border-radius: 50%; background: rgba(18, 21, 27, 0.08); color: var(--ink-panel); }
.rf-icon svg { width: 55%; height: 55%; }
.rf-card strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(1rem, 1.9vw, 1.32rem); line-height: 1.2; color: var(--ink); }
.rf-card span { display: block; font-size: clamp(0.78rem, 1.25vw, 0.96rem); line-height: 1.45; color: var(--text); margin-top: 0.25rem; }
.ab-race.is-visible .rf-c1 { animation: rfC1 18s ease-in-out infinite; }
.ab-race.is-visible .rf-c2 { animation: rfC2 18s ease-in-out infinite; }
.ab-race.is-visible .rf-c3 { animation: rfC3 18s ease-in-out infinite; }
.ab-race.is-visible .rf-c4 { animation: rfC4 18s ease-in-out infinite; }
/* Einblendungen bei 10,0 / 11,4 / 12,8 / 14,2 s, je 0,9 s weich von unten, halten bis 17,2 s */
@media (max-width: 700px) { .rf-grid { display: none; } }
@media (prefers-reduced-motion: reduce) { .rf-grid { display: none; } }

/* Kundenvorteil: statischer Kasten (Handy, reduzierte Bewegung) */
.rc-benefit-eyebrow { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--copper-light); }
.rc-benefit-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.05rem, 2.2vw, 1.5rem); line-height: 1.25; color: #fff; margin-top: 0.25rem !important; }
.rc-benefit-list li { display: grid; grid-template-columns: auto 1fr; column-gap: clamp(0.65rem, 1.3vw, 0.95rem); align-items: start; }
.rc-adv-icon { display: grid; place-items: center; width: clamp(2.1rem, 3.6vw, 2.7rem); height: clamp(2.1rem, 3.6vw, 2.7rem); border-radius: 50%; background: var(--copper); color: #fff; }
.rc-adv-icon svg { width: 52%; height: 52%; }
.rc-benefit-list strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: clamp(0.92rem, 1.6vw, 1.15rem); line-height: 1.25; color: #fff; }
.rc-benefit-list span { display: block; line-height: 1.45; color: rgba(255, 255, 255, 0.74); margin-top: 0.2rem; }
.rc-benefit { margin-top: clamp(1.8rem, 4vw, 2.6rem); padding: clamp(1.4rem, 4vw, 2rem) clamp(1.3rem, 4vw, 2rem); background: var(--ink-panel); border-radius: var(--radius-lg); color: #fff; }
.rc-benefit p { margin: 0; }
.rc-benefit-list { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 1.1rem 1.6rem; }
.rc-benefit-list span { font-size: 0.9rem; }
@media (min-width: 560px) { .rc-benefit-list { grid-template-columns: 1fr 1fr; } }
@media (min-width: 701px) and (prefers-reduced-motion: no-preference) { .rc-benefit { display: none; } }


/* Was für Ihr Projekt zählt – luftiges Editorial-Raster */
.ab-values { display: grid; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 960px) {
  .ab-values { grid-template-columns: 0.8fr 1.6fr; }
  .ab-values-head { position: sticky; top: 110px; align-self: start; }
}
.ab-values-head h2 { margin: 0.4rem 0 1rem; }
.ab-values-head p:not(.eyebrow) { color: var(--text); line-height: 1.7; margin: 0; }
.ab-values-list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.8rem, 3.5vw, 2.6rem) clamp(1.6rem, 4vw, 3rem); }
@media (min-width: 640px) { .ab-values-list { grid-template-columns: 1fr 1fr; } }
.ab-values-list li { padding-top: 1.1rem; border-top: 1px solid var(--border-strong); }
.ab-values-list svg { color: var(--copper); display: block; margin-bottom: 0.8rem; }
.ab-values-list strong { display: block; font-family: var(--font-display); font-weight: 500; font-size: 1.12rem; color: var(--ink); margin-bottom: 0.4rem; }
.ab-values-list span { color: var(--text); font-size: 0.97rem; line-height: 1.65; }

/* Projekte – ausführliche Karten */
.ab-projects { display: grid; gap: 1.4rem; margin-bottom: 2.4rem; }
@media (min-width: 1000px) { .ab-projects { grid-template-columns: repeat(3, 1fr); } }
.ab-proj { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.ab-proj:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(18, 21, 27, 0.12); }
.ab-proj-img { aspect-ratio: 4 / 3; overflow: hidden; }
.ab-proj-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.ab-proj:hover .ab-proj-img img { transform: scale(1.04); }
.ab-proj-body { padding: 1.4rem 1.5rem 1.6rem; }
.ab-proj-body h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.18rem; color: var(--ink); margin: 0 0 0.2rem; }
.ab-proj .ref-facts li { color: var(--copper-deep); border-color: rgba(180, 105, 58, 0.45); }
.ab-proj-body p { color: var(--text); font-size: 0.95rem; line-height: 1.62; margin: 0.4rem 0 0; }
@media (min-width: 600px) and (max-width: 999px) {
  .ab-proj { flex-direction: row; }
  .ab-proj-img { flex: 0 0 40%; aspect-ratio: auto; position: relative; min-height: 220px; }
  .ab-proj-img img { position: absolute; inset: 0; }
  .ab-proj-body { align-self: center; }
}

/* Unser Anspruch – Abschlusszitat */
.ab-claim .founder-quote { margin-inline: auto; }