/* ========================================================================== Praxis Ragnitz und Oettel DER TAKT Etappe 3 (05.09.2026) Eine Idee, drei Auspraegungen und eine Mikro-Sprache. Diese Datei enthaelt NUR den Takt. Sie kommt ganz zuletzt in den Kopf, damit sie die vier ausgelagerten inline-Stylesheets schlagen kann, ohne dass dort eine Zeile geaendert werden muss. Warum ueberhaupt !important: die Seite tragt an 448 Stellen Ausrufe- zeichen, darunter genau die Regeln, die hier ueberschrieben werden muessen (Statusfarben, Ziffern im Widget). Jedes !important unten ist einzeln begruendet, es gibt keine Sammelregel. Bewegung: alles laeuft ueber transform und opacity, nichts ueber Groessen oder Abstaende. Wer weniger Bewegung eingestellt hat, sieht am Ende der Datei nichts mehr davon. ========================================================================== */ /* -------------------------------------------------------------------------- 0 Die Mikro-Sprache, in Zahlen Ein Hub, ein Schatten, eine Kurve, eine Dauer. Alles Uebrige auf der Seite bezieht sich darauf, statt eigene Werte zu erfinden. -------------------------------------------------------------------------- */ :root { --takt-dauer: 340ms; --takt-kurve: cubic-bezier(0.22, 1, 0.36, 1); /* identisch zu --ease */ --takt-hub: 2px; --takt-schatten: 0 10px 26px rgba(40, 30, 18, 0.14), 0 2px 6px rgba(40, 30, 18, 0.08); /* Der Statuswechsel bekommt einen eigenen, laengeren Moment. */ --takt-wechsel: 900ms; } /* -------------------------------------------------------------------------- 1 UEBERALL SONST · derselbe Hub beim Zeigen und Antippen Bewusst eine ausgeschriebene Liste und kein Sammelselektor auf a und button: sonst huepfen auch Textlinks im Fliesstext, Kalenderfelder und die Punkte im Slider. Gehoben wird, was aussieht wie eine Flaeche, die man anfassen kann. transform steht hier ohne !important. Die bestehenden Regeln setzen beim Zeigen selbst translateY(-2px) - derselbe Hub, er war nur nicht ueberall gleich lang und nicht ueberall vorhanden. -------------------------------------------------------------------------- */ body .btn-primary, body .btn-secondary, body .nav-cta, body .location-tab, body .standort-card, body .service-card, body .testimonial, body .dgr-karte, body .rezept-card, body .karriere-card, body .notfall-card, body .ts-name-knopf, body .focus-reset { transition: transform var(--takt-dauer) var(--takt-kurve), box-shadow var(--takt-dauer) var(--takt-kurve), background-color var(--takt-dauer) var(--takt-kurve), border-color var(--takt-dauer) var(--takt-kurve), color var(--takt-dauer) var(--takt-kurve), opacity var(--takt-dauer) var(--takt-kurve); } body .btn-primary:hover, body .btn-secondary:hover, body .nav-cta:hover, body .standort-card:hover, body .service-card:hover, body .testimonial:hover, body .dgr-karte:hover, body .rezept-card:hover, body .karriere-card:hover, body .notfall-card:hover { transform: translateY(calc(-1 * var(--takt-hub))); } /* Der Schatten nur dort, wo eine Flaeche steht. Knoepfe im Fluss (nav-cta, location-tab) tragen ihren eigenen, das Doppel wirkte schmutzig. */ body .standort-card:hover, body .service-card:hover, body .testimonial:hover, body .dgr-karte:hover, body .rezept-card:hover, body .karriere-card:hover, body .notfall-card:hover { box-shadow: var(--takt-schatten); } /* Antippen setzt den Hub zurueck, statt ihn zu verdoppeln. Derselbe Weg, nur in der Gegenrichtung, halb so lang. */ body .btn-primary:active, body .btn-secondary:active, body .nav-cta:active, body .location-tab:active, body .standort-card:active, body .service-card:active, body .rezept-card:active, body .karriere-card:active, body .notfall-card:active { transform: translateY(0); transition-duration: 170ms; } /* Der Fokus bleibt unangetastet sichtbar und huepft nicht mit. */ body .btn-primary:focus-visible, body .btn-secondary:focus-visible, body .nav-cta:focus-visible, body .location-tab:focus-visible { outline: 3px solid var(--forest, #2A4A38); outline-offset: 3px; } /* -------------------------------------------------------------------------- 2 STELLE 2 · DER OEFFNUNGSSTATUS 2a Die Lampe Gruen heisst geoeffnet, sonst neutrales Grau. Das Rot der bisherigen Fassung war eine Warnung fuer einen Normalzustand: eine Praxis, die abends zu ist, ist nicht in Not. Rot bleibt dem Notfall. !important, weil inline-01-basis.css die Farben in .live-status.open und .live-status.closed direkt setzt und eine Regel weiter unten im Kopf sie zusaetzlich mit Ausrufezeichen festnagelt. -------------------------------------------------------------------------- */ html body .live-status.open { color: var(--forest, #2A4A38) !important; } html body .live-status.open .status-dot { background: #4A7C59 !important; animation: taktLampe 4.2s ease-in-out infinite !important; } html body .live-status.closed { color: var(--text, #2C332E) !important; } html body .live-status.closed .status-dot { background: #9BA29B !important; box-shadow: none !important; animation: none !important; /* Grau blinkt nicht. Zu ist kein Ereignis. */ } html body .live-status.mixed .status-dot { background: #9BA29B !important; animation: none !important; } /* Ein Atemzug alle vier Sekunden, nicht zwei je Sekunde. Derselbe Ruhepuls wie bei der EKG-Linie: die Lampe ist deren kleine Schwester, nicht ein zweiter Effekt. */ @keyframes taktLampe { 0%, 100% { box-shadow: 0 0 0 0 rgba(74, 124, 89, 0.55); } 22% { box-shadow: 0 0 0 7px rgba(74, 124, 89, 0); } 60% { box-shadow: 0 0 0 0 rgba(74, 124, 89, 0); } } /* Dieselbe Sprache in der Doppelanzeige und auf den Standortkarten. */ html body .dual-row.closed .dual-dot { background: #9BA29B !important; } html body .dual-row.closed .dual-name { color: var(--text, #2C332E) !important; } html body .dual-row.open .dual-dot { background: #4A7C59 !important; } html body .dual-row.open .dual-name { color: var(--forest, #2A4A38) !important; } html body .standort-live { transition: color var(--takt-dauer) var(--takt-kurve); } html body .standort-live.closed .standort-live-dot { background: #9BA29B !important; } html body .standort-live.open .standort-live-dot { background: #4A7C59 !important; } /* -------------------------------------------------------------------------- 2e Ein Zustand, ein Farbsystem, auf jedem Gerät gleich Die mobile Statusanzeige im Notfall-Block (.praxis-status-mobile, aus inline-02-kopfleiste.css) fuehrte ein zweites Paar: #4A7C59 fuer offen und #C84B4B fuer geschlossen. Dieselbe Aussage in zwei Farben, je nach Geraet - und auf dem Handy weiter das Rot fuer einen Normalzustand. Jetzt dasselbe Paar wie im Widget: #4A7C59 und #9BA29B. Der Ring atmet nur bei geoeffnet und im Ruhepuls (4,2 s statt 2,4 s); grau steht still. Der Text bleibt unangetastet - er stand schon auf --ink. -------------------------------------------------------------------------- */ html body .praxis-status-mobile .status-row.is-open .status-dot, html body .praxis-status-mobile .status-row.is-open .status-dot::after { background: #4A7C59 !important; } html body .praxis-status-mobile .status-row.is-closed .status-dot, html body .praxis-status-mobile .status-row.is-closed .status-dot::after { background: #9BA29B !important; } html body .praxis-status-mobile .status-row.is-open .status-dot::after { animation: praxisStatusPulse 4.2s ease-in-out infinite !important; } html body .praxis-status-mobile .status-row.is-closed .status-dot::after { animation: none !important; opacity: 0 !important; /* der Hof verschwindet, der Punkt bleibt */ } /* -------------------------------------------------------------------------- 2b Der Wechsel als spuerbarer Moment takt.js setzt beim Umschlagen von geoeffnet auf geschlossen (und zurueck) einmalig data-takt-wechsel am Statusfeld. Kein Blinken, kein Farbwechselgewitter: die Zeile hebt sich einen Hub, die Lampe atmet einmal tiefer, danach ist es vorbei. -------------------------------------------------------------------------- */ html body .live-status[data-takt-wechsel], html body .standort-live[data-takt-wechsel] { animation: taktStatusMoment var(--takt-wechsel) var(--takt-kurve) 1; } html body .standort-live[data-takt-wechsel] .standort-live-dot, html body .live-status[data-takt-wechsel] .status-dot { animation: taktStatusLampe var(--takt-wechsel) var(--takt-kurve) 1 !important; } @keyframes taktStatusMoment { 0% { transform: translateY(3px); opacity: 0.35; letter-spacing: 0.19em; } 40% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(0); opacity: 1; letter-spacing: 0.15em; } } @keyframes taktStatusLampe { 0% { transform: scale(0.55); } 38% { transform: scale(1.22); } 100% { transform: scale(1); } } /* -------------------------------------------------------------------------- 2c Die Uhrzeit in tabellarischen Ziffern Fraunces hat sie, sie waren nur nicht angefordert. Ohne tnum ist die Eins schmaler als die Null, die Uhr wackelt jede Minute um zwei bis drei Punkte und zieht den Doppelpunkt mit. Gilt fuer alles, was sich im Sekunden- oder Minutentakt selbst ersetzt. -------------------------------------------------------------------------- */ html body .live-time, html body .countdown-value, html body .dual-info, html body .schedule-list, html body .zeiten-hinweis { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; } /* -------------------------------------------------------------------------- 2c-2 Der Doppelpunkt steht still (Dirk, 05.09.2026) Er blinkte im Sekundentakt (colonBlink, inline-01-basis Zeile 630): 3600 Laeufe je Stunde, ohne Bewegungssperre, an der wichtigsten Zahl der Seite - ein dritter, schnellster Takt neben Ruhepuls und Lampe. Vier Zeilen, und nur die Bewegung. Der Aufbau aus inline-03-rumpf (echtes Zeichen durchsichtig, zwei Pseudoelemente auf 36 und 60 Prozent) bleibt Zeichen fuer Zeichen unberuehrt. -------------------------------------------------------------------------- */ html body .live-widget .live-time-colon, html body .live-time-colon { animation: none !important; opacity: 1 !important; } /* -------------------------------------------------------------------------- 2d Der Standortwechsel als weiches Ueberblenden Bisher: das Widget bekam 240 ms lang die Klasse switching, die Blende war aber auf 450 ms eingestellt. Die Blende war also nie fertig, bevor der Inhalt schon getauscht war - das ergab ein hartes Umschalten mit einem Zucken davor. Jetzt: hinaus schnell (140 ms) und nur bis 0,34 - so weit, dass der Tausch verdeckt ist -, herein langsam (450 ms, aus der Grundregel). Das Standortfoto blendet mit, es gehoert zur Aussage. -------------------------------------------------------------------------- */ html body .live-widget .sched-foto, html body .live-widget .live-time, html body .live-widget .live-date { transition: opacity 450ms var(--takt-kurve), transform 450ms var(--takt-kurve); } html body .live-widget.switching .live-schedule, html body .live-widget.switching .live-status, html body .live-widget.switching .live-countdown, html body .live-widget.switching .live-date-row, html body .live-widget.switching .sched-foto, html body .live-widget.switching .live-time, html body .live-widget.switching .live-date { opacity: 0.34; transition-duration: 140ms; } /* Die abgehende Seite ruckt einen Hub mit, damit der Wechsel eine Richtung hat. Derselbe Hub wie ueberall. */ html body .live-widget.switching .sched-foto, html body .live-widget.switching .live-time { transform: translateY(var(--takt-hub)); } /* Der gewaehlte Standort schaltet nicht hart um. */ html body .location-tab { transition: background-color var(--takt-dauer) var(--takt-kurve), color var(--takt-dauer) var(--takt-kurve); } /* -------------------------------------------------------------------------- 3 STELLE 1 · Die EKG-Linie Gezeichnet und getaktet wird in relief.js. Hier steht nur, was CSS besser weiss: solange der Atemzug laeuft, bekommt die Ebene eine eigene Zeichenschicht. Danach wird sie zurueckgegeben, damit im Ruhe- zustand kein Speicher belegt bleibt. -------------------------------------------------------------------------- */ .px-hintergrund .px-relief[data-takt="laeuft"] svg { will-change: transform; } .px-hintergrund .px-relief[data-takt="fertig"] svg { will-change: auto; } /* -------------------------------------------------------------------------- 4 Ruhe fuer empfindliche Augen Ein Schalter fuer den ganzen Takt. prefers-reduced-motion nimmt die Bewegung, nicht die Aussage: Farben, Ziffern und Zustaende bleiben. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html body .live-status.open .status-dot, html body .praxis-status-mobile .status-row.is-open .status-dot::after { animation: none !important; } html body .live-status[data-takt-wechsel], html body .live-status[data-takt-wechsel] .status-dot, html body .standort-live[data-takt-wechsel], html body .standort-live[data-takt-wechsel] .standort-live-dot { animation: none !important; } html body .live-widget.switching .sched-foto, html body .live-widget.switching .live-time { transform: none; } body .btn-primary, body .btn-secondary, body .nav-cta, body .location-tab, body .standort-card, body .service-card, body .testimonial, body .dgr-karte, body .rezept-card, body .karriere-card, body .notfall-card, body .ts-name-knopf, body .focus-reset { transition: none; } body .btn-primary:hover, body .btn-secondary:hover, body .nav-cta:hover, body .standort-card:hover, body .service-card:hover, body .testimonial:hover, body .dgr-karte:hover, body .rezept-card:hover, body .karriere-card:hover, body .notfall-card:hover { transform: none; } } /* -------------------------------------------------------------------------- 5 Druck Auf Papier gibt es keinen Takt. -------------------------------------------------------------------------- */ @media print { html body .live-status.open .status-dot { animation: none !important; } }