:where(html) {
  --bild-breite: 15.5rem;
  --bild-format: 0.8;
  --bild-ecke: 0px;
  --bild-rahmen: 0px;
  --bild-oben: 0rem;
  --bild-fokus-x: 50%;
  --bild-fokus-y: 50%;
}
:where(html.bild-kopf) { --bild-breite: 6.5rem; --bild-format: 1; --bild-abstand: 1.5rem; --bild-oben: 0.5rem; }

.bilder {
  --g-tinte: var(--ink-dark);
  --g-leise: var(--ink-dark-soft);
  --g-blass: var(--muted-dark);
  --g-linie: var(--rule-dark);
}
.sheet .bilder {
  --g-tinte: var(--ink);
  --g-leise: var(--ink-soft);
  --g-blass: var(--muted);
  --g-linie: var(--rule);
}

.layout.mit-bildern {
  max-width: none;
  grid-template-columns: minmax(0, 41rem) 20rem;
  grid-template-columns: minmax(0, 41rem) auto;
  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
  gap: clamp(2rem, 5vw, 4rem);
  gap: var(--bild-abstand, clamp(2rem, 5vw, 4rem));
}

.bilder {
  margin: 0;
  color: #2b2420;
  color: var(--g-tinte);
  font-family: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-family: var(--font-mono);
}

.bilder {
  width: 20rem;
  width: calc(var(--bild-breite, 15.5rem) + 4.5rem);
  margin-top: 0;
  margin-top: var(--bild-oben, 0rem);
}
@media (min-width: 56.01rem) {
  .bilder {
    position: -webkit-sticky; position: sticky;
    top: clamp(2.5rem, 9vh, 5.5rem);
    top: calc(clamp(2.5rem, 9vh, 5.5rem) + var(--bild-oben, 0rem));
  }
}

.bilder-buehne { position: relative; padding: 0 2.25rem; }
.bilder-rahmen { position: relative; }
.bilder .bild { margin: 0 0 1rem; }
.bilder .bild img { display: block; width: 100%; height: auto; }

