@media screen {

html.trenner-akzent {
  --ak-grund: #f4f2ed;
  --ak-tinte: #1f1d1b;
  --ak-leise: #55504a;
  --ak-blass: #6a645c;
  --ak-linie: rgba(120, 108, 98, .30);
  --ak-linie-fein: rgba(120, 108, 98, .20);
  --ak-blau-f: #c1d5f2;
  --ak-blau-d: #a3c0ea;
  --ak-blau-l: 84, 139, 222;
  --ak-blau-tinte: #1d2c44;
}

html.trenner-akzent,
html.trenner-akzent body,
html.trenner-akzent.sf-allein,
html.trenner-akzent.sf-allein body { background: var(--ak-grund); }

html.trenner-akzent .sf { background: var(--ak-grund); color: var(--ak-tinte); }
html.trenner-akzent .sf a { color: var(--ak-tinte); }
html.trenner-akzent .sf-kopf,
html.trenner-akzent .sf-offen,
html.trenner-akzent .sf-klein { color: var(--ak-blass); }
html.trenner-akzent .sf-besch { color: var(--ak-leise); }
html.trenner-akzent .sf-innen { isolation: isolate; }

html.trenner-akzent .sf { box-shadow: 0 -1px 0 0 var(--ak-linie); }
html.trenner-akzent.sf-allein .sf { box-shadow: none; }

html.trenner-akzent .sf-kontakt { position: relative; }
html.trenner-akzent .sf-kontakt:before {
  content: "";
  position: absolute;
  top: .15em; bottom: .6em;
  left: 1.35em;
  width: 1px;
  background: var(--ak-linie);
}
@media (max-width: 799px) {
  html.trenner-akzent .sf-kontakt:before {
    top: -1.85em; bottom: auto; left: 0; right: 0;
    width: auto; height: 1px;
  }
}

html.trenner-akzent .sf-liste a {
  display: block;
  width: -webkit-fit-content; width: -moz-fit-content; width: fit-content;
  position: relative;
}
html.trenner-akzent .sf-liste a:before {
  top: -.45em; bottom: -.5em; left: -.6em; right: -.6em;
  border-radius: 5px;
}
html.trenner-akzent .sf-liste a { --ak-f: #bfe9c9; --ak-d: #9fdcb2; --ak-l: 76, 201, 119; }
html.trenner-akzent .sf .sf-name { border-bottom-color: var(--ak-linie); }
html.trenner-akzent .sf a[aria-current] .sf-name,
html.trenner-akzent .sf a:hover .sf-name,
html.trenner-akzent .sf a:active .sf-name,
html.trenner-akzent .sf a:focus-visible .sf-name { color: var(--ak-tinte); border-bottom-color: transparent; }
html.trenner-akzent .sf a[aria-current] .sf-besch { color: var(--ak-blau-tinte); }
html.trenner-akzent .sf a:focus { outline: none; }

@media (max-width: 36rem) {
  html.trenner-akzent.a4-einblatt .layout { padding-bottom: 2.5rem; }
}

html.trenner-akzent .letterhead .name a {
  position: relative; isolation: isolate;
  --ak-f: #f9d4b4; --ak-d: #f5bd8f; --ak-l: 242, 143, 64;
}
html.trenner-akzent .letterhead .name a:before {
  top: -.14em; bottom: -.1em; left: -.45em; right: -.2em;
  border-radius: 5px;
}

html.trenner-akzent .sheet .more a {
  position: relative; isolation: isolate;
  text-decoration: underline;
  -webkit-text-decoration-color: rgba(31, 29, 27, .45); text-decoration-color: rgba(31, 29, 27, .45);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  --ak-f: #bde9eb; --ak-d: #98dade; --ak-l: 51, 195, 204;
}
html.trenner-akzent .sheet .more a:before {
  top: -.14em; bottom: -.1em; left: -.32em; right: -.32em;
  border-radius: 4px;
}
html.trenner-akzent .letterhead .name a:focus,
html.trenner-akzent .sheet .more a:focus { outline: none; }
html.trenner-akzent .sheet .more a:hover,
html.trenner-akzent .sheet .more a:active,
html.trenner-akzent .sheet .more a:focus-visible { text-decoration-color: transparent; }

html.trenner-akzent .galerie-an .bilder-pfeil {
  isolation: isolate;
  --ak-f: #ddc9f3; --ak-d: #c9aeea; --ak-l: 166, 118, 236;
}
html.trenner-akzent .galerie-an .bilder-pfeil:before {
  top: 50%; left: 50%;
  width: 1.5rem; height: 1.5rem; margin: -.75rem 0 0 -.75rem;
  border-radius: 50%;
}
html.trenner-akzent .bilder button:focus { outline: none; }

html.trenner-akzent .bilder-punkte button {
  --ak-f: #ddc9f3; --ak-d: #c9aeea; --ak-l: 166, 118, 236;
}
html.trenner-akzent .bilder-punkte button:before {
  border-color: var(--ak-leise);
  background: transparent;
  box-shadow: 0 0 0 0 transparent;
}
html.trenner-akzent .bilder-punkte button[aria-current="true"]:before {
  background: var(--ak-blau-f);
  border-color: rgb(var(--ak-blau-l));
}

html.trenner-akzent .sf-liste a:before,
html.trenner-akzent .letterhead .name a:before,
html.trenner-akzent .sheet .more a:before,
html.trenner-akzent .galerie-an .bilder-pfeil:before,
html.trenner-akzent #katalog .mehrere .bild-pfeil:after,
html.trenner-akzent #katalog .kopf .start:after,
html.trenner-akzent #katalog .teile a:before {
  content: "";
  position: absolute; z-index: -1;
  -webkit-box-sizing: border-box; box-sizing: border-box;
  background: transparent;
  background: var(--ak-feld, transparent);
  box-shadow: 0 0 0 0 transparent;
  box-shadow: var(--ak-rand, 0 0 0 0 transparent), var(--ak-ring, 0 0 0 0 transparent);
}
@media (prefers-reduced-motion: no-preference) {
  html.trenner-akzent .sf-liste a:before,
  html.trenner-akzent .letterhead .name a:before,
  html.trenner-akzent .sheet .more a:before,
  html.trenner-akzent .galerie-an .bilder-pfeil:before,
  html.trenner-akzent #katalog .mehrere .bild-pfeil:after,
  html.trenner-akzent #katalog .kopf .start:after,
  html.trenner-akzent #katalog .teile a:before,
  html.trenner-akzent .bilder-punkte button:before {
    -webkit-transition: background-color .14s ease, box-shadow .14s ease, border-color .14s ease;
    transition: background-color .14s ease, box-shadow .14s ease, border-color .14s ease;
  }
  html.trenner-akzent .sf-liste a:active:before,
  html.trenner-akzent .letterhead .name a:active:before,
  html.trenner-akzent .sheet .more a:active:before,
  html.trenner-akzent .galerie-an .bilder-pfeil:active:before,
  html.trenner-akzent #katalog .mehrere .bild-pfeil:active:after,
  html.trenner-akzent #katalog .kopf .start:active:after,
  html.trenner-akzent #katalog .teile a:active:before,
  html.trenner-akzent .bilder-punkte button:active:before {
    -webkit-transition-duration: 0s; transition-duration: 0s;
  }
}

@media (hover: hover) {
  html.trenner-akzent :where(.sf-liste a, .letterhead .name a, .sheet .more a, .galerie-an .bilder-pfeil, #katalog .mehrere .bild-pfeil, #katalog .kopf .start, #katalog .teile a):hover {
    --ak-feld: var(--ak-f);
    --ak-rand: inset 0 0 0 1px rgb(var(--ak-l)), inset 0 0 0 2px rgba(var(--ak-l), .4);
  }
  html.trenner-akzent .bilder-punkte button:not([aria-current="true"]):hover:before {
    background: var(--ak-f);
    border-color: rgb(var(--ak-l));
    box-shadow: 0 0 0 3px rgba(var(--ak-l), .32);
  }
}
html.trenner-akzent :where(.sf-liste a, .letterhead .name a, .sheet .more a, .galerie-an .bilder-pfeil, #katalog .mehrere .bild-pfeil, #katalog .kopf .start, #katalog .teile a):focus-visible {
  --ak-feld: var(--ak-f);
  --ak-rand: inset 0 0 0 1px rgb(var(--ak-l)), inset 0 0 0 2px rgba(var(--ak-l), .4);
  --ak-ring: 0 0 0 2px var(--ak-tinte);
}
html.trenner-akzent .bilder-punkte button:focus-visible:before {
  box-shadow: 0 0 0 2px var(--ak-grund), 0 0 0 4px var(--ak-tinte);
}
html.trenner-akzent .sf-liste a[aria-current] {
  --ak-feld: var(--ak-blau-f);
  --ak-rand: inset 0 0 0 1px rgb(var(--ak-blau-l)), inset 0 0 0 2px rgba(var(--ak-blau-l), .4);
}
html.trenner-akzent :where(.sf-liste a, .letterhead .name a, .sheet .more a, .galerie-an .bilder-pfeil, #katalog .mehrere .bild-pfeil, #katalog .kopf .start, #katalog .teile a):active {
  --ak-feld: var(--ak-d);
  --ak-rand: inset 0 0 0 1px rgb(var(--ak-l)), inset 0 0 0 2px rgba(var(--ak-l), .75);
}
html.trenner-akzent .sf-liste a[aria-current]:active {
  --ak-feld: var(--ak-blau-d);
  --ak-rand: inset 0 0 0 1px rgb(var(--ak-blau-l)), inset 0 0 0 2px rgba(var(--ak-blau-l), .75);
}
html.trenner-akzent .bilder-punkte button:not([aria-current="true"]):active:before {
  background: rgb(var(--ak-l));
  border-color: rgb(var(--ak-l));
  box-shadow: 0 0 0 3px rgba(var(--ak-l), .55);
}

@media (max-width: 999px) {
  html.trenner-akzent #katalog { padding-left: 22px; padding-right: 22px; }
}

html.trenner-akzent #katalog .teile a {
  position: relative; isolation: isolate;
  border-bottom-color: var(--ak-linie);
  --ak-f: #bfe9c9; --ak-d: #9fdcb2; --ak-l: 76, 201, 119;
}
html.trenner-akzent #katalog .teile a:before {
  top: -.35em; bottom: -.4em; left: -.55em; right: -.55em;
  border-radius: 5px;
}
html.trenner-akzent #katalog .teile a:hover,
html.trenner-akzent #katalog .teile a:active,
html.trenner-akzent #katalog .teile a:focus-visible { border-bottom-color: transparent; }
html.trenner-akzent #katalog .teile a:focus { outline: none; }

