/* ============================================================ Lesehilfe Echte Einstellungen, die der Besucher selbst trifft, keine aufgesetzte Automatik. Gespeichert wird nur im Browser des Besuchers, es geht nichts an uns. Gesteuert über Attribute am -Element: data-schrift="gross" | "sehrgross" data-kontrast="hoch" | "sw" | "farbenblind" data-ruhig="an" Warum am und nicht per Klasse am Body: die Attribute werden von einem winzigen Skript im Seitenkopf gesetzt, bevor irgendetwas gezeichnet wird. Sonst blitzt bei jedem Seitenwechsel kurz die normale Darstellung auf. ============================================================ */ /* --- Schriftgrösse --- Über die Wurzel, damit alles mitwächst, was in rem gerechnet ist. Zoom des Browsers bleibt davon unberührt und wirkt zusätzlich. */ html[data-schrift="gross"] { font-size: 112.5%; } html[data-schrift="sehrgross"] { font-size: 125%; } /* Feste Pixelgrössen wachsen nicht mit. Die wichtigsten nachziehen. */ html[data-schrift="gross"] body, html[data-schrift="sehrgross"] body { line-height: 1.75; } html[data-schrift="sehrgross"] .small, html[data-schrift="sehrgross"] small { font-size: .95rem; } /* ============================================================ Grössere Schrift heisst mehr Platzbedarf Eine Kopfzeile, die bei 16px gerade noch passt, läuft bei 20px seitlich aus dem Bild. Statt die Schrift kleiner zu rechnen und die Einstellung damit auszuhebeln, bekommt die Seite mehr Platz und schaltet notfalls auf die Burger-Leiste um. ============================================================ */ /* Die volle Leiste darf die ganze Fensterbreite nutzen, nicht nur die 1320px des Rasters. Das schafft auf breiten Schirmen genug Luft. */ html[data-schrift="gross"] #mainNav > .container, html[data-schrift="sehrgross"] #mainNav > .container { max-width: none; } /* Reicht auch das nicht, übernimmt die Burger-Leiste. Die Grenzen sind gemessen, nicht geschätzt: die Leiste braucht 1005px bei normaler Schrift, mal 1,125 sind 1131, mal 1,25 sind 1256. Dazu etwas Luft für angemeldete Besucher, deren Name im Knopf steht. */ @media (max-width: 1249.98px) { html[data-schrift="gross"] .nav-mobil { display: flex; } html[data-schrift="gross"] .nav-desktop { display: none; } } @media (max-width: 1399.98px) { html[data-schrift="sehrgross"] .nav-mobil { display: flex; } html[data-schrift="sehrgross"] .nav-desktop { display: none; } } /* Menüpunkte in der vollen Leiste: bei grosser Schrift enger setzen, sonst frisst der Abstand den gewonnenen Platz wieder auf. */ html[data-schrift="gross"] .navbar-nav .nav-link, html[data-schrift="sehrgross"] .navbar-nav .nav-link { padding-left: .45rem !important; padding-right: .45rem !important; font-size: .78rem; } html[data-schrift="gross"] .nav-desktop, html[data-schrift="sehrgross"] .nav-desktop { gap: .6rem !important; } /* Das Schubfach am rechten Rand wächst mit, sonst wird jede Zeile darin zum Umbruch. */ html[data-schrift="gross"] #mobileMenu { width: 20rem; } html[data-schrift="sehrgross"] #mobileMenu { width: 22rem; } @media (max-width: 26rem) { html[data-schrift="gross"] #mobileMenu, html[data-schrift="sehrgross"] #mobileMenu { width: 88vw; } } /* Lange Wörter dürfen brechen. Ein einziges „Regionalentwicklung" in einer Überschrift schiebt sonst die ganze Seite in die Breite. */ html[data-schrift="gross"] h1, html[data-schrift="gross"] h2, html[data-schrift="gross"] h3, html[data-schrift="gross"] .btn, html[data-schrift="gross"] .badge, html[data-schrift="gross"] td, html[data-schrift="sehrgross"] h1, html[data-schrift="sehrgross"] h2, html[data-schrift="sehrgross"] h3, html[data-schrift="sehrgross"] .btn, html[data-schrift="sehrgross"] .badge, html[data-schrift="sehrgross"] td { overflow-wrap: break-word; } /* Was auf feste Höhe gesetzt ist, muss mitwachsen dürfen. */ html[data-schrift="gross"] .btn, html[data-schrift="sehrgross"] .btn, html[data-schrift="gross"] .form-control, html[data-schrift="sehrgross"] .form-control, html[data-schrift="gross"] .form-select, html[data-schrift="sehrgross"] .form-select { height: auto; min-height: 0; } html[data-schrift="gross"] .text-truncate, html[data-schrift="sehrgross"] .text-truncate { white-space: normal; overflow: visible; } /* Knopfreihen und Kachelraster umbrechen lassen statt überlaufen. */ html[data-schrift="gross"] .btn-group, html[data-schrift="sehrgross"] .btn-group, html[data-schrift="gross"] .d-flex.gap-2, html[data-schrift="sehrgross"] .d-flex.gap-2, html[data-schrift="gross"] .d-flex.gap-3, html[data-schrift="sehrgross"] .d-flex.gap-3 { flex-wrap: wrap; } /* Tabellen bekommen einen eigenen Schieber, statt die Seite zu weiten. */ html[data-schrift="gross"] .table-responsive, html[data-schrift="sehrgross"] .table-responsive { overflow-x: auto; } /* --- Kontrast --- Nicht einfach alles schwarz: Text und Rahmen werden kräftiger, die Hausfarbe bleibt erkennbar, wird aber dunkler. */ html[data-kontrast="hoch"] { --gwr-dark: #000000; --gwr-muted: #3a3d3b; --gwr-primary: #1d4230; --gwr-primary-rgb: 29, 66, 48; --gwr-soft: #7ba793; --gwr-sand: #eef2f0; } html[data-kontrast="hoch"] body { color: #000; } html[data-kontrast="hoch"] .text-muted { color: #3a3d3b !important; } html[data-kontrast="hoch"] .card, html[data-kontrast="hoch"] .re-card, html[data-kontrast="hoch"] .pb-kachel, html[data-kontrast="hoch"] .gwr-pillar-card, html[data-kontrast="hoch"] .cc-card { border-color: #1d4230 !important; } html[data-kontrast="hoch"] a { text-decoration: underline !important; } html[data-kontrast="hoch"] .btn { border-width: 2px; } html[data-kontrast="hoch"] :focus-visible { outline: 3px solid #000; outline-offset: 2px; } /* --- Schwarzweiss --- Alles Farbige wird zu Grau. Die Hausfarbe verschwindet, dafür trägt allein die Helligkeit die Unterscheidung. Wichtig: kein Filter auf oder . Ein Filter dort macht aus dem Element einen Bezugsrahmen für alles, was fest positioniert ist, und dann klebt das Menü-Schubfach mitten in der Seite statt am Fensterrand. Deshalb umgefärbt wird über die Farbwerte, und der Graufilter trifft nur Bilder und einzeln eingefärbte Stellen. */ html[data-kontrast="sw"] { --gwr-primary: #1a1a1a; --gwr-primary-rgb: 26, 26, 26; --gwr-dark: #000000; --gwr-muted: #4a4a4a; --gwr-soft: #8a8a8a; --gwr-sand: #f0f0f0; --bs-primary: #1a1a1a; --bs-primary-rgb: 26, 26, 26; --bs-success: #2e2e2e; --bs-success-rgb: 46, 46, 46; --bs-danger: #000000; --bs-danger-rgb: 0, 0, 0; --bs-warning: #5a5a5a; --bs-warning-rgb: 90, 90, 90; --bs-info: #3d3d3d; --bs-info-rgb: 61, 61, 61; --bs-link-color: #000000; } html[data-kontrast="sw"] body { color: #000; background: #fff; } html[data-kontrast="sw"] .text-muted { color: #4a4a4a !important; } /* Bilder, Videos und einzeln eingefärbte Stellen entfärben. Der Filter sitzt hier nur auf Elementen, die nichts positionieren. */ html[data-kontrast="sw"] img, html[data-kontrast="sw"] video, html[data-kontrast="sw"] picture, html[data-kontrast="sw"] .badge, html[data-kontrast="sw"] .search-chip, html[data-kontrast="sw"] .sr-icon, html[data-kontrast="sw"] .cc-img-wrap, html[data-kontrast="sw"] .gwr-hero-gradient, html[data-kontrast="sw"] [style*="background:"], html[data-kontrast="sw"] [style*="background-color"], html[data-kontrast="sw"] [style*="color:"] { filter: grayscale(1); } /* Ohne Farbe muss die Kante die Arbeit machen. */ html[data-kontrast="sw"] .card, html[data-kontrast="sw"] .re-card, html[data-kontrast="sw"] .pb-kachel, html[data-kontrast="sw"] .gwr-pillar-card, html[data-kontrast="sw"] .cc-card { border: 1px solid #000 !important; } html[data-kontrast="sw"] a { text-decoration: underline !important; } html[data-kontrast="sw"] .btn { border-width: 2px; border-color: #000; } html[data-kontrast="sw"] .btn-gwr, html[data-kontrast="sw"] .btn-primary { background: #1a1a1a; color: #fff; } html[data-kontrast="sw"] :focus-visible { outline: 3px solid #000; outline-offset: 2px; } /* --- Farbenblind-freundlich --- Grün und Rot liegen für die häufigsten Formen der Farbenblindheit dicht beieinander. Blau und Orange lassen sich dagegen bei jeder Form auseinanderhalten. Zusätzlich hängt an keiner Stelle die Aussage allein an der Farbe: Verweise werden unterstrichen und Status-Marken bekommen ein Zeichen davor. */ html[data-kontrast="farbenblind"] { --gwr-primary: #005a9c; --gwr-primary-rgb: 0, 90, 156; --gwr-dark: #14213d; --gwr-muted: #4a5568; --gwr-soft: #7fb3d5; --gwr-sand: #eaf2f8; --bs-primary: #005a9c; --bs-primary-rgb: 0, 90, 156; --bs-success: #005a9c; --bs-success-rgb: 0, 90, 156; --bs-danger: #b04600; --bs-danger-rgb: 176, 70, 0; --bs-warning: #b04600; --bs-warning-rgb: 176, 70, 0; --bs-info: #4a5568; --bs-info-rgb: 74, 85, 104; } html[data-kontrast="farbenblind"] .text-success { color: #005a9c !important; } html[data-kontrast="farbenblind"] .text-danger, html[data-kontrast="farbenblind"] .text-warning { color: #b04600 !important; } html[data-kontrast="farbenblind"] .bg-success { background-color: #005a9c !important; } html[data-kontrast="farbenblind"] .bg-danger, html[data-kontrast="farbenblind"] .bg-warning { background-color: #b04600 !important; color: #fff !important; } html[data-kontrast="farbenblind"] a { text-decoration: underline !important; } /* Ein Zeichen vor der Marke, damit die Aussage auch ohne Farbe ankommt */ html[data-kontrast="farbenblind"] .badge.bg-success::before, html[data-kontrast="farbenblind"] .alert-success::before { content: "\2713\00a0"; } html[data-kontrast="farbenblind"] .badge.bg-danger::before, html[data-kontrast="farbenblind"] .alert-danger::before { content: "\2715\00a0"; } html[data-kontrast="farbenblind"] .badge.bg-warning::before, html[data-kontrast="farbenblind"] .alert-warning::before { content: "\26a0\00a0"; } html[data-kontrast="farbenblind"] :focus-visible { outline: 3px solid #b04600; outline-offset: 2px; } /* --- Ruhige Ansicht --- Schmückende Bilder, Verläufe und Bewegung weg. Bilder, die etwas aussagen, bleiben: ein Kursbild trägt Information, ein Farbverlauf im Kopfbereich nicht. */ html[data-ruhig="an"] .gwr-hero-video video, html[data-ruhig="an"] .gwr-hero-video img, html[data-ruhig="an"] .cc-img-wrap, html[data-ruhig="an"] .re-card-img, html[data-ruhig="an"] .pb-kachel-bild, html[data-ruhig="an"] .cd-hero-img { display: none !important; } html[data-ruhig="an"] .gwr-hero-video, html[data-ruhig="an"] .gwr-page-header { background: var(--gwr-sand) !important; min-height: 0 !important; max-height: none !important; padding: 1.5rem 0 !important; } html[data-ruhig="an"] .gwr-hero-card { background: #fff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; color: var(--gwr-dark) !important; border: 1px solid var(--gwr-soft) !important; } html[data-ruhig="an"] *, html[data-ruhig="an"] *::before, html[data-ruhig="an"] *::after { animation: none !important; transition: none !important; transform: none !important; } html[data-ruhig="an"] [data-reveal] { opacity: 1 !important; } html[data-ruhig="an"] .gwr-pillar-card::after, html[data-ruhig="an"] .cc-card::after { display: none !important; } /* Wer Bewegung abgestellt hat, bekommt sie auch ohne Lesehilfe nicht */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } [data-reveal] { opacity: 1 !important; } } /* --- Der Knopf im Kopfbereich --- */ .lh-knopf { display: inline-flex; align-items: center; gap: .3rem; border: 1px solid transparent; background: transparent; color: var(--gwr-primary); border-radius: 8px; padding: .3rem .5rem; font-size: .95rem; cursor: pointer; line-height: 1; } .lh-knopf:hover { background: rgba(var(--gwr-primary-rgb), .08); } .lh-knopf.ist-aktiv { border-color: var(--gwr-primary); background: rgba(var(--gwr-primary-rgb), .1); } /* --- Das Fenster --- */ .lh-gruppe { margin-bottom: 1.1rem; } .lh-gruppe:last-of-type { margin-bottom: .5rem; } .lh-gruppe > legend, .lh-gruppe > .lh-titel { font-size: .8rem; font-weight: 600; color: var(--gwr-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .45rem; padding: 0; float: none; width: auto; } .lh-wahl { display: flex; gap: .4rem; flex-wrap: wrap; } .lh-wahl button { flex: 1 1 0; min-width: 5.5rem; border: 1px solid #dfe2e5; background: #fff; border-radius: 9px; padding: .6rem .5rem; cursor: pointer; color: var(--gwr-dark); display: flex; flex-direction: column; align-items: center; gap: .2rem; } .lh-wahl button:hover { border-color: var(--gwr-primary); } .lh-wahl button[aria-pressed="true"] { border-color: var(--gwr-primary); background: rgba(var(--gwr-primary-rgb), .08); color: var(--gwr-primary); font-weight: 600; } .lh-wahl .lh-probe { line-height: 1; } .lh-wahl .lh-name { font-size: .8rem; } .lh-hinweis { font-size: .82rem; color: var(--gwr-muted); margin: .75rem 0 0; } /* Derselbe Knopf im Fussbereich, dort steht er auf Dunkel */ .gwr-footer .lh-knopf { color: rgba(255,255,255,.75); border-color: rgba(255,255,255,.25); gap: .4rem; } .gwr-footer .lh-knopf:hover { color: #fff; border-color: rgba(255,255,255,.6); background: rgba(255,255,255,.08); } .gwr-footer .lh-knopf.ist-aktiv { color: #fff; border-color: #fff; background: rgba(255,255,255,.14); }