/* Theme Name: TwentyTwelve Child Description: Mattheis Twentytwelve Childtheme Author: Siegbert Mattheis, Japheth Kohl und Tobias Mayer Author URI: https://www.mattheis-berlin.de Template: twentytwelve Version: 1.0 Tags: __ __ _______ _______ _ _ ______ _____ _____ | \/ | /\|__ __|__ __| | | | ____|_ _|/ ____| | \ / | / \ | | | | | |__| | |__ | | | (___ | |\/| | / /\ \ | | | | | __ | __| | | \___ \ | | | |/ ____ \| | | | | | | | |____ _| |_ ____) | |_| |_/_/ \_\_| |_| |_| |_|______|_____|_____/ __ ________ _____ ____ ______ _____ ______ _ _ _______ _ _ _____ \ \ / / ____| __ \| _ \| ____| /\ / ____| ____| \ | |__ __| | | | __ \ \ \ /\ / /| |__ | |__) | |_) | |__ / \ | | __| |__ | \| | | | | | | | |__) | \ \/ \/ / | __| | _ /| _ <| __| / /\ \| | |_ | __| | . ` | | | | | | | _ / \ /\ / | |____| | \ \| |_) | |____ / ____ \ |__| | |____| |\ | | | | |__| | | \ \ \/ \/ |______|_| \_\____/|______/_/ \_\_____|______|_| \_| |_| \____/|_| \_\ ____ ______ _____ _ _____ _ _ | _ \| ____| __ \| | |_ _| \ | | | |_) | |__ | |__) | | | | | \| | | _ <| __| | _ /| | | | | . ` | | |_) | |____| | \ \| |____ _| |_| |\ | |____/|______|_| \_\______|_____|_| \_|–––––––––––––––––––––––––––––––––––––––––––––––––*/ /*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/ /* Variables General Page Layout Content WPBakery Page Builder Fonts Change Font Size Header Sticky Header Changes Header Image Buttons Breadcrumbs Homepage / Startseite Kategorie Seiten Beiträge Kontaktformular Contact Box Sidebar Search Results / Archives Entry Meta Footer Copyright Line To Top Button */ /*–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––*/ /*------------------------------- Variables ------------------------------*/ :root { /* Color */ --light-grey: #ededed; --grey-background: #757372; --grey-text: #585958; --grey-headline: #939190; --dark-grey: #333; --grey-button: #efeff0; --green: #43c30f; --orange-kf: #BC5806; --orange-headlines: #f4953f; --orange-headlines: #e07719; --purple-kf: #773876; --light-purple-kf: #ffebfe; --mint-kf: #abc4c4; /* category colors old */ --mitarbeitendenbindung: #c7441a; --kommunikation: #718c4a; --mitarbeitendenfindung: #318ea1; --basiswissen: #e07719; /* Lernfelder */ --beschaffung: rgba(199, 68, 26, 1); --personal: rgba(113, 140, 74, 1); --unternehmenskultur: rgba(49, 142, 161, 1); --link-color: var(--orange-kf); --link-color-hover: var(--orange-headlines); --link-color-light: #96afdf; --link-color-light-hover: #c3d7ff; --color-focus: darkorange; /* Header */ --top-header-background: #BC5806; /* Mobile Menu */ --mobile-menu-color: #BC5806; --mobile-menu-font-color: #000; --mobile-menu-font-color-hover: #BC5806; --mobile-menu-button-color-hover: #BC5806; --mobile-menu-button-color: #BC5806; /* Desktop Menu */ --menu-font-color: #939190; --menu-desktop-first-layer-hover: #BC5806; --menu-desktop-first-layer-font-hover: darkorange; --menu-desktop-submenu-font-hover: darkorange; /* Sub Menu */ --submenu-color: #BC5806; --submenu-font-color: #fff; --submenu-fourth-layer-color: #BC5806; /* Submenu Trigger */ --trigger-background-color: transparent; /* Menu Item Marker */ --current-menu-item-font-color: darkorange; --current-menu-item-mobile-font-color: #773876; /* Transitions */ --transition-duration-sticky-header: .3s; --transition-timing-function-sticky-header: ease-in; --transition-buttons: all .2s ease-in-out; } /*------------------------------- General ------------------------------*/ body { max-width: 100%; background-color: #fff; } .noscroll { overflow: hidden; } #page { margin: 0; padding: 0; box-shadow: none; max-width: none; } /*----- Image -----*/ /* Image Appearance */ .entry-content img, .comment-content img, .widget img, img.header-image, .author-avatar img, img.wp-post-image { box-shadow: none; border-radius: 0; } /*--- Image Caption ---*/ figcaption, .entry-content > .wpb-content-wrapper .vc_row.wpb_row .wpb_wrapper figcaption { font-style: italic; margin-top: 5px; font-size: .75em; } #primary.site-content { margin: 0; } #primary.site-content article { border-bottom: none; margin-bottom: 0; padding: 0; } #secondary.widget-area { padding: 0; } /*header.entry-header { display: none; }*/ .no-display, .visuallyhidden { border: 0; clip: rect(0 0 0 0); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; white-space: nowrap; } /*----- Scrollbar -----*/ body::-webkit-scrollbar { width: 8px; } body::-webkit-scrollbar-track { background: #fff; } body::-webkit-scrollbar-thumb { background: var(--orange-headlines); border-radius: 4px; } body::-webkit-scrollbar-thumb:hover { background: var(--orange-kf); } /*----- Skip to Content Button -----*/ #skip-to-content { position: fixed; top: -1000px; left: -1000px; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap; z-index: -1; } #skip-to-content:focus { position: fixed; top: 10px; left: 10px; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; white-space: normal; z-index: 1000; background-color: var(--purple-kf); color: #fff; padding: 10px; border: 2px solid #fff; border-radius: 5px; box-shadow: 0 0 10px rgba(0,0,0,.5); z-index: 1000; } body.admin-bar #skip-to-content:focus { top: 56px; } @media screen and (min-width: 783px){ body.admin-bar #skip-to-content:focus { top: 42px; } } /*------------------------------- Page Layout Content ------------------------------*/ #page > #main { width: 100%; max-width: 1600px; margin: 112px auto 0; box-sizing: border-box; } #page > #main > * { width: 100%; padding: 0 50px; margin: 0; box-sizing: border-box; } /* @media screen and (min-width: 768px){ #page > #main > * { padding: 0 50px; } } */ @media screen and (min-width: 800px){ #page > #main { margin-top: 84px; } } @media screen and (min-width: 1024px){ #page > #main { margin-top: 100px; } } /* @media screen and (min-width: 1200px){ #page > #main > * { padding: 0 50px; } } */ @media screen and (min-width: 1600px){ #page > #main > * { padding: 0 80px; } } #page > #main > #primary { margin-top: 0px; } /*------------------------------- WPBakery Page Builder ------------------------------*/ /* Rows */ .entry-content .vc_row { margin-left: 0; margin-right: 0; margin-bottom: 40px; position: relative; } @media screen and (min-width: 1024px){ .entry-content .vc_row { margin-bottom: 70px; } } /* Row max width 1400px */ #page .entry-content .vc_row.row-narrow { width: 100%; max-width: 1400px; margin-left: auto; margin-right: auto; } .entry-content .vc_row > .vc_column_container > .vc_column-inner { padding: 0; } /* Row has fill */ /*@media screen and (min-width: 768px){ .entry-content .vc_row.vc_row-has-fill { padding: 0 !important; } }*/ .entry-content .vc_row.vc_row-has-fill { padding: 20px 30px; } @media screen and (min-width: 1024px){ .entry-content .vc_row.vc_row-has-fill { padding: 30px 50px; } } /* Row full height */ /* First Row on Page */ .entry-content > .wpb-content-wrapper > .vc_row.vc_row-o-full-height, .entry-content > .wpb-content-wrapper > .vc_row .vc_row-o-full-height { max-height: 800px; margin-bottom: 0; } /* Row last child */ .entry-content .wpb-content-wrapper > .vc_row:last-child { margin-bottom: 0; } /* Columns */ .entry-content .vc_row .vc_column_container > .vc_column-inner { margin-bottom: 35px; } .entry-content .vc_row .vc_column_container:last-child > .vc_column-inner { margin-bottom: 0; } @media screen and (min-width: 768px){ .entry-content .vc_row .vc_column_container > .vc_column-inner { margin-bottom: 0; } } .entry-content .vc_col-has-fill>.vc_column-inner, .entry-content .vc_row-has-fill+.vc_row-full-width+.vc_row>.vc_column_container>.vc_column-inner, .entry-content .vc_row-has-fill+.vc_row>.vc_column_container>.vc_column-inner, .entry-content .vc_row-has-fill>.vc_column_container>.vc_column-inner { padding-top: 0; } /* Column has fill */ .entry-content .vc_row.wpb_row .vc_col-has-fill.vc_column_container > .vc_column-inner { padding: 20px 30px; } @media screen and (min-width: 1024px){ .entry-content .vc_row.wpb_row .vc_col-has-fill.vc_column_container > .vc_column-inner { padding: 30px 50px; } } /* Column Gaps */ .entry-content .vc_row.vc_column-gap-1 { margin-left: -.5px; margin-right: -.5px; } .entry-content .vc_row.vc_column-gap-2 { margin-left: -1px; margin-right: -1px; } .entry-content .vc_row.vc_column-gap-3 { margin-left: -1.5px; margin-right: -1.5px; } .entry-content .vc_row.vc_column-gap-4 { margin-left: -2px; margin-right: -2px; } .entry-content .vc_row.vc_column-gap-5 { margin-left: -2.5px; margin-right: -2.5px; } .entry-content .vc_row.vc_column-gap-10 { margin-left: -5px; margin-right: -5px; } .entry-content .vc_row.vc_column-gap-15 { margin-left: -7.5px; margin-right: -7.5px; } .entry-content .vc_row.vc_column-gap-20 { margin-left: -10px; margin-right: -10px; } .entry-content .vc_row.vc_column-gap-25 { margin-left: -12.5px; margin-right: -12.5px; } .entry-content .vc_row.vc_column-gap-30 { margin-left: -15px; margin-right: -15px; } .entry-content .vc_row.vc_column-gap-35 { margin-left: -17.5px; margin-right: -17.5px; } @media screen and (max-width: 767px){ .entry-content .vc_row.wpb_row > .wpb_column.vc_column_container { padding-left: 0 !important; padding-right: 0 !important; } .entry-content .vc_row.vc_column-gap-1, .entry-content .vc_row.vc_column-gap-2, .entry-content .vc_row.vc_column-gap-3, .entry-content .vc_row.vc_column-gap-4, .entry-content .vc_row.vc_column-gap-5, .entry-content .vc_row.vc_column-gap-10, .entry-content .vc_row.vc_column-gap-15, .entry-content .vc_row.vc_column-gap-20, .entry-content .vc_row.vc_column-gap-25, .entry-content .vc_row.vc_column-gap-30, .entry-content .vc_row.vc_column-gap-35 { margin-left: 0; margin-right: 0; } } /* Content Elements */ .entry-content > .wpb-content-wrapper > .vc_row .wpb_wrapper > *:not(:first-child) { margin-top: 35px; margin-bottom: 0; } .entry-content > .wpb-content-wrapper > .vc_row .wpb_wrapper > *:first-child { margin-top: 0; margin-bottom: 0; } /* .entry-content > .wpb-content-wrapper > .vc_row.wpb_row .wpb_wrapper h1 { margin-top: 20px; } */ /* Text Elements */ .wpb_text_column { break-inside: avoid-column; } .wpb_text_column > .wpb_wrapper > * { max-width: 1400px; } .wpb_text_column > .wpb_wrapper > .centered { margin-left: auto; margin-right: auto; } /* Text with Multiple Columns */ @media screen and (min-width: 768px){ .text-three-columns, .text-two-columns { column-count: 2; } } @media screen and (min-width: 1366px){ .text-three-columns { column-count: 3; } } @media screen and (max-width: 767px){ .mobile-column-reverse { flex-direction: column-reverse; } } /* Single Images */ body .lightbox { z-index: 99999; } .lightbox .lb-outerContainer { box-shadow:0px 0px 6px rgb(0 0 0 / 60%); } /*------------------------------- Fonts ------------------------------*/ * { hyphens: auto; -webkit-hyphens: auto; -moz-hyphens: auto; white-space: normal; box-sizing: border-box; color: #000; font-family: 'Barlow', sans-serif; font-weight: 400; } /* Icon Font */ .material-symbols-outlined { font-family: 'Material Symbols Sharp' !important; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24 } /*----- Text Formatting Inline Elements -----*/ /* Bold */ strong, b { font-family: inherit; /* font-family: 'Barlow Condensed'; */ color: inherit; font-weight: 600; font-style: inherit; } /* Italic */ em, i { font-family: inherit; color: inherit; font-weight: inherit; font-style: italic; } /* Inline */ span { font-family: inherit; color: inherit; font-weight: inherit; font-style: inherit; } /*----- Blockquote -----*/ blockquote { color: #9b1f1f; background-color: #eee; font-size: 1.2em; } blockquote * { font-family: inherit; font-style: normal; color: inherit; } /*----- Word Breaks in Headlines -----*/ @media screen and (min-width: 1200px){ :is(h1, h2, h3, h4, h5, h6) { hyphens: none; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; } } /*----- Font Family & Weight -----*/ :is(h1, h2, h3, h4, h5, h6), :is(.entry-content, .comment-content) :is(h1, h2, h3, h4, h5, h6) { font-family: 'Barlow', sans-serif; font-weight: 700; } /*----- Custom Heading Styles -----*/ /* H1 Page Title */ h1, .entry-header h1.entry-title, .page-header h1.page-title, .archive-header h1.archive-title { margin-top: 30px; margin-left: auto; margin-right: auto; text-transform: uppercase; color: var(--orange-headlines); } .entry-header h1.entry-title, .page-header h1.page-title, .archive-header h1.archive-title { text-align: center; } /* H2 */ h2, :is(.entry-content, .comment-content) h2 { color: var(--orange-headlines); } /* H3 */ h3, :is(.entry-content, .comment-content) h3 { font-family: 'Barlow Semi Condensed', sans-serif; font-family: 'Barlow Condensed', sans-serif; font-weight: 500; text-transform: uppercase; color: #939190; color: var(--grey-headline); } /* H4, H5, H6 */ :is(h4, h5, h6), :is(.entry-content, .comment-content) :is(h4, h5, h6) { font-weight: 600; color: #939190; color: var(--grey-headline); } /* Slogan */ .slogan { font-size: 1.5em; } .slogan * { text-shadow: 0 0 3px rgba(255,255,255,.7); } /*----- General Font Styles -----*/ :is(h1, h2, h3, h4, h5, h6), :is(.entry-content, .comment-content) :is(h1, h2, h3, h4, h5, h6), :is(p, ol, ul), :is(.entry-content, .comment-content) :is(p, ol, ul) { line-height: 1.2; padding: 0; } :is(p, ol, ul, li), :is(.entry-content, .comment-content) :is(p, ol, ul, li) { line-height: 1.58; } /*----- Links -----*/ a, a:is(:any-link, :hover, :focus, :active) { text-decoration: none; outline: none; font-family: inherit; font-weight: inherit; color: var(--link-color); } :is(a, button, input, textarea, select):is(:focus-visible) { outline: 2px solid var(--color-focus) !important; } /* Hover */ a:is(:hover, :focus, :focus-within, :focus-visible, :active) { text-decoration: none; color: var(--link-color-hover); } /* in Paragraph (content area #main) */ p a:any-link, .wpb_text_column a:any-link { color: var(--link-color); } p a:is(:hover, :focus, :focus-within, :focus-visible, :active), .wpb_text_column a:not(.button):is(:hover, :focus, :focus-within, :focus-visible, :active) { text-decoration: underline; color: var(--link-color-hover); } /*----- Lists -----*/ body :is(.entry-content, .wpb-content-wrapper, .comment-content, .mu_register,) :is(ul, ol) { list-style-position: outside; padding-left: 20px; } ul + ul, .entry-content .vc_row.wpb_row .wpb_wrapper ul + ul, .comment-content ul + ul { margin-top: 0; } body :is(.entry-content, .wpb-content-wrapper, .comment-content, .mu_register,) li { list-style-position: outside; margin: 0; break-inside: avoid-column; position: relative; } body :is(.entry-content, .wpb-content-wrapper, .comment-content, .mu_register,) .wpb_text_column ul:not(.form-fields, .learn-press-tabs__nav) > li::marker { content: ''; } body :is(.entry-content, .wpb-content-wrapper, .comment-content, .mu_register,) .wpb_text_column ul:not(.form-fields, .learn-press-tabs__nav) > li::before { content: ''; display: inline-block; width: 0; height: 0; border-width: 5px 0 5px 9px; border-color: transparent transparent transparent var(--orange-kf); border-style: solid; margin-top: 8px; position: absolute; left: -18px; } /*--- Text Colors -----*/ /* White Text */ :is(.entry-content, .comment-content) :is(.text-white, .white-text, .weiss-text, .text-weiss) * { color: #fff; } /* Links */ :is(.entry-content, .comment-content) :is(.text-white, .white-text, .weiss-text, .text-weiss) a:is(:any-link, :link, :visited) { color: #96afdf; color: var(--link-color-light); } :is(.entry-content, .comment-content) :is(.text-white, .white-text, .weiss-text, .text-weiss) a:is(:hover, :focus, :focus-within, :focus-visible, :active) { color: #c3d7ff; color: var(--link-color-light-hover); } /*--- Purple Background - Arvo -----*/ .purple-bg p { } .purple-bg p span { background-color: var(--purple-kf); color: #fff; padding: 2px 4px; display: inline; font-family: 'Arvo'; box-decoration-break: clone; -webkit-box-decoration-break: clone; } /*--- Purple Background - Arvo -----*/ .zitat-kernthema .wpb_wrapper { position: relative; background-color: #abc4c4; background-color: var(--mint-kf); color: #000; font-family: 'Barlow Condensed'; border-radius: 12px; padding: 20px; font-size: 1.25em; } .zitat-kernthema .wpb_wrapper:before { content: ''; display: block; width: 0; height: 0; border-width: 0 16px 20px 0px; border-color: transparent transparent var(--mint-kf) var(--mint-kf); border-style: solid; position: absolute; top: -20px; left: 20px; } .zitat-kernthema .wpb_wrapper p { color: #000; line-height: 1.3; } .zitat-kernthema .wpb_wrapper:after { content: '„'; display: block; font-size: 3em; font-family: 'Arvo'; position: absolute; top: unset; bottom: calc(100% - 8px); right: 20px; line-height: 1; display: none; } /*----- Font Size -----*/ body, body.global-font-size-small { font-size: 16px; transition: font-size .2s linear; } body.global-font-size-medium { font-size: 18px; } body.global-font-size-big { font-size: 20px; } * { font-size: 1em; } /* header.site-header { font-size: .8em; } */ header.site-header * { font-size: 1em; } footer#colophon { font-size: .8em; } sub/* Tiefstellen */, sup/* Hochstellen */ { font-size: .6em; } /* Widget Titles */ .widget-title { font-size: 1em; } h1, :is(.entry-content, .comment-content, .entry-header, .page-header, .archive-header) :is(h1, h1.entry-title, h1.page-title, h1.archive-title) { font-size: 1.9em; } h2, :is(.entry-content, .comment-content, .entry-header) h2 { font-size: 1.7em; } h3, :is(.entry-content, .comment-content, .entry-header) h3 { font-size: 1.5em; } h4, :is(.entry-content, .comment-content, .entry-header) h4 { font-size: 1.3em; } h5, :is(.entry-content, .comment-content, .entry-header) h5 { font-size: 1.2em; } h6, :is(.entry-content, .comment-content, .entry-header) h6 { font-size: 1.1em; } /*----- Tablet portrait -----*/ @media screen and (min-width: 768px){ /* body, body.global-font-size-small { font-size: 18px; } body.global-font-size-medium { font-size: 20px; } body.global-font-size-big { font-size: 22px; } */ /* header.site-header { font-size: .6em; } */ } /*----- Tablet landscape -----*/ @media screen and (min-width: 1024px){ } /*----- Tablet big landscape & Laptop -----*/ @media screen and (min-width: 1200px){ body, body.global-font-size-small { font-size: 18px; } body.global-font-size-medium { font-size: 20px; } body.global-font-size-big { font-size: 22px; } h1, :is(.entry-content, .comment-content, .entry-header, .page-header, .archive-header) :is(h1, h1.entry-title, h1.page-title, h1.archive-title) { font-size: 2.71em; } h2, :is(.entry-content, .comment-content, .entry-header) h2 { font-size: 2em; } h3, :is(.entry-content, .comment-content, .entry-header) h3 { font-size: 1.45em; } h4, :is(.entry-content, .comment-content, .entry-header) h4 { font-size: 1.3em; } h5, :is(.entry-content, .comment-content, .entry-header) h5 { font-size: 1.15em; } h6, :is(.entry-content, .comment-content, .entry-header) h6 { font-size: 1em; } } /*----- Desktop -----*/ @media screen and (min-width: 1600px){ body, body.global-font-size-small { font-size: 20px; } body.global-font-size-medium { font-size: 22px; } body.global-font-size-big { font-size: 24px; } /* footer#colophon { font-size: 18px; } */ } @media screen and (min-width: 1600px){ /* header.site-header { font-size: 20px; } */ } /*------------------------------- Header ------------------------------*/ /* Sticky Container */ .header-container { position: fixed; top: 0; left: 0; width: 100%; z-index: 99; } /* Logged-In */ .logged-in.admin-bar .header-container { top: 46px; } @media screen and (min-width: 783px){ .logged-in.admin-bar .header-container { top: 32px; } } /* Not/Logged In Menu Items */ #page ul:is(.menu, .nav-menu) li.logged-in.menu-item { display: none; } /* Logout */ body.logged-in #page ul:is(.menu, .nav-menu) li.logged-in.menu-item { display: block; } body.logged-in #page ul:is(.menu, .nav-menu) li.not-logged-in.menu-item { display: none; } /* Icons */ ul:is(.menu, .nav-menu) li.menu-item:is(.login, .logout, .account) a { display: flex; align-items: center; } ul:is(.menu, .nav-menu) li.menu-item:is(.login, .logout, .account) a:before { content: '\e9ba'; display: inline; font-family: 'Material Symbols Sharp'; } /* Login */ ul:is(.menu, .nav-menu) li.login.menu-item a:before { content: '\ea77'; } /* Account */ ul:is(.menu, .nav-menu) li.account.menu-item a:before { content: '\e7fd'; } #masthead.site-header { width: 100% !important; padding: 0; background-color: #fff; background-color: rgba(255,255,255,.8); color: #484847; color: var(--grey); position: relative; z-index: 10; } #masthead.site-header.boxShadow { box-shadow: 0px 0px 6px rgb(0 0 0 / 60%); } #headerwrap { padding: 10px 12px 0; } @media screen and (min-width: 768px){ #headerwrap { padding-left: 30px; padding-right: 30px; } } @media screen and (min-width: 1200px){ #headerwrap { padding-left: 50px; padding-right: 50px; } } @media screen and (min-width: 1600px){ #headerwrap { padding-left: 80px; padding-right: 80px; } } #headerwrap { display: flex; flex-direction: column; justify-content: space-between; align-items: center; align-items: start; } /* .stickyHeader #headerwrap { justify-content: flex-end; } */ #headerwrap > * { width: 100%; } @media screen and (min-width: 800px){ #headerwrap { flex-direction: row-reverse; } #headerwrap > * { width: auto; } } /*---------- Links ----------*/ #masthead.site-header a:is(:any-link, :link, :visited) { } /* Hover */ #masthead.site-header ul:is(.menu, .nav-menu) a:is(:hover, :focus, :focus-within, :focus-visible, :active) { background-color: var(--purple-kf); color: #fff; } /*---------- Header Info Section - first header row -----*/ #header-info { background-color: var(--top-header-background); background-color: #fff; background-color: transparent; display: flex; flex-direction: row; justify-content: space-between; justify-content: flex-end; } #header-info :is(.contact-links, .social-links, .header-links ul) { display: flex; flex-direction: row; column-gap: 8px; } .header_row_one { color: #465497; color: var(--dark-blue); font-size: 16px; font-weight: 700; padding: 0; margin: 0; width: 100%; clear: both; float: none; width: auto; display: flex; justify-content: flex-end; align-items: center; } /*---- Widgets ----*/ .header_row_one > * { float: right; display: flex; align-items: center; margin: 0 20px 0 0; font-family: 'Open Sans', sans-serif; color: var(--grey-text); } .header_row_one > *:last-child { margin: 0 0 0 0 !important; } .header_row_one li { margin: 0 4px; } .header_row_one li a { display: flex; align-items: center; justify-content: center; flex-direction: row; } /* #masthead.site-header .header_row_one a span { color: inherit; } */ .header_row_one a, .header_row_one a:is(:any-link, :link, :visited) { color: var(--grey-text); padding: 4px; line-height: 1; } .header_row_one li a svg { fill: var(--grey-text); width: 20px; height: 20px; margin-right: 4px; } /* Hover */ #masthead.site-header .header_row_one a:is(:hover, :focus, :focus-within, :focus-visible, :active) { background-color: var(--purple-kf); color: #fff; } #masthead.site-header .header_row_one a:is(:hover, :focus, :focus-within, :focus-visible, :active) svg { fill: #fff; } @media screen and (max-width: 740px){ .header_row_one li a span { display: none; } } /*---------- second header row (Logo, Navigation) -----*/ .header_row_two { display: flex; justify-content: space-between; justify-content: flex-start; align-items: stretch; position: relative; } /* Columns */ .header-col { display: flex; align-items: flex-end; margin-bottom: 0; } /* Column 1 */ .header-col.header-col-1 { margin-bottom: 8px; } /* @media screen and (min-width: 1023px){ .header-col.header-col-1 { margin-bottom: 80px; } } */ /*---------- Logo -----*/ #logo { clear: none; float: left; margin-top: 0; margin-left: 50px; } #logo a:is(:hover, :focus, :focus-within, :focus-visible, :active) { opacity: .8; cursor: pointer; } #logo img { height: 60px !important; width: auto !important; } @media screen and (min-width: 1024px){ #logo img { height: 80px !important; } } @media screen and (min-width: 1600px){ #logo { margin-left: 0; } } /*---------- Hauptnavigation | Top Menu -----*/ #site-navigation.main-navigation { clear: none; float: right; height: 100%; margin: 0; padding: 0; display: flex !important; align-items: flex-end; font-size: 1.4em; } /*----- Hamburger Menu Button -----*/ #site-navigation.main-navigation .menuToggleBtn { display: inline-block; position: relative; height: 32px; width: 40px; padding: 8px; background: transparent; border: none; border-radius: 100px; box-shadow: none; box-sizing: content-box; z-index: 2; } #site-navigation.main-navigation .menuToggleBtn > div { position: relative; top: 0; left: 0; height: 2px; width: 40px; background-color: var(--mobile-menu-button-color); border-radius: 10px; transform-origin: 0 0; transform: rotate(0deg); transition-duration: .2s; transition-timing-function: linear; transition-property: transform, top, left, width; } #site-navigation.main-navigation .menuToggleBtn > div:first-child { top: -13px; } #site-navigation.main-navigation .menuToggleBtn > div:nth-child(2) { top: 0; } #site-navigation.main-navigation .menuToggleBtn > div:nth-child(3) { top: 13px; } /* Hover */ #site-navigation.main-navigation .menuToggleBtn:hover div { background-color: var(--mobile-menu-button-color-hover); } /* Active */ /* Close Button */ #site-navigation.main-navigation .menuToggleBtn.menuToggle div { background-color: var(--mobile-menu-button-color); } #site-navigation.main-navigation .menuToggleBtn.menuToggle div:first-child { transform: rotate(41deg); width: 33px; width: 48px; /* top: -8px; */ left: 2px; } #site-navigation.main-navigation .menuToggleBtn.menuToggle div:nth-child(2) { transform: rotate(-41deg); width: 33px; width: 48px; top: 16px; } #site-navigation.main-navigation .menuToggleBtn.menuToggle div:nth-child(3) { opacity: 0; } /*----- Menu Items -----*/ .main-navigation li.menu-item a { line-height: 1.4; display: flex; align-items: center; } /*--- First Layer ---*/ .main-navigation ul:is(.menu, .nav-menu) > li.menu-item { margin: 0 40px 0 0; } .main-navigation ul:is(.menu, .nav-menu) > li.menu-item:last-child { margin: 0 10px 0 0; } /*--- Current ---*/ #site-navigation.main-navigation :is(.current-menu-item, .current-menu-ancestor, .current_page_item, .current_page_ancestor) > a { font-weight: 400; } /* Mobile Menu */ .main-navigation .menu-wrapper-mobile :is(ul:is(.menu, .nav-menu), ul:is(.menu, .nav-menu) ul.sub-menu) li.menu-item:is(.current-menu-item, .current-menu-ancestor, .current_page_item, .current_page_ancestor) > a { color: var(--current-menu-item-mobile-font-color); } /* Desktop Menu */ .menu-wrapper-desktop ul:is(.menu, .nav-menu) li.menu-item:is(.current-menu-item, .current-menu-ancestor, .current_page_item, .current_page_ancestor) > a, .menu-wrapper-desktop ul:is(.menu, .nav-menu) li.menu-item ul.sub-menu li.menu-item:is(.current-menu-item, .current-menu-ancestor, .current_page_item, .current_page_ancestor) > a { color: var(--current-menu-item-font-color); } /*--- Hover ---*/ /* Mobile Menu */ .main-navigation .menu-wrapper-mobile :is(ul:is(.menu, .nav-menu), ul:is(.menu, .nav-menu) ul.sub-menu) li.menu-item > a:is(:hover, :focus, :focus-within, :focus-visible, :active) { color: var(--mobile-menu-font-color-hover); color: var(--orange-kf); } /*--- Menu Item Has Children ---*/ /* Submenu Trigger */ li.menu-item-has-children > .trigger { width: 40px; height: 40px; border-radius: 0; border: none; background: var(--trigger-background-color); float: right; display: inline-block; display: flex; padding: 0; justify-content: center; align-items: center; position: absolute; top: 0; left: unset; right: 0; cursor: pointer; transition: none; } li.menu-item-has-children > .trigger > div { height: 100%; width: 100%; /* border: 1px solid #6a6a6a; */ border-top: none; border-left: none; border-radius: 100px; background-color: transparent; background-image: url('data:image/svg+xml,'); background-size: 35%; background-repeat: no-repeat; background-position: center; transform: rotate(0deg); transition: transform .2s linear; } /* Active and Hover Status */ li.menu-item-has-children.active > .trigger > div, li.menu-item-has-children > .trigger:is(:hover, :focus, :focus-within, :focus-visible, :active) > div { background-image: url('data:image/svg+xml,'); transform: rotate(180deg); background-color: var(--purple-kf); } ul:is(.menu, .nav-menu) li.menu-item.menu-item-has-children:before { display: none; /* top: 5px ; right: 7px; */ } /* Hover */ li.menu-item-has-children:hover > .trigger, li.menu-item-has-children:hover > .trigger div { border-color: var(--mobile-menu-button-color-hover); } /* Sub Menu */ ul.sub-menu li.menu-item-has-children:hover > .trigger div { margin-top: 0; } /*----- Sub Menu -----*/ ul.sub-menu { display: flex; flex-direction: column; /* box-shadow: 0 0 10px rgba(255,255,255,.5); */ padding-left: 12px; } ul:is(.menu, .nav-menu) ul.sub-menu { background-color: rgba(0,0,0,.1); } .main-navigation li ul.sub-menu li { margin: 0; } .main-navigation li ul.sub-menu li a { font-size: 1em; text-align: left; color: #fff; } /*----------- Smartphone Menu ------------*/ #site-navigation.main-navigation .menu-wrapper-desktop { display: none; } #site-navigation.main-navigation .menu-wrapper-mobile { display: none; position: absolute; top: 100%; /* left: unset; right: 100vw; width: 100%; */ left: unset; right: 0; width: 90%; max-width: 420px; padding: 16px; background-color: var(--light-grey); /* box-shadow: 0px 0px 6px rgb(0 0 0 / 60%); */ overflow: hidden !important; transition: right linear .2s; z-index: 1; } @media screen and (min-width: 768px){ #site-navigation.main-navigation .menu-wrapper-mobile { right: 80px; } } #site-navigation.main-navigation .menu-wrapper-mobile.menuToggleOn { display: block; } #site-navigation.main-navigation .menu-wrapper > *:not(:first-child) { margin-top: 0; } /* Before Nav Menu */ .social-icons { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } /* Icons */ .social-icons a { margin: 0 10px; display: block; width: 25px; } .social-icons .social-icon { /* width: 30px; */ width: 100%; height: auto; filter: grayscale(1); } .social-icons a:is(:hover, :focus, :focus-within, :focus-visible, :active) .social-icon { filter: grayscale(0); } /* After Nav Menu */ #site-navigation.main-navigation .menu-wrapper .after-nav-header > * { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } /* Menu Items */ :is(.main-navigation, .flyout-menu) ul:is(.menu, .nav-menu) li.menu-item { position: relative; display: block; margin-right: 0; margin-top: 0; border-bottom: 1px solid #ddd; } /* .main-navigation ul:is(.menu, .nav-menu) > .menu-item > ul.sub-menu li > ul.sub-menu li { background: #d9d9d9; background-color: #d9d9d9; border-bottom: 1px solid #c5c5c5; } */ :is(.main-navigation, .flyout-menu) ul:is(.menu, .nav-menu) li.menu-item a, :is(.main-navigation, .flyout-menu) ul:is(.menu, .nav-menu) > li.menu-item > ul.sub-menu li a { padding: 10px 20px; height: auto; width: 100%; text-align: left; text-transform: none; line-height: 1.2; /* font-weight: 400; */ display: inline-flex; align-items: center; background: transparent; border: none; color: var(--mobile-menu-font-color); } :is(.main-navigation, .flyout-menu) ul:is(.menu, .nav-menu) > li.menu-item > a { height: 40px; } /* .main-navigation ul:is(.menu, .nav-menu) > li.menu-item > ul.sub-menu li a { padding-left: 30px; } .main-navigation ul:is(.menu, .nav-menu) > li.menu-item > ul.sub-menu > li.menu-item > ul.sub-menu li a { padding-left: 40px; } */ /* Sub Menu */ ul:is(.menu, .nav-menu) ul.sub-menu { display: none !important; position: static; height: 0; width: auto; clip: unset; overflow: hidden; height: auto; overflow: visible; transition: height .5s linear .5s; } ul:is(.menu, .nav-menu) .menu-item-has-children.active > ul.sub-menu { display: block !important; } /*--------------- Desktop Menu ---------------*/ #site-navigation.main-navigation .menu-wrapper-desktop { position: static; width: auto; padding: 0; background-color: transparent; box-shadow: none; overflow: visible !important; } #site-navigation.main-navigation .menu-wrapper-desktop ul:is(.menu, .nav-menu) { /* Show Menu */ display: block !important; position: static; max-width: none; padding: 0; box-shadow: none; border: none; overflow: visible !important; } /* Before & After Menu */ /* #site-navigation.main-navigation .menu-wrapper-desktop :is(.before-nav-header, .after-nav-header) { display: none; } */ /* List Items */ .menu-wrapper-desktop ul:is(.menu, .nav-menu) li.menu-item { border-bottom: none; } .menu-wrapper-desktop ul:is(.menu, .nav-menu) > li.menu-item { margin: 0; float: left; } .menu-wrapper-desktop li.menu-item-has-children > .trigger { width: 20px; height: 45px; border-left: none; } .menu-wrapper-desktop ul:is(.menu, .nav-menu) > li.menu-item.menu-item-has-children { padding-right: 20px; } .menu-wrapper-desktop li.menu-item:not(:last-child) { margin-right: 10px; } .menu-wrapper-desktop li.menu-item > a { padding: 10px 10px; height: 45px; white-space: nowrap; } .menu-wrapper-desktop ul:is(.menu, .nav-menu) li.menu-item a { color: var(--menu-font-color); } .menu-wrapper-desktop ul:is(.menu, .nav-menu) > li.menu-item.menu-item-has-children > a { padding-right: 5px; } .menu-wrapper-desktop ul:is(.menu, .nav-menu) > li.menu-item ul.sub-menu li a { padding: 10px 20px; color: var(--submenu-font-color); } /* 1st Layer */ /* Hover */ .menu-wrapper-desktop ul:is(.menu, .nav-menu) > li.menu-item.active > :is(a, .trigger), .menu-wrapper-desktop ul:is(.menu, .nav-menu) > li.menu-item > a:is(:hover, :focus, :focus-within, :focus-visible, :active), .menu-wrapper-desktop ul:is(.menu, .nav-menu) > li.menu-item > a:is(:hover, :focus, :focus-within, :focus-visible, :active) + .trigger, .menu-wrapper-desktop ul:is(.menu, .nav-menu) > li.menu-item > .trigger:is(:hover, :focus, :focus-within, :focus-visible, :active), .menu-wrapper-desktop ul:is(.menu, .nav-menu) > li.menu-item > a:has( + .trigger:is(:hover, :focus, :focus-within, :focus-visible, :active) ) { background-color: var(--menu-desktop-first-layer-hover); color: #fff; } /* Sub Menu */ .menu-wrapper-desktop ul:is(.menu, .nav-menu) ul.sub-menu { position: absolute; min-width: 100%; background-color: var(--submenu-color); /* box-shadow: 0px 0px 6px rgb(0 0 0 / 60%); */ } /* 3rd Layer */ .menu-wrapper-desktop ul:is(.menu, .nav-menu) > li > ul.sub-menu > li > ul.sub-menu { border-left: 2px solid var(--submenu-fourth-layer-color); } /* 4th Layer */ .menu-wrapper-desktop ul:is(.menu, .nav-menu) ul.sub-menu ul.sub-menu ul.sub-menu { position: static; /* width: calc(100% + 30px); */ background-color: var(--submenu-fourth-layer-color); } /* Hover */ .menu-wrapper-desktop ul:is(.menu, .nav-menu) > li.menu-item ul.sub-menu > li.menu-item.active > :is(a, .trigger), .menu-wrapper-desktop ul:is(.menu, .nav-menu) > li.menu-item ul.sub-menu > li.menu-item > a:is(:hover, :focus, :focus-within, :focus-visible, :active), .menu-wrapper-desktop ul:is(.menu, .nav-menu) > li.menu-item ul.sub-menu > li.menu-item > a:is(:hover, :focus, :focus-within, :focus-visible, :active) + .trigger, .menu-wrapper-desktop ul:is(.menu, .nav-menu) > li.menu-item ul.sub-menu > li.menu-item > .trigger:is(:hover, :focus, :focus-within, :focus-visible, :active), .menu-wrapper-desktop ul:is(.menu, .nav-menu) > li.menu-item ul.sub-menu > li.menu-item > a:has( + .trigger:is(:hover, :focus, :focus-within, :focus-visible, :active) ) { color: var(--menu-desktop-submenu-font-hover); } /* Submenu Trigger */ .menu-wrapper-desktop li.menu-item-has-children > .trigger { width: 20px; height: 45px; border-left: none; } .menu-wrapper-desktop li.menu-item-has-children > .trigger > div { background-size: 60%; } /* 1st Layer */ .menu-wrapper-desktop ul:is(.menu, .nav-menu) > li.menu-item-has-children > .trigger > div { background-image: url('data:image/svg+xml,'); } /* 2nd Layer */ .menu-wrapper-desktop ul:is(.menu, .nav-menu) > li > ul.sub-menu > li.menu-item-has-children > .trigger > div { background-image: url('data:image/svg+xml,'); background-size: 35%; } /* 3d Layer and more */ .menu-wrapper-desktop ul.sub-menu ul.sub-menu > li.menu-item-has-children > .trigger > div { background-image: url('data:image/svg+xml,'); } @media screen and (min-width: 1024px){ /* .menu-wrapper-desktop li.menu-item-has-children > .trigger { width: 30px; } .menu-wrapper-desktop ul:is(.menu, .nav-menu) > li.menu-item.menu-item-has-children { padding-right: 30px; } */ .main-navigation .menu-wrapper-desktop li.menu-item > a { padding: 10px 20px; } } /*--------------- Feedback Button ---------------*/ /* #site-navigation.main-navigation li.feedback-popup.menu-item > a { background-color: var(--grey-button); cursor: pointer; color: #000; } #site-navigation.main-navigation li.feedback-popup.menu-item > a:is(:hover, :focus, :focus-within, :focus-visible, :active) { background-color: var(--purple-kf); color: #fff; } */ /*--------------- Feedback Button ---------------*/ .main-navigation .menu-login-logout-container ul:is(.menu, .nav-menu) { border: none; } .main-navigation .menu-login-logout-container ul:is(.menu, .nav-menu) li.menu-item { border: none; float: left; } .main-navigation .menu-login-logout-container ul:is(.menu, .nav-menu) li.menu-item a { color: var(--orange-kf); } /* Hover */ .main-navigation .menu-login-logout-container ul:is(.menu, .nav-menu) li.menu-item a:is(:hover, :focus, :focus-within, :focus-visible, :active) { color: var(--purple-kf); } /*--------------- Break Point ---------------*/ @media screen and (min-width: 3000px){ #site-navigation.main-navigation .menuToggleBtn { /* Hide Toggle Button on Desktop */ display: none; } #site-navigation.main-navigation .menu-wrapper-desktop { display: block; display: flex; flex-direction: row; flex-wrap: wrap; } #site-navigation.main-navigation .menu-wrapper-mobile { display: none; } .before-nav-header-wrap { width: 100%; display: none; } } /*----- Search Header Menu -----*/ .menu-wrapper-desktop .after-nav-header-wrap { display: none; } .after-nav-header-wrap { display: flex; flex-direction: column; padding-left: 12px; } .after-nav-header-wrap a { display: flex; flex-direction: row; align-items: center; color: #fff; } .after-nav-header-wrap a:is(:hover, :focus, :focus-within, :focus-visible, :active) { color: #fff; text-decoration: underline; } .after-nav-header-wrap a img { margin-right: 5px; } /* Search Form */ .after-header { width: 100%; margin: 0 auto; padding: 10px 30px 0; background-color: #ededed; background-color: var(--light-grey); position: absolute; z-index: 9; transform: translateY(-100%); transition: all .5s linear; box-shadow: 0px 0px 6px rgb(0 0 0 / 60%); } .after-header > div { width: 100%; max-width: 1200px; max-width: none; margin: 0 auto; } @media screen and (max-width: 767px){ .header_row_one { display: flex; justify-content: center; } } @media screen and (min-width: 768px){ .header_row_one > * { margin: 0 38px 0 0; } .after-header { padding-left: 50px; padding-right: 50px; } } @media screen and (min-width: 1024px){ .after-header { display: flex; justify-content: center; } } @media screen and (min-width: 1200px){ } @media screen and (min-width: 1366px){ .after-header { padding-left: 50px; padding-right: 50px; } } @media screen and (min-width: 1600px){ .after-header { padding-left: 80px; padding-right: 80px; } } /* Toggle */ .after-header { display: none; } .after-header.search-toggled-on { display: block; transform: translateY(0); } .after-header .widget-wrap { position: relative; } /* Search Form */ .after-header form { display: inline-block; float: right; } .after-header form > * { float: left; margin: 0 0 10px 10px; line-height: 1; } .after-header input.search-field[type="search"], .after-header input.search-field[type="search"]:is(:focus, :focus-within, :focus-visible, :hover, :active) { appearance: none; -webkit-appearance: none; -moz-appearance: none; font-size: 16px !important; padding: 7px 15px !important; max-width: 270px; height: auto !important; background-color: #fff; border: 1px solid #000; position: static !important; } /* Search Submit Button */ .after-header form input.search-submit[type="submit"], .after-header form input.search-submit[type="submit"]:is(:focus, :focus-within, :focus-visible, :hover, :active) { appearance: none; -webkit-appearance: none; -moz-appearance: none; color: #fff !important; background: var(--orange-headlines) !important; border: 1px solid var(--orange-headlines) !important; font-size: 16px !important; width: auto !important; height: auto !important; padding: 9px 20px !important; position: static !important; } .after-header form input.search-submit[type="submit"]:is(:focus, :focus-within, :focus-visible, :hover, :active) { background: var(--purple-kf) !important; border-color: var(--purple-kf) !important; } /* Close Search Form */ .close_search { background: transparent !important; border: none; padding: 0; display: none; } .after-header .close_search { /* display: block; */ position: absolute; top: 0; left: unset; right: 0; height: 32px; margin-right: -5px; cursor: pointer; } .after-header .close_search:hover { opacity: .6; } .after-header .close_search>div { width: 30px; height: 2px; background-color: #000; } .after-header .close_search>div:first-child { transform: rotate(45deg); /* margin-top: 16px; */ } .after-header .close_search>div:nth-child(2) { transform: rotate(-45deg); margin-top: -2px; } @media screen and (min-width: 500px){ .after-header form { padding-right: 40px; } .after-header .close_search { display: block; } } /*----- Sticky Header Changes -----*/ .header-container.stickyHeader {} /* Scroll Down */ .header-container #header-info { } /* .scrollDown .header-container.stickyHeader #header-info { display: none; } */ /* Scroll Up */ .scrollUp .header-container.stickyHeader { display: block; } /* Headerwrap */ .header-container.stickyHeader #headerwrap { padding-top: 5px; } #headerwrap { transition-duration: var(--transition-duration-sticky-header); transition-timing-function: var(--transition-timing-function-sticky-header); transition-property: padding-top; } /* Logo */ .header-container.stickyHeader .header-col.header-col-1 { margin-bottom: 5px; } .header-col.header-col-1 { transition-duration: var(--transition-duration-sticky-header); transition-timing-function: var(--transition-timing-function-sticky-header); transition-property: margin-bottom; } .header-container.stickyHeader #logo img { height: 50px !important; } #logo img { transition-duration: var(--transition-duration-sticky-header); transition-timing-function: var(--transition-timing-function-sticky-header); transition-property: height; } /* Font Size */ .header-container.stickyHeader header.site-header * { /* font-size: 14px; */ } header.site-header * { transition-duration: var(--transition-duration-sticky-header); transition-timing-function: var(--transition-timing-function-sticky-header); transition-property: font-size; } /* Menu Items */ .header-container.stickyHeader .main-navigation li.menu-item a { /* line-height: 3; */ } .main-navigation li.menu-item a { transition-duration: var(--transition-duration-sticky-header); transition-timing-function: var(--transition-timing-function-sticky-header); transition-property: line-height; } /* Search */ .header-container.stickyHeader .searchbox .search-menu { line-height: 1; } /* Responsive Menu Pro Button */ .header-container.stickyHeader button#responsive-menu-pro-button { width: 40px; height: 40px; } .header-container button#responsive-menu-pro-button { transition-duration: var(--transition-duration-sticky-header); transition-timing-function: var(--transition-timing-function-sticky-header); transition-property: height, width; } /*------------ Header Image --------------*/ .header-height { height: 100vh; max-height: 700px; } /*------------ Change Font Size --------------*/ /*--- Buttons ---*/ .change-font-size > div { display: flex; column-gap: 5px; flex-direction: row; align-items: stretch; justify-content: flex-start; } /* Small */ body.font-size-small .change-font-size button#small { font-size: 1em; } body.font-size-small .change-font-size button#medium { font-size: 1.2em; } body.font-size-small .change-font-size button#big { font-size: 1.4em; } /* Medium */ body .change-font-size button#small, body.font-size-medium .change-font-size button#small { font-size: .8em; } body .change-font-size button#medium, body.font-size-medium .change-font-size button#medium { font-size: 1em; } body .change-font-size button#big, body.font-size-medium .change-font-size button#big { font-size: 1.2em; } /* Big */ body.font-size-big .change-font-size button#small { font-size: .6em; } body.font-size-big .change-font-size button#medium { font-size: .8em; } body.font-size-big .change-font-size button#big { font-size: 1em; } /*------------------------------- Buttons ------------------------------*/ /* Reset Parent Theme */ .entry-content a:visited, .comment-content a:visited { color: unset; } button, input { line-height: 1.714285714; } .menu-toggle:hover, .menu-toggle:focus, button:hover, input[type="submit"]:hover, input[type="button"]:hover, input[type="reset"]:hover, article.post-password-required input[type=submit]:hover { background: unset; } /* .vc_row .vc_btn3-container { margin: 0; } */ /*----- General Button Styles -----*/ /* Button, Submit */a.button, button, input[type="submit"], input[type="button"], /* Ninja Forms */body .nf-form-content button, body .nf-form-content input[type=button], body .nf-form-content input[type=submit], /* Header Search */.after-header form input.search-submit[type="submit"], /* WP Bakery Page Builder */#page .vc_btn3-container .vc_general.vc_btn3, #page .vc_btn3-container .vc_btn3, /* H5p Start Quiz */ .course-summary-sidebar .lp-course-buttons button.button, /* LearnPress */ body.learnpress-page :is(.lp-button, #lp-button), /* LearnPress Lesson Navi */ #popup-course #popup-footer .course-item-nav :is(.prev, .next) a, /* LP Certificates */ .course-summary-sidebar .lp-course-buttons button.lp-button, /* Good Practice */ .single-lp_course .lp-button-good-practice-container a { appearance: none; -webkit-appearance: none; -moz-appearance: none; position: relative; background: unset; background-color: #efeff0; background-color: var(--grey-button); color: #000; font-size: 1.2em; font-family: 'Barlow Condensed', sans-serif; height: auto; text-align: center; font-weight: 500; text-decoration: none; /* text-transform: uppercase; letter-spacing: 0.15em; */ padding: 14px 20px; /* border: 2px solid #585958; border: 2px solid var(--grey-text); */ border: none; border-radius: 0; display: inline-flex; justify-content: center; align-items: center; transition: var(--transition-buttons); } /* WP Bakery Page Builder */ #page .vc_btn3-container.vc_btn3-center .vc_general.vc_btn3, #page .vc_btn3-container.vc_btn3-center .vc_btn3 { transform: translateX(-24px); } /* Hover, Focus, Active */ /* Button */ :is(a.button, button):is(:hover, :focus, :focus-within, :focus-visible, :active), /* Input Submit */ input[type="submit"]:is(:hover, :focus, :focus-within, :focus-visible, :active), /* Input Button */ input[type="button"]:is(:hover, :focus, :focus-within, :focus-visible, :active), /* Ninja Forms */ body .nf-form-content button:is(:hover, :focus, :focus-within, :focus-visible, :active), body .nf-form-content input[type=button]:is(:hover, :focus, :focus-within, :focus-visible, :active), body .nf-form-content input[type=submit]:is(:hover, :focus, :focus-within, :focus-visible, :active), /* Search Form Header */ .after-header form input.search-submit[type="submit"]:is(:hover, :focus, :active, :focus-within), /* WP Bakery Page Builder */ #page .vc_btn3-container .vc_btn3:is(:hover, :focus, :focus-within, :focus-visible, :active), #page .vc_btn3-container .vc_general.vc_btn3:is(:hover, :focus, :focus-within, :focus-visible, :active), /* H5p Start Quiz */ .course-summary-sidebar .lp-course-buttons button.button:is(:hover, :focus, :focus-within, :focus-visible, :active), /* LearnPress */ body.learnpress-page :is(.lp-button, #lp-button):is(:hover, :focus, :focus-within, :focus-visible, :active), /* LearnPress Lesson Navi */ #popup-course #popup-footer .course-item-nav :is(.prev, .next) a:is(:hover, :focus, :focus-within, :focus-visible, :active), /* LP Certificates */ .course-summary-sidebar .lp-course-buttons button.lp-button:is(:hover, :focus, :focus-within, :focus-visible, :active), /* Good Practice */ .lp-button-good-practice-container a:is(:hover, :focus, :focus-within, :focus-visible, :active) { /* background: unset; */ background-color: #773876; background-color: var(--purple-kf); color: #fff; } /* Child Elements (i. e. Icons) */ /* Button */ :is(a.button, button):is(:hover, :focus, :focus-within, :focus-visible, :active) *, /* Input Submit */ input[type="submit"]:is(:hover, :focus, :focus-within, :focus-visible, :active) *, /* Input Button */ input[type="button"]:is(:hover, :focus, :focus-within, :focus-visible, :active) *, /* Ninja Forms */ body .nf-form-content button:is(:hover, :focus, :focus-within, :focus-visible, :active) *, body .nf-form-content input[type=button]:is(:hover, :focus, :focus-within, :focus-visible, :active) *, body .nf-form-content input[type=submit]:is(:hover, :focus, :focus-within, :focus-visible, :active) *, /* Search Form Header */ .after-header form input.search-submit[type="submit"]:is(:hover, :focus, :active, :focus-within) *, /* WP Bakery Page Builder */ #page .vc_btn3-container .vc_btn3:is(:hover, :focus, :focus-within, :focus-visible, :active) *, #page .vc_btn3-container .vc_general.vc_btn3:is(:hover, :focus, :focus-within, :focus-visible, :active) *, /* H5p Start Quiz */ .course-summary-sidebar .lp-course-buttons button.button:is(:hover, :focus, :focus-within, :focus-visible, :active) *, /* LeranPress Lesson Navi */ #popup-course #popup-footer .course-item-nav :is(.prev, .next) a:is(:hover, :focus, :focus-within, :focus-visible, :active) * { background-color: #773876; background-color: var(--purple-kf); color: #fff; } /* Icon on Button */ #page .vc_btn3-container .vc_btn3 .vc_btn3-icon { background-color: #773876; background-color: var(--purple-kf); color: #fff; transition: var(--transition-buttons); height: 100%; aspect-ratio: 1; position: absolute; top: 50%; left: 100%; display: flex; justify-content: center; align-items: center; border-left: 2px solid var(--grey-button); } #page .vc_btn3-container .vc_btn3 .vc_btn3-icon.fa-chevron-right { background-image: url(/wp-content/themes/twentytwelve-child/images/chevron-right.svg); background-size: 90%; background-position: center; background-repeat: no-repeat; } /* Check Flip */ /* #page .vc_btn3-container .vc_btn3 .vc_btn3-icon:not(.fa-chevron-right) { background-image: none; } */ #page .vc_btn3-container .vc_btn3 .vc_btn3-icon.fa-chevron-right:before { display: none; } #page .vc_btn3-container .vc_general.vc_btn3 .vc_btn3-icon::before { font-size: 3em; } #page .check-flip.vc_btn3-container .vc_general.vc_btn3 .vc_btn3-icon::before { font-size: 2.4em; } /* Icon right */ #page .vc_btn3-container .vc_general.vc_btn3.vc_btn3-icon-right .vc_btn3-icon { left: 100%; } /* Icon left */ #page .vc_btn3-container .vc_general.vc_btn3.vc_btn3-icon-left .vc_btn3-icon { left: unset; right: 100%; } /* #page .vc_btn3-container .vc_general.vc_btn3.vc_btn3-icon-right { padding-right: 48px; } #page .vc_btn3-container .vc_general.vc_btn3.vc_btn3-icon-left { padding-left: 48px; } */ /* Hover */ /*#page .vc_btn3-container .vc_general.vc_btn3:hover *, #page .vc_btn3-container .vc_general.vc_btn3:focus *, #page .vc_btn3-container .vc_general.vc_btn3:active * { color: #fff; }*/ /*----- Chevron Buttons -----*/ #page :is(.first-part-query-container .continue-query, .action-buttons button, .after-loginform .button) { display: inline-flex; align-items: center; justify-content: center; background: unset; background-color: var(--grey-button); line-height: normal; text-decoration: none; max-height: 54px; } #page :is(.first-part-query-container .continue-query, .after-loginform .button):after { content: ''; display: block; position: absolute; left: 100%; top: 0; height: 100%; width: 54px; background-color: var(--purple-kf); background-image: url(/wp-content/themes/twentytwelve-child/images/chevron-right.svg); background-size: 90%; background-position: center; background-repeat: no-repeat; border-left: 2px solid var(--grey-button); } #page :is(.first-part-query-container .continue-query, .action-buttons button, .after-loginform .button):is(:hover, :focus, :focus-within, :focus-visible, :active) { background-color: var(--purple-kf); color: #fff; text-decoration: none; } /*----- Pulsating Button Homepage -----*/ #page .pulsating-button .vc_general.vc_btn3 { text-transform: uppercase; color: #fff; background-color: var(--orange-headlines); border-radius: 100%; aspect-ratio: 1; max-width: 150px; font-size: 1em; box-shadow: 5px 5px 8px rgba(100,100,100,.2); /* animation-name: pulsating; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; */ hyphens: none; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; -o-hyphens: none; } @keyframes pulsating{ 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } } @media screen and (min-width: 768px){ #page .pulsating-button { position: absolute; left: unset; right: 0; top: 0; margin-top: 12px; } #page .wpb_text_column:has( + .pulsating-button) { padding-right: 150px; } } /*----- Video Container -----*/ /* 16:9 */ #page .video-container-16-9 > .wpb_wrapper, #page .wpb_text_column > .wpb_wrapper:has( > .wp-video) { position: relative; padding-top: 56.25%; overflow: hidden; } #page .video-container-16-9 > .wpb_wrapper > iframe, #page .video-container-16-9 > .wpb_wrapper > video, #page .video-container-16-9 > .wpb_wrapper > .wp-video, #page .video-container-16-9 > .wpb_wrapper > .wp-video .mejs-container.wp-video-shortcode, #page .wpb_wrapper > .wp-video, #page .wpb_wrapper > .wp-video .mejs-container.wp-video-shortcode { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; border: 0; } /* Subtitle Videos */ .mejs-captions-selector ul { padding: 0 !important; } .mejs-captions-selector ul * { color: #fff !important; } /*------------------------------- Breadcrumbs - Yoast SEO ------------------------------*/ #breadcrumbs { width: 100%; border-top: 10px solid #757372; border-top: 10px solid var(--grey-background); margin-top: 10px; margin-bottom: 20px; } #breadcrumbs * { font-size: 12px; color: #585958; color: var(--grey-text); } #breadcrumbs p { width: 100%; margin: 0 auto; display: none; } #breadcrumbs p span { color: #000; } @media screen and (min-width: 768px){ #breadcrumbs p { padding: 10px 30px; display: block; } } @media screen and (min-width: 1200px){ #breadcrumbs p { padding: 10px 50px; } } /*------------------------------- Homepage / Startseite ------------------------------*/ /* .n2-section-smartslider *:is(:focus-visible) { outline: 2px solid var(--color-focus) !important; border: 2px solid var(--color-focus) !important; } */ body .n2-ss-slider a.n2-ow:focus, body .n2-ss-slider .n2-ow-all a, body .n2-ss-slider .n2-ow-all a:focus, body .n2-ss-slider *:focus { outline: 2px dashed red !important; } /*------- Slider Showcase --------*/ .n2-ss-slider { font-size: 1em !important; } /*--- Video ---*/ .n2-ss-showcase-slides .n2-ss-item-content.n2-ss-item-video-container video { max-width: 100% !important; } /* Not active Slide */ /* .n2-ss-showcase-slides .n2-ss-slide:not(.n2-ss-slide-active) { zoom: .9; margin-left: 15%; margin-top: 3%; } */ /* .n2-ss-showcase-slides .n2-ss-slide { margin: 0 !important; } .n2-ss-showcase-slides .n2-ss-slide > * { transform: scale(1); transition: transform .8s linear; } .n2-ss-showcase-slides .n2-ss-slide:not(.n2-ss-slide-active) > * { transform: scale(.8); } */ #n2-ss-3 :is(.n2-ss-slider-1, .n2-ss-slider-2, .n2-ss-slider-3, .n2-ss-slide) { overflow: visible !important; } /* #n2-ss-3 .n2-ss-showcase-slides .n2-ss-slide { margin: 0 !important; } */ /* Small Slides */ #n2-ss-3 .n2-ss-showcase-slides .n2-ss-slide > *, #n2-ss-3 .n2-ss-showcase-slides .n2-ss-slide:first-child:has(+ .n2-ss-slide + .n2-ss-slide.n2-ss-slide-active) > *, #n2-ss-3 .n2-ss-showcase-slides .n2-ss-slide:first-child:has(+ .n2-ss-slide + .n2-ss-slide + .n2-ss-slide.n2-ss-slide-active) > * { transform: scale(.8); transition: transform .8s linear; } /* Active Slide (Big Slide) */ #n2-ss-3 .n2-ss-showcase-slides .n2-ss-slide.n2-ss-slide-active > * { transform: scale(1.4) !important; overflow: hidden !important; } /* Before & After Active Slide */ #n2-ss-3 .n2-ss-showcase-slides .n2-ss-slide.n2-ss-slide-active + .n2-ss-slide > *, #n2-ss-3 .n2-ss-showcase-slides .n2-ss-slide:has(+ .n2-ss-slide.n2-ss-slide-active) > *, #n2-ss-3 .n2-ss-showcase-slides .n2-ss-slide:first-child > *, #n2-ss-3 .n2-ss-showcase-slides .n2-ss-slide.n2-ss-slide-active:first-child + .n2-ss-slide + .n2-ss-slide + .n2-ss-slide + .n2-ss-slide > * { transform: scale(1.1); } #n2-ss-3 .n2-ss-slide-inner { overflow: hidden !important; } /* .n2-ss-showcase-slides .n2-ss-slide { margin-left: 0; transition: margin .8s linear; } */ /* Left side */ .n2-ss-showcase-slides .n2-ss-slide:has( + .n2-ss-slide.n2-ss-slide-active), .n2-ss-showcase-slides .n2-ss-slide.n2-ss-slide-active + .n2-ss-slide + .n2-ss-slide + .n2-ss-slide + .n2-ss-slide { /* margin-left: 10vw !important; */ margin-left: -50px !important; } /* Right side */ .n2-ss-showcase-slides .n2-ss-slide.n2-ss-slide-active + .n2-ss-slide, .n2-ss-showcase-slides .n2-ss-slide:has(+ .n2-ss-slide + .n2-ss-slide + .n2-ss-slide + .n2-ss-slide.n2-ss-slide-active) { /* margin-left: -10vw !important; */ margin-left: 50px !important; } /*----- Navigation -----*/ /* Navigation Buttons (Left Right) */ .n2-ss-showcase-horizontal .nextend-arrow { width: 60px !important; height: 60px !important; } .n2-ss-showcase-horizontal .nextend-arrow > * { background-color: var(--purple-kf) !important; } .n2-ss-showcase-horizontal .nextend-arrow * { opacity: 1 !important; height: 100% !important; width: 100% !important; padding: 0 !important; } .n2-ss-showcase-horizontal .nextend-arrow > div > img { display: none !important; } .n2-ss-showcase-horizontal .nextend-arrow > div { background-image: url(/wp-content/themes/twentytwelve-child/images/chevron-left.svg) !important; background-size: 90% !important; background-position: center !important; background-repeat: no-repeat !important; } .n2-ss-showcase-horizontal .nextend-arrow.nextend-arrow-next > div { background-image: url(/wp-content/themes/twentytwelve-child/images/chevron-right.svg) !important; } .n2-ss-swipe-element { position: relative; } /* Previous */ .n2-ss-showcase-horizontal .nextend-arrow-previous { /* left: calc(50% - 23.5vw) !important; transform: translateX(-50%) !important; */ left: 0 !important; transform: translateX(-50%) !important; } /* Next */ .n2-ss-showcase-horizontal .nextend-arrow-next { left: unset !important; right: 0 !important; transform: translateX(50%) !important; } @media screen and (min-width: 100px){ .n2-ss-showcase-horizontal .nextend-arrow-previous { left: calc(50% - 29vw) !important; } .n2-ss-showcase-horizontal .nextend-arrow-next { right: calc(50% - 29vw) !important; } } @media screen and (min-width: 1350px){ .n2-ss-showcase-horizontal .nextend-arrow-previous { left: calc(50% - 403px) !important; } .n2-ss-showcase-horizontal .nextend-arrow-next { right: calc(50% - 403px) !important; } } @media screen and (min-width: 1600px){ .n2-ss-showcase-horizontal .nextend-arrow-previous { left: calc(50% - 384px) !important; } .n2-ss-showcase-horizontal .nextend-arrow-next { right: calc(50% - 384px) !important; } } /* Navigation Bullets Bottom */ .n2-ss-widget.n2-ss-control-bullet { bottom: unset !important; top: calc(100% + 20px) !important; } /* Bullets */ #n2-ss-3 .nextend-bullet-bar .n2-bullet { background: var(--grey-button); } /* Hover */ #n2-ss-3 .nextend-bullet-bar .n2-bullet:is(:hover, :focus) { background: var(--purple-kf); } /* Active */ #n2-ss-3 .nextend-bullet-bar .n2-bullet.n2-active { background: var(--orange-headlines); } /* Overlay Headline over Video */ .n2-ss-showcase-slides .n2-ss-layer.headline-overlay-video { height: 100% !important; inset: unset !important; /* font-size: 1em !important; */ } .n2-ss-showcase-slides .n2-ss-layer.headline-overlay-video > .n2-ss-item-content { height: 100% !important; display: flex !important; align-items: center !important; box-sizing: border-box !important; padding: 30px !important; font-family: 'Barlow', sans-serif !important; font-weight: 700 !important; font-size: 2.71em !important; font-size: clamp(24px, 2.4vw, 40px) !important; text-transform: uppercase !important; line-height: 1.2 !important; /* hyphens: auto !important; -webkit-hyphens: auto !important; -moz-hyphens: auto !important; -ms-hyphens: auto !important; -o-hyphens: auto !important; */ } /* Overlay Image */ .n2-ss-showcase-slides .image-these { position: absolute; top: 0 !important; left: 0; width: 100% !important; height: 100% !important; margin: 0 !important; overflow: hidden !important; } .n2-ss-showcase-slides .image-these img { width: 100% !important; height: 100%; object-fit: cover; } /* Button on Video */ .video-button a { font-family: 'Barlow Condensed' !important; background-color: var(--purple-kf) !important; font-size: 1.2em !important; } .video-button a:is(:hover, :focus, :focus-within, :focus-visible, :active) { background-color: var(--orange-headlines) !important; } /*----- Hover Overlay -----*/ .n2-ss-showcase-slides .n2-ss-layers-container:hover > .headline-overlay-video, .n2-ss-showcase-slides .n2-ss-layers-container:hover > .image-these { display: none; } /*---------------------------------- * Video Slider Homepage ------------------------------------*/ body.home #primary .entry-content .wpb-content-wrapper .vc_row.video-slider { padding-bottom: 50px !important; } body.home #primary .entry-content .wpb-content-wrapper .vc_row.video-slider .vc_column-inner .wpb_wrapper{ position: relative; max-height: 750px; } body.home #primary .entry-content .wpb-content-wrapper .vc_row.video-slider .vc_column-inner .wpb_wrapper > .wpb_text_column{ position: absolute; top: unset; bottom: 15%; margin: 0; padding: 0; display: flex; justify-content: center; width: 100%; } body.home #primary .entry-content .wpb-content-wrapper .vc_row.video-slider .vc_column-inner .wpb_wrapper > .wpb_text_column h1 { font-size: 1.2rem; color: white; text-shadow: 10px 10px 28px rgba(0, 0, 0, 0.7) !important; max-width: 75% } @media screen and (min-width: 700px){ body.home #primary .entry-content .wpb-content-wrapper .vc_row.video-slider .vc_column-inner .wpb_wrapper > .wpb_text_column h1 { font-size: 2.4rem; } } @media screen and (min-width: 1240px){ body.home #primary .entry-content .wpb-content-wrapper .vc_row.video-slider { max-height: 750px; } body.home video { width: 100vw; } body.home #primary .entry-content .wpb-content-wrapper .vc_row.video-slider .vc_column-inner .wpb_wrapper > .wpb_text_column{ top: 66.6%; } body.home #primary .entry-content .wpb-content-wrapper .vc_row.video-slider .vc_column-inner .wpb_wrapper > .wpb_text_column h1{ font-size: 4rem; } } @media screen and (min-width: 1920px){ body.home #primary .entry-content .wpb-content-wrapper .vc_row.video-slider{ max-height: 850px; } body.home #primary .entry-content .wpb-content-wrapper .vc_row.video-slider .vc_column-inner .wpb_wrapper > .wpb_text_column h1{ font-size: 5rem; } } /*------------------------------- Kontaktformular ------------------------------*/ /*----- Ninja Forms -----*/ .nf-form-cont { max-width: 1200px; /* margin-left: auto; margin-right: auto; */ padding: 0; } /* Form Title */ .nf-form-cont .nf-form-title { max-width: 1024px; /* margin-left: auto; margin-right: auto; */ display: block; display: none; } /* line before content (required fields *) */ /*.nf-form-fields-required { display: none; }*/ /* Form Content */ .nf-form-cont form .nf-form-content { max-width: none; padding: 0; } /* Label */ .nf-field-label label { cursor: pointer; } /* Checkbox | Description Position | Label */ .checkbox-container.nf-field-container .nf-field .field-wrap { flex-direction: column; } .checkbox-container.nf-field-container .nf-field .field-wrap .nf-field-label { margin-bottom: 5px; } /* Success Message */ .nf-form-wrap.ninja-forms-form-wrap { max-width: 1200px; /* margin-left: auto; margin-right: auto; */ padding: 0; width: 100%; } /*------------------------------- Sidebar (Accessibility) ------------------------------*/ /* Container */ .sidebar { position: fixed; top: calc(40vh - 50px); top: 120px; left: -300px; transition: left .3s linear; z-index: 10; /* display: none; */ display: block; } body.admin-bar .sidebar { top: 160px; } @media screen and (min-width: 783px){ body.admin-bar .sidebar { top: 146px; } } .sidebar p { font-size: .8em; } .sidebar > * { float: right; } .sidebar.sidebarToggle { left: 0; } /* Accessibility Box Trigger */ .sidebar-handle { width: 50px; height: 50px; margin-left: -1px; padding: 4px; background-color: var(--orange-headlines); background-color: var(--grey-text); box-shadow: 3px -3px 5px rgba(0,0,0,.5); box-shadow: none; border-radius: 0; border-width: 1px; border-style: solid; border-color: var(--orange-headlines); border-color: var(--grey-text); border-left: none; position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; cursor: pointer; } .sidebar-handle > div { height: 100%; width: 100%; } .sidebar-handle * { background: transparent !important; } .sidebar-handle:is(:hover, :focus, :focus-within, :focus-visible, :active) { border-color: var(--purple-kf); } .sidebar-handle img { width: 100%; height: 100%; object-fit: contain; object-position: center; } .sidebar-handle img:not(:last-child) { margin-bottom: 20px; } /* Accessibility Box */ .accessibility-handle > div > img { height: 100%; width: auto; } .sidebar-content { width: 300px; padding: 20px; background-color: #fff; border: 1px solid #000; border-bottom-right-radius: 3px; border-left: none; position: relative; z-index: 0; } .sidebar-content .textwidget > *:not(:last-child) { margin-bottom: 8px; display: block; clear: both; float: none; } .sidebar-content > * { display: none; animation-duration: 1s; animation-fill-mode: forwards; animation-count: 1; } /* Animationen */ .showSidebar.sidebar .sidebar-content > * { animation-name: showSidebar; display: block; } .hideSidebar.sidebar .sidebar-content > * { animation-name: hideSidebar; display: none; } @keyframes showSidebar{ 0% { display: none; } 1% { display: block; } 100% { display: block; } } @keyframes hideSidebar{ 0% { display: block; } 1% { display: block; } 100% { display: none; } } /* image */ .sidebar-content img { border-radius: 100%; max-width: 100%; } @media screen and (min-width: 1366px){ .sidebar { left: -380px; } .sidebar-content { width: 380px; } .sidebar-handle/* :not(.accessibility-handle) */ { width: 60px; height: 60px; } /* .sidebar-handle img { width: 40px; } */ .sidebar-handle img:not(:last-child), .sidebar-handle img:not(:last-of-type) { margin-bottom: 25px; } } /*----------- Contact Box Sidebar ----------*/ /* Container */ #contact-box-container { left: unset; right: -300px; top: 40vh; transition: right .3s linear; } #contact-box-container > * { float: left; } #contact-box-container.sidebar.sidebarToggle { left: unset; right: 0; } #contact-box-container.sidebar .sidebar-content { border: 1px solid var(--grey); border-bottom-left-radius: 3px; border-bottom-right-radius: 0; border-right: none; } /* Contact Box Trigger */ #contact-box-container .contact-handle { margin-right: -1px; border-radius: 3px 0 0 3px; border: 1px solid var(--grey); border-right: none; } @media screen and (min-width: 1366px){ #contact-box-container { right: -380px; } } /*----------- Flyout Menu Sidebar ----------*/ /* Overlay */ .flyout-menu-overlay { position: fixed; left: 0; top: 0; z-index: -1; height: 100vh; width: 100vw; background-color: rgba(0, 0, 0, 0.3); display: none; } #flyout-menu-container.showSidebar .flyout-menu-overlay { display: block; } /* Container */ #flyout-menu-container { position: fixed; left: unset; left: calc(-90vw + 50px); top: 180px; top: 0; transition: right .5s linear; z-index: 999; top: 0; transition: left .3s linear; } #flyout-menu-container.showSidebar { left: 0; } #flyout-menu-container .sidebar-content { height: 0; padding: 0; overflow: auto; width: calc(90vw - 50px); } #flyout-menu-container.showSidebar .sidebar-content { height: 100vh; padding: 90px 20px 20px; } @media screen and (min-width: 800px){ #flyout-menu-container.showSidebar .sidebar-content { padding: 70px 20px 20px; } } /* body.admin-bar #flyout-menu-container { top: 46px; } body.admin-bar #flyout-menu-container.showSidebar .sidebar-content { height: calc(100vh - 46px); } */ @media screen and (min-width: 783px){ /* body.admin-bar #flyout-menu-container { top: 32px; } body.admin-bar #flyout-menu-container.showSidebar .sidebar-content { height: calc(100vh - 32px); } */ #flyout-menu-container { left: -620px; } #flyout-menu-container .sidebar-content { width: 620px; } } #flyout-menu-container > * { float: right; } #flyout-menu-container.sidebar.sidebarToggle { left: 0; top: 0; } body.admin-bar #flyout-menu-container.sidebar { top: 46px; } body.admin-bar .stickyHeader #flyout-menu-container.sidebar { top: 0; } @media screen and (min-width: 783px){ body.admin-bar #flyout-menu-container.sidebar { top: 32px; } } #flyout-menu-container.sidebar .sidebar-content { border: 1px solid var(--grey); border-bottom-right-radius: 3px; border-bottom-left-radius: 0; border-left: none; } /* Contact Box Trigger */ #flyout-menu-container .sidebar-handle { margin: 0; border-radius: 0; border: 1px solid var(--grey); background-color: var(--light-grey); background-color: #eee; background-color: transparent; border-left: none; position: fixed; padding: 8px; /* top: 200px; top: 78px; */ top: 38px; left: 0; transition: top .3s linear; } body.admin-bar #flyout-menu-container .sidebar-handle { top: 84px; } body.admin-bar .stickyHeader #flyout-menu-container .sidebar-handle { top: 46px; } @media screen and (min-width: 783px){ body.admin-bar #flyout-menu-container.sidebar { top: 32px; } } @media screen and (min-width: 800px){ #flyout-menu-container .sidebar-handle { top: 10px; } body.admin-bar #flyout-menu-container .sidebar-handle { top: 42px; } } .stickyHeader #flyout-menu-container .sidebar-handle { top: 0; } #flyout-menu-container .sidebar-handle .textwidget { position: relative; padding: 8px 6px; padding: 4px 0 8px; display: flex; flex-direction: column; justify-content: space-between; align-items: center; height: 100%; height: 35px; width: 100%; } #flyout-menu-container .sidebar-handle .textwidget > div { background-color: var(--grey-text) !important; background-color: var(--dark-grey) !important; height: 3px; border-radius: 1px; width: 100%; } #flyout-menu-container .sidebar-handle .textwidget > span { position: absolute; top: calc(100% - 6px); line-height: 1; font-size: .85em; } #flyout-menu-container .sidebar-handle:is(:hover, :focus, :focus-within, :focus-visible, :active) span { color: #000 !important; color: var(--orange-headlines) !important; } #flyout-menu-container .sidebar-handle:is(:hover, :focus, :focus-within, :focus-visible, :active) .textwidget > div { background-color: var(--orange-headlines) !important; } /* @media screen and (min-width: 1366px){ #flyout-menu-container .sidebar-handle .textwidget { padding: 14px 10px; } } */ /* @media screen and (min-width: 1366px){ #flyout-menu-container { left: -380px; } } */ /* Menu */ #flyout-menu-container ul:is(.nav-menu, .menu) ul.sub-menu { background-color: transparent; } #flyout-menu-container ul:is(.nav-menu, .menu) > li > a { padding: 8px 5px !important; } /* Headlines */ #flyout-menu-container .menu-headline { font-weight: 600; display: block; margin-top: 12px; } #flyout-menu-container ul:is(.nav-menu, .menu) li.menu-headline > a { font-weight: 600; padding: 14px 0 0 !important; height: auto; } #flyout-menu-container ul:is(.nav-menu, .menu) li.menu-headline > button.trigger { display: none; } #flyout-menu-container ul:is(.nav-menu, .menu) li.menu-headline > .sub-menu { display: block !important; border: none !important; padding: 0; } #flyout-menu-container ul:is(.nav-menu, .menu) li.menu-headline > .sub-menu li:last-child { border: none !important; } #flyout-menu-container ul:is(.nav-menu, .menu) li.menu-headline > .sub-menu a { padding: 10px 0 !important; height: auto; } /*--- Icons ---*/ #flyout-menu-container ul.learning-area li > a { padding-left: 0; } li > a:before { margin-right: 8px; } .learning-area li > a:before, li.menu-headline > ul.sub-menu > li > a:before { font-family: 'Material Symbols Sharp'; background-color: var(--light-grey); background-color: transparent; padding: 0 4px; padding: 0 0 0 4px; } ul.learning-area > li > ul.sub-menu > li > a:is(:hover, :focus, :focus-within, :focus-visible, :active)::before { color: #fff; } /* targets */ .learning-area li.learning-goal > a:before, li.targets > ul.sub-menu > li > a:before { content: '\f70c'; color: #318ea1; } /* courses to-do */ .learning-area li.courses > a:before, li.courses-to-do > ul.sub-menu > li > a:before { content: '\e835'; color: var(--orange-headlines); } /* finished courses */ .learning-area li.finished-courses > a:before, li.finished-courses > ul.sub-menu > li > a:before { content: '\f1fe'; color: #718c4a; } /*----------- Finished Courses Toggle ----------*/ .finished-courses-toggle-btn { background: transparent !important; border: none; padding: 0; margin: 1.714285714rem 0; font: inherit; color: var(--orange-headlines); cursor: pointer; } .finished-courses-toggle-btn * { background: transparent !important; margin: 0 !important; color: var(--orange-headlines) !important; fill: var(--orange-headlines) !important; } .finished-courses-toggle-btn svg { width: 32px; margin-right: 12px !important; padding-top: 4px; transition: transform .2s ease-in-out; } .finished-courses-toggle-btn.active svg { transform: rotate(180deg); padding-top: 0; } /* Hover */ .finished-courses-toggle-btn:hover { background: transparent !important; color: var(--orange-headlines) !important; } .finished-courses-toggle-btn:hover * { text-decoration: underline !important; } /* Content */ .finished-courses-toggle-content { display: none; } .finished-courses-toggle-content.active { display: block; } /*--- Separator ---*/ body hr { margin: 2rem 0; height: 2px; background-color: var(--dark-grey); } /*----------- Accessibility Box Sidebar ----------*/ /* Container */ #accessibility-box-container { left: -250px; z-index: 9999999; } #accessibility-box-container.sidebar.sidebarToggle { left: 0; } #accessibility-box-container .sidebar-content { width: 250px; border-right: none; border-left: 1px solid #000; } /* Float Right */ #accessibility-box-container.float-right { left: unset; right: -250px; } #accessibility-box-container.float-right .sidebar-content { right: 0; } #accessibility-box-container.float-right.sidebar > * { float: left; } #accessibility-box-container.float-right.sidebar.sidebarToggle { left: unset; right: 0; } /*----- Scroll Toggle Handler -----*/ #accessibility-box-container.toggleVisibility { animation-iteration-count: 1; animation-duration: .35s; animation-fill-mode: forwards; animation-timing-function: ease-in; } .scrollDown #accessibility-box-container.toggleVisibility { /* display: none; opacity: 0; */ animation-name: toggleHideAcessibilitySidebar; } .scrollUp #accessibility-box-container.toggleVisibility { /* display: block; */ animation-name: toggleShowAcessibilitySidebar; } @keyframes toggleHideAcessibilitySidebar{ 0% { opacity: 1; margin-top: 0; display: block; } 99% { opacity: 0; margin-top: -40px; display: block; } 100% { opacity: 0; margin-top: -40px; display: none; } } @keyframes toggleShowAcessibilitySidebar{ 0% { opacity: 0; margin-top: -40px; display: none; } 1% { opacity: 0; margin-top: -40px; display: block; } 100% { opacity: 1; margin-top: 0; display: block; } } /*------------------------------- Feedback Popup ------------------------------*/ .feedback-popup-container { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; padding: 40px; display: flex; justify-content: center; align-items: center; background-color: rgba(0,0,0,.5); z-index: 1000; transition: opactiy .5s ease; opacity: 0; display: none; } .feedback-popup-container.vsbl { opacity: 1; display: flex; } .feedback-popup-container > .feedback-popup-wrapper { width: min(90%, 740px); height: 100%; background-color: #fff; padding: 40px 20px 20px; position: relative; overflow: auto; } /* Close */ .feedback-popup-container .close-feedback-popup { position: absolute; top: 0; left: unset; right: 0; height: 52px; width: 52px; } .feedback-popup-container .close-feedback-popup button { display: flex; justify-content: center; align-items: center; } .feedback-popup-container .close-feedback-popup span { font-size: 2.4em; line-height: 1; padding-bottom: 8px; background: transparent !important; } /*--------------------------------------- * Zielabfrage ----------------------------------------*/ /*----------- Drag and Drop --------------*/ .first-part-query-container { perspective: 1000px; margin-top: 35px !important; } .first-part-query-container.hidden { display: none; } .first-part-query { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; align-items: stretch; perspective: 1000px; margin-left: -10px; margin-right: -10px; max-width: 800px; margin: 0 -10px; } .first-part-query > .single-rollenabfrage { width: 100%; padding: 10px; cursor: pointer; } @media screen and (min-width: 768px){ /* .first-part-query > .single-rollenabfrage { width: 50%; } */ } @media screen and (min-width: 1024px){ .first-part-query { max-width: none; } .first-part-query > .single-rollenabfrage { width: 33.333%; } } .first-part-query-container > p > strong { font-family: 'Barlow Condensed', sans-serif; font-size: 1.2em; } .first-part-query > .single-rollenabfrage > .inner-wrapper { width: 100%; aspect-ratio: 1 / 1; display: flex; justify-content: center; align-items: center; padding: 0; position: relative; transform-style: preserve-3d; transition: transform 0.5s; } .first-part-query > .single-rollenabfrage * { color: var(--orange-headlines); } .first-part-query > .single-rollenabfrage:is(:hover, :focus, :focus-within, :focus-visible, :active) > .inner-wrapper { transform: rotateY(180deg); } .first-part-query > .single-rollenabfrage > .inner-wrapper > div { width: 100%; height: 100%; position: absolute; backface-visibility: hidden; display: flex; justify-content: center; align-items: center; text-align: center; background-color: var(--orange-headlines); border: 2px solid var(--orange-headlines); background-color: #efeff0; border: 2px solid #efeff0; border: none; padding: 10px; cursor: pointer; } /* Selected Item */ /* .first-part-query > .single-rollenabfrage.selected > .inner-wrapper > div:is(.front-side, .back-side) { border-color: var(--purple-kf); } */ .first-part-query > .single-rollenabfrage.selected > .inner-wrapper > :is(.front-side/* , .back-side */), .first-part-query > .single-rollenabfrage.selected > .mobile-wrapper { background-color: var(--orange-headlines) !important; background-color: var(--purple-kf) !important; color: #fff; } /*-- Front Side --*/ .first-part-query > .single-rollenabfrage > :is(.inner-wrapper, .mobile-wrapper) :is(.front-side, .term-name) { font-weight: 700; font-size: 1.6em; } /*----- Mobile View ---*/ .first-part-query > .single-rollenabfrage > .mobile-wrapper { display: flex; height: 100%; padding: 32px 16px; background-color: #efeff0; /* aspect-ratio: 2 / 1; */ flex-direction: column; align-items: center; justify-content: center; } .first-part-query > .single-rollenabfrage > .inner-wrapper { display: none; } /* Hover */ .first-part-query > .single-rollenabfrage:is(:hover, :focus, :focus-within, :focus-visible, :active), .first-part-query > .single-rollenabfrage:is(:hover, :focus, :focus-within, :focus-visible, :active) > .mobile-wrapper { text-decoration: none !important; } .first-part-query > .single-rollenabfrage:is(:hover, :focus, :focus-within, :focus-visible, :active) > .mobile-wrapper { background-color: #e5ddea; } .first-part-query > .single-rollenabfrage > .mobile-wrapper * { color: inherit; text-decoration: none !important; } .first-part-query > .single-rollenabfrage > .mobile-wrapper h5 { display: none; } @media screen and (min-width: 1024px){ .first-part-query > .single-rollenabfrage > .mobile-wrapper { display: none; } .first-part-query > .single-rollenabfrage > .inner-wrapper { display: block; } /* .first-part-query > .single-rollenabfrage > .inner-wrapper { flex-direction: column; aspect-ratio: inherit; } .first-part-query > .single-rollenabfrage > .inner-wrapper > div { position: static; height: auto; display: block; transform: none !important; backface-visibility: visible; } */ } /*-- Back Side --*/ .first-part-query > .single-rollenabfrage > .inner-wrapper .back-side { transform: rotateY(180deg); } .first-part-query > .single-rollenabfrage > .inner-wrapper .back-side { background-color: var(--orange-headlines); border-color: var(--orange-headlines); color: #fff; } .first-part-query > .single-rollenabfrage > .inner-wrapper .back-side * { color: #fff; } /*-- Weiter Button --*/ #page .first-part-query-container .continue-query { display: flex; margin: 20px auto 0; } /*-- Skip Query --*/ #page .skip-query { margin-top: 32px !important; border-top: 2px solid var(--light-grey) !important; padding-top: 32px !important; } @media screen and (min-width: 1024px){ #page .skip-query { margin-top: 48px !important; padding-top: 48px !important; } } @media screen and (min-width: 1366px){ #page .skip-query { margin-top: 60px !important; padding-top: 60px !important; } } /*------- Flip Effekt WPBakery --------*/ #page .vc_row.wpb_row.flip-grid > .wpb_column.vc_column_container { padding: 10px !important; } #page .vc_row.wpb_row.flip-grid > .wpb_column > .vc_column-inner { margin: 0 !important; padding: 0 !important; } #page .vc_row.wpb_row.flip-grid .vc_row { width: 100%; aspect-ratio: 1 / 1; display: flex; justify-content: center; align-items: center; padding: 0; position: relative; transform-style: preserve-3d; transition: transform 0.5s; } #page .vc_row.wpb_row.flip-grid .vc_row > .wpb_column { width: 100%; height: 100%; position: absolute; display: flex; justify-content: center; align-items: center; backface-visibility: hidden; background-color: var(--light-grey); padding: 12px !important; } /* Front Side */ #page .vc_row.wpb_row.flip-grid .vc_row > .wpb_column:first-child { } /* Back Side */ #page .vc_row.wpb_row.flip-grid .vc_row > .wpb_column:nth-child(2) { transform: rotateY(180deg); } /* Hover */ #page .vc_row.wpb_row.flip-grid .vc_column-inner > .wpb_wrapper.hovered > .vc_row { transform: rotateY(180deg); } @media screen and (min-width: 480px) and (max-width: 767px) { #page .vc_row.wpb_row.flip-grid > .wpb_column { width: 50%; float: left; } } /*----- Button Icons -----*/ /* #page :is(.continue-query, #save-selection, #save-all) { position: relative !important; } #page :is(.continue-query, #save-selection, #save-all) i { display: flex; align-items: center; justify-content: center; position: absolute; top: 0; left: calc(100% + 5px); font-size: 1.5em; height: 100%; width: auto; aspect-ratio: 1 / 1; background-color: var(--purple-kf); color: #fff; } #page :is(.continue-query, #save-selection, #save-all) i.fa-chevron-right:before { content: "\f054"; } */ /*----------- Drag and Drop --------------*/ .dragndrop-container { margin-top: 0 !important; } .dragndrop-container.hidden { display: none; } /* Overlay */ /* .dnd-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0); z-index: 10; pointer-events: none; display: flex; justify-content: center; align-items: center; } .dnd-overlay .dnd-overlay-mask { width: calc(100vw - 50px); height: 400px; position: absolute; top: 30vh; left: 25px; background: transparent; box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7); pointer-events: none; } */ .draggable-container { margin-bottom: 0; display: flex; flex-wrap: wrap; justify-content: flex-start; } .dragndrop-container > h3 { margin-top: 0; } /* Single Items */ .single-zielabfrage { position: relative; width: fit-content; display: flex; align-items: center; margin-bottom: 0; width: 100%; } @media screen and (min-width: 768px){ .single-zielabfrage { width: 50%; } } .draggable-item { position: relative; margin-bottom: 10px; cursor: move; width: fit-content; clear: both; float: left; margin: 0 5px; padding: 0; background-color: transparent; font-size: 1em; font-weight: normal; line-height: 1.8; font-family: 'Barlow', sans-serif; } .dropped .draggable-item { opacity: .5; } .dropped .draggable-item.ui-draggable-dragging { opacity: 0; } /* Button Handler Accessibility Focus */ .draggable-item button { position: absolute; left: 0; top: 8px; top: 0; height: calc(100% - 16px); height: 100%; width: 100%; display: block; padding: 0; /* background-color: var(--purple-kf); */ background-color: rgba(119,56,118,.4) !important; opacity: 0; z-index: -1; } .draggable-item button:is(:focus) { opacity: 1; z-index: 1; } /* Info Button */ .single-zielabfrage button.info { background-color: var(--orange-headlines); color: #fff; font-size: .8em; border-radius: none; display: flex; align-items: center; justify-content: center; width: 23px; height: 23px; margin: 0; padding: 0; } .single-zielabfrage button.info:is(:hover, :focus, :focus-within, :focus-visible, :active) { background-color: var(--purple-kf); } .single-zielabfrage button.info.active { color: transparent; } .single-zielabfrage button.info.active::after { content: 'X'; position: absolute; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #fff; } /* Info Description */ .single-zielabfrage .za-description { display: none; position: absolute; top: 100%; left: 0; width: 100%; padding: 10px; background-color: #fff; box-shadow: 0 0 5px rgba(0,0,0,.5); z-index: 1; } .single-zielabfrage .za-description.vsbl { display: block; z-index: 99; } /** * Drop Container **/ .drop-container { position: relative; margin-top: 0 !important; } #drop-target { width: 60%; height: 32%; border: 2px solid gray; border: none; position: absolute; margin: 0 auto; left: 16%; top: 0; /* transform: translateX(-50%); */ } #drop-background-image { /* background-image: url(https://elearning.klischeefrei.kompetenzz.net/wp-content/themes/twentytwelve-child/images/AdobeStock_225403030_Preview_.png); background-repeat: no-repeat; background-size: contain; aspect-ratio: 3 / 1.85; */ /* background-size: cover; background-position: center bottom; */ position: relative; aspect-ratio: 1 / 1; display: flex; justify-content: center; overflow: hidden; } #drop-background-image svg { width: 183%; height: 96%; position: absolute; top: unset; bottom: 0; } @media screen and (min-width: 540px){ #drop-background-image { aspect-ratio: 1.3 / 1; } } @media screen and (min-width: 768px){ #drop-target { left: 17%; } #drop-background-image { aspect-ratio: 1.6 / 1; } } @media screen and (min-width: 1000px){ #drop-target { height: 30%; top: 8%; } #drop-background-image { aspect-ratio: 3 / 1.6; } #drop-background-image svg { width: 100%; height: 89%; } } /*----- Falling Characters - Font -----*/ .cloned-text, .falling-character { font-size: 20px; } /*----- Machine -----*/ .cls-1, .cls-2, .cls-3, .cls-4, .cls-5, .cls-6, .cls-7, .cls-8, .cls-9, .cls-10 { isolation: isolate; } .cls-1, .cls-2, .cls-11, .cls-12, .cls-13, .cls-14, .cls-15, .cls-16, .cls-17, .cls-18, .cls-4, .cls-19, .cls-20, .cls-21, .cls-5, .cls-6, .cls-7, .cls-22, .cls-23, .cls-24, .cls-8, .cls-9, .cls-10, .cls-25 { stroke-width: 0px; } .cls-1, .cls-2, .cls-4, .cls-9, .cls-10 { mix-blend-mode: multiply; } .cls-1, .cls-9 { fill: #dadada; } .cls-2, .cls-7 { opacity: .5; } .cls-2, .cls-7, .cls-22 { fill: #e0657d; } .cls-11 { fill: #414459; } .cls-12 { fill: #7fb269; } .cls-13 { fill: #f45881; } .cls-14 { fill: #773876; } .cls-15 { fill: #5861a0; } .cls-16, .cls-4 { fill: #eaeaf4; } .cls-17 { fill: #d3a484; } .cls-26 { opacity: .6; } .cls-18 { fill: #d7d7e2; } .cls-19 { fill: #f6f6f6; } .cls-20, .cls-6 { fill: #fccc44; } .cls-21 { fill: #fcc265; } .cls-5, .cls-6, .cls-7, .cls-8 { mix-blend-mode: screen; } .cls-5, .cls-8, .cls-25 { fill: #aba8c1; } .cls-23 { fill: #fff; } .cls-24 { fill: #f9db98; } .cls-8 { opacity: .54; } .cls-9 { opacity: .62; } .cls-10 { fill: #efbca0; } /*---- Arrow Down ----*/ #arrow-down { animation: arrowDown 1.4s infinite; } @keyframes arrowDown { 0% { transform: translateY(0); } 25% { transform: translateY(-1%); } 75% { transform: translateY(1%); } 100% { transform: translateY(0); } } .machineFinished #arrow-down { display: none; } /*---- Top Light ----*/ :is(#light-top-left-group, #light-top-right) :is(path, rect) { fill: #eee; } :is(svg.machineOn) :is(#light-top-left-group, #light-top-right) :is(path, rect) { fill: #fccc44; animation: blinkingLights 1s infinite; } @keyframes blinkingLights { 0% { fill: #fccc44; } 50% { fill: #eee; } 100% { fill: #fccc44; } } /*---- Screen ----*/ #screen { fill: transparent; } svg.machineOn #screen { fill: #fff; animation: flickeringScreen .6s 1; } @keyframes flickeringScreen { 0% { fill: transparent; } 10% { fill: #fff; } 40% { fill: #fff; } 45% { fill: transparent; } 55% { fill: #fff; } 70% { fill: #fff; } 75% { fill: transparent; } 80% { fill: #fff; } 100% { fill: #fff; } } /*---- Check Icon ----*/ .lights-rect .cls-15.lightOn { fill: var(--orange-kf); } /*---- Check Icon ----*/ #check-icon { opacity: 0; } svg.machineFinished #check-icon { /* opacity: 1; */ animation: checkIcon .3s 1; animation-fill-mode: forwards; animation-delay: .5s; } @keyframes checkIcon { 0% { opacity: 0; } 100% { opacity: 1; } } /*---- Lever (Hebel) ----*/ #lever { transform: translateY(0); } svg.machineFinished #lever { transform: translateY(4%); animation: leverDown .4s linear 1; } @keyframes leverDown { 0% { transform: translateY(0); } 100% { transform: translateY(4%); } } /*---- Box closed (finished) ----*/ #box-closed { transform: translateX(-12%); } svg.machineFinished #box-closed { /* transform: translateX(0); */ animation: boxFinished 2s linear 1; animation-fill-mode: forwards; animation-direction: alternate; animation-delay: .6s; } @keyframes boxFinished { 0% { transform: translateX(-12%); } 100% { transform: translateX(0); } } /*---- Box open ----*/ svg :is(#box-open-1, #box-open-2, #box-open-3) { transform: translateX(0); } svg.machineShown :is(#box-open-1, #box-open-2, #box-open-3) { animation: boxOpenStart 2s linear 1; animation-fill-mode: forwards; animation-direction: alternate; animation-delay: .2s; } @keyframes boxOpenStart { 0% { transform: translateX(0); } 100% { transform: translateX(14%); } } svg.machineFinished :is(#box-open-1, #box-open-2/* , #box-open-3 */) { transform: translateX(14%); animation: boxOpenFinish 2s linear 1; animation-fill-mode: forwards; animation-direction: alternate; animation-delay: .6s; } @keyframes boxOpenFinish { 0% { transform: translateX(14%); } 100% { transform: translateX(25%); } } /*-- Add Post IDs Button --*/ .add_post_ids.hidden { display: none; } /*-- Send Term IDs Button --*/ .send_term_ids.hidden { display: none; } .send_term_ids { position: absolute; position: fixed; top: 50%; left: unset; right: 0; padding: 8px 68px 8px 8px; background-color: #efefef; } #page .vc_btn3-container.send_term_ids a.vc_btn3 { background-color: #fff; } @media screen and (min-width: 1024px){ .send_term_ids { padding: 28px 68px 28px 24px; } } /*-- Modal No Selection --*/ .modal-no-selection { display: none; position: fixed; top: 0; left: 0; width: 100vw; max-width: none !important; height: 100vh; background-color: rgba(0,0,0,.7); z-index: 999; align-items: center; justify-content: center; } .modal-no-selection.vsbl { display: flex; } /* Content */ .modal-no-selection .modal-content { position: relative; background-color: #fff; padding: 30px 24px 24px; width: min(90%, 600px); } /* Button */ .modal-content button.ok { margin-top: 32px; } /* Close */ .close { position: absolute; top: 0px; right: 0px; height: 30px; width: 30px; font-size: 1.4em; display: flex; align-items: center; justify-content: center; cursor: pointer; } /* visible Content */ .modal-no-selection .modal-content > div { display: none; } .modal-no-selection .modal-content > div.vsbl { display: block; } /*--------------------------------------- * Custom Login Form ----------------------------------------*/ /* Container */ #loginform { margin-top: 20px; margin-left: 0; padding: 26px 24px 34px; overflow: hidden; background: #fff; border: 1px solid #c3c4c7; box-shadow: 0 1px 3px rgba(0,0,0,.04); max-width: 450px; } /* Labels */ #loginform label { font-size: .8em; line-height: 1.5; display: inline-block; margin-bottom: 3px; } /* Input Fields */ #loginform :is(.input, input[type=password], input[type=text]) { font-size: 1em; line-height: 1.33333333; width: 100%; border-width: .0625rem; padding: .1875rem .3125rem; margin: 0 6px 16px 0; min-height: 40px; max-height: none; } /* Stay logged-in */ #loginform .login-remember { display: inline; float: left; } /* Form Submit */ #loginform .login-submit { float: right; } /* Lost Password / Register */ .after-loginform { margin-top: 10px !important; } .after-loginform > p:not(:last-child) { margin-bottom: 12px; /* display: inline; float: left; */ } /* .after-loginform > p:nth-last-child(2) { padding-right: 20px; border-right: 1px solid #000; } */ /* .after-loginform > p:last-child { padding-left: 20px; } */ /*--------------------------------------- * Zwischenauswahl ----------------------------------------*/ .page-template-zwischenauswahl .zwischenspeicher-container { margin-top: 50px; } .page-template-zwischenauswahl .zwischenspeicher-grid .single-lernmodul .lm-wrapper { position: relative; } /* Item Select */ .page-template-zwischenauswahl .zwischenspeicher-grid .selectable { cursor: pointer; } .page-template-zwischenauswahl .zwischenspeicher-grid .selectable .lm-wrapper { /* border: 2px solid #fff; */ border: none; } .page-template-zwischenauswahl .zwischenspeicher-grid .single-lernmodul:is(:hover, :focus, :focus-within, :focus-visible, :active) .lm-wrapper { /* border-color: var(--orange-headlines); */ } .page-template-zwischenauswahl .zwischenspeicher-grid .selectable.selected .lm-wrapper { /* border-color: #000; */ } /*-- Selection Box --*/ /* .page-template-zwischenauswahl .zwischenspeicher-grid .single-lernmodul .lm-wrapper .selection-box { position: absolute; top: 5px; left: 5px; width: 30px; height: 30px; background-color: rgba(0, 0, 0, 0.2); border: 3px solid #fff; border-radius: 5px; box-shadow: 0 0 5px rgba(0,0,0,0.8); } .page-template-zwischenauswahl .zwischenspeicher-grid .single-lernmodul .lm-wrapper .selection-box svg { display: none; width: 100%; height: auto; } .page-template-zwischenauswahl .zwischenspeicher-grid .not-selectable .lm-wrapper .selection-box { background-color: red; } .page-template-zwischenauswahl .zwischenspeicher-grid .selectable.selected .lm-wrapper .selection-box { background-color: green; background-color: var(--orange-headlines); border-color: var(--orange-headlines); } .page-template-zwischenauswahl .zwischenspeicher-grid .selectable.selected .lm-wrapper .selection-box svg { display: block; } */ /*-- Selection Box --*/ #page .zwischenspeicher-grid .selectable.selected .mark-post-for-learnarea { background-color: transparent !important; color: #fff !important; color: transparent !important; } #page .zwischenspeicher-grid .selectable.selected .mark-post-for-learnarea::after { content: '-'; color: #fff; position: absolute; top: 0; left: 0; /* left: 50%; */ /* transform: translateX(-50%); */ display: block; width: 100%; height: 100%; font-size: 1em; padding: 8px 16px; box-sizing: border-box; } #page .zwischenspeicher-grid .selectable.selected :is(.add-post-to-learnarea, .remove-post-from-learnarea, .mark-post-for-learnarea) span { display: none !important; width: 0 !important; opacity: 0 !important; } .scoring-value { display: none; } /* More interesting courses */ /* Headline */ .page-template-zwischenauswahl .zwischenspeicher-container .more-interesting-courses { margin-bottom: 12px; } /* Grid Courses */ .page-template-zwischenauswahl .more-interesting-courses-grid :is(.single-lernmodul, .single-lernmodul.zk-12) .lm-wrapper { background-color: var(--mitarbeitendenfindung); } .page-template-zwischenauswahl .more-interesting-courses-grid .single-lernmodul.lm-container { width: 25%; } /* Buttons */ .page-template-zwischenauswahl .actions { margin-top: 30px; padding-top: 30px; border-top: 1px solid var(--light-grey); } .page-template-zwischenauswahl .actions * { text-align: center; } .page-template-zwischenauswahl .actions .action-buttons { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } .page-template-zwischenauswahl .actions .action-buttons button { display: block; margin: 10px; } /* Login Form Pop-Up */ .login-form-pop-up { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0,0,0,.7); align-items: center; justify-content: center; z-index: 999; display: none; } .login-form-pop-up.vsbl { display: flex; } .login-form { position: relative; max-width: 600px; margin: 60px auto 0; border: 1px solid #eee; padding: 20px 32px 32px; background-color: #fff; } .login-form-pop-up h2 { margin-bottom: 12px; } /* List */ .login-form-pop-up ul { list-style: disc; padding-left: 18px; } /* Form */ .login-form-pop-up #loginform { margin-top: 20px; } /* Finished Courses */ .finsihed-courses-wrapper h4 { margin-bottom: 16px; } .finsihed-courses-wrapper .finished-courses-grid.module-container .single-lernmodul:is(:hover, :focus, :focus-within, :focus-visible, :active) .lm-wrapper { box-shadow: none; } /* No Courses Found */ .page-template-zwischenauswahl #page > #main .no-courses-found { max-width: 1200px; margin: 48px auto; padding: 40px; border: 2px solid #eee; } .page-template-zwischenauswahl #page > #main .no-courses-found h2 { margin-bottom: 32px; } .page-template-zwischenauswahl #page > #main .no-courses-found h3 { margin-bottom: 20px; } .page-template-zwischenauswahl #page > #main .no-courses-found p { margin-bottom: 12px; } /*--------------------------------------- * Overview All Courses (Kursübersicht) ----------------------------------------*/ body.post-type-archive-lp_course .lp-main-content > .entry-content + .all-courses-overview { display: none; } .entry-content + .all-courses-overview { margin-top: 40px; } #page :is(.add-post-to-learnarea, .remove-post-from-learnarea, .mark-post-for-learnarea) { display: flex; align-items: center; position: absolute; top: unset; bottom: 0; left: 16px; background-color: #efefef; color: #000 !important; padding: 8px 16px; font-size: 2em; line-height: .7; text-decoration: none !important; } /* Hover */ #page :is(.add-post-to-learnarea, .remove-post-from-learnarea, .mark-post-for-learnarea):is(:hover, :focus, :focus-within, :focus-visible, :active) { background-color: var(--orange-headlines); color: #fff !important; } #page .more-interesting-courses-grid .mark-post-for-learnarea:is(:hover, :focus, :focus-within, :focus-visible, :active) { background-color: var(--mitarbeitendenfindung); color: #fff !important; } /* Description Text */ #page :is(.add-post-to-learnarea, .remove-post-from-learnarea, .mark-post-for-learnarea) span { font-size: .5em; line-height: 1.2; font-weight: 400; color: #000 !important; background-color: transparent !important; display: none; padding: 5px 0 0 5px; width: 0; height: 0; overflow: hidden; opacity: 0; transition: opacity .3s linear .1s; } /* Hover */ #page :is(.add-post-to-learnarea, .remove-post-from-learnarea, .mark-post-for-learnarea):is(:hover, :focus, :focus-within, :focus-visible, :active) span { display: block; color: #fff !important; width: auto; opacity: 1; height: auto; } /*--------------------------------------- * Mein Lernbereich ----------------------------------------*/ /* Modul Übersicht */ .module-container { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; } .single-lernmodul.lm-container { width: 100%; padding: 0 20px 20px 0; } @media screen and (min-width: 540px){ .single-lernmodul.lm-container { width: 50%; } } @media screen and (min-width: 1024px){ .single-lernmodul.lm-container { width: 33.333%; } } .single-lernmodul.lm-container .lm-wrapper { position: relative; padding: 0; height: 100%; /* border: 1px solid #ededed; border: 1px solid var(--light-grey); */ box-shadow: 0 0 5px rgba(0,0,0,.5); background-color: #fff; display: flex; flex-direction: column; justify-content: space-between; } /* .module-container .single-lernmodul:is(:hover, :focus, :focus-within, :focus-visible, :active) .lm-wrapper { box-shadow: 0 0 5px rgba(0,0,0,.5); } */ /* Basiswissen */ :is(.single-lernmodul, .single-lernmodul.zk-12) .lm-wrapper :is(.lm-thumbnail, .lm-title) { background-color: var(--basiswissen); } /* fertige Module */ /* .single-lernmodul.creation-completed .lm-wrapper :is(.lm-thumbnail, .lm-title) { background-color: var(--kommunikation); } */ /*----- Lernfelder (course_category colors) ------*/ /* Beschaffung */ .single-lernmodul.cc-26 .lm-wrapper :is(.lm-thumbnail, .lm-title) { background-color: var(--beschaffung); } /* Personal */ .single-lernmodul.cc-25 .lm-wrapper :is(.lm-thumbnail, .lm-title) { background-color: var(--personal); } /* Unternehmenskultur */ .single-lernmodul.cc-29 .lm-wrapper :is(.lm-thumbnail, .lm-title) { background-color: var(--unternehmenskultur); } /* Close-Button */ .delete-post.close-x { position: absolute; top: 5px; left: unset; right: 5px; width: 30px; height: 30px; padding: 7px 7px 10px; display: flex; align-items: center; justify-content: center; font-size: 1.5em; background-color: #fff; } .delete-post.close-x:is(:hover, :focus, :focus-within, :focus-visible, :active) { color: #fff; background-color: var(--orange-headlines); } /* Post Title */ .single-lernmodul .lm-title { position: relative; padding: 12px 20px; } .single-lernmodul .lm-title * { color: #fff !important; } .single-lernmodul .lm-title h3 { text-transform: none; font-family: 'Barlow', sans-serif; font-size: 1.3em; /* margin-bottom: 32px !important; */ margin: 0; } /* Post Image */ .single-lernmodul.lm-container .lm-wrapper img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; object-position: center; } /* Post Excerpt */ .single-lernmodul .lm-content .lm-excerpt { padding: 20px; } /* Post Button */ .single-lernmodul .lm-button { padding: 0 20px 20px; } /* Read More */ .lm-read-more { width: 100%; } .lm-read-more div { width: 32px; height: 32px; background-image: url(/wp-content/themes/twentytwelve-child/images/chevron-down.svg); background-size: contain; background-repeat: no-repeat; background-position: center; transform-origin: center center; transform: rotate(0deg) translateX(-50%); position: absolute; bottom: 0; top: unset; left: 50%; transition: transform .2s linear; } .single-lernmodul.lm-container.hover .lm-read-more div { /* transform: rotate(180deg) translateX(50%); */ background-image: url(/wp-content/themes/twentytwelve-child/images/chevron-up.svg); } /* Content Hover */ .single-lernmodul .lm-content { overflow: hidden; /* height: 0; */ } /* .single-lernmodul .lm-content > .lm-content-wrapper > * { opacity: 0; transition: opcaity .15s linear; } */ .single-lernmodul .lm-content .lm-content-wrapper { background-color: #fff; /* border: 1px solid #000; */ } /* Hover */ .single-lernmodul.hover .lm-content > .lm-content-wrapper > * { opacity: 1; } /* Button */ .single-lernmodul .lm-content .lm-content-wrapper a.button { margin-top: 20px; } /*--------------------------------------- * Profil ----------------------------------------*/ /*----- Header -----*/ .lp-user-profile .wrapper-profile-header { background: transparent !important; } .lp-profile-username { color: var(--orange-headlines) !important; } /*----- Side Navi -----*/ .lp-profile-nav-tabs li::before { display: none !important; } /*----- Profil Info Tab Navi -----*/ ul.learn-press-filters li::before { display: none !important; } .learn-press-profile-course__statistic { display: none !important; } /*----- Custom Profile Shortcode -----*/ .lppe-wrap .lppe-form { max-width: 680px; padding:16px; border:1px solid #e5e7eb; border-radius:12px; margin-bottom:24px; background:#fff; } .lppe-wrap .lppe-form h3 { margin:0 0 12px; } .lppe-wrap .lppe-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; } .lppe-wrap .lppe-field { margin-bottom:12px; } .lppe-wrap .lppe-field label { display:block; font-weight:600; margin-bottom:6px; } .lppe-wrap .lppe-field input { width:100%; padding:10px; border:1px solid #cbd5e1; border-radius:8px; } .lppe-wrap .lppe-field input:disabled { opacity: .5; cursor: not-allowed; } .lppe-wrap .lppe-actions { margin-top:12px; display:flex; gap:8px; align-items:center; } .lppe-wrap .lppe-notice { padding:12px 14px; border-radius:8px; margin: 0 0 16px; display:none; } .lppe-wrap .lppe-notice.is-show { display:block; } .lppe-wrap .lppe-notice.success { background:#ecfdf5; border:1px solid #a7f3d0; } .lppe-wrap .lppe-notice.error { background:#fef2f2; border:1px solid #fecaca; } .lppe-wrap .lppe-small { font-size:12px; color:#6b7280; } @media (max-width: 600px) { .lppe-wrap .lppe-row { grid-template-columns:1fr; } } /*--------------------------------------- * Kurse ----------------------------------------*/ /*---------- Single Course Page ----------*/ aside.course-summary-sidebar :is(.course-price, .course-time) { display: none; } /* Progress */ .learn-press-progress.lp-course-progress .lp-passing-conditional { display: none; } /*---------- Popup ----------*/ body.single-lp_course.course-item-popup.viewing-course-item :is(.header-container, footer#colophon, .lp-archive-courses .learn-press-breadcrumb) { display: none; } /*---------- Kurs Header ---------*/ .single-lp_course .course-detail-info { display: none; } body #popup-course .popup-header__inner { width: 100%; } /* Toggle Menu Button */ input#sidebar-toggle { line-height: 44px; } /* Close Course Button */ #popup-course #popup-header .back-course { line-height: 1.2; padding: 15px 20px; } @media screen and (min-width: 768px){ input#sidebar-toggle { line-height: 48px; } .single-lp_course #popup-course #popup-header .back-course:before { /* content: 'Lernmodul verlassen'; */ content: 'Verlassen'; margin-right: 8px; hyphens: none; -webkit-hyphens: none; -moz-hyphens: none; } } @media screen and (min-width: 1024px){ input#sidebar-toggle { line-height: 60px; } #popup-course #popup-header .back-course { padding: 21px 20px; } } /* Progress */ #popup-header .items-progress { flex-direction: column; } .items-progress span.number { display: none; } .items-progress span.progress { color: #fff; padding-bottom: 8px; font-size: .8em; display: none; } /*---------- Sidebar ---------*/ /* body.lp-sidebar-toggle__open #popup-course #popup-sidebar { } :is(body, body.lp-sidebar-toggle__close) #popup-course #popup-sidebar { flex: 0; } */ /* Course Section Title */ #popup-sidebar .course-curriculum .section-left .section-title, #popup-sidebar .course-curriculum .course-section_title { font-weight: 500; font-family: 'Barlow Condensed', sans-serif; color: var(--grey-headline); } /* Lessons */ #popup-sidebar .course-curriculum .course-item .section-item-link { flex-direction: row-reverse; } #popup-sidebar .course-curriculum .course-item .item-name { font-weight: 400; } /* Icons */ #popup-sidebar .course-curriculum .course-item.course-item-lp_lesson .section-item-link::before { display: none; } /* Completed */ #popup-sidebar .course-curriculum .section-content li.lesson-completed .course-item-meta .course-item-status::before { color: var(--green); } /* Current Lesson */ #popup-sidebar li.course-item.current { background: var(--light-purple-kf); } /*----- Complete Lesson & Course Button -----*/ #popup-content .lp-button.button-complete-lesson, #popup-course :is(#popup-content, #popup-header) .lp-btn-finish-course { position: fixed; top: unset; bottom: 0; left: unset; right: 12px; z-index: 9999; background-color: var(--purple-kf); color: #fff; border-color: var(--purple-kf); line-height: 1.2; } /* Finish Course Button */ #popup-course :is(#popup-header) button.lp-btn-finish-course { left: 50vw; transform: translateX(-50%); width: 150px; padding-left: 4px !important; padding-right: 4px !important; } body.lp-sidebar-toggle__open #popup-course :is(#popup-header) button.lp-btn-finish-course { left: calc(50vw + 475px); left: calc(50vw + 237.5px); } @media screen and (max-width: 1280px) { body.lp-sidebar-toggle__open #popup-course :is(#popup-header) button.lp-btn-finish-course { left: calc(50vw + 150px); } } @media screen and (max-width: 768px) { body.lp-sidebar-toggle__open #popup-course :is(#popup-header) button.lp-btn-finish-course { left: 20px; transform: none; } } /* #popup-course :is(#popup-content, #popup-header) .lp-btn-finish-course { right: 50%; transform: translateX(50%); } */ #popup-content .lp-button.button-complete-lesson:is(:hover, :focus, :focus-within, :focus-visible, :active), #popup-course :is(#popup-content, #popup-header) .lp-btn-finish-course:is(:hover, :focus, :focus-within, :focus-visible, :active) { background-color: #fff; color: var(--purple-kf); border-color: var(--purple-kf); } /* .single-lp_course .button-complete-lesson { color: transparent !important; } .single-lp_course .button-complete-lesson::after { content: 'Nächste Lektion'; color: #000 !important; } */ body #popup-content { padding: 0 20px; max-width: 1600px; margin-left: auto; margin-right: auto; } #popup-content .wpb-content-wrapper .vc_row { margin-left: 0; margin-right: 0; } @media screen and (min-width: 768px) { body #popup-content { padding: 0 32px; } } @media screen and (min-width: 1024px) { body #popup-content { padding: 0 40px; } } @media screen and (min-width: 1366px) { body #popup-content { padding: 0 48px; } } /*---------- LearnPress Messages ---------*/ .learn-press-message { display: none !important; } /*---------- Content ---------*/ @media screen and (max-width: 900px) { body.lp-sidebar-toggle__open #popup-course #popup-content .wpb-content-wrapper .wpb_column.vc_col-sm-4 { width: 100%; } } /*---------- Footer ---------*/ /* body.lp-sidebar-toggle__open #popup-course #popup-footer { } */ body.lp-sidebar-toggle__close #popup-course #popup-footer { width: 100%; } #popup-course #popup-footer { padding: 0 12px; display: block; /* flex-direction: row; justify-content: space-between; */ /* box-sizing: content-box; */ max-width: none !important; width: 100%; /* height: 82px; */ height: auto; background-color: var(--light-grey); } body.lp-sidebar-toggle__open #popup-course #popup-footer { width: calc(100% - 475px); } @media screen and (max-width: 1280px) { body.lp-sidebar-toggle__open #popup-course #popup-footer { width: calc(100% - 300px); } } #popup-footer .course-item-nav { display: flex; justify-content: space-between; align-items: center; } #popup-course #popup-footer .course-item-nav :is(.prev, .next) { line-height: 1.2; } #popup-footer .course-item-nav :is(.prev, .next)::before { display: none; } #popup-course #popup-footer .course-item-nav :is(.prev, .next) a, #popup-course #popup-content .lp-button.button-complete-lesson, #popup-course #popup-content .lp-btn-finish-course { background-color: var(--light-grey); font-family: 'Barlow Condensed', sans-serif; font-size: 1.2em; font-weight: 400; color: #000; border: none; padding: 14px 20px; border-radius: 0; z-index: 999999; } #popup-course #popup-footer .course-item-nav :is(.prev, .next) a::before, #popup-course #popup-content .lp-button.button-complete-lesson::before, #popup-course #popup-content .lp-btn-finish-course::before { content: ''; background-image: url(/wp-content/themes/twentytwelve-child/images/chevron-left.svg); background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F>'); background-size: cover; background-position: center; background-repeat: no-repeat; height: 30px; width: 30px; position: absolute; top: 50%; left: 0; transform: translateY(-50%); } #popup-course #popup-footer .course-item-nav :is(.prev) a { padding-left: 30px; } #popup-course #popup-footer .course-item-nav :is(.next) a, #popup-course #popup-content .lp-button.button-complete-lesson, #popup-course #popup-content .lp-btn-finish-course { padding-right: 30px; } #popup-course #popup-footer .course-item-nav :is(.next) a::before, #popup-course #popup-content .lp-button.button-complete-lesson::before, #popup-course #popup-content .lp-btn-finish-course::before { background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F>'); left: unset; right: 0; } /* Hover */ #popup-course #popup-footer .course-item-nav :is(.prev, .next) a:is(:hover, :focus, :focus-within, :focus-visible, :active), #popup-course #popup-content .lp-button.button-complete-lesson:is(:hover, :focus, :focus-within, :focus-visible, :active), #popup-course #popup-content .lp-btn-finish-course:is(:hover, :focus, :focus-within, :focus-visible, :active) { background-color: var(--purple-kf); color: #fff; } #popup-course #popup-footer .course-item-nav :is(.prev) a:is(:hover, :focus, :focus-within, :focus-visible, :active)::before { background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F>'); } #popup-course #popup-footer .course-item-nav :is(.next) a:is(:hover, :focus, :focus-within, :focus-visible, :active)::before, #popup-course #popup-content .lp-button.button-complete-lesson:is(:hover, :focus, :focus-within, :focus-visible, :active)::before, #popup-course #popup-content .lp-btn-finish-course:is(:hover, :focus, :focus-within, :focus-visible, :active)::before { background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F>'); } #popup-course #popup-footer .course-item-nav__name { display: none; } /* Hide Completed Button */ #popup-content button.lp-button.completed { display: none; } /* Hide Next Button, when Lesson is not completed */ body.single-lp_course.lesson-not-completed #popup-course #popup-footer .course-item-nav .next { display: none; } /*----- Complete Course Button -----*/ body.single-lp_course #popup-course #popup-header .lp-btn-finish-course { display: none; } body.single-lp_course.course-completed #popup-course #popup-header .lp-btn-finish-course { display: flex; } /* Hide Complete Course Button in Content */ body.single-lp_course #popup-course .content-item-summary .lp-btn-finish-course { display: none; } /* Show Complete Course Button when last lesson is completed*/ body.single-lp_course.lesson-completed.last-lesson #popup-content button.lp-btn-finish-course { display: block; } /*---------- Content -----------*/ .lp-archive-courses .lp-entry-content.lp-content-area { display: block; } /*---------- Content left -----------*/ .lp-archive-courses .lp-entry-content.lp-content-area .entry-content-left { padding-top: 0; width: 100%; } /* Tabs */ .entry-content-left .course-tabs .learn-press-nav-tabs.course-nav-tabs { display: none; } /*--- WPBakery ---*/ /* Headline */ .entry-content-left .wpb-content-wrapper h1 { margin-top: 0; } /*--------------- Sidebar / Start Button ----------------*/ .lp-archive-courses .lp-entry-content.lp-content-area .course-summary-sidebar { clear: both; width: 100%; } .lp-archive-courses .lp-entry-content.lp-content-area .course-summary-sidebar .course-summary-sidebar__inner { width: 100%; } /* Post Image */ .course-sidebar-preview .media-preview { display: none; } /*----- Course Preview -----*/ .course-sidebar-preview { max-width: 400px; margin: 0 auto; } /* Hide Ajax Message */ .course-sidebar-preview .lp-ajax-message { display: none !important; } /* Good Practice Button */ .lp-button-good-practice-container {} /* Start Button */ .course-summary-sidebar .lp-course-buttons button.button { width: auto; } .course-summary-sidebar .lp-course-buttons button.button:after { content: '\f054'; content: ''; display: flex; align-items: center; justify-content: center; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 1.5em; position: absolute; left: calc(100% + 5px); top: 0; height: 100%; aspect-ratio: 1; background-color: var(--purple-kf); color: #fff; background-image: url(/wp-content/themes/twentytwelve-child/images/chevron-right.svg); background-size: 90%; background-repeat: no-repeat; background-position: center; } /*----- Lessons / Lektionen -----*/ .content-item-summary > .course-item-title { display: none; } /*------------------------------- Course Finished Popup ------------------------------*/ .congratulations-popup { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(0,0,0,.7); display: flex; justify-content: center; align-items: center; padding: 20px; z-index: 999; } .congratulations-popup.invisible { display: none; } .congratulations-popup .congratulations-popup-inner { position: relative; max-width: 600px; margin: 0 auto; border: 1px solid #eee; padding: 32px; background-color: #fff; } .congratulations-popup .congratulations-popup-content-inner > *:not(:last-child) { margin-bottom: 24px; clear: both; } /* Close Button */ .congratulations-popup .close-cg-popup { position: absolute; top: 0; right: 0; display: flex; align-items: center; justify-content: center; font-size: 1.5em; height: 1.5em; line-height: 1; } /* Buttons*/ .single-lp_course .congratulations-popup .congratulations-popup-content-inner button { display: inline-block !important; float: none; margin-right: 20px; line-height: 1; } /* Certificate Link */ .single-lp_course .congratulations-popup .congratulations-popup-content-inner a.certificate-popup { display: inline; float: none; margin: 0; } /*----- Confetti Canvas -----*/ canvas#confetti-canvas { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; } /*----- Certificate Popup -----*/ /* body.single-lp_course > #certificate-popup.ready { display: none !important; } body.single-lp_course > #certificate-popup.ready.show-certificate { display: block !important; } */ /*------------------------------- Certificates LearnPress ------------------------------*/ /*----- Certificate Popup -----*/ #certificate-popup.ready { padding: 0 !important; } #certificate-popup .certificate { max-width: 100vw; max-height: 100vh; padding: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; box-sizing: content-box; } #certificate-popup .certificate-result { display: block; height: 90vh; min-height: 0; max-height: 100%; width: 90vw; min-width: 0; max-width: 100%; aspect-ratio: auto; object-fit: contain; object-position: center; position: static; margin: 5vh 5vw; box-sizing: border-box; } /* Close */ #certificate-popup.ready a.close-popup { border-radius: 0; width: 40px; height: 40px; color: var(--purple-kf); } #certificate-popup.ready a.close-popup:after { font-size: 3em; line-height: 1; width: 100%; height: 100%; text-align: center; display: flex; align-items: center; justify-content: center; margin-top: -3px; color: inherit !important; } #certificate-popup.ready a.close-popup:is(:hover, :focus, :active, :focus-visible, :focus-within) { color: #fff; background-color: var(--purple-kf); } /* Actions Buttons */ #certificate-popup .certificate-actions { position: absolute; top: unset; bottom: 0; left: 0; width: 100%; background-color: rgba(0, 0, 0, 0.2); padding: 12px; } #certificate-popup .certificate-actions li { border: none !important; } #certificate-popup .certificate-actions a { background-color: var(--purple-kf); color: #fff; border: 1px solid var(--purple-kf); display: flex; align-items: center; justify-content: center; flex-direction: row; } #certificate-popup .certificate-actions a img { display: none; } #certificate-popup .certificate-actions .download a::before { content: 'Download'; color: #fff; } #certificate-popup .certificate-actions .download a::after { content: '\f090'; font-family: 'Material Symbols Sharp' !important; color: #fff; font-size: 2em; } /* Hover */ #certificate-popup .certificate-actions a:is(:hover, :focus, :active, :focus-visible, :focus-within) { background-color: #fff; color: var(--purple-kf); } #certificate-popup .certificate-actions a:is(:hover, :focus, :active, :focus-visible, :focus-within)::before, #certificate-popup .certificate-actions a:is(:hover, :focus, :active, :focus-visible, :focus-within)::after { color: var(--purple-kf); } /*----- Certificate Popup -----*/ .single-certificate-content .certificate { border: 1px solid red !important; } /*------------------------------- Gute Praxis ------------------------------*/ .good-practice-examples > .wpb_column > .vc_column-inner { background-color: var(--light-grey); } .good-practice-examples > .wpb_column > .vc_column-inner > .wpb_wrapper > *:not(.wpb_single_image) { padding-left: 12px; padding-right: 12px; } /* Image */ .good-practice-examples > .wpb_column > .vc_column-inner > .wpb_wrapper > .wpb_single_image { padding: 1px 1px 0; overflow: hidden; } .good-practice-examples > .wpb_column > .vc_column-inner > .wpb_wrapper > .wpb_single_image a img { transition: transform .3s ease; } .good-practice-examples > .wpb_column > .vc_column-inner > .wpb_wrapper > .wpb_single_image a:is(:hover, :focus, :active, :focus-visible, :focus-within) img { transform: scale(1.15) rotate(7deg); } .good-practice-examples > .wpb_column > .vc_column-inner > .wpb_wrapper > *:last-child { padding-bottom: 12px; } .entry-content > .wpb-content-wrapper > .vc_row.good-practice-examples .wpb_wrapper > *:not(:first-child) { margin-top: 12px; } .entry-content > .wpb-content-wrapper > .vc_row.good-practice-examples .wpb_wrapper h3 { background-color: var(--orange-headlines); color: #fff; margin-left: -12px; margin-right: -12px; margin-top: -12px !important; padding: 12px; } #page .good-practice-examples .vc_btn3-container :is(.vc_general.vc_btn3, .vc_btn3) { background-color: #fff; } #page .good-practice-examples .vc_btn3-container :is(.vc_general.vc_btn3, .vc_btn3):is(:hover, :focus, :focus-within, :focus-visible, :active) { background-color: var(--purple-kf); } /*------------------------------- Search Results / Archives ------------------------------*/ body:is(.search-results, .archive) #content > article { max-width: 1000px; margin-left: auto; margin-right: auto; margin-bottom: 50px; } body:is(.search-results, .archive) #content > article:not(:last-child) { border-bottom: 1px solid #ededed; padding-bottom: 25px; } /* Post Title */ body:is(.search-results, .archive) #content > article .archive-post-title { font-size: 1.7em; margin-bottom: 30px; } /*----- 404 Page -----*/ .error404 article { max-width: 1400px; margin-left: auto; margin-right: auto; } .error404 .entry-content * { text-align: center; max-width: 800px; margin-left: auto; margin-right: auto; } /*--------- Search Results Page --------*/ /* No Search Results */ body.search-no-results .entry-content * { text-align: center; } /* post container */ body.search-results .post-container { width: 100%; max-width: 800px; margin: 0 auto; } body.search-results .post-container * { max-width: 800px; } /* post title */ body.search-results .search-post-title, body.archive .archive-post-title { font-size: 1.5em; margin: 0 0 30px; } body.search-results .search-post-title a, body.archive .archive-post-title a { color: #585958; color: var(--grey-text); } body:is(.search-results, .archive) .search-post-title a:is(:hover, a:focus, a:active) { color: #a6a6a6; color: var(--light-grey); } /* post excerpt */ body.search-results .search-post-excerpt, body.archive .archive-post-excerpt { font-size: 1em; margin: 0 0 30px; } /*------------------------------- Entry Meta ------------------------------*/ footer.entry-meta { margin-bottom: 40px; display: none; } /*------------------------------- Footer ------------------------------*/ /*----- Container -----*/ footer#colophon { position: relative; display: inline-block; background-color: #fff; width: 100%; max-width: none; padding: 75px 25px 20px; padding: 75px 0 0; margin: 75px 0 0; border: none; border-top: 2px solid #000; } /* @media screen and (min-width: 768px){ footer#colophon { padding-left: 30px; padding-right: 30px; } } @media screen and (min-width: 1200px){ footer#colophon { padding: 85px 50px 20px; } } @media screen and (min-width: 1600px){ footer#colophon { padding-left: 80px; padding-right: 80px; } } */ /*----- Links -----*/ footer#colophon a, footer#colophon a:is(:any-link, :link, :visited) { color: var(--link-color); } /* Hover */ footer#colophon a:is(:hover, :focus, :focus-within, :focus-visible, :active) { color: var(--link-color-hover); } /*----- Widget Title -----*/ footer#colophon .widget-title { margin-bottom: 20px; font-weight: 500; } /*----- Paragraph -----*/ footer#colophon p:not(:last-child) { margin-bottom: 20px; } /*----- Lists -----*/ footer#colophon li:not(:last-child) { margin-bottom: 5px; } /*----- Widgets Wrapper -----*/ #footerwidgets { max-width: none; margin: 0 auto; } /*---------- Footer Sections ----------*/ footer#colophon .footersection { width: 100%; max-width: 100%; margin: 0 auto; padding: 20px; /* display: flex; flex-direction: column; justify-content: center; align-items: center; */ } footer#colophon .footersection .footersectionwrap { margin: 0 auto; } @media screen and (min-width: 576px){ footer#colophon .footersection .footersectionwrap { max-width: 540px; } } @media screen and (min-width: 768px){ footer#colophon .footersection .footersectionwrap { max-width: 680px; } } @media screen and (min-width: 960px){ footer#colophon .footersection .footersectionwrap { max-width: 920px; } } @media screen and (min-width: 1200px){ footer#colophon .footersection .footersectionwrap { max-width: 1200px; } } /*----- Footer Section 1 -----*/ footer#colophon .footersection.footersection-1 { background-color: #fff; } /* footer#colophon .footersection.footersection-1 * { color: #fff; } */ footer#colophon .footersection.footersection-1 .footersectionwrap > .widget_text:first-child .textwidget svg { display: none; } /* Show all Link */ .fr-icon-navigation-toggle { display: flex; align-items: center; width: 100%; padding: 7px 14px 7px 5px; background-color: #fff; cursor: pointer; } .fr-icon-navigation-toggle:is(:hover, :focus, :focus-within, :focus-visible, :active) { background-color: #848485; color: #fff; } .fr-icon-navigation-toggle:is(:hover, :focus, :focus-within, :focus-visible, :active) * { color: #fff !important; fill: #fff !important; } /* Text (Alle anzeigen) */ .fr-icon-navigation-toggle :is(img, svg):first-child { width: 30px; height: 30px; fill: var(--grey-text); } .fr-icon-navigation-toggle span { font-weight: 500; font-style: normal; font-size: 1.375rem; line-height: 1.3636363636; text-transform: uppercase; display: inline-block; width: 100%; vertical-align: middle; padding: 2px 20px 0 11px; position: relative; } .fr-icon-navigation-toggle span svg { } /* Icon Container */ .fr-icon-navigation-container { height: 0; overflow: hidden; transition: height 1s linear; } .fr-icon-navigation-container.vsbl { height: auto; } /* Liste */ footer#colophon .footersection.footersection-1 ul.fr-icon-navigation__list { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; } footer#colophon .footersection.footersection-1 ul.fr-icon-navigation__list li { width: 100%; border-bottom: 1px solid rgba(208,209,210,.8); display: flex; align-items: center; } footer#colophon .footersection.footersection-1 ul.fr-icon-navigation__list li a { display: block; padding: 13px 0; font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 500; font-size: 1.1em; } footer#colophon .footersection.footersection-1 ul.fr-icon-navigation__list li.fr-icon-navigation__item a * { font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 500; } footer#colophon .footersection.footersection-1 ul.fr-icon-navigation__list li a span { text-align: left; padding: 0 10px; } footer#colophon .footersection.footersection-1 ul.fr-icon-navigation__list img { display: none; } @media screen and (min-width: 576px) { /* Link show all */ .fr-icon-navigation-toggle { display: none; } /* Headline */ footer#colophon .footersection.footersection-1 .footersectionwrap > .widget_text:first-child .textwidget > p { padding-bottom: 4px; margin-bottom: 25px; position: relative; display: flex; flex-wrap: nowrap; flex-direction: row; align-items: flex-end; font-family: 'Barlow Semi Condensed', sans-serif; font-size: 1.5em; font-weight: 500; } footer#colophon .footersection.footersection-1 .footersectionwrap > .widget_text:first-child .textwidget * { font-family: 'Barlow Semi Condensed', sans-serif; font-weight: 500; } /* Icon */ footer#colophon .footersection.footersection-1 .footersectionwrap > .widget_text:first-child .textwidget svg { display: flex; margin-right: 10px; margin-bottom: 4px; width: 40px; height: 40px; min-width: 40px; fill: #585958; } /* List Icons */ .fr-icon-navigation-container { height: auto; } footer#colophon .footersection.footersection-1 ul.fr-icon-navigation__list { flex-direction: row; flex-wrap: wrap; align-items: stretch; padding-top: 30px; } footer#colophon .footersection.footersection-1 ul.fr-icon-navigation__list li.fr-icon-navigation__item { border-bottom: none; } footer#colophon .footersection.footersection-1 ul.fr-icon-navigation__list li.fr-icon-navigation__item a { padding: 0; display: flex; align-items: center; } /* Icons */ footer#colophon .footersection.footersection-1 ul.fr-icon-navigation__list img { display: inline-block; } } @media screen and (min-width: 576px) and (max-width: 959.98px) { /* List Icons */ footer#colophon .footersection.footersection-1 ul.fr-icon-navigation__list li.fr-icon-navigation__item { width: 50%; padding-top: 20px; padding-bottom: 20px; padding: 35px 20px 35px 0; margin: 0; border-top: 1px solid rgba(208,209,210,.8); } footer#colophon .footersection.footersection-1 ul.fr-icon-navigation__list li.fr-icon-navigation__item:nth-child(-n+2) { border-top: 0; padding-top: 10px; } footer#colophon .footersection.footersection-1 ul.fr-icon-navigation__list li.fr-icon-navigation__item:not(:nth-child(odd)) { border-left: 1px solid rgba(208,209,210,.8); padding-left: 20px; } } @media screen and (min-width: 960px){ footer#colophon .footersection.footersection-1 ul.fr-icon-navigation__list li.fr-icon-navigation__item { width: 25%; } .fr-icon-navigation__item:nth-last-child(-n+4) { padding-bottom: 10px; } .fr-icon-navigation__item:first-child, .fr-icon-navigation__item:nth-child(2), .fr-icon-navigation__item:nth-child(3), .fr-icon-navigation__item:nth-child(4) { border-top: none; padding-top: 10px; } .fr-icon-navigation__item:not(:nth-child(4n+1)) { border-left: 1px solid rgba(208,209,210,.8); padding-left: 20px; } } /*----- Footer Section 2 (Share on Social Media) -----*/ footer#colophon .footersection.footersection-2 { background-color: #BC5806; background-color: var(--orange-kf); padding-top: 18px; padding-bottom: 18px; } footer#colophon .footersection.footersection-2 * { color: #fff; } footer#colophon .footersection.footersection-2 .widget_text { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } footer#colophon .footersection.footersection-2 .widget-title { text-transform: none; margin: 0 30px 0 0; } /* Icon Links List */ ul.fr-footer-social-links__list { display: flex; flex-direction: row; justify-content: center; align-items: center; } footer#colophon ul.fr-footer-social-links__list li.fr-footer-social-links__list-item { margin-bottom: 0; } ul.fr-footer-social-links__list li.fr-footer-social-links__list-item:not(:last-child) { margin-right: 15px; } ul.fr-footer-social-links__list a.fr-footer-social-links__link { display: flex; flex-direction: row; align-items: center; column-gap: 4px; } ul.fr-footer-social-links__list a.fr-footer-social-links__link span { display: none; padding-left: 5px; font-size: .9em; } /* Icons */ .fr-footer-social-links__link img { width: 26px; height: 26px; } /* Facebook */ .fr-footer-social-links__link--facebook img { width: 30px; height: 30px; } /* LinkedIn */ .fr-footer-social-links__link--linkedin img { width: 30px; height: 30px; } /* X (Twitter) */ .fr-footer-social-links__link--twitter img { width: 24px; height: 24px; } @media screen and (min-width: 960px) { footer#colophon .footersection.footersection-2 .widget-title { width: 25%; margin: 0; padding-right: 30px; } ul.fr-footer-social-links__list a.fr-footer-social-links__link span { display: inline-block; } } /*----- Footer Section 3 -----*/ footer#colophon .footersection.footersection-3 { padding-top: 50px; padding-bottom: 76px; } footer#colophon .footersection.footersection-3 .footersectionwrap { display: flex; flex-direction: column; justify-content: flex-start; gap: 50px; } footer#colophon .footersection.footersection-3 .widget-title { color: #757372; font-size: 15px; } footer#colophon .footersection.footersection-3 .widget_text .textwidget { display: flex; flex-direction: column; justify-content: space-between; gap: 30px; max-width: 300px; } footer#colophon .footersection.footersection-3 .widget_text .textwidget > div > img { width: 100%; } /* First Column */ footer#colophon .footersection.footersection-3 .footersectionwrap aside:first-child .textwidget > div { width: 80%; } footer#colophon .footersection.footersection-3 .footersectionwrap aside:first-child .textwidget > div:nth-child(2) { width: 100%; } /* 2nd Column/Row Logos */ footer#colophon .footersection.footersection-3 .footersectionwrap aside:nth-child(2) .textwidget > div { width: 70%; } footer#colophon .footersection.footersection-3 .footersectionwrap aside:nth-child(2) .textwidget > div:nth-child(2) { width: 90%; } /* footer#colophon .footersection.footersection-3 .widget_text .textwidget > div { width: 100%; text-align: left; float: left; padding: 0 3px; } */ @media screen and (min-width: 768px){ footer#colophon .footersection.footersection-3 .widget_text .textwidget { flex-direction: row; max-width: none; } /* First Column */ footer#colophon .footersection.footersection-3 .footersectionwrap aside:first-child .textwidget > div { width: 35%; } footer#colophon .footersection.footersection-3 .footersectionwrap aside:first-child .textwidget > div:nth-child(2) { width: 50%; padding-top: 40px; } /* 2nd Column/Row Logos */ footer#colophon .footersection.footersection-3 .footersectionwrap aside:nth-child(2) .textwidget > div { width: 35%; } footer#colophon .footersection.footersection-3 .footersectionwrap aside:nth-child(2) .textwidget > div:nth-child(2) { width: 45%; } } @media screen and (min-width: 960px){ footer#colophon .footersection.footersection-3 .footersectionwrap { flex-direction: row; justify-content: space-between; align-items: flex-start; } footer#colophon .footersection.footersection-3 .footersectionwrap aside { width: 50%; } /* footer#colophon .footersection.footersection-3 .widget_text .textwidget > div:first-child > img { max-width: 214px; } */ footer#colophon .footersection.footersection-3 .widget_text .textwidget > div:nth-child(2) { text-align: right; } /* footer#colophon .footersection.footersection-3 .widget_text .textwidget > div:nth-child(2) > img { max-width: 192px; max-width: 90%; } */ } @media screen and (min-width: 1200px){ /* footer#colophon .footersection.footersection-3 .widget_text .textwidget > div:first-child > img { max-width: 281px; } footer#colophon .footersection.footersection-3 .widget_text .textwidget > div:nth-child(2) > img { max-width: 209px; } */ } /*----- Footer Section 4 -----*/ footer#colophon .footersection.footersection-4 { background-color: #585958; padding-top: 25px; padding-bottom: 25px; } footer#colophon .footersection.footersection-4 * { color: #fff; } /* footer#colophon .footersection.footersection-4 .footersectionwrap { padding: 70px 0 23px; } */ /* Copyright */ footer#colophon .footersection.footersection-4 aside:not(:last-child) { margin-bottom: 15px; } /* Menu */ footer#colophon .footersection.footersection-4 ul.menu { display: inline-block; } footer#colophon .footersection.footersection-4 ul.menu li { float: left; margin-right: 5px; } footer#colophon .footersection.footersection-4 ul.menu li::before { content: '|'; margin-right: 5px; } footer#colophon .footersection.footersection-4 ul.menu li:first-child::before { content: ''; display: none; } @media screen and (min-width: 960px){ footer#colophon .footersection.footersection-4 .footersectionwrap { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } footer#colophon .footersection.footersection-4 aside { width: 50%; } footer#colophon .footersection.footersection-4 aside:first-child { text-align: left; } footer#colophon .footersection.footersection-4 aside:last-child { text-align: right; } } /*------------------------------- Copyright Line ------------------------------*/ #copyrightline { padding: 50px 50px 100px; font-size: .7em; } #copyrightline * { text-align: center; } /*---------- Links ----------*/ #copyrightline a:is(:any-link, :link, :visited) {} /* Hover */ #copyrightline a:is(:hover, :focus, :focus-within, :focus-visible, :active) { opacity: .5; } /*------------------------------- To Top Button ------------------------------*/ #totop { display: none; position: fixed; right: 20px; top: unset; left: unset; bottom: 20px; z-index: 999; height: 60px; width: 60px; border-radius: 0; background-color: var(--orange-headlines); justify-content: center; align-items: center; border: 1px solid #fff; /* box-shadow: 0 0 2px rgba(255,255,255,.7); */ background-image: url(/wp-content/themes/twentytwelve-child/images/chevron-up.svg) !important; background-size: 70% !important; background-position: center !important; background-repeat: no-repeat !important; } #totop:is(:hover, :focus, :focus-within, :focus-visible, :active) { background-color: var(--orange-kf); background-color: var(--purple-kf); } #totop.vsbl { display: flex; } #totop span { width: 20px; height: 20px; border: 3px solid #fff; border-bottom: none; border-right: none; margin-top: 8px; transform: rotate(45deg); display: none; } @media screen and (min-width: 768px){ #totop { right: 40px; bottom: 40px; } } @media screen and (min-width: 1366px){ #totop { right: 50px; bottom: 50px; } } @media screen and (min-width: 1500px){ #totop { right: 50%; margin-right: -700px; } } /** * Teilnahmebescheinigungen Lernfelder * Shortcode: [lp_category_status] */ .lp-category-list { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; } .lp-category-list .lp-category { padding: 12px; background-color: #efeff0; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; position: relative; } .lp-category-list .lp-category .lp-category-title { display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; gap: 10px; font-size: 1.4em; margin-bottom: 8px; } .lp-category-list .lp-category .lp-category-title + p { /* display: none; */ margin: 0; } /* Colors */ .lp-category-list .lp-category.catid-26 h3 { color: var(--beschaffung); } .lp-category-list .lp-category.catid-25 h3 { color: var(--personal); } .lp-category-list .lp-category.catid-29 h3 { color: var(--unternehmenskultur); } .lp-category-list .lp-category :is(h1, h2, h3, h4, h5, h6) { color: var(--orange-headlines); margin: 0; } .lp-category-list .lp-course-list { display: none; } @media screen and (min-width: 768px) { .lp-category-list { flex-direction: row; flex-wrap: wrap; align-items: stretch; } .lp-category-list .lp-category { width: calc(33.333% - 13.333px); } } /* Buttons */ .lp-category-list button.lp-category-complete-btn.button, .lp-category-list a.lp-category-complete-btn.button:any-link { color: #000; background-color: #fff; } .lp-category-list :is(a, button).lp-category-complete-btn.button:hover { color: #fff; background-color: var(--purple-kf); } /* Disabled */ .lp-category-list button.lp-category-complete-btn.button.disabled { opacity: 0.5; cursor: not-allowed; } .learning-area-notice { margin-top: 20px; } /** * Lernfelder starten * Shortcode: [lp_category_status] */ .lp-categories-start-wrapper { width: 100%; display: flex; flex-direction: column; justify-content: center; column-gap: 20px; row-gap: 40px; } .lp-categories-start-wrapper > .lp-category { display: flex; flex-direction: column; justify-content: space-between; } .lp-categories-start-wrapper > .lp-category .flip-card { width: 100%; /* background-color: var(--orange-headlines); */ padding: 0; display: block; cursor: pointer; } .lp-categories-start-wrapper > .lp-category .flip-card * { /* color: #fff !important; */ margin: 0 !important; } /* Lernfeld Colors */ /* .lp-categories-start-wrapper > .lp-category.catid-26 .flip-card-front * { color: var(--beschaffung) !important; } .lp-categories-start-wrapper > .lp-category.catid-25 .flip-card-front * { color: var(--personal) !important; } .lp-categories-start-wrapper > .lp-category.catid-29 .flip-card-front * { color: var(--unternehmenskultur) !important; } */ .lp-categories-start-wrapper > .lp-category.catid-26 .flip-card :is(h1, h2, h3, h4, h5, h6) { color: var(--beschaffung) !important; } .lp-categories-start-wrapper > .lp-category.catid-25 .flip-card :is(h1, h2, h3, h4, h5, h6) { color: var(--personal) !important; } .lp-categories-start-wrapper > .lp-category.catid-29 .flip-card :is(h1, h2, h3, h4, h5, h6) { color: var(--unternehmenskultur) !important; } .lp-categories-start-wrapper > .lp-category a:is(:hover, :focus, :focus-within, :focus-visible, :active), .lp-categories-start-wrapper > .lp-category a:is(:hover, :focus, :focus-within, :focus-visible, :active) * { text-decoration: none !important; } .lp-categories-start-wrapper > .lp-category .flip-card-front { display: none; } /* Button */ .lp-category-actions { margin-top: 20px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; } .lp-category-actions button { transform: translateX(0); } .lp-category-actions button:after { content: '\f054'; content: ''; display: flex; align-items: center; justify-content: center; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 1.5em; position: absolute; left: calc(100% + 5px); left: 100%; border-left: 2px solid var(--light-grey); top: 0; height: 100%; aspect-ratio: 1; background-color: var(--purple-kf); color: #fff; background-image: url(/wp-content/themes/twentytwelve-child/images/chevron-right.svg); background-size: 90%; background-repeat: no-repeat; background-position: center; } @media screen and (min-width: 768px){ .lp-categories-start-wrapper { flex-direction: row; align-items: stretch; justify-content: center; } .lp-categories-start-wrapper > .lp-category { width: 33.333%; } } /* Flip Effect: Tablet & Desktop View */ @media screen and (min-width: 1024px){ /* .lp-categories-start-wrapper { flex-direction: row; align-items: center; justify-content: center; } */ /* .lp-categories-start-wrapper > .lp-category { width: 33.333%; } */ .lp-category .flip-card { perspective: 1000px; width: 100%; aspect-ratio: 1 / 1; display: flex; justify-content: center; align-items: center; padding: 0; } .lp-category .flip-card-inner { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; perspective: 1000px; height: 100%; width: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.5s; } .lp-categories-start-wrapper > .lp-category:is(:hover, :focus, :focus-within, :focus-visible, :active) .flip-card-inner { transform: rotateY(180deg); } .lp-categories-start-wrapper > .lp-category :is(.flip-card-front, .flip-card-back) { position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; flex-direction: column; align-items: center; backface-visibility: hidden; padding: 20px; transition: transform 0.5s; } .lp-categories-start-wrapper > .lp-category :is(.flip-card-front, .flip-card-back) * { text-align: center; } /* Button */ .lp-category-actions { justify-content: center; align-items: center; } .lp-category-actions button { transform: translateX(-24px); } /*-- Front Side --*/ .lp-categories-start-wrapper > .lp-category .flip-card-front { background-color: #dedede; } .lp-categories-start-wrapper > .lp-category .flip-card-front * { color: #000 !important; } /*-- Back Side --*/ .lp-categories-start-wrapper > .lp-category .flip-card-back { transform: rotateY(180deg); background-color: var(--orange-headlines); border-color: var(--orange-headlines); color: #fff; } .lp-categories-start-wrapper > .lp-category .flip-card .flip-card-inner .flip-card-back * { color: #fff !important; } .lp-categories-start-wrapper > .lp-category.catid-26 .flip-card-back { background-color: var(--beschaffung); } .lp-categories-start-wrapper > .lp-category.catid-25 .flip-card-back { background-color: var(--personal); } .lp-categories-start-wrapper > .lp-category.catid-29 .flip-card-back { background-color: var(--unternehmenskultur); } } /** * Lernfelder Übersicht */ .lernfelder-container { display: flex; flex-direction: column; gap: 12px; } .lernfelder-container > .single-lernfeld:not(:last-child) { border-bottom: 2px solid #ddd; padding-bottom: 12px; } /* Toggle Button */ .lernfelder-container .single-lernfeld button.lernfeld-toggle { background-color: transparent !important; border: none; padding: 0; cursor: pointer; text-align: left; width: 100%; display: block; font-size: 1em !important; } .lernfelder-container .single-lernfeld button.lernfeld-toggle svg { width: 20px; margin-right: 12px !important; padding-top: 10px; transition: transform .2s ease-in-out; } /* Hover */ .lernfelder-container .single-lernfeld button.lernfeld-toggle:is(:hover, :focus, :focus-within, :focus-visible, :active) { background-color: transparent !important; } .lernfelder-container .single-lernfeld button.lernfeld-toggle:is(:hover, :focus, :focus-within, :focus-visible, :active) * { text-decoration: underline; background-color: transparent !important; } /* Active */ .lernfelder-container .single-lernfeld button.lernfeld-toggle.active svg { transform: rotate(180deg); padding-top: 0; } /* Show Content */ .single-lernfeld-kurse { display: none; } .single-lernfeld-kurse.active { display: block; } /* Colors */ #lernfeld-26 .lernfeld-title, #lernfeld-26 .lernfeld-title * { color: var(--beschaffung); fill: var(--beschaffung); } #lernfeld-25 .lernfeld-title, #lernfeld-25 .lernfeld-title * { color: var(--personal); fill: var(--personal); } #lernfeld-29 .lernfeld-title, #lernfeld-29 .lernfeld-title * { color: var(--unternehmenskultur); fill: var(--unternehmenskultur); } /* Course finished */ .courses-finished { padding-bottom: 20px; } .congratulations-text { display: flex; flex-direction: row; align-items: center; gap: 10px; margin-bottom: 16px; } .congratulations-text p { margin: 0; } .courses-finished .check::before { content: '\e5ca'; font-family: 'Material Symbols Sharp'; font-size: 1.6em; } /*----------------- Custom Post Slider ---------------*/ .post-slider-container { position: relative; overflow: hidden; margin-bottom: 20px; } .post-slider { display: flex; } .post-slide { position: relative; width: calc(25% - 10px); margin-right: 10px; transition: left 0.5s ease; } .post-slide:last-child { margin-right: 0; } .slide-content { position: relative; overflow: hidden; } .upper-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.2); display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 20px; text-align: center; transition: opacity 0.5s ease; } .upper-layer h2 { color: white; text-transform: uppercase; margin-bottom: 10px; } .lower-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: transparent; display: none; } .lower-layer video { width: 100%; height: 100%; } .more-link { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); background-color: #fff; color: #333; padding: 10px 20px; border-radius: 5px; text-decoration: none; transition: background-color 0.3s ease; } .more-link:hover { background-color: #f8b271; } .slider-nav { display: flex; justify-content: center; margin-top: 10px; } .slider-nav .bullet { width: 10px; height: 10px; background-color: #fff; margin: 0 5px; border-radius: 50%; cursor: pointer; } .slider-nav .bullet.active { background-color: #f8b271; } .slider-controls { position: absolute; top: 50%; transform: translateY(-50%); width: 100%; } .prev-slide, .next-slide { position: absolute; top: 50%; transform: translateY(-50%); font-size: 24px; color: #fff; cursor: pointer; } .prev-slide { left: 10px; } .next-slide { right: 10px; } /*---------------------- # Lessons / Lektionen ----------------------*/ body.single-lp_course .content-item-wrap { width: 1024px; width: 100%; } #popup-sidebar .popup-sidebar-header { padding: 20px 16px; } /* #popup-sidebar .course-curriculum { top: 0; } */ /*---------------------------- # Flip Effect Gamification ----------------------------*/ /*----- Container -----*/ .flipEffectGame { } .flipEffectGame .wpb_text_column.aussage-bilder { display: none; } /*-- Images Text (Flip Effect) --*/ .flipImageContainer { display: flex; flex-wrap: wrap; justify-content: center; justify-content: flex-start; align-items: center; margin-bottom: 30px; } .flipImageContainer > .wpb_column { width: 100%; } .flipImageContainer > .wpb_column, .flipImageContainer > .wpb_column > .vc_column-inner { padding: 0; margin: 0; } .flipImageContainer > .wpb_column > .vc_column-inner > .wpb_wrapper { padding: 0; margin: 0; } .flipImageContainer > .wpb_column > .vc_column-inner > .wpb_wrapper > * { /**/ } @media screen and (min-width: 768px){ .flipImageContainer > .wpb_column { width: 50%; } } @media screen and (min-width: 1150px){ .flipImageContainer > .wpb_column { width: 33.333%; } } /* Select Items */ .flipImageContainer > .wpb_column { cursor: pointer; padding: 5px; } .flipImageContainer > .wpb_column > .vc_column-inner { border: 2px solid transparent; padding: 2px; } /* .flipImageContainer > .wpb_column:is(:hover, :focus, :focus-within, :focus-visible, :active) { border-color: var(--orange-kf); } */ .flipImageContainer > .wpb_column.flipSelected > .vc_column-inner { border-color: var(--purple-kf); } /*-- Image --*/ .flipImageContainer > .wpb_column .wpb_single_image { overflow: hidden; margin: 0; padding: 0; } .flipImageContainer > .wpb_column .wpb_single_image img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; object-position: center; transition: transform 0.5s ease; } .flipImageContainer > .wpb_column .wpb_single_image img:is(:hover, :focus, :focus-within, :focus-visible, :active) { transform: scale(1.15) rotate(2deg); } /*-- Text --*/ .flipImageContainer .wpb_text_column { display: none; /* margin-top: 10px; */ padding: 10px; } /*-- Buttons --*/ .btn-hidden.vc_btn3-container { display: none; } /*----- Check Mode -----*/ .flipEffectGame.checkMode .wpb_text_column.auswahl-bilder { display: none; } .flipEffectGame.checkMode .wpb_text_column.aussage-bilder { display: block; } .flipEffectGame.checkMode .flipImageContainer > .wpb_column:not(.flipSelected) { display: none; } .flipEffectGame.checkMode .flipImageContainer .wpb_text_column { display: block; } .flipEffectGame.checkMode .flipImageContainer { align-items: flex-start; } /* Very Good Choice */ .flipEffectGame.checkMode .flipImageContainer .sehr-gute-wahl.wpb_column > .vc_column-inner { border: 2px solid greenyellow; } /* Good Choice */ .flipEffectGame.checkMode .flipImageContainer .gute-wahl.wpb_column > .vc_column-inner { border: 2px solid darkcyan; } /* Bad Choice */ .flipEffectGame.checkMode .flipImageContainer .schlechte-wahl.wpb_column > .vc_column-inner { border: 2px solid crimson; } /*------------------------------------------ # Accessibility Toolbar ------------------------------------------*/ /*----- High Contrast -----*/ /*----- mwAccHiCo -----*/ /* Background Colors */ html.mwAccHiCo :is(#page, #masthead, footer#colophon, #header-info, #site-navigation.main-navigation .menu-wrapper, .after-header, .menu-wrapper-desktop ul:is(.menu, .nav-menu) ul.sub-menu, footer#colophon .footersection.footersection-1) { background-color: #000 !important; } /* Links, Buttons */ html.mwAccHiCo :is(a, button):is(:any-link, :link, :visited) { color: #d8fa4c !important; /* background-color: #000 !important; */ } html.mwAccHiCo :is(a, button):is(:hover, :focus, :focus-within, :focus-visible, :active) { color: #00ff81 !important; outline-color: #dc00ff !important; } /* Text, Headlines, Lists, ... */ html.mwAccHiCo :is(p, h1, h2, h3, h4, h5, h6, li, figcaption, blockquote, label, .widget-title) { color: #fff !important; } /* WPBakery: Rows & Columns */ html.mwAccHiCo :is(.vc_row, .vc_column-inner) { background-color: #000 !important; } /* Menu Header */ /* Menu Hamburger Menu */ html.mwAccHiCo #site-navigation.main-navigation .menuToggleBtn > div { background-color: #d8fa4c !important; } /* Sub Menus */ html.mwAccHiCo .menu-wrapper-desktop ul:is(.menu, .nav-menu) ul.sub-menu { border: 1px solid #fff; } /* Sub Menu Trigger */ html.mwAccHiCo li.menu-item-has-children > .trigger > div, html.mwAccHiCo .menu-wrapper-desktop ul:is(.menu, .nav-menu) > li.menu-item-has-children > .trigger > div { background-image: url('data:image/svg+xml,'); } /* Header Search Close Button */ html.mwAccHiCo .after-header .close_search>div { background-color: #fff !important; } /* Accessibility Handle */ html.mwAccHiCo .accessibility-handle > div { background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F>'); } /* Buttons */ /* Button, Submit */ html.mwAccHiCo button, html.mwAccHiCo input[type="submit"], html.mwAccHiCo input[type="button"], html.mwAccHiCo a.button, /* Ninja Forms */ html.mwAccHiCo body .nf-form-content button, html.mwAccHiCo body .nf-form-content input[type=button], html.mwAccHiCo body .nf-form-content input[type=submit], html.mwAccHiCo /* Header Search */ html.mwAccHiCo .after-header form input.search-submit[type="submit"], html.mwAccHiCo /* WP Bakery Page Builder */ html.mwAccHiCo #page .vc_btn3-container .vc_general.vc_btn3, html.mwAccHiCo #page .vc_btn3-container .vc_btn3 { color: #d8fa4c !important; background: #000 !important; border-color: #fff !important; border-style: solid !important; } /* Sidebars */ html.mwAccHiCo .sidebar-content { background: #000 !important; border-color: #fff !important; } html.mwAccHiCo .sidebar-handle { background: #000 !important; border-color: #fff !important; border-style: solid none solid solid !important; } html.mwAccHiCo .sidebar-handle.contact-handle { border-style: solid none solid solid !important; } /* High Contrast Toggle Elements */ .high-contrast-element { display: none; } html.mwAccHiCo .high-contrast-element { display: block; } html.mwAccHiCo *:has( + .high-contrast-element) { display: none; } /* Footer */ html.mwAccHiCo footer#colophon .footersection:is(.footersection-2, .footersection-4) { background-color: #000; } /* Lernmodule */ html.mwAccHiCo .single-lernmodul .lm-wrapper { border: 1px solid #fff !important; } html.mwAccHiCo .single-lernmodul :is(.lm-title, .lm-content .lm-content-wrapper) { background: #000 !important; border: 1px solid #fff !important; } /* Teilnahmebescheinigungen */ html.mwAccHiCo .lp-category-list .lp-category { background: #000 !important; border: 1px solid #fff !important; } /* Video Slider */ /* Navi Buttons */ html.mwAccHiCo .mw-videoslider-container button.mw-nav-arrow.mw-nav-prev { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 70'%3E%3Cpath fill='%23fff' d='M49.29,62.22l-15.89-27.22,15.89-27.22h-13.32l-15.26,27.22,15.26,27.22h13.32Z'/%3E%3C/svg%3E") !important; } html.mwAccHiCo .mw-videoslider-container button.mw-nav-arrow.mw-nav-next { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 70'%3E%3Cpath fill='%23fff' d='M20.71,7.78l15.89,27.22-15.89,27.22h13.32l15.26-27.22-15.26-27.22h-13.32Z'/%3E%3C/svg%3E") !important; } html.mwAccHiCo .mw-videoslider-container button.mw-nav-arrow:is(:hover, :focus, :focus-within, :focus-visible, :active) { color: transparent !important; } /* Navi Dots */ html.mwAccHiCo .mw-videoslider-dots button.active { background-color: #D7FA4C !important; border-color: #D7FA4C !important; } /*----- Grayscale -----*/ /*----- mwAccGrSc -----*/ html.mwAccGrSc { filter: grayscale(100%); } /*------- MW Videoslider Startseite ---------*/ #page .mw-videoslider-container { position: relative; width: 100% !important; max-width: 1920px !important; max-width: 100% !important; margin: 20px auto 0; overflow: hidden; height: 655px; height: auto; transition: height 0.3s ease; /* font-size: 4em; */ } @media screen and (min-width: 768px){} .mw-videoslider-wrapper { /* display: flex; transition: transform 0.5s ease-in-out; */ position: relative; height: calc(100% - 55px); /* height: auto; */ } /* Slides */ .mw-videoslider-slide { /* position: relative; flex: 0 0 60%; margin: 0 1%; */ overflow: hidden; position: absolute; top: 0; left: 40%; width: 80%; width: 60%; height: 100%; height: auto; display: flex; align-items: center; z-index: 0; transition: left 0.5s ease, height 0.5s ease; transition: all 0.5s ease; } .mw-videoslider-slide:not(.mw-slide-active) { height: 100% !important; } .mw-videoslider-slide .mw-videoslider-slide-container { position: relative; height: 0; width: 100%; padding-top: 66.5%; padding-top: 56.25%; display: flex; justify-content: center; align-items: center; } /* .mw-videoslider-slide:not(.mw-slide-active) .mw-videoslider-slide-container { top: 50%; transform: translateY(-50%); } */ .mw-videoslider-slide .mw-videoslider-slide-wrapper { width: 100%; aspect-ratio: 3 / 2; aspect-ratio: 16 / 9; position: relative; position: absolute; top: 0; left: 0; width: 100%; } /* Headlines */ .mw-videoslider-slide .slide-overlay h3 { font-size: 4vw; } /* Active Slide */ .mw-videoslider-slide.mw-slide-active { width: 90%; left: 5%; z-index: 2; } .mw-videoslider-slide.mw-slide-active .slide-overlay h3 { font-size: 5.4vw; } .mw-videoslider-slide.mw-slide-active:focus { /* outline: none; */ outline: 2px solid var(--color-focus); } .mw-videoslider-slide.mw-slide-active:is(:hover, :focus, :active, :focus-visible, :focus-within) .slide-video { opacity: 1; z-index: 1; display: block; } /* Previous & Next Slide */ .mw-videoslider-slide:is(.mw-next-slide, .mw-previous-slide) { z-index: 1; } /* Previous */ .mw-videoslider-slide.mw-previous-slide { left: -70%; left: -50%; } .mw-before-previous-slide { left: -80%; } /* Next */ .mw-videoslider-slide.mw-next-slide { left: 90%; } .mw-videoslider-slide.mw-after-next-slide { left: 100%; } /* Slide Overlay */ /* Post Image */ .slide-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; } /* Overlay */ .slide-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 32px; background: rgba(0, 0, 0, 0.5); display: flex; justify-content: center; align-items: flex-end; color: white; } .slide-overlay h3 { color: #fff; font-family: 'Barlow', sans-serif !important; width: 100%; text-align: left; font-weight: bold; hyphens: none; -webkit-hyphens: none; -moz-hyphens: none; -ms-hyphens: none; -o-hyphens: none; font-size: 4vw; transition: font-size .5s ease; } /* Colors Overlay */ .mw-videoslider-slide:nth-child(6n + 1) .slide-overlay { background: rgba(248,178,113,0.84); } .mw-videoslider-slide:nth-child(6n + 2) .slide-overlay { background: rgba(190,201,163,0.84); } .mw-videoslider-slide:nth-child(6n + 3) .slide-overlay { background: rgba(243,153,123,0.84); } .mw-videoslider-slide:nth-child(6n + 4) .slide-overlay { background: rgba(171,196,196,0.84); } .mw-videoslider-slide:nth-child(6n + 5) .slide-overlay { background: rgba(243,153,123,0.84); } .mw-videoslider-slide:nth-child(6n + 6) .slide-overlay { background: rgba(171,196,196,0.84); } /* Slide Video */ .slide-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.5s ease-in-out; z-index: 0; display: none; } .video-playing .slide-video { display: block; opacity: 1; z-index: 2; } .slide-video video { width: 100%; height: 100%; object-fit: cover; background-color: #fff; object-position: center; object-fit: contain; object-fit: cover; } /* Button - Mehr erfahren */ .slide-button { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); padding: 14px 20px; background-color: var(--purple-kf); background-color: var(--grey-button); color: #000; text-decoration: none; font-size: 1.2em; font-weight: 500 !important; line-height: normal; display: inline-block; } .slide-button:is(:hover, :focus, :focus-within, :focus-visible, :active) { text-decoration: none !important; color: #fff !important; background-color: var(--purple-kf); } .slide-button:after { content: '\f054'; content: ''; display: flex; align-items: center; justify-content: center; font-family: 'Font Awesome 5 Free'; font-weight: 900; font-size: 1.5em; position: absolute; left: calc(100% + 5px); left: 100%; border-left: 2px solid var(--light-grey); top: 0; height: 100%; aspect-ratio: 1; background-color: var(--purple-kf); color: #fff; background-image: url(/wp-content/themes/twentytwelve-child/images/chevron-right.svg); background-size: 90%; background-repeat: no-repeat; background-position: center; } /*----- Slider Navi -----*/ /* Buttons Next & Prev */ /* .mw-videoslider-navigation { position: absolute; top: 50%; width: 100%; transform: translateY(-50%); z-index: 5; display: flex; justify-content: center; } .mw-videoslider-navigation-wrapper { display: flex; justify-content: space-between; width: calc(50% + 60px); } */ .mw-videoslider-container button.mw-nav-arrow { background: none; border: none; font-size: 2em; line-height: 0; color: transparent !important; background-color: var(--purple-kf); border: 1px solid var(--purple-kf); cursor: pointer; z-index: 9; width: 40px; height: 40px; padding: 0; background-size: 90% !important; background-position: center !important; background-repeat: no-repeat !important; position: absolute; top: calc(50% - 55px); left: 0; /* transform: translateY(-50%); */ } .mw-videoslider-container button.mw-nav-arrow.mw-nav-prev { background-image: url(/wp-content/themes/twentytwelve-child/images/chevron-left.svg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 70'%3E%3Cpath fill='%23fff' d='M49.29,62.22l-15.89-27.22,15.89-27.22h-13.32l-15.26,27.22,15.26,27.22h13.32Z'/%3E%3C/svg%3E"); } .mw-videoslider-container button.mw-nav-arrow.mw-nav-next { left: unset; right: 0; background-image: url(/wp-content/themes/twentytwelve-child/images/chevron-right.svg); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 70'%3E%3Cpath fill='%23fff' d='M20.71,7.78l15.89,27.22-15.89,27.22h13.32l15.26-27.22-15.26-27.22h-13.32Z'/%3E%3C/svg%3E"); } .mw-videoslider-container button.mw-nav-arrow.mw-nav-prev:is(:focus, :focus-within, :focus-visible, :active) { background-color: var(--purple-kf); } .mw-videoslider-container button.mw-nav-arrow.mw-nav-prev:hover { background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 70'%3E%3Cpath fill='%23773876' d='M49.29,62.22l-15.89-27.22,15.89-27.22h-13.32l-15.26,27.22,15.26,27.22h13.32Z'/%3E%3C/svg%3E"); } .mw-videoslider-container button.mw-nav-arrow.mw-nav-next:hover { background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 70 70'%3E%3Cpath fill='%23773876' d='M20.71,7.78l15.89,27.22-15.89,27.22h13.32l15.26-27.22-15.26-27.22h-13.32Z'/%3E%3C/svg%3E"); } /* Buttons Dots */ .mw-videoslider-dots { text-align: center; margin-top: 10px; } .mw-videoslider-dots button { width: 10px; height: 10px; margin: 0 5px; padding: 0; background: var(--grey-button); border: none; border-radius: 50%; cursor: pointer; } .mw-videoslider-dots button.active { background: var(--orange-headlines); } /* Tablet View */ @media screen and (min-width: 600px){ /* Nav Arrows */ .mw-videoslider-container button.mw-nav-arrow.mw-nav-prev { left: calc(5% - 25px); } .mw-videoslider-container button.mw-nav-arrow.mw-nav-next { right: calc(5% - 25px); } } @media screen and (min-width: 768px){ /* Slides */ .mw-videoslider-slide { width: 70%; width: 60%; } /* Active Slide */ .mw-videoslider-slide.mw-slide-active { width: 80%; left: 10%; } /* Previous & Next Slide */ /* Previous */ .mw-videoslider-slide.mw-previous-slide { left: -50%; } .mw-before-previous-slide { left: -70%; } /* Next */ .mw-videoslider-slide.mw-next-slide { left: 80%; } .mw-videoslider-slide.mw-after-next-slide { left: 100%; } /* Nav Arrows */ .mw-videoslider-container button.mw-nav-arrow { width: 50px; height: 50px; } .mw-videoslider-container button.mw-nav-arrow.mw-nav-prev { left: calc(10% - 25px); } .mw-videoslider-container button.mw-nav-arrow.mw-nav-next { right: calc(10% - 25px); } } /* Laptop & Tablet Landscape View */ @media screen and (min-width: 1024px){ /* Slides */ .mw-videoslider-slide { width: 40%; } .mw-videoslider-slide .slide-overlay h3 { font-size: 3.2vw; } /* Active */ .mw-videoslider-slide.mw-slide-active { width: 60%; left: 20%; } .mw-videoslider-slide.mw-slide-active .slide-overlay h3 { font-size: 4vw; } /* Previous */ .mw-videoslider-slide.mw-previous-slide { left: -20%; } /* Before Previous */ .mw-videoslider-slide.mw-before-previous-slide { left: -40%; } /* Next */ .mw-videoslider-slide.mw-next-slide { left: 80%; } /* After Next */ .mw-videoslider-slide.mw-after-next-slide { left: 100%; } /* Nav Arrows */ .mw-videoslider-container button.mw-nav-arrow.mw-nav-prev { left: calc(20% - 25px); } .mw-videoslider-container button.mw-nav-arrow.mw-nav-next { right: calc(20% - 25px); } } /* Desktop View*/ @media screen and (min-width: 1200px){ /* Slides */ .mw-videoslider-slide { width: 20%; } .mw-videoslider-slide .slide-overlay h3 { font-size: 1.4vw; } /* Active */ .mw-videoslider-slide.mw-slide-active { width: 50%; left: 25%; } /* Previous */ .mw-videoslider-slide.mw-previous-slide { left: 5%; width: 35%; } .mw-videoslider-slide.mw-previous-slide .slide-overlay h3 { font-size: 2.4vw; } /* Before Previous */ .mw-videoslider-slide.mw-before-previous-slide { left: -10%; } /* Next */ .mw-videoslider-slide.mw-next-slide { left: 60%; width: 35%; } .mw-videoslider-slide.mw-next-slide .slide-overlay h3 { font-size: 2.4vw; } /* After Next */ .mw-videoslider-slide.mw-after-next-slide { left: 90%; } /* Nav Arrows */ .mw-videoslider-container button.mw-nav-arrow { width: 60px; height: 60px; } .mw-videoslider-container button.mw-nav-arrow.mw-nav-prev { left: calc(25% - 30px); } .mw-videoslider-container button.mw-nav-arrow.mw-nav-next { right: calc(25% - 30px); } } /* Large Screen View*/ @media screen and (min-width: 1600px){ /* Slides */ .mw-videoslider-slide { width: 360px; } .mw-videoslider-slide .slide-overlay h3 { font-size: 32px; } /* Active */ .mw-videoslider-slide.mw-slide-active { width: 780px; left: calc(50% - 390px); } .mw-videoslider-slide.mw-slide-active .slide-overlay h3 { font-size: 60px; } /* Previous */ .mw-videoslider-slide.mw-previous-slide { left: calc(50% - 740px); width: 660px; width: 600px; } .mw-videoslider-slide.mw-previous-slide .slide-overlay h3 { font-size: 40px; } /* Before Previous */ .mw-videoslider-slide.mw-before-previous-slide { left: 0; } /* Next */ .mw-videoslider-slide.mw-next-slide { left: calc(50% + 80px); width: 660px; width: 600px; } .mw-videoslider-slide.mw-next-slide .slide-overlay h3 { font-size: 52px; } /* After Next */ .mw-videoslider-slide.mw-after-next-slide { left: calc(100% - 360px); } /* Nav Arrows */ .mw-videoslider-container button.mw-nav-arrow.mw-nav-prev { left: calc(50% - 420px); } .mw-videoslider-container button.mw-nav-arrow.mw-nav-next { right: calc(50% - 420px); } } /* Wide Screens */ @media screen and (min-width: 2100px){ /* Previous */ .mw-videoslider-slide.mw-previous-slide { left: calc(50% - 940px); } /* Next */ .mw-videoslider-slide.mw-next-slide { left: calc(50% + 280px); left: calc(50% + 340px); } } @media screen and (min-width: 2200px){ /* Previous */ .mw-videoslider-slide.mw-previous-slide { /* left: calc(50% - 1140px); */ } /* Next */ .mw-videoslider-slide.mw-next-slide { /* left: calc(50% + 480px); */ } } /*------------------------------------------ # Profile ------------------------------------------*/ #profile-sidebar, .lp-content-area .lp-profile-left, .learn-press-tabs__item.avatar, .learn-press-tabs__item.cover-image { display: none !important; } #learn-press-profile .lp-content-area { display: flex; flex-direction: column; gap: 40px; } #learn-press-profile .lp-content-area > * { width: 100%; max-width: 800px; margin: 0 auto; padding: 0; } .form-field.form-field__bio, .form-field.form-field__profile-social { display: none; } /* Finished Courses / Lernfeld – Icon */ .lm-finished-course { position: absolute; top: 0; left: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background-color: var(--purple-kf); } .lm-finished-course .lm-finished-course-icon:before, .lm-finished-lernfeld-icon:before, .lm-not-finished-lernfeld-icon:before { content: '\e5ca'; display: inline; font-family: 'Material Symbols Sharp'; font-size: 2em; color: #fff; } .lm-not-finished-lernfeld-icon:before { content: '\e5cd'; } .lm-finished-lernfeld-icon, .lm-not-finished-lernfeld-icon { /* position: absolute; top: 0; left: 0; */ width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background-color: var(--purple-kf); margin-top: 3px; } .lm-not-finished-lernfeld-icon { background-color: transparent; } .lm-not-finished-lernfeld-icon:before { color: #a1a1a1; } /*----- Videos -----*/ /* Video Subtitle */ .mejs-captions-text, .mejs-captions-text * { color: white !important; background-color: rgba(0,0,0,0.7) !important; font-size: 1.4em !important; line-height: 1.2 !important; font-family: 'Barlow', sans-serif !important; } /*----- Registration Notice -----*/ #registration-notice { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; color: #ffffff; padding: 12px 20px; text-align: center; font-size: 15px; line-height: 1.4; transform: translateY(-100%); transition: transform 0.4s ease; } #registration-notice.show { transform: translateY(0); } #registration-notice .registration-notice-wrapper { background: var(--orange-kf); color: #ffffff; padding: 12px 20px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7); border-radius: 8px; } #registration-notice p { margin: 0; } @media (max-width: 600px) { #registration-notice { font-size: 14px; padding: 10px 12px; } }