/* ISKA — Bewegung und Zustaende. ───────────────────────────────────────────────────────────────────────── WIRD NACH iska.css GELADEN und gewinnt deshalb bei gleicher Spezifitaet. iska.css bleibt unangetastet; alles, was hier eine dortige Regel aendert, sagt im Kommentar WELCHE und WARUM. ANLASS Gemessen am 23.08.2026 ueber fuenf Seiten (/, /leistungen, /verwalter, /ablauf, /unternehmen), an den WIRKLICH geladenen Stylesheets und den WIRKLICH vorhandenen Knoten: geladene Selektoren 704 Regeln mit :focus-visible 5 Regeln mit :active 5 sichtbare Elemente 1311 davon mit einer Uebergangszeit 108 (8,2 %) davon reagieren auf Bedienung 212 (16,2 %) auf Scrollen reagiert nichts Die Seite ist inhaltlich fertig und fuehlt sich trotzdem tot an. Das ist kein Geschmacksbefund: Von sechs Elementen, die man anfassen kann, antwortet eins. DREI EINGRIFFE, MEHR NICHT 1 Abschnitte setzen sich beim Hereinscrollen — einmal, dezent, nie erneut beim Zurueckscrollen. 2 Hover, Fokus und Druck fuer alles, was man anfassen kann. Dabei ein echter Fehler behoben: Der Fokusring stand auf dunklem Grund bei 1,54:1 und war praktisch unsichtbar. 3 Ein Bauteil, das die Seite nicht hat: ein Lesefortschritt fuer die langen Seiten. /katalog wird 11.055 px hoch und sagte dem Leser nirgends, wie weit er ist. ZWEI BEFUNDE, DIE HIER NICHT ZU BEHEBEN SIND (siehe Bericht) - Die klebende Kopfzeile klebt nicht. `.kopf-fest` traegt sticky, steckt aber in `header.kopf`, das nur so hoch ist wie seine Kinder. Gemessen mit UND ohne diese Datei identisch — die Ursache liegt in `_grund.html` und `iska.css`, beide hier gesperrt. - iska.css bewegt an zwei Stellen `box-shadow` (Eingabefelder). Das widerspricht der eigenen Vorgabe im Kopf jener Datei; hier wird keine weitere dazugebaut. WAS BEWEGT WERDEN DARF Nur transform, opacity und clip-path. Kein width/height/top/left/margin, kein animierter box-shadow, kein mix-blend-mode, kein dauerhaftes will-change. Das Schwesterprojekt lag mit genau diesen Eigenschaften bei 50 ms Bildabstand; die Ursachen stehen im Kopf von iska.css. prefers-reduced-motion schaltet ganz unten ALLES ab — auch die Regeln aus iska.css, nicht nur die eigenen. */ /* ── Werte ─────────────────────────────────────────────────────────────── */ :root{ /* --kurve aus iska.css ist cubic-bezier(.2,.9,.3,1). Bewegung, die etwas EINBLENDET, darf laenger laufen als eine Zustandsaenderung; --schnell (140 ms) ist dafuer zu kurz, deshalb zwei eigene Zeiten statt einer Umdeutung der bestehenden. */ --bw-auftritt:520ms; /* Einblenden beim Scrollen */ --bw-zustand:190ms; /* Hover, Fokus, Druck */ /* Von bewegung.js mit der gemessenen Hoehe der Kopfzeile ueberschrieben. Wird derzeit von keiner Regel dieser Datei gelesen — der Lesefortschritt sitzt am oberen Fensterrand, weil die Kopfzeile nicht klebt. Der Wert bleibt gesetzt, damit ein Andocken sofort moeglich ist, sobald der sticky-Fehler in `_grund.html` behoben ist. */ --bw-kopf:74px; } /* ══════════════════════════════════════════════════════════════════════════ 1 EINBLENDEN BEIM SCROLLEN ────────────────────────────────────────────────────────────────────────── Reihenfolge ist hier alles: Der Ruhezustand ist SICHTBAR. Erst das Skript setzt `.bw-warten` und versteckt damit. Ohne JavaScript, mit einem Fehler im Skript oder mit abgeschaltetem Beobachter steht die Seite vollstaendig da — genau andersherum als bei der ueblichen `.fade-in`-Bauweise, bei der ein Skriptfehler die halbe Seite unsichtbar macht. bewegung.js setzt `.bw-warten` ausserdem NUR auf Elemente, die beim Laden unterhalb der Fensterkante liegen. Was schon zu sehen ist, wird nicht erst versteckt und dann wieder eingeblendet; damit gibt es kein Flackern und keinen zweiten Auftritt neben der Aufmacher-Animation aus site.js. Die eigentliche Bewegung laeuft ueber die Web-Animations-API (Motion), nicht ueber diesen Uebergang. Grund: WAAPI-Animationen stehen ueber den Autorenregeln, laufen also gegen `opacity:0` an, ohne dass die Klasse vorher weg muss. Kein Umschaltflackern an beiden Enden. */ .bw-warten{opacity:0} /* Die kurze Linie neben der Abschnittsmarke (.nr::before in iska.css) zieht sich beim Auftritt auf. Sie ist das Hauszeichen dieser Seite — dass ausgerechnet sie sich zeichnet, macht die Bewegung ISKA-eigen und nicht austauschbar. scaleX auf einem 1,5 px hohen Balken: eine Ebene, kein Layout. `.bw-da` setzt das Skript beim Start des Auftritts, beide Klassen fallen am Ende weg — Ruhezustand ist wieder der aus iska.css. */ .bw-warten .nr::before{transform:scaleX(0);transform-origin:left center} .bw-warten.bw-da .nr::before{transform:scaleX(1); transition:transform var(--bw-auftritt) var(--kurve) 140ms} /* Notbremse. Faengt bewegung.js einen Fehler, setzt es diese Klasse auf und die Seite ist sofort wieder vollstaendig sichtbar. */ .bw-aus .bw-warten{opacity:1} .bw-aus .bw-warten .nr::before{transform:none} /* Sanftes Springen zu Ankern. heft.js faehrt an derselben Stelle bereits `behavior:'smooth'` mit Ausnahme fuer reduzierte Bewegung; diese Regel zieht die uebrigen Ankerverweise (.sprung, das Inhaltsverzeichnis im Fuss, die Sprungmarken des Katalogs) auf dasselbe Verhalten nach. Bewusst in einer no-preference-Abfrage und nicht global. */ @media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} } /* ══════════════════════════════════════════════════════════════════════════ 2 ZUSTAENDE — HOVER, FOKUS, DRUCK ══════════════════════════════════════════════════════════════════════════ */ /* ── 2a Fokus auf dunklem Grund ─────────────────────────────────────────── DAS IST EIN FEHLER, KEIN GESCHMACK. iska.css setzt in Zeile 99 `:focus-visible{outline:2.5px solid var(--signal)}`. --signal ist #004AAD, --nacht ist #0D3266. Nachgerechnet: 1,54:1. WCAG 2.2 verlangt fuer den Fokusindikator 3,0:1 (1.4.11 / 2.4.11). Auf jedem dunklen Abschnitt, auf jedem Fotogrund und im Fuss war der Fokusring damit unsichtbar — und das ist genau dort, wo die Handlungsaufforderungen stehen. Weiss auf --nacht traegt 14,6:1. Eingaben sind ausgenommen: iska.css ersetzt deren Ring bewusst durch Rand plus Hof (`outline:0`), und diese Regel wuerde den Ring wieder hineinschreiben. */ :is(.teil-dunkel,.auf,.tafel,.leiste,.foto-grund,.fuss,.dienst,.vollbild) :is(a,button,summary,[tabindex]):focus-visible{ outline-color:#fff} /* ── 2b Was heute keinen Uebergang hat ─────────────────────────────────── Alle folgenden Elemente aendern in iska.css ihre Farbe beim Ueberfahren, aber sprunghaft. Nur color/border-color/opacity — nichts davon loest ein Neuberechnen des Layouts aus. */ .fuss a,.dienst-tel,.person-ruf a,.person-zeile a,.tk-zeile a,.tk-ruf a, .wahl label,.frage summary,.rueckruf-karte > summary,.vollbild-zu, .marke,.skip,.direkt .gross-tel a,.objekte li h3 a,.posten a, .teil-dunkel .fliess a,.foto-grund .fliess a{ transition:color var(--bw-zustand) var(--kurve), border-color var(--bw-zustand) var(--kurve), background-color var(--bw-zustand) var(--kurve), opacity var(--bw-zustand) var(--kurve), text-decoration-color var(--bw-zustand) var(--kurve)} /* ── 2c Verweise im Fliesstext ─────────────────────────────────────────── Der Browser unterstreicht sie voll deckend. Eine zurueckgenommene Unterstreichung, die beim Ueberfahren AUFZIEHT, ist die ruhigere und zugleich deutlichere Loesung: im Ruhezustand stoert sie den Absatz nicht, beim Anfassen ist sie eindeutig. color-mix mit currentColor statt eines festen Blaus: Auf dunklem Grund und auf Fotogrund sind diese Verweise weiss (iska.css Zeile 1536). Ein fester Wert haette dort eine blaue Linie unter weissen Text gelegt. Kennt der Browser color-mix nicht, faellt die Deklaration weg und die volle Unterstreichung bleibt — der schlechtere, aber nie kaputte Fall. */ .fliess a,.posten p a,.notiz a,.hilfe a{ text-decoration-thickness:1px; text-decoration-color:color-mix(in srgb,currentColor 40%,transparent); transition:text-decoration-color var(--bw-zustand) var(--kurve), color var(--bw-zustand) var(--kurve)} .fliess a:hover,.fliess a:focus-visible, .posten p a:hover,.posten p a:focus-visible, .notiz a:hover,.notiz a:focus-visible, .hilfe a:hover,.hilfe a:focus-visible{ text-decoration-color:currentColor;text-decoration-thickness:2px} /* ── 2d Fokus sieht aus wie Hover ──────────────────────────────────────── iska.css hat fuer diese Elemente eine :hover-Regel, aber keine fuer den Fokus. Der Ring allein sagt „hier steht die Tastatur", nicht „das hier ist derselbe Verweis, den die Maus gerade hervorgehoben haette". Wer mit der Tastatur arbeitet, bekam die halbe Rueckmeldung. */ .nav a:focus-visible{color:var(--tinte)} .fuss a:focus-visible{text-decoration:underline} .dienst-tel:focus-visible{color:var(--nacht-text)} .sprung a:focus-visible{color:var(--signal)} .sprung a:focus-visible::after{transform:translateY(2px)} .knopf-voll:focus-visible::after,.knopf-linie:focus-visible::after{ transform:translateX(3px)} .wege li:focus-within{border-color:var(--linie-stark)} .wege li:focus-within .wege-tat::after{transform:translateX(3px)} .objekte li:focus-within{border-color:var(--linie-stark)} .objekte li:focus-within h3 a{color:var(--signal)} .schritte li:focus-within{background:rgba(13,50,102,.035)} .person-ruf a:focus-visible,.person-zeile a:focus-visible, .direkt .gross-tel a:focus-visible{color:var(--signal)} .tk-ruf a:focus-visible{color:var(--nacht-text)} .tk-zeile a:focus-visible{color:#fff} .frage summary:focus-visible,.rueckruf-karte > summary:focus-visible{ color:var(--signal)} .vollbild-zu:focus-visible{border-color:#fff;background:rgba(255,255,255,.1)} .marke:hover,.marke:focus-visible{opacity:.72} /* ── 2e Druck ──────────────────────────────────────────────────────────── Der Kommentar in iska.css Zeile 2161 sagt es selbst: Ein Knopf, der beim Druecken nichts tut, fuehlt sich auf einem Telefon kaputt an — dort gibt es kein Hover, das den Klick vorher bestaetigt. Bisher galt das fuer genau vier Schaltflaechen. Hier bekommen es alle uebrigen bedienbaren Elemente. Zwei Formen, konsequent getrennt: Flaechen (Knoepfe, Kacheln, Zeilen) sacken 1 px ab Verweise im Text nehmen kurz Deckkraft zurueck Ein Textverweis, der beim Anklicken wegrutscht, sieht nach Fehler aus. */ a.knopf-voll:active:not([disabled]),a.knopf-linie:active:not([disabled]), button.knopf-voll:active:not(:disabled),button.knopf-linie:active:not(:disabled), .knopf:active:not(:disabled),.nav-schalter:active,.heft-pfeil:active:not(:disabled), .vollbild-zu:active,.frage summary:active,.rueckruf-karte > summary:active, .wahl label:active,.sprung a:active{ transform:translateY(1px)} /* Die beiden Kachelarten heben sich beim Ueberfahren um 2 px. Beim Druecken gehen sie zurueck auf null — die Kachel wird heruntergedrueckt, statt ein zweites Mal zu springen. */ .wege li:active,.objekte li:active{transform:translateY(0)} /* Verweise. `opacity` und nicht `color`, damit dieselbe Regel auf hellem und auf dunklem Grund gilt und keine Farbe doppelt gepflegt werden muss. */ .nav a:active,.fuss a:active,.dienst-tel:active,.marke:active, .fliess a:active,.posten a:active,.person-ruf a:active,.person-zeile a:active, .tk-zeile a:active,.tk-ruf a:active,.nr-sprung:active,.termin-adresse a:active, .direkt .gross-tel a:active,.tat:active,.objekt-tat:active,.wege-tat:active, .pille-tat:active,.skip:active{ opacity:.62} /* Der Menueschalter ist auf dem Telefon das erste, was man anfasst. */ .nav-schalter{transition:border-color var(--bw-zustand) var(--kurve), background-color var(--bw-zustand) var(--kurve), transform 90ms var(--kurve)} .nav-schalter:active{background:rgba(13,50,102,.06)} /* ── 2f Klappmenue faehrt auf ──────────────────────────────────────────── iska.css schaltet die Navigation auf dem Telefon hart von display:none auf display:flex. Die Verweise sind schlagartig da. Ein kurzes Aufziehen von oben sagt, WOHER sie kommen — das ist der Unterschied zwischen „etwas ist erschienen" und „das Menue hat sich geoeffnet". Kein height, kein max-height: Beides wuerde das Layout in einer klebenden Leiste Bild fuer Bild neu rechnen. Stattdessen kippen die Zeilen einzeln herein; die Leiste selbst ist sofort auf voller Hoehe da. */ @media (max-width:900px) and (prefers-reduced-motion:no-preference){ @keyframes bw-menue{ from{opacity:0;transform:translate3d(0,-8px,0)} to{opacity:1;transform:none} } .js .nav[data-offen] a{animation:bw-menue 260ms var(--kurve) backwards} .js .nav[data-offen] a:nth-child(1){animation-delay:20ms} .js .nav[data-offen] a:nth-child(2){animation-delay:45ms} .js .nav[data-offen] a:nth-child(3){animation-delay:70ms} .js .nav[data-offen] a:nth-child(4){animation-delay:95ms} .js .nav[data-offen] a:nth-child(5){animation-delay:120ms} .js .nav[data-offen] a:nth-child(6){animation-delay:145ms} .js .nav[data-offen] a:nth-child(7){animation-delay:170ms} } /* ── 2g Die klebende Kopfzeile bekommt Hoehe ───────────────────────────── Solange die Seite oben steht, sitzt der Kopf auf dem Papier und braucht keinen Schatten. Sobald Text darunter durchlaeuft, muss er als Ebene darueber lesbar sein. box-shadow ist verboten (animierter box-shadow war im Schwesterprojekt eine der Ruckelursachen). Deshalb ein fertig gezeichneter Verlauf in `::after`, von dem nur die DECKKRAFT bewegt wird — eine Compositor- Eigenschaft, die kein Neuzeichnen der Leiste ausloest. `.bw-gescrollt` setzt bewegung.js ueber einen IntersectionObserver, nicht ueber einen Scroll-Handler: Layout-Abfragen im Scroll-Handler waren die andere Ruckelursache. */ .kopf-fest::after{content:"";position:absolute;left:0;right:0;top:100%; height:14px;pointer-events:none;opacity:0; background:linear-gradient(to bottom,rgba(20,25,32,.11),rgba(20,25,32,0)); transition:opacity 240ms var(--kurve)} .bw-gescrollt .kopf-fest::after{opacity:1} /* ══════════════════════════════════════════════════════════════════════════ 3 BAUTEIL: LESEFORTSCHRITT ────────────────────────────────────────────────────────────────────────── HIER STAND EINE REGISTERZEILE — ein Band unter dem Kopf, das die Abschnittsmarken der Seite als anklickbare Reiter führte und mitlief. Der Auftraggeber hat sie am 23.08.2026 verworfen: „Für wen / Was gerade zu haben ist / Der Bestand in Zahlen / … bitte entfernen bei scrollen?? lass dir was anderes einfallen das sieht scheiße aus das is ja bei jeden buttom." Der Einwand trifft. Die Reiter trugen die Abschnittsmarken, und die sind auf jeder Seite gleich gebaut — eine Leiste, die überall gleich aussieht und nur die Wörter tauscht, liest sich als Vorlage. Dazu stand sie quer über dem Inhalt und ließ sechs bis neun gleichwertige Schaltflächen mitscrollen. Die Begründung im Kopf von bewegung.js ist ausführlicher. WAS BLEIBT UND WARUM Ein Haarstrich von zwei Pixeln am oberen Fensterrand. Er sagt, wie weit man in einer Seite ist, die bis zu 11.000 px lang wird — eine Auskunft, die es sonst nirgends gibt und die man auf einer Seite dieser Länge wirklich braucht. Er hat keine Beschriftung, keine Schaltfläche und keine Fläche; er kann deshalb gar nicht nach Vorlage aussehen, und er ist auf jeder Seite genau so breit wie diese Seite lang ist. ER KOSTET NICHTS Gefüllt wird er von einer scroll-gebundenen Animation (`animation-timeline: scroll(root)`). Die läuft im Compositor, ohne Hauptfaden, ohne Scroll-Handler und ohne eine einzige Layout-Abfrage — die sauberste Art, etwas an das Scrollen zu koppeln. Kennt der Browser das nicht (Safari, Firefox), bleibt der Streifen leer und unsichtbar; es fehlt dann eine Nebensache, nichts geht kaputt. WARUM GANZ OBEN UND NICHT UNTER DEM KOPF Weil die Kopfzeile beim Scrollen NICHT stehen bleibt. `.kopf-fest` trägt `position:sticky`, steckt aber in `header.kopf`, und dieser Elternkasten ist nur so hoch wie seine Kinder — sticky hat darin keinen Weg. Gemessen mit und ohne diese Stilvorlage: identisch, also nicht von hier verursacht. Die Ursache liegt in `_grund.html` und `iska.css`; beide sind für diese Datei gesperrt, deshalb steht der Befund im Bericht. An eine Leiste anzudocken, die weggescrollt ist, hätte den Strich in den Text gelegt. */ .bw-lauf{position:fixed;left:0;right:0;top:0;height:2px;z-index:60; pointer-events:none; /* Der Streifen selbst ist unsichtbar. Sichtbar ist nur der Teil, den der Strich darin ausfüllt — kein grauer Balken über der ganzen Breite, der eine Leiste behauptet, wo keine ist. */ opacity:0;transition:opacity 260ms var(--kurve)} .bw-gescrollt .bw-lauf{opacity:1} .bw-fortschritt{display:block;height:100%;background:var(--signal); transform:scaleX(0);transform-origin:left center} @supports (animation-timeline:scroll()){ @keyframes bw-fortschritt{from{transform:scaleX(0)}to{transform:scaleX(1)}} .bw-fortschritt{animation:bw-fortschritt linear both; animation-timeline:scroll(root block)} } /* ══════════════════════════════════════════════════════════════════════════ 4 REDUZIERTE BEWEGUNG — DER ABSCHALTER ────────────────────────────────────────────────────────────────────────── Bewusst pauschal und mit !important: Er schaltet nicht nur die Regeln dieser Datei ab, sondern auch die aus iska.css, die keine eigene Ausnahme mitbringen. Wer Bewegung abbestellt hat, hat sie abbestellt. Der Lesefortschritt ist an das Scrollen gekoppelt, also Bewegung — er entfaellt hier vollstaendig. Er traegt keine Auskunft, die anderswo fehlen wuerde: Die Seite bleibt ohne ihn genauso benutzbar. */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-delay:0s !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; transition-delay:0s !important; scroll-behavior:auto !important} html{scroll-behavior:auto !important} /* Der Ruhezustand ist auch hier sichtbar. bewegung.js vergibt die Klasse unter reduzierter Bewegung gar nicht erst — diese Regel ist der Gurt fuer den Fall, dass jemand die Einstellung MITTEN auf der Seite umstellt, waehrend Elemente noch warten. */ .bw-warten{opacity:1 !important} .bw-warten .nr::before{transform:none !important} .bw-lauf{display:none !important} } /* ── Druck ───────────────────────────────────────────────────────────────── Auf Papier gibt es kein Scrollen: nichts darf unsichtbar sein, und ein Lesefortschritt gehoert nicht auf einen Ausdruck. */ @media print{ .bw-warten{opacity:1 !important} .bw-warten .nr::before{transform:none !important} .bw-lauf{display:none !important} .kopf-fest::after{display:none} }