Zum Inhalt
← Navigation

Klebende Produkt-Unternavigation mit Handlung

Produktleiste eines Spannsystems: Der globale Kopf scrollt weg, die Leiste mit Name, fünf Abschnitten und „Angebot anfordern“ klebt, der aktive Abschnitt trägt aria-current und eine gleitende Linie.

Produkt-, Fahrzeug- und Leistungsseiten, die alles auf einer langen Seite erzählen (Übersicht, Anwendung, Technik, Zubehör, Fragen).

Unter dem globalen Kopf steht eine zweite, schmale Leiste nur für dieses Produkt oder diese Leistung: links der Name, in der Mitte drei bis fünf Abschnitte oder Unterseiten, rechts ein einziger Handlungsknopf. Beim Scrollen geht der globale Kopf weg, die Leiste bleibt oben kleben. Der aktive Abschnitt ist markiert, der Knopf bleibt immer erreichbar.

Lange Produkt- und Leistungsseiten verlieren sonst ihren Ort und ihre Handlung. Die Leiste macht aus einer Scrollseite ein kleines Dokument mit Kapiteln und hält „Angebot anfordern“ oder „Termin“ im Blick, ohne schwebenden Knopf.

Wann einsetzen

Produkt-, Fahrzeug-, Kurs- und Leistungsseiten mit mindestens vier echten Abschnitten oder Unterseiten (Übersicht, Technik, Preise, FAQ) und einer klaren Handlung.

Wann nicht

Bei drei kurzen Abschnitten. Wenn der globale Kopf selbst klebt (sticky-shrink-header): Zwei klebende Leisten fressen den Bildschirm, dann den globalen Kopf wegscrollen lassen. Bei mehr als fünf Punkten. Nicht als zweite Hauptnavigation auf jeder Seite.

Varianten

  • abschnitte: Sprungziele auf derselben Seite, aktiver Abschnitt per Scroll-Kopplung
  • unterseiten: Punkte führen auf eigene Seiten (Übersicht, Technische Daten, Vergleich); die aktuelle Seite trägt aria-current="page" statt eines Links
  • kompakt-mobil: Name und Knopf bleiben, die Punkte wandern in ein Popover „Abschnitte“

Umsetzung

  1. nav mit aria-label aus dem Produktnamen; darin ein Name-Link nach oben, eine Liste mit 3 bis 5 Links und ein Knopf bzw. Link für die Handlung (button-zustaende).
  2. position: sticky; top: 0 auf der Leiste; der globale Kopf scrollt weg oder nutzt hide-on-scroll-header.
  3. html { scroll-padding-top: Höhe der Leiste }, damit Sprungziele und Fokus nicht darunter verschwinden.
  4. Aktiver Abschnitt: IntersectionObserver setzt aria-current="location"; als Verbesserung gleitet die Markierung wie bei gleitender-indikator.
  5. Mobil unter etwa 40rem Containerbreite: Liste in ein Popover „Abschnitte“, Name und Knopf bleiben.
  6. Bei 200 % Zoom bzw. geringer Viewporthöhe (@media (max-height: 30rem)) nicht kleben lassen.
  7. Fallback: ohne JS eine normale Linkleiste ohne Markierung.

Robust umsetzen

Telefon. Name gekürzt, Knopf rechts, Abschnitte im Popover; Leiste mindestens 44 px hoch.

Ohne Bewegung. Leiste erscheint ohne Gleiten; Anker springen ohne weiches Scrollen.

Barrierefrei. Eigener nav-Name, aria-current für den aktiven Punkt, Fokus nie verdeckt (scroll-padding-top, WCAG 2.4.11). Kontrast 4,5:1 auch über Bildern (deckender Grund). 320 px: kein waagerechtes Scrollen der Leiste. 200 % Zoom: Kleben aus. Keine Bewegung über 5 s.

Code

<!DOCTYPE html>
<!--
  Klebende Produkt-Unternavigation mit Handlung
  Fundus · Navigation · https://cecodesign.de/lab/fundus/navigation/lokale-produktnavigation/
  Eigenständige Datei. Bilder liegen hier unter bilder/ – eigene einsetzen.
-->
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Klebende Produkt-Unternavigation mit Handlung · Fundus-Demo</title>
<script>document.documentElement.classList.add('js');if(matchMedia('(prefers-reduced-motion: reduce)').matches)document.documentElement.classList.add('reduziert')</script>
<style>
@font-face { font-family: 'Strichpunkt Sans'; src: url('https://cdn.jsdelivr.net/fontsource/fonts/strichpunkt-sans:vf@latest/latin-full-normal.woff2') format('woff'); font-weight: 400 900; font-stretch: 100% 200%; font-display: swap; }
@font-face { font-family: 'Archivo'; src: url('https://cdn.jsdelivr.net/fontsource/fonts/archivo:vf@latest/latin-full-normal.woff2') format('woff2-variations'); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: 'Geist Mono'; src: url('https://cdn.jsdelivr.net/fontsource/fonts/geist-mono:vf@latest/latin-wght-normal.woff2') format('woff2-variations'); font-weight: 100 900; font-display: swap; }

/* Rezept industrie-b2b-mittelstand: Blechgrau, Graphit, Stahlblau, ein Signal (Verkehrsblau), Radius 0 */
:root {
  --grund: #F3F3F0; --text: #111417; --text-2: #4E555B; --flaeche: #E4E5E1; --dunkel: #16202A; --signal: #0E518D;
  --linie: rgba(17, 20, 23, .13); --linie-stark: rgba(17, 20, 23, .28);
  --ein: cubic-bezier(0.25, 1, 0.5, 1);   /* token-swiss-knackig, Eintritt */
  --aus: cubic-bezier(0.5, 0, 0.75, 0);   /* Austritt */
  --t-ui: 200ms; --t-ui-aus: 140ms;       /* Hover, Indikator-Farbe */
  --t-leiste: 350ms; --t-leiste-aus: 245ms; /* Indikator, Leisten-Zustand, Popover */
  --leiste-h: 56px;
  --rand: clamp(16px, 3vw, 40px);
}
* { box-sizing: border-box; margin: 0; }
html { background: var(--grund); color: var(--text); font-family: 'Archivo', system-ui, sans-serif; font-stretch: 100%; font-size: 100%;
  scroll-behavior: smooth; scroll-padding-top: calc(var(--leiste-h) + 12px); -webkit-font-smoothing: antialiased; }
