/* =====================================================================
   Komponenten — die wiederkehrenden Bausteine
   Apotheke am Bürgerhaus
   =====================================================================

   Jeder Baustein hier hat ein Snippet in site/snippets/. Wer einen
   zweiten Ort braucht, an dem dasselbe aussieht, benutzt das Snippet
   und kopiert nicht das Markup.

   Klickflächen sind überall mindestens 48px hoch. Wo ein Link im
   Fließtext steht, wird die Fläche über Innenabstand plus negativen
   Außenabstand hergestellt, damit der Zeilenfall gleich bleibt.

   ===================================================================== */


/* ---------------------------------------------------------------------
   Kopf
   ---------------------------------------------------------------------
   Nicht sticky. Eine festgeklebte Leiste frisst auf einem kleinen
   Telefon bei 200 % Zoom den halben Bildschirm.
   --------------------------------------------------------------------- */

.kopf {
  padding: 1.1rem var(--rand) 0;
  border-bottom: 3px solid var(--tinte);
  background: var(--papier);
}

.marke {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  color: var(--tinte);
  text-decoration: none;
}

.marke:hover {
  color: var(--tinte);
}

.marke:hover .marke__name {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

/* Das Zeichen der Apotheke: der Mörser aus dem Corporate Design, negativ
   im petrolfarbenen Feld. Bis Ticket 14 standen hier die
   Anfangsbuchstaben.

   Petrol ist dieselbe Farbe wie die Anschlagtafel auf der Startseite —
   dadurch gehören Kopf und Tafel sichtbar zusammen, ohne dass eine neue
   Farbe nötig wäre.

   Papier auf Petrol erreicht 9,0 : 1. Für eine Zeichnung wären 3 : 1
   gefordert; die Fläche ist also mit Abstand deutlich genug. */
.marke__zeichen {
  flex: none;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  background: var(--petrol);
  color: var(--papier);
}

/* Die Zeichnung selbst bleibt unverändert; sie nimmt über currentColor
   die Farbe des Feldes an. Der Rand ist knapper als beim Favicon, weil
   hier 56px zur Verfügung stehen und nicht 16. */
.marke__moerser {
  width: 62%;
  height: 62%;
}

.marke__logo {
  flex: none;
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.marke__name {
  display: block;
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.1;
}

.marke__ort {
  display: block;
  margin-top: 0.2rem;
  color: var(--petrol);
  font-size: 1rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Anrufen ist bei einer Apotheke eine Hauptaktion. Die Nummer steht
   deshalb im Kopf und nicht im Menü — auch auf dem Telefon.
   Rahmen in Petrol statt in der Haarlinienfarbe: als Bedienelement
   braucht die Umrandung 3 : 1, die Haarlinie schafft nur 1,5 : 1. */
.kopf__tel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 52px;
  margin: 1rem 0 0.25rem;
  padding: 0 1rem;
  border: 2px solid var(--petrol);
  color: var(--tinte);
  font-weight: 700;
  text-decoration: none;
}

.kopf__tel:hover {
  background: var(--petrol);
  color: var(--papier);
}

.kopf__tel span {
  font-family: var(--display);
}


/* ---------------------------------------------------------------------
   Navigation
   ---------------------------------------------------------------------
   Eine umbrechende Reihe von Links. Kein Klappmenü, kein JavaScript,
   kein Zustand, der kaputtgehen kann. Auf 360px stehen die Punkte in
   zwei Zeilen — das ist kein Notbehelf, sondern die Absicht: alles ist
   sofort sichtbar, ohne dass jemand erst ein Symbol deuten muss.
   --------------------------------------------------------------------- */

.nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav a {
  display: inline-flex;
  align-items: center;
  min-height: 50px;
  border-bottom: 3px solid transparent;
  color: var(--tinte);
  font-size: 1.125rem;
  font-weight: 700;
  text-decoration: none;
}

.nav a:hover,
.nav a:focus-visible {
  border-bottom-color: var(--ocker);
}

/* Die Seite, auf der man gerade steht. Die Markierung trägt nicht
   allein die Farbe: aria-current sagt es zusätzlich vor. */
.nav a[aria-current="page"] {
  border-bottom-color: var(--tinte);
}


/* ---------------------------------------------------------------------
   Hinweis-Banner
   ---------------------------------------------------------------------
   Serverseitig ausgewählt, damit er auch ohne JavaScript am richtigen
   Tag sichtbar ist. Kein Alarmrot, kein Blinken, keine Animation:
   ein Aushang, kein Warnschild.
   --------------------------------------------------------------------- */

.banner {
  padding: 1rem var(--rand);
  border-bottom: 3px solid var(--tinte);
  border-left: 10px solid var(--ocker);
  background: var(--grund2);
  color: var(--tinte);
}

.banner p {
  max-width: var(--spalte);
  font-weight: 700;
}

.banner a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ziel);
  font-weight: 700;
}


/* ---------------------------------------------------------------------
   Aktionen
   --------------------------------------------------------------------- */

.aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: 1.5rem;
}

