/* Schrift-Tokens von Intera auf DC GYM abgebildet. Das Werkzeug wurde dort gebaut und nutzt --ff-display / --ff / --ffd; hier heissen sie --ff-head und --ff-body. Statt die Datei zu durchsuchen, werden die erwarteten Namen einmal definiert - damit bleibt sie zwischen beiden Projekten austauschbar. */ :root{--ff-display:var(--ff-head);--ff:var(--ff-body);--ffd:var(--ff-head);} /* ============================================================ Barrierefreiheits-Werkzeug — DC GYM Übernommen aus sg-russdorf und auf die Farbwelt hier angepasst. Eigenständig gehalten: Die Unterseiten (aktuelles, karriere) bringen ihre Gestaltung inline mit und laden style.css gar nicht. Deshalb steht hier alles Nötige, und jede Variable hat einen Rückfallwert. ============================================================ */ /* ---------- Der Knopf ---------- */ .a11y-fab { position: fixed; right: 1.1rem; /* Über der festen Kontaktleiste am unteren Rand, sonst verdeckt sie ihn. Die Leiste ist 60 px hoch, dazu der sichere Bereich auf iPhones. */ bottom: calc(var(--sticky-h, 60px) + var(--safe-b, 0px) + 0.9rem); z-index: 1500; width: 3.2rem; height: 3.2rem; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: var(--accent, #E8730C); color: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22); transition: transform 0.25s var(--ease, cubic-bezier(.4, 0, .2, 1)), background 0.25s var(--ease, cubic-bezier(.4, 0, .2, 1)); } .a11y-fab:hover { transform: scale(1.09); background: var(--accent-deep, #C85F00); } .a11y-fab:focus-visible { outline: 3px solid var(--ink, #2E2E30); outline-offset: 3px; } /* Bei offenem Menü und beim Cookie-Hinweis aus dem Weg. Das Menü liegt im Quelltext vor dem Knopf, deshalb greift ~ . */ .nav-overlay.open ~ .a11y-fab, .nav-overlay.open ~ .a11y-panel, body.cookie-locked .a11y-fab, body.cookie-locked .a11y-panel { display: none; } /* ---------- Das Feld ---------- */ .a11y-panel { position: fixed; right: 1.1rem; bottom: calc(var(--sticky-h, 60px) + var(--safe-b, 0px) + 4.9rem); z-index: 1600; width: min(21rem, calc(100vw - 2.2rem)); max-height: calc(100vh - var(--sticky-h, 60px) - 8rem); overflow-y: auto; background: var(--paper, #fff); border: 1px solid var(--paper-rule, #E2E2E4); border-radius: 12px; padding: 1.25rem; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18); display: none; font-family: var(--ff-body, var(--ff, 'Inter', system-ui, sans-serif)); color: var(--ink, #2E2E30); } .a11y-panel.is-open { display: block; } .a11y-panel h3 { font-family: var(--ff-display, var(--ffd, 'Outfit', system-ui, sans-serif)); font-size: 1.25rem; font-weight: 400; margin: 0 0 0.9rem; color: var(--ink, #2E2E30); } .a11y-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.6rem 0; border-top: 1px solid var(--paper-rule, #E2E2E4); font-size: 0.9rem; } .a11y-row:first-of-type { border-top: 0; } .a11y-row > span { flex: 1 1 auto; min-width: 0; } .a11y-seg { display: flex; gap: 0.25rem; flex: 0 0 auto; } .a11y-seg button, .a11y-toggle { border: 1px solid var(--paper-rule, #E2E2E4); padding: 0.35rem 0.8rem; border-radius: 100px; background: var(--paper-deep, #F0F0F1); color: var(--ink, #2E2E30); font: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer; transition: background 0.2s, color 0.2s, border-color 0.2s; } .a11y-toggle { flex: 0 0 auto; min-width: 3.6rem; } .a11y-seg button:hover, .a11y-toggle:hover { border-color: var(--accent, #E8730C); } .a11y-seg button.is-active, .a11y-toggle.is-active { background: var(--accent, #E8730C); border-color: var(--accent, #E8730C); color: #fff; } /* ============================================================ Wirkung der Einstellungen Die Merkmale sitzen am , NICHT am : Fast alle Größen im Stylesheet stehen in rem, und rem hängt am Wurzelelement. Am gesetzt ließe die Schriftgröße nur den Fließtext wachsen, während Überschriften, Knöpfe und Karten unverändert blieben. html.klasse schlägt :root, weil die Klasse die Spezifität erhöht — auch gegenüber den :root-Blöcken, die jede Unterseite inline mitbringt. ============================================================ */ html.a11y-large { font-size: 114%; } html.a11y-xlarge { font-size: 130%; } html.a11y-underline a { text-decoration: underline; text-underline-offset: 0.16em; } /* :focus, nicht nur :focus-visible. Wer diesen Schalter umlegt, will den Rahmen sehen — auch nach einem Mausklick. :focus-visible zeigt ihn nur beim Tabben, dann sieht es aus, als passiere nichts. */ html.a11y-focus :focus, html.a11y-focus :focus-visible { outline: 4px solid #C62828 !important; outline-offset: 3px !important; box-shadow: 0 0 0 7px #fff, 0 0 0 10px #C62828 !important; border-radius: 4px; } html.a11y-motion *, html.a11y-motion *::before, html.a11y-motion *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } html.a11y-motion { scroll-behavior: auto; } /* Eingeblendete Abschnitte sofort sichtbar machen, sonst bleiben sie unsichtbar, weil die Einblendung nie läuft. */ html.a11y-motion [data-reveal], html.a11y-motion .reveal, html.a11y-motion .fade-up { opacity: 1 !important; transform: none !important; } /* ---------- Hoher Kontrast ---------- */ html.a11y-contrast { --paper: #fff; --paper-soft: #fff; --paper-deep: #fff; --paper-rule: #000; --ink: #000; --ink-soft: #000; --ink-mid: #1a1a1a; --ink-muted: #333; --accent: #A33F00; --accent-deep: #7A2F00; --accent-light: #fff; --gray-brand: #000; } html.a11y-contrast body { background: #fff; color: #000; } html.a11y-contrast .site-header { background: #fff !important; border-bottom: 2px solid #000; } html.a11y-contrast .sticky-bar { background: #000 !important; } /* Die Körnung über der Seite nimmt bei hohem Kontrast Schärfe weg. */ html.a11y-contrast body::before { display: none !important; } @media print { .a11y-fab, .a11y-panel { display: none !important; } }