/* ========================================================================== Augenpartner Design-Kit — 2 von 3: Bausteine, Version 1.1 Vier gemeinsame Bausteine fuer alle Auftritte: 1 Knopf (.btn) — plus .btn--notfall 2 Aktionsleiste — mit Drei-Knopf-Variante, safe-area unten und dem :has-Gate fuer den Fussabstand (Seiten ohne Leiste bekommen keinen) 3 Status-Pille (.status) 4 Signet-Fenster (.fenster)— auf kleinen Schirmen, Umbruchpunkt je Auftritt Setzt tokens.css voraus. Liegt als Kopie in jeder Site; eine Aenderung hier gilt fuer alle fuenf Auftritte. ========================================================================== */ /* 1 — Knopf --------------------------------------------------------------- Bewusst 999px statt --radius: die Pillenform ist das Erkennungsmerkmal der Bedienelemente, der 12px-Radius gilt fuer Flaechen (Karten, Boxen). */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s2); min-height: 48px; /* Touch-Ziel */ padding: var(--s3) var(--s5); border: 1px solid transparent; border-radius: 999px; font: inherit; font-size: 1rem; font-weight: 600; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: background var(--tempo), color var(--tempo), border-color var(--tempo), box-shadow var(--tempo), transform var(--tempo); } .btn svg { width: 20px; height: 20px; flex: none; } .btn:active { transform: translateY(1px); } .btn--primaer { background: var(--tief); color: var(--weiss); box-shadow: 0 10px 22px -14px rgba(0, 75, 145, .9); } .btn--primaer:hover { background: var(--tief-dunkel); color: var(--weiss); box-shadow: 0 14px 26px -14px rgba(0, 75, 145, .95); } .btn--sekundaer { background: var(--weiss); color: var(--tief); border-color: var(--linie-stark); } .btn--sekundaer:hover { border-color: var(--himmel); background: var(--himmel-hell); color: var(--tief); } /* Auf dunklem Grund (Hero-Bild, Infoleiste). */ .btn--hell { background: rgba(255, 255, 255, .14); color: var(--weiss); border-color: rgba(255, 255, 255, .5); } .btn--hell:hover { background: var(--weiss); color: var(--tief); } /* Notfall — nur dort einsetzen, wo es wirklich um den Notfallweg geht. Der Rahmen traegt das volle Warnrot: die zarte Flaeche allein hebt sich auf weissem Grund kaum ab (1,1:1), der Rahmen macht den Knopf sichtbar. */ .btn--notfall { background: var(--warn-hell); color: var(--warn); border-color: var(--warn); } .btn--notfall:hover { background: var(--warn); color: var(--weiss); border-color: var(--warn); } .btn--klein { min-height: 44px; padding: var(--s2) var(--s4); font-size: .9375rem; } .btn--block { width: 100%; } /* 2 — Aktionsleiste ------------------------------------------------------- Feste Leiste am unteren Rand: Telefon und Termin sind auf dem Handy jederzeit erreichbar, ohne dass der Kopfbereich Platz frisst. */ .aktionsleiste { position: fixed; inset: auto 0 0 0; z-index: 60; display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); padding: var(--s2) var(--s3); padding-bottom: calc(var(--s2) + env(safe-area-inset-bottom, 0px)); background: rgba(255, 255, 255, .97); backdrop-filter: saturate(180%) blur(10px); border-top: 1px solid var(--linie); box-shadow: 0 -8px 24px -16px rgba(12, 30, 33, .55); transition: transform .25s ease; } /* Portal mobil: Praxen · Termin buchen · Notfall */ .aktionsleiste--drei { grid-template-columns: repeat(3, 1fr); } .aktionsleiste .btn { padding-inline: var(--s3); font-size: .9375rem; } .aktionsleiste .btn svg { width: 18px; height: 18px; } /* Auf der Startseite erscheint die Leiste erst, wenn die Hero-Knoepfe aus dem Bild gescrollt sind — sonst stuende Termin/Telefon doppelt auf dem Schirm. Ohne JavaScript bleibt sie einfach immer sichtbar. */ .aktionsleiste--verborgen { transform: translateY(110%); } /* Platz fuer die Leiste, damit sie den Fusszeilentext nicht verdeckt. 96px statt 76px, weil der Terminknopf in laengeren Sprachen (ES, FR, IT, PT) zweizeilig umbricht und die Leiste dann hoeher ist. */ body:has(.aktionsleiste) { padding-bottom: 96px; } /* Gleicher Umbruchpunkt wie das Klappmenue: solange die Navigation eingeklappt ist, ist die Leiste der schnelle Weg zu Telefon und Termin. */ @media (min-width: 1180px) { .aktionsleiste { display: none; } body:has(.aktionsleiste) { padding-bottom: 0; } } /* 3 — Status-Pille -------------------------------------------------------- «Jetzt geoeffnet» / «Geschlossen». Farbe ist NIE die einzige Aussage: der Text sagt es, der Punkt bestaetigt es nur. Kontrast (nachgerechnet): Text #12603f auf #e6f6ef = 6,8:1, #b3261e auf #fdeceb = 5,7:1, #4a5a5e auf #f4f8fb = 6,8:1 — alle AA. Der Punkt liegt mit #1a7a52 bei 4,8:1 — deutlich ueber der 3,0-Grenze fuer Grafik. Der duenne Rahmen ist reine Zier und traegt keine Aussage. */ .status { display: inline-flex; align-items: center; gap: var(--s2); padding: 6px var(--s3) 6px var(--s2); border-radius: 999px; border: 1px solid transparent; font-size: .875rem; font-weight: 600; line-height: 1.3; white-space: nowrap; } .status__punkt { flex: none; width: 9px; height: 9px; border-radius: 50%; background: currentColor; } .status--offen { background: var(--gruen-hell); border-color: #bfe6d3; color: var(--gruen-text); } .status--offen .status__punkt { background: var(--gruen-punkt); } .status--zu { background: var(--warn-hell); border-color: #f3c8c5; color: var(--warn); } .status--neutral { background: var(--flaeche); border-color: var(--linie); color: var(--text-leise); } /* Auf dunklem Grund (Infoleiste, Hero-Bild). */ .status--auf-dunkel { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .45); color: var(--weiss); } .status--auf-dunkel .status__punkt { background: #7fe3b6; } /* 4 — Signet-Fenster ------------------------------------------------------ Das Foto sitzt im offenen C des Signets — auf kleinen Schirmen, auf allen Auftritten. Ab der Buehne steht wieder das echte Bild im Hero. Markup liefert praxis_signet_fenster() in signet/signet.php: erst das maskierte Foto, darueber der Ring aus praxis_signet() — so wird die Form nirgends ein zweites Mal gezeichnet. Umbruchpunkt je Auftritt: - Vier Praxis-Auftritte: das Fenster gehoert aufs Handy. Auf dem Tablet hochkant (768-960px) stuende das Auge sonst allein auf hellem Grund, waehrend das grosse Buehnenbild wegfiele — dort zeigen sie das Foto. Diese Seiten setzen und wechseln bei 48rem. - Portal: 60rem, setzt die Klasse nicht. Ohne die Klasse gilt also der Umbruchpunkt 60rem. */ /* Masse und Aufbau stehen ausserhalb der Umbruchpunkte; sichtbar wird das Fenster erst durch das `display: block` in den Bloecken darunter. */ .fenster { display: none; position: relative; width: 214px; height: 214px; margin: var(--s2) auto var(--s5); } .fenster__foto, .fenster__ring { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } /* Der Ring ist das Signet selbst und traegt das Marken-Blau, nicht das helle Logo-Blau. */ .fenster__ring { color: var(--tief); } /* Der Grund der Buehne, wenn das Fenster steht — einmal notiert, in beiden Bloecken unten verwendet. */ .hero--fenster { --fenster-grund: radial-gradient(60% 40% at 88% 0%, rgba(35, 130, 195, .20), transparent 70%), linear-gradient(180deg, var(--flaeche) 0%, var(--weiss) 100%); } /* Handy — auf allen fuenf Auftritten. */ @media (max-width: 47.999rem) { .hero--fenster { background: var(--fenster-grund); } /* Das Hintergrundbild des Hero weicht dem Fenster, samt seinem Schleier. */ .hero--fenster .hero__bild { display: none; } .hero--fenster::after { display: none; } .fenster { display: block; } } /* Tablet hochkant — nur dort, wo die Klasse NICHT gesetzt ist (Portal). :where() haelt die Gewichtung genau so, wie sie vorher war: die Regeln zaehlen wie die Klassenregeln daneben, keine ueberholt die Site-Stile. */ @media (min-width: 48rem) and (max-width: 60rem) { :where(html:not(.fenster-nur-handy)) .hero--fenster { background: var(--fenster-grund); } :where(html:not(.fenster-nur-handy)) .hero--fenster .hero__bild { display: none; } :where(html:not(.fenster-nur-handy)) .hero--fenster::after { display: none; } :where(html:not(.fenster-nur-handy)) .fenster { display: block; } }