.knopf {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: 0.7rem 1.5rem;
  border: 3px solid var(--petrol);
  border-radius: var(--radius);
  background: var(--petrol);
  color: var(--papier);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.knopf:hover {
  border-color: var(--tinte);
  background: var(--tinte);
  color: var(--papier);
}

/* Der Pfeil nach außen an einem Knopf, der die Website verlässt.
   Er erbt Farbe und Größe vom Text und ist mit aria-hidden
   ausgezeichnet — vorgelesen wird stattdessen der Satzteil in
   .nur-vorlesen. Bis Ticket 18 stand dort sichtbar "öffnet in neuem
   Tab"; eine dritte Zeile in einem Knopf mit schon zwei Zeilen. */
.knopf__extern {
  width: 0.8em;
  height: 0.8em;
  margin-left: 0.15em;
  vertical-align: -0.05em;
}

/* Die Zweitzeile im Knopf nennt, wohin er führt. Ein Knopf, der
   wortlos auf eine fremde Seite springt, überrascht. */
.knopf__klein {
  margin-top: 0.1rem;
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0.03em;
}

/* Eine E-Mail-Adresse ist ein einziges Wort und bricht nicht von selbst.
   Bei 320px lief sie auf der Startseite über den Rand — gemessen 328
   statt 320 Pixel, aufgefallen bei der Geräteprüfung in Ticket 18.
   Die Regel gilt für jede Adresse, damit dieselbe Stelle nicht an einem
   dritten Ort wieder auftaucht. */
a[href^="mailto:"] {
  overflow-wrap: anywhere;
}

.tel-still,
.weiter {
  display: inline-flex;
  align-items: center;
  min-height: var(--ziel);
  font-weight: 700;
}

/* Der Winkel ist Schmuck. Die Bedeutung steht als Text daneben —
   ein Symbol trägt hier nie allein. */
.weiter::after {
  content: "";
  width: 0.5em;
  height: 0.5em;
  margin-left: 0.6em;
  border-right: 3px solid currentColor;
  border-bottom: 3px solid currentColor;
  transform: rotate(-45deg);
}

.hinweis {
  margin-top: 1.25rem;
}


/* ---------------------------------------------------------------------
   Die Anschlagtafel — das Erkennungszeichen
   ---------------------------------------------------------------------
   Ein petrolfarbenes Brett, darin ein Blatt Papier; die Ecken des
   Bretts stoßen durch das Blatt hindurch.

   Sie kommt auf der Startseite genau zweimal vor: "Heute" und "An der
   Tür". Nur dort, wo wirklich etwas aushängt. Ein drittes Mal würde
   aus einem Zeichen ein Muster machen.
   --------------------------------------------------------------------- */

.tafel {
  margin: 1.75rem 0 0;
  padding: 16px;
  background: var(--petrol);
}

.tafel__blatt {
  position: relative;
  padding: 1.5rem 1.25rem 1.1rem;
  background: var(--papier);
}

/* Das Blatt muss sich vom Grund abheben, egal auf welchem Grund die
   Tafel gerade steht. Auf hellem Papiergrund nimmt es deshalb den
   dunkleren der beiden Grundtöne. Kontrast bleibt in beiden Fällen
   über 12 : 1. */
.sektion:not(.grund-alt) .tafel__blatt {
  background: var(--grund2);
}

.tafel__blatt::before,
.tafel__blatt::after {
  content: "";
  position: absolute;
  top: -10px;
  width: 20px;
  height: 20px;
  background: var(--petrol);
  transform: rotate(45deg);
}

.tafel__blatt::before {
  left: -10px;
}

.tafel__blatt::after {
  right: -10px;
}

.tafel__kicker {
  margin: 0 0 0.2rem;
  color: var(--petrol);
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.tafel__titel {
  margin: 0;
  padding-bottom: 0.5rem;
  border-bottom: 3px solid var(--tinte);
  font-size: 1.9rem;
}

.tafel .zeilen {
  margin-top: 0;
  border-top: 0;
}


/* ---------------------------------------------------------------------
   Zeilenwerk — Beschriftung und Angabe
   ---------------------------------------------------------------------
   Eine Definitionsliste, keine Tabelle: es sind Paare, keine Matrix.
   --------------------------------------------------------------------- */

.zeilen {
  margin: 1.75rem 0 0;
  border-top: 1px solid var(--linie);
}

.zeile {
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--linie);
}

.zeile dt {
  color: var(--petrol);
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.zeile dd {
  margin: 0.15rem 0 0;
}

/* 48px Klickfläche, ohne den Zeilenfall zu verschieben. */
.zeile dd a {
  display: inline-block;
  padding: 0.6rem 0;
  margin: -0.6rem 0;
}


/* ---------------------------------------------------------------------
   Eintragslisten
   ---------------------------------------------------------------------
   Die Grundform, in der auf dieser Website Einträge untereinander
   stehen: Leistungen, Stellenanzeigen, Angebote.

   Keine Karten. Der Design-Plan aus Ticket 7 verbietet sie ausdrücklich
   ("keine Karten, keine Schatten, keine Rundungen"), und das ist hier
   keine Geschmacksfrage: eine Karte suggeriert einen Kasten, den man
   anklicken kann, und lenkt die Aufmerksamkeit auf ihren Rand statt auf
   ihren Inhalt. Getrennt wird durch Haarlinien.

   Die Überschrift trägt eine eigene Klasse und keine feste Ebene: auf
   der Startseite steht sie unter einer h2 und ist deshalb eine h3, auf
   einer Übersichtsseite steht sie direkt unter der h1 und ist eine h2.
   Die Gliederung richtet sich nach dem Dokument, nicht nach dem
   Stylesheet.

   Diese Liste hieß bis Ticket 7 ".leistungen" und lag in
   startseite.css. Seit sie drei Seiten trägt, gehört sie hierher.
   --------------------------------------------------------------------- */

.eintraege {
  margin: 1.75rem 0 1rem;
  padding: 0;
  border-top: 1px solid var(--linie);
  list-style: none;
}

.eintraege > li {
  padding: 0.35rem 0 1.1rem;
  border-bottom: 1px solid var(--linie);
}

.eintrag__titel {
  margin: 0 0 0.25rem;
}

/* 48px Klickfläche für den Namen. Der Innenabstand oben ergibt zusammen
   mit dem kleineren Abstand des Listenpunkts wieder 1,1rem — der
   Zeilenfall bleibt derselbe wie ohne Link. */
.eintrag__titel a {
  display: inline-block;
  padding: 0.75rem 0 0.35rem;
}

.eintraege p {
  margin: 0 0 0.35rem;
}

.eintraege p:last-child {
  margin-bottom: 0;
}


/* ---------------------------------------------------------------------
   Preisangabe
   ---------------------------------------------------------------------
   Der Grundpreis steht in derselben Zeile wie der Preis, nur eine Stufe
   ruhiger gesetzt. § 4 PAngV verlangt ihn "in unmittelbarer Nähe" — als
   Fußnote oder in einer eigenen Spalte am Rand wäre er das nicht.

   Größen und Farben stammen aus dem vorhandenen System: die Zeile
   benutzt die Display-Schrift in h3-Größe, der Grundpreis die
   Fließtextschrift in Fließtextgröße. Neue Werte kommen keine dazu.
   --------------------------------------------------------------------- */

.preis {
  font-family: var(--display);
  font-size: 1.2rem;
  font-weight: 700;
}

.preis .grundpreis,
.preis .menge {
  font-family: var(--text);
  font-size: 1.125rem;
  font-weight: 400;
}


/* ---------------------------------------------------------------------
   Die Wege nebeneinander
   ---------------------------------------------------------------------
   Drei gleichwertige Fälle, keine Abfolge. Deshalb keine Nummern und
   keine Reihenfolge, die eine Rangfolge behauptet: untereinander mit
   Haarlinien getrennt, ab 768px nebeneinander unter einer kräftigen
   Linie.

   Lag bis Ticket 8 in startseite.css. Seit Ticket 9 trägt der Baustein
   auch die Seite "Rezept & Vorbestellung" — damit gehört er hierher.
   Das Snippet dazu ist snippets/rezeptwege.php.
   --------------------------------------------------------------------- */

.wege {
  margin: 1.75rem 0 0;
  border-top: 1px solid var(--linie);
}

.weg {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--linie);
}

.weg h2,
.weg h3 {
  margin-bottom: 0.3rem;
}

/* Die Ebene richtet sich nach dem Dokument: auf der Startseite steht der
   Weg unter einer h2 und ist eine h3, auf der eigenen Seite steht er
   direkt unter der h1 und ist eine h2. Gesetzt wird er in beiden Fällen
   gleich — die Gliederung ist eine Frage der Bedeutung, nicht der
   Schriftgröße. */
.weg h2 {
  font-size: 1.2rem;
  font-weight: 600;
}

.weg p {
  margin: 0;
}


/* ---------------------------------------------------------------------
   Aufzählungen
   ---------------------------------------------------------------------
   Auf der Startseite kam keine einzige vor; die Stellenanzeigen und der
   Ablauf einer Leistung brauchen sie. Bewusst schmal eingerückt: die
   Voreinstellung des Browsers zieht die Punkte auf 360px weit vom
   Textrand weg.
   --------------------------------------------------------------------- */

.punkte,
.schritte {
  margin: 0 0 1rem;
  padding-left: 1.3em;
  max-width: var(--spalte);
}

.punkte li,
.schritte li {
  margin-bottom: 0.4rem;
}

.punkte li:last-child,
.schritte li:last-child {
  margin-bottom: 0;
}

/* Besteht ein Punkt nur aus einem Link, ist er eine Klickfläche und
   braucht 48px. Ohne negativen Außenabstand: die Punkte stehen ohnehin
   untereinander, und ein negativer Abstand ließe sie überlappen. */
.punkte li > a:only-child {
  display: inline-block;
  padding: 0.6rem 0;
}

.schritte li::marker {
  font-family: var(--display);
  font-weight: 700;
  color: var(--petrol);
}


/* ---------------------------------------------------------------------
   Bildplätze
   ---------------------------------------------------------------------
   Es gibt derzeit keine freigegebenen Fotos, und die Seite kommt ohne
   aus. Diese Klassen stehen bereit, damit ein späteres Foto an einen
   fertigen Platz kommt und nicht in eine neue Gestaltung.

   Solange kein Bild hinterlegt ist, entsteht hier nichts — kein
   grauer Kasten, keine gestrichelte Fläche. Siehe snippets/bild.php.

       --band        7 : 3 mobil, ab 768px höchstens 420px hoch
       --portraet    3 : 2           Über uns; Innenfotos höchstens 520px hoch
       --karte       4 : 3           Standort, Kartenbild
       --hoch        3 : 4           hochformatige Fläche, Kontaktseite
   --------------------------------------------------------------------- */

.bildplatz {
  margin: 1.75rem 0 0;
}

.bildplatz img {
  display: block;
  width: 100%;
}

/* Das Kopfband läuft über die volle Breite und hat deshalb keinen
   eigenen Abstand nach oben. */
.bildplatz--band {
  margin: 0;
}

/* Unter 768px bestimmt das fertige 7:3-Band seine Höhe weiterhin selbst.
   Erst am Desktop wird es weiter unten auf 420px begrenzt. */

/* Hochformat. Die 3:4-Aufnahme bleibt im Textfluss linksbündig, aber
   wächst nicht mehr über 460px hinaus. So wird aus dem Wegweiser kein
   seitenfüllendes Motiv. */
.bildplatz--hoch {
  max-width: 460px;
}

.bildplatz--hoch img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

/* Die zwei vorhandenen Innenaufnahmen bleiben vollständig im Verhältnis
   3:2 sichtbar. 780px Breite ergeben genau die vorgegebene Obergrenze
   von 520px Höhe; auf schmaleren Geräten bleiben sie unverändert. */
.bildplatz--innen {
  max-width: 780px;
}

.bildplatz--innen img {
  max-height: 520px;
}

.bildplatz--portraet img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.bildplatz--karte img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.bildplatz--quadrat img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

.bildplatz figcaption {
  margin-top: 0.5rem;
  font-size: 1rem;
}

/* Im Eintrag trägt das Bild keinen eigenen Abstand — den Abstand macht
   der Listenpunkt. Auf schmalen Geräten bleibt es klein: ein
   bildschirmfüllendes Produktfoto schiebt den Text aus dem Blick. */
.eintrag__bild {
  margin: 0.75rem 0 0.75rem;
  max-width: 180px;
}


/* ---------------------------------------------------------------------
   Streifen — eine Zeile zwischen zwei kräftigen Linien
   --------------------------------------------------------------------- */

.streifen {
  padding: 1.1rem var(--rand);
  border-top: 3px solid var(--tinte);
  border-bottom: 3px solid var(--tinte);
  background: var(--papier);
}

.streifen .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.3rem 1.5rem;
}