.galerie-an .bilder-rahmen {
  padding-top: 125%;
  padding-top: calc(100% / var(--bild-format, 0.8));
  overflow: hidden;
  border-radius: 0;
  border-radius: var(--bild-ecke, 0px);
}
.galerie-an .bild {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: 0;
  border-radius: inherit; overflow: hidden;
  -webkit-box-sizing: border-box; box-sizing: border-box;
  opacity: 0; visibility: hidden;
  -webkit-transition: opacity .35s ease, visibility 0s linear .35s;
  transition: opacity .35s ease, visibility 0s linear .35s;
}
.galerie-an .bild.ist-aktiv {
  opacity: 1; visibility: visible;
  -webkit-transition: opacity .35s ease; transition: opacity .35s ease;
}
.galerie-an .bild img {
  width: 100%; height: 100%;
  -o-object-fit: cover; object-fit: cover;
  -o-object-position: 50% 50%; object-position: 50% 50%;
  -o-object-position: var(--bild-fokus-x, 50%) var(--bild-fokus-y, 50%);
  object-position: var(--bild-fokus-x, 50%) var(--bild-fokus-y, 50%);
}
.galerie-an .bild:not(.platzhalter) {
  border: 0 solid rgba(95, 86, 79, .35);
  border: var(--bild-rahmen, 0px) solid var(--g-linie);
}
@media (prefers-reduced-motion: reduce) {
  .galerie-an .bild, .galerie-an .bild.ist-aktiv { -webkit-transition: none; transition: none; }
}
.bilder .bild-link { display: block; }
.galerie-an .bild-link { height: 100%; }
.bilder .bild-link:focus { outline: 2px solid #2b2420; outline: 2px solid var(--g-tinte); outline-offset: -2px; }
.bilder .bild-link:focus:not(:focus-visible) { outline: none; }

.bild.platzhalter {
  display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;
  -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
  min-height: 12rem;
  padding: 0.5rem;
  border: 1px dashed rgba(95, 86, 79, .35);
  border: 1px dashed var(--g-linie);
  border-radius: 0;
  border-radius: var(--bild-ecke, 0px);
  color: #6f655c;
  color: var(--g-blass);
  font-size: 0.72rem; letter-spacing: 0.08em; text-align: center;
  -webkit-box-sizing: border-box; box-sizing: border-box;
}
.galerie-an .bild.platzhalter { min-height: 0; }
html.bild-kopf .bild.platzhalter {
  padding: 0.25rem; font-size: 0.62rem; letter-spacing: 0.02em; line-height: 1.5;
  overflow-wrap: break-word; word-wrap: break-word;
}
.bilder-pfeil, .bilder-punkte { display: none; }
.galerie-an .bilder-pfeil {
  display: block;
  position: absolute; top: 50%; margin-top: -1.5rem;
  width: 2.25rem; height: 3rem; padding: 0;
  border: 0; background: none; cursor: pointer;
  color: #5f564f;
  color: var(--g-leise);
  font-family: var(--font-mono); font-size: 1.5rem; line-height: 3rem; text-align: center;
  -webkit-appearance: none; appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.galerie-an .bilder-pfeil:hover { color: #2b2420; color: var(--g-tinte); }
.bilder-zurueck { left: 0; }
.bilder-weiter  { right: 0; }

.galerie-an .bilder-punkte { display: block; margin: 0.9rem 0 0; padding: 0; text-align: center; line-height: 0; white-space: nowrap; }
.bilder-punkte button {
  display: inline-block; width: 1.5rem; height: 1.5rem; margin: 0 0.1rem; padding: 0;
  border: 0; background: none; cursor: pointer; vertical-align: middle;
  -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent;
}
.bilder-punkte button:before {
  content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  border: 1px solid #5f564f;
  border: 1px solid var(--g-leise);
  background: transparent;
}
.bilder-punkte button[aria-current="true"]:before {
  background: #2b2420; background: var(--g-tinte);
  border-color: #2b2420; border-color: var(--g-tinte);
}

.bilder button:focus { outline: 1px solid #2b2420; outline: 1px solid var(--g-tinte); outline-offset: 2px; }
.bilder button:focus:not(:focus-visible) { outline: none; }

html.bild-kopf .bilder { position: relative; top: auto; }
html.bild-kopf .bilder-buehne { position: static; padding: 0; }
html.bild-kopf .galerie-an .bilder-pfeil {
  top: auto; bottom: 0; margin-top: 0;
  width: 1.5rem; height: 1.5rem;
  font-size: 1.2rem; line-height: 1.5rem;
}
html.bild-kopf .galerie-an .bilder-zurueck { left: calc(50% - var(--bilder-n, 3) * 0.5625rem - 1.625rem); }
html.bild-kopf .galerie-an .bilder-weiter { right: calc(50% - var(--bilder-n, 3) * 0.5625rem - 1.625rem); }
html.bild-kopf .galerie-an .bilder-punkte { margin-top: 0.5rem; }
html.bild-kopf .bilder-punkte button { width: 1.125rem; margin: 0; }

html.bild-kopf .layout > .bilder { display: none; }

html.bild-kopf .layout.mit-bildern { grid-template-columns: minmax(0, 41rem); }
html.bild-kopf .letterhead .bilder {
  float: right;
  width: 6.5rem;
  width: var(--bild-breite, 6.5rem);
  margin: 0.5rem 0 1.5rem 1.5rem;
  margin: var(--bild-oben, 0.5rem) 0 var(--bild-abstand, 1.5rem) var(--bild-abstand, 1.5rem);
}
html.bild-kopf .letterhead hr { clear: right; }
html.bild-kopf .letterhead .practice { text-wrap: balance; }

@media (max-width: 56rem) {
  .layout.mit-bildern,
  html.bild-kopf .layout.mit-bildern { grid-template-columns: minmax(0, 1fr); }
  .layout.mit-bildern .bilder { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; }
  .layout > .bilder {
    width: 100%; max-width: 21rem; max-width: calc(var(--bild-breite, 15.5rem) + 5.5rem);
    margin: 0 auto;
    margin-top: var(--bild-oben, 0rem);
  }
}
@media (max-width: 36rem) {
  html.bild-kopf .letterhead .bilder {
    float: none;
    max-width: 100%;
    margin: var(--bild-oben, 0.5rem) 0 var(--bild-abstand, 1.5rem);
  }
}

@media print {
  .bilder-pfeil, .bilder-punkte { display: none !important; }
}