# Bauplan: Apotheke vor Ort: offen, Notdienst, vorbestellt

Rezept `apotheke-vor-ort` · Öffentliche Apotheke / Apotheke mit Filialen / Apotheke mit Botendienst (optional mit Versandhandel) · Stimmung: sachlich, nah, verlässlich, ruhig · Stand 02.11.2026

Wer die Seite einer Apotheke öffnet, will meist eins von drei Dingen: Hat sie jetzt offen oder wer hat Notdienst, kann ich mein Medikament vorbestellen, und welche Beratung oder Messung bietet sie an. Deshalb gibt es keinen großen Foto-Hero, sondern eine Statuszeile mit drei Reitern (Heute, Notdienst, Vorbestellen), deren Markierung von Reiter zu Reiter gleitet. Darunter Services mit Dauer und Preis, Botendienst nach Postleitzahl, Team, Filialen. Funnel Display und Funnel Sans in großer Lesegröße, Weiß, Petrol und Warmgrau, Petrol nur für Vorbestellen. Strenge Werberegeln sind Teil des Aufbaus: Pflichttext direkt am Angebot, keine Heilversprechen, keine Rezeptfotos per Formular. Abgrenzung zu praxis-gesundheit-ruhig (Behandlung mit Termin) und d2c-produkt-zuerst (Versandshop).

## Dateien

- `tokens.css` in diesem Ordner: Schriften, Farben, Kurven, Dauern, Button-Grundwerte. Zuerst einbinden, dann nur diese Variablen verwenden.
- Rezept im Detail: https://cecodesign.de/lab/fundus/rezepte.json (id `apotheke-vor-ort`) und https://cecodesign.de/lab/fundus/rezepte/apotheke-vor-ort/
- Leitfaden mit Vorgehen und Checkliste: https://cecodesign.de/lab/fundus/leitfaden.txt
- Starter-Seite (fertiges Beispiel nach diesem Rezept): https://cecodesign.de/lab/fundus/starter/apotheke-vor-ort/index.html

## Schrift