.streifen p {
  max-width: none;
  margin: 0;
}

.streifen__label {
  color: var(--petrol);
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.streifen a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ziel);
  font-weight: 700;
}


/* ---------------------------------------------------------------------
   Live-Status der Öffnungszeiten
   ---------------------------------------------------------------------
   "Heute geöffnet bis 18:30" — der einzige Satz auf der Website, der
   vom Moment abhängt. Er entsteht im Browser aus dem Fahrplan; ohne
   JavaScript bleibt der Absatz leer und ausgeblendet. Lieber keine
   Aussage als eine falsche.

   Angesprochen wird das Attribut, nicht eine Klasse: dasselbe Attribut
   benutzt auch das Skript aus Ticket 5, und so bekommen Startseite und
   Öffnungszeiten-Seite ohne Zutun dieselbe Gestaltung.
   --------------------------------------------------------------------- */

[data-oeffnungszeiten-status] {
  margin: 0.9rem 0 0;
  padding: 0.6rem 0.9rem;
  background: var(--petrol);
  color: var(--papier);
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.25;
}


/* ---------------------------------------------------------------------
   Wochentabelle
   ---------------------------------------------------------------------
   Zeitunabhängig, deshalb serverseitig gerendert. Sie steht auch dann
   da, wenn kein JavaScript läuft.
   --------------------------------------------------------------------- */

