Zum Inhalt
← Buttons

Pfeil-Icon-Button

Pfeil-Pillen eines Architekturbüros, bei denen nur das Icon sich bewegt: Kreis wird Fläche, Pfeil tauscht, Stripe-Linie oder Kreis wechselt die Seite.

Laute Studio- und Agenturseiten (kreativstudio-buehne) für den einen Haupt-CTA.

Eine Pille oder ein Textlink mit Pfeil, bei der nur das Icon die Bewegung trägt. Vier Spielarten: Der Icon-Kreis wächst zur ganzen Fläche (kreis-expand). Der Pfeil fährt hinaus und ein zweiter kommt von der anderen Seite nach (tausch). Ein Schaft blendet ein und die Spitze rückt 3 px vor wie bei Stripe (linie). Oder der Kreis wechselt die Seite und das Label weicht aus (seitenwechsel).

Der Pfeil zeigt die Richtung der Handlung, die Bewegung bestätigt den Hover ohne Farbschrei. Weil sich nur das kleine Icon bewegt, bleibt die Seite ruhig und das Label lesbar. Die Geste ist vertraut: Studios, Produktseiten und Komponentenbibliotheken nutzen sie seit Jahren.

Wann einsetzen

Für Links und Buttons, die irgendwohin führen: „Projekte ansehen“, „Nächstes Projekt“, „Weitere Projekte“, „Gespräch anfragen“, Weiter in Listen und Bildfolgen. kreis-expand für laute Studio-Seiten, linie für ruhige Büros und Kanzleien, tausch für Immobilien und Luxus, seitenwechsel für Freelancer.

Wann nicht

Nicht bei Handlungen ohne Richtung (Speichern, Kaufen, Absenden: dort Häkchen, Tasche oder button-zustaende). Nicht mehr als ein Icon pro Button. Nicht in jedem Link einer Fließtextpassage. Nie als einziges Signal: Das Label nennt das Ziel.

Varianten

  • kreis-expand: Icon-Kreis wächst per clip-path zur ganzen Pille, das Label wechselt die Farbe
  • tausch: Pfeil fährt aus dem Kreis, ein zweiter kommt 40 ms später von der anderen Seite nach
  • linie: Schaft blendet ein, die Spitze rückt 3 px vor (Stripe-Prinzip); für Textlinks
  • seitenwechsel: Icon-Kreis wandert von rechts nach links, das Label rückt nach rechts

Umsetzung

Echtes <a> für Ziele, <button> für Handlungen auf der Seite. Label als Text, Icon als inline-SVG mit aria-hidden; das SVG hat Schaft und Spitze als eigene Pfade, für tausch gibt es eine zweite Pfeilgruppe. kreis-expand: ::after mit clip-path circle(20px at calc(100% - 24px) 50%) wächst auf circle(150% …). tausch: Kreis mit overflow hidden, Pfeil A und B per translate. linie: Schaft opacity, Spitze translate 3px. seitenwechsel: Kreis absolut rechts, translate um die gemessene Breite minus 48 px (CSS-Variable aus ResizeObserver). Hover nur in @media (hover: hover), dieselben Zustände bei :focus-visible und :active. Eintritt mit der Eintrittskurve 250 ms, Rückweg mit der Austrittskurve in 175 ms. Richtung per Attribut: unten dreht das Icon um 90°, zurück spiegelt es.

Robust umsetzen

Telefon. Ohne Hover zeigt linie den Schaft dauerhaft, die anderen Varianten spielen kurz beim Tippen. Pillen und Icon-Knöpfe 48 px hoch, in Listen ist die ganze Zeile das Ziel.

Ohne Bewegung. Keine Wege: kreis-expand blendet die Fläche über Deckkraft ein, tausch und seitenwechsel bleiben stehen, linie zeigt den Schaft ohne Vorrücken. Farbwechsel bleiben.

