/* ============================================================
   /forschung/ - am Original nachgemessen
   ============================================================
   (/opt/tooling/news1.mjs + /opt/tooling/fo1.mjs, Viewport 1440)

     Einleitung  810px breite Spalte, h1 bei y=197, 21px Abstand,
                 Absatz genau 3 Zeilen
     Reiter      Zeile 253..1188, 123px Abstand, je 69px hoch,
                 Innenabstand 23/47, Radius 18px, weiss;
                 der aktive traegt den Schatten 0 0 47px rgba(0,0,0,.23)
     Bildband    volle Breite, 470px hoch, beginnt bei y=540

   Vorher: Einleitung nur 558px breit (4 statt 3 Zeilen), Reiter als
   kompakte, mittige Gruppe mit 16px Abstand, Bildband 450px hoch ab y=443. */

.section--forschung-intro { padding-top: 123px; padding-bottom: 0; }
.section--forschung-intro > .container:first-child { max-width: 810px; padding: 0; }
.section--forschung-intro h1 { margin: 0 0 21px; }
.section--forschung-intro .section-intro {
  margin: 0; max-width: none;
  font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--color-text-muted);
}
/* Die Reiterzeile sitzt in einem eigenen Container ohne Seitenbegrenzung:
   ihre Breite ergibt sich aus den Reitern und dem 123px-Abstand (935px). */
.section--forschung-intro > .container:last-child { max-width: none; padding: 0; }

.tab-list {
  display: flex; justify-content: center; align-items: center;
  gap: 123px; padding: 74px 0; margin: 0; flex-wrap: wrap;
}
.tab-btn {
  font-family: inherit; font-size: var(--fs-body); line-height: var(--lh-body);
  /* Original: Tab-Beschriftung 15px/700 (nachgemessen auf /forschung/). */
  font-weight: var(--fw-bold);
  /* Original-Reiter sind 69px hoch INKLUSIVE 1px-Rahmen (Text @390 bei
     x=86 = 39 Listenrand + 1 Rahmen + 46 Polster) - mit content-box also
     22/46px Polster, nicht 23/47 (das ergab 71px und schob die ganze
     Kette darunter 2px nach unten). */
  padding: 22px 46px;
  display: inline-flex; align-items: center; border-radius: 18px;
  /* Hover-Sweep 2026-07 (am Original gemessen): inaktive Reiter stehen in
     Grau (#818181, bei uns der AA-taugliche Token) und dunkeln beim Hover
     auf #333 - Rahmen und Fond bleiben unveraendert. Der fruehere
     Rahmen-Hover war erfunden. */
  border: 1px solid var(--color-border); background: #fff; color: var(--color-text-muted);
  cursor: pointer; transition: box-shadow var(--duration-fast) var(--ease),
    color var(--duration-hover) var(--ease-smooth);
}
.tab-btn:not(.is-active):hover { color: var(--color-text); }
.tab-btn.is-active { font-weight: var(--fw-bold); color: var(--color-text); border-color: transparent; box-shadow: 0 0 47px rgba(0, 0, 0, .23); }

/* Bildband: 1440x470 im Original - feste Hoehe statt Seitenverhaeltnis. */
.tab-panel__bg { position: relative; width: 100%; height: 470px; overflow: hidden; background: var(--color-surface); }
.tab-panel__bg img { width: 100%; height: 100%; object-fit: cover; }
/* Projektblock am Original nachgemessen (fo-measure.mjs @1440,
   Vergleichslauf 2026-07-24): KEIN zentrierter Texttitel - links das
   Projektlogo (74px hoch, 5GNPR 122x74) bei x189, darunter (47px) der
   Fliesstext in der vollen 1062px-Spalte, darunter (23px) der
   Mehr-erfahren-Knopf, ebenfalls links. */
/* pb 123 statt 122: Inhaltsende -> Pfadleiste ist im Original @1440 123px
   (1702,4 -> 1825,4; Lauf 6 2026-07-30). */
.tab-panel__body { max-width: 1110px; margin: 0 auto; padding: 74px var(--container-pad) 123px; text-align: left; }
.tab-panel__title { margin: 0 0 47px; }
.tab-panel__title img { display: block; width: auto; height: 74px; }
.tab-panel .prose { max-width: none; margin: 0; text-align: left; }
.tab-panel .prose p { margin-bottom: 22.5px; }
.tab-panel .btn { margin-top: 0; }
/* Fliesstext im Original: rgb(129,129,129) - die AA-taugliche Variante
   davon ist --color-text-muted. --color-text-subtle (#333) ist im Original
   ausschliesslich die Farbe der FUSSZEILEN-Links. */