html.trenner-akzent #katalog .kopf .start {
  isolation: isolate;
  --ak-f: #f9d4b4; --ak-d: #f5bd8f; --ak-l: 242, 143, 64;
}
html.trenner-akzent #katalog .kopf .start:after {
  top: -.3em; bottom: -.3em; left: -.5em; right: -.5em;
  border-radius: 5px;
}
html.trenner-akzent #katalog .kopf .start:hover { text-decoration: none; }
html.trenner-akzent #katalog .kopf .start:focus { outline: none; }

html.trenner-akzent #katalog .mehrere .bild-pfeil {
  --ak-f: #ddc9f3; --ak-d: #c9aeea; --ak-l: 166, 118, 236;
  isolation: isolate;
}
html.trenner-akzent #katalog .mehrere .bild-pfeil:after {
  top: 50%; left: 50%;
  width: 1.5em; height: 1.5em; margin: -.75em 0 0 -.75em;
  border-radius: 50%;
}
html.trenner-akzent #katalog .bild-pfeil:focus { outline: none; }
html.trenner-akzent #katalog .mehrere .bild-pfeil:focus-visible,
html.trenner-akzent #katalog .mehrere .bild-pfeil:active { opacity: 1; }

html.trenner-akzent #katalog .mehrere .bild-zaehler { opacity: 1; color: var(--ak-leise); }
html.trenner-akzent #katalog .bild-punkt { border-color: var(--ak-leise); }
html.trenner-akzent #katalog .bild-punkt.ist-aktiv {
  background: var(--ak-blau-f);
  border-color: rgb(var(--ak-blau-l));
}