Barrierefrei. WCAG 2.4.4 Linkzweck: Das Label nennt das Ziel, der Pfeil ist aria-hidden. Icon-Knöpfe (Vorheriges, Nächstes Projekt) haben einen versteckten Text als Namen. 2.5.8: 48 px Ziel. 1.4.3: Label auch gefüllt mindestens 4,5:1 (Weiß auf #231f20, #231f20 auf #e1e3e3). 2.4.7: Fokus sichtbar, Fokus löst dieselbe Bewegung aus wie Hover. Deaktiviert über disabled mit gedämpfter Textfarbe statt Deckkraft; wird ein Knopf am Ende der Bildfolge deaktiviert, wandert der Fokus zum anderen. Laden über aria-busy, Ergebnis in einer role=status-Zeile.

Code

<!DOCTYPE html>
<!--
  Pfeil-Icon-Button
  Fundus · Buttons · https://cecodesign.de/lab/fundus/buttons/pfeil-icon-button/
  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>Pfeil-Icon-Button · 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: 'Hanken Grotesk'; src: url('https://cdn.jsdelivr.net/fontsource/fonts/hanken-grotesk:vf@latest/latin-wght-normal.woff2') format('woff2-variations'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Hanken Grotesk'; src: url('https://cdn.jsdelivr.net/fontsource/fonts/hanken-grotesk:vf@latest/latin-wght-italic.woff2') format('woff2-variations'); font-weight: 100 900; font-style: italic; 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; }

:root {
  /* Terhalle Kemper Architekten · Rezept architektur-ruhiges-raster */
  --weiss: #ffffff; --flaeche: #e1e3e3; --text: #231f20; --leise: #6a6a6e; --leise-flaeche: #57575b; --linie: #d6d8d8; --dunkel: #1f2323; --fokus: #0022ff;
  --ein: cubic-bezier(0.25, 1, 0.5, 1);      /* token-swiss-knackig, Eintritt */
  --aus: cubic-bezier(0.5, 0, 0.75, 0);      /* Austritt, ca. 70 % der Dauer */
  --t-ein: 250ms; --t-aus: 175ms; --t-farbe: 125ms; --t-panel: 500ms;
  --rand: clamp(16px, 3.4vw, 48px);
}
* { box-sizing: border-box; margin: 0; }
html { background: var(--weiss); color: var(--text); -webkit-font-smoothing: antialiased; }
:root:has(:focus-visible) { scroll-behavior: auto; }
body { font: 400 1.0625rem/1.45 'Hanken Grotesk', system-ui, sans-serif; letter-spacing: -.012em; overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
em { font-style: italic; }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; }
.meta { font-size: .8rem; line-height: 1.4; letter-spacing: 0; color: var(--leise); }
.mono { font: 500 11px/1.35 'Geist Mono', ui-monospace, monospace; letter-spacing: .14em; text-transform: uppercase; }

/* ---------- Demo-Leiste (im Fluss) ---------- */
.pult { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 10px var(--rand); background: #f1f2f2; border-bottom: 1px solid var(--linie); color: #555559; }
.pult__gruppe { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.pult__gruppe > span { margin-right: 6px; }
.pult button { font: inherit; letter-spacing: inherit; text-transform: inherit; color: #555559; background: none; border: 1px solid transparent; border-radius: 999px; padding: 6px 10px; cursor: pointer; transition: background-color var(--t-farbe) linear, color var(--t-farbe) linear; }
.pult button:hover { background: rgb(35 31 32 / .07); }
.pult button[aria-pressed="true"] { background: var(--text); color: var(--weiss); }
.pult output { margin-left: auto; }
.pult output b { font-weight: 600; color: var(--text); }

/* ---------- Kopf ---------- */
.kopf { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px var(--rand); }
.marke { text-decoration: none; font-weight: 500; letter-spacing: -.02em; font-size: 1.125rem; padding: 10px 0; }
.marke span { font-weight: 400; color: var(--leise); }
.kopf nav { display: flex; gap: 28px; }
.kopf nav a { text-decoration: none; padding: 12px 0; }
.kopf nav a[aria-current] { text-decoration: underline; text-underline-offset: .35ex; text-decoration-thickness: 1px; }
.menue { display: none; font: inherit; background: none; border: 0; padding: 12px 0; min-height: 44px; color: inherit; cursor: pointer; }

/* ---------- Hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 64px); align-items: end; padding: clamp(16px, 4vw, 56px) var(--rand) clamp(48px, 7vw, 96px); }
.hero__text .meta { margin-bottom: 18px; }
h1 { font-size: clamp(1.953rem, 1.2rem + 2.4vw, 3.052rem); font-weight: 450; line-height: 1.08; letter-spacing: -.02em; max-width: 16ch; text-wrap: balance; }
.hero__text p.lead { margin-top: 22px; max-width: 46ch; }
.aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px; margin-top: 34px; }

.galerie { display: grid; gap: 12px; }
.galerie__bilder { position: relative; aspect-ratio: 3 / 2; background: var(--flaeche); overflow: hidden; }
.galerie__bilder > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--t-panel) var(--aus); }
.galerie__bilder > [data-aktiv] { opacity: 1; transition: opacity var(--t-panel) var(--ein); }
.galerie__leiste { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.galerie__leiste p { min-width: 0; }
.galerie__knoepfe { display: flex; align-items: center; gap: 4px; flex: none; }
.galerie__zahl { min-width: 3.4em; text-align: center; font-variant-numeric: tabular-nums; }

/* ---------- Projekte ---------- */
.projekte { padding: 0 var(--rand) clamp(48px, 7vw, 96px); }
.projekte__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--text); }
h2 { font-size: clamp(1.25rem, 1rem + 1vw, 1.563rem); font-weight: 450; letter-spacing: -.015em; }
.liste { list-style: none; padding: 0; }
.zeile { display: grid; grid-template-columns: 3ch minmax(0, 5fr) minmax(0, 3fr) minmax(0, 2fr) 48px; gap: 16px; align-items: center; min-height: 64px; padding: 8px 0; border-bottom: 1px solid var(--linie); text-decoration: none; }
.zeile__titel { font-size: 1.125rem; }
.zeile .meta:first-child { font-variant-numeric: tabular-nums; }
.zeile[data-neu] { animation: rein var(--t-panel) var(--ein) both; }
@keyframes rein { from { opacity: 0; translate: 0 8px; } }
.mehr { display: flex; justify-content: center; padding-top: 28px; }

/* ---------- Kontakt (dunkel) ---------- */
.kontakt { background: var(--dunkel); color: #f4f4f2; padding: clamp(48px, 7vw, 96px) var(--rand); display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px 48px; align-items: end; }
.kontakt h2 { font-size: clamp(1.563rem, 1.1rem + 1.8vw, 2.441rem); max-width: 18ch; }
.kontakt .meta { color: #b9bdbd; margin-top: 12px; }
.kontakt__rechts { justify-self: end; }
.fuss { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 18px var(--rand) 28px; background: var(--dunkel); color: #b9bdbd; border-top: 1px solid #3a3f3f; }

/* =================================================================
   Der Pfeil-Icon-Button
   ================================================================= */
.pfeil {
  --kreis: 40px; --dx: 26px; --dy: 0px; --w: 220px;
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 14px;
  min-height: 48px; padding: 4px 4px 4px 22px; border: 0; border-radius: 999px;
  font: 500 1rem/1.2 'Hanken Grotesk', system-ui, sans-serif; letter-spacing: -.01em; color: var(--text); text-decoration: none; white-space: nowrap;
  background: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: color var(--t-farbe) linear, transform 100ms var(--aus);
}
.pfeil[data-richtung="unten"] { --dx: 0px; --dy: 26px; }
.pfeil[data-richtung="zurueck"] { --dx: -26px; }
.pfeil__text { position: relative; z-index: 1; transition: translate var(--t-aus) var(--aus); }
.pfeil__kreis { position: relative; z-index: 1; flex: none; width: var(--kreis); height: var(--kreis); border-radius: 50%; display: grid; place-items: center; overflow: hidden; transition: translate var(--t-aus) var(--aus), background-color var(--t-farbe) linear, color var(--t-farbe) linear; }
.pfeil__kreis svg { grid-area: 1 / 1; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: translate var(--t-aus) var(--aus); }
.pfeil__kreis .b { translate: calc(-1 * var(--dx)) calc(-1 * var(--dy)); }
.pfeil__kreis .schaft { opacity: 0; transition: opacity var(--t-aus) var(--aus); }
.pfeil__kreis .spitze { transition: translate var(--t-aus) var(--aus); }
.pfeil__kreis .dreh { display: none; }
.pfeil[aria-busy="true"] .pfeil__kreis svg:not(.dreh) { display: none; }
.pfeil[aria-busy="true"] .dreh { display: block; animation: dreh 800ms linear infinite; }
@keyframes dreh { to { rotate: 360deg; } }
.pfeil:active:not(:disabled):not([aria-disabled="true"]) { transform: scale(.98); }
.pfeil:disabled, .pfeil[aria-disabled="true"] { cursor: not-allowed; }

/* Zustand „aktiv“ = Hover (nur mit Zeiger), Tastaturfokus, Vorführung, Tippen */
/* ---- kreis-expand ---- */
.pfeil[data-art="kreis-expand"] { background: var(--flaeche); }
.pfeil[data-art="kreis-expand"]::before,
.pfeil[data-art="kreis-expand"]::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--text); z-index: 0; pointer-events: none;
  clip-path: circle(calc(var(--kreis) / 2) at calc(100% - 4px - var(--kreis) / 2) 50%); }
.pfeil[data-art="kreis-expand"]::after { transition: clip-path var(--t-aus) var(--aus); }
.pfeil[data-art="kreis-expand"] .pfeil__kreis { color: var(--weiss); }
/* ---- tausch ---- */
.pfeil[data-art="tausch"] { background: var(--text); color: var(--weiss); }
.pfeil[data-art="tausch"] .pfeil__kreis { background: rgb(255 255 255 / .14); }
/* ---- linie (Stripe) ---- */
.pfeil[data-art="linie"] { padding: 4px 0; gap: 4px; }
.pfeil[data-art="linie"] .pfeil__text { text-decoration: underline; text-underline-offset: .35ex; text-decoration-thickness: 1px; }
.pfeil[data-art="linie"] .pfeil__kreis { width: 22px; height: 22px; overflow: visible; }
.pfeil[data-art="linie"] .pfeil__kreis .b { display: none; }
/* ---- seitenwechsel ---- */
.pfeil[data-art="seitenwechsel"] { padding-right: calc(var(--kreis) + 12px); box-shadow: inset 0 0 0 1px var(--text); }
.pfeil[data-art="seitenwechsel"] .pfeil__kreis { position: absolute; right: 4px; top: calc(50% - var(--kreis) / 2); background: var(--text); color: var(--weiss); }

/* Die aktiven Zustände (Selektoren doppelt, damit kein @container-style nötig ist) */
@media (hover: hover) {
  .pfeil[data-art="kreis-expand"]:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):hover::after { clip-path: circle(150% at calc(100% - 4px - var(--kreis) / 2) 50%); transition: clip-path var(--t-ein) var(--ein); }
  .pfeil[data-art="kreis-expand"]:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):hover { color: var(--weiss); }
  .pfeil[data-art="tausch"]:not(:disabled):not([aria-busy="true"]):hover .pfeil__kreis .a { translate: var(--dx) var(--dy); transition: translate var(--t-ein) var(--ein); }
  .pfeil[data-art="tausch"]:not(:disabled):not([aria-busy="true"]):hover .pfeil__kreis .b { translate: 0 0; transition: translate var(--t-ein) var(--ein) 40ms; }
  .pfeil[data-art="linie"]:not(:disabled):not([aria-busy="true"]):hover .schaft { opacity: 1; transition: opacity var(--t-ein) var(--ein); }
  .pfeil[data-art="linie"]:not(:disabled):not([aria-busy="true"]):hover .spitze { translate: 3px 0; transition: translate var(--t-ein) var(--ein); }
  .pfeil[data-art="seitenwechsel"]:not(:disabled):not([aria-busy="true"]):hover .pfeil__kreis { translate: calc(var(--kreis) + 8px - var(--w)) 0; transition: translate var(--t-ein) var(--ein); }
  .pfeil[data-art="seitenwechsel"]:not(:disabled):not([aria-busy="true"]):hover .pfeil__text { translate: calc(var(--kreis) - 10px) 0; transition: translate var(--t-ein) var(--ein); }
}
.pfeil[data-art="kreis-expand"]:is(:focus-visible, .ist-hover, :active):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"])::after { clip-path: circle(150% at calc(100% - 4px - var(--kreis) / 2) 50%); transition: clip-path var(--t-ein) var(--ein); }
.pfeil[data-art="kreis-expand"]:is(:focus-visible, .ist-hover, :active):not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]) { color: var(--weiss); }
.pfeil[data-art="tausch"]:is(:focus-visible, .ist-hover, :active):not(:disabled):not([aria-busy="true"]) .pfeil__kreis .a { translate: var(--dx) var(--dy); transition: translate var(--t-ein) var(--ein); }
.pfeil[data-art="tausch"]:is(:focus-visible, .ist-hover, :active):not(:disabled):not([aria-busy="true"]) .pfeil__kreis .b { translate: 0 0; transition: translate var(--t-ein) var(--ein) 40ms; }
.pfeil[data-art="linie"]:is(:focus-visible, .ist-hover, :active):not(:disabled):not([aria-busy="true"]) .schaft { opacity: 1; transition: opacity var(--t-ein) var(--ein); }
.pfeil[data-art="linie"]:is(:focus-visible, .ist-hover, :active):not(:disabled):not([aria-busy="true"]) .spitze { translate: 3px 0; transition: translate var(--t-ein) var(--ein); }
.pfeil[data-art="seitenwechsel"]:is(:focus-visible, .ist-hover, :active):not(:disabled):not([aria-busy="true"]) .pfeil__kreis { translate: calc(var(--kreis) + 8px - var(--w)) 0; transition: translate var(--t-ein) var(--ein); }
.pfeil[data-art="seitenwechsel"]:is(:focus-visible, .ist-hover, :active):not(:disabled):not([aria-busy="true"]) .pfeil__text { translate: calc(var(--kreis) - 10px) 0; transition: translate var(--t-ein) var(--ein); }

