.pg_accExtended * { -webkit-transition: all .45s cubic-bezier(.23,1,.32,1); -moz-transition: all .45s cubic-bezier(.23,1,.32,1); -ms-transition: all .45s cubic-bezier(.23,1,.32,1); -o-transition: all .45s cubic-bezier(.23,1,.32,1); transition: all .45s cubic-bezier(.23,1,.32,1); } .pg_accExtended {border-radius: 4px; overflow: hidden; margin-bottom: 1.5%} .pg_accExtended.divingLines {margin-bottom: 0} .pg_accExtended .pg_accExtendedHeadline { border-top: 1px solid #000; font-family: var(--font-bold); list-style: none; } .pg_accExtended .pg_accExtendedHeadline button { outline-offset: -1px; cursor: pointer; position: relative; font-family: var(--font-bold); padding: 20px 35px 20px 10px; width: 100%; text-align: left; } .pg_accExtended button.pg_accExtendedSummary:before { content: ""; position: absolute; right: 10px; top: 25px; width: 20px; height: 20px; background-color: currentColor; -webkit-mask-image: var(--icon-arrow-right); mask-image: var(--icon-arrow-right); mask-size: contain; mask-repeat: no-repeat; } .pg_accExtended button h2, .pg_accExtended button h3, .pg_accExtended button h4, .pg_accExtended button h5, .pg_accExtended button h6 {font-size: 20px;margin: 0;font-family: var(--font-bold);} .pg_accExtended button:focus-visible { outline: 2px dashed currentColor !important; margin: 4px; } .pg_accExtended button[aria-expanded="true"]:before { transform: rotate(90deg); } .pg_accExtended .pg_accordion {overflow: hidden; padding-top: 10px} .pg_accExtended .pg_accordionInner {padding: 0 30px 30px 50px;overflow: hidden} .pg_accExtended .pg_accordionInner p {margin-top: 0} .pg_accExtended .pg_accExtendedHeadline button[aria-expanded="false"] ~ .pg_accordion { display: none; } .pg_accExtended.folderStart .pg_accordionInner > .ce_accordionSingle {margin-top: 20px; margin-bottom: 1%} @keyframes sweep { 0% {opacity: 0; margin-left: 0px} 100% {opacity: 1; margin-left: 0px} } /*--------------------------------------------*/ /*------- AKKORDEON EXTENDED ------------*/ /*-------------------------------------------- .pg_accExtended * { -webkit-transition: all .45s cubic-bezier(.23,1,.32,1); -moz-transition: all .45s cubic-bezier(.23,1,.32,1); -ms-transition: all .45s cubic-bezier(.23,1,.32,1); -o-transition: all .45s cubic-bezier(.23,1,.32,1); transition: all .45s cubic-bezier(.23,1,.32,1); } .pg_accExtended {border-radius: 4px; overflow: hidden; margin-bottom: 1.5%} .pg_accExtended.divingLines {margin-bottom: 0} .pg_accExtended.divingLines .pg_accExtendedHeadline summary {border-top: 1px solid #000;font-family: var(--font-bold);list-style: none} .pg_accExtended .pg_accExtendedHeadline summary {outline-offset: -1px;cursor: pointer; position: relative; font-family: var(--font-bold); padding: 20px 30px 20px 10px;} .pg_accExtended summary::-webkit-details-marker, .pg_accExtended summary::marker, .pg_accExtendedfolderStart summary::-webkit-details-marker, .pg_accExtendedfolderStart summary::marker {color: transparent;} .pg_accExtended .pg_accordion {overflow: hidden; padding-top: 10px} .pg_accExtended .pg_accordionInner {padding: 0 30px 30px 50px;overflow: hidden} .pg_accExtended .pg_accordionInner p {margin-top: 0} .pg_accExtended .pg_accExtendedHeadline summary:before {content: "";position: absolute;right: 20px;top: 18px;width: 20px;height: 20px;background-color: currentColor;-webkit-mask-image: var(--icon-arrow-right);mask-image: var(--icon-arrow-right);mask-size: contain;mask-repeat: no-repeat;} .pg_accExtended summary:focus-visible {outline: 2px dashed currentColor !important; margin: 4px} .pg_accExtended details[open]>summary:before {transform: rotate(90deg)} details[open] summary ~ * {animation: sweep .5s ease-in-out;} .pg_accExtended.folderStart .pg_accordionInner > .ce_accordionSingle {margin-top: 20px; margin-bottom: 1%} @keyframes sweep { 0% {opacity: 0; margin-left: 0px} 100% {opacity: 1; margin-left: 0px} }*/ /*--------------------------------------------*/ /*------- TIMETABLE WITH AKKORDEON -------------*/ .timetableFrame .pg_accExtended:after,.timetableFrame.active .pg_accExtended:before { -webkit-transition: all .45s cubic-bezier(.23,1,.32,1); -moz-transition: all .45s cubic-bezier(.23,1,.32,1); -ms-transition: all .45s cubic-bezier(.23,1,.32,1); -o-transition: all .45s cubic-bezier(.23,1,.32,1); transition: all .45s cubic-bezier(.23,1,.32,1); } .timetableFrame:after { -webkit-transition: all 3.85s cubic-bezier(.23,1,.32,1); -moz-transition: all 3.85s cubic-bezier(.23,1,.32,1); -ms-transition: all 3.85s cubic-bezier(.23,1,.32,1); -o-transition: all 3.85s cubic-bezier(.23,1,.32,1); transition: all 3.85s cubic-bezier(.23,1,.32,1); } .timetableFrame {position: relative; margin-left: 5vw;margin-right: 5vw;} .timetableFrame.bigdowner {margin-bottom: 6%} .timetableFrame:after {content: ""; width: 3px; height: 0; background-color: var(--red); position: absolute; left: calc(50% - 1.5px); top: 0; z-index: -2} .timetableFrame-head {background-color: var(--red);color: var(--white);width: 11vw;margin: 0 auto;text-align: center;padding: 10px;border-radius: var(--border-radius-button)} .timetableFrame-head h2, .timetableFrame-head p {margin: 0} .timetableFrame-head h2 {font-size: 22px; line-height: normal} .timetableFrame .pg_accExtended {opacity: 1; width: 40vw; background-color: var(--light-grey); margin: 2vw 0; position: relative; overflow: visible} .timetableFrame .pg_accExtended:nth-child(2n-1) {margin-left: 50vw} .timetableFrame .pg_accExtended.active {height: auto} .timetableFrame .pg_accExtended:after {content:""; height: 3px; width: 0vw; background-color: var(--red); position: absolute; top: 1.5vw; right: 0;z-index: -2} .timetableFrame .pg_accExtended:nth-child(2n-1):after {left: 1vw; right: inherit} .timetableFrame .pg_accExtended:before {content: ""; width: 20px; height: 20px; border-radius: 50%; border: 3px solid var(--red); background-color: var(--white); position: absolute; top: calc(1.5vw - 11px); right: calc(1vw - 13px); z-index: -1} .timetableFrame .pg_accExtended:nth-child(2n-1):before {left: calc(1vw - 13px); right: inherit} .timetableFrame .pg_accExtended .pg_accExtendedHeadline summary {font-family: var(--font-head);padding: 15px 30px;display: flex;align-items: center;flex-direction: row-reverse;justify-content: flex-end} .timetableFrame .pg_accExtended .pg_accExtendedHeadline summary:before {top: 40px; right: 25px} .timetableFrame .pg_accExtended .pg_accExtendedHeadline summary:after {font-family: var(--font-head);font-size: calc(8px + 3.5vw);line-height: calc(8px + 4vw);margin-right: 3vw;} .timetableFrame .pg_accExtended:nth-child(2) .pg_accExtendedHeadline summary:after {content: "1"} .timetableFrame .pg_accExtended:nth-child(3) .pg_accExtendedHeadline summary:after {content: "2"} .timetableFrame .pg_accExtended:nth-child(4) .pg_accExtendedHeadline summary:after {content: "3"} .timetableFrame.active:after {height: calc(100% - 4vw)} .pg_accExtended.actived {opacity: 1} .timetableFrame.active .pg_accExtended.actived:after {width: 5vw;right: -5vw} .timetableFrame.active .pg_accExtended.actived:before {right: calc(-5vw - 6px);} .timetableFrame.active .pg_accExtended.actived:nth-child(2n-1):before {left: calc(-5vw - 20px)} .timetableFrame.active .pg_accExtended.actived:nth-child(2n-1):after {left: -5vw} /*FIX FOR WINDOWS FIREFOX 06.06.25*/ body.win.firefox .timetableFrame.active .pg_accExtended.actived:before {right: calc(-5vw - 13px)} body.win.firefox .timetableFrame.active .pg_accExtended.actived:nth-child(2n-1):before {left: calc(-5vw - 13px)} @media(max-width: 799px) { /*ZEITPLAN*/ .timetableFrame-head {width: 70%} .timetableFrame .pg_accExtended {width: 100%; margin: 6% 0 100px 0!important; height: auto} .timetableFrame .pg_accExtended:after {display: none} .timetableFrame.active .pg_accExtended:before {right: calc(50% - 13px) !important;top: calc(50%);} .timetableFrame.active .pg_accExtended:nth-child(2n-1):before {left: calc(50% - 13px) !important;} .timetableFrame.active .pg_accExtended.actived:before {top: calc(100% + 30px);} .timetableFrame .pg_accExtended:last-child:before {display: none} .timetableFrame.active:after {height: calc(76%)} .timetableFrame .pg_accExtended h3 {font-size: 16px;line-height: normal;padding-top: 10px;} .timetableFrame .pg_accExtended .pg_accExtendedHeadline summary:after {font-size: 26px; color: #eb0115} .timetableFrame .pg_accExtended .pg_accExtendedHeadline summary:before {right: 12px; top: 24px} }