.oeffnungszeiten {
  width: 100%;
  margin: 1.25rem 0 0;
  border-collapse: collapse;
  text-align: left;
}

.oeffnungszeiten caption {
  margin-bottom: 0.5rem;
  color: var(--petrol);
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-align: left;
  text-transform: uppercase;
}

.oeffnungszeiten th,
.oeffnungszeiten td {
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--linie);
  vertical-align: baseline;
}

.oeffnungszeiten th {
  padding-right: 1rem;
  font-weight: 700;
  white-space: nowrap;
}


/* ---------------------------------------------------------------------
   Fuß
   --------------------------------------------------------------------- */

.fuss {
  padding: 2.5rem var(--rand);
  background: var(--petrol);
  color: var(--papier);
}

.fuss a,
.fuss a:hover {
  color: var(--papier);
}

/* Ocker erreicht auf Petrol nur 2,5 : 1. Der Fokusring ist hier
   deshalb papierfarben — 9,0 : 1. */
.fuss :focus-visible {
  outline-color: var(--papier);
}

.fuss__name {
  margin-bottom: 0.3rem;
  font-family: var(--display);
  font-size: 1.3rem;
  font-weight: 700;
}

.fuss ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.75rem;
  margin: 1.25rem 0;
  padding: 0;
  list-style: none;
}

/* Die Stellenanzeigen stehen seit Ticket 9 im Fuß. Ein einzelner Link,
   deshalb kein Listenrahmen — die Klickfläche ist aber dieselbe. */
.fuss__stellen {
  margin: 1.25rem 0;
}

.fuss__stellen a,
.fuss ul a {
  display: inline-flex;
  align-items: center;
  min-height: var(--ziel);
  font-weight: 700;
}


/* ---------------------------------------------------------------------
   Rechtstext — die Datenschutzerklärung
   ---------------------------------------------------------------------
   Der längste Fließtext der ganzen Website, gelesen von Menschen, die
   ihn nicht lesen wollen. Er braucht keine eigene Gestaltung, nur mehr
   Luft: größere Zeilenabstände und Zwischenüberschriften, die der Blick
   findet, ohne den Text zu lesen.

   Keine neue Farbe, keine neue Schriftgröße, kein neuer Umbruchpunkt.
   Alles unten steht in Variablen und Regeln, die es schon gibt.

   Die Sprungmarken oben stehen in einer .punkte-Liste — dieselbe Liste
   wie überall sonst, mit denselben 48px-Klickflächen.
   --------------------------------------------------------------------- */

.sprungmarken {
  margin: 1.75rem 0 0;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--linie);
}

.rechtstext {
  margin-top: 1.75rem;
}

/* Die Haarlinie trennt die Hauptabschnitte sichtbar, ohne einen Kasten
   zu bauen. Sie ist dieselbe Linie wie im Zeilenwerk und in den
   Eintragslisten. */
.rechtstext h2 {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linie);
}

/* Der erste Abschnitt beginnt direkt unter dem Verzeichnis, das schon
   eine Linie unter sich hat. Zwei Linien übereinander sähen aus wie ein
   Fehler. */
.rechtstext > :first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.rechtstext h3 {
  margin-top: 2rem;
}

/* 1.75 statt 1.6: bei zwanzig Absätzen am Stück trägt jeder Zehntel. */
.rechtstext p,
.rechtstext ul,
.rechtstext ol {
  line-height: 1.75;
}

.rechtstext p {
  margin-bottom: 1.2rem;
}

.rechtstext ul,
.rechtstext ol {
  margin: 0 0 1.2rem;
  padding-left: 1.3em;
  max-width: var(--spalte);
}

.rechtstext li {
  margin-bottom: 0.5rem;
}

.rechtstext li:last-child {
  margin-bottom: 0;
}


