/* T17: Hero-Status, sieben normale Zielbild-Karten und Scroll-Linie. */
#hero .hero-inner > .eyebrow {
  font-size: 13px;
  padding: 11px 20px;
  /* Das zusätzliche Innenpolster verändert die Position der Headline nicht. */
  margin-block: -3.5px 0;
}
.hero-status-dot {
  position: relative; flex: 0 0 7px; width: 7px; height: 7px;
  border-radius: 50%; background: #B99A7B;
}
.hero-status-dot::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 0 0 9px rgba(185,154,123,.24);
  animation: t17-status-pulse 2.4s ease-out infinite;
}
@keyframes t17-status-pulse {
  from { transform: scale(0); opacity: .65; }
  to { transform: scale(1); opacity: 0; }
}
#zielbild { position: relative; overflow: visible; }
#zielbild .vision-list {
  display: grid; gap: 24px; position: relative;
  width: min(950px, calc(100% - 120px)); margin: 50px auto 0;
}
#zielbild .vision-benefit {
  position: relative; inset: auto; min-height: 290px; padding: 32px 45px;
  transform: none; filter: none; opacity: 1; will-change: auto;
}
#zielbild .vision-art img { width: 200px; height: 200px; mix-blend-mode: normal; filter: none; }
#zielbild .vision-number { transition: color .3s; }
#zielbild .is-reached .vision-number { color: #B99A7B; }
#zielbild .vision-solution { background: #FFFFFF; border: 1px solid #B99A7B; isolation: isolate; }
#zielbild .vision-solution::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  box-shadow: 0 24px 70px rgba(185,154,123,.35), 0 0 0 1px #B99A7B;
  opacity: .4; transition: opacity .6s;
}
#zielbild .vision-solution.is-reached::after { opacity: 1; }
#zielbild .vision-solution h3 { white-space: nowrap; }
.vision-solution h3 small { font: italic 400 .45em/1 var(--serif); color: #9a7c5d; margin-left: .3em; }
#zielbild .vision-see-also { font: italic 400 15px/1.8 var(--serif); color: #9a7c5d; margin-top: 12px; }
.vision-timeline {
  position: absolute; left: calc(50% - min(475px, (100% - 120px) / 2) - 40px);
  top: var(--vision-line-top, 140px); height: var(--vision-line-height, 0px);
  width: 1px; background: #B99A7B33; pointer-events: none;
}
.vision-timeline-fill { position: absolute; inset: 0 auto 0 -.5px; width: 2px; background: #B99A7B; transform: scaleY(var(--vision-progress, 0)); transform-origin: top; }
.vision-timeline-point { position: absolute; top: 0; left: -4px; width: 9px; height: 9px; border-radius: 50%; background: #B99A7B; box-shadow: 0 0 15px 4px #B99A7B55; transform: translateY(calc(var(--vision-line-height, 0px) * var(--vision-progress, 0) - 4.5px)); }
.voice-card { min-height: 449px; }
.voice-card:nth-child(2) { min-height: 434px; }
.voice-content .voice-role { margin-bottom: 16px; }
.voice-content .voice-takeaway { font: 700 22px/1.25 var(--serif); color: #141414; margin: 0 0 10px; }
.voice-content blockquote { font-size: 14px; line-height: 1.7; }
/* Die Personen behalten ihren bisherigen Bildanker auch nach dem Inhaltstausch. */
.voice-card .voice-person-image--nico { left: 52%; }
.voice-card .voice-person-image--jan { left: 48%; }
@media (max-width: 1050px) and (min-width: 761px) {
  #zielbild .vision-benefit { padding-inline: 33px; }
}
@media (max-width: 760px) {
  #hero .hero-inner > .eyebrow { font-size: 10.5px; line-height: 15px; width: max-content; max-width: calc(100vw - 4px); padding: 11px 11px; gap: 7px; margin-block: -4px 0; }
  .hero-status-dot { flex-basis: 6px; width: 6px; height: 6px; }
  #zielbild .vision-list { width: calc(100% - 58px); margin: 20px 22px 0 36px; gap: 18px; }
  #zielbild .vision-benefit { min-height: 0; padding: 19px 25px 22px; }
  #zielbild .vision-art { height: 139px; margin-bottom: 10px; }
  #zielbild .vision-art img { width: 133px; height: 133px; }
  #zielbild .vision-timeline { left: 14px; }
  #zielbild .vision-solution h3 { font-size: clamp(26px, 7.5vw, 31px); letter-spacing: -.5px; }
  .voice-card { min-height: 887px; }
  .voice-card:nth-child(2) { min-height: 859px; }
  .voice-content .voice-takeaway { font-size: 19px; }
  .voice-content blockquote { font-size: 12.5px; }
}
@media (max-width: 360px) {
  .voice-card { min-height: 915px; }
  #zielbild .vision-benefit { padding: 17px 22px 19px; }
  #zielbild .vision-art { height: 120px; margin-bottom: 7px; }
  #zielbild .vision-art img { width: 116px; height: 116px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-status-dot::after { animation: none; display: none; }
  #zielbild .vision-timeline-fill { transform: scaleY(1); }
  #zielbild .vision-timeline-point { display: none; }
  #zielbild .vision-number, #zielbild .is-reached .vision-number { color: #9a7c5d; transition: none; }
  #zielbild .vision-solution::after { opacity: 1; transition: none; }
}

/* Claude 10.10.: Margen-Maschinen bricht nicht mehr um (nowrap im HTML); bei sehr schmalen Handys Ueberschrift etwas kleiner */
@media(max-width:374px){#ueber-mich .about-heading > h2#about-title{font-size:44px}}