/* ============================================================================ teil-bewegung.css — Mikrobewegung. Was passiert, wenn jemand mit der Maus darueber geht oder etwas anklickt. Christopher, 03.10.2026: „Die Kacheln, die bewegen sich nichts … Da muss echt noch einiges besser werden." Diese Datei gehoert EINER Sitzung. Sie fasst grund.css, bau.css, seiten.css, wirkung.js und die anderen teil-*.css nicht an. ── Drei Entscheidungen, die den ganzen Rest erklaeren ──────────────────── 1) BEWEGUNG LAEUFT UEBER translate / scale / rotate, NICHT UEBER transform. transform gehoert hier dem Einblenden beim Scrollen (.einblenden/.auf aus bau.css und grund.css): es faehrt translateY(22px) auf 0. Schriebe das Zeigen mit der Maus ebenfalls transform, waere jede Kachel entweder doppelt verschoben oder das Einblenden kaputt. Die eigenstaendigen Eigenschaften translate/scale/rotate sind ein getrennter Kanal, werden genauso auf der Grafikkarte zusammengesetzt und kosten keine Bildrate. Wo grund.css/seiten.css bisher mit transform angehoben haben, setzt diese Datei im selben Zustand transform:none — der Hub wird ersetzt, nicht addiert. 2) DIE STAFFELUNG GILT DEM EINBLENDEN, NICHT DEM ZEIGEN. seiten.css setzt auf .termin-kachel und .optical-karte transition-delay:var(--verzug) und grund.css auf .auf.v1 … .v6 bis zu .42 s. Dieser Verzug lag bisher auf JEDER Ueberblendung des Elements — also auch auf dem Zeigen mit der Maus: auf der Optical-Seite tat die sechste Kachel 540 ms lang gar nichts, bevor sie sich hob. Genau das ist „die bewegen sich nichts". Hier bekommt jede Eigenschaft ihren eigenen Verzug: Einblenden gestaffelt (--bew-stufe), Zeigen sofort (0 ms). 3) DER SCHATTEN LIEGT AUF EINEM PSEUDOELEMENT MIT EIGENER opacity — ueberall dort, wo das moeglich ist. Moeglich ist es nicht in .glas und .kachel: beide tragen overflow:hidden (grund.css Z. 99 und Z. 261), und ein overflow-Beschnitt schneidet den Schlagschatten eines Kindes ab. Dort bleibt der box-shadow am Element selbst, so wie grund.css ihn schon schaltet; diese Datei fuegt dort keine neue Schattenanimation hinzu, sondern haelt nur die bestehende am Leben (siehe Kommentar unten). Was dafuer in grund.css noetig waere, steht im Bericht unter „offen". Beschleunigung: --weich, ausser beim Pfeil (Ueberschwinger, Punkt 5). Dauern: 180–600 ms. Unter prefers-reduced-motion ist jede einzelne Regel dieser Datei abgeschaltet — am Ende, Abschnitt 9, Punkt fuer Punkt. ========================================================================= */ :root{ --bew-kurz:.18s; /* Nachgeben beim Druecken */ --bew-mittel:.26s; /* Heben, Rand, Schatten, Ring */ --bew-lang:.42s; /* Pfeil, Unterstreichung, Kopfleiste */ --bew-signet:.6s; /* das Signet dreht sehr langsam */ /* Ueberschwinger: der Pfeil laeuft ein Stueck zu weit und schwingt zurueck. */ --bew-nach:cubic-bezier(.34,1.56,.64,1); } /* ============================================================================ 1 — KACHELN .filiale · .karte · .kachel · .termin-kachel · .std-kachel · .optical-karte · .fil-kachel Die vier letzten sind im Markup immer auch .filiale oder .karte; sie stehen trotzdem einzeln da, damit die Regel auch dann noch gilt, wenn eine Vorlage die Grundklasse einmal weglaesst. .glas steht hier bewusst NICHT als eigener Treffer: .glas traegt auch die Kopfzeile der Terminseite, .sammel-leitsatz, .leistung-vorteil, .stelle-karte und das Abschiedsblatt. Eine Flaeche, die man nicht anklicken kann, darf beim Darueberfahren nicht wackeln. Ausserdem gehoert .glas::after dem Lichtschleier aus grund.css und .glas::before (ueber .sammel-leitsatz) der Leistungs-Sitzung. ========================================================================= */ /* Der Verzug des Einblendens, als eigene Groesse. --verzug setzen die Vorlagen termin.php und optical.php je Kachel im style-Attribut. */ .filiale, .karte, .kachel, .termin-kachel, .std-kachel, .optical-karte, .fil-kachel{ --bew-stufe:var(--verzug,0ms) } .auf.v1{ --bew-stufe:70ms } .auf.v2{ --bew-stufe:140ms } .auf.v3{ --bew-stufe:210ms } .auf.v4{ --bew-stufe:280ms } .auf.v5{ --bew-stufe:350ms } .auf.v6{ --bew-stufe:420ms } /* Einblenden gestaffelt, Zeigen sofort. box-shadow steht in der Liste, weil grund.css und seiten.css den Schatten mancher Kacheln schon am Element selbst umschalten (.kachel:hover, .karte:hover, .filiale:hover). Ohne den Eintrag wuerde dieser vorhandene Schatten hart umspringen. Fuer alle Kacheln ohne overflow-Beschnitt wird der Hover-Schatten weiter unten auf den Grundwert zurueckgesetzt — dort bewegt sich also nichts an box-shadow, und der Eintrag laeuft leer. */ .filiale, .karte, .kachel, .termin-kachel, .std-kachel, .optical-karte, .fil-kachel{ transition: opacity .7s var(--weich) var(--bew-stufe,0ms), transform .7s var(--weich) var(--bew-stufe,0ms), translate var(--bew-mittel) var(--weich) 0ms, scale var(--bew-mittel) var(--weich) 0ms, border-color var(--bew-mittel) var(--weich) 0ms, background-color var(--bew-mittel) var(--weich) 0ms, box-shadow .45s var(--weich) 0ms; } /* grund.css blendet .auf in .85 s ein (bau.css blendet .einblenden in .7 s ein). Beides bleibt, wie es abgenommen ist. */ .filiale.auf, .karte.auf, .kachel.auf{ transition: opacity .85s var(--weich) var(--bew-stufe,0ms), transform .85s var(--weich) var(--bew-stufe,0ms), translate var(--bew-mittel) var(--weich) 0ms, scale var(--bew-mittel) var(--weich) 0ms, border-color var(--bew-mittel) var(--weich) 0ms, background-color var(--bew-mittel) var(--weich) 0ms, box-shadow .45s var(--weich) 0ms; } /* Dasselbe noch einmal gegen teil-scroll.css, das NACH dieser Datei laedt. Es setzt (Stand 03.10.2026, Z. 58–61) auf .kacheln > .einblenden, .filialen > .einblenden, .termin-wahl > .einblenden, .fil-reihe > .einblenden die Langform transition-delay:var(--verzug,0ms). Mit 0-2-0 schlaegt sie den Verzugsteil der Kurzform oben (0-1-0) und legt den Verzug wieder auf JEDE Ueberblendung — auch auf das Zeigen mit der Maus. Die sechste Kachel taete dann wieder eine halbe Sekunde nichts, also genau das, was Christopher gemeldet hat. Hier steht derselbe Verzug noch einmal, aber je Eigenschaft: Einblenden gestaffelt, Zeigen sofort. Die Staffelung der anderen Sitzung bleibt damit unveraendert — die Reihenfolge der sieben Werte entspricht der transition-property-Reihenfolge der beiden Regeln darueber. */ .kacheln > .einblenden.kachel, .kacheln > .einblenden.karte, .kacheln > .einblenden.filiale, .filialen > .einblenden.filiale, .filialen > .einblenden.karte, .termin-wahl > .einblenden.termin-kachel, .fil-reihe > .einblenden.fil-kachel{ transition-delay:var(--verzug,0ms), var(--verzug,0ms), 0ms, 0ms, 0ms, 0ms, 0ms; } /* Der tiefere Schatten als Pseudoelement mit eigener opacity. Nur dort, wo das Element seinen Inhalt nicht beschneidet — .glas tut es. */ .filiale:not(.glas), .karte:not(.glas){ position:relative } .filiale:not(.glas)::after, .karte:not(.glas)::after{ content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:0 22px 46px rgba(19,55,109,.15); opacity:0; pointer-events:none; transition:opacity var(--bew-mittel) var(--weich); } /* Damit an box-shadow selbst nichts mehr animiert wird: der Hover-Schatten aus grund.css wird auf den Grundwert derselben Datei zurueckgesetzt. */ .filiale:not(.glas):hover, .filiale:not(.glas):focus-visible{ box-shadow:0 8px 24px rgba(19,55,109,.06) } .karte:not(.glas):hover, .karte:not(.glas):focus-visible{ box-shadow:0 8px 26px rgba(19,55,109,.06) } /* ── Zeigen mit der Maus ────────────────────────────────────────────────── Nur auf Geraeten mit echtem Zeiger. Auf dem Telefon bleibt ein :hover nach dem Antippen haengen, und eine angehobene Kachel, die nicht zurueckfaellt, sieht aus wie ein Fehler. */ @media (hover:hover) and (pointer:fine){ .filiale:hover, .karte:hover, .kachel:hover, .termin-kachel:hover, .std-kachel:hover, .optical-karte:hover, .fil-kachel:hover{ transform:none; /* ersetzt den Hub aus grund.css/seiten.css */ translate:0 -6px; scale:1.008; border-color:var(--gold); } .filiale:not(.glas):hover::after, .karte:not(.glas):hover::after{ opacity:1 } } /* ── Tastaturfokus: dieselbe Hervorhebung, plus ein deutlich sichtbarer Ring ── Barrierefreiheit, nicht Zierde — darum ohne (hover:hover)-Schranke und mit einem Ring, der auch auf Weiss und auf Creme steht. */ .filiale:focus-visible, .karte:focus-visible, .kachel:focus-visible, .termin-kachel:focus-visible, .std-kachel:focus-visible, .optical-karte:focus-visible, .fil-kachel:focus-visible{ transform:none; translate:0 -6px; scale:1.008; border-color:var(--gold); outline:3px solid var(--blau-hell); outline-offset:3px; } .filiale:not(.glas):focus-visible::after, .karte:not(.glas):focus-visible::after{ opacity:1 } /* ── Klicken: kurz nachgeben ────────────────────────────────────────────── --bew-mittel wird fuer die Dauer des Druckes auf --bew-kurz gesetzt; die transition-Liste oben liest die Variable, die Rueckmeldung kommt also schneller als das Heben. Steht nach :hover und :focus-visible, damit es bei gleicher Spezifitaet gewinnt. */ .filiale:active, .karte:active, .kachel:active, .termin-kachel:active, .std-kachel:active, .optical-karte:active, .fil-kachel:active{ --bew-mittel:var(--bew-kurz); translate:0 -1px; scale:.993; } /* ============================================================================ 2 — RUNDE VORSCHAUBILDER (.termin-rund, .std-rund) .std-rund ist im Markup immer auch .termin-rund (standard.php Z. 770). Das Bild zieht heran, ein feiner Goldring zieht auf. .termin-rund ist display:grid — das Pseudoelement muss absolut liegen, sonst wird es ein Rasterkind und schiebt das Bild aus der Mitte. ========================================================================= */ .termin-rund{ position:relative } .termin-rund::after{ content:""; position:absolute; inset:0; border-radius:50%; box-shadow:inset 0 0 0 2px var(--gold); opacity:0; scale:.82; pointer-events:none; transition:opacity var(--bew-mittel) var(--weich), scale var(--bew-lang) var(--weich); } @media (hover:hover) and (pointer:fine){ .filiale:hover .termin-rund::after, .karte:hover .termin-rund::after, .kachel:hover .termin-rund::after{ opacity:1; scale:1 } /* seiten.css hebt das Bild bisher nur in .termin-kachel heran; hier gilt es fuer jede Kachel, die so ein rundes Bild traegt (Filialuebersicht, Optical Center, Stellen). transform, weil seiten.css dasselbe Bild mit transform bewegt — zwei Kanaele wuerden sich multiplizieren. */ .filiale:hover .termin-rund img, .karte:hover .termin-rund img, .kachel:hover .termin-rund img{ transform:scale(1.12) } } .filiale:focus-visible .termin-rund::after, .karte:focus-visible .termin-rund::after, .kachel:focus-visible .termin-rund::after{ opacity:1; scale:1 } .filiale:focus-visible .termin-rund img, .karte:focus-visible .termin-rund img, .kachel:focus-visible .termin-rund img{ transform:scale(1.12) } /* ============================================================================ 3 — KNOEPFE (.knopf) Ein warmer Schimmer wandert von links nach rechts durch den Knopf. Er liegt auf ::after und wird mit translate bewegt, nicht mit background-position. Damit er am Rand des Knopfes verschwindet, beschneidet .knopf seinen Inhalt; vertical-align:middle haelt dabei die Grundlinie in Ordnung, denn ein inline-flex-Element mit overflow:hidden legt seine Grundlinie sonst auf die Unterkante und rutscht gegenueber nebenstehendem Text nach unten. ========================================================================= */ .knopf{ position:relative; overflow:hidden; isolation:isolate; vertical-align:middle; } /* z-index:-1 heisst innerhalb von .knopf: ueber dem eigenen Hintergrund, unter der Beschriftung. Deshalb braucht die Beschriftung keinen eigenen Stapelwert — auch dann nicht, wenn sie ein blosser Textknoten ist. */ .knopf::after{ content:""; position:absolute; top:0; bottom:0; left:0; width:44%; z-index:-1; pointer-events:none; background:linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 48%, rgba(255,255,255,0) 100%); translate:-170% 0; transition:translate var(--bew-signet) var(--weich); } @media (hover:hover) and (pointer:fine){ .knopf:hover::after{ translate:330% 0 } } .knopf:focus-visible::after{ translate:330% 0 } .knopf:focus-visible{ outline:3px solid var(--blau-hell); outline-offset:3px } /* .knopf.geist bekommt einen fuellenden Hintergrund: er waechst von links. scale beachtet transform-origin, darum liegt der Ursprung links. */ .knopf.geist::before{ content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:var(--blau-zart); transform-origin:left center; scale:0 1; opacity:0; transition:scale var(--bew-lang) var(--weich), opacity var(--bew-mittel) var(--weich); } @media (hover:hover) and (pointer:fine){ .knopf.geist:hover::before{ scale:1 1; opacity:1 } } .knopf.geist:focus-visible::before{ scale:1 1; opacity:1 } /* Druecken: der Knopf gibt kurz nach. grund.css hat dafuer schon transform:translateY(0) scale(.99) — das bleibt und wird hier nur nachgeschaerft, damit sich alle Bausteine gleich anfuehlen. */ .knopf:active{ scale:.978 } /* ============================================================================ 4 — LINKS IM FLIESSTEXT Die Betonung waechst von links heran statt hart einzuschalten. Zwei Verlaufsschichten als Hintergrundbild: unten eine duenne Dauerlinie, damit ein Link im Text auch ohne Maus als Link erkennbar bleibt, darueber die kraeftige Goldlinie, deren Breite von 0 auf 100 % waechst. background-size kostet nur Zeichenarbeit, kein Umbruch. Der Treffer ist bewusst eng: nur Verweise, die direkt in einem Absatz, einem Listenpunkt, einer Zelle oder einer Beschreibung stehen, und nur in den Textspalten. Knopf, Chip und Kachel sind ausgenommen. ========================================================================= */ .blatt:not(main) :is(p,li,dd,td) > a:not(.knopf):not(.chip):not(.filiale):not(.karte), .std-text :is(p,li,dd,td) > a:not(.knopf):not(.chip):not(.filiale):not(.karte), .termin-text :is(p,li,dd,td) > a:not(.knopf):not(.chip):not(.filiale):not(.karte){ text-decoration:none; background-image: linear-gradient(var(--gold),var(--gold)), linear-gradient(rgba(46,99,168,.38),rgba(46,99,168,.38)); background-repeat:no-repeat; background-position:0 100%, 0 100%; background-size:0% 2px, 100% 1px; padding-bottom:.06em; transition:background-size var(--bew-lang) var(--weich), color var(--bew-mittel) var(--weich); } @media (hover:hover) and (pointer:fine){ .blatt:not(main) :is(p,li,dd,td) > a:not(.knopf):not(.chip):not(.filiale):not(.karte):hover, .std-text :is(p,li,dd,td) > a:not(.knopf):not(.chip):not(.filiale):not(.karte):hover, .termin-text :is(p,li,dd,td) > a:not(.knopf):not(.chip):not(.filiale):not(.karte):hover{ background-size:100% 2px, 100% 1px; color:var(--blau); } } .blatt:not(main) :is(p,li,dd,td) > a:not(.knopf):not(.chip):not(.filiale):not(.karte):focus-visible, .std-text :is(p,li,dd,td) > a:not(.knopf):not(.chip):not(.filiale):not(.karte):focus-visible, .termin-text :is(p,li,dd,td) > a:not(.knopf):not(.chip):not(.filiale):not(.karte):focus-visible{ background-size:100% 2px, 100% 1px; color:var(--blau); outline:3px solid var(--blau-hell); outline-offset:2px; } /* ============================================================================ 5 — PFEILE (.pfeil span, .pfeil i, .std-pfeil i, .feld .mehr span) Sie wandern weiter als bisher (5 px → 9 px) und kommen mit einem weichen Nachschwingen zur Ruhe. Die Auswahlliste nennt die vorhandenen Wege einzeln, weil grund.css und seiten.css fuer dieselbe Wirkung drei verschiedene Spezifitaeten benutzen; eine kuerzere Liste wuerde dort verlieren. ========================================================================= */ .pfeil :is(span,i), .filiale .pfeil :is(span,i), .termin-kachel .pfeil :is(span,i), .std .std-ort .pfeil :is(span,i), .std .std-pfeil :is(span,i), .feld .mehr span{ display:inline-block; /* translateX wirkt auf inline-Elemente nicht */ transition:transform var(--bew-lang) var(--bew-nach); } @media (hover:hover) and (pointer:fine){ .filiale:hover .pfeil :is(span,i), .karte:hover .pfeil :is(span,i), .kachel:hover .pfeil :is(span,i), .termin-kachel:hover .pfeil :is(span,i), .std .std-kachel:hover .std-pfeil :is(span,i), .std .std-ort:hover .pfeil :is(span,i), .feld:hover .mehr span{ transform:translateX(9px) } } .filiale:focus-visible .pfeil :is(span,i), .karte:focus-visible .pfeil :is(span,i), .kachel:focus-visible .pfeil :is(span,i), .termin-kachel:focus-visible .pfeil :is(span,i), .std .std-kachel:focus-visible .std-pfeil :is(span,i), .std .std-ort:focus-visible .pfeil :is(span,i){ transform:translateX(9px) } /* ============================================================================ 6 — KOPFLEISTE wirkung.js setzt .fest ab 24 px Scrollweg (Z. 55). Sichtbar war daran bisher fast nichts. Jetzt: die Leiste verdichtet sich, der Glasgrund wird dichter, der Schatten erscheint. „Schmaler" entsteht ueber scale mit Ursprung an der Oberkante — Polster oder Hoehe zu animieren waere ein Umbruch je Einzelbild. Weil die Leiste position:fixed ist, verschiebt das keinen einzigen Buchstaben im Text. Der Schatten liegt auf ::after mit eigener opacity; der Schatten aus grund.css wird dafuer auf den Grundwert zurueckgesetzt, damit nicht zwei Schatten uebereinander liegen und box-shadow selbst nichts animiert. ========================================================================= */ .kopf-innen{ position:relative; transform-origin:50% 0; transition:background var(--bew-lang) var(--weich), scale var(--bew-lang) var(--weich), translate var(--bew-lang) var(--weich); } .kopf-innen::after{ content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:0 14px 40px rgba(19,55,109,.16); opacity:0; pointer-events:none; transition:opacity var(--bew-lang) var(--weich); } .kopf.fest .kopf-innen{ background:rgba(255,255,255,.93); box-shadow:0 6px 26px rgba(19,55,109,.08); /* = Grundwert aus grund.css */ scale:.972; translate:0 -3px; } .kopf.fest .kopf-innen::after{ opacity:1 } /* ============================================================================ 7 — DAS SIGNET (.signet, die Blume des Lebens) Sein Erkennungszeichen. Beim Darueberfahren dreht es sich sehr langsam ein Stueck und wird etwas kraeftiger. Dezent, kein Karussell: 14 Grad in 600 ms. bv_blume() haengt die Klasse meistens an das selbst (footer.php, standard.php, optical.php, geschlossen.php, front-page.php), in recht.php und angebote.php an ein
darum. rotate und opacity wirken in beiden Faellen. Der Vorsatz .bv (die Koerperklasse aus functions.php) hebt die Spezifitaet auf die von .angebote-signet .signet.auf aus seiten.css — sonst bliebe das Signet auf der Angebotsseite als einziges blass. ========================================================================= */ .signet{ transition:opacity var(--bew-mittel) var(--weich), color var(--bew-mittel) var(--weich), rotate var(--bew-signet) var(--weich); } @media (hover:hover) and (pointer:fine){ .bv .signet:hover{ opacity:.85; color:var(--gold-tief); rotate:14deg } } /* ============================================================================ 8 — SCHMALE GERAETE Auf dem Telefon sparsamer: die Wege kuerzer, die Dauern knapper. Das Heben mit der Maus faellt dort ohnehin weg (alle Hover-Bloecke stehen hinter (hover:hover) and (pointer:fine)); was bleibt, ist das Nachgeben beim Antippen und der Fokusring. Kein Querscrollen: scale 1.008 waere auf einer 343 px breiten Kachel 2,7 px Ueberstand — es gilt nur mit echtem Zeiger, und html{overflow-x:clip} aus bau.css faengt den Rest ab. ========================================================================= */ @media (max-width:620px){ :root{ --bew-kurz:.15s; --bew-mittel:.2s; --bew-lang:.3s; --bew-signet:.45s } .filiale:active, .karte:active, .kachel:active, .termin-kachel:active, .std-kachel:active, .optical-karte:active, .fil-kachel:active{ translate:0; scale:.985 } .knopf::after{ display:none } /* der Schimmer ist Mausarbeit */ } /* ============================================================================ 9 — prefers-reduced-motion: KEINE Bewegung. Nicht gedaempft — aus. Jede Regel der Abschnitte 1 bis 8 hat hier ihre Entsprechung, in derselben Reihenfolge. Was bleibt, ist die Hervorhebung ohne Weg: Goldrand, Fokusring, Schatten, Unterstreichung, dichtere Kopfleiste — alle ohne Uebergang. ========================================================================= */ @media (prefers-reduced-motion:reduce){ /* 1 — Kacheln */ .filiale, .karte, .kachel, .termin-kachel, .std-kachel, .optical-karte, .fil-kachel{ transition:none; translate:none; scale:none; } .filiale.auf, .karte.auf, .kachel.auf{ transition:none } /* 0-3-0, sonst bliebe die Regel gegen teil-scroll.css oben stehen */ .kacheln > .einblenden.kachel, .kacheln > .einblenden.karte, .kacheln > .einblenden.filiale, .filialen > .einblenden.filiale, .filialen > .einblenden.karte, .termin-wahl > .einblenden.termin-kachel, .fil-reihe > .einblenden.fil-kachel{ transition:none; transition-delay:0ms } .filiale:not(.glas)::after, .karte:not(.glas)::after{ transition:none } .filiale:hover, .karte:hover, .kachel:hover, .termin-kachel:hover, .std-kachel:hover, .optical-karte:hover, .fil-kachel:hover, .filiale:focus-visible, .karte:focus-visible, .kachel:focus-visible, .termin-kachel:focus-visible, .std-kachel:focus-visible, .optical-karte:focus-visible, .fil-kachel:focus-visible, .filiale:active, .karte:active, .kachel:active, .termin-kachel:active, .std-kachel:active, .optical-karte:active, .fil-kachel:active{ transform:none; translate:none; scale:none; } /* 2 — runde Vorschaubilder: der Ring darf da sein, er zieht nur nicht auf */ .termin-rund::after{ transition:none; scale:none } .filiale:hover .termin-rund::after, .karte:hover .termin-rund::after, .kachel:hover .termin-rund::after, .filiale:focus-visible .termin-rund::after, .karte:focus-visible .termin-rund::after, .kachel:focus-visible .termin-rund::after{ scale:none } .filiale:hover .termin-rund img, .karte:hover .termin-rund img, .kachel:hover .termin-rund img, .filiale:focus-visible .termin-rund img, .karte:focus-visible .termin-rund img, .kachel:focus-visible .termin-rund img{ transform:none } /* 3 — Knoepfe: kein Schimmer, keine Fuellung, kein Nachgeben */ .knopf::after{ display:none } .knopf.geist::before{ transition:none; scale:1 1; opacity:0 } .knopf.geist:hover::before, .knopf.geist:focus-visible::before{ opacity:1 } .knopf:active{ scale:none } /* 4 — Links: die Linie ist sofort ganz da, sie waechst nicht */ .blatt:not(main) :is(p,li,dd,td) > a:not(.knopf):not(.chip):not(.filiale):not(.karte), .std-text :is(p,li,dd,td) > a:not(.knopf):not(.chip):not(.filiale):not(.karte), .termin-text :is(p,li,dd,td) > a:not(.knopf):not(.chip):not(.filiale):not(.karte){ transition:none; } /* 5 — Pfeile */ .pfeil :is(span,i), .filiale .pfeil :is(span,i), .termin-kachel .pfeil :is(span,i), .std .std-ort .pfeil :is(span,i), .std .std-pfeil :is(span,i), .feld .mehr span{ transition:none; transform:none } .filiale:hover .pfeil :is(span,i), .karte:hover .pfeil :is(span,i), .kachel:hover .pfeil :is(span,i), .termin-kachel:hover .pfeil :is(span,i), .std .std-kachel:hover .std-pfeil :is(span,i), .std .std-ort:hover .pfeil :is(span,i), .feld:hover .mehr span, .filiale:focus-visible .pfeil :is(span,i), .karte:focus-visible .pfeil :is(span,i), .kachel:focus-visible .pfeil :is(span,i), .termin-kachel:focus-visible .pfeil :is(span,i), .std .std-kachel:focus-visible .std-pfeil :is(span,i), .std .std-ort:focus-visible .pfeil :is(span,i){ transform:none } /* 6 — Kopfleiste: dichter ja, aber ohne Weg und ohne Uebergang */ .kopf-innen{ transition:none; scale:none; translate:none } .kopf-innen::after{ transition:none } .kopf.fest .kopf-innen{ scale:none; translate:none } /* 7 — Signet */ .signet{ transition:none; rotate:none } .bv .signet:hover{ rotate:none } }