- Headline: `funnel-display` · Text: `funnel-sans`
- Größen: h1 Funnel Display clamp(2rem, 1.3rem + 3vw, 3.5rem), wght 600, Laufweite -0.02em, Zeilenhöhe 1.05; h2 clamp(1.625rem, 1.2rem + 1.6vw, 2.375rem), wght 600. Fließtext Funnel Sans 1.125rem (18 px), wght 400, Zeilenhöhe 1.6, höchstens 64ch. Statuszeile Funnel Sans 1.125rem wght 600; Zeiten, Preise und Postleitzahlen mit Tabellenziffern; Pflichttext 1rem, nie kleiner als der Angebotstext. Knöpfe Funnel Sans 600, 1.0625rem.
- Techniken: [Fließende Schriftgrößen mit clamp() und Container-Query-Einheiten](https://cecodesign.de/lab/fundus/typo-techniken/fluide-typo-clamp-cqi/demo) `fluide-typo-clamp-cqi`, [Tabellenziffern für Preis- und Datenblöcke](https://cecodesign.de/lab/fundus/typo-techniken/tabellenziffern/demo) `tabellenziffern`, [Lesesatz mit Zeilenlänge 55–70ch und text-wrap balance/pretty](https://cecodesign.de/lab/fundus/typo-techniken/lesesatz-text-wrap/demo) `lesesatz-text-wrap`, [Eine Familie, wenige Gewichte (Hierarchie über Größe)](https://cecodesign.de/lab/fundus/typo-techniken/eine-familie-wenig-gewichte/demo) `eine-familie-wenig-gewichte`

## Farbe

Hell und klinisch ruhig, aber warm: fast weißer Grund, helles Salbei-Petrol als Fläche für Statuszeile und Services, tiefes Petrol für Notdienst-Band und Footer. Petrol mittel nur für Vorbestellen und Termin. Das rote Apotheken-A nur, wenn die Apotheke es als Marke führen darf (Nutzungsregeln vom Kunden prüfen lassen), nie als Deko. Kein Kapsel- und Kreuz-Ornament, keine Grün-Weiß-Verläufe.

- `--farbe-grund` #FAFAF8 (Grund Weiß warm)
- `--farbe-text` #1A2321 (Text (15,4 : 1 auf Grund))
- `--farbe-flaeche` #E0ECE8 (Fläche Salbei: Statuszeile, Services, Vorbestellung (Text 13,3 : 1))
- `--farbe-dunkel` #0F3B3A (Dunkel Petrol: Notdienst-Band, Footer (Weiß darauf 12,3 : 1))
- `--farbe-signal` #0D6A62 (Signal Petrol: Vorbestellen, Termin (Weiß darauf 6,5 : 1; als Fläche auf Grund 6,2 : 1, auf Salbei 5,3 : 1); auf Dunkel stattdessen weißer Knopf mit dunkler Schrift)
- `--farbe-leise` #55615E (Leise: Meta-Angaben, Stand-Daten (6,2 : 1 auf Grund, 5,3 : 1 auf Salbei))
- `--farbe-linie` #D2DAD7 (Linie: Haarlinien in Listen (nur Dekoration))

## Bewegung

- Animationsstil: [Animationsstil „Tech präzise“ (Produkt-UI)](https://cecodesign.de/lab/fundus/animationsstile/token-tech-praezise/demo) `token-tech-praezise`
- Kurve: cubic-bezier(0.2, 0, 0.38, 0.9) (token-tech-praezise); Eintritt cubic-bezier(0, 0, 0.38, 0.9), Austritt cubic-bezier(0.2, 0, 1, 0.9)
- Dauer: 110 (Hover, Farbe), 240 (Markierung der Statusreiter, Akkordeon), 160 (schließen), 400 (Einblendung eines Panels)
- Regel: Nur Zustände bewegen sich: die Markierung gleitet unter den aktiven Reiter, Akkordeon und Panels öffnen. Keine Scroll-Reveals, keine Fotos, die sich bewegen. Notdienst-Hinweise erscheinen ohne Animation. Bei prefers-reduced-motion springt die Markierung. Seit 05.11.2026: ein minimales Intro einmal je Sitzung (Markierung gleitet auf den gültigen Zustand), die Seite bleibt ab 0 ms bedienbar.

## Bewegungs-Partitur (verbindlich, gemeinsame Regeln in rezepte.json → basis.bewegung_basis)

- Hauptkurve: `cubic-bezier(0.2, 0, 0.38, 0.9)` (--ease) für nur Zustände: Markierung unter dem aktiven Reiter, Akkordeon, Panels
- Dauern: klein 110 ms, mittel 240 ms, gross 400 ms, seitenwechsel 480 ms, schliessen 160 ms (als `--dauer-klein` … in tokens.css)

**Laden der Startseite** (Kopf und Haupthandlung stehen ab 0 ms und sind bedienbar):

1. Kopf mit Telefon und Vorbestellen: ab 0 ms, steht
2. H1, Öffnungsstatus, Notdienst-Hinweis: ab 0 ms, stehen (Notdienst ohne Animation, Rezept)
3. Statusreiter (gleitender-indikator): ab 0 ms, Markierung steht auf dem aktuellen Reiter (erster Aufruf je Sitzung: siehe Moment)
4. Moment: Markierung der Statuszeile: ab 120 ms, 480 ms, einmal je Sitzung: gleitet vom ersten Weg auf den gültigen Zustand (geöffnet, Notdienst), --ease; Status und Text stehen ab 0 ms
- Ende nach 600 ms. Wiederholt: alles steht.
- Minimales Intro (05.11.2026, Jury-Lehre): Die Seite ist ab 0 ms bedienbar und steht; nur der Moment (rezept.moment) läuft einmal je Sitzung (sessionStorage), Klick, Taste oder Scroll beenden ihn sofort im Endzustand. Wiederholt steht alles.

**Scrollen** (höchstens drei Reveal-Arten):

- keine Reveals (Keine Scroll-Reveals (Rezept).)
- Fortschritt: keine
- Steht immer: Fließtext, Formulare und Felder, Preise, Tarife, Kosten, Öffnungszeiten, Telefon, Adresse, Tabellen und Datenblätter, Rechtstexte und Pflichtangaben, Kopf und Navigation, Fehlermeldungen, Hinweise, Notdienst, Notdienst und Öffnungszeiten, Vorbestellung, E-Rezept-Hinweise, Preise und Pflichttexte

**Hover** (110 ms ein, 70 ms aus, --ease-ein / --ease-aus; nur mit Zeiger):

- Link: Unterstreichung wird kräftiger, 110 ms
- Knopf: button-zustaende; kontur-button-zeichnen zeichnen
- Karte: karte-ganzflaechig-klickbar raster: Pfeil 4 px
- Bild: kein Zoom

**Signatur** `gleitender-indikator`: Die Markierung gleitet unter den gewählten Statusreiter (Anchor Positioning) in 240 ms mit --ease (Demo-Kurve easeOutCubic auf das Token umgestellt). Auslöser: Klick, Pfeiltasten; Wiederholung: je Wechsel.

**Seitenwechsel** `vt-cross-document-mpa` (Variante typen). Richtung: vor (Menü weiter rechts oder Übersicht → Detail): neue Seite gleitet 24 px von rechts und blendet auf, alte weicht 12 px nach links; zurück gespiegelt; keine Federn. Geteilt: kopf, markierung (Markierung des Menüpunkts gleitet zum neuen Punkt), zeichnung (Zeichnung der Service-Zeile → Kopfbild der Service-Seite). Dauer 480 ms. Kurve: `--ease (weich, ohne Überschwingen)`.

**Budget:** Eine Signatur-Bewegung je Ansicht. Höchstens drei Reveal-Arten je Seite, nur in benannten Sektionen. Höchstens eine Fortschrittsanzeige je Seite. Kein Parallax auf Text. Parallax auf Bildern höchstens 10 % Weg. Keine Bewegung über 5 s ohne Pause-Knopf, nichts in Schleife ohne Eingabe. Höchstens zwei Dinge bewegen sich zugleich im Blickfeld (die Zeilen einer Überschrift zählen als eins). Rückmeldung auf Eingaben nie über 500 ms. Überschwingen nur auf kleinen Elementen (B6). Großflächige Hell-Dunkel-Wechsel höchstens dreimal pro Sekunde (WCAG 2.3.1). Nur Zustände bewegen sich (Rezept).

**Reduzierte Bewegung:** Markierung springt (Rezept), Panels ohne Weg, Seitenwechsel als Überblendung. Sonst gilt: nur Überblenden bis 150 ms.

**Zu viel für diese Branche:** Kreuz- oder Kapsel-Animationen; Puls am Notdienst; Countdown und künstliche Verknappung (Rezept); Hovercards (Rezept).

Herkunft: Kein Starter. Werte aus bewegung.dauer_ms und token-tech-praezise; Signatur nach gleitender-indikator (250 ms, hier 240 = --dauer-l). Rest eigene Festlegung.

## Raum, Raster, Form (als Variablen in tokens.css)

- Basis in px: 8
- Abstands-Skala in px (--raum-1 …): 4, 8, 12, 16, 24, 32, 40, 56, 80, 112
- Sektionsabstand: clamp(56px, 7vw, 112px)
- Dichte: mittel
- Hinweis: Großzügig lesbar: Statuszeile mit 24 px Innenabstand, Services als Liste mit 16 px zwischen den Punkten.
- Spalten: 12
- Seitenrand: clamp(16px, 4vw, 48px)
- Spaltenabstand: clamp(16px, 2vw, 28px)
- Maximale Breite: 1200px
- Raster: Statuszeile über 8 Spalten, Kontakt daneben über 4. Services als zweispaltige Liste, mobil eine Spalte.
- Radius klein: 6px
- Radius groß: 12px
- Pillenform für Buttons: False
- Linie: 1px #D2DAD7 in Listen; Felder 1px in Leise (3:1)
- Schatten: keiner
- Form: Freundlich gerundet, ohne Pillen. Flächen über Salbei getrennt, nicht über Schatten.

## Bildsprache

- Licht: Helles Tageslicht in der Offizin, neutral.
- Ausschnitt: Team in der Halbtotale, Beratung am HV-Tisch ohne erkennbare Kundschaft, Außenansicht.
- Personen: Ja: eigenes Team mit Einwilligung; Kundschaft nie erkennbar.
- Formate: 3:2, 1:1
- Nicht: Keine Kapsel- und Tablettenbilder als Deko, keine Produktpackungen als Stimmungsbild, keine Stockfotos mit Kitteln.
- Gewicht: Wenige Bilder, groß: lieber ein Bild randlos oder über 7 bis 12 Spalten als drei mittelgroße; jedes Bild trägt eine Aussage, keins füllt nur Platz. Zeichnungen kräftig und groß als eigene Bildwelt: Strich ab 2,5 px, Flächen in den Rezeptfarben, mindestens 160 px, nie als dünne Strich-Icons.

## Ton der Texte (Beispiele nur als Tonprobe, nicht übernehmen)

- Anrede: Sie
- Sätze: Kurz und klar, in Alltagssprache; Fachwort in Klammern.
- Haltung: Sachlich und zugewandt, nie werblich bei Arzneimitteln.
- Tonproben: Heute bis 18:30 Uhr geöffnet., Notdienst heute: [Apotheke], [Straße], bis morgen 8:30 Uhr.
- Nicht: „hilft garantiert“, „ohne Nebenwirkungen“, „Wundermittel“, Superlative bei Arzneimitteln.

## Hero

Kein Foto-Hero. Oben eine Statuszeile auf Salbei mit drei Reitern: „Heute“ (offen bis, nächste Öffnung, Mittagspause), „Notdienst“ (heute und die nächsten Tage aus dem Notdienstplan der Kammer, mit Quelle), „Vorbestellen“ (direkt in die Vorbestellung). Daneben Name, Adresse und Telefon als Text. Ein ruhiges Foto des Teams oder der Offizin darf darunter stehen, nie davor.

- Raster: 12 Spalten: Statuszeile mit drei Reitern über Spalte 1 bis 8, Name, Adresse und Telefon über 9 bis 12; mobil untereinander.
- Bild: Kein Hero-Bild; ein Team- oder Offizin-Foto 3:2 erst unter der Statuszeile.
- Überschrift: Name der Apotheke und Ort, clamp(2rem, 1.3rem + 3vw, 3.5rem), Funnel Display 600, über der Statuszeile, kein Label darüber.
- Handlung: „Vorbestellen“ (Petrol gefüllt) im dritten Reiter und mobil in der unteren Leiste; „Anrufen“ als tel:-Link.
- Zusatz: Notdienst-Reiter mit Quelle und Stand; bei Lebensgefahr 112 als Zeile im Footer.

- Hero: Foto-Hero ohne eigenes Muster

## Sektionen in dieser Reihenfolge

1. **Heute geöffnet und Notdienst (Statuszeile mit Reitern; Notdienst aus dem Plan der Kammer mit Stand und Quelle; Hinweis auf die Notdienstgebühr; außerhalb der eigenen Zeiten Link zur Notdienstsuche der Kammer und 116 117 bzw. 112)**: [Gleitender Indikator / Segment-Schalter mit Pille](https://cecodesign.de/lab/fundus/navigation/gleitender-indikator/demo) `gleitender-indikator`, [Öffnungszeiten mit Live-Status](https://cecodesign.de/lab/fundus/sektionen/oeffnungszeiten-status/demo?v=hinweisleiste) `oeffnungszeiten-status` · Variante „Hinweisleiste über dem Kopf“, [Notdienst mit Plan und Verweis](https://cecodesign.de/lab/fundus/sektionen/notdienst-plan/demo?v=apotheke) `notdienst-plan` · Variante „Apotheke mit Kammerplan“
2. **Vorbestellen und Botendienst (E-Rezept: Karte in der Apotheke stecken oder App der Kasse; rezeptfreie Mittel mit Menge; Postleitzahl für den Botendienst zuerst; Abholung ab Uhrzeit; Bestätigung ohne Medikamentennamen; keine Rezeptfotos über das Formular)**: [Vorbestellung mit Abholtag und Zeitfenster](https://cecodesign.de/lab/fundus/sektionen/vorbestellung-abholung/demo?v=backstube) `vorbestellung-abholung` · Variante „Backstube“, [Fehlerzusammenfassung im Formular](https://cecodesign.de/lab/fundus/zugang/formular-fehlerzusammenfassung/demo?v=kompakt) `formular-fehlerzusammenfassung` · Variante „Kompakt über dem Knopf“, [Eingabehilfen und Autofill](https://cecodesign.de/lab/fundus/zugang/formular-eingabehilfen-autofill/demo?v=abholung) `formular-eingabehilfen-autofill` · Variante „Adresse mit zweiter Rechnungsadresse“
3. **Beratung und Services (Blutdruck und Blutzucker messen, Impfungen, Medikationsanalyse, Kompressionsstrümpfe anmessen, Verleih von Milchpumpe und Inhaliergerät; je Service Dauer, Preis oder Kassenleistung, Termin; je wichtiger Service eine Unterseite, Antwort zuerst)**: [Akkordeon mit Höhenanimation auf auto](https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/demo?v=leistungen) `akkordeon-hoehe-auto` · Variante „Leistungsliste mit Bild“, [Termin-Buchung per 2-Klick-Einbettung](https://cecodesign.de/lab/fundus/hero-layouts/termin-buchung-zwei-klick/demo?v=vorauswahl) `termin-buchung-zwei-klick` · Variante „Vorauswahl vor dem Laden“, [Leistungsseite: Antwort zuerst](https://cecodesign.de/lab/fundus/sektionen/leistungsseite-antwort-zuerst/demo?v=praxis) `leistungsseite-antwort-zuerst` · Variante „Praxis“, [Zeichnungsfamilie für Produkte, Läden und Leistungen](https://cecodesign.de/lab/fundus/glas-material/zeichnungsfamilie-produkte/demo?v=laden) `zeichnungsfamilie-produkte` · Variante „Filialfassaden“, [Anker-Landung markieren](https://cecodesign.de/lab/fundus/mikroanimationen/anker-landung-markieren/demo?v=inhalt) `anker-landung-markieren` · Variante „Inhaltsverzeichnis“, [Seite in Einfacher und Leichter Sprache](https://cecodesign.de/lab/fundus/zugang/einfache-sprache-seite/demo?v=pflege) `einfache-sprache-seite` · Variante „Pflegedienst: drei Stufen“
4. **Angebote des Monats (nur rezeptfreie Produkte; Pflichttext direkt am Arzneimittel-Angebot; Preis inkl. MwSt. und Grundpreis; Streichpreise nur mit dem niedrigsten Preis der letzten 30 Tage)**: [Raster am Desktop, Wischreihe am Telefon](https://cecodesign.de/lab/fundus/galerien-slider/raster-zu-wischreihe/demo?v=zweireihig) `raster-zu-wischreihe` · Variante „Zweireihig“
5. **Team (Apothekenleitung mit Approbation, Apotheker:innen, PTA, PKA; Schwerpunkte wie Naturheilkunde, Ernährung, Diabetes; Sprachen)**: [Team-/Über-mich-Layout mit Porträt-Interaktion](https://cecodesign.de/lab/fundus/hero-layouts/team-ueber-mich-layout/demo?v=raster) `team-ueber-mich-layout` · Variante „Raster mit Filter“
6. **Häufige Fragen (eigene Seite mit Suche ab etwa acht Fragen: E-Rezept, Vorbestellen, Botendienst, Notdienst, Zuzahlung, Impfungen; Antworten als Text, ohne FAQPage-Trick)**: [FAQ-Seite mit Suche](https://cecodesign.de/lab/fundus/sektionen/faq-seite-suche/demo?v=suche) `faq-seite-suche` · Variante „Mit Suche“, [Akkordeon mit Höhenanimation auf auto](https://cecodesign.de/lab/fundus/mikroanimationen/akkordeon-hoehe-auto/demo?v=faq) `akkordeon-hoehe-auto` · Variante „FAQ mit Suche und Sprunglinks“, [Anker-Landung markieren](https://cecodesign.de/lab/fundus/mikroanimationen/anker-landung-markieren/demo?v=faq) `anker-landung-markieren` · Variante „FAQ-Direktlink“, [Text-Hervorhebung mit ::highlight()](https://cecodesign.de/lab/fundus/typo-techniken/text-hervorhebung-highlight/demo?v=suche) `text-hervorhebung-highlight` · Variante „Suchtreffer“
7. **Gesundheit im Jahr (kurze Beiträge zu Saisonthemen wie Reiseapotheke, Pollen, Impfsaison; mit Stand-Datum und Quelle; ohne Produktwerbung mit Heilversprechen)**: [Editorial-/Magazin-Layout](https://cecodesign.de/lab/fundus/hero-layouts/editorial-magazin-layout/demo?v=zeitung) `editorial-magazin-layout` · Variante „Zeitung mit Spalten“, [News-Übersicht mit Kategorien und Jahr-Archiv](https://cecodesign.de/lab/fundus/sektionen/news-uebersicht-archiv/demo?v=mehr) `news-uebersicht-archiv` · Variante „Weitere laden“
8. **Artikel-Detailseite (je Beitrag eine Seite: Saisonthema wie Reiseapotheke oder Pollen, Antwort zuerst, Quelle und Stand, ohne Heilversprechen und ohne Produktwerbung; mit Datum, Autorin oder Autor und Stand)**: [Artikelseite mit Autorin, Stand und Strukturdaten](https://cecodesign.de/lab/fundus/sektionen/artikel-seite/demo?v=ratgeber) `artikel-seite` · Variante „Ratgeber“
9. **Filialen (Haupt- und Filialapotheken, je mit Status, Leitung, Adresse, Parken; Liste ab zwei Häusern; Karte per 2-Klick)**: [Standortfinder als Liste](https://cecodesign.de/lab/fundus/sektionen/standortfinder-liste/demo?v=kompakt) `standortfinder-liste` · Variante „Nur Liste“, [Karte per 2-Klick (Anfahrt ohne vorab geladene Karte)](https://cecodesign.de/lab/fundus/hero-layouts/karte-zwei-klick/demo?v=standorte) `karte-zwei-klick` · Variante „Mehrere Standorte“, [Firmendaten aus einer Quelle](https://cecodesign.de/lab/fundus/zugang/firmendaten-strukturiert/demo?v=zahnarzt) `firmendaten-strukturiert` · Variante „Zahnarztpraxis (Dentist)“, [Standort-Detailseite](https://cecodesign.de/lab/fundus/sektionen/standort-detailseite/demo?v=filiale) `standort-detailseite` · Variante „Filiale“, [Zeichnungsfamilie für Produkte, Läden und Leistungen](https://cecodesign.de/lab/fundus/glas-material/zeichnungsfamilie-produkte/demo?v=laden) `zeichnungsfamilie-produkte` · Variante „Filialfassaden“
10. **Ausbildung und Stellen (PTA, PKA, Apotheker:in; Tarif oder Spanne, Notdienste und Samstage ehrlich)**: [Stellenliste mit Kurzbewerbung](https://cecodesign.de/lab/fundus/sektionen/stellen-karriere/demo?v=wenige) `stellen-karriere` · Variante „Wenige Stellen“
11. **Erklärung zur Barrierefreiheit (eigene Seite; bei Online-Vorbestellung oder Versandhandel nach BFSG prüfen lassen)**: [Seite „Barrierefreiheit“ als Vorlage](https://cecodesign.de/lab/fundus/zugang/barrierefreiheit-seite/demo?v=bfsg) `barrierefreiheit-seite` · Variante „Informationen nach BFSG“

## Signatur (Pflicht)

- [Gleitender Indikator / Segment-Schalter mit Pille](https://cecodesign.de/lab/fundus/navigation/gleitender-indikator/demo) `gleitender-indikator`

## Moment (Pflicht: woran man sich erinnert)

- Was: Der Status als größtes Element des ersten Bildschirms: „Jetzt geöffnet.“ oder „Notdienst heute: …“ in H1-Größe, darunter die drei Wege Heute, Notdienst, Vorbestellen; die Markierung gleitet einmal je Sitzung auf den gültigen Zustand. Ruhig, groß, nie unsichtbar.
- Wo: Startseite, erster Bildschirm
- Gewicht: groß und interaktiv: Status in H1-Größe über 8 Spalten, Wege als große Flächen, Markierung 480 ms
- Muster: [Gleitender Indikator / Segment-Schalter mit Pille](https://cecodesign.de/lab/fundus/navigation/gleitender-indikator/demo?v=basis) `gleitender-indikator` · Variante „Eine Seite: Pille, Unterstrich, Segment“
- Bei ruhigen Rezepten heißt ruhig langsam und groß, nicht unsichtbar. Läuft der Moment von selbst, dann einmal je Sitzung; die Seite ist ab 0 ms bedienbar.

## Buttons

- Haupthandlung: [Button-Zustandsfolge (Idle → Hover → Press → Loading → Erfolg)](https://cecodesign.de/lab/fundus/mikroanimationen/button-zustaende/demo) `button-zustaende`
- Nebenhandlung: [Kontur-Button, der sich zeichnet](https://cecodesign.de/lab/fundus/buttons/kontur-button-zeichnen/demo?v=zeichnen) `kontur-button-zeichnen` · Variante „Linie zeichnet sich“

## Weitere Bausteine

- Navigation: [Native Dropdowns mit Popover-API, Anchor Positioning und Invokern](https://cecodesign.de/lab/fundus/navigation/native-popover-dropdowns/demo) `native-popover-dropdowns`, [Mobile Bottom-Navigation und Bottom-Sheet-Menü](https://cecodesign.de/lab/fundus/navigation/mobile-bottom-navigation/demo?v=kontakt) `mobile-bottom-navigation` · Variante „Kontaktleiste (Elektrobetrieb)“, [Gleitender Indikator / Segment-Schalter mit Pille](https://cecodesign.de/lab/fundus/navigation/gleitender-indikator/demo) `gleitender-indikator`, [Anruf-Knopf mit Erreichbarkeit](https://cecodesign.de/lab/fundus/buttons/erreichbarkeits-button/demo?v=kopf) `erreichbarkeits-button` · Variante „Status in der Kopfzeile“, [Brotkrumen-Pfad mit Strukturdaten](https://cecodesign.de/lab/fundus/navigation/brotkrumen-pfad/demo?v=voll) `brotkrumen-pfad` · Variante „Voll“
- Hover: [Ganze Karte klickbar](https://cecodesign.de/lab/fundus/hover/karte-ganzflaechig-klickbar/demo?v=raster) `karte-ganzflaechig-klickbar` · Variante „Raster: Überzug-Karte“
- Mikroanimation: [Druck-Feedback (Press/Tap)](https://cecodesign.de/lab/fundus/mikroanimationen/druck-feedback/demo) `druck-feedback`, [Animierte Checkbox und Radio](https://cecodesign.de/lab/fundus/mikroanimationen/checkbox-radio-animiert/demo) `checkbox-radio-animiert`
- Footer: [Studio-Visitenkarte im Footer (Standorte, Kontakt-Tabs, Ortszeit)](https://cecodesign.de/lab/fundus/footer/studio-visitenkarte-footer/demo?v=praxis) `studio-visitenkarte-footer` · Variante „Praxis mit Sprechzeiten und Anfahrt“

## Grundausstattung (jede Seite)

- [Native Seitenübergänge zwischen echten Seiten (Cross-document View Transitions)](https://cecodesign.de/lab/fundus/seitenuebergaenge/vt-cross-document-mpa/demo) `vt-cross-document-mpa`
- [Native CSS-Scroll-Reveals mit view()](https://cecodesign.de/lab/fundus/scroll/css-view-reveal-nativ/demo) `css-view-reveal-nativ`
- [Unterstreichungs-Varianten](https://cecodesign.de/lab/fundus/hover/unterstreichung-varianten/demo) `unterstreichung-varianten`
- [Button-Zustandsfolge (Idle → Hover → Press → Loading → Erfolg)](https://cecodesign.de/lab/fundus/mikroanimationen/button-zustaende/demo) `button-zustaende`
- [Validierung erst nach Interaktion](https://cecodesign.de/lab/fundus/mikroanimationen/validierung-nach-interaktion/demo) `validierung-nach-interaktion`
- [Gestaltetes Cookie-/Consent-Banner (DSGVO-konform)](https://cecodesign.de/lab/fundus/navigation/consent-banner-gestaltet/demo) `consent-banner-gestaltet`
- [Fokus-Stil als Gestaltungssystem](https://cecodesign.de/lab/fundus/zugang/fokus-stil-system/demo) `fokus-stil-system`
- [Sprunglinks und Landmarken](https://cecodesign.de/lab/fundus/zugang/sprunglinks-landmarken/demo) `sprunglinks-landmarken`
- [Schalter „Bewegung reduzieren“ mit Pause-Knöpfen](https://cecodesign.de/lab/fundus/zugang/bewegung-pausieren-schalter/demo) `bewegung-pausieren-schalter`
- [Fehlerseite und Leerzustände](https://cecodesign.de/lab/fundus/sektionen/fehlerseite-leerzustand/demo) `fehlerseite-leerzustand`
- [Natives Modal mit <dialog>](https://cecodesign.de/lab/fundus/zugang/dialog-modal-nativ/demo) `dialog-modal-nativ`
- [Zoom- und textabstandfestes Layout](https://cecodesign.de/lab/fundus/zugang/zoom-und-textabstand-robust/demo) `zoom-und-textabstand-robust`
- [Kontrastmodus und contrast-color()](https://cecodesign.de/lab/fundus/zugang/kontrastmodus-forced-colors/demo) `kontrastmodus-forced-colors`
- [Firmendaten aus einer Quelle](https://cecodesign.de/lab/fundus/zugang/firmendaten-strukturiert/demo?v=zahnarzt) `firmendaten-strukturiert` · Variante „Zahnarztpraxis (Dentist)“
- [Sofortige Seitenwechsel durch Vorladen](https://cecodesign.de/lab/fundus/zugang/sofort-navigation-vorladen/demo) `sofort-navigation-vorladen`
- [Danke-Seite: was jetzt passiert](https://cecodesign.de/lab/fundus/sektionen/danke-seite-naechste-schritte/demo) `danke-seite-naechste-schritte`
- [Rechtstexte lesbar setzen](https://cecodesign.de/lab/fundus/sektionen/rechtstext-layout/demo) `rechtstext-layout`
- [Favicon-Satz und Teilbild je Seite](https://cecodesign.de/lab/fundus/zugang/favicon-teilbild-system/demo?v=satz) `favicon-teilbild-system` · Variante „Favicon-Satz“
- [Druckansicht als System](https://cecodesign.de/lab/fundus/zugang/druckansicht-print/demo?v=rechtstext) `druckansicht-print` · Variante „Rechtstext“

## Nicht verwenden

- hovercard-interest-invoker – Signatur von praxis-gesundheit-ruhig; Fachbegriffe stehen per details aufklappbar
- datei-upload-ablage – Rezeptfotos und Befunde gehören nicht in ein Website-Formular (Gesundheitsdaten)
- ki-streaming-text-denkindikator / command-palette-und-ki-suche – keine KI-Beratung zu Arzneimitteln ohne Fachperson
- konfetti-erfolg – nach der Vorbestellung eine ruhige Bestätigung mit Abholzeit
- zahlen-odometer – Kennzahlen werden nicht hochgezählt
- marquee-laufband – Angebote als Laufband sind nicht lesbar und verdrängen den Pflichttext
- smooth-scroll-lenis – verzögert Fokus und Formular
- foto-hero – ein großes Bild verdrängt Status und Notdienst aus dem ersten Bildschirm
- Countdown, „nur heute“ und künstliche Verknappung – unzulässiger Druck
- Kapseln, Kreuz-Ornamente und Stockfotos lächelnder Apotheker:innen mit Tablettenschachteln – Klischee

## Regeln

- Erster Bildschirm: Statuszeile mit drei Reitern (Heute, Notdienst, Vorbestellen), Name, Adresse und Telefon als Text. Kein großes Foto davor.
- Signatur (gleitender-indikator): Die Markierung gleitet unter den aktiven Reiter der Statuszeile und in der Reiterleiste der Services; höchstens vier Reiter, Tastatur mit Pfeiltasten, Inhalt bleibt ohne Animation lesbar.
- Notdienst: Termine aus dem Notdienstplan der Landesapothekerkammer mit Stand-Datum und Link zur Quelle; nie geschätzt. Notdienstgebühr nach Arzneimittelpreisverordnung vorab nennen (Betrag vom Kunden prüfen lassen). Bei Lebensgefahr 112 im Footer.
- Vorbestellung nur mit dem nötigsten: Name, Telefon oder E-Mail, Abholfiliale, rezeptfreie Artikel mit Menge; E-Rezepte über die elektronische Gesundheitskarte oder die App der Kasse, nicht über das Formular. Keine Pflichtfelder zu Diagnosen; Daten verschlüsselt übertragen, Speicherfrist im Datenschutz. Vom Kunden prüfen lassen.
- Heilmittelwerbegesetz: Bei Werbung für Arzneimittel steht der Pflichttext nach § 4 HWG direkt am Angebot und gut lesbar; keine Werbung für verschreibungspflichtige Arzneimittel gegenüber Verbraucher:innen (§ 10 HWG); keine Heilversprechen, keine Vorher-nachher-Bilder, keine Patientenstimmen über Wirkungen. Vom Kunden prüfen lassen.
- Preise: rezeptfreie Produkte inkl. MwSt. mit Grundpreis; Streichpreise nur mit dem niedrigsten Preis der letzten 30 Tage (§ 11 PAngV); keine Rabatte oder Boni auf verschreibungspflichtige Arzneimittel.
- Impressum mit Apothekenleitung, Approbation und Berufsbezeichnung, zuständiger Apothekerkammer und Aufsichtsbehörde sowie Link zur Berufsordnung. Vom Kunden prüfen lassen.
- Typografie: Text mindestens 18 px, Statuszeile in Funnel Sans 600, Zeiten mit Tabellenziffern; zwei Gewichte je Familie.
- Knöpfe: Petrol gefüllt mit allen Zuständen (button-zustaende) für Vorbestellen und Termin, Nebenwege als Kontur (kontur-button-zeichnen, Variante zeichnen). Trefferfläche 44 px, mobil eine untere Leiste Anrufen / Notdienst / Vorbestellen.
- Filialen und Dienste (Blutdruck messen, Impfen, Botendienst) als Zeichnungen aus einer Familie (zeichnungsfamilie-produkte, Variante laden), ohne Hover-Versatz, nur der Fokusring ändert sich; keine Packungen, keine Herstellerlogos, keine Nachbildung von Siegeln oder Marken (auch nicht des Apotheken-A, vom Kunden prüfen lassen).

## Rezept-Varianten

- **Apotheke mit Versandhandel**: Versand nur mit Erlaubnis zum Versandhandel; das EU-Sicherheitslogo für den Online-Verkauf von Arzneimitteln steht auf jeder Seite des Shops und verlinkt auf den Registereintrag beim BfArM. Pflichtangaben wie Shop (Leitfaden 8a), Widerruf mit den gesetzlichen Ausnahmen, Gewährleistungshinweis für Non-Food. Vom Kunden prüfen lassen.

## Vor der Abgabe

Checkliste in https://cecodesign.de/lab/fundus/leitfaden.txt, Abschnitt 12. Rechtliches immer „vom Kunden prüfen lassen“.