/* Button-System Luisa Herrmann, nach dem Vorbild choroo.webflow.io:
   kompakte Pille, Text rollt beim Hover nach oben, der Pfeil fliegt raus und ein neuer kommt rein,
   die Fläche wechselt die Farbe. Klassen setzt lh-buttons.js. */
.lh-btn-roll{--b-bg:#D14B26;--b-tx:#FBFAF8;--b-rand:#D14B26;--b-bg-h:#342839;--b-tx-h:#FBFAF8;--b-rand-h:#342839}
.lh-btn-roll.lh-btn--aufdunkel{--b-bg-h:#FBFAF8;--b-tx-h:#342839;--b-rand-h:#FBFAF8}
.lh-panel .lh-btn-roll:not(.lh-btn--outline):not(.lh-btn--dunkel),.lh-dunkel .lh-btn-roll:not(.lh-btn--outline):not(.lh-btn--dunkel){--b-bg-h:#FBFAF8;--b-tx-h:#342839;--b-rand-h:#FBFAF8}
.lh-btn-roll.lh-btn--dunkel{--b-bg:#342839;--b-tx:#FBFAF8;--b-rand:#342839;--b-bg-h:#D14B26;--b-tx-h:#FBFAF8;--b-rand-h:#D14B26}
.lh-btn-roll.lh-btn--outline{--b-bg:transparent;--b-tx:#342839;--b-rand:#342839;--b-bg-h:#342839;--b-tx-h:#FBFAF8;--b-rand-h:#342839}
.lh-btn-roll.lh-btn--outline.lh-btn--hell{--b-tx:#FBFAF8;--b-rand:rgba(251,250,248,.75);--b-bg-h:#FBFAF8;--b-tx-h:#342839;--b-rand-h:#FBFAF8}

html body .lh-btn-roll.lh-btn-roll,
html body #page-container .lh-btn-roll.lh-btn-roll.lh-btn-roll,
html body #page-container header#main-header #et-top-navigation a.lh-btn-roll.lh-btn-roll{
  display:inline-flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:center!important;gap:10px!important;
  width:auto!important;height:auto!important;min-height:52px!important;margin:0!important;padding:15px 26px!important;
  border:0!important;border-radius:100px!important;box-shadow:inset 0 0 0 1.5px var(--b-rand)!important;
  background:var(--b-bg)!important;background-color:var(--b-bg)!important;color:var(--b-tx)!important;
  font-family:'Bricolage Grotesk',sans-serif!important;font-size:16px!important;font-weight:600!important;line-height:1.2!important;letter-spacing:-.005em!important;
  text-transform:none!important;text-decoration:none!important;white-space:nowrap;cursor:pointer;-webkit-appearance:none;appearance:none;
  transition:background-color .5s ease,color .5s ease,box-shadow .5s ease!important}
html body .lh-btn-roll.lh-btn-roll::before,html body .lh-btn-roll.lh-btn-roll::after{display:none!important;content:none!important}
html body .lh-btn-roll.lh-btn-roll:hover,html body .lh-btn-roll.lh-btn-roll:focus-visible,
html body #page-container .lh-btn-roll.lh-btn-roll.lh-btn-roll:hover,html body #page-container .lh-btn-roll.lh-btn-roll.lh-btn-roll:focus-visible,
html body #page-container header#main-header #et-top-navigation a.lh-btn-roll.lh-btn-roll:hover{
  background:var(--b-bg-h)!important;background-color:var(--b-bg-h)!important;color:var(--b-tx-h)!important;box-shadow:inset 0 0 0 1.5px var(--b-rand-h)!important}
html body .lh-btn-roll.lh-btn-roll:focus-visible{outline:2px solid #D14B26;outline-offset:3px}
html body #page-container header#main-header #et-top-navigation a.lh-btn-roll.lh-btn-roll{min-height:46px!important;padding:12px 22px!important;font-size:15px!important}

.lh-btxt{position:relative;display:block;overflow:hidden}
.lh-btxt>span{display:block;transition:transform .5s cubic-bezier(.65,0,.35,1)}
.lh-btxt>span+span{position:absolute;left:0;right:0;top:0;transform:translateY(110%)}
.lh-btn-roll:hover .lh-btxt>span:first-child,.lh-btn-roll:focus-visible .lh-btxt>span:first-child{transform:translateY(-110%)}
.lh-btn-roll:hover .lh-btxt>span+span,.lh-btn-roll:focus-visible .lh-btxt>span+span{transform:translateY(0)}

.lh-bpf{position:relative;display:block;flex:0 0 auto;width:14px;height:14px;overflow:hidden}
.lh-bpf svg{position:absolute;left:0;top:0;width:14px;height:14px;transition:transform .5s cubic-bezier(.65,0,.35,1)}
.lh-bpf svg+svg{transform:translate(-100%,100%)}
.lh-btn-roll:hover .lh-bpf svg:first-child,.lh-btn-roll:focus-visible .lh-bpf svg:first-child{transform:translate(100%,-100%)}
.lh-btn-roll:hover .lh-bpf svg+svg,.lh-btn-roll:focus-visible .lh-bpf svg+svg{transform:translate(0,0)}

@media (max-width:767px){
  html body .lh-btn-roll.lh-btn-roll,html body #page-container .lh-btn-roll.lh-btn-roll.lh-btn-roll{max-width:100%;white-space:normal;text-align:left;padding:14px 22px!important;min-height:50px!important;font-size:15.5px!important}
  .et-l--footer .et_pb_row{flex-wrap:wrap!important}
  .et-l--footer .et_pb_row>.et_pb_column{width:100%!important;max-width:100%!important;flex:0 0 100%!important;margin-right:0!important}
}
@media (prefers-reduced-motion:reduce){.lh-btxt>span,.lh-bpf svg{transition:none!important}}

/* Eyebrows als Pille (Blüte + Text), seitenweit. Klassen setzt lh-buttons.js */
.lh-eyebrow.lh-eyebrow{display:inline-flex!important;width:fit-content!important;max-width:100%;align-items:center;gap:8px!important;padding:7px 16px 7px 11px!important;border-radius:99px;background:rgba(52,40,57,.07);margin-top:0!important;margin-bottom:0!important;line-height:1.3!important}
.lh-eyebrow.lh-eyebrow--hell{background:rgba(251,250,248,.12)}
.lh-eyebrow.lh-eyebrow--mitte{margin-left:auto!important;margin-right:auto!important}
.lh-eyebrow img{width:15px!important;height:15px!important;margin:0!important;flex:0 0 auto}
.lh-eyebrow .dipi-td-content{margin:0!important;padding:0!important;line-height:1.3!important;width:auto!important;flex:0 1 auto!important}
.lh-eyebrow .dipi-td-decoration{margin:0!important;width:auto!important;flex:0 0 auto!important}
.lh-eyebrow .dipi-td-decoration:empty,.lh-eyebrow .dipi-td-second{display:none!important}