/* --------------------------------------------------------------------------- Mobile Ansicht – die Hülle jeder Seite (Kopfleiste, Seitenleiste, Inhalt). Was eine einzelne Seite braucht, steht bei ihr; hier steht nur, was auf JEDER Seite gleich schiefgeht, sobald das Fenster schmal wird. Die Datei wird als letzte geladen (ui/header.blade.php) und kommt deshalb fast ohne !important aus – ausser gegen Inline-Stile, die aus den Vorlagen stammen. Die Grenze ist 991.98px (Bootstrap lg): darüber die eingerichtete Ansicht, darunter die gestapelte. Die Seitenleiste fährt schon ab 1199.98px aus (connie.css) – das ist Absicht und bleibt so: ein 1100px breites Fenster hat für 270px Menü keinen Platz mehr, für den Inhalt aber schon. --------------------------------------------------------------------------- */ /* Unterkante der Kopfleiste. Wird beim Aufbau und bei jeder Grössenänderung gemessen (ui/sidebarmenu5.blade.php) – der Wert hier ist nur der Stand, bis das Skript läuft. Vorher stand an drei Stellen fest 72px, während die Leiste tatsächlich 62px hoch ist; aus dem Unterschied wurde ein heller Spalt unter der Kopfleiste, durch den der Inhalt ungedimmt durchschien. */ :root { --pba-kopf-hoehe: 62px; } @media (max-width: 991.98px) { /* --- Kein waagerechter Balken --------------------------------------- Die Kopfzeile jeder Seite zieht sich mit negativen Rändern über den Innenabstand des Inhalts hinaus (margin-left:-15px, -right:-20px in layouts/app.blade.php und ui/pagemenu.blade.php). Auf dem Desktop verschwindet das im Rand, auf dem Telefon ragt die Zeile aus dem Bild und die ganze Seite lässt sich seitlich schieben – ein Fehler, der wie ein zerbrochenes Layout aussieht und jede Kachel mitnimmt. */ .content > .pba-seitenkopf-row, .content .pba-page-menu-row { margin-left: 0 !important; margin-right: 0 !important; } .content { padding: 8px 12px; } /* --- Kopfleiste ----------------------------------------------------- Der Markenblock ist auf 300px festgestellt. Zusammen mit Glocke, Notizen und Benutzername passt das auf ein Telefon nicht; der Benutzername wird dabei zuerst geopfert – das Symbol daneben öffnet dasselbe Menü. */ .topnav-marke { width: auto !important; flex: 0 1 auto; min-width: 0; } /* min-width und overflow gehören zusammen: ohne sie schrumpft zwar der Markenblock, das Logo darin aber nicht – es ragte aus seinem eigenen Block heraus und lag während einer Übernahme unter deren Schaltfläche. */ .topnav-marke .topnav-logo-frame { margin-left: 10px !important; min-width: 0; overflow: hidden; } .topnav-marke .topnav-logo-frame img { max-width: 130px !important; } .navbar .container-fluid { padding-left: 6px; padding-right: 6px; } .navbar .ms-auto { gap: 0; } .topnav-org { display: none; } .topnav-benutzername { display: none; } #userInfo { margin-left: 0; } .pba-notes-shell { margin-right: 6px; } /* Das Profilmenü hängt am rechten Rand und liefe sonst aus dem Bild. */ #profile_dropdown { position: absolute; right: 0; left: auto; } /* Tippziel des Menüknopfes: 44px, nicht die Grösse des Symbols. */ #toggleSidebar { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } } /* --- Tabellen (ui/datatable3, DevExtreme) -------------------------------- Gilt für jede Liste der Anwendung, weil alle dieselbe Vorlage einbinden. -------------------------------------------------------------------------- */ @media (max-width: 767.98px) { /* Die Gruppierungsleiste weicht – und damit verschwindet die Überlappung in der Werkzeugleiste. Das Raster legt die drei Bereiche seiner Leiste (links, Mitte, rechts) absolut übereinander und rechnet ihre Breiten aus. Passt der Inhalt nicht mehr nebeneinander, überlappen sie einfach: im Kompetenzkatalog lag das Suchfeld auf der Gruppierungsleiste, von der nur noch "Kata" herausschaute. Behoben wird das hier, indem der breiteste Teil weggenommen wird, statt die Leiste umzubauen. Denn die Höhe dieser Leiste darf sich NICHT ändern: DevExtreme berechnet daraus in JavaScript, wo die Spaltenköpfe darunter sitzen. Jeder Versuch, die Bereiche untereinander zu stellen, machte die Leiste flacher – und die Überschrift "K-Name" rutschte in das Suchfeld hinein. Die Gruppierungsleiste ist der richtige Verzicht: sie ist eine Ablagefläche, auf die man Spalten mit der Maus zieht. Mit dem Finger geht das ohnehin nicht, und die Gruppierung selbst bleibt bestehen – sichtbar an den Gruppenzeilen der Liste. */ .dx-datagrid-header-panel .dx-datagrid-group-panel { display: none; } /* Die Einrückung der Gruppen (je Stufe 30px, bei Katalog + Modul also 60px) bleibt, obwohl sie auf 390px viel Platz kostet. Ihre Breite steht im colgroup der Tabelle, nicht an der Zelle – über CSS erreichbar wäre sie nur nach Spaltennummer, und die trifft in Listen ohne Gruppierung die erste Datenspalte. Das Risiko für alle anderen Listen wiegt schwerer als der gewonnene Rand hier. */ /* Umbrechende Zellen brauchen etwas Luft nach oben und unten, sonst kleben zwei- und dreizeilige Einträge aneinander. */ .dx-datagrid .dx-data-row > td { padding-top: 8px; padding-bottom: 8px; } /* Mittig, weil die Knöpfe einer Zeile (Menü, Aufklappen) hier 44px hohe Tippziele sind und ihr Zeichen mittig tragen – der Text stand oben in der Zelle, drei Teile einer Zeile auf drei Höhen. Zwei Gegner: app.css setzt "td { vertical-align: top !important }" für jede Zelle der Anwendung – daher !important –, und DevExtreme ".dx-datagrid-content .dx-datagrid-table .dx-row > td", geladen nach dieser Datei – daher der lange Selektor. */ .dx-datagrid .dx-datagrid-content .dx-datagrid-table .dx-data-row > td { vertical-align: middle !important; } /* Ausgeblendete Spalten sind 0px breit – ihr Inhalt ist damit aber nur unsichtbar, solange die Zelle ihn abschneidet. Die jeweils LETZTE trägt overflow:visible und liess ihren Wert deshalb aus der Zelle heraus neben die Aufklapp-Schaltfläche laufen: im Kompetenzkatalog stand dort ein herrenloser Bindestrich (die leere Kategorie). */ /* !important, weil die Regel der Bibliothek für die letzte Datenzelle spezifischer ist als jeder Selektor, der ohne sie auskäme. */ .dx-datagrid-rowsview .dx-row > td.dx-datagrid-hidden-column { overflow: hidden !important; } /* Der rechte Teil der Werkzeugleiste bleibt in der Tabelle. ui/datatable2_css legt ihn mit float:right und position:relative ab; mit „Ansicht zurücksetzen", der 240px-Suche und dem Menü war er 362px breit, die Leiste 338px – der Überschuss lief links aus der Karte, der Knopf stand ausserhalb (Meine Praxisbesuche, Liste). Gedeckelt auf die Leiste (abzüglich 2 × 5px Rand); schrumpfen darf nur die Suche. Wo alles passt, bleibt alles, wie es ist: die Breite ergibt sich weiter aus dem Inhalt. Nicht auf ganze Breite gezogen – links liegt bei ausgewählten Zeilen der Knopf „Aktionen". Die Höhe der Leiste ändert sich dabei (69px → 61px, wie am Rechner); die Spaltenköpfe folgen ihr im Fluss, gemessen auf 320 bis 430px. Nur Leisten mit Suchfeld: ohne Suche gibt es nichts, was schrumpfen könnte, und gedeckelt liefen breite Knöpfe dann rechts statt links hinaus (Einsätze: „Nur ohne Platz", „Neue Einsatzplanung"). Dort bleibt es, wie es war. */ .dx-datagrid-header-panel .dx-toolbar-after:has(.dx-datagrid-search-panel) { display: flex; align-items: center; max-width: calc(100% - 10px); } .dx-datagrid-header-panel .dx-toolbar-after:has(.dx-datagrid-search-panel) > * { flex: 0 0 auto; } .dx-datagrid-header-panel .dx-toolbar-after > .dx-toolbar-item:has(.dx-datagrid-search-panel) { flex: 0 1 auto; min-width: 0; } /* 15px: der linke Rand, den DevExtreme dem Suchfeld gibt. */ .dx-datagrid-header-panel .dx-datagrid-search-panel { max-width: calc(100% - 15px); } } /* Spaltenköpfe auf Touch-Geräten: connie.css gibt dort jedem [role="button"] 44px Mindesthöhe – auch dem Filterzeichen im Spaltenkopf. Jede Kopfzeile war dadurch 61px statt 33px hoch, das Zeichen stand als 44px-Säule neben der Überschrift. Treffbar bleibt es trotzdem: DevExtreme legt über ::after eine Fläche über die ganze Zellenhöhe. Dieselbe Bedingung wie die Ursache – Touch, nicht Breite. */ @media (pointer: coarse) { .dx-datagrid .dx-column-indicators .dx-header-filter[role="button"] { min-height: 0; } /* Aus demselben Grund waren die Knöpfe neben der Suche („Ansicht zurücksetzen", Spaltenauswahl, Menü) 36×44 – höher als das 36px- Suchfeld daneben, zwei Masse in einer Zeile. Jetzt 36×36 wie am Rechner. */ .dx-datagrid-header-panel .dx-toolbar .dx-button[role="button"] { min-height: 0; } } /* --- Was auf dem Telefon weicht ------------------------------------------ Kopfleiste und Fuss stehen auf jeder Seite, und auf 390px ist dort jeder Platz gebraucht. Ausgeblendet wird hier und nicht in der Vorlage: die Auszeichnung entsteht auf dem Server, und der kennt die Breite des Geräts nicht. Beide bleiben deshalb im ausgelieferten HTML – und mit ihnen ihre Tour-Anker, die genau einmal vorkommen müssen (CLAUDE.md). -------------------------------------------------------------------------- */ @media (max-width: 767.98px) { /* Die Notizen im Kopf. Eine Notiz ist ein Zettel, den man am Rand der Arbeitsfläche liegen lässt – auf dem Telefon gibt es diesen Rand nicht, und der Knopf trägt ein Menü mit drei Satelliten, die sich um ihn herum aufklappen. Der Platz gehört dort Glocke und Profil. */ .pba-notes-shell { display: none; } /* Im Fuss die beiden hinteren Rechtstexte. Impressum und Datenschutz bleiben: nach ihnen wird gesucht, und der Fuss ist der einzige Weg dorthin. */ .pba-footer-link[data-legal-modal="agb"], .pba-footer-link[data-legal-modal="barrierefreiheit"] { display: none; } } /* Während einer Übernahme („Anmelden als") trägt die Kopfleiste ein Feld mehr, und dieses Feld darf nicht umbrechen. Auf 390px gehen sich Menüknopf, Logo, Übernahme, Glocke, Notizen und Profil zusammen nicht mehr aus – etwas muss weichen. Das Logo ist der einzige Teil ohne eigene Handlung: es führt zur Startseite, und die steht auch im Menü. Alles andere ist eine Schaltfläche, die es sonst nirgends gibt. */ @media (max-width: 575.98px) { /* !important, weil die Vorlage display:inline-flex als Inline-Stil setzt. */ .navbar:has(.pba-uebernahme) .topnav-logo-frame { display: none !important; } } /* --- Ausgefahrene Seitenleiste ------------------------------------------ Eigene Grenze, und zwar die von connie.css: ab dort fährt die Leiste über den Inhalt statt neben ihm zu stehen. Stünde das oben bei 991.98px, gäbe es ein Fenster von 992 bis 1199px, in dem die Leiste zwar den Inhalt verdeckt, aber nichts darauf hinweist und nichts sie schliesst. Ohne abdunkelnde Fläche dahinter ist nicht zu erkennen, dass die Seite darunter gerade nicht bedienbar ist – und es gibt keine Stelle, an die man tippen kann, um das Menü wieder loszuwerden. ------------------------------------------------------------------------- */ @media (max-width: 1199.98px) { .pba-mobil-abdunklung { position: fixed; /* Beginnt an der Unterkante der Kopfleiste – die bleibt bedienbar; ein Tipp darauf schliesst das Menü trotzdem (sidebarmenu5.blade.php). */ inset: var(--pba-kopf-hoehe) 0 0 0; /* Unter der Seitenleiste (#sidebar liegt auf 1040, pba-compact-ui.css) und unter der Kopfleiste (1030) – abgedunkelt wird der Inhalt. */ z-index: 1029; background: rgba(15, 23, 42, .45); opacity: 0; pointer-events: none; transition: opacity .3s ease-in-out; } /* Die ausgefahrene Leiste: von der Kopfleiste bis zum unteren Bildrand. Vorher stand hier margin-top:72px bei einer 62px hohen Kopfleiste und height:100vh – die Leiste ragte damit 72px unter den Bildrand, und bei einem längeren Menü als dem des Azubis waren die untersten Einträge nicht erreichbar. dvh statt vh: auf dem Telefon zählt vh die Adressleiste nicht mit, das Menü würde also genau um deren Höhe unten abgeschnitten. */ #sidebar { margin-top: var(--pba-kopf-hoehe) !important; height: calc(100dvh - var(--pba-kopf-hoehe)); /* Ohne das bliebe die Leiste 844px hoch: die Grundregel gibt ihr min-height:100vh, und eine Mindesthöhe schlägt jede Höhe. */ min-height: 0; /* Die Leiste selbst ist durchsichtig; sichtbar ist die Hülle darin. Innenabstände liessen deshalb dunkle Streifen zwischen Bildrand und Menü stehen – die Hülle ist nur rechts gerundet, sie GEHÖRT an den Rand. Rechts bleiben 2px für den Schlagschatten. */ padding: 0 2px 0 0; } /* Die Hülle trägt die Bootstrap-Klasse h-100 (height:100% !important) und lässt sich deshalb nicht direkt bemassen. Sie folgt jetzt aber der Leiste, und die stimmt. Aussehen: eine weisse Fläche, sonst nichts. Neben dem Inhalt ist die Hülle eine schwebende Karte – abgerundet, mit heller Kante und einem Verlauf aus halbdurchsichtigem Weiss. Über dem abgedunkelten Inhalt ergibt derselbe Verlauf aber Grau, und Kante, Rundung und die 12px Innenabstand rahmen die weisse Liste sichtbar ein. Ausgefahren ist das Menü keine Karte mehr, sondern die Fläche selbst. Der Schlagschatten bleibt – er trennt sie vom Inhalt daneben. */ #sidebar .sidebar-shell { padding: 0; border: 0; border-radius: 0; background: #fff; gap: 0; } body.pba-menue-offen .pba-mobil-abdunklung { opacity: 1; pointer-events: auto; } /* Solange das Menü offen ist, scrollt es – nicht die Seite dahinter. html muss mit: connie.css gibt html und body height:100%, damit rollt die Seite am Wurzelelement. Ein overflow:hidden allein am body würde dort schlicht nichts bewirken. */ body.pba-menue-offen, html:has(> body.pba-menue-offen) { overflow: hidden; } } /* Bei „Bewegung reduzieren" nur ein- und ausblenden, ohne Fahrt. */ @media (prefers-reduced-motion: reduce) { .pba-mobil-abdunklung { transition: none; } #sidebar { transition: none; } } /* --- Dialoge ------------------------------------------------------------- Ein Dialog ist am Telefon keine Karte auf der Seite, sondern die Seite. Bootstrap gibt .modal-dialog feste Hoechstbreiten und Aussenabstaende; auf 390px bleibt davon ein Rahmen um einen Inhalt, der ohnehin nicht passt. Gerollt wird der Dialog als Ganzes - die .modal ist es, die rollt, nicht der Rumpf in sich. Sichtbar bleiben Kopfzeile und Fuss, weil sie sticky stehen: sonst liegen die Knoepfe, um die es geht, unter dem Bildrand. dvh statt vh, sonst reicht der Dialog um die Hoehe der Adressleiste zu weit. #modal-edit-taetigkeitsbericht ist in pba-compact-ui.css schon eigens behandelt. Diese Datei wird spaeter geladen, die Regeln hier greifen also - und sie sagen dasselbe, nur fuer alle Dialoge. ------------------------------------------------------------------------- */ @media (max-width: 767.98px) { .modal-dialog { margin: 0; max-width: 100%; min-height: 100dvh; } .modal-dialog.modal-dialog-centered { align-items: stretch; } .modal-content { min-height: 100dvh; border: 0; border-radius: 0; } .modal-header, .modal-footer { position: sticky; z-index: 1; background: inherit; } .modal-header { top: 0; } .modal-footer { bottom: 0; } /* Was hier wirklich rollt: die .modal selbst. .modal-content bekommt oben eine MINDESThoehe von 100dvh - einen Boden, keine Decke -, also hat .modal-body keine bestimmte Hoehe, und ein overflow-y an ihm greift nicht. Das Ergebnis stimmt trotzdem: Kopf und Fuss stehen sticky, die Knoepfe bleiben im Bild, und die Seite dahinter ist durch Bootstraps modal-open gesperrt. Die Angabe "overflow-y: auto" stand hier und tat nichts - sie ist gestrichen. 16px ist Bootstraps eigener Wert fuer .modal-body (1rem). Vorher stand hier 12px und die Regel nahm Platz WEG, statt welchen zu geben. env(safe-area-inset-bottom) ist derzeit immer 0: das Viewport-Meta in ui/header.blade.php (Zeile 16) traegt kein "viewport-fit=cover", und ohne das liefert die Umgebungsvariable keinen Wert. Der Summand bleibt stehen, weil er nichts kostet und im selben Moment richtig wird, in dem jemand das Meta ergaenzt - unter der Wischleiste von iOS liegt sonst kein Tippziel mehr. */ .modal-body { padding-bottom: calc(16px + env(safe-area-inset-bottom)); } /* Ein Fuss mit mehreren Knoepfen bricht um, statt sie zu stauchen - gestaucht faellt zuerst die Beschriftung weg, und ein Knopf ohne Beschriftung ist keine Handlung mehr. */ .modal-footer > .btn { flex: 1 1 auto; min-height: 44px; } /* --- Tippziele ---------------------------------------------------- 44px ist die Untergrenze, und sie gilt fuer das Ziel, nicht fuer das Symbol darin. Die Klassennamen folgen dem CSS, und das ist hier Bootstrap 4.3.1 (public/theme-files/bootstrap, geladen in ui/header.blade.php). Das Kreuz heisst deshalb .close - in 125 Vorlagen, gegen 3 mit .btn-close. Beide stehen trotzdem in der Liste: die Bootstrap-5-JS aus dem CDN (layouts/app.blade.php) bringt an einzelnen Stellen auch ihre Auszeichnung mit. Die Luecke ist ein .close AUSSERHALB einer .modal-header: dort ist es so gross wie sein Zeichen (font-size 1.5rem, line-height 1 - rund 24px). Innerhalb einer .modal-header polstert Bootstrap 4 es mit padding: 1rem schon auf rund 56px, dort aendert die Regel nichts. .btn gehoert dazu, weil er die haeufigste Handlung der Anwendung ist und auf 38px rechnet (padding .375rem .75rem, line-height 1.5, 1px Rahmen). Nur min-height, nirgends height: derselbe Knopf trifft im .modal-footer schon eine Mindesthoehe von 44px, und zwei Mindesthoehen stoeren sich nicht - eine feste Hoehe wuerde streiten. */ .btn, .btn-close, .close, .btn-sm, .btn-group-sm > .btn, .nav-tabs .nav-link, .dropdown-item { min-height: 44px; } .btn-close, .close, .btn-sm { min-width: 44px; } .nav-tabs .nav-link, .dropdown-item { display: flex; align-items: center; } /* --- Formularfelder ----------------------------------------------- Zwei Felder nebeneinander ergeben auf 390px zwei halbe Felder. Die Reihen des Rasters stapeln, und ein Feld bekommt die Hoehe eines Tippziels. 16px Schriftgroesse ist keine Gestaltung, sondern eine Abwehr: unter 16px zoomt iOS beim Hineintippen in das Feld hinein und laesst die Seite verschoben zurueck. .custom-select ist der Name unter Bootstrap 4.3.1 und steht in 25 Vorlagen; .form-select gibt es in fuenf. Beide stehen hier, aus demselben Grund wie .close und .btn-close oben. */ .form-control, .form-select, .custom-select { min-height: 44px; font-size: 16px; } /* Bootstrap-Spalten stapeln - aufgezaehlt, nicht als Teilzeichenfolge. [class*="col-"] traf mehr als das Raster: dieses Projekt hat rund zwanzig eigene Klassen, die mit "col-" beginnen (col-actions, col-hours, col-stunden, col-zeitraum, col-azubi, col-kategorie, col-partner, col-icon, col-left, col-right, col-date, col-platz, col-block und weitere), und es zerstoerte .col-auto, dessen ganzer Sinn die Inhaltsbreite ist. Aufgezaehlt sind nur die Stufen, die hier etwas zu tun haben: .col, .col-sm und die nummerierten .col-* und .col-sm-*. Die Klassen .col-md-*, .col-lg-* und .col-xl-* stapelt Bootstrap 4 unterhalb ihrer eigenen Kante (768/992/1200px) schon selbst - ihre Regeln stehen in einer min-width-Abfrage, und darunter gilt die gemeinsame Grundregel mit width: 100%. Diese Abfrage endet bei 767.98px, also liegt keine von ihnen je in Kraft, wenn sie hier greifen wuerde. Gemessen in resources/views (17.09.2026) kommen vor: col, col-sm, col-auto, col-2/4/5/6/8/12, col-sm-1 bis col-sm-10, col-sm-12, col-md-1 bis col-md-8, col-lg-2 bis col-lg-8, col-lg-12, col-xl-4, col-xl-8. Die Liste unten deckt 1 bis 12 ab, damit eine neu hinzukommende Spaltenzahl nicht stillschweigend herausfaellt. Wer eine neue Stufe einfuehrt (col-xxl-*), traegt sie hier nach. */ .row > .col, .row > .col-1, .row > .col-2, .row > .col-3, .row > .col-4, .row > .col-5, .row > .col-6, .row > .col-7, .row > .col-8, .row > .col-9, .row > .col-10, .row > .col-11, .row > .col-12, .row > .col-sm, .row > .col-sm-1, .row > .col-sm-2, .row > .col-sm-3, .row > .col-sm-4, .row > .col-sm-5, .row > .col-sm-6, .row > .col-sm-7, .row > .col-sm-8, .row > .col-sm-9, .row > .col-sm-10, .row > .col-sm-11, .row > .col-sm-12 { flex: 0 0 100%; max-width: 100%; } /* Select2 rechnet seine Breite in JavaScript aus und schreibt sie als Inline-Stil - deshalb !important, sonst bleibt die am Rechner gemessene Breite stehen. */ .select2-container { width: 100% !important; } .select2-container .select2-selection--single { height: 44px; display: flex; align-items: center; } /* Das Aufklappmenue haengt am Fensterrand, nicht am Feld. */ .select2-dropdown { max-width: 100vw; } } /* --- Seitenkopf mit Reitern ---------------------------------------------- Kalender, Meine Praxisbesuche und Alle Praxisbesuche sind Reiter derselben Gruppe; ihre Hülle trägt .pba-reiterkopf. Gleiche Regeln für alle drei, sonst springt der Kopf beim Wechsel zwischen den Reitern. Titel, Reiter und „Export" passen auf dem Telefon nicht in eine Zeile: „Meine Praxisbesuche" braucht mit Zeichen und Pille rund 187px, „Kalender" rund 108px, „Export" rund 91px – gegen die rund 330px, die der Kopf auf einem 390px breiten Gerät innen hat. Ohne diese Stufe schrumpften die Reiter, „Meine Praxisbesuche" brach mit dem Zeichen über dem Text um, „Export" legte sich darüber, und bei Ausbildern lief der dritte Reiter rechts aus dem Kopf. Deshalb: die Reiter haben die ganze Breite für sich und füllen ihre Zeile; „Export" steht als eigene Zeile darunter, rechts – links sähe er wie ein weiterer Reiter aus, er ist eine Handlung. Mit 12px statt 16px Polster passen zwei Reiter ab 360px nebeneinander (rund 287px gegen 296px). Auf 320px und mit drei Reitern bricht die Reihe um; ein Reiter allein in seiner Zeile wird ganz breit. Der doppelte Klassenname hebt die Regeln über die Seitenstile (.kalender-page h2, .pbf-page h2 – je 28px), die nach dieser Datei im Dokument stehen. Das !important braucht es gegen das Polster der Reiter aus pba-compact-ui.css, das selbst !important trägt. ------------------------------------------------------------------------- */ @media (max-width: 767.98px) { .pba-compact-page.pba-reiterkopf .message-hub-hero { flex-wrap: wrap; } .pba-compact-page.pba-reiterkopf .message-hub-hero-copy { flex: 1 0 100%; } /* 28px brachen „Meine Praxisbesuche" auf zwei Zeilen. */ .pba-compact-page.pba-reiterkopf .message-hub-hero h2 { font-size: 24px; } /* Untergrenze statt fester Höhe: Reiternamen kommen aus der Menüverwaltung, ein langer bricht um und wächst dann mit, statt aus einer 34px-Pille zu ragen. */ .pba-compact-page.pba-reiterkopf .message-hub-export-btn, .pba-compact-page.pba-reiterkopf .message-hub-hero-tabs .btn { min-height: 34px; display: inline-flex; align-items: center; justify-content: center; text-align: center; line-height: 1.2; } .pba-compact-page.pba-reiterkopf .message-hub-export-btn { margin-left: auto; } .pba-compact-page.pba-reiterkopf .message-hub-hero-tabs .nav { flex-wrap: wrap; } /* Wächst ein Reiter auf zwei Zeilen, wachsen alle in der Zeile mit. */ .pba-compact-page.pba-reiterkopf .message-hub-hero-tabs .highlight { align-items: stretch; margin-bottom: 0 !important; } /* auto als Grundbreite: umbrochen wird nach Textbreite, verteilt wird nur der Rest – so endet jede Reiterzeile an der Kante von „Export". */ .pba-compact-page.pba-reiterkopf .message-hub-hero-tabs .highlight > * { flex: 1 1 auto; display: flex; } .pba-compact-page.pba-reiterkopf .message-hub-hero-tabs .highlight .btn { flex: 1 1 auto; padding: .3rem .75rem !important; } }