@media (min-height: 520px) and (min-width: 640px), (max-width: 639px) {
  html.trenner-akzent .lb-dim:before {
    content: ""; position: absolute;
    left: 0; right: 0;
    top: 56px;
    top: calc(var(--lb-knopf) + 8px);
    height: 1px;
    background: var(--ak-linie);
  }
}
@media (max-width: 639px) {
  html.trenner-akzent .lb-schmal .lb-dim:before { top: 56px; top: calc(var(--lb-knopf) + 8px); }
  html.trenner-akzent .lb-schmal.lb-mehrere .lb-dim:after {
    content: ""; position: absolute;
    left: 0; right: 0;
    bottom: 56px;
    bottom: calc(var(--lb-knopf) + 8px);
    height: 1px;
    background: var(--ak-linie);
  }
}
html.trenner-akzent .lb-c2,
html.trenner-akzent .lb-c3,
html.trenner-akzent .lb-zaehler,
html.trenner-akzent .lb-werk-zahl { color: var(--ak-leise); }

html.trenner-akzent .lb-knopf,
html.trenner-akzent .lb-werke .lb-knopf {
  --ak-f: #ddc9f3; --ak-d: #c9aeea; --ak-l: 166, 118, 236;
}
html.trenner-akzent .lb-zu { --ak-f: #f9d4b4; --ak-d: #f5bd8f; --ak-l: 242, 143, 64; }
html.trenner-akzent .lb-werke .lb-knopf { --ak-f: #bfe9c9; --ak-d: #9fdcb2; --ak-l: 76, 201, 119; }
html.trenner-akzent .lb-knopf:before {
  content: ""; position: absolute;
  top: 50%; left: 50%;
  width: 36px; height: 36px; margin: -18px 0 0 -18px;
  -webkit-box-sizing: border-box; box-sizing: border-box;
  border-radius: 50%;
  pointer-events: none;
  background: transparent;
  background: var(--ak-feld, transparent);
  box-shadow: 0 0 0 0 transparent;
  box-shadow: var(--ak-rand, 0 0 0 0 transparent), var(--ak-ring, 0 0 0 0 transparent);
}
html.trenner-akzent .lb-knopf svg { position: relative; z-index: 1; -webkit-transform: scale(.82); transform: scale(.82); }
html.trenner-akzent .lb-knopf:focus,
html.trenner-akzent .lb-knopf:hover { outline: none; }
@media (prefers-reduced-motion: no-preference) {
  html.trenner-akzent .lb-knopf:before {
    -webkit-transition: background-color .14s ease, box-shadow .14s ease;
    transition: background-color .14s ease, box-shadow .14s ease;
  }
  html.trenner-akzent .lb-knopf:active:before { -webkit-transition-duration: 0s; transition-duration: 0s; }
}
@media (hover: hover) {
  html.trenner-akzent .lb-knopf:hover {
    --ak-feld: var(--ak-f);
    --ak-rand: inset 0 0 0 1px rgb(var(--ak-l)), inset 0 0 0 2px rgba(var(--ak-l), .4);
  }
}
html.trenner-akzent .lb-knopf:focus-visible {
  --ak-feld: var(--ak-f);
  --ak-rand: inset 0 0 0 1px rgb(var(--ak-l)), inset 0 0 0 2px rgba(var(--ak-l), .4);
  --ak-ring: 0 0 0 2px var(--ak-tinte);
}
html.trenner-akzent .lb-knopf:active {
  --ak-feld: var(--ak-d);
  --ak-rand: inset 0 0 0 1px rgb(var(--ak-l)), inset 0 0 0 2px rgba(var(--ak-l), .75);
}

html.trenner-akzent.raum,
html.trenner-akzent.raum body { background: #5d5d5d; }

html.trenner-akzent .steuerung button,
html.trenner-akzent a.name {
  isolation: isolate;
  --ak-f: #f9d4b4; --ak-d: #f5bd8f; --ak-l: 242, 143, 64;
}
html.trenner-akzent .steuerung button { position: relative; }
html.trenner-akzent .steuerung button.pfeil { --ak-f: #ddc9f3; --ak-d: #c9aeea; --ak-l: 166, 118, 236; }
html.trenner-akzent #impressumLink { --ak-f: #bfe9c9; --ak-d: #9fdcb2; --ak-l: 76, 201, 119; }
html.trenner-akzent #infoKnopf { --ak-f: #bde9eb; --ak-d: #98dade; --ak-l: 51, 195, 204; }
html.trenner-akzent .steuerung button:before,
html.trenner-akzent a.name:before {
  content: "";
  position: absolute; z-index: -1;
  top: 6px; bottom: 6px; left: 1px; right: 1px;
  -webkit-box-sizing: border-box; box-sizing: border-box;
  border-radius: 5px;
  pointer-events: none;
  background: transparent;
  background: var(--ak-feld, transparent);
  box-shadow: 0 0 0 0 transparent;
  box-shadow: var(--ak-rand, 0 0 0 0 transparent), var(--ak-ring, 0 0 0 0 transparent);
}
html.trenner-akzent .steuerung button.pfeil:before {
  top: 50%; left: 50%; bottom: auto; right: auto;
  width: 28px; height: 28px; margin: -13px 0 0 -14px;
  border-radius: 50%;
}
html.trenner-akzent a.name:before { top: 5px; bottom: 5px; left: 4px; right: 4px; }
html.trenner-akzent a.name.titel:before { top: -5px; bottom: -5px; left: -8px; right: -8px; }
html.trenner-akzent .steuerung button:focus,
html.trenner-akzent a.name:focus { outline: none; }
html.trenner-akzent a.name:hover,
html.trenner-akzent a.name:focus { text-decoration: none; }
@media (prefers-reduced-motion: no-preference) {
  html.trenner-akzent .steuerung button:before,
  html.trenner-akzent a.name:before {
    -webkit-transition: background-color .14s ease, box-shadow .14s ease;
    transition: background-color .14s ease, box-shadow .14s ease;
  }
  html.trenner-akzent .steuerung button:active:before,
  html.trenner-akzent a.name:active:before { -webkit-transition-duration: 0s; transition-duration: 0s; }
}
@media (hover: hover) {
  html.trenner-akzent .steuerung button:hover,
  html.trenner-akzent a.name:hover {
    --ak-feld: var(--ak-f);
    --ak-rand: inset 0 0 0 1px rgb(var(--ak-l)), inset 0 0 0 2px rgba(var(--ak-l), .4);
    color: #1f1d1b; opacity: 1;
  }
}
html.trenner-akzent .steuerung button:focus-visible,
html.trenner-akzent a.name:focus-visible {
  --ak-feld: var(--ak-f);
  --ak-rand: inset 0 0 0 1px rgb(var(--ak-l)), inset 0 0 0 2px rgba(var(--ak-l), .4);
  --ak-ring: 0 0 0 2px #efece6;
  color: #1f1d1b; opacity: 1;
}
html.trenner-akzent #infoKnopf[aria-expanded="true"] {
  --ak-feld: var(--ak-blau-f);
  --ak-rand: inset 0 0 0 1px rgb(var(--ak-blau-l)), inset 0 0 0 2px rgba(var(--ak-blau-l), .4);
  color: var(--ak-blau-tinte); opacity: 1;
}
html.trenner-akzent .steuerung button:active,
html.trenner-akzent a.name:active {
  --ak-feld: var(--ak-d);
  --ak-rand: inset 0 0 0 1px rgb(var(--ak-l)), inset 0 0 0 2px rgba(var(--ak-l), .75);
  color: #1f1d1b; opacity: 1;
}
html.trenner-akzent #infoKnopf[aria-expanded="true"]:active {
  --ak-feld: var(--ak-blau-d);
  --ak-rand: inset 0 0 0 1px rgb(var(--ak-blau-l)), inset 0 0 0 2px rgba(var(--ak-blau-l), .75);
}

}