/* ---------------------------------------------------------------------
   Rundgang
   ---------------------------------------------------------------------

   Der 360-Grad-Rundgang enthält sein eigenes Startbild und übernimmt
   dessen Maße: höchstens 780px breit, und im Verhältnis 3:2 sind das
   genau die 520px Höhe. Es gibt damit kein zweites Innenfoto mehr.

   Unter 768px ist die Bühne flacher gehalten (4:3), weil 3:2 auf einem
   320px breiten Gerät nur 213px Höhe ergäbe — zu wenig, um sich in
   einem Panorama umzusehen. Beide Verhältnisse gibt es im Haus schon
   (--portraet und --karte); es kommt keines dazu.

   Ohne JavaScript bleibt nur die Vorschau sichtbar. Der Startknopf und
   die Bühne entstehen beziehungsweise erscheinen erst mit JavaScript.
   --------------------------------------------------------------------- */

.rundgang {
  position: relative;
  margin: 1.5rem 0 0;
  max-width: 780px;
}

.rundgang__vorschau {
  margin: 0;
}

/* Der Startknopf ist der Knopf des Hauses. Er ist nur ein <button> und
   kein <a> — und ein <button> erbt weder Schriftart noch Schriftgröße.
   Ohne diese zwei Zeilen stünde er in der Oberflächenschrift des
   Browsers mitten in einer Seite aus Atkinson Hyperlegible. */
.rundgang__start {
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  font-family: var(--text);
  font-size: 1.125rem;
  cursor: pointer;
}

/* Dass dieser Knopf sich verbergen lässt, ist keine Selbstverständlichkeit:
   .knopf setzt display, und das schlägt die [hidden]-Regel des Browsers.
   Bis Ticket 19 stand hier dafür eine eigene Ausnahme, wie schon einmal
   beim Live-Status der Öffnungszeiten. Seit Ticket 19 steht die Regel
   einmal in grundlagen.css unter "Verborgen ist verborgen" und gilt für
   jedes Element. */

.rundgang__hinweis {
  margin: 0 0 0.75rem;
  max-width: var(--spalte);
}

.rundgang__buehne {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 3px solid var(--linie);
  background: var(--grund2);
}

/* Absolut statt 100 % Höhe: Die Höhe der Bühne entsteht aus dem
   Seitenverhältnis, und eine Prozenthöhe darauf zu beziehen ist von
   Browser zu Browser verschieden zuverlässig. */
.rundgang__bild {
  position: absolute;
  inset: 0;
}

/* Die Bibliothek schaltet auf ihrem Behälter .pnlm-container den
   Fokusring ab, und genau dieser Behälter ist das Element, das den
   Fokus bekommt. Der Ring wird deshalb hier wieder angebracht — außen
   an der Bühne, weil die Bibliothek innen
   "contain: content" setzt und ein Ring am Element selbst dort
   beschnitten werden kann.

   :focus-within und nicht :has(:focus-visible): Letzteres kennen ältere
   Browser nicht, und dann gäbe es gar keinen Ring. Dass der Ring auch
   nach einem Mausklick steht, ist hier richtig — er zeigt an, dass die
   Pfeiltasten jetzt das Bild drehen und nicht die Seite scrollen. */
.rundgang__buehne:focus-within {
  outline: 3px solid var(--ocker);
  outline-offset: 3px;
}

.rundgang__wahl {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

/* Beschriftete Schaltflächen statt schwebender Symbole in der Kugel.
   Sie sind aus denselben Teilen gebaut wie der Knopf des Hauses, nur
   kleiner: fünf Stück in 60px Höhe wären ein Block. */
.rundgang__knopf {
  min-height: var(--ziel);
  padding: 0.5rem 1rem;
  border: 3px solid var(--petrol);
  border-radius: var(--radius);
  background: var(--papier);
  color: var(--petrol);
  font-family: var(--text);
  font-size: 1rem;
  font-weight: 400;
  cursor: pointer;
}

.rundgang__knopf:hover {
  background: var(--grund2);
}

/* Die gewählte Ansicht ist doppelt ausgezeichnet: gefüllt und fett.
   Die Füllung allein wäre nur Farbe, und wer sie nicht unterscheiden
   kann, sähe fünf gleiche Knöpfe. */
.rundgang__knopf[aria-current] {
  background: var(--petrol);
  color: var(--papier);
  font-weight: 700;
}


/* ---------------------------------------------------------------------
   Ab 768px
   --------------------------------------------------------------------- */

@media (min-width: 768px) {
  /* Das Band bleibt bildschirmbreit. Bis 980px ist 7:3 niedriger als
     420px; darüber hält die feste Obergrenze die Seite kompakt. Der
     Fokus bei 40% hält Schild, Kreuz und Eingang im Ausschnitt. */
  .bildplatz--band {
    max-height: 420px;
  }

  .bildplatz--band img {
    height: min(420px, 42.857142857vw);
    object-fit: cover;
    object-position: center 40%;
  }

  .kopf__kopfzeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
  }

  .kopf__tel {
    margin: 0;
  }

  .zeile {
    display: grid;
    grid-template-columns: 14rem 1fr;
    gap: 0 1.5rem;
    align-items: baseline;
  }

  .zeile dd {
    margin: 0;
  }

  /* In der Anschlagtafel nicht: sie steht in einer halben Spalte, und
     14rem für die Beschriftung ließen dort nichts mehr für die Angabe
     übrig. Dort bleiben Beschriftung und Angabe untereinander. */
  .tafel .zeile {
    display: block;
  }

  .tafel .zeile dd {
    margin: 0.15rem 0 0;
  }

  .wege {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 2.5rem;
    border-top: 3px solid var(--tinte);
  }

  .weg {
    padding: 1.5rem 0 0;
    border-bottom: 0;
  }

  /* Zwei Spalten, wenn die Einträge kurz sind — Leistungen etwa
     bestehen aus Name und einem Satz. */
  .eintraege--zweispaltig {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 3rem;
  }

  /* Ein Eintrag mit Bild: das Bild links, der Text daneben. */
  .eintrag--mit-bild {
    display: grid;
    grid-template-columns: 180px 1fr;
    column-gap: 2rem;
    align-items: start;
  }

  .eintrag--mit-bild .eintrag__bild {
    margin: 0.75rem 0 0;
  }

  /* Ab hier ist Platz: 780px im Verhältnis 3:2 ergeben genau die 520px,
     auf die auch die beiden Innenaufnahmen begrenzt sind. Der Rundgang
     steht damit exakt so breit und so hoch wie das Bild darüber. */
  .rundgang__buehne {
    aspect-ratio: 3 / 2;
  }
}


