/* Eigene Ergaenzungen des statischen Umbaus. */

/* @font-face des Themes; lag in der WordPress-Ausgabe inline im <head>. */
@font-face {
  font-family: 'sb-glyphs';
  src: url('../fonts/sb-glyphs.woff') format('woff'),
       url('../fonts/sb-glyphs.ttf') format('truetype'),
       url('../fonts/sb-glyphs.svg#sb-glyphs') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.sb-glyphs {
  font-family: 'sb-glyphs';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Der Onlineshop-Hinweis stand in WordPress als komplettes verschachteltes
   HTML-Dokument im Seiteninhalt. Uebrig bleibt der Link — die Farben aus dem
   mitkopierten <style> sind hier nachgebaut. */
.shop-link { color: #c80303; text-decoration: none; }
.shop-link:hover, .shop-link:focus {
  color: #0000ff; background-color: #ffffc0; text-decoration: underline;
}

/* Ersatz fuer die OSM-iframes: selbst gehostetes Kartenbild. */
.karte { max-width: 100%; height: auto; border: 1px solid #000; }

/* Pagination des Aktuelles-Archivs (im alten Theme ohne Funktion). */
.archiv-pager { text-align: center; margin: 2em 0 1em; }

/* Das Theme formatiert JEDE Liste im Inhaltsbereich als Aufzaehlung:
   `.content-unit ul li` bekommt `display: flex` und ein rotes Glyph-Bullet
   per `:before`. Fuer die Kategorie-Tabs hebt das Theme das selbst wieder
   auf (`.tabs-post-categories li`), die Pagination gab es dort nicht — sie
   stand deshalb untereinander, jede Zahl mit Bullet davor. */
.content-unit .archiv-pager .pagination > li { display: inline; padding: 0; }
.content-unit .archiv-pager .pagination > li:before { content: none; padding: 0; }

/* Bootstrap floatet die Eintraege nach links; auf Handybreite bricht der
   Pager dann linksbuendig um. Ohne Float bleibt er zentriert — die Raender
   liegen weiter aneinander, weil im Markup kein Leerraum zwischen den <li>
   steht. */
.archiv-pager .pagination > li > a { float: none; display: inline-block; }

/* Dasselbe `display: flex` macht aus Text und Link in einem <li> zwei
   Flex-Items — das Leerzeichen dazwischen faellt weg. Auf der Startseite
   stand deshalb „per Mail:bestellungen@…" und „Formular beiDirektbestellung".
   Die Aufzaehlungen mit Glyph-Bullet brauchen flex, die simple-list nicht. */
.content-unit ul.simple-list li { display: block; }

/* Sichtbarer Fokus — das Theme hatte keinen. */
a:focus-visible, button:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 3px solid #c80303;
  outline-offset: 2px;
}


/* Pagination: Bootstrap-3-Blau erreicht auf Weiss nur 3,5:1 (axe:
   color-contrast). Rot der Site liegt bei 6,0:1. */
.archiv-pager .pagination > li > a { color: #c80303; }
.archiv-pager .pagination > .active > a,
.archiv-pager .pagination > .active > a:hover,
.archiv-pager .pagination > .active > a:focus {
  background-color: #c80303;
  border-color: #c80303;
  color: #fff;
}

/* Leere <li> sind in den Oeffnungszeiten-Listen Abstandshalter. In
   WordPress standen dort <p></p> und <br> als direkte Kinder von <ul> —
   ungueltiges Markup (axe: list), das aber sichtbaren Abstand erzeugte.
   Der bleibt so erhalten, ohne die Liste kaputt zu machen. */
.simple-list li:empty { height: 0.75em; }
