/* The directory's own scaffolding.

   The templates are written in Bootstrap's class vocabulary, but the service
   must not load Bootstrap: nothing may leave the server at request time, and
   shipping 30 KB of framework for two dozen classes would be out of
   proportion. This file rebuilds exactly the classes the templates use —
   nothing more.

   It is loaded BEFORE the forum's /custom.css. That order is deliberate:
   /custom.css carries only the overrides (colours, Inter, the dark
   variant), and an override that loses to the scaffolding underneath is no
   override at all. Every value here is therefore either a plain default or
   reads a --oo-* / --bs-* variable that /custom.css owns, with a fallback
   for the case where the forum is down and /custom.css never arrives.

   The directory stays readable when the forum is unreachable — that promise
   covers its looks too. */

/* ------------------------------------------------------------- The tokens */

/* Fallbacks only. /custom.css declares the same names on :root and wins,
   because it is loaded second. */
:root {
  --dir-line: var(--oo-linie, #e3e7eb);
  --dir-card: var(--oo-karte, #ffffff);
  --dir-muted: var(--oo-text-leise, #6b7280);
  --dir-accent: var(--oo-marine, #1e2a3a);
  --dir-accent-light: var(--oo-marine-hell, #3b5573);
  --dir-quiet-bg: var(--oo-flaeche-leise, #eef1f5);

  /* The four notice colours. /custom.css has no opinion on these — the forum
     renders its own alerts through Bootstrap — so they are owned here, and
     flipped by hand for the dark variant below. */
  --dir-warning-bg: #fff3cd;
  --dir-warning-fg: #664d03;
  --dir-warning-line: #ffe69c;
  --dir-danger-bg: #f8d7da;
  --dir-danger-fg: #842029;
  --dir-danger-line: #f5c2c7;
  --dir-success-bg: #d1e7dd;
  --dir-success-fg: #0f5132;
  --dir-success-line: #badbcc;
}

/* --------------------------------------------------------------- The page */

body {
  margin: 0;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--bs-body-color, #1a1d23);
  background: var(--bs-body-bg, #fcfcfd);
}

.container {
  width: 100%;
  margin-inline: auto;
  padding-inline: .75rem;
}

/* --------------------------------------------------------------- The grid */

/* Bootstrap's row is a negative-margin construction; a flex row with a gap
   reaches the same place with a tenth of the rules. Every row in the
   templates carries g-2, so the gap lives on that class, not on .row. */
.row {
  display: flex;
  flex-wrap: wrap;
}

/* Anything unclassed inside a row — the help line under the two award
   fields, for one — takes a line of its own instead of squeezing in. */
.row > * {
  flex: 1 1 100%;
  min-width: 0;
}
.row > .col-auto {
  flex: 0 0 auto;
}

.g-2 { gap: .5rem; }

/* Below the small breakpoint the two award fields stack, as they must on a
   phone. Above it they share the line: a third and two thirds, minus their
   half of the .5rem gap between them. */
@media (min-width: 36rem) {
  .row > .col-sm-4 { flex: 0 0 calc(33.3333% - .25rem); }
  .row > .col-sm-8 { flex: 0 0 calc(66.6667% - .25rem); }
}

.d-flex { display: flex; }
.align-items-center { align-items: center; }
.position-sticky { position: sticky; }
.border-end { border-right: 1px solid var(--dir-line); }
.me-0 { margin-right: 0; }
.align-items-end { align-items: flex-end; }

/* ---------------------------------------------------------- The spacings */

/* Bootstrap's scale: 1 = .25rem, 2 = .5rem, 3 = 1rem, 4 = 1.5rem. */
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: .5rem; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.mt-1 { margin-top: .25rem; }
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: 1rem; }
.mt-4 { margin-top: 1.5rem; }
.ms-2 { margin-left: .5rem; }
.me-2 { margin-right: .5rem; }
.py-4 { padding-block: 1.5rem; }
.p-3 { padding: 1rem; }

/* --------------------------------------------------------------- The type */

.h3 {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.25;
}
.h5 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
}
.small { font-size: .875em; }
.fw-semibold { font-weight: 600; }
.text-secondary { color: var(--dir-muted); }
.list-unstyled {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

/* -------------------------------------------------------------- The edges */

.border {
  border: 1px solid var(--dir-line);
}
.rounded { border-radius: .375rem; }

/* ------------------------------------------------------------ The buttons */

.btn {
  display: inline-block;
  padding: .375rem .75rem;
  border: 1px solid transparent;
  border-radius: .375rem;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  background: transparent;
  color: inherit;
}
.btn:focus-visible {
  outline: 2px solid var(--dir-accent-light);
  outline-offset: 2px;
}

.btn-primary {
  background-color: var(--dir-accent);
  border-color: var(--dir-accent);
  color: #ffffff;
}
.btn-primary:hover { filter: brightness(1.15); }

.btn-outline-secondary {
  border-color: var(--dir-line);
  color: var(--dir-muted);
}
.btn-outline-secondary:hover {
  background-color: var(--dir-quiet-bg);
  color: var(--bs-body-color, #1a1d23);
}

.btn-link {
  border-color: transparent;
  color: var(--dir-accent-light);
  text-decoration: underline;
}

.btn-sm {
  padding: .25rem .5rem;
  font-size: .875rem;
}

/* -------------------------------------------------------------- The forms */

.form-label {
  display: block;
  margin-bottom: .35rem;
  font-weight: 500;
}

.form-control,
.form-select {
  display: block;
  width: 100%;
  padding: .375rem .75rem;
  border: 1px solid var(--dir-line);
  border-radius: .375rem;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  background-color: var(--dir-card);
  color: var(--bs-body-color, #1a1d23);
}
.form-control:focus,
.form-select:focus {
  outline: 2px solid var(--dir-accent-light);
  outline-offset: 0;
  border-color: var(--dir-accent-light);
}

/* The select keeps the browser's own arrow. Redrawing it would mean an
   embedded image and a second set of rules for the dark variant, for no
   gain a reader would notice. */
.form-select[multiple] { padding-inline: .35rem; }

.form-control-sm {
  padding: .25rem .5rem;
  font-size: .875rem;
}

.form-text {
  margin-top: .25rem;
  font-size: .875em;
  color: var(--dir-muted);
}

/* ------------------------------------------------------------- The notices */

.alert {
  padding: .75rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: .375rem;
}
.alert-warning {
  background-color: var(--dir-warning-bg);
  border-color: var(--dir-warning-line);
  color: var(--dir-warning-fg);
}
.alert-danger {
  background-color: var(--dir-danger-bg);
  border-color: var(--dir-danger-line);
  color: var(--dir-danger-fg);
}
.alert-success {
  background-color: var(--dir-success-bg);
  border-color: var(--dir-success-line);
  color: var(--dir-success-fg);
}
.alert-secondary {
  background-color: var(--dir-quiet-bg);
  border-color: var(--dir-line);
  color: var(--bs-body-color, #1a1d23);
}

/* --------------------------------------------------------- The dark variant

   Two blocks with the same body, on purpose.

   The first answers the attribute that the one line of script in <head>
   sets, and that /custom.css switches on as well. The second is for a
   reader without JavaScript: no attribute is ever set for them, so the
   media query has to stand in — and it has to carry the palette itself,
   because /custom.css hangs its whole dark palette off the very attribute
   that is missing.

   :root:not([data-bs-theme]) beats /custom.css's plain :root on
   specificity, which is what lets a stylesheet loaded first win here. */

[data-bs-theme="dark"] {
  --dir-warning-bg: #332701;
  --dir-warning-fg: #ffda6a;
  --dir-warning-line: #4d3b02;
  --dir-danger-bg: #2c0b0e;
  --dir-danger-fg: #ea868f;
  --dir-danger-line: #58151c;
  --dir-success-bg: #051b11;
  --dir-success-fg: #75b798;
  --dir-success-line: #0f5132;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme]) {
    /* The forum's dark palette, repeated for the JavaScript-less reader.
       Same values as the [data-bs-theme="dark"] block of /custom.css. */
    --oo-marine: #2f4a68;
    --oo-marine-hell: #8ba6c9;
    --oo-flaeche: #15181d;
    --oo-karte: #1b1f26;
    --oo-linie: #2b313a;
    --oo-text: #e6e9ed;
    --oo-text-leise: #9aa3af;
    --oo-flaeche-leise: #232833;
    --bs-body-bg: #15181d;
    --bs-body-color: #e6e9ed;
    --bs-link-color: #8ba6c9;
    --bs-link-hover-color: #a8bfdb;

    --dir-warning-bg: #332701;
    --dir-warning-fg: #ffda6a;
    --dir-warning-line: #4d3b02;
    --dir-danger-bg: #2c0b0e;
    --dir-danger-fg: #ea868f;
    --dir-danger-line: #58151c;
    --dir-success-bg: #051b11;
    --dir-success-fg: #75b798;
    --dir-success-line: #0f5132;
  }

  /* /custom.css sets `body { background: var(--oo-flaeche) }` without any
     theme condition, so the variables above reach the body through it. When
     it is missing — forum down — this keeps the page from turning white. */
  :root:not([data-bs-theme]) body {
    background: var(--oo-flaeche);
    color: var(--oo-text);
  }
  :root:not([data-bs-theme]) a {
    color: var(--oo-marine-hell);
  }
}

/* ------------------------------------------------------ The shared chrome */

/* The header bar and the sidebar the forum shows, rebuilt in the same class
   vocabulary. `/custom.css` already paints `.navbar` in marine and sets the
   brand's weight, so the colours are not repeated here — only the geometry
   Bootstrap would otherwise provide.

   The bar carries `data-bs-theme="dark"` in the template, which is what
   turns its text light. Answer does the same on its own header; over
   `--oo-marine` it would have picked up the lightened marine of the dark
   variant in light mode. */
.navbar {
  display: flex;
  align-items: center;
  /* 62px is what Answer's own bar measures once React has taken over. Set
     rather than left to the content: the button on the right is a hair
     taller than anything in Answer's header, and a bar that changes height
     between the two halves reads as a page that jumps. */
  min-height: 62px;
  background-color: #1e2a3a;
}
.sticky-top {
  position: sticky;
  top: 0;
  z-index: 1020;
}
/* No colour here on purpose. `/custom.css` loads after this file and paints
   every anchor with `--bs-link-color`, which the bar's `data-bs-theme="dark"`
   turns into the light marine — and that is exactly what the forum's own
   brand looks like. Forcing it white would have made the two halves of the
   site differ in the one word that appears on every page. */
#header .navbar-brand {
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.018em;
  text-decoration: none;
  white-space: nowrap;
}
.mx-auto { margin-left: auto; margin-right: auto; }
.maxw-560 { max-width: 560px; }

.navbar .form-control {
  /* Answer's own values, measured on its header. The bar has to look the
     same in all three services down to the pixel, or it flickers at a page
     change. */
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.2);
  /* Ohne dies liegt der durchscheinende Hintergrund unter dem ebenso
     durchscheinenden Rand — an der Kante addieren sich beide auf rund 0,36,
     und das Feld bekommt eine hellere Umrandung als im Forum. Answer setzt
     denselben Wert; gemessen als einziger verbliebener Unterschied zwischen
     den drei Kopfleisten. */
  background-clip: padding-box;
  color: #fff;
}
.navbar .form-control::placeholder { color: rgba(255, 255, 255, 0.65); }
.navbar .form-control:focus {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

/* The hamburger, drawn rather than loaded: Bootstrap's own is a background
   image in a data URI, and one line of SVG is cheaper than carrying that. */
.navbar-toggler {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 0.375rem;
  padding: 0.25rem 0.55rem;
  cursor: pointer;
}
.navbar-toggler-icon {
  display: block;
  width: 1.1rem;
  height: 1.1rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(255,255,255,0.8)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}

#pcSideNav {
  position: sticky;
  top: 56px;
  align-self: flex-start;
  width: 13.5rem;
  flex: 0 0 13.5rem;
  border-right: 1px solid var(--dir-line);
  padding: 1.25rem 0.75rem 1.5rem;
  height: calc(100vh - 56px);
}
.nav {
  display: flex;
  gap: 0.15rem;
}
.flex-column { flex-direction: column; }
/* The sidebar in the cut of shadcn/ui: smaller type, quieter colours, and a
   current position that shows itself with a surface rather than a block of
   colour.

   It used to be marine across the full width. Beside eight subject areas that
   became a bar dominating half the sidebar — a hint about where you are should
   not be the loudest thing on the page. */
.nav-link {
  display: flex;
  align-items: center;
  padding: 0.35rem 0.5rem;
  border-radius: 6px;
  color: var(--dir-muted);
  text-decoration: none;
  font-size: 0.875rem;
}
.nav-link:hover {
  background: var(--dir-quiet-bg);
  color: var(--oo-text, #1a1d23);
}
.nav-pills .nav-link.active {
  background: var(--dir-quiet-bg);
  color: var(--oo-text, #1a1d23);
  font-weight: 500;
}
.nav-link svg { flex: 0 0 auto; opacity: 0.7; }
.nav-pills .nav-link.active svg { opacity: 1; }

/* Below Answer's own breakpoint the sidebar gives way to the dialog. The two
   `d-*-xl-*` classes exist only for the header and the sidebar, so they are
   written out rather than generated. */
.d-none { display: none; }
@media (min-width: 1200px) {
  .d-xl-block { display: block; }
  .d-xl-none { display: none; }
}

/* The narrow-screen menu comes in from the left, under the header bar — the
   way the forum's own does.
 
   A <dialog> centres itself by default, and that is what this used to do: a
   rounded box in the middle of the screen while the forum slid a full-height
   panel in from the side. Same site, two different gestures, and the
   difference showed on every phone. `margin` places it; `inset-inline-end:
   auto` keeps it from stretching across.
 
   Measured against Answer's own panel at 390px: 240px wide, starting at 62px
   from the top, running to the bottom. */
#oo-menue {
  /* This file sets no global `box-sizing`, so the padding would otherwise be
     added to the width and the panel would come out 20px wider than the
     forum's. */
  box-sizing: border-box;
  margin: 62px auto auto 0;
  inset-inline-end: auto;
  width: 15rem;
  max-width: 85vw;
  height: calc(100% - 62px);
  max-height: none;
  padding: 0.75rem 0.6rem;
  border: 0;
  border-right: 1px solid var(--dir-line);
  border-radius: 0;
  background: var(--dir-card);
  color: var(--oo-text, #1a1d23);
}
#oo-menue::backdrop { background: rgba(0, 0, 0, 0.45); }

/* Sliding in, and only for those who want movement. */
@media (prefers-reduced-motion: no-preference) {
  #oo-menue[open] { animation: oo-menue-ein 0.18s ease-out; }
  @keyframes oo-menue-ein {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
  }
}

/* Utility classes the chrome needs and the pages did not. */
.w-100 { width: 100%; }
.flex-fill { flex: 1 1 auto; }
.flex-grow-1 { flex-grow: 1; }
.me-auto { margin-right: auto; }
.ms-auto { margin-left: auto; }
.px-3 { padding-left: 1rem; padding-right: 1rem; }
.pt-4 { padding-top: 1.5rem; }
.mb-4 { margin-bottom: 1.5rem; }
.lh-1 { line-height: 1; }
.text-nowrap { white-space: nowrap; }
.overflow-x-hidden { overflow-x: hidden; }
#header .btn-light {
  background: #f8f9fa;
  border-color: #f8f9fa;
  color: #1e2a3a;
  text-decoration: none;
}
#header .btn-light:hover {
  background: #e9ecef;
  border-color: #e9ecef;
  color: #1e2a3a;
}
@media (min-width: 576px) {
  .me-sm-3 { margin-right: 1rem; }
}
@media (min-width: 1200px) {
  .ms-xl-3 { margin-left: 1rem; }
}

/* ------------------------------------------- The subject areas, one level down */

/* Same shape as the forum's, which carries its copy in `eigener-kopf.html`.
   Kept in step by hand: three small stylesheets that look alike are easier to
   follow than one shared file none of the three services owns. */
.oo-nav-gruppe {
  margin-top: .6rem;
  padding-top: .55rem;
  border-top: 1px solid var(--dir-line);
}
.oo-nav-gruppentitel {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .5rem;
  border-radius: 6px;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .01em;
  color: var(--dir-muted);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
/* The triangle Safari and Firefox draw by themselves. The arrow in the markup
   turns instead. */
.oo-nav-gruppentitel::-webkit-details-marker { display: none; }
.oo-nav-gruppentitel::marker { content: ""; }
.oo-nav-gruppentitel:hover { background: var(--dir-quiet-bg); }
.oo-pfeil {
  flex: 0 0 auto;
  opacity: .7;
  transition: transform .15s ease;
}
@media (prefers-reduced-motion: reduce) {
  .oo-pfeil { transition: none; }
}
details[open] > .oo-nav-gruppentitel .oo-pfeil { transform: rotate(90deg); }

.oo-nav-unter {
  display: flex;
  flex-direction: column;
  gap: .05rem;
  margin: .15rem 0 .1rem .75rem;
  padding-left: .5rem;
  border-left: 1px solid var(--dir-line);
}
.oo-nav-unter a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .28rem .5rem;
  border-radius: 6px;
  font-size: .8125rem;
  color: var(--dir-muted);
  text-decoration: none;
}
.oo-nav-unter a:hover {
  background: var(--dir-quiet-bg);
  color: var(--oo-text, #1a1d23);
}
.oo-nav-unter .oo-zahl {
  font-size: .75rem;
  font-variant-numeric: tabular-nums;
  /* No opacity: 65% on the already muted colour measured 2.49:1 in the light
     variant and 3.68:1 in the dark one — under the 4.5:1 readable text needs.
     The colour now says what it means. */
  color: var(--dir-muted);
}

/* ------------------------------------------------- Between the two services */

/* The site is three services behind one host name, so a step from the start
   page into the forum is a real document change — the browser tears the page
   down and builds the next one. Without help that shows as a white flash.

   Cross-document view transitions fade instead. Both documents have to
   declare it, which is the point of this block: the forum has carried it
   since its own pages started swapping without a reload, and until now this
   side was missing, so nothing happened in either direction.

   Only opacity, no movement: a cross-fade disturbs nobody, a slide does. Who
   asked their system for less motion gets none — that is not politeness but,
   for people with vestibular trouble, a matter of well-being. */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: .22s;
  animation-timing-function: ease;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

/* The header bar and the sidebar stand still across a page change.

   By default the browser fades the whole page — including the two parts that
   look the same on both sides. That makes the chrome flicker although nothing
   about it changed.

   A name of its own lifts an element out of the faded area and gives it a
   transition of its own. The names have to be present in BOTH documents, or
   the browser finds nothing on the other side to match — which is why all
   three services carry the same ones. */
#header { view-transition-name: oo-kopf; }
#pcSideNav { view-transition-name: oo-leiste; }

/* And they really do rest: no fade, no shift. What does change in the sidebar
   — which entry is the current one — therefore switches hard. That is right:
   a state that fades across is visible twice for the blink of an eye. */
::view-transition-group(oo-kopf),
::view-transition-group(oo-leiste) { animation: none; }
::view-transition-old(oo-kopf),
::view-transition-new(oo-kopf),
::view-transition-old(oo-leiste),
::view-transition-new(oo-leiste) {
  animation: none;
  mix-blend-mode: normal;
}

/* ------------------------------------------- The header bar, to the pixel */

/* The three services have to draw this bar identically, or it jumps at a page
   change — and then no `view-transition-name` can hold it still. Every value
   below was measured on Answer's own header at 1280px and matched here.

   Measured on 23.08.2026: brand 172px, sign-in 101px, register 117px, search
   field 560px with 42px of room for the magnifier. */
#header .navbar-brand {
  font-size: 1.25rem;
  padding: 0;
  line-height: 1;
}

/* Answer's pair of buttons, rebuilt. `btn-link link-light` is a button that
   looks like a link — same box, same height, no fill. */
/* On a narrow screen the bar carries the menu button, the brand and the
   register button — a fourth item pushes the row past the edge. Measured at
   390px: 459px of content, 69px of it off-screen. Signing in stays reachable
   from the register page and from the forum.

   The portal has carried this rule since it was built; the directory kept its
   own copy of the header and this one line was missed. */
@media (max-width: 30rem) {
  #header .btn-link { display: none; }
}

#header .btn-link {
  border: 1px solid transparent;
  background: none;
  color: rgba(255, 255, 255, .85);
  text-decoration: none;
}
#header .btn-link:hover { color: #fff; }
#header .btn {
  padding: .375rem .75rem;
  font-size: 1rem;
  line-height: 1.5;
}

/* The magnifier sits inside the field, as it does in the forum — and the text
   starts behind it. Drawn rather than fetched: one line of SVG costs less than
   a request, and nothing may leave the server at request time anyway. */
#header .placeholder-search {
  padding: .375rem .75rem .375rem 2.625rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='rgba(255,255,255,0.55)'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 1rem center;
  background-size: 16px 16px;
}

@media (min-width: 576px) {
  .me-sm-5 { margin-right: 3rem; }
}
.link-light { color: rgba(255, 255, 255, .85); }
.p-0 { padding: 0; }

/* The intro line and the way to one's own entry, side by side. */
.oo-eintrag-zeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Im Klappmenü gilt derselbe ruhige Zustand wie in der festen Leiste.
 
   `/custom.css` faerbt `.nav-link.active` mit `!important` in Marine — fuer
   die feste Leiste ist das ueber `#pcSideNav` ueberschrieben, der Dialog aber
   trug wieder den Farbblock. Bei zwei wichtigen Regeln entscheidet die
   Spezifitaet, deshalb hier die Kennung davor. */
#oo-menue .nav-link.active {
  background: var(--dir-quiet-bg) !important;
  color: var(--oo-text, #1a1d23) !important;
  font-weight: 500;
}
#oo-menue .nav-link {
  color: var(--dir-muted) !important;
}
#oo-menue .nav-link:hover {
  background: var(--dir-quiet-bg) !important;
  color: var(--oo-text, #1a1d23) !important;
}

/* Unter 576px greift `me-sm-5` nicht, und Marke und Schaltflaeche stossen
   aneinander — gemessen bei 393px: die eine endet auf 233, die andere beginnt
   dort. Etwas Luft dazwischen. */
@media (max-width: 35.99rem) {
  #header .navbar-brand { margin-right: .75rem; }
}

/* Die Seitenfarbe reicht bis zum unteren Rand.
 
   Der body ist nur so hoch wie sein Inhalt — auf der Suchseite des
   Verzeichnisses sind das rund 520px bei einem Fenster von 660. Darunter
   schien der Standardgrund des Browsers durch, ein sichtbarer Bruch auf jedem
   Telefon. Die Farbe gehoert deshalb auch auf das Wurzelelement. */
html {
  min-height: 100%;
  background: var(--oo-flaeche, #fcfcfd);
}