Seite in Einfacher und Leichter Sprache
Dieselbe Seite in Standard, Einfacher und Leichter Sprache mit großem Umschalter, Bildsymbolen, einem Satz je Zeile, erklärten Wörtern und einem Hinweis, wer übersetzt und welche Prüfgruppe geprüft hat; für Pflegedienst, öffentliche Stelle (§ 4 BITV 2.0) und Museum.
Pflege, Praxis, Apotheke, Bestattung: Leistungsseite für Menschen unter Druck, mit Umschalter Standard, Einfach, Leicht.
Dieselbe Seite in drei Stufen: Standard, Einfache Sprache und Leichte Sprache. Ein Umschalter oben wechselt die Stufe und merkt sie sich. Leichte Sprache folgt den Regeln des Netzwerks Leichte Sprache bzw. der DIN SPEC 33429: ein Gedanke je Satz, jeder Satz auf einer neuen Zeile, lange Wörter mit Bindestrich, Zahlen als Ziffern, schwere Wörter erklärt, ein Bildsymbol neben jedem Abschnitt, große Schrift, linksbündig, keine Trennung am Zeilenende. Einfache Sprache ist kürzer und klarer als Standard, aber ohne diese strengen Regeln. Ein Hinweis unten nennt die Regeln, wer den Text geschrieben und wer ihn geprüft hat. Für öffentliche Stellen zeigt eine Variante die vier Pflicht-Inhalte nach § 4 BITV 2.0.
Wer einen Pflegedienst sucht, ein Formular vom Amt verstehen will oder einen Museumsbesuch plant, liest oft unter Druck, mit wenig Deutsch oder mit einer Lernschwierigkeit. Eine Seite, die dieselbe Information in einfacher Form anbietet, nimmt diese Menschen ernst und erreicht Angehörige, Betreuer und ältere Leser gleich mit. Der sichtbare Umschalter zeigt Haltung, statt Leichte Sprache in einer Unterseite zu verstecken.
Wann einsetzen
Öffentliche Stellen (Pflicht nach § 4 BITV 2.0 auf der Startseite), Pflegedienst und Tagespflege, Praxis und Apotheke (Ablauf, Kosten), Bestattung (erste Schritte), Verein und Kultur (Besuch, Mitmachen, Barrierefreiheit). Als Einfache Sprache für alle Leistungsseiten, deren Leser unter Druck stehen.
Wann nicht
Nicht maschinell übersetzen und ungeprüft veröffentlichen: Leichte Sprache braucht Übersetzung durch Fachleute und Prüfung durch Menschen mit Lernschwierigkeiten (Prüfgruppe). Kein Logo für Leichte Sprache ohne Prüfung. Nicht Leichte und Einfache Sprache verwechseln. Rechtlich verbindliche Texte (AGB, Verträge, Bescheide) nicht ersetzen, sondern erklären und auf das Original verweisen. Die Texte in der Demo sind Beispiele; vom Kunden prüfen lassen.
Varianten
- Pflegedienst: Umschalter Standard, Einfach, Leicht auf der Leistungsseite mit Bildsymbolen, Kosten und Anruf
- Öffentliche Stelle: Startseite in Leichter Sprache mit den vier Inhalten nach § 4 BITV 2.0 und Platz für das Video in Gebärdensprache
- Kultur und Verein: Besuch planen in Einfacher Sprache mit Wörterbuch für schwere Wörter
Umsetzung
Die drei Fassungen liegen als eigene Abschnitte bzw. eigene URLs vor (/pflege, /pflege/einfach, /pflege/leicht) und sind untereinander verlinkt; der Umschalter ist eine Gruppe aus Links bzw. Knöpfen mit aria-pressed oder aria-current und merkt die Wahl in localStorage. Jede Fassung ist vollständiges HTML, nicht per JS umgeschrieben, damit Suchmaschinen und Vorlesefunktionen sie finden. Leichte Sprache: Schrift ab 1.25rem (20 px), Zeilenhöhe 1.6, linksbündig, hyphens: manual, jeder Satz ein eigener Block, Bindestriche im Text selbst, Zahlen als Ziffern, Telefonnummern in Gruppen, schwere Wörter mit <dfn> und kurzer Erklärung direkt darunter, je Abschnitt ein Bildsymbol (SVG mit Textalternative, wenn es Information trägt, sonst alt=""), keine Kursive, keine Versalien. Einfache Sprache: kurze Absätze, Zwischenüberschriften als Fragen, Fachwort in Klammern erklärt. Unten ein Hinweis: „Leichte Sprache nach den Regeln des Netzwerks Leichte Sprache. Übersetzt von …, geprüft von der Prüfgruppe …, Stand …“, als Platzhalter. Für öffentliche Stellen dazu die vier Inhalte nach § 4 BITV 2.0 und ein Video in Gebärdensprache mit Untertitel, beides von der Startseite aus erreichbar.
Robust umsetzen
Telefon. Der Umschalter steht oben über die ganze Breite mit drei großen Feldern. Bildsymbole stehen links neben dem Text, auf sehr schmalen Bildschirmen darüber. Telefonnummer als großer Knopf.
Ohne Bewegung. Der Wechsel der Sprachstufe passiert ohne Einblenden und ohne Weg.
Barrierefrei. Jede Fassung hat lang="de" und eine eigene Überschrift, die die Stufe nennt („Hilfe zu Hause, in Leichter Sprache“). Nach dem Wechsel geht der Fokus auf diese Überschrift, eine role=status-Zeile sagt die Stufe an. Bildsymbole ergänzen den Text, ersetzen ihn nie. Schwere Wörter werden im Text erklärt, nicht nur im Tooltip. Kontrast mindestens 7 : 1 für Fließtext in Leichter Sprache.
Code
<!DOCTYPE html>
<!--
Seite in Einfacher und Leichter Sprache
Fundus · Zugang & Robustheit · https://cecodesign.de/lab/fundus/zugang/einfache-sprache-seite/
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>Seite in Einfacher und Leichter Sprache · 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: 'Literata'; src: url('https://cdn.jsdelivr.net/fontsource/fonts/literata:vf@latest/latin-full-normal.woff2') format('woff2-variations'); font-weight: 200 900; font-display: swap; }
@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: '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 pflege-dienst-naehe */
:root {
--grund: #FAF7F2; --text: #1F1B16; --pflaume: #5B2A4A; --gelb: #FFC845; --hinweis: #FFF1CC; --leise: #4A443D; --linie: #D8D0C4; --flaeche: #F2ECE2;
--kurve: cubic-bezier(0.16, 1, 0.3, 1); --d-hover: 150ms; --d-auf: 300ms; --d-zu: 200ms;
}
* { box-sizing: border-box; margin: 0; }
html { background: var(--grund); color: var(--text); font: 400 1.25rem/1.6 'Hanken Grotesk', system-ui, sans-serif; -webkit-text-size-adjust: 100%; }
:root:has(:focus-visible) { scroll-behavior: auto; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
:focus-visible { outline: 3px solid var(--pflaume); outline-offset: 3px; border-radius: 4px; }
[hidden] { display: none !important; }
.nb { white-space: nowrap; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
h1, h2, h3 { font-family: 'Literata', Georgia, serif; font-weight: 600; color: var(--pflaume); letter-spacing: -.01em; text-wrap: balance; }
/* Kopf */
.kopf { background: #fff; border-bottom: 1px solid var(--linie); }
.kopf__innen { max-width: 1160px; margin: 0 auto; padding: 14px clamp(16px, 4vw, 48px); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.marke { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font: 600 1.25rem/1.15 'Literata', Georgia, serif; color: var(--pflaume); }
.marke svg { width: 40px; height: 40px; flex: none; }
.marke small { display: block; font: 400 1rem/1.3 'Hanken Grotesk', sans-serif; color: var(--leise); }
.anruf { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 10px 22px; border-radius: 28px; background: var(--gelb); border: 2px solid var(--text); font-weight: 700; font-size: 1.25rem; text-decoration: none; font-variant-numeric: tabular-nums; transition: transform var(--d-hover) var(--kurve); }
.anruf:hover { transform: translateY(-1px); }
.anruf svg { width: 22px; height: 22px; }
/* Umschalter der Sprachstufe */
.stufen-band { background: var(--flaeche); border-bottom: 1px solid var(--linie); }
.stufen-band__innen { max-width: 1160px; margin: 0 auto; padding: 14px clamp(16px, 4vw, 48px); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.stufen-band p { font-size: 1rem; color: var(--leise); }
.stufen { display: flex; flex-wrap: wrap; gap: 6px; padding: 5px; border-radius: 16px; background: #fff; border: 1px solid var(--linie); }
.stufe { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 18px 8px 12px; border-radius: 12px; font-weight: 600; font-size: 1.0625rem; text-align: left; line-height: 1.2; transition: background-color var(--d-hover) var(--kurve), color var(--d-hover) var(--kurve); }
.stufe:hover { background: var(--flaeche); }
.stufe svg { width: 30px; height: 30px; flex: none; }
.stufe small { display: block; font-weight: 400; font-size: 1rem; color: var(--leise); }
.stufe[aria-pressed="true"] { background: var(--pflaume); color: #fff; }
.stufe[aria-pressed="true"] small { color: rgba(255, 255, 255, .86); }
/* Fassungen */
.fassung { max-width: 1160px; margin: 0 auto; padding: clamp(32px, 6vw, 72px) clamp(16px, 4vw, 48px) 48px; }
.fassung.ein { animation: ein var(--d-auf) var(--kurve) both; }
@keyframes ein { from { opacity: 0; transform: translateY(6px); } }
.fassung h1 { font-size: clamp(2.5rem, 1.8rem + 3vw, 4rem); line-height: 1.1; max-width: 20ch; hyphens: auto; overflow-wrap: break-word; }
.fassung h1:focus { outline: none; }
.fassung h1:focus-visible { outline: 3px solid var(--pflaume); }
.untertitel { display: inline-block; margin-bottom: 14px; padding: 4px 12px; border-radius: 8px; background: var(--hinweis); font-size: 1rem; font-weight: 600; }
/* Standard */
.standard { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); margin-top: 28px; }
.standard p { max-width: 60ch; }
.standard p + p { margin-top: 1em; }
.standard h2 { font-size: clamp(1.5rem, 1.3rem + .8vw, 2rem); margin: 1.4em 0 .4em; }
.kasten { background: #fff; border: 1px solid var(--linie); border-radius: 18px; padding: 26px; align-self: start; }
.kasten h2 { margin-top: 0; font-size: 1.5rem; }
.kasten ul { margin: 10px 0 0; padding-left: 1.1em; }
.kasten li + li { margin-top: 6px; }
/* Einfach */
.einfach { margin-top: 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.einfach section { background: #fff; border: 1px solid var(--linie); border-radius: 18px; padding: 24px; }
.einfach h2 { font-size: 1.5rem; margin-bottom: 8px; }
.einfach p + p { margin-top: .7em; }
.einfach ul { margin: 8px 0 0; padding-left: 1.1em; }
/* Leicht */
.leicht { margin-top: 32px; display: grid; gap: 22px; max-width: 900px; }
.leicht section { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px 28px; padding: 26px; background: #fff; border: 1px solid var(--linie); border-radius: 20px; }
.leicht .bildsymbol { width: 112px; height: 112px; border-radius: 18px; background: var(--flaeche); display: grid; place-items: center; }
.leicht .bildsymbol svg { width: 84px; height: 84px; }
.leicht h2 { font-size: clamp(1.625rem, 1.4rem + .8vw, 2rem); margin-bottom: 10px; }
.leicht p, .leicht li { font-size: 1.375rem; line-height: 1.6; max-width: 38ch; hyphens: manual; }
.leicht p + p { margin-top: .5em; }
.leicht ul { padding-left: 1.1em; margin: .3em 0; }
.erklaerung { margin-top: 14px; padding: 16px 18px; border-radius: 14px; background: var(--hinweis); border-left: 5px solid var(--gelb); }
.erklaerung dfn { font-style: normal; font-weight: 700; }
.leicht .telefon { display: inline-flex; align-items: center; gap: 10px; margin-top: 12px; min-height: 60px; padding: 12px 24px; border-radius: 30px; background: var(--gelb); border: 2px solid var(--text); font-weight: 700; font-size: 1.5rem; text-decoration: none; font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.ueber { margin-top: 36px; max-width: 900px; padding: 22px 24px; border-radius: 18px; border: 2px dashed var(--linie); font-size: 1rem; }
.ueber h2 { font-size: 1.25rem; margin-bottom: 6px; }
.ueber p + p { margin-top: 6px; }
.platzhalter { background: var(--hinweis); border-radius: 4px; padding: 0 5px; }
/* Amt */
.amt-raster { margin-top: 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.amt-raster section { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 6px 20px; padding: 24px; border-radius: 20px; background: #fff; border: 1px solid var(--linie); }
.amt-raster .bildsymbol { width: 88px; height: 88px; border-radius: 16px; background: var(--flaeche); display: grid; place-items: center; }
.amt-raster .bildsymbol svg { width: 66px; height: 66px; }
.amt-raster h2 { font-size: 1.625rem; margin-bottom: 8px; }
.amt-raster p { font-size: 1.375rem; line-height: 1.6; hyphens: manual; }
.amt-raster p + p { margin-top: .4em; }
.nummer { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--pflaume); color: #fff; font: 700 1rem/1 'Hanken Grotesk', sans-serif; margin-right: 8px; vertical-align: 3px; }
.mini-kopf { margin-top: 12px; border: 2px solid var(--text); border-radius: 12px; overflow: hidden; font-size: 1rem; }
.mini-kopf div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 10px; padding: 8px 12px; background: var(--flaeche); }
.mini-kopf span { display: inline-flex; align-items: center; gap: 6px; }
.mini-kopf b { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--gelb); border: 1.5px solid var(--text); font-size: .875rem; }
.video { margin-top: 12px; aspect-ratio: 16 / 9; border-radius: 14px; background: #2f2129; color: #fff; display: grid; place-items: center; text-align: center; padding: 16px; font-size: 1rem; }
.video svg { width: 56px; height: 56px; margin: 0 auto 8px; }
.links { list-style: none; padding: 0; margin-top: 8px; display: grid; gap: 6px; }
.links a { font-size: 1.25rem; font-weight: 600; }
/* Kultur: Wörterbuch */
.wort { font-weight: 600; text-decoration: underline dotted 2px; text-underline-offset: 5px; cursor: help; border-radius: 4px; }
button.wort { padding: 0 2px; font-size: inherit; line-height: inherit; }
button.wort[aria-expanded="true"] { background: var(--hinweis); }
.wort-erkl { display: block; margin: 8px 0 4px; padding: 12px 14px; border-radius: 12px; background: var(--hinweis); font-size: 1.125rem; }
.wort-erkl b { font-weight: 700; }
.besuch { margin-top: 28px; align-items: start; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); }
.besuch h2 { font-size: 1.625rem; margin: 1.2em 0 .3em; }
.besuch h2:first-child { margin-top: 0; }
.besuch p { max-width: 58ch; }
.fakten { list-style: none; padding: 0; display: grid; gap: 12px; }
.fakten li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; align-items: start; background: #fff; border: 1px solid var(--linie); border-radius: 16px; padding: 14px 16px; }
.fakten svg { width: 52px; height: 52px; }
.fakten b { display: block; }
.fuss { background: var(--pflaume); color: #fff; }
.fuss__innen { max-width: 1160px; margin: 0 auto; padding: 28px clamp(16px, 4vw, 48px) 88px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; font-size: 1rem; }
.fuss a { color: #fff; }
/* Pult */
.pult { position: fixed; right: 16px; bottom: 16px; z-index: 30; display: flex; flex-wrap: wrap; gap: 2px; align-items: center; padding: 8px 10px; border-radius: 10px; background: rgba(31, 27, 22, .95); box-shadow: 0 12px 30px -12px rgba(0, 0, 0, .5); max-width: calc(100vw - 32px); }
.pult span { font: 500 10px/1 'Geist Mono', monospace; letter-spacing: .14em; text-transform: uppercase; color: rgba(250, 247, 242, .7); margin-right: 8px; }
.pult button { font: 500 10.5px/1 'Geist Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: rgba(250, 247, 242, .8); padding: 7px 9px; border-radius: 5px; }
.pult button[aria-pressed="true"] { background: #FAF7F2; color: var(--text); }
.pult :focus-visible { outline-color: #fff; }
@media (max-width: 900px) {
.standard, .besuch { grid-template-columns: minmax(0, 1fr); }
.einfach, .amt-raster { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
.anruf { margin-left: 0; width: 100%; justify-content: center; }
.stufen { width: 100%; }
.stufe { flex: 1 1 0; flex-direction: column; justify-content: center; text-align: center; gap: 4px; padding: 10px 6px; }
.stufe small { display: none; }
.leicht section, .amt-raster section { grid-template-columns: minmax(0, 1fr); padding: 20px; }
.leicht .bildsymbol { width: 88px; height: 88px; }
.leicht .bildsymbol svg { width: 64px; height: 64px; }
.leicht .telefon { width: 100%; justify-content: center; font-size: 1.375rem; padding: 12px 10px; }
}
@media (max-width: 360px) {
.fassung h1 { font-size: 2rem; }
.stufe svg { display: none; }
.anruf { font-size: 1.0625rem; padding: 10px 12px; }
}
.vorschau body { overflow: hidden; }
.vorschau .fuss, .vorschau .ueber { display: none; }
:root.reduziert *, :root.reduziert *::before, :root.reduziert *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
@media (hover: none) { .anruf:hover { transform: none; } .stufe:hover { background: none; } .stufe[aria-pressed="true"]:hover { background: var(--pflaume); } }
@media (forced-colors: active) {
button, [role=button], [role=tab], [role=switch], input, select, textarea { border: 1px solid ButtonText !important; }
.stufe[aria-pressed="true"] { outline: 3px solid Highlight; }
}
</style>
</head>
<body>
<svg width="0" height="0" style="position:absolute" aria-hidden="true">
<defs>
<symbol id="s-haus" viewBox="0 0 64 64"><path d="M8 30 32 10l24 20" fill="none" stroke="#5B2A4A" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/><path d="M15 27v27h34V27" fill="#fff" stroke="#5B2A4A" stroke-width="5" stroke-linejoin="round"/><rect x="27" y="36" width="10" height="18" fill="#FFC845" stroke="#5B2A4A" stroke-width="4"/></symbol>
<symbol id="s-hand" viewBox="0 0 64 64"><circle cx="22" cy="16" r="7" fill="#FFC845" stroke="#5B2A4A" stroke-width="4"/><circle cx="44" cy="20" r="6" fill="#fff" stroke="#5B2A4A" stroke-width="4"/><path d="M10 54V36c0-6 5-10 12-10s12 4 12 10v18M34 40l6-6c3-3 8-2 10 1v19" fill="none" stroke="#5B2A4A" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/></symbol>
<symbol id="s-tropfen" viewBox="0 0 64 64"><path d="M32 8c8 12 16 20 16 30a16 16 0 0 1-32 0c0-10 8-18 16-30z" fill="#fff" stroke="#5B2A4A" stroke-width="5" stroke-linejoin="round"/><path d="M24 40a8 8 0 0 0 8 8" fill="none" stroke="#FFC845" stroke-width="5" stroke-linecap="round"/></symbol>
<symbol id="s-pille" viewBox="0 0 64 64"><rect x="8" y="22" width="48" height="20" rx="10" transform="rotate(-35 32 32)" fill="#fff" stroke="#5B2A4A" stroke-width="5"/><path d="M26 22l12 20" stroke="#5B2A4A" stroke-width="5"/><path d="M14 40l9 14" stroke="#FFC845" stroke-width="7" stroke-linecap="round" transform="translate(4 -6)"/></symbol>
<symbol id="s-geld" viewBox="0 0 64 64"><ellipse cx="26" cy="20" rx="16" ry="7" fill="#FFC845" stroke="#5B2A4A" stroke-width="4"/><path d="M10 20v10c0 4 7 7 16 7s16-3 16-7V20" fill="none" stroke="#5B2A4A" stroke-width="4"/><ellipse cx="40" cy="38" rx="16" ry="7" fill="#fff" stroke="#5B2A4A" stroke-width="4"/><path d="M24 38v10c0 4 7 7 16 7s16-3 16-7V38" fill="none" stroke="#5B2A4A" stroke-width="4"/></symbol>
<symbol id="s-telefon" viewBox="0 0 64 64"><path d="M16 8h10l4 13-6 4c3 7 8 12 15 15l4-6 13 4v10c0 4-3 7-7 7C27 55 9 37 9 15c0-4 3-7 7-7z" fill="#FFC845" stroke="#5B2A4A" stroke-width="4.5" stroke-linejoin="round"/></symbol>
<symbol id="s-wegweiser" viewBox="0 0 64 64"><path d="M30 6v52" stroke="#5B2A4A" stroke-width="5" stroke-linecap="round"/><path d="M12 14h32l8 7-8 7H12z" fill="#FFC845" stroke="#5B2A4A" stroke-width="4" stroke-linejoin="round"/><path d="M50 32H18l-8 7 8 7h32z" fill="#fff" stroke="#5B2A4A" stroke-width="4" stroke-linejoin="round"/></symbol>
<symbol id="s-tuer" viewBox="0 0 64 64"><rect x="14" y="8" width="36" height="48" rx="3" fill="#fff" stroke="#5B2A4A" stroke-width="5"/><circle cx="40" cy="33" r="3.5" fill="#5B2A4A"/><path d="M6 56h52" stroke="#5B2A4A" stroke-width="5" stroke-linecap="round"/><path d="M22 18h20" stroke="#FFC845" stroke-width="5" stroke-linecap="round"/></symbol>
<symbol id="s-buch" viewBox="0 0 64 64"><path d="M32 16c-6-5-14-6-22-5v38c8-1 16 0 22 5 6-5 14-6 22-5V11c-8-1-16 0-22 5z" fill="#fff" stroke="#5B2A4A" stroke-width="5" stroke-linejoin="round"/><path d="M32 16v38" stroke="#5B2A4A" stroke-width="4"/><path d="M16 22c4 0 8 1 11 3M16 30c4 0 8 1 11 3" stroke="#FFC845" stroke-width="4" stroke-linecap="round"/></symbol>
<symbol id="s-kalender" viewBox="0 0 64 64"><rect x="8" y="12" width="48" height="44" rx="5" fill="#fff" stroke="#5B2A4A" stroke-width="5"/><path d="M8 24h48M20 6v12M44 6v12" stroke="#5B2A4A" stroke-width="5" stroke-linecap="round"/><rect x="18" y="32" width="12" height="10" rx="2" fill="#FFC845" stroke="#5B2A4A" stroke-width="3"/></symbol>
<symbol id="s-rad" viewBox="0 0 64 64"><circle cx="28" cy="12" r="6" fill="#FFC845" stroke="#5B2A4A" stroke-width="4"/><path d="M28 20v16h14l6 14" fill="none" stroke="#5B2A4A" stroke-width="5" stroke-linecap="round" stroke-linejoin="round"/><circle cx="28" cy="44" r="13" fill="none" stroke="#5B2A4A" stroke-width="5"/></symbol>
</defs>
</svg>
<header class="kopf">
<div class="kopf__innen" data-kopf></div>
</header>
<div class="stufen-band">
<div class="stufen-band__innen">
<div class="stufen" role="group" aria-label="Sprache dieser Seite" data-stufen></div>
<p data-stufen-hinweis>Dieselbe Seite in drei Fassungen. Ihre Wahl bleibt gespeichert.</p>
</div>
</div>
<main data-inhalt></main>
<footer class="fuss"><div class="fuss__innen" data-fuss></div></footer>
<div class="pult" role="group" aria-label="Steuerung der Demo"><span aria-hidden="true">Variante</span><button type="button" data-v="pflege" aria-pressed="true">Pflege</button><button type="button" data-v="amt" aria-pressed="false">Amt</button><button type="button" data-v="kultur" aria-pressed="false">Kultur</button></div>
<p class="vh" role="status" data-ansage></p>
<!-- ════════ Pflegedienst Haselgrund ════════ -->
<template id="t-pflege-standard">
<article class="fassung" lang="de" aria-labelledby="h1">
<h1 id="h1" tabindex="-1">Ambulante Pflege in Wittlich und Umgebung</h1>
<div class="standard">
<div>
<p>Der Pflegedienst Haselgrund unterstützt pflegebedürftige Menschen in ihrer häuslichen Umgebung. Unser Team aus examinierten Pflegefachkräften und Pflegehilfskräften übernimmt Grundpflege, ärztlich verordnete Behandlungspflege sowie hauswirtschaftliche Versorgung und Betreuung.</p>
<p>Mit einem anerkannten Pflegegrad rechnen wir Pflegesachleistungen direkt mit Ihrer Pflegekasse ab. Leistungen der Behandlungspflege nach ärztlicher Verordnung übernimmt in der Regel die Krankenkasse. Für Leistungen, die über den Anspruch hinausgehen, erhalten Sie vorab einen schriftlichen Kostenvoranschlag.</p>
<h2>Ablauf</h2>
<p>Nach Ihrem Anruf vereinbaren wir ein kostenloses Erstgespräch bei Ihnen zu Hause. Dabei klären wir den Hilfebedarf, die Finanzierung und den gewünschten Beginn und erstellen einen individuellen Pflegevertrag.</p>
</div>
<aside class="kasten" aria-labelledby="k-leist">
<h2 id="k-leist">Leistungen</h2>
<ul><li>Grundpflege: Körperpflege, Ernährung, Mobilität</li><li>Behandlungspflege: Medikamente, Verbände, Injektionen</li><li>Hauswirtschaft und Einkauf</li><li>Verhinderungspflege und Entlastung</li><li>Beratungsbesuche nach § 37 Abs. 3 SGB XI</li></ul>
</aside>
</div>
</article>
</template>
<template id="t-pflege-einfach">
<article class="fassung" lang="de" aria-labelledby="h1">
<span class="untertitel">Einfache Sprache</span>
<h1 id="h1" tabindex="-1">Pflege zu Hause in Wittlich</h1>
<div class="einfach">
<section><h2>Was machen wir?</h2><p>Wir kommen zu Ihnen nach Hause. Wir helfen beim Waschen, Anziehen und Essen.</p><p>Wir geben Medikamente und machen Verbände, wenn der Arzt das aufschreibt. Wir kaufen auch ein und helfen im Haushalt.</p></section>
<section><h2>Wer bezahlt?</h2><p>Haben Sie einen Pflegegrad? Dann bezahlt die Pflegekasse einen Teil. Das rechnen wir direkt mit der Kasse ab.</p><p>Kostet etwas extra, sagen wir es Ihnen vorher. Sie bekommen es schriftlich.</p></section>
<section><h2>Wie fängt es an?</h2><p>Sie rufen uns an. Wir kommen zu Ihnen und sprechen über alles. Das kostet nichts.</p><p>Danach schreiben wir zusammen auf, was wir für Sie tun.</p></section>
</div>
</article>
</template>
<template id="t-pflege-leicht">
<article class="fassung" lang="de" aria-labelledby="h1">
<span class="untertitel">Leichte Sprache</span>
<h1 id="h1" tabindex="-1">Hilfe zu Hause. In Leichter Sprache.</h1>
<div class="leicht">
<section><span class="bildsymbol"><svg role="img" aria-label="Haus"><use href="#s-haus"/></svg></span><div><h2>Wir sind ein Pflege-Dienst.</h2><p>Wir kommen zu Ihnen nach Hause.</p><p>Wir helfen Ihnen im Alltag.</p><p>Sie können zu Hause wohnen bleiben.</p></div></section>
<section><span class="bildsymbol"><svg role="img" aria-label="Wasser-Tropfen"><use href="#s-tropfen"/></svg></span><div><h2>Dabei helfen wir:</h2><ul><li>beim Waschen</li><li>beim Anziehen</li><li>beim Essen</li><li>im Haushalt</li><li>beim Einkaufen</li></ul></div></section>
<section><span class="bildsymbol"><svg role="img" aria-label="Tablette"><use href="#s-pille"/></svg></span><div><h2>Medikamente</h2><p>Manchmal brauchen Sie Medikamente.</p><p>Oder einen Verband.</p><p>Dann schreibt der Arzt das auf.</p><p>Wir geben Ihnen die Medikamente.</p></div></section>
<section><span class="bildsymbol"><svg role="img" aria-label="Geld-Münzen"><use href="#s-geld"/></svg></span><div><h2>Wer bezahlt?</h2><p>Vielleicht haben Sie einen Pflege-Grad.</p><p>Dann bezahlt die Pflege-Kasse einen Teil.</p><p>Kostet etwas extra?</p><p>Dann sagen wir es Ihnen vorher.</p><p class="erklaerung"><dfn>Pflege-Kasse</dfn> heißt: Das ist eine Versicherung. Sie bezahlt Geld für Pflege.<br><dfn>Pflege-Grad</dfn> heißt: Jemand hat geprüft, wie viel Hilfe Sie brauchen.</p></div></section>
<section><span class="bildsymbol"><svg role="img" aria-label="Telefon"><use href="#s-telefon"/></svg></span><div><h2>So erreichen Sie uns:</h2><p>Rufen Sie uns an.</p><p>Montag bis Freitag.</p><p>Von 8 Uhr bis 16 Uhr.</p><a class="telefon" href="#">0 65 71 0 94 12</a></div></section>
</div>
<aside class="ueber" aria-labelledby="ueber-h">
<h2 id="ueber-h">Über diesen Text</h2>
<p>Leichte Sprache nach den Regeln vom Netzwerk Leichte Sprache.</p>
<p>Übersetzt von: <span class="platzhalter">Büro für Leichte Sprache, Name und Ort</span>. Geprüft von: <span class="platzhalter">Prüfgruppe, Name</span>. Stand: November 2026.</p>
<p><span class="platzhalter">Demo: Beispieltext, nicht übersetzt und nicht geprüft. Vor Veröffentlichung von einer Prüfgruppe aus Menschen mit Lernschwierigkeiten prüfen lassen.</span></p>
</aside>
</article>
</template>
<!-- ════════ Gemeinde Ottersgrund ════════ -->
<template id="t-amt-standard">
<article class="fassung" lang="de" aria-labelledby="h1">
<h1 id="h1" tabindex="-1">Willkommen bei der Gemeinde Ottersgrund</h1>
<div class="standard">
<div>
<p>Die Gemeindeverwaltung Ottersgrund ist Ansprechpartnerin für rund 4.800 Einwohnerinnen und Einwohner in den Ortsteilen Ottersgrund, Unterweiler und Brunnhof. Hier finden Sie Bürgerservice, Bekanntmachungen, Sitzungstermine des Gemeinderats sowie Informationen zu Kindertagesstätten, Abfallwirtschaft und Bauen.</p>
<p>Viele Anliegen können Sie online erledigen, etwa Meldebescheinigungen, Sperrmüllanmeldungen oder die Reservierung des Bürgersaals. Für Ausweisdokumente vereinbaren Sie bitte einen Termin im Bürgerbüro.</p>
</div>
<aside class="kasten" aria-labelledby="k-zeit"><h2 id="k-zeit">Bürgerbüro</h2><ul><li>Mo, Di, Fr 8:00–12:00</li><li>Do 8:00–12:00, 14:00–18:00</li><li>Rathausplatz 1</li></ul></aside>
</div>
</article>
</template>
<template id="t-amt-leicht">
<article class="fassung" lang="de" aria-labelledby="h1">
<span class="untertitel">Leichte Sprache</span>
<h1 id="h1" tabindex="-1">Die Gemeinde Ottersgrund. In Leichter Sprache.</h1>
<div class="amt-raster">
<section aria-labelledby="a1"><span class="bildsymbol"><svg role="img" aria-label="Rathaus-Tür"><use href="#s-tuer"/></svg></span><div><h2 id="a1"><span class="nummer" aria-hidden="true">1</span>Was macht die Gemeinde?</h2><p>Die Gemeinde hilft den Menschen in Ottersgrund.</p><p>Zum Beispiel:</p><p>Sie brauchen einen Ausweis.</p><p>Oder Sie ziehen um.</p><p>Dann gehen Sie ins Bürger-Büro.</p></div></section>
<section aria-labelledby="a2"><span class="bildsymbol"><svg role="img" aria-label="Wegweiser"><use href="#s-wegweiser"/></svg></span><div><h2 id="a2"><span class="nummer" aria-hidden="true">2</span>So finden Sie sich zurecht</h2><p>Oben auf jeder Seite ist ein Streifen.</p><div class="mini-kopf" role="img" aria-label="Zeichnung vom Streifen oben: links das Wappen, in der Mitte die Suche, rechts das Menü"><div><span><b>1</b>Wappen</span><span><b>2</b>Suche</span><span><b>3</b>Menü</span></div></div><p>1: Damit kommen Sie zur ersten Seite.</p><p>2: Hier können Sie ein Wort suchen.</p><p>3: Hier sind alle Themen.</p></div></section>
<section aria-labelledby="a3"><span class="bildsymbol"><svg role="img" aria-label="Person im Roll-Stuhl"><use href="#s-rad"/></svg></span><div><h2 id="a3"><span class="nummer" aria-hidden="true">3</span>Barriere-Freiheit</h2><p>Alle Menschen sollen die Internet-Seite benutzen können.</p><p>Manche Teile sind noch schwer.</p><p>Zum Beispiel: alte Dokumente.</p><p>Sie finden etwas schwer?</p><p>Dann schreiben Sie uns eine E-Mail.</p><p><a href="#">Mehr zur Barriere-Freiheit</a></p></div></section>
<section aria-labelledby="a4"><span class="bildsymbol"><svg role="img" aria-label="Buch"><use href="#s-buch"/></svg></span><div><h2 id="a4"><span class="nummer" aria-hidden="true">4</span>Mehr in Leichter Sprache</h2><ul class="links"><li><a href="#">Das Bürger-Büro</a></li><li><a href="#">Müll und Sperr-Müll</a></li><li><a href="#">Kinder-Garten</a></li></ul><div class="video" role="img" aria-label="Platz für ein Video in Deutscher Gebärden-Sprache"><div><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M10 8.5v7l6-3.5z" fill="currentColor"/></svg><span class="platzhalter" style="color:var(--text)">Video in Deutscher Gebärdensprache mit Untertitel, nach § 4 BITV 2.0</span></div></div></div></section>
</div>
<aside class="ueber" aria-labelledby="ueber-h2">
<h2 id="ueber-h2">Über diesen Text</h2>
<p>Die vier Teile oben sind Pflicht für öffentliche Stellen nach § 4 BITV 2.0 bzw. der Verordnung des Landes: Inhalte, Navigation, Erklärung zur Barrierefreiheit, weitere Angebote, jeweils in Leichter Sprache und Gebärdensprache.</p>
<p><span class="platzhalter">Demo: Beispieltext. Übersetzung durch ein Büro für Leichte Sprache und Prüfung durch eine Prüfgruppe vom Kunden beauftragen und prüfen lassen.</span></p>
</aside>
</article>
</template>
<!-- ════════ Tuchmacherhaus (Kultur) ════════ -->
<template id="t-kultur-standard">
<article class="fassung" lang="de" aria-labelledby="h1">
<h1 id="h1" tabindex="-1">Ihr Besuch im Tuchmacherhaus</h1>
<div class="besuch">
<div>
<h2>Ausstellung</h2>
<p>Die Dauerausstellung dokumentiert drei Jahrhunderte Tuchherstellung an der Lieser: von der Schafschur über das Walken und Färben bis zum Handel auf den Messen. Ein funktionsfähiger Webstuhl aus dem Jahr 1862 wird sonntags vorgeführt.</p>
<h2>Barrierefreiheit</h2>
<p>Erdgeschoss und Obergeschoss sind über einen Aufzug erreichbar. Ein Rollstuhl kann an der Kasse entliehen werden. Für Gruppen bieten wir Führungen mit Tastobjekten an.</p>
</div>
<ul class="fakten">
<li><svg aria-hidden="true"><use href="#s-kalender"/></svg><div><b>Öffnungszeiten</b>Di bis So 10–17 Uhr</div></li>
<li><svg aria-hidden="true"><use href="#s-geld"/></svg><div><b>Eintritt</b>6 €, ermäßigt 3 €, Kinder frei</div></li>
</ul>
</div>
</article>
</template>
<template id="t-kultur-einfach">
<article class="fassung" lang="de" aria-labelledby="h1">
<span class="untertitel">Einfache Sprache</span>
<h1 id="h1" tabindex="-1">Besuch im Tuchmacherhaus</h1>
<div class="besuch">
<div>
<h2>Was gibt es zu sehen?</h2>
<p>Früher haben die Menschen hier Stoff gemacht. Aus der Wolle von Schafen. Im Museum sehen Sie, wie das ging: vom Scheren bis zum fertigen Stoff.</p>
<p>Am Sonntag läuft ein alter <button class="wort" type="button" aria-expanded="false" aria-controls="w1">Webstuhl</button>.<span class="wort-erkl" id="w1" hidden><b>Webstuhl:</b> eine Maschine aus Holz. Damit macht man aus Fäden Stoff.</span> Er ist über 160 Jahre alt.</p>
<h2>Kann ich mit dem Rollstuhl kommen?</h2>
<p>Ja. Es gibt einen <button class="wort" type="button" aria-expanded="false" aria-controls="w2">Aufzug</button>.<span class="wort-erkl" id="w2" hidden><b>Aufzug:</b> ein kleiner Raum, der Sie nach oben und unten fährt. Man sagt auch Fahrstuhl.</span> Sie kommen in alle Räume. An der Kasse können Sie einen Rollstuhl leihen.</p>
<p>Für Gruppen gibt es <button class="wort" type="button" aria-expanded="false" aria-controls="w3">Führungen zum Tasten</button>.<span class="wort-erkl" id="w3" hidden><b>Führung zum Tasten:</b> Jemand zeigt Ihnen das Museum. Sie dürfen dabei Dinge anfassen.</span></p>
</div>
<ul class="fakten">
<li><svg aria-hidden="true"><use href="#s-kalender"/></svg><div><b>Wann ist offen?</b>Dienstag bis Sonntag, 10 bis 17 Uhr</div></li>
<li><svg aria-hidden="true"><use href="#s-geld"/></svg><div><b>Was kostet es?</b>6 Euro. Mit Ausweis 3 Euro. Kinder zahlen nichts.</div></li>
</ul>
</div>
<aside class="ueber" aria-labelledby="ueber-h3"><h2 id="ueber-h3">Über diesen Text</h2><p>Einfache Sprache: kürzer und klarer als der Standard-Text, aber keine Leichte Sprache. Schwere Wörter erklärt ein Klick direkt im Text.</p><p><span class="platzhalter">Demo: Beispieltext. Vom Kunden prüfen lassen.</span></p></aside>
</article>
</template>
<script>
(() => {
const H = document.documentElement;
const reduziert = () => H.classList.contains('reduziert');
const $ = (s, r = document) => r.querySelector(s), $$ = (s, r = document) => [...r.querySelectorAll(s)];
const ICON = {
standard: '<svg viewBox="0 0 32 32" aria-hidden="true"><path d="M6 8h20M6 13h20M6 18h20M6 23h14" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>',
einfach: '<svg viewBox="0 0 32 32" aria-hidden="true"><path d="M6 10h16M6 17h12M6 24h16" stroke="currentColor" stroke-width="2.6" stroke-linecap="round"/></svg>',
leicht: '<svg viewBox="0 0 32 32" aria-hidden="true"><circle cx="16" cy="11" r="5" fill="none" stroke="currentColor" stroke-width="2.4"/><path d="M7 27c1-6 5-9 9-9s8 3 9 9" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round"/></svg>'
};
const WELTEN = {
pflege: {
stufen: [['standard', 'Standard', 'Fachsprache'], ['einfach', 'Einfach', 'Einfache Sprache'], ['leicht', 'Leicht', 'Leichte Sprache']],
kopf: `<a class="marke" href="#"><svg viewBox="0 0 40 40" aria-hidden="true"><circle cx="20" cy="20" r="20" fill="#5B2A4A"/><path d="M12 22c0-6 4-10 8-10s8 4 8 10-4 8-8 8-8-2-8-8z" fill="#FFC845"/><path d="M20 12c1-3 4-5 7-5" stroke="#FAF7F2" stroke-width="2" fill="none" stroke-linecap="round"/></svg><span>Pflegedienst Haselgrund<small>Wittlich und Umgebung</small></span></a><a class="anruf" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" aria-hidden="true"><path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2"/></svg>06571 0 94 12</a>`,
fuss: '<span>Pflegedienst Haselgrund (erfunden) · Wittlich</span><span><a href="#">Impressum</a> · <a href="#">Datenschutz</a> · <a href="#">Barrierefreiheit</a></span>'
},
amt: {
stufen: [['standard', 'Standard', 'Verwaltungssprache'], ['leicht', 'Leicht', 'Leichte Sprache']],
kopf: `<a class="marke" href="#"><svg viewBox="0 0 40 40" aria-hidden="true"><path d="M6 4h28v18c0 8-6 13-14 16C12 35 6 30 6 22z" fill="#5B2A4A"/><path d="M12 22c3-4 5-6 8-6s5 2 8 6c-3 2-5 3-8 3s-5-1-8-3z" fill="#FFC845"/><path d="M14 10h12" stroke="#FAF7F2" stroke-width="2" stroke-linecap="round"/></svg><span>Gemeinde Ottersgrund<small>Rathaus und Bürgerservice</small></span></a><a class="anruf" href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" aria-hidden="true"><path d="M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2"/></svg>Bürgerbüro</a>`,
fuss: '<span>Gemeinde Ottersgrund (erfunden)</span><span><a href="#">Leichte Sprache</a> · <a href="#">Gebärdensprache</a> · <a href="#">Erklärung zur Barrierefreiheit</a></span>'
},
kultur: {
stufen: [['standard', 'Standard', 'Museumstext'], ['einfach', 'Einfach', 'Einfache Sprache']],
kopf: `<a class="marke" href="#"><svg viewBox="0 0 40 40" aria-hidden="true"><rect width="40" height="40" rx="8" fill="#5B2A4A"/><path d="M8 12h24M8 20h24M8 28h24M14 8v24M20 8v24M26 8v24" stroke="#FFC845" stroke-width="2"/></svg><span>Tuchmacherhaus<small>Museum für Handwerk an der Lieser</small></span></a><a class="anruf" href="#">Tickets</a>`,
fuss: '<span>Tuchmacherhaus (erfunden) · Museum</span><span><a href="#">Einfache Sprache</a> · <a href="#">Barrierefreiheit</a></span>'
}
};
let welt = 'pflege', stufe = null;
const SPEICHER = 'fundus-sprachstufe';
const ansage = t => { const a = $('[data-ansage]'); a.textContent = ''; setTimeout(() => a.textContent = t, 30); };
function gemerkt() { try { return localStorage.getItem(SPEICHER); } catch (e) { return null; } }
function merken(s) { try { localStorage.setItem(SPEICHER, s); } catch (e) { /* privat */ } }
function zeigeStufe(s, fokus) {
const W = WELTEN[welt];
const erlaubt = W.stufen.map(x => x[0]);
stufe = erlaubt.includes(s) ? s : erlaubt.includes(gemerkt()) ? gemerkt() : 'standard';
$$('.stufe').forEach(b => b.setAttribute('aria-pressed', String(b.dataset.stufe === stufe)));
const t = document.getElementById(`t-${welt}-${stufe}`);
const main = $('[data-inhalt]');
main.replaceChildren(t.content.cloneNode(true));
const art = main.firstElementChild;
if (!reduziert()) { art.classList.add('ein'); }
/* Leichte Sprache: Wörter mit Bindestrich nie am Zeilenende trennen */
$$('.leicht, .amt-raster', main).forEach(box => {
const w = document.createTreeWalker(box, NodeFilter.SHOW_TEXT); const knoten = [];
while (w.nextNode()) if (/\S-\S/.test(w.currentNode.nodeValue)) knoten.push(w.currentNode);
knoten.forEach(n => {
const frag = document.createDocumentFragment();
n.nodeValue.split(/(\S*\S-\S\S*)/).forEach((teil, i) => {
if (i % 2) { const sp = document.createElement('span'); sp.className = 'nb'; sp.textContent = teil; frag.append(sp); } else if (teil) frag.append(teil);
});
n.replaceWith(frag);
});
});
$$('button.wort', main).forEach(b => b.addEventListener('click', () => {
const an = b.getAttribute('aria-expanded') !== 'true';
b.setAttribute('aria-expanded', String(an)); document.getElementById(b.getAttribute('aria-controls')).hidden = !an;
}));
if (fokus) { $('#h1', main).focus(); const name = W.stufen.find(x => x[0] === stufe)[2]; ansage('Seite in ' + name); }
}
function setzeWelt(v, still) {
welt = WELTEN[v] ? v : 'pflege';
const W = WELTEN[welt];
$('[data-kopf]').innerHTML = W.kopf; $('[data-fuss]').innerHTML = W.fuss;
$('[data-stufen]').innerHTML = W.stufen.map(([id, name, klein]) => `<button class="stufe" type="button" data-stufe="${id}" aria-pressed="false">${ICON[id]}<span>${name}<small>${klein}</small></span></button>`).join('');
$('[data-stufen-hinweis]').textContent = W.stufen.length === 3 ? 'Dieselbe Seite in drei Fassungen. Ihre Wahl bleibt gespeichert.' : 'Dieselbe Seite in zwei Fassungen. Ihre Wahl bleibt gespeichert.';
$$('.stufe').forEach(b => b.addEventListener('click', () => { merken(b.dataset.stufe); zeigeStufe(b.dataset.stufe, true); }));
$$('[data-v]').forEach(b => b.setAttribute('aria-pressed', String(b.dataset.v === welt)));
zeigeStufe(welt === 'amt' ? 'leicht' : (gemerkt() || 'standard'));
if (!still) { const q = new URLSearchParams(location.search); q.set('v', welt); history.replaceState(null, '', location.pathname + '?' + q.toString().replace(/=(?=&|$)/g, '')); }
}
$$('[data-v]').forEach(b => b.addEventListener('click', () => setzeWelt(b.dataset.v)));
setzeWelt(new URLSearchParams(location.search).get('v'), true);
let schleife = null, i = 0;
function neustart() { clearTimeout(schleife); zeigeStufe(WELTEN[welt].stufen[0][0]); }
function vorfuehren() {
clearTimeout(schleife);
const st = WELTEN[welt].stufen; i = (i + 1) % st.length; zeigeStufe(st[i][0]);
schleife = setTimeout(vorfuehren, 2200);
}
function pause() { clearTimeout(schleife); }
function weiter() { vorfuehren(); }
})();
</script>
</body>
</html>