/* V26: clear V24 A wordmark with preserved plastic arrows and N-centered geometry. */
.brand { flex: none; gap: 0; padding: 7px 4px; border-radius: 9px; }
.t1-lockup { --brand-width: 218px; display: inline-flex; width: var(--brand-width); align-items: center; gap: 3.5%; vertical-align: middle; }
.t1-symbol, .t1-word { position: relative; display: block; overflow: hidden; flex: none; }
.t1-symbol { width: 21.1%; aspect-ratio: 1040 / 850; transform: translateY(-10%); }
.t1-word { width: 75.4%; }
.t1-word-a { aspect-ratio: 2060 / 425; }
.t1-lockup img { position: absolute; max-width: none; height: auto; display: block; }
.t1-symbol img { width: 147.692308%; left: -26.923077%; top: -13.529412%; }
.t1-word-a img { width: 105.92233%; left: -3.398058%; top: -40%; }
/* Same geometry and relief as the light logo, with luminous ink on dark surfaces. */
.t1-filter-defs { position: absolute; pointer-events: none; }
:root[data-theme="dark"] .brand { background: transparent; }
:root[data-theme="dark"] .t1-symbol img,
:root[data-theme="dark"] .t1-word img { filter: url(#t1-on-dark); }
.head-tools { gap: 12px; align-items: center; }
.checks li::before, .list.check li::before, .ct-arrow { content: ""; width: 22px; height: 18px; border-radius: 0; background: url('assets/t1-arrows.png') 56.45% 65.8% / 147.7% auto no-repeat; }
.ct-arrow { display: block; flex: none; font-size: 0; }
:root[data-theme="dark"] .checks li::before, :root[data-theme="dark"] .list.check li::before, :root[data-theme="dark"] .ct-arrow { background-color: transparent; filter: url(#t1-on-dark); }
@media(max-width:1100px) and (min-width:961px) { .links a { padding-inline: 7px; } .nav-end .btn { padding-inline: 12px; } }
@media(max-width:420px) { .t1-lockup { --brand-width: 180px; } .nav { padding-left: 10px; gap: 8px; } .menu-btn { padding-inline: 10px; } }
@media(max-width:350px) { .t1-lockup { --brand-width: 155px; } }

/* Inline headings use the original wordmark at the surrounding font's cap height.
   The 2060 x 425 crop has a 300px capital N and 107px below its baseline. */
.heading-wordmark.t1-word {
  display: inline-block;
  width: 5.0813333em;
  height: 1.0483333em;
  vertical-align: -.2639333em;
  width: 6.8666667cap;
  height: 1.4166667cap;
  vertical-align: -.3566667cap;
}
/* Name explanation keeps the same original pixels, including lowercase ergon. */
.t1-word { position: relative; }
.t1-word img { position: absolute; max-width: none; height: auto; display: block; }
.etym .name-fragment { --word-width: 300px; --split: .457282; display: block; position: relative; overflow: hidden; width: calc(var(--word-width) * var(--split)); margin-bottom: 12px; }
.name-fragment .t1-word { width: var(--word-width); }
.etym .name-ergon { width: calc(var(--word-width) * (1 - var(--split))); }
.name-ergon .t1-word { left: calc(-1 * var(--word-width) * var(--split)); }

/* V26: quiet typography and a continuous, independently pausable reference row. */
.skip-link { position: absolute; z-index: 100; top: 8px; left: 16px; padding: 12px 18px; background: var(--card); color: var(--ink); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.hero h1 { max-width: 19ch; }
.hero .note { margin-top: 12px; }
.reference-section { padding-block: 26px; border-block: 1px solid var(--line); }
.reference-section .refs-head { gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.reference-pause { border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--mid); padding: 8px 14px; font: inherit; font-size: 12px; cursor: pointer; }
.reference-pause:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.reference-window { overflow-x: auto; }
.reference-track { display: flex; width: max-content; }
.reference-group { display: flex; align-items: center; gap: 32px; margin: 0; padding: 0 16px; list-style: none; flex: none; }
.reference-logo { background: var(--bg); isolation: isolate; display: flex; justify-content: center; align-items: center; width: 176px; height: 74px; flex: none; }
.reference-logo img { width: auto; height: auto; max-width: 166px; max-height: 50px; object-fit: contain; filter: grayscale(1); mix-blend-mode: multiply; opacity: .82; }
.reference-logo img[data-reference="Craftview"] { max-height: 76px; }
.reference-logo img[data-reference="Media Solution Center Baden-Württemberg / HLRS"] { max-width: 176px; }
:root[data-theme="dark"] .reference-logo img { filter: grayscale(1) invert(1); mix-blend-mode: screen; opacity: .86; }
.reference-section[data-enhanced] .reference-window { overflow: hidden; mask-image: linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); }
.reference-section[data-enhanced] .reference-track { animation: reference-drift var(--reference-duration, 60s) linear infinite; }
.reference-section[data-paused="true"] .reference-track,
.reference-section[data-visible="false"] .reference-track,
.reference-section:hover .reference-track,
.reference-section:focus-within .reference-track { animation-play-state: paused; }
@keyframes reference-drift { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media(max-width:600px) {
  .reference-group { gap: 20px; padding-inline: 10px; }
  .reference-logo { width: 148px; }
  .reference-logo img { max-width: 140px; max-height: 44px; }
  .reference-logo img[data-reference="Media Solution Center Baden-Württemberg / HLRS"] { max-width: 148px; }
  .reference-section .refs-title { max-width: 28ch; }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  .reference-section[data-enhanced] .reference-track { animation: none; transform: none; width: 100%; }
  .reference-section[data-enhanced] .reference-window { mask-image: none; }
  .reference-group { display: grid; width: 100%; grid-template-columns: repeat(auto-fit,minmax(min(176px,100%),1fr)); gap: 12px; justify-items: center; padding: 0; }
  .reference-group[aria-hidden="true"] { display: none; }
  .reference-pause { display: none; }
}

/* Restore Christian's moving connection dots; the layout and labels stay still. */
.hub .board-head { flex-wrap: wrap; gap: 12px; }
.hub-pause { border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--mid); padding: 6px 11px; font: inherit; font-size: 12px; cursor: pointer; }
.hub-pause:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.hub[data-motion-enabled] .flow { animation: flow 1.6s linear infinite; }
.hub[data-motion-paused="true"] .flow { animation-play-state: paused; }
@media(prefers-reduced-motion:reduce) {
  .hub[data-motion-enabled] .flow { animation: none; }
  .hub-pause { display: none; }
}