/* Richtung „unten“ (Laden) und „zurück“: Pfeil gedreht bzw. gespiegelt */
.pfeil[data-richtung="unten"] .pfeil__kreis svg:not(.dreh) { rotate: 90deg; }
.pfeil[data-richtung="zurueck"] .pfeil__kreis svg:not(.dreh) { scale: -1 1; }
.pfeil[data-art="linie"][data-richtung="unten"] .spitze { translate: 0 0; }

/* Deaktiviert: gedämpfte Textfarbe statt Deckkraft */
.pfeil[data-art]:disabled, .pfeil[data-art][aria-disabled="true"] { color: var(--leise-flaeche); }
.pfeil[data-art="kreis-expand"]:disabled::before, .pfeil[data-art="kreis-expand"]:disabled::after { background: #a7a9aa; }
.pfeil[data-art="tausch"]:disabled { background: var(--flaeche); }
.pfeil[data-art="tausch"]:disabled .pfeil__kreis { background: rgb(35 31 32 / .08); }
.pfeil[data-art="seitenwechsel"]:disabled { box-shadow: inset 0 0 0 1px #a7a9aa; }
.pfeil[data-art="seitenwechsel"]:disabled .pfeil__kreis { background: #a7a9aa; }

/* Icon-only (Galerie): runder Knopf, 48 px Ziel; seitenwechsel hat hier keine Seite und nutzt tausch */
.pfeil--icon { padding: 4px; gap: 0; }
.pfeil--icon .pfeil__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pfeil--icon[data-art="kreis-expand"] { background: none; box-shadow: inset 0 0 0 1px var(--linie); }
.pfeil--icon[data-art="kreis-expand"]::before { clip-path: circle(0 at 50% 50%); }
.pfeil--icon[data-art="kreis-expand"]::after { clip-path: circle(0 at 50% 50%); }
.pfeil--icon[data-art="kreis-expand"] .pfeil__kreis { color: var(--text); transition: color var(--t-farbe) linear; }
.pfeil--icon[data-art="kreis-expand"]:is(:focus-visible, .ist-hover, :active):not(:disabled)::after { clip-path: circle(50% at 50% 50%); }
.pfeil--icon[data-art="kreis-expand"]:is(:focus-visible, .ist-hover, :active):not(:disabled) .pfeil__kreis { color: var(--weiss); }
@media (hover: hover) {
  .pfeil--icon[data-art="kreis-expand"]:not(:disabled):hover::after { clip-path: circle(50% at 50% 50%); }
  .pfeil--icon[data-art="kreis-expand"]:not(:disabled):hover .pfeil__kreis { color: var(--weiss); }
}
.pfeil--icon[data-art="tausch"], .pfeil--icon[data-art="seitenwechsel"] { background: none; box-shadow: inset 0 0 0 1px var(--linie); color: var(--text); padding: 4px; }
.pfeil--icon[data-art="tausch"] .pfeil__kreis, .pfeil--icon[data-art="seitenwechsel"] .pfeil__kreis { position: relative; right: auto; top: auto; background: none; color: var(--text); translate: none !important; }
.pfeil--icon[data-art="seitenwechsel"] .pfeil__kreis .b { translate: calc(-1 * var(--dx)) calc(-1 * var(--dy)); }
@media (hover: hover) {
  .pfeil--icon[data-art="seitenwechsel"]:not(:disabled):hover .pfeil__kreis .a { translate: var(--dx) var(--dy); transition: translate var(--t-ein) var(--ein); }
  .pfeil--icon[data-art="seitenwechsel"]:not(:disabled):hover .pfeil__kreis .b { translate: 0 0; transition: translate var(--t-ein) var(--ein) 40ms; }
}
.pfeil--icon[data-art="seitenwechsel"]:is(:focus-visible, .ist-hover, :active):not(:disabled) .pfeil__kreis .a { translate: var(--dx) var(--dy); transition: translate var(--t-ein) var(--ein); }
.pfeil--icon[data-art="seitenwechsel"]:is(:focus-visible, .ist-hover, :active):not(:disabled) .pfeil__kreis .b { translate: 0 0; transition: translate var(--t-ein) var(--ein) 40ms; }
.pfeil--icon[data-art="linie"] { width: 48px; justify-content: center; text-decoration: none; }
.pfeil--icon:disabled .pfeil__kreis { color: #a7a9aa !important; }
.pfeil--icon[data-art]:disabled .pfeil__kreis { background: none !important; }
.pfeil--icon[data-art]:disabled { background: none !important; }
.pfeil--icon[data-art]:disabled { box-shadow: inset 0 0 0 1px #eceeee; }

/* Projektzeilen: ruhiger Linienpfeil, Zeile ist die Trefferfläche (immer linie, wie im Rezept) */
.zeile .pfeil-klein { justify-self: end; width: 22px; height: 22px; }
.pfeil-klein svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.pfeil-klein .schaft { opacity: 0; transition: opacity var(--t-aus) var(--aus); }
.pfeil-klein .spitze { transition: translate var(--t-aus) var(--aus); }
.zeile .zeile__titel { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: .35ex; text-decoration-thickness: 1px; transition: text-decoration-color var(--t-farbe) linear; }
@media (hover: hover) {
  .zeile:hover .schaft { opacity: 1; transition: opacity var(--t-ein) var(--ein); }
  .zeile:hover .spitze { translate: 3px 0; transition: translate var(--t-ein) var(--ein); }
  .zeile:hover .zeile__titel { text-decoration-color: currentColor; }
}
.zeile:is(:focus-visible, .ist-hover) .schaft { opacity: 1; transition: opacity var(--t-ein) var(--ein); }
.zeile:is(:focus-visible, .ist-hover) .spitze { translate: 3px 0; transition: translate var(--t-ein) var(--ein); }
.zeile:focus-visible { outline-offset: -2px; }

/* Auf dunklem Grund: Farben tauschen */
.kontakt .pfeil { --text: #f4f4f2; --weiss: #1f2323; --flaeche: #353a3a; --leise-flaeche: #b9bdbd; }
.kontakt :focus-visible { outline-color: #8fa0ff; }

/* simulierter Zeiger für die Vorführung */
.zeiger { position: fixed; left: 0; top: 0; width: 22px; height: 22px; pointer-events: none; z-index: 30; opacity: 0; filter: drop-shadow(0 2px 3px rgb(0 0 0 / .25)); }
.vorfuehrung .zeiger { opacity: 1; }

/* ---------- Vorschau ---------- */
.vorschau body { overflow: hidden; height: 100svh; }
.vorschau .pult, .vorschau .projekte, .vorschau .kontakt, .vorschau .fuss { display: none; }
.vorschau .hero { min-height: calc(100svh - 80px); align-content: center; }

/* ---------- Telefon ---------- */
@media (max-width: 880px) {
  .kopf nav { display: none; }
  .menue { display: inline-block; }
  .hero { grid-template-columns: minmax(0, 1fr); }
  .galerie { order: -1; }
  .kontakt { grid-template-columns: minmax(0, 1fr); }
  .kontakt__rechts { justify-self: start; }
}
@media (max-width: 640px) {
  .zeile { grid-template-columns: 2.4ch minmax(0, 1fr) 24px; row-gap: 2px; }
  .zeile > .meta:nth-of-type(2) { grid-column: 2; grid-row: 2; }
  .zeile > .meta:nth-of-type(3) { display: none; }
  .zeile .pfeil-klein { grid-column: 3; grid-row: 1 / span 2; }
  .pult output { margin-left: 0; }
}
@media (max-width: 360px) {
  .aktionen { gap: 10px 18px; }
  .pfeil { white-space: normal; }
}
/* Touch: linie zeigt den Schaft dauerhaft, die anderen spielen beim Tippen (:active) */
@media (hover: none) {
  .pfeil[data-art="linie"] .schaft, .pfeil-klein .schaft { opacity: 1; }
  .pfeil[data-art="linie"] .spitze, .pfeil-klein .spitze { translate: 3px 0; }
  .pult button { padding: 10px 12px; }
}

/* ---------- Reduzierte Bewegung: keine Wege, nur Farbe und Deckkraft ---------- */
.reduziert .pfeil *, .reduziert .pfeil::after, .reduziert .pfeil-klein * { transition-property: opacity, color, background-color !important; }
.reduziert .pfeil[data-art="kreis-expand"]::after, .reduziert .pfeil[data-art="kreis-expand"]::after { clip-path: none !important; opacity: 0; transition: opacity var(--t-farbe) linear !important; }
.reduziert .pfeil[data-art="kreis-expand"]:is(:focus-visible, .ist-hover, :active):not(:disabled)::after { opacity: 1; }
@media (hover: hover) { .reduziert .pfeil[data-art="kreis-expand"]:not(:disabled):not([aria-busy="true"]):hover::after { opacity: 1; } }
.reduziert .pfeil__kreis .a, .reduziert .pfeil__text, .reduziert .pfeil__kreis { translate: none !important; }
.reduziert .pfeil__kreis .b { display: none; }
.reduziert .spitze { translate: none !important; }
.reduziert .pfeil, .reduziert .pfeil:active { transform: none !important; }
.reduziert .galerie__bilder > * { transition: opacity 120ms linear !important; }
.reduziert .zeile[data-neu] { animation: none; }
.reduziert .pfeil[aria-busy="true"] .dreh { animation: none; }

/* Kontrastmodus */
@media (forced-colors: active) {
  button, [role=button], [role=tab], .pfeil { border: 1px solid ButtonText !important; }
  .pfeil::before, .pfeil::after { display: none; }
}
</style>
</head>
<body>
<div class="pult mono" role="group" aria-label="Demo-Steuerung">
  <div class="pult__gruppe" role="group" aria-label="Variante">
    <span>Variante</span>
    <button type="button" data-variante="kreis-expand" aria-pressed="true">Kreis</button>
    <button type="button" data-variante="tausch" aria-pressed="false">Tausch</button>
    <button type="button" data-variante="linie" aria-pressed="false">Linie</button>
    <button type="button" data-variante="seitenwechsel" aria-pressed="false">Seitenwechsel</button>
  </div>
  <output data-werte aria-live="polite"></output>
</div>

<header class="kopf">
  <a class="marke" href="#start">Terhalle Kemper <span>Architekten</span></a>
  <nav aria-label="Hauptmenü"><a href="#start">Büro</a><a href="#projekte" aria-current="page">Projekte</a><a href="#start">Team</a><a href="#start">Aktuelles</a><a href="#kontakt">Kontakt</a></nav>
  <button class="menue" type="button" aria-expanded="false">Menü</button>
</header>

<main id="start">
  <section class="hero" aria-labelledby="titel">
    <div class="hero__text">
      <p class="meta">Bauen im Bestand · Bocholt und Westmünsterland</p>
      <h1 id="titel">Wir bauen weiter, was <em>schon da</em> ist.</h1>
      <p class="lead">Speicher, Schulen, Wohnhäuser der Nachkriegszeit: Wir planen Umbauten, die das Vorhandene lesbar lassen und es für die nächsten fünfzig Jahre brauchbar machen.</p>
      <div class="aktionen">
        <a class="pfeil" href="#projekte" data-pfeil data-haupt>
          <span class="pfeil__text">Projekte ansehen</span>
          <span class="pfeil__kreis" aria-hidden="true">
            <svg class="a" viewBox="0 0 18 18"><path class="schaft" d="M3 9h9"/><path class="spitze" d="M6.5 4.5L11 9l-4.5 4.5"/></svg>
            <svg class="b" viewBox="0 0 18 18"><path d="M3 9h9M6.5 4.5L11 9l-4.5 4.5"/></svg>
          </span>
        </a>
        <a class="pfeil" href="#start" data-pfeil data-v-fest="linie">
          <span class="pfeil__text">Büro kennenlernen</span>
          <span class="pfeil__kreis" aria-hidden="true">
            <svg class="a" viewBox="0 0 18 18"><path class="schaft" d="M3 9h9"/><path class="spitze" d="M6.5 4.5L11 9l-4.5 4.5"/></svg>
            <svg class="b" viewBox="0 0 18 18"><path d="M3 9h9M6.5 4.5L11 9l-4.5 4.5"/></svg>
          </span>
        </a>
      </div>
    </div>

    <figure class="galerie" aria-roledescription="Bildfolge" aria-label="Aktuelle Projekte">
      <div class="galerie__bilder">
        <img src="bilder/beton-treppe.jpg" alt="Freitragende Betonstufen an einer hellen Sichtbetonwand im Abendlicht" width="1200" height="800" data-bild data-aktiv>
        <img src="bilder/fenster-licht.jpg" alt="Wohnraum mit salbeigrüner Kalkputzwand, Abendsonne in Fensterform und einer Eichenbank" width="1200" height="800" data-bild loading="lazy">
        <svg viewBox="0 0 600 400" role="img" aria-label="Grundriss Erdgeschoss: drei Gruppenräume nach Süden, Flur mit Garderobe, Halle mit Treppe" data-bild>
          <rect width="600" height="400" fill="#f1f2f2"/>
          <g fill="none" stroke="#231f20" stroke-linecap="square">
            <path d="M60 60H540V340H60Z" stroke-width="7"/>
            <path d="M60 200H392M220 200V340M380 200V340M392 60V200" stroke-width="3"/>
            <path d="M440 200H540M440 200V250" stroke-width="3"/>
            <path d="M160 200a40 40 0 0 1 40 -40M320 200a40 40 0 0 1 40 -40M392 120a40 40 0 0 1 -40 40" stroke-width="1" stroke="#76767a"/>
            <path d="M420 270h96M420 286h96M420 302h96M420 318h96M420 334h96" stroke-width="1"/>
            <path d="M140 340v-6M300 340v-6M460 340v-6" stroke-width="12" stroke="#f1f2f2"/>
            <path d="M100 337h80M260 337h80M420 337h80" stroke-width="1.2" stroke="#76767a"/>
          </g>
          <g font-family="Hanken Grotesk, sans-serif" font-size="13" fill="#4a4a4e">
            <text x="96" y="276">Gruppe 1</text><text x="256" y="276">Gruppe 2</text><text x="416" y="236">Halle</text>
            <text x="96" y="136">Flur · Garderobe</text><text x="420" y="136">Küche</text>
            <text x="60" y="380" font-size="11">0   2   5 m</text>
          </g>
          <path d="M60 368h60" stroke="#231f20" stroke-width="2"/>
        </svg>
      </div>
      <figcaption class="galerie__leiste">
        <p class="meta" data-bildtext aria-live="polite">Speicher an der Aa • Bocholt • 2024</p>
        <div class="galerie__knoepfe">
          <button class="pfeil pfeil--icon" type="button" data-pfeil data-richtung="zurueck" data-zurueck disabled>
            <span class="pfeil__text">Vorheriges Projekt</span>
            <span class="pfeil__kreis" aria-hidden="true">
              <svg class="a" viewBox="0 0 18 18"><path class="schaft" d="M3 9h9"/><path class="spitze" d="M6.5 4.5L11 9l-4.5 4.5"/></svg>
              <svg class="b" viewBox="0 0 18 18"><path d="M3 9h9M6.5 4.5L11 9l-4.5 4.5"/></svg>
            </span>
          </button>
          <span class="meta galerie__zahl" data-zahl>1 / 3</span>
          <button class="pfeil pfeil--icon" type="button" data-pfeil data-vor>
            <span class="pfeil__text">Nächstes Projekt</span>
            <span class="pfeil__kreis" aria-hidden="true">
              <svg class="a" viewBox="0 0 18 18"><path class="schaft" d="M3 9h9"/><path class="spitze" d="M6.5 4.5L11 9l-4.5 4.5"/></svg>
              <svg class="b" viewBox="0 0 18 18"><path d="M3 9h9M6.5 4.5L11 9l-4.5 4.5"/></svg>
            </span>
          </button>
        </div>
      </figcaption>
    </figure>
  </section>

  <section class="projekte" id="projekte" aria-labelledby="projekte-titel">
    <div class="projekte__kopf"><h2 id="projekte-titel">Projekte</h2><p class="meta" data-anzahl>4 von 6</p></div>
    <ul class="liste" data-liste>
      <li><a class="zeile" href="#projekte"><span class="meta">01</span><span class="zeile__titel">Speicher an der Aa</span><span class="meta">Umbau · Bocholt</span><span class="meta">2024</span><span class="pfeil-klein" aria-hidden="true"><svg viewBox="0 0 18 18"><path class="schaft" d="M3 9h9"/><path class="spitze" d="M6.5 4.5L11 9l-4.5 4.5"/></svg></span></a></li>
      <li><a class="zeile" href="#projekte"><span class="meta">02</span><span class="zeile__titel">Wohnhaus am Pröbstinger Weg</span><span class="meta">Sanierung · Bocholt</span><span class="meta">2025</span><span class="pfeil-klein" aria-hidden="true"><svg viewBox="0 0 18 18"><path class="schaft" d="M3 9h9"/><path class="spitze" d="M6.5 4.5L11 9l-4.5 4.5"/></svg></span></a></li>
      <li><a class="zeile" href="#projekte"><span class="meta">03</span><span class="zeile__titel">Kita Stenern</span><span class="meta">Entwurf · Bocholt</span><span class="meta">2026</span><span class="pfeil-klein" aria-hidden="true"><svg viewBox="0 0 18 18"><path class="schaft" d="M3 9h9"/><path class="spitze" d="M6.5 4.5L11 9l-4.5 4.5"/></svg></span></a></li>
      <li><a class="zeile" href="#projekte"><span class="meta">04</span><span class="zeile__titel">Pfarrheim, Umnutzung</span><span class="meta">Umbau · Rhede</span><span class="meta">2023</span><span class="pfeil-klein" aria-hidden="true"><svg viewBox="0 0 18 18"><path class="schaft" d="M3 9h9"/><path class="spitze" d="M6.5 4.5L11 9l-4.5 4.5"/></svg></span></a></li>
    </ul>
    <div class="mehr">
      <button class="pfeil" type="button" data-pfeil data-richtung="unten" data-mehr>
        <span class="pfeil__text" data-mehr-text>Weitere Projekte</span>
        <span class="pfeil__kreis" aria-hidden="true">
          <svg class="a" viewBox="0 0 18 18"><path class="schaft" d="M3 9h9"/><path class="spitze" d="M6.5 4.5L11 9l-4.5 4.5"/></svg>
          <svg class="b" viewBox="0 0 18 18"><path d="M3 9h9M6.5 4.5L11 9l-4.5 4.5"/></svg>
          <svg class="dreh" viewBox="0 0 18 18"><path d="M9 2.5a6.5 6.5 0 1 0 6.5 6.5"/></svg>
        </span>
      </button>
    </div>
    <p class="meta" data-meldung role="status" style="text-align:center;margin-top:10px"></p>
  </section>

  <section class="kontakt" id="kontakt" aria-labelledby="kontakt-titel">
    <div>
      <h2 id="kontakt-titel">Ein Gebäude weiterbauen? Erzählen Sie uns davon.</h2>
      <p class="meta">Termin nach Vereinbarung · Telefon erreichbar Mo–Fr 9–17 Uhr</p>
    </div>
    <div class="kontakt__rechts">
      <a class="pfeil" href="#kontakt" data-pfeil>
        <span class="pfeil__text">Gespräch anfragen</span>
        <span class="pfeil__kreis" aria-hidden="true">
          <svg class="a" viewBox="0 0 18 18"><path class="schaft" d="M3 9h9"/><path class="spitze" d="M6.5 4.5L11 9l-4.5 4.5"/></svg>
          <svg class="b" viewBox="0 0 18 18"><path d="M3 9h9M6.5 4.5L11 9l-4.5 4.5"/></svg>
        </span>
      </a>
    </div>
  </section>
  <footer class="fuss meta"><span>Terhalle Kemper Architekten · Nordwall 12 · 46399 Bocholt</span><span>Impressum · Datenschutz</span></footer>
</main>

<svg class="zeiger" viewBox="0 0 24 24" aria-hidden="true" data-zeiger><path d="M5 3l14 8-6.2 1.6L10 19z" fill="#fff" stroke="#231f20" stroke-width="1.4" stroke-linejoin="round"/></svg>

<script>
(() => {
  const html = document.documentElement;
  const reduziert = () => html.classList.contains('reduziert');
  const $ = s => document.querySelector(s), $$ = s => [...document.querySelectorAll(s)];
  const werte = $('[data-werte]'), zeiger = $('[data-zeiger]');

  /* ---------- Varianten ---------- */
  const VARIANTEN = {
    'kreis-expand': 'clip-path circle 20 px → 150 %',
    'tausch': 'Pfeil 26 px hinaus, zweiter +40 ms',
    'linie': 'Schaft opacity 0 → 1, Spitze +3 px',
    'seitenwechsel': 'Kreis wandert um Breite − 48 px'
  };
  const ausUrl = new URLSearchParams(location.search).get('v');
  let variante = ausUrl in VARIANTEN ? ausUrl : 'kreis-expand';
  /* Der Textlink „Büro kennenlernen“ bleibt immer linie (Hierarchie: tertiär) */
  function anwenden() {
    html.dataset.v = variante;
    $$('[data-pfeil]').forEach(p => { p.dataset.art = p.dataset.vFest || variante; });
    $$('[data-variante]').forEach(b => b.setAttribute('aria-pressed', String(b.dataset.variante === variante)));
    werte.innerHTML = `<b>${variante}</b> · ${VARIANTEN[variante]} · 250 ms ein / 175 ms aus`;
    messen();
  }
  function setzeVariante(v, url) {
    variante = v; anwenden();
    if (url) { const u = new URL(location.href); u.searchParams.set('v', v); history.replaceState(history.state, '', u); }
  }
  $$('[data-variante]').forEach(b => b.addEventListener('click', () => { stopVorfuehrung(); setzeVariante(b.dataset.variante, true); }));

  /* seitenwechsel braucht die Breite der Pille als Variable */
  function messen() { $$('[data-pfeil]').forEach(p => p.style.setProperty('--w', p.offsetWidth + 'px')); }
  if ('ResizeObserver' in window) { const ro = new ResizeObserver(e => e.forEach(x => x.target.style.setProperty('--w', x.target.offsetWidth + 'px'))); $$('[data-pfeil]').forEach(p => ro.observe(p)); }

  /* ---------- Galerie: Vor/Zurück mit Icon-Knöpfen, deaktiviert am Rand ---------- */
  const bilder = $$('[data-bild]'), zurueck = $('[data-zurueck]'), vor = $('[data-vor]'), zahl = $('[data-zahl]'), bildtext = $('[data-bildtext]');
  const TEXTE = ['Speicher an der Aa • Bocholt • 2024', 'Wohnhaus am Pröbstinger Weg • Bocholt • 2025', 'Kita Stenern, Grundriss EG • Bocholt • 2026'];
  let nr = 0;
  function zeige(i) {
    nr = Math.max(0, Math.min(bilder.length - 1, i));
    bilder.forEach((b, k) => k === nr ? b.setAttribute('data-aktiv', '') : b.removeAttribute('data-aktiv'));
    zahl.textContent = `${nr + 1} / ${bilder.length}`; bildtext.textContent = TEXTE[nr];
    const fokusWeg = (nr === 0 && document.activeElement === zurueck) ? vor : (nr === bilder.length - 1 && document.activeElement === vor) ? zurueck : null;
    zurueck.disabled = nr === 0; vor.disabled = nr === bilder.length - 1;
    if (fokusWeg) fokusWeg.focus();
  }
  zurueck.addEventListener('click', () => zeige(nr - 1));
  vor.addEventListener('click', () => zeige(nr + 1));

  /* ---------- Weitere Projekte: Laden → Zeilen → deaktiviert ---------- */
  const mehr = $('[data-mehr]'), mehrText = $('[data-mehr-text]'), liste = $('[data-liste]'), meldung = $('[data-meldung]'), anzahl = $('[data-anzahl]');
  const NEU = [['05', 'Gewerbehof Mussum', 'Umbau · Bocholt', '2022'], ['06', 'Haus mit Werkstatt', 'Neubau · Isselburg', '2021']];
  let ladeUhr = null;
  function mehrZurueck() {
    clearTimeout(ladeUhr); $$('[data-neu]').forEach(z => z.closest('li').remove());
    mehr.disabled = false; mehr.removeAttribute('aria-busy'); mehrText.textContent = 'Weitere Projekte'; meldung.textContent = ''; anzahl.textContent = '4 von 6'; messen();
  }
  mehr.addEventListener('click', () => {
    if (mehr.disabled || mehr.getAttribute('aria-busy') === 'true') return;
    mehr.setAttribute('aria-busy', 'true'); mehrText.textContent = 'Lädt …';
    ladeUhr = setTimeout(() => {
      const svg = '<span class="pfeil-klein" aria-hidden="true"><svg viewBox="0 0 18 18"><path class="schaft" d="M3 9h9"/><path class="spitze" d="M6.5 4.5L11 9l-4.5 4.5"/></svg></span>';
      NEU.forEach(([n, t, o, j]) => { const li = document.createElement('li'); li.innerHTML = `<a class="zeile" href="#projekte" data-neu><span class="meta">${n}</span><span class="zeile__titel">${t}</span><span class="meta">${o}</span><span class="meta">${j}</span>${svg}</a>`; liste.appendChild(li); });
      mehr.removeAttribute('aria-busy'); mehr.disabled = true; mehrText.textContent = 'Alle Projekte geladen';
      anzahl.textContent = '6 von 6'; meldung.textContent = 'Zwei weitere Projekte geladen.'; messen();
    }, 900);
  });
  $$('a[href^="#"]').forEach(a => a.addEventListener('click', e => { if (a.getAttribute('href') === '#start') e.preventDefault(); }));

  /* ---------- Vorführung: Zeiger fährt über die Pfeile ---------- */
  let vorf = false, uhren = [], t0 = 0, pausiertBei = 0, zx = 40, zy = 40, zId = 0;
  const haupt = $('[data-haupt]'), buero = $('[data-v-fest]');
  function zeigerZu(el, fx, fy, ms) {
    const r = el.getBoundingClientRect(), x = r.left + r.width * fx, y = r.top + r.height * fy;
    const id = ++zId, vx = zx, vy = zy, s = performance.now();
    const setze = () => { zeiger.style.transform = `translate(${zx}px, ${zy}px)`; };
    if (!ms || reduziert()) { zx = x; zy = y; setze(); return; }
    const k = p => 1 - Math.pow(1 - p, 3);
    const tick = t => { if (id !== zId) return; const p = Math.min(1, (t - s) / ms); zx = vx + (x - vx) * k(p); zy = vy + (y - vy) * k(p); setze(); if (p < 1) requestAnimationFrame(tick); };
    requestAnimationFrame(tick);
  }
  const hover = (el, an) => el.classList.toggle('ist-hover', an);
  const RUNDE = 9000;
  const SCHRITTE = [
    [0, () => { $$('.ist-hover').forEach(e => e.classList.remove('ist-hover')); zeige(0); zeigerZu(haupt, -.4, 2.2, 0); }],
    [300, () => zeigerZu(haupt, .55, .55, 800)],
    [1000, () => hover(haupt, true)],
    [2600, () => { hover(haupt, false); zeigerZu(buero, .5, .6, 600); }],
    [3100, () => hover(buero, true)],
    [4300, () => { hover(buero, false); zeigerZu(vor, .5, .5, 800); }],
    [5000, () => hover(vor, true)],
    [5600, () => { vor.classList.add('ist-druck'); zeige(1); }],
    [6800, () => zeige(2)],
    [7400, () => { hover(vor, false); zeigerZu(haupt, .55, .55, 900); }],
    [8300, () => hover(haupt, true)],
    [8900, () => hover(haupt, false)]
  ];
  function runde(ab) {
    uhren.forEach(clearTimeout); uhren = [];
    t0 = performance.now() - ab;
    SCHRITTE.forEach(([t, f]) => { if (t >= ab) uhren.push(setTimeout(() => { if (vorf) f(); }, t - ab)); });
    uhren.push(setTimeout(() => { if (vorf) runde(0); }, RUNDE - ab));
  }
  function vorfuehren() { stopVorfuehrung(); vorf = true; html.classList.add('vorfuehrung'); runde(0); }
  function stopVorfuehrung() { vorf = false; uhren.forEach(clearTimeout); uhren = []; zId++; html.classList.remove('vorfuehrung'); $$('.ist-hover, .ist-druck').forEach(e => e.classList.remove('ist-hover', 'ist-druck')); }
  function pause() { if (vorf) { pausiertBei = (performance.now() - t0) % RUNDE; stopVorfuehrung(); html.dataset.pausiert = ''; } }
  function weiter() { if ('pausiert' in html.dataset) { delete html.dataset.pausiert; vorf = true; html.classList.add('vorfuehrung'); runde(pausiertBei); } }
  function neustart() { stopVorfuehrung(); delete html.dataset.pausiert; zeige(0); mehrZurueck(); anwenden(); }
  ['pointerdown', 'keydown'].forEach(t => document.addEventListener(t, e => { if (vorf && e.isTrusted && !e.target.closest('fundus-pult-knopf')) stopVorfuehrung(); }));


  anwenden(); zeige(0);
  if (document.fonts && document.fonts.ready) document.fonts.ready.then(messen);
})();
</script>
</body>
</html>