:root:has(:focus-visible), :root.reduziert { scroll-behavior: auto; }
body { min-height: 100svh; overflow-x: clip; font-size: 1.0625rem; line-height: 1.55; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }
.code { font: 600 .75rem/1.2 'Archivo', sans-serif; font-stretch: 75%; letter-spacing: .08em; text-transform: uppercase; color: var(--text-2); font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── Globaler Kopf: scrollt weg ─────────────────────────────────────── */
.kopf { background: var(--dunkel); color: #fff; }
.kopf-innen { max-width: 1440px; margin: 0 auto; padding: 0 var(--rand); height: 64px; display: flex; align-items: center; gap: 32px; }
.wortmarke { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 700 1.125rem/1 'Strichpunkt Sans', sans-serif; font-stretch: 118%; letter-spacing: .02em; flex: none; }
.wortmarke svg { width: 22px; height: 22px; }
.kopf nav { flex: 1; min-width: 0; }
.kopf ul { list-style: none; padding: 0; display: flex; gap: 4px; }
.kopf nav a { display: inline-flex; align-items: center; height: 44px; padding: 0 12px; font-size: .9375rem; text-decoration: none; color: rgba(255, 255, 255, .86); transition: color var(--t-ui) var(--ein); }
.kopf nav a:hover { color: #fff; }
.kopf nav a[aria-current] { color: #fff; box-shadow: inset 0 -2px 0 #fff; }
.kopf .tel { font-size: .9375rem; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .86); text-decoration: none; white-space: nowrap; }
.kopf :focus-visible { outline-color: #fff; }
.pfad { max-width: 1440px; margin: 0 auto; padding: 14px var(--rand) 0; font-size: .8125rem; color: var(--text-2); }
.pfad ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pfad li + li::before { content: '/'; margin-right: 6px; color: var(--linie-stark); }

/* ── Produktleiste: klebt, Name links, Punkte Mitte, Handlung rechts ── */
.leiste-huelle { position: sticky; top: 0; z-index: 20; container: produkt / inline-size; }
@supports (container-type: inline-size scroll-state) { .leiste-huelle { container-type: inline-size scroll-state; } }
.leiste { background: var(--grund); border-bottom: 1px solid var(--linie); transition: background-color var(--t-leiste-aus) var(--aus), border-color var(--t-leiste-aus) var(--aus); }
.leiste-innen { max-width: 1440px; margin: 0 auto; height: var(--leiste-h); padding: 0 var(--rand); display: flex; align-items: center; gap: 24px; }
.produktname { display: flex; align-items: baseline; gap: 10px; text-decoration: none; min-width: 0; flex: none; }
.produktname b { font: 650 1.25rem/1 'Strichpunkt Sans', sans-serif; font-stretch: 112%; letter-spacing: -.01em; white-space: nowrap; }
.produktname .art { opacity: 0; translate: 0 8px; transition: opacity var(--t-leiste-aus) var(--aus), translate var(--t-leiste-aus) var(--aus); white-space: nowrap; }
.punkte { flex: 1; min-width: 0; position: relative; height: 100%; }
.punkte ul { list-style: none; padding: 0; display: flex; justify-content: center; height: 100%; }
.punkte a { position: relative; display: flex; align-items: center; height: 100%; padding: 0 14px; text-decoration: none; font-size: .9375rem; color: var(--text-2); white-space: nowrap; transition: color var(--t-ui) var(--ein); }
.punkte a:hover { color: var(--text); }
.punkte a[aria-current] { color: var(--text); font-weight: 600; }
.punkte a:not([href]) { cursor: default; }
.punkte a:focus-visible { outline-offset: -6px; }
/* Gleitender Indikator: eine Linie, Lage und Breite aus JS */
.indikator { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--signal); transform-origin: left; opacity: 0;
  transition: translate var(--t-leiste) var(--ein), width var(--t-leiste) var(--ein), opacity var(--t-ui) var(--ein); pointer-events: none; }
.indikator.an { opacity: 1; }
/* Ohne JS: einfache Linkleiste ohne Markierung */
html:not(.js) .indikator { display: none; }

.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 0; background: var(--signal); color: #fff; font-weight: 600; font-size: .9375rem; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color var(--t-ui) var(--ein); }
.knopf:hover { background: #0B4373; }
.knopf:active { translate: 0 1px; }
.knopf svg { width: 14px; height: 14px; transition: translate var(--t-ui) var(--ein); }
.knopf:hover svg { translate: 4px 0; }
.knopf .kurz { display: none; }
.leiste .knopf { flex: none; }

/* Abschnitte-Knopf und Popover (kompakt) */
.abschnitte-knopf { display: none; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border: 1px solid var(--linie-stark); background: transparent; cursor: pointer; min-width: 0; anchor-name: --abschnitte; }
.abschnitte-knopf .code { flex: none; }
.abschnitte-knopf .wert { font-weight: 600; font-size: .9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.abschnitte-knopf svg { width: 10px; height: 10px; flex: none; transition: rotate var(--t-leiste-aus) var(--aus); }
.abschnitte-knopf[aria-expanded='true'] svg { rotate: 180deg; transition: rotate var(--t-leiste) var(--ein); }
.abschnitte-knopf:hover { border-color: var(--text); }
#abschnitte[popover] {
  margin: 0; inset: auto; padding: 6px 0; border: 1px solid var(--text); border-radius: 0; background: #fff; color: var(--text); width: 300px; max-width: calc(100vw - 2 * var(--rand));
  position-anchor: --abschnitte; position-area: bottom span-right; position-try-fallbacks: flip-inline; margin-top: 8px;
  opacity: 0; translate: 0 -8px;
  transition: opacity var(--t-leiste-aus) var(--aus), translate var(--t-leiste-aus) var(--aus), display var(--t-leiste-aus) allow-discrete, overlay var(--t-leiste-aus) allow-discrete;
}
#abschnitte[popover]:popover-open { opacity: 1; translate: 0 0; transition-timing-function: var(--ein); transition-duration: var(--t-leiste); }
@starting-style { #abschnitte[popover]:popover-open { opacity: 0; translate: 0 -8px; } }
#abschnitte ol { list-style: none; padding: 0; }
#abschnitte a { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; min-height: 48px; padding: 0 16px; text-decoration: none; font-size: 1rem; }
#abschnitte a:hover, #abschnitte a.gezeigt { background: var(--flaeche); }
#abschnitte a[aria-current] { font-weight: 600; box-shadow: inset 3px 0 0 var(--signal); }
#abschnitte a .ok { width: 14px; height: 14px; color: var(--signal); visibility: hidden; }
#abschnitte a[aria-current] .ok { visibility: visible; }
#abschnitte a:focus-visible { outline-offset: -3px; }

/* Klebt: Zustand per scroll-state-Query, sonst Klasse aus JS */
@container produkt scroll-state(stuck: top) {
  .leiste { background: #fff; border-bottom-color: var(--linie-stark); transition-timing-function: var(--ein); transition-duration: var(--t-leiste); }
  .produktname .art { opacity: 1; translate: 0 0; transition-timing-function: var(--ein); transition-duration: var(--t-leiste); }
}
.leiste-huelle.klebt .leiste { background: #fff; border-bottom-color: var(--linie-stark); transition-timing-function: var(--ein); transition-duration: var(--t-leiste); }
.leiste-huelle.klebt .produktname .art { opacity: 1; translate: 0 0; transition-timing-function: var(--ein); transition-duration: var(--t-leiste); }

/* Kompakt: unter 46rem Containerbreite oder Variante kompakt-mobil */
@container produkt (width < 46rem) {
  .punkte { display: none; }
  .abschnitte-knopf { display: inline-flex; }
  .produktname .art { display: none; }
  .leiste-innen { gap: 10px; }
  .abschnitte-knopf { flex: 1; justify-content: space-between; }
}
@container produkt (width < 30rem) {
  .produktname b { font-size: 1.0625rem; }
  .abschnitte-knopf .code { display: none; }
  .knopf { padding: 0 12px; }
  .knopf .lang { display: none; }
  .knopf .kurz { display: inline; }
  .knopf svg { display: none; }
}
@container produkt (width < 22rem) {
  .leiste-innen { gap: 6px; padding: 0 12px; }
  .produktname b { font-size: 1rem; }
  .abschnitte-knopf { padding: 0 10px; gap: 6px; }
  .knopf { padding: 0 10px; }
}
[data-v='kompakt-mobil'] .punkte { display: none; }
[data-v='kompakt-mobil'] .abschnitte-knopf { display: inline-flex; }
[data-v='kompakt-mobil'] .leiste-innen { gap: 16px; }
[data-v='kompakt-mobil'] .abschnitte-knopf { margin-left: auto; min-width: 230px; justify-content: space-between; }
@container produkt (width < 46rem) { [data-v='kompakt-mobil'] .abschnitte-knopf { margin-left: 0; min-width: 0; } }

/* Geringe Höhe oder 200 % Zoom: nicht kleben */
@media (max-height: 30rem) { .leiste-huelle { position: relative; } html { scroll-padding-top: 12px; } }

/* ── Inhalt ──────────────────────────────────────────────────────────── */
main { max-width: 1440px; margin: 0 auto; padding: 0 var(--rand); }
section { border-top: 1px solid var(--linie); padding: clamp(48px, 7vw, 104px) 0; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 24px clamp(24px, 4vw, 64px); }
section:first-of-type, .nur-unterseiten .seite { border-top: 0; }
.sk { display: flex; flex-direction: column; gap: 8px; }
h1, h2 { font-family: 'Strichpunkt Sans', sans-serif; font-weight: 600; text-wrap: balance; }
h1 { font-size: clamp(2.25rem, 1.4rem + 3.4vw, 4.25rem); font-stretch: 116%; letter-spacing: -.03em; line-height: .98; }
h2 { font-size: clamp(1.625rem, 1.2rem + 1.7vw, 2.5rem); font-stretch: 110%; letter-spacing: -.02em; line-height: 1.05; }
h3 { font-size: 1.125rem; font-weight: 600; }
.lead { max-width: 58ch; color: var(--text-2); margin-top: 20px; }
.inhalt > * + * { margin-top: 24px; }

/* Übersicht: Text und Zeichnung */
#uebersicht { grid-template-columns: minmax(0, 1fr); padding-top: clamp(40px, 5vw, 72px); }
.held { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); align-items: end; }
.kennwerte { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--linie); margin-top: 32px; }
.kennwerte li { padding: 14px 16px 0 0; }
.kennwerte b { display: block; font: 600 1.5rem/1.1 'Strichpunkt Sans', sans-serif; font-stretch: 108%; font-variant-numeric: tabular-nums; }
.kennwerte span { display: block; margin-top: 4px; font-size: .8125rem; line-height: 1.35; color: var(--text-2); }
.held-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.knopf.kontur { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.knopf.kontur:hover { background: var(--flaeche); }
.zeichnung { position: relative; aspect-ratio: 4 / 3; border: 1px solid var(--linie);
  background-image: linear-gradient(var(--linie) 1px, transparent 1px), linear-gradient(90deg, var(--linie) 1px, transparent 1px);
  background-size: calc(100% / 8) calc(100% / 6); background-position: -1px -1px; }
.zeichnung svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.zeichnung figcaption { position: absolute; left: 12px; bottom: 10px; }

/* Anwendung */
.zeilen { list-style: none; padding: 0; border-top: 1px solid var(--text); }
.zeilen li { display: grid; grid-template-columns: 64px minmax(0, 4fr) minmax(0, 5fr); gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--linie); align-items: baseline; }
.zeilen p { color: var(--text-2); }

/* Technik: Datenblatt */
table { width: 100%; border-collapse: collapse; font-stretch: 87%; font-size: .9375rem; font-variant-numeric: tabular-nums; }
caption { text-align: left; padding-bottom: 12px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linie); }
thead th { background: var(--flaeche); font-weight: 600; font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase; }
td.wert { text-align: right; font-weight: 600; width: 22%; }
td.einheit { width: 12%; color: var(--text-2); }
tbody tr:hover { background: rgba(228, 229, 225, .6); }

/* Zubehör */
.artikel { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--linie); border-left: 1px solid var(--linie); }
.artikel li { border-right: 1px solid var(--linie); border-bottom: 1px solid var(--linie); padding: 20px; display: grid; gap: 6px; }
.artikel p { color: var(--text-2); font-size: .9375rem; }

/* FAQ */
details { border-bottom: 1px solid var(--linie); }
details:first-of-type { border-top: 1px solid var(--text); }
summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; align-items: center; min-height: 56px; padding: 8px 0; font-weight: 600; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; font: 400 1.5rem/1 'Strichpunkt Sans', sans-serif; transition: rotate var(--t-ui) var(--ein); }
details[open] summary::after { rotate: 45deg; }
details p { padding: 0 0 20px; max-width: 64ch; color: var(--text-2); }

/* Ansprechperson und Fuß */
.person { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; background: var(--dunkel); color: #fff; padding: clamp(24px, 4vw, 48px); }
.person p { color: rgba(255, 255, 255, .82); }
.person .knopf { box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }
.person :focus-visible { outline-color: #fff; }
.fuss { max-width: 1440px; margin: 0 auto; padding: 32px var(--rand) 96px; display: flex; flex-wrap: wrap; gap: 8px 24px; color: var(--text-2); font-size: .875rem; }

/* Unterseiten */
.seite[hidden] { display: none; }
.seite { animation: seite-ein var(--t-leiste) var(--ein); }
@keyframes seite-ein { from { opacity: 0; translate: 0 8px; } }
.vergleich td, .vergleich th { width: auto; }
.vergleich td.ja { color: var(--signal); font-weight: 600; }
.downloads { list-style: none; padding: 0; border-top: 1px solid var(--text); }
.downloads li { border-bottom: 1px solid var(--linie); }
.downloads a { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; align-items: center; min-height: 56px; text-decoration: none; }
.downloads a:hover b { text-decoration: underline; text-underline-offset: 3px; }
[data-v='unterseiten'] .nur-abschnitte, [data-v='abschnitte'] .nur-unterseiten, [data-v='kompakt-mobil'] .nur-unterseiten { display: none !important; }

/* ── Demo-Pult ───────────────────────────────────────────────────────── */
.pult { position: fixed; right: 12px; bottom: 12px; z-index: 40; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 6px 6px 12px; background: rgba(22, 32, 42, .94); color: rgba(255, 255, 255, .72); font: 500 10.5px/1 'Geist Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; max-width: calc(100vw - 24px); }
.pult .gruppe { display: flex; flex-wrap: wrap; gap: 4px; }
.pult button { font: inherit; letter-spacing: inherit; text-transform: inherit; height: 30px; padding: 0 10px; border: 1px solid rgba(255, 255, 255, .22); background: none; color: rgba(255, 255, 255, .8); cursor: pointer; }
.pult button[aria-pressed='true'] { background: #fff; color: var(--dunkel); border-color: #fff; }
.pult :focus-visible { outline-color: #fff; }

/* Vorschau: Pfad und Pult weg */
.vorschau body { overflow: hidden; }
.vorschau .pfad { display: none; }

/* Responsive */
@media (max-width: 1040px) { .kopf nav { display: none; } .kopf-innen { justify-content: space-between; } }
@media (max-width: 860px) {
  section { grid-template-columns: minmax(0, 1fr); }
  .held { grid-template-columns: minmax(0, 1fr); }
  .zeilen li { grid-template-columns: 40px minmax(0, 1fr); }
  .zeilen li p { grid-column: 2; }
}
@media (max-width: 560px) {
  .kennwerte { grid-template-columns: minmax(0, 1fr); }
  .kennwerte li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--linie); }
  .artikel { grid-template-columns: minmax(0, 1fr); }
  .kopf .tel span { display: none; }
  td.einheit { width: auto; }
  th, td { padding: 10px 6px; }
}
@media (max-width: 360px) { .wortmarke span { display: none; } }

:root.reduziert *, :root.reduziert *::before, :root.reduziert *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
@media (hover: none) { .knopf:hover svg { translate: 0 0; } }
@media (forced-colors: active) {
  button, [role=button], [role=tab], [role=switch], input, select, textarea { border: 1px solid ButtonText !important; }
  .indikator { background: Highlight; }
  .punkte a[aria-current] { text-decoration: underline; }
}
</style>
</head>
<body data-v="abschnitte">
<header class="kopf">
  <div class="kopf-innen">
    <a class="wortmarke" href="#oben" aria-label="Hollmer Spanntechnik, Startseite">
      <svg viewBox="0 0 22 22" aria-hidden="true"><rect x="1" y="1" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2"/><path d="M7 1v20M15 1v20M1 11h20" stroke="currentColor" stroke-width="2"/></svg>
      <span>HOLLMER</span>
    </a>
    <nav aria-label="Hauptnavigation">
      <ul>
        <li><a href="#oben" aria-current="true">Produkte</a></li>
        <li><a href="#oben">Anwendungen</a></li>
        <li><a href="#oben">Service</a></li>
        <li><a href="#oben">Unternehmen</a></li>
        <li><a href="#oben">Kontakt</a></li>
      </ul>
    </nav>
    <a class="tel" href="tel:+4973614870"><span>Vertrieb </span>07361 4870-0</a>
  </div>
</header>
<nav class="pfad" aria-label="Brotkrumen"><ol><li>Produkte</li><li>Nullpunkt-Spannsysteme</li><li>Raster 160</li></ol></nav>

<div class="leiste-huelle" id="leiste-huelle">
  <nav class="leiste" aria-label="Raster 160">
    <div class="leiste-innen">
      <a class="produktname" href="#uebersicht"><b>Raster 160</b><span class="art code">Art.-Nr. 160-04</span></a>
      <div class="punkte">
        <ul id="punkte-liste">
          <!-- per JS je Variante befüllt; ohne JS stehen die Abschnitte hier -->
          <li><a href="#uebersicht">Übersicht</a></li>
          <li><a href="#anwendung">Anwendung</a></li>
          <li><a href="#technik">Technische Daten</a></li>
          <li><a href="#zubehoer">Zubehör</a></li>
          <li><a href="#faq">Fragen</a></li>
        </ul>
        <span class="indikator" aria-hidden="true"></span>
      </div>
      <button class="abschnitte-knopf" type="button" popovertarget="abschnitte" aria-expanded="false">
        <span class="code" id="abschnitte-label">Abschnitt</span>
        <span class="wert" id="abschnitte-wert">Übersicht</span>
        <svg viewBox="0 0 10 10" aria-hidden="true"><path d="M1 3l4 4 4-4" fill="none" stroke="currentColor" stroke-width="1.6"/></svg>
      </button>
      <a class="knopf" href="#anfrage"><span class="lang">Angebot anfordern</span><span class="kurz">Angebot</span><svg viewBox="0 0 14 14" aria-hidden="true"><path d="M1 7h11M8 3l4 4-4 4" fill="none" stroke="currentColor" stroke-width="1.6"/></svg></a>
    </div>
  </nav>
  <div id="abschnitte" popover>
    <ol id="abschnitte-liste" aria-label="Abschnitte von Raster 160"></ol>
  </div>
</div>

<main id="oben">
  <!-- Variante abschnitte und kompakt-mobil: eine lange Seite mit Sprungzielen -->
  <div class="nur-abschnitte">
    <section id="uebersicht" aria-labelledby="h-uebersicht">
      <div class="sk"><span class="code">01 · Übersicht</span></div>
      <div class="held">
        <div>
          <h1 id="h-uebersicht">Raster 160. Werkstück rein, Maschine läuft.</h1>
          <p class="lead">Nullpunkt-Spannsystem für 5-Achs-Fräszentren. Vier Module im Raster 160 mm, pneumatisch gelöst, mechanisch gehalten. Gefertigt in Aalen.</p>
          <ul class="kennwerte">
            <li><b>25 kN</b><span>Einzugskraft je Modul</span></li>
            <li><b>&lt; 0,005 mm</b><span>Wiederholgenauigkeit</span></li>
            <li><b>40 s</b><span>Rüstzeit je Palette</span></li>
          </ul>
          <div class="held-knoepfe">
            <a class="knopf" href="#anfrage"><span>Angebot anfordern</span><svg viewBox="0 0 14 14" aria-hidden="true"><path d="M1 7h11M8 3l4 4-4 4" fill="none" stroke="currentColor" stroke-width="1.6"/></svg></a>
            <a class="knopf kontur" href="#technik">Technische Daten</a>
          </div>
        </div>
        <figure class="zeichnung">
          <svg viewBox="0 0 400 300" role="img" aria-label="Zeichnung von oben: quadratische Grundplatte mit vier runden Spannmodulen im Abstand von 160 mm">
            <g fill="none" stroke="#111417" stroke-width="1.2">
              <rect x="95" y="45" width="210" height="210"/>
              <g id="modul">
                <circle cx="147" cy="97" r="30"/><circle cx="147" cy="97" r="21"/><circle cx="147" cy="97" r="9" fill="#111417"/>
                <circle cx="147" cy="72" r="2.2"/><circle cx="172" cy="97" r="2.2"/><circle cx="147" cy="122" r="2.2"/><circle cx="122" cy="97" r="2.2"/>
              </g>
              <use href="#modul" x="106"/><use href="#modul" y="106"/><use href="#modul" x="106" y="106"/>
              <g stroke-width=".7" stroke-dasharray="10 3 2 3" opacity=".6"><path d="M147 30v240M253 30v240M80 97h240M80 203h240"/></g>
              <circle cx="105" cy="55" r="3"/><circle cx="295" cy="55" r="3"/><circle cx="105" cy="245" r="3"/><circle cx="295" cy="245" r="3"/>
            </g>
            <g stroke="#0E518D" stroke-width=".9" fill="#0E518D" font-family="Archivo, sans-serif" font-size="11" font-stretch="87%">
              <path d="M147 278h106M147 272v12M253 272v12" fill="none"/>
              <text x="200" y="293" text-anchor="middle" stroke="none">160</text>
              <path d="M335 97v106M329 97h12M329 203h12" fill="none"/>
              <text x="350" y="154" stroke="none">160</text>
              <path d="M95 22h210M95 16v12M305 16v12" fill="none"/>
              <text x="200" y="16" text-anchor="middle" stroke="none">210</text>
            </g>
          </svg>
          <figcaption class="code">Ansicht von oben · Maße in mm</figcaption>
        </figure>
      </div>
    </section>

    <section id="anwendung" aria-labelledby="h-anwendung">
      <div class="sk"><span class="code">02 · Anwendung</span></div>
      <div class="inhalt">
        <h2 id="h-anwendung">Wo Raster 160 rüstet</h2>
        <ul class="zeilen">
          <li><span class="code">A</span><h3>5-Achs-Fräszentren</h3><p>Störkonturfrei, Bauhöhe 52 mm. Das Werkstück bleibt nah am Drehpunkt.</p></li>
          <li><span class="code">B</span><h3>Palettenspeicher</h3><p>Gleiche Schnittstelle an Maschine und Rüstplatz. Gerüstet wird hauptzeitparallel.</p></li>
          <li><span class="code">C</span><h3>Messen und Prüfen</h3><p>Dieselbe Spannlage auf der Messmaschine, ohne neu auszurichten.</p></li>
          <li><span class="code">D</span><h3>Vorrichtungsbau</h3><p>Eigene Vorrichtungen mit Spannbolzen SB-20 nachrüsten.</p></li>
        </ul>
      </div>
    </section>

    <section id="technik" aria-labelledby="h-technik">
      <div class="sk"><span class="code">03 · Technische Daten</span></div>
      <div class="inhalt">
        <h2 id="h-technik">Technische Daten</h2>
        <table>
          <caption class="code">Raster 160, Grundplatte 4-fach · Stand 03.11.2026</caption>
          <thead><tr><th scope="col">Merkmal</th><th scope="col" style="text-align:right">Wert</th><th scope="col">Einheit</th></tr></thead>
          <tbody>
            <tr><th scope="row">Einzugskraft je Modul</th><td class="wert">25</td><td class="einheit">kN</td></tr>
            <tr><th scope="row">Haltekraft je Modul</th><td class="wert">55</td><td class="einheit">kN</td></tr>
            <tr><th scope="row">Wiederholgenauigkeit</th><td class="wert">&lt; 0,005</td><td class="einheit">mm</td></tr>
            <tr><th scope="row">Lösedruck pneumatisch</th><td class="wert">6</td><td class="einheit">bar</td></tr>
            <tr><th scope="row">Rastermaß</th><td class="wert">160</td><td class="einheit">mm</td></tr>
            <tr><th scope="row">Bauhöhe</th><td class="wert">52</td><td class="einheit">mm</td></tr>
            <tr><th scope="row">Gewicht</th><td class="wert">7,4</td><td class="einheit">kg</td></tr>
            <tr><th scope="row">Werkstoff</th><td class="wert">gehärtet, 58</td><td class="einheit">HRC</td></tr>
          </tbody>
        </table>
      </div>
    </section>

    <section id="zubehoer" aria-labelledby="h-zubehoer">
      <div class="sk"><span class="code">04 · Zubehör</span></div>
      <div class="inhalt">
        <h2 id="h-zubehoer">Zubehör</h2>
        <ul class="artikel">
          <li><span class="code">Art.-Nr. 160-210</span><h3>Spannbolzen SB-20</h3><p>Zum Einschrauben in Paletten und Vorrichtungen, M12.</p></li>
          <li><span class="code">Art.-Nr. 160-400</span><h3>Grundplatte 4-fach</h3><p>Für Maschinentische mit T-Nut 18 und 22 mm.</p></li>
          <li><span class="code">Art.-Nr. 160-031</span><h3>Abdeckkappen, 4 Stück</h3><p>Hält Späne und Kühlschmierstoff aus offenen Modulen.</p></li>
          <li><span class="code">Art.-Nr. 160-900</span><h3>Wartungsset</h3><p>Dichtungen und Fett für 2.000 Spannzyklen.</p></li>
        </ul>
      </div>
    </section>

    <section id="faq" aria-labelledby="h-faq">
      <div class="sk"><span class="code">05 · Fragen</span></div>
      <div class="inhalt">
        <h2 id="h-faq">Häufige Fragen</h2>
        <div>
          <details><summary>Passt Raster 160 auf meinen Maschinentisch?</summary><p>Die Grundplatte gibt es für T-Nut 18 und 22 mm. Für andere Tische fertigen wir eine Adapterplatte nach Ihrer Zeichnung.</p></details>
          <details><summary>Wie wird das Modul gelöst?</summary><p>Mit 6 bar Druckluft über die Maschinensteuerung oder ein Handventil. Gehalten wird mechanisch über Federpakete, auch ohne Druck.</p></details>
          <details><summary>Wie lange ist die Lieferzeit?</summary><p>Grundplatten und Spannbolzen ab Lager in fünf Arbeitstagen, Sonderplatten nach Absprache.</p></details>
          <details><summary>Kann ich das System vorher testen?</summary><p>Ja. Wir stellen eine Grundplatte für vier Wochen zur Probe. Fragen Sie die Anwendungstechnik.</p></details>
        </div>
      </div>
    </section>
  </div>

  <!-- Variante unterseiten: je Punkt eine eigene Seite, hier im Demo nachgestellt -->
  <div class="nur-unterseiten">
    <section class="seite" data-seite="uebersicht" aria-labelledby="hs-uebersicht" hidden>
      <div class="sk"><span class="code">Seite · Übersicht</span></div>
      <div class="inhalt">
        <h1 id="hs-uebersicht">Raster 160. Werkstück rein, Maschine läuft.</h1>
        <p class="lead">Nullpunkt-Spannsystem für 5-Achs-Fräszentren. Vier Module im Raster 160 mm, pneumatisch gelöst, mechanisch gehalten.</p>
        <ul class="kennwerte">
          <li><b>25 kN</b><span>Einzugskraft je Modul</span></li>
          <li><b>&lt; 0,005 mm</b><span>Wiederholgenauigkeit</span></li>
          <li><b>40 s</b><span>Rüstzeit je Palette</span></li>
        </ul>
      </div>
    </section>
    <section class="seite" data-seite="technik" aria-labelledby="hs-technik" hidden>
      <div class="sk"><span class="code">Seite · Technische Daten</span></div>
      <div class="inhalt">
        <h1 id="hs-technik">Technische Daten</h1>
        <table>
          <caption class="code">Raster 160 · Stand 03.11.2026</caption>
          <thead><tr><th scope="col">Merkmal</th><th scope="col" style="text-align:right">Wert</th><th scope="col">Einheit</th></tr></thead>
          <tbody>
            <tr><th scope="row">Einzugskraft je Modul</th><td class="wert">25</td><td class="einheit">kN</td></tr>
            <tr><th scope="row">Haltekraft je Modul</th><td class="wert">55</td><td class="einheit">kN</td></tr>
            <tr><th scope="row">Wiederholgenauigkeit</th><td class="wert">&lt; 0,005</td><td class="einheit">mm</td></tr>
            <tr><th scope="row">Lösedruck pneumatisch</th><td class="wert">6</td><td class="einheit">bar</td></tr>
            <tr><th scope="row">Bauhöhe</th><td class="wert">52</td><td class="einheit">mm</td></tr>
            <tr><th scope="row">Gewicht</th><td class="wert">7,4</td><td class="einheit">kg</td></tr>
          </tbody>
        </table>
      </div>
    </section>
    <section class="seite" data-seite="vergleich" aria-labelledby="hs-vergleich" hidden>
      <div class="sk"><span class="code">Seite · Vergleich</span></div>
      <div class="inhalt">
        <h1 id="hs-vergleich">Raster 160 oder Raster 96?</h1>
        <table class="vergleich">
          <caption class="code">Beide Systeme im Vergleich</caption>
          <thead><tr><th scope="col">Merkmal</th><th scope="col">Raster 96</th><th scope="col">Raster 160</th></tr></thead>
          <tbody>
            <tr><th scope="row">Einzugskraft je Modul</th><td>12 kN</td><td>25 kN</td></tr>
            <tr><th scope="row">Rastermaß</th><td>96 mm</td><td>160 mm</td></tr>
            <tr><th scope="row">Bauhöhe</th><td>40 mm</td><td>52 mm</td></tr>
            <tr><th scope="row">Für Werkstücke bis</th><td>250 kg</td><td>800 kg</td></tr>
            <tr><th scope="row">Abfrage Spannzustand</th><td>optional</td><td class="ja">serienmäßig</td></tr>
          </tbody>
        </table>
      </div>
    </section>
    <section class="seite" data-seite="downloads" aria-labelledby="hs-downloads" hidden>
      <div class="sk"><span class="code">Seite · Downloads</span></div>
      <div class="inhalt">
        <h1 id="hs-downloads">Downloads</h1>
        <ul class="downloads">
          <li><a href="#anfrage"><b>Datenblatt Raster 160</b><span class="code">PDF · 1,2 MB</span><span class="code">DE · EN</span></a></li>
          <li><a href="#anfrage"><b>Betriebsanleitung</b><span class="code">PDF · 3,8 MB</span><span class="code">DE</span></a></li>
          <li><a href="#anfrage"><b>CAD-Modell Grundplatte</b><span class="code">STEP · 6,1 MB</span><span class="code">3D</span></a></li>
        </ul>
      </div>
    </section>
  </div>

  <section id="anfrage" aria-labelledby="h-anfrage">
    <div class="sk"><span class="code">Anfrage</span></div>
    <div class="person">
      <div>
        <h2 id="h-anfrage">Ihre Ansprechperson für Raster 160</h2>
        <p>Jana Wieland, Anwendungstechnik, Durchwahl -214. Antwort mit Angebot in zwei Arbeitstagen.</p>
      </div>
      <a class="knopf" href="#oben">Angebot anfordern</a>
    </div>
  </section>
</main>
<footer class="fuss"><span>Hollmer Spanntechnik GmbH · Aalen</span><a href="#oben">Impressum</a><a href="#oben">Datenschutz</a></footer>

<div class="pult">
  <span>Variante</span>
  <div class="gruppe" role="group" aria-label="Variante">
    <button type="button" data-v="abschnitte" aria-pressed="true">Abschnitte</button>
    <button type="button" data-v="unterseiten" aria-pressed="false">Unterseiten</button>
    <button type="button" data-v="kompakt-mobil" aria-pressed="false">Kompakt</button>
  </div>
</div>

<script>
(() => {
  const h = document.documentElement;
  const reduziert = () => h.classList.contains('reduziert');
  const huelle = document.getElementById('leiste-huelle');
  const liste = document.getElementById('punkte-liste');
  const indikator = document.querySelector('.indikator');
  const popListe = document.getElementById('abschnitte-liste');
  const pop = document.getElementById('abschnitte');
  const popKnopf = document.querySelector('.abschnitte-knopf');
  const popWert = document.getElementById('abschnitte-wert');
  const popLabel = document.getElementById('abschnitte-label');

  const ABSCHNITTE = [
    ['uebersicht', 'Übersicht'], ['anwendung', 'Anwendung'], ['technik', 'Technische Daten'], ['zubehoer', 'Zubehör'], ['faq', 'Fragen']
  ];
  const SEITEN = [
    ['uebersicht', 'Übersicht'], ['technik', 'Technische Daten'], ['vergleich', 'Vergleich'], ['downloads', 'Downloads']
  ];
  const haken = '<svg class="ok" viewBox="0 0 14 14" aria-hidden="true"><path d="M2 7.5l3 3 7-7" fill="none" stroke="currentColor" stroke-width="1.8"/></svg>';

  let v = 'abschnitte', seite = 'technik', aktiv = null, laeuft = false;

  /* ── Leiste je Variante aufbauen ─────────────────────────────────── */
  function baue() {
    const punkte = v === 'unterseiten' ? SEITEN : ABSCHNITTE;
    liste.innerHTML = '';
    popListe.innerHTML = '';
    punkte.forEach(([id, name], i) => {
      const li = document.createElement('li'); const a = document.createElement('a');
      a.textContent = name; a.dataset.ziel = id;
      if (v === 'unterseiten') a.href = '?seite=' + id; else a.href = '#' + id;
      li.append(a); liste.append(li);
      const pli = document.createElement('li'); const pa = document.createElement('a');
      pa.href = v === 'unterseiten' ? '?seite=' + id : '#' + id; pa.dataset.ziel = id;
      pa.innerHTML = '<span class="code">0' + (i + 1) + '</span><span></span>' + haken;
      pa.children[1].textContent = name;
      pli.append(pa); popListe.append(pli);
    });
    popLabel.textContent = v === 'unterseiten' ? 'Seite' : 'Abschnitt';
  }

  /* ── Aktiven Punkt setzen: aria-current, Indikator, Popover-Knopf ─── */
  function setzeAktiv(id) {
    aktiv = id;
    const art = v === 'unterseiten' ? 'page' : 'location';
    [...liste.querySelectorAll('a'), ...popListe.querySelectorAll('a')].forEach(a => {
      const an = a.dataset.ziel === id;
      if (an) a.setAttribute('aria-current', art); else a.removeAttribute('aria-current');
      if (v === 'unterseiten') { if (an) a.removeAttribute('href'); else a.href = '?seite=' + a.dataset.ziel; }
    });
    const eintrag = (v === 'unterseiten' ? SEITEN : ABSCHNITTE).find(e => e[0] === id);
    popWert.textContent = eintrag ? eintrag[1] : '';
    zieheIndikator();
  }
  function zieheIndikator() {
    const a = liste.querySelector('[aria-current]');
    if (!a || !a.offsetWidth) { indikator.classList.remove('an'); return; }
    const box = liste.parentElement.getBoundingClientRect(), r = a.getBoundingClientRect();
    indikator.style.translate = (r.left - box.left + 14) + 'px 0';
    indikator.style.width = (r.width - 28) + 'px';
    indikator.classList.add('an');
  }

  /* ── Scroll-Kopplung (abschnitte, kompakt-mobil) ─────────────────── */
  /* Aktiv ist der letzte Abschnitt, dessen Oberkante eine Lesekante knapp unter der Leiste überschritten hat. */
  let rafSpy = 0;
  function spy() {
    rafSpy = 0;
    if (v === 'unterseiten') return;
    const kante = 56 + Math.min(160, innerHeight * 0.25);
    let id = ABSCHNITTE[0][0];
    for (const [a] of ABSCHNITTE) { if (document.getElementById(a).getBoundingClientRect().top <= kante) id = a; }
    if (innerHeight + scrollY >= document.documentElement.scrollHeight - 4) id = ABSCHNITTE[ABSCHNITTE.length - 1][0];
    if (id !== aktiv) setzeAktiv(id);
  }
  addEventListener('scroll', () => { if (!rafSpy) rafSpy = requestAnimationFrame(spy); }, { passive: true });
  function koppeln() { spy(); }

  /* ── Unterseiten: Navigation im Demo nachgestellt ────────────────── */
  function zeigeSeite(id, fokus) {
    seite = id;
    document.querySelectorAll('.seite').forEach(s => { s.hidden = s.dataset.seite !== id; });
    setzeAktiv(id);
    if (fokus) { window.scrollTo({ top: 0, behavior: 'auto' }); const h1 = document.querySelector('.seite:not([hidden]) h1'); h1.tabIndex = -1; h1.focus({ preventScroll: true }); }
  }
  function klick(e) {
    const a = e.target.closest('a[data-ziel]');
    if (!a) return;
    if (v === 'unterseiten') { e.preventDefault(); if (a.hasAttribute('href')) zeigeSeite(a.dataset.ziel, true); }
    if (pop.matches(':popover-open')) pop.hidePopover();
  }
  liste.addEventListener('click', klick);
  popListe.addEventListener('click', klick);

  /* Popover: aria-expanded synchron (der Browser setzt es nicht überall) */
  pop.addEventListener('toggle', e => {
    popKnopf.setAttribute('aria-expanded', e.newState === 'open' ? 'true' : 'false');
    if (e.newState === 'open') { const cur = popListe.querySelector('[aria-current]'); if (cur && !laeuft) cur.focus(); }
  });
  /* Pfeiltasten im Popover */
  popListe.addEventListener('keydown', e => {
    const links = [...popListe.querySelectorAll('a')], i = links.indexOf(document.activeElement);
    if (e.key === 'ArrowDown') { e.preventDefault(); links[(i + 1) % links.length].focus(); }
    if (e.key === 'ArrowUp') { e.preventDefault(); links[(i - 1 + links.length) % links.length].focus(); }
  });

  /* Klebt-Zustand ohne scroll-state-Query: Wächter oberhalb der Leiste */
  if (!CSS.supports('container-type: inline-size scroll-state')) {
    const w = document.createElement('div'); w.style.height = '1px'; huelle.before(w);
    new IntersectionObserver(([e]) => huelle.classList.toggle('klebt', !e.isIntersecting && e.boundingClientRect.top < 0)).observe(w);
  }

  /* ── Variante wechseln ───────────────────────────────────────────── */
  const pultKnoepfe = [...document.querySelectorAll('.pult [data-v]')];
  function setzeVariante(neu, url) {
    v = ['abschnitte', 'unterseiten', 'kompakt-mobil'].includes(neu) ? neu : 'abschnitte';
    document.body.dataset.v = v;
    pultKnoepfe.forEach(b => b.setAttribute('aria-pressed', b.dataset.v === v ? 'true' : 'false'));
    if (pop.matches(':popover-open')) pop.hidePopover();
    baue();
    if (v === 'unterseiten') zeigeSeite(seite, false); else { aktiv = null; setzeAktiv('uebersicht'); }
    koppeln();
    if (url) { const u = new URL(location.href); u.searchParams.set('v', v); history.replaceState(history.state, '', u); }
  }
  pultKnoepfe.forEach(b => b.addEventListener('click', () => { pause(); setzeVariante(b.dataset.v, true); window.scrollTo({ top: 0, behavior: 'auto' }); }));
  addEventListener('resize', () => requestAnimationFrame(zieheIndikator));
  if (document.fonts) document.fonts.ready.then(zieheIndikator);

  /* ── Vorführung ──────────────────────────────────────────────────── */
  let zeit = [];
  const warte = ms => new Promise(r => zeit.push(setTimeout(r, ms)));
  const fahre = y => window.scrollTo({ top: y, behavior: reduziert() ? 'auto' : 'smooth' });
  const lage = id => document.getElementById(id).getBoundingClientRect().top + scrollY - 64;
  async function runde() {
    const lauf = laeuft;
    if (v === 'unterseiten') {
      for (const [id] of [['technik'], ['vergleich'], ['downloads'], ['uebersicht']]) {
        await warte(1300); if (laeuft !== lauf || !laeuft) return;
        zeigeSeite(id, false); window.scrollTo({ top: 0, behavior: 'auto' });
      }
    } else if (v === 'kompakt-mobil') {
      fahre(0); await warte(900);
      for (const id of ['technik', 'faq', 'anwendung']) {
        if (!laeuft) return;
        pop.showPopover(); await warte(700); if (!laeuft) return;
        const a = popListe.querySelector('[data-ziel="' + id + '"]'); a.classList.add('gezeigt');
        await warte(600); a.classList.remove('gezeigt'); pop.hidePopover();
        fahre(lage(id)); await warte(1500);
      }
    } else {
      fahre(0); await warte(900);
      for (const id of ['anwendung', 'technik', 'zubehoer', 'faq', 'uebersicht']) {
        if (!laeuft) return;
        fahre(id === 'uebersicht' ? 0 : lage(id)); await warte(1500);
      }
    }
    if (laeuft) runde();
  }
  function neustart() { pause(); window.scrollTo({ top: 0, behavior: 'auto' }); setzeVariante(v, false); }
  function vorfuehren() { pause(); laeuft = Symbol(); runde(); }
  function pause() { laeuft = false; zeit.forEach(clearTimeout); zeit = []; }
  function weiter() { vorfuehren(); }

  setzeVariante(new URLSearchParams(location.search).get('v'), false);

})();
</script>
</body>
</html>