/* orcapilot.de/ueber-uns: who we are, our partners and the team. Bar, sections, the
   venn of research and practice, the closing and the footer come from /styles.css;
   this file holds what only this page has. The whole page lies in the deep, in the one
   colour every page but the start page has (body:not(.home) in styles.css): no ice,
   no dive, no gradients. */

/* ---- 1 · head: one line about us and the venn under it. As wide as the window, like the
   sections, so the circles gliding in are cut at its edge and never widen the page ---- */
.ueber-kopf { width: calc(100% + 28px); margin: 0 -14px; overflow-x: clip; }
.ueber-kopf-innen {
  max-width: 1120px;
  margin: 0 auto;
  padding: clamp(72px, 11vh, 136px) 28px clamp(48px, 7vh, 96px);
  text-align: center;
}
.ueber-titel {
  max-width: 900px;
  margin: 0 auto;
  font-size: clamp(2.05rem, 1.1rem + 3.2vw, 3.7rem);
  font-weight: 600;
  line-height: 1.07;
  letter-spacing: -0.035em;
  text-wrap: balance;
  color: #ffffff;
}
.ueber-lead { margin: 1.2rem 0 0; font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.3rem); line-height: 1.5; color: rgba(255, 255, 255, 0.8); }

/* ---- 2 · team: the paragraphs on the left; on the right our two offices under a plain
   heading, each with a building in a ringed circle, the badge of the steps on the
   contact page ---- */
.ueber-standorte h3 { margin: 0; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.3; }
.standorte { display: grid; gap: 14px; margin: 1.2rem 0 0; padding: 0; list-style: none; }
.standorte li { display: flex; align-items: center; gap: 14px; font-size: 1.05rem; font-weight: 500; color: #ffffff; }
.standort-zeichen {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(165, 216, 230, 0.08);
  border: 1px solid rgba(165, 216, 230, 0.3);
  color: var(--accent);
}
.standort-zeichen svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---- 3 · partners: the logos drift past in white and come forward under the mouse ---- */
.section .partner-titel { text-align: center; text-wrap: balance; } /* beats the pretty wrap of .section h2 */
.laufband { margin-top: clamp(2rem, 4.5vw, 3.2rem); }
.laufband-fenster { /* the band fades in and out at both ends */
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
/* Without JavaScript and with reduced motion: one row, centred */
.laufband-spur {
  --abstand: clamp(56px, 7vw, 96px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 24px var(--abstand);
  padding: 12px 0;
}
/* Running: app.js has repeated the logos, every logo carries its space behind it, so
   moving the band by half its length starts it over without a seam */
.laufband.is-laufend .laufband-spur {
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 0;
  width: max-content;
  animation: laufband var(--dauer, 40s) linear infinite;
}
.laufband.is-laufend .laufband-spur li { margin-right: var(--abstand); }
@keyframes laufband { to { transform: translateX(-50%); } }
.laufband.is-laufend .laufband-fenster:hover .laufband-spur,
.laufband.is-laufend .laufband-fenster:focus-within .laufband-spur,
.laufband.is-angehalten .laufband-spur { animation-play-state: paused; }

/* The originals are dark on light and would vanish in the deep, so all of them in white.
   Under the mouse a logo takes its own colours, on the light ground they were made for:
   a card fades in behind it, wider than the logo, never as wide as the space to the next. */
.partner-logo {
  display: block;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.55;
  transition: filter 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
}
.laufband-spur li { position: relative; isolation: isolate; }
.laufband-spur li::before {
  content: '';
  position: absolute;
  inset: -10px -18px;
  z-index: -1;
  border-radius: 14px;
  background: #F4F9FB;
  opacity: 0;
  transition: opacity 0.3s var(--ease-out);
}
.laufband-spur li:is(:hover, :focus-within)::before { opacity: 1; }
.laufband-spur li:is(:hover, :focus-within) .partner-logo { filter: none; opacity: 1; }
/* Equal weight for unequal shapes: the wider the logo, the lower it sits */
.partner-logo--hessian { height: 34px; }
.partner-logo--tq { height: 26px; }
.partner-logo--rwth { height: 46px; }
@media (max-width: 640px) {
  .partner-logo--hessian { height: 28px; }
  .partner-logo--tq { height: 21px; }
  .partner-logo--rwth { height: 38px; }
}

/* The pause button (anything that moves by itself for longer than five seconds must be
   possible to stop); app.js shows it once the band runs */
.laufband-pause {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 14px 0 0 auto;
  padding: 0;
  border: 1px solid rgba(165, 216, 230, 0.25);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1), color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}
.laufband-pause[hidden] { display: none; }
.laufband-pause:hover { background: rgba(255, 255, 255, 0.1); color: #ffffff; }
.laufband-pause:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.laufband-pause svg { width: 14px; height: 14px; fill: currentColor; }
.laufband-pause .ic-weiter, .laufband.is-angehalten .laufband-pause .ic-pause { display: none; }
.laufband.is-angehalten .laufband-pause .ic-weiter { display: block; }

@media (prefers-reduced-motion: reduce) {
  .partner-logo, .laufband-spur li::before, .laufband-pause { transition: none; }
}