/* ---------------------------------------------------------------------
   Pflichtangaben eines Arzneimittel-Angebots — Ticket 25
   ---------------------------------------------------------------------
   § 4 Abs. 4 HWG verlangt die Pflichtangaben "deutlich abgesetzt,
   abgegrenzt und gut lesbar". § 4 Abs. 3 verlangt dasselbe zusätzlich
   für den Risikotext. Daraus werden hier zwei getrennte Blöcke:

       details   die sieben Angaben, zugeklappt
       p         der Risikotext, immer offen, eigene Umrandung

   Beide sitzen in einem gemeinsamen Kasten mit linker Kante. Die Kante
   ist die Abgrenzung; sie trennt den Pflichtteil vom Werbeteil darüber,
   ohne eine Fläche einzuführen, die wie eine Karte aussähe. Karten sind
   im Design-Plan aus Ticket 7 ausgeschlossen.

   Keine neue Farbe: Linie, Grund2 und Petrol stammen alle aus den
   Variablen. Ocker trägt hier nichts — er ist zu hell für Text (3,6:1)
   und steht im System nur als Fläche, Marke und Fokusring.
   --------------------------------------------------------------------- */

.pflichtangaben {
  margin: 0.9rem 0 0;
  border-left: 4px solid var(--linie);
  padding-left: 0.9rem;
}

.pflichtangaben__block > summary {
  /* 48px Klickfläche, dieselbe Untergrenze wie überall sonst. */
  display: block;
  padding: 0.7rem 0;
  min-height: var(--ziel);
  font-family: var(--display);
  font-weight: 600;
  color: var(--petrol);
  cursor: pointer;
}

/* Das Dreieck des Browsers bleibt, es ist die vertraute Anzeige für
   "hier klappt etwas auf". Nur der Abstand dazu wird gesetzt. */
.pflichtangaben__block > summary::marker,
.pflichtangaben__block > summary::-webkit-details-marker {
  color: var(--petrol);
}

.pflichtangaben__liste {
  margin: 0 0 0.9rem;
}

.pflichtangaben__liste > div {
  margin: 0 0 0.75rem;
}

.pflichtangaben__liste dt {
  font-weight: 700;
}

.pflichtangaben__liste dd {
  margin: 0;
}

/* Der Risikotext. Immer sichtbar, eigene Umrandung, volle Textgröße —
   nicht kleingedruckt. "Gut lesbar" ist eine Anforderung des Gesetzes
   und keine Frage des Geschmacks. */
.risikohinweis {
  margin: 0 0 0.35rem;
  border: 2px solid var(--petrol);
  padding: 0.7rem 0.9rem;
  background: var(--grund2);
  font-weight: 700;
}

/* Kein Druck-Sonderfall nötig: Der Block ist offen ausgeliefert. Wer
   ihn zuklappt, klappt ihn für sich zu; ein Ausdruck und ein frisch
   geladener Bildschirm zeigen die Angaben. Eine CSS-Regel, die ein
   zugeklapptes <details> zum Drucken öffnet, gibt es nicht zuverlässig —
   und eine Zeile Skript für eine Pflichtangabe wäre eine Zeile zu viel:
   Ohne JavaScript stünde der Ausdruck dann ohne sie da. */


/* ---------------------------------------------------------------------
   Sprachen in Originalschrift — Ticket 25
   ---------------------------------------------------------------------
   Jede Sprache zweimal: in ihrer eigenen Schrift, darunter die deutsche
   Bezeichnung. Die Originalschrift steht oben und groesser — sie ist
   das, wonach jemand sucht, der Deutsch nicht liest.

   Unterschieden wird durch Groesse, Schriftschnitt und Stellung, nicht
   durch Farbe. Beide Zeilen tragen dieselbe Textfarbe. Der einzige
   Farbakzent im Abschnitt ist das Ockerquadrat am Kicker, das es dort
   ohnehin schon gibt.

   Zur Zeilenhoehe: Arabische Schrift laeuft deutlich hoeher und tiefer
   als lateinische — Oberlaengen wie in "العربية" und Unterlaengen wie in
   "فارسی" stossen bei 1.6 aneinander. Die eigene Zeile bekommt deshalb
   1.9 und einen Mindestabstand nach unten. Gemessen bei 320px, wo die
   Liste einspaltig laeuft und die Zeilen direkt uebereinander stehen.
   --------------------------------------------------------------------- */

.sprachen {
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
  display: grid;
  /* 7rem, damit bei 320px zwei Spalten stehen bleiben: 2x112px plus
     20px Spalte passen in die 280px, die dort zur Verfuegung stehen.
     Bei 8,5rem fiel die Liste auf eine Spalte und lief ueber zwei
     Bildschirmhoehen. */
  grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
  gap: 0.9rem 1.25rem;
}

.sprachen > li {
  /* Kein Rahmen, keine Flaeche: Karten sind im Design-Plan aus Ticket 7
     ausgeschlossen. Getrennt wird durch Abstand. */
  min-width: 0;
}

