/* ============================================================================ Praxis Ragnitz und Oettel Handy und Tablet, was beim Nachmessen herauskam 10.08.2026 (Dirk) Gemessen wurde die Startseite bei 320, 375, 768, 1024 und 1440 Pixeln, mit echten Werten aus dem Browser, nicht nach Augenmass. Drei Dinge kamen dabei heraus, dazu kam der Datenschutzhinweis aus der Uebergabe. Diese Datei behebt diese vier Punkte und sonst nichts. Sie wird als letzte geladen, deshalb gewinnt sie gegen die Regeln in der index.html. Das ist Absicht: dort steht nichts falsch, es fehlte nur an diesen Stellen etwas. Wer eine Zeile hier loescht, hat sofort wieder den Stand von vorher, ohne an einer anderen Datei zu drehen. 1 TREFFERFLAECHEN Der Umschalter zwischen Soemmerda und Koelleda war 25 Pixel hoch, der Weiterknopf im Terminformular 41, die Filter bei den Bewertungen 28. Wer aeltere Finger hat oder im Bus sitzt, trifft das nicht zuverlaessig. Angestrebt sind 44 Pixel. Wo ein Knopf sichtbar wachsen darf, waechst er. Wo das Bild stehenbleiben soll, legt ein unsichtbares Feld die Trefferflaeche auf 44 Pixel, ohne dass sich optisch etwas aendert. Das Feld gehoert zum Knopf, ein Tipp darauf zaehlt als Tipp auf den Knopf. 2 KLEINSCHRIFT Beschriftungen, die man zum Ausfuellen eines Formulars lesen muss, standen auf 11 Pixeln, zwei Hinweise sogar auf 10. Fuer eine Hausarztpraxis ist das zu klein. Angehoben werden nur die Stellen, die man liest, um etwas zu tun. Zierschrift wie "Standort 01 . Hauptsitz" bleibt unveraendert, sonst kippt das Bild. 3 UEBERSTAND DER EINBLENDUNGEN Die Karten von Standorten, Praxis und Team starten 70 Pixel neben ihrem Platz und laufen beim Scrollen herein. Bis dahin standen sie ueber den rechten Rand hinaus, ab 1024 Pixeln Fensterbreite messbar. Zu sehen war davon nichts, weil ganz oben in der index.html eine Pauschalregel alles Ueberstehende abschneidet. Jetzt bleibt der Ueberstand in seiner eigenen Sektion. Die Pauschalregel muss ihn nicht mehr tragen, sie bleibt nur als Netz stehen. Verwendet wird clip statt hidden, weil hidden aus der Sektion einen Rollbereich macht und damit klebende Elemente darin unbrauchbar wuerde. Fuer den Betrachter aendert sich dadurch nichts: die Sektionen sind so breit wie das Fenster, es wird also an derselben Stelle abgeschnitten wie vorher. Und die versetzten Karten sind in dieser Zeit ohnehin durchsichtig, sie werden erst beim Einlaufen sichtbar. 4 DER DATENSCHUTZHINWEIS Er lag beim ersten Besuch ueber den unteren Knoepfen eines offenen Overlays. Der Text bleibt unangetastet, nur seine Sichtbarkeit haengt jetzt daran, ob gerade etwas darueber liegt. ============================================================================ */ /* --- 1 Trefferflaechen -------------------------------------------------- */ /* Diese drei duerfen sichtbar wachsen, sie standen ohnehin dicht an 44. */ .termin-btn-next, .termin-btn-back, .route-alt-link { min-height: 44px; box-sizing: border-box; } /* Der Tag im Terminkalender. Stand auf 24, dem alten Mindestmass. */ .day-cta { min-height: 44px; box-sizing: border-box; } /* Hier bleibt das Bild, nur die Trefferflaeche waechst. Das unsichtbare Feld sitzt mittig auf dem Knopf und ist genau so breit wie er. Es waechst also nur nach oben und unten, nie zur Seite, und kann dadurch keinen Nachbarn in derselben Zeile verdecken. pointer-events wird ausdruecklich NICHT abgeschaltet: das Feld soll den Tipp ja annehmen. Weil es zum Knopf selbst gehoert, aendert sich am Hover und an der Tastatur nichts, und der Tipp landet dort, wo er hingehoert. */ .location-tab, .dgr-fchip { position: relative; } .location-tab::after, .dgr-fchip::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); } /* --- 2 Kleinschrift ------------------------------------------------------ */ /* Was man liest, um etwas auszufuellen. */ .modal-form-label, .termin-step-badge, .confirm-row-label { font-size: 12.5px; } /* Die beiden Zehner. Der eine steht am Medikamentenfeld ("entscheidet der Arzt"), der andere unter dem Notfallknopf, der immer mitschwebt. */ .med-menge-hint, .floating-emergency-label { font-size: 12px; } /* --- 3 Ueberstand der Einblendungen -------------------------------------- */ /* hidden ist der Rueckfall fuer aeltere Browser, clip die richtige Antwort. Gesetzt wird es an der Sektion, nicht am Raster darin, damit die Schatten der Karten nicht an der Kante abgeschnitten werden. */ .standorte, .about, .team { overflow-x: hidden; } @supports (overflow-x: clip) { .standorte, .about, .team { overflow-x: clip; } } /* --- 4 Der Datenschutzhinweis und die Overlays --------------------------- */ /* Beim ersten Besuch steht der Hinweis unten im Bild. Oeffnet man in dieser Zeit ein Overlay, liegt er ueber dessen unteren Knoepfen. Der Text selbst ist Rechtstext und bleibt Wort fuer Wort, wie er ist. Geaendert wird nur, wann er zu sehen ist. Solange ein Overlay offen ist, gleitet der Hinweis nach unten aus dem Bild. Verwendet werden dafuer genau die Werte, die er im noch nicht eingeblendeten Zustand ohnehin hat, und die Bewegung von 0,8 Sekunden, die in consent-banner.css schon steht. Schliesst man das Overlay, kommt er von selbst zurueck. Er gilt damit NICHT als gelesen, und niemand bestaetigt ihn versehentlich, ohne ihn gesehen zu haben. Die vier Klassen sind die, die die Seite an den body haengt, wenn etwas darueber liegt: modal-open fuer Kalender, Leistungen, Gesundheitsthemen und die drei Formulare, dazu Notfallbereich, Mobilmenue und die Rechtstexte. */ body.modal-open .rc-banner, body.notfall-overlay-open .rc-banner, body.mobile-menu-open .rc-banner, body.legal-modal-locked .rc-banner { transform: translateY(calc(100% + 80px)); opacity: 0; pointer-events: none; } /* --------------------------------------------------------------------------- 11.08.2026: Verweis von den Standortkarten der Startseite auf die eigenen Standortseiten. Eigene Klasse, weil .standort-btn in index.html pauschal als Ausloeser der Rezeptbestellung verdrahtet wird. --------------------------------------------------------------------------- */ .standort-seite-link { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; margin-top: 12px; padding: 13px 18px; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--white); color: var(--forest); font-size: 14.5px; font-weight: 600; text-decoration: none; transition: background 0.5s var(--ease), color 0.5s var(--ease), border-color 0.5s var(--ease), transform 0.5s var(--ease); } .standort-seite-link svg { flex-shrink: 0; transition: transform 0.5s var(--ease); } .standort-seite-link:hover { background: var(--forest); color: var(--cream); border-color: var(--forest); transform: translateY(-1px); } .standort-seite-link:hover svg { transform: translateX(3px); } @media (prefers-reduced-motion: reduce) { .standort-seite-link:hover { transform: none; } .standort-seite-link:hover svg { transform: none; } } /* --------------------------------------------------------------------------- 13.08.2026: Notdienst-Liste, starres Raster aufgeloest .notfall-pharmacy-overlay-row stand auf 240px 1fr 1fr 150px. Die beiden festen Spalten und die drei Luecken zu 16 Pixeln brauchen zusammen 438, bevor die flexiblen Spalten ueberhaupt etwas bekommen. Auf eine Spalte aufgeloest wurde erst unterhalb von 480 Pixeln. Gemessen auf hausarzt-soemmerda.html, Ueberlauf der breitesten Zeile: bei 520 fehlten 197 Pixel, bei 560 noch 156, bei 640 noch 78. Darueber blieben Reste von 2 bis 34 Pixeln, die von langen Apothekennamen kommen, die nicht umbrechen durften. Steht hier und nicht an einer der beiden Fundstellen, weil die Regel doppelt vorliegt (index.html Zeile 2137 und notfall-uebernahme.css Zeile 1892) und responsive.css auf allen 21 Seiten nach beiden geladen wird. Eine Stelle statt zwei, die auseinanderlaufen koennen. --------------------------------------------------------------------------- */ /* Ueber 700: die Spalten duerfen unter ihre Wunschbreite schrumpfen. Ohne minmax(0, ...) ist eine 240px-Spalte eine Untergrenze, keine Wunschbreite, und das Raster waechst ueber seinen Platz hinaus. */ .notfall-pharmacy-overlay-row { grid-template-columns: minmax(0, 240px) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 150px); } /* Rasterkinder haben von Haus aus min-width auto, also die Breite ihres laengsten unteilbaren Wortes. Ein langer Apothekenname blaeht damit die ganze Zeile auf. */ .notfall-pharmacy-overlay-row > * { min-width: 0; } .notfall-pharmacy-overlay-row-name, .notfall-pharmacy-overlay-row-address { overflow-wrap: break-word; } /* Unter 700 eine Spalte. Vorher lag diese Grenze bei 480, und genau dazwischen war der Ueberlauf am groessten. */ @media (max-width: 700px) { .notfall-pharmacy-overlay-row { grid-template-columns: 1fr; gap: 6px; padding: 14px 16px; } } /* --------------------------------------------------------------------------- 13.08.2026: lange Adressen duerfen umbrechen Auf datenschutz.html stand bei 320 Pixeln eine voll ausgeschriebene Adresse (https://osmfoundation.org/wiki...) im Text. Sie ist 346 Pixel breit, der Absatz 264. Eine Adresse hat keine Leerzeichen, also findet der Browser keine Stelle zum Umbrechen und schiebt die Seite auseinander: gemessen 374 statt 320, und ueber window.scrollTo(200, y) liess sich wirklich 54 Pixel weit zur Seite rollen. Im ganzen Messlauf ueber 21 Seiten und 14 Breiten war das der einzige echte waagerechte Rollbalken. Zu sehen ist er erst, nachdem man die Seite einmal durchgescrollt hat. Vorher ist der Absatz noch nicht eingeblendet und dabei durchsichtig. break-word bricht nur, wenn es sein muss, und laesst normalen Text in Ruhe. anywhere an den Verweisen erlaubt zusaetzlich den Bruch mitten in der Adresse. Bewusst kein overflow-x: hidden - das wuerde den Ueberlauf nur verdecken, und genau davon wollte Punkt 3 dieser Datei wegkommen. --------------------------------------------------------------------------- */ .legal-wrap, .legal-body, .legal-modal-body { overflow-wrap: break-word; } .legal-wrap a, .legal-body a, .legal-modal-body a { overflow-wrap: anywhere; } /* --------------------------------------------------------------------------- 13.08.2026: Trefferflaechen der Navigation Aus dem Messlauf ueber 21 Seiten und 14 Breiten, 294 Messungen. Gemessen wurde die Hoehe ueber getComputedStyle, nicht nach Augenmass. Hauptmenue "Praxis", "Standorte", "Team", ... 23,1 bis 24,1 Pixel Wortmarke .logo 30 bis 38 Pixel "Rezept bestellen" .nav-cta 28,6 bis 37,8 Pixel Karte: Zoom + und - 30 Pixel Karte: Kreuz am Kaestchen 24 Pixel Notdienst: Vorschau-Knopf 34 Pixel Notdienst: Pfeile vor und zurueck 26 Pixel Gewachsen wird nicht sichtbar, sondern ueber ein unsichtbares Feld, genau wie weiter oben bei .location-tab und .dgr-fchip. Grund: die Kopfleiste ist bei 1920 Pixeln randvoll (932 Pixel Inhalt auf 929 Pixel Platz, siehe Uebergabe vom 11.08.). Wer dort Knoepfe wachsen laesst, bricht die Leiste um. Das Feld liegt mittig auf dem Element, ist genau so breit wie es und waechst nur nach oben und unten. pointer-events bleibt ausdruecklich an: das Feld soll den Tipp annehmen. Weil es zum Element selbst gehoert, aendert sich an Hover und Tastatur nichts. Verwendet wird ::before. Die Menuelinks haben ihr ::after schon fuer den Unterstrich, der beim Zeigen von links nach rechts waechst. --------------------------------------------------------------------------- */ .nav-links a, .logo, .nav-cta, .notfall-pharmacy-overlay-trigger { position: relative; } /* .notfall-pharmacy-nav gehoert hier NICHT hinein. Die Pfeile stehen laut notfall-uebernahme.css Zeile 1847 auf position: absolute, damit sie neben der Karte sitzen. Diese Liste hat sie am 13.08. auf relative gesetzt und damit in den Textfluss fallen lassen: gemessen standen sie bei 5177 und 5225, waehrend die Spalte bei 5153 endet, also unten aus der Karte heraus. Zugleich verteilte die Spalte dadurch vier statt zwei Kinder und der Verweis auf die Notdienst-Vorschau rutschte 96 Pixel nach oben. Fuer das 44-Pixel-Feld genuegt der Pfeil so wie er ist: sein ::before braucht nur einen positionierten Vorfahren, und absolute ist positioniert. */ .nav-links a::before, .logo::before, .nav-cta::before, .notfall-pharmacy-overlay-trigger::before, .notfall-pharmacy-nav::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); } /* Die Karte bringt ihre eigenen Knoepfe mit. Die duerfen sichtbar wachsen, sie stehen frei in der Ecke und stossen an nichts an. */ .leaflet-control-zoom-in, .leaflet-control-zoom-out { width: 44px !important; height: 44px !important; line-height: 44px !important; font-size: 20px !important; } .leaflet-popup-close-button { width: 44px !important; height: 44px !important; font-size: 20px !important; display: flex !important; align-items: center; justify-content: center; } /* --------------------------------------------------------------------------- 13.08.2026: Kleinschrift, die man liest, um etwas zu tun Dieselbe Trennung wie unter Punkt 2 weiter oben: angehoben wird, was man liest, um etwas zu finden oder auszufuellen. Reine Zierschrift bleibt. .ort-zeile-lab "Adresse", "Telefon", "E-Mail", "KIM", "Barrierefrei", "Parken" 11 -> 12,5 h6 "Soemmerda", "Koelleda" im Fussbereich 11 -> 12,5 .mobile-menu-sub Untertitel je Menuepunkt 11 -> 12,5 .nav-cta "Rezept bestellen" 11,5 -> 12 Was bewusst NICHT angefasst wurde, steht in docs/UEBERGABE-NACHT.md unter "Eine Frage an Dirk". Kurz: die Zierzeilen (.hero-eyebrow, .tabs-eyebrow, .group-eyebrow, .block-eyebrow, .tab-active-pill, .mobile-menu-num, die Zaehlung "Werkzeug 1"), die buchstabenweise animierte Wortmarke "Hausarztpraxis" bei 9,5 Pixeln und die Quellenangabe der Karte bei 10 Pixeln. Das sind zusammen rund 2400 Fundstellen und eine Entscheidung ueber das Schriftbild der ganzen Seite, nicht ueber Responsive. --------------------------------------------------------------------------- */ .ort-zeile-lab, .mobile-menu-sub { font-size: 12.5px; } .footer-col h6, .footer-grid h6 { font-size: 12.5px; } /* Hier stand .nav-cta { font-size: 12px }. Wieder entfernt, siehe docs/UEBERGABE-NACHT.md: die Regel erreichte den engen Fall bei 320 bis 375 Pixeln nicht (dort gewinnt ein !important) und hat stattdessen auf dem Desktop geschadet, wo "Rezept bestellen" von 14 auf 12 Pixel geschrumpft ist. */ /* ========================================================================== Notfallblock: Lesbarkeit der Nummern und Ausrichtung der zwei Verweise Gemessen und behoben 13.08.2026. Fraunces ist eine Variable Font. Die Achse opsz (optische Groesse) reicht von 9 bis 144 und steuert die Strichstaerke. In notfall-uebernahme.css und in der Kopie in index.html steht an ueber zwanzig Stellen hart "opsz" 144, unabhaengig von der wirklichen Schriftgroesse. 144 ist fuer Riesenschrift gedacht und zeichnet hauchduenne Haarstriche. Eine Telefonnummer mit 30 Pixeln wurde damit gezeichnet, als haette sie 144: zu dick im Kontrast, zu duenn in den Haarstrichen, schlecht lesbar. Dazu zog letter-spacing -0.025em die Ziffern zusammen. Regel fuer die Zukunft: opsz gehoert auf die tatsaechliche Schriftgroesse, nicht auf 144. Bei Ziffern zusaetzlich tabular-nums, damit alle Ziffern gleich breit sind und Telefonnummern nicht flattern. ========================================================================== */ html body .notfall-tel { font-variation-settings: "opsz" 30, "SOFT" 50; font-weight: 500; letter-spacing: 0; font-variant-numeric: tabular-nums; } html body .notfall-title { font-variation-settings: "opsz" 34, "SOFT" 50; font-weight: 400; } html body .notfall-pharmacy-name { font-variation-settings: "opsz" 24, "SOFT" 50; } html body .notfall-pharmacy-tel-number { font-variation-settings: "opsz" 22, "SOFT" 50; letter-spacing: 0; font-variant-numeric: tabular-nums; } /* Die beiden Verweise unter der Apothekenkarte standen 91 Pixel versetzt, weil sie in zwei verschiedenen Rasterspalten liegen und deren Inhalte unterschiedlich hoch sind. margin-top: auto drueckt beide an den unteren Rand ihrer Spalte, die gleiche Zeilenhoehe gibt ihnen dieselbe Grundlinie. */ html body .notfall-pharmacy-overlay-trigger, html body .notfall-pharmacy-service-link { line-height: 1.65; } /* --------------------------------------------------------------------------- Apothekenkarte: Platz fuer den linken Blaetterpfeil Gemessen 13.08.2026, nachdem die Pfeile wieder an ihrem vorgesehenen Platz stehen (siehe Block darueber). Der Pfeil sitzt laut notfall-uebernahme.css Zeile 1850 auf left: -32px, bezogen auf .notfall-pharmacy-info-column. Das rote Apotheken-A beginnt aber genau am Anfang dieser Spalte. Gemessene Ueberlappung: 12 Pixel bei 768 und 1024, 31 Pixel bei 1280, 11 Pixel bei 1440 und 1920. Bei 768 ragte das A zusaetzlich 36 Pixel links aus dem Fenster. Die Ursache ist strukturell: Zeile 1860 setzt das A auf position: absolute mit right: 100%, es haengt also absichtlich LINKS AUSSERHALB der Spalte. Zeile 1850 will den linken Pfeil mit left: -32px an dieselbe Stelle. Der rechte Pfeil macht es richtig, Zeile 1851 setzt ihn mit right: max(8px, calc(50% - 134px)) INNERHALB der Spalte. Der linke wird deshalb symmetrisch dazu gesetzt: das A bleibt allein aussen, die beiden Pfeile stehen sich innen gegenueber. Ein erster Versuch mit padding-left an der Spalte ist zurueckgenommen. Er half bei 1440 und 1920, verschlechterte aber 768 und 1024 auf 34 Pixel, weil das A sein Bezugselement mitverschiebt und dadurch mitwandert. --------------------------------------------------------------------------- */ html body .notfall-pharmacy-nav-prev { left: max(8px, calc(50% - 134px)); right: auto; } /* --------------------------------------------------------------------------- Fremde Systemschriften bei den Symbolen Gemessen 13.08.2026 auf der Startseite und den Standortseiten. Die Seite hat zwei Hausschriften, Fraunces fuer Ueberschriften und Zahlen, Inter fuer Text. Bei den Symbolen schlug aber die Schrift des jeweiligen Geraets durch, weil ihnen keine Familie zugewiesen war. Gezaehlt wurden vier fremde Familien: Arial bei den Schliesskreuzen und den Blaetterpfeilen Tahoma bei einem Schliesskreuz Helvetica Neue bei den Trennstrichen Lucida Console bei den Zoomknoepfen der Karte Damit sah dasselbe Zeichen auf jedem Rechner anders aus. Jetzt tragen sie die Hausschrift. Fehlt dort ein Zeichen, faellt es wie bisher auf die Systemschrift zurueck, es geht also nichts verloren. --------------------------------------------------------------------------- */ html body .notfall-pharmacy-nav, html body .leaflet-control-zoom-in, html body .leaflet-control-zoom-out, html body .leaflet-popup-close-button, html body .stblock-close, html body .modal-close, html body .pm-ovl-close { font-family: "Inter", sans-serif; } /* B4 (14.08.2026): das rote Apotheken-A ueberdeckte auf den Standortseiten den Vorwaertspfeil der Notdienstkarte (5px Ueberlappung bei 375px). Das Logo ist Schmuck und darf keine Klicks schlucken, die Pfeile liegen darueber. Fix bewusst zentral hier, nicht an den beiden Dubletten (index.html:2117, notfall-uebernahme.css:1872), damit nichts auseinanderlaeuft. */ .notfall-pharmacy-live .notfall-pharmacy-logo { pointer-events: none; } .notfall-pharmacy-live .notfall-pharmacy-nav { z-index: 2; } /* B4-Rest (14.08.2026): das 2-Spalten-Grid der Sprechzeiten im Live-Widget (index.html, html body ... !important, 2x 7.6em) laeuft bei 320px 18px ueber seinen Block. Bei Kleinstbreiten stehen Vormittag und Nachmittag untereinander. Gleiche Spezifitaet plus !important ist hier noetig, weil die Ursprungsregel beides ebenfalls fuehrt. */ @media (max-width: 340px) { html body .hero .live-widget #scheduleList .schedule-day .day-hours { grid-template-columns: minmax(0, 1fr) !important; row-gap: 2px !important; white-space: normal !important; } }