.tab-panel .prose p { color: var(--color-text-muted); }
/* Mehr-erfahren-Knopf am Original nachgemessen (fo-orig-tabs.json 2026-07-28):
   160x47 (inkl. 1px-Rahmen), Text 12px vom Rand, Pfeilabstand 12px,
   Beschriftung GRAU rgb(129,129,129) - nicht #333. Abstand zum Text
   darueber nur die 22,5px p-Marge (Original 23px), kein Extra-margin-top. */
.tab-panel .prose .btn {
  /* Lauf 6: Textende -> Knopf ist im Original 23px (2223,9 -> 2246,9 @390);
     die 22,5px p-Marge allein war 0,5 zu knapp. */
  margin-top: 0.5px;
  padding: 11px;
  gap: 12px;
  color: var(--color-text-muted);
}

@media (max-width: 809px) {
  /* Kopfabstand: Original setzt den Seitentitel bei 390/768 auf y=150 (bei uns
     mit 123px sonst y=197) - dieselbe -47px-Korrektur wie auf den
     Rechtstextseiten. */
  .section--forschung-intro { padding-top: 76px; }
  /* Bildband: Original @390/768 fest 420px hoch (cover), NICHT 16:9 (219px).
     Die fehlenden ~200px liessen das Bild und den ganzen Textteil darunter
     nach oben rutschen (Differenzband ueber dem Bild durchgehend rot). */
  .tab-panel__bg { height: 420px; }
  /* Original @390: die drei Reiter bleiben in EINER Zeile (69px hoch) und
     laufen rechts aus dem Rand (Smart-SWS x=463, SÜS-KOM x=749 - beide
     ausserhalb 390). Vorher umbrachen sie auf zwei verkuerzte Zeilen und
     schoben das Bildband samt Text 47px nach unten. */
  /* Lauf 6 @390: Pillen-Unterkante -> Bildband ist im Original 51px
     (486,4 -> 537,4), nicht 50. */
  .tab-list { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; gap: 96px; padding: 51px 39px 51px; }
  .tab-btn { padding: 22px 46px; min-height: 0; white-space: nowrap; flex: 0 0 auto; }
  /* Projektblock @390 am Original nachgemessen (fo-zone.mjs 2026-07-28):
     Body-Polster 51px oben (nicht 74), Logo->Text 39px (nicht 47),
     unten 96px bis zur Pfadleiste (nicht 122). */
  .tab-panel__body { padding: 51px var(--container-pad) 96px; }
  .tab-panel__title { margin-bottom: 39px; }
}

/* Unterhalb der Desktop-Schwelle passt die 123px-Reiterzeile nicht mehr in
   die Breite - dort rueckt sie zusammen. */
@media (max-width: 1199px) {
  .section--forschung-intro > .container:first-child { padding: 0 var(--container-pad); }
}
/* NUR Tablet (810-1199): darunter gelten die 809er-Regeln - dieser Block
   stand frueher als max-width:1199 NACH dem 809er-Block und ueberschrieb
   @390 die Reiter-Polster (padding-left 0 -> Pillenreihe klebte am Rand). */
@media (min-width: 810px) and (max-width: 1199px) {
  .tab-list { gap: var(--space-5); padding: var(--space-7) 0; }
}

/* ---------------------------------------------------------------------------
   Hover-Sweep 2026-07: Pill-Buttons 1:1 wie das Original (Glow 0 0 47px .23,
   kein Fond-/Rahmenwechsel, keine Anhebung, Pfeil-Swap). Messwerte + Tabelle:
   docs/qa/hover-sweep/README.md. Steht hier main-gescoped, weil base.css einem
   anderen Agenten gehoert (Kopfzeile/Footer bleiben unberuehrt).
   --------------------------------------------------------------------------- */
main .btn:hover {
  background: var(--color-bg);
  border-color: var(--color-border);
  transform: none;
  box-shadow: 0 0 47px rgba(0,0,0,.23);
}
main .btn--accent:hover { background: #006a94; box-shadow: none; }
main .btn--accent-magenta:hover { background: #b8005e; box-shadow: none; }
main .btn--ghost:hover { box-shadow: 0 0 47px rgba(0,0,0,.23); }
@keyframes hov-arrow-swap {
  0%   { transform: translateX(0);     opacity: 1; }
  45%  { transform: translateX(18px);  opacity: 0; }
  55%  { transform: translateX(-18px); opacity: 0; }
  100% { transform: translateX(0);     opacity: 1; }
}
main .btn:hover > span[aria-hidden]:not(.play-btn) {
  display: inline-block;
  animation: hov-arrow-swap calc(var(--duration-hover) * 2.5) var(--ease-smooth);
}