.sprachen__eigen {
  display: block;
  font-size: 1.35rem;
  /* Luft fuer Ober- und Unterlaengen der arabischen Schrift. */
  line-height: 1.9;
  /* Ohne das stuende ein arabisches Wort am rechten Rand seiner Spalte
     und die deutsche Beschriftung darunter am linken — `dir="rtl"`
     bestimmt nicht nur die Leserichtung der Zeichen, sondern auch die
     Ausrichtung des Blocks. Die Zeichen laufen weiterhin von rechts
     nach links; nur der Block steht linksbuendig wie alles andere in
     dieser Liste. */
  text-align: left;
  /* Kein `overflow-wrap: break-word`. Ein Wort ohne Trennstrich
     umzubrechen ist in diesem Projekt seit Ticket 19 ausgeschlossen, und
     ein Prueflauf sucht im Stylesheet danach. Gemessen bei 320px: Die
     Spalte ist dort 112px breit, das laengste Wort "داروخانه" rund 90px.
     Es passt, ohne dass etwas brechen muss. */
}

.sprachen__deutsch {
  display: block;
  /* 1rem — die kleinste Groesse, die es im System gibt (Auszeichnungen,
     Kicker, Bildunterschrift). Eine neue Groesse einzufuehren waere das
     Design-System zu erweitern statt es anzuwenden; ein Prueflauf
     zaehlt die Groessen und schlaegt bei einer zwoelften an. */
  font-size: 1rem;
  line-height: 1.4;
  /* Nicht ausgegraut: Die deutsche Bezeichnung ist die Erklaerung und
     muss lesbar bleiben. Kleiner ja, blasser nein — das Ziel von 7:1
     gilt fuer jeden Fliesstext auf dieser Seite. */
}


/* ---------------------------------------------------------------------
   Das Sprachenplakat — Ticket 25
   ---------------------------------------------------------------------
   Die Zeichnung des gedruckten Plakats: das Wort "Apotheke" in zehn
   Sprachen im Kreis um den Moerser.

   Farben kommen alle aus den Variablen. Der Ring traegt Ocker — genau
   die Rolle, die im System fuer ihn vorgesehen ist ("nur Fokusring und
   Grafik", 3,6:1 auf Papier, fuer eine Flaeche ausreichend). Die
   Woerter tragen Petrol (9,0:1), die Beschriftungen Tinte (14,3:1).
   Beide sind Text und muessen es bleiben.

   **Farbe unterscheidet hier nichts.** Alle zehn Sprachen sehen gleich
   aus; was sie unterscheidet, ist das Wort und seine Stellung. Es gibt
   keine hervorgehobene und keine zurueckgesetzte Sprache.
   --------------------------------------------------------------------- */

.plakat {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--papier);
}

.plakat__ring circle {
  fill: none;
  stroke: var(--ocker);
  stroke-width: 3;
}

.plakat__ring line {
  stroke: var(--linie);
  stroke-width: 3;
  stroke-linecap: round;
}

.plakat__moerser {
  color: var(--petrol);
}

.plakat__wort {
  font-family: var(--display);
  font-size: 64px;
  font-weight: 600;
  fill: var(--petrol);
}

.plakat__label {
  font-family: var(--text);
  font-size: 38px;
  fill: var(--tinte);
}


/* ---------------------------------------------------------------------
   Die Diashow im Kopfband — Ticket 25
   ---------------------------------------------------------------------
   Zwei Bilder im selben Kasten: das Foto der Aussenansicht und das
   Plakat. Sie wechseln sich ab.

   Gebaut ohne eine Zeile JavaScript.

   **Ohne Halteknopf** — Entscheidung des Inhabers, Stand 17.09.2026.
   Ticket 25 hatte einen; er ist nicht rechtlich verlangt (B1.1 und B1.2
   in ANNAHMEN.md) und wurde auf Wunsch entfernt. Die Rueckfallebene, auf
   die es ankommt, bleibt: `prefers-reduced-motion` weiter unten.

   Nur die obere Ebene wird ein- und ausgeblendet; die untere bleibt
   deckend stehen. Waeren beide halbdurchsichtig, saehe man in der Mitte
   des Uebergangs beide zugleich.

   Zeiten: 16 Sekunden Umlauf, davon rund 6,7 Sekunden je Bild und 1,3
   Sekunden Ueberblendung. Schneller wird es unruhig, langsamer wirkt es
   stehengeblieben.
   --------------------------------------------------------------------- */

.diashow {
  position: relative;
}

.diashow__buehne {
  position: relative;
  /* Die Hoehe richtet sich nach dem Plakat und nicht nach dem Foto: Das
     Foto fuellt jeden Kasten (object-fit: cover), die Zeichnung braucht
     Hoehe, damit zehn Woerter lesbar bleiben. Die obere Grenze ist
     dieselbe wie vorher (420px), die Steigung ebenfalls (42,857vw
     entspricht 7:3). Neu ist nur die Untergrenze. */
  height: clamp(240px, 42.857142857vw, 420px);
  overflow: hidden;
  background: var(--papier);
}

.diashow__bild {
  position: absolute;
  inset: 0;
}

.diashow__bild .bildplatz,
.diashow__bild .bildplatz img {
  margin: 0;
  width: 100%;
  height: 100%;
  max-height: none;
}

.diashow__bild .bildplatz img {
  object-fit: cover;
  object-position: center 40%;
}

/* Die obere Ebene blendet ein und aus. */
.diashow__bild--plakat {
  opacity: 0;
  animation: diashow-wechsel 16s ease-in-out infinite;
}

@keyframes diashow-wechsel {
  0%, 42%   { opacity: 0; }
  50%, 92%  { opacity: 1; }
  100%      { opacity: 0; }
}

/* Wer Bewegung abgestellt hat, bekommt keine: Der Wechsel steht still,
   zu sehen ist das Foto. Ein Bild, kein Wechsel.

   **Der erste Entwurf hat hier beide Bilder untereinander gestellt.**
   Das war ein Fehler mit Ansage: "Bewegung reduzieren" ist unter Windows
   eine verbreitete Einstellung, und fuer jeden, der sie gesetzt hat,
   wurde aus dem Kopfband eine doppelt so hohe Doppelstrecke. Gemeldet
   wurde es als "auf dem Handy passt es, auf dem Desktop nicht" — beide
   Browser desselben Rechners waren betroffen, weil es am Betriebssystem
   haengt und nicht am Browser.

   Wer keine Bewegung will, will keine Bewegung — nicht ein anderes
   Layout. Der Kasten bleibt deshalb genau so hoch wie sonst, und das
   Plakat bleibt verborgen. Es geht damit fuer diese Besucher verloren;
   das ist der Preis, und er ist kleiner als ein Kopfband, das bei jedem
   anders aussieht. */
@media (prefers-reduced-motion: reduce) {
  .diashow__bild--plakat {
    animation: none;
    opacity: 0;
  }
}

/* ---------------------------------------------------------------------
   Vor und Zurueck — seit dem 18.09.2026
   ---------------------------------------------------------------------
   Die Knoepfe entstehen im Browser (assets/js/diashow.js) und stehen
   nicht im ausgelieferten HTML: "Kein Formular im oeffentlich
   zugaenglichen Bereich" ist hier eine zugesicherte Aussage, und der
   Prueflauf sucht auf der Startseite auch nach `button`.

   Ohne JavaScript gibt es sie nicht, und der Wechsel laeuft weiter von
   selbst. Es geht nichts verloren, was es vorher gab.

   Ab dem ersten Klick uebernimmt der Besucher: .diashow--von-hand
   schaltet die Animation ab, damit die Auswahl stehen bleibt. Ohne das
   liefe der Wechsel weiter und ueberschriebe sie nach wenigen Sekunden.
   --------------------------------------------------------------------- */

.diashow--von-hand .diashow__bild--plakat {
  animation: none;
}

/* Auf dem Bild, links und rechts — nicht darunter.

   Der erste Entwurf stellte die Knoepfe unter 768px in eine eigene Zeile
   unter die Buehne: Ein aufgelegter Pfeil verdeckte dort Woerter des
   Plakats. Die Zeile hat das Kopfband um eine Leiste verlaengert und sah
   nach Bedienung aus statt nach Bild. Der Inhaber wollte es anders.

   Gemessen wurde deshalb, wo die Tinte des Plakats wirklich liegt — im
   Mittelband, also da, wo ein Pfeil sitzt. Frei bleiben am Rand:

     320px:  links 24px, rechts 30px   (das persische "داروخانه"
                                        beginnt bei 24px)
     360px:  links 28px, rechts 35px
     375px:  links 29px, rechts 36px
     414px:  links 38px, rechts 45px
     768px:  links 152px, rechts 162px

   Der sichtbare Strich ist rund 11px breit und beginnt 4px vom Rand. Er
   bleibt damit auch auf dem schmalsten verbreiteten Geraet neben den
   Woertern. **Die Klickflaeche ist davon unabhaengig**: 48px im
   Quadrat, unsichtbar, und sie darf ueber dem Wort liegen — sie verdeckt
   nichts. */
.diashow__bedienung {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.25rem;

  /* Der Kasten selbst faengt keine Klicks ab — nur die Knoepfe darin. */
  pointer-events: none;
}

.diashow__pfeil {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;

  /* Die Klickflaeche aus dem Design-System, nicht kleiner. */
  width: var(--ziel);
  height: var(--ziel);

  /* Kein Rahmen, keine Flaeche, nur der Strich. */
  padding: 0;
  border: 0;
  background: none;
  color: var(--petrol);
  cursor: pointer;

  /* Der Lichtsaum tritt an die Stelle des Rahmens.

     Ueber dem Plakat steht Petrol auf Papier (9,0:1); dort ist der Saum
     dieselbe Farbe wie der Grund und damit unsichtbar. Ueber dem Foto
     ist der Grund mal hell und mal dunkel — dort ist der Saum die
     angrenzende Farbe, und der Strich behaelt seine 9,0:1, gleich was
     darunter liegt. Ohne ihn verschwaende der Pfeil in der dunklen
     Haelfte des Fotos. */
  filter:
    drop-shadow(0 0 2px var(--papier))
    drop-shadow(0 0 4px var(--papier));
}

/* Der Strich sitzt am aeusseren Rand seiner Klickflaeche und nicht in
   deren Mitte: Zentriert laege er 25px vom Bildrand entfernt und damit
   mitten im persischen Wort. */
.diashow__pfeil--zurueck {
  justify-content: flex-start;
}

.diashow__pfeil--vor {
  justify-content: flex-end;
}

/* Beim Ueberfahren wird der Strich dunkler, nicht groesser und nicht
   eingerahmt. Tinte auf Papier sind 14,3:1. */
.diashow__pfeil:hover {
  color: var(--tinte);
}

.diashow__pfeil:focus-visible {
  outline: 3px solid var(--ocker);
  outline-offset: -3px;
}

/* Ab 768px ist links und rechts vom Plakat ueber 150px Papier frei. Der
   Pfeil rueckt dort auf den Seitenrand des Satzspiegels ein — am Rand
   kleben muss er nur, solange es eng ist. */
@media (min-width: 768px) {
  .diashow__bedienung {
    padding: 0 var(--rand);
  }

  /* Die Buehne ist dort bis zu 420px hoch. Ein Strich von 16px sieht
     darin verloren aus; 21px stehen im selben Verhaeltnis wie auf dem
     Handy. Die Klickflaeche bleibt unveraendert. */
  .diashow__pfeil svg {
    width: 2rem;
    height: 2rem;
  }
}

/* Wer Bewegung abbestellt hat, sieht das Foto — blaettern darf er
   trotzdem. Die Knoepfe bleiben, nur der selbsttaetige Wechsel nicht. */
@media (prefers-reduced-motion: reduce) {
  .diashow--von-hand .diashow__bild--plakat {
    animation: none;
  }
}